From bba3dd4f287b8718dc5bd89f1239adcac561a467 Mon Sep 17 00:00:00 2001
From: Petar Todorov <41293735+PekoPPT@users.noreply.github.com>
Date: Sun, 13 Apr 2025 23:44:48 +0300
Subject: [PATCH] docs: move options api demos to public repo

---
 vue-options-api-demos/README.md               |    37 +
 .../animation/animations/entering/main.js     |     4 +
 .../animation/animations/entering/main.vue    |    40 +
 .../animation/animations/entering/styles.css  |    18 +
 .../animation/animations/exiting/main.js      |     4 +
 .../animation/animations/exiting/main.vue     |    41 +
 .../animation/animations/exiting/styles.css   |    22 +
 .../animation/api/expand-props/main.js        |     4 +
 .../animation/api/expand-props/main.vue       |    77 +
 .../animation/api/expand-props/styles.css     |    11 +
 .../animation/api/fade-props/main.js          |     4 +
 .../animation/api/fade-props/main.vue         |    39 +
 .../animation/api/fade-props/styles.css       |    11 +
 .../animation/api/push-props/main.js          |     4 +
 .../animation/api/push-props/main.vue         |    77 +
 .../animation/api/push-props/styles.css       |    11 +
 .../animation/api/reveal-props/main.js        |     4 +
 .../animation/api/reveal-props/main.vue       |    77 +
 .../animation/api/reveal-props/styles.css     |    11 +
 .../animation/api/slide-props/main.js         |     4 +
 .../animation/api/slide-props/main.vue        |    79 +
 .../animation/api/slide-props/styles.css      |    11 +
 .../animation/api/zoom-props/main.js          |     4 +
 .../animation/api/zoom-props/main.vue         |    65 +
 .../animation/api/zoom-props/styles.css       |    11 +
 .../animation/appearance/child/main.js        |     4 +
 .../animation/appearance/child/main.vue       |    39 +
 .../animation/appearance/child/styles.css     |    18 +
 .../animation/appearance/default/main.js      |     4 +
 .../animation/appearance/default/main.vue     |    39 +
 .../animation/appearance/default/styles.css   |    19 +
 .../animation/appearance/parent/main.js       |     4 +
 .../animation/appearance/parent/main.vue      |    55 +
 .../animation/appearance/parent/styles.css    |    19 +
 .../animation/configuration/main.js           |     4 +
 .../animation/configuration/main.vue          |    39 +
 .../animation/configuration/styles.css        |    11 +
 .../animation/direction/expand/main.js        |     4 +
 .../animation/direction/expand/main.vue       |    77 +
 .../animation/direction/expand/styles.css     |    11 +
 .../animation/direction/fade/main.js          |     4 +
 .../animation/direction/fade/main.vue         |    39 +
 .../animation/direction/fade/styles.css       |    11 +
 .../animation/direction/push/main.js          |     4 +
 .../animation/direction/push/main.vue         |    77 +
 .../animation/direction/push/styles.css       |    11 +
 .../animation/direction/reveal/main.js        |     4 +
 .../animation/direction/reveal/main.vue       |    77 +
 .../animation/direction/reveal/styles.css     |    11 +
 .../animation/direction/slide/main.js         |     4 +
 .../animation/direction/slide/main.vue        |    79 +
 .../animation/direction/slide/styles.css      |    11 +
 .../animation/direction/zoom/main.js          |     4 +
 .../animation/direction/zoom/main.vue         |    65 +
 .../animation/direction/zoom/styles.css       |    11 +
 .../animation/disabled/main.js                |     4 +
 .../animation/disabled/main.vue               |    56 +
 .../animation/disabled/styles.css             |    11 +
 .../animation/duration/main.js                |     4 +
 .../animation/duration/main.vue               |    44 +
 .../animation/duration/styles.css             |    11 +
 .../animation/overview/main.js                |     4 +
 .../animation/overview/main.vue               |   103 +
 .../animation/overview/styles.css             |    15 +
 .../animation/types/expand/main.js            |     4 +
 .../animation/types/expand/main.vue           |    38 +
 .../animation/types/expand/styles.css         |    11 +
 .../animation/types/fade/main.js              |     4 +
 .../animation/types/fade/main.vue             |    36 +
 .../animation/types/fade/styles.css           |    11 +
 .../animation/types/push/main.js              |     4 +
 .../animation/types/push/main.vue             |    36 +
 .../animation/types/push/styles.css           |    11 +
 .../animation/types/reveal/main.js            |     4 +
 .../animation/types/reveal/main.vue           |    38 +
 .../animation/types/reveal/styles.css         |    11 +
 .../animation/types/slide/main.js             |     4 +
 .../animation/types/slide/main.vue            |    38 +
 .../animation/types/slide/styles.css          |    11 +
 .../animation/types/zoom/main.js              |     4 +
 .../animation/types/zoom/main.vue             |    36 +
 .../animation/types/zoom/styles.css           |    11 +
 .../configurator/ButtonStyleConfigurator.vue  |   189 +
 .../button/appearance/configurator/main.js    |     4 +
 .../button/appearance/configurator/main.vue   |    63 +
 .../button/appearance/fill-mode/main.js       |     4 +
 .../button/appearance/fill-mode/main.vue      |    34 +
 .../buttons/button/appearance/rounded/main.js |     4 +
 .../button/appearance/rounded/main.vue        |    44 +
 .../buttons/button/appearance/shape/main.js   |     4 +
 .../buttons/button/appearance/shape/main.vue  |    25 +
 .../buttons/button/appearance/size/main.js    |     4 +
 .../buttons/button/appearance/size/main.vue   |    34 +
 .../button/appearance/theme-colors/main.js    |     4 +
 .../button/appearance/theme-colors/main.vue   |    64 +
 .../buttons/button/basic/main.js              |     4 +
 .../buttons/button/basic/main.vue             |   195 +
 .../buttons/button/disabled/main.js           |     4 +
 .../buttons/button/disabled/main.vue          |    19 +
 .../buttons/button/events/main.js             |     4 +
 .../buttons/button/events/main.vue            |    38 +
 .../buttons/button/icon/main.js               |     4 +
 .../buttons/button/icon/main.vue              |    30 +
 .../buttons/button/primary/main.js            |     4 +
 .../buttons/button/primary/main.vue           |    14 +
 .../buttons/button/toggleable/main.js         |     4 +
 .../buttons/button/toggleable/main.vue        |    18 +
 .../buttons/buttongroup/basic/main.js         |     4 +
 .../buttons/buttongroup/basic/main.vue        |    58 +
 .../buttons/buttongroup/disabled/main.js      |     4 +
 .../buttons/buttongroup/disabled/main.vue     |    31 +
 .../configurator/ChipStyleConfigurator.vue    |   159 +
 .../chip/appearance/configurator/main.js      |     4 +
 .../chip/appearance/configurator/main.vue     |   121 +
 .../buttons/chip/appearance/fill-mode/main.js |     4 +
 .../chip/appearance/fill-mode/main.vue        |    42 +
 .../buttons/chip/appearance/rounded/main.js   |     4 +
 .../buttons/chip/appearance/rounded/main.vue  |    81 +
 .../buttons/chip/appearance/size/main.js      |     4 +
 .../buttons/chip/appearance/size/main.vue     |    63 +
 .../chip/appearance/theme-colors/main.js      |     4 +
 .../chip/appearance/theme-colors/main.vue     |    47 +
 .../buttons/chip/avatar/CustomChip.vue        |    33 +
 .../buttons/chip/avatar/main.js               |     4 +
 .../buttons/chip/avatar/main.vue              |    66 +
 .../buttons/chip/customization/CustomChip.vue |    33 +
 .../buttons/chip/customization/main.js        |     4 +
 .../buttons/chip/customization/main.vue       |    74 +
 .../buttons/chip/disabled/CustomChip.vue      |    24 +
 .../buttons/chip/disabled/main.js             |     4 +
 .../buttons/chip/disabled/main.vue            |    58 +
 .../buttons/chip/getting-started/main.js      |     4 +
 .../buttons/chip/getting-started/main.vue     |   376 +
 .../buttons/chip/remove-icon/CustomChip.vue   |    25 +
 .../buttons/chip/remove-icon/main.js          |     4 +
 .../buttons/chip/remove-icon/main.vue         |    66 +
 .../buttons/chip/remove/CustomChip.vue        |    23 +
 .../buttons/chip/remove/main.js               |     4 +
 .../buttons/chip/remove/main.vue              |    55 +
 .../buttons/chip/select-icon/CustomChip.vue   |    24 +
 .../buttons/chip/select-icon/main.js          |     4 +
 .../buttons/chip/select-icon/main.vue         |    68 +
 .../buttons/chip/types/CustomChip.vue         |    32 +
 .../buttons/chip/types/main.js                |     4 +
 .../buttons/chip/types/main.vue               |    67 +
 .../buttons/chiplist/appearance/main.js       |     4 +
 .../buttons/chiplist/appearance/main.vue      |    54 +
 .../chiplist/controlled/CustomChip.vue        |    23 +
 .../buttons/chiplist/controlled/main.js       |     4 +
 .../buttons/chiplist/controlled/main.vue      |    60 +
 .../chiplist/customization/CustomChip.vue     |    44 +
 .../buttons/chiplist/customization/main.js    |     4 +
 .../buttons/chiplist/customization/main.vue   |    67 +
 .../buttons/chiplist/data-binding/main.js     |     4 +
 .../buttons/chiplist/data-binding/main.vue    |    49 +
 .../buttons/chiplist/disabled/CustomChip.vue  |    23 +
 .../buttons/chiplist/disabled/main.js         |     4 +
 .../buttons/chiplist/disabled/main.vue        |    60 +
 .../buttons/chiplist/getting-started/main.js  |     4 +
 .../buttons/chiplist/getting-started/main.vue |    58 +
 .../buttons/chiplist/keyboard/CustomChip.vue  |    23 +
 .../buttons/chiplist/keyboard/main.js         |     4 +
 .../buttons/chiplist/keyboard/main.vue        |    60 +
 .../chiplist/selection/multiple/main.js       |     4 +
 .../chiplist/selection/multiple/main.vue      |    48 +
 .../buttons/chiplist/selection/none/main.js   |     4 +
 .../buttons/chiplist/selection/none/main.vue  |    48 +
 .../buttons/chiplist/selection/single/main.js |     4 +
 .../chiplist/selection/single/main.vue        |    49 +
 .../configurator/ButtonsStyleConfigurator.vue |   189 +
 .../appearance/configurator/main.js           |     4 +
 .../appearance/configurator/main.vue          |    98 +
 .../appearance/fill-mode/main.js              |     4 +
 .../appearance/fill-mode/main.vue             |    77 +
 .../dropdownbutton/appearance/rounded/main.js |     4 +
 .../appearance/rounded/main.vue               |    99 +
 .../dropdownbutton/appearance/shape/main.js   |     4 +
 .../dropdownbutton/appearance/shape/main.vue  |    63 +
 .../dropdownbutton/appearance/size/main.js    |     4 +
 .../dropdownbutton/appearance/size/main.vue   |    74 +
 .../appearance/theme-colors/main.js           |     4 +
 .../appearance/theme-colors/main.vue          |   127 +
 .../customization/items/main.js               |     4 +
 .../customization/items/main.vue              |    43 +
 .../customization/popup/main.js               |     4 +
 .../customization/popup/main.vue              |    40 +
 .../data-binding/objects/main.js              |     4 +
 .../data-binding/objects/main.vue             |    50 +
 .../data-binding/strings/main.js              |     4 +
 .../data-binding/strings/main.vue             |    49 +
 .../buttons/dropdownbutton/disabled/main.js   |     4 +
 .../buttons/dropdownbutton/disabled/main.vue  |    22 +
 .../buttons/dropdownbutton/events/Logger.vue  |    43 +
 .../buttons/dropdownbutton/events/main.js     |     5 +
 .../buttons/dropdownbutton/events/main.vue    |    87 +
 .../buttons/dropdownbutton/icons/main.js      |     4 +
 .../buttons/dropdownbutton/icons/main.vue     |    88 +
 .../buttons/dropdownbutton/keyboard/main.js   |     4 +
 .../buttons/dropdownbutton/keyboard/main.vue  |    49 +
 .../buttons/dropdownbutton/overview/main.js   |     4 +
 .../buttons/dropdownbutton/overview/main.vue  |    52 +
 .../floatingactionbutton/align-offset/main.js |     4 +
 .../align-offset/main.vue                     |    35 +
 .../FloatingActionButtonConfigurator.vue      |   139 +
 .../appearance/configurator/main.js           |     4 +
 .../appearance/configurator/main.vue          |    53 +
 .../appearance/rounded/main.js                |     4 +
 .../appearance/rounded/main.vue               |    57 +
 .../appearance/size/main.js                   |     4 +
 .../appearance/size/main.vue                  |    50 +
 .../appearance/theme/main.js                  |     4 +
 .../appearance/theme/main.vue                 |    56 +
 .../content-types/main.js                     |     4 +
 .../content-types/main.vue                    |    47 +
 .../floatingactionbutton/disabled/main.js     |     4 +
 .../floatingactionbutton/disabled/main.vue    |    35 +
 .../floatingactionbutton/events/main.js       |     4 +
 .../floatingactionbutton/events/main.vue      |    53 +
 .../floatingactionbutton/icons/main.js        |     4 +
 .../floatingactionbutton/icons/main.vue       |    34 +
 .../custom/custom-rendering/CustomItem.vue    |    21 +
 .../items/custom/custom-rendering/main.js     |     4 +
 .../items/custom/custom-rendering/main.vue    |    84 +
 .../items/custom/popup/main.js                |     4 +
 .../items/custom/popup/main.vue               |    45 +
 .../items/databinding/main.js                 |     4 +
 .../items/databinding/main.vue                |    32 +
 .../items/disabled/main.js                    |     4 +
 .../items/disabled/main.vue                   |    27 +
 .../floatingactionbutton/keyboard/main.js     |     4 +
 .../floatingactionbutton/keyboard/main.vue    |    41 +
 .../overview/CustomItem.vue                   |    21 +
 .../floatingactionbutton/overview/main.js     |     4 +
 .../floatingactionbutton/overview/main.vue    |   136 +
 .../position-mode/main.js                     |     4 +
 .../position-mode/main.vue                    |    83 +
 .../floatingactionbutton/positioning/main.js  |     4 +
 .../floatingactionbutton/positioning/main.vue |    49 +
 .../buttons/overview/CustomChip.vue           |    33 +
 .../buttons/overview/main.js                  |     4 +
 .../buttons/overview/main.vue                 |   241 +
 vue-options-api-demos/buttons/rtl/main.js     |     4 +
 vue-options-api-demos/buttons/rtl/main.vue    |   210 +
 .../shared/ButtonStyleConfigurator.vue        |   189 +
 .../shared/ButtonsStyleConfigurator.vue       |   189 +
 .../buttons/shared/ChipStyleConfigurator.vue  |   159 +
 .../FloatingActionButtonConfigurator.vue      |   160 +
 .../configurator/ButtonsStyleConfigurator.vue |   189 +
 .../appearance/configurator/main.js           |     4 +
 .../appearance/configurator/main.vue          |    69 +
 .../splitbutton/appearance/fill-mode/main.js  |     4 +
 .../splitbutton/appearance/fill-mode/main.vue |    77 +
 .../splitbutton/appearance/rounded/main.js    |     4 +
 .../splitbutton/appearance/rounded/main.vue   |    99 +
 .../splitbutton/appearance/size/main.js       |     4 +
 .../splitbutton/appearance/size/main.vue      |    74 +
 .../appearance/theme-colors/main.js           |     4 +
 .../appearance/theme-colors/main.vue          |   127 +
 .../splitbutton/customization/items/main.js   |     4 +
 .../splitbutton/customization/items/main.vue  |    34 +
 .../splitbutton/customization/popup/main.js   |     4 +
 .../splitbutton/customization/popup/main.vue  |    32 +
 .../splitbutton/data-binding/objects/main.js  |     4 +
 .../splitbutton/data-binding/objects/main.vue |    49 +
 .../splitbutton/data-binding/strings/main.js  |     4 +
 .../splitbutton/data-binding/strings/main.vue |    20 +
 .../buttons/splitbutton/disabled/main.js      |     4 +
 .../buttons/splitbutton/disabled/main.vue     |    21 +
 .../buttons/splitbutton/events/Logger.vue     |    43 +
 .../buttons/splitbutton/events/main.js        |     5 +
 .../buttons/splitbutton/events/main.vue       |    91 +
 .../buttons/splitbutton/icons/main.js         |     4 +
 .../buttons/splitbutton/icons/main.vue        |    63 +
 .../buttons/splitbutton/keyboard/main.js      |     4 +
 .../buttons/splitbutton/keyboard/main.vue     |    45 +
 .../buttons/splitbutton/overview/main.js      |     4 +
 .../buttons/splitbutton/overview/main.vue     |    52 +
 .../buttons/toolbar/basic/main.js             |     4 +
 .../buttons/toolbar/basic/main.vue            |   131 +
 .../buttons/toolbar/events/Logger.vue         |    43 +
 .../buttons/toolbar/events/main.js            |     5 +
 .../buttons/toolbar/events/main.vue           |   145 +
 .../fill-mode/ToolbarStyleConfigurator.vue    |    63 +
 .../buttons/toolbar/fill-mode/main.js         |     4 +
 .../buttons/toolbar/fill-mode/main.vue        |   237 +
 .../buttons/toolbar/keyboard/main.js          |     4 +
 .../buttons/toolbar/keyboard/main.vue         |   124 +
 .../ToolbarScrollConfigurator.vue             |    91 +
 .../buttons/toolbar/overflow-scroll/main.js   |     4 +
 .../buttons/toolbar/overflow-scroll/main.vue  |   161 +
 .../buttons/toolbar/overflow-section/main.js  |     4 +
 .../buttons/toolbar/overflow-section/main.vue |   134 +
 .../toolbar/size/ToolbarStyleConfigurator.vue |    62 +
 .../buttons/toolbar/size/main.js              |     4 +
 .../buttons/toolbar/size/main.vue             |   149 +
 .../buttons/toolbar/tools/main.js             |     4 +
 .../buttons/toolbar/tools/main.vue            |   130 +
 .../charts/api/axis-title-position/main.js    |     5 +
 .../charts/api/axis-title-position/main.vue   |    24 +
 .../charts/api/base-unit/main.js              |     5 +
 .../charts/api/base-unit/main.vue             |    40 +
 .../charts/api/category-base-unit/main.js     |     5 +
 .../charts/api/category-base-unit/main.vue    |    40 +
 .../charts/api/dash-type/main.js              |     5 +
 .../charts/api/dash-type/main.vue             |    30 +
 .../charts/api/line-style/main.js             |     5 +
 .../charts/api/line-style/main.vue            |    30 +
 .../charts/api/marker-type/main.js            |     5 +
 .../charts/api/marker-type/main.vue           |    35 +
 .../charts/api/note-label-position/main.js    |     5 +
 .../charts/api/note-label-position/main.vue   |    30 +
 .../charts/api/note-position/main.js          |     5 +
 .../charts/api/note-position/main.vue         |    30 +
 .../charts/chart/box-plot/box-plot-data.json  |   158 +
 .../charts/chart/box-plot/main.js             |     5 +
 .../charts/chart/box-plot/main.vue            |    42 +
 .../charts/chart/bubble/bubble-data.json      |    46 +
 .../charts/chart/bubble/main.js               |     5 +
 .../charts/chart/bubble/main.vue              |    73 +
 .../charts/chart/bullet/main.js               |     5 +
 .../charts/chart/bullet/main.vue              |   189 +
 .../charts/chart/chart-instance/main.js       |     5 +
 .../charts/chart/chart-instance/main.vue      |   139 +
 .../charts/chart/donut-center-visuals/main.js |     5 +
 .../chart/donut-center-visuals/main.vue       |   107 +
 .../power-distribution-data.json              |    13 +
 .../charts/chart/donut-center/main.js         |     5 +
 .../charts/chart/donut-center/main.vue        |    50 +
 .../donut-center/power-distribution-data.json |    13 +
 .../chart/donut-series/donut-series-data.json |    55 +
 .../charts/chart/donut-series/main.js         |     5 +
 .../charts/chart/donut-series/main.vue        |    70 +
 .../charts/chart/donut/main.js                |     5 +
 .../charts/chart/donut/main.vue               |    47 +
 .../chart/donut/power-distribution-data.json  |    13 +
 .../chart/funnel-dynamic/funnel-data.json     |    21 +
 .../charts/chart/funnel-dynamic/main.js       |     5 +
 .../charts/chart/funnel-dynamic/main.vue      |    76 +
 .../chart/funnel-ratio/funnel-data.json       |    21 +
 .../charts/chart/funnel-ratio/main.js         |     5 +
 .../charts/chart/funnel-ratio/main.vue        |    82 +
 .../charts/chart/funnel/funnel-data.json      |    21 +
 .../charts/chart/funnel/main.js               |     5 +
 .../charts/chart/funnel/main.vue              |    56 +
 .../charts/chart/globalization/main.js        |     5 +
 .../charts/chart/globalization/main.vue       |    93 +
 .../chart/heatmap/basic/heatmap-data.js       |   108 +
 .../charts/chart/heatmap/basic/main.js        |     5 +
 .../charts/chart/heatmap/basic/main.vue       |    85 +
 .../chart/heatmap/binding-categories/main.js  |     5 +
 .../chart/heatmap/binding-categories/main.vue |    50 +
 .../chart/heatmap/binding-objects/main.js     |     5 +
 .../chart/heatmap/binding-objects/main.vue    |    48 +
 .../charts/chart/heatmap/color-scale/main.js  |     5 +
 .../charts/chart/heatmap/color-scale/main.vue |    54 +
 .../charts/chart/heatmap/crosshairs/main.js   |     5 +
 .../charts/chart/heatmap/crosshairs/main.vue  |    80 +
 .../chart/heatmap/marker-shapes/main.js       |     5 +
 .../chart/heatmap/marker-shapes/main.vue      |   100 +
 .../charts/chart/heatmap/marker-size/main.js  |     5 +
 .../charts/chart/heatmap/marker-size/main.vue |    91 +
 .../charts/chart/heatmap/pan-zoom/main.js     |     5 +
 .../charts/chart/heatmap/pan-zoom/main.vue    |    73 +
 .../chart/heatmap/tooltips/heatmap-data.js    |   108 +
 .../charts/chart/heatmap/tooltips/main.js     |     5 +
 .../charts/chart/heatmap/tooltips/main.vue    |    53 +
 .../charts/chart/pan-zoom/basic/main.js       |     5 +
 .../charts/chart/pan-zoom/basic/main.vue      |    56 +
 .../charts/chart/pan-zoom/lock/main.js        |     5 +
 .../charts/chart/pan-zoom/lock/main.vue       |    68 +
 .../charts/chart/polar/main.js                |     5 +
 .../charts/chart/polar/main.vue               |    62 +
 .../charts/chart/polar/polar-data.json        |    14 +
 .../charts/chart/pyramid/basic/main.js        |     5 +
 .../charts/chart/pyramid/basic/main.vue       |    74 +
 .../chart/pyramid/dynamic-height/main.js      |     5 +
 .../chart/pyramid/dynamic-height/main.vue     |    88 +
 .../charts/chart/radar/main.js                |     5 +
 .../charts/chart/radar/main.vue               |    61 +
 .../charts/chart/radar/radar-data.json        |    16 +
 .../charts/chart/range-area/main.js           |     5 +
 .../charts/chart/range-area/main.vue          |    71 +
 .../charts/chart/range-area/range-data.json   |    14 +
 .../charts/chart/range-bar/main.js            |     5 +
 .../charts/chart/range-bar/main.vue           |    71 +
 .../charts/chart/range-bar/range-data.json    |    14 +
 .../charts/chart/rendering/main.js            |     5 +
 .../charts/chart/rendering/main.vue           |   128 +
 .../charts/chart/rtl/main.js                  |     5 +
 .../charts/chart/rtl/main.vue                 |   111 +
 .../charts/chart/scatter-line-style/main.js   |     5 +
 .../charts/chart/scatter-line-style/main.vue  |    52 +
 .../scatter-line-style-data.json              |    28 +
 .../charts/chart/scatter-line/main.js         |     5 +
 .../charts/chart/scatter-line/main.vue        |    69 +
 .../chart/scatter-line/scatter-line-data.json |    31 +
 .../charts/chart/scatter-plot/main.js         |     5 +
 .../charts/chart/scatter-plot/main.vue        |    57 +
 .../chart/scatter-plot/scatter-plot-data.json |    17 +
 .../charts/chart/trendlines/basic/main.js     |     5 +
 .../charts/chart/trendlines/basic/main.vue    |    66 +
 .../chart/trendlines/basic/sales-data.js      |   247 +
 .../chart/trendlines/custom-field/main.js     |     5 +
 .../chart/trendlines/custom-field/main.vue    |    67 +
 .../custom-field/stock-data-sample.js         |  2075 ++
 .../chart/trendlines/date-series/main.js      |     5 +
 .../chart/trendlines/date-series/main.vue     |    66 +
 .../trendlines/date-series/sales-data.js      |   247 +
 .../exponential/categorical/main.js           |     5 +
 .../exponential/categorical/main.vue          |    61 +
 .../exponential/categorical/sales-data.js     |   247 +
 .../trendlines/exponential/scatter/main.js    |     5 +
 .../trendlines/exponential/scatter/main.vue   |    54 +
 .../charts/chart/trendlines/forecast/main.js  |     5 +
 .../charts/chart/trendlines/forecast/main.vue |    68 +
 .../chart/trendlines/forecast/sales-data.js   |   247 +
 .../trendlines/hidden-legend-item/main.js     |     5 +
 .../trendlines/hidden-legend-item/main.vue    |    69 +
 .../hidden-legend-item/sales-data.js          |   247 +
 .../trendlines/linear/categorical/main.js     |     5 +
 .../trendlines/linear/categorical/main.vue    |    61 +
 .../linear/categorical/sales-data.js          |   247 +
 .../chart/trendlines/linear/scatter/main.js   |     5 +
 .../chart/trendlines/linear/scatter/main.vue  |    54 +
 .../logarithmic/categorical/main.js           |     5 +
 .../logarithmic/categorical/main.vue          |    61 +
 .../logarithmic/categorical/sales-data.js     |   247 +
 .../trendlines/logarithmic/scatter/main.js    |     5 +
 .../trendlines/logarithmic/scatter/main.vue   |    54 +
 .../moving-average/categorical/main.js        |     5 +
 .../moving-average/categorical/main.vue       |    62 +
 .../moving-average/categorical/sales-data.js  |   247 +
 .../trendlines/moving-average/scatter/main.js |     5 +
 .../moving-average/scatter/main.vue           |    57 +
 .../trendlines/polynomial/categorical/main.js |     5 +
 .../polynomial/categorical/main.vue           |    62 +
 .../polynomial/categorical/sales-data.js      |   247 +
 .../trendlines/polynomial/scatter/main.js     |     5 +
 .../trendlines/polynomial/scatter/main.vue    |    55 +
 .../trendlines/power/categorical/main.js      |     5 +
 .../trendlines/power/categorical/main.vue     |    61 +
 .../power/categorical/sales-data.js           |   247 +
 .../chart/trendlines/power/scatter/main.js    |     5 +
 .../chart/trendlines/power/scatter/main.vue   |    54 +
 .../charts/chart/waterfall/main.js            |     5 +
 .../charts/chart/waterfall/main.vue           |    82 +
 .../chart/waterfall/waterfall-data.json       |    31 +
 .../charts/data-binding/arrays/main.js        |     5 +
 .../charts/data-binding/arrays/main.vue       |    31 +
 .../data-binding/category-field/main.js       |     5 +
 .../data-binding/category-field/main.vue      |    42 +
 .../duplicates-aggregate-custom/main.js       |     5 +
 .../duplicates-aggregate-custom/main.vue      |    52 +
 .../data-binding/duplicates-aggregate/main.js |     5 +
 .../duplicates-aggregate/main.vue             |    47 +
 .../charts/data-binding/duplicates/main.js    |     5 +
 .../charts/data-binding/duplicates/main.vue   |    46 +
 .../charts/data-binding/group-objects/main.js |     5 +
 .../data-binding/group-objects/main.vue       |    72 +
 .../charts/data-binding/labels/main.js        |     5 +
 .../charts/data-binding/labels/main.vue       |    36 +
 .../no-data-overlay-children/main.js          |     5 +
 .../no-data-overlay-children/main.vue         |    48 +
 .../data-binding/no-data-overlay/main.js      |     5 +
 .../data-binding/no-data-overlay/main.vue     |    39 +
 .../charts/data-binding/objects/main.js       |     5 +
 .../charts/data-binding/objects/main.vue      |    41 +
 .../charts/data-binding/values/main.js        |     5 +
 .../charts/data-binding/values/main.vue       |    27 +
 .../charts/elements/axes/axis-config/main.js  |     5 +
 .../charts/elements/axes/axis-config/main.vue |    44 +
 .../charts/elements/axes/categorical/main.js  |     5 +
 .../charts/elements/axes/categorical/main.vue |    46 +
 .../elements/axes/date-aggregates/main.js     |     5 +
 .../elements/axes/date-aggregates/main.vue    |    71 +
 .../axes/date-aggregates/weather-data.js      |   220 +
 .../elements/axes/label-rotation/main.js      |     5 +
 .../elements/axes/label-rotation/main.vue     |    52 +
 .../axes/label-rotation/weather-data.js       |   220 +
 .../elements/axes/max-divisions/main.js       |     5 +
 .../elements/axes/max-divisions/main.vue      |    57 +
 .../axes/max-divisions/weather-data.js        |   220 +
 .../charts/elements/axes/multi-axis/main.js   |     5 +
 .../charts/elements/axes/multi-axis/main.vue  |   162 +
 .../axes/range-labels/covid-data.json         |   593 +
 .../charts/elements/axes/range-labels/main.js |     5 +
 .../elements/axes/range-labels/main.vue       |    92 +
 .../charts/elements/axes/scatter/main.js      |     5 +
 .../charts/elements/axes/scatter/main.vue     |    55 +
 .../elements/axes/time-intervals/main.js      |     5 +
 .../elements/axes/time-intervals/main.vue     |    69 +
 .../axes/time-intervals/weather-data.js       |   220 +
 .../charts/elements/axes/time-series/main.js  |     5 +
 .../charts/elements/axes/time-series/main.vue |    48 +
 .../elements/axes/time-series/weather-data.js |   220 +
 .../charts/elements/chart-area/main.js        |     5 +
 .../charts/elements/chart-area/main.vue       |    33 +
 .../elements/crosshairs/cursor-values/main.js |     5 +
 .../crosshairs/cursor-values/main.vue         |    65 +
 .../elements/crosshairs/overview/main.js      |     5 +
 .../elements/crosshairs/overview/main.vue     |    60 +
 .../elements/error-bars/array-values/main.js  |     5 +
 .../elements/error-bars/array-values/main.vue |    31 +
 .../charts/elements/error-bars/custom/main.js |     5 +
 .../elements/error-bars/custom/main.vue       |    39 +
 .../error-bars/numeric-values/main.js         |     5 +
 .../error-bars/numeric-values/main.vue        |    31 +
 .../elements/error-bars/overview/main.js      |     5 +
 .../elements/error-bars/overview/main.vue     |    52 +
 .../error-bars/percentage-values/main.js      |     5 +
 .../error-bars/percentage-values/main.vue     |    31 +
 .../elements/error-bars/scatter/main.js       |     5 +
 .../elements/error-bars/scatter/main.vue      |    41 +
 .../error-bars/statistical-values/main.js     |     5 +
 .../error-bars/statistical-values/main.vue    |    35 +
 .../labels/override-axis-labels/main.js       |     5 +
 .../labels/override-axis-labels/main.vue      |    43 +
 .../labels/override-series-labels/main.js     |     5 +
 .../labels/override-series-labels/main.vue    |    40 +
 .../charts/elements/labels/style-axis/main.js |     5 +
 .../elements/labels/style-axis/main.vue       |    52 +
 .../labels/style-currency-axis/main.js        |     5 +
 .../labels/style-currency-axis/main.vue       |    33 +
 .../labels/style-currency-series/main.js      |     5 +
 .../labels/style-currency-series/main.vue     |    34 +
 .../labels/style-scatter-series/main.js       |     5 +
 .../labels/style-scatter-series/main.vue      |    55 +
 .../elements/labels/style-series/main.js      |     5 +
 .../elements/labels/style-series/main.vue     |    40 +
 .../elements/labels/visual-axis/main.js       |     5 +
 .../elements/labels/visual-axis/main.vue      |    64 +
 .../elements/labels/visual-series/main.js     |     5 +
 .../elements/labels/visual-series/main.vue    |    59 +
 .../elements/legend/click-legend/main.js      |     5 +
 .../elements/legend/click-legend/main.vue     |    43 +
 .../legend/custom-legend-position/main.js     |     5 +
 .../legend/custom-legend-position/main.vue    |    33 +
 .../elements/legend/hide-legend/main.js       |     5 +
 .../elements/legend/hide-legend/main.vue      |    33 +
 .../elements/legend/legend-items/main.js      |     5 +
 .../elements/legend/legend-items/main.vue     |    91 +
 .../charts/elements/legend/overview/main.js   |     5 +
 .../charts/elements/legend/overview/main.vue  |    33 +
 .../charts/elements/legend/title/main.js      |     5 +
 .../charts/elements/legend/title/main.vue     |    73 +
 .../charts/elements/notes/appearance/main.js  |     5 +
 .../charts/elements/notes/appearance/main.vue |    54 +
 .../charts/elements/notes/axis-notes/main.js  |     5 +
 .../charts/elements/notes/axis-notes/main.vue |    80 +
 .../charts/elements/notes/overview/main.js    |     5 +
 .../charts/elements/notes/overview/main.vue   |    50 +
 .../charts/elements/panes/clip/main.js        |     5 +
 .../charts/elements/panes/clip/main.vue       |    58 +
 .../charts/elements/panes/default/main.js     |     5 +
 .../charts/elements/panes/default/main.vue    |    61 +
 .../charts/elements/panes/overview/main.js    |     5 +
 .../charts/elements/panes/overview/main.vue   |    54 +
 .../charts/elements/plot-area/main.js         |     5 +
 .../charts/elements/plot-area/main.vue        |    33 +
 .../charts/elements/plot-bands/custom/main.js |     5 +
 .../elements/plot-bands/custom/main.vue       |    91 +
 .../charts/elements/plot-bands/labels/main.js |     5 +
 .../elements/plot-bands/labels/main.vue       |    74 +
 .../elements/plot-bands/overview/main.js      |     5 +
 .../elements/plot-bands/overview/main.vue     |    62 +
 .../elements/selection/navigator/main.js      |     5 +
 .../elements/selection/navigator/main.vue     |   102 +
 .../elements/selection/overview/main.js       |     5 +
 .../elements/selection/overview/main.vue      |    47 +
 .../elements/series/configuration/main.js     |     5 +
 .../elements/series/configuration/main.vue    |    43 +
 .../charts/elements/series/overview/main.js   |     5 +
 .../charts/elements/series/overview/main.vue  |    51 +
 .../charts/elements/title/main.js             |     5 +
 .../charts/elements/title/main.vue            |    23 +
 .../elements/tooltips/categorical/main.js     |     5 +
 .../elements/tooltips/categorical/main.vue    |    61 +
 .../charts/elements/tooltips/format/main.js   |     5 +
 .../charts/elements/tooltips/format/main.vue  |    38 +
 .../elements/tooltips/one-tooltip/main.js     |     5 +
 .../elements/tooltips/one-tooltip/main.vue    |    44 +
 .../charts/elements/tooltips/overview/main.js |     5 +
 .../elements/tooltips/overview/main.vue       |    38 +
 .../charts/elements/tooltips/scatter/main.js  |     5 +
 .../charts/elements/tooltips/scatter/main.vue |    52 +
 .../charts/elements/tooltips/template/main.js |     5 +
 .../elements/tooltips/template/main.vue       |    49 +
 .../charts/events/basic/Logger.vue            |    43 +
 .../charts/events/basic/main.js               |     5 +
 .../charts/events/basic/main.vue              |   167 +
 .../charts/events/drag/Logger.vue             |    43 +
 .../charts/events/drag/main.js                |     5 +
 .../charts/events/drag/main.vue               |   139 +
 .../charts/events/select/Logger.vue           |    43 +
 .../charts/events/select/main.js              |     5 +
 .../charts/events/select/main.vue             |   146 +
 .../charts/events/zoom/Logger.vue             |    43 +
 .../charts/events/zoom/main.js                |     5 +
 .../charts/events/zoom/main.vue               |   140 +
 .../charts/export-options/image-size/main.js  |     5 +
 .../charts/export-options/image-size/main.vue |   150 +
 .../charts/export-options/image/main.js       |     5 +
 .../charts/export-options/image/main.vue      |   145 +
 .../charts/export-options/pdf-size/main.js    |     5 +
 .../charts/export-options/pdf-size/main.vue   |   150 +
 .../charts/export-options/pdf/main.js         |     5 +
 .../charts/export-options/pdf/main.vue        |   145 +
 .../charts/export-options/svg/main.js         |     5 +
 .../charts/export-options/svg/main.vue        |   145 +
 .../charts/export-options/visuals/main.js     |     5 +
 .../charts/export-options/visuals/main.vue    |   127 +
 vue-options-api-demos/charts/overview/main.js |     5 +
 .../charts/overview/main.vue                  |   309 +
 .../charts/sankey/auto-layout/main.js         |     5 +
 .../charts/sankey/auto-layout/main.vue        |    55 +
 .../charts/sankey/customization/data/main.js  |     5 +
 .../charts/sankey/customization/data/main.vue |    59 +
 .../sankey/customization/defaults/main.js     |     5 +
 .../sankey/customization/defaults/main.vue    |    61 +
 .../datasets-customize-objects/main.js        |     5 +
 .../datasets-customize-objects/main.vue       |    65 +
 .../data-binding/datasets-objects/main.js     |     5 +
 .../data-binding/datasets-objects/main.vue    |    57 +
 .../charts/sankey/elements/legend/main.js     |     5 +
 .../charts/sankey/elements/legend/main.vue    |    60 +
 .../charts/sankey/elements/title/main.js      |     5 +
 .../charts/sankey/elements/title/main.vue     |    60 +
 .../elements/tooltip/custom-behaviour/main.js |     5 +
 .../tooltip/custom-behaviour/main.vue         |    61 +
 .../elements/tooltip/custom-rendering/main.js |     5 +
 .../tooltip/custom-rendering/main.vue         |    71 +
 .../custom-rendering/tooltip-link-content.vue |    15 +
 .../custom-rendering/tooltip-node-content.vue |    13 +
 .../sankey/elements/tooltip/default/main.js   |     5 +
 .../sankey/elements/tooltip/default/main.vue  |    60 +
 .../charts/sankey/events/main.js              |     5 +
 .../charts/sankey/events/main.vue             |    71 +
 .../charts/sankey/export/custom/main.js       |     5 +
 .../charts/sankey/export/custom/main.vue      |    89 +
 .../charts/sankey/export/image-size/main.js   |     5 +
 .../charts/sankey/export/image-size/main.vue  |    75 +
 .../charts/sankey/export/image/main.js        |     5 +
 .../charts/sankey/export/image/main.vue       |    72 +
 .../sankey/export/pdf-paper-size/main.js      |     5 +
 .../sankey/export/pdf-paper-size/main.vue     |    88 +
 .../charts/sankey/export/pdf/main.js          |     5 +
 .../charts/sankey/export/pdf/main.vue         |    72 +
 .../charts/sankey/export/svg/main.js          |     5 +
 .../charts/sankey/export/svg/main.vue         |    72 +
 .../charts/sankey/keyboard-navigation/main.js |     5 +
 .../sankey/keyboard-navigation/main.vue       |    60 +
 .../charts/sankey/overview/main.js            |     5 +
 .../charts/sankey/overview/main.vue           |    60 +
 .../series-types/area/100-stacked/main.js     |     5 +
 .../series-types/area/100-stacked/main.vue    |    29 +
 .../charts/series-types/area/basic/main.js    |     5 +
 .../charts/series-types/area/basic/main.vue   |    47 +
 .../series-types/area/line-style/main.js      |     5 +
 .../series-types/area/line-style/main.vue     |    77 +
 .../charts/series-types/area/stacked/main.js  |     5 +
 .../charts/series-types/area/stacked/main.vue |    39 +
 .../charts/series-types/area/vertical/main.js |     5 +
 .../series-types/area/vertical/main.vue       |    37 +
 .../series-types/bar/100-stacked/main.js      |     5 +
 .../series-types/bar/100-stacked/main.vue     |    63 +
 .../charts/series-types/bar/basic/main.js     |     5 +
 .../charts/series-types/bar/basic/main.vue    |    53 +
 .../charts/series-types/bar/column/main.js    |     5 +
 .../charts/series-types/bar/column/main.vue   |    29 +
 .../charts/series-types/bar/gap/main.js       |     5 +
 .../charts/series-types/bar/gap/main.vue      |    44 +
 .../charts/series-types/bar/spacing/main.js   |     5 +
 .../charts/series-types/bar/spacing/main.vue  |    44 +
 .../series-types/bar/stacked-group/main.js    |     5 +
 .../series-types/bar/stacked-group/main.vue   |    65 +
 .../charts/series-types/bar/stacked/main.js   |     5 +
 .../charts/series-types/bar/stacked/main.vue  |    63 +
 .../charts/series-types/line/basic/main.js    |     5 +
 .../charts/series-types/line/basic/main.vue   |    56 +
 .../series-types/line/line-style/main.js      |     5 +
 .../series-types/line/line-style/main.vue     |    79 +
 .../charts/series-types/line/vertical/main.js |     5 +
 .../series-types/line/vertical/main.vue       |    41 +
 .../charts/series-types/pie/basic/main.js     |     5 +
 .../charts/series-types/pie/basic/main.vue    |    75 +
 .../charts/shared/box-plot-data.json          |   158 +
 .../charts/shared/bubble-data.json            |    46 +
 .../charts/shared/covid-data.json             |   593 +
 .../charts/shared/donut-series-data.json      |    55 +
 .../charts/shared/funnel-data.json            |    21 +
 .../charts/shared/polar-data.json             |    14 +
 .../shared/power-distribution-data.json       |    13 +
 .../charts/shared/radar-data.json             |    16 +
 .../charts/shared/range-data.json             |    14 +
 .../charts/shared/sales-data.js               |   247 +
 .../charts/shared/scatter-line-data.json      |    31 +
 .../shared/scatter-line-style-data.json       |    28 +
 .../charts/shared/scatter-plot-data.json      |    17 +
 .../charts/shared/stock-data-sample.js        |  2075 ++
 .../charts/shared/stock-data.json             |   410 +
 .../charts/shared/waterfall-data.json         |    31 +
 .../charts/shared/weather-data.js             |   220 +
 .../charts/sparkline/main.js                  |     5 +
 .../charts/sparkline/main.vue                 |    81 +
 .../charts/stock-chart/default/main.js        |     5 +
 .../charts/stock-chart/default/main.vue       |    75 +
 .../stock-chart/default/stock-data.json       |   410 +
 .../charts/stock-chart/filter-data/main.js    |     5 +
 .../charts/stock-chart/filter-data/main.vue   |    75 +
 .../stock-chart/filter-data/stock-data.json   |   410 +
 .../charts/stock-chart/multiple-panes/main.js |     5 +
 .../stock-chart/multiple-panes/main.vue       |   106 +
 .../multiple-panes/stock-data.json            |   410 +
 .../charts/styling/dimensions/main.js         |     5 +
 .../charts/styling/dimensions/main.vue        |    60 +
 .../charts/styling/pattern-fills/main.js      |     5 +
 .../charts/styling/pattern-fills/main.vue     |   104 +
 .../charts/styling/range/main.js              |     5 +
 .../charts/styling/range/main.vue             |    79 +
 .../common/adaptive-mode/main.js              |     4 +
 .../common/adaptive-mode/main.vue             |    61 +
 .../ai-prompt/commands/main.js                |     4 +
 .../ai-prompt/commands/main.vue               |   111 +
 .../ai-prompt/custom-template/main.js         |     4 +
 .../ai-prompt/custom-template/main.vue        |   156 +
 .../ai-prompt/custom-toolbar/ai-data.js       |   535 +
 .../ai-prompt/custom-toolbar/main.js          |     4 +
 .../ai-prompt/custom-toolbar/main.vue         |   180 +
 .../ai-prompt/events/Logger.vue               |    43 +
 .../ai-prompt/events/main.js                  |     5 +
 .../ai-prompt/events/main.vue                 |   133 +
 .../ai-prompt/globalization/main.js           |     4 +
 .../ai-prompt/globalization/main.vue          |    61 +
 .../ai-prompt/overview/ai-data.js             |   535 +
 .../ai-prompt/overview/main.js                |     4 +
 .../ai-prompt/overview/main.vue               |   188 +
 .../ai-prompt/overview/overview-styles.css    |   159 +
 .../ai-prompt/suggestions/ai-data.js          |   535 +
 .../ai-prompt/suggestions/main.js             |     4 +
 .../ai-prompt/suggestions/main.vue            |   116 +
 .../conversational-ui/getting-started/main.js |     4 +
 .../getting-started/main.vue                  |    60 +
 .../conversational-ui/overview/main.js        |     4 +
 .../conversational-ui/overview/main.vue       |    60 +
 .../datatools/filter/basic-usage/main.js      |     4 +
 .../datatools/filter/basic-usage/main.vue     |   114 +
 .../datatools/filter/basic-usage/products.js  |   184 +
 .../built-in/CustomEnumFilter.vue             |    34 +
 .../filter/custom-editors/built-in/main.js    |     4 +
 .../filter/custom-editors/built-in/main.vue   |    97 +
 .../custom-editors/built-in/products.js       |    94 +
 .../custom-component/CustomComboBoxFilter.vue |    53 +
 .../CustomDropDownListFilter.vue              |    32 +
 .../custom-editors/custom-component/main.js   |     4 +
 .../custom-editors/custom-component/main.vue  |   121 +
 .../custom-component/products.js              |    94 +
 .../datatools/filter/custom-operators/main.js |     4 +
 .../filter/custom-operators/main.vue          |    98 +
 .../filter/custom-operators/products.js       |    94 +
 .../datatools/filter/events/Logger.vue        |    43 +
 .../datatools/filter/events/main.js           |     4 +
 .../datatools/filter/events/main.vue          |    92 +
 .../globalization/basic-usage/es.json         |    53 +
 .../globalization/basic-usage/main.js         |     4 +
 .../globalization/basic-usage/main.vue        |   165 +
 .../datatools/globalization/rtl/main.js       |     4 +
 .../datatools/globalization/rtl/main.vue      |    99 +
 .../pager/basic-usage/Configurator.vue        |   119 +
 .../datatools/pager/basic-usage/main.js       |     4 +
 .../datatools/pager/basic-usage/main.vue      |    84 +
 .../datatools/pager/basic-usage/products.js   |     1 +
 .../datatools/pager/events/handling/main.js   |     4 +
 .../datatools/pager/events/handling/main.vue  |    69 +
 .../datatools/pager/events/prevent/main.js    |     4 +
 .../datatools/pager/events/prevent/main.vue   |    70 +
 .../datatools/pager/responsive/main.js        |     4 +
 .../datatools/pager/responsive/main.vue       |    79 +
 .../pager/template/PagerTemplate.vue          |    92 +
 .../datatools/pager/template/main.js          |     4 +
 .../datatools/pager/template/main.vue         |    46 +
 .../datatools/shared/products.js              |     1 +
 vue-options-api-demos/datatools/tsconfig.json |    29 +
 .../dateinputs/basic/main.js                  |     4 +
 .../dateinputs/basic/main.vue                 |    73 +
 .../dateinputs/calendar/activeview/main.js    |     4 +
 .../dateinputs/calendar/activeview/main.vue   |    17 +
 .../dateinputs/calendar/basic/main.js         |     4 +
 .../dateinputs/calendar/basic/main.vue        |    17 +
 .../dateinputs/calendar/custom/cell/Cell.vue  |    29 +
 .../dateinputs/calendar/custom/cell/main.js   |     4 +
 .../dateinputs/calendar/custom/cell/main.vue  |    26 +
 .../calendar/custom/htmlcell/Cell.vue         |    47 +
 .../calendar/custom/htmlcell/main.js          |     4 +
 .../calendar/custom/htmlcell/main.vue         |    42 +
 .../calendar/custom/title/Title.vue           |    29 +
 .../dateinputs/calendar/custom/title/main.js  |     4 +
 .../dateinputs/calendar/custom/title/main.vue |    30 +
 .../dateinputs/calendar/dateranges/main.js    |     4 +
 .../dateinputs/calendar/dateranges/main.vue   |    20 +
 .../dateinputs/calendar/dates/focused/main.js |     4 +
 .../calendar/dates/focused/main.vue           |    17 +
 .../calendar/dates/multiple/main.js           |     4 +
 .../calendar/dates/multiple/main.vue          |    23 +
 .../dateinputs/calendar/dates/range/main.js   |     4 +
 .../dateinputs/calendar/dates/range/main.vue  |    22 +
 .../calendar/dates/selected/main.js           |     4 +
 .../calendar/dates/selected/main.vue          |    17 +
 .../dateinputs/calendar/disabled/main.js      |     4 +
 .../dateinputs/calendar/disabled/main.vue     |    17 +
 .../dateinputs/calendar/json/main.js          |     4 +
 .../dateinputs/calendar/json/main.vue         |    34 +
 .../dateinputs/calendar/keyboard/main.js      |     4 +
 .../dateinputs/calendar/keyboard/main.vue     |    17 +
 .../dateinputs/calendar/multipleviews/main.js |     4 +
 .../calendar/multipleviews/main.vue           |    36 +
 .../dateinputs/calendar/reverse-range/main.js |     4 +
 .../calendar/reverse-range/main.vue           |    41 +
 .../dateinputs/calendar/viewdepth/main.js     |     4 +
 .../dateinputs/calendar/viewdepth/main.vue    |    34 +
 .../dateinputs/calendar/week-numbers/main.js  |     4 +
 .../dateinputs/calendar/week-numbers/main.vue |    17 +
 .../dateinputs/common/es.json                 |    31 +
 .../DateInputsStyleConfigurator.vue           |   105 +
 .../dateinput/appearance/configurator/main.js |     4 +
 .../appearance/configurator/main.vue          |    49 +
 .../dateinput/appearance/fill-mode/main.js    |     4 +
 .../dateinput/appearance/fill-mode/main.vue   |    95 +
 .../dateinput/appearance/rounded/main.js      |     4 +
 .../dateinput/appearance/rounded/main.vue     |   111 +
 .../dateinput/appearance/size/main.js         |     4 +
 .../dateinput/appearance/size/main.vue        |    92 +
 .../dateinputs/dateinput/basic/main.js        |     4 +
 .../dateinputs/dateinput/basic/main.vue       |    17 +
 .../dateinput/date-ranges/basic/main.js       |     4 +
 .../dateinput/date-ranges/basic/main.vue      |    38 +
 .../dateinput/date-ranges/time/main.js        |     4 +
 .../dateinput/date-ranges/time/main.vue       |    35 +
 .../dateinputs/dateinput/disabled/main.js     |     4 +
 .../dateinputs/dateinput/disabled/main.vue    |    30 +
 .../dateinput/floating-label/main.js          |     4 +
 .../dateinput/floating-label/main.vue         |    29 +
 .../dateinputs/dateinput/formats/main.js      |     4 +
 .../dateinputs/dateinput/formats/main.vue     |    52 +
 .../dateinputs/dateinput/forms/basic/main.js  |     4 +
 .../dateinputs/dateinput/forms/basic/main.vue |    67 +
 .../dateinput/forms/custom-message/main.js    |     4 +
 .../dateinput/forms/custom-message/main.vue   |    68 +
 .../dateinput/forms/disable-styles/main.js    |     4 +
 .../dateinput/forms/disable-styles/main.vue   |    95 +
 .../dateinput/forms/override/main.js          |     4 +
 .../dateinput/forms/override/main.vue         |    97 +
 .../dateinput/incremental-steps/main.js       |     4 +
 .../dateinput/incremental-steps/main.vue      |    31 +
 .../dateinputs/dateinput/input-mode/main.js   |     4 +
 .../dateinputs/dateinput/input-mode/main.vue  |    43 +
 .../dateinputs/dateinput/keyboard/main.js     |     4 +
 .../dateinputs/dateinput/keyboard/main.vue    |    17 +
 .../dateinputs/dateinput/placeholders/main.js |     4 +
 .../dateinput/placeholders/main.vue           |    58 +
 .../dateinputs/dateinput/spin-buttons/main.js |     4 +
 .../dateinput/spin-buttons/main.vue           |    30 +
 .../DateInputsStyleConfigurator.vue           |   105 +
 .../appearance/configurator/main.js           |     4 +
 .../appearance/configurator/main.vue          |    47 +
 .../datepicker/appearance/fill-mode/main.js   |     4 +
 .../datepicker/appearance/fill-mode/main.vue  |    95 +
 .../datepicker/appearance/rounded/main.js     |     4 +
 .../datepicker/appearance/rounded/main.vue    |   111 +
 .../datepicker/appearance/size/main.js        |     4 +
 .../datepicker/appearance/size/main.vue       |    92 +
 .../dateinputs/datepicker/controlled/main.js  |     4 +
 .../dateinputs/datepicker/controlled/main.vue |    34 +
 .../custom/calendar/CustomCalendar.vue        |    28 +
 .../datepicker/custom/calendar/main.js        |     4 +
 .../datepicker/custom/calendar/main.vue       |    27 +
 .../custom/dateinput/CustomDateInput.vue      |    69 +
 .../datepicker/custom/dateinput/main.js       |     4 +
 .../datepicker/custom/dateinput/main.vue      |    29 +
 .../datepicker/custom/popup/CustomPopup.vue   |    27 +
 .../datepicker/custom/popup/main.js           |     4 +
 .../datepicker/custom/popup/main.vue          |    29 +
 .../custom/toggle/CustomToggleButton.vue      |    24 +
 .../datepicker/custom/toggle/main.js          |     4 +
 .../datepicker/custom/toggle/main.vue         |    28 +
 .../dateinputs/datepicker/datelimits/main.js  |     4 +
 .../dateinputs/datepicker/datelimits/main.vue |    29 +
 .../dateinputs/datepicker/default/main.js     |     4 +
 .../dateinputs/datepicker/default/main.vue    |    25 +
 .../datepicker/defaultpopup/main.js           |     4 +
 .../datepicker/defaultpopup/main.vue          |    26 +
 .../dateinputs/datepicker/disabled/main.js    |     4 +
 .../dateinputs/datepicker/disabled/main.vue   |    27 +
 .../dateinputs/datepicker/events/main.js      |     4 +
 .../dateinputs/datepicker/events/main.vue     |    55 +
 .../datepicker/floating-label/main.js         |     4 +
 .../datepicker/floating-label/main.vue        |    31 +
 .../dateinputs/datepicker/focused/main.js     |     4 +
 .../dateinputs/datepicker/focused/main.vue    |    16 +
 .../dateinputs/datepicker/formats/main.js     |     4 +
 .../dateinputs/datepicker/formats/main.vue    |    52 +
 .../dateinputs/datepicker/forms/basic/main.js |     4 +
 .../datepicker/forms/basic/main.vue           |    67 +
 .../datepicker/forms/custom-message/main.js   |     4 +
 .../datepicker/forms/custom-message/main.vue  |    68 +
 .../datepicker/forms/disable-styles/main.js   |     4 +
 .../datepicker/forms/disable-styles/main.vue  |    93 +
 .../datepicker/forms/override/main.js         |     4 +
 .../datepicker/forms/override/main.vue        |    93 +
 .../datepicker/gettingstarted/main.js         |     4 +
 .../datepicker/gettingstarted/main.vue        |    16 +
 .../dateinputs/datepicker/input-mode/main.js  |     4 +
 .../dateinputs/datepicker/input-mode/main.vue |    54 +
 .../dateinputs/datepicker/json/main.js        |     4 +
 .../dateinputs/datepicker/json/main.vue       |    27 +
 .../dateinputs/datepicker/keyboard/main.js    |     4 +
 .../dateinputs/datepicker/keyboard/main.vue   |    27 +
 .../dateinputs/datepicker/overview/es.json    |    31 +
 .../dateinputs/datepicker/overview/main.js    |     4 +
 .../dateinputs/datepicker/overview/main.vue   |    88 +
 .../datepicker/placeholders/main.js           |     4 +
 .../datepicker/placeholders/main.vue          |    53 +
 .../dateinputs/datepicker/popup-state/main.js |     4 +
 .../datepicker/popup-state/main.vue           |    39 +
 .../dateinputs/datepicker/weeknum/main.js     |     4 +
 .../dateinputs/datepicker/weeknum/main.vue    |    15 +
 .../daterangepicker/controlled/main.js        |     4 +
 .../daterangepicker/controlled/main.vue       |    39 +
 .../daterangepicker/controlled/show/main.js   |     4 +
 .../daterangepicker/controlled/show/main.vue  |    37 +
 .../custom/calendar/customCalendar.vue        |    59 +
 .../daterangepicker/custom/calendar/main.js   |     4 +
 .../daterangepicker/custom/calendar/main.vue  |    24 +
 .../custom/dateinput/customEndDateInput.vue   |    46 +
 .../custom/dateinput/customStartDateInput.vue |    46 +
 .../daterangepicker/custom/dateinput/main.js  |     4 +
 .../daterangepicker/custom/dateinput/main.vue |    26 +
 .../daterangepicker/custom/popup/main.js      |     4 +
 .../daterangepicker/custom/popup/main.vue     |    34 +
 .../daterangepicker/default/popup/main.js     |     4 +
 .../daterangepicker/default/popup/main.vue    |    20 +
 .../daterangepicker/default/value/main.js     |     4 +
 .../daterangepicker/default/value/main.vue    |    26 +
 .../daterangepicker/disabled/main.js          |     4 +
 .../daterangepicker/disabled/main.vue         |    24 +
 .../daterangepicker/events/Logger.vue         |    43 +
 .../dateinputs/daterangepicker/events/main.js |     5 +
 .../daterangepicker/events/main.vue           |    50 +
 .../daterangepicker/focused/main.js           |     4 +
 .../daterangepicker/focused/main.vue          |    22 +
 .../daterangepicker/input-mode/main.js        |     4 +
 .../daterangepicker/input-mode/main.vue       |    57 +
 .../daterangepicker/keyboard/main.js          |     4 +
 .../daterangepicker/keyboard/main.vue         |    29 +
 .../daterangepicker/overview/main.js          |     4 +
 .../daterangepicker/overview/main.vue         |    28 +
 .../dateinputs/daterangepicker/ranges/main.js |     4 +
 .../daterangepicker/ranges/main.vue           |    28 +
 .../daterangepicker/reverse/basic/main.js     |     4 +
 .../daterangepicker/reverse/basic/main.vue    |    42 +
 .../daterangepicker/reverse/swap/main.js      |     4 +
 .../daterangepicker/reverse/swap/main.vue     |    40 +
 .../daterangepicker/settings/calendar/main.js |     4 +
 .../settings/calendar/main.vue                |    27 +
 .../settings/dateinputs/main.js               |     4 +
 .../settings/dateinputs/main.vue              |    35 +
 .../daterangepicker/settings/popup/main.js    |     4 +
 .../daterangepicker/settings/popup/main.vue   |    36 +
 .../dateinputs/datetimepicker/.DS_Store       |   Bin 0 -> 6148 bytes
 .../DateInputsStyleConfigurator.vue           |   105 +
 .../appearance/configurator/main.js           |     4 +
 .../appearance/configurator/main.vue          |    47 +
 .../appearance/fill-mode/main.js              |     4 +
 .../appearance/fill-mode/main.vue             |    95 +
 .../datetimepicker/appearance/rounded/main.js |     4 +
 .../appearance/rounded/main.vue               |   111 +
 .../datetimepicker/appearance/size/main.js    |     4 +
 .../datetimepicker/appearance/size/main.vue   |    92 +
 .../datetimepicker/controlled/show/main.js    |     4 +
 .../datetimepicker/controlled/show/main.vue   |    39 +
 .../datetimepicker/controlled/value/main.js   |     4 +
 .../datetimepicker/controlled/value/main.vue  |    34 +
 .../datetimepicker/custom/.DS_Store           |   Bin 0 -> 6148 bytes
 .../custom/calendar/CustomCalendar.vue        |    31 +
 .../datetimepicker/custom/calendar/main.js    |     4 +
 .../datetimepicker/custom/calendar/main.vue   |    26 +
 .../custom/dateinput/CustomDateInput.vue      |    62 +
 .../datetimepicker/custom/dateinput/main.js   |     4 +
 .../datetimepicker/custom/dateinput/main.vue  |    30 +
 .../custom/popup/CustomPopup.vue              |    27 +
 .../datetimepicker/custom/popup/main.js       |     4 +
 .../datetimepicker/custom/popup/main.vue      |    24 +
 .../datetimepicker/default/show/main.js       |     4 +
 .../datetimepicker/default/show/main.vue      |    25 +
 .../datetimepicker/default/value/main.js      |     4 +
 .../datetimepicker/default/value/main.vue     |    25 +
 .../datetimepicker/disabled/main.js           |     4 +
 .../datetimepicker/disabled/main.vue          |    16 +
 .../dateinputs/datetimepicker/events/main.js  |     4 +
 .../dateinputs/datetimepicker/events/main.vue |    41 +
 .../datetimepicker/floating-label/main.js     |     4 +
 .../datetimepicker/floating-label/main.vue    |    31 +
 .../dateinputs/datetimepicker/focused/main.js |     4 +
 .../datetimepicker/focused/main.vue           |    24 +
 .../dateinputs/datetimepicker/formats/main.js |     4 +
 .../datetimepicker/formats/main.vue           |    61 +
 .../datetimepicker/forms/basic/main.js        |     4 +
 .../datetimepicker/forms/basic/main.vue       |    60 +
 .../forms/custom-message/main.js              |     4 +
 .../forms/custom-message/main.vue             |    66 +
 .../forms/disable-styles/main.js              |     4 +
 .../forms/disable-styles/main.vue             |    95 +
 .../datetimepicker/forms/override/main.js     |     4 +
 .../datetimepicker/forms/override/main.vue    |    94 +
 .../datetimepicker/input-mode/main.js         |     4 +
 .../datetimepicker/input-mode/main.vue        |    50 +
 .../dateinputs/datetimepicker/json/main.js    |     4 +
 .../dateinputs/datetimepicker/json/main.vue   |    42 +
 .../datetimepicker/keyboard/main.js           |     4 +
 .../datetimepicker/keyboard/main.vue          |    23 +
 .../datetimepicker/overview/basic/main.js     |     4 +
 .../datetimepicker/overview/basic/main.vue    |    15 +
 .../datetimepicker/placeholders/main.js       |     4 +
 .../datetimepicker/placeholders/main.vue      |    40 +
 .../datetimepicker/ranges/date/main.js        |     4 +
 .../datetimepicker/ranges/date/main.vue       |    27 +
 .../datetimepicker/ranges/time/main.js        |     4 +
 .../datetimepicker/ranges/time/main.vue       |    27 +
 .../dateinputs/floating-label/main.js         |     4 +
 .../dateinputs/floating-label/main.vue        |    91 +
 .../dateinputs/globalization/es.json          |    31 +
 .../dateinputs/globalization/main.js          |     4 +
 .../dateinputs/globalization/main.vue         |    95 +
 .../multiviewcalendar/keyboard/main.js        |     4 +
 .../multiviewcalendar/keyboard/main.vue       |    15 +
 .../DateInputsStyleConfigurator.vue           |   105 +
 .../appearance/configurator/main.js           |     4 +
 .../appearance/configurator/main.vue          |    47 +
 .../timepicker/appearance/fill-mode/main.js   |     4 +
 .../timepicker/appearance/fill-mode/main.vue  |    95 +
 .../timepicker/appearance/rounded/main.js     |     4 +
 .../timepicker/appearance/rounded/main.vue    |   111 +
 .../timepicker/appearance/size/main.js        |     4 +
 .../timepicker/appearance/size/main.vue       |    92 +
 .../timepicker/controlled-show/main.js        |     4 +
 .../timepicker/controlled-show/main.vue       |    39 +
 .../timepicker/controlled-value/main.js       |     4 +
 .../timepicker/controlled-value/main.vue      |    34 +
 .../custom/dateinput/CustomDateInput.vue      |    46 +
 .../timepicker/custom/dateinput/main.js       |     4 +
 .../timepicker/custom/dateinput/main.vue      |    29 +
 .../timepicker/custom/popup/CustomPopup.vue   |    27 +
 .../timepicker/custom/popup/main.js           |     4 +
 .../timepicker/custom/popup/main.vue          |    25 +
 .../timepicker/default-show/main.js           |     4 +
 .../timepicker/default-show/main.vue          |    25 +
 .../timepicker/default-value/main.js          |     4 +
 .../timepicker/default-value/main.vue         |    25 +
 .../dateinputs/timepicker/disabled/main.js    |     4 +
 .../dateinputs/timepicker/disabled/main.vue   |    16 +
 .../dateinputs/timepicker/events/main.js      |     4 +
 .../dateinputs/timepicker/events/main.vue     |    41 +
 .../timepicker/floating-label/main.js         |     4 +
 .../timepicker/floating-label/main.vue        |    31 +
 .../dateinputs/timepicker/formats/main.js     |     4 +
 .../dateinputs/timepicker/formats/main.vue    |    55 +
 .../dateinputs/timepicker/forms/basic/main.js |     4 +
 .../timepicker/forms/basic/main.vue           |    60 +
 .../timepicker/forms/custom-message/main.js   |     4 +
 .../timepicker/forms/custom-message/main.vue  |    66 +
 .../timepicker/forms/disable-styles/main.js   |     4 +
 .../timepicker/forms/disable-styles/main.vue  |    95 +
 .../timepicker/forms/override/main.js         |     4 +
 .../timepicker/forms/override/main.vue        |    94 +
 .../dateinputs/timepicker/incremental/main.js |     4 +
 .../timepicker/incremental/main.vue           |    31 +
 .../dateinputs/timepicker/input-mode/main.js  |     4 +
 .../dateinputs/timepicker/input-mode/main.vue |    50 +
 .../dateinputs/timepicker/json/main.js        |     4 +
 .../dateinputs/timepicker/json/main.vue       |    42 +
 .../dateinputs/timepicker/keyboard/main.js    |     4 +
 .../dateinputs/timepicker/keyboard/main.vue   |    16 +
 .../timepicker/overview/basic/main.js         |     4 +
 .../timepicker/overview/basic/main.vue        |    17 +
 .../timepicker/placeholders/main.js           |     4 +
 .../timepicker/placeholders/main.vue          |    39 +
 .../dateinputs/timepicker/time-ranges/main.js |     4 +
 .../timepicker/time-ranges/main.vue           |    29 +
 .../dialogs/dialog/action-buttons/main.js     |     4 +
 .../dialogs/dialog/action-buttons/main.vue    |    41 +
 .../dialogs/dialog/dimetions/main.js          |     4 +
 .../dialogs/dialog/dimetions/main.vue         |    41 +
 .../dialogs/dialog/keyboard/main.js           |     4 +
 .../dialogs/dialog/keyboard/main.vue          |   112 +
 .../dialogs/dialog/overview/main.js           |     4 +
 .../dialogs/dialog/overview/main.vue          |    37 +
 .../dialogs/dialog/rtl/main.js                |     4 +
 .../dialogs/dialog/rtl/main.vue               |    37 +
 .../dialogs/dialog/title/basic/main.js        |     4 +
 .../dialogs/dialog/title/basic/main.vue       |    16 +
 .../dialogs/dialog/title/no-title/main.js     |     4 +
 .../dialogs/dialog/title/no-title/main.vue    |    32 +
 .../dialog/title/title-template/main.js       |     4 +
 .../dialog/title/title-template/main.vue      |    27 +
 .../dialogs/dialog/visibility/main.js         |     4 +
 .../dialogs/dialog/visibility/main.vue        |    37 +
 .../dialogs/overview/main.js                  |     4 +
 .../dialogs/overview/main.vue                 |    51 +
 .../dialogs/window/basic/main.js              |     4 +
 .../dialogs/window/basic/main.vue             |    50 +
 .../dialogs/window/controlled/main.js         |     4 +
 .../dialogs/window/controlled/main.vue        |    63 +
 .../dialogs/window/dimensions/main.js         |     4 +
 .../dialogs/window/dimensions/main.vue        |    38 +
 .../dialogs/window/dragging/main.js           |     4 +
 .../dialogs/window/dragging/main.vue          |    38 +
 .../dialogs/window/events/main.js             |     4 +
 .../dialogs/window/events/main.vue            |    58 +
 .../dialogs/window/hide-buttons/main.js       |     4 +
 .../dialogs/window/hide-buttons/main.vue      |    61 +
 .../window/minimize-fullscreen/main.js        |     4 +
 .../window/minimize-fullscreen/main.vue       |    43 +
 .../dialogs/window/positioning/main.js        |     4 +
 .../dialogs/window/positioning/main.vue       |    30 +
 .../dialogs/window/resizable/main.js          |     4 +
 .../dialogs/window/resizable/main.vue         |    38 +
 .../dialogs/window/title-basic/main.js        |     4 +
 .../dialogs/window/title-basic/main.vue       |    32 +
 .../dialogs/window/title-component/Title.vue  |     6 +
 .../dialogs/window/title-component/main.js    |     4 +
 .../dialogs/window/title-component/main.vue   |    35 +
 .../dialogs/window/title-no/main.js           |     4 +
 .../dialogs/window/title-no/main.vue          |    29 +
 .../DropDownStyleConfigurator.vue             |   105 +
 .../appearance/configurator/main.js           |     4 +
 .../appearance/configurator/main.vue          |    55 +
 .../autocomplete/appearance/fill-mode/main.js |     4 +
 .../appearance/fill-mode/main.vue             |    95 +
 .../autocomplete/appearance/rounded/main.js   |     4 +
 .../autocomplete/appearance/rounded/main.vue  |   110 +
 .../autocomplete/appearance/size/main.js      |     4 +
 .../autocomplete/appearance/size/main.vue     |    92 +
 .../dropdowns/autocomplete/basic/countries.js |    52 +
 .../dropdowns/autocomplete/basic/main.js      |     4 +
 .../dropdowns/autocomplete/basic/main.vue     |    23 +
 .../autocomplete/bindings/arrays/main.js      |     4 +
 .../autocomplete/bindings/arrays/main.vue     |    32 +
 .../autocomplete/bindings/datasets/main.js    |     4 +
 .../autocomplete/bindings/datasets/main.vue   |    38 +
 .../autocomplete/bindings/value/main.js       |     4 +
 .../autocomplete/bindings/value/main.vue      |    35 +
 .../autocomplete/common/countries.js          |    52 +
 .../autocomplete/filtering/basic/main.js      |     4 +
 .../autocomplete/filtering/basic/main.vue     |    44 +
 .../autocomplete/filtering/loading/main.js    |     4 +
 .../autocomplete/filtering/loading/main.vue   |    54 +
 .../autocomplete/filtering/minfilter/main.js  |     4 +
 .../autocomplete/filtering/minfilter/main.vue |    60 +
 .../autocomplete/forms/basic/main.js          |     4 +
 .../autocomplete/forms/basic/main.vue         |    73 +
 .../dropdowns/autocomplete/forms/countries.js |    52 +
 .../forms/custom-message/countries.js         |    52 +
 .../autocomplete/forms/custom-message/main.js |     4 +
 .../forms/custom-message/main.vue             |    72 +
 .../forms/disable-styles/countries.js         |    52 +
 .../autocomplete/forms/disable-styles/main.js |     4 +
 .../forms/disable-styles/main.vue             |   101 +
 .../autocomplete/forms/override/countries.js  |    52 +
 .../autocomplete/forms/override/main.js       |     4 +
 .../autocomplete/forms/override/main.vue      |   100 +
 .../grouping/basic/grouping-data.js           |   181 +
 .../autocomplete/grouping/basic/main.js       |     4 +
 .../autocomplete/grouping/basic/main.vue      |    27 +
 .../grouping-custom/GroupHeaderItemRender.vue |    21 +
 .../grouping/grouping-custom/ItemRender.vue   |    42 +
 .../grouping-custom/StickyHeaderRender.vue    |    22 +
 .../grouping/grouping-custom/grouping-data.js |   181 +
 .../grouping/grouping-custom/main.js          |     4 +
 .../grouping/grouping-custom/main.vue         |    63 +
 .../grouping-filtering/grouping-data.js       |   181 +
 .../grouping/grouping-filtering/main.js       |     4 +
 .../grouping/grouping-filtering/main.vue      |    45 +
 .../header-footer/FooterRender.vue            |    12 +
 .../header-footer/HeaderRender.vue            |    12 +
 .../autocomplete/header-footer/countries.js   |    52 +
 .../autocomplete/header-footer/main.js        |     4 +
 .../autocomplete/header-footer/main.vue       |    39 +
 .../autocomplete/item-render/ItemRender.vue   |    40 +
 .../autocomplete/item-render/countries.js     |    52 +
 .../autocomplete/item-render/main.js          |     4 +
 .../autocomplete/item-render/main.vue         |    38 +
 .../autocomplete/keyboard-navigation/main.js  |     4 +
 .../autocomplete/keyboard-navigation/main.vue |    32 +
 .../nodata-render/NoDataRender.vue            |    12 +
 .../autocomplete/nodata-render/main.js        |     4 +
 .../autocomplete/nodata-render/main.vue       |    30 +
 .../autocomplete/suggest/countries.js         |    52 +
 .../dropdowns/autocomplete/suggest/main.js    |     4 +
 .../dropdowns/autocomplete/suggest/main.vue   |    46 +
 .../grouping-data.js                          |   200 +
 .../adaptive-rendering-grouping/main.js       |     4 +
 .../adaptive-rendering-grouping/main.vue      |    28 +
 .../combobox/adaptive-rendering/main.js       |     4 +
 .../combobox/adaptive-rendering/main.vue      |    56 +
 .../DropDownStyleConfigurator.vue             |   105 +
 .../combobox/appearance/configurator/main.js  |     4 +
 .../combobox/appearance/configurator/main.vue |    55 +
 .../combobox/appearance/fill-mode/main.js     |     4 +
 .../combobox/appearance/fill-mode/main.vue    |    95 +
 .../combobox/appearance/rounded/main.js       |     4 +
 .../combobox/appearance/rounded/main.vue      |   110 +
 .../combobox/appearance/size/main.js          |     4 +
 .../combobox/appearance/size/main.vue         |    92 +
 .../dropdowns/combobox/basic/main.js          |     4 +
 .../dropdowns/combobox/basic/main.vue         |    32 +
 .../combobox/bindings/arrays/main.js          |     4 +
 .../combobox/bindings/arrays/main.vue         |    32 +
 .../combobox/bindings/datasets/main.js        |     4 +
 .../combobox/bindings/datasets/main.vue       |    38 +
 .../combobox/bindings/value-primitive/main.js |     4 +
 .../bindings/value-primitive/main.vue         |    61 +
 .../dropdowns/combobox/bindings/value/main.js |     4 +
 .../combobox/bindings/value/main.vue          |    35 +
 .../dropdowns/combobox/cascading/data.js      |    31 +
 .../dropdowns/combobox/cascading/main.js      |     4 +
 .../dropdowns/combobox/cascading/main.vue     |    85 +
 .../dropdowns/combobox/common/countries.js    |    52 +
 .../combobox/custom-values/object/main.js     |     4 +
 .../combobox/custom-values/object/main.vue    |    51 +
 .../combobox/custom-values/primitive/main.js  |     4 +
 .../combobox/custom-values/primitive/main.vue |    30 +
 .../combobox/filtering/basic/main.js          |     4 +
 .../combobox/filtering/basic/main.vue         |    40 +
 .../combobox/filtering/loading/main.js        |     4 +
 .../combobox/filtering/loading/main.vue       |    49 +
 .../combobox/filtering/minfilter/main.js      |     4 +
 .../combobox/filtering/minfilter/main.vue     |    42 +
 .../combobox/filtering/remote/main.js         |     4 +
 .../combobox/filtering/remote/main.vue        |   151 +
 .../dropdowns/combobox/forms/basic/main.js    |     4 +
 .../dropdowns/combobox/forms/basic/main.vue   |    75 +
 .../dropdowns/combobox/forms/countries.js     |    52 +
 .../forms/custom-message/countries.js         |    52 +
 .../combobox/forms/custom-message/main.js     |     4 +
 .../combobox/forms/custom-message/main.vue    |    72 +
 .../forms/disable-styles/countries.js         |    52 +
 .../combobox/forms/disable-styles/main.js     |     4 +
 .../combobox/forms/disable-styles/main.vue    |   101 +
 .../combobox/forms/override/countries.js      |    52 +
 .../dropdowns/combobox/forms/override/main.js |     4 +
 .../combobox/forms/override/main.vue          |   100 +
 .../combobox/grouping/basic/grouping-data.js  |   181 +
 .../dropdowns/combobox/grouping/basic/main.js |     4 +
 .../combobox/grouping/basic/main.vue          |    31 +
 .../grouping/custom/GroupHeaderItemRender.vue |    21 +
 .../combobox/grouping/custom/ItemRender.vue   |    42 +
 .../grouping/custom/StickyHeaderRender.vue    |    22 +
 .../combobox/grouping/custom/grouping-data.js |   181 +
 .../combobox/grouping/custom/main.js          |     4 +
 .../combobox/grouping/custom/main.vue         |    63 +
 .../grouping/filtering/grouping-data.js       |   181 +
 .../combobox/grouping/filtering/main.js       |     4 +
 .../combobox/grouping/filtering/main.vue      |    45 +
 .../combobox/grouping/virtualization/main.js  |     4 +
 .../combobox/grouping/virtualization/main.vue |   107 +
 .../combobox/header-footer/FooterRender.vue   |    12 +
 .../combobox/header-footer/HeaderRender.vue   |    12 +
 .../combobox/header-footer/countries.js       |    52 +
 .../dropdowns/combobox/header-footer/main.js  |     4 +
 .../dropdowns/combobox/header-footer/main.vue |    40 +
 .../combobox/item-render/ItemRender.vue       |    27 +
 .../combobox/item-render/countries.js         |    52 +
 .../dropdowns/combobox/item-render/main.js    |     4 +
 .../dropdowns/combobox/item-render/main.vue   |    37 +
 .../combobox/keyboard-navigation/main.js      |     4 +
 .../combobox/keyboard-navigation/main.vue     |    27 +
 .../combobox/nodata-render/NoDataRender.vue   |    12 +
 .../dropdowns/combobox/nodata-render/main.js  |     4 +
 .../dropdowns/combobox/nodata-render/main.vue |    31 +
 .../dropdowns/combobox/suggest/countries.js   |    52 +
 .../dropdowns/combobox/suggest/main.js        |     4 +
 .../dropdowns/combobox/suggest/main.vue       |    48 +
 .../combobox/virtualization/basic/main.js     |     4 +
 .../combobox/virtualization/basic/main.vue    |    57 +
 .../combobox/virtualization/filtering/main.js |     4 +
 .../virtualization/filtering/main.vue         |    71 +
 .../dropdowns/common/es.json                  |     6 +
 .../grouping-data.js                          |   200 +
 .../adaptive-rendering-grouping/main.js       |     4 +
 .../adaptive-rendering-grouping/main.vue      |    28 +
 .../dropdownlist/adaptive-rendering/main.js   |     4 +
 .../dropdownlist/adaptive-rendering/main.vue  |    56 +
 .../DropDownStyleConfigurator.vue             |   105 +
 .../appearance/configurator/main.js           |     4 +
 .../appearance/configurator/main.vue          |    55 +
 .../dropdownlist/appearance/fill-mode/main.js |     4 +
 .../appearance/fill-mode/main.vue             |    95 +
 .../dropdownlist/appearance/rounded/main.js   |     4 +
 .../dropdownlist/appearance/rounded/main.vue  |   110 +
 .../dropdownlist/appearance/size/main.js      |     4 +
 .../dropdownlist/appearance/size/main.vue     |    92 +
 .../dropdowns/dropdownlist/basic/main.js      |     4 +
 .../dropdowns/dropdownlist/basic/main.vue     |    25 +
 .../dropdowns/dropdownlist/binding/main.js    |     4 +
 .../dropdowns/dropdownlist/binding/main.vue   |    57 +
 .../dropdowns/dropdownlist/cascading/data.js  |    31 +
 .../dropdowns/dropdownlist/cascading/main.js  |     4 +
 .../dropdowns/dropdownlist/cascading/main.vue |    96 +
 .../dropdownlist/common/countries.js          |    52 +
 .../dropdownlist/default-item/basic/main.js   |     4 +
 .../dropdownlist/default-item/basic/main.vue  |    25 +
 .../default-item/object-values/main.js        |     4 +
 .../default-item/object-values/main.vue       |    32 +
 .../dropdowns/dropdownlist/events/main.js     |     4 +
 .../dropdowns/dropdownlist/events/main.vue    |    58 +
 .../dropdownlist/filtering/basic/main.js      |     4 +
 .../dropdownlist/filtering/basic/main.vue     |    41 +
 .../dropdownlist/filtering/delay/main.js      |     4 +
 .../dropdownlist/filtering/delay/main.vue     |    51 +
 .../dropdownlist/filtering/minfilter/main.js  |     4 +
 .../dropdownlist/filtering/minfilter/main.vue |    44 +
 .../filtering/remote-data/main.js             |     4 +
 .../filtering/remote-data/main.vue            |   163 +
 .../dropdownlist/forms/basic/main.js          |     4 +
 .../dropdownlist/forms/basic/main.vue         |    71 +
 .../dropdowns/dropdownlist/forms/countries.js |    52 +
 .../forms/custom-message/countries.js         |    52 +
 .../dropdownlist/forms/custom-message/main.js |     4 +
 .../forms/custom-message/main.vue             |    72 +
 .../forms/disable-styles/countries.js         |    52 +
 .../dropdownlist/forms/disable-styles/main.js |     4 +
 .../forms/disable-styles/main.vue             |   101 +
 .../dropdownlist/forms/override/countries.js  |    52 +
 .../dropdownlist/forms/override/main.js       |     4 +
 .../dropdownlist/forms/override/main.vue      |   100 +
 .../grouping/basic/grouping-data.js           |   181 +
 .../dropdownlist/grouping/basic/main.js       |     4 +
 .../dropdownlist/grouping/basic/main.vue      |    26 +
 .../grouping/custom/GroupHeaderItemRender.vue |    21 +
 .../grouping/custom/ItemRender.vue            |    42 +
 .../grouping/custom/StickyHeaderRender.vue    |    22 +
 .../grouping/custom/grouping-data.js          |   181 +
 .../dropdownlist/grouping/custom/main.js      |     4 +
 .../dropdownlist/grouping/custom/main.vue     |    62 +
 .../grouping/filtering/grouping-data.js       |   181 +
 .../dropdownlist/grouping/filtering/main.js   |     4 +
 .../dropdownlist/grouping/filtering/main.vue  |    44 +
 .../grouping/virtualization/main.js           |     4 +
 .../grouping/virtualization/main.vue          |   107 +
 .../header-footer/FooterRender.vue            |    12 +
 .../header-footer/HeaderRender.vue            |    12 +
 .../dropdownlist/header-footer/countries.js   |    52 +
 .../dropdownlist/header-footer/main.js        |     4 +
 .../dropdownlist/header-footer/main.vue       |    40 +
 .../dropdownlist/item-render/ItemRender.vue   |    27 +
 .../dropdownlist/item-render/countries.js     |    52 +
 .../dropdownlist/item-render/main.js          |     4 +
 .../dropdownlist/item-render/main.vue         |    37 +
 .../dropdowns/dropdownlist/keyboard/main.js   |     4 +
 .../dropdowns/dropdownlist/keyboard/main.vue  |    22 +
 .../nodata-render/NoDataRender.vue            |    12 +
 .../dropdownlist/nodata-render/main.js        |     4 +
 .../dropdownlist/nodata-render/main.vue       |    31 +
 .../dropdownlist/primitive-value/main.js      |     4 +
 .../dropdownlist/primitive-value/main.vue     |    42 +
 .../dropdownlist/value-binding/main.js        |     4 +
 .../dropdownlist/value-binding/main.vue       |    33 +
 .../dropdownlist/value-field/main.jsx         |    47 +
 .../dropdownlist/value-primitive/main.js      |     4 +
 .../dropdownlist/value-primitive/main.vue     |    61 +
 .../dropdownlist/value-render/ValueRender.vue |    24 +
 .../dropdownlist/value-render/countries.js    |    52 +
 .../dropdownlist/value-render/main.js         |     4 +
 .../dropdownlist/value-render/main.vue        |    33 +
 .../virtualization-filtering/main.js          |     4 +
 .../virtualization-filtering/main.vue         |    75 +
 .../dropdownlist/virtualization/main.js       |     4 +
 .../dropdownlist/virtualization/main.vue      |    58 +
 .../dropdowntree/adaptive-rendering/main.js   |     4 +
 .../dropdowntree/adaptive-rendering/main.vue  |    82 +
 .../tree-data-operations.js                   |    31 +
 .../adaptive-rendering/tree-data.js           |    15 +
 .../DropDownStyleConfigurator.vue             |   105 +
 .../appearance/configurator/main.js           |     4 +
 .../appearance/configurator/main.vue          |    95 +
 .../configurator/tree-data-operations.js      |    31 +
 .../appearance/configurator/tree-data.js      |    15 +
 .../dropdowntree/appearance/fill-mode/main.js |     4 +
 .../appearance/fill-mode/main.vue             |   145 +
 .../fill-mode/tree-data-operations.js         |    31 +
 .../appearance/fill-mode/tree-data.js         |    15 +
 .../dropdowntree/appearance/rounded/main.js   |     4 +
 .../dropdowntree/appearance/rounded/main.vue  |   162 +
 .../rounded/tree-data-operations.js           |    31 +
 .../appearance/rounded/tree-data.js           |    15 +
 .../dropdowntree/appearance/size/main.js      |     4 +
 .../dropdowntree/appearance/size/main.vue     |   122 +
 .../appearance/size/tree-data-operations.js   |    31 +
 .../dropdowntree/appearance/size/tree-data.js |    15 +
 .../dropdowns/dropdowntree/basic/main.js      |     4 +
 .../dropdowns/dropdowntree/basic/main.vue     |    69 +
 .../basic/tree-data-operations.js             |    31 +
 .../dropdowns/dropdowntree/basic/tree-data.js |    15 +
 .../dropdowntree/filtering-loading/main.js    |     4 +
 .../dropdowntree/filtering-loading/main.vue   |    85 +
 .../filtering-loading/tree-data-operations.js |    31 +
 .../filtering-loading/tree-data.js            |    15 +
 .../dropdowns/dropdowntree/filtering/main.js  |     4 +
 .../dropdowns/dropdowntree/filtering/main.vue |    80 +
 .../filtering/tree-data-operations.js         |    31 +
 .../dropdowntree/filtering/tree-data.js       |    15 +
 .../dropdowns/dropdowntree/form/basic/main.js |     4 +
 .../dropdowntree/form/basic/main.vue          |   129 +
 .../form/basic/tree-data-operations.js        |    31 +
 .../dropdowntree/form/custom-message/main.js  |     4 +
 .../dropdowntree/form/custom-message/main.vue |   143 +
 .../custom-message/tree-data-operations.js    |    31 +
 .../dropdowntree/form/disabled-styles/main.js |     4 +
 .../form/disabled-styles/main.vue             |   156 +
 .../disabled-styles/tree-data-operations.js   |    31 +
 .../dropdowntree/form/override/main.js        |     4 +
 .../dropdowntree/form/override/main.vue       |   154 +
 .../form/override/tree-data-operations.js     |    31 +
 .../dropdowntree/header-footer/main.js        |     4 +
 .../dropdowntree/header-footer/main.vue       |    97 +
 .../header-footer/tree-data-operations.js     |    31 +
 .../dropdowntree/header-footer/tree-data.js   |    15 +
 .../dropdowntree/item-template/main.js        |     4 +
 .../dropdowntree/item-template/main.vue       |    98 +
 .../item-template/tree-data-operations.js     |    31 +
 .../dropdowntree/item-template/tree-data.js   |    28 +
 .../dropdowns/dropdowntree/no-data/main.js    |     4 +
 .../dropdowns/dropdowntree/no-data/main.vue   |    87 +
 .../no-data/tree-data-operations.js           |    31 +
 .../dropdowns/dropdowntree/overview/main.js   |     4 +
 .../dropdowns/dropdowntree/overview/main.vue  |    65 +
 .../overview/tree-data-operations.js          |    31 +
 .../dropdowntree/overview/tree-data.js        |    15 +
 .../dropdowns/globalization/es.json           |     6 +
 .../dropdowns/globalization/main.js           |     4 +
 .../dropdowns/globalization/main.vue          |    92 +
 vue-options-api-demos/dropdowns/label/main.js |     4 +
 .../dropdowns/label/main.vue                  |   168 +
 .../label/multiselecttree-data-operations.js  |   107 +
 .../dropdowns/label/tree-data-operations.js   |    31 +
 .../dropdowns/label/tree-data.js              |    15 +
 .../grouping-data.js                          |   200 +
 .../adaptive-rendering-grouping/main.js       |     4 +
 .../adaptive-rendering-grouping/main.vue      |    28 +
 .../multiselect/adaptive-rendering/main.js    |     4 +
 .../multiselect/adaptive-rendering/main.vue   |    56 +
 .../allow-custom-object-data/main.js          |     4 +
 .../allow-custom-object-data/main.vue         |    58 +
 .../multiselect/allow-custom-values/main.js   |     4 +
 .../multiselect/allow-custom-values/main.vue  |    47 +
 .../DropDownStyleConfigurator.vue             |   105 +
 .../appearance/configurator/main.js           |     4 +
 .../appearance/configurator/main.vue          |    55 +
 .../multiselect/appearance/fill-mode/main.js  |     4 +
 .../multiselect/appearance/fill-mode/main.vue |    95 +
 .../multiselect/appearance/rounded/main.js    |     4 +
 .../multiselect/appearance/rounded/main.vue   |   110 +
 .../multiselect/appearance/size/main.js       |     4 +
 .../multiselect/appearance/size/main.vue      |    92 +
 .../dropdowns/multiselect/basic/main.js       |     4 +
 .../dropdowns/multiselect/basic/main.vue      |    29 +
 .../dropdowns/multiselect/binding/main.js     |     4 +
 .../dropdowns/multiselect/binding/main.vue    |    26 +
 .../multiselect/complex-value/main.js         |     4 +
 .../multiselect/complex-value/main.vue        |    45 +
 .../dropdowns/multiselect/controlled/main.js  |     4 +
 .../dropdowns/multiselect/controlled/main.vue |    33 +
 .../dropdowns/multiselect/events/countries.js |    52 +
 .../dropdowns/multiselect/events/main.js      |     4 +
 .../dropdowns/multiselect/events/main.vue     |    67 +
 .../multiselect/filtering/basic/countries.js  |    52 +
 .../multiselect/filtering/basic/main.js       |     4 +
 .../multiselect/filtering/basic/main.vue      |    34 +
 .../filtering/minfilter/countries.js          |    52 +
 .../multiselect/filtering/minfilter/main.js   |     4 +
 .../multiselect/filtering/minfilter/main.vue  |    39 +
 .../virtualization-remote-data/main.js        |     4 +
 .../virtualization-remote-data/main.vue       |   143 +
 .../filtering/with-delay/countries.js         |    52 +
 .../multiselect/filtering/with-delay/main.js  |     4 +
 .../multiselect/filtering/with-delay/main.vue |    44 +
 .../dropdowns/multiselect/forms/basic/main.js |     4 +
 .../multiselect/forms/basic/main.vue          |    67 +
 .../dropdowns/multiselect/forms/basic/shop.js |    31 +
 .../multiselect/forms/custom-message/main.js  |     4 +
 .../multiselect/forms/custom-message/main.vue |    71 +
 .../multiselect/forms/custom-message/shop.js  |    31 +
 .../multiselect/forms/disable-styles/main.js  |     4 +
 .../multiselect/forms/disable-styles/main.vue |    98 +
 .../multiselect/forms/disable-styles/shop.js  |    31 +
 .../multiselect/forms/override/main.js        |     4 +
 .../multiselect/forms/override/main.vue       |    93 +
 .../multiselect/forms/override/shop.js        |    31 +
 .../grouping/basic/grouping-data.js           |   181 +
 .../multiselect/grouping/basic/main.js        |     4 +
 .../multiselect/grouping/basic/main.vue       |    30 +
 .../grouping/custom/GroupHeaderItemRender.vue |    21 +
 .../grouping/custom/ItemRender.vue            |    42 +
 .../grouping/custom/StickyHeaderRender.vue    |    22 +
 .../grouping/custom/grouping-data.js          |   181 +
 .../multiselect/grouping/custom/main.js       |     4 +
 .../multiselect/grouping/custom/main.vue      |    62 +
 .../grouping/filtering/grouping-data.js       |   200 +
 .../multiselect/grouping/filtering/main.js    |     4 +
 .../multiselect/grouping/filtering/main.vue   |    46 +
 .../grouping/virtualization/main.js           |     4 +
 .../grouping/virtualization/main.vue          |   107 +
 .../header-footer/FooterRender.vue            |    12 +
 .../header-footer/HeaderRender.vue            |    12 +
 .../multiselect/header-footer/countries.js    |    52 +
 .../multiselect/header-footer/main.js         |     4 +
 .../multiselect/header-footer/main.vue        |    41 +
 .../multiselect/item-render/ItemRender.vue    |    27 +
 .../multiselect/item-render/countries.js      |    52 +
 .../dropdowns/multiselect/item-render/main.js |     4 +
 .../multiselect/item-render/main.vue          |    38 +
 .../nodata-render/NoDataRender.vue            |    12 +
 .../multiselect/nodata-render/main.js         |     4 +
 .../multiselect/nodata-render/main.vue        |    33 +
 .../multiselect/summary-tag/countries.js      |    52 +
 .../dropdowns/multiselect/summary-tag/main.js |     4 +
 .../multiselect/summary-tag/main.vue          |    45 +
 .../dropdowns/multiselect/tags/main.js        |     4 +
 .../dropdowns/multiselect/tags/main.vue       |    33 +
 .../dropdowns/multiselect/tags/styles.css     |    10 +
 .../multiselect/value-primitive/main.js       |     4 +
 .../multiselect/value-primitive/main.vue      |    61 +
 .../multiselect/virtualization/basic/main.js  |     4 +
 .../multiselect/virtualization/basic/main.vue |    60 +
 .../virtualization/filtering/main.js          |     4 +
 .../virtualization/filtering/main.vue         |    76 +
 .../adaptive-rendering/main.js                |     4 +
 .../adaptive-rendering/main.vue               |    88 +
 .../multiselecttree-data-operations.js        |   107 +
 .../adaptive-rendering/tree-data.js           |    15 +
 .../DropDownStyleConfigurator.vue             |   105 +
 .../appearance/configurator/main.js           |     4 +
 .../appearance/configurator/main.vue          |   112 +
 .../multiselecttree-data-operations.js        |   107 +
 .../appearance/configurator/tree-data.js      |    15 +
 .../appearance/fill-mode/main.js              |     4 +
 .../appearance/fill-mode/main.vue             |   162 +
 .../multiselecttree-data-operations.js        |   107 +
 .../appearance/fill-mode/tree-data.js         |    15 +
 .../appearance/rounded/main.js                |     4 +
 .../appearance/rounded/main.vue               |   179 +
 .../multiselecttree-data-operations.js        |   107 +
 .../appearance/rounded/tree-data.js           |    15 +
 .../multiselecttree/appearance/size/main.js   |     4 +
 .../multiselecttree/appearance/size/main.vue  |   140 +
 .../size/multiselecttree-data-operations.js   |   107 +
 .../appearance/size/tree-data.js              |    15 +
 .../dropdowns/multiselecttree/basic/main.js   |     4 +
 .../dropdowns/multiselecttree/basic/main.vue  |    73 +
 .../basic/multiselecttree-data-operations.js  |   107 +
 .../multiselecttree/basic/tree-data.js        |    15 +
 .../dropdowns/multiselecttree/binding/main.js |     4 +
 .../multiselecttree/binding/main.vue          |    78 +
 .../multiselecttree-data-operations.js        |   107 +
 .../multiselecttree/binding/tree-data.js      |    15 +
 .../multiselecttree/controlled/main.js        |     4 +
 .../multiselecttree/controlled/main.vue       |    98 +
 .../multiselecttree-data-operations.js        |   107 +
 .../multiselecttree/controlled/tree-data.js   |    15 +
 .../multiselecttree/custom-rendering/main.js  |     4 +
 .../multiselecttree/custom-rendering/main.vue |   107 +
 .../multiselecttree-data-operations.js        |   107 +
 .../custom-rendering/tree-files-data.js       |    28 +
 .../filtering-with-delay/main.js              |     4 +
 .../filtering-with-delay/main.vue             |    92 +
 .../multiselecttree-data-operations.js        |   107 +
 .../filtering-with-delay/tree-data.js         |    15 +
 .../multiselecttree/filtering/main.js         |     4 +
 .../multiselecttree/filtering/main.vue        |    86 +
 .../multiselecttree-data-operations.js        |   107 +
 .../multiselecttree/filtering/tree-data.js    |    15 +
 .../multiselecttree/forms/basic/main.js       |     4 +
 .../multiselecttree/forms/basic/main.vue      |   152 +
 .../basic/multiselecttree-data-operations.js  |   107 +
 .../forms/custom-message/main.js              |     4 +
 .../forms/custom-message/main.vue             |   156 +
 .../multiselecttree-data-operations.js        |   107 +
 .../forms/disable-styles/main.js              |     4 +
 .../forms/disable-styles/main.vue             |   175 +
 .../multiselecttree-data-operations.js        |   107 +
 .../multiselecttree/forms/override/main.js    |     4 +
 .../multiselecttree/forms/override/main.vue   |   174 +
 .../multiselecttree-data-operations.js        |   107 +
 .../multiselecttree/header-footer/main.js     |     4 +
 .../multiselecttree/header-footer/main.vue    |   105 +
 .../multiselecttree-data-operations.js        |   107 +
 .../header-footer/tree-data.js                |    15 +
 .../dropdowns/multiselecttree/no-data/main.js |     4 +
 .../multiselecttree/no-data/main.vue          |    43 +
 .../dropdowns/overview/main.js                |     4 +
 .../dropdowns/overview/main.vue               |   166 +
 .../multiselecttree-data-operations.js        |   107 +
 .../overview/tree-data-operations.js          |    31 +
 .../dropdowns/overview/tree-data.js           |    15 +
 vue-options-api-demos/dropdowns/rtl/main.js   |     4 +
 vue-options-api-demos/dropdowns/rtl/main.vue  |   173 +
 .../rtl/multiselecttree-data-operations.js    |   107 +
 .../dropdowns/rtl/tree-data-operations.js     |    31 +
 .../dropdowns/rtl/tree-data.js                |    15 +
 .../shared/DropDownStyleConfigurator.vue      |   105 +
 .../dropdowns/shared/countries.js             |    52 +
 .../dropdowns/shared/es.json                  |     6 +
 .../shared/multiselecttree-data-operations.js |   107 +
 .../dropdowns/shared/shop.js                  |    31 +
 .../dropdowns/shared/tree-data-operations.js  |    31 +
 .../dropdowns/shared/tree-data.js             |    15 +
 .../dropdowns/shared/tree-files-data.js       |    28 +
 .../editor/all-tools/content.js               |     3 +
 .../editor/all-tools/main.js                  |     4 +
 .../editor/all-tools/main.vue                 |    47 +
 .../editor/controlled-value-doc/main.js       |     4 +
 .../editor/controlled-value-doc/main.vue      |    39 +
 .../editor/controlled-value-string/main.js    |     4 +
 .../editor/controlled-value-string/main.vue   |    31 +
 .../edit-built-in-tools/content-basic.js      |     3 +
 .../editor/edit-built-in-tools/main.js        |     4 +
 .../editor/edit-built-in-tools/main.vue       |   152 +
 .../editor/events/Logger.vue                  |    43 +
 .../editor/events/content.js                  |     3 +
 vue-options-api-demos/editor/events/main.js   |     4 +
 vue-options-api-demos/editor/events/main.vue  |    70 +
 .../editor/find-replace/content-overview.js   |     3 +
 .../editor/find-replace/main.js               |     4 +
 .../editor/find-replace/main.vue              |    27 +
 .../editor/get-started/content.js             |     3 +
 .../editor/get-started/main.js                |     4 +
 .../editor/get-started/main.vue               |    33 +
 .../editor/gets-and-sets-html/content.js      |     3 +
 .../editor/gets-and-sets-html/main.js         |     4 +
 .../editor/gets-and-sets-html/main.vue        |    75 +
 .../editor/globalization/content.js           |     3 +
 .../editor/globalization/deMessages.js        |    43 +
 .../editor/globalization/main.js              |     4 +
 .../editor/globalization/main.vue             |    44 +
 vue-options-api-demos/editor/markdown/main.js |     4 +
 .../editor/markdown/main.vue                  |    70 +
 .../editor/markdown/markdown.js               |    16 +
 .../editor/overview/content-overview.js       |     3 +
 vue-options-api-demos/editor/overview/main.js |     4 +
 .../editor/overview/main.vue                  |    44 +
 vue-options-api-demos/editor/paste/main.js    |     4 +
 vue-options-api-demos/editor/paste/main.vue   |    64 +
 .../editor/plugins/placeholder/main.js        |     4 +
 .../editor/plugins/placeholder/main.vue       |    51 +
 .../editor/plugins/placeholder/placeholder.js |    38 +
 .../editor/plugins/readonly/content-basic.js  |     3 +
 .../editor/plugins/readonly/main.js           |     4 +
 .../editor/plugins/readonly/main.vue          |    70 +
 .../editor/rendering-mode/main.js             |     4 +
 .../editor/rendering-mode/main.vue            |    35 +
 .../editor/rendering-mode/styles.css          |    44 +
 .../editor/resizing/editor/content.js         |     3 +
 .../editor/resizing/editor/main.js            |     4 +
 .../editor/resizing/editor/main.vue           |    42 +
 .../resizing/images/content-overview.js       |     3 +
 .../editor/resizing/images/main.js            |     4 +
 .../editor/resizing/images/main.vue           |    61 +
 vue-options-api-demos/editor/rtl/content.js   |     3 +
 vue-options-api-demos/editor/rtl/main.js      |     4 +
 vue-options-api-demos/editor/rtl/main.vue     |    38 +
 .../editor/schema-custom/content.js           |     3 +
 .../editor/schema-custom/main.js              |     4 +
 .../editor/schema-custom/main.vue             |    58 +
 .../editor/schema-custom/schema-utils.js      |    67 +
 .../editor/schema-custom/schema.js            |   311 +
 .../editor/schema-edit/main.js                |     4 +
 .../editor/schema-edit/main.vue               |    70 +
 .../editor/schema-edit/new-mark.js            |    16 +
 .../editor/schema-edit/new-node.js            |    33 +
 .../editor/selection/cell/content.js          |    48 +
 .../editor/selection/cell/main.js             |     4 +
 .../editor/selection/cell/main.vue            |    28 +
 .../editor/selection/get-html/content.js      |     3 +
 .../editor/selection/get-html/main.js         |     4 +
 .../editor/selection/get-html/main.vue        |    75 +
 .../editor/selection/node/content.js          |     3 +
 .../editor/selection/node/main.js             |     4 +
 .../editor/selection/node/main.vue            |    63 +
 .../editor/selection/select-all/content.js    |     3 +
 .../editor/selection/select-all/main.js       |     4 +
 .../editor/selection/select-all/main.vue      |    47 +
 .../editor/selection/text/content.js          |     3 +
 .../editor/selection/text/main.js             |     4 +
 .../editor/selection/text/main.vue            |   123 +
 .../editor/shared/content-basic.js            |     3 +
 .../editor/shared/content-overview.js         |     3 +
 .../editor/shared/content.js                  |     3 +
 .../editor/styling-iframe/content.js          |     3 +
 .../editor/styling-iframe/main.js             |     4 +
 .../editor/styling-iframe/main.vue            |    40 +
 vue-options-api-demos/editor/tsconfig.json    |    30 +
 vue-options-api-demos/excel/basic/main.js     |     4 +
 vue-options-api-demos/excel/basic/main.vue    |    74 +
 .../excel/basic/products.json                 |  1311 +
 .../excel/cells/data/main.js                  |     4 +
 .../excel/cells/data/main.vue                 |    35 +
 .../excel/cells/data/products.json            |  1311 +
 .../excel/cells/footer/main.js                |     4 +
 .../excel/cells/footer/main.vue               |    48 +
 .../excel/cells/footer/products.json          |  1311 +
 .../excel/cells/group-footer/main.js          |     4 +
 .../excel/cells/group-footer/main.vue         |    61 +
 .../excel/cells/group-footer/products.json    |  1311 +
 .../excel/cells/group-header/main.js          |     4 +
 .../excel/cells/group-header/main.vue         |    48 +
 .../excel/cells/group-header/products.json    |  1311 +
 .../excel/cells/header-padding/main.js        |     4 +
 .../excel/cells/header-padding/main.vue       |    44 +
 .../excel/cells/header-padding/products.json  |  1311 +
 .../excel/cells/header/main.js                |     4 +
 .../excel/cells/header/main.vue               |    38 +
 .../excel/cells/header/products.json          |  1311 +
 .../excel/cells/padding/main.js               |     4 +
 .../excel/cells/padding/main.vue              |    44 +
 .../excel/cells/padding/products.json         |  1311 +
 .../excel/columns/footer/main.js              |     4 +
 .../excel/columns/footer/main.vue             |    36 +
 .../excel/columns/footer/products.json        |  1311 +
 .../excel/columns/group-footer/main.js        |     4 +
 .../excel/columns/group-footer/main.vue       |    48 +
 .../excel/columns/group-footer/products.json  |  1311 +
 .../excel/columns/group-header/main.js        |     4 +
 .../excel/columns/group-header/main.vue       |    46 +
 .../excel/columns/group-header/products.json  |  1311 +
 .../excel/columns/hidden/main.js              |     4 +
 .../excel/columns/hidden/main.vue             |    44 +
 .../excel/columns/hidden/products.json        |  1311 +
 .../excel/columns/locked/main.js              |     4 +
 .../excel/columns/locked/main.vue             |    43 +
 .../excel/columns/locked/products.json        |  1311 +
 .../excel/columns/multi/main.js               |     4 +
 .../excel/columns/multi/main.vue              |    41 +
 .../excel/columns/multi/products.json         |  1311 +
 vue-options-api-demos/excel/filtering/main.js |     4 +
 .../excel/filtering/main.vue                  |    31 +
 .../excel/filtering/products.json             |  1311 +
 vue-options-api-demos/excel/rtl/main.js       |     4 +
 vue-options-api-demos/excel/rtl/main.vue      |    30 +
 vue-options-api-demos/excel/rtl/products.json |  1311 +
 .../excel/shared/products.json                |  1311 +
 vue-options-api-demos/excel/workbook/main.js  |     4 +
 vue-options-api-demos/excel/workbook/main.vue |    56 +
 .../excel/workbook/products.json              |  1311 +
 .../form/advanced/changing/FormContent.vue    |    66 +
 .../advanced/changing/FormNumericTextBox.vue  |    80 +
 .../form/advanced/changing/main.js            |     4 +
 .../form/advanced/changing/main.vue           |    27 +
 .../advanced/dynamic-reset/FormContent.vue    |    81 +
 .../form/advanced/dynamic-reset/FormInput.vue |    84 +
 .../form/advanced/dynamic-reset/main.js       |     4 +
 .../form/advanced/dynamic-reset/main.vue      |    50 +
 .../form/advanced/reading/FormContent.vue     |    74 +
 .../advanced/reading/FormNumericTextBox.vue   |    80 +
 .../form/advanced/reading/main.js             |     4 +
 .../form/advanced/reading/main.vue            |    28 +
 .../form/basic/FormContent.vue                |    97 +
 .../form/basic/FormInput.vue                  |    84 +
 vue-options-api-demos/form/basic/main.js      |     4 +
 vue-options-api-demos/form/basic/main.vue     |    24 +
 .../advanced/FormContent.vue                  |    65 +
 .../custom-components/advanced/FormInput.vue  |    84 +
 .../form/custom-components/advanced/main.js   |     4 +
 .../form/custom-components/advanced/main.vue  |    24 +
 .../custom-components/advanced/validators.js  |    82 +
 .../custom-components/basic/FormContent.vue   |    58 +
 .../custom-components/basic/FormInput.vue     |    37 +
 .../form/custom-components/basic/main.js      |     4 +
 .../form/custom-components/basic/main.vue     |    24 +
 .../form/fieldarrayvalidation/CommandCell.vue |    35 +
 .../form/fieldarrayvalidation/FormContent.vue |    61 +
 .../form/fieldarrayvalidation/FormGrid.vue    |    67 +
 .../form/fieldarrayvalidation/main.js         |     4 +
 .../form/fieldarrayvalidation/main.vue        |    24 +
 .../form/fieldvalidation/FormContent.vue      |    73 +
 .../form/fieldvalidation/FormInput.vue        |    84 +
 .../form/fieldvalidation/main.js              |     4 +
 .../form/fieldvalidation/main.vue             |    24 +
 .../form/formvalidation/FormContent.vue       |    94 +
 .../form/formvalidation/FormInput.vue         |    84 +
 .../form/formvalidation/main.js               |     4 +
 .../form/formvalidation/main.vue              |    38 +
 .../guideline/checkboxes/FormCheckbox.vue     |    84 +
 .../form/guideline/checkboxes/FormContent.vue |   111 +
 .../guideline/checkboxes/FormRadioGroup.vue   |   107 +
 .../form/guideline/checkboxes/data.js         |   212 +
 .../form/guideline/checkboxes/main.js         |     4 +
 .../form/guideline/checkboxes/main.vue        |    23 +
 .../form/guideline/checkboxes/validators.js   |    82 +
 .../guideline/datepickers/FormContent.vue     |   127 +
 .../guideline/datepickers/FormDateInput.vue   |    79 +
 .../guideline/datepickers/FormDatePicker.vue  |    80 +
 .../datepickers/FormDateTimePicker.vue        |    79 +
 .../guideline/datepickers/FormTimePicker.vue  |    79 +
 .../form/guideline/datepickers/main.js        |     4 +
 .../form/guideline/datepickers/main.vue       |    23 +
 .../form/guideline/datepickers/validators.js  |    82 +
 .../form/guideline/disabled/FormContent.vue   |    82 +
 .../form/guideline/disabled/FormInput.vue     |    84 +
 .../guideline/disabled/FormMaskedTextBox.vue  |    88 +
 .../form/guideline/disabled/main.js           |     4 +
 .../form/guideline/disabled/main.vue          |    27 +
 .../guideline/dropdowns/FormAutoComplete.vue  |    80 +
 .../form/guideline/dropdowns/FormComboBox.vue |    87 +
 .../form/guideline/dropdowns/FormContent.vue  |   130 +
 .../guideline/dropdowns/FormDropDownList.vue  |    82 +
 .../guideline/dropdowns/FormMultiSelect.vue   |    82 +
 .../form/guideline/dropdowns/data.js          |   212 +
 .../form/guideline/dropdowns/main.js          |     4 +
 .../form/guideline/dropdowns/main.vue         |    23 +
 .../form/guideline/dropdowns/validators.js    |    82 +
 .../guideline/errormessages/FormContent.vue   |    87 +
 .../guideline/errormessages/FormInput.vue     |    84 +
 .../form/guideline/errormessages/main.js      |     4 +
 .../form/guideline/errormessages/main.vue     |    23 +
 .../guideline/errormessages/validators.js     |    82 +
 .../form/guideline/floating/FormContent.vue   |    91 +
 .../floating/FormFloatingNumericTextBox.vue   |    86 +
 .../form/guideline/floating/main.js           |     4 +
 .../form/guideline/floating/main.vue          |    23 +
 .../form/guideline/floating/validators.js     |    82 +
 .../guideline/formbuttons/FormCheckbox.vue    |    84 +
 .../guideline/formbuttons/FormContent.vue     |   112 +
 .../form/guideline/formbuttons/FormInput.vue  |    84 +
 .../form/guideline/formbuttons/main.js        |     4 +
 .../form/guideline/formbuttons/main.vue       |    23 +
 .../form/guideline/formbuttons/validators.js  |    82 +
 .../guideline/formcomponents/FormCheckbox.vue |    84 +
 .../guideline/formcomponents/FormContent.vue  |   211 +
 .../formcomponents/FormDatePicker.vue         |    80 +
 .../guideline/formcomponents/FormInput.vue    |    84 +
 .../formcomponents/FormMaskedTextBox.vue      |    88 +
 .../formcomponents/FormNumericTextBox.vue     |    80 +
 .../guideline/formcomponents/FormTextArea.vue |    81 +
 .../form/guideline/formcomponents/main.js     |     4 +
 .../form/guideline/formcomponents/main.vue    |    23 +
 .../guideline/formcomponents/validators.js    |    82 +
 .../guideline/formvalidation/FormCheckbox.vue |    84 +
 .../guideline/formvalidation/FormContent.vue  |   127 +
 .../guideline/formvalidation/FormInput.vue    |    84 +
 .../form/guideline/formvalidation/main.js     |     4 +
 .../form/guideline/formvalidation/main.vue    |    23 +
 .../guideline/formvalidation/validators.js    |    82 +
 .../form/guideline/groups/FormCheckbox.vue    |    84 +
 .../form/guideline/groups/FormContent.vue     |   111 +
 .../form/guideline/groups/FormInput.vue       |    84 +
 .../form/guideline/groups/main.js             |     4 +
 .../form/guideline/groups/main.vue            |    23 +
 .../form/guideline/groups/validators.js       |    82 +
 .../form/guideline/hints/FormContent.vue      |    91 +
 .../form/guideline/hints/FormDatePicker.vue   |    80 +
 .../form/guideline/hints/FormInput.vue        |    84 +
 .../form/guideline/hints/main.js              |     4 +
 .../form/guideline/hints/main.vue             |    23 +
 .../form/guideline/hints/validators.js        |    82 +
 .../form/guideline/horizontal/FormContent.vue |   114 +
 .../form/guideline/horizontal/FormInput.vue   |    84 +
 .../horizontal/FormMaskedTextBox.vue          |    88 +
 .../form/guideline/horizontal/main.js         |     4 +
 .../form/guideline/horizontal/main.vue        |    23 +
 .../form/guideline/horizontal/validators.js   |    82 +
 .../form/guideline/inputs/FormContent.vue     |   157 +
 .../form/guideline/inputs/FormInput.vue       |    84 +
 .../guideline/inputs/FormMaskedTextBox.vue    |    88 +
 .../guideline/inputs/FormNumericTextBox.vue   |    80 +
 .../form/guideline/inputs/FormSlider.vue      |    89 +
 .../form/guideline/inputs/FormTextArea.vue    |    81 +
 .../form/guideline/inputs/main.js             |     4 +
 .../form/guideline/inputs/main.vue            |    24 +
 .../form/guideline/inputs/validators.js       |    82 +
 .../form/guideline/optional/FormContent.vue   |    97 +
 .../optional/FormFloatingNumericTextBox.vue   |    86 +
 .../guideline/optional/FormMaskedTextBox.vue  |    88 +
 .../form/guideline/optional/main.js           |     4 +
 .../form/guideline/optional/main.vue          |    23 +
 .../form/guideline/optional/validators.js     |    82 +
 .../guideline/placeholder/FormContent.vue     |    71 +
 .../form/guideline/placeholder/FormInput.vue  |    84 +
 .../form/guideline/placeholder/main.js        |     4 +
 .../form/guideline/placeholder/main.vue       |    23 +
 .../form/guideline/placeholder/validators.js  |    82 +
 .../form/guideline/uploads/FormContent.vue    |    78 +
 .../form/guideline/uploads/FormUpload.vue     |    91 +
 .../form/guideline/uploads/main.js            |     4 +
 .../form/guideline/uploads/main.vue           |    23 +
 .../form/labels/FloatingLabelFormInput.vue    |    92 +
 .../form/labels/FormContent.vue               |    76 +
 .../form/labels/LabelFormInput.vue            |    85 +
 vue-options-api-demos/form/labels/main.js     |     4 +
 vue-options-api-demos/form/labels/main.vue    |    24 +
 .../horizontal/FloatingLabelFormInput.vue     |    84 +
 .../form/layout/horizontal/FormContent.vue    |    76 +
 .../form/layout/horizontal/LabelFormInput.vue |    84 +
 .../form/layout/horizontal/main.js            |     4 +
 .../form/layout/horizontal/main.vue           |    24 +
 .../vertical/FloatingLabelFormInput.vue       |    84 +
 .../form/layout/vertical/FormContent.vue      |    76 +
 .../form/layout/vertical/LabelFormInput.vue   |    83 +
 .../form/layout/vertical/main.js              |     4 +
 .../form/layout/vertical/main.vue             |    24 +
 .../form/shared/CommandCell.vue               |    35 +
 .../form/shared/FormAutoComplete.vue          |    80 +
 .../form/shared/FormCheckbox.vue              |    84 +
 .../form/shared/FormComboBox.vue              |    87 +
 .../form/shared/FormDateInput.vue             |    79 +
 .../form/shared/FormDatePicker.vue            |    80 +
 .../form/shared/FormDateTimePicker.vue        |    79 +
 .../form/shared/FormDropDownList.vue          |    82 +
 .../shared/FormFloatingNumericTextBox.vue     |    86 +
 .../form/shared/FormGrid.vue                  |    67 +
 .../form/shared/FormInput.vue                 |    84 +
 .../form/shared/FormMaskedTextBox.vue         |    88 +
 .../form/shared/FormMultiSelect.vue           |    82 +
 .../form/shared/FormNumericTextBox.vue        |    80 +
 .../form/shared/FormRadioGroup.vue            |   107 +
 .../form/shared/FormSlider.vue                |    89 +
 .../form/shared/FormTextArea.vue              |    81 +
 .../form/shared/FormTimePicker.vue            |    79 +
 .../form/shared/FormUpload.vue                |    91 +
 vue-options-api-demos/form/shared/data.js     |   212 +
 .../form/shared/tree-data-operations.js       |    31 +
 .../form/shared/validators.js                 |    82 +
 .../gauges/arc-gauge/color-ranges/main.js     |     4 +
 .../gauges/arc-gauge/color-ranges/main.vue    |    45 +
 .../gauges/arc-gauge/overview/main.js         |     4 +
 .../gauges/arc-gauge/overview/main.vue        |    55 +
 .../gauges/arc-gauge/scale-options/main.js    |     4 +
 .../gauges/arc-gauge/scale-options/main.vue   |   202 +
 .../circular-gauge/center-template/main.js    |     4 +
 .../circular-gauge/center-template/main.vue   |    59 +
 .../circular-gauge/color-ranges/main.js       |     4 +
 .../circular-gauge/color-ranges/main.vue      |    45 +
 .../gauges/circular-gauge/overview/main.js    |     4 +
 .../gauges/circular-gauge/overview/main.vue   |    59 +
 .../circular-gauge/scale-options/main.js      |     4 +
 .../circular-gauge/scale-options/main.vue     |   207 +
 .../gauges/export-options/to-image/main.js    |     4 +
 .../gauges/export-options/to-image/main.vue   |    96 +
 .../gauges/export-options/to-pdf/main.js      |     4 +
 .../gauges/export-options/to-pdf/main.vue     |    92 +
 .../gauges/export-options/to-svg/main.js      |     4 +
 .../gauges/export-options/to-svg/main.vue     |    92 +
 .../gauges/globalization/main.js              |     4 +
 .../gauges/globalization/main.vue             |    98 +
 .../linear-gauge/multiple-pointers/main.js    |     4 +
 .../linear-gauge/multiple-pointers/main.vue   |    43 +
 .../gauges/linear-gauge/orientation/main.js   |     4 +
 .../gauges/linear-gauge/orientation/main.vue  |    40 +
 .../gauges/linear-gauge/overview/main.js      |     4 +
 .../gauges/linear-gauge/overview/main.vue     |    32 +
 .../gauges/linear-gauge/scale-options/main.js |     4 +
 .../linear-gauge/scale-options/main.vue       |   207 +
 .../gauges/linear-gauge/scale-ranges/main.js  |     4 +
 .../gauges/linear-gauge/scale-ranges/main.vue |    55 +
 vue-options-api-demos/gauges/overview/main.js |     4 +
 .../gauges/overview/main.vue                  |    75 +
 .../radial-gauge/multiple-pointers/main.js    |     4 +
 .../radial-gauge/multiple-pointers/main.vue   |    38 +
 .../gauges/radial-gauge/overview/main.js      |     4 +
 .../gauges/radial-gauge/overview/main.vue     |    30 +
 .../gauges/radial-gauge/scale-options/main.js |     4 +
 .../radial-gauge/scale-options/main.vue       |   200 +
 .../gauges/radial-gauge/scale-ranges/main.js  |     4 +
 .../gauges/radial-gauge/scale-ranges/main.vue |    52 +
 vue-options-api-demos/gauges/rtl/main.js      |     4 +
 vue-options-api-demos/gauges/rtl/main.vue     |    32 +
 .../grid/basic/BudgetComponent.vue            |    23 +
 .../grid/basic/ContactNameComponent.vue       |    26 +
 .../grid/basic/EngagementComponent.vue        |    48 +
 .../grid/basic/FlagComponent.vue              |    21 +
 vue-options-api-demos/grid/basic/Grid.vue     |   512 +
 .../grid/basic/IsOnlineComponent.vue          |    20 +
 .../grid/basic/employees.json                 |  1403 +
 vue-options-api-demos/grid/basic/en-US.js     |   297 +
 vue-options-api-demos/grid/basic/es.js        |   122 +
 vue-options-api-demos/grid/basic/fr.js        |   123 +
 vue-options-api-demos/grid/basic/images.js    |    79 +
 vue-options-api-demos/grid/basic/main.js      |     4 +
 vue-options-api-demos/grid/basic/main.vue     |   116 +
 .../grid/columns/column-menu/basic/main.js    |     4 +
 .../grid/columns/column-menu/basic/main.vue   |    68 +
 .../columns/column-menu/basic/products.js     |   139 +
 .../column-menu/checkboxFilter/ColumnMenu.vue |    49 +
 .../column-menu/checkboxFilter/main.js        |     4 +
 .../column-menu/checkboxFilter/main.vue       |    90 +
 .../column-menu/checkboxFilter/products.js    |   139 +
 .../columns/column-menu/custom-style/main.js  |     4 +
 .../columns/column-menu/custom-style/main.vue |   111 +
 .../column-menu/custom-style/products.js      |   139 +
 .../column-menu/custom-style/styles.css       |     4 +
 .../columns/column-menu/custom/ColumnMenu.vue |   155 +
 .../grid/columns/column-menu/custom/main.js   |     4 +
 .../grid/columns/column-menu/custom/main.vue  |   111 +
 .../columns/column-menu/custom/products.js    |   139 +
 .../flter-only-custom-icon/ColumnMenu.vue     |   118 +
 .../flter-only-custom-icon/main.js            |     4 +
 .../flter-only-custom-icon/main.vue           |   143 +
 .../flter-only-custom-icon/products.js        |   139 +
 .../columns/column-virtualization/main.js     |     4 +
 .../columns/column-virtualization/main.vue    |    63 +
 .../columns/dynamic-column-generation/main.js |     4 +
 .../dynamic-column-generation/main.vue        |    84 +
 .../grid/columns/headers/main.js              |     4 +
 .../grid/columns/headers/main.vue             |    53 +
 .../grid/columns/hidden/Header.vue            |    35 +
 .../grid/columns/hidden/main.js               |     4 +
 .../grid/columns/hidden/main.vue              |    95 +
 .../grid/columns/locked/main.js               |     4 +
 .../grid/columns/locked/main.vue              |    44 +
 .../grid/columns/locked/products.js           |  1313 +
 .../grid/columns/reordering/main.js           |     4 +
 .../grid/columns/reordering/main.vue          |    44 +
 .../grid/columns/resizing/main.js             |     4 +
 .../grid/columns/resizing/main.vue            |    40 +
 .../widths/fit-smaller-screens/main.js        |     4 +
 .../widths/fit-smaller-screens/main.vue       |    74 +
 .../widths/fit-smaller-screens/products.json  |  1233 +
 .../grid/columns/widths/minimum-width/main.js |     4 +
 .../columns/widths/minimum-width/main.vue     |    96 +
 .../widths/minimum-width/products.json        |  1233 +
 .../widths/percentage-no-fixed-width/main.js  |     4 +
 .../widths/percentage-no-fixed-width/main.vue |    69 +
 .../percentage-no-fixed-width/products.json   |  1233 +
 .../columns/widths/percentage-width/main.js   |     4 +
 .../columns/widths/percentage-width/main.vue  |    62 +
 .../widths/percentage-width/products.json     |  1233 +
 vue-options-api-demos/grid/common/es.json     |    55 +
 .../grid/common/northwind/categories.json     |    43 +
 .../grid/common/northwind/customers.json      |  1277 +
 .../grid/common/northwind/employees.json      |   241 +
 .../grid/common/northwind/orders.json         | 25576 ++++++++++++++++
 .../grid/common/northwind/products.json       |   927 +
 .../grid/common/northwind/regions.json        |   239 +
 .../grid/common/northwind/shippers.json       |    18 +
 .../grid/common/northwind/suppliers.json      |   409 +
 .../grid/compact-grid/ChangeComponent.vue     |    22 +
 .../ChangePercentageComponent.vue             |    30 +
 .../grid/compact-grid/GridComponent.vue       |   146 +
 .../grid/compact-grid/companyData.json        |  1002 +
 .../grid/compact-grid/main.js                 |     4 +
 .../grid/compact-grid/main.vue                |    50 +
 .../cells/component/ComponentInstance.vue     |    37 +
 .../custom-rendering/cells/component/main.js  |     4 +
 .../custom-rendering/cells/component/main.vue |    56 +
 .../custom-rendering/cells/function/main.js   |     4 +
 .../custom-rendering/cells/function/main.vue  |    61 +
 .../grid/custom-rendering/cells/slot/main.js  |     4 +
 .../grid/custom-rendering/cells/slot/main.vue |    65 +
 .../detail/DetailComponent.vue                |    27 +
 .../grid/custom-rendering/detail/main.js      |     4 +
 .../grid/custom-rendering/detail/main.vue     |    67 +
 .../grid/custom-rendering/detail/products.js  |    72 +
 .../footer/component/ComponentInstance.vue    |    37 +
 .../custom-rendering/footer/component/main.js |     4 +
 .../footer/component/main.vue                 |    70 +
 .../custom-rendering/footer/function/main.js  |     4 +
 .../custom-rendering/footer/function/main.vue |    58 +
 .../grid/custom-rendering/footer/slot/main.js |     4 +
 .../custom-rendering/footer/slot/main.vue     |    55 +
 .../group-header/CustomCell.vue               |    65 +
 .../custom-rendering/group-header/main.js     |     4 +
 .../custom-rendering/group-header/main.vue    |   104 +
 .../custom-rendering/grouping/CustomCell.vue  |    66 +
 .../grid/custom-rendering/grouping/main.js    |     4 +
 .../grid/custom-rendering/grouping/main.vue   |   105 +
 .../headers/component/ComponentInstance.vue   |    37 +
 .../headers/component/main.js                 |     4 +
 .../headers/component/main.vue                |    70 +
 .../custom-rendering/headers/function/main.js |     4 +
 .../headers/function/main.vue                 |    58 +
 .../custom-rendering/headers/slot/main.js     |     4 +
 .../custom-rendering/headers/slot/main.vue    |    55 +
 .../hierarchy/DetailComponent.vue             |    38 +
 .../grid/custom-rendering/hierarchy/main.js   |     4 +
 .../grid/custom-rendering/hierarchy/main.vue  |    61 +
 .../custom-rendering/hierarchy/products.js    |  1313 +
 .../custom-rendering/loader-template/main.js  |     4 +
 .../custom-rendering/loader-template/main.vue |   130 +
 .../row-reorder/CustomCell.vue                |    33 +
 .../grid/custom-rendering/row-reorder/main.js |     4 +
 .../custom-rendering/row-reorder/main.vue     |    74 +
 .../local-data-operations/main.js             |     4 +
 .../local-data-operations/main.vue            |   182 +
 .../data-binding/odata4-crud/CommandCell.vue  |    73 +
 .../grid/data-binding/odata4-crud/main.js     |     4 +
 .../grid/data-binding/odata4-crud/main.vue    |   252 +
 .../grid/editing/basic/main.js                |     4 +
 .../grid/editing/basic/main.vue               |   100 +
 .../grid/editing/custom/CommandCell.vue       |    61 +
 .../grid/editing/custom/DropDownCell.vue      |    42 +
 .../grid/editing/custom/main.js               |     4 +
 .../grid/editing/custom/main.vue              |   207 +
 .../grid/editing/external/CommandCell.vue     |    49 +
 .../grid/editing/external/DialogContainer.vue |    88 +
 .../grid/editing/external/data.js             |   184 +
 .../grid/editing/external/main.js             |     4 +
 .../grid/editing/external/main.vue            |   104 +
 .../grid/editing/incell/main.js               |     4 +
 .../grid/editing/incell/main.vue              |   159 +
 .../grid/editing/inline-form/CommandCell.vue  |    57 +
 .../grid/editing/inline-form/FormContent.vue  |    57 +
 .../grid/editing/inline-form/FormInput.vue    |    89 +
 .../grid/editing/inline-form/NameCell.vue     |    58 +
 .../grid/editing/inline-form/main.js          |     4 +
 .../grid/editing/inline-form/main.vue         |   212 +
 .../inline-form/verificationFunctions.js      |     5 +
 .../grid/editing/inline/CommandCell.vue       |    73 +
 .../grid/editing/inline/main.js               |     4 +
 .../grid/editing/inline/main.vue              |   199 +
 .../grid/editing/validation/CommandCell.vue   |    62 +
 .../editing/validation/DatePickerCell.vue     |    49 +
 .../grid/editing/validation/InputCell.vue     |    47 +
 .../grid/editing/validation/NumericCell.vue   |    50 +
 .../grid/editing/validation/main.js           |     4 +
 .../grid/editing/validation/main.vue          |   251 +
 .../grid/editing/validation/products.js       |    26 +
 .../validation/verificationFunctions.js       |    27 +
 vue-options-api-demos/grid/excel/main.js      |     4 +
 vue-options-api-demos/grid/excel/main.vue     |    58 +
 .../grid/filtering/basic/boolean/main.js      |     4 +
 .../grid/filtering/basic/boolean/main.vue     |    62 +
 .../grid/filtering/basic/boolean/products.js  |   184 +
 .../grid/filtering/basic/date/main.js         |     4 +
 .../grid/filtering/basic/date/main.vue        |    67 +
 .../grid/filtering/basic/date/products.js     |   184 +
 .../grid/filtering/basic/main.js              |     4 +
 .../grid/filtering/basic/main.vue             |    71 +
 .../grid/filtering/basic/number/main.js       |     4 +
 .../grid/filtering/basic/number/main.vue      |    62 +
 .../grid/filtering/basic/number/products.js   |   184 +
 .../grid/filtering/basic/products.js          |   184 +
 .../grid/filtering/basic/string/main.js       |     4 +
 .../grid/filtering/basic/string/main.vue      |    62 +
 .../grid/filtering/basic/string/products.js   |   184 +
 .../grid/filtering/custom/main.js             |     4 +
 .../grid/filtering/custom/main.vue            |    87 +
 .../grid/filtering/custom/products.js         |   185 +
 .../grid/filtering/external/main.js           |     4 +
 .../grid/filtering/external/main.vue          |   114 +
 .../grid/filtering/external/products.js       |   184 +
 .../row/custom-daterangepicker/main.js        |     4 +
 .../row/custom-daterangepicker/main.vue       |   104 +
 .../row/custom-daterangepicker/products.js    |   185 +
 .../filtering/row/custom-dropdownlist/main.js |     4 +
 .../row/custom-dropdownlist/main.vue          |    96 +
 .../row/custom-dropdownlist/products.js       |   185 +
 .../grid/filtering/row/custom-switch/main.js  |     4 +
 .../grid/filtering/row/custom-switch/main.vue |    86 +
 .../filtering/row/custom-switch/products.js   |   185 +
 .../grid/filtering/select-filter-type/main.js |     4 +
 .../filtering/select-filter-type/main.vue     |    92 +
 .../filtering/select-filter-type/products.js  |   184 +
 .../grid/globalization/main.js                |     4 +
 .../grid/globalization/main.vue               |   167 +
 .../grouping/aggregates/CellComponent.vue     |    96 +
 .../grid/grouping/aggregates/main.js          |     4 +
 .../grid/grouping/aggregates/main.vue         |   138 +
 .../grid/grouping/basic/main.js               |     4 +
 .../grid/grouping/basic/main.vue              |   117 +
 .../grid/grouping/virtual/main.js             |     4 +
 .../grid/grouping/virtual/main.vue            |   117 +
 .../grid/grouping/virtual/products.js         |  1313 +
 .../grid/keyboard-inline/CommandCell.vue      |    80 +
 .../grid/keyboard-inline/main.js              |     4 +
 .../grid/keyboard-inline/main.vue             |   199 +
 .../keyboard-navigation/DetailComponent.vue   |    39 +
 .../grid/keyboard-navigation/main.js          |     4 +
 .../grid/keyboard-navigation/main.vue         |   109 +
 .../grid/keyboard-navigation/products.js      |  1313 +
 .../grid/live-data/ChangePriceComponent.vue   |    31 +
 vue-options-api-demos/grid/live-data/Grid.vue |   200 +
 .../grid/live-data/PriceComponent.vue         |    25 +
 .../grid/live-data/RatingComponent.vue        |    37 +
 .../grid/live-data/TickerComponent.vue        |    24 +
 .../grid/live-data/VolumeComponent.vue        |    31 +
 .../grid/live-data/financial-data.js          |   319 +
 vue-options-api-demos/grid/live-data/main.js  |     4 +
 vue-options-api-demos/grid/live-data/main.vue |   100 +
 .../grid/live-data/services.js                |    52 +
 .../grid/live-data/trends.js                  |    18 +
 vue-options-api-demos/grid/live-data/utils.js |    60 +
 .../grid/paging/basic/main.js                 |     4 +
 .../grid/paging/basic/main.vue                |    88 +
 .../grid/paging/types/main.js                 |     4 +
 .../grid/paging/types/main.vue                |   166 +
 .../grid/pdf/all-pages/main.js                |     4 +
 .../grid/pdf/all-pages/main.vue               |    83 +
 vue-options-api-demos/grid/pdf/basic/main.js  |     4 +
 vue-options-api-demos/grid/pdf/basic/main.vue |    83 +
 .../grid/pdf/custom-columns/main.js           |     4 +
 .../grid/pdf/custom-columns/main.vue          |   101 +
 .../grid/pdf/custom-fonts/main.js             |     4 +
 .../grid/pdf/custom-fonts/main.vue            |    84 +
 .../grid/pdf/custom-fonts/styles.css          |    38 +
 .../grid/pdf/fit-content/main.js              |     4 +
 .../grid/pdf/fit-content/main.vue             |    86 +
 .../grid/pdf/page-template/main.js            |     4 +
 .../grid/pdf/page-template/main.vue           |    96 +
 .../grid/performance/main.js                  |     4 +
 .../grid/performance/main.vue                 |   145 +
 .../grid/persist-state/ColumnMenu.vue         |   190 +
 .../grid/persist-state/DetailComponent.vue    |    24 +
 .../grid/persist-state/es.json                |    55 +
 .../grid/persist-state/main.js                |     4 +
 .../grid/persist-state/main.vue               |   349 +
 .../grid/persist-state/orders.json            | 25576 ++++++++++++++++
 .../grid/print/control-column-widths/main.js  |     4 +
 .../grid/print/control-column-widths/main.vue |   130 +
 .../print/control-column-widths/products.json |  1233 +
 .../grid/print/pageable/main.js               |     4 +
 .../grid/print/pageable/main.vue              |   150 +
 .../grid/print/scrollable-controlled/main.js  |     4 +
 .../grid/print/scrollable-controlled/main.vue |   158 +
 .../print/scrollable-controlled/products.json |  1233 +
 .../grid/print/scrollable/main.js             |     4 +
 .../grid/print/scrollable/main.vue            |   113 +
 .../grid/responsive-columns/basic/main.js     |     4 +
 .../grid/responsive-columns/basic/main.vue    |    67 +
 .../responsive-columns/basic/products.json    |  1233 +
 .../column-virtualization/main.js             |     4 +
 .../column-virtualization/main.vue            |    68 +
 .../grid/responsive-columns/height/main.js    |     4 +
 .../grid/responsive-columns/height/main.vue   |    68 +
 .../multicolumn-grid/main.js                  |     4 +
 .../multicolumn-grid/main.vue                 |   117 +
 .../grid/rowreorder/component/CustomCell.vue  |    92 +
 .../grid/rowreorder/component/DragClue.vue    |    50 +
 .../grid/rowreorder/component/DragPointer.vue |    15 +
 .../grid/rowreorder/component/common.js       |    84 +
 .../grid/rowreorder/component/main.js         |     4 +
 .../grid/rowreorder/component/main.vue        |   116 +
 .../grid/rowreorder/css/CustomCell.vue        |    98 +
 .../grid/rowreorder/css/DragClue.vue          |    50 +
 .../grid/rowreorder/css/common.js             |    84 +
 .../grid/rowreorder/css/main.js               |     4 +
 .../grid/rowreorder/css/main.vue              |   113 +
 .../grid/rows/sticky/main.js                  |     4 +
 .../grid/rows/sticky/main.vue                 |   185 +
 .../grid/rows/sticky/products.json            |  1312 +
 .../grid/scroll-modes/basic/main.js           |     4 +
 .../grid/scroll-modes/basic/main.vue          |    68 +
 .../grid/scroll-modes/custom/main.js          |     4 +
 .../grid/scroll-modes/custom/main.vue         |    90 +
 .../grid/scroll-modes/infinite/main.js        |     4 +
 .../grid/scroll-modes/infinite/main.vue       |    46 +
 .../grid/scroll-modes/infinite/products.json  |  1233 +
 .../grid/selection/basic/main.js              |     4 +
 .../grid/selection/basic/main.vue             |    63 +
 .../grid/selection/custom/main.js             |     4 +
 .../grid/selection/custom/main.vue            |    61 +
 .../grid/selection/custom/products.js         |   125 +
 .../grid/shared/categories.json               |    43 +
 .../grid/shared/customers.json                |  1277 +
 .../grid/shared/employees.json                |   241 +
 vue-options-api-demos/grid/shared/es.json     |    55 +
 vue-options-api-demos/grid/shared/keys.js     |    21 +
 vue-options-api-demos/grid/shared/orders.json | 25576 ++++++++++++++++
 .../grid/shared/products.json                 |  1233 +
 .../grid/shared/regions.json                  |   239 +
 .../grid/shared/sample-products.js            |   182 +
 .../grid/shared/shippers.json                 |    18 +
 .../grid/shared/suppliers.json                |   409 +
 .../grid/sorting/basic/main.js                |     4 +
 .../grid/sorting/basic/main.vue               |    80 +
 .../grid/sorting/custom/main.js               |     4 +
 .../grid/sorting/custom/main.vue              |   100 +
 .../grid/styling/styling-cell/main.js         |     4 +
 .../grid/styling/styling-cell/main.vue        |    51 +
 .../grid/styling/styling-cell/products.json   |  1233 +
 .../grid/styling/styling-class-name/main.js   |     4 +
 .../grid/styling/styling-class-name/main.vue  |    38 +
 .../styling/styling-class-name/products.json  |  1233 +
 .../grid/styling/styling-dynamic/main.js      |     4 +
 .../grid/styling/styling-dynamic/main.vue     |    81 +
 .../grid/styling/styling-header-cell/main.js  |     4 +
 .../grid/styling/styling-header-cell/main.vue |    40 +
 .../styling/styling-header-cell/products.json |  1233 +
 .../grid/styling/styling-row/main.js          |     4 +
 .../grid/styling/styling-row/main.vue         |    50 +
 .../grid/styling/styling-row/products.json    |  1233 +
 .../indicators/badge/alignment/main.js        |     4 +
 .../indicators/badge/alignment/main.vue       |   112 +
 .../indicators/badge/container/main.js        |     4 +
 .../indicators/badge/container/main.vue       |   131 +
 .../indicators/badge/cutout-border/main.js    |     4 +
 .../indicators/badge/cutout-border/main.vue   |    58 +
 .../indicators/badge/fill/main.js             |     4 +
 .../indicators/badge/fill/main.vue            |    44 +
 .../indicators/badge/overview/Contacts.vue    |   133 +
 .../indicators/badge/overview/SocialApps.vue  |    66 +
 .../indicators/badge/overview/Status.vue      |    45 +
 .../indicators/badge/overview/main.js         |     4 +
 .../indicators/badge/overview/main.vue        |    32 +
 .../indicators/badge/position/main.js         |     4 +
 .../indicators/badge/position/main.vue        |    68 +
 .../indicators/badge/positioning/main.js      |     4 +
 .../indicators/badge/positioning/main.vue     |   156 +
 .../indicators/badge/rounded/main.js          |     4 +
 .../indicators/badge/rounded/main.vue         |    62 +
 .../indicators/badge/size/main.js             |     4 +
 .../indicators/badge/size/main.vue            |    61 +
 .../indicators/badge/theme-color/main.js      |     4 +
 .../indicators/badge/theme-color/main.vue     |    62 +
 .../indicators/get-started/main.js            |     4 +
 .../indicators/get-started/main.vue           |    14 +
 .../indicators/globalization/main.js          |     4 +
 .../indicators/globalization/main.vue         |   145 +
 .../indicators/loader/overview/main.js        |     4 +
 .../indicators/loader/overview/main.vue       |    53 +
 .../indicators/loader/size/main.js            |     4 +
 .../indicators/loader/size/main.vue           |    22 +
 .../indicators/loader/theme-color/main.js     |     4 +
 .../indicators/loader/theme-color/main.vue    |    51 +
 .../indicators/loader/type/main.js            |     4 +
 .../indicators/loader/type/main.vue           |    25 +
 .../indicators/overview/main.js               |     4 +
 .../indicators/overview/main.vue              |   177 +
 .../indicators/skeleton/animation/main.js     |     4 +
 .../indicators/skeleton/animation/main.vue    |   175 +
 .../indicators/skeleton/dynamic/main.js       |     4 +
 .../indicators/skeleton/dynamic/main.vue      |   133 +
 .../indicators/skeleton/overview/main.js      |     4 +
 .../indicators/skeleton/overview/main.vue     |   125 +
 .../indicators/skeleton/shape/main.js         |     4 +
 .../indicators/skeleton/shape/main.vue        |    54 +
 vue-options-api-demos/inputs/basic/main.js    |     4 +
 vue-options-api-demos/inputs/basic/main.vue   |   126 +
 .../CheckboxStyleConfigurator.vue             |    80 +
 .../checkbox/appearance/configurator/main.js  |     4 +
 .../checkbox/appearance/configurator/main.vue |    36 +
 .../checkbox/appearance/rounded/main.js       |     4 +
 .../checkbox/appearance/rounded/main.vue      |    56 +
 .../inputs/checkbox/appearance/size/main.js   |     4 +
 .../inputs/checkbox/appearance/size/main.vue  |    49 +
 .../checkbox/controlled/checked/main.js       |     4 +
 .../checkbox/controlled/checked/main.vue      |    44 +
 .../inputs/checkbox/controlled/value/main.js  |     4 +
 .../inputs/checkbox/controlled/value/main.vue |    44 +
 .../inputs/checkbox/default/main.js           |     4 +
 .../inputs/checkbox/default/main.vue          |    15 +
 .../inputs/checkbox/disabled/main.js          |     4 +
 .../inputs/checkbox/disabled/main.vue         |    17 +
 .../inputs/checkbox/form/basic/main.js        |     4 +
 .../inputs/checkbox/form/basic/main.vue       |    76 +
 .../checkbox/form/custom-message/main.js      |     4 +
 .../checkbox/form/custom-message/main.vue     |    83 +
 .../checkbox/form/disable-styles/main.js      |     4 +
 .../checkbox/form/disable-styles/main.vue     |    85 +
 .../form/kendo-vue-form/FormCheckbox.vue      |    84 +
 .../form/kendo-vue-form/FormContent.vue       |   106 +
 .../form/kendo-vue-form/FormInput.vue         |    94 +
 .../checkbox/form/kendo-vue-form/main.js      |     4 +
 .../checkbox/form/kendo-vue-form/main.vue     |    23 +
 .../inputs/checkbox/form/override/main.js     |     4 +
 .../inputs/checkbox/form/override/main.vue    |   100 +
 .../inputs/checkbox/keyboard/main.js          |     4 +
 .../inputs/checkbox/keyboard/main.vue         |    20 +
 .../inputs/checkbox/labels/custom/main.js     |     4 +
 .../inputs/checkbox/labels/custom/main.vue    |    26 +
 .../inputs/checkbox/labels/setup/main.js      |     4 +
 .../inputs/checkbox/labels/setup/main.vue     |    22 +
 .../inputs/checkbox/main/main.js              |     4 +
 .../inputs/checkbox/main/main.vue             |    20 +
 .../colorgradient/colorcontrast/main.js       |     4 +
 .../colorgradient/colorcontrast/main.vue      |    43 +
 .../inputs/colorgradient/controlled/main.js   |     4 +
 .../inputs/colorgradient/controlled/main.vue  |    31 +
 .../inputs/colorgradient/disabled/main.js     |     4 +
 .../inputs/colorgradient/disabled/main.vue    |    19 +
 .../inputs/colorgradient/events/Logger.vue    |    43 +
 .../inputs/colorgradient/events/main.js       |     5 +
 .../inputs/colorgradient/events/main.vue      |    39 +
 .../inputs/colorgradient/keyboard/main.js     |     4 +
 .../inputs/colorgradient/keyboard/main.vue    |    14 +
 .../inputs/colorgradient/opacity/main.js      |     4 +
 .../inputs/colorgradient/opacity/main.vue     |    29 +
 .../inputs/colorgradient/overview/main.js     |     4 +
 .../inputs/colorgradient/overview/main.vue    |    46 +
 .../inputs/colorpalette/controlled/main.js    |     4 +
 .../inputs/colorpalette/controlled/main.vue   |    33 +
 .../inputs/colorpalette/custom/main.js        |     4 +
 .../inputs/colorpalette/custom/main.vue       |    21 +
 .../inputs/colorpalette/disabled/main.js      |     4 +
 .../inputs/colorpalette/disabled/main.vue     |    14 +
 .../inputs/colorpalette/keyboard/main.js      |     4 +
 .../inputs/colorpalette/keyboard/main.vue     |    26 +
 .../colorpalette/overview/basic/main.js       |     4 +
 .../colorpalette/overview/basic/main.vue      |    56 +
 .../colorpalette/overview/basic/styles.css    |    56 +
 .../colorpalette/overview/events/Logger.vue   |    43 +
 .../colorpalette/overview/events/main.js      |     4 +
 .../colorpalette/overview/events/main.vue     |    39 +
 .../inputs/colorpalette/presets/main.js       |     4 +
 .../inputs/colorpalette/presets/main.vue      |    67 +
 .../colorpicker/adaptive-rendering/main.js    |     4 +
 .../colorpicker/adaptive-rendering/main.vue   |    23 +
 .../appearance/ColorPickerConfigurator.vue    |   105 +
 .../inputs/colorpicker/appearance/main.js     |     4 +
 .../inputs/colorpicker/appearance/main.vue    |    42 +
 .../inputs/colorpicker/colorcontrast/main.js  |     4 +
 .../inputs/colorpicker/colorcontrast/main.vue |    49 +
 .../colorpicker/controlled/popup/main.js      |     4 +
 .../colorpicker/controlled/popup/main.vue     |    40 +
 .../colorpicker/controlled/value/main.js      |     4 +
 .../colorpicker/controlled/value/main.vue     |    33 +
 .../colorpicker/custom/custom-icons/main.js   |     4 +
 .../colorpicker/custom/custom-icons/main.vue  |    17 +
 .../colorpicker/custom/gradient/main.js       |     4 +
 .../colorpicker/custom/gradient/main.vue      |    26 +
 .../colorpicker/custom/kendo-icons/main.js    |     4 +
 .../colorpicker/custom/kendo-icons/main.vue   |    21 +
 .../inputs/colorpicker/custom/palette/main.js |     4 +
 .../colorpicker/custom/palette/main.vue       |    57 +
 .../inputs/colorpicker/default/main.js        |     4 +
 .../inputs/colorpicker/default/main.vue       |    22 +
 .../inputs/colorpicker/disabled/main.js       |     4 +
 .../inputs/colorpicker/disabled/main.vue      |    14 +
 .../inputs/colorpicker/events/Logger.vue      |    43 +
 .../inputs/colorpicker/events/main.js         |     5 +
 .../inputs/colorpicker/events/main.vue        |    57 +
 .../inputs/colorpicker/keyboard/main.js       |     4 +
 .../inputs/colorpicker/keyboard/main.vue      |    26 +
 .../inputs/colorpicker/overview/main.js       |     4 +
 .../inputs/colorpicker/overview/main.vue      |    28 +
 .../inputs/colorpicker/view/combined/main.js  |     4 +
 .../inputs/colorpicker/view/combined/main.vue |    36 +
 .../inputs/colorpicker/view/popup/main.js     |     4 +
 .../inputs/colorpicker/view/popup/main.vue    |    46 +
 vue-options-api-demos/inputs/common/es.json   |     6 +
 .../inputs/flatcolorpicker/basic/main.js      |     4 +
 .../inputs/flatcolorpicker/basic/main.vue     |    14 +
 .../customization/footer/main.js              |     4 +
 .../customization/footer/main.vue             |    14 +
 .../customization/header/main.js              |     4 +
 .../customization/header/main.vue             |    14 +
 .../inputs/flatcolorpicker/disabled/main.js   |     4 +
 .../inputs/flatcolorpicker/disabled/main.vue  |    14 +
 .../inputs/flatcolorpicker/events/Logger.vue  |    43 +
 .../inputs/flatcolorpicker/events/main.js     |     5 +
 .../inputs/flatcolorpicker/events/main.vue    |    45 +
 .../inputs/flatcolorpicker/keyboard/main.js   |     4 +
 .../inputs/flatcolorpicker/keyboard/main.vue  |    19 +
 .../inputs/floating-labels/main.js            |     4 +
 .../inputs/floating-labels/main.vue           |    59 +
 .../inputs/get-started/main.js                |     4 +
 .../inputs/get-started/main.vue               |    14 +
 .../inputs/globalization/es.json              |    11 +
 .../inputs/globalization/main.js              |     4 +
 .../inputs/globalization/main.vue             |    54 +
 .../InputStyleConfigurator copy.vue           |   105 +
 .../configurator/InputStyleConfigurator.vue   |   105 +
 .../input/appearance/configurator/main.js     |     4 +
 .../input/appearance/configurator/main.vue    |    42 +
 .../inputs/input/appearance/fill-mode/main.js |     4 +
 .../input/appearance/fill-mode/main.vue       |    54 +
 .../inputs/input/appearance/rounded/main.js   |     4 +
 .../inputs/input/appearance/rounded/main.vue  |    58 +
 .../inputs/input/appearance/size/main.js      |     4 +
 .../inputs/input/appearance/size/main.vue     |    53 +
 .../inputs/input/basic/main.js                |     4 +
 .../inputs/input/basic/main.vue               |    17 +
 .../inputs/input/forms/basic/main.js          |     4 +
 .../inputs/input/forms/basic/main.vue         |    83 +
 .../inputs/input/forms/custom-message/main.js |     4 +
 .../input/forms/custom-message/main.vue       |    88 +
 .../inputs/input/forms/disable-styles/main.js |     4 +
 .../input/forms/disable-styles/main.vue       |    84 +
 .../inputs/input/forms/override/main.js       |     4 +
 .../inputs/input/forms/override/main.vue      |    99 +
 .../adornments/clear-button/main.js           |     4 +
 .../adornments/clear-button/main.vue          |    25 +
 .../adornments/disabled/InputIcons.vue        |    24 +
 .../maskedtextbox/adornments/disabled/main.js |     4 +
 .../adornments/disabled/main.vue              |    43 +
 .../adornments/icon-name/main.js              |     4 +
 .../adornments/icon-name/main.vue             |    25 +
 .../adornments/loading-icon/main.js           |     4 +
 .../adornments/loading-icon/main.vue          |    25 +
 .../adornments/prefix/InputIcons.vue          |    15 +
 .../maskedtextbox/adornments/prefix/main.js   |     4 +
 .../maskedtextbox/adornments/prefix/main.vue  |    31 +
 .../adornments/separator/main.js              |     4 +
 .../adornments/separator/main.vue             |    33 +
 .../maskedtextbox/adornments/suffix/main.js   |     4 +
 .../maskedtextbox/adornments/suffix/main.vue  |    27 +
 .../adornments/validation-icon/main.js        |     4 +
 .../adornments/validation-icon/main.vue       |    39 +
 .../MaskedTextBoxStyleConfigurator.vue        |   105 +
 .../appearance/configurator/main.js           |     4 +
 .../appearance/configurator/main.vue          |    49 +
 .../appearance/fill-mode/main.js              |     4 +
 .../appearance/fill-mode/main.vue             |    71 +
 .../maskedtextbox/appearance/rounded/main.js  |     4 +
 .../maskedtextbox/appearance/rounded/main.vue |    80 +
 .../maskedtextbox/appearance/size/main.js     |     4 +
 .../maskedtextbox/appearance/size/main.vue    |    70 +
 .../inputs/maskedtextbox/basic/main.js        |     4 +
 .../inputs/maskedtextbox/basic/main.vue       |    31 +
 .../inputs/maskedtextbox/disabled/main.js     |     4 +
 .../inputs/maskedtextbox/disabled/main.vue    |    21 +
 .../forms/custom-message/main.js              |     4 +
 .../forms/custom-message/main.vue             |    75 +
 .../maskedtextbox/forms/disable-style/main.js |     4 +
 .../forms/disable-style/main.vue              |    72 +
 .../maskedtextbox/forms/enforce/main.js       |     4 +
 .../maskedtextbox/forms/enforce/main.vue      |    80 +
 .../maskedtextbox/forms/validation/main.js    |     4 +
 .../maskedtextbox/forms/validation/main.vue   |    78 +
 .../inputs/maskedtextbox/input-mode/main.js   |     4 +
 .../inputs/maskedtextbox/input-mode/main.vue  |    76 +
 .../inputs/maskedtextbox/masks/basic/main.js  |     4 +
 .../inputs/maskedtextbox/masks/basic/main.vue |    22 +
 .../inputs/maskedtextbox/masks/extend/main.js |     4 +
 .../maskedtextbox/masks/extend/main.vue       |    38 +
 .../inputs/maskedtextbox/readonly/main.js     |     4 +
 .../inputs/maskedtextbox/readonly/main.vue    |    21 +
 .../inputs/maskedtextbox/valid-state/main.js  |     4 +
 .../inputs/maskedtextbox/valid-state/main.vue |    49 +
 .../inputs/maskedtextbox/value/main.js        |     4 +
 .../inputs/maskedtextbox/value/main.vue       |    29 +
 .../adornments/clear-button/main.js           |     4 +
 .../adornments/clear-button/main.vue          |    15 +
 .../adornments/disabled/InputIcons.vue        |    15 +
 .../adornments/disabled/main.js               |     4 +
 .../adornments/disabled/main.vue              |    25 +
 .../adornments/icon-name/main.js              |     4 +
 .../adornments/icon-name/main.vue             |    15 +
 .../adornments/loading-icon/main.js           |     4 +
 .../adornments/loading-icon/main.vue          |    15 +
 .../adornments/prefix/InputIcons.vue          |    15 +
 .../numerictextbox/adornments/prefix/main.js  |     4 +
 .../numerictextbox/adornments/prefix/main.vue |    21 +
 .../adornments/separator/main.js              |     4 +
 .../adornments/separator/main.vue             |    22 +
 .../numerictextbox/adornments/suffix/main.js  |     4 +
 .../numerictextbox/adornments/suffix/main.vue |    17 +
 .../adornments/validation-icon/main.js        |     4 +
 .../adornments/validation-icon/main.vue       |    22 +
 .../NumericTextBoxStyleConfigurator.vue       |   105 +
 .../appearance/configurator/main.js           |     4 +
 .../appearance/configurator/main.vue          |    47 +
 .../appearance/fill-mode/main.js              |     4 +
 .../appearance/fill-mode/main.vue             |    54 +
 .../numerictextbox/appearance/rounded/main.js |     4 +
 .../appearance/rounded/main.vue               |    58 +
 .../numerictextbox/appearance/size/main.js    |     4 +
 .../numerictextbox/appearance/size/main.vue   |    53 +
 .../inputs/numerictextbox/basic/main.js       |     4 +
 .../inputs/numerictextbox/basic/main.vue      |    52 +
 .../custom-parse-format/main.js               |     4 +
 .../custom-parse-format/main.vue              |    55 +
 .../inputs/numerictextbox/formats/main.js     |     4 +
 .../inputs/numerictextbox/formats/main.vue    |    50 +
 .../inputs/numerictextbox/forms/basic/main.js |     4 +
 .../numerictextbox/forms/basic/main.vue       |    72 +
 .../forms/custom-message/main.js              |     4 +
 .../forms/custom-message/main.vue             |    78 +
 .../forms/disable-styles/main.js              |     4 +
 .../forms/disable-styles/main.vue             |    81 +
 .../numerictextbox/forms/override/main.js     |     4 +
 .../numerictextbox/forms/override/main.vue    |    91 +
 .../inputs/numerictextbox/input-mode/main.js  |     4 +
 .../inputs/numerictextbox/input-mode/main.vue |    52 +
 .../inputs/numerictextbox/keyboard/main.js    |     4 +
 .../inputs/numerictextbox/keyboard/main.vue   |    18 +
 .../numerictextbox/predefined-step/main.js    |     4 +
 .../numerictextbox/predefined-step/main.vue   |    19 +
 .../numerictextbox/spin-buttons/main.js       |     4 +
 .../numerictextbox/spin-buttons/main.vue      |    20 +
 .../inputs/radiobutton/appearance/main.js     |     4 +
 .../inputs/radiobutton/appearance/main.vue    |    49 +
 .../inputs/radiobutton/disabled/main.js       |     4 +
 .../inputs/radiobutton/disabled/main.vue      |    25 +
 .../radiobutton/labels/custom-labels/main.js  |     4 +
 .../radiobutton/labels/custom-labels/main.vue |    50 +
 .../radiobutton/labels/setting-up/main.js     |     4 +
 .../radiobutton/labels/setting-up/main.vue    |    26 +
 .../inputs/radiobutton/overview/main.js       |     4 +
 .../inputs/radiobutton/overview/main.vue      |    45 +
 .../inputs/radiogroup/controlled/main.js      |     4 +
 .../inputs/radiogroup/controlled/main.vue     |    65 +
 .../inputs/radiogroup/default-state/main.js   |     4 +
 .../inputs/radiogroup/default-state/main.vue  |    35 +
 .../inputs/radiogroup/forms/FormContent.vue   |   131 +
 .../inputs/radiogroup/forms/FormInput.vue     |    83 +
 .../radiogroup/forms/FormRadioGroup.vue       |    94 +
 .../inputs/radiogroup/forms/main.js           |     4 +
 .../inputs/radiogroup/forms/main.vue          |    23 +
 .../inputs/radiogroup/keyboard/main.js        |     4 +
 .../inputs/radiogroup/keyboard/main.vue       |    36 +
 .../inputs/radiogroup/layout/main.js          |     4 +
 .../inputs/radiogroup/layout/main.vue         |    79 +
 .../inputs/radiogroup/overview/main.js        |     4 +
 .../inputs/radiogroup/overview/main.vue       |    33 +
 .../inputs/rangeslider/controlled/main.js     |     4 +
 .../inputs/rangeslider/controlled/main.vue    |    41 +
 .../inputs/rangeslider/disabled/main.js       |     4 +
 .../inputs/rangeslider/disabled/main.vue      |    27 +
 .../inputs/rangeslider/events/Logger.vue      |    45 +
 .../inputs/rangeslider/events/main.js         |     5 +
 .../inputs/rangeslider/events/main.vue        |    54 +
 .../inputs/rangeslider/labels/main.js         |     4 +
 .../inputs/rangeslider/labels/main.vue        |    21 +
 .../inputs/rangeslider/orientation/main.js    |     4 +
 .../inputs/rangeslider/orientation/main.vue   |    39 +
 .../inputs/rangeslider/overview/main.js       |     4 +
 .../inputs/rangeslider/overview/main.vue      |    21 +
 .../inputs/rating/basic/main.js               |     4 +
 .../inputs/rating/basic/main.vue              |    13 +
 .../inputs/rating/controlled/main.js          |     4 +
 .../inputs/rating/controlled/main.vue         |    23 +
 .../inputs/rating/disabled/main.js            |     4 +
 .../inputs/rating/disabled/main.vue           |    13 +
 .../rating/form-support/FormContent.vue       |   120 +
 .../inputs/rating/form-support/FormInput.vue  |    85 +
 .../inputs/rating/form-support/FormRating.vue |    92 +
 .../inputs/rating/form-support/main.js        |     4 +
 .../inputs/rating/form-support/main.vue       |    24 +
 .../inputs/rating/icon/main.js                |     4 +
 .../inputs/rating/icon/main.vue               |    23 +
 .../rating/item-customization/customItem.vue  |    40 +
 .../inputs/rating/item-customization/main.js  |     4 +
 .../inputs/rating/item-customization/main.vue |    20 +
 .../inputs/rating/items/main.js               |     4 +
 .../inputs/rating/items/main.vue              |    13 +
 .../inputs/rating/label/main.js               |     4 +
 .../inputs/rating/label/main.vue              |    29 +
 .../inputs/rating/navigation/main.js          |     4 +
 .../inputs/rating/navigation/main.vue         |    13 +
 .../rating/precision/first-full/main.js       |     4 +
 .../rating/precision/first-full/main.vue      |    20 +
 .../rating/precision/first-half/main.js       |     4 +
 .../rating/precision/first-half/main.vue      |    20 +
 .../inputs/rating/precision/main.js           |     4 +
 .../inputs/rating/precision/main.vue          |    22 +
 .../inputs/rating/readonly/main.js            |     4 +
 .../inputs/rating/readonly/main.vue           |    16 +
 .../inputs/rating/selection/main.js           |     4 +
 .../inputs/rating/selection/main.vue          |    22 +
 vue-options-api-demos/inputs/rtl/main.js      |     4 +
 vue-options-api-demos/inputs/rtl/main.vue     |   104 +
 .../shared/CheckboxStyleConfigurator.vue      |    80 +
 .../inputs/shared/FormCheckbox.vue            |    84 +
 .../inputs/shared/FormInput.vue               |    94 +
 .../inputs/shared/FormSwitch.vue              |   100 +
 .../inputs/shared/InputStyleConfigurator.vue  |   105 +
 .../shared/MaskedTextBoxStyleConfigurator.vue |   105 +
 .../NumericTextBoxStyleConfigurator.vue       |   105 +
 .../shared/RadioButtonStyleConfigurator.vue   |    61 +
 .../shared/SignatureStyleConfigurator.vue     |   158 +
 .../inputs/shared/SwitchStyleConfigurator.vue |   101 +
 .../shared/TextAreaStyleConfigurator.vue      |   105 +
 .../inputs/shared/sample-signature.js         |     2 +
 .../SignatureStyleConfigurator.vue            |   158 +
 .../signature/appearance/all-options/main.js  |     4 +
 .../signature/appearance/all-options/main.vue |    70 +
 .../all-options/sample-signature.js           |     2 +
 .../inputs/signature/appearance/color/main.js |     4 +
 .../signature/appearance/color/main.vue       |    83 +
 .../signature/appearance/fill-mode/main.js    |     4 +
 .../signature/appearance/fill-mode/main.vue   |    55 +
 .../signature/appearance/roundness/main.js    |     4 +
 .../signature/appearance/roundness/main.vue   |    79 +
 .../inputs/signature/appearance/size/main.js  |     4 +
 .../inputs/signature/appearance/size/main.vue |    64 +
 .../signature/appearance/stroke-width/main.js |     4 +
 .../appearance/stroke-width/main.vue          |    52 +
 .../signature/controlled/export-scale/main.js |     4 +
 .../controlled/export-scale/main.vue          |    58 +
 .../export-scale/sample-signature.js          |     2 +
 .../inputs/signature/controlled/popup/main.js |     4 +
 .../signature/controlled/popup/main.vue       |    40 +
 .../inputs/signature/controlled/value/main.js |     4 +
 .../signature/controlled/value/main.vue       |    23 +
 .../controlled/value/sample-signature.js      |     2 +
 .../inputs/signature/disabled/main.js         |     4 +
 .../inputs/signature/disabled/main.vue        |    18 +
 .../signature/disabled/sample-signature.js    |     2 +
 .../inputs/signature/events/main.js           |     4 +
 .../inputs/signature/events/main.vue          |    11 +
 .../signature/forms/kendo/FormContent.vue     |    98 +
 .../signature/forms/kendo/FormInput.vue       |    89 +
 .../signature/forms/kendo/FormSignature.vue   |    79 +
 .../inputs/signature/forms/kendo/main.js      |     4 +
 .../inputs/signature/forms/kendo/main.vue     |    24 +
 .../inputs/signature/overview/main.js         |     4 +
 .../inputs/signature/overview/main.vue        |   227 +
 .../signature/overview/sample-signature.js    |     2 +
 .../inputs/signature/overview/styles.css      |    59 +
 .../inputs/signature/popup/disabled/main.js   |     4 +
 .../inputs/signature/popup/disabled/main.vue  |    23 +
 .../popup/disabled/sample-signature.js        |     2 +
 .../inputs/signature/popup/scale/main.js      |     4 +
 .../inputs/signature/popup/scale/main.vue     |    23 +
 .../signature/popup/scale/sample-signature.js |     2 +
 .../inputs/signature/readonly/main.js         |     4 +
 .../inputs/signature/readonly/main.vue        |    18 +
 .../signature/readonly/sample-signature.js    |     2 +
 .../inputs/signature/smooth/main.js           |     4 +
 .../inputs/signature/smooth/main.vue          |    12 +
 .../inputs/slider/buttons/main.js             |     4 +
 .../inputs/slider/buttons/main.vue            |    28 +
 .../inputs/slider/controlled/main.js          |     4 +
 .../inputs/slider/controlled/main.vue         |    43 +
 .../inputs/slider/labels/main.js              |     4 +
 .../inputs/slider/labels/main.vue             |    28 +
 .../inputs/slider/orientation/main.js         |     4 +
 .../inputs/slider/orientation/main.vue        |    29 +
 .../inputs/slider/overview/main.js            |     4 +
 .../inputs/slider/overview/main.vue           |    28 +
 .../configurator/SwitchStyleConfigurator.vue  |   101 +
 .../switch/appearance/configurator/main.js    |     4 +
 .../switch/appearance/configurator/main.vue   |    47 +
 .../inputs/switch/appearance/size/main.js     |     4 +
 .../inputs/switch/appearance/size/main.vue    |    44 +
 .../switch/appearance/thumb-rounded/main.js   |     4 +
 .../switch/appearance/thumb-rounded/main.vue  |    43 +
 .../switch/appearance/track-rounded/main.js   |     4 +
 .../switch/appearance/track-rounded/main.vue  |    43 +
 .../inputs/switch/controlled/manual/main.js   |     4 +
 .../inputs/switch/controlled/manual/main.vue  |    35 +
 .../inputs/switch/controlled/overview/main.js |     4 +
 .../switch/controlled/overview/main.vue       |    25 +
 .../inputs/switch/controlled/readonly/main.js |     4 +
 .../switch/controlled/readonly/main.vue       |    15 +
 .../inputs/switch/default/main.js             |     4 +
 .../inputs/switch/default/main.vue            |    15 +
 .../inputs/switch/disabled/main.js            |     4 +
 .../inputs/switch/disabled/main.vue           |    25 +
 .../inputs/switch/events/Logger.vue           |    43 +
 .../inputs/switch/events/main.js              |     5 +
 .../inputs/switch/events/main.vue             |    38 +
 .../custom-message/FormContent.vue            |   176 +
 .../custom-message/FormInput.vue              |    98 +
 .../custom-message/FormSwitch.vue             |   102 +
 .../forms-support/custom-message/main.js      |     4 +
 .../forms-support/custom-message/main.vue     |    22 +
 .../form-required/FormContent.vue             |    96 +
 .../forms-support/form-required/FormInput.vue |    85 +
 .../form-required/FormSwitch.vue              |   100 +
 .../forms-support/form-required/main.js       |     4 +
 .../forms-support/form-required/main.vue      |    23 +
 .../forms-support/overview/FormContent.vue    |   110 +
 .../forms-support/overview/FormInput.vue      |    85 +
 .../forms-support/overview/FormSwitch.vue     |   100 +
 .../switch/forms-support/overview/main.js     |     4 +
 .../switch/forms-support/overview/main.vue    |    22 +
 .../inputs/switch/keyboard/main.js            |     4 +
 .../inputs/switch/keyboard/main.vue           |    18 +
 .../inputs/switch/labels/main.js              |     4 +
 .../inputs/switch/labels/main.vue             |    15 +
 .../inputs/switch/overview/main.js            |     4 +
 .../inputs/switch/overview/main.vue           |    15 +
 .../textarea/adornments/clear-button/main.js  |     4 +
 .../textarea/adornments/clear-button/main.vue |    24 +
 .../adornments/disabled/InputIcons.vue        |    21 +
 .../textarea/adornments/disabled/main.js      |     4 +
 .../textarea/adornments/disabled/main.vue     |    40 +
 .../textarea/adornments/icon-name/main.js     |     4 +
 .../textarea/adornments/icon-name/main.vue    |    31 +
 .../textarea/adornments/loading-icon/main.js  |     4 +
 .../textarea/adornments/loading-icon/main.vue |    15 +
 .../textarea/adornments/prefix/InputIcons.vue |    23 +
 .../inputs/textarea/adornments/prefix/main.js |     4 +
 .../textarea/adornments/prefix/main.vue       |    45 +
 .../textarea/adornments/separator/main.js     |     4 +
 .../textarea/adornments/separator/main.vue    |    22 +
 .../textarea/adornments/suffix/InputIcons.vue |    23 +
 .../inputs/textarea/adornments/suffix/main.js |     4 +
 .../textarea/adornments/suffix/main.vue       |    46 +
 .../adornments/validation-icon/main.js        |     4 +
 .../adornments/validation-icon/main.vue       |    22 +
 .../TextAreaStyleConfigurator.vue             |   105 +
 .../textarea/appearance/configurator/main.js  |     4 +
 .../textarea/appearance/configurator/main.vue |    47 +
 .../textarea/appearance/fill-mode/main.js     |     4 +
 .../textarea/appearance/fill-mode/main.vue    |    54 +
 .../textarea/appearance/rounded/main.js       |     4 +
 .../textarea/appearance/rounded/main.vue      |    58 +
 .../inputs/textarea/appearance/size/main.js   |     4 +
 .../inputs/textarea/appearance/size/main.vue  |    53 +
 .../inputs/textarea/controlled/main.js        |     4 +
 .../inputs/textarea/controlled/main.vue       |    25 +
 .../inputs/textarea/counter/main.js           |     4 +
 .../inputs/textarea/counter/main.vue          |    39 +
 .../inputs/textarea/default/main.js           |     4 +
 .../inputs/textarea/default/main.vue          |    15 +
 .../inputs/textarea/disabled/main.js          |     4 +
 .../inputs/textarea/disabled/main.vue         |    15 +
 .../inputs/textarea/events/Logger.vue         |    43 +
 .../inputs/textarea/events/main.js            |     5 +
 .../inputs/textarea/events/main.vue           |    61 +
 .../inputs/textarea/forms/FormContent.vue     |   117 +
 .../inputs/textarea/forms/FormInput.vue       |    88 +
 .../inputs/textarea/forms/FormTextArea.vue    |    84 +
 .../inputs/textarea/forms/main.js             |     4 +
 .../inputs/textarea/forms/main.vue            |    24 +
 .../inputs/textarea/input-mode/main.js        |     4 +
 .../inputs/textarea/input-mode/main.vue       |    77 +
 .../inputs/textarea/overview/FormContent.vue  |    84 +
 .../inputs/textarea/overview/FormTextArea.vue |    94 +
 .../inputs/textarea/overview/main.js          |     4 +
 .../inputs/textarea/overview/main.vue         |    24 +
 .../textarea/sizing/auto-sizing/main.js       |     4 +
 .../textarea/sizing/auto-sizing/main.vue      |    15 +
 .../inputs/textarea/sizing/initial/main.js    |     4 +
 .../inputs/textarea/sizing/initial/main.vue   |    15 +
 .../inputs/textbox/adornments/main.js         |     4 +
 .../inputs/textbox/adornments/main.vue        |    56 +
 .../configurator/InputStyleConfigurator.vue   |   105 +
 .../textbox/appearance/configurator/main.js   |     4 +
 .../textbox/appearance/configurator/main.vue  |    42 +
 .../textbox/appearance/fill-mode/main.js      |     4 +
 .../textbox/appearance/fill-mode/main.vue     |    54 +
 .../inputs/textbox/appearance/rounded/main.js |     4 +
 .../textbox/appearance/rounded/main.vue       |    58 +
 .../inputs/textbox/appearance/size/main.js    |     4 +
 .../inputs/textbox/appearance/size/main.vue   |    53 +
 .../inputs/textbox/character-count/main.js    |     4 +
 .../inputs/textbox/character-count/main.vue   |    64 +
 .../inputs/textbox/clear-button/main.js       |     4 +
 .../inputs/textbox/clear-button/main.vue      |    24 +
 .../inputs/textbox/clear-value/main.js        |     4 +
 .../inputs/textbox/clear-value/main.vue       |    71 +
 .../disabled-adornments/TextBoxIcons.vue      |    27 +
 .../textbox/disabled-adornments/main.js       |     4 +
 .../textbox/disabled-adornments/main.vue      |    39 +
 .../inputs/textbox/disabled/main.js           |     4 +
 .../inputs/textbox/disabled/main.vue          |    55 +
 .../textbox/forms-support/FormContent.vue     |    66 +
 .../textbox/forms-support/FormTextBox.vue     |    90 +
 .../inputs/textbox/forms-support/main.js      |     4 +
 .../inputs/textbox/forms-support/main.vue     |    24 +
 .../textbox/forms-support/validators.js       |    83 +
 .../inputs/textbox/icon-name/main.js          |     4 +
 .../inputs/textbox/icon-name/main.vue         |    18 +
 .../inputs/textbox/input-mode/main.js         |     4 +
 .../inputs/textbox/input-mode/main.vue        |    90 +
 .../inputs/textbox/loading-icon/main.js       |     4 +
 .../inputs/textbox/loading-icon/main.vue      |    18 +
 .../inputs/textbox/overview/main.js           |     4 +
 .../inputs/textbox/overview/main.vue          |    77 +
 .../textbox/overview/overview-styles.css      |   171 +
 .../inputs/textbox/readonly/main.js           |     4 +
 .../inputs/textbox/readonly/main.vue          |    55 +
 .../inputs/textbox/separator/main.js          |     4 +
 .../inputs/textbox/separator/main.vue         |    61 +
 .../textbox/validation-icon-built-in/main.js  |     4 +
 .../textbox/validation-icon-built-in/main.vue |    22 +
 .../inputs/textbox/validation-icon/main.js    |     4 +
 .../inputs/textbox/validation-icon/main.vue   |    69 +
 .../CustomFormatIntlProvider.js               |    14 +
 .../custom-service/CustomFormatIntlService.js |     9 +
 .../intl/custom-service/DateFormatter.vue     |    30 +
 .../intl/custom-service/main.js               |     4 +
 .../intl/custom-service/main.vue              |    24 +
 .../intl/date-formatting/main.js              |     4 +
 .../intl/date-formatting/main.vue             |    82 +
 .../intl/date-parsing/main.js                 |     4 +
 .../intl/date-parsing/main.vue                |    42 +
 .../intl/general-formatting/FormattedDate.vue |    30 +
 .../general-formatting/FormattedNumber.vue    |    30 +
 .../intl/general-formatting/FormattedText.vue |    30 +
 .../intl/general-formatting/main.js           |     4 +
 .../intl/general-formatting/main.vue          |    89 +
 .../getting-started/main.js                   |     4 +
 .../getting-started/main.vue                  |    27 +
 .../internationalization/overview/Chooser.vue |    33 +
 .../overview/CurrencyFormatter.vue            |    23 +
 .../overview/DateFormatter.vue                |    22 +
 .../internationalization/overview/main.js     |     4 +
 .../internationalization/overview/main.vue    |    80 +
 .../intl/load-prebuild-data/DateFormatter.vue |    30 +
 .../intl/load-prebuild-data/main.js           |     4 +
 .../intl/load-prebuild-data/main.vue          |    70 +
 .../intl/localization-overview/main.js        |     4 +
 .../intl/localization-overview/main.vue       |   125 +
 .../localization-overview/messages-es.json    |     5 +
 .../localization-overview/messages-he.json    |     5 +
 .../intl/localization/Chooser.vue             |    33 +
 .../intl/localization/MessageComponent.vue    |    25 +
 .../intl/localization/main.js                 |     4 +
 .../intl/localization/main.vue                |    67 +
 .../intl/localization/messages.js             |    16 +
 .../number-formatting/FormattedNumber.vue     |    37 +
 .../intl/number-formatting/main.js            |     4 +
 .../intl/number-formatting/main.vue           |   115 +
 .../intl/number-parsing/main.js               |     4 +
 .../intl/number-parsing/main.vue              |    75 +
 .../intl/reacting/Chooser.vue                 |    33 +
 .../intl/reacting/CurrencyFormatter.vue       |    23 +
 .../intl/reacting/DateFormatter.vue           |    22 +
 vue-options-api-demos/intl/reacting/main.js   |     4 +
 vue-options-api-demos/intl/reacting/main.vue  |    80 +
 .../intl/rtl-support/main.js                  |     4 +
 .../intl/rtl-support/main.vue                 |    47 +
 vue-options-api-demos/intl/shared/Chooser.vue |    33 +
 .../intl/use-in-component/DateFormatter.vue   |    30 +
 .../intl/use-in-component/main.js             |     4 +
 .../intl/use-in-component/main.vue            |    70 +
 .../labels/error/basic/main.js                |     4 +
 .../labels/error/basic/main.vue               |    48 +
 .../labels/error/direction/main.js            |     4 +
 .../labels/error/direction/main.vue           |    48 +
 .../labels/floatinglabel/basic/main.js        |     4 +
 .../labels/floatinglabel/basic/main.vue       |   189 +
 .../labels/floatinglabel/custom/main.js       |     4 +
 .../labels/floatinglabel/custom/main.vue      |    39 +
 .../labels/floatinglabel/optional/main.js     |     4 +
 .../labels/floatinglabel/optional/main.vue    |    36 +
 .../labels/floatinglabel/placeholder/main.js  |     4 +
 .../labels/floatinglabel/placeholder/main.vue |    36 +
 .../labels/floatinglabel/validation/main.js   |     4 +
 .../labels/floatinglabel/validation/main.vue  |    57 +
 .../labels/hint/basic/main.js                 |     4 +
 .../labels/hint/basic/main.vue                |    35 +
 .../labels/hint/direction/main.js             |     4 +
 .../labels/hint/direction/main.vue            |    35 +
 .../labels/label/basic/main.js                |     4 +
 .../labels/label/basic/main.vue               |    27 +
 .../labels/label/custom/main.js               |     4 +
 .../labels/label/custom/main.vue              |    39 +
 .../labels/label/optional/main.js             |     4 +
 .../labels/label/optional/main.vue            |    26 +
 .../labels/label/validation/main.js           |     4 +
 .../labels/label/validation/main.vue          |    54 +
 .../layout/actionsheet/accessibility/main.js  |     4 +
 .../layout/actionsheet/accessibility/main.vue |    11 +
 .../layout/actionsheet/animation/main.js      |     4 +
 .../layout/actionsheet/animation/main.vue     |    61 +
 .../custom-rendering/content/main.js          |     4 +
 .../custom-rendering/content/main.vue         |    71 +
 .../custom-rendering/footer/main.js           |     4 +
 .../custom-rendering/footer/main.vue          |    85 +
 .../custom-rendering/header/main.js           |     4 +
 .../custom-rendering/header/main.vue          |    82 +
 .../layout/actionsheet/events/Logger.vue      |    43 +
 .../layout/actionsheet/events/main.js         |     5 +
 .../layout/actionsheet/events/main.vue        |    70 +
 .../actionsheet/items/disabling/main.js       |     4 +
 .../actionsheet/items/disabling/main.vue      |    59 +
 .../layout/actionsheet/items/groups/main.js   |     4 +
 .../layout/actionsheet/items/groups/main.vue  |    65 +
 .../layout/actionsheet/items/icons/main.js    |     4 +
 .../layout/actionsheet/items/icons/main.vue   |    62 +
 .../layout/actionsheet/items/overview/main.js |     4 +
 .../actionsheet/items/overview/main.vue       |    60 +
 .../layout/actionsheet/items/styling/main.js  |     4 +
 .../layout/actionsheet/items/styling/main.vue |    69 +
 .../layout/actionsheet/items/title/main.js    |     4 +
 .../layout/actionsheet/items/title/main.vue   |    60 +
 .../actionsheet/keyboard-navigation/main.js   |     4 +
 .../actionsheet/keyboard-navigation/main.vue  |    56 +
 .../layout/actionsheet/overview/main.js       |     4 +
 .../layout/actionsheet/overview/main.vue      |   199 +
 .../layout/appbar/overview/main.js            |     4 +
 .../layout/appbar/overview/main.vue           |   118 +
 .../layout/appbar/position-mode/main.js       |     4 +
 .../layout/appbar/position-mode/main.vue      |   155 +
 .../layout/appbar/position/main.js            |     4 +
 .../layout/appbar/position/main.vue           |   151 +
 .../layout/appbar/responsive-design/main.js   |     4 +
 .../layout/appbar/responsive-design/main.vue  |   199 +
 .../layout/appbar/sections/main.js            |     4 +
 .../layout/appbar/sections/main.vue           |    58 +
 .../layout/appbar/separators/main.js          |     4 +
 .../layout/appbar/separators/main.vue         |    74 +
 .../layout/appbar/spacings/main.js            |     4 +
 .../layout/appbar/spacings/main.vue           |    83 +
 .../layout/appbar/theme-color/main.js         |     4 +
 .../layout/appbar/theme-color/main.vue        |   105 +
 .../layout/avatar/appearance/border/main.js   |     4 +
 .../layout/avatar/appearance/border/main.vue  |    56 +
 .../avatar/appearance/fill-mode/main.js       |     4 +
 .../avatar/appearance/fill-mode/main.vue      |    76 +
 .../layout/avatar/appearance/rounded/main.js  |     4 +
 .../layout/avatar/appearance/rounded/main.vue |    77 +
 .../layout/avatar/appearance/shapes/main.js   |     4 +
 .../layout/avatar/appearance/shapes/main.vue  |    36 +
 .../layout/avatar/appearance/size/main.js     |     4 +
 .../layout/avatar/appearance/size/main.vue    |    62 +
 .../avatar/appearance/theme-color/main.js     |     4 +
 .../avatar/appearance/theme-color/main.vue    |    40 +
 .../layout/avatar/overview/main.js            |     4 +
 .../layout/avatar/overview/main.vue           |   145 +
 .../BottomNavigationStyleConfigurator.vue     |    93 +
 .../bottomnavigation/appearance/main.js       |     4 +
 .../bottomnavigation/appearance/main.vue      |   132 +
 .../bottomnavigation/basic-usage/Calendar.vue |    25 +
 .../bottomnavigation/basic-usage/Inbox.vue    |    64 +
 .../bottomnavigation/basic-usage/Profile.vue  |    68 +
 .../bottomnavigation/basic-usage/index.js     |    29 +
 .../bottomnavigation/basic-usage/main.js      |     5 +
 .../bottomnavigation/basic-usage/main.vue     |   155 +
 .../bottomnavigation/custom-rendering/main.js |     4 +
 .../custom-rendering/main.vue                 |   107 +
 .../BottomNavigationStyleConfigurator.vue     |    62 +
 .../layout/bottomnavigation/fill/main.js      |     4 +
 .../layout/bottomnavigation/fill/main.vue     |   124 +
 .../bottomnavigation/item-content/main.js     |     4 +
 .../bottomnavigation/item-content/main.vue    |   102 +
 .../layout/bottomnavigation/item-flow/main.js |     4 +
 .../bottomnavigation/item-flow/main.vue       |    89 +
 .../bottomnavigation/item-render/main.js      |     4 +
 .../bottomnavigation/item-render/main.vue     |    56 +
 .../bottomnavigation/position-mode/main.js    |     4 +
 .../bottomnavigation/position-mode/main.vue   |   124 +
 .../layout/bottomnavigation/routing/Bills.vue |    25 +
 .../layout/bottomnavigation/routing/Home.vue  |    25 +
 .../layout/bottomnavigation/routing/More.vue  |    25 +
 .../bottomnavigation/routing/Payments.vue     |    25 +
 .../bottomnavigation/routing/Services.vue     |    26 +
 .../layout/bottomnavigation/routing/index.js  |    41 +
 .../layout/bottomnavigation/routing/main.js   |     5 +
 .../layout/bottomnavigation/routing/main.vue  |   115 +
 .../BottomNavigationStyleConfigurator.vue     |    73 +
 .../bottomnavigation/theme-color/main.js      |     4 +
 .../bottomnavigation/theme-color/main.vue     |   126 +
 .../layout/card/actions/main.js               |     4 +
 .../layout/card/actions/main.vue              |   109 +
 .../layout/card/layouts/main.js               |     4 +
 .../layout/card/layouts/main.vue              |    79 +
 .../layout/card/orientation/main.js           |     4 +
 .../layout/card/orientation/main.vue          |   108 +
 .../layout/card/overview/main.js              |     4 +
 .../layout/card/overview/main.vue             |   236 +
 .../layout/card/types/main.js                 |     4 +
 .../layout/card/types/main.vue                |   119 +
 .../context-menu/data-binding/local/main.js   |     4 +
 .../context-menu/data-binding/local/main.vue  |    83 +
 .../context-menu/data-binding/remote/main.js  |     4 +
 .../context-menu/data-binding/remote/main.vue |    95 +
 .../layout/context-menu/events/Logger.vue     |    43 +
 .../layout/context-menu/events/main.js        |     5 +
 .../layout/context-menu/events/main.vue       |    97 +
 .../items/properties/disabled/main.js         |     4 +
 .../items/properties/disabled/main.vue        |    85 +
 .../items/properties/icon/main.js             |     4 +
 .../items/properties/icon/main.vue            |   142 +
 .../items/properties/styles/main.js           |     4 +
 .../items/properties/styles/main.vue          |    87 +
 .../items/properties/text/main.js             |     4 +
 .../items/properties/text/main.vue            |    79 +
 .../context-menu/items/properties/url/main.js |     4 +
 .../items/properties/url/main.vue             |    81 +
 .../items/rendering/content-render/main.js    |     4 +
 .../items/rendering/content-render/main.vue   |    88 +
 .../items/rendering/item-render/main.js       |     4 +
 .../items/rendering/item-render/main.vue      |    88 +
 .../items/rendering/link-render/main.js       |     4 +
 .../items/rendering/link-render/main.vue      |   100 +
 .../items/rendering/menu-item-render/main.js  |     4 +
 .../items/rendering/menu-item-render/main.vue |   101 +
 .../items/rendering/menu-link-render/main.js  |     4 +
 .../items/rendering/menu-link-render/main.vue |    99 +
 .../layout/context-menu/open-close/main.js    |     4 +
 .../layout/context-menu/open-close/main.vue   |    98 +
 .../layout/context-menu/overview/main.js      |     4 +
 .../layout/context-menu/overview/main.vue     |    93 +
 .../layout/context-menu/vertical/main.js      |     4 +
 .../layout/context-menu/vertical/main.vue     |   110 +
 .../layout/drawer/custom-render/Berlin.vue    |    30 +
 .../layout/drawer/custom-render/Madrid.vue    |    31 +
 .../layout/drawer/custom-render/Paris.vue     |    29 +
 .../layout/drawer/custom-render/Rome.vue      |    29 +
 .../layout/drawer/custom-render/index.js      |    35 +
 .../layout/drawer/custom-render/main.js       |     6 +
 .../layout/drawer/custom-render/main.vue      |   125 +
 .../layout/drawer/custom-render/styles.css    |    50 +
 .../layout/drawer/display-modes/main.js       |     4 +
 .../layout/drawer/display-modes/main.vue      |   134 +
 .../layout/drawer/events/Logger.vue           |    43 +
 .../layout/drawer/events/main.js              |     5 +
 .../layout/drawer/events/main.vue             |    96 +
 .../layout/drawer/events/styles.css           |    47 +
 .../layout/drawer/expanded/main.js            |     4 +
 .../layout/drawer/expanded/main.vue           |    74 +
 .../layout/drawer/expanded/styles.css         |    13 +
 .../drawer/getting-started/Attachments.vue    |    14 +
 .../drawer/getting-started/Calendar.vue       |    17 +
 .../drawer/getting-started/Favourites.vue     |    12 +
 .../layout/drawer/getting-started/Inbox.vue   |    23 +
 .../drawer/getting-started/Notifications.vue  |    14 +
 .../layout/drawer/getting-started/index.js    |    41 +
 .../layout/drawer/getting-started/main.js     |     5 +
 .../layout/drawer/getting-started/main.vue    |   114 +
 .../layout/drawer/getting-started/styles.css  |    47 +
 .../layout/drawer/hierarchical/Education.vue  |   177 +
 .../layout/drawer/hierarchical/Europe.vue     |   162 +
 .../layout/drawer/hierarchical/Food.vue       |    16 +
 .../drawer/hierarchical/ItalianFood.vue       |   157 +
 .../drawer/hierarchical/JapaneseFood.vue      |   169 +
 .../drawer/hierarchical/NorthAmerica.vue      |   162 +
 .../layout/drawer/hierarchical/Travel.vue     |    16 +
 .../layout/drawer/hierarchical/index.js       |    73 +
 .../layout/drawer/hierarchical/main.js        |     6 +
 .../layout/drawer/hierarchical/main.vue       |   197 +
 .../layout/drawer/hierarchical/styles.css     |    52 +
 .../layout/drawer/mini-mode/main.js           |     4 +
 .../layout/drawer/mini-mode/main.vue          |   104 +
 .../layout/drawer/positioning/main.js         |     4 +
 .../layout/drawer/positioning/main.vue        |   129 +
 .../layout/drawer/routing/About.vue           |    49 +
 .../layout/drawer/routing/Home.vue            |    45 +
 .../layout/drawer/routing/Products.vue        |    29 +
 .../layout/drawer/routing/index.js            |    29 +
 .../layout/drawer/routing/main.js             |     6 +
 .../layout/drawer/routing/main.vue            |    78 +
 .../layout/drawer/routing/styles.css          |    35 +
 .../layout/drawer/templates/content/index.js  |     0
 .../layout/drawer/templates/content/main.js   |     4 +
 .../layout/drawer/templates/content/main.vue  |    85 +
 .../templates/header-footer/Attachments.vue   |    14 +
 .../templates/header-footer/Calendar.vue      |    17 +
 .../templates/header-footer/Favourites.vue    |    12 +
 .../drawer/templates/header-footer/Inbox.vue  |    23 +
 .../templates/header-footer/Notifications.vue |    14 +
 .../drawer/templates/header-footer/index.js   |    41 +
 .../drawer/templates/header-footer/main.js    |     5 +
 .../drawer/templates/header-footer/main.vue   |   110 +
 .../drawer/templates/header-footer/styles.css |    53 +
 .../layout/expansionpanel/animations/data.js  |    38 +
 .../layout/expansionpanel/animations/main.js  |     4 +
 .../layout/expansionpanel/animations/main.vue |    59 +
 .../expansionpanel/animations/styles.css      |    27 +
 .../layout/expansionpanel/disabled/main.js    |     4 +
 .../layout/expansionpanel/disabled/main.vue   |    51 +
 .../layout/expansionpanel/events/Logger.vue   |    43 +
 .../layout/expansionpanel/events/data.js      |    28 +
 .../layout/expansionpanel/events/main.js      |     4 +
 .../layout/expansionpanel/events/main.vue     |    76 +
 .../layout/expansionpanel/events/styles.css   |    28 +
 .../layout/expansionpanel/icons/main.js       |     4 +
 .../layout/expansionpanel/icons/main.vue      |    96 +
 .../layout/expansionpanel/overview/data.js    |    38 +
 .../layout/expansionpanel/overview/main.js    |     4 +
 .../layout/expansionpanel/overview/main.vue   |    58 +
 .../layout/expansionpanel/overview/styles.css |    27 +
 .../layout/get-started/main.js                |     4 +
 .../layout/get-started/main.vue               |    44 +
 .../layout/globalization/AccountDetails.vue   |    90 +
 .../layout/globalization/AvatarComponent.vue  |   131 +
 .../layout/globalization/CardComponent.vue    |    60 +
 .../layout/globalization/FormInput.vue        |    90 +
 .../layout/globalization/MenuComponent.vue    |    45 +
 .../globalization/PanelBarComponent.vue       |    50 +
 .../layout/globalization/PersonalDetails.vue  |    64 +
 .../globalization/RegisterComponent.vue       |    14 +
 .../globalization/SplitterComponent.vue       |    76 +
 .../layout/globalization/StepperComponent.vue |    38 +
 .../globalization/TabStripComponent.vue       |   150 +
 .../globalization/TileLayoutComponent.vue     |    54 +
 .../layout/globalization/WizardComponent.vue  |   123 +
 .../layout/globalization/content-overview.js  |     3 +
 .../layout/globalization/index.js             |    53 +
 .../layout/globalization/main.js              |     5 +
 .../layout/globalization/main.vue             |   159 +
 .../layout/globalization/panelbar-styles.css  |    35 +
 .../layout/globalization/splitter-styles.css  |    14 +
 .../layout/globalization/styles.css           |    59 +
 .../layout/globalization/validators.js        |    83 +
 .../layout/gridlayout/items/main.js           |     4 +
 .../layout/gridlayout/items/main.vue          |    80 +
 .../layout/gridlayout/items/styles.css        |    26 +
 .../layout/gridlayout/layout/gaps/main.js     |     4 +
 .../layout/gridlayout/layout/gaps/main.vue    |   114 +
 .../layout/gridlayout/layout/gaps/styles.css  |    44 +
 .../gridlayout/layout/horizontalalign/main.js |     4 +
 .../layout/horizontalalign/main.vue           |    91 +
 .../layout/horizontalalign/styles.css         |    44 +
 .../gridlayout/layout/rows-cols/main.js       |     4 +
 .../gridlayout/layout/rows-cols/main.vue      |   122 +
 .../gridlayout/layout/rows-cols/styles.css    |    44 +
 .../gridlayout/layout/verticalalign/main.js   |     4 +
 .../gridlayout/layout/verticalalign/main.vue  |    91 +
 .../layout/verticalalign/styles.css           |    44 +
 .../overview/RecommendedArticle.vue           |    51 +
 .../gridlayout/overview/TrendingArticle.vue   |    36 +
 .../gridlayout/overview/articles-info.js      |    84 +
 .../layout/gridlayout/overview/main.js        |     4 +
 .../layout/gridlayout/overview/main.vue       |   131 +
 .../layout/gridlayout/overview/styles.css     |    83 +
 .../layout/menu/data-binding/local/main.js    |     4 +
 .../layout/menu/data-binding/local/main.vue   |    34 +
 .../layout/menu/data-binding/remote/main.js   |     4 +
 .../layout/menu/data-binding/remote/main.vue  |    50 +
 .../layout/menu/events/Logger.vue             |    43 +
 .../layout/menu/events/main.js                |     5 +
 .../layout/menu/events/main.vue               |    49 +
 .../menu/items/properties/disabled/main.js    |     4 +
 .../menu/items/properties/disabled/main.vue   |    36 +
 .../layout/menu/items/properties/icon/main.js |     4 +
 .../menu/items/properties/icon/main.vue       |    93 +
 .../menu/items/properties/separator/main.js   |     4 +
 .../menu/items/properties/separator/main.vue  |    34 +
 .../menu/items/properties/styles/main.js      |     4 +
 .../menu/items/properties/styles/main.vue     |    33 +
 .../menu/items/properties/styles/styles.css   |     3 +
 .../layout/menu/items/properties/text/main.js |     4 +
 .../menu/items/properties/text/main.vue       |    30 +
 .../layout/menu/items/properties/url/main.js  |     4 +
 .../layout/menu/items/properties/url/main.vue |    32 +
 .../content-render-with-popup/items.json      |    16 +
 .../content-render-with-popup/main.js         |     4 +
 .../content-render-with-popup/main.vue        |    47 +
 .../items/rendering/content-render/main.js    |     4 +
 .../items/rendering/content-render/main.vue   |    43 +
 .../menu/items/rendering/item-render/main.js  |     4 +
 .../menu/items/rendering/item-render/main.vue |    39 +
 .../menu/items/rendering/link-render/main.js  |     4 +
 .../menu/items/rendering/link-render/main.vue |    53 +
 .../items/rendering/menu-item-render/main.js  |     4 +
 .../items/rendering/menu-item-render/main.vue |    54 +
 .../items/rendering/menu-link-render/main.js  |     4 +
 .../items/rendering/menu-link-render/main.vue |    52 +
 .../layout/menu/localization/Menu.vue         |   107 +
 .../layout/menu/localization/en-US.js         |     9 +
 .../layout/menu/localization/es.js            |     9 +
 .../layout/menu/localization/fr.js            |     9 +
 .../layout/menu/localization/main.js          |     4 +
 .../layout/menu/localization/main.vue         |    60 +
 .../layout/menu/open-close/click/main.js      |     4 +
 .../layout/menu/open-close/click/main.vue     |    52 +
 .../layout/menu/open-close/hover/main.js      |     4 +
 .../layout/menu/open-close/hover/main.vue     |    48 +
 .../layout/menu/overview/main.js              |     4 +
 .../layout/menu/overview/main.vue             |    44 +
 .../layout/menu/routing/About.vue             |    49 +
 .../layout/menu/routing/Home.vue              |    45 +
 .../layout/menu/routing/Products.vue          |    29 +
 .../layout/menu/routing/Team.vue              |    39 +
 .../layout/menu/routing/index.js              |    35 +
 .../layout/menu/routing/main.js               |     5 +
 .../layout/menu/routing/main.vue              |    56 +
 .../layout/menu/vertical/main.js              |     4 +
 .../layout/menu/vertical/main.vue             |    50 +
 .../layout/overview/AccountDetails.vue        |    93 +
 .../layout/overview/Avatar.vue                |   129 +
 .../layout/overview/BottomNavigation.vue      |   140 +
 .../layout/overview/Card.vue                  |    58 +
 .../layout/overview/ContextMenu.vue           |    93 +
 .../layout/overview/ExpansionPanel.vue        |    90 +
 .../layout/overview/FormInput.vue             |    90 +
 .../layout/overview/GridLayout.vue            |    78 +
 .../layout/overview/Menu.vue                  |    45 +
 .../layout/overview/PanelBar.vue              |    87 +
 .../layout/overview/PersonalDetails.vue       |    67 +
 .../layout/overview/Register.vue              |    17 +
 .../layout/overview/Splitter.vue              |    76 +
 .../layout/overview/StackLayout.vue           |    36 +
 .../layout/overview/Stepper.vue               |    38 +
 .../layout/overview/TabStrip.vue              |   150 +
 .../layout/overview/TileLayout.vue            |    65 +
 .../layout/overview/Wizard.vue                |   123 +
 .../layout/overview/gridlayout-styles.css     |    22 +
 .../layout/overview/index.js                  |    95 +
 vue-options-api-demos/layout/overview/main.js |     5 +
 .../layout/overview/main.vue                  |   277 +
 .../layout/overview/panelbar-styles.css       |    35 +
 .../layout/overview/splitter-styles.css       |    14 +
 .../layout/overview/stacklayout-styles.css    |    20 +
 .../layout/overview/styles.css                |    49 +
 .../layout/overview/validators.js             |    83 +
 .../layout/panelbar/animation/main.js         |     4 +
 .../layout/panelbar/animation/main.vue        |    43 +
 .../layout/panelbar/animation/styles.css      |    35 +
 .../layout/panelbar/binding/local/main.js     |     4 +
 .../layout/panelbar/binding/local/main.vue    |    31 +
 .../layout/panelbar/binding/local/styles.css  |     3 +
 .../layout/panelbar/binding/remote/main.js    |     4 +
 .../layout/panelbar/binding/remote/main.vue   |    67 +
 .../layout/panelbar/binding/remote/styles.css |     8 +
 .../panelbar/controlled-state/all/main.js     |     4 +
 .../panelbar/controlled-state/all/main.vue    |    12 +
 .../panelbar/controlled-state/basic/main.js   |     4 +
 .../panelbar/controlled-state/basic/main.vue  |   120 +
 .../controlled-state/basic/styles.css         |     5 +
 .../layout/panelbar/controlled/basic/main.js  |     4 +
 .../layout/panelbar/controlled/basic/main.vue |    78 +
 .../panelbar/controlled/basic/styles.css      |     4 +
 .../layout/panelbar/controlled/custom/main.js |     4 +
 .../panelbar/controlled/custom/main.vue       |   102 +
 .../panelbar/controlled/custom/styles.css     |     4 +
 .../panelbar/custom/collections/main.js       |     4 +
 .../panelbar/custom/collections/main.vue      |    38 +
 .../panelbar/custom/collections/styles.css    |     4 +
 .../layout/panelbar/custom/custom/main.js     |     4 +
 .../layout/panelbar/custom/custom/main.vue    |    50 +
 .../layout/panelbar/custom/custom/styles.css  |     4 +
 .../layout/panelbar/expand/main.js            |     4 +
 .../layout/panelbar/expand/main.vue           |    90 +
 .../layout/panelbar/expand/styles.css         |     4 +
 .../layout/panelbar/items/custom/main.js      |     4 +
 .../layout/panelbar/items/custom/main.vue     |    50 +
 .../layout/panelbar/items/custom/styles.css   |     4 +
 .../panelbar/items/state/disabled/main.js     |     4 +
 .../panelbar/items/state/disabled/main.vue    |    26 +
 .../panelbar/items/state/disabled/styles.css  |     4 +
 .../panelbar/items/state/expanded/main.js     |     4 +
 .../panelbar/items/state/expanded/main.vue    |    37 +
 .../panelbar/items/state/expanded/styles.css  |     4 +
 .../panelbar/items/state/selected/main.js     |     4 +
 .../panelbar/items/state/selected/main.vue    |    26 +
 .../panelbar/items/state/selected/styles.css  |     4 +
 .../items/titles/getting-started/main.js      |     4 +
 .../items/titles/getting-started/main.vue     |    28 +
 .../items/titles/getting-started/styles.css   |     4 +
 .../panelbar/items/titles/icons/main.js       |     4 +
 .../panelbar/items/titles/icons/main.vue      |    69 +
 .../panelbar/items/titles/icons/styles.css    |     4 +
 .../panelbar/items/titles/images/main.js      |     4 +
 .../panelbar/items/titles/images/main.vue     |    49 +
 .../panelbar/items/titles/images/styles.css   |     4 +
 .../layout/panelbar/keyboard/main.js          |     4 +
 .../layout/panelbar/keyboard/main.vue         |    50 +
 .../layout/panelbar/keyboard/styles.css       |    35 +
 .../layout/panelbar/mounted/main.js           |     4 +
 .../layout/panelbar/mounted/main.vue          |    12 +
 .../layout/panelbar/overview/basic/main.js    |     4 +
 .../layout/panelbar/overview/basic/main.vue   |    87 +
 .../layout/panelbar/overview/basic/styles.css |    35 +
 .../panelbar/overview/events/Logger.vue       |    43 +
 .../layout/panelbar/overview/events/main.js   |     4 +
 .../layout/panelbar/overview/events/main.vue  |    60 +
 .../panelbar/overview/events/styles.css       |    20 +
 .../layout/panelbar/routing/About.vue         |    49 +
 .../layout/panelbar/routing/Home.vue          |    45 +
 .../layout/panelbar/routing/Products.vue      |    29 +
 .../layout/panelbar/routing/Team.vue          |    39 +
 .../layout/panelbar/routing/index.js          |    35 +
 .../layout/panelbar/routing/main.js           |     5 +
 .../layout/panelbar/routing/main.vue          |    67 +
 .../layout/splitter/events/Logger.vue         |    43 +
 .../layout/splitter/events/main.js            |     4 +
 .../layout/splitter/events/main.vue           |   162 +
 .../layout/splitter/events/styles.css         |    20 +
 .../layout/splitter/keyboard/main.js          |     4 +
 .../layout/splitter/keyboard/main.vue         |    12 +
 .../layout/splitter/keyboard/styles.css       |     2 +
 .../layout/splitter/orientation/main.js       |     4 +
 .../layout/splitter/orientation/main.vue      |    88 +
 .../layout/splitter/orientation/styles.css    |    10 +
 .../layout/splitter/overview/basic/main.js    |     4 +
 .../layout/splitter/overview/basic/main.vue   |    76 +
 .../layout/splitter/overview/basic/styles.css |     3 +
 .../layout/splitter/panes/collapsing/main.js  |     4 +
 .../layout/splitter/panes/collapsing/main.vue |    49 +
 .../splitter/panes/collapsing/styles.css      |     9 +
 .../layout/splitter/panes/dimensions/main.js  |     4 +
 .../layout/splitter/panes/dimensions/main.vue |    52 +
 .../splitter/panes/dimensions/styles.css      |     9 +
 .../layout/splitter/panes/resizing/main.js    |     4 +
 .../layout/splitter/panes/resizing/main.vue   |    52 +
 .../layout/splitter/panes/resizing/styles.css |     9 +
 .../layout/splitter/panes/scrolling/main.js   |     4 +
 .../layout/splitter/panes/scrolling/main.vue  |    91 +
 .../splitter/panes/scrolling/styles.css       |    20 +
 .../layout/stacklayout/gaps/main.js           |     4 +
 .../layout/stacklayout/gaps/main.vue          |    43 +
 .../layout/stacklayout/gaps/styles.css        |    23 +
 .../stacklayout/horizontalalign/main.js       |     4 +
 .../stacklayout/horizontalalign/main.vue      |    61 +
 .../stacklayout/horizontalalign/styles.css    |    18 +
 .../layout/stacklayout/nestedlayouts/main.js  |     4 +
 .../layout/stacklayout/nestedlayouts/main.vue |    35 +
 .../stacklayout/nestedlayouts/styles.css      |    10 +
 .../layout/stacklayout/orientation/main.js    |     4 +
 .../layout/stacklayout/orientation/main.vue   |    46 +
 .../layout/stacklayout/orientation/styles.css |    23 +
 .../layout/stacklayout/overview/main.js       |     4 +
 .../layout/stacklayout/overview/main.vue      |   156 +
 .../layout/stacklayout/overview/styles.css    |    30 +
 .../layout/stacklayout/verticalalign/main.js  |     4 +
 .../layout/stacklayout/verticalalign/main.vue |    64 +
 .../stacklayout/verticalalign/styles.css      |    18 +
 .../layout/stepper/custom-rendering/main.js   |     4 +
 .../layout/stepper/custom-rendering/main.vue  |   148 +
 .../layout/stepper/display-modes/main.js      |     4 +
 .../layout/stepper/display-modes/main.vue     |   116 +
 .../layout/stepper/events/Logger.vue          |    43 +
 .../layout/stepper/events/main.js             |     5 +
 .../layout/stepper/events/main.vue            |    75 +
 .../layout/stepper/getting-started/main.js    |     4 +
 .../layout/stepper/getting-started/main.vue   |    53 +
 .../stepper/keyboard-navigation/main.js       |     4 +
 .../stepper/keyboard-navigation/main.vue      |    53 +
 .../layout/stepper/linear/main.js             |     4 +
 .../layout/stepper/linear/main.vue            |    58 +
 .../layout/stepper/orientation/main.js        |     4 +
 .../layout/stepper/orientation/main.vue       |    67 +
 .../layout/stepper/types/main.js              |     4 +
 .../layout/stepper/types/main.vue             |    42 +
 .../layout/stepper/validation/basic/main.js   |     4 +
 .../layout/stepper/validation/basic/main.vue  |    58 +
 .../layout/stepper/validation/icons/main.js   |     4 +
 .../layout/stepper/validation/icons/main.vue  |    77 +
 .../layout/tabstrip/configuration/main.js     |     4 +
 .../layout/tabstrip/configuration/main.vue    |    47 +
 .../layout/tabstrip/events/Logger.vue         |    43 +
 .../layout/tabstrip/events/main.js            |     4 +
 .../layout/tabstrip/events/main.vue           |   150 +
 .../layout/tabstrip/keyboard/main.js          |     4 +
 .../layout/tabstrip/keyboard/main.vue         |   103 +
 .../layout/tabstrip/overview/main.js          |     4 +
 .../layout/tabstrip/overview/main.vue         |   144 +
 .../layout/tabstrip/size/main.js              |     4 +
 .../layout/tabstrip/size/main.vue             |   103 +
 .../layout/tabstrip/tabs/alignment/main.js    |     4 +
 .../layout/tabstrip/tabs/alignment/main.vue   |   129 +
 .../tabstrip/tabs/closable-tabs/Title.vue     |    32 +
 .../tabstrip/tabs/closable-tabs/main.js       |     4 +
 .../tabstrip/tabs/closable-tabs/main.vue      |    62 +
 .../layout/tabstrip/tabs/disabled/main.js     |     4 +
 .../layout/tabstrip/tabs/disabled/main.vue    |    48 +
 .../layout/tabstrip/tabs/initial/main.js      |     4 +
 .../layout/tabstrip/tabs/initial/main.vue     |    47 +
 .../layout/tabstrip/tabs/position/main.js     |     4 +
 .../layout/tabstrip/tabs/position/main.vue    |   125 +
 .../layout/tabstrip/tabs/titles/main.js       |     4 +
 .../layout/tabstrip/tabs/titles/main.vue      |    47 +
 .../tilelayout/add-remove/PageViews.vue       |    77 +
 .../add-remove/PopularPagesChart.vue          |    60 +
 .../tilelayout/add-remove/VisitorsDonut.vue   |    37 +
 .../tilelayout/add-remove/WindowContent.vue   |   109 +
 .../layout/tilelayout/add-remove/main.js      |     4 +
 .../layout/tilelayout/add-remove/main.vue     |   234 +
 .../tilelayout/add-remove/tilelayout-data.js  |   104 +
 .../layout/tilelayout/auto-flow/main.js       |     4 +
 .../layout/tilelayout/auto-flow/main.vue      |   105 +
 .../tilelayout/configuration-unique/main.js   |     4 +
 .../tilelayout/configuration-unique/main.vue  |    96 +
 .../layout/tilelayout/configuration/main.js   |     4 +
 .../layout/tilelayout/configuration/main.vue  |    89 +
 .../layout/tilelayout/events/Logger.vue       |    45 +
 .../layout/tilelayout/events/main.js          |     4 +
 .../layout/tilelayout/events/main.vue         |   106 +
 .../tilelayout/overview/ConversionRate.vue    |    33 +
 .../tilelayout/overview/ConversionsChart.vue  |    70 +
 .../layout/tilelayout/overview/PageViews.vue  |    76 +
 .../tilelayout/overview/PopularPagesChart.vue |    60 +
 .../layout/tilelayout/overview/UsersGrid.vue  |    32 +
 .../tilelayout/overview/VisitorsDonut.vue     |    37 +
 .../layout/tilelayout/overview/main.js        |     4 +
 .../layout/tilelayout/overview/main.vue       |   183 +
 .../tilelayout/overview/tilelayout-data.js    |    78 +
 .../tilelayout/tiles/controlled-mode/main.js  |     4 +
 .../tilelayout/tiles/controlled-mode/main.vue |    76 +
 .../tiles/custom-header-body/main.js          |     4 +
 .../tiles/custom-header-body/main.vue         |    88 +
 .../tilelayout/tiles/custom-rendering/main.js |     4 +
 .../tiles/custom-rendering/main.vue           |    78 +
 .../layout/tilelayout/tiles/positions/main.js |     4 +
 .../tilelayout/tiles/positions/main.vue       |    78 +
 .../tilelayout/tiles/reordering/main.js       |     4 +
 .../tilelayout/tiles/reordering/main.vue      |    52 +
 .../layout/tilelayout/tiles/resizing/main.js  |     4 +
 .../layout/tilelayout/tiles/resizing/main.vue |    68 +
 .../layout/wizard/basic/AccountDetails.vue    |    93 +
 .../layout/wizard/basic/FormInput.vue         |    90 +
 .../layout/wizard/basic/PersonalDetails.vue   |    67 +
 .../layout/wizard/basic/Register.vue          |    16 +
 .../layout/wizard/basic/main.js               |     4 +
 .../layout/wizard/basic/main.vue              |   123 +
 .../layout/wizard/basic/validators.js         |    83 +
 .../wizard/positioning/AccountDetails.vue     |    93 +
 .../layout/wizard/positioning/FormInput.vue   |    90 +
 .../wizard/positioning/PersonalDetails.vue    |    67 +
 .../layout/wizard/positioning/Register.vue    |    17 +
 .../layout/wizard/positioning/main.js         |     4 +
 .../layout/wizard/positioning/main.vue        |   173 +
 .../layout/wizard/positioning/validators.js   |    83 +
 .../layout/wizard/router/FormContent.vue      |    58 +
 .../layout/wizard/router/FormInput.vue        |    82 +
 .../layout/wizard/router/Overview.vue         |    13 +
 .../layout/wizard/router/Register.vue         |    13 +
 .../layout/wizard/router/UserDetails.vue      |    20 +
 .../layout/wizard/router/index.js             |    29 +
 .../layout/wizard/router/main.js              |     5 +
 .../layout/wizard/router/main.vue             |    94 +
 .../wizard/validation/step/AccountDetails.vue |   124 +
 .../wizard/validation/step/CardSelector.vue   |   201 +
 .../wizard/validation/step/ErrorSummary.vue   |    62 +
 .../validation/step/FormAutoComplete.vue      |    79 +
 .../wizard/validation/step/FormCheckbox.vue   |    89 +
 .../wizard/validation/step/FormDateInput.vue  |    77 +
 .../wizard/validation/step/FormDatePicker.vue |    79 +
 .../wizard/validation/step/FormInput.vue      |    90 +
 .../validation/step/FormMaskedTextBox.vue     |    83 +
 .../validation/step/FormNumericTextBox.vue    |    79 +
 .../wizard/validation/step/FormRadioGroup.vue |   104 +
 .../wizard/validation/step/FormTextArea.vue   |    80 +
 .../wizard/validation/step/FormUpload.vue     |    90 +
 .../wizard/validation/step/PaymentDetails.vue |   152 +
 .../validation/step/PersonalDetails.vue       |   182 +
 .../layout/wizard/validation/step/main.js     |     4 +
 .../layout/wizard/validation/step/main.vue    |   167 +
 .../wizard/validation/step/validators.js      |    83 +
 .../validation/submit/AccountDetails.vue      |   111 +
 .../wizard/validation/submit/CardSelector.vue |   201 +
 .../wizard/validation/submit/ErrorSummary.vue |    62 +
 .../validation/submit/FormAutoComplete.vue    |    79 +
 .../wizard/validation/submit/FormCheckbox.vue |    89 +
 .../validation/submit/FormDateInput.vue       |    77 +
 .../validation/submit/FormDatePicker.vue      |    79 +
 .../wizard/validation/submit/FormInput.vue    |    90 +
 .../validation/submit/FormMaskedTextBox.vue   |    83 +
 .../validation/submit/FormNumericTextBox.vue  |    79 +
 .../validation/submit/FormRadioGroup.vue      |   106 +
 .../wizard/validation/submit/FormTextArea.vue |    80 +
 .../wizard/validation/submit/FormUpload.vue   |    90 +
 .../validation/submit/PaymentDetails.vue      |   136 +
 .../validation/submit/PersonalDetails.vue     |   167 +
 .../layout/wizard/validation/submit/main.js   |     4 +
 .../layout/wizard/validation/submit/main.vue  |   138 +
 .../wizard/validation/submit/validators.js    |    83 +
 .../listbox/customization/main.js             |     4 +
 .../listbox/customization/main.vue            |   130 +
 .../listbox/customization/products.json       |  1233 +
 .../listbox/drag-and-drop/main.js             |     4 +
 .../listbox/drag-and-drop/main.vue            |    94 +
 .../listbox/drag-and-drop/products.json       |  1233 +
 .../listbox/get-started/data.js               |    30 +
 .../listbox/get-started/main.js               |     4 +
 .../listbox/get-started/main.vue              |   101 +
 .../listbox/messages/data.js                  |    30 +
 .../listbox/messages/es.json                  |    11 +
 .../listbox/messages/main.js                  |     4 +
 .../listbox/messages/main.vue                 |   108 +
 .../listbox/multiple-lists/main.js            |     4 +
 .../listbox/multiple-lists/main.vue           |   151 +
 .../listbox/overview/data.js                  |    30 +
 .../listbox/overview/main.js                  |     4 +
 .../listbox/overview/main.vue                 |   101 +
 vue-options-api-demos/listbox/rtl/data.js     |    30 +
 vue-options-api-demos/listbox/rtl/main.js     |     4 +
 vue-options-api-demos/listbox/rtl/main.vue    |   103 +
 .../listbox/selection/data.js                 |    30 +
 .../listbox/selection/main.js                 |     4 +
 .../listbox/selection/main.vue                |   100 +
 vue-options-api-demos/listbox/shared/data.js  |    30 +
 vue-options-api-demos/listbox/shared/es.json  |    11 +
 .../listbox/shared/products.json              |  1233 +
 .../listview/default-scrolling/employees.js   |  1402 +
 .../listview/default-scrolling/images.js      |    55 +
 .../listview/default-scrolling/main.js        |     4 +
 .../listview/default-scrolling/main.vue       |   112 +
 .../listview/editing/ItemRender.vue           |   175 +
 .../listview/editing/main.js                  |     4 +
 .../listview/editing/main.vue                 |    55 +
 .../listview/editing/products.json            |  1234 +
 .../endless-scrolling/destinations.json       |   117 +
 .../listview/endless-scrolling/main.js        |     4 +
 .../listview/endless-scrolling/main.vue       |   102 +
 .../listview/events/Logger.vue                |    45 +
 vue-options-api-demos/listview/events/main.js |     4 +
 .../listview/events/main.vue                  |    49 +
 .../listview/events/products.json             |  1234 +
 .../listview/filtering/main.js                |     4 +
 .../listview/filtering/main.vue               |   138 +
 .../listview/filtering/products.json          |  1234 +
 .../listview/footer-template/main.js          |     4 +
 .../listview/footer-template/main.vue         |    91 +
 .../listview/footer-template/products.json    |  1234 +
 .../listview/get-started/main.js              |     4 +
 .../listview/get-started/main.vue             |    31 +
 .../listview/get-started/products.json        |  1234 +
 .../listview/header-template/main.js          |     4 +
 .../listview/header-template/main.vue         |   121 +
 .../listview/header-template/products.json    |  1234 +
 .../listview/item-template/main.js            |     4 +
 .../listview/item-template/main.vue           |    66 +
 .../listview/item-template/products.json      |  1234 +
 .../listview/overview/contacts.json           |    45 +
 .../listview/overview/main.js                 |     4 +
 .../listview/overview/main.vue                |    96 +
 .../listview/paging/articles.json             |   152 +
 vue-options-api-demos/listview/paging/main.js |     4 +
 .../listview/paging/main.vue                  |   111 +
 .../listview/shared/articles.json             |   152 +
 .../listview/shared/contacts.json             |    45 +
 .../listview/shared/destinations.json         |   117 +
 .../listview/shared/products.json             |  1234 +
 .../notification/animation/main.js            |     4 +
 .../notification/animation/main.vue           |   149 +
 .../notification/animation/styles.css         |     3 +
 .../notification/events/Logger.vue            |    45 +
 .../notification/events/main.js               |     5 +
 .../notification/events/main.vue              |   139 +
 .../notification/get-started/main.js          |     4 +
 .../notification/get-started/main.vue         |    56 +
 .../notification/get-started/styles.css       |     3 +
 .../notification/overview/main.js             |     4 +
 .../notification/overview/main.vue            |   135 +
 .../notification/overview/styles.css          |     3 +
 .../notification/positions/Notifications.vue  |    22 +
 .../notification/positions/main.js            |     4 +
 .../notification/positions/main.vue           |    51 +
 .../notification/types/main.js                |     4 +
 .../notification/types/main.vue               |   124 +
 vue-options-api-demos/pdf/base64/main.js      |     4 +
 vue-options-api-demos/pdf/base64/main.vue     |    66 +
 .../pdf/content-scaling/main.js               |     4 +
 .../pdf/content-scaling/main.vue              |    67 +
 .../pdf/content-styling/class/main.js         |     4 +
 .../pdf/content-styling/class/main.vue        |    44 +
 .../pdf/content-styling/class/styles.css      |     4 +
 .../pdf/content-styling/element/main.js       |     4 +
 .../pdf/content-styling/element/main.vue      |    44 +
 .../pdf/content-styling/element/styles.css    |     3 +
 .../pdf/embedded-image/main.js                |     4 +
 .../pdf/embedded-image/main.vue               |    39 +
 vue-options-api-demos/pdf/get-started/main.js |     4 +
 .../pdf/get-started/main.vue                  |    58 +
 .../pdf/get-started/products.json             |   155 +
 .../pdf/hidden-content/main.js                |     4 +
 .../pdf/hidden-content/main.vue               |    53 +
 vue-options-api-demos/pdf/hyperlinks/main.js  |     4 +
 vue-options-api-demos/pdf/hyperlinks/main.vue |    29 +
 .../automatic-page-breaking/main.js           |     4 +
 .../automatic-page-breaking/main.vue          |    71 +
 .../manual-page-breaking/main.js              |     4 +
 .../manual-page-breaking/main.vue             |    46 +
 .../Content.vue                               |    56 +
 .../multi-page-content-keep-together/main.js  |     4 +
 .../multi-page-content-keep-together/main.vue |    31 +
 .../page-templates/Content.vue                |    56 +
 .../multipage-content/page-templates/main.js  |     4 +
 .../multipage-content/page-templates/main.vue |    47 +
 vue-options-api-demos/pdf/overview/main.js    |     4 +
 vue-options-api-demos/pdf/overview/main.vue   |   136 +
 .../pdf/table-headers/main.js                 |     4 +
 .../pdf/table-headers/main.vue                |    59 +
 .../pdf/table-headers/products.json           |  1021 +
 .../popup/align/absolute/main.js              |     4 +
 .../popup/align/absolute/main.vue             |    25 +
 .../popup/align/absolute/styles.css           |     6 +
 .../popup/align/basic/main.js                 |     4 +
 .../popup/align/basic/main.vue                |    48 +
 .../popup/align/basic/styles.css              |     6 +
 .../popup/align/positioning/main.js           |     4 +
 .../popup/align/positioning/main.vue          |   118 +
 .../popup/align/positioning/styles.css        |    23 +
 .../popup/animations/main.js                  |     4 +
 .../popup/animations/main.vue                 |    78 +
 .../popup/animations/styles.css               |     6 +
 vue-options-api-demos/popup/basic/main.js     |     4 +
 vue-options-api-demos/popup/basic/main.vue    |    48 +
 vue-options-api-demos/popup/basic/styles.css  |     6 +
 vue-options-api-demos/popup/hidden/main.js    |     4 +
 vue-options-api-demos/popup/hidden/main.vue   |    48 +
 vue-options-api-demos/popup/hidden/styles.css |     6 +
 vue-options-api-demos/popup/styling/main.js   |     4 +
 vue-options-api-demos/popup/styling/main.vue  |    49 +
 .../popup/styling/styles.css                  |     9 +
 vue-options-api-demos/popup/viewport/main.js  |     4 +
 vue-options-api-demos/popup/viewport/main.vue |    56 +
 .../popup/viewport/styles.css                 |    19 +
 .../appearance/FormContent.vue                |   141 +
 .../appearance/FormDropDownList.vue           |    82 +
 .../chunkprogressbar/appearance/FormInput.vue |    84 +
 .../chunkprogressbar/appearance/main.js       |     4 +
 .../chunkprogressbar/appearance/main.vue      |    27 +
 .../chunkprogressbar/dimensions/main.js       |     4 +
 .../chunkprogressbar/dimensions/main.vue      |    31 +
 .../chunkprogressbar/direction/main.js        |     4 +
 .../chunkprogressbar/direction/main.vue       |    54 +
 .../chunkprogressbar/disabled/main.js         |     4 +
 .../chunkprogressbar/disabled/main.vue        |    35 +
 .../chunkprogressbar/orientation/main.js      |     4 +
 .../chunkprogressbar/orientation/main.vue     |    41 +
 .../chunkprogressbar/overview/main.js         |     4 +
 .../chunkprogressbar/overview/main.vue        |    33 +
 .../chunkprogressbar/value_ranges/main.js     |     4 +
 .../chunkprogressbar/value_ranges/main.vue    |    71 +
 .../progressbars/get-started/main.js          |     4 +
 .../progressbars/get-started/main.vue         |    18 +
 .../progressbars/globalization/main.js        |     4 +
 .../progressbars/globalization/main.vue       |    43 +
 .../progressbars/overview/main.js             |     4 +
 .../progressbars/overview/main.vue            |    45 +
 .../progressbar/animation-2/main.js           |     4 +
 .../progressbar/animation-2/main.vue          |    53 +
 .../progressbar/animation/main.js             |     4 +
 .../progressbar/animation/main.vue            |    53 +
 .../progressbar/appearance/main.js            |     4 +
 .../progressbar/appearance/main.vue           |   101 +
 .../progressbar/dimensions/main.js            |     4 +
 .../progressbar/dimensions/main.vue           |    22 +
 .../progressbar/direction/main.js             |     4 +
 .../progressbar/direction/main.vue            |    44 +
 .../progressbars/progressbar/disabled/main.js |     4 +
 .../progressbar/disabled/main.vue             |    41 +
 .../progressbar/label/custom/main.js          |     4 +
 .../progressbar/label/custom/main.vue         |    53 +
 .../progressbar/label/getting-started/main.js |     4 +
 .../label/getting-started/main.vue            |    67 +
 .../progressbar/orientation/main.js           |     4 +
 .../progressbar/orientation/main.vue          |    23 +
 .../progressbars/progressbar/overview/main.js |     4 +
 .../progressbar/overview/main.vue             |    49 +
 .../progressbar/value_ranges/main.js          |     4 +
 .../progressbar/value_ranges/main.vue         |    73 +
 .../scheduler/accessibility/summary/main.js   |     4 +
 .../scheduler/accessibility/summary/main.vue  |     9 +
 .../disabled/events-utc.js                    |   847 +
 .../adaptive-slot-height/disabled/main.js     |     4 +
 .../adaptive-slot-height/disabled/main.vue    |    80 +
 .../overview/events-utc.js                    |   847 +
 .../adaptive-slot-height/overview/main.js     |     4 +
 .../adaptive-slot-height/overview/main.vue    |    88 +
 .../auto-item-height/constant/events-utc.js   |   847 +
 .../auto-item-height/constant/main.js         |     4 +
 .../auto-item-height/constant/main.vue        |    82 +
 .../auto-item-height/overview/events-utc.js   |   847 +
 .../auto-item-height/overview/main.js         |     4 +
 .../auto-item-height/overview/main.vue        |    82 +
 .../scheduler/context/main.js                 |     4 +
 .../scheduler/context/main.vue                |     9 +
 .../agenda/task/events-utc.js                 |   847 +
 .../custom-templates/agenda/task/main.js      |     4 +
 .../custom-templates/agenda/task/main.vue     |    62 +
 .../events/color/events-utc.js                |   847 +
 .../custom-templates/events/color/main.js     |     4 +
 .../custom-templates/events/color/main.vue    |    47 +
 .../events/image/events-utc.js                |   900 +
 .../custom-templates/events/image/main.js     |     4 +
 .../custom-templates/events/image/main.vue    |    51 +
 .../events/resources/events-utc.js            |   900 +
 .../custom-templates/events/resources/main.js |     4 +
 .../events/resources/main.vue                 |   107 +
 .../header-footer/events-utc.js               |   847 +
 .../custom-templates/header-footer/main.js    |     4 +
 .../custom-templates/header-footer/main.vue   |   145 +
 .../slots/color/events-utc.js                 |   847 +
 .../custom-templates/slots/color/main.js      |     4 +
 .../custom-templates/slots/color/main.vue     |    55 +
 .../slots/month/events-utc.js                 |   847 +
 .../custom-templates/slots/month/main.js      |     4 +
 .../custom-templates/slots/month/main.vue     |    52 +
 .../custom-templates/slots/time/events-utc.js |   847 +
 .../custom-templates/slots/time/main.js       |     4 +
 .../custom-templates/slots/time/main.vue      |    52 +
 .../scheduler/customization/.DS_Store         |   Bin 0 -> 6148 bytes
 .../editor/custom-editor/main.js              |     4 +
 .../editor/custom-editor/main.vue             |     9 +
 .../default-editor/extending-root/main.js     |     4 +
 .../default-editor/extending-root/main.vue    |     9 +
 .../default-editor/replacing-editors/main.js  |     4 +
 .../default-editor/replacing-editors/main.vue |     9 +
 .../form/custom-components/main.js            |     4 +
 .../form/custom-components/main.vue           |     9 +
 .../form/default-rendering/main.js            |     4 +
 .../form/default-rendering/main.vue           |     9 +
 .../data-binding/data-change/main.js          |     4 +
 .../data-binding/data-change/main.vue         |     9 +
 .../scheduler/data-binding/data/main.js       |     4 +
 .../scheduler/data-binding/data/main.vue      |    40 +
 .../data-binding/model-fields/main.js         |     4 +
 .../data-binding/model-fields/main.vue        |    52 +
 .../editing/basic/events-utc.js               |   847 +
 .../data-operations/editing/basic/main.js     |     4 +
 .../data-operations/editing/basic/main.vue    |    62 +
 .../editing/custom-form/CustomEditForm.vue    |   116 +
 .../custom-form/FormDateTimePicker.vue        |    78 +
 .../editing/custom-form/FormInput.vue         |    89 +
 .../editing/custom-form/FormSwitch.vue        |   102 +
 .../editing/custom-form/FormTextArea.vue      |    84 +
 .../editing/custom-form/events-utc.js         |   847 +
 .../editing/custom-form/main.js               |     4 +
 .../editing/custom-form/main.vue              |    67 +
 .../customize-default/CustomEditForm.vue      |    63 +
 .../editing/customize-default/FormInput.vue   |    89 +
 .../editing/customize-default/FormSwitch.vue  |   102 +
 .../editing/customize-default/events-utc.js   |   847 +
 .../editing/customize-default/main.js         |     4 +
 .../editing/customize-default/main.vue        |    67 +
 .../editing/default-values/events-utc.js      |   847 +
 .../editing/default-values/main.js            |     4 +
 .../editing/default-values/main.vue           |   117 +
 .../using-custom-form/CustomEditForm.vue      |   116 +
 .../using-custom-form/FormDateTimePicker.vue  |    78 +
 .../using-custom-form/FormInput.vue           |    89 +
 .../using-custom-form/FormSwitch.vue          |   102 +
 .../using-custom-form/FormTextArea.vue        |    84 +
 .../using-custom-form/events-utc.js           |   847 +
 .../validation/using-custom-form/main.js      |     4 +
 .../validation/using-custom-form/main.vue     |    76 +
 .../using-default-form/events-utc.js          |   847 +
 .../validation/using-default-form/main.js     |     4 +
 .../validation/using-default-form/main.vue    |   116 +
 .../grouping/configuration/data.js            |    32 +
 .../grouping/configuration/main.js            |     4 +
 .../grouping/configuration/main.vue           |    56 +
 .../data-operations/grouping/multiple/data.js |    18 +
 .../data-operations/grouping/multiple/main.js |     4 +
 .../grouping/multiple/main.vue                |    59 +
 .../resources/multiple/events-utc.js          |   847 +
 .../resources/multiple/main.js                |     4 +
 .../resources/multiple/main.vue               |    58 +
 .../resources/visual/events-utc.js            |   847 +
 .../data-operations/resources/visual/main.js  |     4 +
 .../data-operations/resources/visual/main.vue |    47 +
 .../date-selection/controlled/main.js         |     4 +
 .../date-selection/controlled/main.vue        |     9 +
 .../date-selection/uncontrolled/main.js       |     4 +
 .../date-selection/uncontrolled/main.vue      |     9 +
 .../scheduler/globalization/overview/es.json  |    19 +
 .../globalization/overview/events-utc.js      |   847 +
 .../scheduler/globalization/overview/main.js  |     4 +
 .../scheduler/globalization/overview/main.vue |    92 +
 .../scheduler/globalization/rtl/events-utc.js |   847 +
 .../scheduler/globalization/rtl/main.js       |     4 +
 .../scheduler/globalization/rtl/main.vue      |    32 +
 .../header-footer/customization/main.js       |     4 +
 .../header-footer/customization/main.vue      |     9 +
 .../items/context/action-binding/main.js      |     4 +
 .../items/context/action-binding/main.vue     |     9 +
 .../items/edit-item/controlled-state/main.js  |     4 +
 .../items/edit-item/controlled-state/main.vue |     9 +
 .../items/edit-item/extending/main.js         |     4 +
 .../items/edit-item/extending/main.vue        |     9 +
 .../scheduler/items/item/callbacks/main.js    |     4 +
 .../scheduler/items/item/callbacks/main.vue   |     9 +
 .../scheduler/items/item/children/main.js     |     4 +
 .../scheduler/items/item/children/main.vue    |     9 +
 .../scheduler/items/item/style/main.js        |     4 +
 .../scheduler/items/item/style/main.vue       |     9 +
 .../custom-behavior/main.js                   |     4 +
 .../custom-behavior/main.vue                  |     9 +
 .../multiple-selection/custom-trigger/main.js |     4 +
 .../custom-trigger/main.vue                   |     9 +
 .../default-behavior/main.js                  |     4 +
 .../default-behavior/main.vue                 |     9 +
 .../scheduler/items/overview/events-utc.js    |   847 +
 .../scheduler/items/overview/main.js          |     4 +
 .../scheduler/items/overview/main.vue         |    47 +
 .../items/view-item/extending/main.js         |     4 +
 .../items/view-item/extending/main.vue        |     9 +
 .../keyboard-navigation/basic/events-utc.js   |   847 +
 .../keyboard-navigation/basic/main.js         |     4 +
 .../keyboard-navigation/basic/main.vue        |   107 +
 .../scheduler/overview/basic/events-utc.js    |   847 +
 .../scheduler/overview/basic/main.js          |     4 +
 .../scheduler/overview/basic/main.vue         |    31 +
 .../scheduler/overview/demo/es.json           |    13 +
 .../scheduler/overview/demo/events-utc.js     |   847 +
 .../scheduler/overview/demo/main.js           |     4 +
 .../scheduler/overview/demo/main.vue          |   126 +
 .../scheduler/recurring/overview/id/main.js   |     4 +
 .../scheduler/recurring/overview/id/main.vue  |     9 +
 .../recurring/overview/id/server-data.js      |    51 +
 .../recurring/overview/overview/data.js       |    35 +
 .../recurring/overview/overview/main.js       |     4 +
 .../recurring/overview/overview/main.vue      |     9 +
 .../scheduler/shared/events-utc.js            |   847 +
 .../slots/context/action-binding/main.js      |     4 +
 .../slots/context/action-binding/main.vue     |     9 +
 .../slots/edit-slot/controlled-state/main.js  |     4 +
 .../slots/edit-slot/controlled-state/main.vue |     9 +
 .../scheduler/slots/overview/main.js          |     4 +
 .../scheduler/slots/overview/main.vue         |     9 +
 .../scheduler/slots/slot/style/main.js        |     4 +
 .../scheduler/slots/slot/style/main.vue       |     9 +
 .../slots/view-slot/extending/main.js         |     4 +
 .../slots/view-slot/extending/main.vue        |     9 +
 .../scheduler/tasks/overview/main.js          |     4 +
 .../scheduler/tasks/overview/main.vue         |     9 +
 .../scheduler/timezones/default/main.js       |     4 +
 .../scheduler/timezones/default/main.vue      |    34 +
 .../scheduler/timezones/fixed/main.js         |     4 +
 .../scheduler/timezones/fixed/main.vue        |    34 +
 .../views/agenda/configuration/events-utc.js  |   847 +
 .../views/agenda/configuration/main.js        |     4 +
 .../views/agenda/configuration/main.vue       |    33 +
 .../views/agenda/grouping/events-utc.js       |   847 +
 .../scheduler/views/agenda/grouping/main.js   |     4 +
 .../scheduler/views/agenda/grouping/main.vue  |    64 +
 .../views/controlled-state/events-utc.js      |   847 +
 .../scheduler/views/controlled-state/main.js  |     4 +
 .../scheduler/views/controlled-state/main.vue |    56 +
 .../views/day/configuration/events-utc.js     |   847 +
 .../scheduler/views/day/configuration/main.js |     4 +
 .../views/day/configuration/main.vue          |    41 +
 .../scheduler/views/day/current-time/main.js  |     4 +
 .../scheduler/views/day/current-time/main.vue |    68 +
 .../views/day/grouping-vertical/events-utc.js |   847 +
 .../views/day/grouping-vertical/main.js       |     4 +
 .../views/day/grouping-vertical/main.vue      |    71 +
 .../views/day/grouping/events-utc.js          |   847 +
 .../scheduler/views/day/grouping/main.js      |     4 +
 .../scheduler/views/day/grouping/main.vue     |    71 +
 .../views/default-view/events-utc.js          |   847 +
 .../scheduler/views/default-view/main.js      |     4 +
 .../scheduler/views/default-view/main.vue     |    30 +
 .../views/getting-started/events-utc.js       |   847 +
 .../scheduler/views/getting-started/main.js   |     4 +
 .../scheduler/views/getting-started/main.vue  |    30 +
 .../views/month/configuration/events-utc.js   |   847 +
 .../views/month/configuration/main.js         |     4 +
 .../views/month/configuration/main.vue        |    36 +
 .../month/grouping-vertical/events-utc.js     |   847 +
 .../views/month/grouping-vertical/main.js     |     4 +
 .../views/month/grouping-vertical/main.vue    |    66 +
 .../views/month/grouping/events-utc.js        |   847 +
 .../scheduler/views/month/grouping/main.js    |     4 +
 .../scheduler/views/month/grouping/main.vue   |    66 +
 .../timeline/configuration/events-utc.js      |   847 +
 .../views/timeline/configuration/main.js      |     4 +
 .../views/timeline/configuration/main.vue     |    46 +
 .../views/timeline/current-time/main.js       |     4 +
 .../views/timeline/current-time/main.vue      |     9 +
 .../timeline/grouping-vertical/events-utc.js  |   847 +
 .../views/timeline/grouping-vertical/main.js  |     4 +
 .../views/timeline/grouping-vertical/main.vue |    71 +
 .../views/timeline/grouping/events-utc.js     |   847 +
 .../scheduler/views/timeline/grouping/main.js |     4 +
 .../views/timeline/grouping/main.vue          |    71 +
 .../views/week/configuration/events-utc.js    |   847 +
 .../views/week/configuration/main.js          |     4 +
 .../views/week/configuration/main.vue         |    43 +
 .../week/grouping-vertical/events-utc.js      |   847 +
 .../views/week/grouping-vertical/main.js      |     4 +
 .../views/week/grouping-vertical/main.vue     |    72 +
 .../views/week/grouping/events-utc.js         |   847 +
 .../scheduler/views/week/grouping/main.js     |     4 +
 .../scheduler/views/week/grouping/main.vue    |    72 +
 .../scrollview/active-view/main.js            |     4 +
 .../scrollview/active-view/main.vue           |    76 +
 .../scrollview/active-view/styles.css         |    18 +
 .../scrollview/arrows/main.js                 |     4 +
 .../scrollview/arrows/main.vue                |    90 +
 .../scrollview/arrows/styles.css              |    18 +
 .../scrollview/automatic-interval/main.js     |     4 +
 .../scrollview/automatic-interval/main.vue    |    76 +
 .../scrollview/automatic-interval/styles.css  |    18 +
 .../scrollview/automatic-scrolling/main.js    |     4 +
 .../scrollview/automatic-scrolling/main.vue   |    76 +
 .../scrollview/automatic-scrolling/styles.css |    18 +
 .../scrollview/endless/main.js                |     4 +
 .../scrollview/endless/main.vue               |    76 +
 .../scrollview/endless/styles.css             |    18 +
 .../scrollview/get-started/main.js            |     4 +
 .../scrollview/get-started/main.vue           |    56 +
 .../scrollview/get-started/styles.css         |     5 +
 .../scrollview/keyboard-navigation/main.js    |     4 +
 .../scrollview/keyboard-navigation/main.vue   |    72 +
 .../scrollview/keyboard-navigation/styles.css |    20 +
 .../scrollview/overview/main.js               |     4 +
 .../scrollview/overview/main.vue              |    73 +
 .../scrollview/overview/styles.css            |    20 +
 .../scrollview/pager-overlay/main.js          |     4 +
 .../scrollview/pager-overlay/main.vue         |   105 +
 .../scrollview/pager-overlay/styles.css       |    18 +
 .../scrollview/paging/main.js                 |     4 +
 .../scrollview/paging/main.vue                |    97 +
 .../scrollview/paging/styles.css              |    18 +
 vue-options-api-demos/scrollview/rtl/main.js  |     4 +
 vue-options-api-demos/scrollview/rtl/main.vue |    51 +
 .../scrollview/rtl/styles.css                 |     5 +
 .../tooltip/controlled-mode/main.js           |     4 +
 .../tooltip/controlled-mode/main.vue          |    73 +
 .../tooltip/customization/main.js             |     4 +
 .../tooltip/customization/main.vue            |    62 +
 .../tooltip/events/Logger.vue                 |    43 +
 vue-options-api-demos/tooltip/events/main.js  |     4 +
 vue-options-api-demos/tooltip/events/main.vue |    57 +
 .../tooltip/events/styles.css                 |    72 +
 vue-options-api-demos/tooltip/filters/main.js |     4 +
 .../tooltip/filters/main.vue                  |    47 +
 .../tooltip/grid-integration/main.js          |     4 +
 .../tooltip/grid-integration/main.vue         |    27 +
 .../tooltip/multiple/main.js                  |     4 +
 .../tooltip/multiple/main.vue                 |    37 +
 .../tooltip/overview/main.js                  |     4 +
 .../tooltip/overview/main.vue                 |    30 +
 .../tooltip/overview/styles.css               |    71 +
 .../tooltip/positioning/main.js               |     4 +
 .../tooltip/positioning/main.vue              |    76 +
 .../tooltip/shared/products.json              |  1233 +
 vue-options-api-demos/tooltip/svg/main.js     |     4 +
 vue-options-api-demos/tooltip/svg/main.vue    |   303 +
 .../tooltip/templates/main.js                 |     4 +
 .../tooltip/templates/main.vue                |    70 +
 .../treelist/aggregates/data.js               |  1150 +
 .../treelist/aggregates/main.js               |     4 +
 .../treelist/aggregates/main.vue              |   125 +
 .../treelist/cells-custom/data.js             |  1150 +
 .../treelist/cells-custom/main.js             |     4 +
 .../treelist/cells-custom/main.vue            |   155 +
 .../treelist/column-menu/data.js              |  1150 +
 .../treelist/column-menu/main.js              |     4 +
 .../treelist/column-menu/main.vue             |   111 +
 .../treelist/column-virtualization/main.js    |     4 +
 .../treelist/column-virtualization/main.vue   |    75 +
 .../column-virtualization/treelist-data.js    |    26 +
 .../treelist/column-width-fixed/data.js       |  1150 +
 .../treelist/column-width-fixed/main.js       |     4 +
 .../treelist/column-width-fixed/main.vue      |    78 +
 .../treelist/column-width-percentage/data.js  |  1150 +
 .../treelist/column-width-percentage/main.js  |     4 +
 .../treelist/column-width-percentage/main.vue |    74 +
 .../treelist/dragdrop/data.js                 |  1150 +
 .../treelist/dragdrop/main.js                 |     4 +
 .../treelist/dragdrop/main.vue                |    85 +
 .../editing-external-form/CommandCell.vue     |    49 +
 .../editing-external-form/DialogContainer.vue |    86 +
 .../treelist/editing-external-form/data.js    |  1150 +
 .../treelist/editing-external-form/main.js    |     4 +
 .../treelist/editing-external-form/main.vue   |   114 +
 .../treelist/editing-in-cell/data.js          |  1150 +
 .../treelist/editing-in-cell/main.js          |     4 +
 .../treelist/editing-in-cell/main.vue         |   216 +
 .../treelist/editing-inline/CommandCell.vue   |    90 +
 .../treelist/editing-inline/data.js           |  1150 +
 .../treelist/editing-inline/main.js           |     4 +
 .../treelist/editing-inline/main.vue          |   191 +
 .../treelist/editing-row-click/data.js        |  1150 +
 .../treelist/editing-row-click/main.js        |     4 +
 .../treelist/editing-row-click/main.vue       |   156 +
 .../treelist/excel/basic/data.js              |  1150 +
 .../treelist/excel/basic/main.js              |     4 +
 .../treelist/excel/basic/main.vue             |   104 +
 .../treelist/excel/customization/data.js      |  1150 +
 .../treelist/excel/customization/main.js      |     4 +
 .../treelist/excel/customization/main.vue     |   126 +
 .../treelist/excel/single-page/data.js        |  1150 +
 .../treelist/excel/single-page/main.js        |     4 +
 .../treelist/excel/single-page/main.vue       |   115 +
 .../treelist/filtering-basic/data.js          |  1150 +
 .../treelist/filtering-basic/main.js          |     4 +
 .../treelist/filtering-basic/main.vue         |    96 +
 .../filtering-custom/DropDownListFilter.vue   |    25 +
 .../treelist/filtering-custom/data.js         |  1150 +
 .../treelist/filtering-custom/main.js         |     4 +
 .../treelist/filtering-custom/main.vue        |   126 +
 .../treelist/flat-data/flat-data.js           |  1093 +
 .../treelist/flat-data/main.js                |     4 +
 .../treelist/flat-data/main.vue               |   117 +
 .../treelist/get-started/main.js              |     4 +
 .../treelist/get-started/main.vue             |    42 +
 .../treelist/get-started/simple-data.js       |    28 +
 .../treelist/globalization/data.js            |  1150 +
 .../treelist/globalization/es.json            |    44 +
 .../treelist/globalization/main.js            |     4 +
 .../treelist/globalization/main.vue           |    99 +
 .../treelist/keyboard-navigation/data.js      |  1150 +
 .../treelist/keyboard-navigation/main.js      |     4 +
 .../treelist/keyboard-navigation/main.vue     |   109 +
 vue-options-api-demos/treelist/locked/data.js |  1150 +
 vue-options-api-demos/treelist/locked/main.js |     4 +
 .../treelist/locked/main.vue                  |   103 +
 .../treelist/multi-column-headers/data.js     |  1150 +
 .../treelist/multi-column-headers/main.js     |     4 +
 .../treelist/multi-column-headers/main.vue    |   107 +
 .../treelist/overview/data.js                 |  1150 +
 .../treelist/overview/main.js                 |     4 +
 .../treelist/overview/main.vue                |   108 +
 vue-options-api-demos/treelist/paging/main.js |     4 +
 .../treelist/paging/main.vue                  |    73 +
 .../treelist/paging/treelist-data.js          |    26 +
 .../treelist/pdf/all-data-expanded/data.js    |  1150 +
 .../treelist/pdf/all-data-expanded/main.js    |     4 +
 .../treelist/pdf/all-data-expanded/main.vue   |   128 +
 .../treelist/pdf/basic/data.js                |  1150 +
 .../treelist/pdf/basic/main.js                |     4 +
 .../treelist/pdf/basic/main.vue               |   114 +
 .../treelist/pdf/columns-modification/data.js |  1150 +
 .../treelist/pdf/columns-modification/main.js |     4 +
 .../pdf/columns-modification/main.vue         |   131 +
 .../treelist/reordering/data.js               |  1150 +
 .../treelist/reordering/main.js               |     4 +
 .../treelist/reordering/main.vue              |    94 +
 .../treelist/resizing/data.js                 |  1150 +
 .../treelist/resizing/main.js                 |     4 +
 .../treelist/resizing/main.vue                |   100 +
 .../treelist/selection-basic/data.js          |  1150 +
 .../treelist/selection-basic/main.js          |     4 +
 .../treelist/selection-basic/main.vue         |   130 +
 vue-options-api-demos/treelist/shared/data.js |  1150 +
 .../treelist/shared/flat-data.js              |  1093 +
 .../treelist/shared/pager.tsx                 |    14 +
 .../treelist/shared/simple-data.js            |    28 +
 .../treelist/shared/treelist-data.js          |    26 +
 .../treelist/sorting-basic/data.js            |  1150 +
 .../treelist/sorting-basic/main.js            |     4 +
 .../treelist/sorting-basic/main.vue           |   101 +
 .../treelist/sorting-customization/data.js    |  1150 +
 .../treelist/sorting-customization/main.js    |     4 +
 .../treelist/sorting-customization/main.vue   |   129 +
 .../treelist/toolbar/data.js                  |  1150 +
 .../treelist/toolbar/main.js                  |     4 +
 .../treelist/toolbar/main.vue                 |   126 +
 .../treelist/virtual-scroll/main.js           |     4 +
 .../treelist/virtual-scroll/main.vue          |    77 +
 .../treelist/virtual-scroll/treelist-data.js  |    26 +
 .../treeview/appearance/StyleConfigurator.vue |    61 +
 .../treeview/appearance/main.js               |     4 +
 .../treeview/appearance/main.vue              |   112 +
 .../checkbox/checkbox-all-helper/main.js      |     4 +
 .../checkbox/checkbox-all-helper/main.vue     |   113 +
 .../treeview/checkbox/checkbox-all/main.js    |     4 +
 .../treeview/checkbox/checkbox-all/main.vue   |   101 +
 .../checkbox/checkbox-helper-multiple/main.js |     4 +
 .../checkbox-helper-multiple/main.vue         |    70 +
 .../checkbox/checkbox-helper-single/main.js   |     4 +
 .../checkbox/checkbox-helper-single/main.vue  |    71 +
 .../treeview/checkbox/checkbox-helper/main.js |     4 +
 .../checkbox/checkbox-helper/main.vue         |   113 +
 vue-options-api-demos/treeview/custom/main.js |     4 +
 .../treeview/custom/main.vue                  |   106 +
 .../treeview/data-binding/basic/main.js       |     4 +
 .../treeview/data-binding/basic/main.vue      |    51 +
 .../treeview/data-binding/item-fields/main.js |     4 +
 .../data-binding/item-fields/main.vue         |    50 +
 .../treeview/data-binding/remote-data/main.js |     4 +
 .../data-binding/remote-data/main.vue         |    68 +
 .../treeview/data-reload/main.js              |     4 +
 .../treeview/data-reload/main.vue             |    12 +
 .../treeview/drag/multiple/main.js            |     4 +
 .../treeview/drag/multiple/main.vue           |   191 +
 .../treeview/drag/single/main.js              |     4 +
 .../treeview/drag/single/main.vue             |   167 +
 .../treeview/events/drag/Logger.vue           |    45 +
 .../treeview/events/drag/main.js              |     4 +
 .../treeview/events/drag/main.vue             |   190 +
 .../treeview/events/select-check/Logger.vue   |    45 +
 .../treeview/events/select-check/main.js      |     4 +
 .../treeview/events/select-check/main.vue     |   121 +
 .../main.js                                   |     4 +
 .../main.vue                                  |   101 +
 .../expand/items-expanded-all/main.js         |     4 +
 .../expand/items-expanded-all/main.vue        |   132 +
 .../expand/items-expanded-directly/main.js    |     4 +
 .../expand/items-expanded-directly/main.vue   |    59 +
 .../items-expanded-helper-function/main.js    |     4 +
 .../items-expanded-helper-function/main.vue   |    66 +
 .../treeview/get-started/main.js              |     4 +
 .../treeview/get-started/main.vue             |    51 +
 .../treeview/keyboard/main.js                 |     4 +
 .../treeview/keyboard/main.vue                |   103 +
 .../treeview/overview/basic/main.js           |     4 +
 .../treeview/overview/basic/main.vue          |   103 +
 .../treeview/select/selection-all/main.js     |     4 +
 .../treeview/select/selection-all/main.vue    |    91 +
 .../selection-update-helper-function/main.js  |     4 +
 .../selection-update-helper-function/main.vue |    72 +
 .../treeview/select/selection-update/main.js  |     4 +
 .../treeview/select/selection-update/main.vue |    61 +
 .../upload/action-buttons/main.js             |     4 +
 .../upload/action-buttons/main.vue            |    58 +
 .../upload/additional-data/main.js            |     4 +
 .../upload/additional-data/main.vue           |    31 +
 .../upload/credentials/main.js                |     4 +
 .../upload/credentials/main.vue               |    21 +
 .../upload/custom-complex/CustomList.vue      |    41 +
 .../upload/custom-complex/main.js             |     4 +
 .../upload/custom-complex/main.vue            |    38 +
 .../custom-external-drop-zone/CustomHint.vue  |     3 +
 .../custom-external-drop-zone/CustomNote.vue  |     3 +
 .../upload/custom-external-drop-zone/main.js  |     4 +
 .../upload/custom-external-drop-zone/main.vue |    47 +
 .../upload/custom/CustomList.vue              |    15 +
 vue-options-api-demos/upload/custom/main.js   |     4 +
 vue-options-api-demos/upload/custom/main.vue  |    34 +
 vue-options-api-demos/upload/disabled/main.js |     4 +
 .../upload/disabled/main.vue                  |    37 +
 .../upload/drag-drop/main.js                  |     4 +
 .../upload/drag-drop/main.vue                 |    21 +
 vue-options-api-demos/upload/events/main.js   |     4 +
 vue-options-api-demos/upload/events/main.vue  |   102 +
 .../upload/external-drop-zone/main.js         |     4 +
 .../upload/external-drop-zone/main.vue        |    28 +
 .../upload/file-processing/automatic/main.js  |     4 +
 .../upload/file-processing/automatic/main.vue |    21 +
 .../upload/file-processing/batch/main.js      |     4 +
 .../upload/file-processing/batch/main.vue     |    20 +
 .../upload/file-processing/single/main.js     |     4 +
 .../upload/file-processing/single/main.vue    |    21 +
 .../upload/getting-started/main.js            |     4 +
 .../upload/getting-started/main.vue           |   122 +
 .../upload/globalization/main.js              |     4 +
 .../upload/globalization/main.vue             |    50 +
 vue-options-api-demos/upload/keyboard/main.js |     4 +
 .../upload/keyboard/main.vue                  |    21 +
 .../upload/modes/controlled/main.js           |     4 +
 .../upload/modes/controlled/main.vue          |    46 +
 .../upload/modes/uncontrolled/main.js         |     4 +
 .../upload/modes/uncontrolled/main.vue        |    36 +
 .../upload/restrictions/custom/main.js        |     4 +
 .../upload/restrictions/custom/main.vue       |    75 +
 .../upload/restrictions/extension/main.js     |     4 +
 .../upload/restrictions/extension/main.vue    |    22 +
 .../upload/restrictions/max-file-size/main.js |     4 +
 .../restrictions/max-file-size/main.vue       |    22 +
 .../upload/restrictions/min-file-size/main.js |     4 +
 .../restrictions/min-file-size/main.vue       |    22 +
 vue-options-api-demos/upload/rtl/main.js      |     4 +
 vue-options-api-demos/upload/rtl/main.vue     |    21 +
 4206 files changed, 400036 insertions(+)
 create mode 100644 vue-options-api-demos/README.md
 create mode 100644 vue-options-api-demos/animation/animations/entering/main.js
 create mode 100644 vue-options-api-demos/animation/animations/entering/main.vue
 create mode 100644 vue-options-api-demos/animation/animations/entering/styles.css
 create mode 100644 vue-options-api-demos/animation/animations/exiting/main.js
 create mode 100644 vue-options-api-demos/animation/animations/exiting/main.vue
 create mode 100644 vue-options-api-demos/animation/animations/exiting/styles.css
 create mode 100644 vue-options-api-demos/animation/api/expand-props/main.js
 create mode 100644 vue-options-api-demos/animation/api/expand-props/main.vue
 create mode 100644 vue-options-api-demos/animation/api/expand-props/styles.css
 create mode 100644 vue-options-api-demos/animation/api/fade-props/main.js
 create mode 100644 vue-options-api-demos/animation/api/fade-props/main.vue
 create mode 100644 vue-options-api-demos/animation/api/fade-props/styles.css
 create mode 100644 vue-options-api-demos/animation/api/push-props/main.js
 create mode 100644 vue-options-api-demos/animation/api/push-props/main.vue
 create mode 100644 vue-options-api-demos/animation/api/push-props/styles.css
 create mode 100644 vue-options-api-demos/animation/api/reveal-props/main.js
 create mode 100644 vue-options-api-demos/animation/api/reveal-props/main.vue
 create mode 100644 vue-options-api-demos/animation/api/reveal-props/styles.css
 create mode 100644 vue-options-api-demos/animation/api/slide-props/main.js
 create mode 100644 vue-options-api-demos/animation/api/slide-props/main.vue
 create mode 100644 vue-options-api-demos/animation/api/slide-props/styles.css
 create mode 100644 vue-options-api-demos/animation/api/zoom-props/main.js
 create mode 100644 vue-options-api-demos/animation/api/zoom-props/main.vue
 create mode 100644 vue-options-api-demos/animation/api/zoom-props/styles.css
 create mode 100644 vue-options-api-demos/animation/appearance/child/main.js
 create mode 100644 vue-options-api-demos/animation/appearance/child/main.vue
 create mode 100644 vue-options-api-demos/animation/appearance/child/styles.css
 create mode 100644 vue-options-api-demos/animation/appearance/default/main.js
 create mode 100644 vue-options-api-demos/animation/appearance/default/main.vue
 create mode 100644 vue-options-api-demos/animation/appearance/default/styles.css
 create mode 100644 vue-options-api-demos/animation/appearance/parent/main.js
 create mode 100644 vue-options-api-demos/animation/appearance/parent/main.vue
 create mode 100644 vue-options-api-demos/animation/appearance/parent/styles.css
 create mode 100644 vue-options-api-demos/animation/configuration/main.js
 create mode 100644 vue-options-api-demos/animation/configuration/main.vue
 create mode 100644 vue-options-api-demos/animation/configuration/styles.css
 create mode 100644 vue-options-api-demos/animation/direction/expand/main.js
 create mode 100644 vue-options-api-demos/animation/direction/expand/main.vue
 create mode 100644 vue-options-api-demos/animation/direction/expand/styles.css
 create mode 100644 vue-options-api-demos/animation/direction/fade/main.js
 create mode 100644 vue-options-api-demos/animation/direction/fade/main.vue
 create mode 100644 vue-options-api-demos/animation/direction/fade/styles.css
 create mode 100644 vue-options-api-demos/animation/direction/push/main.js
 create mode 100644 vue-options-api-demos/animation/direction/push/main.vue
 create mode 100644 vue-options-api-demos/animation/direction/push/styles.css
 create mode 100644 vue-options-api-demos/animation/direction/reveal/main.js
 create mode 100644 vue-options-api-demos/animation/direction/reveal/main.vue
 create mode 100644 vue-options-api-demos/animation/direction/reveal/styles.css
 create mode 100644 vue-options-api-demos/animation/direction/slide/main.js
 create mode 100644 vue-options-api-demos/animation/direction/slide/main.vue
 create mode 100644 vue-options-api-demos/animation/direction/slide/styles.css
 create mode 100644 vue-options-api-demos/animation/direction/zoom/main.js
 create mode 100644 vue-options-api-demos/animation/direction/zoom/main.vue
 create mode 100644 vue-options-api-demos/animation/direction/zoom/styles.css
 create mode 100644 vue-options-api-demos/animation/disabled/main.js
 create mode 100644 vue-options-api-demos/animation/disabled/main.vue
 create mode 100644 vue-options-api-demos/animation/disabled/styles.css
 create mode 100644 vue-options-api-demos/animation/duration/main.js
 create mode 100644 vue-options-api-demos/animation/duration/main.vue
 create mode 100644 vue-options-api-demos/animation/duration/styles.css
 create mode 100644 vue-options-api-demos/animation/overview/main.js
 create mode 100644 vue-options-api-demos/animation/overview/main.vue
 create mode 100644 vue-options-api-demos/animation/overview/styles.css
 create mode 100644 vue-options-api-demos/animation/types/expand/main.js
 create mode 100644 vue-options-api-demos/animation/types/expand/main.vue
 create mode 100644 vue-options-api-demos/animation/types/expand/styles.css
 create mode 100644 vue-options-api-demos/animation/types/fade/main.js
 create mode 100644 vue-options-api-demos/animation/types/fade/main.vue
 create mode 100644 vue-options-api-demos/animation/types/fade/styles.css
 create mode 100644 vue-options-api-demos/animation/types/push/main.js
 create mode 100644 vue-options-api-demos/animation/types/push/main.vue
 create mode 100644 vue-options-api-demos/animation/types/push/styles.css
 create mode 100644 vue-options-api-demos/animation/types/reveal/main.js
 create mode 100644 vue-options-api-demos/animation/types/reveal/main.vue
 create mode 100644 vue-options-api-demos/animation/types/reveal/styles.css
 create mode 100644 vue-options-api-demos/animation/types/slide/main.js
 create mode 100644 vue-options-api-demos/animation/types/slide/main.vue
 create mode 100644 vue-options-api-demos/animation/types/slide/styles.css
 create mode 100644 vue-options-api-demos/animation/types/zoom/main.js
 create mode 100644 vue-options-api-demos/animation/types/zoom/main.vue
 create mode 100644 vue-options-api-demos/animation/types/zoom/styles.css
 create mode 100644 vue-options-api-demos/buttons/button/appearance/configurator/ButtonStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/buttons/button/appearance/configurator/main.js
 create mode 100644 vue-options-api-demos/buttons/button/appearance/configurator/main.vue
 create mode 100644 vue-options-api-demos/buttons/button/appearance/fill-mode/main.js
 create mode 100644 vue-options-api-demos/buttons/button/appearance/fill-mode/main.vue
 create mode 100644 vue-options-api-demos/buttons/button/appearance/rounded/main.js
 create mode 100644 vue-options-api-demos/buttons/button/appearance/rounded/main.vue
 create mode 100644 vue-options-api-demos/buttons/button/appearance/shape/main.js
 create mode 100644 vue-options-api-demos/buttons/button/appearance/shape/main.vue
 create mode 100644 vue-options-api-demos/buttons/button/appearance/size/main.js
 create mode 100644 vue-options-api-demos/buttons/button/appearance/size/main.vue
 create mode 100644 vue-options-api-demos/buttons/button/appearance/theme-colors/main.js
 create mode 100644 vue-options-api-demos/buttons/button/appearance/theme-colors/main.vue
 create mode 100644 vue-options-api-demos/buttons/button/basic/main.js
 create mode 100644 vue-options-api-demos/buttons/button/basic/main.vue
 create mode 100644 vue-options-api-demos/buttons/button/disabled/main.js
 create mode 100644 vue-options-api-demos/buttons/button/disabled/main.vue
 create mode 100644 vue-options-api-demos/buttons/button/events/main.js
 create mode 100644 vue-options-api-demos/buttons/button/events/main.vue
 create mode 100644 vue-options-api-demos/buttons/button/icon/main.js
 create mode 100644 vue-options-api-demos/buttons/button/icon/main.vue
 create mode 100644 vue-options-api-demos/buttons/button/primary/main.js
 create mode 100644 vue-options-api-demos/buttons/button/primary/main.vue
 create mode 100644 vue-options-api-demos/buttons/button/toggleable/main.js
 create mode 100644 vue-options-api-demos/buttons/button/toggleable/main.vue
 create mode 100644 vue-options-api-demos/buttons/buttongroup/basic/main.js
 create mode 100644 vue-options-api-demos/buttons/buttongroup/basic/main.vue
 create mode 100644 vue-options-api-demos/buttons/buttongroup/disabled/main.js
 create mode 100644 vue-options-api-demos/buttons/buttongroup/disabled/main.vue
 create mode 100644 vue-options-api-demos/buttons/chip/appearance/configurator/ChipStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/buttons/chip/appearance/configurator/main.js
 create mode 100644 vue-options-api-demos/buttons/chip/appearance/configurator/main.vue
 create mode 100644 vue-options-api-demos/buttons/chip/appearance/fill-mode/main.js
 create mode 100644 vue-options-api-demos/buttons/chip/appearance/fill-mode/main.vue
 create mode 100644 vue-options-api-demos/buttons/chip/appearance/rounded/main.js
 create mode 100644 vue-options-api-demos/buttons/chip/appearance/rounded/main.vue
 create mode 100644 vue-options-api-demos/buttons/chip/appearance/size/main.js
 create mode 100644 vue-options-api-demos/buttons/chip/appearance/size/main.vue
 create mode 100644 vue-options-api-demos/buttons/chip/appearance/theme-colors/main.js
 create mode 100644 vue-options-api-demos/buttons/chip/appearance/theme-colors/main.vue
 create mode 100644 vue-options-api-demos/buttons/chip/avatar/CustomChip.vue
 create mode 100644 vue-options-api-demos/buttons/chip/avatar/main.js
 create mode 100644 vue-options-api-demos/buttons/chip/avatar/main.vue
 create mode 100644 vue-options-api-demos/buttons/chip/customization/CustomChip.vue
 create mode 100644 vue-options-api-demos/buttons/chip/customization/main.js
 create mode 100644 vue-options-api-demos/buttons/chip/customization/main.vue
 create mode 100644 vue-options-api-demos/buttons/chip/disabled/CustomChip.vue
 create mode 100644 vue-options-api-demos/buttons/chip/disabled/main.js
 create mode 100644 vue-options-api-demos/buttons/chip/disabled/main.vue
 create mode 100644 vue-options-api-demos/buttons/chip/getting-started/main.js
 create mode 100644 vue-options-api-demos/buttons/chip/getting-started/main.vue
 create mode 100644 vue-options-api-demos/buttons/chip/remove-icon/CustomChip.vue
 create mode 100644 vue-options-api-demos/buttons/chip/remove-icon/main.js
 create mode 100644 vue-options-api-demos/buttons/chip/remove-icon/main.vue
 create mode 100644 vue-options-api-demos/buttons/chip/remove/CustomChip.vue
 create mode 100644 vue-options-api-demos/buttons/chip/remove/main.js
 create mode 100644 vue-options-api-demos/buttons/chip/remove/main.vue
 create mode 100644 vue-options-api-demos/buttons/chip/select-icon/CustomChip.vue
 create mode 100644 vue-options-api-demos/buttons/chip/select-icon/main.js
 create mode 100644 vue-options-api-demos/buttons/chip/select-icon/main.vue
 create mode 100644 vue-options-api-demos/buttons/chip/types/CustomChip.vue
 create mode 100644 vue-options-api-demos/buttons/chip/types/main.js
 create mode 100644 vue-options-api-demos/buttons/chip/types/main.vue
 create mode 100644 vue-options-api-demos/buttons/chiplist/appearance/main.js
 create mode 100644 vue-options-api-demos/buttons/chiplist/appearance/main.vue
 create mode 100644 vue-options-api-demos/buttons/chiplist/controlled/CustomChip.vue
 create mode 100644 vue-options-api-demos/buttons/chiplist/controlled/main.js
 create mode 100644 vue-options-api-demos/buttons/chiplist/controlled/main.vue
 create mode 100644 vue-options-api-demos/buttons/chiplist/customization/CustomChip.vue
 create mode 100644 vue-options-api-demos/buttons/chiplist/customization/main.js
 create mode 100644 vue-options-api-demos/buttons/chiplist/customization/main.vue
 create mode 100644 vue-options-api-demos/buttons/chiplist/data-binding/main.js
 create mode 100644 vue-options-api-demos/buttons/chiplist/data-binding/main.vue
 create mode 100644 vue-options-api-demos/buttons/chiplist/disabled/CustomChip.vue
 create mode 100644 vue-options-api-demos/buttons/chiplist/disabled/main.js
 create mode 100644 vue-options-api-demos/buttons/chiplist/disabled/main.vue
 create mode 100644 vue-options-api-demos/buttons/chiplist/getting-started/main.js
 create mode 100644 vue-options-api-demos/buttons/chiplist/getting-started/main.vue
 create mode 100644 vue-options-api-demos/buttons/chiplist/keyboard/CustomChip.vue
 create mode 100644 vue-options-api-demos/buttons/chiplist/keyboard/main.js
 create mode 100644 vue-options-api-demos/buttons/chiplist/keyboard/main.vue
 create mode 100644 vue-options-api-demos/buttons/chiplist/selection/multiple/main.js
 create mode 100644 vue-options-api-demos/buttons/chiplist/selection/multiple/main.vue
 create mode 100644 vue-options-api-demos/buttons/chiplist/selection/none/main.js
 create mode 100644 vue-options-api-demos/buttons/chiplist/selection/none/main.vue
 create mode 100644 vue-options-api-demos/buttons/chiplist/selection/single/main.js
 create mode 100644 vue-options-api-demos/buttons/chiplist/selection/single/main.vue
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/appearance/configurator/ButtonsStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/appearance/configurator/main.js
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/appearance/configurator/main.vue
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/appearance/fill-mode/main.js
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/appearance/fill-mode/main.vue
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/appearance/rounded/main.js
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/appearance/rounded/main.vue
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/appearance/shape/main.js
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/appearance/shape/main.vue
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/appearance/size/main.js
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/appearance/size/main.vue
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/appearance/theme-colors/main.js
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/appearance/theme-colors/main.vue
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/customization/items/main.js
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/customization/items/main.vue
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/customization/popup/main.js
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/customization/popup/main.vue
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/data-binding/objects/main.js
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/data-binding/objects/main.vue
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/data-binding/strings/main.js
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/data-binding/strings/main.vue
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/disabled/main.js
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/disabled/main.vue
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/events/Logger.vue
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/events/main.js
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/events/main.vue
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/icons/main.js
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/icons/main.vue
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/keyboard/main.js
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/keyboard/main.vue
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/overview/main.js
 create mode 100644 vue-options-api-demos/buttons/dropdownbutton/overview/main.vue
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/align-offset/main.js
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/align-offset/main.vue
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/appearance/configurator/FloatingActionButtonConfigurator.vue
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/appearance/configurator/main.js
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/appearance/configurator/main.vue
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/appearance/rounded/main.js
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/appearance/rounded/main.vue
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/appearance/size/main.js
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/appearance/size/main.vue
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/appearance/theme/main.js
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/appearance/theme/main.vue
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/content-types/main.js
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/content-types/main.vue
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/disabled/main.js
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/disabled/main.vue
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/events/main.js
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/events/main.vue
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/icons/main.js
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/icons/main.vue
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/items/custom/custom-rendering/CustomItem.vue
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/items/custom/custom-rendering/main.js
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/items/custom/custom-rendering/main.vue
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/items/custom/popup/main.js
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/items/custom/popup/main.vue
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/items/databinding/main.js
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/items/databinding/main.vue
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/items/disabled/main.js
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/items/disabled/main.vue
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/keyboard/main.js
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/keyboard/main.vue
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/overview/CustomItem.vue
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/overview/main.js
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/overview/main.vue
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/position-mode/main.js
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/position-mode/main.vue
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/positioning/main.js
 create mode 100644 vue-options-api-demos/buttons/floatingactionbutton/positioning/main.vue
 create mode 100644 vue-options-api-demos/buttons/overview/CustomChip.vue
 create mode 100644 vue-options-api-demos/buttons/overview/main.js
 create mode 100644 vue-options-api-demos/buttons/overview/main.vue
 create mode 100644 vue-options-api-demos/buttons/rtl/main.js
 create mode 100644 vue-options-api-demos/buttons/rtl/main.vue
 create mode 100644 vue-options-api-demos/buttons/shared/ButtonStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/buttons/shared/ButtonsStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/buttons/shared/ChipStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/buttons/shared/FloatingActionButtonConfigurator.vue
 create mode 100644 vue-options-api-demos/buttons/splitbutton/appearance/configurator/ButtonsStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/buttons/splitbutton/appearance/configurator/main.js
 create mode 100644 vue-options-api-demos/buttons/splitbutton/appearance/configurator/main.vue
 create mode 100644 vue-options-api-demos/buttons/splitbutton/appearance/fill-mode/main.js
 create mode 100644 vue-options-api-demos/buttons/splitbutton/appearance/fill-mode/main.vue
 create mode 100644 vue-options-api-demos/buttons/splitbutton/appearance/rounded/main.js
 create mode 100644 vue-options-api-demos/buttons/splitbutton/appearance/rounded/main.vue
 create mode 100644 vue-options-api-demos/buttons/splitbutton/appearance/size/main.js
 create mode 100644 vue-options-api-demos/buttons/splitbutton/appearance/size/main.vue
 create mode 100644 vue-options-api-demos/buttons/splitbutton/appearance/theme-colors/main.js
 create mode 100644 vue-options-api-demos/buttons/splitbutton/appearance/theme-colors/main.vue
 create mode 100644 vue-options-api-demos/buttons/splitbutton/customization/items/main.js
 create mode 100644 vue-options-api-demos/buttons/splitbutton/customization/items/main.vue
 create mode 100644 vue-options-api-demos/buttons/splitbutton/customization/popup/main.js
 create mode 100644 vue-options-api-demos/buttons/splitbutton/customization/popup/main.vue
 create mode 100644 vue-options-api-demos/buttons/splitbutton/data-binding/objects/main.js
 create mode 100644 vue-options-api-demos/buttons/splitbutton/data-binding/objects/main.vue
 create mode 100644 vue-options-api-demos/buttons/splitbutton/data-binding/strings/main.js
 create mode 100644 vue-options-api-demos/buttons/splitbutton/data-binding/strings/main.vue
 create mode 100644 vue-options-api-demos/buttons/splitbutton/disabled/main.js
 create mode 100644 vue-options-api-demos/buttons/splitbutton/disabled/main.vue
 create mode 100644 vue-options-api-demos/buttons/splitbutton/events/Logger.vue
 create mode 100644 vue-options-api-demos/buttons/splitbutton/events/main.js
 create mode 100644 vue-options-api-demos/buttons/splitbutton/events/main.vue
 create mode 100644 vue-options-api-demos/buttons/splitbutton/icons/main.js
 create mode 100644 vue-options-api-demos/buttons/splitbutton/icons/main.vue
 create mode 100644 vue-options-api-demos/buttons/splitbutton/keyboard/main.js
 create mode 100644 vue-options-api-demos/buttons/splitbutton/keyboard/main.vue
 create mode 100644 vue-options-api-demos/buttons/splitbutton/overview/main.js
 create mode 100644 vue-options-api-demos/buttons/splitbutton/overview/main.vue
 create mode 100644 vue-options-api-demos/buttons/toolbar/basic/main.js
 create mode 100644 vue-options-api-demos/buttons/toolbar/basic/main.vue
 create mode 100644 vue-options-api-demos/buttons/toolbar/events/Logger.vue
 create mode 100644 vue-options-api-demos/buttons/toolbar/events/main.js
 create mode 100644 vue-options-api-demos/buttons/toolbar/events/main.vue
 create mode 100644 vue-options-api-demos/buttons/toolbar/fill-mode/ToolbarStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/buttons/toolbar/fill-mode/main.js
 create mode 100644 vue-options-api-demos/buttons/toolbar/fill-mode/main.vue
 create mode 100644 vue-options-api-demos/buttons/toolbar/keyboard/main.js
 create mode 100644 vue-options-api-demos/buttons/toolbar/keyboard/main.vue
 create mode 100644 vue-options-api-demos/buttons/toolbar/overflow-scroll/ToolbarScrollConfigurator.vue
 create mode 100644 vue-options-api-demos/buttons/toolbar/overflow-scroll/main.js
 create mode 100644 vue-options-api-demos/buttons/toolbar/overflow-scroll/main.vue
 create mode 100644 vue-options-api-demos/buttons/toolbar/overflow-section/main.js
 create mode 100644 vue-options-api-demos/buttons/toolbar/overflow-section/main.vue
 create mode 100644 vue-options-api-demos/buttons/toolbar/size/ToolbarStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/buttons/toolbar/size/main.js
 create mode 100644 vue-options-api-demos/buttons/toolbar/size/main.vue
 create mode 100644 vue-options-api-demos/buttons/toolbar/tools/main.js
 create mode 100644 vue-options-api-demos/buttons/toolbar/tools/main.vue
 create mode 100644 vue-options-api-demos/charts/api/axis-title-position/main.js
 create mode 100644 vue-options-api-demos/charts/api/axis-title-position/main.vue
 create mode 100644 vue-options-api-demos/charts/api/base-unit/main.js
 create mode 100644 vue-options-api-demos/charts/api/base-unit/main.vue
 create mode 100644 vue-options-api-demos/charts/api/category-base-unit/main.js
 create mode 100644 vue-options-api-demos/charts/api/category-base-unit/main.vue
 create mode 100644 vue-options-api-demos/charts/api/dash-type/main.js
 create mode 100644 vue-options-api-demos/charts/api/dash-type/main.vue
 create mode 100644 vue-options-api-demos/charts/api/line-style/main.js
 create mode 100644 vue-options-api-demos/charts/api/line-style/main.vue
 create mode 100644 vue-options-api-demos/charts/api/marker-type/main.js
 create mode 100644 vue-options-api-demos/charts/api/marker-type/main.vue
 create mode 100644 vue-options-api-demos/charts/api/note-label-position/main.js
 create mode 100644 vue-options-api-demos/charts/api/note-label-position/main.vue
 create mode 100644 vue-options-api-demos/charts/api/note-position/main.js
 create mode 100644 vue-options-api-demos/charts/api/note-position/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/box-plot/box-plot-data.json
 create mode 100644 vue-options-api-demos/charts/chart/box-plot/main.js
 create mode 100644 vue-options-api-demos/charts/chart/box-plot/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/bubble/bubble-data.json
 create mode 100644 vue-options-api-demos/charts/chart/bubble/main.js
 create mode 100644 vue-options-api-demos/charts/chart/bubble/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/bullet/main.js
 create mode 100644 vue-options-api-demos/charts/chart/bullet/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/chart-instance/main.js
 create mode 100644 vue-options-api-demos/charts/chart/chart-instance/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/donut-center-visuals/main.js
 create mode 100644 vue-options-api-demos/charts/chart/donut-center-visuals/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/donut-center-visuals/power-distribution-data.json
 create mode 100644 vue-options-api-demos/charts/chart/donut-center/main.js
 create mode 100644 vue-options-api-demos/charts/chart/donut-center/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/donut-center/power-distribution-data.json
 create mode 100644 vue-options-api-demos/charts/chart/donut-series/donut-series-data.json
 create mode 100644 vue-options-api-demos/charts/chart/donut-series/main.js
 create mode 100644 vue-options-api-demos/charts/chart/donut-series/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/donut/main.js
 create mode 100644 vue-options-api-demos/charts/chart/donut/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/donut/power-distribution-data.json
 create mode 100644 vue-options-api-demos/charts/chart/funnel-dynamic/funnel-data.json
 create mode 100644 vue-options-api-demos/charts/chart/funnel-dynamic/main.js
 create mode 100644 vue-options-api-demos/charts/chart/funnel-dynamic/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/funnel-ratio/funnel-data.json
 create mode 100644 vue-options-api-demos/charts/chart/funnel-ratio/main.js
 create mode 100644 vue-options-api-demos/charts/chart/funnel-ratio/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/funnel/funnel-data.json
 create mode 100644 vue-options-api-demos/charts/chart/funnel/main.js
 create mode 100644 vue-options-api-demos/charts/chart/funnel/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/globalization/main.js
 create mode 100644 vue-options-api-demos/charts/chart/globalization/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/heatmap/basic/heatmap-data.js
 create mode 100644 vue-options-api-demos/charts/chart/heatmap/basic/main.js
 create mode 100644 vue-options-api-demos/charts/chart/heatmap/basic/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/heatmap/binding-categories/main.js
 create mode 100644 vue-options-api-demos/charts/chart/heatmap/binding-categories/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/heatmap/binding-objects/main.js
 create mode 100644 vue-options-api-demos/charts/chart/heatmap/binding-objects/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/heatmap/color-scale/main.js
 create mode 100644 vue-options-api-demos/charts/chart/heatmap/color-scale/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/heatmap/crosshairs/main.js
 create mode 100644 vue-options-api-demos/charts/chart/heatmap/crosshairs/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/heatmap/marker-shapes/main.js
 create mode 100644 vue-options-api-demos/charts/chart/heatmap/marker-shapes/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/heatmap/marker-size/main.js
 create mode 100644 vue-options-api-demos/charts/chart/heatmap/marker-size/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/heatmap/pan-zoom/main.js
 create mode 100644 vue-options-api-demos/charts/chart/heatmap/pan-zoom/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/heatmap/tooltips/heatmap-data.js
 create mode 100644 vue-options-api-demos/charts/chart/heatmap/tooltips/main.js
 create mode 100644 vue-options-api-demos/charts/chart/heatmap/tooltips/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/pan-zoom/basic/main.js
 create mode 100644 vue-options-api-demos/charts/chart/pan-zoom/basic/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/pan-zoom/lock/main.js
 create mode 100644 vue-options-api-demos/charts/chart/pan-zoom/lock/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/polar/main.js
 create mode 100644 vue-options-api-demos/charts/chart/polar/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/polar/polar-data.json
 create mode 100644 vue-options-api-demos/charts/chart/pyramid/basic/main.js
 create mode 100644 vue-options-api-demos/charts/chart/pyramid/basic/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/pyramid/dynamic-height/main.js
 create mode 100644 vue-options-api-demos/charts/chart/pyramid/dynamic-height/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/radar/main.js
 create mode 100644 vue-options-api-demos/charts/chart/radar/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/radar/radar-data.json
 create mode 100644 vue-options-api-demos/charts/chart/range-area/main.js
 create mode 100644 vue-options-api-demos/charts/chart/range-area/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/range-area/range-data.json
 create mode 100644 vue-options-api-demos/charts/chart/range-bar/main.js
 create mode 100644 vue-options-api-demos/charts/chart/range-bar/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/range-bar/range-data.json
 create mode 100644 vue-options-api-demos/charts/chart/rendering/main.js
 create mode 100644 vue-options-api-demos/charts/chart/rendering/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/rtl/main.js
 create mode 100644 vue-options-api-demos/charts/chart/rtl/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/scatter-line-style/main.js
 create mode 100644 vue-options-api-demos/charts/chart/scatter-line-style/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/scatter-line-style/scatter-line-style-data.json
 create mode 100644 vue-options-api-demos/charts/chart/scatter-line/main.js
 create mode 100644 vue-options-api-demos/charts/chart/scatter-line/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/scatter-line/scatter-line-data.json
 create mode 100644 vue-options-api-demos/charts/chart/scatter-plot/main.js
 create mode 100644 vue-options-api-demos/charts/chart/scatter-plot/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/scatter-plot/scatter-plot-data.json
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/basic/main.js
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/basic/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/basic/sales-data.js
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/custom-field/main.js
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/custom-field/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/custom-field/stock-data-sample.js
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/date-series/main.js
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/date-series/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/date-series/sales-data.js
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/exponential/categorical/main.js
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/exponential/categorical/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/exponential/categorical/sales-data.js
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/exponential/scatter/main.js
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/exponential/scatter/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/forecast/main.js
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/forecast/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/forecast/sales-data.js
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/hidden-legend-item/main.js
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/hidden-legend-item/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/hidden-legend-item/sales-data.js
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/linear/categorical/main.js
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/linear/categorical/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/linear/categorical/sales-data.js
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/linear/scatter/main.js
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/linear/scatter/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/logarithmic/categorical/main.js
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/logarithmic/categorical/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/logarithmic/categorical/sales-data.js
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/logarithmic/scatter/main.js
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/logarithmic/scatter/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/moving-average/categorical/main.js
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/moving-average/categorical/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/moving-average/categorical/sales-data.js
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/moving-average/scatter/main.js
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/moving-average/scatter/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/polynomial/categorical/main.js
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/polynomial/categorical/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/polynomial/categorical/sales-data.js
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/polynomial/scatter/main.js
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/polynomial/scatter/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/power/categorical/main.js
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/power/categorical/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/power/categorical/sales-data.js
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/power/scatter/main.js
 create mode 100644 vue-options-api-demos/charts/chart/trendlines/power/scatter/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/waterfall/main.js
 create mode 100644 vue-options-api-demos/charts/chart/waterfall/main.vue
 create mode 100644 vue-options-api-demos/charts/chart/waterfall/waterfall-data.json
 create mode 100644 vue-options-api-demos/charts/data-binding/arrays/main.js
 create mode 100644 vue-options-api-demos/charts/data-binding/arrays/main.vue
 create mode 100644 vue-options-api-demos/charts/data-binding/category-field/main.js
 create mode 100644 vue-options-api-demos/charts/data-binding/category-field/main.vue
 create mode 100644 vue-options-api-demos/charts/data-binding/duplicates-aggregate-custom/main.js
 create mode 100644 vue-options-api-demos/charts/data-binding/duplicates-aggregate-custom/main.vue
 create mode 100644 vue-options-api-demos/charts/data-binding/duplicates-aggregate/main.js
 create mode 100644 vue-options-api-demos/charts/data-binding/duplicates-aggregate/main.vue
 create mode 100644 vue-options-api-demos/charts/data-binding/duplicates/main.js
 create mode 100644 vue-options-api-demos/charts/data-binding/duplicates/main.vue
 create mode 100644 vue-options-api-demos/charts/data-binding/group-objects/main.js
 create mode 100644 vue-options-api-demos/charts/data-binding/group-objects/main.vue
 create mode 100644 vue-options-api-demos/charts/data-binding/labels/main.js
 create mode 100644 vue-options-api-demos/charts/data-binding/labels/main.vue
 create mode 100644 vue-options-api-demos/charts/data-binding/no-data-overlay-children/main.js
 create mode 100644 vue-options-api-demos/charts/data-binding/no-data-overlay-children/main.vue
 create mode 100644 vue-options-api-demos/charts/data-binding/no-data-overlay/main.js
 create mode 100644 vue-options-api-demos/charts/data-binding/no-data-overlay/main.vue
 create mode 100644 vue-options-api-demos/charts/data-binding/objects/main.js
 create mode 100644 vue-options-api-demos/charts/data-binding/objects/main.vue
 create mode 100644 vue-options-api-demos/charts/data-binding/values/main.js
 create mode 100644 vue-options-api-demos/charts/data-binding/values/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/axes/axis-config/main.js
 create mode 100644 vue-options-api-demos/charts/elements/axes/axis-config/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/axes/categorical/main.js
 create mode 100644 vue-options-api-demos/charts/elements/axes/categorical/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/axes/date-aggregates/main.js
 create mode 100644 vue-options-api-demos/charts/elements/axes/date-aggregates/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/axes/date-aggregates/weather-data.js
 create mode 100644 vue-options-api-demos/charts/elements/axes/label-rotation/main.js
 create mode 100644 vue-options-api-demos/charts/elements/axes/label-rotation/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/axes/label-rotation/weather-data.js
 create mode 100644 vue-options-api-demos/charts/elements/axes/max-divisions/main.js
 create mode 100644 vue-options-api-demos/charts/elements/axes/max-divisions/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/axes/max-divisions/weather-data.js
 create mode 100644 vue-options-api-demos/charts/elements/axes/multi-axis/main.js
 create mode 100644 vue-options-api-demos/charts/elements/axes/multi-axis/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/axes/range-labels/covid-data.json
 create mode 100644 vue-options-api-demos/charts/elements/axes/range-labels/main.js
 create mode 100644 vue-options-api-demos/charts/elements/axes/range-labels/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/axes/scatter/main.js
 create mode 100644 vue-options-api-demos/charts/elements/axes/scatter/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/axes/time-intervals/main.js
 create mode 100644 vue-options-api-demos/charts/elements/axes/time-intervals/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/axes/time-intervals/weather-data.js
 create mode 100644 vue-options-api-demos/charts/elements/axes/time-series/main.js
 create mode 100644 vue-options-api-demos/charts/elements/axes/time-series/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/axes/time-series/weather-data.js
 create mode 100644 vue-options-api-demos/charts/elements/chart-area/main.js
 create mode 100644 vue-options-api-demos/charts/elements/chart-area/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/crosshairs/cursor-values/main.js
 create mode 100644 vue-options-api-demos/charts/elements/crosshairs/cursor-values/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/crosshairs/overview/main.js
 create mode 100644 vue-options-api-demos/charts/elements/crosshairs/overview/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/error-bars/array-values/main.js
 create mode 100644 vue-options-api-demos/charts/elements/error-bars/array-values/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/error-bars/custom/main.js
 create mode 100644 vue-options-api-demos/charts/elements/error-bars/custom/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/error-bars/numeric-values/main.js
 create mode 100644 vue-options-api-demos/charts/elements/error-bars/numeric-values/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/error-bars/overview/main.js
 create mode 100644 vue-options-api-demos/charts/elements/error-bars/overview/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/error-bars/percentage-values/main.js
 create mode 100644 vue-options-api-demos/charts/elements/error-bars/percentage-values/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/error-bars/scatter/main.js
 create mode 100644 vue-options-api-demos/charts/elements/error-bars/scatter/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/error-bars/statistical-values/main.js
 create mode 100644 vue-options-api-demos/charts/elements/error-bars/statistical-values/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/labels/override-axis-labels/main.js
 create mode 100644 vue-options-api-demos/charts/elements/labels/override-axis-labels/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/labels/override-series-labels/main.js
 create mode 100644 vue-options-api-demos/charts/elements/labels/override-series-labels/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/labels/style-axis/main.js
 create mode 100644 vue-options-api-demos/charts/elements/labels/style-axis/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/labels/style-currency-axis/main.js
 create mode 100644 vue-options-api-demos/charts/elements/labels/style-currency-axis/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/labels/style-currency-series/main.js
 create mode 100644 vue-options-api-demos/charts/elements/labels/style-currency-series/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/labels/style-scatter-series/main.js
 create mode 100644 vue-options-api-demos/charts/elements/labels/style-scatter-series/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/labels/style-series/main.js
 create mode 100644 vue-options-api-demos/charts/elements/labels/style-series/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/labels/visual-axis/main.js
 create mode 100644 vue-options-api-demos/charts/elements/labels/visual-axis/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/labels/visual-series/main.js
 create mode 100644 vue-options-api-demos/charts/elements/labels/visual-series/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/legend/click-legend/main.js
 create mode 100644 vue-options-api-demos/charts/elements/legend/click-legend/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/legend/custom-legend-position/main.js
 create mode 100644 vue-options-api-demos/charts/elements/legend/custom-legend-position/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/legend/hide-legend/main.js
 create mode 100644 vue-options-api-demos/charts/elements/legend/hide-legend/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/legend/legend-items/main.js
 create mode 100644 vue-options-api-demos/charts/elements/legend/legend-items/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/legend/overview/main.js
 create mode 100644 vue-options-api-demos/charts/elements/legend/overview/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/legend/title/main.js
 create mode 100644 vue-options-api-demos/charts/elements/legend/title/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/notes/appearance/main.js
 create mode 100644 vue-options-api-demos/charts/elements/notes/appearance/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/notes/axis-notes/main.js
 create mode 100644 vue-options-api-demos/charts/elements/notes/axis-notes/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/notes/overview/main.js
 create mode 100644 vue-options-api-demos/charts/elements/notes/overview/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/panes/clip/main.js
 create mode 100644 vue-options-api-demos/charts/elements/panes/clip/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/panes/default/main.js
 create mode 100644 vue-options-api-demos/charts/elements/panes/default/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/panes/overview/main.js
 create mode 100644 vue-options-api-demos/charts/elements/panes/overview/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/plot-area/main.js
 create mode 100644 vue-options-api-demos/charts/elements/plot-area/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/plot-bands/custom/main.js
 create mode 100644 vue-options-api-demos/charts/elements/plot-bands/custom/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/plot-bands/labels/main.js
 create mode 100644 vue-options-api-demos/charts/elements/plot-bands/labels/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/plot-bands/overview/main.js
 create mode 100644 vue-options-api-demos/charts/elements/plot-bands/overview/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/selection/navigator/main.js
 create mode 100644 vue-options-api-demos/charts/elements/selection/navigator/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/selection/overview/main.js
 create mode 100644 vue-options-api-demos/charts/elements/selection/overview/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/series/configuration/main.js
 create mode 100644 vue-options-api-demos/charts/elements/series/configuration/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/series/overview/main.js
 create mode 100644 vue-options-api-demos/charts/elements/series/overview/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/title/main.js
 create mode 100644 vue-options-api-demos/charts/elements/title/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/tooltips/categorical/main.js
 create mode 100644 vue-options-api-demos/charts/elements/tooltips/categorical/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/tooltips/format/main.js
 create mode 100644 vue-options-api-demos/charts/elements/tooltips/format/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/tooltips/one-tooltip/main.js
 create mode 100644 vue-options-api-demos/charts/elements/tooltips/one-tooltip/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/tooltips/overview/main.js
 create mode 100644 vue-options-api-demos/charts/elements/tooltips/overview/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/tooltips/scatter/main.js
 create mode 100644 vue-options-api-demos/charts/elements/tooltips/scatter/main.vue
 create mode 100644 vue-options-api-demos/charts/elements/tooltips/template/main.js
 create mode 100644 vue-options-api-demos/charts/elements/tooltips/template/main.vue
 create mode 100644 vue-options-api-demos/charts/events/basic/Logger.vue
 create mode 100644 vue-options-api-demos/charts/events/basic/main.js
 create mode 100644 vue-options-api-demos/charts/events/basic/main.vue
 create mode 100644 vue-options-api-demos/charts/events/drag/Logger.vue
 create mode 100644 vue-options-api-demos/charts/events/drag/main.js
 create mode 100644 vue-options-api-demos/charts/events/drag/main.vue
 create mode 100644 vue-options-api-demos/charts/events/select/Logger.vue
 create mode 100644 vue-options-api-demos/charts/events/select/main.js
 create mode 100644 vue-options-api-demos/charts/events/select/main.vue
 create mode 100644 vue-options-api-demos/charts/events/zoom/Logger.vue
 create mode 100644 vue-options-api-demos/charts/events/zoom/main.js
 create mode 100644 vue-options-api-demos/charts/events/zoom/main.vue
 create mode 100644 vue-options-api-demos/charts/export-options/image-size/main.js
 create mode 100644 vue-options-api-demos/charts/export-options/image-size/main.vue
 create mode 100644 vue-options-api-demos/charts/export-options/image/main.js
 create mode 100644 vue-options-api-demos/charts/export-options/image/main.vue
 create mode 100644 vue-options-api-demos/charts/export-options/pdf-size/main.js
 create mode 100644 vue-options-api-demos/charts/export-options/pdf-size/main.vue
 create mode 100644 vue-options-api-demos/charts/export-options/pdf/main.js
 create mode 100644 vue-options-api-demos/charts/export-options/pdf/main.vue
 create mode 100644 vue-options-api-demos/charts/export-options/svg/main.js
 create mode 100644 vue-options-api-demos/charts/export-options/svg/main.vue
 create mode 100644 vue-options-api-demos/charts/export-options/visuals/main.js
 create mode 100644 vue-options-api-demos/charts/export-options/visuals/main.vue
 create mode 100644 vue-options-api-demos/charts/overview/main.js
 create mode 100644 vue-options-api-demos/charts/overview/main.vue
 create mode 100644 vue-options-api-demos/charts/sankey/auto-layout/main.js
 create mode 100644 vue-options-api-demos/charts/sankey/auto-layout/main.vue
 create mode 100644 vue-options-api-demos/charts/sankey/customization/data/main.js
 create mode 100644 vue-options-api-demos/charts/sankey/customization/data/main.vue
 create mode 100644 vue-options-api-demos/charts/sankey/customization/defaults/main.js
 create mode 100644 vue-options-api-demos/charts/sankey/customization/defaults/main.vue
 create mode 100644 vue-options-api-demos/charts/sankey/data-binding/datasets-customize-objects/main.js
 create mode 100644 vue-options-api-demos/charts/sankey/data-binding/datasets-customize-objects/main.vue
 create mode 100644 vue-options-api-demos/charts/sankey/data-binding/datasets-objects/main.js
 create mode 100644 vue-options-api-demos/charts/sankey/data-binding/datasets-objects/main.vue
 create mode 100644 vue-options-api-demos/charts/sankey/elements/legend/main.js
 create mode 100644 vue-options-api-demos/charts/sankey/elements/legend/main.vue
 create mode 100644 vue-options-api-demos/charts/sankey/elements/title/main.js
 create mode 100644 vue-options-api-demos/charts/sankey/elements/title/main.vue
 create mode 100644 vue-options-api-demos/charts/sankey/elements/tooltip/custom-behaviour/main.js
 create mode 100644 vue-options-api-demos/charts/sankey/elements/tooltip/custom-behaviour/main.vue
 create mode 100644 vue-options-api-demos/charts/sankey/elements/tooltip/custom-rendering/main.js
 create mode 100644 vue-options-api-demos/charts/sankey/elements/tooltip/custom-rendering/main.vue
 create mode 100644 vue-options-api-demos/charts/sankey/elements/tooltip/custom-rendering/tooltip-link-content.vue
 create mode 100644 vue-options-api-demos/charts/sankey/elements/tooltip/custom-rendering/tooltip-node-content.vue
 create mode 100644 vue-options-api-demos/charts/sankey/elements/tooltip/default/main.js
 create mode 100644 vue-options-api-demos/charts/sankey/elements/tooltip/default/main.vue
 create mode 100644 vue-options-api-demos/charts/sankey/events/main.js
 create mode 100644 vue-options-api-demos/charts/sankey/events/main.vue
 create mode 100644 vue-options-api-demos/charts/sankey/export/custom/main.js
 create mode 100644 vue-options-api-demos/charts/sankey/export/custom/main.vue
 create mode 100644 vue-options-api-demos/charts/sankey/export/image-size/main.js
 create mode 100644 vue-options-api-demos/charts/sankey/export/image-size/main.vue
 create mode 100644 vue-options-api-demos/charts/sankey/export/image/main.js
 create mode 100644 vue-options-api-demos/charts/sankey/export/image/main.vue
 create mode 100644 vue-options-api-demos/charts/sankey/export/pdf-paper-size/main.js
 create mode 100644 vue-options-api-demos/charts/sankey/export/pdf-paper-size/main.vue
 create mode 100644 vue-options-api-demos/charts/sankey/export/pdf/main.js
 create mode 100644 vue-options-api-demos/charts/sankey/export/pdf/main.vue
 create mode 100644 vue-options-api-demos/charts/sankey/export/svg/main.js
 create mode 100644 vue-options-api-demos/charts/sankey/export/svg/main.vue
 create mode 100644 vue-options-api-demos/charts/sankey/keyboard-navigation/main.js
 create mode 100644 vue-options-api-demos/charts/sankey/keyboard-navigation/main.vue
 create mode 100644 vue-options-api-demos/charts/sankey/overview/main.js
 create mode 100644 vue-options-api-demos/charts/sankey/overview/main.vue
 create mode 100644 vue-options-api-demos/charts/series-types/area/100-stacked/main.js
 create mode 100644 vue-options-api-demos/charts/series-types/area/100-stacked/main.vue
 create mode 100644 vue-options-api-demos/charts/series-types/area/basic/main.js
 create mode 100644 vue-options-api-demos/charts/series-types/area/basic/main.vue
 create mode 100644 vue-options-api-demos/charts/series-types/area/line-style/main.js
 create mode 100644 vue-options-api-demos/charts/series-types/area/line-style/main.vue
 create mode 100644 vue-options-api-demos/charts/series-types/area/stacked/main.js
 create mode 100644 vue-options-api-demos/charts/series-types/area/stacked/main.vue
 create mode 100644 vue-options-api-demos/charts/series-types/area/vertical/main.js
 create mode 100644 vue-options-api-demos/charts/series-types/area/vertical/main.vue
 create mode 100644 vue-options-api-demos/charts/series-types/bar/100-stacked/main.js
 create mode 100644 vue-options-api-demos/charts/series-types/bar/100-stacked/main.vue
 create mode 100644 vue-options-api-demos/charts/series-types/bar/basic/main.js
 create mode 100644 vue-options-api-demos/charts/series-types/bar/basic/main.vue
 create mode 100644 vue-options-api-demos/charts/series-types/bar/column/main.js
 create mode 100644 vue-options-api-demos/charts/series-types/bar/column/main.vue
 create mode 100644 vue-options-api-demos/charts/series-types/bar/gap/main.js
 create mode 100644 vue-options-api-demos/charts/series-types/bar/gap/main.vue
 create mode 100644 vue-options-api-demos/charts/series-types/bar/spacing/main.js
 create mode 100644 vue-options-api-demos/charts/series-types/bar/spacing/main.vue
 create mode 100644 vue-options-api-demos/charts/series-types/bar/stacked-group/main.js
 create mode 100644 vue-options-api-demos/charts/series-types/bar/stacked-group/main.vue
 create mode 100644 vue-options-api-demos/charts/series-types/bar/stacked/main.js
 create mode 100644 vue-options-api-demos/charts/series-types/bar/stacked/main.vue
 create mode 100644 vue-options-api-demos/charts/series-types/line/basic/main.js
 create mode 100644 vue-options-api-demos/charts/series-types/line/basic/main.vue
 create mode 100644 vue-options-api-demos/charts/series-types/line/line-style/main.js
 create mode 100644 vue-options-api-demos/charts/series-types/line/line-style/main.vue
 create mode 100644 vue-options-api-demos/charts/series-types/line/vertical/main.js
 create mode 100644 vue-options-api-demos/charts/series-types/line/vertical/main.vue
 create mode 100644 vue-options-api-demos/charts/series-types/pie/basic/main.js
 create mode 100644 vue-options-api-demos/charts/series-types/pie/basic/main.vue
 create mode 100644 vue-options-api-demos/charts/shared/box-plot-data.json
 create mode 100644 vue-options-api-demos/charts/shared/bubble-data.json
 create mode 100644 vue-options-api-demos/charts/shared/covid-data.json
 create mode 100644 vue-options-api-demos/charts/shared/donut-series-data.json
 create mode 100644 vue-options-api-demos/charts/shared/funnel-data.json
 create mode 100644 vue-options-api-demos/charts/shared/polar-data.json
 create mode 100644 vue-options-api-demos/charts/shared/power-distribution-data.json
 create mode 100644 vue-options-api-demos/charts/shared/radar-data.json
 create mode 100644 vue-options-api-demos/charts/shared/range-data.json
 create mode 100644 vue-options-api-demos/charts/shared/sales-data.js
 create mode 100644 vue-options-api-demos/charts/shared/scatter-line-data.json
 create mode 100644 vue-options-api-demos/charts/shared/scatter-line-style-data.json
 create mode 100644 vue-options-api-demos/charts/shared/scatter-plot-data.json
 create mode 100644 vue-options-api-demos/charts/shared/stock-data-sample.js
 create mode 100644 vue-options-api-demos/charts/shared/stock-data.json
 create mode 100644 vue-options-api-demos/charts/shared/waterfall-data.json
 create mode 100644 vue-options-api-demos/charts/shared/weather-data.js
 create mode 100644 vue-options-api-demos/charts/sparkline/main.js
 create mode 100644 vue-options-api-demos/charts/sparkline/main.vue
 create mode 100644 vue-options-api-demos/charts/stock-chart/default/main.js
 create mode 100644 vue-options-api-demos/charts/stock-chart/default/main.vue
 create mode 100644 vue-options-api-demos/charts/stock-chart/default/stock-data.json
 create mode 100644 vue-options-api-demos/charts/stock-chart/filter-data/main.js
 create mode 100644 vue-options-api-demos/charts/stock-chart/filter-data/main.vue
 create mode 100644 vue-options-api-demos/charts/stock-chart/filter-data/stock-data.json
 create mode 100644 vue-options-api-demos/charts/stock-chart/multiple-panes/main.js
 create mode 100644 vue-options-api-demos/charts/stock-chart/multiple-panes/main.vue
 create mode 100644 vue-options-api-demos/charts/stock-chart/multiple-panes/stock-data.json
 create mode 100644 vue-options-api-demos/charts/styling/dimensions/main.js
 create mode 100644 vue-options-api-demos/charts/styling/dimensions/main.vue
 create mode 100644 vue-options-api-demos/charts/styling/pattern-fills/main.js
 create mode 100644 vue-options-api-demos/charts/styling/pattern-fills/main.vue
 create mode 100644 vue-options-api-demos/charts/styling/range/main.js
 create mode 100644 vue-options-api-demos/charts/styling/range/main.vue
 create mode 100644 vue-options-api-demos/common/adaptive-mode/main.js
 create mode 100644 vue-options-api-demos/common/adaptive-mode/main.vue
 create mode 100644 vue-options-api-demos/conversational-ui/ai-prompt/commands/main.js
 create mode 100644 vue-options-api-demos/conversational-ui/ai-prompt/commands/main.vue
 create mode 100644 vue-options-api-demos/conversational-ui/ai-prompt/custom-template/main.js
 create mode 100644 vue-options-api-demos/conversational-ui/ai-prompt/custom-template/main.vue
 create mode 100644 vue-options-api-demos/conversational-ui/ai-prompt/custom-toolbar/ai-data.js
 create mode 100644 vue-options-api-demos/conversational-ui/ai-prompt/custom-toolbar/main.js
 create mode 100644 vue-options-api-demos/conversational-ui/ai-prompt/custom-toolbar/main.vue
 create mode 100644 vue-options-api-demos/conversational-ui/ai-prompt/events/Logger.vue
 create mode 100644 vue-options-api-demos/conversational-ui/ai-prompt/events/main.js
 create mode 100644 vue-options-api-demos/conversational-ui/ai-prompt/events/main.vue
 create mode 100644 vue-options-api-demos/conversational-ui/ai-prompt/globalization/main.js
 create mode 100644 vue-options-api-demos/conversational-ui/ai-prompt/globalization/main.vue
 create mode 100644 vue-options-api-demos/conversational-ui/ai-prompt/overview/ai-data.js
 create mode 100644 vue-options-api-demos/conversational-ui/ai-prompt/overview/main.js
 create mode 100644 vue-options-api-demos/conversational-ui/ai-prompt/overview/main.vue
 create mode 100644 vue-options-api-demos/conversational-ui/ai-prompt/overview/overview-styles.css
 create mode 100644 vue-options-api-demos/conversational-ui/ai-prompt/suggestions/ai-data.js
 create mode 100644 vue-options-api-demos/conversational-ui/ai-prompt/suggestions/main.js
 create mode 100644 vue-options-api-demos/conversational-ui/ai-prompt/suggestions/main.vue
 create mode 100644 vue-options-api-demos/conversational-ui/getting-started/main.js
 create mode 100644 vue-options-api-demos/conversational-ui/getting-started/main.vue
 create mode 100644 vue-options-api-demos/conversational-ui/overview/main.js
 create mode 100644 vue-options-api-demos/conversational-ui/overview/main.vue
 create mode 100644 vue-options-api-demos/datatools/filter/basic-usage/main.js
 create mode 100644 vue-options-api-demos/datatools/filter/basic-usage/main.vue
 create mode 100644 vue-options-api-demos/datatools/filter/basic-usage/products.js
 create mode 100644 vue-options-api-demos/datatools/filter/custom-editors/built-in/CustomEnumFilter.vue
 create mode 100644 vue-options-api-demos/datatools/filter/custom-editors/built-in/main.js
 create mode 100644 vue-options-api-demos/datatools/filter/custom-editors/built-in/main.vue
 create mode 100644 vue-options-api-demos/datatools/filter/custom-editors/built-in/products.js
 create mode 100644 vue-options-api-demos/datatools/filter/custom-editors/custom-component/CustomComboBoxFilter.vue
 create mode 100644 vue-options-api-demos/datatools/filter/custom-editors/custom-component/CustomDropDownListFilter.vue
 create mode 100644 vue-options-api-demos/datatools/filter/custom-editors/custom-component/main.js
 create mode 100644 vue-options-api-demos/datatools/filter/custom-editors/custom-component/main.vue
 create mode 100644 vue-options-api-demos/datatools/filter/custom-editors/custom-component/products.js
 create mode 100644 vue-options-api-demos/datatools/filter/custom-operators/main.js
 create mode 100644 vue-options-api-demos/datatools/filter/custom-operators/main.vue
 create mode 100644 vue-options-api-demos/datatools/filter/custom-operators/products.js
 create mode 100644 vue-options-api-demos/datatools/filter/events/Logger.vue
 create mode 100644 vue-options-api-demos/datatools/filter/events/main.js
 create mode 100644 vue-options-api-demos/datatools/filter/events/main.vue
 create mode 100644 vue-options-api-demos/datatools/globalization/basic-usage/es.json
 create mode 100644 vue-options-api-demos/datatools/globalization/basic-usage/main.js
 create mode 100644 vue-options-api-demos/datatools/globalization/basic-usage/main.vue
 create mode 100644 vue-options-api-demos/datatools/globalization/rtl/main.js
 create mode 100644 vue-options-api-demos/datatools/globalization/rtl/main.vue
 create mode 100644 vue-options-api-demos/datatools/pager/basic-usage/Configurator.vue
 create mode 100644 vue-options-api-demos/datatools/pager/basic-usage/main.js
 create mode 100644 vue-options-api-demos/datatools/pager/basic-usage/main.vue
 create mode 100644 vue-options-api-demos/datatools/pager/basic-usage/products.js
 create mode 100644 vue-options-api-demos/datatools/pager/events/handling/main.js
 create mode 100644 vue-options-api-demos/datatools/pager/events/handling/main.vue
 create mode 100644 vue-options-api-demos/datatools/pager/events/prevent/main.js
 create mode 100644 vue-options-api-demos/datatools/pager/events/prevent/main.vue
 create mode 100644 vue-options-api-demos/datatools/pager/responsive/main.js
 create mode 100644 vue-options-api-demos/datatools/pager/responsive/main.vue
 create mode 100644 vue-options-api-demos/datatools/pager/template/PagerTemplate.vue
 create mode 100644 vue-options-api-demos/datatools/pager/template/main.js
 create mode 100644 vue-options-api-demos/datatools/pager/template/main.vue
 create mode 100644 vue-options-api-demos/datatools/shared/products.js
 create mode 100644 vue-options-api-demos/datatools/tsconfig.json
 create mode 100644 vue-options-api-demos/dateinputs/basic/main.js
 create mode 100644 vue-options-api-demos/dateinputs/basic/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/calendar/activeview/main.js
 create mode 100644 vue-options-api-demos/dateinputs/calendar/activeview/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/calendar/basic/main.js
 create mode 100644 vue-options-api-demos/dateinputs/calendar/basic/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/calendar/custom/cell/Cell.vue
 create mode 100644 vue-options-api-demos/dateinputs/calendar/custom/cell/main.js
 create mode 100644 vue-options-api-demos/dateinputs/calendar/custom/cell/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/calendar/custom/htmlcell/Cell.vue
 create mode 100644 vue-options-api-demos/dateinputs/calendar/custom/htmlcell/main.js
 create mode 100644 vue-options-api-demos/dateinputs/calendar/custom/htmlcell/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/calendar/custom/title/Title.vue
 create mode 100644 vue-options-api-demos/dateinputs/calendar/custom/title/main.js
 create mode 100644 vue-options-api-demos/dateinputs/calendar/custom/title/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/calendar/dateranges/main.js
 create mode 100644 vue-options-api-demos/dateinputs/calendar/dateranges/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/calendar/dates/focused/main.js
 create mode 100644 vue-options-api-demos/dateinputs/calendar/dates/focused/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/calendar/dates/multiple/main.js
 create mode 100644 vue-options-api-demos/dateinputs/calendar/dates/multiple/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/calendar/dates/range/main.js
 create mode 100644 vue-options-api-demos/dateinputs/calendar/dates/range/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/calendar/dates/selected/main.js
 create mode 100644 vue-options-api-demos/dateinputs/calendar/dates/selected/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/calendar/disabled/main.js
 create mode 100644 vue-options-api-demos/dateinputs/calendar/disabled/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/calendar/json/main.js
 create mode 100644 vue-options-api-demos/dateinputs/calendar/json/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/calendar/keyboard/main.js
 create mode 100644 vue-options-api-demos/dateinputs/calendar/keyboard/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/calendar/multipleviews/main.js
 create mode 100644 vue-options-api-demos/dateinputs/calendar/multipleviews/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/calendar/reverse-range/main.js
 create mode 100644 vue-options-api-demos/dateinputs/calendar/reverse-range/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/calendar/viewdepth/main.js
 create mode 100644 vue-options-api-demos/dateinputs/calendar/viewdepth/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/calendar/week-numbers/main.js
 create mode 100644 vue-options-api-demos/dateinputs/calendar/week-numbers/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/common/es.json
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/appearance/configurator/DateInputsStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/appearance/configurator/main.js
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/appearance/configurator/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/appearance/fill-mode/main.js
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/appearance/fill-mode/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/appearance/rounded/main.js
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/appearance/rounded/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/appearance/size/main.js
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/appearance/size/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/basic/main.js
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/basic/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/date-ranges/basic/main.js
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/date-ranges/basic/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/date-ranges/time/main.js
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/date-ranges/time/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/disabled/main.js
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/disabled/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/floating-label/main.js
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/floating-label/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/formats/main.js
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/formats/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/forms/basic/main.js
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/forms/basic/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/forms/custom-message/main.js
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/forms/custom-message/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/forms/disable-styles/main.js
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/forms/disable-styles/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/forms/override/main.js
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/forms/override/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/incremental-steps/main.js
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/incremental-steps/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/input-mode/main.js
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/input-mode/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/keyboard/main.js
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/keyboard/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/placeholders/main.js
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/placeholders/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/spin-buttons/main.js
 create mode 100644 vue-options-api-demos/dateinputs/dateinput/spin-buttons/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/appearance/configurator/DateInputsStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/appearance/configurator/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/appearance/configurator/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/appearance/fill-mode/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/appearance/fill-mode/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/appearance/rounded/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/appearance/rounded/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/appearance/size/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/appearance/size/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/controlled/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/controlled/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/custom/calendar/CustomCalendar.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/custom/calendar/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/custom/calendar/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/custom/dateinput/CustomDateInput.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/custom/dateinput/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/custom/dateinput/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/custom/popup/CustomPopup.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/custom/popup/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/custom/popup/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/custom/toggle/CustomToggleButton.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/custom/toggle/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/custom/toggle/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/datelimits/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/datelimits/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/default/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/default/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/defaultpopup/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/defaultpopup/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/disabled/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/disabled/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/events/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/events/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/floating-label/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/floating-label/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/focused/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/focused/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/formats/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/formats/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/forms/basic/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/forms/basic/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/forms/custom-message/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/forms/custom-message/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/forms/disable-styles/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/forms/disable-styles/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/forms/override/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/forms/override/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/gettingstarted/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/gettingstarted/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/input-mode/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/input-mode/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/json/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/json/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/keyboard/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/keyboard/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/overview/es.json
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/overview/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/overview/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/placeholders/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/placeholders/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/popup-state/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/popup-state/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/weeknum/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datepicker/weeknum/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/controlled/main.js
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/controlled/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/controlled/show/main.js
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/controlled/show/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/custom/calendar/customCalendar.vue
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/custom/calendar/main.js
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/custom/calendar/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/custom/dateinput/customEndDateInput.vue
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/custom/dateinput/customStartDateInput.vue
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/custom/dateinput/main.js
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/custom/dateinput/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/custom/popup/main.js
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/custom/popup/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/default/popup/main.js
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/default/popup/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/default/value/main.js
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/default/value/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/disabled/main.js
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/disabled/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/events/Logger.vue
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/events/main.js
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/events/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/focused/main.js
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/focused/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/input-mode/main.js
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/input-mode/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/keyboard/main.js
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/keyboard/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/overview/main.js
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/overview/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/ranges/main.js
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/ranges/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/reverse/basic/main.js
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/reverse/basic/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/reverse/swap/main.js
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/reverse/swap/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/settings/calendar/main.js
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/settings/calendar/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/settings/dateinputs/main.js
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/settings/dateinputs/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/settings/popup/main.js
 create mode 100644 vue-options-api-demos/dateinputs/daterangepicker/settings/popup/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/.DS_Store
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/appearance/configurator/DateInputsStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/appearance/configurator/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/appearance/configurator/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/appearance/fill-mode/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/appearance/fill-mode/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/appearance/rounded/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/appearance/rounded/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/appearance/size/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/appearance/size/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/controlled/show/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/controlled/show/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/controlled/value/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/controlled/value/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/custom/.DS_Store
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/custom/calendar/CustomCalendar.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/custom/calendar/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/custom/calendar/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/custom/dateinput/CustomDateInput.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/custom/dateinput/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/custom/dateinput/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/custom/popup/CustomPopup.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/custom/popup/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/custom/popup/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/default/show/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/default/show/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/default/value/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/default/value/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/disabled/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/disabled/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/events/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/events/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/floating-label/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/floating-label/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/focused/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/focused/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/formats/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/formats/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/forms/basic/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/forms/basic/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/forms/custom-message/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/forms/custom-message/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/forms/disable-styles/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/forms/disable-styles/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/forms/override/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/forms/override/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/input-mode/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/input-mode/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/json/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/json/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/keyboard/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/keyboard/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/overview/basic/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/overview/basic/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/placeholders/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/placeholders/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/ranges/date/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/ranges/date/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/ranges/time/main.js
 create mode 100644 vue-options-api-demos/dateinputs/datetimepicker/ranges/time/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/floating-label/main.js
 create mode 100644 vue-options-api-demos/dateinputs/floating-label/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/globalization/es.json
 create mode 100644 vue-options-api-demos/dateinputs/globalization/main.js
 create mode 100644 vue-options-api-demos/dateinputs/globalization/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/multiviewcalendar/keyboard/main.js
 create mode 100644 vue-options-api-demos/dateinputs/multiviewcalendar/keyboard/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/appearance/configurator/DateInputsStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/appearance/configurator/main.js
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/appearance/configurator/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/appearance/fill-mode/main.js
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/appearance/fill-mode/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/appearance/rounded/main.js
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/appearance/rounded/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/appearance/size/main.js
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/appearance/size/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/controlled-show/main.js
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/controlled-show/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/controlled-value/main.js
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/controlled-value/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/custom/dateinput/CustomDateInput.vue
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/custom/dateinput/main.js
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/custom/dateinput/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/custom/popup/CustomPopup.vue
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/custom/popup/main.js
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/custom/popup/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/default-show/main.js
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/default-show/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/default-value/main.js
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/default-value/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/disabled/main.js
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/disabled/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/events/main.js
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/events/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/floating-label/main.js
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/floating-label/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/formats/main.js
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/formats/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/forms/basic/main.js
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/forms/basic/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/forms/custom-message/main.js
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/forms/custom-message/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/forms/disable-styles/main.js
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/forms/disable-styles/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/forms/override/main.js
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/forms/override/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/incremental/main.js
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/incremental/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/input-mode/main.js
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/input-mode/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/json/main.js
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/json/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/keyboard/main.js
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/keyboard/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/overview/basic/main.js
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/overview/basic/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/placeholders/main.js
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/placeholders/main.vue
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/time-ranges/main.js
 create mode 100644 vue-options-api-demos/dateinputs/timepicker/time-ranges/main.vue
 create mode 100644 vue-options-api-demos/dialogs/dialog/action-buttons/main.js
 create mode 100644 vue-options-api-demos/dialogs/dialog/action-buttons/main.vue
 create mode 100644 vue-options-api-demos/dialogs/dialog/dimetions/main.js
 create mode 100644 vue-options-api-demos/dialogs/dialog/dimetions/main.vue
 create mode 100644 vue-options-api-demos/dialogs/dialog/keyboard/main.js
 create mode 100644 vue-options-api-demos/dialogs/dialog/keyboard/main.vue
 create mode 100644 vue-options-api-demos/dialogs/dialog/overview/main.js
 create mode 100644 vue-options-api-demos/dialogs/dialog/overview/main.vue
 create mode 100644 vue-options-api-demos/dialogs/dialog/rtl/main.js
 create mode 100644 vue-options-api-demos/dialogs/dialog/rtl/main.vue
 create mode 100644 vue-options-api-demos/dialogs/dialog/title/basic/main.js
 create mode 100644 vue-options-api-demos/dialogs/dialog/title/basic/main.vue
 create mode 100644 vue-options-api-demos/dialogs/dialog/title/no-title/main.js
 create mode 100644 vue-options-api-demos/dialogs/dialog/title/no-title/main.vue
 create mode 100644 vue-options-api-demos/dialogs/dialog/title/title-template/main.js
 create mode 100644 vue-options-api-demos/dialogs/dialog/title/title-template/main.vue
 create mode 100644 vue-options-api-demos/dialogs/dialog/visibility/main.js
 create mode 100644 vue-options-api-demos/dialogs/dialog/visibility/main.vue
 create mode 100644 vue-options-api-demos/dialogs/overview/main.js
 create mode 100644 vue-options-api-demos/dialogs/overview/main.vue
 create mode 100644 vue-options-api-demos/dialogs/window/basic/main.js
 create mode 100644 vue-options-api-demos/dialogs/window/basic/main.vue
 create mode 100644 vue-options-api-demos/dialogs/window/controlled/main.js
 create mode 100644 vue-options-api-demos/dialogs/window/controlled/main.vue
 create mode 100644 vue-options-api-demos/dialogs/window/dimensions/main.js
 create mode 100644 vue-options-api-demos/dialogs/window/dimensions/main.vue
 create mode 100644 vue-options-api-demos/dialogs/window/dragging/main.js
 create mode 100644 vue-options-api-demos/dialogs/window/dragging/main.vue
 create mode 100644 vue-options-api-demos/dialogs/window/events/main.js
 create mode 100644 vue-options-api-demos/dialogs/window/events/main.vue
 create mode 100644 vue-options-api-demos/dialogs/window/hide-buttons/main.js
 create mode 100644 vue-options-api-demos/dialogs/window/hide-buttons/main.vue
 create mode 100644 vue-options-api-demos/dialogs/window/minimize-fullscreen/main.js
 create mode 100644 vue-options-api-demos/dialogs/window/minimize-fullscreen/main.vue
 create mode 100644 vue-options-api-demos/dialogs/window/positioning/main.js
 create mode 100644 vue-options-api-demos/dialogs/window/positioning/main.vue
 create mode 100644 vue-options-api-demos/dialogs/window/resizable/main.js
 create mode 100644 vue-options-api-demos/dialogs/window/resizable/main.vue
 create mode 100644 vue-options-api-demos/dialogs/window/title-basic/main.js
 create mode 100644 vue-options-api-demos/dialogs/window/title-basic/main.vue
 create mode 100644 vue-options-api-demos/dialogs/window/title-component/Title.vue
 create mode 100644 vue-options-api-demos/dialogs/window/title-component/main.js
 create mode 100644 vue-options-api-demos/dialogs/window/title-component/main.vue
 create mode 100644 vue-options-api-demos/dialogs/window/title-no/main.js
 create mode 100644 vue-options-api-demos/dialogs/window/title-no/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/appearance/configurator/DropDownStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/appearance/configurator/main.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/appearance/configurator/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/appearance/fill-mode/main.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/appearance/fill-mode/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/appearance/rounded/main.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/appearance/rounded/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/appearance/size/main.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/appearance/size/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/basic/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/basic/main.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/basic/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/bindings/arrays/main.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/bindings/arrays/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/bindings/datasets/main.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/bindings/datasets/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/bindings/value/main.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/bindings/value/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/common/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/filtering/basic/main.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/filtering/basic/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/filtering/loading/main.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/filtering/loading/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/filtering/minfilter/main.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/filtering/minfilter/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/forms/basic/main.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/forms/basic/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/forms/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/forms/custom-message/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/forms/custom-message/main.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/forms/custom-message/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/forms/disable-styles/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/forms/disable-styles/main.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/forms/disable-styles/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/forms/override/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/forms/override/main.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/forms/override/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/grouping/basic/grouping-data.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/grouping/basic/main.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/grouping/basic/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-custom/GroupHeaderItemRender.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-custom/ItemRender.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-custom/StickyHeaderRender.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-custom/grouping-data.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-custom/main.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-custom/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-filtering/grouping-data.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-filtering/main.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-filtering/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/header-footer/FooterRender.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/header-footer/HeaderRender.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/header-footer/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/header-footer/main.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/header-footer/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/item-render/ItemRender.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/item-render/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/item-render/main.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/item-render/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/keyboard-navigation/main.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/keyboard-navigation/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/nodata-render/NoDataRender.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/nodata-render/main.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/nodata-render/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/suggest/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/suggest/main.js
 create mode 100644 vue-options-api-demos/dropdowns/autocomplete/suggest/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/adaptive-rendering-grouping/grouping-data.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/adaptive-rendering-grouping/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/adaptive-rendering-grouping/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/adaptive-rendering/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/adaptive-rendering/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/appearance/configurator/DropDownStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/appearance/configurator/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/appearance/configurator/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/appearance/fill-mode/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/appearance/fill-mode/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/appearance/rounded/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/appearance/rounded/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/appearance/size/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/appearance/size/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/basic/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/basic/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/bindings/arrays/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/bindings/arrays/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/bindings/datasets/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/bindings/datasets/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/bindings/value-primitive/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/bindings/value-primitive/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/bindings/value/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/bindings/value/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/cascading/data.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/cascading/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/cascading/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/common/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/custom-values/object/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/custom-values/object/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/custom-values/primitive/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/custom-values/primitive/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/filtering/basic/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/filtering/basic/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/filtering/loading/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/filtering/loading/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/filtering/minfilter/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/filtering/minfilter/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/filtering/remote/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/filtering/remote/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/forms/basic/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/forms/basic/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/forms/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/forms/custom-message/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/forms/custom-message/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/forms/custom-message/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/forms/disable-styles/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/forms/disable-styles/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/forms/disable-styles/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/forms/override/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/forms/override/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/forms/override/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/grouping/basic/grouping-data.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/grouping/basic/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/grouping/basic/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/grouping/custom/GroupHeaderItemRender.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/grouping/custom/ItemRender.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/grouping/custom/StickyHeaderRender.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/grouping/custom/grouping-data.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/grouping/custom/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/grouping/custom/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/grouping/filtering/grouping-data.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/grouping/filtering/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/grouping/filtering/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/grouping/virtualization/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/grouping/virtualization/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/header-footer/FooterRender.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/header-footer/HeaderRender.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/header-footer/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/header-footer/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/header-footer/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/item-render/ItemRender.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/item-render/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/item-render/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/item-render/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/keyboard-navigation/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/keyboard-navigation/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/nodata-render/NoDataRender.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/nodata-render/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/nodata-render/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/suggest/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/suggest/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/suggest/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/virtualization/basic/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/virtualization/basic/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/combobox/virtualization/filtering/main.js
 create mode 100644 vue-options-api-demos/dropdowns/combobox/virtualization/filtering/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/common/es.json
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/adaptive-rendering-grouping/grouping-data.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/adaptive-rendering-grouping/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/adaptive-rendering-grouping/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/adaptive-rendering/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/adaptive-rendering/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/appearance/configurator/DropDownStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/appearance/configurator/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/appearance/configurator/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/appearance/fill-mode/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/appearance/fill-mode/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/appearance/rounded/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/appearance/rounded/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/appearance/size/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/appearance/size/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/basic/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/basic/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/binding/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/binding/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/cascading/data.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/cascading/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/cascading/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/common/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/default-item/basic/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/default-item/basic/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/default-item/object-values/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/default-item/object-values/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/events/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/events/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/filtering/basic/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/filtering/basic/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/filtering/delay/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/filtering/delay/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/filtering/minfilter/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/filtering/minfilter/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/filtering/remote-data/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/filtering/remote-data/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/forms/basic/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/forms/basic/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/forms/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/forms/custom-message/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/forms/custom-message/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/forms/custom-message/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/forms/disable-styles/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/forms/disable-styles/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/forms/disable-styles/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/forms/override/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/forms/override/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/forms/override/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/grouping/basic/grouping-data.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/grouping/basic/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/grouping/basic/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/grouping/custom/GroupHeaderItemRender.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/grouping/custom/ItemRender.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/grouping/custom/StickyHeaderRender.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/grouping/custom/grouping-data.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/grouping/custom/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/grouping/custom/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/grouping/filtering/grouping-data.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/grouping/filtering/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/grouping/filtering/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/grouping/virtualization/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/grouping/virtualization/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/header-footer/FooterRender.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/header-footer/HeaderRender.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/header-footer/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/header-footer/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/header-footer/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/item-render/ItemRender.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/item-render/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/item-render/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/item-render/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/keyboard/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/keyboard/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/nodata-render/NoDataRender.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/nodata-render/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/nodata-render/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/primitive-value/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/primitive-value/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/value-binding/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/value-binding/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/value-field/main.jsx
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/value-primitive/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/value-primitive/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/value-render/ValueRender.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/value-render/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/value-render/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/value-render/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/virtualization-filtering/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/virtualization-filtering/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/virtualization/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdownlist/virtualization/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/adaptive-rendering/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/adaptive-rendering/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/adaptive-rendering/tree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/adaptive-rendering/tree-data.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/appearance/configurator/DropDownStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/appearance/configurator/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/appearance/configurator/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/appearance/configurator/tree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/appearance/configurator/tree-data.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/appearance/fill-mode/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/appearance/fill-mode/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/appearance/fill-mode/tree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/appearance/fill-mode/tree-data.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/appearance/rounded/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/appearance/rounded/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/appearance/rounded/tree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/appearance/rounded/tree-data.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/appearance/size/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/appearance/size/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/appearance/size/tree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/appearance/size/tree-data.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/basic/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/basic/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/basic/tree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/basic/tree-data.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/filtering-loading/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/filtering-loading/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/filtering-loading/tree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/filtering-loading/tree-data.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/filtering/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/filtering/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/filtering/tree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/filtering/tree-data.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/form/basic/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/form/basic/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/form/basic/tree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/form/custom-message/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/form/custom-message/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/form/custom-message/tree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/form/disabled-styles/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/form/disabled-styles/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/form/disabled-styles/tree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/form/override/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/form/override/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/form/override/tree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/header-footer/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/header-footer/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/header-footer/tree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/header-footer/tree-data.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/item-template/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/item-template/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/item-template/tree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/item-template/tree-data.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/no-data/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/no-data/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/no-data/tree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/overview/main.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/overview/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/overview/tree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/dropdowntree/overview/tree-data.js
 create mode 100644 vue-options-api-demos/dropdowns/globalization/es.json
 create mode 100644 vue-options-api-demos/dropdowns/globalization/main.js
 create mode 100644 vue-options-api-demos/dropdowns/globalization/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/label/main.js
 create mode 100644 vue-options-api-demos/dropdowns/label/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/label/multiselecttree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/label/tree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/label/tree-data.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/adaptive-rendering-grouping/grouping-data.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/adaptive-rendering-grouping/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/adaptive-rendering-grouping/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/adaptive-rendering/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/adaptive-rendering/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/allow-custom-object-data/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/allow-custom-object-data/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/allow-custom-values/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/allow-custom-values/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/appearance/configurator/DropDownStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/appearance/configurator/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/appearance/configurator/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/appearance/fill-mode/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/appearance/fill-mode/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/appearance/rounded/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/appearance/rounded/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/appearance/size/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/appearance/size/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/basic/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/basic/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/binding/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/binding/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/complex-value/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/complex-value/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/controlled/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/controlled/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/events/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/events/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/events/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/filtering/basic/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/filtering/basic/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/filtering/basic/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/filtering/minfilter/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/filtering/minfilter/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/filtering/minfilter/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/filtering/virtualization-remote-data/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/filtering/virtualization-remote-data/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/filtering/with-delay/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/filtering/with-delay/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/filtering/with-delay/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/forms/basic/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/forms/basic/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/forms/basic/shop.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/forms/custom-message/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/forms/custom-message/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/forms/custom-message/shop.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/forms/disable-styles/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/forms/disable-styles/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/forms/disable-styles/shop.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/forms/override/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/forms/override/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/forms/override/shop.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/grouping/basic/grouping-data.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/grouping/basic/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/grouping/basic/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/grouping/custom/GroupHeaderItemRender.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/grouping/custom/ItemRender.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/grouping/custom/StickyHeaderRender.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/grouping/custom/grouping-data.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/grouping/custom/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/grouping/custom/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/grouping/filtering/grouping-data.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/grouping/filtering/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/grouping/filtering/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/grouping/virtualization/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/grouping/virtualization/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/header-footer/FooterRender.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/header-footer/HeaderRender.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/header-footer/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/header-footer/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/header-footer/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/item-render/ItemRender.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/item-render/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/item-render/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/item-render/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/nodata-render/NoDataRender.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/nodata-render/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/nodata-render/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/summary-tag/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/summary-tag/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/summary-tag/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/tags/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/tags/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/tags/styles.css
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/value-primitive/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/value-primitive/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/virtualization/basic/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/virtualization/basic/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/virtualization/filtering/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselect/virtualization/filtering/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/adaptive-rendering/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/adaptive-rendering/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/adaptive-rendering/multiselecttree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/adaptive-rendering/tree-data.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/appearance/configurator/DropDownStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/appearance/configurator/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/appearance/configurator/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/appearance/configurator/multiselecttree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/appearance/configurator/tree-data.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/appearance/fill-mode/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/appearance/fill-mode/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/appearance/fill-mode/multiselecttree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/appearance/fill-mode/tree-data.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/appearance/rounded/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/appearance/rounded/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/appearance/rounded/multiselecttree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/appearance/rounded/tree-data.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/appearance/size/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/appearance/size/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/appearance/size/multiselecttree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/appearance/size/tree-data.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/basic/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/basic/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/basic/multiselecttree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/basic/tree-data.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/binding/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/binding/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/binding/multiselecttree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/binding/tree-data.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/controlled/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/controlled/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/controlled/multiselecttree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/controlled/tree-data.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/custom-rendering/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/custom-rendering/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/custom-rendering/multiselecttree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/custom-rendering/tree-files-data.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/filtering-with-delay/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/filtering-with-delay/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/filtering-with-delay/multiselecttree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/filtering-with-delay/tree-data.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/filtering/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/filtering/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/filtering/multiselecttree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/filtering/tree-data.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/forms/basic/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/forms/basic/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/forms/basic/multiselecttree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/forms/custom-message/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/forms/custom-message/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/forms/custom-message/multiselecttree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/forms/disable-styles/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/forms/disable-styles/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/forms/disable-styles/multiselecttree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/forms/override/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/forms/override/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/forms/override/multiselecttree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/header-footer/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/header-footer/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/header-footer/multiselecttree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/header-footer/tree-data.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/no-data/main.js
 create mode 100644 vue-options-api-demos/dropdowns/multiselecttree/no-data/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/overview/main.js
 create mode 100644 vue-options-api-demos/dropdowns/overview/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/overview/multiselecttree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/overview/tree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/overview/tree-data.js
 create mode 100644 vue-options-api-demos/dropdowns/rtl/main.js
 create mode 100644 vue-options-api-demos/dropdowns/rtl/main.vue
 create mode 100644 vue-options-api-demos/dropdowns/rtl/multiselecttree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/rtl/tree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/rtl/tree-data.js
 create mode 100644 vue-options-api-demos/dropdowns/shared/DropDownStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/dropdowns/shared/countries.js
 create mode 100644 vue-options-api-demos/dropdowns/shared/es.json
 create mode 100644 vue-options-api-demos/dropdowns/shared/multiselecttree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/shared/shop.js
 create mode 100644 vue-options-api-demos/dropdowns/shared/tree-data-operations.js
 create mode 100644 vue-options-api-demos/dropdowns/shared/tree-data.js
 create mode 100644 vue-options-api-demos/dropdowns/shared/tree-files-data.js
 create mode 100644 vue-options-api-demos/editor/all-tools/content.js
 create mode 100644 vue-options-api-demos/editor/all-tools/main.js
 create mode 100644 vue-options-api-demos/editor/all-tools/main.vue
 create mode 100644 vue-options-api-demos/editor/controlled-value-doc/main.js
 create mode 100644 vue-options-api-demos/editor/controlled-value-doc/main.vue
 create mode 100644 vue-options-api-demos/editor/controlled-value-string/main.js
 create mode 100644 vue-options-api-demos/editor/controlled-value-string/main.vue
 create mode 100644 vue-options-api-demos/editor/edit-built-in-tools/content-basic.js
 create mode 100644 vue-options-api-demos/editor/edit-built-in-tools/main.js
 create mode 100644 vue-options-api-demos/editor/edit-built-in-tools/main.vue
 create mode 100644 vue-options-api-demos/editor/events/Logger.vue
 create mode 100644 vue-options-api-demos/editor/events/content.js
 create mode 100644 vue-options-api-demos/editor/events/main.js
 create mode 100644 vue-options-api-demos/editor/events/main.vue
 create mode 100644 vue-options-api-demos/editor/find-replace/content-overview.js
 create mode 100644 vue-options-api-demos/editor/find-replace/main.js
 create mode 100644 vue-options-api-demos/editor/find-replace/main.vue
 create mode 100644 vue-options-api-demos/editor/get-started/content.js
 create mode 100644 vue-options-api-demos/editor/get-started/main.js
 create mode 100644 vue-options-api-demos/editor/get-started/main.vue
 create mode 100644 vue-options-api-demos/editor/gets-and-sets-html/content.js
 create mode 100644 vue-options-api-demos/editor/gets-and-sets-html/main.js
 create mode 100644 vue-options-api-demos/editor/gets-and-sets-html/main.vue
 create mode 100644 vue-options-api-demos/editor/globalization/content.js
 create mode 100644 vue-options-api-demos/editor/globalization/deMessages.js
 create mode 100644 vue-options-api-demos/editor/globalization/main.js
 create mode 100644 vue-options-api-demos/editor/globalization/main.vue
 create mode 100644 vue-options-api-demos/editor/markdown/main.js
 create mode 100644 vue-options-api-demos/editor/markdown/main.vue
 create mode 100644 vue-options-api-demos/editor/markdown/markdown.js
 create mode 100644 vue-options-api-demos/editor/overview/content-overview.js
 create mode 100644 vue-options-api-demos/editor/overview/main.js
 create mode 100644 vue-options-api-demos/editor/overview/main.vue
 create mode 100644 vue-options-api-demos/editor/paste/main.js
 create mode 100644 vue-options-api-demos/editor/paste/main.vue
 create mode 100644 vue-options-api-demos/editor/plugins/placeholder/main.js
 create mode 100644 vue-options-api-demos/editor/plugins/placeholder/main.vue
 create mode 100644 vue-options-api-demos/editor/plugins/placeholder/placeholder.js
 create mode 100644 vue-options-api-demos/editor/plugins/readonly/content-basic.js
 create mode 100644 vue-options-api-demos/editor/plugins/readonly/main.js
 create mode 100644 vue-options-api-demos/editor/plugins/readonly/main.vue
 create mode 100644 vue-options-api-demos/editor/rendering-mode/main.js
 create mode 100644 vue-options-api-demos/editor/rendering-mode/main.vue
 create mode 100644 vue-options-api-demos/editor/rendering-mode/styles.css
 create mode 100644 vue-options-api-demos/editor/resizing/editor/content.js
 create mode 100644 vue-options-api-demos/editor/resizing/editor/main.js
 create mode 100644 vue-options-api-demos/editor/resizing/editor/main.vue
 create mode 100644 vue-options-api-demos/editor/resizing/images/content-overview.js
 create mode 100644 vue-options-api-demos/editor/resizing/images/main.js
 create mode 100644 vue-options-api-demos/editor/resizing/images/main.vue
 create mode 100644 vue-options-api-demos/editor/rtl/content.js
 create mode 100644 vue-options-api-demos/editor/rtl/main.js
 create mode 100644 vue-options-api-demos/editor/rtl/main.vue
 create mode 100644 vue-options-api-demos/editor/schema-custom/content.js
 create mode 100644 vue-options-api-demos/editor/schema-custom/main.js
 create mode 100644 vue-options-api-demos/editor/schema-custom/main.vue
 create mode 100644 vue-options-api-demos/editor/schema-custom/schema-utils.js
 create mode 100644 vue-options-api-demos/editor/schema-custom/schema.js
 create mode 100644 vue-options-api-demos/editor/schema-edit/main.js
 create mode 100644 vue-options-api-demos/editor/schema-edit/main.vue
 create mode 100644 vue-options-api-demos/editor/schema-edit/new-mark.js
 create mode 100644 vue-options-api-demos/editor/schema-edit/new-node.js
 create mode 100644 vue-options-api-demos/editor/selection/cell/content.js
 create mode 100644 vue-options-api-demos/editor/selection/cell/main.js
 create mode 100644 vue-options-api-demos/editor/selection/cell/main.vue
 create mode 100644 vue-options-api-demos/editor/selection/get-html/content.js
 create mode 100644 vue-options-api-demos/editor/selection/get-html/main.js
 create mode 100644 vue-options-api-demos/editor/selection/get-html/main.vue
 create mode 100644 vue-options-api-demos/editor/selection/node/content.js
 create mode 100644 vue-options-api-demos/editor/selection/node/main.js
 create mode 100644 vue-options-api-demos/editor/selection/node/main.vue
 create mode 100644 vue-options-api-demos/editor/selection/select-all/content.js
 create mode 100644 vue-options-api-demos/editor/selection/select-all/main.js
 create mode 100644 vue-options-api-demos/editor/selection/select-all/main.vue
 create mode 100644 vue-options-api-demos/editor/selection/text/content.js
 create mode 100644 vue-options-api-demos/editor/selection/text/main.js
 create mode 100644 vue-options-api-demos/editor/selection/text/main.vue
 create mode 100644 vue-options-api-demos/editor/shared/content-basic.js
 create mode 100644 vue-options-api-demos/editor/shared/content-overview.js
 create mode 100644 vue-options-api-demos/editor/shared/content.js
 create mode 100644 vue-options-api-demos/editor/styling-iframe/content.js
 create mode 100644 vue-options-api-demos/editor/styling-iframe/main.js
 create mode 100644 vue-options-api-demos/editor/styling-iframe/main.vue
 create mode 100644 vue-options-api-demos/editor/tsconfig.json
 create mode 100644 vue-options-api-demos/excel/basic/main.js
 create mode 100644 vue-options-api-demos/excel/basic/main.vue
 create mode 100644 vue-options-api-demos/excel/basic/products.json
 create mode 100644 vue-options-api-demos/excel/cells/data/main.js
 create mode 100644 vue-options-api-demos/excel/cells/data/main.vue
 create mode 100644 vue-options-api-demos/excel/cells/data/products.json
 create mode 100644 vue-options-api-demos/excel/cells/footer/main.js
 create mode 100644 vue-options-api-demos/excel/cells/footer/main.vue
 create mode 100644 vue-options-api-demos/excel/cells/footer/products.json
 create mode 100644 vue-options-api-demos/excel/cells/group-footer/main.js
 create mode 100644 vue-options-api-demos/excel/cells/group-footer/main.vue
 create mode 100644 vue-options-api-demos/excel/cells/group-footer/products.json
 create mode 100644 vue-options-api-demos/excel/cells/group-header/main.js
 create mode 100644 vue-options-api-demos/excel/cells/group-header/main.vue
 create mode 100644 vue-options-api-demos/excel/cells/group-header/products.json
 create mode 100644 vue-options-api-demos/excel/cells/header-padding/main.js
 create mode 100644 vue-options-api-demos/excel/cells/header-padding/main.vue
 create mode 100644 vue-options-api-demos/excel/cells/header-padding/products.json
 create mode 100644 vue-options-api-demos/excel/cells/header/main.js
 create mode 100644 vue-options-api-demos/excel/cells/header/main.vue
 create mode 100644 vue-options-api-demos/excel/cells/header/products.json
 create mode 100644 vue-options-api-demos/excel/cells/padding/main.js
 create mode 100644 vue-options-api-demos/excel/cells/padding/main.vue
 create mode 100644 vue-options-api-demos/excel/cells/padding/products.json
 create mode 100644 vue-options-api-demos/excel/columns/footer/main.js
 create mode 100644 vue-options-api-demos/excel/columns/footer/main.vue
 create mode 100644 vue-options-api-demos/excel/columns/footer/products.json
 create mode 100644 vue-options-api-demos/excel/columns/group-footer/main.js
 create mode 100644 vue-options-api-demos/excel/columns/group-footer/main.vue
 create mode 100644 vue-options-api-demos/excel/columns/group-footer/products.json
 create mode 100644 vue-options-api-demos/excel/columns/group-header/main.js
 create mode 100644 vue-options-api-demos/excel/columns/group-header/main.vue
 create mode 100644 vue-options-api-demos/excel/columns/group-header/products.json
 create mode 100644 vue-options-api-demos/excel/columns/hidden/main.js
 create mode 100644 vue-options-api-demos/excel/columns/hidden/main.vue
 create mode 100644 vue-options-api-demos/excel/columns/hidden/products.json
 create mode 100644 vue-options-api-demos/excel/columns/locked/main.js
 create mode 100644 vue-options-api-demos/excel/columns/locked/main.vue
 create mode 100644 vue-options-api-demos/excel/columns/locked/products.json
 create mode 100644 vue-options-api-demos/excel/columns/multi/main.js
 create mode 100644 vue-options-api-demos/excel/columns/multi/main.vue
 create mode 100644 vue-options-api-demos/excel/columns/multi/products.json
 create mode 100644 vue-options-api-demos/excel/filtering/main.js
 create mode 100644 vue-options-api-demos/excel/filtering/main.vue
 create mode 100644 vue-options-api-demos/excel/filtering/products.json
 create mode 100644 vue-options-api-demos/excel/rtl/main.js
 create mode 100644 vue-options-api-demos/excel/rtl/main.vue
 create mode 100644 vue-options-api-demos/excel/rtl/products.json
 create mode 100644 vue-options-api-demos/excel/shared/products.json
 create mode 100644 vue-options-api-demos/excel/workbook/main.js
 create mode 100644 vue-options-api-demos/excel/workbook/main.vue
 create mode 100644 vue-options-api-demos/excel/workbook/products.json
 create mode 100644 vue-options-api-demos/form/advanced/changing/FormContent.vue
 create mode 100644 vue-options-api-demos/form/advanced/changing/FormNumericTextBox.vue
 create mode 100644 vue-options-api-demos/form/advanced/changing/main.js
 create mode 100644 vue-options-api-demos/form/advanced/changing/main.vue
 create mode 100644 vue-options-api-demos/form/advanced/dynamic-reset/FormContent.vue
 create mode 100644 vue-options-api-demos/form/advanced/dynamic-reset/FormInput.vue
 create mode 100644 vue-options-api-demos/form/advanced/dynamic-reset/main.js
 create mode 100644 vue-options-api-demos/form/advanced/dynamic-reset/main.vue
 create mode 100644 vue-options-api-demos/form/advanced/reading/FormContent.vue
 create mode 100644 vue-options-api-demos/form/advanced/reading/FormNumericTextBox.vue
 create mode 100644 vue-options-api-demos/form/advanced/reading/main.js
 create mode 100644 vue-options-api-demos/form/advanced/reading/main.vue
 create mode 100644 vue-options-api-demos/form/basic/FormContent.vue
 create mode 100644 vue-options-api-demos/form/basic/FormInput.vue
 create mode 100644 vue-options-api-demos/form/basic/main.js
 create mode 100644 vue-options-api-demos/form/basic/main.vue
 create mode 100644 vue-options-api-demos/form/custom-components/advanced/FormContent.vue
 create mode 100644 vue-options-api-demos/form/custom-components/advanced/FormInput.vue
 create mode 100644 vue-options-api-demos/form/custom-components/advanced/main.js
 create mode 100644 vue-options-api-demos/form/custom-components/advanced/main.vue
 create mode 100644 vue-options-api-demos/form/custom-components/advanced/validators.js
 create mode 100644 vue-options-api-demos/form/custom-components/basic/FormContent.vue
 create mode 100644 vue-options-api-demos/form/custom-components/basic/FormInput.vue
 create mode 100644 vue-options-api-demos/form/custom-components/basic/main.js
 create mode 100644 vue-options-api-demos/form/custom-components/basic/main.vue
 create mode 100644 vue-options-api-demos/form/fieldarrayvalidation/CommandCell.vue
 create mode 100644 vue-options-api-demos/form/fieldarrayvalidation/FormContent.vue
 create mode 100644 vue-options-api-demos/form/fieldarrayvalidation/FormGrid.vue
 create mode 100644 vue-options-api-demos/form/fieldarrayvalidation/main.js
 create mode 100644 vue-options-api-demos/form/fieldarrayvalidation/main.vue
 create mode 100644 vue-options-api-demos/form/fieldvalidation/FormContent.vue
 create mode 100644 vue-options-api-demos/form/fieldvalidation/FormInput.vue
 create mode 100644 vue-options-api-demos/form/fieldvalidation/main.js
 create mode 100644 vue-options-api-demos/form/fieldvalidation/main.vue
 create mode 100644 vue-options-api-demos/form/formvalidation/FormContent.vue
 create mode 100644 vue-options-api-demos/form/formvalidation/FormInput.vue
 create mode 100644 vue-options-api-demos/form/formvalidation/main.js
 create mode 100644 vue-options-api-demos/form/formvalidation/main.vue
 create mode 100644 vue-options-api-demos/form/guideline/checkboxes/FormCheckbox.vue
 create mode 100644 vue-options-api-demos/form/guideline/checkboxes/FormContent.vue
 create mode 100644 vue-options-api-demos/form/guideline/checkboxes/FormRadioGroup.vue
 create mode 100644 vue-options-api-demos/form/guideline/checkboxes/data.js
 create mode 100644 vue-options-api-demos/form/guideline/checkboxes/main.js
 create mode 100644 vue-options-api-demos/form/guideline/checkboxes/main.vue
 create mode 100644 vue-options-api-demos/form/guideline/checkboxes/validators.js
 create mode 100644 vue-options-api-demos/form/guideline/datepickers/FormContent.vue
 create mode 100644 vue-options-api-demos/form/guideline/datepickers/FormDateInput.vue
 create mode 100644 vue-options-api-demos/form/guideline/datepickers/FormDatePicker.vue
 create mode 100644 vue-options-api-demos/form/guideline/datepickers/FormDateTimePicker.vue
 create mode 100644 vue-options-api-demos/form/guideline/datepickers/FormTimePicker.vue
 create mode 100644 vue-options-api-demos/form/guideline/datepickers/main.js
 create mode 100644 vue-options-api-demos/form/guideline/datepickers/main.vue
 create mode 100644 vue-options-api-demos/form/guideline/datepickers/validators.js
 create mode 100644 vue-options-api-demos/form/guideline/disabled/FormContent.vue
 create mode 100644 vue-options-api-demos/form/guideline/disabled/FormInput.vue
 create mode 100644 vue-options-api-demos/form/guideline/disabled/FormMaskedTextBox.vue
 create mode 100644 vue-options-api-demos/form/guideline/disabled/main.js
 create mode 100644 vue-options-api-demos/form/guideline/disabled/main.vue
 create mode 100644 vue-options-api-demos/form/guideline/dropdowns/FormAutoComplete.vue
 create mode 100644 vue-options-api-demos/form/guideline/dropdowns/FormComboBox.vue
 create mode 100644 vue-options-api-demos/form/guideline/dropdowns/FormContent.vue
 create mode 100644 vue-options-api-demos/form/guideline/dropdowns/FormDropDownList.vue
 create mode 100644 vue-options-api-demos/form/guideline/dropdowns/FormMultiSelect.vue
 create mode 100644 vue-options-api-demos/form/guideline/dropdowns/data.js
 create mode 100644 vue-options-api-demos/form/guideline/dropdowns/main.js
 create mode 100644 vue-options-api-demos/form/guideline/dropdowns/main.vue
 create mode 100644 vue-options-api-demos/form/guideline/dropdowns/validators.js
 create mode 100644 vue-options-api-demos/form/guideline/errormessages/FormContent.vue
 create mode 100644 vue-options-api-demos/form/guideline/errormessages/FormInput.vue
 create mode 100644 vue-options-api-demos/form/guideline/errormessages/main.js
 create mode 100644 vue-options-api-demos/form/guideline/errormessages/main.vue
 create mode 100644 vue-options-api-demos/form/guideline/errormessages/validators.js
 create mode 100644 vue-options-api-demos/form/guideline/floating/FormContent.vue
 create mode 100644 vue-options-api-demos/form/guideline/floating/FormFloatingNumericTextBox.vue
 create mode 100644 vue-options-api-demos/form/guideline/floating/main.js
 create mode 100644 vue-options-api-demos/form/guideline/floating/main.vue
 create mode 100644 vue-options-api-demos/form/guideline/floating/validators.js
 create mode 100644 vue-options-api-demos/form/guideline/formbuttons/FormCheckbox.vue
 create mode 100644 vue-options-api-demos/form/guideline/formbuttons/FormContent.vue
 create mode 100644 vue-options-api-demos/form/guideline/formbuttons/FormInput.vue
 create mode 100644 vue-options-api-demos/form/guideline/formbuttons/main.js
 create mode 100644 vue-options-api-demos/form/guideline/formbuttons/main.vue
 create mode 100644 vue-options-api-demos/form/guideline/formbuttons/validators.js
 create mode 100644 vue-options-api-demos/form/guideline/formcomponents/FormCheckbox.vue
 create mode 100644 vue-options-api-demos/form/guideline/formcomponents/FormContent.vue
 create mode 100644 vue-options-api-demos/form/guideline/formcomponents/FormDatePicker.vue
 create mode 100644 vue-options-api-demos/form/guideline/formcomponents/FormInput.vue
 create mode 100644 vue-options-api-demos/form/guideline/formcomponents/FormMaskedTextBox.vue
 create mode 100644 vue-options-api-demos/form/guideline/formcomponents/FormNumericTextBox.vue
 create mode 100644 vue-options-api-demos/form/guideline/formcomponents/FormTextArea.vue
 create mode 100644 vue-options-api-demos/form/guideline/formcomponents/main.js
 create mode 100644 vue-options-api-demos/form/guideline/formcomponents/main.vue
 create mode 100644 vue-options-api-demos/form/guideline/formcomponents/validators.js
 create mode 100644 vue-options-api-demos/form/guideline/formvalidation/FormCheckbox.vue
 create mode 100644 vue-options-api-demos/form/guideline/formvalidation/FormContent.vue
 create mode 100644 vue-options-api-demos/form/guideline/formvalidation/FormInput.vue
 create mode 100644 vue-options-api-demos/form/guideline/formvalidation/main.js
 create mode 100644 vue-options-api-demos/form/guideline/formvalidation/main.vue
 create mode 100644 vue-options-api-demos/form/guideline/formvalidation/validators.js
 create mode 100644 vue-options-api-demos/form/guideline/groups/FormCheckbox.vue
 create mode 100644 vue-options-api-demos/form/guideline/groups/FormContent.vue
 create mode 100644 vue-options-api-demos/form/guideline/groups/FormInput.vue
 create mode 100644 vue-options-api-demos/form/guideline/groups/main.js
 create mode 100644 vue-options-api-demos/form/guideline/groups/main.vue
 create mode 100644 vue-options-api-demos/form/guideline/groups/validators.js
 create mode 100644 vue-options-api-demos/form/guideline/hints/FormContent.vue
 create mode 100644 vue-options-api-demos/form/guideline/hints/FormDatePicker.vue
 create mode 100644 vue-options-api-demos/form/guideline/hints/FormInput.vue
 create mode 100644 vue-options-api-demos/form/guideline/hints/main.js
 create mode 100644 vue-options-api-demos/form/guideline/hints/main.vue
 create mode 100644 vue-options-api-demos/form/guideline/hints/validators.js
 create mode 100644 vue-options-api-demos/form/guideline/horizontal/FormContent.vue
 create mode 100644 vue-options-api-demos/form/guideline/horizontal/FormInput.vue
 create mode 100644 vue-options-api-demos/form/guideline/horizontal/FormMaskedTextBox.vue
 create mode 100644 vue-options-api-demos/form/guideline/horizontal/main.js
 create mode 100644 vue-options-api-demos/form/guideline/horizontal/main.vue
 create mode 100644 vue-options-api-demos/form/guideline/horizontal/validators.js
 create mode 100644 vue-options-api-demos/form/guideline/inputs/FormContent.vue
 create mode 100644 vue-options-api-demos/form/guideline/inputs/FormInput.vue
 create mode 100644 vue-options-api-demos/form/guideline/inputs/FormMaskedTextBox.vue
 create mode 100644 vue-options-api-demos/form/guideline/inputs/FormNumericTextBox.vue
 create mode 100644 vue-options-api-demos/form/guideline/inputs/FormSlider.vue
 create mode 100644 vue-options-api-demos/form/guideline/inputs/FormTextArea.vue
 create mode 100644 vue-options-api-demos/form/guideline/inputs/main.js
 create mode 100644 vue-options-api-demos/form/guideline/inputs/main.vue
 create mode 100644 vue-options-api-demos/form/guideline/inputs/validators.js
 create mode 100644 vue-options-api-demos/form/guideline/optional/FormContent.vue
 create mode 100644 vue-options-api-demos/form/guideline/optional/FormFloatingNumericTextBox.vue
 create mode 100644 vue-options-api-demos/form/guideline/optional/FormMaskedTextBox.vue
 create mode 100644 vue-options-api-demos/form/guideline/optional/main.js
 create mode 100644 vue-options-api-demos/form/guideline/optional/main.vue
 create mode 100644 vue-options-api-demos/form/guideline/optional/validators.js
 create mode 100644 vue-options-api-demos/form/guideline/placeholder/FormContent.vue
 create mode 100644 vue-options-api-demos/form/guideline/placeholder/FormInput.vue
 create mode 100644 vue-options-api-demos/form/guideline/placeholder/main.js
 create mode 100644 vue-options-api-demos/form/guideline/placeholder/main.vue
 create mode 100644 vue-options-api-demos/form/guideline/placeholder/validators.js
 create mode 100644 vue-options-api-demos/form/guideline/uploads/FormContent.vue
 create mode 100644 vue-options-api-demos/form/guideline/uploads/FormUpload.vue
 create mode 100644 vue-options-api-demos/form/guideline/uploads/main.js
 create mode 100644 vue-options-api-demos/form/guideline/uploads/main.vue
 create mode 100644 vue-options-api-demos/form/labels/FloatingLabelFormInput.vue
 create mode 100644 vue-options-api-demos/form/labels/FormContent.vue
 create mode 100644 vue-options-api-demos/form/labels/LabelFormInput.vue
 create mode 100644 vue-options-api-demos/form/labels/main.js
 create mode 100644 vue-options-api-demos/form/labels/main.vue
 create mode 100644 vue-options-api-demos/form/layout/horizontal/FloatingLabelFormInput.vue
 create mode 100644 vue-options-api-demos/form/layout/horizontal/FormContent.vue
 create mode 100644 vue-options-api-demos/form/layout/horizontal/LabelFormInput.vue
 create mode 100644 vue-options-api-demos/form/layout/horizontal/main.js
 create mode 100644 vue-options-api-demos/form/layout/horizontal/main.vue
 create mode 100644 vue-options-api-demos/form/layout/vertical/FloatingLabelFormInput.vue
 create mode 100644 vue-options-api-demos/form/layout/vertical/FormContent.vue
 create mode 100644 vue-options-api-demos/form/layout/vertical/LabelFormInput.vue
 create mode 100644 vue-options-api-demos/form/layout/vertical/main.js
 create mode 100644 vue-options-api-demos/form/layout/vertical/main.vue
 create mode 100644 vue-options-api-demos/form/shared/CommandCell.vue
 create mode 100644 vue-options-api-demos/form/shared/FormAutoComplete.vue
 create mode 100644 vue-options-api-demos/form/shared/FormCheckbox.vue
 create mode 100644 vue-options-api-demos/form/shared/FormComboBox.vue
 create mode 100644 vue-options-api-demos/form/shared/FormDateInput.vue
 create mode 100644 vue-options-api-demos/form/shared/FormDatePicker.vue
 create mode 100644 vue-options-api-demos/form/shared/FormDateTimePicker.vue
 create mode 100644 vue-options-api-demos/form/shared/FormDropDownList.vue
 create mode 100644 vue-options-api-demos/form/shared/FormFloatingNumericTextBox.vue
 create mode 100644 vue-options-api-demos/form/shared/FormGrid.vue
 create mode 100644 vue-options-api-demos/form/shared/FormInput.vue
 create mode 100644 vue-options-api-demos/form/shared/FormMaskedTextBox.vue
 create mode 100644 vue-options-api-demos/form/shared/FormMultiSelect.vue
 create mode 100644 vue-options-api-demos/form/shared/FormNumericTextBox.vue
 create mode 100644 vue-options-api-demos/form/shared/FormRadioGroup.vue
 create mode 100644 vue-options-api-demos/form/shared/FormSlider.vue
 create mode 100644 vue-options-api-demos/form/shared/FormTextArea.vue
 create mode 100644 vue-options-api-demos/form/shared/FormTimePicker.vue
 create mode 100644 vue-options-api-demos/form/shared/FormUpload.vue
 create mode 100644 vue-options-api-demos/form/shared/data.js
 create mode 100644 vue-options-api-demos/form/shared/tree-data-operations.js
 create mode 100644 vue-options-api-demos/form/shared/validators.js
 create mode 100644 vue-options-api-demos/gauges/arc-gauge/color-ranges/main.js
 create mode 100644 vue-options-api-demos/gauges/arc-gauge/color-ranges/main.vue
 create mode 100644 vue-options-api-demos/gauges/arc-gauge/overview/main.js
 create mode 100644 vue-options-api-demos/gauges/arc-gauge/overview/main.vue
 create mode 100644 vue-options-api-demos/gauges/arc-gauge/scale-options/main.js
 create mode 100644 vue-options-api-demos/gauges/arc-gauge/scale-options/main.vue
 create mode 100644 vue-options-api-demos/gauges/circular-gauge/center-template/main.js
 create mode 100644 vue-options-api-demos/gauges/circular-gauge/center-template/main.vue
 create mode 100644 vue-options-api-demos/gauges/circular-gauge/color-ranges/main.js
 create mode 100644 vue-options-api-demos/gauges/circular-gauge/color-ranges/main.vue
 create mode 100644 vue-options-api-demos/gauges/circular-gauge/overview/main.js
 create mode 100644 vue-options-api-demos/gauges/circular-gauge/overview/main.vue
 create mode 100644 vue-options-api-demos/gauges/circular-gauge/scale-options/main.js
 create mode 100644 vue-options-api-demos/gauges/circular-gauge/scale-options/main.vue
 create mode 100644 vue-options-api-demos/gauges/export-options/to-image/main.js
 create mode 100644 vue-options-api-demos/gauges/export-options/to-image/main.vue
 create mode 100644 vue-options-api-demos/gauges/export-options/to-pdf/main.js
 create mode 100644 vue-options-api-demos/gauges/export-options/to-pdf/main.vue
 create mode 100644 vue-options-api-demos/gauges/export-options/to-svg/main.js
 create mode 100644 vue-options-api-demos/gauges/export-options/to-svg/main.vue
 create mode 100644 vue-options-api-demos/gauges/globalization/main.js
 create mode 100644 vue-options-api-demos/gauges/globalization/main.vue
 create mode 100644 vue-options-api-demos/gauges/linear-gauge/multiple-pointers/main.js
 create mode 100644 vue-options-api-demos/gauges/linear-gauge/multiple-pointers/main.vue
 create mode 100644 vue-options-api-demos/gauges/linear-gauge/orientation/main.js
 create mode 100644 vue-options-api-demos/gauges/linear-gauge/orientation/main.vue
 create mode 100644 vue-options-api-demos/gauges/linear-gauge/overview/main.js
 create mode 100644 vue-options-api-demos/gauges/linear-gauge/overview/main.vue
 create mode 100644 vue-options-api-demos/gauges/linear-gauge/scale-options/main.js
 create mode 100644 vue-options-api-demos/gauges/linear-gauge/scale-options/main.vue
 create mode 100644 vue-options-api-demos/gauges/linear-gauge/scale-ranges/main.js
 create mode 100644 vue-options-api-demos/gauges/linear-gauge/scale-ranges/main.vue
 create mode 100644 vue-options-api-demos/gauges/overview/main.js
 create mode 100644 vue-options-api-demos/gauges/overview/main.vue
 create mode 100644 vue-options-api-demos/gauges/radial-gauge/multiple-pointers/main.js
 create mode 100644 vue-options-api-demos/gauges/radial-gauge/multiple-pointers/main.vue
 create mode 100644 vue-options-api-demos/gauges/radial-gauge/overview/main.js
 create mode 100644 vue-options-api-demos/gauges/radial-gauge/overview/main.vue
 create mode 100644 vue-options-api-demos/gauges/radial-gauge/scale-options/main.js
 create mode 100644 vue-options-api-demos/gauges/radial-gauge/scale-options/main.vue
 create mode 100644 vue-options-api-demos/gauges/radial-gauge/scale-ranges/main.js
 create mode 100644 vue-options-api-demos/gauges/radial-gauge/scale-ranges/main.vue
 create mode 100644 vue-options-api-demos/gauges/rtl/main.js
 create mode 100644 vue-options-api-demos/gauges/rtl/main.vue
 create mode 100644 vue-options-api-demos/grid/basic/BudgetComponent.vue
 create mode 100644 vue-options-api-demos/grid/basic/ContactNameComponent.vue
 create mode 100644 vue-options-api-demos/grid/basic/EngagementComponent.vue
 create mode 100644 vue-options-api-demos/grid/basic/FlagComponent.vue
 create mode 100644 vue-options-api-demos/grid/basic/Grid.vue
 create mode 100644 vue-options-api-demos/grid/basic/IsOnlineComponent.vue
 create mode 100644 vue-options-api-demos/grid/basic/employees.json
 create mode 100644 vue-options-api-demos/grid/basic/en-US.js
 create mode 100644 vue-options-api-demos/grid/basic/es.js
 create mode 100644 vue-options-api-demos/grid/basic/fr.js
 create mode 100644 vue-options-api-demos/grid/basic/images.js
 create mode 100644 vue-options-api-demos/grid/basic/main.js
 create mode 100644 vue-options-api-demos/grid/basic/main.vue
 create mode 100644 vue-options-api-demos/grid/columns/column-menu/basic/main.js
 create mode 100644 vue-options-api-demos/grid/columns/column-menu/basic/main.vue
 create mode 100644 vue-options-api-demos/grid/columns/column-menu/basic/products.js
 create mode 100644 vue-options-api-demos/grid/columns/column-menu/checkboxFilter/ColumnMenu.vue
 create mode 100644 vue-options-api-demos/grid/columns/column-menu/checkboxFilter/main.js
 create mode 100644 vue-options-api-demos/grid/columns/column-menu/checkboxFilter/main.vue
 create mode 100644 vue-options-api-demos/grid/columns/column-menu/checkboxFilter/products.js
 create mode 100644 vue-options-api-demos/grid/columns/column-menu/custom-style/main.js
 create mode 100644 vue-options-api-demos/grid/columns/column-menu/custom-style/main.vue
 create mode 100644 vue-options-api-demos/grid/columns/column-menu/custom-style/products.js
 create mode 100644 vue-options-api-demos/grid/columns/column-menu/custom-style/styles.css
 create mode 100644 vue-options-api-demos/grid/columns/column-menu/custom/ColumnMenu.vue
 create mode 100644 vue-options-api-demos/grid/columns/column-menu/custom/main.js
 create mode 100644 vue-options-api-demos/grid/columns/column-menu/custom/main.vue
 create mode 100644 vue-options-api-demos/grid/columns/column-menu/custom/products.js
 create mode 100644 vue-options-api-demos/grid/columns/column-menu/flter-only-custom-icon/ColumnMenu.vue
 create mode 100644 vue-options-api-demos/grid/columns/column-menu/flter-only-custom-icon/main.js
 create mode 100644 vue-options-api-demos/grid/columns/column-menu/flter-only-custom-icon/main.vue
 create mode 100644 vue-options-api-demos/grid/columns/column-menu/flter-only-custom-icon/products.js
 create mode 100644 vue-options-api-demos/grid/columns/column-virtualization/main.js
 create mode 100644 vue-options-api-demos/grid/columns/column-virtualization/main.vue
 create mode 100644 vue-options-api-demos/grid/columns/dynamic-column-generation/main.js
 create mode 100644 vue-options-api-demos/grid/columns/dynamic-column-generation/main.vue
 create mode 100644 vue-options-api-demos/grid/columns/headers/main.js
 create mode 100644 vue-options-api-demos/grid/columns/headers/main.vue
 create mode 100644 vue-options-api-demos/grid/columns/hidden/Header.vue
 create mode 100644 vue-options-api-demos/grid/columns/hidden/main.js
 create mode 100644 vue-options-api-demos/grid/columns/hidden/main.vue
 create mode 100644 vue-options-api-demos/grid/columns/locked/main.js
 create mode 100644 vue-options-api-demos/grid/columns/locked/main.vue
 create mode 100644 vue-options-api-demos/grid/columns/locked/products.js
 create mode 100644 vue-options-api-demos/grid/columns/reordering/main.js
 create mode 100644 vue-options-api-demos/grid/columns/reordering/main.vue
 create mode 100644 vue-options-api-demos/grid/columns/resizing/main.js
 create mode 100644 vue-options-api-demos/grid/columns/resizing/main.vue
 create mode 100644 vue-options-api-demos/grid/columns/widths/fit-smaller-screens/main.js
 create mode 100644 vue-options-api-demos/grid/columns/widths/fit-smaller-screens/main.vue
 create mode 100644 vue-options-api-demos/grid/columns/widths/fit-smaller-screens/products.json
 create mode 100644 vue-options-api-demos/grid/columns/widths/minimum-width/main.js
 create mode 100644 vue-options-api-demos/grid/columns/widths/minimum-width/main.vue
 create mode 100644 vue-options-api-demos/grid/columns/widths/minimum-width/products.json
 create mode 100644 vue-options-api-demos/grid/columns/widths/percentage-no-fixed-width/main.js
 create mode 100644 vue-options-api-demos/grid/columns/widths/percentage-no-fixed-width/main.vue
 create mode 100644 vue-options-api-demos/grid/columns/widths/percentage-no-fixed-width/products.json
 create mode 100644 vue-options-api-demos/grid/columns/widths/percentage-width/main.js
 create mode 100644 vue-options-api-demos/grid/columns/widths/percentage-width/main.vue
 create mode 100644 vue-options-api-demos/grid/columns/widths/percentage-width/products.json
 create mode 100644 vue-options-api-demos/grid/common/es.json
 create mode 100644 vue-options-api-demos/grid/common/northwind/categories.json
 create mode 100644 vue-options-api-demos/grid/common/northwind/customers.json
 create mode 100644 vue-options-api-demos/grid/common/northwind/employees.json
 create mode 100644 vue-options-api-demos/grid/common/northwind/orders.json
 create mode 100644 vue-options-api-demos/grid/common/northwind/products.json
 create mode 100644 vue-options-api-demos/grid/common/northwind/regions.json
 create mode 100644 vue-options-api-demos/grid/common/northwind/shippers.json
 create mode 100644 vue-options-api-demos/grid/common/northwind/suppliers.json
 create mode 100644 vue-options-api-demos/grid/compact-grid/ChangeComponent.vue
 create mode 100644 vue-options-api-demos/grid/compact-grid/ChangePercentageComponent.vue
 create mode 100644 vue-options-api-demos/grid/compact-grid/GridComponent.vue
 create mode 100644 vue-options-api-demos/grid/compact-grid/companyData.json
 create mode 100644 vue-options-api-demos/grid/compact-grid/main.js
 create mode 100644 vue-options-api-demos/grid/compact-grid/main.vue
 create mode 100644 vue-options-api-demos/grid/custom-rendering/cells/component/ComponentInstance.vue
 create mode 100644 vue-options-api-demos/grid/custom-rendering/cells/component/main.js
 create mode 100644 vue-options-api-demos/grid/custom-rendering/cells/component/main.vue
 create mode 100644 vue-options-api-demos/grid/custom-rendering/cells/function/main.js
 create mode 100644 vue-options-api-demos/grid/custom-rendering/cells/function/main.vue
 create mode 100644 vue-options-api-demos/grid/custom-rendering/cells/slot/main.js
 create mode 100644 vue-options-api-demos/grid/custom-rendering/cells/slot/main.vue
 create mode 100644 vue-options-api-demos/grid/custom-rendering/detail/DetailComponent.vue
 create mode 100644 vue-options-api-demos/grid/custom-rendering/detail/main.js
 create mode 100644 vue-options-api-demos/grid/custom-rendering/detail/main.vue
 create mode 100644 vue-options-api-demos/grid/custom-rendering/detail/products.js
 create mode 100644 vue-options-api-demos/grid/custom-rendering/footer/component/ComponentInstance.vue
 create mode 100644 vue-options-api-demos/grid/custom-rendering/footer/component/main.js
 create mode 100644 vue-options-api-demos/grid/custom-rendering/footer/component/main.vue
 create mode 100644 vue-options-api-demos/grid/custom-rendering/footer/function/main.js
 create mode 100644 vue-options-api-demos/grid/custom-rendering/footer/function/main.vue
 create mode 100644 vue-options-api-demos/grid/custom-rendering/footer/slot/main.js
 create mode 100644 vue-options-api-demos/grid/custom-rendering/footer/slot/main.vue
 create mode 100644 vue-options-api-demos/grid/custom-rendering/group-header/CustomCell.vue
 create mode 100644 vue-options-api-demos/grid/custom-rendering/group-header/main.js
 create mode 100644 vue-options-api-demos/grid/custom-rendering/group-header/main.vue
 create mode 100644 vue-options-api-demos/grid/custom-rendering/grouping/CustomCell.vue
 create mode 100644 vue-options-api-demos/grid/custom-rendering/grouping/main.js
 create mode 100644 vue-options-api-demos/grid/custom-rendering/grouping/main.vue
 create mode 100644 vue-options-api-demos/grid/custom-rendering/headers/component/ComponentInstance.vue
 create mode 100644 vue-options-api-demos/grid/custom-rendering/headers/component/main.js
 create mode 100644 vue-options-api-demos/grid/custom-rendering/headers/component/main.vue
 create mode 100644 vue-options-api-demos/grid/custom-rendering/headers/function/main.js
 create mode 100644 vue-options-api-demos/grid/custom-rendering/headers/function/main.vue
 create mode 100644 vue-options-api-demos/grid/custom-rendering/headers/slot/main.js
 create mode 100644 vue-options-api-demos/grid/custom-rendering/headers/slot/main.vue
 create mode 100644 vue-options-api-demos/grid/custom-rendering/hierarchy/DetailComponent.vue
 create mode 100644 vue-options-api-demos/grid/custom-rendering/hierarchy/main.js
 create mode 100644 vue-options-api-demos/grid/custom-rendering/hierarchy/main.vue
 create mode 100644 vue-options-api-demos/grid/custom-rendering/hierarchy/products.js
 create mode 100644 vue-options-api-demos/grid/custom-rendering/loader-template/main.js
 create mode 100644 vue-options-api-demos/grid/custom-rendering/loader-template/main.vue
 create mode 100644 vue-options-api-demos/grid/custom-rendering/row-reorder/CustomCell.vue
 create mode 100644 vue-options-api-demos/grid/custom-rendering/row-reorder/main.js
 create mode 100644 vue-options-api-demos/grid/custom-rendering/row-reorder/main.vue
 create mode 100644 vue-options-api-demos/grid/data-binding/local-data-operations/main.js
 create mode 100644 vue-options-api-demos/grid/data-binding/local-data-operations/main.vue
 create mode 100644 vue-options-api-demos/grid/data-binding/odata4-crud/CommandCell.vue
 create mode 100644 vue-options-api-demos/grid/data-binding/odata4-crud/main.js
 create mode 100644 vue-options-api-demos/grid/data-binding/odata4-crud/main.vue
 create mode 100644 vue-options-api-demos/grid/editing/basic/main.js
 create mode 100644 vue-options-api-demos/grid/editing/basic/main.vue
 create mode 100644 vue-options-api-demos/grid/editing/custom/CommandCell.vue
 create mode 100644 vue-options-api-demos/grid/editing/custom/DropDownCell.vue
 create mode 100644 vue-options-api-demos/grid/editing/custom/main.js
 create mode 100644 vue-options-api-demos/grid/editing/custom/main.vue
 create mode 100644 vue-options-api-demos/grid/editing/external/CommandCell.vue
 create mode 100644 vue-options-api-demos/grid/editing/external/DialogContainer.vue
 create mode 100644 vue-options-api-demos/grid/editing/external/data.js
 create mode 100644 vue-options-api-demos/grid/editing/external/main.js
 create mode 100644 vue-options-api-demos/grid/editing/external/main.vue
 create mode 100644 vue-options-api-demos/grid/editing/incell/main.js
 create mode 100644 vue-options-api-demos/grid/editing/incell/main.vue
 create mode 100644 vue-options-api-demos/grid/editing/inline-form/CommandCell.vue
 create mode 100644 vue-options-api-demos/grid/editing/inline-form/FormContent.vue
 create mode 100644 vue-options-api-demos/grid/editing/inline-form/FormInput.vue
 create mode 100644 vue-options-api-demos/grid/editing/inline-form/NameCell.vue
 create mode 100644 vue-options-api-demos/grid/editing/inline-form/main.js
 create mode 100644 vue-options-api-demos/grid/editing/inline-form/main.vue
 create mode 100644 vue-options-api-demos/grid/editing/inline-form/verificationFunctions.js
 create mode 100644 vue-options-api-demos/grid/editing/inline/CommandCell.vue
 create mode 100644 vue-options-api-demos/grid/editing/inline/main.js
 create mode 100644 vue-options-api-demos/grid/editing/inline/main.vue
 create mode 100644 vue-options-api-demos/grid/editing/validation/CommandCell.vue
 create mode 100644 vue-options-api-demos/grid/editing/validation/DatePickerCell.vue
 create mode 100644 vue-options-api-demos/grid/editing/validation/InputCell.vue
 create mode 100644 vue-options-api-demos/grid/editing/validation/NumericCell.vue
 create mode 100644 vue-options-api-demos/grid/editing/validation/main.js
 create mode 100644 vue-options-api-demos/grid/editing/validation/main.vue
 create mode 100644 vue-options-api-demos/grid/editing/validation/products.js
 create mode 100644 vue-options-api-demos/grid/editing/validation/verificationFunctions.js
 create mode 100644 vue-options-api-demos/grid/excel/main.js
 create mode 100644 vue-options-api-demos/grid/excel/main.vue
 create mode 100644 vue-options-api-demos/grid/filtering/basic/boolean/main.js
 create mode 100644 vue-options-api-demos/grid/filtering/basic/boolean/main.vue
 create mode 100644 vue-options-api-demos/grid/filtering/basic/boolean/products.js
 create mode 100644 vue-options-api-demos/grid/filtering/basic/date/main.js
 create mode 100644 vue-options-api-demos/grid/filtering/basic/date/main.vue
 create mode 100644 vue-options-api-demos/grid/filtering/basic/date/products.js
 create mode 100644 vue-options-api-demos/grid/filtering/basic/main.js
 create mode 100644 vue-options-api-demos/grid/filtering/basic/main.vue
 create mode 100644 vue-options-api-demos/grid/filtering/basic/number/main.js
 create mode 100644 vue-options-api-demos/grid/filtering/basic/number/main.vue
 create mode 100644 vue-options-api-demos/grid/filtering/basic/number/products.js
 create mode 100644 vue-options-api-demos/grid/filtering/basic/products.js
 create mode 100644 vue-options-api-demos/grid/filtering/basic/string/main.js
 create mode 100644 vue-options-api-demos/grid/filtering/basic/string/main.vue
 create mode 100644 vue-options-api-demos/grid/filtering/basic/string/products.js
 create mode 100644 vue-options-api-demos/grid/filtering/custom/main.js
 create mode 100644 vue-options-api-demos/grid/filtering/custom/main.vue
 create mode 100644 vue-options-api-demos/grid/filtering/custom/products.js
 create mode 100644 vue-options-api-demos/grid/filtering/external/main.js
 create mode 100644 vue-options-api-demos/grid/filtering/external/main.vue
 create mode 100644 vue-options-api-demos/grid/filtering/external/products.js
 create mode 100644 vue-options-api-demos/grid/filtering/row/custom-daterangepicker/main.js
 create mode 100644 vue-options-api-demos/grid/filtering/row/custom-daterangepicker/main.vue
 create mode 100644 vue-options-api-demos/grid/filtering/row/custom-daterangepicker/products.js
 create mode 100644 vue-options-api-demos/grid/filtering/row/custom-dropdownlist/main.js
 create mode 100644 vue-options-api-demos/grid/filtering/row/custom-dropdownlist/main.vue
 create mode 100644 vue-options-api-demos/grid/filtering/row/custom-dropdownlist/products.js
 create mode 100644 vue-options-api-demos/grid/filtering/row/custom-switch/main.js
 create mode 100644 vue-options-api-demos/grid/filtering/row/custom-switch/main.vue
 create mode 100644 vue-options-api-demos/grid/filtering/row/custom-switch/products.js
 create mode 100644 vue-options-api-demos/grid/filtering/select-filter-type/main.js
 create mode 100644 vue-options-api-demos/grid/filtering/select-filter-type/main.vue
 create mode 100644 vue-options-api-demos/grid/filtering/select-filter-type/products.js
 create mode 100644 vue-options-api-demos/grid/globalization/main.js
 create mode 100644 vue-options-api-demos/grid/globalization/main.vue
 create mode 100644 vue-options-api-demos/grid/grouping/aggregates/CellComponent.vue
 create mode 100644 vue-options-api-demos/grid/grouping/aggregates/main.js
 create mode 100644 vue-options-api-demos/grid/grouping/aggregates/main.vue
 create mode 100644 vue-options-api-demos/grid/grouping/basic/main.js
 create mode 100644 vue-options-api-demos/grid/grouping/basic/main.vue
 create mode 100644 vue-options-api-demos/grid/grouping/virtual/main.js
 create mode 100644 vue-options-api-demos/grid/grouping/virtual/main.vue
 create mode 100644 vue-options-api-demos/grid/grouping/virtual/products.js
 create mode 100644 vue-options-api-demos/grid/keyboard-inline/CommandCell.vue
 create mode 100644 vue-options-api-demos/grid/keyboard-inline/main.js
 create mode 100644 vue-options-api-demos/grid/keyboard-inline/main.vue
 create mode 100644 vue-options-api-demos/grid/keyboard-navigation/DetailComponent.vue
 create mode 100644 vue-options-api-demos/grid/keyboard-navigation/main.js
 create mode 100644 vue-options-api-demos/grid/keyboard-navigation/main.vue
 create mode 100644 vue-options-api-demos/grid/keyboard-navigation/products.js
 create mode 100644 vue-options-api-demos/grid/live-data/ChangePriceComponent.vue
 create mode 100644 vue-options-api-demos/grid/live-data/Grid.vue
 create mode 100644 vue-options-api-demos/grid/live-data/PriceComponent.vue
 create mode 100644 vue-options-api-demos/grid/live-data/RatingComponent.vue
 create mode 100644 vue-options-api-demos/grid/live-data/TickerComponent.vue
 create mode 100644 vue-options-api-demos/grid/live-data/VolumeComponent.vue
 create mode 100644 vue-options-api-demos/grid/live-data/financial-data.js
 create mode 100644 vue-options-api-demos/grid/live-data/main.js
 create mode 100644 vue-options-api-demos/grid/live-data/main.vue
 create mode 100644 vue-options-api-demos/grid/live-data/services.js
 create mode 100644 vue-options-api-demos/grid/live-data/trends.js
 create mode 100644 vue-options-api-demos/grid/live-data/utils.js
 create mode 100644 vue-options-api-demos/grid/paging/basic/main.js
 create mode 100644 vue-options-api-demos/grid/paging/basic/main.vue
 create mode 100644 vue-options-api-demos/grid/paging/types/main.js
 create mode 100644 vue-options-api-demos/grid/paging/types/main.vue
 create mode 100644 vue-options-api-demos/grid/pdf/all-pages/main.js
 create mode 100644 vue-options-api-demos/grid/pdf/all-pages/main.vue
 create mode 100644 vue-options-api-demos/grid/pdf/basic/main.js
 create mode 100644 vue-options-api-demos/grid/pdf/basic/main.vue
 create mode 100644 vue-options-api-demos/grid/pdf/custom-columns/main.js
 create mode 100644 vue-options-api-demos/grid/pdf/custom-columns/main.vue
 create mode 100644 vue-options-api-demos/grid/pdf/custom-fonts/main.js
 create mode 100644 vue-options-api-demos/grid/pdf/custom-fonts/main.vue
 create mode 100644 vue-options-api-demos/grid/pdf/custom-fonts/styles.css
 create mode 100644 vue-options-api-demos/grid/pdf/fit-content/main.js
 create mode 100644 vue-options-api-demos/grid/pdf/fit-content/main.vue
 create mode 100644 vue-options-api-demos/grid/pdf/page-template/main.js
 create mode 100644 vue-options-api-demos/grid/pdf/page-template/main.vue
 create mode 100644 vue-options-api-demos/grid/performance/main.js
 create mode 100644 vue-options-api-demos/grid/performance/main.vue
 create mode 100644 vue-options-api-demos/grid/persist-state/ColumnMenu.vue
 create mode 100644 vue-options-api-demos/grid/persist-state/DetailComponent.vue
 create mode 100644 vue-options-api-demos/grid/persist-state/es.json
 create mode 100644 vue-options-api-demos/grid/persist-state/main.js
 create mode 100644 vue-options-api-demos/grid/persist-state/main.vue
 create mode 100644 vue-options-api-demos/grid/persist-state/orders.json
 create mode 100644 vue-options-api-demos/grid/print/control-column-widths/main.js
 create mode 100644 vue-options-api-demos/grid/print/control-column-widths/main.vue
 create mode 100644 vue-options-api-demos/grid/print/control-column-widths/products.json
 create mode 100644 vue-options-api-demos/grid/print/pageable/main.js
 create mode 100644 vue-options-api-demos/grid/print/pageable/main.vue
 create mode 100644 vue-options-api-demos/grid/print/scrollable-controlled/main.js
 create mode 100644 vue-options-api-demos/grid/print/scrollable-controlled/main.vue
 create mode 100644 vue-options-api-demos/grid/print/scrollable-controlled/products.json
 create mode 100644 vue-options-api-demos/grid/print/scrollable/main.js
 create mode 100644 vue-options-api-demos/grid/print/scrollable/main.vue
 create mode 100644 vue-options-api-demos/grid/responsive-columns/basic/main.js
 create mode 100644 vue-options-api-demos/grid/responsive-columns/basic/main.vue
 create mode 100644 vue-options-api-demos/grid/responsive-columns/basic/products.json
 create mode 100644 vue-options-api-demos/grid/responsive-columns/column-virtualization/main.js
 create mode 100644 vue-options-api-demos/grid/responsive-columns/column-virtualization/main.vue
 create mode 100644 vue-options-api-demos/grid/responsive-columns/height/main.js
 create mode 100644 vue-options-api-demos/grid/responsive-columns/height/main.vue
 create mode 100644 vue-options-api-demos/grid/responsive-columns/multicolumn-grid/main.js
 create mode 100644 vue-options-api-demos/grid/responsive-columns/multicolumn-grid/main.vue
 create mode 100644 vue-options-api-demos/grid/rowreorder/component/CustomCell.vue
 create mode 100644 vue-options-api-demos/grid/rowreorder/component/DragClue.vue
 create mode 100644 vue-options-api-demos/grid/rowreorder/component/DragPointer.vue
 create mode 100644 vue-options-api-demos/grid/rowreorder/component/common.js
 create mode 100644 vue-options-api-demos/grid/rowreorder/component/main.js
 create mode 100644 vue-options-api-demos/grid/rowreorder/component/main.vue
 create mode 100644 vue-options-api-demos/grid/rowreorder/css/CustomCell.vue
 create mode 100644 vue-options-api-demos/grid/rowreorder/css/DragClue.vue
 create mode 100644 vue-options-api-demos/grid/rowreorder/css/common.js
 create mode 100644 vue-options-api-demos/grid/rowreorder/css/main.js
 create mode 100644 vue-options-api-demos/grid/rowreorder/css/main.vue
 create mode 100644 vue-options-api-demos/grid/rows/sticky/main.js
 create mode 100644 vue-options-api-demos/grid/rows/sticky/main.vue
 create mode 100644 vue-options-api-demos/grid/rows/sticky/products.json
 create mode 100644 vue-options-api-demos/grid/scroll-modes/basic/main.js
 create mode 100644 vue-options-api-demos/grid/scroll-modes/basic/main.vue
 create mode 100644 vue-options-api-demos/grid/scroll-modes/custom/main.js
 create mode 100644 vue-options-api-demos/grid/scroll-modes/custom/main.vue
 create mode 100644 vue-options-api-demos/grid/scroll-modes/infinite/main.js
 create mode 100644 vue-options-api-demos/grid/scroll-modes/infinite/main.vue
 create mode 100644 vue-options-api-demos/grid/scroll-modes/infinite/products.json
 create mode 100644 vue-options-api-demos/grid/selection/basic/main.js
 create mode 100644 vue-options-api-demos/grid/selection/basic/main.vue
 create mode 100644 vue-options-api-demos/grid/selection/custom/main.js
 create mode 100644 vue-options-api-demos/grid/selection/custom/main.vue
 create mode 100644 vue-options-api-demos/grid/selection/custom/products.js
 create mode 100644 vue-options-api-demos/grid/shared/categories.json
 create mode 100644 vue-options-api-demos/grid/shared/customers.json
 create mode 100644 vue-options-api-demos/grid/shared/employees.json
 create mode 100644 vue-options-api-demos/grid/shared/es.json
 create mode 100644 vue-options-api-demos/grid/shared/keys.js
 create mode 100644 vue-options-api-demos/grid/shared/orders.json
 create mode 100644 vue-options-api-demos/grid/shared/products.json
 create mode 100644 vue-options-api-demos/grid/shared/regions.json
 create mode 100644 vue-options-api-demos/grid/shared/sample-products.js
 create mode 100644 vue-options-api-demos/grid/shared/shippers.json
 create mode 100644 vue-options-api-demos/grid/shared/suppliers.json
 create mode 100644 vue-options-api-demos/grid/sorting/basic/main.js
 create mode 100644 vue-options-api-demos/grid/sorting/basic/main.vue
 create mode 100644 vue-options-api-demos/grid/sorting/custom/main.js
 create mode 100644 vue-options-api-demos/grid/sorting/custom/main.vue
 create mode 100644 vue-options-api-demos/grid/styling/styling-cell/main.js
 create mode 100644 vue-options-api-demos/grid/styling/styling-cell/main.vue
 create mode 100644 vue-options-api-demos/grid/styling/styling-cell/products.json
 create mode 100644 vue-options-api-demos/grid/styling/styling-class-name/main.js
 create mode 100644 vue-options-api-demos/grid/styling/styling-class-name/main.vue
 create mode 100644 vue-options-api-demos/grid/styling/styling-class-name/products.json
 create mode 100644 vue-options-api-demos/grid/styling/styling-dynamic/main.js
 create mode 100644 vue-options-api-demos/grid/styling/styling-dynamic/main.vue
 create mode 100644 vue-options-api-demos/grid/styling/styling-header-cell/main.js
 create mode 100644 vue-options-api-demos/grid/styling/styling-header-cell/main.vue
 create mode 100644 vue-options-api-demos/grid/styling/styling-header-cell/products.json
 create mode 100644 vue-options-api-demos/grid/styling/styling-row/main.js
 create mode 100644 vue-options-api-demos/grid/styling/styling-row/main.vue
 create mode 100644 vue-options-api-demos/grid/styling/styling-row/products.json
 create mode 100644 vue-options-api-demos/indicators/badge/alignment/main.js
 create mode 100644 vue-options-api-demos/indicators/badge/alignment/main.vue
 create mode 100644 vue-options-api-demos/indicators/badge/container/main.js
 create mode 100644 vue-options-api-demos/indicators/badge/container/main.vue
 create mode 100644 vue-options-api-demos/indicators/badge/cutout-border/main.js
 create mode 100644 vue-options-api-demos/indicators/badge/cutout-border/main.vue
 create mode 100644 vue-options-api-demos/indicators/badge/fill/main.js
 create mode 100644 vue-options-api-demos/indicators/badge/fill/main.vue
 create mode 100644 vue-options-api-demos/indicators/badge/overview/Contacts.vue
 create mode 100644 vue-options-api-demos/indicators/badge/overview/SocialApps.vue
 create mode 100644 vue-options-api-demos/indicators/badge/overview/Status.vue
 create mode 100644 vue-options-api-demos/indicators/badge/overview/main.js
 create mode 100644 vue-options-api-demos/indicators/badge/overview/main.vue
 create mode 100644 vue-options-api-demos/indicators/badge/position/main.js
 create mode 100644 vue-options-api-demos/indicators/badge/position/main.vue
 create mode 100644 vue-options-api-demos/indicators/badge/positioning/main.js
 create mode 100644 vue-options-api-demos/indicators/badge/positioning/main.vue
 create mode 100644 vue-options-api-demos/indicators/badge/rounded/main.js
 create mode 100644 vue-options-api-demos/indicators/badge/rounded/main.vue
 create mode 100644 vue-options-api-demos/indicators/badge/size/main.js
 create mode 100644 vue-options-api-demos/indicators/badge/size/main.vue
 create mode 100644 vue-options-api-demos/indicators/badge/theme-color/main.js
 create mode 100644 vue-options-api-demos/indicators/badge/theme-color/main.vue
 create mode 100644 vue-options-api-demos/indicators/get-started/main.js
 create mode 100644 vue-options-api-demos/indicators/get-started/main.vue
 create mode 100644 vue-options-api-demos/indicators/globalization/main.js
 create mode 100644 vue-options-api-demos/indicators/globalization/main.vue
 create mode 100644 vue-options-api-demos/indicators/loader/overview/main.js
 create mode 100644 vue-options-api-demos/indicators/loader/overview/main.vue
 create mode 100644 vue-options-api-demos/indicators/loader/size/main.js
 create mode 100644 vue-options-api-demos/indicators/loader/size/main.vue
 create mode 100644 vue-options-api-demos/indicators/loader/theme-color/main.js
 create mode 100644 vue-options-api-demos/indicators/loader/theme-color/main.vue
 create mode 100644 vue-options-api-demos/indicators/loader/type/main.js
 create mode 100644 vue-options-api-demos/indicators/loader/type/main.vue
 create mode 100644 vue-options-api-demos/indicators/overview/main.js
 create mode 100644 vue-options-api-demos/indicators/overview/main.vue
 create mode 100644 vue-options-api-demos/indicators/skeleton/animation/main.js
 create mode 100644 vue-options-api-demos/indicators/skeleton/animation/main.vue
 create mode 100644 vue-options-api-demos/indicators/skeleton/dynamic/main.js
 create mode 100644 vue-options-api-demos/indicators/skeleton/dynamic/main.vue
 create mode 100644 vue-options-api-demos/indicators/skeleton/overview/main.js
 create mode 100644 vue-options-api-demos/indicators/skeleton/overview/main.vue
 create mode 100644 vue-options-api-demos/indicators/skeleton/shape/main.js
 create mode 100644 vue-options-api-demos/indicators/skeleton/shape/main.vue
 create mode 100644 vue-options-api-demos/inputs/basic/main.js
 create mode 100644 vue-options-api-demos/inputs/basic/main.vue
 create mode 100644 vue-options-api-demos/inputs/checkbox/appearance/configurator/CheckboxStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/inputs/checkbox/appearance/configurator/main.js
 create mode 100644 vue-options-api-demos/inputs/checkbox/appearance/configurator/main.vue
 create mode 100644 vue-options-api-demos/inputs/checkbox/appearance/rounded/main.js
 create mode 100644 vue-options-api-demos/inputs/checkbox/appearance/rounded/main.vue
 create mode 100644 vue-options-api-demos/inputs/checkbox/appearance/size/main.js
 create mode 100644 vue-options-api-demos/inputs/checkbox/appearance/size/main.vue
 create mode 100644 vue-options-api-demos/inputs/checkbox/controlled/checked/main.js
 create mode 100644 vue-options-api-demos/inputs/checkbox/controlled/checked/main.vue
 create mode 100644 vue-options-api-demos/inputs/checkbox/controlled/value/main.js
 create mode 100644 vue-options-api-demos/inputs/checkbox/controlled/value/main.vue
 create mode 100644 vue-options-api-demos/inputs/checkbox/default/main.js
 create mode 100644 vue-options-api-demos/inputs/checkbox/default/main.vue
 create mode 100644 vue-options-api-demos/inputs/checkbox/disabled/main.js
 create mode 100644 vue-options-api-demos/inputs/checkbox/disabled/main.vue
 create mode 100644 vue-options-api-demos/inputs/checkbox/form/basic/main.js
 create mode 100644 vue-options-api-demos/inputs/checkbox/form/basic/main.vue
 create mode 100644 vue-options-api-demos/inputs/checkbox/form/custom-message/main.js
 create mode 100644 vue-options-api-demos/inputs/checkbox/form/custom-message/main.vue
 create mode 100644 vue-options-api-demos/inputs/checkbox/form/disable-styles/main.js
 create mode 100644 vue-options-api-demos/inputs/checkbox/form/disable-styles/main.vue
 create mode 100644 vue-options-api-demos/inputs/checkbox/form/kendo-vue-form/FormCheckbox.vue
 create mode 100644 vue-options-api-demos/inputs/checkbox/form/kendo-vue-form/FormContent.vue
 create mode 100644 vue-options-api-demos/inputs/checkbox/form/kendo-vue-form/FormInput.vue
 create mode 100644 vue-options-api-demos/inputs/checkbox/form/kendo-vue-form/main.js
 create mode 100644 vue-options-api-demos/inputs/checkbox/form/kendo-vue-form/main.vue
 create mode 100644 vue-options-api-demos/inputs/checkbox/form/override/main.js
 create mode 100644 vue-options-api-demos/inputs/checkbox/form/override/main.vue
 create mode 100644 vue-options-api-demos/inputs/checkbox/keyboard/main.js
 create mode 100644 vue-options-api-demos/inputs/checkbox/keyboard/main.vue
 create mode 100644 vue-options-api-demos/inputs/checkbox/labels/custom/main.js
 create mode 100644 vue-options-api-demos/inputs/checkbox/labels/custom/main.vue
 create mode 100644 vue-options-api-demos/inputs/checkbox/labels/setup/main.js
 create mode 100644 vue-options-api-demos/inputs/checkbox/labels/setup/main.vue
 create mode 100644 vue-options-api-demos/inputs/checkbox/main/main.js
 create mode 100644 vue-options-api-demos/inputs/checkbox/main/main.vue
 create mode 100644 vue-options-api-demos/inputs/colorgradient/colorcontrast/main.js
 create mode 100644 vue-options-api-demos/inputs/colorgradient/colorcontrast/main.vue
 create mode 100644 vue-options-api-demos/inputs/colorgradient/controlled/main.js
 create mode 100644 vue-options-api-demos/inputs/colorgradient/controlled/main.vue
 create mode 100644 vue-options-api-demos/inputs/colorgradient/disabled/main.js
 create mode 100644 vue-options-api-demos/inputs/colorgradient/disabled/main.vue
 create mode 100644 vue-options-api-demos/inputs/colorgradient/events/Logger.vue
 create mode 100644 vue-options-api-demos/inputs/colorgradient/events/main.js
 create mode 100644 vue-options-api-demos/inputs/colorgradient/events/main.vue
 create mode 100644 vue-options-api-demos/inputs/colorgradient/keyboard/main.js
 create mode 100644 vue-options-api-demos/inputs/colorgradient/keyboard/main.vue
 create mode 100644 vue-options-api-demos/inputs/colorgradient/opacity/main.js
 create mode 100644 vue-options-api-demos/inputs/colorgradient/opacity/main.vue
 create mode 100644 vue-options-api-demos/inputs/colorgradient/overview/main.js
 create mode 100644 vue-options-api-demos/inputs/colorgradient/overview/main.vue
 create mode 100644 vue-options-api-demos/inputs/colorpalette/controlled/main.js
 create mode 100644 vue-options-api-demos/inputs/colorpalette/controlled/main.vue
 create mode 100644 vue-options-api-demos/inputs/colorpalette/custom/main.js
 create mode 100644 vue-options-api-demos/inputs/colorpalette/custom/main.vue
 create mode 100644 vue-options-api-demos/inputs/colorpalette/disabled/main.js
 create mode 100644 vue-options-api-demos/inputs/colorpalette/disabled/main.vue
 create mode 100644 vue-options-api-demos/inputs/colorpalette/keyboard/main.js
 create mode 100644 vue-options-api-demos/inputs/colorpalette/keyboard/main.vue
 create mode 100644 vue-options-api-demos/inputs/colorpalette/overview/basic/main.js
 create mode 100644 vue-options-api-demos/inputs/colorpalette/overview/basic/main.vue
 create mode 100644 vue-options-api-demos/inputs/colorpalette/overview/basic/styles.css
 create mode 100644 vue-options-api-demos/inputs/colorpalette/overview/events/Logger.vue
 create mode 100644 vue-options-api-demos/inputs/colorpalette/overview/events/main.js
 create mode 100644 vue-options-api-demos/inputs/colorpalette/overview/events/main.vue
 create mode 100644 vue-options-api-demos/inputs/colorpalette/presets/main.js
 create mode 100644 vue-options-api-demos/inputs/colorpalette/presets/main.vue
 create mode 100644 vue-options-api-demos/inputs/colorpicker/adaptive-rendering/main.js
 create mode 100644 vue-options-api-demos/inputs/colorpicker/adaptive-rendering/main.vue
 create mode 100644 vue-options-api-demos/inputs/colorpicker/appearance/ColorPickerConfigurator.vue
 create mode 100644 vue-options-api-demos/inputs/colorpicker/appearance/main.js
 create mode 100644 vue-options-api-demos/inputs/colorpicker/appearance/main.vue
 create mode 100644 vue-options-api-demos/inputs/colorpicker/colorcontrast/main.js
 create mode 100644 vue-options-api-demos/inputs/colorpicker/colorcontrast/main.vue
 create mode 100644 vue-options-api-demos/inputs/colorpicker/controlled/popup/main.js
 create mode 100644 vue-options-api-demos/inputs/colorpicker/controlled/popup/main.vue
 create mode 100644 vue-options-api-demos/inputs/colorpicker/controlled/value/main.js
 create mode 100644 vue-options-api-demos/inputs/colorpicker/controlled/value/main.vue
 create mode 100644 vue-options-api-demos/inputs/colorpicker/custom/custom-icons/main.js
 create mode 100644 vue-options-api-demos/inputs/colorpicker/custom/custom-icons/main.vue
 create mode 100644 vue-options-api-demos/inputs/colorpicker/custom/gradient/main.js
 create mode 100644 vue-options-api-demos/inputs/colorpicker/custom/gradient/main.vue
 create mode 100644 vue-options-api-demos/inputs/colorpicker/custom/kendo-icons/main.js
 create mode 100644 vue-options-api-demos/inputs/colorpicker/custom/kendo-icons/main.vue
 create mode 100644 vue-options-api-demos/inputs/colorpicker/custom/palette/main.js
 create mode 100644 vue-options-api-demos/inputs/colorpicker/custom/palette/main.vue
 create mode 100644 vue-options-api-demos/inputs/colorpicker/default/main.js
 create mode 100644 vue-options-api-demos/inputs/colorpicker/default/main.vue
 create mode 100644 vue-options-api-demos/inputs/colorpicker/disabled/main.js
 create mode 100644 vue-options-api-demos/inputs/colorpicker/disabled/main.vue
 create mode 100644 vue-options-api-demos/inputs/colorpicker/events/Logger.vue
 create mode 100644 vue-options-api-demos/inputs/colorpicker/events/main.js
 create mode 100644 vue-options-api-demos/inputs/colorpicker/events/main.vue
 create mode 100644 vue-options-api-demos/inputs/colorpicker/keyboard/main.js
 create mode 100644 vue-options-api-demos/inputs/colorpicker/keyboard/main.vue
 create mode 100644 vue-options-api-demos/inputs/colorpicker/overview/main.js
 create mode 100644 vue-options-api-demos/inputs/colorpicker/overview/main.vue
 create mode 100644 vue-options-api-demos/inputs/colorpicker/view/combined/main.js
 create mode 100644 vue-options-api-demos/inputs/colorpicker/view/combined/main.vue
 create mode 100644 vue-options-api-demos/inputs/colorpicker/view/popup/main.js
 create mode 100644 vue-options-api-demos/inputs/colorpicker/view/popup/main.vue
 create mode 100644 vue-options-api-demos/inputs/common/es.json
 create mode 100644 vue-options-api-demos/inputs/flatcolorpicker/basic/main.js
 create mode 100644 vue-options-api-demos/inputs/flatcolorpicker/basic/main.vue
 create mode 100644 vue-options-api-demos/inputs/flatcolorpicker/customization/footer/main.js
 create mode 100644 vue-options-api-demos/inputs/flatcolorpicker/customization/footer/main.vue
 create mode 100644 vue-options-api-demos/inputs/flatcolorpicker/customization/header/main.js
 create mode 100644 vue-options-api-demos/inputs/flatcolorpicker/customization/header/main.vue
 create mode 100644 vue-options-api-demos/inputs/flatcolorpicker/disabled/main.js
 create mode 100644 vue-options-api-demos/inputs/flatcolorpicker/disabled/main.vue
 create mode 100644 vue-options-api-demos/inputs/flatcolorpicker/events/Logger.vue
 create mode 100644 vue-options-api-demos/inputs/flatcolorpicker/events/main.js
 create mode 100644 vue-options-api-demos/inputs/flatcolorpicker/events/main.vue
 create mode 100644 vue-options-api-demos/inputs/flatcolorpicker/keyboard/main.js
 create mode 100644 vue-options-api-demos/inputs/flatcolorpicker/keyboard/main.vue
 create mode 100644 vue-options-api-demos/inputs/floating-labels/main.js
 create mode 100644 vue-options-api-demos/inputs/floating-labels/main.vue
 create mode 100644 vue-options-api-demos/inputs/get-started/main.js
 create mode 100644 vue-options-api-demos/inputs/get-started/main.vue
 create mode 100644 vue-options-api-demos/inputs/globalization/es.json
 create mode 100644 vue-options-api-demos/inputs/globalization/main.js
 create mode 100644 vue-options-api-demos/inputs/globalization/main.vue
 create mode 100644 vue-options-api-demos/inputs/input/appearance/configurator/InputStyleConfigurator copy.vue
 create mode 100644 vue-options-api-demos/inputs/input/appearance/configurator/InputStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/inputs/input/appearance/configurator/main.js
 create mode 100644 vue-options-api-demos/inputs/input/appearance/configurator/main.vue
 create mode 100644 vue-options-api-demos/inputs/input/appearance/fill-mode/main.js
 create mode 100644 vue-options-api-demos/inputs/input/appearance/fill-mode/main.vue
 create mode 100644 vue-options-api-demos/inputs/input/appearance/rounded/main.js
 create mode 100644 vue-options-api-demos/inputs/input/appearance/rounded/main.vue
 create mode 100644 vue-options-api-demos/inputs/input/appearance/size/main.js
 create mode 100644 vue-options-api-demos/inputs/input/appearance/size/main.vue
 create mode 100644 vue-options-api-demos/inputs/input/basic/main.js
 create mode 100644 vue-options-api-demos/inputs/input/basic/main.vue
 create mode 100644 vue-options-api-demos/inputs/input/forms/basic/main.js
 create mode 100644 vue-options-api-demos/inputs/input/forms/basic/main.vue
 create mode 100644 vue-options-api-demos/inputs/input/forms/custom-message/main.js
 create mode 100644 vue-options-api-demos/inputs/input/forms/custom-message/main.vue
 create mode 100644 vue-options-api-demos/inputs/input/forms/disable-styles/main.js
 create mode 100644 vue-options-api-demos/inputs/input/forms/disable-styles/main.vue
 create mode 100644 vue-options-api-demos/inputs/input/forms/override/main.js
 create mode 100644 vue-options-api-demos/inputs/input/forms/override/main.vue
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/adornments/clear-button/main.js
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/adornments/clear-button/main.vue
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/adornments/disabled/InputIcons.vue
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/adornments/disabled/main.js
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/adornments/disabled/main.vue
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/adornments/icon-name/main.js
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/adornments/icon-name/main.vue
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/adornments/loading-icon/main.js
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/adornments/loading-icon/main.vue
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/adornments/prefix/InputIcons.vue
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/adornments/prefix/main.js
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/adornments/prefix/main.vue
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/adornments/separator/main.js
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/adornments/separator/main.vue
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/adornments/suffix/main.js
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/adornments/suffix/main.vue
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/adornments/validation-icon/main.js
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/adornments/validation-icon/main.vue
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/appearance/configurator/MaskedTextBoxStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/appearance/configurator/main.js
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/appearance/configurator/main.vue
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/appearance/fill-mode/main.js
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/appearance/fill-mode/main.vue
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/appearance/rounded/main.js
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/appearance/rounded/main.vue
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/appearance/size/main.js
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/appearance/size/main.vue
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/basic/main.js
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/basic/main.vue
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/disabled/main.js
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/disabled/main.vue
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/forms/custom-message/main.js
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/forms/custom-message/main.vue
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/forms/disable-style/main.js
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/forms/disable-style/main.vue
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/forms/enforce/main.js
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/forms/enforce/main.vue
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/forms/validation/main.js
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/forms/validation/main.vue
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/input-mode/main.js
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/input-mode/main.vue
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/masks/basic/main.js
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/masks/basic/main.vue
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/masks/extend/main.js
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/masks/extend/main.vue
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/readonly/main.js
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/readonly/main.vue
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/valid-state/main.js
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/valid-state/main.vue
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/value/main.js
 create mode 100644 vue-options-api-demos/inputs/maskedtextbox/value/main.vue
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/adornments/clear-button/main.js
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/adornments/clear-button/main.vue
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/adornments/disabled/InputIcons.vue
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/adornments/disabled/main.js
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/adornments/disabled/main.vue
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/adornments/icon-name/main.js
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/adornments/icon-name/main.vue
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/adornments/loading-icon/main.js
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/adornments/loading-icon/main.vue
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/adornments/prefix/InputIcons.vue
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/adornments/prefix/main.js
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/adornments/prefix/main.vue
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/adornments/separator/main.js
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/adornments/separator/main.vue
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/adornments/suffix/main.js
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/adornments/suffix/main.vue
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/adornments/validation-icon/main.js
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/adornments/validation-icon/main.vue
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/appearance/configurator/NumericTextBoxStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/appearance/configurator/main.js
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/appearance/configurator/main.vue
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/appearance/fill-mode/main.js
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/appearance/fill-mode/main.vue
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/appearance/rounded/main.js
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/appearance/rounded/main.vue
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/appearance/size/main.js
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/appearance/size/main.vue
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/basic/main.js
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/basic/main.vue
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/custom-parse-format/main.js
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/custom-parse-format/main.vue
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/formats/main.js
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/formats/main.vue
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/forms/basic/main.js
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/forms/basic/main.vue
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/forms/custom-message/main.js
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/forms/custom-message/main.vue
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/forms/disable-styles/main.js
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/forms/disable-styles/main.vue
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/forms/override/main.js
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/forms/override/main.vue
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/input-mode/main.js
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/input-mode/main.vue
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/keyboard/main.js
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/keyboard/main.vue
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/predefined-step/main.js
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/predefined-step/main.vue
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/spin-buttons/main.js
 create mode 100644 vue-options-api-demos/inputs/numerictextbox/spin-buttons/main.vue
 create mode 100644 vue-options-api-demos/inputs/radiobutton/appearance/main.js
 create mode 100644 vue-options-api-demos/inputs/radiobutton/appearance/main.vue
 create mode 100644 vue-options-api-demos/inputs/radiobutton/disabled/main.js
 create mode 100644 vue-options-api-demos/inputs/radiobutton/disabled/main.vue
 create mode 100644 vue-options-api-demos/inputs/radiobutton/labels/custom-labels/main.js
 create mode 100644 vue-options-api-demos/inputs/radiobutton/labels/custom-labels/main.vue
 create mode 100644 vue-options-api-demos/inputs/radiobutton/labels/setting-up/main.js
 create mode 100644 vue-options-api-demos/inputs/radiobutton/labels/setting-up/main.vue
 create mode 100644 vue-options-api-demos/inputs/radiobutton/overview/main.js
 create mode 100644 vue-options-api-demos/inputs/radiobutton/overview/main.vue
 create mode 100644 vue-options-api-demos/inputs/radiogroup/controlled/main.js
 create mode 100644 vue-options-api-demos/inputs/radiogroup/controlled/main.vue
 create mode 100644 vue-options-api-demos/inputs/radiogroup/default-state/main.js
 create mode 100644 vue-options-api-demos/inputs/radiogroup/default-state/main.vue
 create mode 100644 vue-options-api-demos/inputs/radiogroup/forms/FormContent.vue
 create mode 100644 vue-options-api-demos/inputs/radiogroup/forms/FormInput.vue
 create mode 100644 vue-options-api-demos/inputs/radiogroup/forms/FormRadioGroup.vue
 create mode 100644 vue-options-api-demos/inputs/radiogroup/forms/main.js
 create mode 100644 vue-options-api-demos/inputs/radiogroup/forms/main.vue
 create mode 100644 vue-options-api-demos/inputs/radiogroup/keyboard/main.js
 create mode 100644 vue-options-api-demos/inputs/radiogroup/keyboard/main.vue
 create mode 100644 vue-options-api-demos/inputs/radiogroup/layout/main.js
 create mode 100644 vue-options-api-demos/inputs/radiogroup/layout/main.vue
 create mode 100644 vue-options-api-demos/inputs/radiogroup/overview/main.js
 create mode 100644 vue-options-api-demos/inputs/radiogroup/overview/main.vue
 create mode 100644 vue-options-api-demos/inputs/rangeslider/controlled/main.js
 create mode 100644 vue-options-api-demos/inputs/rangeslider/controlled/main.vue
 create mode 100644 vue-options-api-demos/inputs/rangeslider/disabled/main.js
 create mode 100644 vue-options-api-demos/inputs/rangeslider/disabled/main.vue
 create mode 100644 vue-options-api-demos/inputs/rangeslider/events/Logger.vue
 create mode 100644 vue-options-api-demos/inputs/rangeslider/events/main.js
 create mode 100644 vue-options-api-demos/inputs/rangeslider/events/main.vue
 create mode 100644 vue-options-api-demos/inputs/rangeslider/labels/main.js
 create mode 100644 vue-options-api-demos/inputs/rangeslider/labels/main.vue
 create mode 100644 vue-options-api-demos/inputs/rangeslider/orientation/main.js
 create mode 100644 vue-options-api-demos/inputs/rangeslider/orientation/main.vue
 create mode 100644 vue-options-api-demos/inputs/rangeslider/overview/main.js
 create mode 100644 vue-options-api-demos/inputs/rangeslider/overview/main.vue
 create mode 100644 vue-options-api-demos/inputs/rating/basic/main.js
 create mode 100644 vue-options-api-demos/inputs/rating/basic/main.vue
 create mode 100644 vue-options-api-demos/inputs/rating/controlled/main.js
 create mode 100644 vue-options-api-demos/inputs/rating/controlled/main.vue
 create mode 100644 vue-options-api-demos/inputs/rating/disabled/main.js
 create mode 100644 vue-options-api-demos/inputs/rating/disabled/main.vue
 create mode 100644 vue-options-api-demos/inputs/rating/form-support/FormContent.vue
 create mode 100644 vue-options-api-demos/inputs/rating/form-support/FormInput.vue
 create mode 100644 vue-options-api-demos/inputs/rating/form-support/FormRating.vue
 create mode 100644 vue-options-api-demos/inputs/rating/form-support/main.js
 create mode 100644 vue-options-api-demos/inputs/rating/form-support/main.vue
 create mode 100644 vue-options-api-demos/inputs/rating/icon/main.js
 create mode 100644 vue-options-api-demos/inputs/rating/icon/main.vue
 create mode 100644 vue-options-api-demos/inputs/rating/item-customization/customItem.vue
 create mode 100644 vue-options-api-demos/inputs/rating/item-customization/main.js
 create mode 100644 vue-options-api-demos/inputs/rating/item-customization/main.vue
 create mode 100644 vue-options-api-demos/inputs/rating/items/main.js
 create mode 100644 vue-options-api-demos/inputs/rating/items/main.vue
 create mode 100644 vue-options-api-demos/inputs/rating/label/main.js
 create mode 100644 vue-options-api-demos/inputs/rating/label/main.vue
 create mode 100644 vue-options-api-demos/inputs/rating/navigation/main.js
 create mode 100644 vue-options-api-demos/inputs/rating/navigation/main.vue
 create mode 100644 vue-options-api-demos/inputs/rating/precision/first-full/main.js
 create mode 100644 vue-options-api-demos/inputs/rating/precision/first-full/main.vue
 create mode 100644 vue-options-api-demos/inputs/rating/precision/first-half/main.js
 create mode 100644 vue-options-api-demos/inputs/rating/precision/first-half/main.vue
 create mode 100644 vue-options-api-demos/inputs/rating/precision/main.js
 create mode 100644 vue-options-api-demos/inputs/rating/precision/main.vue
 create mode 100644 vue-options-api-demos/inputs/rating/readonly/main.js
 create mode 100644 vue-options-api-demos/inputs/rating/readonly/main.vue
 create mode 100644 vue-options-api-demos/inputs/rating/selection/main.js
 create mode 100644 vue-options-api-demos/inputs/rating/selection/main.vue
 create mode 100644 vue-options-api-demos/inputs/rtl/main.js
 create mode 100644 vue-options-api-demos/inputs/rtl/main.vue
 create mode 100644 vue-options-api-demos/inputs/shared/CheckboxStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/inputs/shared/FormCheckbox.vue
 create mode 100644 vue-options-api-demos/inputs/shared/FormInput.vue
 create mode 100644 vue-options-api-demos/inputs/shared/FormSwitch.vue
 create mode 100644 vue-options-api-demos/inputs/shared/InputStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/inputs/shared/MaskedTextBoxStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/inputs/shared/NumericTextBoxStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/inputs/shared/RadioButtonStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/inputs/shared/SignatureStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/inputs/shared/SwitchStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/inputs/shared/TextAreaStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/inputs/shared/sample-signature.js
 create mode 100644 vue-options-api-demos/inputs/signature/appearance/all-options/SignatureStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/inputs/signature/appearance/all-options/main.js
 create mode 100644 vue-options-api-demos/inputs/signature/appearance/all-options/main.vue
 create mode 100644 vue-options-api-demos/inputs/signature/appearance/all-options/sample-signature.js
 create mode 100644 vue-options-api-demos/inputs/signature/appearance/color/main.js
 create mode 100644 vue-options-api-demos/inputs/signature/appearance/color/main.vue
 create mode 100644 vue-options-api-demos/inputs/signature/appearance/fill-mode/main.js
 create mode 100644 vue-options-api-demos/inputs/signature/appearance/fill-mode/main.vue
 create mode 100644 vue-options-api-demos/inputs/signature/appearance/roundness/main.js
 create mode 100644 vue-options-api-demos/inputs/signature/appearance/roundness/main.vue
 create mode 100644 vue-options-api-demos/inputs/signature/appearance/size/main.js
 create mode 100644 vue-options-api-demos/inputs/signature/appearance/size/main.vue
 create mode 100644 vue-options-api-demos/inputs/signature/appearance/stroke-width/main.js
 create mode 100644 vue-options-api-demos/inputs/signature/appearance/stroke-width/main.vue
 create mode 100644 vue-options-api-demos/inputs/signature/controlled/export-scale/main.js
 create mode 100644 vue-options-api-demos/inputs/signature/controlled/export-scale/main.vue
 create mode 100644 vue-options-api-demos/inputs/signature/controlled/export-scale/sample-signature.js
 create mode 100644 vue-options-api-demos/inputs/signature/controlled/popup/main.js
 create mode 100644 vue-options-api-demos/inputs/signature/controlled/popup/main.vue
 create mode 100644 vue-options-api-demos/inputs/signature/controlled/value/main.js
 create mode 100644 vue-options-api-demos/inputs/signature/controlled/value/main.vue
 create mode 100644 vue-options-api-demos/inputs/signature/controlled/value/sample-signature.js
 create mode 100644 vue-options-api-demos/inputs/signature/disabled/main.js
 create mode 100644 vue-options-api-demos/inputs/signature/disabled/main.vue
 create mode 100644 vue-options-api-demos/inputs/signature/disabled/sample-signature.js
 create mode 100644 vue-options-api-demos/inputs/signature/events/main.js
 create mode 100644 vue-options-api-demos/inputs/signature/events/main.vue
 create mode 100644 vue-options-api-demos/inputs/signature/forms/kendo/FormContent.vue
 create mode 100644 vue-options-api-demos/inputs/signature/forms/kendo/FormInput.vue
 create mode 100644 vue-options-api-demos/inputs/signature/forms/kendo/FormSignature.vue
 create mode 100644 vue-options-api-demos/inputs/signature/forms/kendo/main.js
 create mode 100644 vue-options-api-demos/inputs/signature/forms/kendo/main.vue
 create mode 100644 vue-options-api-demos/inputs/signature/overview/main.js
 create mode 100644 vue-options-api-demos/inputs/signature/overview/main.vue
 create mode 100644 vue-options-api-demos/inputs/signature/overview/sample-signature.js
 create mode 100644 vue-options-api-demos/inputs/signature/overview/styles.css
 create mode 100644 vue-options-api-demos/inputs/signature/popup/disabled/main.js
 create mode 100644 vue-options-api-demos/inputs/signature/popup/disabled/main.vue
 create mode 100644 vue-options-api-demos/inputs/signature/popup/disabled/sample-signature.js
 create mode 100644 vue-options-api-demos/inputs/signature/popup/scale/main.js
 create mode 100644 vue-options-api-demos/inputs/signature/popup/scale/main.vue
 create mode 100644 vue-options-api-demos/inputs/signature/popup/scale/sample-signature.js
 create mode 100644 vue-options-api-demos/inputs/signature/readonly/main.js
 create mode 100644 vue-options-api-demos/inputs/signature/readonly/main.vue
 create mode 100644 vue-options-api-demos/inputs/signature/readonly/sample-signature.js
 create mode 100644 vue-options-api-demos/inputs/signature/smooth/main.js
 create mode 100644 vue-options-api-demos/inputs/signature/smooth/main.vue
 create mode 100644 vue-options-api-demos/inputs/slider/buttons/main.js
 create mode 100644 vue-options-api-demos/inputs/slider/buttons/main.vue
 create mode 100644 vue-options-api-demos/inputs/slider/controlled/main.js
 create mode 100644 vue-options-api-demos/inputs/slider/controlled/main.vue
 create mode 100644 vue-options-api-demos/inputs/slider/labels/main.js
 create mode 100644 vue-options-api-demos/inputs/slider/labels/main.vue
 create mode 100644 vue-options-api-demos/inputs/slider/orientation/main.js
 create mode 100644 vue-options-api-demos/inputs/slider/orientation/main.vue
 create mode 100644 vue-options-api-demos/inputs/slider/overview/main.js
 create mode 100644 vue-options-api-demos/inputs/slider/overview/main.vue
 create mode 100644 vue-options-api-demos/inputs/switch/appearance/configurator/SwitchStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/inputs/switch/appearance/configurator/main.js
 create mode 100644 vue-options-api-demos/inputs/switch/appearance/configurator/main.vue
 create mode 100644 vue-options-api-demos/inputs/switch/appearance/size/main.js
 create mode 100644 vue-options-api-demos/inputs/switch/appearance/size/main.vue
 create mode 100644 vue-options-api-demos/inputs/switch/appearance/thumb-rounded/main.js
 create mode 100644 vue-options-api-demos/inputs/switch/appearance/thumb-rounded/main.vue
 create mode 100644 vue-options-api-demos/inputs/switch/appearance/track-rounded/main.js
 create mode 100644 vue-options-api-demos/inputs/switch/appearance/track-rounded/main.vue
 create mode 100644 vue-options-api-demos/inputs/switch/controlled/manual/main.js
 create mode 100644 vue-options-api-demos/inputs/switch/controlled/manual/main.vue
 create mode 100644 vue-options-api-demos/inputs/switch/controlled/overview/main.js
 create mode 100644 vue-options-api-demos/inputs/switch/controlled/overview/main.vue
 create mode 100644 vue-options-api-demos/inputs/switch/controlled/readonly/main.js
 create mode 100644 vue-options-api-demos/inputs/switch/controlled/readonly/main.vue
 create mode 100644 vue-options-api-demos/inputs/switch/default/main.js
 create mode 100644 vue-options-api-demos/inputs/switch/default/main.vue
 create mode 100644 vue-options-api-demos/inputs/switch/disabled/main.js
 create mode 100644 vue-options-api-demos/inputs/switch/disabled/main.vue
 create mode 100644 vue-options-api-demos/inputs/switch/events/Logger.vue
 create mode 100644 vue-options-api-demos/inputs/switch/events/main.js
 create mode 100644 vue-options-api-demos/inputs/switch/events/main.vue
 create mode 100644 vue-options-api-demos/inputs/switch/forms-support/custom-message/FormContent.vue
 create mode 100644 vue-options-api-demos/inputs/switch/forms-support/custom-message/FormInput.vue
 create mode 100644 vue-options-api-demos/inputs/switch/forms-support/custom-message/FormSwitch.vue
 create mode 100644 vue-options-api-demos/inputs/switch/forms-support/custom-message/main.js
 create mode 100644 vue-options-api-demos/inputs/switch/forms-support/custom-message/main.vue
 create mode 100644 vue-options-api-demos/inputs/switch/forms-support/form-required/FormContent.vue
 create mode 100644 vue-options-api-demos/inputs/switch/forms-support/form-required/FormInput.vue
 create mode 100644 vue-options-api-demos/inputs/switch/forms-support/form-required/FormSwitch.vue
 create mode 100644 vue-options-api-demos/inputs/switch/forms-support/form-required/main.js
 create mode 100644 vue-options-api-demos/inputs/switch/forms-support/form-required/main.vue
 create mode 100644 vue-options-api-demos/inputs/switch/forms-support/overview/FormContent.vue
 create mode 100644 vue-options-api-demos/inputs/switch/forms-support/overview/FormInput.vue
 create mode 100644 vue-options-api-demos/inputs/switch/forms-support/overview/FormSwitch.vue
 create mode 100644 vue-options-api-demos/inputs/switch/forms-support/overview/main.js
 create mode 100644 vue-options-api-demos/inputs/switch/forms-support/overview/main.vue
 create mode 100644 vue-options-api-demos/inputs/switch/keyboard/main.js
 create mode 100644 vue-options-api-demos/inputs/switch/keyboard/main.vue
 create mode 100644 vue-options-api-demos/inputs/switch/labels/main.js
 create mode 100644 vue-options-api-demos/inputs/switch/labels/main.vue
 create mode 100644 vue-options-api-demos/inputs/switch/overview/main.js
 create mode 100644 vue-options-api-demos/inputs/switch/overview/main.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/adornments/clear-button/main.js
 create mode 100644 vue-options-api-demos/inputs/textarea/adornments/clear-button/main.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/adornments/disabled/InputIcons.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/adornments/disabled/main.js
 create mode 100644 vue-options-api-demos/inputs/textarea/adornments/disabled/main.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/adornments/icon-name/main.js
 create mode 100644 vue-options-api-demos/inputs/textarea/adornments/icon-name/main.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/adornments/loading-icon/main.js
 create mode 100644 vue-options-api-demos/inputs/textarea/adornments/loading-icon/main.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/adornments/prefix/InputIcons.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/adornments/prefix/main.js
 create mode 100644 vue-options-api-demos/inputs/textarea/adornments/prefix/main.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/adornments/separator/main.js
 create mode 100644 vue-options-api-demos/inputs/textarea/adornments/separator/main.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/adornments/suffix/InputIcons.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/adornments/suffix/main.js
 create mode 100644 vue-options-api-demos/inputs/textarea/adornments/suffix/main.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/adornments/validation-icon/main.js
 create mode 100644 vue-options-api-demos/inputs/textarea/adornments/validation-icon/main.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/appearance/configurator/TextAreaStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/appearance/configurator/main.js
 create mode 100644 vue-options-api-demos/inputs/textarea/appearance/configurator/main.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/appearance/fill-mode/main.js
 create mode 100644 vue-options-api-demos/inputs/textarea/appearance/fill-mode/main.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/appearance/rounded/main.js
 create mode 100644 vue-options-api-demos/inputs/textarea/appearance/rounded/main.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/appearance/size/main.js
 create mode 100644 vue-options-api-demos/inputs/textarea/appearance/size/main.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/controlled/main.js
 create mode 100644 vue-options-api-demos/inputs/textarea/controlled/main.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/counter/main.js
 create mode 100644 vue-options-api-demos/inputs/textarea/counter/main.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/default/main.js
 create mode 100644 vue-options-api-demos/inputs/textarea/default/main.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/disabled/main.js
 create mode 100644 vue-options-api-demos/inputs/textarea/disabled/main.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/events/Logger.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/events/main.js
 create mode 100644 vue-options-api-demos/inputs/textarea/events/main.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/forms/FormContent.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/forms/FormInput.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/forms/FormTextArea.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/forms/main.js
 create mode 100644 vue-options-api-demos/inputs/textarea/forms/main.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/input-mode/main.js
 create mode 100644 vue-options-api-demos/inputs/textarea/input-mode/main.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/overview/FormContent.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/overview/FormTextArea.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/overview/main.js
 create mode 100644 vue-options-api-demos/inputs/textarea/overview/main.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/sizing/auto-sizing/main.js
 create mode 100644 vue-options-api-demos/inputs/textarea/sizing/auto-sizing/main.vue
 create mode 100644 vue-options-api-demos/inputs/textarea/sizing/initial/main.js
 create mode 100644 vue-options-api-demos/inputs/textarea/sizing/initial/main.vue
 create mode 100644 vue-options-api-demos/inputs/textbox/adornments/main.js
 create mode 100644 vue-options-api-demos/inputs/textbox/adornments/main.vue
 create mode 100644 vue-options-api-demos/inputs/textbox/appearance/configurator/InputStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/inputs/textbox/appearance/configurator/main.js
 create mode 100644 vue-options-api-demos/inputs/textbox/appearance/configurator/main.vue
 create mode 100644 vue-options-api-demos/inputs/textbox/appearance/fill-mode/main.js
 create mode 100644 vue-options-api-demos/inputs/textbox/appearance/fill-mode/main.vue
 create mode 100644 vue-options-api-demos/inputs/textbox/appearance/rounded/main.js
 create mode 100644 vue-options-api-demos/inputs/textbox/appearance/rounded/main.vue
 create mode 100644 vue-options-api-demos/inputs/textbox/appearance/size/main.js
 create mode 100644 vue-options-api-demos/inputs/textbox/appearance/size/main.vue
 create mode 100644 vue-options-api-demos/inputs/textbox/character-count/main.js
 create mode 100644 vue-options-api-demos/inputs/textbox/character-count/main.vue
 create mode 100644 vue-options-api-demos/inputs/textbox/clear-button/main.js
 create mode 100644 vue-options-api-demos/inputs/textbox/clear-button/main.vue
 create mode 100644 vue-options-api-demos/inputs/textbox/clear-value/main.js
 create mode 100644 vue-options-api-demos/inputs/textbox/clear-value/main.vue
 create mode 100644 vue-options-api-demos/inputs/textbox/disabled-adornments/TextBoxIcons.vue
 create mode 100644 vue-options-api-demos/inputs/textbox/disabled-adornments/main.js
 create mode 100644 vue-options-api-demos/inputs/textbox/disabled-adornments/main.vue
 create mode 100644 vue-options-api-demos/inputs/textbox/disabled/main.js
 create mode 100644 vue-options-api-demos/inputs/textbox/disabled/main.vue
 create mode 100644 vue-options-api-demos/inputs/textbox/forms-support/FormContent.vue
 create mode 100644 vue-options-api-demos/inputs/textbox/forms-support/FormTextBox.vue
 create mode 100644 vue-options-api-demos/inputs/textbox/forms-support/main.js
 create mode 100644 vue-options-api-demos/inputs/textbox/forms-support/main.vue
 create mode 100644 vue-options-api-demos/inputs/textbox/forms-support/validators.js
 create mode 100644 vue-options-api-demos/inputs/textbox/icon-name/main.js
 create mode 100644 vue-options-api-demos/inputs/textbox/icon-name/main.vue
 create mode 100644 vue-options-api-demos/inputs/textbox/input-mode/main.js
 create mode 100644 vue-options-api-demos/inputs/textbox/input-mode/main.vue
 create mode 100644 vue-options-api-demos/inputs/textbox/loading-icon/main.js
 create mode 100644 vue-options-api-demos/inputs/textbox/loading-icon/main.vue
 create mode 100644 vue-options-api-demos/inputs/textbox/overview/main.js
 create mode 100644 vue-options-api-demos/inputs/textbox/overview/main.vue
 create mode 100644 vue-options-api-demos/inputs/textbox/overview/overview-styles.css
 create mode 100644 vue-options-api-demos/inputs/textbox/readonly/main.js
 create mode 100644 vue-options-api-demos/inputs/textbox/readonly/main.vue
 create mode 100644 vue-options-api-demos/inputs/textbox/separator/main.js
 create mode 100644 vue-options-api-demos/inputs/textbox/separator/main.vue
 create mode 100644 vue-options-api-demos/inputs/textbox/validation-icon-built-in/main.js
 create mode 100644 vue-options-api-demos/inputs/textbox/validation-icon-built-in/main.vue
 create mode 100644 vue-options-api-demos/inputs/textbox/validation-icon/main.js
 create mode 100644 vue-options-api-demos/inputs/textbox/validation-icon/main.vue
 create mode 100644 vue-options-api-demos/intl/custom-service/CustomFormatIntlProvider.js
 create mode 100644 vue-options-api-demos/intl/custom-service/CustomFormatIntlService.js
 create mode 100644 vue-options-api-demos/intl/custom-service/DateFormatter.vue
 create mode 100644 vue-options-api-demos/intl/custom-service/main.js
 create mode 100644 vue-options-api-demos/intl/custom-service/main.vue
 create mode 100644 vue-options-api-demos/intl/date-formatting/main.js
 create mode 100644 vue-options-api-demos/intl/date-formatting/main.vue
 create mode 100644 vue-options-api-demos/intl/date-parsing/main.js
 create mode 100644 vue-options-api-demos/intl/date-parsing/main.vue
 create mode 100644 vue-options-api-demos/intl/general-formatting/FormattedDate.vue
 create mode 100644 vue-options-api-demos/intl/general-formatting/FormattedNumber.vue
 create mode 100644 vue-options-api-demos/intl/general-formatting/FormattedText.vue
 create mode 100644 vue-options-api-demos/intl/general-formatting/main.js
 create mode 100644 vue-options-api-demos/intl/general-formatting/main.vue
 create mode 100644 vue-options-api-demos/intl/internationalization/getting-started/main.js
 create mode 100644 vue-options-api-demos/intl/internationalization/getting-started/main.vue
 create mode 100644 vue-options-api-demos/intl/internationalization/overview/Chooser.vue
 create mode 100644 vue-options-api-demos/intl/internationalization/overview/CurrencyFormatter.vue
 create mode 100644 vue-options-api-demos/intl/internationalization/overview/DateFormatter.vue
 create mode 100644 vue-options-api-demos/intl/internationalization/overview/main.js
 create mode 100644 vue-options-api-demos/intl/internationalization/overview/main.vue
 create mode 100644 vue-options-api-demos/intl/load-prebuild-data/DateFormatter.vue
 create mode 100644 vue-options-api-demos/intl/load-prebuild-data/main.js
 create mode 100644 vue-options-api-demos/intl/load-prebuild-data/main.vue
 create mode 100644 vue-options-api-demos/intl/localization-overview/main.js
 create mode 100644 vue-options-api-demos/intl/localization-overview/main.vue
 create mode 100644 vue-options-api-demos/intl/localization-overview/messages-es.json
 create mode 100644 vue-options-api-demos/intl/localization-overview/messages-he.json
 create mode 100644 vue-options-api-demos/intl/localization/Chooser.vue
 create mode 100644 vue-options-api-demos/intl/localization/MessageComponent.vue
 create mode 100644 vue-options-api-demos/intl/localization/main.js
 create mode 100644 vue-options-api-demos/intl/localization/main.vue
 create mode 100644 vue-options-api-demos/intl/localization/messages.js
 create mode 100644 vue-options-api-demos/intl/number-formatting/FormattedNumber.vue
 create mode 100644 vue-options-api-demos/intl/number-formatting/main.js
 create mode 100644 vue-options-api-demos/intl/number-formatting/main.vue
 create mode 100644 vue-options-api-demos/intl/number-parsing/main.js
 create mode 100644 vue-options-api-demos/intl/number-parsing/main.vue
 create mode 100644 vue-options-api-demos/intl/reacting/Chooser.vue
 create mode 100644 vue-options-api-demos/intl/reacting/CurrencyFormatter.vue
 create mode 100644 vue-options-api-demos/intl/reacting/DateFormatter.vue
 create mode 100644 vue-options-api-demos/intl/reacting/main.js
 create mode 100644 vue-options-api-demos/intl/reacting/main.vue
 create mode 100644 vue-options-api-demos/intl/rtl-support/main.js
 create mode 100644 vue-options-api-demos/intl/rtl-support/main.vue
 create mode 100644 vue-options-api-demos/intl/shared/Chooser.vue
 create mode 100644 vue-options-api-demos/intl/use-in-component/DateFormatter.vue
 create mode 100644 vue-options-api-demos/intl/use-in-component/main.js
 create mode 100644 vue-options-api-demos/intl/use-in-component/main.vue
 create mode 100644 vue-options-api-demos/labels/error/basic/main.js
 create mode 100644 vue-options-api-demos/labels/error/basic/main.vue
 create mode 100644 vue-options-api-demos/labels/error/direction/main.js
 create mode 100644 vue-options-api-demos/labels/error/direction/main.vue
 create mode 100644 vue-options-api-demos/labels/floatinglabel/basic/main.js
 create mode 100644 vue-options-api-demos/labels/floatinglabel/basic/main.vue
 create mode 100644 vue-options-api-demos/labels/floatinglabel/custom/main.js
 create mode 100644 vue-options-api-demos/labels/floatinglabel/custom/main.vue
 create mode 100644 vue-options-api-demos/labels/floatinglabel/optional/main.js
 create mode 100644 vue-options-api-demos/labels/floatinglabel/optional/main.vue
 create mode 100644 vue-options-api-demos/labels/floatinglabel/placeholder/main.js
 create mode 100644 vue-options-api-demos/labels/floatinglabel/placeholder/main.vue
 create mode 100644 vue-options-api-demos/labels/floatinglabel/validation/main.js
 create mode 100644 vue-options-api-demos/labels/floatinglabel/validation/main.vue
 create mode 100644 vue-options-api-demos/labels/hint/basic/main.js
 create mode 100644 vue-options-api-demos/labels/hint/basic/main.vue
 create mode 100644 vue-options-api-demos/labels/hint/direction/main.js
 create mode 100644 vue-options-api-demos/labels/hint/direction/main.vue
 create mode 100644 vue-options-api-demos/labels/label/basic/main.js
 create mode 100644 vue-options-api-demos/labels/label/basic/main.vue
 create mode 100644 vue-options-api-demos/labels/label/custom/main.js
 create mode 100644 vue-options-api-demos/labels/label/custom/main.vue
 create mode 100644 vue-options-api-demos/labels/label/optional/main.js
 create mode 100644 vue-options-api-demos/labels/label/optional/main.vue
 create mode 100644 vue-options-api-demos/labels/label/validation/main.js
 create mode 100644 vue-options-api-demos/labels/label/validation/main.vue
 create mode 100644 vue-options-api-demos/layout/actionsheet/accessibility/main.js
 create mode 100644 vue-options-api-demos/layout/actionsheet/accessibility/main.vue
 create mode 100644 vue-options-api-demos/layout/actionsheet/animation/main.js
 create mode 100644 vue-options-api-demos/layout/actionsheet/animation/main.vue
 create mode 100644 vue-options-api-demos/layout/actionsheet/custom-rendering/content/main.js
 create mode 100644 vue-options-api-demos/layout/actionsheet/custom-rendering/content/main.vue
 create mode 100644 vue-options-api-demos/layout/actionsheet/custom-rendering/footer/main.js
 create mode 100644 vue-options-api-demos/layout/actionsheet/custom-rendering/footer/main.vue
 create mode 100644 vue-options-api-demos/layout/actionsheet/custom-rendering/header/main.js
 create mode 100644 vue-options-api-demos/layout/actionsheet/custom-rendering/header/main.vue
 create mode 100644 vue-options-api-demos/layout/actionsheet/events/Logger.vue
 create mode 100644 vue-options-api-demos/layout/actionsheet/events/main.js
 create mode 100644 vue-options-api-demos/layout/actionsheet/events/main.vue
 create mode 100644 vue-options-api-demos/layout/actionsheet/items/disabling/main.js
 create mode 100644 vue-options-api-demos/layout/actionsheet/items/disabling/main.vue
 create mode 100644 vue-options-api-demos/layout/actionsheet/items/groups/main.js
 create mode 100644 vue-options-api-demos/layout/actionsheet/items/groups/main.vue
 create mode 100644 vue-options-api-demos/layout/actionsheet/items/icons/main.js
 create mode 100644 vue-options-api-demos/layout/actionsheet/items/icons/main.vue
 create mode 100644 vue-options-api-demos/layout/actionsheet/items/overview/main.js
 create mode 100644 vue-options-api-demos/layout/actionsheet/items/overview/main.vue
 create mode 100644 vue-options-api-demos/layout/actionsheet/items/styling/main.js
 create mode 100644 vue-options-api-demos/layout/actionsheet/items/styling/main.vue
 create mode 100644 vue-options-api-demos/layout/actionsheet/items/title/main.js
 create mode 100644 vue-options-api-demos/layout/actionsheet/items/title/main.vue
 create mode 100644 vue-options-api-demos/layout/actionsheet/keyboard-navigation/main.js
 create mode 100644 vue-options-api-demos/layout/actionsheet/keyboard-navigation/main.vue
 create mode 100644 vue-options-api-demos/layout/actionsheet/overview/main.js
 create mode 100644 vue-options-api-demos/layout/actionsheet/overview/main.vue
 create mode 100644 vue-options-api-demos/layout/appbar/overview/main.js
 create mode 100644 vue-options-api-demos/layout/appbar/overview/main.vue
 create mode 100644 vue-options-api-demos/layout/appbar/position-mode/main.js
 create mode 100644 vue-options-api-demos/layout/appbar/position-mode/main.vue
 create mode 100644 vue-options-api-demos/layout/appbar/position/main.js
 create mode 100644 vue-options-api-demos/layout/appbar/position/main.vue
 create mode 100644 vue-options-api-demos/layout/appbar/responsive-design/main.js
 create mode 100644 vue-options-api-demos/layout/appbar/responsive-design/main.vue
 create mode 100644 vue-options-api-demos/layout/appbar/sections/main.js
 create mode 100644 vue-options-api-demos/layout/appbar/sections/main.vue
 create mode 100644 vue-options-api-demos/layout/appbar/separators/main.js
 create mode 100644 vue-options-api-demos/layout/appbar/separators/main.vue
 create mode 100644 vue-options-api-demos/layout/appbar/spacings/main.js
 create mode 100644 vue-options-api-demos/layout/appbar/spacings/main.vue
 create mode 100644 vue-options-api-demos/layout/appbar/theme-color/main.js
 create mode 100644 vue-options-api-demos/layout/appbar/theme-color/main.vue
 create mode 100644 vue-options-api-demos/layout/avatar/appearance/border/main.js
 create mode 100644 vue-options-api-demos/layout/avatar/appearance/border/main.vue
 create mode 100644 vue-options-api-demos/layout/avatar/appearance/fill-mode/main.js
 create mode 100644 vue-options-api-demos/layout/avatar/appearance/fill-mode/main.vue
 create mode 100644 vue-options-api-demos/layout/avatar/appearance/rounded/main.js
 create mode 100644 vue-options-api-demos/layout/avatar/appearance/rounded/main.vue
 create mode 100644 vue-options-api-demos/layout/avatar/appearance/shapes/main.js
 create mode 100644 vue-options-api-demos/layout/avatar/appearance/shapes/main.vue
 create mode 100644 vue-options-api-demos/layout/avatar/appearance/size/main.js
 create mode 100644 vue-options-api-demos/layout/avatar/appearance/size/main.vue
 create mode 100644 vue-options-api-demos/layout/avatar/appearance/theme-color/main.js
 create mode 100644 vue-options-api-demos/layout/avatar/appearance/theme-color/main.vue
 create mode 100644 vue-options-api-demos/layout/avatar/overview/main.js
 create mode 100644 vue-options-api-demos/layout/avatar/overview/main.vue
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/appearance/BottomNavigationStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/appearance/main.js
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/appearance/main.vue
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/basic-usage/Calendar.vue
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/basic-usage/Inbox.vue
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/basic-usage/Profile.vue
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/basic-usage/index.js
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/basic-usage/main.js
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/basic-usage/main.vue
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/custom-rendering/main.js
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/custom-rendering/main.vue
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/fill/BottomNavigationStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/fill/main.js
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/fill/main.vue
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/item-content/main.js
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/item-content/main.vue
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/item-flow/main.js
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/item-flow/main.vue
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/item-render/main.js
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/item-render/main.vue
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/position-mode/main.js
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/position-mode/main.vue
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/routing/Bills.vue
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/routing/Home.vue
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/routing/More.vue
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/routing/Payments.vue
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/routing/Services.vue
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/routing/index.js
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/routing/main.js
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/routing/main.vue
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/theme-color/BottomNavigationStyleConfigurator.vue
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/theme-color/main.js
 create mode 100644 vue-options-api-demos/layout/bottomnavigation/theme-color/main.vue
 create mode 100644 vue-options-api-demos/layout/card/actions/main.js
 create mode 100644 vue-options-api-demos/layout/card/actions/main.vue
 create mode 100644 vue-options-api-demos/layout/card/layouts/main.js
 create mode 100644 vue-options-api-demos/layout/card/layouts/main.vue
 create mode 100644 vue-options-api-demos/layout/card/orientation/main.js
 create mode 100644 vue-options-api-demos/layout/card/orientation/main.vue
 create mode 100644 vue-options-api-demos/layout/card/overview/main.js
 create mode 100644 vue-options-api-demos/layout/card/overview/main.vue
 create mode 100644 vue-options-api-demos/layout/card/types/main.js
 create mode 100644 vue-options-api-demos/layout/card/types/main.vue
 create mode 100644 vue-options-api-demos/layout/context-menu/data-binding/local/main.js
 create mode 100644 vue-options-api-demos/layout/context-menu/data-binding/local/main.vue
 create mode 100644 vue-options-api-demos/layout/context-menu/data-binding/remote/main.js
 create mode 100644 vue-options-api-demos/layout/context-menu/data-binding/remote/main.vue
 create mode 100644 vue-options-api-demos/layout/context-menu/events/Logger.vue
 create mode 100644 vue-options-api-demos/layout/context-menu/events/main.js
 create mode 100644 vue-options-api-demos/layout/context-menu/events/main.vue
 create mode 100644 vue-options-api-demos/layout/context-menu/items/properties/disabled/main.js
 create mode 100644 vue-options-api-demos/layout/context-menu/items/properties/disabled/main.vue
 create mode 100644 vue-options-api-demos/layout/context-menu/items/properties/icon/main.js
 create mode 100644 vue-options-api-demos/layout/context-menu/items/properties/icon/main.vue
 create mode 100644 vue-options-api-demos/layout/context-menu/items/properties/styles/main.js
 create mode 100644 vue-options-api-demos/layout/context-menu/items/properties/styles/main.vue
 create mode 100644 vue-options-api-demos/layout/context-menu/items/properties/text/main.js
 create mode 100644 vue-options-api-demos/layout/context-menu/items/properties/text/main.vue
 create mode 100644 vue-options-api-demos/layout/context-menu/items/properties/url/main.js
 create mode 100644 vue-options-api-demos/layout/context-menu/items/properties/url/main.vue
 create mode 100644 vue-options-api-demos/layout/context-menu/items/rendering/content-render/main.js
 create mode 100644 vue-options-api-demos/layout/context-menu/items/rendering/content-render/main.vue
 create mode 100644 vue-options-api-demos/layout/context-menu/items/rendering/item-render/main.js
 create mode 100644 vue-options-api-demos/layout/context-menu/items/rendering/item-render/main.vue
 create mode 100644 vue-options-api-demos/layout/context-menu/items/rendering/link-render/main.js
 create mode 100644 vue-options-api-demos/layout/context-menu/items/rendering/link-render/main.vue
 create mode 100644 vue-options-api-demos/layout/context-menu/items/rendering/menu-item-render/main.js
 create mode 100644 vue-options-api-demos/layout/context-menu/items/rendering/menu-item-render/main.vue
 create mode 100644 vue-options-api-demos/layout/context-menu/items/rendering/menu-link-render/main.js
 create mode 100644 vue-options-api-demos/layout/context-menu/items/rendering/menu-link-render/main.vue
 create mode 100644 vue-options-api-demos/layout/context-menu/open-close/main.js
 create mode 100644 vue-options-api-demos/layout/context-menu/open-close/main.vue
 create mode 100644 vue-options-api-demos/layout/context-menu/overview/main.js
 create mode 100644 vue-options-api-demos/layout/context-menu/overview/main.vue
 create mode 100644 vue-options-api-demos/layout/context-menu/vertical/main.js
 create mode 100644 vue-options-api-demos/layout/context-menu/vertical/main.vue
 create mode 100644 vue-options-api-demos/layout/drawer/custom-render/Berlin.vue
 create mode 100644 vue-options-api-demos/layout/drawer/custom-render/Madrid.vue
 create mode 100644 vue-options-api-demos/layout/drawer/custom-render/Paris.vue
 create mode 100644 vue-options-api-demos/layout/drawer/custom-render/Rome.vue
 create mode 100644 vue-options-api-demos/layout/drawer/custom-render/index.js
 create mode 100644 vue-options-api-demos/layout/drawer/custom-render/main.js
 create mode 100644 vue-options-api-demos/layout/drawer/custom-render/main.vue
 create mode 100644 vue-options-api-demos/layout/drawer/custom-render/styles.css
 create mode 100644 vue-options-api-demos/layout/drawer/display-modes/main.js
 create mode 100644 vue-options-api-demos/layout/drawer/display-modes/main.vue
 create mode 100644 vue-options-api-demos/layout/drawer/events/Logger.vue
 create mode 100644 vue-options-api-demos/layout/drawer/events/main.js
 create mode 100644 vue-options-api-demos/layout/drawer/events/main.vue
 create mode 100644 vue-options-api-demos/layout/drawer/events/styles.css
 create mode 100644 vue-options-api-demos/layout/drawer/expanded/main.js
 create mode 100644 vue-options-api-demos/layout/drawer/expanded/main.vue
 create mode 100644 vue-options-api-demos/layout/drawer/expanded/styles.css
 create mode 100644 vue-options-api-demos/layout/drawer/getting-started/Attachments.vue
 create mode 100644 vue-options-api-demos/layout/drawer/getting-started/Calendar.vue
 create mode 100644 vue-options-api-demos/layout/drawer/getting-started/Favourites.vue
 create mode 100644 vue-options-api-demos/layout/drawer/getting-started/Inbox.vue
 create mode 100644 vue-options-api-demos/layout/drawer/getting-started/Notifications.vue
 create mode 100644 vue-options-api-demos/layout/drawer/getting-started/index.js
 create mode 100644 vue-options-api-demos/layout/drawer/getting-started/main.js
 create mode 100644 vue-options-api-demos/layout/drawer/getting-started/main.vue
 create mode 100644 vue-options-api-demos/layout/drawer/getting-started/styles.css
 create mode 100644 vue-options-api-demos/layout/drawer/hierarchical/Education.vue
 create mode 100644 vue-options-api-demos/layout/drawer/hierarchical/Europe.vue
 create mode 100644 vue-options-api-demos/layout/drawer/hierarchical/Food.vue
 create mode 100644 vue-options-api-demos/layout/drawer/hierarchical/ItalianFood.vue
 create mode 100644 vue-options-api-demos/layout/drawer/hierarchical/JapaneseFood.vue
 create mode 100644 vue-options-api-demos/layout/drawer/hierarchical/NorthAmerica.vue
 create mode 100644 vue-options-api-demos/layout/drawer/hierarchical/Travel.vue
 create mode 100644 vue-options-api-demos/layout/drawer/hierarchical/index.js
 create mode 100644 vue-options-api-demos/layout/drawer/hierarchical/main.js
 create mode 100644 vue-options-api-demos/layout/drawer/hierarchical/main.vue
 create mode 100644 vue-options-api-demos/layout/drawer/hierarchical/styles.css
 create mode 100644 vue-options-api-demos/layout/drawer/mini-mode/main.js
 create mode 100644 vue-options-api-demos/layout/drawer/mini-mode/main.vue
 create mode 100644 vue-options-api-demos/layout/drawer/positioning/main.js
 create mode 100644 vue-options-api-demos/layout/drawer/positioning/main.vue
 create mode 100644 vue-options-api-demos/layout/drawer/routing/About.vue
 create mode 100644 vue-options-api-demos/layout/drawer/routing/Home.vue
 create mode 100644 vue-options-api-demos/layout/drawer/routing/Products.vue
 create mode 100644 vue-options-api-demos/layout/drawer/routing/index.js
 create mode 100644 vue-options-api-demos/layout/drawer/routing/main.js
 create mode 100644 vue-options-api-demos/layout/drawer/routing/main.vue
 create mode 100644 vue-options-api-demos/layout/drawer/routing/styles.css
 create mode 100644 vue-options-api-demos/layout/drawer/templates/content/index.js
 create mode 100644 vue-options-api-demos/layout/drawer/templates/content/main.js
 create mode 100644 vue-options-api-demos/layout/drawer/templates/content/main.vue
 create mode 100644 vue-options-api-demos/layout/drawer/templates/header-footer/Attachments.vue
 create mode 100644 vue-options-api-demos/layout/drawer/templates/header-footer/Calendar.vue
 create mode 100644 vue-options-api-demos/layout/drawer/templates/header-footer/Favourites.vue
 create mode 100644 vue-options-api-demos/layout/drawer/templates/header-footer/Inbox.vue
 create mode 100644 vue-options-api-demos/layout/drawer/templates/header-footer/Notifications.vue
 create mode 100644 vue-options-api-demos/layout/drawer/templates/header-footer/index.js
 create mode 100644 vue-options-api-demos/layout/drawer/templates/header-footer/main.js
 create mode 100644 vue-options-api-demos/layout/drawer/templates/header-footer/main.vue
 create mode 100644 vue-options-api-demos/layout/drawer/templates/header-footer/styles.css
 create mode 100644 vue-options-api-demos/layout/expansionpanel/animations/data.js
 create mode 100644 vue-options-api-demos/layout/expansionpanel/animations/main.js
 create mode 100644 vue-options-api-demos/layout/expansionpanel/animations/main.vue
 create mode 100644 vue-options-api-demos/layout/expansionpanel/animations/styles.css
 create mode 100644 vue-options-api-demos/layout/expansionpanel/disabled/main.js
 create mode 100644 vue-options-api-demos/layout/expansionpanel/disabled/main.vue
 create mode 100644 vue-options-api-demos/layout/expansionpanel/events/Logger.vue
 create mode 100644 vue-options-api-demos/layout/expansionpanel/events/data.js
 create mode 100644 vue-options-api-demos/layout/expansionpanel/events/main.js
 create mode 100644 vue-options-api-demos/layout/expansionpanel/events/main.vue
 create mode 100644 vue-options-api-demos/layout/expansionpanel/events/styles.css
 create mode 100644 vue-options-api-demos/layout/expansionpanel/icons/main.js
 create mode 100644 vue-options-api-demos/layout/expansionpanel/icons/main.vue
 create mode 100644 vue-options-api-demos/layout/expansionpanel/overview/data.js
 create mode 100644 vue-options-api-demos/layout/expansionpanel/overview/main.js
 create mode 100644 vue-options-api-demos/layout/expansionpanel/overview/main.vue
 create mode 100644 vue-options-api-demos/layout/expansionpanel/overview/styles.css
 create mode 100644 vue-options-api-demos/layout/get-started/main.js
 create mode 100644 vue-options-api-demos/layout/get-started/main.vue
 create mode 100644 vue-options-api-demos/layout/globalization/AccountDetails.vue
 create mode 100644 vue-options-api-demos/layout/globalization/AvatarComponent.vue
 create mode 100644 vue-options-api-demos/layout/globalization/CardComponent.vue
 create mode 100644 vue-options-api-demos/layout/globalization/FormInput.vue
 create mode 100644 vue-options-api-demos/layout/globalization/MenuComponent.vue
 create mode 100644 vue-options-api-demos/layout/globalization/PanelBarComponent.vue
 create mode 100644 vue-options-api-demos/layout/globalization/PersonalDetails.vue
 create mode 100644 vue-options-api-demos/layout/globalization/RegisterComponent.vue
 create mode 100644 vue-options-api-demos/layout/globalization/SplitterComponent.vue
 create mode 100644 vue-options-api-demos/layout/globalization/StepperComponent.vue
 create mode 100644 vue-options-api-demos/layout/globalization/TabStripComponent.vue
 create mode 100644 vue-options-api-demos/layout/globalization/TileLayoutComponent.vue
 create mode 100644 vue-options-api-demos/layout/globalization/WizardComponent.vue
 create mode 100644 vue-options-api-demos/layout/globalization/content-overview.js
 create mode 100644 vue-options-api-demos/layout/globalization/index.js
 create mode 100644 vue-options-api-demos/layout/globalization/main.js
 create mode 100644 vue-options-api-demos/layout/globalization/main.vue
 create mode 100644 vue-options-api-demos/layout/globalization/panelbar-styles.css
 create mode 100644 vue-options-api-demos/layout/globalization/splitter-styles.css
 create mode 100644 vue-options-api-demos/layout/globalization/styles.css
 create mode 100644 vue-options-api-demos/layout/globalization/validators.js
 create mode 100644 vue-options-api-demos/layout/gridlayout/items/main.js
 create mode 100644 vue-options-api-demos/layout/gridlayout/items/main.vue
 create mode 100644 vue-options-api-demos/layout/gridlayout/items/styles.css
 create mode 100644 vue-options-api-demos/layout/gridlayout/layout/gaps/main.js
 create mode 100644 vue-options-api-demos/layout/gridlayout/layout/gaps/main.vue
 create mode 100644 vue-options-api-demos/layout/gridlayout/layout/gaps/styles.css
 create mode 100644 vue-options-api-demos/layout/gridlayout/layout/horizontalalign/main.js
 create mode 100644 vue-options-api-demos/layout/gridlayout/layout/horizontalalign/main.vue
 create mode 100644 vue-options-api-demos/layout/gridlayout/layout/horizontalalign/styles.css
 create mode 100644 vue-options-api-demos/layout/gridlayout/layout/rows-cols/main.js
 create mode 100644 vue-options-api-demos/layout/gridlayout/layout/rows-cols/main.vue
 create mode 100644 vue-options-api-demos/layout/gridlayout/layout/rows-cols/styles.css
 create mode 100644 vue-options-api-demos/layout/gridlayout/layout/verticalalign/main.js
 create mode 100644 vue-options-api-demos/layout/gridlayout/layout/verticalalign/main.vue
 create mode 100644 vue-options-api-demos/layout/gridlayout/layout/verticalalign/styles.css
 create mode 100644 vue-options-api-demos/layout/gridlayout/overview/RecommendedArticle.vue
 create mode 100644 vue-options-api-demos/layout/gridlayout/overview/TrendingArticle.vue
 create mode 100644 vue-options-api-demos/layout/gridlayout/overview/articles-info.js
 create mode 100644 vue-options-api-demos/layout/gridlayout/overview/main.js
 create mode 100644 vue-options-api-demos/layout/gridlayout/overview/main.vue
 create mode 100644 vue-options-api-demos/layout/gridlayout/overview/styles.css
 create mode 100644 vue-options-api-demos/layout/menu/data-binding/local/main.js
 create mode 100644 vue-options-api-demos/layout/menu/data-binding/local/main.vue
 create mode 100644 vue-options-api-demos/layout/menu/data-binding/remote/main.js
 create mode 100644 vue-options-api-demos/layout/menu/data-binding/remote/main.vue
 create mode 100644 vue-options-api-demos/layout/menu/events/Logger.vue
 create mode 100644 vue-options-api-demos/layout/menu/events/main.js
 create mode 100644 vue-options-api-demos/layout/menu/events/main.vue
 create mode 100644 vue-options-api-demos/layout/menu/items/properties/disabled/main.js
 create mode 100644 vue-options-api-demos/layout/menu/items/properties/disabled/main.vue
 create mode 100644 vue-options-api-demos/layout/menu/items/properties/icon/main.js
 create mode 100644 vue-options-api-demos/layout/menu/items/properties/icon/main.vue
 create mode 100644 vue-options-api-demos/layout/menu/items/properties/separator/main.js
 create mode 100644 vue-options-api-demos/layout/menu/items/properties/separator/main.vue
 create mode 100644 vue-options-api-demos/layout/menu/items/properties/styles/main.js
 create mode 100644 vue-options-api-demos/layout/menu/items/properties/styles/main.vue
 create mode 100644 vue-options-api-demos/layout/menu/items/properties/styles/styles.css
 create mode 100644 vue-options-api-demos/layout/menu/items/properties/text/main.js
 create mode 100644 vue-options-api-demos/layout/menu/items/properties/text/main.vue
 create mode 100644 vue-options-api-demos/layout/menu/items/properties/url/main.js
 create mode 100644 vue-options-api-demos/layout/menu/items/properties/url/main.vue
 create mode 100644 vue-options-api-demos/layout/menu/items/rendering/content-render-with-popup/items.json
 create mode 100644 vue-options-api-demos/layout/menu/items/rendering/content-render-with-popup/main.js
 create mode 100644 vue-options-api-demos/layout/menu/items/rendering/content-render-with-popup/main.vue
 create mode 100644 vue-options-api-demos/layout/menu/items/rendering/content-render/main.js
 create mode 100644 vue-options-api-demos/layout/menu/items/rendering/content-render/main.vue
 create mode 100644 vue-options-api-demos/layout/menu/items/rendering/item-render/main.js
 create mode 100644 vue-options-api-demos/layout/menu/items/rendering/item-render/main.vue
 create mode 100644 vue-options-api-demos/layout/menu/items/rendering/link-render/main.js
 create mode 100644 vue-options-api-demos/layout/menu/items/rendering/link-render/main.vue
 create mode 100644 vue-options-api-demos/layout/menu/items/rendering/menu-item-render/main.js
 create mode 100644 vue-options-api-demos/layout/menu/items/rendering/menu-item-render/main.vue
 create mode 100644 vue-options-api-demos/layout/menu/items/rendering/menu-link-render/main.js
 create mode 100644 vue-options-api-demos/layout/menu/items/rendering/menu-link-render/main.vue
 create mode 100644 vue-options-api-demos/layout/menu/localization/Menu.vue
 create mode 100644 vue-options-api-demos/layout/menu/localization/en-US.js
 create mode 100644 vue-options-api-demos/layout/menu/localization/es.js
 create mode 100644 vue-options-api-demos/layout/menu/localization/fr.js
 create mode 100644 vue-options-api-demos/layout/menu/localization/main.js
 create mode 100644 vue-options-api-demos/layout/menu/localization/main.vue
 create mode 100644 vue-options-api-demos/layout/menu/open-close/click/main.js
 create mode 100644 vue-options-api-demos/layout/menu/open-close/click/main.vue
 create mode 100644 vue-options-api-demos/layout/menu/open-close/hover/main.js
 create mode 100644 vue-options-api-demos/layout/menu/open-close/hover/main.vue
 create mode 100644 vue-options-api-demos/layout/menu/overview/main.js
 create mode 100644 vue-options-api-demos/layout/menu/overview/main.vue
 create mode 100644 vue-options-api-demos/layout/menu/routing/About.vue
 create mode 100644 vue-options-api-demos/layout/menu/routing/Home.vue
 create mode 100644 vue-options-api-demos/layout/menu/routing/Products.vue
 create mode 100644 vue-options-api-demos/layout/menu/routing/Team.vue
 create mode 100644 vue-options-api-demos/layout/menu/routing/index.js
 create mode 100644 vue-options-api-demos/layout/menu/routing/main.js
 create mode 100644 vue-options-api-demos/layout/menu/routing/main.vue
 create mode 100644 vue-options-api-demos/layout/menu/vertical/main.js
 create mode 100644 vue-options-api-demos/layout/menu/vertical/main.vue
 create mode 100644 vue-options-api-demos/layout/overview/AccountDetails.vue
 create mode 100644 vue-options-api-demos/layout/overview/Avatar.vue
 create mode 100644 vue-options-api-demos/layout/overview/BottomNavigation.vue
 create mode 100644 vue-options-api-demos/layout/overview/Card.vue
 create mode 100644 vue-options-api-demos/layout/overview/ContextMenu.vue
 create mode 100644 vue-options-api-demos/layout/overview/ExpansionPanel.vue
 create mode 100644 vue-options-api-demos/layout/overview/FormInput.vue
 create mode 100644 vue-options-api-demos/layout/overview/GridLayout.vue
 create mode 100644 vue-options-api-demos/layout/overview/Menu.vue
 create mode 100644 vue-options-api-demos/layout/overview/PanelBar.vue
 create mode 100644 vue-options-api-demos/layout/overview/PersonalDetails.vue
 create mode 100644 vue-options-api-demos/layout/overview/Register.vue
 create mode 100644 vue-options-api-demos/layout/overview/Splitter.vue
 create mode 100644 vue-options-api-demos/layout/overview/StackLayout.vue
 create mode 100644 vue-options-api-demos/layout/overview/Stepper.vue
 create mode 100644 vue-options-api-demos/layout/overview/TabStrip.vue
 create mode 100644 vue-options-api-demos/layout/overview/TileLayout.vue
 create mode 100644 vue-options-api-demos/layout/overview/Wizard.vue
 create mode 100644 vue-options-api-demos/layout/overview/gridlayout-styles.css
 create mode 100644 vue-options-api-demos/layout/overview/index.js
 create mode 100644 vue-options-api-demos/layout/overview/main.js
 create mode 100644 vue-options-api-demos/layout/overview/main.vue
 create mode 100644 vue-options-api-demos/layout/overview/panelbar-styles.css
 create mode 100644 vue-options-api-demos/layout/overview/splitter-styles.css
 create mode 100644 vue-options-api-demos/layout/overview/stacklayout-styles.css
 create mode 100644 vue-options-api-demos/layout/overview/styles.css
 create mode 100644 vue-options-api-demos/layout/overview/validators.js
 create mode 100644 vue-options-api-demos/layout/panelbar/animation/main.js
 create mode 100644 vue-options-api-demos/layout/panelbar/animation/main.vue
 create mode 100644 vue-options-api-demos/layout/panelbar/animation/styles.css
 create mode 100644 vue-options-api-demos/layout/panelbar/binding/local/main.js
 create mode 100644 vue-options-api-demos/layout/panelbar/binding/local/main.vue
 create mode 100644 vue-options-api-demos/layout/panelbar/binding/local/styles.css
 create mode 100644 vue-options-api-demos/layout/panelbar/binding/remote/main.js
 create mode 100644 vue-options-api-demos/layout/panelbar/binding/remote/main.vue
 create mode 100644 vue-options-api-demos/layout/panelbar/binding/remote/styles.css
 create mode 100644 vue-options-api-demos/layout/panelbar/controlled-state/all/main.js
 create mode 100644 vue-options-api-demos/layout/panelbar/controlled-state/all/main.vue
 create mode 100644 vue-options-api-demos/layout/panelbar/controlled-state/basic/main.js
 create mode 100644 vue-options-api-demos/layout/panelbar/controlled-state/basic/main.vue
 create mode 100644 vue-options-api-demos/layout/panelbar/controlled-state/basic/styles.css
 create mode 100644 vue-options-api-demos/layout/panelbar/controlled/basic/main.js
 create mode 100644 vue-options-api-demos/layout/panelbar/controlled/basic/main.vue
 create mode 100644 vue-options-api-demos/layout/panelbar/controlled/basic/styles.css
 create mode 100644 vue-options-api-demos/layout/panelbar/controlled/custom/main.js
 create mode 100644 vue-options-api-demos/layout/panelbar/controlled/custom/main.vue
 create mode 100644 vue-options-api-demos/layout/panelbar/controlled/custom/styles.css
 create mode 100644 vue-options-api-demos/layout/panelbar/custom/collections/main.js
 create mode 100644 vue-options-api-demos/layout/panelbar/custom/collections/main.vue
 create mode 100644 vue-options-api-demos/layout/panelbar/custom/collections/styles.css
 create mode 100644 vue-options-api-demos/layout/panelbar/custom/custom/main.js
 create mode 100644 vue-options-api-demos/layout/panelbar/custom/custom/main.vue
 create mode 100644 vue-options-api-demos/layout/panelbar/custom/custom/styles.css
 create mode 100644 vue-options-api-demos/layout/panelbar/expand/main.js
 create mode 100644 vue-options-api-demos/layout/panelbar/expand/main.vue
 create mode 100644 vue-options-api-demos/layout/panelbar/expand/styles.css
 create mode 100644 vue-options-api-demos/layout/panelbar/items/custom/main.js
 create mode 100644 vue-options-api-demos/layout/panelbar/items/custom/main.vue
 create mode 100644 vue-options-api-demos/layout/panelbar/items/custom/styles.css
 create mode 100644 vue-options-api-demos/layout/panelbar/items/state/disabled/main.js
 create mode 100644 vue-options-api-demos/layout/panelbar/items/state/disabled/main.vue
 create mode 100644 vue-options-api-demos/layout/panelbar/items/state/disabled/styles.css
 create mode 100644 vue-options-api-demos/layout/panelbar/items/state/expanded/main.js
 create mode 100644 vue-options-api-demos/layout/panelbar/items/state/expanded/main.vue
 create mode 100644 vue-options-api-demos/layout/panelbar/items/state/expanded/styles.css
 create mode 100644 vue-options-api-demos/layout/panelbar/items/state/selected/main.js
 create mode 100644 vue-options-api-demos/layout/panelbar/items/state/selected/main.vue
 create mode 100644 vue-options-api-demos/layout/panelbar/items/state/selected/styles.css
 create mode 100644 vue-options-api-demos/layout/panelbar/items/titles/getting-started/main.js
 create mode 100644 vue-options-api-demos/layout/panelbar/items/titles/getting-started/main.vue
 create mode 100644 vue-options-api-demos/layout/panelbar/items/titles/getting-started/styles.css
 create mode 100644 vue-options-api-demos/layout/panelbar/items/titles/icons/main.js
 create mode 100644 vue-options-api-demos/layout/panelbar/items/titles/icons/main.vue
 create mode 100644 vue-options-api-demos/layout/panelbar/items/titles/icons/styles.css
 create mode 100644 vue-options-api-demos/layout/panelbar/items/titles/images/main.js
 create mode 100644 vue-options-api-demos/layout/panelbar/items/titles/images/main.vue
 create mode 100644 vue-options-api-demos/layout/panelbar/items/titles/images/styles.css
 create mode 100644 vue-options-api-demos/layout/panelbar/keyboard/main.js
 create mode 100644 vue-options-api-demos/layout/panelbar/keyboard/main.vue
 create mode 100644 vue-options-api-demos/layout/panelbar/keyboard/styles.css
 create mode 100644 vue-options-api-demos/layout/panelbar/mounted/main.js
 create mode 100644 vue-options-api-demos/layout/panelbar/mounted/main.vue
 create mode 100644 vue-options-api-demos/layout/panelbar/overview/basic/main.js
 create mode 100644 vue-options-api-demos/layout/panelbar/overview/basic/main.vue
 create mode 100644 vue-options-api-demos/layout/panelbar/overview/basic/styles.css
 create mode 100644 vue-options-api-demos/layout/panelbar/overview/events/Logger.vue
 create mode 100644 vue-options-api-demos/layout/panelbar/overview/events/main.js
 create mode 100644 vue-options-api-demos/layout/panelbar/overview/events/main.vue
 create mode 100644 vue-options-api-demos/layout/panelbar/overview/events/styles.css
 create mode 100644 vue-options-api-demos/layout/panelbar/routing/About.vue
 create mode 100644 vue-options-api-demos/layout/panelbar/routing/Home.vue
 create mode 100644 vue-options-api-demos/layout/panelbar/routing/Products.vue
 create mode 100644 vue-options-api-demos/layout/panelbar/routing/Team.vue
 create mode 100644 vue-options-api-demos/layout/panelbar/routing/index.js
 create mode 100644 vue-options-api-demos/layout/panelbar/routing/main.js
 create mode 100644 vue-options-api-demos/layout/panelbar/routing/main.vue
 create mode 100644 vue-options-api-demos/layout/splitter/events/Logger.vue
 create mode 100644 vue-options-api-demos/layout/splitter/events/main.js
 create mode 100644 vue-options-api-demos/layout/splitter/events/main.vue
 create mode 100644 vue-options-api-demos/layout/splitter/events/styles.css
 create mode 100644 vue-options-api-demos/layout/splitter/keyboard/main.js
 create mode 100644 vue-options-api-demos/layout/splitter/keyboard/main.vue
 create mode 100644 vue-options-api-demos/layout/splitter/keyboard/styles.css
 create mode 100644 vue-options-api-demos/layout/splitter/orientation/main.js
 create mode 100644 vue-options-api-demos/layout/splitter/orientation/main.vue
 create mode 100644 vue-options-api-demos/layout/splitter/orientation/styles.css
 create mode 100644 vue-options-api-demos/layout/splitter/overview/basic/main.js
 create mode 100644 vue-options-api-demos/layout/splitter/overview/basic/main.vue
 create mode 100644 vue-options-api-demos/layout/splitter/overview/basic/styles.css
 create mode 100644 vue-options-api-demos/layout/splitter/panes/collapsing/main.js
 create mode 100644 vue-options-api-demos/layout/splitter/panes/collapsing/main.vue
 create mode 100644 vue-options-api-demos/layout/splitter/panes/collapsing/styles.css
 create mode 100644 vue-options-api-demos/layout/splitter/panes/dimensions/main.js
 create mode 100644 vue-options-api-demos/layout/splitter/panes/dimensions/main.vue
 create mode 100644 vue-options-api-demos/layout/splitter/panes/dimensions/styles.css
 create mode 100644 vue-options-api-demos/layout/splitter/panes/resizing/main.js
 create mode 100644 vue-options-api-demos/layout/splitter/panes/resizing/main.vue
 create mode 100644 vue-options-api-demos/layout/splitter/panes/resizing/styles.css
 create mode 100644 vue-options-api-demos/layout/splitter/panes/scrolling/main.js
 create mode 100644 vue-options-api-demos/layout/splitter/panes/scrolling/main.vue
 create mode 100644 vue-options-api-demos/layout/splitter/panes/scrolling/styles.css
 create mode 100644 vue-options-api-demos/layout/stacklayout/gaps/main.js
 create mode 100644 vue-options-api-demos/layout/stacklayout/gaps/main.vue
 create mode 100644 vue-options-api-demos/layout/stacklayout/gaps/styles.css
 create mode 100644 vue-options-api-demos/layout/stacklayout/horizontalalign/main.js
 create mode 100644 vue-options-api-demos/layout/stacklayout/horizontalalign/main.vue
 create mode 100644 vue-options-api-demos/layout/stacklayout/horizontalalign/styles.css
 create mode 100644 vue-options-api-demos/layout/stacklayout/nestedlayouts/main.js
 create mode 100644 vue-options-api-demos/layout/stacklayout/nestedlayouts/main.vue
 create mode 100644 vue-options-api-demos/layout/stacklayout/nestedlayouts/styles.css
 create mode 100644 vue-options-api-demos/layout/stacklayout/orientation/main.js
 create mode 100644 vue-options-api-demos/layout/stacklayout/orientation/main.vue
 create mode 100644 vue-options-api-demos/layout/stacklayout/orientation/styles.css
 create mode 100644 vue-options-api-demos/layout/stacklayout/overview/main.js
 create mode 100644 vue-options-api-demos/layout/stacklayout/overview/main.vue
 create mode 100644 vue-options-api-demos/layout/stacklayout/overview/styles.css
 create mode 100644 vue-options-api-demos/layout/stacklayout/verticalalign/main.js
 create mode 100644 vue-options-api-demos/layout/stacklayout/verticalalign/main.vue
 create mode 100644 vue-options-api-demos/layout/stacklayout/verticalalign/styles.css
 create mode 100644 vue-options-api-demos/layout/stepper/custom-rendering/main.js
 create mode 100644 vue-options-api-demos/layout/stepper/custom-rendering/main.vue
 create mode 100644 vue-options-api-demos/layout/stepper/display-modes/main.js
 create mode 100644 vue-options-api-demos/layout/stepper/display-modes/main.vue
 create mode 100644 vue-options-api-demos/layout/stepper/events/Logger.vue
 create mode 100644 vue-options-api-demos/layout/stepper/events/main.js
 create mode 100644 vue-options-api-demos/layout/stepper/events/main.vue
 create mode 100644 vue-options-api-demos/layout/stepper/getting-started/main.js
 create mode 100644 vue-options-api-demos/layout/stepper/getting-started/main.vue
 create mode 100644 vue-options-api-demos/layout/stepper/keyboard-navigation/main.js
 create mode 100644 vue-options-api-demos/layout/stepper/keyboard-navigation/main.vue
 create mode 100644 vue-options-api-demos/layout/stepper/linear/main.js
 create mode 100644 vue-options-api-demos/layout/stepper/linear/main.vue
 create mode 100644 vue-options-api-demos/layout/stepper/orientation/main.js
 create mode 100644 vue-options-api-demos/layout/stepper/orientation/main.vue
 create mode 100644 vue-options-api-demos/layout/stepper/types/main.js
 create mode 100644 vue-options-api-demos/layout/stepper/types/main.vue
 create mode 100644 vue-options-api-demos/layout/stepper/validation/basic/main.js
 create mode 100644 vue-options-api-demos/layout/stepper/validation/basic/main.vue
 create mode 100644 vue-options-api-demos/layout/stepper/validation/icons/main.js
 create mode 100644 vue-options-api-demos/layout/stepper/validation/icons/main.vue
 create mode 100644 vue-options-api-demos/layout/tabstrip/configuration/main.js
 create mode 100644 vue-options-api-demos/layout/tabstrip/configuration/main.vue
 create mode 100644 vue-options-api-demos/layout/tabstrip/events/Logger.vue
 create mode 100644 vue-options-api-demos/layout/tabstrip/events/main.js
 create mode 100644 vue-options-api-demos/layout/tabstrip/events/main.vue
 create mode 100644 vue-options-api-demos/layout/tabstrip/keyboard/main.js
 create mode 100644 vue-options-api-demos/layout/tabstrip/keyboard/main.vue
 create mode 100644 vue-options-api-demos/layout/tabstrip/overview/main.js
 create mode 100644 vue-options-api-demos/layout/tabstrip/overview/main.vue
 create mode 100644 vue-options-api-demos/layout/tabstrip/size/main.js
 create mode 100644 vue-options-api-demos/layout/tabstrip/size/main.vue
 create mode 100644 vue-options-api-demos/layout/tabstrip/tabs/alignment/main.js
 create mode 100644 vue-options-api-demos/layout/tabstrip/tabs/alignment/main.vue
 create mode 100644 vue-options-api-demos/layout/tabstrip/tabs/closable-tabs/Title.vue
 create mode 100644 vue-options-api-demos/layout/tabstrip/tabs/closable-tabs/main.js
 create mode 100644 vue-options-api-demos/layout/tabstrip/tabs/closable-tabs/main.vue
 create mode 100644 vue-options-api-demos/layout/tabstrip/tabs/disabled/main.js
 create mode 100644 vue-options-api-demos/layout/tabstrip/tabs/disabled/main.vue
 create mode 100644 vue-options-api-demos/layout/tabstrip/tabs/initial/main.js
 create mode 100644 vue-options-api-demos/layout/tabstrip/tabs/initial/main.vue
 create mode 100644 vue-options-api-demos/layout/tabstrip/tabs/position/main.js
 create mode 100644 vue-options-api-demos/layout/tabstrip/tabs/position/main.vue
 create mode 100644 vue-options-api-demos/layout/tabstrip/tabs/titles/main.js
 create mode 100644 vue-options-api-demos/layout/tabstrip/tabs/titles/main.vue
 create mode 100644 vue-options-api-demos/layout/tilelayout/add-remove/PageViews.vue
 create mode 100644 vue-options-api-demos/layout/tilelayout/add-remove/PopularPagesChart.vue
 create mode 100644 vue-options-api-demos/layout/tilelayout/add-remove/VisitorsDonut.vue
 create mode 100644 vue-options-api-demos/layout/tilelayout/add-remove/WindowContent.vue
 create mode 100644 vue-options-api-demos/layout/tilelayout/add-remove/main.js
 create mode 100644 vue-options-api-demos/layout/tilelayout/add-remove/main.vue
 create mode 100644 vue-options-api-demos/layout/tilelayout/add-remove/tilelayout-data.js
 create mode 100644 vue-options-api-demos/layout/tilelayout/auto-flow/main.js
 create mode 100644 vue-options-api-demos/layout/tilelayout/auto-flow/main.vue
 create mode 100644 vue-options-api-demos/layout/tilelayout/configuration-unique/main.js
 create mode 100644 vue-options-api-demos/layout/tilelayout/configuration-unique/main.vue
 create mode 100644 vue-options-api-demos/layout/tilelayout/configuration/main.js
 create mode 100644 vue-options-api-demos/layout/tilelayout/configuration/main.vue
 create mode 100644 vue-options-api-demos/layout/tilelayout/events/Logger.vue
 create mode 100644 vue-options-api-demos/layout/tilelayout/events/main.js
 create mode 100644 vue-options-api-demos/layout/tilelayout/events/main.vue
 create mode 100644 vue-options-api-demos/layout/tilelayout/overview/ConversionRate.vue
 create mode 100644 vue-options-api-demos/layout/tilelayout/overview/ConversionsChart.vue
 create mode 100644 vue-options-api-demos/layout/tilelayout/overview/PageViews.vue
 create mode 100644 vue-options-api-demos/layout/tilelayout/overview/PopularPagesChart.vue
 create mode 100644 vue-options-api-demos/layout/tilelayout/overview/UsersGrid.vue
 create mode 100644 vue-options-api-demos/layout/tilelayout/overview/VisitorsDonut.vue
 create mode 100644 vue-options-api-demos/layout/tilelayout/overview/main.js
 create mode 100644 vue-options-api-demos/layout/tilelayout/overview/main.vue
 create mode 100644 vue-options-api-demos/layout/tilelayout/overview/tilelayout-data.js
 create mode 100644 vue-options-api-demos/layout/tilelayout/tiles/controlled-mode/main.js
 create mode 100644 vue-options-api-demos/layout/tilelayout/tiles/controlled-mode/main.vue
 create mode 100644 vue-options-api-demos/layout/tilelayout/tiles/custom-header-body/main.js
 create mode 100644 vue-options-api-demos/layout/tilelayout/tiles/custom-header-body/main.vue
 create mode 100644 vue-options-api-demos/layout/tilelayout/tiles/custom-rendering/main.js
 create mode 100644 vue-options-api-demos/layout/tilelayout/tiles/custom-rendering/main.vue
 create mode 100644 vue-options-api-demos/layout/tilelayout/tiles/positions/main.js
 create mode 100644 vue-options-api-demos/layout/tilelayout/tiles/positions/main.vue
 create mode 100644 vue-options-api-demos/layout/tilelayout/tiles/reordering/main.js
 create mode 100644 vue-options-api-demos/layout/tilelayout/tiles/reordering/main.vue
 create mode 100644 vue-options-api-demos/layout/tilelayout/tiles/resizing/main.js
 create mode 100644 vue-options-api-demos/layout/tilelayout/tiles/resizing/main.vue
 create mode 100644 vue-options-api-demos/layout/wizard/basic/AccountDetails.vue
 create mode 100644 vue-options-api-demos/layout/wizard/basic/FormInput.vue
 create mode 100644 vue-options-api-demos/layout/wizard/basic/PersonalDetails.vue
 create mode 100644 vue-options-api-demos/layout/wizard/basic/Register.vue
 create mode 100644 vue-options-api-demos/layout/wizard/basic/main.js
 create mode 100644 vue-options-api-demos/layout/wizard/basic/main.vue
 create mode 100644 vue-options-api-demos/layout/wizard/basic/validators.js
 create mode 100644 vue-options-api-demos/layout/wizard/positioning/AccountDetails.vue
 create mode 100644 vue-options-api-demos/layout/wizard/positioning/FormInput.vue
 create mode 100644 vue-options-api-demos/layout/wizard/positioning/PersonalDetails.vue
 create mode 100644 vue-options-api-demos/layout/wizard/positioning/Register.vue
 create mode 100644 vue-options-api-demos/layout/wizard/positioning/main.js
 create mode 100644 vue-options-api-demos/layout/wizard/positioning/main.vue
 create mode 100644 vue-options-api-demos/layout/wizard/positioning/validators.js
 create mode 100644 vue-options-api-demos/layout/wizard/router/FormContent.vue
 create mode 100644 vue-options-api-demos/layout/wizard/router/FormInput.vue
 create mode 100644 vue-options-api-demos/layout/wizard/router/Overview.vue
 create mode 100644 vue-options-api-demos/layout/wizard/router/Register.vue
 create mode 100644 vue-options-api-demos/layout/wizard/router/UserDetails.vue
 create mode 100644 vue-options-api-demos/layout/wizard/router/index.js
 create mode 100644 vue-options-api-demos/layout/wizard/router/main.js
 create mode 100644 vue-options-api-demos/layout/wizard/router/main.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/step/AccountDetails.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/step/CardSelector.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/step/ErrorSummary.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/step/FormAutoComplete.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/step/FormCheckbox.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/step/FormDateInput.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/step/FormDatePicker.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/step/FormInput.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/step/FormMaskedTextBox.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/step/FormNumericTextBox.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/step/FormRadioGroup.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/step/FormTextArea.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/step/FormUpload.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/step/PaymentDetails.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/step/PersonalDetails.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/step/main.js
 create mode 100644 vue-options-api-demos/layout/wizard/validation/step/main.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/step/validators.js
 create mode 100644 vue-options-api-demos/layout/wizard/validation/submit/AccountDetails.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/submit/CardSelector.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/submit/ErrorSummary.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/submit/FormAutoComplete.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/submit/FormCheckbox.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/submit/FormDateInput.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/submit/FormDatePicker.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/submit/FormInput.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/submit/FormMaskedTextBox.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/submit/FormNumericTextBox.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/submit/FormRadioGroup.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/submit/FormTextArea.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/submit/FormUpload.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/submit/PaymentDetails.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/submit/PersonalDetails.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/submit/main.js
 create mode 100644 vue-options-api-demos/layout/wizard/validation/submit/main.vue
 create mode 100644 vue-options-api-demos/layout/wizard/validation/submit/validators.js
 create mode 100644 vue-options-api-demos/listbox/customization/main.js
 create mode 100644 vue-options-api-demos/listbox/customization/main.vue
 create mode 100644 vue-options-api-demos/listbox/customization/products.json
 create mode 100644 vue-options-api-demos/listbox/drag-and-drop/main.js
 create mode 100644 vue-options-api-demos/listbox/drag-and-drop/main.vue
 create mode 100644 vue-options-api-demos/listbox/drag-and-drop/products.json
 create mode 100644 vue-options-api-demos/listbox/get-started/data.js
 create mode 100644 vue-options-api-demos/listbox/get-started/main.js
 create mode 100644 vue-options-api-demos/listbox/get-started/main.vue
 create mode 100644 vue-options-api-demos/listbox/messages/data.js
 create mode 100644 vue-options-api-demos/listbox/messages/es.json
 create mode 100644 vue-options-api-demos/listbox/messages/main.js
 create mode 100644 vue-options-api-demos/listbox/messages/main.vue
 create mode 100644 vue-options-api-demos/listbox/multiple-lists/main.js
 create mode 100644 vue-options-api-demos/listbox/multiple-lists/main.vue
 create mode 100644 vue-options-api-demos/listbox/overview/data.js
 create mode 100644 vue-options-api-demos/listbox/overview/main.js
 create mode 100644 vue-options-api-demos/listbox/overview/main.vue
 create mode 100644 vue-options-api-demos/listbox/rtl/data.js
 create mode 100644 vue-options-api-demos/listbox/rtl/main.js
 create mode 100644 vue-options-api-demos/listbox/rtl/main.vue
 create mode 100644 vue-options-api-demos/listbox/selection/data.js
 create mode 100644 vue-options-api-demos/listbox/selection/main.js
 create mode 100644 vue-options-api-demos/listbox/selection/main.vue
 create mode 100644 vue-options-api-demos/listbox/shared/data.js
 create mode 100644 vue-options-api-demos/listbox/shared/es.json
 create mode 100644 vue-options-api-demos/listbox/shared/products.json
 create mode 100644 vue-options-api-demos/listview/default-scrolling/employees.js
 create mode 100644 vue-options-api-demos/listview/default-scrolling/images.js
 create mode 100644 vue-options-api-demos/listview/default-scrolling/main.js
 create mode 100644 vue-options-api-demos/listview/default-scrolling/main.vue
 create mode 100644 vue-options-api-demos/listview/editing/ItemRender.vue
 create mode 100644 vue-options-api-demos/listview/editing/main.js
 create mode 100644 vue-options-api-demos/listview/editing/main.vue
 create mode 100644 vue-options-api-demos/listview/editing/products.json
 create mode 100644 vue-options-api-demos/listview/endless-scrolling/destinations.json
 create mode 100644 vue-options-api-demos/listview/endless-scrolling/main.js
 create mode 100644 vue-options-api-demos/listview/endless-scrolling/main.vue
 create mode 100644 vue-options-api-demos/listview/events/Logger.vue
 create mode 100644 vue-options-api-demos/listview/events/main.js
 create mode 100644 vue-options-api-demos/listview/events/main.vue
 create mode 100644 vue-options-api-demos/listview/events/products.json
 create mode 100644 vue-options-api-demos/listview/filtering/main.js
 create mode 100644 vue-options-api-demos/listview/filtering/main.vue
 create mode 100644 vue-options-api-demos/listview/filtering/products.json
 create mode 100644 vue-options-api-demos/listview/footer-template/main.js
 create mode 100644 vue-options-api-demos/listview/footer-template/main.vue
 create mode 100644 vue-options-api-demos/listview/footer-template/products.json
 create mode 100644 vue-options-api-demos/listview/get-started/main.js
 create mode 100644 vue-options-api-demos/listview/get-started/main.vue
 create mode 100644 vue-options-api-demos/listview/get-started/products.json
 create mode 100644 vue-options-api-demos/listview/header-template/main.js
 create mode 100644 vue-options-api-demos/listview/header-template/main.vue
 create mode 100644 vue-options-api-demos/listview/header-template/products.json
 create mode 100644 vue-options-api-demos/listview/item-template/main.js
 create mode 100644 vue-options-api-demos/listview/item-template/main.vue
 create mode 100644 vue-options-api-demos/listview/item-template/products.json
 create mode 100644 vue-options-api-demos/listview/overview/contacts.json
 create mode 100644 vue-options-api-demos/listview/overview/main.js
 create mode 100644 vue-options-api-demos/listview/overview/main.vue
 create mode 100644 vue-options-api-demos/listview/paging/articles.json
 create mode 100644 vue-options-api-demos/listview/paging/main.js
 create mode 100644 vue-options-api-demos/listview/paging/main.vue
 create mode 100644 vue-options-api-demos/listview/shared/articles.json
 create mode 100644 vue-options-api-demos/listview/shared/contacts.json
 create mode 100644 vue-options-api-demos/listview/shared/destinations.json
 create mode 100644 vue-options-api-demos/listview/shared/products.json
 create mode 100644 vue-options-api-demos/notification/animation/main.js
 create mode 100644 vue-options-api-demos/notification/animation/main.vue
 create mode 100644 vue-options-api-demos/notification/animation/styles.css
 create mode 100644 vue-options-api-demos/notification/events/Logger.vue
 create mode 100644 vue-options-api-demos/notification/events/main.js
 create mode 100644 vue-options-api-demos/notification/events/main.vue
 create mode 100644 vue-options-api-demos/notification/get-started/main.js
 create mode 100644 vue-options-api-demos/notification/get-started/main.vue
 create mode 100644 vue-options-api-demos/notification/get-started/styles.css
 create mode 100644 vue-options-api-demos/notification/overview/main.js
 create mode 100644 vue-options-api-demos/notification/overview/main.vue
 create mode 100644 vue-options-api-demos/notification/overview/styles.css
 create mode 100644 vue-options-api-demos/notification/positions/Notifications.vue
 create mode 100644 vue-options-api-demos/notification/positions/main.js
 create mode 100644 vue-options-api-demos/notification/positions/main.vue
 create mode 100644 vue-options-api-demos/notification/types/main.js
 create mode 100644 vue-options-api-demos/notification/types/main.vue
 create mode 100644 vue-options-api-demos/pdf/base64/main.js
 create mode 100644 vue-options-api-demos/pdf/base64/main.vue
 create mode 100644 vue-options-api-demos/pdf/content-scaling/main.js
 create mode 100644 vue-options-api-demos/pdf/content-scaling/main.vue
 create mode 100644 vue-options-api-demos/pdf/content-styling/class/main.js
 create mode 100644 vue-options-api-demos/pdf/content-styling/class/main.vue
 create mode 100644 vue-options-api-demos/pdf/content-styling/class/styles.css
 create mode 100644 vue-options-api-demos/pdf/content-styling/element/main.js
 create mode 100644 vue-options-api-demos/pdf/content-styling/element/main.vue
 create mode 100644 vue-options-api-demos/pdf/content-styling/element/styles.css
 create mode 100644 vue-options-api-demos/pdf/embedded-image/main.js
 create mode 100644 vue-options-api-demos/pdf/embedded-image/main.vue
 create mode 100644 vue-options-api-demos/pdf/get-started/main.js
 create mode 100644 vue-options-api-demos/pdf/get-started/main.vue
 create mode 100644 vue-options-api-demos/pdf/get-started/products.json
 create mode 100644 vue-options-api-demos/pdf/hidden-content/main.js
 create mode 100644 vue-options-api-demos/pdf/hidden-content/main.vue
 create mode 100644 vue-options-api-demos/pdf/hyperlinks/main.js
 create mode 100644 vue-options-api-demos/pdf/hyperlinks/main.vue
 create mode 100644 vue-options-api-demos/pdf/multipage-content/automatic-page-breaking/main.js
 create mode 100644 vue-options-api-demos/pdf/multipage-content/automatic-page-breaking/main.vue
 create mode 100644 vue-options-api-demos/pdf/multipage-content/manual-page-breaking/main.js
 create mode 100644 vue-options-api-demos/pdf/multipage-content/manual-page-breaking/main.vue
 create mode 100644 vue-options-api-demos/pdf/multipage-content/multi-page-content-keep-together/Content.vue
 create mode 100644 vue-options-api-demos/pdf/multipage-content/multi-page-content-keep-together/main.js
 create mode 100644 vue-options-api-demos/pdf/multipage-content/multi-page-content-keep-together/main.vue
 create mode 100644 vue-options-api-demos/pdf/multipage-content/page-templates/Content.vue
 create mode 100644 vue-options-api-demos/pdf/multipage-content/page-templates/main.js
 create mode 100644 vue-options-api-demos/pdf/multipage-content/page-templates/main.vue
 create mode 100644 vue-options-api-demos/pdf/overview/main.js
 create mode 100644 vue-options-api-demos/pdf/overview/main.vue
 create mode 100644 vue-options-api-demos/pdf/table-headers/main.js
 create mode 100644 vue-options-api-demos/pdf/table-headers/main.vue
 create mode 100644 vue-options-api-demos/pdf/table-headers/products.json
 create mode 100644 vue-options-api-demos/popup/align/absolute/main.js
 create mode 100644 vue-options-api-demos/popup/align/absolute/main.vue
 create mode 100644 vue-options-api-demos/popup/align/absolute/styles.css
 create mode 100644 vue-options-api-demos/popup/align/basic/main.js
 create mode 100644 vue-options-api-demos/popup/align/basic/main.vue
 create mode 100644 vue-options-api-demos/popup/align/basic/styles.css
 create mode 100644 vue-options-api-demos/popup/align/positioning/main.js
 create mode 100644 vue-options-api-demos/popup/align/positioning/main.vue
 create mode 100644 vue-options-api-demos/popup/align/positioning/styles.css
 create mode 100644 vue-options-api-demos/popup/animations/main.js
 create mode 100644 vue-options-api-demos/popup/animations/main.vue
 create mode 100644 vue-options-api-demos/popup/animations/styles.css
 create mode 100644 vue-options-api-demos/popup/basic/main.js
 create mode 100644 vue-options-api-demos/popup/basic/main.vue
 create mode 100644 vue-options-api-demos/popup/basic/styles.css
 create mode 100644 vue-options-api-demos/popup/hidden/main.js
 create mode 100644 vue-options-api-demos/popup/hidden/main.vue
 create mode 100644 vue-options-api-demos/popup/hidden/styles.css
 create mode 100644 vue-options-api-demos/popup/styling/main.js
 create mode 100644 vue-options-api-demos/popup/styling/main.vue
 create mode 100644 vue-options-api-demos/popup/styling/styles.css
 create mode 100644 vue-options-api-demos/popup/viewport/main.js
 create mode 100644 vue-options-api-demos/popup/viewport/main.vue
 create mode 100644 vue-options-api-demos/popup/viewport/styles.css
 create mode 100644 vue-options-api-demos/progressbars/chunkprogressbar/appearance/FormContent.vue
 create mode 100644 vue-options-api-demos/progressbars/chunkprogressbar/appearance/FormDropDownList.vue
 create mode 100644 vue-options-api-demos/progressbars/chunkprogressbar/appearance/FormInput.vue
 create mode 100644 vue-options-api-demos/progressbars/chunkprogressbar/appearance/main.js
 create mode 100644 vue-options-api-demos/progressbars/chunkprogressbar/appearance/main.vue
 create mode 100644 vue-options-api-demos/progressbars/chunkprogressbar/dimensions/main.js
 create mode 100644 vue-options-api-demos/progressbars/chunkprogressbar/dimensions/main.vue
 create mode 100644 vue-options-api-demos/progressbars/chunkprogressbar/direction/main.js
 create mode 100644 vue-options-api-demos/progressbars/chunkprogressbar/direction/main.vue
 create mode 100644 vue-options-api-demos/progressbars/chunkprogressbar/disabled/main.js
 create mode 100644 vue-options-api-demos/progressbars/chunkprogressbar/disabled/main.vue
 create mode 100644 vue-options-api-demos/progressbars/chunkprogressbar/orientation/main.js
 create mode 100644 vue-options-api-demos/progressbars/chunkprogressbar/orientation/main.vue
 create mode 100644 vue-options-api-demos/progressbars/chunkprogressbar/overview/main.js
 create mode 100644 vue-options-api-demos/progressbars/chunkprogressbar/overview/main.vue
 create mode 100644 vue-options-api-demos/progressbars/chunkprogressbar/value_ranges/main.js
 create mode 100644 vue-options-api-demos/progressbars/chunkprogressbar/value_ranges/main.vue
 create mode 100644 vue-options-api-demos/progressbars/get-started/main.js
 create mode 100644 vue-options-api-demos/progressbars/get-started/main.vue
 create mode 100644 vue-options-api-demos/progressbars/globalization/main.js
 create mode 100644 vue-options-api-demos/progressbars/globalization/main.vue
 create mode 100644 vue-options-api-demos/progressbars/overview/main.js
 create mode 100644 vue-options-api-demos/progressbars/overview/main.vue
 create mode 100644 vue-options-api-demos/progressbars/progressbar/animation-2/main.js
 create mode 100644 vue-options-api-demos/progressbars/progressbar/animation-2/main.vue
 create mode 100644 vue-options-api-demos/progressbars/progressbar/animation/main.js
 create mode 100644 vue-options-api-demos/progressbars/progressbar/animation/main.vue
 create mode 100644 vue-options-api-demos/progressbars/progressbar/appearance/main.js
 create mode 100644 vue-options-api-demos/progressbars/progressbar/appearance/main.vue
 create mode 100644 vue-options-api-demos/progressbars/progressbar/dimensions/main.js
 create mode 100644 vue-options-api-demos/progressbars/progressbar/dimensions/main.vue
 create mode 100644 vue-options-api-demos/progressbars/progressbar/direction/main.js
 create mode 100644 vue-options-api-demos/progressbars/progressbar/direction/main.vue
 create mode 100644 vue-options-api-demos/progressbars/progressbar/disabled/main.js
 create mode 100644 vue-options-api-demos/progressbars/progressbar/disabled/main.vue
 create mode 100644 vue-options-api-demos/progressbars/progressbar/label/custom/main.js
 create mode 100644 vue-options-api-demos/progressbars/progressbar/label/custom/main.vue
 create mode 100644 vue-options-api-demos/progressbars/progressbar/label/getting-started/main.js
 create mode 100644 vue-options-api-demos/progressbars/progressbar/label/getting-started/main.vue
 create mode 100644 vue-options-api-demos/progressbars/progressbar/orientation/main.js
 create mode 100644 vue-options-api-demos/progressbars/progressbar/orientation/main.vue
 create mode 100644 vue-options-api-demos/progressbars/progressbar/overview/main.js
 create mode 100644 vue-options-api-demos/progressbars/progressbar/overview/main.vue
 create mode 100644 vue-options-api-demos/progressbars/progressbar/value_ranges/main.js
 create mode 100644 vue-options-api-demos/progressbars/progressbar/value_ranges/main.vue
 create mode 100644 vue-options-api-demos/scheduler/accessibility/summary/main.js
 create mode 100644 vue-options-api-demos/scheduler/accessibility/summary/main.vue
 create mode 100644 vue-options-api-demos/scheduler/adaptive-slot-height/disabled/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/adaptive-slot-height/disabled/main.js
 create mode 100644 vue-options-api-demos/scheduler/adaptive-slot-height/disabled/main.vue
 create mode 100644 vue-options-api-demos/scheduler/adaptive-slot-height/overview/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/adaptive-slot-height/overview/main.js
 create mode 100644 vue-options-api-demos/scheduler/adaptive-slot-height/overview/main.vue
 create mode 100644 vue-options-api-demos/scheduler/auto-item-height/constant/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/auto-item-height/constant/main.js
 create mode 100644 vue-options-api-demos/scheduler/auto-item-height/constant/main.vue
 create mode 100644 vue-options-api-demos/scheduler/auto-item-height/overview/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/auto-item-height/overview/main.js
 create mode 100644 vue-options-api-demos/scheduler/auto-item-height/overview/main.vue
 create mode 100644 vue-options-api-demos/scheduler/context/main.js
 create mode 100644 vue-options-api-demos/scheduler/context/main.vue
 create mode 100644 vue-options-api-demos/scheduler/custom-templates/agenda/task/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/custom-templates/agenda/task/main.js
 create mode 100644 vue-options-api-demos/scheduler/custom-templates/agenda/task/main.vue
 create mode 100644 vue-options-api-demos/scheduler/custom-templates/events/color/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/custom-templates/events/color/main.js
 create mode 100644 vue-options-api-demos/scheduler/custom-templates/events/color/main.vue
 create mode 100644 vue-options-api-demos/scheduler/custom-templates/events/image/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/custom-templates/events/image/main.js
 create mode 100644 vue-options-api-demos/scheduler/custom-templates/events/image/main.vue
 create mode 100644 vue-options-api-demos/scheduler/custom-templates/events/resources/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/custom-templates/events/resources/main.js
 create mode 100644 vue-options-api-demos/scheduler/custom-templates/events/resources/main.vue
 create mode 100644 vue-options-api-demos/scheduler/custom-templates/header-footer/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/custom-templates/header-footer/main.js
 create mode 100644 vue-options-api-demos/scheduler/custom-templates/header-footer/main.vue
 create mode 100644 vue-options-api-demos/scheduler/custom-templates/slots/color/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/custom-templates/slots/color/main.js
 create mode 100644 vue-options-api-demos/scheduler/custom-templates/slots/color/main.vue
 create mode 100644 vue-options-api-demos/scheduler/custom-templates/slots/month/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/custom-templates/slots/month/main.js
 create mode 100644 vue-options-api-demos/scheduler/custom-templates/slots/month/main.vue
 create mode 100644 vue-options-api-demos/scheduler/custom-templates/slots/time/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/custom-templates/slots/time/main.js
 create mode 100644 vue-options-api-demos/scheduler/custom-templates/slots/time/main.vue
 create mode 100644 vue-options-api-demos/scheduler/customization/.DS_Store
 create mode 100644 vue-options-api-demos/scheduler/customization/editor/custom-editor/main.js
 create mode 100644 vue-options-api-demos/scheduler/customization/editor/custom-editor/main.vue
 create mode 100644 vue-options-api-demos/scheduler/customization/editor/default-editor/extending-root/main.js
 create mode 100644 vue-options-api-demos/scheduler/customization/editor/default-editor/extending-root/main.vue
 create mode 100644 vue-options-api-demos/scheduler/customization/editor/default-editor/replacing-editors/main.js
 create mode 100644 vue-options-api-demos/scheduler/customization/editor/default-editor/replacing-editors/main.vue
 create mode 100644 vue-options-api-demos/scheduler/customization/form/custom-components/main.js
 create mode 100644 vue-options-api-demos/scheduler/customization/form/custom-components/main.vue
 create mode 100644 vue-options-api-demos/scheduler/customization/form/default-rendering/main.js
 create mode 100644 vue-options-api-demos/scheduler/customization/form/default-rendering/main.vue
 create mode 100644 vue-options-api-demos/scheduler/data-binding/data-change/main.js
 create mode 100644 vue-options-api-demos/scheduler/data-binding/data-change/main.vue
 create mode 100644 vue-options-api-demos/scheduler/data-binding/data/main.js
 create mode 100644 vue-options-api-demos/scheduler/data-binding/data/main.vue
 create mode 100644 vue-options-api-demos/scheduler/data-binding/model-fields/main.js
 create mode 100644 vue-options-api-demos/scheduler/data-binding/model-fields/main.vue
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/basic/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/basic/main.js
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/basic/main.vue
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/custom-form/CustomEditForm.vue
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/custom-form/FormDateTimePicker.vue
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/custom-form/FormInput.vue
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/custom-form/FormSwitch.vue
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/custom-form/FormTextArea.vue
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/custom-form/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/custom-form/main.js
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/custom-form/main.vue
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/customize-default/CustomEditForm.vue
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/customize-default/FormInput.vue
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/customize-default/FormSwitch.vue
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/customize-default/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/customize-default/main.js
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/customize-default/main.vue
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/default-values/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/default-values/main.js
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/default-values/main.vue
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/CustomEditForm.vue
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/FormDateTimePicker.vue
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/FormInput.vue
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/FormSwitch.vue
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/FormTextArea.vue
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/main.js
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/main.vue
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/validation/using-default-form/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/validation/using-default-form/main.js
 create mode 100644 vue-options-api-demos/scheduler/data-operations/editing/validation/using-default-form/main.vue
 create mode 100644 vue-options-api-demos/scheduler/data-operations/grouping/configuration/data.js
 create mode 100644 vue-options-api-demos/scheduler/data-operations/grouping/configuration/main.js
 create mode 100644 vue-options-api-demos/scheduler/data-operations/grouping/configuration/main.vue
 create mode 100644 vue-options-api-demos/scheduler/data-operations/grouping/multiple/data.js
 create mode 100644 vue-options-api-demos/scheduler/data-operations/grouping/multiple/main.js
 create mode 100644 vue-options-api-demos/scheduler/data-operations/grouping/multiple/main.vue
 create mode 100644 vue-options-api-demos/scheduler/data-operations/resources/multiple/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/data-operations/resources/multiple/main.js
 create mode 100644 vue-options-api-demos/scheduler/data-operations/resources/multiple/main.vue
 create mode 100644 vue-options-api-demos/scheduler/data-operations/resources/visual/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/data-operations/resources/visual/main.js
 create mode 100644 vue-options-api-demos/scheduler/data-operations/resources/visual/main.vue
 create mode 100644 vue-options-api-demos/scheduler/date-selection/controlled/main.js
 create mode 100644 vue-options-api-demos/scheduler/date-selection/controlled/main.vue
 create mode 100644 vue-options-api-demos/scheduler/date-selection/uncontrolled/main.js
 create mode 100644 vue-options-api-demos/scheduler/date-selection/uncontrolled/main.vue
 create mode 100644 vue-options-api-demos/scheduler/globalization/overview/es.json
 create mode 100644 vue-options-api-demos/scheduler/globalization/overview/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/globalization/overview/main.js
 create mode 100644 vue-options-api-demos/scheduler/globalization/overview/main.vue
 create mode 100644 vue-options-api-demos/scheduler/globalization/rtl/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/globalization/rtl/main.js
 create mode 100644 vue-options-api-demos/scheduler/globalization/rtl/main.vue
 create mode 100644 vue-options-api-demos/scheduler/header-footer/customization/main.js
 create mode 100644 vue-options-api-demos/scheduler/header-footer/customization/main.vue
 create mode 100644 vue-options-api-demos/scheduler/items/context/action-binding/main.js
 create mode 100644 vue-options-api-demos/scheduler/items/context/action-binding/main.vue
 create mode 100644 vue-options-api-demos/scheduler/items/edit-item/controlled-state/main.js
 create mode 100644 vue-options-api-demos/scheduler/items/edit-item/controlled-state/main.vue
 create mode 100644 vue-options-api-demos/scheduler/items/edit-item/extending/main.js
 create mode 100644 vue-options-api-demos/scheduler/items/edit-item/extending/main.vue
 create mode 100644 vue-options-api-demos/scheduler/items/item/callbacks/main.js
 create mode 100644 vue-options-api-demos/scheduler/items/item/callbacks/main.vue
 create mode 100644 vue-options-api-demos/scheduler/items/item/children/main.js
 create mode 100644 vue-options-api-demos/scheduler/items/item/children/main.vue
 create mode 100644 vue-options-api-demos/scheduler/items/item/style/main.js
 create mode 100644 vue-options-api-demos/scheduler/items/item/style/main.vue
 create mode 100644 vue-options-api-demos/scheduler/items/multiple-selection/custom-behavior/main.js
 create mode 100644 vue-options-api-demos/scheduler/items/multiple-selection/custom-behavior/main.vue
 create mode 100644 vue-options-api-demos/scheduler/items/multiple-selection/custom-trigger/main.js
 create mode 100644 vue-options-api-demos/scheduler/items/multiple-selection/custom-trigger/main.vue
 create mode 100644 vue-options-api-demos/scheduler/items/multiple-selection/default-behavior/main.js
 create mode 100644 vue-options-api-demos/scheduler/items/multiple-selection/default-behavior/main.vue
 create mode 100644 vue-options-api-demos/scheduler/items/overview/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/items/overview/main.js
 create mode 100644 vue-options-api-demos/scheduler/items/overview/main.vue
 create mode 100644 vue-options-api-demos/scheduler/items/view-item/extending/main.js
 create mode 100644 vue-options-api-demos/scheduler/items/view-item/extending/main.vue
 create mode 100644 vue-options-api-demos/scheduler/keyboard-navigation/basic/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/keyboard-navigation/basic/main.js
 create mode 100644 vue-options-api-demos/scheduler/keyboard-navigation/basic/main.vue
 create mode 100644 vue-options-api-demos/scheduler/overview/basic/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/overview/basic/main.js
 create mode 100644 vue-options-api-demos/scheduler/overview/basic/main.vue
 create mode 100644 vue-options-api-demos/scheduler/overview/demo/es.json
 create mode 100644 vue-options-api-demos/scheduler/overview/demo/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/overview/demo/main.js
 create mode 100644 vue-options-api-demos/scheduler/overview/demo/main.vue
 create mode 100644 vue-options-api-demos/scheduler/recurring/overview/id/main.js
 create mode 100644 vue-options-api-demos/scheduler/recurring/overview/id/main.vue
 create mode 100644 vue-options-api-demos/scheduler/recurring/overview/id/server-data.js
 create mode 100644 vue-options-api-demos/scheduler/recurring/overview/overview/data.js
 create mode 100644 vue-options-api-demos/scheduler/recurring/overview/overview/main.js
 create mode 100644 vue-options-api-demos/scheduler/recurring/overview/overview/main.vue
 create mode 100644 vue-options-api-demos/scheduler/shared/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/slots/context/action-binding/main.js
 create mode 100644 vue-options-api-demos/scheduler/slots/context/action-binding/main.vue
 create mode 100644 vue-options-api-demos/scheduler/slots/edit-slot/controlled-state/main.js
 create mode 100644 vue-options-api-demos/scheduler/slots/edit-slot/controlled-state/main.vue
 create mode 100644 vue-options-api-demos/scheduler/slots/overview/main.js
 create mode 100644 vue-options-api-demos/scheduler/slots/overview/main.vue
 create mode 100644 vue-options-api-demos/scheduler/slots/slot/style/main.js
 create mode 100644 vue-options-api-demos/scheduler/slots/slot/style/main.vue
 create mode 100644 vue-options-api-demos/scheduler/slots/view-slot/extending/main.js
 create mode 100644 vue-options-api-demos/scheduler/slots/view-slot/extending/main.vue
 create mode 100644 vue-options-api-demos/scheduler/tasks/overview/main.js
 create mode 100644 vue-options-api-demos/scheduler/tasks/overview/main.vue
 create mode 100644 vue-options-api-demos/scheduler/timezones/default/main.js
 create mode 100644 vue-options-api-demos/scheduler/timezones/default/main.vue
 create mode 100644 vue-options-api-demos/scheduler/timezones/fixed/main.js
 create mode 100644 vue-options-api-demos/scheduler/timezones/fixed/main.vue
 create mode 100644 vue-options-api-demos/scheduler/views/agenda/configuration/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/views/agenda/configuration/main.js
 create mode 100644 vue-options-api-demos/scheduler/views/agenda/configuration/main.vue
 create mode 100644 vue-options-api-demos/scheduler/views/agenda/grouping/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/views/agenda/grouping/main.js
 create mode 100644 vue-options-api-demos/scheduler/views/agenda/grouping/main.vue
 create mode 100644 vue-options-api-demos/scheduler/views/controlled-state/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/views/controlled-state/main.js
 create mode 100644 vue-options-api-demos/scheduler/views/controlled-state/main.vue
 create mode 100644 vue-options-api-demos/scheduler/views/day/configuration/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/views/day/configuration/main.js
 create mode 100644 vue-options-api-demos/scheduler/views/day/configuration/main.vue
 create mode 100644 vue-options-api-demos/scheduler/views/day/current-time/main.js
 create mode 100644 vue-options-api-demos/scheduler/views/day/current-time/main.vue
 create mode 100644 vue-options-api-demos/scheduler/views/day/grouping-vertical/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/views/day/grouping-vertical/main.js
 create mode 100644 vue-options-api-demos/scheduler/views/day/grouping-vertical/main.vue
 create mode 100644 vue-options-api-demos/scheduler/views/day/grouping/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/views/day/grouping/main.js
 create mode 100644 vue-options-api-demos/scheduler/views/day/grouping/main.vue
 create mode 100644 vue-options-api-demos/scheduler/views/default-view/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/views/default-view/main.js
 create mode 100644 vue-options-api-demos/scheduler/views/default-view/main.vue
 create mode 100644 vue-options-api-demos/scheduler/views/getting-started/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/views/getting-started/main.js
 create mode 100644 vue-options-api-demos/scheduler/views/getting-started/main.vue
 create mode 100644 vue-options-api-demos/scheduler/views/month/configuration/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/views/month/configuration/main.js
 create mode 100644 vue-options-api-demos/scheduler/views/month/configuration/main.vue
 create mode 100644 vue-options-api-demos/scheduler/views/month/grouping-vertical/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/views/month/grouping-vertical/main.js
 create mode 100644 vue-options-api-demos/scheduler/views/month/grouping-vertical/main.vue
 create mode 100644 vue-options-api-demos/scheduler/views/month/grouping/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/views/month/grouping/main.js
 create mode 100644 vue-options-api-demos/scheduler/views/month/grouping/main.vue
 create mode 100644 vue-options-api-demos/scheduler/views/timeline/configuration/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/views/timeline/configuration/main.js
 create mode 100644 vue-options-api-demos/scheduler/views/timeline/configuration/main.vue
 create mode 100644 vue-options-api-demos/scheduler/views/timeline/current-time/main.js
 create mode 100644 vue-options-api-demos/scheduler/views/timeline/current-time/main.vue
 create mode 100644 vue-options-api-demos/scheduler/views/timeline/grouping-vertical/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/views/timeline/grouping-vertical/main.js
 create mode 100644 vue-options-api-demos/scheduler/views/timeline/grouping-vertical/main.vue
 create mode 100644 vue-options-api-demos/scheduler/views/timeline/grouping/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/views/timeline/grouping/main.js
 create mode 100644 vue-options-api-demos/scheduler/views/timeline/grouping/main.vue
 create mode 100644 vue-options-api-demos/scheduler/views/week/configuration/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/views/week/configuration/main.js
 create mode 100644 vue-options-api-demos/scheduler/views/week/configuration/main.vue
 create mode 100644 vue-options-api-demos/scheduler/views/week/grouping-vertical/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/views/week/grouping-vertical/main.js
 create mode 100644 vue-options-api-demos/scheduler/views/week/grouping-vertical/main.vue
 create mode 100644 vue-options-api-demos/scheduler/views/week/grouping/events-utc.js
 create mode 100644 vue-options-api-demos/scheduler/views/week/grouping/main.js
 create mode 100644 vue-options-api-demos/scheduler/views/week/grouping/main.vue
 create mode 100644 vue-options-api-demos/scrollview/active-view/main.js
 create mode 100644 vue-options-api-demos/scrollview/active-view/main.vue
 create mode 100644 vue-options-api-demos/scrollview/active-view/styles.css
 create mode 100644 vue-options-api-demos/scrollview/arrows/main.js
 create mode 100644 vue-options-api-demos/scrollview/arrows/main.vue
 create mode 100644 vue-options-api-demos/scrollview/arrows/styles.css
 create mode 100644 vue-options-api-demos/scrollview/automatic-interval/main.js
 create mode 100644 vue-options-api-demos/scrollview/automatic-interval/main.vue
 create mode 100644 vue-options-api-demos/scrollview/automatic-interval/styles.css
 create mode 100644 vue-options-api-demos/scrollview/automatic-scrolling/main.js
 create mode 100644 vue-options-api-demos/scrollview/automatic-scrolling/main.vue
 create mode 100644 vue-options-api-demos/scrollview/automatic-scrolling/styles.css
 create mode 100644 vue-options-api-demos/scrollview/endless/main.js
 create mode 100644 vue-options-api-demos/scrollview/endless/main.vue
 create mode 100644 vue-options-api-demos/scrollview/endless/styles.css
 create mode 100644 vue-options-api-demos/scrollview/get-started/main.js
 create mode 100644 vue-options-api-demos/scrollview/get-started/main.vue
 create mode 100644 vue-options-api-demos/scrollview/get-started/styles.css
 create mode 100644 vue-options-api-demos/scrollview/keyboard-navigation/main.js
 create mode 100644 vue-options-api-demos/scrollview/keyboard-navigation/main.vue
 create mode 100644 vue-options-api-demos/scrollview/keyboard-navigation/styles.css
 create mode 100644 vue-options-api-demos/scrollview/overview/main.js
 create mode 100644 vue-options-api-demos/scrollview/overview/main.vue
 create mode 100644 vue-options-api-demos/scrollview/overview/styles.css
 create mode 100644 vue-options-api-demos/scrollview/pager-overlay/main.js
 create mode 100644 vue-options-api-demos/scrollview/pager-overlay/main.vue
 create mode 100644 vue-options-api-demos/scrollview/pager-overlay/styles.css
 create mode 100644 vue-options-api-demos/scrollview/paging/main.js
 create mode 100644 vue-options-api-demos/scrollview/paging/main.vue
 create mode 100644 vue-options-api-demos/scrollview/paging/styles.css
 create mode 100644 vue-options-api-demos/scrollview/rtl/main.js
 create mode 100644 vue-options-api-demos/scrollview/rtl/main.vue
 create mode 100644 vue-options-api-demos/scrollview/rtl/styles.css
 create mode 100644 vue-options-api-demos/tooltip/controlled-mode/main.js
 create mode 100644 vue-options-api-demos/tooltip/controlled-mode/main.vue
 create mode 100644 vue-options-api-demos/tooltip/customization/main.js
 create mode 100644 vue-options-api-demos/tooltip/customization/main.vue
 create mode 100644 vue-options-api-demos/tooltip/events/Logger.vue
 create mode 100644 vue-options-api-demos/tooltip/events/main.js
 create mode 100644 vue-options-api-demos/tooltip/events/main.vue
 create mode 100644 vue-options-api-demos/tooltip/events/styles.css
 create mode 100644 vue-options-api-demos/tooltip/filters/main.js
 create mode 100644 vue-options-api-demos/tooltip/filters/main.vue
 create mode 100644 vue-options-api-demos/tooltip/grid-integration/main.js
 create mode 100644 vue-options-api-demos/tooltip/grid-integration/main.vue
 create mode 100644 vue-options-api-demos/tooltip/multiple/main.js
 create mode 100644 vue-options-api-demos/tooltip/multiple/main.vue
 create mode 100644 vue-options-api-demos/tooltip/overview/main.js
 create mode 100644 vue-options-api-demos/tooltip/overview/main.vue
 create mode 100644 vue-options-api-demos/tooltip/overview/styles.css
 create mode 100644 vue-options-api-demos/tooltip/positioning/main.js
 create mode 100644 vue-options-api-demos/tooltip/positioning/main.vue
 create mode 100644 vue-options-api-demos/tooltip/shared/products.json
 create mode 100644 vue-options-api-demos/tooltip/svg/main.js
 create mode 100644 vue-options-api-demos/tooltip/svg/main.vue
 create mode 100644 vue-options-api-demos/tooltip/templates/main.js
 create mode 100644 vue-options-api-demos/tooltip/templates/main.vue
 create mode 100644 vue-options-api-demos/treelist/aggregates/data.js
 create mode 100644 vue-options-api-demos/treelist/aggregates/main.js
 create mode 100644 vue-options-api-demos/treelist/aggregates/main.vue
 create mode 100644 vue-options-api-demos/treelist/cells-custom/data.js
 create mode 100644 vue-options-api-demos/treelist/cells-custom/main.js
 create mode 100644 vue-options-api-demos/treelist/cells-custom/main.vue
 create mode 100644 vue-options-api-demos/treelist/column-menu/data.js
 create mode 100644 vue-options-api-demos/treelist/column-menu/main.js
 create mode 100644 vue-options-api-demos/treelist/column-menu/main.vue
 create mode 100644 vue-options-api-demos/treelist/column-virtualization/main.js
 create mode 100644 vue-options-api-demos/treelist/column-virtualization/main.vue
 create mode 100644 vue-options-api-demos/treelist/column-virtualization/treelist-data.js
 create mode 100644 vue-options-api-demos/treelist/column-width-fixed/data.js
 create mode 100644 vue-options-api-demos/treelist/column-width-fixed/main.js
 create mode 100644 vue-options-api-demos/treelist/column-width-fixed/main.vue
 create mode 100644 vue-options-api-demos/treelist/column-width-percentage/data.js
 create mode 100644 vue-options-api-demos/treelist/column-width-percentage/main.js
 create mode 100644 vue-options-api-demos/treelist/column-width-percentage/main.vue
 create mode 100644 vue-options-api-demos/treelist/dragdrop/data.js
 create mode 100644 vue-options-api-demos/treelist/dragdrop/main.js
 create mode 100644 vue-options-api-demos/treelist/dragdrop/main.vue
 create mode 100644 vue-options-api-demos/treelist/editing-external-form/CommandCell.vue
 create mode 100644 vue-options-api-demos/treelist/editing-external-form/DialogContainer.vue
 create mode 100644 vue-options-api-demos/treelist/editing-external-form/data.js
 create mode 100644 vue-options-api-demos/treelist/editing-external-form/main.js
 create mode 100644 vue-options-api-demos/treelist/editing-external-form/main.vue
 create mode 100644 vue-options-api-demos/treelist/editing-in-cell/data.js
 create mode 100644 vue-options-api-demos/treelist/editing-in-cell/main.js
 create mode 100644 vue-options-api-demos/treelist/editing-in-cell/main.vue
 create mode 100644 vue-options-api-demos/treelist/editing-inline/CommandCell.vue
 create mode 100644 vue-options-api-demos/treelist/editing-inline/data.js
 create mode 100644 vue-options-api-demos/treelist/editing-inline/main.js
 create mode 100644 vue-options-api-demos/treelist/editing-inline/main.vue
 create mode 100644 vue-options-api-demos/treelist/editing-row-click/data.js
 create mode 100644 vue-options-api-demos/treelist/editing-row-click/main.js
 create mode 100644 vue-options-api-demos/treelist/editing-row-click/main.vue
 create mode 100644 vue-options-api-demos/treelist/excel/basic/data.js
 create mode 100644 vue-options-api-demos/treelist/excel/basic/main.js
 create mode 100644 vue-options-api-demos/treelist/excel/basic/main.vue
 create mode 100644 vue-options-api-demos/treelist/excel/customization/data.js
 create mode 100644 vue-options-api-demos/treelist/excel/customization/main.js
 create mode 100644 vue-options-api-demos/treelist/excel/customization/main.vue
 create mode 100644 vue-options-api-demos/treelist/excel/single-page/data.js
 create mode 100644 vue-options-api-demos/treelist/excel/single-page/main.js
 create mode 100644 vue-options-api-demos/treelist/excel/single-page/main.vue
 create mode 100644 vue-options-api-demos/treelist/filtering-basic/data.js
 create mode 100644 vue-options-api-demos/treelist/filtering-basic/main.js
 create mode 100644 vue-options-api-demos/treelist/filtering-basic/main.vue
 create mode 100644 vue-options-api-demos/treelist/filtering-custom/DropDownListFilter.vue
 create mode 100644 vue-options-api-demos/treelist/filtering-custom/data.js
 create mode 100644 vue-options-api-demos/treelist/filtering-custom/main.js
 create mode 100644 vue-options-api-demos/treelist/filtering-custom/main.vue
 create mode 100644 vue-options-api-demos/treelist/flat-data/flat-data.js
 create mode 100644 vue-options-api-demos/treelist/flat-data/main.js
 create mode 100644 vue-options-api-demos/treelist/flat-data/main.vue
 create mode 100644 vue-options-api-demos/treelist/get-started/main.js
 create mode 100644 vue-options-api-demos/treelist/get-started/main.vue
 create mode 100644 vue-options-api-demos/treelist/get-started/simple-data.js
 create mode 100644 vue-options-api-demos/treelist/globalization/data.js
 create mode 100644 vue-options-api-demos/treelist/globalization/es.json
 create mode 100644 vue-options-api-demos/treelist/globalization/main.js
 create mode 100644 vue-options-api-demos/treelist/globalization/main.vue
 create mode 100644 vue-options-api-demos/treelist/keyboard-navigation/data.js
 create mode 100644 vue-options-api-demos/treelist/keyboard-navigation/main.js
 create mode 100644 vue-options-api-demos/treelist/keyboard-navigation/main.vue
 create mode 100644 vue-options-api-demos/treelist/locked/data.js
 create mode 100644 vue-options-api-demos/treelist/locked/main.js
 create mode 100644 vue-options-api-demos/treelist/locked/main.vue
 create mode 100644 vue-options-api-demos/treelist/multi-column-headers/data.js
 create mode 100644 vue-options-api-demos/treelist/multi-column-headers/main.js
 create mode 100644 vue-options-api-demos/treelist/multi-column-headers/main.vue
 create mode 100644 vue-options-api-demos/treelist/overview/data.js
 create mode 100644 vue-options-api-demos/treelist/overview/main.js
 create mode 100644 vue-options-api-demos/treelist/overview/main.vue
 create mode 100644 vue-options-api-demos/treelist/paging/main.js
 create mode 100644 vue-options-api-demos/treelist/paging/main.vue
 create mode 100644 vue-options-api-demos/treelist/paging/treelist-data.js
 create mode 100644 vue-options-api-demos/treelist/pdf/all-data-expanded/data.js
 create mode 100644 vue-options-api-demos/treelist/pdf/all-data-expanded/main.js
 create mode 100644 vue-options-api-demos/treelist/pdf/all-data-expanded/main.vue
 create mode 100644 vue-options-api-demos/treelist/pdf/basic/data.js
 create mode 100644 vue-options-api-demos/treelist/pdf/basic/main.js
 create mode 100644 vue-options-api-demos/treelist/pdf/basic/main.vue
 create mode 100644 vue-options-api-demos/treelist/pdf/columns-modification/data.js
 create mode 100644 vue-options-api-demos/treelist/pdf/columns-modification/main.js
 create mode 100644 vue-options-api-demos/treelist/pdf/columns-modification/main.vue
 create mode 100644 vue-options-api-demos/treelist/reordering/data.js
 create mode 100644 vue-options-api-demos/treelist/reordering/main.js
 create mode 100644 vue-options-api-demos/treelist/reordering/main.vue
 create mode 100644 vue-options-api-demos/treelist/resizing/data.js
 create mode 100644 vue-options-api-demos/treelist/resizing/main.js
 create mode 100644 vue-options-api-demos/treelist/resizing/main.vue
 create mode 100644 vue-options-api-demos/treelist/selection-basic/data.js
 create mode 100644 vue-options-api-demos/treelist/selection-basic/main.js
 create mode 100644 vue-options-api-demos/treelist/selection-basic/main.vue
 create mode 100644 vue-options-api-demos/treelist/shared/data.js
 create mode 100644 vue-options-api-demos/treelist/shared/flat-data.js
 create mode 100644 vue-options-api-demos/treelist/shared/pager.tsx
 create mode 100644 vue-options-api-demos/treelist/shared/simple-data.js
 create mode 100644 vue-options-api-demos/treelist/shared/treelist-data.js
 create mode 100644 vue-options-api-demos/treelist/sorting-basic/data.js
 create mode 100644 vue-options-api-demos/treelist/sorting-basic/main.js
 create mode 100644 vue-options-api-demos/treelist/sorting-basic/main.vue
 create mode 100644 vue-options-api-demos/treelist/sorting-customization/data.js
 create mode 100644 vue-options-api-demos/treelist/sorting-customization/main.js
 create mode 100644 vue-options-api-demos/treelist/sorting-customization/main.vue
 create mode 100644 vue-options-api-demos/treelist/toolbar/data.js
 create mode 100644 vue-options-api-demos/treelist/toolbar/main.js
 create mode 100644 vue-options-api-demos/treelist/toolbar/main.vue
 create mode 100644 vue-options-api-demos/treelist/virtual-scroll/main.js
 create mode 100644 vue-options-api-demos/treelist/virtual-scroll/main.vue
 create mode 100644 vue-options-api-demos/treelist/virtual-scroll/treelist-data.js
 create mode 100644 vue-options-api-demos/treeview/appearance/StyleConfigurator.vue
 create mode 100644 vue-options-api-demos/treeview/appearance/main.js
 create mode 100644 vue-options-api-demos/treeview/appearance/main.vue
 create mode 100644 vue-options-api-demos/treeview/checkbox/checkbox-all-helper/main.js
 create mode 100644 vue-options-api-demos/treeview/checkbox/checkbox-all-helper/main.vue
 create mode 100644 vue-options-api-demos/treeview/checkbox/checkbox-all/main.js
 create mode 100644 vue-options-api-demos/treeview/checkbox/checkbox-all/main.vue
 create mode 100644 vue-options-api-demos/treeview/checkbox/checkbox-helper-multiple/main.js
 create mode 100644 vue-options-api-demos/treeview/checkbox/checkbox-helper-multiple/main.vue
 create mode 100644 vue-options-api-demos/treeview/checkbox/checkbox-helper-single/main.js
 create mode 100644 vue-options-api-demos/treeview/checkbox/checkbox-helper-single/main.vue
 create mode 100644 vue-options-api-demos/treeview/checkbox/checkbox-helper/main.js
 create mode 100644 vue-options-api-demos/treeview/checkbox/checkbox-helper/main.vue
 create mode 100644 vue-options-api-demos/treeview/custom/main.js
 create mode 100644 vue-options-api-demos/treeview/custom/main.vue
 create mode 100644 vue-options-api-demos/treeview/data-binding/basic/main.js
 create mode 100644 vue-options-api-demos/treeview/data-binding/basic/main.vue
 create mode 100644 vue-options-api-demos/treeview/data-binding/item-fields/main.js
 create mode 100644 vue-options-api-demos/treeview/data-binding/item-fields/main.vue
 create mode 100644 vue-options-api-demos/treeview/data-binding/remote-data/main.js
 create mode 100644 vue-options-api-demos/treeview/data-binding/remote-data/main.vue
 create mode 100644 vue-options-api-demos/treeview/data-reload/main.js
 create mode 100644 vue-options-api-demos/treeview/data-reload/main.vue
 create mode 100644 vue-options-api-demos/treeview/drag/multiple/main.js
 create mode 100644 vue-options-api-demos/treeview/drag/multiple/main.vue
 create mode 100644 vue-options-api-demos/treeview/drag/single/main.js
 create mode 100644 vue-options-api-demos/treeview/drag/single/main.vue
 create mode 100644 vue-options-api-demos/treeview/events/drag/Logger.vue
 create mode 100644 vue-options-api-demos/treeview/events/drag/main.js
 create mode 100644 vue-options-api-demos/treeview/events/drag/main.vue
 create mode 100644 vue-options-api-demos/treeview/events/select-check/Logger.vue
 create mode 100644 vue-options-api-demos/treeview/events/select-check/main.js
 create mode 100644 vue-options-api-demos/treeview/events/select-check/main.vue
 create mode 100644 vue-options-api-demos/treeview/expand/custom-items-expanded-helper-function/main.js
 create mode 100644 vue-options-api-demos/treeview/expand/custom-items-expanded-helper-function/main.vue
 create mode 100644 vue-options-api-demos/treeview/expand/items-expanded-all/main.js
 create mode 100644 vue-options-api-demos/treeview/expand/items-expanded-all/main.vue
 create mode 100644 vue-options-api-demos/treeview/expand/items-expanded-directly/main.js
 create mode 100644 vue-options-api-demos/treeview/expand/items-expanded-directly/main.vue
 create mode 100644 vue-options-api-demos/treeview/expand/items-expanded-helper-function/main.js
 create mode 100644 vue-options-api-demos/treeview/expand/items-expanded-helper-function/main.vue
 create mode 100644 vue-options-api-demos/treeview/get-started/main.js
 create mode 100644 vue-options-api-demos/treeview/get-started/main.vue
 create mode 100644 vue-options-api-demos/treeview/keyboard/main.js
 create mode 100644 vue-options-api-demos/treeview/keyboard/main.vue
 create mode 100644 vue-options-api-demos/treeview/overview/basic/main.js
 create mode 100644 vue-options-api-demos/treeview/overview/basic/main.vue
 create mode 100644 vue-options-api-demos/treeview/select/selection-all/main.js
 create mode 100644 vue-options-api-demos/treeview/select/selection-all/main.vue
 create mode 100644 vue-options-api-demos/treeview/select/selection-update-helper-function/main.js
 create mode 100644 vue-options-api-demos/treeview/select/selection-update-helper-function/main.vue
 create mode 100644 vue-options-api-demos/treeview/select/selection-update/main.js
 create mode 100644 vue-options-api-demos/treeview/select/selection-update/main.vue
 create mode 100644 vue-options-api-demos/upload/action-buttons/main.js
 create mode 100644 vue-options-api-demos/upload/action-buttons/main.vue
 create mode 100644 vue-options-api-demos/upload/additional-data/main.js
 create mode 100644 vue-options-api-demos/upload/additional-data/main.vue
 create mode 100644 vue-options-api-demos/upload/credentials/main.js
 create mode 100644 vue-options-api-demos/upload/credentials/main.vue
 create mode 100644 vue-options-api-demos/upload/custom-complex/CustomList.vue
 create mode 100644 vue-options-api-demos/upload/custom-complex/main.js
 create mode 100644 vue-options-api-demos/upload/custom-complex/main.vue
 create mode 100644 vue-options-api-demos/upload/custom-external-drop-zone/CustomHint.vue
 create mode 100644 vue-options-api-demos/upload/custom-external-drop-zone/CustomNote.vue
 create mode 100644 vue-options-api-demos/upload/custom-external-drop-zone/main.js
 create mode 100644 vue-options-api-demos/upload/custom-external-drop-zone/main.vue
 create mode 100644 vue-options-api-demos/upload/custom/CustomList.vue
 create mode 100644 vue-options-api-demos/upload/custom/main.js
 create mode 100644 vue-options-api-demos/upload/custom/main.vue
 create mode 100644 vue-options-api-demos/upload/disabled/main.js
 create mode 100644 vue-options-api-demos/upload/disabled/main.vue
 create mode 100644 vue-options-api-demos/upload/drag-drop/main.js
 create mode 100644 vue-options-api-demos/upload/drag-drop/main.vue
 create mode 100644 vue-options-api-demos/upload/events/main.js
 create mode 100644 vue-options-api-demos/upload/events/main.vue
 create mode 100644 vue-options-api-demos/upload/external-drop-zone/main.js
 create mode 100644 vue-options-api-demos/upload/external-drop-zone/main.vue
 create mode 100644 vue-options-api-demos/upload/file-processing/automatic/main.js
 create mode 100644 vue-options-api-demos/upload/file-processing/automatic/main.vue
 create mode 100644 vue-options-api-demos/upload/file-processing/batch/main.js
 create mode 100644 vue-options-api-demos/upload/file-processing/batch/main.vue
 create mode 100644 vue-options-api-demos/upload/file-processing/single/main.js
 create mode 100644 vue-options-api-demos/upload/file-processing/single/main.vue
 create mode 100644 vue-options-api-demos/upload/getting-started/main.js
 create mode 100644 vue-options-api-demos/upload/getting-started/main.vue
 create mode 100644 vue-options-api-demos/upload/globalization/main.js
 create mode 100644 vue-options-api-demos/upload/globalization/main.vue
 create mode 100644 vue-options-api-demos/upload/keyboard/main.js
 create mode 100644 vue-options-api-demos/upload/keyboard/main.vue
 create mode 100644 vue-options-api-demos/upload/modes/controlled/main.js
 create mode 100644 vue-options-api-demos/upload/modes/controlled/main.vue
 create mode 100644 vue-options-api-demos/upload/modes/uncontrolled/main.js
 create mode 100644 vue-options-api-demos/upload/modes/uncontrolled/main.vue
 create mode 100644 vue-options-api-demos/upload/restrictions/custom/main.js
 create mode 100644 vue-options-api-demos/upload/restrictions/custom/main.vue
 create mode 100644 vue-options-api-demos/upload/restrictions/extension/main.js
 create mode 100644 vue-options-api-demos/upload/restrictions/extension/main.vue
 create mode 100644 vue-options-api-demos/upload/restrictions/max-file-size/main.js
 create mode 100644 vue-options-api-demos/upload/restrictions/max-file-size/main.vue
 create mode 100644 vue-options-api-demos/upload/restrictions/min-file-size/main.js
 create mode 100644 vue-options-api-demos/upload/restrictions/min-file-size/main.vue
 create mode 100644 vue-options-api-demos/upload/rtl/main.js
 create mode 100644 vue-options-api-demos/upload/rtl/main.vue

diff --git a/vue-options-api-demos/README.md b/vue-options-api-demos/README.md
new file mode 100644
index 00000000..d6d34ca9
--- /dev/null
+++ b/vue-options-api-demos/README.md
@@ -0,0 +1,37 @@
+# Kendo UI for Vue Options API Demos Index
+
+This folder contains examples for the Options API demos of the Kendo UI for Vue suite. The examples demonstrate how the different Kendo UI for Vue components are used in various scenarios. Below is a list of subfolders, each containing examples for a specific feature:
+
+- [Animation](./animation/examples)
+- [Buttons](./buttons/examples)
+- [Charts](./charts/examples)
+- [Common](./common/examples)
+- [Conversational UI](./conversational-ui/examples)
+- [Data Tools](./datatools/examples)
+- [Date Inputs](./dateinputs/examples)
+- [Dialogs](./dialogs/examples)
+- [Dropdowns](./dropdowns/examples)
+- [Editor](./editor/examples)
+- [Excel](./excel/examples)
+- [Form](./form/examples)
+- [Gauges](./gauges/examples)
+- [Grid](./grid/examples)
+- [Indicators](./indicators/examples)
+- [Inputs](./inputs/examples)
+- [Internationalization (Intl)](./intl/examples)
+- [Labels](./labels/examples)
+- [Layout](./layout/examples)
+- [ListBox](./listbox/examples)
+- [ListView](./listview/examples)
+- [Notification](./notification/examples)
+- [PDF](./pdf/examples)
+- [Popup](./popup/examples)
+- [Progress Bars](./progressbars/examples)
+- [Scheduler](./scheduler/examples)
+- [ScrollView](./scrollview/examples)
+- [Tooltip](./tooltip/examples)
+- [TreeList](./treelist/examples)
+- [TreeView](./treeview/examples)
+- [Upload](./upload/examples)
+
+Each subfolder contains example implementations and usage scenarios for the respective feature, demonstrating the usage of the Kendo UI for Vue suite in the context of Options API.
diff --git a/vue-options-api-demos/animation/animations/entering/main.js b/vue-options-api-demos/animation/animations/entering/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/animation/animations/entering/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/animation/animations/entering/main.vue b/vue-options-api-demos/animation/animations/entering/main.vue
new file mode 100644
index 00000000..82b64216
--- /dev/null
+++ b/vue-options-api-demos/animation/animations/entering/main.vue
@@ -0,0 +1,40 @@
+<template>
+      <div class="example">
+        <div>
+            <dl>
+                <dt>
+                    Animate:
+                </dt>
+                <dd>
+                     <kbutton @click="animate">Animate</kbutton>
+                </dd>
+            </dl>
+            <Animation :appear="show"
+                    :transition-name="'custom-animation'">
+                <div class="content">CONTENT</div>
+            </Animation>
+        </div>
+    </div>
+</template>
+<script>
+import './styles.css';
+import { Button } from '@progress/kendo-vue-buttons';
+import { Animation } from '@progress/kendo-vue-animation';
+
+export default {
+    components: {
+      'Animation': Animation,
+      'kbutton': Button
+    },
+     data: function () {
+        return {
+             show: true
+        };
+    },
+    methods:{
+        animate(){
+             this.show = !this.show;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/animation/animations/entering/styles.css b/vue-options-api-demos/animation/animations/entering/styles.css
new file mode 100644
index 00000000..98e1d3c2
--- /dev/null
+++ b/vue-options-api-demos/animation/animations/entering/styles.css
@@ -0,0 +1,18 @@
+.custom-animation-enter {
+  opacity: 0;
+}
+.custom-animation-enter-active {
+  transition: opacity .5s;
+}
+
+.content {
+  width: 100px;
+  padding: 10px;
+  color: #787878;
+  background-color: #fcf7f8;
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+  border: 1px solid rgba(0,0,0,.05);
+}
diff --git a/vue-options-api-demos/animation/animations/exiting/main.js b/vue-options-api-demos/animation/animations/exiting/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/animation/animations/exiting/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/animation/animations/exiting/main.vue b/vue-options-api-demos/animation/animations/exiting/main.vue
new file mode 100644
index 00000000..5ff85f08
--- /dev/null
+++ b/vue-options-api-demos/animation/animations/exiting/main.vue
@@ -0,0 +1,41 @@
+<template>
+     <div class="example">
+        <div>
+            <dl>
+                <dt>
+                    Animate:
+                </dt>
+                <dd>
+                     <kbutton @click="animate">Animate</kbutton>
+                </dd>
+            </dl>
+            <Animation :appear="show"
+                    :transition-name="'custom-animation'"
+                    :component-child-class-name="'child'">
+                <div class="content">CONTENT</div>
+            </Animation>
+        </div>
+    </div>
+</template>
+<script>
+import './styles.css';
+import { Animation } from '@progress/kendo-vue-animation';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'Animation': Animation,
+      'kbutton': Button
+    },
+     data: function () {
+        return {
+             show: true
+        };
+    },
+    methods:{
+        animate(){
+             this.show = !this.show;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/animation/animations/exiting/styles.css b/vue-options-api-demos/animation/animations/exiting/styles.css
new file mode 100644
index 00000000..9c310fed
--- /dev/null
+++ b/vue-options-api-demos/animation/animations/exiting/styles.css
@@ -0,0 +1,22 @@
+.custom-animation-exit {
+  opacity: 0;    
+}
+.custom-animation-exit-active {
+  transition: opacity .5s;
+}
+
+.content {
+  width: 100px;
+  padding: 10px;
+  color: #787878;
+  background-color: #fcf7f8;
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+  border: 1px solid rgba(0,0,0,.05);
+}
+
+.child{
+  opacity: 100;
+}
diff --git a/vue-options-api-demos/animation/api/expand-props/main.js b/vue-options-api-demos/animation/api/expand-props/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/animation/api/expand-props/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/animation/api/expand-props/main.vue b/vue-options-api-demos/animation/api/expand-props/main.vue
new file mode 100644
index 00000000..3de72056
--- /dev/null
+++ b/vue-options-api-demos/animation/api/expand-props/main.vue
@@ -0,0 +1,77 @@
+<template>
+    <div class="row">
+                <div class="col-md-6">
+                    <dl>
+                        <dt>
+                            Expand: {{direction}}
+                        </dt>
+                        <dd>
+                            <kbutton @click="onClick">Animate</kbutton>
+                        </dd>
+                    </dl>
+                  <Expand :appear="show" :direction="direction">
+                         <div class="content">
+                            Content
+                            </div >
+                    </Expand>
+                </div>
+                <div class="col-md-6">
+                    <dl>
+                        <dt>
+                            Direction:
+                        </dt>
+                        <dd>
+                            <div class="example-config">
+                                <label>
+                                    <input
+                                         type="radio"
+                                         name="direction"
+                                         :value="'vertical'"
+                                         :checked="direction === 'vertical'"
+                                         @click="onChange"
+                                     />
+                                    &nbsp;Vertical
+                                </label>
+                                <br />
+                                <label>
+                                    <input
+                                         type="radio"
+                                         name="direction"
+                                         :value="'horizontal'"
+                                         :checked="direction === 'horizontal'"
+                                         @click="onChange"
+                                     />
+                                    &nbsp;Horizontal
+                                </label>
+                            </div>
+                        </dd>
+                    </dl>
+                </div>
+            </div>
+</template>
+<script>
+import './styles.css';
+import { Expand } from '@progress/kendo-vue-animation';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'Expand': Expand,
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+             show: false,
+            direction: 'vertical'
+        };
+    },
+    methods:{
+        onClick (e) {
+            this.show = !this.show;
+        },
+        onChange (e) {
+            this.direction = e.target.value;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/animation/api/expand-props/styles.css b/vue-options-api-demos/animation/api/expand-props/styles.css
new file mode 100644
index 00000000..2374dfbb
--- /dev/null
+++ b/vue-options-api-demos/animation/api/expand-props/styles.css
@@ -0,0 +1,11 @@
+.content {
+  width: 100px;
+  padding: 10px;
+  color: #787878;
+  background-color: #fcf7f8;
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+  border: 1px solid rgba(0,0,0,.05);
+ }
diff --git a/vue-options-api-demos/animation/api/fade-props/main.js b/vue-options-api-demos/animation/api/fade-props/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/animation/api/fade-props/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/animation/api/fade-props/main.vue b/vue-options-api-demos/animation/api/fade-props/main.vue
new file mode 100644
index 00000000..599cb40b
--- /dev/null
+++ b/vue-options-api-demos/animation/api/fade-props/main.vue
@@ -0,0 +1,39 @@
+<template>
+    <div class="row">
+                <div class="col-md-6">
+                    <dl>
+                        <dt>
+                            Fade: {{direction}}
+                        </dt>
+                        <dd>
+                            <kbutton @click="onClick">Animate</kbutton>
+                        </dd>
+                    </dl>
+                  <Fade :appear="index%2" :direction="direction" :stack-children="true">
+                       <div class="content" key='key'>{{index}}</div>
+                    </Fade>
+                </div>
+            </div>
+</template>
+<script>
+import './styles.css';
+import { Fade } from '@progress/kendo-vue-animation';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'Fade': Fade,
+        'kbutton': Button
+    },
+    data: function () {
+        return {
+            index: 1,
+        };
+    },
+    methods:{
+        onClick (e) {
+            this.index = this.index + 1;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/animation/api/fade-props/styles.css b/vue-options-api-demos/animation/api/fade-props/styles.css
new file mode 100644
index 00000000..2374dfbb
--- /dev/null
+++ b/vue-options-api-demos/animation/api/fade-props/styles.css
@@ -0,0 +1,11 @@
+.content {
+  width: 100px;
+  padding: 10px;
+  color: #787878;
+  background-color: #fcf7f8;
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+  border: 1px solid rgba(0,0,0,.05);
+ }
diff --git a/vue-options-api-demos/animation/api/push-props/main.js b/vue-options-api-demos/animation/api/push-props/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/animation/api/push-props/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/animation/api/push-props/main.vue b/vue-options-api-demos/animation/api/push-props/main.vue
new file mode 100644
index 00000000..70dba014
--- /dev/null
+++ b/vue-options-api-demos/animation/api/push-props/main.vue
@@ -0,0 +1,77 @@
+<template>
+    <div class="row">
+                <div class="col-md-6">
+                    <dl>
+                        <dt>
+                            Push: {{direction}}
+                        </dt>
+                        <dd>
+                            <kbutton @click="onClick">Animate</kbutton>
+                        </dd>
+                    </dl>
+                  <Push :appear="index%2" :direction="direction" :stack-children="true">
+                       <div class="content" key='key'>{{index}}</div>
+                    </Push>
+                </div>
+                <div class="col-md-6">
+                    <dl>
+                        <dt>
+                            Direction:
+                        </dt>
+                        <dd>
+                           <div class="example-config">
+                                <label>
+                                    <input type="radio" name="direction" :value="'up'" 
+                                      :checked="direction === 'up'" @click="onChange"/>
+                                    &nbsp;Up
+                                </label>
+                                <br />
+                                <label>
+                                    <input type="radio" name="direction" :value="'down'" 
+                                        :checked="direction === 'down'" @click="onChange"/>
+                                    &nbsp;Down
+                                </label>
+                                <br />
+                                <label>
+                                    <input type="radio" name="direction" :value="'left'" 
+                                        :checked="direction === 'left'" @click="onChange"/>
+                                    &nbsp;Left
+                                </label>
+                                <br />
+                                <label>
+                                    <input type="radio" name="direction" :value="'right'" 
+                                     :checked="direction === 'right'" @click="onChange"/>
+                                    &nbsp;Right
+                                </label>
+                            </div>
+                        </dd>
+                    </dl>
+                </div>
+            </div>
+</template>
+<script>
+import './styles.css';
+import { Push } from '@progress/kendo-vue-animation';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'Push': Push,
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+            index: 1,
+            direction: 'down'
+        };
+    },
+    methods:{
+        onClick (e) {
+            this.index = this.index + 1;
+        },
+        onChange (e) {
+            this.direction = e.target.value;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/animation/api/push-props/styles.css b/vue-options-api-demos/animation/api/push-props/styles.css
new file mode 100644
index 00000000..4816d5dd
--- /dev/null
+++ b/vue-options-api-demos/animation/api/push-props/styles.css
@@ -0,0 +1,11 @@
+.content {
+  width: 100px;
+  padding: 10px;
+  color: #787878;
+  background-color: #fcf7f8;
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+  border: 1px solid rgba(0,0,0,.05);
+}
diff --git a/vue-options-api-demos/animation/api/reveal-props/main.js b/vue-options-api-demos/animation/api/reveal-props/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/animation/api/reveal-props/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/animation/api/reveal-props/main.vue b/vue-options-api-demos/animation/api/reveal-props/main.vue
new file mode 100644
index 00000000..d2e33cad
--- /dev/null
+++ b/vue-options-api-demos/animation/api/reveal-props/main.vue
@@ -0,0 +1,77 @@
+<template>
+    <div class="row">
+                <div class="col-md-6">
+                    <dl>
+                        <dt>
+                            Reveal: {{direction}}
+                        </dt>
+                        <dd>
+                            <kbutton @click="onClick">Animate</kbutton>
+                        </dd>
+                    </dl>
+                  <Reveal :appear="show" :direction="direction">
+                         <div class="content">
+                            Content
+                            </div >
+                    </Reveal>
+                </div>
+                <div class="col-md-6">
+                    <dl>
+                        <dt>
+                            Direction:
+                        </dt>
+                        <dd>
+                            <div class="example-config">
+                                <label>
+                                    <input
+                                         type="radio"
+                                         name="direction"
+                                         :value="'vertical'"
+                                         :checked="direction === 'vertical'"
+                                         @click="onChange"
+                                     />
+                                    &nbsp;Vertical
+                                </label>
+                                <br />
+                                <label>
+                                    <input
+                                         type="radio"
+                                         name="direction"
+                                         :value="'horizontal'"
+                                         :checked="direction === 'horizontal'"
+                                         @click="onChange"
+                                     />
+                                    &nbsp;Horizontal
+                                </label>
+                            </div>
+                        </dd>
+                    </dl>
+                </div>
+            </div>
+</template>
+<script>
+import './styles.css';
+import { Reveal } from '@progress/kendo-vue-animation';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'Reveal': Reveal,
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+             show: false,
+            direction: 'vertical'
+        };
+    },
+    methods:{
+        onClick (e) {
+            this.show = !this.show;
+        },
+        onChange (e) {
+            this.direction = e.target.value;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/animation/api/reveal-props/styles.css b/vue-options-api-demos/animation/api/reveal-props/styles.css
new file mode 100644
index 00000000..2374dfbb
--- /dev/null
+++ b/vue-options-api-demos/animation/api/reveal-props/styles.css
@@ -0,0 +1,11 @@
+.content {
+  width: 100px;
+  padding: 10px;
+  color: #787878;
+  background-color: #fcf7f8;
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+  border: 1px solid rgba(0,0,0,.05);
+ }
diff --git a/vue-options-api-demos/animation/api/slide-props/main.js b/vue-options-api-demos/animation/api/slide-props/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/animation/api/slide-props/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/animation/api/slide-props/main.vue b/vue-options-api-demos/animation/api/slide-props/main.vue
new file mode 100644
index 00000000..9cd2cf16
--- /dev/null
+++ b/vue-options-api-demos/animation/api/slide-props/main.vue
@@ -0,0 +1,79 @@
+<template>
+    <div class="row">
+                <div class="col-md-6">
+                    <dl>
+                        <dt>
+                            Slide: {{direction}}
+                        </dt>
+                        <dd>
+                            <kbutton @click="onClick">Animate</kbutton>
+                        </dd>
+                    </dl>
+                  <Slide :appear="show" :direction="direction">
+                         <div class="content">
+                            Content
+                            </div >
+                    </Slide>
+                </div>
+                <div class="col-md-6">
+                    <dl>
+                        <dt>
+                            Direction:
+                        </dt>
+                        <dd>
+                           <div class="example-config">
+                                <label>
+                                    <input type="radio" name="direction" :value="'up'" 
+                                      :checked="direction === 'up'" @click="onChange"/>
+                                    &nbsp;Up
+                                </label>
+                                <br />
+                                <label>
+                                    <input type="radio" name="direction" :value="'down'" 
+                                        :checked="direction === 'down'" @click="onChange"/>
+                                    &nbsp;Down
+                                </label>
+                                <br />
+                                <label>
+                                    <input type="radio" name="direction" :value="'left'" 
+                                        :checked="direction === 'left'" @click="onChange"/>
+                                    &nbsp;Left
+                                </label>
+                                <br />
+                                <label>
+                                    <input type="radio" name="direction" :value="'right'" 
+                                     :checked="direction === 'right'" @click="onChange"/>
+                                    &nbsp;Right
+                                </label>
+                            </div>
+                        </dd>
+                    </dl>
+                </div>
+            </div>
+</template>
+<script>
+import './styles.css';
+import { Slide } from '@progress/kendo-vue-animation';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'Slide': Slide,
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+             show: false,
+            direction: 'down'
+        };
+    },
+    methods:{
+        onClick (e) {
+            this.show = !this.show;
+        },
+        onChange (e) {
+            this.direction = e.target.value;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/animation/api/slide-props/styles.css b/vue-options-api-demos/animation/api/slide-props/styles.css
new file mode 100644
index 00000000..2374dfbb
--- /dev/null
+++ b/vue-options-api-demos/animation/api/slide-props/styles.css
@@ -0,0 +1,11 @@
+.content {
+  width: 100px;
+  padding: 10px;
+  color: #787878;
+  background-color: #fcf7f8;
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+  border: 1px solid rgba(0,0,0,.05);
+ }
diff --git a/vue-options-api-demos/animation/api/zoom-props/main.js b/vue-options-api-demos/animation/api/zoom-props/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/animation/api/zoom-props/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/animation/api/zoom-props/main.vue b/vue-options-api-demos/animation/api/zoom-props/main.vue
new file mode 100644
index 00000000..6e26f686
--- /dev/null
+++ b/vue-options-api-demos/animation/api/zoom-props/main.vue
@@ -0,0 +1,65 @@
+<template>
+    <div class="row">
+                <div class="col-md-6">
+                    <dl>
+                        <dt>
+                            Zoom: {{direction}}
+                        </dt>
+                        <dd>
+                            <kbutton @click="onClick">Animate</kbutton>
+                        </dd>
+                    </dl>
+                  <Zoom :appear="index%2" :direction="direction" :stack-children="true">
+                       <div class="content" key='key'>{{index}}</div>
+                    </Zoom>
+                </div>
+                <div class="col-md-6">
+                    <dl>
+                        <dt>
+                            Direction:
+                        </dt>
+                        <dd>
+                           <div class="example-config">
+                                <label>
+                                    <input type="radio" name="direction" :value="'in'" 
+                                      :checked="direction === 'in'" @click="onChange"/>
+                                    &nbsp;In
+                                </label>
+                                <br />
+                                <label>
+                                    <input type="radio" name="direction" :value="'out'" 
+                                        :checked="direction === 'out'" @click="onChange"/>
+                                    &nbsp;Out
+                                </label>
+                            </div>
+                        </dd>
+                    </dl>
+                </div>
+            </div>
+</template>
+<script>
+import './styles.css';
+import { Zoom } from '@progress/kendo-vue-animation';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'Zoom': Zoom,
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+            index: 1,
+            direction: 'in'
+        };
+    },
+    methods:{
+        onClick (e) {
+            this.index = this.index + 1;
+        },
+        onChange (e) {
+            this.direction = e.target.value;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/animation/api/zoom-props/styles.css b/vue-options-api-demos/animation/api/zoom-props/styles.css
new file mode 100644
index 00000000..4816d5dd
--- /dev/null
+++ b/vue-options-api-demos/animation/api/zoom-props/styles.css
@@ -0,0 +1,11 @@
+.content {
+  width: 100px;
+  padding: 10px;
+  color: #787878;
+  background-color: #fcf7f8;
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+  border: 1px solid rgba(0,0,0,.05);
+}
diff --git a/vue-options-api-demos/animation/appearance/child/main.js b/vue-options-api-demos/animation/appearance/child/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/animation/appearance/child/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/animation/appearance/child/main.vue b/vue-options-api-demos/animation/appearance/child/main.vue
new file mode 100644
index 00000000..5045f95e
--- /dev/null
+++ b/vue-options-api-demos/animation/appearance/child/main.vue
@@ -0,0 +1,39 @@
+<template>
+    <div class="example">
+        <div>
+            <dl>
+                <dt>
+                    Slide:
+                </dt>
+                <dd>
+                     <kbutton @click="animate">Animate</kbutton>
+                </dd>
+            </dl>
+            <Slide :appear="show" :component-child-class-name="'child'">
+                <div class="content">CONTENT</div>
+            </Slide>
+        </div>
+    </div>
+</template>
+<script>
+import './styles.css';
+import { Slide } from '@progress/kendo-vue-animation';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'Slide': Slide,
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+             show: false
+        };
+    },
+    methods:{
+        animate(){
+             this.show = !this.show;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/animation/appearance/child/styles.css b/vue-options-api-demos/animation/appearance/child/styles.css
new file mode 100644
index 00000000..34b7de96
--- /dev/null
+++ b/vue-options-api-demos/animation/appearance/child/styles.css
@@ -0,0 +1,18 @@
+.child {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 5px
+}
+
+.content {
+width: 100px;
+padding: 10px;
+font-size: 13px;
+font-family: Helvetica, Arial, sans-serif;
+letter-spacing: 1px;
+text-align: center;
+border: 1px solid rgba(0,0,0,.05);
+}
+.example {
+display: flex;
+}
diff --git a/vue-options-api-demos/animation/appearance/default/main.js b/vue-options-api-demos/animation/appearance/default/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/animation/appearance/default/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/animation/appearance/default/main.vue b/vue-options-api-demos/animation/appearance/default/main.vue
new file mode 100644
index 00000000..4270003f
--- /dev/null
+++ b/vue-options-api-demos/animation/appearance/default/main.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="example">
+        <div>
+            <dl>
+                <dt>
+                    Slide:
+                </dt>
+                <dd>
+                     <kbutton @click="animate">Animate</kbutton>
+                </dd>
+            </dl>
+            <Slide :appear="show">
+                <div class="content">CONTENT</div>
+            </Slide>
+        </div>
+    </div>
+</template>
+<script>
+import './styles.css';
+import { Slide } from '@progress/kendo-vue-animation';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'Slide': Slide,
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+             show: false
+        };
+    },
+    methods:{
+        animate(){
+             this.show = !this.show;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/animation/appearance/default/styles.css b/vue-options-api-demos/animation/appearance/default/styles.css
new file mode 100644
index 00000000..507f7c84
--- /dev/null
+++ b/vue-options-api-demos/animation/appearance/default/styles.css
@@ -0,0 +1,19 @@
+.k-animation-container {
+  background-color: lightgray;
+}
+.k-animation-container > .k-child-animation-container {
+  color: lightgray;
+  background-color: #ff6757;
+}
+
+.content {
+  width: 100px;
+  padding: 10px;
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+}
+.example {
+  display: flex;
+}
diff --git a/vue-options-api-demos/animation/appearance/parent/main.js b/vue-options-api-demos/animation/appearance/parent/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/animation/appearance/parent/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/animation/appearance/parent/main.vue b/vue-options-api-demos/animation/appearance/parent/main.vue
new file mode 100644
index 00000000..440a0fe3
--- /dev/null
+++ b/vue-options-api-demos/animation/appearance/parent/main.vue
@@ -0,0 +1,55 @@
+<template>
+    <div class="example">
+      <div>
+        <dl>
+          <dt>Color:</dt>
+          <dd>
+            <dropdownlist
+              :style="{ width: '230px' }"
+              name="color"
+              v-model="color"
+              :data-items="colors"
+            >
+            </dropdownlist>
+          </dd>
+          <dt>Slide:</dt>
+          <dd>
+            <kbutton @click="animate">Animate</kbutton>
+          </dd>
+        </dl>
+        <Slide
+          :appear="show"
+          class="wrapper"
+          :style="{ color: color, border: `1px solid ${color}` }"
+        >
+          <div class="content">CONTENT</div>
+        </Slide>
+      </div>
+    </div>
+  </template>
+<script>
+import './styles.css';
+import { Slide } from '@progress/kendo-vue-animation';
+import { Button } from '@progress/kendo-vue-buttons';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+
+export default {
+    components: {
+        Slide: Slide,
+        kbutton: Button,
+        dropdownlist: DropDownList,
+    },
+    data: function () {
+        return {
+            show: false,
+            color: 'red',
+            colors: ['red', 'green', 'blue'],
+        };
+    },
+    methods: {
+        animate() {
+            this.show = !this.show;
+        },
+    },
+};
+</script>
diff --git a/vue-options-api-demos/animation/appearance/parent/styles.css b/vue-options-api-demos/animation/appearance/parent/styles.css
new file mode 100644
index 00000000..59da9d49
--- /dev/null
+++ b/vue-options-api-demos/animation/appearance/parent/styles.css
@@ -0,0 +1,19 @@
+.content {
+  width: 100px;
+  padding: 10px;
+  color: #787878;
+  background-color: #fcf7f8;
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+  border: 1px solid rgba(0,0,0,.05);
+}
+.example {
+  display: flex;
+}
+
+.wrapper {
+  border-color: transparent;
+  transition: border-color 1s ease-in-out;
+}
diff --git a/vue-options-api-demos/animation/configuration/main.js b/vue-options-api-demos/animation/configuration/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/animation/configuration/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/animation/configuration/main.vue b/vue-options-api-demos/animation/configuration/main.vue
new file mode 100644
index 00000000..adee4e72
--- /dev/null
+++ b/vue-options-api-demos/animation/configuration/main.vue
@@ -0,0 +1,39 @@
+<template>
+    <div class="example">
+        <div>
+            <dl>
+                <dt>
+                    Slide:
+                </dt>
+                <dd>
+                     <kbutton @click="animate">Animate</kbutton>
+                </dd>
+            </dl>
+            <Slide :appear="show">
+                <div class="content">CONTENT</div>
+            </Slide>
+        </div>
+    </div>
+</template>
+<script>
+import './styles.css';
+import { Slide } from '@progress/kendo-vue-animation';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'Slide': Slide,
+      'kbutton': Button
+    },
+     data: function () {
+        return {
+             show: true
+        };
+    },
+    methods:{
+        animate(){
+             this.show = !this.show;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/animation/configuration/styles.css b/vue-options-api-demos/animation/configuration/styles.css
new file mode 100644
index 00000000..4816d5dd
--- /dev/null
+++ b/vue-options-api-demos/animation/configuration/styles.css
@@ -0,0 +1,11 @@
+.content {
+  width: 100px;
+  padding: 10px;
+  color: #787878;
+  background-color: #fcf7f8;
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+  border: 1px solid rgba(0,0,0,.05);
+}
diff --git a/vue-options-api-demos/animation/direction/expand/main.js b/vue-options-api-demos/animation/direction/expand/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/animation/direction/expand/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/animation/direction/expand/main.vue b/vue-options-api-demos/animation/direction/expand/main.vue
new file mode 100644
index 00000000..3de72056
--- /dev/null
+++ b/vue-options-api-demos/animation/direction/expand/main.vue
@@ -0,0 +1,77 @@
+<template>
+    <div class="row">
+                <div class="col-md-6">
+                    <dl>
+                        <dt>
+                            Expand: {{direction}}
+                        </dt>
+                        <dd>
+                            <kbutton @click="onClick">Animate</kbutton>
+                        </dd>
+                    </dl>
+                  <Expand :appear="show" :direction="direction">
+                         <div class="content">
+                            Content
+                            </div >
+                    </Expand>
+                </div>
+                <div class="col-md-6">
+                    <dl>
+                        <dt>
+                            Direction:
+                        </dt>
+                        <dd>
+                            <div class="example-config">
+                                <label>
+                                    <input
+                                         type="radio"
+                                         name="direction"
+                                         :value="'vertical'"
+                                         :checked="direction === 'vertical'"
+                                         @click="onChange"
+                                     />
+                                    &nbsp;Vertical
+                                </label>
+                                <br />
+                                <label>
+                                    <input
+                                         type="radio"
+                                         name="direction"
+                                         :value="'horizontal'"
+                                         :checked="direction === 'horizontal'"
+                                         @click="onChange"
+                                     />
+                                    &nbsp;Horizontal
+                                </label>
+                            </div>
+                        </dd>
+                    </dl>
+                </div>
+            </div>
+</template>
+<script>
+import './styles.css';
+import { Expand } from '@progress/kendo-vue-animation';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'Expand': Expand,
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+             show: false,
+            direction: 'vertical'
+        };
+    },
+    methods:{
+        onClick (e) {
+            this.show = !this.show;
+        },
+        onChange (e) {
+            this.direction = e.target.value;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/animation/direction/expand/styles.css b/vue-options-api-demos/animation/direction/expand/styles.css
new file mode 100644
index 00000000..2374dfbb
--- /dev/null
+++ b/vue-options-api-demos/animation/direction/expand/styles.css
@@ -0,0 +1,11 @@
+.content {
+  width: 100px;
+  padding: 10px;
+  color: #787878;
+  background-color: #fcf7f8;
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+  border: 1px solid rgba(0,0,0,.05);
+ }
diff --git a/vue-options-api-demos/animation/direction/fade/main.js b/vue-options-api-demos/animation/direction/fade/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/animation/direction/fade/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/animation/direction/fade/main.vue b/vue-options-api-demos/animation/direction/fade/main.vue
new file mode 100644
index 00000000..6e042016
--- /dev/null
+++ b/vue-options-api-demos/animation/direction/fade/main.vue
@@ -0,0 +1,39 @@
+<template>
+    <div class="row">
+                <div class="col-md-6">
+                    <dl>
+                        <dt>
+                            Fade: {{direction}}
+                        </dt>
+                        <dd>
+                            <kbutton @click="onClick">Animate</kbutton>
+                        </dd>
+                    </dl>
+                  <Fade :appear="index%2" :direction="direction" :stack-children="true">
+                       <div class="content" key='key'>{{index}}</div>
+                    </Fade>
+                </div>
+            </div>
+</template>
+<script>
+import './styles.css';
+import { Fade } from '@progress/kendo-vue-animation';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'Fade': Fade,
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+            index: 1,
+        };
+    },
+    methods:{
+        onClick (e) {
+            this.index = this.index + 1;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/animation/direction/fade/styles.css b/vue-options-api-demos/animation/direction/fade/styles.css
new file mode 100644
index 00000000..2374dfbb
--- /dev/null
+++ b/vue-options-api-demos/animation/direction/fade/styles.css
@@ -0,0 +1,11 @@
+.content {
+  width: 100px;
+  padding: 10px;
+  color: #787878;
+  background-color: #fcf7f8;
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+  border: 1px solid rgba(0,0,0,.05);
+ }
diff --git a/vue-options-api-demos/animation/direction/push/main.js b/vue-options-api-demos/animation/direction/push/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/animation/direction/push/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/animation/direction/push/main.vue b/vue-options-api-demos/animation/direction/push/main.vue
new file mode 100644
index 00000000..70dba014
--- /dev/null
+++ b/vue-options-api-demos/animation/direction/push/main.vue
@@ -0,0 +1,77 @@
+<template>
+    <div class="row">
+                <div class="col-md-6">
+                    <dl>
+                        <dt>
+                            Push: {{direction}}
+                        </dt>
+                        <dd>
+                            <kbutton @click="onClick">Animate</kbutton>
+                        </dd>
+                    </dl>
+                  <Push :appear="index%2" :direction="direction" :stack-children="true">
+                       <div class="content" key='key'>{{index}}</div>
+                    </Push>
+                </div>
+                <div class="col-md-6">
+                    <dl>
+                        <dt>
+                            Direction:
+                        </dt>
+                        <dd>
+                           <div class="example-config">
+                                <label>
+                                    <input type="radio" name="direction" :value="'up'" 
+                                      :checked="direction === 'up'" @click="onChange"/>
+                                    &nbsp;Up
+                                </label>
+                                <br />
+                                <label>
+                                    <input type="radio" name="direction" :value="'down'" 
+                                        :checked="direction === 'down'" @click="onChange"/>
+                                    &nbsp;Down
+                                </label>
+                                <br />
+                                <label>
+                                    <input type="radio" name="direction" :value="'left'" 
+                                        :checked="direction === 'left'" @click="onChange"/>
+                                    &nbsp;Left
+                                </label>
+                                <br />
+                                <label>
+                                    <input type="radio" name="direction" :value="'right'" 
+                                     :checked="direction === 'right'" @click="onChange"/>
+                                    &nbsp;Right
+                                </label>
+                            </div>
+                        </dd>
+                    </dl>
+                </div>
+            </div>
+</template>
+<script>
+import './styles.css';
+import { Push } from '@progress/kendo-vue-animation';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'Push': Push,
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+            index: 1,
+            direction: 'down'
+        };
+    },
+    methods:{
+        onClick (e) {
+            this.index = this.index + 1;
+        },
+        onChange (e) {
+            this.direction = e.target.value;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/animation/direction/push/styles.css b/vue-options-api-demos/animation/direction/push/styles.css
new file mode 100644
index 00000000..4816d5dd
--- /dev/null
+++ b/vue-options-api-demos/animation/direction/push/styles.css
@@ -0,0 +1,11 @@
+.content {
+  width: 100px;
+  padding: 10px;
+  color: #787878;
+  background-color: #fcf7f8;
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+  border: 1px solid rgba(0,0,0,.05);
+}
diff --git a/vue-options-api-demos/animation/direction/reveal/main.js b/vue-options-api-demos/animation/direction/reveal/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/animation/direction/reveal/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/animation/direction/reveal/main.vue b/vue-options-api-demos/animation/direction/reveal/main.vue
new file mode 100644
index 00000000..cd993d0e
--- /dev/null
+++ b/vue-options-api-demos/animation/direction/reveal/main.vue
@@ -0,0 +1,77 @@
+<template>
+    <div class="row">
+                <div class="col-md-6">
+                    <dl>
+                        <dt>
+                            Reveal: {{direction}}
+                        </dt>
+                        <dd>
+                            <kbutton @click="onClick">Animate</kbutton>
+                        </dd>
+                    </dl>
+                  <Reveal :appear="show" :direction="direction">
+                         <div class="content">
+                            Content
+                            </div >
+                    </Reveal>
+                </div>
+                <div class="col-md-6">
+                    <dl>
+                        <dt>
+                            Direction:
+                        </dt>
+                        <dd>
+                            <div class="example-config">
+                                <label>
+                                    <input
+                                         type="radio"
+                                         name="direction"
+                                         :value="'vertical'"
+                                         :checked="direction === 'vertical'"
+                                         @click="onChange"
+                                     />
+                                    &nbsp;Vertical
+                                </label>
+                                <br />
+                                <label>
+                                    <input
+                                         type="radio"
+                                         name="direction"
+                                         :value="'horizontal'"
+                                         :checked="direction === 'horizontal'"
+                                         @click="onChange"
+                                     />
+                                    &nbsp;Horizontal
+                                </label>
+                            </div>
+                        </dd>
+                    </dl>
+                </div>
+            </div>
+</template>
+<script>
+import './styles.css';
+import { Reveal } from '@progress/kendo-vue-animation';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'Reveal': Reveal,
+        'kbutton': Button
+    },
+    data: function () {
+        return {
+            show: false,
+            direction: 'vertical'
+        };
+    },
+    methods:{
+        onClick (e) {
+            this.show = !this.show;
+        },
+        onChange (e) {
+            this.direction = e.target.value;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/animation/direction/reveal/styles.css b/vue-options-api-demos/animation/direction/reveal/styles.css
new file mode 100644
index 00000000..2374dfbb
--- /dev/null
+++ b/vue-options-api-demos/animation/direction/reveal/styles.css
@@ -0,0 +1,11 @@
+.content {
+  width: 100px;
+  padding: 10px;
+  color: #787878;
+  background-color: #fcf7f8;
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+  border: 1px solid rgba(0,0,0,.05);
+ }
diff --git a/vue-options-api-demos/animation/direction/slide/main.js b/vue-options-api-demos/animation/direction/slide/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/animation/direction/slide/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/animation/direction/slide/main.vue b/vue-options-api-demos/animation/direction/slide/main.vue
new file mode 100644
index 00000000..9cd2cf16
--- /dev/null
+++ b/vue-options-api-demos/animation/direction/slide/main.vue
@@ -0,0 +1,79 @@
+<template>
+    <div class="row">
+                <div class="col-md-6">
+                    <dl>
+                        <dt>
+                            Slide: {{direction}}
+                        </dt>
+                        <dd>
+                            <kbutton @click="onClick">Animate</kbutton>
+                        </dd>
+                    </dl>
+                  <Slide :appear="show" :direction="direction">
+                         <div class="content">
+                            Content
+                            </div >
+                    </Slide>
+                </div>
+                <div class="col-md-6">
+                    <dl>
+                        <dt>
+                            Direction:
+                        </dt>
+                        <dd>
+                           <div class="example-config">
+                                <label>
+                                    <input type="radio" name="direction" :value="'up'" 
+                                      :checked="direction === 'up'" @click="onChange"/>
+                                    &nbsp;Up
+                                </label>
+                                <br />
+                                <label>
+                                    <input type="radio" name="direction" :value="'down'" 
+                                        :checked="direction === 'down'" @click="onChange"/>
+                                    &nbsp;Down
+                                </label>
+                                <br />
+                                <label>
+                                    <input type="radio" name="direction" :value="'left'" 
+                                        :checked="direction === 'left'" @click="onChange"/>
+                                    &nbsp;Left
+                                </label>
+                                <br />
+                                <label>
+                                    <input type="radio" name="direction" :value="'right'" 
+                                     :checked="direction === 'right'" @click="onChange"/>
+                                    &nbsp;Right
+                                </label>
+                            </div>
+                        </dd>
+                    </dl>
+                </div>
+            </div>
+</template>
+<script>
+import './styles.css';
+import { Slide } from '@progress/kendo-vue-animation';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'Slide': Slide,
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+             show: false,
+            direction: 'down'
+        };
+    },
+    methods:{
+        onClick (e) {
+            this.show = !this.show;
+        },
+        onChange (e) {
+            this.direction = e.target.value;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/animation/direction/slide/styles.css b/vue-options-api-demos/animation/direction/slide/styles.css
new file mode 100644
index 00000000..2374dfbb
--- /dev/null
+++ b/vue-options-api-demos/animation/direction/slide/styles.css
@@ -0,0 +1,11 @@
+.content {
+  width: 100px;
+  padding: 10px;
+  color: #787878;
+  background-color: #fcf7f8;
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+  border: 1px solid rgba(0,0,0,.05);
+ }
diff --git a/vue-options-api-demos/animation/direction/zoom/main.js b/vue-options-api-demos/animation/direction/zoom/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/animation/direction/zoom/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/animation/direction/zoom/main.vue b/vue-options-api-demos/animation/direction/zoom/main.vue
new file mode 100644
index 00000000..6e26f686
--- /dev/null
+++ b/vue-options-api-demos/animation/direction/zoom/main.vue
@@ -0,0 +1,65 @@
+<template>
+    <div class="row">
+                <div class="col-md-6">
+                    <dl>
+                        <dt>
+                            Zoom: {{direction}}
+                        </dt>
+                        <dd>
+                            <kbutton @click="onClick">Animate</kbutton>
+                        </dd>
+                    </dl>
+                  <Zoom :appear="index%2" :direction="direction" :stack-children="true">
+                       <div class="content" key='key'>{{index}}</div>
+                    </Zoom>
+                </div>
+                <div class="col-md-6">
+                    <dl>
+                        <dt>
+                            Direction:
+                        </dt>
+                        <dd>
+                           <div class="example-config">
+                                <label>
+                                    <input type="radio" name="direction" :value="'in'" 
+                                      :checked="direction === 'in'" @click="onChange"/>
+                                    &nbsp;In
+                                </label>
+                                <br />
+                                <label>
+                                    <input type="radio" name="direction" :value="'out'" 
+                                        :checked="direction === 'out'" @click="onChange"/>
+                                    &nbsp;Out
+                                </label>
+                            </div>
+                        </dd>
+                    </dl>
+                </div>
+            </div>
+</template>
+<script>
+import './styles.css';
+import { Zoom } from '@progress/kendo-vue-animation';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'Zoom': Zoom,
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+            index: 1,
+            direction: 'in'
+        };
+    },
+    methods:{
+        onClick (e) {
+            this.index = this.index + 1;
+        },
+        onChange (e) {
+            this.direction = e.target.value;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/animation/direction/zoom/styles.css b/vue-options-api-demos/animation/direction/zoom/styles.css
new file mode 100644
index 00000000..4816d5dd
--- /dev/null
+++ b/vue-options-api-demos/animation/direction/zoom/styles.css
@@ -0,0 +1,11 @@
+.content {
+  width: 100px;
+  padding: 10px;
+  color: #787878;
+  background-color: #fcf7f8;
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+  border: 1px solid rgba(0,0,0,.05);
+}
diff --git a/vue-options-api-demos/animation/disabled/main.js b/vue-options-api-demos/animation/disabled/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/animation/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/animation/disabled/main.vue b/vue-options-api-demos/animation/disabled/main.vue
new file mode 100644
index 00000000..1962ee12
--- /dev/null
+++ b/vue-options-api-demos/animation/disabled/main.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="example">
+    <div>
+        <dl>
+            <dt>
+                <dl>
+                    <input
+                    type="checkbox"
+                    id="enter"
+                    class="k-checkbox k-checkbox-md k-rounded-md"
+                    name="animation"
+                    v-model="animation"
+                    />
+                    <label for="animation" class="k-checkbox-label">
+                    Animation&nbsp;
+                    </label>
+                </dl>
+            </dt>
+            <dt>
+                Slide:
+            </dt>
+            <dd>
+                    <kbutton @click="animate">Animate</kbutton>
+            </dd>
+        </dl>
+             <Slide :appear="show" :enter="animation" :exit="animation">
+                         <div class="content">
+                            CONTENT
+                            </div >
+                    </Slide>
+        </div>
+    </div>
+</template>
+<script>
+import './styles.css';
+import { Slide } from '@progress/kendo-vue-animation';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'Slide': Slide,
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+            show: false,
+            animation: true
+        };
+    },
+    methods:{
+        animate(){
+             this.show = !this.show;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/animation/disabled/styles.css b/vue-options-api-demos/animation/disabled/styles.css
new file mode 100644
index 00000000..4816d5dd
--- /dev/null
+++ b/vue-options-api-demos/animation/disabled/styles.css
@@ -0,0 +1,11 @@
+.content {
+  width: 100px;
+  padding: 10px;
+  color: #787878;
+  background-color: #fcf7f8;
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+  border: 1px solid rgba(0,0,0,.05);
+}
diff --git a/vue-options-api-demos/animation/duration/main.js b/vue-options-api-demos/animation/duration/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/animation/duration/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/animation/duration/main.vue b/vue-options-api-demos/animation/duration/main.vue
new file mode 100644
index 00000000..516f7e2d
--- /dev/null
+++ b/vue-options-api-demos/animation/duration/main.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="example">
+        <div>
+            <dl>
+                <dt>
+                    Slide:
+                </dt>
+                <dd>
+                     <kbutton @click="animate">Animate</kbutton>
+                </dd>
+            </dl>
+             <Slide 
+              :appear="show"
+              :transition-enter-duration="800"
+              :transition-exit-duration="1000">
+                         <div class="content">
+                            CONTENT
+                            </div >
+                    </Slide>
+        </div>
+    </div>
+</template>
+<script>
+import './styles.css';
+import { Slide } from '@progress/kendo-vue-animation';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'Slide': Slide,
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+             show: false
+        };
+    },
+    methods:{
+        animate(){
+             this.show = !this.show;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/animation/duration/styles.css b/vue-options-api-demos/animation/duration/styles.css
new file mode 100644
index 00000000..4816d5dd
--- /dev/null
+++ b/vue-options-api-demos/animation/duration/styles.css
@@ -0,0 +1,11 @@
+.content {
+  width: 100px;
+  padding: 10px;
+  color: #787878;
+  background-color: #fcf7f8;
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+  border: 1px solid rgba(0,0,0,.05);
+}
diff --git a/vue-options-api-demos/animation/overview/main.js b/vue-options-api-demos/animation/overview/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/animation/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/animation/overview/main.vue b/vue-options-api-demos/animation/overview/main.vue
new file mode 100644
index 00000000..6f12d83b
--- /dev/null
+++ b/vue-options-api-demos/animation/overview/main.vue
@@ -0,0 +1,103 @@
+<template>
+    <div class="example-wrapper row">
+        <div class="col-xs-12 col-sm-6 example-config">
+            <input @click="handleSelect" id="slide" class="k-radio k-radio-md" name="type" type="radio" value="slide"
+                :checked="true" />
+            <label for="slide" class="k-radio-label">
+                &nbsp;Slide
+            </label>
+            <br />
+            <input @click="handleSelect" name="type" id="push" class="k-radio k-radio-md" type="radio" value="push" />
+            <label for="push" class="k-radio-label">
+                &nbsp;Push
+            </label>
+            <br />
+            <input @click="handleSelect" name="type" id="expand" class="k-radio k-radio-md" type="radio"
+                value="expand" />
+            <label for="expand" class="k-radio-label">
+                &nbsp;Expand
+            </label>
+            <br />
+            <input @click="handleSelect" name="type" id="fade" class="k-radio k-radio-md" type="radio" value="fade" />
+            <label for="fade" class="k-radio-label">
+                &nbsp;Fade
+            </label>
+            <br />
+            <input @click="handleSelect" name="type" id="zoom" class="k-radio k-radio-md" type="radio" value="zoom" />
+            <label for="zoom" class="k-radio-label">
+                &nbsp;Zoom
+            </label>
+            <br />
+            <input @click="handleSelect" name="type" id="reveal" class="k-radio k-radio-md" type="radio"
+                value="reveal" />
+            <label for="reveal" class="k-radio-label">
+                &nbsp;Reveal
+            </label>
+            <br />
+            <kbutton type="submit" @click="animate">Animate</kbutton>
+        </div>
+        <div class="col-xs-12 col-sm-6 example-col">
+            <Expand :appear="show" v-if="animationType === 'expand'">
+                <div class="content">
+                    Content
+                </div>
+            </Expand>
+            <Fade :appear="show" v-else-if="animationType === 'fade'">
+                <div class="content">
+                    Content
+                </div>
+            </Fade>
+            <Push :appear="show" v-else-if="animationType === 'push'">
+                <div class="content">
+                    Content
+                </div>
+            </Push>
+            <Reveal :appear="show" v-else-if="animationType === 'reveal'">
+                <div class="content">
+                    Content
+                </div>
+            </Reveal>
+            <Zoom :appear="show" v-else-if="animationType === 'zoom'">
+                <div class="content">
+                    Content
+                </div>
+            </Zoom>
+            <Slide :appear="show" v-else-if="animationType === 'slide'">
+                <div class="content">
+                    Content
+                </div>
+            </Slide>
+        </div>
+    </div>
+</template>
+<script>
+import './styles.css';
+import { Expand, Fade, Push, Reveal, Slide, Zoom } from '@progress/kendo-vue-animation';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'Expand': Expand,
+        'Fade': Fade,
+        'Push': Push,
+        'Reveal': Reveal,
+        'Zoom': Zoom,
+        'Slide': Slide,
+        'kbutton': Button
+    },
+    data: function () {
+        return {
+            animationType: 'slide',
+            show: false
+        };
+    },
+    methods: {
+        animate() {
+            this.show = !this.show;
+        },
+        handleSelect(event) {
+            this.animationType = event.target.value;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/animation/overview/styles.css b/vue-options-api-demos/animation/overview/styles.css
new file mode 100644
index 00000000..d1458056
--- /dev/null
+++ b/vue-options-api-demos/animation/overview/styles.css
@@ -0,0 +1,15 @@
+.content {
+  width: 100px;
+  padding: 10px;
+  color: #787878;
+  background-color: #fcf7f8;
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+  border: 1px solid rgba(0,0,0,.05);
+}
+.k-radio-label {
+    line-height: 1.2;
+    margin-bottom: .5rem;
+}
diff --git a/vue-options-api-demos/animation/types/expand/main.js b/vue-options-api-demos/animation/types/expand/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/animation/types/expand/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/animation/types/expand/main.vue b/vue-options-api-demos/animation/types/expand/main.vue
new file mode 100644
index 00000000..95ed4173
--- /dev/null
+++ b/vue-options-api-demos/animation/types/expand/main.vue
@@ -0,0 +1,38 @@
+<template>
+    <div class="row">
+                <div class="col-md-6">
+                    <dl>
+                        <dd>
+                            <kbutton @click="onClick">Animate</kbutton>
+                        </dd>
+                    </dl>
+                  <Expand :appear="show" >
+                         <div class="content">
+                            CONTENT
+                            </div >
+                    </Expand>
+                </div>
+            </div>
+</template>
+<script>
+import './styles.css';
+import { Expand } from '@progress/kendo-vue-animation';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'Expand': Expand,
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+             show: false
+        };
+    },
+    methods:{
+        onClick (e) {
+            this.show = !this.show;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/animation/types/expand/styles.css b/vue-options-api-demos/animation/types/expand/styles.css
new file mode 100644
index 00000000..2374dfbb
--- /dev/null
+++ b/vue-options-api-demos/animation/types/expand/styles.css
@@ -0,0 +1,11 @@
+.content {
+  width: 100px;
+  padding: 10px;
+  color: #787878;
+  background-color: #fcf7f8;
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+  border: 1px solid rgba(0,0,0,.05);
+ }
diff --git a/vue-options-api-demos/animation/types/fade/main.js b/vue-options-api-demos/animation/types/fade/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/animation/types/fade/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/animation/types/fade/main.vue b/vue-options-api-demos/animation/types/fade/main.vue
new file mode 100644
index 00000000..b4f0e782
--- /dev/null
+++ b/vue-options-api-demos/animation/types/fade/main.vue
@@ -0,0 +1,36 @@
+<template>
+    <div class="row">
+                <div class="col-md-6">
+                    <dl>
+                        <dd>
+                            <kbutton @click="onClick">Animate</kbutton>
+                        </dd>
+                    </dl>
+                  <Fade :appear="show" >
+                       <div class="content" >CONTENT</div>
+                    </Fade>
+                </div>
+            </div>
+</template>
+<script>
+import './styles.css';
+import { Fade } from '@progress/kendo-vue-animation';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'Fade': Fade,
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+            show: false,
+        };
+    },
+    methods:{
+        onClick (e) {
+            this.show = !this.show;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/animation/types/fade/styles.css b/vue-options-api-demos/animation/types/fade/styles.css
new file mode 100644
index 00000000..2374dfbb
--- /dev/null
+++ b/vue-options-api-demos/animation/types/fade/styles.css
@@ -0,0 +1,11 @@
+.content {
+  width: 100px;
+  padding: 10px;
+  color: #787878;
+  background-color: #fcf7f8;
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+  border: 1px solid rgba(0,0,0,.05);
+ }
diff --git a/vue-options-api-demos/animation/types/push/main.js b/vue-options-api-demos/animation/types/push/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/animation/types/push/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/animation/types/push/main.vue b/vue-options-api-demos/animation/types/push/main.vue
new file mode 100644
index 00000000..97237540
--- /dev/null
+++ b/vue-options-api-demos/animation/types/push/main.vue
@@ -0,0 +1,36 @@
+<template>
+    <div class="row">
+                <div class="col-md-6">
+                    <dl>
+                        <dd>
+                            <kbutton @click="onClick">Animate</kbutton>
+                        </dd>
+                    </dl>
+                  <Push :appear="show">
+                       <div class="content" >CONTENT</div>
+                    </Push>
+                </div>
+            </div>
+</template>
+<script>
+import './styles.css';
+import { Push } from '@progress/kendo-vue-animation';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'Push': Push,
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+            show: false
+        };
+    },
+    methods:{
+        onClick (e) {
+            this.show = !this.show;
+        },
+    }
+}
+</script>
diff --git a/vue-options-api-demos/animation/types/push/styles.css b/vue-options-api-demos/animation/types/push/styles.css
new file mode 100644
index 00000000..4816d5dd
--- /dev/null
+++ b/vue-options-api-demos/animation/types/push/styles.css
@@ -0,0 +1,11 @@
+.content {
+  width: 100px;
+  padding: 10px;
+  color: #787878;
+  background-color: #fcf7f8;
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+  border: 1px solid rgba(0,0,0,.05);
+}
diff --git a/vue-options-api-demos/animation/types/reveal/main.js b/vue-options-api-demos/animation/types/reveal/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/animation/types/reveal/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/animation/types/reveal/main.vue b/vue-options-api-demos/animation/types/reveal/main.vue
new file mode 100644
index 00000000..e820a502
--- /dev/null
+++ b/vue-options-api-demos/animation/types/reveal/main.vue
@@ -0,0 +1,38 @@
+<template>
+    <div class="row">
+                <div class="col-md-6">
+                    <dl>
+                        <dd>
+                            <kbutton @click="onClick">Animate</kbutton>
+                        </dd>
+                    </dl>
+                  <Reveal :appear="show" >
+                         <div class="content">
+                            CONTENT
+                            </div >
+                    </Reveal>
+                </div>
+            </div>
+</template>
+<script>
+import './styles.css';
+import { Reveal } from '@progress/kendo-vue-animation';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'Reveal': Reveal,
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+             show: false
+        };
+    },
+    methods:{
+        onClick (e) {
+            this.show = !this.show;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/animation/types/reveal/styles.css b/vue-options-api-demos/animation/types/reveal/styles.css
new file mode 100644
index 00000000..2374dfbb
--- /dev/null
+++ b/vue-options-api-demos/animation/types/reveal/styles.css
@@ -0,0 +1,11 @@
+.content {
+  width: 100px;
+  padding: 10px;
+  color: #787878;
+  background-color: #fcf7f8;
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+  border: 1px solid rgba(0,0,0,.05);
+ }
diff --git a/vue-options-api-demos/animation/types/slide/main.js b/vue-options-api-demos/animation/types/slide/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/animation/types/slide/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/animation/types/slide/main.vue b/vue-options-api-demos/animation/types/slide/main.vue
new file mode 100644
index 00000000..50d222bd
--- /dev/null
+++ b/vue-options-api-demos/animation/types/slide/main.vue
@@ -0,0 +1,38 @@
+<template>
+    <div class="row">
+                <div class="col-md-6">
+                    <dl>
+                        <dd>
+                            <kbutton @click="onClick">Animate</kbutton>
+                        </dd>
+                    </dl>
+                  <Slide :appear="show">
+                         <div class="content">
+                            CONTENT
+                            </div >
+                    </Slide>
+                </div>
+            </div>
+</template>
+<script>
+import './styles.css';
+import { Slide } from '@progress/kendo-vue-animation';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'Slide': Slide,
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+             show: false
+        };
+    },
+    methods:{
+        onClick (e) {
+            this.show = !this.show;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/animation/types/slide/styles.css b/vue-options-api-demos/animation/types/slide/styles.css
new file mode 100644
index 00000000..2374dfbb
--- /dev/null
+++ b/vue-options-api-demos/animation/types/slide/styles.css
@@ -0,0 +1,11 @@
+.content {
+  width: 100px;
+  padding: 10px;
+  color: #787878;
+  background-color: #fcf7f8;
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+  border: 1px solid rgba(0,0,0,.05);
+ }
diff --git a/vue-options-api-demos/animation/types/zoom/main.js b/vue-options-api-demos/animation/types/zoom/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/animation/types/zoom/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/animation/types/zoom/main.vue b/vue-options-api-demos/animation/types/zoom/main.vue
new file mode 100644
index 00000000..4b03477e
--- /dev/null
+++ b/vue-options-api-demos/animation/types/zoom/main.vue
@@ -0,0 +1,36 @@
+<template>
+    <div class="row">
+                <div class="col-md-6">
+                    <dl>
+                        <dd>
+                            <kbutton @click="onClick">Animate</kbutton>
+                        </dd>
+                    </dl>
+                  <Zoom :appear="show">
+                       <div class="content" >CONTENT</div>
+                    </Zoom>
+                </div>
+            </div>
+</template>
+<script>
+import './styles.css';
+import { Zoom } from '@progress/kendo-vue-animation';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'Zoom': Zoom,
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+            show: false
+        };
+    },
+    methods:{
+        onClick (e) {
+            this.show = !this.show;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/animation/types/zoom/styles.css b/vue-options-api-demos/animation/types/zoom/styles.css
new file mode 100644
index 00000000..4816d5dd
--- /dev/null
+++ b/vue-options-api-demos/animation/types/zoom/styles.css
@@ -0,0 +1,11 @@
+.content {
+  width: 100px;
+  padding: 10px;
+  color: #787878;
+  background-color: #fcf7f8;
+  font-size: 13px;
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+  border: 1px solid rgba(0,0,0,.05);
+}
diff --git a/vue-options-api-demos/buttons/button/appearance/configurator/ButtonStyleConfigurator.vue b/vue-options-api-demos/buttons/button/appearance/configurator/ButtonStyleConfigurator.vue
new file mode 100644
index 00000000..c16a6018
--- /dev/null
+++ b/vue-options-api-demos/buttons/button/appearance/configurator/ButtonStyleConfigurator.vue
@@ -0,0 +1,189 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span v-if="shape !== undefined" class="k-form-field">
+        <k-label>
+          Shape
+          <div class="k-form-field-wrap">
+            <ButtonGroup>
+              <kbutton
+                v-for="(shapeElelement, index) in shapes"
+                :key="index"
+                :togglable="true"
+                :selected="shapeElelement === shape"
+                @click="handleShapeChange(shapeElelement)"
+              >
+                {{ shapeElelement || 'None' }}
+              </kbutton>
+            </ButtonGroup>
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+            <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Theme Color
+          <div class="k-form-field-wrap">
+            <dropdownlist
+              :data-items="themeColors"
+              :value="themeColor"
+              :item-render="'colorItemRender'"
+              :style="{
+                'min-width': '150px',
+              }"
+              @change="handleThemeColorChange"
+            >
+              <template v-slot:colorItemRender="{ props }">
+                <li
+                  :class="props.itemClass"
+                  @click="(ev) => props.onClick(ev)"
+                  :style="{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                  }"
+                >
+                  {{ props.dataItem }}{{ ' ' }}
+                  <span
+                    :style="{
+                      width: '16px',
+                      height: '16px',
+                      background: 'currentColor',
+                      display: 'inline-block',
+                    }"
+                    :class="['k-color-' + props.dataItem]"
+                  ></span>
+                </li>
+              </template>
+            </dropdownlist>
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Fill Mode
+          <div class="k-form-field-wrap">
+            <dropdownlist
+              :data-items="fillModes"
+              :value="fillMode"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleFillModeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+            <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from '@progress/kendo-vue-labels';
+import { ButtonGroup, Button } from '@progress/kendo-vue-buttons';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  components: {
+    'k-label': Label,
+    kbutton: Button,
+    ButtonGroup,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    shape: String,
+    size: String,
+    themeColor: String,
+    fillMode: String,
+    rounded: String,
+  },
+  emits: [
+    'shapechange',
+    'sizechange',
+    'themecolorchange',
+    'fillmodechange',
+    'roundedchange',
+  ],
+  data() {
+    return {
+      shapes: ['rectangle', 'square'],
+      sizes: ['small', 'medium', 'large'],
+      themeColors: [
+        'base',
+        'primary',
+        'secondary',
+        'tertiary',
+        'info',
+        'success',
+        'warning',
+        'error',
+        'dark',
+        'light',
+        'inverse',
+      ],
+      fillModes: ['solid', 'outline', 'flat', 'link', 'null'],
+      roundedOptions: ['small', 'medium', 'large', 'full'],
+    };
+  },
+  methods: {
+    handleShapeChange(shape) {
+      this.$emit('shapechange', shape);
+    },
+    handleSizeChange(event) {
+      this.$emit('sizechange', event);
+    },
+    handleThemeColorChange(event) {
+      this.$emit('themecolorchange', event);
+    },
+    handleFillModeChange(event) {
+      this.$emit('fillmodechange', event);
+    },
+    handleRoundedChange(event) {
+      this.$emit('roundedchange', event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/button/appearance/configurator/main.js b/vue-options-api-demos/buttons/button/appearance/configurator/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/button/appearance/configurator/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/button/appearance/configurator/main.vue b/vue-options-api-demos/buttons/button/appearance/configurator/main.vue
new file mode 100644
index 00000000..d23d9c6c
--- /dev/null
+++ b/vue-options-api-demos/buttons/button/appearance/configurator/main.vue
@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <ButtonStyleConfigurator
+      :shape="shape"
+      @shapechange="setShape"
+      :size="size"
+      @sizechange="setSize"
+      :theme-color="themeColor"
+      @themecolorchange="setThemeColor"
+      :fill-mode="fillMode"
+      @fillmodechange="setFillMode"
+      :rounded="rounded"
+      @roundedchange="setRounded"
+    />
+    <KButton
+      :shape="shape"
+      :size="size"
+      :theme-color="themeColor"
+      :fill-mode="fillMode"
+      :rounded="rounded"
+    >
+      Button
+    </KButton>
+  </div>
+</template>
+
+<script>
+import { Button } from '@progress/kendo-vue-buttons';
+import ButtonStyleConfigurator from './ButtonStyleConfigurator.vue';
+
+export default {
+  components: {
+    ButtonStyleConfigurator,
+    KButton: Button,
+  },
+  data() {
+    return {
+      shape: 'rectangle',
+      size: 'medium',
+      themeColor: 'base',
+      fillMode: 'solid',
+      rounded: 'medium',
+    };
+  },
+  methods: {
+    setShape(shape) {
+      this.shape = shape;
+    },
+    setSize(event) {
+      this.size = event.value;
+    },
+    setThemeColor(event) {
+      this.themeColor = event.value;
+    },
+    setFillMode(event) {
+      this.fillMode = event.value;
+    },
+    setRounded(event) {
+      this.rounded = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/button/appearance/fill-mode/main.js b/vue-options-api-demos/buttons/button/appearance/fill-mode/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/button/appearance/fill-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/button/appearance/fill-mode/main.vue b/vue-options-api-demos/buttons/button/appearance/fill-mode/main.vue
new file mode 100644
index 00000000..2613a481
--- /dev/null
+++ b/vue-options-api-demos/buttons/button/appearance/fill-mode/main.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <span class="wrapper">
+      <kbutton :fill-mode="'solid'">Solid</kbutton>
+    </span>
+    <span class="wrapper">
+      <kbutton :fill-mode="'flat'">Flat</kbutton>
+    </span>
+    <span class="wrapper">
+      <kbutton :fill-mode="'outline'">Outline</kbutton>
+    </span>
+    <span class="wrapper">
+      <kbutton :fill-mode="'clear'">Clear</kbutton>
+    </span>
+    <span class="wrapper">
+      <kbutton :fill-mode="'link'">Link</kbutton>
+    </span>
+  </div>
+</template>
+
+<script>
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    kbutton: Button,
+  },
+};
+</script>
+<style>
+.wrapper {
+  padding: 20px;
+}
+</style>
diff --git a/vue-options-api-demos/buttons/button/appearance/rounded/main.js b/vue-options-api-demos/buttons/button/appearance/rounded/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/button/appearance/rounded/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/button/appearance/rounded/main.vue b/vue-options-api-demos/buttons/button/appearance/rounded/main.vue
new file mode 100644
index 00000000..af8173de
--- /dev/null
+++ b/vue-options-api-demos/buttons/button/appearance/rounded/main.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <span class="wrapper">
+      <kbutton>No roundness</kbutton>
+    </span>
+    <span class="wrapper">
+      <kbutton :rounded="'small'">Small roundness</kbutton>
+    </span>
+    <span class="wrapper">
+      <kbutton :rounded="'medium'">Medium roundness</kbutton>
+    </span>
+    <br />
+    <br />
+    <span class="wrapper">
+      <kbutton :rounded="'large'">Large roundness</kbutton>
+    </span>
+    <span class="wrapper">
+      <kbutton :rounded="'full'">Full roundness</kbutton>
+    </span>
+    <span class="wrapper">
+      <kbutton :size="null" :class="'custom-roundness'">Custom roundness</kbutton>
+    </span>
+  </div>
+</template>
+
+<script>
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    kbutton: Button,
+  }
+};
+</script>
+<style>
+.custom-roundness.k-button {
+  border-top-right-radius: 15px;
+  border-top-left-radius: 15px;
+}
+
+.wrapper {
+  padding: 20px;
+}
+</style>
diff --git a/vue-options-api-demos/buttons/button/appearance/shape/main.js b/vue-options-api-demos/buttons/button/appearance/shape/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/button/appearance/shape/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/button/appearance/shape/main.vue b/vue-options-api-demos/buttons/button/appearance/shape/main.vue
new file mode 100644
index 00000000..9629f9f2
--- /dev/null
+++ b/vue-options-api-demos/buttons/button/appearance/shape/main.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <span class="wrapper">
+      <kbutton :shape="'rectangle'">Rectangle shape</kbutton>
+    </span>
+    <span class="wrapper">
+      <kbutton :shape="'square'">Square shape</kbutton>
+    </span>
+  </div>
+</template>
+
+<script>
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    kbutton: Button,
+  },
+};
+</script>
+<style>
+.wrapper {
+  padding: 20px;
+}
+</style>
diff --git a/vue-options-api-demos/buttons/button/appearance/size/main.js b/vue-options-api-demos/buttons/button/appearance/size/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/button/appearance/size/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/button/appearance/size/main.vue b/vue-options-api-demos/buttons/button/appearance/size/main.vue
new file mode 100644
index 00000000..8283ceba
--- /dev/null
+++ b/vue-options-api-demos/buttons/button/appearance/size/main.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <span class="wrapper">
+      <kbutton :size="'small'">Small Size</kbutton>
+    </span>
+    <span class="wrapper">
+      <kbutton :size="'medium'">Medium Size</kbutton>
+    </span>
+    <span class="wrapper">
+      <kbutton :size="'large'">Large Size</kbutton>
+    </span>
+    <span class="wrapper">
+      <kbutton :size="null" :class="'custom-size'">Custom Size</kbutton>
+    </span>
+  </div>
+</template>
+
+<script>
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    kbutton: Button,
+  }
+};
+</script>
+<style>
+.custom-size.k-button {
+  padding: 20px 20px;
+}
+.wrapper {
+  padding: 20px;
+}
+</style>
diff --git a/vue-options-api-demos/buttons/button/appearance/theme-colors/main.js b/vue-options-api-demos/buttons/button/appearance/theme-colors/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/button/appearance/theme-colors/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/button/appearance/theme-colors/main.vue b/vue-options-api-demos/buttons/button/appearance/theme-colors/main.vue
new file mode 100644
index 00000000..1c0a4400
--- /dev/null
+++ b/vue-options-api-demos/buttons/button/appearance/theme-colors/main.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <span class="wrapper">
+      <kbutton :theme-color="'base'">base</kbutton>
+    </span>
+    <span class="wrapper">
+      <kbutton :theme-color="'primary'">primary</kbutton>
+    </span>
+    <span class="wrapper">
+      <kbutton :theme-color="'secondary'">secondary</kbutton>
+    </span>
+    <span class="wrapper">
+      <kbutton :theme-color="'tertiary'">tertiary</kbutton>
+    </span>
+    <br />
+    <br />
+    <span class="wrapper">
+      <kbutton :theme-color="'info'">info</kbutton>
+    </span>
+    <span class="wrapper">
+      <kbutton :theme-color="'success'">success</kbutton>
+    </span>
+    <span class="wrapper">
+      <kbutton :theme-color="'warning'">warning</kbutton>
+    </span>
+    <span class="wrapper">
+      <kbutton :theme-color="'error'">error</kbutton>
+    </span>
+    <br />
+    <br />
+    <span class="wrapper">
+      <kbutton :theme-color="'dark'">dark</kbutton>
+    </span>
+    <span class="wrapper">
+      <kbutton :theme-color="'light'">light</kbutton>
+    </span>
+    <span class="wrapper">
+      <kbutton :theme-color="'inverse'">inverse</kbutton>
+    </span>
+    <span class="wrapper">
+      <kbutton :theme-color="null" :class="'custom-color'">custom</kbutton>
+    </span>
+  </div>
+</template>
+
+<script>
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    kbutton: Button,
+  }
+};
+</script>
+<style>
+.wrapper {
+  padding: 20px;
+}
+
+.custom-color {
+  background-color: green;
+  color: orange;
+}
+</style>
diff --git a/vue-options-api-demos/buttons/button/basic/main.js b/vue-options-api-demos/buttons/button/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/button/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/button/basic/main.vue b/vue-options-api-demos/buttons/button/basic/main.vue
new file mode 100644
index 00000000..19f143b9
--- /dev/null
+++ b/vue-options-api-demos/buttons/button/basic/main.vue
@@ -0,0 +1,195 @@
+<template>
+  <div class="row example-wrapper">
+    <div class="col-xs-12 col-sm-6 example-col">
+      <p>Default k-buttons</p>
+      <p>
+        <KButton>Browse</KButton>
+        <KButton :svg-icon="folderIcon">Browse</KButton>
+        <KButton :svg-icon="folderIcon"></KButton>
+      </p>
+      <p>
+        <KButton :disabled="true">Browse</KButton>
+        <KButton :svg-icon="folderIcon" :disabled="true">Browse</KButton>
+        <KButton :svg-icon="folderIcon" :disabled="true"></KButton>
+      </p>
+    </div>
+
+    <div class="col-xs-12 col-sm-6 example-col">
+      <p>Default k-buttons (Primary)</p>
+      <p>
+        <KButton :theme-color="'primary'">Browse</KButton>
+        <KButton :svg-icon="folderIcon" :theme-color="'primary'"
+          >Browse</KButton
+        >
+        <KButton :svg-icon="folderIcon" :theme-color="'primary'"></KButton>
+      </p>
+      <p>
+        <KButton :theme-color="'primary'" :disabled="true">Browse</KButton>
+        <KButton
+          :svg-icon="folderIcon"
+          :theme-color="'primary'"
+          :disabled="true"
+          >Browse</KButton
+        >
+        <KButton
+          :svg-icon="folderIcon"
+          :theme-color="'primary'"
+          :disabled="true"
+        ></KButton>
+      </p>
+    </div>
+
+    <div class="col-xs-12 col-sm-6 example-col">
+      <p>Flat k-buttons</p>
+      <p>
+        <KButton :fill-mode="'flat'">Browse</KButton>
+        <KButton :svg-icon="folderIcon" :fill-mode="'flat'">Browse</KButton>
+        <KButton :svg-icon="folderIcon" :fill-mode="'flat'"></KButton>
+      </p>
+      <p>
+        <KButton :fill-mode="'flat'" :disabled="true">Browse</KButton>
+        <KButton :svg-icon="folderIcon" :fill-mode="'flat'" :disabled="true"
+          >Browse</KButton
+        >
+        <KButton
+          :svg-icon="folderIcon"
+          :fill-mode="'flat'"
+          :disabled="true"
+        ></KButton>
+      </p>
+    </div>
+
+    <div class="col-xs-12 col-sm-6 example-col">
+      <p>Flat k-buttons (Primary)</p>
+      <p>
+        <KButton :theme-color="'primary'" :fill-mode="'flat'">Browse</KButton>
+        <KButton
+          :svg-icon="folderIcon"
+          :theme-color="'primary'"
+          :fill-mode="'flat'"
+          >Browse</KButton
+        >
+        <KButton
+          :svg-icon="folderIcon"
+          :theme-color="'primary'"
+          :fill-mode="'flat'"
+        ></KButton>
+      </p>
+      <p>
+        <KButton :theme-color="'primary'" :fill-mode="'flat'" :disabled="true"
+          >Browse</KButton
+        >
+        <KButton
+          :svg-icon="folderIcon"
+          :theme-color="'primary'"
+          :fill-mode="'flat'"
+          :disabled="true"
+          >Browse</KButton
+        >
+        <KButton
+          :svg-icon="folderIcon"
+          :theme-color="'primary'"
+          :fill-mode="'flat'"
+          :disabled="true"
+        ></KButton>
+      </p>
+    </div>
+
+    <div class="col-xs-12 col-sm-6 example-col">
+      <p>Outline k-buttons</p>
+      <p>
+        <KButton :fill-mode="'outline'">Browse</KButton>
+        <KButton :svg-icon="folderIcon" :fill-mode="'outline'">Browse</KButton>
+        <KButton :svg-icon="folderIcon" :fill-mode="'outline'"></KButton>
+      </p>
+      <p>
+        <KButton :fill-mode="'outline'" :disabled="true">Browse</KButton>
+        <KButton :svg-icon="folderIcon" :fill-mode="'outline'" :disabled="true"
+          >Browse</KButton
+        >
+        <KButton
+          :svg-icon="folderIcon"
+          :fill-mode="'outline'"
+          :disabled="true"
+        ></KButton>
+      </p>
+    </div>
+
+    <div class="col-xs-12 col-sm-6 example-col">
+      <p>Outline k-buttons (Primary)</p>
+      <p>
+        <KButton :theme-color="'primary'" :fill-mode="'outline'"
+          >Browse</KButton
+        >
+        <KButton
+          :svg-icon="folderIcon"
+          :theme-color="'primary'"
+          :fill-mode="'outline'"
+          >Browse</KButton
+        >
+        <KButton
+          :svg-icon="folderIcon"
+          :theme-color="'primary'"
+          :fill-mode="'outline'"
+        ></KButton>
+      </p>
+      <p>
+        <KButton
+          :theme-color="'primary'"
+          :fill-mode="'outline'"
+          :disabled="true"
+          >Browse</KButton
+        >
+        <KButton
+          :svg-icon="folderIcon"
+          :theme-color="'primary'"
+          :fill-mode="'outline'"
+          :disabled="true"
+          >Browse</KButton
+        >
+        <KButton
+          :svg-icon="folderIcon"
+          :theme-color="'primary'"
+          :fill-mode="'outline'"
+          :disabled="true"
+        ></KButton>
+      </p>
+    </div>
+
+    <div class="col-xs-12 example-col">
+      <p>Icon Types</p>
+      <KButton :svg-icon="calendarIcon">Kendo UI for Vue Font Icon</KButton>
+      <KButton
+        :image-url="snowboardingImage"
+        >Image Icon</KButton
+      >
+    </div>
+  </div>
+</template>
+<script>
+import { Button as KButton } from "@progress/kendo-vue-buttons";
+import { folderIcon, calendarIcon } from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    KButton,
+  },
+  data() {
+    return {
+      folderIcon,
+      calendarIcon,
+      snowboardingImage: (import.meta.env.VITE_VUE_DEMOS_BASE_URL || "/") + "assets/buttons/button/snowboarding.png"
+    };
+  },
+};
+</script>
+<style scoped>
+.k-button {
+  margin-right: 3px;
+}
+
+.k-button > .k-image {
+  width: 20px;
+  height: 20px;
+}
+</style>
diff --git a/vue-options-api-demos/buttons/button/disabled/main.js b/vue-options-api-demos/buttons/button/disabled/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/button/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/button/disabled/main.vue b/vue-options-api-demos/buttons/button/disabled/main.vue
new file mode 100644
index 00000000..34bebc3a
--- /dev/null
+++ b/vue-options-api-demos/buttons/button/disabled/main.vue
@@ -0,0 +1,19 @@
+<template>
+    <div>
+      <KButton> Enabled Button</KButton> &nbsp;
+      <KButton :disabled="true">Disabled Button (focusable)</KButton>
+      <KButton :disabled="true" :tabindex="-1"
+        >Disabled Button (not focusable)</KButton
+      >
+    </div>
+  </template>
+  <script>
+  import { Button as KButton } from "@progress/kendo-vue-buttons";
+  
+  export default {
+    components: {
+      KButton,
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/buttons/button/events/main.js b/vue-options-api-demos/buttons/button/events/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/button/events/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/button/events/main.vue b/vue-options-api-demos/buttons/button/events/main.vue
new file mode 100644
index 00000000..32d89fe1
--- /dev/null
+++ b/vue-options-api-demos/buttons/button/events/main.vue
@@ -0,0 +1,38 @@
+<template>
+   <div class="example-config">
+          <kbutton
+                    @click="handleDomEvent"
+                    @mousedown="handleDomEvent"
+                    @mouseup="handleDomEvent"
+                    @focus="handleDomEvent"
+                    @blur="handleDomEvent"
+                    @keypress="handleDomEvent"
+                    >
+                    My Button
+          </kbutton>
+        <h5>{{title}}</h5>
+        <ul class="event-log">
+          <li v-for="log in logs" :key="log">{{log}}</li>
+        </ul>
+      </div>
+</template>
+<script>
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'kbutton': Button
+    },
+    data () {
+      return {
+        logs: []
+      };
+    },
+    methods: {
+       handleDomEvent (event) {
+        this.logs.unshift(event.type);
+      }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/buttons/button/icon/main.js b/vue-options-api-demos/buttons/button/icon/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/button/icon/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/button/icon/main.vue b/vue-options-api-demos/buttons/button/icon/main.vue
new file mode 100644
index 00000000..83fd5cc7
--- /dev/null
+++ b/vue-options-api-demos/buttons/button/icon/main.vue
@@ -0,0 +1,30 @@
+<template>
+    <div>
+      <KButton :svg-icon="arrowRotateCwIcon">Kendo UI for Vue SVG icon</KButton>
+      <KButton
+        :image-url="snowboardingImage"
+        >Image icon</KButton
+      >
+    </div>
+  </template>
+  <script>
+  import { Button as KButton } from "@progress/kendo-vue-buttons";
+  import { arrowRotateCwIcon } from "@progress/kendo-svg-icons";
+
+  export default {
+    components: {
+      KButton,
+    },
+    data() {
+      return {
+        arrowRotateCwIcon,
+        snowboardingImage: (import.meta.env.VITE_VUE_DEMOS_BASE_URL || "/") + "assets/buttons/button/snowboarding.png"
+      };
+    },
+  };
+  </script>
+  <style>
+  .k-button + .k-button {
+    margin-left: 5px;
+  }
+  </style>
diff --git a/vue-options-api-demos/buttons/button/primary/main.js b/vue-options-api-demos/buttons/button/primary/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/button/primary/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/button/primary/main.vue b/vue-options-api-demos/buttons/button/primary/main.vue
new file mode 100644
index 00000000..304639c7
--- /dev/null
+++ b/vue-options-api-demos/buttons/button/primary/main.vue
@@ -0,0 +1,14 @@
+<template>
+    <div>
+        <KButton :theme-color="'primary'">Primary Button</KButton>
+    </div>
+</template>
+<script>
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        KButton
+    }
+}
+</script>
diff --git a/vue-options-api-demos/buttons/button/toggleable/main.js b/vue-options-api-demos/buttons/button/toggleable/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/button/toggleable/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/button/toggleable/main.vue b/vue-options-api-demos/buttons/button/toggleable/main.vue
new file mode 100644
index 00000000..04a4c970
--- /dev/null
+++ b/vue-options-api-demos/buttons/button/toggleable/main.vue
@@ -0,0 +1,18 @@
+<template>
+    <div>
+        <p>
+            <KButton :togglable="true">
+            Togglable Button
+            </KButton>
+        </p>
+    </div>
+</template>
+<script>
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        KButton
+    }
+}
+</script>
diff --git a/vue-options-api-demos/buttons/buttongroup/basic/main.js b/vue-options-api-demos/buttons/buttongroup/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/buttongroup/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/buttongroup/basic/main.vue b/vue-options-api-demos/buttons/buttongroup/basic/main.vue
new file mode 100644
index 00000000..06b2e7a5
--- /dev/null
+++ b/vue-options-api-demos/buttons/buttongroup/basic/main.vue
@@ -0,0 +1,58 @@
+<template>
+    <div class="row">
+      <div class="col-xs-12 col-sm-6 example-col">
+        <p>Text only</p>
+        <ButtonGroup>
+          <KButton :togglable="true"> Bold </KButton>
+          <KButton :togglable="true"> Italic </KButton>
+          <KButton :togglable="true"> Underline </KButton>
+        </ButtonGroup>
+      </div>
+      <div class="col-xs-12 col-sm-6 example-col">
+        <p>Icons only</p>
+        <ButtonGroup>
+          <KButton
+            :togglable="true"
+            :disabled="true"
+            :svg-icon="boldIcon"
+          ></KButton>
+          <KButton :togglable="true" :svg-icon="italicIcon"></KButton>
+          <KButton :togglable="true" :svg-icon="underlineIcon"></KButton>
+        </ButtonGroup>
+      </div>
+      <div class="col-xs-12 col-sm-6 example-col">
+        <p>Text + Icons</p>
+        <ButtonGroup :disabled="true">
+          <KButton :togglable="true" :svg-icon="boldIcon">Bold</KButton>
+          <KButton :togglable="true" :svg-icon="italicIcon">Italic</KButton>
+          <KButton :togglable="true" :svg-icon="underlineIcon">Underline</KButton>
+        </ButtonGroup>
+      </div>
+      <div class="col-xs-12 col-sm-6 example-col">
+        <p>k-buttons with responsive width</p>
+        <ButtonGroup width="300px">
+          <KButton :togglable="true" :svg-icon="boldIcon">Bold</KButton>
+          <KButton :togglable="true" :svg-icon="italicIcon">Italic</KButton>
+          <KButton :togglable="true" :svg-icon="underlineIcon">Underline</KButton>
+        </ButtonGroup>
+      </div>
+    </div>
+  </template>
+  <script>
+  import { Button as KButton, ButtonGroup } from "@progress/kendo-vue-buttons";
+  import { boldIcon, italicIcon, underlineIcon } from "@progress/kendo-svg-icons";
+  export default {
+    components: {
+      KButton,
+      ButtonGroup,
+    },
+    data() {
+      return {
+        boldIcon,
+        italicIcon,
+        underlineIcon,
+      };
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/buttons/buttongroup/disabled/main.js b/vue-options-api-demos/buttons/buttongroup/disabled/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/buttongroup/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/buttongroup/disabled/main.vue b/vue-options-api-demos/buttons/buttongroup/disabled/main.vue
new file mode 100644
index 00000000..69e6c48c
--- /dev/null
+++ b/vue-options-api-demos/buttons/buttongroup/disabled/main.vue
@@ -0,0 +1,31 @@
+<template>
+    <div>
+      <ButtonGroup :disabled="disabled">
+        <KButton :togglable="true">Option A</KButton>
+        <KButton :togglable="true">Option B</KButton>
+      </ButtonGroup>
+      &nbsp;
+      <KButton @click="handleDisable">Toggle disabled</KButton>
+    </div>
+  </template>
+  <script>
+  import { Button as KButton, ButtonGroup } from "@progress/kendo-vue-buttons";
+  
+  export default {
+    components: {
+      KButton,
+      ButtonGroup,
+    },
+    data() {
+      return {
+        disabled: true,
+      };
+    },
+    methods: {
+      handleDisable() {
+        this.disabled = !this.disabled;
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/buttons/chip/appearance/configurator/ChipStyleConfigurator.vue b/vue-options-api-demos/buttons/chip/appearance/configurator/ChipStyleConfigurator.vue
new file mode 100644
index 00000000..0494ee76
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/appearance/configurator/ChipStyleConfigurator.vue
@@ -0,0 +1,159 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Theme Color
+          <div class="k-form-field-wrap">
+            <dropdownlist
+              :data-items="themeColors"
+              :value="themeColor"
+              :item-render="'colorItemRender'"
+              :style="{
+                'min-width': '150px',
+              }"
+              @change="handleThemeColorChange"
+            >
+              <template v-slot:colorItemRender="{ props }">
+                <li
+                  :class="props.itemClass"
+                  @click="(ev) => props.onClick(ev)"
+                  :style="{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                  }"
+                >
+                  {{ props.dataItem }}{{ ' ' }}
+                  <span
+                    :style="{
+                      width: '16px',
+                      height: '16px',
+                      background: 'currentColor',
+                      display: 'inline-block',
+                    }"
+                    :class="['k-color-' + props.dataItem]"
+                  ></span>
+                </li>
+              </template>
+            </dropdownlist>
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Fill Mode
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="fillModes"
+              :value="fillMode"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleFillModeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { ButtonGroup, Button } from "@progress/kendo-vue-buttons";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    "kbutton": Button,
+    "k-buttongroup": ButtonGroup,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+    themeColor: String,
+    fillMode: String,
+    rounded: String,
+  },
+  emits: [
+    "sizechange",
+    "themecolorchange",
+    "fillmodechange",
+    "roundedchange",
+  ],
+  data() {
+    return {
+      sizes: ["small", "medium", "large"],
+      themeColors: [
+        "base",
+        "info",
+        "success",
+        "warning",
+        "error",
+      ],
+      fillModes: ["solid", "outline"],
+      roundedOptions: ["small", "medium", "large", "full"],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleThemeColorChange(event) {
+      this.$emit("themecolorchange", event);
+    },
+    handleFillModeChange(event) {
+      this.$emit("fillmodechange", event);
+    },
+    handleRoundedChange(event) {
+      this.$emit("roundedchange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/chip/appearance/configurator/main.js b/vue-options-api-demos/buttons/chip/appearance/configurator/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/appearance/configurator/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/chip/appearance/configurator/main.vue b/vue-options-api-demos/buttons/chip/appearance/configurator/main.vue
new file mode 100644
index 00000000..8add2daf
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/appearance/configurator/main.vue
@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <ChipStyleConfigurator
+      :size="size"
+      @sizechange="setSize"
+      :theme-color="themeColor"
+      @themecolorchange="setThemeColor"
+      :fill-mode="fillMode"
+      @fillmodechange="setFillMode"
+      :rounded="rounded"
+      @roundedchange="setRounded"
+    />
+    <ChipList
+      :data-items="people"
+      :selection="'multiple'"
+      @datachange="handleDataChange"
+      :chip="'chipTemplate'"
+    >
+      <template v-slot:chipTemplate="{ props }">
+        <Chip
+          :data-item="props.dataItem"
+          :text="props.text"
+          :value="props.value"
+          :size="size"
+          :theme-color="themeColor"
+          :fill-mode="fillMode"
+          :rounded="rounded"
+          :removable="true"
+          :avatar="'avatar'"
+        >
+        <template v-slot:avatar>
+          <Avatar :type="'image'" :rounded="'full'" :size="'small'">
+            <img :src="props.dataItem.icon" alt="image" />
+          </Avatar>
+        </template>
+        </Chip>
+      </template>
+    </ChipList>
+  </div>
+</template>
+
+<script>
+import { Chip, ChipList } from "@progress/kendo-vue-buttons";
+import { Avatar } from "@progress/kendo-vue-layout";
+import ChipStyleConfigurator from "./ChipStyleConfigurator.vue";
+
+const pedroAfonsoImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/SPLIR.jpg';
+const thomasHardyImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/RICSU.jpg';
+const christinaBergImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/BERGS.jpg';
+const paulaWilsonImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/RATTC.jpg';
+
+export default {
+  components: {
+    ChipStyleConfigurator,
+    Chip,
+    ChipList,
+    Avatar,
+  },
+  data() {
+    return {
+      people: [
+        {
+          text: "Pedro Afonso",
+          value: "pedro",
+          icon: pedroAfonsoImage,
+        },
+        {
+          text: "Thomas Hardy",
+          value: "thomas",
+          icon: thomasHardyImage,
+        },
+        {
+          text: "Christina Berg",
+          value: "christina",
+          icon: christinaBergImage,
+        },
+        {
+          text: "Paula Wilson",
+          value: "paula",
+          icon: paulaWilsonImage,
+        },
+      ],
+      size: "medium",
+      themeColor: "base",
+      fillMode: "solid",
+      rounded: "medium",
+    };
+  },
+  methods: {
+    handleDataChange(event){
+      this.people = event.value;
+    },
+    setSize(event) {
+      this.size = event.value;
+    },
+    setThemeColor(event) {
+      this.themeColor = event.value;
+    },
+    setFillMode(event) {
+      this.fillMode = event.value;
+    },
+    setRounded(event) {
+      this.rounded = event.value;
+    },
+  },
+};
+</script>
+
+<style>
+.k-chip {
+  margin-right: 10px;
+}
+.pedro, .thomas, .christina, .paula {
+  background-size: contain;
+}
+.custom-style {
+  color: #6200ee;
+  background-color: #f3ebfe;
+  border-color: #6200ee;
+}
+</style>
diff --git a/vue-options-api-demos/buttons/chip/appearance/fill-mode/main.js b/vue-options-api-demos/buttons/chip/appearance/fill-mode/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/appearance/fill-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/chip/appearance/fill-mode/main.vue b/vue-options-api-demos/buttons/chip/appearance/fill-mode/main.vue
new file mode 100644
index 00000000..92137d9d
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/appearance/fill-mode/main.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <span class="chip-wrapper">
+      <Chip
+        :text="'Solid'"
+        :value="'solid'"
+        :fill-mode="'solid'"
+        :svg-icon="checkCircleIcon"
+      />
+    </span>
+    <span class="chip-wrapper">
+      <Chip
+        :text="'Outline'"
+        :value="'outline'"
+        :fill-mode="'outline'"
+        :svg-icon="checkCircleIcon"
+      />
+    </span>
+  </div>
+</template>
+
+<script>
+import { Chip } from "@progress/kendo-vue-buttons";
+import { checkCircleIcon } from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    Chip,
+  },
+  data() {
+    return {
+      checkCircleIcon,
+    };
+  },
+};
+</script>
+
+<style>
+.chip-wrapper {
+  padding: 20px;
+}
+</style>
diff --git a/vue-options-api-demos/buttons/chip/appearance/rounded/main.js b/vue-options-api-demos/buttons/chip/appearance/rounded/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/appearance/rounded/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/chip/appearance/rounded/main.vue b/vue-options-api-demos/buttons/chip/appearance/rounded/main.vue
new file mode 100644
index 00000000..bbd84235
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/appearance/rounded/main.vue
@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <span class="chip-wrapper">
+      <Chip
+        :text="'No Roundness'"
+        :value="'No Roundness'"
+        :rounded="null"
+        :svg-icon="checkCircleIcon"
+      />
+    </span>
+    <span class="chip-wrapper">
+      <Chip
+        :text="'Small'"
+        :value="'small'"
+        :rounded="'small'"
+        :svg-icon="checkCircleIcon"
+      />
+    </span>
+    <span class="chip-wrapper">
+      <Chip
+        :text="'Medium'"
+        :value="'medium'"
+        :rounded="'medium'"
+        :svg-icon="checkCircleIcon"
+      />
+    </span>
+    <span class="chip-wrapper">
+      <Chip
+        :text="'Large'"
+        :value="'large'"
+        :rounded="'large'"
+        :svg-icon="checkCircleIcon"
+      />
+    </span>
+    <span class="chip-wrapper">
+      <Chip
+        :text="'Full'"
+        :value="'full'"
+        :rounded="'full'"
+        :svg-icon="checkCircleIcon"
+      />
+    </span>
+    <br />
+    <br />
+    <span class="chip-wrapper">
+      <Chip
+        :text="'Custom rounded'"
+        :value="'custom'"
+        :rounded="null"
+        :class="'custom-rounded'"
+        :svg-icon="checkCircleIcon"
+      />
+    </span>
+  </div>
+</template>
+
+<script>
+import { Chip } from "@progress/kendo-vue-buttons";
+import { checkCircleIcon } from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    Chip,
+  },
+  data() {
+    return {
+      checkCircleIcon,
+    };
+  },
+};
+</script>
+
+<style>
+.custom-rounded {
+  border-top-right-radius: 15px;
+  border-top-left-radius: 15px;
+}
+.chip-wrapper {
+  padding: 20px;
+}
+</style>
diff --git a/vue-options-api-demos/buttons/chip/appearance/size/main.js b/vue-options-api-demos/buttons/chip/appearance/size/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/appearance/size/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/chip/appearance/size/main.vue b/vue-options-api-demos/buttons/chip/appearance/size/main.vue
new file mode 100644
index 00000000..68e11f88
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/appearance/size/main.vue
@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <span class="chip-wrapper">
+      <Chip
+        :text="'Small'"
+        :value="'small'"
+        :size="'small'"
+        :svg-icon="checkCircleIcon"
+      />
+    </span>
+    <span class="chip-wrapper">
+      <Chip
+        :text="'Medium'"
+        :value="'medium'"
+        :size="'medium'"
+        :svg-icon="checkCircleIcon"
+      />
+    </span>
+    <span class="chip-wrapper">
+      <Chip
+        :text="'Large'"
+        :value="'large'"
+        :size="'large'"
+        :svg-icon="checkCircleIcon"
+      />
+    </span>
+    <span class="chip-wrapper">
+      <Chip
+        :text="'Custom Size'"
+        :value="'custom'"
+        :size="null"
+        :class="'custom-size'"
+        :svg-icon="checkCircleIcon"
+      />
+    </span>
+  </div>
+</template>
+
+<script>
+import { Chip } from "@progress/kendo-vue-buttons";
+import { checkCircleIcon } from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    Chip,
+  },
+  data() {
+    return {
+      checkCircleIcon,
+    };
+  },
+};
+</script>
+
+<style>
+.custom-size {
+  padding: 15px 30px;
+}
+
+.chip-wrapper {
+  padding: 20px;
+}
+</style>
diff --git a/vue-options-api-demos/buttons/chip/appearance/theme-colors/main.js b/vue-options-api-demos/buttons/chip/appearance/theme-colors/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/appearance/theme-colors/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/chip/appearance/theme-colors/main.vue b/vue-options-api-demos/buttons/chip/appearance/theme-colors/main.vue
new file mode 100644
index 00000000..8d3e19c0
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/appearance/theme-colors/main.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <span class="chip-wrapper">
+      <Chip :text="'Base'" :theme-color="'base'" />
+    </span>
+    <span class="chip-wrapper">
+      <Chip :text="'Info'" :theme-color="'info'" />
+    </span>
+    <span class="chip-wrapper">
+      <Chip :text="'Success'" :theme-color="'success'" />
+    </span>
+    <span class="chip-wrapper">
+      <Chip :text="'Warning'" :theme-color="'warning'" />
+    </span>
+    <span class="chip-wrapper">
+      <Chip :text="'Error'" :theme-color="'error'" />
+    </span>
+    <span class="chip-wrapper">
+      <Chip
+        :text="'Custom colors'"
+        :theme-color="null"
+        :class="'custom-color'"
+      />
+    </span>
+  </div>
+</template>
+
+<script>
+import { Chip } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    Chip,
+  },
+};
+</script>
+
+<style>
+.chip-wrapper {
+  padding: 20px;
+}
+
+.custom-color {
+  background-color: green;
+  color: orange;
+}
+</style>
diff --git a/vue-options-api-demos/buttons/chip/avatar/CustomChip.vue b/vue-options-api-demos/buttons/chip/avatar/CustomChip.vue
new file mode 100644
index 00000000..b83524cb
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/avatar/CustomChip.vue
@@ -0,0 +1,33 @@
+<template>
+    <chip
+      :data-item="dataItem"
+      :text="text"
+      :value="value"
+      :removable="true"
+      :avatar="'avatar'">
+      <template v-slot:avatar>
+        <Avatar :type="'image'" :rounded="'full'" :size="'small'">
+          <img :src="imageUrl" alt="image" />
+        </Avatar>
+      </template>
+    </chip>
+  </template>
+  <script>
+  import { Chip } from '@progress/kendo-vue-buttons';
+  import { Avatar } from '@progress/kendo-vue-layout';
+  
+  export default {
+      name: 'CustomChip',
+      components: {
+          'chip': Chip,
+          Avatar
+      },
+      props: {
+          dataItem: Object,
+          value: String,
+          text: String,
+          imageUrl: String
+      }
+  }
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/buttons/chip/avatar/main.js b/vue-options-api-demos/buttons/chip/avatar/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/avatar/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/chip/avatar/main.vue b/vue-options-api-demos/buttons/chip/avatar/main.vue
new file mode 100644
index 00000000..e9abf072
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/avatar/main.vue
@@ -0,0 +1,66 @@
+<template>
+    <chiplist
+        :data-items="people"
+        :selection="'multiple'"
+        @datachange="handleDataChange"
+        :chip="chip">
+         <template v-slot:myTemplate="{props}">
+            <custom
+            :data-item="props.dataItem"
+            :value="props.value"
+            :text="props.text"
+            :imageUrl="props.dataItem.imageUrl"/>
+        </template>
+    </chiplist>
+</template>
+<script>
+import { ChipList } from '@progress/kendo-vue-buttons';
+import CustomChip from './CustomChip.vue';
+
+
+const PedroAfonsoImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/SPLIR.jpg';
+const ThomasHardyImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/RICSU.jpg';
+const ChristinaBergImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/BERGS.jpg';
+const PaulaWilsonImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/RATTC.jpg';
+
+const people = [
+  {
+    text: 'Pedro Afonso',
+    value: 'pedro',
+    imageUrl: PedroAfonsoImage,
+  },
+  {
+    text: 'Thomas Hardy',
+    value: 'thomas',
+    imageUrl: ThomasHardyImage,
+  },
+  {
+    text: 'Christina Berg',
+    value: 'christina',
+    imageUrl: ChristinaBergImage,
+  },
+  {
+    text: 'Paula Wilson',
+    value: 'paula',
+    imageUrl: PaulaWilsonImage,
+  },
+];
+
+export default {
+    components: {
+        'chiplist': ChipList,
+        'custom': CustomChip
+    },
+    data () {
+        return {
+            people,
+            chip: 'myTemplate'
+        };
+    },
+    methods: {
+        handleDataChange (event) {
+            this.people = event.value
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/buttons/chip/customization/CustomChip.vue b/vue-options-api-demos/buttons/chip/customization/CustomChip.vue
new file mode 100644
index 00000000..11c90b2f
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/customization/CustomChip.vue
@@ -0,0 +1,33 @@
+<template>
+  <chip
+    :data-item="dataItem"
+    :text="text"
+    :value="value"
+    :removable="true"
+    :avatar="'avatar'"
+  >
+    <template v-slot:avatar>
+      <Avatar :type="'image'" :rounded="'full'" :size="'small'">
+        <img :src="dataItem.avatar.imageUrl" alt="image" />
+      </Avatar>
+    </template>
+  </chip>
+</template>
+  <script>
+import { Chip } from "@progress/kendo-vue-buttons";
+import { Avatar } from "@progress/kendo-vue-layout";
+
+export default {
+  name: "CustomChip",
+  components: {
+    chip: Chip,
+    Avatar,
+  },
+  props: {
+    dataItem: Object,
+    value: String,
+    text: String,
+  },
+};
+</script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/buttons/chip/customization/main.js b/vue-options-api-demos/buttons/chip/customization/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/customization/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/chip/customization/main.vue b/vue-options-api-demos/buttons/chip/customization/main.vue
new file mode 100644
index 00000000..21d2f236
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/customization/main.vue
@@ -0,0 +1,74 @@
+<template>
+  <div>
+    Simple:
+    <chiplist :data-items="people" :selection="'multiple'" @datachange="handleDataChange">
+    </chiplist>
+    <hr />
+    Custom:
+    <chiplist :data-items="people" :selection="'multiple'" @datachange="handleDataChange" :chip="chip">
+      <template v-slot:myTemplate="{ props }">
+        <custom :data-item="props.dataItem" :value="props.value" :text="props.text"
+          :imageUrl="props.dataItem.avatar.imageUrl" />
+      </template>
+    </chiplist>
+  </div>
+</template>
+<script>
+import { ChipList } from '@progress/kendo-vue-buttons';
+import CustomChip from './CustomChip.vue';
+
+const PedroAfonsoImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/SPLIR.jpg';
+const ThomasHardyImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/RICSU.jpg';
+const ChristinaBergImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/BERGS.jpg';
+const PaulaWilsonImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/RATTC.jpg';
+
+export default {
+  components: {
+    'chiplist': ChipList,
+    'custom': CustomChip
+  },
+  data() {
+    return {
+      people: [
+        {
+          text: 'Pedro Afonso',
+          value: 'pedro',
+          avatar: {
+            imageUrl: PedroAfonsoImage,
+          },
+        },
+        {
+          text: 'Thomas Hardy',
+          value: 'thomas',
+          avatar: {
+            imageUrl: ThomasHardyImage,
+            imageAlt: 'custmer'
+          }
+        },
+        {
+          text: 'Christina Berg',
+          value: 'christina',
+          avatar: {
+            imageUrl: ChristinaBergImage,
+            imageAlt: 'custmer'
+          }
+        },
+        {
+          text: 'Paula Wilson',
+          value: 'paula',
+          avatar: {
+            imageUrl: PaulaWilsonImage,
+            imageAlt: 'custmer'
+          }
+        },
+      ],
+      chip: 'myTemplate'
+    };
+  },
+  methods: {
+    handleDataChange(event) {
+      this.people = event.value
+    }
+  }
+}
+</script>
diff --git a/vue-options-api-demos/buttons/chip/disabled/CustomChip.vue b/vue-options-api-demos/buttons/chip/disabled/CustomChip.vue
new file mode 100644
index 00000000..36a97677
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/disabled/CustomChip.vue
@@ -0,0 +1,24 @@
+<template>
+  <chip
+    :rounded="'full'"
+     :data-item="dataItem"
+    :disabled=" dataItem.disabled"
+    :text="text"
+    :value="value"
+    :removable="true"/>
+</template>
+<script>
+import { Chip } from '@progress/kendo-vue-buttons';
+
+export default {
+    name: 'CustomChip',
+    components: {
+        'chip': Chip,
+    },
+    props: {
+        dataItem: Object,
+        value: String,
+        text: String
+    }
+}
+</script>
diff --git a/vue-options-api-demos/buttons/chip/disabled/main.js b/vue-options-api-demos/buttons/chip/disabled/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/chip/disabled/main.vue b/vue-options-api-demos/buttons/chip/disabled/main.vue
new file mode 100644
index 00000000..e2cb3c18
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/disabled/main.vue
@@ -0,0 +1,58 @@
+<template>
+    <chiplist
+        :rounded="'full'"
+        :default-data-items="fruits"
+        :selection="'single'"
+        :chip="chip">
+         <template v-slot:myTemplate="{props}">
+            <custom
+            :data-item="props.dataItem"
+            :value="props.value"
+            :text="props.text"/>
+        </template>
+    </chiplist>
+</template>
+<script>
+import { ChipList } from '@progress/kendo-vue-buttons';
+import CustomChip from './CustomChip.vue';
+
+const fruits = [
+    {
+        text: 'Berry',
+        value: 'berry',
+        disabled: true
+    },
+    {
+        text: 'Apple',
+        value: 'apple',
+        disabled: true
+    },
+    {
+        text: 'Strawberry',
+        value: 'strawberry'
+    },
+    {
+        text: 'Banana',
+        value: 'banana'
+    },
+    {
+        text: 'Kiwi',
+        value: 'kiwi',
+        disabled: true
+    }
+];
+
+export default {
+    components: {
+        'chiplist': ChipList,
+        'custom': CustomChip
+    },
+    data () {
+        return {
+            fruits: fruits,
+            chip: 'myTemplate'
+        };
+    },
+
+}
+</script>
diff --git a/vue-options-api-demos/buttons/chip/getting-started/main.js b/vue-options-api-demos/buttons/chip/getting-started/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/getting-started/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/chip/getting-started/main.vue b/vue-options-api-demos/buttons/chip/getting-started/main.vue
new file mode 100644
index 00000000..9c5cfaae
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/getting-started/main.vue
@@ -0,0 +1,376 @@
+<template>
+  <div>
+    <div class="container-fluid">
+      <div class="row mb-3" :style="{ marginLeft: '20px' }">
+        <chip
+          :text="'Chip component'"
+          :value="'chip'"
+          :rounded="'full'"
+          :disabled="disabledValue"
+          :svg-icon="
+            iconValue === 'map-marker-target' ? mapMarkerTargetIcon : undefined
+          "
+          :avatar="iconValue === 'paula' ? 'avatar' : undefined"
+          :theme-color="themeColorValue"
+          :fill-mode="lookValue"
+          :selected="selectValue"
+          :selected-svg-icon="selectIconValue"
+          :removable="removeValue"
+          :remove-svg-icon="removeIconValue"
+        >
+          <template v-slot:avatar>
+            <Avatar :type="'image'" :rounded="'full'" :size="'small'">
+              <img
+                :src="PaulaWilsonImage"
+                alt="image"
+              />
+            </Avatar>
+          </template>
+        </chip>
+      </div>
+      <div class="row">
+        <div class="col-6 col-md-3 mb-3">
+          <h5>Mode</h5>
+          <div>
+            <input
+              type="radio"
+              name="mode"
+              id="mode"
+              class="k-radio k-radio-md"
+              :checked="!disabledValue"
+              @change="handleModeChange"
+            />
+            <label class="k-radio-label" for="mode">enabled</label>
+          </div>
+          <div>
+            <input
+              type="radio"
+              name="mode"
+              id="mode1"
+              class="k-radio k-radio-md"
+              :checked="disabledValue"
+              @change="handleModeChange"
+            />
+            <label class="k-radio-label" for="mode1">disabled</label>
+          </div>
+        </div>
+        <div class="col-6 col-md-3 mb-3">
+          <h5>Icon</h5>
+          <div>
+            <input
+              type="radio"
+              name="icon"
+              id="icon"
+              :value="''"
+              class="k-radio k-radio-md"
+              :checked="iconValue === ''"
+              @change="handleIconChange"
+            />
+            <label class="k-radio-label" for="icon">none</label>
+          </div>
+          <div>
+            <input
+              type="radio"
+              name="icon"
+              id="icon1"
+              :value="mapMarkerTargetIcon.name"
+              class="k-radio k-radio-md"
+              :checked="iconValue === mapMarkerTargetIcon.name"
+              @change="handleIconChange"
+            />
+            <label class="k-radio-label" for="icon1">icon</label>
+          </div>
+          <div>
+            <input
+              type="radio"
+              name="icon"
+              id="icon2"
+              :value="'paula'"
+              class="k-radio k-radio-md"
+              :checked="iconValue === 'paula'"
+              @change="handleIconChange"
+            />
+            <label class="k-radio-label" for="icon2">avatar</label>
+          </div>
+        </div>
+        <div class="col-6 col-md-3 mb-3">
+          <h5>Type</h5>
+          <div>
+            <input
+              type="radio"
+              name="type"
+              id="type"
+              :value="''"
+              class="k-radio k-radio-md"
+              :checked="themeColorValue === 'base'"
+              @change="handleTypeChange"
+            />
+            <label class="k-radio-label" for="type">none</label>
+          </div>
+          <div>
+            <input
+              type="radio"
+              name="type"
+              id="type1"
+              :value="'success'"
+              class="k-radio k-radio-md"
+              :checked="themeColorValue === 'success'"
+              @change="handleTypeChange"
+            />
+            <label class="k-radio-label" for="type1">success</label>
+          </div>
+          <div>
+            <input
+              type="radio"
+              name="type"
+              id="type2"
+              :value="'warning'"
+              class="k-radio k-radio-md"
+              :checked="themeColorValue === 'warning'"
+              @change="handleTypeChange"
+            />
+            <label class="k-radio-label" for="type2">warning</label>
+          </div>
+          <div>
+            <input
+              type="radio"
+              name="type"
+              id="type3"
+              :value="'info'"
+              class="k-radio k-radio-md"
+              :checked="themeColorValue === 'info'"
+              @change="handleTypeChange"
+            />
+            <label class="k-radio-label" for="type3">info</label>
+          </div>
+          <div>
+            <input
+              type="radio"
+              name="type"
+              id="type4"
+              :value="'error'"
+              class="k-radio k-radio-md"
+              :checked="themeColorValue === 'error'"
+              @change="handleTypeChange"
+            />
+            <label class="k-radio-label" for="type4">error</label>
+          </div>
+        </div>
+        <div class="col-6 col-md-3 mb-3">
+          <h5>Appearance</h5>
+          <div>
+            <input
+              type="radio"
+              name="look"
+              id="look"
+              :value="''"
+              class="k-radio k-radio-md"
+              :checked="lookValue === 'solid'"
+              @change="handleLookChange"
+            />
+            <label class="k-radio-label" for="look">filled</label>
+          </div>
+          <div>
+            <input
+              type="radio"
+              name="look"
+              id="look1"
+              :value="'outline'"
+              class="k-radio k-radio-md"
+              :checked="lookValue === 'outline'"
+              @change="handleLookChange"
+            />
+            <label class="k-radio-label" for="look1">outlined</label>
+          </div>
+        </div>
+        <div class="col-6 col-md-3 mb-3">
+          <h5>Select Chip</h5>
+          <div>
+            <input
+              type="radio"
+              name="select"
+              id="select"
+              class="k-radio k-radio-md"
+              :checked="!selectValue"
+              @change="handleSelectChange"
+            />
+            <label class="k-radio-label" for="select">deselect</label>
+          </div>
+          <div>
+            <input
+              type="radio"
+              name="select"
+              id="select1"
+              class="k-radio k-radio-md"
+              :checked="selectValue"
+              @change="handleSelectChange"
+            />
+            <label class="k-radio-label" for="select1">select</label>
+          </div>
+        </div>
+
+        <div class="col-6 col-md-3 mb-3">
+          <h5>Select icon</h5>
+          <div>
+            <input
+              type="radio"
+              name="selectIcon"
+              :value="''"
+              id="selectIcon"
+              class="k-radio k-radio-md"
+              :checked="selectIconValue === ''"
+              @change="handleSelectIconChange"
+            />
+            <label class="k-radio-label" for="selectIcon">default</label>
+          </div>
+          <div>
+            <input
+              type="radio"
+              name="selectIcon"
+              id="selectIcon1"
+              :value="checkCircleIcon.name"
+              class="k-radio k-radio-md"
+              :checked="selectIconValue === checkCircleIcon.name"
+              @change="handleSelectIconChange"
+            />
+            <label class="k-radio-label" for="selectIcon1">custom</label>
+          </div>
+        </div>
+
+        <div class="col-6 col-md-3 mb-3">
+          <h5>Allow remove</h5>
+          <div>
+            <input
+              type="radio"
+              name="remove"
+              id="remove"
+              :value="false"
+              class="k-radio k-radio-md"
+              :checked="removeValue === false"
+              @change="handleRemoveChange"
+            />
+            <label class="k-radio-label" for="remove">do not remove</label>
+          </div>
+          <div>
+            <input
+              type="radio"
+              name="remove"
+              id="remove1"
+              :value="true"
+              class="k-radio k-radio-md"
+              :checked="removeValue === true"
+              @change="handleRemoveChange"
+            />
+            <label class="k-radio-label" for="remove1">remove</label>
+          </div>
+        </div>
+        <div class="col-6 col-md-3 mb-3">
+          <h5>Remove icon</h5>
+          <div>
+            <input
+              type="radio"
+              name="removeIcon"
+              id="removeIcon"
+              :value="'iconDefault'"
+              class="k-radio k-radio-md"
+              :checked="removeIconValue.name === 'x-circle'"
+              @change="handleRemoveIconChange"
+            />
+            <label class="k-radio-label" for="removeIcon">default</label>
+          </div>
+          <div>
+            <input
+              type="radio"
+              name="removeIcon"
+              id="removeIcon1"
+              :value="'cancel-icon'"
+              class="k-radio k-radio-md"
+              :checked="removeIconValue.name === 'cancel'"
+              @change="handleRemoveIconChange"
+            />
+            <label class="k-radio-label" for="removeIcon1">custom 1</label>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { Avatar } from "@progress/kendo-vue-layout";
+import { Chip } from "@progress/kendo-vue-buttons";
+import {
+  mapMarkerTargetIcon,
+  checkCircleIcon,
+  xCircleIcon,
+  cancelIcon,
+} from "@progress/kendo-svg-icons";
+
+
+const PaulaWilsonImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/RATTC.jpg';
+
+export default {
+  components: {
+    chip: Chip,
+    Avatar,
+  },
+  data() {
+    return {
+      checkCircleIcon,
+      xCircleIcon,
+      cancelIcon,
+      mapMarkerTargetIcon,
+      disabledValue: false,
+      iconValue: "",
+      themeColorValue: "base",
+      lookValue: "solid",
+      selectValue: false,
+      selectIconValue: "",
+      removeValue: false,
+      removeIconValue: xCircleIcon,
+      PaulaWilsonImage
+    };
+  },
+  methods: {
+    handleModeChange() {
+      this.disabledValue = !this.disabledValue;
+    },
+    handleIconChange(event) {
+      this.iconValue = event.target.value || undefined;
+    },
+    handleTypeChange(event) {
+      this.themeColorValue = event.target.value || undefined;
+    },
+    handleLookChange(event) {
+      this.lookValue = event.target.value || undefined;
+    },
+    handleSelectChange() {
+      this.selectValue = !this.selectValue;
+    },
+    handleSelectIconChange(event) {
+      const value = event.target.value;
+
+      this.selectIconValue =
+        value === "check-circle" ? checkCircleIcon : undefined;
+    },
+    handleRemoveChange() {
+      this.removeValue = !this.removeValue;
+    },
+    handleRemoveIconChange(event) {
+      const value = event.target.value;
+
+      if (value === "iconDefault") {
+        this.removeIconValue = xCircleIcon;
+      } else if (value === "cancel-icon") {
+        this.removeIconValue = cancelIcon;
+      }
+    },
+  },
+};
+</script>
+<style>
+.col-3,
+.col-6,
+.col-4 {
+  padding: 15px;
+}
+</style>
diff --git a/vue-options-api-demos/buttons/chip/remove-icon/CustomChip.vue b/vue-options-api-demos/buttons/chip/remove-icon/CustomChip.vue
new file mode 100644
index 00000000..4ced326a
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/remove-icon/CustomChip.vue
@@ -0,0 +1,25 @@
+<template>
+    <chip
+      :rounded="'full'"
+      :removable="dataItem.removable"
+      :remove-svg-icon="dataItem.removeIcon"
+      :text="text"
+      :value="value"
+    />
+  </template>
+  <script>
+  import { Chip } from "@progress/kendo-vue-buttons";
+  
+  export default {
+    name: "CustomChip",
+    components: {
+      chip: Chip,
+    },
+    props: {
+      dataItem: Object,
+      value: String,
+      text: String,
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/buttons/chip/remove-icon/main.js b/vue-options-api-demos/buttons/chip/remove-icon/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/remove-icon/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/chip/remove-icon/main.vue b/vue-options-api-demos/buttons/chip/remove-icon/main.vue
new file mode 100644
index 00000000..7ae21e5a
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/remove-icon/main.vue
@@ -0,0 +1,66 @@
+<template>
+    <chiplist
+      :rounded="'full'"
+      :default-data-items="fruits"
+      :selection="'single'"
+      :chip="chip"
+    >
+      <template v-slot:myTemplate="{ props }">
+        <custom
+          :data-item="props.dataItem"
+          :value="props.value"
+          :text="props.text"
+        />
+      </template>
+    </chiplist>
+  </template>
+<script>
+import { ChipList } from "@progress/kendo-vue-buttons";
+import {
+    xIcon,
+    cancelOutlineIcon,
+    cancelCircleIcon,
+    cancelIcon,
+} from "@progress/kendo-svg-icons";
+import CustomChip from "./CustomChip.vue";
+
+const fruits = [
+    {
+        text: "Berry",
+        value: "berry",
+        removable: true,
+        removeIcon: xIcon,
+    },
+    {
+        text: "Apple",
+        value: "apple",
+        removable: true,
+        removeIcon: cancelCircleIcon,
+    },
+    {
+        text: "Strawberry",
+        value: "strawberry",
+        removable: true,
+        removeIcon: cancelOutlineIcon,
+    },
+    {
+        text: "Banana",
+        value: "banana",
+        removable: true,
+        removeIcon: cancelIcon,
+    },
+];
+
+export default {
+    components: {
+        chiplist: ChipList,
+        custom: CustomChip,
+    },
+    data() {
+        return {
+            fruits: fruits,
+            chip: "myTemplate",
+        };
+    },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/chip/remove/CustomChip.vue b/vue-options-api-demos/buttons/chip/remove/CustomChip.vue
new file mode 100644
index 00000000..1fb8ac88
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/remove/CustomChip.vue
@@ -0,0 +1,23 @@
+<template>
+  <chip
+    :rounded="'full'"
+     :data-item="dataItem"
+    :text="text"
+    :value="value"
+    :removable="true"/>
+</template>
+<script>
+import { Chip } from '@progress/kendo-vue-buttons';
+
+export default {
+    name: 'CustomChip',
+    components: {
+        'chip': Chip,
+    },
+    props: {
+        dataItem: Object,
+        value: String,
+        text: String
+    }
+}
+</script>
diff --git a/vue-options-api-demos/buttons/chip/remove/main.js b/vue-options-api-demos/buttons/chip/remove/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/remove/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/chip/remove/main.vue b/vue-options-api-demos/buttons/chip/remove/main.vue
new file mode 100644
index 00000000..39a276d1
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/remove/main.vue
@@ -0,0 +1,55 @@
+<template>
+    <chiplist
+        :rounded="'full'"
+         :default-data-items="fruits"
+        :selection="'single'"
+        :chip="chip">
+         <template v-slot:myTemplate="{props}">
+            <custom
+            :data-item="props.dataItem"
+            :value="props.value"
+            :text="props.text"/>
+        </template>
+    </chiplist>
+</template>
+<script>
+import { ChipList } from '@progress/kendo-vue-buttons';
+import CustomChip from './CustomChip.vue';
+
+const fruits = [
+    {
+        text: 'Berry',
+        value: 'berry'
+    },
+    {
+        text: 'Apple',
+        value: 'apple'
+    },
+    {
+        text: 'Strawberry',
+        value: 'strawberry'
+    },
+    {
+        text: 'Banana',
+        value: 'banana'
+    },
+    {
+        text: 'Kiwi',
+        value: 'kiwi'
+    }
+];
+
+export default {
+    components: {
+        'chiplist': ChipList,
+        'custom': CustomChip
+    },
+    data () {
+        return {
+            fruits: fruits,
+            chip: 'myTemplate'
+        };
+    },
+
+}
+</script>
diff --git a/vue-options-api-demos/buttons/chip/select-icon/CustomChip.vue b/vue-options-api-demos/buttons/chip/select-icon/CustomChip.vue
new file mode 100644
index 00000000..ce0f6e97
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/select-icon/CustomChip.vue
@@ -0,0 +1,24 @@
+<template>
+    <chip
+      :rounded="'full'"
+      :selected-svg-icon="dataItem.selectedIcon"
+      :text="text"
+      :value="value"
+    />
+  </template>
+  <script>
+  import { Chip } from "@progress/kendo-vue-buttons";
+  
+  export default {
+    name: "CustomChip",
+    components: {
+      chip: Chip,
+    },
+    props: {
+      dataItem: Object,
+      value: String,
+      text: String,
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/buttons/chip/select-icon/main.js b/vue-options-api-demos/buttons/chip/select-icon/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/select-icon/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/chip/select-icon/main.vue b/vue-options-api-demos/buttons/chip/select-icon/main.vue
new file mode 100644
index 00000000..a20254f5
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/select-icon/main.vue
@@ -0,0 +1,68 @@
+<template>
+    <chiplist
+      :rounded="'full'"
+      :default-data-items="fruits"
+      :selection="'multiple'"
+      :chip="chip"
+    >
+      <template v-slot:myTemplate="{ props }">
+        <custom
+          :data-item="props.dataItem"
+          :value="props.value"
+          :text="props.text"
+        />
+      </template>
+    </chiplist>
+  </template>
+  <script>
+  import { ChipList } from "@progress/kendo-vue-buttons";
+  import {
+    checkCircleIcon,
+    checkOutlineIcon,
+    plusOutlineIcon,
+    plusCircleIcon,
+  } from "@progress/kendo-svg-icons";
+
+  import CustomChip from "./CustomChip.vue";
+
+  const fruits = [
+    {
+      text: "Berry",
+      value: "berry",
+      selectedIcon: checkOutlineIcon,
+    },
+    {
+      text: "Apple",
+      value: "apple",
+      selectedIcon: checkCircleIcon,
+    },
+    {
+      text: "Strawberry",
+      value: "strawberry",
+      selectedIcon: plusOutlineIcon,
+    },
+    {
+      text: "Banana",
+      value: "banana",
+      selectedIcon: plusOutlineIcon,
+    },
+    {
+      text: "Kiwi",
+      value: "kiwi",
+      selectedIcon: plusCircleIcon,
+    },
+  ];
+
+  export default {
+    components: {
+      chiplist: ChipList,
+      custom: CustomChip,
+    },
+    data() {
+      return {
+        fruits: fruits,
+        chip: "myTemplate",
+      };
+    },
+  };
+  </script>
diff --git a/vue-options-api-demos/buttons/chip/types/CustomChip.vue b/vue-options-api-demos/buttons/chip/types/CustomChip.vue
new file mode 100644
index 00000000..32ee3689
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/types/CustomChip.vue
@@ -0,0 +1,32 @@
+<template>
+  <Chip
+    :rounded="'full'"
+    :data-item="dataItem"
+    :theme-color="dataItem.type"
+    :text="text"
+    :value="value"
+    :removable="true"
+    :class="dataItem.type === null ? 'custom-color' : undefined"
+  />
+</template>
+<script>
+import { Chip } from "@progress/kendo-vue-buttons";
+
+export default {
+  name: "CustomChip",
+  components: {
+    Chip,
+  },
+  props: {
+    dataItem: Object,
+    value: String,
+    text: String,
+  },
+};
+</script>
+<style>
+.custom-color {
+  background-color: green;
+  color: orange;
+}
+</style>
diff --git a/vue-options-api-demos/buttons/chip/types/main.js b/vue-options-api-demos/buttons/chip/types/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/types/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/chip/types/main.vue b/vue-options-api-demos/buttons/chip/types/main.vue
new file mode 100644
index 00000000..37b0feef
--- /dev/null
+++ b/vue-options-api-demos/buttons/chip/types/main.vue
@@ -0,0 +1,67 @@
+<template>
+    <ChipList
+      :rounded="'full'"
+      :default-data-items="types"
+      :selection="'multiple'"
+      :chip="chip"
+    >
+      <template v-slot:myChipTemplate="{ props }">
+        <custom
+          :data-item="props.dataItem"
+          :value="props.value"
+          :text="props.text"
+        />
+      </template>
+    </ChipList>
+  </template>
+  <script>
+  import { ChipList } from '@progress/kendo-vue-buttons';
+  import CustomChip from './CustomChip.vue';
+  
+  const types = [
+    {
+      text: 'Base',
+      value: 'base',
+      type: 'base',
+    },
+    {
+      text: 'Warning',
+      value: 'warning',
+      type: 'warning',
+    },
+    {
+      text: 'Error',
+      value: 'error',
+      type: 'error',
+    },
+    {
+      text: 'Info',
+      value: 'info',
+      type: 'info',
+    },
+    {
+      text: 'Success',
+      value: 'success',
+      type: 'success',
+    },
+    {
+      text: 'Custom',
+      value: 'custom',
+      type: null,
+    },
+  ];
+  
+  export default {
+    components: {
+      ChipList,
+      custom: CustomChip,
+    },
+    data() {
+      return {
+        types: types,
+        chip: 'myChipTemplate',
+      };
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/buttons/chiplist/appearance/main.js b/vue-options-api-demos/buttons/chiplist/appearance/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/chiplist/appearance/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/chiplist/appearance/main.vue b/vue-options-api-demos/buttons/chiplist/appearance/main.vue
new file mode 100644
index 00000000..e9c0eefa
--- /dev/null
+++ b/vue-options-api-demos/buttons/chiplist/appearance/main.vue
@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <div class="separator mt-3">
+      <h6>Small</h6>
+      <chiplist
+        :size="'small'"
+        :rounded="'full'"
+        :key="meal.name"
+        :selection="'multiple'"
+        :default-data-items="meal"
+        :text-field="'name'"
+        :value-field="'name'"
+      />
+    </div>
+    <div class="separator mt-3">
+      <h6>Medium</h6>
+      <chiplist
+        :size="'medium'"
+        :rounded="'full'"
+        :key="meal.name"
+        :selection="'multiple'"
+        :default-data-items="meal"
+        :text-field="'name'"
+        :value-field="'name'"
+      />
+    </div>
+    <div class="separator mt-3">
+      <h6>Large</h6>
+      <chiplist
+        :size="'large'"
+        :rounded="'full'"
+        :key="meal.name"
+        :selection="'multiple'"
+        :default-data-items="meal"
+        :text-field="'name'"
+        :value-field="'name'"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import { ChipList } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    chiplist: ChipList,
+  },
+  data() {
+    return {
+      meal: [{ name: 'Ketchup' }, { name: 'Mustard' }, { name: 'Mayonnaise' }],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/chiplist/controlled/CustomChip.vue b/vue-options-api-demos/buttons/chiplist/controlled/CustomChip.vue
new file mode 100644
index 00000000..2afeceb1
--- /dev/null
+++ b/vue-options-api-demos/buttons/chiplist/controlled/CustomChip.vue
@@ -0,0 +1,23 @@
+<template>
+  <chip
+    :rounded="'full'"
+    :data-item="dataItem"
+    :text="text"
+    :value="value"
+    :removable="true"/>
+</template>
+<script>
+import { Chip } from '@progress/kendo-vue-buttons';
+
+export default {
+    name: 'CustomChip',
+    components: {
+        'chip': Chip,
+    },
+    props: {
+        dataItem: Object,
+        value: String,
+        text: String
+    }
+}
+</script>
diff --git a/vue-options-api-demos/buttons/chiplist/controlled/main.js b/vue-options-api-demos/buttons/chiplist/controlled/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/chiplist/controlled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/chiplist/controlled/main.vue b/vue-options-api-demos/buttons/chiplist/controlled/main.vue
new file mode 100644
index 00000000..796fbc8d
--- /dev/null
+++ b/vue-options-api-demos/buttons/chiplist/controlled/main.vue
@@ -0,0 +1,60 @@
+<template>
+    <chiplist
+        :rounded="'full'"
+        :data-items="fruits"
+        :selection="'multiple'"
+        @datachange="handleDataChange"
+        :chip="chip">
+         <template v-slot:myTemplate="{props}">
+            <custom
+            :data-item="props.dataItem"
+            :value="props.value"
+            :text="props.text"/>
+        </template>
+    </chiplist>
+</template>
+<script>
+import { ChipList } from '@progress/kendo-vue-buttons';
+import CustomChip from './CustomChip.vue';
+
+const fruits = [
+    {
+        text: 'Berry',
+        value: 'berry'
+    },
+    {
+        text: 'Apple',
+        value: 'apple'
+    },
+    {
+        text: 'Strawberry',
+        value: 'strawberry'
+    },
+    {
+        text: 'Banana',
+        value: 'banana'
+    },
+    {
+        text: 'Kiwi',
+        value: 'kiwi'
+    }
+];
+
+export default {
+    components: {
+        'chiplist': ChipList,
+        'custom': CustomChip
+    },
+    data () {
+        return {
+            fruits: fruits,
+            chip: 'myTemplate'
+        };
+    },
+    methods: {
+        handleDataChange (event) {
+            this.fruits = event.value
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/buttons/chiplist/customization/CustomChip.vue b/vue-options-api-demos/buttons/chiplist/customization/CustomChip.vue
new file mode 100644
index 00000000..c01160eb
--- /dev/null
+++ b/vue-options-api-demos/buttons/chiplist/customization/CustomChip.vue
@@ -0,0 +1,44 @@
+<template>
+  <chip
+    :rounded="'full'"
+     :data-item="dataItem"
+    :disabled="winterMonths.some((f) => f === dataItem.value)"
+    :style="{backgroundColor: colorMap[dataItem.value]}"
+    :text="text"
+    :value="value"
+     :removable="true"/>
+</template>
+<script>
+import { Chip } from '@progress/kendo-vue-buttons';
+
+const colorMap = {
+    '1': '#B4E5F4',
+    '2': '#B4E5F4',
+    '3': '#B4E5F4',
+    '4': '#F0C88B',
+    '5': '#F0C88B',
+    '6': '#F0C88B'
+};
+
+const winterMonths = [
+    '1', '2', '3'
+];
+
+export default {
+    name: 'CustomChip',
+    components: {
+        'chip': Chip,
+    },
+    props: {
+        dataItem: Object,
+        value: String,
+        text: String
+    },
+    data () {
+        return {
+            winterMonths: winterMonths,
+            colorMap: colorMap
+        };
+    }
+}
+</script>
diff --git a/vue-options-api-demos/buttons/chiplist/customization/main.js b/vue-options-api-demos/buttons/chiplist/customization/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/chiplist/customization/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/chiplist/customization/main.vue b/vue-options-api-demos/buttons/chiplist/customization/main.vue
new file mode 100644
index 00000000..657a2a85
--- /dev/null
+++ b/vue-options-api-demos/buttons/chiplist/customization/main.vue
@@ -0,0 +1,67 @@
+<template>
+    <div>
+        <h4>Choose from the summer months</h4>
+        <chiplist
+            :rounded="'full'"
+            :default-data-items="monthsData"
+            :selection="'multiple'"
+            :chip="chip"
+            @datachange="handleMonthChange">
+            <template v-slot:myTemplate="{props}">
+                <custom
+                :data-item="props.dataItem"
+                :value="props.value"
+                :text="props.text"/>
+            </template>
+        </chiplist>
+    </div>
+</template>
+<script>
+import { ChipList } from '@progress/kendo-vue-buttons';
+import CustomChip from './CustomChip.vue';
+
+const monthsData = [
+    {
+        text: 'December',
+        value: '1'
+    },
+    {
+        text: 'January',
+        value: '2'
+    },
+    {
+        text: 'February',
+        value: '3'
+    },
+    {
+        text: 'June',
+        value: '4'
+    },
+    {
+        text: 'July',
+        value: '5'
+    },
+    {
+        text: 'August',
+        value: '6'
+    }
+];
+
+export default {
+    components: {
+        'chiplist': ChipList,
+        'custom': CustomChip
+    },
+    data () {
+        return {
+            monthsData: monthsData,
+            chip: 'myTemplate'
+        };
+    },
+      methods: {
+        handleMonthChange (event) {
+            this.monthsData = event.value;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/buttons/chiplist/data-binding/main.js b/vue-options-api-demos/buttons/chiplist/data-binding/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/chiplist/data-binding/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/chiplist/data-binding/main.vue b/vue-options-api-demos/buttons/chiplist/data-binding/main.vue
new file mode 100644
index 00000000..cd8016f9
--- /dev/null
+++ b/vue-options-api-demos/buttons/chiplist/data-binding/main.vue
@@ -0,0 +1,49 @@
+<template>
+    <chiplist
+        :selection="'multiple'"
+        :data-items="months"
+        :text-field="'month'"
+        :value-field="'id'">
+    </chiplist>
+</template>
+<script>
+import { ChipList } from '@progress/kendo-vue-buttons';
+
+const monthsData = [
+    {
+        month: 'December',
+        id: '1'
+    },
+    {
+        month: 'January',
+        id: '2'
+    },
+    {
+        month: 'February',
+        id: '3'
+    },
+    {
+        month: 'June',
+        id: '4'
+    },
+    {
+        month: 'July',
+        id: '5'
+    },
+    {
+        month: 'August',
+        id: '6'
+    }
+];
+
+export default {
+    components: {
+        'chiplist': ChipList
+    },
+    data () {
+        return {
+            months: monthsData,
+        };
+    }
+}
+</script>
diff --git a/vue-options-api-demos/buttons/chiplist/disabled/CustomChip.vue b/vue-options-api-demos/buttons/chiplist/disabled/CustomChip.vue
new file mode 100644
index 00000000..f700955a
--- /dev/null
+++ b/vue-options-api-demos/buttons/chiplist/disabled/CustomChip.vue
@@ -0,0 +1,23 @@
+<template>
+  <chip
+  :rounded="'full'"
+    :data-item="dataItem"
+    :text="text"
+    :value="value"
+    :removable="true"/>
+</template>
+<script>
+import { Chip } from '@progress/kendo-vue-buttons';
+
+export default {
+    name: 'CustomChip',
+    components: {
+        'chip': Chip,
+    },
+    props: {
+        dataItem: Object,
+        value: String,
+        text: String
+    }
+}
+</script>
diff --git a/vue-options-api-demos/buttons/chiplist/disabled/main.js b/vue-options-api-demos/buttons/chiplist/disabled/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/chiplist/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/chiplist/disabled/main.vue b/vue-options-api-demos/buttons/chiplist/disabled/main.vue
new file mode 100644
index 00000000..06f5b538
--- /dev/null
+++ b/vue-options-api-demos/buttons/chiplist/disabled/main.vue
@@ -0,0 +1,60 @@
+<template>
+    <chiplist
+         :rounded="'full'"
+       :default-data-items="fruitsData"
+        :disabled="true"
+        :chip="chip">
+         <template v-slot:myTemplate="{props}">
+            <custom
+            :data-item="props.dataItem"
+            :value="props.value"
+            :text="props.text"/>
+        </template>
+    </chiplist>
+</template>
+<script>
+import { ChipList } from '@progress/kendo-vue-buttons';
+import CustomChip from './CustomChip.vue';
+
+const fruitsData = [
+    {
+        text: 'Berry',
+        value: 'berry',
+        disabled: true
+    },
+    {
+        text: 'Apple',
+        value: 'apple',
+        disabled: true
+    },
+    {
+        text: 'Strawberry',
+        value: 'strawberry',
+        disabled: true
+    },
+    {
+        text: 'Banana',
+        value: 'banana',
+        disabled: true
+    },
+    {
+        text: 'Kiwi',
+        value: 'kiwi',
+        disabled: true
+    }
+];
+
+export default {
+    components: {
+        'chiplist': ChipList,
+        'custom': CustomChip
+    },
+    data () {
+        return {
+            fruitsData: fruitsData,
+            chip: 'myTemplate'
+        };
+    },
+
+}
+</script>
diff --git a/vue-options-api-demos/buttons/chiplist/getting-started/main.js b/vue-options-api-demos/buttons/chiplist/getting-started/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/chiplist/getting-started/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/chiplist/getting-started/main.vue b/vue-options-api-demos/buttons/chiplist/getting-started/main.vue
new file mode 100644
index 00000000..4bfcb961
--- /dev/null
+++ b/vue-options-api-demos/buttons/chiplist/getting-started/main.vue
@@ -0,0 +1,58 @@
+<template>
+    <div>
+        <div>
+            <h4>Order meal:</h4>
+            <buttongroup class="meals" selection="'single'">
+            <kbutton v-for="m in meals"
+                :togglable="true"
+                :key="m.name"
+                :selected="meal.name === m.name"
+                @click="(e) => handleClick(m.name)"
+                >
+                <span>{{m.icon}}</span>
+                {{m.name}}
+            </kbutton>
+            </buttongroup>
+        </div>
+        <div class="separator mt-3">
+            <h4>Add more:</h4>
+            <chiplist
+            :rounded="'full'"
+            :key="meal.name"
+            :selection="'multiple'"
+            :default-data-items="meal.data"
+            :text-field="'name'"
+            :value-field="'name'"
+                />
+        </div>
+    </div>
+</template>
+<script>
+import { ChipList, ButtonGroup, Button } from '@progress/kendo-vue-buttons';
+
+const meals = [
+    { name: 'Pizza', icon: '🍕', data: [{ name: 'Ketchup' }, { name: "Mustard" }, { name: 'Mayonnaise' }] },
+    { name: 'Sushi', icon: '🍣', data: [{ name: 'Wasabi' }, { name: 'Ginger' }, { name: 'Soy sauce' }] },
+    { name: 'Burger', icon: '🍔', data: [{ name: 'Onions' }, { name: 'Avocado' }, { name: 'Eggs' }] }
+];
+
+
+export default {
+    components: {
+        'chiplist': ChipList,
+        'kbutton': Button,
+        'buttongroup': ButtonGroup
+    },
+    data () {
+        return {
+            meals: meals,
+            meal:  meals[0]
+        };
+    },
+    methods: {
+        handleClick(name) {
+            this.meal = this.meals.find((m) => m.name === name);
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/buttons/chiplist/keyboard/CustomChip.vue b/vue-options-api-demos/buttons/chiplist/keyboard/CustomChip.vue
new file mode 100644
index 00000000..c9e8239c
--- /dev/null
+++ b/vue-options-api-demos/buttons/chiplist/keyboard/CustomChip.vue
@@ -0,0 +1,23 @@
+<template>
+  <chip
+  :rounded="'full'"
+     :data-item="dataItem"
+    :text="text"
+    :value="value"
+    :removable="true"/>
+</template>
+<script>
+import { Chip } from '@progress/kendo-vue-buttons';
+
+export default {
+    name: 'CustomChip',
+    components: {
+        'chip': Chip,
+    },
+    props: {
+        dataItem: Object,
+        value: String,
+        text: String
+    }
+}
+</script>
diff --git a/vue-options-api-demos/buttons/chiplist/keyboard/main.js b/vue-options-api-demos/buttons/chiplist/keyboard/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/chiplist/keyboard/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/chiplist/keyboard/main.vue b/vue-options-api-demos/buttons/chiplist/keyboard/main.vue
new file mode 100644
index 00000000..e566ba61
--- /dev/null
+++ b/vue-options-api-demos/buttons/chiplist/keyboard/main.vue
@@ -0,0 +1,60 @@
+<template>
+    <chiplist
+         :rounded="'full'"
+        :default-data-items="fruitsData"
+        :selection="'multiple'"
+        :chip="chip">
+         <template v-slot:myTemplate="{props}">
+            <custom
+            :data-item="props.dataItem"
+            :value="props.value"
+            :text="props.text"/>
+        </template>
+    </chiplist>
+</template>
+<script>
+import { ChipList } from '@progress/kendo-vue-buttons';
+import CustomChip from './CustomChip.vue';
+
+const fruitsData = [
+    {
+        text: 'Berry',
+        value: 'berry',
+        disabled: true
+    },
+    {
+        text: 'Apple',
+        value: 'apple',
+        disabled: true
+    },
+    {
+        text: 'Strawberry',
+        value: 'strawberry',
+        disabled: true
+    },
+    {
+        text: 'Banana',
+        value: 'banana',
+        disabled: true
+    },
+    {
+        text: 'Kiwi',
+        value: 'kiwi',
+        disabled: true
+    }
+];
+
+export default {
+    components: {
+        'chiplist': ChipList,
+        'custom': CustomChip
+    },
+    data () {
+        return {
+            fruitsData: fruitsData,
+            chip: 'myTemplate'
+        };
+    },
+
+}
+</script>
diff --git a/vue-options-api-demos/buttons/chiplist/selection/multiple/main.js b/vue-options-api-demos/buttons/chiplist/selection/multiple/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/chiplist/selection/multiple/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/chiplist/selection/multiple/main.vue b/vue-options-api-demos/buttons/chiplist/selection/multiple/main.vue
new file mode 100644
index 00000000..8b384e49
--- /dev/null
+++ b/vue-options-api-demos/buttons/chiplist/selection/multiple/main.vue
@@ -0,0 +1,48 @@
+<template>
+    <chiplist
+         :rounded="'full'"
+        :default-data-items="fruits"
+        :selection="'multiple'">
+    </chiplist>
+</template>
+<script>
+import { ChipList } from '@progress/kendo-vue-buttons';
+
+const fruits = [
+    {
+        text: 'Berry',
+        value: 'berry',
+        disabled: true
+    },
+    {
+        text: 'Apple',
+        value: 'apple',
+        disabled: true
+    },
+    {
+        text: 'Strawberry',
+        value: 'strawberry',
+        disabled: true
+    },
+    {
+        text: 'Banana',
+        value: 'banana',
+        disabled: true
+    },
+    {
+        text: 'Kiwi',
+        value: 'kiwi',
+        disabled: true
+    }
+];
+export default {
+     components: {
+        'chiplist': ChipList
+    },
+    data () {
+        return {
+            fruits: fruits,
+        };
+    }
+}
+</script>
diff --git a/vue-options-api-demos/buttons/chiplist/selection/none/main.js b/vue-options-api-demos/buttons/chiplist/selection/none/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/chiplist/selection/none/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/chiplist/selection/none/main.vue b/vue-options-api-demos/buttons/chiplist/selection/none/main.vue
new file mode 100644
index 00000000..416d1398
--- /dev/null
+++ b/vue-options-api-demos/buttons/chiplist/selection/none/main.vue
@@ -0,0 +1,48 @@
+<template>
+    <chiplist
+         :rounded="'full'"
+        :default-data-items="fruits">
+    </chiplist>
+</template>
+<script>
+import { ChipList } from '@progress/kendo-vue-buttons';
+
+const fruits = [
+    {
+        text: 'Berry',
+        value: 'berry',
+        disabled: true
+    },
+    {
+        text: 'Apple',
+        value: 'apple',
+        disabled: true
+    },
+    {
+        text: 'Strawberry',
+        value: 'strawberry',
+        disabled: true
+    },
+    {
+        text: 'Banana',
+        value: 'banana',
+        disabled: true
+    },
+    {
+        text: 'Kiwi',
+        value: 'kiwi',
+        disabled: true
+    }
+];
+
+export default {
+     components: {
+        'chiplist': ChipList
+    },
+    data () {
+        return {
+            fruits: fruits,
+        };
+    }
+}
+</script>
diff --git a/vue-options-api-demos/buttons/chiplist/selection/single/main.js b/vue-options-api-demos/buttons/chiplist/selection/single/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/chiplist/selection/single/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/chiplist/selection/single/main.vue b/vue-options-api-demos/buttons/chiplist/selection/single/main.vue
new file mode 100644
index 00000000..eace1f85
--- /dev/null
+++ b/vue-options-api-demos/buttons/chiplist/selection/single/main.vue
@@ -0,0 +1,49 @@
+<template>
+    <chiplist
+        :rounded="'full'"
+        :default-data-items="fruits"
+        :selection="'single'">
+    </chiplist>
+</template>
+<script>
+import { ChipList } from '@progress/kendo-vue-buttons';
+
+const fruits = [
+    {
+        text: 'Berry',
+        value: 'berry',
+        disabled: true
+    },
+    {
+        text: 'Apple',
+        value: 'apple',
+        disabled: true
+    },
+    {
+        text: 'Strawberry',
+        value: 'strawberry',
+        disabled: true
+    },
+    {
+        text: 'Banana',
+        value: 'banana',
+        disabled: true
+    },
+    {
+        text: 'Kiwi',
+        value: 'kiwi',
+        disabled: true
+    }
+];
+
+export default {
+     components: {
+        'chiplist': ChipList
+    },
+    data () {
+        return {
+            fruits: fruits,
+        };
+    }
+}
+</script>
diff --git a/vue-options-api-demos/buttons/dropdownbutton/appearance/configurator/ButtonsStyleConfigurator.vue b/vue-options-api-demos/buttons/dropdownbutton/appearance/configurator/ButtonsStyleConfigurator.vue
new file mode 100644
index 00000000..17dd70df
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/appearance/configurator/ButtonsStyleConfigurator.vue
@@ -0,0 +1,189 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span v-if="shape !== undefined" class="k-form-field">
+        <k-label>
+          Shape
+          <div class="k-form-field-wrap">
+            <kbuttongroup>
+              <kbutton
+                v-for="(shapeElelement, index) in shapes"
+                :key="index"
+                :togglable="true"
+                :selected="shapeElelement === shape"
+                @click="handleShapeChange(shapeElelement)"
+              >
+                {{ shapeElelement || "None" }}
+              </kbutton>
+            </kbuttongroup>
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Theme Color
+          <div class="k-form-field-wrap">
+            <dropdownlist
+              :data-items="themeColors"
+              :value="themeColor"
+              :item-render="'colorItemRender'"
+              :style="{
+                'min-width': '150px',
+              }"
+              @change="handleThemeColorChange"
+            >
+              <template v-slot:colorItemRender="{ props }">
+                <li
+                  :class="props.itemClass"
+                  @click="(ev) => props.onClick(ev)"
+                  :style="{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                  }"
+                >
+                  {{ props.dataItem }}{{ ' ' }}
+                  <span
+                    :style="{
+                      width: '16px',
+                      height: '16px',
+                      background: 'currentColor',
+                      display: 'inline-block',
+                    }"
+                    :class="['k-color-' + props.dataItem]"
+                  ></span>
+                </li>
+              </template>
+            </dropdownlist>
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Fill Mode
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="fillModes"
+              :value="fillMode"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleFillModeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { ButtonGroup, Button } from "@progress/kendo-vue-buttons";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    "kbutton": Button,
+    "k-buttongroup": ButtonGroup,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    shape: String,
+    size: String,
+    themeColor: String,
+    fillMode: String,
+    rounded: String,
+  },
+  emits: [
+    "shapechange",
+    "sizechange",
+    "themecolorchange",
+    "fillmodechange",
+    "roundedchange",
+  ],
+  data() {
+    return {
+      shapes: ["rectangle", "square"],
+      sizes: ["small", "medium", "large"],
+      themeColors: [
+        "base",
+        "primary",
+        "secondary",
+        "tertiary",
+        "info",
+        "success",
+        "warning",
+        "error",
+        "dark",
+        "light",
+        "inverse",
+      ],
+      fillModes: ["solid", "outline", "flat", "link"],
+      roundedOptions: ["small", "medium", "large", "full"],
+    };
+  },
+  methods: {
+    handleShapeChange(shape) {
+      this.$emit("shapechange", shape);
+    },
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleThemeColorChange(event) {
+      this.$emit("themecolorchange", event);
+    },
+    handleFillModeChange(event) {
+      this.$emit("fillmodechange", event);
+    },
+    handleRoundedChange(event) {
+      this.$emit("roundedchange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/dropdownbutton/appearance/configurator/main.js b/vue-options-api-demos/buttons/dropdownbutton/appearance/configurator/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/appearance/configurator/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/dropdownbutton/appearance/configurator/main.vue b/vue-options-api-demos/buttons/dropdownbutton/appearance/configurator/main.vue
new file mode 100644
index 00000000..3a56d99a
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/appearance/configurator/main.vue
@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <ButtonsStyleConfigurator
+      :shape="shape"
+      @shapechange="setShape"
+      :size="size"
+      @sizechange="setSize"
+      :theme-color="themeColor"
+      @themecolorchange="setThemeColor"
+      :fill-mode="fillMode"
+      @fillmodechange="setFillMode"
+      :rounded="rounded"
+      @roundedchange="setRounded"
+    />
+    <DropDownButton
+      :shape="shape"
+      :size="size"
+      :themeColor="themeColor"
+      :fillMode="fillMode"
+      :rounded="rounded"
+      :items="items"
+      :text="'Edit'"
+    />
+  </div>
+</template>
+
+<script>
+import {
+  DropDownButton,
+} from "@progress/kendo-vue-buttons";
+import ButtonsStyleConfigurator from "./ButtonsStyleConfigurator.vue";
+import {
+  undoIcon,
+  redoIcon,
+  cutIcon,
+  copyIcon,
+  clipboardIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    ButtonsStyleConfigurator,
+    DropDownButton,
+  },
+  data() {
+    return {
+      items: [
+        {
+          text: "Undo",
+          svgIcon: undoIcon,
+        },
+        {
+          text: "Redo",
+          svgIcon: redoIcon,
+          disabled: true,
+        },
+        {
+          text: "Cut",
+          svgIcon: cutIcon,
+        },
+        {
+          text: "Copy",
+          svgIcon: copyIcon,
+        },
+        {
+          text: "Paste",
+          svgIcon: clipboardIcon,
+        },
+      ],
+      shape: "rectangle",
+      size: "medium",
+      themeColor: "base",
+      fillMode: "solid",
+      rounded: "medium",
+    };
+  },
+  methods: {
+    handleDataChange(event) {
+      this.people = event.value;
+    },
+    setShape(shape) {
+      this.shape = shape;
+    },
+    setSize(event) {
+      this.size = event.value;
+    },
+    setThemeColor(event) {
+      this.themeColor = event.value;
+    },
+    setFillMode(event) {
+      this.fillMode = event.value;
+    },
+    setRounded(event) {
+      this.rounded = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/dropdownbutton/appearance/fill-mode/main.js b/vue-options-api-demos/buttons/dropdownbutton/appearance/fill-mode/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/appearance/fill-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/dropdownbutton/appearance/fill-mode/main.vue b/vue-options-api-demos/buttons/dropdownbutton/appearance/fill-mode/main.vue
new file mode 100644
index 00000000..e435f41f
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/appearance/fill-mode/main.vue
@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <span class="chip-wrapper">
+      <DropDownButton :items="items" :text="'Solid'" :fill-mode="'solid'" />
+    </span>
+    <span class="chip-wrapper">
+      <DropDownButton
+        :items="items"
+        :text="'Flat'"
+        :fill-mode="'flat'"
+      />
+    </span>
+    <span class="chip-wrapper">
+      <DropDownButton
+        :items="items"
+        :text="'Outline'"
+        :fill-mode="'outline'"
+      />
+    </span>
+    <span class="chip-wrapper">
+      <DropDownButton
+        :items="items"
+        :text="'Link'"
+        :fill-mode="'link'"
+      />
+    </span>
+  </div>
+</template>
+
+<script>
+import { DropDownButton } from '@progress/kendo-vue-buttons';
+import {
+  undoIcon,
+  redoIcon,
+  cutIcon,
+  copyIcon,
+  clipboardIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    DropDownButton,
+  },
+  data() {
+    return {
+      items: [
+        {
+          text: "Undo",
+          svgIcon: undoIcon,
+        },
+        {
+          text: "Redo",
+          svgIcon: redoIcon,
+          disabled: true,
+        },
+        {
+          text: "Cut",
+          svgIcon: cutIcon,
+        },
+        {
+          text: "Copy",
+          svgIcon: copyIcon,
+        },
+        {
+          text: "Paste",
+          svgIcon: clipboardIcon,
+        },
+      ],
+    };
+  },
+};
+</script>
+<style>
+.chip-wrapper {
+  padding: 20px;
+}
+</style>
diff --git a/vue-options-api-demos/buttons/dropdownbutton/appearance/rounded/main.js b/vue-options-api-demos/buttons/dropdownbutton/appearance/rounded/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/appearance/rounded/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/dropdownbutton/appearance/rounded/main.vue b/vue-options-api-demos/buttons/dropdownbutton/appearance/rounded/main.vue
new file mode 100644
index 00000000..cf73a4b1
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/appearance/rounded/main.vue
@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <span class="chip-wrapper">
+      <DropDownButton :items="items" :text="'No roundness'" />
+    </span>
+    <span class="chip-wrapper">
+      <DropDownButton
+        :rounded="'small'"
+        :items="items"
+        :text="'Small roundness'"
+      />
+    </span>
+    <span class="chip-wrapper">
+      <DropDownButton
+        :rounded="'medium'"
+        :items="items"
+        :text="'Medium roundness'"
+      />
+    </span>
+    <br />
+    <br />
+    <span class="chip-wrapper">
+      <DropDownButton
+        :rounded="'large'"
+        :items="items"
+        :text="'Large roundness'"
+      />
+    </span>
+    <span class="chip-wrapper">
+      <DropDownButton
+        :rounded="'full'"
+        :items="items"
+        :text="'Full roundness'"
+      />
+    </span>
+    <span class="chip-wrapper">
+      <DropDownButton
+        :size="null"
+        :items="items"
+        :text="'Custom roundness'"
+        :class="'custom-roundness'"
+      />
+    </span>
+  </div>
+</template>
+
+<script>
+import { DropDownButton } from '@progress/kendo-vue-buttons';
+import {
+  undoIcon,
+  redoIcon,
+  cutIcon,
+  copyIcon,
+  clipboardIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    DropDownButton,
+  },
+  data() {
+    return {
+      items: [
+        {
+          text: "Undo",
+          svgIcon: undoIcon,
+        },
+        {
+          text: "Redo",
+          svgIcon: redoIcon,
+          disabled: true,
+        },
+        {
+          text: "Cut",
+          svgIcon: cutIcon,
+        },
+        {
+          text: "Copy",
+          svgIcon: copyIcon,
+        },
+        {
+          text: "Paste",
+          svgIcon: clipboardIcon,
+        },
+      ],
+    };
+  },
+};
+</script>
+<style>
+.custom-roundness > .k-button {
+  border-top-right-radius: 15px;
+  border-top-left-radius: 15px;
+}
+
+.chip-wrapper {
+  padding: 20px;
+}
+</style>
diff --git a/vue-options-api-demos/buttons/dropdownbutton/appearance/shape/main.js b/vue-options-api-demos/buttons/dropdownbutton/appearance/shape/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/appearance/shape/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/dropdownbutton/appearance/shape/main.vue b/vue-options-api-demos/buttons/dropdownbutton/appearance/shape/main.vue
new file mode 100644
index 00000000..3b10f8f2
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/appearance/shape/main.vue
@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <span class="chip-wrapper">
+      <DropDownButton
+        :shape="'rectangle'"
+        :items="items"
+        :text="'Rectangle shape'"
+      />
+    </span>
+    <span class="chip-wrapper">
+      <DropDownButton :shape="'square'" :items="items" :text="'Square shape'" />
+    </span>
+  </div>
+</template>
+
+<script>
+import { DropDownButton } from '@progress/kendo-vue-buttons';
+import {
+  undoIcon,
+  redoIcon,
+  cutIcon,
+  copyIcon,
+  clipboardIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    DropDownButton,
+  },
+  data() {
+    return {
+      items: [
+        {
+          text: "Undo",
+          svgIcon: undoIcon,
+        },
+        {
+          text: "Redo",
+          svgIcon: redoIcon,
+          disabled: true,
+        },
+        {
+          text: "Cut",
+          svgIcon: cutIcon,
+        },
+        {
+          text: "Copy",
+          svgIcon: copyIcon,
+        },
+        {
+          text: "Paste",
+          svgIcon: clipboardIcon,
+        },
+      ],
+    };
+  },
+};
+</script>
+<style>
+.chip-wrapper {
+  padding: 20px;
+}
+</style>
diff --git a/vue-options-api-demos/buttons/dropdownbutton/appearance/size/main.js b/vue-options-api-demos/buttons/dropdownbutton/appearance/size/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/appearance/size/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/dropdownbutton/appearance/size/main.vue b/vue-options-api-demos/buttons/dropdownbutton/appearance/size/main.vue
new file mode 100644
index 00000000..6d941b03
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/appearance/size/main.vue
@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <span class="chip-wrapper">
+      <DropDownButton :size="'small'" :items="items" :text="'Small Size'" />
+    </span>
+    <span class="chip-wrapper">
+      <DropDownButton :size="'medium'" :items="items" :text="'Medium Size'" />
+    </span>
+    <span class="chip-wrapper">
+      <DropDownButton :size="'large'" :items="items" :text="'Large Size'" />
+    </span>
+    <span class="chip-wrapper">
+      <DropDownButton
+        :size="null"
+        :items="items"
+        :text="'Custom Size'"
+        :class="'custom-size'"
+      />
+    </span>
+  </div>
+</template>
+
+<script>
+import { DropDownButton } from '@progress/kendo-vue-buttons';
+import {
+  undoIcon,
+  redoIcon,
+  cutIcon,
+  copyIcon,
+  clipboardIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    DropDownButton,
+  },
+  data() {
+    return {
+      items: [
+        {
+          text: "Undo",
+          svgIcon: undoIcon,
+        },
+        {
+          text: "Redo",
+          svgIcon: redoIcon,
+          disabled: true,
+        },
+        {
+          text: "Cut",
+          svgIcon: cutIcon,
+        },
+        {
+          text: "Copy",
+          svgIcon: copyIcon,
+        },
+        {
+          text: "Paste",
+          svgIcon: clipboardIcon,
+        },
+      ],
+    };
+  },
+};
+</script>
+<style>
+.custom-size > .k-button {
+  padding: 20px 20px;
+}
+
+.chip-wrapper {
+  padding: 20px;
+}
+</style>
diff --git a/vue-options-api-demos/buttons/dropdownbutton/appearance/theme-colors/main.js b/vue-options-api-demos/buttons/dropdownbutton/appearance/theme-colors/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/appearance/theme-colors/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/dropdownbutton/appearance/theme-colors/main.vue b/vue-options-api-demos/buttons/dropdownbutton/appearance/theme-colors/main.vue
new file mode 100644
index 00000000..af68a223
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/appearance/theme-colors/main.vue
@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <span class="chip-wrapper">
+      <DropDownButton :items="items" :text="'base'" :theme-color="'base'" />
+    </span>
+    <span class="chip-wrapper">
+      <DropDownButton
+        :items="items"
+        :text="'primary'"
+        :theme-color="'primary'"
+      />
+    </span>
+    <span class="chip-wrapper">
+      <DropDownButton
+        :items="items"
+        :text="'secondary'"
+        :theme-color="'secondary'"
+      />
+    </span>
+    <span class="chip-wrapper">
+      <DropDownButton
+        :items="items"
+        :text="'tertiary'"
+        :theme-color="'tertiary'"
+      />
+    </span>
+    <br />
+    <br />
+    <span class="chip-wrapper">
+      <DropDownButton :items="items" :text="'info'" :theme-color="'info'" />
+    </span>
+    <span class="chip-wrapper">
+      <DropDownButton
+        :items="items"
+        :text="'success'"
+        :theme-color="'success'"
+      />
+    </span>
+    <span class="chip-wrapper">
+      <DropDownButton
+        :items="items"
+        :text="'warning'"
+        :theme-color="'warning'"
+      />
+    </span>
+    <span class="chip-wrapper">
+      <DropDownButton :items="items" :text="'error'" :theme-color="'error'" />
+    </span>
+    <br />
+    <br />
+    <span class="chip-wrapper">
+      <DropDownButton :items="items" :text="'dark'" :theme-color="'dark'" />
+    </span>
+    <span class="chip-wrapper">
+      <DropDownButton :items="items" :text="'light'" :theme-color="'light'" />
+    </span>
+    <span class="chip-wrapper">
+      <DropDownButton
+        :items="items"
+        :text="'inverse'"
+        :theme-color="'inverse'"
+      />
+    </span>
+    <span class="chip-wrapper">
+      <DropDownButton
+        :items="items"
+        :text="'custom'"
+        :theme-color="null"
+        :class="'custom-color'"
+      />
+    </span>
+  </div>
+</template>
+
+<script>
+import { DropDownButton } from '@progress/kendo-vue-buttons';
+import {
+  undoIcon,
+  redoIcon,
+  cutIcon,
+  copyIcon,
+  clipboardIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    DropDownButton,
+  },
+  data() {
+    return {
+      items: [
+        {
+          text: "Undo",
+          svgIcon: undoIcon,
+        },
+        {
+          text: "Redo",
+          svgIcon: redoIcon,
+          disabled: true,
+        },
+        {
+          text: "Cut",
+          svgIcon: cutIcon,
+        },
+        {
+          text: "Copy",
+          svgIcon: copyIcon,
+        },
+        {
+          text: "Paste",
+          svgIcon: clipboardIcon,
+        },
+      ],
+    };
+  },
+};
+</script>
+<style>
+.chip-wrapper {
+  padding: 20px;
+}
+
+.custom-color {
+  background-color: green;
+  color: orange;
+}
+</style>
diff --git a/vue-options-api-demos/buttons/dropdownbutton/customization/items/main.js b/vue-options-api-demos/buttons/dropdownbutton/customization/items/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/customization/items/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/dropdownbutton/customization/items/main.vue b/vue-options-api-demos/buttons/dropdownbutton/customization/items/main.vue
new file mode 100644
index 00000000..2a6dd363
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/customization/items/main.vue
@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <dropdownbutton :item-render="itemRender" :items="items" :text="'Export'">
+      <template v-slot:itemRender="{ props }">
+        <div class="k-link k-menu-link">
+          <SvgIcon :icon="props.item.svgIcon" />
+          <em>{{ `action #${props.itemIndex}: ${props.item.text}` }}</em>
+        </div>
+      </template>
+    </dropdownbutton>
+  </div>
+</template>
+
+<script>
+import { DropDownButton } from "@progress/kendo-vue-buttons";
+import { filePdfIcon, fileExcelIcon } from "@progress/kendo-svg-icons";
+import { SvgIcon } from "@progress/kendo-vue-common";
+
+export default {
+  components: {
+    dropdownbutton: DropDownButton,
+    SvgIcon,
+  },
+  data: function () {
+    return {
+      items: [
+        {
+          text: "To PDF",
+          svgIcon: filePdfIcon,
+        },
+        {
+          text: "To Excel",
+          svgIcon: fileExcelIcon,
+        },
+        {
+          text: "Other",
+        },
+      ],
+      itemRender: "itemRender",
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/dropdownbutton/customization/popup/main.js b/vue-options-api-demos/buttons/dropdownbutton/customization/popup/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/customization/popup/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/dropdownbutton/customization/popup/main.vue b/vue-options-api-demos/buttons/dropdownbutton/customization/popup/main.vue
new file mode 100644
index 00000000..248ab9b7
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/customization/popup/main.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <DropDownButton
+      :popup-settings="popupSettings"
+      :items="items"
+      :text="'User Settings'"
+    />
+  </div>
+</template>
+
+<script>
+import { DropDownButton } from "@progress/kendo-vue-buttons";
+
+export default {
+  components: {
+    DropDownButton,
+  },
+  data: function () {
+    return {
+      popupSettings: {
+        animate: false,
+        popupClass: "'my-popup'",
+      },
+      items: [
+        "My Profile",
+        "Friend Requests",
+        "Account Settings",
+        "Support",
+        "Log Out",
+      ],
+    };
+  },
+};
+</script>
+
+<style scoped>
+.my-popup {
+  font-style: oblique;
+}
+</style>
\ No newline at end of file
diff --git a/vue-options-api-demos/buttons/dropdownbutton/data-binding/objects/main.js b/vue-options-api-demos/buttons/dropdownbutton/data-binding/objects/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/data-binding/objects/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/dropdownbutton/data-binding/objects/main.vue b/vue-options-api-demos/buttons/dropdownbutton/data-binding/objects/main.vue
new file mode 100644
index 00000000..50e2bfd7
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/data-binding/objects/main.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <DropDownButton :text-field="'actionName'" :items="items" :text="'Edit'" />
+  </div>
+</template>
+
+<script>
+import { DropDownButton } from "@progress/kendo-vue-buttons";
+import {
+  undoIcon,
+  redoIcon,
+  cutIcon,
+  copyIcon,
+  clipboardIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    DropDownButton,
+  },
+  data: function () {
+    return {
+      items: [
+        {
+          actionName: "Undo",
+          svgIcon: undoIcon,
+        },
+        {
+          actionName: "Redo",
+          svgIcon: redoIcon,
+          disabled: true,
+        },
+        {
+          actionName: "Cut",
+          svgIcon: cutIcon,
+        },
+        {
+          actionName: "Copy",
+          svgIcon: copyIcon,
+        },
+        {
+          actionName: "Paste",
+          svgIcon: clipboardIcon,
+        },
+      ],
+    };
+  },
+};
+</script>
+
diff --git a/vue-options-api-demos/buttons/dropdownbutton/data-binding/strings/main.js b/vue-options-api-demos/buttons/dropdownbutton/data-binding/strings/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/data-binding/strings/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/dropdownbutton/data-binding/strings/main.vue b/vue-options-api-demos/buttons/dropdownbutton/data-binding/strings/main.vue
new file mode 100644
index 00000000..b5e6b650
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/data-binding/strings/main.vue
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <DropDownButton :items="items" :text="'Edit'" />
+  </div>
+</template>
+
+<script>
+import { DropDownButton } from "@progress/kendo-vue-buttons";
+import {
+  undoIcon,
+  redoIcon,
+  cutIcon,
+  copyIcon,
+  clipboardIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    DropDownButton,
+  },
+  data: function () {
+    return {
+      items: [
+        {
+          text: "Undo",
+          svgIcon: undoIcon,
+        },
+        {
+          text: "Redo",
+          svgIcon: redoIcon,
+        },
+        {
+          text: "Cut",
+          svgIcon: cutIcon,
+        },
+        {
+          text: "Copy",
+          svgIcon: copyIcon,
+        },
+        {
+          text: "Paste",
+          svgIcon: clipboardIcon,
+        },
+      ],
+    };
+  },
+};
+</script>
+
diff --git a/vue-options-api-demos/buttons/dropdownbutton/disabled/main.js b/vue-options-api-demos/buttons/dropdownbutton/disabled/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/dropdownbutton/disabled/main.vue b/vue-options-api-demos/buttons/dropdownbutton/disabled/main.vue
new file mode 100644
index 00000000..e1b50920
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/disabled/main.vue
@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <DropDownButton :items="items" :text="'Enabled Button'" /> &nbsp;
+    <DropDownButton :disabled="true" :items="items" :text="'Disabled Button'" />
+  </div>
+</template>
+
+<script>
+import { DropDownButton } from "@progress/kendo-vue-buttons";
+
+export default {
+  components: {
+    DropDownButton,
+  },
+  data: function () {
+    return {
+      items: ["Item1", "Item2", "Item3"],
+    };
+  },
+};
+</script>
+
diff --git a/vue-options-api-demos/buttons/dropdownbutton/events/Logger.vue b/vue-options-api-demos/buttons/dropdownbutton/events/Logger.vue
new file mode 100644
index 00000000..aa04a80b
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/events/Logger.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="example-config">
+    <h5>{{ title }}</h5>
+    <ul class="event-log">
+      <li v-for="(event, idx) in events" :key="idx">{{ event }}</li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    events: Array,
+    title: String,
+  },
+};
+</script>
+
+<style scoped>
+.example-config {
+  margin: 0 0 20px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+  margin: 0;
+  padding: 0;
+  max-height: 100px;
+  overflow-y: auto;
+  list-style-type: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: white;
+}
+.event-log li {
+  margin: 0;
+  padding: 0.3em;
+  line-height: 1.2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+  margin-bottom: -1px;
+}
+</style>
\ No newline at end of file
diff --git a/vue-options-api-demos/buttons/dropdownbutton/events/main.js b/vue-options-api-demos/buttons/dropdownbutton/events/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/events/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/buttons/dropdownbutton/events/main.vue b/vue-options-api-demos/buttons/dropdownbutton/events/main.vue
new file mode 100644
index 00000000..bba3f0ab
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/events/main.vue
@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <DropDownButton
+      :text-field="'actionName'"
+      :items="items"
+      :text="'Edit'"
+      @itemclick="onItemClick"
+      @focus="onFocus"
+      @blur="onBlur"
+      @open="onOpen"
+      @close="onClose"
+    />
+    <br/>
+    <br/>
+    <Logger :title="'Events list'" :events="eventsList" />
+  </div>
+</template>
+
+<script>
+import { DropDownButton } from "@progress/kendo-vue-buttons";
+import {
+  undoIcon,
+  redoIcon,
+  cutIcon,
+  copyIcon,
+  clipboardIcon,
+} from "@progress/kendo-svg-icons";
+import Logger from "./Logger.vue";
+
+export default {
+  components: {
+    DropDownButton,
+    Logger,
+  },
+  computed: {
+    eventsList() {
+      return this.events;
+    },
+  },
+  data: function () {
+    return {
+      events: [],
+      items: [
+        {
+          actionName: "Undo",
+          svgIcon: undoIcon,
+        },
+        {
+          actionName: "Redo",
+          svgIcon: redoIcon,
+          disabled: true,
+        },
+        {
+          actionName: "Cut",
+          svgIcon: cutIcon,
+        },
+        {
+          actionName: "Copy",
+          svgIcon: copyIcon,
+        },
+        {
+          actionName: "Paste",
+          svgIcon: clipboardIcon,
+        },
+      ],
+    };
+  },
+  methods: {
+    onItemClick() {
+      this.events.unshift("Item Click event triggered");
+    },
+    onFocus() {
+      this.events.unshift("Focus event triggered");
+    },
+    onBlur() {
+      this.events.unshift("Blur event triggered");
+    },
+    onOpen() {
+      this.events.unshift("Open event triggered");
+    },
+    onClose() {
+      this.events.unshift("Close event triggered");
+    },
+  },
+};
+</script>
+
diff --git a/vue-options-api-demos/buttons/dropdownbutton/icons/main.js b/vue-options-api-demos/buttons/dropdownbutton/icons/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/icons/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/dropdownbutton/icons/main.vue b/vue-options-api-demos/buttons/dropdownbutton/icons/main.vue
new file mode 100644
index 00000000..59a2fb9c
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/icons/main.vue
@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"
+    />
+
+    <div class="row example-wrapper">
+      <div class="col-xs-12 col-sm-6 example-col">
+        <p>Kendo UI for Vue font icon</p>
+        <DropDownButton
+          :items="settings"
+          :svg-icon="gearIcon"
+          :text="'User Settings'"
+        />
+        <DropDownButton :items="settings" :svg-icon="gearIcon" />
+      </div>
+      <div class="col-xs-12 col-sm-6 example-col">
+        <p>FontAwеsome icon</p>
+        <DropDownButton
+          :items="settings"
+          :icon-class="'fa fa-cog fa-fw'"
+          :text="'User Settings'"
+        />
+        <DropDownButton :items="settings" :icon-class="'fa fa-cog fa-fw'" />
+      </div>
+      <div class="col-xs-12 col-sm-6 example-col">
+        <p>Image icon</p>
+        <DropDownButton
+          :items="bookmarks"
+          :imageUrl="imageUrl"
+          :text="'Bookmarks'"
+        />
+        <DropDownButton :items="bookmarks" :image-url="imageUrl" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { DropDownButton } from "@progress/kendo-vue-buttons";
+import { gearIcon } from "@progress/kendo-svg-icons";
+const starIcon = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/panelbar/icons/star.png';
+
+export default {
+  components: {
+    DropDownButton,
+  },
+  data: function () {
+    return {
+      gearIcon,
+      settings: [
+        {
+          text: "My Profile",
+        },
+        {
+          text: "Friend Requests",
+        },
+        {
+          text: "Account Settings",
+        },
+        {
+          text: "Support",
+        },
+        {
+          text: "Log Out",
+        },
+      ],
+      imageUrl: starIcon,
+      bookmarks: [
+        {
+          text: "Show All",
+        },
+        {
+          text: "Bookmark This Page",
+        },
+        {
+          text: "Import",
+        },
+        {
+          text: "Export",
+        },
+      ],
+    };
+  },
+};
+</script>
+
diff --git a/vue-options-api-demos/buttons/dropdownbutton/keyboard/main.js b/vue-options-api-demos/buttons/dropdownbutton/keyboard/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/keyboard/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/dropdownbutton/keyboard/main.vue b/vue-options-api-demos/buttons/dropdownbutton/keyboard/main.vue
new file mode 100644
index 00000000..fea78d8d
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/keyboard/main.vue
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <DropDownButton :text-field="'actionName'" :items="items" :text="'Edit'" />
+  </div>
+</template>
+
+<script>
+import { DropDownButton } from "@progress/kendo-vue-buttons";
+import {
+  undoIcon,
+  redoIcon,
+  cutIcon,
+  copyIcon,
+  clipboardIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    DropDownButton,
+  },
+  data: function () {
+    return {
+      items: [
+        {
+          actionName: "Undo",
+          svgIcon: undoIcon,
+        },
+        {
+          actionName: "Redo",
+          svgIcon: redoIcon,
+        },
+        {
+          actionName: "Cut",
+          svgIcon: cutIcon,
+        },
+        {
+          actionName: "Copy",
+          svgIcon: copyIcon,
+        },
+        {
+          actionName: "Paste",
+          svgIcon: clipboardIcon,
+        },
+      ],
+    };
+  },
+};
+</script>
+
diff --git a/vue-options-api-demos/buttons/dropdownbutton/overview/main.js b/vue-options-api-demos/buttons/dropdownbutton/overview/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/dropdownbutton/overview/main.vue b/vue-options-api-demos/buttons/dropdownbutton/overview/main.vue
new file mode 100644
index 00000000..96a317f7
--- /dev/null
+++ b/vue-options-api-demos/buttons/dropdownbutton/overview/main.vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <div class="row example-wrapper">
+      <div class="col-xs-12 col-sm-6 example-col">
+        <p>Default Button</p>
+        <DropDownButton :text="'User Settings'" :items="items" />
+      </div>
+      <div class="col-xs-12 col-sm-6 example-col">
+        <p>Primary Button</p>
+        <DropDownButton
+          :text="'User Settings'"
+          :items="items"
+          :theme-color="'primary'"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-6 example-col">
+        <p>Outline Button</p>
+        <DropDownButton
+          :text="'User Settings'"
+          :items="items"
+          :fill-mode="'outline'"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-6 example-col">
+        <p>Flat Button</p>
+        <DropDownButton :text="'User Settings'" :items="items" :fill-mode="'flat'" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { DropDownButton } from "@progress/kendo-vue-buttons";
+
+export default {
+  components: {
+    DropDownButton,
+  },
+  data: function () {
+    return {
+      items: [
+        "My Profile",
+        "Friend Requests",
+        "Account Settings",
+        "Support",
+        "Log Out",
+      ],
+    };
+  },
+};
+</script>
+
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/align-offset/main.js b/vue-options-api-demos/buttons/floatingactionbutton/align-offset/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/align-offset/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/align-offset/main.vue b/vue-options-api-demos/buttons/floatingactionbutton/align-offset/main.vue
new file mode 100644
index 00000000..d6db7e3e
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/align-offset/main.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="example">
+    <div class="row">
+      <div class="col-6">
+        <p>Horizontal offset</p>
+        <numerictextbox :style="{ width: '230px' }" v-model="xValue" />
+      </div>
+      <div class="col-6">
+        <p>Vertical offset</p>
+        <numerictextbox :style="{ width: '230px' }" v-model="yValue" />
+      </div>
+    </div>
+
+    <fab :alignOffset="{ x: xValue, y: yValue }" :svg-icon="homeIcon" />
+  </div>
+</template>
+<script>
+import { FloatingActionButton } from "@progress/kendo-vue-buttons";
+import { NumericTextBox } from "@progress/kendo-vue-inputs";
+import { homeIcon } from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    numerictextbox: NumericTextBox,
+    fab: FloatingActionButton,
+  },
+  data() {
+    return {
+      homeIcon,
+      yValue: 16,
+      xValue: 16,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/appearance/configurator/FloatingActionButtonConfigurator.vue b/vue-options-api-demos/buttons/floatingactionbutton/appearance/configurator/FloatingActionButtonConfigurator.vue
new file mode 100644
index 00000000..86374a2d
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/appearance/configurator/FloatingActionButtonConfigurator.vue
@@ -0,0 +1,139 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+      >Configurator</span>
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+            <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Roundness
+          <div class="k-form-field-wrap">
+            <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Theme Color
+          <div class="k-form-field-wrap">
+            <dropdownlist
+              :data-items="themeColors"
+              :value="themeColor"
+              :item-render="'colorItemRender'"
+              :style="{
+                'min-width': '150px',
+              }"
+              @change="handleThemeColorChange"
+            >
+              <template v-slot:colorItemRender="{ props }">
+                <li
+                  :class="props.itemClass"
+                  @click="(ev) => props.onClick(ev)"
+                  :style="{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                  }"
+                >
+                  {{ props.dataItem }}{{ ' ' }}
+                  <span
+                    :style="{
+                      width: '16px',
+                      height: '16px',
+                      background: 'currentColor',
+                      display: 'inline-block',
+                    }"
+                    :class="['k-color-' + props.dataItem]"
+                  ></span>
+                </li>
+              </template>
+            </dropdownlist>
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from '@progress/kendo-vue-labels';
+import { ButtonGroup, Button } from '@progress/kendo-vue-buttons';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  components: {
+    'k-label': Label,
+    kbutton: Button,
+    kbuttongroup: ButtonGroup,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+    themeColor: String,
+    rounded: String,
+  },
+  emits: ['sizechange', 'themecolorchange', 'roundedchange'],
+  data() {
+    return {
+      sizes: ['small', 'medium', 'large'],
+      themeColors: [
+        'base',
+        'primary',
+        'secondary',
+        'tertiary',
+        'info',
+        'success',
+        'warning',
+        'error',
+        'dark',
+        'light',
+        'inverse',
+      ],
+      roundedOptions: ['small', 'medium', 'large', 'full'],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit('sizechange', event);
+    },
+    handleThemeColorChange(event) {
+      this.$emit('themecolorchange', event);
+    },
+    handleRoundedChange(event) {
+      this.$emit('roundedchange', event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/appearance/configurator/main.js b/vue-options-api-demos/buttons/floatingactionbutton/appearance/configurator/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/appearance/configurator/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/appearance/configurator/main.vue b/vue-options-api-demos/buttons/floatingactionbutton/appearance/configurator/main.vue
new file mode 100644
index 00000000..c7c23c2e
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/appearance/configurator/main.vue
@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <FloatingActionButtonConfigurator
+      :size="size"
+      @sizechange="setSize"
+      :theme-color="themeColor"
+      @themecolorchange="setThemeColor"
+      :rounded="rounded"
+      @roundedchange="setRounded"
+    />
+    <floatingactionbutton
+      :size="size"
+      :theme-color="themeColor"
+      :rounded="rounded"
+      :svg-icon="shareIcon"
+      :text="'Floating Action Button'"
+      :align="{ horizontal: 'center', vertical: 'middle' }"
+    >
+    </floatingactionbutton>
+  </div>
+</template>
+
+<script>
+import { FloatingActionButton } from "@progress/kendo-vue-buttons";
+import { shareIcon } from "@progress/kendo-svg-icons";
+import FloatingActionButtonConfigurator from "./FloatingActionButtonConfigurator.vue";
+
+export default {
+  components: {
+    FloatingActionButtonConfigurator,
+    floatingactionbutton: FloatingActionButton,
+  },
+  data() {
+    return {
+      shareIcon,
+      size: "medium",
+      themeColor: "primary",
+      rounded: "medium",
+    };
+  },
+  methods: {
+    setSize(event) {
+      this.size = event.value;
+    },
+    setThemeColor(event) {
+      this.themeColor = event.value;
+    },
+    setRounded(event) {
+      this.rounded = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/appearance/rounded/main.js b/vue-options-api-demos/buttons/floatingactionbutton/appearance/rounded/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/appearance/rounded/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/appearance/rounded/main.vue b/vue-options-api-demos/buttons/floatingactionbutton/appearance/rounded/main.vue
new file mode 100644
index 00000000..8eb82ee6
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/appearance/rounded/main.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="example-wrap">
+    <fab
+      :text="'No roundness'"
+      :rounded="null"
+      :align="{ horizontal: 'start', vertical: 'top' }"
+    >
+    </fab>
+    <fab
+      :text="'Small roundness'"
+      :rounded="'small'"
+      :align="{ horizontal: 'center', vertical: 'top' }"
+    >
+    </fab>
+    <fab
+      :text="'Medium roundness'"
+      :rounded="'medium'"
+      :align="{ horizontal: 'end', vertical: 'top' }"
+    >
+    </fab>
+    <fab
+      :text="'Large roundness'"
+      :rounded="'large'"
+      :align="{ horizontal: 'start', vertical: 'bottom' }"
+    >
+    </fab>
+    <fab
+      :text="'Full roundness'"
+      :rounded="'full'"
+      :align="{ horizontal: 'center', vertical: 'bottom' }"
+    >
+    </fab>
+    <fab
+      :text="'Custom roundness'"
+      :rounded="null"
+      :class="'custom-fab'"
+      :align="{ horizontal: 'end', vertical: 'bottom' }"
+    >
+    </fab>
+  </div>
+</template>
+<script>
+import { FloatingActionButton } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    fab: FloatingActionButton,
+  },
+};
+</script>
+
+<style scoped>
+.custom-fab button {
+  border-bottom-right-radius: 15px;
+  border-top-left-radius: 15px;
+}
+</style>
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/appearance/size/main.js b/vue-options-api-demos/buttons/floatingactionbutton/appearance/size/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/appearance/size/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/appearance/size/main.vue b/vue-options-api-demos/buttons/floatingactionbutton/appearance/size/main.vue
new file mode 100644
index 00000000..c5d357c3
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/appearance/size/main.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class="example-wrap">
+      <fab
+        :text="'Small'"
+        :svg-icon="pencilIcon"
+        :size="'small'"
+        :align="{ horizontal: 'start', vertical: 'bottom' }"
+      ></fab>
+      <fab
+        :text="'Medium'"
+        :svg-icon="pencilIcon"
+        :size="'medium'"
+        :align="{ horizontal: 'center', vertical: 'bottom' }"
+      ></fab>
+      <fab
+        :text="'Large'"
+        :svg-icon="pencilIcon"
+        :size="'large'"
+        :align="{ horizontal: 'end', vertical: 'bottom' }"
+      ></fab>
+      <fab
+        :svg-icon="pencilIcon"
+        :text="'Custom'"
+        :size="null"
+        :class="'custom-fab'"
+        :align="{ horizontal: 'end', vertical: 'top' }"
+      ></fab>
+    </div>
+  </template>
+  <script>
+  import { FloatingActionButton } from "@progress/kendo-vue-buttons";
+  import { pencilIcon } from "@progress/kendo-svg-icons";
+  
+  export default {
+    components: {
+      fab: FloatingActionButton,
+    },
+    data() {
+      return {
+        pencilIcon,
+      };
+    },
+  };
+  </script>
+  <style>
+  .custom-fab button {
+    padding: 10px 30px;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/appearance/theme/main.js b/vue-options-api-demos/buttons/floatingactionbutton/appearance/theme/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/appearance/theme/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/appearance/theme/main.vue b/vue-options-api-demos/buttons/floatingactionbutton/appearance/theme/main.vue
new file mode 100644
index 00000000..4aa6f3af
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/appearance/theme/main.vue
@@ -0,0 +1,56 @@
+<template>
+    <div class="example-wrap">
+      <span v-for="theme in themeColors">
+        <fab
+          :key="theme"
+          :theme-color="theme"
+          :svg-icon="checkIcon"
+          :position-mode="'absolute'"
+        >
+        </fab>
+      </span>
+    </div>
+  </template>
+  <script>
+  import { FloatingActionButton } from "@progress/kendo-vue-buttons";
+  import { checkIcon } from "@progress/kendo-svg-icons";
+  
+  const themeColors = [
+    "primary",
+    "secondary",
+    "tertiary",
+    "inherit",
+    "info",
+    "success",
+    "error",
+    "warning",
+    "dark",
+    "light",
+    "inverse",
+  ];
+  
+  export default {
+    components: {
+      fab: FloatingActionButton,
+    },
+    data() {
+      return {
+        checkIcon,
+        themeColors,
+      };
+    },
+  };
+  </script>
+  <style>
+  .example-wrap {
+    flex-wrap: wrap;
+    display: flex;
+    flex-direction: row;
+  }
+  .example-wrap > span {
+    position: relative;
+    width: 80px;
+    margin-top: 90px;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/content-types/main.js b/vue-options-api-demos/buttons/floatingactionbutton/content-types/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/content-types/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/content-types/main.vue b/vue-options-api-demos/buttons/floatingactionbutton/content-types/main.vue
new file mode 100644
index 00000000..1bcccde8
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/content-types/main.vue
@@ -0,0 +1,47 @@
+<template>
+    <div class="example">
+      <dropdownlist
+        :style="{ width: '230px' }"
+        :data-items="contentTypes"
+        :value="type"
+        :text-field="'title'"
+        :value-field="'id'"
+        @change="handleChange"
+      ></dropdownlist>
+      <fab
+        :svg-icon="type.id !== 2 ? plusIcon : undefined"
+        :text="type.id !== 0 ? 'Add new' : undefined"
+      ></fab>
+    </div>
+  </template>
+  <script>
+  import { FloatingActionButton } from "@progress/kendo-vue-buttons";
+  import { DropDownList } from "@progress/kendo-vue-dropdowns";
+  import { plusIcon } from "@progress/kendo-svg-icons";
+  
+  const contentTypes = [
+    { title: "Icon", id: 0 },
+    { title: "Icon & Text", id: 1 },
+    { title: "Text", id: 2 },
+  ];
+  
+  export default {
+    components: {
+      fab: FloatingActionButton,
+      dropdownlist: DropDownList,
+    },
+    data() {
+      return {
+        plusIcon,
+        contentTypes,
+        type: { title: "Icon", id: 0 },
+      };
+    },
+    methods: {
+      handleChange(e) {
+        this.type = e.target.value;
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/disabled/main.js b/vue-options-api-demos/buttons/floatingactionbutton/disabled/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/disabled/main.vue b/vue-options-api-demos/buttons/floatingactionbutton/disabled/main.vue
new file mode 100644
index 00000000..30db4164
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/disabled/main.vue
@@ -0,0 +1,35 @@
+<template>
+    <div>
+      <kbutton @click="handleClick">{{
+        disabled ? "Enable" : "Disable"
+      }}</kbutton>
+      <fab
+        :svg-icon="checkIcon"
+        :disabled="disabled"
+        :align="{ vertical: 'bottom', horizontal: 'start' }"
+      ></fab>
+    </div>
+  </template>
+  <script>
+  import { Button, FloatingActionButton } from "@progress/kendo-vue-buttons";
+  import { checkIcon } from "@progress/kendo-svg-icons";
+  
+  export default {
+    components: {
+      kbutton: Button,
+      fab: FloatingActionButton,
+    },
+    data() {
+      return {
+        checkIcon,
+        disabled: true,
+      };
+    },
+    methods: {
+      handleClick() {
+        this.disabled = !this.disabled;
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/events/main.js b/vue-options-api-demos/buttons/floatingactionbutton/events/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/events/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/events/main.vue b/vue-options-api-demos/buttons/floatingactionbutton/events/main.vue
new file mode 100644
index 00000000..827106ac
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/events/main.vue
@@ -0,0 +1,53 @@
+<template>
+ <div>
+        <fab
+            :items="items"
+            :icon="'gear'"
+            :align="{ horizontal: 'start', vertical: 'top' }"
+            @itemclick="handleDomEvent('item click')"
+            @focus="handleDomEvent('focus')"
+            @blur="handleDomEvent('blur')"
+            @open="handleDomEvent('open')"
+            @close="handleDomEvent('close')"
+            @keydown="handleDomEvent('key down')"
+                />
+            <div class="example-config" :style="{ marginTop: '60px' }">
+              <h5>{{title}}</h5>
+              <ul class="event-log" :style="{ textAlign: 'right' }">
+                <li v-for="log in logs" :key="log">{{log}}</li>
+              </ul>
+            </div>
+          </div>
+</template>
+<script>
+import { FloatingActionButton } from '@progress/kendo-vue-buttons';
+import {
+    plusIcon,
+    pencilIcon,
+    trashIcon,
+} from "@progress/kendo-svg-icons";
+
+const items = [
+    { svgIcon: plusIcon, text: 'Create' },
+    { svgIcon: pencilIcon, text: 'Edit' },
+    { svgIcon: trashIcon, text: 'Delete' }
+];
+
+export default {
+    components: {
+        fab: FloatingActionButton
+    },
+    data () {
+        return {
+            title: 'Event Log',
+            items: items,
+            logs: []
+        };
+    },
+     methods: {
+       handleDomEvent (eventType) {
+          this.logs.unshift(eventType);
+       }
+     }
+}
+</script>
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/icons/main.js b/vue-options-api-demos/buttons/floatingactionbutton/icons/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/icons/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/icons/main.vue b/vue-options-api-demos/buttons/floatingactionbutton/icons/main.vue
new file mode 100644
index 00000000..74930bdb
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/icons/main.vue
@@ -0,0 +1,34 @@
+<template>
+    <div>
+      <fab
+        :svg-icon="bellIcon"
+        :align="{ vertical: 'bottom', horizontal: 'start' }"
+      ></fab>
+      <fab
+        :svg-icon="calendarIcon"
+        :text="'New Event'"
+        :align="{ vertical: 'bottom', horizontal: 'center' }"
+      ></fab>
+      <fab
+        :text="'Scroll to Top'"
+        :align="{ vertical: 'bottom', horizontal: 'end' }"
+      ></fab>
+    </div>
+  </template>
+  <script>
+  import { FloatingActionButton } from "@progress/kendo-vue-buttons";
+  import { bellIcon, calendarIcon } from "@progress/kendo-svg-icons";
+  
+  export default {
+    components: {
+      fab: FloatingActionButton,
+    },
+    data() {
+      return {
+        bellIcon,
+        calendarIcon,
+      };
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/items/custom/custom-rendering/CustomItem.vue b/vue-options-api-demos/buttons/floatingactionbutton/items/custom/custom-rendering/CustomItem.vue
new file mode 100644
index 00000000..92cb27df
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/items/custom/custom-rendering/CustomItem.vue
@@ -0,0 +1,21 @@
+<template>
+    <span class="contact-item">
+    <div class="k-avatar k-avatar-solid k-avatar-circle k-avatar-primary k-avatar-md">
+    <span class="k-avatar-image">
+        <img :src="dataItem.image" :alt="'Avatar Image'"/>
+    </span>
+    </div>
+    <span class="contact-details">
+        <span class="contact-name">{{dataItem.name}}</span>
+        <span class="contact-role">{{dataItem.role}}</span>
+    </span>
+    </span>
+</template>
+<script>
+export default {
+    name: 'CustomItem',
+    props: {
+        dataItem: Object,
+    },
+}
+</script>
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/items/custom/custom-rendering/main.js b/vue-options-api-demos/buttons/floatingactionbutton/items/custom/custom-rendering/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/items/custom/custom-rendering/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/items/custom/custom-rendering/main.vue b/vue-options-api-demos/buttons/floatingactionbutton/items/custom/custom-rendering/main.vue
new file mode 100644
index 00000000..68b586d2
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/items/custom/custom-rendering/main.vue
@@ -0,0 +1,84 @@
+<template>
+    <div class="example">
+      <fab
+        :svg-icon="pencilIcon"
+        :text="'Compose New'"
+        :shape="'rectangle'"
+        :theme-color="'info'"
+        :items="contacts"
+        :item="customItem"
+        :popup-settings="{ animate: false, popupClass: 'contacts-list' }"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <custom :data-item="props.dataItem" />
+        </template>
+      </fab>
+    </div>
+  </template>
+  <script>
+  import { FloatingActionButton } from "@progress/kendo-vue-buttons";
+  import { pencilIcon } from "@progress/kendo-svg-icons";
+  import CustomItem from "./CustomItem.vue";
+
+  const mallroyImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/listview/contacts/7.png';
+  const miaImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/listview/contacts/4.png';
+  const darrelImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/listview/contacts/1.png';
+
+  const contacts = [
+    {
+        name: 'Mallory Gillian',
+        image: mallroyImage,
+        role: 'UX Designer'
+    },
+    {
+        name: 'Mia Coldwell',
+        image: miaImage,
+        role: 'Senior Director'
+    },
+    {
+        name: 'Darrel Solis',
+        image: darrelImage,
+        role: 'Product Manager'
+    }
+];
+
+  export default {
+    components: {
+      fab: FloatingActionButton,
+      custom: CustomItem,
+    },
+    data() {
+      return {
+        pencilIcon,
+        contacts,
+        customItem: "myTemplate",
+      };
+    },
+  };
+  </script>
+  <style>
+  .contacts-list li.k-fab-item {
+    margin-bottom: 0;
+    padding: 0;
+    border: 1px solid #f1f1f1;
+  }
+  .contacts-list .k-fab-items {
+    padding: 0;
+    width: 145px;
+  }
+  .contact-item {
+    width: 100%;
+    display: flex;
+    align-items: center;
+  }
+  .contact-details {
+    margin-left: 8px;
+    display: flex;
+    flex-direction: column;
+    line-height: initial;
+  }
+  .contact-role {
+    font-size: 10px;
+    color: #0058e9;
+  }
+  </style>
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/items/custom/popup/main.js b/vue-options-api-demos/buttons/floatingactionbutton/items/custom/popup/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/items/custom/popup/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/items/custom/popup/main.vue b/vue-options-api-demos/buttons/floatingactionbutton/items/custom/popup/main.vue
new file mode 100644
index 00000000..97684411
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/items/custom/popup/main.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="example">
+    <fab
+      :popup-settings="{ animate: false, popupClass: 'my-popup' }"
+      :items="items"
+      :svg-icon="shareIcon"
+    />
+  </div>
+</template>
+<script>
+import { FloatingActionButton } from "@progress/kendo-vue-buttons";
+import {
+  shareIcon,
+  twitterIcon,
+  facebookIcon,
+  pinterestIcon,
+} from "@progress/kendo-svg-icons";
+
+const items = [
+  {
+    text: "Twitter",
+    svgIcon: twitterIcon,
+  },
+  {
+    text: "Facebook",
+    svgIcon: facebookIcon,
+  },
+  {
+    text: "Pinterest",
+    svgIcon: pinterestIcon,
+  },
+];
+
+export default {
+  components: {
+    fab: FloatingActionButton,
+  },
+  data() {
+    return {
+      shareIcon,
+      items,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/items/databinding/main.js b/vue-options-api-demos/buttons/floatingactionbutton/items/databinding/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/items/databinding/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/items/databinding/main.vue b/vue-options-api-demos/buttons/floatingactionbutton/items/databinding/main.vue
new file mode 100644
index 00000000..4350df8f
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/items/databinding/main.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="example">
+    <fab :items="items" :svg-icon="gearIcon" />
+  </div>
+</template>
+<script>
+import { FloatingActionButton } from "@progress/kendo-vue-buttons";
+import {
+  gearIcon,
+  plusIcon,
+  pencilIcon,
+  trashIcon,
+} from "@progress/kendo-svg-icons";
+
+const items = [
+  { svgIcon: plusIcon, text: "Create" },
+  { svgIcon: pencilIcon, text: "Edit" },
+  { svgIcon: trashIcon, text: "Delete" },
+];
+
+export default {
+  components: {
+    fab: FloatingActionButton,
+  },
+  data() {
+    return {
+      gearIcon,
+      items: items,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/items/disabled/main.js b/vue-options-api-demos/buttons/floatingactionbutton/items/disabled/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/items/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/items/disabled/main.vue b/vue-options-api-demos/buttons/floatingactionbutton/items/disabled/main.vue
new file mode 100644
index 00000000..501ca05f
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/items/disabled/main.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="example">
+    <fab :items="items" :svg-icon="shareIcon" />
+  </div>
+</template>
+<script>
+import { FloatingActionButton } from "@progress/kendo-vue-buttons";
+import { shareIcon, userIcon } from "@progress/kendo-svg-icons";
+
+const items = [
+  { svgIcon: userIcon, text: "Adam" },
+  { svgIcon: userIcon, text: "Ellie", disabled: true },
+  { svgIcon: userIcon, text: "Paul" },
+];
+
+export default {
+  components: {
+    fab: FloatingActionButton,
+  },
+  data() {
+    return {
+      shareIcon,
+      items,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/keyboard/main.js b/vue-options-api-demos/buttons/floatingactionbutton/keyboard/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/keyboard/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/keyboard/main.vue b/vue-options-api-demos/buttons/floatingactionbutton/keyboard/main.vue
new file mode 100644
index 00000000..c8d32c51
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/keyboard/main.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="example">
+    <fab :items="items" :svg-icon="shareIcon" />
+  </div>
+</template>
+<script>
+import { FloatingActionButton } from "@progress/kendo-vue-buttons";
+import {
+  shareIcon,
+  twitterIcon,
+  facebookIcon,
+  pinterestIcon,
+} from "@progress/kendo-svg-icons";
+
+const items = [
+  {
+    text: "Twitter",
+    svgIcon: twitterIcon,
+  },
+  {
+    text: "Facebook",
+    svgIcon: facebookIcon,
+  },
+  {
+    text: "Pinterest",
+    svgIcon: pinterestIcon,
+  },
+];
+
+export default {
+  components: {
+    fab: FloatingActionButton,
+  },
+  data() {
+    return {
+      shareIcon,
+      items,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/overview/CustomItem.vue b/vue-options-api-demos/buttons/floatingactionbutton/overview/CustomItem.vue
new file mode 100644
index 00000000..92cb27df
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/overview/CustomItem.vue
@@ -0,0 +1,21 @@
+<template>
+    <span class="contact-item">
+    <div class="k-avatar k-avatar-solid k-avatar-circle k-avatar-primary k-avatar-md">
+    <span class="k-avatar-image">
+        <img :src="dataItem.image" :alt="'Avatar Image'"/>
+    </span>
+    </div>
+    <span class="contact-details">
+        <span class="contact-name">{{dataItem.name}}</span>
+        <span class="contact-role">{{dataItem.role}}</span>
+    </span>
+    </span>
+</template>
+<script>
+export default {
+    name: 'CustomItem',
+    props: {
+        dataItem: Object,
+    },
+}
+</script>
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/overview/main.js b/vue-options-api-demos/buttons/floatingactionbutton/overview/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/overview/main.vue b/vue-options-api-demos/buttons/floatingactionbutton/overview/main.vue
new file mode 100644
index 00000000..b882486d
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/overview/main.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="example-wrap">
+    <div class="k-card k-card-vertical">
+      <img
+        :src="grassImage"
+        class="k-card-media"
+        :alt="'Card Image'"
+      />
+      <div class="k-card-body">
+        <fab
+          :text="'Add to Queue'"
+          :svg-icon="added ? checkIcon : undefined"
+          :align="{ horizontal: 'end', vertical: 'top' }"
+          :alignOffset="{ y: 175 }"
+          :positionMode="'absolute'"
+          @click="handleClick"
+        />
+        <h2 class="k-card-title">Summer Mix 2020</h2>
+        <p class="k-card-subtitle">DJ Peril</p>
+      </div>
+    </div>
+    <div class="notes-wrap k-block">
+      <div v-if="open" class="k-overlay" />
+      <h2 class="title">Notes:</h2>
+      <ktextarea :value="text" />
+      <fab
+        :svg-icon="open ? xIcon : shareIcon"
+        :items="contacts"
+        :item="customItem"
+        :position-mode="'absolute'"
+        @open="handleOpen"
+        @close="handleClose"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <custom :data-item="props.dataItem" />
+        </template>
+      </fab>
+    </div>
+  </div>
+</template>
+<script>
+import { FloatingActionButton } from "@progress/kendo-vue-buttons";
+import { TextArea } from "@progress/kendo-vue-inputs";
+import { checkIcon, xIcon, shareIcon } from "@progress/kendo-svg-icons";
+import CustomItem from "./CustomItem.vue";
+
+const grassImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/5.jpg';
+const mallroyImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/listview/contacts/7.png';
+const miaImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/listview/contacts/4.png';
+const darrelImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/listview/contacts/1.png';
+
+const contacts = [
+  {
+    name: "Mallory Gillian",
+    image: mallroyImage,
+  },
+  {
+    name: "Mia Coldwell",
+    image: miaImage,
+  },
+  {
+    name: "Darrel Solis",
+    image: darrelImage,
+  },
+];
+
+export default {
+  components: {
+    fab: FloatingActionButton,
+    custom: CustomItem,
+    ktextarea: TextArea,
+  },
+  data() {
+    return {
+      grassImage,
+      checkIcon,
+      xIcon,
+      shareIcon,
+      contacts,
+      added: true,
+      open: false,
+      text:
+        'I renamed my iPod The Titanic, so when I plug in it, it says "The Titanic is syncing."',
+      customItem: "myTemplate",
+    };
+  },
+  methods: {
+    handleClick() {
+      this.added = !this.added;
+    },
+    handleOpen() {
+      this.open = true;
+    },
+    handleClose() {
+      this.open = false;
+    },
+  },
+};
+</script>
+<style>
+.example-wrap {
+  display: flex;
+  justify-content: space-around;
+}
+.k-card {
+  width: 350px;
+  height: auto;
+  position: relative;
+}
+.k-card-media {
+  height: 200px;
+}
+.k-card button.k-fab:focus {
+  outline: none;
+}
+.title {
+  font-size: 18px;
+  color: #656565;
+}
+.notes-wrap {
+  padding: 50px 20px 50px 20px;
+  position: relative;
+  height: 300px;
+}
+.notes-wrap textarea.k-textarea {
+  height: 100px;
+  resize: none;
+}
+.k-overlay {
+  position: absolute;
+}
+.notes-wrap .k-pos-absolute,
+.k-animation-container {
+  z-index: 10003;
+}
+</style>
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/position-mode/main.js b/vue-options-api-demos/buttons/floatingactionbutton/position-mode/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/position-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/position-mode/main.vue b/vue-options-api-demos/buttons/floatingactionbutton/position-mode/main.vue
new file mode 100644
index 00000000..049d3a1a
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/position-mode/main.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="example" :style="{ position: 'relative' }">
+    <dropdownlist
+      :style="{ width: '230px' }"
+      :data-items="positionModes"
+      :text-field="'text'"
+      :value-field="'value'"
+      :value="positionMode"
+      @change="handleChange"
+    />
+
+    <div class="mt-3">
+      <p>
+        National Parks protect some of our nation’s most beautiful and
+        remarkable landscapes. There’s no denying that National Parks are a
+        primary go to destination for millions of Americans. However, nearby
+        National Forests often go unnoticed by the millions of visitors driving
+        by on route to some of our nation’s best-known natural landmarks. These
+        surrounding National Forest landscapes can be just as grand. They
+        provide similar vistas, wildlife viewing, and camping options but lack
+        the crowds and expense that come with visiting a National Park. As
+        you're planning your next trip to a National Park - whether it's
+        Yellowstone, Shenandoah, Zion - keep these things in mind:
+      </p>
+      <ul>
+        <li>
+          Some National Parks require an entrance fee; many National Forest
+          recreation areas do not.
+        </li>
+        <li>
+          Camping in a National Park can be expensive and competitive.
+          Backcountry camping typically requires obtaining additional permits as
+          well. National Forest campgrounds are more economical, less crowded
+          and dispersed or backcountry camping is usually free.
+        </li>
+        <li>
+          Dogs must be leashed or restrained at all times in a National Park and
+          leashes cannot exceed six feet in length.
+        </li>
+        <li>
+          So, this summer be sure to make a stop at our National Parks and our
+          National Forests.
+        </li>
+        <li>
+          NFF Blog post: What are the differences between National Forests and
+          National Parks?
+        </li>
+      </ul>
+    </div>
+    <fab
+      :position-mode="positionMode.value"
+      :svg-icon="plusIcon"
+      :text="'Create New'"
+    />
+  </div>
+</template>
+<script>
+import { FloatingActionButton } from "@progress/kendo-vue-buttons";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+import { plusIcon } from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    dropdownlist: DropDownList,
+    fab: FloatingActionButton,
+  },
+  data() {
+    return {
+      plusIcon,
+      positionMode: { value: "fixed", text: "Fixed" },
+      positionModes: [
+        { value: "fixed", text: "Fixed" },
+        { value: "absolute", text: "Absolute" },
+      ],
+    };
+  },
+  methods: {
+    handleChange(e) {
+      this.positionMode = e.target.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/positioning/main.js b/vue-options-api-demos/buttons/floatingactionbutton/positioning/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/positioning/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/floatingactionbutton/positioning/main.vue b/vue-options-api-demos/buttons/floatingactionbutton/positioning/main.vue
new file mode 100644
index 00000000..adb9ff0c
--- /dev/null
+++ b/vue-options-api-demos/buttons/floatingactionbutton/positioning/main.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="example">
+    <fab
+      v-for="align in alignments"
+      :align="align"
+      :key="align"
+      :svg-icon="userIcon"
+      :items="items"
+    ></fab>
+  </div>
+</template>
+<script>
+import { FloatingActionButton } from "@progress/kendo-vue-buttons";
+import {
+  userIcon,
+  plusIcon,
+  pencilIcon,
+  trashIcon,
+} from "@progress/kendo-svg-icons";
+const alignments = [
+  { vertical: "top", horizontal: "start" },
+  { vertical: "top", horizontal: "center" },
+  { vertical: "top", horizontal: "end" },
+  { vertical: "middle", horizontal: "start" },
+  { vertical: "middle", horizontal: "end" },
+  { vertical: "bottom", horizontal: "start" },
+  { vertical: "bottom", horizontal: "center" },
+  { vertical: "bottom", horizontal: "end" },
+];
+
+const items = [
+  { svgIcon: plusIcon, text: "Create" },
+  { svgIcon: pencilIcon, text: "Edit" },
+  { svgIcon: trashIcon, text: "Delete" },
+];
+
+export default {
+  components: {
+    fab: FloatingActionButton,
+  },
+  data() {
+    return {
+      userIcon,
+      alignments: alignments,
+      items: items,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/overview/CustomChip.vue b/vue-options-api-demos/buttons/overview/CustomChip.vue
new file mode 100644
index 00000000..b017d16b
--- /dev/null
+++ b/vue-options-api-demos/buttons/overview/CustomChip.vue
@@ -0,0 +1,33 @@
+<template>
+    <chip
+      :data-item="dataItem"
+      :text="text"
+      :value="value"
+      :removable="true"
+      :avatar="'avatar'"
+    >
+      <template v-slot:avatar>
+        <Avatar :type="'image'" :rounded="'full'" :size="'small'">
+          <img :src="dataItem.imageURL" alt="image" />
+        </Avatar>
+      </template>
+    </chip>
+  </template>
+  <script>
+  import { Chip } from '@progress/kendo-vue-buttons';
+  import { Avatar } from '@progress/kendo-vue-layout';
+  
+  export default {
+    name: 'CustomChip',
+    components: {
+      chip: Chip,
+      Avatar,
+    },
+    props: {
+      dataItem: Object,
+      value: String,
+      text: String,
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/buttons/overview/main.js b/vue-options-api-demos/buttons/overview/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/overview/main.vue b/vue-options-api-demos/buttons/overview/main.vue
new file mode 100644
index 00000000..5ccc6d5a
--- /dev/null
+++ b/vue-options-api-demos/buttons/overview/main.vue
@@ -0,0 +1,241 @@
+<template>
+  <div class="example-wrapper">
+    <div class="example-col">
+      <p>Button</p>
+      <KButton>Default</KButton>
+      <KButton :theme-color="'primary'">Primary</KButton>
+      <KButton :disabled="true">Disabled</KButton>
+    </div>
+    <div class="example-col">
+      <p>ButtonGroup</p>
+      <ButtonGroup>
+        <KButton :togglable="true"> Option A </KButton>
+        <KButton :togglable="true"> Option B </KButton>
+        <KButton :togglable="true"> Option C </KButton>
+      </ButtonGroup>
+    </div>
+    <div class="example-col">
+      <p>DropDownButton</p>
+      <DropDownButton
+        :text-field="'actionName'"
+        :svg-icon="gearIcon"
+        :items="dropDownButtonItems"
+        :text="'Edit'"
+      ></DropDownButton>
+    </div>
+    <div class="example-col">
+      <p>SplitButton</p>
+      <SplitButton
+        :text="'Paste'"
+        :svg-icon="clipboardIcon"
+        :items="splitButtonItems"
+      >
+      </SplitButton>
+    </div>
+    <div>
+      <p>Toolbar</p>
+      <Toolbar>
+        <ButtonGroup>
+          <KButton
+            :svg-icon="boldIcon"
+            :title="'Bold'"
+            :togglable="true"
+          ></KButton>
+          <KButton
+            :svg-icon="italicIcon"
+            :title="'Italic'"
+            :togglable="true"
+          ></KButton>
+          <KButton
+            :svg-icon="underlineIcon"
+            :title="'Underline'"
+            :togglable="true"
+          ></KButton>
+        </ButtonGroup>
+        <ToolbarSeparator />
+        <ButtonGroup>
+          <KButton
+            :svg-icon="alignLeftIcon"
+            :title="'Align Left'"
+            :togglable="true"
+          ></KButton>
+          <KButton
+            :svg-icon="alignCenterIcon"
+            :title="'Align Center'"
+            :togglable="true"
+          ></KButton>
+          <KButton
+            :svg-icon="alignRightIcon"
+            :title="'Align Right'"
+            :togglable="true"
+          ></KButton>
+          <KButton
+            :svg-icon="alignJustifyIcon"
+            :title="'Align Justify'"
+            :togglable="true"
+          ></KButton>
+        </ButtonGroup>
+        <ToolbarSeparator />
+        <KButton :svg-icon="cutIcon" :title="'Cut'">Cut</KButton>
+        <ToolbarSeparator />
+        <KButton :svg-icon="copyIcon" :title="'Copy'">Copy</KButton>
+        <ToolbarSeparator />
+        <KButton :svg-icon="clipboardIcon" :title="'Paste'">Paste</KButton>
+      </Toolbar>
+      <p>Chip and ChipList</p>
+      <ChipList
+        :rounded="'full'"
+        :default-data-items="people"
+        :selection="'single'"
+        :chip="chip"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <custom
+            :data-item="props.dataItem"
+            :value="props.value"
+            :text="props.text"
+          />
+        </template>
+      </ChipList>
+    </div>
+    <div class="example-col">
+      <FloatingActionButton
+        :svg-icon="checkIcon"
+        :text="'Floating Action Button'"
+        :align="{ horizontal: 'start', vertical: 'bottom' }"
+      ></FloatingActionButton>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  Button,
+  ButtonGroup,
+  ChipList,
+  Toolbar,
+  DropDownButton,
+  FloatingActionButton,
+  ToolbarSeparator,
+  SplitButton,
+} from '@progress/kendo-vue-buttons';
+
+import {
+  boldIcon,
+  underlineIcon,
+  italicIcon,
+  alignJustifyIcon,
+  alignRightIcon,
+  alignCenterIcon,
+  alignLeftIcon,
+  cutIcon,
+  copyIcon,
+  clipboardIcon,
+  gearIcon,
+  checkIcon,
+  undoIcon,
+  redoIcon,
+  clipboardMarkdownIcon,
+  clipboardHtmlIcon,
+} from '@progress/kendo-svg-icons';
+import CustomChip from './CustomChip.vue';
+
+const PedroAfonsoImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/SPLIR.jpg';
+const ThomasHardyImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/RICSU.jpg';
+const ChristinaBergImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/BERGS.jpg';
+const PaulaWilsonImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/RATTC.jpg';
+
+const people = [
+  {
+    text: 'Pedro Afonso',
+    value: 'pedro',
+    icon: 'pedro',
+    imageURL: PedroAfonsoImage,
+  },
+  {
+    text: 'Thomas Hardy',
+    value: 'thomas',
+    icon: 'thomas',
+    imageURL: ThomasHardyImage,
+  },
+  {
+    text: 'Christina Berg',
+    value: 'christina',
+    icon: 'christina',
+    imageURL: ChristinaBergImage,
+  },
+  {
+    text: 'Paula Wilson',
+    value: 'paula',
+    icon: 'k-chip-avatar paula',
+    imageURL: PaulaWilsonImage,
+  },
+];
+
+const editItems = [
+  {
+    actionName: 'Undo',
+    svgIcon: undoIcon,
+  },
+  {
+    actionName: 'Redo',
+    svgIcon: redoIcon,
+    disabled: true,
+  },
+  {
+    actionName: 'Cut',
+    svgIcon: cutIcon,
+  },
+  {
+    actionName: 'Copy',
+    svgIcon: copyIcon,
+  },
+  {
+    actionName: 'Paste',
+    svgIcon: clipboardIcon,
+  },
+];
+
+const pasteItems = [
+  { text: 'Keep Text Only', svgIcon: clipboardIcon },
+  { text: 'Paste as HTML', svgIcon: clipboardHtmlIcon },
+  { text: 'Paste Markdown', svgIcon: clipboardMarkdownIcon },
+  { text: 'Set Default Paste' },
+];
+
+export default {
+  components: {
+    KButton: Button,
+    ButtonGroup,
+    FloatingActionButton,
+    ChipList,
+    custom: CustomChip,
+    DropDownButton,
+    Toolbar,
+    ToolbarSeparator,
+    SplitButton,
+  },
+  data() {
+    return {
+      undoIcon,
+      boldIcon,
+      underlineIcon,
+      italicIcon,
+      alignJustifyIcon,
+      alignRightIcon,
+      alignCenterIcon,
+      alignLeftIcon,
+      cutIcon,
+      copyIcon,
+      gearIcon,
+      checkIcon,
+      clipboardIcon,
+      clipboardHtmlIcon,
+      clipboardMarkdownIcon,
+      people: people,
+      chip: 'myTemplate',
+      dropDownButtonItems: editItems,
+      splitButtonItems: pasteItems,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/rtl/main.js b/vue-options-api-demos/buttons/rtl/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/rtl/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/rtl/main.vue b/vue-options-api-demos/buttons/rtl/main.vue
new file mode 100644
index 00000000..9184178e
--- /dev/null
+++ b/vue-options-api-demos/buttons/rtl/main.vue
@@ -0,0 +1,210 @@
+<template>
+  <div class="example-wrapper">
+    <div class="example-col">
+      <p>Button</p>
+      <KButton :svg-icon="arrowRotateCwIcon" :dir="'rtl'"
+        >Refresh &nbsp;</KButton
+      >
+      &nbsp;
+      <KButton :svg-icon="searchIcon" :dir="'rtl'" :theme-color="'primary'"
+        >Search &nbsp;</KButton
+      >
+    </div>
+    <div class="example-col">
+      <p>ButtonGroup</p>
+      <ButtonGroup :dir="'rtl'">
+        <KButton>Option A</KButton>
+        <KButton>Option B</KButton>
+        <KButton>Option C</KButton>
+      </ButtonGroup>
+    </div>
+    <div class="example-col">
+      <p>DropDownButton</p>
+      <DropDownButton
+        :dir="'rtl'"
+        :text-field="'actionName'"
+        :svg-icon="gearIcon"
+        :items="dropDownButtonItems"
+        :text="'Edit'"
+      ></DropDownButton>
+    </div>
+    <div class="example-col">
+      <p>SplitButton</p>
+      <SplitButton
+        :dir="'rtl'"
+        :text="'Paste'"
+        :svg-icon="clipboardIcon"
+        :items="splitButtonItems"
+      >
+      </SplitButton>
+    </div>
+    <div class="example">
+      <p>Toolbar</p>
+      <Toolbar :dir="'rtl'">
+        <ButtonGroup>
+          <KButton
+            :svg-icon="boldIcon"
+            :title="'Bold'"
+            :togglable="true"
+          ></KButton>
+          <KButton
+            :svg-icon="italicIcon"
+            :title="'Italic'"
+            :togglable="true"
+          ></KButton>
+          <KButton
+            :svg-icon="underlineIcon"
+            :title="'Underline'"
+            :togglable="true"
+          ></KButton>
+        </ButtonGroup>
+        <ToolbarSeparator />
+        <ButtonGroup>
+          <KButton
+            :svg-icon="alignLeftIcon"
+            :title="'Align Left'"
+            :togglable="true"
+          ></KButton>
+          <KButton
+            :svg-icon="alignCenterIcon"
+            :title="'Align Center'"
+            :togglable="true"
+          ></KButton>
+          <KButton
+            :svg-icon="alignRightIcon"
+            :title="'Align Right'"
+            :togglable="true"
+          ></KButton>
+          <KButton
+            :svg-icon="alignJustifyIcon"
+            :title="'Align Justify'"
+            :togglable="true"
+          ></KButton>
+        </ButtonGroup>
+        <ToolbarSeparator />
+        <KButton :svg-icon="cutIcon" :title="'Cut'">Cut</KButton>
+        <ToolbarSeparator />
+        <KButton :svg-icon="copyIcon" :title="'Copy'">Copy</KButton>
+        <ToolbarSeparator />
+        <KButton :svg-icon="clipboardIcon" :title="'Paste'">Paste</KButton>
+      </Toolbar>
+    </div>
+    <div class="example">
+      <p>Chip and ChipList</p>
+      <ChipList
+        :dir="'rtl'"
+        :selection="'single'"
+        :data-items="[
+          { text: 'Berry', value: 'berry' },
+          { text: 'Apple', value: 'apple' },
+          { text: 'Kiwi', value: 'kiwi' },
+          { text: 'Banana', value: 'banana' },
+        ]"
+      />
+    </div>
+    <div class="example-col">
+      <FloatingActionButton
+        :svg-icon="checkIcon"
+        :text="'Floating Action Button'"
+        :dir="'rtl'"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import {
+  Button,
+  ButtonGroup,
+  ChipList,
+  DropDownButton,
+  FloatingActionButton,
+  Toolbar,
+  ToolbarSeparator,
+  SplitButton,
+} from "@progress/kendo-vue-buttons";
+import {
+  boldIcon,
+  underlineIcon,
+  italicIcon,
+  alignJustifyIcon,
+  alignRightIcon,
+  alignCenterIcon,
+  alignLeftIcon,
+  cutIcon,
+  copyIcon,
+  clipboardIcon,
+  gearIcon,
+  checkIcon,
+  undoIcon,
+  redoIcon,
+  clipboardMarkdownIcon,
+  clipboardHtmlIcon,
+  arrowRotateCwIcon,
+  searchIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    KButton: Button,
+    ButtonGroup,
+    DropDownButton,
+    FloatingActionButton,
+    ChipList,
+    Toolbar,
+    ToolbarSeparator,
+    SplitButton,
+  },
+  data() {
+    return {
+      boldIcon,
+      underlineIcon,
+      italicIcon,
+      alignJustifyIcon,
+      alignRightIcon,
+      alignCenterIcon,
+      alignLeftIcon,
+      cutIcon,
+      copyIcon,
+      clipboardIcon,
+      gearIcon,
+      checkIcon,
+      undoIcon,
+      redoIcon,
+      clipboardMarkdownIcon,
+      clipboardHtmlIcon,
+      arrowRotateCwIcon,
+      searchIcon,
+      chip: "myTemplate",
+      dropDownButtonItems: [
+        {
+          actionName: "Undo",
+          svgIcon: undoIcon,
+        },
+        {
+          actionName: "Redo",
+          svgIcon: redoIcon,
+          disabled: true,
+        },
+        {
+          actionName: "Cut",
+          svgIcon: cutIcon,
+        },
+        {
+          actionName: "Copy",
+          svgIcon: copyIcon,
+        },
+        {
+          actionName: "Paste",
+          svgIcon: clipboardIcon,
+        },
+      ],
+      splitButtonItems: [
+        { text: "Keep Text Only", svgIcon: clipboardIcon },
+        { text: "Paste as HTML", svgIcon: clipboardHtmlIcon },
+        { text: "Paste Markdown", svgIcon: clipboardMarkdownIcon },
+        { text: "Set Default Paste" },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/shared/ButtonStyleConfigurator.vue b/vue-options-api-demos/buttons/shared/ButtonStyleConfigurator.vue
new file mode 100644
index 00000000..c16a6018
--- /dev/null
+++ b/vue-options-api-demos/buttons/shared/ButtonStyleConfigurator.vue
@@ -0,0 +1,189 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span v-if="shape !== undefined" class="k-form-field">
+        <k-label>
+          Shape
+          <div class="k-form-field-wrap">
+            <ButtonGroup>
+              <kbutton
+                v-for="(shapeElelement, index) in shapes"
+                :key="index"
+                :togglable="true"
+                :selected="shapeElelement === shape"
+                @click="handleShapeChange(shapeElelement)"
+              >
+                {{ shapeElelement || 'None' }}
+              </kbutton>
+            </ButtonGroup>
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+            <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Theme Color
+          <div class="k-form-field-wrap">
+            <dropdownlist
+              :data-items="themeColors"
+              :value="themeColor"
+              :item-render="'colorItemRender'"
+              :style="{
+                'min-width': '150px',
+              }"
+              @change="handleThemeColorChange"
+            >
+              <template v-slot:colorItemRender="{ props }">
+                <li
+                  :class="props.itemClass"
+                  @click="(ev) => props.onClick(ev)"
+                  :style="{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                  }"
+                >
+                  {{ props.dataItem }}{{ ' ' }}
+                  <span
+                    :style="{
+                      width: '16px',
+                      height: '16px',
+                      background: 'currentColor',
+                      display: 'inline-block',
+                    }"
+                    :class="['k-color-' + props.dataItem]"
+                  ></span>
+                </li>
+              </template>
+            </dropdownlist>
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Fill Mode
+          <div class="k-form-field-wrap">
+            <dropdownlist
+              :data-items="fillModes"
+              :value="fillMode"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleFillModeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+            <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from '@progress/kendo-vue-labels';
+import { ButtonGroup, Button } from '@progress/kendo-vue-buttons';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  components: {
+    'k-label': Label,
+    kbutton: Button,
+    ButtonGroup,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    shape: String,
+    size: String,
+    themeColor: String,
+    fillMode: String,
+    rounded: String,
+  },
+  emits: [
+    'shapechange',
+    'sizechange',
+    'themecolorchange',
+    'fillmodechange',
+    'roundedchange',
+  ],
+  data() {
+    return {
+      shapes: ['rectangle', 'square'],
+      sizes: ['small', 'medium', 'large'],
+      themeColors: [
+        'base',
+        'primary',
+        'secondary',
+        'tertiary',
+        'info',
+        'success',
+        'warning',
+        'error',
+        'dark',
+        'light',
+        'inverse',
+      ],
+      fillModes: ['solid', 'outline', 'flat', 'link', 'null'],
+      roundedOptions: ['small', 'medium', 'large', 'full'],
+    };
+  },
+  methods: {
+    handleShapeChange(shape) {
+      this.$emit('shapechange', shape);
+    },
+    handleSizeChange(event) {
+      this.$emit('sizechange', event);
+    },
+    handleThemeColorChange(event) {
+      this.$emit('themecolorchange', event);
+    },
+    handleFillModeChange(event) {
+      this.$emit('fillmodechange', event);
+    },
+    handleRoundedChange(event) {
+      this.$emit('roundedchange', event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/shared/ButtonsStyleConfigurator.vue b/vue-options-api-demos/buttons/shared/ButtonsStyleConfigurator.vue
new file mode 100644
index 00000000..17dd70df
--- /dev/null
+++ b/vue-options-api-demos/buttons/shared/ButtonsStyleConfigurator.vue
@@ -0,0 +1,189 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span v-if="shape !== undefined" class="k-form-field">
+        <k-label>
+          Shape
+          <div class="k-form-field-wrap">
+            <kbuttongroup>
+              <kbutton
+                v-for="(shapeElelement, index) in shapes"
+                :key="index"
+                :togglable="true"
+                :selected="shapeElelement === shape"
+                @click="handleShapeChange(shapeElelement)"
+              >
+                {{ shapeElelement || "None" }}
+              </kbutton>
+            </kbuttongroup>
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Theme Color
+          <div class="k-form-field-wrap">
+            <dropdownlist
+              :data-items="themeColors"
+              :value="themeColor"
+              :item-render="'colorItemRender'"
+              :style="{
+                'min-width': '150px',
+              }"
+              @change="handleThemeColorChange"
+            >
+              <template v-slot:colorItemRender="{ props }">
+                <li
+                  :class="props.itemClass"
+                  @click="(ev) => props.onClick(ev)"
+                  :style="{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                  }"
+                >
+                  {{ props.dataItem }}{{ ' ' }}
+                  <span
+                    :style="{
+                      width: '16px',
+                      height: '16px',
+                      background: 'currentColor',
+                      display: 'inline-block',
+                    }"
+                    :class="['k-color-' + props.dataItem]"
+                  ></span>
+                </li>
+              </template>
+            </dropdownlist>
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Fill Mode
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="fillModes"
+              :value="fillMode"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleFillModeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { ButtonGroup, Button } from "@progress/kendo-vue-buttons";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    "kbutton": Button,
+    "k-buttongroup": ButtonGroup,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    shape: String,
+    size: String,
+    themeColor: String,
+    fillMode: String,
+    rounded: String,
+  },
+  emits: [
+    "shapechange",
+    "sizechange",
+    "themecolorchange",
+    "fillmodechange",
+    "roundedchange",
+  ],
+  data() {
+    return {
+      shapes: ["rectangle", "square"],
+      sizes: ["small", "medium", "large"],
+      themeColors: [
+        "base",
+        "primary",
+        "secondary",
+        "tertiary",
+        "info",
+        "success",
+        "warning",
+        "error",
+        "dark",
+        "light",
+        "inverse",
+      ],
+      fillModes: ["solid", "outline", "flat", "link"],
+      roundedOptions: ["small", "medium", "large", "full"],
+    };
+  },
+  methods: {
+    handleShapeChange(shape) {
+      this.$emit("shapechange", shape);
+    },
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleThemeColorChange(event) {
+      this.$emit("themecolorchange", event);
+    },
+    handleFillModeChange(event) {
+      this.$emit("fillmodechange", event);
+    },
+    handleRoundedChange(event) {
+      this.$emit("roundedchange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/shared/ChipStyleConfigurator.vue b/vue-options-api-demos/buttons/shared/ChipStyleConfigurator.vue
new file mode 100644
index 00000000..0494ee76
--- /dev/null
+++ b/vue-options-api-demos/buttons/shared/ChipStyleConfigurator.vue
@@ -0,0 +1,159 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Theme Color
+          <div class="k-form-field-wrap">
+            <dropdownlist
+              :data-items="themeColors"
+              :value="themeColor"
+              :item-render="'colorItemRender'"
+              :style="{
+                'min-width': '150px',
+              }"
+              @change="handleThemeColorChange"
+            >
+              <template v-slot:colorItemRender="{ props }">
+                <li
+                  :class="props.itemClass"
+                  @click="(ev) => props.onClick(ev)"
+                  :style="{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                  }"
+                >
+                  {{ props.dataItem }}{{ ' ' }}
+                  <span
+                    :style="{
+                      width: '16px',
+                      height: '16px',
+                      background: 'currentColor',
+                      display: 'inline-block',
+                    }"
+                    :class="['k-color-' + props.dataItem]"
+                  ></span>
+                </li>
+              </template>
+            </dropdownlist>
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Fill Mode
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="fillModes"
+              :value="fillMode"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleFillModeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { ButtonGroup, Button } from "@progress/kendo-vue-buttons";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    "kbutton": Button,
+    "k-buttongroup": ButtonGroup,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+    themeColor: String,
+    fillMode: String,
+    rounded: String,
+  },
+  emits: [
+    "sizechange",
+    "themecolorchange",
+    "fillmodechange",
+    "roundedchange",
+  ],
+  data() {
+    return {
+      sizes: ["small", "medium", "large"],
+      themeColors: [
+        "base",
+        "info",
+        "success",
+        "warning",
+        "error",
+      ],
+      fillModes: ["solid", "outline"],
+      roundedOptions: ["small", "medium", "large", "full"],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleThemeColorChange(event) {
+      this.$emit("themecolorchange", event);
+    },
+    handleFillModeChange(event) {
+      this.$emit("fillmodechange", event);
+    },
+    handleRoundedChange(event) {
+      this.$emit("roundedchange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/shared/FloatingActionButtonConfigurator.vue b/vue-options-api-demos/buttons/shared/FloatingActionButtonConfigurator.vue
new file mode 100644
index 00000000..ab68720f
--- /dev/null
+++ b/vue-options-api-demos/buttons/shared/FloatingActionButtonConfigurator.vue
@@ -0,0 +1,160 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+      >Configurator</span>
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+            <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span v-if="shape !== undefined" class="k-form-field">
+        <k-label>
+          Shape
+          <div class="k-form-field-wrap">
+            <kbuttongroup>
+              <kbutton
+                v-for="(shapeElelement, index) in shapes"
+                :key="index"
+                :togglable="true"
+                :selected="shapeElelement === shape"
+                @click="handleShapeChange(shapeElelement)"
+              >{{ shapeElelement || 'None' }}</kbutton>
+            </kbuttongroup>
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Roundness
+          <div class="k-form-field-wrap">
+            <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Theme Color
+          <div class="k-form-field-wrap">
+            <dropdownlist
+              :data-items="themeColors"
+              :value="themeColor"
+              :item-render="'colorItemRender'"
+              :style="{
+                'min-width': '150px',
+              }"
+              @change="handleThemeColorChange"
+            >
+              <template v-slot:colorItemRender="{ props }">
+                <li
+                  :class="props.itemClass"
+                  @click="(ev) => props.onClick(ev)"
+                  :style="{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                  }"
+                >
+                  {{ props.dataItem }}{{ ' ' }}
+                  <span
+                    :style="{
+                      width: '16px',
+                      height: '16px',
+                      background: 'currentColor',
+                      display: 'inline-block',
+                    }"
+                    :class="['k-color-' + props.dataItem]"
+                  ></span>
+                </li>
+              </template>
+            </dropdownlist>
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from '@progress/kendo-vue-labels';
+import { ButtonGroup, Button } from '@progress/kendo-vue-buttons';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  components: {
+    'k-label': Label,
+    kbutton: Button,
+    kbuttongroup: ButtonGroup,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    shape: String,
+    size: String,
+    themeColor: String,
+    rounded: String,
+  },
+  emits: ['shapechange', 'sizechange', 'themecolorchange', 'roundedchange'],
+  data() {
+    return {
+      shapes: ['rectangle', 'square'],
+      sizes: ['small', 'medium', 'large'],
+      themeColors: [
+        'base',
+        'primary',
+        'secondary',
+        'tertiary',
+        'info',
+        'success',
+        'warning',
+        'error',
+        'dark',
+        'light',
+        'inverse',
+      ],
+      roundedOptions: ['small', 'medium', 'large', 'full'],
+    };
+  },
+  methods: {
+    handleShapeChange(shape) {
+      this.$emit('shapechange', shape);
+    },
+    handleSizeChange(event) {
+      this.$emit('sizechange', event);
+    },
+    handleThemeColorChange(event) {
+      this.$emit('themecolorchange', event);
+    },
+    handleRoundedChange(event) {
+      this.$emit('roundedchange', event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/splitbutton/appearance/configurator/ButtonsStyleConfigurator.vue b/vue-options-api-demos/buttons/splitbutton/appearance/configurator/ButtonsStyleConfigurator.vue
new file mode 100644
index 00000000..17dd70df
--- /dev/null
+++ b/vue-options-api-demos/buttons/splitbutton/appearance/configurator/ButtonsStyleConfigurator.vue
@@ -0,0 +1,189 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span v-if="shape !== undefined" class="k-form-field">
+        <k-label>
+          Shape
+          <div class="k-form-field-wrap">
+            <kbuttongroup>
+              <kbutton
+                v-for="(shapeElelement, index) in shapes"
+                :key="index"
+                :togglable="true"
+                :selected="shapeElelement === shape"
+                @click="handleShapeChange(shapeElelement)"
+              >
+                {{ shapeElelement || "None" }}
+              </kbutton>
+            </kbuttongroup>
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Theme Color
+          <div class="k-form-field-wrap">
+            <dropdownlist
+              :data-items="themeColors"
+              :value="themeColor"
+              :item-render="'colorItemRender'"
+              :style="{
+                'min-width': '150px',
+              }"
+              @change="handleThemeColorChange"
+            >
+              <template v-slot:colorItemRender="{ props }">
+                <li
+                  :class="props.itemClass"
+                  @click="(ev) => props.onClick(ev)"
+                  :style="{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                  }"
+                >
+                  {{ props.dataItem }}{{ ' ' }}
+                  <span
+                    :style="{
+                      width: '16px',
+                      height: '16px',
+                      background: 'currentColor',
+                      display: 'inline-block',
+                    }"
+                    :class="['k-color-' + props.dataItem]"
+                  ></span>
+                </li>
+              </template>
+            </dropdownlist>
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Fill Mode
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="fillModes"
+              :value="fillMode"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleFillModeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { ButtonGroup, Button } from "@progress/kendo-vue-buttons";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    "kbutton": Button,
+    "k-buttongroup": ButtonGroup,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    shape: String,
+    size: String,
+    themeColor: String,
+    fillMode: String,
+    rounded: String,
+  },
+  emits: [
+    "shapechange",
+    "sizechange",
+    "themecolorchange",
+    "fillmodechange",
+    "roundedchange",
+  ],
+  data() {
+    return {
+      shapes: ["rectangle", "square"],
+      sizes: ["small", "medium", "large"],
+      themeColors: [
+        "base",
+        "primary",
+        "secondary",
+        "tertiary",
+        "info",
+        "success",
+        "warning",
+        "error",
+        "dark",
+        "light",
+        "inverse",
+      ],
+      fillModes: ["solid", "outline", "flat", "link"],
+      roundedOptions: ["small", "medium", "large", "full"],
+    };
+  },
+  methods: {
+    handleShapeChange(shape) {
+      this.$emit("shapechange", shape);
+    },
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleThemeColorChange(event) {
+      this.$emit("themecolorchange", event);
+    },
+    handleFillModeChange(event) {
+      this.$emit("fillmodechange", event);
+    },
+    handleRoundedChange(event) {
+      this.$emit("roundedchange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/splitbutton/appearance/configurator/main.js b/vue-options-api-demos/buttons/splitbutton/appearance/configurator/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/splitbutton/appearance/configurator/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/splitbutton/appearance/configurator/main.vue b/vue-options-api-demos/buttons/splitbutton/appearance/configurator/main.vue
new file mode 100644
index 00000000..737ace94
--- /dev/null
+++ b/vue-options-api-demos/buttons/splitbutton/appearance/configurator/main.vue
@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <ButtonsStyleConfigurator
+      :size="size"
+      @sizechange="setSize"
+      :theme-color="themeColor"
+      @themecolorchange="setThemeColor"
+      :fill-mode="fillMode"
+      @fillmodechange="setFillMode"
+      :rounded="rounded"
+      @roundedchange="setRounded"
+    />
+    <SplitButton
+      :size="size"
+      :theme-color="themeColor"
+      :fill-mode="fillMode"
+      :rounded="rounded"
+      :text="'Paste'"
+      :text-field="'actionName'"
+      :items="items"
+    >
+    </SplitButton>
+  </div>
+</template>
+
+<script>
+import { SplitButton } from "@progress/kendo-vue-buttons";
+import ButtonsStyleConfigurator from "./ButtonsStyleConfigurator.vue";
+import {
+  clipboardTextIcon,
+  clipboardHtmlIcon,
+  clipboardMarkdownIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    ButtonsStyleConfigurator,
+    SplitButton,
+  },
+  data() {
+    return {
+      items: [
+        { text: "Keep Text Only", svgIcon: clipboardTextIcon },
+        { text: "Paste as HTML", svgIcon: clipboardHtmlIcon },
+        { text: "Paste Markdown", svgIcon: clipboardMarkdownIcon },
+        { text: "Set Default Paste" },
+      ],
+      size: "medium",
+      themeColor: "base",
+      fillMode: "solid",
+      rounded: "medium",
+    };
+  },
+  methods: {
+    setSize(event) {
+      this.size = event.value;
+    },
+    setThemeColor(event) {
+      this.themeColor = event.value;
+    },
+    setFillMode(event) {
+      this.fillMode = event.value;
+    },
+    setRounded(event) {
+      this.rounded = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/splitbutton/appearance/fill-mode/main.js b/vue-options-api-demos/buttons/splitbutton/appearance/fill-mode/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/splitbutton/appearance/fill-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/splitbutton/appearance/fill-mode/main.vue b/vue-options-api-demos/buttons/splitbutton/appearance/fill-mode/main.vue
new file mode 100644
index 00000000..d140537d
--- /dev/null
+++ b/vue-options-api-demos/buttons/splitbutton/appearance/fill-mode/main.vue
@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <span class="wrapper">
+      <SplitButton :items="items" :text="'Solid'" :fill-mode="'solid'" />
+    </span>
+    <span class="wrapper">
+      <SplitButton
+        :items="items"
+        :text="'Flat'"
+        :fill-mode="'flat'"
+      />
+    </span>
+    <span class="wrapper">
+      <SplitButton
+        :items="items"
+        :text="'Outline'"
+        :fill-mode="'outline'"
+      />
+    </span>
+    <span class="wrapper">
+      <SplitButton
+        :items="items"
+        :text="'Link'"
+        :fill-mode="'link'"
+      />
+    </span>
+  </div>
+</template>
+
+<script>
+import { SplitButton } from '@progress/kendo-vue-buttons';
+import {
+  undoIcon,
+  redoIcon,
+  cutIcon,
+  copyIcon,
+  clipboardIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    SplitButton,
+  },
+  data() {
+    return {
+      items: [
+        {
+          text: "Undo",
+          svgIcon: undoIcon,
+        },
+        {
+          text: "Redo",
+          svgIcon: redoIcon,
+          disabled: true,
+        },
+        {
+          text: "Cut",
+          svgIcon: cutIcon,
+        },
+        {
+          text: "Copy",
+          svgIcon: copyIcon,
+        },
+        {
+          text: "Paste",
+          svgIcon: clipboardIcon,
+        },
+      ],
+    };
+  },
+};
+</script>
+<style>
+.wrapper {
+  padding: 20px;
+}
+</style>
diff --git a/vue-options-api-demos/buttons/splitbutton/appearance/rounded/main.js b/vue-options-api-demos/buttons/splitbutton/appearance/rounded/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/splitbutton/appearance/rounded/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/splitbutton/appearance/rounded/main.vue b/vue-options-api-demos/buttons/splitbutton/appearance/rounded/main.vue
new file mode 100644
index 00000000..cc0b5b34
--- /dev/null
+++ b/vue-options-api-demos/buttons/splitbutton/appearance/rounded/main.vue
@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <span class="wrapper">
+      <SplitButton :items="items" :text="'No roundness'" />
+    </span>
+    <span class="wrapper">
+      <SplitButton
+        :rounded="'small'"
+        :items="items"
+        :text="'Small roundness'"
+      />
+    </span>
+    <span class="wrapper">
+      <SplitButton
+        :rounded="'medium'"
+        :items="items"
+        :text="'Medium roundness'"
+      />
+    </span>
+    <br />
+    <br />
+    <span class="wrapper">
+      <SplitButton
+        :rounded="'large'"
+        :items="items"
+        :text="'Large roundness'"
+      />
+    </span>
+    <span class="wrapper">
+      <SplitButton
+        :rounded="'full'"
+        :items="items"
+        :text="'Full roundness'"
+      />
+    </span>
+    <span class="wrapper">
+      <SplitButton
+        :size="null"
+        :items="items"
+        :text="'Custom roundness'"
+        :class="'custom-roundness'"
+      />
+    </span>
+  </div>
+</template>
+
+<script>
+import { SplitButton } from '@progress/kendo-vue-buttons';
+import {
+  undoIcon,
+  redoIcon,
+  cutIcon,
+  copyIcon,
+  clipboardIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    SplitButton,
+  },
+  data() {
+    return {
+      items: [
+        {
+          text: "Undo",
+          svgIcon: undoIcon,
+        },
+        {
+          text: "Redo",
+          svgIcon: redoIcon,
+          disabled: true,
+        },
+        {
+          text: "Cut",
+          svgIcon: cutIcon,
+        },
+        {
+          text: "Copy",
+          svgIcon: copyIcon,
+        },
+        {
+          text: "Paste",
+          svgIcon: clipboardIcon,
+        },
+      ],
+    };
+  },
+};
+</script>
+<style>
+.custom-roundness > .k-button {
+  border-top-right-radius: 15px;
+  border-top-left-radius: 15px;
+}
+
+.wrapper {
+  padding: 20px;
+}
+</style>
diff --git a/vue-options-api-demos/buttons/splitbutton/appearance/size/main.js b/vue-options-api-demos/buttons/splitbutton/appearance/size/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/splitbutton/appearance/size/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/splitbutton/appearance/size/main.vue b/vue-options-api-demos/buttons/splitbutton/appearance/size/main.vue
new file mode 100644
index 00000000..fe0b0214
--- /dev/null
+++ b/vue-options-api-demos/buttons/splitbutton/appearance/size/main.vue
@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <span class="wrapper">
+      <SplitButton :size="'small'" :items="items" :text="'Small Size'" />
+    </span>
+    <span class="wrapper">
+      <SplitButton :size="'medium'" :items="items" :text="'Medium Size'" />
+    </span>
+    <span class="wrapper">
+      <SplitButton :size="'large'" :items="items" :text="'Large Size'" />
+    </span>
+    <span class="wrapper">
+      <SplitButton
+        :size="null"
+        :items="items"
+        :text="'Custom Size'"
+        :class="'custom-size'"
+      />
+    </span>
+  </div>
+</template>
+
+<script>
+import { SplitButton } from '@progress/kendo-vue-buttons';
+import {
+  undoIcon,
+  redoIcon,
+  cutIcon,
+  copyIcon,
+  clipboardIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    SplitButton,
+  },
+  data() {
+    return {
+      items: [
+        {
+          text: "Undo",
+          svgIcon: undoIcon,
+        },
+        {
+          text: "Redo",
+          svgIcon: redoIcon,
+          disabled: true,
+        },
+        {
+          text: "Cut",
+          svgIcon: cutIcon,
+        },
+        {
+          text: "Copy",
+          svgIcon: copyIcon,
+        },
+        {
+          text: "Paste",
+          svgIcon: clipboardIcon,
+        },
+      ],
+    };
+  },
+};
+</script>
+<style>
+.custom-size > .k-button {
+  padding: 20px 20px;
+}
+
+.wrapper {
+  padding: 20px;
+}
+</style>
diff --git a/vue-options-api-demos/buttons/splitbutton/appearance/theme-colors/main.js b/vue-options-api-demos/buttons/splitbutton/appearance/theme-colors/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/splitbutton/appearance/theme-colors/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/splitbutton/appearance/theme-colors/main.vue b/vue-options-api-demos/buttons/splitbutton/appearance/theme-colors/main.vue
new file mode 100644
index 00000000..131bdc24
--- /dev/null
+++ b/vue-options-api-demos/buttons/splitbutton/appearance/theme-colors/main.vue
@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <span class="wrapper">
+      <SplitButton :items="items" :text="'base'" :theme-color="'base'" />
+    </span>
+    <span class="wrapper">
+      <SplitButton
+        :items="items"
+        :text="'primary'"
+        :theme-color="'primary'"
+      />
+    </span>
+    <span class="wrapper">
+      <SplitButton
+        :items="items"
+        :text="'secondary'"
+        :theme-color="'secondary'"
+      />
+    </span>
+    <span class="wrapper">
+      <SplitButton
+        :items="items"
+        :text="'tertiary'"
+        :theme-color="'tertiary'"
+      />
+    </span>
+    <br />
+    <br />
+    <span class="wrapper">
+      <SplitButton :items="items" :text="'info'" :theme-color="'info'" />
+    </span>
+    <span class="wrapper">
+      <SplitButton
+        :items="items"
+        :text="'success'"
+        :theme-color="'success'"
+      />
+    </span>
+    <span class="wrapper">
+      <SplitButton
+        :items="items"
+        :text="'warning'"
+        :theme-color="'warning'"
+      />
+    </span>
+    <span class="wrapper">
+      <SplitButton :items="items" :text="'error'" :theme-color="'error'" />
+    </span>
+    <br />
+    <br />
+    <span class="wrapper">
+      <SplitButton :items="items" :text="'dark'" :theme-color="'dark'" />
+    </span>
+    <span class="wrapper">
+      <SplitButton :items="items" :text="'light'" :theme-color="'light'" />
+    </span>
+    <span class="wrapper">
+      <SplitButton
+        :items="items"
+        :text="'inverse'"
+        :theme-color="'inverse'"
+      />
+    </span>
+    <span class="wrapper">
+      <SplitButton
+        :items="items"
+        :text="'custom'"
+        :theme-color="null"
+        :class="'custom-color'"
+      />
+    </span>
+  </div>
+</template>
+
+<script>
+import { SplitButton } from '@progress/kendo-vue-buttons';
+import {
+  undoIcon,
+  redoIcon,
+  cutIcon,
+  copyIcon,
+  clipboardIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    SplitButton,
+  },
+  data() {
+    return {
+      items: [
+        {
+          text: "Undo",
+          svgIcon: undoIcon,
+        },
+        {
+          text: "Redo",
+          svgIcon: redoIcon,
+          disabled: true,
+        },
+        {
+          text: "Cut",
+          svgIcon: cutIcon,
+        },
+        {
+          text: "Copy",
+          svgIcon: copyIcon,
+        },
+        {
+          text: "Paste",
+          svgIcon: clipboardIcon,
+        },
+      ],
+    };
+  },
+};
+</script>
+<style>
+.wrapper {
+  padding: 20px;
+}
+
+.custom-color {
+  background-color: green;
+  color: orange;
+}
+</style>
diff --git a/vue-options-api-demos/buttons/splitbutton/customization/items/main.js b/vue-options-api-demos/buttons/splitbutton/customization/items/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/splitbutton/customization/items/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/splitbutton/customization/items/main.vue b/vue-options-api-demos/buttons/splitbutton/customization/items/main.vue
new file mode 100644
index 00000000..7bcfd456
--- /dev/null
+++ b/vue-options-api-demos/buttons/splitbutton/customization/items/main.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <splitbutton :item-render="itemRender" :items="items" :text="'Save'">
+      <template v-slot:itemRender="{ props }">
+        <span class="k-link k-menu-link">
+          <em>{{ `action #${props.itemIndex}: ${props.item.text}` }}</em>
+        </span>
+      </template>
+    </splitbutton>
+  </div>
+</template>
+
+<script>
+import { SplitButton } from "@progress/kendo-vue-buttons";
+
+export default {
+  components: {
+    splitbutton: SplitButton,
+  },
+  data: function () {
+    return {
+      items: [
+        {
+          text: "Save as",
+        },
+        {
+          text: "Upload to drive",
+        },
+      ],
+      itemRender: "itemRender",
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/splitbutton/customization/popup/main.js b/vue-options-api-demos/buttons/splitbutton/customization/popup/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/splitbutton/customization/popup/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/splitbutton/customization/popup/main.vue b/vue-options-api-demos/buttons/splitbutton/customization/popup/main.vue
new file mode 100644
index 00000000..7e952e95
--- /dev/null
+++ b/vue-options-api-demos/buttons/splitbutton/customization/popup/main.vue
@@ -0,0 +1,32 @@
+<template>
+    <splitbutton
+      :popup-settings="popupSettings"
+      :items="items"
+      :text="'Reply'"
+    />
+</template>
+
+<script>
+import { SplitButton } from "@progress/kendo-vue-buttons";
+
+export default {
+  components: {
+    splitbutton: SplitButton,
+  },
+  data: function () {
+    return {
+      items: ["Reply All", "Forward", "Reply & Delete"],
+      popupSettings: {
+        animate: false,
+        popupClass: "my-popup",
+      },
+    };
+  },
+};
+</script>
+
+<style scoped>
+.my-popup {
+  font-style: oblique;
+}
+</style>
diff --git a/vue-options-api-demos/buttons/splitbutton/data-binding/objects/main.js b/vue-options-api-demos/buttons/splitbutton/data-binding/objects/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/splitbutton/data-binding/objects/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/splitbutton/data-binding/objects/main.vue b/vue-options-api-demos/buttons/splitbutton/data-binding/objects/main.vue
new file mode 100644
index 00000000..a9eb75d8
--- /dev/null
+++ b/vue-options-api-demos/buttons/splitbutton/data-binding/objects/main.vue
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <splitbutton :text-field="'actionName'" :items="items" :text="'Edit'" />
+  </div>
+</template>
+
+<script>
+import { SplitButton } from "@progress/kendo-vue-buttons";
+import {
+  undoIcon,
+  redoIcon,
+  cutIcon,
+  copyIcon,
+  clipboardIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    splitbutton: SplitButton,
+  },
+  data: function () {
+    return {
+      items: [
+        {
+          actionName: "Undo",
+          svgIcon: undoIcon,
+        },
+        {
+          actionName: "Redo",
+          svgIcon: redoIcon,
+          disabled: true,
+        },
+        {
+          actionName: "Cut",
+          svgIcon: cutIcon,
+        },
+        {
+          actionName: "Copy",
+          svgIcon: copyIcon,
+        },
+        {
+          actionName: "Paste",
+          svgIcon: clipboardIcon,
+        },
+      ],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/buttons/splitbutton/data-binding/strings/main.js b/vue-options-api-demos/buttons/splitbutton/data-binding/strings/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/splitbutton/data-binding/strings/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/splitbutton/data-binding/strings/main.vue b/vue-options-api-demos/buttons/splitbutton/data-binding/strings/main.vue
new file mode 100644
index 00000000..515b457f
--- /dev/null
+++ b/vue-options-api-demos/buttons/splitbutton/data-binding/strings/main.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <splitbutton :items="items" :text="'Save'" />
+  </div>
+</template>
+
+<script>
+import { SplitButton } from "@progress/kendo-vue-buttons";
+
+export default {
+  components: {
+    splitbutton: SplitButton,
+  },
+  data: function () {
+    return {
+      items: ["Save as", "Upload to drive"],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/buttons/splitbutton/disabled/main.js b/vue-options-api-demos/buttons/splitbutton/disabled/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/splitbutton/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/splitbutton/disabled/main.vue b/vue-options-api-demos/buttons/splitbutton/disabled/main.vue
new file mode 100644
index 00000000..722ff46b
--- /dev/null
+++ b/vue-options-api-demos/buttons/splitbutton/disabled/main.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <splitbutton :items="items" :text="'Enabled Button'" /> &nbsp;
+    <splitbutton :disabled="true" :items="items" :text="'Disabled Button'" />
+  </div>
+</template>
+
+<script>
+import { SplitButton } from "@progress/kendo-vue-buttons";
+
+export default {
+  components: {
+    splitbutton: SplitButton,
+  },
+  data: function () {
+    return {
+      items: ["Item1", "Item2", "Item3"],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/splitbutton/events/Logger.vue b/vue-options-api-demos/buttons/splitbutton/events/Logger.vue
new file mode 100644
index 00000000..aa04a80b
--- /dev/null
+++ b/vue-options-api-demos/buttons/splitbutton/events/Logger.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="example-config">
+    <h5>{{ title }}</h5>
+    <ul class="event-log">
+      <li v-for="(event, idx) in events" :key="idx">{{ event }}</li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    events: Array,
+    title: String,
+  },
+};
+</script>
+
+<style scoped>
+.example-config {
+  margin: 0 0 20px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+  margin: 0;
+  padding: 0;
+  max-height: 100px;
+  overflow-y: auto;
+  list-style-type: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: white;
+}
+.event-log li {
+  margin: 0;
+  padding: 0.3em;
+  line-height: 1.2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+  margin-bottom: -1px;
+}
+</style>
\ No newline at end of file
diff --git a/vue-options-api-demos/buttons/splitbutton/events/main.js b/vue-options-api-demos/buttons/splitbutton/events/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/buttons/splitbutton/events/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/buttons/splitbutton/events/main.vue b/vue-options-api-demos/buttons/splitbutton/events/main.vue
new file mode 100644
index 00000000..c2ee67c7
--- /dev/null
+++ b/vue-options-api-demos/buttons/splitbutton/events/main.vue
@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <splitbutton
+      :text-field="'actionName'"
+      :items="items"
+      :text="'Edit'"
+      @buttonclick="onButtonClick"
+      @itemclick="onItemClick"
+      @focus="onFocus"
+      @blur="onBlur"
+      @open="onOpen"
+      @close="onClose"
+    />
+    <br />
+    <br />
+    <Logger :title="'Events list'" :events="eventsList" />
+  </div>
+</template>
+
+<script>
+import { SplitButton } from "@progress/kendo-vue-buttons";
+import {
+  undoIcon,
+  redoIcon,
+  cutIcon,
+  copyIcon,
+  clipboardIcon,
+} from "@progress/kendo-svg-icons";
+import Logger from "./Logger.vue";
+
+export default {
+  components: {
+    splitbutton: SplitButton,
+    Logger,
+  },
+  computed: {
+    eventsList() {
+      return this.events;
+    },
+  },
+  data: function () {
+    return {
+      events: [],
+      items: [
+        {
+          actionName: "Undo",
+          svgIcon: undoIcon,
+        },
+        {
+          actionName: "Redo",
+          svgIcon: redoIcon,
+          disabled: true,
+        },
+        {
+          actionName: "Cut",
+          svgIcon: cutIcon,
+        },
+        {
+          actionName: "Copy",
+          svgIcon: copyIcon,
+        },
+        {
+          actionName: "Paste",
+          svgIcon: clipboardIcon,
+        },
+      ],
+    };
+  },
+  methods: {
+    onButtonClick() {
+      this.events.unshift("Button Click event triggered");
+    },
+    onItemClick() {
+      this.events.unshift("Item Click event triggered");
+    },
+    onFocus() {
+      this.events.unshift("Focus event triggered");
+    },
+    onBlur() {
+      this.events.unshift("Blur event triggered");
+    },
+    onOpen() {
+      this.events.unshift("Open event triggered");
+    },
+    onClose() {
+      this.events.unshift("Close event triggered");
+    },
+  },
+};
+</script>
+
diff --git a/vue-options-api-demos/buttons/splitbutton/icons/main.js b/vue-options-api-demos/buttons/splitbutton/icons/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/splitbutton/icons/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/splitbutton/icons/main.vue b/vue-options-api-demos/buttons/splitbutton/icons/main.vue
new file mode 100644
index 00000000..f839269e
--- /dev/null
+++ b/vue-options-api-demos/buttons/splitbutton/icons/main.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="row example-wrapper">
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"
+    />
+    <div class="col-xs-12 col-sm-6 example-col">
+      <p>Kendo UI for Vue font icon</p>
+      <splitbutton :items="iconItems" :svg-icon="saveIcon" :text="'Save'" />
+      &nbsp <splitbutton :items="iconItems" :svg-icon="saveIcon" />
+    </div>
+    <div class="col-xs-12 col-sm-6 example-col">
+      <p>FontAwеsome icon</p>
+      <splitbutton
+        :items="iconClassItems"
+        :iconClass="'fa fa-mail-reply fa-fw'"
+        :text="'Reply'"
+      />
+      &nbsp
+      <splitbutton
+        :items="iconClassItems"
+        :iconClass="'fa fa-mail-reply fa-fw'"
+      />
+    </div>
+    <div class="col-xs-12 col-sm-6 example-col">
+      <p>Image icon</p>
+      <splitbutton :items="imageItems" :image-url="imageUrl" :text="'Save'" />
+      &nbsp <splitbutton :items="imageItems" :image-url="imageUrl" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { SplitButton } from "@progress/kendo-vue-buttons";
+import { saveIcon, uploadIcon } from "@progress/kendo-svg-icons";
+
+const saveImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || "/") + "assets/buttons/toolbar/save.png";
+
+export default {
+  components: {
+    splitbutton: SplitButton,
+  },
+  data: function () {
+    return {
+      saveIcon,
+      iconItems: [
+        { text: "Save as" },
+        { text: "Upload to drive", svgIcon: uploadIcon },
+      ],
+      iconClassItems: [
+        { text: "Reply all", iconClass: "fa fa-mail-reply-all fa-fw" },
+        { text: "Forward", iconClass: "fa fa-mail-forward fa-fw" },
+        { text: "Reply & delete" },
+      ],
+      imageItems: [
+        { text: "Save as" },
+        { text: "Upload to drive", svgIcon: uploadIcon },
+      ],
+      imageUrl: saveImage
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/splitbutton/keyboard/main.js b/vue-options-api-demos/buttons/splitbutton/keyboard/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/splitbutton/keyboard/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/splitbutton/keyboard/main.vue b/vue-options-api-demos/buttons/splitbutton/keyboard/main.vue
new file mode 100644
index 00000000..9a7e6c92
--- /dev/null
+++ b/vue-options-api-demos/buttons/splitbutton/keyboard/main.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <splitbutton :text="'Paste'" :items="items" :text-field="'actionName'">
+    </splitbutton>
+  </div>
+</template>
+
+<script>
+import { SplitButton } from "@progress/kendo-vue-buttons";
+import {
+  clipboardTextIcon,
+  clipboardHtmlIcon,
+  clipboardMarkdownIcon,
+  copyIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    splitbutton: SplitButton,
+  },
+  data: function () {
+    return {
+      items: [
+        {
+          actionName: "Keep Text Only",
+          svgIcon: clipboardTextIcon,
+        },
+        {
+          actionName: "Paste as HTML",
+          svgIcon: clipboardHtmlIcon,
+          disabled: true,
+        },
+        {
+          actionName: "Paste Markdown",
+          svgIcon: clipboardMarkdownIcon,
+        },
+        {
+          actionName: "Set Default Paste",
+          svgIcon: copyIcon,
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/splitbutton/overview/main.js b/vue-options-api-demos/buttons/splitbutton/overview/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/splitbutton/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/splitbutton/overview/main.vue b/vue-options-api-demos/buttons/splitbutton/overview/main.vue
new file mode 100644
index 00000000..29da7234
--- /dev/null
+++ b/vue-options-api-demos/buttons/splitbutton/overview/main.vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <div class="col-xs-12 col-sm-6 example-col">
+      <p>Default Button</p>
+      <splitbutton :text="'Paste'" :items="items" />
+    </div>
+    <div class="col-xs-12 col-sm-6 example-col">
+      <p>Flat Button</p>
+      <splitbutton :text="'Paste'" :items="items" :fill-mode="'flat'" />
+    </div>
+    <div class="col-xs-12 col-sm-6 example-col">
+      <p>Outline Button</p>
+      <splitbutton :text="'Paste'" :items="items" :fill-mode="'outline'" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { SplitButton } from "@progress/kendo-vue-buttons";
+import {
+  clipboardTextIcon,
+  clipboardHtmlIcon,
+  clipboardMarkdownIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    splitbutton: SplitButton,
+  },
+  data: function () {
+    return {
+      items: [
+        {
+          text: "Keep Text Only",
+          svgIcon: clipboardTextIcon,
+        },
+        {
+          text: "Paste as HTML",
+          svgIcon: clipboardHtmlIcon,
+        },
+        {
+          text: "Paste Markdown",
+          svgIcon: clipboardMarkdownIcon,
+        },
+        {
+          text: "Set Default Paste",
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/toolbar/basic/main.js b/vue-options-api-demos/buttons/toolbar/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/toolbar/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/toolbar/basic/main.vue b/vue-options-api-demos/buttons/toolbar/basic/main.vue
new file mode 100644
index 00000000..29fcfd10
--- /dev/null
+++ b/vue-options-api-demos/buttons/toolbar/basic/main.vue
@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <Toolbar>
+      <ButtonGroup :class="'k-toolbar-button-group'">
+        <Button
+          :class="'k-toolbar-button'"
+          :svg-icon="boldIcon"
+          :title="'Bold'"
+          :togglable="true"
+        />
+        <Button
+          :class="'k-toolbar-button'"
+          :svg-icon="italicIcon"
+          :title="'Italic'"
+          :togglable="true"
+        />
+        <Button
+          :class="'k-toolbar-button'"
+          :svg-icon="underlineIcon"
+          :title="'Underline'"
+          :togglable="true"
+        />
+      </ButtonGroup>
+      <ButtonGroup :class="'k-toolbar-button-group'">
+        <Button
+          :class="'k-toolbar-button'"
+          :svg-icon="alignLeftIcon"
+          :title="'Align Left'"
+          :togglable="true"
+        />
+        <Button
+          :class="'k-toolbar-button'"
+          :svg-icon="alignCenterIcon"
+          :title="'Align Center'"
+          :togglable="true"
+        />
+        <Button
+          :class="'k-toolbar-button'"
+          :svg-icon="alignRightIcon"
+          :title="'Align Right'"
+          :togglable="true"
+        />
+        <Button
+          :class="'k-toolbar-button'"
+          :svg-icon="alignJustifyIcon"
+          :title="'Align Justify'"
+          :togglable="true"
+        />
+      </ButtonGroup>
+      <ToolbarSpacer />
+      <Button :class="'k-toolbar-button'" :svg-icon="cutIcon" :title="'Cut'">
+        Cut
+      </Button>
+      <Button :class="'k-toolbar-button'" :svg-icon="copyIcon" :title="'Copy'">
+        Copy
+      </Button>
+      <SplitButton
+        :class="'k-toolbar-split-button'"
+        :text="'Insert'"
+        :items="splitItems"
+      >
+      </SplitButton>
+      <ToolbarSeparator />
+      <DropDownButton
+        :text="'Paste'"
+        :svg-icon="clipboardIcon"
+        :items="ddItems"
+      >
+      </DropDownButton>
+    </Toolbar>
+  </div>
+</template>
+
+<script>
+import {
+  Toolbar,
+  ToolbarSeparator,
+  ToolbarSpacer,
+  Button,
+  ButtonGroup,
+  DropDownButton,
+  SplitButton,
+} from "@progress/kendo-vue-buttons";
+import {
+  boldIcon,
+  underlineIcon,
+  italicIcon,
+  alignJustifyIcon,
+  alignRightIcon,
+  alignCenterIcon,
+  alignLeftIcon,
+  cutIcon,
+  copyIcon,
+  clipboardIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    Toolbar,
+    ToolbarSeparator,
+    ToolbarSpacer,
+    Button,
+    ButtonGroup,
+    DropDownButton,
+    SplitButton,
+  },
+  data: function () {
+    return {
+      boldIcon,
+      underlineIcon,
+      italicIcon,
+      alignJustifyIcon,
+      alignRightIcon,
+      alignCenterIcon,
+      alignLeftIcon,
+      cutIcon,
+      copyIcon,
+      clipboardIcon,
+      ddItems: [
+        { icon: "text", text: "Plain Text" },
+        { icon: "html", text: "HTML" },
+      ],
+      splitItems: [
+        { icon: "image", text: "Image" },
+        { icon: "table", text: "Table" },
+      ],
+    };
+  },
+};
+</script>
+
diff --git a/vue-options-api-demos/buttons/toolbar/events/Logger.vue b/vue-options-api-demos/buttons/toolbar/events/Logger.vue
new file mode 100644
index 00000000..aa04a80b
--- /dev/null
+++ b/vue-options-api-demos/buttons/toolbar/events/Logger.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="example-config">
+    <h5>{{ title }}</h5>
+    <ul class="event-log">
+      <li v-for="(event, idx) in events" :key="idx">{{ event }}</li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    events: Array,
+    title: String,
+  },
+};
+</script>
+
+<style scoped>
+.example-config {
+  margin: 0 0 20px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+  margin: 0;
+  padding: 0;
+  max-height: 100px;
+  overflow-y: auto;
+  list-style-type: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: white;
+}
+.event-log li {
+  margin: 0;
+  padding: 0.3em;
+  line-height: 1.2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+  margin-bottom: -1px;
+}
+</style>
\ No newline at end of file
diff --git a/vue-options-api-demos/buttons/toolbar/events/main.js b/vue-options-api-demos/buttons/toolbar/events/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/buttons/toolbar/events/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/buttons/toolbar/events/main.vue b/vue-options-api-demos/buttons/toolbar/events/main.vue
new file mode 100644
index 00000000..1cbd3099
--- /dev/null
+++ b/vue-options-api-demos/buttons/toolbar/events/main.vue
@@ -0,0 +1,145 @@
+<template>
+  <div>
+    <Toolbar @resize="onToolbarResize">
+      <ButtonGroup :class="'k-toolbar-button-group'">
+        <Button
+          :class="'k-toolbar-button'"
+          :svg-icon="boldIcon"
+          :title="'Bold'"
+          :togglable="true"
+        />
+        <Button
+          :class="'k-toolbar-button'"
+          :svg-icon="italicIcon"
+          :title="'Italic'"
+          :togglable="true"
+        />
+        <Button
+          :class="'k-toolbar-button'"
+          :svg-icon="underlineIcon"
+          :title="'Underline'"
+          :togglable="true"
+        />
+      </ButtonGroup>
+      <ButtonGroup :class="'k-toolbar-button-group'">
+        <Button
+          :class="'k-toolbar-button'"
+          :svg-icon="alignLeftIcon"
+          :title="'Align Left'"
+          :togglable="true"
+        />
+        <Button
+          :class="'k-toolbar-button'"
+          :svg-icon="alignCenterIcon"
+          :title="'Align Center'"
+          :togglable="true"
+        />
+        <Button
+          :class="'k-toolbar-button'"
+          :svg-icon="alignRightIcon"
+          :title="'Align Right'"
+          :togglable="true"
+        />
+        <Button
+          :class="'k-toolbar-button'"
+          :svg-icon="alignJustifyIcon"
+          :title="'Align Justify'"
+          :togglable="true"
+        />
+      </ButtonGroup>
+      <ToolbarSpacer />
+      <SplitButton
+        :class="'k-toolbar-split-button'"
+        :text="'Insert'"
+        :items="splitItems"
+      >
+      </SplitButton>
+      <ToolbarSeparator />
+      <Button :class="'k-toolbar-button'" :svg-icon="cutIcon" :title="'Cut'">
+        Cut
+      </Button>
+      <Button :class="'k-toolbar-button'" :svg-icon="copyIcon" :title="'Copy'">
+        Copy
+      </Button>
+      <SplitButton
+        :class="'k-toolbar-split-button'"
+        :text="'Insert'"
+        :items="splitItems"
+      >
+      </SplitButton>
+    </Toolbar>
+    <br />
+    <br />
+    <Logger :title="'Events list'" :events="eventsList" />
+  </div>
+</template>
+
+<script>
+import {
+  Toolbar,
+  ToolbarSeparator,
+  ToolbarSpacer,
+  Button,
+  ButtonGroup,
+  SplitButton,
+} from "@progress/kendo-vue-buttons";
+import {
+  boldIcon,
+  underlineIcon,
+  italicIcon,
+  alignJustifyIcon,
+  alignRightIcon,
+  alignCenterIcon,
+  alignLeftIcon,
+  cutIcon,
+  copyIcon,
+  clipboardIcon,
+} from "@progress/kendo-svg-icons";
+
+import Logger from "./Logger.vue";
+
+export default {
+  components: {
+    Toolbar,
+    ToolbarSeparator,
+    ToolbarSpacer,
+    Button,
+    ButtonGroup,
+    SplitButton,
+    Logger,
+  },
+  computed: {
+    eventsList() {
+      return this.events;
+    },
+  },
+  data: function () {
+    return {
+      boldIcon,
+      underlineIcon,
+      italicIcon,
+      alignJustifyIcon,
+      alignRightIcon,
+      alignCenterIcon,
+      alignLeftIcon,
+      cutIcon,
+      copyIcon,
+      clipboardIcon,
+      events: [],
+      ddItems: [
+        { icon: "text", text: "Plain Text" },
+        { icon: "html", text: "HTML" },
+      ],
+      splitItems: [
+        { icon: "image", text: "Image" },
+        { icon: "table", text: "Table" },
+      ],
+    };
+  },
+  methods: {
+    onToolbarResize() {
+      this.events.unshift("Resize event triggered");
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/toolbar/fill-mode/ToolbarStyleConfigurator.vue b/vue-options-api-demos/buttons/toolbar/fill-mode/ToolbarStyleConfigurator.vue
new file mode 100644
index 00000000..a158132d
--- /dev/null
+++ b/vue-options-api-demos/buttons/toolbar/fill-mode/ToolbarStyleConfigurator.vue
@@ -0,0 +1,63 @@
+<template>
+    <div>
+      <div :style="{ display: 'flex', justifyContent: 'center' }">
+        <span
+          class="k-color-primary"
+          :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+          >Configurator</span
+        >
+      </div>
+      <div
+        class="example-config"
+        :style="{
+            display: 'flex',
+            justifyContent: 'space-between',
+            flexWrap: 'wrap',
+            }"
+      >
+        <span class="k-form-field">
+          <KLabel>
+            Fill Mode
+            <div class="k-form-field-wrap">
+               <DropDownList
+                :data-items="fillModes"
+                :value="fillMode"
+                :style="{
+                  'min-width': '120px',
+                }"
+                @change="handleFillModeChange"
+              />
+            </div>
+          </KLabel>
+        </span>
+      </div>
+    </div>
+</template>
+
+<script>
+  import { Label } from "@progress/kendo-vue-labels";
+  import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+  export default {
+    components: {
+      KLabel: Label,
+      DropDownList,
+    },
+    props: {
+      fillMode: String
+    },
+    emits: [
+      "fillmodechange",
+    ],
+    data() {
+      return {
+        fillModes: ["solid", "outline", "flat"],
+      };
+    },
+    methods: {
+      handleFillModeChange(event) {
+        this.$emit("fillmodechange", event);
+      },
+    },
+  };
+</script>
diff --git a/vue-options-api-demos/buttons/toolbar/fill-mode/main.js b/vue-options-api-demos/buttons/toolbar/fill-mode/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/buttons/toolbar/fill-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/buttons/toolbar/fill-mode/main.vue b/vue-options-api-demos/buttons/toolbar/fill-mode/main.vue
new file mode 100644
index 00000000..5e609885
--- /dev/null
+++ b/vue-options-api-demos/buttons/toolbar/fill-mode/main.vue
@@ -0,0 +1,237 @@
+<template>
+    <div>
+      <ToolbarStyleConfigurator
+        :fill-mode="fillMode"
+        @fillmodechange="setFillMode"
+      />
+      <p>Fill mode applied both to the ToolBar and its tools:</p>
+      <Toolbar :fill-mode="fillMode">
+        <ButtonGroup :class="'k-toolbar-button-group'">
+          <KButton
+            :class="'k-toolbar-button'"
+            :svg-icon="boldIcon"
+            :title="'Bold'"
+            :togglable="true"
+            :fill-mode="fillMode"
+          />
+          <KButton
+            :class="'k-toolbar-button'"
+            :svg-icon="italicIcon"
+            :title="'Italic'"
+            :togglable="true"
+            :fill-mode="fillMode"
+          />
+          <KButton
+            :class="'k-toolbar-button'"
+            :svg-icon="underlineIcon"
+            :title="'Underline'"
+            :togglable="true"
+            :fill-mode="fillMode"
+          />
+        </ButtonGroup>
+        <ToolbarSeparator />
+        <ButtonGroup :class="'k-toolbar-button-group'">
+          <KButton
+            :class="'k-toolbar-button'"
+            :svg-icon="alignLeftIcon"
+            :title="'Align Left'"
+            :togglable="true"
+            :fill-mode="fillMode"
+          />
+          <KButton
+            :class="'k-toolbar-button'"
+            :svg-icon="alignCenterIcon"
+            :title="'Align Center'"
+            :togglable="true"
+            :fill-mode="fillMode"
+          />
+          <KButton
+            :class="'k-toolbar-button'"
+            :svg-icon="alignRightIcon"
+            :title="'Align Right'"
+            :togglable="true"
+            :fill-mode="fillMode"
+          />
+          <KButton
+            :class="'k-toolbar-button'"
+            :svg-icon="alignJustifyIcon"
+            :title="'Align Justify'"
+            :togglable="true"
+            :fill-mode="fillMode"
+          />
+        </ButtonGroup>
+        <ToolbarSpacer />
+        <KButton
+          :class="'k-toolbar-button'"
+          :svg-icon="cutIcon"
+          :title="'Cut'"
+          :fill-mode="fillMode"
+        >
+          Cut
+        </KButton>
+        <KButton
+          :class="'k-toolbar-button'"
+          :svg-icon="copyIcon"
+          :title="'Copy'"
+          :fill-mode="fillMode"
+        >
+          Copy
+        </KButton>
+        <DropDownButton
+          :text="'Paste'"
+          :svg-icon="clipboardIcon"
+          :items="ddItems"
+          :fill-mode="fillMode"
+        />
+        <ToolbarSeparator />
+        <SplitButton
+          :class="'k-toolbar-split-button'"
+          :text="'Insert'"
+          :items="splitItems"
+          :fill-mode="fillMode"
+        />
+      </Toolbar>
+      <p>Fill mode applied to the ToolBar only:</p>
+      <Toolbar :fill-mode="fillMode">
+        <ButtonGroup :class="'k-toolbar-button-group'">
+          <KButton
+            :class="'k-toolbar-button'"
+            :svg-icon="boldIcon"
+            :title="'Bold'"
+            :togglable="true"
+          />
+          <KButton
+            :class="'k-toolbar-button'"
+            :svg-icon="italicIcon"
+            :title="'Italic'"
+            :togglable="true"
+          />
+          <KButton
+            :class="'k-toolbar-button'"
+            :svg-icon="underlineIcon"
+            :title="'Underline'"
+            :togglable="true"
+          />
+        </ButtonGroup>
+        <ToolbarSeparator />
+        <ButtonGroup :class="'k-toolbar-button-group'">
+          <KButton
+            :class="'k-toolbar-button'"
+            :svg-icon="alignLeftIcon"
+            :title="'Align Left'"
+            :togglable="true"
+          />
+          <KButton
+            :class="'k-toolbar-button'"
+            :svg-icon="alignCenterIcon"
+            :title="'Align Center'"
+            :togglable="true"
+          />
+          <KButton
+            :class="'k-toolbar-button'"
+            :svg-icon="alignRightIcon"
+            :title="'Align Right'"
+            :togglable="true"
+          />
+          <KButton
+            :class="'k-toolbar-button'"
+            :svg-icon="alignJustifyIcon"
+            :title="'Align Justify'"
+            :togglable="true"
+          />
+        </ButtonGroup>
+        <ToolbarSpacer />
+        <KButton
+          :class="'k-toolbar-button'"
+          :svg-icon="cutIcon"
+          :title="'Cut'"
+        >
+          Cut
+        </KButton>
+        <KButton
+          :class="'k-toolbar-button'"
+          :svg-icon="copyIcon"
+          :title="'Copy'"
+        >
+          Copy
+        </KButton>
+        <DropDownButton
+          :text="'Paste'"
+          :svg-icon="clipboardIcon"
+          :items="ddItems"
+        />
+        <ToolbarSeparator />
+        <SplitButton
+          :class="'k-toolbar-split-button'"
+          :text="'Insert'"
+          :items="splitItems"
+        />
+      </Toolbar>
+    </div>
+  </template>
+
+  <script>
+  import {
+      Toolbar,
+      ToolbarSeparator,
+      ToolbarSpacer,
+      Button as KButton,
+      ButtonGroup,
+      DropDownButton,
+      SplitButton,
+  } from "@progress/kendo-vue-buttons";
+  import {
+      boldIcon,
+      underlineIcon,
+      italicIcon,
+      alignJustifyIcon,
+      alignRightIcon,
+      alignCenterIcon,
+      alignLeftIcon,
+      cutIcon,
+      copyIcon,
+      clipboardIcon,
+  } from "@progress/kendo-svg-icons";
+  import ToolbarStyleConfigurator from "./ToolbarStyleConfigurator.vue";
+
+  export default {
+      components: {
+          ToolbarStyleConfigurator,
+          Toolbar,
+          ToolbarSeparator,
+          ToolbarSpacer,
+          KButton,
+          ButtonGroup,
+          DropDownButton,
+          SplitButton,
+      },
+      data() {
+          return {
+              fillMode: 'solid',
+              boldIcon,
+              underlineIcon,
+              italicIcon,
+              alignJustifyIcon,
+              alignRightIcon,
+              alignCenterIcon,
+              alignLeftIcon,
+              cutIcon,
+              copyIcon,
+              clipboardIcon,
+              ddItems: [
+                  { icon: "text", text: "Plain Text" },
+                  { icon: "html", text: "HTML" },
+              ],
+              splitItems: [
+                  { icon: "image", text: "Image" },
+                  { icon: "table", text: "Table" },
+              ],
+          };
+      },
+      methods: {
+          setFillMode(event) {
+              this.fillMode = event.value;
+          },
+      },
+  };
+  </script>
diff --git a/vue-options-api-demos/buttons/toolbar/keyboard/main.js b/vue-options-api-demos/buttons/toolbar/keyboard/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/toolbar/keyboard/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/toolbar/keyboard/main.vue b/vue-options-api-demos/buttons/toolbar/keyboard/main.vue
new file mode 100644
index 00000000..3d4cb358
--- /dev/null
+++ b/vue-options-api-demos/buttons/toolbar/keyboard/main.vue
@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <Toolbar>
+      <ButtonGroup :class="'k-toolbar-button-group'">
+        <Button
+          :class="'k-toolbar-button'"
+          :svg-icon="boldIcon"
+          :title="'Bold'"
+          :togglable="true"
+        />
+        <Button
+          :class="'k-toolbar-button'"
+          :svg-icon="italicIcon"
+          :title="'Italic'"
+          :togglable="true"
+        />
+        <Button
+          :class="'k-toolbar-button'"
+          :svg-icon="underlineIcon"
+          :title="'Underline'"
+          :togglable="true"
+        />
+      </ButtonGroup>
+      <ButtonGroup :class="'k-toolbar-button-group'">
+        <Button
+          :class="'k-toolbar-button'"
+          :svg-icon="alignLeftIcon"
+          :title="'Align Left'"
+          :togglable="true"
+        />
+        <Button
+          :class="'k-toolbar-button'"
+          :svg-icon="alignCenterIcon"
+          :title="'Align Center'"
+          :togglable="true"
+        />
+        <Button
+          :class="'k-toolbar-button'"
+          :svg-icon="alignRightIcon"
+          :title="'Align Right'"
+          :togglable="true"
+        />
+        <Button
+          :class="'k-toolbar-button'"
+          :svg-icon="alignJustifyIcon"
+          :title="'Align Justify'"
+          :togglable="true"
+        />
+      </ButtonGroup>
+      <SplitButton
+        :class="'k-toolbar-split-button'"
+        :text="'Insert'"
+        :items="splitItems"
+      >
+      </SplitButton>
+      <ToolbarSeparator />
+      <Button :svg-icon="cutIcon" :title="'Cut'"> Cut </Button>
+      <Button :svg-icon="copyIcon" :title="'Copy'"> Copy </Button>
+      <DropDownButton
+        :text="'Paste'"
+        :svg-icon="clipboardIcon"
+        :items="ddItems"
+      >
+      </DropDownButton>
+    </Toolbar>
+  </div>
+</template>
+
+<script>
+import {
+  Toolbar,
+  ToolbarSeparator,
+  Button,
+  ButtonGroup,
+  DropDownButton,
+  SplitButton,
+} from "@progress/kendo-vue-buttons";
+import {
+  boldIcon,
+  underlineIcon,
+  italicIcon,
+  alignJustifyIcon,
+  alignRightIcon,
+  alignCenterIcon,
+  alignLeftIcon,
+  cutIcon,
+  copyIcon,
+  clipboardIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    Toolbar,
+    ToolbarSeparator,
+    Button,
+    ButtonGroup,
+    DropDownButton,
+    SplitButton,
+  },
+  data: function () {
+    return {
+      boldIcon,
+      underlineIcon,
+      italicIcon,
+      alignJustifyIcon,
+      alignRightIcon,
+      alignCenterIcon,
+      alignLeftIcon,
+      cutIcon,
+      copyIcon,
+      clipboardIcon,
+      ddItems: [
+        { icon: "text", text: "Plain Text" },
+        { icon: "html", text: "HTML" },
+      ],
+      splitItems: [
+        { icon: "image", text: "Image" },
+        { icon: "table", text: "Table" },
+      ],
+    };
+  },
+};
+</script>
+
diff --git a/vue-options-api-demos/buttons/toolbar/overflow-scroll/ToolbarScrollConfigurator.vue b/vue-options-api-demos/buttons/toolbar/overflow-scroll/ToolbarScrollConfigurator.vue
new file mode 100644
index 00000000..927ede92
--- /dev/null
+++ b/vue-options-api-demos/buttons/toolbar/overflow-scroll/ToolbarScrollConfigurator.vue
@@ -0,0 +1,91 @@
+<template>
+    <div :style="{ margin: '-30px -30px 30px -30px' }">
+      <div :style="{ display: 'flex', justifyContent: 'center' }">
+        <span class="k-color-primary"  :style="{ textTransform: 'uppercase', padding: '4px 0' }">Configurator</span>
+      </div>
+
+      <div
+        class="example-config"
+        :style="{
+            display: 'flex',
+            justifyContent: 'space-between',
+            flexWrap: 'wrap',
+        }"
+      >
+        <div class="k-form-field" :style="{ flex: '1 1 300px' }">
+          <KLabel>SCROLL BUTTONS VISIBILITY
+            <div class="k-form-field-wrap">
+                <DropDownList
+                    :data-items="scrollButtonsOptions"
+                    :value="scrollButtons"
+                    :style="{ 'min-width': '120px' }"
+                    @change="handleScrollButtonsChange"/>
+            </div>
+          </KLabel>
+        </div>
+
+        <div class="k-form-field" :style="{ flex: '1 1 300px' }">
+          <KLabel>SCROLL BUTTONS POSITION
+            <div class="k-form-field-wrap">
+            <DropDownList
+                :data-items="scrollButtonsPositionOptions"
+                :value="scrollButtonsPosition"
+                :style="{ 'min-width': '120px' }"
+                @change="handleScrollButtonsPosition"
+            />
+          </div>
+          </KLabel>
+        </div>
+
+        <div class="k-form-field" :style="{ flex: '1 1 300px' }">
+          <KLabel>BUTTONS SCROLL SPEED
+            <div class="k-form-field-wrap">
+            <DropDownList
+                :data-items="buttonScrollSpeedOptions"
+                :value="buttonScrollSpeed"
+                :style="{ 'min-width': '120px' }"
+                @change="handleButtonScrollSpeed"
+            />
+          </div>
+          </KLabel>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+import { Label as KLabel } from '@progress/kendo-vue-labels';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+
+export default {
+    components: {
+        KLabel,
+        DropDownList
+    },
+    props: {
+        scrollButtons:  String,
+        scrollButtonsPosition: String,
+        buttonScrollSpeed: Number,
+    },
+    emits: ['scrollButtonsChange', 'scrollButtonsPositionChange', 'buttonScrollSpeedChange'],
+    data() {
+        return {
+            scrollButtonsOptions: ['auto', 'visible', 'hidden'],
+            scrollButtonsPositionOptions: ['split', 'start', 'end'],
+            buttonScrollSpeedOptions: [100, 300, 500],
+        };
+    },
+    methods: {
+        handleScrollButtonsChange(value) {
+            console.log(value);
+            this.$emit('scrollButtonsChange', value.value);
+        },
+        handleScrollButtonsPosition(value) {
+            this.$emit('scrollButtonsPositionChange', value.value);
+        },
+        handleButtonScrollSpeed(value) {
+            this.$emit('buttonScrollSpeedChange', value.value);
+        },
+    },
+};
+</script>
diff --git a/vue-options-api-demos/buttons/toolbar/overflow-scroll/main.js b/vue-options-api-demos/buttons/toolbar/overflow-scroll/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/toolbar/overflow-scroll/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/toolbar/overflow-scroll/main.vue b/vue-options-api-demos/buttons/toolbar/overflow-scroll/main.vue
new file mode 100644
index 00000000..3671aaa5
--- /dev/null
+++ b/vue-options-api-demos/buttons/toolbar/overflow-scroll/main.vue
@@ -0,0 +1,161 @@
+<template>
+    <div>
+      <ToolbarScrollConfigurator
+        :scrollButtons="scrollButtons"
+        @scrollButtonsChange="setScrollButtons"
+        :scrollButtonsPosition="scrollButtonsPosition"
+        @scrollButtonsPositionChange="setScrollButtonsPosition"
+        :buttonScrollSpeed="buttonScrollSpeed"
+        @buttonScrollSpeedChange="setButtonScrollSpeed"
+      />
+      <Slider
+        v-bind="{ style: { width: '100%', display: 'block' }, buttons: false, min: 0, max: 100, largeStep: 1 }"
+        :value="toolbarWidth"
+        @change="handleToolbarWidthChange"
+      />
+      <Toolbar
+        :overflow="'scroll'"
+        :scroll-buttons="scrollButtons"
+        :scroll-buttons-position="scrollButtonsPosition"
+        :button-scroll-speed="buttonScrollSpeed"
+        :style="{ width: `${toolbarWidth}%` }"
+    >
+        <ButtonGroup>
+          <KButton
+            class="k-toolbar-button"
+            :svgIcon="boldIcon"
+            title="Bold"
+            :togglable="true"
+          />
+          <KButton
+            class="k-toolbar-button"
+            :svgIcon="italicIcon"
+            title="Italic"
+            :togglable="true"
+          />
+          <KButton
+            class="k-toolbar-button"
+            :svgIcon="underlineIcon"
+            title="Underline"
+            :togglable="true"
+          />
+        </ButtonGroup>
+
+        <ToolbarSeparator />
+
+        <ButtonGroup>
+          <KButton
+            class="k-toolbar-button"
+            :svgIcon="alignLeftIcon"
+            title="Align Left"
+            :togglable="true"
+          >
+            Left
+          </KButton>
+          <KButton
+            class="k-toolbar-button"
+            :svgIcon="alignCenterIcon"
+            title="Align Center"
+            :togglable="true"
+          >
+            Center
+          </KButton>
+          <KButton
+            class="k-toolbar-button"
+            :svgIcon="alignRightIcon"
+            title="Align Right"
+            :togglable="true"
+          >
+            Right
+          </KButton>
+          <KButton
+            class="k-toolbar-button"
+            :svgIcon="alignJustifyIcon"
+            title="Align Justify"
+            :togglable="true"
+          >
+            Justify
+          </KButton>
+        </ButtonGroup>
+
+        <ToolbarSeparator />
+
+        <KButton class="k-toolbar-button" :svgIcon="cutIcon" title="Cut">
+          Cut
+        </KButton>
+        <KButton class="k-toolbar-button" :svgIcon="copyIcon" title="Copy">
+          Copy
+        </KButton>
+        <KButton class="k-toolbar-button" :svgIcon="clipboardIcon" title="Paste">
+          Paste
+        </KButton>
+      </Toolbar>
+    </div>
+</template>
+
+<script>
+import {
+    Toolbar,
+    ToolbarSeparator,
+    Button as KButton,
+    ButtonGroup
+} from "@progress/kendo-vue-buttons";
+import { Slider } from "@progress/kendo-vue-inputs";
+import {
+    boldIcon,
+    italicIcon,
+    underlineIcon,
+    alignLeftIcon,
+    alignCenterIcon,
+    alignRightIcon,
+    alignJustifyIcon,
+    cutIcon,
+    copyIcon,
+    clipboardIcon,
+} from '@progress/kendo-svg-icons';
+import ToolbarScrollConfigurator from './ToolbarScrollConfigurator.vue';
+
+export default {
+    components: {
+        Toolbar,
+        ToolbarSeparator,
+        KButton,
+        ButtonGroup,
+        Slider,
+        ToolbarScrollConfigurator
+    },
+    data() {
+        return {
+            boldIcon,
+            underlineIcon,
+            italicIcon,
+            alignJustifyIcon,
+            alignRightIcon,
+            alignCenterIcon,
+            alignLeftIcon,
+            cutIcon,
+            copyIcon,
+            clipboardIcon,
+            toolbarWidth: 60,
+            scrollButtons: 'auto',
+            scrollButtonsPosition: 'split',
+            buttonScrollSpeed: 100
+        };
+    },
+    methods: {
+        handleToolbarWidthChange (event) {
+            this.toolbarWidth = event.value;
+        },
+        setScrollButtons(value) {
+            this.scrollButtons = value;
+        },
+        setScrollButtonsPosition(value) {
+            this.scrollButtonsPosition = value;
+        },
+        setButtonScrollSpeed(value) {
+            this.buttonScrollSpeed = value;
+        }
+    }
+};
+</script>
+
diff --git a/vue-options-api-demos/buttons/toolbar/overflow-section/main.js b/vue-options-api-demos/buttons/toolbar/overflow-section/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/toolbar/overflow-section/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/toolbar/overflow-section/main.vue b/vue-options-api-demos/buttons/toolbar/overflow-section/main.vue
new file mode 100644
index 00000000..25d4a4b0
--- /dev/null
+++ b/vue-options-api-demos/buttons/toolbar/overflow-section/main.vue
@@ -0,0 +1,134 @@
+<template>
+    <div>
+      <Slider
+        v-bind="{ style: { width: '100%', display: 'block' }, buttons: false, min: 0, max: 100, largeStep: 1 }"
+        :value="toolbarWidth"
+        @change="handleToolbarWidthChange"
+      />
+      <Toolbar :overflow="'section'" :style="{ width: `${toolbarWidth}%` }">
+        <ButtonGroup>
+          <KButton
+            class="k-toolbar-button"
+            :svgIcon="boldIcon"
+            title="Bold"
+            :togglable="true"
+          />
+          <KButton
+            class="k-toolbar-button"
+            :svgIcon="italicIcon"
+            title="Italic"
+            :togglable="true"
+          />
+          <KButton
+            class="k-toolbar-button"
+            :svgIcon="underlineIcon"
+            title="Underline"
+            :togglable="true"
+          />
+        </ButtonGroup>
+
+        <ToolbarSeparator />
+
+        <ButtonGroup>
+          <KButton
+            class="k-toolbar-button"
+            :svgIcon="alignLeftIcon"
+            title="Align Left"
+            :togglable="true"
+          >
+            Left
+          </KButton>
+          <KButton
+            class="k-toolbar-button"
+            :svgIcon="alignCenterIcon"
+            title="Align Center"
+            :togglable="true"
+          >
+            Center
+          </KButton>
+          <KButton
+            class="k-toolbar-button"
+            :svgIcon="alignRightIcon"
+            title="Align Right"
+            :togglable="true"
+          >
+            Right
+          </KButton>
+          <KButton
+            class="k-toolbar-button"
+            :svgIcon="alignJustifyIcon"
+            title="Align Justify"
+            :togglable="true"
+          >
+            Justify
+          </KButton>
+        </ButtonGroup>
+
+        <ToolbarSeparator />
+
+        <KButton class="k-toolbar-button" :svgIcon="cutIcon" title="Cut">
+          Cut
+        </KButton>
+        <KButton class="k-toolbar-button" :svgIcon="copyIcon" title="Copy">
+          Copy
+        </KButton>
+        <KButton class="k-toolbar-button" :svgIcon="clipboardIcon" title="Paste">
+          Paste
+        </KButton>
+      </Toolbar>
+    </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+import {
+    Toolbar,
+    ToolbarSeparator,
+    Button as KButton,
+    ButtonGroup
+} from "@progress/kendo-vue-buttons";
+import { Slider } from "@progress/kendo-vue-inputs";
+import {
+    boldIcon,
+    italicIcon,
+    underlineIcon,
+    alignLeftIcon,
+    alignCenterIcon,
+    alignRightIcon,
+    alignJustifyIcon,
+    cutIcon,
+    copyIcon,
+    clipboardIcon,
+} from '@progress/kendo-svg-icons';
+
+export default {
+    components: {
+        Toolbar,
+        ToolbarSeparator,
+        KButton,
+        ButtonGroup,
+        Slider
+    },
+    data() {
+        return {
+            boldIcon,
+            underlineIcon,
+            italicIcon,
+            alignJustifyIcon,
+            alignRightIcon,
+            alignCenterIcon,
+            alignLeftIcon,
+            cutIcon,
+            copyIcon,
+            clipboardIcon,
+            toolbarWidth: 60
+        };
+    },
+    methods: {
+        handleToolbarWidthChange (event) {
+            this.toolbarWidth = event.value;
+        },
+    }
+};
+</script>
+
diff --git a/vue-options-api-demos/buttons/toolbar/size/ToolbarStyleConfigurator.vue b/vue-options-api-demos/buttons/toolbar/size/ToolbarStyleConfigurator.vue
new file mode 100644
index 00000000..a2bc3d1c
--- /dev/null
+++ b/vue-options-api-demos/buttons/toolbar/size/ToolbarStyleConfigurator.vue
@@ -0,0 +1,62 @@
+<template>
+    <div>
+      <div :style="{ display: 'flex', justifyContent: 'center' }">
+        <span
+          class="k-color-primary"
+          :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span>
+      </div>
+      <div
+        class="example-config"
+        :style="{
+          display: 'flex',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+        }"
+      >
+        <span class="k-form-field">
+          <KLabel>
+            Size
+            <div class="k-form-field-wrap">
+              <DropDownList
+                :data-items="sizes"
+                :value="size"
+                :style="{
+                  'min-width': '120px',
+                }"
+                @change="handleSizeChange"
+              />
+            </div>
+          </KLabel>
+        </span>
+      </div>
+    </div>
+</template>
+
+<script>
+  import { Label } from "@progress/kendo-vue-labels";
+  import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+  export default {
+      components: {
+          KLabel: Label,
+          DropDownList,
+      },
+      props: {
+          size: String,
+      },
+      emits: [
+          "sizechange",
+      ],
+      data() {
+          return {
+              sizes: ["small", "medium", "large"],
+          };
+      },
+      methods: {
+          handleSizeChange(event) {
+              this.$emit("sizechange", event);
+          },
+      },
+  };
+</script>
diff --git a/vue-options-api-demos/buttons/toolbar/size/main.js b/vue-options-api-demos/buttons/toolbar/size/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/buttons/toolbar/size/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/buttons/toolbar/size/main.vue b/vue-options-api-demos/buttons/toolbar/size/main.vue
new file mode 100644
index 00000000..66acd50f
--- /dev/null
+++ b/vue-options-api-demos/buttons/toolbar/size/main.vue
@@ -0,0 +1,149 @@
+<template>
+    <div>
+      <ToolbarStyleConfigurator
+        :size="size"
+        @sizechange="setSize"
+      />
+      <Toolbar :size="size">
+        <ButtonGroup :class="'k-toolbar-button-group'">
+          <KButton
+            :class="'k-toolbar-button'"
+            :svg-icon="boldIcon"
+            :title="'Bold'"
+            :togglable="true"
+          />
+          <KButton
+            :class="'k-toolbar-button'"
+            :svg-icon="italicIcon"
+            :title="'Italic'"
+            :togglable="true"
+          />
+          <KButton
+            :class="'k-toolbar-button'"
+            :svg-icon="underlineIcon"
+            :title="'Underline'"
+            :togglable="true"
+          />
+        </ButtonGroup>
+        <ToolbarSeparator />
+        <ButtonGroup :class="'k-toolbar-button-group'">
+          <KButton
+            :class="'k-toolbar-button'"
+            :svg-icon="alignLeftIcon"
+            :title="'Align Left'"
+            :togglable="true"
+          />
+          <KButton
+            :class="'k-toolbar-button'"
+            :svg-icon="alignCenterIcon"
+            :title="'Align Center'"
+            :togglable="true"
+          />
+          <KButton
+            :class="'k-toolbar-button'"
+            :svg-icon="alignRightIcon"
+            :title="'Align Right'"
+            :togglable="true"
+          />
+          <KButton
+            :class="'k-toolbar-button'"
+            :svg-icon="alignJustifyIcon"
+            :title="'Align Justify'"
+            :togglable="true"
+          />
+        </ButtonGroup>
+        <ToolbarSpacer />
+        <KButton
+          :class="'k-toolbar-button'"
+          :svg-icon="cutIcon"
+          :title="'Cut'"
+        >
+          Cut
+        </KButton>
+        <KButton
+          :class="'k-toolbar-button'"
+          :svg-icon="copyIcon"
+          :title="'Copy'"
+        >
+          Copy
+        </KButton>
+        <DropDownButton
+          :text="'Paste'"
+          :svg-icon="clipboardIcon"
+          :items="ddItems"
+        />
+        <ToolbarSeparator />
+        <SplitButton
+          :class="'k-toolbar-split-button'"
+          :text="'Insert'"
+          :items="splitItems"
+        />
+      </Toolbar>
+    </div>
+</template>
+
+<script>
+  import {
+      Toolbar,
+      ToolbarSeparator,
+      ToolbarSpacer,
+      Button as KButton,
+      ButtonGroup,
+      DropDownButton,
+      SplitButton,
+  } from "@progress/kendo-vue-buttons";
+  import {
+      boldIcon,
+      underlineIcon,
+      italicIcon,
+      alignJustifyIcon,
+      alignRightIcon,
+      alignCenterIcon,
+      alignLeftIcon,
+      cutIcon,
+      copyIcon,
+      clipboardIcon,
+  } from "@progress/kendo-svg-icons";
+  import ToolbarStyleConfigurator from "./ToolbarStyleConfigurator.vue";
+
+  export default {
+      components: {
+          ToolbarStyleConfigurator,
+          Toolbar,
+          ToolbarSeparator,
+          ToolbarSpacer,
+          KButton,
+          ButtonGroup,
+          DropDownButton,
+          SplitButton,
+      },
+      data() {
+          return {
+              size: 'medium',
+              boldIcon,
+              underlineIcon,
+              italicIcon,
+              alignJustifyIcon,
+              alignRightIcon,
+              alignCenterIcon,
+              alignLeftIcon,
+              cutIcon,
+              copyIcon,
+              clipboardIcon,
+              ddItems: [
+                  { icon: "text", text: "Plain Text" },
+                  { icon: "html", text: "HTML" },
+              ],
+              splitItems: [
+                  { icon: "image", text: "Image" },
+                  { icon: "table", text: "Table" },
+              ],
+          };
+      },
+      methods: {
+          setSize(event) {
+              this.size = event.value;
+          },
+      },
+  };
+</script>
diff --git a/vue-options-api-demos/buttons/toolbar/tools/main.js b/vue-options-api-demos/buttons/toolbar/tools/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/buttons/toolbar/tools/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/buttons/toolbar/tools/main.vue b/vue-options-api-demos/buttons/toolbar/tools/main.vue
new file mode 100644
index 00000000..d3c17a92
--- /dev/null
+++ b/vue-options-api-demos/buttons/toolbar/tools/main.vue
@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <Toolbar>
+      <ButtonGroup :class="'k-toolbar-button-group'">
+        <Button
+          :class="'k-toolbar-button'"
+          :svg-icon="boldIcon"
+          :title="'Bold'"
+          :togglable="true"
+        />
+        <Button
+          :class="'k-toolbar-button'"
+          :svg-icon="italicIcon"
+          :title="'Italic'"
+          :togglable="true"
+        />
+        <Button
+          :class="'k-toolbar-button'"
+          :svg-icon="underlineIcon"
+          :title="'Underline'"
+          :togglable="true"
+        />
+      </ButtonGroup>
+      <ButtonGroup :class="'k-toolbar-button-group'">
+        <Button
+          :class="'k-toolbar-button'"
+          :svg-icon="alignLeftIcon"
+          :title="'Align Left'"
+          :togglable="true"
+        />
+        <Button
+          :class="'k-toolbar-button'"
+          :svg-icon="alignCenterIcon"
+          :title="'Align Center'"
+          :togglable="true"
+        />
+        <Button
+          :class="'k-toolbar-button'"
+          :svg-icon="alignRightIcon"
+          :title="'Align Right'"
+          :togglable="true"
+        />
+        <Button
+          :class="'k-toolbar-button'"
+          :svg-icon="alignJustifyIcon"
+          :title="'Align Justify'"
+          :togglable="true"
+        />
+      </ButtonGroup>
+      <ToolbarSpacer />
+      <Button :class="'k-toolbar-button'" :svg-icon="cutIcon" :title="'Cut'">
+        Cut
+      </Button>
+      <Button :class="'k-toolbar-button'" :svg-icon="copyIcon" :title="'Copy'">
+        Copy
+      </Button>
+      <SplitButton
+        :class="'k-toolbar-split-button'"
+        :text="'Insert'"
+        :items="splitItems"
+      >
+      </SplitButton>
+      <ToolbarSeparator />
+      <DropDownButton
+        :text="'Paste'"
+        :svg-icon="clipboardIcon"
+        :items="ddItems"
+      >
+      </DropDownButton>
+    </Toolbar>
+  </div>
+</template>
+
+<script>
+import {
+  Toolbar,
+  ToolbarSeparator,
+  ToolbarSpacer,
+  Button,
+  ButtonGroup,
+  DropDownButton,
+  SplitButton,
+} from "@progress/kendo-vue-buttons";
+import {
+  boldIcon,
+  underlineIcon,
+  italicIcon,
+  alignJustifyIcon,
+  alignRightIcon,
+  alignCenterIcon,
+  alignLeftIcon,
+  cutIcon,
+  copyIcon,
+  clipboardIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    Toolbar,
+    ToolbarSeparator,
+    ToolbarSpacer,
+    Button,
+    ButtonGroup,
+    DropDownButton,
+    SplitButton,
+  },
+  data: function () {
+    return {
+      boldIcon,
+      underlineIcon,
+      italicIcon,
+      alignJustifyIcon,
+      alignRightIcon,
+      alignCenterIcon,
+      alignLeftIcon,
+      cutIcon,
+      copyIcon,
+      clipboardIcon,
+      ddItems: [
+        { icon: "text", text: "Plain Text" },
+        { icon: "html", text: "HTML" },
+      ],
+      splitItems: [
+        { icon: "image", text: "Image" },
+        { icon: "table", text: "Table" },
+      ],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/api/axis-title-position/main.js b/vue-options-api-demos/charts/api/axis-title-position/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/api/axis-title-position/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/api/axis-title-position/main.vue b/vue-options-api-demos/charts/api/axis-title-position/main.vue
new file mode 100644
index 00000000..10678847
--- /dev/null
+++ b/vue-options-api-demos/charts/api/axis-title-position/main.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <Chart>
+      <ChartValueAxis>
+        <ChartValueAxisItem :title="{ text: 'Title', position: 'top' }" />
+      </ChartValueAxis>
+    </Chart>
+  </div>
+</template>
+<script>
+import {
+  Chart,
+  ChartValueAxis,
+  ChartValueAxisItem,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Chart,
+    ChartValueAxis,
+    ChartValueAxisItem,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/api/base-unit/main.js b/vue-options-api-demos/charts/api/base-unit/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/api/base-unit/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/api/base-unit/main.vue b/vue-options-api-demos/charts/api/base-unit/main.vue
new file mode 100644
index 00000000..2c628285
--- /dev/null
+++ b/vue-options-api-demos/charts/api/base-unit/main.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <Chart>
+      <ChartXAxis>
+        <ChartXAxisItem :base-unit="baseUnit" />
+      </ChartXAxis>
+      <ChartSeries>
+        <ChartSeriesItem :type="'scatter'" :data-items="data" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+<script>
+import {
+  Chart,
+  ChartXAxis,
+  ChartXAxisItem,
+  ChartSeries,
+  ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Chart,
+    ChartXAxis,
+    ChartXAxisItem,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      baseUnit: "months",
+      data: [
+        [new Date(2000, 0, 1), 1],
+        [new Date(2001, 0, 1), 1],
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/api/category-base-unit/main.js b/vue-options-api-demos/charts/api/category-base-unit/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/api/category-base-unit/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/api/category-base-unit/main.vue b/vue-options-api-demos/charts/api/category-base-unit/main.vue
new file mode 100644
index 00000000..fa5d2692
--- /dev/null
+++ b/vue-options-api-demos/charts/api/category-base-unit/main.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <Chart>
+      <ChartXAxis>
+        <ChartXAxisItem :base-unit="baseUnit" />
+      </ChartXAxis>
+      <ChartSeries>
+        <ChartSeriesItem :category-field="'category'" :data-items="data" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+<script>
+import {
+  Chart,
+  ChartXAxis,
+  ChartXAxisItem,
+  ChartSeries,
+  ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Chart,
+    ChartXAxis,
+    ChartXAxisItem,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      baseUnit: "months",
+      data: [
+        { category: new Date(2000, 0, 1), value: 1 },
+        { category: new Date(2001, 0, 1), value: 1 },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/api/dash-type/main.js b/vue-options-api-demos/charts/api/dash-type/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/api/dash-type/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/api/dash-type/main.vue b/vue-options-api-demos/charts/api/dash-type/main.vue
new file mode 100644
index 00000000..c709ad25
--- /dev/null
+++ b/vue-options-api-demos/charts/api/dash-type/main.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <Chart>
+      <ChartSeries>
+        <ChartSeriesItem :type="'line'" :data-items="data" :dash-type="'dot'" />
+      </ChartSeries>
+    </Chart>
+    );
+  </div>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data() {
+    return {
+      data: [1, 2, 3],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/api/line-style/main.js b/vue-options-api-demos/charts/api/line-style/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/api/line-style/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/api/line-style/main.vue b/vue-options-api-demos/charts/api/line-style/main.vue
new file mode 100644
index 00000000..de91a532
--- /dev/null
+++ b/vue-options-api-demos/charts/api/line-style/main.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <Chart>
+      <ChartSeries>
+        <ChartSeriesItem :type="'line'" :data-items="data" :style="'smooth'" />
+      </ChartSeries>
+    </Chart>
+    );
+  </div>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data() {
+    return {
+      data: [1, 2, 3],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/api/marker-type/main.js b/vue-options-api-demos/charts/api/marker-type/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/api/marker-type/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/api/marker-type/main.vue b/vue-options-api-demos/charts/api/marker-type/main.vue
new file mode 100644
index 00000000..1ceb7478
--- /dev/null
+++ b/vue-options-api-demos/charts/api/marker-type/main.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <Chart>
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'line'"
+          :data-items="data"
+          :markers="{ type: markerType }"
+        />
+      </ChartSeries>
+    </Chart>
+    );
+  </div>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data() {
+    return {
+      data: [1, 2, 3],
+      markerType: "cross",
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/api/note-label-position/main.js b/vue-options-api-demos/charts/api/note-label-position/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/api/note-label-position/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/api/note-label-position/main.vue b/vue-options-api-demos/charts/api/note-label-position/main.vue
new file mode 100644
index 00000000..406a6d4e
--- /dev/null
+++ b/vue-options-api-demos/charts/api/note-label-position/main.vue
@@ -0,0 +1,30 @@
+  <template>
+  <div>
+    <Chart>
+      <ChartValueAxis>
+        <ChartValueAxisItem :notes="{ data, label: { position } }" />
+      </ChartValueAxis>
+    </Chart>
+  </div>
+</template>
+  <script>
+import {
+  Chart,
+  ChartValueAxis,
+  ChartValueAxisItem,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Chart,
+    ChartValueAxis,
+    ChartValueAxisItem,
+  },
+  data() {
+    return {
+      data: [{ value: 1, label: { text: "Foo" } }],
+      position: "outside",
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/api/note-position/main.js b/vue-options-api-demos/charts/api/note-position/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/api/note-position/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/api/note-position/main.vue b/vue-options-api-demos/charts/api/note-position/main.vue
new file mode 100644
index 00000000..eb7d0ed2
--- /dev/null
+++ b/vue-options-api-demos/charts/api/note-position/main.vue
@@ -0,0 +1,30 @@
+  <template>
+  <div>
+    <Chart>
+      <ChartValueAxis>
+        <ChartValueAxisItem :notes="{ data, position }" />
+      </ChartValueAxis>
+    </Chart>
+  </div>
+</template>
+  <script>
+import {
+  Chart,
+  ChartValueAxis,
+  ChartValueAxisItem,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Chart,
+    ChartValueAxis,
+    ChartValueAxisItem,
+  },
+  data() {
+    return {
+      data: [{ value: 1 }],
+      position: "right",
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/chart/box-plot/box-plot-data.json b/vue-options-api-demos/charts/chart/box-plot/box-plot-data.json
new file mode 100644
index 00000000..86449d2e
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/box-plot/box-plot-data.json
@@ -0,0 +1,158 @@
+[{
+    "lower": 1.3,
+    "q1": 2.15,
+    "median": 2.95,
+    "q3": 3.725,
+    "upper": 4.7,
+    "mean": 2.9,
+    "outliers": [1, 9],
+    "year": "1996"
+}, {
+    "lower": 2,
+    "q1": 3.825,
+    "median": 5.45,
+    "q3": 6.425,
+    "upper": 8.2,
+    "mean": 5.2,
+    "outliers": [1.5, 2, 8.9],
+    "year": "1997"
+}, {
+    "lower": 3.8,
+    "q1": 4.725,
+    "median": 5.55,
+    "q3": 5.75,
+    "upper": 8.7,
+    "mean": 5.5,
+    "year": "1998"
+}, {
+    "lower": 3,
+    "q1": 4.375,
+    "median": 4.95,
+    "q3": 5.85,
+    "upper": 8,
+    "mean": 5.2,
+    "outliers": [3, 9.5],
+    "year": "1999"
+}, {
+    "lower": 2.5,
+    "q1": 3.925,
+    "median": 4.15,
+    "q3": 4.45,
+    "upper": 5.1,
+    "mean": 4.1,
+    "year": "2000"
+}, {
+    "lower": 2.4,
+    "q1": 3.725,
+    "median": 4.95,
+    "q3": 5.85,
+    "upper": 7.7,
+    "mean": 4.9,
+    "outliers": [2.1, 8.3, 9.8],
+    "year": "2001"
+}, {
+    "lower": 1.7,
+    "q1": 2.3,
+    "median": 3.9,
+    "q3": 5,
+    "upper": 5.5,
+    "mean": 3.7,
+    "outliers": [1.1, 9.1],
+    "year": "2002"
+}, {
+    "lower": 2.2,
+    "q1": 2.5,
+    "median": 3.1,
+    "q3": 3.975,
+    "upper": 4.3,
+    "mean": 3.2,
+    "outliers": [1.6, 1.8, 9.8],
+    "year": "2003"
+}, {
+   "lower": 1.9,
+   "q1": 2.7,
+   "median": 3.35,
+   "q3": 4.575,
+   "upper": 5.7,
+   "mean": 3.6,
+   "outliers": [1.1, 8.3],
+   "year": "2004"
+}, {
+    "lower": 1.7,
+    "q1": 2.65,
+    "median": 3.3,
+    "q3": 4.05,
+    "upper": 5,
+    "mean": 3.4,
+    "year": "2005"
+}, {
+    "lower": 1.4,
+    "q1": 2.25,
+    "median": 3.3,
+    "q3": 4.65,
+    "upper": 5.7,
+    "mean": 3.4,
+    "year": "2006"
+}, {
+    "lower": 1.9,
+    "q1": 2.85,
+    "median": 4,
+    "q3": 4.45,
+    "upper": 6.1,
+    "mean": 3.9,
+    "outliers": [1, 1.2],
+    "year": "2007"
+}, {
+    "lower": 1.5,
+    "q1": 2.35,
+    "median": 4.1,
+    "q3": 5.225,
+    "upper": 5.7,
+    "mean": 3.9,
+    "outliers": [9, 9.5],
+    "year": "2008"
+}, {
+    "lower": 1.8,
+    "q1": 2.325,
+    "median": 3.35,
+    "q3": 4,
+    "upper": 5.4,
+    "mean": 3.3,
+    "outliers": [1, 6],
+    "year": "2009"
+}, {
+   "lower": 1.8,
+   "q1": 2.75,
+   "median": 3.35,
+   "q3": 3.825,
+   "upper": 4.9,
+   "mean": 3.4,
+   "year": "2010"
+}, {
+    "lower": 1.7,
+    "q1": 2.275,
+    "median": 3.2,
+    "q3": 3.825,
+    "upper": 5.5,
+    "mean": 3.2,
+    "outliers": [0.5, 6.7],
+    "year": "2011"
+}, {
+    "lower": 1.2,
+    "q1": 1.95,
+    "median": 2.45,
+    "q3": 3.075,
+    "upper": 3.5,
+    "mean": 2.5,
+    "year": "2012"
+}, {
+    "lower": 1.3,
+    "q1": 1.9,
+    "median": 3.05,
+    "q3": 3.425,
+    "upper": 4,
+    "mean": 2.7,
+    "outliers": [7, 8.5],
+    "year": "2013"
+}]
+
diff --git a/vue-options-api-demos/charts/chart/box-plot/main.js b/vue-options-api-demos/charts/chart/box-plot/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/box-plot/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/box-plot/main.vue b/vue-options-api-demos/charts/chart/box-plot/main.vue
new file mode 100644
index 00000000..349036a3
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/box-plot/main.vue
@@ -0,0 +1,42 @@
+<template>
+  <Chart>
+    <ChartTitle :text="'Monthly Mean Temperatures (&deg;F)'" />
+    <ChartSeries>
+      <ChartSeriesItem
+        :type="'boxPlot'"
+        :lower-field="'lower'"
+        :q1-field="'q1'"
+        :median-field="'median'"
+        :q3-field="'q3'"
+        :upper-field="'upper'"
+        :outliers-field="'outliers'"
+        :mean-field="'mean'"
+        :category-field="'year'"
+        :data-items="allData"
+      />
+    </ChartSeries>
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartTitle,
+  ChartSeries,
+  ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+import data from "./box-plot-data.json";
+
+export default {
+  components: {
+    Chart,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      allData: data,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/chart/bubble/bubble-data.json b/vue-options-api-demos/charts/chart/bubble/bubble-data.json
new file mode 100644
index 00000000..71ba7eef
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/bubble/bubble-data.json
@@ -0,0 +1,46 @@
+[{
+    "x": -2500,
+    "y": 50000,
+    "size": 500000,
+    "category": "Microsoft"
+}, {
+    "x": 500,
+    "y": 110000,
+    "size": 7600000,
+    "category": "Starbucks"
+}, {
+    "x": 7000,
+    "y": 19000,
+    "size": 700000,
+    "category": "Google"
+}, {
+    "x": 1400,
+    "y": 150000,
+    "size": 700000,
+    "category": "Publix Super Markets"
+}, {
+    "x": 2400,
+    "y": 30000,
+    "size": 300000,
+    "category": "PricewaterhouseCoopers"
+}, {
+    "x": 2450,
+    "y": 34000,
+    "size": 90000,
+    "category": "Cisco"
+}, {
+    "x": 2700,
+    "y": 34000,
+    "size": 400000,
+    "category": "Accenture"
+}, {
+    "x": 2900,
+    "y": 40000,
+    "size": 450000,
+    "category": "Deloitte"
+}, {
+    "x": 3000,
+    "y": 55000,
+    "size": 900000,
+    "category": "Whole Foods Market"
+}]
diff --git a/vue-options-api-demos/charts/chart/bubble/main.js b/vue-options-api-demos/charts/chart/bubble/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/bubble/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/bubble/main.vue b/vue-options-api-demos/charts/chart/bubble/main.vue
new file mode 100644
index 00000000..4d21c694
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/bubble/main.vue
@@ -0,0 +1,73 @@
+<template>
+  <Chart>
+    <ChartTitle :text="'Job Growth'" />
+    <ChartSeries>
+      <ChartSeriesItem
+        :type="'bubble'"
+        :x-field="'x'"
+        :y-field="'y'"
+        :size-field="'size'"
+        :category-field="'category'"
+        :data-items="allData"
+      />
+    </ChartSeries>
+    <ChartXAxis>
+      <ChartXAxisItem
+        :axis-crossing-value="-5000"
+        :major-unit="2000"
+        :plot-bands="xPlotBands"
+        :labels="{ format: '{0:N0}', skip: 1, rotation: 'auto' }"
+      />
+    </ChartXAxis>
+    <ChartYAxis>
+      <ChartYAxisItem :labels="{ format: '{0:N0}' }" />
+    </ChartYAxis>
+    <ChartLegend :visible="true" />
+    <ChartTooltip :format="'{3}: {2:N0} applications'" :opacity="1" />
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartTooltip,
+  ChartTitle,
+  ChartLegend,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartXAxis,
+  ChartXAxisItem,
+  ChartYAxis,
+  ChartYAxisItem,
+} from "@progress/kendo-vue-charts";
+import data from "./bubble-data.json";
+
+const xPlotBands = [
+  {
+    from: -5000,
+    to: 0,
+    color: "#00f",
+    opacity: 0.05,
+  },
+];
+
+export default {
+  components: {
+    Chart,
+    ChartTooltip,
+    ChartTitle,
+    ChartLegend,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartXAxis,
+    ChartXAxisItem,
+    ChartYAxis,
+    ChartYAxisItem,
+  },
+  data: function () {
+    return {
+      allData: data,
+      xPlotBands: xPlotBands,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/chart/bullet/main.js b/vue-options-api-demos/charts/chart/bullet/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/bullet/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/bullet/main.vue b/vue-options-api-demos/charts/chart/bullet/main.vue
new file mode 100644
index 00000000..9894a05f
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/bullet/main.vue
@@ -0,0 +1,189 @@
+<template>
+  <div>
+    <Chart :style="{ height: '120px' }">
+      <ChartTitle :text="'Temperature [&deg;C]'" />
+      <ChartSeries>
+        <ChartSeriesItem :type="'bullet'" :color="'#fff'" :data-items="temp" />
+      </ChartSeries>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem
+          :major-grid-lines="hidden"
+          :minor-grid-lines="hidden"
+        />
+      </ChartCategoryAxis>
+      <ChartValueAxis>
+        <ChartValueAxisItem
+          :major-grid-lines="hidden"
+          :minor-ticks="hidden"
+          :min="-10"
+          :max="45"
+          :plot-bands="tempPlotBands"
+        />
+      </ChartValueAxis>
+      <ChartTooltip :render="'tooltipRender'">
+        <template v-slot:tooltipRender="{ props }">
+          <span>
+            Maximum: {{ props.point.value.target }}
+            <br />
+            Average: {{ props.point.value.current }}
+          </span>
+        </template>
+      </ChartTooltip>
+    </Chart>
+
+    <Chart :style="{ height: '120px' }">
+      <ChartTitle :text="'Humidity [%]'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'bullet'"
+          :color="'#0058e9'"
+          :data-items="hum"
+        />
+      </ChartSeries>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem
+          :major-grid-lines="hidden"
+          :minor-grid-lines="hidden"
+        />
+      </ChartCategoryAxis>
+      <ChartValueAxis>
+        <ChartValueAxisItem
+          :major-grid-lines="hidden"
+          :minor-ticks="hidden"
+          :min="0"
+          :max="100"
+          :plot-bands="humPlotBands"
+        />
+      </ChartValueAxis>
+      <ChartTooltip :render="'tooltipRender'">
+        <template v-slot:tooltipRender="{ props }">
+          <span>
+            Maximum: {{ props.point.value.target }}
+            <br />
+            Average: {{ props.point.value.current }}
+          </span>
+        </template>
+      </ChartTooltip>
+    </Chart>
+
+    <Chart :style="{ height: '120px' }">
+      <ChartTitle :text="'Atmospheric pressure [mmHg]'" />
+      <ChartSeries>
+        <ChartSeriesItem :type="'bullet'" :color="'#111'" :data-items="mmhg" />
+      </ChartSeries>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem
+          :major-grid-lines="hidden"
+          :minor-grid-lines="hidden"
+        />
+      </ChartCategoryAxis>
+      <ChartValueAxis>
+        <ChartValueAxisItem
+          :major-grid-lines="hidden"
+          :minor-ticks="hidden"
+          :min="715"
+          :max="795"
+          :plot-bands="mmhgPlotBands"
+        />
+      </ChartValueAxis>
+      <ChartTooltip :render="'tooltipRender'">
+        <template v-slot:tooltipRender="{ props }">
+          <span>
+            Maximum: {{ props.point.value.target }}
+            <br />
+            Average: {{ props.point.value.current }}
+          </span>
+        </template>
+      </ChartTooltip>
+    </Chart>
+  </div>
+</template>
+<script>
+import {
+  Chart,
+  ChartTitle,
+  ChartTooltip,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartValueAxis,
+  ChartValueAxisItem,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Chart,
+    ChartTitle,
+    ChartTooltip,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartValueAxis,
+    ChartValueAxisItem,
+  },
+  data: function () {
+    return {
+      hidden: { visible: false },
+      tempPlotBands: [
+        {
+          from: 30,
+          to: 45,
+          color: "#e62325",
+          opacity: 1,
+        },
+        {
+          from: 15,
+          to: 30,
+          color: "#ffc000",
+          opacity: 1,
+        },
+        {
+          from: 0,
+          to: 15,
+          color: "#37b400",
+          opacity: 1,
+        },
+        {
+          from: -10,
+          to: 0,
+          color: "#5392ff",
+          opacity: 1,
+        },
+      ],
+      humPlotBands: [
+        {
+          from: 0,
+          to: 33,
+          color: "#ccc",
+          opacity: 0.6,
+        },
+        {
+          from: 33,
+          to: 66,
+          color: "#ccc",
+          opacity: 0.3,
+        },
+      ],
+      mmhgPlotBands: [
+        {
+          from: 715,
+          to: 752,
+          color: "#ccc",
+          opacity: 0.6,
+        },
+        {
+          from: 752,
+          to: 772,
+          color: "#ccc",
+          opacity: 0.3,
+        },
+      ],
+      temp: [[25, 22]],
+      hum: [[45, 60]],
+      mmhg: [[750, 762]],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/chart/chart-instance/main.js b/vue-options-api-demos/charts/chart/chart-instance/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/chart-instance/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/chart-instance/main.vue b/vue-options-api-demos/charts/chart/chart-instance/main.vue
new file mode 100644
index 00000000..812c51ca
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/chart-instance/main.vue
@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <kbutton :type="'button'" @click="onHighlight">
+      Highlight Starbucks
+    </kbutton>
+    <hr class="k-hr" />
+    <Chart ref="chartRef">
+      <ChartTitle :text="'Job Growth'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'bubble'"
+          :data-items="data"
+          :x-field="'x'"
+          :y-field="'y'"
+          :size-field="'size'"
+          :category-field="'category'"
+        />
+      </ChartSeries>
+      <ChartXAxis>
+        <ChartXAxisItem
+          :axis-crossing-value="-5000"
+          :major-unit="2000"
+          :labels="{
+            format: '{0:N0}',
+            skip: 1,
+            rotation: 'auto',
+          }"
+        />
+      </ChartXAxis>
+      <ChartYAxis>
+        <ChartYAxisItem
+          :labels="{
+            format: '{0:N0}',
+          }"
+        />
+      </ChartYAxis>
+      <ChartTooltip :format="'{3}: {2:N0} applications'" :opacity="1" />
+      <ChartLegend :visible="false" />
+    </Chart>
+  </div>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartTitle,
+  ChartTooltip,
+  ChartXAxis,
+  ChartXAxisItem,
+  ChartYAxis,
+  ChartYAxisItem,
+  ChartLegend,
+} from "@progress/kendo-vue-charts";
+import { Button } from "@progress/kendo-vue-buttons";
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartTitle,
+    ChartTooltip,
+    ChartXAxis,
+    ChartXAxisItem,
+    ChartYAxis,
+    ChartYAxisItem,
+    ChartLegend,
+    'kbutton': Button
+  },
+  data: function () {
+    return {
+      data: [
+        {
+          x: 2500,
+          y: 50000,
+          size: 500000,
+          category: "Microsoft",
+        },
+        {
+          x: 500,
+          y: 110000,
+          size: 7600000,
+          category: "Starbucks",
+        },
+        {
+          x: 7000,
+          y: 19000,
+          size: 700000,
+          category: "Google",
+        },
+        {
+          x: 1400,
+          y: 150000,
+          size: 700000,
+          category: "Publix Super Markets",
+        },
+        {
+          x: 2400,
+          y: 30000,
+          size: 300000,
+          category: "PricewaterhouseCoopers",
+        },
+        {
+          x: 2450,
+          y: 34000,
+          size: 90000,
+          category: "Cisco",
+        },
+        {
+          x: 2700,
+          y: 34000,
+          size: 400000,
+          category: "Accenture",
+        },
+        {
+          x: 2900,
+          y: 40000,
+          size: 450000,
+          category: "Deloitte",
+        },
+        {
+          x: 3000,
+          y: 55000,
+          size: 900000,
+          category: "Whole Foods Market",
+        },
+      ],
+    };
+  },
+  methods: {
+    onHighlight() {
+      const chartInstance = this.$refs.chartRef.chartInstance();
+      chartInstance.toggleHighlight(true, (i) => i.category === "Starbucks");
+      chartInstance.showTooltip((i) => i.category === "Starbucks");
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/chart/donut-center-visuals/main.js b/vue-options-api-demos/charts/chart/donut-center-visuals/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/donut-center-visuals/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/donut-center-visuals/main.vue b/vue-options-api-demos/charts/chart/donut-center-visuals/main.vue
new file mode 100644
index 00000000..0321ca8a
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/donut-center-visuals/main.vue
@@ -0,0 +1,107 @@
+<template>
+  <Chart @render="onRender">
+    <template v-slot:donutCenterRenderer>
+      <span><h3>22.5%</h3> of which renewables</span>
+    </template>
+    <ChartSeries>
+      <ChartSeriesItem
+        :type="'donut'"
+        :data-items="dataItems"
+        :category-field="'kind'"
+        :field="'share'"
+        :visual="visualHandler"
+      >
+        <ChartSeriesLabels
+          :color="'#fff'"
+          :background="'none'"
+          :content="labelContent"
+        />
+      </ChartSeriesItem>
+    </ChartSeries>
+
+    <ChartLegend :visible="false" />
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartLegend,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartSeriesLabels,
+} from "@progress/kendo-vue-charts";
+import data from "./power-distribution-data.json";
+import { Layout, Text, geometry } from "@progress/kendo-drawing";
+let center;
+let radius;
+
+const labelContent = (e) => e.category;
+const visualHandler = (e) => {
+  // Obtain parameters for the segments
+  center = e.center;
+  radius = e.innerRadius;
+
+  // Create default visual
+  return e.createVisual();
+};
+export default {
+  components: {
+    Chart,
+    ChartLegend,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartSeriesLabels,
+  },
+  data: function () {
+    return {
+      dataItems: data,
+      labelContent: labelContent,
+      visualHandler: visualHandler,
+    };
+  },
+  methods: {
+    onRender(e) {
+      // The center and radius are populated by now.
+      // We can ask a circle geometry to calculate the bounding rectangle for us.
+      //
+      // http://www.telerik.com/kendo-vue-ui/components/drawing/api/geometry/Circle/
+      const circleGeometry = new geometry.Circle(center, radius);
+      const bbox = circleGeometry.bbox();
+
+      // Render the text
+      //
+      // http://www.telerik.com/kendo-vue-ui/components/drawing/api/Text/
+      const heading = new Text("22.5%", [0, 0], {
+        font: "28px Verdana,Arial,sans-serif",
+      });
+
+      const line1 = new Text("of which", [0, 0], {
+        font: "16px Verdana,Arial,sans-serif",
+      });
+
+      const line2 = new Text("renewables", [0, 0], {
+        font: "16px Verdana,Arial,sans-serif",
+      });
+
+      // Reflow the text in the bounding box
+      //
+      // http://www.telerik.com/kendo-vue-ui/components/drawing/api/Layout
+      // http://www.telerik.com/kendo-vue-ui/components/drawing/api/LayoutOptions
+      const layout = new Layout(bbox, {
+        alignContent: "center",
+        alignItems: "center",
+        justifyContent: "center",
+        spacing: 5,
+      });
+
+      layout.append(heading, line1, line2);
+      layout.reflow();
+
+      // Draw it on the Chart drawing surface
+      //
+      // http://www.telerik.com/kendo-vue-ui/components/charts/api/Chart/#toc-surface
+      e.target.surface().draw(layout);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/chart/donut-center-visuals/power-distribution-data.json b/vue-options-api-demos/charts/chart/donut-center-visuals/power-distribution-data.json
new file mode 100644
index 00000000..1e9bda0c
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/donut-center-visuals/power-distribution-data.json
@@ -0,0 +1,13 @@
+[ {
+    "kind": "Hydroelectric", "share": 0.175
+}, {
+    "kind": "Nuclear", "share": 0.238
+}, {
+    "kind": "Coal", "share": 0.118
+}, {
+    "kind": "Solar", "share": 0.052
+}, {
+    "kind": "Wind", "share": 0.225
+}, {
+    "kind": "Other", "share": 0.192
+} ]
diff --git a/vue-options-api-demos/charts/chart/donut-center/main.js b/vue-options-api-demos/charts/chart/donut-center/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/donut-center/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/donut-center/main.vue b/vue-options-api-demos/charts/chart/donut-center/main.vue
new file mode 100644
index 00000000..139ecb0e
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/donut-center/main.vue
@@ -0,0 +1,50 @@
+<template>
+  <Chart :donut-center-render="'donutCenterRenderer'">
+    <template v-slot:donutCenterRenderer>
+      <span><h3>22.5%</h3> of which renewables</span>
+    </template>
+    <ChartSeries>
+      <ChartSeriesItem
+        :type="'donut'"
+        :data-items="dataItems"
+        :category-field="'kind'"
+        :field="'share'"
+      >
+        <ChartSeriesLabels
+          :color="'#fff'"
+          :background="'none'"
+          :content="labelContent"
+        />
+      </ChartSeriesItem>
+    </ChartSeries>
+    <ChartLegend :visible="false" />
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartLegend,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartSeriesLabels,
+} from "@progress/kendo-vue-charts";
+import data from "./power-distribution-data.json";
+
+const labelContent = (e) => e.category;
+
+export default {
+  components: {
+    Chart,
+    ChartLegend,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartSeriesLabels,
+  },
+  data: function () {
+    return {
+      dataItems: data,
+      labelContent: labelContent,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/chart/donut-center/power-distribution-data.json b/vue-options-api-demos/charts/chart/donut-center/power-distribution-data.json
new file mode 100644
index 00000000..1e9bda0c
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/donut-center/power-distribution-data.json
@@ -0,0 +1,13 @@
+[ {
+    "kind": "Hydroelectric", "share": 0.175
+}, {
+    "kind": "Nuclear", "share": 0.238
+}, {
+    "kind": "Coal", "share": 0.118
+}, {
+    "kind": "Solar", "share": 0.052
+}, {
+    "kind": "Wind", "share": 0.225
+}, {
+    "kind": "Other", "share": 0.192
+} ]
diff --git a/vue-options-api-demos/charts/chart/donut-series/donut-series-data.json b/vue-options-api-demos/charts/chart/donut-series/donut-series-data.json
new file mode 100644
index 00000000..4efe5b5c
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/donut-series/donut-series-data.json
@@ -0,0 +1,55 @@
+[{
+  "name": "2011",
+  "data": [{
+    "category": "Asia",
+    "value": 30.8,
+    "color": "#9de219"
+  }, {
+    "category": "Europe",
+    "value": 21.1,
+    "color": "#90cc38"
+  }, {
+    "category": "Latin America",
+    "value": 16.3,
+    "color": "#068c35"
+  }, {
+    "category": "Africa",
+    "value": 17.6,
+    "color": "#006634"
+  }, {
+    "category": "Middle East",
+    "value": 9.2,
+    "color": "#004d38"
+  }, {
+    "category": "North America",
+    "value": 4.6,
+    "color": "#033939"
+  }]
+}, {
+  "name": "2012",
+  "data": [{
+    "category": "Asia",
+    "value": 53.8,
+    "color": "#9de219"
+  }, {
+    "category": "Europe",
+    "value": 16.1,
+    "color": "#90cc38"
+  }, {
+    "category": "Latin America",
+    "value": 11.3,
+    "color": "#068c35"
+  }, {
+    "category": "Africa",
+    "value": 9.6,
+    "color": "#006634"
+  }, {
+    "category": "Middle East",
+    "value": 5.2,
+    "color": "#004d38"
+  }, {
+    "category": "North America",
+    "value": 3.6,
+    "color": "#033939"
+  }]
+}]
diff --git a/vue-options-api-demos/charts/chart/donut-series/main.js b/vue-options-api-demos/charts/chart/donut-series/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/donut-series/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/donut-series/main.vue b/vue-options-api-demos/charts/chart/donut-series/main.vue
new file mode 100644
index 00000000..57580408
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/donut-series/main.vue
@@ -0,0 +1,70 @@
+<template>
+  <Chart>
+    <ChartTooltip :render="'renderTooltip'">
+      <template v-slot:renderTooltip="{ props }">
+        <div v-if="props">
+          {{ props.point.category }} ({{ props.point.series.name }}):
+          {{ props.point.value }}%
+        </div>
+      </template>
+    </ChartTooltip>
+    <ChartTitle :text="'Share of Internet Population Growth'" />
+    <ChartLegend :visible="false" />
+    <ChartArea :background="'none'" />
+    <ChartSeries>
+      <ChartSeriesItem
+        v-for="(series, index) in internetGrowthData"
+        :type="'donut'"
+        :key="index"
+        :startAngle="150"
+        :name="series.name"
+        :data-items="series.data"
+        :field="'value'"
+        :category-field="'category'"
+        :color-field="'color'"
+      >
+        <ChartSeriesLabels
+          :position="'outsideEnd'"
+          :background="'none'"
+          :content="labelContent"
+        />
+      </ChartSeriesItem>
+    </ChartSeries>
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartArea,
+  ChartTitle,
+  ChartTooltip,
+  ChartLegend,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartSeriesLabels,
+} from "@progress/kendo-vue-charts";
+
+import internetGrowthData from "./donut-series-data.json";
+const labelContent = function (e) {
+  return `${e.category}: \n ${e.value}%`;
+};
+
+export default {
+  components: {
+    Chart,
+    ChartArea,
+    ChartTitle,
+    ChartTooltip,
+    ChartLegend,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartSeriesLabels,
+  },
+  data: function () {
+    return {
+      internetGrowthData: internetGrowthData,
+      labelContent: labelContent,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/chart/donut/main.js b/vue-options-api-demos/charts/chart/donut/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/donut/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/donut/main.vue b/vue-options-api-demos/charts/chart/donut/main.vue
new file mode 100644
index 00000000..112e0e34
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/donut/main.vue
@@ -0,0 +1,47 @@
+<template>
+  <Chart>
+    <ChartSeries>
+      <ChartSeriesItem
+        :type="'donut'"
+        :data-items="dataItems"
+        :category-field="'kind'"
+        :field="'share'"
+      >
+        <ChartSeriesLabels
+          :color="'#fff'"
+          :background="'none'"
+          :content="labelContent"
+        />
+      </ChartSeriesItem>
+    </ChartSeries>
+    <ChartLegend :visible="false" />
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartLegend,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartSeriesLabels,
+} from "@progress/kendo-vue-charts";
+import data from "./power-distribution-data.json";
+
+const labelContent = (e) => e.category;
+
+export default {
+  components: {
+    Chart,
+    ChartLegend,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartSeriesLabels,
+  },
+  data: function () {
+    return {
+      dataItems: data,
+      labelContent: labelContent,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/chart/donut/power-distribution-data.json b/vue-options-api-demos/charts/chart/donut/power-distribution-data.json
new file mode 100644
index 00000000..1e9bda0c
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/donut/power-distribution-data.json
@@ -0,0 +1,13 @@
+[ {
+    "kind": "Hydroelectric", "share": 0.175
+}, {
+    "kind": "Nuclear", "share": 0.238
+}, {
+    "kind": "Coal", "share": 0.118
+}, {
+    "kind": "Solar", "share": 0.052
+}, {
+    "kind": "Wind", "share": 0.225
+}, {
+    "kind": "Other", "share": 0.192
+} ]
diff --git a/vue-options-api-demos/charts/chart/funnel-dynamic/funnel-data.json b/vue-options-api-demos/charts/chart/funnel-dynamic/funnel-data.json
new file mode 100644
index 00000000..781f53f3
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/funnel-dynamic/funnel-data.json
@@ -0,0 +1,21 @@
+[ {
+    "stat": "Impressions ",
+    "count": 434823,
+    "color": "#0e5a7e"
+}, {
+    "stat": "Clicks",
+    "count": 356854,
+    "color": "#166f99"
+}, {
+    "stat": "Unique Visitors",
+    "count": 280022,
+    "color": "#2185b4"
+}, {
+    "stat": "Downloads",
+    "count": 190374,
+    "color": "#319fd2"
+}, {
+    "stat": "Purchases",
+    "count": 120392,
+    "color": "#3eaee2"
+} ]
diff --git a/vue-options-api-demos/charts/chart/funnel-dynamic/main.js b/vue-options-api-demos/charts/chart/funnel-dynamic/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/funnel-dynamic/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/funnel-dynamic/main.vue b/vue-options-api-demos/charts/chart/funnel-dynamic/main.vue
new file mode 100644
index 00000000..e20822cd
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/funnel-dynamic/main.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div className="example-config">
+      <label htmlFor="neckRatio"
+        >Neck ratio ({{neckRation}})
+        <br />
+        <numeric
+          v-model="neckRation"
+          :spinners="true"
+          :min="0"
+          :max="5"
+          :step="0.1"
+        />
+      </label>
+    </div>
+    <Chart :style="{ margin: '0 auto', width: 300 }">
+      <ChartTitle :text="'Sales funnel'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'funnel'"
+          :data-items="dataItems"
+          :category-field="'stat'"
+          :field="'count'"
+          :color-field="'color'"
+          :neck-ratio="neckRation"
+        >
+          <ChartSeriesLabels
+            :color="'white'"
+            :background="'none'"
+            :format="'N0'"
+          />
+        </ChartSeriesItem>
+      </ChartSeries>
+      <ChartTooltip :render="'tooltipRender'">
+        <template v-slot:tooltipRender="{ props }">
+          <span v-if="props">
+            {{ props.point.category }}
+          </span>
+        </template>
+      </ChartTooltip>
+      <ChartLegend :visible="false" />
+    </Chart>
+  </div>
+</template>
+<script>
+import {
+  Chart,
+  ChartTitle,
+  ChartLegend,
+  ChartTooltip,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartSeriesLabels,
+} from "@progress/kendo-vue-charts";
+import { NumericTextBox } from "@progress/kendo-vue-inputs";
+import data from "./funnel-data.json";
+
+export default {
+  components: {
+    Chart,
+    ChartTitle,
+    ChartLegend,
+    ChartTooltip,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartSeriesLabels,
+    numeric: NumericTextBox,
+  },
+  data: function () {
+    return {
+      dataItems: data,
+      neckRation: 0.3,
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/chart/funnel-ratio/funnel-data.json b/vue-options-api-demos/charts/chart/funnel-ratio/funnel-data.json
new file mode 100644
index 00000000..781f53f3
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/funnel-ratio/funnel-data.json
@@ -0,0 +1,21 @@
+[ {
+    "stat": "Impressions ",
+    "count": 434823,
+    "color": "#0e5a7e"
+}, {
+    "stat": "Clicks",
+    "count": 356854,
+    "color": "#166f99"
+}, {
+    "stat": "Unique Visitors",
+    "count": 280022,
+    "color": "#2185b4"
+}, {
+    "stat": "Downloads",
+    "count": 190374,
+    "color": "#319fd2"
+}, {
+    "stat": "Purchases",
+    "count": 120392,
+    "color": "#3eaee2"
+} ]
diff --git a/vue-options-api-demos/charts/chart/funnel-ratio/main.js b/vue-options-api-demos/charts/chart/funnel-ratio/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/funnel-ratio/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/funnel-ratio/main.vue b/vue-options-api-demos/charts/chart/funnel-ratio/main.vue
new file mode 100644
index 00000000..a3a480c0
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/funnel-ratio/main.vue
@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <div class="example-config">
+      <label for="neckRatio"
+        >Dynamic Slope
+        <input
+          :style="{ marginLeft: 5, marginRight: 5 }"
+          type="checkbox"
+          v-model="dynamicSlope"
+        />
+      </label>
+      <label for="neckRatio"
+        >Dynamic Height
+        <input
+          :style="{ marginLeft: 5, marginRight: 5 }"
+          type="checkbox"
+          v-model="dynamicHeight"
+        />
+      </label>
+    </div>
+    <Chart :style="{ margin: '0 auto', width: 300 }">
+      <ChartTitle :text="'Sales funnel'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'funnel'"
+          :data-items="dataItems"
+          :category-field="'stat'"
+          :field="'count'"
+          :color-field="'color'"
+          :dynamic-slope="dynamicSlope"
+          :dynamic-height="dynamicHeight"
+        >
+          <ChartSeriesLabels
+            :color="'white'"
+            :background="'none'"
+            :format="'N0'"
+          />
+        </ChartSeriesItem>
+      </ChartSeries>
+      <ChartTooltip :render="'tooltipRender'">
+        <template v-slot:tooltipRender="{ props }">
+          <span v-if="props">
+            {{ props.point.category }}
+          </span>
+        </template>
+      </ChartTooltip>
+      <ChartLegend :visible="false" />
+    </Chart>
+  </div>
+</template>
+<script>
+import {
+  Chart,
+  ChartTitle,
+  ChartLegend,
+  ChartTooltip,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartSeriesLabels,
+} from "@progress/kendo-vue-charts";
+import data from "./funnel-data.json";
+
+export default {
+  components: {
+    Chart,
+    ChartTitle,
+    ChartLegend,
+    ChartTooltip,
+    ChartSeries,
+    ChartSeriesItem,
+
+    ChartSeriesLabels,
+  },
+  data: function () {
+    return {
+      dataItems: data,
+      dynamicSlope: false,
+      dynamicHeight: false,
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/chart/funnel/funnel-data.json b/vue-options-api-demos/charts/chart/funnel/funnel-data.json
new file mode 100644
index 00000000..781f53f3
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/funnel/funnel-data.json
@@ -0,0 +1,21 @@
+[ {
+    "stat": "Impressions ",
+    "count": 434823,
+    "color": "#0e5a7e"
+}, {
+    "stat": "Clicks",
+    "count": 356854,
+    "color": "#166f99"
+}, {
+    "stat": "Unique Visitors",
+    "count": 280022,
+    "color": "#2185b4"
+}, {
+    "stat": "Downloads",
+    "count": 190374,
+    "color": "#319fd2"
+}, {
+    "stat": "Purchases",
+    "count": 120392,
+    "color": "#3eaee2"
+} ]
diff --git a/vue-options-api-demos/charts/chart/funnel/main.js b/vue-options-api-demos/charts/chart/funnel/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/funnel/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/funnel/main.vue b/vue-options-api-demos/charts/chart/funnel/main.vue
new file mode 100644
index 00000000..2a2045b0
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/funnel/main.vue
@@ -0,0 +1,56 @@
+<template>
+  <Chart :style="{ margin: '0 auto', width: 300 }">
+    <ChartTitle :text="'Sales funnel'" />
+    <ChartSeries>
+      <ChartSeriesItem
+        :type="'funnel'"
+        :data-items="dataItems"
+        :category-field="'stat'"
+        :field="'count'"
+        :color-field="'color'"
+      >
+        <ChartSeriesLabels
+          :color="'white'"
+          :background="'none'"
+          :format="'N0'"
+        />
+      </ChartSeriesItem>
+    </ChartSeries>
+    <ChartTooltip :render="'tooltipRender'">
+      <template v-slot:tooltipRender="{ props }">
+        <span v-if="props">
+          {{ props.point.dataItem.stat }}
+        </span>
+      </template>
+    </ChartTooltip>
+    <ChartLegend :visible="false" />
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartTitle,
+  ChartLegend,
+  ChartTooltip,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartSeriesLabels,
+} from "@progress/kendo-vue-charts";
+import data from "./funnel-data.json";
+export default {
+  components: {
+    Chart,
+    ChartTitle,
+    ChartLegend,
+    ChartTooltip,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartSeriesLabels,
+  },
+  data: function () {
+    return {
+      dataItems: data,
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/chart/globalization/main.js b/vue-options-api-demos/charts/chart/globalization/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/globalization/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/globalization/main.vue b/vue-options-api-demos/charts/chart/globalization/main.vue
new file mode 100644
index 00000000..0dc7c59f
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/globalization/main.vue
@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <div class="example-config">
+      <label>Current local</label>
+      <DropDownList
+        :style="{
+          marginLeft: 5,
+        }"
+        :value="locale"
+        @change="onChange"
+        :data-items="['en', 'es']"
+      />
+    </div>
+    <intl :locale="locale">
+      <Chart>
+        <ChartCategoryAxis>
+          <ChartCategoryAxisItem :categories="categories" />
+        </ChartCategoryAxis>
+        <ChartSeriesDefaults
+          :type="'bar'"
+          :labels="{
+            visible: true,
+            format: 'c',
+          }"
+        />
+        <ChartSeries>
+          <ChartSeriesItem :data-items="salesData" />
+          <ChartSeriesItem :data-items="purchaseData" />
+        </ChartSeries>
+      </Chart>
+    </intl>
+  </div>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartSeriesDefaults,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+} from "@progress/kendo-vue-charts";
+import { NumericTextBox } from "@progress/kendo-vue-inputs";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+import { IntlProvider, load } from "@progress/kendo-vue-intl";
+import likelySubtags from "cldr-core/supplemental/likelySubtags.json";
+import currencyData from "cldr-core/supplemental/currencyData.json";
+import weekData from "cldr-core/supplemental/weekData.json";
+
+import numbers from "cldr-numbers-full/main/es/numbers.json";
+import currencies from "cldr-numbers-full/main/es/currencies.json";
+import caGregorian from "cldr-dates-full/main/es/ca-gregorian.json";
+import dateFields from "cldr-dates-full/main/es/dateFields.json";
+load(
+  likelySubtags,
+  currencyData,
+  weekData,
+  numbers,
+  currencies,
+  caGregorian,
+  dateFields
+);
+const salesData = [20, 40, 45, 30, 50];
+const purchaseData = [12, 30, 30, 45, 10];
+const categories = ["Mon", "Tue", "Wed", "Thu", "Fri"];
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartSeriesDefaults,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    intl: IntlProvider,
+    numerictextbox: NumericTextBox,
+    DropDownList,
+  },
+  data: function () {
+    return {
+      salesData: salesData,
+      purchaseData: purchaseData,
+      categories: categories,
+      locale: "en",
+    };
+  },
+  methods: {
+    onChange(event) {
+      this.locale = event.value;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/chart/heatmap/basic/heatmap-data.js b/vue-options-api-demos/charts/chart/heatmap/basic/heatmap-data.js
new file mode 100644
index 00000000..a7e924a2
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/heatmap/basic/heatmap-data.js
@@ -0,0 +1,108 @@
+const data = [
+    [1, 0, 0],
+    [1, 1, 4],
+    [1, 2, 7],
+    [1, 3, 14],
+    [1, 4, 10],
+    [1, 5, 8],
+    [1, 6, 0],
+    [2, 0, 0],
+    [2, 1, 6],
+    [2, 2, 9],
+    [2, 3, 12],
+    [2, 4, 12],
+    [2, 5, 6],
+    [2, 6, 0],
+    [3, 0, 0],
+    [3, 1, 5],
+    [3, 2, 8],
+    [3, 3, 11],
+    [3, 4, 0],
+    [3, 5, 5],
+    [3, 6, 0],
+    [4, 0, 0],
+    [4, 1, 0],
+    [4, 2, 0],
+    [4, 3, 0],
+    [4, 4, 0],
+    [4, 5, 0],
+    [4, 6, 0],
+    [5, 0, 0],
+    [5, 1, 0],
+    [5, 2, 0],
+    [5, 3, 0],
+    [5, 4, 0],
+    [5, 5, 0],
+    [5, 6, 0],
+    [6, 0, 0],
+    [6, 1, 4],
+    [6, 2, 7],
+    [6, 3, 14],
+    [6, 4, 10],
+    [6, 5, 8],
+    [6, 6, 0],
+    [7, 0, 0],
+    [7, 1, 6],
+    [7, 2, 9],
+    [7, 3, 2],
+    [7, 4, 4],
+    [7, 5, 6],
+    [7, 6, 0],
+    [8, 0, 0],
+    [8, 1, 4],
+    [8, 2, 7],
+    [8, 3, 14],
+    [8, 4, 10],
+    [8, 5, 8],
+    [8, 6, 0],
+    [9, 0, 0],
+    [9, 1, 4],
+    [9, 2, 7],
+    [9, 3, 4],
+    [9, 4, 1],
+    [9, 5, 8],
+    [9, 6, 0],
+    [10, 0, 0],
+    [10, 1, 6],
+    [10, 2, 9],
+    [10, 3, 12],
+    [10, 4, 12],
+    [10, 5, 6],
+    [10, 6, 0],
+    [11, 0, 0],
+    [11, 1, 4],
+    [11, 2, 7],
+    [11, 3, 10],
+    [11, 4, 10],
+    [11, 5, 8],
+    [11, 6, 0],
+    [12, 0, 0],
+    [12, 1, 4],
+    [12, 2, 7],
+    [12, 3, 8],
+    [12, 4, 10],
+    [12, 5, 4],
+    [12, 6, 0],
+    [13, 0, 0],
+    [13, 1, 4],
+    [13, 2, 7],
+    [13, 3, 11],
+    [13, 4, 0],
+    [13, 5, 8],
+    [13, 6, 0],
+    [14, 0, 0],
+    [14, 1, 6],
+    [14, 2, 9],
+    [14, 3, 6],
+    [14, 4, 8],
+    [14, 5, 6],
+    [14, 6, 0],
+    [15, 0, 0],
+    [15, 1, 4],
+    [15, 2, 7],
+    [15, 3, 7],
+    [15, 4, 10],
+    [15, 5, 8],
+    [15, 6, 0],
+];
+export default data;
diff --git a/vue-options-api-demos/charts/chart/heatmap/basic/main.js b/vue-options-api-demos/charts/chart/heatmap/basic/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/heatmap/basic/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/heatmap/basic/main.vue b/vue-options-api-demos/charts/chart/heatmap/basic/main.vue
new file mode 100644
index 00000000..3267ba7c
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/heatmap/basic/main.vue
@@ -0,0 +1,85 @@
+<template>
+    <Chart
+      :style="{
+        width: '100%',
+        height: '220px',
+      }"
+    >
+      <ChartTitle
+        :text="'Contributions per day'"
+        :margin="{
+          left: 40,
+        }"
+      />
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'heatmap'"
+          :data-items="seriesData"
+          :color="'#216e39'"
+          :labels="{
+            visible: false,
+          }"
+          :markers="{
+            type: 'roundedRect',
+            border: {
+              width: 2,
+            },
+          }"
+        />
+      </ChartSeries>
+
+      <ChartXAxis>
+        <ChartXAxisItem :visible="false" />
+      </ChartXAxis>
+
+      <ChartYAxis>
+        <ChartYAxisItem
+          :reverse="true"
+          :line="{ visible: false }"
+          :labels="{
+            content: yAxisLabelContent,
+          }"
+        />
+      </ChartYAxis>
+    </Chart>
+  </template>
+
+<script>
+import {
+    Chart,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartXAxisItem,
+    ChartXAxis,
+    ChartYAxisItem,
+    ChartYAxis,
+} from '@progress/kendo-vue-charts';
+
+import data from './heatmap-data';
+const dayLabels = {
+    1: 'Mon',
+    3: 'Wed',
+    5: 'Fri',
+};
+const yAxisLabelContent = (e) =>  dayLabels[e.value] || '';
+
+export default {
+    components: {
+        Chart,
+        ChartTitle,
+        ChartSeries,
+        ChartSeriesItem,
+        ChartXAxisItem,
+        ChartXAxis,
+        ChartYAxisItem,
+        ChartYAxis,
+    },
+    data() {
+        return {
+            seriesData: data,
+            yAxisLabelContent,
+        };
+    },
+};
+</script>
diff --git a/vue-options-api-demos/charts/chart/heatmap/binding-categories/main.js b/vue-options-api-demos/charts/chart/heatmap/binding-categories/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/heatmap/binding-categories/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/heatmap/binding-categories/main.vue b/vue-options-api-demos/charts/chart/heatmap/binding-categories/main.vue
new file mode 100644
index 00000000..631a434b
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/heatmap/binding-categories/main.vue
@@ -0,0 +1,50 @@
+<template>
+    <Chart
+      :style="{
+        width: '100%',
+        height: '220px',
+      }"
+    >
+      <ChartSeries>
+        <ChartSeriesItem :type="'heatmap'" :data-items="dataItems" />
+      </ChartSeries>
+      <ChartXAxis>
+        <ChartXAxisItem :categories="categories.x" />
+      </ChartXAxis>
+      <ChartYAxis>
+        <ChartYAxisItem :categories="categories.y" />
+      </ChartYAxis>
+    </Chart>
+  </template>
+<script>
+import {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartXAxis,
+    ChartXAxisItem,
+    ChartYAxis,
+    ChartYAxisItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+    components: {
+        Chart,
+        ChartSeries,
+        ChartSeriesItem,
+        ChartXAxis,
+        ChartXAxisItem,
+        ChartYAxis,
+        ChartYAxisItem,
+    },
+    data() {
+        return {
+            dataItems: [['A2', 'B3', 5]],
+            categories: {
+                x: ['A1', 'A2', 'A3', 'A4'],
+                y: ['B1', 'B2', 'B3', 'B4'],
+            },
+        };
+    },
+};
+</script>
diff --git a/vue-options-api-demos/charts/chart/heatmap/binding-objects/main.js b/vue-options-api-demos/charts/chart/heatmap/binding-objects/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/heatmap/binding-objects/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/heatmap/binding-objects/main.vue b/vue-options-api-demos/charts/chart/heatmap/binding-objects/main.vue
new file mode 100644
index 00000000..f4ef8060
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/heatmap/binding-objects/main.vue
@@ -0,0 +1,48 @@
+<template>
+  <Chart>
+    <ChartSeries>
+      <ChartSeriesItem
+        :type="'heatmap'"
+        :data-items="dataItems"
+        :xField="'a'"
+        :yField="'b'"
+      />
+    </ChartSeries>
+  </Chart>
+</template>
+<script>
+import {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+    components: {
+        Chart,
+        ChartSeries,
+        ChartSeriesItem,
+    },
+    data() {
+        return {
+            dataItems: this.makeDataObjects(10, 10),
+            seriesType: 'verticalLine',
+        };
+    },
+    methods: {
+        makeDataObjects(rows, cols) {
+            const data = [];
+            for (let rowIndex = 0; rowIndex < rows; rowIndex++) {
+                Array.from(Array(cols)).map((_, colIndex) => {
+                    data.push({
+                        a: `А${rowIndex + 1}`,
+                        b: `B${colIndex + 1}`,
+                        value: cols + rowIndex * colIndex,
+                    });
+                });
+            }
+            return data;
+        },
+    },
+};
+</script>
diff --git a/vue-options-api-demos/charts/chart/heatmap/color-scale/main.js b/vue-options-api-demos/charts/chart/heatmap/color-scale/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/heatmap/color-scale/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/heatmap/color-scale/main.vue b/vue-options-api-demos/charts/chart/heatmap/color-scale/main.vue
new file mode 100644
index 00000000..84873d20
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/heatmap/color-scale/main.vue
@@ -0,0 +1,54 @@
+<template>
+    <div>
+      <Chart>
+        <ChartSeries>
+          <ChartSeriesItem
+            :type="'heatmap'"
+            :data-items="dataItems"
+            :x-field="'a'"
+            :y-field="'b'"
+            :field="'value'"
+            :color="color"
+          />
+        </ChartSeries>
+      </Chart>
+    </div>
+  </template>
+
+<script>
+import {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+import { interpolateCividis } from 'd3-scale-chromatic';
+
+export default {
+    components: {
+        Chart,
+        ChartSeries,
+        ChartSeriesItem,
+    },
+    data() {
+        return {
+            dataItems: this.makeDataObjects(10, 10),
+        };
+    },
+    methods: {
+        color: (e) => interpolateCividis(e.value.value / e.max),
+        makeDataObjects(rows, cols) {
+            const data = [];
+            for (let rowIndex = 0; rowIndex < rows; rowIndex++) {
+                Array.from(Array(cols)).map((_, colIndex) => {
+                    data.push({
+                        a: `А${rowIndex + 1}`,
+                        b: `B${colIndex + 1}`,
+                        value: cols + rowIndex * colIndex,
+                    });
+                });
+            }
+            return data;
+        },
+    },
+};
+</script>
diff --git a/vue-options-api-demos/charts/chart/heatmap/crosshairs/main.js b/vue-options-api-demos/charts/chart/heatmap/crosshairs/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/heatmap/crosshairs/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/heatmap/crosshairs/main.vue b/vue-options-api-demos/charts/chart/heatmap/crosshairs/main.vue
new file mode 100644
index 00000000..f34ab724
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/heatmap/crosshairs/main.vue
@@ -0,0 +1,80 @@
+<template>
+  <Chart>
+    <ChartSeries>
+      <ChartSeriesItem
+        type="heatmap"
+        :data-items="dataItems"
+        :x-field="'a'"
+        :y-field="'b'"
+        :field="'value'"
+      />
+    </ChartSeries>
+
+    <ChartXAxis>
+      <ChartXAxisItem :visible="false">
+        <ChartXAxisCrosshair :width="0.5" :color="'red'">
+          <ChartAxisDefaultsCrosshairTooltip />
+        </ChartXAxisCrosshair>
+      </ChartXAxisItem>
+    </ChartXAxis>
+
+    <ChartYAxis>
+      <ChartYAxisItem :visible="false">
+        <ChartYAxisCrosshair :width="0.5" :color="'red'">
+          <ChartYAxisCrosshairTooltip />
+        </ChartYAxisCrosshair>
+      </ChartYAxisItem>
+    </ChartYAxis>
+  </Chart>
+</template>
+<script>
+import {
+    Chart,
+    ChartAxisDefaultsCrosshairTooltip,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartXAxis,
+    ChartXAxisCrosshair,
+    ChartXAxisItem,
+    ChartYAxis,
+    ChartYAxisCrosshair,
+    ChartYAxisCrosshairTooltip,
+    ChartYAxisItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+    components: {
+        Chart,
+        ChartAxisDefaultsCrosshairTooltip,
+        ChartSeries,
+        ChartSeriesItem,
+        ChartXAxis,
+        ChartXAxisCrosshair,
+        ChartXAxisItem,
+        ChartYAxis,
+        ChartYAxisCrosshair,
+        ChartYAxisCrosshairTooltip,
+        ChartYAxisItem,
+    },
+    data() {
+        return {
+            dataItems: this.makeDataObjects(10, 10),
+        };
+    },
+    methods: {
+        makeDataObjects(rows, cols) {
+            const data = [];
+            for (let rowIndex = 0; rowIndex < rows; rowIndex++) {
+                Array.from(Array(cols)).map((_, colIndex) => {
+                    data.push({
+                        a: `А${rowIndex + 1}`,
+                        b: `B${colIndex + 1}`,
+                        value: cols + rowIndex * colIndex,
+                    });
+                });
+            }
+            return data;
+        },
+    },
+};
+</script>
diff --git a/vue-options-api-demos/charts/chart/heatmap/marker-shapes/main.js b/vue-options-api-demos/charts/chart/heatmap/marker-shapes/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/heatmap/marker-shapes/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/heatmap/marker-shapes/main.vue b/vue-options-api-demos/charts/chart/heatmap/marker-shapes/main.vue
new file mode 100644
index 00000000..ce82e3c6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/heatmap/marker-shapes/main.vue
@@ -0,0 +1,100 @@
+<template>
+    <div>
+      <div className="example-config d-flex">
+        <div className="col-12 col-md-12">
+          <h6>Marker shape</h6>
+          <RadioGroup
+            :data-items="shapes"
+            :layout="'horizontal'"
+            :value="shape"
+            @change="handleShapeChange"
+          />
+        </div>
+      </div>
+
+      <Chart>
+        <ChartSeries>
+          <ChartSeriesItem
+            :type="'heatmap'"
+            :data-items="dataItems"
+            :x-field="'a'"
+            :y-field="'b'"
+            :field="'value'"
+          >
+            <ChartSeriesMarkers :type="shape" :border="{ width: 1 }" />
+            <ChartSeriesLabels :visible="false" />
+          </ChartSeriesItem>
+        </ChartSeries>
+        <ChartXAxis>
+          <ChartXAxisItem :labels="{ rotation: 'auto' }" />
+        </ChartXAxis>
+      </Chart>
+    </div>
+  </template>
+<script>
+import {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartSeriesLabels,
+    ChartSeriesMarkers,
+    ChartXAxisItem,
+    ChartXAxis,
+} from '@progress/kendo-vue-charts';
+import { RadioGroup } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        Chart,
+        ChartSeries,
+        ChartSeriesItem,
+        ChartSeriesLabels,
+        ChartSeriesMarkers,
+        ChartXAxisItem,
+        ChartXAxis,
+        RadioGroup,
+    },
+    data() {
+        return {
+            dataItems: this.makeDataObjects(10, 10),
+            shape: 'roundedRect',
+            shapes: [
+                {
+                    label: 'Rectange',
+                    value: 'rect',
+                },
+                {
+                    label: 'Rounded Rectangle',
+                    value: 'roundedRect',
+                },
+                {
+                    label: 'Circle',
+                    value: 'circle',
+                },
+                {
+                    label: 'Triangle',
+                    value: 'triangle',
+                },
+            ],
+        };
+    },
+    methods: {
+        makeDataObjects(rows, cols) {
+            const data = [];
+            for (let rowIndex = 0; rowIndex < rows; rowIndex++) {
+                Array.from(Array(cols)).map((_, colIndex) => {
+                    data.push({
+                        a: `А${rowIndex + 1}`,
+                        b: `B${colIndex + 1}`,
+                        value: cols + rowIndex * colIndex,
+                    });
+                });
+            }
+            return data;
+        },
+        handleShapeChange(e) {
+            this.shape = e.value;
+        },
+    },
+};
+</script>
diff --git a/vue-options-api-demos/charts/chart/heatmap/marker-size/main.js b/vue-options-api-demos/charts/chart/heatmap/marker-size/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/heatmap/marker-size/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/heatmap/marker-size/main.vue b/vue-options-api-demos/charts/chart/heatmap/marker-size/main.vue
new file mode 100644
index 00000000..b70561ca
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/heatmap/marker-size/main.vue
@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <div className="example-config d-flex">
+      <div className="col-12 col-md-12">
+        <h6>Marker size</h6>
+        <RadioGroup
+          :data-items="sizes"
+          :layout="'horizontal'"
+          :value="size"
+          @change="handleSizeChange"
+        />
+      </div>
+    </div>
+    <Chart>
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'heatmap'"
+          :data-items="dataItems"
+          :x-field="'a'"
+          :y-field="'b'"
+          :field="'value'"
+        >
+          <ChartSeriesMarkers :type="'roundedRect'" :size="size" />
+          <ChartSeriesLabels :visible="false" />
+        </ChartSeriesItem>
+      </ChartSeries>
+      <ChartXAxis>
+        <ChartXAxisItem :labels="{ rotation: 'auto' }" />
+      </ChartXAxis>
+    </Chart>
+  </div>
+</template>
+<script>
+import {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartSeriesLabels,
+    ChartSeriesMarkers,
+    ChartXAxisItem,
+    ChartXAxis,
+} from '@progress/kendo-vue-charts';
+import { RadioGroup } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        Chart,
+        ChartSeries,
+        ChartSeriesItem,
+        ChartSeriesLabels,
+        ChartSeriesMarkers,
+        ChartXAxisItem,
+        ChartXAxis,
+        RadioGroup,
+    },
+    data() {
+        return {
+            dataItems: this.makeDataObjects(10, 10),
+            size: 0,
+            sizes: [
+                {
+                    label: 'Fixed spacing',
+                    value: 0,
+                },
+                {
+                    label: 'Fixed size',
+                    value: 30,
+                },
+            ],
+        };
+    },
+    methods: {
+        makeDataObjects(rows, cols) {
+            const data = [];
+            for (let rowIndex = 0; rowIndex < rows; rowIndex++) {
+                Array.from(Array(cols)).map((_, colIndex) => {
+                    data.push({
+                        a: `А${rowIndex + 1}`,
+                        b: `B${colIndex + 1}`,
+                        value: cols + rowIndex * colIndex,
+                    });
+                });
+            }
+            return data;
+        },
+        handleSizeChange(e) {
+            this.size = e.value;
+        },
+    },
+};
+</script>
diff --git a/vue-options-api-demos/charts/chart/heatmap/pan-zoom/main.js b/vue-options-api-demos/charts/chart/heatmap/pan-zoom/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/heatmap/pan-zoom/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/heatmap/pan-zoom/main.vue b/vue-options-api-demos/charts/chart/heatmap/pan-zoom/main.vue
new file mode 100644
index 00000000..1a664326
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/heatmap/pan-zoom/main.vue
@@ -0,0 +1,73 @@
+<template>
+  <Chart :pannable="true" :zoomable="true" :render-аs="'canvas'">
+    <ChartSeries>
+      <ChartSeriesItem
+        :type="'heatmap'"
+        :data-items="dataItems"
+        :x-field="'a'"
+        :y-field="'b'"
+        :field="'value'"
+        :labels="{
+          visible: false,
+        }"
+      />
+    </ChartSeries>
+
+    <ChartXAxis>
+      <ChartXAxisItem
+        :min="10"
+        :max="15"
+        :labels="{
+          rotation: 'auto',
+        }"
+      />
+    </ChartXAxis>
+
+    <ChartYAxis>
+      <ChartYAxisItem :min="10" :max="15" />
+    </ChartYAxis>
+  </Chart>
+</template>
+<script>
+import {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartXAxisItem,
+    ChartXAxis,
+    ChartYAxisItem,
+    ChartYAxis,
+} from '@progress/kendo-vue-charts';
+
+export default {
+    components: {
+        Chart,
+        ChartSeries,
+        ChartSeriesItem,
+        ChartXAxisItem,
+        ChartXAxis,
+        ChartYAxisItem,
+        ChartYAxis,
+    },
+    data() {
+        return {
+            dataItems: this.makeDataObjects(25, 25),
+        };
+    },
+    methods: {
+        makeDataObjects(rows, cols) {
+            const data = [];
+            for (let rowIndex = 0; rowIndex < rows; rowIndex++) {
+                Array.from(Array(cols)).map((_, colIndex) => {
+                    data.push({
+                        a: `А${rowIndex + 1}`,
+                        b: `B${colIndex + 1}`,
+                        value: cols + rowIndex * colIndex,
+                    });
+                });
+            }
+            return data;
+        },
+    },
+};
+</script>
diff --git a/vue-options-api-demos/charts/chart/heatmap/tooltips/heatmap-data.js b/vue-options-api-demos/charts/chart/heatmap/tooltips/heatmap-data.js
new file mode 100644
index 00000000..a7e924a2
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/heatmap/tooltips/heatmap-data.js
@@ -0,0 +1,108 @@
+const data = [
+    [1, 0, 0],
+    [1, 1, 4],
+    [1, 2, 7],
+    [1, 3, 14],
+    [1, 4, 10],
+    [1, 5, 8],
+    [1, 6, 0],
+    [2, 0, 0],
+    [2, 1, 6],
+    [2, 2, 9],
+    [2, 3, 12],
+    [2, 4, 12],
+    [2, 5, 6],
+    [2, 6, 0],
+    [3, 0, 0],
+    [3, 1, 5],
+    [3, 2, 8],
+    [3, 3, 11],
+    [3, 4, 0],
+    [3, 5, 5],
+    [3, 6, 0],
+    [4, 0, 0],
+    [4, 1, 0],
+    [4, 2, 0],
+    [4, 3, 0],
+    [4, 4, 0],
+    [4, 5, 0],
+    [4, 6, 0],
+    [5, 0, 0],
+    [5, 1, 0],
+    [5, 2, 0],
+    [5, 3, 0],
+    [5, 4, 0],
+    [5, 5, 0],
+    [5, 6, 0],
+    [6, 0, 0],
+    [6, 1, 4],
+    [6, 2, 7],
+    [6, 3, 14],
+    [6, 4, 10],
+    [6, 5, 8],
+    [6, 6, 0],
+    [7, 0, 0],
+    [7, 1, 6],
+    [7, 2, 9],
+    [7, 3, 2],
+    [7, 4, 4],
+    [7, 5, 6],
+    [7, 6, 0],
+    [8, 0, 0],
+    [8, 1, 4],
+    [8, 2, 7],
+    [8, 3, 14],
+    [8, 4, 10],
+    [8, 5, 8],
+    [8, 6, 0],
+    [9, 0, 0],
+    [9, 1, 4],
+    [9, 2, 7],
+    [9, 3, 4],
+    [9, 4, 1],
+    [9, 5, 8],
+    [9, 6, 0],
+    [10, 0, 0],
+    [10, 1, 6],
+    [10, 2, 9],
+    [10, 3, 12],
+    [10, 4, 12],
+    [10, 5, 6],
+    [10, 6, 0],
+    [11, 0, 0],
+    [11, 1, 4],
+    [11, 2, 7],
+    [11, 3, 10],
+    [11, 4, 10],
+    [11, 5, 8],
+    [11, 6, 0],
+    [12, 0, 0],
+    [12, 1, 4],
+    [12, 2, 7],
+    [12, 3, 8],
+    [12, 4, 10],
+    [12, 5, 4],
+    [12, 6, 0],
+    [13, 0, 0],
+    [13, 1, 4],
+    [13, 2, 7],
+    [13, 3, 11],
+    [13, 4, 0],
+    [13, 5, 8],
+    [13, 6, 0],
+    [14, 0, 0],
+    [14, 1, 6],
+    [14, 2, 9],
+    [14, 3, 6],
+    [14, 4, 8],
+    [14, 5, 6],
+    [14, 6, 0],
+    [15, 0, 0],
+    [15, 1, 4],
+    [15, 2, 7],
+    [15, 3, 7],
+    [15, 4, 10],
+    [15, 5, 8],
+    [15, 6, 0],
+];
+export default data;
diff --git a/vue-options-api-demos/charts/chart/heatmap/tooltips/main.js b/vue-options-api-demos/charts/chart/heatmap/tooltips/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/heatmap/tooltips/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/heatmap/tooltips/main.vue b/vue-options-api-demos/charts/chart/heatmap/tooltips/main.vue
new file mode 100644
index 00000000..1787f951
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/heatmap/tooltips/main.vue
@@ -0,0 +1,53 @@
+<template>
+  <Chart>
+    <ChartTooltip :render="'defaultTooltipRender'">
+      <template v-slot:defaultTooltipRender="{ props }">
+        {{ props.point.value.value }} contributions on week
+        {{ props.point.value.x }}, day
+        {{ props.point.value.y }}
+      </template>
+    </ChartTooltip>
+    <ChartSeries>
+      <ChartSeriesItem :type="'heatmap'" :data-items="dataItems" />
+    </ChartSeries>
+
+    <ChartXAxis>
+      <ChartXAxisItem :visible="false" />
+    </ChartXAxis>
+
+    <ChartYAxis>
+      <ChartYAxisItem :visible="false" />
+    </ChartYAxis>
+  </Chart>
+</template>
+<script>
+import {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartTooltip,
+    ChartXAxis,
+    ChartXAxisItem,
+    ChartYAxis,
+    ChartYAxisItem,
+} from '@progress/kendo-vue-charts';
+import data from './heatmap-data';
+
+export default {
+    components: {
+        Chart,
+        ChartSeries,
+        ChartSeriesItem,
+        ChartTooltip,
+        ChartXAxis,
+        ChartXAxisItem,
+        ChartYAxis,
+        ChartYAxisItem,
+    },
+    data() {
+        return {
+            dataItems: data,
+        };
+    },
+};
+</script>
diff --git a/vue-options-api-demos/charts/chart/pan-zoom/basic/main.js b/vue-options-api-demos/charts/chart/pan-zoom/basic/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/pan-zoom/basic/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/pan-zoom/basic/main.vue b/vue-options-api-demos/charts/chart/pan-zoom/basic/main.vue
new file mode 100644
index 00000000..f8001ab8
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/pan-zoom/basic/main.vue
@@ -0,0 +1,56 @@
+<template>
+  <Chart :pannable="true" :zoomable="true">
+    <ChartCategoryAxis>
+      <ChartCategoryAxisItem
+        :max="categoryAxisMax"
+        :max-divisions="categoryAxisMaxDivisions"
+      />
+    </ChartCategoryAxis>
+    <ChartValueAxis>
+      <ChartValueAxisItem :labels="{ visible: true, format: '#.00' }" />
+    </ChartValueAxis>
+    <ChartSeries>
+      <ChartSeriesItem
+        :data-items="series"
+        :field="'value'"
+        :category-field="'category'"
+      />
+    </ChartSeries>
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartValueAxis,
+  ChartValueAxisItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+} from "@progress/kendo-vue-charts";
+const series = [];
+for (let idx = 0; idx < 10000; idx++) {
+  series.push({
+    value: Math.floor(Math.random() * 100) + 1,
+    category: new Date(2000, 0, idx),
+  });
+}
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartValueAxis,
+    ChartValueAxisItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+  },
+  data: function () {
+    return {
+      series,
+      categoryAxisMax: new Date(2000, 1, 0),
+      categoryAxisMaxDivisions: 10,
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/chart/pan-zoom/lock/main.js b/vue-options-api-demos/charts/chart/pan-zoom/lock/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/pan-zoom/lock/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/pan-zoom/lock/main.vue b/vue-options-api-demos/charts/chart/pan-zoom/lock/main.vue
new file mode 100644
index 00000000..e2339c24
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/pan-zoom/lock/main.vue
@@ -0,0 +1,68 @@
+<template>
+  <Chart
+    :pannable="{
+      lock: 'y',
+    }"
+    :zoomable="{
+      mousewheel: {
+        lock: 'y',
+      },
+      selection: {
+        lock: 'y',
+      },
+    }"
+  >
+    <ChartCategoryAxis>
+      <ChartCategoryAxisItem
+        :max="categoryAxisMax"
+        :max-divisions="categoryAxisMaxDivisions"
+      />
+    </ChartCategoryAxis>
+    <ChartValueAxis>
+      <ChartValueAxisItem :labels="{ visible: true, format: '#.00' }" />
+    </ChartValueAxis>
+    <ChartSeries>
+      <ChartSeriesItem
+        :data-items="series"
+        :field="'value'"
+        :category-field="'category'"
+      />
+    </ChartSeries>
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartValueAxis,
+  ChartValueAxisItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+} from "@progress/kendo-vue-charts";
+const series = [];
+for (let idx = 0; idx < 10000; idx++) {
+  series.push({
+    value: Math.floor(Math.random() * 100) + 1,
+    category: new Date(2000, 0, idx),
+  });
+}
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartValueAxis,
+    ChartValueAxisItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+  },
+  data: function () {
+    return {
+      series,
+      categoryAxisMax: new Date(2000, 1, 0),
+      categoryAxisMaxDivisions: 10,
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/chart/polar/main.js b/vue-options-api-demos/charts/chart/polar/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/polar/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/polar/main.vue b/vue-options-api-demos/charts/chart/polar/main.vue
new file mode 100644
index 00000000..941f8f9d
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/polar/main.vue
@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTitle :text="'Sun position at equinox'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'polarLine'"
+          :data-items="polarData"
+          :x-field="'azimuth'"
+          :y-field="'altitude'"
+        >
+          <ChartSeriesLabels :position="'below'" :content="labelContent" />
+        </ChartSeriesItem>
+      </ChartSeries>
+      <ChartXAxis>
+        <ChartXAxisItem :start-angle="-90" :major-unit="30" />
+      </ChartXAxis>
+      <ChartYAxis>
+        <ChartYAxisItem :labels="{ visible: false }" />
+      </ChartYAxis>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartTitle,
+  ChartXAxis,
+  ChartXAxisItem,
+  ChartYAxis,
+  ChartYAxisItem,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartSeriesLabels,
+} from "@progress/kendo-vue-charts";
+import data from "./polar-data.json";
+
+export default {
+  components: {
+    Chart,
+    ChartTitle,
+    ChartXAxis,
+    ChartXAxisItem,
+    ChartYAxis,
+    ChartYAxisItem,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartSeriesLabels,
+  },
+  data: function () {
+    return {
+      polarData: data,
+    };
+  },
+  methods: {
+    labelContent(e) {
+      return `${e.dataItem.time.substring(0, 2)}h`;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/chart/polar/polar-data.json b/vue-options-api-demos/charts/chart/polar/polar-data.json
new file mode 100644
index 00000000..06d877fc
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/polar/polar-data.json
@@ -0,0 +1,14 @@
+[
+    { "time": "08:00", "altitude": 4.9, "azimuth": 92.7 },
+    { "time": "09:00", "altitude": 17.6, "azimuth": 100.6 },
+    { "time": "10:00", "altitude": 30.1, "azimuth": 109.7 },
+    { "time": "11:00", "altitude": 41.8, "azimuth": 121.3 },
+    { "time": "12:00", "altitude": 51.8, "azimuth": 137.7 },
+    { "time": "13:00", "altitude": 58.5, "azimuth": 161.5 },
+    { "time": "14:00", "altitude": 59.4, "azimuth": 190.7 },
+    { "time": "15:00", "altitude": 54.1, "azimuth": 216.6 },
+    { "time": "16:00", "altitude": 44.8, "azimuth": 234.8 },
+    { "time": "17:00", "altitude": 33.5, "azimuth": 247.6 },
+    { "time": "18:00", "altitude": 21.2, "azimuth": 257.2 },
+    { "time": "19:00", "altitude": 8.4, "azimuth": 265.3 }
+]
diff --git a/vue-options-api-demos/charts/chart/pyramid/basic/main.js b/vue-options-api-demos/charts/chart/pyramid/basic/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/pyramid/basic/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/pyramid/basic/main.vue b/vue-options-api-demos/charts/chart/pyramid/basic/main.vue
new file mode 100644
index 00000000..5ac8bab8
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/pyramid/basic/main.vue
@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTitle :text="'Sales'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :data-items="seriesData"
+          :type="'pyramid'"
+          :field="'count'"
+          :categoryField="'stat'"
+        >
+          <ChartSeriesLabels :background="'none'" />
+        </ChartSeriesItem>
+      </ChartSeries>
+      <ChartTooltip :render="tooltipRenderer" />
+      <ChartLegend :visible="false" />
+    </Chart>
+  </div>
+</template>
+
+<script>
+  import {
+    Chart,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartTooltip,
+    ChartLegend,
+    ChartSeriesLabels
+  } from '@progress/kendo-vue-charts';
+
+  export default {
+    components: {
+      Chart,
+      ChartTitle,
+      ChartSeries,
+      ChartSeriesItem,
+      ChartTooltip,
+      ChartLegend,
+      ChartSeriesLabels,
+    },
+    data() {
+      return {
+        seriesData: [{
+            stat: 'Unique Visitors',
+            count: 280022
+        }, {
+            stat: 'Downloads',
+            count: 190374
+        }, {
+            stat: 'Purchases',
+            count: 120392
+        }]
+      };
+    },
+    methods: {
+      tooltipRenderer(h, elem, props, listeners) {
+        if (props?.point) {
+          const { category, percentage } = props.point;
+          return h('span', {
+            innerHTML: `${category}: ${Math.floor(percentage * 100)}%`,
+          });
+        }
+      }
+    }
+  };
+</script>
+
+<style scoped>
+  .k-chart {
+      width: 300px;
+      margin: '0 auto';
+  }
+</style>
diff --git a/vue-options-api-demos/charts/chart/pyramid/dynamic-height/main.js b/vue-options-api-demos/charts/chart/pyramid/dynamic-height/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/pyramid/dynamic-height/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/pyramid/dynamic-height/main.vue b/vue-options-api-demos/charts/chart/pyramid/dynamic-height/main.vue
new file mode 100644
index 00000000..21d8eb3e
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/pyramid/dynamic-height/main.vue
@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <div :className="'example-config'">
+      <Checkbox
+        :checked="dynamicHeight"
+        @change="onChange"
+        :label="'Dynamic Height'"
+      />
+    </div>
+    <Chart>
+      <ChartTitle :text="'Sales'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :data-items="seriesData"
+          :dynamicHeight="dynamicHeight"
+          :type="'pyramid'"
+          :field="'count'"
+          :categoryField="'stat'"
+        >
+          <ChartSeriesLabels :background="'none'" />
+        </ChartSeriesItem>
+      </ChartSeries>
+      <ChartTooltip :render="tooltipRenderer" />
+      <ChartLegend :visible="false" />
+    </Chart>
+  </div>
+</template>
+
+<script>
+  import {
+    Chart,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartTooltip,
+    ChartLegend,
+    ChartSeriesLabels
+  } from '@progress/kendo-vue-charts';
+  import { Checkbox } from '@progress/kendo-vue-inputs';
+
+  export default {
+    components: {
+      Chart,
+      ChartTitle,
+      ChartSeries,
+      ChartSeriesItem,
+      ChartTooltip,
+      ChartLegend,
+      ChartSeriesLabels,
+      Checkbox
+    },
+    data() {
+      return {
+        seriesData: [{
+            stat: 'Unique Visitors',
+            count: 280022
+        }, {
+            stat: 'Downloads',
+            count: 190374
+        }, {
+            stat: 'Purchases',
+            count: 120392
+        }],
+        dynamicHeight: false
+      };
+    },
+    methods: {
+      tooltipRenderer(h, elem, props, listeners) {
+        if (props?.point) {
+          const { category, percentage } = props.point;
+          return h('span', {
+            innerHTML: `${category}: ${Math.floor(percentage * 100)}%`,
+          });
+        }
+      },
+      onChange(event) {
+        this.dynamicHeight = event.value;
+      }
+    }
+  };
+</script>
+
+<style scoped>
+  .k-chart {
+      width: 300px;
+      margin: '0 auto';
+  }
+</style>
diff --git a/vue-options-api-demos/charts/chart/radar/main.js b/vue-options-api-demos/charts/chart/radar/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/radar/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/radar/main.vue b/vue-options-api-demos/charts/chart/radar/main.vue
new file mode 100644
index 00000000..05eabbde
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/radar/main.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTitle text="Market Value of Major Banks /bln/" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'radarLine'"
+          :data-items="radarData"
+          :field="'pre'"
+          :category-field="'name'"
+          :name="'Market value as of 2007'"
+        />
+        <ChartSeriesItem
+          :type="'radarLine'"
+          :data-items="radarData"
+          :field="'post'"
+          :category-field="'name'"
+          :name="'Market value as of 2009'"
+        />
+      </ChartSeries>
+      <ChartValueAxis>
+        <ChartValueAxisItem
+          :labels="{
+            format: 'C0',
+          }"
+        />
+      </ChartValueAxis>
+      <ChartLegend :position="'bottom'" />
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartTitle,
+  ChartLegend,
+  ChartValueAxis,
+  ChartValueAxisItem,
+  ChartSeries,
+  ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+import data from "./radar-data.json";
+
+export default {
+  components: {
+    Chart,
+    ChartTitle,
+    ChartLegend,
+    ChartValueAxis,
+    ChartValueAxisItem,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      radarData: data,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/chart/radar/radar-data.json b/vue-options-api-demos/charts/chart/radar/radar-data.json
new file mode 100644
index 00000000..11eba02c
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/radar/radar-data.json
@@ -0,0 +1,16 @@
+[
+    { "name": "JP Morgan", "pre": 116, "post": 64 },
+    { "name": "HSBC", "pre": 165, "post": 85 },
+    { "name": "Credit Suisse", "pre": 215, "post": 97 },
+    { "name": "Goldman Sachs", "pre": 75, "post": 27 },
+    { "name": "Morgan Stanley", "pre": 100, "post": 16 },
+    { "name": "Societe Generale", "pre": 49, "post": 26 },
+    { "name": "UBS", "pre": 80, "post": 35 },
+    { "name": "BNP Paribas", "pre": 116, "post": 32 },
+    { "name": "Unicredit", "pre": 108, "post": 26 },
+    { "name": "Credit Agricole", "pre": 90, "post": 17 },
+    { "name": "Deutsche Bank", "pre": 67, "post": 10 },
+    { "name": "Barclays", "pre": 76, "post": 7 },
+    { "name": "Citigroup",  "pre": 91, "post": 19 },
+    { "name": "RBS", "pre": 255, "post": 5 }
+]
diff --git a/vue-options-api-demos/charts/chart/range-area/main.js b/vue-options-api-demos/charts/chart/range-area/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/range-area/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/range-area/main.vue b/vue-options-api-demos/charts/chart/range-area/main.vue
new file mode 100644
index 00000000..38ff80c2
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/range-area/main.vue
@@ -0,0 +1,71 @@
+<template>
+  <Chart>
+    <ChartTitle :text="'Average Weather Conditions'" />
+    <ChartSeries>
+      <ChartSeriesItem
+        :type="'rangeArea'"
+        :data-items="dataItems"
+        :from-field="'min'"
+        :to-field="'max'"
+        :category-field="'month'"
+      >
+        <ChartSeriesLabels>
+          <ChartSeriesLabelsFrom :content="labelContentFrom" />
+          <ChartSeriesLabelsTo :content="labelContentTo" />
+        </ChartSeriesLabels>
+      </ChartSeriesItem>
+    </ChartSeries>
+    <ChartCategoryAxis>
+      <ChartCategoryAxisItem :labels="{ rotation: 'auto' }" />
+    </ChartCategoryAxis>
+    <ChartTooltip :render="'tooltipRender'">
+      <template v-slot:tooltipRender="{ props }">
+        <div>
+          Avg Min Temp : {{ props.point.value && props.point.value.from }} °C
+          <br />
+          Avg Max Temp : {{ props.point.value && props.point.value.to }} °C
+        </div>
+      </template>
+    </ChartTooltip>
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartTitle,
+  ChartTooltip,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartSeriesLabels,
+  ChartSeriesLabelsFrom,
+  ChartSeriesLabelsTo,
+} from "@progress/kendo-vue-charts";
+import data from "./range-data.json";
+
+const labelContentFrom = (e) => `${e.value.from} °C`;
+const labelContentTo = (e) => `${e.value.to} °C`;
+
+export default {
+  components: {
+    Chart,
+    ChartTitle,
+    ChartTooltip,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartSeriesLabels,
+    ChartSeriesLabelsFrom,
+    ChartSeriesLabelsTo,
+  },
+  data: function () {
+    return {
+      dataItems: data,
+      labelContentFrom: labelContentFrom,
+      labelContentTo: labelContentTo,
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/chart/range-area/range-data.json b/vue-options-api-demos/charts/chart/range-area/range-data.json
new file mode 100644
index 00000000..0b21030d
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/range-area/range-data.json
@@ -0,0 +1,14 @@
+[
+    { "month": "January", "min": 5, "max": 11 },
+    { "month": "February", "min": 5, "max": 13 },
+    { "month": "March", "min": 7, "max": 15 },
+    { "month": "April", "min": 10, "max": 19 },
+    { "month": "May", "min": 13, "max": 23 },
+    { "month": "June", "min": 17, "max": 28 },
+    { "month": "July", "min": 20, "max": 30 },
+    { "month": "August", "min": 20, "max": 30 },
+    { "month": "September", "min": 17, "max": 26 },
+    { "month": "October", "min": 13, "max": 22 },
+    { "month": "November", "min": 9, "max": 16 },
+    { "month": "December", "min": 6, "max": 13 }
+]
diff --git a/vue-options-api-demos/charts/chart/range-bar/main.js b/vue-options-api-demos/charts/chart/range-bar/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/range-bar/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/range-bar/main.vue b/vue-options-api-demos/charts/chart/range-bar/main.vue
new file mode 100644
index 00000000..a3438c50
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/range-bar/main.vue
@@ -0,0 +1,71 @@
+<template>
+  <Chart>
+    <ChartTitle :text="'Average Weather Conditions'" />
+    <ChartSeries>
+      <ChartSeriesItem
+        :type="'rangeColumn'"
+        :data-items="dataItems"
+        :from-field="'min'"
+        :to-field="'max'"
+        :category-field="'month'"
+      >
+        <ChartSeriesLabels>
+          <ChartSeriesLabelsFrom :content="labelContentFrom" />
+          <ChartSeriesLabelsTo :content="labelContentTo" />
+        </ChartSeriesLabels>
+      </ChartSeriesItem>
+    </ChartSeries>
+    <ChartCategoryAxis>
+      <ChartCategoryAxisItem :labels="{ rotation: 'auto' }" />
+    </ChartCategoryAxis>
+    <ChartTooltip :render="'tooltipRender'">
+      <template v-slot:tooltipRender="{ props }">
+        <div>
+          Avg Min Temp : {{ props.point.value && props.point.value.from }} °C
+          <br />
+          Avg Max Temp : {{ props.point.value && props.point.value.to }} °C
+        </div>
+      </template>
+    </ChartTooltip>
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartTitle,
+  ChartTooltip,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartSeriesLabels,
+  ChartSeriesLabelsFrom,
+  ChartSeriesLabelsTo,
+} from "@progress/kendo-vue-charts";
+import data from "./range-data.json";
+
+const labelContentFrom = (e) => `${e.value.from} °C`;
+const labelContentTo = (e) => `${e.value.to} °C`;
+
+export default {
+  components: {
+    Chart,
+    ChartTitle,
+    ChartTooltip,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartSeriesLabels,
+    ChartSeriesLabelsFrom,
+    ChartSeriesLabelsTo,
+  },
+  data: function () {
+    return {
+      dataItems: data,
+      labelContentFrom: labelContentFrom,
+      labelContentTo: labelContentTo,
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/chart/range-bar/range-data.json b/vue-options-api-demos/charts/chart/range-bar/range-data.json
new file mode 100644
index 00000000..0b21030d
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/range-bar/range-data.json
@@ -0,0 +1,14 @@
+[
+    { "month": "January", "min": 5, "max": 11 },
+    { "month": "February", "min": 5, "max": 13 },
+    { "month": "March", "min": 7, "max": 15 },
+    { "month": "April", "min": 10, "max": 19 },
+    { "month": "May", "min": 13, "max": 23 },
+    { "month": "June", "min": 17, "max": 28 },
+    { "month": "July", "min": 20, "max": 30 },
+    { "month": "August", "min": 20, "max": 30 },
+    { "month": "September", "min": 17, "max": 26 },
+    { "month": "October", "min": 13, "max": 22 },
+    { "month": "November", "min": 9, "max": 16 },
+    { "month": "December", "min": 6, "max": 13 }
+]
diff --git a/vue-options-api-demos/charts/chart/rendering/main.js b/vue-options-api-demos/charts/chart/rendering/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/rendering/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/rendering/main.vue b/vue-options-api-demos/charts/chart/rendering/main.vue
new file mode 100644
index 00000000..1b584a37
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/rendering/main.vue
@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <div class="example-config">
+      <label>Render as</label>
+       <dropdownlist
+        :style="{ marginLeft: 5, width: '230px' }"
+        :value="renderAs"
+        @change="onRenderChange"
+        :data-items="renderMethods"
+      />
+    </div>
+    <Chart :render-as="renderAs">
+      <ChartTitle :text="'Gross domestic product growth GDP annual'" />
+      <ChartLegend :position="'top'" :orientation="'horizontal'" />
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :categories="categories" :startAngle="45" />
+      </ChartCategoryAxis>
+      <ChartSeries>
+        <ChartSeriesItem
+          v-for="(item, idx) in series"
+          :key="idx"
+          :type="'column'"
+          :data-items="item.data"
+          :name="item.name"
+        />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartTitle,
+  ChartLegend,
+} from "@progress/kendo-vue-charts";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartTitle,
+    ChartLegend,
+    dropdownlist: DropDownList,
+  },
+  data: function () {
+    return {
+      renderAs: "svg",
+      renderMethods: ["svg", "canvas"],
+      categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
+      series: [
+        {
+          name: "India",
+          data: [
+            3.907,
+            7.943,
+            7.848,
+            9.284,
+            9.263,
+            9.801,
+            3.89,
+            8.238,
+            9.552,
+            6.855,
+          ],
+        },
+        {
+          name: "Russian Federation",
+          data: [
+            4.743,
+            7.295,
+            7.175,
+            6.376,
+            8.153,
+            8.535,
+            5.247,
+            -7.832,
+            4.3,
+            4.3,
+          ],
+        },
+        {
+          name: "Germany",
+          data: [
+            0.01,
+            -0.375,
+            1.161,
+            0.684,
+            3.7,
+            3.269,
+            1.083,
+            -5.127,
+            3.69,
+            2.995,
+          ],
+        },
+        {
+          name: "World",
+          data: [
+            1.988,
+            2.733,
+            3.994,
+            3.464,
+            4.001,
+            3.939,
+            1.333,
+            -2.245,
+            4.339,
+            2.727,
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    onRenderChange(e) {
+      this.renderAs = e.value;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/chart/rtl/main.js b/vue-options-api-demos/charts/chart/rtl/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/rtl/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/rtl/main.vue b/vue-options-api-demos/charts/chart/rtl/main.vue
new file mode 100644
index 00000000..7acc6de9
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/rtl/main.vue
@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <Chart :dir="'rtl'">
+      <ChartTitle :text="'Gross domestic product growth GDP annual'" />
+      <ChartLegend :position="'top'" :orientation="'horizontal'" />
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :categories="categories" :startAngle="45" />
+      </ChartCategoryAxis>
+      <ChartSeries>
+        <ChartSeriesItem
+          v-for="(item, idx) in series"
+          :key="idx"
+          :type="'column'"
+          :data-items="item.data"
+          :name="item.name"
+        />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartTitle,
+  ChartLegend,
+} from "@progress/kendo-vue-charts";
+
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartTitle,
+    ChartLegend,
+  },
+  data: function () {
+    return {
+      categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
+      series: [
+        {
+          name: "India",
+          data: [
+            3.907,
+            7.943,
+            7.848,
+            9.284,
+            9.263,
+            9.801,
+            3.89,
+            8.238,
+            9.552,
+            6.855,
+          ],
+        },
+        {
+          name: "Russian Federation",
+          data: [
+            4.743,
+            7.295,
+            7.175,
+            6.376,
+            8.153,
+            8.535,
+            5.247,
+            -7.832,
+            4.3,
+            4.3,
+          ],
+        },
+        {
+          name: "Germany",
+          data: [
+            0.01,
+            -0.375,
+            1.161,
+            0.684,
+            3.7,
+            3.269,
+            1.083,
+            -5.127,
+            3.69,
+            2.995,
+          ],
+        },
+        {
+          name: "World",
+          data: [
+            1.988,
+            2.733,
+            3.994,
+            3.464,
+            4.001,
+            3.939,
+            1.333,
+            -2.245,
+            4.339,
+            2.727,
+          ],
+        },
+      ],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/chart/scatter-line-style/main.js b/vue-options-api-demos/charts/chart/scatter-line-style/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/scatter-line-style/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/scatter-line-style/main.vue b/vue-options-api-demos/charts/chart/scatter-line-style/main.vue
new file mode 100644
index 00000000..7daa4124
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/scatter-line-style/main.vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+     <dropdownlist
+      :style="{ width: '230px' }"
+      :data-items="lineStyles"
+      :value="lineStyle"
+      @change="setLineStyle"
+    >
+    </dropdownlist>
+    <Chart>
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'scatterLine'"
+          :data-items="scatterData"
+          :line-style="lineStyle"
+          :markers="{ visible: false }"
+        />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+import data from "./scatter-line-style-data.json";
+
+export default {
+  components: {
+    dropdownlist: DropDownList,
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      scatterData: data,
+      lineStyles: ["normal", "smooth"],
+      lineStyle: "normal",
+    };
+  },
+  methods: {
+    setLineStyle(e) {
+      this.lineStyle = e.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/chart/scatter-line-style/scatter-line-style-data.json b/vue-options-api-demos/charts/chart/scatter-line-style/scatter-line-style-data.json
new file mode 100644
index 00000000..e8fbf411
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/scatter-line-style/scatter-line-style-data.json
@@ -0,0 +1,28 @@
+[
+    [0, 20],
+    [1, 1],
+    [2, 18],
+    [3, 3],
+    [4, 15],
+    [5, 5],
+    [6, 10],
+    [7, 6],
+    [8, 9],
+    [9, 6],
+    [10, 10],
+    [11, 5],
+    [12, 13],
+    [13, 3],
+    [14, 16],
+    [15, 1],
+    [16, 19],
+    [17, 1],
+    [18, 20],
+    [19, 2],
+    [20, 18],
+    [21, 5],
+    [22, 12],
+    [23, 7],
+    [24, 10],
+    [25, 8]
+]
diff --git a/vue-options-api-demos/charts/chart/scatter-line/main.js b/vue-options-api-demos/charts/chart/scatter-line/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/scatter-line/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/scatter-line/main.vue b/vue-options-api-demos/charts/chart/scatter-line/main.vue
new file mode 100644
index 00000000..322e58af
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/scatter-line/main.vue
@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTitle :text="'Charge current vs. charge time'" />
+      <ChartTooltip :format="'{1}% in {0} minutes'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          v-for="(series, idx) in scatterData"
+          :key="idx"
+          :type="'scatterLine'"
+          :data-items="series.stats"
+          :name="series.current"
+          :x-field="'time'"
+          :y-field="'charge'"
+        />
+      </ChartSeries>
+      <ChartXAxis>
+        <ChartXAxisItem
+          :title="{ text: 'Time' }"
+          :max="90"
+          :labels="{ format: '{0}m' }"
+        />
+      </ChartXAxis>
+      <ChartYAxis>
+        <ChartYAxisItem
+          :title="{ text: 'Charge' }"
+          :max="100"
+          :labels="{
+            format: '{0}m',
+          }"
+        />
+      </ChartYAxis>
+    </Chart>
+  </div>
+</template>
+<script>
+import {
+  Chart,
+  ChartTitle,
+  ChartTooltip,
+  ChartXAxis,
+  ChartXAxisItem,
+  ChartYAxis,
+  ChartYAxisItem,
+  ChartSeries,
+  ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+
+import data from "./scatter-line-data.json";
+
+export default {
+  components: {
+    Chart,
+    ChartTitle,
+    ChartTooltip,
+    ChartXAxis,
+    ChartXAxisItem,
+    ChartYAxis,
+    ChartYAxisItem,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      scatterData: data,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/chart/scatter-line/scatter-line-data.json b/vue-options-api-demos/charts/chart/scatter-line/scatter-line-data.json
new file mode 100644
index 00000000..192fd058
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/scatter-line/scatter-line-data.json
@@ -0,0 +1,31 @@
+[{
+    "current": 0.8,
+    "stats": [
+      { "time": 10, "charge": 10 },
+      { "time": 15, "charge": 20 },
+      { "time": 20, "charge": 25 },
+      { "time": 32, "charge": 40 },
+      { "time": 43, "charge": 50 },
+      { "time": 55, "charge": 60 },
+      { "time": 60, "charge": 70 },
+      { "time": 70, "charge": 80 },
+      { "time": 90, "charge": 100 }
+    ]
+  }, {
+    "current": 1.6,
+    "stats": [
+      { "time": 10, "charge": 40 },
+      { "time": 17, "charge": 50 },
+      { "time": 18, "charge": 70 },
+      { "time": 35, "charge": 90 },
+      { "time": 47, "charge": 95 },
+      { "time": 60, "charge": 100 }
+    ]
+  }, {
+    "current": 3.2,
+    "stats": [
+      { "time": 10, "charge": 70 },
+      { "time": 13, "charge": 90 },
+      { "time": 25, "charge": 100 }
+    ]
+}]
diff --git a/vue-options-api-demos/charts/chart/scatter-plot/main.js b/vue-options-api-demos/charts/chart/scatter-plot/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/scatter-plot/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/scatter-plot/main.vue b/vue-options-api-demos/charts/chart/scatter-plot/main.vue
new file mode 100644
index 00000000..3bf7a45e
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/scatter-plot/main.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTitle :text="'Charge current vs. charge time'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'scatter'"
+          :data-items="scatterData"
+          :x-field="'rainfall'"
+          :y-field="'windSpeed'"
+        />
+      </ChartSeries>
+      <ChartXAxis>
+        <ChartXAxisItem :title="{ text: 'Wind Speed [km/h]' }" />
+      </ChartXAxis>
+      <ChartYAxis>
+        <ChartYAxisItem
+          :title="{
+            text: 'Rainfall [mm]',
+          }"
+        />
+      </ChartYAxis>
+    </Chart>
+  </div>
+</template>
+<script>
+import {
+  Chart,
+  ChartTitle,
+  ChartXAxis,
+  ChartXAxisItem,
+  ChartYAxis,
+  ChartYAxisItem,
+  ChartSeries,
+  ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+
+import data from "./scatter-plot-data.json";
+
+export default {
+  components: {
+    Chart,
+    ChartTitle,
+    ChartXAxis,
+    ChartXAxisItem,
+    ChartYAxis,
+    ChartYAxisItem,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      scatterData: data,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/chart/scatter-plot/scatter-plot-data.json b/vue-options-api-demos/charts/chart/scatter-plot/scatter-plot-data.json
new file mode 100644
index 00000000..29adf915
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/scatter-plot/scatter-plot-data.json
@@ -0,0 +1,17 @@
+[
+    { "windSpeed": 16.4, "rainfall": 5.4 },
+    { "windSpeed": 21.7, "rainfall": 2 },
+    { "windSpeed": 25.4, "rainfall": 3 },
+    { "windSpeed": 19, "rainfall": 2 },
+    { "windSpeed": 10.9, "rainfall": 1 },
+    { "windSpeed": 13.6, "rainfall": 3.2 },
+    { "windSpeed": 10.9, "rainfall": 7.4 },
+    { "windSpeed": 10.9, "rainfall": 0 },
+    { "windSpeed": 10.9, "rainfall": 8.2 },
+    { "windSpeed": 16.4, "rainfall": 0 },
+    { "windSpeed": 16.4, "rainfall": 1.8 },
+    { "windSpeed": 13.6, "rainfall": 0.3 },
+    { "windSpeed": 29.9, "rainfall": 0 },
+    { "windSpeed": 27.1, "rainfall": 2.3 },
+    { "windSpeed": 16.4, "rainfall": 0 }
+]
diff --git a/vue-options-api-demos/charts/chart/trendlines/basic/main.js b/vue-options-api-demos/charts/chart/trendlines/basic/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/basic/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/trendlines/basic/main.vue b/vue-options-api-demos/charts/chart/trendlines/basic/main.vue
new file mode 100644
index 00000000..b8769f06
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/basic/main.vue
@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTitle :text="'Trendlines'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'line'"
+          :name="'Sales By Quarter'"
+          :style="'smooth'"
+          :field="'count'"
+          :data-items="seriesData"
+        />
+        <ChartSeriesItem
+          :type="'linearTrendline'"
+          :name="'Sales Trendline (LINEAR)'"
+          :for="'Sales By Quarter'"
+        />
+        <ChartSeriesItem
+          :name="'Sales Trendline (M.AVG)'"
+          :type="'movingAverageTrendline'"
+          :dashType="'dot'"
+          :for="'Sales By Quarter'"
+        />
+      </ChartSeries>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :labels="labels" />
+      </ChartCategoryAxis>
+      <ChartTooltip :shared="true" />
+      <ChartLegend :position="'bottom'" />
+    </Chart>
+  </div>
+</template>
+
+<script>
+  import {
+    Chart,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartTooltip,
+    ChartLegend,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem
+  } from '@progress/kendo-vue-charts';
+
+  import { salesByQuarter } from './sales-data.js';
+
+  export default {
+    components: {
+      Chart,
+      ChartTitle,
+      ChartSeries,
+      ChartSeriesItem,
+      ChartTooltip,
+      ChartLegend,
+      ChartCategoryAxis,
+      ChartCategoryAxisItem
+    },
+    data() {
+      return {
+        seriesData: [...salesByQuarter],
+        labels: { step: 5 }
+      };
+    }
+  };
+</script>
diff --git a/vue-options-api-demos/charts/chart/trendlines/basic/sales-data.js b/vue-options-api-demos/charts/chart/trendlines/basic/sales-data.js
new file mode 100644
index 00000000..c253bc6f
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/basic/sales-data.js
@@ -0,0 +1,247 @@
+export const salesByQuarter = [
+    {
+        period: '2010 Q1',
+        date: new Date(2010, 0, 1),
+        count: 4485.0
+    },
+    {
+        period: '2010 Q2',
+        date: new Date(2010, 3, 1),
+        count: 4409.0
+    },
+    {
+        period: '2010 Q3',
+        date: new Date(2010, 6, 1),
+        count: 4469.0
+    },
+    {
+        period: '2010 Q4',
+        date: new Date(2010, 9, 1),
+        count: 4682.0
+    },
+    {
+        period: '2011 Q1',
+        date: new Date(2011, 0, 1),
+        count: 5610.0
+    },
+    {
+        period: '2011 Q2',
+        date: new Date(2011, 3, 1),
+        count: 6580.0
+    },
+    {
+        period: '2011 Q3',
+        date: new Date(2011, 6, 1),
+        count: 7534.0
+    },
+    {
+        period: '2011 Q4',
+        date: new Date(2011, 9, 1),
+        count: 7894.0
+    },
+    {
+        period: '2012 Q1',
+        date: new Date(2012, 0, 1),
+        count: 8748.0
+    },
+    {
+        period: '2012 Q2',
+        date: new Date(2012, 3, 1),
+        count: 10223.0
+    },
+    {
+        period: '2012 Q3',
+        date: new Date(2012, 6, 1),
+        count: 10797.0
+    },
+    {
+        period: '2012 Q4',
+        date: new Date(2012, 9, 1),
+        count: 12295.0
+    },
+    {
+        period: '2013 Q1',
+        date: new Date(2013, 0, 1),
+        count: 13153.0
+    },
+    {
+        period: '2013 Q2',
+        date: new Date(2013, 3, 1),
+        count: 14628.0
+    },
+    {
+        period: '2013 Q3',
+        date: new Date(2013, 6, 1),
+        count: 16779.0
+    },
+    {
+        period: '2013 Q4',
+        date: new Date(2013, 9, 1),
+        count: 18710.0
+    },
+    {
+        period: '2014 Q1',
+        date: new Date(2014, 0, 1),
+        count: 22219.0
+    },
+    {
+        period: '2014 Q2',
+        date: new Date(2014, 3, 1),
+        count: 25886.0
+    },
+    {
+        period: '2014 Q3',
+        date: new Date(2014, 6, 1),
+        count: 31640.0
+    },
+    {
+        period: '2014 Q4',
+        date: new Date(2014, 9, 1),
+        count: 36846.0
+    },
+    {
+        period: '2015 Q1',
+        date: new Date(2015, 0, 1),
+        count: 43433.0
+    },
+    {
+        period: '2015 Q2',
+        date: new Date(2015, 3, 1),
+        count: 48575.0
+    },
+    {
+        period: '2015 Q3',
+        date: new Date(2015, 6, 1),
+        count: 54533.0
+    },
+    {
+        period: '2015 Q4',
+        date: new Date(2015, 9, 1),
+        count: 62388.0
+    },
+    {
+        period: '2016 Q1',
+        date: new Date(2016, 0, 1),
+        count: 70706.0
+    },
+    {
+        period: '2016 Q2',
+        date: new Date(2016, 3, 1),
+        count: 75439.0
+    },
+    {
+        period: '2016 Q3',
+        date: new Date(2016, 6, 1),
+        count: 83213.0
+    },
+    {
+        period: '2016 Q4',
+        date: new Date(2016, 9, 1),
+        count: 88527.0
+    },
+    {
+        period: '2017 Q1',
+        date: new Date(2017, 0, 1),
+        count: 99865.0
+    },
+    {
+        period: '2017 Q2',
+        date: new Date(2017, 3, 1),
+        count: 107388.0
+    },
+    {
+        period: '2017 Q3',
+        date: new Date(2017, 6, 1),
+        count: 117761.0
+    },
+    {
+        period: '2017 Q4',
+        date: new Date(2017, 9, 1),
+        count: 125263.0
+    },
+    {
+        period: '2018 Q1',
+        date: new Date(2018, 0, 1),
+        count: 135950.0
+    },
+    {
+        period: '2018 Q2',
+        date: new Date(2018, 3, 1),
+        count: 144737.0
+    },
+    {
+        period: '2018 Q3',
+        date: new Date(2018, 6, 1),
+        count: 155933.0
+    },
+    {
+        period: '2018 Q4',
+        date: new Date(2018, 9, 1),
+        count: 167960.0
+    },
+    {
+        period: '2019 Q1',
+        date: new Date(2019, 0, 1),
+        count: 182725.0
+    },
+    {
+        period: '2019 Q2',
+        date: new Date(2019, 3, 1),
+        count: 199079.0
+    },
+    {
+        period: '2019 Q3',
+        date: new Date(2019, 6, 1),
+        count: 234952.0
+    },
+    {
+        period: '2019 Q4',
+        date: new Date(2019, 9, 1),
+        count: 271298.0
+    },
+    {
+        period: '2020 Q1',
+        date: new Date(2020, 0, 1),
+        count: 323309.0
+    },
+    {
+        period: '2020 Q2',
+        date: new Date(2020, 3, 1),
+        count: 358145.0
+    },
+    {
+        period: '2020 Q3',
+        date: new Date(2020, 6, 1),
+        count: 460927.0
+    },
+    {
+        period: '2020 Q4',
+        date: new Date(2020, 9, 1),
+        count: 579568.0
+    },
+    {
+        period: '2021 Q1',
+        date: new Date(2021, 0, 1),
+        count: 669590.0
+    },
+    {
+        period: '2021 Q2',
+        date: new Date(2021, 3, 1),
+        count: 793564.0
+    },
+    {
+        period: '2021 Q3',
+        date: new Date(2021, 6, 1),
+        count: 941133.0
+    },
+    {
+        period: '2021 Q4',
+        date: new Date(2021, 9, 1),
+        count: 1133020.0
+    },
+    {
+        period: '2022 Q1',
+        date: new Date(2022, 0, 1),
+        count: 426324.0
+    }
+];
diff --git a/vue-options-api-demos/charts/chart/trendlines/custom-field/main.js b/vue-options-api-demos/charts/chart/trendlines/custom-field/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/custom-field/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/trendlines/custom-field/main.vue b/vue-options-api-demos/charts/chart/trendlines/custom-field/main.vue
new file mode 100644
index 00000000..537d4988
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/custom-field/main.vue
@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTitle :text="'Trendlines'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :name="'Stock Data'"
+          :type="'ohlc'"
+          :openField="'Open'"
+          :highField="'High'"
+          :lowField="'Low'"
+          :closeField="'Close'"
+          :categoryField="'Date'"
+          :data-items="seriesData"
+        />
+        <ChartSeriesItem
+          :name="'Sales Trendline (LINEAR)'"
+          :type="'linearTrendline'"
+          :field="'low'"
+          :for="'Stock Data'"
+        />
+      </ChartSeries>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :type="'date'" :baseUnit="'fit'" :maxDivisions="50" />
+      </ChartCategoryAxis>
+      <ChartValueAxis>
+        <ChartValueAxisItem :min="50" />
+      </ChartValueAxis>
+      <ChartLegend :visible="false" />
+    </Chart>
+  </div>
+</template>
+
+<script>
+  import {
+    Chart,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartLegend,
+    ChartValueAxis,
+    ChartValueAxisItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem
+  } from '@progress/kendo-vue-charts';
+
+  import { stockDataSample } from './stock-data-sample.js';
+
+  export default {
+    components: {
+      Chart,
+      ChartTitle,
+      ChartSeries,
+      ChartSeriesItem,
+      ChartLegend,
+      ChartValueAxis,
+      ChartValueAxisItem,
+      ChartCategoryAxis,
+      ChartCategoryAxisItem
+    },
+    data() {
+      return {
+        seriesData: stockDataSample
+      };
+    }
+  };
+</script>
diff --git a/vue-options-api-demos/charts/chart/trendlines/custom-field/stock-data-sample.js b/vue-options-api-demos/charts/chart/trendlines/custom-field/stock-data-sample.js
new file mode 100644
index 00000000..20018594
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/custom-field/stock-data-sample.js
@@ -0,0 +1,2075 @@
+export const stockDataSample =
+[
+    {
+        'Date': '2010/01/01',
+        'Open': 54.13,
+        'High': 54.13,
+        'Low': 54.13,
+        'Close': 54.13,
+        'Volume': 0
+    },
+    {
+        'Date': '2010/01/04',
+        'Open': 55.72,
+        'High': 56.39,
+        'Low': 54.8,
+        'Close': 56.18,
+        'Volume': 6187088
+    },
+    {
+        'Date': '2010/01/05',
+        'Open': 56.25,
+        'High': 58.28,
+        'Low': 56,
+        'Close': 58.02,
+        'Volume': 8872728
+    },
+    {
+        'Date': '2010/01/06',
+        'Open': 58.23,
+        'High': 59.99,
+        'Low': 57.88,
+        'Close': 59.78,
+        'Volume': 8838016
+    },
+    {
+        'Date': '2010/01/07',
+        'Open': 59.51,
+        'High': 62.31,
+        'Low': 59.02,
+        'Close': 62.2,
+        'Volume': 14380744
+    },
+    {
+        'Date': '2010/01/08',
+        'Open': 61.54,
+        'High': 61.78,
+        'Low': 60.86,
+        'Close': 61.6,
+        'Volume': 7147427
+    },
+    {
+        'Date': '2010/01/11',
+        'Open': 61.95,
+        'High': 62.09,
+        'Low': 60.51,
+        'Close': 60.87,
+        'Volume': 5627699
+    },
+    {
+        'Date': '2010/01/12',
+        'Open': 60.07,
+        'High': 61.2,
+        'Low': 59.91,
+        'Close': 60.43,
+        'Volume': 5273875
+    },
+    {
+        'Date': '2010/01/13',
+        'Open': 60.61,
+        'High': 61.7,
+        'Low': 60.35,
+        'Close': 61.16,
+        'Volume': 4950400
+    },
+    {
+        'Date': '2010/01/14',
+        'Open': 61.03,
+        'High': 61.62,
+        'Low': 60.78,
+        'Close': 61.56,
+        'Volume': 3000398
+    },
+    {
+        'Date': '2010/01/15',
+        'Open': 60.82,
+        'High': 60.82,
+        'Low': 60.82,
+        'Close': 60.82,
+        'Volume': 0
+    },
+    {
+        'Date': '2010/01/18',
+        'Open': 60.82,
+        'High': 60.82,
+        'Low': 60.82,
+        'Close': 60.82,
+        'Volume': 0
+    },
+    {
+        'Date': '2010/01/19',
+        'Open': 60.6,
+        'High': 61.01,
+        'Low': 59.96,
+        'Close': 60.65,
+        'Volume': 5428029
+    },
+    {
+        'Date': '2010/01/20',
+        'Open': 60.33,
+        'High': 60.57,
+        'Low': 58.53,
+        'Close': 60.2,
+        'Volume': 5374069
+    },
+    {
+        'Date': '2010/01/21',
+        'Open': 60.3,
+        'High': 61.26,
+        'Low': 58.9,
+        'Close': 59.2,
+        'Volume': 5401938
+    },
+    {
+        'Date': '2010/01/22',
+        'Open': 58.62,
+        'High': 59.17,
+        'Low': 57.7,
+        'Close': 57.77,
+        'Volume': 4745396
+    },
+    {
+        'Date': '2010/01/25',
+        'Open': 58.35,
+        'High': 58.75,
+        'Low': 57.5,
+        'Close': 57.78,
+        'Volume': 3489914
+    },
+    {
+        'Date': '2010/01/26',
+        'Open': 57.54,
+        'High': 58.5,
+        'Low': 57.23,
+        'Close': 57.71,
+        'Volume': 4552136
+    },
+    {
+        'Date': '2010/01/27',
+        'Open': 58.84,
+        'High': 62.08,
+        'Low': 58.83,
+        'Close': 61.93,
+        'Volume': 14760056
+    },
+    {
+        'Date': '2010/01/28',
+        'Open': 62.15,
+        'High': 62.95,
+        'Low': 61.31,
+        'Close': 62.56,
+        'Volume': 8865642
+    },
+    {
+        'Date': '2010/01/29',
+        'Open': 62.8,
+        'High': 63.4,
+        'Low': 60.32,
+        'Close': 60.6,
+        'Volume': 8726177
+    },
+    {
+        'Date': '2010/02/01',
+        'Open': 60.74,
+        'High': 61.86,
+        'Low': 60.72,
+        'Close': 61.7,
+        'Volume': 5929599
+    },
+    {
+        'Date': '2010/02/02',
+        'Open': 61.29,
+        'High': 62,
+        'Low': 61,
+        'Close': 61.94,
+        'Volume': 7862734
+    },
+    {
+        'Date': '2010/02/03',
+        'Open': 61.52,
+        'High': 61.8,
+        'Low': 60.85,
+        'Close': 61.46,
+        'Volume': 5480578
+    },
+    {
+        'Date': '2010/02/04',
+        'Open': 60.95,
+        'High': 61.17,
+        'Low': 59.25,
+        'Close': 59.32,
+        'Volume': 7491344
+    },
+    {
+        'Date': '2010/02/05',
+        'Open': 59.21,
+        'High': 59.74,
+        'Low': 57.14,
+        'Close': 58.4,
+        'Volume': 9676128
+    },
+    {
+        'Date': '2010/02/08',
+        'Open': 58.33,
+        'High': 58.97,
+        'Low': 57.78,
+        'Close': 57.89,
+        'Volume': 4724664
+    },
+    {
+        'Date': '2010/02/09',
+        'Open': 58.62,
+        'High': 60.43,
+        'Low': 58.39,
+        'Close': 59.74,
+        'Volume': 8250844
+    },
+    {
+        'Date': '2010/02/10',
+        'Open': 59.71,
+        'High': 60.05,
+        'Low': 58.94,
+        'Close': 59.54,
+        'Volume': 4237165
+    },
+    {
+        'Date': '2010/02/11',
+        'Open': 59.75,
+        'High': 60.75,
+        'Low': 58.94,
+        'Close': 60.59,
+        'Volume': 4395736
+    },
+    {
+        'Date': '2010/02/12',
+        'Open': 59.65,
+        'High': 59.65,
+        'Low': 59.65,
+        'Close': 59.65,
+        'Volume': 0
+    },
+    {
+        'Date': '2010/02/15',
+        'Open': 59.65,
+        'High': 59.65,
+        'Low': 59.65,
+        'Close': 59.65,
+        'Volume': 0
+    },
+    {
+        'Date': '2010/02/16',
+        'Open': 60.42,
+        'High': 61.29,
+        'Low': 59.9,
+        'Close': 61.26,
+        'Volume': 4268659
+    },
+    {
+        'Date': '2010/02/17',
+        'Open': 61.39,
+        'High': 62,
+        'Low': 61,
+        'Close': 61.82,
+        'Volume': 4116171
+    },
+    {
+        'Date': '2010/02/18',
+        'Open': 61.78,
+        'High': 63.01,
+        'Low': 61.72,
+        'Close': 62.89,
+        'Volume': 4391778
+    },
+    {
+        'Date': '2010/02/19',
+        'Open': 62.65,
+        'High': 64.34,
+        'Low': 62.65,
+        'Close': 63.59,
+        'Volume': 7371049
+    },
+    {
+        'Date': '2010/02/22',
+        'Open': 63.58,
+        'High': 64.47,
+        'Low': 63.19,
+        'Close': 63.97,
+        'Volume': 6034004
+    },
+    {
+        'Date': '2010/02/23',
+        'Open': 63.81,
+        'High': 64.17,
+        'Low': 62.25,
+        'Close': 62.77,
+        'Volume': 6484460
+    },
+    {
+        'Date': '2010/02/24',
+        'Open': 63,
+        'High': 63.7,
+        'Low': 62.64,
+        'Close': 63.48,
+        'Volume': 3400361
+    },
+    {
+        'Date': '2010/02/25',
+        'Open': 62.72,
+        'High': 62.97,
+        'Low': 62,
+        'Close': 62.87,
+        'Volume': 5043170
+    },
+    {
+        'Date': '2010/02/26',
+        'Open': 63.09,
+        'High': 63.88,
+        'Low': 63.03,
+        'Close': 63.16,
+        'Volume': 4415909
+    },
+    {
+        'Date': '2010/03/01',
+        'Open': 63.05,
+        'High': 64.33,
+        'Low': 63,
+        'Close': 64,
+        'Volume': 5265630
+    },
+    {
+        'Date': '2010/03/02',
+        'Open': 64.64,
+        'High': 65.33,
+        'Low': 64.36,
+        'Close': 64.44,
+        'Volume': 4383103
+    },
+    {
+        'Date': '2010/03/03',
+        'Open': 64.58,
+        'High': 64.97,
+        'Low': 64.05,
+        'Close': 64.45,
+        'Volume': 4289350
+    },
+    {
+        'Date': '2010/03/04',
+        'Open': 65.09,
+        'High': 65.8,
+        'Low': 64.85,
+        'Close': 65.55,
+        'Volume': 7718659
+    },
+    {
+        'Date': '2010/03/05',
+        'Open': 66.06,
+        'High': 68.04,
+        'Low': 66.03,
+        'Close': 67.93,
+        'Volume': 8506441
+    },
+    {
+        'Date': '2010/03/08',
+        'Open': 68.01,
+        'High': 68.01,
+        'Low': 67.13,
+        'Close': 67.24,
+        'Volume': 5077225
+    },
+    {
+        'Date': '2010/03/09',
+        'Open': 67.57,
+        'High': 68.34,
+        'Low': 67.35,
+        'Close': 67.79,
+        'Volume': 7655839
+    },
+    {
+        'Date': '2010/03/10',
+        'Open': 68.14,
+        'High': 70.48,
+        'Low': 68.03,
+        'Close': 70.01,
+        'Volume': 10616531
+    },
+    {
+        'Date': '2010/03/11',
+        'Open': 70.08,
+        'High': 70.43,
+        'Low': 69.15,
+        'Close': 70.07,
+        'Volume': 7293133
+    },
+    {
+        'Date': '2010/03/12',
+        'Open': 70.48,
+        'High': 70.49,
+        'Low': 69.25,
+        'Close': 69.83,
+        'Volume': 5302767
+    },
+    {
+        'Date': '2010/03/15',
+        'Open': 69.37,
+        'High': 69.77,
+        'Low': 68.52,
+        'Close': 69.4,
+        'Volume': 7709023
+    },
+    {
+        'Date': '2010/03/16',
+        'Open': 69.24,
+        'High': 69.31,
+        'Low': 68.3,
+        'Close': 68.72,
+        'Volume': 7495575
+    },
+    {
+        'Date': '2010/03/17',
+        'Open': 68.97,
+        'High': 69.49,
+        'Low': 68.29,
+        'Close': 69.38,
+        'Volume': 6004213
+    },
+    {
+        'Date': '2010/03/18',
+        'Open': 69.35,
+        'High': 70.93,
+        'Low': 69.19,
+        'Close': 70.87,
+        'Volume': 7435774
+    },
+    {
+        'Date': '2010/03/19',
+        'Open': 73.2,
+        'High': 73.3,
+        'Low': 70.72,
+        'Close': 70.72,
+        'Volume': 17722432
+    },
+    {
+        'Date': '2010/03/22',
+        'Open': 71.66,
+        'High': 72.64,
+        'Low': 71.51,
+        'Close': 71.91,
+        'Volume': 9014855
+    },
+    {
+        'Date': '2010/03/23',
+        'Open': 72.54,
+        'High': 72.63,
+        'Low': 71.51,
+        'Close': 72.18,
+        'Volume': 4986322
+    },
+    {
+        'Date': '2010/03/24',
+        'Open': 72.42,
+        'High': 73.2,
+        'Low': 71.78,
+        'Close': 72.32,
+        'Volume': 7699920
+    },
+    {
+        'Date': '2010/03/25',
+        'Open': 72.95,
+        'High': 73.43,
+        'Low': 72,
+        'Close': 72.49,
+        'Volume': 5431155
+    },
+    {
+        'Date': '2010/03/26',
+        'Open': 72.66,
+        'High': 72.99,
+        'Low': 72.35,
+        'Close': 72.59,
+        'Volume': 4933688
+    },
+    {
+        'Date': '2010/03/29',
+        'Open': 73.08,
+        'High': 74.53,
+        'Low': 73,
+        'Close': 74.11,
+        'Volume': 9064111
+    },
+    {
+        'Date': '2010/03/30',
+        'Open': 73.84,
+        'High': 74.18,
+        'Low': 72.7,
+        'Close': 73.53,
+        'Volume': 4381292
+    },
+    {
+        'Date': '2010/03/31',
+        'Open': 72.92,
+        'High': 73.06,
+        'Low': 71.95,
+        'Close': 72.61,
+        'Volume': 5884899
+    },
+    {
+        'Date': '2010/04/01',
+        'Open': 72.99,
+        'High': 72.99,
+        'Low': 72.99,
+        'Close': 72.99,
+        'Volume': 0
+    },
+    {
+        'Date': '2010/04/02',
+        'Open': 72.99,
+        'High': 72.99,
+        'Low': 72.99,
+        'Close': 72.99,
+        'Volume': 0
+    },
+    {
+        'Date': '2010/04/05',
+        'Open': 72.99,
+        'High': 73.05,
+        'Low': 70.95,
+        'Close': 72.04,
+        'Volume': 9326414
+    },
+    {
+        'Date': '2010/04/06',
+        'Open': 71.84,
+        'High': 73.18,
+        'Low': 71.77,
+        'Close': 72.36,
+        'Volume': 5194801
+    },
+    {
+        'Date': '2010/04/07',
+        'Open': 72.16,
+        'High': 72.52,
+        'Low': 71.47,
+        'Close': 72.1,
+        'Volume': 6717177
+    },
+    {
+        'Date': '2010/04/08',
+        'Open': 71.89,
+        'High': 72.46,
+        'Low': 71.21,
+        'Close': 72.28,
+        'Volume': 3743018
+    },
+    {
+        'Date': '2010/04/09',
+        'Open': 72.26,
+        'High': 72.66,
+        'Low': 71.81,
+        'Close': 72.42,
+        'Volume': 3345780
+    },
+    {
+        'Date': '2010/04/12',
+        'Open': 72.15,
+        'High': 72.57,
+        'Low': 71.8,
+        'Close': 71.92,
+        'Volume': 3666172
+    },
+    {
+        'Date': '2010/04/13',
+        'Open': 71.54,
+        'High': 71.69,
+        'Low': 70.5,
+        'Close': 71.19,
+        'Volume': 5079284
+    },
+    {
+        'Date': '2010/04/14',
+        'Open': 70.83,
+        'High': 71.76,
+        'Low': 70.81,
+        'Close': 71.7,
+        'Volume': 3496649
+    },
+    {
+        'Date': '2010/04/15',
+        'Open': 71.34,
+        'High': 72.61,
+        'Low': 71.34,
+        'Close': 72.09,
+        'Volume': 2943682
+    },
+    {
+        'Date': '2010/04/16',
+        'Open': 72.1,
+        'High': 72.1,
+        'Low': 69.88,
+        'Close': 70.79,
+        'Volume': 8075323
+    },
+    {
+        'Date': '2010/04/19',
+        'Open': 70.27,
+        'High': 71.28,
+        'Low': 70.16,
+        'Close': 70.96,
+        'Volume': 4203068
+    },
+    {
+        'Date': '2010/04/20',
+        'Open': 71.54,
+        'High': 71.98,
+        'Low': 70.95,
+        'Close': 71.41,
+        'Volume': 4760806
+    },
+    {
+        'Date': '2010/04/21',
+        'Open': 71.51,
+        'High': 74.65,
+        'Low': 71.51,
+        'Close': 74.16,
+        'Volume': 12037705
+    },
+    {
+        'Date': '2010/04/22',
+        'Open': 74.46,
+        'High': 76,
+        'Low': 73.68,
+        'Close': 75.59,
+        'Volume': 9088834
+    },
+    {
+        'Date': '2010/04/23',
+        'Open': 75.04,
+        'High': 75.68,
+        'Low': 74.55,
+        'Close': 75.13,
+        'Volume': 5198190
+    },
+    {
+        'Date': '2010/04/26',
+        'Open': 74.58,
+        'High': 75.29,
+        'Low': 74.14,
+        'Close': 74.34,
+        'Volume': 4024935
+    },
+    {
+        'Date': '2010/04/27',
+        'Open': 74.65,
+        'High': 74.93,
+        'Low': 72.23,
+        'Close': 72.48,
+        'Volume': 6054842
+    },
+    {
+        'Date': '2010/04/28',
+        'Open': 72.95,
+        'High': 72.99,
+        'Low': 71.34,
+        'Close': 72.37,
+        'Volume': 5699477
+    },
+    {
+        'Date': '2010/04/29',
+        'Open': 73,
+        'High': 74,
+        'Low': 72.67,
+        'Close': 73.79,
+        'Volume': 5203310
+    },
+    {
+        'Date': '2010/04/30',
+        'Open': 73.8,
+        'High': 74.48,
+        'Low': 72.26,
+        'Close': 72.43,
+        'Volume': 5601081
+    },
+    {
+        'Date': '2010/05/03',
+        'Open': 72.62,
+        'High': 74.7,
+        'Low': 72.46,
+        'Close': 74.39,
+        'Volume': 5407779
+    },
+    {
+        'Date': '2010/05/04',
+        'Open': 73.31,
+        'High': 73.45,
+        'Low': 72.23,
+        'Close': 72.79,
+        'Volume': 6230700
+    },
+    {
+        'Date': '2010/05/05',
+        'Open': 71.9,
+        'High': 72.04,
+        'Low': 70.44,
+        'Close': 71,
+        'Volume': 5509124
+    },
+    {
+        'Date': '2010/05/06',
+        'Open': 70.66,
+        'High': 71.49,
+        'Low': 62,
+        'Close': 67.97,
+        'Volume': 13771537
+    },
+    {
+        'Date': '2010/05/07',
+        'Open': 68.29,
+        'High': 69.12,
+        'Low': 65.8,
+        'Close': 66.72,
+        'Volume': 8927346
+    },
+    {
+        'Date': '2010/05/10',
+        'Open': 69.96,
+        'High': 71.73,
+        'Low': 69.8,
+        'Close': 71,
+        'Volume': 8841884
+    },
+    {
+        'Date': '2010/05/11',
+        'Open': 70.31,
+        'High': 72.67,
+        'Low': 70.14,
+        'Close': 71.42,
+        'Volume': 6551880
+    },
+    {
+        'Date': '2010/05/12',
+        'Open': 72.04,
+        'High': 73.37,
+        'Low': 72.04,
+        'Close': 72.87,
+        'Volume': 6331552
+    },
+    {
+        'Date': '2010/05/13',
+        'Open': 72.66,
+        'High': 73.3,
+        'Low': 71.56,
+        'Close': 71.76,
+        'Volume': 3953696
+    },
+    {
+        'Date': '2010/05/14',
+        'Open': 71.08,
+        'High': 71.4,
+        'Low': 68.98,
+        'Close': 69.82,
+        'Volume': 7954557
+    },
+    {
+        'Date': '2010/05/17',
+        'Open': 70.36,
+        'High': 70.37,
+        'Low': 67.62,
+        'Close': 69.68,
+        'Volume': 4814936
+    },
+    {
+        'Date': '2010/05/18',
+        'Open': 69.89,
+        'High': 70.13,
+        'Low': 67.3,
+        'Close': 67.72,
+        'Volume': 8882829
+    },
+    {
+        'Date': '2010/05/19',
+        'Open': 66.85,
+        'High': 67.55,
+        'Low': 65.28,
+        'Close': 66.21,
+        'Volume': 9974312
+    },
+    {
+        'Date': '2010/05/20',
+        'Open': 65,
+        'High': 65.11,
+        'Low': 62.8,
+        'Close': 63,
+        'Volume': 10904161
+    },
+    {
+        'Date': '2010/05/21',
+        'Open': 61.99,
+        'High': 65,
+        'Low': 61.39,
+        'Close': 64.56,
+        'Volume': 10882625
+    },
+    {
+        'Date': '2010/05/24',
+        'Open': 63.66,
+        'High': 64.61,
+        'Low': 63.06,
+        'Close': 63.15,
+        'Volume': 6168825
+    },
+    {
+        'Date': '2010/05/25',
+        'Open': 61,
+        'High': 62.98,
+        'Low': 60.61,
+        'Close': 62.78,
+        'Volume': 6903135
+    },
+    {
+        'Date': '2010/05/26',
+        'Open': 63.6,
+        'High': 65.41,
+        'Low': 63,
+        'Close': 63.26,
+        'Volume': 7386008
+    },
+    {
+        'Date': '2010/05/27',
+        'Open': 64.86,
+        'High': 65.23,
+        'Low': 63.91,
+        'Close': 65.13,
+        'Volume': 7444591
+    },
+    {
+        'Date': '2010/05/28',
+        'Open': 64.18,
+        'High': 64.18,
+        'Low': 64.18,
+        'Close': 64.18,
+        'Volume': 0
+    },
+    {
+        'Date': '2010/05/31',
+        'Open': 64.18,
+        'High': 64.18,
+        'Low': 64.18,
+        'Close': 64.18,
+        'Volume': 0
+    },
+    {
+        'Date': '2010/06/01',
+        'Open': 64.27,
+        'High': 65.2,
+        'Low': 62.86,
+        'Close': 62.95,
+        'Volume': 6318443
+    },
+    {
+        'Date': '2010/06/02',
+        'Open': 63.39,
+        'High': 64.37,
+        'Low': 62.06,
+        'Close': 64.34,
+        'Volume': 4588144
+    },
+    {
+        'Date': '2010/06/03',
+        'Open': 64.84,
+        'High': 64.84,
+        'Low': 63.51,
+        'Close': 64.31,
+        'Volume': 3775793
+    },
+    {
+        'Date': '2010/06/04',
+        'Open': 63.25,
+        'High': 63.41,
+        'Low': 60.93,
+        'Close': 61.15,
+        'Volume': 8228715
+    },
+    {
+        'Date': '2010/06/07',
+        'Open': 61.69,
+        'High': 61.7,
+        'Low': 60.07,
+        'Close': 60.11,
+        'Volume': 5918574
+    },
+    {
+        'Date': '2010/06/08',
+        'Open': 60.33,
+        'High': 61.1,
+        'Low': 59.84,
+        'Close': 61.02,
+        'Volume': 7192623
+    },
+    {
+        'Date': '2010/06/09',
+        'Open': 61.48,
+        'High': 63.18,
+        'Low': 61.17,
+        'Close': 61.71,
+        'Volume': 7729414
+    },
+    {
+        'Date': '2010/06/10',
+        'Open': 62.81,
+        'High': 64.01,
+        'Low': 62.3,
+        'Close': 63.89,
+        'Volume': 5682835
+    },
+    {
+        'Date': '2010/06/11',
+        'Open': 63.16,
+        'High': 65.7,
+        'Low': 63.15,
+        'Close': 65.38,
+        'Volume': 8462575
+    },
+    {
+        'Date': '2010/06/14',
+        'Open': 66.22,
+        'High': 66.55,
+        'Low': 64.71,
+        'Close': 64.82,
+        'Volume': 6000064
+    },
+    {
+        'Date': '2010/06/15',
+        'Open': 65.67,
+        'High': 67.57,
+        'Low': 65.47,
+        'Close': 67.48,
+        'Volume': 6400775
+    },
+    {
+        'Date': '2010/06/16',
+        'Open': 66.93,
+        'High': 67.56,
+        'Low': 66.6,
+        'Close': 67.03,
+        'Volume': 4452275
+    },
+    {
+        'Date': '2010/06/17',
+        'Open': 67.48,
+        'High': 67.49,
+        'Low': 65.88,
+        'Close': 67.26,
+        'Volume': 3637256
+    },
+    {
+        'Date': '2010/06/18',
+        'Open': 67.38,
+        'High': 68.14,
+        'Low': 67.16,
+        'Close': 67.96,
+        'Volume': 6216603
+    },
+    {
+        'Date': '2010/06/21',
+        'Open': 68.95,
+        'High': 69.34,
+        'Low': 67.57,
+        'Close': 67.97,
+        'Volume': 4109588
+    },
+    {
+        'Date': '2010/06/22',
+        'Open': 67.97,
+        'High': 68.47,
+        'Low': 66.15,
+        'Close': 66.28,
+        'Volume': 4188173
+    },
+    {
+        'Date': '2010/06/23',
+        'Open': 66.42,
+        'High': 67.88,
+        'Low': 65.65,
+        'Close': 67.45,
+        'Volume': 6098515
+    },
+    {
+        'Date': '2010/06/24',
+        'Open': 67.17,
+        'High': 68.24,
+        'Low': 67.14,
+        'Close': 67.43,
+        'Volume': 7782533
+    },
+    {
+        'Date': '2010/06/25',
+        'Open': 67.31,
+        'High': 68.77,
+        'Low': 66.67,
+        'Close': 68.77,
+        'Volume': 13325760
+    },
+    {
+        'Date': '2010/06/28',
+        'Open': 68.43,
+        'High': 68.62,
+        'Low': 67.26,
+        'Close': 67.3,
+        'Volume': 5517259
+    },
+    {
+        'Date': '2010/06/29',
+        'Open': 66.11,
+        'High': 66.2,
+        'Low': 62.56,
+        'Close': 63.04,
+        'Volume': 9212875
+    },
+    {
+        'Date': '2010/06/30',
+        'Open': 63.05,
+        'High': 64.21,
+        'Low': 62.58,
+        'Close': 62.75,
+        'Volume': 7102383
+    },
+    {
+        'Date': '2010/07/01',
+        'Open': 62.48,
+        'High': 62.72,
+        'Low': 61.31,
+        'Close': 62.26,
+        'Volume': 6465874
+    },
+    {
+        'Date': '2010/07/02',
+        'Open': 61.94,
+        'High': 61.94,
+        'Low': 61.94,
+        'Close': 61.94,
+        'Volume': 0
+    },
+    {
+        'Date': '2010/07/05',
+        'Open': 61.94,
+        'High': 61.94,
+        'Low': 61.94,
+        'Close': 61.94,
+        'Volume': 0
+    },
+    {
+        'Date': '2010/07/06',
+        'Open': 62.71,
+        'High': 63.02,
+        'Low': 60.65,
+        'Close': 61.36,
+        'Volume': 5444212
+    },
+    {
+        'Date': '2010/07/07',
+        'Open': 61.48,
+        'High': 63.37,
+        'Low': 61.03,
+        'Close': 63.3,
+        'Volume': 4785046
+    },
+    {
+        'Date': '2010/07/08',
+        'Open': 64.09,
+        'High': 64.89,
+        'Low': 63.55,
+        'Close': 64.73,
+        'Volume': 4489385
+    },
+    {
+        'Date': '2010/07/09',
+        'Open': 65.2,
+        'High': 65.2,
+        'Low': 64.01,
+        'Close': 64.66,
+        'Volume': 3145076
+    },
+    {
+        'Date': '2010/07/12',
+        'Open': 64.55,
+        'High': 64.98,
+        'Low': 64.01,
+        'Close': 64.34,
+        'Volume': 2299533
+    },
+    {
+        'Date': '2010/07/13',
+        'Open': 65.15,
+        'High': 65.36,
+        'Low': 64.18,
+        'Close': 64.43,
+        'Volume': 6208260
+    },
+    {
+        'Date': '2010/07/14',
+        'Open': 64.29,
+        'High': 65.39,
+        'Low': 64.05,
+        'Close': 64.75,
+        'Volume': 3822487
+    },
+    {
+        'Date': '2010/07/15',
+        'Open': 65.65,
+        'High': 65.78,
+        'Low': 63.36,
+        'Close': 64.37,
+        'Volume': 8069172
+    },
+    {
+        'Date': '2010/07/16',
+        'Open': 63.96,
+        'High': 64.26,
+        'Low': 61.68,
+        'Close': 61.9,
+        'Volume': 7016315
+    },
+    {
+        'Date': '2010/07/19',
+        'Open': 62.72,
+        'High': 63.36,
+        'Low': 62.04,
+        'Close': 63.18,
+        'Volume': 5031493
+    },
+    {
+        'Date': '2010/07/20',
+        'Open': 62.26,
+        'High': 64,
+        'Low': 61.83,
+        'Close': 63.88,
+        'Volume': 5069055
+    },
+    {
+        'Date': '2010/07/21',
+        'Open': 64.4,
+        'High': 64.81,
+        'Low': 62.66,
+        'Close': 63.18,
+        'Volume': 4459407
+    },
+    {
+        'Date': '2010/07/22',
+        'Open': 64.02,
+        'High': 67.11,
+        'Low': 64.02,
+        'Close': 66.6,
+        'Volume': 7574451
+    },
+    {
+        'Date': '2010/07/23',
+        'Open': 66.49,
+        'High': 68.17,
+        'Low': 66.36,
+        'Close': 67.93,
+        'Volume': 5029708
+    },
+    {
+        'Date': '2010/07/26',
+        'Open': 68.15,
+        'High': 68.99,
+        'Low': 68,
+        'Close': 68.85,
+        'Volume': 5836465
+    },
+    {
+        'Date': '2010/07/27',
+        'Open': 69.25,
+        'High': 69.75,
+        'Low': 68.4,
+        'Close': 68.62,
+        'Volume': 5687098
+    },
+    {
+        'Date': '2010/07/28',
+        'Open': 67.62,
+        'High': 68,
+        'Low': 66.9,
+        'Close': 67.32,
+        'Volume': 5540629
+    },
+    {
+        'Date': '2010/07/29',
+        'Open': 67.85,
+        'High': 68.53,
+        'Low': 66.69,
+        'Close': 67.22,
+        'Volume': 4460227
+    },
+    {
+        'Date': '2010/07/30',
+        'Open': 66.61,
+        'High': 68.38,
+        'Low': 66.47,
+        'Close': 68.14,
+        'Volume': 6032163
+    },
+    {
+        'Date': '2010/08/02',
+        'Open': 69.01,
+        'High': 69.93,
+        'Low': 68.5,
+        'Close': 69.69,
+        'Volume': 5430717
+    },
+    {
+        'Date': '2010/08/03',
+        'Open': 69.31,
+        'High': 70,
+        'Low': 68.93,
+        'Close': 69.54,
+        'Volume': 3778718
+    },
+    {
+        'Date': '2010/08/04',
+        'Open': 69.42,
+        'High': 69.93,
+        'Low': 69.16,
+        'Close': 69.25,
+        'Volume': 3861191
+    },
+    {
+        'Date': '2010/08/05',
+        'Open': 68.73,
+        'High': 69.25,
+        'Low': 68.33,
+        'Close': 68.71,
+        'Volume': 4318815
+    },
+    {
+        'Date': '2010/08/06',
+        'Open': 68.03,
+        'High': 68.72,
+        'Low': 67.36,
+        'Close': 68.7,
+        'Volume': 4498788
+    },
+    {
+        'Date': '2010/08/09',
+        'Open': 69.17,
+        'High': 69.47,
+        'Low': 68.45,
+        'Close': 68.99,
+        'Volume': 2907790
+    },
+    {
+        'Date': '2010/08/10',
+        'Open': 68.29,
+        'High': 68.97,
+        'Low': 67.54,
+        'Close': 68.62,
+        'Volume': 4127296
+    },
+    {
+        'Date': '2010/08/11',
+        'Open': 67.18,
+        'High': 67.26,
+        'Low': 64.92,
+        'Close': 65.6,
+        'Volume': 5230837
+    },
+    {
+        'Date': '2010/08/12',
+        'Open': 64.65,
+        'High': 65.27,
+        'Low': 64.44,
+        'Close': 64.7,
+        'Volume': 3847607
+    },
+    {
+        'Date': '2010/08/13',
+        'Open': 64.59,
+        'High': 65.7,
+        'Low': 64.54,
+        'Close': 64.84,
+        'Volume': 3667747
+    },
+    {
+        'Date': '2010/08/16',
+        'Open': 64.27,
+        'High': 64.93,
+        'Low': 63.65,
+        'Close': 64.4,
+        'Volume': 3042334
+    },
+    {
+        'Date': '2010/08/17',
+        'Open': 65.16,
+        'High': 66.91,
+        'Low': 64.65,
+        'Close': 65.99,
+        'Volume': 4303899
+    },
+    {
+        'Date': '2010/08/18',
+        'Open': 66.05,
+        'High': 66.36,
+        'Low': 64.99,
+        'Close': 66,
+        'Volume': 2816059
+    },
+    {
+        'Date': '2010/08/19',
+        'Open': 65.74,
+        'High': 65.82,
+        'Low': 64.15,
+        'Close': 64.62,
+        'Volume': 4201568
+    },
+    {
+        'Date': '2010/08/20',
+        'Open': 64.2,
+        'High': 64.73,
+        'Low': 63.59,
+        'Close': 64.6,
+        'Volume': 3865920
+    },
+    {
+        'Date': '2010/08/23',
+        'Open': 65.09,
+        'High': 65.24,
+        'Low': 63.21,
+        'Close': 63.3,
+        'Volume': 3888194
+    },
+    {
+        'Date': '2010/08/24',
+        'Open': 62.55,
+        'High': 62.81,
+        'Low': 60.53,
+        'Close': 60.93,
+        'Volume': 9983972
+    },
+    {
+        'Date': '2010/08/25',
+        'Open': 60.49,
+        'High': 61.11,
+        'Low': 59.48,
+        'Close': 60.76,
+        'Volume': 5144544
+    },
+    {
+        'Date': '2010/08/26',
+        'Open': 61.36,
+        'High': 62.56,
+        'Low': 61.07,
+        'Close': 61.32,
+        'Volume': 4889769
+    },
+    {
+        'Date': '2010/08/27',
+        'Open': 61.13,
+        'High': 63.34,
+        'Low': 60.57,
+        'Close': 63.16,
+        'Volume': 6851673
+    },
+    {
+        'Date': '2010/08/30',
+        'Open': 63,
+        'High': 63.19,
+        'Low': 62.1,
+        'Close': 62.1,
+        'Volume': 3279135
+    },
+    {
+        'Date': '2010/08/31',
+        'Open': 62,
+        'High': 62.18,
+        'Low': 60.8,
+        'Close': 61.13,
+        'Volume': 5309421
+    },
+    {
+        'Date': '2010/09/01',
+        'Open': 61.79,
+        'High': 63.09,
+        'Low': 61.66,
+        'Close': 62.29,
+        'Volume': 5688798
+    },
+    {
+        'Date': '2010/09/02',
+        'Open': 62.34,
+        'High': 63.39,
+        'Low': 62.2,
+        'Close': 63.39,
+        'Volume': 3465719
+    },
+    {
+        'Date': '2010/09/03',
+        'Open': 64.64,
+        'High': 64.64,
+        'Low': 64.64,
+        'Close': 64.64,
+        'Volume': 0
+    },
+    {
+        'Date': '2010/09/06',
+        'Open': 64.64,
+        'High': 64.64,
+        'Low': 64.64,
+        'Close': 64.64,
+        'Volume': 0
+    },
+    {
+        'Date': '2010/09/07',
+        'Open': 64.25,
+        'High': 64.25,
+        'Low': 63.29,
+        'Close': 63.42,
+        'Volume': 2529793
+    },
+    {
+        'Date': '2010/09/08',
+        'Open': 63.6,
+        'High': 65,
+        'Low': 63.58,
+        'Close': 64.5,
+        'Volume': 3747703
+    },
+    {
+        'Date': '2010/09/09',
+        'Open': 65.51,
+        'High': 65.63,
+        'Low': 62.95,
+        'Close': 63.44,
+        'Volume': 4190696
+    },
+    {
+        'Date': '2010/09/10',
+        'Open': 63.38,
+        'High': 64.1,
+        'Low': 62.96,
+        'Close': 63.84,
+        'Volume': 3214772
+    },
+    {
+        'Date': '2010/09/13',
+        'Open': 64.73,
+        'High': 64.98,
+        'Low': 63.92,
+        'Close': 64.19,
+        'Volume': 3126886
+    },
+    {
+        'Date': '2010/09/14',
+        'Open': 64.02,
+        'High': 64.35,
+        'Low': 62.43,
+        'Close': 62.76,
+        'Volume': 6025475
+    },
+    {
+        'Date': '2010/09/15',
+        'Open': 62.49,
+        'High': 62.79,
+        'Low': 61.89,
+        'Close': 62.73,
+        'Volume': 4929167
+    },
+    {
+        'Date': '2010/09/16',
+        'Open': 62.39,
+        'High': 63.35,
+        'Low': 62.2,
+        'Close': 62.58,
+        'Volume': 4681838
+    },
+    {
+        'Date': '2010/09/17',
+        'Open': 63.26,
+        'High': 63.34,
+        'Low': 62,
+        'Close': 62.95,
+        'Volume': 10702625
+    },
+    {
+        'Date': '2010/09/20',
+        'Open': 62.99,
+        'High': 63.9,
+        'Low': 62.53,
+        'Close': 63.72,
+        'Volume': 4187283
+    },
+    {
+        'Date': '2010/09/21',
+        'Open': 63.8,
+        'High': 64.5,
+        'Low': 63.39,
+        'Close': 64.23,
+        'Volume': 5361146
+    },
+    {
+        'Date': '2010/09/22',
+        'Open': 64.38,
+        'High': 64.86,
+        'Low': 63.63,
+        'Close': 63.9,
+        'Volume': 3635438
+    },
+    {
+        'Date': '2010/09/23',
+        'Open': 63.31,
+        'High': 63.49,
+        'Low': 62.56,
+        'Close': 62.65,
+        'Volume': 3656936
+    },
+    {
+        'Date': '2010/09/24',
+        'Open': 63.52,
+        'High': 64.83,
+        'Low': 63.33,
+        'Close': 64.6,
+        'Volume': 4626836
+    },
+    {
+        'Date': '2010/09/27',
+        'Open': 64.61,
+        'High': 64.7,
+        'Low': 63.8,
+        'Close': 63.89,
+        'Volume': 2762402
+    },
+    {
+        'Date': '2010/09/28',
+        'Open': 63.85,
+        'High': 64.67,
+        'Low': 62.94,
+        'Close': 64.52,
+        'Volume': 3583321
+    },
+    {
+        'Date': '2010/09/29',
+        'Open': 64.71,
+        'High': 66.26,
+        'Low': 64.44,
+        'Close': 65.97,
+        'Volume': 5874689
+    },
+    {
+        'Date': '2010/09/30',
+        'Open': 67.09,
+        'High': 67.97,
+        'Low': 66.05,
+        'Close': 66.54,
+        'Volume': 8214220
+    },
+    {
+        'Date': '2010/10/01',
+        'Open': 67.54,
+        'High': 67.98,
+        'Low': 66.67,
+        'Close': 66.83,
+        'Volume': 4489476
+    },
+    {
+        'Date': '2010/10/04',
+        'Open': 66.57,
+        'High': 67.89,
+        'Low': 65.86,
+        'Close': 66.33,
+        'Volume': 4073665
+    },
+    {
+        'Date': '2010/10/05',
+        'Open': 67.02,
+        'High': 68.98,
+        'Low': 67.02,
+        'Close': 68.6,
+        'Volume': 7517772
+    },
+    {
+        'Date': '2010/10/06',
+        'Open': 68.61,
+        'High': 69.39,
+        'Low': 68.41,
+        'Close': 68.58,
+        'Volume': 4719126
+    },
+    {
+        'Date': '2010/10/07',
+        'Open': 68.97,
+        'High': 69.14,
+        'Low': 67.8,
+        'Close': 68.46,
+        'Volume': 5506142
+    },
+    {
+        'Date': '2010/10/08',
+        'Open': 68.47,
+        'High': 69.71,
+        'Low': 68.15,
+        'Close': 69.23,
+        'Volume': 3335682
+    },
+    {
+        'Date': '2010/10/11',
+        'Open': 69.51,
+        'High': 70.25,
+        'Low': 69.23,
+        'Close': 69.99,
+        'Volume': 3469356
+    },
+    {
+        'Date': '2010/10/12',
+        'Open': 70.16,
+        'High': 70.6,
+        'Low': 68.91,
+        'Close': 70.22,
+        'Volume': 4381517
+    },
+    {
+        'Date': '2010/10/13',
+        'Open': 70.73,
+        'High': 72.17,
+        'Low': 70.66,
+        'Close': 71.47,
+        'Volume': 6038876
+    },
+    {
+        'Date': '2010/10/14',
+        'Open': 71.73,
+        'High': 72,
+        'Low': 70.85,
+        'Close': 71.36,
+        'Volume': 3841826
+    },
+    {
+        'Date': '2010/10/15',
+        'Open': 71.85,
+        'High': 71.9,
+        'Low': 70.05,
+        'Close': 70.11,
+        'Volume': 5641988
+    },
+    {
+        'Date': '2010/10/18',
+        'Open': 70.19,
+        'High': 71.05,
+        'Low': 70.03,
+        'Close': 70.23,
+        'Volume': 4832596
+    },
+    {
+        'Date': '2010/10/19',
+        'Open': 69.57,
+        'High': 69.96,
+        'Low': 68.35,
+        'Close': 69.05,
+        'Volume': 4493842
+    },
+    {
+        'Date': '2010/10/20',
+        'Open': 70,
+        'High': 71.94,
+        'Low': 69.57,
+        'Close': 71.36,
+        'Volume': 8067660
+    },
+    {
+        'Date': '2010/10/21',
+        'Open': 71.61,
+        'High': 71.88,
+        'Low': 70.57,
+        'Close': 71.5,
+        'Volume': 4630931
+    },
+    {
+        'Date': '2010/10/22',
+        'Open': 71.38,
+        'High': 71.63,
+        'Low': 70.61,
+        'Close': 71.26,
+        'Volume': 3062553
+    },
+    {
+        'Date': '2010/10/25',
+        'Open': 71.68,
+        'High': 72.49,
+        'Low': 71.47,
+        'Close': 71.66,
+        'Volume': 4802975
+    },
+    {
+        'Date': '2010/10/26',
+        'Open': 71.1,
+        'High': 71.65,
+        'Low': 70.73,
+        'Close': 71.3,
+        'Volume': 3547112
+    },
+    {
+        'Date': '2010/10/27',
+        'Open': 70.87,
+        'High': 71.11,
+        'Low': 69.71,
+        'Close': 70.86,
+        'Volume': 3818178
+    },
+    {
+        'Date': '2010/10/28',
+        'Open': 71.3,
+        'High': 71.79,
+        'Low': 70.35,
+        'Close': 71.27,
+        'Volume': 4128092
+    },
+    {
+        'Date': '2010/10/29',
+        'Open': 71.15,
+        'High': 71.46,
+        'Low': 70.36,
+        'Close': 70.64,
+        'Volume': 3202225
+    },
+    {
+        'Date': '2010/11/01',
+        'Open': 70.71,
+        'High': 71.89,
+        'Low': 69.91,
+        'Close': 70.48,
+        'Volume': 3324632
+    },
+    {
+        'Date': '2010/11/02',
+        'Open': 70.85,
+        'High': 70.98,
+        'Low': 68.8,
+        'Close': 69.78,
+        'Volume': 6340501
+    },
+    {
+        'Date': '2010/11/03',
+        'Open': 69.66,
+        'High': 69.73,
+        'Low': 68.04,
+        'Close': 68.94,
+        'Volume': 4676861
+    },
+    {
+        'Date': '2010/11/04',
+        'Open': 70,
+        'High': 71.58,
+        'Low': 69.78,
+        'Close': 70.85,
+        'Volume': 5758303
+    },
+    {
+        'Date': '2010/11/05',
+        'Open': 70.85,
+        'High': 71.65,
+        'Low': 70.5,
+        'Close': 71.27,
+        'Volume': 3625799
+    },
+    {
+        'Date': '2010/11/08',
+        'Open': 70.06,
+        'High': 70.41,
+        'Low': 69.75,
+        'Close': 70.21,
+        'Volume': 4171524
+    },
+    {
+        'Date': '2010/11/09',
+        'Open': 70.27,
+        'High': 70.55,
+        'Low': 68.83,
+        'Close': 69.25,
+        'Volume': 4587423
+    },
+    {
+        'Date': '2010/11/10',
+        'Open': 67.69,
+        'High': 67.69,
+        'Low': 66.79,
+        'Close': 67.07,
+        'Volume': 10494604
+    },
+    {
+        'Date': '2010/11/11',
+        'Open': 66.55,
+        'High': 66.7,
+        'Low': 65.04,
+        'Close': 65.37,
+        'Volume': 10033682
+    },
+    {
+        'Date': '2010/11/12',
+        'Open': 65.01,
+        'High': 65.25,
+        'Low': 63.01,
+        'Close': 63.09,
+        'Volume': 16721476
+    },
+    {
+        'Date': '2010/11/15',
+        'Open': 63.35,
+        'High': 64.1,
+        'Low': 62.62,
+        'Close': 63.61,
+        'Volume': 10968680
+    },
+    {
+        'Date': '2010/11/16',
+        'Open': 63.35,
+        'High': 63.35,
+        'Low': 61.84,
+        'Close': 62.78,
+        'Volume': 9636736
+    },
+    {
+        'Date': '2010/11/17',
+        'Open': 62.67,
+        'High': 63.02,
+        'Low': 62.17,
+        'Close': 62.5,
+        'Volume': 8173227
+    },
+    {
+        'Date': '2010/11/18',
+        'Open': 63.35,
+        'High': 64.72,
+        'Low': 62.72,
+        'Close': 64.61,
+        'Volume': 11579001
+    },
+    {
+        'Date': '2010/11/19',
+        'Open': 64.53,
+        'High': 64.74,
+        'Low': 63.39,
+        'Close': 63.59,
+        'Volume': 8824612
+    },
+    {
+        'Date': '2010/11/22',
+        'Open': 63.02,
+        'High': 64.17,
+        'Low': 62.8,
+        'Close': 64.03,
+        'Volume': 5917125
+    },
+    {
+        'Date': '2010/11/23',
+        'Open': 63.43,
+        'High': 64.11,
+        'Low': 63.1,
+        'Close': 63.6,
+        'Volume': 6567822
+    },
+    {
+        'Date': '2010/11/24',
+        'Open': 65.41,
+        'High': 65.41,
+        'Low': 65.41,
+        'Close': 65.41,
+        'Volume': 0
+    },
+    {
+        'Date': '2010/11/26',
+        'Open': 65.09,
+        'High': 65.46,
+        'Low': 64.67,
+        'Close': 64.8,
+        'Volume': 2280773
+    },
+    {
+        'Date': '2010/11/29',
+        'Open': 64.33,
+        'High': 64.7,
+        'Low': 63.44,
+        'Close': 64.36,
+        'Volume': 4385199
+    },
+    {
+        'Date': '2010/11/30',
+        'Open': 63.73,
+        'High': 64.21,
+        'Low': 63.47,
+        'Close': 63.77,
+        'Volume': 5819079
+    },
+    {
+        'Date': '2010/12/01',
+        'Open': 64.66,
+        'High': 65.79,
+        'Low': 64.52,
+        'Close': 65.72,
+        'Volume': 7515183
+    },
+    {
+        'Date': '2010/12/02',
+        'Open': 65.62,
+        'High': 66.8,
+        'Low': 65.55,
+        'Close': 66.59,
+        'Volume': 4768256
+    },
+    {
+        'Date': '2010/12/03',
+        'Open': 66.58,
+        'High': 66.68,
+        'Low': 65.95,
+        'Close': 66.54,
+        'Volume': 3357522
+    },
+    {
+        'Date': '2010/12/06',
+        'Open': 66.41,
+        'High': 66.96,
+        'Low': 65.97,
+        'Close': 66.59,
+        'Volume': 3455003
+    },
+    {
+        'Date': '2010/12/07',
+        'Open': 67.04,
+        'High': 67.39,
+        'Low': 66.01,
+        'Close': 66.23,
+        'Volume': 4739511
+    },
+    {
+        'Date': '2010/12/08',
+        'Open': 66.19,
+        'High': 66.56,
+        'Low': 64.92,
+        'Close': 65.18,
+        'Volume': 5230594
+    },
+    {
+        'Date': '2010/12/09',
+        'Open': 65.61,
+        'High': 65.61,
+        'Low': 64.4,
+        'Close': 64.61,
+        'Volume': 5188492
+    },
+    {
+        'Date': '2010/12/10',
+        'Open': 64.63,
+        'High': 64.77,
+        'Low': 63.96,
+        'Close': 64.16,
+        'Volume': 5501949
+    },
+    {
+        'Date': '2010/12/13',
+        'Open': 64.23,
+        'High': 64.38,
+        'Low': 63.63,
+        'Close': 63.79,
+        'Volume': 4823758
+    },
+    {
+        'Date': '2010/12/14',
+        'Open': 63.85,
+        'High': 65.11,
+        'Low': 63.68,
+        'Close': 64.49,
+        'Volume': 6304424
+    },
+    {
+        'Date': '2010/12/15',
+        'Open': 64.29,
+        'High': 64.69,
+        'Low': 64.09,
+        'Close': 64.24,
+        'Volume': 3439085
+    },
+    {
+        'Date': '2010/12/16',
+        'Open': 64.33,
+        'High': 64.85,
+        'Low': 63.71,
+        'Close': 64.4,
+        'Volume': 5169047
+    },
+    {
+        'Date': '2010/12/17',
+        'Open': 64.89,
+        'High': 65.28,
+        'Low': 64.35,
+        'Close': 65.03,
+        'Volume': 8884612
+    },
+    {
+        'Date': '2010/12/20',
+        'Open': 64.74,
+        'High': 64.77,
+        'Low': 62.82,
+        'Close': 63.27,
+        'Volume': 9710920
+    },
+    {
+        'Date': '2010/12/21',
+        'Open': 63.61,
+        'High': 64.35,
+        'Low': 63.28,
+        'Close': 64.19,
+        'Volume': 5092820
+    },
+    {
+        'Date': '2010/12/22',
+        'Open': 64.45,
+        'High': 65.14,
+        'Low': 64.01,
+        'Close': 64.61,
+        'Volume': 5255958
+    },
+    {
+        'Date': '2010/12/23',
+        'Open': 65.06,
+        'High': 65.06,
+        'Low': 65.06,
+        'Close': 65.06,
+        'Volume': 0
+    },
+    {
+        'Date': '2010/12/27',
+        'Open': 64.73,
+        'High': 64.91,
+        'Low': 64.33,
+        'Close': 64.75,
+        'Volume': 2549101
+    },
+    {
+        'Date': '2010/12/28',
+        'Open': 64.81,
+        'High': 65,
+        'Low': 64.33,
+        'Close': 64.86,
+        'Volume': 2643380
+    },
+    {
+        'Date': '2010/12/29',
+        'Open': 65,
+        'High': 65.2,
+        'Low': 64.62,
+        'Close': 65.05,
+        'Volume': 2505431
+    },
+    {
+        'Date': '2010/12/30',
+        'Open': 65.11,
+        'High': 65.23,
+        'Low': 64.73,
+        'Close': 65.01,
+        'Volume': 2343020
+    },
+    {
+        'Date': '2010/12/31',
+        'Open': 64.9,
+        'High': 65.29,
+        'Low': 64.62,
+        'Close': 65.26,
+        'Volume': 2137676
+    }
+];
diff --git a/vue-options-api-demos/charts/chart/trendlines/date-series/main.js b/vue-options-api-demos/charts/chart/trendlines/date-series/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/date-series/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/trendlines/date-series/main.vue b/vue-options-api-demos/charts/chart/trendlines/date-series/main.vue
new file mode 100644
index 00000000..97f03639
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/date-series/main.vue
@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTitle :text="'Trendlines'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :name="'Sales By Quarter'"
+          :type="'line'"
+          :style="'smooth'"
+          :field="'count'"
+          :categoryField="'date'"
+          :data-items="seriesData"
+        />
+        <ChartSeriesItem
+          :name="'Sales Trendline (LINEAR)'"
+          :type="'linearTrendline'"
+          :for="'Sales By Quarter'"
+        />
+        <ChartSeriesItem
+          :name="'Sales Trendline (M.AVG)'"
+          :type="'movingAverageTrendline'"
+          :dashType="'dot'"
+          :for="'Sales By Quarter'"
+        />
+      </ChartSeries>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem baseUnit='fit' />
+      </ChartCategoryAxis>
+      <ChartTooltip :shared="true" />
+      <ChartLegend :position="'bottom'" />
+    </Chart>
+  </div>
+</template>
+
+<script>
+  import {
+    Chart,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartTooltip,
+    ChartLegend,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem
+  } from '@progress/kendo-vue-charts';
+
+  import { salesByQuarter } from './sales-data.js';
+
+  export default {
+    components: {
+      Chart,
+      ChartTitle,
+      ChartSeries,
+      ChartSeriesItem,
+      ChartTooltip,
+      ChartLegend,
+      ChartCategoryAxis,
+      ChartCategoryAxisItem
+    },
+    data() {
+      return {
+        seriesData: salesByQuarter
+      };
+    }
+  };
+</script>
diff --git a/vue-options-api-demos/charts/chart/trendlines/date-series/sales-data.js b/vue-options-api-demos/charts/chart/trendlines/date-series/sales-data.js
new file mode 100644
index 00000000..c253bc6f
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/date-series/sales-data.js
@@ -0,0 +1,247 @@
+export const salesByQuarter = [
+    {
+        period: '2010 Q1',
+        date: new Date(2010, 0, 1),
+        count: 4485.0
+    },
+    {
+        period: '2010 Q2',
+        date: new Date(2010, 3, 1),
+        count: 4409.0
+    },
+    {
+        period: '2010 Q3',
+        date: new Date(2010, 6, 1),
+        count: 4469.0
+    },
+    {
+        period: '2010 Q4',
+        date: new Date(2010, 9, 1),
+        count: 4682.0
+    },
+    {
+        period: '2011 Q1',
+        date: new Date(2011, 0, 1),
+        count: 5610.0
+    },
+    {
+        period: '2011 Q2',
+        date: new Date(2011, 3, 1),
+        count: 6580.0
+    },
+    {
+        period: '2011 Q3',
+        date: new Date(2011, 6, 1),
+        count: 7534.0
+    },
+    {
+        period: '2011 Q4',
+        date: new Date(2011, 9, 1),
+        count: 7894.0
+    },
+    {
+        period: '2012 Q1',
+        date: new Date(2012, 0, 1),
+        count: 8748.0
+    },
+    {
+        period: '2012 Q2',
+        date: new Date(2012, 3, 1),
+        count: 10223.0
+    },
+    {
+        period: '2012 Q3',
+        date: new Date(2012, 6, 1),
+        count: 10797.0
+    },
+    {
+        period: '2012 Q4',
+        date: new Date(2012, 9, 1),
+        count: 12295.0
+    },
+    {
+        period: '2013 Q1',
+        date: new Date(2013, 0, 1),
+        count: 13153.0
+    },
+    {
+        period: '2013 Q2',
+        date: new Date(2013, 3, 1),
+        count: 14628.0
+    },
+    {
+        period: '2013 Q3',
+        date: new Date(2013, 6, 1),
+        count: 16779.0
+    },
+    {
+        period: '2013 Q4',
+        date: new Date(2013, 9, 1),
+        count: 18710.0
+    },
+    {
+        period: '2014 Q1',
+        date: new Date(2014, 0, 1),
+        count: 22219.0
+    },
+    {
+        period: '2014 Q2',
+        date: new Date(2014, 3, 1),
+        count: 25886.0
+    },
+    {
+        period: '2014 Q3',
+        date: new Date(2014, 6, 1),
+        count: 31640.0
+    },
+    {
+        period: '2014 Q4',
+        date: new Date(2014, 9, 1),
+        count: 36846.0
+    },
+    {
+        period: '2015 Q1',
+        date: new Date(2015, 0, 1),
+        count: 43433.0
+    },
+    {
+        period: '2015 Q2',
+        date: new Date(2015, 3, 1),
+        count: 48575.0
+    },
+    {
+        period: '2015 Q3',
+        date: new Date(2015, 6, 1),
+        count: 54533.0
+    },
+    {
+        period: '2015 Q4',
+        date: new Date(2015, 9, 1),
+        count: 62388.0
+    },
+    {
+        period: '2016 Q1',
+        date: new Date(2016, 0, 1),
+        count: 70706.0
+    },
+    {
+        period: '2016 Q2',
+        date: new Date(2016, 3, 1),
+        count: 75439.0
+    },
+    {
+        period: '2016 Q3',
+        date: new Date(2016, 6, 1),
+        count: 83213.0
+    },
+    {
+        period: '2016 Q4',
+        date: new Date(2016, 9, 1),
+        count: 88527.0
+    },
+    {
+        period: '2017 Q1',
+        date: new Date(2017, 0, 1),
+        count: 99865.0
+    },
+    {
+        period: '2017 Q2',
+        date: new Date(2017, 3, 1),
+        count: 107388.0
+    },
+    {
+        period: '2017 Q3',
+        date: new Date(2017, 6, 1),
+        count: 117761.0
+    },
+    {
+        period: '2017 Q4',
+        date: new Date(2017, 9, 1),
+        count: 125263.0
+    },
+    {
+        period: '2018 Q1',
+        date: new Date(2018, 0, 1),
+        count: 135950.0
+    },
+    {
+        period: '2018 Q2',
+        date: new Date(2018, 3, 1),
+        count: 144737.0
+    },
+    {
+        period: '2018 Q3',
+        date: new Date(2018, 6, 1),
+        count: 155933.0
+    },
+    {
+        period: '2018 Q4',
+        date: new Date(2018, 9, 1),
+        count: 167960.0
+    },
+    {
+        period: '2019 Q1',
+        date: new Date(2019, 0, 1),
+        count: 182725.0
+    },
+    {
+        period: '2019 Q2',
+        date: new Date(2019, 3, 1),
+        count: 199079.0
+    },
+    {
+        period: '2019 Q3',
+        date: new Date(2019, 6, 1),
+        count: 234952.0
+    },
+    {
+        period: '2019 Q4',
+        date: new Date(2019, 9, 1),
+        count: 271298.0
+    },
+    {
+        period: '2020 Q1',
+        date: new Date(2020, 0, 1),
+        count: 323309.0
+    },
+    {
+        period: '2020 Q2',
+        date: new Date(2020, 3, 1),
+        count: 358145.0
+    },
+    {
+        period: '2020 Q3',
+        date: new Date(2020, 6, 1),
+        count: 460927.0
+    },
+    {
+        period: '2020 Q4',
+        date: new Date(2020, 9, 1),
+        count: 579568.0
+    },
+    {
+        period: '2021 Q1',
+        date: new Date(2021, 0, 1),
+        count: 669590.0
+    },
+    {
+        period: '2021 Q2',
+        date: new Date(2021, 3, 1),
+        count: 793564.0
+    },
+    {
+        period: '2021 Q3',
+        date: new Date(2021, 6, 1),
+        count: 941133.0
+    },
+    {
+        period: '2021 Q4',
+        date: new Date(2021, 9, 1),
+        count: 1133020.0
+    },
+    {
+        period: '2022 Q1',
+        date: new Date(2022, 0, 1),
+        count: 426324.0
+    }
+];
diff --git a/vue-options-api-demos/charts/chart/trendlines/exponential/categorical/main.js b/vue-options-api-demos/charts/chart/trendlines/exponential/categorical/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/exponential/categorical/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/trendlines/exponential/categorical/main.vue b/vue-options-api-demos/charts/chart/trendlines/exponential/categorical/main.vue
new file mode 100644
index 00000000..01fb5f47
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/exponential/categorical/main.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTitle :text="'Trendlines'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :name="'Sales By Quarter'"
+          :type="'line'"
+          :style="'smooth'"
+          :field="'count'"
+          :categoryField="'period'"
+          :data-items="seriesData"
+        />
+        <ChartSeriesItem
+          :name="'Sales Trendline (EXP)'"
+          :type="'exponentialTrendline'"
+          :for="'Sales By Quarter'"
+        />
+      </ChartSeries>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :labels="labels" />
+      </ChartCategoryAxis>
+      <ChartTooltip :shared="true" />
+      <ChartLegend :position="'bottom'" />
+    </Chart>
+  </div>
+</template>
+
+<script>
+  import {
+    Chart,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartTooltip,
+    ChartLegend,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem
+  } from '@progress/kendo-vue-charts';
+
+  import { salesByQuarter } from './sales-data.js';
+
+  export default {
+    components: {
+      Chart,
+      ChartTitle,
+      ChartSeries,
+      ChartSeriesItem,
+      ChartTooltip,
+      ChartLegend,
+      ChartCategoryAxis,
+      ChartCategoryAxisItem
+    },
+    data() {
+      return {
+        seriesData: [...salesByQuarter],
+        labels: { step: 5 }
+      };
+    }
+  };
+</script>
diff --git a/vue-options-api-demos/charts/chart/trendlines/exponential/categorical/sales-data.js b/vue-options-api-demos/charts/chart/trendlines/exponential/categorical/sales-data.js
new file mode 100644
index 00000000..c253bc6f
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/exponential/categorical/sales-data.js
@@ -0,0 +1,247 @@
+export const salesByQuarter = [
+    {
+        period: '2010 Q1',
+        date: new Date(2010, 0, 1),
+        count: 4485.0
+    },
+    {
+        period: '2010 Q2',
+        date: new Date(2010, 3, 1),
+        count: 4409.0
+    },
+    {
+        period: '2010 Q3',
+        date: new Date(2010, 6, 1),
+        count: 4469.0
+    },
+    {
+        period: '2010 Q4',
+        date: new Date(2010, 9, 1),
+        count: 4682.0
+    },
+    {
+        period: '2011 Q1',
+        date: new Date(2011, 0, 1),
+        count: 5610.0
+    },
+    {
+        period: '2011 Q2',
+        date: new Date(2011, 3, 1),
+        count: 6580.0
+    },
+    {
+        period: '2011 Q3',
+        date: new Date(2011, 6, 1),
+        count: 7534.0
+    },
+    {
+        period: '2011 Q4',
+        date: new Date(2011, 9, 1),
+        count: 7894.0
+    },
+    {
+        period: '2012 Q1',
+        date: new Date(2012, 0, 1),
+        count: 8748.0
+    },
+    {
+        period: '2012 Q2',
+        date: new Date(2012, 3, 1),
+        count: 10223.0
+    },
+    {
+        period: '2012 Q3',
+        date: new Date(2012, 6, 1),
+        count: 10797.0
+    },
+    {
+        period: '2012 Q4',
+        date: new Date(2012, 9, 1),
+        count: 12295.0
+    },
+    {
+        period: '2013 Q1',
+        date: new Date(2013, 0, 1),
+        count: 13153.0
+    },
+    {
+        period: '2013 Q2',
+        date: new Date(2013, 3, 1),
+        count: 14628.0
+    },
+    {
+        period: '2013 Q3',
+        date: new Date(2013, 6, 1),
+        count: 16779.0
+    },
+    {
+        period: '2013 Q4',
+        date: new Date(2013, 9, 1),
+        count: 18710.0
+    },
+    {
+        period: '2014 Q1',
+        date: new Date(2014, 0, 1),
+        count: 22219.0
+    },
+    {
+        period: '2014 Q2',
+        date: new Date(2014, 3, 1),
+        count: 25886.0
+    },
+    {
+        period: '2014 Q3',
+        date: new Date(2014, 6, 1),
+        count: 31640.0
+    },
+    {
+        period: '2014 Q4',
+        date: new Date(2014, 9, 1),
+        count: 36846.0
+    },
+    {
+        period: '2015 Q1',
+        date: new Date(2015, 0, 1),
+        count: 43433.0
+    },
+    {
+        period: '2015 Q2',
+        date: new Date(2015, 3, 1),
+        count: 48575.0
+    },
+    {
+        period: '2015 Q3',
+        date: new Date(2015, 6, 1),
+        count: 54533.0
+    },
+    {
+        period: '2015 Q4',
+        date: new Date(2015, 9, 1),
+        count: 62388.0
+    },
+    {
+        period: '2016 Q1',
+        date: new Date(2016, 0, 1),
+        count: 70706.0
+    },
+    {
+        period: '2016 Q2',
+        date: new Date(2016, 3, 1),
+        count: 75439.0
+    },
+    {
+        period: '2016 Q3',
+        date: new Date(2016, 6, 1),
+        count: 83213.0
+    },
+    {
+        period: '2016 Q4',
+        date: new Date(2016, 9, 1),
+        count: 88527.0
+    },
+    {
+        period: '2017 Q1',
+        date: new Date(2017, 0, 1),
+        count: 99865.0
+    },
+    {
+        period: '2017 Q2',
+        date: new Date(2017, 3, 1),
+        count: 107388.0
+    },
+    {
+        period: '2017 Q3',
+        date: new Date(2017, 6, 1),
+        count: 117761.0
+    },
+    {
+        period: '2017 Q4',
+        date: new Date(2017, 9, 1),
+        count: 125263.0
+    },
+    {
+        period: '2018 Q1',
+        date: new Date(2018, 0, 1),
+        count: 135950.0
+    },
+    {
+        period: '2018 Q2',
+        date: new Date(2018, 3, 1),
+        count: 144737.0
+    },
+    {
+        period: '2018 Q3',
+        date: new Date(2018, 6, 1),
+        count: 155933.0
+    },
+    {
+        period: '2018 Q4',
+        date: new Date(2018, 9, 1),
+        count: 167960.0
+    },
+    {
+        period: '2019 Q1',
+        date: new Date(2019, 0, 1),
+        count: 182725.0
+    },
+    {
+        period: '2019 Q2',
+        date: new Date(2019, 3, 1),
+        count: 199079.0
+    },
+    {
+        period: '2019 Q3',
+        date: new Date(2019, 6, 1),
+        count: 234952.0
+    },
+    {
+        period: '2019 Q4',
+        date: new Date(2019, 9, 1),
+        count: 271298.0
+    },
+    {
+        period: '2020 Q1',
+        date: new Date(2020, 0, 1),
+        count: 323309.0
+    },
+    {
+        period: '2020 Q2',
+        date: new Date(2020, 3, 1),
+        count: 358145.0
+    },
+    {
+        period: '2020 Q3',
+        date: new Date(2020, 6, 1),
+        count: 460927.0
+    },
+    {
+        period: '2020 Q4',
+        date: new Date(2020, 9, 1),
+        count: 579568.0
+    },
+    {
+        period: '2021 Q1',
+        date: new Date(2021, 0, 1),
+        count: 669590.0
+    },
+    {
+        period: '2021 Q2',
+        date: new Date(2021, 3, 1),
+        count: 793564.0
+    },
+    {
+        period: '2021 Q3',
+        date: new Date(2021, 6, 1),
+        count: 941133.0
+    },
+    {
+        period: '2021 Q4',
+        date: new Date(2021, 9, 1),
+        count: 1133020.0
+    },
+    {
+        period: '2022 Q1',
+        date: new Date(2022, 0, 1),
+        count: 426324.0
+    }
+];
diff --git a/vue-options-api-demos/charts/chart/trendlines/exponential/scatter/main.js b/vue-options-api-demos/charts/chart/trendlines/exponential/scatter/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/exponential/scatter/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/trendlines/exponential/scatter/main.vue b/vue-options-api-demos/charts/chart/trendlines/exponential/scatter/main.vue
new file mode 100644
index 00000000..ecd921a3
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/exponential/scatter/main.vue
@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTitle :text="'Trendlines'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :name="'Series A'"
+          :type="'scatter'"
+          :data-items="seriesData"
+        />
+        <ChartSeriesItem
+          :name="'Sales Trendline (EXP)'"
+          :type="'exponentialTrendline'"
+          :dashType="'solid'"
+          :for="'Series A'"
+        />
+      </ChartSeries>
+      <ChartLegend :visible="false" />
+    </Chart>
+  </div>
+</template>
+
+<script>
+  import {
+    Chart,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartLegend
+  } from '@progress/kendo-vue-charts';
+
+
+  export default {
+    components: {
+      Chart,
+      ChartTitle,
+      ChartSeries,
+      ChartSeriesItem,
+      ChartLegend
+    },
+    data() {
+      return {
+        seriesData: [
+          [5, 5], [6, 10], [7, 6],
+          [8, 9], [9, 6], [10, 10], [11, 5],
+          [12, 13], [13, 3], [14, 16], [15, 1],
+          [16, 19], [17, 1], [18, 20], [19, 2],
+          [20, 18], [21, 5], [22, 12], [23, 7],
+          [24, 10], [25, 8]
+        ]
+      };
+    }
+  };
+</script>
diff --git a/vue-options-api-demos/charts/chart/trendlines/forecast/main.js b/vue-options-api-demos/charts/chart/trendlines/forecast/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/forecast/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/trendlines/forecast/main.vue b/vue-options-api-demos/charts/chart/trendlines/forecast/main.vue
new file mode 100644
index 00000000..bc22dae1
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/forecast/main.vue
@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTitle :text="'Trendlines'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :name="'Sales By Quarter'"
+          :type="'line'"
+          :style="'smooth'"
+          :field="'count'"
+          :categoryField="'date'"
+          :data-items="seriesData"
+        />
+        <ChartSeriesItem
+          :name="'Sales Trendline (M.AVG)'"
+          :type="'movingAverageTrendline'"
+          :dashType="'dot'"
+          :for="'Sales By Quarter'"
+        />
+        <ChartSeriesItem
+          :name="'Sales Trendline (LINEAR)'"
+          :type="'linearTrendline'"
+          :for="'Sales By Quarter'"
+          :trendline="trendline"
+        />
+      </ChartSeries>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :baseUnit="'fit'" />
+      </ChartCategoryAxis>
+      <ChartTooltip :shared="true" />
+      <ChartLegend :position="'bottom'" />
+    </Chart>
+  </div>
+</template>
+
+<script>
+  import {
+    Chart,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartTooltip,
+    ChartLegend,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem
+  } from '@progress/kendo-vue-charts';
+
+  import { salesByQuarter } from './sales-data.js';
+
+  export default {
+    components: {
+      Chart,
+      ChartTitle,
+      ChartSeries,
+      ChartSeriesItem,
+      ChartTooltip,
+      ChartLegend,
+      ChartCategoryAxis,
+      ChartCategoryAxisItem
+    },
+    data() {
+      return {
+        seriesData: [...salesByQuarter],
+        trendline: { forecast: { before: 2, after: 5 } }
+      };
+    }
+  };
+</script>
diff --git a/vue-options-api-demos/charts/chart/trendlines/forecast/sales-data.js b/vue-options-api-demos/charts/chart/trendlines/forecast/sales-data.js
new file mode 100644
index 00000000..c253bc6f
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/forecast/sales-data.js
@@ -0,0 +1,247 @@
+export const salesByQuarter = [
+    {
+        period: '2010 Q1',
+        date: new Date(2010, 0, 1),
+        count: 4485.0
+    },
+    {
+        period: '2010 Q2',
+        date: new Date(2010, 3, 1),
+        count: 4409.0
+    },
+    {
+        period: '2010 Q3',
+        date: new Date(2010, 6, 1),
+        count: 4469.0
+    },
+    {
+        period: '2010 Q4',
+        date: new Date(2010, 9, 1),
+        count: 4682.0
+    },
+    {
+        period: '2011 Q1',
+        date: new Date(2011, 0, 1),
+        count: 5610.0
+    },
+    {
+        period: '2011 Q2',
+        date: new Date(2011, 3, 1),
+        count: 6580.0
+    },
+    {
+        period: '2011 Q3',
+        date: new Date(2011, 6, 1),
+        count: 7534.0
+    },
+    {
+        period: '2011 Q4',
+        date: new Date(2011, 9, 1),
+        count: 7894.0
+    },
+    {
+        period: '2012 Q1',
+        date: new Date(2012, 0, 1),
+        count: 8748.0
+    },
+    {
+        period: '2012 Q2',
+        date: new Date(2012, 3, 1),
+        count: 10223.0
+    },
+    {
+        period: '2012 Q3',
+        date: new Date(2012, 6, 1),
+        count: 10797.0
+    },
+    {
+        period: '2012 Q4',
+        date: new Date(2012, 9, 1),
+        count: 12295.0
+    },
+    {
+        period: '2013 Q1',
+        date: new Date(2013, 0, 1),
+        count: 13153.0
+    },
+    {
+        period: '2013 Q2',
+        date: new Date(2013, 3, 1),
+        count: 14628.0
+    },
+    {
+        period: '2013 Q3',
+        date: new Date(2013, 6, 1),
+        count: 16779.0
+    },
+    {
+        period: '2013 Q4',
+        date: new Date(2013, 9, 1),
+        count: 18710.0
+    },
+    {
+        period: '2014 Q1',
+        date: new Date(2014, 0, 1),
+        count: 22219.0
+    },
+    {
+        period: '2014 Q2',
+        date: new Date(2014, 3, 1),
+        count: 25886.0
+    },
+    {
+        period: '2014 Q3',
+        date: new Date(2014, 6, 1),
+        count: 31640.0
+    },
+    {
+        period: '2014 Q4',
+        date: new Date(2014, 9, 1),
+        count: 36846.0
+    },
+    {
+        period: '2015 Q1',
+        date: new Date(2015, 0, 1),
+        count: 43433.0
+    },
+    {
+        period: '2015 Q2',
+        date: new Date(2015, 3, 1),
+        count: 48575.0
+    },
+    {
+        period: '2015 Q3',
+        date: new Date(2015, 6, 1),
+        count: 54533.0
+    },
+    {
+        period: '2015 Q4',
+        date: new Date(2015, 9, 1),
+        count: 62388.0
+    },
+    {
+        period: '2016 Q1',
+        date: new Date(2016, 0, 1),
+        count: 70706.0
+    },
+    {
+        period: '2016 Q2',
+        date: new Date(2016, 3, 1),
+        count: 75439.0
+    },
+    {
+        period: '2016 Q3',
+        date: new Date(2016, 6, 1),
+        count: 83213.0
+    },
+    {
+        period: '2016 Q4',
+        date: new Date(2016, 9, 1),
+        count: 88527.0
+    },
+    {
+        period: '2017 Q1',
+        date: new Date(2017, 0, 1),
+        count: 99865.0
+    },
+    {
+        period: '2017 Q2',
+        date: new Date(2017, 3, 1),
+        count: 107388.0
+    },
+    {
+        period: '2017 Q3',
+        date: new Date(2017, 6, 1),
+        count: 117761.0
+    },
+    {
+        period: '2017 Q4',
+        date: new Date(2017, 9, 1),
+        count: 125263.0
+    },
+    {
+        period: '2018 Q1',
+        date: new Date(2018, 0, 1),
+        count: 135950.0
+    },
+    {
+        period: '2018 Q2',
+        date: new Date(2018, 3, 1),
+        count: 144737.0
+    },
+    {
+        period: '2018 Q3',
+        date: new Date(2018, 6, 1),
+        count: 155933.0
+    },
+    {
+        period: '2018 Q4',
+        date: new Date(2018, 9, 1),
+        count: 167960.0
+    },
+    {
+        period: '2019 Q1',
+        date: new Date(2019, 0, 1),
+        count: 182725.0
+    },
+    {
+        period: '2019 Q2',
+        date: new Date(2019, 3, 1),
+        count: 199079.0
+    },
+    {
+        period: '2019 Q3',
+        date: new Date(2019, 6, 1),
+        count: 234952.0
+    },
+    {
+        period: '2019 Q4',
+        date: new Date(2019, 9, 1),
+        count: 271298.0
+    },
+    {
+        period: '2020 Q1',
+        date: new Date(2020, 0, 1),
+        count: 323309.0
+    },
+    {
+        period: '2020 Q2',
+        date: new Date(2020, 3, 1),
+        count: 358145.0
+    },
+    {
+        period: '2020 Q3',
+        date: new Date(2020, 6, 1),
+        count: 460927.0
+    },
+    {
+        period: '2020 Q4',
+        date: new Date(2020, 9, 1),
+        count: 579568.0
+    },
+    {
+        period: '2021 Q1',
+        date: new Date(2021, 0, 1),
+        count: 669590.0
+    },
+    {
+        period: '2021 Q2',
+        date: new Date(2021, 3, 1),
+        count: 793564.0
+    },
+    {
+        period: '2021 Q3',
+        date: new Date(2021, 6, 1),
+        count: 941133.0
+    },
+    {
+        period: '2021 Q4',
+        date: new Date(2021, 9, 1),
+        count: 1133020.0
+    },
+    {
+        period: '2022 Q1',
+        date: new Date(2022, 0, 1),
+        count: 426324.0
+    }
+];
diff --git a/vue-options-api-demos/charts/chart/trendlines/hidden-legend-item/main.js b/vue-options-api-demos/charts/chart/trendlines/hidden-legend-item/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/hidden-legend-item/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/trendlines/hidden-legend-item/main.vue b/vue-options-api-demos/charts/chart/trendlines/hidden-legend-item/main.vue
new file mode 100644
index 00000000..e49b2ff3
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/hidden-legend-item/main.vue
@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTitle :text="'Trendlines'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :name="'Sales By Quarter'"
+          :type="'line'"
+          :style="'smooth'"
+          :field="'count'"
+          :categoryField="'period'"
+          :visibleInLegend="false"
+          :data-items="seriesData"
+        />
+        <ChartSeriesItem
+          :name="'Sales Trendline (LINEAR)'"
+          :type="'linearTrendline'"
+          :for="'Sales By Quarter'"
+        />
+        <ChartSeriesItem
+          :name="'Sales Trendline (M.AVG)'"
+          :type="'movingAverageTrendline'"
+          :dashType="'dot'"
+          :for="'Sales By Quarter'"
+          :visibleInLegend="false"
+        />
+      </ChartSeries>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :labels="labels" />
+      </ChartCategoryAxis>
+      <ChartTooltip :shared="true" />
+      <ChartLegend :position="'bottom'" />
+    </Chart>
+  </div>
+</template>
+
+<script>
+  import {
+    Chart,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartTooltip,
+    ChartLegend,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem
+  } from '@progress/kendo-vue-charts';
+
+  import { salesByQuarter } from './sales-data.js';
+
+  export default {
+    components: {
+      Chart,
+      ChartTitle,
+      ChartSeries,
+      ChartSeriesItem,
+      ChartTooltip,
+      ChartLegend,
+      ChartCategoryAxis,
+      ChartCategoryAxisItem
+    },
+    data() {
+      return {
+        seriesData: salesByQuarter,
+        labels: { step: 5 }
+      };
+    }
+  };
+</script>
diff --git a/vue-options-api-demos/charts/chart/trendlines/hidden-legend-item/sales-data.js b/vue-options-api-demos/charts/chart/trendlines/hidden-legend-item/sales-data.js
new file mode 100644
index 00000000..c253bc6f
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/hidden-legend-item/sales-data.js
@@ -0,0 +1,247 @@
+export const salesByQuarter = [
+    {
+        period: '2010 Q1',
+        date: new Date(2010, 0, 1),
+        count: 4485.0
+    },
+    {
+        period: '2010 Q2',
+        date: new Date(2010, 3, 1),
+        count: 4409.0
+    },
+    {
+        period: '2010 Q3',
+        date: new Date(2010, 6, 1),
+        count: 4469.0
+    },
+    {
+        period: '2010 Q4',
+        date: new Date(2010, 9, 1),
+        count: 4682.0
+    },
+    {
+        period: '2011 Q1',
+        date: new Date(2011, 0, 1),
+        count: 5610.0
+    },
+    {
+        period: '2011 Q2',
+        date: new Date(2011, 3, 1),
+        count: 6580.0
+    },
+    {
+        period: '2011 Q3',
+        date: new Date(2011, 6, 1),
+        count: 7534.0
+    },
+    {
+        period: '2011 Q4',
+        date: new Date(2011, 9, 1),
+        count: 7894.0
+    },
+    {
+        period: '2012 Q1',
+        date: new Date(2012, 0, 1),
+        count: 8748.0
+    },
+    {
+        period: '2012 Q2',
+        date: new Date(2012, 3, 1),
+        count: 10223.0
+    },
+    {
+        period: '2012 Q3',
+        date: new Date(2012, 6, 1),
+        count: 10797.0
+    },
+    {
+        period: '2012 Q4',
+        date: new Date(2012, 9, 1),
+        count: 12295.0
+    },
+    {
+        period: '2013 Q1',
+        date: new Date(2013, 0, 1),
+        count: 13153.0
+    },
+    {
+        period: '2013 Q2',
+        date: new Date(2013, 3, 1),
+        count: 14628.0
+    },
+    {
+        period: '2013 Q3',
+        date: new Date(2013, 6, 1),
+        count: 16779.0
+    },
+    {
+        period: '2013 Q4',
+        date: new Date(2013, 9, 1),
+        count: 18710.0
+    },
+    {
+        period: '2014 Q1',
+        date: new Date(2014, 0, 1),
+        count: 22219.0
+    },
+    {
+        period: '2014 Q2',
+        date: new Date(2014, 3, 1),
+        count: 25886.0
+    },
+    {
+        period: '2014 Q3',
+        date: new Date(2014, 6, 1),
+        count: 31640.0
+    },
+    {
+        period: '2014 Q4',
+        date: new Date(2014, 9, 1),
+        count: 36846.0
+    },
+    {
+        period: '2015 Q1',
+        date: new Date(2015, 0, 1),
+        count: 43433.0
+    },
+    {
+        period: '2015 Q2',
+        date: new Date(2015, 3, 1),
+        count: 48575.0
+    },
+    {
+        period: '2015 Q3',
+        date: new Date(2015, 6, 1),
+        count: 54533.0
+    },
+    {
+        period: '2015 Q4',
+        date: new Date(2015, 9, 1),
+        count: 62388.0
+    },
+    {
+        period: '2016 Q1',
+        date: new Date(2016, 0, 1),
+        count: 70706.0
+    },
+    {
+        period: '2016 Q2',
+        date: new Date(2016, 3, 1),
+        count: 75439.0
+    },
+    {
+        period: '2016 Q3',
+        date: new Date(2016, 6, 1),
+        count: 83213.0
+    },
+    {
+        period: '2016 Q4',
+        date: new Date(2016, 9, 1),
+        count: 88527.0
+    },
+    {
+        period: '2017 Q1',
+        date: new Date(2017, 0, 1),
+        count: 99865.0
+    },
+    {
+        period: '2017 Q2',
+        date: new Date(2017, 3, 1),
+        count: 107388.0
+    },
+    {
+        period: '2017 Q3',
+        date: new Date(2017, 6, 1),
+        count: 117761.0
+    },
+    {
+        period: '2017 Q4',
+        date: new Date(2017, 9, 1),
+        count: 125263.0
+    },
+    {
+        period: '2018 Q1',
+        date: new Date(2018, 0, 1),
+        count: 135950.0
+    },
+    {
+        period: '2018 Q2',
+        date: new Date(2018, 3, 1),
+        count: 144737.0
+    },
+    {
+        period: '2018 Q3',
+        date: new Date(2018, 6, 1),
+        count: 155933.0
+    },
+    {
+        period: '2018 Q4',
+        date: new Date(2018, 9, 1),
+        count: 167960.0
+    },
+    {
+        period: '2019 Q1',
+        date: new Date(2019, 0, 1),
+        count: 182725.0
+    },
+    {
+        period: '2019 Q2',
+        date: new Date(2019, 3, 1),
+        count: 199079.0
+    },
+    {
+        period: '2019 Q3',
+        date: new Date(2019, 6, 1),
+        count: 234952.0
+    },
+    {
+        period: '2019 Q4',
+        date: new Date(2019, 9, 1),
+        count: 271298.0
+    },
+    {
+        period: '2020 Q1',
+        date: new Date(2020, 0, 1),
+        count: 323309.0
+    },
+    {
+        period: '2020 Q2',
+        date: new Date(2020, 3, 1),
+        count: 358145.0
+    },
+    {
+        period: '2020 Q3',
+        date: new Date(2020, 6, 1),
+        count: 460927.0
+    },
+    {
+        period: '2020 Q4',
+        date: new Date(2020, 9, 1),
+        count: 579568.0
+    },
+    {
+        period: '2021 Q1',
+        date: new Date(2021, 0, 1),
+        count: 669590.0
+    },
+    {
+        period: '2021 Q2',
+        date: new Date(2021, 3, 1),
+        count: 793564.0
+    },
+    {
+        period: '2021 Q3',
+        date: new Date(2021, 6, 1),
+        count: 941133.0
+    },
+    {
+        period: '2021 Q4',
+        date: new Date(2021, 9, 1),
+        count: 1133020.0
+    },
+    {
+        period: '2022 Q1',
+        date: new Date(2022, 0, 1),
+        count: 426324.0
+    }
+];
diff --git a/vue-options-api-demos/charts/chart/trendlines/linear/categorical/main.js b/vue-options-api-demos/charts/chart/trendlines/linear/categorical/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/linear/categorical/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/trendlines/linear/categorical/main.vue b/vue-options-api-demos/charts/chart/trendlines/linear/categorical/main.vue
new file mode 100644
index 00000000..7b20d929
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/linear/categorical/main.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTitle :text="'Trendlines'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :name="'Sales By Quarter'"
+          :type="'line'"
+          :style="'smooth'"
+          :field="'count'"
+          :categoryField="'period'"
+          :data-items="seriesData"
+        />
+        <ChartSeriesItem
+          :name="'Sales Trendline (LINEAR)'"
+          :type="'linearTrendline'"
+          :for="'Sales By Quarter'"
+        />
+      </ChartSeries>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :labels="labels" />
+      </ChartCategoryAxis>
+      <ChartTooltip :shared="true" />
+      <ChartLegend :position="'bottom'" />
+    </Chart>
+  </div>
+</template>
+
+<script>
+  import {
+    Chart,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartTooltip,
+    ChartLegend,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem
+  } from '@progress/kendo-vue-charts';
+
+  import { salesByQuarter } from './sales-data.js';
+
+  export default {
+    components: {
+      Chart,
+      ChartTitle,
+      ChartSeries,
+      ChartSeriesItem,
+      ChartTooltip,
+      ChartLegend,
+      ChartCategoryAxis,
+      ChartCategoryAxisItem
+    },
+    data() {
+      return {
+        seriesData: [...salesByQuarter],
+        labels: { step: 5 }
+      };
+    }
+  };
+</script>
diff --git a/vue-options-api-demos/charts/chart/trendlines/linear/categorical/sales-data.js b/vue-options-api-demos/charts/chart/trendlines/linear/categorical/sales-data.js
new file mode 100644
index 00000000..c253bc6f
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/linear/categorical/sales-data.js
@@ -0,0 +1,247 @@
+export const salesByQuarter = [
+    {
+        period: '2010 Q1',
+        date: new Date(2010, 0, 1),
+        count: 4485.0
+    },
+    {
+        period: '2010 Q2',
+        date: new Date(2010, 3, 1),
+        count: 4409.0
+    },
+    {
+        period: '2010 Q3',
+        date: new Date(2010, 6, 1),
+        count: 4469.0
+    },
+    {
+        period: '2010 Q4',
+        date: new Date(2010, 9, 1),
+        count: 4682.0
+    },
+    {
+        period: '2011 Q1',
+        date: new Date(2011, 0, 1),
+        count: 5610.0
+    },
+    {
+        period: '2011 Q2',
+        date: new Date(2011, 3, 1),
+        count: 6580.0
+    },
+    {
+        period: '2011 Q3',
+        date: new Date(2011, 6, 1),
+        count: 7534.0
+    },
+    {
+        period: '2011 Q4',
+        date: new Date(2011, 9, 1),
+        count: 7894.0
+    },
+    {
+        period: '2012 Q1',
+        date: new Date(2012, 0, 1),
+        count: 8748.0
+    },
+    {
+        period: '2012 Q2',
+        date: new Date(2012, 3, 1),
+        count: 10223.0
+    },
+    {
+        period: '2012 Q3',
+        date: new Date(2012, 6, 1),
+        count: 10797.0
+    },
+    {
+        period: '2012 Q4',
+        date: new Date(2012, 9, 1),
+        count: 12295.0
+    },
+    {
+        period: '2013 Q1',
+        date: new Date(2013, 0, 1),
+        count: 13153.0
+    },
+    {
+        period: '2013 Q2',
+        date: new Date(2013, 3, 1),
+        count: 14628.0
+    },
+    {
+        period: '2013 Q3',
+        date: new Date(2013, 6, 1),
+        count: 16779.0
+    },
+    {
+        period: '2013 Q4',
+        date: new Date(2013, 9, 1),
+        count: 18710.0
+    },
+    {
+        period: '2014 Q1',
+        date: new Date(2014, 0, 1),
+        count: 22219.0
+    },
+    {
+        period: '2014 Q2',
+        date: new Date(2014, 3, 1),
+        count: 25886.0
+    },
+    {
+        period: '2014 Q3',
+        date: new Date(2014, 6, 1),
+        count: 31640.0
+    },
+    {
+        period: '2014 Q4',
+        date: new Date(2014, 9, 1),
+        count: 36846.0
+    },
+    {
+        period: '2015 Q1',
+        date: new Date(2015, 0, 1),
+        count: 43433.0
+    },
+    {
+        period: '2015 Q2',
+        date: new Date(2015, 3, 1),
+        count: 48575.0
+    },
+    {
+        period: '2015 Q3',
+        date: new Date(2015, 6, 1),
+        count: 54533.0
+    },
+    {
+        period: '2015 Q4',
+        date: new Date(2015, 9, 1),
+        count: 62388.0
+    },
+    {
+        period: '2016 Q1',
+        date: new Date(2016, 0, 1),
+        count: 70706.0
+    },
+    {
+        period: '2016 Q2',
+        date: new Date(2016, 3, 1),
+        count: 75439.0
+    },
+    {
+        period: '2016 Q3',
+        date: new Date(2016, 6, 1),
+        count: 83213.0
+    },
+    {
+        period: '2016 Q4',
+        date: new Date(2016, 9, 1),
+        count: 88527.0
+    },
+    {
+        period: '2017 Q1',
+        date: new Date(2017, 0, 1),
+        count: 99865.0
+    },
+    {
+        period: '2017 Q2',
+        date: new Date(2017, 3, 1),
+        count: 107388.0
+    },
+    {
+        period: '2017 Q3',
+        date: new Date(2017, 6, 1),
+        count: 117761.0
+    },
+    {
+        period: '2017 Q4',
+        date: new Date(2017, 9, 1),
+        count: 125263.0
+    },
+    {
+        period: '2018 Q1',
+        date: new Date(2018, 0, 1),
+        count: 135950.0
+    },
+    {
+        period: '2018 Q2',
+        date: new Date(2018, 3, 1),
+        count: 144737.0
+    },
+    {
+        period: '2018 Q3',
+        date: new Date(2018, 6, 1),
+        count: 155933.0
+    },
+    {
+        period: '2018 Q4',
+        date: new Date(2018, 9, 1),
+        count: 167960.0
+    },
+    {
+        period: '2019 Q1',
+        date: new Date(2019, 0, 1),
+        count: 182725.0
+    },
+    {
+        period: '2019 Q2',
+        date: new Date(2019, 3, 1),
+        count: 199079.0
+    },
+    {
+        period: '2019 Q3',
+        date: new Date(2019, 6, 1),
+        count: 234952.0
+    },
+    {
+        period: '2019 Q4',
+        date: new Date(2019, 9, 1),
+        count: 271298.0
+    },
+    {
+        period: '2020 Q1',
+        date: new Date(2020, 0, 1),
+        count: 323309.0
+    },
+    {
+        period: '2020 Q2',
+        date: new Date(2020, 3, 1),
+        count: 358145.0
+    },
+    {
+        period: '2020 Q3',
+        date: new Date(2020, 6, 1),
+        count: 460927.0
+    },
+    {
+        period: '2020 Q4',
+        date: new Date(2020, 9, 1),
+        count: 579568.0
+    },
+    {
+        period: '2021 Q1',
+        date: new Date(2021, 0, 1),
+        count: 669590.0
+    },
+    {
+        period: '2021 Q2',
+        date: new Date(2021, 3, 1),
+        count: 793564.0
+    },
+    {
+        period: '2021 Q3',
+        date: new Date(2021, 6, 1),
+        count: 941133.0
+    },
+    {
+        period: '2021 Q4',
+        date: new Date(2021, 9, 1),
+        count: 1133020.0
+    },
+    {
+        period: '2022 Q1',
+        date: new Date(2022, 0, 1),
+        count: 426324.0
+    }
+];
diff --git a/vue-options-api-demos/charts/chart/trendlines/linear/scatter/main.js b/vue-options-api-demos/charts/chart/trendlines/linear/scatter/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/linear/scatter/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/trendlines/linear/scatter/main.vue b/vue-options-api-demos/charts/chart/trendlines/linear/scatter/main.vue
new file mode 100644
index 00000000..57cef812
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/linear/scatter/main.vue
@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTitle :text="'Trendlines'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :name="'Series A'"
+          :type="'scatter'"
+          :data-items="seriesData"
+        />
+        <ChartSeriesItem
+          :name="'Sales Trendline (LINEAR)'"
+          :type="'linearTrendline'"
+          :dashType="'solid'"
+          :for="'Series A'"
+        />
+      </ChartSeries>
+      <ChartLegend :visible="false" />
+    </Chart>
+  </div>
+</template>
+
+<script>
+  import {
+    Chart,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartLegend
+  } from '@progress/kendo-vue-charts';
+
+
+  export default {
+    components: {
+      Chart,
+      ChartTitle,
+      ChartSeries,
+      ChartSeriesItem,
+      ChartLegend
+    },
+    data() {
+      return {
+        seriesData: [
+          [5, 5], [6, 10], [7, 6],
+          [8, 9], [9, 6], [10, 10], [11, 5],
+          [12, 13], [13, 3], [14, 16], [15, 1],
+          [16, 19], [17, 1], [18, 20], [19, 2],
+          [20, 18], [21, 5], [22, 12], [23, 7],
+          [24, 10], [25, 8]
+        ]
+      };
+    }
+  };
+</script>
diff --git a/vue-options-api-demos/charts/chart/trendlines/logarithmic/categorical/main.js b/vue-options-api-demos/charts/chart/trendlines/logarithmic/categorical/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/logarithmic/categorical/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/trendlines/logarithmic/categorical/main.vue b/vue-options-api-demos/charts/chart/trendlines/logarithmic/categorical/main.vue
new file mode 100644
index 00000000..47a28295
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/logarithmic/categorical/main.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTitle :text="'Trendlines'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :name="'Sales By Quarter'"
+          :type="'line'"
+          :style="'smooth'"
+          :field="'count'"
+          :categoryField="'period'"
+          :data-items="seriesData"
+        />
+        <ChartSeriesItem
+          :name="'Sales Trendline (LOG)'"
+          :type="'logarithmicTrendline'"
+          :for="'Sales By Quarter'"
+        />
+      </ChartSeries>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :labels="labels" />
+      </ChartCategoryAxis>
+      <ChartTooltip :shared="true" />
+      <ChartLegend :position="'bottom'" />
+    </Chart>
+  </div>
+</template>
+
+<script>
+  import {
+    Chart,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartTooltip,
+    ChartLegend,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem
+  } from '@progress/kendo-vue-charts';
+
+  import { salesByQuarter } from './sales-data.js';
+
+  export default {
+    components: {
+      Chart,
+      ChartTitle,
+      ChartSeries,
+      ChartSeriesItem,
+      ChartTooltip,
+      ChartLegend,
+      ChartCategoryAxis,
+      ChartCategoryAxisItem
+    },
+    data() {
+      return {
+        seriesData: [...salesByQuarter],
+        labels: { step: 5 }
+      };
+    }
+  };
+</script>
diff --git a/vue-options-api-demos/charts/chart/trendlines/logarithmic/categorical/sales-data.js b/vue-options-api-demos/charts/chart/trendlines/logarithmic/categorical/sales-data.js
new file mode 100644
index 00000000..c253bc6f
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/logarithmic/categorical/sales-data.js
@@ -0,0 +1,247 @@
+export const salesByQuarter = [
+    {
+        period: '2010 Q1',
+        date: new Date(2010, 0, 1),
+        count: 4485.0
+    },
+    {
+        period: '2010 Q2',
+        date: new Date(2010, 3, 1),
+        count: 4409.0
+    },
+    {
+        period: '2010 Q3',
+        date: new Date(2010, 6, 1),
+        count: 4469.0
+    },
+    {
+        period: '2010 Q4',
+        date: new Date(2010, 9, 1),
+        count: 4682.0
+    },
+    {
+        period: '2011 Q1',
+        date: new Date(2011, 0, 1),
+        count: 5610.0
+    },
+    {
+        period: '2011 Q2',
+        date: new Date(2011, 3, 1),
+        count: 6580.0
+    },
+    {
+        period: '2011 Q3',
+        date: new Date(2011, 6, 1),
+        count: 7534.0
+    },
+    {
+        period: '2011 Q4',
+        date: new Date(2011, 9, 1),
+        count: 7894.0
+    },
+    {
+        period: '2012 Q1',
+        date: new Date(2012, 0, 1),
+        count: 8748.0
+    },
+    {
+        period: '2012 Q2',
+        date: new Date(2012, 3, 1),
+        count: 10223.0
+    },
+    {
+        period: '2012 Q3',
+        date: new Date(2012, 6, 1),
+        count: 10797.0
+    },
+    {
+        period: '2012 Q4',
+        date: new Date(2012, 9, 1),
+        count: 12295.0
+    },
+    {
+        period: '2013 Q1',
+        date: new Date(2013, 0, 1),
+        count: 13153.0
+    },
+    {
+        period: '2013 Q2',
+        date: new Date(2013, 3, 1),
+        count: 14628.0
+    },
+    {
+        period: '2013 Q3',
+        date: new Date(2013, 6, 1),
+        count: 16779.0
+    },
+    {
+        period: '2013 Q4',
+        date: new Date(2013, 9, 1),
+        count: 18710.0
+    },
+    {
+        period: '2014 Q1',
+        date: new Date(2014, 0, 1),
+        count: 22219.0
+    },
+    {
+        period: '2014 Q2',
+        date: new Date(2014, 3, 1),
+        count: 25886.0
+    },
+    {
+        period: '2014 Q3',
+        date: new Date(2014, 6, 1),
+        count: 31640.0
+    },
+    {
+        period: '2014 Q4',
+        date: new Date(2014, 9, 1),
+        count: 36846.0
+    },
+    {
+        period: '2015 Q1',
+        date: new Date(2015, 0, 1),
+        count: 43433.0
+    },
+    {
+        period: '2015 Q2',
+        date: new Date(2015, 3, 1),
+        count: 48575.0
+    },
+    {
+        period: '2015 Q3',
+        date: new Date(2015, 6, 1),
+        count: 54533.0
+    },
+    {
+        period: '2015 Q4',
+        date: new Date(2015, 9, 1),
+        count: 62388.0
+    },
+    {
+        period: '2016 Q1',
+        date: new Date(2016, 0, 1),
+        count: 70706.0
+    },
+    {
+        period: '2016 Q2',
+        date: new Date(2016, 3, 1),
+        count: 75439.0
+    },
+    {
+        period: '2016 Q3',
+        date: new Date(2016, 6, 1),
+        count: 83213.0
+    },
+    {
+        period: '2016 Q4',
+        date: new Date(2016, 9, 1),
+        count: 88527.0
+    },
+    {
+        period: '2017 Q1',
+        date: new Date(2017, 0, 1),
+        count: 99865.0
+    },
+    {
+        period: '2017 Q2',
+        date: new Date(2017, 3, 1),
+        count: 107388.0
+    },
+    {
+        period: '2017 Q3',
+        date: new Date(2017, 6, 1),
+        count: 117761.0
+    },
+    {
+        period: '2017 Q4',
+        date: new Date(2017, 9, 1),
+        count: 125263.0
+    },
+    {
+        period: '2018 Q1',
+        date: new Date(2018, 0, 1),
+        count: 135950.0
+    },
+    {
+        period: '2018 Q2',
+        date: new Date(2018, 3, 1),
+        count: 144737.0
+    },
+    {
+        period: '2018 Q3',
+        date: new Date(2018, 6, 1),
+        count: 155933.0
+    },
+    {
+        period: '2018 Q4',
+        date: new Date(2018, 9, 1),
+        count: 167960.0
+    },
+    {
+        period: '2019 Q1',
+        date: new Date(2019, 0, 1),
+        count: 182725.0
+    },
+    {
+        period: '2019 Q2',
+        date: new Date(2019, 3, 1),
+        count: 199079.0
+    },
+    {
+        period: '2019 Q3',
+        date: new Date(2019, 6, 1),
+        count: 234952.0
+    },
+    {
+        period: '2019 Q4',
+        date: new Date(2019, 9, 1),
+        count: 271298.0
+    },
+    {
+        period: '2020 Q1',
+        date: new Date(2020, 0, 1),
+        count: 323309.0
+    },
+    {
+        period: '2020 Q2',
+        date: new Date(2020, 3, 1),
+        count: 358145.0
+    },
+    {
+        period: '2020 Q3',
+        date: new Date(2020, 6, 1),
+        count: 460927.0
+    },
+    {
+        period: '2020 Q4',
+        date: new Date(2020, 9, 1),
+        count: 579568.0
+    },
+    {
+        period: '2021 Q1',
+        date: new Date(2021, 0, 1),
+        count: 669590.0
+    },
+    {
+        period: '2021 Q2',
+        date: new Date(2021, 3, 1),
+        count: 793564.0
+    },
+    {
+        period: '2021 Q3',
+        date: new Date(2021, 6, 1),
+        count: 941133.0
+    },
+    {
+        period: '2021 Q4',
+        date: new Date(2021, 9, 1),
+        count: 1133020.0
+    },
+    {
+        period: '2022 Q1',
+        date: new Date(2022, 0, 1),
+        count: 426324.0
+    }
+];
diff --git a/vue-options-api-demos/charts/chart/trendlines/logarithmic/scatter/main.js b/vue-options-api-demos/charts/chart/trendlines/logarithmic/scatter/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/logarithmic/scatter/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/trendlines/logarithmic/scatter/main.vue b/vue-options-api-demos/charts/chart/trendlines/logarithmic/scatter/main.vue
new file mode 100644
index 00000000..cbb77536
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/logarithmic/scatter/main.vue
@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTitle :text="'Trendlines'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :name="'Series A'"
+          :type="'scatter'"
+          :data-items="seriesData"
+        />
+        <ChartSeriesItem
+          :name="'Sales Trendline (LOG)'"
+          :type="'logarithmicTrendline'"
+          :dashType="'solid'"
+          :for="'Series A'"
+        />
+      </ChartSeries>
+      <ChartLegend :visible="false" />
+    </Chart>
+  </div>
+</template>
+
+<script>
+  import {
+    Chart,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartLegend
+  } from '@progress/kendo-vue-charts';
+
+
+  export default {
+    components: {
+      Chart,
+      ChartTitle,
+      ChartSeries,
+      ChartSeriesItem,
+      ChartLegend
+    },
+    data() {
+      return {
+        seriesData: [
+          [5, 5], [6, 10], [7, 6],
+          [8, 9], [9, 6], [10, 10], [11, 5],
+          [12, 13], [13, 3], [14, 16], [15, 1],
+          [16, 19], [17, 1], [18, 20], [19, 2],
+          [20, 18], [21, 5], [22, 12], [23, 7],
+          [24, 10], [25, 8]
+        ]
+      };
+    }
+  };
+</script>
diff --git a/vue-options-api-demos/charts/chart/trendlines/moving-average/categorical/main.js b/vue-options-api-demos/charts/chart/trendlines/moving-average/categorical/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/moving-average/categorical/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/trendlines/moving-average/categorical/main.vue b/vue-options-api-demos/charts/chart/trendlines/moving-average/categorical/main.vue
new file mode 100644
index 00000000..3e4901bf
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/moving-average/categorical/main.vue
@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTitle :text="'Trendlines'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :name="'Sales By Quarter'"
+          :type="'line'"
+          :style="'smooth'"
+          :field="'count'"
+          :categoryField="'period'"
+          :data-items="seriesData"
+        />
+        <ChartSeriesItem
+          :name="'Sales Trendline (M.AVG)'"
+          :type="'movingAverageTrendline'"
+          :dashType="'dot'"
+          :for="'Sales By Quarter'"
+        />
+      </ChartSeries>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :labels="labels" />
+      </ChartCategoryAxis>
+      <ChartTooltip :shared="true" />
+      <ChartLegend :position="'bottom'" />
+    </Chart>
+  </div>
+</template>
+
+<script>
+  import {
+    Chart,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartTooltip,
+    ChartLegend,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem
+  } from '@progress/kendo-vue-charts';
+
+  import { salesByQuarter } from './sales-data.js';
+
+  export default {
+    components: {
+      Chart,
+      ChartTitle,
+      ChartSeries,
+      ChartSeriesItem,
+      ChartTooltip,
+      ChartLegend,
+      ChartCategoryAxis,
+      ChartCategoryAxisItem
+    },
+    data() {
+      return {
+        seriesData: [...salesByQuarter],
+        labels: { step: 5 }
+      };
+    }
+  };
+</script>
diff --git a/vue-options-api-demos/charts/chart/trendlines/moving-average/categorical/sales-data.js b/vue-options-api-demos/charts/chart/trendlines/moving-average/categorical/sales-data.js
new file mode 100644
index 00000000..c253bc6f
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/moving-average/categorical/sales-data.js
@@ -0,0 +1,247 @@
+export const salesByQuarter = [
+    {
+        period: '2010 Q1',
+        date: new Date(2010, 0, 1),
+        count: 4485.0
+    },
+    {
+        period: '2010 Q2',
+        date: new Date(2010, 3, 1),
+        count: 4409.0
+    },
+    {
+        period: '2010 Q3',
+        date: new Date(2010, 6, 1),
+        count: 4469.0
+    },
+    {
+        period: '2010 Q4',
+        date: new Date(2010, 9, 1),
+        count: 4682.0
+    },
+    {
+        period: '2011 Q1',
+        date: new Date(2011, 0, 1),
+        count: 5610.0
+    },
+    {
+        period: '2011 Q2',
+        date: new Date(2011, 3, 1),
+        count: 6580.0
+    },
+    {
+        period: '2011 Q3',
+        date: new Date(2011, 6, 1),
+        count: 7534.0
+    },
+    {
+        period: '2011 Q4',
+        date: new Date(2011, 9, 1),
+        count: 7894.0
+    },
+    {
+        period: '2012 Q1',
+        date: new Date(2012, 0, 1),
+        count: 8748.0
+    },
+    {
+        period: '2012 Q2',
+        date: new Date(2012, 3, 1),
+        count: 10223.0
+    },
+    {
+        period: '2012 Q3',
+        date: new Date(2012, 6, 1),
+        count: 10797.0
+    },
+    {
+        period: '2012 Q4',
+        date: new Date(2012, 9, 1),
+        count: 12295.0
+    },
+    {
+        period: '2013 Q1',
+        date: new Date(2013, 0, 1),
+        count: 13153.0
+    },
+    {
+        period: '2013 Q2',
+        date: new Date(2013, 3, 1),
+        count: 14628.0
+    },
+    {
+        period: '2013 Q3',
+        date: new Date(2013, 6, 1),
+        count: 16779.0
+    },
+    {
+        period: '2013 Q4',
+        date: new Date(2013, 9, 1),
+        count: 18710.0
+    },
+    {
+        period: '2014 Q1',
+        date: new Date(2014, 0, 1),
+        count: 22219.0
+    },
+    {
+        period: '2014 Q2',
+        date: new Date(2014, 3, 1),
+        count: 25886.0
+    },
+    {
+        period: '2014 Q3',
+        date: new Date(2014, 6, 1),
+        count: 31640.0
+    },
+    {
+        period: '2014 Q4',
+        date: new Date(2014, 9, 1),
+        count: 36846.0
+    },
+    {
+        period: '2015 Q1',
+        date: new Date(2015, 0, 1),
+        count: 43433.0
+    },
+    {
+        period: '2015 Q2',
+        date: new Date(2015, 3, 1),
+        count: 48575.0
+    },
+    {
+        period: '2015 Q3',
+        date: new Date(2015, 6, 1),
+        count: 54533.0
+    },
+    {
+        period: '2015 Q4',
+        date: new Date(2015, 9, 1),
+        count: 62388.0
+    },
+    {
+        period: '2016 Q1',
+        date: new Date(2016, 0, 1),
+        count: 70706.0
+    },
+    {
+        period: '2016 Q2',
+        date: new Date(2016, 3, 1),
+        count: 75439.0
+    },
+    {
+        period: '2016 Q3',
+        date: new Date(2016, 6, 1),
+        count: 83213.0
+    },
+    {
+        period: '2016 Q4',
+        date: new Date(2016, 9, 1),
+        count: 88527.0
+    },
+    {
+        period: '2017 Q1',
+        date: new Date(2017, 0, 1),
+        count: 99865.0
+    },
+    {
+        period: '2017 Q2',
+        date: new Date(2017, 3, 1),
+        count: 107388.0
+    },
+    {
+        period: '2017 Q3',
+        date: new Date(2017, 6, 1),
+        count: 117761.0
+    },
+    {
+        period: '2017 Q4',
+        date: new Date(2017, 9, 1),
+        count: 125263.0
+    },
+    {
+        period: '2018 Q1',
+        date: new Date(2018, 0, 1),
+        count: 135950.0
+    },
+    {
+        period: '2018 Q2',
+        date: new Date(2018, 3, 1),
+        count: 144737.0
+    },
+    {
+        period: '2018 Q3',
+        date: new Date(2018, 6, 1),
+        count: 155933.0
+    },
+    {
+        period: '2018 Q4',
+        date: new Date(2018, 9, 1),
+        count: 167960.0
+    },
+    {
+        period: '2019 Q1',
+        date: new Date(2019, 0, 1),
+        count: 182725.0
+    },
+    {
+        period: '2019 Q2',
+        date: new Date(2019, 3, 1),
+        count: 199079.0
+    },
+    {
+        period: '2019 Q3',
+        date: new Date(2019, 6, 1),
+        count: 234952.0
+    },
+    {
+        period: '2019 Q4',
+        date: new Date(2019, 9, 1),
+        count: 271298.0
+    },
+    {
+        period: '2020 Q1',
+        date: new Date(2020, 0, 1),
+        count: 323309.0
+    },
+    {
+        period: '2020 Q2',
+        date: new Date(2020, 3, 1),
+        count: 358145.0
+    },
+    {
+        period: '2020 Q3',
+        date: new Date(2020, 6, 1),
+        count: 460927.0
+    },
+    {
+        period: '2020 Q4',
+        date: new Date(2020, 9, 1),
+        count: 579568.0
+    },
+    {
+        period: '2021 Q1',
+        date: new Date(2021, 0, 1),
+        count: 669590.0
+    },
+    {
+        period: '2021 Q2',
+        date: new Date(2021, 3, 1),
+        count: 793564.0
+    },
+    {
+        period: '2021 Q3',
+        date: new Date(2021, 6, 1),
+        count: 941133.0
+    },
+    {
+        period: '2021 Q4',
+        date: new Date(2021, 9, 1),
+        count: 1133020.0
+    },
+    {
+        period: '2022 Q1',
+        date: new Date(2022, 0, 1),
+        count: 426324.0
+    }
+];
diff --git a/vue-options-api-demos/charts/chart/trendlines/moving-average/scatter/main.js b/vue-options-api-demos/charts/chart/trendlines/moving-average/scatter/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/moving-average/scatter/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/trendlines/moving-average/scatter/main.vue b/vue-options-api-demos/charts/chart/trendlines/moving-average/scatter/main.vue
new file mode 100644
index 00000000..d421c17f
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/moving-average/scatter/main.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTitle :text="'Trendlines'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :name="'Series A'"
+          :type="'scatter'"
+          :visibleInLegend="false"
+          :data-items="seriesData"
+        />
+        <ChartSeriesItem
+          :name="'Sales Trendline (M.AVG)'"
+          :type="'movingAverageTrendline'"
+          :dashType="'solid'"
+          :for="'Series A'"
+          :trendline="trendline"
+        />
+      </ChartSeries>
+      <ChartLegend :visible="false" />
+    </Chart>
+  </div>
+</template>
+
+<script>
+  import {
+    Chart,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartLegend
+  } from '@progress/kendo-vue-charts';
+
+
+  export default {
+    components: {
+      Chart,
+      ChartTitle,
+      ChartSeries,
+      ChartSeriesItem,
+      ChartLegend
+    },
+    data() {
+      return {
+        seriesData: [
+          [5, 5], [6, 10], [7, 6],
+          [8, 9], [9, 6], [10, 10], [11, 5],
+          [12, 13], [13, 3], [14, 16], [15, 1],
+          [16, 19], [17, 1], [18, 20], [19, 2],
+          [20, 18], [21, 5], [22, 12], [23, 7],
+          [24, 10], [25, 8]
+        ],
+        trendline: { period: 4 }
+      };
+    }
+  };
+</script>
diff --git a/vue-options-api-demos/charts/chart/trendlines/polynomial/categorical/main.js b/vue-options-api-demos/charts/chart/trendlines/polynomial/categorical/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/polynomial/categorical/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/trendlines/polynomial/categorical/main.vue b/vue-options-api-demos/charts/chart/trendlines/polynomial/categorical/main.vue
new file mode 100644
index 00000000..dbe11929
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/polynomial/categorical/main.vue
@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTitle :text="'Trendlines'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :name="'Sales By Quarter'"
+          :type="'line'"
+          :style="'smooth'"
+          :field="'count'"
+          :categoryField="'period'"
+          :data-items="seriesData"
+        />
+        <ChartSeriesItem
+          :name="'Sales Trendline (POLY)'"
+          :type="'polynomialTrendline'"
+          :for="'Sales By Quarter'"
+          :trendline="{ order: 3 }"
+        />
+      </ChartSeries>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :labels="labels" />
+      </ChartCategoryAxis>
+      <ChartTooltip :shared="true" />
+      <ChartLegend :position="'bottom'" />
+    </Chart>
+  </div>
+</template>
+
+<script>
+  import {
+    Chart,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartTooltip,
+    ChartLegend,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem
+  } from '@progress/kendo-vue-charts';
+
+  import { salesByQuarter } from './sales-data.js';
+
+  export default {
+    components: {
+      Chart,
+      ChartTitle,
+      ChartSeries,
+      ChartSeriesItem,
+      ChartTooltip,
+      ChartLegend,
+      ChartCategoryAxis,
+      ChartCategoryAxisItem
+    },
+    data() {
+      return {
+        seriesData: [...salesByQuarter],
+        labels: { step: 5 }
+      };
+    }
+  };
+</script>
diff --git a/vue-options-api-demos/charts/chart/trendlines/polynomial/categorical/sales-data.js b/vue-options-api-demos/charts/chart/trendlines/polynomial/categorical/sales-data.js
new file mode 100644
index 00000000..c253bc6f
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/polynomial/categorical/sales-data.js
@@ -0,0 +1,247 @@
+export const salesByQuarter = [
+    {
+        period: '2010 Q1',
+        date: new Date(2010, 0, 1),
+        count: 4485.0
+    },
+    {
+        period: '2010 Q2',
+        date: new Date(2010, 3, 1),
+        count: 4409.0
+    },
+    {
+        period: '2010 Q3',
+        date: new Date(2010, 6, 1),
+        count: 4469.0
+    },
+    {
+        period: '2010 Q4',
+        date: new Date(2010, 9, 1),
+        count: 4682.0
+    },
+    {
+        period: '2011 Q1',
+        date: new Date(2011, 0, 1),
+        count: 5610.0
+    },
+    {
+        period: '2011 Q2',
+        date: new Date(2011, 3, 1),
+        count: 6580.0
+    },
+    {
+        period: '2011 Q3',
+        date: new Date(2011, 6, 1),
+        count: 7534.0
+    },
+    {
+        period: '2011 Q4',
+        date: new Date(2011, 9, 1),
+        count: 7894.0
+    },
+    {
+        period: '2012 Q1',
+        date: new Date(2012, 0, 1),
+        count: 8748.0
+    },
+    {
+        period: '2012 Q2',
+        date: new Date(2012, 3, 1),
+        count: 10223.0
+    },
+    {
+        period: '2012 Q3',
+        date: new Date(2012, 6, 1),
+        count: 10797.0
+    },
+    {
+        period: '2012 Q4',
+        date: new Date(2012, 9, 1),
+        count: 12295.0
+    },
+    {
+        period: '2013 Q1',
+        date: new Date(2013, 0, 1),
+        count: 13153.0
+    },
+    {
+        period: '2013 Q2',
+        date: new Date(2013, 3, 1),
+        count: 14628.0
+    },
+    {
+        period: '2013 Q3',
+        date: new Date(2013, 6, 1),
+        count: 16779.0
+    },
+    {
+        period: '2013 Q4',
+        date: new Date(2013, 9, 1),
+        count: 18710.0
+    },
+    {
+        period: '2014 Q1',
+        date: new Date(2014, 0, 1),
+        count: 22219.0
+    },
+    {
+        period: '2014 Q2',
+        date: new Date(2014, 3, 1),
+        count: 25886.0
+    },
+    {
+        period: '2014 Q3',
+        date: new Date(2014, 6, 1),
+        count: 31640.0
+    },
+    {
+        period: '2014 Q4',
+        date: new Date(2014, 9, 1),
+        count: 36846.0
+    },
+    {
+        period: '2015 Q1',
+        date: new Date(2015, 0, 1),
+        count: 43433.0
+    },
+    {
+        period: '2015 Q2',
+        date: new Date(2015, 3, 1),
+        count: 48575.0
+    },
+    {
+        period: '2015 Q3',
+        date: new Date(2015, 6, 1),
+        count: 54533.0
+    },
+    {
+        period: '2015 Q4',
+        date: new Date(2015, 9, 1),
+        count: 62388.0
+    },
+    {
+        period: '2016 Q1',
+        date: new Date(2016, 0, 1),
+        count: 70706.0
+    },
+    {
+        period: '2016 Q2',
+        date: new Date(2016, 3, 1),
+        count: 75439.0
+    },
+    {
+        period: '2016 Q3',
+        date: new Date(2016, 6, 1),
+        count: 83213.0
+    },
+    {
+        period: '2016 Q4',
+        date: new Date(2016, 9, 1),
+        count: 88527.0
+    },
+    {
+        period: '2017 Q1',
+        date: new Date(2017, 0, 1),
+        count: 99865.0
+    },
+    {
+        period: '2017 Q2',
+        date: new Date(2017, 3, 1),
+        count: 107388.0
+    },
+    {
+        period: '2017 Q3',
+        date: new Date(2017, 6, 1),
+        count: 117761.0
+    },
+    {
+        period: '2017 Q4',
+        date: new Date(2017, 9, 1),
+        count: 125263.0
+    },
+    {
+        period: '2018 Q1',
+        date: new Date(2018, 0, 1),
+        count: 135950.0
+    },
+    {
+        period: '2018 Q2',
+        date: new Date(2018, 3, 1),
+        count: 144737.0
+    },
+    {
+        period: '2018 Q3',
+        date: new Date(2018, 6, 1),
+        count: 155933.0
+    },
+    {
+        period: '2018 Q4',
+        date: new Date(2018, 9, 1),
+        count: 167960.0
+    },
+    {
+        period: '2019 Q1',
+        date: new Date(2019, 0, 1),
+        count: 182725.0
+    },
+    {
+        period: '2019 Q2',
+        date: new Date(2019, 3, 1),
+        count: 199079.0
+    },
+    {
+        period: '2019 Q3',
+        date: new Date(2019, 6, 1),
+        count: 234952.0
+    },
+    {
+        period: '2019 Q4',
+        date: new Date(2019, 9, 1),
+        count: 271298.0
+    },
+    {
+        period: '2020 Q1',
+        date: new Date(2020, 0, 1),
+        count: 323309.0
+    },
+    {
+        period: '2020 Q2',
+        date: new Date(2020, 3, 1),
+        count: 358145.0
+    },
+    {
+        period: '2020 Q3',
+        date: new Date(2020, 6, 1),
+        count: 460927.0
+    },
+    {
+        period: '2020 Q4',
+        date: new Date(2020, 9, 1),
+        count: 579568.0
+    },
+    {
+        period: '2021 Q1',
+        date: new Date(2021, 0, 1),
+        count: 669590.0
+    },
+    {
+        period: '2021 Q2',
+        date: new Date(2021, 3, 1),
+        count: 793564.0
+    },
+    {
+        period: '2021 Q3',
+        date: new Date(2021, 6, 1),
+        count: 941133.0
+    },
+    {
+        period: '2021 Q4',
+        date: new Date(2021, 9, 1),
+        count: 1133020.0
+    },
+    {
+        period: '2022 Q1',
+        date: new Date(2022, 0, 1),
+        count: 426324.0
+    }
+];
diff --git a/vue-options-api-demos/charts/chart/trendlines/polynomial/scatter/main.js b/vue-options-api-demos/charts/chart/trendlines/polynomial/scatter/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/polynomial/scatter/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/trendlines/polynomial/scatter/main.vue b/vue-options-api-demos/charts/chart/trendlines/polynomial/scatter/main.vue
new file mode 100644
index 00000000..ec905b74
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/polynomial/scatter/main.vue
@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTitle :text="'Trendlines'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :name="'Series A'"
+          :type="'scatter'"
+          :data-items="seriesData"
+        />
+        <ChartSeriesItem
+          :name="'Sales Trendline (POLY)'"
+          :type="'polynomialTrendline'"
+          :dashType="'solid'"
+          :for="'Series A'"
+          :trendline="{ order: 3 }"
+        />
+      </ChartSeries>
+      <ChartLegend :visible="false" />
+    </Chart>
+  </div>
+</template>
+
+<script>
+  import {
+    Chart,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartLegend
+  } from '@progress/kendo-vue-charts';
+
+
+  export default {
+    components: {
+      Chart,
+      ChartTitle,
+      ChartSeries,
+      ChartSeriesItem,
+      ChartLegend
+    },
+    data() {
+      return {
+        seriesData: [
+          [5, 5], [6, 10], [7, 6],
+          [8, 9], [9, 6], [10, 10], [11, 5],
+          [12, 13], [13, 3], [14, 16], [15, 1],
+          [16, 19], [17, 1], [18, 20], [19, 2],
+          [20, 18], [21, 5], [22, 12], [23, 7],
+          [24, 10], [25, 8]
+        ]
+      };
+    }
+  };
+</script>
diff --git a/vue-options-api-demos/charts/chart/trendlines/power/categorical/main.js b/vue-options-api-demos/charts/chart/trendlines/power/categorical/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/power/categorical/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/trendlines/power/categorical/main.vue b/vue-options-api-demos/charts/chart/trendlines/power/categorical/main.vue
new file mode 100644
index 00000000..a9d7a80a
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/power/categorical/main.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTitle :text="'Trendlines'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :name="'Sales By Quarter'"
+          :type="'line'"
+          :style="'smooth'"
+          :field="'count'"
+          :categoryField="'period'"
+          :data-items="seriesData"
+        />
+        <ChartSeriesItem
+          :name="'Sales Trendline (POW)'"
+          :type="'powerTrendline'"
+          :for="'Sales By Quarter'"
+        />
+      </ChartSeries>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :labels="labels" />
+      </ChartCategoryAxis>
+      <ChartTooltip :shared="true" />
+      <ChartLegend :position="'bottom'" />
+    </Chart>
+  </div>
+</template>
+
+<script>
+  import {
+    Chart,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartTooltip,
+    ChartLegend,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem
+  } from '@progress/kendo-vue-charts';
+
+  import { salesByQuarter } from './sales-data.js';
+
+  export default {
+    components: {
+      Chart,
+      ChartTitle,
+      ChartSeries,
+      ChartSeriesItem,
+      ChartTooltip,
+      ChartLegend,
+      ChartCategoryAxis,
+      ChartCategoryAxisItem
+    },
+    data() {
+      return {
+        seriesData: [...salesByQuarter],
+        labels: { step: 5 }
+      };
+    }
+  };
+</script>
diff --git a/vue-options-api-demos/charts/chart/trendlines/power/categorical/sales-data.js b/vue-options-api-demos/charts/chart/trendlines/power/categorical/sales-data.js
new file mode 100644
index 00000000..c253bc6f
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/power/categorical/sales-data.js
@@ -0,0 +1,247 @@
+export const salesByQuarter = [
+    {
+        period: '2010 Q1',
+        date: new Date(2010, 0, 1),
+        count: 4485.0
+    },
+    {
+        period: '2010 Q2',
+        date: new Date(2010, 3, 1),
+        count: 4409.0
+    },
+    {
+        period: '2010 Q3',
+        date: new Date(2010, 6, 1),
+        count: 4469.0
+    },
+    {
+        period: '2010 Q4',
+        date: new Date(2010, 9, 1),
+        count: 4682.0
+    },
+    {
+        period: '2011 Q1',
+        date: new Date(2011, 0, 1),
+        count: 5610.0
+    },
+    {
+        period: '2011 Q2',
+        date: new Date(2011, 3, 1),
+        count: 6580.0
+    },
+    {
+        period: '2011 Q3',
+        date: new Date(2011, 6, 1),
+        count: 7534.0
+    },
+    {
+        period: '2011 Q4',
+        date: new Date(2011, 9, 1),
+        count: 7894.0
+    },
+    {
+        period: '2012 Q1',
+        date: new Date(2012, 0, 1),
+        count: 8748.0
+    },
+    {
+        period: '2012 Q2',
+        date: new Date(2012, 3, 1),
+        count: 10223.0
+    },
+    {
+        period: '2012 Q3',
+        date: new Date(2012, 6, 1),
+        count: 10797.0
+    },
+    {
+        period: '2012 Q4',
+        date: new Date(2012, 9, 1),
+        count: 12295.0
+    },
+    {
+        period: '2013 Q1',
+        date: new Date(2013, 0, 1),
+        count: 13153.0
+    },
+    {
+        period: '2013 Q2',
+        date: new Date(2013, 3, 1),
+        count: 14628.0
+    },
+    {
+        period: '2013 Q3',
+        date: new Date(2013, 6, 1),
+        count: 16779.0
+    },
+    {
+        period: '2013 Q4',
+        date: new Date(2013, 9, 1),
+        count: 18710.0
+    },
+    {
+        period: '2014 Q1',
+        date: new Date(2014, 0, 1),
+        count: 22219.0
+    },
+    {
+        period: '2014 Q2',
+        date: new Date(2014, 3, 1),
+        count: 25886.0
+    },
+    {
+        period: '2014 Q3',
+        date: new Date(2014, 6, 1),
+        count: 31640.0
+    },
+    {
+        period: '2014 Q4',
+        date: new Date(2014, 9, 1),
+        count: 36846.0
+    },
+    {
+        period: '2015 Q1',
+        date: new Date(2015, 0, 1),
+        count: 43433.0
+    },
+    {
+        period: '2015 Q2',
+        date: new Date(2015, 3, 1),
+        count: 48575.0
+    },
+    {
+        period: '2015 Q3',
+        date: new Date(2015, 6, 1),
+        count: 54533.0
+    },
+    {
+        period: '2015 Q4',
+        date: new Date(2015, 9, 1),
+        count: 62388.0
+    },
+    {
+        period: '2016 Q1',
+        date: new Date(2016, 0, 1),
+        count: 70706.0
+    },
+    {
+        period: '2016 Q2',
+        date: new Date(2016, 3, 1),
+        count: 75439.0
+    },
+    {
+        period: '2016 Q3',
+        date: new Date(2016, 6, 1),
+        count: 83213.0
+    },
+    {
+        period: '2016 Q4',
+        date: new Date(2016, 9, 1),
+        count: 88527.0
+    },
+    {
+        period: '2017 Q1',
+        date: new Date(2017, 0, 1),
+        count: 99865.0
+    },
+    {
+        period: '2017 Q2',
+        date: new Date(2017, 3, 1),
+        count: 107388.0
+    },
+    {
+        period: '2017 Q3',
+        date: new Date(2017, 6, 1),
+        count: 117761.0
+    },
+    {
+        period: '2017 Q4',
+        date: new Date(2017, 9, 1),
+        count: 125263.0
+    },
+    {
+        period: '2018 Q1',
+        date: new Date(2018, 0, 1),
+        count: 135950.0
+    },
+    {
+        period: '2018 Q2',
+        date: new Date(2018, 3, 1),
+        count: 144737.0
+    },
+    {
+        period: '2018 Q3',
+        date: new Date(2018, 6, 1),
+        count: 155933.0
+    },
+    {
+        period: '2018 Q4',
+        date: new Date(2018, 9, 1),
+        count: 167960.0
+    },
+    {
+        period: '2019 Q1',
+        date: new Date(2019, 0, 1),
+        count: 182725.0
+    },
+    {
+        period: '2019 Q2',
+        date: new Date(2019, 3, 1),
+        count: 199079.0
+    },
+    {
+        period: '2019 Q3',
+        date: new Date(2019, 6, 1),
+        count: 234952.0
+    },
+    {
+        period: '2019 Q4',
+        date: new Date(2019, 9, 1),
+        count: 271298.0
+    },
+    {
+        period: '2020 Q1',
+        date: new Date(2020, 0, 1),
+        count: 323309.0
+    },
+    {
+        period: '2020 Q2',
+        date: new Date(2020, 3, 1),
+        count: 358145.0
+    },
+    {
+        period: '2020 Q3',
+        date: new Date(2020, 6, 1),
+        count: 460927.0
+    },
+    {
+        period: '2020 Q4',
+        date: new Date(2020, 9, 1),
+        count: 579568.0
+    },
+    {
+        period: '2021 Q1',
+        date: new Date(2021, 0, 1),
+        count: 669590.0
+    },
+    {
+        period: '2021 Q2',
+        date: new Date(2021, 3, 1),
+        count: 793564.0
+    },
+    {
+        period: '2021 Q3',
+        date: new Date(2021, 6, 1),
+        count: 941133.0
+    },
+    {
+        period: '2021 Q4',
+        date: new Date(2021, 9, 1),
+        count: 1133020.0
+    },
+    {
+        period: '2022 Q1',
+        date: new Date(2022, 0, 1),
+        count: 426324.0
+    }
+];
diff --git a/vue-options-api-demos/charts/chart/trendlines/power/scatter/main.js b/vue-options-api-demos/charts/chart/trendlines/power/scatter/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/power/scatter/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/trendlines/power/scatter/main.vue b/vue-options-api-demos/charts/chart/trendlines/power/scatter/main.vue
new file mode 100644
index 00000000..1bbe6064
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/trendlines/power/scatter/main.vue
@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTitle :text="'Trendlines'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :name="'Series A'"
+          :type="'scatter'"
+          :data-items="seriesData"
+        />
+        <ChartSeriesItem
+          :name="'Sales Trendline (POW)'"
+          :type="'powerTrendline'"
+          :dashType="'solid'"
+          :for="'Series A'"
+        />
+      </ChartSeries>
+      <ChartLegend :visible="false" />
+    </Chart>
+  </div>
+</template>
+
+<script>
+  import {
+    Chart,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartLegend
+  } from '@progress/kendo-vue-charts';
+
+
+  export default {
+    components: {
+      Chart,
+      ChartTitle,
+      ChartSeries,
+      ChartSeriesItem,
+      ChartLegend
+    },
+    data() {
+      return {
+        seriesData: [
+          [5, 5], [6, 10], [7, 6],
+          [8, 9], [9, 6], [10, 10], [11, 5],
+          [12, 13], [13, 3], [14, 16], [15, 1],
+          [16, 19], [17, 1], [18, 20], [19, 2],
+          [20, 18], [21, 5], [22, 12], [23, 7],
+          [24, 10], [25, 8]
+        ]
+      };
+    }
+  };
+</script>
diff --git a/vue-options-api-demos/charts/chart/waterfall/main.js b/vue-options-api-demos/charts/chart/waterfall/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/waterfall/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/chart/waterfall/main.vue b/vue-options-api-demos/charts/chart/waterfall/main.vue
new file mode 100644
index 00000000..1cc3c858
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/waterfall/main.vue
@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTooltip :visible="true" />
+      <ChartLegend :visible="false"> </ChartLegend>
+      <ChartTitle :text="'Cash flow'" />
+      <ChartValueAxis>
+        <ChartValueAxisItem>
+          <ChartValueAxisLabels :format="'c0'" />
+        </ChartValueAxisItem>
+      </ChartValueAxis>
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'waterfall'"
+          :name="'HL Mountain Rear Weel'"
+          :data-items="waterfallData"
+          :color="pointColor"
+          :field="'amount'"
+          :categoryField="'period'"
+          :summaryField="'summary'"
+        >
+          <ChartSeriesLabels :position="'insideEnd'" :format="C0">
+          </ChartSeriesLabels>
+        </ChartSeriesItem>
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+<script>
+import {
+  ChartSeriesLabels,
+  ChartLegend,
+  ChartValueAxisTitle,
+  ChartValueAxisLabels,
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartTitle,
+  ChartTooltip,
+  ChartValueAxis,
+  ChartValueAxisItem,
+} from "@progress/kendo-vue-charts";
+
+import data from "./waterfall-data.json";
+
+export default {
+  components: {
+    ChartSeriesLabels,
+    ChartLegend,
+    ChartValueAxisTitle,
+    ChartValueAxisLabels,
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartTitle,
+    ChartTooltip,
+    ChartValueAxis,
+    ChartValueAxisItem,
+  },
+  data: function () {
+    return {
+      waterfallData: data
+    };
+  },
+  methods: {
+    pointColor(point) {
+      let summary = point.dataItem.summary;
+
+      if (summary) {
+        return summary === "total" ? "#555" : "gray";
+      }
+
+      if (point.value > 0) {
+        return "green";
+      } else {
+        return "red";
+      }
+    }
+  }
+};
+</script>
+
diff --git a/vue-options-api-demos/charts/chart/waterfall/waterfall-data.json b/vue-options-api-demos/charts/chart/waterfall/waterfall-data.json
new file mode 100644
index 00000000..a60ac5dd
--- /dev/null
+++ b/vue-options-api-demos/charts/chart/waterfall/waterfall-data.json
@@ -0,0 +1,31 @@
+[{
+    "period": "Beginning \n Balance",
+    "amount": 50000
+  }, {
+    "period": "Jan",
+    "amount": 17000
+  }, {
+    "period": "Feb",
+    "amount": 14000
+  }, {
+    "period": "Mar",
+    "amount": -12000
+  }, {
+    "period": "Q1",
+    "summary": "runningTotal"
+  }, {
+    "period": "Apr",
+    "amount": -22000
+  }, {
+    "period": "May",
+    "amount": -18000
+  }, {
+    "period": "Jun",
+    "amount": 10000
+  }, {
+    "period": "Q2",
+    "summary": "runningTotal"
+  }, {
+    "period": "Ending \n Balance",
+    "summary": "total"
+  }]
diff --git a/vue-options-api-demos/charts/data-binding/arrays/main.js b/vue-options-api-demos/charts/data-binding/arrays/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/data-binding/arrays/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/data-binding/arrays/main.vue b/vue-options-api-demos/charts/data-binding/arrays/main.vue
new file mode 100644
index 00000000..ead1f6d4
--- /dev/null
+++ b/vue-options-api-demos/charts/data-binding/arrays/main.vue
@@ -0,0 +1,31 @@
+<template>
+  <Chart>
+    <ChartSeries>
+      <ChartSeriesItem :data-items="seriesData" :type="'bubble'" />
+    </ChartSeries>
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      seriesData: [
+        [1, 1, 10],
+        [2, 2, 20],
+        [3, 3, 30],
+      ],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/data-binding/category-field/main.js b/vue-options-api-demos/charts/data-binding/category-field/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/data-binding/category-field/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/data-binding/category-field/main.vue b/vue-options-api-demos/charts/data-binding/category-field/main.vue
new file mode 100644
index 00000000..b2842a81
--- /dev/null
+++ b/vue-options-api-demos/charts/data-binding/category-field/main.vue
@@ -0,0 +1,42 @@
+<template>
+  <Chart>
+    <ChartSeries>
+      <ChartSeriesItem
+        :data-items="seriesData"
+        :type="'column'"
+        :field="'sales'"
+        :category-field="'product'"
+      />
+    </ChartSeries>
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      seriesData: [
+        {
+          product: "Chai",
+          sales: 200,
+        },
+        {
+          product: "Others",
+          sales: 250,
+        },
+      ],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/data-binding/duplicates-aggregate-custom/main.js b/vue-options-api-demos/charts/data-binding/duplicates-aggregate-custom/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/data-binding/duplicates-aggregate-custom/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/data-binding/duplicates-aggregate-custom/main.vue b/vue-options-api-demos/charts/data-binding/duplicates-aggregate-custom/main.vue
new file mode 100644
index 00000000..c00761b3
--- /dev/null
+++ b/vue-options-api-demos/charts/data-binding/duplicates-aggregate-custom/main.vue
@@ -0,0 +1,52 @@
+<template>
+  <Chart>
+    <ChartSeries>
+      <ChartSeriesItem
+        :data-items="seriesData"
+        :type="'column'"
+        :field="'sales'"
+        :aggregate="customAggregate"
+        :category-field="'product'"
+      />
+    </ChartSeries>
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  methods: {
+    customAggregate(values, series, dataItems, category) {
+      return values.reduce((n, acc) => acc + n, 0);
+    },
+  },
+  data: function () {
+    return {
+      seriesData: [
+        {
+          product: "Chai",
+          sales: 200,
+        },
+        {
+          product: "Chai",
+          sales: 100,
+        },
+        {
+          product: "Others",
+          sales: 250,
+        },
+      ],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/data-binding/duplicates-aggregate/main.js b/vue-options-api-demos/charts/data-binding/duplicates-aggregate/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/data-binding/duplicates-aggregate/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/data-binding/duplicates-aggregate/main.vue b/vue-options-api-demos/charts/data-binding/duplicates-aggregate/main.vue
new file mode 100644
index 00000000..2af8b341
--- /dev/null
+++ b/vue-options-api-demos/charts/data-binding/duplicates-aggregate/main.vue
@@ -0,0 +1,47 @@
+<template>
+  <Chart>
+    <ChartSeries>
+      <ChartSeriesItem
+        :data-items="seriesData"
+        :type="'column'"
+        :field="'sales'"
+        :aggregate="'count'"
+        :category-field="'product'"
+      />
+    </ChartSeries>
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      seriesData: [
+        {
+          product: "Chai",
+          sales: 200,
+        },
+        {
+          product: "Chai",
+          sales: 100,
+        },
+        {
+          product: "Others",
+          sales: 250,
+        },
+      ],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/data-binding/duplicates/main.js b/vue-options-api-demos/charts/data-binding/duplicates/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/data-binding/duplicates/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/data-binding/duplicates/main.vue b/vue-options-api-demos/charts/data-binding/duplicates/main.vue
new file mode 100644
index 00000000..baf42ed2
--- /dev/null
+++ b/vue-options-api-demos/charts/data-binding/duplicates/main.vue
@@ -0,0 +1,46 @@
+<template>
+  <Chart>
+    <ChartSeries>
+      <ChartSeriesItem
+        :data-items="seriesData"
+        :type="'column'"
+        :field="'sales'"
+        :category-field="'product'"
+      />
+    </ChartSeries>
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      seriesData: [
+        {
+          product: "Chai",
+          sales: 200,
+        },
+        {
+          product: "Chai",
+          sales: 100,
+        },
+        {
+          product: "Others",
+          sales: 250,
+        },
+      ],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/data-binding/group-objects/main.js b/vue-options-api-demos/charts/data-binding/group-objects/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/data-binding/group-objects/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/data-binding/group-objects/main.vue b/vue-options-api-demos/charts/data-binding/group-objects/main.vue
new file mode 100644
index 00000000..d57da3db
--- /dev/null
+++ b/vue-options-api-demos/charts/data-binding/group-objects/main.vue
@@ -0,0 +1,72 @@
+<template>
+  <Chart>
+    <ChartSeries>
+      <ChartSeriesItem
+        v-for="(item, index) in series"
+        :key="index"
+        :data-items="item.items"
+        :name="item.value"
+        :field="'value'"
+        :category-field="'interval'"
+        :type="'line'"
+      />
+    </ChartSeries>
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+import { groupBy } from "@progress/kendo-data-query";
+
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  mounted() {
+    this.series = groupBy(this.data, [{ field: "service" }]);
+  },
+  data: function () {
+    return {
+      series: null,
+      data: [
+        {
+          interval: 1,
+          service: "Service 1",
+          value: 5,
+        },
+        {
+          interval: 2,
+          service: "Service 1",
+          value: 15,
+        },
+        {
+          interval: 3,
+          service: "Service 1",
+          value: 10,
+        },
+        {
+          interval: 1,
+          service: "Service 2",
+          value: 10,
+        },
+        {
+          interval: 2,
+          service: "Service 2",
+          value: 5,
+        },
+        {
+          interval: 3,
+          service: "Service 2",
+          value: 15,
+        },
+      ],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/data-binding/labels/main.js b/vue-options-api-demos/charts/data-binding/labels/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/data-binding/labels/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/data-binding/labels/main.vue b/vue-options-api-demos/charts/data-binding/labels/main.vue
new file mode 100644
index 00000000..d615fd09
--- /dev/null
+++ b/vue-options-api-demos/charts/data-binding/labels/main.vue
@@ -0,0 +1,36 @@
+<template>
+  <Chart>
+    <ChartCategoryAxis>
+      <ChartCategoryAxisItem :categories="categories" />
+    </ChartCategoryAxis>
+    <ChartSeries>
+      <ChartSeriesItem :data-items="seriesData" />
+    </ChartSeries>
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartSeries,
+  ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+
+
+export default {
+  components: {
+    Chart,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      seriesData: [20, 40, 45, 30, 50],
+      categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/data-binding/no-data-overlay-children/main.js b/vue-options-api-demos/charts/data-binding/no-data-overlay-children/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/data-binding/no-data-overlay-children/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/data-binding/no-data-overlay-children/main.vue b/vue-options-api-demos/charts/data-binding/no-data-overlay-children/main.vue
new file mode 100644
index 00000000..d46fcb1e
--- /dev/null
+++ b/vue-options-api-demos/charts/data-binding/no-data-overlay-children/main.vue
@@ -0,0 +1,48 @@
+<template>
+  <Chart>
+    <ChartTitle text="Chart Title" />
+    <ChartSeries>
+      <ChartSeriesItem
+        :data-items="seriesData"
+        type="column"
+        field="sales"
+        categoryField="product"
+      />
+    </ChartSeries>
+    <ChartNoDataOverlay>
+      <div style="text-align: center; padding: 20px">
+        <SvgIcon :icon="xCircleIcon" themeColor="error" size="xxlarge" />
+        <p style="padding-top: 8px">There is no data to display.</p>
+      </div>
+    </ChartNoDataOverlay>
+  </Chart>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartTitle,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartNoDataOverlay,
+} from "@progress/kendo-vue-charts";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { xCircleIcon } from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    Chart,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartNoDataOverlay,
+    SvgIcon,
+  },
+  data: function () {
+    return {
+      seriesData: [],
+      xCircleIcon,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/data-binding/no-data-overlay/main.js b/vue-options-api-demos/charts/data-binding/no-data-overlay/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/data-binding/no-data-overlay/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/data-binding/no-data-overlay/main.vue b/vue-options-api-demos/charts/data-binding/no-data-overlay/main.vue
new file mode 100644
index 00000000..27a62317
--- /dev/null
+++ b/vue-options-api-demos/charts/data-binding/no-data-overlay/main.vue
@@ -0,0 +1,39 @@
+<template>
+  <Chart>
+    <ChartTitle text="Chart Title" />
+    <ChartSeries>
+      <ChartSeriesItem
+        :data-items="seriesData"
+        type="column"
+        field="sales"
+        categoryField="product"
+      />
+    </ChartSeries>
+    <ChartNoDataOverlay />
+  </Chart>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartTitle,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartNoDataOverlay,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartNoDataOverlay,
+  },
+  data: function () {
+    return {
+      seriesData: [],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/data-binding/objects/main.js b/vue-options-api-demos/charts/data-binding/objects/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/data-binding/objects/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/data-binding/objects/main.vue b/vue-options-api-demos/charts/data-binding/objects/main.vue
new file mode 100644
index 00000000..3ae58b7a
--- /dev/null
+++ b/vue-options-api-demos/charts/data-binding/objects/main.vue
@@ -0,0 +1,41 @@
+<template>
+  <Chart>
+    <ChartSeries>
+      <ChartSeriesItem
+        :data-items="seriesData"
+        :type="'column'"
+        :field="'sales'"
+        :category-field="'product'"
+      />
+    </ChartSeries>
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      seriesData: [
+        {
+          product: "Chai",
+          sales: 200,
+        },
+        {
+          product: "Others",
+          sales: 250,
+        },
+      ],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/data-binding/values/main.js b/vue-options-api-demos/charts/data-binding/values/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/data-binding/values/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/data-binding/values/main.vue b/vue-options-api-demos/charts/data-binding/values/main.vue
new file mode 100644
index 00000000..e0b51977
--- /dev/null
+++ b/vue-options-api-demos/charts/data-binding/values/main.vue
@@ -0,0 +1,27 @@
+<template>
+  <Chart>
+    <ChartSeries>
+      <ChartSeriesItem :data-items="seriesData" />
+    </ChartSeries>
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      seriesData: [1, 2, 3, 5],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/elements/axes/axis-config/main.js b/vue-options-api-demos/charts/elements/axes/axis-config/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/axes/axis-config/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/axes/axis-config/main.vue b/vue-options-api-demos/charts/elements/axes/axis-config/main.vue
new file mode 100644
index 00000000..32c4e150
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/axes/axis-config/main.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <Chart>
+      <ChartAxisDefaults
+        :line="{ color: 'red' }"
+        :labels="{ font: '12pt sans-serif' }"
+      />
+      <ChartSeries>
+        <ChartSeriesItem :type="'line'" :data-items="seriesData" />
+      </ChartSeries>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :categories="categories" />
+      </ChartCategoryAxis>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartAxisDefaults,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartAxisDefaults,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+  },
+  data: function () {
+    return {
+      seriesData: [20, 40, 45, 30, 50],
+      categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/axes/categorical/main.js b/vue-options-api-demos/charts/elements/axes/categorical/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/axes/categorical/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/axes/categorical/main.vue b/vue-options-api-demos/charts/elements/axes/categorical/main.vue
new file mode 100644
index 00000000..2060dde1
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/axes/categorical/main.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <Chart>
+      <ChartValueAxis>
+        <ChartValueAxisItem :title="title" :min="0" :max="100" />
+      </ChartValueAxis>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :categories="categories" />
+      </ChartCategoryAxis>
+      <ChartSeries>
+        <ChartSeriesItem :data-items="seriesData" :type="'line'" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartValueAxis,
+  ChartValueAxisItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartSeries,
+  ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartValueAxis,
+    ChartValueAxisItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      title: { text: 'Miles' },
+      seriesData: [20, 40, 45, 30, 50],
+      categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/axes/date-aggregates/main.js b/vue-options-api-demos/charts/elements/axes/date-aggregates/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/axes/date-aggregates/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/axes/date-aggregates/main.vue b/vue-options-api-demos/charts/elements/axes/date-aggregates/main.vue
new file mode 100644
index 00000000..c5fd934c
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/axes/date-aggregates/main.vue
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <div class="example-config">
+      <label>Aggregate: </label>
+      <DropDownList
+        :style="{
+          marginLeft: 5,
+        }"
+        :value="aggregate"
+        @change="onChange"
+        :data-items="aggregates"
+      />
+    </div>
+    <Chart>
+      <ChartTitle :text="'Daily Max (&deg;C)'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'column'"
+          :field="'TMax'"
+          :category-field="'Date'"
+          :aggregate="aggregate"
+          :data-items="data"
+        />
+      </ChartSeries>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :base-unit="baseUnit" />
+      </ChartCategoryAxis>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+import {
+  Chart,
+  ChartTitle,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+} from "@progress/kendo-vue-charts";
+import { mockData } from "./weather-data.js";
+
+const data = mockData();
+
+export default {
+  components: {
+    DropDownList,
+    Chart,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+  },
+  data: function () {
+    return {
+      data: data,
+      baseUnit: "weeks",
+      aggregate: "max",
+      aggregates: ["max", "min"],
+    };
+  },
+  methods: {
+    onChange(event) {
+      this.aggregate = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/axes/date-aggregates/weather-data.js b/vue-options-api-demos/charts/elements/axes/date-aggregates/weather-data.js
new file mode 100644
index 00000000..bf815e3d
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/axes/date-aggregates/weather-data.js
@@ -0,0 +1,220 @@
+const data = () =>
+[
+  {
+    Timestamp: '2018-01-01T00:00:00.000',
+    TMax: 3.3,
+    TMin: -12,
+    Wind: 5.5,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-02T00:00:00.000',
+    TMax: 5.2,
+    TMin: -10,
+    Wind: 8.1,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-03T00:00:00.000',
+    TMax: 3.2,
+    TMin: -8,
+    Wind: 8.1,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-04T00:00:00.000',
+    TMax: 11,
+    TMin: -7,
+    Wind: 24.5,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-05T00:00:00.000',
+    TMax: 9,
+    TMin: 0,
+    Wind: 21.7,
+    Rain: 1.8
+  },
+  {
+    Timestamp: '2018-01-06T00:00:00.000',
+    TMax: 2,
+    TMin: -1,
+    Wind: 21.7,
+    Rain: 19.7
+  },
+  {
+    Timestamp: '2018-01-07T00:00:00.000',
+    TMax: 2,
+    TMin: -3,
+    Wind: 24.5,
+    Rain: 1.3
+  },
+  {
+    Timestamp: '2018-01-08T00:00:00.000',
+    TMax: 3,
+    TMin: -2,
+    Wind: 16.4,
+    Rain: 0.8
+  },
+  {
+    Timestamp: '2018-01-09T00:00:00.000',
+    TMax: 3,
+    TMin: -7,
+    Wind: 13.6,
+    Rain: 0.3
+  },
+  {
+    Timestamp: '2018-01-10T00:00:00.000',
+    TMax: 2.2,
+    TMin: -8,
+    Wind: 13.6,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-11T00:00:00.000',
+    TMax: 4,
+    TMin: -6,
+    Wind: 16.4,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-12T00:00:00.000',
+    TMax: 5.5,
+    TMin: -6,
+    Wind: 21.7,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-13T00:00:00.000',
+    TMax: 2.7,
+    TMin: -2,
+    Wind: 27.1,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-14T00:00:00.000',
+    TMax: 0,
+    TMin: -6,
+    Wind: 24.5,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-15T00:00:00.000',
+    TMax: -1,
+    TMin: -6,
+    Wind: 27.1,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-16T00:00:00.000',
+    TMax: 0,
+    TMin: -7,
+    Wind: 24.5,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-17T00:00:00.000',
+    TMax: 1,
+    TMin: -7,
+    Wind: 21.7,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-18T00:00:00.000',
+    TMax: 5,
+    TMin: -6,
+    Wind: 13.6,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-19T00:00:00.000',
+    TMax: 6,
+    TMin: -3,
+    Wind: 13.6,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-20T00:00:00.000',
+    TMax: 3,
+    TMin: -3,
+    Wind: 29.9,
+    Rain: 7.2
+  },
+  {
+    Timestamp: '2018-01-21T00:00:00.000',
+    TMax: 2.2,
+    TMin: -7,
+    Wind: 19,
+    Rain: 1.5
+  },
+  {
+    Timestamp: '2018-01-22T00:00:00.000',
+    TMax: 6.2,
+    TMin: -8,
+    Wind: 8.1,
+    Rain: 0.3
+  },
+  {
+    Timestamp: '2018-01-23T00:00:00.000',
+    TMax: 6,
+    TMin: -2,
+    Wind: 16.4,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-24T00:00:00.000',
+    TMax: 2.4,
+    TMin: -2,
+    Wind: 16.4,
+    Rain: 5.1
+  },
+  {
+    Timestamp: '2018-01-25T00:00:00.000',
+    TMax: -1.4,
+    TMin: -9,
+    Wind: 16.4,
+    Rain: 17.2
+  },
+  {
+    Timestamp: '2018-01-26T00:00:00.000',
+    TMax: 0,
+    TMin: -8,
+    Wind: 10.9,
+    Rain: 5.9
+  },
+  {
+    Timestamp: '2018-01-27T00:00:00.000',
+    TMax: -2.7,
+    TMin: -9,
+    Wind: 16.4,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-28T00:00:00.000',
+    TMax: -2.4,
+    TMin: -14,
+    Wind: 19,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-29T00:00:00.000',
+    TMax: -5,
+    TMin: -20,
+    Wind: 13.6,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-30T00:00:00.000',
+    TMax: -5.4,
+    TMin: -22,
+    Wind: 5.5,
+    Rain: 0
+  }
+];
+
+export const mockData = () =>
+  data().map(p => {
+    p.Date = new Date(p.Timestamp);
+    return p;
+  }
+);
diff --git a/vue-options-api-demos/charts/elements/axes/label-rotation/main.js b/vue-options-api-demos/charts/elements/axes/label-rotation/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/axes/label-rotation/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/axes/label-rotation/main.vue b/vue-options-api-demos/charts/elements/axes/label-rotation/main.vue
new file mode 100644
index 00000000..be8e00a8
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/axes/label-rotation/main.vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTitle :text="'Daily Max (&deg;C)'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'column'"
+          :field="'TMax'"
+          :categoryField="'Date'"
+          :data-items="data"
+        />
+      </ChartSeries>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :labels="labelFormat" />
+      </ChartCategoryAxis>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartTitle,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+} from '@progress/kendo-vue-charts';
+import { mockData } from './weather-data.js';
+
+const data = mockData();
+
+export default {
+  components: {
+    Chart,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+  },
+  data() {
+    return {
+      data: data,
+      labelFormat: {
+        format: 'd',
+        rotation: 'auto',
+      },
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/axes/label-rotation/weather-data.js b/vue-options-api-demos/charts/elements/axes/label-rotation/weather-data.js
new file mode 100644
index 00000000..bf815e3d
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/axes/label-rotation/weather-data.js
@@ -0,0 +1,220 @@
+const data = () =>
+[
+  {
+    Timestamp: '2018-01-01T00:00:00.000',
+    TMax: 3.3,
+    TMin: -12,
+    Wind: 5.5,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-02T00:00:00.000',
+    TMax: 5.2,
+    TMin: -10,
+    Wind: 8.1,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-03T00:00:00.000',
+    TMax: 3.2,
+    TMin: -8,
+    Wind: 8.1,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-04T00:00:00.000',
+    TMax: 11,
+    TMin: -7,
+    Wind: 24.5,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-05T00:00:00.000',
+    TMax: 9,
+    TMin: 0,
+    Wind: 21.7,
+    Rain: 1.8
+  },
+  {
+    Timestamp: '2018-01-06T00:00:00.000',
+    TMax: 2,
+    TMin: -1,
+    Wind: 21.7,
+    Rain: 19.7
+  },
+  {
+    Timestamp: '2018-01-07T00:00:00.000',
+    TMax: 2,
+    TMin: -3,
+    Wind: 24.5,
+    Rain: 1.3
+  },
+  {
+    Timestamp: '2018-01-08T00:00:00.000',
+    TMax: 3,
+    TMin: -2,
+    Wind: 16.4,
+    Rain: 0.8
+  },
+  {
+    Timestamp: '2018-01-09T00:00:00.000',
+    TMax: 3,
+    TMin: -7,
+    Wind: 13.6,
+    Rain: 0.3
+  },
+  {
+    Timestamp: '2018-01-10T00:00:00.000',
+    TMax: 2.2,
+    TMin: -8,
+    Wind: 13.6,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-11T00:00:00.000',
+    TMax: 4,
+    TMin: -6,
+    Wind: 16.4,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-12T00:00:00.000',
+    TMax: 5.5,
+    TMin: -6,
+    Wind: 21.7,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-13T00:00:00.000',
+    TMax: 2.7,
+    TMin: -2,
+    Wind: 27.1,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-14T00:00:00.000',
+    TMax: 0,
+    TMin: -6,
+    Wind: 24.5,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-15T00:00:00.000',
+    TMax: -1,
+    TMin: -6,
+    Wind: 27.1,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-16T00:00:00.000',
+    TMax: 0,
+    TMin: -7,
+    Wind: 24.5,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-17T00:00:00.000',
+    TMax: 1,
+    TMin: -7,
+    Wind: 21.7,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-18T00:00:00.000',
+    TMax: 5,
+    TMin: -6,
+    Wind: 13.6,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-19T00:00:00.000',
+    TMax: 6,
+    TMin: -3,
+    Wind: 13.6,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-20T00:00:00.000',
+    TMax: 3,
+    TMin: -3,
+    Wind: 29.9,
+    Rain: 7.2
+  },
+  {
+    Timestamp: '2018-01-21T00:00:00.000',
+    TMax: 2.2,
+    TMin: -7,
+    Wind: 19,
+    Rain: 1.5
+  },
+  {
+    Timestamp: '2018-01-22T00:00:00.000',
+    TMax: 6.2,
+    TMin: -8,
+    Wind: 8.1,
+    Rain: 0.3
+  },
+  {
+    Timestamp: '2018-01-23T00:00:00.000',
+    TMax: 6,
+    TMin: -2,
+    Wind: 16.4,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-24T00:00:00.000',
+    TMax: 2.4,
+    TMin: -2,
+    Wind: 16.4,
+    Rain: 5.1
+  },
+  {
+    Timestamp: '2018-01-25T00:00:00.000',
+    TMax: -1.4,
+    TMin: -9,
+    Wind: 16.4,
+    Rain: 17.2
+  },
+  {
+    Timestamp: '2018-01-26T00:00:00.000',
+    TMax: 0,
+    TMin: -8,
+    Wind: 10.9,
+    Rain: 5.9
+  },
+  {
+    Timestamp: '2018-01-27T00:00:00.000',
+    TMax: -2.7,
+    TMin: -9,
+    Wind: 16.4,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-28T00:00:00.000',
+    TMax: -2.4,
+    TMin: -14,
+    Wind: 19,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-29T00:00:00.000',
+    TMax: -5,
+    TMin: -20,
+    Wind: 13.6,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-30T00:00:00.000',
+    TMax: -5.4,
+    TMin: -22,
+    Wind: 5.5,
+    Rain: 0
+  }
+];
+
+export const mockData = () =>
+  data().map(p => {
+    p.Date = new Date(p.Timestamp);
+    return p;
+  }
+);
diff --git a/vue-options-api-demos/charts/elements/axes/max-divisions/main.js b/vue-options-api-demos/charts/elements/axes/max-divisions/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/axes/max-divisions/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/axes/max-divisions/main.vue b/vue-options-api-demos/charts/elements/axes/max-divisions/main.vue
new file mode 100644
index 00000000..60bbdb23
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/axes/max-divisions/main.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTitle :text="'Daily Max (&deg;C)'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'column'"
+          :field="'TMax'"
+          :category-field="'Date'"
+          :data-items="data"
+        />
+      </ChartSeries>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :max-divisions="10" />
+      </ChartCategoryAxis>
+      <ChartTooltip :render="'tooltipRender'">
+        <template v-slot:tooltipRender="{ props }">
+          <span>
+            {{ props.point.category.toDateString() }}: {{ props.point.value }}
+          </span>
+        </template>
+      </ChartTooltip>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartTooltip,
+  ChartTitle,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+} from '@progress/kendo-vue-charts';
+import { mockData } from './weather-data.js';
+
+const data = mockData();
+
+export default {
+  components: {
+    Chart,
+    ChartTooltip,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+  },
+  data: function () {
+    return {
+      data: data,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/axes/max-divisions/weather-data.js b/vue-options-api-demos/charts/elements/axes/max-divisions/weather-data.js
new file mode 100644
index 00000000..bf815e3d
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/axes/max-divisions/weather-data.js
@@ -0,0 +1,220 @@
+const data = () =>
+[
+  {
+    Timestamp: '2018-01-01T00:00:00.000',
+    TMax: 3.3,
+    TMin: -12,
+    Wind: 5.5,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-02T00:00:00.000',
+    TMax: 5.2,
+    TMin: -10,
+    Wind: 8.1,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-03T00:00:00.000',
+    TMax: 3.2,
+    TMin: -8,
+    Wind: 8.1,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-04T00:00:00.000',
+    TMax: 11,
+    TMin: -7,
+    Wind: 24.5,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-05T00:00:00.000',
+    TMax: 9,
+    TMin: 0,
+    Wind: 21.7,
+    Rain: 1.8
+  },
+  {
+    Timestamp: '2018-01-06T00:00:00.000',
+    TMax: 2,
+    TMin: -1,
+    Wind: 21.7,
+    Rain: 19.7
+  },
+  {
+    Timestamp: '2018-01-07T00:00:00.000',
+    TMax: 2,
+    TMin: -3,
+    Wind: 24.5,
+    Rain: 1.3
+  },
+  {
+    Timestamp: '2018-01-08T00:00:00.000',
+    TMax: 3,
+    TMin: -2,
+    Wind: 16.4,
+    Rain: 0.8
+  },
+  {
+    Timestamp: '2018-01-09T00:00:00.000',
+    TMax: 3,
+    TMin: -7,
+    Wind: 13.6,
+    Rain: 0.3
+  },
+  {
+    Timestamp: '2018-01-10T00:00:00.000',
+    TMax: 2.2,
+    TMin: -8,
+    Wind: 13.6,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-11T00:00:00.000',
+    TMax: 4,
+    TMin: -6,
+    Wind: 16.4,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-12T00:00:00.000',
+    TMax: 5.5,
+    TMin: -6,
+    Wind: 21.7,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-13T00:00:00.000',
+    TMax: 2.7,
+    TMin: -2,
+    Wind: 27.1,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-14T00:00:00.000',
+    TMax: 0,
+    TMin: -6,
+    Wind: 24.5,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-15T00:00:00.000',
+    TMax: -1,
+    TMin: -6,
+    Wind: 27.1,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-16T00:00:00.000',
+    TMax: 0,
+    TMin: -7,
+    Wind: 24.5,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-17T00:00:00.000',
+    TMax: 1,
+    TMin: -7,
+    Wind: 21.7,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-18T00:00:00.000',
+    TMax: 5,
+    TMin: -6,
+    Wind: 13.6,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-19T00:00:00.000',
+    TMax: 6,
+    TMin: -3,
+    Wind: 13.6,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-20T00:00:00.000',
+    TMax: 3,
+    TMin: -3,
+    Wind: 29.9,
+    Rain: 7.2
+  },
+  {
+    Timestamp: '2018-01-21T00:00:00.000',
+    TMax: 2.2,
+    TMin: -7,
+    Wind: 19,
+    Rain: 1.5
+  },
+  {
+    Timestamp: '2018-01-22T00:00:00.000',
+    TMax: 6.2,
+    TMin: -8,
+    Wind: 8.1,
+    Rain: 0.3
+  },
+  {
+    Timestamp: '2018-01-23T00:00:00.000',
+    TMax: 6,
+    TMin: -2,
+    Wind: 16.4,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-24T00:00:00.000',
+    TMax: 2.4,
+    TMin: -2,
+    Wind: 16.4,
+    Rain: 5.1
+  },
+  {
+    Timestamp: '2018-01-25T00:00:00.000',
+    TMax: -1.4,
+    TMin: -9,
+    Wind: 16.4,
+    Rain: 17.2
+  },
+  {
+    Timestamp: '2018-01-26T00:00:00.000',
+    TMax: 0,
+    TMin: -8,
+    Wind: 10.9,
+    Rain: 5.9
+  },
+  {
+    Timestamp: '2018-01-27T00:00:00.000',
+    TMax: -2.7,
+    TMin: -9,
+    Wind: 16.4,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-28T00:00:00.000',
+    TMax: -2.4,
+    TMin: -14,
+    Wind: 19,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-29T00:00:00.000',
+    TMax: -5,
+    TMin: -20,
+    Wind: 13.6,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-30T00:00:00.000',
+    TMax: -5.4,
+    TMin: -22,
+    Wind: 5.5,
+    Rain: 0
+  }
+];
+
+export const mockData = () =>
+  data().map(p => {
+    p.Date = new Date(p.Timestamp);
+    return p;
+  }
+);
diff --git a/vue-options-api-demos/charts/elements/axes/multi-axis/main.js b/vue-options-api-demos/charts/elements/axes/multi-axis/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/axes/multi-axis/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/axes/multi-axis/main.vue b/vue-options-api-demos/charts/elements/axes/multi-axis/main.vue
new file mode 100644
index 00000000..46063d72
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/axes/multi-axis/main.vue
@@ -0,0 +1,162 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTitle :text="'March Weather Report'" />
+      <ChartLegend :position="'bottom'" :orientation="'horizontal'" />
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem
+          :categories="categories"
+          :start-angle="45"
+          :axis-crossing-value="axisCrossingValue"
+        />
+      </ChartCategoryAxis>
+      <ChartSeries>
+        <ChartSeriesItem
+          v-for="(item, index) in series"
+          :key="index"
+          :type="item.type"
+          :data-items="item.data"
+          :name="item.name"
+          :axis="item.axis"
+        />
+      </ChartSeries>
+      <ChartValueAxis>
+        <ChartValueAxisItem
+          v-for="(item, index) in valueAxis"
+          :key="index"
+          :name="item.name"
+          :min="item.min"
+          :max="item.max"
+        />
+      </ChartValueAxis>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartTitle,
+  ChartLegend,
+  ChartValueAxis,
+  ChartValueAxisItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartTitle,
+    ChartLegend,
+    ChartValueAxis,
+    ChartValueAxisItem,
+  },
+  data: function () {
+    return {
+      categories: [
+        '1',
+        '2',
+        '3',
+        '4',
+        '5',
+        '6',
+        '7',
+        '8',
+        '9',
+        '10',
+        '11',
+        '12',
+        '13',
+        '14',
+        '15',
+        '16',
+        '17',
+        '18',
+        '19',
+        '20',
+        '21',
+        '22',
+        '23',
+        '24',
+        '25',
+        '26',
+        '27',
+        '28',
+        '29',
+        '30',
+        '31',
+      ],
+      series: [
+        {
+          type: 'line',
+          data: [
+            6, 10, 10, 10, 10, 9, 5, 5, 10, 8, 8, 5, 8, 11, 9, 15, 20, 23, 24,
+            21, 21, 20, 22, 22, 20, 18, 16, 15, 20, 13.2, 18,
+          ],
+          name: 'Max. Temperature [&deg;C]',
+          color: '#ff1c1c',
+          axis: 'temp',
+        },
+        {
+          type: 'line',
+          data: [
+            -5, -6, 0, -4, -3, -5.2, -5, -1.7, -1, 0, -0.4, -2, -2, -5, 4, -2,
+            -4, -1, -1, 2, 4, -1, 1, 1, 4, 0, -1, 1, -2, 5.7, 5,
+          ],
+          name: 'Min. Temperature [&deg;C]',
+          color: '#ffae00',
+          axis: 'temp',
+        },
+        {
+          type: 'area',
+          data: [
+            16.4, 21.7, 35.4, 19, 10.9, 13.6, 10.9, 10.9, 10.9, 16.4, 16.4,
+            13.6, 13.6, 29.9, 27.1, 16.4, 13.6, 10.9, 16.4, 10.9, 24.5, 10.9,
+            8.1, 19, 21.7, 27.1, 24.5, 16.4, 27.1, 29.9, 27.1,
+          ],
+          name: 'Wind Speed [km/h]',
+          color: '#73c100',
+          axis: 'wind',
+        },
+        {
+          type: 'area',
+          data: [
+            5.4, 2, 5.4, 3, 2, 1, 3.2, 7.4, 0, 8.2, 0, 1.8, 0.3, 0, 0, 2.3, 0,
+            3.7, 5.2, 6.5, 0, 7.1, 0, 4.7, 0, 1.8, 0, 0, 0, 1.5, 0.8,
+          ],
+          name: 'Rainfall [mm]',
+          color: '#007eff',
+          axis: 'rain',
+        },
+      ],
+      valueAxis: [
+        {
+          name: 'rain',
+          color: '#007eff',
+          min: 0,
+          max: 60,
+        },
+        {
+          name: 'wind',
+          color: '#73c100',
+          min: 0,
+          max: 60,
+        },
+        {
+          name: 'temp',
+          min: -30,
+          max: 30,
+        },
+      ],
+      axisCrossingValue: [32, 32, 0],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/axes/range-labels/covid-data.json b/vue-options-api-demos/charts/elements/axes/range-labels/covid-data.json
new file mode 100644
index 00000000..55b698ec
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/axes/range-labels/covid-data.json
@@ -0,0 +1,593 @@
+[
+    {
+      "NewCases": 41,
+      "Timestamp": 1578700800000
+    },
+    {
+      "NewCases": 0,
+      "Timestamp": 1578787200000
+    },
+    {
+      "NewCases": 1,
+      "Timestamp": 1578873600000
+    },
+    {
+      "NewCases": 1,
+      "Timestamp": 1578960000000
+    },
+    {
+      "NewCases": 0,
+      "Timestamp": 1579046400000
+    },
+    {
+      "NewCases": 0,
+      "Timestamp": 1579132800000
+    },
+    {
+      "NewCases": 5,
+      "Timestamp": 1579219200000
+    },
+    {
+      "NewCases": 17,
+      "Timestamp": 1579305600000
+    },
+    {
+      "NewCases": 60,
+      "Timestamp": 1579392000000
+    },
+    {
+      "NewCases": 78,
+      "Timestamp": 1579478400000
+    },
+    {
+      "NewCases": 93,
+      "Timestamp": 1579564800000
+    },
+    {
+      "NewCases": 154,
+      "Timestamp": 1579651200000
+    },
+    {
+      "NewCases": 133,
+      "Timestamp": 1579737600000
+    },
+    {
+      "NewCases": 271,
+      "Timestamp": 1579824000000
+    },
+    {
+      "NewCases": 469,
+      "Timestamp": 1579910400000
+    },
+    {
+      "NewCases": 698,
+      "Timestamp": 1579996800000
+    },
+    {
+      "NewCases": 785,
+      "Timestamp": 1580083200000
+    },
+    {
+      "NewCases": 1789,
+      "Timestamp": 1580169600000
+    },
+    {
+      "NewCases": 1481,
+      "Timestamp": 1580256000000
+    },
+    {
+      "NewCases": 1760,
+      "Timestamp": 1580342400000
+    },
+    {
+      "NewCases": 2011,
+      "Timestamp": 1580428800000
+    },
+    {
+      "NewCases": 2115,
+      "Timestamp": 1580515200000
+    },
+    {
+      "NewCases": 2597,
+      "Timestamp": 1580601600000
+    },
+    {
+      "NewCases": 2832,
+      "Timestamp": 1580688000000
+    },
+    {
+      "NewCases": 3258,
+      "Timestamp": 1580774400000
+    },
+    {
+      "NewCases": 3914,
+      "Timestamp": 1580860800000
+    },
+    {
+      "NewCases": 3722,
+      "Timestamp": 1580947200000
+    },
+    {
+      "NewCases": 3201,
+      "Timestamp": 1581033600000
+    },
+    {
+      "NewCases": 3413,
+      "Timestamp": 1581120000000
+    },
+    {
+      "NewCases": 2670,
+      "Timestamp": 1581206400000
+    },
+    {
+      "NewCases": 3058,
+      "Timestamp": 1581292800000
+    },
+    {
+      "NewCases": 2482,
+      "Timestamp": 1581379200000
+    },
+    {
+      "NewCases": 2066,
+      "Timestamp": 1581465600000
+    },
+    {
+      "NewCases": 15212,
+      "Timestamp": 1581552000000
+    },
+    {
+      "NewCases": 4068,
+      "Timestamp": 1581638400000
+    },
+    {
+      "NewCases": 2732,
+      "Timestamp": 1581724800000
+    },
+    {
+      "NewCases": 2090,
+      "Timestamp": 1581811200000
+    },
+    {
+      "NewCases": 2161,
+      "Timestamp": 1581897600000
+    },
+    {
+      "NewCases": 1993,
+      "Timestamp": 1581984000000
+    },
+    {
+      "NewCases": 1856,
+      "Timestamp": 1582070400000
+    },
+    {
+      "NewCases": 486,
+      "Timestamp": 1582156800000
+    },
+    {
+      "NewCases": 1044,
+      "Timestamp": 1582243200000
+    },
+    {
+      "NewCases": 1109,
+      "Timestamp": 1582329600000
+    },
+    {
+      "NewCases": 1020,
+      "Timestamp": 1582416000000
+    },
+    {
+      "NewCases": 619,
+      "Timestamp": 1582502400000
+    },
+    {
+      "NewCases": 825,
+      "Timestamp": 1582588800000
+    },
+    {
+      "NewCases": 927,
+      "Timestamp": 1582675200000
+    },
+    {
+      "NewCases": 1376,
+      "Timestamp": 1582761600000
+    },
+    {
+      "NewCases": 1431,
+      "Timestamp": 1582848000000
+    },
+    {
+      "NewCases": 1827,
+      "Timestamp": 1582934400000
+    },
+    {
+      "NewCases": 1880,
+      "Timestamp": 1583020800000
+    },
+    {
+      "NewCases": 2296,
+      "Timestamp": 1583107200000
+    },
+    {
+      "NewCases": 2293,
+      "Timestamp": 1583193600000
+    },
+    {
+      "NewCases": 2197,
+      "Timestamp": 1583280000000
+    },
+    {
+      "NewCases": 2726,
+      "Timestamp": 1583366400000
+    },
+    {
+      "NewCases": 3911,
+      "Timestamp": 1583452800000
+    },
+    {
+      "NewCases": 3809,
+      "Timestamp": 1583539200000
+    },
+    {
+      "NewCases": 3931,
+      "Timestamp": 1583625600000
+    },
+    {
+      "NewCases": 4332,
+      "Timestamp": 1583712000000
+    },
+    {
+      "NewCases": 4460,
+      "Timestamp": 1583798400000
+    },
+    {
+      "NewCases": 6315,
+      "Timestamp": 1583884800000
+    },
+    {
+      "NewCases": 6682,
+      "Timestamp": 1583971200000
+    },
+    {
+      "NewCases": 10153,
+      "Timestamp": 1584057600000
+    },
+    {
+      "NewCases": 11793,
+      "Timestamp": 1584144000000
+    },
+    {
+      "NewCases": 12472,
+      "Timestamp": 1584230400000
+    },
+    {
+      "NewCases": 10749,
+      "Timestamp": 1584316800000
+    },
+    {
+      "NewCases": 15523,
+      "Timestamp": 1584403200000
+    },
+    {
+      "NewCases": 18365,
+      "Timestamp": 1584489600000
+    },
+    {
+      "NewCases": 24256,
+      "Timestamp": 1584576000000
+    },
+    {
+      "NewCases": 32003,
+      "Timestamp": 1584662400000
+    },
+    {
+      "NewCases": 26069,
+      "Timestamp": 1584748800000
+    },
+    {
+      "NewCases": 1944,
+      "Timestamp": 1584835200000
+    },
+    {
+      "NewCases": 40898,
+      "Timestamp": 1584921600000
+    },
+    {
+      "NewCases": 51862,
+      "Timestamp": 1585008000000
+    },
+    {
+      "NewCases": 29810,
+      "Timestamp": 1585094400000
+    },
+    {
+      "NewCases": 54655,
+      "Timestamp": 1585180800000
+    },
+    {
+      "NewCases": 41366,
+      "Timestamp": 1585267200000
+    },
+    {
+      "NewCases": 62724,
+      "Timestamp": 1585353600000
+    },
+    {
+      "NewCases": 62705,
+      "Timestamp": 1585440000000
+    },
+    {
+      "NewCases": 59160,
+      "Timestamp": 1585526400000
+    },
+    {
+      "NewCases": 57643,
+      "Timestamp": 1585612800000
+    },
+    {
+      "NewCases": 72471,
+      "Timestamp": 1585699200000
+    },
+    {
+      "NewCases": 72901,
+      "Timestamp": 1585785600000
+    },
+    {
+      "NewCases": 75944,
+      "Timestamp": 1585872000000
+    },
+    {
+      "NewCases": 79908,
+      "Timestamp": 1585958400000
+    },
+    {
+      "NewCases": 80692,
+      "Timestamp": 1586044800000
+    },
+    {
+      "NewCases": 77617,
+      "Timestamp": 1586131200000
+    },
+    {
+      "NewCases": 68465,
+      "Timestamp": 1586217600000
+    },
+    {
+      "NewCases": 73849,
+      "Timestamp": 1586304000000
+    },
+    {
+      "NewCases": 82736,
+      "Timestamp": 1586390400000
+    },
+    {
+      "NewCases": 84635,
+      "Timestamp": 1586476800000
+    },
+    {
+      "NewCases": 90778,
+      "Timestamp": 1586563200000
+    },
+    {
+      "NewCases": 84634,
+      "Timestamp": 1586649600000
+    },
+    {
+      "NewCases": 77274,
+      "Timestamp": 1586736000000
+    },
+    {
+      "NewCases": 71545,
+      "Timestamp": 1586822400000
+    },
+    {
+      "NewCases": 73220,
+      "Timestamp": 1586908800000
+    },
+    {
+      "NewCases": 76794,
+      "Timestamp": 1586995200000
+    },
+    {
+      "NewCases": 81839,
+      "Timestamp": 1587081600000
+    },
+    {
+      "NewCases": 84353,
+      "Timestamp": 1587168000000
+    },
+    {
+      "NewCases": 78522,
+      "Timestamp": 1587254400000
+    },
+    {
+      "NewCases": 70345,
+      "Timestamp": 1587340800000
+    },
+    {
+      "NewCases": 83101,
+      "Timestamp": 1587427200000
+    },
+    {
+      "NewCases": 72107,
+      "Timestamp": 1587513600000
+    },
+    {
+      "NewCases": 72752,
+      "Timestamp": 1587600000000
+    },
+    {
+      "NewCases": 80220,
+      "Timestamp": 1587686400000
+    },
+    {
+      "NewCases": 89313,
+      "Timestamp": 1587772800000
+    },
+    {
+      "NewCases": 85505,
+      "Timestamp": 1587859200000
+    },
+    {
+      "NewCases": 87138,
+      "Timestamp": 1587945600000
+    },
+    {
+      "NewCases": 73759,
+      "Timestamp": 1588032000000
+    },
+    {
+      "NewCases": 66321,
+      "Timestamp": 1588118400000
+    },
+    {
+      "NewCases": 72955,
+      "Timestamp": 1588204800000
+    },
+    {
+      "NewCases": 85008,
+      "Timestamp": 1588291200000
+    },
+    {
+      "NewCases": 90578,
+      "Timestamp": 1588377600000
+    },
+    {
+      "NewCases": 83985,
+      "Timestamp": 1588464000000
+    },
+    {
+      "NewCases": 85984,
+      "Timestamp": 1588550400000
+    },
+    {
+      "NewCases": 82906,
+      "Timestamp": 1588636800000
+    },
+    {
+      "NewCases": 70578,
+      "Timestamp": 1588723200000
+    },
+    {
+      "NewCases": 83835,
+      "Timestamp": 1588809600000
+    },
+    {
+      "NewCases": 88245,
+      "Timestamp": 1588896000000
+    },
+    {
+      "NewCases": 94857,
+      "Timestamp": 1588982400000
+    },
+    {
+      "NewCases": 89086,
+      "Timestamp": 1589068800000
+    },
+    {
+      "NewCases": 88684,
+      "Timestamp": 1589155200000
+    },
+    {
+      "NewCases": 81413,
+      "Timestamp": 1589241600000
+    },
+    {
+      "NewCases": 75740,
+      "Timestamp": 1589328000000
+    },
+    {
+      "NewCases": 82566,
+      "Timestamp": 1589414400000
+    },
+    {
+      "NewCases": 88685,
+      "Timestamp": 1589500800000
+    },
+    {
+      "NewCases": 92967,
+      "Timestamp": 1589587200000
+    },
+    {
+      "NewCases": 95802,
+      "Timestamp": 1589673600000
+    },
+    {
+      "NewCases": 103325,
+      "Timestamp": 1589760000000
+    },
+    {
+      "NewCases": 74696,
+      "Timestamp": 1589846400000
+    },
+    {
+      "NewCases": 90054,
+      "Timestamp": 1589932800000
+    },
+    {
+      "NewCases": 102103,
+      "Timestamp": 1590019200000
+    },
+    {
+      "NewCases": 91060,
+      "Timestamp": 1590105600000
+    },
+    {
+      "NewCases": 107563,
+      "Timestamp": 1590192000000
+    },
+    {
+      "NewCases": 104409,
+      "Timestamp": 1590278400000
+    },
+    {
+      "NewCases": 102660,
+      "Timestamp": 1590364800000
+    },
+    {
+      "NewCases": 88121,
+      "Timestamp": 1590451200000
+    },
+    {
+      "NewCases": 94577,
+      "Timestamp": 1590537600000
+    },
+    {
+      "NewCases": 96393,
+      "Timestamp": 1590624000000
+    },
+    {
+      "NewCases": 111464,
+      "Timestamp": 1590710400000
+    },
+    {
+      "NewCases": 116834,
+      "Timestamp": 1590796800000
+    },
+    {
+      "NewCases": 116079,
+      "Timestamp": 1590883200000
+    },
+    {
+      "NewCases": 124080,
+      "Timestamp": 1590969600000
+    },
+    {
+      "NewCases": 113338,
+      "Timestamp": 1591056000000
+    },
+    {
+      "NewCases": 93246,
+      "Timestamp": 1591142400000
+    },
+    {
+      "NewCases": 129281,
+      "Timestamp": 1591228800000
+    },
+    {
+      "NewCases": 118528,
+      "Timestamp": 1591315200000
+    },
+    {
+      "NewCases": 127943,
+      "Timestamp": 1591401600000
+    }]
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/elements/axes/range-labels/main.js b/vue-options-api-demos/charts/elements/axes/range-labels/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/axes/range-labels/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/axes/range-labels/main.vue b/vue-options-api-demos/charts/elements/axes/range-labels/main.vue
new file mode 100644
index 00000000..b773d1be
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/axes/range-labels/main.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <div class="example-config">
+      <div class="form-field">
+        <label class="k-checkbox-label">
+          <input
+            class="k-checkbox k-checkbox-md k-rounded-md"
+            :type="'checkbox'"
+            :checked="showRangeLabels"
+            @change="setShowRangeLabels"
+          />
+          Show date range labels
+        </label>
+      </div>
+    </div>
+    <Chart>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem
+          :base-unit="'days'"
+          :max-divisions="20"
+          :labels="labels"
+          :range-labels="rangeLabels"
+        />
+      </ChartCategoryAxis>
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'line'"
+          :style="'smooth'"
+          :data-items="data"
+          :field="'NewCases'"
+          :category-field="'Date'"
+          :markers="markers"
+          :highlight="highlight"
+        />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartSeries,
+  ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+import rawData from './covid-data.json';
+const data = rawData.map((record) => {
+  record.Date = new Date(record.Timestamp);
+  return record;
+});
+
+export default {
+  components: {
+    Chart,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  watch: {
+    showRangeLabels(value) {
+      this.rangeLabels = { format: 'dd MMM yyyy', visible: value };
+    },
+  },
+  mounted() {
+    this.showRangeLabels = true;
+  },
+  data() {
+    return {
+      data: data,
+      markers: {
+        visible: false,
+      },
+      highlight: {
+        visible: false,
+      },
+      labels: {
+        format: 'd/M',
+      },
+      showRangeLabels: false,
+      rangeLabels: undefined,
+    };
+  },
+  methods: {
+    setShowRangeLabels(e) {
+      this.showRangeLabels = e.target.checked;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/axes/scatter/main.js b/vue-options-api-demos/charts/elements/axes/scatter/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/axes/scatter/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/axes/scatter/main.vue b/vue-options-api-demos/charts/elements/axes/scatter/main.vue
new file mode 100644
index 00000000..e6d91dd1
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/axes/scatter/main.vue
@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <Chart>
+      <ChartSeries>
+        <ChartSeriesItem :type="'scatter'" :data-items="seriesData" />
+      </ChartSeries>
+      <ChartXAxis>
+        <ChartXAxisItem :title="{ text: 'Rainfall' }" />
+      </ChartXAxis>
+      <ChartYAxis>
+        <ChartYAxisItem :title="{ text: 'Windspeed' }" />
+      </ChartYAxis>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartXAxis,
+  ChartXAxisItem,
+  ChartYAxis,
+  ChartYAxisItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartXAxis,
+    ChartXAxisItem,
+    ChartYAxis,
+    ChartYAxisItem,
+  },
+  data() {
+    return {
+      seriesData: [
+        [16.4, 5.4],
+        [21.7, 2],
+        [25.4, 3],
+        [19, 2],
+        [10.9, 1],
+        [13.6, 3.2],
+        [10.9, 7.4],
+        [10.9, 0],
+        [10.9, 8.2],
+        [16.4, 0],
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/axes/time-intervals/main.js b/vue-options-api-demos/charts/elements/axes/time-intervals/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/axes/time-intervals/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/axes/time-intervals/main.vue b/vue-options-api-demos/charts/elements/axes/time-intervals/main.vue
new file mode 100644
index 00000000..df32352e
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/axes/time-intervals/main.vue
@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <div class="example-config">
+      <label>Base Unit: </label>
+      <DropDownList
+        :style="{
+          marginLeft: 5,
+        }"
+        :value="baseUnit"
+        @change="onChange"
+        :data-items="baseUnits"
+      />
+    </div>
+    <Chart>
+      <ChartTitle :text="'Daily Max (&deg;C)'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'column'"
+          :field="'TMax'"
+          :category-field="'Date'"
+          :data-items="data"
+        />
+      </ChartSeries>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :base-unit="baseUnit" />
+      </ChartCategoryAxis>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+import {
+  Chart,
+  ChartTitle,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+} from "@progress/kendo-vue-charts";
+import { mockData } from "./weather-data.js";
+
+const data = mockData();
+
+export default {
+  components: {
+    DropDownList,
+    Chart,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+  },
+  data: function () {
+    return {
+      data: data,
+      baseUnit: "weeks",
+      baseUnits: ["days", "weeks", "months"],
+    };
+  },
+  methods: {
+    onChange(event) {
+      this.baseUnit = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/axes/time-intervals/weather-data.js b/vue-options-api-demos/charts/elements/axes/time-intervals/weather-data.js
new file mode 100644
index 00000000..bf815e3d
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/axes/time-intervals/weather-data.js
@@ -0,0 +1,220 @@
+const data = () =>
+[
+  {
+    Timestamp: '2018-01-01T00:00:00.000',
+    TMax: 3.3,
+    TMin: -12,
+    Wind: 5.5,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-02T00:00:00.000',
+    TMax: 5.2,
+    TMin: -10,
+    Wind: 8.1,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-03T00:00:00.000',
+    TMax: 3.2,
+    TMin: -8,
+    Wind: 8.1,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-04T00:00:00.000',
+    TMax: 11,
+    TMin: -7,
+    Wind: 24.5,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-05T00:00:00.000',
+    TMax: 9,
+    TMin: 0,
+    Wind: 21.7,
+    Rain: 1.8
+  },
+  {
+    Timestamp: '2018-01-06T00:00:00.000',
+    TMax: 2,
+    TMin: -1,
+    Wind: 21.7,
+    Rain: 19.7
+  },
+  {
+    Timestamp: '2018-01-07T00:00:00.000',
+    TMax: 2,
+    TMin: -3,
+    Wind: 24.5,
+    Rain: 1.3
+  },
+  {
+    Timestamp: '2018-01-08T00:00:00.000',
+    TMax: 3,
+    TMin: -2,
+    Wind: 16.4,
+    Rain: 0.8
+  },
+  {
+    Timestamp: '2018-01-09T00:00:00.000',
+    TMax: 3,
+    TMin: -7,
+    Wind: 13.6,
+    Rain: 0.3
+  },
+  {
+    Timestamp: '2018-01-10T00:00:00.000',
+    TMax: 2.2,
+    TMin: -8,
+    Wind: 13.6,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-11T00:00:00.000',
+    TMax: 4,
+    TMin: -6,
+    Wind: 16.4,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-12T00:00:00.000',
+    TMax: 5.5,
+    TMin: -6,
+    Wind: 21.7,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-13T00:00:00.000',
+    TMax: 2.7,
+    TMin: -2,
+    Wind: 27.1,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-14T00:00:00.000',
+    TMax: 0,
+    TMin: -6,
+    Wind: 24.5,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-15T00:00:00.000',
+    TMax: -1,
+    TMin: -6,
+    Wind: 27.1,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-16T00:00:00.000',
+    TMax: 0,
+    TMin: -7,
+    Wind: 24.5,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-17T00:00:00.000',
+    TMax: 1,
+    TMin: -7,
+    Wind: 21.7,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-18T00:00:00.000',
+    TMax: 5,
+    TMin: -6,
+    Wind: 13.6,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-19T00:00:00.000',
+    TMax: 6,
+    TMin: -3,
+    Wind: 13.6,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-20T00:00:00.000',
+    TMax: 3,
+    TMin: -3,
+    Wind: 29.9,
+    Rain: 7.2
+  },
+  {
+    Timestamp: '2018-01-21T00:00:00.000',
+    TMax: 2.2,
+    TMin: -7,
+    Wind: 19,
+    Rain: 1.5
+  },
+  {
+    Timestamp: '2018-01-22T00:00:00.000',
+    TMax: 6.2,
+    TMin: -8,
+    Wind: 8.1,
+    Rain: 0.3
+  },
+  {
+    Timestamp: '2018-01-23T00:00:00.000',
+    TMax: 6,
+    TMin: -2,
+    Wind: 16.4,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-24T00:00:00.000',
+    TMax: 2.4,
+    TMin: -2,
+    Wind: 16.4,
+    Rain: 5.1
+  },
+  {
+    Timestamp: '2018-01-25T00:00:00.000',
+    TMax: -1.4,
+    TMin: -9,
+    Wind: 16.4,
+    Rain: 17.2
+  },
+  {
+    Timestamp: '2018-01-26T00:00:00.000',
+    TMax: 0,
+    TMin: -8,
+    Wind: 10.9,
+    Rain: 5.9
+  },
+  {
+    Timestamp: '2018-01-27T00:00:00.000',
+    TMax: -2.7,
+    TMin: -9,
+    Wind: 16.4,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-28T00:00:00.000',
+    TMax: -2.4,
+    TMin: -14,
+    Wind: 19,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-29T00:00:00.000',
+    TMax: -5,
+    TMin: -20,
+    Wind: 13.6,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-30T00:00:00.000',
+    TMax: -5.4,
+    TMin: -22,
+    Wind: 5.5,
+    Rain: 0
+  }
+];
+
+export const mockData = () =>
+  data().map(p => {
+    p.Date = new Date(p.Timestamp);
+    return p;
+  }
+);
diff --git a/vue-options-api-demos/charts/elements/axes/time-series/main.js b/vue-options-api-demos/charts/elements/axes/time-series/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/axes/time-series/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/axes/time-series/main.vue b/vue-options-api-demos/charts/elements/axes/time-series/main.vue
new file mode 100644
index 00000000..d809470f
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/axes/time-series/main.vue
@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTitle :text="'Daily Max (&deg;C)'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'column'"
+          :field="'TMax'"
+          :category-field="'Date'"
+          :data-items="data"
+        />
+      </ChartSeries>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem />
+      </ChartCategoryAxis>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartTitle,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+} from '@progress/kendo-vue-charts';
+import { mockData } from './weather-data.js';
+
+const data = mockData();
+
+export default {
+  components: {
+    Chart,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+  },
+  data: function () {
+    return {
+      data: data,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/axes/time-series/weather-data.js b/vue-options-api-demos/charts/elements/axes/time-series/weather-data.js
new file mode 100644
index 00000000..bf815e3d
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/axes/time-series/weather-data.js
@@ -0,0 +1,220 @@
+const data = () =>
+[
+  {
+    Timestamp: '2018-01-01T00:00:00.000',
+    TMax: 3.3,
+    TMin: -12,
+    Wind: 5.5,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-02T00:00:00.000',
+    TMax: 5.2,
+    TMin: -10,
+    Wind: 8.1,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-03T00:00:00.000',
+    TMax: 3.2,
+    TMin: -8,
+    Wind: 8.1,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-04T00:00:00.000',
+    TMax: 11,
+    TMin: -7,
+    Wind: 24.5,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-05T00:00:00.000',
+    TMax: 9,
+    TMin: 0,
+    Wind: 21.7,
+    Rain: 1.8
+  },
+  {
+    Timestamp: '2018-01-06T00:00:00.000',
+    TMax: 2,
+    TMin: -1,
+    Wind: 21.7,
+    Rain: 19.7
+  },
+  {
+    Timestamp: '2018-01-07T00:00:00.000',
+    TMax: 2,
+    TMin: -3,
+    Wind: 24.5,
+    Rain: 1.3
+  },
+  {
+    Timestamp: '2018-01-08T00:00:00.000',
+    TMax: 3,
+    TMin: -2,
+    Wind: 16.4,
+    Rain: 0.8
+  },
+  {
+    Timestamp: '2018-01-09T00:00:00.000',
+    TMax: 3,
+    TMin: -7,
+    Wind: 13.6,
+    Rain: 0.3
+  },
+  {
+    Timestamp: '2018-01-10T00:00:00.000',
+    TMax: 2.2,
+    TMin: -8,
+    Wind: 13.6,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-11T00:00:00.000',
+    TMax: 4,
+    TMin: -6,
+    Wind: 16.4,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-12T00:00:00.000',
+    TMax: 5.5,
+    TMin: -6,
+    Wind: 21.7,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-13T00:00:00.000',
+    TMax: 2.7,
+    TMin: -2,
+    Wind: 27.1,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-14T00:00:00.000',
+    TMax: 0,
+    TMin: -6,
+    Wind: 24.5,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-15T00:00:00.000',
+    TMax: -1,
+    TMin: -6,
+    Wind: 27.1,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-16T00:00:00.000',
+    TMax: 0,
+    TMin: -7,
+    Wind: 24.5,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-17T00:00:00.000',
+    TMax: 1,
+    TMin: -7,
+    Wind: 21.7,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-18T00:00:00.000',
+    TMax: 5,
+    TMin: -6,
+    Wind: 13.6,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-19T00:00:00.000',
+    TMax: 6,
+    TMin: -3,
+    Wind: 13.6,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-20T00:00:00.000',
+    TMax: 3,
+    TMin: -3,
+    Wind: 29.9,
+    Rain: 7.2
+  },
+  {
+    Timestamp: '2018-01-21T00:00:00.000',
+    TMax: 2.2,
+    TMin: -7,
+    Wind: 19,
+    Rain: 1.5
+  },
+  {
+    Timestamp: '2018-01-22T00:00:00.000',
+    TMax: 6.2,
+    TMin: -8,
+    Wind: 8.1,
+    Rain: 0.3
+  },
+  {
+    Timestamp: '2018-01-23T00:00:00.000',
+    TMax: 6,
+    TMin: -2,
+    Wind: 16.4,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-24T00:00:00.000',
+    TMax: 2.4,
+    TMin: -2,
+    Wind: 16.4,
+    Rain: 5.1
+  },
+  {
+    Timestamp: '2018-01-25T00:00:00.000',
+    TMax: -1.4,
+    TMin: -9,
+    Wind: 16.4,
+    Rain: 17.2
+  },
+  {
+    Timestamp: '2018-01-26T00:00:00.000',
+    TMax: 0,
+    TMin: -8,
+    Wind: 10.9,
+    Rain: 5.9
+  },
+  {
+    Timestamp: '2018-01-27T00:00:00.000',
+    TMax: -2.7,
+    TMin: -9,
+    Wind: 16.4,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-28T00:00:00.000',
+    TMax: -2.4,
+    TMin: -14,
+    Wind: 19,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-29T00:00:00.000',
+    TMax: -5,
+    TMin: -20,
+    Wind: 13.6,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-30T00:00:00.000',
+    TMax: -5.4,
+    TMin: -22,
+    Wind: 5.5,
+    Rain: 0
+  }
+];
+
+export const mockData = () =>
+  data().map(p => {
+    p.Date = new Date(p.Timestamp);
+    return p;
+  }
+);
diff --git a/vue-options-api-demos/charts/elements/chart-area/main.js b/vue-options-api-demos/charts/elements/chart-area/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/chart-area/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/chart-area/main.vue b/vue-options-api-demos/charts/elements/chart-area/main.vue
new file mode 100644
index 00000000..4708a693
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/chart-area/main.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <Chart>
+      <ChartArea :background="'#eee'" :margin="30" />
+      <ChartSeries>
+        <ChartSeriesItem :data-items="data" :name="'Fibonacci'" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartArea,
+  ChartSeries,
+  ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Chart,
+    ChartArea,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      data: [1, 2, 3, 5],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/crosshairs/cursor-values/main.js b/vue-options-api-demos/charts/elements/crosshairs/cursor-values/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/crosshairs/cursor-values/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/crosshairs/cursor-values/main.vue b/vue-options-api-demos/charts/elements/crosshairs/cursor-values/main.vue
new file mode 100644
index 00000000..d4f49ee3
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/crosshairs/cursor-values/main.vue
@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <Chart @plotareahover="onPlotAreaHover">
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem
+          :categories="categories"
+          :crosshair="crosshair"
+        />
+      </ChartCategoryAxis>
+      <ChartValueAxis>
+        <ChartValueAxisItem :crosshair="crosshair" />
+      </ChartValueAxis>
+      <ChartSeries>
+        <ChartSeriesItem :data-items="data" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartCategoryAxisCrosshair,
+  ChartCategoryAxisCrosshairTooltip,
+  ChartValueAxis,
+  ChartValueAxisItem,
+  ChartSeries,
+  ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartCategoryAxisCrosshair,
+    ChartCategoryAxisCrosshairTooltip,
+    ChartValueAxis,
+    ChartValueAxisItem,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      data: [1, 2, 3],
+      categories: ['A', 'B', 'C'],
+      crosshair: {
+        visible: true,
+        tooltip: {
+          visible: true,
+          format: '#.##',
+        },
+      },
+    };
+  },
+  methods: {
+    onPlotAreaHover(args) {
+      console.log(`Category: ${args.category}`);
+      console.log(`Value: ${args.value}`);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/crosshairs/overview/main.js b/vue-options-api-demos/charts/elements/crosshairs/overview/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/crosshairs/overview/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/crosshairs/overview/main.vue b/vue-options-api-demos/charts/elements/crosshairs/overview/main.vue
new file mode 100644
index 00000000..7272450d
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/crosshairs/overview/main.vue
@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <Chart>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :categories="categories">
+          <ChartCategoryAxisCrosshair>
+            <ChartCategoryAxisCrosshairTooltip />
+          </ChartCategoryAxisCrosshair>
+        </ChartCategoryAxisItem>
+      </ChartCategoryAxis>
+      <ChartValueAxis>
+        <ChartValueAxisItem :crosshair="crosshair" />
+      </ChartValueAxis>
+      <ChartSeries>
+        <ChartSeriesItem :data-items="data" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartCategoryAxisCrosshair,
+  ChartCategoryAxisCrosshairTooltip,
+  ChartValueAxis,
+  ChartValueAxisItem,
+  ChartSeries,
+  ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartCategoryAxisCrosshair,
+    ChartCategoryAxisCrosshairTooltip,
+    ChartValueAxis,
+    ChartValueAxisItem,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      data: [1, 2, 3],
+      categories: ['A', 'B', 'C'],
+      crosshair: {
+        visible: true,
+        tooltip: {
+          visible: true,
+          format: '#.##',
+        },
+      },
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/error-bars/array-values/main.js b/vue-options-api-demos/charts/elements/error-bars/array-values/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/error-bars/array-values/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/error-bars/array-values/main.vue b/vue-options-api-demos/charts/elements/error-bars/array-values/main.vue
new file mode 100644
index 00000000..a4594733
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/error-bars/array-values/main.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <Chart>
+      <ChartSeries>
+        <ChartSeriesItem :data-items="data" :error-bars="errorBars" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      data: [1, 3, 2],
+      errorBars: { value: [0.5, 1] },
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/error-bars/custom/main.js b/vue-options-api-demos/charts/elements/error-bars/custom/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/error-bars/custom/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/error-bars/custom/main.vue b/vue-options-api-demos/charts/elements/error-bars/custom/main.vue
new file mode 100644
index 00000000..10b2d7d0
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/error-bars/custom/main.vue
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <Chart>
+      <ChartSeries>
+        <ChartSeriesItem :data-items="data" :error-bars="errorBars" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data() {
+    return {
+      data: [1, 3, 2],
+      errorBars: {
+        value: function (data) {
+          const value = data.value;
+          const lowPercentage = value * 0.05;
+          const highPercentage = value * 0.1;
+
+          return [lowPercentage, highPercentage];
+        },
+      },
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/error-bars/numeric-values/main.js b/vue-options-api-demos/charts/elements/error-bars/numeric-values/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/error-bars/numeric-values/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/error-bars/numeric-values/main.vue b/vue-options-api-demos/charts/elements/error-bars/numeric-values/main.vue
new file mode 100644
index 00000000..487bbd27
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/error-bars/numeric-values/main.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <Chart>
+      <ChartSeries>
+        <ChartSeriesItem :data-items="data" :error-bars="errorBars" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      data: [1, 3, 2],
+      errorBars: { value: 1 },
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/error-bars/overview/main.js b/vue-options-api-demos/charts/elements/error-bars/overview/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/error-bars/overview/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/error-bars/overview/main.vue b/vue-options-api-demos/charts/elements/error-bars/overview/main.vue
new file mode 100644
index 00000000..a6c042a2
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/error-bars/overview/main.vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <Chart>
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'line'"
+          :data-items="data"
+          :field="'value'"
+          :error-low-field="'low'"
+          :error-high-field="'high'"
+        />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      data: [
+        {
+          value: 4.743,
+          low: 4.5,
+          high: 5,
+        },
+        {
+          value: 7.295,
+          low: 7,
+          high: 8,
+        },
+        {
+          value: 6.376,
+          low: 5,
+          high: 6.5,
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/error-bars/percentage-values/main.js b/vue-options-api-demos/charts/elements/error-bars/percentage-values/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/error-bars/percentage-values/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/error-bars/percentage-values/main.vue b/vue-options-api-demos/charts/elements/error-bars/percentage-values/main.vue
new file mode 100644
index 00000000..38ad4dd7
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/error-bars/percentage-values/main.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <Chart>
+      <ChartSeries>
+        <ChartSeriesItem :data-items="data" :error-bars="errorBars" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      data: [1, 3, 2],
+      errorBars: { value: 'percentage(20)' },
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/error-bars/scatter/main.js b/vue-options-api-demos/charts/elements/error-bars/scatter/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/error-bars/scatter/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/error-bars/scatter/main.vue b/vue-options-api-demos/charts/elements/error-bars/scatter/main.vue
new file mode 100644
index 00000000..8acc67d4
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/error-bars/scatter/main.vue
@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <Chart>
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'scatterLine'"
+          :data-items="data"
+          :x-error-low-field="'xLow'"
+          :x-error-high-field="'xHigh'"
+          :y-error-low-field="'yLow'"
+          :y-error-high-field="'yHigh'"
+        />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      data: [
+        { x: 6.4, y: 13.4, xLow: 5, xHigh: 7, yLow: 12, yHigh: 14 },
+        { x: 1.7, y: 11, xLow: 1, xHigh: 3, yLow: 11, yHigh: 14 },
+        { x: 5.4, y: 8, xLow: 3, xHigh: 6, yLow: 5, yHigh: 8 },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/error-bars/statistical-values/main.js b/vue-options-api-demos/charts/elements/error-bars/statistical-values/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/error-bars/statistical-values/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/error-bars/statistical-values/main.vue b/vue-options-api-demos/charts/elements/error-bars/statistical-values/main.vue
new file mode 100644
index 00000000..a2ae07a9
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/error-bars/statistical-values/main.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <Chart>
+      <ChartSeries>
+        <ChartSeriesItem :data-items="data" :error-bars="{ value: 'stderr' }" />
+        <ChartSeriesItem
+          :data-items="data"
+          :error-bars="{ value: 'stddev(0.5)' }"
+        />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      data: [1, 3, 2],
+      errorBars: { value: 'percentage(20)' },
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/labels/override-axis-labels/main.js b/vue-options-api-demos/charts/elements/labels/override-axis-labels/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/labels/override-axis-labels/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/labels/override-axis-labels/main.vue b/vue-options-api-demos/charts/elements/labels/override-axis-labels/main.vue
new file mode 100644
index 00000000..ce19edf3
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/labels/override-axis-labels/main.vue
@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <Chart>
+      <ChartValueAxis>
+        <ChartValueAxisItem :labels="{ content: labelContent }" />
+      </ChartValueAxis>
+      <ChartSeries>
+        <ChartSeriesItem :type="'line'" :data-items="seriesData" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartValueAxis,
+  ChartValueAxisItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartValueAxis,
+    ChartValueAxisItem,
+  },
+  data: function () {
+    return {
+      seriesData: [20, 40, 45, 30, 50],
+      suffix: ' ms',
+    };
+  },
+  methods: {
+    labelContent(e) {
+      return e.value + this.suffix;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/labels/override-series-labels/main.js b/vue-options-api-demos/charts/elements/labels/override-series-labels/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/labels/override-series-labels/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/labels/override-series-labels/main.vue b/vue-options-api-demos/charts/elements/labels/override-series-labels/main.vue
new file mode 100644
index 00000000..a22bd145
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/labels/override-series-labels/main.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <Chart>
+      <ChartSeries>
+        <ChartSeriesItem :type="'line'" :data-items="seriesData">
+          <ChartSeriesLabels :content="labelContent" />
+        </ChartSeriesItem>
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartSeriesLabels,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartSeriesLabels,
+  },
+  data: function () {
+    return {
+      seriesData: [20, 40, 45, 30, 50],
+      suffix: ' ms',
+    };
+  },
+  methods: {
+    labelContent(e) {
+      return e.value + this.suffix;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/labels/style-axis/main.js b/vue-options-api-demos/charts/elements/labels/style-axis/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/labels/style-axis/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/labels/style-axis/main.vue b/vue-options-api-demos/charts/elements/labels/style-axis/main.vue
new file mode 100644
index 00000000..9b0745f5
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/labels/style-axis/main.vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <Chart>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem
+          :categories="categories"
+          :labels="{ color: '#0a0' }"
+        />
+      </ChartCategoryAxis>
+      <ChartValueAxis>
+        <ChartValueAxisItem :labels="valueAxisLabels" />
+      </ChartValueAxis>
+      <ChartSeries>
+        <ChartSeriesItem :type="'line'" :data-items="seriesData" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartValueAxis,
+  ChartValueAxisItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartValueAxis,
+    ChartValueAxisItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+  },
+  data: function () {
+    return {
+      categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
+      seriesData: [20, 40, 45, 30, 50],
+      valueAxisLabels: {
+        padding: 3,
+        font: 'bold 16px Arial, sans-serif',
+      },
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/labels/style-currency-axis/main.js b/vue-options-api-demos/charts/elements/labels/style-currency-axis/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/labels/style-currency-axis/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/labels/style-currency-axis/main.vue b/vue-options-api-demos/charts/elements/labels/style-currency-axis/main.vue
new file mode 100644
index 00000000..32668f05
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/labels/style-currency-axis/main.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <Chart>
+      <ChartAxisDefaults :labels="{ format: 'c0' }" />
+      <ChartSeries>
+        <ChartSeriesItem :type="'line'" :data-items="seriesData" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartAxisDefaults,
+  ChartSeries,
+  ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartAxisDefaults,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      seriesData: [2034, 40124, 45234, 30234, 50234],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/labels/style-currency-series/main.js b/vue-options-api-demos/charts/elements/labels/style-currency-series/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/labels/style-currency-series/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/labels/style-currency-series/main.vue b/vue-options-api-demos/charts/elements/labels/style-currency-series/main.vue
new file mode 100644
index 00000000..126c1314
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/labels/style-currency-series/main.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <Chart>
+      <ChartSeries>
+        <ChartSeriesItem :type="'line'" :data-items="seriesData">
+          <ChartSeriesLabels :format="'c0'" />
+        </ChartSeriesItem>
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartSeriesLabels,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartSeriesLabels,
+  },
+  data: function () {
+    return {
+      seriesData: [2034, 40124, 45234, 30234, 50234],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/labels/style-scatter-series/main.js b/vue-options-api-demos/charts/elements/labels/style-scatter-series/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/labels/style-scatter-series/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/labels/style-scatter-series/main.vue b/vue-options-api-demos/charts/elements/labels/style-scatter-series/main.vue
new file mode 100644
index 00000000..4d65ff59
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/labels/style-scatter-series/main.vue
@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <Chart>
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'scatter'"
+          :data-items="weatherData"
+          :x-field="'rainfall'"
+          :y-field="'windSpeed'"
+        >
+          <ChartSeriesLabels :format="'{1:N1} mm; {0:N1} km/h'" />
+        </ChartSeriesItem>
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartSeriesLabels,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartSeriesLabels,
+  },
+  data: function () {
+    return {
+      weatherData: [
+        { windSpeed: 16.4, rainfall: 5.4 },
+        { windSpeed: 21.7, rainfall: 2 },
+        { windSpeed: 25.4, rainfall: 3 },
+        { windSpeed: 19, rainfall: 2 },
+        { windSpeed: 10.9, rainfall: 1 },
+        { windSpeed: 13.6, rainfall: 3.2 },
+        { windSpeed: 10.9, rainfall: 7.4 },
+        { windSpeed: 10.9, rainfall: 0 },
+        { windSpeed: 10.9, rainfall: 8.2 },
+        { windSpeed: 16.4, rainfall: 0 },
+        { windSpeed: 16.4, rainfall: 1.8 },
+        { windSpeed: 13.6, rainfall: 0.3 },
+        { windSpeed: 29.9, rainfall: 0 },
+        { windSpeed: 27.1, rainfall: 2.3 },
+        { windSpeed: 16.4, rainfall: 0 },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/labels/style-series/main.js b/vue-options-api-demos/charts/elements/labels/style-series/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/labels/style-series/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/labels/style-series/main.vue b/vue-options-api-demos/charts/elements/labels/style-series/main.vue
new file mode 100644
index 00000000..299853ad
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/labels/style-series/main.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <Chart>
+      <ChartSeries>
+        <ChartSeriesItem :type="'line'" :data-items="seriesData">
+          <ChartSeriesLabels
+            :font="font"
+            :background="background"
+            :visible="true"
+          />
+        </ChartSeriesItem>
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartSeriesLabels,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartSeriesLabels,
+  },
+  data: function () {
+    return {
+      seriesData: [20, 40, 45, 30, 50],
+      font: 'bold 16px Arial, sans-serif',
+      background: 'none',
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/labels/visual-axis/main.js b/vue-options-api-demos/charts/elements/labels/visual-axis/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/labels/visual-axis/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/labels/visual-axis/main.vue b/vue-options-api-demos/charts/elements/labels/visual-axis/main.vue
new file mode 100644
index 00000000..07fe4de2
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/labels/visual-axis/main.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <Chart>
+      <ChartValueAxis>
+        <ChartValueAxisItem
+          :labels="{
+            visible: true,
+            visual: labelVisual,
+          }"
+        />
+      </ChartValueAxis>
+      <ChartSeries>
+        <ChartSeriesItem :type="'line'" :data-items="seriesData" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartValueAxis,
+  ChartValueAxisItem,
+  ChartSeries,
+  ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+import { Group, Path } from '@progress/kendo-drawing';
+
+export default {
+  components: {
+    Chart,
+    ChartValueAxis,
+    ChartValueAxisItem,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      seriesData: [2034, 40124, 45234, 30234, 50234],
+    };
+  },
+  methods: {
+    labelVisual(e) {
+      const defaultLabel = e.createVisual();
+
+      if (e.value < 40000) {
+        return defaultLabel;
+      }
+
+      const path = new Path({
+        stroke: {
+          color: 'red',
+          width: 1,
+        },
+      });
+      const bbox = defaultLabel.bbox();
+      path.moveTo(bbox.bottomLeft()).lineTo(bbox.bottomRight());
+      const group = new Group();
+      group.append(defaultLabel, path);
+      return group;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/labels/visual-series/main.js b/vue-options-api-demos/charts/elements/labels/visual-series/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/labels/visual-series/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/labels/visual-series/main.vue b/vue-options-api-demos/charts/elements/labels/visual-series/main.vue
new file mode 100644
index 00000000..b02ee946
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/labels/visual-series/main.vue
@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <Chart>
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'line'"
+          :data-items="seriesData"
+          :labels="{
+            visible: true,
+            visual: labelVisual,
+          }"
+        />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+import { Group, Path } from '@progress/kendo-drawing';
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      seriesData: [2034, 40124, 45234, 30234, 50234],
+    };
+  },
+  methods: {
+    labelVisual(e) {
+      const defaultLabel = e.createVisual();
+
+      if (e.value < 40000) {
+        return defaultLabel;
+      }
+
+      const path = new Path({
+        stroke: {
+          color: 'red',
+          width: 1,
+        },
+      });
+      const bbox = defaultLabel.bbox();
+      path.moveTo(bbox.bottomLeft()).lineTo(bbox.bottomRight());
+      const group = new Group();
+      group.append(defaultLabel, path);
+      return group;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/legend/click-legend/main.js b/vue-options-api-demos/charts/elements/legend/click-legend/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/legend/click-legend/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/legend/click-legend/main.vue b/vue-options-api-demos/charts/elements/legend/click-legend/main.vue
new file mode 100644
index 00000000..e60918aa
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/legend/click-legend/main.vue
@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <Chart @legenditemclick="onLegendItemClick">
+      <ChartLegend />
+      <ChartSeries>
+        <ChartSeriesItem
+          :name="'Fibonacci'"
+          :visible="seriesVisible"
+          :data-items="seriesData"
+        />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartLegend,
+  ChartSeries,
+  ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartLegend,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      seriesData: [1, 2, 3, 5],
+      seriesVisible: true,
+    };
+  },
+  methods: {
+    onLegendItemClick() {
+      this.seriesVisible = !this.seriesVisible;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/legend/custom-legend-position/main.js b/vue-options-api-demos/charts/elements/legend/custom-legend-position/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/legend/custom-legend-position/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/legend/custom-legend-position/main.vue b/vue-options-api-demos/charts/elements/legend/custom-legend-position/main.vue
new file mode 100644
index 00000000..caf7bae0
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/legend/custom-legend-position/main.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <Chart>
+      <ChartLegend :position="'custom'" :offset-x="40" :offset-y="25" />
+      <ChartSeries>
+        <ChartSeriesItem :name="'Fibonacci'" :data-items="seriesData" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartLegend,
+  ChartSeries,
+  ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartLegend,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      seriesData: [1, 2, 3, 5],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/legend/hide-legend/main.js b/vue-options-api-demos/charts/elements/legend/hide-legend/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/legend/hide-legend/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/legend/hide-legend/main.vue b/vue-options-api-demos/charts/elements/legend/hide-legend/main.vue
new file mode 100644
index 00000000..929a9f6a
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/legend/hide-legend/main.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <Chart>
+      <ChartLegend :visible="false" />
+      <ChartSeries>
+        <ChartSeriesItem :name="'Fibonacci'" :data-items="seriesData" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartLegend,
+  ChartSeries,
+  ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartLegend,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      seriesData: [1, 2, 3, 5],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/legend/legend-items/main.js b/vue-options-api-demos/charts/elements/legend/legend-items/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/legend/legend-items/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/legend/legend-items/main.vue b/vue-options-api-demos/charts/elements/legend/legend-items/main.vue
new file mode 100644
index 00000000..f15a2174
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/legend/legend-items/main.vue
@@ -0,0 +1,91 @@
+<template>
+  <Chart>
+     <ChartLegend :position="'left'" />
+     <ChartCategoryAxis>
+       <ChartCategoryAxisItem :categories="categories" />
+     </ChartCategoryAxis>
+     <ChartSeries>
+         <ChartSeriesItem v-for="(item, idx) in series"
+            :key="idx"
+            :type="item.type"
+            :data-items="item.data"
+            :name="item.name"
+            :markers="item.markers"
+            :legendItem="item.legendItem"
+          />
+     </ChartSeries>
+   </Chart>
+ </template>
+ <script>
+ import {
+   Chart,
+   ChartLegend,
+   ChartSeries,
+   ChartCategoryAxis,
+   ChartCategoryAxisItem,
+   ChartSeriesItem
+    } from '@progress/kendo-vue-charts';
+
+ export default {
+     components: {
+      Chart,
+      ChartLegend,
+      ChartCategoryAxis,
+      ChartCategoryAxisItem,
+      ChartSeries,
+      ChartSeriesItem
+     },
+     data: function () {
+         return {
+            categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
+            series: [{
+              name: 'Series 1',
+              type: 'line',
+              data: [
+                  3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.89, 8.238, 9.552, 6.855,
+              ],
+            },
+            {
+                name: 'Series 2',
+                type: 'line',
+                data: [
+                    4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3,
+                ],
+                markers: { type: 'square' },
+            },
+            {
+                name: 'Series 3',
+                type: 'line',
+                data: [
+                    5.743, 8.295, 8.175, 7.376, 9.153, 9.535, 6.247, 1.832, 5.3, 5.3,
+                ],
+                markers: { type: 'roundedRect', visible: false },
+            },
+            {
+                name: 'Series 4',
+                type: 'area',
+                data: [
+                    0.01, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.69, 2.995,
+                ],
+                markers: { visible: false },
+            },
+            {
+                name: 'Custom',
+                type: 'line',
+                data: [2, 1.2, 4, 2, 5, 6, -4, -6, -4, -6],
+                markers: { visible: false },
+                legendItem: {
+                    type: 'area',
+                    area: {
+                        opacity: 0.5,
+                    },
+                    highlight: {
+                        visible: false,
+                    },
+                },
+            }]
+         };
+     }
+ };
+
+ </script>
diff --git a/vue-options-api-demos/charts/elements/legend/overview/main.js b/vue-options-api-demos/charts/elements/legend/overview/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/legend/overview/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/legend/overview/main.vue b/vue-options-api-demos/charts/elements/legend/overview/main.vue
new file mode 100644
index 00000000..2cc02fa7
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/legend/overview/main.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <Chart>
+      <ChartLegend :position="'bottom'" :orientation="'horizontal'" />
+      <ChartSeries>
+        <ChartSeriesItem :name="'Fibonacci'" :data-items="seriesData" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartLegend,
+  ChartSeries,
+  ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartLegend,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      seriesData: [1, 2, 3, 5],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/legend/title/main.js b/vue-options-api-demos/charts/elements/legend/title/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/legend/title/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/legend/title/main.vue b/vue-options-api-demos/charts/elements/legend/title/main.vue
new file mode 100644
index 00000000..d1f3a59a
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/legend/title/main.vue
@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTitle :text="'Gross domestic product growth /GDP annual %/'" />
+      <ChartLegend :position="'right'">
+        <ChartLegendTitle :text="'Countries'" :font="'18px Arial'" />
+      </ChartLegend>
+      <ChartSeries>
+        <ChartSeriesItem
+          v-for="(item, index) in series"
+          :name="item.name"
+          :data-items="item.data"
+          :type="'line'"
+          :key="index"
+        />
+      </ChartSeries>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :categories="categories" />
+      </ChartCategoryAxis>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartLegend,
+  ChartLegendTitle,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartTitle,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartLegend,
+    ChartLegendTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartTitle,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+  },
+  data: function () {
+    return {
+      series: [
+        {
+          name: 'India',
+          data: [
+            3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.89, 8.238, 9.552, 6.855,
+          ],
+        },
+        {
+          name: 'Russian Federation',
+          data: [
+            4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3,
+          ],
+        },
+        {
+          name: 'Germany',
+          data: [
+            0.01, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.69, 2.995,
+          ],
+        },
+      ],
+      categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/notes/appearance/main.js b/vue-options-api-demos/charts/elements/notes/appearance/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/notes/appearance/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/notes/appearance/main.vue b/vue-options-api-demos/charts/elements/notes/appearance/main.vue
new file mode 100644
index 00000000..0b1a6b49
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/notes/appearance/main.vue
@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <Chart>
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'line'"
+          :data-items="seriesData"
+          :field="'value'"
+          :note-text-field="'extremum'"
+          :notes="notes"
+        />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      seriesData: [
+        { value: 2 },
+        { value: 4, extremum: 'Max' },
+        { value: 3 },
+        { value: 1, extremum: 'Min' },
+      ],
+      notes: {
+        label: {
+          position: 'outside',
+        },
+        line: {
+          length: 20,
+        },
+        icon: {
+          type: 'square',
+        },
+        position: 'bottom',
+      },
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/notes/axis-notes/main.js b/vue-options-api-demos/charts/elements/notes/axis-notes/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/notes/axis-notes/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/notes/axis-notes/main.vue b/vue-options-api-demos/charts/elements/notes/axis-notes/main.vue
new file mode 100644
index 00000000..fe13c6c9
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/notes/axis-notes/main.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <Chart>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :notes="categoryNotes" />
+      </ChartCategoryAxis>
+      <ChartValueAxis>
+        <ChartValueAxisItem :notes="valueNotes" />
+      </ChartValueAxis>
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'line'"
+          :data-items="seriesData"
+          :field="'value'"
+        />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartValueAxis,
+  ChartValueAxisItem,
+  ChartSeries,
+  ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+
+
+export default {
+  components: {
+    Chart,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartValueAxis,
+    ChartValueAxisItem,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      seriesData: [{ value: 2 }, { value: 4 }, { value: 3 }, { value: 1 }],
+      categoryNotes: {
+        data: [
+          {
+            value: 1,
+            label: {
+              text: "Max",
+            },
+          },
+          {
+            value: 3,
+            label: {
+              text: "Min",
+            },
+          },
+        ],
+      },
+      valueNotes: {
+        data: [
+          {
+            value: 4,
+            text: "Max",
+          },
+          {
+            value: 1,
+            text: "Min",
+          },
+        ],
+        label: {
+          content: (args) => args.dataItem.text,
+        },
+      },
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/notes/overview/main.js b/vue-options-api-demos/charts/elements/notes/overview/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/notes/overview/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/notes/overview/main.vue b/vue-options-api-demos/charts/elements/notes/overview/main.vue
new file mode 100644
index 00000000..893515ec
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/notes/overview/main.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <Chart>
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'line'"
+          :data-items="seriesData"
+          :field="'value'"
+          :note-text-field="'extremum'"
+        />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      seriesData: [
+        {
+          value: 2,
+        },
+        {
+          value: 4,
+          extremum: 'Max',
+        },
+        {
+          value: 3,
+        },
+        {
+          value: 1,
+          extremum: 'Min',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/panes/clip/main.js b/vue-options-api-demos/charts/elements/panes/clip/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/panes/clip/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/panes/clip/main.vue b/vue-options-api-demos/charts/elements/panes/clip/main.vue
new file mode 100644
index 00000000..1bd8e359
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/panes/clip/main.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <Chart>
+      <ChartPanes>
+        <ChartPane :name="'top'" :clip="false" :title="'Clipping Disabled'" />
+        <ChartPane :name="'bottom'" :title="'Clipping enabled (default)'" />
+      </ChartPanes>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :justified="true" />
+      </ChartCategoryAxis>
+      <ChartValueAxis>
+        <ChartValueAxisItem :name="'top'" />
+        <ChartValueAxisItem :name="'bottom'" :pane="'bottom'" />
+      </ChartValueAxis>
+      <ChartSeries>
+        <ChartSeriesItem :type="'line'" :data-items="seriesData" />
+        <ChartSeriesItem
+          :type="'line'"
+          :data-items="seriesData"
+          :axis="'bottom'"
+        />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartPane,
+  ChartPanes,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartValueAxis,
+  ChartValueAxisItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartPane,
+    ChartPanes,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartValueAxis,
+    ChartValueAxisItem,
+  },
+  data: function () {
+    return {
+      seriesData: [1, 2, 3, 5],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/panes/default/main.js b/vue-options-api-demos/charts/elements/panes/default/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/panes/default/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/panes/default/main.vue b/vue-options-api-demos/charts/elements/panes/default/main.vue
new file mode 100644
index 00000000..05cfe528
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/panes/default/main.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <Chart>
+      <ChartPaneDefaults :margin="10">
+        <ChartPaneDefaultsTitle :font="'700 18px sans-serif'" />
+      </ChartPaneDefaults>
+      <ChartPanes>
+        <ChartPane :name="'top'" :title="'Sales'" />
+        <ChartPane :name="'bottom'" :title="'Inventory'" />
+      </ChartPanes>
+      <ChartValueAxis>
+        <ChartValueAxisItem :name="'top'" />
+        <ChartValueAxisItem :name="'bottom'" :pane="'bottom'" />
+      </ChartValueAxis>
+      <ChartSeries>
+        <ChartSeriesItem :type="'line'" :data-items="seriesData[0]" />
+        <ChartSeriesItem
+          :type="'line'"
+          :data-items="seriesData[1]"
+          :axis="'bottom'"
+        />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartPane,
+  ChartPaneDefaults,
+  ChartPaneDefaultsTitle,
+  ChartPanes,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartValueAxis,
+  ChartValueAxisItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartPane,
+    ChartPaneDefaults,
+    ChartPaneDefaultsTitle,
+    ChartPanes,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartValueAxis,
+    ChartValueAxisItem,
+  },
+  data: function () {
+    return {
+      seriesData: [
+        [1, 2, 3, 5],
+        [5, 4, 3, 1],
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/panes/overview/main.js b/vue-options-api-demos/charts/elements/panes/overview/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/panes/overview/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/panes/overview/main.vue b/vue-options-api-demos/charts/elements/panes/overview/main.vue
new file mode 100644
index 00000000..25661369
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/panes/overview/main.vue
@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <Chart>
+      <ChartPanes>
+        <ChartPane :name="'top'" />
+        <ChartPane :name="'bottom'" :height="100" />
+      </ChartPanes>
+      <ChartValueAxis>
+        <ChartValueAxisItem :name="'top'" />
+        <ChartValueAxisItem :name="'bottom'" :pane="'bottom'" />
+      </ChartValueAxis>
+      <ChartSeries>
+        <ChartSeriesItem :data-items="seriesData[0]" />
+        <ChartSeriesItem
+          :type="'line'"
+          :data-items="seriesData[1]"
+          :axis="'bottom'"
+        />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartPanes,
+  ChartPane,
+  ChartValueAxis,
+  ChartValueAxisItem,
+  ChartSeries,
+  ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartPanes,
+    ChartPane,
+    ChartValueAxis,
+    ChartValueAxisItem,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      seriesData: [
+        [1, 2, 3, 5],
+        [0, 1, 0, 1],
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/plot-area/main.js b/vue-options-api-demos/charts/elements/plot-area/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/plot-area/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/plot-area/main.vue b/vue-options-api-demos/charts/elements/plot-area/main.vue
new file mode 100644
index 00000000..ee5bc33c
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/plot-area/main.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <Chart>
+      <ChartPlotArea :background="'#888'" />
+      <ChartSeries>
+        <ChartSeriesItem :data-items="seriesData" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartPlotArea,
+  ChartSeries,
+  ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartPlotArea,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      seriesData: [1, 2, 3, 5],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/plot-bands/custom/main.js b/vue-options-api-demos/charts/elements/plot-bands/custom/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/plot-bands/custom/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/plot-bands/custom/main.vue b/vue-options-api-demos/charts/elements/plot-bands/custom/main.vue
new file mode 100644
index 00000000..3d40f1c9
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/plot-bands/custom/main.vue
@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <Chart @render="onRender">
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem
+          :categories="categories"
+          :name="'categoryAxis'"
+        />
+      </ChartCategoryAxis>
+      <ChartValueAxis>
+        <ChartValueAxisItem :name="'valueAxis'" />
+      </ChartValueAxis>
+      <ChartSeries>
+        <ChartSeriesItem :data-items="series" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartValueAxis,
+  ChartValueAxisItem,
+  ChartSeries,
+  ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+import { Path, Group, Text } from '@progress/kendo-drawing';
+
+
+export default {
+  components: {
+    Chart,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartValueAxis,
+    ChartValueAxisItem,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data() {
+    return {
+      categories: ['A', 'B', 'C'],
+      series: [1, 2, 3],
+      plotValue: 3,
+    };
+  },
+  methods: {
+    onRender(args) {
+      const chart = args.target.chartInstance();
+      if (!chart) {
+        return;
+      } // get the axes
+
+      const valueAxis = chart.findAxisByName('valueAxis');
+      const categoryAxis = chart.findAxisByName('categoryAxis'); // get the coordinates of the value at which the plot band will be rendered
+
+      const valueSlot = valueAxis.slot(this.plotValue); // get the coordinates of the entire category axis range
+
+      const range = categoryAxis.range();
+      const categorySlot = categoryAxis.slot(range.min, range.max); // draw the plot band based on the found coordinates
+
+      const line = new Path({
+        stroke: {
+          color: 'red',
+          width: 3,
+        },
+      })
+        .moveTo(valueSlot.origin.x, valueSlot.origin.y)
+        .lineTo(categorySlot.topRight().x, valueSlot.origin.y);
+      const label = new Text('MAX', [0, 0], {
+        fill: {
+          color: 'red',
+        },
+        font: '14px sans',
+      });
+      const bbox = label.bbox();
+      label.position([
+        categorySlot.topRight().x - bbox.size.width,
+        valueSlot.origin.y - bbox.size.height,
+      ]);
+      const group = new Group();
+      group.append(line, label); // draw on the surface
+
+      chart.surface.draw(group);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/plot-bands/labels/main.js b/vue-options-api-demos/charts/elements/plot-bands/labels/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/plot-bands/labels/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/plot-bands/labels/main.vue b/vue-options-api-demos/charts/elements/plot-bands/labels/main.vue
new file mode 100644
index 00000000..df88aa8f
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/plot-bands/labels/main.vue
@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <Chart>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem
+          :categories="['A', 'B', 'C']"
+          :plotBands="categoryPlotBands"
+        />
+      </ChartCategoryAxis>
+      <ChartValueAxis>
+        <ChartValueAxisItem :plot-bands="valuePlotBands" />
+      </ChartValueAxis>
+      <ChartSeries>
+        <ChartSeriesItem :data-items="[1, 2, 3]" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartValueAxis,
+  ChartValueAxisItem,
+  ChartSeries,
+  ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartValueAxis,
+    ChartValueAxisItem,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data() {
+    return {
+      categoryPlotBands: [
+        {
+          from: 1,
+          to: 2,
+          color: '#ffd246',
+          opacity: 0.8,
+          label: {
+            text: 'Yellow Zone',
+            font: '18px sans-serif',
+            color: '#444',
+            margin: 5,
+          },
+        },
+      ],
+      valuePlotBands: [
+        {
+          from: 2,
+          to: 3,
+          color: '#78d237',
+          opacity: 0.8,
+          label: {
+            text: 'Green Zone',
+            font: '18px sans-serif',
+            color: '#444',
+            margin: 5,
+          },
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/plot-bands/overview/main.js b/vue-options-api-demos/charts/elements/plot-bands/overview/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/plot-bands/overview/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/plot-bands/overview/main.vue b/vue-options-api-demos/charts/elements/plot-bands/overview/main.vue
new file mode 100644
index 00000000..93529df9
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/plot-bands/overview/main.vue
@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <Chart>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem
+          :categories="['A', 'B', 'C']"
+          :plotBands="categoryPlotBands"
+        />
+      </ChartCategoryAxis>
+      <ChartValueAxis>
+        <ChartValueAxisItem :plot-bands="valuePlotBands" />
+      </ChartValueAxis>
+      <ChartSeries>
+        <ChartSeriesItem :data-items="[1, 2, 3]" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartValueAxis,
+  ChartValueAxisItem,
+  ChartSeries,
+  ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartValueAxis,
+    ChartValueAxisItem,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data() {
+    return {
+      categoryPlotBands: [
+        {
+          from: 1,
+          to: 2,
+          color: '#ffd246',
+          opacity: 0.8,
+        },
+      ],
+      valuePlotBands: [
+        {
+          from: 2,
+          to: 3,
+          color: '#78d237',
+          opacity: 0.8,
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/selection/navigator/main.js b/vue-options-api-demos/charts/elements/selection/navigator/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/selection/navigator/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/selection/navigator/main.vue b/vue-options-api-demos/charts/elements/selection/navigator/main.vue
new file mode 100644
index 00000000..5141b965
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/selection/navigator/main.vue
@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <Chart @selectend="onSelectEnd">
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :categories="categories" :min="min" :max="max" />
+        <ChartCategoryAxisItem
+          :categories="categories"
+          :name="'navigatorAxis'"
+          :labels="navigatorStep"
+          :major-grid-lines="navigatorStep"
+          :major-ticks="navigatorStep"
+          :pane="'navigator'"
+          :select="{
+            from: min,
+            to: max,
+          }"
+        />
+      </ChartCategoryAxis>
+      <ChartPanes>
+        <ChartPane />
+        <ChartPane :name="'navigator'" :height="100" />
+      </ChartPanes>
+      <ChartValueAxis>
+        <ChartValueAxisItem />
+        <ChartValueAxisItem :name="'valueNavigatorAxis'" :pane="'navigator'" />
+      </ChartValueAxis>
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'line'"
+          :line-style="'smooth'"
+          :data-items="data"
+          :markers="{
+            visible: false,
+          }"
+        />
+        <ChartSeriesItem
+          :type="'area'"
+          :line-style="'smooth'"
+          :data-items="data"
+          :axis="'valueNavigatorAxis'"
+          :category-axis="'navigatorAxis'"
+        />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartPanes,
+  ChartPane,
+  ChartValueAxis,
+  ChartValueAxisItem,
+  ChartSeries,
+  ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartPanes,
+    ChartPane,
+    ChartValueAxis,
+    ChartValueAxisItem,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  mounted() {
+    for (let i = 0; i < 200; i++) {
+      this.categories.push(this.startYear + i);
+      this.data.push(Math.floor(Math.random() * 200));
+    }
+  },
+  computed: {
+    navigatorStep() {
+      return Math.floor(this.categories.length / 10);
+    },
+  },
+  data() {
+    return {
+      data: [],
+      categories: [],
+      startYear: 2000,
+      min: 0,
+      max: 20,
+      step: 0,
+    };
+  },
+  methods: {
+    onSelectEnd(args) {
+      this.min = args.from;
+      this.max = args.to;
+      this.step = Math.floor((args.to - args.from) / 10);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/selection/overview/main.js b/vue-options-api-demos/charts/elements/selection/overview/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/selection/overview/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/selection/overview/main.vue b/vue-options-api-demos/charts/elements/selection/overview/main.vue
new file mode 100644
index 00000000..e5deecfc
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/selection/overview/main.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <Chart @selectend="onSelectEnd">
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :categories="categories" :select="selection" />
+      </ChartCategoryAxis>
+      <ChartSeries>
+        <ChartSeriesItem :data-items="series" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartSeries,
+  ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data() {
+    return {
+      series: [1, 2, 3, 4],
+      selection: {
+        from: 1,
+        to: 2,
+      },
+      categories: ['A', 'B', 'C', 'D'],
+    };
+  },
+  methods: {
+    onSelectEnd(args) {
+      console.log(args);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/series/configuration/main.js b/vue-options-api-demos/charts/elements/series/configuration/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/series/configuration/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/series/configuration/main.vue b/vue-options-api-demos/charts/elements/series/configuration/main.vue
new file mode 100644
index 00000000..47114d41
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/series/configuration/main.vue
@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <Chart>
+      <ChartSeriesDefaults :type="'bar'" :labels="{ format: 'c' }" />
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :categories="categories" />
+      </ChartCategoryAxis>
+      <ChartSeries>
+        <ChartSeriesItem :data-items="salesData" />
+        <ChartSeriesItem :data-items="purchaseData" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartSeriesDefaults,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartSeriesDefaults,
+  },
+  data() {
+    return {
+      salesData: [20, 40, 45, 30, 50],
+      purchaseData: [12, 30, 30, 45, 10],
+      categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/series/overview/main.js b/vue-options-api-demos/charts/elements/series/overview/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/series/overview/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/series/overview/main.vue b/vue-options-api-demos/charts/elements/series/overview/main.vue
new file mode 100644
index 00000000..5401a221
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/series/overview/main.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <Chart>
+      <ChartSeries>
+        <ChartSeriesItem :type="'scatterLine'" :data-items="seriesData.one" />
+        <ChartSeriesItem :type="'scatterLine'" :data-items="seriesData.two" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data() {
+    return {
+      seriesData: {
+        one: [
+          [10, 10],
+          [15, 20],
+          [20, 25],
+          [32, 40],
+          [43, 50],
+          [55, 60],
+          [60, 70],
+          [70, 80],
+          [90, 100],
+        ],
+        two: [
+          [10, 40],
+          [17, 50],
+          [18, 70],
+          [35, 90],
+          [47, 95],
+          [60, 100],
+        ],
+      },
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/title/main.js b/vue-options-api-demos/charts/elements/title/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/title/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/title/main.vue b/vue-options-api-demos/charts/elements/title/main.vue
new file mode 100644
index 00000000..6e91643e
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/title/main.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTitle
+        :text="'A Lovely Title'"
+        :color="'blue'"
+        :background="'#ccff00'"
+        :font="'19pt sans-serif'"
+      />
+    </Chart>
+  </div>
+</template>
+
+<script>
+import { Chart, ChartTitle } from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartTitle,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/tooltips/categorical/main.js b/vue-options-api-demos/charts/elements/tooltips/categorical/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/tooltips/categorical/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/tooltips/categorical/main.vue b/vue-options-api-demos/charts/elements/tooltips/categorical/main.vue
new file mode 100644
index 00000000..b4d11ff6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/tooltips/categorical/main.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <Chart>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :categories="categories">
+          <ChartCategoryAxisCrosshair>
+            <ChartCategoryAxisCrosshairTooltip />
+          </ChartCategoryAxisCrosshair>
+        </ChartCategoryAxisItem>
+      </ChartCategoryAxis>
+      <ChartValueAxis>
+        <ChartValueAxisItem>
+          <ChartValueAxisCrosshair>
+            <ChartValueAxisCrosshairTooltip />
+          </ChartValueAxisCrosshair>
+        </ChartValueAxisItem>
+      </ChartValueAxis>
+      <ChartSeries>
+        <ChartSeriesItem :data-items="seriesData" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartCategoryAxisCrosshair,
+  ChartCategoryAxisCrosshairTooltip,
+  ChartValueAxis,
+  ChartValueAxisItem,
+  ChartValueAxisCrosshair,
+  ChartValueAxisCrosshairTooltip,
+  ChartSeries,
+  ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartCategoryAxisCrosshair,
+    ChartCategoryAxisCrosshairTooltip,
+    ChartValueAxis,
+    ChartValueAxisItem,
+    ChartValueAxisCrosshair,
+    ChartValueAxisCrosshairTooltip,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data() {
+    return {
+      seriesData: [1, 2, 3],
+      categories: ['A', 'B', 'C'],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/tooltips/format/main.js b/vue-options-api-demos/charts/elements/tooltips/format/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/tooltips/format/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/tooltips/format/main.vue b/vue-options-api-demos/charts/elements/tooltips/format/main.vue
new file mode 100644
index 00000000..b7c35c9b
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/tooltips/format/main.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTooltip :format="'Default Content {0}'" />
+      <ChartSeries>
+        <ChartSeriesItem :data-items="seriesData" />
+        <ChartSeriesItem :data-items="seriesData">
+          <ChartSeriesItemTooltip :format="'Series 1 value: {0}'" />
+        </ChartSeriesItem>
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartTooltip,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartSeriesItemTooltip,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartTooltip,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartSeriesItemTooltip,
+  },
+  data() {
+    return {
+      seriesData: [1, 2, 3],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/tooltips/one-tooltip/main.js b/vue-options-api-demos/charts/elements/tooltips/one-tooltip/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/tooltips/one-tooltip/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/tooltips/one-tooltip/main.vue b/vue-options-api-demos/charts/elements/tooltips/one-tooltip/main.vue
new file mode 100644
index 00000000..30fbe033
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/tooltips/one-tooltip/main.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTooltip :shared="true" />
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :categories="categories" />
+      </ChartCategoryAxis>
+      <ChartSeries>
+        <ChartSeriesItem :data-items="seriesData" />
+        <ChartSeriesItem :data-items="seriesData" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartTooltip,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartSeriesItemTooltip,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartTooltip,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartSeriesItemTooltip,
+  },
+  data() {
+    return {
+      seriesData: [1, 2, 3],
+      categories: ['A', 'B', 'C'],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/tooltips/overview/main.js b/vue-options-api-demos/charts/elements/tooltips/overview/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/tooltips/overview/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/tooltips/overview/main.vue b/vue-options-api-demos/charts/elements/tooltips/overview/main.vue
new file mode 100644
index 00000000..fc247353
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/tooltips/overview/main.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTooltip />
+      <ChartSeries>
+        <ChartSeriesItem :data-items="seriesData" />
+        <ChartSeriesItem :data-items="seriesData">
+          <ChartSeriesItemTooltip :background="'green'" />
+        </ChartSeriesItem>
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartTooltip,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartSeriesItemTooltip,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartTooltip,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartSeriesItemTooltip,
+  },
+  data() {
+    return {
+      seriesData: [1, 2, 3],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/tooltips/scatter/main.js b/vue-options-api-demos/charts/elements/tooltips/scatter/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/tooltips/scatter/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/tooltips/scatter/main.vue b/vue-options-api-demos/charts/elements/tooltips/scatter/main.vue
new file mode 100644
index 00000000..70e56f30
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/tooltips/scatter/main.vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <Chart>
+      <ChartXAxis>
+        <ChartXAxisItem
+          :crosshair="{ visible: true, tooltip: { visible: true } }"
+        />
+      </ChartXAxis>
+      <ChartYAxis>
+        <ChartYAxisItem
+          :crosshair="{ visible: true, tooltip: { visible: true } }"
+        />
+      </ChartYAxis>
+      <ChartSeries>
+        <ChartSeriesItem :type="'scatter'" :data-items="seriesData" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartYAxis,
+  ChartYAxisItem,
+  ChartXAxis,
+  ChartXAxisItem,
+  ChartSeries,
+  ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartYAxis,
+    ChartYAxisItem,
+    ChartXAxis,
+    ChartXAxisItem,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data() {
+    return {
+      seriesData: [
+        [1, 1],
+        [2, 2],
+        [3, 3],
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/elements/tooltips/template/main.js b/vue-options-api-demos/charts/elements/tooltips/template/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/tooltips/template/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/elements/tooltips/template/main.vue b/vue-options-api-demos/charts/elements/tooltips/template/main.vue
new file mode 100644
index 00000000..5d231d6a
--- /dev/null
+++ b/vue-options-api-demos/charts/elements/tooltips/template/main.vue
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTooltip :render="'defaultTooltipRender'">
+        <template v-slot:defaultTooltipRender="{ props }">
+          Default Content {{ props.point.value }}
+        </template>
+      </ChartTooltip>
+
+      <ChartSeries>
+        <ChartSeriesItem :data-items="seriesData" />
+        <ChartSeriesItem :data-items="seriesData">
+          <ChartSeriesItemTooltip :render="'nestedTooltipRender'">
+            <template v-slot:nestedTooltipRender="{ props }">
+              <span
+                ><b>Series 1 value: {{ props.point.value }}</b></span
+              >
+            </template>
+          </ChartSeriesItemTooltip>
+        </ChartSeriesItem>
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartTooltip,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartSeriesItemTooltip,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartTooltip,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartSeriesItemTooltip,
+  },
+  data() {
+    return {
+      seriesData: [1, 2, 3],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/events/basic/Logger.vue b/vue-options-api-demos/charts/events/basic/Logger.vue
new file mode 100644
index 00000000..aa04a80b
--- /dev/null
+++ b/vue-options-api-demos/charts/events/basic/Logger.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="example-config">
+    <h5>{{ title }}</h5>
+    <ul class="event-log">
+      <li v-for="(event, idx) in events" :key="idx">{{ event }}</li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    events: Array,
+    title: String,
+  },
+};
+</script>
+
+<style scoped>
+.example-config {
+  margin: 0 0 20px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+  margin: 0;
+  padding: 0;
+  max-height: 100px;
+  overflow-y: auto;
+  list-style-type: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: white;
+}
+.event-log li {
+  margin: 0;
+  padding: 0.3em;
+  line-height: 1.2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+  margin-bottom: -1px;
+}
+</style>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/events/basic/main.js b/vue-options-api-demos/charts/events/basic/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/events/basic/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/events/basic/main.vue b/vue-options-api-demos/charts/events/basic/main.vue
new file mode 100644
index 00000000..ad987289
--- /dev/null
+++ b/vue-options-api-demos/charts/events/basic/main.vue
@@ -0,0 +1,167 @@
+<template>
+  <div>
+    <Chart
+      :transitions="false"
+      @axislabelclick="onAxisLabelClick"
+      @legenditemclick="onLegendItemClick"
+      @legenditemhover="onLegendItemHover"
+      @noteclick="onNoteClick"
+      @notehover="onNoteHover"
+      @plotareaclick="onPlotAreaClick"
+      @plotareahover="onPlotAreaHover"
+      @render="onRender"
+      @seriesclick="onSeriesClick"
+      @serieshover="onSeriesHover"
+    >
+      <ChartTitle :text="'Gross domestic product growth GDP annual'" />
+      <ChartLegend :position="'bottom'" :orientation="'horizontal'" />
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :categories="categories" :start-angle="45" />
+      </ChartCategoryAxis>
+      <ChartSeries>
+        <ChartSeriesItem
+          v-for="(item, idx) in series"
+          :key="idx"
+          :type="'line'"
+          :style="'smooth'"
+          :data-items="item.data"
+          :field="'value'"
+          :note-text-field="'extremum'"
+          :name="item.name"
+        />
+      </ChartSeries>
+    </Chart>
+    <Logger :title="'Events list'" :events="eventsList" />
+  </div>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartTitle,
+  ChartLegend,
+} from "@progress/kendo-vue-charts";
+import Logger from "./Logger.vue";
+
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartTitle,
+    ChartLegend,
+    Logger,
+  },
+  data: function () {
+    return {
+      events: [],
+      categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
+      series: [
+        {
+          name: "India",
+          data: [
+            { value: 3.907, extremum: "Note" },
+            { value: 7.943 },
+            { value: 7.848 },
+            { value: 9.284 },
+            { value: 9.263 },
+            { value: 9.801 },
+            { value: 3.89 },
+            { value: 8.238 },
+            { value: 9.552 },
+            { value: 6.855 },
+          ],
+        },
+        {
+          name: "Russian Federation",
+          data: [
+            { value: 4.743 },
+            { value: 7.295 },
+            { value: 7.175 },
+            { value: 6.376 },
+            { value: 8.153 },
+            { value: 8.535 },
+            { value: 5.247 },
+            { value: -7.832, extremum: "Min" },
+            { value: 4.3 },
+            { value: 4.3 },
+          ],
+        },
+        {
+          name: "Germany",
+          data: [
+            { value: 0.01 },
+            { value: -0.375 },
+            { value: 1.161 },
+            { value: 0.684 },
+            { value: 3.7 },
+            { value: 3.269 },
+            { value: 1.083 },
+            { value: -5.127 },
+            { value: 3.69 },
+            { value: 2.995 },
+          ],
+        },
+        {
+          name: "World",
+          data: [
+            { value: 1.988 },
+            { value: 2.733 },
+            { value: 3.994 },
+            { value: 3.464 },
+            { value: 4.001 },
+            { value: 3.939 },
+            { value: 1.333 },
+            { value: -2.245 },
+            { value: 4.339, extremum: "Max" },
+            { value: 2.727 },
+          ],
+        },
+      ],
+    };
+  },
+  computed: {
+    eventsList(){
+      return this.events;
+    }
+  },
+  methods: {
+    onRender() {
+      this.events.unshift("Render event triggered");
+    },
+    onAxisLabelClick() {
+      this.events.unshift("AxisLabelClick event triggered");
+    },
+    onLegendItemClick() {
+      this.events.unshift("LegendItemClick event triggered");
+    },
+    onLegendItemHover() {
+      this.events.unshift("LegendItemHover event triggered");
+    },
+    onNoteClick() {
+      this.events.unshift("NoteClick event triggered");
+    },
+    onNoteHover() {
+      this.events.unshift("NoteHover event triggered");
+    },
+    onPlotAreaClick() {
+      this.events.unshift("PlotAreaClick event triggered");
+    },
+    onPlotAreaHover() {
+      this.events.unshift("PlotAreaHover event triggered");
+    },
+    onSeriesClick() {
+      this.events.unshift("SeriesClick event triggered");
+    },
+    onSeriesHover() {
+      this.events.unshift("SeriesHover event triggered");
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/events/drag/Logger.vue b/vue-options-api-demos/charts/events/drag/Logger.vue
new file mode 100644
index 00000000..aa04a80b
--- /dev/null
+++ b/vue-options-api-demos/charts/events/drag/Logger.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="example-config">
+    <h5>{{ title }}</h5>
+    <ul class="event-log">
+      <li v-for="(event, idx) in events" :key="idx">{{ event }}</li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    events: Array,
+    title: String,
+  },
+};
+</script>
+
+<style scoped>
+.example-config {
+  margin: 0 0 20px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+  margin: 0;
+  padding: 0;
+  max-height: 100px;
+  overflow-y: auto;
+  list-style-type: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: white;
+}
+.event-log li {
+  margin: 0;
+  padding: 0.3em;
+  line-height: 1.2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+  margin-bottom: -1px;
+}
+</style>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/events/drag/main.js b/vue-options-api-demos/charts/events/drag/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/events/drag/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/events/drag/main.vue b/vue-options-api-demos/charts/events/drag/main.vue
new file mode 100644
index 00000000..4bceb95e
--- /dev/null
+++ b/vue-options-api-demos/charts/events/drag/main.vue
@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <Chart
+      :transitions="false"
+      @drag="onDrag"
+      @dragstart="onDragStart"
+      @dragend="onDragEnd"
+    >
+      <ChartTitle :text="'Gross domestic product growth GDP annual'" />
+      <ChartLegend :position="'bottom'" :orientation="'horizontal'" />
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :categories="categories" :start-angle="45" />
+      </ChartCategoryAxis>
+      <ChartSeries>
+        <ChartSeriesItem
+          v-for="(item, idx) in series"
+          :key="idx"
+          :type="'line'"
+          :style="'smooth'"
+          :data-items="item.data"
+          :field="'value'"
+          :note-text-field="'extremum'"
+          :name="item.name"
+        />
+      </ChartSeries>
+    </Chart>
+    <Logger :title="'Events list'" :events="eventsList" />
+  </div>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartTitle,
+  ChartLegend,
+} from "@progress/kendo-vue-charts";
+import Logger from "./Logger.vue";
+
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartTitle,
+    ChartLegend,
+    Logger,
+  },
+  data: function () {
+    return {
+      events: [],
+      categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
+      series: [
+        {
+          name: "India",
+          data: [
+            { value: 3.907, extremum: "Note" },
+            { value: 7.943 },
+            { value: 7.848 },
+            { value: 9.284 },
+            { value: 9.263 },
+            { value: 9.801 },
+            { value: 3.89 },
+            { value: 8.238 },
+            { value: 9.552 },
+            { value: 6.855 },
+          ],
+        },
+        {
+          name: "Russian Federation",
+          data: [
+            { value: 4.743 },
+            { value: 7.295 },
+            { value: 7.175 },
+            { value: 6.376 },
+            { value: 8.153 },
+            { value: 8.535 },
+            { value: 5.247 },
+            { value: -7.832, extremum: "Min" },
+            { value: 4.3 },
+            { value: 4.3 },
+          ],
+        },
+        {
+          name: "Germany",
+          data: [
+            { value: 0.01 },
+            { value: -0.375 },
+            { value: 1.161 },
+            { value: 0.684 },
+            { value: 3.7 },
+            { value: 3.269 },
+            { value: 1.083 },
+            { value: -5.127 },
+            { value: 3.69 },
+            { value: 2.995 },
+          ],
+        },
+        {
+          name: "World",
+          data: [
+            { value: 1.988 },
+            { value: 2.733 },
+            { value: 3.994 },
+            { value: 3.464 },
+            { value: 4.001 },
+            { value: 3.939 },
+            { value: 1.333 },
+            { value: -2.245 },
+            { value: 4.339, extremum: "Max" },
+            { value: 2.727 },
+          ],
+        },
+      ],
+    };
+  },
+  computed: {
+    eventsList(){
+      return this.events;
+    }
+  },
+  methods: {
+    onDrag() {
+      this.events.unshift("Drag event triggered");
+    },
+    onDragStart() {
+      this.events.unshift("DragStart event triggered");
+    },
+    onDragEnd() {
+      this.events.unshift("DragEnd event triggered");
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/events/select/Logger.vue b/vue-options-api-demos/charts/events/select/Logger.vue
new file mode 100644
index 00000000..aa04a80b
--- /dev/null
+++ b/vue-options-api-demos/charts/events/select/Logger.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="example-config">
+    <h5>{{ title }}</h5>
+    <ul class="event-log">
+      <li v-for="(event, idx) in events" :key="idx">{{ event }}</li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    events: Array,
+    title: String,
+  },
+};
+</script>
+
+<style scoped>
+.example-config {
+  margin: 0 0 20px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+  margin: 0;
+  padding: 0;
+  max-height: 100px;
+  overflow-y: auto;
+  list-style-type: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: white;
+}
+.event-log li {
+  margin: 0;
+  padding: 0.3em;
+  line-height: 1.2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+  margin-bottom: -1px;
+}
+</style>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/events/select/main.js b/vue-options-api-demos/charts/events/select/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/events/select/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/events/select/main.vue b/vue-options-api-demos/charts/events/select/main.vue
new file mode 100644
index 00000000..69b7dfb2
--- /dev/null
+++ b/vue-options-api-demos/charts/events/select/main.vue
@@ -0,0 +1,146 @@
+<template>
+  <div>
+    <Chart
+      :transitions="false"
+      @select="onSelect"
+      @selectstart="onSelectStart"
+      @selectend="onSelectEnd"
+    >
+      <ChartTitle :text="'Gross domestic product growth GDP annual'" />
+      <ChartLegend :position="'bottom'" :orientation="'horizontal'" />
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem
+          :categories="categories"
+          :start-angle="45"
+          :select="selectItems"
+        />
+      </ChartCategoryAxis>
+      <ChartSeries>
+        <ChartSeriesItem
+          v-for="(item, idx) in series"
+          :key="idx"
+          :type="'line'"
+          :style="'smooth'"
+          :data-items="item.data"
+          :field="'value'"
+          :note-text-field="'extremum'"
+          :name="item.name"
+        />
+      </ChartSeries>
+    </Chart>
+    <Logger :title="'Events list'" :events="eventsList" />
+  </div>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartTitle,
+  ChartLegend,
+} from "@progress/kendo-vue-charts";
+import Logger from "./Logger.vue";
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartTitle,
+    ChartLegend,
+    Logger,
+  },
+  data: function () {
+    return {
+      events: [],
+      selectItems: {
+        from: 0,
+        to: 5,
+      },
+      categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
+      series: [
+        {
+          name: "India",
+          data: [
+            { value: 3.907, extremum: "Note" },
+            { value: 7.943 },
+            { value: 7.848 },
+            { value: 9.284 },
+            { value: 9.263 },
+            { value: 9.801 },
+            { value: 3.89 },
+            { value: 8.238 },
+            { value: 9.552 },
+            { value: 6.855 },
+          ],
+        },
+        {
+          name: "Russian Federation",
+          data: [
+            { value: 4.743 },
+            { value: 7.295 },
+            { value: 7.175 },
+            { value: 6.376 },
+            { value: 8.153 },
+            { value: 8.535 },
+            { value: 5.247 },
+            { value: -7.832, extremum: "Min" },
+            { value: 4.3 },
+            { value: 4.3 },
+          ],
+        },
+        {
+          name: "Germany",
+          data: [
+            { value: 0.01 },
+            { value: -0.375 },
+            { value: 1.161 },
+            { value: 0.684 },
+            { value: 3.7 },
+            { value: 3.269 },
+            { value: 1.083 },
+            { value: -5.127 },
+            { value: 3.69 },
+            { value: 2.995 },
+          ],
+        },
+        {
+          name: "World",
+          data: [
+            { value: 1.988 },
+            { value: 2.733 },
+            { value: 3.994 },
+            { value: 3.464 },
+            { value: 4.001 },
+            { value: 3.939 },
+            { value: 1.333 },
+            { value: -2.245 },
+            { value: 4.339, extremum: "Max" },
+            { value: 2.727 },
+          ],
+        },
+      ],
+    };
+  },
+  computed: {
+    eventsList(){
+      return this.events;
+    }
+  },
+  methods: {
+    onSelect() {
+      this.events.unshift("Select event triggered");
+    },
+    onSelectStart() {
+      this.events.unshift("SelectStart event triggered");
+    },
+    onSelectEnd() {
+      this.events.unshift("SelectEnd event triggered");
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/events/zoom/Logger.vue b/vue-options-api-demos/charts/events/zoom/Logger.vue
new file mode 100644
index 00000000..aa04a80b
--- /dev/null
+++ b/vue-options-api-demos/charts/events/zoom/Logger.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="example-config">
+    <h5>{{ title }}</h5>
+    <ul class="event-log">
+      <li v-for="(event, idx) in events" :key="idx">{{ event }}</li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    events: Array,
+    title: String,
+  },
+};
+</script>
+
+<style scoped>
+.example-config {
+  margin: 0 0 20px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+  margin: 0;
+  padding: 0;
+  max-height: 100px;
+  overflow-y: auto;
+  list-style-type: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: white;
+}
+.event-log li {
+  margin: 0;
+  padding: 0.3em;
+  line-height: 1.2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+  margin-bottom: -1px;
+}
+</style>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/events/zoom/main.js b/vue-options-api-demos/charts/events/zoom/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/events/zoom/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/events/zoom/main.vue b/vue-options-api-demos/charts/events/zoom/main.vue
new file mode 100644
index 00000000..09fb87b8
--- /dev/null
+++ b/vue-options-api-demos/charts/events/zoom/main.vue
@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <Chart
+      :transitions="false"
+      :zoomable="true"
+      @zoom="onZoom"
+      @zoomstart="onZoomStart"
+      @zoomend="onZoomEnd"
+    >
+      <ChartTitle :text="'Gross domestic product growth GDP annual'" />
+      <ChartLegend :position="'bottom'" :orientation="'horizontal'" />
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :categories="categories" :start-angle="45" />
+      </ChartCategoryAxis>
+      <ChartSeries>
+        <ChartSeriesItem
+          v-for="(item, idx) in series"
+          :key="idx"
+          :type="'line'"
+          :style="'smooth'"
+          :data-items="item.data"
+          :field="'value'"
+          :note-text-field="'extremum'"
+          :name="item.name"
+        />
+      </ChartSeries>
+    </Chart>
+    <Logger :title="'Events list'" :events="eventsList" />
+  </div>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartTitle,
+  ChartLegend,
+} from "@progress/kendo-vue-charts";
+import Logger from "./Logger.vue";
+
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartTitle,
+    ChartLegend,
+    Logger,
+  },
+  data: function () {
+    return {
+      events: [],
+      categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
+      series: [
+        {
+          name: "India",
+          data: [
+            { value: 3.907, extremum: "Note" },
+            { value: 7.943 },
+            { value: 7.848 },
+            { value: 9.284 },
+            { value: 9.263 },
+            { value: 9.801 },
+            { value: 3.89 },
+            { value: 8.238 },
+            { value: 9.552 },
+            { value: 6.855 },
+          ],
+        },
+        {
+          name: "Russian Federation",
+          data: [
+            { value: 4.743 },
+            { value: 7.295 },
+            { value: 7.175 },
+            { value: 6.376 },
+            { value: 8.153 },
+            { value: 8.535 },
+            { value: 5.247 },
+            { value: -7.832, extremum: "Min" },
+            { value: 4.3 },
+            { value: 4.3 },
+          ],
+        },
+        {
+          name: "Germany",
+          data: [
+            { value: 0.01 },
+            { value: -0.375 },
+            { value: 1.161 },
+            { value: 0.684 },
+            { value: 3.7 },
+            { value: 3.269 },
+            { value: 1.083 },
+            { value: -5.127 },
+            { value: 3.69 },
+            { value: 2.995 },
+          ],
+        },
+        {
+          name: "World",
+          data: [
+            { value: 1.988 },
+            { value: 2.733 },
+            { value: 3.994 },
+            { value: 3.464 },
+            { value: 4.001 },
+            { value: 3.939 },
+            { value: 1.333 },
+            { value: -2.245 },
+            { value: 4.339, extremum: "Max" },
+            { value: 2.727 },
+          ],
+        },
+      ],
+    };
+  },
+  computed: {
+    eventsList(){
+      return this.events;
+    }
+  },
+  methods: {
+    onZoom() {
+      this.events.unshift("Zoom event triggered");
+    },
+    onZoomStart() {
+      this.events.unshift("ZoomStart event triggered");
+    },
+    onZoomEnd() {
+      this.events.unshift("ZoomEnd event triggered");
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/export-options/image-size/main.js b/vue-options-api-demos/charts/export-options/image-size/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/export-options/image-size/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/export-options/image-size/main.vue b/vue-options-api-demos/charts/export-options/image-size/main.vue
new file mode 100644
index 00000000..23f6e889
--- /dev/null
+++ b/vue-options-api-demos/charts/export-options/image-size/main.vue
@@ -0,0 +1,150 @@
+<template>
+  <div>
+    <kbutton @click="onImageExportClick">
+      Export as Image
+    </kbutton>
+    <Chart ref="chart">
+      <ChartTooltip :visible="true" />
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem
+          :categories="categories_months"
+          :axisCrossingValue="[0, 20]"
+          :start-angle="45"
+        />
+      </ChartCategoryAxis>
+      <ChartTitle :text="'Revenue Trend per Product'" />
+      <ChartValueAxis>
+        <ChartValueAxisItem :name="'RevenueAxis'">
+          <ChartValueAxisTitle :text="'Revenue'" />
+          <ChartValueAxisLabels :format="'{0:C}M'" />
+        </ChartValueAxisItem>
+      </ChartValueAxis>
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'line'"
+          :line-style="'smooth'"
+          :name="'LL Mountain Rear Weel'"
+          :data-items="ll_weel_revenue"
+          :axis="'RevenueAxis'"
+        >
+        </ChartSeriesItem>
+        <ChartSeriesItem
+          :type="'line'"
+          :line-style="'smooth'"
+          :name="'HL Mountain Rear Weel'"
+          :data-items="hl_weel_revenue"
+          :axis="'RevenueAxis'"
+        >
+        </ChartSeriesItem>
+        <ChartSeriesItem
+          :type="'line'"
+          :line-style="'smooth'"
+          :name="'ML Mountain Rear Weel'"
+          :data-items="ml_weel_revenue"
+          :axis="'RevenueAxis'"
+        >
+        </ChartSeriesItem>
+        <ChartSeriesMarkers :visible="false" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+<script>
+import {
+  ChartSeriesMarkers,
+  ChartValueAxisTitle,
+  ChartValueAxisLabels,
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartTitle,
+  ChartTooltip,
+  ChartValueAxis,
+  ChartValueAxisItem,
+  exportVisual,
+} from "@progress/kendo-vue-charts";
+
+import { Button } from '@progress/kendo-vue-buttons';
+import { saveAs } from "@progress/kendo-file-saver";
+import { exportImage } from "@progress/kendo-drawing";
+
+export default {
+  components: {
+    ChartSeriesMarkers,
+    ChartValueAxisTitle,
+    ChartValueAxisLabels,
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartTitle,
+    ChartTooltip,
+    ChartValueAxis,
+    ChartValueAxisItem,
+      'kbutton': Button
+  },
+  data: function () {
+    return {
+      categories_months: [
+        "MAY",
+        "JUN",
+        "JUL",
+        "AUG",
+        "SEP",
+        "OCT",
+        "NOV",
+        "DEC",
+      ],
+      hl_weel_revenue: [
+        13422.62,
+        23559.48,
+        20056.31,
+        10798.09,
+        17080.62,
+        13154.04,
+        8049.48,
+        10012.77,
+      ],
+      ml_weel_revenue: [
+        8616.04,
+        16621.06,
+        15166.35,
+        6231.06,
+        11895.66,
+        11470.81,
+        5381.37,
+        6231.06,
+      ],
+      ll_weel_revenue: [
+        3849.72,
+        8577.45,
+        5470.65,
+        4525.11,
+        7226.67,
+        3782.18,
+        2026.17,
+        4525.11,
+      ],
+    };
+  },
+  methods: {
+    exportChartVisual(callback) {
+      const chartVisual = exportVisual(this.$refs.chart, {
+        width: 1200,
+        height: 800,
+      });
+      if (chartVisual) {
+        callback(chartVisual);
+      }
+    },
+    onImageExportClick() {
+      this.exportChartVisual((chartVisual) =>
+        exportImage(chartVisual).then((dataURI) => saveAs(dataURI, "chart.png"))
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/export-options/image/main.js b/vue-options-api-demos/charts/export-options/image/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/export-options/image/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/export-options/image/main.vue b/vue-options-api-demos/charts/export-options/image/main.vue
new file mode 100644
index 00000000..cc012dbf
--- /dev/null
+++ b/vue-options-api-demos/charts/export-options/image/main.vue
@@ -0,0 +1,145 @@
+<template>
+  <div>
+    <kbutton @click="onImageExportClick">Export as Image</kbutton>
+    <Chart ref="chart">
+      <ChartTooltip :visible="true" />
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem
+          :categories="categories_months"
+          :axisCrossingValue="[0, 20]"
+          :start-angle="45"
+        />
+      </ChartCategoryAxis>
+      <ChartTitle :text="'Revenue Trend per Product'" />
+      <ChartValueAxis>
+        <ChartValueAxisItem :name="'RevenueAxis'">
+          <ChartValueAxisTitle :text="'Revenue'" />
+          <ChartValueAxisLabels :format="'{0:C}M'" />
+        </ChartValueAxisItem>
+      </ChartValueAxis>
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'line'"
+          :line-style="'smooth'"
+          :name="'LL Mountain Rear Weel'"
+          :data-items="ll_weel_revenue"
+          :axis="'RevenueAxis'"
+        >
+        </ChartSeriesItem>
+        <ChartSeriesItem
+          :type="'line'"
+          :line-style="'smooth'"
+          :name="'HL Mountain Rear Weel'"
+          :data-items="hl_weel_revenue"
+          :axis="'RevenueAxis'"
+        >
+        </ChartSeriesItem>
+        <ChartSeriesItem
+          :type="'line'"
+          :line-style="'smooth'"
+          :name="'ML Mountain Rear Weel'"
+          :data-items="ml_weel_revenue"
+          :axis="'RevenueAxis'"
+        >
+        </ChartSeriesItem>
+        <ChartSeriesMarkers :visible="false" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+<script>
+import {
+  ChartSeriesMarkers,
+  ChartValueAxisTitle,
+  ChartValueAxisLabels,
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartTitle,
+  ChartTooltip,
+  ChartValueAxis,
+  ChartValueAxisItem,
+  exportVisual,
+} from "@progress/kendo-vue-charts";
+
+import { Button } from '@progress/kendo-vue-buttons';
+import { saveAs } from "@progress/kendo-file-saver";
+import { exportImage } from "@progress/kendo-drawing";
+
+export default {
+  components: {
+    ChartSeriesMarkers,
+    ChartValueAxisTitle,
+    ChartValueAxisLabels,
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartTitle,
+    ChartTooltip,
+    ChartValueAxis,
+    ChartValueAxisItem,
+    'kbutton': Button
+  },
+  data: function () {
+    return {
+      categories_months: [
+        "MAY",
+        "JUN",
+        "JUL",
+        "AUG",
+        "SEP",
+        "OCT",
+        "NOV",
+        "DEC",
+      ],
+      hl_weel_revenue: [
+        13422.62,
+        23559.48,
+        20056.31,
+        10798.09,
+        17080.62,
+        13154.04,
+        8049.48,
+        10012.77,
+      ],
+      ml_weel_revenue: [
+        8616.04,
+        16621.06,
+        15166.35,
+        6231.06,
+        11895.66,
+        11470.81,
+        5381.37,
+        6231.06,
+      ],
+      ll_weel_revenue: [
+        3849.72,
+        8577.45,
+        5470.65,
+        4525.11,
+        7226.67,
+        3782.18,
+        2026.17,
+        4525.11,
+      ],
+    };
+  },
+  methods: {
+    exportChartVisual(callback) {
+      const chartVisual = exportVisual(this.$refs.chart, {});
+      if (chartVisual) {
+        callback(chartVisual);
+      }
+    },
+    onImageExportClick() {
+      this.exportChartVisual((chartVisual) =>
+        exportImage(chartVisual).then((dataURI) => saveAs(dataURI, "chart.png"))
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/export-options/pdf-size/main.js b/vue-options-api-demos/charts/export-options/pdf-size/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/export-options/pdf-size/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/export-options/pdf-size/main.vue b/vue-options-api-demos/charts/export-options/pdf-size/main.vue
new file mode 100644
index 00000000..6f98ddc7
--- /dev/null
+++ b/vue-options-api-demos/charts/export-options/pdf-size/main.vue
@@ -0,0 +1,150 @@
+<template>
+  <div>
+    <kbutton @click="exportSizedChart"> Export as PDF(scаle)</kbutton>&nbsp
+    <kbutton @click="exportScaledChart"> Export as PDF(size) </kbutton>
+    <Chart ref="chart">
+      <ChartTooltip :visible="true" />
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem
+          :categories="categories_months"
+          :axisCrossingValue="[0, 20]"
+          :start-angle="45"
+        />
+      </ChartCategoryAxis>
+      <ChartTitle :text="'Revenue Trend per Product'" />
+      <ChartValueAxis>
+        <ChartValueAxisItem :name="'RevenueAxis'">
+          <ChartValueAxisTitle :text="'Revenue'" />
+          <ChartValueAxisLabels :format="'{0:C}M'" />
+        </ChartValueAxisItem>
+      </ChartValueAxis>
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'line'"
+          :line-style="'smooth'"
+          :name="'LL Mountain Rear Weel'"
+          :data-items="ll_weel_revenue"
+          :axis="'RevenueAxis'"
+        >
+        </ChartSeriesItem>
+        <ChartSeriesItem
+          :type="'line'"
+          :line-style="'smooth'"
+          :name="'HL Mountain Rear Weel'"
+          :data-items="hl_weel_revenue"
+          :axis="'RevenueAxis'"
+        >
+        </ChartSeriesItem>
+        <ChartSeriesItem
+          :type="'line'"
+          :line-style="'smooth'"
+          :name="'ML Mountain Rear Weel'"
+          :data-items="ml_weel_revenue"
+          :axis="'RevenueAxis'"
+        >
+        </ChartSeriesItem>
+        <ChartSeriesMarkers :visible="false" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+<script>
+import {
+  ChartSeriesMarkers,
+  ChartValueAxisTitle,
+  ChartValueAxisLabels,
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartTitle,
+  ChartTooltip,
+  ChartValueAxis,
+  ChartValueAxisItem,
+  exportVisual,
+} from '@progress/kendo-vue-charts';
+import { Button } from '@progress/kendo-vue-buttons';
+import { saveAs } from '@progress/kendo-file-saver';
+import { fit, exportPDF, Group } from '@progress/kendo-drawing';
+import { Rect } from '@progress/kendo-drawing/geometry';
+const mm = (val) => val * 2.8347;
+const PAGE_RECT = new Rect([0, 0], [mm(210 - 20), mm(297 - 20)]);
+export default {
+  components: {
+    ChartSeriesMarkers,
+    ChartValueAxisTitle,
+    ChartValueAxisLabels,
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartTitle,
+    ChartTooltip,
+    ChartValueAxis,
+    ChartValueAxisItem,
+    kbutton: Button,
+  },
+  data: function () {
+    return {
+      categories_months: [
+        'MAY',
+        'JUN',
+        'JUL',
+        'AUG',
+        'SEP',
+        'OCT',
+        'NOV',
+        'DEC',
+      ],
+      hl_weel_revenue: [
+        13422.62, 23559.48, 20056.31, 10798.09, 17080.62, 13154.04, 8049.48,
+        10012.77,
+      ],
+      ml_weel_revenue: [
+        8616.04, 16621.06, 15166.35, 6231.06, 11895.66, 11470.81, 5381.37,
+        6231.06,
+      ],
+      ll_weel_revenue: [
+        3849.72, 8577.45, 5470.65, 4525.11, 7226.67, 3782.18, 2026.17, 4525.11,
+      ],
+    };
+  },
+  methods: {
+    exportChartVisualSizedChart(callback) {
+      const chartVisual = exportVisual(this.$refs.chart, {
+        width: PAGE_RECT.size.width,
+      });
+      if (chartVisual) {
+        callback(chartVisual);
+      }
+    },
+    exportChartVisualScaledChart(callback) {
+      const chartVisual = exportVisual(this.$refs.chart, {});
+      const content = new Group();
+      content.append(chartVisual);
+      fit(content, PAGE_RECT);
+      if (content) {
+        callback(content);
+      }
+    },
+    exportSizedChart() {
+      this.exportChartVisualSizedChart((chartVisual) =>
+        exportPDF(chartVisual, {
+          paperSize: 'A4',
+          margin: '1cm',
+        }).then((dataURI) => saveAs(dataURI, 'chart.pdf'))
+      );
+    },
+    exportScaledChart() {
+      this.exportChartVisualScaledChart((chartVisual) =>
+        exportPDF(chartVisual, {
+          paperSize: 'A4',
+          margin: '1cm',
+        }).then((dataURI) => saveAs(dataURI, 'chart.pdf'))
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/export-options/pdf/main.js b/vue-options-api-demos/charts/export-options/pdf/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/export-options/pdf/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/export-options/pdf/main.vue b/vue-options-api-demos/charts/export-options/pdf/main.vue
new file mode 100644
index 00000000..d0b2b505
--- /dev/null
+++ b/vue-options-api-demos/charts/export-options/pdf/main.vue
@@ -0,0 +1,145 @@
+<template>
+  <div>
+    <kbutton @click="onPDFExportClick">Export as PDF</kbutton>
+    <Chart ref="chart">
+      <ChartTooltip :visible="true" />
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem
+          :categories="categories_months"
+          :axisCrossingValue="[0, 20]"
+          :start-angle="45"
+        />
+      </ChartCategoryAxis>
+      <ChartTitle :text="'Revenue Trend per Product'" />
+      <ChartValueAxis>
+        <ChartValueAxisItem :name="'RevenueAxis'">
+          <ChartValueAxisTitle :text="'Revenue'" />
+          <ChartValueAxisLabels :format="'{0:C}M'" />
+        </ChartValueAxisItem>
+      </ChartValueAxis>
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'line'"
+          :line-style="'smooth'"
+          :name="'LL Mountain Rear Weel'"
+          :data-items="ll_weel_revenue"
+          :axis="'RevenueAxis'"
+        >
+        </ChartSeriesItem>
+        <ChartSeriesItem
+          :type="'line'"
+          :line-style="'smooth'"
+          :name="'HL Mountain Rear Weel'"
+          :data-items="hl_weel_revenue"
+          :axis="'RevenueAxis'"
+        >
+        </ChartSeriesItem>
+        <ChartSeriesItem
+          :type="'line'"
+          :line-style="'smooth'"
+          :name="'ML Mountain Rear Weel'"
+          :data-items="ml_weel_revenue"
+          :axis="'RevenueAxis'"
+        >
+        </ChartSeriesItem>
+        <ChartSeriesMarkers :visible="false" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+<script>
+import {
+  ChartSeriesMarkers,
+  ChartValueAxisTitle,
+  ChartValueAxisLabels,
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartTitle,
+  ChartTooltip,
+  ChartValueAxis,
+  ChartValueAxisItem,
+  exportVisual,
+} from "@progress/kendo-vue-charts";
+
+import { Button } from '@progress/kendo-vue-buttons';
+import { saveAs } from "@progress/kendo-file-saver";
+import { exportSVG, exportImage, exportPDF } from "@progress/kendo-drawing";
+
+export default {
+  components: {
+    ChartSeriesMarkers,
+    ChartValueAxisTitle,
+    ChartValueAxisLabels,
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartTitle,
+    ChartTooltip,
+    ChartValueAxis,
+    ChartValueAxisItem,
+      'kbutton': Button
+  },
+  data: function () {
+    return {
+      categories_months: [
+        "MAY",
+        "JUN",
+        "JUL",
+        "AUG",
+        "SEP",
+        "OCT",
+        "NOV",
+        "DEC",
+      ],
+      hl_weel_revenue: [
+        13422.62,
+        23559.48,
+        20056.31,
+        10798.09,
+        17080.62,
+        13154.04,
+        8049.48,
+        10012.77,
+      ],
+      ml_weel_revenue: [
+        8616.04,
+        16621.06,
+        15166.35,
+        6231.06,
+        11895.66,
+        11470.81,
+        5381.37,
+        6231.06,
+      ],
+      ll_weel_revenue: [
+        3849.72,
+        8577.45,
+        5470.65,
+        4525.11,
+        7226.67,
+        3782.18,
+        2026.17,
+        4525.11,
+      ],
+    };
+  },
+  methods: {
+    exportChartVisual(callback) {
+      const chartVisual = exportVisual(this.$refs.chart, {});
+      if (chartVisual) {
+        callback(chartVisual);
+      }
+    },
+    onPDFExportClick() {
+      this.exportChartVisual((chartVisual) =>
+        exportPDF(chartVisual).then((dataURI) => saveAs(dataURI, "chart.pdf"))
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/export-options/svg/main.js b/vue-options-api-demos/charts/export-options/svg/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/export-options/svg/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/export-options/svg/main.vue b/vue-options-api-demos/charts/export-options/svg/main.vue
new file mode 100644
index 00000000..5d993cd3
--- /dev/null
+++ b/vue-options-api-demos/charts/export-options/svg/main.vue
@@ -0,0 +1,145 @@
+<template>
+  <div>
+    <kbutton @click="onSVGExportClick">Export SVG</kbutton>
+    <Chart ref="chart">
+      <ChartTooltip :visible="true" />
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem
+          :categories="categories_months"
+          :axisCrossingValue="[0, 20]"
+          :start-angle="45"
+        />
+      </ChartCategoryAxis>
+      <ChartTitle :text="'Revenue Trend per Product'" />
+      <ChartValueAxis>
+        <ChartValueAxisItem :name="'RevenueAxis'">
+          <ChartValueAxisTitle :text="'Revenue'" />
+          <ChartValueAxisLabels :format="'{0:C}M'" />
+        </ChartValueAxisItem>
+      </ChartValueAxis>
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'line'"
+          :line-style="'smooth'"
+          :name="'LL Mountain Rear Weel'"
+          :data-items="ll_weel_revenue"
+          :axis="'RevenueAxis'"
+        >
+        </ChartSeriesItem>
+        <ChartSeriesItem
+          :type="'line'"
+          :line-style="'smooth'"
+          :name="'HL Mountain Rear Weel'"
+          :data-items="hl_weel_revenue"
+          :axis="'RevenueAxis'"
+        >
+        </ChartSeriesItem>
+        <ChartSeriesItem
+          :type="'line'"
+          :line-style="'smooth'"
+          :name="'ML Mountain Rear Weel'"
+          :data-items="ml_weel_revenue"
+          :axis="'RevenueAxis'"
+        >
+        </ChartSeriesItem>
+        <ChartSeriesMarkers :visible="false" />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+<script>
+import {
+  ChartSeriesMarkers,
+  ChartValueAxisTitle,
+  ChartValueAxisLabels,
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartTitle,
+  ChartTooltip,
+  ChartValueAxis,
+  ChartValueAxisItem,
+  exportVisual,
+} from "@progress/kendo-vue-charts";
+import { Button } from '@progress/kendo-vue-buttons';
+
+import { saveAs } from "@progress/kendo-file-saver";
+import { exportSVG, exportImage, exportPDF } from "@progress/kendo-drawing";
+
+export default {
+  components: {
+    ChartSeriesMarkers,
+    ChartValueAxisTitle,
+    ChartValueAxisLabels,
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartTitle,
+    ChartTooltip,
+    ChartValueAxis,
+    ChartValueAxisItem,
+      'kbutton': Button
+  },
+  data: function () {
+    return {
+      categories_months: [
+        "MAY",
+        "JUN",
+        "JUL",
+        "AUG",
+        "SEP",
+        "OCT",
+        "NOV",
+        "DEC",
+      ],
+      hl_weel_revenue: [
+        13422.62,
+        23559.48,
+        20056.31,
+        10798.09,
+        17080.62,
+        13154.04,
+        8049.48,
+        10012.77,
+      ],
+      ml_weel_revenue: [
+        8616.04,
+        16621.06,
+        15166.35,
+        6231.06,
+        11895.66,
+        11470.81,
+        5381.37,
+        6231.06,
+      ],
+      ll_weel_revenue: [
+        3849.72,
+        8577.45,
+        5470.65,
+        4525.11,
+        7226.67,
+        3782.18,
+        2026.17,
+        4525.11,
+      ],
+    };
+  },
+  methods: {
+    exportChartVisual(callback) {
+      const chartVisual = exportVisual(this.$refs.chart, {});
+      if (chartVisual) {
+        callback(chartVisual);
+      }
+    },
+    onSVGExportClick() {
+      this.exportChartVisual((chartVisual) =>
+        exportSVG(chartVisual).then((dataURI) => saveAs(dataURI, "chart.svg"))
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/export-options/visuals/main.js b/vue-options-api-demos/charts/export-options/visuals/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/export-options/visuals/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/export-options/visuals/main.vue b/vue-options-api-demos/charts/export-options/visuals/main.vue
new file mode 100644
index 00000000..fb184248
--- /dev/null
+++ b/vue-options-api-demos/charts/export-options/visuals/main.vue
@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <h1>Chart export as Visual Element demo</h1>
+    <Chart>
+      <ChartTooltip :visible="true" />
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem
+          :categories="categories_months"
+          :axisCrossingValue="[0, 20]"
+          :start-angle="45"
+        />
+      </ChartCategoryAxis>
+      <ChartTitle :text="'Revenue Trend per Product'" />
+      <ChartValueAxis>
+        <ChartValueAxisItem :name="'RevenueAxis'">
+          <ChartValueAxisTitle :text="'Revenue'" />
+          <ChartValueAxisLabels :format="'{0:C}M'" />
+        </ChartValueAxisItem>
+      </ChartValueAxis>
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'line'"
+          :line-style="'smooth'"
+          :name="'LL Mountain Rear Weel'"
+          :data-items="ll_weel_revenue"
+          :axis="'RevenueAxis'"
+        >
+        </ChartSeriesItem>
+        <ChartSeriesItem
+          :type="'line'"
+          :line-style="'smooth'"
+          :name="'HL Mountain Rear Weel'"
+          :data-items="hl_weel_revenue"
+          :axis="'RevenueAxis'"
+        >
+        </ChartSeriesItem>
+        <ChartSeriesItem
+          :type="'line'"
+          :line-style="'smooth'"
+          :name="'ML Mountain Rear Weel'"
+          :data-items="ml_weel_revenue"
+          :axis="'RevenueAxis'"
+        >
+        </ChartSeriesItem>
+        <ChartSeriesMarkers :visible="false" />
+      </ChartSeries>
+    </Chart>
+    <button @click="exportChartVisual">Export As Visual Element</button>
+ </div>
+</template>
+<script>
+import {
+  ChartSeriesMarkers,
+  ChartValueAxisTitle,
+  ChartValueAxisLabels,
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartTitle,
+  ChartTooltip,
+  ChartValueAxis,
+  ChartValueAxisItem,
+  exportVisual,
+} from "@progress/kendo-vue-charts";
+
+
+export default {
+  components: {
+    ChartSeriesMarkers,
+    ChartValueAxisTitle,
+    ChartValueAxisLabels,
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartTitle,
+    ChartTooltip,
+    ChartValueAxis,
+    ChartValueAxisItem,
+  },
+  data: function () {
+    return {
+      hl_weel_revenue: [
+        13422.62,
+        23559.48,
+        20056.31,
+        10798.09,
+        17080.62,
+        13154.04,
+        8049.48,
+        10012.77,
+      ],
+      ml_weel_revenue: [
+        8616.04,
+        16621.06,
+        15166.35,
+        6231.06,
+        11895.66,
+        11470.81,
+        5381.37,
+        6231.06,
+      ],
+      ll_weel_revenue: [
+        3849.72,
+        8577.45,
+        5470.65,
+        4525.11,
+        7226.67,
+        3782.18,
+        2026.17,
+        4525.11,
+      ],
+    };
+  },
+  methods: {
+    exportChartVisual(callback) {
+      const chartVisual = exportVisual(this.$refs.chart, {});
+      if (chartVisual) {
+        callback(chartVisual);
+      }
+    }
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/overview/main.js b/vue-options-api-demos/charts/overview/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/overview/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/overview/main.vue b/vue-options-api-demos/charts/overview/main.vue
new file mode 100644
index 00000000..27c58f5c
--- /dev/null
+++ b/vue-options-api-demos/charts/overview/main.vue
@@ -0,0 +1,309 @@
+<template>
+  <div>
+    <Chart :style="{ height: '320px' }">
+      <ChartTooltip :visible="true" :shared="true" />
+      <ChartTitle
+        :text="'Sales and Revenue Total'"
+        :position="'top'"
+        :align="'center'"
+      />
+      <ChartLegend :position="chartPosition" :labels="{ font: labelSize }">
+      </ChartLegend>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem
+          :labels="{ rotation: 'auto', padding: '3', font: labelSize }"
+          :categories="categories_months"
+          :axisCrossingValue="[0, 20]"
+          :start-angle="45"
+        />
+      </ChartCategoryAxis>
+
+      <ChartValueAxis>
+        <ChartValueAxisItem :name="'items'">
+          <ChartValueAxisTitle
+            :text="'Sold items (thousands)'"
+            :font="labelSize"
+          />
+          <ChartValueAxisLabels
+            :format="'{0:C}M'"
+            :padding="3"
+            :font="labelSize"
+          />
+        </ChartValueAxisItem>
+        <ChartValueAxisItem :name="'RevenueAxis'">
+          <ChartValueAxisTitle :text="'Revenue'" :font="labelSize" />
+          <ChartValueAxisLabels
+            :format="'{0:C}M'"
+            :padding="3"
+            :font="labelSize"
+          />
+        </ChartValueAxisItem>
+      </ChartValueAxis>
+
+      <ChartSeries>
+        <ChartSeriesItem
+          :name="'LL Mountain Rear Weel'"
+          :data-items="ll_weel_series"
+          :type="'column'"
+          :axis="'items'"
+        >
+        </ChartSeriesItem>
+        <ChartSeriesItem
+          :name="'Total revenue'"
+          :axis="'RevenueAxis'"
+          :data-items="total_revenue"
+          :type="'line'"
+        >
+        </ChartSeriesItem>
+        <ChartSeriesItem
+          :name="'HL Mountain Rear Weel'"
+          :data-items="hl_weel_series"
+          :type="'column'"
+          :axis="'items'"
+        >
+        </ChartSeriesItem>
+        <ChartSeriesItem
+          :name="'ML Mountain Rear Weel'"
+          :data-items="ml_weel_series"
+          :type="'column'"
+          :axis="'items'"
+        >
+        </ChartSeriesItem>
+      </ChartSeries>
+    </Chart>
+    <div class="mt-md k-d-flex k-flex-wrap">
+      <div class="k-flex-grow mb-md kd-border kd-rounded chart-item">
+        <Chart :style="{ height: '260px', width: 'auto' }">
+          <ChartTooltip :visible="true" />
+          <ChartLegend :position="chartPosition" :labels="{ font: labelSize }">
+          </ChartLegend>
+          <ChartCategoryAxis>
+            <ChartCategoryAxisItem
+              :labels="{ rotation: 'auto', padding: '3', font: labelSize }"
+              :categories="categories_months"
+              :axisCrossingValue="[0, 20]"
+              :start-angle="45"
+            />
+          </ChartCategoryAxis>
+          <ChartTitle :text="'Revenue Trend per Product'" />
+          <ChartValueAxis>
+            <ChartValueAxisItem :name="'RevenueAxis'">
+              <ChartValueAxisTitle :text="'Revenue'" :font="labelSize" />
+              <ChartValueAxisLabels
+                :format="'{0:C}M'"
+                :padding="3"
+                :font="labelSize"
+              />
+            </ChartValueAxisItem>
+          </ChartValueAxis>
+          <ChartSeries>
+            <ChartSeriesItem
+              :type="'line'"
+              :line-style="'smooth'"
+              :name="'LL Mountain Rear Weel'"
+              :data-items="ll_weel_revenue"
+              :axis="'RevenueAxis'"
+            >
+            </ChartSeriesItem>
+            <ChartSeriesItem
+              :type="'line'"
+              :line-style="'smooth'"
+              :name="'HL Mountain Rear Weel'"
+              :data-items="hl_weel_revenue"
+              :axis="'RevenueAxis'"
+            >
+            </ChartSeriesItem>
+            <ChartSeriesItem
+              :type="'line'"
+              :line-style="'smooth'"
+              :name="'ML Mountain Rear Weel'"
+              :data-items="ml_weel_revenue"
+              :axis="'RevenueAxis'"
+            >
+            </ChartSeriesItem>
+            <ChartSeriesMarkers :visible="false" />
+          </ChartSeries>
+        </Chart>
+      </div>
+      <div class="k-flex-grow mb-md kd-border kd-rounded chart-item">
+        <Chart :style="{ height: '260px', width: 'auto' }">
+          <ChartTooltip :visible="true" />
+          <ChartLegend :visible="false"> </ChartLegend>
+          <ChartTitle :text="'Sales Distribution for the Last Year'" />
+          <ChartSeries>
+            <ChartSeriesItem
+              :auto-fit="true"
+              :type="'donut'"
+              :name="'HL Mountain Rear Weel'"
+              :data-items="year_sales"
+              :category-field="'kind'"
+              :field="'share'"
+            >
+              <ChartSeriesLabels
+                :position="'outsideEnd'"
+                :content="labelContent"
+              >
+              </ChartSeriesLabels>
+            </ChartSeriesItem>
+          </ChartSeries>
+        </Chart>
+      </div>
+    </div>
+    <Chart :style="{ height: '260px' }">
+      <ChartTooltip :visible="true" />
+      <ChartLegend :position="chartPosition" :labels="{ font: labelSize }">
+      </ChartLegend>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem
+          :labels="{ rotation: 'auto', padding: '3', font: labelSize }"
+          :categories="categories_months"
+        />
+      </ChartCategoryAxis>
+      <ChartTitle :text="'Revenue Trend per Product'" />
+      <ChartValueAxis>
+        <ChartValueAxisItem>
+          <ChartValueAxisLabels :font="labelSize" />
+        </ChartValueAxisItem>
+      </ChartValueAxis>
+      <ChartSeries>
+        <ChartSeriesItem
+          :stack="{ type: '100%' }"
+          :type="'area'"
+          :name="'LL Mountain Rear Weel'"
+          :data-items="ll_weel_revenue"
+        >
+        </ChartSeriesItem>
+        <ChartSeriesItem
+          :stack="{ type: '100%' }"
+          :type="'area'"
+          :name="'ML Mountain Rear Weel'"
+          :data-items="ml_weel_revenue"
+        >
+        </ChartSeriesItem>
+        <ChartSeriesItem
+          :stack="{ type: '100%' }"
+          :type="'area'"
+          :name="'HL Mountain Rear Weel'"
+          :data-items="hl_weel_revenue"
+        >
+        </ChartSeriesItem>
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+<script>
+import {
+  ChartSeriesLabels,
+  ChartSeriesMarkers,
+  ChartLegend,
+  ChartLegendTitle,
+  ChartValueAxisTitle,
+  ChartValueAxisLabels,
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartTitle,
+  ChartTooltip,
+  ChartValueAxis,
+  ChartValueAxisItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    ChartSeriesLabels,
+    ChartSeriesMarkers,
+    ChartLegend,
+    ChartLegendTitle,
+    ChartValueAxisTitle,
+    ChartValueAxisLabels,
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartTitle,
+    ChartTooltip,
+    ChartValueAxis,
+    ChartValueAxisItem,
+  },
+  computed: {
+    chartPosition() {
+      return window.innerWidth > 1000 ? 'right' : 'bottom';
+    },
+    labelSize() {
+      return window.innerWidth > 600
+        ? '12px Arial, sans-serif'
+        : '8px Arial, sans-serif';
+    },
+  },
+  data: function () {
+    return {
+      valueAxisLabels: {
+        padding: 3,
+        font: 'bold 16px Arial, sans-serif',
+      },
+      year_sales: [
+        {
+          kind: 'LL Mountain Rear Weel',
+          share: 201,
+        },
+        {
+          kind: 'ML Mountain Rear Weel',
+          share: 235,
+        },
+        {
+          kind: 'HL Mountain Rear Weel',
+          share: 283,
+        },
+      ],
+      hl_weel_series: [10, 40, 9, 30, 67, 54, 31, 42],
+      ml_weel_series: [12, 73, 12, 33, 11, 32, 44, 18],
+      ll_weel_series: [20, 40, 18, 32, 35, 11, 43, 2],
+      hl_weel_revenue: [
+        13422.62, 23559.48, 20056.31, 10798.09, 17080.62, 13154.04, 8049.48,
+        10012.77,
+      ],
+      ml_weel_revenue: [
+        8616.04, 16621.06, 15166.35, 6231.06, 11895.66, 11470.81, 5381.37,
+        6231.06,
+      ],
+      ll_weel_revenue: [
+        3849.72, 8577.45, 5470.65, 4525.11, 7226.67, 3782.18, 2026.17, 4525.11,
+      ],
+      total_revenue: [
+        2234234, 5233334, 4242342, 4233222, 3555334, 1434221, 3943343, 2533633,
+      ],
+      categories_months: [
+        'MAY',
+        'JUN',
+        'JUL',
+        'AUG',
+        'SEP',
+        'OCT',
+        'NOV',
+        'DEC',
+      ],
+    };
+  },
+  methods: {
+    labelContent(e) {
+      return `${e.category}: \n ${e.value} pcs`;
+    },
+  },
+};
+</script>
+
+<style>
+.chart-item {
+  width: 50%;
+  min-width: 500px;
+}
+
+@media only screen and (max-width: 600px) {
+  .chart-item {
+    min-width: 250px;
+  }
+}
+</style>
diff --git a/vue-options-api-demos/charts/sankey/auto-layout/main.js b/vue-options-api-demos/charts/sankey/auto-layout/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/auto-layout/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/sankey/auto-layout/main.vue b/vue-options-api-demos/charts/sankey/auto-layout/main.vue
new file mode 100644
index 00000000..7ce31b34
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/auto-layout/main.vue
@@ -0,0 +1,55 @@
+<template>
+ <div>
+    <Switch @change="onChange" :checked="autoLayout" />
+    <Sankey
+      :dataNodes="dataNodes"
+      :dataLinks="dataLinks"
+      :style="{ 'max-width': '700px', height: '250px', margin: 'auto' }"
+      :links="{ colorType: 'source' }"
+      :disableAutoLayout="!autoLayout"
+    >
+    </Sankey>
+  </div>
+</template>
+
+<script>
+import { Sankey } from '@progress/kendo-vue-charts';
+import { Switch } from '@progress/kendo-vue-inputs';
+
+const data = {
+  nodes: [
+    { id: "node 1", label: { text: "node 1" } },
+    { id: "node 2", label: { text: "node 2" } },
+    { id: "node 3", label: { text: "node 3" } },
+    { id: "node 4", label: { text: "node 4" } },
+    { id: "node 5", label: { text: "node 5" } },
+  ],
+  links: [
+    { sourceId: "node 2", targetId: "node 3", value: 4 },
+    { sourceId: "node 1", targetId: "node 3", value: 3 },
+    { sourceId: "node 1", targetId: "node 5", value: 1 },
+    { sourceId: "node 3", targetId: "node 4", value: 6 },
+    { sourceId: "node 3", targetId: "node 5", value: 1 },
+  ],
+};
+
+export default {
+    components: {
+      Sankey,
+      Switch
+    },
+    methods: {
+      onChange(e) {
+        this.autoLayout = e.target.value;
+      }
+    },
+    data() {
+      return {
+        autoLayout: true,
+        dataNodes: data.nodes,
+        dataLinks: data.links
+      };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/charts/sankey/customization/data/main.js b/vue-options-api-demos/charts/sankey/customization/data/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/customization/data/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/sankey/customization/data/main.vue b/vue-options-api-demos/charts/sankey/customization/data/main.vue
new file mode 100644
index 00000000..4a95ba52
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/customization/data/main.vue
@@ -0,0 +1,59 @@
+<template>
+ <div>
+    <Sankey
+      :dataNodes="dataNodes"
+      :dataLinks="dataLinks"
+      :style="{ 'max-width': '700px', height: '250px', margin: 'auto' }"
+      :links="{ colorType: 'source' }"
+    >
+    </Sankey>
+  </div>
+</template>
+
+<script>
+import { Sankey } from '@progress/kendo-vue-charts';
+
+const data = {
+  nodes: [
+    { id: "female", label: { text: "Female (58%)" } },
+    { id: "male", label: { text: "Male (42%)" } },
+    { id: "tablet", label: { text: "Tablet (12%)" } },
+    { id: "mobile", label: { text: "Mobile (40%)" }, offset: { left: 20 } },
+    { id: "desktop", label: { text: "Desktop (48%)" } },
+    { id: "< 18", label: { text: "< 18 years (8%)" } },
+    { id: "18-26", label: { text: "18-26 years (35%)" } },
+    { id: "27-40", label: { text: "27-40 years (38%)" } },
+    { id: "> 40", label: { text: "> 40 years (19%)" } },
+  ],
+  links: [
+    { sourceId: "female", targetId: "tablet", value: 12 },
+    { sourceId: "female", targetId: "mobile", value: 14 },
+    { sourceId: "female", targetId: "desktop", value: 32 },
+    { sourceId: "male", targetId: "mobile", value: 26 },
+    { sourceId: "male", targetId: "desktop", value: 16 },
+    { sourceId: "tablet", targetId: "< 18", value: 4 },
+    { sourceId: "tablet", targetId: "> 40", value: 8 },
+    { sourceId: "mobile", targetId: "< 18", value: 4 },
+    { sourceId: "mobile", targetId: "18-26", value: 24 },
+    { sourceId: "mobile", targetId: "27-40", value: 10 },
+    { sourceId: "mobile", targetId: "> 40", value: 2 },
+    { sourceId: "desktop", targetId: "18-26", value: 11 },
+    { sourceId: "desktop", targetId: "27-40", value: 28 },
+    { sourceId: "desktop", targetId: "> 40", value: 9 },
+  ],
+};
+
+export default {
+    components: {
+      Sankey
+    },
+    methods: {},
+    data() {
+      return {
+        dataNodes: data.nodes,
+        dataLinks: data.links
+      };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/charts/sankey/customization/defaults/main.js b/vue-options-api-demos/charts/sankey/customization/defaults/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/customization/defaults/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/sankey/customization/defaults/main.vue b/vue-options-api-demos/charts/sankey/customization/defaults/main.vue
new file mode 100644
index 00000000..e475bcba
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/customization/defaults/main.vue
@@ -0,0 +1,61 @@
+<template>
+ <div>
+    <Sankey
+      :dataNodes="dataNodes"
+      :dataLinks="dataLinks"
+      :style="{ 'max-width': '700px', height: '250px', margin: 'auto' }"
+      :links="{ colorType: 'static', color: 'green' }"
+      :nodes="{ color: 'red', opacity: 0.5 }"
+      :labels="{ color: 'blue', opacity: 0.5 }"
+    >
+    </Sankey>
+  </div>
+</template>
+
+<script>
+import { Sankey } from '@progress/kendo-vue-charts';
+
+const data = {
+  nodes: [
+    { id: "female", label: { text: "Female (58%)" } },
+    { id: "male", label: { text: "Male (42%)" } },
+    { id: "tablet", label: { text: "Tablet (12%)" } },
+    { id: "mobile", label: { text: "Mobile (40%)" } },
+    { id: "desktop", label: { text: "Desktop (48%)" } },
+    { id: "< 18", label: { text: "< 18 years (8%)" } },
+    { id: "18-26", label: { text: "18-26 years (35%)" } },
+    { id: "27-40", label: { text: "27-40 years (38%)" } },
+    { id: "> 40", label: { text: "> 40 years (19%)" } },
+  ],
+  links: [
+    { sourceId: "female", targetId: "tablet", value: 12 },
+    { sourceId: "female", targetId: "mobile", value: 14 },
+    { sourceId: "female", targetId: "desktop", value: 32 },
+    { sourceId: "male", targetId: "mobile", value: 26 },
+    { sourceId: "male", targetId: "desktop", value: 16 },
+    { sourceId: "tablet", targetId: "< 18", value: 4 },
+    { sourceId: "tablet", targetId: "> 40", value: 8 },
+    { sourceId: "mobile", targetId: "< 18", value: 4 },
+    { sourceId: "mobile", targetId: "18-26", value: 24 },
+    { sourceId: "mobile", targetId: "27-40", value: 10 },
+    { sourceId: "mobile", targetId: "> 40", value: 2 },
+    { sourceId: "desktop", targetId: "18-26", value: 11 },
+    { sourceId: "desktop", targetId: "27-40", value: 28 },
+    { sourceId: "desktop", targetId: "> 40", value: 9 },
+  ],
+};
+
+export default {
+    components: {
+      Sankey
+    },
+    methods: {},
+    data() {
+      return {
+        dataNodes: data.nodes,
+        dataLinks: data.links
+      };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/charts/sankey/data-binding/datasets-customize-objects/main.js b/vue-options-api-demos/charts/sankey/data-binding/datasets-customize-objects/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/data-binding/datasets-customize-objects/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/sankey/data-binding/datasets-customize-objects/main.vue b/vue-options-api-demos/charts/sankey/data-binding/datasets-customize-objects/main.vue
new file mode 100644
index 00000000..0533d4a7
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/data-binding/datasets-customize-objects/main.vue
@@ -0,0 +1,65 @@
+<template>
+ <div>
+    <Sankey
+      :dataNodes="dataNodes"
+      :dataLinks="dataLinks"
+      :style="{ 'max-width': '700px', height: '250px', margin: 'auto' }"
+      :links="{ colorType: 'source' }"
+      :title="{ position: 'top', text: 'WebSite Visits\' Statistic', font: '500 18px sans-serif' }"
+    >
+    </Sankey>
+  </div>
+</template>
+
+<script>
+import { Sankey, createSankeyData } from '@progress/kendo-vue-charts';
+
+const trafficData = [
+    { gender: 'Female', device: 'Tablet', age: '< 18', value: 4 },
+    { gender: 'Female', device: 'Tablet', age: "> 40", value: 8 },
+    { gender: 'Female', device: 'Mobile', age: '< 18', value: 4 },
+    { gender: 'Female', device: 'Mobile', age: '18-26', value: 24 },
+    { gender: 'Female', device: 'Mobile', age: '27-40', value: 10 },
+    { gender: 'Female', device: 'Mobile', age: '> 40', value: 2 },
+    { gender: 'Female', device: 'Desktop', age: '18-26', value: 11 },
+    { gender: 'Female', device: 'Desktop', age: '27-40', value: 28 },
+    { gender: 'Female', device: 'Desktop', age: '> 40', value: 9 },
+    { gender: 'Male', device: 'Mobile', age: '< 18', value: 4 },
+    { gender: 'Male', device: 'Mobile', age: '18-26', value: 11 },
+    { gender: 'Male', device: 'Mobile', age: '27-40', value: 28 },
+    { gender: 'Male', device: 'Mobile', age: '> 40', value: 9 },
+    { gender: 'Male', device: 'Desktop', age: '18-26', value: 11 },
+    { gender: 'Male', device: 'Desktop', age: '27-40', value: 28 },
+    { gender: 'Male', device: 'Desktop', age: '> 40', value: 9 },
+];
+
+const trafficDimensions = [
+    { value: item => item.gender },
+    { value: item => item.device },
+    { value: item => 'Age ' + item.age }
+];
+const trafficMeasure = { value: item => item.value };
+const data = createSankeyData(trafficData, trafficDimensions, trafficMeasure);
+
+data.nodes.forEach((node) => {
+    if (node.id % 2 === 0) {
+        node.color = 'lightblue';
+    } else {
+        node.color = 'lightgreen';
+    }
+});
+
+export default {
+    components: {
+      Sankey
+    },
+    methods: {},
+    data() {
+      return {
+        dataNodes: data.nodes,
+        dataLinks: data.links
+      };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/charts/sankey/data-binding/datasets-objects/main.js b/vue-options-api-demos/charts/sankey/data-binding/datasets-objects/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/data-binding/datasets-objects/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/sankey/data-binding/datasets-objects/main.vue b/vue-options-api-demos/charts/sankey/data-binding/datasets-objects/main.vue
new file mode 100644
index 00000000..4c275a94
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/data-binding/datasets-objects/main.vue
@@ -0,0 +1,57 @@
+<template>
+ <div>
+    <Sankey
+      :dataNodes="dataNodes"
+      :dataLinks="dataLinks"
+      :style="{ 'max-width': '700px', height: '250px', margin: 'auto' }"
+      :links="{ colorType: 'source' }"
+      :title="{ position: 'top', text: 'WebSite Visits\' Statistic', font: '500 18px sans-serif' }"
+    >
+    </Sankey>
+  </div>
+</template>
+
+<script>
+import { Sankey, createSankeyData } from '@progress/kendo-vue-charts';
+
+const trafficData = [
+    { gender: 'Female', device: 'Tablet', age: '< 18', value: 4 },
+    { gender: 'Female', device: 'Tablet', age: "> 40", value: 8 },
+    { gender: 'Female', device: 'Mobile', age: '< 18', value: 4 },
+    { gender: 'Female', device: 'Mobile', age: '18-26', value: 24 },
+    { gender: 'Female', device: 'Mobile', age: '27-40', value: 10 },
+    { gender: 'Female', device: 'Mobile', age: '> 40', value: 2 },
+    { gender: 'Female', device: 'Desktop', age: '18-26', value: 11 },
+    { gender: 'Female', device: 'Desktop', age: '27-40', value: 28 },
+    { gender: 'Female', device: 'Desktop', age: '> 40', value: 9 },
+    { gender: 'Male', device: 'Mobile', age: '< 18', value: 4 },
+    { gender: 'Male', device: 'Mobile', age: '18-26', value: 11 },
+    { gender: 'Male', device: 'Mobile', age: '27-40', value: 28 },
+    { gender: 'Male', device: 'Mobile', age: '> 40', value: 9 },
+    { gender: 'Male', device: 'Desktop', age: '18-26', value: 11 },
+    { gender: 'Male', device: 'Desktop', age: '27-40', value: 28 },
+    { gender: 'Male', device: 'Desktop', age: '> 40', value: 9 },
+];
+
+const trafficDimensions = [
+    { value: item => item.gender },
+    { value: item => item.device },
+    { value: item => 'Age ' + item.age }
+];
+const trafficMeasure = { value: item => item.value };
+const data = createSankeyData(trafficData, trafficDimensions, trafficMeasure);
+
+export default {
+    components: {
+      Sankey
+    },
+    methods: {},
+    data() {
+      return {
+        dataNodes: data.nodes,
+        dataLinks: data.links
+      };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/charts/sankey/elements/legend/main.js b/vue-options-api-demos/charts/sankey/elements/legend/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/elements/legend/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/sankey/elements/legend/main.vue b/vue-options-api-demos/charts/sankey/elements/legend/main.vue
new file mode 100644
index 00000000..8591b392
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/elements/legend/main.vue
@@ -0,0 +1,60 @@
+<template>
+ <div>
+    <Sankey
+      :dataNodes="dataNodes"
+      :dataLinks="dataLinks"
+      :style="{ 'max-width': '700px', height: '250px', margin: 'auto' }"
+      :links="{ colorType: 'source' }"
+      :legend="{ position: 'top' }"
+    >
+    </Sankey>
+  </div>
+</template>
+
+<script>
+import { Sankey } from '@progress/kendo-vue-charts';
+
+const data = {
+  nodes: [
+    { id: "female", label: { text: "Female (58%)" } },
+    { id: "male", label: { text: "Male (42%)" } },
+    { id: "tablet", label: { text: "Tablet (12%)" } },
+    { id: "mobile", label: { text: "Mobile (40%)" } },
+    { id: "desktop", label: { text: "Desktop (48%)" } },
+    { id: "< 18", label: { text: "< 18 years (8%)" } },
+    { id: "18-26", label: { text: "18-26 years (35%)" } },
+    { id: "27-40", label: { text: "27-40 years (38%)" } },
+    { id: "> 40", label: { text: "> 40 years (19%)" } },
+  ],
+  links: [
+    { sourceId: "female", targetId: "tablet", value: 12 },
+    { sourceId: "female", targetId: "mobile", value: 14 },
+    { sourceId: "female", targetId: "desktop", value: 32 },
+    { sourceId: "male", targetId: "mobile", value: 26 },
+    { sourceId: "male", targetId: "desktop", value: 16 },
+    { sourceId: "tablet", targetId: "< 18", value: 4 },
+    { sourceId: "tablet", targetId: "> 40", value: 8 },
+    { sourceId: "mobile", targetId: "< 18", value: 4 },
+    { sourceId: "mobile", targetId: "18-26", value: 24 },
+    { sourceId: "mobile", targetId: "27-40", value: 10 },
+    { sourceId: "mobile", targetId: "> 40", value: 2 },
+    { sourceId: "desktop", targetId: "18-26", value: 11 },
+    { sourceId: "desktop", targetId: "27-40", value: 28 },
+    { sourceId: "desktop", targetId: "> 40", value: 9 },
+  ],
+};
+
+export default {
+    components: {
+      Sankey
+    },
+    methods: {},
+    data() {
+      return {
+        dataNodes: data.nodes,
+        dataLinks: data.links
+      };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/charts/sankey/elements/title/main.js b/vue-options-api-demos/charts/sankey/elements/title/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/elements/title/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/sankey/elements/title/main.vue b/vue-options-api-demos/charts/sankey/elements/title/main.vue
new file mode 100644
index 00000000..01b6cea6
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/elements/title/main.vue
@@ -0,0 +1,60 @@
+<template>
+ <div>
+    <Sankey
+      :dataNodes="dataNodes"
+      :dataLinks="dataLinks"
+      :style="{ 'max-width': '700px', height: '250px', margin: 'auto' }"
+      :links="{ colorType: 'source' }"
+      :title="{ position: 'top', text: 'WebSite Visits\' Statistic', font: '500 18px sans-serif' }"
+    >
+    </Sankey>
+  </div>
+</template>
+
+<script>
+import { Sankey } from '@progress/kendo-vue-charts';
+
+const data = {
+  nodes: [
+    { id: "female", label: { text: "Female (58%)" } },
+    { id: "male", label: { text: "Male (42%)" } },
+    { id: "tablet", label: { text: "Tablet (12%)" } },
+    { id: "mobile", label: { text: "Mobile (40%)" } },
+    { id: "desktop", label: { text: "Desktop (48%)" } },
+    { id: "< 18", label: { text: "< 18 years (8%)" } },
+    { id: "18-26", label: { text: "18-26 years (35%)" } },
+    { id: "27-40", label: { text: "27-40 years (38%)" } },
+    { id: "> 40", label: { text: "> 40 years (19%)" } },
+  ],
+  links: [
+    { sourceId: "female", targetId: "tablet", value: 12 },
+    { sourceId: "female", targetId: "mobile", value: 14 },
+    { sourceId: "female", targetId: "desktop", value: 32 },
+    { sourceId: "male", targetId: "mobile", value: 26 },
+    { sourceId: "male", targetId: "desktop", value: 16 },
+    { sourceId: "tablet", targetId: "< 18", value: 4 },
+    { sourceId: "tablet", targetId: "> 40", value: 8 },
+    { sourceId: "mobile", targetId: "< 18", value: 4 },
+    { sourceId: "mobile", targetId: "18-26", value: 24 },
+    { sourceId: "mobile", targetId: "27-40", value: 10 },
+    { sourceId: "mobile", targetId: "> 40", value: 2 },
+    { sourceId: "desktop", targetId: "18-26", value: 11 },
+    { sourceId: "desktop", targetId: "27-40", value: 28 },
+    { sourceId: "desktop", targetId: "> 40", value: 9 },
+  ],
+};
+
+export default {
+    components: {
+      Sankey
+    },
+    methods: {},
+    data() {
+      return {
+        dataNodes: data.nodes,
+        dataLinks: data.links
+      };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/charts/sankey/elements/tooltip/custom-behaviour/main.js b/vue-options-api-demos/charts/sankey/elements/tooltip/custom-behaviour/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/elements/tooltip/custom-behaviour/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/sankey/elements/tooltip/custom-behaviour/main.vue b/vue-options-api-demos/charts/sankey/elements/tooltip/custom-behaviour/main.vue
new file mode 100644
index 00000000..03bfa929
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/elements/tooltip/custom-behaviour/main.vue
@@ -0,0 +1,61 @@
+<template>
+ <div>
+    <Sankey
+      :dataNodes="dataNodes"
+      :dataLinks="dataLinks"
+      :style="{ 'max-width': '700px', height: '250px', margin: 'auto' }"
+      :links="{ colorType: 'source' }"
+      :legend="{ visible: false }"
+      :tooltip="{ followPointer: true, delay: 0 }"
+    >
+    </Sankey>
+  </div>
+</template>
+
+<script>
+import { Sankey } from '@progress/kendo-vue-charts';
+
+const data = {
+  nodes: [
+    { id: "female", label: { text: "Female (58%)" } },
+    { id: "male", label: { text: "Male (42%)" } },
+    { id: "tablet", label: { text: "Tablet (12%)" } },
+    { id: "mobile", label: { text: "Mobile (40%)" } },
+    { id: "desktop", label: { text: "Desktop (48%)" } },
+    { id: "< 18", label: { text: "< 18 years (8%)" } },
+    { id: "18-26", label: { text: "18-26 years (35%)" } },
+    { id: "27-40", label: { text: "27-40 years (38%)" } },
+    { id: "> 40", label: { text: "> 40 years (19%)" } },
+  ],
+  links: [
+    { sourceId: "female", targetId: "tablet", value: 12 },
+    { sourceId: "female", targetId: "mobile", value: 14 },
+    { sourceId: "female", targetId: "desktop", value: 32 },
+    { sourceId: "male", targetId: "mobile", value: 26 },
+    { sourceId: "male", targetId: "desktop", value: 16 },
+    { sourceId: "tablet", targetId: "< 18", value: 4 },
+    { sourceId: "tablet", targetId: "> 40", value: 8 },
+    { sourceId: "mobile", targetId: "< 18", value: 4 },
+    { sourceId: "mobile", targetId: "18-26", value: 24 },
+    { sourceId: "mobile", targetId: "27-40", value: 10 },
+    { sourceId: "mobile", targetId: "> 40", value: 2 },
+    { sourceId: "desktop", targetId: "18-26", value: 11 },
+    { sourceId: "desktop", targetId: "27-40", value: 28 },
+    { sourceId: "desktop", targetId: "> 40", value: 9 },
+  ],
+};
+
+export default {
+    components: {
+      Sankey
+    },
+    methods: {},
+    data() {
+      return {
+        dataNodes: data.nodes,
+        dataLinks: data.links
+      };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/charts/sankey/elements/tooltip/custom-rendering/main.js b/vue-options-api-demos/charts/sankey/elements/tooltip/custom-rendering/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/elements/tooltip/custom-rendering/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/sankey/elements/tooltip/custom-rendering/main.vue b/vue-options-api-demos/charts/sankey/elements/tooltip/custom-rendering/main.vue
new file mode 100644
index 00000000..00800503
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/elements/tooltip/custom-rendering/main.vue
@@ -0,0 +1,71 @@
+<template>
+ <div>
+    <Sankey
+      :dataNodes="dataNodes"
+      :dataLinks="dataLinks"
+      :style="{ 'max-width': '700px', height: '250px', margin: 'auto' }"
+      :links="{ colorType: 'source' }"
+      :legend="{ visible: false }"
+      :tooltip="{ nodeContent: 'nodeContent', linkContent: 'linkContent' }"
+    >
+      <template v-slot:nodeContent="{props}">
+            <TooltipNodeContent v-bind="props" />
+        </template>
+        <template v-slot:linkContent="{props}">
+            <TooltipLinkContent v-bind="props" />
+        </template>
+    </Sankey>
+  </div>
+</template>
+
+<script>
+import { Sankey } from '@progress/kendo-vue-charts';
+import TooltipNodeContent from './tooltip-node-content.vue';
+import TooltipLinkContent from './tooltip-link-content.vue';
+
+const data = {
+  nodes: [
+    { id: "female", label: { text: "Female (58%)" } },
+    { id: "male", label: { text: "Male (42%)" } },
+    { id: "tablet", label: { text: "Tablet (12%)" } },
+    { id: "mobile", label: { text: "Mobile (40%)" } },
+    { id: "desktop", label: { text: "Desktop (48%)" } },
+    { id: "< 18", label: { text: "< 18 years (8%)" } },
+    { id: "18-26", label: { text: "18-26 years (35%)" } },
+    { id: "27-40", label: { text: "27-40 years (38%)" } },
+    { id: "> 40", label: { text: "> 40 years (19%)" } },
+  ],
+  links: [
+    { sourceId: "female", targetId: "tablet", value: 12 },
+    { sourceId: "female", targetId: "mobile", value: 14 },
+    { sourceId: "female", targetId: "desktop", value: 32 },
+    { sourceId: "male", targetId: "mobile", value: 26 },
+    { sourceId: "male", targetId: "desktop", value: 16 },
+    { sourceId: "tablet", targetId: "< 18", value: 4 },
+    { sourceId: "tablet", targetId: "> 40", value: 8 },
+    { sourceId: "mobile", targetId: "< 18", value: 4 },
+    { sourceId: "mobile", targetId: "18-26", value: 24 },
+    { sourceId: "mobile", targetId: "27-40", value: 10 },
+    { sourceId: "mobile", targetId: "> 40", value: 2 },
+    { sourceId: "desktop", targetId: "18-26", value: 11 },
+    { sourceId: "desktop", targetId: "27-40", value: 28 },
+    { sourceId: "desktop", targetId: "> 40", value: 9 },
+  ],
+};
+
+export default {
+    components: {
+      Sankey,
+      TooltipNodeContent,
+      TooltipLinkContent,
+    },
+    methods: {},
+    data() {
+      return {
+        dataNodes: data.nodes,
+        dataLinks: data.links
+      };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/charts/sankey/elements/tooltip/custom-rendering/tooltip-link-content.vue b/vue-options-api-demos/charts/sankey/elements/tooltip/custom-rendering/tooltip-link-content.vue
new file mode 100644
index 00000000..459c4ffd
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/elements/tooltip/custom-rendering/tooltip-link-content.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <span :style="{ color: dataItem.source.color }">{{ dataItem.source.label.text }}</span>
+        <span> -> </span>
+        <span :style="{ color: dataItem.target.color }">{{ dataItem.target.label.text }}</span>
+        <span> ({{ dataItem.value }} Units)</span>
+    </div>
+</template>
+<script>
+    export default {
+        props: {
+            dataItem: Object
+        }
+    }
+</script>
diff --git a/vue-options-api-demos/charts/sankey/elements/tooltip/custom-rendering/tooltip-node-content.vue b/vue-options-api-demos/charts/sankey/elements/tooltip/custom-rendering/tooltip-node-content.vue
new file mode 100644
index 00000000..07af7d62
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/elements/tooltip/custom-rendering/tooltip-node-content.vue
@@ -0,0 +1,13 @@
+<template>
+    <div>
+        <span :style="{ color: dataItem.color }">{{ dataItem.label.text }}</span>
+        <span> ({{ dataItem.value }} Units)</span>
+    </div>
+</template>
+<script>
+    export default {
+        props: {
+            dataItem: Object
+        }
+    }
+</script>
diff --git a/vue-options-api-demos/charts/sankey/elements/tooltip/default/main.js b/vue-options-api-demos/charts/sankey/elements/tooltip/default/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/elements/tooltip/default/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/sankey/elements/tooltip/default/main.vue b/vue-options-api-demos/charts/sankey/elements/tooltip/default/main.vue
new file mode 100644
index 00000000..1d239196
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/elements/tooltip/default/main.vue
@@ -0,0 +1,60 @@
+<template>
+ <div>
+    <Sankey
+      :dataNodes="dataNodes"
+      :dataLinks="dataLinks"
+      :style="{ 'max-width': '700px', height: '250px', margin: 'auto' }"
+      :links="{ colorType: 'source' }"
+      :tooltip="{ visible: true }"
+    >
+    </Sankey>
+  </div>
+</template>
+
+<script>
+import { Sankey } from '@progress/kendo-vue-charts';
+
+const data = {
+  nodes: [
+    { id: "female", label: { text: "Female (58%)" } },
+    { id: "male", label: { text: "Male (42%)" } },
+    { id: "tablet", label: { text: "Tablet (12%)" } },
+    { id: "mobile", label: { text: "Mobile (40%)" } },
+    { id: "desktop", label: { text: "Desktop (48%)" } },
+    { id: "< 18", label: { text: "< 18 years (8%)" } },
+    { id: "18-26", label: { text: "18-26 years (35%)" } },
+    { id: "27-40", label: { text: "27-40 years (38%)" } },
+    { id: "> 40", label: { text: "> 40 years (19%)" } },
+  ],
+  links: [
+    { sourceId: "female", targetId: "tablet", value: 12 },
+    { sourceId: "female", targetId: "mobile", value: 14 },
+    { sourceId: "female", targetId: "desktop", value: 32 },
+    { sourceId: "male", targetId: "mobile", value: 26 },
+    { sourceId: "male", targetId: "desktop", value: 16 },
+    { sourceId: "tablet", targetId: "< 18", value: 4 },
+    { sourceId: "tablet", targetId: "> 40", value: 8 },
+    { sourceId: "mobile", targetId: "< 18", value: 4 },
+    { sourceId: "mobile", targetId: "18-26", value: 24 },
+    { sourceId: "mobile", targetId: "27-40", value: 10 },
+    { sourceId: "mobile", targetId: "> 40", value: 2 },
+    { sourceId: "desktop", targetId: "18-26", value: 11 },
+    { sourceId: "desktop", targetId: "27-40", value: 28 },
+    { sourceId: "desktop", targetId: "> 40", value: 9 },
+  ],
+};
+
+export default {
+    components: {
+      Sankey
+    },
+    methods: {},
+    data() {
+      return {
+        dataNodes: data.nodes,
+        dataLinks: data.links
+      };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/charts/sankey/events/main.js b/vue-options-api-demos/charts/sankey/events/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/events/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/sankey/events/main.vue b/vue-options-api-demos/charts/sankey/events/main.vue
new file mode 100644
index 00000000..a375254e
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/events/main.vue
@@ -0,0 +1,71 @@
+<template>
+ <div>
+  <span>Event: {{ eventType }}</span>
+  <Sankey
+    :dataNodes="dataNodes"
+    :dataLinks="dataLinks"
+    :style="{ 'max-width': '700px', height: '250px', margin: 'auto' }"
+    :links="{ colorType: 'source' }"
+    @nodeclick="onEvent"
+    @linkclick="onEvent"
+    @nodeenter="onEvent"
+    @nodeleave="onEvent"
+    @linkenter="onEvent"
+    @linkleave="onEvent"
+  >
+  </Sankey>
+</div>
+</template>
+
+<script>
+import { Sankey } from '@progress/kendo-vue-charts';
+
+const data = {
+  nodes: [
+    { id: "female", label: { text: "Female (58%)" } },
+    { id: "male", label: { text: "Male (42%)" } },
+    { id: "tablet", label: { text: "Tablet (12%)" } },
+    { id: "mobile", label: { text: "Mobile (40%)" } },
+    { id: "desktop", label: { text: "Desktop (48%)" } },
+    { id: "< 18", label: { text: "< 18 years (8%)" } },
+    { id: "18-26", label: { text: "18-26 years (35%)" } },
+    { id: "27-40", label: { text: "27-40 years (38%)" } },
+    { id: "> 40", label: { text: "> 40 years (19%)" } },
+  ],
+  links: [
+    { sourceId: "female", targetId: "tablet", value: 12 },
+    { sourceId: "female", targetId: "mobile", value: 14 },
+    { sourceId: "female", targetId: "desktop", value: 32 },
+    { sourceId: "male", targetId: "mobile", value: 26 },
+    { sourceId: "male", targetId: "desktop", value: 16 },
+    { sourceId: "tablet", targetId: "< 18", value: 4 },
+    { sourceId: "tablet", targetId: "> 40", value: 8 },
+    { sourceId: "mobile", targetId: "< 18", value: 4 },
+    { sourceId: "mobile", targetId: "18-26", value: 24 },
+    { sourceId: "mobile", targetId: "27-40", value: 10 },
+    { sourceId: "mobile", targetId: "> 40", value: 2 },
+    { sourceId: "desktop", targetId: "18-26", value: 11 },
+    { sourceId: "desktop", targetId: "27-40", value: 28 },
+    { sourceId: "desktop", targetId: "> 40", value: 9 },
+  ],
+};
+
+export default {
+    components: {
+      Sankey
+    },
+    methods: {
+      onEvent(e) {
+        this.eventType = e.type;
+      }
+    },
+    data() {
+      return {
+        dataNodes: data.nodes,
+        dataLinks: data.links,
+        eventType: ''
+      };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/charts/sankey/export/custom/main.js b/vue-options-api-demos/charts/sankey/export/custom/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/export/custom/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/sankey/export/custom/main.vue b/vue-options-api-demos/charts/sankey/export/custom/main.vue
new file mode 100644
index 00000000..d2a26022
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/export/custom/main.vue
@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <Button @click="exportPDF">Export</Button>
+    <Sankey
+      ref="sankey"
+      :dataNodes="dataNodes"
+      :dataLinks="dataLinks"
+      :style="{ 'max-width': '700px', height: '250px', margin: 'auto' }"
+      :links="{ colorType: 'source' }"
+      :title="{ position: 'top', text: 'WebSite Visits\' Statistic', font: '500 18px sans-serif' }"
+    >
+    </Sankey>
+  </div>
+</template>
+
+<script>
+import { Sankey } from '@progress/kendo-vue-charts';
+import { Button } from "@progress/kendo-vue-buttons";
+import { exportPDF } from "@progress/kendo-drawing";
+import { saveAs } from "@progress/kendo-file-saver";
+
+const data = {
+  nodes: [
+    { id: "female", label: { text: "Female (58%)" } },
+    { id: "male", label: { text: "Male (42%)" } },
+    { id: "tablet", label: { text: "Tablet (12%)" } },
+    { id: "mobile", label: { text: "Mobile (40%)" } },
+    { id: "desktop", label: { text: "Desktop (48%)" } },
+    { id: "< 18", label: { text: "< 18 years (8%)" } },
+    { id: "18-26", label: { text: "18-26 years (35%)" } },
+    { id: "27-40", label: { text: "27-40 years (38%)" } },
+    { id: "> 40", label: { text: "> 40 years (19%)" } },
+  ],
+  links: [
+    { sourceId: "female", targetId: "tablet", value: 12 },
+    { sourceId: "female", targetId: "mobile", value: 14 },
+    { sourceId: "female", targetId: "desktop", value: 32 },
+    { sourceId: "male", targetId: "mobile", value: 26 },
+    { sourceId: "male", targetId: "desktop", value: 16 },
+    { sourceId: "tablet", targetId: "< 18", value: 4 },
+    { sourceId: "tablet", targetId: "> 40", value: 8 },
+    { sourceId: "mobile", targetId: "< 18", value: 4 },
+    { sourceId: "mobile", targetId: "18-26", value: 24 },
+    { sourceId: "mobile", targetId: "27-40", value: 10 },
+    { sourceId: "mobile", targetId: "> 40", value: 2 },
+    { sourceId: "desktop", targetId: "18-26", value: 11 },
+    { sourceId: "desktop", targetId: "27-40", value: 28 },
+    { sourceId: "desktop", targetId: "> 40", value: 9 },
+  ],
+};
+
+export default {
+    components: {
+      Sankey
+    },
+    methods: {
+      exportPDF() {
+        const sankeyVisual = this.$refs.sankey.exportVisual({
+          width: 600,
+          height: 200,
+          options: {
+            labels: {
+              color: "red",
+            },
+            legend: {
+              visible: false,
+            }
+          },
+        });
+
+        exportPDF(sankeyVisual, {
+          paperSize: "A4",
+          margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "2cm" },
+          landscape: true,
+        })
+          .then((dataURI) => {
+            saveAs(dataURI, "sankey.pdf");
+          });
+      }
+    },
+    data() {
+      return {
+        dataNodes: data.nodes,
+        dataLinks: data.links
+      };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/charts/sankey/export/image-size/main.js b/vue-options-api-demos/charts/sankey/export/image-size/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/export/image-size/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/sankey/export/image-size/main.vue b/vue-options-api-demos/charts/sankey/export/image-size/main.vue
new file mode 100644
index 00000000..8e2e73bb
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/export/image-size/main.vue
@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <Button @click="exportImage">Export to Image</Button>
+    <Sankey
+      ref="sankey"
+      :dataNodes="dataNodes"
+      :dataLinks="dataLinks"
+      :style="{ 'max-width': '700px', height: '250px', margin: 'auto' }"
+      :links="{ colorType: 'source' }"
+      :title="{ position: 'top', text: 'WebSite Visits\' Statistic', font: '500 18px sans-serif' }"
+    >
+    </Sankey>
+  </div>
+</template>
+
+<script>
+import { Sankey } from '@progress/kendo-vue-charts';
+import { Button } from "@progress/kendo-vue-buttons";
+import { exportImage } from "@progress/kendo-drawing";
+import { saveAs } from "@progress/kendo-file-saver";
+
+const data = {
+  nodes: [
+    { id: "female", label: { text: "Female (58%)" } },
+    { id: "male", label: { text: "Male (42%)" } },
+    { id: "tablet", label: { text: "Tablet (12%)" } },
+    { id: "mobile", label: { text: "Mobile (40%)" } },
+    { id: "desktop", label: { text: "Desktop (48%)" } },
+    { id: "< 18", label: { text: "< 18 years (8%)" } },
+    { id: "18-26", label: { text: "18-26 years (35%)" } },
+    { id: "27-40", label: { text: "27-40 years (38%)" } },
+    { id: "> 40", label: { text: "> 40 years (19%)" } },
+  ],
+  links: [
+    { sourceId: "female", targetId: "tablet", value: 12 },
+    { sourceId: "female", targetId: "mobile", value: 14 },
+    { sourceId: "female", targetId: "desktop", value: 32 },
+    { sourceId: "male", targetId: "mobile", value: 26 },
+    { sourceId: "male", targetId: "desktop", value: 16 },
+    { sourceId: "tablet", targetId: "< 18", value: 4 },
+    { sourceId: "tablet", targetId: "> 40", value: 8 },
+    { sourceId: "mobile", targetId: "< 18", value: 4 },
+    { sourceId: "mobile", targetId: "18-26", value: 24 },
+    { sourceId: "mobile", targetId: "27-40", value: 10 },
+    { sourceId: "mobile", targetId: "> 40", value: 2 },
+    { sourceId: "desktop", targetId: "18-26", value: 11 },
+    { sourceId: "desktop", targetId: "27-40", value: 28 },
+    { sourceId: "desktop", targetId: "> 40", value: 9 },
+  ],
+};
+
+export default {
+    components: {
+      Sankey
+    },
+    methods: {
+      exportImage() {
+        exportImage(this.$refs.sankey.exportVisual(), {
+            width: 1200,
+            height: 800
+        })
+          .then((dataURI) => {
+            saveAs(dataURI, "sankey-large.png");
+          });
+      }
+    },
+    data() {
+      return {
+        dataNodes: data.nodes,
+        dataLinks: data.links
+      };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/charts/sankey/export/image/main.js b/vue-options-api-demos/charts/sankey/export/image/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/export/image/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/sankey/export/image/main.vue b/vue-options-api-demos/charts/sankey/export/image/main.vue
new file mode 100644
index 00000000..9b72ed83
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/export/image/main.vue
@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <Button @click="exportImage">Export to Image</Button>
+    <Sankey
+      ref="sankey"
+      :dataNodes="dataNodes"
+      :dataLinks="dataLinks"
+      :style="{ 'max-width': '700px', height: '250px', margin: 'auto' }"
+      :links="{ colorType: 'source' }"
+      :title="{ position: 'top', text: 'WebSite Visits\' Statistic', font: '500 18px sans-serif' }"
+    >
+    </Sankey>
+  </div>
+</template>
+
+<script>
+import { Sankey } from '@progress/kendo-vue-charts';
+import { Button } from "@progress/kendo-vue-buttons";
+import { exportImage } from "@progress/kendo-drawing";
+import { saveAs } from "@progress/kendo-file-saver";
+
+const data = {
+  nodes: [
+    { id: "female", label: { text: "Female (58%)" } },
+    { id: "male", label: { text: "Male (42%)" } },
+    { id: "tablet", label: { text: "Tablet (12%)" } },
+    { id: "mobile", label: { text: "Mobile (40%)" } },
+    { id: "desktop", label: { text: "Desktop (48%)" } },
+    { id: "< 18", label: { text: "< 18 years (8%)" } },
+    { id: "18-26", label: { text: "18-26 years (35%)" } },
+    { id: "27-40", label: { text: "27-40 years (38%)" } },
+    { id: "> 40", label: { text: "> 40 years (19%)" } },
+  ],
+  links: [
+    { sourceId: "female", targetId: "tablet", value: 12 },
+    { sourceId: "female", targetId: "mobile", value: 14 },
+    { sourceId: "female", targetId: "desktop", value: 32 },
+    { sourceId: "male", targetId: "mobile", value: 26 },
+    { sourceId: "male", targetId: "desktop", value: 16 },
+    { sourceId: "tablet", targetId: "< 18", value: 4 },
+    { sourceId: "tablet", targetId: "> 40", value: 8 },
+    { sourceId: "mobile", targetId: "< 18", value: 4 },
+    { sourceId: "mobile", targetId: "18-26", value: 24 },
+    { sourceId: "mobile", targetId: "27-40", value: 10 },
+    { sourceId: "mobile", targetId: "> 40", value: 2 },
+    { sourceId: "desktop", targetId: "18-26", value: 11 },
+    { sourceId: "desktop", targetId: "27-40", value: 28 },
+    { sourceId: "desktop", targetId: "> 40", value: 9 },
+  ],
+};
+
+export default {
+    components: {
+      Sankey
+    },
+    methods: {
+      exportImage() {
+        exportImage(this.$refs.sankey.exportVisual())
+          .then((dataURI) => {
+            saveAs(dataURI, "sankey.png");
+          });
+      }
+    },
+    data() {
+      return {
+        dataNodes: data.nodes,
+        dataLinks: data.links
+      };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/charts/sankey/export/pdf-paper-size/main.js b/vue-options-api-demos/charts/sankey/export/pdf-paper-size/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/export/pdf-paper-size/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/sankey/export/pdf-paper-size/main.vue b/vue-options-api-demos/charts/sankey/export/pdf-paper-size/main.vue
new file mode 100644
index 00000000..0c8a94c1
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/export/pdf-paper-size/main.vue
@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <Button @click="exportPDF">Export to PDF</Button>
+    <Sankey
+      ref="sankey"
+      :dataNodes="dataNodes"
+      :dataLinks="dataLinks"
+      :style="{ 'max-width': '700px', height: '250px', margin: 'auto' }"
+      :links="{ colorType: 'source' }"
+      :title="{ position: 'top', text: 'WebSite Visits\' Statistic', font: '500 18px sans-serif' }"
+    >
+    </Sankey>
+  </div>
+</template>
+
+<script>
+import { Sankey } from '@progress/kendo-vue-charts';
+import { Button } from "@progress/kendo-vue-buttons";
+import { exportPDF } from "@progress/kendo-drawing";
+import { saveAs } from "@progress/kendo-file-saver";
+
+const data = {
+  nodes: [
+    { id: "female", label: { text: "Female (58%)" } },
+    { id: "male", label: { text: "Male (42%)" } },
+    { id: "tablet", label: { text: "Tablet (12%)" } },
+    { id: "mobile", label: { text: "Mobile (40%)" } },
+    { id: "desktop", label: { text: "Desktop (48%)" } },
+    { id: "< 18", label: { text: "< 18 years (8%)" } },
+    { id: "18-26", label: { text: "18-26 years (35%)" } },
+    { id: "27-40", label: { text: "27-40 years (38%)" } },
+    { id: "> 40", label: { text: "> 40 years (19%)" } },
+  ],
+  links: [
+    { sourceId: "female", targetId: "tablet", value: 12 },
+    { sourceId: "female", targetId: "mobile", value: 14 },
+    { sourceId: "female", targetId: "desktop", value: 32 },
+    { sourceId: "male", targetId: "mobile", value: 26 },
+    { sourceId: "male", targetId: "desktop", value: 16 },
+    { sourceId: "tablet", targetId: "< 18", value: 4 },
+    { sourceId: "tablet", targetId: "> 40", value: 8 },
+    { sourceId: "mobile", targetId: "< 18", value: 4 },
+    { sourceId: "mobile", targetId: "18-26", value: 24 },
+    { sourceId: "mobile", targetId: "27-40", value: 10 },
+    { sourceId: "mobile", targetId: "> 40", value: 2 },
+    { sourceId: "desktop", targetId: "18-26", value: 11 },
+    { sourceId: "desktop", targetId: "27-40", value: 28 },
+    { sourceId: "desktop", targetId: "> 40", value: 9 },
+  ],
+};
+
+// Converts mm to pixels @ 72 dpi
+// See [Dimensions and CSS Units]({% slug dimensionscssunits_drawing %}).
+function mmToPx(mm) {
+    return mm * 2.8347;
+}
+
+// Set page width to A4 minus 10mm margin on each side
+const PAGE_WIDTH = mmToPx(210 - 20);
+
+export default {
+    components: {
+      Sankey
+    },
+    methods: {
+      exportPDF() {
+        const visual = this.$refs.sankey.exportVisual({
+            // Restrict with do page width during export
+            width: PAGE_WIDTH,
+        });
+
+        exportPDF(visual, {
+            paperSize: 'A4',
+            margin: '1cm',
+        }).then((dataURI) => {
+            saveAs(dataURI, "sankey-sized.pdf");
+        });
+      }
+    },
+    data() {
+      return {
+        dataNodes: data.nodes,
+        dataLinks: data.links
+      };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/charts/sankey/export/pdf/main.js b/vue-options-api-demos/charts/sankey/export/pdf/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/export/pdf/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/sankey/export/pdf/main.vue b/vue-options-api-demos/charts/sankey/export/pdf/main.vue
new file mode 100644
index 00000000..7ee7ac4c
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/export/pdf/main.vue
@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <Button @click="exportPDF">Export to PDF</Button>
+    <Sankey
+      ref="sankey"
+      :dataNodes="dataNodes"
+      :dataLinks="dataLinks"
+      :style="{ 'max-width': '700px', height: '250px', margin: 'auto' }"
+      :links="{ colorType: 'source' }"
+      :title="{ position: 'top', text: 'WebSite Visits\' Statistic', font: '500 18px sans-serif' }"
+    >
+    </Sankey>
+  </div>
+</template>
+
+<script>
+import { Sankey } from '@progress/kendo-vue-charts';
+import { Button } from "@progress/kendo-vue-buttons";
+import { exportPDF } from "@progress/kendo-drawing";
+import { saveAs } from "@progress/kendo-file-saver";
+
+const data = {
+  nodes: [
+    { id: "female", label: { text: "Female (58%)" } },
+    { id: "male", label: { text: "Male (42%)" } },
+    { id: "tablet", label: { text: "Tablet (12%)" } },
+    { id: "mobile", label: { text: "Mobile (40%)" } },
+    { id: "desktop", label: { text: "Desktop (48%)" } },
+    { id: "< 18", label: { text: "< 18 years (8%)" } },
+    { id: "18-26", label: { text: "18-26 years (35%)" } },
+    { id: "27-40", label: { text: "27-40 years (38%)" } },
+    { id: "> 40", label: { text: "> 40 years (19%)" } },
+  ],
+  links: [
+    { sourceId: "female", targetId: "tablet", value: 12 },
+    { sourceId: "female", targetId: "mobile", value: 14 },
+    { sourceId: "female", targetId: "desktop", value: 32 },
+    { sourceId: "male", targetId: "mobile", value: 26 },
+    { sourceId: "male", targetId: "desktop", value: 16 },
+    { sourceId: "tablet", targetId: "< 18", value: 4 },
+    { sourceId: "tablet", targetId: "> 40", value: 8 },
+    { sourceId: "mobile", targetId: "< 18", value: 4 },
+    { sourceId: "mobile", targetId: "18-26", value: 24 },
+    { sourceId: "mobile", targetId: "27-40", value: 10 },
+    { sourceId: "mobile", targetId: "> 40", value: 2 },
+    { sourceId: "desktop", targetId: "18-26", value: 11 },
+    { sourceId: "desktop", targetId: "27-40", value: 28 },
+    { sourceId: "desktop", targetId: "> 40", value: 9 },
+  ],
+};
+
+export default {
+    components: {
+      Sankey
+    },
+    methods: {
+      exportPDF() {
+        exportPDF(this.$refs.sankey.exportVisual())
+          .then((dataURI) => {
+            saveAs(dataURI, "sankey.pdf");
+          });
+      }
+    },
+    data() {
+      return {
+        dataNodes: data.nodes,
+        dataLinks: data.links
+      };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/charts/sankey/export/svg/main.js b/vue-options-api-demos/charts/sankey/export/svg/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/export/svg/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/sankey/export/svg/main.vue b/vue-options-api-demos/charts/sankey/export/svg/main.vue
new file mode 100644
index 00000000..a55db62b
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/export/svg/main.vue
@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <Button @click="exportSVG">Export to SVG</Button>
+    <Sankey
+      ref="sankey"
+      :dataNodes="dataNodes"
+      :dataLinks="dataLinks"
+      :style="{ 'max-width': '700px', height: '250px', margin: 'auto' }"
+      :links="{ colorType: 'source' }"
+      :title="{ position: 'top', text: 'WebSite Visits\' Statistic', font: '500 18px sans-serif' }"
+    >
+    </Sankey>
+  </div>
+</template>
+
+<script>
+import { Sankey } from '@progress/kendo-vue-charts';
+import { Button } from "@progress/kendo-vue-buttons";
+import { exportSVG } from "@progress/kendo-drawing";
+import { saveAs } from "@progress/kendo-file-saver";
+
+const data = {
+  nodes: [
+    { id: "female", label: { text: "Female (58%)" } },
+    { id: "male", label: { text: "Male (42%)" } },
+    { id: "tablet", label: { text: "Tablet (12%)" } },
+    { id: "mobile", label: { text: "Mobile (40%)" } },
+    { id: "desktop", label: { text: "Desktop (48%)" } },
+    { id: "< 18", label: { text: "< 18 years (8%)" } },
+    { id: "18-26", label: { text: "18-26 years (35%)" } },
+    { id: "27-40", label: { text: "27-40 years (38%)" } },
+    { id: "> 40", label: { text: "> 40 years (19%)" } },
+  ],
+  links: [
+    { sourceId: "female", targetId: "tablet", value: 12 },
+    { sourceId: "female", targetId: "mobile", value: 14 },
+    { sourceId: "female", targetId: "desktop", value: 32 },
+    { sourceId: "male", targetId: "mobile", value: 26 },
+    { sourceId: "male", targetId: "desktop", value: 16 },
+    { sourceId: "tablet", targetId: "< 18", value: 4 },
+    { sourceId: "tablet", targetId: "> 40", value: 8 },
+    { sourceId: "mobile", targetId: "< 18", value: 4 },
+    { sourceId: "mobile", targetId: "18-26", value: 24 },
+    { sourceId: "mobile", targetId: "27-40", value: 10 },
+    { sourceId: "mobile", targetId: "> 40", value: 2 },
+    { sourceId: "desktop", targetId: "18-26", value: 11 },
+    { sourceId: "desktop", targetId: "27-40", value: 28 },
+    { sourceId: "desktop", targetId: "> 40", value: 9 },
+  ],
+};
+
+export default {
+    components: {
+      Sankey
+    },
+    methods: {
+      exportSVG() {
+        exportSVG(this.$refs.sankey.exportVisual())
+          .then((dataURI) => {
+            saveAs(dataURI, "sankey.svg");
+          });
+      }
+    },
+    data() {
+      return {
+        dataNodes: data.nodes,
+        dataLinks: data.links
+      };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/charts/sankey/keyboard-navigation/main.js b/vue-options-api-demos/charts/sankey/keyboard-navigation/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/keyboard-navigation/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/sankey/keyboard-navigation/main.vue b/vue-options-api-demos/charts/sankey/keyboard-navigation/main.vue
new file mode 100644
index 00000000..14eb201b
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/keyboard-navigation/main.vue
@@ -0,0 +1,60 @@
+<template>
+    <div>
+       <Sankey
+         :dataNodes="dataNodes"
+         :dataLinks="dataLinks"
+         :style="{ 'max-width': '700px', height: '250px', margin: 'auto' }"
+         :links="{ colorType: 'source' }"
+         :title="{ position: 'top', text: 'WebSite Visits\' Statistic', font: '500 18px sans-serif' }"
+       >
+       </Sankey>
+     </div>
+   </template>
+   
+   <script>
+   import { Sankey } from '@progress/kendo-vue-charts';
+   
+   const data = {
+     nodes: [
+       { id: "female", label: { text: "Female (58%)" } },
+       { id: "male", label: { text: "Male (42%)" } },
+       { id: "tablet", label: { text: "Tablet (12%)" } },
+       { id: "mobile", label: { text: "Mobile (40%)" } },
+       { id: "desktop", label: { text: "Desktop (48%)" } },
+       { id: "< 18", label: { text: "< 18 years (8%)" } },
+       { id: "18-26", label: { text: "18-26 years (35%)" } },
+       { id: "27-40", label: { text: "27-40 years (38%)" } },
+       { id: "> 40", label: { text: "> 40 years (19%)" } },
+     ],
+     links: [
+       { sourceId: "female", targetId: "tablet", value: 12 },
+       { sourceId: "female", targetId: "mobile", value: 14 },
+       { sourceId: "female", targetId: "desktop", value: 32 },
+       { sourceId: "male", targetId: "mobile", value: 26 },
+       { sourceId: "male", targetId: "desktop", value: 16 },
+       { sourceId: "tablet", targetId: "< 18", value: 4 },
+       { sourceId: "tablet", targetId: "> 40", value: 8 },
+       { sourceId: "mobile", targetId: "< 18", value: 4 },
+       { sourceId: "mobile", targetId: "18-26", value: 24 },
+       { sourceId: "mobile", targetId: "27-40", value: 10 },
+       { sourceId: "mobile", targetId: "> 40", value: 2 },
+       { sourceId: "desktop", targetId: "18-26", value: 11 },
+       { sourceId: "desktop", targetId: "27-40", value: 28 },
+       { sourceId: "desktop", targetId: "> 40", value: 9 },
+     ],
+   };
+   
+   export default {
+       components: {
+         Sankey
+       },
+       methods: {},
+       data() {
+         return {
+           dataNodes: data.nodes,
+           dataLinks: data.links
+         };
+       }
+   };
+   </script>
+   
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/sankey/overview/main.js b/vue-options-api-demos/charts/sankey/overview/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/overview/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/sankey/overview/main.vue b/vue-options-api-demos/charts/sankey/overview/main.vue
new file mode 100644
index 00000000..01b6cea6
--- /dev/null
+++ b/vue-options-api-demos/charts/sankey/overview/main.vue
@@ -0,0 +1,60 @@
+<template>
+ <div>
+    <Sankey
+      :dataNodes="dataNodes"
+      :dataLinks="dataLinks"
+      :style="{ 'max-width': '700px', height: '250px', margin: 'auto' }"
+      :links="{ colorType: 'source' }"
+      :title="{ position: 'top', text: 'WebSite Visits\' Statistic', font: '500 18px sans-serif' }"
+    >
+    </Sankey>
+  </div>
+</template>
+
+<script>
+import { Sankey } from '@progress/kendo-vue-charts';
+
+const data = {
+  nodes: [
+    { id: "female", label: { text: "Female (58%)" } },
+    { id: "male", label: { text: "Male (42%)" } },
+    { id: "tablet", label: { text: "Tablet (12%)" } },
+    { id: "mobile", label: { text: "Mobile (40%)" } },
+    { id: "desktop", label: { text: "Desktop (48%)" } },
+    { id: "< 18", label: { text: "< 18 years (8%)" } },
+    { id: "18-26", label: { text: "18-26 years (35%)" } },
+    { id: "27-40", label: { text: "27-40 years (38%)" } },
+    { id: "> 40", label: { text: "> 40 years (19%)" } },
+  ],
+  links: [
+    { sourceId: "female", targetId: "tablet", value: 12 },
+    { sourceId: "female", targetId: "mobile", value: 14 },
+    { sourceId: "female", targetId: "desktop", value: 32 },
+    { sourceId: "male", targetId: "mobile", value: 26 },
+    { sourceId: "male", targetId: "desktop", value: 16 },
+    { sourceId: "tablet", targetId: "< 18", value: 4 },
+    { sourceId: "tablet", targetId: "> 40", value: 8 },
+    { sourceId: "mobile", targetId: "< 18", value: 4 },
+    { sourceId: "mobile", targetId: "18-26", value: 24 },
+    { sourceId: "mobile", targetId: "27-40", value: 10 },
+    { sourceId: "mobile", targetId: "> 40", value: 2 },
+    { sourceId: "desktop", targetId: "18-26", value: 11 },
+    { sourceId: "desktop", targetId: "27-40", value: 28 },
+    { sourceId: "desktop", targetId: "> 40", value: 9 },
+  ],
+};
+
+export default {
+    components: {
+      Sankey
+    },
+    methods: {},
+    data() {
+      return {
+        dataNodes: data.nodes,
+        dataLinks: data.links
+      };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/charts/series-types/area/100-stacked/main.js b/vue-options-api-demos/charts/series-types/area/100-stacked/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/area/100-stacked/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/series-types/area/100-stacked/main.vue b/vue-options-api-demos/charts/series-types/area/100-stacked/main.vue
new file mode 100644
index 00000000..f3afad0e
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/area/100-stacked/main.vue
@@ -0,0 +1,29 @@
+<template>
+      <Chart>
+          <ChartSeries>
+              <ChartSeriesItem :type="'area'" :stack="{ type: '100%' }" :data-items="firstSeries" />
+              <ChartSeriesItem :type="'area'" :data-items="secondSeries" />
+          </ChartSeries>
+      </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem
+  },
+  data: function () {
+    return {
+      firstSeries: [1, 2, 3, 5], 
+      secondSeries: [5, 3, 2, 1]
+    }
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/series-types/area/basic/main.js b/vue-options-api-demos/charts/series-types/area/basic/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/area/basic/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/series-types/area/basic/main.vue b/vue-options-api-demos/charts/series-types/area/basic/main.vue
new file mode 100644
index 00000000..c986005b
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/area/basic/main.vue
@@ -0,0 +1,47 @@
+<template>
+  <Chart>
+    <ChartTitle :text="'Units sold'" />
+    <ChartCategoryAxis>
+      <ChartCategoryAxisItem
+        :categories="categories"
+        :title="{
+          text: 'Months',
+        }"
+      />
+    </ChartCategoryAxis>
+    <ChartSeries>
+      <ChartSeriesItem :type="'area'" :data-items="firstSeries" />
+      <ChartSeriesItem :type="'area'" :data-items="secondSeries" />
+      <ChartSeriesItem :type="'area'" :data-items="thirdSeries" />
+    </ChartSeries>
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartTitle,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Chart,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+  },
+  data: function () {
+    return {
+      categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
+      firstSeries: [123, 276, 310, 212, 240, 156, 98],
+      secondSeries: [165, 210, 287, 144, 190, 167, 212],
+      thirdSeries: [56, 140, 195, 46, 123, 78, 95],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/series-types/area/line-style/main.js b/vue-options-api-demos/charts/series-types/area/line-style/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/area/line-style/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/series-types/area/line-style/main.vue b/vue-options-api-demos/charts/series-types/area/line-style/main.vue
new file mode 100644
index 00000000..7b1961f8
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/area/line-style/main.vue
@@ -0,0 +1,77 @@
+<template>
+  <div>
+     <dropdownlist
+      :style="{ width: '230px' }"
+      :data-items="lineStyles"
+      :value="lineStyle"
+      @change="onStyleChange"
+    />
+    <Chart>
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'area'"
+          :data-items="series"
+          :markers="{ visible: false }"
+          :line="{ style: lineStyle }"
+        />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    dropdownlist: DropDownList,
+  },
+  data: function () {
+    return {
+      series: [
+        20,
+        1,
+        18,
+        3,
+        15,
+        5,
+        10,
+        6,
+        9,
+        6,
+        10,
+        5,
+        13,
+        3,
+        16,
+        1,
+        19,
+        1,
+        20,
+        2,
+        18,
+        5,
+        12,
+        7,
+        10,
+        8,
+      ],
+      lineStyle: "normal",
+      lineStyles: ["normal", "step", "smooth"],
+    };
+  },
+  methods: {
+    onStyleChange(e) {
+      this.lineStyle = e.value;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/series-types/area/stacked/main.js b/vue-options-api-demos/charts/series-types/area/stacked/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/area/stacked/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/series-types/area/stacked/main.vue b/vue-options-api-demos/charts/series-types/area/stacked/main.vue
new file mode 100644
index 00000000..cba72239
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/area/stacked/main.vue
@@ -0,0 +1,39 @@
+<template>
+  <Chart>
+    <ChartSeries>
+      <ChartSeriesItem
+        :type="'area'"
+        :data-items="firstSeries"
+        :color="'green'"
+        :opacity="0.5"
+      />
+      <ChartSeriesItem
+        :type="'area'"
+        :data-items="secondSeries"
+        :color="'blue'"
+        :opacity="0.5"
+      />
+    </ChartSeries>
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem
+  },
+  data: function () {
+    return {
+      firstSeries: [1, 1, 1],
+      secondSeries: [1, 0, -1],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/series-types/area/vertical/main.js b/vue-options-api-demos/charts/series-types/area/vertical/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/area/vertical/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/series-types/area/vertical/main.vue b/vue-options-api-demos/charts/series-types/area/vertical/main.vue
new file mode 100644
index 00000000..c59a3977
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/area/vertical/main.vue
@@ -0,0 +1,37 @@
+<template>
+  <Chart>
+    <ChartCategoryAxis>
+      <ChartCategoryAxisItem :categories="categories" />
+    </ChartCategoryAxis>
+    <ChartSeries>
+      <ChartSeriesItem :type="'verticalArea'" :data-items="positiveSeries" />
+      <ChartSeriesItem :type="'verticalArea'" :data-items="negativeSeries" />
+    </ChartSeries>
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+  },
+  data: function () {
+    return {
+      categories: ["Jan", "Feb", "Mar", "Apr"],
+      positiveSeries: [1, 2, 3, 5],
+      negativeSeries: [-1, -2, -3, -5],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/series-types/bar/100-stacked/main.js b/vue-options-api-demos/charts/series-types/bar/100-stacked/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/bar/100-stacked/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/series-types/bar/100-stacked/main.vue b/vue-options-api-demos/charts/series-types/bar/100-stacked/main.vue
new file mode 100644
index 00000000..ad4fb9e8
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/bar/100-stacked/main.vue
@@ -0,0 +1,63 @@
+<template>
+  <Chart>
+    <ChartLegend :position="'bottom'" :orientation="'horizontal'" />
+    <ChartCategoryAxis>
+      <ChartCategoryAxisItem :categories="categories">
+        <ChartCategoryAxisTitle :text="'New clients per day'" />
+      </ChartCategoryAxisItem>
+    </ChartCategoryAxis>
+    <ChartSeries>
+      <ChartSeriesItem
+        :name="'Jane'"
+        :type="'bar'"
+        :stack="{ type: '100%' }"
+        :data-items="firstSeries"
+      />
+      <ChartSeriesItem
+        :name="'John'"
+        :type="'bar'"
+        :data-items="secondSeries"
+      />
+      <ChartSeriesItem
+        :name="'George'"
+        :type="'bar'"
+        :data-items="thirdSeries"
+      />
+    </ChartSeries>
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartCategoryAxisTitle,
+  ChartLegend,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartCategoryAxisTitle,
+    ChartLegend,
+  },
+  data: function () {
+    return {
+      firstSeries: [1, 2, 3],
+      secondSeries: [1, 3, 1],
+      thirdSeries: [1, 5, 3],
+      categories: [
+        new Date(),
+        new Date().setDate(new Date().getDate() + 1),
+        new Date().setDate(new Date().getDate() + 2),
+      ],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/series-types/bar/basic/main.js b/vue-options-api-demos/charts/series-types/bar/basic/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/bar/basic/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/series-types/bar/basic/main.vue b/vue-options-api-demos/charts/series-types/bar/basic/main.vue
new file mode 100644
index 00000000..553aff97
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/bar/basic/main.vue
@@ -0,0 +1,53 @@
+<template>
+  <Chart>
+    <ChartTitle :text="'Units sold'" />
+    <ChartCategoryAxis>
+      <ChartCategoryAxisItem :categories="categories">
+        <ChartCategoryAxisTitle :text="'Months'" />
+      </ChartCategoryAxisItem>
+    </ChartCategoryAxis>
+    <ChartSeries>
+      <ChartSeriesItem
+        :type="'bar'"
+        :gap="2"
+        :spacing="0.25"
+        :data-items="firstSeries"
+      />
+      <ChartSeriesItem :type="'bar'" :data-items="secondSeries" />
+      <ChartSeriesItem :type="'bar'" :data-items="thirdSeries" />
+      <ChartSeriesItem :type="'bar'" :data-items="fourthSeries" />
+    </ChartSeries>
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartTitle,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisTitle,
+  ChartCategoryAxisItem,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Chart,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisTitle,
+    ChartCategoryAxisItem,
+  },
+  data: function () {
+    return {
+      firstSeries: [100, 123, 234, 343],
+      secondSeries: [120, 67, 231, 196],
+      thirdSeries: [45, 124, 189, 143],
+      fourthSeries: [87, 154, 210, 215],
+      categories: ["Q1", "Q2", "Q3", "Q4"],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/series-types/bar/column/main.js b/vue-options-api-demos/charts/series-types/bar/column/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/bar/column/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/series-types/bar/column/main.vue b/vue-options-api-demos/charts/series-types/bar/column/main.vue
new file mode 100644
index 00000000..bb169a9b
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/bar/column/main.vue
@@ -0,0 +1,29 @@
+<template>
+  <Chart>
+    <ChartSeries>
+      <ChartSeriesItem :type="'column'" :data-items="firstSeries" />
+      <ChartSeriesItem :type="'column'" :data-items="secondSeries" />
+    </ChartSeries>
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      firstSeries: [1, 2, 3, 5],
+      secondSeries: [-1, -2, -3, -5],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/series-types/bar/gap/main.js b/vue-options-api-demos/charts/series-types/bar/gap/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/bar/gap/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/series-types/bar/gap/main.vue b/vue-options-api-demos/charts/series-types/bar/gap/main.vue
new file mode 100644
index 00000000..eefc9f7c
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/bar/gap/main.vue
@@ -0,0 +1,44 @@
+<template>
+  <Chart>
+    <ChartTitle :text="'Sales per day'" />
+    <ChartCategoryAxis>
+      <ChartCategoryAxisItem :categories="categories">
+        <ChartCategoryAxisTitle :text="'Week Days'" />
+      </ChartCategoryAxisItem>
+    </ChartCategoryAxis>
+    <ChartSeries>
+      <ChartSeriesItem :type="'bar'" :gap="5" :data-items="firstSeries" />
+      <ChartSeriesItem :type="'bar'" :data-items="secondSeries" />
+    </ChartSeries>
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartTitle,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartCategoryAxisTitle,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartTitle,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartCategoryAxisTitle,
+  },
+  data: function () {
+    return {
+      firstSeries: [1, 2, 3, 5, 4],
+      secondSeries: [2, 3, 4, 6, 9],
+      categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/series-types/bar/spacing/main.js b/vue-options-api-demos/charts/series-types/bar/spacing/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/bar/spacing/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/series-types/bar/spacing/main.vue b/vue-options-api-demos/charts/series-types/bar/spacing/main.vue
new file mode 100644
index 00000000..ee856a94
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/bar/spacing/main.vue
@@ -0,0 +1,44 @@
+<template>
+  <Chart>
+    <ChartTitle :text="'Sales per day'" />
+    <ChartCategoryAxis>
+      <ChartCategoryAxisItem :categories="categories">
+        <ChartCategoryAxisTitle :text="'Week Days'" />
+      </ChartCategoryAxisItem>
+    </ChartCategoryAxis>
+    <ChartSeries>
+      <ChartSeriesItem :type="'bar'" :spacing="2" :data-items="firstSeries" />
+      <ChartSeriesItem :type="'bar'" :data-items="secondSeries" />
+    </ChartSeries>
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartTitle,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartCategoryAxisTitle,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartTitle,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartCategoryAxisTitle,
+  },
+  data: function () {
+    return {
+      firstSeries: [1, 2, 3, 5, 4],
+      secondSeries: [2, 3, 4, 6, 9],
+      categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/series-types/bar/stacked-group/main.js b/vue-options-api-demos/charts/series-types/bar/stacked-group/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/bar/stacked-group/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/series-types/bar/stacked-group/main.vue b/vue-options-api-demos/charts/series-types/bar/stacked-group/main.vue
new file mode 100644
index 00000000..e164ae92
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/bar/stacked-group/main.vue
@@ -0,0 +1,65 @@
+<template>
+  <Chart>
+    <ChartLegend :position="'bottom'" :orientation="'horizontal'" />
+    <ChartCategoryAxis>
+      <ChartCategoryAxisItem :categories="categories">
+        <ChartCategoryAxisTitle :text="'New clients per day'" />
+      </ChartCategoryAxisItem>
+    </ChartCategoryAxis>
+    <ChartSeries>
+      <ChartSeriesItem
+        :name="'Jane'"
+        :type="'bar'"
+        :stack="{ group: 'a' }"
+        :data-items="firstSeries"
+      />
+      <ChartSeriesItem
+        :name="'John'"
+        :type="'bar'"
+        :stack="{ group: 'a' }"
+        :data-items="secondSeries"
+      />
+      <ChartSeriesItem
+        :name="'George'"
+        :type="'bar'"
+        :stack="{ group: 'b' }"
+        :data-items="thirdSeries"
+      />
+    </ChartSeries>
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartCategoryAxisTitle,
+  ChartLegend,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartCategoryAxisTitle,
+    ChartLegend,
+  },
+  data: function () {
+    return {
+      firstSeries: [1, 2, 3],
+      secondSeries: [1, 3, 1],
+      thirdSeries: [1, 5, 3],
+      categories: [
+        new Date(),
+        new Date().setDate(new Date().getDate() + 1),
+        new Date().setDate(new Date().getDate() + 2),
+      ],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/series-types/bar/stacked/main.js b/vue-options-api-demos/charts/series-types/bar/stacked/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/bar/stacked/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/series-types/bar/stacked/main.vue b/vue-options-api-demos/charts/series-types/bar/stacked/main.vue
new file mode 100644
index 00000000..2fe1b266
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/bar/stacked/main.vue
@@ -0,0 +1,63 @@
+<template>
+  <Chart>
+    <ChartLegend :position="'bottom'" :orientation="'horizontal'" />
+    <ChartCategoryAxis>
+      <ChartCategoryAxisItem :categories="categories">
+        <ChartCategoryAxisTitle :text="'New clients per day'" />
+      </ChartCategoryAxisItem>
+    </ChartCategoryAxis>
+    <ChartSeries>
+      <ChartSeriesItem
+        :name="'Jane'"
+        :type="'bar'"
+        :stack="true"
+        :data-items="firstSeries"
+      />
+      <ChartSeriesItem
+        :name="'John'"
+        :type="'bar'"
+        :data-items="secondSeries"
+      />
+      <ChartSeriesItem
+        :name="'George'"
+        :type="'bar'"
+        :data-items="thirdSeries"
+      />
+    </ChartSeries>
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartCategoryAxisTitle,
+  ChartLegend
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartCategoryAxisTitle,
+    ChartLegend
+  },
+  data: function () {
+    return {
+      firstSeries: [1, 2, 3],
+      secondSeries: [1, 3, 1],
+      thirdSeries: [1, 5, 3],
+      categories: [
+        new Date(),
+        new Date().setDate(new Date().getDate() + 1),
+        new Date().setDate(new Date().getDate() + 2),
+      ],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/series-types/line/basic/main.js b/vue-options-api-demos/charts/series-types/line/basic/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/line/basic/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/series-types/line/basic/main.vue b/vue-options-api-demos/charts/series-types/line/basic/main.vue
new file mode 100644
index 00000000..21933e6a
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/line/basic/main.vue
@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTitle :text="'Units sold'" />
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem
+          :title="{
+            text: 'Months',
+          }"
+          :categories="categories"
+        />
+      </ChartCategoryAxis>
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'line'"
+          :data-items="[123, 276, 310, 212, 240, 156, 98]"
+        />
+        <ChartSeriesItem
+          :type="'line'"
+          :data-items="[165, 210, 287, 144, 190, 167, 212]"
+        />
+        <ChartSeriesItem
+          :type="'line'"
+          :data-items="[56, 140, 195, 46, 123, 78, 95]"
+        />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartTitle,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Chart,
+    ChartTitle,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+  },
+  data: function () {
+    return {
+      categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/series-types/line/line-style/main.js b/vue-options-api-demos/charts/series-types/line/line-style/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/line/line-style/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/series-types/line/line-style/main.vue b/vue-options-api-demos/charts/series-types/line/line-style/main.vue
new file mode 100644
index 00000000..ffdce4b0
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/line/line-style/main.vue
@@ -0,0 +1,79 @@
+<template>
+  <div>
+     <dropdownlist
+      :style="{ width: '230px' }"
+      :data-items="lineStyles"
+      :value="style"
+      @change="onStyleChange"
+    >
+    </dropdownlist>
+    <Chart>
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'line'"
+          :data-items="series"
+          :markers="{ visible: false }"
+          :line-style="style"
+        />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    dropdownlist: DropDownList,
+  },
+  data: function () {
+    return {
+      style: "normal",
+      lineStyles: ["normal", "step", "smooth"],
+      series: [
+        20,
+        1,
+        18,
+        3,
+        15,
+        5,
+        10,
+        6,
+        9,
+        6,
+        10,
+        5,
+        13,
+        3,
+        16,
+        1,
+        19,
+        1,
+        20,
+        2,
+        18,
+        5,
+        12,
+        7,
+        10,
+        8,
+      ],
+    };
+  },
+  methods: {
+    onStyleChange(e) {
+      this.style = e.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/series-types/line/vertical/main.js b/vue-options-api-demos/charts/series-types/line/vertical/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/line/vertical/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/series-types/line/vertical/main.vue b/vue-options-api-demos/charts/series-types/line/vertical/main.vue
new file mode 100644
index 00000000..8e26190d
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/line/vertical/main.vue
@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <Chart>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :categories="categories" />
+      </ChartCategoryAxis>
+      <ChartSeries>
+        <ChartSeriesItem :type="'verticalLine'" :data-items="[1, 2, 3, 5]" />
+        <ChartSeriesItem
+          :type="'verticalLine'"
+          :data-items="[-1, -2, -3, -5]"
+        />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Chart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+  },
+  data: function () {
+    return {
+      categories: ["Jan", "Feb", "Mar", "Apr"],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/series-types/pie/basic/main.js b/vue-options-api-demos/charts/series-types/pie/basic/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/pie/basic/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/series-types/pie/basic/main.vue b/vue-options-api-demos/charts/series-types/pie/basic/main.vue
new file mode 100644
index 00000000..27b1842f
--- /dev/null
+++ b/vue-options-api-demos/charts/series-types/pie/basic/main.vue
@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <Chart>
+      <ChartTitle :text="'World Population by Broad Age Groups'" />
+      <ChartLegend :position="'bottom'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'pie'"
+          :data-items="pieData"
+          :field="'value'"
+          :category-field="'category'"
+          :labels="{ visible: true, content: labelContent }"
+        />
+      </ChartSeries>
+    </Chart>
+  </div>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartLegend,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartTitle,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Chart,
+    ChartLegend,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartTitle,
+  },
+  data: function () {
+    return {
+      pieData: [
+        {
+          category: "0-14",
+          value: 0.2545,
+        },
+        {
+          category: "15-24",
+          value: 0.1552,
+        },
+        {
+          category: "25-54",
+          value: 0.4059,
+        },
+        {
+          category: "55-64",
+          value: 0.0911,
+        },
+        {
+          category: "65+",
+          value: 0.0933,
+        },
+      ],
+    };
+  },
+  methods: {
+    labelContent(props) {
+      let formatedNumber = Number(props.dataItem.value).toLocaleString(
+        undefined,
+        {
+          style: "percent",
+          minimumFractionDigits: 2,
+        }
+      );
+      return `${props.dataItem.category} years old: ${formatedNumber}`;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/shared/box-plot-data.json b/vue-options-api-demos/charts/shared/box-plot-data.json
new file mode 100644
index 00000000..86449d2e
--- /dev/null
+++ b/vue-options-api-demos/charts/shared/box-plot-data.json
@@ -0,0 +1,158 @@
+[{
+    "lower": 1.3,
+    "q1": 2.15,
+    "median": 2.95,
+    "q3": 3.725,
+    "upper": 4.7,
+    "mean": 2.9,
+    "outliers": [1, 9],
+    "year": "1996"
+}, {
+    "lower": 2,
+    "q1": 3.825,
+    "median": 5.45,
+    "q3": 6.425,
+    "upper": 8.2,
+    "mean": 5.2,
+    "outliers": [1.5, 2, 8.9],
+    "year": "1997"
+}, {
+    "lower": 3.8,
+    "q1": 4.725,
+    "median": 5.55,
+    "q3": 5.75,
+    "upper": 8.7,
+    "mean": 5.5,
+    "year": "1998"
+}, {
+    "lower": 3,
+    "q1": 4.375,
+    "median": 4.95,
+    "q3": 5.85,
+    "upper": 8,
+    "mean": 5.2,
+    "outliers": [3, 9.5],
+    "year": "1999"
+}, {
+    "lower": 2.5,
+    "q1": 3.925,
+    "median": 4.15,
+    "q3": 4.45,
+    "upper": 5.1,
+    "mean": 4.1,
+    "year": "2000"
+}, {
+    "lower": 2.4,
+    "q1": 3.725,
+    "median": 4.95,
+    "q3": 5.85,
+    "upper": 7.7,
+    "mean": 4.9,
+    "outliers": [2.1, 8.3, 9.8],
+    "year": "2001"
+}, {
+    "lower": 1.7,
+    "q1": 2.3,
+    "median": 3.9,
+    "q3": 5,
+    "upper": 5.5,
+    "mean": 3.7,
+    "outliers": [1.1, 9.1],
+    "year": "2002"
+}, {
+    "lower": 2.2,
+    "q1": 2.5,
+    "median": 3.1,
+    "q3": 3.975,
+    "upper": 4.3,
+    "mean": 3.2,
+    "outliers": [1.6, 1.8, 9.8],
+    "year": "2003"
+}, {
+   "lower": 1.9,
+   "q1": 2.7,
+   "median": 3.35,
+   "q3": 4.575,
+   "upper": 5.7,
+   "mean": 3.6,
+   "outliers": [1.1, 8.3],
+   "year": "2004"
+}, {
+    "lower": 1.7,
+    "q1": 2.65,
+    "median": 3.3,
+    "q3": 4.05,
+    "upper": 5,
+    "mean": 3.4,
+    "year": "2005"
+}, {
+    "lower": 1.4,
+    "q1": 2.25,
+    "median": 3.3,
+    "q3": 4.65,
+    "upper": 5.7,
+    "mean": 3.4,
+    "year": "2006"
+}, {
+    "lower": 1.9,
+    "q1": 2.85,
+    "median": 4,
+    "q3": 4.45,
+    "upper": 6.1,
+    "mean": 3.9,
+    "outliers": [1, 1.2],
+    "year": "2007"
+}, {
+    "lower": 1.5,
+    "q1": 2.35,
+    "median": 4.1,
+    "q3": 5.225,
+    "upper": 5.7,
+    "mean": 3.9,
+    "outliers": [9, 9.5],
+    "year": "2008"
+}, {
+    "lower": 1.8,
+    "q1": 2.325,
+    "median": 3.35,
+    "q3": 4,
+    "upper": 5.4,
+    "mean": 3.3,
+    "outliers": [1, 6],
+    "year": "2009"
+}, {
+   "lower": 1.8,
+   "q1": 2.75,
+   "median": 3.35,
+   "q3": 3.825,
+   "upper": 4.9,
+   "mean": 3.4,
+   "year": "2010"
+}, {
+    "lower": 1.7,
+    "q1": 2.275,
+    "median": 3.2,
+    "q3": 3.825,
+    "upper": 5.5,
+    "mean": 3.2,
+    "outliers": [0.5, 6.7],
+    "year": "2011"
+}, {
+    "lower": 1.2,
+    "q1": 1.95,
+    "median": 2.45,
+    "q3": 3.075,
+    "upper": 3.5,
+    "mean": 2.5,
+    "year": "2012"
+}, {
+    "lower": 1.3,
+    "q1": 1.9,
+    "median": 3.05,
+    "q3": 3.425,
+    "upper": 4,
+    "mean": 2.7,
+    "outliers": [7, 8.5],
+    "year": "2013"
+}]
+
diff --git a/vue-options-api-demos/charts/shared/bubble-data.json b/vue-options-api-demos/charts/shared/bubble-data.json
new file mode 100644
index 00000000..71ba7eef
--- /dev/null
+++ b/vue-options-api-demos/charts/shared/bubble-data.json
@@ -0,0 +1,46 @@
+[{
+    "x": -2500,
+    "y": 50000,
+    "size": 500000,
+    "category": "Microsoft"
+}, {
+    "x": 500,
+    "y": 110000,
+    "size": 7600000,
+    "category": "Starbucks"
+}, {
+    "x": 7000,
+    "y": 19000,
+    "size": 700000,
+    "category": "Google"
+}, {
+    "x": 1400,
+    "y": 150000,
+    "size": 700000,
+    "category": "Publix Super Markets"
+}, {
+    "x": 2400,
+    "y": 30000,
+    "size": 300000,
+    "category": "PricewaterhouseCoopers"
+}, {
+    "x": 2450,
+    "y": 34000,
+    "size": 90000,
+    "category": "Cisco"
+}, {
+    "x": 2700,
+    "y": 34000,
+    "size": 400000,
+    "category": "Accenture"
+}, {
+    "x": 2900,
+    "y": 40000,
+    "size": 450000,
+    "category": "Deloitte"
+}, {
+    "x": 3000,
+    "y": 55000,
+    "size": 900000,
+    "category": "Whole Foods Market"
+}]
diff --git a/vue-options-api-demos/charts/shared/covid-data.json b/vue-options-api-demos/charts/shared/covid-data.json
new file mode 100644
index 00000000..55b698ec
--- /dev/null
+++ b/vue-options-api-demos/charts/shared/covid-data.json
@@ -0,0 +1,593 @@
+[
+    {
+      "NewCases": 41,
+      "Timestamp": 1578700800000
+    },
+    {
+      "NewCases": 0,
+      "Timestamp": 1578787200000
+    },
+    {
+      "NewCases": 1,
+      "Timestamp": 1578873600000
+    },
+    {
+      "NewCases": 1,
+      "Timestamp": 1578960000000
+    },
+    {
+      "NewCases": 0,
+      "Timestamp": 1579046400000
+    },
+    {
+      "NewCases": 0,
+      "Timestamp": 1579132800000
+    },
+    {
+      "NewCases": 5,
+      "Timestamp": 1579219200000
+    },
+    {
+      "NewCases": 17,
+      "Timestamp": 1579305600000
+    },
+    {
+      "NewCases": 60,
+      "Timestamp": 1579392000000
+    },
+    {
+      "NewCases": 78,
+      "Timestamp": 1579478400000
+    },
+    {
+      "NewCases": 93,
+      "Timestamp": 1579564800000
+    },
+    {
+      "NewCases": 154,
+      "Timestamp": 1579651200000
+    },
+    {
+      "NewCases": 133,
+      "Timestamp": 1579737600000
+    },
+    {
+      "NewCases": 271,
+      "Timestamp": 1579824000000
+    },
+    {
+      "NewCases": 469,
+      "Timestamp": 1579910400000
+    },
+    {
+      "NewCases": 698,
+      "Timestamp": 1579996800000
+    },
+    {
+      "NewCases": 785,
+      "Timestamp": 1580083200000
+    },
+    {
+      "NewCases": 1789,
+      "Timestamp": 1580169600000
+    },
+    {
+      "NewCases": 1481,
+      "Timestamp": 1580256000000
+    },
+    {
+      "NewCases": 1760,
+      "Timestamp": 1580342400000
+    },
+    {
+      "NewCases": 2011,
+      "Timestamp": 1580428800000
+    },
+    {
+      "NewCases": 2115,
+      "Timestamp": 1580515200000
+    },
+    {
+      "NewCases": 2597,
+      "Timestamp": 1580601600000
+    },
+    {
+      "NewCases": 2832,
+      "Timestamp": 1580688000000
+    },
+    {
+      "NewCases": 3258,
+      "Timestamp": 1580774400000
+    },
+    {
+      "NewCases": 3914,
+      "Timestamp": 1580860800000
+    },
+    {
+      "NewCases": 3722,
+      "Timestamp": 1580947200000
+    },
+    {
+      "NewCases": 3201,
+      "Timestamp": 1581033600000
+    },
+    {
+      "NewCases": 3413,
+      "Timestamp": 1581120000000
+    },
+    {
+      "NewCases": 2670,
+      "Timestamp": 1581206400000
+    },
+    {
+      "NewCases": 3058,
+      "Timestamp": 1581292800000
+    },
+    {
+      "NewCases": 2482,
+      "Timestamp": 1581379200000
+    },
+    {
+      "NewCases": 2066,
+      "Timestamp": 1581465600000
+    },
+    {
+      "NewCases": 15212,
+      "Timestamp": 1581552000000
+    },
+    {
+      "NewCases": 4068,
+      "Timestamp": 1581638400000
+    },
+    {
+      "NewCases": 2732,
+      "Timestamp": 1581724800000
+    },
+    {
+      "NewCases": 2090,
+      "Timestamp": 1581811200000
+    },
+    {
+      "NewCases": 2161,
+      "Timestamp": 1581897600000
+    },
+    {
+      "NewCases": 1993,
+      "Timestamp": 1581984000000
+    },
+    {
+      "NewCases": 1856,
+      "Timestamp": 1582070400000
+    },
+    {
+      "NewCases": 486,
+      "Timestamp": 1582156800000
+    },
+    {
+      "NewCases": 1044,
+      "Timestamp": 1582243200000
+    },
+    {
+      "NewCases": 1109,
+      "Timestamp": 1582329600000
+    },
+    {
+      "NewCases": 1020,
+      "Timestamp": 1582416000000
+    },
+    {
+      "NewCases": 619,
+      "Timestamp": 1582502400000
+    },
+    {
+      "NewCases": 825,
+      "Timestamp": 1582588800000
+    },
+    {
+      "NewCases": 927,
+      "Timestamp": 1582675200000
+    },
+    {
+      "NewCases": 1376,
+      "Timestamp": 1582761600000
+    },
+    {
+      "NewCases": 1431,
+      "Timestamp": 1582848000000
+    },
+    {
+      "NewCases": 1827,
+      "Timestamp": 1582934400000
+    },
+    {
+      "NewCases": 1880,
+      "Timestamp": 1583020800000
+    },
+    {
+      "NewCases": 2296,
+      "Timestamp": 1583107200000
+    },
+    {
+      "NewCases": 2293,
+      "Timestamp": 1583193600000
+    },
+    {
+      "NewCases": 2197,
+      "Timestamp": 1583280000000
+    },
+    {
+      "NewCases": 2726,
+      "Timestamp": 1583366400000
+    },
+    {
+      "NewCases": 3911,
+      "Timestamp": 1583452800000
+    },
+    {
+      "NewCases": 3809,
+      "Timestamp": 1583539200000
+    },
+    {
+      "NewCases": 3931,
+      "Timestamp": 1583625600000
+    },
+    {
+      "NewCases": 4332,
+      "Timestamp": 1583712000000
+    },
+    {
+      "NewCases": 4460,
+      "Timestamp": 1583798400000
+    },
+    {
+      "NewCases": 6315,
+      "Timestamp": 1583884800000
+    },
+    {
+      "NewCases": 6682,
+      "Timestamp": 1583971200000
+    },
+    {
+      "NewCases": 10153,
+      "Timestamp": 1584057600000
+    },
+    {
+      "NewCases": 11793,
+      "Timestamp": 1584144000000
+    },
+    {
+      "NewCases": 12472,
+      "Timestamp": 1584230400000
+    },
+    {
+      "NewCases": 10749,
+      "Timestamp": 1584316800000
+    },
+    {
+      "NewCases": 15523,
+      "Timestamp": 1584403200000
+    },
+    {
+      "NewCases": 18365,
+      "Timestamp": 1584489600000
+    },
+    {
+      "NewCases": 24256,
+      "Timestamp": 1584576000000
+    },
+    {
+      "NewCases": 32003,
+      "Timestamp": 1584662400000
+    },
+    {
+      "NewCases": 26069,
+      "Timestamp": 1584748800000
+    },
+    {
+      "NewCases": 1944,
+      "Timestamp": 1584835200000
+    },
+    {
+      "NewCases": 40898,
+      "Timestamp": 1584921600000
+    },
+    {
+      "NewCases": 51862,
+      "Timestamp": 1585008000000
+    },
+    {
+      "NewCases": 29810,
+      "Timestamp": 1585094400000
+    },
+    {
+      "NewCases": 54655,
+      "Timestamp": 1585180800000
+    },
+    {
+      "NewCases": 41366,
+      "Timestamp": 1585267200000
+    },
+    {
+      "NewCases": 62724,
+      "Timestamp": 1585353600000
+    },
+    {
+      "NewCases": 62705,
+      "Timestamp": 1585440000000
+    },
+    {
+      "NewCases": 59160,
+      "Timestamp": 1585526400000
+    },
+    {
+      "NewCases": 57643,
+      "Timestamp": 1585612800000
+    },
+    {
+      "NewCases": 72471,
+      "Timestamp": 1585699200000
+    },
+    {
+      "NewCases": 72901,
+      "Timestamp": 1585785600000
+    },
+    {
+      "NewCases": 75944,
+      "Timestamp": 1585872000000
+    },
+    {
+      "NewCases": 79908,
+      "Timestamp": 1585958400000
+    },
+    {
+      "NewCases": 80692,
+      "Timestamp": 1586044800000
+    },
+    {
+      "NewCases": 77617,
+      "Timestamp": 1586131200000
+    },
+    {
+      "NewCases": 68465,
+      "Timestamp": 1586217600000
+    },
+    {
+      "NewCases": 73849,
+      "Timestamp": 1586304000000
+    },
+    {
+      "NewCases": 82736,
+      "Timestamp": 1586390400000
+    },
+    {
+      "NewCases": 84635,
+      "Timestamp": 1586476800000
+    },
+    {
+      "NewCases": 90778,
+      "Timestamp": 1586563200000
+    },
+    {
+      "NewCases": 84634,
+      "Timestamp": 1586649600000
+    },
+    {
+      "NewCases": 77274,
+      "Timestamp": 1586736000000
+    },
+    {
+      "NewCases": 71545,
+      "Timestamp": 1586822400000
+    },
+    {
+      "NewCases": 73220,
+      "Timestamp": 1586908800000
+    },
+    {
+      "NewCases": 76794,
+      "Timestamp": 1586995200000
+    },
+    {
+      "NewCases": 81839,
+      "Timestamp": 1587081600000
+    },
+    {
+      "NewCases": 84353,
+      "Timestamp": 1587168000000
+    },
+    {
+      "NewCases": 78522,
+      "Timestamp": 1587254400000
+    },
+    {
+      "NewCases": 70345,
+      "Timestamp": 1587340800000
+    },
+    {
+      "NewCases": 83101,
+      "Timestamp": 1587427200000
+    },
+    {
+      "NewCases": 72107,
+      "Timestamp": 1587513600000
+    },
+    {
+      "NewCases": 72752,
+      "Timestamp": 1587600000000
+    },
+    {
+      "NewCases": 80220,
+      "Timestamp": 1587686400000
+    },
+    {
+      "NewCases": 89313,
+      "Timestamp": 1587772800000
+    },
+    {
+      "NewCases": 85505,
+      "Timestamp": 1587859200000
+    },
+    {
+      "NewCases": 87138,
+      "Timestamp": 1587945600000
+    },
+    {
+      "NewCases": 73759,
+      "Timestamp": 1588032000000
+    },
+    {
+      "NewCases": 66321,
+      "Timestamp": 1588118400000
+    },
+    {
+      "NewCases": 72955,
+      "Timestamp": 1588204800000
+    },
+    {
+      "NewCases": 85008,
+      "Timestamp": 1588291200000
+    },
+    {
+      "NewCases": 90578,
+      "Timestamp": 1588377600000
+    },
+    {
+      "NewCases": 83985,
+      "Timestamp": 1588464000000
+    },
+    {
+      "NewCases": 85984,
+      "Timestamp": 1588550400000
+    },
+    {
+      "NewCases": 82906,
+      "Timestamp": 1588636800000
+    },
+    {
+      "NewCases": 70578,
+      "Timestamp": 1588723200000
+    },
+    {
+      "NewCases": 83835,
+      "Timestamp": 1588809600000
+    },
+    {
+      "NewCases": 88245,
+      "Timestamp": 1588896000000
+    },
+    {
+      "NewCases": 94857,
+      "Timestamp": 1588982400000
+    },
+    {
+      "NewCases": 89086,
+      "Timestamp": 1589068800000
+    },
+    {
+      "NewCases": 88684,
+      "Timestamp": 1589155200000
+    },
+    {
+      "NewCases": 81413,
+      "Timestamp": 1589241600000
+    },
+    {
+      "NewCases": 75740,
+      "Timestamp": 1589328000000
+    },
+    {
+      "NewCases": 82566,
+      "Timestamp": 1589414400000
+    },
+    {
+      "NewCases": 88685,
+      "Timestamp": 1589500800000
+    },
+    {
+      "NewCases": 92967,
+      "Timestamp": 1589587200000
+    },
+    {
+      "NewCases": 95802,
+      "Timestamp": 1589673600000
+    },
+    {
+      "NewCases": 103325,
+      "Timestamp": 1589760000000
+    },
+    {
+      "NewCases": 74696,
+      "Timestamp": 1589846400000
+    },
+    {
+      "NewCases": 90054,
+      "Timestamp": 1589932800000
+    },
+    {
+      "NewCases": 102103,
+      "Timestamp": 1590019200000
+    },
+    {
+      "NewCases": 91060,
+      "Timestamp": 1590105600000
+    },
+    {
+      "NewCases": 107563,
+      "Timestamp": 1590192000000
+    },
+    {
+      "NewCases": 104409,
+      "Timestamp": 1590278400000
+    },
+    {
+      "NewCases": 102660,
+      "Timestamp": 1590364800000
+    },
+    {
+      "NewCases": 88121,
+      "Timestamp": 1590451200000
+    },
+    {
+      "NewCases": 94577,
+      "Timestamp": 1590537600000
+    },
+    {
+      "NewCases": 96393,
+      "Timestamp": 1590624000000
+    },
+    {
+      "NewCases": 111464,
+      "Timestamp": 1590710400000
+    },
+    {
+      "NewCases": 116834,
+      "Timestamp": 1590796800000
+    },
+    {
+      "NewCases": 116079,
+      "Timestamp": 1590883200000
+    },
+    {
+      "NewCases": 124080,
+      "Timestamp": 1590969600000
+    },
+    {
+      "NewCases": 113338,
+      "Timestamp": 1591056000000
+    },
+    {
+      "NewCases": 93246,
+      "Timestamp": 1591142400000
+    },
+    {
+      "NewCases": 129281,
+      "Timestamp": 1591228800000
+    },
+    {
+      "NewCases": 118528,
+      "Timestamp": 1591315200000
+    },
+    {
+      "NewCases": 127943,
+      "Timestamp": 1591401600000
+    }]
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/shared/donut-series-data.json b/vue-options-api-demos/charts/shared/donut-series-data.json
new file mode 100644
index 00000000..4efe5b5c
--- /dev/null
+++ b/vue-options-api-demos/charts/shared/donut-series-data.json
@@ -0,0 +1,55 @@
+[{
+  "name": "2011",
+  "data": [{
+    "category": "Asia",
+    "value": 30.8,
+    "color": "#9de219"
+  }, {
+    "category": "Europe",
+    "value": 21.1,
+    "color": "#90cc38"
+  }, {
+    "category": "Latin America",
+    "value": 16.3,
+    "color": "#068c35"
+  }, {
+    "category": "Africa",
+    "value": 17.6,
+    "color": "#006634"
+  }, {
+    "category": "Middle East",
+    "value": 9.2,
+    "color": "#004d38"
+  }, {
+    "category": "North America",
+    "value": 4.6,
+    "color": "#033939"
+  }]
+}, {
+  "name": "2012",
+  "data": [{
+    "category": "Asia",
+    "value": 53.8,
+    "color": "#9de219"
+  }, {
+    "category": "Europe",
+    "value": 16.1,
+    "color": "#90cc38"
+  }, {
+    "category": "Latin America",
+    "value": 11.3,
+    "color": "#068c35"
+  }, {
+    "category": "Africa",
+    "value": 9.6,
+    "color": "#006634"
+  }, {
+    "category": "Middle East",
+    "value": 5.2,
+    "color": "#004d38"
+  }, {
+    "category": "North America",
+    "value": 3.6,
+    "color": "#033939"
+  }]
+}]
diff --git a/vue-options-api-demos/charts/shared/funnel-data.json b/vue-options-api-demos/charts/shared/funnel-data.json
new file mode 100644
index 00000000..781f53f3
--- /dev/null
+++ b/vue-options-api-demos/charts/shared/funnel-data.json
@@ -0,0 +1,21 @@
+[ {
+    "stat": "Impressions ",
+    "count": 434823,
+    "color": "#0e5a7e"
+}, {
+    "stat": "Clicks",
+    "count": 356854,
+    "color": "#166f99"
+}, {
+    "stat": "Unique Visitors",
+    "count": 280022,
+    "color": "#2185b4"
+}, {
+    "stat": "Downloads",
+    "count": 190374,
+    "color": "#319fd2"
+}, {
+    "stat": "Purchases",
+    "count": 120392,
+    "color": "#3eaee2"
+} ]
diff --git a/vue-options-api-demos/charts/shared/polar-data.json b/vue-options-api-demos/charts/shared/polar-data.json
new file mode 100644
index 00000000..06d877fc
--- /dev/null
+++ b/vue-options-api-demos/charts/shared/polar-data.json
@@ -0,0 +1,14 @@
+[
+    { "time": "08:00", "altitude": 4.9, "azimuth": 92.7 },
+    { "time": "09:00", "altitude": 17.6, "azimuth": 100.6 },
+    { "time": "10:00", "altitude": 30.1, "azimuth": 109.7 },
+    { "time": "11:00", "altitude": 41.8, "azimuth": 121.3 },
+    { "time": "12:00", "altitude": 51.8, "azimuth": 137.7 },
+    { "time": "13:00", "altitude": 58.5, "azimuth": 161.5 },
+    { "time": "14:00", "altitude": 59.4, "azimuth": 190.7 },
+    { "time": "15:00", "altitude": 54.1, "azimuth": 216.6 },
+    { "time": "16:00", "altitude": 44.8, "azimuth": 234.8 },
+    { "time": "17:00", "altitude": 33.5, "azimuth": 247.6 },
+    { "time": "18:00", "altitude": 21.2, "azimuth": 257.2 },
+    { "time": "19:00", "altitude": 8.4, "azimuth": 265.3 }
+]
diff --git a/vue-options-api-demos/charts/shared/power-distribution-data.json b/vue-options-api-demos/charts/shared/power-distribution-data.json
new file mode 100644
index 00000000..1e9bda0c
--- /dev/null
+++ b/vue-options-api-demos/charts/shared/power-distribution-data.json
@@ -0,0 +1,13 @@
+[ {
+    "kind": "Hydroelectric", "share": 0.175
+}, {
+    "kind": "Nuclear", "share": 0.238
+}, {
+    "kind": "Coal", "share": 0.118
+}, {
+    "kind": "Solar", "share": 0.052
+}, {
+    "kind": "Wind", "share": 0.225
+}, {
+    "kind": "Other", "share": 0.192
+} ]
diff --git a/vue-options-api-demos/charts/shared/radar-data.json b/vue-options-api-demos/charts/shared/radar-data.json
new file mode 100644
index 00000000..11eba02c
--- /dev/null
+++ b/vue-options-api-demos/charts/shared/radar-data.json
@@ -0,0 +1,16 @@
+[
+    { "name": "JP Morgan", "pre": 116, "post": 64 },
+    { "name": "HSBC", "pre": 165, "post": 85 },
+    { "name": "Credit Suisse", "pre": 215, "post": 97 },
+    { "name": "Goldman Sachs", "pre": 75, "post": 27 },
+    { "name": "Morgan Stanley", "pre": 100, "post": 16 },
+    { "name": "Societe Generale", "pre": 49, "post": 26 },
+    { "name": "UBS", "pre": 80, "post": 35 },
+    { "name": "BNP Paribas", "pre": 116, "post": 32 },
+    { "name": "Unicredit", "pre": 108, "post": 26 },
+    { "name": "Credit Agricole", "pre": 90, "post": 17 },
+    { "name": "Deutsche Bank", "pre": 67, "post": 10 },
+    { "name": "Barclays", "pre": 76, "post": 7 },
+    { "name": "Citigroup",  "pre": 91, "post": 19 },
+    { "name": "RBS", "pre": 255, "post": 5 }
+]
diff --git a/vue-options-api-demos/charts/shared/range-data.json b/vue-options-api-demos/charts/shared/range-data.json
new file mode 100644
index 00000000..0b21030d
--- /dev/null
+++ b/vue-options-api-demos/charts/shared/range-data.json
@@ -0,0 +1,14 @@
+[
+    { "month": "January", "min": 5, "max": 11 },
+    { "month": "February", "min": 5, "max": 13 },
+    { "month": "March", "min": 7, "max": 15 },
+    { "month": "April", "min": 10, "max": 19 },
+    { "month": "May", "min": 13, "max": 23 },
+    { "month": "June", "min": 17, "max": 28 },
+    { "month": "July", "min": 20, "max": 30 },
+    { "month": "August", "min": 20, "max": 30 },
+    { "month": "September", "min": 17, "max": 26 },
+    { "month": "October", "min": 13, "max": 22 },
+    { "month": "November", "min": 9, "max": 16 },
+    { "month": "December", "min": 6, "max": 13 }
+]
diff --git a/vue-options-api-demos/charts/shared/sales-data.js b/vue-options-api-demos/charts/shared/sales-data.js
new file mode 100644
index 00000000..c253bc6f
--- /dev/null
+++ b/vue-options-api-demos/charts/shared/sales-data.js
@@ -0,0 +1,247 @@
+export const salesByQuarter = [
+    {
+        period: '2010 Q1',
+        date: new Date(2010, 0, 1),
+        count: 4485.0
+    },
+    {
+        period: '2010 Q2',
+        date: new Date(2010, 3, 1),
+        count: 4409.0
+    },
+    {
+        period: '2010 Q3',
+        date: new Date(2010, 6, 1),
+        count: 4469.0
+    },
+    {
+        period: '2010 Q4',
+        date: new Date(2010, 9, 1),
+        count: 4682.0
+    },
+    {
+        period: '2011 Q1',
+        date: new Date(2011, 0, 1),
+        count: 5610.0
+    },
+    {
+        period: '2011 Q2',
+        date: new Date(2011, 3, 1),
+        count: 6580.0
+    },
+    {
+        period: '2011 Q3',
+        date: new Date(2011, 6, 1),
+        count: 7534.0
+    },
+    {
+        period: '2011 Q4',
+        date: new Date(2011, 9, 1),
+        count: 7894.0
+    },
+    {
+        period: '2012 Q1',
+        date: new Date(2012, 0, 1),
+        count: 8748.0
+    },
+    {
+        period: '2012 Q2',
+        date: new Date(2012, 3, 1),
+        count: 10223.0
+    },
+    {
+        period: '2012 Q3',
+        date: new Date(2012, 6, 1),
+        count: 10797.0
+    },
+    {
+        period: '2012 Q4',
+        date: new Date(2012, 9, 1),
+        count: 12295.0
+    },
+    {
+        period: '2013 Q1',
+        date: new Date(2013, 0, 1),
+        count: 13153.0
+    },
+    {
+        period: '2013 Q2',
+        date: new Date(2013, 3, 1),
+        count: 14628.0
+    },
+    {
+        period: '2013 Q3',
+        date: new Date(2013, 6, 1),
+        count: 16779.0
+    },
+    {
+        period: '2013 Q4',
+        date: new Date(2013, 9, 1),
+        count: 18710.0
+    },
+    {
+        period: '2014 Q1',
+        date: new Date(2014, 0, 1),
+        count: 22219.0
+    },
+    {
+        period: '2014 Q2',
+        date: new Date(2014, 3, 1),
+        count: 25886.0
+    },
+    {
+        period: '2014 Q3',
+        date: new Date(2014, 6, 1),
+        count: 31640.0
+    },
+    {
+        period: '2014 Q4',
+        date: new Date(2014, 9, 1),
+        count: 36846.0
+    },
+    {
+        period: '2015 Q1',
+        date: new Date(2015, 0, 1),
+        count: 43433.0
+    },
+    {
+        period: '2015 Q2',
+        date: new Date(2015, 3, 1),
+        count: 48575.0
+    },
+    {
+        period: '2015 Q3',
+        date: new Date(2015, 6, 1),
+        count: 54533.0
+    },
+    {
+        period: '2015 Q4',
+        date: new Date(2015, 9, 1),
+        count: 62388.0
+    },
+    {
+        period: '2016 Q1',
+        date: new Date(2016, 0, 1),
+        count: 70706.0
+    },
+    {
+        period: '2016 Q2',
+        date: new Date(2016, 3, 1),
+        count: 75439.0
+    },
+    {
+        period: '2016 Q3',
+        date: new Date(2016, 6, 1),
+        count: 83213.0
+    },
+    {
+        period: '2016 Q4',
+        date: new Date(2016, 9, 1),
+        count: 88527.0
+    },
+    {
+        period: '2017 Q1',
+        date: new Date(2017, 0, 1),
+        count: 99865.0
+    },
+    {
+        period: '2017 Q2',
+        date: new Date(2017, 3, 1),
+        count: 107388.0
+    },
+    {
+        period: '2017 Q3',
+        date: new Date(2017, 6, 1),
+        count: 117761.0
+    },
+    {
+        period: '2017 Q4',
+        date: new Date(2017, 9, 1),
+        count: 125263.0
+    },
+    {
+        period: '2018 Q1',
+        date: new Date(2018, 0, 1),
+        count: 135950.0
+    },
+    {
+        period: '2018 Q2',
+        date: new Date(2018, 3, 1),
+        count: 144737.0
+    },
+    {
+        period: '2018 Q3',
+        date: new Date(2018, 6, 1),
+        count: 155933.0
+    },
+    {
+        period: '2018 Q4',
+        date: new Date(2018, 9, 1),
+        count: 167960.0
+    },
+    {
+        period: '2019 Q1',
+        date: new Date(2019, 0, 1),
+        count: 182725.0
+    },
+    {
+        period: '2019 Q2',
+        date: new Date(2019, 3, 1),
+        count: 199079.0
+    },
+    {
+        period: '2019 Q3',
+        date: new Date(2019, 6, 1),
+        count: 234952.0
+    },
+    {
+        period: '2019 Q4',
+        date: new Date(2019, 9, 1),
+        count: 271298.0
+    },
+    {
+        period: '2020 Q1',
+        date: new Date(2020, 0, 1),
+        count: 323309.0
+    },
+    {
+        period: '2020 Q2',
+        date: new Date(2020, 3, 1),
+        count: 358145.0
+    },
+    {
+        period: '2020 Q3',
+        date: new Date(2020, 6, 1),
+        count: 460927.0
+    },
+    {
+        period: '2020 Q4',
+        date: new Date(2020, 9, 1),
+        count: 579568.0
+    },
+    {
+        period: '2021 Q1',
+        date: new Date(2021, 0, 1),
+        count: 669590.0
+    },
+    {
+        period: '2021 Q2',
+        date: new Date(2021, 3, 1),
+        count: 793564.0
+    },
+    {
+        period: '2021 Q3',
+        date: new Date(2021, 6, 1),
+        count: 941133.0
+    },
+    {
+        period: '2021 Q4',
+        date: new Date(2021, 9, 1),
+        count: 1133020.0
+    },
+    {
+        period: '2022 Q1',
+        date: new Date(2022, 0, 1),
+        count: 426324.0
+    }
+];
diff --git a/vue-options-api-demos/charts/shared/scatter-line-data.json b/vue-options-api-demos/charts/shared/scatter-line-data.json
new file mode 100644
index 00000000..192fd058
--- /dev/null
+++ b/vue-options-api-demos/charts/shared/scatter-line-data.json
@@ -0,0 +1,31 @@
+[{
+    "current": 0.8,
+    "stats": [
+      { "time": 10, "charge": 10 },
+      { "time": 15, "charge": 20 },
+      { "time": 20, "charge": 25 },
+      { "time": 32, "charge": 40 },
+      { "time": 43, "charge": 50 },
+      { "time": 55, "charge": 60 },
+      { "time": 60, "charge": 70 },
+      { "time": 70, "charge": 80 },
+      { "time": 90, "charge": 100 }
+    ]
+  }, {
+    "current": 1.6,
+    "stats": [
+      { "time": 10, "charge": 40 },
+      { "time": 17, "charge": 50 },
+      { "time": 18, "charge": 70 },
+      { "time": 35, "charge": 90 },
+      { "time": 47, "charge": 95 },
+      { "time": 60, "charge": 100 }
+    ]
+  }, {
+    "current": 3.2,
+    "stats": [
+      { "time": 10, "charge": 70 },
+      { "time": 13, "charge": 90 },
+      { "time": 25, "charge": 100 }
+    ]
+}]
diff --git a/vue-options-api-demos/charts/shared/scatter-line-style-data.json b/vue-options-api-demos/charts/shared/scatter-line-style-data.json
new file mode 100644
index 00000000..e8fbf411
--- /dev/null
+++ b/vue-options-api-demos/charts/shared/scatter-line-style-data.json
@@ -0,0 +1,28 @@
+[
+    [0, 20],
+    [1, 1],
+    [2, 18],
+    [3, 3],
+    [4, 15],
+    [5, 5],
+    [6, 10],
+    [7, 6],
+    [8, 9],
+    [9, 6],
+    [10, 10],
+    [11, 5],
+    [12, 13],
+    [13, 3],
+    [14, 16],
+    [15, 1],
+    [16, 19],
+    [17, 1],
+    [18, 20],
+    [19, 2],
+    [20, 18],
+    [21, 5],
+    [22, 12],
+    [23, 7],
+    [24, 10],
+    [25, 8]
+]
diff --git a/vue-options-api-demos/charts/shared/scatter-plot-data.json b/vue-options-api-demos/charts/shared/scatter-plot-data.json
new file mode 100644
index 00000000..29adf915
--- /dev/null
+++ b/vue-options-api-demos/charts/shared/scatter-plot-data.json
@@ -0,0 +1,17 @@
+[
+    { "windSpeed": 16.4, "rainfall": 5.4 },
+    { "windSpeed": 21.7, "rainfall": 2 },
+    { "windSpeed": 25.4, "rainfall": 3 },
+    { "windSpeed": 19, "rainfall": 2 },
+    { "windSpeed": 10.9, "rainfall": 1 },
+    { "windSpeed": 13.6, "rainfall": 3.2 },
+    { "windSpeed": 10.9, "rainfall": 7.4 },
+    { "windSpeed": 10.9, "rainfall": 0 },
+    { "windSpeed": 10.9, "rainfall": 8.2 },
+    { "windSpeed": 16.4, "rainfall": 0 },
+    { "windSpeed": 16.4, "rainfall": 1.8 },
+    { "windSpeed": 13.6, "rainfall": 0.3 },
+    { "windSpeed": 29.9, "rainfall": 0 },
+    { "windSpeed": 27.1, "rainfall": 2.3 },
+    { "windSpeed": 16.4, "rainfall": 0 }
+]
diff --git a/vue-options-api-demos/charts/shared/stock-data-sample.js b/vue-options-api-demos/charts/shared/stock-data-sample.js
new file mode 100644
index 00000000..20018594
--- /dev/null
+++ b/vue-options-api-demos/charts/shared/stock-data-sample.js
@@ -0,0 +1,2075 @@
+export const stockDataSample =
+[
+    {
+        'Date': '2010/01/01',
+        'Open': 54.13,
+        'High': 54.13,
+        'Low': 54.13,
+        'Close': 54.13,
+        'Volume': 0
+    },
+    {
+        'Date': '2010/01/04',
+        'Open': 55.72,
+        'High': 56.39,
+        'Low': 54.8,
+        'Close': 56.18,
+        'Volume': 6187088
+    },
+    {
+        'Date': '2010/01/05',
+        'Open': 56.25,
+        'High': 58.28,
+        'Low': 56,
+        'Close': 58.02,
+        'Volume': 8872728
+    },
+    {
+        'Date': '2010/01/06',
+        'Open': 58.23,
+        'High': 59.99,
+        'Low': 57.88,
+        'Close': 59.78,
+        'Volume': 8838016
+    },
+    {
+        'Date': '2010/01/07',
+        'Open': 59.51,
+        'High': 62.31,
+        'Low': 59.02,
+        'Close': 62.2,
+        'Volume': 14380744
+    },
+    {
+        'Date': '2010/01/08',
+        'Open': 61.54,
+        'High': 61.78,
+        'Low': 60.86,
+        'Close': 61.6,
+        'Volume': 7147427
+    },
+    {
+        'Date': '2010/01/11',
+        'Open': 61.95,
+        'High': 62.09,
+        'Low': 60.51,
+        'Close': 60.87,
+        'Volume': 5627699
+    },
+    {
+        'Date': '2010/01/12',
+        'Open': 60.07,
+        'High': 61.2,
+        'Low': 59.91,
+        'Close': 60.43,
+        'Volume': 5273875
+    },
+    {
+        'Date': '2010/01/13',
+        'Open': 60.61,
+        'High': 61.7,
+        'Low': 60.35,
+        'Close': 61.16,
+        'Volume': 4950400
+    },
+    {
+        'Date': '2010/01/14',
+        'Open': 61.03,
+        'High': 61.62,
+        'Low': 60.78,
+        'Close': 61.56,
+        'Volume': 3000398
+    },
+    {
+        'Date': '2010/01/15',
+        'Open': 60.82,
+        'High': 60.82,
+        'Low': 60.82,
+        'Close': 60.82,
+        'Volume': 0
+    },
+    {
+        'Date': '2010/01/18',
+        'Open': 60.82,
+        'High': 60.82,
+        'Low': 60.82,
+        'Close': 60.82,
+        'Volume': 0
+    },
+    {
+        'Date': '2010/01/19',
+        'Open': 60.6,
+        'High': 61.01,
+        'Low': 59.96,
+        'Close': 60.65,
+        'Volume': 5428029
+    },
+    {
+        'Date': '2010/01/20',
+        'Open': 60.33,
+        'High': 60.57,
+        'Low': 58.53,
+        'Close': 60.2,
+        'Volume': 5374069
+    },
+    {
+        'Date': '2010/01/21',
+        'Open': 60.3,
+        'High': 61.26,
+        'Low': 58.9,
+        'Close': 59.2,
+        'Volume': 5401938
+    },
+    {
+        'Date': '2010/01/22',
+        'Open': 58.62,
+        'High': 59.17,
+        'Low': 57.7,
+        'Close': 57.77,
+        'Volume': 4745396
+    },
+    {
+        'Date': '2010/01/25',
+        'Open': 58.35,
+        'High': 58.75,
+        'Low': 57.5,
+        'Close': 57.78,
+        'Volume': 3489914
+    },
+    {
+        'Date': '2010/01/26',
+        'Open': 57.54,
+        'High': 58.5,
+        'Low': 57.23,
+        'Close': 57.71,
+        'Volume': 4552136
+    },
+    {
+        'Date': '2010/01/27',
+        'Open': 58.84,
+        'High': 62.08,
+        'Low': 58.83,
+        'Close': 61.93,
+        'Volume': 14760056
+    },
+    {
+        'Date': '2010/01/28',
+        'Open': 62.15,
+        'High': 62.95,
+        'Low': 61.31,
+        'Close': 62.56,
+        'Volume': 8865642
+    },
+    {
+        'Date': '2010/01/29',
+        'Open': 62.8,
+        'High': 63.4,
+        'Low': 60.32,
+        'Close': 60.6,
+        'Volume': 8726177
+    },
+    {
+        'Date': '2010/02/01',
+        'Open': 60.74,
+        'High': 61.86,
+        'Low': 60.72,
+        'Close': 61.7,
+        'Volume': 5929599
+    },
+    {
+        'Date': '2010/02/02',
+        'Open': 61.29,
+        'High': 62,
+        'Low': 61,
+        'Close': 61.94,
+        'Volume': 7862734
+    },
+    {
+        'Date': '2010/02/03',
+        'Open': 61.52,
+        'High': 61.8,
+        'Low': 60.85,
+        'Close': 61.46,
+        'Volume': 5480578
+    },
+    {
+        'Date': '2010/02/04',
+        'Open': 60.95,
+        'High': 61.17,
+        'Low': 59.25,
+        'Close': 59.32,
+        'Volume': 7491344
+    },
+    {
+        'Date': '2010/02/05',
+        'Open': 59.21,
+        'High': 59.74,
+        'Low': 57.14,
+        'Close': 58.4,
+        'Volume': 9676128
+    },
+    {
+        'Date': '2010/02/08',
+        'Open': 58.33,
+        'High': 58.97,
+        'Low': 57.78,
+        'Close': 57.89,
+        'Volume': 4724664
+    },
+    {
+        'Date': '2010/02/09',
+        'Open': 58.62,
+        'High': 60.43,
+        'Low': 58.39,
+        'Close': 59.74,
+        'Volume': 8250844
+    },
+    {
+        'Date': '2010/02/10',
+        'Open': 59.71,
+        'High': 60.05,
+        'Low': 58.94,
+        'Close': 59.54,
+        'Volume': 4237165
+    },
+    {
+        'Date': '2010/02/11',
+        'Open': 59.75,
+        'High': 60.75,
+        'Low': 58.94,
+        'Close': 60.59,
+        'Volume': 4395736
+    },
+    {
+        'Date': '2010/02/12',
+        'Open': 59.65,
+        'High': 59.65,
+        'Low': 59.65,
+        'Close': 59.65,
+        'Volume': 0
+    },
+    {
+        'Date': '2010/02/15',
+        'Open': 59.65,
+        'High': 59.65,
+        'Low': 59.65,
+        'Close': 59.65,
+        'Volume': 0
+    },
+    {
+        'Date': '2010/02/16',
+        'Open': 60.42,
+        'High': 61.29,
+        'Low': 59.9,
+        'Close': 61.26,
+        'Volume': 4268659
+    },
+    {
+        'Date': '2010/02/17',
+        'Open': 61.39,
+        'High': 62,
+        'Low': 61,
+        'Close': 61.82,
+        'Volume': 4116171
+    },
+    {
+        'Date': '2010/02/18',
+        'Open': 61.78,
+        'High': 63.01,
+        'Low': 61.72,
+        'Close': 62.89,
+        'Volume': 4391778
+    },
+    {
+        'Date': '2010/02/19',
+        'Open': 62.65,
+        'High': 64.34,
+        'Low': 62.65,
+        'Close': 63.59,
+        'Volume': 7371049
+    },
+    {
+        'Date': '2010/02/22',
+        'Open': 63.58,
+        'High': 64.47,
+        'Low': 63.19,
+        'Close': 63.97,
+        'Volume': 6034004
+    },
+    {
+        'Date': '2010/02/23',
+        'Open': 63.81,
+        'High': 64.17,
+        'Low': 62.25,
+        'Close': 62.77,
+        'Volume': 6484460
+    },
+    {
+        'Date': '2010/02/24',
+        'Open': 63,
+        'High': 63.7,
+        'Low': 62.64,
+        'Close': 63.48,
+        'Volume': 3400361
+    },
+    {
+        'Date': '2010/02/25',
+        'Open': 62.72,
+        'High': 62.97,
+        'Low': 62,
+        'Close': 62.87,
+        'Volume': 5043170
+    },
+    {
+        'Date': '2010/02/26',
+        'Open': 63.09,
+        'High': 63.88,
+        'Low': 63.03,
+        'Close': 63.16,
+        'Volume': 4415909
+    },
+    {
+        'Date': '2010/03/01',
+        'Open': 63.05,
+        'High': 64.33,
+        'Low': 63,
+        'Close': 64,
+        'Volume': 5265630
+    },
+    {
+        'Date': '2010/03/02',
+        'Open': 64.64,
+        'High': 65.33,
+        'Low': 64.36,
+        'Close': 64.44,
+        'Volume': 4383103
+    },
+    {
+        'Date': '2010/03/03',
+        'Open': 64.58,
+        'High': 64.97,
+        'Low': 64.05,
+        'Close': 64.45,
+        'Volume': 4289350
+    },
+    {
+        'Date': '2010/03/04',
+        'Open': 65.09,
+        'High': 65.8,
+        'Low': 64.85,
+        'Close': 65.55,
+        'Volume': 7718659
+    },
+    {
+        'Date': '2010/03/05',
+        'Open': 66.06,
+        'High': 68.04,
+        'Low': 66.03,
+        'Close': 67.93,
+        'Volume': 8506441
+    },
+    {
+        'Date': '2010/03/08',
+        'Open': 68.01,
+        'High': 68.01,
+        'Low': 67.13,
+        'Close': 67.24,
+        'Volume': 5077225
+    },
+    {
+        'Date': '2010/03/09',
+        'Open': 67.57,
+        'High': 68.34,
+        'Low': 67.35,
+        'Close': 67.79,
+        'Volume': 7655839
+    },
+    {
+        'Date': '2010/03/10',
+        'Open': 68.14,
+        'High': 70.48,
+        'Low': 68.03,
+        'Close': 70.01,
+        'Volume': 10616531
+    },
+    {
+        'Date': '2010/03/11',
+        'Open': 70.08,
+        'High': 70.43,
+        'Low': 69.15,
+        'Close': 70.07,
+        'Volume': 7293133
+    },
+    {
+        'Date': '2010/03/12',
+        'Open': 70.48,
+        'High': 70.49,
+        'Low': 69.25,
+        'Close': 69.83,
+        'Volume': 5302767
+    },
+    {
+        'Date': '2010/03/15',
+        'Open': 69.37,
+        'High': 69.77,
+        'Low': 68.52,
+        'Close': 69.4,
+        'Volume': 7709023
+    },
+    {
+        'Date': '2010/03/16',
+        'Open': 69.24,
+        'High': 69.31,
+        'Low': 68.3,
+        'Close': 68.72,
+        'Volume': 7495575
+    },
+    {
+        'Date': '2010/03/17',
+        'Open': 68.97,
+        'High': 69.49,
+        'Low': 68.29,
+        'Close': 69.38,
+        'Volume': 6004213
+    },
+    {
+        'Date': '2010/03/18',
+        'Open': 69.35,
+        'High': 70.93,
+        'Low': 69.19,
+        'Close': 70.87,
+        'Volume': 7435774
+    },
+    {
+        'Date': '2010/03/19',
+        'Open': 73.2,
+        'High': 73.3,
+        'Low': 70.72,
+        'Close': 70.72,
+        'Volume': 17722432
+    },
+    {
+        'Date': '2010/03/22',
+        'Open': 71.66,
+        'High': 72.64,
+        'Low': 71.51,
+        'Close': 71.91,
+        'Volume': 9014855
+    },
+    {
+        'Date': '2010/03/23',
+        'Open': 72.54,
+        'High': 72.63,
+        'Low': 71.51,
+        'Close': 72.18,
+        'Volume': 4986322
+    },
+    {
+        'Date': '2010/03/24',
+        'Open': 72.42,
+        'High': 73.2,
+        'Low': 71.78,
+        'Close': 72.32,
+        'Volume': 7699920
+    },
+    {
+        'Date': '2010/03/25',
+        'Open': 72.95,
+        'High': 73.43,
+        'Low': 72,
+        'Close': 72.49,
+        'Volume': 5431155
+    },
+    {
+        'Date': '2010/03/26',
+        'Open': 72.66,
+        'High': 72.99,
+        'Low': 72.35,
+        'Close': 72.59,
+        'Volume': 4933688
+    },
+    {
+        'Date': '2010/03/29',
+        'Open': 73.08,
+        'High': 74.53,
+        'Low': 73,
+        'Close': 74.11,
+        'Volume': 9064111
+    },
+    {
+        'Date': '2010/03/30',
+        'Open': 73.84,
+        'High': 74.18,
+        'Low': 72.7,
+        'Close': 73.53,
+        'Volume': 4381292
+    },
+    {
+        'Date': '2010/03/31',
+        'Open': 72.92,
+        'High': 73.06,
+        'Low': 71.95,
+        'Close': 72.61,
+        'Volume': 5884899
+    },
+    {
+        'Date': '2010/04/01',
+        'Open': 72.99,
+        'High': 72.99,
+        'Low': 72.99,
+        'Close': 72.99,
+        'Volume': 0
+    },
+    {
+        'Date': '2010/04/02',
+        'Open': 72.99,
+        'High': 72.99,
+        'Low': 72.99,
+        'Close': 72.99,
+        'Volume': 0
+    },
+    {
+        'Date': '2010/04/05',
+        'Open': 72.99,
+        'High': 73.05,
+        'Low': 70.95,
+        'Close': 72.04,
+        'Volume': 9326414
+    },
+    {
+        'Date': '2010/04/06',
+        'Open': 71.84,
+        'High': 73.18,
+        'Low': 71.77,
+        'Close': 72.36,
+        'Volume': 5194801
+    },
+    {
+        'Date': '2010/04/07',
+        'Open': 72.16,
+        'High': 72.52,
+        'Low': 71.47,
+        'Close': 72.1,
+        'Volume': 6717177
+    },
+    {
+        'Date': '2010/04/08',
+        'Open': 71.89,
+        'High': 72.46,
+        'Low': 71.21,
+        'Close': 72.28,
+        'Volume': 3743018
+    },
+    {
+        'Date': '2010/04/09',
+        'Open': 72.26,
+        'High': 72.66,
+        'Low': 71.81,
+        'Close': 72.42,
+        'Volume': 3345780
+    },
+    {
+        'Date': '2010/04/12',
+        'Open': 72.15,
+        'High': 72.57,
+        'Low': 71.8,
+        'Close': 71.92,
+        'Volume': 3666172
+    },
+    {
+        'Date': '2010/04/13',
+        'Open': 71.54,
+        'High': 71.69,
+        'Low': 70.5,
+        'Close': 71.19,
+        'Volume': 5079284
+    },
+    {
+        'Date': '2010/04/14',
+        'Open': 70.83,
+        'High': 71.76,
+        'Low': 70.81,
+        'Close': 71.7,
+        'Volume': 3496649
+    },
+    {
+        'Date': '2010/04/15',
+        'Open': 71.34,
+        'High': 72.61,
+        'Low': 71.34,
+        'Close': 72.09,
+        'Volume': 2943682
+    },
+    {
+        'Date': '2010/04/16',
+        'Open': 72.1,
+        'High': 72.1,
+        'Low': 69.88,
+        'Close': 70.79,
+        'Volume': 8075323
+    },
+    {
+        'Date': '2010/04/19',
+        'Open': 70.27,
+        'High': 71.28,
+        'Low': 70.16,
+        'Close': 70.96,
+        'Volume': 4203068
+    },
+    {
+        'Date': '2010/04/20',
+        'Open': 71.54,
+        'High': 71.98,
+        'Low': 70.95,
+        'Close': 71.41,
+        'Volume': 4760806
+    },
+    {
+        'Date': '2010/04/21',
+        'Open': 71.51,
+        'High': 74.65,
+        'Low': 71.51,
+        'Close': 74.16,
+        'Volume': 12037705
+    },
+    {
+        'Date': '2010/04/22',
+        'Open': 74.46,
+        'High': 76,
+        'Low': 73.68,
+        'Close': 75.59,
+        'Volume': 9088834
+    },
+    {
+        'Date': '2010/04/23',
+        'Open': 75.04,
+        'High': 75.68,
+        'Low': 74.55,
+        'Close': 75.13,
+        'Volume': 5198190
+    },
+    {
+        'Date': '2010/04/26',
+        'Open': 74.58,
+        'High': 75.29,
+        'Low': 74.14,
+        'Close': 74.34,
+        'Volume': 4024935
+    },
+    {
+        'Date': '2010/04/27',
+        'Open': 74.65,
+        'High': 74.93,
+        'Low': 72.23,
+        'Close': 72.48,
+        'Volume': 6054842
+    },
+    {
+        'Date': '2010/04/28',
+        'Open': 72.95,
+        'High': 72.99,
+        'Low': 71.34,
+        'Close': 72.37,
+        'Volume': 5699477
+    },
+    {
+        'Date': '2010/04/29',
+        'Open': 73,
+        'High': 74,
+        'Low': 72.67,
+        'Close': 73.79,
+        'Volume': 5203310
+    },
+    {
+        'Date': '2010/04/30',
+        'Open': 73.8,
+        'High': 74.48,
+        'Low': 72.26,
+        'Close': 72.43,
+        'Volume': 5601081
+    },
+    {
+        'Date': '2010/05/03',
+        'Open': 72.62,
+        'High': 74.7,
+        'Low': 72.46,
+        'Close': 74.39,
+        'Volume': 5407779
+    },
+    {
+        'Date': '2010/05/04',
+        'Open': 73.31,
+        'High': 73.45,
+        'Low': 72.23,
+        'Close': 72.79,
+        'Volume': 6230700
+    },
+    {
+        'Date': '2010/05/05',
+        'Open': 71.9,
+        'High': 72.04,
+        'Low': 70.44,
+        'Close': 71,
+        'Volume': 5509124
+    },
+    {
+        'Date': '2010/05/06',
+        'Open': 70.66,
+        'High': 71.49,
+        'Low': 62,
+        'Close': 67.97,
+        'Volume': 13771537
+    },
+    {
+        'Date': '2010/05/07',
+        'Open': 68.29,
+        'High': 69.12,
+        'Low': 65.8,
+        'Close': 66.72,
+        'Volume': 8927346
+    },
+    {
+        'Date': '2010/05/10',
+        'Open': 69.96,
+        'High': 71.73,
+        'Low': 69.8,
+        'Close': 71,
+        'Volume': 8841884
+    },
+    {
+        'Date': '2010/05/11',
+        'Open': 70.31,
+        'High': 72.67,
+        'Low': 70.14,
+        'Close': 71.42,
+        'Volume': 6551880
+    },
+    {
+        'Date': '2010/05/12',
+        'Open': 72.04,
+        'High': 73.37,
+        'Low': 72.04,
+        'Close': 72.87,
+        'Volume': 6331552
+    },
+    {
+        'Date': '2010/05/13',
+        'Open': 72.66,
+        'High': 73.3,
+        'Low': 71.56,
+        'Close': 71.76,
+        'Volume': 3953696
+    },
+    {
+        'Date': '2010/05/14',
+        'Open': 71.08,
+        'High': 71.4,
+        'Low': 68.98,
+        'Close': 69.82,
+        'Volume': 7954557
+    },
+    {
+        'Date': '2010/05/17',
+        'Open': 70.36,
+        'High': 70.37,
+        'Low': 67.62,
+        'Close': 69.68,
+        'Volume': 4814936
+    },
+    {
+        'Date': '2010/05/18',
+        'Open': 69.89,
+        'High': 70.13,
+        'Low': 67.3,
+        'Close': 67.72,
+        'Volume': 8882829
+    },
+    {
+        'Date': '2010/05/19',
+        'Open': 66.85,
+        'High': 67.55,
+        'Low': 65.28,
+        'Close': 66.21,
+        'Volume': 9974312
+    },
+    {
+        'Date': '2010/05/20',
+        'Open': 65,
+        'High': 65.11,
+        'Low': 62.8,
+        'Close': 63,
+        'Volume': 10904161
+    },
+    {
+        'Date': '2010/05/21',
+        'Open': 61.99,
+        'High': 65,
+        'Low': 61.39,
+        'Close': 64.56,
+        'Volume': 10882625
+    },
+    {
+        'Date': '2010/05/24',
+        'Open': 63.66,
+        'High': 64.61,
+        'Low': 63.06,
+        'Close': 63.15,
+        'Volume': 6168825
+    },
+    {
+        'Date': '2010/05/25',
+        'Open': 61,
+        'High': 62.98,
+        'Low': 60.61,
+        'Close': 62.78,
+        'Volume': 6903135
+    },
+    {
+        'Date': '2010/05/26',
+        'Open': 63.6,
+        'High': 65.41,
+        'Low': 63,
+        'Close': 63.26,
+        'Volume': 7386008
+    },
+    {
+        'Date': '2010/05/27',
+        'Open': 64.86,
+        'High': 65.23,
+        'Low': 63.91,
+        'Close': 65.13,
+        'Volume': 7444591
+    },
+    {
+        'Date': '2010/05/28',
+        'Open': 64.18,
+        'High': 64.18,
+        'Low': 64.18,
+        'Close': 64.18,
+        'Volume': 0
+    },
+    {
+        'Date': '2010/05/31',
+        'Open': 64.18,
+        'High': 64.18,
+        'Low': 64.18,
+        'Close': 64.18,
+        'Volume': 0
+    },
+    {
+        'Date': '2010/06/01',
+        'Open': 64.27,
+        'High': 65.2,
+        'Low': 62.86,
+        'Close': 62.95,
+        'Volume': 6318443
+    },
+    {
+        'Date': '2010/06/02',
+        'Open': 63.39,
+        'High': 64.37,
+        'Low': 62.06,
+        'Close': 64.34,
+        'Volume': 4588144
+    },
+    {
+        'Date': '2010/06/03',
+        'Open': 64.84,
+        'High': 64.84,
+        'Low': 63.51,
+        'Close': 64.31,
+        'Volume': 3775793
+    },
+    {
+        'Date': '2010/06/04',
+        'Open': 63.25,
+        'High': 63.41,
+        'Low': 60.93,
+        'Close': 61.15,
+        'Volume': 8228715
+    },
+    {
+        'Date': '2010/06/07',
+        'Open': 61.69,
+        'High': 61.7,
+        'Low': 60.07,
+        'Close': 60.11,
+        'Volume': 5918574
+    },
+    {
+        'Date': '2010/06/08',
+        'Open': 60.33,
+        'High': 61.1,
+        'Low': 59.84,
+        'Close': 61.02,
+        'Volume': 7192623
+    },
+    {
+        'Date': '2010/06/09',
+        'Open': 61.48,
+        'High': 63.18,
+        'Low': 61.17,
+        'Close': 61.71,
+        'Volume': 7729414
+    },
+    {
+        'Date': '2010/06/10',
+        'Open': 62.81,
+        'High': 64.01,
+        'Low': 62.3,
+        'Close': 63.89,
+        'Volume': 5682835
+    },
+    {
+        'Date': '2010/06/11',
+        'Open': 63.16,
+        'High': 65.7,
+        'Low': 63.15,
+        'Close': 65.38,
+        'Volume': 8462575
+    },
+    {
+        'Date': '2010/06/14',
+        'Open': 66.22,
+        'High': 66.55,
+        'Low': 64.71,
+        'Close': 64.82,
+        'Volume': 6000064
+    },
+    {
+        'Date': '2010/06/15',
+        'Open': 65.67,
+        'High': 67.57,
+        'Low': 65.47,
+        'Close': 67.48,
+        'Volume': 6400775
+    },
+    {
+        'Date': '2010/06/16',
+        'Open': 66.93,
+        'High': 67.56,
+        'Low': 66.6,
+        'Close': 67.03,
+        'Volume': 4452275
+    },
+    {
+        'Date': '2010/06/17',
+        'Open': 67.48,
+        'High': 67.49,
+        'Low': 65.88,
+        'Close': 67.26,
+        'Volume': 3637256
+    },
+    {
+        'Date': '2010/06/18',
+        'Open': 67.38,
+        'High': 68.14,
+        'Low': 67.16,
+        'Close': 67.96,
+        'Volume': 6216603
+    },
+    {
+        'Date': '2010/06/21',
+        'Open': 68.95,
+        'High': 69.34,
+        'Low': 67.57,
+        'Close': 67.97,
+        'Volume': 4109588
+    },
+    {
+        'Date': '2010/06/22',
+        'Open': 67.97,
+        'High': 68.47,
+        'Low': 66.15,
+        'Close': 66.28,
+        'Volume': 4188173
+    },
+    {
+        'Date': '2010/06/23',
+        'Open': 66.42,
+        'High': 67.88,
+        'Low': 65.65,
+        'Close': 67.45,
+        'Volume': 6098515
+    },
+    {
+        'Date': '2010/06/24',
+        'Open': 67.17,
+        'High': 68.24,
+        'Low': 67.14,
+        'Close': 67.43,
+        'Volume': 7782533
+    },
+    {
+        'Date': '2010/06/25',
+        'Open': 67.31,
+        'High': 68.77,
+        'Low': 66.67,
+        'Close': 68.77,
+        'Volume': 13325760
+    },
+    {
+        'Date': '2010/06/28',
+        'Open': 68.43,
+        'High': 68.62,
+        'Low': 67.26,
+        'Close': 67.3,
+        'Volume': 5517259
+    },
+    {
+        'Date': '2010/06/29',
+        'Open': 66.11,
+        'High': 66.2,
+        'Low': 62.56,
+        'Close': 63.04,
+        'Volume': 9212875
+    },
+    {
+        'Date': '2010/06/30',
+        'Open': 63.05,
+        'High': 64.21,
+        'Low': 62.58,
+        'Close': 62.75,
+        'Volume': 7102383
+    },
+    {
+        'Date': '2010/07/01',
+        'Open': 62.48,
+        'High': 62.72,
+        'Low': 61.31,
+        'Close': 62.26,
+        'Volume': 6465874
+    },
+    {
+        'Date': '2010/07/02',
+        'Open': 61.94,
+        'High': 61.94,
+        'Low': 61.94,
+        'Close': 61.94,
+        'Volume': 0
+    },
+    {
+        'Date': '2010/07/05',
+        'Open': 61.94,
+        'High': 61.94,
+        'Low': 61.94,
+        'Close': 61.94,
+        'Volume': 0
+    },
+    {
+        'Date': '2010/07/06',
+        'Open': 62.71,
+        'High': 63.02,
+        'Low': 60.65,
+        'Close': 61.36,
+        'Volume': 5444212
+    },
+    {
+        'Date': '2010/07/07',
+        'Open': 61.48,
+        'High': 63.37,
+        'Low': 61.03,
+        'Close': 63.3,
+        'Volume': 4785046
+    },
+    {
+        'Date': '2010/07/08',
+        'Open': 64.09,
+        'High': 64.89,
+        'Low': 63.55,
+        'Close': 64.73,
+        'Volume': 4489385
+    },
+    {
+        'Date': '2010/07/09',
+        'Open': 65.2,
+        'High': 65.2,
+        'Low': 64.01,
+        'Close': 64.66,
+        'Volume': 3145076
+    },
+    {
+        'Date': '2010/07/12',
+        'Open': 64.55,
+        'High': 64.98,
+        'Low': 64.01,
+        'Close': 64.34,
+        'Volume': 2299533
+    },
+    {
+        'Date': '2010/07/13',
+        'Open': 65.15,
+        'High': 65.36,
+        'Low': 64.18,
+        'Close': 64.43,
+        'Volume': 6208260
+    },
+    {
+        'Date': '2010/07/14',
+        'Open': 64.29,
+        'High': 65.39,
+        'Low': 64.05,
+        'Close': 64.75,
+        'Volume': 3822487
+    },
+    {
+        'Date': '2010/07/15',
+        'Open': 65.65,
+        'High': 65.78,
+        'Low': 63.36,
+        'Close': 64.37,
+        'Volume': 8069172
+    },
+    {
+        'Date': '2010/07/16',
+        'Open': 63.96,
+        'High': 64.26,
+        'Low': 61.68,
+        'Close': 61.9,
+        'Volume': 7016315
+    },
+    {
+        'Date': '2010/07/19',
+        'Open': 62.72,
+        'High': 63.36,
+        'Low': 62.04,
+        'Close': 63.18,
+        'Volume': 5031493
+    },
+    {
+        'Date': '2010/07/20',
+        'Open': 62.26,
+        'High': 64,
+        'Low': 61.83,
+        'Close': 63.88,
+        'Volume': 5069055
+    },
+    {
+        'Date': '2010/07/21',
+        'Open': 64.4,
+        'High': 64.81,
+        'Low': 62.66,
+        'Close': 63.18,
+        'Volume': 4459407
+    },
+    {
+        'Date': '2010/07/22',
+        'Open': 64.02,
+        'High': 67.11,
+        'Low': 64.02,
+        'Close': 66.6,
+        'Volume': 7574451
+    },
+    {
+        'Date': '2010/07/23',
+        'Open': 66.49,
+        'High': 68.17,
+        'Low': 66.36,
+        'Close': 67.93,
+        'Volume': 5029708
+    },
+    {
+        'Date': '2010/07/26',
+        'Open': 68.15,
+        'High': 68.99,
+        'Low': 68,
+        'Close': 68.85,
+        'Volume': 5836465
+    },
+    {
+        'Date': '2010/07/27',
+        'Open': 69.25,
+        'High': 69.75,
+        'Low': 68.4,
+        'Close': 68.62,
+        'Volume': 5687098
+    },
+    {
+        'Date': '2010/07/28',
+        'Open': 67.62,
+        'High': 68,
+        'Low': 66.9,
+        'Close': 67.32,
+        'Volume': 5540629
+    },
+    {
+        'Date': '2010/07/29',
+        'Open': 67.85,
+        'High': 68.53,
+        'Low': 66.69,
+        'Close': 67.22,
+        'Volume': 4460227
+    },
+    {
+        'Date': '2010/07/30',
+        'Open': 66.61,
+        'High': 68.38,
+        'Low': 66.47,
+        'Close': 68.14,
+        'Volume': 6032163
+    },
+    {
+        'Date': '2010/08/02',
+        'Open': 69.01,
+        'High': 69.93,
+        'Low': 68.5,
+        'Close': 69.69,
+        'Volume': 5430717
+    },
+    {
+        'Date': '2010/08/03',
+        'Open': 69.31,
+        'High': 70,
+        'Low': 68.93,
+        'Close': 69.54,
+        'Volume': 3778718
+    },
+    {
+        'Date': '2010/08/04',
+        'Open': 69.42,
+        'High': 69.93,
+        'Low': 69.16,
+        'Close': 69.25,
+        'Volume': 3861191
+    },
+    {
+        'Date': '2010/08/05',
+        'Open': 68.73,
+        'High': 69.25,
+        'Low': 68.33,
+        'Close': 68.71,
+        'Volume': 4318815
+    },
+    {
+        'Date': '2010/08/06',
+        'Open': 68.03,
+        'High': 68.72,
+        'Low': 67.36,
+        'Close': 68.7,
+        'Volume': 4498788
+    },
+    {
+        'Date': '2010/08/09',
+        'Open': 69.17,
+        'High': 69.47,
+        'Low': 68.45,
+        'Close': 68.99,
+        'Volume': 2907790
+    },
+    {
+        'Date': '2010/08/10',
+        'Open': 68.29,
+        'High': 68.97,
+        'Low': 67.54,
+        'Close': 68.62,
+        'Volume': 4127296
+    },
+    {
+        'Date': '2010/08/11',
+        'Open': 67.18,
+        'High': 67.26,
+        'Low': 64.92,
+        'Close': 65.6,
+        'Volume': 5230837
+    },
+    {
+        'Date': '2010/08/12',
+        'Open': 64.65,
+        'High': 65.27,
+        'Low': 64.44,
+        'Close': 64.7,
+        'Volume': 3847607
+    },
+    {
+        'Date': '2010/08/13',
+        'Open': 64.59,
+        'High': 65.7,
+        'Low': 64.54,
+        'Close': 64.84,
+        'Volume': 3667747
+    },
+    {
+        'Date': '2010/08/16',
+        'Open': 64.27,
+        'High': 64.93,
+        'Low': 63.65,
+        'Close': 64.4,
+        'Volume': 3042334
+    },
+    {
+        'Date': '2010/08/17',
+        'Open': 65.16,
+        'High': 66.91,
+        'Low': 64.65,
+        'Close': 65.99,
+        'Volume': 4303899
+    },
+    {
+        'Date': '2010/08/18',
+        'Open': 66.05,
+        'High': 66.36,
+        'Low': 64.99,
+        'Close': 66,
+        'Volume': 2816059
+    },
+    {
+        'Date': '2010/08/19',
+        'Open': 65.74,
+        'High': 65.82,
+        'Low': 64.15,
+        'Close': 64.62,
+        'Volume': 4201568
+    },
+    {
+        'Date': '2010/08/20',
+        'Open': 64.2,
+        'High': 64.73,
+        'Low': 63.59,
+        'Close': 64.6,
+        'Volume': 3865920
+    },
+    {
+        'Date': '2010/08/23',
+        'Open': 65.09,
+        'High': 65.24,
+        'Low': 63.21,
+        'Close': 63.3,
+        'Volume': 3888194
+    },
+    {
+        'Date': '2010/08/24',
+        'Open': 62.55,
+        'High': 62.81,
+        'Low': 60.53,
+        'Close': 60.93,
+        'Volume': 9983972
+    },
+    {
+        'Date': '2010/08/25',
+        'Open': 60.49,
+        'High': 61.11,
+        'Low': 59.48,
+        'Close': 60.76,
+        'Volume': 5144544
+    },
+    {
+        'Date': '2010/08/26',
+        'Open': 61.36,
+        'High': 62.56,
+        'Low': 61.07,
+        'Close': 61.32,
+        'Volume': 4889769
+    },
+    {
+        'Date': '2010/08/27',
+        'Open': 61.13,
+        'High': 63.34,
+        'Low': 60.57,
+        'Close': 63.16,
+        'Volume': 6851673
+    },
+    {
+        'Date': '2010/08/30',
+        'Open': 63,
+        'High': 63.19,
+        'Low': 62.1,
+        'Close': 62.1,
+        'Volume': 3279135
+    },
+    {
+        'Date': '2010/08/31',
+        'Open': 62,
+        'High': 62.18,
+        'Low': 60.8,
+        'Close': 61.13,
+        'Volume': 5309421
+    },
+    {
+        'Date': '2010/09/01',
+        'Open': 61.79,
+        'High': 63.09,
+        'Low': 61.66,
+        'Close': 62.29,
+        'Volume': 5688798
+    },
+    {
+        'Date': '2010/09/02',
+        'Open': 62.34,
+        'High': 63.39,
+        'Low': 62.2,
+        'Close': 63.39,
+        'Volume': 3465719
+    },
+    {
+        'Date': '2010/09/03',
+        'Open': 64.64,
+        'High': 64.64,
+        'Low': 64.64,
+        'Close': 64.64,
+        'Volume': 0
+    },
+    {
+        'Date': '2010/09/06',
+        'Open': 64.64,
+        'High': 64.64,
+        'Low': 64.64,
+        'Close': 64.64,
+        'Volume': 0
+    },
+    {
+        'Date': '2010/09/07',
+        'Open': 64.25,
+        'High': 64.25,
+        'Low': 63.29,
+        'Close': 63.42,
+        'Volume': 2529793
+    },
+    {
+        'Date': '2010/09/08',
+        'Open': 63.6,
+        'High': 65,
+        'Low': 63.58,
+        'Close': 64.5,
+        'Volume': 3747703
+    },
+    {
+        'Date': '2010/09/09',
+        'Open': 65.51,
+        'High': 65.63,
+        'Low': 62.95,
+        'Close': 63.44,
+        'Volume': 4190696
+    },
+    {
+        'Date': '2010/09/10',
+        'Open': 63.38,
+        'High': 64.1,
+        'Low': 62.96,
+        'Close': 63.84,
+        'Volume': 3214772
+    },
+    {
+        'Date': '2010/09/13',
+        'Open': 64.73,
+        'High': 64.98,
+        'Low': 63.92,
+        'Close': 64.19,
+        'Volume': 3126886
+    },
+    {
+        'Date': '2010/09/14',
+        'Open': 64.02,
+        'High': 64.35,
+        'Low': 62.43,
+        'Close': 62.76,
+        'Volume': 6025475
+    },
+    {
+        'Date': '2010/09/15',
+        'Open': 62.49,
+        'High': 62.79,
+        'Low': 61.89,
+        'Close': 62.73,
+        'Volume': 4929167
+    },
+    {
+        'Date': '2010/09/16',
+        'Open': 62.39,
+        'High': 63.35,
+        'Low': 62.2,
+        'Close': 62.58,
+        'Volume': 4681838
+    },
+    {
+        'Date': '2010/09/17',
+        'Open': 63.26,
+        'High': 63.34,
+        'Low': 62,
+        'Close': 62.95,
+        'Volume': 10702625
+    },
+    {
+        'Date': '2010/09/20',
+        'Open': 62.99,
+        'High': 63.9,
+        'Low': 62.53,
+        'Close': 63.72,
+        'Volume': 4187283
+    },
+    {
+        'Date': '2010/09/21',
+        'Open': 63.8,
+        'High': 64.5,
+        'Low': 63.39,
+        'Close': 64.23,
+        'Volume': 5361146
+    },
+    {
+        'Date': '2010/09/22',
+        'Open': 64.38,
+        'High': 64.86,
+        'Low': 63.63,
+        'Close': 63.9,
+        'Volume': 3635438
+    },
+    {
+        'Date': '2010/09/23',
+        'Open': 63.31,
+        'High': 63.49,
+        'Low': 62.56,
+        'Close': 62.65,
+        'Volume': 3656936
+    },
+    {
+        'Date': '2010/09/24',
+        'Open': 63.52,
+        'High': 64.83,
+        'Low': 63.33,
+        'Close': 64.6,
+        'Volume': 4626836
+    },
+    {
+        'Date': '2010/09/27',
+        'Open': 64.61,
+        'High': 64.7,
+        'Low': 63.8,
+        'Close': 63.89,
+        'Volume': 2762402
+    },
+    {
+        'Date': '2010/09/28',
+        'Open': 63.85,
+        'High': 64.67,
+        'Low': 62.94,
+        'Close': 64.52,
+        'Volume': 3583321
+    },
+    {
+        'Date': '2010/09/29',
+        'Open': 64.71,
+        'High': 66.26,
+        'Low': 64.44,
+        'Close': 65.97,
+        'Volume': 5874689
+    },
+    {
+        'Date': '2010/09/30',
+        'Open': 67.09,
+        'High': 67.97,
+        'Low': 66.05,
+        'Close': 66.54,
+        'Volume': 8214220
+    },
+    {
+        'Date': '2010/10/01',
+        'Open': 67.54,
+        'High': 67.98,
+        'Low': 66.67,
+        'Close': 66.83,
+        'Volume': 4489476
+    },
+    {
+        'Date': '2010/10/04',
+        'Open': 66.57,
+        'High': 67.89,
+        'Low': 65.86,
+        'Close': 66.33,
+        'Volume': 4073665
+    },
+    {
+        'Date': '2010/10/05',
+        'Open': 67.02,
+        'High': 68.98,
+        'Low': 67.02,
+        'Close': 68.6,
+        'Volume': 7517772
+    },
+    {
+        'Date': '2010/10/06',
+        'Open': 68.61,
+        'High': 69.39,
+        'Low': 68.41,
+        'Close': 68.58,
+        'Volume': 4719126
+    },
+    {
+        'Date': '2010/10/07',
+        'Open': 68.97,
+        'High': 69.14,
+        'Low': 67.8,
+        'Close': 68.46,
+        'Volume': 5506142
+    },
+    {
+        'Date': '2010/10/08',
+        'Open': 68.47,
+        'High': 69.71,
+        'Low': 68.15,
+        'Close': 69.23,
+        'Volume': 3335682
+    },
+    {
+        'Date': '2010/10/11',
+        'Open': 69.51,
+        'High': 70.25,
+        'Low': 69.23,
+        'Close': 69.99,
+        'Volume': 3469356
+    },
+    {
+        'Date': '2010/10/12',
+        'Open': 70.16,
+        'High': 70.6,
+        'Low': 68.91,
+        'Close': 70.22,
+        'Volume': 4381517
+    },
+    {
+        'Date': '2010/10/13',
+        'Open': 70.73,
+        'High': 72.17,
+        'Low': 70.66,
+        'Close': 71.47,
+        'Volume': 6038876
+    },
+    {
+        'Date': '2010/10/14',
+        'Open': 71.73,
+        'High': 72,
+        'Low': 70.85,
+        'Close': 71.36,
+        'Volume': 3841826
+    },
+    {
+        'Date': '2010/10/15',
+        'Open': 71.85,
+        'High': 71.9,
+        'Low': 70.05,
+        'Close': 70.11,
+        'Volume': 5641988
+    },
+    {
+        'Date': '2010/10/18',
+        'Open': 70.19,
+        'High': 71.05,
+        'Low': 70.03,
+        'Close': 70.23,
+        'Volume': 4832596
+    },
+    {
+        'Date': '2010/10/19',
+        'Open': 69.57,
+        'High': 69.96,
+        'Low': 68.35,
+        'Close': 69.05,
+        'Volume': 4493842
+    },
+    {
+        'Date': '2010/10/20',
+        'Open': 70,
+        'High': 71.94,
+        'Low': 69.57,
+        'Close': 71.36,
+        'Volume': 8067660
+    },
+    {
+        'Date': '2010/10/21',
+        'Open': 71.61,
+        'High': 71.88,
+        'Low': 70.57,
+        'Close': 71.5,
+        'Volume': 4630931
+    },
+    {
+        'Date': '2010/10/22',
+        'Open': 71.38,
+        'High': 71.63,
+        'Low': 70.61,
+        'Close': 71.26,
+        'Volume': 3062553
+    },
+    {
+        'Date': '2010/10/25',
+        'Open': 71.68,
+        'High': 72.49,
+        'Low': 71.47,
+        'Close': 71.66,
+        'Volume': 4802975
+    },
+    {
+        'Date': '2010/10/26',
+        'Open': 71.1,
+        'High': 71.65,
+        'Low': 70.73,
+        'Close': 71.3,
+        'Volume': 3547112
+    },
+    {
+        'Date': '2010/10/27',
+        'Open': 70.87,
+        'High': 71.11,
+        'Low': 69.71,
+        'Close': 70.86,
+        'Volume': 3818178
+    },
+    {
+        'Date': '2010/10/28',
+        'Open': 71.3,
+        'High': 71.79,
+        'Low': 70.35,
+        'Close': 71.27,
+        'Volume': 4128092
+    },
+    {
+        'Date': '2010/10/29',
+        'Open': 71.15,
+        'High': 71.46,
+        'Low': 70.36,
+        'Close': 70.64,
+        'Volume': 3202225
+    },
+    {
+        'Date': '2010/11/01',
+        'Open': 70.71,
+        'High': 71.89,
+        'Low': 69.91,
+        'Close': 70.48,
+        'Volume': 3324632
+    },
+    {
+        'Date': '2010/11/02',
+        'Open': 70.85,
+        'High': 70.98,
+        'Low': 68.8,
+        'Close': 69.78,
+        'Volume': 6340501
+    },
+    {
+        'Date': '2010/11/03',
+        'Open': 69.66,
+        'High': 69.73,
+        'Low': 68.04,
+        'Close': 68.94,
+        'Volume': 4676861
+    },
+    {
+        'Date': '2010/11/04',
+        'Open': 70,
+        'High': 71.58,
+        'Low': 69.78,
+        'Close': 70.85,
+        'Volume': 5758303
+    },
+    {
+        'Date': '2010/11/05',
+        'Open': 70.85,
+        'High': 71.65,
+        'Low': 70.5,
+        'Close': 71.27,
+        'Volume': 3625799
+    },
+    {
+        'Date': '2010/11/08',
+        'Open': 70.06,
+        'High': 70.41,
+        'Low': 69.75,
+        'Close': 70.21,
+        'Volume': 4171524
+    },
+    {
+        'Date': '2010/11/09',
+        'Open': 70.27,
+        'High': 70.55,
+        'Low': 68.83,
+        'Close': 69.25,
+        'Volume': 4587423
+    },
+    {
+        'Date': '2010/11/10',
+        'Open': 67.69,
+        'High': 67.69,
+        'Low': 66.79,
+        'Close': 67.07,
+        'Volume': 10494604
+    },
+    {
+        'Date': '2010/11/11',
+        'Open': 66.55,
+        'High': 66.7,
+        'Low': 65.04,
+        'Close': 65.37,
+        'Volume': 10033682
+    },
+    {
+        'Date': '2010/11/12',
+        'Open': 65.01,
+        'High': 65.25,
+        'Low': 63.01,
+        'Close': 63.09,
+        'Volume': 16721476
+    },
+    {
+        'Date': '2010/11/15',
+        'Open': 63.35,
+        'High': 64.1,
+        'Low': 62.62,
+        'Close': 63.61,
+        'Volume': 10968680
+    },
+    {
+        'Date': '2010/11/16',
+        'Open': 63.35,
+        'High': 63.35,
+        'Low': 61.84,
+        'Close': 62.78,
+        'Volume': 9636736
+    },
+    {
+        'Date': '2010/11/17',
+        'Open': 62.67,
+        'High': 63.02,
+        'Low': 62.17,
+        'Close': 62.5,
+        'Volume': 8173227
+    },
+    {
+        'Date': '2010/11/18',
+        'Open': 63.35,
+        'High': 64.72,
+        'Low': 62.72,
+        'Close': 64.61,
+        'Volume': 11579001
+    },
+    {
+        'Date': '2010/11/19',
+        'Open': 64.53,
+        'High': 64.74,
+        'Low': 63.39,
+        'Close': 63.59,
+        'Volume': 8824612
+    },
+    {
+        'Date': '2010/11/22',
+        'Open': 63.02,
+        'High': 64.17,
+        'Low': 62.8,
+        'Close': 64.03,
+        'Volume': 5917125
+    },
+    {
+        'Date': '2010/11/23',
+        'Open': 63.43,
+        'High': 64.11,
+        'Low': 63.1,
+        'Close': 63.6,
+        'Volume': 6567822
+    },
+    {
+        'Date': '2010/11/24',
+        'Open': 65.41,
+        'High': 65.41,
+        'Low': 65.41,
+        'Close': 65.41,
+        'Volume': 0
+    },
+    {
+        'Date': '2010/11/26',
+        'Open': 65.09,
+        'High': 65.46,
+        'Low': 64.67,
+        'Close': 64.8,
+        'Volume': 2280773
+    },
+    {
+        'Date': '2010/11/29',
+        'Open': 64.33,
+        'High': 64.7,
+        'Low': 63.44,
+        'Close': 64.36,
+        'Volume': 4385199
+    },
+    {
+        'Date': '2010/11/30',
+        'Open': 63.73,
+        'High': 64.21,
+        'Low': 63.47,
+        'Close': 63.77,
+        'Volume': 5819079
+    },
+    {
+        'Date': '2010/12/01',
+        'Open': 64.66,
+        'High': 65.79,
+        'Low': 64.52,
+        'Close': 65.72,
+        'Volume': 7515183
+    },
+    {
+        'Date': '2010/12/02',
+        'Open': 65.62,
+        'High': 66.8,
+        'Low': 65.55,
+        'Close': 66.59,
+        'Volume': 4768256
+    },
+    {
+        'Date': '2010/12/03',
+        'Open': 66.58,
+        'High': 66.68,
+        'Low': 65.95,
+        'Close': 66.54,
+        'Volume': 3357522
+    },
+    {
+        'Date': '2010/12/06',
+        'Open': 66.41,
+        'High': 66.96,
+        'Low': 65.97,
+        'Close': 66.59,
+        'Volume': 3455003
+    },
+    {
+        'Date': '2010/12/07',
+        'Open': 67.04,
+        'High': 67.39,
+        'Low': 66.01,
+        'Close': 66.23,
+        'Volume': 4739511
+    },
+    {
+        'Date': '2010/12/08',
+        'Open': 66.19,
+        'High': 66.56,
+        'Low': 64.92,
+        'Close': 65.18,
+        'Volume': 5230594
+    },
+    {
+        'Date': '2010/12/09',
+        'Open': 65.61,
+        'High': 65.61,
+        'Low': 64.4,
+        'Close': 64.61,
+        'Volume': 5188492
+    },
+    {
+        'Date': '2010/12/10',
+        'Open': 64.63,
+        'High': 64.77,
+        'Low': 63.96,
+        'Close': 64.16,
+        'Volume': 5501949
+    },
+    {
+        'Date': '2010/12/13',
+        'Open': 64.23,
+        'High': 64.38,
+        'Low': 63.63,
+        'Close': 63.79,
+        'Volume': 4823758
+    },
+    {
+        'Date': '2010/12/14',
+        'Open': 63.85,
+        'High': 65.11,
+        'Low': 63.68,
+        'Close': 64.49,
+        'Volume': 6304424
+    },
+    {
+        'Date': '2010/12/15',
+        'Open': 64.29,
+        'High': 64.69,
+        'Low': 64.09,
+        'Close': 64.24,
+        'Volume': 3439085
+    },
+    {
+        'Date': '2010/12/16',
+        'Open': 64.33,
+        'High': 64.85,
+        'Low': 63.71,
+        'Close': 64.4,
+        'Volume': 5169047
+    },
+    {
+        'Date': '2010/12/17',
+        'Open': 64.89,
+        'High': 65.28,
+        'Low': 64.35,
+        'Close': 65.03,
+        'Volume': 8884612
+    },
+    {
+        'Date': '2010/12/20',
+        'Open': 64.74,
+        'High': 64.77,
+        'Low': 62.82,
+        'Close': 63.27,
+        'Volume': 9710920
+    },
+    {
+        'Date': '2010/12/21',
+        'Open': 63.61,
+        'High': 64.35,
+        'Low': 63.28,
+        'Close': 64.19,
+        'Volume': 5092820
+    },
+    {
+        'Date': '2010/12/22',
+        'Open': 64.45,
+        'High': 65.14,
+        'Low': 64.01,
+        'Close': 64.61,
+        'Volume': 5255958
+    },
+    {
+        'Date': '2010/12/23',
+        'Open': 65.06,
+        'High': 65.06,
+        'Low': 65.06,
+        'Close': 65.06,
+        'Volume': 0
+    },
+    {
+        'Date': '2010/12/27',
+        'Open': 64.73,
+        'High': 64.91,
+        'Low': 64.33,
+        'Close': 64.75,
+        'Volume': 2549101
+    },
+    {
+        'Date': '2010/12/28',
+        'Open': 64.81,
+        'High': 65,
+        'Low': 64.33,
+        'Close': 64.86,
+        'Volume': 2643380
+    },
+    {
+        'Date': '2010/12/29',
+        'Open': 65,
+        'High': 65.2,
+        'Low': 64.62,
+        'Close': 65.05,
+        'Volume': 2505431
+    },
+    {
+        'Date': '2010/12/30',
+        'Open': 65.11,
+        'High': 65.23,
+        'Low': 64.73,
+        'Close': 65.01,
+        'Volume': 2343020
+    },
+    {
+        'Date': '2010/12/31',
+        'Open': 64.9,
+        'High': 65.29,
+        'Low': 64.62,
+        'Close': 65.26,
+        'Volume': 2137676
+    }
+];
diff --git a/vue-options-api-demos/charts/shared/stock-data.json b/vue-options-api-demos/charts/shared/stock-data.json
new file mode 100644
index 00000000..895e31a8
--- /dev/null
+++ b/vue-options-api-demos/charts/shared/stock-data.json
@@ -0,0 +1,410 @@
+[
+    {
+        "Date": "\/Date(1196467200000)\/",
+        "Close": 40.635,
+        "Volume": 1650185491,
+        "Open": 40.640,
+        "High": 40.680,
+        "Low": 39.090
+    },
+    {
+        "Date": "\/Date(1199145600000)\/",
+        "Close": 40.130,
+        "Volume": 1979918237,
+        "Open": 40.130,
+        "High": 40.292,
+        "Low": 36.460
+    },
+    {
+        "Date": "\/Date(1201824000000)\/",
+        "Close": 38.440,
+        "Volume": 1572505911,
+        "Open": 38.440,
+        "High": 38.480,
+        "Low": 36.697
+    },
+    {
+        "Date": "\/Date(1204329600000)\/",
+        "Close": 38.240,
+        "Volume": 1922276774,
+        "Open": 38.240,
+        "High": 38.290,
+        "Low": 35.940
+    },
+    {
+        "Date": "\/Date(1207008000000)\/",
+        "Close": 37.031,
+        "Volume": 2078426778,
+        "Open": 37.032,
+        "High": 37.070,
+        "Low": 34.350
+    },
+    {
+        "Date": "\/Date(1209600000000)\/",
+        "Close": 38.240,
+        "Volume": 1727585885,
+        "Open": 38.250,
+        "High": 38.270,
+        "Low": 34.886
+    },
+    {
+        "Date": "\/Date(1212278400000)\/",
+        "Close": 38.650,
+        "Volume": 1776948280,
+        "Open": 38.630,
+        "High": 38.680,
+        "Low": 36.700
+    },
+    {
+        "Date": "\/Date(1214870400000)\/",
+        "Close": 39.900,
+        "Volume": 1456330078,
+        "Open": 39.900,
+        "High": 39.921,
+        "Low": 36.550
+    },
+    {
+        "Date": "\/Date(1217548800000)\/",
+        "Close": 40.100,
+        "Volume": 1557166494,
+        "Open": 40.095,
+        "High": 40.140,
+        "Low": 38.260
+    },
+    {
+        "Date": "\/Date(1220227200000)\/",
+        "Close": 39.841,
+        "Volume": 1506305343,
+        "Open": 39.840,
+        "High": 39.910,
+        "Low": 38.240
+    },
+    {
+        "Date": "\/Date(1222819200000)\/",
+        "Close": 39.859,
+        "Volume": 2034928239,
+        "Open": 39.852,
+        "High": 39.880,
+        "Low": 37.330
+    },
+    {
+        "Date": "\/Date(1225497600000)\/",
+        "Close": 41.993,
+        "Volume": 1542204312,
+        "Open": 41.990,
+        "High": 42.020,
+        "Low": 38.710
+    },
+    {
+        "Date": "\/Date(1228089600000)\/",
+        "Close": 42.300,
+        "Volume": 1255678260,
+        "Open": 42.298,
+        "High": 42.310,
+        "Low": 40.360
+    },
+    {
+        "Date": "\/Date(1230768000000)\/",
+        "Close": 43.290,
+        "Volume": 1685490186,
+        "Open": 43.290,
+        "High": 43.310,
+        "Low": 40.160
+    },
+    {
+        "Date": "\/Date(1233446400000)\/",
+        "Close": 42.130,
+        "Volume": 1445458017,
+        "Open": 42.040,
+        "High": 42.170,
+        "Low": 40.260
+    },
+    {
+        "Date": "\/Date(1235865600000)\/",
+        "Close": 42.140,
+        "Volume": 1958550854,
+        "Open": 42.140,
+        "High": 42.300,
+        "Low": 40.190
+    },
+    {
+        "Date": "\/Date(1238544000000)\/",
+        "Close": 42.860,
+        "Volume": 1533883066,
+        "Open": 42.890,
+        "High": 43.050,
+        "Low": 41.390
+    },
+    {
+        "Date": "\/Date(1241136000000)\/",
+        "Close": 42.230,
+        "Volume": 2396221596,
+        "Open": 42.240,
+        "High": 42.280,
+        "Low": 38.230
+    },
+    {
+        "Date": "\/Date(1243814400000)\/",
+        "Close": 39.800,
+        "Volume": 2709886930,
+        "Open": 39.960,
+        "High": 40.000,
+        "Low": 37.160
+    },
+    {
+        "Date": "\/Date(1246406400000)\/",
+        "Close": 39.000,
+        "Volume": 2091835303,
+        "Open": 38.938,
+        "High": 39.000,
+        "Low": 35.540
+    },
+    {
+        "Date": "\/Date(1249084800000)\/",
+        "Close": 38.960,
+        "Volume": 1986978146,
+        "Open": 38.970,
+        "High": 39.030,
+        "Low": 36.260
+    },
+    {
+        "Date": "\/Date(1251763200000)\/",
+        "Close": 40.910,
+        "Volume": 1860762246,
+        "Open": 40.910,
+        "High": 40.950,
+        "Low": 38.320
+    },
+    {
+        "Date": "\/Date(1254355200000)\/",
+        "Close": 42.880,
+        "Volume": 1974572432,
+        "Open": 42.890,
+        "High": 42.920,
+        "Low": 39.880
+    },
+    {
+        "Date": "\/Date(1257033600000)\/",
+        "Close": 44.780,
+        "Volume": 1903112379,
+        "Open": 44.770,
+        "High": 44.860,
+        "Low": 41.610
+    },
+    {
+        "Date": "\/Date(1259625600000)\/",
+        "Close": 44.700,
+        "Volume": 1533161602,
+        "Open": 44.710,
+        "High": 44.760,
+        "Low": 42.880
+    },
+    {
+        "Date": "\/Date(1262304000000)\/",
+        "Close": 45.360,
+        "Volume": 1823989418,
+        "Open": 45.350,
+        "High": 45.400,
+        "Low": 42.530
+    },
+    {
+        "Date": "\/Date(1264982400000)\/",
+        "Close": 45.470,
+        "Volume": 1730644867,
+        "Open": 45.485,
+        "High": 45.550,
+        "Low": 42.930
+    },
+    {
+        "Date": "\/Date(1267401600000)\/",
+        "Close": 44.420,
+        "Volume": 1749294085,
+        "Open": 44.440,
+        "High": 44.440,
+        "Low": 42.060
+    },
+    {
+        "Date": "\/Date(1270080000000)\/",
+        "Close": 46.590,
+        "Volume": 1171507724,
+        "Open": 46.590,
+        "High": 46.650,
+        "Low": 43.300
+    },
+    {
+        "Date": "\/Date(1272672000000)\/",
+        "Close": 47.500,
+        "Volume": 1282648621,
+        "Open": 47.500,
+        "High": 47.520,
+        "Low": 45.660
+    },
+    {
+        "Date": "\/Date(1275350400000)\/",
+        "Close": 47.880,
+        "Volume": 1228561577,
+        "Open": 47.880,
+        "High": 47.920,
+        "Low": 46.160
+    },
+    {
+        "Date": "\/Date(1277942400000)\/",
+        "Close": 50.640,
+        "Volume": 992870269,
+        "Open": 50.640,
+        "High": 50.654,
+        "Low": 47.470
+    },
+    {
+        "Date": "\/Date(1280620800000)\/",
+        "Close": 49.020,
+        "Volume": 981208528,
+        "Open": 49.020,
+        "High": 49.060,
+        "Low": 44.390
+    },
+    {
+        "Date": "\/Date(1283299200000)\/",
+        "Close": 51.631,
+        "Volume": 573031521,
+        "Open": 51.630,
+        "High": 51.680,
+        "Low": 47.810
+    },
+    {
+        "Date": "\/Date(1285891200000)\/",
+        "Close": 55.010,
+        "Volume": 1103427032,
+        "Open": 54.959,
+        "High": 55.060,
+        "Low": 51.340
+    },
+    {
+        "Date": "\/Date(1288569600000)\/",
+        "Close": 54.680,
+        "Volume": 995365278,
+        "Open": 54.660,
+        "High": 54.770,
+        "Low": 48.660
+    },
+    {
+        "Date": "\/Date(1291161600000)\/",
+        "Close": 52.840,
+        "Volume": 577831801,
+        "Open": 52.840,
+        "High": 52.840,
+        "Low": 49.180
+    },
+    {
+        "Date": "\/Date(1293840000000)\/",
+        "Close": 51.370,
+        "Volume": 849837840,
+        "Open": 51.380,
+        "High": 51.460,
+        "Low": 41.630
+    },
+    {
+        "Date": "\/Date(1296518400000)\/",
+        "Close": 45.650,
+        "Volume": 569927484,
+        "Open": 45.650,
+        "High": 45.870,
+        "Low": 42.160
+    },
+    {
+        "Date": "\/Date(1298937600000)\/",
+        "Close": 45.020,
+        "Volume": 563447812,
+        "Open": 45.040,
+        "High": 45.070,
+        "Low": 41.050
+    },
+    {
+        "Date": "\/Date(1301616000000)\/",
+        "Close": 47.920,
+        "Volume": 579215682,
+        "Open": 47.930,
+        "High": 48.050,
+        "Low": 43.690
+    },
+    {
+        "Date": "\/Date(1304208000000)\/",
+        "Close": 50.450,
+        "Volume": 589335627,
+        "Open": 50.450,
+        "High": 50.469,
+        "Low": 47.220
+    },
+    {
+        "Date": "\/Date(1306886400000)\/",
+        "Close": 50.540,
+        "Volume": 633735895,
+        "Open": 50.480,
+        "High": 50.610,
+        "Low": 44.980
+    },
+    {
+        "Date": "\/Date(1309478400000)\/",
+        "Close": 46.060,
+        "Volume": 558670899,
+        "Open": 46.050,
+        "High": 46.120,
+        "Low": 43.300
+    },
+    {
+        "Date": "\/Date(1312156800000)\/",
+        "Close": 48.490,
+        "Volume": 629930051,
+        "Open": 48.480,
+        "High": 48.560,
+        "Low": 44.300
+    },
+    {
+        "Date": "\/Date(1314835200000)\/",
+        "Close": 46.930,
+        "Volume": 808574022,
+        "Open": 46.920,
+        "High": 47.070,
+        "Low": 37.180
+    },
+    {
+        "Date": "\/Date(1317427200000)\/",
+        "Close": 38.890,
+        "Volume": 799617379,
+        "Open": 38.860,
+        "High": 38.970,
+        "Low": 28.090
+    },
+    {
+        "Date": "\/Date(1320105600000)\/",
+        "Close": 33.920,
+        "Volume": 394335489,
+        "Open": 33.930,
+        "High": 34.010,
+        "Low": 25.060
+    },
+    {
+        "Date": "\/Date(1322697600000)\/",
+        "Close": 30.720,
+        "Volume": 715467389,
+        "Open": 30.730,
+        "High": 30.820,
+        "Low": 26.850
+    },
+    {
+        "Date": "\/Date(1325376000000)\/",
+        "Close": 31.590,
+        "Volume": 1176242873,
+        "Open": 31.590,
+        "High": 31.630,
+        "Low": 27.960
+    },
+    {
+        "Date": "\/Date(1328054400000)\/",
+        "Close": 31.650,
+        "Volume": 1194157236,
+        "Open": 31.650,
+        "High": 31.680,
+        "Low": 27.390
+    }
+]
diff --git a/vue-options-api-demos/charts/shared/waterfall-data.json b/vue-options-api-demos/charts/shared/waterfall-data.json
new file mode 100644
index 00000000..a60ac5dd
--- /dev/null
+++ b/vue-options-api-demos/charts/shared/waterfall-data.json
@@ -0,0 +1,31 @@
+[{
+    "period": "Beginning \n Balance",
+    "amount": 50000
+  }, {
+    "period": "Jan",
+    "amount": 17000
+  }, {
+    "period": "Feb",
+    "amount": 14000
+  }, {
+    "period": "Mar",
+    "amount": -12000
+  }, {
+    "period": "Q1",
+    "summary": "runningTotal"
+  }, {
+    "period": "Apr",
+    "amount": -22000
+  }, {
+    "period": "May",
+    "amount": -18000
+  }, {
+    "period": "Jun",
+    "amount": 10000
+  }, {
+    "period": "Q2",
+    "summary": "runningTotal"
+  }, {
+    "period": "Ending \n Balance",
+    "summary": "total"
+  }]
diff --git a/vue-options-api-demos/charts/shared/weather-data.js b/vue-options-api-demos/charts/shared/weather-data.js
new file mode 100644
index 00000000..bf815e3d
--- /dev/null
+++ b/vue-options-api-demos/charts/shared/weather-data.js
@@ -0,0 +1,220 @@
+const data = () =>
+[
+  {
+    Timestamp: '2018-01-01T00:00:00.000',
+    TMax: 3.3,
+    TMin: -12,
+    Wind: 5.5,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-02T00:00:00.000',
+    TMax: 5.2,
+    TMin: -10,
+    Wind: 8.1,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-03T00:00:00.000',
+    TMax: 3.2,
+    TMin: -8,
+    Wind: 8.1,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-04T00:00:00.000',
+    TMax: 11,
+    TMin: -7,
+    Wind: 24.5,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-05T00:00:00.000',
+    TMax: 9,
+    TMin: 0,
+    Wind: 21.7,
+    Rain: 1.8
+  },
+  {
+    Timestamp: '2018-01-06T00:00:00.000',
+    TMax: 2,
+    TMin: -1,
+    Wind: 21.7,
+    Rain: 19.7
+  },
+  {
+    Timestamp: '2018-01-07T00:00:00.000',
+    TMax: 2,
+    TMin: -3,
+    Wind: 24.5,
+    Rain: 1.3
+  },
+  {
+    Timestamp: '2018-01-08T00:00:00.000',
+    TMax: 3,
+    TMin: -2,
+    Wind: 16.4,
+    Rain: 0.8
+  },
+  {
+    Timestamp: '2018-01-09T00:00:00.000',
+    TMax: 3,
+    TMin: -7,
+    Wind: 13.6,
+    Rain: 0.3
+  },
+  {
+    Timestamp: '2018-01-10T00:00:00.000',
+    TMax: 2.2,
+    TMin: -8,
+    Wind: 13.6,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-11T00:00:00.000',
+    TMax: 4,
+    TMin: -6,
+    Wind: 16.4,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-12T00:00:00.000',
+    TMax: 5.5,
+    TMin: -6,
+    Wind: 21.7,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-13T00:00:00.000',
+    TMax: 2.7,
+    TMin: -2,
+    Wind: 27.1,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-14T00:00:00.000',
+    TMax: 0,
+    TMin: -6,
+    Wind: 24.5,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-15T00:00:00.000',
+    TMax: -1,
+    TMin: -6,
+    Wind: 27.1,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-16T00:00:00.000',
+    TMax: 0,
+    TMin: -7,
+    Wind: 24.5,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-17T00:00:00.000',
+    TMax: 1,
+    TMin: -7,
+    Wind: 21.7,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-18T00:00:00.000',
+    TMax: 5,
+    TMin: -6,
+    Wind: 13.6,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-19T00:00:00.000',
+    TMax: 6,
+    TMin: -3,
+    Wind: 13.6,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-20T00:00:00.000',
+    TMax: 3,
+    TMin: -3,
+    Wind: 29.9,
+    Rain: 7.2
+  },
+  {
+    Timestamp: '2018-01-21T00:00:00.000',
+    TMax: 2.2,
+    TMin: -7,
+    Wind: 19,
+    Rain: 1.5
+  },
+  {
+    Timestamp: '2018-01-22T00:00:00.000',
+    TMax: 6.2,
+    TMin: -8,
+    Wind: 8.1,
+    Rain: 0.3
+  },
+  {
+    Timestamp: '2018-01-23T00:00:00.000',
+    TMax: 6,
+    TMin: -2,
+    Wind: 16.4,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-24T00:00:00.000',
+    TMax: 2.4,
+    TMin: -2,
+    Wind: 16.4,
+    Rain: 5.1
+  },
+  {
+    Timestamp: '2018-01-25T00:00:00.000',
+    TMax: -1.4,
+    TMin: -9,
+    Wind: 16.4,
+    Rain: 17.2
+  },
+  {
+    Timestamp: '2018-01-26T00:00:00.000',
+    TMax: 0,
+    TMin: -8,
+    Wind: 10.9,
+    Rain: 5.9
+  },
+  {
+    Timestamp: '2018-01-27T00:00:00.000',
+    TMax: -2.7,
+    TMin: -9,
+    Wind: 16.4,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-28T00:00:00.000',
+    TMax: -2.4,
+    TMin: -14,
+    Wind: 19,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-29T00:00:00.000',
+    TMax: -5,
+    TMin: -20,
+    Wind: 13.6,
+    Rain: 0
+  },
+  {
+    Timestamp: '2018-01-30T00:00:00.000',
+    TMax: -5.4,
+    TMin: -22,
+    Wind: 5.5,
+    Rain: 0
+  }
+];
+
+export const mockData = () =>
+  data().map(p => {
+    p.Date = new Date(p.Timestamp);
+    return p;
+  }
+);
diff --git a/vue-options-api-demos/charts/sparkline/main.js b/vue-options-api-demos/charts/sparkline/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/sparkline/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/sparkline/main.vue b/vue-options-api-demos/charts/sparkline/main.vue
new file mode 100644
index 00000000..5156349a
--- /dev/null
+++ b/vue-options-api-demos/charts/sparkline/main.vue
@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <div>
+      <span style="font-weight: bold">The Sparkline is a small Chart that is usually drawn as a Line Chart -</span>
+      <Sparkline :data-items="sparklineData" />
+    </div>
+    <div style="font-weight: bold">The Sparkline can also be drawn as:</div>
+    <ul>
+      <li>
+        Bar/Column type Sparkline Chart <br/>
+        <Sparkline :data-items="sparklineData" :type="'column'" />
+      </li>
+      <li>
+        Area type Sparkline Chart
+        <br/>
+        <Sparkline :data-items="sparklineData" :type="'area'" />
+      </li>
+      <li>
+        Pie type Sparkline Chart<br/>
+        <Sparkline :data-items="sparklineData" :type="'pie'" />
+      </li>
+      <li>
+        Bullet type Sparkline Chart<br/>
+        <Sparkline :data-items="bulletData" :type="'bullet'">
+          <ChartValueAxis>
+            <ChartValueAxisItem :max="max" :min="min" :plot-bands="plotBands" />
+          </ChartValueAxis>
+        </Sparkline>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+import {
+  Sparkline,
+  ChartValueAxis,
+  ChartValueAxisItem,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Sparkline,
+    ChartValueAxis,
+    ChartValueAxisItem,
+  },
+  data: function () {
+    return {
+      sparklineData: [936, 968, 1025, 999, 998, 1014, 1017, 1010, 1010, 1007],
+      bulletData: [21, 23],
+      min: 0,
+      max: 30,
+      plotBands: [
+        {
+          from: 0,
+          to: 15,
+          color: "#787878",
+          opacity: 0.15,
+        },
+        {
+          from: 15,
+          to: 22,
+          color: "#787878",
+          opacity: 0.3,
+        },
+        {
+          from: 22,
+          to: 30,
+          color: "#787878",
+          opacity: 0.15,
+        },
+      ],
+    }
+  }
+};
+</script>
+<style>
+.k-sparkline {
+  width: 150px !important;
+  height: 50px !important;
+}
+</style>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/stock-chart/default/main.js b/vue-options-api-demos/charts/stock-chart/default/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/stock-chart/default/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/stock-chart/default/main.vue b/vue-options-api-demos/charts/stock-chart/default/main.vue
new file mode 100644
index 00000000..5bb46dca
--- /dev/null
+++ b/vue-options-api-demos/charts/stock-chart/default/main.vue
@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <StockChart>
+      <ChartTitle :text="'The Boeing Company NYSE:BA'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :data-items="stockChartData"
+          :type="'candlestick'"
+          :open-field="'Open'"
+          :close-field="'Close'"
+          :low-field="'Low'"
+          :high-field="'High'"
+          :category-field="'Date'"
+        />
+      </ChartSeries>
+      <ChartNavigator>
+        <ChartNavigatorSelect :from="from" :to="to" />
+        <ChartNavigatorSeries>
+          <ChartNavigatorSeriesItem
+            :data-items="stockNavigatorData"
+            :type="'area'"
+            :field="'Close'"
+            :category-field="'Date'"
+          />
+        </ChartNavigatorSeries>
+        <ChartNavigatorCategoryAxis />
+        <ChartNavigatorPane />
+      </ChartNavigator>
+    </StockChart>
+  </div>
+</template>
+<script>
+import {
+  StockChart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartTitle,
+  ChartNavigator,
+  ChartNavigatorSelect,
+  ChartNavigatorSeries,
+  ChartNavigatorSeriesItem,
+  ChartNavigatorCategoryAxis,
+  ChartNavigatorPane,
+} from "@progress/kendo-vue-charts";
+import { IntlService } from "@progress/kendo-vue-intl";
+
+import data from "./stock-data.json";
+const intl = new IntlService("en");
+const stockData = data.map((item) =>
+  Object.assign({}, item, { Date: intl.parseDate(item.Date) })
+);
+
+export default {
+  components: {
+    StockChart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartTitle,
+    ChartNavigator,
+    ChartNavigatorSelect,
+    ChartNavigatorSeries,
+    ChartNavigatorSeriesItem,
+    ChartNavigatorCategoryAxis,
+    ChartNavigatorPane,
+  },
+  data: function () {
+    return {
+      stockNavigatorData: stockData,
+      stockChartData: stockData,
+      from: new Date("2009/02/05"),
+      to: new Date("2011/10/07")
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/stock-chart/default/stock-data.json b/vue-options-api-demos/charts/stock-chart/default/stock-data.json
new file mode 100644
index 00000000..895e31a8
--- /dev/null
+++ b/vue-options-api-demos/charts/stock-chart/default/stock-data.json
@@ -0,0 +1,410 @@
+[
+    {
+        "Date": "\/Date(1196467200000)\/",
+        "Close": 40.635,
+        "Volume": 1650185491,
+        "Open": 40.640,
+        "High": 40.680,
+        "Low": 39.090
+    },
+    {
+        "Date": "\/Date(1199145600000)\/",
+        "Close": 40.130,
+        "Volume": 1979918237,
+        "Open": 40.130,
+        "High": 40.292,
+        "Low": 36.460
+    },
+    {
+        "Date": "\/Date(1201824000000)\/",
+        "Close": 38.440,
+        "Volume": 1572505911,
+        "Open": 38.440,
+        "High": 38.480,
+        "Low": 36.697
+    },
+    {
+        "Date": "\/Date(1204329600000)\/",
+        "Close": 38.240,
+        "Volume": 1922276774,
+        "Open": 38.240,
+        "High": 38.290,
+        "Low": 35.940
+    },
+    {
+        "Date": "\/Date(1207008000000)\/",
+        "Close": 37.031,
+        "Volume": 2078426778,
+        "Open": 37.032,
+        "High": 37.070,
+        "Low": 34.350
+    },
+    {
+        "Date": "\/Date(1209600000000)\/",
+        "Close": 38.240,
+        "Volume": 1727585885,
+        "Open": 38.250,
+        "High": 38.270,
+        "Low": 34.886
+    },
+    {
+        "Date": "\/Date(1212278400000)\/",
+        "Close": 38.650,
+        "Volume": 1776948280,
+        "Open": 38.630,
+        "High": 38.680,
+        "Low": 36.700
+    },
+    {
+        "Date": "\/Date(1214870400000)\/",
+        "Close": 39.900,
+        "Volume": 1456330078,
+        "Open": 39.900,
+        "High": 39.921,
+        "Low": 36.550
+    },
+    {
+        "Date": "\/Date(1217548800000)\/",
+        "Close": 40.100,
+        "Volume": 1557166494,
+        "Open": 40.095,
+        "High": 40.140,
+        "Low": 38.260
+    },
+    {
+        "Date": "\/Date(1220227200000)\/",
+        "Close": 39.841,
+        "Volume": 1506305343,
+        "Open": 39.840,
+        "High": 39.910,
+        "Low": 38.240
+    },
+    {
+        "Date": "\/Date(1222819200000)\/",
+        "Close": 39.859,
+        "Volume": 2034928239,
+        "Open": 39.852,
+        "High": 39.880,
+        "Low": 37.330
+    },
+    {
+        "Date": "\/Date(1225497600000)\/",
+        "Close": 41.993,
+        "Volume": 1542204312,
+        "Open": 41.990,
+        "High": 42.020,
+        "Low": 38.710
+    },
+    {
+        "Date": "\/Date(1228089600000)\/",
+        "Close": 42.300,
+        "Volume": 1255678260,
+        "Open": 42.298,
+        "High": 42.310,
+        "Low": 40.360
+    },
+    {
+        "Date": "\/Date(1230768000000)\/",
+        "Close": 43.290,
+        "Volume": 1685490186,
+        "Open": 43.290,
+        "High": 43.310,
+        "Low": 40.160
+    },
+    {
+        "Date": "\/Date(1233446400000)\/",
+        "Close": 42.130,
+        "Volume": 1445458017,
+        "Open": 42.040,
+        "High": 42.170,
+        "Low": 40.260
+    },
+    {
+        "Date": "\/Date(1235865600000)\/",
+        "Close": 42.140,
+        "Volume": 1958550854,
+        "Open": 42.140,
+        "High": 42.300,
+        "Low": 40.190
+    },
+    {
+        "Date": "\/Date(1238544000000)\/",
+        "Close": 42.860,
+        "Volume": 1533883066,
+        "Open": 42.890,
+        "High": 43.050,
+        "Low": 41.390
+    },
+    {
+        "Date": "\/Date(1241136000000)\/",
+        "Close": 42.230,
+        "Volume": 2396221596,
+        "Open": 42.240,
+        "High": 42.280,
+        "Low": 38.230
+    },
+    {
+        "Date": "\/Date(1243814400000)\/",
+        "Close": 39.800,
+        "Volume": 2709886930,
+        "Open": 39.960,
+        "High": 40.000,
+        "Low": 37.160
+    },
+    {
+        "Date": "\/Date(1246406400000)\/",
+        "Close": 39.000,
+        "Volume": 2091835303,
+        "Open": 38.938,
+        "High": 39.000,
+        "Low": 35.540
+    },
+    {
+        "Date": "\/Date(1249084800000)\/",
+        "Close": 38.960,
+        "Volume": 1986978146,
+        "Open": 38.970,
+        "High": 39.030,
+        "Low": 36.260
+    },
+    {
+        "Date": "\/Date(1251763200000)\/",
+        "Close": 40.910,
+        "Volume": 1860762246,
+        "Open": 40.910,
+        "High": 40.950,
+        "Low": 38.320
+    },
+    {
+        "Date": "\/Date(1254355200000)\/",
+        "Close": 42.880,
+        "Volume": 1974572432,
+        "Open": 42.890,
+        "High": 42.920,
+        "Low": 39.880
+    },
+    {
+        "Date": "\/Date(1257033600000)\/",
+        "Close": 44.780,
+        "Volume": 1903112379,
+        "Open": 44.770,
+        "High": 44.860,
+        "Low": 41.610
+    },
+    {
+        "Date": "\/Date(1259625600000)\/",
+        "Close": 44.700,
+        "Volume": 1533161602,
+        "Open": 44.710,
+        "High": 44.760,
+        "Low": 42.880
+    },
+    {
+        "Date": "\/Date(1262304000000)\/",
+        "Close": 45.360,
+        "Volume": 1823989418,
+        "Open": 45.350,
+        "High": 45.400,
+        "Low": 42.530
+    },
+    {
+        "Date": "\/Date(1264982400000)\/",
+        "Close": 45.470,
+        "Volume": 1730644867,
+        "Open": 45.485,
+        "High": 45.550,
+        "Low": 42.930
+    },
+    {
+        "Date": "\/Date(1267401600000)\/",
+        "Close": 44.420,
+        "Volume": 1749294085,
+        "Open": 44.440,
+        "High": 44.440,
+        "Low": 42.060
+    },
+    {
+        "Date": "\/Date(1270080000000)\/",
+        "Close": 46.590,
+        "Volume": 1171507724,
+        "Open": 46.590,
+        "High": 46.650,
+        "Low": 43.300
+    },
+    {
+        "Date": "\/Date(1272672000000)\/",
+        "Close": 47.500,
+        "Volume": 1282648621,
+        "Open": 47.500,
+        "High": 47.520,
+        "Low": 45.660
+    },
+    {
+        "Date": "\/Date(1275350400000)\/",
+        "Close": 47.880,
+        "Volume": 1228561577,
+        "Open": 47.880,
+        "High": 47.920,
+        "Low": 46.160
+    },
+    {
+        "Date": "\/Date(1277942400000)\/",
+        "Close": 50.640,
+        "Volume": 992870269,
+        "Open": 50.640,
+        "High": 50.654,
+        "Low": 47.470
+    },
+    {
+        "Date": "\/Date(1280620800000)\/",
+        "Close": 49.020,
+        "Volume": 981208528,
+        "Open": 49.020,
+        "High": 49.060,
+        "Low": 44.390
+    },
+    {
+        "Date": "\/Date(1283299200000)\/",
+        "Close": 51.631,
+        "Volume": 573031521,
+        "Open": 51.630,
+        "High": 51.680,
+        "Low": 47.810
+    },
+    {
+        "Date": "\/Date(1285891200000)\/",
+        "Close": 55.010,
+        "Volume": 1103427032,
+        "Open": 54.959,
+        "High": 55.060,
+        "Low": 51.340
+    },
+    {
+        "Date": "\/Date(1288569600000)\/",
+        "Close": 54.680,
+        "Volume": 995365278,
+        "Open": 54.660,
+        "High": 54.770,
+        "Low": 48.660
+    },
+    {
+        "Date": "\/Date(1291161600000)\/",
+        "Close": 52.840,
+        "Volume": 577831801,
+        "Open": 52.840,
+        "High": 52.840,
+        "Low": 49.180
+    },
+    {
+        "Date": "\/Date(1293840000000)\/",
+        "Close": 51.370,
+        "Volume": 849837840,
+        "Open": 51.380,
+        "High": 51.460,
+        "Low": 41.630
+    },
+    {
+        "Date": "\/Date(1296518400000)\/",
+        "Close": 45.650,
+        "Volume": 569927484,
+        "Open": 45.650,
+        "High": 45.870,
+        "Low": 42.160
+    },
+    {
+        "Date": "\/Date(1298937600000)\/",
+        "Close": 45.020,
+        "Volume": 563447812,
+        "Open": 45.040,
+        "High": 45.070,
+        "Low": 41.050
+    },
+    {
+        "Date": "\/Date(1301616000000)\/",
+        "Close": 47.920,
+        "Volume": 579215682,
+        "Open": 47.930,
+        "High": 48.050,
+        "Low": 43.690
+    },
+    {
+        "Date": "\/Date(1304208000000)\/",
+        "Close": 50.450,
+        "Volume": 589335627,
+        "Open": 50.450,
+        "High": 50.469,
+        "Low": 47.220
+    },
+    {
+        "Date": "\/Date(1306886400000)\/",
+        "Close": 50.540,
+        "Volume": 633735895,
+        "Open": 50.480,
+        "High": 50.610,
+        "Low": 44.980
+    },
+    {
+        "Date": "\/Date(1309478400000)\/",
+        "Close": 46.060,
+        "Volume": 558670899,
+        "Open": 46.050,
+        "High": 46.120,
+        "Low": 43.300
+    },
+    {
+        "Date": "\/Date(1312156800000)\/",
+        "Close": 48.490,
+        "Volume": 629930051,
+        "Open": 48.480,
+        "High": 48.560,
+        "Low": 44.300
+    },
+    {
+        "Date": "\/Date(1314835200000)\/",
+        "Close": 46.930,
+        "Volume": 808574022,
+        "Open": 46.920,
+        "High": 47.070,
+        "Low": 37.180
+    },
+    {
+        "Date": "\/Date(1317427200000)\/",
+        "Close": 38.890,
+        "Volume": 799617379,
+        "Open": 38.860,
+        "High": 38.970,
+        "Low": 28.090
+    },
+    {
+        "Date": "\/Date(1320105600000)\/",
+        "Close": 33.920,
+        "Volume": 394335489,
+        "Open": 33.930,
+        "High": 34.010,
+        "Low": 25.060
+    },
+    {
+        "Date": "\/Date(1322697600000)\/",
+        "Close": 30.720,
+        "Volume": 715467389,
+        "Open": 30.730,
+        "High": 30.820,
+        "Low": 26.850
+    },
+    {
+        "Date": "\/Date(1325376000000)\/",
+        "Close": 31.590,
+        "Volume": 1176242873,
+        "Open": 31.590,
+        "High": 31.630,
+        "Low": 27.960
+    },
+    {
+        "Date": "\/Date(1328054400000)\/",
+        "Close": 31.650,
+        "Volume": 1194157236,
+        "Open": 31.650,
+        "High": 31.680,
+        "Low": 27.390
+    }
+]
diff --git a/vue-options-api-demos/charts/stock-chart/filter-data/main.js b/vue-options-api-demos/charts/stock-chart/filter-data/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/stock-chart/filter-data/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/stock-chart/filter-data/main.vue b/vue-options-api-demos/charts/stock-chart/filter-data/main.vue
new file mode 100644
index 00000000..64addd69
--- /dev/null
+++ b/vue-options-api-demos/charts/stock-chart/filter-data/main.vue
@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <StockChart>
+      <ChartTitle :text="'The Boeing Company NYSE:BA'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :data-items="stockChartData"
+          :type="'candlestick'"
+          :open-field="'Open'"
+          :close-field="'Close'"
+          :low-field="'Low'"
+          :high-field="'High'"
+          :category-field="'Date'"
+        />
+      </ChartSeries>
+      <ChartNavigator>
+        <ChartNavigatorSelect :from="from" :to="to" />
+        <ChartNavigatorSeries>
+          <ChartNavigatorSeriesItem
+            :data-items="stockNavigatorData"
+            :type="'area'"
+            :field="'Close'"
+            :category-field="'Date'"
+          />
+        </ChartNavigatorSeries>
+        <ChartNavigatorCategoryAxis />
+        <ChartNavigatorPane />
+      </ChartNavigator>
+    </StockChart>
+  </div>
+</template>
+<script>
+import {
+  StockChart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartTitle,
+  ChartNavigator,
+  ChartNavigatorSelect,
+  ChartNavigatorSeries,
+  ChartNavigatorSeriesItem,
+  ChartNavigatorCategoryAxis,
+  ChartNavigatorPane,
+} from "@progress/kendo-vue-charts";
+import { IntlService } from "@progress/kendo-vue-intl";
+
+import data from "./stock-data.json";
+const intl = new IntlService("en");
+const stockData = data.map((item) =>
+  Object.assign({}, item, { Date: intl.parseDate(item.Date) })
+);
+
+export default {
+  components: {
+    StockChart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartTitle,
+    ChartNavigator,
+    ChartNavigatorSelect,
+    ChartNavigatorSeries,
+    ChartNavigatorSeriesItem,
+    ChartNavigatorCategoryAxis,
+    ChartNavigatorPane,
+  },
+  data: function () {
+    return {
+      stockNavigatorData: stockData,
+      stockChartData: stockData,
+      from: new Date("2009/02/05"),
+      to: new Date("2011/10/07"),
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/stock-chart/filter-data/stock-data.json b/vue-options-api-demos/charts/stock-chart/filter-data/stock-data.json
new file mode 100644
index 00000000..895e31a8
--- /dev/null
+++ b/vue-options-api-demos/charts/stock-chart/filter-data/stock-data.json
@@ -0,0 +1,410 @@
+[
+    {
+        "Date": "\/Date(1196467200000)\/",
+        "Close": 40.635,
+        "Volume": 1650185491,
+        "Open": 40.640,
+        "High": 40.680,
+        "Low": 39.090
+    },
+    {
+        "Date": "\/Date(1199145600000)\/",
+        "Close": 40.130,
+        "Volume": 1979918237,
+        "Open": 40.130,
+        "High": 40.292,
+        "Low": 36.460
+    },
+    {
+        "Date": "\/Date(1201824000000)\/",
+        "Close": 38.440,
+        "Volume": 1572505911,
+        "Open": 38.440,
+        "High": 38.480,
+        "Low": 36.697
+    },
+    {
+        "Date": "\/Date(1204329600000)\/",
+        "Close": 38.240,
+        "Volume": 1922276774,
+        "Open": 38.240,
+        "High": 38.290,
+        "Low": 35.940
+    },
+    {
+        "Date": "\/Date(1207008000000)\/",
+        "Close": 37.031,
+        "Volume": 2078426778,
+        "Open": 37.032,
+        "High": 37.070,
+        "Low": 34.350
+    },
+    {
+        "Date": "\/Date(1209600000000)\/",
+        "Close": 38.240,
+        "Volume": 1727585885,
+        "Open": 38.250,
+        "High": 38.270,
+        "Low": 34.886
+    },
+    {
+        "Date": "\/Date(1212278400000)\/",
+        "Close": 38.650,
+        "Volume": 1776948280,
+        "Open": 38.630,
+        "High": 38.680,
+        "Low": 36.700
+    },
+    {
+        "Date": "\/Date(1214870400000)\/",
+        "Close": 39.900,
+        "Volume": 1456330078,
+        "Open": 39.900,
+        "High": 39.921,
+        "Low": 36.550
+    },
+    {
+        "Date": "\/Date(1217548800000)\/",
+        "Close": 40.100,
+        "Volume": 1557166494,
+        "Open": 40.095,
+        "High": 40.140,
+        "Low": 38.260
+    },
+    {
+        "Date": "\/Date(1220227200000)\/",
+        "Close": 39.841,
+        "Volume": 1506305343,
+        "Open": 39.840,
+        "High": 39.910,
+        "Low": 38.240
+    },
+    {
+        "Date": "\/Date(1222819200000)\/",
+        "Close": 39.859,
+        "Volume": 2034928239,
+        "Open": 39.852,
+        "High": 39.880,
+        "Low": 37.330
+    },
+    {
+        "Date": "\/Date(1225497600000)\/",
+        "Close": 41.993,
+        "Volume": 1542204312,
+        "Open": 41.990,
+        "High": 42.020,
+        "Low": 38.710
+    },
+    {
+        "Date": "\/Date(1228089600000)\/",
+        "Close": 42.300,
+        "Volume": 1255678260,
+        "Open": 42.298,
+        "High": 42.310,
+        "Low": 40.360
+    },
+    {
+        "Date": "\/Date(1230768000000)\/",
+        "Close": 43.290,
+        "Volume": 1685490186,
+        "Open": 43.290,
+        "High": 43.310,
+        "Low": 40.160
+    },
+    {
+        "Date": "\/Date(1233446400000)\/",
+        "Close": 42.130,
+        "Volume": 1445458017,
+        "Open": 42.040,
+        "High": 42.170,
+        "Low": 40.260
+    },
+    {
+        "Date": "\/Date(1235865600000)\/",
+        "Close": 42.140,
+        "Volume": 1958550854,
+        "Open": 42.140,
+        "High": 42.300,
+        "Low": 40.190
+    },
+    {
+        "Date": "\/Date(1238544000000)\/",
+        "Close": 42.860,
+        "Volume": 1533883066,
+        "Open": 42.890,
+        "High": 43.050,
+        "Low": 41.390
+    },
+    {
+        "Date": "\/Date(1241136000000)\/",
+        "Close": 42.230,
+        "Volume": 2396221596,
+        "Open": 42.240,
+        "High": 42.280,
+        "Low": 38.230
+    },
+    {
+        "Date": "\/Date(1243814400000)\/",
+        "Close": 39.800,
+        "Volume": 2709886930,
+        "Open": 39.960,
+        "High": 40.000,
+        "Low": 37.160
+    },
+    {
+        "Date": "\/Date(1246406400000)\/",
+        "Close": 39.000,
+        "Volume": 2091835303,
+        "Open": 38.938,
+        "High": 39.000,
+        "Low": 35.540
+    },
+    {
+        "Date": "\/Date(1249084800000)\/",
+        "Close": 38.960,
+        "Volume": 1986978146,
+        "Open": 38.970,
+        "High": 39.030,
+        "Low": 36.260
+    },
+    {
+        "Date": "\/Date(1251763200000)\/",
+        "Close": 40.910,
+        "Volume": 1860762246,
+        "Open": 40.910,
+        "High": 40.950,
+        "Low": 38.320
+    },
+    {
+        "Date": "\/Date(1254355200000)\/",
+        "Close": 42.880,
+        "Volume": 1974572432,
+        "Open": 42.890,
+        "High": 42.920,
+        "Low": 39.880
+    },
+    {
+        "Date": "\/Date(1257033600000)\/",
+        "Close": 44.780,
+        "Volume": 1903112379,
+        "Open": 44.770,
+        "High": 44.860,
+        "Low": 41.610
+    },
+    {
+        "Date": "\/Date(1259625600000)\/",
+        "Close": 44.700,
+        "Volume": 1533161602,
+        "Open": 44.710,
+        "High": 44.760,
+        "Low": 42.880
+    },
+    {
+        "Date": "\/Date(1262304000000)\/",
+        "Close": 45.360,
+        "Volume": 1823989418,
+        "Open": 45.350,
+        "High": 45.400,
+        "Low": 42.530
+    },
+    {
+        "Date": "\/Date(1264982400000)\/",
+        "Close": 45.470,
+        "Volume": 1730644867,
+        "Open": 45.485,
+        "High": 45.550,
+        "Low": 42.930
+    },
+    {
+        "Date": "\/Date(1267401600000)\/",
+        "Close": 44.420,
+        "Volume": 1749294085,
+        "Open": 44.440,
+        "High": 44.440,
+        "Low": 42.060
+    },
+    {
+        "Date": "\/Date(1270080000000)\/",
+        "Close": 46.590,
+        "Volume": 1171507724,
+        "Open": 46.590,
+        "High": 46.650,
+        "Low": 43.300
+    },
+    {
+        "Date": "\/Date(1272672000000)\/",
+        "Close": 47.500,
+        "Volume": 1282648621,
+        "Open": 47.500,
+        "High": 47.520,
+        "Low": 45.660
+    },
+    {
+        "Date": "\/Date(1275350400000)\/",
+        "Close": 47.880,
+        "Volume": 1228561577,
+        "Open": 47.880,
+        "High": 47.920,
+        "Low": 46.160
+    },
+    {
+        "Date": "\/Date(1277942400000)\/",
+        "Close": 50.640,
+        "Volume": 992870269,
+        "Open": 50.640,
+        "High": 50.654,
+        "Low": 47.470
+    },
+    {
+        "Date": "\/Date(1280620800000)\/",
+        "Close": 49.020,
+        "Volume": 981208528,
+        "Open": 49.020,
+        "High": 49.060,
+        "Low": 44.390
+    },
+    {
+        "Date": "\/Date(1283299200000)\/",
+        "Close": 51.631,
+        "Volume": 573031521,
+        "Open": 51.630,
+        "High": 51.680,
+        "Low": 47.810
+    },
+    {
+        "Date": "\/Date(1285891200000)\/",
+        "Close": 55.010,
+        "Volume": 1103427032,
+        "Open": 54.959,
+        "High": 55.060,
+        "Low": 51.340
+    },
+    {
+        "Date": "\/Date(1288569600000)\/",
+        "Close": 54.680,
+        "Volume": 995365278,
+        "Open": 54.660,
+        "High": 54.770,
+        "Low": 48.660
+    },
+    {
+        "Date": "\/Date(1291161600000)\/",
+        "Close": 52.840,
+        "Volume": 577831801,
+        "Open": 52.840,
+        "High": 52.840,
+        "Low": 49.180
+    },
+    {
+        "Date": "\/Date(1293840000000)\/",
+        "Close": 51.370,
+        "Volume": 849837840,
+        "Open": 51.380,
+        "High": 51.460,
+        "Low": 41.630
+    },
+    {
+        "Date": "\/Date(1296518400000)\/",
+        "Close": 45.650,
+        "Volume": 569927484,
+        "Open": 45.650,
+        "High": 45.870,
+        "Low": 42.160
+    },
+    {
+        "Date": "\/Date(1298937600000)\/",
+        "Close": 45.020,
+        "Volume": 563447812,
+        "Open": 45.040,
+        "High": 45.070,
+        "Low": 41.050
+    },
+    {
+        "Date": "\/Date(1301616000000)\/",
+        "Close": 47.920,
+        "Volume": 579215682,
+        "Open": 47.930,
+        "High": 48.050,
+        "Low": 43.690
+    },
+    {
+        "Date": "\/Date(1304208000000)\/",
+        "Close": 50.450,
+        "Volume": 589335627,
+        "Open": 50.450,
+        "High": 50.469,
+        "Low": 47.220
+    },
+    {
+        "Date": "\/Date(1306886400000)\/",
+        "Close": 50.540,
+        "Volume": 633735895,
+        "Open": 50.480,
+        "High": 50.610,
+        "Low": 44.980
+    },
+    {
+        "Date": "\/Date(1309478400000)\/",
+        "Close": 46.060,
+        "Volume": 558670899,
+        "Open": 46.050,
+        "High": 46.120,
+        "Low": 43.300
+    },
+    {
+        "Date": "\/Date(1312156800000)\/",
+        "Close": 48.490,
+        "Volume": 629930051,
+        "Open": 48.480,
+        "High": 48.560,
+        "Low": 44.300
+    },
+    {
+        "Date": "\/Date(1314835200000)\/",
+        "Close": 46.930,
+        "Volume": 808574022,
+        "Open": 46.920,
+        "High": 47.070,
+        "Low": 37.180
+    },
+    {
+        "Date": "\/Date(1317427200000)\/",
+        "Close": 38.890,
+        "Volume": 799617379,
+        "Open": 38.860,
+        "High": 38.970,
+        "Low": 28.090
+    },
+    {
+        "Date": "\/Date(1320105600000)\/",
+        "Close": 33.920,
+        "Volume": 394335489,
+        "Open": 33.930,
+        "High": 34.010,
+        "Low": 25.060
+    },
+    {
+        "Date": "\/Date(1322697600000)\/",
+        "Close": 30.720,
+        "Volume": 715467389,
+        "Open": 30.730,
+        "High": 30.820,
+        "Low": 26.850
+    },
+    {
+        "Date": "\/Date(1325376000000)\/",
+        "Close": 31.590,
+        "Volume": 1176242873,
+        "Open": 31.590,
+        "High": 31.630,
+        "Low": 27.960
+    },
+    {
+        "Date": "\/Date(1328054400000)\/",
+        "Close": 31.650,
+        "Volume": 1194157236,
+        "Open": 31.650,
+        "High": 31.680,
+        "Low": 27.390
+    }
+]
diff --git a/vue-options-api-demos/charts/stock-chart/multiple-panes/main.js b/vue-options-api-demos/charts/stock-chart/multiple-panes/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/stock-chart/multiple-panes/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/stock-chart/multiple-panes/main.vue b/vue-options-api-demos/charts/stock-chart/multiple-panes/main.vue
new file mode 100644
index 00000000..ccddccf1
--- /dev/null
+++ b/vue-options-api-demos/charts/stock-chart/multiple-panes/main.vue
@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <StockChart
+      :style="{
+        height: '600px',
+      }"
+    >
+      <ChartTitle :text="'The Boeing Company NYSE:BA'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :data-items="stockData"
+          :type="'candlestick'"
+          :open-field="'Open'"
+          :close-field="'Close'"
+          :low-field="'Low'"
+          :high-field="'High'"
+          :category-field="'Date'"
+        />
+        <ChartSeriesItem
+          :data-items="stockData"
+          :type="'column'"
+          :field="'Volume'"
+          :axis="'volumeAxis'"
+          :category-field="'Date'"
+          :tooltip="{
+            format: '{0:C0}',
+          }"
+        />
+      </ChartSeries>
+      <ChartValueAxis>
+        <ChartValueAxisItem />
+        <ChartValueAxisItem
+          :visible="false"
+          :name="'volumeAxis'"
+          :pane="'volumePane'"
+        />
+      </ChartValueAxis>
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :pane="'volumePane'" />
+      </ChartCategoryAxis>
+      <ChartPanes>
+        <ChartPane :title="'Value'" :height="350" />
+        <ChartPane :title="'Volume'" :name="'volumePane'" :height="150" />
+      </ChartPanes>
+      <ChartNavigator>
+        <ChartNavigatorSelect :from="from" :to="to" />
+        <ChartNavigatorSeries>
+          <ChartNavigatorSeriesItem
+            :data-items="stockData"
+            :type="'area'"
+            :field="'Close'"
+            :category-field="'Date'"
+          />
+        </ChartNavigatorSeries>
+      </ChartNavigator>
+    </StockChart>
+  </div>
+</template>
+<script>
+import {
+  ChartValueAxis,
+  ChartValueAxisItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartPane,
+  ChartPanes,
+  StockChart,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartTitle,
+  ChartNavigator,
+  ChartNavigatorSelect,
+  ChartNavigatorSeries,
+  ChartNavigatorSeriesItem,
+} from "@progress/kendo-vue-charts";
+
+import stockData from "./stock-data.json";
+const from = new Date("2009/02/05");
+const to = new Date("2011/10/07");
+
+export default {
+  components: {
+    ChartValueAxis,
+    ChartValueAxisItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartPane,
+    ChartPanes,
+    StockChart,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartTitle,
+    ChartNavigator,
+    ChartNavigatorSelect,
+    ChartNavigatorSeries,
+    ChartNavigatorSeriesItem,
+  },
+  data: function () {
+    return {
+      stockData: stockData,
+      from: from,
+      to: to,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/stock-chart/multiple-panes/stock-data.json b/vue-options-api-demos/charts/stock-chart/multiple-panes/stock-data.json
new file mode 100644
index 00000000..895e31a8
--- /dev/null
+++ b/vue-options-api-demos/charts/stock-chart/multiple-panes/stock-data.json
@@ -0,0 +1,410 @@
+[
+    {
+        "Date": "\/Date(1196467200000)\/",
+        "Close": 40.635,
+        "Volume": 1650185491,
+        "Open": 40.640,
+        "High": 40.680,
+        "Low": 39.090
+    },
+    {
+        "Date": "\/Date(1199145600000)\/",
+        "Close": 40.130,
+        "Volume": 1979918237,
+        "Open": 40.130,
+        "High": 40.292,
+        "Low": 36.460
+    },
+    {
+        "Date": "\/Date(1201824000000)\/",
+        "Close": 38.440,
+        "Volume": 1572505911,
+        "Open": 38.440,
+        "High": 38.480,
+        "Low": 36.697
+    },
+    {
+        "Date": "\/Date(1204329600000)\/",
+        "Close": 38.240,
+        "Volume": 1922276774,
+        "Open": 38.240,
+        "High": 38.290,
+        "Low": 35.940
+    },
+    {
+        "Date": "\/Date(1207008000000)\/",
+        "Close": 37.031,
+        "Volume": 2078426778,
+        "Open": 37.032,
+        "High": 37.070,
+        "Low": 34.350
+    },
+    {
+        "Date": "\/Date(1209600000000)\/",
+        "Close": 38.240,
+        "Volume": 1727585885,
+        "Open": 38.250,
+        "High": 38.270,
+        "Low": 34.886
+    },
+    {
+        "Date": "\/Date(1212278400000)\/",
+        "Close": 38.650,
+        "Volume": 1776948280,
+        "Open": 38.630,
+        "High": 38.680,
+        "Low": 36.700
+    },
+    {
+        "Date": "\/Date(1214870400000)\/",
+        "Close": 39.900,
+        "Volume": 1456330078,
+        "Open": 39.900,
+        "High": 39.921,
+        "Low": 36.550
+    },
+    {
+        "Date": "\/Date(1217548800000)\/",
+        "Close": 40.100,
+        "Volume": 1557166494,
+        "Open": 40.095,
+        "High": 40.140,
+        "Low": 38.260
+    },
+    {
+        "Date": "\/Date(1220227200000)\/",
+        "Close": 39.841,
+        "Volume": 1506305343,
+        "Open": 39.840,
+        "High": 39.910,
+        "Low": 38.240
+    },
+    {
+        "Date": "\/Date(1222819200000)\/",
+        "Close": 39.859,
+        "Volume": 2034928239,
+        "Open": 39.852,
+        "High": 39.880,
+        "Low": 37.330
+    },
+    {
+        "Date": "\/Date(1225497600000)\/",
+        "Close": 41.993,
+        "Volume": 1542204312,
+        "Open": 41.990,
+        "High": 42.020,
+        "Low": 38.710
+    },
+    {
+        "Date": "\/Date(1228089600000)\/",
+        "Close": 42.300,
+        "Volume": 1255678260,
+        "Open": 42.298,
+        "High": 42.310,
+        "Low": 40.360
+    },
+    {
+        "Date": "\/Date(1230768000000)\/",
+        "Close": 43.290,
+        "Volume": 1685490186,
+        "Open": 43.290,
+        "High": 43.310,
+        "Low": 40.160
+    },
+    {
+        "Date": "\/Date(1233446400000)\/",
+        "Close": 42.130,
+        "Volume": 1445458017,
+        "Open": 42.040,
+        "High": 42.170,
+        "Low": 40.260
+    },
+    {
+        "Date": "\/Date(1235865600000)\/",
+        "Close": 42.140,
+        "Volume": 1958550854,
+        "Open": 42.140,
+        "High": 42.300,
+        "Low": 40.190
+    },
+    {
+        "Date": "\/Date(1238544000000)\/",
+        "Close": 42.860,
+        "Volume": 1533883066,
+        "Open": 42.890,
+        "High": 43.050,
+        "Low": 41.390
+    },
+    {
+        "Date": "\/Date(1241136000000)\/",
+        "Close": 42.230,
+        "Volume": 2396221596,
+        "Open": 42.240,
+        "High": 42.280,
+        "Low": 38.230
+    },
+    {
+        "Date": "\/Date(1243814400000)\/",
+        "Close": 39.800,
+        "Volume": 2709886930,
+        "Open": 39.960,
+        "High": 40.000,
+        "Low": 37.160
+    },
+    {
+        "Date": "\/Date(1246406400000)\/",
+        "Close": 39.000,
+        "Volume": 2091835303,
+        "Open": 38.938,
+        "High": 39.000,
+        "Low": 35.540
+    },
+    {
+        "Date": "\/Date(1249084800000)\/",
+        "Close": 38.960,
+        "Volume": 1986978146,
+        "Open": 38.970,
+        "High": 39.030,
+        "Low": 36.260
+    },
+    {
+        "Date": "\/Date(1251763200000)\/",
+        "Close": 40.910,
+        "Volume": 1860762246,
+        "Open": 40.910,
+        "High": 40.950,
+        "Low": 38.320
+    },
+    {
+        "Date": "\/Date(1254355200000)\/",
+        "Close": 42.880,
+        "Volume": 1974572432,
+        "Open": 42.890,
+        "High": 42.920,
+        "Low": 39.880
+    },
+    {
+        "Date": "\/Date(1257033600000)\/",
+        "Close": 44.780,
+        "Volume": 1903112379,
+        "Open": 44.770,
+        "High": 44.860,
+        "Low": 41.610
+    },
+    {
+        "Date": "\/Date(1259625600000)\/",
+        "Close": 44.700,
+        "Volume": 1533161602,
+        "Open": 44.710,
+        "High": 44.760,
+        "Low": 42.880
+    },
+    {
+        "Date": "\/Date(1262304000000)\/",
+        "Close": 45.360,
+        "Volume": 1823989418,
+        "Open": 45.350,
+        "High": 45.400,
+        "Low": 42.530
+    },
+    {
+        "Date": "\/Date(1264982400000)\/",
+        "Close": 45.470,
+        "Volume": 1730644867,
+        "Open": 45.485,
+        "High": 45.550,
+        "Low": 42.930
+    },
+    {
+        "Date": "\/Date(1267401600000)\/",
+        "Close": 44.420,
+        "Volume": 1749294085,
+        "Open": 44.440,
+        "High": 44.440,
+        "Low": 42.060
+    },
+    {
+        "Date": "\/Date(1270080000000)\/",
+        "Close": 46.590,
+        "Volume": 1171507724,
+        "Open": 46.590,
+        "High": 46.650,
+        "Low": 43.300
+    },
+    {
+        "Date": "\/Date(1272672000000)\/",
+        "Close": 47.500,
+        "Volume": 1282648621,
+        "Open": 47.500,
+        "High": 47.520,
+        "Low": 45.660
+    },
+    {
+        "Date": "\/Date(1275350400000)\/",
+        "Close": 47.880,
+        "Volume": 1228561577,
+        "Open": 47.880,
+        "High": 47.920,
+        "Low": 46.160
+    },
+    {
+        "Date": "\/Date(1277942400000)\/",
+        "Close": 50.640,
+        "Volume": 992870269,
+        "Open": 50.640,
+        "High": 50.654,
+        "Low": 47.470
+    },
+    {
+        "Date": "\/Date(1280620800000)\/",
+        "Close": 49.020,
+        "Volume": 981208528,
+        "Open": 49.020,
+        "High": 49.060,
+        "Low": 44.390
+    },
+    {
+        "Date": "\/Date(1283299200000)\/",
+        "Close": 51.631,
+        "Volume": 573031521,
+        "Open": 51.630,
+        "High": 51.680,
+        "Low": 47.810
+    },
+    {
+        "Date": "\/Date(1285891200000)\/",
+        "Close": 55.010,
+        "Volume": 1103427032,
+        "Open": 54.959,
+        "High": 55.060,
+        "Low": 51.340
+    },
+    {
+        "Date": "\/Date(1288569600000)\/",
+        "Close": 54.680,
+        "Volume": 995365278,
+        "Open": 54.660,
+        "High": 54.770,
+        "Low": 48.660
+    },
+    {
+        "Date": "\/Date(1291161600000)\/",
+        "Close": 52.840,
+        "Volume": 577831801,
+        "Open": 52.840,
+        "High": 52.840,
+        "Low": 49.180
+    },
+    {
+        "Date": "\/Date(1293840000000)\/",
+        "Close": 51.370,
+        "Volume": 849837840,
+        "Open": 51.380,
+        "High": 51.460,
+        "Low": 41.630
+    },
+    {
+        "Date": "\/Date(1296518400000)\/",
+        "Close": 45.650,
+        "Volume": 569927484,
+        "Open": 45.650,
+        "High": 45.870,
+        "Low": 42.160
+    },
+    {
+        "Date": "\/Date(1298937600000)\/",
+        "Close": 45.020,
+        "Volume": 563447812,
+        "Open": 45.040,
+        "High": 45.070,
+        "Low": 41.050
+    },
+    {
+        "Date": "\/Date(1301616000000)\/",
+        "Close": 47.920,
+        "Volume": 579215682,
+        "Open": 47.930,
+        "High": 48.050,
+        "Low": 43.690
+    },
+    {
+        "Date": "\/Date(1304208000000)\/",
+        "Close": 50.450,
+        "Volume": 589335627,
+        "Open": 50.450,
+        "High": 50.469,
+        "Low": 47.220
+    },
+    {
+        "Date": "\/Date(1306886400000)\/",
+        "Close": 50.540,
+        "Volume": 633735895,
+        "Open": 50.480,
+        "High": 50.610,
+        "Low": 44.980
+    },
+    {
+        "Date": "\/Date(1309478400000)\/",
+        "Close": 46.060,
+        "Volume": 558670899,
+        "Open": 46.050,
+        "High": 46.120,
+        "Low": 43.300
+    },
+    {
+        "Date": "\/Date(1312156800000)\/",
+        "Close": 48.490,
+        "Volume": 629930051,
+        "Open": 48.480,
+        "High": 48.560,
+        "Low": 44.300
+    },
+    {
+        "Date": "\/Date(1314835200000)\/",
+        "Close": 46.930,
+        "Volume": 808574022,
+        "Open": 46.920,
+        "High": 47.070,
+        "Low": 37.180
+    },
+    {
+        "Date": "\/Date(1317427200000)\/",
+        "Close": 38.890,
+        "Volume": 799617379,
+        "Open": 38.860,
+        "High": 38.970,
+        "Low": 28.090
+    },
+    {
+        "Date": "\/Date(1320105600000)\/",
+        "Close": 33.920,
+        "Volume": 394335489,
+        "Open": 33.930,
+        "High": 34.010,
+        "Low": 25.060
+    },
+    {
+        "Date": "\/Date(1322697600000)\/",
+        "Close": 30.720,
+        "Volume": 715467389,
+        "Open": 30.730,
+        "High": 30.820,
+        "Low": 26.850
+    },
+    {
+        "Date": "\/Date(1325376000000)\/",
+        "Close": 31.590,
+        "Volume": 1176242873,
+        "Open": 31.590,
+        "High": 31.630,
+        "Low": 27.960
+    },
+    {
+        "Date": "\/Date(1328054400000)\/",
+        "Close": 31.650,
+        "Volume": 1194157236,
+        "Open": 31.650,
+        "High": 31.680,
+        "Low": 27.390
+    }
+]
diff --git a/vue-options-api-demos/charts/styling/dimensions/main.js b/vue-options-api-demos/charts/styling/dimensions/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/styling/dimensions/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/styling/dimensions/main.vue b/vue-options-api-demos/charts/styling/dimensions/main.vue
new file mode 100644
index 00000000..8ce5b5c4
--- /dev/null
+++ b/vue-options-api-demos/charts/styling/dimensions/main.vue
@@ -0,0 +1,60 @@
+<template>
+  <Chart
+    :style="{
+      width: '300px',
+      height: '200px',
+    }"
+  >
+    <ChartTitle :text="'Units sold'" />
+    <ChartCategoryAxis>
+      <ChartCategoryAxisItem :categories="categories">
+        <ChartCategoryAxisTitle :text="'Months'" />
+      </ChartCategoryAxisItem>
+    </ChartCategoryAxis>
+    <ChartSeries>
+      <ChartSeriesItem
+        :type="'bar'"
+        :gap="2"
+        :spacing="0.25"
+        :data-items="firstSeries"
+      />
+      <ChartSeriesItem :type="'bar'" :data-items="secondSeries" />
+      <ChartSeriesItem :type="'bar'" :data-items="thirdSeries" />
+      <ChartSeriesItem :type="'bar'" :data-items="fourthSeries" />
+    </ChartSeries>
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartTitle,
+  ChartTooltip,
+  ChartLegend,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartSeries,
+  ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Chart,
+    ChartTitle,
+    ChartTooltip,
+    ChartLegend,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data: function () {
+    return {
+      firstSeries: [100, 123, 234, 343],
+      secondSeries: [120, 67, 231, 196],
+      thirdSeries: [45, 124, 189, 143],
+      fourthSeries: [87, 154, 210, 215],
+      categories: ["Q1", "Q2", "Q3", "Q4"],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/charts/styling/pattern-fills/main.js b/vue-options-api-demos/charts/styling/pattern-fills/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/styling/pattern-fills/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/styling/pattern-fills/main.vue b/vue-options-api-demos/charts/styling/pattern-fills/main.vue
new file mode 100644
index 00000000..025a9a52
--- /dev/null
+++ b/vue-options-api-demos/charts/styling/pattern-fills/main.vue
@@ -0,0 +1,104 @@
+<template>
+  <Chart :style="{ width: '800px', margin: 'auto' }">
+    <ChartTitle
+      :text="'Bar Chart with Patterns'"
+      position="top"
+      align="center"
+    />
+    <ChartSeries>
+      <ChartSeriesItem
+        v-for="(item, idx) in series"
+        :key="idx"
+        :type="'column'"
+        :data-items="item.data"
+        :name="item.name"
+        :color="item.color"
+        :overlay="{ gradient: 'none' }"
+        :border="{ width: 0 }"
+        :pattern="item.pattern"
+      />
+    </ChartSeries>
+    <ChartLegend position="bottom" />
+  </Chart>
+</template>
+
+<script>
+import {
+  Chart,
+  ChartTitle,
+  ChartLegend,
+  ChartSeries,
+  ChartSeriesItem,
+} from '@progress/kendo-vue-charts';
+
+export default {
+  components: {
+    Chart,
+    ChartTitle,
+    ChartLegend,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  data() {
+    return {
+      series: [
+        {
+          name: 'Series A',
+          data: [33],
+          color: 'rgb(148, 236, 255)',
+          pattern: {
+            type: 'verticalStripes',
+            background: 'rgb(75, 96, 250)',
+            width: 1.2,
+            gap: 12,
+          },
+        },
+        {
+          name: 'Series B',
+          data: [19],
+          color: 'rgb(250, 201, 187)',
+          pattern: {
+            type: 'crosshatch',
+            background: 'rgb(172, 88, 255)',
+            width: 1.2,
+            gap: 12,
+          },
+        },
+        {
+          name: 'Series C',
+          data: [28],
+          color: 'rgb(255, 208, 223)',
+          pattern: {
+            type: 'diagonalStripes',
+            background: 'rgb(255, 146, 184)',
+            width: 1.2,
+            gap: 12,
+          },
+        },
+        {
+          name: 'Series D',
+          data: [13],
+          color: 'rgb(255, 99, 88)',
+          pattern: {
+            type: 'grid',
+            background: 'rgb(255, 148, 109)',
+            size: 12,
+            gap: 1.2,
+          },
+        },
+        {
+          name: 'Series E',
+          data: [26],
+          color: 'rgb(177, 193, 61)',
+          pattern: {
+            type: 'dots',
+            background: 'rgba(255, 255, 99, 0.5)',
+            radius: 7.2,
+            gap: 3.6,
+          },
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/charts/styling/range/main.js b/vue-options-api-demos/charts/styling/range/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/charts/styling/range/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/charts/styling/range/main.vue b/vue-options-api-demos/charts/styling/range/main.vue
new file mode 100644
index 00000000..d6e3b020
--- /dev/null
+++ b/vue-options-api-demos/charts/styling/range/main.vue
@@ -0,0 +1,79 @@
+<template>
+  <Chart
+    :pannable="{
+      lock: 'y',
+    }"
+    :zoomable="{
+      mousewheel: {
+        lock: 'y',
+      },
+    }"
+  >
+    <ChartTitle :text="'My line chart'" />
+    <ChartTooltip :format="'{0}'" />
+    <ChartLegend :position="'bottom'" :orientation="'horizontal'" />
+    <ChartCategoryAxis>
+      <ChartCategoryAxisItem
+        :categories="data.categories"
+        :max="20"
+        :labels="{
+          rotation: 'auto',
+        }"
+      />
+    </ChartCategoryAxis>
+    <ChartSeries>
+      <ChartSeriesItem
+        :data-items="data.series.data"
+        :type="'line'"
+        :line-style="'smooth'"
+        :name="data.series.name"
+      />
+    </ChartSeries>
+  </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartTitle,
+  ChartTooltip,
+  ChartLegend,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartSeries,
+  ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Chart,
+    ChartTitle,
+    ChartTooltip,
+    ChartLegend,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartSeries,
+    ChartSeriesItem,
+  },
+  created() {
+    const data = {
+      categories: [],
+      series: {
+        name: "My data over time",
+        data: [],
+      },
+    };
+
+    for (let i = 0; i < 200; i++) {
+      data.categories.push(this.baseYear + i);
+      data.series.data.push(Math.floor(Math.random() * 200));
+    }
+    this.data = data;
+  },
+  data: function () {
+    return {
+      baseYear: 2000,
+      data: null,
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/common/adaptive-mode/main.js b/vue-options-api-demos/common/adaptive-mode/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/common/adaptive-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/common/adaptive-mode/main.vue b/vue-options-api-demos/common/adaptive-mode/main.vue
new file mode 100644
index 00000000..9ff9e1aa
--- /dev/null
+++ b/vue-options-api-demos/common/adaptive-mode/main.vue
@@ -0,0 +1,61 @@
+<template>
+    <div>
+      <div>T-shirt size:</div>
+        <AdaptiveModeProvider
+            :small="800"
+            :medium="1200"
+        >
+            <ComboBox
+                :data-items="data"
+                :text-field="'text'"
+                :data-item-key="'id'"
+                :filterable="true"
+                :adaptive="true"
+                :adaptive-title="'Choose size'"
+                :style="{ width: '300px' }"
+                @filterchange="handleFilterchange"
+            />
+        </AdaptiveModeProvider>
+    </div>
+</template>
+<script>
+import { AdaptiveModeProvider } from "@progress/kendo-vue-common";
+import { ComboBox } from "@progress/kendo-vue-dropdowns";
+import { filterBy } from '@progress/kendo-data-query';
+
+const allData = [
+    {
+        id: 1,
+        text: "Small",
+    },
+    {
+        id: 2,
+        text: "Medium",
+    },
+    {
+        id: 3,
+        text: "Large",
+    },
+]
+
+export default {
+    components: {
+        ComboBox,
+        AdaptiveModeProvider
+    },
+    data() {
+        return {
+            data: allData,
+        };
+    },
+    methods: {
+        filterData(filter) {
+            const filteredData = allData.slice();
+            return filterBy(filteredData, filter);
+        },
+        handleFilterchange(event) {
+            this.data = this.filterData(event.filter)
+        }
+    },
+};
+</script>
diff --git a/vue-options-api-demos/conversational-ui/ai-prompt/commands/main.js b/vue-options-api-demos/conversational-ui/ai-prompt/commands/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/conversational-ui/ai-prompt/commands/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/conversational-ui/ai-prompt/commands/main.vue b/vue-options-api-demos/conversational-ui/ai-prompt/commands/main.vue
new file mode 100644
index 00000000..9ebe5a38
--- /dev/null
+++ b/vue-options-api-demos/conversational-ui/ai-prompt/commands/main.vue
@@ -0,0 +1,111 @@
+<template>
+  <AIPrompt
+    :activeView="activeView"
+    @activeviewchange="handleActiveViewChange"
+    @promptrequest="handleOnRequest"
+    @commandexecute="handleCommandExecute"
+    :toolbarItems="[
+      promptViewDefaults,
+      outputViewDefaults,
+      commandsViewDefaults,
+    ]"
+  >
+    <AIPromptView />
+    <AIPromptOutputView :outputs="outputs" :showOutputRating="true" />
+    <AIPromptCommandsView :commands="commands" />
+  </AIPrompt>
+</template>
+<script>
+import {
+  AIPrompt,
+  AIPromptCommandsView,
+  AIPromptOutputView,
+  AIPromptView,
+  commandsViewDefaults,
+  outputViewDefaults,
+  promptViewDefaults,
+  AIPromptViewRender
+} from "@progress/kendo-vue-conversational-ui";
+import { spellCheckerIcon, tellAFriendIcon } from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    AIPrompt,
+    AIPromptCommandsView,
+    AIPromptOutputView,
+    AIPromptView,
+    AIPromptViewRender
+  },
+  data: function () {
+    return {
+      commandsViewDefaults,
+      outputViewDefaults,
+      promptViewDefaults,
+      activeView: "commands-view",
+      outputs: [],
+      command: undefined,
+      commands: [
+        {
+          id: "1",
+          title: "Correct Spelling and grammar",
+          svgIcon: spellCheckerIcon,
+        },
+        {
+          id: "2",
+          title: "Change Tone",
+          svgIcon: tellAFriendIcon,
+          items: [
+            { id: "3", title: "Professional" },
+            { id: "4", title: "Conversational" },
+            { id: "5", title: "Humorous" },
+            { id: "6", title: "Empathic" },
+            { id: "7", title: "Academic" },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    handleOnRequest(prompt, outputItem) {
+      if (!prompt) {
+        return;
+      }
+
+      if (outputItem?.ratingType) {
+        console.log("ratingType", outputItem?.ratingType);
+      } else {
+        this.outputs = [
+          {
+            id: this.outputs.length + 1,
+            title: "Title",
+            subTitle: `Request ${this.outputs.length + 1}`,
+            responseContent: `Response to ${
+              prompt + " Iteration: " + this.outputs.length
+            }`,            
+            prompt,
+            command: this.command,
+          },
+          ...this.outputs
+        ];
+        this.activeView = outputViewDefaults.name;
+        this.command = undefined;
+      }
+    },
+    handleActiveViewChange(viewName) {
+      this.activeView = viewName;
+    },
+    handleCommandExecute(commandData) {
+      this.command = commandData;
+      this.outputs = [...this.outputs, {
+                id: this.outputs.length + 1,
+                title: 'Command Title',
+                subTitle: `Request ${ this.outputs.length + 1}`,
+                responseContent: commandData.title,
+                prompt,
+                command: this.command
+            }];
+      this.activeView = outputViewDefaults.name;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/conversational-ui/ai-prompt/custom-template/main.js b/vue-options-api-demos/conversational-ui/ai-prompt/custom-template/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/conversational-ui/ai-prompt/custom-template/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/conversational-ui/ai-prompt/custom-template/main.vue b/vue-options-api-demos/conversational-ui/ai-prompt/custom-template/main.vue
new file mode 100644
index 00000000..cfa0b279
--- /dev/null
+++ b/vue-options-api-demos/conversational-ui/ai-prompt/custom-template/main.vue
@@ -0,0 +1,156 @@
+<template>
+  <AIPrompt
+    style="width: 550px"
+    :activeView="activeView"
+    @activeviewchange="handleActiveViewChange"
+    @promptrequest="handleOnRequest"
+    @commandexecute="handleCommandExecute"
+    :toolbarItems="[
+      promptViewDefaults,
+      outputViewDefaults,
+      commandsViewDefaults,
+      {
+        name: 'custom-view',
+        content: 'custom',
+      },
+      {
+        name: 'joke-view',
+        content: 'joke',
+      },
+    ]"
+  >
+    <template v-slot:custom="{ props }">
+      <span class="k-spacer"></span>
+      <Button :svgIcon="starIcon" @click="handleCustomClick"
+        >Custom LLM Response</Button
+      >
+    </template>
+    <template v-slot:joke="{ props }">
+      <Button :svgIcon="dribbbleIcon" @click="handleJokeClick">Joke</Button>
+    </template>
+    <AIPromptView />
+    <AIPromptOutputView :outputs="outputs" :showOutputRating="true" />
+    <AIPromptCommandsView :commands="commands" />
+    <AIPromptViewRender :name="'custom-view'">
+      <AIPromptContent>
+        🌟 Here are the results returned from our internal LLM. These results
+        could be more acurate than what you got from the default LLM.
+        <br />
+        <ul>
+          <li>Option 1: 10000 pcs</li>
+          <li>Option 2: 9922 pcs or less</li>
+          <li>Option 3: 9911 to 9967 pcs</li>
+        </ul>
+        * This PromptContent view is a fully customizable one.
+      </AIPromptContent>
+    </AIPromptViewRender>
+    <AIPromptViewRender :name="'joke'">
+      <AIPromptContent>
+        <b>Why do programmers prefer dark mode?</b>
+        <span>Because light attracts bugs!</span>
+        * This a second fully customizable PromptContent View.
+      </AIPromptContent>
+    </AIPromptViewRender>
+  </AIPrompt>
+</template>
+<script>
+import {
+  AIPrompt,
+  AIPromptCommandsView,
+  AIPromptOutputView,
+  AIPromptView,
+  commandsViewDefaults,
+  outputViewDefaults,
+  promptViewDefaults,
+  AIPromptViewRender,
+  AIPromptContent,
+} from "@progress/kendo-vue-conversational-ui";
+import {
+  spellCheckerIcon,
+  tellAFriendIcon,
+  starIcon,
+  dribbbleIcon,
+} from "@progress/kendo-svg-icons";
+import { Button } from "@progress/kendo-vue-buttons";
+
+export default {
+  components: {
+    AIPrompt,
+    AIPromptCommandsView,
+    AIPromptOutputView,
+    AIPromptView,
+    AIPromptViewRender,
+    AIPromptContent,
+    Button,
+  },
+  data: function () {
+    return {
+      starIcon,
+      dribbbleIcon,
+      commandsViewDefaults,
+      outputViewDefaults,
+      promptViewDefaults,
+      activeView: promptViewDefaults.name,
+      outputs: [],
+      command: undefined,
+      commands: [
+        {
+          id: "1",
+          title: "Correct Spelling and grammar",
+          svgIcon: spellCheckerIcon,
+        },
+        {
+          id: "2",
+          title: "Change Tone",
+          svgIcon: tellAFriendIcon,
+          items: [
+            { id: "3", title: "Professional" },
+            { id: "4", title: "Conversational" },
+            { id: "5", title: "Humorous" },
+            { id: "6", title: "Empathic" },
+            { id: "7", title: "Academic" },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    handleOnRequest(prompt, outputItem) {
+      if (!prompt) {
+        return;
+      }
+
+      if (outputItem?.ratingType) {
+        console.log("ratingType", outputItem?.ratingType);
+      } else {
+        this.outputs = [
+          ...this.outputs,
+          {
+            id: this.outputs.length + 1,
+            title: "Title",
+            subTitle: `Request ${this.outputs.length + 1}`,
+            responseContent: `Response content ${prompt + this.outputs.length}`,
+            prompt,
+            command: this.command,
+          },
+        ];
+        this.activeView = outputViewDefaults.name;
+        this.command = undefined;
+      }
+    },
+    handleActiveViewChange(viewName) {
+      this.activeView = viewName;
+    },
+    handleCommandExecute(commandData) {
+      this.command = commandData;
+      this.activeView = promptViewDefaults.name;
+    },
+    handleCustomClick() {
+      this.activeView = "custom-view";
+    },
+    handleJokeClick() {
+      this.activeView = "joke";
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/conversational-ui/ai-prompt/custom-toolbar/ai-data.js b/vue-options-api-demos/conversational-ui/ai-prompt/custom-toolbar/ai-data.js
new file mode 100644
index 00000000..99cd4af6
--- /dev/null
+++ b/vue-options-api-demos/conversational-ui/ai-prompt/custom-toolbar/ai-data.js
@@ -0,0 +1,535 @@
+import {
+    brushIcon,
+    editToolsIcon,
+    minWidthIcon,
+    arrowsLeftRightIcon,
+} from "@progress/kendo-svg-icons";
+
+/* eslint-disable max-len */
+
+export const unknownRequest =
+    "The request cannot be processed at this time. Please excuse us for the inconvenience.";
+
+export const promptCommands = [
+    {
+        id: "1",
+        text: "Change Formality",
+        svgIcon: brushIcon,
+        children: [
+            {
+                id: "1_1",
+                text: "Casual",
+            },
+            {
+                id: "1_2",
+                text: "Neutral",
+            },
+            {
+                id: "1_3",
+                text: "Formal",
+            },
+        ],
+    },
+    {
+        id: "2",
+        text: "Translate",
+        svgIcon: editToolsIcon,
+        children: [
+            {
+                id: "2_1",
+                text: "German",
+            },
+            {
+                id: "2_2",
+                text: "Spanish",
+            },
+        ],
+    },
+    {
+        id: "3",
+        text: "Simplify",
+        svgIcon: minWidthIcon,
+    },
+    {
+        id: "4",
+        text: "Expand",
+        svgIcon: arrowsLeftRightIcon,
+    },
+];
+
+const outOfOffice = "Generate an Out of Office email.";
+
+const linkedInPost =
+    "Write a LinkedIn post for the importance of work/life balance.";
+
+export const suggestionsList = [outOfOffice, linkedInPost];
+
+export const suggestionsResponse = [
+    {
+        suggestion: outOfOffice,
+        response: `Subject: Out of Office: [Your Name]
+
+Dear [Recipient's Name],
+
+I am currently out of the office until [Return Date] and won't have access to email. For urgent matters, please contact [Colleague's Name] at [Colleague's Email]. I'll respond to your email upon my return.
+
+Thank you,
+[Your Name]`,
+        commands: {
+            Simplify: `Subject: Out of Office Until [Return Date]
+
+I'm out of the office with limited email access. For urgent issues, contact [Colleague's Name] at [Colleague's Email]. Back on [Return Date].
+
+Thanks,
+[Your Name]`,
+            Expand: `Subject: Out of Office: [Your Name]
+
+Dear [Recipient's Name],
+
+I hope this email finds you well. I am writing to inform you that I will be out of the office from [Start Date] and will not be returning until [Return Date]. During this period, I will have limited access to my email and will not be able to respond promptly.
+
+For any immediate concerns or assistance, please do not hesitate to reach out to my colleague, [Colleague's Name], at [Colleague's Email Address]. They are well-informed about my projects and can provide the necessary support during my absence.
+
+I appreciate your understanding and apologize for any inconvenience my absence may cause. Rest assured that I will attend to all pending emails and follow up on any outstanding matters as soon as I return to the office.
+
+Thank you for your cooperation and patience. I look forward to connecting with you once I am back.
+
+Warm regards,
+
+[Your Name]
+[Your Position]
+[Your Company]
+[Your Contact Information]`,
+            German: `Subject: Abwesenheitsnotiz: [Ihr Name]
+
+Sehr geehrte/r [Empfängername],
+
+ich bin bis zum [Rückkehrdatum] außer Haus und habe keinen Zugriff auf meine E-Mails. Bei dringenden Angelegenheiten kontaktieren Sie bitte [Name des Kollegen] unter [E-Mail-Adresse des Kollegen]. Ich werde Ihre E-Mail nach meiner Rückkehr beantworten.
+
+Danke,
+[Ihr Name]`,
+            Spanish: `Asunto: Fuera de la Oficina: [Tu Nombre]
+
+Estimado/a [Nombre del Destinatario],
+
+Actualmente estoy fuera de la oficina hasta el [Fecha de Regreso] y no tendré acceso al correo electrónico. Para asuntos urgentes, por favor contacta a [Nombre del Colega] en [Correo Electrónico del Colega]. Responderé a tu correo a mi regreso.
+
+Gracias,
+[Tu Nombre]`,
+            Formal: `Subject: Out of Office Notification: [Your Name]
+
+Dear [Recipient's Name],
+
+Please be informed that I will be absent from the office from [Start Date] and shall return on [Return Date]. During this interval, I shall not be accessible via email.
+
+For urgent inquiries, kindly direct your correspondence to [Colleague's Name] at [Colleague's Email Address]. I assure you that upon my return, I will attend to all pending communications with the utmost promptness.
+
+Thank you for your understanding.
+
+Sincerely,
+
+[Your Name]
+[Your Position]
+[Your Company]
+[Contact Information]`,
+            Casual: `Subject: Stepping Out for a Bit - [Your Name]
+
+Hey [Recipient's Name],
+
+Just a heads-up, I'm out of the office until [Return Date] and won’t be checking emails. If something urgent comes up, reach out to [Colleague's Name] at [Colleague's Email]. I’ll catch up on all emails when I'm back!
+
+Cheers,
+[Your Name]`,
+            Neutral: `Subject: Out of Office: [Your Name]
+
+Dear [Recipient's Name],
+
+I am out of the office until [Return Date] and will not have access to email. For urgent issues, please contact [Colleague's Name] at [Colleague's Email]. Your email will be addressed upon my return.
+
+Regards,
+[Your Name]`,
+        },
+    },
+    {
+        suggestion: outOfOffice + "retry",
+        response: `Subject: Out of Office: [Your Name]
+
+Dear [Recipient's Name],
+
+I am currently out of the office until [Return Date] and have limited email access. For urgent matters, please call me at [Your Phone Number]. Otherwise, I will respond to your email upon my return.
+
+Thank you for your understanding.
+
+Best,
+[Your Name]`,
+        commands: {
+            Simplify: `Subject: Out of Office: [Your Name]
+
+I'm out of the office until [Return Date]. For urgent issues, call [Your Phone Number]. Will respond to emails on my return.
+
+Thanks,
+[Your Name]`,
+            Expand: `Subject: Out of Office: [Your Name]
+
+Dear [Recipient's Name],
+
+Thank you for reaching out. Please note that I am currently out of the office and will not be available until [Return Date]. During this period, my access to email will be limited.
+
+For urgent matters, feel free to contact me directly at [Your Phone Number]. I will do my best to respond promptly. For all other inquiries or immediate assistance, please contact [Colleague's Name] at [Colleague's Email Address], who will be available to provide support in my absence.
+
+I appreciate your understanding and patience during this time. Rest assured, I will address all emails and pending matters as soon as I return to the office.
+
+Warm regards,
+
+[Your Name]
+[Your Position]
+[Your Company]
+[Your Contact Information]`,
+            German: `Subject: Abwesenheitsnotiz: [Ihr Name]
+
+Sehr geehrte/r [Empfängername],
+
+ich bin bis zum [Rückkehrdatum] nicht im Büro und habe eingeschränkten Zugang zu meinen E-Mails. Bei dringenden Angelegenheiten rufen Sie mich bitte unter [Ihre Telefonnummer] an. Andernfalls werde ich nach meiner Rückkehr auf Ihre E-Mail antworten.
+
+Vielen Dank für Ihr Verständnis.
+
+Mit freundlichen Grüßen,
+[Ihr Name]`,
+            Spanish: `Asunto: Fuera de la Oficina: [Tu Nombre]
+
+Estimado/a [Nombre del Destinatario],
+
+Actualmente estoy fuera de la oficina hasta el [Fecha de Regreso] y tengo acceso limitado al correo electrónico. Para asuntos urgentes, por favor llámame al [Tu Número de Teléfono]. De lo contrario, responderé a tu correo electrónico a mi regreso.
+
+Gracias por tu comprensión.
+
+Saludos,
+[Tu Nombre]`,
+            Formal: `Subject: Temporary Absence from Office: [Your Name]
+
+Dear [Recipient's Name],
+
+I trust this message finds you in good health. Please be advised that I am currently out of the office and will not return until [Return Date]. During this period, my access to email will be significantly restricted.
+
+In cases of urgent matters, I kindly request that you contact me directly via telephone at [Your Phone Number]. For all other inquiries, I assure you they will be addressed promptly upon my return.
+
+I appreciate your understanding and apologize for any inconvenience this may cause.
+
+Yours sincerely,
+
+[Your Name]
+[Your Position]
+[Your Company]
+[Contact Information]`,
+            Casual: `Subject: Stepping Out for a Bit - [Your Name]
+
+Hey [Recipient's Name],
+
+Just a quick heads up – I'm out of the office until [Return Date] and might not be checking emails much. If something urgent pops up, just give me a ring at [Your Phone Number]. Otherwise, I'll catch up on emails when I'm back.
+
+Thanks for understanding!
+
+Cheers,
+[Your Name]`,
+            Neutral: `Subject: Out of Office: [Your Name]
+
+Dear [Recipient's Name],
+
+I am out of the office until [Return Date] with limited email access. For urgent matters, please call [Your Phone Number]. I will respond to your email upon my return.
+
+Regards,
+[Your Name]`,
+        },
+    },
+    {
+        suggestion: linkedInPost,
+        response: `🌟 Embracing Work/Life Balance for Success 🌟
+
+Hello LinkedIn network! 👋 Today, let's talk about a key to our well-being: work/life balance. 🌐⚖️
+
+In our fast-paced world, balancing professional and personal life is not just a luxury, it's a necessity for health and productivity. 📈🌿
+
+✨ Key Points ✨
+
+Enhances Productivity: Less burnout, more motivation. 🚀
+Boosts Creativity: New experiences = fresh ideas. 💡
+Improves Health: Mental and physical benefits. 🧘‍♂️
+Strengthens Relationships: Quality time matters. 🤝
+Let's champion a culture where success and well-being go hand in hand. Share your work/life balance tips below! 👇
+
+#WorkLifeBalance #Productivity #WellBeing`,
+        commands: {
+            Simplify: `🌟 Prioritize Work/Life Balance 🌟
+
+Hey LinkedIn! Let's talk about balancing work and life. 🕒🌿
+
+Key Points:
+
+More Balance = More Productivity 📈
+Breaks Boost Creativity 💡
+Good for Health and Relationships 🧘‍♂️🤝
+Let's create a culture where productivity and well-being go hand in hand. 🚀
+
+Your strategies for balance? Comment below! 👇
+
+#WorkLifeBalance #Productivity #WellBeing`,
+            Expand: `🌟 Navigating the Tightrope of Work/Life Balance 🌟
+
+Greetings, LinkedIn community! 👋 In the midst of our bustling professional lives, there's a silent chord that often goes unnoticed: the delicate balance between work and personal life. Today, let's explore why nurturing this balance is not just beneficial, but essential. 🌐⚖️
+
+The digital age has dissolved traditional boundaries, making it challenging to separate 'office hours' from 'personal time'. But here's why finding that equilibrium is crucial:
+
+Enhances Productivity: It’s a myth that more hours equal more productivity. Studies show that well-rested, balanced individuals are more efficient and driven. Reducing burnout isn’t just good for employees; it’s smart business. 📊
+
+Fuels Creativity and Innovation: Ever noticed how your best ideas often come during downtime? A mind at ease is a breeding ground for creativity and innovation. Diverse experiences and restful breaks can lead to breakthroughs in problem-solving and creativity. 🎨
+
+Improves Physical and Mental Health: Chronic stress, a byproduct of overwork, can lead to serious health issues. Balancing work and life is crucial for mental clarity, emotional well-being, and physical health. It's about working smarter, not harder. 🌿
+
+Strengthens Personal Relationships: Our relationships define us. Spending quality time with family and friends rejuvenates our spirits and gives us a sense of belonging and support. Remember, no one on their deathbed ever wished they'd spent more time at the office. 👪
+
+Enhances Job Satisfaction: Employees who feel they have a good balance between their work and personal lives often feel more satisfied with their jobs and less likely to leave. This reduces turnover and builds a more loyal and content workforce. 💼
+
+As professionals, entrepreneurs, or leaders, it's crucial to model and encourage a culture that values this balance. Let's cultivate environments where productivity thrives alongside personal well-being. 🚀
+
+I'd love to hear from you! How do you maintain a healthy work/life balance? What strategies have you found effective? Let's share and learn from each other. Your insights are valuable! Comment below! 👇
+
+#WorkLifeBalance #MentalHealth #Leadership #Productivity #HealthyLiving`,
+            German: `🌟 Die Bedeutung von Arbeit/Lebens-Balance 🌟
+
+Hallo LinkedIn-Welt! 👋 Lasst uns heute über etwas Wichtiges sprechen: die Balance zwischen Arbeit und Leben. 🕒🌿
+
+In unserer schnelllebigen Welt ist es entscheidend, unser Berufs- und Privatleben auszugleichen. Es geht nicht nur darum, Zeit zu managen, sondern auch um die Pflege unserer geistigen und körperlichen Gesundheit. ⚖️
+
+Warum ist diese Balance so wichtig?
+
+Steigert die Produktivität: Weniger Burnout, mehr Motivation. 📈
+Fördert die Kreativität: Neue Erfahrungen wecken innovative Ideen. 💡
+Fördert die Gesundheit: Reduziert Stress für besseres Wohlbefinden. 🧘‍♂️
+Stärkt Beziehungen: Qualität der Zeit ist wichtig. 🤝
+Lasst uns eine Kultur fördern, in der wir Produktivität und persönliches Wohlbefinden gleichermaßen wertschätzen. 🚀
+
+Wie erreicht ihr ein harmonisches Gleichgewicht zwischen Arbeit und Leben? Teilt eure Gedanken unten! 👇
+
+#ArbeitsLebensBalance #Produktivität #Gesundheit #Führung`,
+            Spanish: `🌟 Abrazando el Equilibrio entre Trabajo y Vida Personal 🌟
+
+¡Hola, mundo de LinkedIn! 👋 Hoy hablemos de algo vital: el equilibrio entre trabajo y vida personal. 🕒🌿
+
+En nuestro mundo de ritmo acelerado, equilibrar nuestras vidas profesionales y personales es clave. No se trata solo de gestionar el tiempo, sino también de cuidar nuestra salud mental y física. ⚖️
+
+¿Por qué es esencial este equilibrio?
+
+Impulsa la Productividad: Menos agotamiento, más motivación. 📈
+Alimenta la Creatividad: Nuevas experiencias despiertan ideas innovadoras. 💡
+Promueve la Salud: Reduce el estrés para un mejor bienestar general. 🧘‍♂️
+Fortalece las Relaciones: El tiempo de calidad importa. 🤝
+Fomentemos una cultura donde valoremos la productividad y el bienestar personal por igual. 🚀
+
+¿Cómo logras armonía entre trabajo y vida personal? ¡Comparte tus pensamientos abajo! 👇
+
+#EquilibrioTrabajoVida #Productividad #Salud #Liderazgo`,
+            Formal: `The Imperative of Work/Life Balance in Professional Excellence
+
+Greetings, Esteemed LinkedIn Colleagues,
+
+In our rapidly evolving professional landscape, I wish to highlight an increasingly crucial aspect: the work/life balance. This equilibrium is not merely a concept but a fundamental practice that significantly impacts our productivity, creativity, health, and interpersonal relationships.
+
+Key Points to Consider:
+
+Enhanced Productivity: Studies reveal that well-balanced professionals demonstrate higher efficiency and motivation.
+Stimulation of Creativity: Diverse experiences outside of work foster innovative thinking and problem-solving skills.
+Health and Well-being: A balanced approach to work and life is instrumental in reducing stress-related ailments, thereby promoting both mental and physical health.
+Robust Relationships: Allocating time for personal relationships is critical for emotional support and overall life satisfaction.
+It is incumbent upon us as leaders and professionals to advocate for and implement policies that support work/life balance. This practice is not only beneficial for individual employees but is also conducive to the long-term success of our organizations.
+
+I invite you to share your insights and strategies on achieving an optimal work/life balance.
+
+Best Regards,
+
+[Your Name]
+
+#WorkLifeBalance #ProfessionalDevelopment #Leadership #WellBeing`,
+            Casual: `🌟 Let's Talk Work-Life Balance 🌟
+
+Hey LinkedIn fam! 👋 Quick chat: how's your work-life balance doing? 🤔
+
+Here's the deal: balancing work and play isn't just nice, it's necessary! 🎯
+
+Why, you ask?
+
+Work Smarter, Not Harder: Too much work = burnout. Taking breaks = getting more done. 🚀
+Hello, Creativity: Ever get great ideas while chilling? That's what I'm talking about! 💡
+Stay Healthy: All work and no play makes us stressed and tired. Who wants that? 🏋️‍♂️
+Family and Friends Time: Remember them? Yeah, they're important. 🤗
+So, let's make work-life balance cool again! What's your secret to keeping things chill? Drop a comment! ⬇️
+
+#RealTalk #WorkLifeChill #BalanceIsKey #StayCool`,
+            Neutral: `Understanding the Importance of Work/Life Balance
+
+In the professional realm, it's important to acknowledge the significance of work/life balance. This concept isn't just about dividing time between work and personal life; it's about achieving an equilibrium that supports both professional responsibilities and personal well-being.
+
+Key Points:
+
+Productivity: A balanced approach often leads to sustained productivity levels.
+Creativity: Diverse experiences outside of work can enhance problem-solving and innovation.
+Health: Managing work stress is crucial for maintaining both mental and physical health.
+Relationships: Allocating time for personal relationships is essential for a well-rounded life.
+Creating a work environment that values balance can contribute to both employee satisfaction and organizational success.
+
+Thoughts on maintaining work/life balance are welcome in the comments.
+
+#WorkLifeBalance #ProfessionalDevelopment #EmployeeWellbeing`,
+        },
+    },
+    {
+        suggestion: linkedInPost + "retry",
+        response: `🌟 Embracing Work-Life Balance: Key to Well-Being 🌟
+
+In today's fast-paced world, maintaining a work-life balance is crucial. It's not just beneficial – it's essential.
+
+🚀 Why Important?
+
+Boosts Productivity: Rest leads to higher creativity and problem-solving.
+Enhances Well-being: Prevents burnout, promoting physical and mental health.
+Improves Relationships: Ensures time for family and friends.
+👩‍💻 Achieving It:
+
+Set Boundaries: Define work hours to separate professional and personal life.
+Prioritize Tasks: Focus on what's urgent to manage time effectively.
+Take Breaks: Essential for mental refreshment and perspective.
+Embrace Flexibility: Use flexible working options for a balanced day.
+Let's strive for balance to ensure sustained success and happiness.
+
+#WorkLifeBalance #Productivity #MentalHealth`,
+        commands: {
+            Simplify: `🌟 Prioritize Work-Life Balance 🌟
+
+Balancing work and life is key to success and well-being.
+
+👍 Benefits:
+
+Boosts Productivity: Rest enhances creativity.
+Improves Well-being: Prevents burnout.
+Strengthens Relationships: Ensures time for loved ones.
+🛠️ Tips:
+
+Set Boundaries: Keep work and personal life separate.
+Prioritize & Take Breaks: Manage time well, recharge often.
+Flexibility: Adapt work schedules for balance.
+Balance leads to happiness and success!
+
+#WorkLifeBalance #Productivity #WellBeing`,
+            Expand: `🌟 Prioritize Work-Life Balance 🌟
+
+Balancing work and life is key to success and well-being.
+
+👍 Benefits:
+
+Boosts Productivity: Rest enhances creativity.
+Improves Well-being: Prevents burnout.
+Strengthens Relationships: Ensures time for loved ones.
+🛠️ Tips:
+
+Set Boundaries: Keep work and personal life separate.
+Prioritize & Take Breaks: Manage time well, recharge often.
+Flexibility: Adapt work schedules for balance.
+Balance leads to happiness and success!
+
+#WorkLifeBalance #Productivity #WellBeing`,
+            German: `🌟 Die Bedeutung von Work-Life-Balance: Schlüssel zum Wohlbefinden 🌟
+
+In unserer schnelllebigen Welt ist die Aufrechterhaltung einer Work-Life-Balance entscheidend. Sie ist nicht nur vorteilhaft – sie ist essentiell.
+
+🚀 Warum ist sie wichtig?
+
+Steigert die Produktivität: Ruhe führt zu höherer Kreativität und Problemlösungsfähigkeit.
+Verbessert das Wohlbefinden: Beugt Burnout vor und fördert die physische und psychische Gesundheit.
+Verbessert Beziehungen: Garantiert Zeit für Familie und Freunde.
+👩‍💻 Erreichen:
+
+Grenzen setzen: Arbeitszeiten definieren, um Berufs- und Privatleben zu trennen.
+Aufgaben priorisieren: Konzentration auf das Dringende, um Zeit effektiv zu verwalten.
+Pausen nehmen: Wesentlich für geistige Erfrischung und Perspektive.
+Flexibilität nutzen: Flexible Arbeitsmöglichkeiten für einen ausgeglichenen Tag nutzen.
+Lasst uns für ein Gleichgewicht streben, um nachhaltigen Erfolg und Glück zu sichern.
+
+#WorkLifeBalance #Produktivität #MentalHealth`,
+            Spanish: `🌟 Abrazando el Equilibrio Entre Trabajo y Vida Personal: Clave para el Bienestar 🌟
+
+En el mundo acelerado de hoy, mantener un equilibrio entre trabajo y vida personal es crucial. No solo es beneficioso, es esencial.
+
+🚀 ¿Por Qué es Importante?
+
+Aumenta la Productividad: El descanso conduce a una mayor creatividad y resolución de problemas.
+Mejora el Bienestar: Previene el agotamiento, promoviendo la salud física y mental.
+Mejora las Relaciones: Asegura tiempo para la familia y amigos.
+👩‍💻 Cómo Lograrlo:
+
+Establecer Límites: Definir horas de trabajo para separar la vida profesional y personal.
+Priorizar Tareas: Enfocarse en lo urgente para gestionar el tiempo de manera efectiva.
+Tomar Descansos: Esencial para el refresco mental y la perspectiva.
+Abrazar la Flexibilidad: Utilizar opciones de trabajo flexible para un día equilibrado.
+Esforcémonos por el equilibrio para asegurar el éxito y la felicidad sostenidos.
+
+#EquilibrioTrabajoVida #Productividad #SaludMental`,
+            Formal: `The Imperative of Work-Life Balance for Professional Success and Personal Well-being
+
+In the realm of modern professional endeavors, the significance of maintaining an equilibrium between work and personal life cannot be overstated. This balance is not merely a luxury but an essential component for long-term success and well-being.
+
+Key Reasons for Emphasizing Work-Life Balance:
+
+Enhanced Productivity: Adequate rest and detachment from work-related tasks catalyze creativity and effective problem-solving capabilities.
+Improved Health and Well-being: A well-balanced lifestyle is instrumental in preventing occupational burnout, thereby safeguarding both mental and physical health.
+Strengthened Personal Relationships: Allocating time for personal relationships is crucial for emotional support and overall life satisfaction.
+Strategies for Cultivating Balance:
+
+Implementing Clear Boundaries: Establishing definitive work hours is essential to distinguish professional responsibilities from personal time.
+Effective Prioritization of Tasks: Identifying and addressing urgent tasks efficiently is key to managing workload and reducing stress.
+Incorporating Regular Breaks: Breaks are fundamental for mental rejuvenation, offering new perspectives, particularly in challenging situations.
+Utilizing Flexible Work Arrangements: Flexibility in work schedules can significantly contribute to a harmonious daily routine, accommodating both career and personal commitments.
+In conclusion, work-life balance is a pivotal factor in achieving sustained professional success and personal fulfillment. It requires conscious and continual efforts to integrate effectively into our daily lives.
+
+#ProfessionalDevelopment #WorkLifeBalance #EmployeeWellbeing #CareerSuccess
+
+            `,
+            Casual: `Hey everyone 👋,
+
+Just wanted to drop a quick note about something I've been thinking a lot about lately: work-life balance. 🌈
+
+Let's face it, we're often caught up in the hustle, but have you noticed how taking a step back actually makes you more productive? Yep, it's true! 🚀 A little break can spark some serious creativity.
+
+Here's the deal:
+
+Work Smart: It's not about working non-stop, it's about working efficiently. 🧠
+Health is Wealth: Avoid burnout, folks! Your mind and body will thank you. 💪
+Family & Friends Time: Because life's too short to miss out on fun moments. 🥳
+Tips to keep it balanced:
+
+Draw the Line: Work time is work time, chill time is chill time. 🕒
+What's Important?: Not everything is urgent. Prioritize! ✅
+Breaks are Bae: Short walks, coffee breaks, vacations - they all count. 🏖️
+Flexi is Sexy: Flexi-hours or work-from-home can be a game-changer. 💻
+So, let's keep it balanced and rock our work and personal lives! 🎸
+
+#WorkLifeBalance #StayProductive #StayHealthy`,
+            Neutral: `Maintaining Work-Life Balance: Essential for Sustainable Success
+
+In the current professional landscape, achieving a work-life balance is increasingly recognized as a key factor for long-term success and well-being.
+
+Why Work-Life Balance Matters?
+
+Enhances Productivity: Regular breaks and downtime can lead to improved focus and efficiency.
+Supports Health: Balancing work and personal life helps prevent burnout and promotes overall well-being.
+Strengthens Personal Relationships: Allocating time outside work nurtures important personal connections.
+Strategies for Achieving Balance:
+
+Set Clear Boundaries: Establish specific work hours to ensure personal time remains undisturbed.
+Prioritize Effectively: Distinguish between urgent and less critical tasks to manage workload efficiently.
+Regular Breaks: Incorporating short breaks and vacation time is vital for mental and physical rejuvenation.
+Flexible Working Arrangements: Where possible, utilize flexibility in work schedules to accommodate personal needs.
+Work-life balance is a continuous, individual process and is crucial for maintaining long-term professional and personal health.
+
+#WorkLifeBalance #ProfessionalDevelopment #HealthAndWellness`,
+        },
+    },
+];
diff --git a/vue-options-api-demos/conversational-ui/ai-prompt/custom-toolbar/main.js b/vue-options-api-demos/conversational-ui/ai-prompt/custom-toolbar/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/conversational-ui/ai-prompt/custom-toolbar/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/conversational-ui/ai-prompt/custom-toolbar/main.vue b/vue-options-api-demos/conversational-ui/ai-prompt/custom-toolbar/main.vue
new file mode 100644
index 00000000..fabb178f
--- /dev/null
+++ b/vue-options-api-demos/conversational-ui/ai-prompt/custom-toolbar/main.vue
@@ -0,0 +1,180 @@
+<template>
+  <div class="k-card custom-card">
+    <KTextArea :style="{ height: '500px' }" :value="textAreaValue" />
+    <FloatingActionButton
+      :style="{ zIndex: 2 }"
+      ref="button"
+      :svgIcon="fabIcon"
+      :align="{
+        horizontal: 'end',
+        vertical: 'bottom',
+      }"
+      :alignOffset="{
+        x: 40,
+        y: 40,
+      }"
+      :positionMode="'absolute'"
+      @click="toggleAIPrompt"
+    />
+    <Popup
+      :anchor="'button'"
+      :show="showAIPrompt"
+      :direction="'up'"
+      :popupAlign="{ vertical: 'bottom', horizontal: 'right' }"
+      :anchorAlign="{ vertical: 'bottom', horizontal: 'left' }"
+    >
+      <AIPrompt
+         v-if="showAIPrompt"
+        :style="{ width: '400px', height: '400px' }"
+        :activeView="activeView"
+        @activeviewchange="handleActiveViewChange"
+        @promptrequest="handleOnRequest"
+        @commandexecute="handleCommandExecute"
+        :toolbarItems="[
+          promptViewDefaults,
+          outputViewDefaults,
+          {
+            name: 'custom-view',
+            content: 'custom',
+          },
+        ]"
+      >
+        <template v-slot:custom="{ props }">
+          <span class="k-spacer"></span>
+          <KButton :svgIcon="xIcon" @click="handleXIconClick"></KButton>
+        </template>
+        <AIPromptView :promptSuggestions="suggestionsList" />
+        <AIPromptOutputView :outputs="outputs" />
+      </AIPrompt>
+    </Popup>
+  </div>
+</template>
+<script>
+import {
+  AIPrompt,
+  AIPromptOutputView,
+  AIPromptView,
+  outputViewDefaults,
+  promptViewDefaults,
+} from "@progress/kendo-vue-conversational-ui";
+import { Popup } from "@progress/kendo-vue-popup";
+import { TextArea as KTextArea } from "@progress/kendo-vue-inputs";
+import { xIcon, sparklesIcon } from "@progress/kendo-svg-icons";
+import {
+  Button as KButton,
+  FloatingActionButton,
+} from "@progress/kendo-vue-buttons";
+
+import {
+  suggestionsList,
+  suggestionsResponse,
+  unknownRequest,
+} from "./ai-data";
+
+export default {
+  components: {
+    AIPrompt,
+    AIPromptOutputView,
+    AIPromptView,
+    Popup,
+    KTextArea,
+    FloatingActionButton,
+    KButton,
+  },
+  data: function () {
+    return {
+      suggestionsList,
+      suggestionsResponse,
+      unknownRequest,
+      outputViewDefaults,
+      promptViewDefaults,
+      textAreaValue: "",
+      localPrompt: "",
+      showAIPrompt: false,
+      activeView: promptViewDefaults.name,
+      outputs: [],
+      xIcon,
+    };
+  },
+  computed: {
+    fabIcon() {
+      return this.showAIPrompt ? xIcon : sparklesIcon;
+    },
+  },
+  methods: {
+    handleXIconClick() {
+      this.showAIPrompt = false;
+    },
+    toggleAIPrompt() {
+      this.showAIPrompt = !this.showAIPrompt;
+    },
+    handleOnRequest(prompt, output) {
+      if (!prompt) {
+        return;
+      }
+
+      if (output && output?.isRetry) {
+        const responseContent = this.getSuggestion(prompt + "retry");
+        this.textAreaValue = responseContent?.response || unknownRequest;
+        this.outputs = [
+          {
+            id: this.outputs.length + 1,
+            title: prompt,
+            responseContent: responseContent?.response || unknownRequest,
+            prompt,
+          },
+          ...this.outputs,
+        ];
+      } else if (output && output?.ratingType) {
+        const ratingOutput = this.outputs.map((item) => {
+          return output.id === item.id
+            ? { ...item, ratingType: output.ratingType }
+            : item;
+        });
+        this.outputs = ratingOutput;
+      } else {
+        const responseContent = this.getSuggestion(prompt);
+        this.textAreaValue = responseContent?.response || unknownRequest;
+        this.outputs = [
+          {
+            id: this.outputs.length + 1,
+            title: prompt,
+            responseContent: responseContent?.response || unknownRequest,
+            prompt,
+          },
+          ...this.outputs,
+        ];
+      }
+
+      this.localPrompt = prompt;
+      this.activeView = outputViewDefaults.name;
+    },
+    handleActiveViewChange(viewName) {
+      this.activeView = viewName;
+    },
+    handleCommandExecute(commandData) {
+      const responseItem = this.getSuggestion(this.localPrompt || "");
+      const commandText = commandData.text;
+      this.outputs = [
+        {
+          id: this.outputs.length + 1,
+          title: this.localPrompt,
+          subTitle: commandData.text,
+          responseContent:
+            (responseItem?.commands && responseItem.commands[commandText]) ||
+            unknownRequest,
+          prompt: this.localPrompt,
+        },
+        ...outputs,
+      ];
+
+      this.activeView = outputViewDefaults.name;
+    },
+    getSuggestion(prompt) {
+      return suggestionsResponse.find((item) => {
+        return item.suggestion === prompt && item;
+      });
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/conversational-ui/ai-prompt/events/Logger.vue b/vue-options-api-demos/conversational-ui/ai-prompt/events/Logger.vue
new file mode 100644
index 00000000..aa04a80b
--- /dev/null
+++ b/vue-options-api-demos/conversational-ui/ai-prompt/events/Logger.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="example-config">
+    <h5>{{ title }}</h5>
+    <ul class="event-log">
+      <li v-for="(event, idx) in events" :key="idx">{{ event }}</li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    events: Array,
+    title: String,
+  },
+};
+</script>
+
+<style scoped>
+.example-config {
+  margin: 0 0 20px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+  margin: 0;
+  padding: 0;
+  max-height: 100px;
+  overflow-y: auto;
+  list-style-type: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: white;
+}
+.event-log li {
+  margin: 0;
+  padding: 0.3em;
+  line-height: 1.2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+  margin-bottom: -1px;
+}
+</style>
\ No newline at end of file
diff --git a/vue-options-api-demos/conversational-ui/ai-prompt/events/main.js b/vue-options-api-demos/conversational-ui/ai-prompt/events/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/conversational-ui/ai-prompt/events/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/conversational-ui/ai-prompt/events/main.vue b/vue-options-api-demos/conversational-ui/ai-prompt/events/main.vue
new file mode 100644
index 00000000..ce49ba75
--- /dev/null
+++ b/vue-options-api-demos/conversational-ui/ai-prompt/events/main.vue
@@ -0,0 +1,133 @@
+<template>
+  <AIPrompt
+    :activeView="activeView"
+    @activeviewchange="handleActiveViewChange"
+    @promptrequest="handleOnRequest"
+    @commandexecute="handleCommandExecute"
+    :toolbarItems="[
+      promptViewDefaults,
+      outputViewDefaults,
+      commandsViewDefaults,
+    ]"
+  >
+    <AIPromptView />
+    <AIPromptOutputView
+      @copy="handleCopy"
+      @retry="handleRetry"
+      @rating="handleRating"
+      :outputs="outputs"
+      :showOutputRating="true"
+    />
+
+    <AIPromptCommandsView :commands="commands" />
+  </AIPrompt>
+  <br />
+  <br />
+  <Logger :title="'Events list'" :events="eventsList" />
+</template>
+<script>
+import {
+  AIPrompt,
+  AIPromptCommandsView,
+  AIPromptOutputView,
+  AIPromptView,
+  commandsViewDefaults,
+  outputViewDefaults,
+  promptViewDefaults,
+} from "@progress/kendo-vue-conversational-ui";
+import { spellCheckerIcon, tellAFriendIcon } from "@progress/kendo-svg-icons";
+import Logger from "./Logger.vue";
+
+export default {
+  components: {
+    AIPrompt,
+    AIPromptCommandsView,
+    AIPromptOutputView,
+    AIPromptView,
+    Logger,
+  },
+  data: function () {
+    return {
+      events: [],
+      commandsViewDefaults,
+      outputViewDefaults,
+      promptViewDefaults,
+      activeView: promptViewDefaults.name,
+      outputs: [],
+      command: undefined,
+      commands: [
+        {
+          id: "1",
+          title: "Correct Spelling and grammar",
+          svgIcon: spellCheckerIcon,
+        },
+        {
+          id: "2",
+          title: "Change Tone",
+          svgIcon: tellAFriendIcon,
+          items: [
+            { id: "3", title: "Professional" },
+            { id: "4", title: "Conversational" },
+            { id: "5", title: "Humorous" },
+            { id: "6", title: "Empathic" },
+            { id: "7", title: "Academic" },
+          ],
+        },
+      ],
+    };
+  },
+  computed: {
+    eventsList() {
+      return this.events;
+    },
+  },
+  methods: {
+    handleOnRequest(prompt, outputItem) {
+      this.events.unshift("Prompt request sent: " + prompt);
+
+      if (!prompt) {
+        return;
+      }
+
+      if (outputItem?.ratingType) {
+        console.log("ratingType", outputItem?.ratingType);
+      } else {
+        this.outputs = [
+          ...this.outputs,
+          {
+            id: this.outputs.length + 1,
+            title: "Title",
+            subTitle: `Request ${this.outputs.length + 1}`,
+            responseContent: `Response content ${prompt + this.outputs.length}`,
+            prompt,
+            command: this.command,
+          },
+        ];
+        this.activeView = outputViewDefaults.name;
+        this.command = undefined;
+      }
+    },
+    handleActiveViewChange(viewName) {
+      this.activeView = viewName;
+      this.events.unshift("Active view changed to: " + viewName);
+    },
+    handleCommandExecute(commandData) {
+      this.command = commandData;
+      this.activeView = promptViewDefaults.name;
+      this.events.unshift("'" + commandData.title + "' command executed");
+    },
+    handleCopy(params) {
+      this.events.unshift("Content copied: " + params);
+    },
+    handleRetry(params) {
+      this.events.unshift(
+        "Prompt retry with the following parameters was triggered " +
+          JSON.stringify(params)
+      );
+    },
+    handleRating(params, rating) {
+      this.events.unshift("Rating received: " + rating);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/conversational-ui/ai-prompt/globalization/main.js b/vue-options-api-demos/conversational-ui/ai-prompt/globalization/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/conversational-ui/ai-prompt/globalization/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/conversational-ui/ai-prompt/globalization/main.vue b/vue-options-api-demos/conversational-ui/ai-prompt/globalization/main.vue
new file mode 100644
index 00000000..bedaad16
--- /dev/null
+++ b/vue-options-api-demos/conversational-ui/ai-prompt/globalization/main.vue
@@ -0,0 +1,61 @@
+<template>
+  <AIPrompt
+    dir="rtl"
+    :activeView="activeView"
+    @activeviewchange="handleActiveViewChange"
+    @promptrequest="handleOnRequest"
+    :toolbarItems="[promptViewDefaults, outputViewDefaults]"
+  >
+    <AIPromptView />
+    <AIPromptOutputView :outputs="outputs" />
+  </AIPrompt>
+</template>
+<script>
+import {
+  AIPrompt,
+  AIPromptOutputView,
+  AIPromptView,
+  outputViewDefaults,
+  promptViewDefaults,
+} from "@progress/kendo-vue-conversational-ui";
+
+export default {
+  components: {
+    AIPrompt,
+    AIPromptOutputView,
+    AIPromptView,
+  },
+  data: function () {
+    return {
+      outputViewDefaults,
+      promptViewDefaults,
+      activeView: promptViewDefaults.name,
+      outputs: [],
+    };
+  },
+  methods: {
+    handleOnRequest(prompt, outputItem) {
+      if (!prompt) {
+        return;
+      }
+
+      this.outputs = [
+        {
+          id: this.outputs.length + 1,
+          title: "Title",
+          subTitle: `Request ${this.outputs.length + 1}`,
+          responseContent: `Response content for prompt ${
+            prompt + ". Generation: " + this.outputs.length
+          }`,
+          prompt,
+        },
+        ...this.outputs,
+      ];
+      this.activeView = outputViewDefaults.name;
+    },
+    handleActiveViewChange(viewName) {
+      this.activeView = viewName;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/conversational-ui/ai-prompt/overview/ai-data.js b/vue-options-api-demos/conversational-ui/ai-prompt/overview/ai-data.js
new file mode 100644
index 00000000..99cd4af6
--- /dev/null
+++ b/vue-options-api-demos/conversational-ui/ai-prompt/overview/ai-data.js
@@ -0,0 +1,535 @@
+import {
+    brushIcon,
+    editToolsIcon,
+    minWidthIcon,
+    arrowsLeftRightIcon,
+} from "@progress/kendo-svg-icons";
+
+/* eslint-disable max-len */
+
+export const unknownRequest =
+    "The request cannot be processed at this time. Please excuse us for the inconvenience.";
+
+export const promptCommands = [
+    {
+        id: "1",
+        text: "Change Formality",
+        svgIcon: brushIcon,
+        children: [
+            {
+                id: "1_1",
+                text: "Casual",
+            },
+            {
+                id: "1_2",
+                text: "Neutral",
+            },
+            {
+                id: "1_3",
+                text: "Formal",
+            },
+        ],
+    },
+    {
+        id: "2",
+        text: "Translate",
+        svgIcon: editToolsIcon,
+        children: [
+            {
+                id: "2_1",
+                text: "German",
+            },
+            {
+                id: "2_2",
+                text: "Spanish",
+            },
+        ],
+    },
+    {
+        id: "3",
+        text: "Simplify",
+        svgIcon: minWidthIcon,
+    },
+    {
+        id: "4",
+        text: "Expand",
+        svgIcon: arrowsLeftRightIcon,
+    },
+];
+
+const outOfOffice = "Generate an Out of Office email.";
+
+const linkedInPost =
+    "Write a LinkedIn post for the importance of work/life balance.";
+
+export const suggestionsList = [outOfOffice, linkedInPost];
+
+export const suggestionsResponse = [
+    {
+        suggestion: outOfOffice,
+        response: `Subject: Out of Office: [Your Name]
+
+Dear [Recipient's Name],
+
+I am currently out of the office until [Return Date] and won't have access to email. For urgent matters, please contact [Colleague's Name] at [Colleague's Email]. I'll respond to your email upon my return.
+
+Thank you,
+[Your Name]`,
+        commands: {
+            Simplify: `Subject: Out of Office Until [Return Date]
+
+I'm out of the office with limited email access. For urgent issues, contact [Colleague's Name] at [Colleague's Email]. Back on [Return Date].
+
+Thanks,
+[Your Name]`,
+            Expand: `Subject: Out of Office: [Your Name]
+
+Dear [Recipient's Name],
+
+I hope this email finds you well. I am writing to inform you that I will be out of the office from [Start Date] and will not be returning until [Return Date]. During this period, I will have limited access to my email and will not be able to respond promptly.
+
+For any immediate concerns or assistance, please do not hesitate to reach out to my colleague, [Colleague's Name], at [Colleague's Email Address]. They are well-informed about my projects and can provide the necessary support during my absence.
+
+I appreciate your understanding and apologize for any inconvenience my absence may cause. Rest assured that I will attend to all pending emails and follow up on any outstanding matters as soon as I return to the office.
+
+Thank you for your cooperation and patience. I look forward to connecting with you once I am back.
+
+Warm regards,
+
+[Your Name]
+[Your Position]
+[Your Company]
+[Your Contact Information]`,
+            German: `Subject: Abwesenheitsnotiz: [Ihr Name]
+
+Sehr geehrte/r [Empfängername],
+
+ich bin bis zum [Rückkehrdatum] außer Haus und habe keinen Zugriff auf meine E-Mails. Bei dringenden Angelegenheiten kontaktieren Sie bitte [Name des Kollegen] unter [E-Mail-Adresse des Kollegen]. Ich werde Ihre E-Mail nach meiner Rückkehr beantworten.
+
+Danke,
+[Ihr Name]`,
+            Spanish: `Asunto: Fuera de la Oficina: [Tu Nombre]
+
+Estimado/a [Nombre del Destinatario],
+
+Actualmente estoy fuera de la oficina hasta el [Fecha de Regreso] y no tendré acceso al correo electrónico. Para asuntos urgentes, por favor contacta a [Nombre del Colega] en [Correo Electrónico del Colega]. Responderé a tu correo a mi regreso.
+
+Gracias,
+[Tu Nombre]`,
+            Formal: `Subject: Out of Office Notification: [Your Name]
+
+Dear [Recipient's Name],
+
+Please be informed that I will be absent from the office from [Start Date] and shall return on [Return Date]. During this interval, I shall not be accessible via email.
+
+For urgent inquiries, kindly direct your correspondence to [Colleague's Name] at [Colleague's Email Address]. I assure you that upon my return, I will attend to all pending communications with the utmost promptness.
+
+Thank you for your understanding.
+
+Sincerely,
+
+[Your Name]
+[Your Position]
+[Your Company]
+[Contact Information]`,
+            Casual: `Subject: Stepping Out for a Bit - [Your Name]
+
+Hey [Recipient's Name],
+
+Just a heads-up, I'm out of the office until [Return Date] and won’t be checking emails. If something urgent comes up, reach out to [Colleague's Name] at [Colleague's Email]. I’ll catch up on all emails when I'm back!
+
+Cheers,
+[Your Name]`,
+            Neutral: `Subject: Out of Office: [Your Name]
+
+Dear [Recipient's Name],
+
+I am out of the office until [Return Date] and will not have access to email. For urgent issues, please contact [Colleague's Name] at [Colleague's Email]. Your email will be addressed upon my return.
+
+Regards,
+[Your Name]`,
+        },
+    },
+    {
+        suggestion: outOfOffice + "retry",
+        response: `Subject: Out of Office: [Your Name]
+
+Dear [Recipient's Name],
+
+I am currently out of the office until [Return Date] and have limited email access. For urgent matters, please call me at [Your Phone Number]. Otherwise, I will respond to your email upon my return.
+
+Thank you for your understanding.
+
+Best,
+[Your Name]`,
+        commands: {
+            Simplify: `Subject: Out of Office: [Your Name]
+
+I'm out of the office until [Return Date]. For urgent issues, call [Your Phone Number]. Will respond to emails on my return.
+
+Thanks,
+[Your Name]`,
+            Expand: `Subject: Out of Office: [Your Name]
+
+Dear [Recipient's Name],
+
+Thank you for reaching out. Please note that I am currently out of the office and will not be available until [Return Date]. During this period, my access to email will be limited.
+
+For urgent matters, feel free to contact me directly at [Your Phone Number]. I will do my best to respond promptly. For all other inquiries or immediate assistance, please contact [Colleague's Name] at [Colleague's Email Address], who will be available to provide support in my absence.
+
+I appreciate your understanding and patience during this time. Rest assured, I will address all emails and pending matters as soon as I return to the office.
+
+Warm regards,
+
+[Your Name]
+[Your Position]
+[Your Company]
+[Your Contact Information]`,
+            German: `Subject: Abwesenheitsnotiz: [Ihr Name]
+
+Sehr geehrte/r [Empfängername],
+
+ich bin bis zum [Rückkehrdatum] nicht im Büro und habe eingeschränkten Zugang zu meinen E-Mails. Bei dringenden Angelegenheiten rufen Sie mich bitte unter [Ihre Telefonnummer] an. Andernfalls werde ich nach meiner Rückkehr auf Ihre E-Mail antworten.
+
+Vielen Dank für Ihr Verständnis.
+
+Mit freundlichen Grüßen,
+[Ihr Name]`,
+            Spanish: `Asunto: Fuera de la Oficina: [Tu Nombre]
+
+Estimado/a [Nombre del Destinatario],
+
+Actualmente estoy fuera de la oficina hasta el [Fecha de Regreso] y tengo acceso limitado al correo electrónico. Para asuntos urgentes, por favor llámame al [Tu Número de Teléfono]. De lo contrario, responderé a tu correo electrónico a mi regreso.
+
+Gracias por tu comprensión.
+
+Saludos,
+[Tu Nombre]`,
+            Formal: `Subject: Temporary Absence from Office: [Your Name]
+
+Dear [Recipient's Name],
+
+I trust this message finds you in good health. Please be advised that I am currently out of the office and will not return until [Return Date]. During this period, my access to email will be significantly restricted.
+
+In cases of urgent matters, I kindly request that you contact me directly via telephone at [Your Phone Number]. For all other inquiries, I assure you they will be addressed promptly upon my return.
+
+I appreciate your understanding and apologize for any inconvenience this may cause.
+
+Yours sincerely,
+
+[Your Name]
+[Your Position]
+[Your Company]
+[Contact Information]`,
+            Casual: `Subject: Stepping Out for a Bit - [Your Name]
+
+Hey [Recipient's Name],
+
+Just a quick heads up – I'm out of the office until [Return Date] and might not be checking emails much. If something urgent pops up, just give me a ring at [Your Phone Number]. Otherwise, I'll catch up on emails when I'm back.
+
+Thanks for understanding!
+
+Cheers,
+[Your Name]`,
+            Neutral: `Subject: Out of Office: [Your Name]
+
+Dear [Recipient's Name],
+
+I am out of the office until [Return Date] with limited email access. For urgent matters, please call [Your Phone Number]. I will respond to your email upon my return.
+
+Regards,
+[Your Name]`,
+        },
+    },
+    {
+        suggestion: linkedInPost,
+        response: `🌟 Embracing Work/Life Balance for Success 🌟
+
+Hello LinkedIn network! 👋 Today, let's talk about a key to our well-being: work/life balance. 🌐⚖️
+
+In our fast-paced world, balancing professional and personal life is not just a luxury, it's a necessity for health and productivity. 📈🌿
+
+✨ Key Points ✨
+
+Enhances Productivity: Less burnout, more motivation. 🚀
+Boosts Creativity: New experiences = fresh ideas. 💡
+Improves Health: Mental and physical benefits. 🧘‍♂️
+Strengthens Relationships: Quality time matters. 🤝
+Let's champion a culture where success and well-being go hand in hand. Share your work/life balance tips below! 👇
+
+#WorkLifeBalance #Productivity #WellBeing`,
+        commands: {
+            Simplify: `🌟 Prioritize Work/Life Balance 🌟
+
+Hey LinkedIn! Let's talk about balancing work and life. 🕒🌿
+
+Key Points:
+
+More Balance = More Productivity 📈
+Breaks Boost Creativity 💡
+Good for Health and Relationships 🧘‍♂️🤝
+Let's create a culture where productivity and well-being go hand in hand. 🚀
+
+Your strategies for balance? Comment below! 👇
+
+#WorkLifeBalance #Productivity #WellBeing`,
+            Expand: `🌟 Navigating the Tightrope of Work/Life Balance 🌟
+
+Greetings, LinkedIn community! 👋 In the midst of our bustling professional lives, there's a silent chord that often goes unnoticed: the delicate balance between work and personal life. Today, let's explore why nurturing this balance is not just beneficial, but essential. 🌐⚖️
+
+The digital age has dissolved traditional boundaries, making it challenging to separate 'office hours' from 'personal time'. But here's why finding that equilibrium is crucial:
+
+Enhances Productivity: It’s a myth that more hours equal more productivity. Studies show that well-rested, balanced individuals are more efficient and driven. Reducing burnout isn’t just good for employees; it’s smart business. 📊
+
+Fuels Creativity and Innovation: Ever noticed how your best ideas often come during downtime? A mind at ease is a breeding ground for creativity and innovation. Diverse experiences and restful breaks can lead to breakthroughs in problem-solving and creativity. 🎨
+
+Improves Physical and Mental Health: Chronic stress, a byproduct of overwork, can lead to serious health issues. Balancing work and life is crucial for mental clarity, emotional well-being, and physical health. It's about working smarter, not harder. 🌿
+
+Strengthens Personal Relationships: Our relationships define us. Spending quality time with family and friends rejuvenates our spirits and gives us a sense of belonging and support. Remember, no one on their deathbed ever wished they'd spent more time at the office. 👪
+
+Enhances Job Satisfaction: Employees who feel they have a good balance between their work and personal lives often feel more satisfied with their jobs and less likely to leave. This reduces turnover and builds a more loyal and content workforce. 💼
+
+As professionals, entrepreneurs, or leaders, it's crucial to model and encourage a culture that values this balance. Let's cultivate environments where productivity thrives alongside personal well-being. 🚀
+
+I'd love to hear from you! How do you maintain a healthy work/life balance? What strategies have you found effective? Let's share and learn from each other. Your insights are valuable! Comment below! 👇
+
+#WorkLifeBalance #MentalHealth #Leadership #Productivity #HealthyLiving`,
+            German: `🌟 Die Bedeutung von Arbeit/Lebens-Balance 🌟
+
+Hallo LinkedIn-Welt! 👋 Lasst uns heute über etwas Wichtiges sprechen: die Balance zwischen Arbeit und Leben. 🕒🌿
+
+In unserer schnelllebigen Welt ist es entscheidend, unser Berufs- und Privatleben auszugleichen. Es geht nicht nur darum, Zeit zu managen, sondern auch um die Pflege unserer geistigen und körperlichen Gesundheit. ⚖️
+
+Warum ist diese Balance so wichtig?
+
+Steigert die Produktivität: Weniger Burnout, mehr Motivation. 📈
+Fördert die Kreativität: Neue Erfahrungen wecken innovative Ideen. 💡
+Fördert die Gesundheit: Reduziert Stress für besseres Wohlbefinden. 🧘‍♂️
+Stärkt Beziehungen: Qualität der Zeit ist wichtig. 🤝
+Lasst uns eine Kultur fördern, in der wir Produktivität und persönliches Wohlbefinden gleichermaßen wertschätzen. 🚀
+
+Wie erreicht ihr ein harmonisches Gleichgewicht zwischen Arbeit und Leben? Teilt eure Gedanken unten! 👇
+
+#ArbeitsLebensBalance #Produktivität #Gesundheit #Führung`,
+            Spanish: `🌟 Abrazando el Equilibrio entre Trabajo y Vida Personal 🌟
+
+¡Hola, mundo de LinkedIn! 👋 Hoy hablemos de algo vital: el equilibrio entre trabajo y vida personal. 🕒🌿
+
+En nuestro mundo de ritmo acelerado, equilibrar nuestras vidas profesionales y personales es clave. No se trata solo de gestionar el tiempo, sino también de cuidar nuestra salud mental y física. ⚖️
+
+¿Por qué es esencial este equilibrio?
+
+Impulsa la Productividad: Menos agotamiento, más motivación. 📈
+Alimenta la Creatividad: Nuevas experiencias despiertan ideas innovadoras. 💡
+Promueve la Salud: Reduce el estrés para un mejor bienestar general. 🧘‍♂️
+Fortalece las Relaciones: El tiempo de calidad importa. 🤝
+Fomentemos una cultura donde valoremos la productividad y el bienestar personal por igual. 🚀
+
+¿Cómo logras armonía entre trabajo y vida personal? ¡Comparte tus pensamientos abajo! 👇
+
+#EquilibrioTrabajoVida #Productividad #Salud #Liderazgo`,
+            Formal: `The Imperative of Work/Life Balance in Professional Excellence
+
+Greetings, Esteemed LinkedIn Colleagues,
+
+In our rapidly evolving professional landscape, I wish to highlight an increasingly crucial aspect: the work/life balance. This equilibrium is not merely a concept but a fundamental practice that significantly impacts our productivity, creativity, health, and interpersonal relationships.
+
+Key Points to Consider:
+
+Enhanced Productivity: Studies reveal that well-balanced professionals demonstrate higher efficiency and motivation.
+Stimulation of Creativity: Diverse experiences outside of work foster innovative thinking and problem-solving skills.
+Health and Well-being: A balanced approach to work and life is instrumental in reducing stress-related ailments, thereby promoting both mental and physical health.
+Robust Relationships: Allocating time for personal relationships is critical for emotional support and overall life satisfaction.
+It is incumbent upon us as leaders and professionals to advocate for and implement policies that support work/life balance. This practice is not only beneficial for individual employees but is also conducive to the long-term success of our organizations.
+
+I invite you to share your insights and strategies on achieving an optimal work/life balance.
+
+Best Regards,
+
+[Your Name]
+
+#WorkLifeBalance #ProfessionalDevelopment #Leadership #WellBeing`,
+            Casual: `🌟 Let's Talk Work-Life Balance 🌟
+
+Hey LinkedIn fam! 👋 Quick chat: how's your work-life balance doing? 🤔
+
+Here's the deal: balancing work and play isn't just nice, it's necessary! 🎯
+
+Why, you ask?
+
+Work Smarter, Not Harder: Too much work = burnout. Taking breaks = getting more done. 🚀
+Hello, Creativity: Ever get great ideas while chilling? That's what I'm talking about! 💡
+Stay Healthy: All work and no play makes us stressed and tired. Who wants that? 🏋️‍♂️
+Family and Friends Time: Remember them? Yeah, they're important. 🤗
+So, let's make work-life balance cool again! What's your secret to keeping things chill? Drop a comment! ⬇️
+
+#RealTalk #WorkLifeChill #BalanceIsKey #StayCool`,
+            Neutral: `Understanding the Importance of Work/Life Balance
+
+In the professional realm, it's important to acknowledge the significance of work/life balance. This concept isn't just about dividing time between work and personal life; it's about achieving an equilibrium that supports both professional responsibilities and personal well-being.
+
+Key Points:
+
+Productivity: A balanced approach often leads to sustained productivity levels.
+Creativity: Diverse experiences outside of work can enhance problem-solving and innovation.
+Health: Managing work stress is crucial for maintaining both mental and physical health.
+Relationships: Allocating time for personal relationships is essential for a well-rounded life.
+Creating a work environment that values balance can contribute to both employee satisfaction and organizational success.
+
+Thoughts on maintaining work/life balance are welcome in the comments.
+
+#WorkLifeBalance #ProfessionalDevelopment #EmployeeWellbeing`,
+        },
+    },
+    {
+        suggestion: linkedInPost + "retry",
+        response: `🌟 Embracing Work-Life Balance: Key to Well-Being 🌟
+
+In today's fast-paced world, maintaining a work-life balance is crucial. It's not just beneficial – it's essential.
+
+🚀 Why Important?
+
+Boosts Productivity: Rest leads to higher creativity and problem-solving.
+Enhances Well-being: Prevents burnout, promoting physical and mental health.
+Improves Relationships: Ensures time for family and friends.
+👩‍💻 Achieving It:
+
+Set Boundaries: Define work hours to separate professional and personal life.
+Prioritize Tasks: Focus on what's urgent to manage time effectively.
+Take Breaks: Essential for mental refreshment and perspective.
+Embrace Flexibility: Use flexible working options for a balanced day.
+Let's strive for balance to ensure sustained success and happiness.
+
+#WorkLifeBalance #Productivity #MentalHealth`,
+        commands: {
+            Simplify: `🌟 Prioritize Work-Life Balance 🌟
+
+Balancing work and life is key to success and well-being.
+
+👍 Benefits:
+
+Boosts Productivity: Rest enhances creativity.
+Improves Well-being: Prevents burnout.
+Strengthens Relationships: Ensures time for loved ones.
+🛠️ Tips:
+
+Set Boundaries: Keep work and personal life separate.
+Prioritize & Take Breaks: Manage time well, recharge often.
+Flexibility: Adapt work schedules for balance.
+Balance leads to happiness and success!
+
+#WorkLifeBalance #Productivity #WellBeing`,
+            Expand: `🌟 Prioritize Work-Life Balance 🌟
+
+Balancing work and life is key to success and well-being.
+
+👍 Benefits:
+
+Boosts Productivity: Rest enhances creativity.
+Improves Well-being: Prevents burnout.
+Strengthens Relationships: Ensures time for loved ones.
+🛠️ Tips:
+
+Set Boundaries: Keep work and personal life separate.
+Prioritize & Take Breaks: Manage time well, recharge often.
+Flexibility: Adapt work schedules for balance.
+Balance leads to happiness and success!
+
+#WorkLifeBalance #Productivity #WellBeing`,
+            German: `🌟 Die Bedeutung von Work-Life-Balance: Schlüssel zum Wohlbefinden 🌟
+
+In unserer schnelllebigen Welt ist die Aufrechterhaltung einer Work-Life-Balance entscheidend. Sie ist nicht nur vorteilhaft – sie ist essentiell.
+
+🚀 Warum ist sie wichtig?
+
+Steigert die Produktivität: Ruhe führt zu höherer Kreativität und Problemlösungsfähigkeit.
+Verbessert das Wohlbefinden: Beugt Burnout vor und fördert die physische und psychische Gesundheit.
+Verbessert Beziehungen: Garantiert Zeit für Familie und Freunde.
+👩‍💻 Erreichen:
+
+Grenzen setzen: Arbeitszeiten definieren, um Berufs- und Privatleben zu trennen.
+Aufgaben priorisieren: Konzentration auf das Dringende, um Zeit effektiv zu verwalten.
+Pausen nehmen: Wesentlich für geistige Erfrischung und Perspektive.
+Flexibilität nutzen: Flexible Arbeitsmöglichkeiten für einen ausgeglichenen Tag nutzen.
+Lasst uns für ein Gleichgewicht streben, um nachhaltigen Erfolg und Glück zu sichern.
+
+#WorkLifeBalance #Produktivität #MentalHealth`,
+            Spanish: `🌟 Abrazando el Equilibrio Entre Trabajo y Vida Personal: Clave para el Bienestar 🌟
+
+En el mundo acelerado de hoy, mantener un equilibrio entre trabajo y vida personal es crucial. No solo es beneficioso, es esencial.
+
+🚀 ¿Por Qué es Importante?
+
+Aumenta la Productividad: El descanso conduce a una mayor creatividad y resolución de problemas.
+Mejora el Bienestar: Previene el agotamiento, promoviendo la salud física y mental.
+Mejora las Relaciones: Asegura tiempo para la familia y amigos.
+👩‍💻 Cómo Lograrlo:
+
+Establecer Límites: Definir horas de trabajo para separar la vida profesional y personal.
+Priorizar Tareas: Enfocarse en lo urgente para gestionar el tiempo de manera efectiva.
+Tomar Descansos: Esencial para el refresco mental y la perspectiva.
+Abrazar la Flexibilidad: Utilizar opciones de trabajo flexible para un día equilibrado.
+Esforcémonos por el equilibrio para asegurar el éxito y la felicidad sostenidos.
+
+#EquilibrioTrabajoVida #Productividad #SaludMental`,
+            Formal: `The Imperative of Work-Life Balance for Professional Success and Personal Well-being
+
+In the realm of modern professional endeavors, the significance of maintaining an equilibrium between work and personal life cannot be overstated. This balance is not merely a luxury but an essential component for long-term success and well-being.
+
+Key Reasons for Emphasizing Work-Life Balance:
+
+Enhanced Productivity: Adequate rest and detachment from work-related tasks catalyze creativity and effective problem-solving capabilities.
+Improved Health and Well-being: A well-balanced lifestyle is instrumental in preventing occupational burnout, thereby safeguarding both mental and physical health.
+Strengthened Personal Relationships: Allocating time for personal relationships is crucial for emotional support and overall life satisfaction.
+Strategies for Cultivating Balance:
+
+Implementing Clear Boundaries: Establishing definitive work hours is essential to distinguish professional responsibilities from personal time.
+Effective Prioritization of Tasks: Identifying and addressing urgent tasks efficiently is key to managing workload and reducing stress.
+Incorporating Regular Breaks: Breaks are fundamental for mental rejuvenation, offering new perspectives, particularly in challenging situations.
+Utilizing Flexible Work Arrangements: Flexibility in work schedules can significantly contribute to a harmonious daily routine, accommodating both career and personal commitments.
+In conclusion, work-life balance is a pivotal factor in achieving sustained professional success and personal fulfillment. It requires conscious and continual efforts to integrate effectively into our daily lives.
+
+#ProfessionalDevelopment #WorkLifeBalance #EmployeeWellbeing #CareerSuccess
+
+            `,
+            Casual: `Hey everyone 👋,
+
+Just wanted to drop a quick note about something I've been thinking a lot about lately: work-life balance. 🌈
+
+Let's face it, we're often caught up in the hustle, but have you noticed how taking a step back actually makes you more productive? Yep, it's true! 🚀 A little break can spark some serious creativity.
+
+Here's the deal:
+
+Work Smart: It's not about working non-stop, it's about working efficiently. 🧠
+Health is Wealth: Avoid burnout, folks! Your mind and body will thank you. 💪
+Family & Friends Time: Because life's too short to miss out on fun moments. 🥳
+Tips to keep it balanced:
+
+Draw the Line: Work time is work time, chill time is chill time. 🕒
+What's Important?: Not everything is urgent. Prioritize! ✅
+Breaks are Bae: Short walks, coffee breaks, vacations - they all count. 🏖️
+Flexi is Sexy: Flexi-hours or work-from-home can be a game-changer. 💻
+So, let's keep it balanced and rock our work and personal lives! 🎸
+
+#WorkLifeBalance #StayProductive #StayHealthy`,
+            Neutral: `Maintaining Work-Life Balance: Essential for Sustainable Success
+
+In the current professional landscape, achieving a work-life balance is increasingly recognized as a key factor for long-term success and well-being.
+
+Why Work-Life Balance Matters?
+
+Enhances Productivity: Regular breaks and downtime can lead to improved focus and efficiency.
+Supports Health: Balancing work and personal life helps prevent burnout and promotes overall well-being.
+Strengthens Personal Relationships: Allocating time outside work nurtures important personal connections.
+Strategies for Achieving Balance:
+
+Set Clear Boundaries: Establish specific work hours to ensure personal time remains undisturbed.
+Prioritize Effectively: Distinguish between urgent and less critical tasks to manage workload efficiently.
+Regular Breaks: Incorporating short breaks and vacation time is vital for mental and physical rejuvenation.
+Flexible Working Arrangements: Where possible, utilize flexibility in work schedules to accommodate personal needs.
+Work-life balance is a continuous, individual process and is crucial for maintaining long-term professional and personal health.
+
+#WorkLifeBalance #ProfessionalDevelopment #HealthAndWellness`,
+        },
+    },
+];
diff --git a/vue-options-api-demos/conversational-ui/ai-prompt/overview/main.js b/vue-options-api-demos/conversational-ui/ai-prompt/overview/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/conversational-ui/ai-prompt/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/conversational-ui/ai-prompt/overview/main.vue b/vue-options-api-demos/conversational-ui/ai-prompt/overview/main.vue
new file mode 100644
index 00000000..d1b73ef2
--- /dev/null
+++ b/vue-options-api-demos/conversational-ui/ai-prompt/overview/main.vue
@@ -0,0 +1,188 @@
+<template>
+  <div class="profile-demo card-container">
+    <div class="k-card custom-card">
+      <div class="card-row">
+        <div class="card-column no-flex">
+          <div class="sidebar-container k-skeleton">
+            <div class="description-container">
+              <div class="k-skeleton skeleton-small-text"></div>
+              <div class="k-skeleton skeleton-small-text"></div>
+              <div class="k-skeleton skeleton-small-text"></div>
+            </div>
+          </div>
+        </div>
+        <div class="card-column">
+          <div class="avatar-title-container">
+            <div class="k-skeleton skeleton-avatar"></div>
+            <h4 class="k-h4">New E-mail</h4>
+          </div>
+          <div class="skeleton-container top">
+            <div class="k-skeleton skeleton-box-small"></div>
+            <div class="k-skeleton skeleton-box-large"></div>
+            <div class="k-skeleton skeleton-box-large"></div>
+          </div>
+          <div class="component-container">
+            <KTextArea :style="{ height: '300px' }" :value="textAreaValue" />
+            <FloatingActionButton
+              :style="{ zIndex: 2 }"
+              ref="button"
+              :svgIcon="fabIcon"
+              :align="{
+                horizontal: 'end',
+                vertical: 'bottom',
+              }"
+              :alignOffset="{
+                x: 40,
+                y: 40,
+              }"
+              :positionMode="'absolute'"
+              @click="toggleAIPrompt"
+            />
+            <Popup
+              :anchor="'button'"
+              :show="showAIPrompt"
+              :direction="'up'"
+              :popupAlign="{ vertical: 'bottom', horizontal: 'right' }"
+              :anchorAlign="{ vertical: 'bottom', horizontal: 'left' }"
+            >
+              <AIPrompt
+                v-if="showAIPrompt"
+                :style="{ width: '400px', height: '400px' }"
+                :activeView="activeView"
+                @activeviewchange="handleActiveViewChange"
+                @promptrequest="handleOnRequest"
+                @commandexecute="handleCommandExecute"
+                :toolbarItems="[promptViewDefaults, outputViewDefaults]"
+              >
+                <AIPromptView :promptSuggestions="suggestionsList" />
+                <AIPromptOutputView :outputs="outputs" />
+              </AIPrompt>
+            </Popup>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  AIPrompt,
+  AIPromptOutputView,
+  AIPromptView,
+  outputViewDefaults,
+  promptViewDefaults,
+} from "@progress/kendo-vue-conversational-ui";
+import { Popup } from "@progress/kendo-vue-popup";
+import { TextArea as KTextArea } from "@progress/kendo-vue-inputs";
+import { xIcon, sparklesIcon } from "@progress/kendo-svg-icons";
+import { FloatingActionButton } from "@progress/kendo-vue-buttons";
+import "./overview-styles.css";
+
+import {
+  suggestionsList,
+  suggestionsResponse,
+  unknownRequest,
+} from "./ai-data";
+
+export default {
+  components: {
+    AIPrompt,
+    AIPromptOutputView,
+    AIPromptView,
+    Popup,
+    KTextArea,
+    FloatingActionButton,
+  },
+  data: function () {
+    return {
+      suggestionsList,
+      suggestionsResponse,
+      unknownRequest,
+      outputViewDefaults,
+      promptViewDefaults,
+      textAreaValue: "",
+      localPrompt: "",
+      showAIPrompt: false,
+      activeView: promptViewDefaults.name,
+      outputs: [],
+    };
+  },
+  computed: {
+    fabIcon() {
+      return this.showAIPrompt ? xIcon : sparklesIcon;
+    },
+  },
+  methods: {
+    toggleAIPrompt() {
+      this.showAIPrompt = !this.showAIPrompt;
+    },
+    handleOnRequest(prompt, output) {
+      if (!prompt) {
+        return;
+      }
+
+      if (output && output?.isRetry) {
+        const responseContent = this.getSuggestion(prompt + "retry");
+        this.textAreaValue = responseContent?.response || unknownRequest;
+        this.outputs = [
+          {
+            id: this.outputs.length + 1,
+            title: prompt,
+            responseContent: responseContent?.response || unknownRequest,
+            prompt,
+          },
+          ...this.outputs,
+        ];
+      } else if (output && output?.ratingType) {
+        const ratingOutput = this.outputs.map((item) => {
+          return output.id === item.id
+            ? { ...item, ratingType: output.ratingType }
+            : item;
+        });
+        this.outputs = ratingOutput;
+      } else {
+        const responseContent = this.getSuggestion(prompt);
+        this.textAreaValue = responseContent?.response || unknownRequest;
+        this.outputs = [
+          {
+            id: this.outputs.length + 1,
+            title: prompt,
+            responseContent: responseContent?.response || unknownRequest,
+            prompt,
+          },
+          ...this.outputs,
+        ];
+      }
+
+      this.localPrompt = prompt;
+      this.activeView = outputViewDefaults.name;
+    },
+    handleActiveViewChange(viewName) {
+      this.activeView = viewName;
+    },
+    handleCommandExecute(commandData) {
+      const responseItem = this.getSuggestion(this.localPrompt || "");
+      const commandText = commandData.text;
+      this.outputs = [
+        {
+          id: this.outputs.length + 1,
+          title: this.localPrompt,
+          subTitle: commandData.text,
+          responseContent:
+            (responseItem?.commands && responseItem.commands[commandText]) ||
+            unknownRequest,
+          prompt: this.localPrompt,
+        },
+        ...outputs,
+      ];
+
+      this.activeView = outputViewDefaults.name;
+    },
+    getSuggestion(prompt) {
+      return suggestionsResponse.find((item) => {
+        return item.suggestion === prompt && item;
+      });
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/conversational-ui/ai-prompt/overview/overview-styles.css b/vue-options-api-demos/conversational-ui/ai-prompt/overview/overview-styles.css
new file mode 100644
index 00000000..4f8394d4
--- /dev/null
+++ b/vue-options-api-demos/conversational-ui/ai-prompt/overview/overview-styles.css
@@ -0,0 +1,159 @@
+.profile-demo.card-container {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+  }
+  
+  .profile-demo .custom-card {
+    padding: 32px;
+    width: 780px;
+    height: 490px;
+    gap: 32px;
+    border-radius: 4px 4px 0 0;
+    box-shadow: 0 0 12px 4px rgba(0, 0, 0, 0.08);
+  }
+  
+  .profile-demo .card-row {
+    display: flex;
+    gap: 32px;
+  }
+  
+  .profile-demo .card-column {
+    flex: 1;
+  }
+  
+  .profile-demo .no-flex {
+    flex: 0;
+  }
+  
+  .profile-demo .sidebar-container,
+  .profile-demo .description-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .profile-demo .sidebar-container {
+    padding: 30px 20px;
+    width: 180px;
+    height: 425px;
+    gap: 50px;
+  }
+  
+  .profile-demo .description-container {
+    width: 100%;
+    gap: 15px;
+  }
+  
+  .profile-demo .k-skeleton {
+    border-radius: 4px;
+    opacity: 0.4;
+  }
+  
+  .profile-demo .sidebar-container .k-skeleton {
+    opacity: 0.8;
+  }
+  
+  .profile-demo .skeleton-avatar {
+    width: 72px;
+    height: 72px;
+    border-radius: 50%;
+  }
+  
+  .profile-demo .skeleton-text {
+    width: 104px;
+    height: 15px;
+  }
+  
+  .profile-demo .skeleton-small-text {
+    width: 100%;
+    height: 10px;
+  }
+  
+  .profile-demo .skeleton-box-small {
+    width: 124px;
+    height: 15px;
+  }
+  
+  .profile-demo .skeleton-box-large {
+    width: 100%;
+    height: 30px;
+  }
+  
+  .profile-demo .skeleton-container {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+  
+  .profile-demo .avatar-title-container {
+    margin-bottom: 14px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+  
+  .profile-demo .avatar-title-container .skeleton-avatar {
+    width: 48px;
+    height: 48px;
+    display: none;
+  }
+  
+  .profile-demo .top {
+    margin-bottom: 15px;
+  }
+  
+  .profile-demo .k-h4 {
+    margin-bottom: 0;
+    opacity: 0.2;
+  }
+  
+  @media only screen and (max-width: 559px) {
+    .profile-demo .card-column.no-flex {
+      display: none !important;
+    }
+  
+    .profile-demo .avatar-title-container .skeleton-avatar {
+      display: block;
+    }
+  
+    .profile-demo .custom-card {
+      width: 360px;
+      gap: 48px;
+    }
+  }
+  
+  @media only screen and (max-width: 359px) {
+    .profile-demo .custom-card {
+      padding: 24px;
+    }
+  
+    .profile-demo .k-h4 {
+      font-size: 20px;
+    }
+  
+    .profile-demo .avatar-title-container .skeleton-avatar {
+      width: 32px;
+      height: 32px;
+    }
+  }
+  
+  .k-prompt {
+    width: 330px;
+    max-height: 470px;
+  }
+  
+  .k-popup .k-prompt .k-card-subtitle {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  
+  .k-input-suffix .k-button {
+    margin: 0px 10px 10px;
+  }
+  
+  .k-popup .k-prompt .k-card-body {
+    white-space: pre-line;
+  }
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/conversational-ui/ai-prompt/suggestions/ai-data.js b/vue-options-api-demos/conversational-ui/ai-prompt/suggestions/ai-data.js
new file mode 100644
index 00000000..99cd4af6
--- /dev/null
+++ b/vue-options-api-demos/conversational-ui/ai-prompt/suggestions/ai-data.js
@@ -0,0 +1,535 @@
+import {
+    brushIcon,
+    editToolsIcon,
+    minWidthIcon,
+    arrowsLeftRightIcon,
+} from "@progress/kendo-svg-icons";
+
+/* eslint-disable max-len */
+
+export const unknownRequest =
+    "The request cannot be processed at this time. Please excuse us for the inconvenience.";
+
+export const promptCommands = [
+    {
+        id: "1",
+        text: "Change Formality",
+        svgIcon: brushIcon,
+        children: [
+            {
+                id: "1_1",
+                text: "Casual",
+            },
+            {
+                id: "1_2",
+                text: "Neutral",
+            },
+            {
+                id: "1_3",
+                text: "Formal",
+            },
+        ],
+    },
+    {
+        id: "2",
+        text: "Translate",
+        svgIcon: editToolsIcon,
+        children: [
+            {
+                id: "2_1",
+                text: "German",
+            },
+            {
+                id: "2_2",
+                text: "Spanish",
+            },
+        ],
+    },
+    {
+        id: "3",
+        text: "Simplify",
+        svgIcon: minWidthIcon,
+    },
+    {
+        id: "4",
+        text: "Expand",
+        svgIcon: arrowsLeftRightIcon,
+    },
+];
+
+const outOfOffice = "Generate an Out of Office email.";
+
+const linkedInPost =
+    "Write a LinkedIn post for the importance of work/life balance.";
+
+export const suggestionsList = [outOfOffice, linkedInPost];
+
+export const suggestionsResponse = [
+    {
+        suggestion: outOfOffice,
+        response: `Subject: Out of Office: [Your Name]
+
+Dear [Recipient's Name],
+
+I am currently out of the office until [Return Date] and won't have access to email. For urgent matters, please contact [Colleague's Name] at [Colleague's Email]. I'll respond to your email upon my return.
+
+Thank you,
+[Your Name]`,
+        commands: {
+            Simplify: `Subject: Out of Office Until [Return Date]
+
+I'm out of the office with limited email access. For urgent issues, contact [Colleague's Name] at [Colleague's Email]. Back on [Return Date].
+
+Thanks,
+[Your Name]`,
+            Expand: `Subject: Out of Office: [Your Name]
+
+Dear [Recipient's Name],
+
+I hope this email finds you well. I am writing to inform you that I will be out of the office from [Start Date] and will not be returning until [Return Date]. During this period, I will have limited access to my email and will not be able to respond promptly.
+
+For any immediate concerns or assistance, please do not hesitate to reach out to my colleague, [Colleague's Name], at [Colleague's Email Address]. They are well-informed about my projects and can provide the necessary support during my absence.
+
+I appreciate your understanding and apologize for any inconvenience my absence may cause. Rest assured that I will attend to all pending emails and follow up on any outstanding matters as soon as I return to the office.
+
+Thank you for your cooperation and patience. I look forward to connecting with you once I am back.
+
+Warm regards,
+
+[Your Name]
+[Your Position]
+[Your Company]
+[Your Contact Information]`,
+            German: `Subject: Abwesenheitsnotiz: [Ihr Name]
+
+Sehr geehrte/r [Empfängername],
+
+ich bin bis zum [Rückkehrdatum] außer Haus und habe keinen Zugriff auf meine E-Mails. Bei dringenden Angelegenheiten kontaktieren Sie bitte [Name des Kollegen] unter [E-Mail-Adresse des Kollegen]. Ich werde Ihre E-Mail nach meiner Rückkehr beantworten.
+
+Danke,
+[Ihr Name]`,
+            Spanish: `Asunto: Fuera de la Oficina: [Tu Nombre]
+
+Estimado/a [Nombre del Destinatario],
+
+Actualmente estoy fuera de la oficina hasta el [Fecha de Regreso] y no tendré acceso al correo electrónico. Para asuntos urgentes, por favor contacta a [Nombre del Colega] en [Correo Electrónico del Colega]. Responderé a tu correo a mi regreso.
+
+Gracias,
+[Tu Nombre]`,
+            Formal: `Subject: Out of Office Notification: [Your Name]
+
+Dear [Recipient's Name],
+
+Please be informed that I will be absent from the office from [Start Date] and shall return on [Return Date]. During this interval, I shall not be accessible via email.
+
+For urgent inquiries, kindly direct your correspondence to [Colleague's Name] at [Colleague's Email Address]. I assure you that upon my return, I will attend to all pending communications with the utmost promptness.
+
+Thank you for your understanding.
+
+Sincerely,
+
+[Your Name]
+[Your Position]
+[Your Company]
+[Contact Information]`,
+            Casual: `Subject: Stepping Out for a Bit - [Your Name]
+
+Hey [Recipient's Name],
+
+Just a heads-up, I'm out of the office until [Return Date] and won’t be checking emails. If something urgent comes up, reach out to [Colleague's Name] at [Colleague's Email]. I’ll catch up on all emails when I'm back!
+
+Cheers,
+[Your Name]`,
+            Neutral: `Subject: Out of Office: [Your Name]
+
+Dear [Recipient's Name],
+
+I am out of the office until [Return Date] and will not have access to email. For urgent issues, please contact [Colleague's Name] at [Colleague's Email]. Your email will be addressed upon my return.
+
+Regards,
+[Your Name]`,
+        },
+    },
+    {
+        suggestion: outOfOffice + "retry",
+        response: `Subject: Out of Office: [Your Name]
+
+Dear [Recipient's Name],
+
+I am currently out of the office until [Return Date] and have limited email access. For urgent matters, please call me at [Your Phone Number]. Otherwise, I will respond to your email upon my return.
+
+Thank you for your understanding.
+
+Best,
+[Your Name]`,
+        commands: {
+            Simplify: `Subject: Out of Office: [Your Name]
+
+I'm out of the office until [Return Date]. For urgent issues, call [Your Phone Number]. Will respond to emails on my return.
+
+Thanks,
+[Your Name]`,
+            Expand: `Subject: Out of Office: [Your Name]
+
+Dear [Recipient's Name],
+
+Thank you for reaching out. Please note that I am currently out of the office and will not be available until [Return Date]. During this period, my access to email will be limited.
+
+For urgent matters, feel free to contact me directly at [Your Phone Number]. I will do my best to respond promptly. For all other inquiries or immediate assistance, please contact [Colleague's Name] at [Colleague's Email Address], who will be available to provide support in my absence.
+
+I appreciate your understanding and patience during this time. Rest assured, I will address all emails and pending matters as soon as I return to the office.
+
+Warm regards,
+
+[Your Name]
+[Your Position]
+[Your Company]
+[Your Contact Information]`,
+            German: `Subject: Abwesenheitsnotiz: [Ihr Name]
+
+Sehr geehrte/r [Empfängername],
+
+ich bin bis zum [Rückkehrdatum] nicht im Büro und habe eingeschränkten Zugang zu meinen E-Mails. Bei dringenden Angelegenheiten rufen Sie mich bitte unter [Ihre Telefonnummer] an. Andernfalls werde ich nach meiner Rückkehr auf Ihre E-Mail antworten.
+
+Vielen Dank für Ihr Verständnis.
+
+Mit freundlichen Grüßen,
+[Ihr Name]`,
+            Spanish: `Asunto: Fuera de la Oficina: [Tu Nombre]
+
+Estimado/a [Nombre del Destinatario],
+
+Actualmente estoy fuera de la oficina hasta el [Fecha de Regreso] y tengo acceso limitado al correo electrónico. Para asuntos urgentes, por favor llámame al [Tu Número de Teléfono]. De lo contrario, responderé a tu correo electrónico a mi regreso.
+
+Gracias por tu comprensión.
+
+Saludos,
+[Tu Nombre]`,
+            Formal: `Subject: Temporary Absence from Office: [Your Name]
+
+Dear [Recipient's Name],
+
+I trust this message finds you in good health. Please be advised that I am currently out of the office and will not return until [Return Date]. During this period, my access to email will be significantly restricted.
+
+In cases of urgent matters, I kindly request that you contact me directly via telephone at [Your Phone Number]. For all other inquiries, I assure you they will be addressed promptly upon my return.
+
+I appreciate your understanding and apologize for any inconvenience this may cause.
+
+Yours sincerely,
+
+[Your Name]
+[Your Position]
+[Your Company]
+[Contact Information]`,
+            Casual: `Subject: Stepping Out for a Bit - [Your Name]
+
+Hey [Recipient's Name],
+
+Just a quick heads up – I'm out of the office until [Return Date] and might not be checking emails much. If something urgent pops up, just give me a ring at [Your Phone Number]. Otherwise, I'll catch up on emails when I'm back.
+
+Thanks for understanding!
+
+Cheers,
+[Your Name]`,
+            Neutral: `Subject: Out of Office: [Your Name]
+
+Dear [Recipient's Name],
+
+I am out of the office until [Return Date] with limited email access. For urgent matters, please call [Your Phone Number]. I will respond to your email upon my return.
+
+Regards,
+[Your Name]`,
+        },
+    },
+    {
+        suggestion: linkedInPost,
+        response: `🌟 Embracing Work/Life Balance for Success 🌟
+
+Hello LinkedIn network! 👋 Today, let's talk about a key to our well-being: work/life balance. 🌐⚖️
+
+In our fast-paced world, balancing professional and personal life is not just a luxury, it's a necessity for health and productivity. 📈🌿
+
+✨ Key Points ✨
+
+Enhances Productivity: Less burnout, more motivation. 🚀
+Boosts Creativity: New experiences = fresh ideas. 💡
+Improves Health: Mental and physical benefits. 🧘‍♂️
+Strengthens Relationships: Quality time matters. 🤝
+Let's champion a culture where success and well-being go hand in hand. Share your work/life balance tips below! 👇
+
+#WorkLifeBalance #Productivity #WellBeing`,
+        commands: {
+            Simplify: `🌟 Prioritize Work/Life Balance 🌟
+
+Hey LinkedIn! Let's talk about balancing work and life. 🕒🌿
+
+Key Points:
+
+More Balance = More Productivity 📈
+Breaks Boost Creativity 💡
+Good for Health and Relationships 🧘‍♂️🤝
+Let's create a culture where productivity and well-being go hand in hand. 🚀
+
+Your strategies for balance? Comment below! 👇
+
+#WorkLifeBalance #Productivity #WellBeing`,
+            Expand: `🌟 Navigating the Tightrope of Work/Life Balance 🌟
+
+Greetings, LinkedIn community! 👋 In the midst of our bustling professional lives, there's a silent chord that often goes unnoticed: the delicate balance between work and personal life. Today, let's explore why nurturing this balance is not just beneficial, but essential. 🌐⚖️
+
+The digital age has dissolved traditional boundaries, making it challenging to separate 'office hours' from 'personal time'. But here's why finding that equilibrium is crucial:
+
+Enhances Productivity: It’s a myth that more hours equal more productivity. Studies show that well-rested, balanced individuals are more efficient and driven. Reducing burnout isn’t just good for employees; it’s smart business. 📊
+
+Fuels Creativity and Innovation: Ever noticed how your best ideas often come during downtime? A mind at ease is a breeding ground for creativity and innovation. Diverse experiences and restful breaks can lead to breakthroughs in problem-solving and creativity. 🎨
+
+Improves Physical and Mental Health: Chronic stress, a byproduct of overwork, can lead to serious health issues. Balancing work and life is crucial for mental clarity, emotional well-being, and physical health. It's about working smarter, not harder. 🌿
+
+Strengthens Personal Relationships: Our relationships define us. Spending quality time with family and friends rejuvenates our spirits and gives us a sense of belonging and support. Remember, no one on their deathbed ever wished they'd spent more time at the office. 👪
+
+Enhances Job Satisfaction: Employees who feel they have a good balance between their work and personal lives often feel more satisfied with their jobs and less likely to leave. This reduces turnover and builds a more loyal and content workforce. 💼
+
+As professionals, entrepreneurs, or leaders, it's crucial to model and encourage a culture that values this balance. Let's cultivate environments where productivity thrives alongside personal well-being. 🚀
+
+I'd love to hear from you! How do you maintain a healthy work/life balance? What strategies have you found effective? Let's share and learn from each other. Your insights are valuable! Comment below! 👇
+
+#WorkLifeBalance #MentalHealth #Leadership #Productivity #HealthyLiving`,
+            German: `🌟 Die Bedeutung von Arbeit/Lebens-Balance 🌟
+
+Hallo LinkedIn-Welt! 👋 Lasst uns heute über etwas Wichtiges sprechen: die Balance zwischen Arbeit und Leben. 🕒🌿
+
+In unserer schnelllebigen Welt ist es entscheidend, unser Berufs- und Privatleben auszugleichen. Es geht nicht nur darum, Zeit zu managen, sondern auch um die Pflege unserer geistigen und körperlichen Gesundheit. ⚖️
+
+Warum ist diese Balance so wichtig?
+
+Steigert die Produktivität: Weniger Burnout, mehr Motivation. 📈
+Fördert die Kreativität: Neue Erfahrungen wecken innovative Ideen. 💡
+Fördert die Gesundheit: Reduziert Stress für besseres Wohlbefinden. 🧘‍♂️
+Stärkt Beziehungen: Qualität der Zeit ist wichtig. 🤝
+Lasst uns eine Kultur fördern, in der wir Produktivität und persönliches Wohlbefinden gleichermaßen wertschätzen. 🚀
+
+Wie erreicht ihr ein harmonisches Gleichgewicht zwischen Arbeit und Leben? Teilt eure Gedanken unten! 👇
+
+#ArbeitsLebensBalance #Produktivität #Gesundheit #Führung`,
+            Spanish: `🌟 Abrazando el Equilibrio entre Trabajo y Vida Personal 🌟
+
+¡Hola, mundo de LinkedIn! 👋 Hoy hablemos de algo vital: el equilibrio entre trabajo y vida personal. 🕒🌿
+
+En nuestro mundo de ritmo acelerado, equilibrar nuestras vidas profesionales y personales es clave. No se trata solo de gestionar el tiempo, sino también de cuidar nuestra salud mental y física. ⚖️
+
+¿Por qué es esencial este equilibrio?
+
+Impulsa la Productividad: Menos agotamiento, más motivación. 📈
+Alimenta la Creatividad: Nuevas experiencias despiertan ideas innovadoras. 💡
+Promueve la Salud: Reduce el estrés para un mejor bienestar general. 🧘‍♂️
+Fortalece las Relaciones: El tiempo de calidad importa. 🤝
+Fomentemos una cultura donde valoremos la productividad y el bienestar personal por igual. 🚀
+
+¿Cómo logras armonía entre trabajo y vida personal? ¡Comparte tus pensamientos abajo! 👇
+
+#EquilibrioTrabajoVida #Productividad #Salud #Liderazgo`,
+            Formal: `The Imperative of Work/Life Balance in Professional Excellence
+
+Greetings, Esteemed LinkedIn Colleagues,
+
+In our rapidly evolving professional landscape, I wish to highlight an increasingly crucial aspect: the work/life balance. This equilibrium is not merely a concept but a fundamental practice that significantly impacts our productivity, creativity, health, and interpersonal relationships.
+
+Key Points to Consider:
+
+Enhanced Productivity: Studies reveal that well-balanced professionals demonstrate higher efficiency and motivation.
+Stimulation of Creativity: Diverse experiences outside of work foster innovative thinking and problem-solving skills.
+Health and Well-being: A balanced approach to work and life is instrumental in reducing stress-related ailments, thereby promoting both mental and physical health.
+Robust Relationships: Allocating time for personal relationships is critical for emotional support and overall life satisfaction.
+It is incumbent upon us as leaders and professionals to advocate for and implement policies that support work/life balance. This practice is not only beneficial for individual employees but is also conducive to the long-term success of our organizations.
+
+I invite you to share your insights and strategies on achieving an optimal work/life balance.
+
+Best Regards,
+
+[Your Name]
+
+#WorkLifeBalance #ProfessionalDevelopment #Leadership #WellBeing`,
+            Casual: `🌟 Let's Talk Work-Life Balance 🌟
+
+Hey LinkedIn fam! 👋 Quick chat: how's your work-life balance doing? 🤔
+
+Here's the deal: balancing work and play isn't just nice, it's necessary! 🎯
+
+Why, you ask?
+
+Work Smarter, Not Harder: Too much work = burnout. Taking breaks = getting more done. 🚀
+Hello, Creativity: Ever get great ideas while chilling? That's what I'm talking about! 💡
+Stay Healthy: All work and no play makes us stressed and tired. Who wants that? 🏋️‍♂️
+Family and Friends Time: Remember them? Yeah, they're important. 🤗
+So, let's make work-life balance cool again! What's your secret to keeping things chill? Drop a comment! ⬇️
+
+#RealTalk #WorkLifeChill #BalanceIsKey #StayCool`,
+            Neutral: `Understanding the Importance of Work/Life Balance
+
+In the professional realm, it's important to acknowledge the significance of work/life balance. This concept isn't just about dividing time between work and personal life; it's about achieving an equilibrium that supports both professional responsibilities and personal well-being.
+
+Key Points:
+
+Productivity: A balanced approach often leads to sustained productivity levels.
+Creativity: Diverse experiences outside of work can enhance problem-solving and innovation.
+Health: Managing work stress is crucial for maintaining both mental and physical health.
+Relationships: Allocating time for personal relationships is essential for a well-rounded life.
+Creating a work environment that values balance can contribute to both employee satisfaction and organizational success.
+
+Thoughts on maintaining work/life balance are welcome in the comments.
+
+#WorkLifeBalance #ProfessionalDevelopment #EmployeeWellbeing`,
+        },
+    },
+    {
+        suggestion: linkedInPost + "retry",
+        response: `🌟 Embracing Work-Life Balance: Key to Well-Being 🌟
+
+In today's fast-paced world, maintaining a work-life balance is crucial. It's not just beneficial – it's essential.
+
+🚀 Why Important?
+
+Boosts Productivity: Rest leads to higher creativity and problem-solving.
+Enhances Well-being: Prevents burnout, promoting physical and mental health.
+Improves Relationships: Ensures time for family and friends.
+👩‍💻 Achieving It:
+
+Set Boundaries: Define work hours to separate professional and personal life.
+Prioritize Tasks: Focus on what's urgent to manage time effectively.
+Take Breaks: Essential for mental refreshment and perspective.
+Embrace Flexibility: Use flexible working options for a balanced day.
+Let's strive for balance to ensure sustained success and happiness.
+
+#WorkLifeBalance #Productivity #MentalHealth`,
+        commands: {
+            Simplify: `🌟 Prioritize Work-Life Balance 🌟
+
+Balancing work and life is key to success and well-being.
+
+👍 Benefits:
+
+Boosts Productivity: Rest enhances creativity.
+Improves Well-being: Prevents burnout.
+Strengthens Relationships: Ensures time for loved ones.
+🛠️ Tips:
+
+Set Boundaries: Keep work and personal life separate.
+Prioritize & Take Breaks: Manage time well, recharge often.
+Flexibility: Adapt work schedules for balance.
+Balance leads to happiness and success!
+
+#WorkLifeBalance #Productivity #WellBeing`,
+            Expand: `🌟 Prioritize Work-Life Balance 🌟
+
+Balancing work and life is key to success and well-being.
+
+👍 Benefits:
+
+Boosts Productivity: Rest enhances creativity.
+Improves Well-being: Prevents burnout.
+Strengthens Relationships: Ensures time for loved ones.
+🛠️ Tips:
+
+Set Boundaries: Keep work and personal life separate.
+Prioritize & Take Breaks: Manage time well, recharge often.
+Flexibility: Adapt work schedules for balance.
+Balance leads to happiness and success!
+
+#WorkLifeBalance #Productivity #WellBeing`,
+            German: `🌟 Die Bedeutung von Work-Life-Balance: Schlüssel zum Wohlbefinden 🌟
+
+In unserer schnelllebigen Welt ist die Aufrechterhaltung einer Work-Life-Balance entscheidend. Sie ist nicht nur vorteilhaft – sie ist essentiell.
+
+🚀 Warum ist sie wichtig?
+
+Steigert die Produktivität: Ruhe führt zu höherer Kreativität und Problemlösungsfähigkeit.
+Verbessert das Wohlbefinden: Beugt Burnout vor und fördert die physische und psychische Gesundheit.
+Verbessert Beziehungen: Garantiert Zeit für Familie und Freunde.
+👩‍💻 Erreichen:
+
+Grenzen setzen: Arbeitszeiten definieren, um Berufs- und Privatleben zu trennen.
+Aufgaben priorisieren: Konzentration auf das Dringende, um Zeit effektiv zu verwalten.
+Pausen nehmen: Wesentlich für geistige Erfrischung und Perspektive.
+Flexibilität nutzen: Flexible Arbeitsmöglichkeiten für einen ausgeglichenen Tag nutzen.
+Lasst uns für ein Gleichgewicht streben, um nachhaltigen Erfolg und Glück zu sichern.
+
+#WorkLifeBalance #Produktivität #MentalHealth`,
+            Spanish: `🌟 Abrazando el Equilibrio Entre Trabajo y Vida Personal: Clave para el Bienestar 🌟
+
+En el mundo acelerado de hoy, mantener un equilibrio entre trabajo y vida personal es crucial. No solo es beneficioso, es esencial.
+
+🚀 ¿Por Qué es Importante?
+
+Aumenta la Productividad: El descanso conduce a una mayor creatividad y resolución de problemas.
+Mejora el Bienestar: Previene el agotamiento, promoviendo la salud física y mental.
+Mejora las Relaciones: Asegura tiempo para la familia y amigos.
+👩‍💻 Cómo Lograrlo:
+
+Establecer Límites: Definir horas de trabajo para separar la vida profesional y personal.
+Priorizar Tareas: Enfocarse en lo urgente para gestionar el tiempo de manera efectiva.
+Tomar Descansos: Esencial para el refresco mental y la perspectiva.
+Abrazar la Flexibilidad: Utilizar opciones de trabajo flexible para un día equilibrado.
+Esforcémonos por el equilibrio para asegurar el éxito y la felicidad sostenidos.
+
+#EquilibrioTrabajoVida #Productividad #SaludMental`,
+            Formal: `The Imperative of Work-Life Balance for Professional Success and Personal Well-being
+
+In the realm of modern professional endeavors, the significance of maintaining an equilibrium between work and personal life cannot be overstated. This balance is not merely a luxury but an essential component for long-term success and well-being.
+
+Key Reasons for Emphasizing Work-Life Balance:
+
+Enhanced Productivity: Adequate rest and detachment from work-related tasks catalyze creativity and effective problem-solving capabilities.
+Improved Health and Well-being: A well-balanced lifestyle is instrumental in preventing occupational burnout, thereby safeguarding both mental and physical health.
+Strengthened Personal Relationships: Allocating time for personal relationships is crucial for emotional support and overall life satisfaction.
+Strategies for Cultivating Balance:
+
+Implementing Clear Boundaries: Establishing definitive work hours is essential to distinguish professional responsibilities from personal time.
+Effective Prioritization of Tasks: Identifying and addressing urgent tasks efficiently is key to managing workload and reducing stress.
+Incorporating Regular Breaks: Breaks are fundamental for mental rejuvenation, offering new perspectives, particularly in challenging situations.
+Utilizing Flexible Work Arrangements: Flexibility in work schedules can significantly contribute to a harmonious daily routine, accommodating both career and personal commitments.
+In conclusion, work-life balance is a pivotal factor in achieving sustained professional success and personal fulfillment. It requires conscious and continual efforts to integrate effectively into our daily lives.
+
+#ProfessionalDevelopment #WorkLifeBalance #EmployeeWellbeing #CareerSuccess
+
+            `,
+            Casual: `Hey everyone 👋,
+
+Just wanted to drop a quick note about something I've been thinking a lot about lately: work-life balance. 🌈
+
+Let's face it, we're often caught up in the hustle, but have you noticed how taking a step back actually makes you more productive? Yep, it's true! 🚀 A little break can spark some serious creativity.
+
+Here's the deal:
+
+Work Smart: It's not about working non-stop, it's about working efficiently. 🧠
+Health is Wealth: Avoid burnout, folks! Your mind and body will thank you. 💪
+Family & Friends Time: Because life's too short to miss out on fun moments. 🥳
+Tips to keep it balanced:
+
+Draw the Line: Work time is work time, chill time is chill time. 🕒
+What's Important?: Not everything is urgent. Prioritize! ✅
+Breaks are Bae: Short walks, coffee breaks, vacations - they all count. 🏖️
+Flexi is Sexy: Flexi-hours or work-from-home can be a game-changer. 💻
+So, let's keep it balanced and rock our work and personal lives! 🎸
+
+#WorkLifeBalance #StayProductive #StayHealthy`,
+            Neutral: `Maintaining Work-Life Balance: Essential for Sustainable Success
+
+In the current professional landscape, achieving a work-life balance is increasingly recognized as a key factor for long-term success and well-being.
+
+Why Work-Life Balance Matters?
+
+Enhances Productivity: Regular breaks and downtime can lead to improved focus and efficiency.
+Supports Health: Balancing work and personal life helps prevent burnout and promotes overall well-being.
+Strengthens Personal Relationships: Allocating time outside work nurtures important personal connections.
+Strategies for Achieving Balance:
+
+Set Clear Boundaries: Establish specific work hours to ensure personal time remains undisturbed.
+Prioritize Effectively: Distinguish between urgent and less critical tasks to manage workload efficiently.
+Regular Breaks: Incorporating short breaks and vacation time is vital for mental and physical rejuvenation.
+Flexible Working Arrangements: Where possible, utilize flexibility in work schedules to accommodate personal needs.
+Work-life balance is a continuous, individual process and is crucial for maintaining long-term professional and personal health.
+
+#WorkLifeBalance #ProfessionalDevelopment #HealthAndWellness`,
+        },
+    },
+];
diff --git a/vue-options-api-demos/conversational-ui/ai-prompt/suggestions/main.js b/vue-options-api-demos/conversational-ui/ai-prompt/suggestions/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/conversational-ui/ai-prompt/suggestions/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/conversational-ui/ai-prompt/suggestions/main.vue b/vue-options-api-demos/conversational-ui/ai-prompt/suggestions/main.vue
new file mode 100644
index 00000000..ad90140f
--- /dev/null
+++ b/vue-options-api-demos/conversational-ui/ai-prompt/suggestions/main.vue
@@ -0,0 +1,116 @@
+<template>
+  <AIPrompt
+    :style="{ width: '400px', height: '400px' }"
+    :activeView="activeView"
+    @activeviewchange="handleActiveViewChange"
+    @promptrequest="handleOnRequest"
+    @commandexecute="handleCommandExecute"
+    :toolbarItems="[promptViewDefaults, outputViewDefaults]"
+  >
+    <AIPromptView :promptSuggestions="suggestionsList" />
+    <AIPromptOutputView :outputs="outputs" />
+  </AIPrompt>
+</template>
+<script>
+import {
+  AIPrompt,
+  AIPromptOutputView,
+  AIPromptView,
+  outputViewDefaults,
+  promptViewDefaults,
+} from "@progress/kendo-vue-conversational-ui";
+
+import {
+  suggestionsList,
+  suggestionsResponse,
+  unknownRequest,
+} from "./ai-data";
+
+export default {
+  components: {
+    AIPrompt,
+    AIPromptOutputView,
+    AIPromptView,
+  },
+  data: function () {
+    return {
+      suggestionsList,
+      suggestionsResponse,
+      unknownRequest,
+      outputViewDefaults,
+      promptViewDefaults,
+      localPrompt: "",
+      showAIPrompt: false,
+      activeView: promptViewDefaults.name,
+      outputs: [],
+    };
+  },
+  methods: {
+    handleOnRequest(prompt, output) {
+      if (!prompt) {
+        return;
+      }
+
+      if (output && output?.isRetry) {
+        const responseContent = this.getSuggestion(prompt + "retry");
+        this.outputs = [
+          {
+            id: this.outputs.length + 1,
+            title: prompt,
+            responseContent: responseContent?.response || unknownRequest,
+            prompt,
+          },
+          ...this.outputs,
+        ];
+      } else if (output && output?.ratingType) {
+        const ratingOutput = this.outputs.map((item) => {
+          return output.id === item.id
+            ? { ...item, ratingType: output.ratingType }
+            : item;
+        });
+        this.outputs = ratingOutput;
+      } else {
+        const responseContent = this.getSuggestion(prompt);
+        this.outputs = [
+          {
+            id: this.outputs.length + 1,
+            title: prompt,
+            responseContent: responseContent?.response || unknownRequest,
+            prompt,
+          },
+          ...this.outputs,
+        ];
+      }
+
+      this.localPrompt = prompt;
+      this.activeView = outputViewDefaults.name;
+    },
+    handleActiveViewChange(viewName) {
+      this.activeView = viewName;
+    },
+    handleCommandExecute(commandData) {
+      const responseItem = this.getSuggestion(this.localPrompt || "");
+      const commandText = commandData.text;
+      this.outputs = [
+        {
+          id: this.outputs.length + 1,
+          title: this.localPrompt,
+          subTitle: commandData.text,
+          responseContent:
+            (responseItem?.commands && responseItem.commands[commandText]) ||
+            unknownRequest,
+          prompt: this.localPrompt,
+        },
+        ...outputs,
+      ];
+
+      this.activeView = outputViewDefaults.name;
+    },
+    getSuggestion(prompt) {
+      return suggestionsResponse.find((item) => {
+        return item.suggestion === prompt && item;
+      });
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/conversational-ui/getting-started/main.js b/vue-options-api-demos/conversational-ui/getting-started/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/conversational-ui/getting-started/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/conversational-ui/getting-started/main.vue b/vue-options-api-demos/conversational-ui/getting-started/main.vue
new file mode 100644
index 00000000..d70b5e55
--- /dev/null
+++ b/vue-options-api-demos/conversational-ui/getting-started/main.vue
@@ -0,0 +1,60 @@
+<template>
+  <AIPrompt
+    :activeView="activeView"
+    @activeviewchange="handleActiveViewChange"
+    @promptrequest="handleOnRequest"
+    :toolbarItems="[promptViewDefaults, outputViewDefaults]"
+  >
+    <AIPromptView />
+    <AIPromptOutputView :outputs="outputs" />
+  </AIPrompt>
+</template>
+<script>
+import {
+  AIPrompt,
+  AIPromptOutputView,
+  AIPromptView,
+  outputViewDefaults,
+  promptViewDefaults,
+} from "@progress/kendo-vue-conversational-ui";
+
+export default {
+  components: {
+    AIPrompt,
+    AIPromptOutputView,
+    AIPromptView,
+  },
+  data: function () {
+    return {
+      outputViewDefaults,
+      promptViewDefaults,
+      activeView: promptViewDefaults.name,
+      outputs: [],
+    };
+  },
+  methods: {
+    handleOnRequest(prompt, outputItem) {
+      if (!prompt) {
+        return;
+      }
+
+      this.outputs = [
+        {
+          id: this.outputs.length + 1,
+          title: "Title",
+          subTitle: `Request ${this.outputs.length + 1}`,
+          responseContent: `Response content for prompt ${
+            prompt + ". Generation: " + this.outputs.length
+          }`,
+          prompt,
+        },
+        ...this.outputs,
+      ];
+      this.activeView = outputViewDefaults.name;
+    },
+    handleActiveViewChange(viewName) {
+      this.activeView = viewName;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/conversational-ui/overview/main.js b/vue-options-api-demos/conversational-ui/overview/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/conversational-ui/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/conversational-ui/overview/main.vue b/vue-options-api-demos/conversational-ui/overview/main.vue
new file mode 100644
index 00000000..d70b5e55
--- /dev/null
+++ b/vue-options-api-demos/conversational-ui/overview/main.vue
@@ -0,0 +1,60 @@
+<template>
+  <AIPrompt
+    :activeView="activeView"
+    @activeviewchange="handleActiveViewChange"
+    @promptrequest="handleOnRequest"
+    :toolbarItems="[promptViewDefaults, outputViewDefaults]"
+  >
+    <AIPromptView />
+    <AIPromptOutputView :outputs="outputs" />
+  </AIPrompt>
+</template>
+<script>
+import {
+  AIPrompt,
+  AIPromptOutputView,
+  AIPromptView,
+  outputViewDefaults,
+  promptViewDefaults,
+} from "@progress/kendo-vue-conversational-ui";
+
+export default {
+  components: {
+    AIPrompt,
+    AIPromptOutputView,
+    AIPromptView,
+  },
+  data: function () {
+    return {
+      outputViewDefaults,
+      promptViewDefaults,
+      activeView: promptViewDefaults.name,
+      outputs: [],
+    };
+  },
+  methods: {
+    handleOnRequest(prompt, outputItem) {
+      if (!prompt) {
+        return;
+      }
+
+      this.outputs = [
+        {
+          id: this.outputs.length + 1,
+          title: "Title",
+          subTitle: `Request ${this.outputs.length + 1}`,
+          responseContent: `Response content for prompt ${
+            prompt + ". Generation: " + this.outputs.length
+          }`,
+          prompt,
+        },
+        ...this.outputs,
+      ];
+      this.activeView = outputViewDefaults.name;
+    },
+    handleActiveViewChange(viewName) {
+      this.activeView = viewName;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/datatools/filter/basic-usage/main.js b/vue-options-api-demos/datatools/filter/basic-usage/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/datatools/filter/basic-usage/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/datatools/filter/basic-usage/main.vue b/vue-options-api-demos/datatools/filter/basic-usage/main.vue
new file mode 100644
index 00000000..f4870737
--- /dev/null
+++ b/vue-options-api-demos/datatools/filter/basic-usage/main.vue
@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <kFilter
+      :fields="fields"
+      :value="filter"
+      @change="onFilterChange"
+      :default-group-filter="defaultGroupFilter"
+    >
+    </kFilter>
+    <Grid
+      :data-items="products"
+      :filterable="true"
+      :filter="filter"
+      @filterchange="onFilterChange"
+      :columns="columns"
+    >
+    </Grid>
+  </div>
+</template>
+
+<script>
+import { Filter, Operators } from "@progress/kendo-vue-data-tools";
+import { filterBy } from "@progress/kendo-data-query";
+import { Grid } from "@progress/kendo-vue-grid";
+import { sampleProducts } from "./products";
+
+const currentDate = new Date();
+
+export default {
+  components: {
+    kFilter: Filter,
+    Grid,
+  },
+  data: function () {
+    return {
+      defaultGroupFilter: {
+        logic: "and",
+        filters: [],
+      },
+      filter: {
+        logic: "and",
+        filters: [
+          { field: "ProductName", operator: "contains", value: "an" },
+          { field: "UnitPrice", operator: "neq", value: 22 },
+          {
+            logic: "or",
+            filters: [
+              { field: "ProductName", operator: "startswith", value: "c" },
+              { field: "UnitPrice", operator: "eq", value: 19 },
+            ],
+          },
+          { field: "FirstOrderedOn", operator: "lte", value: currentDate },
+          { field: "Discontinued", operator: "eq", value: true },
+        ],
+      },
+      fields: [
+        {
+          name: "ProductName",
+          label: "Product Name",
+          filter: "text",
+          operators: Operators.text,
+        },
+        {
+          name: "UnitPrice",
+          label: "Unit Price",
+          filter: "numeric",
+          operators: Operators.numeric,
+        },
+        {
+          name: "FirstOrderedOn",
+          label: "First Ordered On",
+          filter: "date",
+          operators: Operators.date,
+        },
+        {
+          name: "Discontinued",
+          label: "Discontinued",
+          filter: "boolean",
+          operators: Operators.boolean,
+        },
+      ],
+      columns: [
+        {
+          field: "ProductID",
+          filterable: false,
+          title: "Product ID",
+          width: "50px",
+        },
+        { field: "ProductName", title: "Product Name" },
+        { field: "FirstOrderedOn", filter: "date", title: "First Ordered On" },
+        { field: "UnitPrice", filter: "numeric", title: "Unit Price" },
+        { field: "Discontinued", filter: "boolean", title: "Discontinued" },
+      ],
+    };
+  },
+  computed: {
+    currentFilter() {
+      return filterBy([], this.filter);
+    },
+    products: function () {
+      return filterBy(sampleProducts, this.filter);
+    },
+  },
+  methods: {
+    onFilterChange(event) {
+      if (event.filter !== null) {
+        this.filter = event.filter;
+      } else {
+        this.filter = this.defaultGroupFilter;
+      }
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/datatools/filter/basic-usage/products.js b/vue-options-api-demos/datatools/filter/basic-usage/products.js
new file mode 100644
index 00000000..d9bc9855
--- /dev/null
+++ b/vue-options-api-demos/datatools/filter/basic-usage/products.js
@@ -0,0 +1,184 @@
+const sampleProducts = [
+    {
+        ProductID: 1,
+        ProductName: "Chai",
+        SupplierID: 1,
+        CategoryID: 1,
+        QuantityPerUnit: "10 boxes x 20 bags",
+        UnitPrice: 18,
+        UnitsInStock: 39,
+        UnitsOnOrder: 0,
+        ReorderLevel: 10,
+        Discontinued: false,
+        Category: {
+            CategoryID: 1,
+            CategoryName: "Beverages",
+            Description: "Soft drinks, coffees, teas, beers, and ales"
+        },
+        FirstOrderedOn: new Date(1996, 8, 20)
+    },
+    {
+        ProductID: 2,
+        ProductName: "Chang",
+        SupplierID: 1,
+        CategoryID: 1,
+        QuantityPerUnit: "24 - 12 oz bottles",
+        UnitPrice: 19,
+        UnitsInStock: 17,
+        UnitsOnOrder: 40,
+        ReorderLevel: 25,
+        Discontinued: false,
+        Category: {
+            CategoryID: 1,
+            CategoryName: "Beverages",
+            Description: "Soft drinks, coffees, teas, beers, and ales"
+        },
+        FirstOrderedOn: new Date(1996, 7, 12)
+    },
+    {
+        ProductID: 3,
+        ProductName: "Aniseed Syrup",
+        SupplierID: 1,
+        CategoryID: 2,
+        QuantityPerUnit: "12 - 550 ml bottles",
+        UnitPrice: 10,
+        UnitsInStock: 13,
+        UnitsOnOrder: 70,
+        ReorderLevel: 25,
+        Discontinued: false,
+        Category: {
+            CategoryID: 2,
+            CategoryName: "Condiments",
+            Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        FirstOrderedOn: new Date(1996, 8, 26)
+    },
+    {
+        ProductID: 4,
+        ProductName: "Chef Anton's Cajun Seasoning",
+        SupplierID: 2,
+        CategoryID: 2,
+        QuantityPerUnit: "48 - 6 oz jars",
+        UnitPrice: 22,
+        UnitsInStock: 53,
+        UnitsOnOrder: 0,
+        ReorderLevel: 0,
+        Discontinued: false,
+        Category: {
+            CategoryID: 2,
+            CategoryName: "Condiments",
+            Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        FirstOrderedOn: new Date(1996, 9, 19)
+    },
+    {
+        ProductID: 5,
+        ProductName: "Chef Anton's Gumbo Mix",
+        SupplierID: 2,
+        CategoryID: 2,
+        QuantityPerUnit: "36 boxes",
+        UnitPrice: 21.35,
+        UnitsInStock: 0,
+        UnitsOnOrder: 0,
+        ReorderLevel: 0,
+        Discontinued: true,
+        Category: {
+            CategoryID: 2,
+            CategoryName: "Condiments",
+            Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        FirstOrderedOn: new Date(1996, 7, 17)
+    },
+    {
+        ProductID: 6,
+        ProductName: "Grandma's Boysenberry Spread",
+        SupplierID: 3,
+        CategoryID: 2,
+        QuantityPerUnit: "12 - 8 oz jars",
+        UnitPrice: 25,
+        UnitsInStock: 120,
+        UnitsOnOrder: 0,
+        ReorderLevel: 25,
+        Discontinued: false,
+        Category: {
+            CategoryID: 2,
+            CategoryName: "Condiments",
+            Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        FirstOrderedOn: new Date(1996, 9, 19)
+    },
+    {
+        ProductID: 7,
+        ProductName: "Uncle Bob's Organic Dried Pears",
+        SupplierID: 3,
+        CategoryID: 7,
+        QuantityPerUnit: "12 - 1 lb pkgs.",
+        UnitPrice: 30,
+        UnitsInStock: 15,
+        UnitsOnOrder: 0,
+        ReorderLevel: 10,
+        Discontinued: false,
+        Category: {
+            CategoryID: 7,
+            CategoryName: "Produce",
+            Description: "Dried fruit and bean curd"
+        },
+        FirstOrderedOn: new Date(1996, 7, 22)
+    },
+    {
+        ProductID: 8,
+        ProductName: "Northwoods Cranberry Sauce",
+        SupplierID: 3,
+        CategoryID: 2,
+        QuantityPerUnit: "12 - 12 oz jars",
+        UnitPrice: 40,
+        UnitsInStock: 6,
+        UnitsOnOrder: 0,
+        ReorderLevel: 0,
+        Discontinued: false,
+        Category: {
+            CategoryID: 2,
+            CategoryName: "Condiments",
+            Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        FirstOrderedOn: new Date(1996, 11, 1)
+    },
+    {
+        ProductID: 9,
+        ProductName: "Mishi Kobe Niku",
+        SupplierID: 4,
+        CategoryID: 6,
+        QuantityPerUnit: "18 - 500 g pkgs.",
+        UnitPrice: 97,
+        UnitsInStock: 29,
+        UnitsOnOrder: 0,
+        ReorderLevel: 0,
+        Discontinued: true,
+        Category: {
+            CategoryID: 6,
+            CategoryName: "Meat/Poultry",
+            Description: "Prepared meats"
+        },
+        FirstOrderedOn: new Date(1997, 1, 21)
+    },
+    {
+        ProductID: 10,
+        ProductName: "Ikura",
+        SupplierID: 4,
+        CategoryID: 8,
+        QuantityPerUnit: "12 - 200 ml jars",
+        UnitPrice: 31,
+        UnitsInStock: 31,
+        UnitsOnOrder: 0,
+        ReorderLevel: 0,
+        Discontinued: false,
+        Category: {
+            CategoryID: 8,
+            CategoryName: "Seafood",
+            Description: "Seaweed and fish"
+        },
+        FirstOrderedOn: new Date(1996, 8, 5)
+    }
+];
+
+export { sampleProducts };
diff --git a/vue-options-api-demos/datatools/filter/custom-editors/built-in/CustomEnumFilter.vue b/vue-options-api-demos/datatools/filter/custom-editors/built-in/CustomEnumFilter.vue
new file mode 100644
index 00000000..a2219cc7
--- /dev/null
+++ b/vue-options-api-demos/datatools/filter/custom-editors/built-in/CustomEnumFilter.vue
@@ -0,0 +1,34 @@
+<template>
+ <EnumFilter
+        :filter="filter"
+        @filterchange="handleFilter"
+        :data-items="[
+                { text: 'Chai', value: 'chai' },
+                { text: 'Chang', value: 'chang' },
+                { text: 'Product 2', value: 'product2' },
+                { text: 'Product 3', value: 'product3' },
+                { text: 'Product 4', value: 'product4' },
+            ]"
+        :default-item="{ text: 'Choose Category ...', value: null }"
+        />
+</template>
+
+<script>
+import { EnumFilter } from '@progress/kendo-vue-data-tools';
+
+export default {
+    components: {
+        'EnumFilter': EnumFilter,
+    },
+    props: {
+        filter: [Array, Object]
+    },
+    methods: {
+        handleFilter(e) {
+            this.$emit('filterchange', e);
+        }
+    }
+};
+
+</script>
+
diff --git a/vue-options-api-demos/datatools/filter/custom-editors/built-in/main.js b/vue-options-api-demos/datatools/filter/custom-editors/built-in/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/datatools/filter/custom-editors/built-in/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/datatools/filter/custom-editors/built-in/main.vue b/vue-options-api-demos/datatools/filter/custom-editors/built-in/main.vue
new file mode 100644
index 00000000..d519f38b
--- /dev/null
+++ b/vue-options-api-demos/datatools/filter/custom-editors/built-in/main.vue
@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <kFilter
+      :fields="fields"
+      :value="filter"
+      @change="onFilterChange"
+      :default-group-filter="defaultGroupFilter"
+    >
+      <template v-slot:myCustomFilter="{ props }">
+        <custom
+          :filter="props.filter"
+          @filterchange="props.onFilterchange"
+        />
+      </template>
+    </kFilter>
+    <Grid
+      :data-items="products"
+      :filterable="true"
+      :filter="filter"
+      @filterchange="onFilterChange"
+      :columns="columns"
+    >
+    </Grid>
+  </div>
+</template>
+
+<script>
+import { Filter, Operators } from "@progress/kendo-vue-data-tools";
+import { filterBy } from "@progress/kendo-data-query";
+import { Grid } from "@progress/kendo-vue-grid";
+import { sampleProducts } from "./products";
+import CustomEnumFilter from "./CustomEnumFilter.vue";
+
+export default {
+  components: {
+    kFilter: Filter,
+    custom: CustomEnumFilter,
+    Grid,
+  },
+  data: function () {
+    return {
+      defaultGroupFilter: {
+        logic: "and",
+        filters: [],
+      },
+      filter: {
+        logic: "and",
+        filters: [],
+      },
+      fields: [
+        {
+          name: "ProductName",
+          label: "Product Name",
+          filterRender: "myCustomFilter",
+          operators: Operators.text,
+        },
+        {
+          name: "QuantityPerUnit",
+          label: "Quantity Per Unit",
+          filter: "text",
+          operators: Operators.text,
+        },
+      ],
+      columns: [
+        {
+          field: "ProductID",
+          filterable: false,
+          title: "Product ID",
+          width: "50px",
+        },
+        { field: "ProductName", title: "Product Name" },
+        { field: "QuantityPerUnit", title: "Quantity Per Unit" },
+        { field: "FirstOrderedOn", filter: "date", title: "First Ordered On" },
+        { field: "UnitPrice", filter: "numeric", title: "Unit Price" },
+        { field: "Discontinued", filter: "boolean", title: "Discontinued" },
+      ],
+    };
+  },
+  computed: {
+    currentFilter() {
+      return filterBy([], this.filter);
+    },
+    products() {
+      return filterBy(sampleProducts, this.filter);
+    },
+  },
+  methods: {
+    onFilterChange(event) {
+      if (event.filter !== null) {
+        this.filter = event.filter;
+      } else {
+        this.filter = this.defaultGroupFilter;
+      }
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/datatools/filter/custom-editors/built-in/products.js b/vue-options-api-demos/datatools/filter/custom-editors/built-in/products.js
new file mode 100644
index 00000000..962910df
--- /dev/null
+++ b/vue-options-api-demos/datatools/filter/custom-editors/built-in/products.js
@@ -0,0 +1,94 @@
+const sampleProducts = [
+    {
+        ProductID: 1,
+        ProductName: "Chai",
+        SupplierID: 1,
+        CategoryID: 1,
+        QuantityPerUnit: "10 boxes x 20 bags",
+        UnitPrice: 18,
+        UnitsInStock: 39,
+        UnitsOnOrder: 0,
+        ReorderLevel: 10,
+        Discontinued: false,
+        Category: {
+            CategoryID: 1,
+            CategoryName: "Beverages",
+            Description: "Soft drinks, coffees, teas, beers, and ales"
+        },
+        FirstOrderedOn: new Date(1996, 8, 20)
+    },
+    {
+        ProductID: 2,
+        ProductName: "Chang",
+        SupplierID: 1,
+        CategoryID: 1,
+        QuantityPerUnit: "24 - 12 oz bottles",
+        UnitPrice: 19,
+        UnitsInStock: 17,
+        UnitsOnOrder: 40,
+        ReorderLevel: 25,
+        Discontinued: false,
+        Category: {
+            CategoryID: 1,
+            CategoryName: "Beverages",
+            Description: "Soft drinks, coffees, teas, beers, and ales"
+        },
+        FirstOrderedOn: new Date(1996, 7, 12)
+    },
+    {
+        ProductID: 3,
+        ProductName: "Aniseed Syrup",
+        SupplierID: 1,
+        CategoryID: 2,
+        QuantityPerUnit: "12 - 550 ml bottles",
+        UnitPrice: 10,
+        UnitsInStock: 13,
+        UnitsOnOrder: 70,
+        ReorderLevel: 25,
+        Discontinued: false,
+        Category: {
+            CategoryID: 2,
+            CategoryName: "Condiments",
+            Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        FirstOrderedOn: new Date(1996, 8, 26)
+    },
+    {
+        ProductID: 4,
+        ProductName: "Chef Anton's Cajun Seasoning",
+        SupplierID: 2,
+        CategoryID: 2,
+        QuantityPerUnit: "48 - 6 oz jars",
+        UnitPrice: 22,
+        UnitsInStock: 53,
+        UnitsOnOrder: 0,
+        ReorderLevel: 0,
+        Discontinued: false,
+        Category: {
+            CategoryID: 2,
+            CategoryName: "Condiments",
+            Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        FirstOrderedOn: new Date(1996, 9, 19)
+    },
+    {
+        ProductID: 5,
+        ProductName: "Chef Anton's Gumbo Mix",
+        SupplierID: 2,
+        CategoryID: 2,
+        QuantityPerUnit: "36 boxes",
+        UnitPrice: 21.35,
+        UnitsInStock: 0,
+        UnitsOnOrder: 0,
+        ReorderLevel: 0,
+        Discontinued: true,
+        Category: {
+            CategoryID: 2,
+            CategoryName: "Condiments",
+            Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        FirstOrderedOn: new Date(1996, 7, 17)
+    }
+];
+
+export { sampleProducts };
diff --git a/vue-options-api-demos/datatools/filter/custom-editors/custom-component/CustomComboBoxFilter.vue b/vue-options-api-demos/datatools/filter/custom-editors/custom-component/CustomComboBoxFilter.vue
new file mode 100644
index 00000000..71d83eee
--- /dev/null
+++ b/vue-options-api-demos/datatools/filter/custom-editors/custom-component/CustomComboBoxFilter.vue
@@ -0,0 +1,53 @@
+<template>
+   <combobox
+          :style="{ width: '230px' }"
+    :data-items="items"
+    :text-field="'text'"
+    :filterable="true"
+    @change="handleChange"
+    @filterchange="filterChange"
+  ></combobox>
+</template>
+<script>
+import { ComboBox } from "@progress/kendo-vue-dropdowns";
+import { filterBy } from "@progress/kendo-data-query";
+
+export default {
+  components: {
+    combobox: ComboBox,
+  },
+  emits: {
+    change: null,
+  },
+  props: {
+    filter: [Array, Object],
+    filterOptions: [Array],
+  },
+  data: function () {
+    return {
+      items: [],
+    };
+  },
+  mounted() {
+    this.items = this.$props.filterOptions.slice();
+  },
+  methods: {
+    handleChange(e) {
+      const nextFilterToEmit = {
+        nextFilter: {
+          ...this.filter,
+          value: e.value ? e.value.text : "",
+        },
+      };
+      this.$emit("change", nextFilterToEmit);
+    },
+    filterChange(event) {
+      this.items = this.filterData(event.filter);
+    },
+    filterData(filter) {
+      const data = this.$props.filterOptions.slice();
+      return filterBy(data, filter);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/datatools/filter/custom-editors/custom-component/CustomDropDownListFilter.vue b/vue-options-api-demos/datatools/filter/custom-editors/custom-component/CustomDropDownListFilter.vue
new file mode 100644
index 00000000..0a601c44
--- /dev/null
+++ b/vue-options-api-demos/datatools/filter/custom-editors/custom-component/CustomDropDownListFilter.vue
@@ -0,0 +1,32 @@
+<template>
+   <dropdownlist
+    :style="{ width: '230px' }"
+    :data-items="filterOptions"
+    :text-field="'text'"
+    :data-item-key="'value'"
+    :default-item="{ text: 'Choose Category ...', value: null }"
+    @change="handleFilter"
+  >
+  </dropdownlist>
+</template>
+
+<script>
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    dropdownlist: DropDownList,
+  },
+  props: {  
+    filter: [Array, Object],
+    filterOptions: [Array],
+  },
+  methods: {
+    handleFilter(e) {
+      const nextFilterToEmit = { nextFilter: this.filter };
+      nextFilterToEmit.nextFilter.value = e.value.value;
+      this.$emit("filterchange", nextFilterToEmit);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/datatools/filter/custom-editors/custom-component/main.js b/vue-options-api-demos/datatools/filter/custom-editors/custom-component/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/datatools/filter/custom-editors/custom-component/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/datatools/filter/custom-editors/custom-component/main.vue b/vue-options-api-demos/datatools/filter/custom-editors/custom-component/main.vue
new file mode 100644
index 00000000..7f0a40d0
--- /dev/null
+++ b/vue-options-api-demos/datatools/filter/custom-editors/custom-component/main.vue
@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <kFilter
+      :fields="fields"
+      :value="filter"
+      @change="onFilterChange"
+      :default-group-filter="defaultGroupFilter"
+    >
+      <template v-slot:myCustomDropDownListFilter="{ props }">
+        <customDropDownListFilter
+          :filter="props.filter"
+          :filter-options="dropDownListFilterOptions"
+          @filterchange="props.onFilterchange"
+        />
+      </template>
+
+      <template v-slot:myCustomComboBoxFilter="{ props }">
+        <customComboBoxFilter
+          :filter="props.filter"
+          :filter-options="comboBoxFilterOptions"
+          @change="props.onFilterchange"
+        />
+      </template>
+    </kFilter>
+    <Grid
+      :data-items="products"
+      :filterable="true"
+      :filter="filter"
+      @filterchange="onFilterChange"
+      :columns="columns"
+    >
+    </Grid>
+  </div>
+</template>
+
+<script>
+import { Filter, Operators } from "@progress/kendo-vue-data-tools";
+import { filterBy } from "@progress/kendo-data-query";
+import { Grid } from "@progress/kendo-vue-grid";
+import { sampleProducts } from "./products";
+import CustomDropDownListFilter from "./CustomDropDownListFilter.vue";
+import CustomComboBoxFilter from "./CustomComboBoxFilter.vue";
+
+export default {
+  components: {
+    kFilter: Filter,
+    customDropDownListFilter: CustomDropDownListFilter,
+    customComboBoxFilter: CustomComboBoxFilter,
+    Grid,
+  },
+  data: function () {
+    return {
+      dropDownListFilterOptions: null,
+      comboBoxFilterOptions: null,
+      defaultGroupFilter: {
+        logic: "and",
+        filters: [],
+      },
+      filter: {
+        logic: "and",
+        filters: [],
+      },
+      fields: [
+        {
+          name: "ProductName",
+          label: "Product Name",
+          filterRender: "myCustomDropDownListFilter",
+          operators: Operators.text,
+        },
+        {
+          name: "QuantityPerUnit",
+          label: "Quantity Per Unit",
+          filterRender: "myCustomComboBoxFilter",
+          operators: Operators.text,
+        },
+      ],
+      columns: [
+        {
+          field: "ProductID",
+          filterable: false,
+          title: "Product ID",
+          width: "50px",
+        },
+        { field: "ProductName", title: "Product Name" },
+        { field: "QuantityPerUnit", title: "Quantity Per Unit" },
+        { field: "FirstOrderedOn", filter: "date", title: "First Ordered On" },
+        { field: "UnitPrice", filter: "numeric", title: "Unit Price" },
+        { field: "Discontinued", filter: "boolean", title: "Discontinued" },
+      ],
+    };
+  },
+  computed: {
+    currentFilter() {
+      return filterBy([], this.filter);
+    },
+    products() {
+      return filterBy(sampleProducts, this.filter);
+    },
+  },
+  methods: {
+    onFilterChange(event) {
+      if (event.filter !== null) {
+        this.filter = event.filter;
+      } else {
+        this.filter = this.defaultGroupFilter;
+      }
+    },
+  },
+  mounted() {
+    this.dropDownListFilterOptions = this.products.map((product) => ({
+      text: product.ProductName,
+      value: product.ProductName,
+    }));
+
+    this.comboBoxFilterOptions = this.products.map((product) => ({
+      text: product.QuantityPerUnit,
+      id: product.ProductID,
+    }));
+  },
+};
+</script>
diff --git a/vue-options-api-demos/datatools/filter/custom-editors/custom-component/products.js b/vue-options-api-demos/datatools/filter/custom-editors/custom-component/products.js
new file mode 100644
index 00000000..962910df
--- /dev/null
+++ b/vue-options-api-demos/datatools/filter/custom-editors/custom-component/products.js
@@ -0,0 +1,94 @@
+const sampleProducts = [
+    {
+        ProductID: 1,
+        ProductName: "Chai",
+        SupplierID: 1,
+        CategoryID: 1,
+        QuantityPerUnit: "10 boxes x 20 bags",
+        UnitPrice: 18,
+        UnitsInStock: 39,
+        UnitsOnOrder: 0,
+        ReorderLevel: 10,
+        Discontinued: false,
+        Category: {
+            CategoryID: 1,
+            CategoryName: "Beverages",
+            Description: "Soft drinks, coffees, teas, beers, and ales"
+        },
+        FirstOrderedOn: new Date(1996, 8, 20)
+    },
+    {
+        ProductID: 2,
+        ProductName: "Chang",
+        SupplierID: 1,
+        CategoryID: 1,
+        QuantityPerUnit: "24 - 12 oz bottles",
+        UnitPrice: 19,
+        UnitsInStock: 17,
+        UnitsOnOrder: 40,
+        ReorderLevel: 25,
+        Discontinued: false,
+        Category: {
+            CategoryID: 1,
+            CategoryName: "Beverages",
+            Description: "Soft drinks, coffees, teas, beers, and ales"
+        },
+        FirstOrderedOn: new Date(1996, 7, 12)
+    },
+    {
+        ProductID: 3,
+        ProductName: "Aniseed Syrup",
+        SupplierID: 1,
+        CategoryID: 2,
+        QuantityPerUnit: "12 - 550 ml bottles",
+        UnitPrice: 10,
+        UnitsInStock: 13,
+        UnitsOnOrder: 70,
+        ReorderLevel: 25,
+        Discontinued: false,
+        Category: {
+            CategoryID: 2,
+            CategoryName: "Condiments",
+            Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        FirstOrderedOn: new Date(1996, 8, 26)
+    },
+    {
+        ProductID: 4,
+        ProductName: "Chef Anton's Cajun Seasoning",
+        SupplierID: 2,
+        CategoryID: 2,
+        QuantityPerUnit: "48 - 6 oz jars",
+        UnitPrice: 22,
+        UnitsInStock: 53,
+        UnitsOnOrder: 0,
+        ReorderLevel: 0,
+        Discontinued: false,
+        Category: {
+            CategoryID: 2,
+            CategoryName: "Condiments",
+            Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        FirstOrderedOn: new Date(1996, 9, 19)
+    },
+    {
+        ProductID: 5,
+        ProductName: "Chef Anton's Gumbo Mix",
+        SupplierID: 2,
+        CategoryID: 2,
+        QuantityPerUnit: "36 boxes",
+        UnitPrice: 21.35,
+        UnitsInStock: 0,
+        UnitsOnOrder: 0,
+        ReorderLevel: 0,
+        Discontinued: true,
+        Category: {
+            CategoryID: 2,
+            CategoryName: "Condiments",
+            Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        FirstOrderedOn: new Date(1996, 7, 17)
+    }
+];
+
+export { sampleProducts };
diff --git a/vue-options-api-demos/datatools/filter/custom-operators/main.js b/vue-options-api-demos/datatools/filter/custom-operators/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/datatools/filter/custom-operators/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/datatools/filter/custom-operators/main.vue b/vue-options-api-demos/datatools/filter/custom-operators/main.vue
new file mode 100644
index 00000000..44b0a0ed
--- /dev/null
+++ b/vue-options-api-demos/datatools/filter/custom-operators/main.vue
@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <kFilter
+      :fields="fields"
+      :value="filter"
+      @change="onFilterChange"
+      :default-group-filter="defaultGroupFilter"
+    >
+    </kFilter>
+    <Grid
+      :data-items="products"
+      :filterable="true"
+      :filter="filter"
+      @filterchange="onFilterChange"
+      :columns="columns"
+    >
+    </Grid>
+  </div>
+</template>
+
+<script>
+import { Filter, Operators } from "@progress/kendo-vue-data-tools";
+import { filterBy } from "@progress/kendo-data-query";
+import { Grid } from "@progress/kendo-vue-grid";
+import { sampleProducts } from "./products";
+
+export default {
+  components: {
+    kFilter: Filter,
+    Grid,
+  },
+  data: function () {
+    return {
+      dropDownListFilterOptions: null,
+      comboBoxFilterOptions: null,
+      defaultGroupFilter: {
+        logic: "and",
+        filters: [],
+      },
+      filter: {
+        logic: "and",
+        filters: [],
+      },
+      fields: [
+        {
+          name: "UnitPrice",
+          label: "Unit Price",
+          filter: "numeric",
+          operators: [
+            { ...Operators.numeric[0], text: "Custom IS Equal To" },
+            { ...Operators.numeric[1], text: "Custom IS NOT Equal To" },
+            { ...Operators.numeric[2] },
+          ],
+        },
+        {
+          name: "Discontinued",
+          label: "Discontinued",
+          filter: "boolean",
+          operators: [
+            { text: "Custom Equal to", operator: "eq" },
+            { text: "Custom NOT Equal to", operator: "neq" },
+          ],
+        },
+      ],
+      columns: [
+        {
+          field: "ProductID",
+          filterable: false,
+          title: "Product ID",
+          width: "50px",
+        },
+        { field: "ProductName", title: "Product Name" },
+        { field: "QuantityPerUnit", title: "Quantity Per Unit" },
+        { field: "FirstOrderedOn", filter: "date", title: "First Ordered On" },
+        { field: "UnitPrice", filter: "numeric", title: "Unit Price" },
+        { field: "Discontinued", filter: "boolean", title: "Discontinued" },
+      ],
+    };
+  },
+  computed: {
+    currentFilter() {
+      return filterBy([], this.filter);
+    },
+    products() {
+      return filterBy(sampleProducts, this.filter);
+    },
+  },
+  methods: {
+    onFilterChange(event) {
+      if (event.filter !== null) {
+        this.filter = event.filter;
+      } else {
+        this.filter = this.defaultGroupFilter;
+      }
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/datatools/filter/custom-operators/products.js b/vue-options-api-demos/datatools/filter/custom-operators/products.js
new file mode 100644
index 00000000..962910df
--- /dev/null
+++ b/vue-options-api-demos/datatools/filter/custom-operators/products.js
@@ -0,0 +1,94 @@
+const sampleProducts = [
+    {
+        ProductID: 1,
+        ProductName: "Chai",
+        SupplierID: 1,
+        CategoryID: 1,
+        QuantityPerUnit: "10 boxes x 20 bags",
+        UnitPrice: 18,
+        UnitsInStock: 39,
+        UnitsOnOrder: 0,
+        ReorderLevel: 10,
+        Discontinued: false,
+        Category: {
+            CategoryID: 1,
+            CategoryName: "Beverages",
+            Description: "Soft drinks, coffees, teas, beers, and ales"
+        },
+        FirstOrderedOn: new Date(1996, 8, 20)
+    },
+    {
+        ProductID: 2,
+        ProductName: "Chang",
+        SupplierID: 1,
+        CategoryID: 1,
+        QuantityPerUnit: "24 - 12 oz bottles",
+        UnitPrice: 19,
+        UnitsInStock: 17,
+        UnitsOnOrder: 40,
+        ReorderLevel: 25,
+        Discontinued: false,
+        Category: {
+            CategoryID: 1,
+            CategoryName: "Beverages",
+            Description: "Soft drinks, coffees, teas, beers, and ales"
+        },
+        FirstOrderedOn: new Date(1996, 7, 12)
+    },
+    {
+        ProductID: 3,
+        ProductName: "Aniseed Syrup",
+        SupplierID: 1,
+        CategoryID: 2,
+        QuantityPerUnit: "12 - 550 ml bottles",
+        UnitPrice: 10,
+        UnitsInStock: 13,
+        UnitsOnOrder: 70,
+        ReorderLevel: 25,
+        Discontinued: false,
+        Category: {
+            CategoryID: 2,
+            CategoryName: "Condiments",
+            Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        FirstOrderedOn: new Date(1996, 8, 26)
+    },
+    {
+        ProductID: 4,
+        ProductName: "Chef Anton's Cajun Seasoning",
+        SupplierID: 2,
+        CategoryID: 2,
+        QuantityPerUnit: "48 - 6 oz jars",
+        UnitPrice: 22,
+        UnitsInStock: 53,
+        UnitsOnOrder: 0,
+        ReorderLevel: 0,
+        Discontinued: false,
+        Category: {
+            CategoryID: 2,
+            CategoryName: "Condiments",
+            Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        FirstOrderedOn: new Date(1996, 9, 19)
+    },
+    {
+        ProductID: 5,
+        ProductName: "Chef Anton's Gumbo Mix",
+        SupplierID: 2,
+        CategoryID: 2,
+        QuantityPerUnit: "36 boxes",
+        UnitPrice: 21.35,
+        UnitsInStock: 0,
+        UnitsOnOrder: 0,
+        ReorderLevel: 0,
+        Discontinued: true,
+        Category: {
+            CategoryID: 2,
+            CategoryName: "Condiments",
+            Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        FirstOrderedOn: new Date(1996, 7, 17)
+    }
+];
+
+export { sampleProducts };
diff --git a/vue-options-api-demos/datatools/filter/events/Logger.vue b/vue-options-api-demos/datatools/filter/events/Logger.vue
new file mode 100644
index 00000000..aa04a80b
--- /dev/null
+++ b/vue-options-api-demos/datatools/filter/events/Logger.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="example-config">
+    <h5>{{ title }}</h5>
+    <ul class="event-log">
+      <li v-for="(event, idx) in events" :key="idx">{{ event }}</li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    events: Array,
+    title: String,
+  },
+};
+</script>
+
+<style scoped>
+.example-config {
+  margin: 0 0 20px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+  margin: 0;
+  padding: 0;
+  max-height: 100px;
+  overflow-y: auto;
+  list-style-type: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: white;
+}
+.event-log li {
+  margin: 0;
+  padding: 0.3em;
+  line-height: 1.2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+  margin-bottom: -1px;
+}
+</style>
\ No newline at end of file
diff --git a/vue-options-api-demos/datatools/filter/events/main.js b/vue-options-api-demos/datatools/filter/events/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/datatools/filter/events/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/datatools/filter/events/main.vue b/vue-options-api-demos/datatools/filter/events/main.vue
new file mode 100644
index 00000000..41dcf1f3
--- /dev/null
+++ b/vue-options-api-demos/datatools/filter/events/main.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <kFilter
+      :fields="fields"
+      :value="filter"
+      @change="onFilterChange"
+      :default-group-filter="defaultGroupFilter"
+    >
+    </kFilter>
+    <br />
+    <div class="example-config">
+      <h5>{{ title }}</h5>
+      <ul class="event-log">
+        <li v-for="(event, index) in events" :key="index">{{ event }}</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Filter, Operators } from '@progress/kendo-vue-data-tools';
+import { filterBy } from '@progress/kendo-data-query';
+import Logger from './Logger.vue';
+
+export default {
+  components: {
+    kFilter: Filter,
+    Logger,
+  },
+  data: function () {
+    return {
+      title: 'Event log',
+      events: [],
+      defaultGroupFilter: {
+        logic: 'and',
+        filters: [],
+      },
+      filter: {
+        logic: 'and',
+        filters: [
+          { field: 'ProductName', operator: 'contains', value: 'an' },
+          { field: 'UnitPrice', operator: 'neq', value: 22 },
+        ],
+      },
+      fields: [
+        {
+          name: 'ProductName',
+          label: 'Product Name',
+          filter: 'text',
+          operators: Operators.text,
+        },
+        {
+          name: 'UnitPrice',
+          label: 'Unit Price',
+          filter: 'numeric',
+          operators: Operators.numeric,
+        },
+        {
+          name: 'FirstOrderedOn',
+          label: 'First Ordered On',
+          filter: 'date',
+          operators: Operators.date,
+        },
+        {
+          name: 'Discontinued',
+          label: 'Discontinued',
+          filter: 'boolean',
+          operators: Operators.boolean,
+        },
+      ],
+    };
+  },
+  computed: {
+    eventsList() {
+      return this.events;
+    },
+  },
+  methods: {
+    onFilterChange(event) {
+      if (event.filter !== null) {
+        this.filter = event.filter;
+        this.log('filterChange', event);
+      } else {
+        this.filter = this.defaultGroupFilter;
+      }
+    },
+    log: function (event) {
+      this.events.unshift(`Event: ${event} was triggered`);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/datatools/globalization/basic-usage/es.json b/vue-options-api-demos/datatools/globalization/basic-usage/es.json
new file mode 100644
index 00000000..1ee0a7d6
--- /dev/null
+++ b/vue-options-api-demos/datatools/globalization/basic-usage/es.json
@@ -0,0 +1,53 @@
+{
+    "pager": {
+        "firstPage": "Ir a la primera página",
+        "previousPage": "Ir a la página anterior",
+        "nextPage": "Ir a la página siguiente",
+        "lastPage": "Ir a la última página",
+        "page": "Página",
+        "of": "de",
+        "info": "{0} - {1} de {2} ítems",
+        "itemsPerPage": "ítems por página"
+    },
+    "datepicker": {
+        "toggleCalendar": "Alternar calendario"
+    },
+    "calendar": {
+        "today": "Hoy"
+    },
+    "dateinput": {
+        "increment": "Incrementar valor",
+        "decrement": "Disminuir valor"
+    },
+    "numerictextbox": {
+        "increment": "Incrementar valor",
+        "decrement": "Disminuir valor"
+    },
+    "filter": {
+        "eqOperator": "Es igual a",
+        "notEqOperator": "No es igual a",
+        "isNullOperator": "Es nulo",
+        "isNotNullOperator": "No es nulo",
+        "isEmptyOperator": "Está vacío",
+        "isNotEmptyOperator": "No está vacío",
+        "startsWithOperator": "Comienza con",
+        "containsOperator": "Contiene",
+        "notContainsOperator": "No contiene",
+        "endsWithOperator": "Termina en",
+        "gteOperator": "Es mayor o igual que",
+        "gtOperator": "Es mayor que",
+        "lteOperator": "Es menor o igual que",
+        "ltOperator": "Es menor o igual que",
+        "isTrue": "Sí",
+        "isFalse": "No",
+        "afterOrEqualOperator": "Es posterior o igual a",
+        "afterOperator": "Es posterior",
+        "beforeOperator": "Es anterior",
+        "beforeOrEqualOperator": "Es anterior o igual a",
+        "andLogic": "Y",
+        "orLogic": "O",
+        "addExpression": "Agregar expresión",
+        "addGroup": "Añadir grupo",
+        "close": "Cerca"
+    }
+  }
\ No newline at end of file
diff --git a/vue-options-api-demos/datatools/globalization/basic-usage/main.js b/vue-options-api-demos/datatools/globalization/basic-usage/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/datatools/globalization/basic-usage/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/datatools/globalization/basic-usage/main.vue b/vue-options-api-demos/datatools/globalization/basic-usage/main.vue
new file mode 100644
index 00000000..1e815e0b
--- /dev/null
+++ b/vue-options-api-demos/datatools/globalization/basic-usage/main.vue
@@ -0,0 +1,165 @@
+<template>
+  <localization :language="spanish ? 'es-ES' : 'en-EN'">
+    <intl :locale="spanish ? 'es' : 'en'">
+      <div class="col-xs-12 col-md-12 example-config">
+        <kbutton @click="buttonClick">
+          Change to {{ spanish ? "English" : "Spanish" }}
+        </kbutton>
+      </div>
+      <pager
+        :total="100"
+        :page-sizes="[5, 7, 10]"
+        :previous-next="true"
+        :skip="skip"
+        :take="take"
+        @pagechange="pageChange"
+      >
+      </pager>
+
+      <kFilter
+        :fields="fields"
+        :value="filter"
+        @change="onFilterChange"
+        :default-group-filter="defaultGroupFilter"
+      >
+      </kFilter>
+    </intl>
+  </localization>
+</template>
+
+<script>
+import { Pager, Filter, Operators } from "@progress/kendo-vue-data-tools";
+import { Button } from '@progress/kendo-vue-buttons';
+import {
+  IntlProvider,
+  load,
+  LocalizationProvider,
+  loadMessages,
+} from "@progress/kendo-vue-intl";
+
+import likelySubtags from "cldr-core/supplemental/likelySubtags.json";
+import currencyData from "cldr-core/supplemental/currencyData.json";
+import weekData from "cldr-core/supplemental/weekData.json";
+
+import numbers from "cldr-numbers-full/main/es/numbers.json";
+import currencies from "cldr-numbers-full/main/es/currencies.json";
+import caGregorian from "cldr-dates-full/main/es/ca-gregorian.json";
+import dateFields from "cldr-dates-full/main/es/dateFields.json";
+import timeZoneNames from "cldr-dates-full/main/es/timeZoneNames.json";
+
+load(
+  likelySubtags,
+  currencyData,
+  weekData,
+  numbers,
+  currencies,
+  caGregorian,
+  dateFields,
+  timeZoneNames
+);
+
+import esMessages from "./es.json";
+loadMessages(esMessages, "es-ES");
+
+export default {
+  components: {
+    pager: Pager,
+    kFilter: Filter,
+    localization: LocalizationProvider,
+    intl: IntlProvider,
+      'kbutton': Button
+  },
+  data: function () {
+    return {
+      spanish: true,
+      skip: 0,
+      take: 7,
+      dataResult: [],
+      defaultGroupFilter: {
+        logic: "and",
+        filters: [],
+      },
+      filter: {
+        logic: "and",
+        filters: [{ field: "ProductName", operator: "contains", value: "an" }],
+      },
+      fields: null,
+      fieldsEN: [
+        {
+          name: "ProductName",
+          label: "Product Name",
+          filter: "text",
+          operators: Operators.text,
+        },
+        {
+          name: "UnitPrice",
+          label: "Unit Price",
+          filter: "numeric",
+          operators: Operators.numeric,
+        },
+        {
+          name: "FirstOrderedOn",
+          label: "First Ordered On",
+          filter: "date",
+          operators: Operators.date,
+        },
+        {
+          name: "Discontinued",
+          label: "Discontinued",
+          filter: "boolean",
+          operators: Operators.boolean,
+        },
+      ],
+      fieldsES: [
+        {
+          name: "ProductName",
+          label: "Nombre",
+          filter: "text",
+          operators: Operators.text,
+        },
+        {
+          name: "UnitPrice",
+          label: "Precio",
+          filter: "numeric",
+          operators: Operators.numeric,
+        },
+        {
+          name: "FirstOrderedOn",
+          label: "Primero ordenado",
+          filter: "date",
+          operators: Operators.date,
+        },
+        {
+          name: "Discontinued",
+          label: "Interrumpido",
+          filter: "boolean",
+          operators: Operators.boolean,
+        },
+      ],
+    };
+  },
+  created() {
+    this.fields = this.fieldsES;
+  },
+  methods: {
+    buttonClick: function () {
+      this.spanish = !this.spanish;
+
+      this.spanish
+        ? (this.fields = this.fieldsES)
+        : (this.fields = this.fieldsEN);
+    },
+    pageChange: function (event) {
+      this.take = event.take;
+      this.skip = event.skip;
+    },
+    onFilterChange(event) {
+      if (event.filter !== null) {
+        this.filter = event.filter;
+      } else {
+        this.filter = this.defaultGroupFilter;
+      }
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/datatools/globalization/rtl/main.js b/vue-options-api-demos/datatools/globalization/rtl/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/datatools/globalization/rtl/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/datatools/globalization/rtl/main.vue b/vue-options-api-demos/datatools/globalization/rtl/main.vue
new file mode 100644
index 00000000..d475e14f
--- /dev/null
+++ b/vue-options-api-demos/datatools/globalization/rtl/main.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="k-rtl" dir="rtl">
+    <pager
+      :total="100"
+      :page-sizes="[5, 7, 10]"
+      :previous-next="true"
+      :skip="skip"
+      :take="take"
+      @pagechange="pageChange"
+    >
+    </pager>
+
+    <kFilter
+      :fields="fields"
+      :value="filter"
+      @change="onFilterChange"
+      :default-group-filter="defaultGroupFilter"
+    >
+    </kFilter>
+  </div>
+</template>
+
+<script>
+import { Pager, Filter, Operators } from "@progress/kendo-vue-data-tools";
+
+export default {
+  components: {
+    pager: Pager,
+    kFilter: Filter,
+  },
+  data: function () {
+    return {
+      skip: 0,
+      take: 7,
+      dataResult: [],
+      defaultGroupFilter: {
+        logic: "and",
+        filters: [],
+      },
+      filter: {
+        logic: "and",
+        filters: [
+          {
+            field: "ProductName",
+            operator: "contains",
+            value: "Vue",
+          },
+        ],
+      },
+      fields: [
+        {
+          name: "ProductName",
+          label: "Product Name",
+          filter: "text",
+          operators: Operators.text,
+        },
+        {
+          name: "UnitPrice",
+          label: "Unit Price",
+          filter: "numeric",
+          operators: Operators.numeric,
+        },
+        {
+          name: "FirstOrderedOn",
+          label: "First Ordered On",
+          filter: "date",
+          operators: Operators.date,
+        },
+        {
+          name: "Discontinued",
+          label: "Discontinued",
+          filter: "boolean",
+          operators: Operators.boolean,
+        },
+      ],
+    };
+  },
+  methods: {
+    pageChange: function (event) {
+      this.take = event.take;
+      this.skip = event.skip;
+    },
+    onFilterChange(event) {
+      if (event.filter !== null) {
+        this.filter = event.filter;
+      } else {
+        this.filter = this.defaultGroupFilter;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+  .k-filter{
+    text-align: right;
+    display: initial;
+  }
+</style>
\ No newline at end of file
diff --git a/vue-options-api-demos/datatools/pager/basic-usage/Configurator.vue b/vue-options-api-demos/datatools/pager/basic-usage/Configurator.vue
new file mode 100644
index 00000000..f348bdbe
--- /dev/null
+++ b/vue-options-api-demos/datatools/pager/basic-usage/Configurator.vue
@@ -0,0 +1,119 @@
+<template>
+    <div class="example-config row">
+      <div class="col-md-6">
+        <dl>
+          <dt>Pager type:</dt>
+          <dd>
+            <input
+              type="radio"
+              name="pager"
+              id="numeric"
+              class="k-radio k-radio-md"
+              value="numeric"
+              :checked="type === 'numeric'"
+              @change="onTypeChange"
+            />
+            <label style="margin: 7px 3em 7px 0px; line-height: 1.2"  class="k-radio-label"
+              for="numeric"
+            >
+              Numeric&nbsp;
+            </label>
+
+            <input
+              type="radio"
+              name="pager"
+              id="input"
+              class="k-radio k-radio-md"
+              value="input"
+              :checked="type === 'input'"
+              @change="onTypeChange"
+            />
+            <label style="margin: 7px 3em 7px 0px; line-height: 1.2" class="k-radio-label" for="input">
+              Input&nbsp;
+            </label>
+          </dd>
+        </dl>
+        <dl>
+          <dt>Max. number of buttons:</dt>
+          <dd>
+            <numerictextbox :style="{ width: '230px' }"
+              :value="buttonCount"
+              @change="onButtonCountChange"
+            />
+          </dd>
+        </dl>
+      </div>
+      <div class="col-md-6 row">
+        <div class="col-md-12">
+          <input
+            class="k-checkbox k-checkbox-md k-rounded-md"
+            :checked="info"
+            id="showInfo"
+            type="checkbox"
+            @change="onShowInfoChange"
+          />
+          <label htmlFor="showInfo" class="k-checkbox-label">
+            Show info
+          </label>
+        </div>
+        <div class="col-md-12">
+          <input
+            class="k-checkbox k-checkbox-md k-rounded-md"
+            :checked="pageSizes"
+            id="pageSize"
+            type="checkbox"
+            @change="onPageSizeChange"
+          />
+          <label for="pageSize" class="k-checkbox-label">
+            Show page sizes
+          </label>
+        </div>
+        <div class="col-md-12">
+          <input
+            class="k-checkbox k-checkbox-md k-rounded-md"
+            checked="previousNext"
+            id="previousNext"
+            type="checkbox"
+            @change="onPreviousNextChange"
+          />
+          <label for="previousNext" class="k-checkbox-label">
+            Show previous / next buttons
+          </label>
+
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+import { NumericTextBox } from '@progress/kendo-vue-inputs'
+
+export default {
+    components: {
+        'numerictextbox': NumericTextBox
+    },
+    props:{
+      type: String,
+      buttonCount: Number,
+      info: Boolean,
+      pageSizes: Boolean
+    },
+    methods:{
+      onTypeChange: function(e){
+          this.$emit("typeChange", e.target.id)
+      },
+      onButtonCountChange: function(e){
+          this.$emit("buttonCountChange", e.target.value)
+      },
+      onShowInfoChange: function(e){
+          this.$emit("showInfoChange", e.target.checked)
+      },
+      onPageSizeChange: function(e){
+          this.$emit("pageSizeChange", e.target.checked)
+      },
+      onPreviousNextChange: function(e){
+          this.$emit("previousNextChange", e.target.checked)
+      }
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/datatools/pager/basic-usage/main.js b/vue-options-api-demos/datatools/pager/basic-usage/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/datatools/pager/basic-usage/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/datatools/pager/basic-usage/main.vue b/vue-options-api-demos/datatools/pager/basic-usage/main.vue
new file mode 100644
index 00000000..1f9f19c2
--- /dev/null
+++ b/vue-options-api-demos/datatools/pager/basic-usage/main.vue
@@ -0,0 +1,84 @@
+<template>
+    <div>
+        <configurator
+            :type="type"
+            :buttonCount="buttonCount"
+            :info="info"
+            :pageSizes="pageSizes"
+            @typeChange="(inputType)=>onTypeChange(inputType)"
+            @buttonCountChange="(buttonsNumber)=>onButtonCountChange(buttonsNumber)"
+            @showInfoChange="(showInfo)=>onShowInfoChange(showInfo)"
+            @pageSizeChange="(pageChanged)=>onPageSizeChange(pageChanged)"
+            @previousNextChange="(prevNextChanged)=>onPreviousNextChange(prevNextChanged)"
+            />
+        <pager
+            :skip="skip"
+            :take="take"
+            :total="total"
+            :button-count="buttonCount"
+            :info="info"
+            :type="type"
+            :page-sizes="pageSizes ? pageSizeDefs : undefined"
+            :previous-next="previousNext"
+            @pagechange="handlePageChange" >
+        </pager>
+    </div>
+</template>
+
+<script>
+import { Pager } from '@progress/kendo-vue-data-tools';
+import { products } from "./products";
+import Configurator from "./Configurator.vue";
+
+const initialPageState = {
+  skip: 0,
+  take: 5,
+  buttonCount: 5,
+  type: 'numeric',
+  info: true,
+  pageSizes: true,
+  previousNext: true
+}
+
+export default {
+    components: {
+        "pager": Pager,
+        "configurator": Configurator
+    },
+    data: function(){
+        return {
+            skip: initialPageState.skip,
+            take: initialPageState.take,
+            buttonCount: initialPageState.buttonCount,
+            type: initialPageState.type,
+            info: initialPageState.info,
+            pageSizes: initialPageState.pageSizes,
+            previousNext: initialPageState.previousNext,
+            total: products.length,
+            pageSizeDefs:[5,10,20]
+        }
+    },
+    methods:{
+        handlePageChange: function(event){
+            this.skip=event.skip;
+            this.take=event.take;
+        },
+        onTypeChange: function(inputType){
+            inputType==="numeric"? this.type="numeric" : this.type = "input";
+        },
+        onButtonCountChange: function(buttonsNumber){
+            this.buttonCount = buttonsNumber;
+        },
+        onShowInfoChange: function(showInfo){
+            this.info = showInfo;
+        },
+        onPageSizeChange: function(pageChanged){
+            this.pageSizes = pageChanged;
+        },
+        onPreviousNextChange: function(prevNextChanged){
+            this.previousNext = prevNextChanged;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/datatools/pager/basic-usage/products.js b/vue-options-api-demos/datatools/pager/basic-usage/products.js
new file mode 100644
index 00000000..e6580f3e
--- /dev/null
+++ b/vue-options-api-demos/datatools/pager/basic-usage/products.js
@@ -0,0 +1 @@
+export const products = new Array(200).fill().map((_, index) => ({ ProductId: index, ProductName: 'Product ' + index }));
diff --git a/vue-options-api-demos/datatools/pager/events/handling/main.js b/vue-options-api-demos/datatools/pager/events/handling/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/datatools/pager/events/handling/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/datatools/pager/events/handling/main.vue b/vue-options-api-demos/datatools/pager/events/handling/main.vue
new file mode 100644
index 00000000..d9c03fd9
--- /dev/null
+++ b/vue-options-api-demos/datatools/pager/events/handling/main.vue
@@ -0,0 +1,69 @@
+<template>
+    <div>
+        <pager 
+            :skip="skip" 
+            :take="take" 
+            :total="total" 
+            :button-count="buttonCount" 
+            :info="info" 
+            :type="type" 
+            :page-sizes="pageSizes"
+            :previous-next="previousNext" 
+            @pagechange="handlePageChange" 
+            @pagesizechange="handlePageSizeChange" 
+            >
+        </pager>
+        <br/>
+        <div class="example-config">
+        <h5>{{ title }}</h5>
+        <ul class="event-log">
+            <li v-for="(event, index) in events" :key="index" >{{ event }}</li>
+        </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+import { Pager } from '@progress/kendo-vue-data-tools';
+import { Slider, SliderLabel } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        "pager": Pager,
+        'slider': Slider,
+        'slider-label': SliderLabel
+    },
+    data: function(){
+        return {
+            skip: 0,
+            take: 5,
+            buttonCount: 5,
+            type: "numeric",
+            info: true,
+            pageSizes: [5, 10, 20, 50, 100],
+            previousNext: true,
+            total: 200,
+            title: "Event log",
+            events: []
+        }
+    },
+    methods:{
+        handlePageChange: function(event){
+            this.log("pageChange", event);
+            this.skip=event.skip;
+            this.take=event.take;
+        },
+        handlePageSizeChange: function(event){
+            this.log("pageSizeChange", event);
+            this.skip=event.skip;
+            this.take=event.take;
+        },
+        log: function(event, arg){
+            this.events.unshift(
+            `event: ${event}, event data: ${arg ? JSON.stringify(arg) : ""}`
+            );
+        }
+    }
+};
+
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/datatools/pager/events/prevent/main.js b/vue-options-api-demos/datatools/pager/events/prevent/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/datatools/pager/events/prevent/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/datatools/pager/events/prevent/main.vue b/vue-options-api-demos/datatools/pager/events/prevent/main.vue
new file mode 100644
index 00000000..73c58afd
--- /dev/null
+++ b/vue-options-api-demos/datatools/pager/events/prevent/main.vue
@@ -0,0 +1,70 @@
+<template>
+    <div>
+        <pager 
+            :skip="skip" 
+            :take="take" 
+            :total="total" 
+            :page-sizes="pageSizeValues"
+            @pagechange="handlePageChange" 
+            @pagesizechange="handlePageSizeChange" 
+            >
+        </pager>
+          <k-dialog v-if="show" :title="'Please confirm'" @close="close('cancel')">
+            <p :style="{ margin: '25px', textAlign: 'center' }"> 
+            Are you sure you want to proceed with this page size?</p>
+            <dialog-actions-bar>
+                <kbutton @click="close('no')">No</kbutton>
+                <kbutton @click="close('yes')">Yes</kbutton>
+            </dialog-actions-bar>
+        </k-dialog>
+    </div>
+</template>
+
+<script>
+import { Pager } from '@progress/kendo-vue-data-tools';
+import { Dialog, DialogActionsBar } from '@progress/kendo-vue-dialogs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        "pager": Pager,
+        'k-dialog': Dialog,
+        'dialog-actions-bar': DialogActionsBar,
+        'kbutton': Button
+    },
+    data: function(){
+        return {
+             skip: 0,
+             take: 10,
+             total: 100,
+             show: false,
+             pageSizeValues: [5, 10, 20, 50, 100],
+             newPageSize: undefined
+        }
+    },
+    methods:{
+        handlePageChange(e) {
+            this.skip = e.skip;
+            this.take = e.take;
+        },
+        handlePageSizeChange(e) {
+            if (e.take >= 50) {
+                this.newPageSize = e.take;
+                this.show = true;
+            } else {
+                this.skip = e.skip;
+                this.take = e.take;
+            }
+        },
+        close(status) {
+            if (status === "yes") {
+                this.skip = this.skip;
+                this.take = this.newPageSize;
+            }
+
+            this.show = false;
+        }
+    }
+};
+
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/datatools/pager/responsive/main.js b/vue-options-api-demos/datatools/pager/responsive/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/datatools/pager/responsive/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/datatools/pager/responsive/main.vue b/vue-options-api-demos/datatools/pager/responsive/main.vue
new file mode 100644
index 00000000..36e327dc
--- /dev/null
+++ b/vue-options-api-demos/datatools/pager/responsive/main.vue
@@ -0,0 +1,79 @@
+<template>
+    <div>
+        <div class="wrapper">
+            <slider
+                style="width:500px"
+                :buttons="true"
+                :step="5"
+                :min="300"
+                :max="800"
+                v-model="width"
+            >
+                <slider-label :position="300">300</slider-label>
+                <slider-label :position="400">400</slider-label>
+                <slider-label :position="500">500</slider-label>
+                <slider-label :position="600">600</slider-label>
+                <slider-label :position="700">700</slider-label>
+                <slider-label :position="800">800</slider-label>
+            </slider>
+            <span>Current width: {{ width.toFixed(0) }}px</span>
+        </div>
+
+        <pager 
+            :style="{width:width.toFixed(0)+'px'}"
+            :skip="skip" 
+            :take="take" 
+            :total="total" 
+            :button-count="buttonCount" 
+            :info="info" 
+            :type="type" 
+            :page-sizes="pageSizes ? pageSizeDefs : undefined"
+            :previous-next="previousNext" 
+            @pagechange="handlePageChange" >
+        </pager>
+    </div>
+</template>
+
+<script>
+import { Pager } from '@progress/kendo-vue-data-tools';
+import { Slider, SliderLabel } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        "pager": Pager,
+        'slider': Slider,
+        'slider-label': SliderLabel
+    },
+    data: function(){
+        return {
+            skip: 0,
+            take: 5,
+            buttonCount: 5,
+            type: "numeric",
+            info: true,
+            pageSizes: [10, 15, 20],
+            previousNext: true,
+            total: 200,
+            pageSizeDefs:[5,10,20],
+            width: 768
+        }
+    },
+    methods:{
+        handlePageChange: function(event){
+            this.skip=event.skip;
+            this.take=event.take;
+        }
+    }
+};
+
+</script>
+
+<style>
+      .wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 20px 0;
+        margin-bottom: 20px;
+      }
+</style>
diff --git a/vue-options-api-demos/datatools/pager/template/PagerTemplate.vue b/vue-options-api-demos/datatools/pager/template/PagerTemplate.vue
new file mode 100644
index 00000000..2f432284
--- /dev/null
+++ b/vue-options-api-demos/datatools/pager/template/PagerTemplate.vue
@@ -0,0 +1,92 @@
+<template>
+    <div :style="{ display: 'flex' }">
+      <navbutton
+        :class="'k-pager-first' + (current === 1 ? ' k-disabled' : '')"
+        :page="1"
+        :title="'First Page'"
+        :svg-icon="caretAltToLeftIcon"
+        @pagechange="buttonPageChange"
+      />
+      <navbutton
+        :class="current === 1 ? ' k-disabled' : ''"
+        :page="current - 1"
+        :title="'Previous Page'"
+        :svg-icon="caretAltLeftIcon"
+        @pagechange="buttonPageChange"
+      />
+      <slider
+        :show-buttons="false"
+        :tick-placement="'none'"
+        :max="totalPages"
+        :min="1"
+        @change="sliderChange"
+        :value="current"
+      >
+      </slider>
+      <navbutton
+        :class="current === totalPages ? ' k-disabled' : ''"
+        :page="current + 1"
+        :title="'Next Page'"
+        :svg-icon="caretAltRightIcon"
+        @pagechange="buttonPageChange"
+      />
+      <navbutton
+        :class="'k-pager-last' + (current === totalPages ? ' k-disabled' : '')"
+        :page="totalPages"
+        :title="'Last Page'"
+        :svg-icon="caretAltToRightIcon"
+        @pagechange="buttonPageChange"
+      />
+      <pagerinfo :total-pages="totalPages" :skip="skip" :current-page="current">
+      </pagerinfo>
+    </div>
+  </template>
+  <script>
+  import { Slider } from "@progress/kendo-vue-inputs";
+  import {
+    PagerInfo,
+    PagerNavigationButton,
+  } from "@progress/kendo-vue-data-tools";
+  import {
+    caretAltToLeftIcon,
+    caretAltToRightIcon,
+    caretAltLeftIcon,
+    caretAltRightIcon,
+  } from "@progress/kendo-svg-icons";
+  
+  export default {
+    components: {
+      slider: Slider,
+      navbutton: PagerNavigationButton,
+      pagerinfo: PagerInfo,
+    },
+    props: {
+      currentPage: Number,
+      totalPages: Number,
+      skip: Number,
+    },
+    data() {
+      return {
+        caretAltToLeftIcon,
+        caretAltToRightIcon,
+        caretAltLeftIcon,
+        caretAltRightIcon,
+        size: 5,
+        selected: undefined,
+      };
+    },
+    computed: {
+      current() {
+        return this.selected || this.$props.currentPage;
+      },
+    },
+    methods: {
+      sliderChange(event) {
+        this.selected = Math.round(event.value);
+      },
+      buttonPageChange(newPage) {
+        this.selected = newPage;
+      },
+    },
+  };
+  </script>
\ No newline at end of file
diff --git a/vue-options-api-demos/datatools/pager/template/main.js b/vue-options-api-demos/datatools/pager/template/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/datatools/pager/template/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/datatools/pager/template/main.vue b/vue-options-api-demos/datatools/pager/template/main.vue
new file mode 100644
index 00000000..7d6f76cd
--- /dev/null
+++ b/vue-options-api-demos/datatools/pager/template/main.vue
@@ -0,0 +1,46 @@
+<template>
+        <pager
+            :skip="skip"
+            :take="take"
+            :total="total"
+            @pagechange="handlePageChange"
+            :button-count="5"
+            :info="true"
+            :previous-next="true"
+            :type="'numeric'"
+            :page-sizes="[5, 10, 20]"
+            :pager-render="pagerRender"
+            :responsive="false"
+          >
+            <template v-slot:myTemplate={props}>
+                    <custom 
+                     :current-page="props.current" 
+                     :skip="props.skip" 
+                     :total-pages="props.total" />
+                </template>
+          </pager>
+</template>
+<script>
+import { Pager } from '@progress/kendo-vue-data-tools';
+import PagerTemplate from './PagerTemplate.vue';
+
+export default {
+    components: {
+       pager: Pager,
+       custom: PagerTemplate
+    },
+    data: function () {
+        return { 
+          pagerRender: 'myTemplate',
+          total: 200,
+          skip: 0, take: 5 };
+    },
+    methods: {
+      handlePageChange(event) {
+          this.skip= event.skip;
+          this.take = event.take;
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/datatools/shared/products.js b/vue-options-api-demos/datatools/shared/products.js
new file mode 100644
index 00000000..e6580f3e
--- /dev/null
+++ b/vue-options-api-demos/datatools/shared/products.js
@@ -0,0 +1 @@
+export const products = new Array(200).fill().map((_, index) => ({ ProductId: index, ProductName: 'Product ' + index }));
diff --git a/vue-options-api-demos/datatools/tsconfig.json b/vue-options-api-demos/datatools/tsconfig.json
new file mode 100644
index 00000000..3c3dcc63
--- /dev/null
+++ b/vue-options-api-demos/datatools/tsconfig.json
@@ -0,0 +1,29 @@
+{
+   "compilerOptions": {
+        "types": [],
+        "sourceMap": true,
+        "noImplicitAny": false,
+        "module": "commonjs",
+        "target": "ES5",
+        "jsx": "vue",
+        "lib": [
+            "es2015",
+            "es2017",
+            "dom"
+        ],
+        "declaration": true,
+        "moduleResolution": "node",
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "strictNullChecks": true,
+        "paths": {
+            "@progress/kendo-vue-conversational-ui": [
+                "../../src/main.ts",
+            ]
+        }
+    },
+    "include": [
+        "**/*.ts",
+        "**/*.tsx",
+    ]
+}
diff --git a/vue-options-api-demos/dateinputs/basic/main.js b/vue-options-api-demos/dateinputs/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/basic/main.vue b/vue-options-api-demos/dateinputs/basic/main.vue
new file mode 100644
index 00000000..4793031b
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/basic/main.vue
@@ -0,0 +1,73 @@
+<template>
+  <div id="vueapp" class="vue-app">
+    <div class="row example-wrapper" :styles="{ minHeight: 450 }">
+      <div class="col-xs-12 col-md-6 example-col">
+        <p>DateInput</p>
+        <date-input v-model="value"></date-input>
+        <p>
+          (use <code>←</code> and <code>→</code> to navigate, <code>↑</code> and
+          <code>↓</code> to update)
+        </p>
+        <p>DatePicker</p>
+        <date-picker v-model="value"></date-picker>
+        <p>
+          (use Alt+<code>↓</code> to open the calendar, <code>←</code> and
+          <code>→</code> to navigate, <code>↑</code> to increment and
+          <code>↓</code> to decrement the value)
+        </p>
+        <p>DateTimePicker</p>
+        <datetimepicker :style="{ width: '230px' }" :default-value="value" />
+        <p>
+          (use Alt+<code>↓</code> to open the calendar, <code>←</code> and
+          <code>→</code> to navigate, <code>↑</code> to increment and
+          <code>↓</code> to decrement the value)
+        </p>
+        <p>TimePicker</p>
+        <timepicker :style="{ width: '230px' }" />
+        <p>
+          (use Alt+<code>↓</code> to open the time list, <code>↑</code> to
+          increment and <code>↓</code> to decrement the value)
+        </p>
+        <p>DateRangePicker</p>
+        <daterangepicker />
+      </div>
+      <div class="col-xs-12 col-md-6 example-col">
+        <p>Calendar</p>
+        <calendar v-model="value"></calendar>
+        <p>MultiView Calendar</p>
+        <calendar v-model="value" :views="2"></calendar>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  Calendar,
+  DateInput,
+  DateRangePicker,
+  DatePicker,
+  DateTimePicker,
+  TimePicker,
+} from "@progress/kendo-vue-dateinputs";
+
+export default {
+  components: {
+    "date-picker": DatePicker,
+    calendar: Calendar,
+    "date-input": DateInput,
+    datetimepicker: DateTimePicker,
+    timepicker: TimePicker,
+    daterangepicker: DateRangePicker,
+  },
+  data: function () {
+    return {
+      value: new Date(),
+    };
+  },
+  methods: {
+    changeDate({ value }) {
+      this.value = value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dateinputs/calendar/activeview/main.js b/vue-options-api-demos/dateinputs/calendar/activeview/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/activeview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/calendar/activeview/main.vue b/vue-options-api-demos/dateinputs/calendar/activeview/main.vue
new file mode 100644
index 00000000..53cb5c05
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/activeview/main.vue
@@ -0,0 +1,17 @@
+<template>
+<div id="vueapp" class="vue-app">
+    <div class="example-config">
+        <calendar :default-active-view="'decade'" />
+    </div>
+</div>
+</template>
+<script>
+import { Calendar } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'calendar': Calendar
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/calendar/basic/main.js b/vue-options-api-demos/dateinputs/calendar/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/calendar/basic/main.vue b/vue-options-api-demos/dateinputs/calendar/basic/main.vue
new file mode 100644
index 00000000..2dc524f8
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/basic/main.vue
@@ -0,0 +1,17 @@
+<template>
+<div id="vueapp" class="vue-app">
+    <div class="example-config">
+        <calendar />
+    </div>
+</div>
+</template>
+<script>
+import { Calendar } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'calendar': Calendar
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/calendar/custom/cell/Cell.vue b/vue-options-api-demos/dateinputs/calendar/custom/cell/Cell.vue
new file mode 100644
index 00000000..7447ae75
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/custom/cell/Cell.vue
@@ -0,0 +1,29 @@
+<template>
+<calendar-cell :is-selected="isSelected" @click="handleClick" :style="cellStyle">
+   {{formattedValue}}
+</calendar-cell>
+</template>
+<script>
+import { CalendarCell } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    name: 'CustomCalendarCell',
+    props: CalendarCell.props,
+    components: {
+        'calendar-cell': CalendarCell
+    },
+    emits:{
+        click:null
+    },
+    computed: {
+        cellStyle: function(){
+            return this.$props.isWeekend ? { opacity: '.7' } : { fontWeight: 'bold' }
+        }
+    },
+    methods: {
+        handleClick: function(e){
+            this.$emit('click', this.$props.value, e);
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/dateinputs/calendar/custom/cell/main.js b/vue-options-api-demos/dateinputs/calendar/custom/cell/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/custom/cell/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/calendar/custom/cell/main.vue b/vue-options-api-demos/dateinputs/calendar/custom/cell/main.vue
new file mode 100644
index 00000000..73ac8ba6
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/custom/cell/main.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="example-config">
+        <calendar :cell="customCell" >
+          <template v-slot:myTemplate="{props}">
+            <custom v-bind="props"/>
+        </template>
+        </calendar>
+    </div>
+</template>
+<script>
+import { Calendar } from '@progress/kendo-vue-dateinputs';
+import Cell from './Cell.vue';
+
+export default {
+    components: {
+      'calendar': Calendar,
+      'custom': Cell
+    },
+    data: function(){
+        return {
+            customCell: 'myTemplate'
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/calendar/custom/htmlcell/Cell.vue b/vue-options-api-demos/dateinputs/calendar/custom/htmlcell/Cell.vue
new file mode 100644
index 00000000..8b69ce6c
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/custom/htmlcell/Cell.vue
@@ -0,0 +1,47 @@
+<template>
+  <td
+    @click="clickHandler"
+    :class="['k-calendar-td', cellClass]"
+    :style="cellStyle"
+  >
+    <span class="k-link" :title="isWeekend && sometitle">
+      {{ formattedValue }}
+    </span>
+  </td>
+</template>
+<script>
+import { CalendarCell } from '@progress/kendo-vue-dateinputs';
+
+export default {
+  props: CalendarCell.props,
+  emits: {
+    click: null,
+  },
+  data: function () {
+    return {
+      sometitle: "We're closed on the weekends!",
+    };
+  },
+  computed: {
+    cellStyle: function () {
+      return {
+        cursor: 'pointer',
+        opacity: this.$props.isWeekend ? 0.6 : 1,
+      };
+    },
+    cellClass: function () {
+      return {
+        'k-state-selected': this.$props.isSelected,
+        'k-state-focused': this.$props.isFocused,
+      };
+    },
+  },
+  methods: {
+    clickHandler: function (e) {
+      if (!this.$props.isWeekend) {
+        this.$emit('click', this.$props.value, e);
+      }
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dateinputs/calendar/custom/htmlcell/main.js b/vue-options-api-demos/dateinputs/calendar/custom/htmlcell/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/custom/htmlcell/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/calendar/custom/htmlcell/main.vue b/vue-options-api-demos/dateinputs/calendar/custom/htmlcell/main.vue
new file mode 100644
index 00000000..08ca3928
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/custom/htmlcell/main.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="example-config">
+    <Calendar :cell="'myTemplate'" :value="value" @change="changeHandler">
+      <template v-slot:myTemplate="{ props }">
+        <custom
+          :data-item="props.dataItem"
+          :is-weekend="props.isWeekend"
+          :is-focused="props.isFocused"
+          :is-selected="props.isSelected"
+          :value="props.value"
+          :formatted-value="props.formattedValue"
+          @click="changeHandler"
+        />
+      </template>
+    </Calendar>
+  </div>
+</template>
+<script>
+import { Calendar } from '@progress/kendo-vue-dateinputs';
+import Cell from './Cell.vue';
+
+export default {
+  components: {
+    Calendar,
+    custom: Cell,
+  },
+  data: function () {
+    return {
+      value: null,
+    };
+  },
+  methods: {
+    changeHandler: function (value) {
+      const dayOfWeek = value.getDay();
+      // 0 = Sunday, 6 = Saturday
+      if (dayOfWeek !== 0 && dayOfWeek !== 6) {
+        this.value = value;
+      }
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dateinputs/calendar/custom/title/Title.vue b/vue-options-api-demos/dateinputs/calendar/custom/title/Title.vue
new file mode 100644
index 00000000..2a56ffd9
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/custom/title/Title.vue
@@ -0,0 +1,29 @@
+<template>
+<CalendarHeaderTitle 
+                    :id="id"
+                    :value="value"
+                    :view="view"
+                    @click="clickHandler"
+                >
+                {{view === 0
+                    ? value.split(' ')[0]
+                    : value}}
+                <code v-if="view !== 3">↑</code>
+            </CalendarHeaderTitle>
+</template>
+<script>
+import { CalendarHeaderTitle } from '@progress/kendo-vue-dateinputs';
+
+export default {
+     name: 'CustomHeaderTitle',
+    props: CalendarHeaderTitle.props,
+    emits: {
+        click:null
+    },
+    methods: {
+        clickHandler: function(e) {
+            this.$emit('click', e);
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/dateinputs/calendar/custom/title/main.js b/vue-options-api-demos/dateinputs/calendar/custom/title/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/custom/title/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/calendar/custom/title/main.vue b/vue-options-api-demos/dateinputs/calendar/custom/title/main.vue
new file mode 100644
index 00000000..e702e3e7
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/custom/title/main.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="example-config">
+        <calendar :header-title="customHeaderTitle" >
+          <template v-slot:myTemplate="{props}">
+            <custom
+            :value="props.value"
+            :view="props.view"
+            :id="props.id"
+            @click="(e) =>  props.onClick(e)" />
+        </template>
+        </calendar>
+    </div>
+</template>
+<script>
+import { Calendar } from '@progress/kendo-vue-dateinputs';
+import Title from './Title.vue';
+
+export default {
+    components: {
+      'calendar': Calendar,
+      'custom': Title
+    },
+    data: function(){
+        return {
+            customHeaderTitle: 'myTemplate'
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/calendar/dateranges/main.js b/vue-options-api-demos/dateinputs/calendar/dateranges/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/dateranges/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/calendar/dateranges/main.vue b/vue-options-api-demos/dateinputs/calendar/dateranges/main.vue
new file mode 100644
index 00000000..6e3e728d
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/dateranges/main.vue
@@ -0,0 +1,20 @@
+<template>
+<div id="vueapp" class="vue-app">
+    <div class="example-config">
+        <calendar 
+         :min="new Date(2010, 10, 10)"
+         :max="new Date(2010, 10, 20)"
+        />
+    </div>
+</div>
+</template>
+<script>
+import { Calendar } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'calendar': Calendar
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/calendar/dates/focused/main.js b/vue-options-api-demos/dateinputs/calendar/dates/focused/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/dates/focused/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/calendar/dates/focused/main.vue b/vue-options-api-demos/dateinputs/calendar/dates/focused/main.vue
new file mode 100644
index 00000000..b83a07fc
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/dates/focused/main.vue
@@ -0,0 +1,17 @@
+<template>
+<div id="vueapp" class="vue-app">
+    <div class="example-config">
+        <calendar :focused-date="new Date(2010, 10, 10)" />
+    </div>
+</div>
+</template>
+<script>
+import { Calendar } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'calendar': Calendar
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/calendar/dates/multiple/main.js b/vue-options-api-demos/dateinputs/calendar/dates/multiple/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/dates/multiple/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/calendar/dates/multiple/main.vue b/vue-options-api-demos/dateinputs/calendar/dates/multiple/main.vue
new file mode 100644
index 00000000..d063345c
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/dates/multiple/main.vue
@@ -0,0 +1,23 @@
+<template>
+<div id="vueapp" class="vue-app">
+    <div class="example-config">
+        <calendar 
+            :mode="'multiple'"
+            :value="[
+                new Date(2010, 10, 10),
+                new Date(2010, 10, 11),
+                new Date(2010, 10, 12)
+            ]" />
+    </div>
+</div>
+</template>
+<script>
+import { Calendar } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'calendar': Calendar
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/calendar/dates/range/main.js b/vue-options-api-demos/dateinputs/calendar/dates/range/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/dates/range/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/calendar/dates/range/main.vue b/vue-options-api-demos/dateinputs/calendar/dates/range/main.vue
new file mode 100644
index 00000000..58e8dbb0
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/dates/range/main.vue
@@ -0,0 +1,22 @@
+<template>
+<div id="vueapp" class="vue-app">
+    <div class="example-config">
+        <calendar 
+            :mode="'range'"
+            :value="{
+                start: new Date(2010, 10, 10),
+                end: new Date(2010, 10, 20)
+            }" />
+    </div>
+</div>
+</template>
+<script>
+import { Calendar } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'calendar': Calendar
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/calendar/dates/selected/main.js b/vue-options-api-demos/dateinputs/calendar/dates/selected/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/dates/selected/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/calendar/dates/selected/main.vue b/vue-options-api-demos/dateinputs/calendar/dates/selected/main.vue
new file mode 100644
index 00000000..0d9d0693
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/dates/selected/main.vue
@@ -0,0 +1,17 @@
+<template>
+<div id="vueapp" class="vue-app">
+    <div class="example-config">
+        <calendar :value="new Date(2010, 10, 10)" />
+    </div>
+</div>
+</template>
+<script>
+import { Calendar } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'calendar': Calendar
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/calendar/disabled/main.js b/vue-options-api-demos/dateinputs/calendar/disabled/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/calendar/disabled/main.vue b/vue-options-api-demos/dateinputs/calendar/disabled/main.vue
new file mode 100644
index 00000000..5e5da81c
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/disabled/main.vue
@@ -0,0 +1,17 @@
+<template>
+<div id="vueapp" class="vue-app">
+    <div class="example-config">
+        <calendar :disabled="true" />
+    </div>
+</div>
+</template>
+<script>
+import { Calendar } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'calendar': Calendar
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/calendar/json/main.js b/vue-options-api-demos/dateinputs/calendar/json/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/json/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/calendar/json/main.vue b/vue-options-api-demos/dateinputs/calendar/json/main.vue
new file mode 100644
index 00000000..c02f0922
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/json/main.vue
@@ -0,0 +1,34 @@
+<template>
+<div id="vueapp" class="vue-app">
+    <div class="example-config">
+        <calendar :value="value" @change="onChange" />
+    </div>
+</div>
+</template>
+<script>
+import { Calendar } from '@progress/kendo-vue-dateinputs';
+import { provideIntlService } from '@progress/kendo-vue-intl';
+
+export default {
+    components: {
+      'calendar': Calendar
+    },
+    data: function(){
+        return {
+            value: null
+        };
+    },
+    mounted: function(){
+          setTimeout(() => {
+            const date = '2016-01-04';
+            this.value = provideIntlService(this).parseDate(date);
+        }, 1000);
+    },
+    methods: {
+        onChange (event) {
+            this.value = event.value;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/calendar/keyboard/main.js b/vue-options-api-demos/dateinputs/calendar/keyboard/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/keyboard/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/calendar/keyboard/main.vue b/vue-options-api-demos/dateinputs/calendar/keyboard/main.vue
new file mode 100644
index 00000000..2dc524f8
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/keyboard/main.vue
@@ -0,0 +1,17 @@
+<template>
+<div id="vueapp" class="vue-app">
+    <div class="example-config">
+        <calendar />
+    </div>
+</div>
+</template>
+<script>
+import { Calendar } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'calendar': Calendar
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/calendar/multipleviews/main.js b/vue-options-api-demos/dateinputs/calendar/multipleviews/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/multipleviews/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/calendar/multipleviews/main.vue b/vue-options-api-demos/dateinputs/calendar/multipleviews/main.vue
new file mode 100644
index 00000000..d17b5e8a
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/multipleviews/main.vue
@@ -0,0 +1,36 @@
+<template>
+<div id="vueapp" class="vue-app">
+    <div class="example-config">
+        Number of rendered views: &nbsp;
+        <numerictextbox :style="{ width: '230px' }" :min="1" :max="10" @change="handleInputChange" :value="views">
+        </numerictextbox>
+    </div>
+    <calendar
+        :views=views
+    />
+</div>
+</template>
+<script>
+import { Calendar } from '@progress/kendo-vue-dateinputs';
+import { NumericTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        'calendar': Calendar,
+        'numerictextbox': NumericTextBox
+    },
+    data: function(){
+        return {
+            views: 2
+        }
+    },
+    methods: {
+        handleInputChange (event) {
+            if (!event.target.value || event.target.value < 11) {
+                this.views = event.target.value;
+            }
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/calendar/reverse-range/main.js b/vue-options-api-demos/dateinputs/calendar/reverse-range/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/reverse-range/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/calendar/reverse-range/main.vue b/vue-options-api-demos/dateinputs/calendar/reverse-range/main.vue
new file mode 100644
index 00000000..3ea995c1
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/reverse-range/main.vue
@@ -0,0 +1,41 @@
+<template>
+<div id="vueapp" class="vue-app">
+  <div class="example-wrapper">
+        <div class="example-config">
+            <p>
+                The value is: <br />
+                start: {{value.start ? value.start.toDateString() : ''}} <br />
+                end: {{value.end ? value.end.toDateString() : ''}}
+            </p>
+        </div>
+        <calendar
+            :allow-reverse="true"
+            @change="handleChange"
+            :mode="'range'"
+        ></calendar>
+    </div>
+</div>
+</template>
+<script>
+import { Calendar } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'calendar': Calendar
+    },
+    data: function() {
+        return {
+             value: {
+                start: null,
+                end: null
+            }
+        }
+    },
+    methods: {
+        handleChange (event) {
+            this.value = event.target.value;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/calendar/viewdepth/main.js b/vue-options-api-demos/dateinputs/calendar/viewdepth/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/viewdepth/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/calendar/viewdepth/main.vue b/vue-options-api-demos/dateinputs/calendar/viewdepth/main.vue
new file mode 100644
index 00000000..0e92d8c7
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/viewdepth/main.vue
@@ -0,0 +1,34 @@
+<template>
+<div id="vueapp" class="vue-app">
+     <div>
+            <div class="example-config">
+                Selected date is: <b>{{value ? value.toDateString() : ''}}</b>
+            </div>
+            <calendar
+                :bottom-view="'year'"
+                :top-view="'decade'"
+                @change="handleChange"
+            />
+        </div>
+</div>
+</template>
+<script>
+import { Calendar } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'calendar': Calendar
+    },
+    data: function(){
+        return {
+            value: null
+        };
+    },
+    methods: {
+        handleChange (event) {
+            this.value = event.value;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/calendar/week-numbers/main.js b/vue-options-api-demos/dateinputs/calendar/week-numbers/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/week-numbers/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/calendar/week-numbers/main.vue b/vue-options-api-demos/dateinputs/calendar/week-numbers/main.vue
new file mode 100644
index 00000000..07b28aea
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/calendar/week-numbers/main.vue
@@ -0,0 +1,17 @@
+<template>
+<div id="vueapp" class="vue-app">
+    <div class="example-config">
+        <calendar :week-number="true" />
+    </div>
+</div>
+</template>
+<script>
+import { Calendar } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'calendar': Calendar
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/common/es.json b/vue-options-api-demos/dateinputs/common/es.json
new file mode 100644
index 00000000..7fd085c9
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/common/es.json
@@ -0,0 +1,31 @@
+{
+    "datepicker": {
+        "toggleCalendar": "Alternar calendario"
+    },
+    "calendar": {
+        "today": "Hoy"
+    },
+    "dateinput": {
+        "increment": "Incrementar valor",
+        "decrement": "Disminuir valor"
+    },
+    "datetimepicker": {
+        "date": "Fecha",
+        "time": "Hora",
+        "cancel": "Cancelar",
+        "set": "Conjunto"
+    },
+    "timepicker": {
+        "set": "Conjunto",
+        "cancel": "Cancelar",
+        "now": "Ahora",
+        "selectNow": "Seleccionar ahora",
+        "toggleTimeSelector": "Selector de tiempo de alternancia",
+        "toggleClock": "Reloj de palanca"
+    },
+    "daterangepicker": {
+        "swapStartEnd": "Swap start and end values",
+        "start": "Comienzo",
+        "end": "Fin"
+    }
+}
diff --git a/vue-options-api-demos/dateinputs/dateinput/appearance/configurator/DateInputsStyleConfigurator.vue b/vue-options-api-demos/dateinputs/dateinput/appearance/configurator/DateInputsStyleConfigurator.vue
new file mode 100644
index 00000000..c1b36044
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/appearance/configurator/DateInputsStyleConfigurator.vue
@@ -0,0 +1,105 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Fill Mode
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="fillModes"
+              :value="fillMode"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleFillModeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+    fillMode: String,
+    rounded: String,
+  },
+  emits: [
+    "sizechange",
+    "fillmodechange",
+    "roundedchange",
+  ],
+  data() {
+    return {
+      sizes: ["small", "medium", "large"],
+      fillModes: ["solid", "outline", "flat"],
+      roundedOptions: ["small", "medium", "large", "full"],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleFillModeChange(event) {
+      this.$emit("fillmodechange", event);
+    },
+    handleRoundedChange(event) {
+      this.$emit("roundedchange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dateinputs/dateinput/appearance/configurator/main.js b/vue-options-api-demos/dateinputs/dateinput/appearance/configurator/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/appearance/configurator/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/dateinput/appearance/configurator/main.vue b/vue-options-api-demos/dateinputs/dateinput/appearance/configurator/main.vue
new file mode 100644
index 00000000..1b1774cd
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/appearance/configurator/main.vue
@@ -0,0 +1,49 @@
+`<template>
+  <div>
+    <DateInputsStyleConfigurator
+      :size="size"
+      @sizechange="setSize"
+      :fill-mode="fillMode"
+      @fillmodechange="setFillMode"
+      :rounded="rounded"
+      @roundedchange="setRounded"
+    />
+    <DateInput
+      :style="{ width: '230px'}"
+      :size="size"
+      :fill-mode="fillMode"
+      :rounded="rounded"
+      :spinners="true"
+    />
+  </div>
+</template>
+<script>
+import DateInputsStyleConfigurator from "./DateInputsStyleConfigurator.vue";
+import { DateInput } from '@progress/kendo-vue-dateinputs';
+
+export default {
+  components: {
+    DateInputsStyleConfigurator,
+    DateInput,
+  },
+  data() {
+    return {
+      size: "medium",
+      rounded: "medium",
+      fillMode: "solid",
+    };
+  },
+  methods: {
+    setRounded(event) {
+      this.rounded = event.value;
+    },
+    setSize(event) {
+      this.size = event.value;
+    },
+    setFillMode(event) {
+      this.fillMode = event.value;
+    },
+  },
+};
+</script>
+`
diff --git a/vue-options-api-demos/dateinputs/dateinput/appearance/fill-mode/main.js b/vue-options-api-demos/dateinputs/dateinput/appearance/fill-mode/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/appearance/fill-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/dateinput/appearance/fill-mode/main.vue b/vue-options-api-demos/dateinputs/dateinput/appearance/fill-mode/main.vue
new file mode 100644
index 00000000..15d867eb
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/appearance/fill-mode/main.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="example-config">
+    <div class="demo">
+      <span class="wrapper">
+        <span>Flat: </span>
+        <DateInput
+          :style="{ width: '170px' }"
+          :fill-mode="'flat'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Solid: </span>
+        <DateInput
+          :style="{ width: '170px' }"
+          :fill-mode="'solid'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Outline: </span>
+        <DateInput
+          :style="{ width: '170px' }"
+          :fill-mode="'outline'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Custom fill mode:</span>
+        <DateInput
+          :class="'custom-dateinput'"
+          :fill-mode="null"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { DateInput } from '@progress/kendo-vue-dateinputs';
+
+export default {
+  components: {
+    DateInput,
+  },
+};
+</script>
+
+<style>
+.custom-dateinput {
+  width: 200px;
+  background-color: #00aead;
+  border: 2px solid #bfd843;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/dateinputs/dateinput/appearance/rounded/main.js b/vue-options-api-demos/dateinputs/dateinput/appearance/rounded/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/appearance/rounded/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/dateinput/appearance/rounded/main.vue b/vue-options-api-demos/dateinputs/dateinput/appearance/rounded/main.vue
new file mode 100644
index 00000000..e5550b8c
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/appearance/rounded/main.vue
@@ -0,0 +1,111 @@
+`<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Small roundness: </span>
+        <DateInput
+          :style="{ width: '170px' }"
+          :rounded="'small'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Medium roundness: </span>
+        <DateInput
+          :style="{ width: '170px' }"
+          :rounded="'medium'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Large roundness: </span>
+        <DateInput
+          :style="{ width: '170px' }"
+          :rounded="'large'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Full roundness: </span>
+        <DateInput
+          :style="{ width: '170px' }"
+          :rounded="'full'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Custom roundness:</span>
+        <DateInput
+          :class="'custom-dateinput'"
+          :rounded="null"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { DateInput } from '@progress/kendo-vue-dateinputs';
+
+export default {
+  components: {
+    DateInput,
+  },
+};
+</script>
+
+<style>
+.custom-dateinput {
+  width: 200px;
+  border-bottom-right-radius: 15px;
+  border-top-left-radius: 15px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
+`
\ No newline at end of file
diff --git a/vue-options-api-demos/dateinputs/dateinput/appearance/size/main.js b/vue-options-api-demos/dateinputs/dateinput/appearance/size/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/appearance/size/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/dateinput/appearance/size/main.vue b/vue-options-api-demos/dateinputs/dateinput/appearance/size/main.vue
new file mode 100644
index 00000000..845a1cb3
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/appearance/size/main.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Small: </span>
+        <DateInput
+          :style="{ width: '170px' }"
+          :size="'small'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Medium: </span>
+        <DateInput
+          :style="{ width: '170px' }"
+          :size="'medium'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Large: </span>
+        <DateInput
+          :style="{ width: '170px' }"
+          :size="'large'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+    <span class="wrapper">
+      <span>Custom size:</span>
+      <DateInput
+        :class="'custom-dateinput'"
+        :size="null"
+        :data-items="[
+          'X-Small',
+          'Small',
+          'Medium',
+          'Large',
+          'X-Large',
+          '2X-Large',
+        ]"
+      />
+    </span>
+  </div>
+</template>
+<script>
+import { DateInput } from '@progress/kendo-vue-dateinputs';
+
+export default {
+  components: {
+    DateInput,
+  },
+};
+</script>
+
+<style>
+.custom-dateinput {
+  height: 40px;
+  width: 200px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/dateinputs/dateinput/basic/main.js b/vue-options-api-demos/dateinputs/dateinput/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/dateinput/basic/main.vue b/vue-options-api-demos/dateinputs/dateinput/basic/main.vue
new file mode 100644
index 00000000..faaba28b
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/basic/main.vue
@@ -0,0 +1,17 @@
+<template>
+<div id="vueapp" class="vue-app">
+    <div class="example-config">
+        <dateinput :style="{ width: '230px' }" />
+    </div>
+</div>
+</template>
+<script>
+import { DateInput } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'dateinput': DateInput
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/dateinput/date-ranges/basic/main.js b/vue-options-api-demos/dateinputs/dateinput/date-ranges/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/date-ranges/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/dateinput/date-ranges/basic/main.vue b/vue-options-api-demos/dateinputs/dateinput/date-ranges/basic/main.vue
new file mode 100644
index 00000000..8457bbf6
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/date-ranges/basic/main.vue
@@ -0,0 +1,38 @@
+<template>
+<div id="vueapp" class="vue-app">
+    <div class="example-config">
+        <p>Only values between {{min.toDateString()}} and {{max.toDateString()}} are valid</p>
+    </div>
+    <div >
+        <p>Select a date:</p>
+        <dateinput :style="{ width: '230px' }"
+            :value="value"
+            :min="min"
+            :max="max"
+            @change="changeDate"
+        />
+    </div>
+</div>
+</template>
+<script>
+import { DateInput } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'dateinput': DateInput
+    },
+    data: function() {
+        return {
+            value: new Date(2017, 1, 13),
+            min: new Date(2000, 2, 10),
+            max: new Date(2020, 2, 10)
+        };
+    },
+    methods: {
+        changeDate(event) {
+            this.value = event.value;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/dateinput/date-ranges/time/main.js b/vue-options-api-demos/dateinputs/dateinput/date-ranges/time/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/date-ranges/time/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/dateinput/date-ranges/time/main.vue b/vue-options-api-demos/dateinputs/dateinput/date-ranges/time/main.vue
new file mode 100644
index 00000000..a164eb13
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/date-ranges/time/main.vue
@@ -0,0 +1,35 @@
+<template>
+<div id="vueapp" class="vue-app">
+    <div>
+        <div class="example-config">
+            <p>Only values between {{minTime.toTimeString()}} and {{maxTime.toTimeString()}} are valid</p>
+        </div>
+        <div>
+            <p>Select a date:</p>
+            <dateinput :style="{ width: '230px' }"
+                :format="'t'"
+                v-model="value"
+                :min-time="minTime"
+                :max-time="maxTime"
+            />
+        </div>
+    </div>
+</div>
+</template>
+<script>
+import { DateInput } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'dateinput': DateInput
+    },
+    data: function() {
+        return {
+            value: new Date(2000, 2, 10, 8, 29),
+            minTime: new Date(2000, 2, 10, 8, 30),
+            maxTime: new Date(2000, 2, 10, 17, 30)
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/dateinput/disabled/main.js b/vue-options-api-demos/dateinputs/dateinput/disabled/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/dateinput/disabled/main.vue b/vue-options-api-demos/dateinputs/dateinput/disabled/main.vue
new file mode 100644
index 00000000..d9f5890f
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/disabled/main.vue
@@ -0,0 +1,30 @@
+<template>
+<div id="vueapp" class="vue-app">
+    <div class="example-config">
+        <dateinput :style="{ width: '230px' }" 
+        :disabled="true"
+        :value="value"
+        @change="changeDate" />
+    </div>
+</div>
+</template>
+<script>
+import { DateInput } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'dateinput': DateInput
+    },
+    data: function() {
+        return {
+            value: new Date()
+        };
+    },
+    methods: {
+        changeDate(event) {
+            this.value = event.value;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/dateinput/floating-label/main.js b/vue-options-api-demos/dateinputs/dateinput/floating-label/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/floating-label/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/dateinput/floating-label/main.vue b/vue-options-api-demos/dateinputs/dateinput/floating-label/main.vue
new file mode 100644
index 00000000..f82b0c09
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/floating-label/main.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <p>DateInput</p>
+    <dateinput :style="{ width: '230px' }"
+      :label="'Enter date:'"
+      @change="onChangeDateInput"
+      :placeholder="''"
+    />
+  </div>
+</template>
+<script>
+import { DateInput } from "@progress/kendo-vue-dateinputs";
+
+export default {
+  components: {
+    dateinput: DateInput,
+  },
+  data: function () {
+    return {
+      dateInputValue: undefined,
+    };
+  },
+  methods: {
+    onChangeDateInput: function (e) {
+      this.dateInputValue = e.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dateinputs/dateinput/formats/main.js b/vue-options-api-demos/dateinputs/dateinput/formats/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/formats/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/dateinput/formats/main.vue b/vue-options-api-demos/dateinputs/dateinput/formats/main.vue
new file mode 100644
index 00000000..add105cf
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/formats/main.vue
@@ -0,0 +1,52 @@
+<template>
+     <div class="example-wrapper">
+                <div class="col-xs-12 col-sm-6 example-col">
+                    <p>Select a long date:</p>
+                    <dateinput :style="{ width: '230px' }"
+                        :format="'dd-MMM-yyyy HH:mm:ss'"
+                        v-model="value"
+                    ></dateinput>
+                </div>
+                <div class="col-xs-12 col-sm-6 example-col">
+                    <p>Select a short date:</p>
+                    <dateinput :style="{ width: '230px' }"
+                        :format="'MMMM yyyy'"
+                        v-model="value"
+                    ></dateinput>
+                </div>
+                <div class="col-xs-12 col-sm-6 example-col">
+                    <p>Custom Skeleton:</p>
+                    <dateinput :style="{ width: '230px' }"
+                        :format="{
+                            skeleton: 'yMMMdEHm'
+                        }"
+                        v-model="value"
+                     ></dateinput>
+                </div>
+                <div class="col-xs-12 col-sm-6 example-col">
+                    <p>Custom Format:</p>
+                    <dateinput :style="{ width: '230px' }"
+                        :format='{
+                            year: "numeric",
+                            month: "short"
+                        }'
+                        v-model="value"
+                     ></dateinput>
+            </div>
+    </div>
+</template>
+<script>
+import { DateInput } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'dateinput': DateInput
+    },
+    data: function() {
+        return {
+            value: new Date(2017, 2, 10, 13, 30, 0)
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/dateinput/forms/basic/main.js b/vue-options-api-demos/dateinputs/dateinput/forms/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/forms/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/dateinput/forms/basic/main.vue b/vue-options-api-demos/dateinputs/dateinput/forms/basic/main.vue
new file mode 100644
index 00000000..0ea5cc1a
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/forms/basic/main.vue
@@ -0,0 +1,67 @@
+<template>
+    <div class="row example-wrapper">
+        <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+            <div class="card">
+                <div class="card-block">
+                    <form class="k-form" @submit="handleSubmit">
+                        <fieldset>
+                            <legend>Please select dates of your stay:</legend>
+                            <label class="k-form-field">
+                                <span>Check-In</span>
+                                <dateinput 
+                                    :name="'checkin'"
+                                    :required="true"
+                                    :min="today"
+                                />
+                            </label>
+                            <label class="k-form-field">
+                                <span>Check-Out</span>
+                                <dateinput
+                                    :name="'checkout'"
+                                    :required="true"
+                                    :min="today"
+                                />
+                            </label>
+                        </fieldset>
+                        <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                    </form>
+                </div>
+            </div>
+        </div>
+            <div v-if="success"
+                class="alert alert-success"
+                :style="{ position: 'absolute' }"
+            >
+                Form submitted!
+            </div>
+    </div>
+</template>
+<script>
+import { Button } from '@progress/kendo-vue-buttons';
+import { DateInput } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'dateinput': DateInput,
+      'kbutton': Button
+    },
+    data: function() {
+        return {
+            success: false,
+            today: new Date()
+        };
+    },
+    methods: {
+        handleSubmit (event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(
+                () => { 
+                    this.success= false; 
+                }, 
+                3000);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/dateinput/forms/custom-message/main.js b/vue-options-api-demos/dateinputs/dateinput/forms/custom-message/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/forms/custom-message/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/dateinput/forms/custom-message/main.vue b/vue-options-api-demos/dateinputs/dateinput/forms/custom-message/main.vue
new file mode 100644
index 00000000..2c620cb8
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/forms/custom-message/main.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="row example-wrapper">
+        <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+            <div class="card">
+                <div class="card-block">
+                    <form class="k-form" @submit="handleSubmit">
+                        <fieldset>
+                            <legend>Please select dates of your stay:</legend>
+                            <label class="k-form-field">
+                                <span>Check-In</span>
+                                <dateinput 
+                                    :name="'checkin'"
+                                    :default-value="new Date(2018, 1, 20)"
+                                    :required="true"
+                                    :min="today"
+                                    :validation-message="checkInValidationMessage"
+                                ></dateinput>
+                            </label>
+                            <label class="k-form-field">
+                                <span>Check-Out</span>
+                                <dateinput
+                                    :name="'checkout'"
+                                    :required="true"
+                                    :min="today"
+                                    :validation-message="checkOutValidationMessage"
+                                />
+                            </label>
+                        </fieldset>
+                        <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                    </form>
+                </div>
+            </div>
+        </div>
+        <div v-if="success"
+            class="alert alert-success"
+            :style="{ position: 'absolute' }"
+        >
+            Form submitted!
+        </div>
+    </div>
+</template>
+<script>
+import { DateInput } from '@progress/kendo-vue-dateinputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'dateinput': DateInput,
+      'kbutton': Button
+    },
+    data: function() {
+        return {
+            success: false,
+            today: new Date(),
+            checkInValidationMessage: "Dates in the past are not valid Check-In dates.",
+            checkOutValidationMessage: "The Check-Out date is required."
+        };
+    },
+    methods: {
+        handleSubmit (event) {
+            event.preventDefault();
+            this.success= true ;
+            setTimeout(() => { this.success= false; }, 3000);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/dateinput/forms/disable-styles/main.js b/vue-options-api-demos/dateinputs/dateinput/forms/disable-styles/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/forms/disable-styles/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/dateinput/forms/disable-styles/main.vue b/vue-options-api-demos/dateinputs/dateinput/forms/disable-styles/main.vue
new file mode 100644
index 00000000..9a4d1ac7
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/forms/disable-styles/main.vue
@@ -0,0 +1,95 @@
+<template>
+ <div class="row example-wrapper">
+        <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+            <div class="card">
+                <div class="card-block">
+                    <form class="k-form" @submit="handleSubmit">
+                        <fieldset>
+                            <legend>Please select dates of your stay:</legend>
+                            <label class="k-form-field">
+                                <span>Check-In</span>
+                                <dateinput 
+                                    :name="'checkin'"
+                                    :required="true"
+                                    :format="'dd-MMM-yyyy'"
+                                    :spinners='true'
+                                    :min='today'
+                                    :value='checkin'
+                                    @change='handleChange'
+                                    :validation-message="checkin === null
+                                        ? 'Check-In date is required!'
+                                        : 'Check-In date cannot be in the past!'"
+                                ></dateinput>
+                            </label>
+                            <label class="k-form-field">
+                                <span>Check-Out</span>
+                                <dateinput 
+                                    :validity-styles="false"
+                                    :name="'checkout'"
+                                    :required="true"
+                                    :format="'dd-MMM-yyyy'"
+                                    :spinners='true'
+                                    :valid="(checkin !== null && checkout !== null)
+                                        && (checkin.getTime() < checkout.getTime())"
+                                    :value='checkout'
+                                    @change="handleChange"
+                                    :validation-message="checkout === null
+                                        ? 'Check-Out date is required!'
+                                        : 'Check-Out date cannot be before Check-In date!'"
+                                ></dateinput>
+                            </label>
+                            <label class="k-form-field">
+                                <span>Additional Comments</span>
+                                <textarea
+                                    class="k-textarea"
+                                    :style="{ width: '100%' }"
+                                    :name="'additionalComments'"
+                                    :value="additionalComments"
+                                    @change="handleChange"
+                                ></textarea>
+                            </label>
+                        </fieldset>
+                        <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                    </form>
+                </div>
+            </div>
+        </div>
+        <div v-if="success"
+            class="alert alert-success"
+            :style="{ position: 'absolute' }"
+        >
+            Form submitted!
+        </div>
+    </div>
+</template>
+<script>
+import { DateInput } from '@progress/kendo-vue-dateinputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'dateinput': DateInput,
+      'kbutton': Button
+    },
+    data: function() {
+        return {
+            checkin: new Date(2022, 1, 20),
+            checkout: null,
+            additionalComments: '',
+            success: false,
+            today: new Date()
+        };
+    },
+    methods: {
+        handleChange (event) {
+            this[event.target.name]= event.target.value;
+        },
+        handleSubmit (event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(() => { this.success = false; }, 3000);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/dateinput/forms/override/main.js b/vue-options-api-demos/dateinputs/dateinput/forms/override/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/forms/override/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/dateinput/forms/override/main.vue b/vue-options-api-demos/dateinputs/dateinput/forms/override/main.vue
new file mode 100644
index 00000000..94f579ee
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/forms/override/main.vue
@@ -0,0 +1,97 @@
+<template>
+ <div class="row example-wrapper">
+        <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+            <div class="card">
+                <div class="card-block">
+                    <form class="k-form"  @submit="handleSubmit">
+                        <fieldset>
+                            <legend>Please select dates of your stay:</legend>
+                            <label class="k-form-field">
+                                <span>Check-In</span>
+                                <dateinput 
+                                    :name="'checkin'"
+                                    :required="true"
+                                    :format="'dd-MMM-yyyy'"
+                                    :spinners="true"
+                                    :min="today"
+
+                                    :value="checkin"
+                                    @change='handleChange'
+                                    :validation-message="checkin === null
+                                        ? 'Check-In date is required!'
+                                        : 'Check-In date cannot be in the past!'"
+                                ></dateinput>
+                            </label>
+                            <label class="k-form-field">
+                                <span>Check-Out</span>
+                                <dateinput
+                                    :name="'checkout'"
+                                    :required="true"
+                                    :format="'dd-MMM-yyyy'"
+                                    :spinners="true"
+
+                                    :valid="(checkin !== null && checkout !== null)
+                                        && (checkin.getTime() < checkout.getTime())"
+
+                                    :value="checkout"
+                                    @change="handleChange"
+                                    :validation-message="checkout === null
+                                        ? 'Check-Out date is required!'
+                                        : 'Check-Out date cannot be before Check-In date!'"
+                                ></dateinput>
+                            </label>
+                            <label class="k-form-field">
+                                <span>Additional Comments</span>
+                                <textarea
+                                    class="k-textarea"
+                                    :style="{ width: '100%' }"
+                                    :name="'additionalComments'"
+                                    :value="additionalComments"
+                                    @change="handleChange"
+                                />
+                            </label>
+                        </fieldset>
+                         <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                    </form>
+                </div>
+            </div>
+        </div>
+        <div v-if="success"
+            class="alert alert-success"
+            :style="{ position: 'absolute' }"
+        >
+            Form submitted!
+        </div>
+    </div>
+</template>
+<script>
+import { DateInput } from '@progress/kendo-vue-dateinputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'dateinput': DateInput,
+      'kbutton': Button
+    },
+     data: function() {
+        return {
+            checkin: null,
+            checkout: null,
+            additionalComments: '',
+            success: false,
+            today: new Date()
+        };
+    },
+    methods: {
+        handleChange (event) {
+            this[event.target.name]= event.target.value;
+        },
+        handleSubmit (event) {
+            event.preventDefault();
+            this.success= true;
+            setTimeout(() => { this.success = false; }, 3000);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/dateinput/incremental-steps/main.js b/vue-options-api-demos/dateinputs/dateinput/incremental-steps/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/incremental-steps/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/dateinput/incremental-steps/main.vue b/vue-options-api-demos/dateinputs/dateinput/incremental-steps/main.vue
new file mode 100644
index 00000000..970e602e
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/incremental-steps/main.vue
@@ -0,0 +1,31 @@
+<template>
+<div id="vueapp" class="vue-app">
+    <div class="col-xs-12 col-sm-6 example-col">
+        <p>Incremental steps:</p>
+        <p  v-for="step in Object.keys(steps)" :key="step">
+        {{step}} - {{steps[step]}}
+        </p>
+        <dateinput :style="{ width: '230px' }"
+            :format="'MM/dd/yyyy hh:mm a'"
+            :steps="steps"
+            v-model="value"
+        />
+    </div>
+</div>
+</template>
+<script>
+import { DateInput } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'dateinput': DateInput
+    },
+    data: function() {
+        return {
+            value: new Date(2017, 2, 10, 13, 30, 0),
+            steps: { year: 10, day: 5, hour: 2, minute: 15 }
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/dateinput/input-mode/main.js b/vue-options-api-demos/dateinputs/dateinput/input-mode/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/input-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/dateinputs/dateinput/input-mode/main.vue b/vue-options-api-demos/dateinputs/dateinput/input-mode/main.vue
new file mode 100644
index 00000000..68da7199
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/input-mode/main.vue
@@ -0,0 +1,43 @@
+<template>
+    <div class="k-d-grid k-grid-cols-sm-1 k-grid-cols-md-2 k-gap-4 k-max-w-fit">
+        <div class="k-col-span-1">
+            <div>
+                inputmode=text <i>(default)</i>
+            </div>
+            <dateinput
+                :format='{
+                    year: "numeric",
+                    month: "long",
+                    day: "numeric"
+                }'
+                :default-value="value"
+                :input-attributes="{ inputMode: 'text' }"
+                :style="{ width: '300px' }"
+            />
+        </div>
+        <div class="k-col-span-1">
+            <div>inputmode=numeric</div>
+            <dateinput
+                :format="'dd-MM-yyyy HH:mm:ss'"
+                :default-value="value"
+                :input-attributes="{ inputMode: 'numeric' }"
+                :style="{ width: '300px' }"
+            />
+        </div>
+    </div>
+</template>
+<script>
+import { DateInput } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+        'dateinput': DateInput
+    },
+    data() {
+        return {
+            value: new Date()
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/dateinput/keyboard/main.js b/vue-options-api-demos/dateinputs/dateinput/keyboard/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/keyboard/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/dateinput/keyboard/main.vue b/vue-options-api-demos/dateinputs/dateinput/keyboard/main.vue
new file mode 100644
index 00000000..faaba28b
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/keyboard/main.vue
@@ -0,0 +1,17 @@
+<template>
+<div id="vueapp" class="vue-app">
+    <div class="example-config">
+        <dateinput :style="{ width: '230px' }" />
+    </div>
+</div>
+</template>
+<script>
+import { DateInput } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'dateinput': DateInput
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/dateinput/placeholders/main.js b/vue-options-api-demos/dateinputs/dateinput/placeholders/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/placeholders/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/dateinput/placeholders/main.vue b/vue-options-api-demos/dateinputs/dateinput/placeholders/main.vue
new file mode 100644
index 00000000..bbbcc3d5
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/placeholders/main.vue
@@ -0,0 +1,58 @@
+<template>
+<div id="vueapp" class="vue-app">
+    <div class="row example-wrapper" :style="{ minHeight: 450 }">
+                <div class="col-xs-12 col-md-6 example-col">
+                    <p>Full-length format description:</p>
+                    <dateinput :style="{ width: '230px' }" :format-placeholder="'wide'" ></dateinput>
+                </div>
+
+                <div class="col-xs-12 col-md-6 example-col">
+                    <p>Narrow-length format description:</p>
+                    <dateinput :style="{ width: '230px' }" :format-placeholder="'narrow'" ></dateinput>
+                </div>
+
+                <div class="col-xs-12 col-md-6 example-col">
+                    <p>Short-length format description:</p>
+                    <dateinput :style="{ width: '230px' }" :format-placeholder="'short'" ></dateinput>
+                </div>
+
+                <div class="col-xs-12 col-md-6 example-col">
+                    <p>Display defined format:</p>
+                    <dateinput :style="{ width: '230px' }"
+                        :format="'MM/dd/yyyy'"
+                        :format-placeholder="'formatPattern'"
+                    ></dateinput>
+                </div>
+
+                <div class="col-xs-12 col-md-6 example-col">
+                    <p>Custom defined format descriptions</p>
+                    <dateinput :style="{ width: '230px' }"
+                        :format="'G'"
+                        :format-placeholder="customFormatPlaceholder"
+                    ></dateinput>
+                </div>
+    </div>
+</div>
+</template>
+<script>
+import { DateInput } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'dateinput': DateInput
+    },
+    data: function() {
+        return {
+             customFormatPlaceholder: {
+                year: 'y',
+                month: 'M',
+                day: 'd',
+                hour: 'h',
+                minute: 'm',
+                second: 's'
+            }
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/dateinput/spin-buttons/main.js b/vue-options-api-demos/dateinputs/dateinput/spin-buttons/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/spin-buttons/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/dateinput/spin-buttons/main.vue b/vue-options-api-demos/dateinputs/dateinput/spin-buttons/main.vue
new file mode 100644
index 00000000..5abc45db
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/dateinput/spin-buttons/main.vue
@@ -0,0 +1,30 @@
+<template>
+<div id="vueapp" class="vue-app">
+    <div class="example-config">
+        <dateinput :style="{ width: '230px' }" 
+        :spinners="true"
+        :value="value"
+        @change="changeDate" />
+    </div>
+</div>
+</template>
+<script>
+import { DateInput } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'dateinput': DateInput
+    },
+    data: function() {
+        return {
+            value: new Date()
+        };
+    },
+    methods: {
+        changeDate(event) {
+            this.value = event.value;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datepicker/appearance/configurator/DateInputsStyleConfigurator.vue b/vue-options-api-demos/dateinputs/datepicker/appearance/configurator/DateInputsStyleConfigurator.vue
new file mode 100644
index 00000000..c1b36044
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/appearance/configurator/DateInputsStyleConfigurator.vue
@@ -0,0 +1,105 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Fill Mode
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="fillModes"
+              :value="fillMode"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleFillModeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+    fillMode: String,
+    rounded: String,
+  },
+  emits: [
+    "sizechange",
+    "fillmodechange",
+    "roundedchange",
+  ],
+  data() {
+    return {
+      sizes: ["small", "medium", "large"],
+      fillModes: ["solid", "outline", "flat"],
+      roundedOptions: ["small", "medium", "large", "full"],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleFillModeChange(event) {
+      this.$emit("fillmodechange", event);
+    },
+    handleRoundedChange(event) {
+      this.$emit("roundedchange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dateinputs/datepicker/appearance/configurator/main.js b/vue-options-api-demos/dateinputs/datepicker/appearance/configurator/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/appearance/configurator/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datepicker/appearance/configurator/main.vue b/vue-options-api-demos/dateinputs/datepicker/appearance/configurator/main.vue
new file mode 100644
index 00000000..71e9d9df
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/appearance/configurator/main.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <DateInputsStyleConfigurator
+      :size="size"
+      @sizechange="setSize"
+      :fill-mode="fillMode"
+      @fillmodechange="setFillMode"
+      :rounded="rounded"
+      @roundedchange="setRounded"
+    />
+    <DatePicker
+       :style="{ width: '230px'}"
+      :size="size"
+      :fill-mode="fillMode"
+      :rounded="rounded"
+    />
+  </div>
+</template>
+<script>
+import DateInputsStyleConfigurator from "./DateInputsStyleConfigurator.vue";
+import { DatePicker } from "@progress/kendo-vue-dateinputs";
+
+export default {
+  components: {
+    DateInputsStyleConfigurator,
+    DatePicker,
+  },
+  data() {
+    return {
+      size: "medium",
+      rounded: "medium",
+      fillMode: "solid",
+    };
+  },
+  methods: {
+    setRounded(event) {
+      this.rounded = event.value;
+    },
+    setSize(event) {
+      this.size = event.value;
+    },
+    setFillMode(event) {
+      this.fillMode = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dateinputs/datepicker/appearance/fill-mode/main.js b/vue-options-api-demos/dateinputs/datepicker/appearance/fill-mode/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/appearance/fill-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datepicker/appearance/fill-mode/main.vue b/vue-options-api-demos/dateinputs/datepicker/appearance/fill-mode/main.vue
new file mode 100644
index 00000000..d11e28bb
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/appearance/fill-mode/main.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="example-config">
+    <div class="demo">
+      <span class="wrapper">
+        <span>Flat: </span>
+        <DatePicker
+          :style="{ width: '170px' }"
+          :fill-mode="'flat'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Solid: </span>
+        <DatePicker
+          :style="{ width: '170px' }"
+          :fill-mode="'solid'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Outline: </span>
+        <DatePicker
+          :style="{ width: '170px' }"
+          :fill-mode="'outline'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Custom fill mode:</span>
+        <DatePicker
+          :class="'custom-datepicker'"
+          :fill-mode="null"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { DatePicker} from '@progress/kendo-vue-dateinputs';
+
+export default {
+  components: {
+    DatePicker,
+  },
+};
+</script>
+
+<style>
+.custom-datepicker {
+  width: 200px;
+  background-color: #00aead;
+  border: 2px solid #bfd843;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/dateinputs/datepicker/appearance/rounded/main.js b/vue-options-api-demos/dateinputs/datepicker/appearance/rounded/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/appearance/rounded/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datepicker/appearance/rounded/main.vue b/vue-options-api-demos/dateinputs/datepicker/appearance/rounded/main.vue
new file mode 100644
index 00000000..1f95018d
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/appearance/rounded/main.vue
@@ -0,0 +1,111 @@
+`<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Small roundness: </span>
+        <DatePicker
+          :style="{ width: '170px' }"
+          :rounded="'small'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Medium roundness: </span>
+        <DatePicker
+          :style="{ width: '170px' }"
+          :rounded="'medium'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Large roundness: </span>
+        <DatePicker
+          :style="{ width: '170px' }"
+          :rounded="'large'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Full roundness: </span>
+        <DatePicker
+          :style="{ width: '170px' }"
+          :rounded="'full'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Custom roundness:</span>
+        <DatePicker
+          :class="'custom-datepicker'"
+          :rounded="null"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+  components: {
+    DatePicker,
+  },
+};
+</script>
+
+<style>
+.custom-datepicker {
+  width: 200px;
+  border-bottom-right-radius: 15px;
+  border-top-left-radius: 15px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
+`
\ No newline at end of file
diff --git a/vue-options-api-demos/dateinputs/datepicker/appearance/size/main.js b/vue-options-api-demos/dateinputs/datepicker/appearance/size/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/appearance/size/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datepicker/appearance/size/main.vue b/vue-options-api-demos/dateinputs/datepicker/appearance/size/main.vue
new file mode 100644
index 00000000..af223daa
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/appearance/size/main.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Small: </span>
+        <DatePicker
+          :style="{ width: '170px' }"
+          :size="'small'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Medium: </span>
+        <DatePicker
+          :style="{ width: '170px' }"
+          :size="'medium'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Large: </span>
+        <DatePicker
+          :style="{ width: '170px' }"
+          :size="'large'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+    <span class="wrapper">
+      <span>Custom size:</span>
+      <DatePicker
+        :class="'custom-datepicker'"
+        :size="null"
+        :data-items="[
+          'X-Small',
+          'Small',
+          'Medium',
+          'Large',
+          'X-Large',
+          '2X-Large',
+        ]"
+      />
+    </span>
+  </div>
+</template>
+<script>
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+  components: {
+    DatePicker,
+  },
+};
+</script>
+
+<style>
+.custom-datepicker {
+  height: 40px;
+  width: 200px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/dateinputs/datepicker/controlled/main.js b/vue-options-api-demos/dateinputs/datepicker/controlled/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/controlled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datepicker/controlled/main.vue b/vue-options-api-demos/dateinputs/datepicker/controlled/main.vue
new file mode 100644
index 00000000..aa44a2dd
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/controlled/main.vue
@@ -0,0 +1,34 @@
+<template>
+   <div class="row">
+        <div class="example-config col-xs-12 col-md-12 example-col">
+            <p>The value is: {{value ? value.toDateString() : ''}}</p>
+        </div>
+        <div class="col-xs-12 col-md-12 example-col">
+            <p>Controlled DatePicker</p>
+            <datepicker :style="{ width: '230px' }"
+                :value="value"
+                @change="handleChange"
+            />
+        </div>
+    </div>
+</template>
+<script>
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'datepicker': DatePicker
+    },
+     data: function() {
+        return {
+            value: new Date()
+        };
+    },
+    methods: {
+        handleChange(event) {
+            this.value = event.target.value;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datepicker/custom/calendar/CustomCalendar.vue b/vue-options-api-demos/dateinputs/datepicker/custom/calendar/CustomCalendar.vue
new file mode 100644
index 00000000..0b4d9d8f
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/custom/calendar/CustomCalendar.vue
@@ -0,0 +1,28 @@
+<template>
+ <Calendar
+            :min="new Date()"
+            :value="value"
+             @change="handleChange"
+        />
+</template>
+<script>
+import { Calendar } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    props: Calendar.props,
+    components: {
+        Calendar
+    },
+    methods: {
+        handleChange (event) {
+              this.$emit('change', {
+                    event: event,
+                    value: event.value,
+                    target: {
+                        value: event.value
+                    }
+                });
+        }
+    },
+}
+</script>
diff --git a/vue-options-api-demos/dateinputs/datepicker/custom/calendar/main.js b/vue-options-api-demos/dateinputs/datepicker/custom/calendar/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/custom/calendar/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datepicker/custom/calendar/main.vue b/vue-options-api-demos/dateinputs/datepicker/custom/calendar/main.vue
new file mode 100644
index 00000000..11a6ab30
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/custom/calendar/main.vue
@@ -0,0 +1,27 @@
+<template>
+     <datepicker :style="{ width: '230px' }"
+        :calendar="customCalendar"
+        :show="true"
+     >
+        <template v-slot:myTemplate="{props}">
+            <custom :value="props.value" @change="(ev) => props.onChange(ev)" />
+        </template>
+    </datepicker>
+</template>
+<script>
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+import CustomCalendar from './CustomCalendar.vue';
+
+export default {
+    components: {
+      'datepicker': DatePicker,
+      'custom': CustomCalendar
+    },
+    data: function() {
+        return {
+            customCalendar: 'myTemplate'
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datepicker/custom/dateinput/CustomDateInput.vue b/vue-options-api-demos/dateinputs/datepicker/custom/dateinput/CustomDateInput.vue
new file mode 100644
index 00000000..270489d7
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/custom/dateinput/CustomDateInput.vue
@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <input
+      :id="'day'"
+      :style="inputStyle"
+      type="number"
+      data-section="day"
+      :value="value.getDate()"
+      @change="handleChange"
+    />
+    <input
+      :id="'month'"
+      :style="inputStyle"
+      type="number"
+      data-section="month"
+      :value="value.getMonth() + 1"
+      @change="handleChange"
+    />
+    <input
+      :id="'year'"
+      :style="inputStyle"
+      type="number"
+      data-section="year"
+      :value="value.getFullYear()"
+      @change="handleChange"
+    />
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    value: Date,
+  },
+  emits: {
+    change: null,
+  },
+  data() {
+    return {
+      inputStyle: {
+        width: '90px',
+      },
+      today: new Date(),
+    };
+  },
+  methods: {
+    handleChange(event) {
+      const date = {
+        day: this.$props.value.getDate(),
+        month: this.$props.value.getMonth(),
+        year: this.$props.value.getFullYear(),
+      };
+
+      date[event.target.getAttribute('data-section')] = Number(
+        event.target.value
+      );
+
+      const value =
+        event.target.id === 'month'
+          ? new Date(date.year, date.month - 1, date.day)
+          : new Date(date.year, date.month, date.day);
+
+      this.$emit('change', {
+        value,
+        event,
+      });
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dateinputs/datepicker/custom/dateinput/main.js b/vue-options-api-demos/dateinputs/datepicker/custom/dateinput/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/custom/dateinput/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datepicker/custom/dateinput/main.vue b/vue-options-api-demos/dateinputs/datepicker/custom/dateinput/main.vue
new file mode 100644
index 00000000..40a49098
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/custom/dateinput/main.vue
@@ -0,0 +1,29 @@
+<template>
+  <datepicker
+    :style="{ width: '260px' }"
+    :date-input="customDateInput"
+    :default-value="new Date()"
+    :width="'270px'"
+    :show="true"
+  >
+    <template v-slot:myTemplate="{ props }">
+      <custom :value="props.value" @change="(e) => props.onChange(e)" />
+    </template>
+  </datepicker>
+</template>
+<script>
+import CustomDateInput from './CustomDateInput.vue';
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+  components: {
+    datepicker: DatePicker,
+    custom: CustomDateInput,
+  },
+  data() {
+    return {
+      customDateInput: 'myTemplate',
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dateinputs/datepicker/custom/popup/CustomPopup.vue b/vue-options-api-demos/dateinputs/datepicker/custom/popup/CustomPopup.vue
new file mode 100644
index 00000000..61c395cc
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/custom/popup/CustomPopup.vue
@@ -0,0 +1,27 @@
+<template>
+    <Popup 
+        :anchor="'datepicker'"
+        :show="this.$props.show"
+        :anchor-align="{
+            horizontal: 'center',
+            vertical: 'bottom'
+        }"
+        :popup-align="{
+            horizontal: 'center',
+            vertical: 'top'
+        }"
+    >
+    <slot/>
+    </Popup>
+</template>
+<script>
+import { Popup } from '@progress/kendo-vue-popup';
+export default {
+     props: {
+        show: Boolean
+      },
+    components: {
+        Popup
+    }
+}
+</script>
diff --git a/vue-options-api-demos/dateinputs/datepicker/custom/popup/main.js b/vue-options-api-demos/dateinputs/datepicker/custom/popup/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/custom/popup/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datepicker/custom/popup/main.vue b/vue-options-api-demos/dateinputs/datepicker/custom/popup/main.vue
new file mode 100644
index 00000000..368eaa38
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/custom/popup/main.vue
@@ -0,0 +1,29 @@
+<template>
+     <div :style="{ textAlign: 'center' }">
+        <datepicker :style="{ width: '230px' }"
+            ref="datepicker"
+            :popup="customPopup"
+            >
+        <template v-slot:myTemplate="{props}">
+            <custom :show="props.show" />
+        </template>
+        </datepicker>
+    </div>
+</template>
+<script>
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+import CustomPopup from './CustomPopup.vue';
+
+export default {
+    components: {
+      'datepicker': DatePicker,
+      'custom': CustomPopup
+    },
+    data: function() {
+       return {
+            customPopup: CustomPopup
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datepicker/custom/toggle/CustomToggleButton.vue b/vue-options-api-demos/dateinputs/datepicker/custom/toggle/CustomToggleButton.vue
new file mode 100644
index 00000000..b583eace
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/custom/toggle/CustomToggleButton.vue
@@ -0,0 +1,24 @@
+<template>
+<toggle-button @click="handleClick">
+            <span class="k-icon k-i-sort-desc-sm"></span>
+        </toggle-button>
+</template>
+<script>
+import { ToggleButton } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    emits: {
+        'click': null,
+        'mousedown': null,
+        'mouseup': null
+    },
+    components: {
+        'toggle-button': ToggleButton
+    },
+    methods: {
+        handleClick: function(e) {
+            this.$emit('click', e);
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/dateinputs/datepicker/custom/toggle/main.js b/vue-options-api-demos/dateinputs/datepicker/custom/toggle/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/custom/toggle/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datepicker/custom/toggle/main.vue b/vue-options-api-demos/dateinputs/datepicker/custom/toggle/main.vue
new file mode 100644
index 00000000..913f5435
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/custom/toggle/main.vue
@@ -0,0 +1,28 @@
+<template>
+     <div :style="{ textAlign: 'center' }">
+        <datepicker :style="{ width: '230px' }"
+            :toggle-button="customToggleButton"
+            >
+        <template v-slot:myTemplate="{props}">
+            <custom @click="(ev) => props.onClick(ev)" />
+        </template>
+        </datepicker>
+    </div>
+</template>
+<script>
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+import ToggleButton from './CustomToggleButton.vue';
+
+export default {
+    components: {
+      'datepicker': DatePicker,
+      'custom': ToggleButton
+    },
+    data: function() {
+        return {
+            customToggleButton: 'myTemplate'
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datepicker/datelimits/main.js b/vue-options-api-demos/dateinputs/datepicker/datelimits/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/datelimits/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datepicker/datelimits/main.vue b/vue-options-api-demos/dateinputs/datepicker/datelimits/main.vue
new file mode 100644
index 00000000..f5bdc69f
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/datelimits/main.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+        <div >
+            <p>Select a date:</p>
+            <datepicker :style="{ width: '230px' }"
+                :min="min"
+                :max="max"
+                :default-value="defaultValue"
+            ></datepicker>
+        </div>
+    </div>
+</template>
+<script>
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'datepicker': DatePicker
+    },
+    data: function() {
+      return {
+          min: new Date(2000, 2, 10),
+          max: new Date(2002, 2, 10),
+          defaultValue: new Date(2001, 2, 10)
+      };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datepicker/default/main.js b/vue-options-api-demos/dateinputs/datepicker/default/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/default/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datepicker/default/main.vue b/vue-options-api-demos/dateinputs/datepicker/default/main.vue
new file mode 100644
index 00000000..3ee44137
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/default/main.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="row">
+        <div class="col-xs-12 col-md-12 example-col">
+            <p>DatePicker with default value</p>
+            <datepicker :style="{ width: '230px' }"
+                :default-value="defaultValue"
+             ></datepicker>
+        </div>
+    </div>
+</template>
+<script>
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'datepicker': DatePicker
+    },
+    data: function() {
+        return {
+            defaultValue: new Date()
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datepicker/defaultpopup/main.js b/vue-options-api-demos/dateinputs/datepicker/defaultpopup/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/defaultpopup/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datepicker/defaultpopup/main.vue b/vue-options-api-demos/dateinputs/datepicker/defaultpopup/main.vue
new file mode 100644
index 00000000..e9c2f7f1
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/defaultpopup/main.vue
@@ -0,0 +1,26 @@
+<template>
+ <div class="row">
+        <div class="col-xs-12 col-md-12 example-col">
+             <p>DatePicker with default shown state</p>
+            <datepicker :style="{ width: '230px' }"
+                :default-show="defaultShow"
+             >
+             </datepicker>
+        </div>
+    </div>
+</template>
+<script>
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'datepicker': DatePicker
+    },
+    data: function() {
+        return {
+            defaultShow: true
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datepicker/disabled/main.js b/vue-options-api-demos/dateinputs/datepicker/disabled/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datepicker/disabled/main.vue b/vue-options-api-demos/dateinputs/datepicker/disabled/main.vue
new file mode 100644
index 00000000..c56210bf
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/disabled/main.vue
@@ -0,0 +1,27 @@
+<template>
+<div class="row">
+        <div class="col-xs-12 col-md-12 example-col">
+            <p>Today's date:</p>
+            <datepicker :style="{ width: '230px' }"
+                :disabled="true" 
+                :value="defaultValue" 
+                :show="true"
+             ></datepicker>
+        </div>
+    </div>
+</template>
+<script>
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'datepicker': DatePicker
+    },
+    data: function() {
+        return {
+            defaultValue: new Date()
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datepicker/events/main.js b/vue-options-api-demos/dateinputs/datepicker/events/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/events/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datepicker/events/main.vue b/vue-options-api-demos/dateinputs/datepicker/events/main.vue
new file mode 100644
index 00000000..b74fcd84
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/events/main.vue
@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <datepicker
+      :style="{ width: '230px' }"
+      @focus="onFocus"
+      @blur="onBlur"
+      @change="onChange"
+      @iconclick="onIconClick"
+    />
+    <br />
+    <br />
+    <div class="example-config">
+      <h5>Event log</h5>
+      <ul class="event-log" :style="{ textAlign: 'right' }">
+        <li v-for="(event, index) in events" :key="index">
+          {{ event }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+        datepicker: DatePicker,
+    },
+    data() {
+        return {
+            value: null,
+            events: [],
+        };
+    },
+    methods: {
+        onFocus() {
+            this.log('focus');
+        },
+        onBlur() {
+            this.log('blur');
+        },
+        onChange() {
+            this.log('change');
+        },
+        onIconClick() {
+            this.log('iconclick');
+        },
+        log(event, arg) {
+            const events = this.events;
+            events.unshift(`${event} ${arg || ''}`);
+        },
+    },
+};
+</script>
diff --git a/vue-options-api-demos/dateinputs/datepicker/floating-label/main.js b/vue-options-api-demos/dateinputs/datepicker/floating-label/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/floating-label/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datepicker/floating-label/main.vue b/vue-options-api-demos/dateinputs/datepicker/floating-label/main.vue
new file mode 100644
index 00000000..70a77c37
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/floating-label/main.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <p>DatePicker</p>
+    <datepicker :style="{ width: '230px' }"
+      :label="'Select date:'"
+      @change="onChangeDatePicker"
+      :value="datePickerValue"
+      :placeholder="''"
+    >
+    </datepicker>
+  </div>
+</template>
+<script>
+import { DatePicker } from "@progress/kendo-vue-dateinputs";
+
+export default {
+  components: {
+    datepicker: DatePicker,
+  },
+  data: function () {
+    return {
+      datePickerValue: undefined,
+    };
+  },
+  methods: {
+    onChangeDatePicker: function (e) {
+      this.datePickerValue = e.value;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/dateinputs/datepicker/focused/main.js b/vue-options-api-demos/dateinputs/datepicker/focused/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/focused/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datepicker/focused/main.vue b/vue-options-api-demos/dateinputs/datepicker/focused/main.vue
new file mode 100644
index 00000000..1ae1c8a4
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/focused/main.vue
@@ -0,0 +1,16 @@
+<template>
+  <datepicker :style="{ width: '230px' }" 
+        :focused-date="new Date(1997, 2, 20)"
+    >
+  </datepicker>
+</template>
+<script>
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'datepicker': DatePicker
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datepicker/formats/main.js b/vue-options-api-demos/dateinputs/datepicker/formats/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/formats/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datepicker/formats/main.vue b/vue-options-api-demos/dateinputs/datepicker/formats/main.vue
new file mode 100644
index 00000000..23d5d3c3
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/formats/main.vue
@@ -0,0 +1,52 @@
+<template>
+      <div class="example-wrapper">
+                <div class="col-xs-12 col-sm-6 example-col">
+                    <p>Select a long date:</p>
+                    <datepicker :style="{ width: '230px' }"
+                        :format="'dd-MMM-yyyy HH:mm:ss'"
+                        v-model="value"
+                    ></datepicker>
+                </div>
+                <div class="col-xs-12 col-sm-6 example-col">
+                    <p>Select a short date:</p>
+                    <datepicker :style="{ width: '230px' }"
+                        :format="'MMMM yyyy'"
+                        v-model="value"
+                    ></datepicker>
+                </div>
+                <div class="col-xs-12 col-sm-6 example-col">
+                    <p>Custom Skeleton:</p>
+                    <datepicker :style="{ width: '230px' }"
+                        :format="{
+                            skeleton: 'yMMMdEHm'
+                        }"
+                        v-model="value"
+                     ></datepicker>
+                </div>
+                <div class="col-xs-12 col-sm-6 example-col">
+                    <p>Custom Format:</p>
+                    <datepicker :style="{ width: '230px' }"
+                        :format='{
+                            year: "numeric", 
+                            month: "short" 
+                        }'
+                        v-model="value"
+                     ></datepicker>
+            </div>
+        </div>
+</template>
+<script>
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'datepicker': DatePicker
+    },
+    data: function() {
+        return {
+            value: new Date(2017, 2, 10, 13, 30, 0)
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datepicker/forms/basic/main.js b/vue-options-api-demos/dateinputs/datepicker/forms/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/forms/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datepicker/forms/basic/main.vue b/vue-options-api-demos/dateinputs/datepicker/forms/basic/main.vue
new file mode 100644
index 00000000..fc145f12
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/forms/basic/main.vue
@@ -0,0 +1,67 @@
+<template>
+<div class="row example-wrapper">
+    <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+        <div class="card">
+            <div class="card-block">
+                <form class="k-form" @submit="handleSubmit">
+                    <fieldset>
+                        <legend>Please select dates of your stay:</legend>
+                        <label class="k-form-field">
+                            <span>Check-In</span>
+                            <datepicker 
+                                :name="'checkin'"
+                                :required="true"
+                                :min="today"
+                            ></datepicker>
+                        </label>
+                        <label class="k-form-field">
+                            <span>Check-Out</span>
+                            <datepicker 
+                                :name="'checkout'"
+                                :required="true"
+                                :min="today"
+                            />
+                        </label>
+                    </fieldset>
+                    <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                </form>
+            </div>
+        </div>
+    </div>
+        <div v-if="success"
+            class="alert alert-success"
+            :style="{ position: 'absolute' }"
+        >
+            Form submitted!
+        </div>
+</div>
+</template>
+<script>
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'datepicker': DatePicker,
+      'kbutton': Button
+    },
+    data: function() {
+        return {
+            success: false,
+            today: new Date()
+        };
+    },
+    methods: {
+        handleSubmit (event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(
+                () => { 
+                    this.success= false; 
+                }, 
+                3000);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datepicker/forms/custom-message/main.js b/vue-options-api-demos/dateinputs/datepicker/forms/custom-message/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/forms/custom-message/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datepicker/forms/custom-message/main.vue b/vue-options-api-demos/dateinputs/datepicker/forms/custom-message/main.vue
new file mode 100644
index 00000000..63c354be
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/forms/custom-message/main.vue
@@ -0,0 +1,68 @@
+<template>
+<div class="row example-wrapper">
+        <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+            <div class="card">
+                <div class="card-block">
+                    <form class="k-form" @submit="handleSubmit">
+                        <fieldset>
+                            <legend>Please select dates of your stay:</legend>
+                            <label class="k-form-field">
+                                <span>Check-In</span>
+                                <datepicker 
+                                    :name="'checkin'"
+                                    :default-value="new Date(2018, 1, 20)"
+                                    :required="true"
+                                    :min="today"
+                                    :validation-message="checkInValidationMessage"
+                                ></datepicker>
+                            </label>
+                            <label class="k-form-field">
+                                <span>Check-Out</span>
+                                <datepicker 
+                                    :name="'checkout'"
+                                    :required="true"
+                                    :min="today"
+                                    :validation-message="checkOutValidationMessage"
+                                />
+                            </label>
+                        </fieldset>
+                        <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                    </form>
+                </div>
+            </div>
+        </div>
+        <div v-if="success"
+            class="alert alert-success"
+            :style="{ position: 'absolute' }"
+        >
+            Form submitted!
+        </div>
+    </div>
+</template>
+<script>
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'datepicker': DatePicker,
+      'kbutton': Button
+    },
+    data: function() {
+        return {
+            success: false,
+            today: new Date(),
+            checkInValidationMessage: "Dates in the past are not valid Check-In dates.",
+            checkOutValidationMessage: "The Check-Out date is required."
+        };
+    },
+    methods: {
+        handleSubmit (event) {
+            event.preventDefault();
+            this.success= true ;
+            setTimeout(() => { this.success= false; }, 3000);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datepicker/forms/disable-styles/main.js b/vue-options-api-demos/dateinputs/datepicker/forms/disable-styles/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/forms/disable-styles/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datepicker/forms/disable-styles/main.vue b/vue-options-api-demos/dateinputs/datepicker/forms/disable-styles/main.vue
new file mode 100644
index 00000000..620db501
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/forms/disable-styles/main.vue
@@ -0,0 +1,93 @@
+<template>
+ <div class="row example-wrapper">
+        <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+            <div class="card">
+                <div class="card-block">
+                    <form class="k-form" @submit="handleSubmit">
+                        <fieldset>
+                            <legend>Please select dates of your stay:</legend>
+                            <label class="k-form-field">
+                                <span>Check-In</span>
+                                <datepicker 
+                                    :name="'checkin'"
+                                    :required="true"
+                                    :format="'dd-MMM-yyyy'"
+                                    :min='today'
+                                    :value='checkin'
+                                    @change='handleChange'
+                                    :validation-message="checkin === null
+                                        ? 'Check-In date is required!'
+                                        : 'Check-In date cannot be in the past!'"
+                                ></datepicker>
+                            </label>
+                            <label class="k-form-field">
+                                <span>Check-Out</span>
+                                <datepicker 
+                                    :validity-styles="false"
+                                    :name="'checkout'"
+                                    :required="true"
+                                    :format="'dd-MMM-yyyy'"
+                                    :valid="(checkin !== null && checkout !== null)
+                                        && (checkin.getTime() < checkout.getTime())"
+                                    :value='checkout'
+                                    @change="handleChange"
+                                    :validation-message="checkout === null
+                                        ? 'Check-Out date is required!'
+                                        : 'Check-Out date cannot be before Check-In date!'"
+                                ></datepicker>
+                            </label>
+                            <label class="k-form-field">
+                                <span>Additional Comments</span>
+                                <textarea
+                                    class="k-textarea"
+                                    :style="{ width: '100%' }"
+                                    :name="'additionalComments'"
+                                    :value="additionalComments"
+                                    @change="handleChange"
+                                ></textarea>
+                            </label>
+                        </fieldset>
+                        <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                    </form>
+                </div>
+            </div>
+        </div>
+        <div v-if="success"
+            class="alert alert-success"
+            :style="{ position: 'absolute' }"
+        >
+            Form submitted!
+        </div>
+    </div>
+</template>
+<script>
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'datepicker': DatePicker,
+      'kbutton': Button
+    },
+    data: function() {
+        return {
+            checkin: new Date(2022, 1, 20),
+            checkout: null,
+            additionalComments: '',
+            success: false,
+            today: new Date()
+        };
+    },
+    methods: {
+        handleChange (event) {
+            this[event.target.name]= event.target.value;
+        },
+        handleSubmit (event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(() => { this.success = false; }, 3000);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datepicker/forms/override/main.js b/vue-options-api-demos/dateinputs/datepicker/forms/override/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/forms/override/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datepicker/forms/override/main.vue b/vue-options-api-demos/dateinputs/datepicker/forms/override/main.vue
new file mode 100644
index 00000000..fac8e68b
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/forms/override/main.vue
@@ -0,0 +1,93 @@
+<template>
+ <div class="row example-wrapper">
+        <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+            <div class="card">
+                <div class="card-block">
+                    <form class="k-form"  @submit="handleSubmit">
+                        <fieldset>
+                            <legend>Please select dates of your stay:</legend>
+                            <label class="k-form-field">
+                                <span>Check-In</span>
+                                <datepicker 
+                                    :name="'checkin'"
+                                    :required="true"
+                                    :format="'dd-MMM-yyyy'"
+                                    :min="today"
+                                    :value="checkin"
+                                    @change='handleChange'
+                                    :validation-message="checkin === null
+                                        ? 'Check-In date is required!'
+                                        : 'Check-In date cannot be in the past!'"
+                                ></datepicker>
+                            </label>
+                            <label class="k-form-field">
+                                <span>Check-Out</span>
+                                <datepicker 
+                                    :name="'checkout'"
+                                    :required="true"
+                                    :format="'dd-MMM-yyyy'"
+                                    :valid="(checkin !== null && checkout !== null)
+                                        && (checkin.getTime() < checkout.getTime())"
+
+                                    :value="checkout"
+                                    @change="handleChange"
+                                    :validation-message="checkout === null
+                                        ? 'Check-Out date is required!'
+                                        : 'Check-Out date cannot be before Check-In date!'"
+                                ></datepicker>
+                            </label>
+                            <label class="k-form-field">
+                                <span>Additional Comments</span>
+                                <textarea
+                                    class="k-textarea"
+                                    :style="{ width: '100%' }"
+                                    :name="'additionalComments'"
+                                    :value="additionalComments"
+                                    @change="handleChange"
+                                ></textarea>
+                            </label>
+                        </fieldset>
+                        <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                    </form>
+                </div>
+            </div>
+        </div>
+        <div v-if="success"
+            class="alert alert-success"
+            :style="{ position: 'absolute' }"
+        >
+            Form submitted!
+        </div>
+</div>
+</template>
+<script>
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'datepicker': DatePicker,
+      'kbutton': Button
+    },
+    data: function() {
+        return {
+            checkin: null,
+            checkout: null,
+            additionalComments: '',
+            success: false,
+            today: new Date()
+        };
+    },
+    methods: {
+        handleChange (event) {
+            this[event.target.name]= event.target.value;
+        },
+        handleSubmit (event) {
+            event.preventDefault();
+            this.success= true;
+            setTimeout(() => { this.success = false; }, 3000);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datepicker/gettingstarted/main.js b/vue-options-api-demos/dateinputs/datepicker/gettingstarted/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/gettingstarted/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datepicker/gettingstarted/main.vue b/vue-options-api-demos/dateinputs/datepicker/gettingstarted/main.vue
new file mode 100644
index 00000000..c982a284
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/gettingstarted/main.vue
@@ -0,0 +1,16 @@
+<template>
+ <div class="example-wrapper" >
+        <datepicker :style="{ width: '230px' }" />
+        <p>(use Alt+<code>↓</code> to open the calendar, <code>←</code> and <code>→</code> to navigate, <code>↑</code> to increment and <code>↓</code> to decrement the value)</p>
+    </div>
+</template>
+<script>
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'datepicker': DatePicker
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datepicker/input-mode/main.js b/vue-options-api-demos/dateinputs/datepicker/input-mode/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/input-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/dateinputs/datepicker/input-mode/main.vue b/vue-options-api-demos/dateinputs/datepicker/input-mode/main.vue
new file mode 100644
index 00000000..864408b8
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/input-mode/main.vue
@@ -0,0 +1,54 @@
+<template>
+    <div class="k-d-grid k-grid-cols-sm-1 k-grid-cols-md-2 k-gap-4 k-max-w-fit">
+        <div class="k-col-span-1">
+            <div>
+                inputmode=text <i>(default)</i>
+            </div>
+            <datepicker
+                :default-value="value"
+                :format='{
+                    year: "numeric",
+                    month: "long",
+                    day: "numeric"
+                }'
+                :input-attributes="{ inputMode: 'text' }"
+                :style="{ width: '300px' }"
+            />
+        </div>
+        <div class="k-col-span-1">
+            <div>inputmode=numeric</div>
+            <datepicker
+                :default-value="value"
+                :format="'dd-MM-yyyy HH:mm:ss'"
+                :input-attributes="{ inputMode: 'numeric' }"
+                :style="{ width: '300px' }"
+            />
+        </div>
+        <div class="k-col-span-1">
+            <div>
+                inputmode=none <br />
+                <i>(the user can only pick a value from the popup)</i>
+            </div>
+            <datepicker
+                :default-value="value"
+                :input-attributes="{ inputMode: 'none' }"
+                :style="{ width: '300px' }"
+            />
+        </div>
+    </div>
+</template>
+<script>
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+        'datepicker': DatePicker
+    },
+    data() {
+        return {
+            value: new Date()
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datepicker/json/main.js b/vue-options-api-demos/dateinputs/datepicker/json/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/json/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datepicker/json/main.vue b/vue-options-api-demos/dateinputs/datepicker/json/main.vue
new file mode 100644
index 00000000..12d5e2ab
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/json/main.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="example-config">
+        <datepicker :style="{ width: '230px' }" :value="value" @change="onChange"  ></datepicker>
+    </div>
+</template>
+<script>
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+import { provideIntlService } from '@progress/kendo-vue-intl';
+
+export default {
+    components: {
+      'datepicker': DatePicker
+    },
+     mounted: function(){
+          setTimeout(() => {
+            const date = '2016-01-04';
+            this.value = provideIntlService(this).parseDate(date);
+        }, 1000);
+    },
+    methods: {
+        onChange (event) {
+            this.value = event.value;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datepicker/keyboard/main.js b/vue-options-api-demos/dateinputs/datepicker/keyboard/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/keyboard/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datepicker/keyboard/main.vue b/vue-options-api-demos/dateinputs/datepicker/keyboard/main.vue
new file mode 100644
index 00000000..8969894b
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/keyboard/main.vue
@@ -0,0 +1,27 @@
+<template>
+ <div class="example-wrapper">
+        <datepicker :style="{ width: '230px' }"
+            ref="picker"
+            :default-value="defaultValue"
+         ></datepicker>
+        <p>(use Alt+<code>↓</code> to open the calendar, <code>←</code> and <code>→</code> to navigate, <code>↑</code> to increment and <code>↓</code> to decrement the value)</p>
+</div>
+</template>
+<script>
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'datepicker': DatePicker
+    },
+    mounted() {
+        this.$refs.picker.focus();
+    },
+    data: function() {
+        return {
+            defaultValue: new Date()
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datepicker/overview/es.json b/vue-options-api-demos/dateinputs/datepicker/overview/es.json
new file mode 100644
index 00000000..7fd085c9
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/overview/es.json
@@ -0,0 +1,31 @@
+{
+    "datepicker": {
+        "toggleCalendar": "Alternar calendario"
+    },
+    "calendar": {
+        "today": "Hoy"
+    },
+    "dateinput": {
+        "increment": "Incrementar valor",
+        "decrement": "Disminuir valor"
+    },
+    "datetimepicker": {
+        "date": "Fecha",
+        "time": "Hora",
+        "cancel": "Cancelar",
+        "set": "Conjunto"
+    },
+    "timepicker": {
+        "set": "Conjunto",
+        "cancel": "Cancelar",
+        "now": "Ahora",
+        "selectNow": "Seleccionar ahora",
+        "toggleTimeSelector": "Selector de tiempo de alternancia",
+        "toggleClock": "Reloj de palanca"
+    },
+    "daterangepicker": {
+        "swapStartEnd": "Swap start and end values",
+        "start": "Comienzo",
+        "end": "Fin"
+    }
+}
diff --git a/vue-options-api-demos/dateinputs/datepicker/overview/main.js b/vue-options-api-demos/dateinputs/datepicker/overview/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datepicker/overview/main.vue b/vue-options-api-demos/dateinputs/datepicker/overview/main.vue
new file mode 100644
index 00000000..b6f8ebe2
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/overview/main.vue
@@ -0,0 +1,88 @@
+<template>
+<div >
+    <localization :language="selectedLocale.language">
+        <intl :locale="selectedLocale.locale">
+            <div class="example-wrapper row">
+                <div class="col-xs-12 col-md-12 example-config">
+                    <h6>Locale:  <dropdownlist
+                        :style="{ width: '230px' }"
+                        :value="selectedLocale"
+                        :data-items="locales"
+                        :text-field="'locale'"
+                        @change="change" />
+                    </h6>
+                </div>
+                <div class="col-xs-12 col-md-6 example-col">
+                    <p>Default Show</p>
+                    <datepicker :style="{ width: '230px' }" :default-value="new Date()" :default-Show="true" >
+                    </datepicker>
+                    <p>Format and WeekColumn</p>
+                    <datepicker :style="{ width: '230px' }" 
+                        :default-value="new Date()"
+                        :format="'dd/MMM/yyyy'" :week-number="true" >
+                    </datepicker>
+                    <p>Disabled</p>
+                    <datepicker :style="{ width: '230px' }" :disabled="true" :default-value="new Date()"
+                     :format="'dd/MMMM/yyyy'" >
+                    </datepicker>
+                </div>
+            </div>
+        </intl>
+    </localization>
+</div>
+</template>
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+import { IntlProvider, load, loadMessages, LocalizationProvider } from '@progress/kendo-vue-intl';
+import likelySubtags from 'cldr-core/supplemental/likelySubtags.json';
+import currencyData from 'cldr-core/supplemental/currencyData.json';
+import weekData from 'cldr-core/supplemental/weekData.json';
+import numbers from 'cldr-numbers-full/main/es/numbers.json';
+import caGregorian from 'cldr-dates-full/main/es/ca-gregorian.json';
+import dateFields from 'cldr-dates-full/main/es/dateFields.json';
+import timeZoneNames from 'cldr-dates-full/main/es/timeZoneNames.json';
+
+load(
+    likelySubtags,
+    currencyData,
+    weekData, numbers,
+    caGregorian,
+    dateFields,
+    timeZoneNames
+);
+
+import esMessages from './es.json';
+loadMessages(esMessages, 'es-ES');
+const locales = [
+    {
+        language: 'en-US',
+        locale: 'en'
+    },
+    {
+        language: 'es-ES',
+        locale: 'es'
+    }
+];
+export default {
+    components: {
+      'datepicker': DatePicker,
+      'dropdownlist': DropDownList,
+      'intl': IntlProvider,
+      'localization': LocalizationProvider
+    },
+    data: function() {
+        return {
+            locales: locales,
+            selectedLocale: locales[0], 
+            value: new Date()
+        };
+    },
+    methods: {
+      change(e) {
+          this.selectedLocale= e.target.value;
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datepicker/placeholders/main.js b/vue-options-api-demos/dateinputs/datepicker/placeholders/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/placeholders/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datepicker/placeholders/main.vue b/vue-options-api-demos/dateinputs/datepicker/placeholders/main.vue
new file mode 100644
index 00000000..05d1ddac
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/placeholders/main.vue
@@ -0,0 +1,53 @@
+<template>
+    <div class="row example-wrapper" :style="{ minHeight: 450 }">
+                <div class="col-xs-12 col-md-6 example-col">
+                    <p>Full-length format description:</p>
+                    <datepicker :style="{ width: '230px' }" :format-placeholder="'wide'" ></datepicker>
+                </div>
+
+                <div class="col-xs-12 col-md-6 example-col">
+                    <p>Narrow-length format description:</p>
+                    <datepicker :style="{ width: '230px' }" :format-placeholder="'narrow'" ></datepicker>
+                </div>
+
+                <div class="col-xs-12 col-md-6 example-col">
+                    <p>Short-length format description:</p>
+                    <datepicker :style="{ width: '230px' }" :format-placeholder="'short'" ></datepicker>
+                </div>
+
+                <div class="col-xs-12 col-md-6 example-col">
+                    <p>Display defined format:</p>
+                    <datepicker :style="{ width: '230px' }"
+                        :format="'MM/dd/yyyy'"
+                        :format-placeholder="'formatPattern'"
+                    ></datepicker>
+                </div>
+
+                <div class="col-xs-12 col-md-6 example-col">
+                    <p>Custom defined format descriptions</p>
+                    <datepicker :style="{ width: '230px' }"
+                        :format="'G'"
+                        :format-placeholder="customFormatPlaceholder"
+                    ></datepicker>
+                </div>
+    </div>
+</template>
+<script>
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'datepicker': DatePicker
+    },
+    data: function() {
+        return {
+             customFormatPlaceholder: {
+                year: 'y',
+                month: 'M',
+                day: 'd'
+            }
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datepicker/popup-state/main.js b/vue-options-api-demos/dateinputs/datepicker/popup-state/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/popup-state/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datepicker/popup-state/main.vue b/vue-options-api-demos/dateinputs/datepicker/popup-state/main.vue
new file mode 100644
index 00000000..72c58866
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/popup-state/main.vue
@@ -0,0 +1,39 @@
+<template>
+    <div class="row">
+         <div class="col-xs-12 col-md-6 example-col">
+             <p>Controlled DatePicker</p>
+             <datepicker :style="{ width: '230px' }"
+                 :show="show"
+             ></datepicker>
+             <kbutton :theme-color="'primary'" @click="handleClick">Toggle</kbutton>
+         </div>
+         <div class="col-xs-12 col-md-6 example-col">
+             <p>Always shown</p>
+             <datepicker :style="{ width: '230px' }"
+                 :show="true"
+             ></datepicker>
+         </div>
+    </div>
+</template>
+<script>
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'datepicker': DatePicker,
+      'kbutton': Button
+    },
+     data: function() {
+        return {
+            show: false
+        };
+    },
+    methods: {
+        handleClick(event) {
+            this.show = !this.show;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datepicker/weeknum/main.js b/vue-options-api-demos/dateinputs/datepicker/weeknum/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/weeknum/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datepicker/weeknum/main.vue b/vue-options-api-demos/dateinputs/datepicker/weeknum/main.vue
new file mode 100644
index 00000000..d11b5a87
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datepicker/weeknum/main.vue
@@ -0,0 +1,15 @@
+<template>
+   <div class="example-config">
+        <datepicker :style="{ width: '230px' }"  :week-number="true"  ></datepicker>
+    </div>
+</template>
+<script>
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'datepicker': DatePicker
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/controlled/main.js b/vue-options-api-demos/dateinputs/daterangepicker/controlled/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/controlled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/controlled/main.vue b/vue-options-api-demos/dateinputs/daterangepicker/controlled/main.vue
new file mode 100644
index 00000000..043bf5c7
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/controlled/main.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="row">
+    <div class="example-config col-xs-12 col-md-12 example-col">
+      <p>
+        The range is: <br />
+        start: {{ value.start }}
+        <br />
+        end: {{ value.end }}
+      </p>
+    </div>
+    <div class="col-xs-12 col-md-12 example-col">
+      <p>Controlled DateRangePicker</p>
+      <DateRangePicker :value="value" @change="handleChange" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { DateRangePicker } from "@progress/kendo-vue-dateinputs";
+
+export default {
+  components: {
+    DateRangePicker,
+  },
+  data() {
+    return {
+      value: {
+        start: new Date(2018, 8, 5),
+        end: new Date(2018, 8, 12),
+      },
+    };
+  },
+  methods: {
+    handleChange(event) {
+      this.value = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/controlled/show/main.js b/vue-options-api-demos/dateinputs/daterangepicker/controlled/show/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/controlled/show/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/controlled/show/main.vue b/vue-options-api-demos/dateinputs/daterangepicker/controlled/show/main.vue
new file mode 100644
index 00000000..4553f17a
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/controlled/show/main.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="row">
+    <div class="col-xs-12 col-md-12 example-col" style="margin-bottom: 270px">
+      <p>Controlled DateRangePicker</p>
+      <DateRangePicker :show="showPopup" />&nbsp;
+      <kbutton :theme-color="'primary'" @click="handleChange">Toggle</kbutton>
+    </div>
+    <div class="col-xs-12 col-md-12 example-col">
+      <p>Always shown</p>
+      <DateRangePicker :show="true" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Checkbox } from "@progress/kendo-vue-inputs";
+import { DateRangePicker } from "@progress/kendo-vue-dateinputs";
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    DateRangePicker,
+    checkbox: Checkbox,
+      'kbutton': Button
+  },
+  data() {
+    return {
+      showPopup: true,
+    };
+  },
+  methods: {
+    handleChange() {
+      this.showPopup = !this.showPopup;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/custom/calendar/customCalendar.vue b/vue-options-api-demos/dateinputs/daterangepicker/custom/calendar/customCalendar.vue
new file mode 100644
index 00000000..93b8a819
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/custom/calendar/customCalendar.vue
@@ -0,0 +1,59 @@
+<template>
+  <div
+    :id="id"
+    tabindex="0"
+    @focusin="handleFocus"
+    @focusout="handleBlur"
+    @keydown="handleKeydown"
+  >
+    <Calendar
+      :view-list-id="id"
+      :value="value.start"
+      @change="handleStartChange"
+    />
+    <Calendar :value="value.end" @change="handleEndChange" />
+  </div>
+</template>
+
+<script>
+import { Calendar } from "@progress/kendo-vue-dateinputs";
+export default {
+  components: {
+    Calendar,
+  },
+  inheritAttrs: false,
+  props: {
+    value: Object,
+    id: String,
+  },
+  methods: {
+    handleStartChange(event) {
+      this.$emit("change", {
+        value: {
+          start: event.target.value,
+          end: this.value.end,
+        },
+        event: event,
+      });
+    },
+    handleEndChange(event) {
+      this.$emit("change", {
+        value: {
+          start: this.value.start,
+          end: event.target.value,
+        },
+        event: event,
+      });
+    },
+    handleFocus(e) {
+      this.$emit("focus", e);
+    },
+    handleBlur(e) {
+      this.$emit("blur", e);
+    },
+    handleKeydown(e) {
+      this.$emit("keydown", e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/custom/calendar/main.js b/vue-options-api-demos/dateinputs/daterangepicker/custom/calendar/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/custom/calendar/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/custom/calendar/main.vue b/vue-options-api-demos/dateinputs/daterangepicker/custom/calendar/main.vue
new file mode 100644
index 00000000..257b4ec7
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/custom/calendar/main.vue
@@ -0,0 +1,24 @@
+<template>
+  <DateRangePicker :calendar="'CustomCalendar'">
+    <template v-slot:CustomCalendar="{ props }">
+      <CustomCalendar
+        v-bind="props"
+        @change="(e) => props.onChange(e)"
+        @focus="props.onFocus"
+        @blur="props.onBlur"
+        @keydown="props.onKeydown"
+      />
+    </template>
+  </DateRangePicker>
+</template>
+
+<script>
+import { DateRangePicker } from "@progress/kendo-vue-dateinputs";
+import CustomCalendar from "./customCalendar.vue";
+export default {
+  components: {
+    DateRangePicker,
+    CustomCalendar,
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/custom/dateinput/customEndDateInput.vue b/vue-options-api-demos/dateinputs/daterangepicker/custom/dateinput/customEndDateInput.vue
new file mode 100644
index 00000000..056cff4d
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/custom/dateinput/customEndDateInput.vue
@@ -0,0 +1,46 @@
+<template>
+  <label
+    :style="{
+      textAlign: 'center',
+    }"
+  >
+    <span :style="spanStyle">End</span> <br />
+    <DateInput
+      :value="value"
+      :format="format"
+      :id="id"
+      @change="handleChange"
+    />
+  </label>
+</template>
+
+<script>
+import { DateInput } from "@progress/kendo-vue-dateinputs";
+export default {
+  components: {
+    DateInput,
+  },
+  inheritAttrs: false,
+  props: {
+    value: Date,
+    format: String,
+    id: String,
+    min: Date,
+    max: Date,
+    disabled: Boolean,
+    label: String,
+  },
+  computed: {
+    spanStyle() {
+      return {
+        color: this.$props.value !== null ? "green" : "red",
+      };
+    },
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit("change", e);
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/custom/dateinput/customStartDateInput.vue b/vue-options-api-demos/dateinputs/daterangepicker/custom/dateinput/customStartDateInput.vue
new file mode 100644
index 00000000..01422ac0
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/custom/dateinput/customStartDateInput.vue
@@ -0,0 +1,46 @@
+<template>
+  <label
+    :style="{
+      textAlign: 'center',
+    }"
+  >
+    <span :style="spanStyle">Start</span> <br />
+    <DateInput
+      :value="value"
+      :format="format"
+      :id="id"
+      @change="handleChange"
+    />
+  </label>
+</template>
+
+<script>
+import { DateInput } from "@progress/kendo-vue-dateinputs";
+export default {
+  components: {
+    DateInput,
+  },
+  inheritAttrs: false,
+  props: {
+    value: Date,
+    format: String,
+    id: String,
+    min: Date,
+    max: Date,
+    disabled: Boolean,
+    label: String,
+  },
+  computed: {
+    spanStyle() {
+      return {
+        color: this.$props.value !== null ? "green" : "red",
+      };
+    },
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit("change", e);
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/custom/dateinput/main.js b/vue-options-api-demos/dateinputs/daterangepicker/custom/dateinput/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/custom/dateinput/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/custom/dateinput/main.vue b/vue-options-api-demos/dateinputs/daterangepicker/custom/dateinput/main.vue
new file mode 100644
index 00000000..16d6f2a0
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/custom/dateinput/main.vue
@@ -0,0 +1,26 @@
+<template>
+  <DateRangePicker
+    :start-date-input="'CustomStartDateInput'"
+    :end-date-input="'CustomEndDateInput'"
+  >
+    <template v-slot:CustomStartDateInput="{ props }">
+      <CustomStartDateInput v-bind="props" />
+    </template>
+    <template v-slot:CustomEndDateInput="{ props }">
+      <CustomEndDateInput v-bind="props" />
+    </template>
+  </DateRangePicker>
+</template>
+
+<script>
+import { DateRangePicker } from "@progress/kendo-vue-dateinputs";
+import CustomStartDateInput from "./customStartDateInput.vue";
+import CustomEndDateInput from "./customEndDateInput.vue";
+export default {
+  components: {
+    DateRangePicker,
+    CustomStartDateInput,
+    CustomEndDateInput,
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/custom/popup/main.js b/vue-options-api-demos/dateinputs/daterangepicker/custom/popup/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/custom/popup/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/custom/popup/main.vue b/vue-options-api-demos/dateinputs/daterangepicker/custom/popup/main.vue
new file mode 100644
index 00000000..d6c8a877
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/custom/popup/main.vue
@@ -0,0 +1,34 @@
+<template>
+  <div
+    class="example-wrapper"
+    :style="{
+      textAlign: 'center',
+    }"
+  >
+    <DateRangePicker :popup-settings="popupSettings" />
+  </div>
+</template>
+
+<script>
+import { DateRangePicker } from "@progress/kendo-vue-dateinputs";
+export default {
+  components: {
+    DateRangePicker,
+  },
+  data() {
+    return {
+      popupSettings: {
+        animate: false,
+        anchorAlign: {
+          horizontal: "center",
+          vertical: "bottom",
+        },
+        popupAlign: {
+          horizontal: "center",
+          vertical: "top",
+        },
+      },
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/default/popup/main.js b/vue-options-api-demos/dateinputs/daterangepicker/default/popup/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/default/popup/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/default/popup/main.vue b/vue-options-api-demos/dateinputs/daterangepicker/default/popup/main.vue
new file mode 100644
index 00000000..4b9a7933
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/default/popup/main.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="example-wrapper">
+    <DateRangePicker />
+    <p>
+      (use Alt+<code>↓</code> to open the calendar, <code>←</code> and{{ " " }}
+      <code>→</code> to navigate, <code>↑</code> to increment and{{ " " }}
+      <code>↓</code> to decrement the value)
+    </p>
+  </div>
+</template>
+
+<script>
+import { DateRangePicker } from "@progress/kendo-vue-dateinputs";
+
+export default {
+  components: {
+    DateRangePicker,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/default/value/main.js b/vue-options-api-demos/dateinputs/daterangepicker/default/value/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/default/value/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/default/value/main.vue b/vue-options-api-demos/dateinputs/daterangepicker/default/value/main.vue
new file mode 100644
index 00000000..7e63a491
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/default/value/main.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="row">
+    <div class="col-xs-12 col-md-12 example-col">
+      <p>DateRangePicker with default value</p>
+      <DateRangePicker :default-value="defaultValue" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { DateRangePicker } from "@progress/kendo-vue-dateinputs";
+
+export default {
+  components: {
+    DateRangePicker,
+  },
+  data() {
+    return {
+      defaultValue: {
+        start: new Date(2018, 8, 5),
+        end: null,
+      },
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/disabled/main.js b/vue-options-api-demos/dateinputs/daterangepicker/disabled/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/disabled/main.vue b/vue-options-api-demos/dateinputs/daterangepicker/disabled/main.vue
new file mode 100644
index 00000000..fd407b44
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/disabled/main.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="example-wrapper">
+    <p>Christmas holiday:</p>
+    <DateRangePicker :disabled="true" :value="value" :show="true" />
+  </div>
+</template>
+
+<script>
+import { DateRangePicker } from "@progress/kendo-vue-dateinputs";
+
+export default {
+  components: {
+    DateRangePicker,
+  },
+  data() {
+    return {
+      value: {
+        start: new Date(2018, 11, 25),
+        end: new Date(2018, 11, 27),
+      },
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/events/Logger.vue b/vue-options-api-demos/dateinputs/daterangepicker/events/Logger.vue
new file mode 100644
index 00000000..aa04a80b
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/events/Logger.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="example-config">
+    <h5>{{ title }}</h5>
+    <ul class="event-log">
+      <li v-for="(event, idx) in events" :key="idx">{{ event }}</li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    events: Array,
+    title: String,
+  },
+};
+</script>
+
+<style scoped>
+.example-config {
+  margin: 0 0 20px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+  margin: 0;
+  padding: 0;
+  max-height: 100px;
+  overflow-y: auto;
+  list-style-type: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: white;
+}
+.event-log li {
+  margin: 0;
+  padding: 0.3em;
+  line-height: 1.2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+  margin-bottom: -1px;
+}
+</style>
\ No newline at end of file
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/events/main.js b/vue-options-api-demos/dateinputs/daterangepicker/events/main.js
new file mode 100644
index 00000000..0fde16e6
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/events/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
+
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/events/main.vue b/vue-options-api-demos/dateinputs/daterangepicker/events/main.vue
new file mode 100644
index 00000000..839a16dd
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/events/main.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <div class="col-xs-12 col-md-12 example-col">
+      <DateRangePicker :value="value" @change="handleChange" />
+    </div>
+    <br />
+    <br />
+    <Logger :title="'Events list'" :events="eventsList" />
+  </div>
+</template>
+
+<script>
+import { DateRangePicker } from "@progress/kendo-vue-dateinputs";
+import Logger from "./Logger.vue";
+
+export default {
+  components: {
+    Logger,
+    DateRangePicker,
+  },
+  computed: {
+    eventsList() {
+      return this.events;
+    },
+  },
+  data() {
+    return {
+      events: [],
+      value: {
+        start: null,
+        end: null,
+      },
+    };
+  },
+  methods: {
+    handleChange(event) {
+      setTimeout(() => {
+        this.events.unshift(
+          "Date range betwen '" +
+            new Date(event.component.value.start).toLocaleDateString("en-US") +
+            "' and '" +
+            new Date(event.component.value.end).toLocaleDateString("en-US") +
+            " was selected"
+        );
+      });
+      this.value = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/focused/main.js b/vue-options-api-demos/dateinputs/daterangepicker/focused/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/focused/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/focused/main.vue b/vue-options-api-demos/dateinputs/daterangepicker/focused/main.vue
new file mode 100644
index 00000000..aed1f7b1
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/focused/main.vue
@@ -0,0 +1,22 @@
+<template>
+  <DateRangePicker
+    ref="picker"
+    :show="true"
+    :focused-date="new Date(1997, 2, 20)"
+  />
+</template>
+
+<script>
+import { DateRangePicker } from "@progress/kendo-vue-dateinputs";
+
+export default {
+  components: {
+    DateRangePicker,
+  },
+  mounted() {
+    this.$nextTick(function () {
+      this.$refs.picker.focusCalendarElement();
+    });
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/input-mode/main.js b/vue-options-api-demos/dateinputs/daterangepicker/input-mode/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/input-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/input-mode/main.vue b/vue-options-api-demos/dateinputs/daterangepicker/input-mode/main.vue
new file mode 100644
index 00000000..873ae55b
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/input-mode/main.vue
@@ -0,0 +1,57 @@
+<template>
+    <div class="k-d-grid k-grid-cols-sm-1 k-grid-cols-md-2 k-gap-4 k-max-w-fit">
+        <div class="k-col-span-1">
+            <div>
+                inputmode=text <i>(default)</i>
+            </div>
+            <daterangepicker
+                :default-value="value"
+                :format='{
+                    year: "numeric",
+                    month: "long",
+                    day: "numeric"
+                }'
+                :input-attributes="{ inputMode: 'text' }"
+                :style="{ width: '300px' }"
+            />
+        </div>
+        <div class="k-col-span-1">
+            <div>inputmode=numeric</div>
+            <daterangepicker
+                :default-value="value"
+                :format="'dd-MM-yyyy'"
+                :input-attributes="{ inputMode: 'numeric' }"
+                :style="{ width: '300px' }"
+            />
+        </div>
+        <div class="k-col-span-1">
+            <div>
+                inputmode=none <br />
+                <i>(the user can only pick a value from the popup)</i>
+            </div>
+            <daterangepicker
+                :default-value="value"
+                :input-attributes="{ inputMode: 'none' }"
+                :style="{ width: '300px' }"
+            />
+        </div>
+    </div>
+</template>
+<script>
+import { DateRangePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+        'daterangepicker': DateRangePicker
+    },
+    data() {
+        return {
+            value: {
+                start: new Date(2024, 8, 5),
+                end: new Date(),
+            }
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/keyboard/main.js b/vue-options-api-demos/dateinputs/daterangepicker/keyboard/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/keyboard/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/keyboard/main.vue b/vue-options-api-demos/dateinputs/daterangepicker/keyboard/main.vue
new file mode 100644
index 00000000..946d6141
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/keyboard/main.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="example-wrapper">
+    <div class="example-config">
+      <p>
+        (use Alt+<code>↓</code> to open the calendar, Esc to close the calendar,
+        <code>←</code> and <code>→</code> to navigate,{" "} <code>↑</code> to
+        increment and <code>↓</code> to decrement the value)
+      </p>
+    </div>
+    <DateRangePicker ref="picker" :default-show="true" :default-value="value" />
+  </div>
+</template>
+
+<script>
+import { DateRangePicker } from "@progress/kendo-vue-dateinputs";
+export default {
+  components: {
+    DateRangePicker,
+  },
+  data() {
+    return {
+      value: {
+        start: new Date(2000, 2, 10),
+        end: new Date(2000, 3, 5),
+      },
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/overview/main.js b/vue-options-api-demos/dateinputs/daterangepicker/overview/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/overview/main.vue b/vue-options-api-demos/dateinputs/daterangepicker/overview/main.vue
new file mode 100644
index 00000000..386c1b87
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/overview/main.vue
@@ -0,0 +1,28 @@
+<template>
+ <div class="row">
+      <div class="col-xs-12 col-md-6 example-col">
+          <p>DateRangePicker with default shown state</p>
+          <DateRangePicker
+              :default-show="defaultShow"
+          />
+      </div>
+  </div>
+</template>
+
+<script>
+
+import {
+ DateRangePicker
+    } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+       DateRangePicker
+    },
+    data () {
+      return {
+        defaultShow: true
+      }
+    }
+};
+</script>
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/ranges/main.js b/vue-options-api-demos/dateinputs/daterangepicker/ranges/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/ranges/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/ranges/main.vue b/vue-options-api-demos/dateinputs/daterangepicker/ranges/main.vue
new file mode 100644
index 00000000..137137fd
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/ranges/main.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="example-config">
+      <p>Select a date range:</p>
+      <DateRangePicker :min="min" :max="max" :default-value="defaultValue" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { DateRangePicker } from "@progress/kendo-vue-dateinputs";
+
+export default {
+  components: {
+    DateRangePicker,
+  },
+  data() {
+    return {
+      min: new Date(2018, 8, 1),
+      max: new Date(2018, 9, 25),
+      defaultValue: {
+        start: new Date(2018, 8, 5),
+        end: new Date(2018, 9, 13),
+      },
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/reverse/basic/main.js b/vue-options-api-demos/dateinputs/daterangepicker/reverse/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/reverse/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/reverse/basic/main.vue b/vue-options-api-demos/dateinputs/daterangepicker/reverse/basic/main.vue
new file mode 100644
index 00000000..670c8c5e
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/reverse/basic/main.vue
@@ -0,0 +1,42 @@
+<template>
+<div class="example-wrapper">
+      <div class="example-config">
+        <p>
+          The value is: <br />
+          start: {{value.start}} <br />
+          end: {{value.end}}
+        </p>
+      </div>
+      <DateRangePicker
+        :allow-reverse="true"
+        @change="handleChange"
+        :show="true"
+      />
+    </div>
+</template>
+
+<script>
+
+import {
+ DateRangePicker
+    } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+       DateRangePicker
+    },
+    data () {
+      return {
+        value: {
+           start: null,
+           end: null,
+        }
+      }
+    },
+    methods: {
+      handleChange (event) {
+        this.value = event.value;
+      }
+    }
+};
+</script>
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/reverse/swap/main.js b/vue-options-api-demos/dateinputs/daterangepicker/reverse/swap/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/reverse/swap/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/reverse/swap/main.vue b/vue-options-api-demos/dateinputs/daterangepicker/reverse/swap/main.vue
new file mode 100644
index 00000000..262a859d
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/reverse/swap/main.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="example-wrapper">
+    <div class="example-config">
+      <p>
+        The value is: <br />
+        start: {{ value.start }} <br />
+        end: {{ value.end }}
+      </p>
+    </div>
+    <DateRangePicker
+      :swap-button="true"
+      :allow-reverse="true"
+      @change="handleChange"
+      :show="true"
+    />
+  </div>
+</template>
+
+<script>
+import { DateRangePicker } from "@progress/kendo-vue-dateinputs";
+
+export default {
+  components: {
+    DateRangePicker,
+  },
+  data() {
+    return {
+      value: {
+        start: null,
+        end: null,
+      },
+    };
+  },
+  methods: {
+    handleChange(event) {
+      this.value = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/settings/calendar/main.js b/vue-options-api-demos/dateinputs/daterangepicker/settings/calendar/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/settings/calendar/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/settings/calendar/main.vue b/vue-options-api-demos/dateinputs/daterangepicker/settings/calendar/main.vue
new file mode 100644
index 00000000..cf65d75f
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/settings/calendar/main.vue
@@ -0,0 +1,27 @@
+<template>
+ <div class="example-wrapper">
+      <DateRangePicker
+        :calendar-settings="calendarSettings"
+      />
+    </div>
+</template>
+
+<script>
+import { DateRangePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+       DateRangePicker
+    },
+    data() {
+      return {
+        calendarSettings: {
+          bottomView: "year",
+          topView: "decade",
+          views: 1,
+        }
+      };
+    }
+};
+</script>
+
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/settings/dateinputs/main.js b/vue-options-api-demos/dateinputs/daterangepicker/settings/dateinputs/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/settings/dateinputs/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/settings/dateinputs/main.vue b/vue-options-api-demos/dateinputs/daterangepicker/settings/dateinputs/main.vue
new file mode 100644
index 00000000..de3e94c3
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/settings/dateinputs/main.vue
@@ -0,0 +1,35 @@
+<template>
+ <div class="example-wrapper">
+      <DateRangePicker
+        :start-date-input-settings="startDateInputSettings"
+        :end-date-input-settings="endDateInputSettings"
+      />
+    </div>
+</template>
+
+<script>
+import { DateRangePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+       DateRangePicker
+    },
+    data() {
+      return {
+        startDateInputSettings: {
+          spinners: true,
+          label: "Holiday Start",
+          format: "dd/M/yy",
+        },
+        endDateInputSettings: {
+          steps: {
+            day: 2,
+          },
+          label: "Holiday End",
+          formatPlaceholder: "short",
+        }
+      }
+    }
+};
+</script>
+
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/settings/popup/main.js b/vue-options-api-demos/dateinputs/daterangepicker/settings/popup/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/settings/popup/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/daterangepicker/settings/popup/main.vue b/vue-options-api-demos/dateinputs/daterangepicker/settings/popup/main.vue
new file mode 100644
index 00000000..6c772270
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/daterangepicker/settings/popup/main.vue
@@ -0,0 +1,36 @@
+<template>
+<div
+      class="example-wrapper"
+      :style="{
+        textAlign: 'center'
+      }"
+    >
+      <DateRangePicker  :popup-settings="popupSettings"  />
+    </div>
+</template>
+
+<script>
+import { DateRangePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+       DateRangePicker
+    },
+    data() {
+      return {
+        popupSettings: {
+          animate: false,
+          anchorAlign: {
+            horizontal: "center",
+            vertical: "bottom",
+          },
+          popupAlign: {
+            horizontal: "center",
+            vertical: "top",
+          },
+        }
+      }
+    }
+};
+</script>
+
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/.DS_Store b/vue-options-api-demos/dateinputs/datetimepicker/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..68786f1cc22110036fddf7adb48ab62b816bb61b
GIT binary patch
literal 6148
zcmeHK%}T>S5Z-NTn^J@v6g@6@Em%uc#7l_v1&ruHr6#6mFwK@GHHT8jRbR+A@p+ut
z-5i3!qlnJH?l(I>yO|HNKa4T%F2e)HY{r-c4UwZ#BWSL5HB2xfS93@<3-WXx#4@Ov
z=r@}1+uQ7cEm_JkR{j3>U>-+lHW+;HMzgii?pPhGXWe;EGWRk+Tc)nRxWUn-lyOk%
zesC2{^NGE6CX>vMlIcPvMBx-dZm**xl({RHNtmi!Pdlux)t%TotJU$aFGj<|bziJb
zh6B)#M(cIg+TPngy_h`5vqZjX9yw61WYb^?Z=h64dhr%XER#pDmpNrDAu&J<5Cg=(
zKV-lh23GGM)=ni81H{1h4B-ACpdmU23yo^)fDW(E=x-sSfR1koL}Ab|SZD+f2-m5A
zI+dFz2G{9e7beazSZLJgjH{Jl9<y@!c;RYwunQH=xTBGJVt^Q^GSJjR8_)l9_+@Gz
z`PCE}5d*})A7g;G#@^V4qRiR)r93=q1+;r;C>U3u0s?yF5&#3-M|PD{`vvL{=NK$B
U;w)%a>40<*P=ruN4Ez8CpB5TSB>(^b

literal 0
HcmV?d00001

diff --git a/vue-options-api-demos/dateinputs/datetimepicker/appearance/configurator/DateInputsStyleConfigurator.vue b/vue-options-api-demos/dateinputs/datetimepicker/appearance/configurator/DateInputsStyleConfigurator.vue
new file mode 100644
index 00000000..c1b36044
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/appearance/configurator/DateInputsStyleConfigurator.vue
@@ -0,0 +1,105 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Fill Mode
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="fillModes"
+              :value="fillMode"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleFillModeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+    fillMode: String,
+    rounded: String,
+  },
+  emits: [
+    "sizechange",
+    "fillmodechange",
+    "roundedchange",
+  ],
+  data() {
+    return {
+      sizes: ["small", "medium", "large"],
+      fillModes: ["solid", "outline", "flat"],
+      roundedOptions: ["small", "medium", "large", "full"],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleFillModeChange(event) {
+      this.$emit("fillmodechange", event);
+    },
+    handleRoundedChange(event) {
+      this.$emit("roundedchange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/appearance/configurator/main.js b/vue-options-api-demos/dateinputs/datetimepicker/appearance/configurator/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/appearance/configurator/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/appearance/configurator/main.vue b/vue-options-api-demos/dateinputs/datetimepicker/appearance/configurator/main.vue
new file mode 100644
index 00000000..8343957d
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/appearance/configurator/main.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <DateInputsStyleConfigurator
+      :size="size"
+      @sizechange="setSize"
+      :fill-mode="fillMode"
+      @fillmodechange="setFillMode"
+      :rounded="rounded"
+      @roundedchange="setRounded"
+    />
+    <DateTimePicker
+       :style="{ width: '260px'}"
+      :size="size"
+      :fill-mode="fillMode"
+      :rounded="rounded"
+    />
+  </div>
+</template>
+<script>
+import DateInputsStyleConfigurator from "./DateInputsStyleConfigurator.vue";
+import { DateTimePicker } from "@progress/kendo-vue-dateinputs";
+
+export default {
+  components: {
+    DateInputsStyleConfigurator,
+    DateTimePicker,
+  },
+  data() {
+    return {
+      size: "medium",
+      rounded: "medium",
+      fillMode: "solid",
+    };
+  },
+  methods: {
+    setRounded(event) {
+      this.rounded = event.value;
+    },
+    setSize(event) {
+      this.size = event.value;
+    },
+    setFillMode(event) {
+      this.fillMode = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/appearance/fill-mode/main.js b/vue-options-api-demos/dateinputs/datetimepicker/appearance/fill-mode/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/appearance/fill-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/appearance/fill-mode/main.vue b/vue-options-api-demos/dateinputs/datetimepicker/appearance/fill-mode/main.vue
new file mode 100644
index 00000000..b503fcdf
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/appearance/fill-mode/main.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="example-config">
+    <div class="demo">
+      <span class="wrapper">
+        <span>Flat: </span>
+        <DateTimePicker
+          :style="{ width: '170px' }"
+          :fill-mode="'flat'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Solid: </span>
+        <DateTimePicker
+          :style="{ width: '170px' }"
+          :fill-mode="'solid'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Outline: </span>
+        <DateTimePicker
+          :style="{ width: '170px' }"
+          :fill-mode="'outline'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Custom fill mode:</span>
+        <DateTimePicker
+          :class="'custom-datetimepicker'"
+          :fill-mode="null"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { DateTimePicker} from '@progress/kendo-vue-dateinputs';
+
+export default {
+  components: {
+    DateTimePicker,
+  },
+};
+</script>
+
+<style>
+.custom-datetimepicker {
+  width: 200px;
+  background-color: #00aead;
+  border: 2px solid #bfd843;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/appearance/rounded/main.js b/vue-options-api-demos/dateinputs/datetimepicker/appearance/rounded/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/appearance/rounded/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/appearance/rounded/main.vue b/vue-options-api-demos/dateinputs/datetimepicker/appearance/rounded/main.vue
new file mode 100644
index 00000000..a3a6f958
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/appearance/rounded/main.vue
@@ -0,0 +1,111 @@
+`<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Small roundness: </span>
+        <DateTimePicker
+          :style="{ width: '170px' }"
+          :rounded="'small'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Medium roundness: </span>
+        <DateTimePicker
+          :style="{ width: '170px' }"
+          :rounded="'medium'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Large roundness: </span>
+        <DateTimePicker
+          :style="{ width: '170px' }"
+          :rounded="'large'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Full roundness: </span>
+        <DateTimePicker
+          :style="{ width: '170px' }"
+          :rounded="'full'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Custom roundness:</span>
+        <DateTimePicker
+          :class="'custom-datetimepicker'"
+          :rounded="null"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { DateTimePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+  components: {
+    DateTimePicker,
+  },
+};
+</script>
+
+<style>
+.custom-datetimepicker {
+  width: 200px;
+  border-bottom-right-radius: 15px;
+  border-top-left-radius: 15px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
+`
\ No newline at end of file
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/appearance/size/main.js b/vue-options-api-demos/dateinputs/datetimepicker/appearance/size/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/appearance/size/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/appearance/size/main.vue b/vue-options-api-demos/dateinputs/datetimepicker/appearance/size/main.vue
new file mode 100644
index 00000000..7c51b99e
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/appearance/size/main.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Small: </span>
+        <DateTimePicker
+          :style="{ width: '170px' }"
+          :size="'small'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Medium: </span>
+        <DateTimePicker
+          :style="{ width: '170px' }"
+          :size="'medium'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Large: </span>
+        <DateTimePicker
+          :style="{ width: '170px' }"
+          :size="'large'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+    <span class="wrapper">
+      <span>Custom size:</span>
+      <DateTimePicker
+        :class="'custom-datetimepicker'"
+        :size="null"
+        :data-items="[
+          'X-Small',
+          'Small',
+          'Medium',
+          'Large',
+          'X-Large',
+          '2X-Large',
+        ]"
+      />
+    </span>
+  </div>
+</template>
+<script>
+import { DateTimePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+  components: {
+    DateTimePicker,
+  },
+};
+</script>
+
+<style>
+.custom-datetimepicker {
+  height: 40px;
+  width: 200px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/controlled/show/main.js b/vue-options-api-demos/dateinputs/datetimepicker/controlled/show/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/controlled/show/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/controlled/show/main.vue b/vue-options-api-demos/dateinputs/datetimepicker/controlled/show/main.vue
new file mode 100644
index 00000000..96424142
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/controlled/show/main.vue
@@ -0,0 +1,39 @@
+<template>
+    <div class="row">
+                <div class="col-xs-12 col-md-6 example-col">
+                    <p>Controlled DatePicker</p>
+                    <datetimepicker :style="{ width: '260px' }"
+                        :show="show"
+                    />
+                    <kbutton :theme-color="'primary'" @click="handleClick">Toggle</kbutton>
+                </div>
+                <div class="col-xs-12 col-md-6 example-col">
+                    <p>Always shown</p>
+                    <datetimepicker :style="{ width: '260px' }"
+                        :show="true"
+                    />
+                </div>
+            </div>
+</template>
+<script>
+import { DateTimePicker } from '@progress/kendo-vue-dateinputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'datetimepicker': DateTimePicker,
+      'kbutton': Button
+    },
+    data () {
+        return {
+            show: false
+        };
+    },
+    methods: {
+        handleClick (event) {
+            this.show = !this.show;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/controlled/value/main.js b/vue-options-api-demos/dateinputs/datetimepicker/controlled/value/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/controlled/value/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/controlled/value/main.vue b/vue-options-api-demos/dateinputs/datetimepicker/controlled/value/main.vue
new file mode 100644
index 00000000..0f06af4e
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/controlled/value/main.vue
@@ -0,0 +1,34 @@
+<template>
+    <div class="row">
+            <div class="example-config col-xs-12 col-md-12 example-col">
+                <p>The value is: {{`${value}`}}</p>
+            </div>
+            <div class="col-xs-12 col-md-12 example-col">
+                <p>Controlled DateTimePicker</p>
+                <datetimepicker :style="{ width: '260px' }"
+                    :value="value"
+                    @change="handleChange"
+                />
+            </div>
+        </div>
+</template>
+<script>
+import { DateTimePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'datetimepicker': DateTimePicker
+    },
+    data () {
+        return {
+            value: new Date()
+        };
+    },
+    methods: {
+        handleChange (event) {
+            this.value = event.target.value;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/custom/.DS_Store b/vue-options-api-demos/dateinputs/datetimepicker/custom/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..0e388a1e52631df541fbef181a6314c75447ddde
GIT binary patch
literal 6148
zcmeHK!A`<J5S@hri^PP3MvqOrl86K~#!G|v1J>w44YrnOW9<?s_CQE_)gSUt{2pg^
zmjozYjp9zS`=&EHZQcvJ%K!lDjDrJ!IskASgw_U5D~$3qa#qlhG9r`jh#>$EhJHF4
z<W`%2QNSqh+Z3R^%i#fcZ3KOo+rNG!e9V3LgD4y&&E_X76s=OZ!YjPS@7yPmx`~&J
zM;&i?Lr<4NME=b8{Hw5^_Uc<_B2K(8?hj=_81!+;?R6LjBJGHA9E@bGs}j7*tG)Wp
zWOCeU*zMNgv|&$9T21ti+S6&3Z}07&Ui6-$msq?h9T^@w(l#~D;2oVDtygy#M<Ra2
z9Mx6jVU-~55Qz_93<(`vf1mgYVoTIZNLNV8gY}?1M`(%a>=$7$r-0r(yq3$DfKk9G
z@ZS}n^TEbJ=xEFo%A*4(*#aP17?y@U^%7KLYjiYb3NeGmR4Jk=WxB;+svP6CUgv1c
z6smGyy7^%G%S?ADOnx2TZ_DMt9ED~!3K#_z6)395I^F;0-}nEEMdryUU=&y@1(?-!
zyB(yY@75eSx@&D5_c+LCU8Yc$;H0l(>CjcYi$fabY;q7CjhRA>pqW1cQU)^_1%6b4
EFIywYZ~y=R

literal 0
HcmV?d00001

diff --git a/vue-options-api-demos/dateinputs/datetimepicker/custom/calendar/CustomCalendar.vue b/vue-options-api-demos/dateinputs/datetimepicker/custom/calendar/CustomCalendar.vue
new file mode 100644
index 00000000..d0ba6214
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/custom/calendar/CustomCalendar.vue
@@ -0,0 +1,31 @@
+<template>
+    <calendar
+        :min="new Date()"
+        :value="value"
+        @change="handleChange"
+    />
+</template>
+<script>
+import { Calendar } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    props: Calendar.props,
+    emits: {
+      change: null
+    },
+    components: {
+        Calendar
+    },
+    methods: {
+        handleChange (event) {
+              this.$emit('change', {
+                    event: event.event,
+                    value: event.value,
+                    target: {
+                        value: event.value
+                    }
+                });
+        }
+    }
+  }
+</script>
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/custom/calendar/main.js b/vue-options-api-demos/dateinputs/datetimepicker/custom/calendar/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/custom/calendar/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/custom/calendar/main.vue b/vue-options-api-demos/dateinputs/datetimepicker/custom/calendar/main.vue
new file mode 100644
index 00000000..6ddea454
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/custom/calendar/main.vue
@@ -0,0 +1,26 @@
+<template>
+        <datetimepicker :style="{ width: '260px' }"
+            :calendar="customCalendar"
+        >
+            <template v-slot:myTemplate="{props}">
+                <custom :value="props.value" @change="(ev) => props.onChange(ev)" />
+            </template>
+        </datetimepicker>
+</template>
+<script>
+import { DateTimePicker } from '@progress/kendo-vue-dateinputs';
+import CustomCalendar from './CustomCalendar.vue';
+
+export default {
+    components: {
+        'datetimepicker': DateTimePicker,
+        'custom': CustomCalendar
+    },
+    data () {
+        return {
+            customCalendar: 'myTemplate'
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/custom/dateinput/CustomDateInput.vue b/vue-options-api-demos/dateinputs/datetimepicker/custom/dateinput/CustomDateInput.vue
new file mode 100644
index 00000000..be84982b
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/custom/dateinput/CustomDateInput.vue
@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <input
+      :style="inputStyle"
+      type="number"
+      data-section="day"
+      :value="value.getDate()"
+      @change="handleChange"
+    />,
+    <input
+      :style="inputStyle"
+      type="number"
+      data-section="month"
+      :value="value.getMonth() + 1"
+      @change="handleChange"
+    />,
+    <input
+      :style="inputStyle"
+      type="number"
+      data-section="year"
+      :value="value.getFullYear()"
+      @change="handleChange"
+    />
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    value: Date
+  },
+  emits: {
+    change: null
+  },
+  data() {
+    return {
+      inputStyle: {
+        width: "90px"
+      },
+      today: new Date()
+    };
+  },
+  methods: {
+    handleChange(event) {
+      const date = {
+        day: this.$props.value.getDate(),
+        month: this.$props.value.getMonth(),
+        year: this.$props.value.getFullYear()
+      };
+
+      date[event.target.getAttribute("data-section")] = Number(
+        event.target.value
+      );
+
+      const value = new Date(date.year, date.month - 1, date.day);
+      this.$emit("change", {
+        value,
+        event
+      });
+    }
+  }
+};
+</script>
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/custom/dateinput/main.js b/vue-options-api-demos/dateinputs/datetimepicker/custom/dateinput/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/custom/dateinput/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/custom/dateinput/main.vue b/vue-options-api-demos/dateinputs/datetimepicker/custom/dateinput/main.vue
new file mode 100644
index 00000000..df4a55a9
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/custom/dateinput/main.vue
@@ -0,0 +1,30 @@
+<template>
+        <datetimepicker :style="{ width: '260px' }"
+                :date-input="customDateInput"
+                :default-value="new Date()"
+                :width="'270px'"
+
+        >
+        <template v-slot:myTemplate="{props}">
+            <custom :value="props.value" @change="(e) => props.onChange(e)" />
+        </template>
+        </datetimepicker>
+</template>
+<script>
+import CustomDateInput from './CustomDateInput.vue';
+import { DateTimePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+        'datetimepicker': DateTimePicker,
+        'custom': CustomDateInput
+
+    },
+    data () {
+        return {
+            customDateInput: 'myTemplate'
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/custom/popup/CustomPopup.vue b/vue-options-api-demos/dateinputs/datetimepicker/custom/popup/CustomPopup.vue
new file mode 100644
index 00000000..cb621a3f
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/custom/popup/CustomPopup.vue
@@ -0,0 +1,27 @@
+<template>
+  <Popup
+    :anchor="'datepicker'"
+    :show="show"
+    :anchor-align="{
+      horizontal: 'center',
+      vertical: 'bottom'
+    }"
+    :popup-align="{
+      horizontal: 'center',
+      vertical: 'top'
+    }"
+  >
+    <slot />
+  </Popup>
+</template>
+<script>
+import { Popup } from "@progress/kendo-vue-popup";
+export default {
+  props: {
+    show: Boolean
+  },
+  components: {
+    Popup
+  }
+};
+</script>
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/custom/popup/main.js b/vue-options-api-demos/dateinputs/datetimepicker/custom/popup/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/custom/popup/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/custom/popup/main.vue b/vue-options-api-demos/dateinputs/datetimepicker/custom/popup/main.vue
new file mode 100644
index 00000000..3bba239c
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/custom/popup/main.vue
@@ -0,0 +1,24 @@
+<template>
+  <div :style="{ textAlign: 'center' }">
+    <datetimepicker :style="{ width: '260px' }" ref="datepicker" :popup="customPopup">
+      <template v-slot:myTemplate="{ props }">
+        <custom :show="props.show" />
+      </template>
+    </datetimepicker>
+  </div>
+</template>
+<script>
+import { DateTimePicker } from "@progress/kendo-vue-dateinputs";
+import CustomPopup from "./CustomPopup.vue";
+
+export default {
+  components: {
+    datepicker: DateTimePicker
+  },
+  data: function() {
+    return {
+      customPopup: CustomPopup
+    };
+  }
+};
+</script>
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/default/show/main.js b/vue-options-api-demos/dateinputs/datetimepicker/default/show/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/default/show/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/default/show/main.vue b/vue-options-api-demos/dateinputs/datetimepicker/default/show/main.vue
new file mode 100644
index 00000000..3e01a2ab
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/default/show/main.vue
@@ -0,0 +1,25 @@
+<template>
+    <div class="row">
+            <div class="col-xs-12 col-md-12 example-col">
+                <p>DateTimePicker with default show</p>
+                <datetimepicker :style="{ width: '260px' }"
+                    :default-show="defaultShow"
+                />
+            </div>
+        </div>
+</template>
+<script>
+import { DateTimePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'datetimepicker': DateTimePicker
+    },
+    data () {
+        return {
+            defaultShow: true
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/default/value/main.js b/vue-options-api-demos/dateinputs/datetimepicker/default/value/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/default/value/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/default/value/main.vue b/vue-options-api-demos/dateinputs/datetimepicker/default/value/main.vue
new file mode 100644
index 00000000..f802a24d
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/default/value/main.vue
@@ -0,0 +1,25 @@
+<template>
+    <div class="row">
+            <div class="col-xs-12 col-md-12 example-col">
+                <p>DateTimePicker with default value</p>
+                <datetimepicker :style="{ width: '260px' }"
+                    :default-value="defaultValue"
+                />
+            </div>
+        </div>
+</template>
+<script>
+import { DateTimePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'datetimepicker': DateTimePicker
+    },
+    data () {
+        return {
+            defaultValue: new Date()
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/disabled/main.js b/vue-options-api-demos/dateinputs/datetimepicker/disabled/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/disabled/main.vue b/vue-options-api-demos/dateinputs/datetimepicker/disabled/main.vue
new file mode 100644
index 00000000..529543d6
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/disabled/main.vue
@@ -0,0 +1,16 @@
+<template>
+   <div class="row">
+            <p>Today's date:</p>
+                <datetimepicker :style="{ width: '260px' }" :disabled="true" :value="new Date()" :show="true" />
+        </div>
+</template>
+<script>
+import { DateTimePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'datetimepicker': DateTimePicker
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/events/main.js b/vue-options-api-demos/dateinputs/datetimepicker/events/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/events/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/events/main.vue b/vue-options-api-demos/dateinputs/datetimepicker/events/main.vue
new file mode 100644
index 00000000..98b360bb
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/events/main.vue
@@ -0,0 +1,41 @@
+<template>
+     <div class="row">
+                <div class="col-md-6">
+                    <datetimepicker :style="{ width: '260px' }"
+                        @change="handleChange"
+                        :value="value"
+                    />
+                </div>
+                <div class="col-md-6">
+                    <div class="example-config">
+                      <h5>{{"DateTimePicker Events"}}</h5>
+                      <ul class="event-log" :style="{ maxHeight: '300px' }">
+                          <li key={index} v-for="(event, index) in logs">{{event}}</li>
+                      </ul>
+            </div>
+                </div>
+            </div>
+</template>
+<script>
+import { DateTimePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'datetimepicker': DateTimePicker
+    },
+    data () {
+        return {
+           value: new Date(),
+           logs: []
+        };
+    },
+    methods: {
+         handleChange (event) {
+            this.logs.unshift("change: " + event.target.value);
+
+            this.value = event.target.value;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/floating-label/main.js b/vue-options-api-demos/dateinputs/datetimepicker/floating-label/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/floating-label/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/floating-label/main.vue b/vue-options-api-demos/dateinputs/datetimepicker/floating-label/main.vue
new file mode 100644
index 00000000..984f0adf
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/floating-label/main.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <p>DateTimePicker</p>
+    <datetimepicker :style="{ width: '260px' }"
+      :label="'Select date and time:'"
+      @change="onChangeDateTimePicker"
+      :value="dateTimePickerValue"
+      :placeholder="''"
+    >
+    </datetimepicker>
+  </div>
+</template>
+<script>
+import { DateTimePicker } from "@progress/kendo-vue-dateinputs";
+
+export default {
+  components: {
+    datetimepicker: DateTimePicker,
+  },
+  data: function () {
+    return {
+      dateTimePickerValue: undefined,
+    };
+  },
+  methods: {
+    onChangeDateTimePicker: function (e) {
+      this.dateTimePickerValue = e.value;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/focused/main.js b/vue-options-api-demos/dateinputs/datetimepicker/focused/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/focused/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/focused/main.vue b/vue-options-api-demos/dateinputs/datetimepicker/focused/main.vue
new file mode 100644
index 00000000..e0fdce7d
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/focused/main.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="example-wrapper">
+    <datetimepicker :style="{ width: '260px' }" :focused-date="focusedDate" @change="handleChange" />
+  </div>
+</template>
+<script>
+import { DateTimePicker } from "@progress/kendo-vue-dateinputs";
+
+export default {
+  components: {
+    datetimepicker: DateTimePicker
+  },
+  data() {
+    return {
+      focusedDate: new Date(1997, 1, 20)
+    };
+  },
+  methods: {
+    handleChange(e) {
+      this.focusedDate = e.value;
+    }
+  }
+};
+</script>
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/formats/main.js b/vue-options-api-demos/dateinputs/datetimepicker/formats/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/formats/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/formats/main.vue b/vue-options-api-demos/dateinputs/datetimepicker/formats/main.vue
new file mode 100644
index 00000000..e24d8682
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/formats/main.vue
@@ -0,0 +1,61 @@
+<template>
+    <div class="example-wrapper" :style="{ minHeight: '400px' }">
+            <div class="col-xs-12 col-sm-6 example-col">
+                <p>Select a long time:</p>
+                <datetimepicker :style="{ width: '260px' }"
+                    :format="'dd-MM-yyyy hh:mm:ss a'"
+                    :default-value="defaultValue"
+                    :width="'300px'"
+                />
+            </div>
+
+            <div class="col-xs-12 col-sm-6 example-col">
+                <p>Select a short time:</p>
+                <datetimepicker :style="{ width: '260px' }"
+                    :format="'dd MMMM | HH:mm'"
+                    :default-value="defaultValue"
+                    :width="'300px'"
+                />
+            </div>
+            <div class="col-xs-12 col-sm-6 example-col">
+                <p>Custom Skeleton:</p>
+                <datetimepicker :style="{ width: '260px' }"
+                    :format="{
+                        skeleton: 'yMMMdEHmSs'
+                    }"
+                    :default-value="defaultValue"
+                    :width="'300px'"
+                />
+            </div>
+            <div class="col-xs-12 col-sm-6 example-col">
+                <p>Custom Format:</p>
+                <datetimepicker :style="{ width: '260px' }"
+                    :format="customFormat"
+                    :default-value="defaultValue"
+                    :width="'300px'"
+                />
+            </div>
+        </div>
+</template>
+<script>
+import { DateTimePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'datetimepicker': DateTimePicker
+    },
+    data () {
+        return {
+            customFormat: {
+                year: 'numeric',
+                month: 'short',
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit'
+            },
+            defaultValue: new Date(2000, 2, 10, 13, 30, 0)
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/forms/basic/main.js b/vue-options-api-demos/dateinputs/datetimepicker/forms/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/forms/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/forms/basic/main.vue b/vue-options-api-demos/dateinputs/datetimepicker/forms/basic/main.vue
new file mode 100644
index 00000000..7a893bd5
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/forms/basic/main.vue
@@ -0,0 +1,60 @@
+<template>
+     <div class="row example-wrapper">
+            <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                <div class="card">
+                    <div class="card-block">
+                        <form class="k-form" @submit="handleSubmit">
+                            <fieldset>
+                                <legend>Please select the time of your flight:</legend>
+                                <label class="k-form-field">
+                                    <span>Departure</span>
+                                    <datetimepicker 
+                                        :name="'departure'"
+                                        :required="true"
+                                    />
+                                </label>
+                                <label class="k-form-field">
+                                    <span>Arrival</span>
+                                    <datetimepicker 
+                                        :name="'arrival'"
+                                        :required="true"
+                                    />
+                                </label>
+                            </fieldset>
+                            <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                        </form>
+                    </div>
+                </div>
+            </div>
+                <div v-if="success"
+                    class="alert alert-success"
+                    :style="{ position: 'absolute' }"
+                >
+                    Form submitted!
+                </div>
+        </div>
+</template>
+<script>
+import { DateTimePicker } from '@progress/kendo-vue-dateinputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'datetimepicker': DateTimePicker,
+      'kbutton': Button
+    },
+    data () {
+        return {
+            success: false
+        };
+    },
+    methods: {
+        handleSubmit (event) {
+            event.preventDefault();
+            this.success = true ;
+            setTimeout(() => { this.success= false; }, 3000);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/forms/custom-message/main.js b/vue-options-api-demos/dateinputs/datetimepicker/forms/custom-message/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/forms/custom-message/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/forms/custom-message/main.vue b/vue-options-api-demos/dateinputs/datetimepicker/forms/custom-message/main.vue
new file mode 100644
index 00000000..88e8844e
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/forms/custom-message/main.vue
@@ -0,0 +1,66 @@
+<template>
+    <div class="row example-wrapper">
+            <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                <div class="card">
+                    <div class="card-block">
+                        <form class="k-form" @submit="handleSubmit">
+                            <fieldset>
+                                <legend>Please select the time of your flight:</legend>
+                                <label class="k-form-field">
+                                    <span>Departure</span>
+                                    <datetimepicker 
+                                        :name="'departure'"
+                                        :required="true"
+                                        :min="today"
+                                        :validation-message="checkInValidationMessage"
+                                    />
+                                </label>
+                                <label class="k-form-field">
+                                    <span>Arrival</span>
+                                    <datetimepicker 
+                                        :name="'arrival'"
+                                        :required="true"
+                                        :validation-message="checkOutValidationMessage"
+                                    />
+                                </label>
+                            </fieldset>
+                            <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                        </form>
+                    </div>
+                </div>
+            </div>
+                <div v-if="success"
+                    class="alert alert-success"
+                    :style="{ position: 'absolute' }"
+                >
+                    Form submitted!
+                </div>
+        </div>
+</template>
+<script>
+import { DateTimePicker } from '@progress/kendo-vue-dateinputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'datetimepicker': DateTimePicker,
+      'kbutton': Button
+    },
+     data () {
+        return {
+            success: false,
+            today: new Date(),
+            checkInValidationMessage: 'Times in the past are not valid Departure times.',
+            checkOutValidationMessage: 'The Arrival time is required.'
+        };
+    },  
+    methods: {
+        handleSubmit (event) {
+            event.preventDefault();
+            this.success = true ;
+            setTimeout(() => { this.success= false; }, 3000);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/forms/disable-styles/main.js b/vue-options-api-demos/dateinputs/datetimepicker/forms/disable-styles/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/forms/disable-styles/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/forms/disable-styles/main.vue b/vue-options-api-demos/dateinputs/datetimepicker/forms/disable-styles/main.vue
new file mode 100644
index 00000000..899cd0a6
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/forms/disable-styles/main.vue
@@ -0,0 +1,95 @@
+<template>
+   <div class="row example-wrapper">
+            <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                <div class="card">
+                    <div class="card-block">
+                        <form class="k-form" @submit="handleSubmit">
+                            <fieldset>
+                                <legend>Please select the time of your flight:</legend>
+                                <label class="k-form-field">
+                                    <span>Departure</span>
+                                    <datetimepicker 
+                                        :name="'departure'"
+                                        :required="true"
+                                        :spinners="true"
+                                        :min="now"
+                                        :value="departure"
+                                        @change="handleChange"
+                                        :validation-message="departure === null
+                                            ? 'Departure time is required!'
+                                            : 'Departure time cannot be in the past!'"
+                                    />
+                                </label>
+                                <label class="k-form-field">
+                                    <span>Arrival</span>
+                                    <datetimepicker
+                                        :validity-styles="false"
+                                        :name="'arrival'"
+                                        :required="true"
+                                        :spinners="true"
+
+                                        :valid="(departure !== null && arrival !== null)
+                                            && (departure.getTime() < arrival.getTime())"
+
+                                        :value="arrival"
+                                        @change="handleChange"
+                                        :validation-message="arrival === null
+                                            ? 'Arrival time is required!'
+                                            : 'Arrival time cannot be before Departure time!'"
+                                    />
+                                </label>
+                                <label class="k-form-field">
+                                    <span>Additional Comments</span>
+                                    <textarea
+                                        class="k-textarea"
+                                        :style="{ width: '100%' }"
+                                        name="additionalComments"
+                                        :value="additionalComments"
+                                        @change="handleChange"
+                                    ></textarea>
+                                </label>
+                            </fieldset>
+                            <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                        </form>
+                    </div>
+                </div>
+            </div>
+                <div v-if="success"
+                    class="alert alert-success"
+                    :style="{ position: 'absolute' }"
+                >
+                    Form submitted!
+                </div>
+        </div>
+</template>
+<script>
+import { DateTimePicker } from '@progress/kendo-vue-dateinputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'datetimepicker': DateTimePicker,
+      'kbutton': Button
+    },
+    data () {
+        return {
+            departure: null,
+            arrival: null,
+            additionalComments: '',
+            success: false,
+            now: new Date()
+        };
+    },
+    methods: {
+        handleSubmit (event) {
+            event.preventDefault();
+            this.success = true ;
+            setTimeout(() => { this.success= false; }, 3000);
+        },
+        handleChange (event) {
+            this[event.target.name] = event.target.value;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/forms/override/main.js b/vue-options-api-demos/dateinputs/datetimepicker/forms/override/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/forms/override/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/forms/override/main.vue b/vue-options-api-demos/dateinputs/datetimepicker/forms/override/main.vue
new file mode 100644
index 00000000..b5ba8c44
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/forms/override/main.vue
@@ -0,0 +1,94 @@
+<template>
+    <div class="row example-wrapper">
+            <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                <div class="card">
+                    <div class="card-block">
+                        <form class="k-form" @submit="handleSubmit">
+                            <fieldset>
+                                <legend>Please select the time of your flight:</legend>
+                                <label class="k-form-field">
+                                    <span>Departure</span>
+                                    <datetimepicker 
+                                        :name="'departure'"
+                                        :required="true"
+                                        :spinners="true"
+                                        :min="now"
+                                        :value="departure"
+                                        @change="handleChange"
+                                        :validation-message="departure === null
+                                            ? 'Departure time is required!'
+                                            : 'Departure time cannot be in the past!'"
+                                    />
+                                </label>
+                                <label class="k-form-field">
+                                    <span>Arrival</span>
+                                    <datetimepicker 
+                                        :name="'arrival'"
+                                        :required="true"
+                                        :spinners="true"
+
+                                        :valid="(departure !== null && arrival !== null)
+                                            && (departure.getTime() < arrival.getTime())"
+
+                                        :value="arrival"
+                                        @change="handleChange"
+                                        :validation-message="arrival === null
+                                            ? 'Arrival time is required!'
+                                            : 'Arrival time cannot be before Departure time!'"
+                                    />
+                                </label>
+                                <label class="k-form-field">
+                                    <span>Additional Comments</span>
+                                    <textarea
+                                        class="k-textarea"
+                                        :style="{ width: '100%' }"
+                                        name="additionalComments"
+                                        :value="additionalComments"
+                                        @change="handleChange"
+                                    ></textarea>
+                                </label>
+                            </fieldset>
+                            <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                        </form>
+                    </div>
+                </div>
+            </div>
+                <div v-if="success"
+                    class="alert alert-success"
+                    :style="{ position: 'absolute' }"
+                >
+                    Form submitted!
+                </div>
+        </div>
+</template>
+<script>
+import { DateTimePicker } from '@progress/kendo-vue-dateinputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'datetimepicker': DateTimePicker,
+      'kbutton': Button
+    },
+    data () {
+        return {
+            departure: null,
+            arrival: null,
+            additionalComments: '',
+            success: false,
+            now: new Date()
+        };
+    },
+    methods: {
+        handleSubmit (event) {
+            event.preventDefault();
+            this.success = true ;
+            setTimeout(() => { this.success= false; }, 3000);
+        },
+        handleChange (event) {
+            this[event.target.name] = event.target.value;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/input-mode/main.js b/vue-options-api-demos/dateinputs/datetimepicker/input-mode/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/input-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/input-mode/main.vue b/vue-options-api-demos/dateinputs/datetimepicker/input-mode/main.vue
new file mode 100644
index 00000000..a71ff6fe
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/input-mode/main.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class="k-d-grid k-grid-cols-sm-1 k-grid-cols-md-2 k-gap-4 k-max-w-fit">
+        <div class="k-col-span-1">
+            <div>
+                inputmode=text <i>(default)</i>
+            </div>
+            <datetimepicker
+                :default-value="value"
+                :format="'MMMM, dd, yyyy HH:mm:ss a'"
+                :input-attributes="{ inputMode: 'text' }"
+                :style="{ width: '300px' }"
+            />
+        </div>
+        <div class="k-col-span-1">
+            <div>inputmode=numeric</div>
+            <datetimepicker
+                :default-value="value"
+                :format="'dd-MM-yyyy HH:mm'"
+                :input-attributes="{ inputMode: 'numeric' }"
+                :style="{ width: '300px' }"
+            />
+        </div>
+        <div class="k-col-span-1">
+            <div>
+                inputmode=none <br />
+                <i>(the user can only pick a value from the popup)</i>
+            </div>
+            <datetimepicker
+                :default-value="value"
+                :input-attributes="{ inputMode: 'none' }"
+                :style="{ width: '300px' }"
+            />
+        </div>
+    </div>
+</template>
+<script>
+import { DateTimePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+        'datetimepicker': DateTimePicker
+    },
+    data() {
+        return {
+            value: new Date()
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/json/main.js b/vue-options-api-demos/dateinputs/datetimepicker/json/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/json/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/json/main.vue b/vue-options-api-demos/dateinputs/datetimepicker/json/main.vue
new file mode 100644
index 00000000..b585a9b1
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/json/main.vue
@@ -0,0 +1,42 @@
+<template>
+    <div>
+            <div class="example-config">
+                <p>TimePicker value: {{`${departureTime}`}}</p>
+            </div>
+            <label>
+                Select Birthdate:
+                <datetimepicker :style="{ width: '260px' }"
+                    :value="departureTime"
+                    @change="handleChange"
+                />
+            </label>
+        </div>
+</template>
+<script>
+import { DateTimePicker } from '@progress/kendo-vue-dateinputs';
+import { provideIntlService } from '@progress/kendo-vue-intl';
+
+export default {
+    components: {
+      'datetimepicker': DateTimePicker
+    },
+    mounted: function(){
+        setTimeout(() => {
+          const date = '2017-06-27 14:30';
+          // @ts-ignore
+          this.departureTime = provideIntlService(this).parseDate(date, 'yyyy-MM-dd HH:mm');
+        }, 1000);
+   },
+    data () {
+        return {
+           departureTime: null
+        };
+    },
+    methods: {
+        handleChange (event) {
+            this.departureTime= event.target.value;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/keyboard/main.js b/vue-options-api-demos/dateinputs/datetimepicker/keyboard/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/keyboard/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/keyboard/main.vue b/vue-options-api-demos/dateinputs/datetimepicker/keyboard/main.vue
new file mode 100644
index 00000000..084fc7fb
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/keyboard/main.vue
@@ -0,0 +1,23 @@
+<template>
+   <div class="example-wrapper">
+                <datetimepicker :style="{ width: '260px' }"
+                    :default-value="value"
+                />
+                <p>(use Alt+<code>↓</code> to open the calendar, <code>←</code> and <code>→</code> to navigate, <code>↑</code> to increment and <code>↓</code> to decrement the value)</p>
+            </div>
+</template>
+<script>
+import { DateTimePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'datetimepicker': DateTimePicker
+    },
+    data () {
+        return {
+           value: new Date(2020, 2, 10)
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/overview/basic/main.js b/vue-options-api-demos/dateinputs/datetimepicker/overview/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/overview/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/overview/basic/main.vue b/vue-options-api-demos/dateinputs/datetimepicker/overview/basic/main.vue
new file mode 100644
index 00000000..c1c5403e
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/overview/basic/main.vue
@@ -0,0 +1,15 @@
+<template>
+    <div class="example-wrapper">
+          <datetimepicker :style="{ width: '260px' }" />
+      </div>
+</template>
+<script>
+import { DateTimePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'datetimepicker': DateTimePicker
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/placeholders/main.js b/vue-options-api-demos/dateinputs/datetimepicker/placeholders/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/placeholders/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/placeholders/main.vue b/vue-options-api-demos/dateinputs/datetimepicker/placeholders/main.vue
new file mode 100644
index 00000000..c702a1d8
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/placeholders/main.vue
@@ -0,0 +1,40 @@
+<template>
+    <div class="row example-wrapper" :style="{minHeight: '450px'}">
+            <div class="col-xs-12 col-md-6 example-col">
+                <p>Full-length format description:</p>
+                <datetimepicker :style="{ width: '260px' }" :format-placeholder="'wide'" :width="'300px'"/>
+            </div>
+
+            <div class="col-xs-12 col-md-6 example-col">
+                <p>Narrow-length format description:</p>
+                <datetimepicker :style="{ width: '260px' }" :forma-placeholder="'narrow'" :width="'300px'"/>
+            </div>
+
+            <div class="col-xs-12 col-md-6 example-col">
+                <p>Short-length format description:</p>
+                <datetimepicker :style="{ width: '260px' }" :format-placeholder="'short'" :width="'300px'"/>
+            </div>
+
+            <div class="col-xs-12 col-md-6 example-col">
+                <p>Display defined format:</p>
+                <datetimepicker :style="{ width: '260px' }" :format="'MM/dd/yyyy hh:mm'" :format-placeholder="'formatPattern'" :width="'300px'"/>
+            </div>
+
+            <div class="col-xs-12 col-md-6 example-col">
+                <p>Custom defined format descriptions</p>
+                <datetimepicker :style="{ width: '260px' }" :format="'MM/dd/yyyy h:mm'"
+                    :format-placeholder="{ year: 'y', month: 'M', day: 'd', hour: 'hour', minute: 'min' }"
+                    :width="'300px'" />
+            </div>
+        </div>
+</template>
+<script>
+import { DateTimePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'datetimepicker': DateTimePicker
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/ranges/date/main.js b/vue-options-api-demos/dateinputs/datetimepicker/ranges/date/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/ranges/date/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/ranges/date/main.vue b/vue-options-api-demos/dateinputs/datetimepicker/ranges/date/main.vue
new file mode 100644
index 00000000..4b8fc083
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/ranges/date/main.vue
@@ -0,0 +1,27 @@
+<template>
+    <div class="example-config">
+        <p>Select a date:</p>
+            <datetimepicker :style="{ width: '260px' }"
+            :min="min"
+            :max="max"
+            :default-value="defaultValue"
+        ></datetimepicker>
+    </div>
+</template>
+<script>
+import { DateTimePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'datetimepicker': DateTimePicker
+    },
+    data () {
+        return {
+            min: new Date(2001, 2, 10, 12, 30),
+            max: new Date(2002, 2, 10, 12, 30),
+            defaultValue: new Date(2001, 2, 10, 12, 45)
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/ranges/time/main.js b/vue-options-api-demos/dateinputs/datetimepicker/ranges/time/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/ranges/time/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/datetimepicker/ranges/time/main.vue b/vue-options-api-demos/dateinputs/datetimepicker/ranges/time/main.vue
new file mode 100644
index 00000000..3d62f7b8
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/datetimepicker/ranges/time/main.vue
@@ -0,0 +1,27 @@
+<template>
+   <div class="example-config">
+        <p>Select a date:</p>
+        <datetimepicker :style="{ width: '260px' }"
+            :min-time="min"
+            :max-time="max"
+            :default-value="defaultValue"
+        ></datetimepicker>
+    </div>
+</template>
+<script>
+import { DateTimePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'datetimepicker': DateTimePicker
+    },
+    data () {
+        return {
+              minTime: new Date(2000, 1, 1, 8, 30),
+              maxMax: new Date(2000, 1, 1, 17, 30),
+              defaultValue: new Date(2019, 10, 8, 8, 15)
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/floating-label/main.js b/vue-options-api-demos/dateinputs/floating-label/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/floating-label/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/floating-label/main.vue b/vue-options-api-demos/dateinputs/floating-label/main.vue
new file mode 100644
index 00000000..57645512
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/floating-label/main.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="example-wrapper row">
+    <div class="col-xs-12 col-md-6 example-col">
+      <p>DateInput</p>
+      <dateinput :style="{ width: '230px' }"
+        :id="dateInputID"
+        :placeholder="''"
+        :label="'Enter date:'"
+        @change="onChangeDateInput"
+      />
+      <br />
+      <br />
+      <p>DatePicker</p>
+      <datepicker :style="{ width: '230px' }"
+        :id="datePickerID"
+        :placeholder="''"
+        :label="'Select date:'"
+        @change="onChangeDatePicker"
+        :value="datePickerValue"
+      >
+      </datepicker>
+      <br />
+      <br />
+      <p>TimePicker</p>
+      <timepicker :style="{ width: '230px' }"
+        :id="timePickerID"
+        :placeholder="''"
+        :label="'Select time:'"
+        @change="onChangeTimePicker"
+        :value="timePickerValue"
+      >
+      </timepicker>
+      <br />
+      <br />
+      <p>DateTimePicker</p>
+      <datetimepicker :style="{ width: '230px' }"
+        :id="dateTimePickerID"
+        :placeholder="''"
+        :label="'Select date and time:'"
+        @change="onChangeDateTimePicker"
+        :value="dateTimePickerValue"
+      >
+      </datetimepicker>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  DateInput,
+  DatePicker,
+  TimePicker,
+  DateTimePicker,
+} from "@progress/kendo-vue-dateinputs";
+
+export default {
+  name: "App",
+  components: {
+    datepicker: DatePicker,
+    datetimepicker: DateTimePicker,
+    timepicker: TimePicker,
+    dateinput: DateInput,
+  },
+  data: function () {
+    return {
+      dateInputID: "dateInputID",
+      datePickerID: "datePickerID",
+      timePickerID: "timePickerID",
+      dateTimePickerID: "dateTimePickerID",
+      dateInputValue: null,
+      datePickerValue: null,
+      timePickerValue: null,
+      dateTimePickerValue: null,
+    };
+  },
+  methods: {
+    onChangeDateInput: function (e) {
+      this.dateInputValue = e.value;
+    },
+    onChangeDatePicker: function (e) {
+      this.datePickerValue = e.value;
+    },
+    onChangeDateTimePicker: function (e) {
+      this.dateTimePickerValue = e.value;
+    },
+    onChangeTimePicker: function (e) {
+      this.timePickerValue = e.value;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/dateinputs/globalization/es.json b/vue-options-api-demos/dateinputs/globalization/es.json
new file mode 100644
index 00000000..7fd085c9
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/globalization/es.json
@@ -0,0 +1,31 @@
+{
+    "datepicker": {
+        "toggleCalendar": "Alternar calendario"
+    },
+    "calendar": {
+        "today": "Hoy"
+    },
+    "dateinput": {
+        "increment": "Incrementar valor",
+        "decrement": "Disminuir valor"
+    },
+    "datetimepicker": {
+        "date": "Fecha",
+        "time": "Hora",
+        "cancel": "Cancelar",
+        "set": "Conjunto"
+    },
+    "timepicker": {
+        "set": "Conjunto",
+        "cancel": "Cancelar",
+        "now": "Ahora",
+        "selectNow": "Seleccionar ahora",
+        "toggleTimeSelector": "Selector de tiempo de alternancia",
+        "toggleClock": "Reloj de palanca"
+    },
+    "daterangepicker": {
+        "swapStartEnd": "Swap start and end values",
+        "start": "Comienzo",
+        "end": "Fin"
+    }
+}
diff --git a/vue-options-api-demos/dateinputs/globalization/main.js b/vue-options-api-demos/dateinputs/globalization/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/globalization/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/globalization/main.vue b/vue-options-api-demos/dateinputs/globalization/main.vue
new file mode 100644
index 00000000..d8517c95
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/globalization/main.vue
@@ -0,0 +1,95 @@
+<template>
+	<localization :language="selectedLocale.language">
+		<intl :locale="selectedLocale.locale">
+			<div class="example-wrapper row">
+				<div class="col-xs-12 col-md-12 example-config">
+					<h6>Locale:
+						 <dropdownlist
+                             :style="{ width: '230px' }" :value="selectedLocale" :data-items="locales" :text-field="'locale'"
+							@change="change" />
+					</h6>
+				</div>
+				<div class="col-xs-12 col-md-6 example-col">
+					<p>Calendar</p>
+					<calendar :default-value="new Date()">
+					</calendar>
+				</div>
+				<div class="col-xs-12 col-md-6 example-col">
+					<p>DateInput</p>
+					<dateinput :style="{ width: '230px' }" :default-value="new Date()" :format="'dd/MMM/yyyy'">
+					</dateinput>
+					<p>DatePicker</p>
+					<datepicker :style="{ width: '230px' }" :default-value="new Date()" :format="'dd/MMM/yyyy'">
+					</datepicker>
+					<p>TimePicker</p>
+					<timepicker :style="{ width: '230px' }" />
+					<p>DateTimePicker</p>
+					<datetimepicker :style="{ width: '230px' }" />
+				</div>
+			</div>
+		</intl>
+	</localization>
+</template>
+<script>
+	import { Calendar, DateInput, DatePicker, TimePicker, DateTimePicker } from '@progress/kendo-vue-dateinputs';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import { IntlProvider, load, loadMessages, LocalizationProvider } 
+    from '@progress/kendo-vue-intl';
+
+import likelySubtags from 'cldr-core/supplemental/likelySubtags.json';
+import currencyData from 'cldr-core/supplemental/currencyData.json';
+import weekData from 'cldr-core/supplemental/weekData.json';
+
+import numbers from 'cldr-numbers-full/main/es/numbers.json';
+import caGregorian from 'cldr-dates-full/main/es/ca-gregorian.json';
+import dateFields from 'cldr-dates-full/main/es/dateFields.json';
+import timeZoneNames from 'cldr-dates-full/main/es/timeZoneNames.json';
+
+load(
+    likelySubtags,
+    currencyData,
+    weekData, numbers,
+    caGregorian,
+    dateFields,
+    timeZoneNames
+);
+
+import esMessages from './es.json';
+loadMessages(esMessages, 'es-ES');
+const locales = [
+    {
+        language: 'en-US',
+        locale: 'en'
+    },
+    {
+        language: 'es-ES',
+        locale: 'es'
+    }
+];
+
+export default {
+    components: {
+      'datepicker': DatePicker,
+      'datetimepicker': DateTimePicker,
+      'timepicker': TimePicker,
+      'calendar': Calendar,
+      'dateinput': DateInput,
+      'dropdownlist': DropDownList,
+      'intl': IntlProvider,
+      'localization': LocalizationProvider
+    },
+    data: function() {
+        return {
+            locales: locales,
+            selectedLocale: locales[0], 
+            value: new Date()
+        };
+    },
+    methods: {
+      change(e) {
+          this.selectedLocale= e.target.value;
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/multiviewcalendar/keyboard/main.js b/vue-options-api-demos/dateinputs/multiviewcalendar/keyboard/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/multiviewcalendar/keyboard/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/multiviewcalendar/keyboard/main.vue b/vue-options-api-demos/dateinputs/multiviewcalendar/keyboard/main.vue
new file mode 100644
index 00000000..cb893011
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/multiviewcalendar/keyboard/main.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <Calendar :views="3" />
+    </div>
+</template>
+<script>
+import { Calendar } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+        Calendar
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/timepicker/appearance/configurator/DateInputsStyleConfigurator.vue b/vue-options-api-demos/dateinputs/timepicker/appearance/configurator/DateInputsStyleConfigurator.vue
new file mode 100644
index 00000000..c1b36044
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/appearance/configurator/DateInputsStyleConfigurator.vue
@@ -0,0 +1,105 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Fill Mode
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="fillModes"
+              :value="fillMode"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleFillModeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+    fillMode: String,
+    rounded: String,
+  },
+  emits: [
+    "sizechange",
+    "fillmodechange",
+    "roundedchange",
+  ],
+  data() {
+    return {
+      sizes: ["small", "medium", "large"],
+      fillModes: ["solid", "outline", "flat"],
+      roundedOptions: ["small", "medium", "large", "full"],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleFillModeChange(event) {
+      this.$emit("fillmodechange", event);
+    },
+    handleRoundedChange(event) {
+      this.$emit("roundedchange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dateinputs/timepicker/appearance/configurator/main.js b/vue-options-api-demos/dateinputs/timepicker/appearance/configurator/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/appearance/configurator/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/timepicker/appearance/configurator/main.vue b/vue-options-api-demos/dateinputs/timepicker/appearance/configurator/main.vue
new file mode 100644
index 00000000..2f2cfa0c
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/appearance/configurator/main.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <DateInputsStyleConfigurator
+      :size="size"
+      @sizechange="setSize"
+      :fill-mode="fillMode"
+      @fillmodechange="setFillMode"
+      :rounded="rounded"
+      @roundedchange="setRounded"
+    />
+    <TimePicker
+       :style="{ width: '230px'}"
+      :size="size"
+      :fill-mode="fillMode"
+      :rounded="rounded"
+    />
+  </div>
+</template>
+<script>
+import DateInputsStyleConfigurator from "./DateInputsStyleConfigurator.vue";
+import { TimePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+  components: {
+    DateInputsStyleConfigurator,
+    TimePicker,
+  },
+  data() {
+    return {
+      size: "medium",
+      rounded: "medium",
+      fillMode: "solid",
+    };
+  },
+  methods: {
+    setRounded(event) {
+      this.rounded = event.value;
+    },
+    setSize(event) {
+      this.size = event.value;
+    },
+    setFillMode(event) {
+      this.fillMode = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dateinputs/timepicker/appearance/fill-mode/main.js b/vue-options-api-demos/dateinputs/timepicker/appearance/fill-mode/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/appearance/fill-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/timepicker/appearance/fill-mode/main.vue b/vue-options-api-demos/dateinputs/timepicker/appearance/fill-mode/main.vue
new file mode 100644
index 00000000..12347c30
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/appearance/fill-mode/main.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="example-config">
+    <div class="demo">
+      <span class="wrapper">
+        <span>Flat: </span>
+        <TimePicker
+          :style="{ width: '170px' }"
+          :fill-mode="'flat'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Solid: </span>
+        <TimePicker
+          :style="{ width: '170px' }"
+          :fill-mode="'solid'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Outline: </span>
+        <TimePicker
+          :style="{ width: '170px' }"
+          :fill-mode="'outline'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Custom fill mode:</span>
+        <TimePicker
+          :class="'custom-timepicker'"
+          :fill-mode="null"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { TimePicker} from '@progress/kendo-vue-dateinputs';
+
+export default {
+  components: {
+    TimePicker,
+  },
+};
+</script>
+
+<style>
+.custom-timepicker {
+  width: 200px;
+  background-color: #00aead;
+  border: 2px solid #bfd843;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/dateinputs/timepicker/appearance/rounded/main.js b/vue-options-api-demos/dateinputs/timepicker/appearance/rounded/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/appearance/rounded/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/timepicker/appearance/rounded/main.vue b/vue-options-api-demos/dateinputs/timepicker/appearance/rounded/main.vue
new file mode 100644
index 00000000..df6675d7
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/appearance/rounded/main.vue
@@ -0,0 +1,111 @@
+`<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Small roundness: </span>
+        <TimePicker
+          :style="{ width: '170px' }"
+          :rounded="'small'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Medium roundness: </span>
+        <TimePicker
+          :style="{ width: '170px' }"
+          :rounded="'medium'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Large roundness: </span>
+        <TimePicker
+          :style="{ width: '170px' }"
+          :rounded="'large'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Full roundness: </span>
+        <TimePicker
+          :style="{ width: '170px' }"
+          :rounded="'full'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Custom roundness:</span>
+        <TimePicker
+          :class="'custom-timepicker'"
+          :rounded="null"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { TimePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+  components: {
+    TimePicker,
+  },
+};
+</script>
+
+<style>
+.custom-timepicker {
+  width: 200px;
+  border-bottom-right-radius: 15px;
+  border-top-left-radius: 15px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
+`
\ No newline at end of file
diff --git a/vue-options-api-demos/dateinputs/timepicker/appearance/size/main.js b/vue-options-api-demos/dateinputs/timepicker/appearance/size/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/appearance/size/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/timepicker/appearance/size/main.vue b/vue-options-api-demos/dateinputs/timepicker/appearance/size/main.vue
new file mode 100644
index 00000000..34982847
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/appearance/size/main.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Small: </span>
+        <TimePicker
+          :style="{ width: '170px' }"
+          :size="'small'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Medium: </span>
+        <TimePicker
+          :style="{ width: '170px' }"
+          :size="'medium'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Large: </span>
+        <TimePicker
+          :style="{ width: '170px' }"
+          :size="'large'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+    <span class="wrapper">
+      <span>Custom size:</span>
+      <TimePicker
+        :class="'custom-timepicker'"
+        :size="null"
+        :data-items="[
+          'X-Small',
+          'Small',
+          'Medium',
+          'Large',
+          'X-Large',
+          '2X-Large',
+        ]"
+      />
+    </span>
+  </div>
+</template>
+<script>
+import { TimePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+  components: {
+    TimePicker,
+  },
+};
+</script>
+
+<style>
+.custom-timepicker {
+  height: 40px;
+  width: 200px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/dateinputs/timepicker/controlled-show/main.js b/vue-options-api-demos/dateinputs/timepicker/controlled-show/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/controlled-show/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/timepicker/controlled-show/main.vue b/vue-options-api-demos/dateinputs/timepicker/controlled-show/main.vue
new file mode 100644
index 00000000..8e0736aa
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/controlled-show/main.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="row">
+                <div class="col-xs-12 col-md-6 example-col">
+                    <p>Controlled TimePicker</p>
+                    <timepicker :style="{ width: '230px' }"
+                        :show="show"
+                    />&nbsp;
+                    <kbutton :theme-color="'primary'" @click="handleClick">Toggle</kbutton>
+                </div>
+                <div class="col-xs-12 col-md-6 example-col">
+                    <p>Always shown</p>
+                    <timepicker :style="{ width: '230px' }"
+                        :show="true"
+                    />
+                </div>
+            </div>
+</template>
+<script>
+import { TimePicker } from '@progress/kendo-vue-dateinputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'timepicker': TimePicker,
+      'kbutton': Button
+    },
+    data () {
+        return {
+           show: false
+        };
+    },
+    methods: {
+       handleClick (event) {
+          this.show = !this.show;
+       }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/timepicker/controlled-value/main.js b/vue-options-api-demos/dateinputs/timepicker/controlled-value/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/controlled-value/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/timepicker/controlled-value/main.vue b/vue-options-api-demos/dateinputs/timepicker/controlled-value/main.vue
new file mode 100644
index 00000000..0f1a58a8
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/controlled-value/main.vue
@@ -0,0 +1,34 @@
+<template>
+   <div class="row">
+            <div class="example-config col-xs-12 col-md-12 example-col">
+                <p>The value is: {{`${value}`}}</p>
+            </div>
+            <div class="col-xs-12 col-md-12 example-col">
+                <p>Controlled TimePicker</p>
+                <timepicker :style="{ width: '230px' }"
+                    :value="value"
+                    @change="handleChange"
+                />
+            </div>
+        </div>
+</template>
+<script>
+import { TimePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'timepicker': TimePicker
+    },
+    data () {
+        return {
+            value: new Date()
+        };
+    },
+    methods: {
+        handleChange (event) {
+            this.value = event.target.value;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/timepicker/custom/dateinput/CustomDateInput.vue b/vue-options-api-demos/dateinputs/timepicker/custom/dateinput/CustomDateInput.vue
new file mode 100644
index 00000000..99e2b143
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/custom/dateinput/CustomDateInput.vue
@@ -0,0 +1,46 @@
+<template>
+   <div>
+      <input :style="inputStyle" :max="23" :min="0" :type="'number'" data-section="hours" :value="value.getHours()" @change="handleChange" />,
+      <input :style="inputStyle" :max="59" :min="0" :type="'number'" data-section="minutes" :value="value.getMinutes()" @change="handleChange" />
+  </div>
+</template>
+<script>
+export default {
+      props: {
+          value: Date
+      },
+    emits: {
+        change: null
+      },
+      data () {
+        return {
+            inputStyle: {
+                width: '90px'
+            },
+            today: new Date()
+        }
+      },
+      methods: {
+          handleChange (event) {
+            const date = {
+                hours: this.$props.value.getHours(),
+                minutes: this.$props.value.getMinutes()
+            };
+      
+            date[event.target.getAttribute('data-section')] = Number(event.target.value);
+
+            const value = new Date(
+                this.today.getFullYear(),
+                this.today.getMonth(),
+                this.today.getDate(),
+                date.hours,
+                date.minutes
+            );
+            this.$emit('change', {
+                value,
+                event
+            }); 
+          }
+      }
+  }
+</script>
diff --git a/vue-options-api-demos/dateinputs/timepicker/custom/dateinput/main.js b/vue-options-api-demos/dateinputs/timepicker/custom/dateinput/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/custom/dateinput/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/timepicker/custom/dateinput/main.vue b/vue-options-api-demos/dateinputs/timepicker/custom/dateinput/main.vue
new file mode 100644
index 00000000..d2584d99
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/custom/dateinput/main.vue
@@ -0,0 +1,29 @@
+<template>
+        <timepicker :style="{ width: '230px' }"
+                :date-input="customDateInput"
+                :default-value="new Date()"
+                :width="'180px'"
+        >
+        <template v-slot:myTemplate="{props}">
+            <custom :value="props.value" @change="(e) => props.onChange(e)" />
+        </template>
+        </timepicker>
+</template>
+<script>
+import { TimePicker } from '@progress/kendo-vue-dateinputs';
+import CustomDateInput from './CustomDateInput.vue';
+
+export default {
+     components: {
+        'timepicker': TimePicker,
+        'custom': CustomDateInput
+
+    },
+    data () {
+        return {
+            customDateInput: 'myTemplate'
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/timepicker/custom/popup/CustomPopup.vue b/vue-options-api-demos/dateinputs/timepicker/custom/popup/CustomPopup.vue
new file mode 100644
index 00000000..135e6d71
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/custom/popup/CustomPopup.vue
@@ -0,0 +1,27 @@
+<template>
+    <popup 
+        :anchor="'datepicker'"
+        :show="show"
+        :anchor-align="{
+            horizontal: 'center',
+            vertical: 'bottom'
+        }"
+        :popup-align="{
+            horizontal: 'center',
+            vertical: 'top'
+        }"
+    >
+    <slot/>
+    </popup>
+</template>
+<script>
+import { Popup } from '@progress/kendo-vue-popup';
+export default {
+     props: {
+        show: Boolean
+    },
+    components: {
+        'popup': Popup
+    }
+  }
+</script>
diff --git a/vue-options-api-demos/dateinputs/timepicker/custom/popup/main.js b/vue-options-api-demos/dateinputs/timepicker/custom/popup/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/custom/popup/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/timepicker/custom/popup/main.vue b/vue-options-api-demos/dateinputs/timepicker/custom/popup/main.vue
new file mode 100644
index 00000000..6fab3c43
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/custom/popup/main.vue
@@ -0,0 +1,25 @@
+<template>
+    <div :style="{ textAlign: 'center' }">
+        <timepicker :style="{ width: '230px' }"
+            ref="datepicker"
+            :popup="CustomPopup"
+        >
+        </timepicker>
+    </div>
+</template>
+<script>
+import { TimePicker } from '@progress/kendo-vue-dateinputs';
+import CustomPopup from './CustomPopup.vue';
+
+export default {
+    components: {
+        'timepicker': TimePicker
+    },
+    data () {
+        return {
+            CustomPopup: CustomPopup
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/timepicker/default-show/main.js b/vue-options-api-demos/dateinputs/timepicker/default-show/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/default-show/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/timepicker/default-show/main.vue b/vue-options-api-demos/dateinputs/timepicker/default-show/main.vue
new file mode 100644
index 00000000..5490e9b8
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/default-show/main.vue
@@ -0,0 +1,25 @@
+<template>
+   <div class="row">
+            <div class="col-xs-12 col-md-12 example-col">
+                <p>TimePicker with default show</p>
+                <timepicker :style="{ width: '230px' }"
+                    :default-show="defaultShow"
+                />
+            </div>
+        </div>
+</template>
+<script>
+import { TimePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'timepicker': TimePicker
+    },
+    data () {
+        return {
+            defaultShow: true
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/timepicker/default-value/main.js b/vue-options-api-demos/dateinputs/timepicker/default-value/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/default-value/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/timepicker/default-value/main.vue b/vue-options-api-demos/dateinputs/timepicker/default-value/main.vue
new file mode 100644
index 00000000..4f056885
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/default-value/main.vue
@@ -0,0 +1,25 @@
+<template>
+        <div class="row">
+            <div class="col-xs-12 col-md-12 example-col">
+                <p>TimePicker with default value</p>
+                <timepicker :style="{ width: '230px' }"
+                    :default-value="defaultValue"
+                />
+            </div>
+        </div>
+</template>
+<script>
+import { TimePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'timepicker': TimePicker
+    },
+     data () {
+        return {
+            defaultValue: new Date()
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/timepicker/disabled/main.js b/vue-options-api-demos/dateinputs/timepicker/disabled/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/timepicker/disabled/main.vue b/vue-options-api-demos/dateinputs/timepicker/disabled/main.vue
new file mode 100644
index 00000000..1de15fae
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/disabled/main.vue
@@ -0,0 +1,16 @@
+<template>
+     <div class="row">
+            <p>Today's date:</p>
+                <timepicker :style="{ width: '230px' }" :disabled="true" :value="new Date()" :show="true" />
+        </div>
+</template>
+<script>
+import { TimePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'timepicker': TimePicker
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/timepicker/events/main.js b/vue-options-api-demos/dateinputs/timepicker/events/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/events/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/timepicker/events/main.vue b/vue-options-api-demos/dateinputs/timepicker/events/main.vue
new file mode 100644
index 00000000..aee2c00d
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/events/main.vue
@@ -0,0 +1,41 @@
+<template>
+     <div class="row">
+                <div class="col-md-6">
+                    <timepicker :style="{ width: '230px' }"
+                        @change="handleChange"
+                        :value="value"
+                    />
+                </div>
+                <div class="col-md-6">
+                    <div class="example-config">
+                      <h5>{{"TimePicker Events"}}</h5>
+                      <ul class="event-log" :style="{ maxHeight: '300px' }">
+                          <li key={index} v-for="(event, index) in logs">{{event}}</li>
+                      </ul>
+            </div>
+                </div>
+            </div>
+</template>
+<script>
+import { TimePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'timepicker': TimePicker
+    },
+    data () {
+        return {
+           value: new Date(),
+           logs: []
+        };
+    },
+    methods: {
+         handleChange (event) {
+            this.logs.unshift("change: " + event.target.value);
+
+            this.value = event.target.value;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/timepicker/floating-label/main.js b/vue-options-api-demos/dateinputs/timepicker/floating-label/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/floating-label/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/timepicker/floating-label/main.vue b/vue-options-api-demos/dateinputs/timepicker/floating-label/main.vue
new file mode 100644
index 00000000..a8ccf490
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/floating-label/main.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <p>TimePicker</p>
+    <timepicker :style="{ width: '230px' }"
+      @change="onChangeTimePicker"
+      :value="timePickerValue"
+      :label="'Select time:'"
+      :placeholder="''"
+    >
+    </timepicker>
+  </div>
+</template>
+<script>
+import { TimePicker } from "@progress/kendo-vue-dateinputs";
+
+export default {
+  components: {
+    timepicker: TimePicker,
+  },
+  data: function () {
+    return {
+      timePickerValue: undefined,
+    };
+  },
+  methods: {
+    onChangeTimePicker: function (e) {
+      this.timePickerValue = e.value;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/dateinputs/timepicker/formats/main.js b/vue-options-api-demos/dateinputs/timepicker/formats/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/formats/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/timepicker/formats/main.vue b/vue-options-api-demos/dateinputs/timepicker/formats/main.vue
new file mode 100644
index 00000000..6ab289ed
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/formats/main.vue
@@ -0,0 +1,55 @@
+<template>
+    <div class="example-wrapper">
+            <div class="col-xs-12 col-sm-6 example-col">
+                <p>Select a long time:</p>
+                <timepicker :style="{ width: '230px' }"
+                    :format="'HH:mm:ss'"
+                    :default-value="defaultValue"
+                />
+            </div>
+
+            <div class="col-xs-12 col-sm-6 example-col">
+                <p>Select a short time:</p>
+                <timepicker :style="{ width: '230px' }"
+                    :format="'hh:mm a'"
+                    :default-value="defaultValue"
+                />
+            </div>
+            <div class="col-xs-12 col-sm-6 example-col">
+                <p>Custom Skeleton:</p>
+                <timepicker :style="{ width: '230px' }"
+                    :format="{
+                        skeleton: 'EHmSs'
+                    }"
+                    :default-value="defaultValue"
+                />
+            </div>
+            <div class="col-xs-12 col-sm-6 example-col">
+                <p>Custom Format:</p>
+                <timepicker :style="{ width: '230px' }"
+                    :format="customFormat"
+                    :default-value="defaultValue"
+                />
+            </div>
+        </div>
+</template>
+<script>
+import { TimePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'timepicker': TimePicker
+    },
+    data () {
+        return {
+            customFormat: {
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit'
+            },
+            defaultValue: new Date(2000, 2, 10, 13, 30, 0)
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/timepicker/forms/basic/main.js b/vue-options-api-demos/dateinputs/timepicker/forms/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/forms/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/timepicker/forms/basic/main.vue b/vue-options-api-demos/dateinputs/timepicker/forms/basic/main.vue
new file mode 100644
index 00000000..51fae1d8
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/forms/basic/main.vue
@@ -0,0 +1,60 @@
+<template>
+       <div class="row example-wrapper">
+            <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                <div class="card">
+                    <div class="card-block">
+                        <form class="k-form" @submit="handleSubmit">
+                            <fieldset>
+                                <legend>Please select the time of your flight:</legend>
+                                <label class="k-form-field">
+                                    <span>Departure</span>
+                                    <timepicker 
+                                        :name="'departure'"
+                                        :required="true"
+                                    />
+                                </label>
+                                <label class="k-form-field">
+                                    <span>Arrival</span>
+                                    <timepicker 
+                                        :name="'arrival'"
+                                        :required="true"
+                                    />
+                                </label>
+                            </fieldset>
+                            <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                        </form>
+                    </div>
+                </div>
+            </div>
+                <div v-if="success"
+                    class="alert alert-success"
+                    :style="{ position: 'absolute' }"
+                >
+                    Form submitted!
+                </div>
+        </div>
+</template>
+<script>
+import { TimePicker } from '@progress/kendo-vue-dateinputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'timepicker': TimePicker,
+      'kbutton': Button
+    },
+    data () {
+        return {
+            success: false
+        };
+    },
+    methods: {
+        handleSubmit (event) {
+            event.preventDefault();
+            this.success = true ;
+            setTimeout(() => { this.success= false; }, 3000);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/timepicker/forms/custom-message/main.js b/vue-options-api-demos/dateinputs/timepicker/forms/custom-message/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/forms/custom-message/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/timepicker/forms/custom-message/main.vue b/vue-options-api-demos/dateinputs/timepicker/forms/custom-message/main.vue
new file mode 100644
index 00000000..ca93269f
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/forms/custom-message/main.vue
@@ -0,0 +1,66 @@
+<template>
+   <div class="row example-wrapper">
+            <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                <div class="card">
+                    <div class="card-block">
+                        <form class="k-form" @submit="handleSubmit">
+                            <fieldset>
+                                <legend>Please select the time of your flight:</legend>
+                                <label class="k-form-field">
+                                    <span>Departure</span>
+                                    <timepicker 
+                                        :name="'departure'"
+                                        :required="true"
+                                        :min="today"
+                                        :validation-message="checkInValidationMessage"
+                                    />
+                                </label>
+                                <label class="k-form-field">
+                                    <span>Arrival</span>
+                                    <timepicker 
+                                        :name="'arrival'"
+                                        :required="true"
+                                        :validation-message="checkOutValidationMessage"
+                                    />
+                                </label>
+                            </fieldset>
+                            <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                        </form>
+                    </div>
+                </div>
+            </div>
+                <div v-if="success"
+                    class="alert alert-success"
+                    :style="{ position: 'absolute' }"
+                >
+                    Form submitted!
+                </div>
+        </div>
+</template>
+<script>
+import { TimePicker } from '@progress/kendo-vue-dateinputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'timepicker': TimePicker,
+      'kbutton': Button
+    },
+    data () {
+        return {
+            success: false,
+            today: new Date(),
+            checkInValidationMessage: 'Times in the past are not valid Departure times.',
+            checkOutValidationMessage: 'The Arrival time is required.'
+        };
+    },  
+    methods: {
+        handleSubmit (event) {
+            event.preventDefault();
+            this.success = true ;
+            setTimeout(() => { this.success= false; }, 3000);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/timepicker/forms/disable-styles/main.js b/vue-options-api-demos/dateinputs/timepicker/forms/disable-styles/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/forms/disable-styles/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/timepicker/forms/disable-styles/main.vue b/vue-options-api-demos/dateinputs/timepicker/forms/disable-styles/main.vue
new file mode 100644
index 00000000..047f315c
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/forms/disable-styles/main.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="row example-wrapper">
+            <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                <div class="card">
+                    <div class="card-block">
+                        <form class="k-form" @submit="handleSubmit">
+                            <fieldset>
+                                <legend>Please select the time of your flight:</legend>
+                                <label class="k-form-field">
+                                    <span>Departure</span>
+                                    <timepicker 
+                                        :name="'departure'"
+                                        :required="true"
+                                        :spinners="true"
+                                        :min="now"
+                                        :value="departure"
+                                        @change="handleChange"
+                                        :validation-message="departure === null
+                                            ? 'Departure time is required!'
+                                            : 'Departure time cannot be in the past!'"
+                                    />
+                                </label>
+                                <label class="k-form-field">
+                                    <span>Arrival</span>
+                                    <timepicker 
+                                        :validity-styles="false"
+                                        :name="'arrival'"
+                                        :required="true"
+                                        :spinners="true"
+
+                                        :valid="(departure !== null && arrival !== null)
+                                            && (departure.getTime() < arrival.getTime())"
+
+                                        :value="arrival"
+                                        @change="handleChange"
+                                        :validation-message="arrival === null
+                                            ? 'Arrival time is required!'
+                                            : 'Arrival time cannot be before Departure time!'"
+                                    />
+                                </label>
+                                <label class="k-form-field">
+                                    <span>Additional Comments</span>
+                                    <textarea
+                                        class="k-textarea"
+                                        :style="{ width: '100%' }"
+                                        name="additionalComments"
+                                        :value="additionalComments"
+                                        @change="handleChange"
+                                    ></textarea>
+                                </label>
+                            </fieldset>
+                            <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                        </form>
+                    </div>
+                </div>
+            </div>
+                <div v-if="success"
+                    class="alert alert-success"
+                    :style="{ position: 'absolute' }"
+                >
+                    Form submitted!
+                </div>
+        </div>
+</template>
+<script>
+import { TimePicker } from '@progress/kendo-vue-dateinputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'timepicker': TimePicker,
+      'kbutton': Button
+    },
+    data () {
+        return {
+            departure: null,
+            arrival: null,
+            additionalComments: '',
+            success: false,
+            now: new Date()
+        };
+    },
+    methods: {
+        handleSubmit (event) {
+            event.preventDefault();
+            this.success = true ;
+            setTimeout(() => { this.success= false; }, 3000);
+        },
+        handleChange (event) {
+            this[event.target.name] = event.target.value;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/timepicker/forms/override/main.js b/vue-options-api-demos/dateinputs/timepicker/forms/override/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/forms/override/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/timepicker/forms/override/main.vue b/vue-options-api-demos/dateinputs/timepicker/forms/override/main.vue
new file mode 100644
index 00000000..f2a3010b
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/forms/override/main.vue
@@ -0,0 +1,94 @@
+<template>
+   <div class="row example-wrapper">
+            <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                <div class="card">
+                    <div class="card-block">
+                        <form class="k-form" @submit="handleSubmit">
+                            <fieldset>
+                                <legend>Please select the time of your flight:</legend>
+                                <label class="k-form-field">
+                                    <span>Departure</span>
+                                    <timepicker 
+                                        :name="'departure'"
+                                        :required="true"
+                                        :spinners="true"
+                                        :min="now"
+                                        :value="departure"
+                                        @change="handleChange"
+                                        :validation-message="departure === null
+                                            ? 'Departure time is required!'
+                                            : 'Departure time cannot be in the past!'"
+                                    />
+                                </label>
+                                <label class="k-form-field">
+                                    <span>Arrival</span>
+                                    <timepicker
+                                        :name="'arrival'"
+                                        :required="true"
+                                        :spinners="true"
+
+                                        :valid="(departure !== null && arrival !== null)
+                                            && (departure.getTime() < arrival.getTime())"
+
+                                        :value="arrival"
+                                        @change="handleChange"
+                                        :validation-message="arrival === null
+                                            ? 'Arrival time is required!'
+                                            : 'Arrival time cannot be before Departure time!'"
+                                    />
+                                </label>
+                                <label class="k-form-field">
+                                    <span>Additional Comments</span>
+                                    <textarea
+                                        class="k-textarea"
+                                        :style="{ width: '100%' }"
+                                        name="additionalComments"
+                                        :value="additionalComments"
+                                        @change="handleChange"
+                                    ></textarea>
+                                </label>
+                            </fieldset>
+                            <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                        </form>
+                    </div>
+                </div>
+            </div>
+                <div v-if="success"
+                    class="alert alert-success"
+                    :style="{ position: 'absolute' }"
+                >
+                    Form submitted!
+                </div>
+        </div>
+</template>
+<script>
+import { TimePicker } from '@progress/kendo-vue-dateinputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'timepicker': TimePicker,
+      'kbutton': Button
+    },
+    data () {
+        return {
+            departure: null,
+            arrival: null,
+            additionalComments: '',
+            success: false,
+            now: new Date()
+        };
+    },
+    methods: {
+        handleSubmit (event) {
+            event.preventDefault();
+            this.success = true ;
+            setTimeout(() => { this.success= false; }, 3000);
+        },
+        handleChange (event) {
+            this[event.target.name] = event.target.value;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/timepicker/incremental/main.js b/vue-options-api-demos/dateinputs/timepicker/incremental/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/incremental/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/timepicker/incremental/main.vue b/vue-options-api-demos/dateinputs/timepicker/incremental/main.vue
new file mode 100644
index 00000000..ed5cefe9
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/incremental/main.vue
@@ -0,0 +1,31 @@
+<template>
+   <div class="example-wrapper">
+            <p>Select a time:</p>
+            <timepicker :style="{ width: '230px' }"
+                :format="'HH:mm:ss'"
+                :steps="steps"
+                :default-value="defaultValue"
+            />
+            <p>(↑ to increment and ↓ to decrement the value)</p>
+        </div>
+</template>
+<script>
+import { TimePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'timepicker': TimePicker
+    },
+    data () {
+        return {
+            steps: {
+                hour: 2,
+                minute: 15,
+                second: 30
+            },
+            defaultValue: new Date(2000, 2, 10, 10, 30)
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/timepicker/input-mode/main.js b/vue-options-api-demos/dateinputs/timepicker/input-mode/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/input-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/dateinputs/timepicker/input-mode/main.vue b/vue-options-api-demos/dateinputs/timepicker/input-mode/main.vue
new file mode 100644
index 00000000..b38debd2
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/input-mode/main.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class="k-d-grid k-grid-cols-sm-1 k-grid-cols-md-2 k-gap-4 k-max-w-fit">
+        <div class="k-col-span-1">
+            <div>
+                inputmode=text <i>(default)</i>
+            </div>
+            <timepicker
+                :default-value="value"
+                :format="'a HH:mm:ss'"
+                :input-attributes="{ inputMode: 'text' }"
+                :style="{ width: '300px' }"
+            />
+        </div>
+        <div class="k-col-span-1">
+            <div>inputmode=numeric</div>
+            <timepicker
+                :default-value="value"
+                :format="'HH:mm:ss'"
+                :input-attributes="{ inputMode: 'numeric' }"
+                :style="{ width: '300px' }"
+            />
+        </div>
+        <div class="k-col-span-1">
+            <div>
+                inputmode=none <br />
+                <i>(the user can only pick a value from the popup)</i>
+            </div>
+            <timepicker
+                :default-value="value"
+                :input-attributes="{ inputMode: 'none' }"
+                :style="{ width: '300px' }"
+            />
+        </div>
+    </div>
+</template>
+<script>
+import { TimePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+        'timepicker': TimePicker
+    },
+    data() {
+        return {
+            value: new Date()
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/timepicker/json/main.js b/vue-options-api-demos/dateinputs/timepicker/json/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/json/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/timepicker/json/main.vue b/vue-options-api-demos/dateinputs/timepicker/json/main.vue
new file mode 100644
index 00000000..b41b3e0d
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/json/main.vue
@@ -0,0 +1,42 @@
+<template>
+    <div>
+            <div class="example-config">
+                <p>TimePicker value: {{`${departureTime}`}}</p>
+            </div>
+            <label>
+                Select Birthdate:
+                <timepicker :style="{ width: '230px' }"
+                    :value="departureTime"
+                    @change="handleChange"
+                />
+            </label>
+        </div>
+</template>
+<script>
+import { TimePicker } from '@progress/kendo-vue-dateinputs';
+import { provideIntlService } from '@progress/kendo-vue-intl';
+
+export default {
+    components: {
+      'timepicker': TimePicker
+    },
+     mounted: function(){
+        setTimeout(() => {
+          const date = '2017-06-27 14:30';
+
+          this.departureTime = provideIntlService(this).parseDate(date, 'yyyy-MM-dd HH:mm');
+        }, 1000);
+   },
+    data () {
+        return {
+           departureTime: null
+        };
+    },
+    methods: {
+        handleChange (event) {
+            this.departureTime= event.target.value;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/timepicker/keyboard/main.js b/vue-options-api-demos/dateinputs/timepicker/keyboard/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/keyboard/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/timepicker/keyboard/main.vue b/vue-options-api-demos/dateinputs/timepicker/keyboard/main.vue
new file mode 100644
index 00000000..64ec68d1
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/keyboard/main.vue
@@ -0,0 +1,16 @@
+<template>
+   <div class="example-wrapper">
+            <timepicker :style="{ width: '230px' }" />
+            <p>(use Alt+<code>↓</code> to open the time list, <code>↑</code> to increment and <code>↓</code> to decrement the value)</p>
+        </div>
+</template>
+<script>
+import { TimePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'timepicker': TimePicker
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/timepicker/overview/basic/main.js b/vue-options-api-demos/dateinputs/timepicker/overview/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/overview/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/timepicker/overview/basic/main.vue b/vue-options-api-demos/dateinputs/timepicker/overview/basic/main.vue
new file mode 100644
index 00000000..9a2103c1
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/overview/basic/main.vue
@@ -0,0 +1,17 @@
+<template>
+   <div class="example-wrapper">
+            <timepicker :style="{ width: '230px' }" />
+            <p>(use Alt+<code>↓</code> to open the time list, Tab to move to the next time section in the popup, 
+                <code>↑</code> to increment and <code>↓</code> to decrement the value)</p>
+        </div>
+</template>
+<script>
+import { TimePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'timepicker': TimePicker
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/timepicker/placeholders/main.js b/vue-options-api-demos/dateinputs/timepicker/placeholders/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/placeholders/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/timepicker/placeholders/main.vue b/vue-options-api-demos/dateinputs/timepicker/placeholders/main.vue
new file mode 100644
index 00000000..db0fa4be
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/placeholders/main.vue
@@ -0,0 +1,39 @@
+<template>
+   <div class="row example-wrapper" :style="{minHeight: '450px'}">
+            <div class="col-xs-12 col-md-6 example-col">
+                <p>Full-length format description:</p>
+                <timepicker :style="{ width: '230px' }" :format-placeholder="'wide'"/>
+            </div>
+
+            <div class="col-xs-12 col-md-6 example-col">
+                <p>Narrow-length format description:</p>
+                <timepicker :style="{ width: '230px' }" :forma-placeholder="'narrow'"/>
+            </div>
+
+            <div class="col-xs-12 col-md-6 example-col">
+                <p>Short-length format description:</p>
+                <timepicker :style="{ width: '230px' }" :format-placeholder="'short'"/>
+            </div>
+
+            <div class="col-xs-12 col-md-6 example-col">
+                <p>Display defined format:</p>
+                <timepicker :style="{ width: '230px' }" :format="'HH:mm:ss'" :format-placeholder="'formatPattern'"/>
+            </div>
+
+            <div class="col-xs-12 col-md-6 example-col">
+                <p>Custom defined format descriptions</p>
+                <timepicker :style="{ width: '230px' }" :format="'HH:mm:ss'"
+                    :format-placeholder="{ hour: 'h', minute: 'm', second: 's' }"/>
+            </div>
+        </div>
+</template>
+<script>
+import { TimePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'timepicker': TimePicker
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dateinputs/timepicker/time-ranges/main.js b/vue-options-api-demos/dateinputs/timepicker/time-ranges/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/time-ranges/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dateinputs/timepicker/time-ranges/main.vue b/vue-options-api-demos/dateinputs/timepicker/time-ranges/main.vue
new file mode 100644
index 00000000..9a07d70f
--- /dev/null
+++ b/vue-options-api-demos/dateinputs/timepicker/time-ranges/main.vue
@@ -0,0 +1,29 @@
+<template>
+   <div>
+          <div class="example-config">
+              <p>Select a time:</p>
+              <timepicker :style="{ width: '230px' }"
+                  :min="min"
+                  :max="max"
+                  :default-value="defaultValue"
+              ></TimePicker>
+          </div>
+      </div>
+</template>
+<script>
+import { TimePicker } from '@progress/kendo-vue-dateinputs';
+
+export default {
+    components: {
+      'timepicker': TimePicker
+    },
+    data () {
+        return {
+            min: new Date(2000, 2, 10, 2, 30),
+            max: new Date(2010, 2, 10, 22, 15 ),
+            defaultValue: new Date(2010, 2, 10, 10, 0)
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dialogs/dialog/action-buttons/main.js b/vue-options-api-demos/dialogs/dialog/action-buttons/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dialogs/dialog/action-buttons/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dialogs/dialog/action-buttons/main.vue b/vue-options-api-demos/dialogs/dialog/action-buttons/main.vue
new file mode 100644
index 00000000..48980bb2
--- /dev/null
+++ b/vue-options-api-demos/dialogs/dialog/action-buttons/main.vue
@@ -0,0 +1,41 @@
+<template>
+  <div>
+                  <span v-if="!visibleDialog">
+                      <kbutton @click="toggleDialog">Open Dialog</kbutton>
+                  </span>
+              <k-dialog v-if="visibleDialog" :title="'Delete Data'" @close="toggleDialog">
+                  <p :style="{ margin: '25px', textAlign: 'center' }">This action cannot be undone.</p>
+                  <dialog-actions-bar>
+                      <kbutton @click='toggleDialog'>Cancel</kbutton>
+                      <kbutton @click='onDeleteData'>Delete</kbutton>
+                  </dialog-actions-bar>
+              </k-dialog>
+          </div>
+</template>
+<script>
+import { Dialog, DialogActionsBar } from '@progress/kendo-vue-dialogs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'k-dialog': Dialog,
+      'dialog-actions-bar': DialogActionsBar,
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+            visibleDialog: false
+        };
+    },
+    methods: {
+      toggleDialog() {
+          this.visibleDialog = !this.visibleDialog;
+      },
+      onDeleteData() {
+            alert("Data deleted.");
+            this.visibleDialog = !this.visibleDialog;
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dialogs/dialog/dimetions/main.js b/vue-options-api-demos/dialogs/dialog/dimetions/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dialogs/dialog/dimetions/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dialogs/dialog/dimetions/main.vue b/vue-options-api-demos/dialogs/dialog/dimetions/main.vue
new file mode 100644
index 00000000..8848c6d9
--- /dev/null
+++ b/vue-options-api-demos/dialogs/dialog/dimetions/main.vue
@@ -0,0 +1,41 @@
+<template>
+ <div>
+        <span v-if="!visibleDialog">
+            <kbutton @click="toggleDialog">Open Dialog</kbutton>
+        </span>
+    <k-dialog v-if="visibleDialog"
+                :title="'Please confirm'"
+                :width="200"
+                :height="250"
+                @close="toggleDialog">
+        <p :style="{ margin: '25px', textAlign: 'center' }">Are you sure you want to continue?</p>
+        <dialog-actions-bar>
+            <kbutton @click='toggleDialog'>No</kbutton>
+            <kbutton @click='toggleDialog'>Yes</kbutton>
+        </dialog-actions-bar>
+    </k-dialog>
+</div>
+</template>
+<script>
+import { Dialog, DialogActionsBar } from '@progress/kendo-vue-dialogs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'k-dialog': Dialog,
+      'dialog-actions-bar': DialogActionsBar,
+      'kbutton': Button
+    },
+     data: function () {
+        return {
+            visibleDialog: false
+        };
+    },
+    methods: {
+      toggleDialog() {
+          this.visibleDialog = !this.visibleDialog;
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dialogs/dialog/keyboard/main.js b/vue-options-api-demos/dialogs/dialog/keyboard/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dialogs/dialog/keyboard/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dialogs/dialog/keyboard/main.vue b/vue-options-api-demos/dialogs/dialog/keyboard/main.vue
new file mode 100644
index 00000000..2e2603d5
--- /dev/null
+++ b/vue-options-api-demos/dialogs/dialog/keyboard/main.vue
@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <span v-if="!visibleDialog">
+      <KButton @click="toggleDialog">Open Dialog</KButton>
+    </span>
+    <Dialog
+      v-if="visibleDialog"
+      :width="450"
+      :height="340"
+      @close="toggleDialog"
+    >
+      <p :style="{ margin: '25px', textAlign: 'center' }">
+        Add Delivery Address
+      </p>
+      <div>
+        <div class="mb-3">
+          <KLabel
+            :editor-id="'street'"
+            :style="{
+              display: 'inline-block',
+              width: '50px',
+              textAlign: 'right',
+              paddingRight: '0.5em',
+              marginLeft: '1.5em',
+            }"
+          >
+            Street:
+          </KLabel>
+          <KInput :style="{ maxWidth: '300px' }" :id="'street'" />
+        </div>
+        <div class="mb-3">
+          <KLabel
+            :editor-id="'city'"
+            :style="{
+              display: 'inline-block',
+              width: '50px',
+              textAlign: 'right',
+              paddingRight: '0.5em',
+              marginLeft: '1.5em',
+            }"
+          >
+            City:
+          </KLabel>
+          <KInput :style="{ maxWidth: '300px' }" :id="'city'" />
+        </div>
+        <div class="mb-3">
+          <KLabel
+            :editor-id="'state'"
+            :style="{
+              display: 'inline-block',
+              width: '50px',
+              textAlign: 'right',
+              paddingRight: '0.5em',
+              marginLeft: '1.5em',
+            }"
+          >
+            State:
+          </KLabel>
+          <KInput :style="{ maxWidth: '300px' }" :id="'state'" />
+        </div>
+        <div class="mb-3">
+          <KLabel
+            :editor-id="'zipcode'"
+            :style="{
+              display: 'inline-block',
+              width: '50px',
+              textAlign: 'right',
+              paddingRight: '0.5em',
+              marginLeft: '1.5em',
+            }"
+          >
+            Zip:
+          </KLabel>
+          <KInput :style="{ maxWidth: '300px' }" :id="'zipcode'" />
+        </div>
+      </div>
+      <DialogActionsBar>
+        <KButton>Verify Address</KButton>
+        <KButton>Add</KButton>
+        <KButton :theme-color="'primary'">Cancel</KButton>
+      </DialogActionsBar>
+    </Dialog>
+  </div>
+</template>
+<script>
+import { Dialog, DialogActionsBar } from "@progress/kendo-vue-dialogs";
+import { Button as KButton } from "@progress/kendo-vue-buttons";
+import { Input as KInput } from "@progress/kendo-vue-inputs";
+import { Label as KLabel } from "@progress/kendo-vue-labels";
+import { FieldWrapper } from "@progress/kendo-vue-form";
+
+export default {
+  components: {
+    Dialog,
+    DialogActionsBar,
+    KButton,
+    KInput,
+    KLabel,
+    FieldWrapper,
+  },
+  data: function () {
+    return {
+      visibleDialog: false,
+    };
+  },
+  methods: {
+    toggleDialog() {
+      this.visibleDialog = !this.visibleDialog;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dialogs/dialog/overview/main.js b/vue-options-api-demos/dialogs/dialog/overview/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dialogs/dialog/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dialogs/dialog/overview/main.vue b/vue-options-api-demos/dialogs/dialog/overview/main.vue
new file mode 100644
index 00000000..383a17c2
--- /dev/null
+++ b/vue-options-api-demos/dialogs/dialog/overview/main.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+        <span v-if="!visibleDialog">
+            <kbutton @click="toggleDialog">Open Dialog</kbutton>
+        </span>
+    <k-dialog v-if="visibleDialog" :title="'Please confirm'" @close="toggleDialog">
+        <p :style="{ margin: '25px', textAlign: 'center' }">Are you sure you want to continue?</p>
+        <dialog-actions-bar>
+            <kbutton @click='toggleDialog'>No</kbutton>
+            <kbutton :theme-color="'primary'" @click='toggleDialog'>Yes</kbutton>
+        </dialog-actions-bar>
+    </k-dialog>
+</div>
+</template>
+<script>
+import { Dialog, DialogActionsBar } from '@progress/kendo-vue-dialogs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'k-dialog': Dialog,
+      'dialog-actions-bar': DialogActionsBar,
+      'kbutton': Button
+    },
+     data: function () {
+        return {
+            visibleDialog: false
+        };
+    },
+    methods: {
+      toggleDialog() {
+          this.visibleDialog = !this.visibleDialog;
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dialogs/dialog/rtl/main.js b/vue-options-api-demos/dialogs/dialog/rtl/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dialogs/dialog/rtl/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dialogs/dialog/rtl/main.vue b/vue-options-api-demos/dialogs/dialog/rtl/main.vue
new file mode 100644
index 00000000..8a37b3a2
--- /dev/null
+++ b/vue-options-api-demos/dialogs/dialog/rtl/main.vue
@@ -0,0 +1,37 @@
+<template>
+ <div dir="rtl" >
+          <span v-if="!visibleDialog">
+              <kbutton @click="toggleDialog">Open Dialog</kbutton>
+          </span>
+      <k-dialog v-if="visibleDialog" :title="'Please confirm'" @close="toggleDialog">
+          <p :style="{ margin: '25px', textAlign: 'center' }">Are you sure you want to continue?</p>
+          <dialog-actions-bar>
+              <kbutton @click='toggleDialog'>No</kbutton>
+              <kbutton @click='toggleDialog'>Yes</kbutton>
+          </dialog-actions-bar>
+      </k-dialog>
+  </div>
+</template>
+<script>
+import { Dialog, DialogActionsBar } from '@progress/kendo-vue-dialogs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'k-dialog': Dialog,
+      'dialog-actions-bar': DialogActionsBar,
+      'kbutton': Button
+    },
+     data: function () {
+        return {
+            visibleDialog: false
+        };
+    },
+    methods: {
+      toggleDialog() {
+          this.visibleDialog = !this.visibleDialog;
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dialogs/dialog/title/basic/main.js b/vue-options-api-demos/dialogs/dialog/title/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dialogs/dialog/title/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dialogs/dialog/title/basic/main.vue b/vue-options-api-demos/dialogs/dialog/title/basic/main.vue
new file mode 100644
index 00000000..0ff6a635
--- /dev/null
+++ b/vue-options-api-demos/dialogs/dialog/title/basic/main.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <k-dialog :title="'Awesome title goes here'" >
+    </k-dialog>
+</div>
+</template>
+<script>
+import { Dialog } from '@progress/kendo-vue-dialogs';
+
+export default {
+    components: {
+      'k-dialog': Dialog
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dialogs/dialog/title/no-title/main.js b/vue-options-api-demos/dialogs/dialog/title/no-title/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dialogs/dialog/title/no-title/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dialogs/dialog/title/no-title/main.vue b/vue-options-api-demos/dialogs/dialog/title/no-title/main.vue
new file mode 100644
index 00000000..34ed020a
--- /dev/null
+++ b/vue-options-api-demos/dialogs/dialog/title/no-title/main.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+      <k-dialog >
+        <div :style='{ textAlign: "center", margin: "30px" }'>
+            <h4>Enter your e-mail below to unlock.</h4>
+            <p>
+                <kinput placeholder="Your e-mail here" 
+                :style='{ width: "300px" }' />
+            </p>
+            <p>
+                <kbutton :theme-color="'primary'" 
+                :style='{ width: "300px" }'>GET MY $10 OFF</kbutton>
+            </p>
+            <a href="#">No thanks!</a>
+        </div>
+      </k-dialog>
+  </div>
+</template>
+<script>
+import { Dialog } from '@progress/kendo-vue-dialogs';
+import { Button } from '@progress/kendo-vue-buttons';
+import { Input } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+      'k-dialog': Dialog,
+      'kbutton': Button,
+      'kinput': Input
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dialogs/dialog/title/title-template/main.js b/vue-options-api-demos/dialogs/dialog/title/title-template/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dialogs/dialog/title/title-template/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dialogs/dialog/title/title-template/main.vue b/vue-options-api-demos/dialogs/dialog/title/title-template/main.vue
new file mode 100644
index 00000000..f49291bb
--- /dev/null
+++ b/vue-options-api-demos/dialogs/dialog/title/title-template/main.vue
@@ -0,0 +1,27 @@
+<template>
+    <div>
+      <k-dialog :title-render="customTitleBar" >
+        <p :style='{ margin: "30px", textAlign: "center" }'>A sample print dialog.</p>
+          <template v-slot:myTemplate="{props, listeners}">
+            <div class="custom-title" :style="{ fontSize: '18px', lineHeight: '1.3em' }">
+              <span class="k-icon k-i-print" />Print this page
+          </div>
+        </template>
+      </k-dialog>
+  </div>
+</template>
+<script>
+import { Dialog } from '@progress/kendo-vue-dialogs';
+
+export default {
+    components: {
+      'k-dialog': Dialog
+    },
+    data: function () {
+        return {
+            customTitleBar: 'myTemplate'
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dialogs/dialog/visibility/main.js b/vue-options-api-demos/dialogs/dialog/visibility/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dialogs/dialog/visibility/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dialogs/dialog/visibility/main.vue b/vue-options-api-demos/dialogs/dialog/visibility/main.vue
new file mode 100644
index 00000000..8aa539d3
--- /dev/null
+++ b/vue-options-api-demos/dialogs/dialog/visibility/main.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+        <span v-if="!visibleDialog">
+            <kbutton @click="toggleDialog">Open Dialog</kbutton>
+        </span>
+    <k-dialog v-if="visibleDialog" :title="'Please confirm'" @close="toggleDialog">
+        <p :style="{ margin: '25px', textAlign: 'center' }">Are you sure you want to continue?</p>
+        <dialog-actions-bar>
+            <kbutton @click='toggleDialog'>No</kbutton>
+            <kbutton @click='toggleDialog'>Yes</kbutton>
+        </dialog-actions-bar>
+    </k-dialog>
+</div>
+</template>
+<script>
+import { Dialog, DialogActionsBar } from '@progress/kendo-vue-dialogs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'k-dialog': Dialog,
+      'dialog-actions-bar': DialogActionsBar,
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+            visibleDialog: false
+        };
+    },
+    methods: {
+      toggleDialog() {
+          this.visibleDialog = !this.visibleDialog;
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dialogs/overview/main.js b/vue-options-api-demos/dialogs/overview/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dialogs/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dialogs/overview/main.vue b/vue-options-api-demos/dialogs/overview/main.vue
new file mode 100644
index 00000000..e89bd754
--- /dev/null
+++ b/vue-options-api-demos/dialogs/overview/main.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <span v-if="!visibleDialog && !visibleWindow">
+      <KButton @click="toggleDialog">Open Dialog</KButton>
+      <KButton @click="toggleWindow">Open Window</KButton>
+    </span>
+    <Dialog
+      v-if="visibleDialog"
+      :title="'Please confirm'"
+      @close="toggleDialog"
+    >
+      <p :style="{ margin: '25px', textAlign: 'center' }">
+        Are you sure you want to continue?
+      </p>
+      <DialogActionsBar>
+        <KButton @click="toggleDialog">No</KButton>
+        <KButton @click="toggleDialog">Yes</KButton>
+      </DialogActionsBar>
+    </Dialog>
+    <KWindow v-if="visibleWindow" :title="'Status'" @close="toggleWindow">
+      Additional info - you can drag and resize the me!
+    </KWindow>
+  </div>
+</template>
+<script>
+import { Dialog, DialogActionsBar, Window } from "@progress/kendo-vue-dialogs";
+import { Button } from "@progress/kendo-vue-buttons";
+
+export default {
+  components: {
+    Dialog,
+    KWindow: Window,
+    DialogActionsBar,
+    KButton: Button,
+  },
+  data: function () {
+    return {
+      visibleDialog: false,
+      visibleWindow: false,
+    };
+  },
+  methods: {
+    toggleDialog() {
+      this.visibleDialog = !this.visibleDialog;
+    },
+    toggleWindow() {
+      this.visibleWindow = !this.visibleWindow;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dialogs/window/basic/main.js b/vue-options-api-demos/dialogs/window/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dialogs/window/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dialogs/window/basic/main.vue b/vue-options-api-demos/dialogs/window/basic/main.vue
new file mode 100644
index 00000000..d74e3fb4
--- /dev/null
+++ b/vue-options-api-demos/dialogs/window/basic/main.vue
@@ -0,0 +1,50 @@
+<template>
+ <div>
+            <kbutton @click="toggleDialog">{{visible ? 'Close': 'Open'}} Window</kbutton>
+                <window v-if="visible" :title="'Status'" @close="toggleDialog" :initial-height="350">
+                    <form class="k-form">
+                        <fieldset>
+                            <legend>User Details</legend>
+
+                            <label class="k-form-field">
+                                <span>First Name</span>
+                                <kinput placeholder="Your Name" />
+                            </label>
+                            <label class="k-form-field">
+                                <span>Last Name</span>
+                                <kinput placeholder="Your Last Name" />
+                            </label>
+                        </fieldset>
+
+                        <div class="text-right">
+                            <kbutton @click="toggleDialog">Cancel</kbutton>
+                            <kbutton :theme-color="'primary'" @click="toggleDialog">Submit</kbutton>
+                        </div>
+                    </form>
+            </window>
+        </div>
+</template>
+<script>
+import { Window } from '@progress/kendo-vue-dialogs';
+import { Button } from '@progress/kendo-vue-buttons';
+import { Input } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        'window': Window,
+      'kbutton': Button,
+       'kinput': Input
+    },
+    data: function () {
+        return { 
+            visible: true
+        };
+    },
+    methods: {
+        toggleDialog () {
+            this.visible = !this.visible;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dialogs/window/controlled/main.js b/vue-options-api-demos/dialogs/window/controlled/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dialogs/window/controlled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dialogs/window/controlled/main.vue b/vue-options-api-demos/dialogs/window/controlled/main.vue
new file mode 100644
index 00000000..39c39b50
--- /dev/null
+++ b/vue-options-api-demos/dialogs/window/controlled/main.vue
@@ -0,0 +1,63 @@
+<template>
+  <div>
+            <kbutton @click="toggleDialog">{{visible ? 'Close': 'Open'}} Window</kbutton>
+                &nbsp;
+            <kbutton @click="handleSetWidth200">Set width to 200</kbutton>
+            &nbsp;
+            <kbutton @click="handleSetWidth500">Set width to 500</kbutton>
+            <window v-if="visible"
+                    :title="'Status'"
+                    :left="left"
+                    :top="top"
+                    :width="width"
+                    :height="height"
+                    @move="handleMove"
+                    @resize="handleResize"
+                    @close="toggleDialog"
+            >
+                Controlled mode
+            </window>
+        </div>
+</template>
+<script>
+import { Window } from '@progress/kendo-vue-dialogs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'window': Window,
+      'kbutton': Button
+    },
+    data: function () {
+        return { 
+            left: 300,
+            top: 100,
+            width: 200,
+            height: 200,
+            visible: true
+        };
+    },
+    methods: {
+        handleMove (event) {
+            this.left = event.left;
+            this.top = event.top;
+        },
+        handleResize (event) {
+            this.left = event.left;
+            this.top = event.top;
+            this.width = event.width;
+            this.height = event.height;
+        },
+        handleSetWidth200 ()  {
+            this.width = 200;
+        },
+        handleSetWidth500 () {
+            this.width = 300;
+        },
+        toggleDialog () {
+            this.visible = !this.visible;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dialogs/window/dimensions/main.js b/vue-options-api-demos/dialogs/window/dimensions/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dialogs/window/dimensions/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dialogs/window/dimensions/main.vue b/vue-options-api-demos/dialogs/window/dimensions/main.vue
new file mode 100644
index 00000000..b3dda5b0
--- /dev/null
+++ b/vue-options-api-demos/dialogs/window/dimensions/main.vue
@@ -0,0 +1,38 @@
+<template>
+   <div>
+            <kbutton @click="toggleDialog">{{visible ? 'Close': 'Open'}} Window</kbutton>
+                <window v-if="visible" :title="'Arm Chair'" @close="toggleDialog" :initial-height="400" :initial-width="450">
+                    <h4>Armchair 402</h4>
+                    <div class="armchair"><img :src="armchairImage" alt="Armchair 402" /></div>
+                    <p>Alvar Aalto is one of the greatest names in modern architecture and design. Glassblowers at the iittala factory still meticulously handcraft the legendary vases that are variations on one theme, fluid organic shapes that let the end user decide the use. Interpretations of the shape in new colors and materials add to the growing Alvar Aalto Collection that remains true to his original design.</p>
+                    <p>Born Hugo Alvar Henrik Aalto (February 3, 1898 - May 11, 1976) in Kuortane, Finland, was noted for his humanistic approach to modernism. He studied architecture at the Helsinki University of Technology from 1916 to 1921. In 1924 he married architect Aino Marsio.</p>
+                    <p>Alvar Aalto was one of the first and most influential architects of the Scandinavian modern movement, and a member of the Congres Internationaux d'Architecture Moderne. Major architectural works include the Finlandia Hall in Helsinki, Finland, and the campus of Helsinki University of Technology.</p>
+                    <p>Source: <a href="https://www.aalto.com/about-alvar-aalto.html" title="About Alvar Aalto">www.aalto.com</a></p>
+            </window>
+        </div>
+</template>
+<script>
+import { Window } from '@progress/kendo-vue-dialogs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+const armchairImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dialogs/armchair-402.png';
+
+export default {
+    components: {
+        'window': Window,
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+            visible: true,
+            armchairImage
+        };
+    },
+    methods: {
+        toggleDialog () {
+            this.visible = !this.visible;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dialogs/window/dragging/main.js b/vue-options-api-demos/dialogs/window/dragging/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dialogs/window/dragging/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dialogs/window/dragging/main.vue b/vue-options-api-demos/dialogs/window/dragging/main.vue
new file mode 100644
index 00000000..a53d7c20
--- /dev/null
+++ b/vue-options-api-demos/dialogs/window/dragging/main.vue
@@ -0,0 +1,38 @@
+<template>
+    <div>
+            <kbutton @click="toggleDialog">{{visible ? 'Close': 'Open'}} Window</kbutton>
+            <input type="checkbox" id="dragChkBox" class="k-checkbox k-checkbox-md k-rounded-md" v-model="isDraggable"/>
+            <label class="k-checkbox-label" for="dragChkBox">Enable/Disable dragging</label>
+            <window v-if="visible" :title="'Drag me'" :draggable="isDraggable" @close="toggleDialog" >
+                <span v-if="isDraggable">
+                    I can be dragged!
+                </span>
+                <span v-else>
+                    I cannot be dragged!
+                </span>
+            </window>
+        </div>
+</template>
+<script>
+import { Window } from '@progress/kendo-vue-dialogs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'window': Window,
+      'kbutton': Button
+    },
+    data: function () {
+        return { 
+            visible: true,
+            isDraggable: false
+        };
+    },
+    methods: {
+        toggleDialog () {
+            this.visible = !this.visible;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dialogs/window/events/main.js b/vue-options-api-demos/dialogs/window/events/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dialogs/window/events/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dialogs/window/events/main.vue b/vue-options-api-demos/dialogs/window/events/main.vue
new file mode 100644
index 00000000..a6b2b945
--- /dev/null
+++ b/vue-options-api-demos/dialogs/window/events/main.vue
@@ -0,0 +1,58 @@
+<template>
+   <div>
+            <kbutton @click="toggleDialog">{{visible ? 'Close': 'Open'}} Window</kbutton>
+                <window v-if="visible" :title="'Status'" :initial-height="350"  
+                    @close="toggleDialog"
+                    @move="handleMove"
+                    @resize="handleResize"
+                    @stagechange="handleStageChange">
+                </window>
+             <br />
+            <br />
+            <div class="example-config">
+                <h5>Event log</h5>
+                <ul class="event-log" :style="{ textAlign: 'right' }">
+                    <li v-for="(event, index) in events">
+                        {{ event }}
+                    </li>
+                </ul>
+            </div>
+    </div>
+</template>
+<script>
+import { Window } from '@progress/kendo-vue-dialogs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+     components: {
+        'window': Window,
+      'kbutton': Button
+    },
+    data: function () {
+        return { 
+            visible: true,
+            events: []
+        };
+    },
+    methods: {
+        toggleDialog () {
+            this.log('Close event');
+            this.visible = !this.visible;
+        },
+        handleMove () {
+            this.log('move event');
+        },
+        handleResize () {
+            this.log('resize event');
+        },
+        handleStageChange () {
+            this.log('state change event');
+        },
+        log(event, arg) {
+            const events = this.events;
+            events.unshift(`${event} ${arg || ""}`);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dialogs/window/hide-buttons/main.js b/vue-options-api-demos/dialogs/window/hide-buttons/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dialogs/window/hide-buttons/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dialogs/window/hide-buttons/main.vue b/vue-options-api-demos/dialogs/window/hide-buttons/main.vue
new file mode 100644
index 00000000..d0d18747
--- /dev/null
+++ b/vue-options-api-demos/dialogs/window/hide-buttons/main.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <kbutton @click="toggleDialog">
+      {{ visible ? "Close" : "Open" }} Window
+    </kbutton>
+    <window
+      v-if="visible"
+      :initial-height="350"
+      :title="'Status'"
+      :close-button="() => null"
+      :maximize-button="() => null"
+      :minimize-button="() => null"
+      @close="toggleDialog"
+    >
+      <form class="k-form">
+        <fieldset>
+          <legend>User Details</legend>
+
+          <label class="k-form-field">
+            <span>First Name</span>
+            <kinput :placeholder="'Your Name'" />
+          </label>
+          <label class="k-form-field">
+            <span>Last Name</span>
+            <kinput :placeholder="'Your Last Name'" />
+          </label>
+        </fieldset>
+
+        <div class="text-right">
+          <kbutton @click="toggleDialog"> Cancel </kbutton>
+          <kbutton :theme-color="'primary'" @click="toggleDialog">
+            Submit
+          </kbutton>
+        </div>
+      </form>
+    </window>
+  </div>
+</template>
+<script>
+import { Button } from "@progress/kendo-vue-buttons";
+import { Input } from "@progress/kendo-vue-inputs";
+import { Window } from "@progress/kendo-vue-dialogs";
+
+export default {
+  components: {
+    window: Window,
+    kbutton: Button,
+    kinput: Input,
+  },
+  data: function () {
+    return {
+      visible: true,
+    };
+  },
+  methods: {
+    toggleDialog() {
+      this.visible = !this.visible;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dialogs/window/minimize-fullscreen/main.js b/vue-options-api-demos/dialogs/window/minimize-fullscreen/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dialogs/window/minimize-fullscreen/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dialogs/window/minimize-fullscreen/main.vue b/vue-options-api-demos/dialogs/window/minimize-fullscreen/main.vue
new file mode 100644
index 00000000..343a3f06
--- /dev/null
+++ b/vue-options-api-demos/dialogs/window/minimize-fullscreen/main.vue
@@ -0,0 +1,43 @@
+<template>
+     <div>
+            <kbutton @click="setMinimize">Minimize</kbutton>&nbsp;
+            <kbutton @click="setFullscreen">Full screen</kbutton>&nbsp;
+            <kbutton @click="setDefault">Default</kbutton>
+            <window :title="'Status'" :stage="windowStage" @stagechange="handleStageChange">
+                <kbutton @click="setMinimize">Minimize</kbutton>&nbsp;
+                <kbutton @click="setFullscreen">Full screen</kbutton>&nbsp;
+                <kbutton @click="setDefault">Default</kbutton>
+            </window>
+        </div>
+</template>
+<script>
+import { Window } from '@progress/kendo-vue-dialogs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'window': Window,
+      'kbutton': Button
+    },
+    data: function () {
+        return { 
+            windowStage: 'MINIMIZED'
+        };
+    },
+    methods: {
+        setMinimize ()  {
+            this.windowStage = 'MINIMIZED';
+        },
+        setFullscreen () {
+            this.windowStage = 'FULLSCREEN';
+        },
+        setDefault () {
+            this.windowStage = 'DEFAULT';
+        },
+        handleStageChange (e) {
+            this.windowStage = e.state;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dialogs/window/positioning/main.js b/vue-options-api-demos/dialogs/window/positioning/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dialogs/window/positioning/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dialogs/window/positioning/main.vue b/vue-options-api-demos/dialogs/window/positioning/main.vue
new file mode 100644
index 00000000..b8376468
--- /dev/null
+++ b/vue-options-api-demos/dialogs/window/positioning/main.vue
@@ -0,0 +1,30 @@
+<template>
+    <div>
+            <kbutton @click="toggleDialog">{{visible ? 'Close': 'Open'}} Window</kbutton>
+            <window v-if="visible" :title="'Status'" @close="toggleDialog" :initial-left="100"
+                :initial-top="300">
+            </window>
+        </div>
+</template>
+<script>
+import { Window } from '@progress/kendo-vue-dialogs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'window': Window,
+      'kbutton': Button
+    },
+    data: function () {
+        return { 
+            visible: true
+        };
+    },
+    methods: {
+        toggleDialog () {
+            this.visible = !this.visible;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dialogs/window/resizable/main.js b/vue-options-api-demos/dialogs/window/resizable/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dialogs/window/resizable/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dialogs/window/resizable/main.vue b/vue-options-api-demos/dialogs/window/resizable/main.vue
new file mode 100644
index 00000000..b2708be6
--- /dev/null
+++ b/vue-options-api-demos/dialogs/window/resizable/main.vue
@@ -0,0 +1,38 @@
+<template>
+    <div>
+            <kbutton @click="toggleDialog">{{visible ? 'Close': 'Open'}} Window</kbutton>
+            <input type="checkbox" id="resizeChkBox" class="k-checkbox k-checkbox-md k-rounded-md" v-model="isResizable"/>
+            <label class="k-checkbox-label" for="resizeChkBox">Enable/Disable resizing</label>
+            <window v-if="visible" :title="'Resize me'" :resizable="isResizable" @close="toggleDialog" >
+                <span v-if="isResizable">
+                    I can be resized!
+                </span>
+                <span v-else>
+                    I cannot be resized!
+                </span>
+            </window>
+        </div>
+</template>
+<script>
+import { Window } from '@progress/kendo-vue-dialogs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'window': Window,
+      'kbutton': Button
+    },
+    data: function () {
+        return { 
+            visible: true,
+            isResizable: false
+        };
+    },
+    methods: {
+        toggleDialog () {
+            this.visible = !this.visible;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dialogs/window/title-basic/main.js b/vue-options-api-demos/dialogs/window/title-basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dialogs/window/title-basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dialogs/window/title-basic/main.vue b/vue-options-api-demos/dialogs/window/title-basic/main.vue
new file mode 100644
index 00000000..43402bf7
--- /dev/null
+++ b/vue-options-api-demos/dialogs/window/title-basic/main.vue
@@ -0,0 +1,32 @@
+<template>
+   <div>
+        <kbutton @click="toggleDialog">{{visible ? 'Close': 'Open'}} Window</kbutton>
+            <window v-if="visible" 
+            :title="'Awesome title goes here'" 
+            @close="toggleDialog" 
+            :initial-width="450">           
+        </window>
+    </div>
+</template>
+<script>
+import { Window } from '@progress/kendo-vue-dialogs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'window': Window,
+      'kbutton': Button
+    },
+    data: function () {
+        return { 
+            visible: true
+        };
+    },
+    methods: {
+        toggleDialog () {
+            this.visible = !this.visible;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dialogs/window/title-component/Title.vue b/vue-options-api-demos/dialogs/window/title-component/Title.vue
new file mode 100644
index 00000000..acbe201e
--- /dev/null
+++ b/vue-options-api-demos/dialogs/window/title-component/Title.vue
@@ -0,0 +1,6 @@
+<template>
+    <div :style="{ fontSize: 18, lineHeight: '1.3em' }">
+        <span class="k-icon k-i-print"></span> Print this page
+    </div>
+</template>
+
diff --git a/vue-options-api-demos/dialogs/window/title-component/main.js b/vue-options-api-demos/dialogs/window/title-component/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dialogs/window/title-component/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dialogs/window/title-component/main.vue b/vue-options-api-demos/dialogs/window/title-component/main.vue
new file mode 100644
index 00000000..53a63eff
--- /dev/null
+++ b/vue-options-api-demos/dialogs/window/title-component/main.vue
@@ -0,0 +1,35 @@
+<template>
+   <div>
+        <kbutton @click="toggleDialog">{{visible ? 'Close': 'Open'}} Window</kbutton>
+        <window v-if="visible" :title-render="titleRender" @close="toggleDialog" >
+            <template v-slot:myTemplate>
+                <custom />
+            </template>
+        </window>
+    </div>
+</template>
+<script>
+import { Window } from '@progress/kendo-vue-dialogs';
+import { Button } from '@progress/kendo-vue-buttons';
+import Title from './Title.vue';
+
+export default {
+    components: {
+        'window': Window,
+        'custom': Title,
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+            visible: true,
+            titleRender: 'myTemplate'
+        };
+    },
+    methods: {
+        toggleDialog () {
+            this.visible = !this.visible;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dialogs/window/title-no/main.js b/vue-options-api-demos/dialogs/window/title-no/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dialogs/window/title-no/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dialogs/window/title-no/main.vue b/vue-options-api-demos/dialogs/window/title-no/main.vue
new file mode 100644
index 00000000..7541a79f
--- /dev/null
+++ b/vue-options-api-demos/dialogs/window/title-no/main.vue
@@ -0,0 +1,29 @@
+<template>
+    <div>
+        <kbutton @click="toggleDialog">{{visible ? 'Close': 'Open'}} Window</kbutton>
+            <window v-if="visible" @close="toggleDialog">             
+        </window>
+    </div>
+</template>
+<script>
+import { Window } from '@progress/kendo-vue-dialogs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'window': Window,
+      'kbutton': Button
+    },
+    data: function () {
+        return { 
+            visible: true
+        };
+    },
+    methods: {
+        toggleDialog () {
+            this.visible = !this.visible;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/appearance/configurator/DropDownStyleConfigurator.vue b/vue-options-api-demos/dropdowns/autocomplete/appearance/configurator/DropDownStyleConfigurator.vue
new file mode 100644
index 00000000..c1b36044
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/appearance/configurator/DropDownStyleConfigurator.vue
@@ -0,0 +1,105 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Fill Mode
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="fillModes"
+              :value="fillMode"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleFillModeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+    fillMode: String,
+    rounded: String,
+  },
+  emits: [
+    "sizechange",
+    "fillmodechange",
+    "roundedchange",
+  ],
+  data() {
+    return {
+      sizes: ["small", "medium", "large"],
+      fillModes: ["solid", "outline", "flat"],
+      roundedOptions: ["small", "medium", "large", "full"],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleFillModeChange(event) {
+      this.$emit("fillmodechange", event);
+    },
+    handleRoundedChange(event) {
+      this.$emit("roundedchange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/appearance/configurator/main.js b/vue-options-api-demos/dropdowns/autocomplete/appearance/configurator/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/appearance/configurator/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/autocomplete/appearance/configurator/main.vue b/vue-options-api-demos/dropdowns/autocomplete/appearance/configurator/main.vue
new file mode 100644
index 00000000..7d4a1af2
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/appearance/configurator/main.vue
@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <DropDownStyleConfigurator
+      :size="size"
+      @sizechange="setSize"
+      :fill-mode="fillMode"
+      @fillmodechange="setFillMode"
+      :rounded="rounded"
+      @roundedchange="setRounded"
+    />
+    <AutoComplete
+      :style="{ width: '230px'}"
+      :size="size"
+      :fill-mode="fillMode"
+      :rounded="rounded"
+      :data-items="[
+        'X-Small',
+        'Small',
+        'Medium',
+        'Large',
+        'X-Large',
+        '2X-Large',
+      ]"
+    />
+  </div>
+</template>
+<script>
+import DropDownStyleConfigurator from "./DropDownStyleConfigurator.vue";
+import { AutoComplete } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    DropDownStyleConfigurator,
+    AutoComplete,
+  },
+  data() {
+    return {
+      size: "medium",
+      rounded: "medium",
+      fillMode: "solid",
+    };
+  },
+  methods: {
+    setRounded(event) {
+      this.rounded = event.value;
+    },
+    setSize(event) {
+      this.size = event.value;
+    },
+    setFillMode(event) {
+      this.fillMode = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/appearance/fill-mode/main.js b/vue-options-api-demos/dropdowns/autocomplete/appearance/fill-mode/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/appearance/fill-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/autocomplete/appearance/fill-mode/main.vue b/vue-options-api-demos/dropdowns/autocomplete/appearance/fill-mode/main.vue
new file mode 100644
index 00000000..3f4f8bea
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/appearance/fill-mode/main.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="example-config">
+    <div class="demo">
+      <span class="wrapper">
+        <span>Flat: </span>
+        <AutoComplete
+          :style="{ width: '170px' }"
+          :fill-mode="'flat'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Solid: </span>
+        <AutoComplete
+          :style="{ width: '170px' }"
+          :fill-mode="'solid'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Outline: </span>
+        <AutoComplete
+          :style="{ width: '170px' }"
+          :fill-mode="'outline'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Custom fill mode:</span>
+        <AutoComplete
+          :class="'custom-autocomplete'"
+          :fill-mode="null"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { AutoComplete } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  components: {
+    AutoComplete,
+  },
+};
+</script>
+
+<style>
+.custom-autocomplete {
+  width: 200px;
+  background-color: #00aead;
+  border: 2px solid #bfd843;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/appearance/rounded/main.js b/vue-options-api-demos/dropdowns/autocomplete/appearance/rounded/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/appearance/rounded/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/autocomplete/appearance/rounded/main.vue b/vue-options-api-demos/dropdowns/autocomplete/appearance/rounded/main.vue
new file mode 100644
index 00000000..ba9ac58c
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/appearance/rounded/main.vue
@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Small roundness: </span>
+        <AutoComplete
+          :style="{ width: '170px' }"
+          :rounded="'small'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Medium roundness: </span>
+        <AutoComplete
+          :style="{ width: '170px' }"
+          :rounded="'medium'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Large roundness: </span>
+        <AutoComplete
+          :style="{ width: '170px' }"
+          :rounded="'large'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Full roundness: </span>
+        <AutoComplete
+          :style="{ width: '170px' }"
+          :rounded="'full'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Custom roundness:</span>
+        <AutoComplete
+          :class="'custom-autocomplete'"
+          :rounded="null"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { AutoComplete } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  components: {
+    AutoComplete,
+  },
+};
+</script>
+
+<style>
+.custom-autocomplete {
+  width: 200px;
+  border-bottom-right-radius: 15px;
+  border-top-left-radius: 15px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/appearance/size/main.js b/vue-options-api-demos/dropdowns/autocomplete/appearance/size/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/appearance/size/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/autocomplete/appearance/size/main.vue b/vue-options-api-demos/dropdowns/autocomplete/appearance/size/main.vue
new file mode 100644
index 00000000..a26c433b
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/appearance/size/main.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Small: </span>
+        <AutoComplete
+          :style="{ width: '170px' }"
+          :size="'small'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Medium: </span>
+        <AutoComplete
+          :style="{ width: '170px' }"
+          :size="'medium'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Large: </span>
+        <AutoComplete
+          :style="{ width: '170px' }"
+          :size="'large'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+    <span class="wrapper">
+      <span>Custom size:</span>
+      <AutoComplete
+        :class="'custom-autocomplete'"
+        :size="null"
+        :data-items="[
+          'X-Small',
+          'Small',
+          'Medium',
+          'Large',
+          'X-Large',
+          '2X-Large',
+        ]"
+      />
+    </span>
+  </div>
+</template>
+<script>
+import { AutoComplete } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  components: {
+    AutoComplete,
+  },
+};
+</script>
+
+<style>
+.custom-autocomplete {
+  height: 40px;
+  width: 200px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/basic/countries.js b/vue-options-api-demos/dropdowns/autocomplete/basic/countries.js
new file mode 100644
index 00000000..45b6cb20
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/basic/countries.js
@@ -0,0 +1,52 @@
+export default [
+    "Albania",
+    "Andorra",
+    "Armenia",
+    "Austria",
+    "Azerbaijan",
+    "Belarus",
+    "Belgium",
+    "Bosnia & Herzegovina",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czech Republic",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Georgia",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Iceland",
+    "Ireland",
+    "Italy",
+    "Kosovo",
+    "Latvia",
+    "Liechtenstein",
+    "Lithuania",
+    "Luxembourg",
+    "Macedonia",
+    "Malta",
+    "Moldova",
+    "Monaco",
+    "Montenegro",
+    "Netherlands",
+    "Norway",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Russia",
+    "San Marino",
+    "Serbia",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden",
+    "Switzerland",
+    "Turkey",
+    "Ukraine",
+    "United Kingdom",
+    "Vatican City"
+];
diff --git a/vue-options-api-demos/dropdowns/autocomplete/basic/main.js b/vue-options-api-demos/dropdowns/autocomplete/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/autocomplete/basic/main.vue b/vue-options-api-demos/dropdowns/autocomplete/basic/main.vue
new file mode 100644
index 00000000..936bcc15
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/basic/main.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="example-wrapper">
+            <p>Type the name of a European country:</p>
+            <autocomplete :style="{ width: '230px' }" :data-items="countries" :placeholder="'e.g. Denmark'" ></autocomplete>
+    </div>
+</template>
+<script>
+import countries from './countries';
+import { AutoComplete } from '@progress/kendo-vue-dropdowns';
+
+
+export default {
+    components: {
+        'autocomplete': AutoComplete
+    },
+    data: function(){
+        return {
+            countries: countries
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/bindings/arrays/main.js b/vue-options-api-demos/dropdowns/autocomplete/bindings/arrays/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/bindings/arrays/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/autocomplete/bindings/arrays/main.vue b/vue-options-api-demos/dropdowns/autocomplete/bindings/arrays/main.vue
new file mode 100644
index 00000000..6fc62a1e
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/bindings/arrays/main.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="example-wrapper">
+            <p>Type the name of a European country:</p>
+            <autocomplete :style="{ width: '230px' }" 
+                :data-items="countries" 
+                :value="value"
+                @change="onChange"
+                :placeholder="'e.g. Andorra'" ></autocomplete>
+    </div>
+</template>
+<script>
+import { AutoComplete } from '@progress/kendo-vue-dropdowns';
+
+
+export default {
+    components: {
+        'autocomplete': AutoComplete
+    },
+     data: function(){
+        return {
+            countries: [ "Albania", "Andorra", "Armenia", "Austria", "Azerbaijan"] ,
+            value: ''
+        }
+    },
+    methods: {
+        onChange (event) {
+            this.value = event.target.value;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/bindings/datasets/main.js b/vue-options-api-demos/dropdowns/autocomplete/bindings/datasets/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/bindings/datasets/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/autocomplete/bindings/datasets/main.vue b/vue-options-api-demos/dropdowns/autocomplete/bindings/datasets/main.vue
new file mode 100644
index 00000000..a65f8265
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/bindings/datasets/main.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="example-wrapper">
+            <p>Type the name of a European country:</p>
+            <autocomplete :style="{ width: '230px' }" 
+                :data-items="countries" 
+                :value="value"
+                :text-field="'text'"
+                @change="onChange"></autocomplete>
+    </div>
+</template>
+<script>
+import { AutoComplete } from '@progress/kendo-vue-dropdowns';
+
+
+export default {
+    components: {
+        'autocomplete': AutoComplete
+    },
+     data: function(){
+        return {
+            countries: [
+                { text: "Albania", id: "Alb" },
+                { text: "Andorra", id: "And" },
+                { text: "Armenia", id: "Arm" },
+                { text: "Austria", id: "Aus" },
+                { text: "Azerbaijan", id: "Aze" }
+            ],
+            value: ''
+        }
+    },
+    methods: {
+        onChange (event) {
+            this.value = event.target.value;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/bindings/value/main.js b/vue-options-api-demos/dropdowns/autocomplete/bindings/value/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/bindings/value/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/autocomplete/bindings/value/main.vue b/vue-options-api-demos/dropdowns/autocomplete/bindings/value/main.vue
new file mode 100644
index 00000000..30c5d492
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/bindings/value/main.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="example-wrapper">
+    <p>Type the name of a European country:</p>
+    <AutoComplete
+      :style="{ width: '230px' }"
+      :data-items="countries"
+      :value="value"
+      @change="onChange"
+      :placeholder="'e.g. Andorra'"
+    ></AutoComplete>
+    <br />
+    <br />
+    Selected country: {{ value }}
+  </div>
+</template>
+<script>
+import { AutoComplete } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  components: {
+    AutoComplete,
+  },
+  data: function () {
+    return {
+      countries: ['Albania', 'Andorra', 'Armenia', 'Austria', 'Azerbaijan'],
+      value: '',
+    };
+  },
+  methods: {
+    onChange(event) {
+      this.value = event.target.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/common/countries.js b/vue-options-api-demos/dropdowns/autocomplete/common/countries.js
new file mode 100644
index 00000000..45b6cb20
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/common/countries.js
@@ -0,0 +1,52 @@
+export default [
+    "Albania",
+    "Andorra",
+    "Armenia",
+    "Austria",
+    "Azerbaijan",
+    "Belarus",
+    "Belgium",
+    "Bosnia & Herzegovina",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czech Republic",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Georgia",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Iceland",
+    "Ireland",
+    "Italy",
+    "Kosovo",
+    "Latvia",
+    "Liechtenstein",
+    "Lithuania",
+    "Luxembourg",
+    "Macedonia",
+    "Malta",
+    "Moldova",
+    "Monaco",
+    "Montenegro",
+    "Netherlands",
+    "Norway",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Russia",
+    "San Marino",
+    "Serbia",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden",
+    "Switzerland",
+    "Turkey",
+    "Ukraine",
+    "United Kingdom",
+    "Vatican City"
+];
diff --git a/vue-options-api-demos/dropdowns/autocomplete/filtering/basic/main.js b/vue-options-api-demos/dropdowns/autocomplete/filtering/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/filtering/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/autocomplete/filtering/basic/main.vue b/vue-options-api-demos/dropdowns/autocomplete/filtering/basic/main.vue
new file mode 100644
index 00000000..8e7c699b
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/filtering/basic/main.vue
@@ -0,0 +1,44 @@
+<template>
+    <div class="example-wrapper">
+            <p>Type the name of a European country:</p>
+            <autocomplete :style="{ width: '230px' }" 
+                :data-items="countries" 
+                :value="value"
+                @change="onChange"
+                :placeholder="'e.g. Austria'" ></autocomplete>
+    </div>
+</template>
+<script>
+import { AutoComplete } from '@progress/kendo-vue-dropdowns';
+import { filterBy } from '@progress/kendo-data-query';
+
+const source = [ "Albania", "Andorra", "Armenia", "Austria", "Azerbaijan"];
+
+export default {
+    components: {
+        'autocomplete': AutoComplete
+    },
+    data: function(){
+        return {
+            countries: source,
+            value: ''
+        }
+    },
+    methods: {
+        onChange (event) {
+            this.value = event.target.value;
+            this.countries = this.filterData(event.target.value);
+        },
+        filterData(value) {
+            const data = source;
+            const filter = {
+                value: value,
+                operator: 'startswith',
+                ignoreCase: true
+            };
+            return value ? filterBy(data, filter) : data;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/filtering/loading/main.js b/vue-options-api-demos/dropdowns/autocomplete/filtering/loading/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/filtering/loading/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/autocomplete/filtering/loading/main.vue b/vue-options-api-demos/dropdowns/autocomplete/filtering/loading/main.vue
new file mode 100644
index 00000000..67ab15e3
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/filtering/loading/main.vue
@@ -0,0 +1,54 @@
+<template>
+   <div class="example-wrapper">
+            <p>Type the name of a European country:</p>
+            <autocomplete :style="{ width: '230px' }" 
+                :data-items="countries" 
+                :value="value"
+                @change="onChange"
+                :loading="loading" ></autocomplete>
+    </div>
+</template>
+<script>
+import { AutoComplete } from '@progress/kendo-vue-dropdowns';
+import { filterBy } from '@progress/kendo-data-query';
+
+const source = [ "Albania", "Andorra", "Armenia", "Austria", "Azerbaijan"];
+const delay = 500;
+
+export default {
+    components: {
+        'autocomplete': AutoComplete
+    },
+    data: function(){
+        return {
+            countries: source,
+            value: '',
+            loading: false
+        }
+    },
+    methods: {
+        onChange (event) {
+            const value = event.target.value;
+
+            clearTimeout(this.timeout);
+            this.timeout = setTimeout(() => {
+                this.countries = this.filterData(value);
+                this.loading = false;
+            }, delay);
+
+            this.value = value;
+            this.loading = true;
+        },
+        filterData(value) {
+            const data = source;
+            const filter = {
+                value: value,
+                operator: 'startswith',
+                ignoreCase: true
+            };
+            return value ? filterBy(data, filter) : data;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/filtering/minfilter/main.js b/vue-options-api-demos/dropdowns/autocomplete/filtering/minfilter/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/filtering/minfilter/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/autocomplete/filtering/minfilter/main.vue b/vue-options-api-demos/dropdowns/autocomplete/filtering/minfilter/main.vue
new file mode 100644
index 00000000..5b94a303
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/filtering/minfilter/main.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="example-wrapper">
+            <p>Type 'Aus':</p>
+            <autocomplete :style="{ width: '230px' }" 
+                :data-items="countries" 
+                :value="value"
+                @change="onChange"
+                :opened="opened"
+                :placeholder="'e.g. Austria'" ></autocomplete>
+    </div>
+</template>
+<script>
+import { AutoComplete } from '@progress/kendo-vue-dropdowns';
+import { filterBy } from '@progress/kendo-data-query';
+
+const source = [ "Albania", "Andorra", "Armenia", "Austria", "Azerbaijan"];
+
+export default {
+    components: {
+        'autocomplete': AutoComplete
+    },
+   data: function(){
+        return {
+            countries: source,
+            value: '',
+            opened: false
+        }
+    },
+    methods: {
+        onChange (e) {
+            const value = e.target.value;
+            const stateData = value.length < 3 ?
+                { data: source, opened: false } :
+                { data: this.filterData(value), opened: true };
+
+            const eventType = e.event.type;
+            const valueSelected = eventType === 'click' ||
+                (eventType === 'keydown' && e.event.keyCode === 13);
+
+            if (valueSelected && stateData.data.includes(value)) {
+                stateData.opened = false;
+            }
+
+            this.value = value;
+            this.countries = stateData.data;
+            this.opened = stateData.opened;
+        },
+        filterData(value) {
+            const data = source;
+            const filter = {
+                value: value,
+                operator: 'startswith',
+                ignoreCase: true
+            };
+            return value ? filterBy(data, filter) : data;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/forms/basic/main.js b/vue-options-api-demos/dropdowns/autocomplete/forms/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/forms/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/autocomplete/forms/basic/main.vue b/vue-options-api-demos/dropdowns/autocomplete/forms/basic/main.vue
new file mode 100644
index 00000000..96407e39
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/forms/basic/main.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="row example-wrapper">
+         <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                    <div class="card">
+                        <div class="card-block">
+                            <form class="k-form" @submit="handleSubmit">
+                                <fieldset>
+                                    <legend>Select your flight route:</legend>
+                                    <div class="mb-3">
+                                        <autocomplete 
+                                            :label="'Departure Country'"
+                                            :name="'departureCountry'"
+                                            :data-items="countries"
+                                            :required="true"
+                                        >
+                                        </autocomplete>
+                                    </div>
+                                    <div>
+                                        <autocomplete 
+                                            :label="'Arrival Country'"
+                                            :name="'arrivalCountry'"
+                                            :data-items="countries"
+                                            :required="true"
+                                        >
+                                        </autocomplete>
+                                    </div>
+                                </fieldset>
+                                <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+                <div v-if="success"
+                    class="alert alert-success"
+                    :style="{ position: 'absolute' }"
+                >
+                    Form submitted!
+                </div>
+    </div>
+</template>
+<script>
+import { AutoComplete } from '@progress/kendo-vue-dropdowns';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'autocomplete': AutoComplete,
+      'kbutton': Button
+    },
+    methods: {
+         handleSubmit (event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(() => { this.success = false; }, 3000);
+        }
+    },
+     data: function () {
+        return {
+            success: false,
+              countries: [ 'Albania', 'Andorra', 'Armenia', 'Austria', 'Azerbaijan', 
+               'Belarus', 'Belgium', 'Bosnia & Herzegovina',  'Bulgaria', 'Croatia',  
+               'Cyprus', 'Czech Republic', 'Denmark', 'Estonia', 'Finland', 'France', 
+               'Georgia', 'Germany', 'Greece', 'Hungary', 'Iceland', 'Ireland', 'Italy',
+                'Kosovo', 'Latvia', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macedonia',
+                 'Malta', 'Moldova', 'Monaco', 'Montenegro', 'Netherlands', 'Norway', 'Poland',
+                  'Portugal', 'Romania', 'Russia', 'San Marino', 'Serbia', 'Slovakia',
+                   'Slovenia', 'Spain', 'Sweden', 'Switzerland', 'Turkey', 'Ukraine', 
+                   'United Kingdom', 'Vatican City' ]
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/forms/countries.js b/vue-options-api-demos/dropdowns/autocomplete/forms/countries.js
new file mode 100644
index 00000000..24f270bb
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/forms/countries.js
@@ -0,0 +1,52 @@
+export const countries = [
+    'Albania',
+    'Andorra',
+    'Armenia',
+    'Austria',
+    'Azerbaijan',
+    'Belarus',
+    'Belgium',
+    'Bosnia & Herzegovina',
+    'Bulgaria',
+    'Croatia',
+    'Cyprus',
+    'Czech Republic',
+    'Denmark',
+    'Estonia',
+    'Finland',
+    'France',
+    'Georgia',
+    'Germany',
+    'Greece',
+    'Hungary',
+    'Iceland',
+    'Ireland',
+    'Italy',
+    'Kosovo',
+    'Latvia',
+    'Liechtenstein',
+    'Lithuania',
+    'Luxembourg',
+    'Macedonia',
+    'Malta',
+    'Moldova',
+    'Monaco',
+    'Montenegro',
+    'Netherlands',
+    'Norway',
+    'Poland',
+    'Portugal',
+    'Romania',
+    'Russia',
+    'San Marino',
+    'Serbia',
+    'Slovakia',
+    'Slovenia',
+    'Spain',
+    'Sweden',
+    'Switzerland',
+    'Turkey',
+    'Ukraine',
+    'United Kingdom',
+    'Vatican City'
+];
diff --git a/vue-options-api-demos/dropdowns/autocomplete/forms/custom-message/countries.js b/vue-options-api-demos/dropdowns/autocomplete/forms/custom-message/countries.js
new file mode 100644
index 00000000..45b6cb20
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/forms/custom-message/countries.js
@@ -0,0 +1,52 @@
+export default [
+    "Albania",
+    "Andorra",
+    "Armenia",
+    "Austria",
+    "Azerbaijan",
+    "Belarus",
+    "Belgium",
+    "Bosnia & Herzegovina",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czech Republic",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Georgia",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Iceland",
+    "Ireland",
+    "Italy",
+    "Kosovo",
+    "Latvia",
+    "Liechtenstein",
+    "Lithuania",
+    "Luxembourg",
+    "Macedonia",
+    "Malta",
+    "Moldova",
+    "Monaco",
+    "Montenegro",
+    "Netherlands",
+    "Norway",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Russia",
+    "San Marino",
+    "Serbia",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden",
+    "Switzerland",
+    "Turkey",
+    "Ukraine",
+    "United Kingdom",
+    "Vatican City"
+];
diff --git a/vue-options-api-demos/dropdowns/autocomplete/forms/custom-message/main.js b/vue-options-api-demos/dropdowns/autocomplete/forms/custom-message/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/forms/custom-message/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/autocomplete/forms/custom-message/main.vue b/vue-options-api-demos/dropdowns/autocomplete/forms/custom-message/main.vue
new file mode 100644
index 00000000..3303485c
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/forms/custom-message/main.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="row example-wrapper">
+         <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                    <div class="card">
+                        <div class="card-block">
+                            <form class="k-form" @submit="handleSubmit">
+                                <fieldset>
+                                    <legend>Select your flight route:</legend>
+                                    <div class="mb-3">
+                                        <autocomplete
+                                            :style="{ width: '100%' }"
+                                            :label="'Departure Country'"
+                                            :name="'departureCountry'"
+                                            :data-items="countries"
+                                            :required="true"
+                                            :validation-message="departureValidationMessage"
+                                        >
+                                        </autocomplete>
+                                    </div>
+                                    <div>
+                                        <autocomplete
+                                            :style="{ width: '100%' }"
+                                            :label="'Arrival Country'"
+                                            :name="'arrivalCountry'"
+                                            :data-items="countries"
+                                            :required="true"
+                                            :validation-message="arrivalValidationMessage"
+                                        >
+                                        </autocomplete>
+                                    </div>
+                                </fieldset>
+                                <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+                <div v-if="success"
+                    class="alert alert-success"
+                    :style="{ position: 'absolute' }"
+                >
+                    Form submitted!
+                </div>
+    </div>
+</template>
+<script>
+import countries from './countries';
+import { AutoComplete } from '@progress/kendo-vue-dropdowns';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'autocomplete': AutoComplete,
+      'kbutton': Button
+    },
+    methods: {
+         handleSubmit (event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(() => { this.success = false; }, 3000);
+        }
+    },
+     data: function () {
+        return {
+            departureValidationMessage: 'Please select a departure country!',
+            arrivalValidationMessage: 'Please select an arrival country!',
+            success: false,
+            countries: countries
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/forms/disable-styles/countries.js b/vue-options-api-demos/dropdowns/autocomplete/forms/disable-styles/countries.js
new file mode 100644
index 00000000..45b6cb20
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/forms/disable-styles/countries.js
@@ -0,0 +1,52 @@
+export default [
+    "Albania",
+    "Andorra",
+    "Armenia",
+    "Austria",
+    "Azerbaijan",
+    "Belarus",
+    "Belgium",
+    "Bosnia & Herzegovina",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czech Republic",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Georgia",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Iceland",
+    "Ireland",
+    "Italy",
+    "Kosovo",
+    "Latvia",
+    "Liechtenstein",
+    "Lithuania",
+    "Luxembourg",
+    "Macedonia",
+    "Malta",
+    "Moldova",
+    "Monaco",
+    "Montenegro",
+    "Netherlands",
+    "Norway",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Russia",
+    "San Marino",
+    "Serbia",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden",
+    "Switzerland",
+    "Turkey",
+    "Ukraine",
+    "United Kingdom",
+    "Vatican City"
+];
diff --git a/vue-options-api-demos/dropdowns/autocomplete/forms/disable-styles/main.js b/vue-options-api-demos/dropdowns/autocomplete/forms/disable-styles/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/forms/disable-styles/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/autocomplete/forms/disable-styles/main.vue b/vue-options-api-demos/dropdowns/autocomplete/forms/disable-styles/main.vue
new file mode 100644
index 00000000..c7d1e7d9
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/forms/disable-styles/main.vue
@@ -0,0 +1,101 @@
+<template>
+     <div class="row example-wrapper">
+         <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                    <div class="card">
+                        <div class="card-block">
+                            <form class="k-form" @submit="handleSubmit">
+                                <fieldset>
+                                    <legend>Select your flight route:</legend>
+                                    <div class="mb-3">
+                                        <autocomplete 
+                                            :style="{ width: '100%' }"
+                                            :label="'Departure Country'"
+                                            :value="departureCountry"
+                                            @change="handleChange"
+                                            :name="'departureCountry'"
+                                            :data-items="countries"
+                                            :required="true"
+                                        >
+                                        </autocomplete>
+                                    </div>
+                                    <div>
+                                        <autocomplete 
+                                            :validity-styles="false"
+                                            :style="{ width: '100%' }"
+                                            :label="'Arrival Country'"
+                                            :value="arrivalCountry"
+                                            @change="handleChange"
+                                            :name="'arrivalCountry'"
+                                            :data-items="countries"
+                                            :required="true"
+                                            :valid="valid"
+                                            :validation-message="validationMessage"
+                                        >
+                                        </autocomplete>
+                                    </div>
+                                    <label class="k-form-field">
+                                        <span>Additional Comments</span>
+                                        <textarea
+                                            class="k-textarea"
+                                            :style="{ width: '100%' }"
+                                            name="additionalComments"
+                                            v-model="additionalComments"
+                                        >
+                                        </textarea>
+                                    </label>
+                                </fieldset>
+                                <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+                <div v-if="success"
+                    class="alert alert-success"
+                    :style="{ position: 'absolute' }"
+                >
+                    Form submitted!
+                </div>
+    </div>
+</template>
+<script>
+import countries from './countries';
+import { AutoComplete } from '@progress/kendo-vue-dropdowns';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'autocomplete': AutoComplete,
+      'kbutton': Button
+    },
+    computed: {
+        valid: function(){
+            return this.departureCountry !== null && this.arrivalCountry !== null;
+        },
+        validationMessage: function(){
+            return this.departureCountry === null
+            ? 'Please select a Departure Country first!'
+            : 'Please select an Arrival Country';
+        }     
+    },
+    methods: {
+        handleChange(event) {
+            this[event.target.name] = event.value;
+        },
+         handleSubmit (event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(() => { this.success = false; }, 3000);
+        }
+    },
+    data: function () {
+        return {
+            departureCountry: null,
+            arrivalCountry: null,
+            additionalComments: '',
+            success: false,
+            countries: countries
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/forms/override/countries.js b/vue-options-api-demos/dropdowns/autocomplete/forms/override/countries.js
new file mode 100644
index 00000000..45b6cb20
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/forms/override/countries.js
@@ -0,0 +1,52 @@
+export default [
+    "Albania",
+    "Andorra",
+    "Armenia",
+    "Austria",
+    "Azerbaijan",
+    "Belarus",
+    "Belgium",
+    "Bosnia & Herzegovina",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czech Republic",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Georgia",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Iceland",
+    "Ireland",
+    "Italy",
+    "Kosovo",
+    "Latvia",
+    "Liechtenstein",
+    "Lithuania",
+    "Luxembourg",
+    "Macedonia",
+    "Malta",
+    "Moldova",
+    "Monaco",
+    "Montenegro",
+    "Netherlands",
+    "Norway",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Russia",
+    "San Marino",
+    "Serbia",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden",
+    "Switzerland",
+    "Turkey",
+    "Ukraine",
+    "United Kingdom",
+    "Vatican City"
+];
diff --git a/vue-options-api-demos/dropdowns/autocomplete/forms/override/main.js b/vue-options-api-demos/dropdowns/autocomplete/forms/override/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/forms/override/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/autocomplete/forms/override/main.vue b/vue-options-api-demos/dropdowns/autocomplete/forms/override/main.vue
new file mode 100644
index 00000000..b6ce48b1
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/forms/override/main.vue
@@ -0,0 +1,100 @@
+<template>
+   <div class="row example-wrapper">
+         <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                    <div class="card">
+                        <div class="card-block">
+                            <form class="k-form" @submit="handleSubmit">
+                                <fieldset>
+                                    <legend>Select your flight route:</legend>
+                                    <div class="mb-3">
+                                        <autocomplete 
+                                            :style="{ width: '100%' }"
+                                            :label="'Departure Country'"
+                                            :value="departureCountry"
+                                            @change="handleChange"
+                                            :name="'departureCountry'"
+                                            :data-items="countries"
+                                            :required="true"
+                                        >
+                                        </autocomplete>
+                                    </div>
+                                    <div>
+                                        <autocomplete 
+                                            :style="{ width: '100%' }"
+                                            :label="'Arrival Country'"
+                                            :value="arrivalCountry"
+                                            @change="handleChange"
+                                            :name="'arrivalCountry'"
+                                            :data-items="countries"
+                                            :required="true"
+                                            :valid="valid"
+                                            :validation-message="validationMessage"
+                                        >
+                                        </autocomplete>
+                                    </div>
+                                    <label class="k-form-field">
+                                        <span>Additional Comments</span>
+                                        <textarea
+                                            class="k-textarea"
+                                            :style="{ width: '100%' }"
+                                            name="additionalComments"
+                                            v-model="additionalComments"
+                                        >
+                                        </textarea>
+                                    </label>
+                                </fieldset>
+                                <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+                <div v-if="success"
+                    class="alert alert-success"
+                    :style="{ position: 'absolute' }"
+                >
+                    Form submitted!
+                </div>
+    </div>
+</template>
+<script>
+import countries from './countries';
+import { AutoComplete } from '@progress/kendo-vue-dropdowns';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'autocomplete': AutoComplete,
+      'kbutton': Button
+    },
+     computed: {
+        valid: function(){
+            return this.departureCountry !== null && this.arrivalCountry !== null;
+        },
+        validationMessage: function(){
+            return this.departureCountry === null
+            ? 'Please select a Departure Country first!'
+            : 'Please select an Arrival Country';
+        }     
+    },
+    methods: {
+        handleChange(event) {
+            this[event.target.name] = event.value;
+        },
+         handleSubmit (event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(() => { this.success = false; }, 3000);
+        }
+    },
+     data: function () {
+        return {
+            departureCountry: null,
+            arrivalCountry: null,
+            additionalComments: '',
+            success: false,
+            countries: countries
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/grouping/basic/grouping-data.js b/vue-options-api-demos/dropdowns/autocomplete/grouping/basic/grouping-data.js
new file mode 100644
index 00000000..9a2711db
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/grouping/basic/grouping-data.js
@@ -0,0 +1,181 @@
+export const employees = [ {
+    "id": 11,
+    "name": "Hyacinth Hood",
+    "reportsTo": 32,
+    "phone": "(889) 345-2438",
+    "extension": 8564,
+    "hireDate": new Date("2014-02-03T20:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 1
+}, {
+    "id": 40,
+    "name": "Karleigh Garza",
+    "reportsTo": 52,
+    "phone": "(370) 983-8796",
+    "extension": 4044,
+    "hireDate": new Date("2014-03-10T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 1
+}, {
+    "id": 46,
+    "name": "Darrel Solis",
+    "reportsTo": 43,
+    "phone": "(327) 977-0216",
+    "extension": 7779,
+    "hireDate": new Date("2015-04-25T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 4
+}, {
+    "id": 76,
+    "name": "Cheyenne Olson",
+    "reportsTo": 63,
+    "phone": "(241) 645-0257",
+    "extension": 9181,
+    "hireDate": new Date("2015-05-19T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 5
+}, {
+    "id": 78,
+    "name": "Rinah Simon",
+    "reportsTo": 11,
+    "phone": "(285) 912-5271",
+    "extension": 7795,
+    "hireDate": new Date("2012-10-11T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 4
+}, {
+    "id": 79,
+    "name": "Duncan Mathews",
+    "reportsTo": 64,
+    "phone": "(790) 971-9709",
+    "extension": 4573,
+    "hireDate": new Date("2011-08-21T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "Developer",
+    "timeInPosition": 3
+}, {
+    "id": 82,
+    "name": "Yael Walters",
+    "reportsTo": 69,
+    "phone": "(311) 489-8191",
+    "extension": 6520,
+    "hireDate": new Date("2013-07-04T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 6
+}, {
+    "id": 75,
+    "name": "Eric Russell",
+    "reportsTo": 63,
+    "phone": "(516) 575-8505",
+    "extension": 2224,
+    "hireDate": new Date("2012-10-28T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 3
+}, {
+    "id": 55,
+    "name": "Summer Mosley",
+    "reportsTo": 46,
+    "phone": "(784) 962-2301",
+    "extension": 5492,
+    "hireDate": new Date("2010-03-02T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "QA",
+    "timeInPosition": 5
+}, {
+    "id": 59,
+    "name": "Keiko Espinoza",
+    "reportsTo": 46,
+    "phone": "(226) 600-5305",
+    "extension": 9363,
+    "hireDate": new Date("2011-09-18T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "QA",
+    "timeInPosition": 4
+}, {
+    "id": 72,
+    "name": "Stacey Lynn",
+    "reportsTo": 40,
+    "phone": "(140) 772-7509",
+    "extension": 8396,
+    "hireDate": new Date("2014-07-31T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "QA",
+    "timeInPosition": 1
+}, {
+    "id": 38,
+    "name": "Elton Tucker",
+    "reportsTo": 69,
+    "phone": "(988) 930-9331",
+    "extension": 9216,
+    "hireDate": new Date("2015-06-04T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 1
+}, {
+    "id": 71,
+    "name": "Flavia Short",
+    "reportsTo": 63,
+    "phone": "(370) 133-9238",
+    "extension": 6390,
+    "hireDate": new Date("2013-02-21T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 0
+}, {
+    "id": 61,
+    "name": "Candace Pickett",
+    "reportsTo": 46,
+    "phone": "(120) 117-7475",
+    "extension": 5178,
+    "hireDate": new Date("2010-05-06T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 0
+}, {
+    "id": 65,
+    "name": "Thomas Terry",
+    "reportsTo": 63,
+    "phone": "(764) 831-4248",
+    "extension": 3574,
+    "hireDate": new Date("2015-06-15T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "Support",
+    "timeInPosition": 2
+}, {
+    "id": 62,
+    "name": "Palmer Gregory",
+    "reportsTo": 64,
+    "phone": "(360) 430-2505",
+    "extension": 4337,
+    "hireDate": new Date("2014-08-30T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 4
+}, {
+    "id": 12,
+    "name": "Jamalia Wallace",
+    "reportsTo": 64,
+    "phone": "(611) 391-8016",
+    "extension": 1952,
+    "hireDate": new Date("2011-09-08T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 3
+}, {
+    "id": 66,
+    "name": "Gloria Freeman",
+    "reportsTo": 53,
+    "phone": "(344) 950-9168",
+    "extension": 4738,
+    "hireDate": new Date("2013-05-06T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 0
+} ];
diff --git a/vue-options-api-demos/dropdowns/autocomplete/grouping/basic/main.js b/vue-options-api-demos/dropdowns/autocomplete/grouping/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/grouping/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/autocomplete/grouping/basic/main.vue b/vue-options-api-demos/dropdowns/autocomplete/grouping/basic/main.vue
new file mode 100644
index 00000000..cdda7121
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/grouping/basic/main.vue
@@ -0,0 +1,27 @@
+<template>
+  <AutoComplete
+    :data-items="groupedData"
+    :text-field="'name'"
+    :placeholder="'Please select ...'"
+    :group-field="'position'"
+    :style="{
+      width: '300px',
+    }"
+  />
+</template>
+<script>
+import { AutoComplete } from "@progress/kendo-vue-dropdowns";
+import { groupBy } from '@progress/kendo-data-query';
+import { employees } from './grouping-data.js';
+
+export default {
+  components: {
+    AutoComplete,
+  },
+  data() {
+    return {
+      groupedData: groupBy(employees, [{ field: 'position' }]).reduce((res, group) =>  [...res, ...group.items], [])
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-custom/GroupHeaderItemRender.vue b/vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-custom/GroupHeaderItemRender.vue
new file mode 100644
index 00000000..d2c8a237
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-custom/GroupHeaderItemRender.vue
@@ -0,0 +1,21 @@
+<template>
+<li :id="id" role="group" class="k-list-group-item" style="position: unset;">
+  <b
+      :style="{
+        color: '#00F',
+      }"
+      role="option"
+    >
+     {{group}}
+    </b>
+  </li>
+</template>
+<script>
+export default {
+  props: {
+    group: String,
+    id: String,
+    index: Number,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-custom/ItemRender.vue b/vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-custom/ItemRender.vue
new file mode 100644
index 00000000..0967fc13
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-custom/ItemRender.vue
@@ -0,0 +1,42 @@
+<template>
+  <li class="k-item" @click="handleClick">
+    <i
+      :style="{
+        color: 'green',
+      }"
+      role="option"
+      :aria-selected="focused"
+      :class="itemClass"
+    >
+      {{ dataItem[textField] }} {{ index }}
+    </i>
+  </li>
+</template>
+<script>
+export default {
+  emits: {
+    click: null,
+  },
+  props: {
+    id: String,
+    index: Number,
+    dataItem: [Object, String, Number],
+    textField: String,
+    focused: Boolean,
+    selected: Boolean,
+  },
+  computed: {
+    itemClass() {
+      return {
+        "k-item": true,
+        "k-state-focused": this.$props.focused,
+      };
+    },
+  },
+  methods: {
+    handleClick: function (e) {
+      this.$emit("click", e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-custom/StickyHeaderRender.vue b/vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-custom/StickyHeaderRender.vue
new file mode 100644
index 00000000..60e0a1aa
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-custom/StickyHeaderRender.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="k-list-group-sticky-header">
+    <span
+      :style="{
+        color: 'orange',
+        fontWeight: 900,
+        width: '100%',
+        fontSize: '1.5em',
+        textAlign: 'center',
+      }"
+    >
+    {{ group }}
+    </span>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    group: String,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-custom/grouping-data.js b/vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-custom/grouping-data.js
new file mode 100644
index 00000000..9a2711db
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-custom/grouping-data.js
@@ -0,0 +1,181 @@
+export const employees = [ {
+    "id": 11,
+    "name": "Hyacinth Hood",
+    "reportsTo": 32,
+    "phone": "(889) 345-2438",
+    "extension": 8564,
+    "hireDate": new Date("2014-02-03T20:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 1
+}, {
+    "id": 40,
+    "name": "Karleigh Garza",
+    "reportsTo": 52,
+    "phone": "(370) 983-8796",
+    "extension": 4044,
+    "hireDate": new Date("2014-03-10T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 1
+}, {
+    "id": 46,
+    "name": "Darrel Solis",
+    "reportsTo": 43,
+    "phone": "(327) 977-0216",
+    "extension": 7779,
+    "hireDate": new Date("2015-04-25T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 4
+}, {
+    "id": 76,
+    "name": "Cheyenne Olson",
+    "reportsTo": 63,
+    "phone": "(241) 645-0257",
+    "extension": 9181,
+    "hireDate": new Date("2015-05-19T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 5
+}, {
+    "id": 78,
+    "name": "Rinah Simon",
+    "reportsTo": 11,
+    "phone": "(285) 912-5271",
+    "extension": 7795,
+    "hireDate": new Date("2012-10-11T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 4
+}, {
+    "id": 79,
+    "name": "Duncan Mathews",
+    "reportsTo": 64,
+    "phone": "(790) 971-9709",
+    "extension": 4573,
+    "hireDate": new Date("2011-08-21T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "Developer",
+    "timeInPosition": 3
+}, {
+    "id": 82,
+    "name": "Yael Walters",
+    "reportsTo": 69,
+    "phone": "(311) 489-8191",
+    "extension": 6520,
+    "hireDate": new Date("2013-07-04T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 6
+}, {
+    "id": 75,
+    "name": "Eric Russell",
+    "reportsTo": 63,
+    "phone": "(516) 575-8505",
+    "extension": 2224,
+    "hireDate": new Date("2012-10-28T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 3
+}, {
+    "id": 55,
+    "name": "Summer Mosley",
+    "reportsTo": 46,
+    "phone": "(784) 962-2301",
+    "extension": 5492,
+    "hireDate": new Date("2010-03-02T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "QA",
+    "timeInPosition": 5
+}, {
+    "id": 59,
+    "name": "Keiko Espinoza",
+    "reportsTo": 46,
+    "phone": "(226) 600-5305",
+    "extension": 9363,
+    "hireDate": new Date("2011-09-18T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "QA",
+    "timeInPosition": 4
+}, {
+    "id": 72,
+    "name": "Stacey Lynn",
+    "reportsTo": 40,
+    "phone": "(140) 772-7509",
+    "extension": 8396,
+    "hireDate": new Date("2014-07-31T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "QA",
+    "timeInPosition": 1
+}, {
+    "id": 38,
+    "name": "Elton Tucker",
+    "reportsTo": 69,
+    "phone": "(988) 930-9331",
+    "extension": 9216,
+    "hireDate": new Date("2015-06-04T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 1
+}, {
+    "id": 71,
+    "name": "Flavia Short",
+    "reportsTo": 63,
+    "phone": "(370) 133-9238",
+    "extension": 6390,
+    "hireDate": new Date("2013-02-21T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 0
+}, {
+    "id": 61,
+    "name": "Candace Pickett",
+    "reportsTo": 46,
+    "phone": "(120) 117-7475",
+    "extension": 5178,
+    "hireDate": new Date("2010-05-06T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 0
+}, {
+    "id": 65,
+    "name": "Thomas Terry",
+    "reportsTo": 63,
+    "phone": "(764) 831-4248",
+    "extension": 3574,
+    "hireDate": new Date("2015-06-15T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "Support",
+    "timeInPosition": 2
+}, {
+    "id": 62,
+    "name": "Palmer Gregory",
+    "reportsTo": 64,
+    "phone": "(360) 430-2505",
+    "extension": 4337,
+    "hireDate": new Date("2014-08-30T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 4
+}, {
+    "id": 12,
+    "name": "Jamalia Wallace",
+    "reportsTo": 64,
+    "phone": "(611) 391-8016",
+    "extension": 1952,
+    "hireDate": new Date("2011-09-08T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 3
+}, {
+    "id": 66,
+    "name": "Gloria Freeman",
+    "reportsTo": 53,
+    "phone": "(344) 950-9168",
+    "extension": 4738,
+    "hireDate": new Date("2013-05-06T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 0
+} ];
diff --git a/vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-custom/main.js b/vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-custom/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-custom/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-custom/main.vue b/vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-custom/main.vue
new file mode 100644
index 00000000..b1eb9575
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-custom/main.vue
@@ -0,0 +1,63 @@
+<template>
+  <AutoComplete
+    :opened="true"
+    :data-items="groupedData"
+    :text-field="textField"
+    :group-field="'position'"
+    placeholder="Please select ..."
+    :style="{
+      width: '300px',
+    }"
+    :itemRender="'myCustomItem'"
+    :groupHeaderItemRender="'myGroupHeaderItemRender'"
+    :groupStickyHeaderItemRender="'myStickyHeaderRender'"
+  >
+    <template v-slot:myCustomItem="{ props }">
+      <ItemRender
+        :style="props.style"
+        :class="props.itemClass"
+        :data-item="props.dataItem"
+        :focused="props.focused"
+        :index="props.index"
+        :text-field="textField"
+        @click="(ev) => props.onClick(ev)"
+      />
+    </template>
+    <template v-slot:myGroupHeaderItemRender="{ props }">
+      <GroupHeaderItemRender
+        :id="props.id"
+        :group="props.group"
+        :index="props.index"
+      />
+    </template>
+    <template v-slot:myStickyHeaderRender="{ props }">
+      <StickyHeaderRender :group="props.group" />
+    </template>
+  </AutoComplete>
+</template>
+<script>
+import { AutoComplete } from "@progress/kendo-vue-dropdowns";
+import ItemRender from "./ItemRender.vue";
+import GroupHeaderItemRender from "./GroupHeaderItemRender.vue";
+import StickyHeaderRender from "./StickyHeaderRender.vue";
+import { groupBy } from "@progress/kendo-data-query";
+import { employees } from "./grouping-data.js";
+
+export default {
+  components: {
+    AutoComplete,
+    ItemRender,
+    GroupHeaderItemRender,
+    StickyHeaderRender,
+  },
+  data() {
+    return {
+      textField: "name",
+      groupedData: groupBy(employees, [{ field: "position" }]).reduce(
+        (res, group) => [...res, ...group.items],
+        []
+      ),
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-filtering/grouping-data.js b/vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-filtering/grouping-data.js
new file mode 100644
index 00000000..9a2711db
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-filtering/grouping-data.js
@@ -0,0 +1,181 @@
+export const employees = [ {
+    "id": 11,
+    "name": "Hyacinth Hood",
+    "reportsTo": 32,
+    "phone": "(889) 345-2438",
+    "extension": 8564,
+    "hireDate": new Date("2014-02-03T20:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 1
+}, {
+    "id": 40,
+    "name": "Karleigh Garza",
+    "reportsTo": 52,
+    "phone": "(370) 983-8796",
+    "extension": 4044,
+    "hireDate": new Date("2014-03-10T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 1
+}, {
+    "id": 46,
+    "name": "Darrel Solis",
+    "reportsTo": 43,
+    "phone": "(327) 977-0216",
+    "extension": 7779,
+    "hireDate": new Date("2015-04-25T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 4
+}, {
+    "id": 76,
+    "name": "Cheyenne Olson",
+    "reportsTo": 63,
+    "phone": "(241) 645-0257",
+    "extension": 9181,
+    "hireDate": new Date("2015-05-19T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 5
+}, {
+    "id": 78,
+    "name": "Rinah Simon",
+    "reportsTo": 11,
+    "phone": "(285) 912-5271",
+    "extension": 7795,
+    "hireDate": new Date("2012-10-11T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 4
+}, {
+    "id": 79,
+    "name": "Duncan Mathews",
+    "reportsTo": 64,
+    "phone": "(790) 971-9709",
+    "extension": 4573,
+    "hireDate": new Date("2011-08-21T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "Developer",
+    "timeInPosition": 3
+}, {
+    "id": 82,
+    "name": "Yael Walters",
+    "reportsTo": 69,
+    "phone": "(311) 489-8191",
+    "extension": 6520,
+    "hireDate": new Date("2013-07-04T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 6
+}, {
+    "id": 75,
+    "name": "Eric Russell",
+    "reportsTo": 63,
+    "phone": "(516) 575-8505",
+    "extension": 2224,
+    "hireDate": new Date("2012-10-28T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 3
+}, {
+    "id": 55,
+    "name": "Summer Mosley",
+    "reportsTo": 46,
+    "phone": "(784) 962-2301",
+    "extension": 5492,
+    "hireDate": new Date("2010-03-02T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "QA",
+    "timeInPosition": 5
+}, {
+    "id": 59,
+    "name": "Keiko Espinoza",
+    "reportsTo": 46,
+    "phone": "(226) 600-5305",
+    "extension": 9363,
+    "hireDate": new Date("2011-09-18T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "QA",
+    "timeInPosition": 4
+}, {
+    "id": 72,
+    "name": "Stacey Lynn",
+    "reportsTo": 40,
+    "phone": "(140) 772-7509",
+    "extension": 8396,
+    "hireDate": new Date("2014-07-31T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "QA",
+    "timeInPosition": 1
+}, {
+    "id": 38,
+    "name": "Elton Tucker",
+    "reportsTo": 69,
+    "phone": "(988) 930-9331",
+    "extension": 9216,
+    "hireDate": new Date("2015-06-04T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 1
+}, {
+    "id": 71,
+    "name": "Flavia Short",
+    "reportsTo": 63,
+    "phone": "(370) 133-9238",
+    "extension": 6390,
+    "hireDate": new Date("2013-02-21T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 0
+}, {
+    "id": 61,
+    "name": "Candace Pickett",
+    "reportsTo": 46,
+    "phone": "(120) 117-7475",
+    "extension": 5178,
+    "hireDate": new Date("2010-05-06T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 0
+}, {
+    "id": 65,
+    "name": "Thomas Terry",
+    "reportsTo": 63,
+    "phone": "(764) 831-4248",
+    "extension": 3574,
+    "hireDate": new Date("2015-06-15T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "Support",
+    "timeInPosition": 2
+}, {
+    "id": 62,
+    "name": "Palmer Gregory",
+    "reportsTo": 64,
+    "phone": "(360) 430-2505",
+    "extension": 4337,
+    "hireDate": new Date("2014-08-30T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 4
+}, {
+    "id": 12,
+    "name": "Jamalia Wallace",
+    "reportsTo": 64,
+    "phone": "(611) 391-8016",
+    "extension": 1952,
+    "hireDate": new Date("2011-09-08T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 3
+}, {
+    "id": 66,
+    "name": "Gloria Freeman",
+    "reportsTo": 53,
+    "phone": "(344) 950-9168",
+    "extension": 4738,
+    "hireDate": new Date("2013-05-06T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 0
+} ];
diff --git a/vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-filtering/main.js b/vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-filtering/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-filtering/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-filtering/main.vue b/vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-filtering/main.vue
new file mode 100644
index 00000000..d7a7cc09
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/grouping/grouping-filtering/main.vue
@@ -0,0 +1,45 @@
+<template>
+  <AutoComplete
+    :data-items="groupedData"
+    :text-field="'name'"
+    :placeholder="'Please select ...'"
+    :group-field="'position'"
+    :style="{
+      width: '300px',
+    }"
+    @change="onFilterChange"
+  />
+</template>
+<script>
+import { AutoComplete } from "@progress/kendo-vue-dropdowns";
+import { groupBy, filterBy } from '@progress/kendo-data-query';
+import { employees } from "./grouping-data.js";
+
+export default {
+  components: {
+    AutoComplete,
+  },
+  data() {
+    return {
+      groupedData: groupBy(employees, [{ field: "position" }]).reduce(
+        (res, group) => [...res, ...group.items],
+        []
+      ),
+    };
+  },
+  methods: {
+    onFilterChange(event) {
+      const filter = {
+        field: "name",
+        ignoreCase: true,
+        operator: "contains",
+        value: event.value,
+      };
+      const data = groupBy(filterBy(employees, filter), [
+        { field: "position" },
+      ]).reduce((res, group) => [...res, ...group.items], []);
+      this.groupedData = data;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/header-footer/FooterRender.vue b/vue-options-api-demos/dropdowns/autocomplete/header-footer/FooterRender.vue
new file mode 100644
index 00000000..328e96da
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/header-footer/FooterRender.vue
@@ -0,0 +1,12 @@
+<template>
+<span>
+    footer
+</span>
+</template>
+<script>
+export default {
+    props: {
+        currentValue: String
+    }
+}
+</script>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/header-footer/HeaderRender.vue b/vue-options-api-demos/dropdowns/autocomplete/header-footer/HeaderRender.vue
new file mode 100644
index 00000000..dd7e5d25
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/header-footer/HeaderRender.vue
@@ -0,0 +1,12 @@
+<template>
+<span>
+    header
+</span>
+</template>
+<script>
+export default {
+    props: {
+        currentValue: String
+    }
+}
+</script>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/header-footer/countries.js b/vue-options-api-demos/dropdowns/autocomplete/header-footer/countries.js
new file mode 100644
index 00000000..45b6cb20
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/header-footer/countries.js
@@ -0,0 +1,52 @@
+export default [
+    "Albania",
+    "Andorra",
+    "Armenia",
+    "Austria",
+    "Azerbaijan",
+    "Belarus",
+    "Belgium",
+    "Bosnia & Herzegovina",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czech Republic",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Georgia",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Iceland",
+    "Ireland",
+    "Italy",
+    "Kosovo",
+    "Latvia",
+    "Liechtenstein",
+    "Lithuania",
+    "Luxembourg",
+    "Macedonia",
+    "Malta",
+    "Moldova",
+    "Monaco",
+    "Montenegro",
+    "Netherlands",
+    "Norway",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Russia",
+    "San Marino",
+    "Serbia",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden",
+    "Switzerland",
+    "Turkey",
+    "Ukraine",
+    "United Kingdom",
+    "Vatican City"
+];
diff --git a/vue-options-api-demos/dropdowns/autocomplete/header-footer/main.js b/vue-options-api-demos/dropdowns/autocomplete/header-footer/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/header-footer/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/autocomplete/header-footer/main.vue b/vue-options-api-demos/dropdowns/autocomplete/header-footer/main.vue
new file mode 100644
index 00000000..383f5c8e
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/header-footer/main.vue
@@ -0,0 +1,39 @@
+<template>
+    <div>
+         <p>Type the name of a European country:</p>
+        <autocomplete :style="{ width: '230px' }"
+            :data-items="countries"
+            :header="header"
+            :footer="footer"
+        >
+        <template v-slot:myHeader="{props}">
+            <header1  />
+        </template>
+         <template v-slot:myFooter="{props}">
+            <footer1 />
+        </template>
+        </autocomplete>
+    </div>
+</template>
+<script>
+import countries from './countries';
+import { AutoComplete } from '@progress/kendo-vue-dropdowns';
+import HeaderRender from './HeaderRender.vue';
+import FooterRender from './FooterRender.vue';
+
+export default {
+    components: {
+        'autocomplete': AutoComplete,
+        'header1': HeaderRender,
+        'footer1': FooterRender
+    },
+    data: function () {
+        return {
+            header: 'myHeader',
+            footer: 'myFooter',
+            countries: countries
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/item-render/ItemRender.vue b/vue-options-api-demos/dropdowns/autocomplete/item-render/ItemRender.vue
new file mode 100644
index 00000000..aea48b72
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/item-render/ItemRender.vue
@@ -0,0 +1,40 @@
+<template>
+  <li class="k-item" @click="handleClick">
+    <span
+      :style="{ color: '#00F' }"
+      role="option"
+      :aria-selected="focused"
+      :class="itemClass"
+    >
+      {{ dataItem }} {{ index }}
+    </span>
+  </li>
+</template>
+<script>
+export default {
+  emits: {
+    click: null
+  },
+  props: {
+    id: String,
+    index: Number,
+    dataItem: [Object, String, Number],
+    textField: String,
+    focused: Boolean,
+    selected: Boolean
+  },
+  computed: {
+    itemClass() {
+      return {
+        "k-item": true,
+        "k-state-focused": this.$props.focused
+      };
+    }
+  },
+  methods: {
+    handleClick: function(e) {
+      this.$emit("click", e);
+    }
+  }
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/item-render/countries.js b/vue-options-api-demos/dropdowns/autocomplete/item-render/countries.js
new file mode 100644
index 00000000..45b6cb20
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/item-render/countries.js
@@ -0,0 +1,52 @@
+export default [
+    "Albania",
+    "Andorra",
+    "Armenia",
+    "Austria",
+    "Azerbaijan",
+    "Belarus",
+    "Belgium",
+    "Bosnia & Herzegovina",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czech Republic",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Georgia",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Iceland",
+    "Ireland",
+    "Italy",
+    "Kosovo",
+    "Latvia",
+    "Liechtenstein",
+    "Lithuania",
+    "Luxembourg",
+    "Macedonia",
+    "Malta",
+    "Moldova",
+    "Monaco",
+    "Montenegro",
+    "Netherlands",
+    "Norway",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Russia",
+    "San Marino",
+    "Serbia",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden",
+    "Switzerland",
+    "Turkey",
+    "Ukraine",
+    "United Kingdom",
+    "Vatican City"
+];
diff --git a/vue-options-api-demos/dropdowns/autocomplete/item-render/main.js b/vue-options-api-demos/dropdowns/autocomplete/item-render/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/item-render/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/autocomplete/item-render/main.vue b/vue-options-api-demos/dropdowns/autocomplete/item-render/main.vue
new file mode 100644
index 00000000..f3880b12
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/item-render/main.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <p>Type the name of a European country:</p>
+    <autocomplete :style="{ width: '230px' }"
+      :data-items="countries"
+      :item-render="itemRender"
+    >
+      <template v-slot:myTemplate="{ props }">
+        <custom
+          :style="props.style"
+          :class="props.itemClass"
+          :data-item="props.dataItem"
+          :focused="props.focused"
+          :index="props.index"
+          @click="ev => props.onClick(ev)"
+        />
+      </template>
+    </autocomplete>
+  </div>
+</template>
+<script>
+import countries from "./countries";
+import { AutoComplete } from "@progress/kendo-vue-dropdowns";
+import ItemRender from "./ItemRender.vue";
+
+export default {
+  components: {
+    autocomplete: AutoComplete,
+    custom: ItemRender
+  },
+  data: function() {
+    return {
+      itemRender: "myTemplate",
+      countries: countries
+    };
+  }
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/keyboard-navigation/main.js b/vue-options-api-demos/dropdowns/autocomplete/keyboard-navigation/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/keyboard-navigation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/autocomplete/keyboard-navigation/main.vue b/vue-options-api-demos/dropdowns/autocomplete/keyboard-navigation/main.vue
new file mode 100644
index 00000000..42c05e1f
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/keyboard-navigation/main.vue
@@ -0,0 +1,32 @@
+<template>
+ <div class="example-wrapper">
+            <p>Type the name of a European country:</p>
+            <autocomplete :style="{ width: '230px' }" 
+                :data-items="countries" 
+                :value="value"
+                @change="onChange"
+                :placeholder="'e.g. Andorra'" ></autocomplete>
+    </div>
+</template>
+<script>
+import { AutoComplete } from '@progress/kendo-vue-dropdowns';
+
+
+export default {
+    components: {
+        'autocomplete': AutoComplete
+    },
+    data: function(){
+        return {
+            countries: [ "Albania", "Andorra", "Armenia", "Austria", "Azerbaijan"] ,
+            value: ''
+        }
+    },
+    methods: {
+        onChange (event) {
+            this.value = event.target.value;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/nodata-render/NoDataRender.vue b/vue-options-api-demos/dropdowns/autocomplete/nodata-render/NoDataRender.vue
new file mode 100644
index 00000000..9c42c161
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/nodata-render/NoDataRender.vue
@@ -0,0 +1,12 @@
+<template>
+<h4 :style="{ fontSize: '1em' }">
+            <span class="k-icon k-i-warning" :style="{ fontSize: '2.5em' }" />
+            <br /><br />
+            no data here
+        </h4>
+</template>
+<script>
+export default {
+    
+}
+</script>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/nodata-render/main.js b/vue-options-api-demos/dropdowns/autocomplete/nodata-render/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/nodata-render/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/autocomplete/nodata-render/main.vue b/vue-options-api-demos/dropdowns/autocomplete/nodata-render/main.vue
new file mode 100644
index 00000000..6526c89b
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/nodata-render/main.vue
@@ -0,0 +1,30 @@
+<template>
+<div>
+         <p>Type the name of a European country:</p>
+        <autocomplete :style="{ width: '230px' }"
+            :data-items="[]"
+            :list-no-data-render="listNoDataRender"
+        >
+        <template v-slot:myTemplate="{props}">
+            <custom />
+        </template>
+        </autocomplete>
+    </div>
+</template>
+<script>
+import { AutoComplete } from '@progress/kendo-vue-dropdowns';
+import NoDataRender from './NoDataRender.vue';
+
+export default {
+    components: {
+        'autocomplete': AutoComplete,
+        'custom': NoDataRender
+    },
+    data: function () {
+        return {
+            listNoDataRender: 'myTemplate'
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/autocomplete/suggest/countries.js b/vue-options-api-demos/dropdowns/autocomplete/suggest/countries.js
new file mode 100644
index 00000000..45b6cb20
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/suggest/countries.js
@@ -0,0 +1,52 @@
+export default [
+    "Albania",
+    "Andorra",
+    "Armenia",
+    "Austria",
+    "Azerbaijan",
+    "Belarus",
+    "Belgium",
+    "Bosnia & Herzegovina",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czech Republic",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Georgia",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Iceland",
+    "Ireland",
+    "Italy",
+    "Kosovo",
+    "Latvia",
+    "Liechtenstein",
+    "Lithuania",
+    "Luxembourg",
+    "Macedonia",
+    "Malta",
+    "Moldova",
+    "Monaco",
+    "Montenegro",
+    "Netherlands",
+    "Norway",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Russia",
+    "San Marino",
+    "Serbia",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden",
+    "Switzerland",
+    "Turkey",
+    "Ukraine",
+    "United Kingdom",
+    "Vatican City"
+];
diff --git a/vue-options-api-demos/dropdowns/autocomplete/suggest/main.js b/vue-options-api-demos/dropdowns/autocomplete/suggest/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/suggest/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/autocomplete/suggest/main.vue b/vue-options-api-demos/dropdowns/autocomplete/suggest/main.vue
new file mode 100644
index 00000000..92ea9322
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/autocomplete/suggest/main.vue
@@ -0,0 +1,46 @@
+<template>
+    <div class="example-wrapper">
+        <div class="col-xs-12 col-sm-6 example-col">
+            <p>AutoComplete in Uncontrolled Mode</p>
+            <autocomplete :style="{ width: '230px' }"
+                :data-items="countries"
+                :suggest="true"
+                :placeholder="'e.g. Austria'"
+            ></autocomplete>
+        </div>
+        <div class="col-xs-12 col-sm-6 example-col">
+            <p>AutoComplete in Controlled Mode</p>
+            <autocomplete :style="{ width: '230px' }"
+                :data-items="countries"
+                :suggest="suggest"
+                :placeholder="'e.g. Austria'"
+                :value="value"
+                @change="handleChange"
+            ></autocomplete>
+        </div>
+    </div>
+</template>
+<script>
+import countries from './countries';
+import { AutoComplete } from '@progress/kendo-vue-dropdowns';
+
+export default {
+    components: {
+        'autocomplete': AutoComplete
+    },
+    data: function(){
+        return {
+            countries: countries,
+            value: '', 
+            suggest: ''
+        }
+    },
+    methods:{
+        handleChange (event) {
+            this.value = event.target.value;
+            this.suggest = event.suggestion ? event.suggestion.value : '';
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/adaptive-rendering-grouping/grouping-data.js b/vue-options-api-demos/dropdowns/combobox/adaptive-rendering-grouping/grouping-data.js
new file mode 100644
index 00000000..9f42ec6e
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/adaptive-rendering-grouping/grouping-data.js
@@ -0,0 +1,200 @@
+export const employees = [
+    {
+        id: 11,
+        name: "Hyacinth Hood",
+        reportsTo: 32,
+        phone: "(889) 345-2438",
+        extension: 8564,
+        hireDate: new Date("2014-02-03T20:00:00.000Z"),
+        fullTime: true,
+        position: "Team Lead",
+        timeInPosition: 1,
+    },
+    {
+        id: 40,
+        name: "Karleigh Garza",
+        reportsTo: 52,
+        phone: "(370) 983-8796",
+        extension: 4044,
+        hireDate: new Date("2014-03-10T00:00:00.000Z"),
+        fullTime: true,
+        position: "Team Lead",
+        timeInPosition: 1,
+    },
+    {
+        id: 46,
+        name: "Darrel Solis",
+        reportsTo: 43,
+        phone: "(327) 977-0216",
+        extension: 7779,
+        hireDate: new Date("2015-04-25T00:00:00.000Z"),
+        fullTime: true,
+        position: "Team Lead",
+        timeInPosition: 4,
+    },
+    {
+        id: 76,
+        name: "Cheyenne Olson",
+        reportsTo: 63,
+        phone: "(241) 645-0257",
+        extension: 9181,
+        hireDate: new Date("2015-05-19T00:00:00.000Z"),
+        fullTime: true,
+        position: "Developer",
+        timeInPosition: 5,
+    },
+    {
+        id: 78,
+        name: "Rinah Simon",
+        reportsTo: 11,
+        phone: "(285) 912-5271",
+        extension: 7795,
+        hireDate: new Date("2012-10-11T00:00:00.000Z"),
+        fullTime: true,
+        position: "Developer",
+        timeInPosition: 4,
+    },
+    {
+        id: 79,
+        name: "Duncan Mathews",
+        reportsTo: 64,
+        phone: "(790) 971-9709",
+        extension: 4573,
+        hireDate: new Date("2011-08-21T00:00:00.000Z"),
+        fullTime: false,
+        position: "Developer",
+        timeInPosition: 3,
+    },
+    {
+        id: 82,
+        name: "Yael Walters",
+        reportsTo: 69,
+        phone: "(311) 489-8191",
+        extension: 6520,
+        hireDate: new Date("2013-07-04T00:00:00.000Z"),
+        fullTime: true,
+        position: "Developer",
+        timeInPosition: 6,
+    },
+    {
+        id: 75,
+        name: "Eric Russell",
+        reportsTo: 63,
+        phone: "(516) 575-8505",
+        extension: 2224,
+        hireDate: new Date("2012-10-28T00:00:00.000Z"),
+        fullTime: true,
+        position: "Developer",
+        timeInPosition: 3,
+    },
+    {
+        id: 55,
+        name: "Summer Mosley",
+        reportsTo: 46,
+        phone: "(784) 962-2301",
+        extension: 5492,
+        hireDate: new Date("2010-03-02T00:00:00.000Z"),
+        fullTime: true,
+        position: "QA",
+        timeInPosition: 5,
+    },
+    {
+        id: 59,
+        name: "Keiko Espinoza",
+        reportsTo: 46,
+        phone: "(226) 600-5305",
+        extension: 9363,
+        hireDate: new Date("2011-09-18T00:00:00.000Z"),
+        fullTime: true,
+        position: "QA",
+        timeInPosition: 4,
+    },
+    {
+        id: 72,
+        name: "Stacey Lynn",
+        reportsTo: 40,
+        phone: "(140) 772-7509",
+        extension: 8396,
+        hireDate: new Date("2014-07-31T00:00:00.000Z"),
+        fullTime: false,
+        position: "QA",
+        timeInPosition: 1,
+    },
+    {
+        id: 38,
+        name: "Elton Tucker",
+        reportsTo: 69,
+        phone: "(988) 930-9331",
+        extension: 9216,
+        hireDate: new Date("2015-06-04T00:00:00.000Z"),
+        fullTime: true,
+        position: "Support",
+        timeInPosition: 1,
+    },
+    {
+        id: 71,
+        name: "Flavia Short",
+        reportsTo: 63,
+        phone: "(370) 133-9238",
+        extension: 6390,
+        hireDate: new Date("2013-02-21T00:00:00.000Z"),
+        fullTime: true,
+        position: "Support",
+        timeInPosition: 0,
+    },
+    {
+        id: 61,
+        name: "Candace Pickett",
+        reportsTo: 46,
+        phone: "(120) 117-7475",
+        extension: 5178,
+        hireDate: new Date("2010-05-06T00:00:00.000Z"),
+        fullTime: true,
+        position: "Support",
+        timeInPosition: 0,
+    },
+    {
+        id: 65,
+        name: "Thomas Terry",
+        reportsTo: 63,
+        phone: "(764) 831-4248",
+        extension: 3574,
+        hireDate: new Date("2015-06-15T00:00:00.000Z"),
+        fullTime: false,
+        position: "Support",
+        timeInPosition: 2,
+    },
+    {
+        id: 62,
+        name: "Palmer Gregory",
+        reportsTo: 64,
+        phone: "(360) 430-2505",
+        extension: 4337,
+        hireDate: new Date("2014-08-30T00:00:00.000Z"),
+        fullTime: true,
+        position: "Designer",
+        timeInPosition: 4,
+    },
+    {
+        id: 12,
+        name: "Jamalia Wallace",
+        reportsTo: 64,
+        phone: "(611) 391-8016",
+        extension: 1952,
+        hireDate: new Date("2011-09-08T00:00:00.000Z"),
+        fullTime: true,
+        position: "Designer",
+        timeInPosition: 3,
+    },
+    {
+        id: 66,
+        name: "Gloria Freeman",
+        reportsTo: 53,
+        phone: "(344) 950-9168",
+        extension: 4738,
+        hireDate: new Date("2013-05-06T00:00:00.000Z"),
+        fullTime: true,
+        position: "Designer",
+        timeInPosition: 0,
+    },
+];
diff --git a/vue-options-api-demos/dropdowns/combobox/adaptive-rendering-grouping/main.js b/vue-options-api-demos/dropdowns/combobox/adaptive-rendering-grouping/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/adaptive-rendering-grouping/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/adaptive-rendering-grouping/main.vue b/vue-options-api-demos/dropdowns/combobox/adaptive-rendering-grouping/main.vue
new file mode 100644
index 00000000..b323d1c8
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/adaptive-rendering-grouping/main.vue
@@ -0,0 +1,28 @@
+<template>
+  <ComboBox
+    :data-items="groupedData"
+    :text-field="'name'"
+    :group-field="'position'"
+    :style="{
+      width: '300px',
+    }"
+    :adaptive="true"
+    :adaptive-title="'Adaptive Grouping'"
+  />
+</template>
+<script>
+import { ComboBox } from "@progress/kendo-vue-dropdowns";
+import { groupBy } from '@progress/kendo-data-query';
+import { employees } from './grouping-data.js';
+
+export default {
+  components: {
+    ComboBox
+},
+  data() {
+    return {
+      groupedData: groupBy(employees, [{ field: 'position' }]).reduce((res, group) =>  [...res, ...group.items], [])
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/dropdowns/combobox/adaptive-rendering/main.js b/vue-options-api-demos/dropdowns/combobox/adaptive-rendering/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/adaptive-rendering/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/adaptive-rendering/main.vue b/vue-options-api-demos/dropdowns/combobox/adaptive-rendering/main.vue
new file mode 100644
index 00000000..a730991d
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/adaptive-rendering/main.vue
@@ -0,0 +1,56 @@
+<template>
+    <div>
+      <div>T-shirt size:</div>
+      <ComboBox
+        :data-items="data"
+        :text-field="'text'"
+        :data-item-key="'id'"
+        :filterable="true"
+        @filterchange="handleFilterchange"
+        :adaptive="true"
+        :adaptive-title="'Choose size'"
+        :style="{
+          width: '300px'
+        }"
+      />
+    </div>
+</template>
+<script>
+import { ComboBox } from "@progress/kendo-vue-dropdowns";
+import { filterBy } from '@progress/kendo-data-query';
+
+const allData = [
+  {
+    id: 1,
+    text: "Small",
+  },
+  {
+    id: 2,
+    text: "Medium",
+  },
+  {
+    id: 3,
+    text: "Large",
+  },
+]
+
+export default {
+  components: {
+    ComboBox
+  },
+  data: function () {
+    return {
+      data: allData,
+    };
+  },
+  methods: {
+    filterData(filter) {
+      const filteredData = allData.slice();
+      return filterBy(filteredData, filter);
+    },
+    handleFilterchange(event) {
+      this.data = this.filterData(event.filter)
+    }
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/appearance/configurator/DropDownStyleConfigurator.vue b/vue-options-api-demos/dropdowns/combobox/appearance/configurator/DropDownStyleConfigurator.vue
new file mode 100644
index 00000000..c1b36044
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/appearance/configurator/DropDownStyleConfigurator.vue
@@ -0,0 +1,105 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Fill Mode
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="fillModes"
+              :value="fillMode"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleFillModeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+    fillMode: String,
+    rounded: String,
+  },
+  emits: [
+    "sizechange",
+    "fillmodechange",
+    "roundedchange",
+  ],
+  data() {
+    return {
+      sizes: ["small", "medium", "large"],
+      fillModes: ["solid", "outline", "flat"],
+      roundedOptions: ["small", "medium", "large", "full"],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleFillModeChange(event) {
+      this.$emit("fillmodechange", event);
+    },
+    handleRoundedChange(event) {
+      this.$emit("roundedchange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/appearance/configurator/main.js b/vue-options-api-demos/dropdowns/combobox/appearance/configurator/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/appearance/configurator/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/appearance/configurator/main.vue b/vue-options-api-demos/dropdowns/combobox/appearance/configurator/main.vue
new file mode 100644
index 00000000..b0e1f160
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/appearance/configurator/main.vue
@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <DropDownStyleConfigurator
+      :size="size"
+      @sizechange="setSize"
+      :fill-mode="fillMode"
+      @fillmodechange="setFillMode"
+      :rounded="rounded"
+      @roundedchange="setRounded"
+    />
+    <ComboBox
+      :style="{ width: '230px'}"
+      :size="size"
+      :fill-mode="fillMode"
+      :rounded="rounded"
+      :data-items="[
+        'X-Small',
+        'Small',
+        'Medium',
+        'Large',
+        'X-Large',
+        '2X-Large',
+      ]"
+    />
+  </div>
+</template>
+<script>
+import DropDownStyleConfigurator from "./DropDownStyleConfigurator.vue";
+import { ComboBox } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    DropDownStyleConfigurator,
+    ComboBox,
+  },
+  data() {
+    return {
+      size: "medium",
+      rounded: "medium",
+      fillMode: "solid",
+    };
+  },
+  methods: {
+    setRounded(event) {
+      this.rounded = event.value;
+    },
+    setSize(event) {
+      this.size = event.value;
+    },
+    setFillMode(event) {
+      this.fillMode = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/appearance/fill-mode/main.js b/vue-options-api-demos/dropdowns/combobox/appearance/fill-mode/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/appearance/fill-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/appearance/fill-mode/main.vue b/vue-options-api-demos/dropdowns/combobox/appearance/fill-mode/main.vue
new file mode 100644
index 00000000..2f44c427
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/appearance/fill-mode/main.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="example-config">
+    <div class="demo">
+      <span class="wrapper">
+        <span>Flat: </span>
+        <ComboBox
+          :style="{ width: '170px' }"
+          :fill-mode="'flat'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Solid: </span>
+        <ComboBox
+          :style="{ width: '170px' }"
+          :fill-mode="'solid'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Outline: </span>
+        <ComboBox
+          :style="{ width: '170px' }"
+          :fill-mode="'outline'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Custom fill mode:</span>
+        <ComboBox
+          :class="'custom-combobox'"
+          :fill-mode="null"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { ComboBox } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  components: {
+    ComboBox,
+  },
+};
+</script>
+
+<style>
+.custom-combobox {
+  width: 200px;
+  background-color: #00aead;
+  border: 2px solid #bfd843;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/dropdowns/combobox/appearance/rounded/main.js b/vue-options-api-demos/dropdowns/combobox/appearance/rounded/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/appearance/rounded/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/appearance/rounded/main.vue b/vue-options-api-demos/dropdowns/combobox/appearance/rounded/main.vue
new file mode 100644
index 00000000..692dd2ff
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/appearance/rounded/main.vue
@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Small roundness: </span>
+        <ComboBox
+          :style="{ width: '170px' }"
+          :rounded="'small'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Medium roundness: </span>
+        <ComboBox
+          :style="{ width: '170px' }"
+          :rounded="'medium'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Large roundness: </span>
+        <ComboBox
+          :style="{ width: '170px' }"
+          :rounded="'large'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Full roundness: </span>
+        <ComboBox
+          :style="{ width: '170px' }"
+          :rounded="'full'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Custom roundness:</span>
+        <ComboBox
+          :class="'custom-combobox'"
+          :rounded="null"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { ComboBox } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  components: {
+    ComboBox,
+  },
+};
+</script>
+
+<style>
+.custom-combobox {
+  width: 200px;
+  border-bottom-right-radius: 15px;
+  border-top-left-radius: 15px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/dropdowns/combobox/appearance/size/main.js b/vue-options-api-demos/dropdowns/combobox/appearance/size/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/appearance/size/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/appearance/size/main.vue b/vue-options-api-demos/dropdowns/combobox/appearance/size/main.vue
new file mode 100644
index 00000000..e063b3a2
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/appearance/size/main.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Small: </span>
+        <ComboBox
+          :style="{ width: '170px' }"
+          :size="'small'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Medium: </span>
+        <ComboBox
+          :style="{ width: '170px' }"
+          :size="'medium'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Large: </span>
+        <ComboBox
+          :style="{ width: '170px' }"
+          :size="'large'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+    <span class="wrapper">
+      <span>Custom size:</span>
+      <ComboBox
+        :class="'custom-combobox'"
+        :size="null"
+        :data-items="[
+          'X-Small',
+          'Small',
+          'Medium',
+          'Large',
+          'X-Large',
+          '2X-Large',
+        ]"
+      />
+    </span>
+  </div>
+</template>
+<script>
+import { ComboBox } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  components: {
+    ComboBox,
+  },
+};
+</script>
+
+<style>
+.custom-combobox {
+  height: 40px;
+  width: 200px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/dropdowns/combobox/basic/main.js b/vue-options-api-demos/dropdowns/combobox/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/basic/main.vue b/vue-options-api-demos/dropdowns/combobox/basic/main.vue
new file mode 100644
index 00000000..f0756813
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/basic/main.vue
@@ -0,0 +1,32 @@
+<template>
+ <div class="example-wrapper">
+        <div class="example-config">
+            <input id="ac" type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md"
+            v-model="allowCustom" />
+            <label class="k-checkbox-label" for="ac">Allow custom values</label>
+        </div>
+        <div>
+            <div>Favorite sport:</div>
+             <combobox
+          :style="{ width: '230px' }" :data-items="sports" :allow-custom="allowCustom" />
+        </div>
+    </div>
+</template>
+<script>
+import { ComboBox } from '@progress/kendo-vue-dropdowns';
+
+export default {
+    components: {
+        'combobox': ComboBox
+    },
+    data: function(){
+        return {
+            sports: ["Baseball", "Basketball", "Cricket", 
+            "Field Hockey", "Football", "Table Tennis", "Tennis", 
+            "Volleyball" ],
+            allowCustom: true
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/bindings/arrays/main.js b/vue-options-api-demos/dropdowns/combobox/bindings/arrays/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/bindings/arrays/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/bindings/arrays/main.vue b/vue-options-api-demos/dropdowns/combobox/bindings/arrays/main.vue
new file mode 100644
index 00000000..34ca393e
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/bindings/arrays/main.vue
@@ -0,0 +1,32 @@
+<template>
+ <div class="example-wrapper">
+            <p>Type the name of a European country:</p>
+             <combobox
+          :style="{ width: '230px' }" 
+                :data-items="countries" 
+                :value="value"
+                @change="onChange"
+                :placeholder="'e.g. Andorra'" ></combobox>
+    </div>
+</template>
+<script>
+import { ComboBox } from '@progress/kendo-vue-dropdowns';
+
+export default {
+    components: {
+        'combobox': ComboBox
+    },
+    data: function(){
+        return {
+            countries: [ "Albania", "Andorra", "Armenia", "Austria", "Azerbaijan"] ,
+            value: ''
+        }
+    },
+    methods: {
+        onChange (event) {
+            this.value = event.target.value;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/bindings/datasets/main.js b/vue-options-api-demos/dropdowns/combobox/bindings/datasets/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/bindings/datasets/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/bindings/datasets/main.vue b/vue-options-api-demos/dropdowns/combobox/bindings/datasets/main.vue
new file mode 100644
index 00000000..c0202a78
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/bindings/datasets/main.vue
@@ -0,0 +1,38 @@
+<template>
+   <div class="example-wrapper">
+            <p>Type the name of a European country:</p>
+             <combobox
+          :style="{ width: '230px' }" 
+                :data-items="countries" 
+                :value="value"
+                :text-field="'text'"
+                @change="onChange"></combobox>
+    </div>
+</template>
+<script>
+import { ComboBox } from '@progress/kendo-vue-dropdowns';
+
+export default {
+    components: {
+        'combobox': ComboBox
+    },
+    data: function(){
+        return {
+            countries: [
+                { text: "Albania", id: "Alb" },
+                { text: "Andorra", id: "And" },
+                { text: "Armenia", id: "Arm" },
+                { text: "Austria", id: "Aus" },
+                { text: "Azerbaijan", id: "Aze" }
+            ],
+            value: ''
+        }
+    },
+    methods: {
+        onChange (event) {
+            this.value = event.target.value;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/bindings/value-primitive/main.js b/vue-options-api-demos/dropdowns/combobox/bindings/value-primitive/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/bindings/value-primitive/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/bindings/value-primitive/main.vue b/vue-options-api-demos/dropdowns/combobox/bindings/value-primitive/main.vue
new file mode 100644
index 00000000..2b52dc76
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/bindings/value-primitive/main.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <div class="example-config">Selected Value: {{ value }}</div>
+    <div :style="{ display: 'inline-block', 'padding-right': '20px' }">
+      value and change
+      <br />
+      <ComboBox
+        :style="{ width: '230px' }"
+        :data-items="sports"
+        :text-field="'text'"
+        :data-item-key="'id'"
+        :value-field="'id'"
+        :value-primitive="true"
+        :value="value"
+        @change="handleChange"
+      >
+      </ComboBox>
+    </div>
+    <div :style="{ display: 'inline-block' }">
+      v-model
+      <br />
+      <ComboBox
+        :style="{ width: '230px' }"
+        :data-items="sports"
+        :text-field="'text'"
+        :data-item-key="'id'"
+        :value-field="'id'"
+        :value-primitive="true"
+        v-model="value"
+      >
+      </ComboBox>
+    </div>
+  </div>
+</template>
+<script>
+import { ComboBox } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  components: {
+    ComboBox,
+  },
+  data: function () {
+    return {
+      // Since the reference of the initial value is not from the 'sports' collection,
+      // 'dataItemKey' have to be set.
+      value: 2,
+      sports: [
+        { text: 'Basketball', id: 1 },
+        { text: 'Football', id: 2 },
+        { text: 'Tennis', id: 3 },
+        { text: 'Volleyball', id: 4 },
+      ],
+    };
+  },
+  methods: {
+    handleChange(event) {
+      this.value = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/bindings/value/main.js b/vue-options-api-demos/dropdowns/combobox/bindings/value/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/bindings/value/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/bindings/value/main.vue b/vue-options-api-demos/dropdowns/combobox/bindings/value/main.vue
new file mode 100644
index 00000000..aa3beb01
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/bindings/value/main.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="example-wrapper">
+    <p>Type the name of a European country:</p>
+    <ComboBox
+      :style="{ width: '230px' }"
+      :data-items="countries"
+      :value="value"
+      @change="onChange"
+      :placeholder="'e.g. Andorra'"
+    ></ComboBox>
+    <br />
+    <br />
+    Selected country: {{ value }}
+  </div>
+</template>
+<script>
+import { ComboBox } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  components: {
+    ComboBox,
+  },
+  data: function () {
+    return {
+      countries: ['Albania', 'Andorra', 'Armenia', 'Austria', 'Azerbaijan'],
+      value: '',
+    };
+  },
+  methods: {
+    onChange(event) {
+      this.value = event.target.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/cascading/data.js b/vue-options-api-demos/dropdowns/combobox/cascading/data.js
new file mode 100644
index 00000000..206f3369
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/cascading/data.js
@@ -0,0 +1,31 @@
+const dataCategories = [
+    { categoryName: "Beverages", categoryId: 1 },
+    { categoryName: "Condiments", categoryId: 2 },
+    { categoryName: "Seafood", categoryId: 3 }
+];
+
+const dataProducts = [
+    { productName: "Chai", productId: 1, categoryId: 1 },
+    { productName: "Chang", productId: 2, categoryId: 1 },
+    { productName: "Aniseed Syrup", productId: 3, categoryId: 2 },
+    { productName: "Genen Shouyu", productId: 4, categoryId: 2 },
+    { productName: "Ikura", productId: 5, categoryId: 3 },
+    { productName: "Konbu", productId: 6, categoryId: 3 }
+];
+
+const dataOrders = [
+    { orderName: "Cunewalde", orderId: 1, productId: 1 },
+    { orderName: "Albuquerque", orderId: 2, productId: 1 },
+    { orderName: "Geneva", orderId: 3, productId: 2 },
+    { orderName: "Graz", orderId: 4, productId: 2 },
+    { orderName: "London", orderId: 5, productId: 3 },
+    { orderName: "I. de Margarita", orderId: 6, productId: 3 },
+    { orderName: "Barquisimeto", orderId: 7, productId: 4 },
+    { orderName: "Brandenburg", orderId: 8, productId: 4 },
+    { orderName: "Cunewalde", orderId: 9, productId: 5 },
+    { orderName: "Mexico D.F.", orderId: 10, productId: 5 },
+    { orderName: "Mexico D.F.", orderId: 11, productId: 6 },
+    { orderName: "Rio de Janeiro", orderId: 12, productId: 6 }
+];
+
+export { dataCategories, dataProducts, dataOrders };
diff --git a/vue-options-api-demos/dropdowns/combobox/cascading/main.js b/vue-options-api-demos/dropdowns/combobox/cascading/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/cascading/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/cascading/main.vue b/vue-options-api-demos/dropdowns/combobox/cascading/main.vue
new file mode 100644
index 00000000..416ba20a
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/cascading/main.vue
@@ -0,0 +1,85 @@
+<template>
+   <div>
+        <div :style="{ display: 'inline-block' }">
+            Categories
+            <br />
+             <combobox
+          :style="{ width: '230px' }"
+                :data-items="categories"
+                :text-field="'categoryName'"
+                @change="categoryChange"
+                :placeholder="'Select Category ...'"
+                :value="category"
+            ></combobox>
+        </div>
+        <div :style="{ display: 'inline-block', marginLeft: '30px' }">
+            Products
+            <br />
+             <combobox
+          :style="{ width: '230px' }"
+                :disabled="!category"
+                :data-items="products"
+                :text-field="'productName'"
+                @change="productChange"
+                :placeholder="'Select Product ...'"
+                :value="product"
+            ></combobox>
+        </div>
+        <div :style="{ display: 'inline-block', marginLeft: '30px' }">
+            Orders
+            <br />
+             <combobox
+          :style="{ width: '230px' }"
+                :disabled="!product"
+                :data-items="orders"
+                :text-field="'orderName'"
+                @change="orderChange"
+                :placeholder="'Select Order ...'"
+                :value="order"
+            ></combobox>
+        </div>
+    </div>
+</template>
+<script>
+import { ComboBox } from '@progress/kendo-vue-dropdowns';
+import { dataCategories, dataProducts, dataOrders } from './data.js';
+
+export default {
+    components: {
+        'combobox': ComboBox
+    },
+    data: function(){
+        return {
+            category: null,
+            product: null,
+            order: null,
+            orders: dataOrders,
+            products: dataProducts,
+            categories: dataCategories
+        }
+    },
+    methods: {
+        categoryChange(event) {
+            const category = event.target.value;
+            const products = category ? dataProducts.filter(product => product.categoryId === category.categoryId) : [];
+    
+            this.category = category;
+            this.products = products;
+            this.product = null;
+            this.order = null;
+        },
+        productChange(event) {
+            const product = event.target.value;
+            const orders = product ? dataOrders.filter(order => order.productId === product.productId) : [];
+
+            this.product = product;
+            this.orders = orders;
+            this.order = null;
+        },
+        orderChange(event) {
+            this.order = event.target.value;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/common/countries.js b/vue-options-api-demos/dropdowns/combobox/common/countries.js
new file mode 100644
index 00000000..45b6cb20
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/common/countries.js
@@ -0,0 +1,52 @@
+export default [
+    "Albania",
+    "Andorra",
+    "Armenia",
+    "Austria",
+    "Azerbaijan",
+    "Belarus",
+    "Belgium",
+    "Bosnia & Herzegovina",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czech Republic",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Georgia",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Iceland",
+    "Ireland",
+    "Italy",
+    "Kosovo",
+    "Latvia",
+    "Liechtenstein",
+    "Lithuania",
+    "Luxembourg",
+    "Macedonia",
+    "Malta",
+    "Moldova",
+    "Monaco",
+    "Montenegro",
+    "Netherlands",
+    "Norway",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Russia",
+    "San Marino",
+    "Serbia",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden",
+    "Switzerland",
+    "Turkey",
+    "Ukraine",
+    "United Kingdom",
+    "Vatican City"
+];
diff --git a/vue-options-api-demos/dropdowns/combobox/custom-values/object/main.js b/vue-options-api-demos/dropdowns/combobox/custom-values/object/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/custom-values/object/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/custom-values/object/main.vue b/vue-options-api-demos/dropdowns/combobox/custom-values/object/main.vue
new file mode 100644
index 00000000..a1ef0284
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/custom-values/object/main.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+        <p>Custom values are <strong>enabled</strong>. Type a custom value.</p>
+        <p>ComboBox value: {{JSON.stringify(value)}}</p>
+        <div className="example-wrapper">
+             <combobox
+          :style="{ width: '230px' }"
+                :data-items="sizes"
+                :text-field="'text'"
+                :data-item-key="'id'"
+                :value="value"
+                @change="onChange"
+                :allow-custom="true"
+            ></combobox>
+        </div>
+    </div>
+</template>
+<script>
+import { ComboBox } from '@progress/kendo-vue-dropdowns';
+
+export default {
+    components: {
+        'combobox': ComboBox
+    },
+    data: function(){
+        return {
+            sizes: [
+                { id: 1, text: 'Small' },
+                { id: 2, text: 'Medium' },
+                { id: 3, text: 'Large' }
+            ],
+            value: { id: 2, text: 'Medium' }
+        }
+    },
+    methods: {
+        onChange (event) {
+            let value = event.target.value;
+    
+            if (value && value.id === undefined) {
+                value = {
+                    ...value,
+                    id: new Date().getTime()
+                };
+            }
+    
+            this.value = value;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/custom-values/primitive/main.js b/vue-options-api-demos/dropdowns/combobox/custom-values/primitive/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/custom-values/primitive/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/custom-values/primitive/main.vue b/vue-options-api-demos/dropdowns/combobox/custom-values/primitive/main.vue
new file mode 100644
index 00000000..4ef45765
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/custom-values/primitive/main.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+        <p>Custom values are <strong>enabled</strong>. Type a custom value.</p>
+        <p>primitive data</p>
+        <div class="example-wrapper">
+             <combobox
+          :style="{ width: '230px' }"
+                :data-items="sizes"
+                v-model="value"
+                :allow-custom="true"
+            />
+        </div>
+    </div>
+</template>
+<script>
+import { ComboBox } from '@progress/kendo-vue-dropdowns';
+
+export default {
+    components: {
+        'combobox': ComboBox
+    },
+    data: function(){
+        return {
+            sizes: [ "Small", "Medium", "Large" ],
+            value: 'Medium'
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/filtering/basic/main.js b/vue-options-api-demos/dropdowns/combobox/filtering/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/filtering/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/filtering/basic/main.vue b/vue-options-api-demos/dropdowns/combobox/filtering/basic/main.vue
new file mode 100644
index 00000000..7d2dd40d
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/filtering/basic/main.vue
@@ -0,0 +1,40 @@
+<template>
+     <combobox
+          :style="{ width: '230px' }"
+        :data-items="items"
+        :text-field="'text'"
+        :filterable="true"
+        @filterchange="filterChange"
+    ></combobox>
+</template>
+<script>
+import { ComboBox } from '@progress/kendo-vue-dropdowns';
+import { filterBy } from '@progress/kendo-data-query';
+
+const source = [
+    { text: "Small", id: 1 },
+    { text: "Medium", id: 2 },
+    { text: "Large", id: 3 }
+];
+
+export default {
+    components: {
+        'combobox': ComboBox
+    },
+   data: function(){
+        return {
+            items: source.slice()
+        }
+    },
+    methods: {
+        filterChange (event) {
+            this.items = this.filterData(event.filter);
+        },
+        filterData(filter) {
+            const data = source.slice();
+            return filterBy(data, filter);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/filtering/loading/main.js b/vue-options-api-demos/dropdowns/combobox/filtering/loading/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/filtering/loading/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/filtering/loading/main.vue b/vue-options-api-demos/dropdowns/combobox/filtering/loading/main.vue
new file mode 100644
index 00000000..36fd1488
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/filtering/loading/main.vue
@@ -0,0 +1,49 @@
+<template>
+    <combobox
+          :style="{ width: '230px' }"
+        :data-items="items"
+        :text-field="'text'"
+        :filterable="true"
+        @filterchange="filterChange"
+        :loading="loading"
+    ></combobox>
+</template>
+<script>
+import { ComboBox } from '@progress/kendo-vue-dropdowns';
+import { filterBy } from '@progress/kendo-data-query';
+
+const source = [
+    { text: "Small", id: 1 },
+    { text: "Medium", id: 2 },
+    { text: "Large", id: 3 }
+];
+const delay = 500;
+
+export default {
+    components: {
+        'combobox': ComboBox
+    },
+    data: function(){
+        return {
+            items: source.slice(),
+            loading: false
+        }
+    },
+    methods: {
+        filterChange (event) {
+            clearTimeout(this.timeout);
+            this.timeout = setTimeout(() => {
+                this.items = this.filterData(event.filter);
+                this.loading = false;
+            }, delay);
+
+            this.loading = true;
+        },
+        filterData(filter) {
+            const data = source.slice();
+            return filterBy(data, filter);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/filtering/minfilter/main.js b/vue-options-api-demos/dropdowns/combobox/filtering/minfilter/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/filtering/minfilter/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/filtering/minfilter/main.vue b/vue-options-api-demos/dropdowns/combobox/filtering/minfilter/main.vue
new file mode 100644
index 00000000..2573d7b4
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/filtering/minfilter/main.vue
@@ -0,0 +1,42 @@
+<template>
+   <combobox
+          :style="{ width: '230px' }"
+        :data-items="items"
+        :text-field="'text'"
+        :filterable="true"
+        @filterchange="filterChange"
+    ></combobox>
+</template>
+<script>
+import { ComboBox } from '@progress/kendo-vue-dropdowns';
+import { filterBy } from '@progress/kendo-data-query';
+
+const source = [
+    { text: "Small", id: 1 },
+    { text: "Medium", id: 2 },
+    { text: "Large", id: 3 }
+];
+export default {
+    components: {
+        'combobox': ComboBox
+    },
+    data: function(){
+        return {
+            items: source.slice()
+        }
+    },
+    methods: {
+        filterChange (event) {
+            const newData = event.filter.value.length > 3 ?
+            this.filterData(event.filter) : source.slice();
+
+            this.items = newData;
+        },
+        filterData(filter) {
+            const data = source.slice();
+            return filterBy(data, filter);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/filtering/remote/main.js b/vue-options-api-demos/dropdowns/combobox/filtering/remote/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/filtering/remote/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/filtering/remote/main.vue b/vue-options-api-demos/dropdowns/combobox/filtering/remote/main.vue
new file mode 100644
index 00000000..e697dcb5
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/filtering/remote/main.vue
@@ -0,0 +1,151 @@
+<template>
+  <combobox
+          :style="{ width: '230px' }"
+            :data-items="items"
+            :value="value"
+            @change="onChange"
+            :text-field="textField"
+            :data-item-key="dataItemKey"
+            :placeholder="placeholder"
+            :filterable="true"
+            @filterchange="onFilterChange"
+            :virtual="virtual"
+            @pagechange="pageChange"
+            ></combobox>
+</template>
+<script>
+import { ComboBox } from '@progress/kendo-vue-dropdowns';
+const textField = 'ContactName';
+const dataItemKey = 'CustomerID';
+const placeholder = 'Select customer';
+const pageSize = 10;
+const emptyItem = { [textField]: 'loading ...' };
+
+const loadingData = [];
+while (loadingData.length < pageSize) {
+    loadingData.push({...emptyItem});
+}
+export default {
+    components: {
+        'combobox': ComboBox
+    },
+    data: function () {
+        return { 
+            items: [],
+            skip: 0,
+            total: 0,
+            value: null,
+            filter: '',
+            textField: textField,
+            dataItemKey: dataItemKey,
+            placeholder: placeholder,
+            pageSize: pageSize,
+            emptyItem: emptyItem,
+            loadingData: loadingData
+         };
+    },
+    created(){
+        this.baseUrl = `https://odatasampleservices.azurewebsites.net/V4/Northwind/Northwind.svc/`;
+        this.init = { method: 'GET', accept: 'application/json', headers: [] };
+        this.dataCaching = [];
+        this.pendingRequest;
+        this.requestStarted = false;
+    },
+    mounted(){
+        this.requestData(0, '');
+    },
+    destroyed() {
+        this.resetCach();
+    },
+    computed: {
+        virtual: function() {
+            return {
+                pageSize: pageSize,
+                skip: this.skip,
+                total: this.total
+            };
+        }
+    },
+    methods: {
+        requestData(skip, filter) {
+            if (this.requestStarted) {
+                clearTimeout(this.pendingRequest);
+                this.pendingRequest = setTimeout(() => { this.requestData(skip, filter); }, 50);
+                return;
+            }
+    
+            const url = this.baseUrl +
+                `Customers?$filter=contains(ContactName,'${filter}')&$skip=${skip}&$top=${pageSize}&$count=true`;
+    
+            this.requestStarted = true;
+            fetch(url, this.init)
+                .then(response => response.json())
+                .then(json => {
+                    const total = json['@odata.count'];
+                    const items = [];
+                    json.value.forEach((element, index) => {
+                        const { CustomerID, ContactName } = element;
+                        const item = { [dataItemKey]: CustomerID, [textField]: ContactName };
+                        items.push(item);
+                        this.dataCaching[index + skip] = item;
+                    });
+    
+                    if (skip === this.skip) {
+                        this.items = items;
+                        this.total = total;
+                    }
+                    this.requestStarted = false;
+                });
+        },
+        onFilterChange(event) {
+            const filter = event.filter.value;
+    
+            this.resetCach();
+            this.requestData(0, filter);
+    
+            this.items= loadingData;
+            this.skip= 0;
+            this. filter = filter;
+        },
+        pageChange(event){
+            const skip = event.page.skip;
+            const filter = this.filter;
+    
+            let makeRequest = false;
+            for (let i = 0; i < pageSize; i++) {
+                if (!this.dataCaching[skip + i]) {
+                    makeRequest = true;
+                    break;
+                }
+            }
+    
+            if (makeRequest) {
+                this.requestData(skip, filter || '');
+            }
+    
+            const data = this.getCachedData(skip);
+    
+            this.items = data;
+            this.skip = skip;
+        },
+        onChange (event) {
+            const value = event.target.value;
+            if (value && value[textField] === emptyItem[textField]) {
+                return;
+            }
+            this.value = value;
+        },
+        getCachedData(skip) {
+            const data = [];
+            for (let i = 0; i < pageSize; i++) {
+                data.push(this.dataCaching[i + skip] || {...emptyItem});
+            }
+            return data;
+        },
+        resetCach() {
+            this.dataCaching.length = 0;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/forms/basic/main.js b/vue-options-api-demos/dropdowns/combobox/forms/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/forms/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/forms/basic/main.vue b/vue-options-api-demos/dropdowns/combobox/forms/basic/main.vue
new file mode 100644
index 00000000..c5b8e99c
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/forms/basic/main.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="row example-wrapper">
+         <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                    <div class="card">
+                        <div class="card-block">
+                            <form class="k-form" @submit="handleSubmit">
+                                <fieldset>
+                                    <legend>Select your flight route:</legend>
+                                    <div class="mb-3">
+                                         <combobox
+                                            :style="{ width: '100%' }"
+                                            :label="'Departure Country'"
+                                            :name="'departureCountry'"
+                                            :data-items="countries"
+                                            :required="true"
+                                        >
+                                        </combobox>
+                                    </div>
+                                    <div>
+                                         <combobox
+                                            :style="{ width: '100%' }"
+                                            :label="'Arrival Country'"
+                                            :name="'arrivalCountry'"
+                                            :data-items="countries"
+                                            :required="true"
+                                        >
+                                        </combobox>
+                                    </div>
+                                </fieldset>
+                                <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+                <div v-if="success"
+                    class="alert alert-success"
+                    :style="{ position: 'absolute' }"
+                >
+                    Form submitted!
+                </div>
+    </div>
+</template>
+<script>
+import { ComboBox } from '@progress/kendo-vue-dropdowns';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'combobox': ComboBox,
+      'kbutton': Button
+    },
+     methods: {
+         handleSubmit (event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(() => { this.success = false; }, 3000);
+        }
+    },
+     data: function () {
+        return {
+            success: false,
+              countries: [ 'Albania', 'Andorra', 'Armenia', 'Austria', 'Azerbaijan', 
+               'Belarus', 'Belgium', 'Bosnia & Herzegovina',  'Bulgaria', 'Croatia',  
+               'Cyprus', 'Czech Republic', 'Denmark', 'Estonia', 'Finland', 'France', 
+               'Georgia', 'Germany', 'Greece', 'Hungary', 'Iceland', 'Ireland', 'Italy',
+                'Kosovo', 'Latvia', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macedonia',
+                 'Malta', 'Moldova', 'Monaco', 'Montenegro', 'Netherlands', 'Norway', 'Poland',
+                  'Portugal', 'Romania', 'Russia', 'San Marino', 'Serbia', 'Slovakia',
+                   'Slovenia', 'Spain', 'Sweden', 'Switzerland', 'Turkey', 'Ukraine', 
+                   'United Kingdom', 'Vatican City' ]
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/forms/countries.js b/vue-options-api-demos/dropdowns/combobox/forms/countries.js
new file mode 100644
index 00000000..24f270bb
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/forms/countries.js
@@ -0,0 +1,52 @@
+export const countries = [
+    'Albania',
+    'Andorra',
+    'Armenia',
+    'Austria',
+    'Azerbaijan',
+    'Belarus',
+    'Belgium',
+    'Bosnia & Herzegovina',
+    'Bulgaria',
+    'Croatia',
+    'Cyprus',
+    'Czech Republic',
+    'Denmark',
+    'Estonia',
+    'Finland',
+    'France',
+    'Georgia',
+    'Germany',
+    'Greece',
+    'Hungary',
+    'Iceland',
+    'Ireland',
+    'Italy',
+    'Kosovo',
+    'Latvia',
+    'Liechtenstein',
+    'Lithuania',
+    'Luxembourg',
+    'Macedonia',
+    'Malta',
+    'Moldova',
+    'Monaco',
+    'Montenegro',
+    'Netherlands',
+    'Norway',
+    'Poland',
+    'Portugal',
+    'Romania',
+    'Russia',
+    'San Marino',
+    'Serbia',
+    'Slovakia',
+    'Slovenia',
+    'Spain',
+    'Sweden',
+    'Switzerland',
+    'Turkey',
+    'Ukraine',
+    'United Kingdom',
+    'Vatican City'
+];
diff --git a/vue-options-api-demos/dropdowns/combobox/forms/custom-message/countries.js b/vue-options-api-demos/dropdowns/combobox/forms/custom-message/countries.js
new file mode 100644
index 00000000..45b6cb20
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/forms/custom-message/countries.js
@@ -0,0 +1,52 @@
+export default [
+    "Albania",
+    "Andorra",
+    "Armenia",
+    "Austria",
+    "Azerbaijan",
+    "Belarus",
+    "Belgium",
+    "Bosnia & Herzegovina",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czech Republic",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Georgia",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Iceland",
+    "Ireland",
+    "Italy",
+    "Kosovo",
+    "Latvia",
+    "Liechtenstein",
+    "Lithuania",
+    "Luxembourg",
+    "Macedonia",
+    "Malta",
+    "Moldova",
+    "Monaco",
+    "Montenegro",
+    "Netherlands",
+    "Norway",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Russia",
+    "San Marino",
+    "Serbia",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden",
+    "Switzerland",
+    "Turkey",
+    "Ukraine",
+    "United Kingdom",
+    "Vatican City"
+];
diff --git a/vue-options-api-demos/dropdowns/combobox/forms/custom-message/main.js b/vue-options-api-demos/dropdowns/combobox/forms/custom-message/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/forms/custom-message/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/forms/custom-message/main.vue b/vue-options-api-demos/dropdowns/combobox/forms/custom-message/main.vue
new file mode 100644
index 00000000..67b1f565
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/forms/custom-message/main.vue
@@ -0,0 +1,72 @@
+<template>
+ <div class="row example-wrapper">
+         <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                    <div class="card">
+                        <div class="card-block">
+                            <form class="k-form" @submit="handleSubmit">
+                                <fieldset>
+                                    <legend>Select your flight route:</legend>
+                                    <div class="mb-3">
+                                         <combobox
+                                            :style="{ width: '100%' }"
+                                            :label="'Departure Country'"
+                                            :name="'departureCountry'"
+                                            :data-items="countries"
+                                            :required="true"
+                                            :validation-message="departureValidationMessage"
+                                        >
+                                        </combobox>
+                                    </div>
+                                    <div>
+                                         <combobox
+                                            :style="{ width: '100%' }"
+                                            :label="'Arrival Country'"
+                                            :name="'arrivalCountry'"
+                                            :data-items="countries"
+                                            :required="true"
+                                            :validation-message="arrivalValidationMessage"
+                                        >
+                                        </combobox>
+                                    </div>
+                                </fieldset>
+                                <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+                <div v-if="success"
+                    class="alert alert-success"
+                    :style="{ position: 'absolute' }"
+                >
+                    Form submitted!
+                </div>
+    </div>
+</template>
+<script>
+import countries from './countries';
+import { ComboBox } from '@progress/kendo-vue-dropdowns';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'combobox': ComboBox,
+      'kbutton': Button
+    },
+     methods: {
+         handleSubmit (event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(() => { this.success = false; }, 3000);
+        }
+    },
+    data: function () {
+        return {
+            departureValidationMessage: 'Please select a departure country!',
+            arrivalValidationMessage: 'Please select an arrival country!',
+            success: false,
+            countries: countries
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/forms/disable-styles/countries.js b/vue-options-api-demos/dropdowns/combobox/forms/disable-styles/countries.js
new file mode 100644
index 00000000..45b6cb20
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/forms/disable-styles/countries.js
@@ -0,0 +1,52 @@
+export default [
+    "Albania",
+    "Andorra",
+    "Armenia",
+    "Austria",
+    "Azerbaijan",
+    "Belarus",
+    "Belgium",
+    "Bosnia & Herzegovina",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czech Republic",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Georgia",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Iceland",
+    "Ireland",
+    "Italy",
+    "Kosovo",
+    "Latvia",
+    "Liechtenstein",
+    "Lithuania",
+    "Luxembourg",
+    "Macedonia",
+    "Malta",
+    "Moldova",
+    "Monaco",
+    "Montenegro",
+    "Netherlands",
+    "Norway",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Russia",
+    "San Marino",
+    "Serbia",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden",
+    "Switzerland",
+    "Turkey",
+    "Ukraine",
+    "United Kingdom",
+    "Vatican City"
+];
diff --git a/vue-options-api-demos/dropdowns/combobox/forms/disable-styles/main.js b/vue-options-api-demos/dropdowns/combobox/forms/disable-styles/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/forms/disable-styles/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/forms/disable-styles/main.vue b/vue-options-api-demos/dropdowns/combobox/forms/disable-styles/main.vue
new file mode 100644
index 00000000..6d4ac07f
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/forms/disable-styles/main.vue
@@ -0,0 +1,101 @@
+<template>
+ <div class="row example-wrapper">
+         <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                    <div class="card">
+                        <div class="card-block">
+                            <form class="k-form" @submit="handleSubmit">
+                                <fieldset>
+                                    <legend>Select your flight route:</legend>
+                                    <div class="mb-3">
+                                         <combobox
+                                            :style="{ width: '100%' }"
+                                            :label="'Departure Country'"
+                                            :value="departureCountry"
+                                            @change="handleChange"
+                                            :name="'departureCountry'"
+                                            :data-items="countries"
+                                            :required="true"
+                                        >
+                                        </combobox>
+                                    </div>
+                                    <div>
+                                         <combobox
+                                            :validity-styles="false"
+                                            :style="{ width: '100%' }"
+                                            :label="'Arrival Country'"
+                                            :value="arrivalCountry"
+                                            @change="handleChange"
+                                            :name="'arrivalCountry'"
+                                            :data-items="countries"
+                                            :required="true"
+                                            :valid="valid"
+                                            :validation-message="validationMessage"
+                                        >
+                                        </combobox>
+                                    </div>
+                                    <label class="k-form-field">
+                                        <span>Additional Comments</span>
+                                        <textarea
+                                            class="k-textarea"
+                                            :style="{ width: '100%' }"
+                                            name="additionalComments"
+                                            v-model="additionalComments"
+                                        >
+                                        </textarea>
+                                    </label>
+                                </fieldset>
+                                <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+                <div v-if="success"
+                    class="alert alert-success"
+                    :style="{ position: 'absolute' }"
+                >
+                    Form submitted!
+                </div>
+    </div>
+</template>
+<script>
+import countries from './countries';
+import { ComboBox } from '@progress/kendo-vue-dropdowns';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'combobox': ComboBox,
+      'kbutton': Button
+    },
+     computed: {
+        valid: function(){
+            return this.departureCountry !== null && this.arrivalCountry !== null;
+        },
+        validationMessage: function(){
+            return this.departureCountry === null
+            ? 'Please select a Departure Country first!'
+            : 'Please select an Arrival Country';
+        }     
+    },
+    methods: {
+        handleChange(event) {
+            this[event.target.name] = event.value;
+        },
+         handleSubmit (event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(() => { this.success = false; }, 3000);
+        }
+    },
+     data: function () {
+        return {
+            departureCountry: null,
+            arrivalCountry: null,
+            additionalComments: '',
+            success: false,
+            countries: countries
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/forms/override/countries.js b/vue-options-api-demos/dropdowns/combobox/forms/override/countries.js
new file mode 100644
index 00000000..45b6cb20
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/forms/override/countries.js
@@ -0,0 +1,52 @@
+export default [
+    "Albania",
+    "Andorra",
+    "Armenia",
+    "Austria",
+    "Azerbaijan",
+    "Belarus",
+    "Belgium",
+    "Bosnia & Herzegovina",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czech Republic",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Georgia",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Iceland",
+    "Ireland",
+    "Italy",
+    "Kosovo",
+    "Latvia",
+    "Liechtenstein",
+    "Lithuania",
+    "Luxembourg",
+    "Macedonia",
+    "Malta",
+    "Moldova",
+    "Monaco",
+    "Montenegro",
+    "Netherlands",
+    "Norway",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Russia",
+    "San Marino",
+    "Serbia",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden",
+    "Switzerland",
+    "Turkey",
+    "Ukraine",
+    "United Kingdom",
+    "Vatican City"
+];
diff --git a/vue-options-api-demos/dropdowns/combobox/forms/override/main.js b/vue-options-api-demos/dropdowns/combobox/forms/override/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/forms/override/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/forms/override/main.vue b/vue-options-api-demos/dropdowns/combobox/forms/override/main.vue
new file mode 100644
index 00000000..ccb6bbec
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/forms/override/main.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="row example-wrapper">
+         <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                    <div class="card">
+                        <div class="card-block">
+                            <form class="k-form" @submit="handleSubmit">
+                                <fieldset>
+                                    <legend>Select your flight route:</legend>
+                                    <div class="mb-3">
+                                         <combobox
+                                            :style="{ width: '100%' }"
+                                            :label="'Departure Country'"
+                                            :value="departureCountry"
+                                            @change="handleChange"
+                                            :name="'departureCountry'"
+                                            :data-items="countries"
+                                            :required="true"
+                                        >
+                                        </combobox>
+                                    </div>
+                                    <div>
+                                         <combobox
+                                            :style="{ width: '100%' }"
+                                            :label="'Arrival Country'"
+                                            :value="arrivalCountry"
+                                            @change="handleChange"
+                                            :name="'arrivalCountry'"
+                                            :data-items="countries"
+                                            :required="true"
+                                            :valid="valid"
+                                            :validation-message="validationMessage"
+                                        >
+                                        </combobox>
+                                    </div>
+                                    <label class="k-form-field">
+                                        <span>Additional Comments</span>
+                                        <textarea
+                                            class="k-textarea"
+                                            :style="{ width: '100%' }"
+                                            name="additionalComments"
+                                            v-model="additionalComments"
+                                        >
+                                        </textarea>
+                                    </label>
+                                </fieldset>
+                                <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+                <div v-if="success"
+                    class="alert alert-success"
+                    :style="{ position: 'absolute' }"
+                >
+                    Form submitted!
+                </div>
+    </div>
+</template>
+<script>
+import countries from './countries';
+import { ComboBox } from '@progress/kendo-vue-dropdowns';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'combobox': ComboBox,
+      'kbutton': Button
+    },
+    computed: {
+        valid: function(){
+            return this.departureCountry !== null && this.arrivalCountry !== null;
+        },
+        validationMessage: function(){
+            return this.departureCountry === null
+            ? 'Please select a Departure Country first!'
+            : 'Please select an Arrival Country';
+        }     
+    },
+    methods: {
+        handleChange(event) {
+            this[event.target.name] = event.value;
+        },
+         handleSubmit (event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(() => { this.success = false; }, 3000);
+        }
+    },
+     data: function () {
+        return {
+            departureCountry: null,
+            arrivalCountry: null,
+            additionalComments: '',
+            success: false,
+            countries: countries
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/grouping/basic/grouping-data.js b/vue-options-api-demos/dropdowns/combobox/grouping/basic/grouping-data.js
new file mode 100644
index 00000000..9a2711db
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/grouping/basic/grouping-data.js
@@ -0,0 +1,181 @@
+export const employees = [ {
+    "id": 11,
+    "name": "Hyacinth Hood",
+    "reportsTo": 32,
+    "phone": "(889) 345-2438",
+    "extension": 8564,
+    "hireDate": new Date("2014-02-03T20:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 1
+}, {
+    "id": 40,
+    "name": "Karleigh Garza",
+    "reportsTo": 52,
+    "phone": "(370) 983-8796",
+    "extension": 4044,
+    "hireDate": new Date("2014-03-10T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 1
+}, {
+    "id": 46,
+    "name": "Darrel Solis",
+    "reportsTo": 43,
+    "phone": "(327) 977-0216",
+    "extension": 7779,
+    "hireDate": new Date("2015-04-25T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 4
+}, {
+    "id": 76,
+    "name": "Cheyenne Olson",
+    "reportsTo": 63,
+    "phone": "(241) 645-0257",
+    "extension": 9181,
+    "hireDate": new Date("2015-05-19T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 5
+}, {
+    "id": 78,
+    "name": "Rinah Simon",
+    "reportsTo": 11,
+    "phone": "(285) 912-5271",
+    "extension": 7795,
+    "hireDate": new Date("2012-10-11T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 4
+}, {
+    "id": 79,
+    "name": "Duncan Mathews",
+    "reportsTo": 64,
+    "phone": "(790) 971-9709",
+    "extension": 4573,
+    "hireDate": new Date("2011-08-21T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "Developer",
+    "timeInPosition": 3
+}, {
+    "id": 82,
+    "name": "Yael Walters",
+    "reportsTo": 69,
+    "phone": "(311) 489-8191",
+    "extension": 6520,
+    "hireDate": new Date("2013-07-04T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 6
+}, {
+    "id": 75,
+    "name": "Eric Russell",
+    "reportsTo": 63,
+    "phone": "(516) 575-8505",
+    "extension": 2224,
+    "hireDate": new Date("2012-10-28T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 3
+}, {
+    "id": 55,
+    "name": "Summer Mosley",
+    "reportsTo": 46,
+    "phone": "(784) 962-2301",
+    "extension": 5492,
+    "hireDate": new Date("2010-03-02T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "QA",
+    "timeInPosition": 5
+}, {
+    "id": 59,
+    "name": "Keiko Espinoza",
+    "reportsTo": 46,
+    "phone": "(226) 600-5305",
+    "extension": 9363,
+    "hireDate": new Date("2011-09-18T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "QA",
+    "timeInPosition": 4
+}, {
+    "id": 72,
+    "name": "Stacey Lynn",
+    "reportsTo": 40,
+    "phone": "(140) 772-7509",
+    "extension": 8396,
+    "hireDate": new Date("2014-07-31T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "QA",
+    "timeInPosition": 1
+}, {
+    "id": 38,
+    "name": "Elton Tucker",
+    "reportsTo": 69,
+    "phone": "(988) 930-9331",
+    "extension": 9216,
+    "hireDate": new Date("2015-06-04T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 1
+}, {
+    "id": 71,
+    "name": "Flavia Short",
+    "reportsTo": 63,
+    "phone": "(370) 133-9238",
+    "extension": 6390,
+    "hireDate": new Date("2013-02-21T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 0
+}, {
+    "id": 61,
+    "name": "Candace Pickett",
+    "reportsTo": 46,
+    "phone": "(120) 117-7475",
+    "extension": 5178,
+    "hireDate": new Date("2010-05-06T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 0
+}, {
+    "id": 65,
+    "name": "Thomas Terry",
+    "reportsTo": 63,
+    "phone": "(764) 831-4248",
+    "extension": 3574,
+    "hireDate": new Date("2015-06-15T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "Support",
+    "timeInPosition": 2
+}, {
+    "id": 62,
+    "name": "Palmer Gregory",
+    "reportsTo": 64,
+    "phone": "(360) 430-2505",
+    "extension": 4337,
+    "hireDate": new Date("2014-08-30T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 4
+}, {
+    "id": 12,
+    "name": "Jamalia Wallace",
+    "reportsTo": 64,
+    "phone": "(611) 391-8016",
+    "extension": 1952,
+    "hireDate": new Date("2011-09-08T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 3
+}, {
+    "id": 66,
+    "name": "Gloria Freeman",
+    "reportsTo": 53,
+    "phone": "(344) 950-9168",
+    "extension": 4738,
+    "hireDate": new Date("2013-05-06T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 0
+} ];
diff --git a/vue-options-api-demos/dropdowns/combobox/grouping/basic/main.js b/vue-options-api-demos/dropdowns/combobox/grouping/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/grouping/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/grouping/basic/main.vue b/vue-options-api-demos/dropdowns/combobox/grouping/basic/main.vue
new file mode 100644
index 00000000..d8d86c56
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/grouping/basic/main.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <ComboBox
+      :data-items="groupedData"
+      :text-field="'name'"
+      :group-field="'position'"
+      :style="{
+        width: '300px',
+      }"
+    />
+  </div>
+</template>
+<script>
+import { ComboBox } from "@progress/kendo-vue-dropdowns";
+import { groupBy } from "@progress/kendo-data-query";
+import { employees } from "./grouping-data.js";
+
+export default {
+  components: {
+    ComboBox,
+  },
+  data() {
+    return {
+      groupedData: groupBy(employees, [{ field: "position" }]).reduce(
+        (res, group) => [...res, ...group.items],
+        []
+      ),
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/grouping/custom/GroupHeaderItemRender.vue b/vue-options-api-demos/dropdowns/combobox/grouping/custom/GroupHeaderItemRender.vue
new file mode 100644
index 00000000..d2c8a237
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/grouping/custom/GroupHeaderItemRender.vue
@@ -0,0 +1,21 @@
+<template>
+<li :id="id" role="group" class="k-list-group-item" style="position: unset;">
+  <b
+      :style="{
+        color: '#00F',
+      }"
+      role="option"
+    >
+     {{group}}
+    </b>
+  </li>
+</template>
+<script>
+export default {
+  props: {
+    group: String,
+    id: String,
+    index: Number,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/grouping/custom/ItemRender.vue b/vue-options-api-demos/dropdowns/combobox/grouping/custom/ItemRender.vue
new file mode 100644
index 00000000..0967fc13
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/grouping/custom/ItemRender.vue
@@ -0,0 +1,42 @@
+<template>
+  <li class="k-item" @click="handleClick">
+    <i
+      :style="{
+        color: 'green',
+      }"
+      role="option"
+      :aria-selected="focused"
+      :class="itemClass"
+    >
+      {{ dataItem[textField] }} {{ index }}
+    </i>
+  </li>
+</template>
+<script>
+export default {
+  emits: {
+    click: null,
+  },
+  props: {
+    id: String,
+    index: Number,
+    dataItem: [Object, String, Number],
+    textField: String,
+    focused: Boolean,
+    selected: Boolean,
+  },
+  computed: {
+    itemClass() {
+      return {
+        "k-item": true,
+        "k-state-focused": this.$props.focused,
+      };
+    },
+  },
+  methods: {
+    handleClick: function (e) {
+      this.$emit("click", e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/grouping/custom/StickyHeaderRender.vue b/vue-options-api-demos/dropdowns/combobox/grouping/custom/StickyHeaderRender.vue
new file mode 100644
index 00000000..60e0a1aa
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/grouping/custom/StickyHeaderRender.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="k-list-group-sticky-header">
+    <span
+      :style="{
+        color: 'orange',
+        fontWeight: 900,
+        width: '100%',
+        fontSize: '1.5em',
+        textAlign: 'center',
+      }"
+    >
+    {{ group }}
+    </span>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    group: String,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/grouping/custom/grouping-data.js b/vue-options-api-demos/dropdowns/combobox/grouping/custom/grouping-data.js
new file mode 100644
index 00000000..9a2711db
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/grouping/custom/grouping-data.js
@@ -0,0 +1,181 @@
+export const employees = [ {
+    "id": 11,
+    "name": "Hyacinth Hood",
+    "reportsTo": 32,
+    "phone": "(889) 345-2438",
+    "extension": 8564,
+    "hireDate": new Date("2014-02-03T20:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 1
+}, {
+    "id": 40,
+    "name": "Karleigh Garza",
+    "reportsTo": 52,
+    "phone": "(370) 983-8796",
+    "extension": 4044,
+    "hireDate": new Date("2014-03-10T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 1
+}, {
+    "id": 46,
+    "name": "Darrel Solis",
+    "reportsTo": 43,
+    "phone": "(327) 977-0216",
+    "extension": 7779,
+    "hireDate": new Date("2015-04-25T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 4
+}, {
+    "id": 76,
+    "name": "Cheyenne Olson",
+    "reportsTo": 63,
+    "phone": "(241) 645-0257",
+    "extension": 9181,
+    "hireDate": new Date("2015-05-19T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 5
+}, {
+    "id": 78,
+    "name": "Rinah Simon",
+    "reportsTo": 11,
+    "phone": "(285) 912-5271",
+    "extension": 7795,
+    "hireDate": new Date("2012-10-11T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 4
+}, {
+    "id": 79,
+    "name": "Duncan Mathews",
+    "reportsTo": 64,
+    "phone": "(790) 971-9709",
+    "extension": 4573,
+    "hireDate": new Date("2011-08-21T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "Developer",
+    "timeInPosition": 3
+}, {
+    "id": 82,
+    "name": "Yael Walters",
+    "reportsTo": 69,
+    "phone": "(311) 489-8191",
+    "extension": 6520,
+    "hireDate": new Date("2013-07-04T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 6
+}, {
+    "id": 75,
+    "name": "Eric Russell",
+    "reportsTo": 63,
+    "phone": "(516) 575-8505",
+    "extension": 2224,
+    "hireDate": new Date("2012-10-28T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 3
+}, {
+    "id": 55,
+    "name": "Summer Mosley",
+    "reportsTo": 46,
+    "phone": "(784) 962-2301",
+    "extension": 5492,
+    "hireDate": new Date("2010-03-02T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "QA",
+    "timeInPosition": 5
+}, {
+    "id": 59,
+    "name": "Keiko Espinoza",
+    "reportsTo": 46,
+    "phone": "(226) 600-5305",
+    "extension": 9363,
+    "hireDate": new Date("2011-09-18T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "QA",
+    "timeInPosition": 4
+}, {
+    "id": 72,
+    "name": "Stacey Lynn",
+    "reportsTo": 40,
+    "phone": "(140) 772-7509",
+    "extension": 8396,
+    "hireDate": new Date("2014-07-31T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "QA",
+    "timeInPosition": 1
+}, {
+    "id": 38,
+    "name": "Elton Tucker",
+    "reportsTo": 69,
+    "phone": "(988) 930-9331",
+    "extension": 9216,
+    "hireDate": new Date("2015-06-04T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 1
+}, {
+    "id": 71,
+    "name": "Flavia Short",
+    "reportsTo": 63,
+    "phone": "(370) 133-9238",
+    "extension": 6390,
+    "hireDate": new Date("2013-02-21T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 0
+}, {
+    "id": 61,
+    "name": "Candace Pickett",
+    "reportsTo": 46,
+    "phone": "(120) 117-7475",
+    "extension": 5178,
+    "hireDate": new Date("2010-05-06T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 0
+}, {
+    "id": 65,
+    "name": "Thomas Terry",
+    "reportsTo": 63,
+    "phone": "(764) 831-4248",
+    "extension": 3574,
+    "hireDate": new Date("2015-06-15T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "Support",
+    "timeInPosition": 2
+}, {
+    "id": 62,
+    "name": "Palmer Gregory",
+    "reportsTo": 64,
+    "phone": "(360) 430-2505",
+    "extension": 4337,
+    "hireDate": new Date("2014-08-30T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 4
+}, {
+    "id": 12,
+    "name": "Jamalia Wallace",
+    "reportsTo": 64,
+    "phone": "(611) 391-8016",
+    "extension": 1952,
+    "hireDate": new Date("2011-09-08T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 3
+}, {
+    "id": 66,
+    "name": "Gloria Freeman",
+    "reportsTo": 53,
+    "phone": "(344) 950-9168",
+    "extension": 4738,
+    "hireDate": new Date("2013-05-06T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 0
+} ];
diff --git a/vue-options-api-demos/dropdowns/combobox/grouping/custom/main.js b/vue-options-api-demos/dropdowns/combobox/grouping/custom/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/grouping/custom/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/grouping/custom/main.vue b/vue-options-api-demos/dropdowns/combobox/grouping/custom/main.vue
new file mode 100644
index 00000000..729ab719
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/grouping/custom/main.vue
@@ -0,0 +1,63 @@
+<template>
+  <ComboBox
+    :data-items="groupedData"
+    :text-field="textField"
+    :group-field="'position'"
+    placeholder="Please select ..."
+    :style="{
+      width: '300px',
+    }"
+    :itemRender="'myCustomItem'"
+    :groupHeaderItemRender="'myGroupHeaderItemRender'"
+    :groupStickyHeaderItemRender="'myStickyHeaderRender'"
+  >
+    <template v-slot:myCustomItem="{ props }">
+      <ItemRender
+        :style="props.style"
+        :class="props.itemClass"
+        :data-item="props.dataItem"
+        :focused="props.focused"
+        :index="props.index"
+        :text-field="textField"
+        @click="(ev) => props.onClick(ev)"
+      />
+    </template>
+    <template v-slot:myGroupHeaderItemRender="{ props }">
+      <GroupHeaderItemRender
+        :id="props.id"
+        :group="props.group"
+        :index="props.index"
+      />
+    </template>
+    <template v-slot:myStickyHeaderRender="{ props }">
+      <StickyHeaderRender :group="props.group" />
+    </template>
+  </ComboBox>
+</template>
+<script>
+import { ComboBox } from "@progress/kendo-vue-dropdowns";
+import ItemRender from "./ItemRender.vue";
+import GroupHeaderItemRender from "./GroupHeaderItemRender.vue";
+import StickyHeaderRender from "./StickyHeaderRender.vue";
+import { groupBy } from "@progress/kendo-data-query";
+import { employees } from "./grouping-data.js";
+
+export default {
+  components: {
+    ComboBox,
+    ItemRender,
+    GroupHeaderItemRender,
+    StickyHeaderRender,
+    ComboBox
+},
+  data() {
+    return {
+      textField: "name",
+      groupedData: groupBy(employees, [{ field: "position" }]).reduce(
+        (res, group) => [...res, ...group.items],
+        []
+      ),
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/grouping/filtering/grouping-data.js b/vue-options-api-demos/dropdowns/combobox/grouping/filtering/grouping-data.js
new file mode 100644
index 00000000..9a2711db
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/grouping/filtering/grouping-data.js
@@ -0,0 +1,181 @@
+export const employees = [ {
+    "id": 11,
+    "name": "Hyacinth Hood",
+    "reportsTo": 32,
+    "phone": "(889) 345-2438",
+    "extension": 8564,
+    "hireDate": new Date("2014-02-03T20:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 1
+}, {
+    "id": 40,
+    "name": "Karleigh Garza",
+    "reportsTo": 52,
+    "phone": "(370) 983-8796",
+    "extension": 4044,
+    "hireDate": new Date("2014-03-10T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 1
+}, {
+    "id": 46,
+    "name": "Darrel Solis",
+    "reportsTo": 43,
+    "phone": "(327) 977-0216",
+    "extension": 7779,
+    "hireDate": new Date("2015-04-25T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 4
+}, {
+    "id": 76,
+    "name": "Cheyenne Olson",
+    "reportsTo": 63,
+    "phone": "(241) 645-0257",
+    "extension": 9181,
+    "hireDate": new Date("2015-05-19T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 5
+}, {
+    "id": 78,
+    "name": "Rinah Simon",
+    "reportsTo": 11,
+    "phone": "(285) 912-5271",
+    "extension": 7795,
+    "hireDate": new Date("2012-10-11T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 4
+}, {
+    "id": 79,
+    "name": "Duncan Mathews",
+    "reportsTo": 64,
+    "phone": "(790) 971-9709",
+    "extension": 4573,
+    "hireDate": new Date("2011-08-21T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "Developer",
+    "timeInPosition": 3
+}, {
+    "id": 82,
+    "name": "Yael Walters",
+    "reportsTo": 69,
+    "phone": "(311) 489-8191",
+    "extension": 6520,
+    "hireDate": new Date("2013-07-04T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 6
+}, {
+    "id": 75,
+    "name": "Eric Russell",
+    "reportsTo": 63,
+    "phone": "(516) 575-8505",
+    "extension": 2224,
+    "hireDate": new Date("2012-10-28T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 3
+}, {
+    "id": 55,
+    "name": "Summer Mosley",
+    "reportsTo": 46,
+    "phone": "(784) 962-2301",
+    "extension": 5492,
+    "hireDate": new Date("2010-03-02T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "QA",
+    "timeInPosition": 5
+}, {
+    "id": 59,
+    "name": "Keiko Espinoza",
+    "reportsTo": 46,
+    "phone": "(226) 600-5305",
+    "extension": 9363,
+    "hireDate": new Date("2011-09-18T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "QA",
+    "timeInPosition": 4
+}, {
+    "id": 72,
+    "name": "Stacey Lynn",
+    "reportsTo": 40,
+    "phone": "(140) 772-7509",
+    "extension": 8396,
+    "hireDate": new Date("2014-07-31T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "QA",
+    "timeInPosition": 1
+}, {
+    "id": 38,
+    "name": "Elton Tucker",
+    "reportsTo": 69,
+    "phone": "(988) 930-9331",
+    "extension": 9216,
+    "hireDate": new Date("2015-06-04T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 1
+}, {
+    "id": 71,
+    "name": "Flavia Short",
+    "reportsTo": 63,
+    "phone": "(370) 133-9238",
+    "extension": 6390,
+    "hireDate": new Date("2013-02-21T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 0
+}, {
+    "id": 61,
+    "name": "Candace Pickett",
+    "reportsTo": 46,
+    "phone": "(120) 117-7475",
+    "extension": 5178,
+    "hireDate": new Date("2010-05-06T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 0
+}, {
+    "id": 65,
+    "name": "Thomas Terry",
+    "reportsTo": 63,
+    "phone": "(764) 831-4248",
+    "extension": 3574,
+    "hireDate": new Date("2015-06-15T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "Support",
+    "timeInPosition": 2
+}, {
+    "id": 62,
+    "name": "Palmer Gregory",
+    "reportsTo": 64,
+    "phone": "(360) 430-2505",
+    "extension": 4337,
+    "hireDate": new Date("2014-08-30T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 4
+}, {
+    "id": 12,
+    "name": "Jamalia Wallace",
+    "reportsTo": 64,
+    "phone": "(611) 391-8016",
+    "extension": 1952,
+    "hireDate": new Date("2011-09-08T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 3
+}, {
+    "id": 66,
+    "name": "Gloria Freeman",
+    "reportsTo": 53,
+    "phone": "(344) 950-9168",
+    "extension": 4738,
+    "hireDate": new Date("2013-05-06T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 0
+} ];
diff --git a/vue-options-api-demos/dropdowns/combobox/grouping/filtering/main.js b/vue-options-api-demos/dropdowns/combobox/grouping/filtering/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/grouping/filtering/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/grouping/filtering/main.vue b/vue-options-api-demos/dropdowns/combobox/grouping/filtering/main.vue
new file mode 100644
index 00000000..9eee11e8
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/grouping/filtering/main.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <ComboBox
+    :data-items="groupedData"
+    :text-field="'name'"
+    :placeholder="'Please select ...'"
+    :group-field="'position'"
+    :filterable="true"
+    @filterchange="filterChange"
+    :style="{
+      width: '300px',
+    }"
+  />
+</div>
+</template>
+<script>
+import { ComboBox } from "@progress/kendo-vue-dropdowns";
+import { groupBy, filterBy } from "@progress/kendo-data-query";
+import { employees } from "./grouping-data.js";
+
+export default {
+  components: {
+    ComboBox,
+  },
+  methods: {
+    filterChange(event) {
+      this.groupedData = this.filterData(event.filter);
+    },
+    filterData(filter) {
+      const data = employees.slice();
+      return groupBy(filterBy(data, filter), [
+        { field: "position" },
+      ]).reduce((res, group) => [...res, ...group.items], []);
+    },
+  },
+  data() {
+    return {
+      groupedData: groupBy(employees, [{ field: "position" }]).reduce(
+        (res, group) => [...res, ...group.items],
+        []
+      ),
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/grouping/virtualization/main.js b/vue-options-api-demos/dropdowns/combobox/grouping/virtualization/main.js
new file mode 100644
index 00000000..3a6df88d
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/grouping/virtualization/main.js
@@ -0,0 +1,4 @@
+import { createApp } from "vue";
+import App from "./main.vue";
+
+createApp(App).mount("#app");
diff --git a/vue-options-api-demos/dropdowns/combobox/grouping/virtualization/main.vue b/vue-options-api-demos/dropdowns/combobox/grouping/virtualization/main.vue
new file mode 100644
index 00000000..4f4ee38d
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/grouping/virtualization/main.vue
@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <combobox
+      :style="{ width: '230px' }"
+      :data-items="subsetData"
+      :data-item-key="'id'"
+      :text-field="'name'"
+      :group-field="'title'"
+      :virtual="virtual"
+      @pagechange="pageChange"
+      :popup-settings="popupSettings"
+    ></combobox>
+  </div>
+</template>
+<script>
+import { ComboBox } from "@progress/kendo-vue-dropdowns";
+import { groupBy } from "@progress/kendo-data-query";
+
+const total = 500;
+const pageSize = 30;
+
+function createRandomData(count) {
+  const firstNames = [
+    "Nancy",
+    "Andrew",
+    "Janet",
+    "Margaret",
+    "Steven",
+    "Michael",
+    "Robert",
+    "Anne",
+    "Nige",
+  ];
+  const lastNames = [
+    "Davolio",
+    "Fuller",
+    "Leverling",
+    "Peacock",
+    "Buchanan",
+    "Suyama",
+    "King",
+    "Callahan",
+    "Dodsworth",
+    "White",
+  ];
+  const titles = [
+    "Accountant",
+    "Vice President, Sales",
+    "Sales Representative",
+    "Technical Support",
+    "Sales Manager",
+    "Web Designer",
+    "Software Developer",
+    "QA",
+    "Project Manager",
+  ];
+
+  return Array(count)
+    .fill({})
+    .map((_, idx) => ({
+      id: idx,
+      name:
+        firstNames[Math.floor(Math.random() * firstNames.length)] +
+        " " +
+        lastNames[Math.floor(Math.random() * lastNames.length)],
+      title: titles[Math.floor(Math.random() * titles.length)],
+    }));
+}
+const employees = groupBy(createRandomData(total), [{ field: "title" }]).reduce(
+  (res, group) => [...res, ...group.items],
+  []
+);
+
+export default {
+  components: {
+    combobox: ComboBox,
+  },
+  data: function () {
+    return {
+      skip: 0,
+      pageSize: pageSize,
+      popupSettings: {
+        height: "250px",
+      },
+      employees: employees,
+    };
+  },
+  computed: {
+    virtual: function () {
+      return {
+        total: total,
+        pageSize: pageSize,
+        skip: this.skip,
+      };
+    },
+    subsetData() {
+      return employees.slice(this.skip, this.skip + this.pageSize);
+    },
+  },
+  methods: {
+    pageChange(event) {
+      console.log("Page change")
+      this.skip = event.page.skip;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/header-footer/FooterRender.vue b/vue-options-api-demos/dropdowns/combobox/header-footer/FooterRender.vue
new file mode 100644
index 00000000..328e96da
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/header-footer/FooterRender.vue
@@ -0,0 +1,12 @@
+<template>
+<span>
+    footer
+</span>
+</template>
+<script>
+export default {
+    props: {
+        currentValue: String
+    }
+}
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/header-footer/HeaderRender.vue b/vue-options-api-demos/dropdowns/combobox/header-footer/HeaderRender.vue
new file mode 100644
index 00000000..dd7e5d25
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/header-footer/HeaderRender.vue
@@ -0,0 +1,12 @@
+<template>
+<span>
+    header
+</span>
+</template>
+<script>
+export default {
+    props: {
+        currentValue: String
+    }
+}
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/header-footer/countries.js b/vue-options-api-demos/dropdowns/combobox/header-footer/countries.js
new file mode 100644
index 00000000..45b6cb20
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/header-footer/countries.js
@@ -0,0 +1,52 @@
+export default [
+    "Albania",
+    "Andorra",
+    "Armenia",
+    "Austria",
+    "Azerbaijan",
+    "Belarus",
+    "Belgium",
+    "Bosnia & Herzegovina",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czech Republic",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Georgia",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Iceland",
+    "Ireland",
+    "Italy",
+    "Kosovo",
+    "Latvia",
+    "Liechtenstein",
+    "Lithuania",
+    "Luxembourg",
+    "Macedonia",
+    "Malta",
+    "Moldova",
+    "Monaco",
+    "Montenegro",
+    "Netherlands",
+    "Norway",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Russia",
+    "San Marino",
+    "Serbia",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden",
+    "Switzerland",
+    "Turkey",
+    "Ukraine",
+    "United Kingdom",
+    "Vatican City"
+];
diff --git a/vue-options-api-demos/dropdowns/combobox/header-footer/main.js b/vue-options-api-demos/dropdowns/combobox/header-footer/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/header-footer/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/header-footer/main.vue b/vue-options-api-demos/dropdowns/combobox/header-footer/main.vue
new file mode 100644
index 00000000..c3297f27
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/header-footer/main.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+         <p>Type the name of a European country:</p>
+         <combobox
+          :style="{ width: '230px' }"
+            :data-items="countries"
+            :header="header"
+            :footer="footer"
+        >
+         <template v-slot:myHeader="{props}">
+            <header1  />
+        </template>
+         <template v-slot:myFooter="{props}">
+            <footer1 />
+        </template>
+        </combobox>
+    </div>
+</template>
+<script>
+import countries from './countries';
+import { ComboBox } from '@progress/kendo-vue-dropdowns';
+import HeaderRender from './HeaderRender.vue';
+import FooterRender from './FooterRender.vue';
+
+export default {
+    components: {
+        'combobox': ComboBox,
+        'header1': HeaderRender,
+        'footer1': FooterRender
+    },
+    data: function () {
+        return {
+            header: 'myHeader',
+            footer: 'myFooter',
+            countries: countries
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/item-render/ItemRender.vue b/vue-options-api-demos/dropdowns/combobox/item-render/ItemRender.vue
new file mode 100644
index 00000000..50ceb09f
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/item-render/ItemRender.vue
@@ -0,0 +1,27 @@
+<template>
+<li class="k-item" @click="handleClick">
+    <span :style="{ color: '#00F' }">
+            {{dataItem}} {{index}}
+    </span>
+  </li>
+</template>
+<script>
+export default {
+    emits: {
+        click: null
+    },
+    props: {
+        id: String,
+        index: Number,
+        dataItem: [Object, String, Number],
+        textField: String,
+        focused: Boolean,
+        selected: Boolean,
+    },
+    methods: {
+        handleClick: function(e){
+            this.$emit('click', e);
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/item-render/countries.js b/vue-options-api-demos/dropdowns/combobox/item-render/countries.js
new file mode 100644
index 00000000..45b6cb20
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/item-render/countries.js
@@ -0,0 +1,52 @@
+export default [
+    "Albania",
+    "Andorra",
+    "Armenia",
+    "Austria",
+    "Azerbaijan",
+    "Belarus",
+    "Belgium",
+    "Bosnia & Herzegovina",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czech Republic",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Georgia",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Iceland",
+    "Ireland",
+    "Italy",
+    "Kosovo",
+    "Latvia",
+    "Liechtenstein",
+    "Lithuania",
+    "Luxembourg",
+    "Macedonia",
+    "Malta",
+    "Moldova",
+    "Monaco",
+    "Montenegro",
+    "Netherlands",
+    "Norway",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Russia",
+    "San Marino",
+    "Serbia",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden",
+    "Switzerland",
+    "Turkey",
+    "Ukraine",
+    "United Kingdom",
+    "Vatican City"
+];
diff --git a/vue-options-api-demos/dropdowns/combobox/item-render/main.js b/vue-options-api-demos/dropdowns/combobox/item-render/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/item-render/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/item-render/main.vue b/vue-options-api-demos/dropdowns/combobox/item-render/main.vue
new file mode 100644
index 00000000..843457d5
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/item-render/main.vue
@@ -0,0 +1,37 @@
+<template>
+   <div>
+         <p>Type the name of a European country:</p>
+         <combobox
+          :style="{ width: '230px' }"
+            :data-items="countries"
+            :item-render="itemRender"
+        >
+        <template v-slot:myTemplate="{props}">
+            <custom
+                :style="props.style"
+                :class="props.itemClass"
+                :data-item="props.dataItem"
+                :index="props.index" @click="(ev) => props.onClick(ev)" />
+        </template>
+        </combobox>
+    </div>
+</template>
+<script>
+import countries from './countries';
+import { ComboBox } from '@progress/kendo-vue-dropdowns';
+import ItemRender from './ItemRender.vue';
+
+export default {
+    components: {
+        'combobox': ComboBox,
+        'custom': ItemRender
+    },
+    data: function () {
+        return {
+            itemRender: 'myTemplate',
+            countries: countries
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/keyboard-navigation/main.js b/vue-options-api-demos/dropdowns/combobox/keyboard-navigation/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/keyboard-navigation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/keyboard-navigation/main.vue b/vue-options-api-demos/dropdowns/combobox/keyboard-navigation/main.vue
new file mode 100644
index 00000000..31bcf195
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/keyboard-navigation/main.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="example-wrapper">
+        <p>Favorite sport:</p>
+         <combobox
+          :style="{ width: '230px' }"
+            :data-items="sports"
+            :allow-custom="true"
+        ></combobox>
+    </div>
+</template>
+<script>
+import { ComboBox } from '@progress/kendo-vue-dropdowns';
+
+export default {
+    components: {
+        'combobox': ComboBox
+    },
+    data: function(){
+         return {
+            sports: ["Baseball", "Basketball", "Cricket", 
+            "Field Hockey", "Football", "Table Tennis", "Tennis", 
+            "Volleyball" ]
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/nodata-render/NoDataRender.vue b/vue-options-api-demos/dropdowns/combobox/nodata-render/NoDataRender.vue
new file mode 100644
index 00000000..8beb5641
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/nodata-render/NoDataRender.vue
@@ -0,0 +1,12 @@
+<template>
+<h4 :style="{ fontSize: '1em' }">
+            <span class="k-icon k-i-warning" :style="{ fontSize: '2.5em' }" />
+            <br /><br />
+            no data here
+        </h4>`
+</template>
+<script>
+export default {
+    
+}
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/nodata-render/main.js b/vue-options-api-demos/dropdowns/combobox/nodata-render/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/nodata-render/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/nodata-render/main.vue b/vue-options-api-demos/dropdowns/combobox/nodata-render/main.vue
new file mode 100644
index 00000000..4707920e
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/nodata-render/main.vue
@@ -0,0 +1,31 @@
+<template>
+ <div>
+         <p>Type the name of a European country:</p>
+         <combobox
+          :style="{ width: '230px' }"
+            :data-items="[]"
+            :list-no-data-render="listNoDataRender"
+        >
+          <template v-slot:myTemplate>
+            <custom />
+        </template>
+        </combobox>
+    </div>
+</template>
+<script>
+import { ComboBox } from '@progress/kendo-vue-dropdowns';
+import NoDataRender from './NoDataRender.vue';
+
+export default {
+    components: {
+        'combobox': ComboBox,
+         'custom': NoDataRender
+    },
+    data: function(){
+        return {
+           listNoDataRender: 'myTemplate',
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/suggest/countries.js b/vue-options-api-demos/dropdowns/combobox/suggest/countries.js
new file mode 100644
index 00000000..45b6cb20
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/suggest/countries.js
@@ -0,0 +1,52 @@
+export default [
+    "Albania",
+    "Andorra",
+    "Armenia",
+    "Austria",
+    "Azerbaijan",
+    "Belarus",
+    "Belgium",
+    "Bosnia & Herzegovina",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czech Republic",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Georgia",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Iceland",
+    "Ireland",
+    "Italy",
+    "Kosovo",
+    "Latvia",
+    "Liechtenstein",
+    "Lithuania",
+    "Luxembourg",
+    "Macedonia",
+    "Malta",
+    "Moldova",
+    "Monaco",
+    "Montenegro",
+    "Netherlands",
+    "Norway",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Russia",
+    "San Marino",
+    "Serbia",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden",
+    "Switzerland",
+    "Turkey",
+    "Ukraine",
+    "United Kingdom",
+    "Vatican City"
+];
diff --git a/vue-options-api-demos/dropdowns/combobox/suggest/main.js b/vue-options-api-demos/dropdowns/combobox/suggest/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/suggest/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/suggest/main.vue b/vue-options-api-demos/dropdowns/combobox/suggest/main.vue
new file mode 100644
index 00000000..ba69f316
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/suggest/main.vue
@@ -0,0 +1,48 @@
+<template>
+ <div class="example-wrapper">
+        <div class="col-xs-12 col-sm-6 example-col">
+            <p>ComboBox in Uncontrolled Mode</p>
+             <combobox
+          :style="{ width: '230px' }"
+                :data-items="countries"
+                :suggest="true"
+                :placeholder="'e.g. Austria'"
+            ></combobox>
+        </div>
+        <div class="col-xs-12 col-sm-6 example-col">
+            <p>ComboBox in Controlled Mode</p>
+             <combobox
+          :style="{ width: '230px' }"
+                :data-items="countries"
+                :suggest="suggest"
+                :placeholder="'e.g. Austria'"
+                :value="value"
+                @change="handleChange"
+            ></combobox>
+        </div>
+    </div>
+</template>
+<script>
+import countries from './countries';
+import { ComboBox } from '@progress/kendo-vue-dropdowns';
+
+export default {
+    components: {
+        'combobox': ComboBox
+    },
+    data: function(){
+        return {
+            countries: countries,
+            value: '', 
+            suggest: ''
+        }
+    },
+    methods:{
+        handleChange (event) {
+            this.value = event.target.value;
+            this.suggest = event.suggestion ? event.suggestion.value : '';
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/virtualization/basic/main.js b/vue-options-api-demos/dropdowns/combobox/virtualization/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/virtualization/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/virtualization/basic/main.vue b/vue-options-api-demos/dropdowns/combobox/virtualization/basic/main.vue
new file mode 100644
index 00000000..385a1f25
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/virtualization/basic/main.vue
@@ -0,0 +1,57 @@
+<template>
+    <combobox
+          :style="{ width: '230px' }"
+            :data-items="subsetData"
+            :data-item-key="'id'"
+            :text-field="'text'"
+            :virtual="virtual"
+            @pagechange="pageChange"
+            :popup-settings="popupSettings"
+    ></combobox>
+</template>
+<script>
+import { ComboBox } from '@progress/kendo-vue-dropdowns';
+
+const total = 5000;
+const pageSize = 12;
+const allData = [];
+
+for (let i = 0; i < total; i++) {
+    allData.push({ id: i, text: 'Item ' + i });
+}
+
+export default {
+    components: {
+        'combobox': ComboBox
+    },
+     data: function(){
+        return {
+            subsetData: allData.slice(0, pageSize),
+            skip: 0,
+            popupSettings: {
+                height: '250px'
+            }
+        }
+    },
+    computed: {
+        virtual: function(){
+            return {
+                total: total,
+                pageSize: pageSize,
+                skip: this.skip
+            }
+        }
+    },
+    methods: {
+        pageChange (event) {
+            const skip = event.page.skip;
+            const take = event.page.take;
+            const newSubsetData = allData.slice(skip, skip + take);
+    
+            this.subsetData = newSubsetData;
+            this.skip = skip;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/combobox/virtualization/filtering/main.js b/vue-options-api-demos/dropdowns/combobox/virtualization/filtering/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/virtualization/filtering/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/combobox/virtualization/filtering/main.vue b/vue-options-api-demos/dropdowns/combobox/virtualization/filtering/main.vue
new file mode 100644
index 00000000..62e2c112
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/combobox/virtualization/filtering/main.vue
@@ -0,0 +1,71 @@
+<template>
+  <combobox
+          :style="{ width: '230px' }"
+            :data-items="subsetData"
+            :data-item-key="'id'"
+            :text-field="'text'"
+            :virtual="virtual"
+            @pagechange="pageChange"
+            :popup-settings="popupSettings"
+            :filterable="true"
+            @filterchange="onFilterChange"
+    ></combobox>
+</template>
+<script>
+import { ComboBox } from '@progress/kendo-vue-dropdowns';
+import { filterBy } from '@progress/kendo-data-query';
+
+const total = 5000;
+const pageSize = 12;
+const allData = [];
+
+for (let i = 0; i < total; i++) {
+    allData.push({ id: i, text: 'Item ' + i });
+}
+export default {
+    components: {
+        'combobox': ComboBox
+    },
+    data: function(){
+        return {
+            subsetData: allData.slice(0, pageSize),
+            skip: 0,
+            total: total,
+            popupSettings: {
+                height: '250px'
+            }
+        }
+    },
+    created(){
+        this.filteredData = allData.slice();
+    },
+    computed: {
+        virtual: function(){
+            return {
+                total: this.total,
+                pageSize: pageSize,
+                skip: this.skip
+            }
+        }
+    },
+    methods: {
+        onFilterChange (event) {
+            this.filteredData = filterBy(allData.slice(), event.filter);
+            const data = this.filteredData.slice(0, pageSize);
+    
+            this.subsetData = data;
+            this.skip = 0;
+            this.total = this.filteredData.length;
+        },
+        pageChange (event) {
+            const skip = event.page.skip;
+            const take = event.page.take;
+            const newSubsetData = allData.slice(skip, skip + take);
+    
+            this.subsetData = newSubsetData;
+            this.skip = skip;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/common/es.json b/vue-options-api-demos/dropdowns/common/es.json
new file mode 100644
index 00000000..dc3df71d
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/common/es.json
@@ -0,0 +1,6 @@
+{
+    "dropdowns": {
+        "nodata": "DATOS NO ENCONTRADOS.",
+        "clear": "claro"
+    }
+}
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/adaptive-rendering-grouping/grouping-data.js b/vue-options-api-demos/dropdowns/dropdownlist/adaptive-rendering-grouping/grouping-data.js
new file mode 100644
index 00000000..9f42ec6e
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/adaptive-rendering-grouping/grouping-data.js
@@ -0,0 +1,200 @@
+export const employees = [
+    {
+        id: 11,
+        name: "Hyacinth Hood",
+        reportsTo: 32,
+        phone: "(889) 345-2438",
+        extension: 8564,
+        hireDate: new Date("2014-02-03T20:00:00.000Z"),
+        fullTime: true,
+        position: "Team Lead",
+        timeInPosition: 1,
+    },
+    {
+        id: 40,
+        name: "Karleigh Garza",
+        reportsTo: 52,
+        phone: "(370) 983-8796",
+        extension: 4044,
+        hireDate: new Date("2014-03-10T00:00:00.000Z"),
+        fullTime: true,
+        position: "Team Lead",
+        timeInPosition: 1,
+    },
+    {
+        id: 46,
+        name: "Darrel Solis",
+        reportsTo: 43,
+        phone: "(327) 977-0216",
+        extension: 7779,
+        hireDate: new Date("2015-04-25T00:00:00.000Z"),
+        fullTime: true,
+        position: "Team Lead",
+        timeInPosition: 4,
+    },
+    {
+        id: 76,
+        name: "Cheyenne Olson",
+        reportsTo: 63,
+        phone: "(241) 645-0257",
+        extension: 9181,
+        hireDate: new Date("2015-05-19T00:00:00.000Z"),
+        fullTime: true,
+        position: "Developer",
+        timeInPosition: 5,
+    },
+    {
+        id: 78,
+        name: "Rinah Simon",
+        reportsTo: 11,
+        phone: "(285) 912-5271",
+        extension: 7795,
+        hireDate: new Date("2012-10-11T00:00:00.000Z"),
+        fullTime: true,
+        position: "Developer",
+        timeInPosition: 4,
+    },
+    {
+        id: 79,
+        name: "Duncan Mathews",
+        reportsTo: 64,
+        phone: "(790) 971-9709",
+        extension: 4573,
+        hireDate: new Date("2011-08-21T00:00:00.000Z"),
+        fullTime: false,
+        position: "Developer",
+        timeInPosition: 3,
+    },
+    {
+        id: 82,
+        name: "Yael Walters",
+        reportsTo: 69,
+        phone: "(311) 489-8191",
+        extension: 6520,
+        hireDate: new Date("2013-07-04T00:00:00.000Z"),
+        fullTime: true,
+        position: "Developer",
+        timeInPosition: 6,
+    },
+    {
+        id: 75,
+        name: "Eric Russell",
+        reportsTo: 63,
+        phone: "(516) 575-8505",
+        extension: 2224,
+        hireDate: new Date("2012-10-28T00:00:00.000Z"),
+        fullTime: true,
+        position: "Developer",
+        timeInPosition: 3,
+    },
+    {
+        id: 55,
+        name: "Summer Mosley",
+        reportsTo: 46,
+        phone: "(784) 962-2301",
+        extension: 5492,
+        hireDate: new Date("2010-03-02T00:00:00.000Z"),
+        fullTime: true,
+        position: "QA",
+        timeInPosition: 5,
+    },
+    {
+        id: 59,
+        name: "Keiko Espinoza",
+        reportsTo: 46,
+        phone: "(226) 600-5305",
+        extension: 9363,
+        hireDate: new Date("2011-09-18T00:00:00.000Z"),
+        fullTime: true,
+        position: "QA",
+        timeInPosition: 4,
+    },
+    {
+        id: 72,
+        name: "Stacey Lynn",
+        reportsTo: 40,
+        phone: "(140) 772-7509",
+        extension: 8396,
+        hireDate: new Date("2014-07-31T00:00:00.000Z"),
+        fullTime: false,
+        position: "QA",
+        timeInPosition: 1,
+    },
+    {
+        id: 38,
+        name: "Elton Tucker",
+        reportsTo: 69,
+        phone: "(988) 930-9331",
+        extension: 9216,
+        hireDate: new Date("2015-06-04T00:00:00.000Z"),
+        fullTime: true,
+        position: "Support",
+        timeInPosition: 1,
+    },
+    {
+        id: 71,
+        name: "Flavia Short",
+        reportsTo: 63,
+        phone: "(370) 133-9238",
+        extension: 6390,
+        hireDate: new Date("2013-02-21T00:00:00.000Z"),
+        fullTime: true,
+        position: "Support",
+        timeInPosition: 0,
+    },
+    {
+        id: 61,
+        name: "Candace Pickett",
+        reportsTo: 46,
+        phone: "(120) 117-7475",
+        extension: 5178,
+        hireDate: new Date("2010-05-06T00:00:00.000Z"),
+        fullTime: true,
+        position: "Support",
+        timeInPosition: 0,
+    },
+    {
+        id: 65,
+        name: "Thomas Terry",
+        reportsTo: 63,
+        phone: "(764) 831-4248",
+        extension: 3574,
+        hireDate: new Date("2015-06-15T00:00:00.000Z"),
+        fullTime: false,
+        position: "Support",
+        timeInPosition: 2,
+    },
+    {
+        id: 62,
+        name: "Palmer Gregory",
+        reportsTo: 64,
+        phone: "(360) 430-2505",
+        extension: 4337,
+        hireDate: new Date("2014-08-30T00:00:00.000Z"),
+        fullTime: true,
+        position: "Designer",
+        timeInPosition: 4,
+    },
+    {
+        id: 12,
+        name: "Jamalia Wallace",
+        reportsTo: 64,
+        phone: "(611) 391-8016",
+        extension: 1952,
+        hireDate: new Date("2011-09-08T00:00:00.000Z"),
+        fullTime: true,
+        position: "Designer",
+        timeInPosition: 3,
+    },
+    {
+        id: 66,
+        name: "Gloria Freeman",
+        reportsTo: 53,
+        phone: "(344) 950-9168",
+        extension: 4738,
+        hireDate: new Date("2013-05-06T00:00:00.000Z"),
+        fullTime: true,
+        position: "Designer",
+        timeInPosition: 0,
+    },
+];
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/adaptive-rendering-grouping/main.js b/vue-options-api-demos/dropdowns/dropdownlist/adaptive-rendering-grouping/main.js
new file mode 100644
index 00000000..3a6df88d
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/adaptive-rendering-grouping/main.js
@@ -0,0 +1,4 @@
+import { createApp } from "vue";
+import App from "./main.vue";
+
+createApp(App).mount("#app");
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/adaptive-rendering-grouping/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/adaptive-rendering-grouping/main.vue
new file mode 100644
index 00000000..b5698054
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/adaptive-rendering-grouping/main.vue
@@ -0,0 +1,28 @@
+<template>
+  <DropDownList
+    :data-items="groupedData"
+    :text-field="'name'"
+    :group-field="'position'"
+    :style="{
+      width: '300px',
+    }"
+    :adaptive="true"
+    :adaptive-title="'Adaptive Grouping'"
+  />
+</template>
+<script>
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+import { groupBy } from '@progress/kendo-data-query';
+import { employees } from './grouping-data.js';
+
+export default {
+  components: {
+    DropDownList
+},
+  data() {
+    return {
+      groupedData: groupBy(employees, [{ field: 'position' }]).reduce((res, group) =>  [...res, ...group.items], [])
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/adaptive-rendering/main.js b/vue-options-api-demos/dropdowns/dropdownlist/adaptive-rendering/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/adaptive-rendering/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/adaptive-rendering/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/adaptive-rendering/main.vue
new file mode 100644
index 00000000..7762a4a5
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/adaptive-rendering/main.vue
@@ -0,0 +1,56 @@
+<template>
+    <div>
+      <div>T-shirt size:</div>
+      <DropDownList
+        :data-items="data"
+        :text-field="'text'"
+        :data-item-key="'id'"
+        :filterable="true"
+        @filterchange="handleFilterchange"
+        :adaptive="true"
+        :adaptive-title="'Choose size'"
+        :style="{
+          width: '300px'
+        }"
+      />
+    </div>
+</template>
+<script>
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+import { filterBy } from '@progress/kendo-data-query';
+
+const allData = [
+  {
+    id: 1,
+    text: "Small",
+  },
+  {
+    id: 2,
+    text: "Medium",
+  },
+  {
+    id: 3,
+    text: "Large",
+  },
+]
+
+export default {
+  components: {
+    DropDownList
+  },
+  data: function () {
+    return {
+      data: allData,
+    };
+  },
+  methods: {
+    filterData(filter) {
+      const filteredData = allData.slice();
+      return filterBy(filteredData, filter);
+    },
+    handleFilterchange(event) {
+      this.data = this.filterData(event.filter)
+    }
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/appearance/configurator/DropDownStyleConfigurator.vue b/vue-options-api-demos/dropdowns/dropdownlist/appearance/configurator/DropDownStyleConfigurator.vue
new file mode 100644
index 00000000..c1b36044
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/appearance/configurator/DropDownStyleConfigurator.vue
@@ -0,0 +1,105 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Fill Mode
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="fillModes"
+              :value="fillMode"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleFillModeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+    fillMode: String,
+    rounded: String,
+  },
+  emits: [
+    "sizechange",
+    "fillmodechange",
+    "roundedchange",
+  ],
+  data() {
+    return {
+      sizes: ["small", "medium", "large"],
+      fillModes: ["solid", "outline", "flat"],
+      roundedOptions: ["small", "medium", "large", "full"],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleFillModeChange(event) {
+      this.$emit("fillmodechange", event);
+    },
+    handleRoundedChange(event) {
+      this.$emit("roundedchange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/appearance/configurator/main.js b/vue-options-api-demos/dropdowns/dropdownlist/appearance/configurator/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/appearance/configurator/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/appearance/configurator/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/appearance/configurator/main.vue
new file mode 100644
index 00000000..ac002565
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/appearance/configurator/main.vue
@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <DropDownStyleConfigurator
+      :size="size"
+      @sizechange="setSize"
+      :fill-mode="fillMode"
+      @fillmodechange="setFillMode"
+      :rounded="rounded"
+      @roundedchange="setRounded"
+    />
+    <DropDownList
+      :style="{ width: '230px'}"
+      :size="size"
+      :fill-mode="fillMode"
+      :rounded="rounded"
+      :data-items="[
+        'X-Small',
+        'Small',
+        'Medium',
+        'Large',
+        'X-Large',
+        '2X-Large',
+      ]"
+    />
+  </div>
+</template>
+<script>
+import DropDownStyleConfigurator from "./DropDownStyleConfigurator.vue";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    DropDownStyleConfigurator,
+    DropDownList,
+  },
+  data() {
+    return {
+      size: "medium",
+      rounded: "medium",
+      fillMode: "solid",
+    };
+  },
+  methods: {
+    setRounded(event) {
+      this.rounded = event.value;
+    },
+    setSize(event) {
+      this.size = event.value;
+    },
+    setFillMode(event) {
+      this.fillMode = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/appearance/fill-mode/main.js b/vue-options-api-demos/dropdowns/dropdownlist/appearance/fill-mode/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/appearance/fill-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/appearance/fill-mode/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/appearance/fill-mode/main.vue
new file mode 100644
index 00000000..7e383a27
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/appearance/fill-mode/main.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="example-config">
+    <div class="demo">
+      <span class="wrapper">
+        <span>Flat: </span>
+        <DropDownList
+          :style="{ width: '170px' }"
+          :fill-mode="'flat'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Solid: </span>
+        <DropDownList
+          :style="{ width: '170px' }"
+          :fill-mode="'solid'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Outline: </span>
+        <DropDownList
+          :style="{ width: '170px' }"
+          :fill-mode="'outline'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Custom fill mode:</span>
+        <DropDownList
+          :class="'custom-dropdownlist'"
+          :fill-mode="null"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  components: {
+    DropDownList,
+  },
+};
+</script>
+
+<style>
+.custom-dropdownlist {
+  width: 200px;
+  background-color: #00aead;
+  border: 2px solid #bfd843;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/appearance/rounded/main.js b/vue-options-api-demos/dropdowns/dropdownlist/appearance/rounded/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/appearance/rounded/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/appearance/rounded/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/appearance/rounded/main.vue
new file mode 100644
index 00000000..ee431e02
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/appearance/rounded/main.vue
@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Small roundness: </span>
+        <DropDownList
+          :style="{ width: '170px' }"
+          :rounded="'small'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Medium roundness: </span>
+        <DropDownList
+          :style="{ width: '170px' }"
+          :rounded="'medium'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Large roundness: </span>
+        <DropDownList
+          :style="{ width: '170px' }"
+          :rounded="'large'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Full roundness: </span>
+        <DropDownList
+          :style="{ width: '170px' }"
+          :rounded="'full'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Custom roundness:</span>
+        <DropDownList
+          :class="'custom-dropdownlist'"
+          :rounded="null"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  components: {
+    DropDownList,
+  },
+};
+</script>
+
+<style>
+.custom-dropdownlist {
+  width: 200px;
+  border-bottom-right-radius: 15px;
+  border-top-left-radius: 15px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/appearance/size/main.js b/vue-options-api-demos/dropdowns/dropdownlist/appearance/size/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/appearance/size/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/appearance/size/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/appearance/size/main.vue
new file mode 100644
index 00000000..98901cb6
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/appearance/size/main.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Small: </span>
+        <DropDownList
+          :style="{ width: '170px' }"
+          :size="'small'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Medium: </span>
+        <DropDownList
+          :style="{ width: '170px' }"
+          :size="'medium'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Large: </span>
+        <DropDownList
+          :style="{ width: '170px' }"
+          :size="'large'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+    <span class="wrapper">
+      <span>Custom size:</span>
+      <DropDownList
+        :class="'custom-dropdownlist'"
+        :size="null"
+        :data-items="[
+          'X-Small',
+          'Small',
+          'Medium',
+          'Large',
+          'X-Large',
+          '2X-Large',
+        ]"
+      />
+    </span>
+  </div>
+</template>
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  components: {
+    DropDownList,
+  },
+};
+</script>
+
+<style>
+.custom-dropdownlist {
+  height: 40px;
+  width: 200px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/basic/main.js b/vue-options-api-demos/dropdowns/dropdownlist/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/basic/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/basic/main.vue
new file mode 100644
index 00000000..0b663932
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/basic/main.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+         <dropdownlist
+            :style="{ width: '230px' }" 
+            :data-items='sports'
+            :default-item="'Select sport ...'"
+        >
+        </dropdownlist>
+    </div>
+</template>
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+
+export default {
+    components: {
+        'dropdownlist': DropDownList
+    },
+    data: function () {
+        return {
+            sports: [ 'Basketball', 'Football', 'Tennis', 'Volleyball' ],
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/binding/main.js b/vue-options-api-demos/dropdowns/dropdownlist/binding/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/binding/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/binding/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/binding/main.vue
new file mode 100644
index 00000000..6a4cf8c0
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/binding/main.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <div class="example-config">Selected Value: {{ value }}</div>
+    <div :style="{ display: 'inline-block', 'padding-right': '20px' }">
+      value and change
+      <br />
+      <DropDownList
+        :style="{ width: '230px' }"
+        :data-items="sports"
+        :text-field="'text'"
+        :data-item-key="'id'"
+        :value="value"
+        @change="handleChange"
+      >
+      </DropDownList>
+    </div>
+    <div :style="{ display: 'inline-block' }">
+      v-model
+      <br />
+      <DropDownList
+        :style="{ width: '230px' }"
+        :data-items="sports"
+        :text-field="'text'"
+        :data-item-key="'id'"
+        v-model="value"
+      >
+      </DropDownList>
+    </div>
+  </div>
+</template>
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  components: {
+    DropDownList,
+  },
+  data: function () {
+    return {
+      // Since the reference of the initial value is not from the 'sports' collection,
+      // 'dataItemKey' have to be set.
+      value: { text: 'Football', id: 2 },
+      sports: [
+        { text: 'Basketball', id: 1 },
+        { text: 'Football', id: 2 },
+        { text: 'Tennis', id: 3 },
+        { text: 'Volleyball', id: 4 },
+      ],
+    };
+  },
+  methods: {
+    handleChange(event) {
+      this.value = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/cascading/data.js b/vue-options-api-demos/dropdowns/dropdownlist/cascading/data.js
new file mode 100644
index 00000000..206f3369
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/cascading/data.js
@@ -0,0 +1,31 @@
+const dataCategories = [
+    { categoryName: "Beverages", categoryId: 1 },
+    { categoryName: "Condiments", categoryId: 2 },
+    { categoryName: "Seafood", categoryId: 3 }
+];
+
+const dataProducts = [
+    { productName: "Chai", productId: 1, categoryId: 1 },
+    { productName: "Chang", productId: 2, categoryId: 1 },
+    { productName: "Aniseed Syrup", productId: 3, categoryId: 2 },
+    { productName: "Genen Shouyu", productId: 4, categoryId: 2 },
+    { productName: "Ikura", productId: 5, categoryId: 3 },
+    { productName: "Konbu", productId: 6, categoryId: 3 }
+];
+
+const dataOrders = [
+    { orderName: "Cunewalde", orderId: 1, productId: 1 },
+    { orderName: "Albuquerque", orderId: 2, productId: 1 },
+    { orderName: "Geneva", orderId: 3, productId: 2 },
+    { orderName: "Graz", orderId: 4, productId: 2 },
+    { orderName: "London", orderId: 5, productId: 3 },
+    { orderName: "I. de Margarita", orderId: 6, productId: 3 },
+    { orderName: "Barquisimeto", orderId: 7, productId: 4 },
+    { orderName: "Brandenburg", orderId: 8, productId: 4 },
+    { orderName: "Cunewalde", orderId: 9, productId: 5 },
+    { orderName: "Mexico D.F.", orderId: 10, productId: 5 },
+    { orderName: "Mexico D.F.", orderId: 11, productId: 6 },
+    { orderName: "Rio de Janeiro", orderId: 12, productId: 6 }
+];
+
+export { dataCategories, dataProducts, dataOrders };
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/cascading/main.js b/vue-options-api-demos/dropdowns/dropdownlist/cascading/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/cascading/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/cascading/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/cascading/main.vue
new file mode 100644
index 00000000..c85a8ae4
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/cascading/main.vue
@@ -0,0 +1,96 @@
+<template>
+   <div>
+        <div :style="{ display: 'inline-block' }">
+            Categories
+            <br />
+             <dropdownlist
+                :style="{ width: '230px' }"
+                :data-items="dataCategories"
+                :text-field="'categoryName'"
+                @change="categoryChange"
+                :default-item="defaultItemCategory"
+                :value="category"
+            />
+        </div>
+        <div :style="{ display: 'inline-block', marginLeft: '30px' }">
+            Products
+            <br />
+             <dropdownlist
+                :style="{ width: '230px' }"
+                :disabled="!hasCategory"
+                :data-items="products"
+                :text-field="'productName'"
+                @change="productChange"
+                :default-item="defaultItemProduct"
+                :value="product"
+            />
+        </div>
+        <div :style="{ display: 'inline-block', marginLeft: '30px' }">
+            Orders
+            <br />
+             <dropdownlist
+                :style="{ width: '230px' }"
+                :disabled="!hasProduct"
+                :data-items="orders"
+                :text-Field="'orderName'"
+                @change="orderChange"
+                :default-item="defaultItemOrder"
+                :value="order"
+            />
+        </div>
+    </div>
+</template>
+<script>
+import { dataCategories, dataProducts, dataOrders } from './data.js';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+
+export default {
+    components: {
+        'dropdownlist': DropDownList
+    },
+     data: function () {
+        return {
+            defaultItemCategory: { categoryName: 'Select Category ...' },
+            defaultItemProduct: { productName: 'Select Product ...' },
+            defaultItemOrder: { orderName: 'Select Order ...' },
+            category: null,
+            product: null,
+            order: null,
+            orders: dataOrders,
+            products: dataProducts,
+            dataCategories: dataCategories
+        };
+    },
+    computed: {
+        hasCategory: function(){
+            return this.category && this.category !== this.defaultItemCategory;
+        },
+        hasProduct: function(){
+            return this.product && this.product !== this.defaultItemProduct;
+        } 
+    },
+    methods: {
+        categoryChange(event) {
+            const category = event.value;
+            const products = dataProducts.filter(product => product.categoryId === category.categoryId);
+    
+            this.category = category;
+            this.products = products;
+            this.product = null;
+            this.order = null;
+        },
+        productChange(event) {
+            const product = event.value;
+            const orders = dataOrders.filter(order => order.productId === product.productId);
+    
+            this.product = product;
+            this.orders = orders;
+            this.order = null;
+        },
+        orderChange (event) {
+            this.order = event.value;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/common/countries.js b/vue-options-api-demos/dropdowns/dropdownlist/common/countries.js
new file mode 100644
index 00000000..45b6cb20
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/common/countries.js
@@ -0,0 +1,52 @@
+export default [
+    "Albania",
+    "Andorra",
+    "Armenia",
+    "Austria",
+    "Azerbaijan",
+    "Belarus",
+    "Belgium",
+    "Bosnia & Herzegovina",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czech Republic",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Georgia",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Iceland",
+    "Ireland",
+    "Italy",
+    "Kosovo",
+    "Latvia",
+    "Liechtenstein",
+    "Lithuania",
+    "Luxembourg",
+    "Macedonia",
+    "Malta",
+    "Moldova",
+    "Monaco",
+    "Montenegro",
+    "Netherlands",
+    "Norway",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Russia",
+    "San Marino",
+    "Serbia",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden",
+    "Switzerland",
+    "Turkey",
+    "Ukraine",
+    "United Kingdom",
+    "Vatican City"
+];
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/default-item/basic/main.js b/vue-options-api-demos/dropdowns/dropdownlist/default-item/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/default-item/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/default-item/basic/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/default-item/basic/main.vue
new file mode 100644
index 00000000..0b663932
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/default-item/basic/main.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+         <dropdownlist
+            :style="{ width: '230px' }" 
+            :data-items='sports'
+            :default-item="'Select sport ...'"
+        >
+        </dropdownlist>
+    </div>
+</template>
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+
+export default {
+    components: {
+        'dropdownlist': DropDownList
+    },
+    data: function () {
+        return {
+            sports: [ 'Basketball', 'Football', 'Tennis', 'Volleyball' ],
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/default-item/object-values/main.js b/vue-options-api-demos/dropdowns/dropdownlist/default-item/object-values/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/default-item/object-values/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/default-item/object-values/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/default-item/object-values/main.vue
new file mode 100644
index 00000000..e2b201e5
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/default-item/object-values/main.vue
@@ -0,0 +1,32 @@
+<template>
+    <dropdownlist
+        :style="{ width: '230px' }"
+        :data-items="sports"
+        :text-field="'text'"
+        :default-item="defaultItem"
+    >
+    </dropdownlist>
+</template>
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+
+export default {
+    components: {
+        'dropdownlist': DropDownList
+    },
+    data: function () {
+        return {
+            sports: [
+                { text: 'Basketball', id: 1 },
+                { text: 'Football', id: 2 },
+                { text: 'Tennis', id: 3 },
+                { text: 'Volleyball', id: 4 }
+            ],
+            defaultItem: { 
+                text: 'Select sport ...'
+            }
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/events/main.js b/vue-options-api-demos/dropdowns/dropdownlist/events/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/events/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/events/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/events/main.vue
new file mode 100644
index 00000000..fa8464ef
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/events/main.vue
@@ -0,0 +1,58 @@
+<template>
+<div>
+      <dropdownlist
+        :style="{ width: '230px' }"
+        :data-items="source"
+        @open="onOpen"
+        @close="onClose"
+        @focus="onFocus"
+        @blur="onBlur"
+        @change="onChange"
+        @filterchange="onFilterChange"
+        :filterable="true"
+    >
+    </dropdownlist>
+    <br />
+    <br />
+    <div class="example-config">
+        <h5>Event log</h5>
+        <ul class="event-log" :style="{ textAlign: 'right' }">
+            <li v-for="(event, index) in events">
+                {{ event }}
+            </li>
+        </ul>
+    </div>
+</div>
+</template>
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+
+export default {
+    components: {
+        'dropdownlist': DropDownList
+    },
+    data: function () {
+        return {
+            source: [ "Albania", "Andorra", "Armenia", "Austria", "Azerbaijan" ],
+            events: []
+        };
+    },
+    methods: {
+        onOpen() { this.log('open'); },
+        onClose() { this.log('close'); },
+        onFocus() { this.log('focus'); },
+        onBlur() { this.log('blur'); },
+        onChange(event) { 
+            this.log('change', event.target.value);
+         },
+        onFilterChange(event) { 
+            this.log('filterChange', event.filter.value);
+        },
+        log(event, arg) {
+            const events = this.events;
+            events.unshift(`${event} ${arg || ""}`);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/filtering/basic/main.js b/vue-options-api-demos/dropdowns/dropdownlist/filtering/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/filtering/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/filtering/basic/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/filtering/basic/main.vue
new file mode 100644
index 00000000..97b3e277
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/filtering/basic/main.vue
@@ -0,0 +1,41 @@
+<template>
+   <div>
+         <dropdownlist
+           :style="{ width: '230px' }" 
+            :data-items='items'
+            :text-field="'text'"
+            :filterable="true"
+            @filterchange="filterChange"
+        ></dropdownlist>
+    </div>
+</template>
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import { filterBy } from '@progress/kendo-data-query';
+
+const allData = [
+    { id: 1, text: "Small" },
+    { id: 2, text: "Medium" },
+    { id: 3, text: "Large" }
+];
+export default {
+    components: {
+        'dropdownlist': DropDownList
+    },
+   data: function () {
+        return {
+            items: allData.slice()
+        };
+    },
+    methods: {
+        filterChange (event) {
+            this.items = this.filterData(event.filter);
+        },
+        filterData(filter) {
+            const data = allData.slice();
+            return filterBy(data, filter);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/filtering/delay/main.js b/vue-options-api-demos/dropdowns/dropdownlist/filtering/delay/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/filtering/delay/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/filtering/delay/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/filtering/delay/main.vue
new file mode 100644
index 00000000..bf8c960a
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/filtering/delay/main.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+         <dropdownlist
+            :style="{ width: '230px' }" 
+            :data-items='items'
+            :text-field="'text'"
+            :filterable="true"
+            @filterchange="filterChange"
+            :loading="loading"
+        ></dropdownlist>
+    </div>
+</template>
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import { filterBy } from '@progress/kendo-data-query';
+
+const allData = [
+    { id: 1, text: "Small" },
+    { id: 2, text: "Medium" },
+    { id: 3, text: "Large" }
+];
+const delay = 500;
+
+export default {
+    components: {
+        'dropdownlist': DropDownList
+    },
+     data: function () {
+        return {
+            items: allData.slice(),
+            loading: false
+        };
+    },
+    methods: {
+        filterChange(event) {
+            clearTimeout(this.timeout);
+            this.timeout = setTimeout(() => {
+                this.items = this.filterData(event.filter);
+                this.loading = false;
+            }, delay);
+    
+            this.loading = true;
+        },
+        filterData(filter) {
+            const data = allData.slice();
+            return filterBy(data, filter);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/filtering/minfilter/main.js b/vue-options-api-demos/dropdowns/dropdownlist/filtering/minfilter/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/filtering/minfilter/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/filtering/minfilter/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/filtering/minfilter/main.vue
new file mode 100644
index 00000000..63735684
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/filtering/minfilter/main.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+         <dropdownlist
+            :style="{ width: '230px' }" 
+            :data-items='items'
+            :text-field="'text'"
+            :filterable="true"
+            @filterchange="filterChange"
+        ></dropdownlist>
+    </div>
+</template>
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import { filterBy } from '@progress/kendo-data-query';
+
+const allData = [
+    { id: 1, text: "Small" },
+    { id: 2, text: "Medium" },
+    { id: 3, text: "Large" }
+];
+export default {
+    components: {
+        'dropdownlist': DropDownList
+    },
+    data: function () {
+        return {
+            items: allData.slice()
+        };
+    },
+    methods: {
+        filterChange(event) {
+            const newData = event.filter.value.length >= 3 ?
+            this.filterData(event.filter) : allData.slice();
+
+            this.items = newData;
+        },
+        filterData(filter) {
+            const data = allData.slice();
+            return filterBy(data, filter);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/filtering/remote-data/main.js b/vue-options-api-demos/dropdowns/dropdownlist/filtering/remote-data/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/filtering/remote-data/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/filtering/remote-data/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/filtering/remote-data/main.vue
new file mode 100644
index 00000000..e0ff1adc
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/filtering/remote-data/main.vue
@@ -0,0 +1,163 @@
+<template>
+  <div>
+         <dropdownlist
+          :style="{ width: '230px' }"
+            :data-items="dataItems"
+            :value="value"
+            @change="onChange"
+            :data-item-key="dataItemKey"
+            :text-field="textField"
+            :default-item="defaultItem"
+            :filterable="true"
+            @filterchange="onFilterChange"
+            :virtual="virtual"
+            @pagechange="pageChange"
+        >
+        </dropdownlist>
+    </div>
+</template>
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+const textField = 'ContactName';
+const keyField = 'CustomerID';
+const defaultItem = { [textField]: 'Select customer...', [keyField]: null };
+const emptyItem = { [textField]: 'loading ...' };
+const pageSize = 10;
+
+const loadingData = [];
+while (loadingData.length < pageSize) {
+    loadingData.push({ ...emptyItem });
+}
+
+export default {
+    components: {
+        'dropdownlist': DropDownList
+    },
+      data: function () {
+        return { 
+            baseUrl: `https://odatasampleservices.azurewebsites.net/V4/Northwind/Northwind.svc/`,
+            init: { method: 'GET', accept: 'application/json', headers: [] },
+            dataCaching: [],
+            pendingRequest: undefined,
+            requestStarted: false,
+            dataItems: [],
+            skip: 0,
+            tempSkip: null,
+            total: 0,
+            value: null,
+            filter: '',
+            textField: 'ContactName',
+            dataItemKey: 'CustomerID',
+            defaultItem: defaultItem,
+            emptyItem: emptyItem,
+            pageSize: 10,
+            allData: [],
+            subsetData: [],
+            popupSettings: {
+                height: '250px'
+            }
+         };
+    },
+    computed: {
+        virtual: function() {
+            return {
+                pageSize: pageSize,
+                  // @ts-ignore
+                skip: this.skip,
+                  // @ts-ignore
+                total: this.total
+            };
+        }
+    },
+    mounted() {
+        this.requestData(0, this.filter);
+    },
+    destroyed() {
+        this.resetCach();
+    },
+    methods: {
+        requestData(skip, filter) {
+        if (this.requestStarted) {
+        clearTimeout(this.pendingRequest);
+        this.pendingRequest = setTimeout(() => {
+          this.requestData(skip, filter);
+        }, 50);
+        return;
+      }
+      this.tempSkip = skip;
+      const encodedFilter = encodeURIComponent(filter);
+      const url =
+        this.baseUrl +
+        `Customers?$filter=contains(ContactName,'${encodedFilter}')&$skip=${skip}&$top=${pageSize}&$count=true`;
+
+      this.requestStarted = true;
+
+      fetch(url)
+        .then((response) => {
+          return response.json();
+        })
+        .then(this.afterFetch);
+    },
+        afterFetch(json) {
+            const total = json['@odata.count'];
+            const items= [];
+            json.value.forEach((element, index) => {
+                const { CustomerID, ContactName } = element;
+                const item = { [this.dataItemKey]: CustomerID, [textField]: ContactName };
+                items.push(item);
+                this.dataCaching[index + this.tempSkip] = item;
+            });
+            if (this.tempSkip === this.skip) {
+                this.dataItems = items;
+                this.total = total;
+            }
+            this.requestStarted = false;
+        },
+        onFilterChange(event) {
+            const filter = event.filter.value;
+            this.resetCach();
+            this.requestData(0, filter);
+            this.dataItems = loadingData;
+            this.skip = 0;
+            this.filter = filter;
+        },
+        pageChange(event) {
+            const skip = event.page.skip;
+            const filter = this.filter;
+
+            let makeRequest = false;
+            for (let i = 0; i < pageSize; i++) {
+                if (!this.dataCaching[skip + i]) {
+                    makeRequest = true;
+                    break;
+                }
+            }
+
+            if (makeRequest) {
+                this.requestData(skip, filter);
+            }
+            const data = this.getCachedData(skip);
+            this.dataItems = data;
+            this.skip = skip;
+        },
+        onChange(event) {
+            const value = event.value;
+            if (value && value[textField] === emptyItem[textField]) {
+                return;
+            }
+            this.value = value;
+        },
+        getCachedData(skip) {
+            const data = [];
+            for (let i = 0; i < pageSize; i++) {
+                data.push(this.dataCaching[i + skip] || { ...emptyItem });
+            }
+            return data;
+        },
+        resetCach() {
+            this.dataCaching.length = 0;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/forms/basic/main.js b/vue-options-api-demos/dropdowns/dropdownlist/forms/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/forms/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/forms/basic/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/forms/basic/main.vue
new file mode 100644
index 00000000..adf013f8
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/forms/basic/main.vue
@@ -0,0 +1,71 @@
+<template>
+ <div class="row example-wrapper">
+         <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                    <div class="card">
+                        <div class="card-block">
+                            <form class="k-form" @submit="handleSubmit">
+                                <fieldset>
+                                    <legend>Select your flight route:</legend>
+                                    <div class="mb-3">
+                                         <dropdownlist
+                                            :style="{ width: '100%' }"
+                                            :label="'Departure Country'"
+                                            :name="'departureCountry'"
+                                            :data-items="countries"
+                                            :required="true"
+                                        >
+                                        </dropdownlist>
+                                    </div>
+                                    <div>
+                                         <dropdownlist
+                                            :style="{ width: '100%' }"
+                                            :label="'Arrival Country'"
+                                            :name="'arrivalCountry'"
+                                            :data-items="countries"
+                                            :required="true"
+                                        >
+                                        </dropdownlist>
+                                    </div>
+                                </fieldset>
+                                <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+                <div v-if="success"
+                    class="alert alert-success"
+                    :style="{ position: 'absolute' }"
+                >
+                    Form submitted!
+                </div>
+    </div>
+</template>
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'dropdownlist': DropDownList,
+      'kbutton': Button
+    },
+    methods: {
+         handleSubmit (event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(() => { this.success = false; }, 3000);
+        }
+    },
+     data: function () {
+        return {
+            success: false,
+              countries: [ 'Albania', 'Andorra', 'Armenia', 'Austria', 'Azerbaijan',  'Belarus', 'Belgium', 'Bosnia & Herzegovina', 
+               'Bulgaria', 'Croatia',  'Cyprus', 'Czech Republic', 'Denmark', 'Estonia', 'Finland', 'France', 'Georgia', 'Germany', 'Greece',
+                'Hungary', 'Iceland', 'Ireland', 'Italy', 'Kosovo', 'Latvia', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macedonia', 'Malta',
+                 'Moldova', 'Monaco', 'Montenegro', 'Netherlands', 'Norway', 'Poland', 'Portugal', 'Romania', 'Russia', 'San Marino', 'Serbia',
+                  'Slovakia', 'Slovenia', 'Spain', 'Sweden', 'Switzerland', 'Turkey', 'Ukraine', 'United Kingdom', 'Vatican City' ]
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/forms/countries.js b/vue-options-api-demos/dropdowns/dropdownlist/forms/countries.js
new file mode 100644
index 00000000..24f270bb
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/forms/countries.js
@@ -0,0 +1,52 @@
+export const countries = [
+    'Albania',
+    'Andorra',
+    'Armenia',
+    'Austria',
+    'Azerbaijan',
+    'Belarus',
+    'Belgium',
+    'Bosnia & Herzegovina',
+    'Bulgaria',
+    'Croatia',
+    'Cyprus',
+    'Czech Republic',
+    'Denmark',
+    'Estonia',
+    'Finland',
+    'France',
+    'Georgia',
+    'Germany',
+    'Greece',
+    'Hungary',
+    'Iceland',
+    'Ireland',
+    'Italy',
+    'Kosovo',
+    'Latvia',
+    'Liechtenstein',
+    'Lithuania',
+    'Luxembourg',
+    'Macedonia',
+    'Malta',
+    'Moldova',
+    'Monaco',
+    'Montenegro',
+    'Netherlands',
+    'Norway',
+    'Poland',
+    'Portugal',
+    'Romania',
+    'Russia',
+    'San Marino',
+    'Serbia',
+    'Slovakia',
+    'Slovenia',
+    'Spain',
+    'Sweden',
+    'Switzerland',
+    'Turkey',
+    'Ukraine',
+    'United Kingdom',
+    'Vatican City'
+];
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/forms/custom-message/countries.js b/vue-options-api-demos/dropdowns/dropdownlist/forms/custom-message/countries.js
new file mode 100644
index 00000000..45b6cb20
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/forms/custom-message/countries.js
@@ -0,0 +1,52 @@
+export default [
+    "Albania",
+    "Andorra",
+    "Armenia",
+    "Austria",
+    "Azerbaijan",
+    "Belarus",
+    "Belgium",
+    "Bosnia & Herzegovina",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czech Republic",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Georgia",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Iceland",
+    "Ireland",
+    "Italy",
+    "Kosovo",
+    "Latvia",
+    "Liechtenstein",
+    "Lithuania",
+    "Luxembourg",
+    "Macedonia",
+    "Malta",
+    "Moldova",
+    "Monaco",
+    "Montenegro",
+    "Netherlands",
+    "Norway",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Russia",
+    "San Marino",
+    "Serbia",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden",
+    "Switzerland",
+    "Turkey",
+    "Ukraine",
+    "United Kingdom",
+    "Vatican City"
+];
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/forms/custom-message/main.js b/vue-options-api-demos/dropdowns/dropdownlist/forms/custom-message/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/forms/custom-message/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/forms/custom-message/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/forms/custom-message/main.vue
new file mode 100644
index 00000000..f46f7e07
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/forms/custom-message/main.vue
@@ -0,0 +1,72 @@
+<template>
+    <div class="row example-wrapper">
+         <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                    <div class="card">
+                        <div class="card-block">
+                            <form class="k-form" @submit="handleSubmit">
+                                <fieldset>
+                                    <legend>Select your flight route:</legend>
+                                    <div class="mb-3">
+                                         <dropdownlist
+                                            :style="{ width: '100%' }"
+                                            :label="'Departure Country'"
+                                            :name="'departureCountry'"
+                                            :data-items="countries"
+                                            :required="true"
+                                            :validation-message="departureValidationMessage"
+                                        >
+                                        </dropdownlist>
+                                    </div>
+                                    <div>
+                                         <dropdownlist
+                                            :style="{ width: '100%' }"
+                                            :label="'Arrival Country'"
+                                            :name="'arrivalCountry'"
+                                            :data-items="countries"
+                                            :required="true"
+                                            :validation-message="arrivalValidationMessage"
+                                        >
+                                        </dropdownlist>
+                                    </div>
+                                </fieldset>
+                                <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+                <div v-if="success"
+                    class="alert alert-success"
+                    :style="{ position: 'absolute' }"
+                >
+                    Form submitted!
+                </div>
+    </div>
+</template>
+<script>
+import countries from './countries';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'dropdownlist': DropDownList,
+      'kbutton': Button
+    },
+     methods: {
+         handleSubmit (event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(() => { this.success = false; }, 3000);
+        }
+    },
+     data: function () {
+        return {
+            departureValidationMessage: 'Please select a departure country!',
+            arrivalValidationMessage: 'Please select an arrival country!',
+            success: false,
+            countries: countries
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/forms/disable-styles/countries.js b/vue-options-api-demos/dropdowns/dropdownlist/forms/disable-styles/countries.js
new file mode 100644
index 00000000..45b6cb20
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/forms/disable-styles/countries.js
@@ -0,0 +1,52 @@
+export default [
+    "Albania",
+    "Andorra",
+    "Armenia",
+    "Austria",
+    "Azerbaijan",
+    "Belarus",
+    "Belgium",
+    "Bosnia & Herzegovina",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czech Republic",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Georgia",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Iceland",
+    "Ireland",
+    "Italy",
+    "Kosovo",
+    "Latvia",
+    "Liechtenstein",
+    "Lithuania",
+    "Luxembourg",
+    "Macedonia",
+    "Malta",
+    "Moldova",
+    "Monaco",
+    "Montenegro",
+    "Netherlands",
+    "Norway",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Russia",
+    "San Marino",
+    "Serbia",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden",
+    "Switzerland",
+    "Turkey",
+    "Ukraine",
+    "United Kingdom",
+    "Vatican City"
+];
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/forms/disable-styles/main.js b/vue-options-api-demos/dropdowns/dropdownlist/forms/disable-styles/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/forms/disable-styles/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/forms/disable-styles/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/forms/disable-styles/main.vue
new file mode 100644
index 00000000..0054a565
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/forms/disable-styles/main.vue
@@ -0,0 +1,101 @@
+<template>
+   <div class="row example-wrapper">
+         <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                    <div class="card">
+                        <div class="card-block">
+                            <form class="k-form" @submit="handleSubmit">
+                                <fieldset>
+                                    <legend>Select your flight route:</legend>
+                                    <div class="mb-3">
+                                         <dropdownlist
+                                            :style="{ width: '100%' }"
+                                            :label="'Departure Country'"
+                                            :value="departureCountry"
+                                            @change="handleChange"
+                                            :name="'departureCountry'"
+                                            :data-items="countries"
+                                            :required="true"
+                                        >
+                                        </dropdownlist>
+                                    </div>
+                                    <div>
+                                         <dropdownlist
+                                            :validity-styles="false"
+                                            :style="{ width: '100%' }"
+                                            :label="'Arrival Country'"
+                                            :value="arrivalCountry"
+                                            @change="handleChange"
+                                            :name="'arrivalCountry'"
+                                            :data-items="countries"
+                                            :required="true"
+                                            :valid="valid"
+                                            :validation-message="validationMessage"
+                                        >
+                                        </dropdownlist>
+                                    </div>
+                                    <label class="k-form-field">
+                                        <span>Additional Comments</span>
+                                        <textarea
+                                            class="k-textarea"
+                                            :style="{ width: '100%' }"
+                                            name="additionalComments"
+                                            v-model="additionalComments"
+                                        >
+                                        </textarea>
+                                    </label>
+                                </fieldset>
+                                <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+                <div v-if="success"
+                    class="alert alert-success"
+                    :style="{ position: 'absolute' }"
+                >
+                    Form submitted!
+                </div>
+    </div>
+</template>
+<script>
+import countries from './countries';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'dropdownlist': DropDownList,
+      'kbutton': Button
+    },
+    computed: {
+        valid: function(){
+            return this.departureCountry !== null && this.arrivalCountry !== null;
+        },
+        validationMessage: function(){
+            return this.departureCountry === null
+            ? 'Please select a Departure Country first!'
+            : 'Please select an Arrival Country';
+        }     
+    },
+    methods: {
+        handleChange(event) {
+            this[event.target.name] = event.value;
+        },
+         handleSubmit (event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(() => { this.success = false; }, 3000);
+        }
+    },
+     data: function () {
+        return {
+            departureCountry: null,
+            arrivalCountry: null,
+            additionalComments: '',
+            success: false,
+            countries: countries
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/forms/override/countries.js b/vue-options-api-demos/dropdowns/dropdownlist/forms/override/countries.js
new file mode 100644
index 00000000..45b6cb20
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/forms/override/countries.js
@@ -0,0 +1,52 @@
+export default [
+    "Albania",
+    "Andorra",
+    "Armenia",
+    "Austria",
+    "Azerbaijan",
+    "Belarus",
+    "Belgium",
+    "Bosnia & Herzegovina",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czech Republic",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Georgia",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Iceland",
+    "Ireland",
+    "Italy",
+    "Kosovo",
+    "Latvia",
+    "Liechtenstein",
+    "Lithuania",
+    "Luxembourg",
+    "Macedonia",
+    "Malta",
+    "Moldova",
+    "Monaco",
+    "Montenegro",
+    "Netherlands",
+    "Norway",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Russia",
+    "San Marino",
+    "Serbia",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden",
+    "Switzerland",
+    "Turkey",
+    "Ukraine",
+    "United Kingdom",
+    "Vatican City"
+];
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/forms/override/main.js b/vue-options-api-demos/dropdowns/dropdownlist/forms/override/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/forms/override/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/forms/override/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/forms/override/main.vue
new file mode 100644
index 00000000..bc3b4974
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/forms/override/main.vue
@@ -0,0 +1,100 @@
+<template>
+      <div class="row example-wrapper">
+         <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                    <div class="card">
+                        <div class="card-block">
+                            <form class="k-form" @submit="handleSubmit">
+                                <fieldset>
+                                    <legend>Select your flight route:</legend>
+                                    <div class="mb-3">
+                                         <dropdownlist
+                                            :style="{ width: '100%' }"
+                                            :label="'Departure Country'"
+                                            :value="departureCountry"
+                                            @change="handleChange"
+                                            :name="'departureCountry'"
+                                            :data-items="countries"
+                                            :required="true"
+                                        >
+                                        </dropdownlist>
+                                    </div>
+                                    <div>
+                                         <dropdownlist
+                                            :style="{ width: '100%' }"
+                                            :label="'Arrival Country'"
+                                            :value="arrivalCountry"
+                                            @change="handleChange"
+                                            :name="'arrivalCountry'"
+                                            :data-items="countries"
+                                            :required="true"
+                                            :valid="valid"
+                                            :validation-message="validationMessage"
+                                        >
+                                        </dropdownlist>
+                                    </div>
+                                    <label class="k-form-field">
+                                        <span>Additional Comments</span>
+                                        <textarea
+                                            class="k-textarea"
+                                            :style="{ width: '100%' }"
+                                            name="additionalComments"
+                                            v-model="additionalComments"
+                                        >
+                                        </textarea>
+                                    </label>
+                                </fieldset>
+                                <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+                <div v-if="success"
+                    class="alert alert-success"
+                    :style="{ position: 'absolute' }"
+                >
+                    Form submitted!
+                </div>
+    </div>
+</template>
+<script>
+import countries from './countries';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'dropdownlist': DropDownList,
+      'kbutton': Button
+    },
+     computed: {
+        valid: function(){
+            return this.departureCountry !== null && this.arrivalCountry !== null;
+        },
+        validationMessage: function(){
+            return this.departureCountry === null
+            ? 'Please select a Departure Country first!'
+            : 'Please select an Arrival Country';
+        }     
+    },
+    methods: {
+        handleChange(event) {
+            this[event.target.name] = event.value;
+        },
+         handleSubmit (event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(() => { this.success = false; }, 3000);
+        }
+    },
+     data: function () {
+        return {
+            departureCountry: null,
+            arrivalCountry: null,
+            additionalComments: '',
+            success: false,
+            countries: countries
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/grouping/basic/grouping-data.js b/vue-options-api-demos/dropdowns/dropdownlist/grouping/basic/grouping-data.js
new file mode 100644
index 00000000..9a2711db
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/grouping/basic/grouping-data.js
@@ -0,0 +1,181 @@
+export const employees = [ {
+    "id": 11,
+    "name": "Hyacinth Hood",
+    "reportsTo": 32,
+    "phone": "(889) 345-2438",
+    "extension": 8564,
+    "hireDate": new Date("2014-02-03T20:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 1
+}, {
+    "id": 40,
+    "name": "Karleigh Garza",
+    "reportsTo": 52,
+    "phone": "(370) 983-8796",
+    "extension": 4044,
+    "hireDate": new Date("2014-03-10T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 1
+}, {
+    "id": 46,
+    "name": "Darrel Solis",
+    "reportsTo": 43,
+    "phone": "(327) 977-0216",
+    "extension": 7779,
+    "hireDate": new Date("2015-04-25T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 4
+}, {
+    "id": 76,
+    "name": "Cheyenne Olson",
+    "reportsTo": 63,
+    "phone": "(241) 645-0257",
+    "extension": 9181,
+    "hireDate": new Date("2015-05-19T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 5
+}, {
+    "id": 78,
+    "name": "Rinah Simon",
+    "reportsTo": 11,
+    "phone": "(285) 912-5271",
+    "extension": 7795,
+    "hireDate": new Date("2012-10-11T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 4
+}, {
+    "id": 79,
+    "name": "Duncan Mathews",
+    "reportsTo": 64,
+    "phone": "(790) 971-9709",
+    "extension": 4573,
+    "hireDate": new Date("2011-08-21T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "Developer",
+    "timeInPosition": 3
+}, {
+    "id": 82,
+    "name": "Yael Walters",
+    "reportsTo": 69,
+    "phone": "(311) 489-8191",
+    "extension": 6520,
+    "hireDate": new Date("2013-07-04T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 6
+}, {
+    "id": 75,
+    "name": "Eric Russell",
+    "reportsTo": 63,
+    "phone": "(516) 575-8505",
+    "extension": 2224,
+    "hireDate": new Date("2012-10-28T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 3
+}, {
+    "id": 55,
+    "name": "Summer Mosley",
+    "reportsTo": 46,
+    "phone": "(784) 962-2301",
+    "extension": 5492,
+    "hireDate": new Date("2010-03-02T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "QA",
+    "timeInPosition": 5
+}, {
+    "id": 59,
+    "name": "Keiko Espinoza",
+    "reportsTo": 46,
+    "phone": "(226) 600-5305",
+    "extension": 9363,
+    "hireDate": new Date("2011-09-18T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "QA",
+    "timeInPosition": 4
+}, {
+    "id": 72,
+    "name": "Stacey Lynn",
+    "reportsTo": 40,
+    "phone": "(140) 772-7509",
+    "extension": 8396,
+    "hireDate": new Date("2014-07-31T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "QA",
+    "timeInPosition": 1
+}, {
+    "id": 38,
+    "name": "Elton Tucker",
+    "reportsTo": 69,
+    "phone": "(988) 930-9331",
+    "extension": 9216,
+    "hireDate": new Date("2015-06-04T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 1
+}, {
+    "id": 71,
+    "name": "Flavia Short",
+    "reportsTo": 63,
+    "phone": "(370) 133-9238",
+    "extension": 6390,
+    "hireDate": new Date("2013-02-21T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 0
+}, {
+    "id": 61,
+    "name": "Candace Pickett",
+    "reportsTo": 46,
+    "phone": "(120) 117-7475",
+    "extension": 5178,
+    "hireDate": new Date("2010-05-06T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 0
+}, {
+    "id": 65,
+    "name": "Thomas Terry",
+    "reportsTo": 63,
+    "phone": "(764) 831-4248",
+    "extension": 3574,
+    "hireDate": new Date("2015-06-15T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "Support",
+    "timeInPosition": 2
+}, {
+    "id": 62,
+    "name": "Palmer Gregory",
+    "reportsTo": 64,
+    "phone": "(360) 430-2505",
+    "extension": 4337,
+    "hireDate": new Date("2014-08-30T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 4
+}, {
+    "id": 12,
+    "name": "Jamalia Wallace",
+    "reportsTo": 64,
+    "phone": "(611) 391-8016",
+    "extension": 1952,
+    "hireDate": new Date("2011-09-08T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 3
+}, {
+    "id": 66,
+    "name": "Gloria Freeman",
+    "reportsTo": 53,
+    "phone": "(344) 950-9168",
+    "extension": 4738,
+    "hireDate": new Date("2013-05-06T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 0
+} ];
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/grouping/basic/main.js b/vue-options-api-demos/dropdowns/dropdownlist/grouping/basic/main.js
new file mode 100644
index 00000000..3a6df88d
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/grouping/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from "vue";
+import App from "./main.vue";
+
+createApp(App).mount("#app");
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/grouping/basic/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/grouping/basic/main.vue
new file mode 100644
index 00000000..01ec2cfd
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/grouping/basic/main.vue
@@ -0,0 +1,26 @@
+<template>
+  <DropDownList
+    :data-items="groupedData"
+    :text-field="'name'"
+    :group-field="'position'"
+    :style="{
+      width: '300px',
+    }"
+  />
+</template>
+<script>
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+import { groupBy } from '@progress/kendo-data-query';
+import { employees } from './grouping-data.js';
+
+export default {
+  components: {
+    DropDownList
+},
+  data() {
+    return {
+      groupedData: groupBy(employees, [{ field: 'position' }]).reduce((res, group) =>  [...res, ...group.items], [])
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/grouping/custom/GroupHeaderItemRender.vue b/vue-options-api-demos/dropdowns/dropdownlist/grouping/custom/GroupHeaderItemRender.vue
new file mode 100644
index 00000000..d2c8a237
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/grouping/custom/GroupHeaderItemRender.vue
@@ -0,0 +1,21 @@
+<template>
+<li :id="id" role="group" class="k-list-group-item" style="position: unset;">
+  <b
+      :style="{
+        color: '#00F',
+      }"
+      role="option"
+    >
+     {{group}}
+    </b>
+  </li>
+</template>
+<script>
+export default {
+  props: {
+    group: String,
+    id: String,
+    index: Number,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/grouping/custom/ItemRender.vue b/vue-options-api-demos/dropdowns/dropdownlist/grouping/custom/ItemRender.vue
new file mode 100644
index 00000000..0967fc13
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/grouping/custom/ItemRender.vue
@@ -0,0 +1,42 @@
+<template>
+  <li class="k-item" @click="handleClick">
+    <i
+      :style="{
+        color: 'green',
+      }"
+      role="option"
+      :aria-selected="focused"
+      :class="itemClass"
+    >
+      {{ dataItem[textField] }} {{ index }}
+    </i>
+  </li>
+</template>
+<script>
+export default {
+  emits: {
+    click: null,
+  },
+  props: {
+    id: String,
+    index: Number,
+    dataItem: [Object, String, Number],
+    textField: String,
+    focused: Boolean,
+    selected: Boolean,
+  },
+  computed: {
+    itemClass() {
+      return {
+        "k-item": true,
+        "k-state-focused": this.$props.focused,
+      };
+    },
+  },
+  methods: {
+    handleClick: function (e) {
+      this.$emit("click", e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/grouping/custom/StickyHeaderRender.vue b/vue-options-api-demos/dropdowns/dropdownlist/grouping/custom/StickyHeaderRender.vue
new file mode 100644
index 00000000..60e0a1aa
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/grouping/custom/StickyHeaderRender.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="k-list-group-sticky-header">
+    <span
+      :style="{
+        color: 'orange',
+        fontWeight: 900,
+        width: '100%',
+        fontSize: '1.5em',
+        textAlign: 'center',
+      }"
+    >
+    {{ group }}
+    </span>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    group: String,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/grouping/custom/grouping-data.js b/vue-options-api-demos/dropdowns/dropdownlist/grouping/custom/grouping-data.js
new file mode 100644
index 00000000..9a2711db
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/grouping/custom/grouping-data.js
@@ -0,0 +1,181 @@
+export const employees = [ {
+    "id": 11,
+    "name": "Hyacinth Hood",
+    "reportsTo": 32,
+    "phone": "(889) 345-2438",
+    "extension": 8564,
+    "hireDate": new Date("2014-02-03T20:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 1
+}, {
+    "id": 40,
+    "name": "Karleigh Garza",
+    "reportsTo": 52,
+    "phone": "(370) 983-8796",
+    "extension": 4044,
+    "hireDate": new Date("2014-03-10T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 1
+}, {
+    "id": 46,
+    "name": "Darrel Solis",
+    "reportsTo": 43,
+    "phone": "(327) 977-0216",
+    "extension": 7779,
+    "hireDate": new Date("2015-04-25T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 4
+}, {
+    "id": 76,
+    "name": "Cheyenne Olson",
+    "reportsTo": 63,
+    "phone": "(241) 645-0257",
+    "extension": 9181,
+    "hireDate": new Date("2015-05-19T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 5
+}, {
+    "id": 78,
+    "name": "Rinah Simon",
+    "reportsTo": 11,
+    "phone": "(285) 912-5271",
+    "extension": 7795,
+    "hireDate": new Date("2012-10-11T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 4
+}, {
+    "id": 79,
+    "name": "Duncan Mathews",
+    "reportsTo": 64,
+    "phone": "(790) 971-9709",
+    "extension": 4573,
+    "hireDate": new Date("2011-08-21T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "Developer",
+    "timeInPosition": 3
+}, {
+    "id": 82,
+    "name": "Yael Walters",
+    "reportsTo": 69,
+    "phone": "(311) 489-8191",
+    "extension": 6520,
+    "hireDate": new Date("2013-07-04T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 6
+}, {
+    "id": 75,
+    "name": "Eric Russell",
+    "reportsTo": 63,
+    "phone": "(516) 575-8505",
+    "extension": 2224,
+    "hireDate": new Date("2012-10-28T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 3
+}, {
+    "id": 55,
+    "name": "Summer Mosley",
+    "reportsTo": 46,
+    "phone": "(784) 962-2301",
+    "extension": 5492,
+    "hireDate": new Date("2010-03-02T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "QA",
+    "timeInPosition": 5
+}, {
+    "id": 59,
+    "name": "Keiko Espinoza",
+    "reportsTo": 46,
+    "phone": "(226) 600-5305",
+    "extension": 9363,
+    "hireDate": new Date("2011-09-18T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "QA",
+    "timeInPosition": 4
+}, {
+    "id": 72,
+    "name": "Stacey Lynn",
+    "reportsTo": 40,
+    "phone": "(140) 772-7509",
+    "extension": 8396,
+    "hireDate": new Date("2014-07-31T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "QA",
+    "timeInPosition": 1
+}, {
+    "id": 38,
+    "name": "Elton Tucker",
+    "reportsTo": 69,
+    "phone": "(988) 930-9331",
+    "extension": 9216,
+    "hireDate": new Date("2015-06-04T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 1
+}, {
+    "id": 71,
+    "name": "Flavia Short",
+    "reportsTo": 63,
+    "phone": "(370) 133-9238",
+    "extension": 6390,
+    "hireDate": new Date("2013-02-21T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 0
+}, {
+    "id": 61,
+    "name": "Candace Pickett",
+    "reportsTo": 46,
+    "phone": "(120) 117-7475",
+    "extension": 5178,
+    "hireDate": new Date("2010-05-06T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 0
+}, {
+    "id": 65,
+    "name": "Thomas Terry",
+    "reportsTo": 63,
+    "phone": "(764) 831-4248",
+    "extension": 3574,
+    "hireDate": new Date("2015-06-15T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "Support",
+    "timeInPosition": 2
+}, {
+    "id": 62,
+    "name": "Palmer Gregory",
+    "reportsTo": 64,
+    "phone": "(360) 430-2505",
+    "extension": 4337,
+    "hireDate": new Date("2014-08-30T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 4
+}, {
+    "id": 12,
+    "name": "Jamalia Wallace",
+    "reportsTo": 64,
+    "phone": "(611) 391-8016",
+    "extension": 1952,
+    "hireDate": new Date("2011-09-08T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 3
+}, {
+    "id": 66,
+    "name": "Gloria Freeman",
+    "reportsTo": 53,
+    "phone": "(344) 950-9168",
+    "extension": 4738,
+    "hireDate": new Date("2013-05-06T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 0
+} ];
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/grouping/custom/main.js b/vue-options-api-demos/dropdowns/dropdownlist/grouping/custom/main.js
new file mode 100644
index 00000000..3a6df88d
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/grouping/custom/main.js
@@ -0,0 +1,4 @@
+import { createApp } from "vue";
+import App from "./main.vue";
+
+createApp(App).mount("#app");
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/grouping/custom/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/grouping/custom/main.vue
new file mode 100644
index 00000000..fab8a512
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/grouping/custom/main.vue
@@ -0,0 +1,62 @@
+<template>
+  <DropDownList
+    :data-items="groupedData"
+    :text-field="textField"
+    :group-field="'position'"
+    :style="{
+      width: '300px',
+    }"
+    :itemRender="'myCustomItem'"
+    :groupHeaderItemRender="'myGroupHeaderItemRender'"
+    :groupStickyHeaderItemRender="'myStickyHeaderRender'"
+  >
+    <template v-slot:myCustomItem="{ props }">
+      <ItemRender
+        :style="props.style"
+        :class="props.itemClass"
+        :data-item="props.dataItem"
+        :focused="props.focused"
+        :index="props.index"
+        :text-field="textField"
+        @click="(ev) => props.onClick(ev)"
+      />
+    </template>
+    <template v-slot:myGroupHeaderItemRender="{ props }">
+      <GroupHeaderItemRender
+        :id="props.id"
+        :group="props.group"
+        :index="props.index"
+      />
+    </template>
+    <template v-slot:myStickyHeaderRender="{ props }">
+      <StickyHeaderRender :group="props.group" />
+    </template>
+  </DropDownList>
+</template>
+<script>
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+import ItemRender from "./ItemRender.vue";
+import GroupHeaderItemRender from "./GroupHeaderItemRender.vue";
+import StickyHeaderRender from "./StickyHeaderRender.vue";
+import { groupBy } from "@progress/kendo-data-query";
+import { employees } from "./grouping-data.js";
+
+export default {
+  components: {
+    DropDownList,
+    ItemRender,
+    GroupHeaderItemRender,
+    StickyHeaderRender,
+    DropDownList
+},
+  data() {
+    return {
+      textField: "name",
+      groupedData: groupBy(employees, [{ field: "position" }]).reduce(
+        (res, group) => [...res, ...group.items],
+        []
+      ),
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/grouping/filtering/grouping-data.js b/vue-options-api-demos/dropdowns/dropdownlist/grouping/filtering/grouping-data.js
new file mode 100644
index 00000000..9a2711db
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/grouping/filtering/grouping-data.js
@@ -0,0 +1,181 @@
+export const employees = [ {
+    "id": 11,
+    "name": "Hyacinth Hood",
+    "reportsTo": 32,
+    "phone": "(889) 345-2438",
+    "extension": 8564,
+    "hireDate": new Date("2014-02-03T20:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 1
+}, {
+    "id": 40,
+    "name": "Karleigh Garza",
+    "reportsTo": 52,
+    "phone": "(370) 983-8796",
+    "extension": 4044,
+    "hireDate": new Date("2014-03-10T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 1
+}, {
+    "id": 46,
+    "name": "Darrel Solis",
+    "reportsTo": 43,
+    "phone": "(327) 977-0216",
+    "extension": 7779,
+    "hireDate": new Date("2015-04-25T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 4
+}, {
+    "id": 76,
+    "name": "Cheyenne Olson",
+    "reportsTo": 63,
+    "phone": "(241) 645-0257",
+    "extension": 9181,
+    "hireDate": new Date("2015-05-19T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 5
+}, {
+    "id": 78,
+    "name": "Rinah Simon",
+    "reportsTo": 11,
+    "phone": "(285) 912-5271",
+    "extension": 7795,
+    "hireDate": new Date("2012-10-11T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 4
+}, {
+    "id": 79,
+    "name": "Duncan Mathews",
+    "reportsTo": 64,
+    "phone": "(790) 971-9709",
+    "extension": 4573,
+    "hireDate": new Date("2011-08-21T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "Developer",
+    "timeInPosition": 3
+}, {
+    "id": 82,
+    "name": "Yael Walters",
+    "reportsTo": 69,
+    "phone": "(311) 489-8191",
+    "extension": 6520,
+    "hireDate": new Date("2013-07-04T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 6
+}, {
+    "id": 75,
+    "name": "Eric Russell",
+    "reportsTo": 63,
+    "phone": "(516) 575-8505",
+    "extension": 2224,
+    "hireDate": new Date("2012-10-28T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 3
+}, {
+    "id": 55,
+    "name": "Summer Mosley",
+    "reportsTo": 46,
+    "phone": "(784) 962-2301",
+    "extension": 5492,
+    "hireDate": new Date("2010-03-02T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "QA",
+    "timeInPosition": 5
+}, {
+    "id": 59,
+    "name": "Keiko Espinoza",
+    "reportsTo": 46,
+    "phone": "(226) 600-5305",
+    "extension": 9363,
+    "hireDate": new Date("2011-09-18T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "QA",
+    "timeInPosition": 4
+}, {
+    "id": 72,
+    "name": "Stacey Lynn",
+    "reportsTo": 40,
+    "phone": "(140) 772-7509",
+    "extension": 8396,
+    "hireDate": new Date("2014-07-31T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "QA",
+    "timeInPosition": 1
+}, {
+    "id": 38,
+    "name": "Elton Tucker",
+    "reportsTo": 69,
+    "phone": "(988) 930-9331",
+    "extension": 9216,
+    "hireDate": new Date("2015-06-04T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 1
+}, {
+    "id": 71,
+    "name": "Flavia Short",
+    "reportsTo": 63,
+    "phone": "(370) 133-9238",
+    "extension": 6390,
+    "hireDate": new Date("2013-02-21T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 0
+}, {
+    "id": 61,
+    "name": "Candace Pickett",
+    "reportsTo": 46,
+    "phone": "(120) 117-7475",
+    "extension": 5178,
+    "hireDate": new Date("2010-05-06T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 0
+}, {
+    "id": 65,
+    "name": "Thomas Terry",
+    "reportsTo": 63,
+    "phone": "(764) 831-4248",
+    "extension": 3574,
+    "hireDate": new Date("2015-06-15T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "Support",
+    "timeInPosition": 2
+}, {
+    "id": 62,
+    "name": "Palmer Gregory",
+    "reportsTo": 64,
+    "phone": "(360) 430-2505",
+    "extension": 4337,
+    "hireDate": new Date("2014-08-30T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 4
+}, {
+    "id": 12,
+    "name": "Jamalia Wallace",
+    "reportsTo": 64,
+    "phone": "(611) 391-8016",
+    "extension": 1952,
+    "hireDate": new Date("2011-09-08T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 3
+}, {
+    "id": 66,
+    "name": "Gloria Freeman",
+    "reportsTo": 53,
+    "phone": "(344) 950-9168",
+    "extension": 4738,
+    "hireDate": new Date("2013-05-06T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 0
+} ];
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/grouping/filtering/main.js b/vue-options-api-demos/dropdowns/dropdownlist/grouping/filtering/main.js
new file mode 100644
index 00000000..3a6df88d
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/grouping/filtering/main.js
@@ -0,0 +1,4 @@
+import { createApp } from "vue";
+import App from "./main.vue";
+
+createApp(App).mount("#app");
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/grouping/filtering/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/grouping/filtering/main.vue
new file mode 100644
index 00000000..d022fab6
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/grouping/filtering/main.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <DropDownList
+    :data-items="groupedData"
+    :text-field="'name'"
+    :group-field="'position'"
+    :filterable="true"
+    @filterchange="filterChange"
+    :style="{
+      width: '300px',
+    }"
+  />
+</div>
+</template>
+<script>
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+import { groupBy, filterBy } from "@progress/kendo-data-query";
+import { employees } from "./grouping-data.js";
+
+export default {
+  components: {
+    DropDownList,
+  },
+  methods: {
+    filterChange(event) {
+      this.groupedData = this.filterData(event.filter);
+    },
+    filterData(filter) {
+      const data = employees.slice();
+      return groupBy(filterBy(data, filter), [
+        { field: "position" },
+      ]).reduce((res, group) => [...res, ...group.items], []);
+    },
+  },
+  data() {
+    return {
+      groupedData: groupBy(employees, [{ field: "position" }]).reduce(
+        (res, group) => [...res, ...group.items],
+        []
+      ),
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/grouping/virtualization/main.js b/vue-options-api-demos/dropdowns/dropdownlist/grouping/virtualization/main.js
new file mode 100644
index 00000000..3a6df88d
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/grouping/virtualization/main.js
@@ -0,0 +1,4 @@
+import { createApp } from "vue";
+import App from "./main.vue";
+
+createApp(App).mount("#app");
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/grouping/virtualization/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/grouping/virtualization/main.vue
new file mode 100644
index 00000000..6f0d75d3
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/grouping/virtualization/main.vue
@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <DropDownList
+      :style="{ width: '230px' }"
+      :data-items="subsetData"
+      :data-item-key="'id'"
+      :text-field="'name'"
+      :group-field="'title'"
+      :virtual="virtual"
+      @pagechange="pageChange"
+      :popup-settings="popupSettings"
+    ></DropDownList>
+  </div>
+</template>
+<script>
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+import { groupBy } from "@progress/kendo-data-query";
+
+const total = 500;
+const pageSize = 30;
+
+function createRandomData(count) {
+  const firstNames = [
+    "Nancy",
+    "Andrew",
+    "Janet",
+    "Margaret",
+    "Steven",
+    "Michael",
+    "Robert",
+    "Anne",
+    "Nige",
+  ];
+  const lastNames = [
+    "Davolio",
+    "Fuller",
+    "Leverling",
+    "Peacock",
+    "Buchanan",
+    "Suyama",
+    "King",
+    "Callahan",
+    "Dodsworth",
+    "White",
+  ];
+  const titles = [
+    "Accountant",
+    "Vice President, Sales",
+    "Sales Representative",
+    "Technical Support",
+    "Sales Manager",
+    "Web Designer",
+    "Software Developer",
+    "QA",
+    "Project Manager",
+  ];
+
+  return Array(count)
+    .fill({})
+    .map((_, idx) => ({
+      id: idx,
+      name:
+        firstNames[Math.floor(Math.random() * firstNames.length)] +
+        " " +
+        lastNames[Math.floor(Math.random() * lastNames.length)],
+      title: titles[Math.floor(Math.random() * titles.length)],
+    }));
+}
+const employees = groupBy(createRandomData(total), [{ field: "title" }]).reduce(
+  (res, group) => [...res, ...group.items],
+  []
+);
+
+export default {
+  components: {
+    DropDownList,
+  },
+  data: function () {
+    return {
+      skip: 0,
+      pageSize: pageSize,
+      popupSettings: {
+        height: "250px",
+      },
+      employees: employees,
+    };
+  },
+  computed: {
+    virtual: function () {
+      return {
+        total: total,
+        pageSize: pageSize,
+        skip: this.skip,
+      };
+    },
+    subsetData() {
+      return employees.slice(this.skip, this.skip + this.pageSize);
+    },
+  },
+  methods: {
+    pageChange(event) {
+      console.log("Page change")
+      this.skip = event.page.skip;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/header-footer/FooterRender.vue b/vue-options-api-demos/dropdowns/dropdownlist/header-footer/FooterRender.vue
new file mode 100644
index 00000000..328e96da
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/header-footer/FooterRender.vue
@@ -0,0 +1,12 @@
+<template>
+<span>
+    footer
+</span>
+</template>
+<script>
+export default {
+    props: {
+        currentValue: String
+    }
+}
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/header-footer/HeaderRender.vue b/vue-options-api-demos/dropdowns/dropdownlist/header-footer/HeaderRender.vue
new file mode 100644
index 00000000..dd7e5d25
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/header-footer/HeaderRender.vue
@@ -0,0 +1,12 @@
+<template>
+<span>
+    header
+</span>
+</template>
+<script>
+export default {
+    props: {
+        currentValue: String
+    }
+}
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/header-footer/countries.js b/vue-options-api-demos/dropdowns/dropdownlist/header-footer/countries.js
new file mode 100644
index 00000000..45b6cb20
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/header-footer/countries.js
@@ -0,0 +1,52 @@
+export default [
+    "Albania",
+    "Andorra",
+    "Armenia",
+    "Austria",
+    "Azerbaijan",
+    "Belarus",
+    "Belgium",
+    "Bosnia & Herzegovina",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czech Republic",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Georgia",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Iceland",
+    "Ireland",
+    "Italy",
+    "Kosovo",
+    "Latvia",
+    "Liechtenstein",
+    "Lithuania",
+    "Luxembourg",
+    "Macedonia",
+    "Malta",
+    "Moldova",
+    "Monaco",
+    "Montenegro",
+    "Netherlands",
+    "Norway",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Russia",
+    "San Marino",
+    "Serbia",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden",
+    "Switzerland",
+    "Turkey",
+    "Ukraine",
+    "United Kingdom",
+    "Vatican City"
+];
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/header-footer/main.js b/vue-options-api-demos/dropdowns/dropdownlist/header-footer/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/header-footer/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/header-footer/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/header-footer/main.vue
new file mode 100644
index 00000000..696fbd24
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/header-footer/main.vue
@@ -0,0 +1,40 @@
+<template>
+ <div>
+         <p>Type the name of a European country:</p>
+         <dropdownlist
+            :style="{ width: '230px' }"
+            :data-items="countries"
+            :header="header"
+            :footer="footer"
+        >
+        <template v-slot:myHeader="{props}">
+            <header1  />
+        </template>
+         <template v-slot:myFooter="{props}">
+            <footer1 />
+        </template>
+        </dropdownlist>
+    </div>
+</template>
+<script>
+import countries from './countries';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import HeaderRender from './HeaderRender.vue';
+import FooterRender from './FooterRender.vue';
+
+export default {
+    components: {
+        'dropdownlist': DropDownList,
+        'header1': HeaderRender,
+        'footer1': FooterRender
+    },
+    data: function () {
+        return {
+            header: 'myHeader',
+            footer: 'myFooter',
+            countries: countries
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/item-render/ItemRender.vue b/vue-options-api-demos/dropdowns/dropdownlist/item-render/ItemRender.vue
new file mode 100644
index 00000000..f22df9e7
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/item-render/ItemRender.vue
@@ -0,0 +1,27 @@
+<template>
+<li class="k-item" @click="handleClick">
+    <span :style="{ color: '#00F' }">
+            {{dataItem}} {{index}}
+    </span>
+  </li>
+</template>
+<script>
+export default {
+    emits: {
+        click: null
+    },
+    props: {
+        id: String,
+        index: Number,
+        dataItem: [Object, String, Number],
+        textField: String,
+        focused: Boolean,
+        selected: Boolean,
+    },
+    methods: {
+      handleClick: function(e){
+        this.$emit('click', e);
+      }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/item-render/countries.js b/vue-options-api-demos/dropdowns/dropdownlist/item-render/countries.js
new file mode 100644
index 00000000..45b6cb20
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/item-render/countries.js
@@ -0,0 +1,52 @@
+export default [
+    "Albania",
+    "Andorra",
+    "Armenia",
+    "Austria",
+    "Azerbaijan",
+    "Belarus",
+    "Belgium",
+    "Bosnia & Herzegovina",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czech Republic",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Georgia",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Iceland",
+    "Ireland",
+    "Italy",
+    "Kosovo",
+    "Latvia",
+    "Liechtenstein",
+    "Lithuania",
+    "Luxembourg",
+    "Macedonia",
+    "Malta",
+    "Moldova",
+    "Monaco",
+    "Montenegro",
+    "Netherlands",
+    "Norway",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Russia",
+    "San Marino",
+    "Serbia",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden",
+    "Switzerland",
+    "Turkey",
+    "Ukraine",
+    "United Kingdom",
+    "Vatican City"
+];
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/item-render/main.js b/vue-options-api-demos/dropdowns/dropdownlist/item-render/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/item-render/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/item-render/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/item-render/main.vue
new file mode 100644
index 00000000..55608b36
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/item-render/main.vue
@@ -0,0 +1,37 @@
+<template>
+ <div>
+         <p>Type the name of a European country:</p>
+         <dropdownlist
+          :style="{ width: '230px' }"
+            :data-items="countries"
+            :item-render="itemRender"
+        >
+         <template v-slot:myTemplate="{props}">
+            <custom
+                :style="props.style"
+                :class="props.itemClass"
+                :data-item="props.dataItem"
+                :index="props.index" @click="(ev) => props.onClick(ev)" />
+        </template>
+        </dropdownlist>
+    </div>
+</template>
+<script>
+import countries from './countries';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import ItemRender from './ItemRender.vue';
+
+export default {
+    components: {
+        'dropdownlist': DropDownList,
+         'custom': ItemRender
+    },
+     data: function () {
+        return {
+            itemRender: 'myTemplate',
+            countries: countries
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/keyboard/main.js b/vue-options-api-demos/dropdowns/dropdownlist/keyboard/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/keyboard/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/keyboard/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/keyboard/main.vue
new file mode 100644
index 00000000..27120802
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/keyboard/main.vue
@@ -0,0 +1,22 @@
+<template>
+ <div>
+        <div>T-shirt size:</div>
+         <dropdownlist
+          :style="{ width: '230px' }" :data-items='sizes' ></dropdownlist>
+    </div>
+</template>
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+
+export default {
+    components: {
+        'dropdownlist': DropDownList
+    },
+    data: function () {
+        return {
+            sizes: [ "X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large" ],
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/nodata-render/NoDataRender.vue b/vue-options-api-demos/dropdowns/dropdownlist/nodata-render/NoDataRender.vue
new file mode 100644
index 00000000..9c42c161
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/nodata-render/NoDataRender.vue
@@ -0,0 +1,12 @@
+<template>
+<h4 :style="{ fontSize: '1em' }">
+            <span class="k-icon k-i-warning" :style="{ fontSize: '2.5em' }" />
+            <br /><br />
+            no data here
+        </h4>
+</template>
+<script>
+export default {
+    
+}
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/nodata-render/main.js b/vue-options-api-demos/dropdowns/dropdownlist/nodata-render/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/nodata-render/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/nodata-render/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/nodata-render/main.vue
new file mode 100644
index 00000000..f50e56e4
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/nodata-render/main.vue
@@ -0,0 +1,31 @@
+<template>
+ <div>
+         <p>Type the name of a European country:</p>
+         <dropdownlist
+          :style="{ width: '230px' }"
+            :data-items="[]"
+            :list-no-data-render="listNoDataRender"
+        >
+        <template v-slot:myTemplate>
+            <custom />
+        </template>
+        </dropdownlist>
+    </div>
+</template>
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import NoDataRender from './NoDataRender.vue';
+
+export default {
+    components: {
+        'dropdownlist': DropDownList,
+         'custom': NoDataRender
+    },
+    data: function () {
+        return {
+            listNoDataRender: 'myTemplate'
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/primitive-value/main.js b/vue-options-api-demos/dropdowns/dropdownlist/primitive-value/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/primitive-value/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/primitive-value/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/primitive-value/main.vue
new file mode 100644
index 00000000..23e75cc6
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/primitive-value/main.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+         <dropdownlist
+          :style="{ width: '230px' }" 
+            :data-items='items'
+            :text-field="'text'"
+            :filterable="true"
+            @filterchange="filterChange"
+        ></dropdownlist>
+    </div>
+</template>
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import { filterBy } from '@progress/kendo-data-query';
+
+const allData = [
+    { id: 1, text: "Small" },
+    { id: 2, text: "Medium" },
+    { id: 3, text: "Large" }
+];
+
+export default {
+    components: {
+        'dropdownlist': DropDownList
+    },
+    data: function () {
+        return {
+            items: allData.slice()
+        };
+    },
+    methods: {
+        filterChange (event) {
+            this.items = this.filterData(event.filter);
+        },
+        filterData(filter) {
+            const data = allData.slice();
+            return filterBy(data, filter);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/value-binding/main.js b/vue-options-api-demos/dropdowns/dropdownlist/value-binding/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/value-binding/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/value-binding/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/value-binding/main.vue
new file mode 100644
index 00000000..780066bd
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/value-binding/main.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="example-wrapper">
+    <div>
+      <div>T-shirt size: {{ value }}</div>
+      <DropDownList
+        :style="{ width: '230px' }"
+        :data-items="sizes"
+        :value="value"
+        @change="onChange"
+      ></DropDownList>
+    </div>
+  </div>
+</template>
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  components: {
+    DropDownList,
+  },
+  data() {
+    return {
+      sizes: ['X-Small', 'Small', 'Medium', 'Large', 'X-Large', '2X-Large'],
+      value: null,
+    };
+  },
+  methods: {
+    onChange(event) {
+      this.value = event.target.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/value-field/main.jsx b/vue-options-api-demos/dropdowns/dropdownlist/value-field/main.jsx
new file mode 100644
index 00000000..5b0ab42f
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/value-field/main.jsx
@@ -0,0 +1,47 @@
+import Vue from 'vue';
+import VueDOM from 'vue-dom';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import withValueField from './withValueField.jsx';
+
+const DropDownListWithValueField = withValueField(DropDownList);
+
+class AppComponent extends Vue.Component {
+    sports = [
+        { text: 'Basketball', id: 1 },
+        { text: 'Football', id: 2 },
+        { text: 'Tennis', id: 3 },
+        { text: 'Volleyball', id: 4 }
+    ];
+    state = {
+        value: null
+    };
+
+    handleChange = (event) => {
+        this.setState({
+            value: event.target.value
+        });
+    }
+
+    render() {
+        return (
+            <div>
+                <div class="example-config">
+                    Selected Value: {this.state.value}
+                </div>
+                 <dropdownlistWithValueField
+                    :style="{ width: '230px' }"
+                    data={this.sports}
+                    textField="text"
+                    valueField="id"
+                    value={this.state.value}
+                    onChange={this.handleChange}
+                />
+            </div>
+        );
+    }
+}
+
+VueDOM.render(
+    <AppComponent />,
+    document.querySelector('my-app')
+);
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/value-primitive/main.js b/vue-options-api-demos/dropdowns/dropdownlist/value-primitive/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/value-primitive/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/value-primitive/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/value-primitive/main.vue
new file mode 100644
index 00000000..e3fb21cb
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/value-primitive/main.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <div class="example-config">Selected Value: {{ value }}</div>
+    <div :style="{ display: 'inline-block', 'padding-right': '20px' }">
+      value and change
+      <br />
+      <DropDownList
+        :style="{ width: '230px' }"
+        :data-items="sports"
+        :text-field="'text'"
+        :data-item-key="'id'"
+        :value-field="'id'"
+        :value-primitive="true"
+        :value="value"
+        @change="handleChange"
+      >
+      </DropDownList>
+    </div>
+    <div :style="{ display: 'inline-block' }">
+      v-model
+      <br />
+      <DropDownList
+        :style="{ width: '230px' }"
+        :data-items="sports"
+        :text-field="'text'"
+        :data-item-key="'id'"
+        :value-field="'id'"
+        :value-primitive="true"
+        v-model="value"
+      >
+      </DropDownList>
+    </div>
+  </div>
+</template>
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  components: {
+    DropDownList,
+  },
+  data: function () {
+    return {
+      // Since the reference of the initial value is not from the 'sports' collection,
+      // 'dataItemKey' have to be set.
+      value: 2,
+      sports: [
+        { text: 'Basketball', id: 1 },
+        { text: 'Football', id: 2 },
+        { text: 'Tennis', id: 3 },
+        { text: 'Volleyball', id: 4 },
+      ],
+    };
+  },
+  methods: {
+    handleChange(event) {
+      this.value = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/value-render/ValueRender.vue b/vue-options-api-demos/dropdowns/dropdownlist/value-render/ValueRender.vue
new file mode 100644
index 00000000..498b988c
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/value-render/ValueRender.vue
@@ -0,0 +1,24 @@
+<template>
+	<span class="k-input">
+                <span :style="{
+                    display: 'inline-block',
+                    background: '#333',
+                    color: '#fff',
+                    borderRadius: '50%',
+                    width: '18px',
+                    height: '18px',
+                    textAlign: 'center',
+                    overflow: 'hidden'
+                }">
+                {{value}}
+            </span>
+	<span>&nbsp;  {{value}}</span>
+	</span>
+</template>
+<script>
+	export default {
+    props: {
+        value: String
+    }
+}
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/value-render/countries.js b/vue-options-api-demos/dropdowns/dropdownlist/value-render/countries.js
new file mode 100644
index 00000000..45b6cb20
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/value-render/countries.js
@@ -0,0 +1,52 @@
+export default [
+    "Albania",
+    "Andorra",
+    "Armenia",
+    "Austria",
+    "Azerbaijan",
+    "Belarus",
+    "Belgium",
+    "Bosnia & Herzegovina",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czech Republic",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Georgia",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Iceland",
+    "Ireland",
+    "Italy",
+    "Kosovo",
+    "Latvia",
+    "Liechtenstein",
+    "Lithuania",
+    "Luxembourg",
+    "Macedonia",
+    "Malta",
+    "Moldova",
+    "Monaco",
+    "Montenegro",
+    "Netherlands",
+    "Norway",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Russia",
+    "San Marino",
+    "Serbia",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden",
+    "Switzerland",
+    "Turkey",
+    "Ukraine",
+    "United Kingdom",
+    "Vatican City"
+];
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/value-render/main.js b/vue-options-api-demos/dropdowns/dropdownlist/value-render/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/value-render/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/value-render/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/value-render/main.vue
new file mode 100644
index 00000000..4d4aa3a8
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/value-render/main.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <p>Type the name of a European country: </p>
+     <dropdownlist
+          :style="{ width: '230px' }"
+      :data-items="countries"
+      :default-value="countries[0]"
+      :value-render="valueRender"
+    >
+      <template v-slot:myTemplate="{ props }">
+        <custom :value="props.value" />
+      </template>
+    </dropdownlist>
+  </div>
+</template>
+<script>
+import countries from "./countries";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+import ValueRender from "./ValueRender.vue";
+
+export default {
+  components: {
+    dropdownlist: DropDownList,
+    custom: ValueRender
+  },
+  data: function() {
+    return {
+      valueRender: "myTemplate",
+      countries: countries
+    };
+  }
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/virtualization-filtering/main.js b/vue-options-api-demos/dropdowns/dropdownlist/virtualization-filtering/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/virtualization-filtering/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/virtualization-filtering/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/virtualization-filtering/main.vue
new file mode 100644
index 00000000..48a1ecbe
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/virtualization-filtering/main.vue
@@ -0,0 +1,75 @@
+<template>
+  <dropdownlist
+          :style="{ width: '230px' }"
+        :data-items="subsetData"
+        :data-item-key="'id'"
+        :text-field="'text'"
+        :filterable="true"
+        @filterchange="onFilterChange"
+        :virtual="virtual"
+        :popup-settings="popupSettings"
+        @pagechange="pageChange"
+    >
+    </dropdownlist>
+</template>
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import { filterBy } from '@progress/kendo-data-query';
+
+const total = 5000;
+const pageSize = 11;
+const allData = [];
+
+for (let i = 0; i < total; i++) {
+    allData.push({ id: i, text: 'Item ' + i });
+}
+
+export default {
+    components: {
+        'dropdownlist': DropDownList
+    },
+    data: function () {
+        return { 
+            filteredData: [],
+            skip: 0,
+            total: total,
+            subsetData: allData.slice(0, pageSize),
+            popupSettings: {
+                height: '210px'
+            }
+        };
+    },
+    created(){
+        this.filteredData = allData.slice();
+    },
+    computed: {
+        virtual: function(){
+            return {
+                total: this.total,
+                pageSize: pageSize,
+                skip: this.skip
+            };
+        }
+    },
+    methods: {
+        onFilterChange: function(event) {
+            this.filteredData = filterBy(allData.slice(), event.filter);
+    
+            const data = this.filteredData.slice(0, pageSize);
+    
+            this.subsetData= data;
+            this.skip = 0;
+            this.total = this.filteredData.length;
+        },
+        pageChange: function(event) {
+            const skip = event.page.skip;
+            const take = event.page.take;
+            const newSubsetData = this.filteredData.slice(skip, skip + take);
+    
+            this.subsetData = newSubsetData;
+            this.skip = skip;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/virtualization/main.js b/vue-options-api-demos/dropdowns/dropdownlist/virtualization/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/virtualization/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdownlist/virtualization/main.vue b/vue-options-api-demos/dropdowns/dropdownlist/virtualization/main.vue
new file mode 100644
index 00000000..3e42ce16
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdownlist/virtualization/main.vue
@@ -0,0 +1,58 @@
+<template>
+   <dropdownlist
+            :style="{ width: '230px' }"
+            :data-items="subsetData"
+            :text-field="'text'"
+            :data-item-key="'id'"
+            :virtual="virtual"
+            @pagechange="pageChange"
+            :popup-settings="popupSettings"
+        >
+      </dropdownlist>
+</template>
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+
+export default {
+    components: {
+        'dropdownlist': DropDownList
+    },
+    data: function () {
+        return {
+            allData: [],
+            subsetData: [],
+            total: 5000,
+            pageSize: 12,
+            skip: 0,
+            popupSettings: {
+                height: '250px'
+            }
+        };
+    },
+      created() {
+        for (let i = 0; i < this.total; i++) {
+            this.allData.push({ id: i, text: 'Item ' + i });
+        }
+        this.subsetData = this.allData.slice(0, this.pageSize);
+    },
+    computed: {
+        virtual: function() {
+            return {
+                pageSize: this.pageSize,
+                skip: this.skip,
+                total: this.total
+            };
+        }
+    },
+    methods: {
+         pageChange(event) {
+            const skip = event.page.skip;
+            const take = event.page.take;
+            const newSubsetData = this.allData.slice(skip, skip + take);
+            this.subsetData = newSubsetData;
+            this.skip = skip;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/adaptive-rendering/main.js b/vue-options-api-demos/dropdowns/dropdowntree/adaptive-rendering/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/adaptive-rendering/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/adaptive-rendering/main.vue b/vue-options-api-demos/dropdowns/dropdowntree/adaptive-rendering/main.vue
new file mode 100644
index 00000000..fba25f39
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/adaptive-rendering/main.vue
@@ -0,0 +1,82 @@
+<template>
+  <div>
+      <DropDownTree
+        :style="{ width: '300px' }"
+        :dataItems="treeData"
+        :value="value"
+        @change="onChange"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :selectField="selectField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Category'"
+        :filterable="true"
+        @filterchange="onFilterChange"
+        :adaptive="true"
+        :adaptive-title="'Adaptive title sample'"
+      />
+    </div>
+</template>
+<script>
+import {
+  DropDownTree,
+} from "@progress/kendo-vue-dropdowns";
+import { processTreeData, expandedState } from "./tree-data-operations";
+import { data } from "./tree-data";
+
+const dataItemKey = "id";
+const selectField = "selected";
+const checkIndeterminateField = "checkIndeterminateField";
+const subItemsField = "items";
+const expandField = "expanded";
+const textField = "text";
+
+const fields = {
+  dataItemKey,
+  selectField,
+  expandField,
+  subItemsField,
+};
+
+export default {
+  components: {
+    DropDownTree
+  },
+  data: function () {
+    return {
+      textField,
+      dataItemKey,
+      selectField,
+      subItemsField,
+      expandField,
+      dataItems: data,
+      value: null,
+      expanded: [data[0][dataItemKey]],
+      filter: null
+    };
+  },
+  computed: {
+    treeData () {
+      return processTreeData(this.dataItems, { 
+        expanded: this.expanded, 
+        value: this.value,
+        filter: this.filter
+      }, fields);
+    }
+  },
+  methods: {
+    onFilterChange(event) {
+      this.filter = event.filter;
+    },
+    onChange (event) {
+      this.value = event.value;
+    },
+    onExpandChange (event) {
+        this.expanded = (expandedState(event.item, dataItemKey, this.expanded))
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/adaptive-rendering/tree-data-operations.js b/vue-options-api-demos/dropdowns/dropdowntree/adaptive-rendering/tree-data-operations.js
new file mode 100644
index 00000000..c32766b4
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/adaptive-rendering/tree-data-operations.js
@@ -0,0 +1,31 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { mapTree, extendDataItem } from '@progress/kendo-vue-common';
+
+export const processTreeData = (data, state, fields) => {
+    const { selectField, expandField, dataItemKey, subItemsField } = fields;
+    const { expanded, value, filter } = state;
+    const filtering = Boolean(filter && filter.value);
+
+    return mapTree(
+        filtering ? filterBy(data, [ filter ], subItemsField) : data,
+        subItemsField,
+        item => {
+            const props = {
+                [expandField]: expanded.includes(item[dataItemKey]),
+                [selectField]: value && item[dataItemKey] === value[dataItemKey]
+            };
+            return filtering ?
+                extendDataItem(item, subItemsField, props) :
+                { ...item, ...props };
+        }
+    );
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const itemKey = item[dataItemKey];
+    const index = expanded.indexOf(itemKey);
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/adaptive-rendering/tree-data.js b/vue-options-api-demos/dropdowns/dropdowntree/adaptive-rendering/tree-data.js
new file mode 100644
index 00000000..5b749471
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/adaptive-rendering/tree-data.js
@@ -0,0 +1,15 @@
+export const data = [
+    {
+        text: 'Furniture', id: 1, items: [
+            { text: 'Tables & Chairs', id: 2 },
+            { text: 'Sofas', id: 3 },
+            { text: 'Occasional Furniture', id: 4 }
+        ]
+    }, {
+        text: 'Decor', id: 5, items: [
+            { text: 'Bed Linen', id: 6 },
+            { text: 'Curtains & Blinds', id: 7 },
+            { text: 'Carpets', id: 8 }
+        ]
+    }
+];
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/appearance/configurator/DropDownStyleConfigurator.vue b/vue-options-api-demos/dropdowns/dropdowntree/appearance/configurator/DropDownStyleConfigurator.vue
new file mode 100644
index 00000000..c1b36044
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/appearance/configurator/DropDownStyleConfigurator.vue
@@ -0,0 +1,105 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Fill Mode
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="fillModes"
+              :value="fillMode"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleFillModeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+    fillMode: String,
+    rounded: String,
+  },
+  emits: [
+    "sizechange",
+    "fillmodechange",
+    "roundedchange",
+  ],
+  data() {
+    return {
+      sizes: ["small", "medium", "large"],
+      fillModes: ["solid", "outline", "flat"],
+      roundedOptions: ["small", "medium", "large", "full"],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleFillModeChange(event) {
+      this.$emit("fillmodechange", event);
+    },
+    handleRoundedChange(event) {
+      this.$emit("roundedchange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/appearance/configurator/main.js b/vue-options-api-demos/dropdowns/dropdowntree/appearance/configurator/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/appearance/configurator/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/appearance/configurator/main.vue b/vue-options-api-demos/dropdowns/dropdowntree/appearance/configurator/main.vue
new file mode 100644
index 00000000..118af0da
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/appearance/configurator/main.vue
@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <DropDownStyleConfigurator
+      :size="size"
+      @sizechange="setSize"
+      :fill-mode="fillMode"
+      @fillmodechange="setFillMode"
+      :rounded="rounded"
+      @roundedchange="setRounded"
+    />
+    <div>
+      <DropDownTree
+        :style="{ width: '300px' }"
+        :dataItems="treeData"
+        :size="size"
+        :fill-mode="fillMode"
+        :rounded="rounded"
+        v-model="value"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :selectField="selectField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Category'"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import DropDownStyleConfigurator from "./DropDownStyleConfigurator.vue";
+import {
+  DropDownTree
+} from "@progress/kendo-vue-dropdowns";
+import { processTreeData, expandedState } from "./tree-data-operations";
+import { data } from "./tree-data";
+
+const dataItemKey = "id";
+const selectField = "selected";
+const subItemsField = "items";
+const expandField = "expanded";
+const textField = "text";
+
+const fields = {
+  dataItemKey,
+  selectField,
+  expandField,
+  subItemsField,
+};
+
+export default {
+  components: {
+    DropDownStyleConfigurator,
+    DropDownTree,
+  },
+  data() {
+    return {
+      size: "medium",
+      rounded: "medium",
+      fillMode: "solid",
+      textField,
+      dataItemKey,
+      selectField,
+      subItemsField,
+      expandField,
+      dataItems: data,
+      value: null,
+      expanded: [data[0][dataItemKey]],
+    };
+  },
+  computed: {
+    treeData() {
+      return processTreeData(this.dataItems, { expanded: this.expanded, value: this.value }, fields);
+    },
+  },
+  methods: {
+    setRounded(event) {
+      this.rounded = event.value;
+    },
+    setSize(event) {
+      this.size = event.value;
+    },
+    setFillMode(event) {
+      this.fillMode = event.value;
+    },
+    onChange (event) {
+      this.value = event.value;
+    },
+    onExpandChange(event) {
+      this.expanded = expandedState(event.item, dataItemKey, this.expanded);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/appearance/configurator/tree-data-operations.js b/vue-options-api-demos/dropdowns/dropdowntree/appearance/configurator/tree-data-operations.js
new file mode 100644
index 00000000..c32766b4
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/appearance/configurator/tree-data-operations.js
@@ -0,0 +1,31 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { mapTree, extendDataItem } from '@progress/kendo-vue-common';
+
+export const processTreeData = (data, state, fields) => {
+    const { selectField, expandField, dataItemKey, subItemsField } = fields;
+    const { expanded, value, filter } = state;
+    const filtering = Boolean(filter && filter.value);
+
+    return mapTree(
+        filtering ? filterBy(data, [ filter ], subItemsField) : data,
+        subItemsField,
+        item => {
+            const props = {
+                [expandField]: expanded.includes(item[dataItemKey]),
+                [selectField]: value && item[dataItemKey] === value[dataItemKey]
+            };
+            return filtering ?
+                extendDataItem(item, subItemsField, props) :
+                { ...item, ...props };
+        }
+    );
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const itemKey = item[dataItemKey];
+    const index = expanded.indexOf(itemKey);
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/appearance/configurator/tree-data.js b/vue-options-api-demos/dropdowns/dropdowntree/appearance/configurator/tree-data.js
new file mode 100644
index 00000000..5b749471
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/appearance/configurator/tree-data.js
@@ -0,0 +1,15 @@
+export const data = [
+    {
+        text: 'Furniture', id: 1, items: [
+            { text: 'Tables & Chairs', id: 2 },
+            { text: 'Sofas', id: 3 },
+            { text: 'Occasional Furniture', id: 4 }
+        ]
+    }, {
+        text: 'Decor', id: 5, items: [
+            { text: 'Bed Linen', id: 6 },
+            { text: 'Curtains & Blinds', id: 7 },
+            { text: 'Carpets', id: 8 }
+        ]
+    }
+];
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/appearance/fill-mode/main.js b/vue-options-api-demos/dropdowns/dropdowntree/appearance/fill-mode/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/appearance/fill-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/appearance/fill-mode/main.vue b/vue-options-api-demos/dropdowns/dropdowntree/appearance/fill-mode/main.vue
new file mode 100644
index 00000000..947f26fd
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/appearance/fill-mode/main.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="demo">
+    <span class="wrapper">
+      <DropDownTree
+        :style="{ width: '170px' }"
+        :dataItems="treeData"
+        :fill-mode="'flat'"
+        v-model="value"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :checkField="checkField"
+        :checkIndeterminateField="checkIndeterminateField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Flat:'"
+      />
+    </span>
+    <span class="wrapper">
+      <DropDownTree
+        :style="{ width: '170px' }"
+        :dataItems="treeData"
+        :fill-mode="'solid'"
+        v-model="value"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :selectField="selectField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Solid:'"
+      />
+    </span>
+    <span class="wrapper">
+      <DropDownTree
+        :style="{ width: '170px' }"
+        :dataItems="treeData"
+        :fill-mode="'Outline'"
+        :value="value"
+        @change="onChange"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :selectField="selectField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Outline:'"
+      />
+    </span>
+  </div>
+  <div class="demo">
+    <span class="wrapper">
+      <DropDownTree
+        :style="{ width: '170px' }"
+        :class="'custom-dropdowntree'"
+        :dataItems="treeData"
+        :fill-mode="null"
+        :value="value"
+        @change="onChange"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :checkField="checkField"
+        :checkIndeterminateField="checkIndeterminateField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Full roundness:'"
+      />
+    </span>
+  </div>
+</template>
+<script>
+import { DropDownTree } from '@progress/kendo-vue-dropdowns';
+import { processTreeData, expandedState } from './tree-data-operations';
+import { data } from './tree-data';
+
+const dataItemKey = 'id';
+const selectField = 'selected';
+const subItemsField = 'items';
+const expandField = 'expanded';
+const textField = 'text';
+
+const fields = {
+  dataItemKey,
+  selectField,
+  expandField,
+  subItemsField,
+};
+
+export default {
+  components: {
+    DropDownTree,
+  },
+  data() {
+    return {
+      textField,
+      dataItemKey,
+      selectField,
+      subItemsField,
+      expandField,
+      dataItems: data,
+      value: null,
+      expanded: [data[0][dataItemKey]],
+    };
+  },
+  computed: {
+    treeData() {
+      return processTreeData(
+        this.dataItems,
+        { expanded: this.expanded, value: this.value },
+        fields
+      );
+    },
+  },
+  methods: {
+    onChange(event) {
+      this.value = event.value;
+    },
+    onExpandChange(event) {
+      this.expanded = expandedState(event.item, dataItemKey, this.expanded);
+    },
+  },
+};
+</script>
+<style>
+.custom-dropdowntree .k-dropdowntree {
+  width: 200px;
+  background-color: #00aead;
+  border: 2px solid #bfd843;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/appearance/fill-mode/tree-data-operations.js b/vue-options-api-demos/dropdowns/dropdowntree/appearance/fill-mode/tree-data-operations.js
new file mode 100644
index 00000000..c32766b4
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/appearance/fill-mode/tree-data-operations.js
@@ -0,0 +1,31 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { mapTree, extendDataItem } from '@progress/kendo-vue-common';
+
+export const processTreeData = (data, state, fields) => {
+    const { selectField, expandField, dataItemKey, subItemsField } = fields;
+    const { expanded, value, filter } = state;
+    const filtering = Boolean(filter && filter.value);
+
+    return mapTree(
+        filtering ? filterBy(data, [ filter ], subItemsField) : data,
+        subItemsField,
+        item => {
+            const props = {
+                [expandField]: expanded.includes(item[dataItemKey]),
+                [selectField]: value && item[dataItemKey] === value[dataItemKey]
+            };
+            return filtering ?
+                extendDataItem(item, subItemsField, props) :
+                { ...item, ...props };
+        }
+    );
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const itemKey = item[dataItemKey];
+    const index = expanded.indexOf(itemKey);
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/appearance/fill-mode/tree-data.js b/vue-options-api-demos/dropdowns/dropdowntree/appearance/fill-mode/tree-data.js
new file mode 100644
index 00000000..5b749471
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/appearance/fill-mode/tree-data.js
@@ -0,0 +1,15 @@
+export const data = [
+    {
+        text: 'Furniture', id: 1, items: [
+            { text: 'Tables & Chairs', id: 2 },
+            { text: 'Sofas', id: 3 },
+            { text: 'Occasional Furniture', id: 4 }
+        ]
+    }, {
+        text: 'Decor', id: 5, items: [
+            { text: 'Bed Linen', id: 6 },
+            { text: 'Curtains & Blinds', id: 7 },
+            { text: 'Carpets', id: 8 }
+        ]
+    }
+];
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/appearance/rounded/main.js b/vue-options-api-demos/dropdowns/dropdowntree/appearance/rounded/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/appearance/rounded/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/appearance/rounded/main.vue b/vue-options-api-demos/dropdowns/dropdowntree/appearance/rounded/main.vue
new file mode 100644
index 00000000..51b51036
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/appearance/rounded/main.vue
@@ -0,0 +1,162 @@
+<template>
+  <div class="demo">
+    <span class="wrapper">
+      <DropDownTree
+        :style="{ width: '170px' }"
+        :dataItems="treeData"
+        :rounded="'small'"
+        v-model="value"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :selectField="selectField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Small roundness:'"
+      />
+    </span>
+    <span class="wrapper">
+      <DropDownTree
+        :style="{ width: '170px' }"
+        :dataItems="treeData"
+        :rounded="'medium'"
+        :value="value"
+        @change="onChange"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :selectField="selectField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Medium roundness:'"
+      />
+    </span>
+    <span class="wrapper">
+      <DropDownTree
+        :style="{ width: '170px' }"
+        :dataItems="treeData"
+        :rounded="'large'"
+        :value="value"
+        @change="onChange"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :checkField="checkField"
+        :checkIndeterminateField="checkIndeterminateField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Large roundness:'"
+      />
+    </span>
+  </div>
+  <div class="demo">
+    <span class="wrapper">
+      <DropDownTree
+        :style="{ width: '170px' }"
+        :dataItems="treeData"
+        :rounded="'full'"
+        v-model="value"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :checkField="checkField"
+        :checkIndeterminateField="checkIndeterminateField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Full roundness:'"
+      />
+    </span>
+    <span class="wrapper">
+      <DropDownTree
+        :class="'custom-dropdowntree'"
+        :dataItems="treeData"
+        :rounded="null"
+        :value="value"
+        @change="onChange"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :checkField="checkField"
+        :checkIndeterminateField="checkIndeterminateField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Custom roundness:'"
+      />
+    </span>
+  </div>
+</template>
+<script>
+import { DropDownTree } from '@progress/kendo-vue-dropdowns';
+import { processTreeData, expandedState } from './tree-data-operations';
+import { data } from './tree-data';
+
+const dataItemKey = 'id';
+const selectField = 'selected';
+const subItemsField = 'items';
+const expandField = 'expanded';
+const textField = 'text';
+
+const fields = {
+  dataItemKey,
+  selectField,
+  expandField,
+  subItemsField,
+};
+
+export default {
+  components: {
+    DropDownTree,
+  },
+  data() {
+    return {
+      textField,
+      dataItemKey,
+      selectField,
+      subItemsField,
+      expandField,
+      dataItems: data,
+      value: null,
+      expanded: [data[0][dataItemKey]],
+    };
+  },
+  computed: {
+    treeData() {
+      return processTreeData(
+        this.dataItems,
+        { expanded: this.expanded, value: this.value },
+        fields
+      );
+    },
+  },
+  methods: {
+    onChange(event) {
+      this.value = event.value;
+    },
+    onExpandChange(event) {
+      this.expanded = expandedState(event.item, dataItemKey, this.expanded);
+    },
+  },
+};
+</script>
+<style>
+.custom-dropdowntree .k-dropdowntree {
+  width: 200px;
+  border-bottom-right-radius: 15px;
+  border-top-left-radius: 15px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/appearance/rounded/tree-data-operations.js b/vue-options-api-demos/dropdowns/dropdowntree/appearance/rounded/tree-data-operations.js
new file mode 100644
index 00000000..c32766b4
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/appearance/rounded/tree-data-operations.js
@@ -0,0 +1,31 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { mapTree, extendDataItem } from '@progress/kendo-vue-common';
+
+export const processTreeData = (data, state, fields) => {
+    const { selectField, expandField, dataItemKey, subItemsField } = fields;
+    const { expanded, value, filter } = state;
+    const filtering = Boolean(filter && filter.value);
+
+    return mapTree(
+        filtering ? filterBy(data, [ filter ], subItemsField) : data,
+        subItemsField,
+        item => {
+            const props = {
+                [expandField]: expanded.includes(item[dataItemKey]),
+                [selectField]: value && item[dataItemKey] === value[dataItemKey]
+            };
+            return filtering ?
+                extendDataItem(item, subItemsField, props) :
+                { ...item, ...props };
+        }
+    );
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const itemKey = item[dataItemKey];
+    const index = expanded.indexOf(itemKey);
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/appearance/rounded/tree-data.js b/vue-options-api-demos/dropdowns/dropdowntree/appearance/rounded/tree-data.js
new file mode 100644
index 00000000..5b749471
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/appearance/rounded/tree-data.js
@@ -0,0 +1,15 @@
+export const data = [
+    {
+        text: 'Furniture', id: 1, items: [
+            { text: 'Tables & Chairs', id: 2 },
+            { text: 'Sofas', id: 3 },
+            { text: 'Occasional Furniture', id: 4 }
+        ]
+    }, {
+        text: 'Decor', id: 5, items: [
+            { text: 'Bed Linen', id: 6 },
+            { text: 'Curtains & Blinds', id: 7 },
+            { text: 'Carpets', id: 8 }
+        ]
+    }
+];
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/appearance/size/main.js b/vue-options-api-demos/dropdowns/dropdowntree/appearance/size/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/appearance/size/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/appearance/size/main.vue b/vue-options-api-demos/dropdowns/dropdowntree/appearance/size/main.vue
new file mode 100644
index 00000000..b4d8cf32
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/appearance/size/main.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="demo">
+    <span class="wrapper">
+      <DropDownTree
+        :style="{ width: '170px' }"
+        :dataItems="treeData"
+        :size="'small'"
+        :value="value"
+        @change="onChange"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :selectField="selectField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Small'"
+      />
+    </span>
+    <span class="wrapper">
+      <DropDownTree
+        :style="{ width: '170px' }"
+        :dataItems="treeData"
+        :size="'medium'"
+        v-model="value"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :selectField="selectField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Medium:'"
+      />
+    </span>
+    <span class="wrapper">
+      <DropDownTree
+        :style="{ width: '170px' }"
+        :dataItems="treeData"
+        :size="'large'"
+        :value="value"
+        @change="onChange"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :checkField="checkField"
+        :checkIndeterminateField="checkIndeterminateField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Large:'"
+      />
+    </span>
+  </div>
+</template>
+<script>
+import {
+  DropDownTree
+} from '@progress/kendo-vue-dropdowns';
+import { processTreeData, expandedState } from "./tree-data-operations";
+import { data } from './tree-data';
+
+const dataItemKey = 'id';
+const selectField = 'selected';
+const subItemsField = 'items';
+const expandField = 'expanded';
+const textField = 'text';
+
+const fields = {
+  dataItemKey,
+  selectField,
+  expandField,
+  subItemsField,
+};
+
+export default {
+  components: {
+    DropDownTree,
+  },
+  data() {
+    return {
+      textField,
+      dataItemKey,
+      selectField,
+      subItemsField,
+      expandField,
+      dataItems: data,
+      value: null,
+      expanded: [data[0][dataItemKey]],
+    };
+  },
+  computed: {
+    treeData() {
+      return processTreeData(this.dataItems, { expanded: this.expanded, value: this.value }, fields);
+    },
+  },
+  methods: {
+    onChange (event) {
+      this.value = event.value;
+    },
+    onExpandChange(event) {
+      this.expanded = expandedState(event.item, dataItemKey, this.expanded);
+    },
+  },
+};
+</script>
+<style>
+.custom-multiselect {
+  height: 40px;
+  width: 200px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/appearance/size/tree-data-operations.js b/vue-options-api-demos/dropdowns/dropdowntree/appearance/size/tree-data-operations.js
new file mode 100644
index 00000000..c32766b4
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/appearance/size/tree-data-operations.js
@@ -0,0 +1,31 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { mapTree, extendDataItem } from '@progress/kendo-vue-common';
+
+export const processTreeData = (data, state, fields) => {
+    const { selectField, expandField, dataItemKey, subItemsField } = fields;
+    const { expanded, value, filter } = state;
+    const filtering = Boolean(filter && filter.value);
+
+    return mapTree(
+        filtering ? filterBy(data, [ filter ], subItemsField) : data,
+        subItemsField,
+        item => {
+            const props = {
+                [expandField]: expanded.includes(item[dataItemKey]),
+                [selectField]: value && item[dataItemKey] === value[dataItemKey]
+            };
+            return filtering ?
+                extendDataItem(item, subItemsField, props) :
+                { ...item, ...props };
+        }
+    );
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const itemKey = item[dataItemKey];
+    const index = expanded.indexOf(itemKey);
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/appearance/size/tree-data.js b/vue-options-api-demos/dropdowns/dropdowntree/appearance/size/tree-data.js
new file mode 100644
index 00000000..5b749471
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/appearance/size/tree-data.js
@@ -0,0 +1,15 @@
+export const data = [
+    {
+        text: 'Furniture', id: 1, items: [
+            { text: 'Tables & Chairs', id: 2 },
+            { text: 'Sofas', id: 3 },
+            { text: 'Occasional Furniture', id: 4 }
+        ]
+    }, {
+        text: 'Decor', id: 5, items: [
+            { text: 'Bed Linen', id: 6 },
+            { text: 'Curtains & Blinds', id: 7 },
+            { text: 'Carpets', id: 8 }
+        ]
+    }
+];
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/basic/main.js b/vue-options-api-demos/dropdowns/dropdowntree/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/basic/main.vue b/vue-options-api-demos/dropdowns/dropdowntree/basic/main.vue
new file mode 100644
index 00000000..afe1e0f3
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/basic/main.vue
@@ -0,0 +1,69 @@
+<template>
+  <div>
+      <DropDownTree
+        :style="{ width: '300px' }"
+        :dataItems="treeData"
+        v-model="value"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :subItemsField="subItemsField"
+        :selectField="selectField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Category'"
+      />
+    </div>
+</template>
+<script>
+import {
+  DropDownTree,
+} from "@progress/kendo-vue-dropdowns";
+import { processTreeData, expandedState } from "./tree-data-operations";
+import { data } from "./tree-data";
+
+const dataItemKey = "id";
+const subItemsField = "items";
+const expandField = "expanded";
+const selectField = "selected";
+const textField = "text";
+
+const fields = {
+  dataItemKey,
+  expandField,
+  selectField,
+  subItemsField,
+};
+
+export default {
+  components: {
+    DropDownTree
+  },
+  data: function () {
+    return {
+      fields,
+      textField,
+      dataItemKey,
+      subItemsField,
+      expandField,
+      selectField,
+      dataItems: data,
+      value: null,
+      expanded: [data[0][dataItemKey]]
+    };
+  },
+  computed: {
+    treeData () {
+      return processTreeData(this.dataItems, { expanded: this.expanded, value: this.value }, fields);
+    }
+  },
+  methods: {
+    onChange (event) {
+      this.value = event.value;
+    },
+    onExpandChange (event) {
+        this.expanded = (expandedState(event.item, dataItemKey, this.expanded))
+    }
+  }
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/basic/tree-data-operations.js b/vue-options-api-demos/dropdowns/dropdowntree/basic/tree-data-operations.js
new file mode 100644
index 00000000..c32766b4
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/basic/tree-data-operations.js
@@ -0,0 +1,31 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { mapTree, extendDataItem } from '@progress/kendo-vue-common';
+
+export const processTreeData = (data, state, fields) => {
+    const { selectField, expandField, dataItemKey, subItemsField } = fields;
+    const { expanded, value, filter } = state;
+    const filtering = Boolean(filter && filter.value);
+
+    return mapTree(
+        filtering ? filterBy(data, [ filter ], subItemsField) : data,
+        subItemsField,
+        item => {
+            const props = {
+                [expandField]: expanded.includes(item[dataItemKey]),
+                [selectField]: value && item[dataItemKey] === value[dataItemKey]
+            };
+            return filtering ?
+                extendDataItem(item, subItemsField, props) :
+                { ...item, ...props };
+        }
+    );
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const itemKey = item[dataItemKey];
+    const index = expanded.indexOf(itemKey);
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/basic/tree-data.js b/vue-options-api-demos/dropdowns/dropdowntree/basic/tree-data.js
new file mode 100644
index 00000000..5b749471
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/basic/tree-data.js
@@ -0,0 +1,15 @@
+export const data = [
+    {
+        text: 'Furniture', id: 1, items: [
+            { text: 'Tables & Chairs', id: 2 },
+            { text: 'Sofas', id: 3 },
+            { text: 'Occasional Furniture', id: 4 }
+        ]
+    }, {
+        text: 'Decor', id: 5, items: [
+            { text: 'Bed Linen', id: 6 },
+            { text: 'Curtains & Blinds', id: 7 },
+            { text: 'Carpets', id: 8 }
+        ]
+    }
+];
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/filtering-loading/main.js b/vue-options-api-demos/dropdowns/dropdowntree/filtering-loading/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/filtering-loading/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/filtering-loading/main.vue b/vue-options-api-demos/dropdowns/dropdowntree/filtering-loading/main.vue
new file mode 100644
index 00000000..98363439
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/filtering-loading/main.vue
@@ -0,0 +1,85 @@
+<template>
+  <div>
+      <DropDownTree
+        :style="{ width: '300px' }"
+        :dataItems="treeData"
+        :value="value"
+        @change="onChange"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :selectField="selectField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :loading="loading"
+        :label="'Category'"
+        :filterable="true"
+        @filterchange="onFilterChange"
+      />
+    </div>
+</template>
+<script>
+import {
+  DropDownTree
+} from "@progress/kendo-vue-dropdowns";
+import { processTreeData, expandedState } from "./tree-data-operations";
+import { data } from "./tree-data";
+
+const dataItemKey = "id";
+const selectField = "selected";
+const subItemsField = "items";
+const expandField = "expanded";
+const textField = "text";
+
+const fields = {
+  dataItemKey,
+  selectField,
+  expandField,
+  subItemsField,
+};
+
+export default {
+  components: {
+    DropDownTree
+  },
+  data: function () {
+    return {
+      loading: false,
+      textField,
+      dataItemKey,
+      selectField,
+      subItemsField,
+      expandField,
+      dataItems: data,
+      value: null,
+      expanded: [data[0][dataItemKey]],
+      filter: null
+    };
+  },
+  computed: {
+    treeData () {
+      return processTreeData(this.dataItems, { 
+        expanded: this.expanded, 
+        value: this.value,
+        filter: this.filter
+     }, fields);
+    }
+  },
+  methods: {
+    onFilterChange(event) {
+      this.loading = true;
+      setTimeout(() => {
+          this.loading = false;
+          this.filter = event.filter;
+      }, 200);
+    },
+    onChange (event) {
+      this.value = event.value;
+    },
+    onExpandChange (event) {
+        this.expanded = (expandedState(event.item, dataItemKey, this.expanded))
+    }
+  }
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/filtering-loading/tree-data-operations.js b/vue-options-api-demos/dropdowns/dropdowntree/filtering-loading/tree-data-operations.js
new file mode 100644
index 00000000..c32766b4
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/filtering-loading/tree-data-operations.js
@@ -0,0 +1,31 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { mapTree, extendDataItem } from '@progress/kendo-vue-common';
+
+export const processTreeData = (data, state, fields) => {
+    const { selectField, expandField, dataItemKey, subItemsField } = fields;
+    const { expanded, value, filter } = state;
+    const filtering = Boolean(filter && filter.value);
+
+    return mapTree(
+        filtering ? filterBy(data, [ filter ], subItemsField) : data,
+        subItemsField,
+        item => {
+            const props = {
+                [expandField]: expanded.includes(item[dataItemKey]),
+                [selectField]: value && item[dataItemKey] === value[dataItemKey]
+            };
+            return filtering ?
+                extendDataItem(item, subItemsField, props) :
+                { ...item, ...props };
+        }
+    );
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const itemKey = item[dataItemKey];
+    const index = expanded.indexOf(itemKey);
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/filtering-loading/tree-data.js b/vue-options-api-demos/dropdowns/dropdowntree/filtering-loading/tree-data.js
new file mode 100644
index 00000000..5b749471
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/filtering-loading/tree-data.js
@@ -0,0 +1,15 @@
+export const data = [
+    {
+        text: 'Furniture', id: 1, items: [
+            { text: 'Tables & Chairs', id: 2 },
+            { text: 'Sofas', id: 3 },
+            { text: 'Occasional Furniture', id: 4 }
+        ]
+    }, {
+        text: 'Decor', id: 5, items: [
+            { text: 'Bed Linen', id: 6 },
+            { text: 'Curtains & Blinds', id: 7 },
+            { text: 'Carpets', id: 8 }
+        ]
+    }
+];
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/filtering/main.js b/vue-options-api-demos/dropdowns/dropdowntree/filtering/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/filtering/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/filtering/main.vue b/vue-options-api-demos/dropdowns/dropdowntree/filtering/main.vue
new file mode 100644
index 00000000..f26b91eb
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/filtering/main.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+      <DropDownTree
+        :style="{ width: '300px' }"
+        :dataItems="treeData"
+        :value="value"
+        @change="onChange"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :selectField="selectField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Category'"
+        :filterable="true"
+        @filterchange="onFilterChange"
+      />
+    </div>
+</template>
+<script>
+import {
+  DropDownTree,
+} from "@progress/kendo-vue-dropdowns";
+import { processTreeData, expandedState } from "./tree-data-operations";
+import { data } from "./tree-data";
+
+const dataItemKey = "id";
+const selectField = "selected";
+const checkIndeterminateField = "checkIndeterminateField";
+const subItemsField = "items";
+const expandField = "expanded";
+const textField = "text";
+
+const fields = {
+  dataItemKey,
+  selectField,
+  expandField,
+  subItemsField,
+};
+
+export default {
+  components: {
+    DropDownTree
+  },
+  data: function () {
+    return {
+      textField,
+      dataItemKey,
+      selectField,
+      subItemsField,
+      expandField,
+      dataItems: data,
+      value: null,
+      expanded: [data[0][dataItemKey]],
+      filter: null
+    };
+  },
+  computed: {
+    treeData () {
+      return processTreeData(this.dataItems, { 
+        expanded: this.expanded, 
+        value: this.value,
+        filter: this.filter
+      }, fields);
+    }
+  },
+  methods: {
+    onFilterChange(event) {
+      this.filter = event.filter;
+    },
+    onChange (event) {
+      this.value = event.value;
+    },
+    onExpandChange (event) {
+        this.expanded = (expandedState(event.item, dataItemKey, this.expanded))
+    }
+  }
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/filtering/tree-data-operations.js b/vue-options-api-demos/dropdowns/dropdowntree/filtering/tree-data-operations.js
new file mode 100644
index 00000000..c32766b4
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/filtering/tree-data-operations.js
@@ -0,0 +1,31 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { mapTree, extendDataItem } from '@progress/kendo-vue-common';
+
+export const processTreeData = (data, state, fields) => {
+    const { selectField, expandField, dataItemKey, subItemsField } = fields;
+    const { expanded, value, filter } = state;
+    const filtering = Boolean(filter && filter.value);
+
+    return mapTree(
+        filtering ? filterBy(data, [ filter ], subItemsField) : data,
+        subItemsField,
+        item => {
+            const props = {
+                [expandField]: expanded.includes(item[dataItemKey]),
+                [selectField]: value && item[dataItemKey] === value[dataItemKey]
+            };
+            return filtering ?
+                extendDataItem(item, subItemsField, props) :
+                { ...item, ...props };
+        }
+    );
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const itemKey = item[dataItemKey];
+    const index = expanded.indexOf(itemKey);
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/filtering/tree-data.js b/vue-options-api-demos/dropdowns/dropdowntree/filtering/tree-data.js
new file mode 100644
index 00000000..5b749471
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/filtering/tree-data.js
@@ -0,0 +1,15 @@
+export const data = [
+    {
+        text: 'Furniture', id: 1, items: [
+            { text: 'Tables & Chairs', id: 2 },
+            { text: 'Sofas', id: 3 },
+            { text: 'Occasional Furniture', id: 4 }
+        ]
+    }, {
+        text: 'Decor', id: 5, items: [
+            { text: 'Bed Linen', id: 6 },
+            { text: 'Curtains & Blinds', id: 7 },
+            { text: 'Carpets', id: 8 }
+        ]
+    }
+];
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/form/basic/main.js b/vue-options-api-demos/dropdowns/dropdowntree/form/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/form/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/form/basic/main.vue b/vue-options-api-demos/dropdowns/dropdowntree/form/basic/main.vue
new file mode 100644
index 00000000..c50e2725
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/form/basic/main.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="row example-wrapper">
+    <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+      <form class="k-form" method="POST" action="/" @submit="handleSubmit">
+        <h3>Fill your basket!</h3>
+        <div>
+          <DropDownTree
+            :label="'Foods:'"
+            :name="'foods'"
+            :value="foods"
+            @change="handleChange"
+            :data-items="foodsTreeData"
+            :text-field="textField"
+            :data-item-key="dataItemKey"
+            :expandField="expandField"
+            @expandchange="onExpandChange"
+            :required="true"
+          />
+        </div>
+        <div>
+          <DropDownTree
+            :label="'Drinks'"
+            :name="'drinks'"
+            :value="drinks"
+            @change="handleChange"
+            :data-items="drinksTreeData"
+            :text-field="textField"
+            :data-item-key="dataItemKey"
+            :expandField="expandField"
+            @expandchange="onExpandChange"
+            :required="true"
+          />
+        </div>
+        <div :style="{ marginTop: '10px' }">
+          <KButton type="submit">Submit</KButton>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+<script>
+import { DropDownTree } from '@progress/kendo-vue-dropdowns';
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+import { processTreeData, expandedState } from './tree-data-operations';
+
+const store = [
+  {
+    id: 1,
+    text: 'Fruits',
+    items: [
+      { id: 2, text: 'Banana' },
+      { id: 3, text: 'Strawberry' },
+    ],
+  },
+  { id: 4, text: 'Carrot' },
+  { id: 5, text: 'Bread' },
+  { id: 6, text: 'Milk' },
+  { id: 7, text: 'Water' },
+  { id: 8, text: 'Juice' },
+];
+
+const dataItemKey = 'id';
+const selectField = 'selected';
+const subItemsField = 'items';
+const expandField = 'expanded';
+const textField = 'text';
+
+const fields = {
+  dataItemKey,
+  selectField,
+  expandField,
+  subItemsField,
+};
+
+export default {
+  components: {
+    DropDownTree,
+    KButton,
+  },
+  data() {
+    return {
+      fields,
+      dataItems: store,
+      foods: null,
+      drinks: null,
+      textField,
+      dataItemKey,
+      selectField,
+      subItemsField,
+      expandField,
+      foodsExpanded: [store[0][dataItemKey]],
+      drinksExpanded: [store[0][dataItemKey]],
+    };
+  },
+  computed: {
+    foodsTreeData() {
+      return processTreeData(
+        this.dataItems,
+        { expanded: this.foodsExpanded, value: this.foods },
+        fields
+      );
+    },
+    drinksTreeData() {
+      return processTreeData(
+        this.dataItems,
+        { expanded: this.drinksExpanded, value: this.drinks },
+        fields
+      );
+    },
+  },
+  methods: {
+    handleChange(event) {
+      this[event.target.name] = event.value;
+    },
+    handleSubmit(e) {
+      e.preventDefault();
+      // tslint:disable-next-line
+      console.log('SUBMIT!', JSON.stringify(this.$data));
+    },
+    onExpandChange(event) {
+      this[event.target.name + 'Expanded'] = expandedState(
+        event.item,
+        dataItemKey,
+        this[event.target.name + 'Expanded']
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/form/basic/tree-data-operations.js b/vue-options-api-demos/dropdowns/dropdowntree/form/basic/tree-data-operations.js
new file mode 100644
index 00000000..c32766b4
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/form/basic/tree-data-operations.js
@@ -0,0 +1,31 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { mapTree, extendDataItem } from '@progress/kendo-vue-common';
+
+export const processTreeData = (data, state, fields) => {
+    const { selectField, expandField, dataItemKey, subItemsField } = fields;
+    const { expanded, value, filter } = state;
+    const filtering = Boolean(filter && filter.value);
+
+    return mapTree(
+        filtering ? filterBy(data, [ filter ], subItemsField) : data,
+        subItemsField,
+        item => {
+            const props = {
+                [expandField]: expanded.includes(item[dataItemKey]),
+                [selectField]: value && item[dataItemKey] === value[dataItemKey]
+            };
+            return filtering ?
+                extendDataItem(item, subItemsField, props) :
+                { ...item, ...props };
+        }
+    );
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const itemKey = item[dataItemKey];
+    const index = expanded.indexOf(itemKey);
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/form/custom-message/main.js b/vue-options-api-demos/dropdowns/dropdowntree/form/custom-message/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/form/custom-message/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/form/custom-message/main.vue b/vue-options-api-demos/dropdowns/dropdowntree/form/custom-message/main.vue
new file mode 100644
index 00000000..c1c9db5e
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/form/custom-message/main.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="row example-wrapper">
+    <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+      <form class="k-form" method="POST" action="/" @submit="handleSubmit">
+        <h3>Fill your basket!</h3>
+        <div>
+          <DropDownTree
+            :label="'Foods:'"
+            :name="'foods'"
+            :value="foods"
+            @change="handleChange"
+            :data-items="foodsTreeData"
+            :text-field="textField"
+            :data-item-key="dataItemKey"
+            :expandField="expandField"
+            @expandchange="onExpandChange"
+            :required="true"
+            :validation-message="foodsValidationMessage"
+          />
+        </div>
+        <div>
+          <DropDownTree
+            :label="'Drinks'"
+            :name="'drinks'"
+            :value="drinks"
+            @change="handleChange"
+            :data-items="drinksTreeData"
+            :text-field="textField"
+            :data-item-key="dataItemKey"
+            :expandField="expandField"
+            @expandchange="onExpandChange"
+            :required="true"
+            :validation-message="drinksValidationMessage"
+          />
+        </div>
+        <div :style="{ marginTop: '10px' }">
+          <KButton type="submit">Submit</KButton>
+        </div>
+      </form>
+    </div>
+    <div
+      v-if="success"
+      :class="'alert alert-success'"
+      :style="{ position: 'absolute' }"
+    >
+      Form submitted!
+    </div>
+  </div>
+</template>
+<script>
+import { DropDownTree } from '@progress/kendo-vue-dropdowns';
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+import { processTreeData, expandedState } from './tree-data-operations';
+
+const store = [
+  {
+    id: 1,
+    text: 'Fruits',
+    items: [
+      { id: 2, text: 'Banana' },
+      { id: 3, text: 'Strawberry' },
+    ],
+  },
+  { id: 4, text: 'Carrot' },
+  { id: 5, text: 'Bread' },
+  { id: 6, text: 'Milk' },
+  { id: 7, text: 'Water' },
+  { id: 8, text: 'Juice' },
+];
+
+const dataItemKey = 'id';
+const selectField = 'selected';
+const subItemsField = 'items';
+const expandField = 'expanded';
+const textField = 'text';
+
+const fields = {
+  dataItemKey,
+  selectField,
+  expandField,
+  subItemsField,
+};
+
+export default {
+  components: {
+    DropDownTree,
+    KButton,
+  },
+  data() {
+    return {
+      success: false,
+      fields,
+      dataItems: store,
+      foods: null,
+      drinks: null,
+      textField,
+      dataItemKey,
+      selectField,
+      subItemsField,
+      expandField,
+      foodsExpanded: [store[0][dataItemKey]],
+      drinksExpanded: [store[0][dataItemKey]],
+      foodsValidationMessage: 'Please add foods to your basket!',
+      drinksValidationMessage: 'Please add drinks to your basket!',
+    };
+  },
+  computed: {
+    foodsTreeData() {
+      return processTreeData(
+        this.dataItems,
+        { expanded: this.foodsExpanded, value: this.foods },
+        fields
+      );
+    },
+    drinksTreeData() {
+      return processTreeData(
+        this.dataItems,
+        { expanded: this.drinksExpanded, value: this.drinks },
+        fields
+      );
+    },
+  },
+  methods: {
+    handleChange(event) {
+      this[event.target.name] = event.value;
+    },
+    handleSubmit(event) {
+      event.preventDefault();
+      this.success = true;
+      setTimeout(() => {
+        this.success = false;
+      }, 3000);
+    },
+    onExpandChange(event) {
+      this[event.target.name + 'Expanded'] = expandedState(
+        event.item,
+        dataItemKey,
+        this[event.target.name + 'Expanded']
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/form/custom-message/tree-data-operations.js b/vue-options-api-demos/dropdowns/dropdowntree/form/custom-message/tree-data-operations.js
new file mode 100644
index 00000000..c32766b4
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/form/custom-message/tree-data-operations.js
@@ -0,0 +1,31 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { mapTree, extendDataItem } from '@progress/kendo-vue-common';
+
+export const processTreeData = (data, state, fields) => {
+    const { selectField, expandField, dataItemKey, subItemsField } = fields;
+    const { expanded, value, filter } = state;
+    const filtering = Boolean(filter && filter.value);
+
+    return mapTree(
+        filtering ? filterBy(data, [ filter ], subItemsField) : data,
+        subItemsField,
+        item => {
+            const props = {
+                [expandField]: expanded.includes(item[dataItemKey]),
+                [selectField]: value && item[dataItemKey] === value[dataItemKey]
+            };
+            return filtering ?
+                extendDataItem(item, subItemsField, props) :
+                { ...item, ...props };
+        }
+    );
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const itemKey = item[dataItemKey];
+    const index = expanded.indexOf(itemKey);
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/form/disabled-styles/main.js b/vue-options-api-demos/dropdowns/dropdowntree/form/disabled-styles/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/form/disabled-styles/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/form/disabled-styles/main.vue b/vue-options-api-demos/dropdowns/dropdowntree/form/disabled-styles/main.vue
new file mode 100644
index 00000000..1de6f706
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/form/disabled-styles/main.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="row example-wrapper">
+    <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+      <form class="k-form" method="POST" action="/" @submit="handleSubmit">
+        <h3>Fill your basket!</h3>
+        <div>
+          <DropDownTree
+            :label="'Food'"
+            :name="'food'"
+            :value="food"
+            @change="handleChange"
+            :data-items="foodsTreeData"
+            :text-field="textField"
+            :data-item-key="dataItemKey"
+            :expandField="expandField"
+            @expandchange="onExpandChange"
+          />
+        </div>
+        <div>
+          <DropDownTree
+            :validity-styles="false"
+            :label="'Drinks'"
+            :name="'drinks'"
+            :value="drinks"
+            @change="handleChange"
+            :data-items="drinksTreeData"
+            :valid="validateDrinks()"
+            :text-field="textField"
+            :data-item-key="dataItemKey"
+            :validation-message="getDrinksErrorMessage()"
+            :expandField="expandField"
+            @expandchange="onExpandChange"
+          />
+        </div>
+        <div :style="{ marginTop: '10px' }">
+          <KButton type="submit">Submit</KButton>
+        </div>
+      </form>
+    </div>
+    <div
+      v-if="success"
+      :class="'alert alert-success'"
+      :style="{ position: 'absolute' }"
+    >
+      Form submitted!
+    </div>
+  </div>
+</template>
+<script>
+import { DropDownTree } from '@progress/kendo-vue-dropdowns';
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+import { processTreeData, expandedState } from './tree-data-operations';
+
+const store = [
+  {
+    id: 1,
+    text: 'Fruits',
+    items: [
+      { id: 2, text: 'Banana' },
+      { id: 3, text: 'Strawberry' },
+    ],
+  },
+  { id: 4, text: 'Carrot' },
+  { id: 5, text: 'Bread' },
+  { id: 6, text: 'Milk' },
+  { id: 7, text: 'Water' },
+  { id: 8, text: 'Juice' },
+];
+
+const dataItemKey = 'id';
+const selectField = 'selected';
+const subItemsField = 'items';
+const expandField = 'expanded';
+const textField = 'text';
+
+const fields = {
+  dataItemKey,
+  selectField,
+  expandField,
+  subItemsField,
+};
+
+export default {
+  components: {
+    DropDownTree,
+    KButton,
+  },
+  data() {
+    return {
+      success: false,
+      fields,
+      dataItems: store,
+      food: null,
+      drinks: null,
+      textField,
+      dataItemKey,
+      selectField,
+      subItemsField,
+      expandField,
+      foodsExpanded: [store[0][dataItemKey]],
+      drinksExpanded: [store[0][dataItemKey]],
+    };
+  },
+  computed: {
+    foodsTreeData() {
+      return processTreeData(
+        this.dataItems,
+        { expanded: this.foodsExpanded, value: this.foods },
+        fields
+      );
+    },
+    drinksTreeData() {
+      return processTreeData(
+        this.dataItems,
+        { expanded: this.drinksExpanded, value: this.drinks },
+        fields
+      );
+    },
+  },
+  methods: {
+    getDrinksErrorMessage() {
+      return this.drinks
+        ? 'Please select drinks only!'
+        : 'Please select an item!';
+    },
+    validateDrinks() {
+      if (!this.drinks) {
+        return false;
+      }
+
+      return (
+        this.drinks.text === 'Juice' ||
+        this.drinks.text === 'Water' ||
+        this.drinks.text === 'Milk'
+      );
+    },
+    handleChange(event) {
+      this[event.target.name] = event.value;
+    },
+    handleSubmit(event) {
+      event.preventDefault();
+      this.success = true;
+      setTimeout(() => {
+        this.success = false;
+      }, 3000);
+    },
+    onExpandChange(event) {
+      this[event.target.name + 'Expanded'] = expandedState(
+        event.item,
+        dataItemKey,
+        this[event.target.name + 'Expanded']
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/form/disabled-styles/tree-data-operations.js b/vue-options-api-demos/dropdowns/dropdowntree/form/disabled-styles/tree-data-operations.js
new file mode 100644
index 00000000..c32766b4
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/form/disabled-styles/tree-data-operations.js
@@ -0,0 +1,31 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { mapTree, extendDataItem } from '@progress/kendo-vue-common';
+
+export const processTreeData = (data, state, fields) => {
+    const { selectField, expandField, dataItemKey, subItemsField } = fields;
+    const { expanded, value, filter } = state;
+    const filtering = Boolean(filter && filter.value);
+
+    return mapTree(
+        filtering ? filterBy(data, [ filter ], subItemsField) : data,
+        subItemsField,
+        item => {
+            const props = {
+                [expandField]: expanded.includes(item[dataItemKey]),
+                [selectField]: value && item[dataItemKey] === value[dataItemKey]
+            };
+            return filtering ?
+                extendDataItem(item, subItemsField, props) :
+                { ...item, ...props };
+        }
+    );
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const itemKey = item[dataItemKey];
+    const index = expanded.indexOf(itemKey);
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/form/override/main.js b/vue-options-api-demos/dropdowns/dropdowntree/form/override/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/form/override/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/form/override/main.vue b/vue-options-api-demos/dropdowns/dropdowntree/form/override/main.vue
new file mode 100644
index 00000000..d2b714bd
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/form/override/main.vue
@@ -0,0 +1,154 @@
+<template>
+  <div class="row example-wrapper">
+    <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+      <form class="k-form" method="POST" action="/" @submit="handleSubmit">
+        <h3>Fill your basket!</h3>
+        <div>
+          <DropDownTree
+            :label="'Food'"
+            :name="'food'"
+            :value="food"
+            @change="handleChange"
+            :data-items="foodTreeData"
+            :text-field="textField"
+            :data-item-key="dataItemKey"
+            :expandField="expandField"
+            @expandchange="onExpandChange"
+          />
+        </div>
+        <div>
+          <DropDownTree
+            :label="'Drinks'"
+            :name="'drinks'"
+            :value="drinks"
+            @change="handleChange"
+            :data-items="drinksTreeData"
+            :valid="validateDrinks()"
+            :text-field="textField"
+            :data-item-key="dataItemKey"
+            :validation-message="getDrinksErrorMessage()"
+            :expandField="expandField"
+            @expandchange="onExpandChange"
+          />
+        </div>
+        <div :style="{ marginTop: '10px' }">
+          <KButton type="submit">Submit</KButton>
+        </div>
+      </form>
+    </div>
+    <div
+      v-if="success"
+      :class="'alert alert-success'"
+      :style="{ position: 'absolute' }"
+    >
+      Form submitted!
+    </div>
+  </div>
+</template>
+<script>
+import { DropDownTree } from '@progress/kendo-vue-dropdowns';
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+import { processTreeData, expandedState } from './tree-data-operations';
+
+const store = [
+  {
+    id: 1,
+    text: 'Fruits',
+    items: [
+      { id: 2, text: 'Banana' },
+      { id: 3, text: 'Strawberry' },
+    ],
+  },
+  { id: 4, text: 'Carrot' },
+  { id: 5, text: 'Bread' },
+  { id: 6, text: 'Milk' },
+  { id: 7, text: 'Water' },
+  { id: 8, text: 'Juice' },
+];
+
+const dataItemKey = 'id';
+const selectField = 'selected';
+const subItemsField = 'items';
+const expandField = 'expanded';
+const textField = 'text';
+
+const fields = {
+  dataItemKey,
+  selectField,
+  expandField,
+  subItemsField,
+};
+
+export default {
+  components: {
+    DropDownTree,
+    KButton,
+  },
+  data() {
+    return {
+      success: false,
+      fields,
+      dataItems: store,
+      food: null,
+      drinks: null,
+      textField,
+      dataItemKey,
+      subItemsField,
+      expandField,
+      foodExpanded: [store[0][dataItemKey]],
+      drinksExpanded: [store[0][dataItemKey]],
+    };
+  },
+  computed: {
+    foodsTreeData() {
+      return processTreeData(
+        this.dataItems,
+        { expanded: this.foodsExpanded, value: this.foods },
+        fields
+      );
+    },
+    drinksTreeData() {
+      return processTreeData(
+        this.dataItems,
+        { expanded: this.drinksExpanded, value: this.drinks },
+        fields
+      );
+    },
+  },
+  methods: {
+    getDrinksErrorMessage() {
+      return this.drinks
+        ? 'Please select drinks only!'
+        : 'Please select an item!';
+    },
+    validateDrinks() {
+      if (!this.drinks) {
+        return false;
+      }
+
+      return (
+        this.drinks.text === 'Juice' ||
+        this.drinks.text === 'Water' ||
+        this.drinks.text === 'Milk'
+      );
+    },
+    handleChange(event) {
+      this[event.target.name] = event.value;
+    },
+    handleSubmit(event) {
+      event.preventDefault();
+      this.success = true;
+      setTimeout(() => {
+        this.success = false;
+      }, 3000);
+    },
+    onExpandChange(event) {
+      this[event.target.name + 'Expanded'] = expandedState(
+        event.item,
+        dataItemKey,
+        this[event.target.name + 'Expanded']
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/form/override/tree-data-operations.js b/vue-options-api-demos/dropdowns/dropdowntree/form/override/tree-data-operations.js
new file mode 100644
index 00000000..c32766b4
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/form/override/tree-data-operations.js
@@ -0,0 +1,31 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { mapTree, extendDataItem } from '@progress/kendo-vue-common';
+
+export const processTreeData = (data, state, fields) => {
+    const { selectField, expandField, dataItemKey, subItemsField } = fields;
+    const { expanded, value, filter } = state;
+    const filtering = Boolean(filter && filter.value);
+
+    return mapTree(
+        filtering ? filterBy(data, [ filter ], subItemsField) : data,
+        subItemsField,
+        item => {
+            const props = {
+                [expandField]: expanded.includes(item[dataItemKey]),
+                [selectField]: value && item[dataItemKey] === value[dataItemKey]
+            };
+            return filtering ?
+                extendDataItem(item, subItemsField, props) :
+                { ...item, ...props };
+        }
+    );
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const itemKey = item[dataItemKey];
+    const index = expanded.indexOf(itemKey);
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/header-footer/main.js b/vue-options-api-demos/dropdowns/dropdowntree/header-footer/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/header-footer/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/header-footer/main.vue b/vue-options-api-demos/dropdowns/dropdowntree/header-footer/main.vue
new file mode 100644
index 00000000..105d108f
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/header-footer/main.vue
@@ -0,0 +1,97 @@
+<template>
+  <div>
+      <DropDownTree
+        :style="{ width: '300px' }"
+        :key="0"
+        :dataItems="treeData"
+        :value="value"
+        @change="onChange"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :selectField="selectField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :header="'header'"
+        :footer="'footer'"
+      >
+      <template v-slot:header>
+        <span>
+         SomeHeader
+        </span>
+      </template>
+      <template v-slot:footer>
+        <span>
+         SomeFooter
+        </span>
+      </template>
+    </DropDownTree>
+    </div>
+</template>
+<script>
+import {
+  DropDownTree
+} from "@progress/kendo-vue-dropdowns";
+import { processTreeData, expandedState } from "./tree-data-operations";
+import { data } from "./tree-data";
+const is = (fileName, ext) => new RegExp(`.${ext}\$`).test(fileName);
+
+const dataItemKey = "id";
+const selectField = "selected";
+const subItemsField = "items";
+const expandField = "expanded";
+const textField = "text";
+
+const fields = {
+  dataItemKey,
+  selectField,
+  expandField,
+  subItemsField,
+};
+
+export default {
+  components: {
+    DropDownTree
+  },
+  data: function () {
+    return {
+      textField,
+      dataItemKey,
+      selectField,
+      subItemsField,
+      expandField,
+      dataItems: data,
+      value: null,
+      expanded: [data[0][dataItemKey]]
+    };
+  },
+  computed: {
+   treeData () {
+      return processTreeData(this.dataItems, { expanded: this.expanded, value: this.value }, fields);
+    }
+  },
+  methods: {
+    iconClassName({ text, items }) {
+      console.log(text, items)
+      if (items !== undefined) {
+        return 'k-icon k-i-folder';
+      } else if (is(text, 'pdf')) {
+        return 'k-icon k-i-file-pdf';
+      } else if (is(text, 'html')) {
+        return 'k-icon k-i-html';
+      } else if (is(text, 'jpg|png')) {
+        return 'k-icon k-i-image';
+      } else {
+        return '';
+      }
+    },
+    onChange (event) {
+      this.value = event.value;
+    },
+    onExpandChange (event) {
+        this.expanded = (expandedState(event.item, dataItemKey, this.expanded))
+    }
+  }
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/header-footer/tree-data-operations.js b/vue-options-api-demos/dropdowns/dropdowntree/header-footer/tree-data-operations.js
new file mode 100644
index 00000000..c32766b4
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/header-footer/tree-data-operations.js
@@ -0,0 +1,31 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { mapTree, extendDataItem } from '@progress/kendo-vue-common';
+
+export const processTreeData = (data, state, fields) => {
+    const { selectField, expandField, dataItemKey, subItemsField } = fields;
+    const { expanded, value, filter } = state;
+    const filtering = Boolean(filter && filter.value);
+
+    return mapTree(
+        filtering ? filterBy(data, [ filter ], subItemsField) : data,
+        subItemsField,
+        item => {
+            const props = {
+                [expandField]: expanded.includes(item[dataItemKey]),
+                [selectField]: value && item[dataItemKey] === value[dataItemKey]
+            };
+            return filtering ?
+                extendDataItem(item, subItemsField, props) :
+                { ...item, ...props };
+        }
+    );
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const itemKey = item[dataItemKey];
+    const index = expanded.indexOf(itemKey);
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/header-footer/tree-data.js b/vue-options-api-demos/dropdowns/dropdowntree/header-footer/tree-data.js
new file mode 100644
index 00000000..5b749471
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/header-footer/tree-data.js
@@ -0,0 +1,15 @@
+export const data = [
+    {
+        text: 'Furniture', id: 1, items: [
+            { text: 'Tables & Chairs', id: 2 },
+            { text: 'Sofas', id: 3 },
+            { text: 'Occasional Furniture', id: 4 }
+        ]
+    }, {
+        text: 'Decor', id: 5, items: [
+            { text: 'Bed Linen', id: 6 },
+            { text: 'Curtains & Blinds', id: 7 },
+            { text: 'Carpets', id: 8 }
+        ]
+    }
+];
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/item-template/main.js b/vue-options-api-demos/dropdowns/dropdowntree/item-template/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/item-template/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/item-template/main.vue b/vue-options-api-demos/dropdowns/dropdowntree/item-template/main.vue
new file mode 100644
index 00000000..5fe826ea
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/item-template/main.vue
@@ -0,0 +1,98 @@
+<template>
+  <div>
+      <DropDownTree
+        :style="{ width: '300px' }"
+        :dataItems="treeData"
+        :value="value"
+        @change="onChange"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :selectField="selectField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Category'"
+        :item="'item'"
+        :value-render="'valueRender'"
+      >
+      <template v-slot:item="{ props }">
+        <span>
+          <span :class="iconClassName(props.item)" />
+          {{ props.item.text }}
+        </span>
+      </template>
+      <template v-slot:valueRender="{props}">
+            <span v-if="props.value">
+              <span :class="iconClassName(props.value)"  />
+                <span class="custom-tag"></span> - {{props.value.text}}
+            </span>
+        </template>
+    </DropDownTree>
+    </div>
+</template>
+<script>
+import {
+  DropDownTree
+} from "@progress/kendo-vue-dropdowns";
+import { processTreeData, expandedState } from "./tree-data-operations";
+import { data } from "./tree-data";
+const is = (fileName, ext) => new RegExp(`.${ext}\$`).test(fileName);
+
+const dataItemKey = "id";
+const selectField = "selected";
+const subItemsField = "items";
+const expandField = "expanded";
+const textField = "text";
+
+const fields = {
+  dataItemKey,
+  selectField,
+  expandField,
+  subItemsField,
+};
+
+export default {
+  components: {
+    DropDownTree
+  },
+  data: function () {
+    return {
+      textField,
+      dataItemKey,
+      selectField,
+      subItemsField,
+      expandField,
+      dataItems: data,
+      value: null,
+      expanded: [data[0][dataItemKey]]
+    };
+  },
+  computed: {
+   treeData () {
+      return processTreeData(this.dataItems, { expanded: this.expanded, value: this.value }, fields);
+    }
+  },
+  methods: {
+    iconClassName({ text, items }) {
+      console.log(text, items)
+      if (items !== undefined) {
+        return 'k-icon k-i-folder';
+      } else if (is(text, 'pdf')) {
+        return 'k-icon k-i-file-pdf';
+      } else if (is(text, 'html')) {
+        return 'k-icon k-i-html';
+      } else if (is(text, 'jpg|png')) {
+        return 'k-icon k-i-image';
+      } else {
+        return '';
+      }
+    },
+    onChange (event) {
+      this.value = event.value;
+    },
+    onExpandChange (event) {
+        this.expanded = (expandedState(event.item, dataItemKey, this.expanded))
+    }
+  }
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/item-template/tree-data-operations.js b/vue-options-api-demos/dropdowns/dropdowntree/item-template/tree-data-operations.js
new file mode 100644
index 00000000..c32766b4
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/item-template/tree-data-operations.js
@@ -0,0 +1,31 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { mapTree, extendDataItem } from '@progress/kendo-vue-common';
+
+export const processTreeData = (data, state, fields) => {
+    const { selectField, expandField, dataItemKey, subItemsField } = fields;
+    const { expanded, value, filter } = state;
+    const filtering = Boolean(filter && filter.value);
+
+    return mapTree(
+        filtering ? filterBy(data, [ filter ], subItemsField) : data,
+        subItemsField,
+        item => {
+            const props = {
+                [expandField]: expanded.includes(item[dataItemKey]),
+                [selectField]: value && item[dataItemKey] === value[dataItemKey]
+            };
+            return filtering ?
+                extendDataItem(item, subItemsField, props) :
+                { ...item, ...props };
+        }
+    );
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const itemKey = item[dataItemKey];
+    const index = expanded.indexOf(itemKey);
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/item-template/tree-data.js b/vue-options-api-demos/dropdowns/dropdowntree/item-template/tree-data.js
new file mode 100644
index 00000000..4fc5bfec
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/item-template/tree-data.js
@@ -0,0 +1,28 @@
+export const data = [ {
+    text: 'My Documents', id: 1,
+    items: [
+        {
+            text: 'Kendo UI for Vue Project', id: 2,
+            items: [
+                { text: 'about.html', id: 3 },
+                { text: 'index.html', id: 4 },
+                { text: 'logo.png', id: 5 }
+            ]
+        },
+        {
+            text: 'New Web Site', id: 6,
+            items: [
+                { text: 'mockup.jpg', id: 7 },
+                { text: 'Research.pdf', id: 8 }
+            ]
+        },
+        {
+            text: 'Reports', id: 9,
+            items: [
+                { text: 'February.pdf', id: 10 },
+                { text: 'March.pdf', id: 11 },
+                { text: 'April.pdf', id: 12 }
+            ]
+        }
+    ]
+} ];
\ No newline at end of file
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/no-data/main.js b/vue-options-api-demos/dropdowns/dropdowntree/no-data/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/no-data/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/no-data/main.vue b/vue-options-api-demos/dropdowns/dropdowntree/no-data/main.vue
new file mode 100644
index 00000000..e6f89ce0
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/no-data/main.vue
@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <DropDownTree
+      :style="{ width: '300px' }"
+      :listNoData="'listNoData'"
+      :textField="textField"
+      :dataItemKey="dataItemKey"
+    >
+      <template v-slot:listNoData>
+        <div class="k-nodata">
+          <div>
+            <h4 :style="{ fontSize: '1em' }">
+              <span class="k-icon k-i-warning" :style="{ fontSize: '2.5em' }" />
+              <br />
+              <br />
+              <p>No Data</p>
+            </h4>
+          </div>
+        </div>
+      </template>
+    </DropDownTree>
+  </div>
+</template>
+<script>
+import { DropDownTree } from '@progress/kendo-vue-dropdowns';
+import { processTreeData, expandedState } from './tree-data-operations';
+const is = (fileName, ext) => new RegExp(`.${ext}\$`).test(fileName);
+
+const dataItemKey = 'id';
+const selectField = 'selected';
+const subItemsField = 'items';
+const expandField = 'expanded';
+const textField = 'text';
+
+const fields = {
+  dataItemKey,
+  selectField,
+  expandField,
+  subItemsField,
+};
+
+export default {
+  components: {
+    DropDownTree,
+  },
+  data: function () {
+    return {
+      textField,
+      dataItemKey,
+      selectField,
+      subItemsField,
+      expandField,
+      dataItems: [],
+      value: null,
+      expanded: [],
+    };
+  },
+  computed: {
+    treeData() {
+      return processTreeData(
+        this.dataItems,
+        { expanded: this.expanded, value: this.value },
+        fields
+      );
+    },
+  },
+  methods: {
+    iconClassName({ text, items }) {
+      console.log(text, items);
+      if (items !== undefined) {
+        return 'k-icon k-i-folder';
+      } else if (is(text, 'pdf')) {
+        return 'k-icon k-i-file-pdf';
+      } else if (is(text, 'html')) {
+        return 'k-icon k-i-html';
+      } else if (is(text, 'jpg|png')) {
+        return 'k-icon k-i-image';
+      } else {
+        return '';
+      }
+    },
+    onExpandChange(event) {
+      this.expanded = expandedState(event.item, dataItemKey, this.expanded);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/no-data/tree-data-operations.js b/vue-options-api-demos/dropdowns/dropdowntree/no-data/tree-data-operations.js
new file mode 100644
index 00000000..c32766b4
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/no-data/tree-data-operations.js
@@ -0,0 +1,31 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { mapTree, extendDataItem } from '@progress/kendo-vue-common';
+
+export const processTreeData = (data, state, fields) => {
+    const { selectField, expandField, dataItemKey, subItemsField } = fields;
+    const { expanded, value, filter } = state;
+    const filtering = Boolean(filter && filter.value);
+
+    return mapTree(
+        filtering ? filterBy(data, [ filter ], subItemsField) : data,
+        subItemsField,
+        item => {
+            const props = {
+                [expandField]: expanded.includes(item[dataItemKey]),
+                [selectField]: value && item[dataItemKey] === value[dataItemKey]
+            };
+            return filtering ?
+                extendDataItem(item, subItemsField, props) :
+                { ...item, ...props };
+        }
+    );
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const itemKey = item[dataItemKey];
+    const index = expanded.indexOf(itemKey);
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/overview/main.js b/vue-options-api-demos/dropdowns/dropdowntree/overview/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/overview/main.vue b/vue-options-api-demos/dropdowns/dropdowntree/overview/main.vue
new file mode 100644
index 00000000..b7efaa29
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/overview/main.vue
@@ -0,0 +1,65 @@
+<template>
+  <div>
+      <DropDownTree
+        :style="{ width: '300px' }"
+        :dataItems="treeData"
+        v-model="value"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :selectField="selectField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Category'"
+      />
+    </div>
+</template>
+<script>
+import {
+  DropDownTree,
+} from "@progress/kendo-vue-dropdowns";
+import { processTreeData, expandedState } from "./tree-data-operations";
+import { data } from "./tree-data";
+
+const dataItemKey = "id";
+const selectField = "selected";
+const subItemsField = "items";
+const expandField = "expanded";
+const textField = "text";
+
+const fields = {
+  dataItemKey,
+  selectField,
+  expandField,
+  subItemsField,
+};
+
+export default {
+  components: {
+    DropDownTree
+  },
+  data: function () {
+    return {
+      textField,
+      dataItemKey,
+      selectField,
+      subItemsField,
+      expandField,
+      dataItems: data,
+      value: null,
+      expanded: [data[0][dataItemKey]]
+    };
+  },
+  computed: {
+   treeData () {
+      return processTreeData(this.dataItems, { expanded: this.expanded, value: this.value }, fields);
+    }
+  },
+  methods: {
+    onExpandChange (event) {
+        this.expanded = (expandedState(event.item, dataItemKey, this.expanded))
+    }
+  }
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/overview/tree-data-operations.js b/vue-options-api-demos/dropdowns/dropdowntree/overview/tree-data-operations.js
new file mode 100644
index 00000000..c32766b4
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/overview/tree-data-operations.js
@@ -0,0 +1,31 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { mapTree, extendDataItem } from '@progress/kendo-vue-common';
+
+export const processTreeData = (data, state, fields) => {
+    const { selectField, expandField, dataItemKey, subItemsField } = fields;
+    const { expanded, value, filter } = state;
+    const filtering = Boolean(filter && filter.value);
+
+    return mapTree(
+        filtering ? filterBy(data, [ filter ], subItemsField) : data,
+        subItemsField,
+        item => {
+            const props = {
+                [expandField]: expanded.includes(item[dataItemKey]),
+                [selectField]: value && item[dataItemKey] === value[dataItemKey]
+            };
+            return filtering ?
+                extendDataItem(item, subItemsField, props) :
+                { ...item, ...props };
+        }
+    );
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const itemKey = item[dataItemKey];
+    const index = expanded.indexOf(itemKey);
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
diff --git a/vue-options-api-demos/dropdowns/dropdowntree/overview/tree-data.js b/vue-options-api-demos/dropdowns/dropdowntree/overview/tree-data.js
new file mode 100644
index 00000000..5b749471
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/dropdowntree/overview/tree-data.js
@@ -0,0 +1,15 @@
+export const data = [
+    {
+        text: 'Furniture', id: 1, items: [
+            { text: 'Tables & Chairs', id: 2 },
+            { text: 'Sofas', id: 3 },
+            { text: 'Occasional Furniture', id: 4 }
+        ]
+    }, {
+        text: 'Decor', id: 5, items: [
+            { text: 'Bed Linen', id: 6 },
+            { text: 'Curtains & Blinds', id: 7 },
+            { text: 'Carpets', id: 8 }
+        ]
+    }
+];
diff --git a/vue-options-api-demos/dropdowns/globalization/es.json b/vue-options-api-demos/dropdowns/globalization/es.json
new file mode 100644
index 00000000..dc3df71d
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/globalization/es.json
@@ -0,0 +1,6 @@
+{
+    "dropdowns": {
+        "nodata": "DATOS NO ENCONTRADOS.",
+        "clear": "claro"
+    }
+}
diff --git a/vue-options-api-demos/dropdowns/globalization/main.js b/vue-options-api-demos/dropdowns/globalization/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/globalization/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/globalization/main.vue b/vue-options-api-demos/dropdowns/globalization/main.vue
new file mode 100644
index 00000000..77e3f2ba
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/globalization/main.vue
@@ -0,0 +1,92 @@
+<template>
+    <localization :language="'es-ES'">
+      <div class="row">
+        <div class="m-3">
+          <p>AutoComplete</p>
+          <AutoComplete
+            :style="{ width: '230px' }"
+            :label="'Product'"
+            :data-items="dataProducts"
+          >
+          </AutoComplete>
+        </div>
+        <div class="m-3">
+          <p>ComboBox</p>
+          <ComboBox
+            :style="{ width: '230px' }"
+            :label="'Product'"
+            :data-items="dataProducts"
+          >
+          </ComboBox>
+        </div>
+        <div class="m-3">
+          <p>DropDownList</p>
+          <DropDownList
+            :style="{ width: '230px' }"
+            :label="'Product'"
+            :data-items="dataProducts"
+          >
+          </DropDownList>
+        </div>
+      </div>
+      <div class="row">
+        <div class="m-3">
+          <p>DropDownTree</p>
+          <DropDownTree
+            :style="{ width: '230px' }"
+            :label="'Product'"
+            :data-items="dataProducts"
+          >
+          </DropDownTree>
+        </div>
+        <div class="m-3">
+          <p>MultiSelect</p>
+          <MultiSelect
+            :style="{ width: '230px' }"
+            :label="'Product'"
+            :data-items="dataProducts"
+          >
+          </MultiSelect>
+        </div>
+        <div class="m-3">
+          <p>MultiSelectTree</p>
+          <MultiSelectTree
+            :style="{ width: '230px' }"
+            :label="'Product'"
+            :data-items="dataProducts"
+          >
+          </MultiSelectTree>
+        </div>
+      </div>
+    </localization>
+  </template>
+  <script>
+  import {
+    AutoComplete,
+    ComboBox,
+    DropDownList,
+    DropDownTree,
+    MultiSelect,
+    MultiSelectTree,
+  } from '@progress/kendo-vue-dropdowns';
+  import { loadMessages, LocalizationProvider } from '@progress/kendo-vue-intl';
+  import esMessages from './es.json';
+  loadMessages(esMessages, 'es-ES');
+  export default {
+    components: {
+      AutoComplete,
+      ComboBox,
+      DropDownList,
+      MultiSelect,
+      MultiSelectTree,
+      DropDownTree,
+      localization: LocalizationProvider,
+    },
+    data: function () {
+      return {
+        dataProducts: [],
+      };
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/dropdowns/label/main.js b/vue-options-api-demos/dropdowns/label/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/label/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/label/main.vue b/vue-options-api-demos/dropdowns/label/main.vue
new file mode 100644
index 00000000..dc92f64a
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/label/main.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="row">
+    <div class="m-3">
+      <p>AutoComplete</p>
+      <AutoComplete
+        :style="{ width: '230px' }"
+        :label="'Product'"
+        :data-items="dataProducts"
+        :text-field="'productName'"
+      >
+      </AutoComplete>
+    </div>
+    <div class="m-3">
+      <p>ComboBox</p>
+      <ComboBox
+        :style="{ width: '230px' }"
+        :label="'Product'"
+        :data-items="dataProducts"
+        :text-field="'productName'"
+      >
+      </ComboBox>
+    </div>
+    <div class="m-3">
+      <p>DropDownList</p>
+      <DropDownList
+        :style="{ width: '230px' }"
+        :label="'Product'"
+        :data-items="dataProducts"
+        :text-field="'productName'"
+        :value-field="'productId'"
+      >
+      </DropDownList>
+    </div>
+  </div>
+  <div class="row">
+    <div class="m-3">
+      <p>MultiSelect</p>
+      <MultiSelect
+        :style="{ width: '230px' }"
+        :label="'Product'"
+        :data-items="dataProducts"
+        :text-field="'productName'"
+        :value-field="'productId'"
+      >
+      </MultiSelect>
+    </div>
+    <div class="m-3">
+      <p>DropDownTree</p>
+      <DropDownTree
+        :style="{ width: '230px' }"
+        :dataItems="treeData"
+        v-model="ddtValue"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :subItemsField="subItemsField"
+        :selectField="selectField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Category'"
+      />
+    </div>
+    <div class="m-3">
+      <p>MultiSelectTree</p>
+      <MultiSelectTree
+        :style="{ width: '230px' }"
+        :dataItems="multiTreeData"
+        v-model="mstValue"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :checkField="checkField"
+        :checkIndeterminateField="checkIndeterminateField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Category'"
+      />
+    </div>
+  </div>
+</template>
+  <script>
+import {
+  AutoComplete,
+  ComboBox,
+  DropDownList,
+  MultiSelect,
+  DropDownTree,
+  MultiSelectTree,
+} from '@progress/kendo-vue-dropdowns';
+
+import {
+  processMultiSelectTreeData,
+  expandedState,
+} from './multiselecttree-data-operations';
+import { processTreeData } from './tree-data-operations';
+import { data } from './tree-data';
+
+const dataItemKey = 'id';
+const checkField = 'checkField';
+const checkIndeterminateField = 'checkIndeterminateField';
+const subItemsField = 'items';
+const expandField = 'expanded';
+const selectField = 'selected';
+const textField = 'text';
+
+const fields = {
+  dataItemKey,
+  checkField,
+  checkIndeterminateField,
+  expandField,
+  selectField,
+  subItemsField,
+};
+
+export default {
+  components: {
+    AutoComplete,
+    ComboBox,
+    DropDownList,
+    MultiSelect,
+    DropDownTree,
+    MultiSelectTree,
+  },
+  data: function () {
+    return {
+      dataProducts: [
+        { productName: 'Chai', productId: 1, categoryId: 1 },
+        { productName: 'Chang', productId: 2, categoryId: 1 },
+        { productName: 'Aniseed Syrup', productId: 3, categoryId: 2 },
+        { productName: 'Genen Shouyu', productId: 4, categoryId: 2 },
+        { productName: 'Ikura', productId: 5, categoryId: 3 },
+      ],
+      textField,
+      dataItemKey,
+      checkField,
+      checkIndeterminateField,
+      subItemsField,
+      expandField,
+      selectField,
+      dataItems: data,
+      ddtValue: null,
+      mstValue: [],
+      expanded: [data[0][dataItemKey]],
+    };
+  },
+  computed: {
+    multiTreeData() {
+      return processMultiSelectTreeData(this.dataItems, {
+        expanded: this.expanded,
+        value: this.mstValue,
+        ...fields,
+      });
+    },
+    treeData() {
+      return processTreeData(
+        this.dataItems,
+        { expanded: this.expanded, value: this.ddtValue },
+        fields
+      );
+    },
+  },
+  methods: {
+    onExpandChange(event) {
+      this.expanded = expandedState(event.item, dataItemKey, this.expanded);
+    },
+  },
+};
+</script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/dropdowns/label/multiselecttree-data-operations.js b/vue-options-api-demos/dropdowns/label/multiselecttree-data-operations.js
new file mode 100644
index 00000000..50ff55a2
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/label/multiselecttree-data-operations.js
@@ -0,0 +1,107 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { getter, setter } from '@progress/kendo-vue-common';
+
+export const getValueMap = (value, idGetter) => {
+    const map = {};
+
+    if (value && value.length) {
+        value.forEach((item) => {
+            map[idGetter(item)] = true;
+        });
+    }
+
+    return map;
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const keyGetter = getter(dataItemKey);
+    const itemKey = keyGetter(item);
+    const index = expanded.findIndex(currentKey => {
+        return currentKey === itemKey;
+    });
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
+
+const mapMultiSelectTreeData = (
+    data,
+    options
+) => {
+    const {
+        keyGetter,
+        subItemGetter,
+        subItemSetter,
+        checkSetter,
+        expandedSetter,
+        checkIndeterminateSetter,
+        valueMap,
+        expandedMap
+    } = options;
+
+    if (!data || !data.length) { return [data, false];}
+
+    let hasChecked = false;
+    const newData = [...data].map(dataItem => {
+        const [children, hasCheckedChildren] = mapMultiSelectTreeData(subItemGetter(dataItem), options);
+
+        const isChecked = valueMap[keyGetter(dataItem)];
+        if (isChecked || hasCheckedChildren) {
+            hasChecked = true;
+        }
+
+        const newItem = { ...dataItem };
+
+        expandedSetter(newItem, expandedMap[keyGetter(newItem)])
+        subItemSetter(newItem, children);
+        checkSetter(newItem, isChecked);
+        checkIndeterminateSetter(newItem, !isChecked && hasCheckedChildren);
+
+        return newItem;
+    });
+
+    return [newData, hasChecked];
+};
+
+/**
+ * Creates a new array with the results of calling the provided callback function
+ * on every element in the provided data tree. The new tree items have their `check` and `checkIndeterminate` fields set.
+ */
+export const processMultiSelectTreeData = (
+    tree,
+    options
+) => {
+    const {
+        subItemsField = 'items',
+        checkField = 'checkField',
+        checkIndeterminateField = 'checkIndeterminateField',
+        expandField = 'expanded',
+        dataItemKey,
+        value,
+        filter,
+        expanded
+    } = options;
+
+    const keyGetter = getter(dataItemKey);
+    const filtering = Boolean(filter && filter.value);
+    const expandedMap = {};
+
+    expanded.forEach((id) => expandedMap[id] = true);
+
+    const [result] = mapMultiSelectTreeData(
+        tree,
+        {
+            valueMap: getValueMap(value, keyGetter),
+            expandedMap: expandedMap,
+            keyGetter,
+            expandedSetter: setter(expandField),
+            subItemGetter: getter(subItemsField),
+            subItemSetter: setter(subItemsField),
+            checkSetter: setter(checkField),
+            checkIndeterminateSetter: setter(checkIndeterminateField)
+        }
+    );
+
+    return filtering ? filterBy(result, [ filter ], subItemsField) : result;
+};
diff --git a/vue-options-api-demos/dropdowns/label/tree-data-operations.js b/vue-options-api-demos/dropdowns/label/tree-data-operations.js
new file mode 100644
index 00000000..c32766b4
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/label/tree-data-operations.js
@@ -0,0 +1,31 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { mapTree, extendDataItem } from '@progress/kendo-vue-common';
+
+export const processTreeData = (data, state, fields) => {
+    const { selectField, expandField, dataItemKey, subItemsField } = fields;
+    const { expanded, value, filter } = state;
+    const filtering = Boolean(filter && filter.value);
+
+    return mapTree(
+        filtering ? filterBy(data, [ filter ], subItemsField) : data,
+        subItemsField,
+        item => {
+            const props = {
+                [expandField]: expanded.includes(item[dataItemKey]),
+                [selectField]: value && item[dataItemKey] === value[dataItemKey]
+            };
+            return filtering ?
+                extendDataItem(item, subItemsField, props) :
+                { ...item, ...props };
+        }
+    );
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const itemKey = item[dataItemKey];
+    const index = expanded.indexOf(itemKey);
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
diff --git a/vue-options-api-demos/dropdowns/label/tree-data.js b/vue-options-api-demos/dropdowns/label/tree-data.js
new file mode 100644
index 00000000..5b749471
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/label/tree-data.js
@@ -0,0 +1,15 @@
+export const data = [
+    {
+        text: 'Furniture', id: 1, items: [
+            { text: 'Tables & Chairs', id: 2 },
+            { text: 'Sofas', id: 3 },
+            { text: 'Occasional Furniture', id: 4 }
+        ]
+    }, {
+        text: 'Decor', id: 5, items: [
+            { text: 'Bed Linen', id: 6 },
+            { text: 'Curtains & Blinds', id: 7 },
+            { text: 'Carpets', id: 8 }
+        ]
+    }
+];
diff --git a/vue-options-api-demos/dropdowns/multiselect/adaptive-rendering-grouping/grouping-data.js b/vue-options-api-demos/dropdowns/multiselect/adaptive-rendering-grouping/grouping-data.js
new file mode 100644
index 00000000..9f42ec6e
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/adaptive-rendering-grouping/grouping-data.js
@@ -0,0 +1,200 @@
+export const employees = [
+    {
+        id: 11,
+        name: "Hyacinth Hood",
+        reportsTo: 32,
+        phone: "(889) 345-2438",
+        extension: 8564,
+        hireDate: new Date("2014-02-03T20:00:00.000Z"),
+        fullTime: true,
+        position: "Team Lead",
+        timeInPosition: 1,
+    },
+    {
+        id: 40,
+        name: "Karleigh Garza",
+        reportsTo: 52,
+        phone: "(370) 983-8796",
+        extension: 4044,
+        hireDate: new Date("2014-03-10T00:00:00.000Z"),
+        fullTime: true,
+        position: "Team Lead",
+        timeInPosition: 1,
+    },
+    {
+        id: 46,
+        name: "Darrel Solis",
+        reportsTo: 43,
+        phone: "(327) 977-0216",
+        extension: 7779,
+        hireDate: new Date("2015-04-25T00:00:00.000Z"),
+        fullTime: true,
+        position: "Team Lead",
+        timeInPosition: 4,
+    },
+    {
+        id: 76,
+        name: "Cheyenne Olson",
+        reportsTo: 63,
+        phone: "(241) 645-0257",
+        extension: 9181,
+        hireDate: new Date("2015-05-19T00:00:00.000Z"),
+        fullTime: true,
+        position: "Developer",
+        timeInPosition: 5,
+    },
+    {
+        id: 78,
+        name: "Rinah Simon",
+        reportsTo: 11,
+        phone: "(285) 912-5271",
+        extension: 7795,
+        hireDate: new Date("2012-10-11T00:00:00.000Z"),
+        fullTime: true,
+        position: "Developer",
+        timeInPosition: 4,
+    },
+    {
+        id: 79,
+        name: "Duncan Mathews",
+        reportsTo: 64,
+        phone: "(790) 971-9709",
+        extension: 4573,
+        hireDate: new Date("2011-08-21T00:00:00.000Z"),
+        fullTime: false,
+        position: "Developer",
+        timeInPosition: 3,
+    },
+    {
+        id: 82,
+        name: "Yael Walters",
+        reportsTo: 69,
+        phone: "(311) 489-8191",
+        extension: 6520,
+        hireDate: new Date("2013-07-04T00:00:00.000Z"),
+        fullTime: true,
+        position: "Developer",
+        timeInPosition: 6,
+    },
+    {
+        id: 75,
+        name: "Eric Russell",
+        reportsTo: 63,
+        phone: "(516) 575-8505",
+        extension: 2224,
+        hireDate: new Date("2012-10-28T00:00:00.000Z"),
+        fullTime: true,
+        position: "Developer",
+        timeInPosition: 3,
+    },
+    {
+        id: 55,
+        name: "Summer Mosley",
+        reportsTo: 46,
+        phone: "(784) 962-2301",
+        extension: 5492,
+        hireDate: new Date("2010-03-02T00:00:00.000Z"),
+        fullTime: true,
+        position: "QA",
+        timeInPosition: 5,
+    },
+    {
+        id: 59,
+        name: "Keiko Espinoza",
+        reportsTo: 46,
+        phone: "(226) 600-5305",
+        extension: 9363,
+        hireDate: new Date("2011-09-18T00:00:00.000Z"),
+        fullTime: true,
+        position: "QA",
+        timeInPosition: 4,
+    },
+    {
+        id: 72,
+        name: "Stacey Lynn",
+        reportsTo: 40,
+        phone: "(140) 772-7509",
+        extension: 8396,
+        hireDate: new Date("2014-07-31T00:00:00.000Z"),
+        fullTime: false,
+        position: "QA",
+        timeInPosition: 1,
+    },
+    {
+        id: 38,
+        name: "Elton Tucker",
+        reportsTo: 69,
+        phone: "(988) 930-9331",
+        extension: 9216,
+        hireDate: new Date("2015-06-04T00:00:00.000Z"),
+        fullTime: true,
+        position: "Support",
+        timeInPosition: 1,
+    },
+    {
+        id: 71,
+        name: "Flavia Short",
+        reportsTo: 63,
+        phone: "(370) 133-9238",
+        extension: 6390,
+        hireDate: new Date("2013-02-21T00:00:00.000Z"),
+        fullTime: true,
+        position: "Support",
+        timeInPosition: 0,
+    },
+    {
+        id: 61,
+        name: "Candace Pickett",
+        reportsTo: 46,
+        phone: "(120) 117-7475",
+        extension: 5178,
+        hireDate: new Date("2010-05-06T00:00:00.000Z"),
+        fullTime: true,
+        position: "Support",
+        timeInPosition: 0,
+    },
+    {
+        id: 65,
+        name: "Thomas Terry",
+        reportsTo: 63,
+        phone: "(764) 831-4248",
+        extension: 3574,
+        hireDate: new Date("2015-06-15T00:00:00.000Z"),
+        fullTime: false,
+        position: "Support",
+        timeInPosition: 2,
+    },
+    {
+        id: 62,
+        name: "Palmer Gregory",
+        reportsTo: 64,
+        phone: "(360) 430-2505",
+        extension: 4337,
+        hireDate: new Date("2014-08-30T00:00:00.000Z"),
+        fullTime: true,
+        position: "Designer",
+        timeInPosition: 4,
+    },
+    {
+        id: 12,
+        name: "Jamalia Wallace",
+        reportsTo: 64,
+        phone: "(611) 391-8016",
+        extension: 1952,
+        hireDate: new Date("2011-09-08T00:00:00.000Z"),
+        fullTime: true,
+        position: "Designer",
+        timeInPosition: 3,
+    },
+    {
+        id: 66,
+        name: "Gloria Freeman",
+        reportsTo: 53,
+        phone: "(344) 950-9168",
+        extension: 4738,
+        hireDate: new Date("2013-05-06T00:00:00.000Z"),
+        fullTime: true,
+        position: "Designer",
+        timeInPosition: 0,
+    },
+];
diff --git a/vue-options-api-demos/dropdowns/multiselect/adaptive-rendering-grouping/main.js b/vue-options-api-demos/dropdowns/multiselect/adaptive-rendering-grouping/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/adaptive-rendering-grouping/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselect/adaptive-rendering-grouping/main.vue b/vue-options-api-demos/dropdowns/multiselect/adaptive-rendering-grouping/main.vue
new file mode 100644
index 00000000..aa26a895
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/adaptive-rendering-grouping/main.vue
@@ -0,0 +1,28 @@
+<template>
+  <MultiSelect
+    :data-items="groupedData"
+    :text-field="'name'"
+    :group-field="'position'"
+    :style="{
+      width: '300px',
+    }"
+    :adaptive="true"
+    :adaptive-title="'Adaptive Grouping'"
+  />
+</template>
+<script>
+import { MultiSelect } from "@progress/kendo-vue-dropdowns";
+import { groupBy } from '@progress/kendo-data-query';
+import { employees } from './grouping-data.js';
+
+export default {
+  components: {
+    MultiSelect
+},
+  data() {
+    return {
+      groupedData: groupBy(employees, [{ field: 'position' }]).reduce((res, group) =>  [...res, ...group.items], [])
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/dropdowns/multiselect/adaptive-rendering/main.js b/vue-options-api-demos/dropdowns/multiselect/adaptive-rendering/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/adaptive-rendering/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselect/adaptive-rendering/main.vue b/vue-options-api-demos/dropdowns/multiselect/adaptive-rendering/main.vue
new file mode 100644
index 00000000..c16bb70b
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/adaptive-rendering/main.vue
@@ -0,0 +1,56 @@
+<template>
+    <div>
+      <div>T-shirt size:</div>
+      <MultiSelect
+        :data-items="data"
+        :text-field="'text'"
+        :data-item-key="'id'"
+        :filterable="true"
+        @filterchange="handleFilterchange"
+        :adaptive="true"
+        :adaptive-title="'Choose size'"
+        :style="{
+          width: '300px'
+        }"
+      />
+    </div>
+</template>
+<script>
+import { MultiSelect } from "@progress/kendo-vue-dropdowns";
+import { filterBy } from '@progress/kendo-data-query';
+
+const allData = [
+  {
+    id: 1,
+    text: "Small",
+  },
+  {
+    id: 2,
+    text: "Medium",
+  },
+  {
+    id: 3,
+    text: "Large",
+  },
+]
+
+export default {
+  components: {
+    MultiSelect
+  },
+  data: function () {
+    return {
+      data: allData,
+    };
+  },
+  methods: {
+    filterData(filter) {
+      const filteredData = allData.slice();
+      return filterBy(filteredData, filter);
+    },
+    handleFilterchange(event) {
+      this.data = this.filterData(event.filter)
+    }
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/allow-custom-object-data/main.js b/vue-options-api-demos/dropdowns/multiselect/allow-custom-object-data/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/allow-custom-object-data/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselect/allow-custom-object-data/main.vue b/vue-options-api-demos/dropdowns/multiselect/allow-custom-object-data/main.vue
new file mode 100644
index 00000000..7ad786cd
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/allow-custom-object-data/main.vue
@@ -0,0 +1,58 @@
+<template>
+   <div class="example-wrapper">
+            <div>
+                <div class="example-config">
+                    Selected Values: {{value}}
+                </div>
+                <multiselect :style="{ width: '230px' }"
+                    :data-items="sports"
+                    :value="value"
+                    @change="onChange"
+                    :text-field="'text'"
+                    :data-item-key="'id'"
+                    :allow-custom="true"
+                >
+                </multiselect>
+            </div>
+        </div>
+</template>
+<script>
+import { MultiSelect } from '@progress/kendo-vue-dropdowns';
+
+export default {
+    components: {
+        'multiselect': MultiSelect
+    },
+    data () {
+        return {
+            sports: [  
+                { text: 'Basketball', id: 1 },
+                { text: 'Football', id: 2 },
+                { text: 'Tennis', id: 3 },
+                { text: 'Volleyball', id: 4 }
+            ],
+            value: []
+        };
+    },
+    methods: {
+        isCustom(item) { return item.id === undefined; },
+        addKey(item) { item.id = new Date().getTime(); },
+        onChange (event)  {
+            const values = event.target.value;
+            const lastItem = values[values.length - 1];
+
+            if (lastItem && this.isCustom(lastItem)) {
+                values.pop();
+                const sameItem = values.find(v => v.text === lastItem.text);
+                if (sameItem === undefined) {
+                    this.addKey(lastItem);
+                    values.push(lastItem);
+                }
+            }
+
+            this.value = values;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/allow-custom-values/main.js b/vue-options-api-demos/dropdowns/multiselect/allow-custom-values/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/allow-custom-values/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselect/allow-custom-values/main.vue b/vue-options-api-demos/dropdowns/multiselect/allow-custom-values/main.vue
new file mode 100644
index 00000000..1942e4e4
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/allow-custom-values/main.vue
@@ -0,0 +1,47 @@
+<template>
+   <div class="example-wrapper">
+            <div>
+                <div>Favorite sports: {{value}}</div>
+                <multiselect 
+                    :style="{ width: '300px'}"
+                    :data-items="sports"
+                    :value="value"
+                    @change="handleChange"
+                    :allow-custom="true"
+                ></multiselect>
+            </div>
+        </div>
+</template>
+<script>
+import { MultiSelect } from '@progress/kendo-vue-dropdowns';
+
+export default {
+    components: {
+        'multiselect': MultiSelect
+    },
+    data () {
+        return {
+            sports: [ 'Baseball', 'Basketball', 'Cricket', 'Field Hockey',
+    'Football', 'Table Tennis', 'Tennis', 'Volleyball' ],
+            value: []
+        };
+    },
+    methods: {
+        handleChange (event) {
+            const values = event.target.value;
+            const lastItem = values[values.length - 1];
+    
+            if (lastItem) {
+                values.pop();
+                const sameItem = values.find(value => value === lastItem);
+                if (sameItem === undefined) {
+                    values.push(lastItem);
+                }
+            }
+    
+            this.value = values;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/appearance/configurator/DropDownStyleConfigurator.vue b/vue-options-api-demos/dropdowns/multiselect/appearance/configurator/DropDownStyleConfigurator.vue
new file mode 100644
index 00000000..c1b36044
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/appearance/configurator/DropDownStyleConfigurator.vue
@@ -0,0 +1,105 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Fill Mode
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="fillModes"
+              :value="fillMode"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleFillModeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+    fillMode: String,
+    rounded: String,
+  },
+  emits: [
+    "sizechange",
+    "fillmodechange",
+    "roundedchange",
+  ],
+  data() {
+    return {
+      sizes: ["small", "medium", "large"],
+      fillModes: ["solid", "outline", "flat"],
+      roundedOptions: ["small", "medium", "large", "full"],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleFillModeChange(event) {
+      this.$emit("fillmodechange", event);
+    },
+    handleRoundedChange(event) {
+      this.$emit("roundedchange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/appearance/configurator/main.js b/vue-options-api-demos/dropdowns/multiselect/appearance/configurator/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/appearance/configurator/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselect/appearance/configurator/main.vue b/vue-options-api-demos/dropdowns/multiselect/appearance/configurator/main.vue
new file mode 100644
index 00000000..8fd92c94
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/appearance/configurator/main.vue
@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <DropDownStyleConfigurator
+      :size="size"
+      @sizechange="setSize"
+      :fill-mode="fillMode"
+      @fillmodechange="setFillMode"
+      :rounded="rounded"
+      @roundedchange="setRounded"
+    />
+    <MultiSelect
+      :style="{ width: '230px' }"
+      :size="size"
+      :fill-mode="fillMode"
+      :rounded="rounded"
+      :data-items="[
+        'X-Small',
+        'Small',
+        'Medium',
+        'Large',
+        'X-Large',
+        '2X-Large',
+      ]"
+    />
+  </div>
+</template>
+<script>
+import DropDownStyleConfigurator from "./DropDownStyleConfigurator.vue";
+import { MultiSelect } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    DropDownStyleConfigurator,
+    MultiSelect,
+  },
+  data() {
+    return {
+      size: "medium",
+      rounded: "medium",
+      fillMode: "solid",
+    };
+  },
+  methods: {
+    setRounded(event) {
+      this.rounded = event.value;
+    },
+    setSize(event) {
+      this.size = event.value;
+    },
+    setFillMode(event) {
+      this.fillMode = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/appearance/fill-mode/main.js b/vue-options-api-demos/dropdowns/multiselect/appearance/fill-mode/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/appearance/fill-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselect/appearance/fill-mode/main.vue b/vue-options-api-demos/dropdowns/multiselect/appearance/fill-mode/main.vue
new file mode 100644
index 00000000..b2c0ea94
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/appearance/fill-mode/main.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="example-config">
+    <div class="demo">
+      <span class="wrapper">
+        <span>Flat: </span>
+        <MultiSelect
+          :style="{ width: '170px' }"
+          :fill-mode="'flat'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Solid: </span>
+        <MultiSelect
+          :style="{ width: '170px' }"
+          :fill-mode="'solid'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Outline: </span>
+        <MultiSelect
+          :style="{ width: '170px' }"
+          :fill-mode="'outline'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Custom fill mode:</span>
+        <MultiSelect
+          :class="'custom-multiselect'"
+          :fill-mode="null"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { MultiSelect } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  components: {
+    MultiSelect,
+  },
+};
+</script>
+
+<style>
+.custom-multiselect {
+  width: 200px;
+  background-color: #00aead;
+  border: 2px solid #bfd843;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/dropdowns/multiselect/appearance/rounded/main.js b/vue-options-api-demos/dropdowns/multiselect/appearance/rounded/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/appearance/rounded/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselect/appearance/rounded/main.vue b/vue-options-api-demos/dropdowns/multiselect/appearance/rounded/main.vue
new file mode 100644
index 00000000..a0bb0b54
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/appearance/rounded/main.vue
@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Small roundness: </span>
+        <MultiSelect
+          :style="{ width: '170px' }"
+          :rounded="'small'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Medium roundness: </span>
+        <MultiSelect
+          :style="{ width: '170px' }"
+          :rounded="'medium'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Large roundness: </span>
+        <MultiSelect
+          :style="{ width: '170px' }"
+          :rounded="'large'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Full roundness: </span>
+        <MultiSelect
+          :style="{ width: '170px' }"
+          :rounded="'full'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Custom roundness:</span>
+        <MultiSelect
+          :class="'custom-multiselect'"
+          :rounded="null"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { MultiSelect } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  components: {
+    MultiSelect,
+  },
+};
+</script>
+
+<style>
+.custom-multiselect {
+  width: 200px;
+  border-bottom-right-radius: 15px;
+  border-top-left-radius: 15px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/dropdowns/multiselect/appearance/size/main.js b/vue-options-api-demos/dropdowns/multiselect/appearance/size/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/appearance/size/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselect/appearance/size/main.vue b/vue-options-api-demos/dropdowns/multiselect/appearance/size/main.vue
new file mode 100644
index 00000000..c50a02b0
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/appearance/size/main.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Small: </span>
+        <MultiSelect
+          :style="{ width: '170px' }"
+          :size="'small'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Medium: </span>
+        <MultiSelect
+          :style="{ width: '170px' }"
+          :size="'medium'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Large: </span>
+        <MultiSelect
+          :style="{ width: '170px' }"
+          :size="'large'"
+          :data-items="[
+            'X-Small',
+            'Small',
+            'Medium',
+            'Large',
+            'X-Large',
+            '2X-Large',
+          ]"
+        />
+      </span>
+    </div>
+    <span class="wrapper">
+      <span>Custom size:</span>
+      <MultiSelect
+        :class="'custom-multiselect'"
+        :size="null"
+        :data-items="[
+          'X-Small',
+          'Small',
+          'Medium',
+          'Large',
+          'X-Large',
+          '2X-Large',
+        ]"
+      />
+    </span>
+  </div>
+</template>
+<script>
+import { MultiSelect } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  components: {
+    MultiSelect,
+  },
+};
+</script>
+
+<style>
+.custom-multiselect {
+  height: 40px;
+  width: 200px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/dropdowns/multiselect/basic/main.js b/vue-options-api-demos/dropdowns/multiselect/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselect/basic/main.vue b/vue-options-api-demos/dropdowns/multiselect/basic/main.vue
new file mode 100644
index 00000000..731f4a84
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/basic/main.vue
@@ -0,0 +1,29 @@
+<template>
+    <div class="example-wrapper">
+            <div>
+                <div>Favorite sports:</div>
+                <multiselect
+                    :style="{ width: '300px'}"
+                    :data-items="sports"
+                    v-model="value"
+                ></multiselect>
+            </div>
+        </div>
+</template>
+<script>
+import { MultiSelect } from '@progress/kendo-vue-dropdowns';
+
+export default {
+    components: {
+        'multiselect': MultiSelect
+    },
+    data () {
+        return {
+            sports: [ 'Baseball', 'Basketball', 'Cricket', 'Field Hockey',
+                        'Football', 'Table Tennis', 'Tennis', 'Volleyball' ],
+            value: []
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/binding/main.js b/vue-options-api-demos/dropdowns/multiselect/binding/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/binding/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselect/binding/main.vue b/vue-options-api-demos/dropdowns/multiselect/binding/main.vue
new file mode 100644
index 00000000..68743f9a
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/binding/main.vue
@@ -0,0 +1,26 @@
+<template>
+   <div class="example-wrapper">
+            <div>
+                <div>T-shirt sizes:</div>
+                <multiselect :style="{ width: '230px' }"
+                    :data-items="sizes"
+                >
+                </multiselect>
+            </div>
+        </div>
+</template>
+<script>
+import { MultiSelect } from '@progress/kendo-vue-dropdowns';
+
+export default {
+    components: {
+        'multiselect': MultiSelect
+    },
+    data: function () {
+         return {
+            sizes: [ "X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large" ]
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/complex-value/main.js b/vue-options-api-demos/dropdowns/multiselect/complex-value/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/complex-value/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselect/complex-value/main.vue b/vue-options-api-demos/dropdowns/multiselect/complex-value/main.vue
new file mode 100644
index 00000000..bb259a3d
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/complex-value/main.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="example-wrapper">
+            <div>
+                <div class="example-config">
+                    Selected Values: {{value}}
+                </div>
+                <multiselect :style="{ width: '230px' }"
+                    :data-items="sports"
+                    :value="value"
+                    @change="onChange"
+                    :text-field="'text'"
+                    :data-item-key="'id'"
+                ></multiselect>
+            </div>
+        </div>
+</template>
+<script>
+import { MultiSelect } from '@progress/kendo-vue-dropdowns';
+
+export default {
+    components: {
+        'multiselect': MultiSelect
+    },
+    data () {
+        return {
+            sports: [  
+                { text: 'Basketball', id: 1 },
+                { text: 'Football', id: 2 },
+                { text: 'Tennis', id: 3 },
+                { text: 'Volleyball', id: 4 }
+            ],
+            value: [
+                { text: 'Football', id: 2 },
+                { text: 'Tennis', id: 3 }
+            ]
+        };
+    },
+    methods: {
+        onChange (event)  {
+            this.value = [...event.target.value];
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/controlled/main.js b/vue-options-api-demos/dropdowns/multiselect/controlled/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/controlled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselect/controlled/main.vue b/vue-options-api-demos/dropdowns/multiselect/controlled/main.vue
new file mode 100644
index 00000000..fa39c7e3
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/controlled/main.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="example-wrapper">
+    <div>
+      <div>T-shirt sizes: {{ value }}</div>
+      <MultiSelect
+        :style="{ width: '230px' }"
+        :data-items="sizes"
+        :value="value"
+        @change="onChange"
+      ></MultiSelect>
+    </div>
+  </div>
+</template>
+<script>
+import { MultiSelect } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  components: {
+    MultiSelect,
+  },
+  data() {
+    return {
+      sizes: ['X-Small', 'Small', 'Medium', 'Large', 'X-Large', '2X-Large'],
+      value: [],
+    };
+  },
+  methods: {
+    onChange(event) {
+      this.value = [...event.target.value];
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/events/countries.js b/vue-options-api-demos/dropdowns/multiselect/events/countries.js
new file mode 100644
index 00000000..45b6cb20
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/events/countries.js
@@ -0,0 +1,52 @@
+export default [
+    "Albania",
+    "Andorra",
+    "Armenia",
+    "Austria",
+    "Azerbaijan",
+    "Belarus",
+    "Belgium",
+    "Bosnia & Herzegovina",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czech Republic",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Georgia",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Iceland",
+    "Ireland",
+    "Italy",
+    "Kosovo",
+    "Latvia",
+    "Liechtenstein",
+    "Lithuania",
+    "Luxembourg",
+    "Macedonia",
+    "Malta",
+    "Moldova",
+    "Monaco",
+    "Montenegro",
+    "Netherlands",
+    "Norway",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Russia",
+    "San Marino",
+    "Serbia",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden",
+    "Switzerland",
+    "Turkey",
+    "Ukraine",
+    "United Kingdom",
+    "Vatican City"
+];
diff --git a/vue-options-api-demos/dropdowns/multiselect/events/main.js b/vue-options-api-demos/dropdowns/multiselect/events/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/events/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselect/events/main.vue b/vue-options-api-demos/dropdowns/multiselect/events/main.vue
new file mode 100644
index 00000000..013779aa
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/events/main.vue
@@ -0,0 +1,67 @@
+<template>
+  <div>
+     <multiselect 
+        :style="{ width: '300px'}"
+        @open="onOpen"
+        @close="onClose"
+        @focus="onFocus"
+        @blur="onBlur"
+        @change="onChange"
+        @filterchange="onFilterChange"
+        :filterable="true"
+        :data-items="countries"
+    ></multiselect>
+    <br />
+    <br />
+    <div class="example-config">
+        <h5>Event log</h5>
+        <ul class="event-log" :style="{ textAlign: 'right' }">
+            <li v-for="(event, index) in events">
+                {{ event }}
+            </li>
+        </ul>
+    </div>
+</div>
+</template>
+<script>
+import { MultiSelect } from '@progress/kendo-vue-dropdowns';
+import countries from './countries';
+
+export default {
+    components: {
+        'multiselect': MultiSelect
+    },
+    data () {
+        return {
+            countries: countries,
+            value: [],
+            events: []
+        };
+    },
+    methods: {
+        onOpen() {
+            this.log('open');
+        },
+        onClose() {
+            this.log('close');
+        },
+        onFocus() {
+            this.log('focus');
+        },
+        onBlur() {
+            this.log('blur');
+        },
+        onChange() {
+            this.log('change');
+        },
+        onFilterChange(event) {
+            this.log('filterchange', event.filter.value);
+        },
+        log(event, arg) {
+            const events = this.events;
+            events.unshift(`${event} ${arg || ""}`);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/filtering/basic/countries.js b/vue-options-api-demos/dropdowns/multiselect/filtering/basic/countries.js
new file mode 100644
index 00000000..45b6cb20
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/filtering/basic/countries.js
@@ -0,0 +1,52 @@
+export default [
+    "Albania",
+    "Andorra",
+    "Armenia",
+    "Austria",
+    "Azerbaijan",
+    "Belarus",
+    "Belgium",
+    "Bosnia & Herzegovina",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czech Republic",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Georgia",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Iceland",
+    "Ireland",
+    "Italy",
+    "Kosovo",
+    "Latvia",
+    "Liechtenstein",
+    "Lithuania",
+    "Luxembourg",
+    "Macedonia",
+    "Malta",
+    "Moldova",
+    "Monaco",
+    "Montenegro",
+    "Netherlands",
+    "Norway",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Russia",
+    "San Marino",
+    "Serbia",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden",
+    "Switzerland",
+    "Turkey",
+    "Ukraine",
+    "United Kingdom",
+    "Vatican City"
+];
diff --git a/vue-options-api-demos/dropdowns/multiselect/filtering/basic/main.js b/vue-options-api-demos/dropdowns/multiselect/filtering/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/filtering/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselect/filtering/basic/main.vue b/vue-options-api-demos/dropdowns/multiselect/filtering/basic/main.vue
new file mode 100644
index 00000000..a6b0eedf
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/filtering/basic/main.vue
@@ -0,0 +1,34 @@
+<template>
+   <div class="example-wrapper">
+            <div>
+                <multiselect 
+                    :style="{ width: '300px'}"
+                    @filterchange="onFilterChange"
+                    :filterable="true"
+                    :data-items="countries"
+                ></multiselect>
+            </div>
+        </div>
+</template>
+<script>
+import { MultiSelect } from '@progress/kendo-vue-dropdowns';
+import { filterBy } from '@progress/kendo-data-query';
+import countries from './countries';
+
+export default {
+    components: {
+        'multiselect': MultiSelect
+    },
+    data () {
+        return {
+            countries: countries.slice()
+        };
+    },
+    methods: {
+        onFilterChange(event) {
+            this.countries = filterBy(countries.slice(), event.filter);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/filtering/minfilter/countries.js b/vue-options-api-demos/dropdowns/multiselect/filtering/minfilter/countries.js
new file mode 100644
index 00000000..45b6cb20
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/filtering/minfilter/countries.js
@@ -0,0 +1,52 @@
+export default [
+    "Albania",
+    "Andorra",
+    "Armenia",
+    "Austria",
+    "Azerbaijan",
+    "Belarus",
+    "Belgium",
+    "Bosnia & Herzegovina",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czech Republic",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Georgia",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Iceland",
+    "Ireland",
+    "Italy",
+    "Kosovo",
+    "Latvia",
+    "Liechtenstein",
+    "Lithuania",
+    "Luxembourg",
+    "Macedonia",
+    "Malta",
+    "Moldova",
+    "Monaco",
+    "Montenegro",
+    "Netherlands",
+    "Norway",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Russia",
+    "San Marino",
+    "Serbia",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden",
+    "Switzerland",
+    "Turkey",
+    "Ukraine",
+    "United Kingdom",
+    "Vatican City"
+];
diff --git a/vue-options-api-demos/dropdowns/multiselect/filtering/minfilter/main.js b/vue-options-api-demos/dropdowns/multiselect/filtering/minfilter/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/filtering/minfilter/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselect/filtering/minfilter/main.vue b/vue-options-api-demos/dropdowns/multiselect/filtering/minfilter/main.vue
new file mode 100644
index 00000000..f29a9200
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/filtering/minfilter/main.vue
@@ -0,0 +1,39 @@
+<template>
+    <div class="example-wrapper">
+            <div>
+                <multiselect 
+                    :style="{ width: '300px'}"
+                    @filterchange="onFilterChange"
+                    :filterable="true"
+                    :data-items="countries"
+                ></multiselect>
+            </div>
+        </div>
+</template>
+<script>
+import { MultiSelect } from '@progress/kendo-vue-dropdowns';
+import { filterBy } from '@progress/kendo-data-query';
+import countries from './countries';
+
+export default {
+    components: {
+        'multiselect': MultiSelect
+    },
+    data () {
+        return {
+            countries: countries.slice()
+        };
+    },
+    methods: {
+          onFilterChange(event) {
+            const filter = event.filter;
+            const allData = countries.slice();
+            const newData = filter.value.length > 3 ?
+                filterBy(allData, filter) : allData;
+    
+            this.countries = newData;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/filtering/virtualization-remote-data/main.js b/vue-options-api-demos/dropdowns/multiselect/filtering/virtualization-remote-data/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/filtering/virtualization-remote-data/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselect/filtering/virtualization-remote-data/main.vue b/vue-options-api-demos/dropdowns/multiselect/filtering/virtualization-remote-data/main.vue
new file mode 100644
index 00000000..dc1221c7
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/filtering/virtualization-remote-data/main.vue
@@ -0,0 +1,143 @@
+<template>
+    <div>
+            <p>Customers</p>
+            <multiselect 
+                :data-items="items"
+                :text-field="textField"
+                :data-item-key="dataItemKey"
+                :placeholder="placeholder"
+                :filterable="true"
+                @filterchange="onFilterChange"
+                :virtual="virtual"
+                @pagechange="pageChange"
+                :style="{ width: '300px' }"
+            ></multiselect>
+        </div>
+</template>
+<script>
+import { MultiSelect } from '@progress/kendo-vue-dropdowns';
+const textField = 'ContactName';
+const dataItemKey = 'CustomerID';
+const placeholder = 'Select customer';
+const pageSize = 10;
+const emptyItem = { [textField]: 'loading ...' };
+
+const loadingData = [];
+while (loadingData.length < pageSize) {
+    loadingData.push({...emptyItem});
+}
+
+let baseUrl = `https://odatasampleservices.azurewebsites.net/V4/Northwind/Northwind.svc/`;
+let init = { method: 'GET', accept: 'application/json', headers: [] };
+let dataCaching = [];
+let pendingRequest;
+let requestStarted = false;
+
+
+export default {
+    components: {
+        'multiselect': MultiSelect
+    },
+    data () {
+        return {
+            items: [],
+            skip: 0,
+            total: 0,
+            filter: '',
+            textField: textField,
+            dataItemKey: dataItemKey,
+            placeholder: placeholder,
+            pageSize: pageSize
+        };
+    },
+    mounted() {
+        this.requestData(0, '');
+    },
+    unmounted() {
+        this.resetCach();
+    },
+    computed: {
+        virtual () {
+            return {
+                pageSize: this.pageSize,
+                skip: this.skip,
+                total: this.total
+            };
+        }
+    },
+    methods: {
+        requestData(skip, filter) {
+            if (requestStarted) {
+                clearTimeout(pendingRequest);
+                pendingRequest = setTimeout(() => { this.requestData(skip, filter); }, 50);
+                return;
+            }
+    
+            const url = baseUrl +
+                `Customers?$filter=contains(ContactName,'${filter}')&$skip=${skip}&$top=${pageSize}&$count=true`;
+    
+            requestStarted = true;
+            fetch(url, init)
+                .then(response => response.json())
+                .then(json => {
+                    const total = json['@odata.count'];
+                    const items = [];
+                    json.value.forEach((element, index) => {
+                        const { CustomerID, ContactName } = element;
+                        const item = { [dataItemKey]: CustomerID, [textField]: ContactName };
+                        items.push(item);
+                        dataCaching[index + skip] = item;
+                    });
+    
+                    if (skip === this.skip) {
+                        this.items = items;
+                        this.total = total;
+                    }
+                    requestStarted = false;
+                });
+        },
+        onFilterChange(event) {
+            const filter = event.filter.value;
+    
+            this.resetCach();
+            this.requestData(0, filter);
+    
+            this.items = loadingData;
+            this.skip = 0;
+            this.filter = filter;
+        },
+        pageChange (event) {
+            const skip = event.page.skip;
+            const filter = this.filter;
+    
+            let makeRequest = false;
+            for (let i = 0; i < pageSize; i++) {
+                if (!dataCaching[skip + i]) {
+                    makeRequest = true;
+                    break;
+                }
+            }
+    
+            if (makeRequest) {
+                this.requestData(skip, filter || '');
+            }
+    
+            const data = this.getCachedData(skip);
+    
+            this.items = data;
+            this.skip = skip;
+        },
+        getCachedData(skip) {
+            const data = [];
+            for (let i = 0; i < pageSize; i++) {
+                data.push(dataCaching[i + skip] || {...emptyItem});
+            }
+            return data;
+        },
+        resetCach() {
+            dataCaching.length = 0;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/filtering/with-delay/countries.js b/vue-options-api-demos/dropdowns/multiselect/filtering/with-delay/countries.js
new file mode 100644
index 00000000..45b6cb20
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/filtering/with-delay/countries.js
@@ -0,0 +1,52 @@
+export default [
+    "Albania",
+    "Andorra",
+    "Armenia",
+    "Austria",
+    "Azerbaijan",
+    "Belarus",
+    "Belgium",
+    "Bosnia & Herzegovina",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czech Republic",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Georgia",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Iceland",
+    "Ireland",
+    "Italy",
+    "Kosovo",
+    "Latvia",
+    "Liechtenstein",
+    "Lithuania",
+    "Luxembourg",
+    "Macedonia",
+    "Malta",
+    "Moldova",
+    "Monaco",
+    "Montenegro",
+    "Netherlands",
+    "Norway",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Russia",
+    "San Marino",
+    "Serbia",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden",
+    "Switzerland",
+    "Turkey",
+    "Ukraine",
+    "United Kingdom",
+    "Vatican City"
+];
diff --git a/vue-options-api-demos/dropdowns/multiselect/filtering/with-delay/main.js b/vue-options-api-demos/dropdowns/multiselect/filtering/with-delay/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/filtering/with-delay/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselect/filtering/with-delay/main.vue b/vue-options-api-demos/dropdowns/multiselect/filtering/with-delay/main.vue
new file mode 100644
index 00000000..2a6ad2ac
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/filtering/with-delay/main.vue
@@ -0,0 +1,44 @@
+<template>
+   <div class="example-wrapper">
+            <div>
+                <multiselect 
+                    :style="{ width: '300px'}"
+                    @filterchange="onFilterChange"
+                    :filterable="true"
+                    :data-items="countries"
+                    :loading="loading"
+                ></multiselect>
+            </div>
+        </div>
+</template>
+<script>
+import { MultiSelect } from '@progress/kendo-vue-dropdowns';
+import countries from './countries';
+import { filterBy } from '@progress/kendo-data-query';
+const delay = 500;
+
+
+export default {
+    components: {
+        'multiselect': MultiSelect
+    },
+    data () {
+        return {
+            countries: countries.slice(),
+            loading: false
+        };
+    },
+    methods: {
+        onFilterChange(event) {
+            clearTimeout(this.timeout);
+            this.timeout = setTimeout(() => {
+                this.countries = filterBy(countries.slice(), event.filter);
+                this.loading = false;
+            }, delay);
+    
+            this.loading = true;  
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/forms/basic/main.js b/vue-options-api-demos/dropdowns/multiselect/forms/basic/main.js
new file mode 100644
index 00000000..3a6df88d
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/forms/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from "vue";
+import App from "./main.vue";
+
+createApp(App).mount("#app");
diff --git a/vue-options-api-demos/dropdowns/multiselect/forms/basic/main.vue b/vue-options-api-demos/dropdowns/multiselect/forms/basic/main.vue
new file mode 100644
index 00000000..d610f742
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/forms/basic/main.vue
@@ -0,0 +1,67 @@
+<template>
+    <div class="row example-wrapper">
+            <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                <div class="card">
+                    <div class="card-block">
+                        <form class="k-form" @submit="handleSubmit">
+                            <fieldset>
+                                <legend>Add products to your basket:</legend>
+                                <div class="mb-3">
+                                    <multiselect 
+                                        :style="{ width: '100%' }"
+                                        :label="'Foods'"
+                                        name="foods"
+                                        :data-items="foods"
+                                        :required="true"
+                                    ></multiselect>
+                                </div>
+                                <div>
+                                    <multiselect
+                                        :style="{ width: '100%' }"
+                                        :label="'Drinks'"
+                                        name="drinks"
+                                        :data-items="drinks"
+                                        :required="true"
+                                    ></multiselect>
+                                </div>
+                            </fieldset>
+                            <kbutton type="submit" :theme-color="'primary'">Add to basket</kbutton>
+                        </form>
+                    </div>
+                </div>
+            </div>
+                <div v-if="success"
+                    :class="'alert alert-success'"
+                    :style="{ position: 'absolute' }"
+                >
+                    Form submitted!
+                </div>
+        </div>
+</template>
+<script>
+import { MultiSelect } from '@progress/kendo-vue-dropdowns';
+import { foods, drinks } from './shop';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'multiselect': MultiSelect,
+      'kbutton': Button
+    },
+    data () {
+        return {
+            success: false,
+            foods: foods,
+            drinks: drinks
+        };
+    },
+    methods: {
+        handleSubmit (event) {
+            event.preventDefault();
+            this.success = true ;
+            setTimeout(() => { this.success = false; }, 3000);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/forms/basic/shop.js b/vue-options-api-demos/dropdowns/multiselect/forms/basic/shop.js
new file mode 100644
index 00000000..bc7a6c93
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/forms/basic/shop.js
@@ -0,0 +1,31 @@
+export const foods = [
+    'Garlic bread',
+    'Chicken nuggets',
+    'Potatoes',
+    'Rice',
+    'Tomato sauce',
+    'Broccoli',
+    'Cheddar',
+    'Cereal',
+    'Beef',
+    'Lobster',
+    'Salmon',
+    'Mushrooms',
+    'Onions',
+    'Apples',
+    'Oranges',
+    'Burritos'
+];
+
+export const drinks = [
+    'Milk',
+    'Water',
+    'Apple juice',
+    'Orange juice',
+    'Beer',
+    'Soda',
+    'Champagne',
+    'Red wine',
+    'Rum',
+    'Sake'
+];
diff --git a/vue-options-api-demos/dropdowns/multiselect/forms/custom-message/main.js b/vue-options-api-demos/dropdowns/multiselect/forms/custom-message/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/forms/custom-message/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselect/forms/custom-message/main.vue b/vue-options-api-demos/dropdowns/multiselect/forms/custom-message/main.vue
new file mode 100644
index 00000000..04843ced
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/forms/custom-message/main.vue
@@ -0,0 +1,71 @@
+<template>
+    <div class="row example-wrapper">
+            <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                <div class="card">
+                    <div class="card-block">
+                        <form class="k-form" @submit="handleSubmit">
+                            <fieldset>
+                                <legend>Add products to your basket:</legend>
+                                <div class="mb-3">
+                                    <multiselect 
+                                        :style="{ width: '100%' }"
+                                        :label="'Foods'"
+                                        name="foods"
+                                        :data-items="foods"
+                                        :required="true"
+                                        :validation-message="foodsValidationMessage"
+                                    ></multiselect>
+                                </div>
+                                <div>
+                                    <multiselect 
+                                        :style="{ width: '100%' }"
+                                        :label="'Drinks'"
+                                        name="drinks"
+                                        :data-items="drinks"
+                                        :required="true"
+                                        :validation-message="drinksValidationMessage"
+                                    ></multiselect>
+                                </div>
+                            </fieldset>
+                            <kbutton type="submit" :theme-color="'primary'">Add to basket</kbutton>
+                        </form>
+                    </div>
+                </div>
+            </div>
+                <div v-if="success"
+                    :class="'alert alert-success'"
+                    :style="{ position: 'absolute' }"
+                >
+                    Form submitted!
+                </div>
+        </div>
+</template>
+<script>
+import { MultiSelect } from '@progress/kendo-vue-dropdowns';
+import { foods, drinks } from './shop';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'multiselect': MultiSelect,
+      'kbutton': Button
+    },
+    data () {
+        return {
+            success: false,
+            foods: foods,
+            drinks: drinks,
+            foodsValidationMessage: 'Please add foods to your basket!',
+            drinksValidationMessage: 'Please add drinks to your basket!'
+        };
+    },
+    methods: {
+        handleSubmit (event) {
+            event.preventDefault();
+            this.success = true ;
+            setTimeout(() => { this.success = false; }, 3000);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/forms/custom-message/shop.js b/vue-options-api-demos/dropdowns/multiselect/forms/custom-message/shop.js
new file mode 100644
index 00000000..bc7a6c93
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/forms/custom-message/shop.js
@@ -0,0 +1,31 @@
+export const foods = [
+    'Garlic bread',
+    'Chicken nuggets',
+    'Potatoes',
+    'Rice',
+    'Tomato sauce',
+    'Broccoli',
+    'Cheddar',
+    'Cereal',
+    'Beef',
+    'Lobster',
+    'Salmon',
+    'Mushrooms',
+    'Onions',
+    'Apples',
+    'Oranges',
+    'Burritos'
+];
+
+export const drinks = [
+    'Milk',
+    'Water',
+    'Apple juice',
+    'Orange juice',
+    'Beer',
+    'Soda',
+    'Champagne',
+    'Red wine',
+    'Rum',
+    'Sake'
+];
diff --git a/vue-options-api-demos/dropdowns/multiselect/forms/disable-styles/main.js b/vue-options-api-demos/dropdowns/multiselect/forms/disable-styles/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/forms/disable-styles/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselect/forms/disable-styles/main.vue b/vue-options-api-demos/dropdowns/multiselect/forms/disable-styles/main.vue
new file mode 100644
index 00000000..78691ade
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/forms/disable-styles/main.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="row example-wrapper">
+    <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+      <div class="card">
+        <div class="card-block">
+          <form class="k-form" @submit="handleSubmit">
+            <fieldset>
+              <legend>Add products to your basket:</legend>
+              <div class="mb-3">
+                <multiselect
+                  :style="{ width: '100%' }"
+                  :label="'Foods'"
+                  name="foods"
+                  :value="foods"
+                  @change="handleChange"
+                  :data-items="foodsItems"
+                  :required="true"
+                ></multiselect>
+              </div>
+              <div>
+                <multiselect
+                  :validity-styles="false"
+                  :style="{ width: '100%' }"
+                  :label="'Drinks'"
+                  name="drinks"
+                  :data-items="drinksItems"
+                  :value="drinks"
+                  @change="handleChange"
+                  :valid="foods.length > 0 && drinks.length > 1"
+                  :validation-message="
+                    foods.length === 0
+                      ? 'Pick something to eat first!'
+                      : 'Please pick at least 2 drinks!'
+                  "
+                ></multiselect>
+              </div>
+              <label class="k-form-field">
+                <span>Additional Comments</span>
+                <KTextArea
+                  name="additionalComments"
+                  :style="{ width: '100%' }"
+                  :value="additionalComments"
+                  @change="handleChange"
+                ></KTextArea>
+              </label>
+            </fieldset>
+            <kbutton type="submit" :theme-color="'primary'"
+              >Add to basket</kbutton
+            >
+          </form>
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="success"
+      :class="'alert alert-success'"
+      :style="{ position: 'absolute' }"
+    >
+      Form submitted!
+    </div>
+  </div>
+</template>
+<script>
+import { MultiSelect } from "@progress/kendo-vue-dropdowns";
+import { foods, drinks } from "./shop";
+import { Button } from "@progress/kendo-vue-buttons";
+import { TextArea } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    multiselect: MultiSelect,
+    kbutton: Button,
+    KTextArea: TextArea,
+  },
+  data() {
+    return {
+      success: false,
+      foodsItems: foods,
+      drinksItems: drinks,
+      drinks: [],
+      foods: [],
+      additionalComments: "",
+    };
+  },
+  methods: {
+    handleSubmit(event) {
+      event.preventDefault();
+      this.success = true;
+      setTimeout(() => {
+        this.success = false;
+      }, 3000);
+    },
+    handleChange(event) {
+      this[event.target.name] = event.target.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/forms/disable-styles/shop.js b/vue-options-api-demos/dropdowns/multiselect/forms/disable-styles/shop.js
new file mode 100644
index 00000000..bc7a6c93
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/forms/disable-styles/shop.js
@@ -0,0 +1,31 @@
+export const foods = [
+    'Garlic bread',
+    'Chicken nuggets',
+    'Potatoes',
+    'Rice',
+    'Tomato sauce',
+    'Broccoli',
+    'Cheddar',
+    'Cereal',
+    'Beef',
+    'Lobster',
+    'Salmon',
+    'Mushrooms',
+    'Onions',
+    'Apples',
+    'Oranges',
+    'Burritos'
+];
+
+export const drinks = [
+    'Milk',
+    'Water',
+    'Apple juice',
+    'Orange juice',
+    'Beer',
+    'Soda',
+    'Champagne',
+    'Red wine',
+    'Rum',
+    'Sake'
+];
diff --git a/vue-options-api-demos/dropdowns/multiselect/forms/override/main.js b/vue-options-api-demos/dropdowns/multiselect/forms/override/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/forms/override/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselect/forms/override/main.vue b/vue-options-api-demos/dropdowns/multiselect/forms/override/main.vue
new file mode 100644
index 00000000..a2a2eb0e
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/forms/override/main.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="row example-wrapper">
+    <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+      <div class="card">
+        <div class="card-block">
+          <form class="k-form" @submit="handleSubmit">
+            <fieldset>
+              <legend>Add products to your basket:</legend>
+              <div class="mb-3">
+                <multiselect
+                  :label="'Foods'"
+                  name="foods"
+                  :value="foods"
+                  @change="handleChange"
+                  :data-items="foodsItems"
+                ></multiselect>
+              </div>
+              <div>
+                <multiselect
+                  :label="'Drinks'"
+                  name="drinks"
+                  :data-items="drinksItems"
+                  :value="drinks"
+                  @change="handleChange"
+                  :valid="foods.length > 0 && drinks.length > 1"
+                  :validation-message="
+                    foods.length === 0
+                      ? 'Pick something to eat first!'
+                      : 'Please pick at least 2 drinks!'
+                  "
+                ></multiselect>
+              </div>
+              <label class="k-form-field">
+                <span>Additional Comments</span>
+                <KTextArea
+                  name="additionalComments"
+                  :value="additionalComments"
+                  @change="handleChange"
+                ></KTextArea>
+              </label>
+            </fieldset>
+            <kbutton type="submit" :theme-color="'primary'"
+              >Add to basket</kbutton
+            >
+          </form>
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="success"
+      :class="'alert alert-success'"
+      :style="{ position: 'absolute' }"
+    >
+      Form submitted!
+    </div>
+  </div>
+</template>
+<script>
+import { MultiSelect } from "@progress/kendo-vue-dropdowns";
+import { foods, drinks } from "./shop";
+import { Button } from "@progress/kendo-vue-buttons";
+import { TextArea } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    multiselect: MultiSelect,
+    kbutton: Button,
+    KTextArea: TextArea,
+  },
+  data() {
+    return {
+      success: false,
+      foodsItems: foods,
+      drinksItems: drinks,
+      drinks: [],
+      foods: [],
+      additionalComments: "",
+    };
+  },
+  methods: {
+    handleSubmit(event) {
+      event.preventDefault();
+      this.success = true;
+      setTimeout(() => {
+        this.success = false;
+      }, 3000);
+    },
+    handleChange(event) {
+      this[event.target.name] = event.target.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/forms/override/shop.js b/vue-options-api-demos/dropdowns/multiselect/forms/override/shop.js
new file mode 100644
index 00000000..bc7a6c93
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/forms/override/shop.js
@@ -0,0 +1,31 @@
+export const foods = [
+    'Garlic bread',
+    'Chicken nuggets',
+    'Potatoes',
+    'Rice',
+    'Tomato sauce',
+    'Broccoli',
+    'Cheddar',
+    'Cereal',
+    'Beef',
+    'Lobster',
+    'Salmon',
+    'Mushrooms',
+    'Onions',
+    'Apples',
+    'Oranges',
+    'Burritos'
+];
+
+export const drinks = [
+    'Milk',
+    'Water',
+    'Apple juice',
+    'Orange juice',
+    'Beer',
+    'Soda',
+    'Champagne',
+    'Red wine',
+    'Rum',
+    'Sake'
+];
diff --git a/vue-options-api-demos/dropdowns/multiselect/grouping/basic/grouping-data.js b/vue-options-api-demos/dropdowns/multiselect/grouping/basic/grouping-data.js
new file mode 100644
index 00000000..9a2711db
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/grouping/basic/grouping-data.js
@@ -0,0 +1,181 @@
+export const employees = [ {
+    "id": 11,
+    "name": "Hyacinth Hood",
+    "reportsTo": 32,
+    "phone": "(889) 345-2438",
+    "extension": 8564,
+    "hireDate": new Date("2014-02-03T20:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 1
+}, {
+    "id": 40,
+    "name": "Karleigh Garza",
+    "reportsTo": 52,
+    "phone": "(370) 983-8796",
+    "extension": 4044,
+    "hireDate": new Date("2014-03-10T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 1
+}, {
+    "id": 46,
+    "name": "Darrel Solis",
+    "reportsTo": 43,
+    "phone": "(327) 977-0216",
+    "extension": 7779,
+    "hireDate": new Date("2015-04-25T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 4
+}, {
+    "id": 76,
+    "name": "Cheyenne Olson",
+    "reportsTo": 63,
+    "phone": "(241) 645-0257",
+    "extension": 9181,
+    "hireDate": new Date("2015-05-19T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 5
+}, {
+    "id": 78,
+    "name": "Rinah Simon",
+    "reportsTo": 11,
+    "phone": "(285) 912-5271",
+    "extension": 7795,
+    "hireDate": new Date("2012-10-11T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 4
+}, {
+    "id": 79,
+    "name": "Duncan Mathews",
+    "reportsTo": 64,
+    "phone": "(790) 971-9709",
+    "extension": 4573,
+    "hireDate": new Date("2011-08-21T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "Developer",
+    "timeInPosition": 3
+}, {
+    "id": 82,
+    "name": "Yael Walters",
+    "reportsTo": 69,
+    "phone": "(311) 489-8191",
+    "extension": 6520,
+    "hireDate": new Date("2013-07-04T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 6
+}, {
+    "id": 75,
+    "name": "Eric Russell",
+    "reportsTo": 63,
+    "phone": "(516) 575-8505",
+    "extension": 2224,
+    "hireDate": new Date("2012-10-28T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 3
+}, {
+    "id": 55,
+    "name": "Summer Mosley",
+    "reportsTo": 46,
+    "phone": "(784) 962-2301",
+    "extension": 5492,
+    "hireDate": new Date("2010-03-02T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "QA",
+    "timeInPosition": 5
+}, {
+    "id": 59,
+    "name": "Keiko Espinoza",
+    "reportsTo": 46,
+    "phone": "(226) 600-5305",
+    "extension": 9363,
+    "hireDate": new Date("2011-09-18T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "QA",
+    "timeInPosition": 4
+}, {
+    "id": 72,
+    "name": "Stacey Lynn",
+    "reportsTo": 40,
+    "phone": "(140) 772-7509",
+    "extension": 8396,
+    "hireDate": new Date("2014-07-31T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "QA",
+    "timeInPosition": 1
+}, {
+    "id": 38,
+    "name": "Elton Tucker",
+    "reportsTo": 69,
+    "phone": "(988) 930-9331",
+    "extension": 9216,
+    "hireDate": new Date("2015-06-04T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 1
+}, {
+    "id": 71,
+    "name": "Flavia Short",
+    "reportsTo": 63,
+    "phone": "(370) 133-9238",
+    "extension": 6390,
+    "hireDate": new Date("2013-02-21T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 0
+}, {
+    "id": 61,
+    "name": "Candace Pickett",
+    "reportsTo": 46,
+    "phone": "(120) 117-7475",
+    "extension": 5178,
+    "hireDate": new Date("2010-05-06T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 0
+}, {
+    "id": 65,
+    "name": "Thomas Terry",
+    "reportsTo": 63,
+    "phone": "(764) 831-4248",
+    "extension": 3574,
+    "hireDate": new Date("2015-06-15T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "Support",
+    "timeInPosition": 2
+}, {
+    "id": 62,
+    "name": "Palmer Gregory",
+    "reportsTo": 64,
+    "phone": "(360) 430-2505",
+    "extension": 4337,
+    "hireDate": new Date("2014-08-30T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 4
+}, {
+    "id": 12,
+    "name": "Jamalia Wallace",
+    "reportsTo": 64,
+    "phone": "(611) 391-8016",
+    "extension": 1952,
+    "hireDate": new Date("2011-09-08T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 3
+}, {
+    "id": 66,
+    "name": "Gloria Freeman",
+    "reportsTo": 53,
+    "phone": "(344) 950-9168",
+    "extension": 4738,
+    "hireDate": new Date("2013-05-06T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 0
+} ];
diff --git a/vue-options-api-demos/dropdowns/multiselect/grouping/basic/main.js b/vue-options-api-demos/dropdowns/multiselect/grouping/basic/main.js
new file mode 100644
index 00000000..3a6df88d
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/grouping/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from "vue";
+import App from "./main.vue";
+
+createApp(App).mount("#app");
diff --git a/vue-options-api-demos/dropdowns/multiselect/grouping/basic/main.vue b/vue-options-api-demos/dropdowns/multiselect/grouping/basic/main.vue
new file mode 100644
index 00000000..99994ef6
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/grouping/basic/main.vue
@@ -0,0 +1,30 @@
+<template>
+  <MultiSelect
+    :data-items="groupedData"
+    :text-field="'name'"
+    :data-item-key="'id'"
+    :group-field="'position'"
+    :style="{
+      width: '300px',
+    }"
+  />
+</template>
+<script>
+import { MultiSelect } from "@progress/kendo-vue-dropdowns";
+import { groupBy } from "@progress/kendo-data-query";
+import { employees } from "./grouping-data.js";
+
+export default {
+  components: {
+    MultiSelect,
+  },
+  data() {
+    return {
+      groupedData: groupBy(employees, [{ field: "position" }]).reduce(
+        (res, group) => [...res, ...group.items],
+        []
+      ),
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/grouping/custom/GroupHeaderItemRender.vue b/vue-options-api-demos/dropdowns/multiselect/grouping/custom/GroupHeaderItemRender.vue
new file mode 100644
index 00000000..d2c8a237
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/grouping/custom/GroupHeaderItemRender.vue
@@ -0,0 +1,21 @@
+<template>
+<li :id="id" role="group" class="k-list-group-item" style="position: unset;">
+  <b
+      :style="{
+        color: '#00F',
+      }"
+      role="option"
+    >
+     {{group}}
+    </b>
+  </li>
+</template>
+<script>
+export default {
+  props: {
+    group: String,
+    id: String,
+    index: Number,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/grouping/custom/ItemRender.vue b/vue-options-api-demos/dropdowns/multiselect/grouping/custom/ItemRender.vue
new file mode 100644
index 00000000..0967fc13
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/grouping/custom/ItemRender.vue
@@ -0,0 +1,42 @@
+<template>
+  <li class="k-item" @click="handleClick">
+    <i
+      :style="{
+        color: 'green',
+      }"
+      role="option"
+      :aria-selected="focused"
+      :class="itemClass"
+    >
+      {{ dataItem[textField] }} {{ index }}
+    </i>
+  </li>
+</template>
+<script>
+export default {
+  emits: {
+    click: null,
+  },
+  props: {
+    id: String,
+    index: Number,
+    dataItem: [Object, String, Number],
+    textField: String,
+    focused: Boolean,
+    selected: Boolean,
+  },
+  computed: {
+    itemClass() {
+      return {
+        "k-item": true,
+        "k-state-focused": this.$props.focused,
+      };
+    },
+  },
+  methods: {
+    handleClick: function (e) {
+      this.$emit("click", e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/grouping/custom/StickyHeaderRender.vue b/vue-options-api-demos/dropdowns/multiselect/grouping/custom/StickyHeaderRender.vue
new file mode 100644
index 00000000..60e0a1aa
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/grouping/custom/StickyHeaderRender.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="k-list-group-sticky-header">
+    <span
+      :style="{
+        color: 'orange',
+        fontWeight: 900,
+        width: '100%',
+        fontSize: '1.5em',
+        textAlign: 'center',
+      }"
+    >
+    {{ group }}
+    </span>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    group: String,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/grouping/custom/grouping-data.js b/vue-options-api-demos/dropdowns/multiselect/grouping/custom/grouping-data.js
new file mode 100644
index 00000000..9a2711db
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/grouping/custom/grouping-data.js
@@ -0,0 +1,181 @@
+export const employees = [ {
+    "id": 11,
+    "name": "Hyacinth Hood",
+    "reportsTo": 32,
+    "phone": "(889) 345-2438",
+    "extension": 8564,
+    "hireDate": new Date("2014-02-03T20:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 1
+}, {
+    "id": 40,
+    "name": "Karleigh Garza",
+    "reportsTo": 52,
+    "phone": "(370) 983-8796",
+    "extension": 4044,
+    "hireDate": new Date("2014-03-10T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 1
+}, {
+    "id": 46,
+    "name": "Darrel Solis",
+    "reportsTo": 43,
+    "phone": "(327) 977-0216",
+    "extension": 7779,
+    "hireDate": new Date("2015-04-25T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Team Lead",
+    "timeInPosition": 4
+}, {
+    "id": 76,
+    "name": "Cheyenne Olson",
+    "reportsTo": 63,
+    "phone": "(241) 645-0257",
+    "extension": 9181,
+    "hireDate": new Date("2015-05-19T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 5
+}, {
+    "id": 78,
+    "name": "Rinah Simon",
+    "reportsTo": 11,
+    "phone": "(285) 912-5271",
+    "extension": 7795,
+    "hireDate": new Date("2012-10-11T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 4
+}, {
+    "id": 79,
+    "name": "Duncan Mathews",
+    "reportsTo": 64,
+    "phone": "(790) 971-9709",
+    "extension": 4573,
+    "hireDate": new Date("2011-08-21T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "Developer",
+    "timeInPosition": 3
+}, {
+    "id": 82,
+    "name": "Yael Walters",
+    "reportsTo": 69,
+    "phone": "(311) 489-8191",
+    "extension": 6520,
+    "hireDate": new Date("2013-07-04T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 6
+}, {
+    "id": 75,
+    "name": "Eric Russell",
+    "reportsTo": 63,
+    "phone": "(516) 575-8505",
+    "extension": 2224,
+    "hireDate": new Date("2012-10-28T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Developer",
+    "timeInPosition": 3
+}, {
+    "id": 55,
+    "name": "Summer Mosley",
+    "reportsTo": 46,
+    "phone": "(784) 962-2301",
+    "extension": 5492,
+    "hireDate": new Date("2010-03-02T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "QA",
+    "timeInPosition": 5
+}, {
+    "id": 59,
+    "name": "Keiko Espinoza",
+    "reportsTo": 46,
+    "phone": "(226) 600-5305",
+    "extension": 9363,
+    "hireDate": new Date("2011-09-18T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "QA",
+    "timeInPosition": 4
+}, {
+    "id": 72,
+    "name": "Stacey Lynn",
+    "reportsTo": 40,
+    "phone": "(140) 772-7509",
+    "extension": 8396,
+    "hireDate": new Date("2014-07-31T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "QA",
+    "timeInPosition": 1
+}, {
+    "id": 38,
+    "name": "Elton Tucker",
+    "reportsTo": 69,
+    "phone": "(988) 930-9331",
+    "extension": 9216,
+    "hireDate": new Date("2015-06-04T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 1
+}, {
+    "id": 71,
+    "name": "Flavia Short",
+    "reportsTo": 63,
+    "phone": "(370) 133-9238",
+    "extension": 6390,
+    "hireDate": new Date("2013-02-21T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 0
+}, {
+    "id": 61,
+    "name": "Candace Pickett",
+    "reportsTo": 46,
+    "phone": "(120) 117-7475",
+    "extension": 5178,
+    "hireDate": new Date("2010-05-06T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Support",
+    "timeInPosition": 0
+}, {
+    "id": 65,
+    "name": "Thomas Terry",
+    "reportsTo": 63,
+    "phone": "(764) 831-4248",
+    "extension": 3574,
+    "hireDate": new Date("2015-06-15T00:00:00.000Z"),
+    "fullTime": false,
+    "position": "Support",
+    "timeInPosition": 2
+}, {
+    "id": 62,
+    "name": "Palmer Gregory",
+    "reportsTo": 64,
+    "phone": "(360) 430-2505",
+    "extension": 4337,
+    "hireDate": new Date("2014-08-30T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 4
+}, {
+    "id": 12,
+    "name": "Jamalia Wallace",
+    "reportsTo": 64,
+    "phone": "(611) 391-8016",
+    "extension": 1952,
+    "hireDate": new Date("2011-09-08T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 3
+}, {
+    "id": 66,
+    "name": "Gloria Freeman",
+    "reportsTo": 53,
+    "phone": "(344) 950-9168",
+    "extension": 4738,
+    "hireDate": new Date("2013-05-06T00:00:00.000Z"),
+    "fullTime": true,
+    "position": "Designer",
+    "timeInPosition": 0
+} ];
diff --git a/vue-options-api-demos/dropdowns/multiselect/grouping/custom/main.js b/vue-options-api-demos/dropdowns/multiselect/grouping/custom/main.js
new file mode 100644
index 00000000..3a6df88d
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/grouping/custom/main.js
@@ -0,0 +1,4 @@
+import { createApp } from "vue";
+import App from "./main.vue";
+
+createApp(App).mount("#app");
diff --git a/vue-options-api-demos/dropdowns/multiselect/grouping/custom/main.vue b/vue-options-api-demos/dropdowns/multiselect/grouping/custom/main.vue
new file mode 100644
index 00000000..4c9231f4
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/grouping/custom/main.vue
@@ -0,0 +1,62 @@
+<template>
+  <MultiSelect
+    :data-items="groupedData"
+    :text-field="textField"
+    :group-field="'position'"
+    :style="{
+      width: '300px',
+    }"
+    :itemRender="'myCustomItem'"
+    :groupHeaderItemRender="'myGroupHeaderItemRender'"
+    :groupStickyHeaderItemRender="'myStickyHeaderRender'"
+  >
+    <template v-slot:myCustomItem="{ props }">
+      <ItemRender
+        :style="props.style"
+        :class="props.itemClass"
+        :data-item="props.dataItem"
+        :focused="props.focused"
+        :index="props.index"
+        :text-field="textField"
+        @click="(ev) => props.onClick(ev)"
+      />
+    </template>
+    <template v-slot:myGroupHeaderItemRender="{ props }">
+      <GroupHeaderItemRender
+        :id="props.id"
+        :group="props.group"
+        :index="props.index"
+      />
+    </template>
+    <template v-slot:myStickyHeaderRender="{ props }">
+      <StickyHeaderRender :group="props.group" />
+    </template>
+  </MultiSelect>
+</template>
+<script>
+import { MultiSelect } from "@progress/kendo-vue-dropdowns";
+import ItemRender from "./ItemRender.vue";
+import GroupHeaderItemRender from "./GroupHeaderItemRender.vue";
+import StickyHeaderRender from "./StickyHeaderRender.vue";
+import { groupBy } from "@progress/kendo-data-query";
+import { employees } from "./grouping-data.js";
+
+export default {
+  components: {
+    MultiSelect,
+    ItemRender,
+    GroupHeaderItemRender,
+    StickyHeaderRender,
+    MultiSelect
+},
+  data() {
+    return {
+      textField: "name",
+      groupedData: groupBy(employees, [{ field: "position" }]).reduce(
+        (res, group) => [...res, ...group.items],
+        []
+      ),
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/grouping/filtering/grouping-data.js b/vue-options-api-demos/dropdowns/multiselect/grouping/filtering/grouping-data.js
new file mode 100644
index 00000000..94e1ef7b
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/grouping/filtering/grouping-data.js
@@ -0,0 +1,200 @@
+export const employees = [
+    {
+        id: 11,
+        name: "Hyacinth Hood",
+        reportsTo: 32,
+        phone: "(889) 345-2438",
+        extension: 8564,
+        hireDate: new Date("2014-02-03T20:00:00.000Z"),
+        fullTime: true,
+        role: "Team Lead",
+        timeInPosition: 1,
+    },
+    {
+        id: 40,
+        name: "Karleigh Garza",
+        reportsTo: 52,
+        phone: "(370) 983-8796",
+        extension: 4044,
+        hireDate: new Date("2014-03-10T00:00:00.000Z"),
+        fullTime: true,
+        role: "Team Lead",
+        timeInPosition: 1,
+    },
+    {
+        id: 46,
+        name: "Darrel Solis",
+        reportsTo: 43,
+        phone: "(327) 977-0216",
+        extension: 7779,
+        hireDate: new Date("2015-04-25T00:00:00.000Z"),
+        fullTime: true,
+        role: "Team Lead",
+        timeInPosition: 4,
+    },
+    {
+        id: 76,
+        name: "Cheyenne Olson",
+        reportsTo: 63,
+        phone: "(241) 645-0257",
+        extension: 9181,
+        hireDate: new Date("2015-05-19T00:00:00.000Z"),
+        fullTime: true,
+        role: "Developer",
+        timeInPosition: 5,
+    },
+    {
+        id: 78,
+        name: "Rinah Simon",
+        reportsTo: 11,
+        phone: "(285) 912-5271",
+        extension: 7795,
+        hireDate: new Date("2012-10-11T00:00:00.000Z"),
+        fullTime: true,
+        role: "Developer",
+        timeInPosition: 4,
+    },
+    {
+        id: 79,
+        name: "Duncan Mathews",
+        reportsTo: 64,
+        phone: "(790) 971-9709",
+        extension: 4573,
+        hireDate: new Date("2011-08-21T00:00:00.000Z"),
+        fullTime: false,
+        role: "Developer",
+        timeInPosition: 3,
+    },
+    {
+        id: 82,
+        name: "Yael Walters",
+        reportsTo: 69,
+        phone: "(311) 489-8191",
+        extension: 6520,
+        hireDate: new Date("2013-07-04T00:00:00.000Z"),
+        fullTime: true,
+        role: "Developer",
+        timeInPosition: 6,
+    },
+    {
+        id: 75,
+        name: "Eric Russell",
+        reportsTo: 63,
+        phone: "(516) 575-8505",
+        extension: 2224,
+        hireDate: new Date("2012-10-28T00:00:00.000Z"),
+        fullTime: true,
+        role: "Developer",
+        timeInPosition: 3,
+    },
+    {
+        id: 55,
+        name: "Summer Mosley",
+        reportsTo: 46,
+        phone: "(784) 962-2301",
+        extension: 5492,
+        hireDate: new Date("2010-03-02T00:00:00.000Z"),
+        fullTime: true,
+        role: "QA",
+        timeInPosition: 5,
+    },
+    {
+        id: 59,
+        name: "Keiko Espinoza",
+        reportsTo: 46,
+        phone: "(226) 600-5305",
+        extension: 9363,
+        hireDate: new Date("2011-09-18T00:00:00.000Z"),
+        fullTime: true,
+        role: "QA",
+        timeInPosition: 4,
+    },
+    {
+        id: 72,
+        name: "Stacey Lynn",
+        reportsTo: 40,
+        phone: "(140) 772-7509",
+        extension: 8396,
+        hireDate: new Date("2014-07-31T00:00:00.000Z"),
+        fullTime: false,
+        role: "QA",
+        timeInPosition: 1,
+    },
+    {
+        id: 38,
+        name: "Elton Tucker",
+        reportsTo: 69,
+        phone: "(988) 930-9331",
+        extension: 9216,
+        hireDate: new Date("2015-06-04T00:00:00.000Z"),
+        fullTime: true,
+        role: "Support",
+        timeInPosition: 1,
+    },
+    {
+        id: 71,
+        name: "Flavia Short",
+        reportsTo: 63,
+        phone: "(370) 133-9238",
+        extension: 6390,
+        hireDate: new Date("2013-02-21T00:00:00.000Z"),
+        fullTime: true,
+        role: "Support",
+        timeInPosition: 0,
+    },
+    {
+        id: 61,
+        name: "Candace Pickett",
+        reportsTo: 46,
+        phone: "(120) 117-7475",
+        extension: 5178,
+        hireDate: new Date("2010-05-06T00:00:00.000Z"),
+        fullTime: true,
+        role: "Support",
+        timeInPosition: 0,
+    },
+    {
+        id: 65,
+        name: "Thomas Terry",
+        reportsTo: 63,
+        phone: "(764) 831-4248",
+        extension: 3574,
+        hireDate: new Date("2015-06-15T00:00:00.000Z"),
+        fullTime: false,
+        role: "Support",
+        timeInPosition: 2,
+    },
+    {
+        id: 62,
+        name: "Palmer Gregory",
+        reportsTo: 64,
+        phone: "(360) 430-2505",
+        extension: 4337,
+        hireDate: new Date("2014-08-30T00:00:00.000Z"),
+        fullTime: true,
+        role: "Designer",
+        timeInPosition: 4,
+    },
+    {
+        id: 12,
+        name: "Jamalia Wallace",
+        reportsTo: 64,
+        phone: "(611) 391-8016",
+        extension: 1952,
+        hireDate: new Date("2011-09-08T00:00:00.000Z"),
+        fullTime: true,
+        role: "Designer",
+        timeInPosition: 3,
+    },
+    {
+        id: 66,
+        name: "Gloria Freeman",
+        reportsTo: 53,
+        phone: "(344) 950-9168",
+        extension: 4738,
+        hireDate: new Date("2013-05-06T00:00:00.000Z"),
+        fullTime: true,
+        role: "Designer",
+        timeInPosition: 0,
+    },
+];
diff --git a/vue-options-api-demos/dropdowns/multiselect/grouping/filtering/main.js b/vue-options-api-demos/dropdowns/multiselect/grouping/filtering/main.js
new file mode 100644
index 00000000..3a6df88d
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/grouping/filtering/main.js
@@ -0,0 +1,4 @@
+import { createApp } from "vue";
+import App from "./main.vue";
+
+createApp(App).mount("#app");
diff --git a/vue-options-api-demos/dropdowns/multiselect/grouping/filtering/main.vue b/vue-options-api-demos/dropdowns/multiselect/grouping/filtering/main.vue
new file mode 100644
index 00000000..7163909f
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/grouping/filtering/main.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <MultiSelect
+      :data-items="groupedData"
+      :text-field="'name'"
+      :data-item-key="'id'"
+      :group-field="'role'"
+      :filterable="true"
+      @filterchange="filterChange"
+      :style="{
+        width: '300px',
+      }"
+    />
+  </div>
+</template>
+<script>
+import { MultiSelect } from "@progress/kendo-vue-dropdowns";
+import { groupBy, filterBy } from "@progress/kendo-data-query";
+import { employees } from "./grouping-data.js";
+
+export default {
+  components: {
+    MultiSelect,
+  },
+  methods: {
+    filterChange(event) {
+      this.groupedData = this.filterData(event.filter);
+    },
+    filterData(filter) {
+      const data = employees.slice();
+      return groupBy(filterBy(data, filter), [{ field: "position" }]).reduce(
+        (res, group) => [...res, ...group.items],
+        []
+      );
+    },
+  },
+  data() {
+    return {
+      groupedData: groupBy(employees, [{ field: "position" }]).reduce(
+        (res, group) => [...res, ...group.items],
+        []
+      ),
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/grouping/virtualization/main.js b/vue-options-api-demos/dropdowns/multiselect/grouping/virtualization/main.js
new file mode 100644
index 00000000..3a6df88d
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/grouping/virtualization/main.js
@@ -0,0 +1,4 @@
+import { createApp } from "vue";
+import App from "./main.vue";
+
+createApp(App).mount("#app");
diff --git a/vue-options-api-demos/dropdowns/multiselect/grouping/virtualization/main.vue b/vue-options-api-demos/dropdowns/multiselect/grouping/virtualization/main.vue
new file mode 100644
index 00000000..483b654f
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/grouping/virtualization/main.vue
@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <MultiSelect
+      :style="{ width: '230px' }"
+      :data-items="subsetData"
+      :data-item-key="'id'"
+      :text-field="'name'"
+      :group-field="'title'"
+      :virtual="virtual"
+      @pagechange="pageChange"
+      :popup-settings="popupSettings"
+    ></MultiSelect>
+  </div>
+</template>
+<script>
+import { MultiSelect } from "@progress/kendo-vue-dropdowns";
+import { groupBy } from "@progress/kendo-data-query";
+
+const total = 500;
+const pageSize = 30;
+
+function createRandomData(count) {
+  const firstNames = [
+    "Nancy",
+    "Andrew",
+    "Janet",
+    "Margaret",
+    "Steven",
+    "Michael",
+    "Robert",
+    "Anne",
+    "Nige",
+  ];
+  const lastNames = [
+    "Davolio",
+    "Fuller",
+    "Leverling",
+    "Peacock",
+    "Buchanan",
+    "Suyama",
+    "King",
+    "Callahan",
+    "Dodsworth",
+    "White",
+  ];
+  const titles = [
+    "Accountant",
+    "Vice President, Sales",
+    "Sales Representative",
+    "Technical Support",
+    "Sales Manager",
+    "Web Designer",
+    "Software Developer",
+    "QA",
+    "Project Manager",
+  ];
+
+  return Array(count)
+    .fill({})
+    .map((_, idx) => ({
+      id: idx,
+      name:
+        firstNames[Math.floor(Math.random() * firstNames.length)] +
+        " " +
+        lastNames[Math.floor(Math.random() * lastNames.length)],
+      title: titles[Math.floor(Math.random() * titles.length)],
+    }));
+}
+const employees = groupBy(createRandomData(total), [{ field: "title" }]).reduce(
+  (res, group) => [...res, ...group.items],
+  []
+);
+
+export default {
+  components: {
+    MultiSelect,
+  },
+  data: function () {
+    return {
+      skip: 0,
+      pageSize: pageSize,
+      popupSettings: {
+        height: "250px",
+      },
+      employees: employees,
+    };
+  },
+  computed: {
+    virtual: function () {
+      return {
+        total: total,
+        pageSize: pageSize,
+        skip: this.skip,
+      };
+    },
+    subsetData() {
+      return employees.slice(this.skip, this.skip + this.pageSize);
+    },
+  },
+  methods: {
+    pageChange(event) {
+      console.log("Page change")
+      this.skip = event.page.skip;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/header-footer/FooterRender.vue b/vue-options-api-demos/dropdowns/multiselect/header-footer/FooterRender.vue
new file mode 100644
index 00000000..328e96da
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/header-footer/FooterRender.vue
@@ -0,0 +1,12 @@
+<template>
+<span>
+    footer
+</span>
+</template>
+<script>
+export default {
+    props: {
+        currentValue: String
+    }
+}
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/header-footer/HeaderRender.vue b/vue-options-api-demos/dropdowns/multiselect/header-footer/HeaderRender.vue
new file mode 100644
index 00000000..dd7e5d25
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/header-footer/HeaderRender.vue
@@ -0,0 +1,12 @@
+<template>
+<span>
+    header
+</span>
+</template>
+<script>
+export default {
+    props: {
+        currentValue: String
+    }
+}
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/header-footer/countries.js b/vue-options-api-demos/dropdowns/multiselect/header-footer/countries.js
new file mode 100644
index 00000000..45b6cb20
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/header-footer/countries.js
@@ -0,0 +1,52 @@
+export default [
+    "Albania",
+    "Andorra",
+    "Armenia",
+    "Austria",
+    "Azerbaijan",
+    "Belarus",
+    "Belgium",
+    "Bosnia & Herzegovina",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czech Republic",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Georgia",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Iceland",
+    "Ireland",
+    "Italy",
+    "Kosovo",
+    "Latvia",
+    "Liechtenstein",
+    "Lithuania",
+    "Luxembourg",
+    "Macedonia",
+    "Malta",
+    "Moldova",
+    "Monaco",
+    "Montenegro",
+    "Netherlands",
+    "Norway",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Russia",
+    "San Marino",
+    "Serbia",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden",
+    "Switzerland",
+    "Turkey",
+    "Ukraine",
+    "United Kingdom",
+    "Vatican City"
+];
diff --git a/vue-options-api-demos/dropdowns/multiselect/header-footer/main.js b/vue-options-api-demos/dropdowns/multiselect/header-footer/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/header-footer/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselect/header-footer/main.vue b/vue-options-api-demos/dropdowns/multiselect/header-footer/main.vue
new file mode 100644
index 00000000..e8444a2e
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/header-footer/main.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="example-wrapper">
+            <div>
+                <multiselect
+                    :style="{ width: '400px'}"
+                    :data-items="countries"
+                    :header="header"
+                    :footer="footer"
+                >
+                    <template v-slot:myHeader="{props}">
+                        <header1  />
+                    </template>
+                    <template v-slot:myFooter="{props}">
+                        <footer1 />
+                    </template>
+                </multiselect>
+            </div>
+        </div>
+</template>
+<script>
+import { MultiSelect } from '@progress/kendo-vue-dropdowns';
+import countries from './countries';
+import HeaderRender from './HeaderRender.vue';
+import FooterRender from './FooterRender.vue';
+
+export default {
+    components: {
+        'multiselect': MultiSelect,
+        'header1': HeaderRender,
+        'footer1': FooterRender
+    },
+    data () {
+        return {
+            countries: countries.slice(),
+            header: 'myHeader',
+            footer: 'myFooter'
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/item-render/ItemRender.vue b/vue-options-api-demos/dropdowns/multiselect/item-render/ItemRender.vue
new file mode 100644
index 00000000..b6f32ec7
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/item-render/ItemRender.vue
@@ -0,0 +1,27 @@
+<template>
+<li class="k-item" @click="handleClick">
+    <span :style="{ color: '#00F' }">
+            {{dataItem}} {{index}}
+    </span>
+  </li>
+</template>
+<script>
+export default {
+     emits: {
+        click: null
+     },
+     props: {
+        id: String,
+        index: Number,
+        dataItem: [Object, String, Number],
+        textField: String,
+        focused: Boolean,
+        selected: Boolean,
+    },
+    methods: {
+      handleClick: function(e){
+        this.$emit('click', e);
+      }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/item-render/countries.js b/vue-options-api-demos/dropdowns/multiselect/item-render/countries.js
new file mode 100644
index 00000000..45b6cb20
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/item-render/countries.js
@@ -0,0 +1,52 @@
+export default [
+    "Albania",
+    "Andorra",
+    "Armenia",
+    "Austria",
+    "Azerbaijan",
+    "Belarus",
+    "Belgium",
+    "Bosnia & Herzegovina",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czech Republic",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Georgia",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Iceland",
+    "Ireland",
+    "Italy",
+    "Kosovo",
+    "Latvia",
+    "Liechtenstein",
+    "Lithuania",
+    "Luxembourg",
+    "Macedonia",
+    "Malta",
+    "Moldova",
+    "Monaco",
+    "Montenegro",
+    "Netherlands",
+    "Norway",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Russia",
+    "San Marino",
+    "Serbia",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden",
+    "Switzerland",
+    "Turkey",
+    "Ukraine",
+    "United Kingdom",
+    "Vatican City"
+];
diff --git a/vue-options-api-demos/dropdowns/multiselect/item-render/main.js b/vue-options-api-demos/dropdowns/multiselect/item-render/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/item-render/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselect/item-render/main.vue b/vue-options-api-demos/dropdowns/multiselect/item-render/main.vue
new file mode 100644
index 00000000..17fbe982
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/item-render/main.vue
@@ -0,0 +1,38 @@
+<template>
+   <div class="example-wrapper">
+            <div>
+                <multiselect
+                    :style="{ width: '400px'}"
+                    :data-items="countries"
+                    :item-render="itemRender"
+                >
+                    <template v-slot:myTemplate="{props}">
+                        <custom
+                            :style="props.style"
+                            :class="props.itemClass"
+                            :data-item="props.dataItem"
+                            :index="props.index" @click="(ev) => props.onClick(ev)" />
+                    </template>
+                </multiselect>
+            </div>
+        </div>
+</template>
+<script>
+import { MultiSelect } from '@progress/kendo-vue-dropdowns';
+import countries from './countries';
+import ItemRender from './ItemRender.vue';
+
+export default {
+    components: {
+        'multiselect': MultiSelect,
+        'custom': ItemRender
+    },
+    data () {
+        return {
+            countries: countries.slice(),
+            itemRender: 'myTemplate'
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/nodata-render/NoDataRender.vue b/vue-options-api-demos/dropdowns/multiselect/nodata-render/NoDataRender.vue
new file mode 100644
index 00000000..9c42c161
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/nodata-render/NoDataRender.vue
@@ -0,0 +1,12 @@
+<template>
+<h4 :style="{ fontSize: '1em' }">
+            <span class="k-icon k-i-warning" :style="{ fontSize: '2.5em' }" />
+            <br /><br />
+            no data here
+        </h4>
+</template>
+<script>
+export default {
+    
+}
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/nodata-render/main.js b/vue-options-api-demos/dropdowns/multiselect/nodata-render/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/nodata-render/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselect/nodata-render/main.vue b/vue-options-api-demos/dropdowns/multiselect/nodata-render/main.vue
new file mode 100644
index 00000000..c4dff0ab
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/nodata-render/main.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="example-wrapper">
+            <div>
+                <multiselect
+                    :style="{ width: '400px'}"
+                    :data-items="countries"
+                    :list-no-data-render="listNoDataRender"
+                >
+                    <template v-slot:myTemplate="{}">
+                        <custom />
+                    </template>
+                </multiselect>
+            </div>
+        </div>
+</template>
+<script>
+import { MultiSelect } from '@progress/kendo-vue-dropdowns';
+import NoDataRender from './NoDataRender.vue';
+
+export default {
+  components: {
+        'multiselect': MultiSelect,
+        'custom': NoDataRender
+    },
+    data () {
+        return {
+            countries: [],
+            listNoDataRender: 'myTemplate'
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/summary-tag/countries.js b/vue-options-api-demos/dropdowns/multiselect/summary-tag/countries.js
new file mode 100644
index 00000000..45b6cb20
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/summary-tag/countries.js
@@ -0,0 +1,52 @@
+export default [
+    "Albania",
+    "Andorra",
+    "Armenia",
+    "Austria",
+    "Azerbaijan",
+    "Belarus",
+    "Belgium",
+    "Bosnia & Herzegovina",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czech Republic",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Georgia",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Iceland",
+    "Ireland",
+    "Italy",
+    "Kosovo",
+    "Latvia",
+    "Liechtenstein",
+    "Lithuania",
+    "Luxembourg",
+    "Macedonia",
+    "Malta",
+    "Moldova",
+    "Monaco",
+    "Montenegro",
+    "Netherlands",
+    "Norway",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Russia",
+    "San Marino",
+    "Serbia",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden",
+    "Switzerland",
+    "Turkey",
+    "Ukraine",
+    "United Kingdom",
+    "Vatican City"
+];
diff --git a/vue-options-api-demos/dropdowns/multiselect/summary-tag/main.js b/vue-options-api-demos/dropdowns/multiselect/summary-tag/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/summary-tag/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselect/summary-tag/main.vue b/vue-options-api-demos/dropdowns/multiselect/summary-tag/main.vue
new file mode 100644
index 00000000..d8005cb0
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/summary-tag/main.vue
@@ -0,0 +1,45 @@
+<template>
+   <div class="example-wrapper">
+            <div>
+                <div>T-shirt sizes:</div>
+                <multiselect :style="{ width: '230px' }"
+                    :data-items="sizes"
+                    :value="value"
+                    @change="onChange"
+                    :tags="tags"
+                >
+                </multiselect>
+            </div>
+        </div>
+</template>
+<script>
+import { MultiSelect } from '@progress/kendo-vue-dropdowns';
+import countries from './countries';
+
+export default {
+    components: {
+        'multiselect': MultiSelect
+    },
+    data () {
+        return {
+            sizes: [ "X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large" ],
+            value: []
+        };
+    },
+    computed: {
+        selected () {
+            return this.value.length;
+        },
+        tags () {
+            return this.selected > 0 ?
+            [ { text: `${this.selected} items selected`, data: [ ...this.value ] } ] : [];
+        }
+    },
+    methods: {
+        onChange (event)  {
+            this.value = [...event.target.value];
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/tags/main.js b/vue-options-api-demos/dropdowns/multiselect/tags/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/tags/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselect/tags/main.vue b/vue-options-api-demos/dropdowns/multiselect/tags/main.vue
new file mode 100644
index 00000000..43a58337
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/tags/main.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="example-wrapper">
+        <div>
+            <multiselect 
+                :style="{ width: '400px'}"
+                :data-items="sizes"
+                :tag-render="tagRender"
+            >
+            <template v-slot:myTemplate="{props}">
+                <li class="k-chip">
+                    <span class="custom-tag">{{sizes.indexOf(props.tagData.data[0])}}</span> - {{props.tagData.text}}
+                </li>
+            </template>
+        </multiselect>
+        </div>
+    </div>
+</template>
+<script>
+import { MultiSelect } from '@progress/kendo-vue-dropdowns';
+
+export default {
+   components: {
+        'multiselect': MultiSelect
+    },
+    data () {
+        return {
+            sizes: ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"],
+            tagRender: 'myTemplate'
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/tags/styles.css b/vue-options-api-demos/dropdowns/multiselect/tags/styles.css
new file mode 100644
index 00000000..3d617b6c
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/tags/styles.css
@@ -0,0 +1,10 @@
+.custom-tag {
+    display: inline-block;
+    background: #333;
+    color: #fff;
+    border-radius: 50%;
+    width: 18px;
+    height: 18px;
+    text-align: center;
+    margin-right: 3px;
+}
diff --git a/vue-options-api-demos/dropdowns/multiselect/value-primitive/main.js b/vue-options-api-demos/dropdowns/multiselect/value-primitive/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/value-primitive/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselect/value-primitive/main.vue b/vue-options-api-demos/dropdowns/multiselect/value-primitive/main.vue
new file mode 100644
index 00000000..b7cc7ec6
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/value-primitive/main.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <div class="example-config">Selected Value: {{ multiSelectValues }}</div>
+    <div :style="{ display: 'inline-block', 'padding-right': '20px' }">
+      value and change
+      <br />
+      <MultiSelect
+        :style="{ width: '230px' }"
+        :data-items="sports"
+        :text-field="'text'"
+        :data-item-key="'id'"
+        :value-field="'id'"
+        :value-primitive="true"
+        :value="multiSelectValues"
+        @change="handleChange"
+      >
+      </MultiSelect>
+    </div>
+    <div :style="{ display: 'inline-block' }">
+      v-model
+      <br />
+      <MultiSelect
+        :style="{ width: '230px' }"
+        :data-items="sports"
+        :text-field="'text'"
+        :data-item-key="'id'"
+        :value-field="'id'"
+        :value-primitive="true"
+        v-model="multiSelectValues"
+      >
+      </MultiSelect>
+    </div>
+  </div>
+</template>
+<script>
+import { MultiSelect } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  components: {
+    MultiSelect,
+  },
+  data: function () {
+    return {
+      // Since the reference of the initial value is not from the 'sports' collection,
+      // 'dataItemKey' have to be set.
+      multiSelectValues: [2],
+      sports: [
+        { text: 'Basketball', id: 1 },
+        { text: 'Football', id: 2 },
+        { text: 'Tennis', id: 3 },
+        { text: 'Volleyball', id: 4 },
+      ],
+    };
+  },
+  methods: {
+    handleChange(event) {
+      this.multiSelectValues = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/virtualization/basic/main.js b/vue-options-api-demos/dropdowns/multiselect/virtualization/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/virtualization/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselect/virtualization/basic/main.vue b/vue-options-api-demos/dropdowns/multiselect/virtualization/basic/main.vue
new file mode 100644
index 00000000..e52469ce
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/virtualization/basic/main.vue
@@ -0,0 +1,60 @@
+<template>
+    <div class="example-wrapper">
+            <div>
+                <div>Favorite sports:</div>
+                <multiselect :style="{ width: '230px' }"
+                    :data-items="subsetData"
+                    :text-field="'text'"
+                    :data-item-key="'id'"
+                    :virtual="virtual"
+                    @pagechange="pageChange"
+                    :popup-settings="{
+                        height: '250px'
+                    }"
+                ></multiselect>
+            </div>
+        </div>
+</template>
+<script>
+import { MultiSelect } from '@progress/kendo-vue-dropdowns';
+
+const total = 5000;
+const pageSize = 11;
+const allData = [];
+
+for (let i = 0; i < total; i++) {
+    allData.push({ id: i, text: 'Item ' + i });
+}
+
+export default {
+    components: {
+        'multiselect': MultiSelect
+    },
+    data () {
+        return {
+            subsetData: allData.slice(0, pageSize),
+            skip: 0
+        };
+    },
+    computed: {
+        virtual () {
+            return {
+                total: total,
+                pageSize: pageSize,
+                skip: this.skip
+            };
+        }
+    },
+    methods: {
+        pageChange (event) {
+            const skip = event.page.skip;
+            const take = event.page.take;
+            const newSubsetData = allData.slice(skip, skip + take);
+    
+            this.subsetData = newSubsetData;
+            this.skip = skip;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselect/virtualization/filtering/main.js b/vue-options-api-demos/dropdowns/multiselect/virtualization/filtering/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/virtualization/filtering/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselect/virtualization/filtering/main.vue b/vue-options-api-demos/dropdowns/multiselect/virtualization/filtering/main.vue
new file mode 100644
index 00000000..b120cb10
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselect/virtualization/filtering/main.vue
@@ -0,0 +1,76 @@
+<template>
+     <div class="example-wrapper">
+            <div>
+                <div>Favorite sports:</div>
+                <multiselect :style="{ width: '230px' }"
+                    :data-items="subsetData"
+                    :text-field="'text'"
+                    :data-item-key="'id'"
+                    :virtual="virtual"
+                    :filterable="true"
+                    @filterchange="onFilterChange"
+                    @pagechange="pageChange"
+                    :popup-settings="{
+                        height: '250px'
+                    }"
+                ></multiselect>
+            </div>
+        </div>
+</template>
+<script>
+import { MultiSelect } from '@progress/kendo-vue-dropdowns';
+import { filterBy } from '@progress/kendo-data-query';
+const total = 5000;
+const pageSize = 10;
+const allData = [];
+
+for (let i = 0; i < total; i++) {
+    allData.push({ id: i, text: 'Item ' + i });
+}
+
+export default {
+    components: {
+        'multiselect': MultiSelect
+    },
+   data () {
+        return {
+            subsetData: allData.slice(0, pageSize),
+            skip: 0,
+            total: total
+        };
+    },
+    created(){
+        this.filteredData = [ ...allData ];
+    },
+    computed: {
+        virtual () {
+            return {
+                total: this.total,
+                pageSize: pageSize,
+                skip: this.skip
+            };
+        }
+    },
+    methods: {
+        onFilterChange (event) {
+            const filter = event.filter;
+            this.filteredData = filterBy(allData.slice(), filter);
+    
+            const data = this.filteredData.slice(0, pageSize);
+    
+            this.subsetData = data;
+            this.skip = 0;
+            this.total = this.filteredData.length;
+        },
+        pageChange (event) {
+            const skip = event.page.skip;
+            const take = event.page.take;
+            const newSubsetData = this.filteredData.slice(skip, skip + take);
+    
+            this.subsetData = newSubsetData;
+            this.skip = skip;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/adaptive-rendering/main.js b/vue-options-api-demos/dropdowns/multiselecttree/adaptive-rendering/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/adaptive-rendering/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/adaptive-rendering/main.vue b/vue-options-api-demos/dropdowns/multiselecttree/adaptive-rendering/main.vue
new file mode 100644
index 00000000..b790104f
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/adaptive-rendering/main.vue
@@ -0,0 +1,88 @@
+<template>
+  <div>
+      <MultiSelectTree
+        :style="{ width: '300px' }"
+        :dataItems="treeData"
+        :value="value"
+        @change="onChange"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :checkField="checkField"
+        :checkIndeterminateField="checkIndeterminateField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Category'"
+        :filterable="true"
+        @filterchange="onFilterChange"
+        :adaptive="true"
+        :adaptive-title="'Adaptive title sample'"
+      />
+    </div>
+</template>
+<script>
+import {
+    MultiSelectTree,
+    getMultiSelectTreeValue,
+} from "@progress/kendo-vue-dropdowns";
+import {
+    processMultiSelectTreeData,
+    expandedState,
+} from "./multiselecttree-data-operations";
+import { data } from "./tree-data";
+
+const dataItemKey = "id";
+const checkField = "checkField";
+const checkIndeterminateField = "checkIndeterminateField";
+const subItemsField = "items";
+const expandField = "expanded";
+const textField = "text";
+
+const fields = {
+    dataItemKey,
+    checkField,
+    checkIndeterminateField,
+    expandField,
+    subItemsField,
+};
+
+export default {
+    components: {
+        MultiSelectTree
+    },
+    data: function () {
+        return {
+            textField,
+            dataItemKey,
+            checkField,
+            checkIndeterminateField,
+            subItemsField,
+            expandField,
+            dataItems: data,
+            value: [],
+            expanded: [data[0][dataItemKey]],
+            filter: null
+        };
+    },
+    computed: {
+        treeData () {
+            return  processMultiSelectTreeData(this.dataItems, {
+                expanded: this.expanded,
+                filter: this.filter,
+                value: this.value, ...fields })
+        }
+    },
+    methods: {
+        onFilterChange(event) {
+            this.filter = event.filter;
+        },
+        onChange (event) {
+            this.value = (getMultiSelectTreeValue(this.dataItems, { ...fields, ...event, value: this.value }));
+        },
+        onExpandChange (event) {
+            this.expanded = (expandedState(event.item, dataItemKey, this.expanded))
+        }
+    }
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/adaptive-rendering/multiselecttree-data-operations.js b/vue-options-api-demos/dropdowns/multiselecttree/adaptive-rendering/multiselecttree-data-operations.js
new file mode 100644
index 00000000..50ff55a2
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/adaptive-rendering/multiselecttree-data-operations.js
@@ -0,0 +1,107 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { getter, setter } from '@progress/kendo-vue-common';
+
+export const getValueMap = (value, idGetter) => {
+    const map = {};
+
+    if (value && value.length) {
+        value.forEach((item) => {
+            map[idGetter(item)] = true;
+        });
+    }
+
+    return map;
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const keyGetter = getter(dataItemKey);
+    const itemKey = keyGetter(item);
+    const index = expanded.findIndex(currentKey => {
+        return currentKey === itemKey;
+    });
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
+
+const mapMultiSelectTreeData = (
+    data,
+    options
+) => {
+    const {
+        keyGetter,
+        subItemGetter,
+        subItemSetter,
+        checkSetter,
+        expandedSetter,
+        checkIndeterminateSetter,
+        valueMap,
+        expandedMap
+    } = options;
+
+    if (!data || !data.length) { return [data, false];}
+
+    let hasChecked = false;
+    const newData = [...data].map(dataItem => {
+        const [children, hasCheckedChildren] = mapMultiSelectTreeData(subItemGetter(dataItem), options);
+
+        const isChecked = valueMap[keyGetter(dataItem)];
+        if (isChecked || hasCheckedChildren) {
+            hasChecked = true;
+        }
+
+        const newItem = { ...dataItem };
+
+        expandedSetter(newItem, expandedMap[keyGetter(newItem)])
+        subItemSetter(newItem, children);
+        checkSetter(newItem, isChecked);
+        checkIndeterminateSetter(newItem, !isChecked && hasCheckedChildren);
+
+        return newItem;
+    });
+
+    return [newData, hasChecked];
+};
+
+/**
+ * Creates a new array with the results of calling the provided callback function
+ * on every element in the provided data tree. The new tree items have their `check` and `checkIndeterminate` fields set.
+ */
+export const processMultiSelectTreeData = (
+    tree,
+    options
+) => {
+    const {
+        subItemsField = 'items',
+        checkField = 'checkField',
+        checkIndeterminateField = 'checkIndeterminateField',
+        expandField = 'expanded',
+        dataItemKey,
+        value,
+        filter,
+        expanded
+    } = options;
+
+    const keyGetter = getter(dataItemKey);
+    const filtering = Boolean(filter && filter.value);
+    const expandedMap = {};
+
+    expanded.forEach((id) => expandedMap[id] = true);
+
+    const [result] = mapMultiSelectTreeData(
+        tree,
+        {
+            valueMap: getValueMap(value, keyGetter),
+            expandedMap: expandedMap,
+            keyGetter,
+            expandedSetter: setter(expandField),
+            subItemGetter: getter(subItemsField),
+            subItemSetter: setter(subItemsField),
+            checkSetter: setter(checkField),
+            checkIndeterminateSetter: setter(checkIndeterminateField)
+        }
+    );
+
+    return filtering ? filterBy(result, [ filter ], subItemsField) : result;
+};
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/adaptive-rendering/tree-data.js b/vue-options-api-demos/dropdowns/multiselecttree/adaptive-rendering/tree-data.js
new file mode 100644
index 00000000..5b749471
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/adaptive-rendering/tree-data.js
@@ -0,0 +1,15 @@
+export const data = [
+    {
+        text: 'Furniture', id: 1, items: [
+            { text: 'Tables & Chairs', id: 2 },
+            { text: 'Sofas', id: 3 },
+            { text: 'Occasional Furniture', id: 4 }
+        ]
+    }, {
+        text: 'Decor', id: 5, items: [
+            { text: 'Bed Linen', id: 6 },
+            { text: 'Curtains & Blinds', id: 7 },
+            { text: 'Carpets', id: 8 }
+        ]
+    }
+];
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/appearance/configurator/DropDownStyleConfigurator.vue b/vue-options-api-demos/dropdowns/multiselecttree/appearance/configurator/DropDownStyleConfigurator.vue
new file mode 100644
index 00000000..c1b36044
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/appearance/configurator/DropDownStyleConfigurator.vue
@@ -0,0 +1,105 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Fill Mode
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="fillModes"
+              :value="fillMode"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleFillModeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+    fillMode: String,
+    rounded: String,
+  },
+  emits: [
+    "sizechange",
+    "fillmodechange",
+    "roundedchange",
+  ],
+  data() {
+    return {
+      sizes: ["small", "medium", "large"],
+      fillModes: ["solid", "outline", "flat"],
+      roundedOptions: ["small", "medium", "large", "full"],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleFillModeChange(event) {
+      this.$emit("fillmodechange", event);
+    },
+    handleRoundedChange(event) {
+      this.$emit("roundedchange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/appearance/configurator/main.js b/vue-options-api-demos/dropdowns/multiselecttree/appearance/configurator/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/appearance/configurator/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/appearance/configurator/main.vue b/vue-options-api-demos/dropdowns/multiselecttree/appearance/configurator/main.vue
new file mode 100644
index 00000000..d9251048
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/appearance/configurator/main.vue
@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <DropDownStyleConfigurator
+      :size="size"
+      @sizechange="setSize"
+      :fill-mode="fillMode"
+      @fillmodechange="setFillMode"
+      :rounded="rounded"
+      @roundedchange="setRounded"
+    />
+    <div>
+      <MultiSelectTree
+        :style="{ width: '300px' }"
+        :dataItems="treeData"
+        :size="size"
+        :fill-mode="fillMode"
+        :rounded="rounded"
+        :value="value"
+        @change="onChange"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :checkField="checkField"
+        :checkIndeterminateField="checkIndeterminateField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Category'"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import DropDownStyleConfigurator from "./DropDownStyleConfigurator.vue";
+import {
+  MultiSelectTree,
+  getMultiSelectTreeValue,
+} from "@progress/kendo-vue-dropdowns";
+import {
+  processMultiSelectTreeData,
+  expandedState,
+} from "./multiselecttree-data-operations";
+import { data } from "./tree-data";
+
+const dataItemKey = "id";
+const checkField = "checkField";
+const checkIndeterminateField = "checkIndeterminateField";
+const subItemsField = "items";
+const expandField = "expanded";
+const textField = "text";
+
+const fields = {
+  dataItemKey,
+  checkField,
+  checkIndeterminateField,
+  expandField,
+  subItemsField,
+};
+
+export default {
+  components: {
+    DropDownStyleConfigurator,
+    MultiSelectTree,
+  },
+  data() {
+    return {
+      size: "medium",
+      rounded: "medium",
+      fillMode: "solid",
+      textField,
+      dataItemKey,
+      checkField,
+      checkIndeterminateField,
+      subItemsField,
+      expandField,
+      dataItems: data,
+      value: [],
+      expanded: [data[0][dataItemKey]],
+    };
+  },
+  computed: {
+    treeData() {
+      return processMultiSelectTreeData(this.dataItems, {
+        expanded: this.expanded,
+        value: this.value,
+        ...fields,
+      });
+    },
+  },
+  methods: {
+    setRounded(event) {
+      this.rounded = event.value;
+    },
+    setSize(event) {
+      this.size = event.value;
+    },
+    setFillMode(event) {
+      this.fillMode = event.value;
+    },
+    onChange(event) {
+      this.value = getMultiSelectTreeValue(this.dataItems, {
+        ...fields,
+        ...event,
+        value: this.value,
+      });
+    },
+    onExpandChange(event) {
+      this.expanded = expandedState(event.item, dataItemKey, this.expanded);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/appearance/configurator/multiselecttree-data-operations.js b/vue-options-api-demos/dropdowns/multiselecttree/appearance/configurator/multiselecttree-data-operations.js
new file mode 100644
index 00000000..50ff55a2
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/appearance/configurator/multiselecttree-data-operations.js
@@ -0,0 +1,107 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { getter, setter } from '@progress/kendo-vue-common';
+
+export const getValueMap = (value, idGetter) => {
+    const map = {};
+
+    if (value && value.length) {
+        value.forEach((item) => {
+            map[idGetter(item)] = true;
+        });
+    }
+
+    return map;
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const keyGetter = getter(dataItemKey);
+    const itemKey = keyGetter(item);
+    const index = expanded.findIndex(currentKey => {
+        return currentKey === itemKey;
+    });
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
+
+const mapMultiSelectTreeData = (
+    data,
+    options
+) => {
+    const {
+        keyGetter,
+        subItemGetter,
+        subItemSetter,
+        checkSetter,
+        expandedSetter,
+        checkIndeterminateSetter,
+        valueMap,
+        expandedMap
+    } = options;
+
+    if (!data || !data.length) { return [data, false];}
+
+    let hasChecked = false;
+    const newData = [...data].map(dataItem => {
+        const [children, hasCheckedChildren] = mapMultiSelectTreeData(subItemGetter(dataItem), options);
+
+        const isChecked = valueMap[keyGetter(dataItem)];
+        if (isChecked || hasCheckedChildren) {
+            hasChecked = true;
+        }
+
+        const newItem = { ...dataItem };
+
+        expandedSetter(newItem, expandedMap[keyGetter(newItem)])
+        subItemSetter(newItem, children);
+        checkSetter(newItem, isChecked);
+        checkIndeterminateSetter(newItem, !isChecked && hasCheckedChildren);
+
+        return newItem;
+    });
+
+    return [newData, hasChecked];
+};
+
+/**
+ * Creates a new array with the results of calling the provided callback function
+ * on every element in the provided data tree. The new tree items have their `check` and `checkIndeterminate` fields set.
+ */
+export const processMultiSelectTreeData = (
+    tree,
+    options
+) => {
+    const {
+        subItemsField = 'items',
+        checkField = 'checkField',
+        checkIndeterminateField = 'checkIndeterminateField',
+        expandField = 'expanded',
+        dataItemKey,
+        value,
+        filter,
+        expanded
+    } = options;
+
+    const keyGetter = getter(dataItemKey);
+    const filtering = Boolean(filter && filter.value);
+    const expandedMap = {};
+
+    expanded.forEach((id) => expandedMap[id] = true);
+
+    const [result] = mapMultiSelectTreeData(
+        tree,
+        {
+            valueMap: getValueMap(value, keyGetter),
+            expandedMap: expandedMap,
+            keyGetter,
+            expandedSetter: setter(expandField),
+            subItemGetter: getter(subItemsField),
+            subItemSetter: setter(subItemsField),
+            checkSetter: setter(checkField),
+            checkIndeterminateSetter: setter(checkIndeterminateField)
+        }
+    );
+
+    return filtering ? filterBy(result, [ filter ], subItemsField) : result;
+};
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/appearance/configurator/tree-data.js b/vue-options-api-demos/dropdowns/multiselecttree/appearance/configurator/tree-data.js
new file mode 100644
index 00000000..5b749471
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/appearance/configurator/tree-data.js
@@ -0,0 +1,15 @@
+export const data = [
+    {
+        text: 'Furniture', id: 1, items: [
+            { text: 'Tables & Chairs', id: 2 },
+            { text: 'Sofas', id: 3 },
+            { text: 'Occasional Furniture', id: 4 }
+        ]
+    }, {
+        text: 'Decor', id: 5, items: [
+            { text: 'Bed Linen', id: 6 },
+            { text: 'Curtains & Blinds', id: 7 },
+            { text: 'Carpets', id: 8 }
+        ]
+    }
+];
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/appearance/fill-mode/main.js b/vue-options-api-demos/dropdowns/multiselecttree/appearance/fill-mode/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/appearance/fill-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/appearance/fill-mode/main.vue b/vue-options-api-demos/dropdowns/multiselecttree/appearance/fill-mode/main.vue
new file mode 100644
index 00000000..549c0978
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/appearance/fill-mode/main.vue
@@ -0,0 +1,162 @@
+<template>
+  <div class="demo">
+    <span class="wrapper">
+      <MultiSelectTree
+        :style="{ width: '170px' }"
+        :dataItems="treeData"
+        :fill-mode="'flat'"
+        :value="value"
+        @change="onChange"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :checkField="checkField"
+        :checkIndeterminateField="checkIndeterminateField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Flat:'"
+      />
+    </span>
+    <span class="wrapper">
+      <MultiSelectTree
+        :style="{ width: '170px' }"
+        :dataItems="treeData"
+        :fill-mode="'solid'"
+        :value="value"
+        @change="onChange"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :checkField="checkField"
+        :checkIndeterminateField="checkIndeterminateField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Solid:'"
+      />
+    </span>
+    <span class="wrapper">
+      <MultiSelectTree
+        :style="{ width: '170px' }"
+        :dataItems="treeData"
+        :fill-mode="'Outline'"
+        :value="value"
+        @change="onChange"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :checkField="checkField"
+        :checkIndeterminateField="checkIndeterminateField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Outline:'"
+      />
+    </span>
+  </div>
+  <div class="demo">
+    <span class="wrapper">
+      <MultiSelectTree
+        :style="{ width: '170px' }"
+        :class="'custom-multiselecttree'"
+        :dataItems="treeData"
+        :fill-mode="null"
+        :value="value"
+        @change="onChange"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :checkField="checkField"
+        :checkIndeterminateField="checkIndeterminateField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Full roundness:'"
+      />
+    </span>
+  </div>
+</template>
+<script>
+import {
+  MultiSelectTree,
+  getMultiSelectTreeValue,
+} from '@progress/kendo-vue-dropdowns';
+import {
+  processMultiSelectTreeData,
+  expandedState,
+} from './multiselecttree-data-operations';
+import { data } from './tree-data';
+
+const dataItemKey = 'id';
+const checkField = 'checkField';
+const checkIndeterminateField = 'checkIndeterminateField';
+const subItemsField = 'items';
+const expandField = 'expanded';
+const textField = 'text';
+
+const fields = {
+  dataItemKey,
+  checkField,
+  checkIndeterminateField,
+  expandField,
+  subItemsField,
+};
+
+export default {
+  components: {
+    MultiSelectTree,
+  },
+  data() {
+    return {
+      textField,
+      dataItemKey,
+      checkField,
+      checkIndeterminateField,
+      subItemsField,
+      expandField,
+      dataItems: data,
+      value: [],
+      expanded: [data[0][dataItemKey]],
+    };
+  },
+  computed: {
+    treeData() {
+      return processMultiSelectTreeData(this.dataItems, {
+        expanded: this.expanded,
+        value: this.value,
+        ...fields,
+      });
+    },
+  },
+  methods: {
+    onChange(event) {
+      this.value = getMultiSelectTreeValue(this.dataItems, {
+        ...fields,
+        ...event,
+        value: this.value,
+      });
+    },
+    onExpandChange(event) {
+      this.expanded = expandedState(event.item, dataItemKey, this.expanded);
+    },
+  },
+};
+</script>
+<style>
+.custom-multiselecttree .k-multiselecttree {
+  width: 200px;
+  background-color: #00aead;
+  border: 2px solid #bfd843;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/appearance/fill-mode/multiselecttree-data-operations.js b/vue-options-api-demos/dropdowns/multiselecttree/appearance/fill-mode/multiselecttree-data-operations.js
new file mode 100644
index 00000000..50ff55a2
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/appearance/fill-mode/multiselecttree-data-operations.js
@@ -0,0 +1,107 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { getter, setter } from '@progress/kendo-vue-common';
+
+export const getValueMap = (value, idGetter) => {
+    const map = {};
+
+    if (value && value.length) {
+        value.forEach((item) => {
+            map[idGetter(item)] = true;
+        });
+    }
+
+    return map;
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const keyGetter = getter(dataItemKey);
+    const itemKey = keyGetter(item);
+    const index = expanded.findIndex(currentKey => {
+        return currentKey === itemKey;
+    });
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
+
+const mapMultiSelectTreeData = (
+    data,
+    options
+) => {
+    const {
+        keyGetter,
+        subItemGetter,
+        subItemSetter,
+        checkSetter,
+        expandedSetter,
+        checkIndeterminateSetter,
+        valueMap,
+        expandedMap
+    } = options;
+
+    if (!data || !data.length) { return [data, false];}
+
+    let hasChecked = false;
+    const newData = [...data].map(dataItem => {
+        const [children, hasCheckedChildren] = mapMultiSelectTreeData(subItemGetter(dataItem), options);
+
+        const isChecked = valueMap[keyGetter(dataItem)];
+        if (isChecked || hasCheckedChildren) {
+            hasChecked = true;
+        }
+
+        const newItem = { ...dataItem };
+
+        expandedSetter(newItem, expandedMap[keyGetter(newItem)])
+        subItemSetter(newItem, children);
+        checkSetter(newItem, isChecked);
+        checkIndeterminateSetter(newItem, !isChecked && hasCheckedChildren);
+
+        return newItem;
+    });
+
+    return [newData, hasChecked];
+};
+
+/**
+ * Creates a new array with the results of calling the provided callback function
+ * on every element in the provided data tree. The new tree items have their `check` and `checkIndeterminate` fields set.
+ */
+export const processMultiSelectTreeData = (
+    tree,
+    options
+) => {
+    const {
+        subItemsField = 'items',
+        checkField = 'checkField',
+        checkIndeterminateField = 'checkIndeterminateField',
+        expandField = 'expanded',
+        dataItemKey,
+        value,
+        filter,
+        expanded
+    } = options;
+
+    const keyGetter = getter(dataItemKey);
+    const filtering = Boolean(filter && filter.value);
+    const expandedMap = {};
+
+    expanded.forEach((id) => expandedMap[id] = true);
+
+    const [result] = mapMultiSelectTreeData(
+        tree,
+        {
+            valueMap: getValueMap(value, keyGetter),
+            expandedMap: expandedMap,
+            keyGetter,
+            expandedSetter: setter(expandField),
+            subItemGetter: getter(subItemsField),
+            subItemSetter: setter(subItemsField),
+            checkSetter: setter(checkField),
+            checkIndeterminateSetter: setter(checkIndeterminateField)
+        }
+    );
+
+    return filtering ? filterBy(result, [ filter ], subItemsField) : result;
+};
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/appearance/fill-mode/tree-data.js b/vue-options-api-demos/dropdowns/multiselecttree/appearance/fill-mode/tree-data.js
new file mode 100644
index 00000000..5b749471
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/appearance/fill-mode/tree-data.js
@@ -0,0 +1,15 @@
+export const data = [
+    {
+        text: 'Furniture', id: 1, items: [
+            { text: 'Tables & Chairs', id: 2 },
+            { text: 'Sofas', id: 3 },
+            { text: 'Occasional Furniture', id: 4 }
+        ]
+    }, {
+        text: 'Decor', id: 5, items: [
+            { text: 'Bed Linen', id: 6 },
+            { text: 'Curtains & Blinds', id: 7 },
+            { text: 'Carpets', id: 8 }
+        ]
+    }
+];
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/appearance/rounded/main.js b/vue-options-api-demos/dropdowns/multiselecttree/appearance/rounded/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/appearance/rounded/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/appearance/rounded/main.vue b/vue-options-api-demos/dropdowns/multiselecttree/appearance/rounded/main.vue
new file mode 100644
index 00000000..df77153f
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/appearance/rounded/main.vue
@@ -0,0 +1,179 @@
+<template>
+  <div class="demo">
+    <span class="wrapper">
+      <MultiSelectTree
+        :style="{ width: '170px' }"
+        :dataItems="treeData"
+        :rounded="'small'"
+        :value="value"
+        @change="onChange"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :checkField="checkField"
+        :checkIndeterminateField="checkIndeterminateField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Small roundness:'"
+      />
+    </span>
+    <span class="wrapper">
+      <MultiSelectTree
+        :style="{ width: '170px' }"
+        :dataItems="treeData"
+        :rounded="'medium'"
+        :value="value"
+        @change="onChange"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :checkField="checkField"
+        :checkIndeterminateField="checkIndeterminateField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Medium roundness:'"
+      />
+    </span>
+    <span class="wrapper">
+      <MultiSelectTree
+        :style="{ width: '170px' }"
+        :dataItems="treeData"
+        :rounded="'large'"
+        :value="value"
+        @change="onChange"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :checkField="checkField"
+        :checkIndeterminateField="checkIndeterminateField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Large roundness:'"
+      />
+    </span>
+  </div>
+  <div class="demo">
+    <span class="wrapper">
+      <MultiSelectTree
+        :style="{ width: '170px' }"
+        :dataItems="treeData"
+        :rounded="'full'"
+        :value="value"
+        @change="onChange"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :checkField="checkField"
+        :checkIndeterminateField="checkIndeterminateField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Full roundness:'"
+      />
+    </span>
+    <span class="wrapper">
+      <MultiSelectTree
+        :class="'custom-multiselecttree'"
+        :dataItems="treeData"
+        :rounded="null"
+        :value="value"
+        @change="onChange"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :checkField="checkField"
+        :checkIndeterminateField="checkIndeterminateField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Custom roundness:'"
+      />
+    </span>
+  </div>
+</template>
+<script>
+import {
+  MultiSelectTree,
+  getMultiSelectTreeValue,
+} from '@progress/kendo-vue-dropdowns';
+import {
+  processMultiSelectTreeData,
+  expandedState,
+} from './multiselecttree-data-operations';
+import { data } from './tree-data';
+
+const dataItemKey = 'id';
+const checkField = 'checkField';
+const checkIndeterminateField = 'checkIndeterminateField';
+const subItemsField = 'items';
+const expandField = 'expanded';
+const textField = 'text';
+
+const fields = {
+  dataItemKey,
+  checkField,
+  checkIndeterminateField,
+  expandField,
+  subItemsField,
+};
+
+export default {
+  components: {
+    MultiSelectTree,
+  },
+  data() {
+    return {
+      textField,
+      dataItemKey,
+      checkField,
+      checkIndeterminateField,
+      subItemsField,
+      expandField,
+      dataItems: data,
+      value: [],
+      expanded: [data[0][dataItemKey]],
+    };
+  },
+  computed: {
+    treeData() {
+      return processMultiSelectTreeData(this.dataItems, {
+        expanded: this.expanded,
+        value: this.value,
+        ...fields,
+      });
+    },
+  },
+  methods: {
+    onChange(event) {
+      this.value = getMultiSelectTreeValue(this.dataItems, {
+        ...fields,
+        ...event,
+        value: this.value,
+      });
+    },
+    onExpandChange(event) {
+      this.expanded = expandedState(event.item, dataItemKey, this.expanded);
+    },
+  },
+};
+</script>
+<style>
+.custom-multiselecttree .k-multiselecttree {
+  width: 200px;
+  border-bottom-right-radius: 15px;
+  border-top-left-radius: 15px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/appearance/rounded/multiselecttree-data-operations.js b/vue-options-api-demos/dropdowns/multiselecttree/appearance/rounded/multiselecttree-data-operations.js
new file mode 100644
index 00000000..50ff55a2
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/appearance/rounded/multiselecttree-data-operations.js
@@ -0,0 +1,107 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { getter, setter } from '@progress/kendo-vue-common';
+
+export const getValueMap = (value, idGetter) => {
+    const map = {};
+
+    if (value && value.length) {
+        value.forEach((item) => {
+            map[idGetter(item)] = true;
+        });
+    }
+
+    return map;
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const keyGetter = getter(dataItemKey);
+    const itemKey = keyGetter(item);
+    const index = expanded.findIndex(currentKey => {
+        return currentKey === itemKey;
+    });
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
+
+const mapMultiSelectTreeData = (
+    data,
+    options
+) => {
+    const {
+        keyGetter,
+        subItemGetter,
+        subItemSetter,
+        checkSetter,
+        expandedSetter,
+        checkIndeterminateSetter,
+        valueMap,
+        expandedMap
+    } = options;
+
+    if (!data || !data.length) { return [data, false];}
+
+    let hasChecked = false;
+    const newData = [...data].map(dataItem => {
+        const [children, hasCheckedChildren] = mapMultiSelectTreeData(subItemGetter(dataItem), options);
+
+        const isChecked = valueMap[keyGetter(dataItem)];
+        if (isChecked || hasCheckedChildren) {
+            hasChecked = true;
+        }
+
+        const newItem = { ...dataItem };
+
+        expandedSetter(newItem, expandedMap[keyGetter(newItem)])
+        subItemSetter(newItem, children);
+        checkSetter(newItem, isChecked);
+        checkIndeterminateSetter(newItem, !isChecked && hasCheckedChildren);
+
+        return newItem;
+    });
+
+    return [newData, hasChecked];
+};
+
+/**
+ * Creates a new array with the results of calling the provided callback function
+ * on every element in the provided data tree. The new tree items have their `check` and `checkIndeterminate` fields set.
+ */
+export const processMultiSelectTreeData = (
+    tree,
+    options
+) => {
+    const {
+        subItemsField = 'items',
+        checkField = 'checkField',
+        checkIndeterminateField = 'checkIndeterminateField',
+        expandField = 'expanded',
+        dataItemKey,
+        value,
+        filter,
+        expanded
+    } = options;
+
+    const keyGetter = getter(dataItemKey);
+    const filtering = Boolean(filter && filter.value);
+    const expandedMap = {};
+
+    expanded.forEach((id) => expandedMap[id] = true);
+
+    const [result] = mapMultiSelectTreeData(
+        tree,
+        {
+            valueMap: getValueMap(value, keyGetter),
+            expandedMap: expandedMap,
+            keyGetter,
+            expandedSetter: setter(expandField),
+            subItemGetter: getter(subItemsField),
+            subItemSetter: setter(subItemsField),
+            checkSetter: setter(checkField),
+            checkIndeterminateSetter: setter(checkIndeterminateField)
+        }
+    );
+
+    return filtering ? filterBy(result, [ filter ], subItemsField) : result;
+};
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/appearance/rounded/tree-data.js b/vue-options-api-demos/dropdowns/multiselecttree/appearance/rounded/tree-data.js
new file mode 100644
index 00000000..5b749471
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/appearance/rounded/tree-data.js
@@ -0,0 +1,15 @@
+export const data = [
+    {
+        text: 'Furniture', id: 1, items: [
+            { text: 'Tables & Chairs', id: 2 },
+            { text: 'Sofas', id: 3 },
+            { text: 'Occasional Furniture', id: 4 }
+        ]
+    }, {
+        text: 'Decor', id: 5, items: [
+            { text: 'Bed Linen', id: 6 },
+            { text: 'Curtains & Blinds', id: 7 },
+            { text: 'Carpets', id: 8 }
+        ]
+    }
+];
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/appearance/size/main.js b/vue-options-api-demos/dropdowns/multiselecttree/appearance/size/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/appearance/size/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/appearance/size/main.vue b/vue-options-api-demos/dropdowns/multiselecttree/appearance/size/main.vue
new file mode 100644
index 00000000..3297046a
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/appearance/size/main.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="demo">
+    <span class="wrapper">
+      <MultiSelectTree
+        :style="{ width: '170px' }"
+        :dataItems="treeData"
+        :size="'small'"
+        :value="value"
+        @change="onChange"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :checkField="checkField"
+        :checkIndeterminateField="checkIndeterminateField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Small'"
+      />
+    </span>
+    <span class="wrapper">
+      <MultiSelectTree
+        :style="{ width: '170px' }"
+        :dataItems="treeData"
+        :size="'medium'"
+        :value="value"
+        @change="onChange"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :checkField="checkField"
+        :checkIndeterminateField="checkIndeterminateField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Medium:'"
+      />
+    </span>
+    <span class="wrapper">
+      <MultiSelectTree
+        :style="{ width: '170px' }"
+        :dataItems="treeData"
+        :size="'large'"
+        :value="value"
+        @change="onChange"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :checkField="checkField"
+        :checkIndeterminateField="checkIndeterminateField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Large:'"
+      />
+    </span>
+  </div>
+</template>
+<script>
+import {
+  MultiSelectTree,
+  getMultiSelectTreeValue,
+} from '@progress/kendo-vue-dropdowns';
+import {
+  processMultiSelectTreeData,
+  expandedState,
+} from './multiselecttree-data-operations';
+import { data } from './tree-data';
+
+const dataItemKey = 'id';
+const checkField = 'checkField';
+const checkIndeterminateField = 'checkIndeterminateField';
+const subItemsField = 'items';
+const expandField = 'expanded';
+const textField = 'text';
+
+const fields = {
+  dataItemKey,
+  checkField,
+  checkIndeterminateField,
+  expandField,
+  subItemsField,
+};
+
+export default {
+  components: {
+    MultiSelectTree,
+  },
+  data() {
+    return {
+      textField,
+      dataItemKey,
+      checkField,
+      checkIndeterminateField,
+      subItemsField,
+      expandField,
+      dataItems: data,
+      value: [],
+      expanded: [data[0][dataItemKey]],
+    };
+  },
+  computed: {
+    treeData() {
+      return processMultiSelectTreeData(this.dataItems, {
+        expanded: this.expanded,
+        value: this.value,
+        ...fields,
+      });
+    },
+  },
+  methods: {
+    onChange(event) {
+      this.value = getMultiSelectTreeValue(this.dataItems, {
+        ...fields,
+        ...event,
+        value: this.value,
+      });
+    },
+    onExpandChange(event) {
+      this.expanded = expandedState(event.item, dataItemKey, this.expanded);
+    },
+  },
+};
+</script>
+<style>
+.custom-multiselect {
+  height: 40px;
+  width: 200px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/appearance/size/multiselecttree-data-operations.js b/vue-options-api-demos/dropdowns/multiselecttree/appearance/size/multiselecttree-data-operations.js
new file mode 100644
index 00000000..50ff55a2
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/appearance/size/multiselecttree-data-operations.js
@@ -0,0 +1,107 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { getter, setter } from '@progress/kendo-vue-common';
+
+export const getValueMap = (value, idGetter) => {
+    const map = {};
+
+    if (value && value.length) {
+        value.forEach((item) => {
+            map[idGetter(item)] = true;
+        });
+    }
+
+    return map;
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const keyGetter = getter(dataItemKey);
+    const itemKey = keyGetter(item);
+    const index = expanded.findIndex(currentKey => {
+        return currentKey === itemKey;
+    });
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
+
+const mapMultiSelectTreeData = (
+    data,
+    options
+) => {
+    const {
+        keyGetter,
+        subItemGetter,
+        subItemSetter,
+        checkSetter,
+        expandedSetter,
+        checkIndeterminateSetter,
+        valueMap,
+        expandedMap
+    } = options;
+
+    if (!data || !data.length) { return [data, false];}
+
+    let hasChecked = false;
+    const newData = [...data].map(dataItem => {
+        const [children, hasCheckedChildren] = mapMultiSelectTreeData(subItemGetter(dataItem), options);
+
+        const isChecked = valueMap[keyGetter(dataItem)];
+        if (isChecked || hasCheckedChildren) {
+            hasChecked = true;
+        }
+
+        const newItem = { ...dataItem };
+
+        expandedSetter(newItem, expandedMap[keyGetter(newItem)])
+        subItemSetter(newItem, children);
+        checkSetter(newItem, isChecked);
+        checkIndeterminateSetter(newItem, !isChecked && hasCheckedChildren);
+
+        return newItem;
+    });
+
+    return [newData, hasChecked];
+};
+
+/**
+ * Creates a new array with the results of calling the provided callback function
+ * on every element in the provided data tree. The new tree items have their `check` and `checkIndeterminate` fields set.
+ */
+export const processMultiSelectTreeData = (
+    tree,
+    options
+) => {
+    const {
+        subItemsField = 'items',
+        checkField = 'checkField',
+        checkIndeterminateField = 'checkIndeterminateField',
+        expandField = 'expanded',
+        dataItemKey,
+        value,
+        filter,
+        expanded
+    } = options;
+
+    const keyGetter = getter(dataItemKey);
+    const filtering = Boolean(filter && filter.value);
+    const expandedMap = {};
+
+    expanded.forEach((id) => expandedMap[id] = true);
+
+    const [result] = mapMultiSelectTreeData(
+        tree,
+        {
+            valueMap: getValueMap(value, keyGetter),
+            expandedMap: expandedMap,
+            keyGetter,
+            expandedSetter: setter(expandField),
+            subItemGetter: getter(subItemsField),
+            subItemSetter: setter(subItemsField),
+            checkSetter: setter(checkField),
+            checkIndeterminateSetter: setter(checkIndeterminateField)
+        }
+    );
+
+    return filtering ? filterBy(result, [ filter ], subItemsField) : result;
+};
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/appearance/size/tree-data.js b/vue-options-api-demos/dropdowns/multiselecttree/appearance/size/tree-data.js
new file mode 100644
index 00000000..5b749471
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/appearance/size/tree-data.js
@@ -0,0 +1,15 @@
+export const data = [
+    {
+        text: 'Furniture', id: 1, items: [
+            { text: 'Tables & Chairs', id: 2 },
+            { text: 'Sofas', id: 3 },
+            { text: 'Occasional Furniture', id: 4 }
+        ]
+    }, {
+        text: 'Decor', id: 5, items: [
+            { text: 'Bed Linen', id: 6 },
+            { text: 'Curtains & Blinds', id: 7 },
+            { text: 'Carpets', id: 8 }
+        ]
+    }
+];
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/basic/main.js b/vue-options-api-demos/dropdowns/multiselecttree/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/basic/main.vue b/vue-options-api-demos/dropdowns/multiselecttree/basic/main.vue
new file mode 100644
index 00000000..8b6de934
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/basic/main.vue
@@ -0,0 +1,73 @@
+<template>
+    <div>
+        <MultiSelectTree
+          :style="{ width: '300px' }"
+          :dataItems="treeData"
+          v-model="value"
+          :placeholder="'Please select ...'"
+          :textField="textField"
+          :dataItemKey="dataItemKey"
+          :checkField="checkField"
+          :checkIndeterminateField="checkIndeterminateField"
+          :subItemsField="subItemsField"
+          :expandField="expandField"
+          @expandchange="onExpandChange"
+          :label="'Category'"
+        />
+      </div>
+  </template>
+  <script>
+  import {
+    MultiSelectTree,
+  } from "@progress/kendo-vue-dropdowns";
+  import {
+    processMultiSelectTreeData,
+    expandedState,
+  } from "./multiselecttree-data-operations";
+  import { data } from "./tree-data";
+  
+  const dataItemKey = "id";
+  const checkField = "checkField";
+  const checkIndeterminateField = "checkIndeterminateField";
+  const subItemsField = "items";
+  const expandField = "expanded";
+  const textField = "text";
+  
+  const fields = {
+    dataItemKey,
+    checkField,
+    checkIndeterminateField,
+    expandField,
+    subItemsField,
+  };
+  
+  export default {
+    components: {
+      MultiSelectTree
+    },
+    data: function () {
+      return {
+        textField,
+        dataItemKey,
+        checkField,
+        checkIndeterminateField,
+        subItemsField,
+        expandField,
+        dataItems: data,
+        value: [],
+        expanded: [data[0][dataItemKey]]
+      };
+    },
+    computed: {
+      treeData () {
+        return  processMultiSelectTreeData(this.dataItems, { expanded: this.expanded, value: this.value, ...fields })
+      }
+    },
+    methods: {
+      onExpandChange (event) {
+          this.expanded = (expandedState(event.item, dataItemKey, this.expanded))
+      }
+    }
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/basic/multiselecttree-data-operations.js b/vue-options-api-demos/dropdowns/multiselecttree/basic/multiselecttree-data-operations.js
new file mode 100644
index 00000000..50ff55a2
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/basic/multiselecttree-data-operations.js
@@ -0,0 +1,107 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { getter, setter } from '@progress/kendo-vue-common';
+
+export const getValueMap = (value, idGetter) => {
+    const map = {};
+
+    if (value && value.length) {
+        value.forEach((item) => {
+            map[idGetter(item)] = true;
+        });
+    }
+
+    return map;
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const keyGetter = getter(dataItemKey);
+    const itemKey = keyGetter(item);
+    const index = expanded.findIndex(currentKey => {
+        return currentKey === itemKey;
+    });
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
+
+const mapMultiSelectTreeData = (
+    data,
+    options
+) => {
+    const {
+        keyGetter,
+        subItemGetter,
+        subItemSetter,
+        checkSetter,
+        expandedSetter,
+        checkIndeterminateSetter,
+        valueMap,
+        expandedMap
+    } = options;
+
+    if (!data || !data.length) { return [data, false];}
+
+    let hasChecked = false;
+    const newData = [...data].map(dataItem => {
+        const [children, hasCheckedChildren] = mapMultiSelectTreeData(subItemGetter(dataItem), options);
+
+        const isChecked = valueMap[keyGetter(dataItem)];
+        if (isChecked || hasCheckedChildren) {
+            hasChecked = true;
+        }
+
+        const newItem = { ...dataItem };
+
+        expandedSetter(newItem, expandedMap[keyGetter(newItem)])
+        subItemSetter(newItem, children);
+        checkSetter(newItem, isChecked);
+        checkIndeterminateSetter(newItem, !isChecked && hasCheckedChildren);
+
+        return newItem;
+    });
+
+    return [newData, hasChecked];
+};
+
+/**
+ * Creates a new array with the results of calling the provided callback function
+ * on every element in the provided data tree. The new tree items have their `check` and `checkIndeterminate` fields set.
+ */
+export const processMultiSelectTreeData = (
+    tree,
+    options
+) => {
+    const {
+        subItemsField = 'items',
+        checkField = 'checkField',
+        checkIndeterminateField = 'checkIndeterminateField',
+        expandField = 'expanded',
+        dataItemKey,
+        value,
+        filter,
+        expanded
+    } = options;
+
+    const keyGetter = getter(dataItemKey);
+    const filtering = Boolean(filter && filter.value);
+    const expandedMap = {};
+
+    expanded.forEach((id) => expandedMap[id] = true);
+
+    const [result] = mapMultiSelectTreeData(
+        tree,
+        {
+            valueMap: getValueMap(value, keyGetter),
+            expandedMap: expandedMap,
+            keyGetter,
+            expandedSetter: setter(expandField),
+            subItemGetter: getter(subItemsField),
+            subItemSetter: setter(subItemsField),
+            checkSetter: setter(checkField),
+            checkIndeterminateSetter: setter(checkIndeterminateField)
+        }
+    );
+
+    return filtering ? filterBy(result, [ filter ], subItemsField) : result;
+};
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/basic/tree-data.js b/vue-options-api-demos/dropdowns/multiselecttree/basic/tree-data.js
new file mode 100644
index 00000000..5b749471
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/basic/tree-data.js
@@ -0,0 +1,15 @@
+export const data = [
+    {
+        text: 'Furniture', id: 1, items: [
+            { text: 'Tables & Chairs', id: 2 },
+            { text: 'Sofas', id: 3 },
+            { text: 'Occasional Furniture', id: 4 }
+        ]
+    }, {
+        text: 'Decor', id: 5, items: [
+            { text: 'Bed Linen', id: 6 },
+            { text: 'Curtains & Blinds', id: 7 },
+            { text: 'Carpets', id: 8 }
+        ]
+    }
+];
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/binding/main.js b/vue-options-api-demos/dropdowns/multiselecttree/binding/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/binding/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/binding/main.vue b/vue-options-api-demos/dropdowns/multiselecttree/binding/main.vue
new file mode 100644
index 00000000..fa29c63d
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/binding/main.vue
@@ -0,0 +1,78 @@
+<template>
+    <div>
+      <MultiSelectTree
+        :style="{ width: '300px' }"
+        :dataItems="treeData"
+        :value="value"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :checkField="checkField"
+        :checkIndeterminateField="checkIndeterminateField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        @change="onChange"
+      />
+    </div>
+  </template>
+  <script>
+  import { MultiSelectTree } from '@progress/kendo-vue-dropdowns';
+  import {
+    processMultiSelectTreeData,
+    expandedState,
+  } from './multiselecttree-data-operations';
+  import { data } from './tree-data';
+  
+  const dataItemKey = 'id';
+  const checkField = 'checkField';
+  const checkIndeterminateField = 'checkIndeterminateField';
+  const subItemsField = 'items';
+  const expandField = 'expanded';
+  const textField = 'text';
+  
+  const fields = {
+    dataItemKey,
+    checkField,
+    checkIndeterminateField,
+    expandField,
+    subItemsField,
+  };
+  
+  export default {
+    components: {
+      MultiSelectTree,
+    },
+    data: function () {
+      return {
+        textField,
+        dataItemKey,
+        checkField,
+        checkIndeterminateField,
+        subItemsField,
+        expandField,
+        dataItems: data,
+        value: [],
+        expanded: [data[0][dataItemKey]],
+      };
+    },
+    computed: {
+      treeData() {
+        return processMultiSelectTreeData(this.dataItems, {
+          expanded: this.expanded,
+          value: this.value,
+          ...fields,
+        });
+      },
+    },
+    methods: {
+      onChange(event) {
+        this.value = event.value;
+      },
+      onExpandChange(event) {
+        this.expanded = expandedState(event.item, dataItemKey, this.expanded);
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/binding/multiselecttree-data-operations.js b/vue-options-api-demos/dropdowns/multiselecttree/binding/multiselecttree-data-operations.js
new file mode 100644
index 00000000..50ff55a2
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/binding/multiselecttree-data-operations.js
@@ -0,0 +1,107 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { getter, setter } from '@progress/kendo-vue-common';
+
+export const getValueMap = (value, idGetter) => {
+    const map = {};
+
+    if (value && value.length) {
+        value.forEach((item) => {
+            map[idGetter(item)] = true;
+        });
+    }
+
+    return map;
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const keyGetter = getter(dataItemKey);
+    const itemKey = keyGetter(item);
+    const index = expanded.findIndex(currentKey => {
+        return currentKey === itemKey;
+    });
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
+
+const mapMultiSelectTreeData = (
+    data,
+    options
+) => {
+    const {
+        keyGetter,
+        subItemGetter,
+        subItemSetter,
+        checkSetter,
+        expandedSetter,
+        checkIndeterminateSetter,
+        valueMap,
+        expandedMap
+    } = options;
+
+    if (!data || !data.length) { return [data, false];}
+
+    let hasChecked = false;
+    const newData = [...data].map(dataItem => {
+        const [children, hasCheckedChildren] = mapMultiSelectTreeData(subItemGetter(dataItem), options);
+
+        const isChecked = valueMap[keyGetter(dataItem)];
+        if (isChecked || hasCheckedChildren) {
+            hasChecked = true;
+        }
+
+        const newItem = { ...dataItem };
+
+        expandedSetter(newItem, expandedMap[keyGetter(newItem)])
+        subItemSetter(newItem, children);
+        checkSetter(newItem, isChecked);
+        checkIndeterminateSetter(newItem, !isChecked && hasCheckedChildren);
+
+        return newItem;
+    });
+
+    return [newData, hasChecked];
+};
+
+/**
+ * Creates a new array with the results of calling the provided callback function
+ * on every element in the provided data tree. The new tree items have their `check` and `checkIndeterminate` fields set.
+ */
+export const processMultiSelectTreeData = (
+    tree,
+    options
+) => {
+    const {
+        subItemsField = 'items',
+        checkField = 'checkField',
+        checkIndeterminateField = 'checkIndeterminateField',
+        expandField = 'expanded',
+        dataItemKey,
+        value,
+        filter,
+        expanded
+    } = options;
+
+    const keyGetter = getter(dataItemKey);
+    const filtering = Boolean(filter && filter.value);
+    const expandedMap = {};
+
+    expanded.forEach((id) => expandedMap[id] = true);
+
+    const [result] = mapMultiSelectTreeData(
+        tree,
+        {
+            valueMap: getValueMap(value, keyGetter),
+            expandedMap: expandedMap,
+            keyGetter,
+            expandedSetter: setter(expandField),
+            subItemGetter: getter(subItemsField),
+            subItemSetter: setter(subItemsField),
+            checkSetter: setter(checkField),
+            checkIndeterminateSetter: setter(checkIndeterminateField)
+        }
+    );
+
+    return filtering ? filterBy(result, [ filter ], subItemsField) : result;
+};
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/binding/tree-data.js b/vue-options-api-demos/dropdowns/multiselecttree/binding/tree-data.js
new file mode 100644
index 00000000..5b749471
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/binding/tree-data.js
@@ -0,0 +1,15 @@
+export const data = [
+    {
+        text: 'Furniture', id: 1, items: [
+            { text: 'Tables & Chairs', id: 2 },
+            { text: 'Sofas', id: 3 },
+            { text: 'Occasional Furniture', id: 4 }
+        ]
+    }, {
+        text: 'Decor', id: 5, items: [
+            { text: 'Bed Linen', id: 6 },
+            { text: 'Curtains & Blinds', id: 7 },
+            { text: 'Carpets', id: 8 }
+        ]
+    }
+];
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/controlled/main.js b/vue-options-api-demos/dropdowns/multiselecttree/controlled/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/controlled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/controlled/main.vue b/vue-options-api-demos/dropdowns/multiselecttree/controlled/main.vue
new file mode 100644
index 00000000..513fd636
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/controlled/main.vue
@@ -0,0 +1,98 @@
+<template>
+    <div>
+      <div class="example-config">MultiSelectTree Value: {{ value }}</div>
+      <div :style="{ display: 'inline-block', 'padding-right': '20px' }">
+        <p>Value property + change event</p>
+        <MultiSelectTree
+          :style="{ width: '300px' }"
+          :dataItems="treeData"
+          :value="value"
+          :placeholder="'Please select ...'"
+          :textField="textField"
+          :dataItemKey="dataItemKey"
+          :checkField="checkField"
+          :checkIndeterminateField="checkIndeterminateField"
+          :subItemsField="subItemsField"
+          :expandField="expandField"
+          @expandchange="onExpandChange"
+          @change="onChange"
+        />
+      </div>
+      <div :style="{ display: 'inline-block' }">
+        <p>v-model</p>
+        <MultiSelectTree
+          :style="{ width: '300px' }"
+          :dataItems="treeData"
+          v-model="value"
+          :placeholder="'Please select ...'"
+          :textField="textField"
+          :dataItemKey="dataItemKey"
+          :checkField="checkField"
+          :checkIndeterminateField="checkIndeterminateField"
+          :subItemsField="subItemsField"
+          :expandField="expandField"
+          @expandchange="onExpandChange"
+        />
+      </div>
+    </div>
+  </template>
+  <script>
+  import { MultiSelectTree } from '@progress/kendo-vue-dropdowns';
+  import {
+    processMultiSelectTreeData,
+    expandedState,
+  } from './multiselecttree-data-operations';
+  import { data } from './tree-data';
+  
+  const dataItemKey = 'id';
+  const checkField = 'checkField';
+  const checkIndeterminateField = 'checkIndeterminateField';
+  const subItemsField = 'items';
+  const expandField = 'expanded';
+  const textField = 'text';
+  
+  const fields = {
+    dataItemKey,
+    checkField,
+    checkIndeterminateField,
+    expandField,
+    subItemsField,
+  };
+  
+  export default {
+    components: {
+      MultiSelectTree,
+    },
+    data: function () {
+      return {
+        textField,
+        dataItemKey,
+        checkField,
+        checkIndeterminateField,
+        subItemsField,
+        expandField,
+        dataItems: data,
+        value: [],
+        expanded: [data[0][dataItemKey]],
+      };
+    },
+    computed: {
+      treeData() {
+        return processMultiSelectTreeData(this.dataItems, {
+          expanded: this.expanded,
+          value: this.value,
+          ...fields,
+        });
+      },
+    },
+    methods: {
+      onChange(event) {
+        this.value = event.value;
+      },
+      onExpandChange(event) {
+        this.expanded = expandedState(event.item, dataItemKey, this.expanded);
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/controlled/multiselecttree-data-operations.js b/vue-options-api-demos/dropdowns/multiselecttree/controlled/multiselecttree-data-operations.js
new file mode 100644
index 00000000..50ff55a2
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/controlled/multiselecttree-data-operations.js
@@ -0,0 +1,107 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { getter, setter } from '@progress/kendo-vue-common';
+
+export const getValueMap = (value, idGetter) => {
+    const map = {};
+
+    if (value && value.length) {
+        value.forEach((item) => {
+            map[idGetter(item)] = true;
+        });
+    }
+
+    return map;
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const keyGetter = getter(dataItemKey);
+    const itemKey = keyGetter(item);
+    const index = expanded.findIndex(currentKey => {
+        return currentKey === itemKey;
+    });
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
+
+const mapMultiSelectTreeData = (
+    data,
+    options
+) => {
+    const {
+        keyGetter,
+        subItemGetter,
+        subItemSetter,
+        checkSetter,
+        expandedSetter,
+        checkIndeterminateSetter,
+        valueMap,
+        expandedMap
+    } = options;
+
+    if (!data || !data.length) { return [data, false];}
+
+    let hasChecked = false;
+    const newData = [...data].map(dataItem => {
+        const [children, hasCheckedChildren] = mapMultiSelectTreeData(subItemGetter(dataItem), options);
+
+        const isChecked = valueMap[keyGetter(dataItem)];
+        if (isChecked || hasCheckedChildren) {
+            hasChecked = true;
+        }
+
+        const newItem = { ...dataItem };
+
+        expandedSetter(newItem, expandedMap[keyGetter(newItem)])
+        subItemSetter(newItem, children);
+        checkSetter(newItem, isChecked);
+        checkIndeterminateSetter(newItem, !isChecked && hasCheckedChildren);
+
+        return newItem;
+    });
+
+    return [newData, hasChecked];
+};
+
+/**
+ * Creates a new array with the results of calling the provided callback function
+ * on every element in the provided data tree. The new tree items have their `check` and `checkIndeterminate` fields set.
+ */
+export const processMultiSelectTreeData = (
+    tree,
+    options
+) => {
+    const {
+        subItemsField = 'items',
+        checkField = 'checkField',
+        checkIndeterminateField = 'checkIndeterminateField',
+        expandField = 'expanded',
+        dataItemKey,
+        value,
+        filter,
+        expanded
+    } = options;
+
+    const keyGetter = getter(dataItemKey);
+    const filtering = Boolean(filter && filter.value);
+    const expandedMap = {};
+
+    expanded.forEach((id) => expandedMap[id] = true);
+
+    const [result] = mapMultiSelectTreeData(
+        tree,
+        {
+            valueMap: getValueMap(value, keyGetter),
+            expandedMap: expandedMap,
+            keyGetter,
+            expandedSetter: setter(expandField),
+            subItemGetter: getter(subItemsField),
+            subItemSetter: setter(subItemsField),
+            checkSetter: setter(checkField),
+            checkIndeterminateSetter: setter(checkIndeterminateField)
+        }
+    );
+
+    return filtering ? filterBy(result, [ filter ], subItemsField) : result;
+};
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/controlled/tree-data.js b/vue-options-api-demos/dropdowns/multiselecttree/controlled/tree-data.js
new file mode 100644
index 00000000..5b749471
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/controlled/tree-data.js
@@ -0,0 +1,15 @@
+export const data = [
+    {
+        text: 'Furniture', id: 1, items: [
+            { text: 'Tables & Chairs', id: 2 },
+            { text: 'Sofas', id: 3 },
+            { text: 'Occasional Furniture', id: 4 }
+        ]
+    }, {
+        text: 'Decor', id: 5, items: [
+            { text: 'Bed Linen', id: 6 },
+            { text: 'Curtains & Blinds', id: 7 },
+            { text: 'Carpets', id: 8 }
+        ]
+    }
+];
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/custom-rendering/main.js b/vue-options-api-demos/dropdowns/multiselecttree/custom-rendering/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/custom-rendering/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/custom-rendering/main.vue b/vue-options-api-demos/dropdowns/multiselecttree/custom-rendering/main.vue
new file mode 100644
index 00000000..fd99cdcb
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/custom-rendering/main.vue
@@ -0,0 +1,107 @@
+<template>
+  <div>
+      <MultiSelectTree
+        :style="{ width: '300px' }"
+        :dataItems="treeData"
+        :value="value"
+        @change="onChange"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :checkField="checkField"
+        :checkIndeterminateField="checkIndeterminateField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Category'"
+        :item="'item'"
+        :tag="'tag'"
+      >
+      <template v-slot:item="{ props }">
+        <span>
+          <span :class="iconClassName(props.item)" />
+          {{ props.item.text }}
+        </span>
+      </template>
+      <template v-slot:tag="{props}">
+            <li class="k-chip">
+              <span :class="iconClassName(props.tagData.data[0])"  />
+                <span class="custom-tag"></span> - {{props.tagData.text}}
+            </li>
+        </template>
+    </MultiSelectTree>
+    </div>
+</template>
+<script>
+import {
+  MultiSelectTree,
+  getMultiSelectTreeValue,
+} from "@progress/kendo-vue-dropdowns";
+import {
+  processMultiSelectTreeData,
+  expandedState,
+} from "./multiselecttree-data-operations";
+import { data } from "./tree-files-data";
+const is = (fileName, ext) => new RegExp(`.${ext}\$`).test(fileName);
+
+const dataItemKey = "id";
+const checkField = "checkField";
+const checkIndeterminateField = "checkIndeterminateField";
+const subItemsField = "items";
+const expandField = "expanded";
+const textField = "text";
+
+const fields = {
+  dataItemKey,
+  checkField,
+  checkIndeterminateField,
+  expandField,
+  subItemsField,
+};
+
+export default {
+  components: {
+    MultiSelectTree
+  },
+  data: function () {
+    return {
+      textField,
+      dataItemKey,
+      checkField,
+      checkIndeterminateField,
+      subItemsField,
+      expandField,
+      dataItems: data,
+      value: [],
+      expanded: [data[0][dataItemKey]]
+    };
+  },
+  computed: {
+    treeData () {
+      return  processMultiSelectTreeData(this.dataItems, { expanded: this.expanded, value: this.value, ...fields })
+    }
+  },
+  methods: {
+    iconClassName({ text, items }) {
+      console.log(text, items)
+      if (items !== undefined) {
+        return 'k-icon k-i-folder';
+      } else if (is(text, 'pdf')) {
+        return 'k-icon k-i-file-pdf';
+      } else if (is(text, 'html')) {
+        return 'k-icon k-i-html';
+      } else if (is(text, 'jpg|png')) {
+        return 'k-icon k-i-image';
+      } else {
+        return '';
+      }
+    },
+    onChange (event) {
+      this.value = (getMultiSelectTreeValue(this.dataItems, { ...fields, ...event, value: this.value }));
+    },
+    onExpandChange (event) {
+        this.expanded = (expandedState(event.item, dataItemKey, this.expanded))
+    }
+  }
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/custom-rendering/multiselecttree-data-operations.js b/vue-options-api-demos/dropdowns/multiselecttree/custom-rendering/multiselecttree-data-operations.js
new file mode 100644
index 00000000..50ff55a2
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/custom-rendering/multiselecttree-data-operations.js
@@ -0,0 +1,107 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { getter, setter } from '@progress/kendo-vue-common';
+
+export const getValueMap = (value, idGetter) => {
+    const map = {};
+
+    if (value && value.length) {
+        value.forEach((item) => {
+            map[idGetter(item)] = true;
+        });
+    }
+
+    return map;
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const keyGetter = getter(dataItemKey);
+    const itemKey = keyGetter(item);
+    const index = expanded.findIndex(currentKey => {
+        return currentKey === itemKey;
+    });
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
+
+const mapMultiSelectTreeData = (
+    data,
+    options
+) => {
+    const {
+        keyGetter,
+        subItemGetter,
+        subItemSetter,
+        checkSetter,
+        expandedSetter,
+        checkIndeterminateSetter,
+        valueMap,
+        expandedMap
+    } = options;
+
+    if (!data || !data.length) { return [data, false];}
+
+    let hasChecked = false;
+    const newData = [...data].map(dataItem => {
+        const [children, hasCheckedChildren] = mapMultiSelectTreeData(subItemGetter(dataItem), options);
+
+        const isChecked = valueMap[keyGetter(dataItem)];
+        if (isChecked || hasCheckedChildren) {
+            hasChecked = true;
+        }
+
+        const newItem = { ...dataItem };
+
+        expandedSetter(newItem, expandedMap[keyGetter(newItem)])
+        subItemSetter(newItem, children);
+        checkSetter(newItem, isChecked);
+        checkIndeterminateSetter(newItem, !isChecked && hasCheckedChildren);
+
+        return newItem;
+    });
+
+    return [newData, hasChecked];
+};
+
+/**
+ * Creates a new array with the results of calling the provided callback function
+ * on every element in the provided data tree. The new tree items have their `check` and `checkIndeterminate` fields set.
+ */
+export const processMultiSelectTreeData = (
+    tree,
+    options
+) => {
+    const {
+        subItemsField = 'items',
+        checkField = 'checkField',
+        checkIndeterminateField = 'checkIndeterminateField',
+        expandField = 'expanded',
+        dataItemKey,
+        value,
+        filter,
+        expanded
+    } = options;
+
+    const keyGetter = getter(dataItemKey);
+    const filtering = Boolean(filter && filter.value);
+    const expandedMap = {};
+
+    expanded.forEach((id) => expandedMap[id] = true);
+
+    const [result] = mapMultiSelectTreeData(
+        tree,
+        {
+            valueMap: getValueMap(value, keyGetter),
+            expandedMap: expandedMap,
+            keyGetter,
+            expandedSetter: setter(expandField),
+            subItemGetter: getter(subItemsField),
+            subItemSetter: setter(subItemsField),
+            checkSetter: setter(checkField),
+            checkIndeterminateSetter: setter(checkIndeterminateField)
+        }
+    );
+
+    return filtering ? filterBy(result, [ filter ], subItemsField) : result;
+};
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/custom-rendering/tree-files-data.js b/vue-options-api-demos/dropdowns/multiselecttree/custom-rendering/tree-files-data.js
new file mode 100644
index 00000000..4fc5bfec
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/custom-rendering/tree-files-data.js
@@ -0,0 +1,28 @@
+export const data = [ {
+    text: 'My Documents', id: 1,
+    items: [
+        {
+            text: 'Kendo UI for Vue Project', id: 2,
+            items: [
+                { text: 'about.html', id: 3 },
+                { text: 'index.html', id: 4 },
+                { text: 'logo.png', id: 5 }
+            ]
+        },
+        {
+            text: 'New Web Site', id: 6,
+            items: [
+                { text: 'mockup.jpg', id: 7 },
+                { text: 'Research.pdf', id: 8 }
+            ]
+        },
+        {
+            text: 'Reports', id: 9,
+            items: [
+                { text: 'February.pdf', id: 10 },
+                { text: 'March.pdf', id: 11 },
+                { text: 'April.pdf', id: 12 }
+            ]
+        }
+    ]
+} ];
\ No newline at end of file
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/filtering-with-delay/main.js b/vue-options-api-demos/dropdowns/multiselecttree/filtering-with-delay/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/filtering-with-delay/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/filtering-with-delay/main.vue b/vue-options-api-demos/dropdowns/multiselecttree/filtering-with-delay/main.vue
new file mode 100644
index 00000000..7a99de47
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/filtering-with-delay/main.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+      <MultiSelectTree
+        :style="{ width: '300px' }"
+        :dataItems="treeData"
+        :value="value"
+        @change="onChange"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :checkField="checkField"
+        :checkIndeterminateField="checkIndeterminateField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :loading="loading"
+        :label="'Category'"
+        :filterable="true"
+        @filterchange="onFilterChange"
+      />
+    </div>
+</template>
+<script>
+import {
+  MultiSelectTree,
+  getMultiSelectTreeValue,
+} from "@progress/kendo-vue-dropdowns";
+import {
+  processMultiSelectTreeData,
+  expandedState,
+} from "./multiselecttree-data-operations";
+import { data } from "./tree-data";
+
+const dataItemKey = "id";
+const checkField = "checkField";
+const checkIndeterminateField = "checkIndeterminateField";
+const subItemsField = "items";
+const expandField = "expanded";
+const textField = "text";
+
+const fields = {
+  dataItemKey,
+  checkField,
+  checkIndeterminateField,
+  expandField,
+  subItemsField,
+};
+
+export default {
+  components: {
+    MultiSelectTree
+  },
+  data: function () {
+    return {
+      loading: false,
+      textField,
+      dataItemKey,
+      checkField,
+      checkIndeterminateField,
+      subItemsField,
+      expandField,
+      dataItems: data,
+      value: [],
+      expanded: [data[0][dataItemKey]],
+      filter: null
+    };
+  },
+  computed: {
+    treeData () {
+      return  processMultiSelectTreeData(this.dataItems, { 
+        expanded: this.expanded, 
+        filter: this.filter, 
+        value: this.value, ...fields })
+    }
+  },
+  methods: {
+    onFilterChange(event) {
+      this.loading = true;
+      setTimeout(() => {
+          this.loading = false;
+          this.filter = event.filter;
+      }, 200);
+    },
+    onChange (event) {
+      this.value = (getMultiSelectTreeValue(this.dataItems, { ...fields, ...event, value: this.value }));
+    },
+    onExpandChange (event) {
+        this.expanded = (expandedState(event.item, dataItemKey, this.expanded))
+    }
+  }
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/filtering-with-delay/multiselecttree-data-operations.js b/vue-options-api-demos/dropdowns/multiselecttree/filtering-with-delay/multiselecttree-data-operations.js
new file mode 100644
index 00000000..50ff55a2
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/filtering-with-delay/multiselecttree-data-operations.js
@@ -0,0 +1,107 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { getter, setter } from '@progress/kendo-vue-common';
+
+export const getValueMap = (value, idGetter) => {
+    const map = {};
+
+    if (value && value.length) {
+        value.forEach((item) => {
+            map[idGetter(item)] = true;
+        });
+    }
+
+    return map;
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const keyGetter = getter(dataItemKey);
+    const itemKey = keyGetter(item);
+    const index = expanded.findIndex(currentKey => {
+        return currentKey === itemKey;
+    });
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
+
+const mapMultiSelectTreeData = (
+    data,
+    options
+) => {
+    const {
+        keyGetter,
+        subItemGetter,
+        subItemSetter,
+        checkSetter,
+        expandedSetter,
+        checkIndeterminateSetter,
+        valueMap,
+        expandedMap
+    } = options;
+
+    if (!data || !data.length) { return [data, false];}
+
+    let hasChecked = false;
+    const newData = [...data].map(dataItem => {
+        const [children, hasCheckedChildren] = mapMultiSelectTreeData(subItemGetter(dataItem), options);
+
+        const isChecked = valueMap[keyGetter(dataItem)];
+        if (isChecked || hasCheckedChildren) {
+            hasChecked = true;
+        }
+
+        const newItem = { ...dataItem };
+
+        expandedSetter(newItem, expandedMap[keyGetter(newItem)])
+        subItemSetter(newItem, children);
+        checkSetter(newItem, isChecked);
+        checkIndeterminateSetter(newItem, !isChecked && hasCheckedChildren);
+
+        return newItem;
+    });
+
+    return [newData, hasChecked];
+};
+
+/**
+ * Creates a new array with the results of calling the provided callback function
+ * on every element in the provided data tree. The new tree items have their `check` and `checkIndeterminate` fields set.
+ */
+export const processMultiSelectTreeData = (
+    tree,
+    options
+) => {
+    const {
+        subItemsField = 'items',
+        checkField = 'checkField',
+        checkIndeterminateField = 'checkIndeterminateField',
+        expandField = 'expanded',
+        dataItemKey,
+        value,
+        filter,
+        expanded
+    } = options;
+
+    const keyGetter = getter(dataItemKey);
+    const filtering = Boolean(filter && filter.value);
+    const expandedMap = {};
+
+    expanded.forEach((id) => expandedMap[id] = true);
+
+    const [result] = mapMultiSelectTreeData(
+        tree,
+        {
+            valueMap: getValueMap(value, keyGetter),
+            expandedMap: expandedMap,
+            keyGetter,
+            expandedSetter: setter(expandField),
+            subItemGetter: getter(subItemsField),
+            subItemSetter: setter(subItemsField),
+            checkSetter: setter(checkField),
+            checkIndeterminateSetter: setter(checkIndeterminateField)
+        }
+    );
+
+    return filtering ? filterBy(result, [ filter ], subItemsField) : result;
+};
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/filtering-with-delay/tree-data.js b/vue-options-api-demos/dropdowns/multiselecttree/filtering-with-delay/tree-data.js
new file mode 100644
index 00000000..5b749471
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/filtering-with-delay/tree-data.js
@@ -0,0 +1,15 @@
+export const data = [
+    {
+        text: 'Furniture', id: 1, items: [
+            { text: 'Tables & Chairs', id: 2 },
+            { text: 'Sofas', id: 3 },
+            { text: 'Occasional Furniture', id: 4 }
+        ]
+    }, {
+        text: 'Decor', id: 5, items: [
+            { text: 'Bed Linen', id: 6 },
+            { text: 'Curtains & Blinds', id: 7 },
+            { text: 'Carpets', id: 8 }
+        ]
+    }
+];
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/filtering/main.js b/vue-options-api-demos/dropdowns/multiselecttree/filtering/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/filtering/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/filtering/main.vue b/vue-options-api-demos/dropdowns/multiselecttree/filtering/main.vue
new file mode 100644
index 00000000..c86276c0
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/filtering/main.vue
@@ -0,0 +1,86 @@
+<template>
+  <div>
+      <MultiSelectTree
+        :style="{ width: '300px' }"
+        :dataItems="treeData"
+        :value="value"
+        @change="onChange"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :checkField="checkField"
+        :checkIndeterminateField="checkIndeterminateField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :label="'Category'"
+        :filterable="true"
+        @filterchange="onFilterChange"
+      />
+    </div>
+</template>
+<script>
+import {
+  MultiSelectTree,
+  getMultiSelectTreeValue,
+} from "@progress/kendo-vue-dropdowns";
+import {
+  processMultiSelectTreeData,
+  expandedState,
+} from "./multiselecttree-data-operations";
+import { data } from "./tree-data";
+
+const dataItemKey = "id";
+const checkField = "checkField";
+const checkIndeterminateField = "checkIndeterminateField";
+const subItemsField = "items";
+const expandField = "expanded";
+const textField = "text";
+
+const fields = {
+  dataItemKey,
+  checkField,
+  checkIndeterminateField,
+  expandField,
+  subItemsField,
+};
+
+export default {
+  components: {
+    MultiSelectTree
+  },
+  data: function () {
+    return {
+      textField,
+      dataItemKey,
+      checkField,
+      checkIndeterminateField,
+      subItemsField,
+      expandField,
+      dataItems: data,
+      value: [],
+      expanded: [data[0][dataItemKey]],
+      filter: null
+    };
+  },
+  computed: {
+    treeData () {
+      return  processMultiSelectTreeData(this.dataItems, { 
+        expanded: this.expanded, 
+        filter: this.filter, 
+        value: this.value, ...fields })
+    }
+  },
+  methods: {
+    onFilterChange(event) {
+      this.filter = event.filter;
+    },
+    onChange (event) {
+      this.value = (getMultiSelectTreeValue(this.dataItems, { ...fields, ...event, value: this.value }));
+    },
+    onExpandChange (event) {
+        this.expanded = (expandedState(event.item, dataItemKey, this.expanded))
+    }
+  }
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/filtering/multiselecttree-data-operations.js b/vue-options-api-demos/dropdowns/multiselecttree/filtering/multiselecttree-data-operations.js
new file mode 100644
index 00000000..50ff55a2
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/filtering/multiselecttree-data-operations.js
@@ -0,0 +1,107 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { getter, setter } from '@progress/kendo-vue-common';
+
+export const getValueMap = (value, idGetter) => {
+    const map = {};
+
+    if (value && value.length) {
+        value.forEach((item) => {
+            map[idGetter(item)] = true;
+        });
+    }
+
+    return map;
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const keyGetter = getter(dataItemKey);
+    const itemKey = keyGetter(item);
+    const index = expanded.findIndex(currentKey => {
+        return currentKey === itemKey;
+    });
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
+
+const mapMultiSelectTreeData = (
+    data,
+    options
+) => {
+    const {
+        keyGetter,
+        subItemGetter,
+        subItemSetter,
+        checkSetter,
+        expandedSetter,
+        checkIndeterminateSetter,
+        valueMap,
+        expandedMap
+    } = options;
+
+    if (!data || !data.length) { return [data, false];}
+
+    let hasChecked = false;
+    const newData = [...data].map(dataItem => {
+        const [children, hasCheckedChildren] = mapMultiSelectTreeData(subItemGetter(dataItem), options);
+
+        const isChecked = valueMap[keyGetter(dataItem)];
+        if (isChecked || hasCheckedChildren) {
+            hasChecked = true;
+        }
+
+        const newItem = { ...dataItem };
+
+        expandedSetter(newItem, expandedMap[keyGetter(newItem)])
+        subItemSetter(newItem, children);
+        checkSetter(newItem, isChecked);
+        checkIndeterminateSetter(newItem, !isChecked && hasCheckedChildren);
+
+        return newItem;
+    });
+
+    return [newData, hasChecked];
+};
+
+/**
+ * Creates a new array with the results of calling the provided callback function
+ * on every element in the provided data tree. The new tree items have their `check` and `checkIndeterminate` fields set.
+ */
+export const processMultiSelectTreeData = (
+    tree,
+    options
+) => {
+    const {
+        subItemsField = 'items',
+        checkField = 'checkField',
+        checkIndeterminateField = 'checkIndeterminateField',
+        expandField = 'expanded',
+        dataItemKey,
+        value,
+        filter,
+        expanded
+    } = options;
+
+    const keyGetter = getter(dataItemKey);
+    const filtering = Boolean(filter && filter.value);
+    const expandedMap = {};
+
+    expanded.forEach((id) => expandedMap[id] = true);
+
+    const [result] = mapMultiSelectTreeData(
+        tree,
+        {
+            valueMap: getValueMap(value, keyGetter),
+            expandedMap: expandedMap,
+            keyGetter,
+            expandedSetter: setter(expandField),
+            subItemGetter: getter(subItemsField),
+            subItemSetter: setter(subItemsField),
+            checkSetter: setter(checkField),
+            checkIndeterminateSetter: setter(checkIndeterminateField)
+        }
+    );
+
+    return filtering ? filterBy(result, [ filter ], subItemsField) : result;
+};
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/filtering/tree-data.js b/vue-options-api-demos/dropdowns/multiselecttree/filtering/tree-data.js
new file mode 100644
index 00000000..5b749471
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/filtering/tree-data.js
@@ -0,0 +1,15 @@
+export const data = [
+    {
+        text: 'Furniture', id: 1, items: [
+            { text: 'Tables & Chairs', id: 2 },
+            { text: 'Sofas', id: 3 },
+            { text: 'Occasional Furniture', id: 4 }
+        ]
+    }, {
+        text: 'Decor', id: 5, items: [
+            { text: 'Bed Linen', id: 6 },
+            { text: 'Curtains & Blinds', id: 7 },
+            { text: 'Carpets', id: 8 }
+        ]
+    }
+];
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/forms/basic/main.js b/vue-options-api-demos/dropdowns/multiselecttree/forms/basic/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/forms/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/forms/basic/main.vue b/vue-options-api-demos/dropdowns/multiselecttree/forms/basic/main.vue
new file mode 100644
index 00000000..fb923fc5
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/forms/basic/main.vue
@@ -0,0 +1,152 @@
+<template>
+  <div class="row example-wrapper">
+    <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+      <form class="k-form" method="POST" action="/" @submit="handleSubmit">
+        <h3>Fill your basket!</h3>
+        <div>
+          <MultiSelectTree
+            :label="'Foods:'"
+            :name="'foods'"
+            :value="foods"
+            @change="handleChange"
+            :data-items="foodsTreeData"
+            :text-field="textField"
+            :data-item-key="dataItemKey"
+            :expandField="expandField"
+            @expandchange="onExpandChange"
+            :required="true"
+          />
+        </div>
+        <div>
+          <MultiSelectTree
+            :label="'Drinks'"
+            :name="'drinks'"
+            :value="drinks"
+            @change="handleChange"
+            :data-items="drinksTreeData"
+            :text-field="textField"
+            :data-item-key="dataItemKey"
+            :expandField="expandField"
+            @expandchange="onExpandChange"
+            :required="true"
+          />
+        </div>
+        <div :style="{ marginTop: '10px' }">
+          <KButton type="submit">Submit</KButton>
+        </div>
+      </form>
+    </div>
+    <div
+      v-if="success"
+      :class="'alert alert-success'"
+      :style="{ position: 'absolute' }"
+    >
+      Form submitted!
+    </div>
+  </div>
+</template>
+<script>
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+import {
+  MultiSelectTree,
+  getMultiSelectTreeValue,
+} from '@progress/kendo-vue-dropdowns';
+import {
+  processMultiSelectTreeData,
+  expandedState,
+} from './multiselecttree-data-operations';
+
+const store = [
+  {
+    id: 1,
+    text: 'Fruits',
+    items: [
+      { id: 2, text: 'Banana' },
+      { id: 3, text: 'Strawberry' },
+    ],
+  },
+  { id: 4, text: 'Carrot' },
+  { id: 5, text: 'Bread' },
+  { id: 6, text: 'Milk' },
+  { id: 7, text: 'Water' },
+  { id: 8, text: 'Juice' },
+];
+
+const dataItemKey = 'id';
+const checkField = 'checkField';
+const checkIndeterminateField = 'checkIndeterminateField';
+const subItemsField = 'items';
+const expandField = 'expanded';
+const textField = 'text';
+
+const fields = {
+  dataItemKey,
+  checkField,
+  checkIndeterminateField,
+  expandField,
+  subItemsField,
+};
+
+export default {
+  components: {
+    MultiSelectTree,
+    KButton,
+  },
+  data() {
+    return {
+      success: false,
+      fields,
+      dataItems: store,
+      foods: [],
+      drinks: [],
+      textField,
+      dataItemKey,
+      checkField,
+      checkIndeterminateField,
+      subItemsField,
+      expandField,
+      foodsExpanded: [store[0][dataItemKey]],
+      drinksExpanded: [store[0][dataItemKey]],
+    };
+  },
+  computed: {
+    foodsTreeData() {
+      return processMultiSelectTreeData(this.dataItems, {
+        expanded: this.foodsExpanded,
+        value: this.foods,
+        ...fields,
+      });
+    },
+    drinksTreeData() {
+      return processMultiSelectTreeData(this.dataItems, {
+        expanded: this.drinksExpanded,
+        value: this.drinks,
+        ...fields,
+      });
+    },
+  },
+  methods: {
+    handleChange(event) {
+      this[event.target.name] = getMultiSelectTreeValue(this.dataItems, {
+        ...fields,
+        ...event,
+        value: this[event.target.name],
+      });
+    },
+    handleSubmit(event) {
+      event.preventDefault();
+      this.success = true;
+      setTimeout(() => {
+        this.success = false;
+      }, 3000);
+    },
+    onExpandChange(event) {
+      this[event.target.name + 'Expanded'] = expandedState(
+        event.item,
+        dataItemKey,
+        this[event.target.name + 'Expanded']
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/forms/basic/multiselecttree-data-operations.js b/vue-options-api-demos/dropdowns/multiselecttree/forms/basic/multiselecttree-data-operations.js
new file mode 100644
index 00000000..50ff55a2
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/forms/basic/multiselecttree-data-operations.js
@@ -0,0 +1,107 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { getter, setter } from '@progress/kendo-vue-common';
+
+export const getValueMap = (value, idGetter) => {
+    const map = {};
+
+    if (value && value.length) {
+        value.forEach((item) => {
+            map[idGetter(item)] = true;
+        });
+    }
+
+    return map;
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const keyGetter = getter(dataItemKey);
+    const itemKey = keyGetter(item);
+    const index = expanded.findIndex(currentKey => {
+        return currentKey === itemKey;
+    });
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
+
+const mapMultiSelectTreeData = (
+    data,
+    options
+) => {
+    const {
+        keyGetter,
+        subItemGetter,
+        subItemSetter,
+        checkSetter,
+        expandedSetter,
+        checkIndeterminateSetter,
+        valueMap,
+        expandedMap
+    } = options;
+
+    if (!data || !data.length) { return [data, false];}
+
+    let hasChecked = false;
+    const newData = [...data].map(dataItem => {
+        const [children, hasCheckedChildren] = mapMultiSelectTreeData(subItemGetter(dataItem), options);
+
+        const isChecked = valueMap[keyGetter(dataItem)];
+        if (isChecked || hasCheckedChildren) {
+            hasChecked = true;
+        }
+
+        const newItem = { ...dataItem };
+
+        expandedSetter(newItem, expandedMap[keyGetter(newItem)])
+        subItemSetter(newItem, children);
+        checkSetter(newItem, isChecked);
+        checkIndeterminateSetter(newItem, !isChecked && hasCheckedChildren);
+
+        return newItem;
+    });
+
+    return [newData, hasChecked];
+};
+
+/**
+ * Creates a new array with the results of calling the provided callback function
+ * on every element in the provided data tree. The new tree items have their `check` and `checkIndeterminate` fields set.
+ */
+export const processMultiSelectTreeData = (
+    tree,
+    options
+) => {
+    const {
+        subItemsField = 'items',
+        checkField = 'checkField',
+        checkIndeterminateField = 'checkIndeterminateField',
+        expandField = 'expanded',
+        dataItemKey,
+        value,
+        filter,
+        expanded
+    } = options;
+
+    const keyGetter = getter(dataItemKey);
+    const filtering = Boolean(filter && filter.value);
+    const expandedMap = {};
+
+    expanded.forEach((id) => expandedMap[id] = true);
+
+    const [result] = mapMultiSelectTreeData(
+        tree,
+        {
+            valueMap: getValueMap(value, keyGetter),
+            expandedMap: expandedMap,
+            keyGetter,
+            expandedSetter: setter(expandField),
+            subItemGetter: getter(subItemsField),
+            subItemSetter: setter(subItemsField),
+            checkSetter: setter(checkField),
+            checkIndeterminateSetter: setter(checkIndeterminateField)
+        }
+    );
+
+    return filtering ? filterBy(result, [ filter ], subItemsField) : result;
+};
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/forms/custom-message/main.js b/vue-options-api-demos/dropdowns/multiselecttree/forms/custom-message/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/forms/custom-message/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/forms/custom-message/main.vue b/vue-options-api-demos/dropdowns/multiselecttree/forms/custom-message/main.vue
new file mode 100644
index 00000000..6fb00d6c
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/forms/custom-message/main.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="row example-wrapper">
+    <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+      <form class="k-form" method="POST" action="/" @submit="handleSubmit">
+        <h3>Fill your basket!</h3>
+        <div>
+          <MultiSelectTree
+            :label="'Foods:'"
+            :name="'foods'"
+            :value="foods"
+            @change="handleChange"
+            :data-items="foodsTreeData"
+            :text-field="textField"
+            :data-item-key="dataItemKey"
+            :expandField="expandField"
+            @expandchange="onExpandChange"
+            :required="true"
+            :validation-message="foodsValidationMessage"
+          />
+        </div>
+        <div>
+          <MultiSelectTree
+            :label="'Drinks'"
+            :name="'drinks'"
+            :value="drinks"
+            @change="handleChange"
+            :data-items="drinksTreeData"
+            :text-field="textField"
+            :data-item-key="dataItemKey"
+            :expandField="expandField"
+            @expandchange="onExpandChange"
+            :required="true"
+            :validation-message="drinksValidationMessage"
+          />
+        </div>
+        <div :style="{ marginTop: '10px' }">
+          <KButton type="submit">Submit</KButton>
+        </div>
+      </form>
+    </div>
+    <div
+      v-if="success"
+      :class="'alert alert-success'"
+      :style="{ position: 'absolute' }"
+    >
+      Form submitted!
+    </div>
+  </div>
+</template>
+<script>
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+import {
+  MultiSelectTree,
+  getMultiSelectTreeValue,
+} from '@progress/kendo-vue-dropdowns';
+import {
+  processMultiSelectTreeData,
+  expandedState,
+} from './multiselecttree-data-operations';
+
+const store = [
+  {
+    id: 1,
+    text: 'Fruits',
+    items: [
+      { id: 2, text: 'Banana' },
+      { id: 3, text: 'Strawberry' },
+    ],
+  },
+  { id: 4, text: 'Carrot' },
+  { id: 5, text: 'Bread' },
+  { id: 6, text: 'Milk' },
+  { id: 7, text: 'Water' },
+  { id: 8, text: 'Juice' },
+];
+
+const dataItemKey = 'id';
+const checkField = 'checkField';
+const checkIndeterminateField = 'checkIndeterminateField';
+const subItemsField = 'items';
+const expandField = 'expanded';
+const textField = 'text';
+
+const fields = {
+  dataItemKey,
+  checkField,
+  checkIndeterminateField,
+  expandField,
+  subItemsField,
+};
+
+export default {
+  components: {
+    MultiSelectTree,
+    KButton,
+  },
+  data() {
+    return {
+      success: false,
+      fields,
+      dataItems: store,
+      foods: [],
+      drinks: [],
+      textField,
+      dataItemKey,
+      checkField,
+      checkIndeterminateField,
+      subItemsField,
+      expandField,
+      foodsExpanded: [store[0][dataItemKey]],
+      drinksExpanded: [store[0][dataItemKey]],
+      foodsValidationMessage: 'Please add foods to your basket!',
+      drinksValidationMessage: 'Please add drinks to your basket!',
+    };
+  },
+  computed: {
+    foodsTreeData() {
+      return processMultiSelectTreeData(this.dataItems, {
+        expanded: this.foodsExpanded,
+        value: this.foods,
+        ...fields,
+      });
+    },
+    drinksTreeData() {
+      return processMultiSelectTreeData(this.dataItems, {
+        expanded: this.drinksExpanded,
+        value: this.drinks,
+        ...fields,
+      });
+    },
+  },
+  methods: {
+    handleChange(event) {
+      this[event.target.name] = getMultiSelectTreeValue(this.dataItems, {
+        ...fields,
+        ...event,
+        value: this[event.target.name],
+      });
+    },
+    handleSubmit(event) {
+      event.preventDefault();
+      this.success = true;
+      setTimeout(() => {
+        this.success = false;
+      }, 3000);
+    },
+    onExpandChange(event) {
+      this[event.target.name + 'Expanded'] = expandedState(
+        event.item,
+        dataItemKey,
+        this[event.target.name + 'Expanded']
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/forms/custom-message/multiselecttree-data-operations.js b/vue-options-api-demos/dropdowns/multiselecttree/forms/custom-message/multiselecttree-data-operations.js
new file mode 100644
index 00000000..50ff55a2
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/forms/custom-message/multiselecttree-data-operations.js
@@ -0,0 +1,107 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { getter, setter } from '@progress/kendo-vue-common';
+
+export const getValueMap = (value, idGetter) => {
+    const map = {};
+
+    if (value && value.length) {
+        value.forEach((item) => {
+            map[idGetter(item)] = true;
+        });
+    }
+
+    return map;
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const keyGetter = getter(dataItemKey);
+    const itemKey = keyGetter(item);
+    const index = expanded.findIndex(currentKey => {
+        return currentKey === itemKey;
+    });
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
+
+const mapMultiSelectTreeData = (
+    data,
+    options
+) => {
+    const {
+        keyGetter,
+        subItemGetter,
+        subItemSetter,
+        checkSetter,
+        expandedSetter,
+        checkIndeterminateSetter,
+        valueMap,
+        expandedMap
+    } = options;
+
+    if (!data || !data.length) { return [data, false];}
+
+    let hasChecked = false;
+    const newData = [...data].map(dataItem => {
+        const [children, hasCheckedChildren] = mapMultiSelectTreeData(subItemGetter(dataItem), options);
+
+        const isChecked = valueMap[keyGetter(dataItem)];
+        if (isChecked || hasCheckedChildren) {
+            hasChecked = true;
+        }
+
+        const newItem = { ...dataItem };
+
+        expandedSetter(newItem, expandedMap[keyGetter(newItem)])
+        subItemSetter(newItem, children);
+        checkSetter(newItem, isChecked);
+        checkIndeterminateSetter(newItem, !isChecked && hasCheckedChildren);
+
+        return newItem;
+    });
+
+    return [newData, hasChecked];
+};
+
+/**
+ * Creates a new array with the results of calling the provided callback function
+ * on every element in the provided data tree. The new tree items have their `check` and `checkIndeterminate` fields set.
+ */
+export const processMultiSelectTreeData = (
+    tree,
+    options
+) => {
+    const {
+        subItemsField = 'items',
+        checkField = 'checkField',
+        checkIndeterminateField = 'checkIndeterminateField',
+        expandField = 'expanded',
+        dataItemKey,
+        value,
+        filter,
+        expanded
+    } = options;
+
+    const keyGetter = getter(dataItemKey);
+    const filtering = Boolean(filter && filter.value);
+    const expandedMap = {};
+
+    expanded.forEach((id) => expandedMap[id] = true);
+
+    const [result] = mapMultiSelectTreeData(
+        tree,
+        {
+            valueMap: getValueMap(value, keyGetter),
+            expandedMap: expandedMap,
+            keyGetter,
+            expandedSetter: setter(expandField),
+            subItemGetter: getter(subItemsField),
+            subItemSetter: setter(subItemsField),
+            checkSetter: setter(checkField),
+            checkIndeterminateSetter: setter(checkIndeterminateField)
+        }
+    );
+
+    return filtering ? filterBy(result, [ filter ], subItemsField) : result;
+};
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/forms/disable-styles/main.js b/vue-options-api-demos/dropdowns/multiselecttree/forms/disable-styles/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/forms/disable-styles/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/forms/disable-styles/main.vue b/vue-options-api-demos/dropdowns/multiselecttree/forms/disable-styles/main.vue
new file mode 100644
index 00000000..e21b92f9
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/forms/disable-styles/main.vue
@@ -0,0 +1,175 @@
+<template>
+  <div class="row example-wrapper">
+    <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+      <form class="k-form" method="POST" action="/" @submit="handleSubmit">
+        <h3>Fill your basket!</h3>
+        <div>
+          <MultiSelectTree
+            :label="'Food'"
+            :name="'food'"
+            :value="food"
+            @change="handleChange"
+            :data-items="foodTreeData"
+            :text-field="textField"
+            :data-item-key="dataItemKey"
+            :expandField="expandField"
+            @expandchange="onExpandChange"
+          />
+        </div>
+        <div>
+          <MultiSelectTree
+            :validity-styles="false"
+            :label="'Drinks'"
+            :name="'drinks'"
+            :value="drinks"
+            @change="handleChange"
+            :data-items="drinksTreeData"
+            :valid="validateDrinks()"
+            :text-field="textField"
+            :data-item-key="dataItemKey"
+            :validation-message="getDrinksErrorMessage()"
+            :expandField="expandField"
+            @expandchange="onExpandChange"
+          />
+        </div>
+        <div :style="{ marginTop: '10px' }">
+          <KButton type="submit">Submit</KButton>
+        </div>
+      </form>
+    </div>
+    <div
+      v-if="success"
+      :class="'alert alert-success'"
+      :style="{ position: 'absolute' }"
+    >
+      Form submitted!
+    </div>
+  </div>
+</template>
+<script>
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+import {
+  MultiSelectTree,
+  getMultiSelectTreeValue,
+} from '@progress/kendo-vue-dropdowns';
+import {
+  processMultiSelectTreeData,
+  expandedState,
+} from './multiselecttree-data-operations';
+
+const store = [
+  {
+    id: 1,
+    text: 'Fruits',
+    items: [
+      { id: 2, text: 'Banana' },
+      { id: 3, text: 'Strawberry' },
+    ],
+  },
+  { id: 4, text: 'Carrot' },
+  { id: 5, text: 'Bread' },
+  { id: 6, text: 'Milk' },
+  { id: 7, text: 'Water' },
+  { id: 8, text: 'Juice' },
+];
+
+const dataItemKey = 'id';
+const checkField = 'checkField';
+const checkIndeterminateField = 'checkIndeterminateField';
+const subItemsField = 'items';
+const expandField = 'expanded';
+const textField = 'text';
+
+const fields = {
+  dataItemKey,
+  checkField,
+  checkIndeterminateField,
+  expandField,
+  subItemsField,
+};
+
+export default {
+  components: {
+    MultiSelectTree,
+    KButton,
+  },
+  data() {
+    return {
+      success: false,
+      fields,
+      dataItems: store,
+      food: [],
+      drinks: [],
+      textField,
+      dataItemKey,
+      checkField,
+      checkIndeterminateField,
+      subItemsField,
+      expandField,
+      foodExpanded: [store[0][dataItemKey]],
+      drinksExpanded: [store[0][dataItemKey]],
+    };
+  },
+  computed: {
+    foodTreeData() {
+      return processMultiSelectTreeData(this.dataItems, {
+        expanded: this.foodExpanded,
+        value: this.food,
+        ...fields,
+      });
+    },
+    drinksTreeData() {
+      return processMultiSelectTreeData(this.dataItems, {
+        expanded: this.drinksExpanded,
+        value: this.drinks,
+        ...fields,
+      });
+    },
+  },
+  methods: {
+    getDrinksErrorMessage() {
+      return this.drinks.length
+        ? 'Please select drinks only!'
+        : 'Please select an item!';
+    },
+    validateDrinks() {
+      if (this.drinks.length === 0) {
+        return false;
+      }
+      let result = true;
+      this.drinks.forEach((drink) => {
+        if (
+          drink.text !== 'Juice' &&
+          drink.text !== 'Water' &&
+          drink.text !== 'Milk'
+        ) {
+          result = false;
+        }
+      });
+
+      return result;
+    },
+    handleChange(event) {
+      this[event.target.name] = getMultiSelectTreeValue(this.dataItems, {
+        ...fields,
+        ...event,
+        value: this[event.target.name],
+      });
+    },
+    handleSubmit(event) {
+      event.preventDefault();
+      this.success = true;
+      setTimeout(() => {
+        this.success = false;
+      }, 3000);
+    },
+    onExpandChange(event) {
+      this[event.target.name + 'Expanded'] = expandedState(
+        event.item,
+        dataItemKey,
+        this[event.target.name + 'Expanded']
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/forms/disable-styles/multiselecttree-data-operations.js b/vue-options-api-demos/dropdowns/multiselecttree/forms/disable-styles/multiselecttree-data-operations.js
new file mode 100644
index 00000000..50ff55a2
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/forms/disable-styles/multiselecttree-data-operations.js
@@ -0,0 +1,107 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { getter, setter } from '@progress/kendo-vue-common';
+
+export const getValueMap = (value, idGetter) => {
+    const map = {};
+
+    if (value && value.length) {
+        value.forEach((item) => {
+            map[idGetter(item)] = true;
+        });
+    }
+
+    return map;
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const keyGetter = getter(dataItemKey);
+    const itemKey = keyGetter(item);
+    const index = expanded.findIndex(currentKey => {
+        return currentKey === itemKey;
+    });
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
+
+const mapMultiSelectTreeData = (
+    data,
+    options
+) => {
+    const {
+        keyGetter,
+        subItemGetter,
+        subItemSetter,
+        checkSetter,
+        expandedSetter,
+        checkIndeterminateSetter,
+        valueMap,
+        expandedMap
+    } = options;
+
+    if (!data || !data.length) { return [data, false];}
+
+    let hasChecked = false;
+    const newData = [...data].map(dataItem => {
+        const [children, hasCheckedChildren] = mapMultiSelectTreeData(subItemGetter(dataItem), options);
+
+        const isChecked = valueMap[keyGetter(dataItem)];
+        if (isChecked || hasCheckedChildren) {
+            hasChecked = true;
+        }
+
+        const newItem = { ...dataItem };
+
+        expandedSetter(newItem, expandedMap[keyGetter(newItem)])
+        subItemSetter(newItem, children);
+        checkSetter(newItem, isChecked);
+        checkIndeterminateSetter(newItem, !isChecked && hasCheckedChildren);
+
+        return newItem;
+    });
+
+    return [newData, hasChecked];
+};
+
+/**
+ * Creates a new array with the results of calling the provided callback function
+ * on every element in the provided data tree. The new tree items have their `check` and `checkIndeterminate` fields set.
+ */
+export const processMultiSelectTreeData = (
+    tree,
+    options
+) => {
+    const {
+        subItemsField = 'items',
+        checkField = 'checkField',
+        checkIndeterminateField = 'checkIndeterminateField',
+        expandField = 'expanded',
+        dataItemKey,
+        value,
+        filter,
+        expanded
+    } = options;
+
+    const keyGetter = getter(dataItemKey);
+    const filtering = Boolean(filter && filter.value);
+    const expandedMap = {};
+
+    expanded.forEach((id) => expandedMap[id] = true);
+
+    const [result] = mapMultiSelectTreeData(
+        tree,
+        {
+            valueMap: getValueMap(value, keyGetter),
+            expandedMap: expandedMap,
+            keyGetter,
+            expandedSetter: setter(expandField),
+            subItemGetter: getter(subItemsField),
+            subItemSetter: setter(subItemsField),
+            checkSetter: setter(checkField),
+            checkIndeterminateSetter: setter(checkIndeterminateField)
+        }
+    );
+
+    return filtering ? filterBy(result, [ filter ], subItemsField) : result;
+};
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/forms/override/main.js b/vue-options-api-demos/dropdowns/multiselecttree/forms/override/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/forms/override/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/forms/override/main.vue b/vue-options-api-demos/dropdowns/multiselecttree/forms/override/main.vue
new file mode 100644
index 00000000..f97df3a4
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/forms/override/main.vue
@@ -0,0 +1,174 @@
+<template>
+  <div class="row example-wrapper">
+    <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+      <form class="k-form" method="POST" action="/" @submit="handleSubmit">
+        <h3>Fill your basket!</h3>
+        <div>
+          <MultiSelectTree
+            :label="'Food'"
+            :name="'food'"
+            :value="food"
+            @change="handleChange"
+            :data-items="foodTreeData"
+            :text-field="textField"
+            :data-item-key="dataItemKey"
+            :expandField="expandField"
+            @expandchange="onExpandChange"
+          />
+        </div>
+        <div>
+          <MultiSelectTree
+            :label="'Drinks'"
+            :name="'drinks'"
+            :value="drinks"
+            @change="handleChange"
+            :data-items="drinksTreeData"
+            :valid="validateDrinks()"
+            :text-field="textField"
+            :data-item-key="dataItemKey"
+            :validation-message="getDrinksErrorMessage()"
+            :expandField="expandField"
+            @expandchange="onExpandChange"
+          />
+        </div>
+        <div :style="{ marginTop: '10px' }">
+          <KButton type="submit">Submit</KButton>
+        </div>
+      </form>
+    </div>
+    <div
+      v-if="success"
+      :class="'alert alert-success'"
+      :style="{ position: 'absolute' }"
+    >
+      Form submitted!
+    </div>
+  </div>
+</template>
+<script>
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+import {
+  MultiSelectTree,
+  getMultiSelectTreeValue,
+} from '@progress/kendo-vue-dropdowns';
+import {
+  processMultiSelectTreeData,
+  expandedState,
+} from './multiselecttree-data-operations';
+
+const store = [
+  {
+    id: 1,
+    text: 'Fruits',
+    items: [
+      { id: 2, text: 'Banana' },
+      { id: 3, text: 'Strawberry' },
+    ],
+  },
+  { id: 4, text: 'Carrot' },
+  { id: 5, text: 'Bread' },
+  { id: 6, text: 'Milk' },
+  { id: 7, text: 'Water' },
+  { id: 8, text: 'Juice' },
+];
+
+const dataItemKey = 'id';
+const checkField = 'checkField';
+const checkIndeterminateField = 'checkIndeterminateField';
+const subItemsField = 'items';
+const expandField = 'expanded';
+const textField = 'text';
+
+const fields = {
+  dataItemKey,
+  checkField,
+  checkIndeterminateField,
+  expandField,
+  subItemsField,
+};
+
+export default {
+  components: {
+    MultiSelectTree,
+    KButton,
+  },
+  data() {
+    return {
+      success: false,
+      fields,
+      dataItems: store,
+      food: [],
+      drinks: [],
+      textField,
+      dataItemKey,
+      checkField,
+      checkIndeterminateField,
+      subItemsField,
+      expandField,
+      foodExpanded: [store[0][dataItemKey]],
+      drinksExpanded: [store[0][dataItemKey]],
+    };
+  },
+  computed: {
+    foodTreeData() {
+      return processMultiSelectTreeData(this.dataItems, {
+        expanded: this.foodExpanded,
+        value: this.food,
+        ...fields,
+      });
+    },
+    drinksTreeData() {
+      return processMultiSelectTreeData(this.dataItems, {
+        expanded: this.drinksExpanded,
+        value: this.drinks,
+        ...fields,
+      });
+    },
+  },
+  methods: {
+    getDrinksErrorMessage() {
+      return this.drinks.length
+        ? 'Please select drinks only!'
+        : 'Please select an item!';
+    },
+    validateDrinks() {
+      if (this.drinks.length === 0) {
+        return false;
+      }
+      let result = true;
+      this.drinks.forEach((drink) => {
+        if (
+          drink.text !== 'Juice' &&
+          drink.text !== 'Water' &&
+          drink.text !== 'Milk'
+        ) {
+          result = false;
+        }
+      });
+
+      return result;
+    },
+    handleChange(event) {
+      this[event.target.name] = getMultiSelectTreeValue(this.dataItems, {
+        ...fields,
+        ...event,
+        value: this[event.target.name],
+      });
+    },
+    handleSubmit(event) {
+      event.preventDefault();
+      this.success = true;
+      setTimeout(() => {
+        this.success = false;
+      }, 3000);
+    },
+    onExpandChange(event) {
+      this[event.target.name + 'Expanded'] = expandedState(
+        event.item,
+        dataItemKey,
+        this[event.target.name + 'Expanded']
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/forms/override/multiselecttree-data-operations.js b/vue-options-api-demos/dropdowns/multiselecttree/forms/override/multiselecttree-data-operations.js
new file mode 100644
index 00000000..50ff55a2
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/forms/override/multiselecttree-data-operations.js
@@ -0,0 +1,107 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { getter, setter } from '@progress/kendo-vue-common';
+
+export const getValueMap = (value, idGetter) => {
+    const map = {};
+
+    if (value && value.length) {
+        value.forEach((item) => {
+            map[idGetter(item)] = true;
+        });
+    }
+
+    return map;
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const keyGetter = getter(dataItemKey);
+    const itemKey = keyGetter(item);
+    const index = expanded.findIndex(currentKey => {
+        return currentKey === itemKey;
+    });
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
+
+const mapMultiSelectTreeData = (
+    data,
+    options
+) => {
+    const {
+        keyGetter,
+        subItemGetter,
+        subItemSetter,
+        checkSetter,
+        expandedSetter,
+        checkIndeterminateSetter,
+        valueMap,
+        expandedMap
+    } = options;
+
+    if (!data || !data.length) { return [data, false];}
+
+    let hasChecked = false;
+    const newData = [...data].map(dataItem => {
+        const [children, hasCheckedChildren] = mapMultiSelectTreeData(subItemGetter(dataItem), options);
+
+        const isChecked = valueMap[keyGetter(dataItem)];
+        if (isChecked || hasCheckedChildren) {
+            hasChecked = true;
+        }
+
+        const newItem = { ...dataItem };
+
+        expandedSetter(newItem, expandedMap[keyGetter(newItem)])
+        subItemSetter(newItem, children);
+        checkSetter(newItem, isChecked);
+        checkIndeterminateSetter(newItem, !isChecked && hasCheckedChildren);
+
+        return newItem;
+    });
+
+    return [newData, hasChecked];
+};
+
+/**
+ * Creates a new array with the results of calling the provided callback function
+ * on every element in the provided data tree. The new tree items have their `check` and `checkIndeterminate` fields set.
+ */
+export const processMultiSelectTreeData = (
+    tree,
+    options
+) => {
+    const {
+        subItemsField = 'items',
+        checkField = 'checkField',
+        checkIndeterminateField = 'checkIndeterminateField',
+        expandField = 'expanded',
+        dataItemKey,
+        value,
+        filter,
+        expanded
+    } = options;
+
+    const keyGetter = getter(dataItemKey);
+    const filtering = Boolean(filter && filter.value);
+    const expandedMap = {};
+
+    expanded.forEach((id) => expandedMap[id] = true);
+
+    const [result] = mapMultiSelectTreeData(
+        tree,
+        {
+            valueMap: getValueMap(value, keyGetter),
+            expandedMap: expandedMap,
+            keyGetter,
+            expandedSetter: setter(expandField),
+            subItemGetter: getter(subItemsField),
+            subItemSetter: setter(subItemsField),
+            checkSetter: setter(checkField),
+            checkIndeterminateSetter: setter(checkIndeterminateField)
+        }
+    );
+
+    return filtering ? filterBy(result, [ filter ], subItemsField) : result;
+};
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/header-footer/main.js b/vue-options-api-demos/dropdowns/multiselecttree/header-footer/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/header-footer/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/header-footer/main.vue b/vue-options-api-demos/dropdowns/multiselecttree/header-footer/main.vue
new file mode 100644
index 00000000..45fbfd89
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/header-footer/main.vue
@@ -0,0 +1,105 @@
+<template>
+  <div>
+      <MultiSelectTree
+        :style="{ width: '300px' }"
+        :key="0"
+        :dataItems="treeData"
+        :value="value"
+        @change="onChange"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :checkField="checkField"
+        :checkIndeterminateField="checkIndeterminateField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+        :header="'header'"
+        :footer="'footer'"
+      >
+      <template v-slot:header>
+        <span>
+         SomeHeader
+        </span>
+      </template>
+      <template v-slot:footer>
+        <span>
+         SomeFooter
+        </span>
+      </template>
+    </MultiSelectTree>
+    </div>
+</template>
+<script>
+import {
+  MultiSelectTree,
+  getMultiSelectTreeValue,
+} from "@progress/kendo-vue-dropdowns";
+import {
+  processMultiSelectTreeData,
+  expandedState,
+} from "./multiselecttree-data-operations";
+import { data } from "./tree-data";
+const is = (fileName, ext) => new RegExp(`.${ext}\$`).test(fileName);
+
+const dataItemKey = "id";
+const checkField = "checkField";
+const checkIndeterminateField = "checkIndeterminateField";
+const subItemsField = "items";
+const expandField = "expanded";
+const textField = "text";
+
+const fields = {
+  dataItemKey,
+  checkField,
+  checkIndeterminateField,
+  expandField,
+  subItemsField,
+};
+
+export default {
+  components: {
+    MultiSelectTree
+  },
+  data: function () {
+    return {
+      textField,
+      dataItemKey,
+      checkField,
+      checkIndeterminateField,
+      subItemsField,
+      expandField,
+      dataItems: data,
+      value: [],
+      expanded: [data[0][dataItemKey]]
+    };
+  },
+  computed: {
+    treeData () {
+      return  processMultiSelectTreeData(this.dataItems, { expanded: this.expanded, value: this.value, ...fields })
+    }
+  },
+  methods: {
+    iconClassName({ text, items }) {
+      console.log(text, items)
+      if (items !== undefined) {
+        return 'k-icon k-i-folder';
+      } else if (is(text, 'pdf')) {
+        return 'k-icon k-i-file-pdf';
+      } else if (is(text, 'html')) {
+        return 'k-icon k-i-html';
+      } else if (is(text, 'jpg|png')) {
+        return 'k-icon k-i-image';
+      } else {
+        return '';
+      }
+    },
+    onChange (event) {
+      this.value = (getMultiSelectTreeValue(this.dataItems, { ...fields, ...event, value: this.value }));
+    },
+    onExpandChange (event) {
+        this.expanded = (expandedState(event.item, dataItemKey, this.expanded))
+    }
+  }
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/header-footer/multiselecttree-data-operations.js b/vue-options-api-demos/dropdowns/multiselecttree/header-footer/multiselecttree-data-operations.js
new file mode 100644
index 00000000..50ff55a2
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/header-footer/multiselecttree-data-operations.js
@@ -0,0 +1,107 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { getter, setter } from '@progress/kendo-vue-common';
+
+export const getValueMap = (value, idGetter) => {
+    const map = {};
+
+    if (value && value.length) {
+        value.forEach((item) => {
+            map[idGetter(item)] = true;
+        });
+    }
+
+    return map;
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const keyGetter = getter(dataItemKey);
+    const itemKey = keyGetter(item);
+    const index = expanded.findIndex(currentKey => {
+        return currentKey === itemKey;
+    });
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
+
+const mapMultiSelectTreeData = (
+    data,
+    options
+) => {
+    const {
+        keyGetter,
+        subItemGetter,
+        subItemSetter,
+        checkSetter,
+        expandedSetter,
+        checkIndeterminateSetter,
+        valueMap,
+        expandedMap
+    } = options;
+
+    if (!data || !data.length) { return [data, false];}
+
+    let hasChecked = false;
+    const newData = [...data].map(dataItem => {
+        const [children, hasCheckedChildren] = mapMultiSelectTreeData(subItemGetter(dataItem), options);
+
+        const isChecked = valueMap[keyGetter(dataItem)];
+        if (isChecked || hasCheckedChildren) {
+            hasChecked = true;
+        }
+
+        const newItem = { ...dataItem };
+
+        expandedSetter(newItem, expandedMap[keyGetter(newItem)])
+        subItemSetter(newItem, children);
+        checkSetter(newItem, isChecked);
+        checkIndeterminateSetter(newItem, !isChecked && hasCheckedChildren);
+
+        return newItem;
+    });
+
+    return [newData, hasChecked];
+};
+
+/**
+ * Creates a new array with the results of calling the provided callback function
+ * on every element in the provided data tree. The new tree items have their `check` and `checkIndeterminate` fields set.
+ */
+export const processMultiSelectTreeData = (
+    tree,
+    options
+) => {
+    const {
+        subItemsField = 'items',
+        checkField = 'checkField',
+        checkIndeterminateField = 'checkIndeterminateField',
+        expandField = 'expanded',
+        dataItemKey,
+        value,
+        filter,
+        expanded
+    } = options;
+
+    const keyGetter = getter(dataItemKey);
+    const filtering = Boolean(filter && filter.value);
+    const expandedMap = {};
+
+    expanded.forEach((id) => expandedMap[id] = true);
+
+    const [result] = mapMultiSelectTreeData(
+        tree,
+        {
+            valueMap: getValueMap(value, keyGetter),
+            expandedMap: expandedMap,
+            keyGetter,
+            expandedSetter: setter(expandField),
+            subItemGetter: getter(subItemsField),
+            subItemSetter: setter(subItemsField),
+            checkSetter: setter(checkField),
+            checkIndeterminateSetter: setter(checkIndeterminateField)
+        }
+    );
+
+    return filtering ? filterBy(result, [ filter ], subItemsField) : result;
+};
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/header-footer/tree-data.js b/vue-options-api-demos/dropdowns/multiselecttree/header-footer/tree-data.js
new file mode 100644
index 00000000..5b749471
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/header-footer/tree-data.js
@@ -0,0 +1,15 @@
+export const data = [
+    {
+        text: 'Furniture', id: 1, items: [
+            { text: 'Tables & Chairs', id: 2 },
+            { text: 'Sofas', id: 3 },
+            { text: 'Occasional Furniture', id: 4 }
+        ]
+    }, {
+        text: 'Decor', id: 5, items: [
+            { text: 'Bed Linen', id: 6 },
+            { text: 'Curtains & Blinds', id: 7 },
+            { text: 'Carpets', id: 8 }
+        ]
+    }
+];
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/no-data/main.js b/vue-options-api-demos/dropdowns/multiselecttree/no-data/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/no-data/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/multiselecttree/no-data/main.vue b/vue-options-api-demos/dropdowns/multiselecttree/no-data/main.vue
new file mode 100644
index 00000000..2eed6b67
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/multiselecttree/no-data/main.vue
@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <MultiSelectTree
+      :style="{ width: '300px' }"
+      :listNoData="'listNoData'"
+      :textField="textField"
+      :dataItemKey="dataItemKey"
+    >
+      <template v-slot:listNoData>
+        <div class="k-nodata">
+          <div>
+            <h4 :style="{ fontSize: '1em' }">
+              <span class="k-icon k-i-warning" :style="{ fontSize: '2.5em' }" />
+              <br />
+              <br />
+            </h4>
+          </div>
+        </div>
+      </template>
+    </MultiSelectTree>
+  </div>
+</template>
+<script>
+import {
+  MultiSelectTree,
+} from '@progress/kendo-vue-dropdowns';
+
+const dataItemKey = 'id';
+const textField = 'text';
+
+export default {
+  components: {
+    MultiSelectTree,
+  },
+  data: function () {
+    return {
+      textField,
+      dataItemKey,
+    };
+  },
+  methods: {},
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/overview/main.js b/vue-options-api-demos/dropdowns/overview/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/overview/main.vue b/vue-options-api-demos/dropdowns/overview/main.vue
new file mode 100644
index 00000000..2fa432eb
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/overview/main.vue
@@ -0,0 +1,166 @@
+<template>
+  <div class="example-wrapper" :style="{ minHeight: '400px' }">
+    <div class="col-xs-12 col-sm-7 example-col">
+      <p>AutoComplete</p>
+      <AutoComplete
+        :style="{ width: '230px' }"
+        :data-items="sports"
+        :placeholder="'Your favorite sport'"
+      ></AutoComplete>
+    </div>
+    <div class="col-xs-12 col-sm-7 example-col">
+      <p>ComboBox</p>
+      <ComboBox
+        :style="{ width: '230px' }"
+        :data-items="sports"
+        :default-value="'Basketball'"
+      ></ComboBox>
+    </div>
+    <div class="col-xs-12 col-sm-7 example-col">
+      <p>DropDownList</p>
+      <DropDownList
+        :style="{ width: '230px' }"
+        :data-items="sports"
+        :default-value="'Basketball'"
+      ></DropDownList>
+    </div>
+    <div class="col-xs-12 col-sm-7 example-col">
+      <p>DropDownTree</p>
+      <DropDownTree
+        :style="{ width: '300px' }"
+        :dataItems="dropDownTreeData"
+        v-model="valueDDT"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :subItemsField="subItemsField"
+        :selectField="selectField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+      />
+    </div>
+    <div class="col-xs-12 col-sm-7 example-col">
+      <p>MultiSelect</p>
+      <MultiSelect
+        :style="{ width: '230px' }"
+        :data-items="sports"
+        :default-value="['Basketball']"
+      ></MultiSelect>
+    </div>
+    <div class="col-xs-12 col-sm-7 example-col">
+      <p>MultiSelectTree</p>
+      <MultiSelectTree
+        :style="{ width: '230px' }"
+        :dataItems="multiSelectTreeData"
+        :value="valueMST"
+        @change="onChange"
+        :placeholder="'Please select ...'"
+        :textField="textField"
+        :dataItemKey="dataItemKey"
+        :checkField="checkField"
+        :checkIndeterminateField="checkIndeterminateField"
+        :subItemsField="subItemsField"
+        :expandField="expandField"
+        @expandchange="onExpandChange"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import {
+  AutoComplete,
+  ComboBox,
+  DropDownList,
+  DropDownTree,
+  MultiSelect,
+  MultiSelectTree,
+  getMultiSelectTreeValue,
+} from '@progress/kendo-vue-dropdowns';
+import {
+  processMultiSelectTreeData,
+  expandedState,
+} from './multiselecttree-data-operations';
+import { processTreeData } from './tree-data-operations';
+import { data } from './tree-data';
+
+const dataItemKey = 'id';
+const checkField = 'checkField';
+const checkIndeterminateField = 'checkIndeterminateField';
+const subItemsField = 'items';
+const expandField = 'expanded';
+const textField = 'text';
+const selectField = 'selected';
+
+const fields = {
+  dataItemKey,
+  checkField,
+  checkIndeterminateField,
+  expandField,
+  subItemsField,
+  selectField,
+};
+
+export default {
+  components: {
+    AutoComplete,
+    ComboBox,
+    DropDownList,
+    DropDownTree,
+    MultiSelect,
+    MultiSelectTree,
+  },
+  data: function () {
+    return {
+      sports: [
+        'Baseball',
+        'Basketball',
+        'Cricket',
+        'Field Hockey',
+        'Football',
+        'Table Tennis',
+        'Tennis',
+        'Volleyball',
+      ],
+      textField,
+      dataItemKey,
+      checkField,
+      checkIndeterminateField,
+      subItemsField,
+      expandField,
+      selectField,
+      dataItems: data,
+      valueMST: [],
+      valueDDT: null,
+      expanded: [data[0][dataItemKey]],
+    };
+  },
+  computed: {
+    multiSelectTreeData() {
+      return processMultiSelectTreeData(this.dataItems, {
+        expanded: this.expanded,
+        value: this.valueMST,
+        ...fields,
+      });
+    },
+    dropDownTreeData() {
+      return processTreeData(
+        this.dataItems,
+        { expanded: this.expanded, value: this.valueDDT },
+        fields
+      );
+    },
+  },
+  methods: {
+    onChange(event) {
+      this.valueMST = getMultiSelectTreeValue(this.dataItems, {
+        ...fields,
+        ...event,
+        value: this.valueMST,
+      });
+    },
+    onExpandChange(event) {
+      this.expanded = expandedState(event.item, dataItemKey, this.expanded);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/overview/multiselecttree-data-operations.js b/vue-options-api-demos/dropdowns/overview/multiselecttree-data-operations.js
new file mode 100644
index 00000000..50ff55a2
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/overview/multiselecttree-data-operations.js
@@ -0,0 +1,107 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { getter, setter } from '@progress/kendo-vue-common';
+
+export const getValueMap = (value, idGetter) => {
+    const map = {};
+
+    if (value && value.length) {
+        value.forEach((item) => {
+            map[idGetter(item)] = true;
+        });
+    }
+
+    return map;
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const keyGetter = getter(dataItemKey);
+    const itemKey = keyGetter(item);
+    const index = expanded.findIndex(currentKey => {
+        return currentKey === itemKey;
+    });
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
+
+const mapMultiSelectTreeData = (
+    data,
+    options
+) => {
+    const {
+        keyGetter,
+        subItemGetter,
+        subItemSetter,
+        checkSetter,
+        expandedSetter,
+        checkIndeterminateSetter,
+        valueMap,
+        expandedMap
+    } = options;
+
+    if (!data || !data.length) { return [data, false];}
+
+    let hasChecked = false;
+    const newData = [...data].map(dataItem => {
+        const [children, hasCheckedChildren] = mapMultiSelectTreeData(subItemGetter(dataItem), options);
+
+        const isChecked = valueMap[keyGetter(dataItem)];
+        if (isChecked || hasCheckedChildren) {
+            hasChecked = true;
+        }
+
+        const newItem = { ...dataItem };
+
+        expandedSetter(newItem, expandedMap[keyGetter(newItem)])
+        subItemSetter(newItem, children);
+        checkSetter(newItem, isChecked);
+        checkIndeterminateSetter(newItem, !isChecked && hasCheckedChildren);
+
+        return newItem;
+    });
+
+    return [newData, hasChecked];
+};
+
+/**
+ * Creates a new array with the results of calling the provided callback function
+ * on every element in the provided data tree. The new tree items have their `check` and `checkIndeterminate` fields set.
+ */
+export const processMultiSelectTreeData = (
+    tree,
+    options
+) => {
+    const {
+        subItemsField = 'items',
+        checkField = 'checkField',
+        checkIndeterminateField = 'checkIndeterminateField',
+        expandField = 'expanded',
+        dataItemKey,
+        value,
+        filter,
+        expanded
+    } = options;
+
+    const keyGetter = getter(dataItemKey);
+    const filtering = Boolean(filter && filter.value);
+    const expandedMap = {};
+
+    expanded.forEach((id) => expandedMap[id] = true);
+
+    const [result] = mapMultiSelectTreeData(
+        tree,
+        {
+            valueMap: getValueMap(value, keyGetter),
+            expandedMap: expandedMap,
+            keyGetter,
+            expandedSetter: setter(expandField),
+            subItemGetter: getter(subItemsField),
+            subItemSetter: setter(subItemsField),
+            checkSetter: setter(checkField),
+            checkIndeterminateSetter: setter(checkIndeterminateField)
+        }
+    );
+
+    return filtering ? filterBy(result, [ filter ], subItemsField) : result;
+};
diff --git a/vue-options-api-demos/dropdowns/overview/tree-data-operations.js b/vue-options-api-demos/dropdowns/overview/tree-data-operations.js
new file mode 100644
index 00000000..c32766b4
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/overview/tree-data-operations.js
@@ -0,0 +1,31 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { mapTree, extendDataItem } from '@progress/kendo-vue-common';
+
+export const processTreeData = (data, state, fields) => {
+    const { selectField, expandField, dataItemKey, subItemsField } = fields;
+    const { expanded, value, filter } = state;
+    const filtering = Boolean(filter && filter.value);
+
+    return mapTree(
+        filtering ? filterBy(data, [ filter ], subItemsField) : data,
+        subItemsField,
+        item => {
+            const props = {
+                [expandField]: expanded.includes(item[dataItemKey]),
+                [selectField]: value && item[dataItemKey] === value[dataItemKey]
+            };
+            return filtering ?
+                extendDataItem(item, subItemsField, props) :
+                { ...item, ...props };
+        }
+    );
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const itemKey = item[dataItemKey];
+    const index = expanded.indexOf(itemKey);
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
diff --git a/vue-options-api-demos/dropdowns/overview/tree-data.js b/vue-options-api-demos/dropdowns/overview/tree-data.js
new file mode 100644
index 00000000..5b749471
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/overview/tree-data.js
@@ -0,0 +1,15 @@
+export const data = [
+    {
+        text: 'Furniture', id: 1, items: [
+            { text: 'Tables & Chairs', id: 2 },
+            { text: 'Sofas', id: 3 },
+            { text: 'Occasional Furniture', id: 4 }
+        ]
+    }, {
+        text: 'Decor', id: 5, items: [
+            { text: 'Bed Linen', id: 6 },
+            { text: 'Curtains & Blinds', id: 7 },
+            { text: 'Carpets', id: 8 }
+        ]
+    }
+];
diff --git a/vue-options-api-demos/dropdowns/rtl/main.js b/vue-options-api-demos/dropdowns/rtl/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/rtl/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/dropdowns/rtl/main.vue b/vue-options-api-demos/dropdowns/rtl/main.vue
new file mode 100644
index 00000000..a26354ae
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/rtl/main.vue
@@ -0,0 +1,173 @@
+<template>
+    <div class="row">
+      <div class="m-3">
+        <p>AutoComplete</p>
+        <AutoComplete
+          :style="{ width: '230px' }"
+          :data-items="sports"
+          :placeholder="'Your favorite sport'"
+          dir="rtl"
+        ></AutoComplete>
+      </div>
+      <div class="m-3">
+        <p>ComboBox</p>
+        <ComboBox
+          :style="{ width: '230px' }"
+          :data-items="sports"
+          :default-value="'Basketball'"
+          dir="rtl"
+        ></ComboBox>
+      </div>
+      <div class="m-3">
+        <p>DropDownList</p>
+        <DropDownList
+          :style="{ width: '230px' }"
+          :data-items="sports"
+          :default-value="'Basketball'"
+          dir="rtl"
+        ></DropDownList>
+      </div>
+      <div class="m-3">
+        <p>DropDownTree</p>
+        <DropDownTree
+          :style="{ width: '230px' }"
+          :dataItems="dropDownTreeData"
+          v-model="valueDDT"
+          :placeholder="'Please select ...'"
+          :textField="textField"
+          :dataItemKey="dataItemKey"
+          :subItemsField="subItemsField"
+          :selectField="selectField"
+          :expandField="expandField"
+          @expandchange="onExpandChange"
+          dir="rtl"
+        />
+      </div>
+      <div class="m-3">
+        <p>MultiSelect</p>
+        <MultiSelect
+          :style="{ width: '230px' }"
+          :data-items="sports"
+          :default-value="['Basketball']"
+          dir="rtl"
+        ></MultiSelect>
+      </div>
+      <div class="m-3">
+        <p>MultiSelectTree</p>
+        <MultiSelectTree
+          :style="{ width: '230px' }"
+          :dataItems="multiSelectTreeData"
+          :value="valueMST"
+          @change="onChange"
+          :placeholder="'Please select ...'"
+          :textField="textField"
+          :dataItemKey="dataItemKey"
+          :checkField="checkField"
+          :checkIndeterminateField="checkIndeterminateField"
+          :subItemsField="subItemsField"
+          :expandField="expandField"
+          @expandchange="onExpandChange"
+          dir="rtl"
+        />
+      </div>
+    </div>
+  </template>
+  <script>
+  import {
+    AutoComplete,
+    ComboBox,
+    DropDownList,
+    DropDownTree,
+    MultiSelect,
+    MultiSelectTree,
+    getMultiSelectTreeValue,
+  } from '@progress/kendo-vue-dropdowns';
+  import {
+    processMultiSelectTreeData,
+    expandedState,
+  } from './multiselecttree-data-operations';
+  import { processTreeData } from './tree-data-operations';
+  import { data } from './tree-data';
+  
+  const dataItemKey = 'id';
+  const checkField = 'checkField';
+  const checkIndeterminateField = 'checkIndeterminateField';
+  const subItemsField = 'items';
+  const expandField = 'expanded';
+  const textField = 'text';
+  const selectField = 'selected';
+  
+  const fields = {
+    dataItemKey,
+    checkField,
+    checkIndeterminateField,
+    expandField,
+    subItemsField,
+    selectField,
+  };
+  
+  export default {
+    components: {
+      AutoComplete,
+      ComboBox,
+      DropDownList,
+      DropDownTree,
+      MultiSelect,
+      MultiSelectTree,
+    },
+    data: function () {
+      return {
+        sports: [
+          'Baseball',
+          'Basketball',
+          'Cricket',
+          'Field Hockey',
+          'Football',
+          'Table Tennis',
+          'Tennis',
+          'Volleyball',
+        ],
+        textField,
+        dataItemKey,
+        checkField,
+        checkIndeterminateField,
+        subItemsField,
+        expandField,
+        selectField,
+        dataItems: data,
+        valueMST: [],
+        valueDDT: null,
+        expanded: [data[0][dataItemKey]],
+      };
+    },
+    computed: {
+      multiSelectTreeData() {
+        return processMultiSelectTreeData(this.dataItems, {
+          expanded: this.expanded,
+          value: this.valueMST,
+          ...fields,
+        });
+      },
+      dropDownTreeData() {
+        return processTreeData(
+          this.dataItems,
+          { expanded: this.expanded, value: this.valueDDT },
+          fields
+        );
+      },
+    },
+    methods: {
+      onChange(event) {
+        this.valueMST = getMultiSelectTreeValue(this.dataItems, {
+          ...fields,
+          ...event,
+          value: this.valueMST,
+        });
+      },
+      onExpandChange(event) {
+        this.expanded = expandedState(event.item, dataItemKey, this.expanded);
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/dropdowns/rtl/multiselecttree-data-operations.js b/vue-options-api-demos/dropdowns/rtl/multiselecttree-data-operations.js
new file mode 100644
index 00000000..50ff55a2
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/rtl/multiselecttree-data-operations.js
@@ -0,0 +1,107 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { getter, setter } from '@progress/kendo-vue-common';
+
+export const getValueMap = (value, idGetter) => {
+    const map = {};
+
+    if (value && value.length) {
+        value.forEach((item) => {
+            map[idGetter(item)] = true;
+        });
+    }
+
+    return map;
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const keyGetter = getter(dataItemKey);
+    const itemKey = keyGetter(item);
+    const index = expanded.findIndex(currentKey => {
+        return currentKey === itemKey;
+    });
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
+
+const mapMultiSelectTreeData = (
+    data,
+    options
+) => {
+    const {
+        keyGetter,
+        subItemGetter,
+        subItemSetter,
+        checkSetter,
+        expandedSetter,
+        checkIndeterminateSetter,
+        valueMap,
+        expandedMap
+    } = options;
+
+    if (!data || !data.length) { return [data, false];}
+
+    let hasChecked = false;
+    const newData = [...data].map(dataItem => {
+        const [children, hasCheckedChildren] = mapMultiSelectTreeData(subItemGetter(dataItem), options);
+
+        const isChecked = valueMap[keyGetter(dataItem)];
+        if (isChecked || hasCheckedChildren) {
+            hasChecked = true;
+        }
+
+        const newItem = { ...dataItem };
+
+        expandedSetter(newItem, expandedMap[keyGetter(newItem)])
+        subItemSetter(newItem, children);
+        checkSetter(newItem, isChecked);
+        checkIndeterminateSetter(newItem, !isChecked && hasCheckedChildren);
+
+        return newItem;
+    });
+
+    return [newData, hasChecked];
+};
+
+/**
+ * Creates a new array with the results of calling the provided callback function
+ * on every element in the provided data tree. The new tree items have their `check` and `checkIndeterminate` fields set.
+ */
+export const processMultiSelectTreeData = (
+    tree,
+    options
+) => {
+    const {
+        subItemsField = 'items',
+        checkField = 'checkField',
+        checkIndeterminateField = 'checkIndeterminateField',
+        expandField = 'expanded',
+        dataItemKey,
+        value,
+        filter,
+        expanded
+    } = options;
+
+    const keyGetter = getter(dataItemKey);
+    const filtering = Boolean(filter && filter.value);
+    const expandedMap = {};
+
+    expanded.forEach((id) => expandedMap[id] = true);
+
+    const [result] = mapMultiSelectTreeData(
+        tree,
+        {
+            valueMap: getValueMap(value, keyGetter),
+            expandedMap: expandedMap,
+            keyGetter,
+            expandedSetter: setter(expandField),
+            subItemGetter: getter(subItemsField),
+            subItemSetter: setter(subItemsField),
+            checkSetter: setter(checkField),
+            checkIndeterminateSetter: setter(checkIndeterminateField)
+        }
+    );
+
+    return filtering ? filterBy(result, [ filter ], subItemsField) : result;
+};
diff --git a/vue-options-api-demos/dropdowns/rtl/tree-data-operations.js b/vue-options-api-demos/dropdowns/rtl/tree-data-operations.js
new file mode 100644
index 00000000..c32766b4
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/rtl/tree-data-operations.js
@@ -0,0 +1,31 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { mapTree, extendDataItem } from '@progress/kendo-vue-common';
+
+export const processTreeData = (data, state, fields) => {
+    const { selectField, expandField, dataItemKey, subItemsField } = fields;
+    const { expanded, value, filter } = state;
+    const filtering = Boolean(filter && filter.value);
+
+    return mapTree(
+        filtering ? filterBy(data, [ filter ], subItemsField) : data,
+        subItemsField,
+        item => {
+            const props = {
+                [expandField]: expanded.includes(item[dataItemKey]),
+                [selectField]: value && item[dataItemKey] === value[dataItemKey]
+            };
+            return filtering ?
+                extendDataItem(item, subItemsField, props) :
+                { ...item, ...props };
+        }
+    );
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const itemKey = item[dataItemKey];
+    const index = expanded.indexOf(itemKey);
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
diff --git a/vue-options-api-demos/dropdowns/rtl/tree-data.js b/vue-options-api-demos/dropdowns/rtl/tree-data.js
new file mode 100644
index 00000000..5b749471
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/rtl/tree-data.js
@@ -0,0 +1,15 @@
+export const data = [
+    {
+        text: 'Furniture', id: 1, items: [
+            { text: 'Tables & Chairs', id: 2 },
+            { text: 'Sofas', id: 3 },
+            { text: 'Occasional Furniture', id: 4 }
+        ]
+    }, {
+        text: 'Decor', id: 5, items: [
+            { text: 'Bed Linen', id: 6 },
+            { text: 'Curtains & Blinds', id: 7 },
+            { text: 'Carpets', id: 8 }
+        ]
+    }
+];
diff --git a/vue-options-api-demos/dropdowns/shared/DropDownStyleConfigurator.vue b/vue-options-api-demos/dropdowns/shared/DropDownStyleConfigurator.vue
new file mode 100644
index 00000000..c1b36044
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/shared/DropDownStyleConfigurator.vue
@@ -0,0 +1,105 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Fill Mode
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="fillModes"
+              :value="fillMode"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleFillModeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+    fillMode: String,
+    rounded: String,
+  },
+  emits: [
+    "sizechange",
+    "fillmodechange",
+    "roundedchange",
+  ],
+  data() {
+    return {
+      sizes: ["small", "medium", "large"],
+      fillModes: ["solid", "outline", "flat"],
+      roundedOptions: ["small", "medium", "large", "full"],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleFillModeChange(event) {
+      this.$emit("fillmodechange", event);
+    },
+    handleRoundedChange(event) {
+      this.$emit("roundedchange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/dropdowns/shared/countries.js b/vue-options-api-demos/dropdowns/shared/countries.js
new file mode 100644
index 00000000..45b6cb20
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/shared/countries.js
@@ -0,0 +1,52 @@
+export default [
+    "Albania",
+    "Andorra",
+    "Armenia",
+    "Austria",
+    "Azerbaijan",
+    "Belarus",
+    "Belgium",
+    "Bosnia & Herzegovina",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czech Republic",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Georgia",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Iceland",
+    "Ireland",
+    "Italy",
+    "Kosovo",
+    "Latvia",
+    "Liechtenstein",
+    "Lithuania",
+    "Luxembourg",
+    "Macedonia",
+    "Malta",
+    "Moldova",
+    "Monaco",
+    "Montenegro",
+    "Netherlands",
+    "Norway",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Russia",
+    "San Marino",
+    "Serbia",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden",
+    "Switzerland",
+    "Turkey",
+    "Ukraine",
+    "United Kingdom",
+    "Vatican City"
+];
diff --git a/vue-options-api-demos/dropdowns/shared/es.json b/vue-options-api-demos/dropdowns/shared/es.json
new file mode 100644
index 00000000..dc3df71d
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/shared/es.json
@@ -0,0 +1,6 @@
+{
+    "dropdowns": {
+        "nodata": "DATOS NO ENCONTRADOS.",
+        "clear": "claro"
+    }
+}
diff --git a/vue-options-api-demos/dropdowns/shared/multiselecttree-data-operations.js b/vue-options-api-demos/dropdowns/shared/multiselecttree-data-operations.js
new file mode 100644
index 00000000..50ff55a2
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/shared/multiselecttree-data-operations.js
@@ -0,0 +1,107 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { getter, setter } from '@progress/kendo-vue-common';
+
+export const getValueMap = (value, idGetter) => {
+    const map = {};
+
+    if (value && value.length) {
+        value.forEach((item) => {
+            map[idGetter(item)] = true;
+        });
+    }
+
+    return map;
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const keyGetter = getter(dataItemKey);
+    const itemKey = keyGetter(item);
+    const index = expanded.findIndex(currentKey => {
+        return currentKey === itemKey;
+    });
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
+
+const mapMultiSelectTreeData = (
+    data,
+    options
+) => {
+    const {
+        keyGetter,
+        subItemGetter,
+        subItemSetter,
+        checkSetter,
+        expandedSetter,
+        checkIndeterminateSetter,
+        valueMap,
+        expandedMap
+    } = options;
+
+    if (!data || !data.length) { return [data, false];}
+
+    let hasChecked = false;
+    const newData = [...data].map(dataItem => {
+        const [children, hasCheckedChildren] = mapMultiSelectTreeData(subItemGetter(dataItem), options);
+
+        const isChecked = valueMap[keyGetter(dataItem)];
+        if (isChecked || hasCheckedChildren) {
+            hasChecked = true;
+        }
+
+        const newItem = { ...dataItem };
+
+        expandedSetter(newItem, expandedMap[keyGetter(newItem)])
+        subItemSetter(newItem, children);
+        checkSetter(newItem, isChecked);
+        checkIndeterminateSetter(newItem, !isChecked && hasCheckedChildren);
+
+        return newItem;
+    });
+
+    return [newData, hasChecked];
+};
+
+/**
+ * Creates a new array with the results of calling the provided callback function
+ * on every element in the provided data tree. The new tree items have their `check` and `checkIndeterminate` fields set.
+ */
+export const processMultiSelectTreeData = (
+    tree,
+    options
+) => {
+    const {
+        subItemsField = 'items',
+        checkField = 'checkField',
+        checkIndeterminateField = 'checkIndeterminateField',
+        expandField = 'expanded',
+        dataItemKey,
+        value,
+        filter,
+        expanded
+    } = options;
+
+    const keyGetter = getter(dataItemKey);
+    const filtering = Boolean(filter && filter.value);
+    const expandedMap = {};
+
+    expanded.forEach((id) => expandedMap[id] = true);
+
+    const [result] = mapMultiSelectTreeData(
+        tree,
+        {
+            valueMap: getValueMap(value, keyGetter),
+            expandedMap: expandedMap,
+            keyGetter,
+            expandedSetter: setter(expandField),
+            subItemGetter: getter(subItemsField),
+            subItemSetter: setter(subItemsField),
+            checkSetter: setter(checkField),
+            checkIndeterminateSetter: setter(checkIndeterminateField)
+        }
+    );
+
+    return filtering ? filterBy(result, [ filter ], subItemsField) : result;
+};
diff --git a/vue-options-api-demos/dropdowns/shared/shop.js b/vue-options-api-demos/dropdowns/shared/shop.js
new file mode 100644
index 00000000..bc7a6c93
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/shared/shop.js
@@ -0,0 +1,31 @@
+export const foods = [
+    'Garlic bread',
+    'Chicken nuggets',
+    'Potatoes',
+    'Rice',
+    'Tomato sauce',
+    'Broccoli',
+    'Cheddar',
+    'Cereal',
+    'Beef',
+    'Lobster',
+    'Salmon',
+    'Mushrooms',
+    'Onions',
+    'Apples',
+    'Oranges',
+    'Burritos'
+];
+
+export const drinks = [
+    'Milk',
+    'Water',
+    'Apple juice',
+    'Orange juice',
+    'Beer',
+    'Soda',
+    'Champagne',
+    'Red wine',
+    'Rum',
+    'Sake'
+];
diff --git a/vue-options-api-demos/dropdowns/shared/tree-data-operations.js b/vue-options-api-demos/dropdowns/shared/tree-data-operations.js
new file mode 100644
index 00000000..c32766b4
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/shared/tree-data-operations.js
@@ -0,0 +1,31 @@
+import { filterBy } from '@progress/kendo-vue-data-tools';
+import { mapTree, extendDataItem } from '@progress/kendo-vue-common';
+
+export const processTreeData = (data, state, fields) => {
+    const { selectField, expandField, dataItemKey, subItemsField } = fields;
+    const { expanded, value, filter } = state;
+    const filtering = Boolean(filter && filter.value);
+
+    return mapTree(
+        filtering ? filterBy(data, [ filter ], subItemsField) : data,
+        subItemsField,
+        item => {
+            const props = {
+                [expandField]: expanded.includes(item[dataItemKey]),
+                [selectField]: value && item[dataItemKey] === value[dataItemKey]
+            };
+            return filtering ?
+                extendDataItem(item, subItemsField, props) :
+                { ...item, ...props };
+        }
+    );
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+    const nextExpanded = expanded.slice();
+    const itemKey = item[dataItemKey];
+    const index = expanded.indexOf(itemKey);
+    index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+    return nextExpanded;
+};
diff --git a/vue-options-api-demos/dropdowns/shared/tree-data.js b/vue-options-api-demos/dropdowns/shared/tree-data.js
new file mode 100644
index 00000000..5b749471
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/shared/tree-data.js
@@ -0,0 +1,15 @@
+export const data = [
+    {
+        text: 'Furniture', id: 1, items: [
+            { text: 'Tables & Chairs', id: 2 },
+            { text: 'Sofas', id: 3 },
+            { text: 'Occasional Furniture', id: 4 }
+        ]
+    }, {
+        text: 'Decor', id: 5, items: [
+            { text: 'Bed Linen', id: 6 },
+            { text: 'Curtains & Blinds', id: 7 },
+            { text: 'Carpets', id: 8 }
+        ]
+    }
+];
diff --git a/vue-options-api-demos/dropdowns/shared/tree-files-data.js b/vue-options-api-demos/dropdowns/shared/tree-files-data.js
new file mode 100644
index 00000000..4fc5bfec
--- /dev/null
+++ b/vue-options-api-demos/dropdowns/shared/tree-files-data.js
@@ -0,0 +1,28 @@
+export const data = [ {
+    text: 'My Documents', id: 1,
+    items: [
+        {
+            text: 'Kendo UI for Vue Project', id: 2,
+            items: [
+                { text: 'about.html', id: 3 },
+                { text: 'index.html', id: 4 },
+                { text: 'logo.png', id: 5 }
+            ]
+        },
+        {
+            text: 'New Web Site', id: 6,
+            items: [
+                { text: 'mockup.jpg', id: 7 },
+                { text: 'Research.pdf', id: 8 }
+            ]
+        },
+        {
+            text: 'Reports', id: 9,
+            items: [
+                { text: 'February.pdf', id: 10 },
+                { text: 'March.pdf', id: 11 },
+                { text: 'April.pdf', id: 12 }
+            ]
+        }
+    ]
+} ];
\ No newline at end of file
diff --git a/vue-options-api-demos/editor/all-tools/content.js b/vue-options-api-demos/editor/all-tools/content.js
new file mode 100644
index 00000000..009c377b
--- /dev/null
+++ b/vue-options-api-demos/editor/all-tools/content.js
@@ -0,0 +1,3 @@
+const content = `<p>The Kendo UI for Vue Native Editor allows your users to edit HTML in a familiar, user-friendly way.<br />The Editor provides the core HTML editing engine, which includes text formatting, hyperlinks, and lists. The component <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards, and provides API for content manipulation.</p><p>Features include:</p><ul><li><p>Text formatting</p></li><li><p>Bulleted and numbered lists</p></li><li><p>Hyperlinks</p></li><li><p>Cross-browser support</p></li><li><p>Identical HTML output across browsers</p></li></ul>`;
+
+export default content;
diff --git a/vue-options-api-demos/editor/all-tools/main.js b/vue-options-api-demos/editor/all-tools/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/editor/all-tools/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/editor/all-tools/main.vue b/vue-options-api-demos/editor/all-tools/main.vue
new file mode 100644
index 00000000..ff0b027f
--- /dev/null
+++ b/vue-options-api-demos/editor/all-tools/main.vue
@@ -0,0 +1,47 @@
+<template>
+  <Editor
+    :tools="tools"
+    :content-style="{
+      height: '400px',
+    }"
+    :default-content="content"
+  />
+</template>
+
+<script>
+import { Editor } from "@progress/kendo-vue-editor";
+import content from "./content";
+
+export default {
+  components: {
+    Editor,
+  },
+  data() {
+    return {
+      tools: [
+        ["Bold", "Italic", "Underline", "Strikethrough"],
+        ["Subscript", "Superscript"],
+        "ForeColor",
+        "BackColor",
+        ["CleanFormatting"],
+        ["AlignLeft", "AlignCenter", "AlignRight", "AlignJustify"],
+        ["Indent", "Outdent"],
+        ["OrderedList", "UnorderedList"],
+        "FontSize",
+        "FontName",
+        "FormatBlock",
+        ["SelectAll"],
+        ["Undo", "Redo"],
+        ["Link", "Unlink", "InsertImage", "ViewHtml"],
+        ["InsertTable", "InsertFile"],
+        ["Pdf", "Print"],
+        ["AddRowBefore", "AddRowAfter", "AddColumnBefore", "AddColumnAfter"],
+        ["DeleteRow", "DeleteColumn", "DeleteTable"],
+        ["MergeCells", "SplitCell"],
+      ],
+      content: content,
+    };
+  },
+};
+</script>
+
diff --git a/vue-options-api-demos/editor/controlled-value-doc/main.js b/vue-options-api-demos/editor/controlled-value-doc/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/editor/controlled-value-doc/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/editor/controlled-value-doc/main.vue b/vue-options-api-demos/editor/controlled-value-doc/main.vue
new file mode 100644
index 00000000..249a4968
--- /dev/null
+++ b/vue-options-api-demos/editor/controlled-value-doc/main.vue
@@ -0,0 +1,39 @@
+<template>
+  <Editor
+    :tools="tools"
+    :content-style="{ height: '100px' }"
+    @change="onChange"
+    :value="value"
+  />
+</template>
+
+<script>
+import {
+  Editor,
+  EditorUtils,
+  ProseMirror,
+} from "@progress/kendo-vue-editor";
+
+export default {
+  components: {
+    Editor,
+  },
+  data() {
+    return {
+      tools: [["Bold", "Italic"]],
+      value: EditorUtils.createDocument(
+        new ProseMirror.Schema({
+          nodes: EditorUtils.nodes,
+          marks: EditorUtils.marks,
+        }),
+        "<p>Editor sample content</p>"
+      ),
+    };
+  },
+  methods: {
+    onChange(event) {
+      this.value = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/editor/controlled-value-string/main.js b/vue-options-api-demos/editor/controlled-value-string/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/editor/controlled-value-string/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/editor/controlled-value-string/main.vue b/vue-options-api-demos/editor/controlled-value-string/main.vue
new file mode 100644
index 00000000..00a5dd8b
--- /dev/null
+++ b/vue-options-api-demos/editor/controlled-value-string/main.vue
@@ -0,0 +1,31 @@
+<template>
+  <Editor
+    :tools="tools"
+    :content-style="{ height: '100px' }"
+    @change="onChange"
+    :value="value"
+  />
+</template>
+
+<script>
+import {
+  Editor
+} from "@progress/kendo-vue-editor";
+
+export default {
+  components: {
+    Editor,
+  },
+  data() {
+    return {
+      tools: [["Bold", "Italic"]],
+      value: "<p>Editor sample content</p>",
+    };
+  },
+  methods: {
+    onChange(event) {
+      this.value = event.html;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/editor/edit-built-in-tools/content-basic.js b/vue-options-api-demos/editor/edit-built-in-tools/content-basic.js
new file mode 100644
index 00000000..e02950c2
--- /dev/null
+++ b/vue-options-api-demos/editor/edit-built-in-tools/content-basic.js
@@ -0,0 +1,3 @@
+const content = `<p>The Kendo UI for Vue Native Editor allows your users to edit HTML in a familiar, user-friendly way.<br />The Editor provides the core HTML editing engine, which includes text formatting, hyperlinks, and lists. The component <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards, and provides API for content manipulation.</p>`;
+
+export default content;
diff --git a/vue-options-api-demos/editor/edit-built-in-tools/main.js b/vue-options-api-demos/editor/edit-built-in-tools/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/editor/edit-built-in-tools/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/editor/edit-built-in-tools/main.vue b/vue-options-api-demos/editor/edit-built-in-tools/main.vue
new file mode 100644
index 00000000..a4eda7df
--- /dev/null
+++ b/vue-options-api-demos/editor/edit-built-in-tools/main.vue
@@ -0,0 +1,152 @@
+<template>
+  <Editor
+    :tools="tools"
+    :default-content="content"
+    :content-style="{
+      height: '300px',
+    }"
+  >
+    <template v-slot:MyBold="{ props }">
+      <inlineformat v-bind="props" />
+    </template>
+    <template v-slot:MyItalic="{ props }">
+      <inlineformat v-bind="props" />
+    </template>
+    <template v-slot:MyUnderline="{ props }">
+      <inlineformat v-bind="props" />
+    </template>
+    <template v-slot:MyFontSizeTool="{ props }">
+      <fontsize
+        v-bind="props"
+        :style="{
+          width: '110px',
+          ...props.style,
+        }"
+      />
+    </template>
+    <template v-slot:MyFontNameTool="{ props }">
+      <fontname
+        v-bind="props"
+        :style="{
+          width: '110px',
+          ...props.style,
+        }"
+      />
+    </template>
+  </Editor>
+</template>
+
+<script>
+import {
+  Editor,
+  EditorToolsSettings,
+  InlineFormat,
+  FontName,
+} from '@progress/kendo-vue-editor';
+import content from './content-basic';
+
+const customBoldSettings = {
+  // Toggle the 'B' tag.
+  mark: 'b',
+  // Recognize the 'STRONG' tag also as Bold.
+  altMarks: ['strong'],
+  props: {
+    title: 'My Custom Bold',
+    icon: EditorToolsSettings.bold.props.icon,
+  },
+  messages: {},
+};
+
+const customItalicSettings = {
+  // Toggle the 'I' tag.
+  mark: 'i',
+  // Recognize the 'EM' tag also as Bold.
+  altMarks: ['em'],
+  props: {
+    title: 'My Custom Italic',
+    icon: EditorToolsSettings.italic.props.icon,
+  },
+  messages: {},
+};
+
+const customUnderlineSettings = {
+  // Toggle the 'U' tag.
+  mark: 'u',
+  props: {
+    title: 'My Custom Underline',
+    icon: EditorToolsSettings.underline.props.icon,
+  },
+  messages: {},
+};
+
+const fontSizeToolSettings = {
+  ...EditorToolsSettings.fontSize,
+  items: [
+    {
+      text: '10',
+      value: '10pt',
+    },
+    {
+      text: '12',
+      value: '12pt',
+    },
+    {
+      text: '14',
+      value: '14pt',
+    },
+    {
+      text: '18',
+      value: '18pt',
+    },
+    {
+      text: '22',
+      value: '22pt',
+    },
+    {
+      text: '36',
+      value: '36pt',
+    },
+  ],
+};
+
+const fontNameToolSettings = {
+  ...EditorToolsSettings.fontName,
+  items: [
+    {
+      text: 'Noto Sans TC',
+      value: 'Noto Sans TC, sans-serif',
+    },
+    {
+      text: 'Impact',
+      value: 'Impact, Charcoal, sans-serif',
+    },
+    {
+      text: 'Arial',
+      value: 'Arial, Helvetica, sans-serif',
+    },
+  ],
+};
+
+export default {
+  components: {
+    Editor,
+    inlineformat: InlineFormat,
+    fontsize: FontName,
+    fontname: FontName,
+  },
+  data() {
+    return {
+      content: content,
+      tools: [
+        [
+          { render: 'MyBold', props: customBoldSettings },
+          { render: 'MyItalic', props: customItalicSettings },
+          { render: 'MyUnderline', props: customUnderlineSettings },
+        ],
+        { render: 'MyFontSizeTool', props: fontSizeToolSettings },
+        { render: 'MyFontNameTool', props: fontNameToolSettings },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/editor/events/Logger.vue b/vue-options-api-demos/editor/events/Logger.vue
new file mode 100644
index 00000000..aa04a80b
--- /dev/null
+++ b/vue-options-api-demos/editor/events/Logger.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="example-config">
+    <h5>{{ title }}</h5>
+    <ul class="event-log">
+      <li v-for="(event, idx) in events" :key="idx">{{ event }}</li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    events: Array,
+    title: String,
+  },
+};
+</script>
+
+<style scoped>
+.example-config {
+  margin: 0 0 20px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+  margin: 0;
+  padding: 0;
+  max-height: 100px;
+  overflow-y: auto;
+  list-style-type: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: white;
+}
+.event-log li {
+  margin: 0;
+  padding: 0.3em;
+  line-height: 1.2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+  margin-bottom: -1px;
+}
+</style>
\ No newline at end of file
diff --git a/vue-options-api-demos/editor/events/content.js b/vue-options-api-demos/editor/events/content.js
new file mode 100644
index 00000000..009c377b
--- /dev/null
+++ b/vue-options-api-demos/editor/events/content.js
@@ -0,0 +1,3 @@
+const content = `<p>The Kendo UI for Vue Native Editor allows your users to edit HTML in a familiar, user-friendly way.<br />The Editor provides the core HTML editing engine, which includes text formatting, hyperlinks, and lists. The component <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards, and provides API for content manipulation.</p><p>Features include:</p><ul><li><p>Text formatting</p></li><li><p>Bulleted and numbered lists</p></li><li><p>Hyperlinks</p></li><li><p>Cross-browser support</p></li><li><p>Identical HTML output across browsers</p></li></ul>`;
+
+export default content;
diff --git a/vue-options-api-demos/editor/events/main.js b/vue-options-api-demos/editor/events/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/editor/events/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/editor/events/main.vue b/vue-options-api-demos/editor/events/main.vue
new file mode 100644
index 00000000..9aebf7b8
--- /dev/null
+++ b/vue-options-api-demos/editor/events/main.vue
@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <Editor
+      :tools="tools"
+      :content-style="{
+        height: '430px',
+      }"
+      :default-content="content"
+      @blur="onBlur"
+      @change="onChange"
+      @execute="onExecute"
+      @focus="onFocus"
+      @loaded="onLoaded"
+      :paste-html="onPaste"
+    />
+    <br />
+    <br />
+    <Logger :title="'Events list'" :events="eventsList" />
+  </div>
+</template>
+<script>
+import { Editor } from '@progress/kendo-vue-editor';
+import content from './content';
+import Logger from './Logger.vue';
+
+export default {
+  components: {
+    Logger,
+    Editor,
+  },
+  computed: {
+    eventsList() {
+      return this.events;
+    },
+  },
+  data: function () {
+    return {
+      tools: [
+        ['Bold', 'Italic', 'Underline'],
+        ['Undo', 'Redo'],
+        ['Link', 'Unlink'],
+        ['AlignLeft', 'AlignCenter', 'AlignRight'],
+        ['OrderedList', 'UnorderedList', 'Indent', 'Outdent'],
+      ],
+      content: content,
+      events: [],
+    };
+  },
+  methods: {
+    onChange(e) {
+      this.events.unshift('Change event triggered.');
+    },
+    onBlur(e) {
+      this.events.unshift('Blur event triggered.');
+    },
+    onExecute(e) {
+      this.events.unshift('Execute event triggered.');
+    },
+    onFocus(e) {
+      this.events.unshift('Focus event triggered.');
+    },
+    onLoaded(e) {
+      this.events.unshift('Loaded event triggered.');
+    },
+    onPaste(e) {
+      this.events.unshift('PasteHTML triggered.');
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/editor/find-replace/content-overview.js b/vue-options-api-demos/editor/find-replace/content-overview.js
new file mode 100644
index 00000000..136cfe6c
--- /dev/null
+++ b/vue-options-api-demos/editor/find-replace/content-overview.js
@@ -0,0 +1,3 @@
+const content = `<p style="text-align: center;"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/labs/kendo/2020-revamp/vue-kendoka-bottom.png" alt="Kendo UI for Vue logo" title="Kendo UI for Vue Native" width="100" height="100" /></p><p><strong>Kendo UI for Vue Native Editor</strong> allows your users to edit HTML in a familiar, user-friendly way.<br>In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists, and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards and provides <a href="https://www.telerik.com/kendo-vue-ui/components/editor/tools/" target="_blank" title="https://www.telerik.com/kendo-vue-ui/components/editor/tools/">multiple tools</a> for content manipulation.</p><p>Features include:</p><ul><li><p>Text formatting &amp; alignment</p></li><li><p>Bulleted and numbered lists</p></li><li><p>Hyperlink and image dialogs</p></li><li><p>Identical HTML output across modern browsers</p></li><li><p>Highly customizable tools</p></li></ul><p></p><p>The Editor has a table option as well, allowing to add and edit tabular data.<br /></p><table><tbody><tr><td><p style="text-align: center;"><strong>Product Id</strong></p></td><td><p style="text-align: center;"><strong>Product Name</strong></p></td><td><p style="text-align: center;"><strong>Price</strong></p></td></tr><tr><td><p>1</p></td><td><p>Chai</p></td><td><p style="text-align: right;">18</p></td></tr><tr><td><p>2</p></td><td><p>Chang</p></td><td><p style="text-align: right;">19</p></td></tr><tr><td><p>3</p></td><td><p>Aniseed Syrup</p></td><td><p style="text-align: right;">10</p></td></tr></tbody></table><p></p>`;
+
+export default content;
diff --git a/vue-options-api-demos/editor/find-replace/main.js b/vue-options-api-demos/editor/find-replace/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/editor/find-replace/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/editor/find-replace/main.vue b/vue-options-api-demos/editor/find-replace/main.vue
new file mode 100644
index 00000000..0f976f2a
--- /dev/null
+++ b/vue-options-api-demos/editor/find-replace/main.vue
@@ -0,0 +1,27 @@
+<template>
+  <Editor
+    :tools="tools"
+    :content-style="{
+      height: '630px',
+    }"
+    :default-content="content"
+  />
+</template>
+
+<script>
+import { Editor } from "@progress/kendo-vue-editor";
+import content from "./content-overview";
+
+export default {
+  components: {
+    Editor,
+  },
+  data() {
+    return {
+      tools: [["Bold", "Italic", "Underline"], "FindAndReplace"],
+      content: content,
+    };
+  },
+};
+</script>
+
diff --git a/vue-options-api-demos/editor/get-started/content.js b/vue-options-api-demos/editor/get-started/content.js
new file mode 100644
index 00000000..009c377b
--- /dev/null
+++ b/vue-options-api-demos/editor/get-started/content.js
@@ -0,0 +1,3 @@
+const content = `<p>The Kendo UI for Vue Native Editor allows your users to edit HTML in a familiar, user-friendly way.<br />The Editor provides the core HTML editing engine, which includes text formatting, hyperlinks, and lists. The component <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards, and provides API for content manipulation.</p><p>Features include:</p><ul><li><p>Text formatting</p></li><li><p>Bulleted and numbered lists</p></li><li><p>Hyperlinks</p></li><li><p>Cross-browser support</p></li><li><p>Identical HTML output across browsers</p></li></ul>`;
+
+export default content;
diff --git a/vue-options-api-demos/editor/get-started/main.js b/vue-options-api-demos/editor/get-started/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/editor/get-started/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/editor/get-started/main.vue b/vue-options-api-demos/editor/get-started/main.vue
new file mode 100644
index 00000000..5b2f6deb
--- /dev/null
+++ b/vue-options-api-demos/editor/get-started/main.vue
@@ -0,0 +1,33 @@
+<template>
+  <Editor
+    :tools="tools"
+    :content-style="{
+      height: '430px',
+    }"
+    :default-content="content"
+  />
+</template>
+
+<script>
+import { Editor } from "@progress/kendo-vue-editor";
+import content from "./content";
+
+export default {
+  components: {
+    Editor,
+  },
+  data() {
+    return {
+      tools: [
+        ["Bold", "Italic", "Underline"],
+        ["Undo", "Redo"],
+        ["Link", "Unlink"],
+        ["AlignLeft", "AlignCenter", "AlignRight"],
+        ["OrderedList", "UnorderedList", "Indent", "Outdent"],
+      ],
+      content: content,
+    };
+  },
+};
+</script>
+
diff --git a/vue-options-api-demos/editor/gets-and-sets-html/content.js b/vue-options-api-demos/editor/gets-and-sets-html/content.js
new file mode 100644
index 00000000..009c377b
--- /dev/null
+++ b/vue-options-api-demos/editor/gets-and-sets-html/content.js
@@ -0,0 +1,3 @@
+const content = `<p>The Kendo UI for Vue Native Editor allows your users to edit HTML in a familiar, user-friendly way.<br />The Editor provides the core HTML editing engine, which includes text formatting, hyperlinks, and lists. The component <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards, and provides API for content manipulation.</p><p>Features include:</p><ul><li><p>Text formatting</p></li><li><p>Bulleted and numbered lists</p></li><li><p>Hyperlinks</p></li><li><p>Cross-browser support</p></li><li><p>Identical HTML output across browsers</p></li></ul>`;
+
+export default content;
diff --git a/vue-options-api-demos/editor/gets-and-sets-html/main.js b/vue-options-api-demos/editor/gets-and-sets-html/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/editor/gets-and-sets-html/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/editor/gets-and-sets-html/main.vue b/vue-options-api-demos/editor/gets-and-sets-html/main.vue
new file mode 100644
index 00000000..635b52be
--- /dev/null
+++ b/vue-options-api-demos/editor/gets-and-sets-html/main.vue
@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <Editor
+      :tools="[['Bold', 'Italic', 'Underline']]"
+      :content-style="{
+        height: '160px',
+      }"
+      :default-content="'<p>editor sample html</p>'"
+      ref="editor"
+    />
+    <br />
+    <kbutton :svg-icon="arrowDownIcon" @click="getHtml"> Gets HTML </kbutton>
+    &nbsp;
+    <kbutton :svg-icon="arrowUpIcon" @click="setHtml"> Sets HTML </kbutton>
+    <br />
+    <br />
+    <ktextarea
+      :style="{
+        height: '100px',
+        width: '100%',
+        resize: 'none',
+      }"
+      :default-value="'<p>textarea sample html</p>'"
+      ref="textarea"
+    />
+  </div>
+</template>
+
+<script>
+import { Button } from "@progress/kendo-vue-buttons";
+import { TextArea } from "@progress/kendo-vue-inputs";
+import { Editor } from "@progress/kendo-vue-editor";
+import { arrowUpIcon, arrowDownIcon } from "@progress/kendo-svg-icons";
+import content from "./content";
+
+export default {
+  components: {
+    kbutton: Button,
+    ktextarea: TextArea,
+    Editor,
+  },
+  data() {
+    return {
+      arrowUpIcon,
+      arrowDownIcon,
+      tools: [
+        ["Bold", "Italic", "Underline", "Strikethrough"],
+        ["Subscript", "Superscript"],
+        ["AlignLeft", "AlignCenter", "AlignRight", "AlignJustify"],
+        ["Indent", "Outdent"],
+        ["OrderedList", "UnorderedList"],
+        "FontSize",
+        "FontName",
+        "FormatBlock",
+        ["Undo", "Redo"],
+        ["Link", "Unlink", "InsertImage", "ViewHtml"],
+        ["InsertTable"],
+        ["AddRowBefore", "AddRowAfter", "AddColumnBefore", "AddColumnAfter"],
+        ["DeleteRow", "DeleteColumn", "DeleteTable"],
+        ["MergeCells", "SplitCell"],
+      ],
+      content: content,
+    };
+  },
+  methods: {
+    getHtml() {
+      this.$refs.textarea.element.value = this.$refs.editor.getHTML();
+    },
+    setHtml() {
+      this.$refs.editor.setHTML(this.$refs.textarea.element.value);
+    },
+  },
+};
+</script>
+
diff --git a/vue-options-api-demos/editor/globalization/content.js b/vue-options-api-demos/editor/globalization/content.js
new file mode 100644
index 00000000..009c377b
--- /dev/null
+++ b/vue-options-api-demos/editor/globalization/content.js
@@ -0,0 +1,3 @@
+const content = `<p>The Kendo UI for Vue Native Editor allows your users to edit HTML in a familiar, user-friendly way.<br />The Editor provides the core HTML editing engine, which includes text formatting, hyperlinks, and lists. The component <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards, and provides API for content manipulation.</p><p>Features include:</p><ul><li><p>Text formatting</p></li><li><p>Bulleted and numbered lists</p></li><li><p>Hyperlinks</p></li><li><p>Cross-browser support</p></li><li><p>Identical HTML output across browsers</p></li></ul>`;
+
+export default content;
diff --git a/vue-options-api-demos/editor/globalization/deMessages.js b/vue-options-api-demos/editor/globalization/deMessages.js
new file mode 100644
index 00000000..c596a7fb
--- /dev/null
+++ b/vue-options-api-demos/editor/globalization/deMessages.js
@@ -0,0 +1,43 @@
+export const deMessages = {
+    'editor': {
+        'bold': 'Fett',
+        'italic': 'Kursiv',
+        'underline': 'Unterstrichen',
+        'strikethrough': 'Durchgestrichen',
+        'subscript': 'Tiefgestellt',
+        'superscript': 'Hochgestellt',
+        'hyperlink': 'Hyperlink einfügen',
+        'hyperlink-dialog-title': 'Hyperlink einfügen',
+        'hyperlink-dialog-content-address': 'Web-Adresse',
+        'hyperlink-dialog-content-title': 'Titel',
+        'hyperlink-dialog-content-newwindow': 'Link in einem neuen Fenster öffnen',
+        'hyperlink-dialog-cancel': 'Abbrechen',
+        'hyperlink-dialog-insert': 'Einfügen',
+        'image': 'Bild einfügen',
+        'image-dialog-title': 'Bild einfügen',
+        'image-address': 'Web-Adresse',
+        'image-title': 'Titel',
+        'image-altText': 'Abwechselnder Text',
+        'image-width': 'Breite (px)',
+        'image-height': 'Höhe (px)',
+        'image-cancel': 'Abbrechen',
+        'image-insert': 'Einfügen',
+        'viewHtml': 'HTML anzeigen',
+        'viewHtml-dialog-title': 'HTML anzeigen',
+        'viewHtml-cancel': 'Abbrechen',
+        'viewHtml-update': 'Aktualisieren',
+        'unlink': 'Hyperlink entfernen',
+        'undo': 'Rückgängig machen',
+        'redo': 'Wiederholen',
+        'fontSize': 'Größe',
+        'fontName': 'Schrift',
+        'format': 'Absatzstil',
+        'alignLeft': 'Linksbündig',
+        'alignRight': 'Rechtsbündig',
+        'alignCenter': 'Zentriert',
+        'indent': 'Einzug vergrößern',
+        'outdent': 'Einzug verkleinern',
+        'orderedList': 'Numerierte Liste',
+        'bulletList': 'Aufzählliste'
+    }
+};
diff --git a/vue-options-api-demos/editor/globalization/main.js b/vue-options-api-demos/editor/globalization/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/editor/globalization/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/editor/globalization/main.vue b/vue-options-api-demos/editor/globalization/main.vue
new file mode 100644
index 00000000..44fb93e5
--- /dev/null
+++ b/vue-options-api-demos/editor/globalization/main.vue
@@ -0,0 +1,44 @@
+<template>
+  <LocalizationProvider :language="'de'">
+    <Editor
+      :tools="tools"
+      :default-content="content"
+      :content-style="{
+        height: '320px',
+      }"
+    />
+  </LocalizationProvider>
+</template>
+
+<script>
+import { loadMessages, LocalizationProvider } from "@progress/kendo-vue-intl";
+import { Editor } from "@progress/kendo-vue-editor";
+import { deMessages } from "./deMessages";
+import content from "./content";
+
+loadMessages(deMessages, "de");
+
+export default {
+  components: {
+    Editor,
+    LocalizationProvider,
+  },
+  data() {
+    return {
+      tools: [
+        ["Bold", "Italic", "Underline", "Strikethrough"],
+        ["Subscript", "Superscript"],
+        ["Undo", "Redo"],
+        ["Link", "Unlink", "InsertImage"],
+        ["AlignLeft", "AlignCenter", "AlignRight"],
+        ["OrderedList", "UnorderedList", "Indent", "Outdent"],
+        "ViewHtml",
+        "FontSize",
+        "FontName",
+        "FormatBlock",
+      ],
+      content: content,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/editor/markdown/main.js b/vue-options-api-demos/editor/markdown/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/editor/markdown/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/editor/markdown/main.vue b/vue-options-api-demos/editor/markdown/main.vue
new file mode 100644
index 00000000..21b73853
--- /dev/null
+++ b/vue-options-api-demos/editor/markdown/main.vue
@@ -0,0 +1,70 @@
+<template>
+  <Editor
+    :tools="tools"
+    :value="value"
+    :content-style="{
+      height: '325px',
+    }"
+    @change="onChange"
+    :extend-view="extendView"
+  />
+</template>
+
+<script>
+import { ProseMirror } from "@progress/kendo-vue-editor";
+const { EditorState, EditorView } = ProseMirror;
+import { Editor } from "@progress/kendo-vue-editor";
+import { defaultMarkdownParser, defaultMarkdownSerializer } from "prosemirror-markdown";
+import { markdown } from "./markdown.js";
+
+export default {
+  components: {
+    Editor,
+  },
+  data() {
+    return {
+      value: defaultMarkdownParser.parse(markdown),
+      tools: [
+      "Bold",
+        "Italic",
+        "Link",
+        "Unlink",
+        "InsertImage",
+        "FormatBlock",
+        "Undo",
+        "Redo",
+        "OrderedList",
+        "UnorderedList",
+      ],
+      markdown: markdown,
+    };
+  },
+  methods: {
+    extendView(event) {
+      const state = event.viewProps.state;
+      const plugins = [
+        ...state.plugins,
+        ProseMirror.keymap({ "Mod-u": () => true }),
+      ];
+
+      return new EditorView(
+        {
+          mount: event.dom,
+        },
+        {
+          ...event.viewProps,
+          state: EditorState.create({
+            doc: state.doc,
+            plugins,
+          }),
+        }
+      );
+    },
+    onChange(event) {
+      this.value = event.value;
+      // to get the updated markdown
+      console.log(defaultMarkdownSerializer.serialize(event.value));
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/editor/markdown/markdown.js b/vue-options-api-demos/editor/markdown/markdown.js
new file mode 100644
index 00000000..068638a8
--- /dev/null
+++ b/vue-options-api-demos/editor/markdown/markdown.js
@@ -0,0 +1,16 @@
+export const markdown = `The Kendo UI for Vue Editor allows your users to edit markdown in a familiar, user-friendly way.
+The Editor provides core editing engine, which includes text formatting, hyperlinks, lists and more. The component **outputs identical Markdown** across all major browsers, follows accessibility standards, and provides API for content manipulation.
+
+Features include:
+
+* Text formatting
+
+* Bulleted and numbered lists
+
+* Hyperlinks
+
+* Images ![Smile image](https://prosemirror.net/img/smiley.png "Smile")
+
+* Cross-browser support
+
+* Identical output across browsers`;
diff --git a/vue-options-api-demos/editor/overview/content-overview.js b/vue-options-api-demos/editor/overview/content-overview.js
new file mode 100644
index 00000000..136cfe6c
--- /dev/null
+++ b/vue-options-api-demos/editor/overview/content-overview.js
@@ -0,0 +1,3 @@
+const content = `<p style="text-align: center;"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/labs/kendo/2020-revamp/vue-kendoka-bottom.png" alt="Kendo UI for Vue logo" title="Kendo UI for Vue Native" width="100" height="100" /></p><p><strong>Kendo UI for Vue Native Editor</strong> allows your users to edit HTML in a familiar, user-friendly way.<br>In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists, and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards and provides <a href="https://www.telerik.com/kendo-vue-ui/components/editor/tools/" target="_blank" title="https://www.telerik.com/kendo-vue-ui/components/editor/tools/">multiple tools</a> for content manipulation.</p><p>Features include:</p><ul><li><p>Text formatting &amp; alignment</p></li><li><p>Bulleted and numbered lists</p></li><li><p>Hyperlink and image dialogs</p></li><li><p>Identical HTML output across modern browsers</p></li><li><p>Highly customizable tools</p></li></ul><p></p><p>The Editor has a table option as well, allowing to add and edit tabular data.<br /></p><table><tbody><tr><td><p style="text-align: center;"><strong>Product Id</strong></p></td><td><p style="text-align: center;"><strong>Product Name</strong></p></td><td><p style="text-align: center;"><strong>Price</strong></p></td></tr><tr><td><p>1</p></td><td><p>Chai</p></td><td><p style="text-align: right;">18</p></td></tr><tr><td><p>2</p></td><td><p>Chang</p></td><td><p style="text-align: right;">19</p></td></tr><tr><td><p>3</p></td><td><p>Aniseed Syrup</p></td><td><p style="text-align: right;">10</p></td></tr></tbody></table><p></p>`;
+
+export default content;
diff --git a/vue-options-api-demos/editor/overview/main.js b/vue-options-api-demos/editor/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/editor/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/editor/overview/main.vue b/vue-options-api-demos/editor/overview/main.vue
new file mode 100644
index 00000000..8a976165
--- /dev/null
+++ b/vue-options-api-demos/editor/overview/main.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <Editor
+      :tools="tools"
+      :content-style="{
+        height: '690px',
+      }"
+      :default-content="content"
+    />
+  </div>
+</template>
+
+<script>
+import { Editor } from "@progress/kendo-vue-editor";
+import content from "./content-overview";
+
+export default {
+  components: {
+    Editor,
+  },
+  data() {
+    return {
+      tools: [
+        ["Bold", "Italic", "Underline", "Strikethrough"],
+        ["Subscript", "Superscript"],
+        ["AlignLeft", "AlignCenter", "AlignRight", "AlignJustify"],
+        ["Indent", "Outdent"],
+        ["OrderedList", "UnorderedList"],
+        "FontSize",
+        "FontName",
+        "FormatBlock",
+        ["Undo", "Redo"],
+        ["Link", "Unlink", "InsertImage", "ViewHtml"],
+        ["InsertTable"],
+        ["AddRowBefore", "AddRowAfter", "AddColumnBefore", "AddColumnAfter"],
+        ["DeleteRow", "DeleteColumn", "DeleteTable"],
+        ["MergeCells", "SplitCell"],
+      ],
+      content: content,
+    };
+  },
+};
+</script>
+
diff --git a/vue-options-api-demos/editor/paste/main.js b/vue-options-api-demos/editor/paste/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/editor/paste/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/editor/paste/main.vue b/vue-options-api-demos/editor/paste/main.vue
new file mode 100644
index 00000000..fc714945
--- /dev/null
+++ b/vue-options-api-demos/editor/paste/main.vue
@@ -0,0 +1,64 @@
+<template>
+  <Editor
+    :tools="tools"
+    :content-style="{
+      height: '400px',
+    }"
+    :paste-html="onPasteHtml"
+  />
+</template>
+
+<script>
+import { Editor, EditorUtils } from "@progress/kendo-vue-editor";
+const {
+  pasteCleanup,
+  sanitize,
+  sanitizeClassAttr,
+  sanitizeStyleAttr,
+  removeAttribute,
+  replaceImageSourcesFromRtf,
+} = EditorUtils;
+const pasteSettings = {
+  convertMsLists: true,
+  // stripTags: 'span|font'
+  attributes: {
+    class: sanitizeClassAttr,
+    style: sanitizeStyleAttr,
+    // keep `width`, `height` and `src` attributes
+    width: () => {},
+    height: () => {},
+    src: () => {},
+    // Removes `lang` attribute
+    // lang: removeAttribute,
+    // removes other (unspecified above) attributes
+    "*": removeAttribute,
+  },
+};
+
+export default {
+  components: {
+    Editor,
+  },
+  data() {
+    return {
+      tools: [
+        ["Bold", "Italic", "Underline"],
+        ["Undo", "Redo"],
+      ],
+    };
+  },
+  methods: {
+    onPasteHtml(e) {
+      let html = pasteCleanup(sanitize(e.pastedHtml), pasteSettings); // If the pasted HTML contains images with sources pointing to the local file system,
+      // `replaceImageSourcesFromRtf` will extract the sources from the RTF and place them to images 'src' attribute in base64 format.
+
+      if (e.event.clipboardData) {
+        html = replaceImageSourcesFromRtf(html, e.event.clipboardData);
+      }
+
+      return html;
+    },
+  },
+};
+</script>
+
diff --git a/vue-options-api-demos/editor/plugins/placeholder/main.js b/vue-options-api-demos/editor/plugins/placeholder/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/editor/plugins/placeholder/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/editor/plugins/placeholder/main.vue b/vue-options-api-demos/editor/plugins/placeholder/main.vue
new file mode 100644
index 00000000..d4910ff9
--- /dev/null
+++ b/vue-options-api-demos/editor/plugins/placeholder/main.vue
@@ -0,0 +1,51 @@
+<template>
+  <Editor
+    :tools="tools"
+    :content-style="{
+      height: '200px',
+    }"
+    :extend-view="extendView"
+  />
+</template>
+
+<script>
+import { placeholder, styles } from "./placeholder";
+import { Editor, ProseMirror } from "@progress/kendo-vue-editor";
+
+export default {
+  components: {
+    Editor,
+  },
+  data() {
+    return {
+      tools: [["Bold", "Italic", "Underline"]],
+    };
+  },
+  methods: {
+    extendView(event) {
+      const state = event.viewProps.state;
+      const plugins = [...state.plugins, placeholder("Enter some content ...")];
+      const editorDocument = event.dom.ownerDocument;
+      const styleElement =
+        editorDocument && editorDocument.querySelector("style");
+
+      if (styleElement) {
+        styleElement.appendChild(editorDocument.createTextNode(styles));
+      }
+
+      return new ProseMirror.EditorView(
+        {
+          mount: event.dom,
+        },
+        {
+          ...event.viewProps,
+          state: ProseMirror.EditorState.create({
+            doc: state.doc,
+            plugins,
+          }),
+        }
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/editor/plugins/placeholder/placeholder.js b/vue-options-api-demos/editor/plugins/placeholder/placeholder.js
new file mode 100644
index 00000000..e36b6bd6
--- /dev/null
+++ b/vue-options-api-demos/editor/plugins/placeholder/placeholder.js
@@ -0,0 +1,38 @@
+import { ProseMirror } from '@progress/kendo-vue-editor';
+const { Plugin, PluginKey, Decoration, DecorationSet } = ProseMirror;
+export function placeholder(emptyMessage) {
+    return new Plugin({
+        key: new PluginKey('placeholder'),
+        props: {
+            decorations: (state) => {
+                const { doc } = state;
+                const empty =
+                    doc.textContent === '' &&
+                    doc.childCount <= 1 &&
+                    doc.content.size <= 2;
+
+                if (!empty) {
+                    return DecorationSet.empty;
+                }
+
+                const decorations = [];
+                const decAttrs = {
+                    class: 'placeholder',
+                    'data-placeholder': emptyMessage,
+                };
+                doc.descendants((node, pos) => {
+                    decorations.push(Decoration.node(pos, pos + node.nodeSize, decAttrs));
+                });
+                return DecorationSet.create(doc, decorations);
+            },
+        },
+    });
+}
+export const styles = `p.placeholder:first-child:before {
+        content: attr(data-placeholder);
+        float: left;
+        color: rgb(0, 0, 0, 0.5);
+        cursor: text;
+        height: 0;
+        font-style: italic;
+    }`;
diff --git a/vue-options-api-demos/editor/plugins/readonly/content-basic.js b/vue-options-api-demos/editor/plugins/readonly/content-basic.js
new file mode 100644
index 00000000..e02950c2
--- /dev/null
+++ b/vue-options-api-demos/editor/plugins/readonly/content-basic.js
@@ -0,0 +1,3 @@
+const content = `<p>The Kendo UI for Vue Native Editor allows your users to edit HTML in a familiar, user-friendly way.<br />The Editor provides the core HTML editing engine, which includes text formatting, hyperlinks, and lists. The component <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards, and provides API for content manipulation.</p>`;
+
+export default content;
diff --git a/vue-options-api-demos/editor/plugins/readonly/main.js b/vue-options-api-demos/editor/plugins/readonly/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/editor/plugins/readonly/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/editor/plugins/readonly/main.vue b/vue-options-api-demos/editor/plugins/readonly/main.vue
new file mode 100644
index 00000000..327109d9
--- /dev/null
+++ b/vue-options-api-demos/editor/plugins/readonly/main.vue
@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <k-button @click="toggleEditable">
+      Set Read-Only to {{ editable }}
+    </k-button>
+    <br />
+    <br />
+    <Editor
+      ref="editor"
+      :tools="tools"
+      :content-style="{
+        height: '145px',
+      }"
+      :extend-view="extendView"
+      :default-content="content"
+    />
+  </div>
+</template>
+
+<script>
+import { Button } from "@progress/kendo-vue-buttons";
+import { Editor, ProseMirror } from "@progress/kendo-vue-editor";
+import content from "./content-basic";
+const { EditorState, EditorView, Plugin, PluginKey } = ProseMirror;
+
+export default {
+  components: {
+    Editor,
+    "k-button": Button,
+  },
+  data() {
+    return {
+      editable: true,
+      content: content,
+      tools: [["Bold", "Italic", "Underline"]],
+    };
+  },
+  methods: {
+    extendView(event) {
+      const state = event.viewProps.state;
+      const plugins = [
+        ...state.plugins,
+        new Plugin({
+          key: new PluginKey("readonly"),
+          props: {
+            editable: () => this.editable,
+          },
+          filterTransaction: (tr, _st) => this.editable || !tr.docChanged,
+        }),
+      ];
+
+      return new EditorView(
+        {
+          mount: event.dom,
+        },
+        {
+          ...event.viewProps,
+          state: EditorState.create({
+            doc: state.doc,
+            plugins,
+          }),
+        }
+      );
+    },
+    toggleEditable() {
+      this.editable = !this.editable;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/editor/rendering-mode/main.js b/vue-options-api-demos/editor/rendering-mode/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/editor/rendering-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/editor/rendering-mode/main.vue b/vue-options-api-demos/editor/rendering-mode/main.vue
new file mode 100644
index 00000000..b9657f74
--- /dev/null
+++ b/vue-options-api-demos/editor/rendering-mode/main.vue
@@ -0,0 +1,35 @@
+<template>
+  <Editor
+    :tools="tools"
+    :content-style="{
+      height: '400px',
+    }"
+    :default-content="content"
+    :default-edit-mode="'div'"
+  />
+</template>
+
+<script>
+import { Editor } from "@progress/kendo-vue-editor";
+
+export default {
+  components: {
+    Editor,
+  },
+  data() {
+    return {
+      tools: [
+        ["Bold", "Italic", "Underline"],
+        ["Undo", "Redo"],
+        ["Link", "Unlink"],
+        ["AlignLeft", "AlignCenter", "AlignRight"],
+        ["InsertTable"],
+        ["OrderedList", "UnorderedList", "Indent", "Outdent"],
+      ],
+      content: `<p>Some content with a list, paragraphs and a table.</p><ul><li>list item 1</li><li>list item 2</li></ul><p>a paragraph</p><table>
+       <tbody><tr><td><p>cell 1</p></td><td><p>cell 2</p></td><td><p>cell 3</p></td></tr><tr><td><p>cell 4</p></td><td>
+       <p>cell 5</p></td><td><p>cell 6</p></td></tr></tbody></table><p>another paragraph</p>`,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/editor/rendering-mode/styles.css b/vue-options-api-demos/editor/rendering-mode/styles.css
new file mode 100644
index 00000000..3406202a
--- /dev/null
+++ b/vue-options-api-demos/editor/rendering-mode/styles.css
@@ -0,0 +1,44 @@
+.k-editor-content p {
+    margin: 0.6em 0 0.6em 0;
+}
+.k-editor-content td p,
+.k-editor-content th p,
+.k-editor-content li p {
+    margin: 0;
+}
+
+.k-editor-content table {
+    margin: 0;
+    border-collapse: collapse;
+    table-layout: fixed;
+    width: 100%;
+    overflow: hidden;
+}
+
+.k-editor-content td,
+.k-editor-content th {
+    min-width: 1em;
+    border: 1px solid #ddd;
+    padding: 3px 5px;
+    vertical-align: top;
+    box-sizing: border-box;
+    position: relative;
+}
+
+.k-editor-content th {
+    font-weight: bold;
+    text-align: left;
+}
+
+/* Give selected cells a blue overlay */
+.k-editor-content .selectedCell:after {
+    z-index: 2;
+    position: absolute;
+    content: "";
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: rgba(200, 200, 255, 0.4);
+    pointer-events: none;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/editor/resizing/editor/content.js b/vue-options-api-demos/editor/resizing/editor/content.js
new file mode 100644
index 00000000..009c377b
--- /dev/null
+++ b/vue-options-api-demos/editor/resizing/editor/content.js
@@ -0,0 +1,3 @@
+const content = `<p>The Kendo UI for Vue Native Editor allows your users to edit HTML in a familiar, user-friendly way.<br />The Editor provides the core HTML editing engine, which includes text formatting, hyperlinks, and lists. The component <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards, and provides API for content manipulation.</p><p>Features include:</p><ul><li><p>Text formatting</p></li><li><p>Bulleted and numbered lists</p></li><li><p>Hyperlinks</p></li><li><p>Cross-browser support</p></li><li><p>Identical HTML output across browsers</p></li></ul>`;
+
+export default content;
diff --git a/vue-options-api-demos/editor/resizing/editor/main.js b/vue-options-api-demos/editor/resizing/editor/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/editor/resizing/editor/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/editor/resizing/editor/main.vue b/vue-options-api-demos/editor/resizing/editor/main.vue
new file mode 100644
index 00000000..332d798d
--- /dev/null
+++ b/vue-options-api-demos/editor/resizing/editor/main.vue
@@ -0,0 +1,42 @@
+<template>
+  <Editor
+    :resizable="true"
+    :tools="tools"
+    :default-content="content"
+    :style="[{ height: '360px' }, constraints, resize]"
+  />
+</template>
+
+<script>
+import { Editor } from "@progress/kendo-vue-editor";
+import content from "./content.js";
+
+export default {
+  components: {
+    Editor,
+  },
+  data() {
+    return {
+      constraints: {
+        "max-height": "420px",
+        "max-width": "750px",
+        "min-width": "555px",
+        "min-height": "250px",
+      },
+
+      // Could be 'both', 'horizontal', and 'vertical'. Defaults to 'both'.
+      resize: {
+        // resize: 'both'
+      },
+      tools: [
+        ["Bold", "Italic", "Underline"],
+        ["Undo", "Redo"],
+        ["Link", "Unlink"],
+        ["AlignLeft", "AlignCenter", "AlignRight"],
+        ["OrderedList", "UnorderedList", "Indent", "Outdent"],
+      ],
+      content: content,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/editor/resizing/images/content-overview.js b/vue-options-api-demos/editor/resizing/images/content-overview.js
new file mode 100644
index 00000000..136cfe6c
--- /dev/null
+++ b/vue-options-api-demos/editor/resizing/images/content-overview.js
@@ -0,0 +1,3 @@
+const content = `<p style="text-align: center;"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/labs/kendo/2020-revamp/vue-kendoka-bottom.png" alt="Kendo UI for Vue logo" title="Kendo UI for Vue Native" width="100" height="100" /></p><p><strong>Kendo UI for Vue Native Editor</strong> allows your users to edit HTML in a familiar, user-friendly way.<br>In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists, and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards and provides <a href="https://www.telerik.com/kendo-vue-ui/components/editor/tools/" target="_blank" title="https://www.telerik.com/kendo-vue-ui/components/editor/tools/">multiple tools</a> for content manipulation.</p><p>Features include:</p><ul><li><p>Text formatting &amp; alignment</p></li><li><p>Bulleted and numbered lists</p></li><li><p>Hyperlink and image dialogs</p></li><li><p>Identical HTML output across modern browsers</p></li><li><p>Highly customizable tools</p></li></ul><p></p><p>The Editor has a table option as well, allowing to add and edit tabular data.<br /></p><table><tbody><tr><td><p style="text-align: center;"><strong>Product Id</strong></p></td><td><p style="text-align: center;"><strong>Product Name</strong></p></td><td><p style="text-align: center;"><strong>Price</strong></p></td></tr><tr><td><p>1</p></td><td><p>Chai</p></td><td><p style="text-align: right;">18</p></td></tr><tr><td><p>2</p></td><td><p>Chang</p></td><td><p style="text-align: right;">19</p></td></tr><tr><td><p>3</p></td><td><p>Aniseed Syrup</p></td><td><p style="text-align: right;">10</p></td></tr></tbody></table><p></p>`;
+
+export default content;
diff --git a/vue-options-api-demos/editor/resizing/images/main.js b/vue-options-api-demos/editor/resizing/images/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/editor/resizing/images/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/editor/resizing/images/main.vue b/vue-options-api-demos/editor/resizing/images/main.vue
new file mode 100644
index 00000000..82d9d0e0
--- /dev/null
+++ b/vue-options-api-demos/editor/resizing/images/main.vue
@@ -0,0 +1,61 @@
+<template>
+  <Editor
+    :tools="tools"
+    :content-style="{
+      height: '325px',
+    }"
+    :default-content="content"
+    :extend-view="extendView"
+  />
+</template>
+
+<script>
+import { ProseMirror, EditorUtils } from "@progress/kendo-vue-editor";
+const { EditorState, EditorView } = ProseMirror;
+const { imageResizing } = EditorUtils;
+
+import { Editor } from "@progress/kendo-vue-editor";
+import content from "./content-overview";
+
+export default {
+  components: {
+    Editor,
+  },
+  data() {
+    return {
+      tools: [
+        "Bold",
+        "Italic",
+        "Link",
+        "Unlink",
+        "InsertImage",
+        "FormatBlock",
+        "Undo",
+        "Redo",
+        "OrderedList",
+        "UnorderedList",
+      ],
+      content: content,
+    };
+  },
+  methods: {
+    extendView(event) {
+      const state = event.viewProps.state;
+      const plugins = [...state.plugins, imageResizing()];
+
+      return new EditorView(
+        {
+          mount: event.dom,
+        },
+        {
+          ...event.viewProps,
+          state: EditorState.create({
+            doc: state.doc,
+            plugins,
+          }),
+        }
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/editor/rtl/content.js b/vue-options-api-demos/editor/rtl/content.js
new file mode 100644
index 00000000..009c377b
--- /dev/null
+++ b/vue-options-api-demos/editor/rtl/content.js
@@ -0,0 +1,3 @@
+const content = `<p>The Kendo UI for Vue Native Editor allows your users to edit HTML in a familiar, user-friendly way.<br />The Editor provides the core HTML editing engine, which includes text formatting, hyperlinks, and lists. The component <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards, and provides API for content manipulation.</p><p>Features include:</p><ul><li><p>Text formatting</p></li><li><p>Bulleted and numbered lists</p></li><li><p>Hyperlinks</p></li><li><p>Cross-browser support</p></li><li><p>Identical HTML output across browsers</p></li></ul>`;
+
+export default content;
diff --git a/vue-options-api-demos/editor/rtl/main.js b/vue-options-api-demos/editor/rtl/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/editor/rtl/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/editor/rtl/main.vue b/vue-options-api-demos/editor/rtl/main.vue
new file mode 100644
index 00000000..c8d8edc5
--- /dev/null
+++ b/vue-options-api-demos/editor/rtl/main.vue
@@ -0,0 +1,38 @@
+<template>
+  <Editor
+    :dir="'rtl'"
+    :tools="tools"
+    :default-content="content"
+    :content-style="{
+      height: '340px',
+    }"
+  />
+</template>
+
+<script>
+import { Editor } from "@progress/kendo-vue-editor";
+import content from "./content";
+
+export default {
+  components: {
+    Editor,
+  },
+  data() {
+    return {
+      tools: [
+        ["Bold", "Italic", "Underline", "Strikethrough"],
+        ["Subscript", "Superscript"],
+        ["Undo", "Redo"],
+        ["Link", "Unlink", "InsertImage"],
+        ["AlignLeft", "AlignCenter", "AlignRight"],
+        ["OrderedList", "UnorderedList", "Indent", "Outdent"],
+        "ViewHtml",
+        "FontSize",
+        "FontName",
+        "FormatBlock",
+      ],
+      content: content,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/editor/schema-custom/content.js b/vue-options-api-demos/editor/schema-custom/content.js
new file mode 100644
index 00000000..009c377b
--- /dev/null
+++ b/vue-options-api-demos/editor/schema-custom/content.js
@@ -0,0 +1,3 @@
+const content = `<p>The Kendo UI for Vue Native Editor allows your users to edit HTML in a familiar, user-friendly way.<br />The Editor provides the core HTML editing engine, which includes text formatting, hyperlinks, and lists. The component <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards, and provides API for content manipulation.</p><p>Features include:</p><ul><li><p>Text formatting</p></li><li><p>Bulleted and numbered lists</p></li><li><p>Hyperlinks</p></li><li><p>Cross-browser support</p></li><li><p>Identical HTML output across browsers</p></li></ul>`;
+
+export default content;
diff --git a/vue-options-api-demos/editor/schema-custom/main.js b/vue-options-api-demos/editor/schema-custom/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/editor/schema-custom/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/editor/schema-custom/main.vue b/vue-options-api-demos/editor/schema-custom/main.vue
new file mode 100644
index 00000000..ad6315a0
--- /dev/null
+++ b/vue-options-api-demos/editor/schema-custom/main.vue
@@ -0,0 +1,58 @@
+<template>
+  <Editor
+    :tools="tools"
+    :content-style="{
+      height: '330px',
+    }"
+    :extend-view="extendView"
+  />
+</template>
+
+<script>
+import {
+  Editor,
+  EditorUtils,
+  ProseMirror,
+} from "@progress/kendo-vue-editor";
+import mySchema from "./schema";
+import content from "./content";
+const { EditorView, EditorState } = ProseMirror;
+
+export default {
+  components: {
+    Editor,
+  },
+  data() {
+    return {
+      tools: [
+        ["Bold", "Italic", "Underline"],
+        ["Undo", "Redo"],
+        ["Link", "Unlink"],
+        ["AlignLeft", "AlignCenter", "AlignRight"],
+        ["OrderedList", "UnorderedList", "Indent", "Outdent"],
+      ],
+    };
+  },
+  methods: {
+    extendView(event) {
+      const { viewProps } = event;
+      const { plugins } = viewProps.state; // Create a new document using the schema.
+
+      const doc = EditorUtils.createDocument(mySchema, content); // Return the custom EditorView object that will be used by Editor.
+
+      return new EditorView(
+        {
+          mount: event.dom,
+        },
+        {
+          ...event.viewProps,
+          state: EditorState.create({
+            doc: doc,
+            plugins,
+          }),
+        }
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/editor/schema-custom/schema-utils.js b/vue-options-api-demos/editor/schema-custom/schema-utils.js
new file mode 100644
index 00000000..230cb59c
--- /dev/null
+++ b/vue-options-api-demos/editor/schema-custom/schema-utils.js
@@ -0,0 +1,67 @@
+const getAttributes = (dom) => {
+    const result = {};
+    let attributes = dom.attributes,
+        attr;
+
+    for (let i = 0; i < attributes.length; i++) {
+        attr = attributes[i];
+        result[attr.name] = attr.value;
+    }
+
+    return result;
+};
+
+const commonAttributes = () => {
+    return {
+        style: {
+            default: null,
+        },
+        class: {
+            default: null,
+        },
+        id: {
+            default: null,
+        },
+    };
+};
+
+const hasAttrs = (attrs, exclude) => {
+    for (let attr in attrs) {
+        if (attr && attrs[attr] !== null && attr !== exclude) {
+            return true;
+        }
+    }
+
+    return false;
+};
+
+const getAttrs = (attrs, exclude) => {
+    const result = {};
+
+    for (let attr in attrs) {
+        if (attr && attrs[attr] !== null && attr !== exclude) {
+            result[attr] = attrs[attr];
+        }
+    }
+
+    return result;
+};
+
+const tagMark = (tag) => {
+    // https://prosemirror.net/docs/ref/#model.MarkSpec
+    return {
+        [tag]: {
+            name: tag,
+            inclusive: true,
+            parseDOM: [
+                {
+                    tag: tag,
+                },
+            ],
+            toDOM: () => [tag, hole],
+        },
+    };
+};
+
+const hole = 0;
+export { getAttributes, commonAttributes, hasAttrs, getAttrs, tagMark, hole };
diff --git a/vue-options-api-demos/editor/schema-custom/schema.js b/vue-options-api-demos/editor/schema-custom/schema.js
new file mode 100644
index 00000000..aec23c1d
--- /dev/null
+++ b/vue-options-api-demos/editor/schema-custom/schema.js
@@ -0,0 +1,311 @@
+import { ProseMirror } from '@progress/kendo-vue-editor';
+const { Schema, tableNodes } = ProseMirror;
+import {
+    getAttributes,
+    commonAttributes,
+    hasAttrs,
+    getAttrs,
+    tagMark,
+    hole,
+} from './schema-utils'; // The MarkSpec interface - https://prosemirror.net/docs/ref/#model.MarkSpec
+
+const marks = {
+    link: {
+        attrs: {
+            ...commonAttributes(),
+            href: {
+                default: null,
+            },
+            target: {
+                default: null,
+            },
+            title: {
+                default: null,
+            },
+        },
+        inclusive: false,
+        parseDOM: [
+            {
+                tag: 'a',
+                getAttrs: getAttributes,
+            },
+        ],
+
+        toDOM(node) {
+            return ['a', getAttrs(node.attrs, false), hole];
+        },
+    },
+    ...tagMark('strong'),
+    ...tagMark('b'),
+    ...tagMark('em'),
+    ...tagMark('i'),
+    ...tagMark('u'),
+    ...tagMark('del'),
+    ...tagMark('sub'),
+    ...tagMark('sup'),
+    ...tagMark('code'),
+    style: {
+        attrs: { ...commonAttributes() },
+        parseDOM: [
+            {
+                tag: 'span',
+                getAttrs: getAttributes,
+            },
+        ],
+        toDOM: (node) =>
+            hasAttrs(node.attrs, false)
+                ? ['span', getAttrs(node.attrs, false), hole]
+                : ['span', hole],
+    },
+}; // The NodeSpec interface - http://prosemirror.net/docs/ref/#model.NodeSpec
+
+const nodes = {
+    // The top level document node.
+    doc: {
+        content: 'block+',
+    },
+    paragraph: {
+        content: 'inline*',
+        group: 'block',
+        attrs: { ...commonAttributes() },
+        parseDOM: [
+            {
+                tag: 'p',
+                getAttrs: getAttributes,
+            },
+        ],
+        toDOM: (node) =>
+            hasAttrs(node.attrs, false)
+                ? ['p', getAttrs(node.attrs, false), hole]
+                : ['p', hole],
+    },
+    div: {
+        content: 'block*',
+        group: 'block',
+        attrs: { ...commonAttributes() },
+        parseDOM: [
+            {
+                tag: 'div',
+                getAttrs: getAttributes,
+            },
+        ],
+        toDOM: (node) =>
+            hasAttrs(node.attrs, false)
+                ? ['div', getAttrs(node.attrs, false), hole]
+                : ['div', hole],
+    },
+    blockquote: {
+        content: 'block+',
+        group: 'block',
+        defining: true,
+        parseDOM: [
+            {
+                tag: 'blockquote',
+            },
+        ],
+        toDOM: () => ['blockquote', hole],
+    },
+    horizontal_rule: {
+        group: 'block',
+        parseDOM: [
+            {
+                tag: 'hr',
+            },
+        ],
+
+        toDOM() {
+            return ['hr'];
+        },
+    },
+    heading: {
+        attrs: {
+            ...commonAttributes(),
+            level: {
+                default: 1,
+            },
+        },
+        content: 'inline*',
+        group: 'block',
+        defining: true,
+        parseDOM: [
+            {
+                tag: 'h1',
+                getAttrs: (node) => ({ ...getAttributes(node), level: 1 }),
+            },
+            {
+                tag: 'h2',
+                getAttrs: (node) => ({ ...getAttributes(node), level: 2 }),
+            },
+            {
+                tag: 'h3',
+                getAttrs: (node) => ({ ...getAttributes(node), level: 3 }),
+            },
+            {
+                tag: 'h4',
+                getAttrs: (node) => ({ ...getAttributes(node), level: 4 }),
+            },
+            {
+                tag: 'h5',
+                getAttrs: (node) => ({ ...getAttributes(node), level: 5 }),
+            },
+            {
+                tag: 'h6',
+                getAttrs: (node) => ({ ...getAttributes(node), level: 6 }),
+            },
+        ],
+        toDOM: (node) =>
+            hasAttrs(node.attrs, 'level')
+                ? ['h' + node.attrs.level, getAttrs(node.attrs, 'level'), hole]
+                : ['h' + node.attrs.level, hole],
+    },
+    code_block: {
+        content: 'text*',
+        marks: '',
+        group: 'block',
+        code: true,
+        defining: true,
+        parseDOM: [
+            {
+                tag: 'pre',
+                preserveWhitespace: 'full',
+            },
+        ],
+
+        toDOM() {
+            return ['pre', ['code', hole]];
+        },
+    },
+    // The text node.
+    text: {
+        inline: true,
+        group: 'inline',
+    },
+    image: {
+        inline: true,
+        attrs: {
+            src: {
+                default: null,
+            },
+            alt: {
+                default: null,
+            },
+            title: {
+                default: null,
+            },
+            width: {
+                default: null,
+            },
+            height: {
+                default: null,
+            },
+            ...commonAttributes(),
+        },
+        group: 'inline',
+        draggable: true,
+        parseDOM: [
+            {
+                tag: 'img',
+                getAttrs: getAttributes,
+            },
+        ],
+        toDOM: (node) =>
+            hasAttrs(node.attrs, false)
+                ? ['img', getAttrs(node.attrs, false)]
+                : ['img'],
+    },
+    hard_break: {
+        inline: true,
+        attrs: { ...commonAttributes() },
+        group: 'inline',
+        selectable: false,
+        parseDOM: [
+            {
+                tag: 'br',
+                getAttrs: getAttributes,
+            },
+        ],
+        toDOM: (node) =>
+            hasAttrs(node.attrs, false)
+                ? ['br', getAttrs(node.attrs, false)]
+                : ['br'],
+    },
+    ordered_list: {
+        content: 'list_item+',
+        group: 'block',
+        attrs: {
+            ...commonAttributes(),
+            type: {
+                default: null,
+            },
+            order: {
+                default: 1,
+            },
+        },
+        parseDOM: [
+            {
+                tag: 'ol',
+                getAttrs: (dom) => {
+                    return {
+                        ...getAttributes(dom),
+                        order: dom.hasAttribute('start')
+                            ? parseInt(dom.getAttribute('start') || '1', 10)
+                            : 1,
+                    };
+                },
+            },
+        ],
+        toDOM: (node) => {
+            return node.attrs.order === 1
+                ? hasAttrs(node.attrs, 'order')
+                    ? ['ol', getAttrs(node.attrs, 'order'), hole]
+                    : ['ol', 0]
+                : [
+                    'ol',
+                    { ...getAttrs(node.attrs, 'order'), start: node.attrs.order },
+                    hole,
+                ];
+        },
+    },
+    bullet_list: {
+        content: 'list_item+',
+        group: 'block',
+        attrs: { ...commonAttributes() },
+        parseDOM: [
+            {
+                tag: 'ul',
+                getAttrs: getAttributes,
+            },
+        ],
+        toDOM: (node) =>
+            hasAttrs(node.attrs, false)
+                ? ['ul', getAttrs(node.attrs, false), hole]
+                : ['ul', 0],
+    },
+    list_item: {
+        content: 'block*',
+        attrs: { ...commonAttributes() },
+        parseDOM: [
+            {
+                tag: 'li',
+                getAttrs: getAttributes,
+            },
+        ],
+        toDOM: (node) =>
+            hasAttrs(node.attrs, false)
+                ? ['li', getAttrs(node.attrs, false), hole]
+                : ['li', 0],
+        defining: true,
+    },
+    // Imported from the `prosemirror-tables` package
+    // https://github.com/ProseMirror/prosemirror-tables/
+    ...tableNodes({
+        tableGroup: 'block',
+        cellContent: 'block+',
+        cellAttributes: {},
+    }),
+};
+const mySchema = new Schema({
+    nodes,
+    marks,
+});
+export default mySchema;
diff --git a/vue-options-api-demos/editor/schema-edit/main.js b/vue-options-api-demos/editor/schema-edit/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/editor/schema-edit/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/editor/schema-edit/main.vue b/vue-options-api-demos/editor/schema-edit/main.vue
new file mode 100644
index 00000000..2ffd1318
--- /dev/null
+++ b/vue-options-api-demos/editor/schema-edit/main.vue
@@ -0,0 +1,70 @@
+<template>
+  <Editor
+    :tools="[['Bold', 'Italic', 'Underline', 'ViewHtml']]"
+    :content-style="{
+      height: '420px',
+    }"
+    :extend-view="extendView"
+  />
+</template>
+
+<script>
+import {
+  Editor,
+  EditorUtils,
+  ProseMirror,
+} from "@progress/kendo-vue-editor";
+import { iframe } from "./new-node";
+import { tagMark } from "./new-mark";
+const { Schema, EditorView, EditorState } = ProseMirror;
+
+export default {
+  components: {
+    Editor,
+  },
+  data() {
+    return {
+      html:
+        `<p dir="rtl">A paragraph with <code>dir="rtl"</code> attribute, and the new added mark - <s>new mark formatting</s></p>` +
+        `<iframe style="width: 500px; height: 340px;" src="https://www.youtube.com/embed/2OvvwWShNWo"></iframe>`,
+    };
+  },
+  methods: {
+    extendView(event) {
+      const { viewProps } = event;
+      const { plugins, schema } = viewProps.state; // Add the 'dir' attribute to paragraph node.
+
+      const paragraph = { ...schema.spec.nodes.get("paragraph") };
+      paragraph.attrs["dir"] = {
+        default: null,
+      };
+      let nodes = schema.spec.nodes.update("paragraph", paragraph); // Append the new node.
+
+      nodes = nodes.addToEnd("iframe", iframe); // Append a new mark representing the <s> formatting tag.
+
+      const mark = tagMark("s");
+      let marks = schema.spec.marks.append(mark); // Create the new schema.
+
+      const mySchema = new Schema({
+        nodes,
+        marks,
+      }); // Create a new document using the modified schema.
+
+      const doc = EditorUtils.createDocument(mySchema, this.html); // Return the custom EditorView object that will be used by Editor.
+
+      return new EditorView(
+        {
+          mount: event.dom,
+        },
+        {
+          ...event.viewProps,
+          state: EditorState.create({
+            doc: doc,
+            plugins,
+          }),
+        }
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/editor/schema-edit/new-mark.js b/vue-options-api-demos/editor/schema-edit/new-mark.js
new file mode 100644
index 00000000..1d3a98aa
--- /dev/null
+++ b/vue-options-api-demos/editor/schema-edit/new-mark.js
@@ -0,0 +1,16 @@
+const tagMark = (tag) => ({
+    // MarkSpec interface
+    // https://prosemirror.net/docs/ref/#model.MarkSpec
+    [tag]: {
+        name: tag,
+        inclusive: true,
+        parseDOM: [
+            {
+                tag
+            }
+        ],
+        toDOM: () => [tag, 0],
+    }
+});
+
+export { tagMark };
diff --git a/vue-options-api-demos/editor/schema-edit/new-node.js b/vue-options-api-demos/editor/schema-edit/new-node.js
new file mode 100644
index 00000000..1cb9c221
--- /dev/null
+++ b/vue-options-api-demos/editor/schema-edit/new-node.js
@@ -0,0 +1,33 @@
+const iframe = {
+    // NodeSpec interface
+    // http://prosemirror.net/docs/ref/#model.NodeSpec
+    attrs: {
+        src: {
+            default: null,
+        },
+        style: {
+            default: null,
+        },
+    },
+    group: 'block',
+    selectable: false,
+    parseDOM: [
+        {
+            tag: 'iframe',
+            getAttrs: (dom) => ({
+                src: dom.getAttribute('src'),
+                style: dom.getAttribute('style'),
+            }),
+        },
+    ],
+    toDOM: (node) => {
+        const attrs = {
+            src: node.attrs.src,
+            style: node.attrs.style,
+            frameborder: '0',
+            allowfullscreen: 'true',
+        };
+        return ['iframe', attrs];
+    },
+};
+export { iframe };
diff --git a/vue-options-api-demos/editor/selection/cell/content.js b/vue-options-api-demos/editor/selection/cell/content.js
new file mode 100644
index 00000000..e5cfac57
--- /dev/null
+++ b/vue-options-api-demos/editor/selection/cell/content.js
@@ -0,0 +1,48 @@
+export const content = `<table>
+    <tbody>
+        <tr>
+            <td>
+                <p style="text-align: center;"><strong>Product Id</strong></p>
+            </td>
+            <td>
+                <p style="text-align: center;"><strong>Product Name</strong></p>
+            </td>
+            <td>
+                <p style="text-align: center;"><strong>Price</strong></p>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <p>1</p>
+            </td>
+            <td>
+                <p>Chai</p>
+            </td>
+            <td>
+                <p style="text-align: right;">18</p>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <p>2</p>
+            </td>
+            <td>
+                <p>Chang</p>
+            </td>
+            <td>
+                <p style="text-align: right;">19</p>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <p>3</p>
+            </td>
+            <td>
+                <p>Aniseed Syrup</p>
+            </td>
+            <td>
+                <p style="text-align: right;">10</p>
+            </td>
+        </tr>
+    </tbody>
+</table>`;
\ No newline at end of file
diff --git a/vue-options-api-demos/editor/selection/cell/main.js b/vue-options-api-demos/editor/selection/cell/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/editor/selection/cell/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/editor/selection/cell/main.vue b/vue-options-api-demos/editor/selection/cell/main.vue
new file mode 100644
index 00000000..e982e458
--- /dev/null
+++ b/vue-options-api-demos/editor/selection/cell/main.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <Editor
+      :tools="tools"
+      :content-style="{
+        height: '170px',
+      }"
+      :default-content="content"
+    />
+  </div>
+</template>
+
+<script>
+import { Editor } from '@progress/kendo-vue-editor';
+import { content } from './content';
+
+export default {
+  components: {
+    Editor,
+  },
+  data() {
+    return {
+      tools: [['Bold', 'Italic', 'Underline'], ['ViewHtml']],
+      content: content,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/editor/selection/get-html/content.js b/vue-options-api-demos/editor/selection/get-html/content.js
new file mode 100644
index 00000000..009c377b
--- /dev/null
+++ b/vue-options-api-demos/editor/selection/get-html/content.js
@@ -0,0 +1,3 @@
+const content = `<p>The Kendo UI for Vue Native Editor allows your users to edit HTML in a familiar, user-friendly way.<br />The Editor provides the core HTML editing engine, which includes text formatting, hyperlinks, and lists. The component <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards, and provides API for content manipulation.</p><p>Features include:</p><ul><li><p>Text formatting</p></li><li><p>Bulleted and numbered lists</p></li><li><p>Hyperlinks</p></li><li><p>Cross-browser support</p></li><li><p>Identical HTML output across browsers</p></li></ul>`;
+
+export default content;
diff --git a/vue-options-api-demos/editor/selection/get-html/main.js b/vue-options-api-demos/editor/selection/get-html/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/editor/selection/get-html/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/editor/selection/get-html/main.vue b/vue-options-api-demos/editor/selection/get-html/main.vue
new file mode 100644
index 00000000..34923731
--- /dev/null
+++ b/vue-options-api-demos/editor/selection/get-html/main.vue
@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <Editor
+      :tools="[['Bold', 'Italic', 'Underline'], ['ViewHtml']]"
+      :content-style="{
+        height: '360px',
+      }"
+      :default-content="content"
+      @execute="onExecute"
+    />
+    <br />
+    Selected HTML
+    <k-textarea
+      ref="htmlAreaRef"
+      :style="{ height: '100px', width: '100%', resize: 'none' }"
+      :value="htmlAreaRefValue"
+      :read-only="true"
+    />
+    <br />
+    <br />
+    Selected Text
+    <k-textarea
+      ref="textAreaRef"
+      :style="{ height: '100px', width: '100%', resize: 'none' }"
+      :value="textAreaRefValue"
+      :read-only="true"
+    />
+  </div>
+</template>
+
+<script>
+import { TextArea } from "@progress/kendo-vue-inputs";
+import { Editor, EditorUtils } from "@progress/kendo-vue-editor";
+
+import content from "./content";
+
+export default {
+  components: {
+    Editor,
+    "k-textarea": TextArea,
+  },
+  data() {
+    return {
+      tools: [["Bold", "Italic"]],
+      content: content,
+      textAreaRefValue: null,
+      htmlAreaRefValue: null,
+    };
+  },
+  methods: {
+    onExecute(event) {
+      const { doc, selection } = event.transaction;
+      let selectionHtml = "";
+      let selectionText = "";
+
+      if (!selection.empty) {
+        const node = doc.cut(selection.from, selection.to);
+        selectionHtml = EditorUtils.getHtml({
+          doc: node,
+          schema: node.type.schema,
+        });
+        selectionText = node.textContent;
+      }
+
+      if (this.$refs.htmlAreaRef) {
+        this.htmlAreaRefValue = selectionHtml;
+      }
+
+      if (this.$refs.textAreaRef) {
+        this.textAreaRefValue = selectionText;
+      }
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/editor/selection/node/content.js b/vue-options-api-demos/editor/selection/node/content.js
new file mode 100644
index 00000000..009c377b
--- /dev/null
+++ b/vue-options-api-demos/editor/selection/node/content.js
@@ -0,0 +1,3 @@
+const content = `<p>The Kendo UI for Vue Native Editor allows your users to edit HTML in a familiar, user-friendly way.<br />The Editor provides the core HTML editing engine, which includes text formatting, hyperlinks, and lists. The component <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards, and provides API for content manipulation.</p><p>Features include:</p><ul><li><p>Text formatting</p></li><li><p>Bulleted and numbered lists</p></li><li><p>Hyperlinks</p></li><li><p>Cross-browser support</p></li><li><p>Identical HTML output across browsers</p></li></ul>`;
+
+export default content;
diff --git a/vue-options-api-demos/editor/selection/node/main.js b/vue-options-api-demos/editor/selection/node/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/editor/selection/node/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/editor/selection/node/main.vue b/vue-options-api-demos/editor/selection/node/main.vue
new file mode 100644
index 00000000..008518ca
--- /dev/null
+++ b/vue-options-api-demos/editor/selection/node/main.vue
@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <Button @click="onClick">Select second Node</Button>
+    <Editor
+      :tools="tools"
+      :content-style="{
+        height: '320px',
+      }"
+      :default-content="content"
+      ref="editorRef"
+    />
+  </div>
+</template>
+
+<script>
+import { Button } from "@progress/kendo-vue-buttons";
+
+import { Editor, EditorUtils, ProseMirror } from "@progress/kendo-vue-editor";
+const { NodeSelection } = ProseMirror;
+import content from "./content.js";
+
+const selectLastNode = (view) => {
+  const doc = view.state.doc;
+  let nodePosition = 0;
+  const nodeToSelect = doc.child(1);
+  doc.nodesBetween(0, doc.content.size, (node, pos, _parent, _index) => {
+    if (node.eq(nodeToSelect)) {
+      nodePosition = pos;
+    }
+
+    return false; // return false to traverse only root nodes
+  });
+  const selection = NodeSelection.create(doc, nodePosition); // state.tr - Starts a transaction from this state.
+
+  const transaction = view.state.tr;
+  transaction.setSelection(selection);
+  view.dispatch(transaction);
+  view.focus();
+};
+
+export default {
+  components: {
+    Editor,
+    Button,
+  },
+  data() {
+    return {
+      tools: [["Bold", "Italic", "Underline"], ["ViewHtml"]],
+      content: content,
+    };
+  },
+  methods: {
+    onClick() {
+      const view = this.$refs.editorRef && this.$refs.editorRef.view;
+
+      if (!view) {
+        return;
+      }
+      selectLastNode(view);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/editor/selection/select-all/content.js b/vue-options-api-demos/editor/selection/select-all/content.js
new file mode 100644
index 00000000..009c377b
--- /dev/null
+++ b/vue-options-api-demos/editor/selection/select-all/content.js
@@ -0,0 +1,3 @@
+const content = `<p>The Kendo UI for Vue Native Editor allows your users to edit HTML in a familiar, user-friendly way.<br />The Editor provides the core HTML editing engine, which includes text formatting, hyperlinks, and lists. The component <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards, and provides API for content manipulation.</p><p>Features include:</p><ul><li><p>Text formatting</p></li><li><p>Bulleted and numbered lists</p></li><li><p>Hyperlinks</p></li><li><p>Cross-browser support</p></li><li><p>Identical HTML output across browsers</p></li></ul>`;
+
+export default content;
diff --git a/vue-options-api-demos/editor/selection/select-all/main.js b/vue-options-api-demos/editor/selection/select-all/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/editor/selection/select-all/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/editor/selection/select-all/main.vue b/vue-options-api-demos/editor/selection/select-all/main.vue
new file mode 100644
index 00000000..0cbfa5a0
--- /dev/null
+++ b/vue-options-api-demos/editor/selection/select-all/main.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <Editor
+      :tools="tools"
+      :content-style="{
+        height: '320px',
+      }"
+      :default-content="content"
+      ref="editor"
+    />
+  </div>
+</template>
+
+<script>
+import { Editor, ProseMirror } from '@progress/kendo-vue-editor';
+import content from './content.js';
+const { AllSelection } = ProseMirror;
+
+export default {
+  components: {
+    Editor,
+  },
+  mounted() {
+    this.setEditorTextSelection();
+  },
+  data() {
+    return {
+      tools: [['Bold', 'Italic', 'Underline'], ['ViewHtml']],
+      content: content,
+    };
+  },
+  methods: {
+    setEditorTextSelection(anchor, head) {
+      const view = this.$refs.editor.getView();
+      if (!view) {
+        return;
+      }
+      const doc = view.state.doc;
+      const selection = new AllSelection(view.state.doc);
+      const transaction = view.state.tr; // state.tr - Starts a transaction from this state.
+      transaction.setSelection(selection);
+      view.dispatch(transaction);
+      view.focus();
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/editor/selection/text/content.js b/vue-options-api-demos/editor/selection/text/content.js
new file mode 100644
index 00000000..009c377b
--- /dev/null
+++ b/vue-options-api-demos/editor/selection/text/content.js
@@ -0,0 +1,3 @@
+const content = `<p>The Kendo UI for Vue Native Editor allows your users to edit HTML in a familiar, user-friendly way.<br />The Editor provides the core HTML editing engine, which includes text formatting, hyperlinks, and lists. The component <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards, and provides API for content manipulation.</p><p>Features include:</p><ul><li><p>Text formatting</p></li><li><p>Bulleted and numbered lists</p></li><li><p>Hyperlinks</p></li><li><p>Cross-browser support</p></li><li><p>Identical HTML output across browsers</p></li></ul>`;
+
+export default content;
diff --git a/vue-options-api-demos/editor/selection/text/main.js b/vue-options-api-demos/editor/selection/text/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/editor/selection/text/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/editor/selection/text/main.vue b/vue-options-api-demos/editor/selection/text/main.vue
new file mode 100644
index 00000000..92e72410
--- /dev/null
+++ b/vue-options-api-demos/editor/selection/text/main.vue
@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <Slider
+      :style="{
+        width: '100%',
+      }"
+      :value="start"
+      :step="1"
+      :min="0"
+      :max="contentSize"
+      @change="onSliderValueChangeStart"
+    />
+    <Slider
+      :style="{
+        width: '100%',
+      }"
+      :value="end"
+      :step="1"
+      :min="0"
+      :max="contentSize"
+      @change="onSliderValueChangeEnd"
+    />
+    {{
+      `Selection: ${JSON.stringify({
+        start,
+        end,
+      })}`
+    }}
+    &nbsp;
+    <Editor
+      :tools="tools"
+      :content-style="{
+        height: '320px',
+      }"
+      :value="value"
+      @change="handleValueChange"
+      ref="editor"
+    />
+  </div>
+</template>
+
+<script>
+import { Slider } from '@progress/kendo-vue-inputs';
+import { Editor, EditorUtils, ProseMirror } from '@progress/kendo-vue-editor';
+import content from './content.js';
+const { Schema, TextSelection } = ProseMirror;
+const { nodes, marks } = EditorUtils;
+
+const initialDocument = EditorUtils.createDocument(
+  new Schema({
+    nodes,
+    marks,
+  }),
+  content
+);
+const initialDocSize = initialDocument.content.size;
+const initialRange = {
+  start: Math.round(initialDocSize / 3),
+  end: Math.round((initialDocSize / 3) * 2),
+};
+export default {
+  components: {
+    Editor,
+    Slider,
+  },
+  computed: {
+    contentSize() {
+      return this.value.content.size;
+    },
+    end() {
+      return Math.min(this.range.end, this.contentSize);
+    },
+    start() {
+      return Math.min(this.range.start, this.end);
+    },
+  },
+  data() {
+    return {
+      value: initialDocument,
+      range: initialRange,
+      tools: [['Bold', 'Italic', 'Underline'], ['ViewHtml']],
+      content: content,
+    };
+  },
+  methods: {
+    handleValueChange(event) {
+      this.value = event.value;
+    },
+    setEditorTextSelection(anchor, head) {
+      const view = this.$refs.editor.getView();
+      if (!view) {
+        return;
+      }
+      const doc = view.state.doc;
+      const selection = TextSelection.create(doc, anchor, head);
+      const transaction = view.state.tr; // state.tr - Starts a transaction from this state.
+      transaction.setSelection(selection);
+      view.dispatch(transaction);
+      view.focus();
+    },
+    onSliderValueChangeStart(event) {
+      const start = Math.round(event.value);
+      if (this.range.start !== start) {
+        this.setEditorTextSelection(start, this.end);
+        this.range = {
+          start,
+          end: this.end,
+        };
+      }
+    },
+    onSliderValueChangeEnd(event) {
+      const end = Math.round(event.value);
+      if (this.range.end !== end) {
+        this.setEditorTextSelection(this.start, end);
+        this.range = {
+          start: this.start,
+          end,
+        };
+      }
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/editor/shared/content-basic.js b/vue-options-api-demos/editor/shared/content-basic.js
new file mode 100644
index 00000000..e02950c2
--- /dev/null
+++ b/vue-options-api-demos/editor/shared/content-basic.js
@@ -0,0 +1,3 @@
+const content = `<p>The Kendo UI for Vue Native Editor allows your users to edit HTML in a familiar, user-friendly way.<br />The Editor provides the core HTML editing engine, which includes text formatting, hyperlinks, and lists. The component <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards, and provides API for content manipulation.</p>`;
+
+export default content;
diff --git a/vue-options-api-demos/editor/shared/content-overview.js b/vue-options-api-demos/editor/shared/content-overview.js
new file mode 100644
index 00000000..136cfe6c
--- /dev/null
+++ b/vue-options-api-demos/editor/shared/content-overview.js
@@ -0,0 +1,3 @@
+const content = `<p style="text-align: center;"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/labs/kendo/2020-revamp/vue-kendoka-bottom.png" alt="Kendo UI for Vue logo" title="Kendo UI for Vue Native" width="100" height="100" /></p><p><strong>Kendo UI for Vue Native Editor</strong> allows your users to edit HTML in a familiar, user-friendly way.<br>In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists, and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards and provides <a href="https://www.telerik.com/kendo-vue-ui/components/editor/tools/" target="_blank" title="https://www.telerik.com/kendo-vue-ui/components/editor/tools/">multiple tools</a> for content manipulation.</p><p>Features include:</p><ul><li><p>Text formatting &amp; alignment</p></li><li><p>Bulleted and numbered lists</p></li><li><p>Hyperlink and image dialogs</p></li><li><p>Identical HTML output across modern browsers</p></li><li><p>Highly customizable tools</p></li></ul><p></p><p>The Editor has a table option as well, allowing to add and edit tabular data.<br /></p><table><tbody><tr><td><p style="text-align: center;"><strong>Product Id</strong></p></td><td><p style="text-align: center;"><strong>Product Name</strong></p></td><td><p style="text-align: center;"><strong>Price</strong></p></td></tr><tr><td><p>1</p></td><td><p>Chai</p></td><td><p style="text-align: right;">18</p></td></tr><tr><td><p>2</p></td><td><p>Chang</p></td><td><p style="text-align: right;">19</p></td></tr><tr><td><p>3</p></td><td><p>Aniseed Syrup</p></td><td><p style="text-align: right;">10</p></td></tr></tbody></table><p></p>`;
+
+export default content;
diff --git a/vue-options-api-demos/editor/shared/content.js b/vue-options-api-demos/editor/shared/content.js
new file mode 100644
index 00000000..009c377b
--- /dev/null
+++ b/vue-options-api-demos/editor/shared/content.js
@@ -0,0 +1,3 @@
+const content = `<p>The Kendo UI for Vue Native Editor allows your users to edit HTML in a familiar, user-friendly way.<br />The Editor provides the core HTML editing engine, which includes text formatting, hyperlinks, and lists. The component <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards, and provides API for content manipulation.</p><p>Features include:</p><ul><li><p>Text formatting</p></li><li><p>Bulleted and numbered lists</p></li><li><p>Hyperlinks</p></li><li><p>Cross-browser support</p></li><li><p>Identical HTML output across browsers</p></li></ul>`;
+
+export default content;
diff --git a/vue-options-api-demos/editor/styling-iframe/content.js b/vue-options-api-demos/editor/styling-iframe/content.js
new file mode 100644
index 00000000..009c377b
--- /dev/null
+++ b/vue-options-api-demos/editor/styling-iframe/content.js
@@ -0,0 +1,3 @@
+const content = `<p>The Kendo UI for Vue Native Editor allows your users to edit HTML in a familiar, user-friendly way.<br />The Editor provides the core HTML editing engine, which includes text formatting, hyperlinks, and lists. The component <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards, and provides API for content manipulation.</p><p>Features include:</p><ul><li><p>Text formatting</p></li><li><p>Bulleted and numbered lists</p></li><li><p>Hyperlinks</p></li><li><p>Cross-browser support</p></li><li><p>Identical HTML output across browsers</p></li></ul>`;
+
+export default content;
diff --git a/vue-options-api-demos/editor/styling-iframe/main.js b/vue-options-api-demos/editor/styling-iframe/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/editor/styling-iframe/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/editor/styling-iframe/main.vue b/vue-options-api-demos/editor/styling-iframe/main.vue
new file mode 100644
index 00000000..e65f0136
--- /dev/null
+++ b/vue-options-api-demos/editor/styling-iframe/main.vue
@@ -0,0 +1,40 @@
+<template>
+  <Editor
+    :tools="tools"
+    :default-content="content"
+    :content-style="{
+      height: '300px',
+    }"
+    @loaded="onLoaded"
+  />
+</template>
+
+<script>
+import { Editor } from "@progress/kendo-vue-editor";
+import content from "./content";
+const styles = `
+    p {
+        color: #53d2fa;
+    }
+`;
+export default {
+  components: {
+    Editor,
+  },
+  data() {
+    return {
+      tools: [["Bold", "Italic", "Underline"]],
+      content: content,
+    };
+  },
+  methods: {
+    onLoaded(event) {
+      const iframeDocument = event.dom.ownerDocument;
+      const style = iframeDocument.createElement("style");
+      style.appendChild(iframeDocument.createTextNode(styles));
+      iframeDocument.head.appendChild(style);
+    },
+  },
+};
+</script>
+
diff --git a/vue-options-api-demos/editor/tsconfig.json b/vue-options-api-demos/editor/tsconfig.json
new file mode 100644
index 00000000..da823a2d
--- /dev/null
+++ b/vue-options-api-demos/editor/tsconfig.json
@@ -0,0 +1,30 @@
+{
+   "compilerOptions": {
+        "types": [],
+        "baseUrl": ".",
+        "sourceMap": false,
+        "noImplicitAny": false,
+        "module": "commonjs",
+        "target": "ES5",
+        "jsx": "react",
+        "lib": [
+            "es2015",
+            "es2017",
+            "dom"
+        ],
+        "declaration": true,
+        "moduleResolution": "node",
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "strictNullChecks": true,
+        "paths": {
+            "@progress/kendo-vue-editor": [
+                "../../src/main.ts",
+            ]
+        }
+    },
+    "include": [
+        "**/*.ts",
+        "**/*.tsx",
+    ]
+}
diff --git a/vue-options-api-demos/excel/basic/main.js b/vue-options-api-demos/excel/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/excel/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/excel/basic/main.vue b/vue-options-api-demos/excel/basic/main.vue
new file mode 100644
index 00000000..7fba7622
--- /dev/null
+++ b/vue-options-api-demos/excel/basic/main.vue
@@ -0,0 +1,74 @@
+<template>
+<div>
+    <kbutton :theme-color="'primary'" @click="exportExcel">Export Excel</kbutton>
+</div>
+</template>
+<script>
+import { saveExcel } from '@progress/kendo-vue-excel-export';
+import products from './products.json';
+import { aggregateBy,process } from '@progress/kendo-data-query';
+import { Button } from '@progress/kendo-vue-buttons';
+
+const aggregates = [ { field: 'UnitPrice', aggregate: 'sum' } ];
+const group = [ { field: 'Discontinued', aggregates: aggregates } ];
+const data = process(products, {
+    group: group
+}).data;
+const total = aggregateBy(products, aggregates);
+
+const CustomGroupHeader = (props) => (`Discontinued: ${props.value}`);
+
+const CustomGroupFooter = (props) => (`SUM: \$ ${(props.aggregates.UnitPrice.sum).toFixed(2)}`);
+
+const CustomFooter = (props) =>
+    (`Total ${props.column.title}: \$ ${total.UnitPrice.sum}`);
+
+export default {
+    components: {
+      'kbutton': Button
+    },
+    data(){
+      return {
+        headerCellConfig: { textAlign: 'center' },
+        footerCellConfig: { wrap: true, textAlign: 'center' },
+        groupFooterCellConfig: {textAlign: 'right' }
+      }
+    },
+    methods: {
+        exportExcel () {
+            saveExcel({
+                data: data,
+                group: group,
+                fileName:"Products.xlsx",
+                columns: [
+                  { field: 'ProductID', locked: true, width:200},
+                  { field: 'ProductName', title: 'Product Name', width: 350 },
+                  { 
+                    title: 'Availability', headerCellOptions: this.headerCellConfig , children: [
+                        { 
+                          field: 'UnitPrice', 
+                          title: 'Price',
+                          cellOptions: { format: '$#,##0.00' },
+                          width:150,
+                          footerCellOptions: this.footerCellConfig,
+                          groupFooterCellOptions: this.groupFooterCellConfig,
+                          groupFooter: CustomGroupFooter,
+                          footer: CustomFooter
+                        },
+                        { field: 'UnitsOnOrder', title: 'Units on Order' },
+                        { field: 'UnitsInStock', title: 'Units in Stock' }
+                    ]
+                  },
+                  { 
+                    field: 'Discontinued', 
+                    title: 'Discontinued', 
+                    hidden: true,  
+                    groupHeader: CustomGroupHeader
+                  }
+              ]
+            });
+        },
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/excel/basic/products.json b/vue-options-api-demos/excel/basic/products.json
new file mode 100644
index 00000000..ecf3ff9e
--- /dev/null
+++ b/vue-options-api-demos/excel/basic/products.json
@@ -0,0 +1,1311 @@
+[
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22.0000,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.3500,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25.0000,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40.0000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97.0000,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31.0000,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 11,
+        "ProductName": "Queso Cabrales",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "1 kg pkg.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 30,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 12,
+        "ProductName": "Queso Manchego La Pastora",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 86,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 13,
+        "ProductName": "Konbu",
+        "SupplierID": 6,
+        "CategoryID": 8,
+        "QuantityPerUnit": "2 kg box",
+        "UnitPrice": 6.0000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 14,
+        "ProductName": "Tofu",
+        "SupplierID": 6,
+        "CategoryID": 7,
+        "QuantityPerUnit": "40 - 100 g pkgs.",
+        "UnitPrice": 23.2500,
+        "UnitsInStock": 35,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 15,
+        "ProductName": "Genen Shouyu",
+        "SupplierID": 6,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 250 ml bottles",
+        "UnitPrice": 15.5000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 16,
+        "ProductName": "Pavlova",
+        "SupplierID": 7,
+        "CategoryID": 3,
+        "QuantityPerUnit": "32 - 500 g boxes",
+        "UnitPrice": 17.4500,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 17,
+        "ProductName": "Alice Mutton",
+        "SupplierID": 7,
+        "CategoryID": 6,
+        "QuantityPerUnit": "20 - 1 kg tins",
+        "UnitPrice": 39.0000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 18,
+        "ProductName": "Carnarvon Tigers",
+        "SupplierID": 7,
+        "CategoryID": 8,
+        "QuantityPerUnit": "16 kg pkg.",
+        "UnitPrice": 62.5000,
+        "UnitsInStock": 42,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 19,
+        "ProductName": "Teatime Chocolate Biscuits",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 12 pieces",
+        "UnitPrice": 9.2000,
+        "UnitsInStock": 25,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 20,
+        "ProductName": "Sir Rodney's Marmalade",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "30 gift boxes",
+        "UnitPrice": 81.0000,
+        "UnitsInStock": 40,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 21,
+        "ProductName": "Sir Rodney's Scones",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 pkgs. x 4 pieces",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 3,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 22,
+        "ProductName": "Gustaf's Knäckebröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 500 g pkgs.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 104,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 23,
+        "ProductName": "Tunnbröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "12 - 250 g pkgs.",
+        "UnitPrice": 9.0000,
+        "UnitsInStock": 61,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 24,
+        "ProductName": "Guaraná Fantástica",
+        "SupplierID": 10,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 355 ml cans",
+        "UnitPrice": 4.5000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 25,
+        "ProductName": "NuNuCa Nuß-Nougat-Creme",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "20 - 450 g glasses",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 26,
+        "ProductName": "Gumbär Gummibärchen",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 250 g bags",
+        "UnitPrice": 31.2300,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 27,
+        "ProductName": "Schoggi Schokolade",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 100 g pieces",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 49,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 28,
+        "ProductName": "Rössle Sauerkraut",
+        "SupplierID": 12,
+        "CategoryID": 7,
+        "QuantityPerUnit": "25 - 825 g cans",
+        "UnitPrice": 45.6000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 29,
+        "ProductName": "Thüringer Rostbratwurst",
+        "SupplierID": 12,
+        "CategoryID": 6,
+        "QuantityPerUnit": "50 bags x 30 sausgs.",
+        "UnitPrice": 123.7900,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 30,
+        "ProductName": "Nord-Ost Matjeshering",
+        "SupplierID": 13,
+        "CategoryID": 8,
+        "QuantityPerUnit": "10 - 200 g glasses",
+        "UnitPrice": 25.8900,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 31,
+        "ProductName": "Gorgonzola Telino",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "12 - 100 g pkgs",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 32,
+        "ProductName": "Mascarpone Fabioli",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 32.0000,
+        "UnitsInStock": 9,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 33,
+        "ProductName": "Geitost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "500 g",
+        "UnitPrice": 2.5000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 34,
+        "ProductName": "Sasquatch Ale",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 111,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 35,
+        "ProductName": "Steeleye Stout",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 36,
+        "ProductName": "Inlagd Sill",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 250 g  jars",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 37,
+        "ProductName": "Gravad lax",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 500 g pkgs.",
+        "UnitPrice": 26.0000,
+        "UnitsInStock": 11,
+        "UnitsOnOrder": 50,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 38,
+        "ProductName": "Côte de Blaye",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 75 cl bottles",
+        "UnitPrice": 263.5000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 39,
+        "ProductName": "Chartreuse verte",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "750 cc per bottle",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 69,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 40,
+        "ProductName": "Boston Crab Meat",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 4 oz tins",
+        "UnitPrice": 18.4000,
+        "UnitsInStock": 123,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 41,
+        "ProductName": "Jack's New England Clam Chowder",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 12 oz cans",
+        "UnitPrice": 9.6500,
+        "UnitsInStock": 85,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 42,
+        "ProductName": "Singaporean Hokkien Fried Mee",
+        "SupplierID": 20,
+        "CategoryID": 5,
+        "QuantityPerUnit": "32 - 1 kg pkgs.",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 43,
+        "ProductName": "Ipoh Coffee",
+        "SupplierID": 20,
+        "CategoryID": 1,
+        "QuantityPerUnit": "16 - 500 g tins",
+        "UnitPrice": 46.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 44,
+        "ProductName": "Gula Malacca",
+        "SupplierID": 20,
+        "CategoryID": 2,
+        "QuantityPerUnit": "20 - 2 kg bags",
+        "UnitPrice": 19.4500,
+        "UnitsInStock": 27,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 45,
+        "ProductName": "Rogede sild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "1k pkg.",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 5,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 46,
+        "ProductName": "Spegesild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "4 - 450 g glasses",
+        "UnitPrice": 12.0000,
+        "UnitsInStock": 95,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 47,
+        "ProductName": "Zaanse koeken",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 - 4 oz boxes",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 48,
+        "ProductName": "Chocolade",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 pkgs.",
+        "UnitPrice": 12.7500,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 49,
+        "ProductName": "Maxilaku",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 - 50 g pkgs.",
+        "UnitPrice": 20.0000,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 60,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 50,
+        "ProductName": "Valkoinen suklaa",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "12 - 100 g bars",
+        "UnitPrice": 16.2500,
+        "UnitsInStock": 65,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 51,
+        "ProductName": "Manjimup Dried Apples",
+        "SupplierID": 24,
+        "CategoryID": 7,
+        "QuantityPerUnit": "50 - 300 g pkgs.",
+        "UnitPrice": 53.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 52,
+        "ProductName": "Filo Mix",
+        "SupplierID": 24,
+        "CategoryID": 5,
+        "QuantityPerUnit": "16 - 2 kg boxes",
+        "UnitPrice": 7.0000,
+        "UnitsInStock": 38,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 53,
+        "ProductName": "Perth Pasties",
+        "SupplierID": 24,
+        "CategoryID": 6,
+        "QuantityPerUnit": "48 pieces",
+        "UnitPrice": 32.8000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 54,
+        "ProductName": "Tourtière",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "16 pies",
+        "UnitPrice": 7.4500,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 55,
+        "ProductName": "Pâté chinois",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "24 boxes x 2 pies",
+        "UnitPrice": 24.0000,
+        "UnitsInStock": 115,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 56,
+        "ProductName": "Gnocchi di nonna Alice",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 57,
+        "ProductName": "Ravioli Angelo",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 19.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 58,
+        "ProductName": "Escargots de Bourgogne",
+        "SupplierID": 27,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 pieces",
+        "UnitPrice": 13.2500,
+        "UnitsInStock": 62,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 59,
+        "ProductName": "Raclette Courdavault",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 55.0000,
+        "UnitsInStock": 79,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 60,
+        "ProductName": "Camembert Pierrot",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "15 - 300 g rounds",
+        "UnitPrice": 34.0000,
+        "UnitsInStock": 19,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 61,
+        "ProductName": "Sirop d'érable",
+        "SupplierID": 29,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 500 ml bottles",
+        "UnitPrice": 28.5000,
+        "UnitsInStock": 113,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 62,
+        "ProductName": "Tarte au sucre",
+        "SupplierID": 29,
+        "CategoryID": 3,
+        "QuantityPerUnit": "48 pies",
+        "UnitPrice": 49.3000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 63,
+        "ProductName": "Vegie-spread",
+        "SupplierID": 7,
+        "CategoryID": 2,
+        "QuantityPerUnit": "15 - 625 g jars",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 64,
+        "ProductName": "Wimmers gute Semmelknödel",
+        "SupplierID": 12,
+        "CategoryID": 5,
+        "QuantityPerUnit": "20 bags x 4 pieces",
+        "UnitPrice": 33.2500,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 80,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 65,
+        "ProductName": "Louisiana Fiery Hot Pepper Sauce",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "32 - 8 oz bottles",
+        "UnitPrice": 21.0500,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 66,
+        "ProductName": "Louisiana Hot Spiced Okra",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 8 oz jars",
+        "UnitPrice": 17.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 100,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 67,
+        "ProductName": "Laughing Lumberjack Lager",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 52,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 68,
+        "ProductName": "Scottish Longbreads",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 8 pieces",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 69,
+        "ProductName": "Gudbrandsdalsost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 kg pkg.",
+        "UnitPrice": 36.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 70,
+        "ProductName": "Outback Lager",
+        "SupplierID": 7,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 355 ml bottles",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 71,
+        "ProductName": "Flotemysost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 21.5000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 72,
+        "ProductName": "Mozzarella di Giovanni",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 34.8000,
+        "UnitsInStock": 14,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 73,
+        "ProductName": "Röd Kaviar",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 150 g jars",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 101,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 74,
+        "ProductName": "Longlife Tofu",
+        "SupplierID": 4,
+        "CategoryID": 7,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 20,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 75,
+        "ProductName": "Rhönbräu Klosterbier",
+        "SupplierID": 12,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 0.5 l bottles",
+        "UnitPrice": 7.7500,
+        "UnitsInStock": 125,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 76,
+        "ProductName": "Lakkalikööri",
+        "SupplierID": 23,
+        "CategoryID": 1,
+        "QuantityPerUnit": "500 ml",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 57,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 77,
+        "ProductName": "Original Frankfurter grüne Soße",
+        "SupplierID": 12,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 boxes",
+        "UnitPrice": 13.0000,
+        "UnitsInStock": 32,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    }
+]
diff --git a/vue-options-api-demos/excel/cells/data/main.js b/vue-options-api-demos/excel/cells/data/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/excel/cells/data/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/excel/cells/data/main.vue b/vue-options-api-demos/excel/cells/data/main.vue
new file mode 100644
index 00000000..16957c1a
--- /dev/null
+++ b/vue-options-api-demos/excel/cells/data/main.vue
@@ -0,0 +1,35 @@
+<template>
+<div>
+    <kbutton :theme-color="'primary'" @click="exportExcel">Export Excel</kbutton>
+</div>
+</template>
+<script>
+import { saveExcel } from '@progress/kendo-vue-excel-export';
+import products from './products.json';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+          data: products,
+          cellOptions: { background: '#ff0000',textAlign: 'center' }
+        }
+    },
+    methods: {
+        exportExcel () {
+            saveExcel({
+                data: this.data,
+                fileName: "Products",
+                columns: [
+                  { field: 'ProductID', cellOptions: this.cellOptions},
+                  { field: 'ProductName', title: 'Product Name' },
+              ]
+            });
+        },
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/excel/cells/data/products.json b/vue-options-api-demos/excel/cells/data/products.json
new file mode 100644
index 00000000..ecf3ff9e
--- /dev/null
+++ b/vue-options-api-demos/excel/cells/data/products.json
@@ -0,0 +1,1311 @@
+[
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22.0000,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.3500,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25.0000,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40.0000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97.0000,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31.0000,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 11,
+        "ProductName": "Queso Cabrales",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "1 kg pkg.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 30,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 12,
+        "ProductName": "Queso Manchego La Pastora",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 86,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 13,
+        "ProductName": "Konbu",
+        "SupplierID": 6,
+        "CategoryID": 8,
+        "QuantityPerUnit": "2 kg box",
+        "UnitPrice": 6.0000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 14,
+        "ProductName": "Tofu",
+        "SupplierID": 6,
+        "CategoryID": 7,
+        "QuantityPerUnit": "40 - 100 g pkgs.",
+        "UnitPrice": 23.2500,
+        "UnitsInStock": 35,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 15,
+        "ProductName": "Genen Shouyu",
+        "SupplierID": 6,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 250 ml bottles",
+        "UnitPrice": 15.5000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 16,
+        "ProductName": "Pavlova",
+        "SupplierID": 7,
+        "CategoryID": 3,
+        "QuantityPerUnit": "32 - 500 g boxes",
+        "UnitPrice": 17.4500,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 17,
+        "ProductName": "Alice Mutton",
+        "SupplierID": 7,
+        "CategoryID": 6,
+        "QuantityPerUnit": "20 - 1 kg tins",
+        "UnitPrice": 39.0000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 18,
+        "ProductName": "Carnarvon Tigers",
+        "SupplierID": 7,
+        "CategoryID": 8,
+        "QuantityPerUnit": "16 kg pkg.",
+        "UnitPrice": 62.5000,
+        "UnitsInStock": 42,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 19,
+        "ProductName": "Teatime Chocolate Biscuits",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 12 pieces",
+        "UnitPrice": 9.2000,
+        "UnitsInStock": 25,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 20,
+        "ProductName": "Sir Rodney's Marmalade",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "30 gift boxes",
+        "UnitPrice": 81.0000,
+        "UnitsInStock": 40,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 21,
+        "ProductName": "Sir Rodney's Scones",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 pkgs. x 4 pieces",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 3,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 22,
+        "ProductName": "Gustaf's Knäckebröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 500 g pkgs.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 104,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 23,
+        "ProductName": "Tunnbröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "12 - 250 g pkgs.",
+        "UnitPrice": 9.0000,
+        "UnitsInStock": 61,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 24,
+        "ProductName": "Guaraná Fantástica",
+        "SupplierID": 10,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 355 ml cans",
+        "UnitPrice": 4.5000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 25,
+        "ProductName": "NuNuCa Nuß-Nougat-Creme",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "20 - 450 g glasses",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 26,
+        "ProductName": "Gumbär Gummibärchen",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 250 g bags",
+        "UnitPrice": 31.2300,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 27,
+        "ProductName": "Schoggi Schokolade",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 100 g pieces",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 49,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 28,
+        "ProductName": "Rössle Sauerkraut",
+        "SupplierID": 12,
+        "CategoryID": 7,
+        "QuantityPerUnit": "25 - 825 g cans",
+        "UnitPrice": 45.6000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 29,
+        "ProductName": "Thüringer Rostbratwurst",
+        "SupplierID": 12,
+        "CategoryID": 6,
+        "QuantityPerUnit": "50 bags x 30 sausgs.",
+        "UnitPrice": 123.7900,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 30,
+        "ProductName": "Nord-Ost Matjeshering",
+        "SupplierID": 13,
+        "CategoryID": 8,
+        "QuantityPerUnit": "10 - 200 g glasses",
+        "UnitPrice": 25.8900,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 31,
+        "ProductName": "Gorgonzola Telino",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "12 - 100 g pkgs",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 32,
+        "ProductName": "Mascarpone Fabioli",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 32.0000,
+        "UnitsInStock": 9,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 33,
+        "ProductName": "Geitost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "500 g",
+        "UnitPrice": 2.5000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 34,
+        "ProductName": "Sasquatch Ale",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 111,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 35,
+        "ProductName": "Steeleye Stout",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 36,
+        "ProductName": "Inlagd Sill",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 250 g  jars",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 37,
+        "ProductName": "Gravad lax",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 500 g pkgs.",
+        "UnitPrice": 26.0000,
+        "UnitsInStock": 11,
+        "UnitsOnOrder": 50,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 38,
+        "ProductName": "Côte de Blaye",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 75 cl bottles",
+        "UnitPrice": 263.5000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 39,
+        "ProductName": "Chartreuse verte",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "750 cc per bottle",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 69,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 40,
+        "ProductName": "Boston Crab Meat",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 4 oz tins",
+        "UnitPrice": 18.4000,
+        "UnitsInStock": 123,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 41,
+        "ProductName": "Jack's New England Clam Chowder",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 12 oz cans",
+        "UnitPrice": 9.6500,
+        "UnitsInStock": 85,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 42,
+        "ProductName": "Singaporean Hokkien Fried Mee",
+        "SupplierID": 20,
+        "CategoryID": 5,
+        "QuantityPerUnit": "32 - 1 kg pkgs.",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 43,
+        "ProductName": "Ipoh Coffee",
+        "SupplierID": 20,
+        "CategoryID": 1,
+        "QuantityPerUnit": "16 - 500 g tins",
+        "UnitPrice": 46.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 44,
+        "ProductName": "Gula Malacca",
+        "SupplierID": 20,
+        "CategoryID": 2,
+        "QuantityPerUnit": "20 - 2 kg bags",
+        "UnitPrice": 19.4500,
+        "UnitsInStock": 27,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 45,
+        "ProductName": "Rogede sild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "1k pkg.",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 5,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 46,
+        "ProductName": "Spegesild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "4 - 450 g glasses",
+        "UnitPrice": 12.0000,
+        "UnitsInStock": 95,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 47,
+        "ProductName": "Zaanse koeken",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 - 4 oz boxes",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 48,
+        "ProductName": "Chocolade",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 pkgs.",
+        "UnitPrice": 12.7500,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 49,
+        "ProductName": "Maxilaku",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 - 50 g pkgs.",
+        "UnitPrice": 20.0000,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 60,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 50,
+        "ProductName": "Valkoinen suklaa",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "12 - 100 g bars",
+        "UnitPrice": 16.2500,
+        "UnitsInStock": 65,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 51,
+        "ProductName": "Manjimup Dried Apples",
+        "SupplierID": 24,
+        "CategoryID": 7,
+        "QuantityPerUnit": "50 - 300 g pkgs.",
+        "UnitPrice": 53.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 52,
+        "ProductName": "Filo Mix",
+        "SupplierID": 24,
+        "CategoryID": 5,
+        "QuantityPerUnit": "16 - 2 kg boxes",
+        "UnitPrice": 7.0000,
+        "UnitsInStock": 38,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 53,
+        "ProductName": "Perth Pasties",
+        "SupplierID": 24,
+        "CategoryID": 6,
+        "QuantityPerUnit": "48 pieces",
+        "UnitPrice": 32.8000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 54,
+        "ProductName": "Tourtière",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "16 pies",
+        "UnitPrice": 7.4500,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 55,
+        "ProductName": "Pâté chinois",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "24 boxes x 2 pies",
+        "UnitPrice": 24.0000,
+        "UnitsInStock": 115,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 56,
+        "ProductName": "Gnocchi di nonna Alice",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 57,
+        "ProductName": "Ravioli Angelo",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 19.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 58,
+        "ProductName": "Escargots de Bourgogne",
+        "SupplierID": 27,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 pieces",
+        "UnitPrice": 13.2500,
+        "UnitsInStock": 62,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 59,
+        "ProductName": "Raclette Courdavault",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 55.0000,
+        "UnitsInStock": 79,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 60,
+        "ProductName": "Camembert Pierrot",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "15 - 300 g rounds",
+        "UnitPrice": 34.0000,
+        "UnitsInStock": 19,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 61,
+        "ProductName": "Sirop d'érable",
+        "SupplierID": 29,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 500 ml bottles",
+        "UnitPrice": 28.5000,
+        "UnitsInStock": 113,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 62,
+        "ProductName": "Tarte au sucre",
+        "SupplierID": 29,
+        "CategoryID": 3,
+        "QuantityPerUnit": "48 pies",
+        "UnitPrice": 49.3000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 63,
+        "ProductName": "Vegie-spread",
+        "SupplierID": 7,
+        "CategoryID": 2,
+        "QuantityPerUnit": "15 - 625 g jars",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 64,
+        "ProductName": "Wimmers gute Semmelknödel",
+        "SupplierID": 12,
+        "CategoryID": 5,
+        "QuantityPerUnit": "20 bags x 4 pieces",
+        "UnitPrice": 33.2500,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 80,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 65,
+        "ProductName": "Louisiana Fiery Hot Pepper Sauce",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "32 - 8 oz bottles",
+        "UnitPrice": 21.0500,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 66,
+        "ProductName": "Louisiana Hot Spiced Okra",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 8 oz jars",
+        "UnitPrice": 17.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 100,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 67,
+        "ProductName": "Laughing Lumberjack Lager",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 52,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 68,
+        "ProductName": "Scottish Longbreads",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 8 pieces",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 69,
+        "ProductName": "Gudbrandsdalsost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 kg pkg.",
+        "UnitPrice": 36.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 70,
+        "ProductName": "Outback Lager",
+        "SupplierID": 7,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 355 ml bottles",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 71,
+        "ProductName": "Flotemysost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 21.5000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 72,
+        "ProductName": "Mozzarella di Giovanni",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 34.8000,
+        "UnitsInStock": 14,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 73,
+        "ProductName": "Röd Kaviar",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 150 g jars",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 101,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 74,
+        "ProductName": "Longlife Tofu",
+        "SupplierID": 4,
+        "CategoryID": 7,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 20,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 75,
+        "ProductName": "Rhönbräu Klosterbier",
+        "SupplierID": 12,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 0.5 l bottles",
+        "UnitPrice": 7.7500,
+        "UnitsInStock": 125,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 76,
+        "ProductName": "Lakkalikööri",
+        "SupplierID": 23,
+        "CategoryID": 1,
+        "QuantityPerUnit": "500 ml",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 57,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 77,
+        "ProductName": "Original Frankfurter grüne Soße",
+        "SupplierID": 12,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 boxes",
+        "UnitPrice": 13.0000,
+        "UnitsInStock": 32,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    }
+]
diff --git a/vue-options-api-demos/excel/cells/footer/main.js b/vue-options-api-demos/excel/cells/footer/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/excel/cells/footer/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/excel/cells/footer/main.vue b/vue-options-api-demos/excel/cells/footer/main.vue
new file mode 100644
index 00000000..2875cd39
--- /dev/null
+++ b/vue-options-api-demos/excel/cells/footer/main.vue
@@ -0,0 +1,48 @@
+<template>
+  <div>
+      <kbutton :theme-color="'primary'" @click="exportExcel">Export Excel</kbutton>
+  </div>
+</template>
+<script>
+import { saveExcel } from '@progress/kendo-vue-excel-export';
+import products from './products.json';
+import { aggregateBy } from '@progress/kendo-data-query';
+import { Button } from '@progress/kendo-vue-buttons';
+
+const CustomFooter = (props) => (`Sum: ${total.UnitPrice.sum}`);
+
+const aggregates = [ { field: 'UnitPrice', aggregate: 'sum' } ];
+const data = products;
+const total = aggregateBy(products, aggregates);
+
+export default {
+    components: {
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+          footerCellConfig: { background: '#ff0000' },
+        }
+    },
+    methods: {
+        exportExcel () {
+            saveExcel({
+                data: data,
+                group: this.group,
+                fileName: "Products",
+                columns: [
+                  { field: 'ProductID'},
+                  { field: 'ProductName', title: 'Product Name' },
+                  { 
+                    field: 'UnitPrice', 
+                    title: 'UnitPrice',  
+                    footerCellOptions: this.footerCellConfig,
+                    footer: CustomFooter      
+                  },
+              ]
+            });
+        },
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/excel/cells/footer/products.json b/vue-options-api-demos/excel/cells/footer/products.json
new file mode 100644
index 00000000..ecf3ff9e
--- /dev/null
+++ b/vue-options-api-demos/excel/cells/footer/products.json
@@ -0,0 +1,1311 @@
+[
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22.0000,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.3500,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25.0000,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40.0000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97.0000,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31.0000,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 11,
+        "ProductName": "Queso Cabrales",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "1 kg pkg.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 30,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 12,
+        "ProductName": "Queso Manchego La Pastora",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 86,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 13,
+        "ProductName": "Konbu",
+        "SupplierID": 6,
+        "CategoryID": 8,
+        "QuantityPerUnit": "2 kg box",
+        "UnitPrice": 6.0000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 14,
+        "ProductName": "Tofu",
+        "SupplierID": 6,
+        "CategoryID": 7,
+        "QuantityPerUnit": "40 - 100 g pkgs.",
+        "UnitPrice": 23.2500,
+        "UnitsInStock": 35,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 15,
+        "ProductName": "Genen Shouyu",
+        "SupplierID": 6,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 250 ml bottles",
+        "UnitPrice": 15.5000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 16,
+        "ProductName": "Pavlova",
+        "SupplierID": 7,
+        "CategoryID": 3,
+        "QuantityPerUnit": "32 - 500 g boxes",
+        "UnitPrice": 17.4500,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 17,
+        "ProductName": "Alice Mutton",
+        "SupplierID": 7,
+        "CategoryID": 6,
+        "QuantityPerUnit": "20 - 1 kg tins",
+        "UnitPrice": 39.0000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 18,
+        "ProductName": "Carnarvon Tigers",
+        "SupplierID": 7,
+        "CategoryID": 8,
+        "QuantityPerUnit": "16 kg pkg.",
+        "UnitPrice": 62.5000,
+        "UnitsInStock": 42,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 19,
+        "ProductName": "Teatime Chocolate Biscuits",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 12 pieces",
+        "UnitPrice": 9.2000,
+        "UnitsInStock": 25,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 20,
+        "ProductName": "Sir Rodney's Marmalade",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "30 gift boxes",
+        "UnitPrice": 81.0000,
+        "UnitsInStock": 40,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 21,
+        "ProductName": "Sir Rodney's Scones",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 pkgs. x 4 pieces",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 3,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 22,
+        "ProductName": "Gustaf's Knäckebröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 500 g pkgs.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 104,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 23,
+        "ProductName": "Tunnbröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "12 - 250 g pkgs.",
+        "UnitPrice": 9.0000,
+        "UnitsInStock": 61,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 24,
+        "ProductName": "Guaraná Fantástica",
+        "SupplierID": 10,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 355 ml cans",
+        "UnitPrice": 4.5000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 25,
+        "ProductName": "NuNuCa Nuß-Nougat-Creme",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "20 - 450 g glasses",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 26,
+        "ProductName": "Gumbär Gummibärchen",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 250 g bags",
+        "UnitPrice": 31.2300,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 27,
+        "ProductName": "Schoggi Schokolade",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 100 g pieces",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 49,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 28,
+        "ProductName": "Rössle Sauerkraut",
+        "SupplierID": 12,
+        "CategoryID": 7,
+        "QuantityPerUnit": "25 - 825 g cans",
+        "UnitPrice": 45.6000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 29,
+        "ProductName": "Thüringer Rostbratwurst",
+        "SupplierID": 12,
+        "CategoryID": 6,
+        "QuantityPerUnit": "50 bags x 30 sausgs.",
+        "UnitPrice": 123.7900,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 30,
+        "ProductName": "Nord-Ost Matjeshering",
+        "SupplierID": 13,
+        "CategoryID": 8,
+        "QuantityPerUnit": "10 - 200 g glasses",
+        "UnitPrice": 25.8900,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 31,
+        "ProductName": "Gorgonzola Telino",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "12 - 100 g pkgs",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 32,
+        "ProductName": "Mascarpone Fabioli",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 32.0000,
+        "UnitsInStock": 9,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 33,
+        "ProductName": "Geitost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "500 g",
+        "UnitPrice": 2.5000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 34,
+        "ProductName": "Sasquatch Ale",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 111,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 35,
+        "ProductName": "Steeleye Stout",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 36,
+        "ProductName": "Inlagd Sill",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 250 g  jars",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 37,
+        "ProductName": "Gravad lax",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 500 g pkgs.",
+        "UnitPrice": 26.0000,
+        "UnitsInStock": 11,
+        "UnitsOnOrder": 50,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 38,
+        "ProductName": "Côte de Blaye",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 75 cl bottles",
+        "UnitPrice": 263.5000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 39,
+        "ProductName": "Chartreuse verte",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "750 cc per bottle",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 69,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 40,
+        "ProductName": "Boston Crab Meat",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 4 oz tins",
+        "UnitPrice": 18.4000,
+        "UnitsInStock": 123,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 41,
+        "ProductName": "Jack's New England Clam Chowder",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 12 oz cans",
+        "UnitPrice": 9.6500,
+        "UnitsInStock": 85,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 42,
+        "ProductName": "Singaporean Hokkien Fried Mee",
+        "SupplierID": 20,
+        "CategoryID": 5,
+        "QuantityPerUnit": "32 - 1 kg pkgs.",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 43,
+        "ProductName": "Ipoh Coffee",
+        "SupplierID": 20,
+        "CategoryID": 1,
+        "QuantityPerUnit": "16 - 500 g tins",
+        "UnitPrice": 46.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 44,
+        "ProductName": "Gula Malacca",
+        "SupplierID": 20,
+        "CategoryID": 2,
+        "QuantityPerUnit": "20 - 2 kg bags",
+        "UnitPrice": 19.4500,
+        "UnitsInStock": 27,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 45,
+        "ProductName": "Rogede sild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "1k pkg.",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 5,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 46,
+        "ProductName": "Spegesild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "4 - 450 g glasses",
+        "UnitPrice": 12.0000,
+        "UnitsInStock": 95,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 47,
+        "ProductName": "Zaanse koeken",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 - 4 oz boxes",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 48,
+        "ProductName": "Chocolade",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 pkgs.",
+        "UnitPrice": 12.7500,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 49,
+        "ProductName": "Maxilaku",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 - 50 g pkgs.",
+        "UnitPrice": 20.0000,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 60,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 50,
+        "ProductName": "Valkoinen suklaa",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "12 - 100 g bars",
+        "UnitPrice": 16.2500,
+        "UnitsInStock": 65,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 51,
+        "ProductName": "Manjimup Dried Apples",
+        "SupplierID": 24,
+        "CategoryID": 7,
+        "QuantityPerUnit": "50 - 300 g pkgs.",
+        "UnitPrice": 53.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 52,
+        "ProductName": "Filo Mix",
+        "SupplierID": 24,
+        "CategoryID": 5,
+        "QuantityPerUnit": "16 - 2 kg boxes",
+        "UnitPrice": 7.0000,
+        "UnitsInStock": 38,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 53,
+        "ProductName": "Perth Pasties",
+        "SupplierID": 24,
+        "CategoryID": 6,
+        "QuantityPerUnit": "48 pieces",
+        "UnitPrice": 32.8000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 54,
+        "ProductName": "Tourtière",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "16 pies",
+        "UnitPrice": 7.4500,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 55,
+        "ProductName": "Pâté chinois",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "24 boxes x 2 pies",
+        "UnitPrice": 24.0000,
+        "UnitsInStock": 115,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 56,
+        "ProductName": "Gnocchi di nonna Alice",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 57,
+        "ProductName": "Ravioli Angelo",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 19.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 58,
+        "ProductName": "Escargots de Bourgogne",
+        "SupplierID": 27,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 pieces",
+        "UnitPrice": 13.2500,
+        "UnitsInStock": 62,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 59,
+        "ProductName": "Raclette Courdavault",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 55.0000,
+        "UnitsInStock": 79,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 60,
+        "ProductName": "Camembert Pierrot",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "15 - 300 g rounds",
+        "UnitPrice": 34.0000,
+        "UnitsInStock": 19,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 61,
+        "ProductName": "Sirop d'érable",
+        "SupplierID": 29,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 500 ml bottles",
+        "UnitPrice": 28.5000,
+        "UnitsInStock": 113,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 62,
+        "ProductName": "Tarte au sucre",
+        "SupplierID": 29,
+        "CategoryID": 3,
+        "QuantityPerUnit": "48 pies",
+        "UnitPrice": 49.3000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 63,
+        "ProductName": "Vegie-spread",
+        "SupplierID": 7,
+        "CategoryID": 2,
+        "QuantityPerUnit": "15 - 625 g jars",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 64,
+        "ProductName": "Wimmers gute Semmelknödel",
+        "SupplierID": 12,
+        "CategoryID": 5,
+        "QuantityPerUnit": "20 bags x 4 pieces",
+        "UnitPrice": 33.2500,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 80,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 65,
+        "ProductName": "Louisiana Fiery Hot Pepper Sauce",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "32 - 8 oz bottles",
+        "UnitPrice": 21.0500,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 66,
+        "ProductName": "Louisiana Hot Spiced Okra",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 8 oz jars",
+        "UnitPrice": 17.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 100,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 67,
+        "ProductName": "Laughing Lumberjack Lager",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 52,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 68,
+        "ProductName": "Scottish Longbreads",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 8 pieces",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 69,
+        "ProductName": "Gudbrandsdalsost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 kg pkg.",
+        "UnitPrice": 36.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 70,
+        "ProductName": "Outback Lager",
+        "SupplierID": 7,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 355 ml bottles",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 71,
+        "ProductName": "Flotemysost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 21.5000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 72,
+        "ProductName": "Mozzarella di Giovanni",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 34.8000,
+        "UnitsInStock": 14,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 73,
+        "ProductName": "Röd Kaviar",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 150 g jars",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 101,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 74,
+        "ProductName": "Longlife Tofu",
+        "SupplierID": 4,
+        "CategoryID": 7,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 20,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 75,
+        "ProductName": "Rhönbräu Klosterbier",
+        "SupplierID": 12,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 0.5 l bottles",
+        "UnitPrice": 7.7500,
+        "UnitsInStock": 125,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 76,
+        "ProductName": "Lakkalikööri",
+        "SupplierID": 23,
+        "CategoryID": 1,
+        "QuantityPerUnit": "500 ml",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 57,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 77,
+        "ProductName": "Original Frankfurter grüne Soße",
+        "SupplierID": 12,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 boxes",
+        "UnitPrice": 13.0000,
+        "UnitsInStock": 32,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    }
+]
diff --git a/vue-options-api-demos/excel/cells/group-footer/main.js b/vue-options-api-demos/excel/cells/group-footer/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/excel/cells/group-footer/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/excel/cells/group-footer/main.vue b/vue-options-api-demos/excel/cells/group-footer/main.vue
new file mode 100644
index 00000000..14016ccf
--- /dev/null
+++ b/vue-options-api-demos/excel/cells/group-footer/main.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+      <kbutton :theme-color="'primary'" @click="exportExcel">Export Excel</kbutton>
+  </div>
+</template>
+
+<script>
+import { saveExcel } from '@progress/kendo-vue-excel-export';
+import { process } from '@progress/kendo-data-query';
+import products from './products.json';
+import { Button } from '@progress/kendo-vue-buttons';
+
+const CustomGroupFooterUnitPrice = (props) => (`Sum: ${props.aggregates.UnitPrice.sum.toFixed(2)}`);
+const aggregates = [ { field: 'UnitPrice', aggregate: 'sum' } ];
+
+
+export default {
+    components: {
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+          group: [ 
+                {
+                  field: 'Discontinued',
+                  aggregates: aggregates
+                }
+            ],
+          groupFooterCellOptions: { background: '#ff0000' },
+        }
+    },
+    computed: {
+        data: function(){
+          return process(products, {
+              group: this.group,
+              aggregates: aggregates
+          }).data;
+        }
+    },
+    methods: {
+        exportExcel () {
+            saveExcel({
+                data: this.data,
+                group: this.group,
+                fileName: "Products",
+                columns: [
+                  { field: 'ProductID'},
+                  { field: 'ProductName', title: 'Product Name' },
+                  { 
+                    field: 'UnitPrice', 
+                    title: 'UnitPrice',               
+                    groupFooterCellOptions: this.groupFooterCellOptions,
+                    groupFooter: CustomGroupFooterUnitPrice
+                  },
+              ]
+            });
+        },
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/excel/cells/group-footer/products.json b/vue-options-api-demos/excel/cells/group-footer/products.json
new file mode 100644
index 00000000..ecf3ff9e
--- /dev/null
+++ b/vue-options-api-demos/excel/cells/group-footer/products.json
@@ -0,0 +1,1311 @@
+[
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22.0000,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.3500,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25.0000,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40.0000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97.0000,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31.0000,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 11,
+        "ProductName": "Queso Cabrales",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "1 kg pkg.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 30,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 12,
+        "ProductName": "Queso Manchego La Pastora",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 86,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 13,
+        "ProductName": "Konbu",
+        "SupplierID": 6,
+        "CategoryID": 8,
+        "QuantityPerUnit": "2 kg box",
+        "UnitPrice": 6.0000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 14,
+        "ProductName": "Tofu",
+        "SupplierID": 6,
+        "CategoryID": 7,
+        "QuantityPerUnit": "40 - 100 g pkgs.",
+        "UnitPrice": 23.2500,
+        "UnitsInStock": 35,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 15,
+        "ProductName": "Genen Shouyu",
+        "SupplierID": 6,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 250 ml bottles",
+        "UnitPrice": 15.5000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 16,
+        "ProductName": "Pavlova",
+        "SupplierID": 7,
+        "CategoryID": 3,
+        "QuantityPerUnit": "32 - 500 g boxes",
+        "UnitPrice": 17.4500,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 17,
+        "ProductName": "Alice Mutton",
+        "SupplierID": 7,
+        "CategoryID": 6,
+        "QuantityPerUnit": "20 - 1 kg tins",
+        "UnitPrice": 39.0000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 18,
+        "ProductName": "Carnarvon Tigers",
+        "SupplierID": 7,
+        "CategoryID": 8,
+        "QuantityPerUnit": "16 kg pkg.",
+        "UnitPrice": 62.5000,
+        "UnitsInStock": 42,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 19,
+        "ProductName": "Teatime Chocolate Biscuits",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 12 pieces",
+        "UnitPrice": 9.2000,
+        "UnitsInStock": 25,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 20,
+        "ProductName": "Sir Rodney's Marmalade",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "30 gift boxes",
+        "UnitPrice": 81.0000,
+        "UnitsInStock": 40,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 21,
+        "ProductName": "Sir Rodney's Scones",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 pkgs. x 4 pieces",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 3,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 22,
+        "ProductName": "Gustaf's Knäckebröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 500 g pkgs.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 104,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 23,
+        "ProductName": "Tunnbröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "12 - 250 g pkgs.",
+        "UnitPrice": 9.0000,
+        "UnitsInStock": 61,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 24,
+        "ProductName": "Guaraná Fantástica",
+        "SupplierID": 10,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 355 ml cans",
+        "UnitPrice": 4.5000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 25,
+        "ProductName": "NuNuCa Nuß-Nougat-Creme",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "20 - 450 g glasses",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 26,
+        "ProductName": "Gumbär Gummibärchen",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 250 g bags",
+        "UnitPrice": 31.2300,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 27,
+        "ProductName": "Schoggi Schokolade",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 100 g pieces",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 49,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 28,
+        "ProductName": "Rössle Sauerkraut",
+        "SupplierID": 12,
+        "CategoryID": 7,
+        "QuantityPerUnit": "25 - 825 g cans",
+        "UnitPrice": 45.6000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 29,
+        "ProductName": "Thüringer Rostbratwurst",
+        "SupplierID": 12,
+        "CategoryID": 6,
+        "QuantityPerUnit": "50 bags x 30 sausgs.",
+        "UnitPrice": 123.7900,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 30,
+        "ProductName": "Nord-Ost Matjeshering",
+        "SupplierID": 13,
+        "CategoryID": 8,
+        "QuantityPerUnit": "10 - 200 g glasses",
+        "UnitPrice": 25.8900,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 31,
+        "ProductName": "Gorgonzola Telino",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "12 - 100 g pkgs",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 32,
+        "ProductName": "Mascarpone Fabioli",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 32.0000,
+        "UnitsInStock": 9,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 33,
+        "ProductName": "Geitost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "500 g",
+        "UnitPrice": 2.5000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 34,
+        "ProductName": "Sasquatch Ale",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 111,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 35,
+        "ProductName": "Steeleye Stout",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 36,
+        "ProductName": "Inlagd Sill",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 250 g  jars",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 37,
+        "ProductName": "Gravad lax",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 500 g pkgs.",
+        "UnitPrice": 26.0000,
+        "UnitsInStock": 11,
+        "UnitsOnOrder": 50,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 38,
+        "ProductName": "Côte de Blaye",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 75 cl bottles",
+        "UnitPrice": 263.5000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 39,
+        "ProductName": "Chartreuse verte",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "750 cc per bottle",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 69,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 40,
+        "ProductName": "Boston Crab Meat",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 4 oz tins",
+        "UnitPrice": 18.4000,
+        "UnitsInStock": 123,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 41,
+        "ProductName": "Jack's New England Clam Chowder",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 12 oz cans",
+        "UnitPrice": 9.6500,
+        "UnitsInStock": 85,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 42,
+        "ProductName": "Singaporean Hokkien Fried Mee",
+        "SupplierID": 20,
+        "CategoryID": 5,
+        "QuantityPerUnit": "32 - 1 kg pkgs.",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 43,
+        "ProductName": "Ipoh Coffee",
+        "SupplierID": 20,
+        "CategoryID": 1,
+        "QuantityPerUnit": "16 - 500 g tins",
+        "UnitPrice": 46.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 44,
+        "ProductName": "Gula Malacca",
+        "SupplierID": 20,
+        "CategoryID": 2,
+        "QuantityPerUnit": "20 - 2 kg bags",
+        "UnitPrice": 19.4500,
+        "UnitsInStock": 27,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 45,
+        "ProductName": "Rogede sild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "1k pkg.",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 5,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 46,
+        "ProductName": "Spegesild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "4 - 450 g glasses",
+        "UnitPrice": 12.0000,
+        "UnitsInStock": 95,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 47,
+        "ProductName": "Zaanse koeken",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 - 4 oz boxes",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 48,
+        "ProductName": "Chocolade",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 pkgs.",
+        "UnitPrice": 12.7500,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 49,
+        "ProductName": "Maxilaku",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 - 50 g pkgs.",
+        "UnitPrice": 20.0000,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 60,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 50,
+        "ProductName": "Valkoinen suklaa",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "12 - 100 g bars",
+        "UnitPrice": 16.2500,
+        "UnitsInStock": 65,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 51,
+        "ProductName": "Manjimup Dried Apples",
+        "SupplierID": 24,
+        "CategoryID": 7,
+        "QuantityPerUnit": "50 - 300 g pkgs.",
+        "UnitPrice": 53.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 52,
+        "ProductName": "Filo Mix",
+        "SupplierID": 24,
+        "CategoryID": 5,
+        "QuantityPerUnit": "16 - 2 kg boxes",
+        "UnitPrice": 7.0000,
+        "UnitsInStock": 38,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 53,
+        "ProductName": "Perth Pasties",
+        "SupplierID": 24,
+        "CategoryID": 6,
+        "QuantityPerUnit": "48 pieces",
+        "UnitPrice": 32.8000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 54,
+        "ProductName": "Tourtière",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "16 pies",
+        "UnitPrice": 7.4500,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 55,
+        "ProductName": "Pâté chinois",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "24 boxes x 2 pies",
+        "UnitPrice": 24.0000,
+        "UnitsInStock": 115,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 56,
+        "ProductName": "Gnocchi di nonna Alice",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 57,
+        "ProductName": "Ravioli Angelo",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 19.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 58,
+        "ProductName": "Escargots de Bourgogne",
+        "SupplierID": 27,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 pieces",
+        "UnitPrice": 13.2500,
+        "UnitsInStock": 62,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 59,
+        "ProductName": "Raclette Courdavault",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 55.0000,
+        "UnitsInStock": 79,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 60,
+        "ProductName": "Camembert Pierrot",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "15 - 300 g rounds",
+        "UnitPrice": 34.0000,
+        "UnitsInStock": 19,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 61,
+        "ProductName": "Sirop d'érable",
+        "SupplierID": 29,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 500 ml bottles",
+        "UnitPrice": 28.5000,
+        "UnitsInStock": 113,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 62,
+        "ProductName": "Tarte au sucre",
+        "SupplierID": 29,
+        "CategoryID": 3,
+        "QuantityPerUnit": "48 pies",
+        "UnitPrice": 49.3000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 63,
+        "ProductName": "Vegie-spread",
+        "SupplierID": 7,
+        "CategoryID": 2,
+        "QuantityPerUnit": "15 - 625 g jars",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 64,
+        "ProductName": "Wimmers gute Semmelknödel",
+        "SupplierID": 12,
+        "CategoryID": 5,
+        "QuantityPerUnit": "20 bags x 4 pieces",
+        "UnitPrice": 33.2500,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 80,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 65,
+        "ProductName": "Louisiana Fiery Hot Pepper Sauce",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "32 - 8 oz bottles",
+        "UnitPrice": 21.0500,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 66,
+        "ProductName": "Louisiana Hot Spiced Okra",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 8 oz jars",
+        "UnitPrice": 17.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 100,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 67,
+        "ProductName": "Laughing Lumberjack Lager",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 52,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 68,
+        "ProductName": "Scottish Longbreads",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 8 pieces",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 69,
+        "ProductName": "Gudbrandsdalsost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 kg pkg.",
+        "UnitPrice": 36.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 70,
+        "ProductName": "Outback Lager",
+        "SupplierID": 7,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 355 ml bottles",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 71,
+        "ProductName": "Flotemysost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 21.5000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 72,
+        "ProductName": "Mozzarella di Giovanni",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 34.8000,
+        "UnitsInStock": 14,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 73,
+        "ProductName": "Röd Kaviar",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 150 g jars",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 101,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 74,
+        "ProductName": "Longlife Tofu",
+        "SupplierID": 4,
+        "CategoryID": 7,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 20,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 75,
+        "ProductName": "Rhönbräu Klosterbier",
+        "SupplierID": 12,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 0.5 l bottles",
+        "UnitPrice": 7.7500,
+        "UnitsInStock": 125,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 76,
+        "ProductName": "Lakkalikööri",
+        "SupplierID": 23,
+        "CategoryID": 1,
+        "QuantityPerUnit": "500 ml",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 57,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 77,
+        "ProductName": "Original Frankfurter grüne Soße",
+        "SupplierID": 12,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 boxes",
+        "UnitPrice": 13.0000,
+        "UnitsInStock": 32,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    }
+]
diff --git a/vue-options-api-demos/excel/cells/group-header/main.js b/vue-options-api-demos/excel/cells/group-header/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/excel/cells/group-header/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/excel/cells/group-header/main.vue b/vue-options-api-demos/excel/cells/group-header/main.vue
new file mode 100644
index 00000000..ccef896a
--- /dev/null
+++ b/vue-options-api-demos/excel/cells/group-header/main.vue
@@ -0,0 +1,48 @@
+<template>
+  <div>
+      <kbutton :theme-color="'primary'" @click="exportExcel">Export Excel</kbutton>
+  </div>
+</template>
+
+<script>
+import { saveExcel } from '@progress/kendo-vue-excel-export';
+import { process } from '@progress/kendo-data-query';
+import products from './products.json';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+          group: [ { field: 'Category.CategoryName' } ],
+          groupHeaderCellOptions: { background: '#ff0000' }
+        }
+    },
+    methods: {
+        data() { 
+          return process(products, {
+              group: this.group
+          }).data;
+        },
+        exportExcel () {
+            saveExcel({
+                data: this.data(),
+                group: this.group,
+                fileName: "Products",
+                columns: [
+                  { field: 'ProductID'},
+                  { field: 'ProductName', title: 'Product Name' },
+                  { 
+                    field: 'Category.CategoryName', 
+                    title: 'Category', hidden: true,                 
+                    groupHeaderCellOptions: this.groupHeaderCellOptions 
+                  },
+              ]
+            });
+        },
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/excel/cells/group-header/products.json b/vue-options-api-demos/excel/cells/group-header/products.json
new file mode 100644
index 00000000..ecf3ff9e
--- /dev/null
+++ b/vue-options-api-demos/excel/cells/group-header/products.json
@@ -0,0 +1,1311 @@
+[
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22.0000,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.3500,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25.0000,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40.0000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97.0000,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31.0000,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 11,
+        "ProductName": "Queso Cabrales",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "1 kg pkg.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 30,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 12,
+        "ProductName": "Queso Manchego La Pastora",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 86,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 13,
+        "ProductName": "Konbu",
+        "SupplierID": 6,
+        "CategoryID": 8,
+        "QuantityPerUnit": "2 kg box",
+        "UnitPrice": 6.0000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 14,
+        "ProductName": "Tofu",
+        "SupplierID": 6,
+        "CategoryID": 7,
+        "QuantityPerUnit": "40 - 100 g pkgs.",
+        "UnitPrice": 23.2500,
+        "UnitsInStock": 35,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 15,
+        "ProductName": "Genen Shouyu",
+        "SupplierID": 6,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 250 ml bottles",
+        "UnitPrice": 15.5000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 16,
+        "ProductName": "Pavlova",
+        "SupplierID": 7,
+        "CategoryID": 3,
+        "QuantityPerUnit": "32 - 500 g boxes",
+        "UnitPrice": 17.4500,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 17,
+        "ProductName": "Alice Mutton",
+        "SupplierID": 7,
+        "CategoryID": 6,
+        "QuantityPerUnit": "20 - 1 kg tins",
+        "UnitPrice": 39.0000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 18,
+        "ProductName": "Carnarvon Tigers",
+        "SupplierID": 7,
+        "CategoryID": 8,
+        "QuantityPerUnit": "16 kg pkg.",
+        "UnitPrice": 62.5000,
+        "UnitsInStock": 42,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 19,
+        "ProductName": "Teatime Chocolate Biscuits",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 12 pieces",
+        "UnitPrice": 9.2000,
+        "UnitsInStock": 25,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 20,
+        "ProductName": "Sir Rodney's Marmalade",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "30 gift boxes",
+        "UnitPrice": 81.0000,
+        "UnitsInStock": 40,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 21,
+        "ProductName": "Sir Rodney's Scones",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 pkgs. x 4 pieces",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 3,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 22,
+        "ProductName": "Gustaf's Knäckebröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 500 g pkgs.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 104,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 23,
+        "ProductName": "Tunnbröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "12 - 250 g pkgs.",
+        "UnitPrice": 9.0000,
+        "UnitsInStock": 61,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 24,
+        "ProductName": "Guaraná Fantástica",
+        "SupplierID": 10,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 355 ml cans",
+        "UnitPrice": 4.5000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 25,
+        "ProductName": "NuNuCa Nuß-Nougat-Creme",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "20 - 450 g glasses",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 26,
+        "ProductName": "Gumbär Gummibärchen",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 250 g bags",
+        "UnitPrice": 31.2300,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 27,
+        "ProductName": "Schoggi Schokolade",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 100 g pieces",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 49,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 28,
+        "ProductName": "Rössle Sauerkraut",
+        "SupplierID": 12,
+        "CategoryID": 7,
+        "QuantityPerUnit": "25 - 825 g cans",
+        "UnitPrice": 45.6000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 29,
+        "ProductName": "Thüringer Rostbratwurst",
+        "SupplierID": 12,
+        "CategoryID": 6,
+        "QuantityPerUnit": "50 bags x 30 sausgs.",
+        "UnitPrice": 123.7900,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 30,
+        "ProductName": "Nord-Ost Matjeshering",
+        "SupplierID": 13,
+        "CategoryID": 8,
+        "QuantityPerUnit": "10 - 200 g glasses",
+        "UnitPrice": 25.8900,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 31,
+        "ProductName": "Gorgonzola Telino",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "12 - 100 g pkgs",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 32,
+        "ProductName": "Mascarpone Fabioli",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 32.0000,
+        "UnitsInStock": 9,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 33,
+        "ProductName": "Geitost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "500 g",
+        "UnitPrice": 2.5000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 34,
+        "ProductName": "Sasquatch Ale",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 111,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 35,
+        "ProductName": "Steeleye Stout",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 36,
+        "ProductName": "Inlagd Sill",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 250 g  jars",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 37,
+        "ProductName": "Gravad lax",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 500 g pkgs.",
+        "UnitPrice": 26.0000,
+        "UnitsInStock": 11,
+        "UnitsOnOrder": 50,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 38,
+        "ProductName": "Côte de Blaye",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 75 cl bottles",
+        "UnitPrice": 263.5000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 39,
+        "ProductName": "Chartreuse verte",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "750 cc per bottle",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 69,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 40,
+        "ProductName": "Boston Crab Meat",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 4 oz tins",
+        "UnitPrice": 18.4000,
+        "UnitsInStock": 123,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 41,
+        "ProductName": "Jack's New England Clam Chowder",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 12 oz cans",
+        "UnitPrice": 9.6500,
+        "UnitsInStock": 85,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 42,
+        "ProductName": "Singaporean Hokkien Fried Mee",
+        "SupplierID": 20,
+        "CategoryID": 5,
+        "QuantityPerUnit": "32 - 1 kg pkgs.",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 43,
+        "ProductName": "Ipoh Coffee",
+        "SupplierID": 20,
+        "CategoryID": 1,
+        "QuantityPerUnit": "16 - 500 g tins",
+        "UnitPrice": 46.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 44,
+        "ProductName": "Gula Malacca",
+        "SupplierID": 20,
+        "CategoryID": 2,
+        "QuantityPerUnit": "20 - 2 kg bags",
+        "UnitPrice": 19.4500,
+        "UnitsInStock": 27,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 45,
+        "ProductName": "Rogede sild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "1k pkg.",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 5,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 46,
+        "ProductName": "Spegesild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "4 - 450 g glasses",
+        "UnitPrice": 12.0000,
+        "UnitsInStock": 95,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 47,
+        "ProductName": "Zaanse koeken",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 - 4 oz boxes",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 48,
+        "ProductName": "Chocolade",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 pkgs.",
+        "UnitPrice": 12.7500,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 49,
+        "ProductName": "Maxilaku",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 - 50 g pkgs.",
+        "UnitPrice": 20.0000,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 60,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 50,
+        "ProductName": "Valkoinen suklaa",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "12 - 100 g bars",
+        "UnitPrice": 16.2500,
+        "UnitsInStock": 65,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 51,
+        "ProductName": "Manjimup Dried Apples",
+        "SupplierID": 24,
+        "CategoryID": 7,
+        "QuantityPerUnit": "50 - 300 g pkgs.",
+        "UnitPrice": 53.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 52,
+        "ProductName": "Filo Mix",
+        "SupplierID": 24,
+        "CategoryID": 5,
+        "QuantityPerUnit": "16 - 2 kg boxes",
+        "UnitPrice": 7.0000,
+        "UnitsInStock": 38,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 53,
+        "ProductName": "Perth Pasties",
+        "SupplierID": 24,
+        "CategoryID": 6,
+        "QuantityPerUnit": "48 pieces",
+        "UnitPrice": 32.8000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 54,
+        "ProductName": "Tourtière",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "16 pies",
+        "UnitPrice": 7.4500,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 55,
+        "ProductName": "Pâté chinois",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "24 boxes x 2 pies",
+        "UnitPrice": 24.0000,
+        "UnitsInStock": 115,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 56,
+        "ProductName": "Gnocchi di nonna Alice",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 57,
+        "ProductName": "Ravioli Angelo",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 19.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 58,
+        "ProductName": "Escargots de Bourgogne",
+        "SupplierID": 27,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 pieces",
+        "UnitPrice": 13.2500,
+        "UnitsInStock": 62,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 59,
+        "ProductName": "Raclette Courdavault",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 55.0000,
+        "UnitsInStock": 79,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 60,
+        "ProductName": "Camembert Pierrot",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "15 - 300 g rounds",
+        "UnitPrice": 34.0000,
+        "UnitsInStock": 19,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 61,
+        "ProductName": "Sirop d'érable",
+        "SupplierID": 29,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 500 ml bottles",
+        "UnitPrice": 28.5000,
+        "UnitsInStock": 113,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 62,
+        "ProductName": "Tarte au sucre",
+        "SupplierID": 29,
+        "CategoryID": 3,
+        "QuantityPerUnit": "48 pies",
+        "UnitPrice": 49.3000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 63,
+        "ProductName": "Vegie-spread",
+        "SupplierID": 7,
+        "CategoryID": 2,
+        "QuantityPerUnit": "15 - 625 g jars",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 64,
+        "ProductName": "Wimmers gute Semmelknödel",
+        "SupplierID": 12,
+        "CategoryID": 5,
+        "QuantityPerUnit": "20 bags x 4 pieces",
+        "UnitPrice": 33.2500,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 80,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 65,
+        "ProductName": "Louisiana Fiery Hot Pepper Sauce",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "32 - 8 oz bottles",
+        "UnitPrice": 21.0500,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 66,
+        "ProductName": "Louisiana Hot Spiced Okra",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 8 oz jars",
+        "UnitPrice": 17.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 100,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 67,
+        "ProductName": "Laughing Lumberjack Lager",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 52,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 68,
+        "ProductName": "Scottish Longbreads",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 8 pieces",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 69,
+        "ProductName": "Gudbrandsdalsost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 kg pkg.",
+        "UnitPrice": 36.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 70,
+        "ProductName": "Outback Lager",
+        "SupplierID": 7,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 355 ml bottles",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 71,
+        "ProductName": "Flotemysost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 21.5000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 72,
+        "ProductName": "Mozzarella di Giovanni",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 34.8000,
+        "UnitsInStock": 14,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 73,
+        "ProductName": "Röd Kaviar",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 150 g jars",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 101,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 74,
+        "ProductName": "Longlife Tofu",
+        "SupplierID": 4,
+        "CategoryID": 7,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 20,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 75,
+        "ProductName": "Rhönbräu Klosterbier",
+        "SupplierID": 12,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 0.5 l bottles",
+        "UnitPrice": 7.7500,
+        "UnitsInStock": 125,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 76,
+        "ProductName": "Lakkalikööri",
+        "SupplierID": 23,
+        "CategoryID": 1,
+        "QuantityPerUnit": "500 ml",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 57,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 77,
+        "ProductName": "Original Frankfurter grüne Soße",
+        "SupplierID": 12,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 boxes",
+        "UnitPrice": 13.0000,
+        "UnitsInStock": 32,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    }
+]
diff --git a/vue-options-api-demos/excel/cells/header-padding/main.js b/vue-options-api-demos/excel/cells/header-padding/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/excel/cells/header-padding/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/excel/cells/header-padding/main.vue b/vue-options-api-demos/excel/cells/header-padding/main.vue
new file mode 100644
index 00000000..62588021
--- /dev/null
+++ b/vue-options-api-demos/excel/cells/header-padding/main.vue
@@ -0,0 +1,44 @@
+<template>
+<div>
+    <kbutton :theme-color="'primary'" @click="exportExcel">Export Excel</kbutton>
+</div>
+</template>
+<script>
+import { saveExcel } from '@progress/kendo-vue-excel-export';
+import products from './products.json';
+import { process } from '@progress/kendo-data-query';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+          group: [ { field: 'Category.CategoryName' } ],
+          headerPaddingCellOptions: { background: '#ff0000' }
+        }
+    },
+    methods: {
+        data() { 
+          return process(products, {
+              group: this.group
+          }).data;
+        },
+        exportExcel () {
+            saveExcel({
+                data: this.data(),
+                group: this.group,
+                fileName: "Products",
+                headerPaddingCellOptions: this.headerPaddingCellOptions,
+                columns: [
+                  { field: 'ProductID'},
+                  { field: 'ProductName', title: 'Product Name' },
+                  { field: 'Category.CategoryName', title: 'Category', hidden: true },
+              ]
+            });
+        },
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/excel/cells/header-padding/products.json b/vue-options-api-demos/excel/cells/header-padding/products.json
new file mode 100644
index 00000000..ecf3ff9e
--- /dev/null
+++ b/vue-options-api-demos/excel/cells/header-padding/products.json
@@ -0,0 +1,1311 @@
+[
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22.0000,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.3500,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25.0000,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40.0000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97.0000,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31.0000,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 11,
+        "ProductName": "Queso Cabrales",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "1 kg pkg.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 30,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 12,
+        "ProductName": "Queso Manchego La Pastora",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 86,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 13,
+        "ProductName": "Konbu",
+        "SupplierID": 6,
+        "CategoryID": 8,
+        "QuantityPerUnit": "2 kg box",
+        "UnitPrice": 6.0000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 14,
+        "ProductName": "Tofu",
+        "SupplierID": 6,
+        "CategoryID": 7,
+        "QuantityPerUnit": "40 - 100 g pkgs.",
+        "UnitPrice": 23.2500,
+        "UnitsInStock": 35,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 15,
+        "ProductName": "Genen Shouyu",
+        "SupplierID": 6,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 250 ml bottles",
+        "UnitPrice": 15.5000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 16,
+        "ProductName": "Pavlova",
+        "SupplierID": 7,
+        "CategoryID": 3,
+        "QuantityPerUnit": "32 - 500 g boxes",
+        "UnitPrice": 17.4500,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 17,
+        "ProductName": "Alice Mutton",
+        "SupplierID": 7,
+        "CategoryID": 6,
+        "QuantityPerUnit": "20 - 1 kg tins",
+        "UnitPrice": 39.0000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 18,
+        "ProductName": "Carnarvon Tigers",
+        "SupplierID": 7,
+        "CategoryID": 8,
+        "QuantityPerUnit": "16 kg pkg.",
+        "UnitPrice": 62.5000,
+        "UnitsInStock": 42,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 19,
+        "ProductName": "Teatime Chocolate Biscuits",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 12 pieces",
+        "UnitPrice": 9.2000,
+        "UnitsInStock": 25,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 20,
+        "ProductName": "Sir Rodney's Marmalade",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "30 gift boxes",
+        "UnitPrice": 81.0000,
+        "UnitsInStock": 40,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 21,
+        "ProductName": "Sir Rodney's Scones",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 pkgs. x 4 pieces",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 3,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 22,
+        "ProductName": "Gustaf's Knäckebröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 500 g pkgs.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 104,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 23,
+        "ProductName": "Tunnbröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "12 - 250 g pkgs.",
+        "UnitPrice": 9.0000,
+        "UnitsInStock": 61,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 24,
+        "ProductName": "Guaraná Fantástica",
+        "SupplierID": 10,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 355 ml cans",
+        "UnitPrice": 4.5000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 25,
+        "ProductName": "NuNuCa Nuß-Nougat-Creme",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "20 - 450 g glasses",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 26,
+        "ProductName": "Gumbär Gummibärchen",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 250 g bags",
+        "UnitPrice": 31.2300,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 27,
+        "ProductName": "Schoggi Schokolade",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 100 g pieces",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 49,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 28,
+        "ProductName": "Rössle Sauerkraut",
+        "SupplierID": 12,
+        "CategoryID": 7,
+        "QuantityPerUnit": "25 - 825 g cans",
+        "UnitPrice": 45.6000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 29,
+        "ProductName": "Thüringer Rostbratwurst",
+        "SupplierID": 12,
+        "CategoryID": 6,
+        "QuantityPerUnit": "50 bags x 30 sausgs.",
+        "UnitPrice": 123.7900,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 30,
+        "ProductName": "Nord-Ost Matjeshering",
+        "SupplierID": 13,
+        "CategoryID": 8,
+        "QuantityPerUnit": "10 - 200 g glasses",
+        "UnitPrice": 25.8900,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 31,
+        "ProductName": "Gorgonzola Telino",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "12 - 100 g pkgs",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 32,
+        "ProductName": "Mascarpone Fabioli",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 32.0000,
+        "UnitsInStock": 9,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 33,
+        "ProductName": "Geitost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "500 g",
+        "UnitPrice": 2.5000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 34,
+        "ProductName": "Sasquatch Ale",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 111,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 35,
+        "ProductName": "Steeleye Stout",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 36,
+        "ProductName": "Inlagd Sill",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 250 g  jars",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 37,
+        "ProductName": "Gravad lax",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 500 g pkgs.",
+        "UnitPrice": 26.0000,
+        "UnitsInStock": 11,
+        "UnitsOnOrder": 50,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 38,
+        "ProductName": "Côte de Blaye",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 75 cl bottles",
+        "UnitPrice": 263.5000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 39,
+        "ProductName": "Chartreuse verte",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "750 cc per bottle",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 69,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 40,
+        "ProductName": "Boston Crab Meat",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 4 oz tins",
+        "UnitPrice": 18.4000,
+        "UnitsInStock": 123,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 41,
+        "ProductName": "Jack's New England Clam Chowder",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 12 oz cans",
+        "UnitPrice": 9.6500,
+        "UnitsInStock": 85,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 42,
+        "ProductName": "Singaporean Hokkien Fried Mee",
+        "SupplierID": 20,
+        "CategoryID": 5,
+        "QuantityPerUnit": "32 - 1 kg pkgs.",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 43,
+        "ProductName": "Ipoh Coffee",
+        "SupplierID": 20,
+        "CategoryID": 1,
+        "QuantityPerUnit": "16 - 500 g tins",
+        "UnitPrice": 46.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 44,
+        "ProductName": "Gula Malacca",
+        "SupplierID": 20,
+        "CategoryID": 2,
+        "QuantityPerUnit": "20 - 2 kg bags",
+        "UnitPrice": 19.4500,
+        "UnitsInStock": 27,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 45,
+        "ProductName": "Rogede sild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "1k pkg.",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 5,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 46,
+        "ProductName": "Spegesild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "4 - 450 g glasses",
+        "UnitPrice": 12.0000,
+        "UnitsInStock": 95,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 47,
+        "ProductName": "Zaanse koeken",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 - 4 oz boxes",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 48,
+        "ProductName": "Chocolade",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 pkgs.",
+        "UnitPrice": 12.7500,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 49,
+        "ProductName": "Maxilaku",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 - 50 g pkgs.",
+        "UnitPrice": 20.0000,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 60,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 50,
+        "ProductName": "Valkoinen suklaa",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "12 - 100 g bars",
+        "UnitPrice": 16.2500,
+        "UnitsInStock": 65,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 51,
+        "ProductName": "Manjimup Dried Apples",
+        "SupplierID": 24,
+        "CategoryID": 7,
+        "QuantityPerUnit": "50 - 300 g pkgs.",
+        "UnitPrice": 53.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 52,
+        "ProductName": "Filo Mix",
+        "SupplierID": 24,
+        "CategoryID": 5,
+        "QuantityPerUnit": "16 - 2 kg boxes",
+        "UnitPrice": 7.0000,
+        "UnitsInStock": 38,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 53,
+        "ProductName": "Perth Pasties",
+        "SupplierID": 24,
+        "CategoryID": 6,
+        "QuantityPerUnit": "48 pieces",
+        "UnitPrice": 32.8000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 54,
+        "ProductName": "Tourtière",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "16 pies",
+        "UnitPrice": 7.4500,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 55,
+        "ProductName": "Pâté chinois",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "24 boxes x 2 pies",
+        "UnitPrice": 24.0000,
+        "UnitsInStock": 115,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 56,
+        "ProductName": "Gnocchi di nonna Alice",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 57,
+        "ProductName": "Ravioli Angelo",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 19.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 58,
+        "ProductName": "Escargots de Bourgogne",
+        "SupplierID": 27,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 pieces",
+        "UnitPrice": 13.2500,
+        "UnitsInStock": 62,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 59,
+        "ProductName": "Raclette Courdavault",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 55.0000,
+        "UnitsInStock": 79,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 60,
+        "ProductName": "Camembert Pierrot",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "15 - 300 g rounds",
+        "UnitPrice": 34.0000,
+        "UnitsInStock": 19,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 61,
+        "ProductName": "Sirop d'érable",
+        "SupplierID": 29,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 500 ml bottles",
+        "UnitPrice": 28.5000,
+        "UnitsInStock": 113,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 62,
+        "ProductName": "Tarte au sucre",
+        "SupplierID": 29,
+        "CategoryID": 3,
+        "QuantityPerUnit": "48 pies",
+        "UnitPrice": 49.3000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 63,
+        "ProductName": "Vegie-spread",
+        "SupplierID": 7,
+        "CategoryID": 2,
+        "QuantityPerUnit": "15 - 625 g jars",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 64,
+        "ProductName": "Wimmers gute Semmelknödel",
+        "SupplierID": 12,
+        "CategoryID": 5,
+        "QuantityPerUnit": "20 bags x 4 pieces",
+        "UnitPrice": 33.2500,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 80,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 65,
+        "ProductName": "Louisiana Fiery Hot Pepper Sauce",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "32 - 8 oz bottles",
+        "UnitPrice": 21.0500,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 66,
+        "ProductName": "Louisiana Hot Spiced Okra",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 8 oz jars",
+        "UnitPrice": 17.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 100,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 67,
+        "ProductName": "Laughing Lumberjack Lager",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 52,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 68,
+        "ProductName": "Scottish Longbreads",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 8 pieces",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 69,
+        "ProductName": "Gudbrandsdalsost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 kg pkg.",
+        "UnitPrice": 36.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 70,
+        "ProductName": "Outback Lager",
+        "SupplierID": 7,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 355 ml bottles",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 71,
+        "ProductName": "Flotemysost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 21.5000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 72,
+        "ProductName": "Mozzarella di Giovanni",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 34.8000,
+        "UnitsInStock": 14,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 73,
+        "ProductName": "Röd Kaviar",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 150 g jars",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 101,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 74,
+        "ProductName": "Longlife Tofu",
+        "SupplierID": 4,
+        "CategoryID": 7,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 20,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 75,
+        "ProductName": "Rhönbräu Klosterbier",
+        "SupplierID": 12,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 0.5 l bottles",
+        "UnitPrice": 7.7500,
+        "UnitsInStock": 125,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 76,
+        "ProductName": "Lakkalikööri",
+        "SupplierID": 23,
+        "CategoryID": 1,
+        "QuantityPerUnit": "500 ml",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 57,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 77,
+        "ProductName": "Original Frankfurter grüne Soße",
+        "SupplierID": 12,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 boxes",
+        "UnitPrice": 13.0000,
+        "UnitsInStock": 32,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    }
+]
diff --git a/vue-options-api-demos/excel/cells/header/main.js b/vue-options-api-demos/excel/cells/header/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/excel/cells/header/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/excel/cells/header/main.vue b/vue-options-api-demos/excel/cells/header/main.vue
new file mode 100644
index 00000000..e73da04f
--- /dev/null
+++ b/vue-options-api-demos/excel/cells/header/main.vue
@@ -0,0 +1,38 @@
+<template>
+<div>
+    <kbutton :theme-color="'primary'" @click="exportExcel">Export Excel</kbutton>
+</div>
+</template>
+<script>
+import { saveExcel } from '@progress/kendo-vue-excel-export';
+import products from './products.json';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+          data: products,
+          headerCellOptionsConfig: {
+                            background: '#ff0000',
+                            textAlign: 'center'
+                        }
+        }
+    },
+    methods: {
+        exportExcel () {
+            saveExcel({
+                data: this.data,
+                fileName: "Products",
+                columns: [
+                  { field: 'ProductID', headerCellOptions: this.headerCellOptionsConfig},
+                  { field: 'ProductName', title: 'Product Name' },
+              ]
+            });
+        },
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/excel/cells/header/products.json b/vue-options-api-demos/excel/cells/header/products.json
new file mode 100644
index 00000000..ecf3ff9e
--- /dev/null
+++ b/vue-options-api-demos/excel/cells/header/products.json
@@ -0,0 +1,1311 @@
+[
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22.0000,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.3500,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25.0000,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40.0000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97.0000,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31.0000,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 11,
+        "ProductName": "Queso Cabrales",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "1 kg pkg.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 30,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 12,
+        "ProductName": "Queso Manchego La Pastora",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 86,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 13,
+        "ProductName": "Konbu",
+        "SupplierID": 6,
+        "CategoryID": 8,
+        "QuantityPerUnit": "2 kg box",
+        "UnitPrice": 6.0000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 14,
+        "ProductName": "Tofu",
+        "SupplierID": 6,
+        "CategoryID": 7,
+        "QuantityPerUnit": "40 - 100 g pkgs.",
+        "UnitPrice": 23.2500,
+        "UnitsInStock": 35,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 15,
+        "ProductName": "Genen Shouyu",
+        "SupplierID": 6,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 250 ml bottles",
+        "UnitPrice": 15.5000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 16,
+        "ProductName": "Pavlova",
+        "SupplierID": 7,
+        "CategoryID": 3,
+        "QuantityPerUnit": "32 - 500 g boxes",
+        "UnitPrice": 17.4500,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 17,
+        "ProductName": "Alice Mutton",
+        "SupplierID": 7,
+        "CategoryID": 6,
+        "QuantityPerUnit": "20 - 1 kg tins",
+        "UnitPrice": 39.0000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 18,
+        "ProductName": "Carnarvon Tigers",
+        "SupplierID": 7,
+        "CategoryID": 8,
+        "QuantityPerUnit": "16 kg pkg.",
+        "UnitPrice": 62.5000,
+        "UnitsInStock": 42,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 19,
+        "ProductName": "Teatime Chocolate Biscuits",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 12 pieces",
+        "UnitPrice": 9.2000,
+        "UnitsInStock": 25,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 20,
+        "ProductName": "Sir Rodney's Marmalade",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "30 gift boxes",
+        "UnitPrice": 81.0000,
+        "UnitsInStock": 40,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 21,
+        "ProductName": "Sir Rodney's Scones",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 pkgs. x 4 pieces",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 3,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 22,
+        "ProductName": "Gustaf's Knäckebröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 500 g pkgs.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 104,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 23,
+        "ProductName": "Tunnbröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "12 - 250 g pkgs.",
+        "UnitPrice": 9.0000,
+        "UnitsInStock": 61,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 24,
+        "ProductName": "Guaraná Fantástica",
+        "SupplierID": 10,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 355 ml cans",
+        "UnitPrice": 4.5000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 25,
+        "ProductName": "NuNuCa Nuß-Nougat-Creme",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "20 - 450 g glasses",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 26,
+        "ProductName": "Gumbär Gummibärchen",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 250 g bags",
+        "UnitPrice": 31.2300,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 27,
+        "ProductName": "Schoggi Schokolade",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 100 g pieces",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 49,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 28,
+        "ProductName": "Rössle Sauerkraut",
+        "SupplierID": 12,
+        "CategoryID": 7,
+        "QuantityPerUnit": "25 - 825 g cans",
+        "UnitPrice": 45.6000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 29,
+        "ProductName": "Thüringer Rostbratwurst",
+        "SupplierID": 12,
+        "CategoryID": 6,
+        "QuantityPerUnit": "50 bags x 30 sausgs.",
+        "UnitPrice": 123.7900,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 30,
+        "ProductName": "Nord-Ost Matjeshering",
+        "SupplierID": 13,
+        "CategoryID": 8,
+        "QuantityPerUnit": "10 - 200 g glasses",
+        "UnitPrice": 25.8900,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 31,
+        "ProductName": "Gorgonzola Telino",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "12 - 100 g pkgs",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 32,
+        "ProductName": "Mascarpone Fabioli",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 32.0000,
+        "UnitsInStock": 9,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 33,
+        "ProductName": "Geitost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "500 g",
+        "UnitPrice": 2.5000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 34,
+        "ProductName": "Sasquatch Ale",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 111,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 35,
+        "ProductName": "Steeleye Stout",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 36,
+        "ProductName": "Inlagd Sill",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 250 g  jars",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 37,
+        "ProductName": "Gravad lax",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 500 g pkgs.",
+        "UnitPrice": 26.0000,
+        "UnitsInStock": 11,
+        "UnitsOnOrder": 50,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 38,
+        "ProductName": "Côte de Blaye",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 75 cl bottles",
+        "UnitPrice": 263.5000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 39,
+        "ProductName": "Chartreuse verte",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "750 cc per bottle",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 69,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 40,
+        "ProductName": "Boston Crab Meat",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 4 oz tins",
+        "UnitPrice": 18.4000,
+        "UnitsInStock": 123,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 41,
+        "ProductName": "Jack's New England Clam Chowder",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 12 oz cans",
+        "UnitPrice": 9.6500,
+        "UnitsInStock": 85,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 42,
+        "ProductName": "Singaporean Hokkien Fried Mee",
+        "SupplierID": 20,
+        "CategoryID": 5,
+        "QuantityPerUnit": "32 - 1 kg pkgs.",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 43,
+        "ProductName": "Ipoh Coffee",
+        "SupplierID": 20,
+        "CategoryID": 1,
+        "QuantityPerUnit": "16 - 500 g tins",
+        "UnitPrice": 46.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 44,
+        "ProductName": "Gula Malacca",
+        "SupplierID": 20,
+        "CategoryID": 2,
+        "QuantityPerUnit": "20 - 2 kg bags",
+        "UnitPrice": 19.4500,
+        "UnitsInStock": 27,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 45,
+        "ProductName": "Rogede sild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "1k pkg.",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 5,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 46,
+        "ProductName": "Spegesild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "4 - 450 g glasses",
+        "UnitPrice": 12.0000,
+        "UnitsInStock": 95,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 47,
+        "ProductName": "Zaanse koeken",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 - 4 oz boxes",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 48,
+        "ProductName": "Chocolade",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 pkgs.",
+        "UnitPrice": 12.7500,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 49,
+        "ProductName": "Maxilaku",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 - 50 g pkgs.",
+        "UnitPrice": 20.0000,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 60,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 50,
+        "ProductName": "Valkoinen suklaa",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "12 - 100 g bars",
+        "UnitPrice": 16.2500,
+        "UnitsInStock": 65,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 51,
+        "ProductName": "Manjimup Dried Apples",
+        "SupplierID": 24,
+        "CategoryID": 7,
+        "QuantityPerUnit": "50 - 300 g pkgs.",
+        "UnitPrice": 53.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 52,
+        "ProductName": "Filo Mix",
+        "SupplierID": 24,
+        "CategoryID": 5,
+        "QuantityPerUnit": "16 - 2 kg boxes",
+        "UnitPrice": 7.0000,
+        "UnitsInStock": 38,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 53,
+        "ProductName": "Perth Pasties",
+        "SupplierID": 24,
+        "CategoryID": 6,
+        "QuantityPerUnit": "48 pieces",
+        "UnitPrice": 32.8000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 54,
+        "ProductName": "Tourtière",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "16 pies",
+        "UnitPrice": 7.4500,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 55,
+        "ProductName": "Pâté chinois",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "24 boxes x 2 pies",
+        "UnitPrice": 24.0000,
+        "UnitsInStock": 115,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 56,
+        "ProductName": "Gnocchi di nonna Alice",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 57,
+        "ProductName": "Ravioli Angelo",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 19.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 58,
+        "ProductName": "Escargots de Bourgogne",
+        "SupplierID": 27,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 pieces",
+        "UnitPrice": 13.2500,
+        "UnitsInStock": 62,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 59,
+        "ProductName": "Raclette Courdavault",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 55.0000,
+        "UnitsInStock": 79,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 60,
+        "ProductName": "Camembert Pierrot",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "15 - 300 g rounds",
+        "UnitPrice": 34.0000,
+        "UnitsInStock": 19,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 61,
+        "ProductName": "Sirop d'érable",
+        "SupplierID": 29,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 500 ml bottles",
+        "UnitPrice": 28.5000,
+        "UnitsInStock": 113,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 62,
+        "ProductName": "Tarte au sucre",
+        "SupplierID": 29,
+        "CategoryID": 3,
+        "QuantityPerUnit": "48 pies",
+        "UnitPrice": 49.3000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 63,
+        "ProductName": "Vegie-spread",
+        "SupplierID": 7,
+        "CategoryID": 2,
+        "QuantityPerUnit": "15 - 625 g jars",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 64,
+        "ProductName": "Wimmers gute Semmelknödel",
+        "SupplierID": 12,
+        "CategoryID": 5,
+        "QuantityPerUnit": "20 bags x 4 pieces",
+        "UnitPrice": 33.2500,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 80,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 65,
+        "ProductName": "Louisiana Fiery Hot Pepper Sauce",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "32 - 8 oz bottles",
+        "UnitPrice": 21.0500,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 66,
+        "ProductName": "Louisiana Hot Spiced Okra",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 8 oz jars",
+        "UnitPrice": 17.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 100,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 67,
+        "ProductName": "Laughing Lumberjack Lager",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 52,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 68,
+        "ProductName": "Scottish Longbreads",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 8 pieces",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 69,
+        "ProductName": "Gudbrandsdalsost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 kg pkg.",
+        "UnitPrice": 36.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 70,
+        "ProductName": "Outback Lager",
+        "SupplierID": 7,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 355 ml bottles",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 71,
+        "ProductName": "Flotemysost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 21.5000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 72,
+        "ProductName": "Mozzarella di Giovanni",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 34.8000,
+        "UnitsInStock": 14,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 73,
+        "ProductName": "Röd Kaviar",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 150 g jars",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 101,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 74,
+        "ProductName": "Longlife Tofu",
+        "SupplierID": 4,
+        "CategoryID": 7,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 20,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 75,
+        "ProductName": "Rhönbräu Klosterbier",
+        "SupplierID": 12,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 0.5 l bottles",
+        "UnitPrice": 7.7500,
+        "UnitsInStock": 125,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 76,
+        "ProductName": "Lakkalikööri",
+        "SupplierID": 23,
+        "CategoryID": 1,
+        "QuantityPerUnit": "500 ml",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 57,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 77,
+        "ProductName": "Original Frankfurter grüne Soße",
+        "SupplierID": 12,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 boxes",
+        "UnitPrice": 13.0000,
+        "UnitsInStock": 32,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    }
+]
diff --git a/vue-options-api-demos/excel/cells/padding/main.js b/vue-options-api-demos/excel/cells/padding/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/excel/cells/padding/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/excel/cells/padding/main.vue b/vue-options-api-demos/excel/cells/padding/main.vue
new file mode 100644
index 00000000..385e89c6
--- /dev/null
+++ b/vue-options-api-demos/excel/cells/padding/main.vue
@@ -0,0 +1,44 @@
+<template>
+<div>
+    <kbutton :theme-color="'primary'" @click="exportExcel">Export Excel</kbutton>
+</div>
+</template>
+<script>
+import { saveExcel } from '@progress/kendo-vue-excel-export';
+import products from './products.json';
+import { process } from '@progress/kendo-data-query';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+   components: {
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+          group: [ { field: 'Category.CategoryName' } ],
+          headerPaddingCellOptions: { background: '#ff0000' }
+        }
+    },
+    methods: {
+        data() { 
+          return process(products, {
+              group: this.group
+          }).data;
+        },
+        exportExcel () {
+            saveExcel({
+                data: this.data(),
+                group: this.group,
+                fileName: "Products",
+                paddingCellOptions: this.headerPaddingCellOptions,
+                columns: [
+                  { field: 'ProductID'},
+                  { field: 'ProductName', title: 'Product Name' },
+                  { field: 'Category.CategoryName', title: 'Category', hidden: true },
+              ]
+            });
+        },
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/excel/cells/padding/products.json b/vue-options-api-demos/excel/cells/padding/products.json
new file mode 100644
index 00000000..ecf3ff9e
--- /dev/null
+++ b/vue-options-api-demos/excel/cells/padding/products.json
@@ -0,0 +1,1311 @@
+[
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22.0000,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.3500,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25.0000,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40.0000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97.0000,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31.0000,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 11,
+        "ProductName": "Queso Cabrales",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "1 kg pkg.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 30,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 12,
+        "ProductName": "Queso Manchego La Pastora",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 86,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 13,
+        "ProductName": "Konbu",
+        "SupplierID": 6,
+        "CategoryID": 8,
+        "QuantityPerUnit": "2 kg box",
+        "UnitPrice": 6.0000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 14,
+        "ProductName": "Tofu",
+        "SupplierID": 6,
+        "CategoryID": 7,
+        "QuantityPerUnit": "40 - 100 g pkgs.",
+        "UnitPrice": 23.2500,
+        "UnitsInStock": 35,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 15,
+        "ProductName": "Genen Shouyu",
+        "SupplierID": 6,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 250 ml bottles",
+        "UnitPrice": 15.5000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 16,
+        "ProductName": "Pavlova",
+        "SupplierID": 7,
+        "CategoryID": 3,
+        "QuantityPerUnit": "32 - 500 g boxes",
+        "UnitPrice": 17.4500,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 17,
+        "ProductName": "Alice Mutton",
+        "SupplierID": 7,
+        "CategoryID": 6,
+        "QuantityPerUnit": "20 - 1 kg tins",
+        "UnitPrice": 39.0000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 18,
+        "ProductName": "Carnarvon Tigers",
+        "SupplierID": 7,
+        "CategoryID": 8,
+        "QuantityPerUnit": "16 kg pkg.",
+        "UnitPrice": 62.5000,
+        "UnitsInStock": 42,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 19,
+        "ProductName": "Teatime Chocolate Biscuits",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 12 pieces",
+        "UnitPrice": 9.2000,
+        "UnitsInStock": 25,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 20,
+        "ProductName": "Sir Rodney's Marmalade",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "30 gift boxes",
+        "UnitPrice": 81.0000,
+        "UnitsInStock": 40,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 21,
+        "ProductName": "Sir Rodney's Scones",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 pkgs. x 4 pieces",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 3,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 22,
+        "ProductName": "Gustaf's Knäckebröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 500 g pkgs.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 104,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 23,
+        "ProductName": "Tunnbröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "12 - 250 g pkgs.",
+        "UnitPrice": 9.0000,
+        "UnitsInStock": 61,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 24,
+        "ProductName": "Guaraná Fantástica",
+        "SupplierID": 10,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 355 ml cans",
+        "UnitPrice": 4.5000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 25,
+        "ProductName": "NuNuCa Nuß-Nougat-Creme",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "20 - 450 g glasses",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 26,
+        "ProductName": "Gumbär Gummibärchen",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 250 g bags",
+        "UnitPrice": 31.2300,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 27,
+        "ProductName": "Schoggi Schokolade",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 100 g pieces",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 49,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 28,
+        "ProductName": "Rössle Sauerkraut",
+        "SupplierID": 12,
+        "CategoryID": 7,
+        "QuantityPerUnit": "25 - 825 g cans",
+        "UnitPrice": 45.6000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 29,
+        "ProductName": "Thüringer Rostbratwurst",
+        "SupplierID": 12,
+        "CategoryID": 6,
+        "QuantityPerUnit": "50 bags x 30 sausgs.",
+        "UnitPrice": 123.7900,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 30,
+        "ProductName": "Nord-Ost Matjeshering",
+        "SupplierID": 13,
+        "CategoryID": 8,
+        "QuantityPerUnit": "10 - 200 g glasses",
+        "UnitPrice": 25.8900,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 31,
+        "ProductName": "Gorgonzola Telino",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "12 - 100 g pkgs",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 32,
+        "ProductName": "Mascarpone Fabioli",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 32.0000,
+        "UnitsInStock": 9,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 33,
+        "ProductName": "Geitost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "500 g",
+        "UnitPrice": 2.5000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 34,
+        "ProductName": "Sasquatch Ale",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 111,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 35,
+        "ProductName": "Steeleye Stout",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 36,
+        "ProductName": "Inlagd Sill",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 250 g  jars",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 37,
+        "ProductName": "Gravad lax",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 500 g pkgs.",
+        "UnitPrice": 26.0000,
+        "UnitsInStock": 11,
+        "UnitsOnOrder": 50,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 38,
+        "ProductName": "Côte de Blaye",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 75 cl bottles",
+        "UnitPrice": 263.5000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 39,
+        "ProductName": "Chartreuse verte",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "750 cc per bottle",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 69,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 40,
+        "ProductName": "Boston Crab Meat",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 4 oz tins",
+        "UnitPrice": 18.4000,
+        "UnitsInStock": 123,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 41,
+        "ProductName": "Jack's New England Clam Chowder",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 12 oz cans",
+        "UnitPrice": 9.6500,
+        "UnitsInStock": 85,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 42,
+        "ProductName": "Singaporean Hokkien Fried Mee",
+        "SupplierID": 20,
+        "CategoryID": 5,
+        "QuantityPerUnit": "32 - 1 kg pkgs.",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 43,
+        "ProductName": "Ipoh Coffee",
+        "SupplierID": 20,
+        "CategoryID": 1,
+        "QuantityPerUnit": "16 - 500 g tins",
+        "UnitPrice": 46.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 44,
+        "ProductName": "Gula Malacca",
+        "SupplierID": 20,
+        "CategoryID": 2,
+        "QuantityPerUnit": "20 - 2 kg bags",
+        "UnitPrice": 19.4500,
+        "UnitsInStock": 27,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 45,
+        "ProductName": "Rogede sild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "1k pkg.",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 5,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 46,
+        "ProductName": "Spegesild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "4 - 450 g glasses",
+        "UnitPrice": 12.0000,
+        "UnitsInStock": 95,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 47,
+        "ProductName": "Zaanse koeken",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 - 4 oz boxes",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 48,
+        "ProductName": "Chocolade",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 pkgs.",
+        "UnitPrice": 12.7500,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 49,
+        "ProductName": "Maxilaku",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 - 50 g pkgs.",
+        "UnitPrice": 20.0000,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 60,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 50,
+        "ProductName": "Valkoinen suklaa",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "12 - 100 g bars",
+        "UnitPrice": 16.2500,
+        "UnitsInStock": 65,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 51,
+        "ProductName": "Manjimup Dried Apples",
+        "SupplierID": 24,
+        "CategoryID": 7,
+        "QuantityPerUnit": "50 - 300 g pkgs.",
+        "UnitPrice": 53.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 52,
+        "ProductName": "Filo Mix",
+        "SupplierID": 24,
+        "CategoryID": 5,
+        "QuantityPerUnit": "16 - 2 kg boxes",
+        "UnitPrice": 7.0000,
+        "UnitsInStock": 38,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 53,
+        "ProductName": "Perth Pasties",
+        "SupplierID": 24,
+        "CategoryID": 6,
+        "QuantityPerUnit": "48 pieces",
+        "UnitPrice": 32.8000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 54,
+        "ProductName": "Tourtière",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "16 pies",
+        "UnitPrice": 7.4500,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 55,
+        "ProductName": "Pâté chinois",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "24 boxes x 2 pies",
+        "UnitPrice": 24.0000,
+        "UnitsInStock": 115,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 56,
+        "ProductName": "Gnocchi di nonna Alice",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 57,
+        "ProductName": "Ravioli Angelo",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 19.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 58,
+        "ProductName": "Escargots de Bourgogne",
+        "SupplierID": 27,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 pieces",
+        "UnitPrice": 13.2500,
+        "UnitsInStock": 62,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 59,
+        "ProductName": "Raclette Courdavault",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 55.0000,
+        "UnitsInStock": 79,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 60,
+        "ProductName": "Camembert Pierrot",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "15 - 300 g rounds",
+        "UnitPrice": 34.0000,
+        "UnitsInStock": 19,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 61,
+        "ProductName": "Sirop d'érable",
+        "SupplierID": 29,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 500 ml bottles",
+        "UnitPrice": 28.5000,
+        "UnitsInStock": 113,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 62,
+        "ProductName": "Tarte au sucre",
+        "SupplierID": 29,
+        "CategoryID": 3,
+        "QuantityPerUnit": "48 pies",
+        "UnitPrice": 49.3000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 63,
+        "ProductName": "Vegie-spread",
+        "SupplierID": 7,
+        "CategoryID": 2,
+        "QuantityPerUnit": "15 - 625 g jars",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 64,
+        "ProductName": "Wimmers gute Semmelknödel",
+        "SupplierID": 12,
+        "CategoryID": 5,
+        "QuantityPerUnit": "20 bags x 4 pieces",
+        "UnitPrice": 33.2500,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 80,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 65,
+        "ProductName": "Louisiana Fiery Hot Pepper Sauce",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "32 - 8 oz bottles",
+        "UnitPrice": 21.0500,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 66,
+        "ProductName": "Louisiana Hot Spiced Okra",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 8 oz jars",
+        "UnitPrice": 17.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 100,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 67,
+        "ProductName": "Laughing Lumberjack Lager",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 52,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 68,
+        "ProductName": "Scottish Longbreads",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 8 pieces",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 69,
+        "ProductName": "Gudbrandsdalsost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 kg pkg.",
+        "UnitPrice": 36.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 70,
+        "ProductName": "Outback Lager",
+        "SupplierID": 7,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 355 ml bottles",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 71,
+        "ProductName": "Flotemysost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 21.5000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 72,
+        "ProductName": "Mozzarella di Giovanni",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 34.8000,
+        "UnitsInStock": 14,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 73,
+        "ProductName": "Röd Kaviar",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 150 g jars",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 101,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 74,
+        "ProductName": "Longlife Tofu",
+        "SupplierID": 4,
+        "CategoryID": 7,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 20,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 75,
+        "ProductName": "Rhönbräu Klosterbier",
+        "SupplierID": 12,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 0.5 l bottles",
+        "UnitPrice": 7.7500,
+        "UnitsInStock": 125,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 76,
+        "ProductName": "Lakkalikööri",
+        "SupplierID": 23,
+        "CategoryID": 1,
+        "QuantityPerUnit": "500 ml",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 57,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 77,
+        "ProductName": "Original Frankfurter grüne Soße",
+        "SupplierID": 12,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 boxes",
+        "UnitPrice": 13.0000,
+        "UnitsInStock": 32,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    }
+]
diff --git a/vue-options-api-demos/excel/columns/footer/main.js b/vue-options-api-demos/excel/columns/footer/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/excel/columns/footer/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/excel/columns/footer/main.vue b/vue-options-api-demos/excel/columns/footer/main.vue
new file mode 100644
index 00000000..b949c268
--- /dev/null
+++ b/vue-options-api-demos/excel/columns/footer/main.vue
@@ -0,0 +1,36 @@
+<template>
+<div>
+    <kbutton :theme-color="'primary'" @click="exportExcel">Export Excel</kbutton>
+</div>
+</template>
+<script>
+import { saveExcel } from '@progress/kendo-vue-excel-export';
+import products from './products.json';
+import { aggregateBy } from '@progress/kendo-data-query';
+import { Button } from '@progress/kendo-vue-buttons';
+
+const aggregates = [ { field: 'UnitPrice', aggregate: 'sum' } ];
+const total = aggregateBy(products, aggregates);
+
+const CustomFooter = (props) => (`Sum: ${total.UnitPrice.sum}`);
+
+export default {
+    components: {
+      'kbutton': Button
+    },
+    methods: {
+        exportExcel () {
+            saveExcel({
+                data: products,
+                fileName: "Products",
+                columns: [
+                  { field: 'ProductID'},
+                  { field: 'ProductName', title: 'Product Name' },
+                  { field: 'UnitPrice', title: 'Unit Price', footer: CustomFooter },
+              ]
+            });
+        },
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/excel/columns/footer/products.json b/vue-options-api-demos/excel/columns/footer/products.json
new file mode 100644
index 00000000..ecf3ff9e
--- /dev/null
+++ b/vue-options-api-demos/excel/columns/footer/products.json
@@ -0,0 +1,1311 @@
+[
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22.0000,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.3500,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25.0000,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40.0000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97.0000,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31.0000,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 11,
+        "ProductName": "Queso Cabrales",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "1 kg pkg.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 30,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 12,
+        "ProductName": "Queso Manchego La Pastora",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 86,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 13,
+        "ProductName": "Konbu",
+        "SupplierID": 6,
+        "CategoryID": 8,
+        "QuantityPerUnit": "2 kg box",
+        "UnitPrice": 6.0000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 14,
+        "ProductName": "Tofu",
+        "SupplierID": 6,
+        "CategoryID": 7,
+        "QuantityPerUnit": "40 - 100 g pkgs.",
+        "UnitPrice": 23.2500,
+        "UnitsInStock": 35,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 15,
+        "ProductName": "Genen Shouyu",
+        "SupplierID": 6,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 250 ml bottles",
+        "UnitPrice": 15.5000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 16,
+        "ProductName": "Pavlova",
+        "SupplierID": 7,
+        "CategoryID": 3,
+        "QuantityPerUnit": "32 - 500 g boxes",
+        "UnitPrice": 17.4500,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 17,
+        "ProductName": "Alice Mutton",
+        "SupplierID": 7,
+        "CategoryID": 6,
+        "QuantityPerUnit": "20 - 1 kg tins",
+        "UnitPrice": 39.0000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 18,
+        "ProductName": "Carnarvon Tigers",
+        "SupplierID": 7,
+        "CategoryID": 8,
+        "QuantityPerUnit": "16 kg pkg.",
+        "UnitPrice": 62.5000,
+        "UnitsInStock": 42,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 19,
+        "ProductName": "Teatime Chocolate Biscuits",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 12 pieces",
+        "UnitPrice": 9.2000,
+        "UnitsInStock": 25,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 20,
+        "ProductName": "Sir Rodney's Marmalade",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "30 gift boxes",
+        "UnitPrice": 81.0000,
+        "UnitsInStock": 40,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 21,
+        "ProductName": "Sir Rodney's Scones",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 pkgs. x 4 pieces",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 3,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 22,
+        "ProductName": "Gustaf's Knäckebröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 500 g pkgs.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 104,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 23,
+        "ProductName": "Tunnbröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "12 - 250 g pkgs.",
+        "UnitPrice": 9.0000,
+        "UnitsInStock": 61,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 24,
+        "ProductName": "Guaraná Fantástica",
+        "SupplierID": 10,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 355 ml cans",
+        "UnitPrice": 4.5000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 25,
+        "ProductName": "NuNuCa Nuß-Nougat-Creme",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "20 - 450 g glasses",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 26,
+        "ProductName": "Gumbär Gummibärchen",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 250 g bags",
+        "UnitPrice": 31.2300,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 27,
+        "ProductName": "Schoggi Schokolade",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 100 g pieces",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 49,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 28,
+        "ProductName": "Rössle Sauerkraut",
+        "SupplierID": 12,
+        "CategoryID": 7,
+        "QuantityPerUnit": "25 - 825 g cans",
+        "UnitPrice": 45.6000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 29,
+        "ProductName": "Thüringer Rostbratwurst",
+        "SupplierID": 12,
+        "CategoryID": 6,
+        "QuantityPerUnit": "50 bags x 30 sausgs.",
+        "UnitPrice": 123.7900,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 30,
+        "ProductName": "Nord-Ost Matjeshering",
+        "SupplierID": 13,
+        "CategoryID": 8,
+        "QuantityPerUnit": "10 - 200 g glasses",
+        "UnitPrice": 25.8900,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 31,
+        "ProductName": "Gorgonzola Telino",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "12 - 100 g pkgs",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 32,
+        "ProductName": "Mascarpone Fabioli",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 32.0000,
+        "UnitsInStock": 9,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 33,
+        "ProductName": "Geitost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "500 g",
+        "UnitPrice": 2.5000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 34,
+        "ProductName": "Sasquatch Ale",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 111,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 35,
+        "ProductName": "Steeleye Stout",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 36,
+        "ProductName": "Inlagd Sill",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 250 g  jars",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 37,
+        "ProductName": "Gravad lax",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 500 g pkgs.",
+        "UnitPrice": 26.0000,
+        "UnitsInStock": 11,
+        "UnitsOnOrder": 50,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 38,
+        "ProductName": "Côte de Blaye",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 75 cl bottles",
+        "UnitPrice": 263.5000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 39,
+        "ProductName": "Chartreuse verte",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "750 cc per bottle",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 69,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 40,
+        "ProductName": "Boston Crab Meat",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 4 oz tins",
+        "UnitPrice": 18.4000,
+        "UnitsInStock": 123,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 41,
+        "ProductName": "Jack's New England Clam Chowder",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 12 oz cans",
+        "UnitPrice": 9.6500,
+        "UnitsInStock": 85,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 42,
+        "ProductName": "Singaporean Hokkien Fried Mee",
+        "SupplierID": 20,
+        "CategoryID": 5,
+        "QuantityPerUnit": "32 - 1 kg pkgs.",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 43,
+        "ProductName": "Ipoh Coffee",
+        "SupplierID": 20,
+        "CategoryID": 1,
+        "QuantityPerUnit": "16 - 500 g tins",
+        "UnitPrice": 46.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 44,
+        "ProductName": "Gula Malacca",
+        "SupplierID": 20,
+        "CategoryID": 2,
+        "QuantityPerUnit": "20 - 2 kg bags",
+        "UnitPrice": 19.4500,
+        "UnitsInStock": 27,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 45,
+        "ProductName": "Rogede sild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "1k pkg.",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 5,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 46,
+        "ProductName": "Spegesild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "4 - 450 g glasses",
+        "UnitPrice": 12.0000,
+        "UnitsInStock": 95,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 47,
+        "ProductName": "Zaanse koeken",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 - 4 oz boxes",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 48,
+        "ProductName": "Chocolade",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 pkgs.",
+        "UnitPrice": 12.7500,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 49,
+        "ProductName": "Maxilaku",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 - 50 g pkgs.",
+        "UnitPrice": 20.0000,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 60,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 50,
+        "ProductName": "Valkoinen suklaa",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "12 - 100 g bars",
+        "UnitPrice": 16.2500,
+        "UnitsInStock": 65,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 51,
+        "ProductName": "Manjimup Dried Apples",
+        "SupplierID": 24,
+        "CategoryID": 7,
+        "QuantityPerUnit": "50 - 300 g pkgs.",
+        "UnitPrice": 53.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 52,
+        "ProductName": "Filo Mix",
+        "SupplierID": 24,
+        "CategoryID": 5,
+        "QuantityPerUnit": "16 - 2 kg boxes",
+        "UnitPrice": 7.0000,
+        "UnitsInStock": 38,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 53,
+        "ProductName": "Perth Pasties",
+        "SupplierID": 24,
+        "CategoryID": 6,
+        "QuantityPerUnit": "48 pieces",
+        "UnitPrice": 32.8000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 54,
+        "ProductName": "Tourtière",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "16 pies",
+        "UnitPrice": 7.4500,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 55,
+        "ProductName": "Pâté chinois",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "24 boxes x 2 pies",
+        "UnitPrice": 24.0000,
+        "UnitsInStock": 115,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 56,
+        "ProductName": "Gnocchi di nonna Alice",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 57,
+        "ProductName": "Ravioli Angelo",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 19.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 58,
+        "ProductName": "Escargots de Bourgogne",
+        "SupplierID": 27,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 pieces",
+        "UnitPrice": 13.2500,
+        "UnitsInStock": 62,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 59,
+        "ProductName": "Raclette Courdavault",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 55.0000,
+        "UnitsInStock": 79,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 60,
+        "ProductName": "Camembert Pierrot",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "15 - 300 g rounds",
+        "UnitPrice": 34.0000,
+        "UnitsInStock": 19,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 61,
+        "ProductName": "Sirop d'érable",
+        "SupplierID": 29,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 500 ml bottles",
+        "UnitPrice": 28.5000,
+        "UnitsInStock": 113,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 62,
+        "ProductName": "Tarte au sucre",
+        "SupplierID": 29,
+        "CategoryID": 3,
+        "QuantityPerUnit": "48 pies",
+        "UnitPrice": 49.3000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 63,
+        "ProductName": "Vegie-spread",
+        "SupplierID": 7,
+        "CategoryID": 2,
+        "QuantityPerUnit": "15 - 625 g jars",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 64,
+        "ProductName": "Wimmers gute Semmelknödel",
+        "SupplierID": 12,
+        "CategoryID": 5,
+        "QuantityPerUnit": "20 bags x 4 pieces",
+        "UnitPrice": 33.2500,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 80,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 65,
+        "ProductName": "Louisiana Fiery Hot Pepper Sauce",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "32 - 8 oz bottles",
+        "UnitPrice": 21.0500,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 66,
+        "ProductName": "Louisiana Hot Spiced Okra",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 8 oz jars",
+        "UnitPrice": 17.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 100,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 67,
+        "ProductName": "Laughing Lumberjack Lager",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 52,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 68,
+        "ProductName": "Scottish Longbreads",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 8 pieces",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 69,
+        "ProductName": "Gudbrandsdalsost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 kg pkg.",
+        "UnitPrice": 36.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 70,
+        "ProductName": "Outback Lager",
+        "SupplierID": 7,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 355 ml bottles",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 71,
+        "ProductName": "Flotemysost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 21.5000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 72,
+        "ProductName": "Mozzarella di Giovanni",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 34.8000,
+        "UnitsInStock": 14,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 73,
+        "ProductName": "Röd Kaviar",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 150 g jars",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 101,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 74,
+        "ProductName": "Longlife Tofu",
+        "SupplierID": 4,
+        "CategoryID": 7,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 20,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 75,
+        "ProductName": "Rhönbräu Klosterbier",
+        "SupplierID": 12,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 0.5 l bottles",
+        "UnitPrice": 7.7500,
+        "UnitsInStock": 125,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 76,
+        "ProductName": "Lakkalikööri",
+        "SupplierID": 23,
+        "CategoryID": 1,
+        "QuantityPerUnit": "500 ml",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 57,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 77,
+        "ProductName": "Original Frankfurter grüne Soße",
+        "SupplierID": 12,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 boxes",
+        "UnitPrice": 13.0000,
+        "UnitsInStock": 32,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    }
+]
diff --git a/vue-options-api-demos/excel/columns/group-footer/main.js b/vue-options-api-demos/excel/columns/group-footer/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/excel/columns/group-footer/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/excel/columns/group-footer/main.vue b/vue-options-api-demos/excel/columns/group-footer/main.vue
new file mode 100644
index 00000000..2aa3b1f4
--- /dev/null
+++ b/vue-options-api-demos/excel/columns/group-footer/main.vue
@@ -0,0 +1,48 @@
+<template>
+<div>
+    <kbutton :theme-color="'primary'" @click="exportExcel">Export Excel</kbutton>
+</div>
+</template>
+<script>
+import { saveExcel } from '@progress/kendo-vue-excel-export';
+import products from './products.json';
+import { process } from '@progress/kendo-data-query';
+import { Button } from '@progress/kendo-vue-buttons';
+
+const aggregates = [ { field: 'UnitPrice', aggregate: 'sum' } ];
+const CustomGroupFooter = (props) => (`Sum: ${props.aggregates.UnitPrice.sum.toFixed(2)}`);
+
+export default {
+    components: {
+      'kbutton': Button
+    },
+    computed: {
+        data: function(){
+          return process(products, {
+              group: this.group,
+              aggregates: aggregates
+          }).data;
+        }
+    },
+    data: function () {
+        return {
+          group: [ {  field: 'Discontinued',  aggregates: aggregates } ],
+        }
+    },
+    methods: {
+        exportExcel () {
+            saveExcel({
+                data: this.data,
+                group: this.group,
+                fileName: "Products",
+                columns: [
+                  { field: 'ProductID'},
+                  { field: 'ProductName', title: 'Product Name' },
+                  { field: 'UnitPrice', title: 'Unit Price', groupFooter: CustomGroupFooter },
+              ]
+            });
+        },
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/excel/columns/group-footer/products.json b/vue-options-api-demos/excel/columns/group-footer/products.json
new file mode 100644
index 00000000..ecf3ff9e
--- /dev/null
+++ b/vue-options-api-demos/excel/columns/group-footer/products.json
@@ -0,0 +1,1311 @@
+[
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22.0000,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.3500,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25.0000,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40.0000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97.0000,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31.0000,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 11,
+        "ProductName": "Queso Cabrales",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "1 kg pkg.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 30,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 12,
+        "ProductName": "Queso Manchego La Pastora",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 86,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 13,
+        "ProductName": "Konbu",
+        "SupplierID": 6,
+        "CategoryID": 8,
+        "QuantityPerUnit": "2 kg box",
+        "UnitPrice": 6.0000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 14,
+        "ProductName": "Tofu",
+        "SupplierID": 6,
+        "CategoryID": 7,
+        "QuantityPerUnit": "40 - 100 g pkgs.",
+        "UnitPrice": 23.2500,
+        "UnitsInStock": 35,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 15,
+        "ProductName": "Genen Shouyu",
+        "SupplierID": 6,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 250 ml bottles",
+        "UnitPrice": 15.5000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 16,
+        "ProductName": "Pavlova",
+        "SupplierID": 7,
+        "CategoryID": 3,
+        "QuantityPerUnit": "32 - 500 g boxes",
+        "UnitPrice": 17.4500,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 17,
+        "ProductName": "Alice Mutton",
+        "SupplierID": 7,
+        "CategoryID": 6,
+        "QuantityPerUnit": "20 - 1 kg tins",
+        "UnitPrice": 39.0000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 18,
+        "ProductName": "Carnarvon Tigers",
+        "SupplierID": 7,
+        "CategoryID": 8,
+        "QuantityPerUnit": "16 kg pkg.",
+        "UnitPrice": 62.5000,
+        "UnitsInStock": 42,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 19,
+        "ProductName": "Teatime Chocolate Biscuits",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 12 pieces",
+        "UnitPrice": 9.2000,
+        "UnitsInStock": 25,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 20,
+        "ProductName": "Sir Rodney's Marmalade",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "30 gift boxes",
+        "UnitPrice": 81.0000,
+        "UnitsInStock": 40,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 21,
+        "ProductName": "Sir Rodney's Scones",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 pkgs. x 4 pieces",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 3,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 22,
+        "ProductName": "Gustaf's Knäckebröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 500 g pkgs.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 104,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 23,
+        "ProductName": "Tunnbröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "12 - 250 g pkgs.",
+        "UnitPrice": 9.0000,
+        "UnitsInStock": 61,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 24,
+        "ProductName": "Guaraná Fantástica",
+        "SupplierID": 10,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 355 ml cans",
+        "UnitPrice": 4.5000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 25,
+        "ProductName": "NuNuCa Nuß-Nougat-Creme",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "20 - 450 g glasses",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 26,
+        "ProductName": "Gumbär Gummibärchen",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 250 g bags",
+        "UnitPrice": 31.2300,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 27,
+        "ProductName": "Schoggi Schokolade",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 100 g pieces",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 49,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 28,
+        "ProductName": "Rössle Sauerkraut",
+        "SupplierID": 12,
+        "CategoryID": 7,
+        "QuantityPerUnit": "25 - 825 g cans",
+        "UnitPrice": 45.6000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 29,
+        "ProductName": "Thüringer Rostbratwurst",
+        "SupplierID": 12,
+        "CategoryID": 6,
+        "QuantityPerUnit": "50 bags x 30 sausgs.",
+        "UnitPrice": 123.7900,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 30,
+        "ProductName": "Nord-Ost Matjeshering",
+        "SupplierID": 13,
+        "CategoryID": 8,
+        "QuantityPerUnit": "10 - 200 g glasses",
+        "UnitPrice": 25.8900,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 31,
+        "ProductName": "Gorgonzola Telino",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "12 - 100 g pkgs",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 32,
+        "ProductName": "Mascarpone Fabioli",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 32.0000,
+        "UnitsInStock": 9,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 33,
+        "ProductName": "Geitost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "500 g",
+        "UnitPrice": 2.5000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 34,
+        "ProductName": "Sasquatch Ale",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 111,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 35,
+        "ProductName": "Steeleye Stout",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 36,
+        "ProductName": "Inlagd Sill",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 250 g  jars",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 37,
+        "ProductName": "Gravad lax",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 500 g pkgs.",
+        "UnitPrice": 26.0000,
+        "UnitsInStock": 11,
+        "UnitsOnOrder": 50,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 38,
+        "ProductName": "Côte de Blaye",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 75 cl bottles",
+        "UnitPrice": 263.5000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 39,
+        "ProductName": "Chartreuse verte",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "750 cc per bottle",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 69,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 40,
+        "ProductName": "Boston Crab Meat",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 4 oz tins",
+        "UnitPrice": 18.4000,
+        "UnitsInStock": 123,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 41,
+        "ProductName": "Jack's New England Clam Chowder",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 12 oz cans",
+        "UnitPrice": 9.6500,
+        "UnitsInStock": 85,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 42,
+        "ProductName": "Singaporean Hokkien Fried Mee",
+        "SupplierID": 20,
+        "CategoryID": 5,
+        "QuantityPerUnit": "32 - 1 kg pkgs.",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 43,
+        "ProductName": "Ipoh Coffee",
+        "SupplierID": 20,
+        "CategoryID": 1,
+        "QuantityPerUnit": "16 - 500 g tins",
+        "UnitPrice": 46.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 44,
+        "ProductName": "Gula Malacca",
+        "SupplierID": 20,
+        "CategoryID": 2,
+        "QuantityPerUnit": "20 - 2 kg bags",
+        "UnitPrice": 19.4500,
+        "UnitsInStock": 27,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 45,
+        "ProductName": "Rogede sild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "1k pkg.",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 5,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 46,
+        "ProductName": "Spegesild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "4 - 450 g glasses",
+        "UnitPrice": 12.0000,
+        "UnitsInStock": 95,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 47,
+        "ProductName": "Zaanse koeken",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 - 4 oz boxes",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 48,
+        "ProductName": "Chocolade",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 pkgs.",
+        "UnitPrice": 12.7500,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 49,
+        "ProductName": "Maxilaku",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 - 50 g pkgs.",
+        "UnitPrice": 20.0000,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 60,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 50,
+        "ProductName": "Valkoinen suklaa",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "12 - 100 g bars",
+        "UnitPrice": 16.2500,
+        "UnitsInStock": 65,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 51,
+        "ProductName": "Manjimup Dried Apples",
+        "SupplierID": 24,
+        "CategoryID": 7,
+        "QuantityPerUnit": "50 - 300 g pkgs.",
+        "UnitPrice": 53.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 52,
+        "ProductName": "Filo Mix",
+        "SupplierID": 24,
+        "CategoryID": 5,
+        "QuantityPerUnit": "16 - 2 kg boxes",
+        "UnitPrice": 7.0000,
+        "UnitsInStock": 38,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 53,
+        "ProductName": "Perth Pasties",
+        "SupplierID": 24,
+        "CategoryID": 6,
+        "QuantityPerUnit": "48 pieces",
+        "UnitPrice": 32.8000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 54,
+        "ProductName": "Tourtière",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "16 pies",
+        "UnitPrice": 7.4500,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 55,
+        "ProductName": "Pâté chinois",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "24 boxes x 2 pies",
+        "UnitPrice": 24.0000,
+        "UnitsInStock": 115,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 56,
+        "ProductName": "Gnocchi di nonna Alice",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 57,
+        "ProductName": "Ravioli Angelo",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 19.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 58,
+        "ProductName": "Escargots de Bourgogne",
+        "SupplierID": 27,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 pieces",
+        "UnitPrice": 13.2500,
+        "UnitsInStock": 62,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 59,
+        "ProductName": "Raclette Courdavault",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 55.0000,
+        "UnitsInStock": 79,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 60,
+        "ProductName": "Camembert Pierrot",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "15 - 300 g rounds",
+        "UnitPrice": 34.0000,
+        "UnitsInStock": 19,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 61,
+        "ProductName": "Sirop d'érable",
+        "SupplierID": 29,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 500 ml bottles",
+        "UnitPrice": 28.5000,
+        "UnitsInStock": 113,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 62,
+        "ProductName": "Tarte au sucre",
+        "SupplierID": 29,
+        "CategoryID": 3,
+        "QuantityPerUnit": "48 pies",
+        "UnitPrice": 49.3000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 63,
+        "ProductName": "Vegie-spread",
+        "SupplierID": 7,
+        "CategoryID": 2,
+        "QuantityPerUnit": "15 - 625 g jars",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 64,
+        "ProductName": "Wimmers gute Semmelknödel",
+        "SupplierID": 12,
+        "CategoryID": 5,
+        "QuantityPerUnit": "20 bags x 4 pieces",
+        "UnitPrice": 33.2500,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 80,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 65,
+        "ProductName": "Louisiana Fiery Hot Pepper Sauce",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "32 - 8 oz bottles",
+        "UnitPrice": 21.0500,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 66,
+        "ProductName": "Louisiana Hot Spiced Okra",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 8 oz jars",
+        "UnitPrice": 17.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 100,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 67,
+        "ProductName": "Laughing Lumberjack Lager",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 52,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 68,
+        "ProductName": "Scottish Longbreads",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 8 pieces",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 69,
+        "ProductName": "Gudbrandsdalsost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 kg pkg.",
+        "UnitPrice": 36.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 70,
+        "ProductName": "Outback Lager",
+        "SupplierID": 7,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 355 ml bottles",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 71,
+        "ProductName": "Flotemysost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 21.5000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 72,
+        "ProductName": "Mozzarella di Giovanni",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 34.8000,
+        "UnitsInStock": 14,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 73,
+        "ProductName": "Röd Kaviar",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 150 g jars",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 101,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 74,
+        "ProductName": "Longlife Tofu",
+        "SupplierID": 4,
+        "CategoryID": 7,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 20,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 75,
+        "ProductName": "Rhönbräu Klosterbier",
+        "SupplierID": 12,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 0.5 l bottles",
+        "UnitPrice": 7.7500,
+        "UnitsInStock": 125,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 76,
+        "ProductName": "Lakkalikööri",
+        "SupplierID": 23,
+        "CategoryID": 1,
+        "QuantityPerUnit": "500 ml",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 57,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 77,
+        "ProductName": "Original Frankfurter grüne Soße",
+        "SupplierID": 12,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 boxes",
+        "UnitPrice": 13.0000,
+        "UnitsInStock": 32,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    }
+]
diff --git a/vue-options-api-demos/excel/columns/group-header/main.js b/vue-options-api-demos/excel/columns/group-header/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/excel/columns/group-header/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/excel/columns/group-header/main.vue b/vue-options-api-demos/excel/columns/group-header/main.vue
new file mode 100644
index 00000000..b4b6041e
--- /dev/null
+++ b/vue-options-api-demos/excel/columns/group-header/main.vue
@@ -0,0 +1,46 @@
+<template>
+<div>
+    <kbutton :theme-color="'primary'" @click="exportExcel">Export Excel</kbutton>
+</div>
+</template>
+<script>
+import { saveExcel } from '@progress/kendo-vue-excel-export';
+import products from './products.json';
+import { process } from '@progress/kendo-data-query';
+import { Button } from '@progress/kendo-vue-buttons';
+
+const CustomGroupHeader = (props) => (`Category: ${props.value}`);
+
+export default {
+    components: {
+      'kbutton': Button
+    },
+    computed: {
+        data: function(){
+          return process(products, {
+              group: this.group
+          }).data;
+        }
+    },
+    data: function () {
+        return {
+          group: [ { field: 'Category.CategoryName' } ],
+        }
+    },
+    methods: {
+        exportExcel () {
+            saveExcel({
+                data: this.data,
+                group: this.group,
+                fileName: "Products",
+                columns: [
+                  { field: 'ProductID'},
+                  { field: 'ProductName', title: 'Product Name' },
+                  { field: 'Category.CategoryName', hidden: true, groupHeader: CustomGroupHeader },
+              ]
+            });
+        },
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/excel/columns/group-header/products.json b/vue-options-api-demos/excel/columns/group-header/products.json
new file mode 100644
index 00000000..ecf3ff9e
--- /dev/null
+++ b/vue-options-api-demos/excel/columns/group-header/products.json
@@ -0,0 +1,1311 @@
+[
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22.0000,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.3500,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25.0000,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40.0000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97.0000,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31.0000,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 11,
+        "ProductName": "Queso Cabrales",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "1 kg pkg.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 30,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 12,
+        "ProductName": "Queso Manchego La Pastora",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 86,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 13,
+        "ProductName": "Konbu",
+        "SupplierID": 6,
+        "CategoryID": 8,
+        "QuantityPerUnit": "2 kg box",
+        "UnitPrice": 6.0000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 14,
+        "ProductName": "Tofu",
+        "SupplierID": 6,
+        "CategoryID": 7,
+        "QuantityPerUnit": "40 - 100 g pkgs.",
+        "UnitPrice": 23.2500,
+        "UnitsInStock": 35,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 15,
+        "ProductName": "Genen Shouyu",
+        "SupplierID": 6,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 250 ml bottles",
+        "UnitPrice": 15.5000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 16,
+        "ProductName": "Pavlova",
+        "SupplierID": 7,
+        "CategoryID": 3,
+        "QuantityPerUnit": "32 - 500 g boxes",
+        "UnitPrice": 17.4500,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 17,
+        "ProductName": "Alice Mutton",
+        "SupplierID": 7,
+        "CategoryID": 6,
+        "QuantityPerUnit": "20 - 1 kg tins",
+        "UnitPrice": 39.0000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 18,
+        "ProductName": "Carnarvon Tigers",
+        "SupplierID": 7,
+        "CategoryID": 8,
+        "QuantityPerUnit": "16 kg pkg.",
+        "UnitPrice": 62.5000,
+        "UnitsInStock": 42,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 19,
+        "ProductName": "Teatime Chocolate Biscuits",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 12 pieces",
+        "UnitPrice": 9.2000,
+        "UnitsInStock": 25,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 20,
+        "ProductName": "Sir Rodney's Marmalade",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "30 gift boxes",
+        "UnitPrice": 81.0000,
+        "UnitsInStock": 40,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 21,
+        "ProductName": "Sir Rodney's Scones",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 pkgs. x 4 pieces",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 3,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 22,
+        "ProductName": "Gustaf's Knäckebröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 500 g pkgs.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 104,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 23,
+        "ProductName": "Tunnbröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "12 - 250 g pkgs.",
+        "UnitPrice": 9.0000,
+        "UnitsInStock": 61,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 24,
+        "ProductName": "Guaraná Fantástica",
+        "SupplierID": 10,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 355 ml cans",
+        "UnitPrice": 4.5000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 25,
+        "ProductName": "NuNuCa Nuß-Nougat-Creme",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "20 - 450 g glasses",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 26,
+        "ProductName": "Gumbär Gummibärchen",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 250 g bags",
+        "UnitPrice": 31.2300,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 27,
+        "ProductName": "Schoggi Schokolade",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 100 g pieces",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 49,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 28,
+        "ProductName": "Rössle Sauerkraut",
+        "SupplierID": 12,
+        "CategoryID": 7,
+        "QuantityPerUnit": "25 - 825 g cans",
+        "UnitPrice": 45.6000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 29,
+        "ProductName": "Thüringer Rostbratwurst",
+        "SupplierID": 12,
+        "CategoryID": 6,
+        "QuantityPerUnit": "50 bags x 30 sausgs.",
+        "UnitPrice": 123.7900,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 30,
+        "ProductName": "Nord-Ost Matjeshering",
+        "SupplierID": 13,
+        "CategoryID": 8,
+        "QuantityPerUnit": "10 - 200 g glasses",
+        "UnitPrice": 25.8900,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 31,
+        "ProductName": "Gorgonzola Telino",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "12 - 100 g pkgs",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 32,
+        "ProductName": "Mascarpone Fabioli",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 32.0000,
+        "UnitsInStock": 9,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 33,
+        "ProductName": "Geitost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "500 g",
+        "UnitPrice": 2.5000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 34,
+        "ProductName": "Sasquatch Ale",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 111,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 35,
+        "ProductName": "Steeleye Stout",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 36,
+        "ProductName": "Inlagd Sill",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 250 g  jars",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 37,
+        "ProductName": "Gravad lax",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 500 g pkgs.",
+        "UnitPrice": 26.0000,
+        "UnitsInStock": 11,
+        "UnitsOnOrder": 50,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 38,
+        "ProductName": "Côte de Blaye",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 75 cl bottles",
+        "UnitPrice": 263.5000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 39,
+        "ProductName": "Chartreuse verte",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "750 cc per bottle",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 69,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 40,
+        "ProductName": "Boston Crab Meat",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 4 oz tins",
+        "UnitPrice": 18.4000,
+        "UnitsInStock": 123,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 41,
+        "ProductName": "Jack's New England Clam Chowder",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 12 oz cans",
+        "UnitPrice": 9.6500,
+        "UnitsInStock": 85,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 42,
+        "ProductName": "Singaporean Hokkien Fried Mee",
+        "SupplierID": 20,
+        "CategoryID": 5,
+        "QuantityPerUnit": "32 - 1 kg pkgs.",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 43,
+        "ProductName": "Ipoh Coffee",
+        "SupplierID": 20,
+        "CategoryID": 1,
+        "QuantityPerUnit": "16 - 500 g tins",
+        "UnitPrice": 46.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 44,
+        "ProductName": "Gula Malacca",
+        "SupplierID": 20,
+        "CategoryID": 2,
+        "QuantityPerUnit": "20 - 2 kg bags",
+        "UnitPrice": 19.4500,
+        "UnitsInStock": 27,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 45,
+        "ProductName": "Rogede sild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "1k pkg.",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 5,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 46,
+        "ProductName": "Spegesild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "4 - 450 g glasses",
+        "UnitPrice": 12.0000,
+        "UnitsInStock": 95,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 47,
+        "ProductName": "Zaanse koeken",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 - 4 oz boxes",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 48,
+        "ProductName": "Chocolade",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 pkgs.",
+        "UnitPrice": 12.7500,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 49,
+        "ProductName": "Maxilaku",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 - 50 g pkgs.",
+        "UnitPrice": 20.0000,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 60,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 50,
+        "ProductName": "Valkoinen suklaa",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "12 - 100 g bars",
+        "UnitPrice": 16.2500,
+        "UnitsInStock": 65,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 51,
+        "ProductName": "Manjimup Dried Apples",
+        "SupplierID": 24,
+        "CategoryID": 7,
+        "QuantityPerUnit": "50 - 300 g pkgs.",
+        "UnitPrice": 53.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 52,
+        "ProductName": "Filo Mix",
+        "SupplierID": 24,
+        "CategoryID": 5,
+        "QuantityPerUnit": "16 - 2 kg boxes",
+        "UnitPrice": 7.0000,
+        "UnitsInStock": 38,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 53,
+        "ProductName": "Perth Pasties",
+        "SupplierID": 24,
+        "CategoryID": 6,
+        "QuantityPerUnit": "48 pieces",
+        "UnitPrice": 32.8000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 54,
+        "ProductName": "Tourtière",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "16 pies",
+        "UnitPrice": 7.4500,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 55,
+        "ProductName": "Pâté chinois",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "24 boxes x 2 pies",
+        "UnitPrice": 24.0000,
+        "UnitsInStock": 115,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 56,
+        "ProductName": "Gnocchi di nonna Alice",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 57,
+        "ProductName": "Ravioli Angelo",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 19.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 58,
+        "ProductName": "Escargots de Bourgogne",
+        "SupplierID": 27,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 pieces",
+        "UnitPrice": 13.2500,
+        "UnitsInStock": 62,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 59,
+        "ProductName": "Raclette Courdavault",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 55.0000,
+        "UnitsInStock": 79,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 60,
+        "ProductName": "Camembert Pierrot",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "15 - 300 g rounds",
+        "UnitPrice": 34.0000,
+        "UnitsInStock": 19,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 61,
+        "ProductName": "Sirop d'érable",
+        "SupplierID": 29,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 500 ml bottles",
+        "UnitPrice": 28.5000,
+        "UnitsInStock": 113,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 62,
+        "ProductName": "Tarte au sucre",
+        "SupplierID": 29,
+        "CategoryID": 3,
+        "QuantityPerUnit": "48 pies",
+        "UnitPrice": 49.3000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 63,
+        "ProductName": "Vegie-spread",
+        "SupplierID": 7,
+        "CategoryID": 2,
+        "QuantityPerUnit": "15 - 625 g jars",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 64,
+        "ProductName": "Wimmers gute Semmelknödel",
+        "SupplierID": 12,
+        "CategoryID": 5,
+        "QuantityPerUnit": "20 bags x 4 pieces",
+        "UnitPrice": 33.2500,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 80,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 65,
+        "ProductName": "Louisiana Fiery Hot Pepper Sauce",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "32 - 8 oz bottles",
+        "UnitPrice": 21.0500,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 66,
+        "ProductName": "Louisiana Hot Spiced Okra",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 8 oz jars",
+        "UnitPrice": 17.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 100,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 67,
+        "ProductName": "Laughing Lumberjack Lager",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 52,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 68,
+        "ProductName": "Scottish Longbreads",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 8 pieces",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 69,
+        "ProductName": "Gudbrandsdalsost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 kg pkg.",
+        "UnitPrice": 36.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 70,
+        "ProductName": "Outback Lager",
+        "SupplierID": 7,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 355 ml bottles",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 71,
+        "ProductName": "Flotemysost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 21.5000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 72,
+        "ProductName": "Mozzarella di Giovanni",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 34.8000,
+        "UnitsInStock": 14,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 73,
+        "ProductName": "Röd Kaviar",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 150 g jars",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 101,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 74,
+        "ProductName": "Longlife Tofu",
+        "SupplierID": 4,
+        "CategoryID": 7,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 20,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 75,
+        "ProductName": "Rhönbräu Klosterbier",
+        "SupplierID": 12,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 0.5 l bottles",
+        "UnitPrice": 7.7500,
+        "UnitsInStock": 125,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 76,
+        "ProductName": "Lakkalikööri",
+        "SupplierID": 23,
+        "CategoryID": 1,
+        "QuantityPerUnit": "500 ml",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 57,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 77,
+        "ProductName": "Original Frankfurter grüne Soße",
+        "SupplierID": 12,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 boxes",
+        "UnitPrice": 13.0000,
+        "UnitsInStock": 32,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    }
+]
diff --git a/vue-options-api-demos/excel/columns/hidden/main.js b/vue-options-api-demos/excel/columns/hidden/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/excel/columns/hidden/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/excel/columns/hidden/main.vue b/vue-options-api-demos/excel/columns/hidden/main.vue
new file mode 100644
index 00000000..a85b71f7
--- /dev/null
+++ b/vue-options-api-demos/excel/columns/hidden/main.vue
@@ -0,0 +1,44 @@
+<template>
+<div>
+    <kbutton :theme-color="'primary'" @click="exportExcel">Export Excel</kbutton>
+</div>
+</template>
+<script>
+import { saveExcel } from '@progress/kendo-vue-excel-export';
+import products from './products.json';
+import { process } from '@progress/kendo-data-query';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'kbutton': Button
+    },
+    computed: {
+        data: function(){
+          return process(products, {
+              group: this.group,
+          }).data;
+        }
+    },
+    data: function () {
+        return {
+          group: [ { field: 'Category.CategoryName' } ],
+        }
+    },
+    methods: {
+        exportExcel () {
+            saveExcel({
+                data: this.data,
+                group: this.group,
+                fileName: "Products",
+                columns: [
+                  { field: 'ProductID'},
+                  { field: 'ProductName', title: 'Product Name' },
+                  { field: 'Category.CategoryName', title: 'Category', hidden: true },
+              ]
+            });
+        },
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/excel/columns/hidden/products.json b/vue-options-api-demos/excel/columns/hidden/products.json
new file mode 100644
index 00000000..ecf3ff9e
--- /dev/null
+++ b/vue-options-api-demos/excel/columns/hidden/products.json
@@ -0,0 +1,1311 @@
+[
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22.0000,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.3500,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25.0000,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40.0000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97.0000,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31.0000,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 11,
+        "ProductName": "Queso Cabrales",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "1 kg pkg.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 30,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 12,
+        "ProductName": "Queso Manchego La Pastora",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 86,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 13,
+        "ProductName": "Konbu",
+        "SupplierID": 6,
+        "CategoryID": 8,
+        "QuantityPerUnit": "2 kg box",
+        "UnitPrice": 6.0000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 14,
+        "ProductName": "Tofu",
+        "SupplierID": 6,
+        "CategoryID": 7,
+        "QuantityPerUnit": "40 - 100 g pkgs.",
+        "UnitPrice": 23.2500,
+        "UnitsInStock": 35,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 15,
+        "ProductName": "Genen Shouyu",
+        "SupplierID": 6,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 250 ml bottles",
+        "UnitPrice": 15.5000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 16,
+        "ProductName": "Pavlova",
+        "SupplierID": 7,
+        "CategoryID": 3,
+        "QuantityPerUnit": "32 - 500 g boxes",
+        "UnitPrice": 17.4500,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 17,
+        "ProductName": "Alice Mutton",
+        "SupplierID": 7,
+        "CategoryID": 6,
+        "QuantityPerUnit": "20 - 1 kg tins",
+        "UnitPrice": 39.0000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 18,
+        "ProductName": "Carnarvon Tigers",
+        "SupplierID": 7,
+        "CategoryID": 8,
+        "QuantityPerUnit": "16 kg pkg.",
+        "UnitPrice": 62.5000,
+        "UnitsInStock": 42,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 19,
+        "ProductName": "Teatime Chocolate Biscuits",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 12 pieces",
+        "UnitPrice": 9.2000,
+        "UnitsInStock": 25,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 20,
+        "ProductName": "Sir Rodney's Marmalade",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "30 gift boxes",
+        "UnitPrice": 81.0000,
+        "UnitsInStock": 40,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 21,
+        "ProductName": "Sir Rodney's Scones",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 pkgs. x 4 pieces",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 3,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 22,
+        "ProductName": "Gustaf's Knäckebröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 500 g pkgs.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 104,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 23,
+        "ProductName": "Tunnbröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "12 - 250 g pkgs.",
+        "UnitPrice": 9.0000,
+        "UnitsInStock": 61,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 24,
+        "ProductName": "Guaraná Fantástica",
+        "SupplierID": 10,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 355 ml cans",
+        "UnitPrice": 4.5000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 25,
+        "ProductName": "NuNuCa Nuß-Nougat-Creme",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "20 - 450 g glasses",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 26,
+        "ProductName": "Gumbär Gummibärchen",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 250 g bags",
+        "UnitPrice": 31.2300,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 27,
+        "ProductName": "Schoggi Schokolade",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 100 g pieces",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 49,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 28,
+        "ProductName": "Rössle Sauerkraut",
+        "SupplierID": 12,
+        "CategoryID": 7,
+        "QuantityPerUnit": "25 - 825 g cans",
+        "UnitPrice": 45.6000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 29,
+        "ProductName": "Thüringer Rostbratwurst",
+        "SupplierID": 12,
+        "CategoryID": 6,
+        "QuantityPerUnit": "50 bags x 30 sausgs.",
+        "UnitPrice": 123.7900,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 30,
+        "ProductName": "Nord-Ost Matjeshering",
+        "SupplierID": 13,
+        "CategoryID": 8,
+        "QuantityPerUnit": "10 - 200 g glasses",
+        "UnitPrice": 25.8900,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 31,
+        "ProductName": "Gorgonzola Telino",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "12 - 100 g pkgs",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 32,
+        "ProductName": "Mascarpone Fabioli",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 32.0000,
+        "UnitsInStock": 9,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 33,
+        "ProductName": "Geitost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "500 g",
+        "UnitPrice": 2.5000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 34,
+        "ProductName": "Sasquatch Ale",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 111,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 35,
+        "ProductName": "Steeleye Stout",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 36,
+        "ProductName": "Inlagd Sill",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 250 g  jars",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 37,
+        "ProductName": "Gravad lax",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 500 g pkgs.",
+        "UnitPrice": 26.0000,
+        "UnitsInStock": 11,
+        "UnitsOnOrder": 50,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 38,
+        "ProductName": "Côte de Blaye",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 75 cl bottles",
+        "UnitPrice": 263.5000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 39,
+        "ProductName": "Chartreuse verte",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "750 cc per bottle",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 69,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 40,
+        "ProductName": "Boston Crab Meat",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 4 oz tins",
+        "UnitPrice": 18.4000,
+        "UnitsInStock": 123,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 41,
+        "ProductName": "Jack's New England Clam Chowder",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 12 oz cans",
+        "UnitPrice": 9.6500,
+        "UnitsInStock": 85,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 42,
+        "ProductName": "Singaporean Hokkien Fried Mee",
+        "SupplierID": 20,
+        "CategoryID": 5,
+        "QuantityPerUnit": "32 - 1 kg pkgs.",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 43,
+        "ProductName": "Ipoh Coffee",
+        "SupplierID": 20,
+        "CategoryID": 1,
+        "QuantityPerUnit": "16 - 500 g tins",
+        "UnitPrice": 46.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 44,
+        "ProductName": "Gula Malacca",
+        "SupplierID": 20,
+        "CategoryID": 2,
+        "QuantityPerUnit": "20 - 2 kg bags",
+        "UnitPrice": 19.4500,
+        "UnitsInStock": 27,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 45,
+        "ProductName": "Rogede sild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "1k pkg.",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 5,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 46,
+        "ProductName": "Spegesild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "4 - 450 g glasses",
+        "UnitPrice": 12.0000,
+        "UnitsInStock": 95,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 47,
+        "ProductName": "Zaanse koeken",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 - 4 oz boxes",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 48,
+        "ProductName": "Chocolade",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 pkgs.",
+        "UnitPrice": 12.7500,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 49,
+        "ProductName": "Maxilaku",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 - 50 g pkgs.",
+        "UnitPrice": 20.0000,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 60,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 50,
+        "ProductName": "Valkoinen suklaa",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "12 - 100 g bars",
+        "UnitPrice": 16.2500,
+        "UnitsInStock": 65,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 51,
+        "ProductName": "Manjimup Dried Apples",
+        "SupplierID": 24,
+        "CategoryID": 7,
+        "QuantityPerUnit": "50 - 300 g pkgs.",
+        "UnitPrice": 53.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 52,
+        "ProductName": "Filo Mix",
+        "SupplierID": 24,
+        "CategoryID": 5,
+        "QuantityPerUnit": "16 - 2 kg boxes",
+        "UnitPrice": 7.0000,
+        "UnitsInStock": 38,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 53,
+        "ProductName": "Perth Pasties",
+        "SupplierID": 24,
+        "CategoryID": 6,
+        "QuantityPerUnit": "48 pieces",
+        "UnitPrice": 32.8000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 54,
+        "ProductName": "Tourtière",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "16 pies",
+        "UnitPrice": 7.4500,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 55,
+        "ProductName": "Pâté chinois",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "24 boxes x 2 pies",
+        "UnitPrice": 24.0000,
+        "UnitsInStock": 115,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 56,
+        "ProductName": "Gnocchi di nonna Alice",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 57,
+        "ProductName": "Ravioli Angelo",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 19.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 58,
+        "ProductName": "Escargots de Bourgogne",
+        "SupplierID": 27,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 pieces",
+        "UnitPrice": 13.2500,
+        "UnitsInStock": 62,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 59,
+        "ProductName": "Raclette Courdavault",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 55.0000,
+        "UnitsInStock": 79,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 60,
+        "ProductName": "Camembert Pierrot",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "15 - 300 g rounds",
+        "UnitPrice": 34.0000,
+        "UnitsInStock": 19,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 61,
+        "ProductName": "Sirop d'érable",
+        "SupplierID": 29,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 500 ml bottles",
+        "UnitPrice": 28.5000,
+        "UnitsInStock": 113,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 62,
+        "ProductName": "Tarte au sucre",
+        "SupplierID": 29,
+        "CategoryID": 3,
+        "QuantityPerUnit": "48 pies",
+        "UnitPrice": 49.3000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 63,
+        "ProductName": "Vegie-spread",
+        "SupplierID": 7,
+        "CategoryID": 2,
+        "QuantityPerUnit": "15 - 625 g jars",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 64,
+        "ProductName": "Wimmers gute Semmelknödel",
+        "SupplierID": 12,
+        "CategoryID": 5,
+        "QuantityPerUnit": "20 bags x 4 pieces",
+        "UnitPrice": 33.2500,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 80,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 65,
+        "ProductName": "Louisiana Fiery Hot Pepper Sauce",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "32 - 8 oz bottles",
+        "UnitPrice": 21.0500,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 66,
+        "ProductName": "Louisiana Hot Spiced Okra",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 8 oz jars",
+        "UnitPrice": 17.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 100,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 67,
+        "ProductName": "Laughing Lumberjack Lager",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 52,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 68,
+        "ProductName": "Scottish Longbreads",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 8 pieces",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 69,
+        "ProductName": "Gudbrandsdalsost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 kg pkg.",
+        "UnitPrice": 36.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 70,
+        "ProductName": "Outback Lager",
+        "SupplierID": 7,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 355 ml bottles",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 71,
+        "ProductName": "Flotemysost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 21.5000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 72,
+        "ProductName": "Mozzarella di Giovanni",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 34.8000,
+        "UnitsInStock": 14,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 73,
+        "ProductName": "Röd Kaviar",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 150 g jars",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 101,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 74,
+        "ProductName": "Longlife Tofu",
+        "SupplierID": 4,
+        "CategoryID": 7,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 20,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 75,
+        "ProductName": "Rhönbräu Klosterbier",
+        "SupplierID": 12,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 0.5 l bottles",
+        "UnitPrice": 7.7500,
+        "UnitsInStock": 125,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 76,
+        "ProductName": "Lakkalikööri",
+        "SupplierID": 23,
+        "CategoryID": 1,
+        "QuantityPerUnit": "500 ml",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 57,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 77,
+        "ProductName": "Original Frankfurter grüne Soße",
+        "SupplierID": 12,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 boxes",
+        "UnitPrice": 13.0000,
+        "UnitsInStock": 32,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    }
+]
diff --git a/vue-options-api-demos/excel/columns/locked/main.js b/vue-options-api-demos/excel/columns/locked/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/excel/columns/locked/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/excel/columns/locked/main.vue b/vue-options-api-demos/excel/columns/locked/main.vue
new file mode 100644
index 00000000..b5858a9b
--- /dev/null
+++ b/vue-options-api-demos/excel/columns/locked/main.vue
@@ -0,0 +1,43 @@
+<template>
+<div>
+    <kbutton :theme-color="'primary'" @click="exportExcel">Export Excel</kbutton>
+</div>
+</template>
+<script>
+import { saveExcel } from '@progress/kendo-vue-excel-export';
+import products from './products.json';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'kbutton': Button
+    },
+    computed: {
+      columnsToExport: function(){
+        return this.getColumns()
+        }
+    },  
+    data: function () {
+        return {
+          fields: Object.keys(products[0]),
+        }
+    },
+    methods: {
+        exportExcel () {
+            saveExcel({
+                data: products,
+                fileName: "Products",
+                columns: this.columnsToExport
+            });
+        },
+        getColumns(){
+          const columnsToExport = [];
+
+          this.fields.forEach((field)=>columnsToExport.push({ field:field, locked: field === 'ProductID', width:200}));
+            
+          return columnsToExport;
+        }
+      }
+};
+
+</script>
diff --git a/vue-options-api-demos/excel/columns/locked/products.json b/vue-options-api-demos/excel/columns/locked/products.json
new file mode 100644
index 00000000..ecf3ff9e
--- /dev/null
+++ b/vue-options-api-demos/excel/columns/locked/products.json
@@ -0,0 +1,1311 @@
+[
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22.0000,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.3500,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25.0000,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40.0000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97.0000,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31.0000,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 11,
+        "ProductName": "Queso Cabrales",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "1 kg pkg.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 30,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 12,
+        "ProductName": "Queso Manchego La Pastora",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 86,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 13,
+        "ProductName": "Konbu",
+        "SupplierID": 6,
+        "CategoryID": 8,
+        "QuantityPerUnit": "2 kg box",
+        "UnitPrice": 6.0000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 14,
+        "ProductName": "Tofu",
+        "SupplierID": 6,
+        "CategoryID": 7,
+        "QuantityPerUnit": "40 - 100 g pkgs.",
+        "UnitPrice": 23.2500,
+        "UnitsInStock": 35,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 15,
+        "ProductName": "Genen Shouyu",
+        "SupplierID": 6,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 250 ml bottles",
+        "UnitPrice": 15.5000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 16,
+        "ProductName": "Pavlova",
+        "SupplierID": 7,
+        "CategoryID": 3,
+        "QuantityPerUnit": "32 - 500 g boxes",
+        "UnitPrice": 17.4500,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 17,
+        "ProductName": "Alice Mutton",
+        "SupplierID": 7,
+        "CategoryID": 6,
+        "QuantityPerUnit": "20 - 1 kg tins",
+        "UnitPrice": 39.0000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 18,
+        "ProductName": "Carnarvon Tigers",
+        "SupplierID": 7,
+        "CategoryID": 8,
+        "QuantityPerUnit": "16 kg pkg.",
+        "UnitPrice": 62.5000,
+        "UnitsInStock": 42,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 19,
+        "ProductName": "Teatime Chocolate Biscuits",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 12 pieces",
+        "UnitPrice": 9.2000,
+        "UnitsInStock": 25,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 20,
+        "ProductName": "Sir Rodney's Marmalade",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "30 gift boxes",
+        "UnitPrice": 81.0000,
+        "UnitsInStock": 40,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 21,
+        "ProductName": "Sir Rodney's Scones",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 pkgs. x 4 pieces",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 3,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 22,
+        "ProductName": "Gustaf's Knäckebröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 500 g pkgs.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 104,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 23,
+        "ProductName": "Tunnbröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "12 - 250 g pkgs.",
+        "UnitPrice": 9.0000,
+        "UnitsInStock": 61,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 24,
+        "ProductName": "Guaraná Fantástica",
+        "SupplierID": 10,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 355 ml cans",
+        "UnitPrice": 4.5000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 25,
+        "ProductName": "NuNuCa Nuß-Nougat-Creme",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "20 - 450 g glasses",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 26,
+        "ProductName": "Gumbär Gummibärchen",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 250 g bags",
+        "UnitPrice": 31.2300,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 27,
+        "ProductName": "Schoggi Schokolade",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 100 g pieces",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 49,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 28,
+        "ProductName": "Rössle Sauerkraut",
+        "SupplierID": 12,
+        "CategoryID": 7,
+        "QuantityPerUnit": "25 - 825 g cans",
+        "UnitPrice": 45.6000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 29,
+        "ProductName": "Thüringer Rostbratwurst",
+        "SupplierID": 12,
+        "CategoryID": 6,
+        "QuantityPerUnit": "50 bags x 30 sausgs.",
+        "UnitPrice": 123.7900,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 30,
+        "ProductName": "Nord-Ost Matjeshering",
+        "SupplierID": 13,
+        "CategoryID": 8,
+        "QuantityPerUnit": "10 - 200 g glasses",
+        "UnitPrice": 25.8900,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 31,
+        "ProductName": "Gorgonzola Telino",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "12 - 100 g pkgs",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 32,
+        "ProductName": "Mascarpone Fabioli",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 32.0000,
+        "UnitsInStock": 9,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 33,
+        "ProductName": "Geitost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "500 g",
+        "UnitPrice": 2.5000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 34,
+        "ProductName": "Sasquatch Ale",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 111,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 35,
+        "ProductName": "Steeleye Stout",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 36,
+        "ProductName": "Inlagd Sill",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 250 g  jars",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 37,
+        "ProductName": "Gravad lax",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 500 g pkgs.",
+        "UnitPrice": 26.0000,
+        "UnitsInStock": 11,
+        "UnitsOnOrder": 50,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 38,
+        "ProductName": "Côte de Blaye",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 75 cl bottles",
+        "UnitPrice": 263.5000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 39,
+        "ProductName": "Chartreuse verte",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "750 cc per bottle",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 69,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 40,
+        "ProductName": "Boston Crab Meat",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 4 oz tins",
+        "UnitPrice": 18.4000,
+        "UnitsInStock": 123,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 41,
+        "ProductName": "Jack's New England Clam Chowder",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 12 oz cans",
+        "UnitPrice": 9.6500,
+        "UnitsInStock": 85,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 42,
+        "ProductName": "Singaporean Hokkien Fried Mee",
+        "SupplierID": 20,
+        "CategoryID": 5,
+        "QuantityPerUnit": "32 - 1 kg pkgs.",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 43,
+        "ProductName": "Ipoh Coffee",
+        "SupplierID": 20,
+        "CategoryID": 1,
+        "QuantityPerUnit": "16 - 500 g tins",
+        "UnitPrice": 46.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 44,
+        "ProductName": "Gula Malacca",
+        "SupplierID": 20,
+        "CategoryID": 2,
+        "QuantityPerUnit": "20 - 2 kg bags",
+        "UnitPrice": 19.4500,
+        "UnitsInStock": 27,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 45,
+        "ProductName": "Rogede sild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "1k pkg.",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 5,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 46,
+        "ProductName": "Spegesild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "4 - 450 g glasses",
+        "UnitPrice": 12.0000,
+        "UnitsInStock": 95,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 47,
+        "ProductName": "Zaanse koeken",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 - 4 oz boxes",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 48,
+        "ProductName": "Chocolade",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 pkgs.",
+        "UnitPrice": 12.7500,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 49,
+        "ProductName": "Maxilaku",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 - 50 g pkgs.",
+        "UnitPrice": 20.0000,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 60,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 50,
+        "ProductName": "Valkoinen suklaa",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "12 - 100 g bars",
+        "UnitPrice": 16.2500,
+        "UnitsInStock": 65,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 51,
+        "ProductName": "Manjimup Dried Apples",
+        "SupplierID": 24,
+        "CategoryID": 7,
+        "QuantityPerUnit": "50 - 300 g pkgs.",
+        "UnitPrice": 53.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 52,
+        "ProductName": "Filo Mix",
+        "SupplierID": 24,
+        "CategoryID": 5,
+        "QuantityPerUnit": "16 - 2 kg boxes",
+        "UnitPrice": 7.0000,
+        "UnitsInStock": 38,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 53,
+        "ProductName": "Perth Pasties",
+        "SupplierID": 24,
+        "CategoryID": 6,
+        "QuantityPerUnit": "48 pieces",
+        "UnitPrice": 32.8000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 54,
+        "ProductName": "Tourtière",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "16 pies",
+        "UnitPrice": 7.4500,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 55,
+        "ProductName": "Pâté chinois",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "24 boxes x 2 pies",
+        "UnitPrice": 24.0000,
+        "UnitsInStock": 115,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 56,
+        "ProductName": "Gnocchi di nonna Alice",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 57,
+        "ProductName": "Ravioli Angelo",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 19.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 58,
+        "ProductName": "Escargots de Bourgogne",
+        "SupplierID": 27,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 pieces",
+        "UnitPrice": 13.2500,
+        "UnitsInStock": 62,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 59,
+        "ProductName": "Raclette Courdavault",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 55.0000,
+        "UnitsInStock": 79,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 60,
+        "ProductName": "Camembert Pierrot",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "15 - 300 g rounds",
+        "UnitPrice": 34.0000,
+        "UnitsInStock": 19,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 61,
+        "ProductName": "Sirop d'érable",
+        "SupplierID": 29,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 500 ml bottles",
+        "UnitPrice": 28.5000,
+        "UnitsInStock": 113,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 62,
+        "ProductName": "Tarte au sucre",
+        "SupplierID": 29,
+        "CategoryID": 3,
+        "QuantityPerUnit": "48 pies",
+        "UnitPrice": 49.3000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 63,
+        "ProductName": "Vegie-spread",
+        "SupplierID": 7,
+        "CategoryID": 2,
+        "QuantityPerUnit": "15 - 625 g jars",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 64,
+        "ProductName": "Wimmers gute Semmelknödel",
+        "SupplierID": 12,
+        "CategoryID": 5,
+        "QuantityPerUnit": "20 bags x 4 pieces",
+        "UnitPrice": 33.2500,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 80,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 65,
+        "ProductName": "Louisiana Fiery Hot Pepper Sauce",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "32 - 8 oz bottles",
+        "UnitPrice": 21.0500,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 66,
+        "ProductName": "Louisiana Hot Spiced Okra",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 8 oz jars",
+        "UnitPrice": 17.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 100,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 67,
+        "ProductName": "Laughing Lumberjack Lager",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 52,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 68,
+        "ProductName": "Scottish Longbreads",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 8 pieces",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 69,
+        "ProductName": "Gudbrandsdalsost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 kg pkg.",
+        "UnitPrice": 36.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 70,
+        "ProductName": "Outback Lager",
+        "SupplierID": 7,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 355 ml bottles",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 71,
+        "ProductName": "Flotemysost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 21.5000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 72,
+        "ProductName": "Mozzarella di Giovanni",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 34.8000,
+        "UnitsInStock": 14,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 73,
+        "ProductName": "Röd Kaviar",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 150 g jars",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 101,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 74,
+        "ProductName": "Longlife Tofu",
+        "SupplierID": 4,
+        "CategoryID": 7,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 20,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 75,
+        "ProductName": "Rhönbräu Klosterbier",
+        "SupplierID": 12,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 0.5 l bottles",
+        "UnitPrice": 7.7500,
+        "UnitsInStock": 125,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 76,
+        "ProductName": "Lakkalikööri",
+        "SupplierID": 23,
+        "CategoryID": 1,
+        "QuantityPerUnit": "500 ml",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 57,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 77,
+        "ProductName": "Original Frankfurter grüne Soße",
+        "SupplierID": 12,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 boxes",
+        "UnitPrice": 13.0000,
+        "UnitsInStock": 32,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    }
+]
diff --git a/vue-options-api-demos/excel/columns/multi/main.js b/vue-options-api-demos/excel/columns/multi/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/excel/columns/multi/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/excel/columns/multi/main.vue b/vue-options-api-demos/excel/columns/multi/main.vue
new file mode 100644
index 00000000..fd04dd16
--- /dev/null
+++ b/vue-options-api-demos/excel/columns/multi/main.vue
@@ -0,0 +1,41 @@
+<template>
+<div>
+    <kbutton :theme-color="'primary'" @click="exportExcel">Export Excel</kbutton>
+</div>
+</template>
+<script>
+import { saveExcel } from '@progress/kendo-vue-excel-export';
+import { Button } from '@progress/kendo-vue-buttons';
+import products from './products.json';
+
+export default {
+    components: {
+      'kbutton': Button
+    },
+    data(){
+      return {
+        headerCellConfig: { textAlign: 'center' },
+      }
+    },
+    methods: {
+        exportExcel () {
+            saveExcel({
+                data: products,
+                fileName:"Products.xlsx",
+                columns: [
+                  { field: 'ProductID', title: 'Product ID'},
+                  { field: 'ProductName', title: 'Product Name'},
+                  { 
+                    title: 'Availability', headerCellOptions: this.headerCellConfig , children: [
+                        { field: 'UnitPrice', title: 'Unit Price'},
+                        { field: 'UnitsOnOrder', title: 'Units on Order' },
+                        { field: 'UnitsInStock', title: 'Units in Stock' }
+                    ]
+                  }
+              ]
+            });
+        },
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/excel/columns/multi/products.json b/vue-options-api-demos/excel/columns/multi/products.json
new file mode 100644
index 00000000..ecf3ff9e
--- /dev/null
+++ b/vue-options-api-demos/excel/columns/multi/products.json
@@ -0,0 +1,1311 @@
+[
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22.0000,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.3500,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25.0000,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40.0000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97.0000,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31.0000,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 11,
+        "ProductName": "Queso Cabrales",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "1 kg pkg.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 30,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 12,
+        "ProductName": "Queso Manchego La Pastora",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 86,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 13,
+        "ProductName": "Konbu",
+        "SupplierID": 6,
+        "CategoryID": 8,
+        "QuantityPerUnit": "2 kg box",
+        "UnitPrice": 6.0000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 14,
+        "ProductName": "Tofu",
+        "SupplierID": 6,
+        "CategoryID": 7,
+        "QuantityPerUnit": "40 - 100 g pkgs.",
+        "UnitPrice": 23.2500,
+        "UnitsInStock": 35,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 15,
+        "ProductName": "Genen Shouyu",
+        "SupplierID": 6,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 250 ml bottles",
+        "UnitPrice": 15.5000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 16,
+        "ProductName": "Pavlova",
+        "SupplierID": 7,
+        "CategoryID": 3,
+        "QuantityPerUnit": "32 - 500 g boxes",
+        "UnitPrice": 17.4500,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 17,
+        "ProductName": "Alice Mutton",
+        "SupplierID": 7,
+        "CategoryID": 6,
+        "QuantityPerUnit": "20 - 1 kg tins",
+        "UnitPrice": 39.0000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 18,
+        "ProductName": "Carnarvon Tigers",
+        "SupplierID": 7,
+        "CategoryID": 8,
+        "QuantityPerUnit": "16 kg pkg.",
+        "UnitPrice": 62.5000,
+        "UnitsInStock": 42,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 19,
+        "ProductName": "Teatime Chocolate Biscuits",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 12 pieces",
+        "UnitPrice": 9.2000,
+        "UnitsInStock": 25,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 20,
+        "ProductName": "Sir Rodney's Marmalade",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "30 gift boxes",
+        "UnitPrice": 81.0000,
+        "UnitsInStock": 40,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 21,
+        "ProductName": "Sir Rodney's Scones",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 pkgs. x 4 pieces",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 3,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 22,
+        "ProductName": "Gustaf's Knäckebröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 500 g pkgs.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 104,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 23,
+        "ProductName": "Tunnbröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "12 - 250 g pkgs.",
+        "UnitPrice": 9.0000,
+        "UnitsInStock": 61,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 24,
+        "ProductName": "Guaraná Fantástica",
+        "SupplierID": 10,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 355 ml cans",
+        "UnitPrice": 4.5000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 25,
+        "ProductName": "NuNuCa Nuß-Nougat-Creme",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "20 - 450 g glasses",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 26,
+        "ProductName": "Gumbär Gummibärchen",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 250 g bags",
+        "UnitPrice": 31.2300,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 27,
+        "ProductName": "Schoggi Schokolade",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 100 g pieces",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 49,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 28,
+        "ProductName": "Rössle Sauerkraut",
+        "SupplierID": 12,
+        "CategoryID": 7,
+        "QuantityPerUnit": "25 - 825 g cans",
+        "UnitPrice": 45.6000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 29,
+        "ProductName": "Thüringer Rostbratwurst",
+        "SupplierID": 12,
+        "CategoryID": 6,
+        "QuantityPerUnit": "50 bags x 30 sausgs.",
+        "UnitPrice": 123.7900,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 30,
+        "ProductName": "Nord-Ost Matjeshering",
+        "SupplierID": 13,
+        "CategoryID": 8,
+        "QuantityPerUnit": "10 - 200 g glasses",
+        "UnitPrice": 25.8900,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 31,
+        "ProductName": "Gorgonzola Telino",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "12 - 100 g pkgs",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 32,
+        "ProductName": "Mascarpone Fabioli",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 32.0000,
+        "UnitsInStock": 9,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 33,
+        "ProductName": "Geitost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "500 g",
+        "UnitPrice": 2.5000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 34,
+        "ProductName": "Sasquatch Ale",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 111,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 35,
+        "ProductName": "Steeleye Stout",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 36,
+        "ProductName": "Inlagd Sill",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 250 g  jars",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 37,
+        "ProductName": "Gravad lax",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 500 g pkgs.",
+        "UnitPrice": 26.0000,
+        "UnitsInStock": 11,
+        "UnitsOnOrder": 50,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 38,
+        "ProductName": "Côte de Blaye",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 75 cl bottles",
+        "UnitPrice": 263.5000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 39,
+        "ProductName": "Chartreuse verte",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "750 cc per bottle",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 69,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 40,
+        "ProductName": "Boston Crab Meat",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 4 oz tins",
+        "UnitPrice": 18.4000,
+        "UnitsInStock": 123,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 41,
+        "ProductName": "Jack's New England Clam Chowder",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 12 oz cans",
+        "UnitPrice": 9.6500,
+        "UnitsInStock": 85,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 42,
+        "ProductName": "Singaporean Hokkien Fried Mee",
+        "SupplierID": 20,
+        "CategoryID": 5,
+        "QuantityPerUnit": "32 - 1 kg pkgs.",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 43,
+        "ProductName": "Ipoh Coffee",
+        "SupplierID": 20,
+        "CategoryID": 1,
+        "QuantityPerUnit": "16 - 500 g tins",
+        "UnitPrice": 46.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 44,
+        "ProductName": "Gula Malacca",
+        "SupplierID": 20,
+        "CategoryID": 2,
+        "QuantityPerUnit": "20 - 2 kg bags",
+        "UnitPrice": 19.4500,
+        "UnitsInStock": 27,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 45,
+        "ProductName": "Rogede sild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "1k pkg.",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 5,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 46,
+        "ProductName": "Spegesild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "4 - 450 g glasses",
+        "UnitPrice": 12.0000,
+        "UnitsInStock": 95,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 47,
+        "ProductName": "Zaanse koeken",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 - 4 oz boxes",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 48,
+        "ProductName": "Chocolade",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 pkgs.",
+        "UnitPrice": 12.7500,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 49,
+        "ProductName": "Maxilaku",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 - 50 g pkgs.",
+        "UnitPrice": 20.0000,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 60,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 50,
+        "ProductName": "Valkoinen suklaa",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "12 - 100 g bars",
+        "UnitPrice": 16.2500,
+        "UnitsInStock": 65,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 51,
+        "ProductName": "Manjimup Dried Apples",
+        "SupplierID": 24,
+        "CategoryID": 7,
+        "QuantityPerUnit": "50 - 300 g pkgs.",
+        "UnitPrice": 53.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 52,
+        "ProductName": "Filo Mix",
+        "SupplierID": 24,
+        "CategoryID": 5,
+        "QuantityPerUnit": "16 - 2 kg boxes",
+        "UnitPrice": 7.0000,
+        "UnitsInStock": 38,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 53,
+        "ProductName": "Perth Pasties",
+        "SupplierID": 24,
+        "CategoryID": 6,
+        "QuantityPerUnit": "48 pieces",
+        "UnitPrice": 32.8000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 54,
+        "ProductName": "Tourtière",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "16 pies",
+        "UnitPrice": 7.4500,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 55,
+        "ProductName": "Pâté chinois",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "24 boxes x 2 pies",
+        "UnitPrice": 24.0000,
+        "UnitsInStock": 115,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 56,
+        "ProductName": "Gnocchi di nonna Alice",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 57,
+        "ProductName": "Ravioli Angelo",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 19.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 58,
+        "ProductName": "Escargots de Bourgogne",
+        "SupplierID": 27,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 pieces",
+        "UnitPrice": 13.2500,
+        "UnitsInStock": 62,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 59,
+        "ProductName": "Raclette Courdavault",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 55.0000,
+        "UnitsInStock": 79,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 60,
+        "ProductName": "Camembert Pierrot",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "15 - 300 g rounds",
+        "UnitPrice": 34.0000,
+        "UnitsInStock": 19,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 61,
+        "ProductName": "Sirop d'érable",
+        "SupplierID": 29,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 500 ml bottles",
+        "UnitPrice": 28.5000,
+        "UnitsInStock": 113,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 62,
+        "ProductName": "Tarte au sucre",
+        "SupplierID": 29,
+        "CategoryID": 3,
+        "QuantityPerUnit": "48 pies",
+        "UnitPrice": 49.3000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 63,
+        "ProductName": "Vegie-spread",
+        "SupplierID": 7,
+        "CategoryID": 2,
+        "QuantityPerUnit": "15 - 625 g jars",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 64,
+        "ProductName": "Wimmers gute Semmelknödel",
+        "SupplierID": 12,
+        "CategoryID": 5,
+        "QuantityPerUnit": "20 bags x 4 pieces",
+        "UnitPrice": 33.2500,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 80,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 65,
+        "ProductName": "Louisiana Fiery Hot Pepper Sauce",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "32 - 8 oz bottles",
+        "UnitPrice": 21.0500,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 66,
+        "ProductName": "Louisiana Hot Spiced Okra",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 8 oz jars",
+        "UnitPrice": 17.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 100,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 67,
+        "ProductName": "Laughing Lumberjack Lager",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 52,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 68,
+        "ProductName": "Scottish Longbreads",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 8 pieces",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 69,
+        "ProductName": "Gudbrandsdalsost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 kg pkg.",
+        "UnitPrice": 36.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 70,
+        "ProductName": "Outback Lager",
+        "SupplierID": 7,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 355 ml bottles",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 71,
+        "ProductName": "Flotemysost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 21.5000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 72,
+        "ProductName": "Mozzarella di Giovanni",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 34.8000,
+        "UnitsInStock": 14,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 73,
+        "ProductName": "Röd Kaviar",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 150 g jars",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 101,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 74,
+        "ProductName": "Longlife Tofu",
+        "SupplierID": 4,
+        "CategoryID": 7,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 20,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 75,
+        "ProductName": "Rhönbräu Klosterbier",
+        "SupplierID": 12,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 0.5 l bottles",
+        "UnitPrice": 7.7500,
+        "UnitsInStock": 125,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 76,
+        "ProductName": "Lakkalikööri",
+        "SupplierID": 23,
+        "CategoryID": 1,
+        "QuantityPerUnit": "500 ml",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 57,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 77,
+        "ProductName": "Original Frankfurter grüne Soße",
+        "SupplierID": 12,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 boxes",
+        "UnitPrice": 13.0000,
+        "UnitsInStock": 32,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    }
+]
diff --git a/vue-options-api-demos/excel/filtering/main.js b/vue-options-api-demos/excel/filtering/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/excel/filtering/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/excel/filtering/main.vue b/vue-options-api-demos/excel/filtering/main.vue
new file mode 100644
index 00000000..a2d592d5
--- /dev/null
+++ b/vue-options-api-demos/excel/filtering/main.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <kbutton :theme-color="'primary'" @click="exportExcel"
+      >Export Excel</kbutton
+    >
+  </div>
+</template>
+<script>
+import { saveExcel } from "@progress/kendo-vue-excel-export";
+import { Button } from "@progress/kendo-vue-buttons";
+import products from "./products.json";
+
+export default {
+  components: {
+    kbutton: Button,
+  },
+  methods: {
+    exportExcel() {
+      saveExcel({
+        data: products,
+        fileName: "Products",
+        filterable: true,
+        columns: [
+          { field: "ProductID" },
+          { field: "ProductName", title: "Product Name" },
+        ],
+      });
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/excel/filtering/products.json b/vue-options-api-demos/excel/filtering/products.json
new file mode 100644
index 00000000..ecf3ff9e
--- /dev/null
+++ b/vue-options-api-demos/excel/filtering/products.json
@@ -0,0 +1,1311 @@
+[
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22.0000,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.3500,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25.0000,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40.0000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97.0000,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31.0000,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 11,
+        "ProductName": "Queso Cabrales",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "1 kg pkg.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 30,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 12,
+        "ProductName": "Queso Manchego La Pastora",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 86,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 13,
+        "ProductName": "Konbu",
+        "SupplierID": 6,
+        "CategoryID": 8,
+        "QuantityPerUnit": "2 kg box",
+        "UnitPrice": 6.0000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 14,
+        "ProductName": "Tofu",
+        "SupplierID": 6,
+        "CategoryID": 7,
+        "QuantityPerUnit": "40 - 100 g pkgs.",
+        "UnitPrice": 23.2500,
+        "UnitsInStock": 35,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 15,
+        "ProductName": "Genen Shouyu",
+        "SupplierID": 6,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 250 ml bottles",
+        "UnitPrice": 15.5000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 16,
+        "ProductName": "Pavlova",
+        "SupplierID": 7,
+        "CategoryID": 3,
+        "QuantityPerUnit": "32 - 500 g boxes",
+        "UnitPrice": 17.4500,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 17,
+        "ProductName": "Alice Mutton",
+        "SupplierID": 7,
+        "CategoryID": 6,
+        "QuantityPerUnit": "20 - 1 kg tins",
+        "UnitPrice": 39.0000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 18,
+        "ProductName": "Carnarvon Tigers",
+        "SupplierID": 7,
+        "CategoryID": 8,
+        "QuantityPerUnit": "16 kg pkg.",
+        "UnitPrice": 62.5000,
+        "UnitsInStock": 42,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 19,
+        "ProductName": "Teatime Chocolate Biscuits",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 12 pieces",
+        "UnitPrice": 9.2000,
+        "UnitsInStock": 25,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 20,
+        "ProductName": "Sir Rodney's Marmalade",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "30 gift boxes",
+        "UnitPrice": 81.0000,
+        "UnitsInStock": 40,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 21,
+        "ProductName": "Sir Rodney's Scones",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 pkgs. x 4 pieces",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 3,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 22,
+        "ProductName": "Gustaf's Knäckebröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 500 g pkgs.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 104,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 23,
+        "ProductName": "Tunnbröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "12 - 250 g pkgs.",
+        "UnitPrice": 9.0000,
+        "UnitsInStock": 61,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 24,
+        "ProductName": "Guaraná Fantástica",
+        "SupplierID": 10,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 355 ml cans",
+        "UnitPrice": 4.5000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 25,
+        "ProductName": "NuNuCa Nuß-Nougat-Creme",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "20 - 450 g glasses",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 26,
+        "ProductName": "Gumbär Gummibärchen",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 250 g bags",
+        "UnitPrice": 31.2300,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 27,
+        "ProductName": "Schoggi Schokolade",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 100 g pieces",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 49,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 28,
+        "ProductName": "Rössle Sauerkraut",
+        "SupplierID": 12,
+        "CategoryID": 7,
+        "QuantityPerUnit": "25 - 825 g cans",
+        "UnitPrice": 45.6000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 29,
+        "ProductName": "Thüringer Rostbratwurst",
+        "SupplierID": 12,
+        "CategoryID": 6,
+        "QuantityPerUnit": "50 bags x 30 sausgs.",
+        "UnitPrice": 123.7900,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 30,
+        "ProductName": "Nord-Ost Matjeshering",
+        "SupplierID": 13,
+        "CategoryID": 8,
+        "QuantityPerUnit": "10 - 200 g glasses",
+        "UnitPrice": 25.8900,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 31,
+        "ProductName": "Gorgonzola Telino",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "12 - 100 g pkgs",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 32,
+        "ProductName": "Mascarpone Fabioli",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 32.0000,
+        "UnitsInStock": 9,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 33,
+        "ProductName": "Geitost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "500 g",
+        "UnitPrice": 2.5000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 34,
+        "ProductName": "Sasquatch Ale",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 111,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 35,
+        "ProductName": "Steeleye Stout",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 36,
+        "ProductName": "Inlagd Sill",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 250 g  jars",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 37,
+        "ProductName": "Gravad lax",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 500 g pkgs.",
+        "UnitPrice": 26.0000,
+        "UnitsInStock": 11,
+        "UnitsOnOrder": 50,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 38,
+        "ProductName": "Côte de Blaye",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 75 cl bottles",
+        "UnitPrice": 263.5000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 39,
+        "ProductName": "Chartreuse verte",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "750 cc per bottle",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 69,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 40,
+        "ProductName": "Boston Crab Meat",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 4 oz tins",
+        "UnitPrice": 18.4000,
+        "UnitsInStock": 123,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 41,
+        "ProductName": "Jack's New England Clam Chowder",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 12 oz cans",
+        "UnitPrice": 9.6500,
+        "UnitsInStock": 85,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 42,
+        "ProductName": "Singaporean Hokkien Fried Mee",
+        "SupplierID": 20,
+        "CategoryID": 5,
+        "QuantityPerUnit": "32 - 1 kg pkgs.",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 43,
+        "ProductName": "Ipoh Coffee",
+        "SupplierID": 20,
+        "CategoryID": 1,
+        "QuantityPerUnit": "16 - 500 g tins",
+        "UnitPrice": 46.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 44,
+        "ProductName": "Gula Malacca",
+        "SupplierID": 20,
+        "CategoryID": 2,
+        "QuantityPerUnit": "20 - 2 kg bags",
+        "UnitPrice": 19.4500,
+        "UnitsInStock": 27,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 45,
+        "ProductName": "Rogede sild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "1k pkg.",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 5,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 46,
+        "ProductName": "Spegesild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "4 - 450 g glasses",
+        "UnitPrice": 12.0000,
+        "UnitsInStock": 95,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 47,
+        "ProductName": "Zaanse koeken",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 - 4 oz boxes",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 48,
+        "ProductName": "Chocolade",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 pkgs.",
+        "UnitPrice": 12.7500,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 49,
+        "ProductName": "Maxilaku",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 - 50 g pkgs.",
+        "UnitPrice": 20.0000,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 60,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 50,
+        "ProductName": "Valkoinen suklaa",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "12 - 100 g bars",
+        "UnitPrice": 16.2500,
+        "UnitsInStock": 65,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 51,
+        "ProductName": "Manjimup Dried Apples",
+        "SupplierID": 24,
+        "CategoryID": 7,
+        "QuantityPerUnit": "50 - 300 g pkgs.",
+        "UnitPrice": 53.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 52,
+        "ProductName": "Filo Mix",
+        "SupplierID": 24,
+        "CategoryID": 5,
+        "QuantityPerUnit": "16 - 2 kg boxes",
+        "UnitPrice": 7.0000,
+        "UnitsInStock": 38,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 53,
+        "ProductName": "Perth Pasties",
+        "SupplierID": 24,
+        "CategoryID": 6,
+        "QuantityPerUnit": "48 pieces",
+        "UnitPrice": 32.8000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 54,
+        "ProductName": "Tourtière",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "16 pies",
+        "UnitPrice": 7.4500,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 55,
+        "ProductName": "Pâté chinois",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "24 boxes x 2 pies",
+        "UnitPrice": 24.0000,
+        "UnitsInStock": 115,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 56,
+        "ProductName": "Gnocchi di nonna Alice",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 57,
+        "ProductName": "Ravioli Angelo",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 19.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 58,
+        "ProductName": "Escargots de Bourgogne",
+        "SupplierID": 27,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 pieces",
+        "UnitPrice": 13.2500,
+        "UnitsInStock": 62,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 59,
+        "ProductName": "Raclette Courdavault",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 55.0000,
+        "UnitsInStock": 79,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 60,
+        "ProductName": "Camembert Pierrot",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "15 - 300 g rounds",
+        "UnitPrice": 34.0000,
+        "UnitsInStock": 19,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 61,
+        "ProductName": "Sirop d'érable",
+        "SupplierID": 29,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 500 ml bottles",
+        "UnitPrice": 28.5000,
+        "UnitsInStock": 113,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 62,
+        "ProductName": "Tarte au sucre",
+        "SupplierID": 29,
+        "CategoryID": 3,
+        "QuantityPerUnit": "48 pies",
+        "UnitPrice": 49.3000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 63,
+        "ProductName": "Vegie-spread",
+        "SupplierID": 7,
+        "CategoryID": 2,
+        "QuantityPerUnit": "15 - 625 g jars",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 64,
+        "ProductName": "Wimmers gute Semmelknödel",
+        "SupplierID": 12,
+        "CategoryID": 5,
+        "QuantityPerUnit": "20 bags x 4 pieces",
+        "UnitPrice": 33.2500,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 80,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 65,
+        "ProductName": "Louisiana Fiery Hot Pepper Sauce",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "32 - 8 oz bottles",
+        "UnitPrice": 21.0500,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 66,
+        "ProductName": "Louisiana Hot Spiced Okra",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 8 oz jars",
+        "UnitPrice": 17.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 100,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 67,
+        "ProductName": "Laughing Lumberjack Lager",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 52,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 68,
+        "ProductName": "Scottish Longbreads",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 8 pieces",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 69,
+        "ProductName": "Gudbrandsdalsost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 kg pkg.",
+        "UnitPrice": 36.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 70,
+        "ProductName": "Outback Lager",
+        "SupplierID": 7,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 355 ml bottles",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 71,
+        "ProductName": "Flotemysost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 21.5000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 72,
+        "ProductName": "Mozzarella di Giovanni",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 34.8000,
+        "UnitsInStock": 14,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 73,
+        "ProductName": "Röd Kaviar",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 150 g jars",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 101,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 74,
+        "ProductName": "Longlife Tofu",
+        "SupplierID": 4,
+        "CategoryID": 7,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 20,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 75,
+        "ProductName": "Rhönbräu Klosterbier",
+        "SupplierID": 12,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 0.5 l bottles",
+        "UnitPrice": 7.7500,
+        "UnitsInStock": 125,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 76,
+        "ProductName": "Lakkalikööri",
+        "SupplierID": 23,
+        "CategoryID": 1,
+        "QuantityPerUnit": "500 ml",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 57,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 77,
+        "ProductName": "Original Frankfurter grüne Soße",
+        "SupplierID": 12,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 boxes",
+        "UnitPrice": 13.0000,
+        "UnitsInStock": 32,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    }
+]
diff --git a/vue-options-api-demos/excel/rtl/main.js b/vue-options-api-demos/excel/rtl/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/excel/rtl/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/excel/rtl/main.vue b/vue-options-api-demos/excel/rtl/main.vue
new file mode 100644
index 00000000..571585e3
--- /dev/null
+++ b/vue-options-api-demos/excel/rtl/main.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+      <kbutton :theme-color="'primary'" @click="exportExcel">Export Excel</kbutton>
+  </div>
+</template>
+<script>
+import { saveExcel } from '@progress/kendo-vue-excel-export';
+import products from './products.json';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'kbutton': Button
+    },
+    methods: {
+        exportExcel () {
+            saveExcel({
+                data: products,
+                fileName: "Products",
+                dir:"rtl",
+                columns: [
+                  { field: 'ProductID'},
+                  { field: 'ProductName', title: 'Product Name' },
+              ]
+            });
+        },
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/excel/rtl/products.json b/vue-options-api-demos/excel/rtl/products.json
new file mode 100644
index 00000000..ecf3ff9e
--- /dev/null
+++ b/vue-options-api-demos/excel/rtl/products.json
@@ -0,0 +1,1311 @@
+[
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22.0000,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.3500,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25.0000,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40.0000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97.0000,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31.0000,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 11,
+        "ProductName": "Queso Cabrales",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "1 kg pkg.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 30,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 12,
+        "ProductName": "Queso Manchego La Pastora",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 86,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 13,
+        "ProductName": "Konbu",
+        "SupplierID": 6,
+        "CategoryID": 8,
+        "QuantityPerUnit": "2 kg box",
+        "UnitPrice": 6.0000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 14,
+        "ProductName": "Tofu",
+        "SupplierID": 6,
+        "CategoryID": 7,
+        "QuantityPerUnit": "40 - 100 g pkgs.",
+        "UnitPrice": 23.2500,
+        "UnitsInStock": 35,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 15,
+        "ProductName": "Genen Shouyu",
+        "SupplierID": 6,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 250 ml bottles",
+        "UnitPrice": 15.5000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 16,
+        "ProductName": "Pavlova",
+        "SupplierID": 7,
+        "CategoryID": 3,
+        "QuantityPerUnit": "32 - 500 g boxes",
+        "UnitPrice": 17.4500,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 17,
+        "ProductName": "Alice Mutton",
+        "SupplierID": 7,
+        "CategoryID": 6,
+        "QuantityPerUnit": "20 - 1 kg tins",
+        "UnitPrice": 39.0000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 18,
+        "ProductName": "Carnarvon Tigers",
+        "SupplierID": 7,
+        "CategoryID": 8,
+        "QuantityPerUnit": "16 kg pkg.",
+        "UnitPrice": 62.5000,
+        "UnitsInStock": 42,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 19,
+        "ProductName": "Teatime Chocolate Biscuits",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 12 pieces",
+        "UnitPrice": 9.2000,
+        "UnitsInStock": 25,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 20,
+        "ProductName": "Sir Rodney's Marmalade",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "30 gift boxes",
+        "UnitPrice": 81.0000,
+        "UnitsInStock": 40,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 21,
+        "ProductName": "Sir Rodney's Scones",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 pkgs. x 4 pieces",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 3,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 22,
+        "ProductName": "Gustaf's Knäckebröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 500 g pkgs.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 104,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 23,
+        "ProductName": "Tunnbröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "12 - 250 g pkgs.",
+        "UnitPrice": 9.0000,
+        "UnitsInStock": 61,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 24,
+        "ProductName": "Guaraná Fantástica",
+        "SupplierID": 10,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 355 ml cans",
+        "UnitPrice": 4.5000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 25,
+        "ProductName": "NuNuCa Nuß-Nougat-Creme",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "20 - 450 g glasses",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 26,
+        "ProductName": "Gumbär Gummibärchen",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 250 g bags",
+        "UnitPrice": 31.2300,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 27,
+        "ProductName": "Schoggi Schokolade",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 100 g pieces",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 49,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 28,
+        "ProductName": "Rössle Sauerkraut",
+        "SupplierID": 12,
+        "CategoryID": 7,
+        "QuantityPerUnit": "25 - 825 g cans",
+        "UnitPrice": 45.6000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 29,
+        "ProductName": "Thüringer Rostbratwurst",
+        "SupplierID": 12,
+        "CategoryID": 6,
+        "QuantityPerUnit": "50 bags x 30 sausgs.",
+        "UnitPrice": 123.7900,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 30,
+        "ProductName": "Nord-Ost Matjeshering",
+        "SupplierID": 13,
+        "CategoryID": 8,
+        "QuantityPerUnit": "10 - 200 g glasses",
+        "UnitPrice": 25.8900,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 31,
+        "ProductName": "Gorgonzola Telino",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "12 - 100 g pkgs",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 32,
+        "ProductName": "Mascarpone Fabioli",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 32.0000,
+        "UnitsInStock": 9,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 33,
+        "ProductName": "Geitost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "500 g",
+        "UnitPrice": 2.5000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 34,
+        "ProductName": "Sasquatch Ale",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 111,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 35,
+        "ProductName": "Steeleye Stout",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 36,
+        "ProductName": "Inlagd Sill",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 250 g  jars",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 37,
+        "ProductName": "Gravad lax",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 500 g pkgs.",
+        "UnitPrice": 26.0000,
+        "UnitsInStock": 11,
+        "UnitsOnOrder": 50,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 38,
+        "ProductName": "Côte de Blaye",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 75 cl bottles",
+        "UnitPrice": 263.5000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 39,
+        "ProductName": "Chartreuse verte",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "750 cc per bottle",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 69,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 40,
+        "ProductName": "Boston Crab Meat",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 4 oz tins",
+        "UnitPrice": 18.4000,
+        "UnitsInStock": 123,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 41,
+        "ProductName": "Jack's New England Clam Chowder",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 12 oz cans",
+        "UnitPrice": 9.6500,
+        "UnitsInStock": 85,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 42,
+        "ProductName": "Singaporean Hokkien Fried Mee",
+        "SupplierID": 20,
+        "CategoryID": 5,
+        "QuantityPerUnit": "32 - 1 kg pkgs.",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 43,
+        "ProductName": "Ipoh Coffee",
+        "SupplierID": 20,
+        "CategoryID": 1,
+        "QuantityPerUnit": "16 - 500 g tins",
+        "UnitPrice": 46.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 44,
+        "ProductName": "Gula Malacca",
+        "SupplierID": 20,
+        "CategoryID": 2,
+        "QuantityPerUnit": "20 - 2 kg bags",
+        "UnitPrice": 19.4500,
+        "UnitsInStock": 27,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 45,
+        "ProductName": "Rogede sild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "1k pkg.",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 5,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 46,
+        "ProductName": "Spegesild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "4 - 450 g glasses",
+        "UnitPrice": 12.0000,
+        "UnitsInStock": 95,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 47,
+        "ProductName": "Zaanse koeken",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 - 4 oz boxes",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 48,
+        "ProductName": "Chocolade",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 pkgs.",
+        "UnitPrice": 12.7500,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 49,
+        "ProductName": "Maxilaku",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 - 50 g pkgs.",
+        "UnitPrice": 20.0000,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 60,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 50,
+        "ProductName": "Valkoinen suklaa",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "12 - 100 g bars",
+        "UnitPrice": 16.2500,
+        "UnitsInStock": 65,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 51,
+        "ProductName": "Manjimup Dried Apples",
+        "SupplierID": 24,
+        "CategoryID": 7,
+        "QuantityPerUnit": "50 - 300 g pkgs.",
+        "UnitPrice": 53.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 52,
+        "ProductName": "Filo Mix",
+        "SupplierID": 24,
+        "CategoryID": 5,
+        "QuantityPerUnit": "16 - 2 kg boxes",
+        "UnitPrice": 7.0000,
+        "UnitsInStock": 38,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 53,
+        "ProductName": "Perth Pasties",
+        "SupplierID": 24,
+        "CategoryID": 6,
+        "QuantityPerUnit": "48 pieces",
+        "UnitPrice": 32.8000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 54,
+        "ProductName": "Tourtière",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "16 pies",
+        "UnitPrice": 7.4500,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 55,
+        "ProductName": "Pâté chinois",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "24 boxes x 2 pies",
+        "UnitPrice": 24.0000,
+        "UnitsInStock": 115,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 56,
+        "ProductName": "Gnocchi di nonna Alice",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 57,
+        "ProductName": "Ravioli Angelo",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 19.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 58,
+        "ProductName": "Escargots de Bourgogne",
+        "SupplierID": 27,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 pieces",
+        "UnitPrice": 13.2500,
+        "UnitsInStock": 62,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 59,
+        "ProductName": "Raclette Courdavault",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 55.0000,
+        "UnitsInStock": 79,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 60,
+        "ProductName": "Camembert Pierrot",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "15 - 300 g rounds",
+        "UnitPrice": 34.0000,
+        "UnitsInStock": 19,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 61,
+        "ProductName": "Sirop d'érable",
+        "SupplierID": 29,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 500 ml bottles",
+        "UnitPrice": 28.5000,
+        "UnitsInStock": 113,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 62,
+        "ProductName": "Tarte au sucre",
+        "SupplierID": 29,
+        "CategoryID": 3,
+        "QuantityPerUnit": "48 pies",
+        "UnitPrice": 49.3000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 63,
+        "ProductName": "Vegie-spread",
+        "SupplierID": 7,
+        "CategoryID": 2,
+        "QuantityPerUnit": "15 - 625 g jars",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 64,
+        "ProductName": "Wimmers gute Semmelknödel",
+        "SupplierID": 12,
+        "CategoryID": 5,
+        "QuantityPerUnit": "20 bags x 4 pieces",
+        "UnitPrice": 33.2500,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 80,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 65,
+        "ProductName": "Louisiana Fiery Hot Pepper Sauce",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "32 - 8 oz bottles",
+        "UnitPrice": 21.0500,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 66,
+        "ProductName": "Louisiana Hot Spiced Okra",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 8 oz jars",
+        "UnitPrice": 17.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 100,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 67,
+        "ProductName": "Laughing Lumberjack Lager",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 52,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 68,
+        "ProductName": "Scottish Longbreads",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 8 pieces",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 69,
+        "ProductName": "Gudbrandsdalsost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 kg pkg.",
+        "UnitPrice": 36.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 70,
+        "ProductName": "Outback Lager",
+        "SupplierID": 7,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 355 ml bottles",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 71,
+        "ProductName": "Flotemysost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 21.5000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 72,
+        "ProductName": "Mozzarella di Giovanni",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 34.8000,
+        "UnitsInStock": 14,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 73,
+        "ProductName": "Röd Kaviar",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 150 g jars",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 101,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 74,
+        "ProductName": "Longlife Tofu",
+        "SupplierID": 4,
+        "CategoryID": 7,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 20,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 75,
+        "ProductName": "Rhönbräu Klosterbier",
+        "SupplierID": 12,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 0.5 l bottles",
+        "UnitPrice": 7.7500,
+        "UnitsInStock": 125,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 76,
+        "ProductName": "Lakkalikööri",
+        "SupplierID": 23,
+        "CategoryID": 1,
+        "QuantityPerUnit": "500 ml",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 57,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 77,
+        "ProductName": "Original Frankfurter grüne Soße",
+        "SupplierID": 12,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 boxes",
+        "UnitPrice": 13.0000,
+        "UnitsInStock": 32,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    }
+]
diff --git a/vue-options-api-demos/excel/shared/products.json b/vue-options-api-demos/excel/shared/products.json
new file mode 100644
index 00000000..ecf3ff9e
--- /dev/null
+++ b/vue-options-api-demos/excel/shared/products.json
@@ -0,0 +1,1311 @@
+[
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22.0000,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.3500,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25.0000,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40.0000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97.0000,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31.0000,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 11,
+        "ProductName": "Queso Cabrales",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "1 kg pkg.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 30,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 12,
+        "ProductName": "Queso Manchego La Pastora",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 86,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 13,
+        "ProductName": "Konbu",
+        "SupplierID": 6,
+        "CategoryID": 8,
+        "QuantityPerUnit": "2 kg box",
+        "UnitPrice": 6.0000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 14,
+        "ProductName": "Tofu",
+        "SupplierID": 6,
+        "CategoryID": 7,
+        "QuantityPerUnit": "40 - 100 g pkgs.",
+        "UnitPrice": 23.2500,
+        "UnitsInStock": 35,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 15,
+        "ProductName": "Genen Shouyu",
+        "SupplierID": 6,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 250 ml bottles",
+        "UnitPrice": 15.5000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 16,
+        "ProductName": "Pavlova",
+        "SupplierID": 7,
+        "CategoryID": 3,
+        "QuantityPerUnit": "32 - 500 g boxes",
+        "UnitPrice": 17.4500,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 17,
+        "ProductName": "Alice Mutton",
+        "SupplierID": 7,
+        "CategoryID": 6,
+        "QuantityPerUnit": "20 - 1 kg tins",
+        "UnitPrice": 39.0000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 18,
+        "ProductName": "Carnarvon Tigers",
+        "SupplierID": 7,
+        "CategoryID": 8,
+        "QuantityPerUnit": "16 kg pkg.",
+        "UnitPrice": 62.5000,
+        "UnitsInStock": 42,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 19,
+        "ProductName": "Teatime Chocolate Biscuits",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 12 pieces",
+        "UnitPrice": 9.2000,
+        "UnitsInStock": 25,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 20,
+        "ProductName": "Sir Rodney's Marmalade",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "30 gift boxes",
+        "UnitPrice": 81.0000,
+        "UnitsInStock": 40,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 21,
+        "ProductName": "Sir Rodney's Scones",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 pkgs. x 4 pieces",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 3,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 22,
+        "ProductName": "Gustaf's Knäckebröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 500 g pkgs.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 104,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 23,
+        "ProductName": "Tunnbröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "12 - 250 g pkgs.",
+        "UnitPrice": 9.0000,
+        "UnitsInStock": 61,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 24,
+        "ProductName": "Guaraná Fantástica",
+        "SupplierID": 10,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 355 ml cans",
+        "UnitPrice": 4.5000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 25,
+        "ProductName": "NuNuCa Nuß-Nougat-Creme",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "20 - 450 g glasses",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 26,
+        "ProductName": "Gumbär Gummibärchen",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 250 g bags",
+        "UnitPrice": 31.2300,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 27,
+        "ProductName": "Schoggi Schokolade",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 100 g pieces",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 49,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 28,
+        "ProductName": "Rössle Sauerkraut",
+        "SupplierID": 12,
+        "CategoryID": 7,
+        "QuantityPerUnit": "25 - 825 g cans",
+        "UnitPrice": 45.6000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 29,
+        "ProductName": "Thüringer Rostbratwurst",
+        "SupplierID": 12,
+        "CategoryID": 6,
+        "QuantityPerUnit": "50 bags x 30 sausgs.",
+        "UnitPrice": 123.7900,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 30,
+        "ProductName": "Nord-Ost Matjeshering",
+        "SupplierID": 13,
+        "CategoryID": 8,
+        "QuantityPerUnit": "10 - 200 g glasses",
+        "UnitPrice": 25.8900,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 31,
+        "ProductName": "Gorgonzola Telino",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "12 - 100 g pkgs",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 32,
+        "ProductName": "Mascarpone Fabioli",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 32.0000,
+        "UnitsInStock": 9,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 33,
+        "ProductName": "Geitost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "500 g",
+        "UnitPrice": 2.5000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 34,
+        "ProductName": "Sasquatch Ale",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 111,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 35,
+        "ProductName": "Steeleye Stout",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 36,
+        "ProductName": "Inlagd Sill",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 250 g  jars",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 37,
+        "ProductName": "Gravad lax",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 500 g pkgs.",
+        "UnitPrice": 26.0000,
+        "UnitsInStock": 11,
+        "UnitsOnOrder": 50,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 38,
+        "ProductName": "Côte de Blaye",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 75 cl bottles",
+        "UnitPrice": 263.5000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 39,
+        "ProductName": "Chartreuse verte",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "750 cc per bottle",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 69,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 40,
+        "ProductName": "Boston Crab Meat",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 4 oz tins",
+        "UnitPrice": 18.4000,
+        "UnitsInStock": 123,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 41,
+        "ProductName": "Jack's New England Clam Chowder",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 12 oz cans",
+        "UnitPrice": 9.6500,
+        "UnitsInStock": 85,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 42,
+        "ProductName": "Singaporean Hokkien Fried Mee",
+        "SupplierID": 20,
+        "CategoryID": 5,
+        "QuantityPerUnit": "32 - 1 kg pkgs.",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 43,
+        "ProductName": "Ipoh Coffee",
+        "SupplierID": 20,
+        "CategoryID": 1,
+        "QuantityPerUnit": "16 - 500 g tins",
+        "UnitPrice": 46.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 44,
+        "ProductName": "Gula Malacca",
+        "SupplierID": 20,
+        "CategoryID": 2,
+        "QuantityPerUnit": "20 - 2 kg bags",
+        "UnitPrice": 19.4500,
+        "UnitsInStock": 27,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 45,
+        "ProductName": "Rogede sild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "1k pkg.",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 5,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 46,
+        "ProductName": "Spegesild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "4 - 450 g glasses",
+        "UnitPrice": 12.0000,
+        "UnitsInStock": 95,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 47,
+        "ProductName": "Zaanse koeken",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 - 4 oz boxes",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 48,
+        "ProductName": "Chocolade",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 pkgs.",
+        "UnitPrice": 12.7500,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 49,
+        "ProductName": "Maxilaku",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 - 50 g pkgs.",
+        "UnitPrice": 20.0000,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 60,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 50,
+        "ProductName": "Valkoinen suklaa",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "12 - 100 g bars",
+        "UnitPrice": 16.2500,
+        "UnitsInStock": 65,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 51,
+        "ProductName": "Manjimup Dried Apples",
+        "SupplierID": 24,
+        "CategoryID": 7,
+        "QuantityPerUnit": "50 - 300 g pkgs.",
+        "UnitPrice": 53.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 52,
+        "ProductName": "Filo Mix",
+        "SupplierID": 24,
+        "CategoryID": 5,
+        "QuantityPerUnit": "16 - 2 kg boxes",
+        "UnitPrice": 7.0000,
+        "UnitsInStock": 38,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 53,
+        "ProductName": "Perth Pasties",
+        "SupplierID": 24,
+        "CategoryID": 6,
+        "QuantityPerUnit": "48 pieces",
+        "UnitPrice": 32.8000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 54,
+        "ProductName": "Tourtière",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "16 pies",
+        "UnitPrice": 7.4500,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 55,
+        "ProductName": "Pâté chinois",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "24 boxes x 2 pies",
+        "UnitPrice": 24.0000,
+        "UnitsInStock": 115,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 56,
+        "ProductName": "Gnocchi di nonna Alice",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 57,
+        "ProductName": "Ravioli Angelo",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 19.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 58,
+        "ProductName": "Escargots de Bourgogne",
+        "SupplierID": 27,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 pieces",
+        "UnitPrice": 13.2500,
+        "UnitsInStock": 62,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 59,
+        "ProductName": "Raclette Courdavault",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 55.0000,
+        "UnitsInStock": 79,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 60,
+        "ProductName": "Camembert Pierrot",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "15 - 300 g rounds",
+        "UnitPrice": 34.0000,
+        "UnitsInStock": 19,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 61,
+        "ProductName": "Sirop d'érable",
+        "SupplierID": 29,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 500 ml bottles",
+        "UnitPrice": 28.5000,
+        "UnitsInStock": 113,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 62,
+        "ProductName": "Tarte au sucre",
+        "SupplierID": 29,
+        "CategoryID": 3,
+        "QuantityPerUnit": "48 pies",
+        "UnitPrice": 49.3000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 63,
+        "ProductName": "Vegie-spread",
+        "SupplierID": 7,
+        "CategoryID": 2,
+        "QuantityPerUnit": "15 - 625 g jars",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 64,
+        "ProductName": "Wimmers gute Semmelknödel",
+        "SupplierID": 12,
+        "CategoryID": 5,
+        "QuantityPerUnit": "20 bags x 4 pieces",
+        "UnitPrice": 33.2500,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 80,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 65,
+        "ProductName": "Louisiana Fiery Hot Pepper Sauce",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "32 - 8 oz bottles",
+        "UnitPrice": 21.0500,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 66,
+        "ProductName": "Louisiana Hot Spiced Okra",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 8 oz jars",
+        "UnitPrice": 17.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 100,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 67,
+        "ProductName": "Laughing Lumberjack Lager",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 52,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 68,
+        "ProductName": "Scottish Longbreads",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 8 pieces",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 69,
+        "ProductName": "Gudbrandsdalsost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 kg pkg.",
+        "UnitPrice": 36.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 70,
+        "ProductName": "Outback Lager",
+        "SupplierID": 7,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 355 ml bottles",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 71,
+        "ProductName": "Flotemysost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 21.5000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 72,
+        "ProductName": "Mozzarella di Giovanni",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 34.8000,
+        "UnitsInStock": 14,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 73,
+        "ProductName": "Röd Kaviar",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 150 g jars",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 101,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 74,
+        "ProductName": "Longlife Tofu",
+        "SupplierID": 4,
+        "CategoryID": 7,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 20,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 75,
+        "ProductName": "Rhönbräu Klosterbier",
+        "SupplierID": 12,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 0.5 l bottles",
+        "UnitPrice": 7.7500,
+        "UnitsInStock": 125,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 76,
+        "ProductName": "Lakkalikööri",
+        "SupplierID": 23,
+        "CategoryID": 1,
+        "QuantityPerUnit": "500 ml",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 57,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 77,
+        "ProductName": "Original Frankfurter grüne Soße",
+        "SupplierID": 12,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 boxes",
+        "UnitPrice": 13.0000,
+        "UnitsInStock": 32,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    }
+]
diff --git a/vue-options-api-demos/excel/workbook/main.js b/vue-options-api-demos/excel/workbook/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/excel/workbook/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/excel/workbook/main.vue b/vue-options-api-demos/excel/workbook/main.vue
new file mode 100644
index 00000000..c78a48b3
--- /dev/null
+++ b/vue-options-api-demos/excel/workbook/main.vue
@@ -0,0 +1,56 @@
+<template>
+  <div>
+      <kbutton :theme-color="'primary'" @click="exportExcel">Export Excel</kbutton>
+  </div>
+</template>
+<script>
+import { workbookOptions, toDataURL } from '@progress/kendo-vue-excel-export';
+import { Button } from '@progress/kendo-vue-buttons';
+import { saveAs } from '@progress/kendo-file-saver';
+import products from './products.json';
+
+export default {
+    components: {
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+          columns: [
+                  { field: 'ProductID'},
+                  { field: 'ProductName', title: 'Product Name' },
+              ]
+        }
+    },
+    methods: {
+        exportExcel () {
+          this.customSaveExcel({
+            data: products,
+            fileName: "myFile",
+            columns: this.columns
+          });
+        },
+        customSaveExcel: function(exportOptions) {
+          const saveFn = dataURL => {
+            saveAs(dataURL, exportOptions.fileName);
+          };
+
+          const options = workbookOptions(exportOptions);
+          const rows = options.sheets[0].rows;
+
+          let altIdx = 0;
+          rows.forEach((row) => {
+              if (row.type === 'data') {
+                  if (altIdx % 2 !== 0) {
+                      row.cells.forEach((cell) => {
+                          cell.background = '#aabbcc';
+                      });
+                  }
+                  altIdx++;
+              }
+          });
+          toDataURL(options).then(saveFn);
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/excel/workbook/products.json b/vue-options-api-demos/excel/workbook/products.json
new file mode 100644
index 00000000..ecf3ff9e
--- /dev/null
+++ b/vue-options-api-demos/excel/workbook/products.json
@@ -0,0 +1,1311 @@
+[
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22.0000,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.3500,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25.0000,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40.0000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97.0000,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31.0000,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 11,
+        "ProductName": "Queso Cabrales",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "1 kg pkg.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 30,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 12,
+        "ProductName": "Queso Manchego La Pastora",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 86,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 13,
+        "ProductName": "Konbu",
+        "SupplierID": 6,
+        "CategoryID": 8,
+        "QuantityPerUnit": "2 kg box",
+        "UnitPrice": 6.0000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 14,
+        "ProductName": "Tofu",
+        "SupplierID": 6,
+        "CategoryID": 7,
+        "QuantityPerUnit": "40 - 100 g pkgs.",
+        "UnitPrice": 23.2500,
+        "UnitsInStock": 35,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 15,
+        "ProductName": "Genen Shouyu",
+        "SupplierID": 6,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 250 ml bottles",
+        "UnitPrice": 15.5000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 16,
+        "ProductName": "Pavlova",
+        "SupplierID": 7,
+        "CategoryID": 3,
+        "QuantityPerUnit": "32 - 500 g boxes",
+        "UnitPrice": 17.4500,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 17,
+        "ProductName": "Alice Mutton",
+        "SupplierID": 7,
+        "CategoryID": 6,
+        "QuantityPerUnit": "20 - 1 kg tins",
+        "UnitPrice": 39.0000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 18,
+        "ProductName": "Carnarvon Tigers",
+        "SupplierID": 7,
+        "CategoryID": 8,
+        "QuantityPerUnit": "16 kg pkg.",
+        "UnitPrice": 62.5000,
+        "UnitsInStock": 42,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 19,
+        "ProductName": "Teatime Chocolate Biscuits",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 12 pieces",
+        "UnitPrice": 9.2000,
+        "UnitsInStock": 25,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 20,
+        "ProductName": "Sir Rodney's Marmalade",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "30 gift boxes",
+        "UnitPrice": 81.0000,
+        "UnitsInStock": 40,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 21,
+        "ProductName": "Sir Rodney's Scones",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 pkgs. x 4 pieces",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 3,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 22,
+        "ProductName": "Gustaf's Knäckebröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 500 g pkgs.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 104,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 23,
+        "ProductName": "Tunnbröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "12 - 250 g pkgs.",
+        "UnitPrice": 9.0000,
+        "UnitsInStock": 61,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 24,
+        "ProductName": "Guaraná Fantástica",
+        "SupplierID": 10,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 355 ml cans",
+        "UnitPrice": 4.5000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 25,
+        "ProductName": "NuNuCa Nuß-Nougat-Creme",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "20 - 450 g glasses",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 26,
+        "ProductName": "Gumbär Gummibärchen",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 250 g bags",
+        "UnitPrice": 31.2300,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 27,
+        "ProductName": "Schoggi Schokolade",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 100 g pieces",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 49,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 28,
+        "ProductName": "Rössle Sauerkraut",
+        "SupplierID": 12,
+        "CategoryID": 7,
+        "QuantityPerUnit": "25 - 825 g cans",
+        "UnitPrice": 45.6000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 29,
+        "ProductName": "Thüringer Rostbratwurst",
+        "SupplierID": 12,
+        "CategoryID": 6,
+        "QuantityPerUnit": "50 bags x 30 sausgs.",
+        "UnitPrice": 123.7900,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 30,
+        "ProductName": "Nord-Ost Matjeshering",
+        "SupplierID": 13,
+        "CategoryID": 8,
+        "QuantityPerUnit": "10 - 200 g glasses",
+        "UnitPrice": 25.8900,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 31,
+        "ProductName": "Gorgonzola Telino",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "12 - 100 g pkgs",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 32,
+        "ProductName": "Mascarpone Fabioli",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 32.0000,
+        "UnitsInStock": 9,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 33,
+        "ProductName": "Geitost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "500 g",
+        "UnitPrice": 2.5000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 34,
+        "ProductName": "Sasquatch Ale",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 111,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 35,
+        "ProductName": "Steeleye Stout",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 36,
+        "ProductName": "Inlagd Sill",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 250 g  jars",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 37,
+        "ProductName": "Gravad lax",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 500 g pkgs.",
+        "UnitPrice": 26.0000,
+        "UnitsInStock": 11,
+        "UnitsOnOrder": 50,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 38,
+        "ProductName": "Côte de Blaye",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 75 cl bottles",
+        "UnitPrice": 263.5000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 39,
+        "ProductName": "Chartreuse verte",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "750 cc per bottle",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 69,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 40,
+        "ProductName": "Boston Crab Meat",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 4 oz tins",
+        "UnitPrice": 18.4000,
+        "UnitsInStock": 123,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 41,
+        "ProductName": "Jack's New England Clam Chowder",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 12 oz cans",
+        "UnitPrice": 9.6500,
+        "UnitsInStock": 85,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 42,
+        "ProductName": "Singaporean Hokkien Fried Mee",
+        "SupplierID": 20,
+        "CategoryID": 5,
+        "QuantityPerUnit": "32 - 1 kg pkgs.",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 43,
+        "ProductName": "Ipoh Coffee",
+        "SupplierID": 20,
+        "CategoryID": 1,
+        "QuantityPerUnit": "16 - 500 g tins",
+        "UnitPrice": 46.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 44,
+        "ProductName": "Gula Malacca",
+        "SupplierID": 20,
+        "CategoryID": 2,
+        "QuantityPerUnit": "20 - 2 kg bags",
+        "UnitPrice": 19.4500,
+        "UnitsInStock": 27,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 45,
+        "ProductName": "Rogede sild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "1k pkg.",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 5,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 46,
+        "ProductName": "Spegesild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "4 - 450 g glasses",
+        "UnitPrice": 12.0000,
+        "UnitsInStock": 95,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 47,
+        "ProductName": "Zaanse koeken",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 - 4 oz boxes",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 48,
+        "ProductName": "Chocolade",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 pkgs.",
+        "UnitPrice": 12.7500,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 49,
+        "ProductName": "Maxilaku",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 - 50 g pkgs.",
+        "UnitPrice": 20.0000,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 60,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 50,
+        "ProductName": "Valkoinen suklaa",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "12 - 100 g bars",
+        "UnitPrice": 16.2500,
+        "UnitsInStock": 65,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 51,
+        "ProductName": "Manjimup Dried Apples",
+        "SupplierID": 24,
+        "CategoryID": 7,
+        "QuantityPerUnit": "50 - 300 g pkgs.",
+        "UnitPrice": 53.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 52,
+        "ProductName": "Filo Mix",
+        "SupplierID": 24,
+        "CategoryID": 5,
+        "QuantityPerUnit": "16 - 2 kg boxes",
+        "UnitPrice": 7.0000,
+        "UnitsInStock": 38,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 53,
+        "ProductName": "Perth Pasties",
+        "SupplierID": 24,
+        "CategoryID": 6,
+        "QuantityPerUnit": "48 pieces",
+        "UnitPrice": 32.8000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 54,
+        "ProductName": "Tourtière",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "16 pies",
+        "UnitPrice": 7.4500,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 55,
+        "ProductName": "Pâté chinois",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "24 boxes x 2 pies",
+        "UnitPrice": 24.0000,
+        "UnitsInStock": 115,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 56,
+        "ProductName": "Gnocchi di nonna Alice",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 57,
+        "ProductName": "Ravioli Angelo",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 19.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 58,
+        "ProductName": "Escargots de Bourgogne",
+        "SupplierID": 27,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 pieces",
+        "UnitPrice": 13.2500,
+        "UnitsInStock": 62,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 59,
+        "ProductName": "Raclette Courdavault",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 55.0000,
+        "UnitsInStock": 79,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 60,
+        "ProductName": "Camembert Pierrot",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "15 - 300 g rounds",
+        "UnitPrice": 34.0000,
+        "UnitsInStock": 19,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 61,
+        "ProductName": "Sirop d'érable",
+        "SupplierID": 29,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 500 ml bottles",
+        "UnitPrice": 28.5000,
+        "UnitsInStock": 113,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 62,
+        "ProductName": "Tarte au sucre",
+        "SupplierID": 29,
+        "CategoryID": 3,
+        "QuantityPerUnit": "48 pies",
+        "UnitPrice": 49.3000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 63,
+        "ProductName": "Vegie-spread",
+        "SupplierID": 7,
+        "CategoryID": 2,
+        "QuantityPerUnit": "15 - 625 g jars",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 64,
+        "ProductName": "Wimmers gute Semmelknödel",
+        "SupplierID": 12,
+        "CategoryID": 5,
+        "QuantityPerUnit": "20 bags x 4 pieces",
+        "UnitPrice": 33.2500,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 80,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 65,
+        "ProductName": "Louisiana Fiery Hot Pepper Sauce",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "32 - 8 oz bottles",
+        "UnitPrice": 21.0500,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 66,
+        "ProductName": "Louisiana Hot Spiced Okra",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 8 oz jars",
+        "UnitPrice": 17.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 100,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 67,
+        "ProductName": "Laughing Lumberjack Lager",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 52,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 68,
+        "ProductName": "Scottish Longbreads",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 8 pieces",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 69,
+        "ProductName": "Gudbrandsdalsost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 kg pkg.",
+        "UnitPrice": 36.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 70,
+        "ProductName": "Outback Lager",
+        "SupplierID": 7,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 355 ml bottles",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 71,
+        "ProductName": "Flotemysost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 21.5000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 72,
+        "ProductName": "Mozzarella di Giovanni",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 34.8000,
+        "UnitsInStock": 14,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 73,
+        "ProductName": "Röd Kaviar",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 150 g jars",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 101,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 74,
+        "ProductName": "Longlife Tofu",
+        "SupplierID": 4,
+        "CategoryID": 7,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 20,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 75,
+        "ProductName": "Rhönbräu Klosterbier",
+        "SupplierID": 12,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 0.5 l bottles",
+        "UnitPrice": 7.7500,
+        "UnitsInStock": 125,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 76,
+        "ProductName": "Lakkalikööri",
+        "SupplierID": 23,
+        "CategoryID": 1,
+        "QuantityPerUnit": "500 ml",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 57,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 77,
+        "ProductName": "Original Frankfurter grüne Soße",
+        "SupplierID": 12,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 boxes",
+        "UnitPrice": 13.0000,
+        "UnitsInStock": 32,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    }
+]
diff --git a/vue-options-api-demos/form/advanced/changing/FormContent.vue b/vue-options-api-demos/form/advanced/changing/FormContent.vue
new file mode 100644
index 00000000..e7fd7cac
--- /dev/null
+++ b/vue-options-api-demos/form/advanced/changing/FormContent.vue
@@ -0,0 +1,66 @@
+<template>
+    <form-element :style="{ maxWidth: '650px' }">
+          <fieldset class="k-form-fieldset">
+              <field
+                  :name="'price'"
+                  :label="'Price'"
+                  :component="'myTemplate'"
+                >
+                <template v-slot:myTemplate="{props}">
+                    <formnumerictextbox
+                      v-bind="props"
+                      @change="props.onChange"
+                      @blur="props.onBlur"
+                      @focus="props.onFocus"
+                    ></formnumerictextbox>
+                </template>
+              </field>
+          
+                <br />
+        <kbutton
+            @click="clearPrice"
+          >
+            Clear price
+          </kbutton>
+            <div class="k-form-buttons">
+              <kbutton
+                :theme-color="'primary'"
+                :type="'submit'"
+                :disabled="!kendoForm.allowSubmit"
+              >
+                Submit
+              </kbutton>
+            </div>
+          </fieldset>
+        </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import FormNumericTextBox from "./FormNumericTextBox.vue";
+import { Button } from "@progress/kendo-vue-buttons";
+
+export default {
+    
+    components: {
+      field: Field,
+      'form-element': FormElement,
+      formnumerictextbox: FormNumericTextBox,
+      kbutton: Button
+    },
+    inject: {
+      kendoForm: { default: {} },  
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      },
+      clearPrice (e) {
+          e.preventDefault();
+          this.kendoForm.onChange("price", {
+            value: 0,
+          });
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/advanced/changing/FormNumericTextBox.vue b/vue-options-api-demos/form/advanced/changing/FormNumericTextBox.vue
new file mode 100644
index 00000000..fda4a4ec
--- /dev/null
+++ b/vue-options-api-demos/form/advanced/changing/FormNumericTextBox.vue
@@ -0,0 +1,80 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <numerictextbox :style="{ width: '230px' }" 
+                :valid="valid"
+                :value="value"
+                :id="id"
+                :min="0"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { NumericTextBox } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: Number,
+            default: null
+        }
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        klabel: Label,
+        numerictextbox: NumericTextBox
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/advanced/changing/main.js b/vue-options-api-demos/form/advanced/changing/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/form/advanced/changing/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/form/advanced/changing/main.vue b/vue-options-api-demos/form/advanced/changing/main.vue
new file mode 100644
index 00000000..77145f7c
--- /dev/null
+++ b/vue-options-api-demos/form/advanced/changing/main.vue
@@ -0,0 +1,27 @@
+<template>
+    <k-form
+      :initial-values="{
+        price: 20
+      }"
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
+
diff --git a/vue-options-api-demos/form/advanced/dynamic-reset/FormContent.vue b/vue-options-api-demos/form/advanced/dynamic-reset/FormContent.vue
new file mode 100644
index 00000000..5731f2b9
--- /dev/null
+++ b/vue-options-api-demos/form/advanced/dynamic-reset/FormContent.vue
@@ -0,0 +1,81 @@
+<template>
+    <form-element :style="{ maxWidth: '650px' }">
+          <fieldset class="k-form-fieldset">
+              <field
+                  :name="'firstName'"
+                  :label="'First Name'"
+                  :component="'myTemplate'"
+                >
+                <template v-slot:myTemplate="{props}">
+                    <forminput
+                      v-bind="props"
+                      @change="props.onChange"
+                      @blur="props.onBlur"
+                      @focus="props.onFocus"
+                    ></forminput>
+                </template>
+              </field>
+           <field
+                  :name="'email'"
+                  :label="'Email'"
+                  :component="'myTemplate'"
+                >
+                <template v-slot:myTemplate="{props}">
+                    <forminput
+                      v-bind="props"
+                      @change="props.onChange"
+                      @blur="props.onBlur"
+                      @focus="props.onFocus"
+                    ></forminput>
+                </template>
+              </field>
+                 <field
+                  :name="'lastName'"
+                  :label="'Last Name'"
+                  :component="'myTemplate'"
+                >
+                <template v-slot:myTemplate="{props}">
+                    <forminput
+                      v-bind="props"
+                      @change="props.onChange"
+                      @blur="props.onBlur"
+                      @focus="props.onFocus"
+                    ></forminput>
+                </template>
+              </field>
+            <div class="k-form-buttons">
+              <kbutton
+                :theme-color="'primary'"
+                :type="'submit'"
+                :disabled="!kendoForm.allowSubmit"
+              >
+                Submit
+              </kbutton>
+            </div>
+          </fieldset>
+        </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import FormInput from "./FormInput.vue";
+import { Button } from "@progress/kendo-vue-buttons";
+
+export default {
+    
+    components: {
+      field: Field,
+      'form-element': FormElement,
+      forminput: FormInput,
+      kbutton: Button
+    },
+    inject: {
+      kendoForm: { default: {} },  
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/advanced/dynamic-reset/FormInput.vue b/vue-options-api-demos/form/advanced/dynamic-reset/FormInput.vue
new file mode 100644
index 00000000..706d5702
--- /dev/null
+++ b/vue-options-api-demos/form/advanced/dynamic-reset/FormInput.vue
@@ -0,0 +1,84 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :disabled="disabled" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <kinput :style="{ width: '230px' }" 
+                :valid="valid"
+                :id="id"
+                :value="value"
+                :disabled="disabled"
+                :placeholder="placeholder"
+                @input="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        optional: Boolean,
+        disabled: Boolean,
+        placeholder: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      kinput: Input
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/advanced/dynamic-reset/main.js b/vue-options-api-demos/form/advanced/dynamic-reset/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/form/advanced/dynamic-reset/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/form/advanced/dynamic-reset/main.vue b/vue-options-api-demos/form/advanced/dynamic-reset/main.vue
new file mode 100644
index 00000000..abd15d0e
--- /dev/null
+++ b/vue-options-api-demos/form/advanced/dynamic-reset/main.vue
@@ -0,0 +1,50 @@
+<template>
+<div>
+<kbutton @click="loadNewUser">
+ Load new user
+      </kbutton>
+      <hr class="k-hr" />
+    <k-form
+      :initialValues="user"
+      @submit="handleSubmit"
+      :key="JSON.stringify(user)">
+      <formcontent />
+   </k-form>
+   </div>
+</template>
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+import { Button } from "@progress/kendo-vue-buttons";
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent,
+       kbutton: Button
+    },
+    data(){
+      return {
+        user: {
+          firstName: "John",
+          lastName: "Smith",
+          email: "John.Smith@email.com",
+        }
+      };
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      },
+      loadNewUser(){
+        this.user = {
+          firstName: "NewFirstName",
+          lastName: "NewLastName",
+          email: "NewEmails@email.com",
+        };
+      }
+    }
+};
+
+</script>
+
diff --git a/vue-options-api-demos/form/advanced/reading/FormContent.vue b/vue-options-api-demos/form/advanced/reading/FormContent.vue
new file mode 100644
index 00000000..0d2802e8
--- /dev/null
+++ b/vue-options-api-demos/form/advanced/reading/FormContent.vue
@@ -0,0 +1,74 @@
+<template>
+    <form-element :style="{ maxWidth: '650px' }">
+          <fieldset class="k-form-fieldset">
+              <field
+                  :name="'userCount'"
+                  :label="'Users Count'"
+                  :component="'myTemplate'"
+                >
+                <template v-slot:myTemplate="{props}">
+                    <formnumerictextbox
+                      v-bind="props"
+                      @change="props.onChange"
+                      @blur="props.onBlur"
+                      @focus="props.onFocus"
+                    ></formnumerictextbox>
+                </template>
+              </field>
+               <field
+                  :name="'ticketCount'"
+                  :label="'Tickets Count'"
+                  :component="'myTemplate'"
+                >
+                <template v-slot:myTemplate="{props}">
+                    <formnumerictextbox
+                      v-bind="props"
+                      @change="props.onChange"
+                      @blur="props.onBlur"
+                      @focus="props.onFocus"
+                    ></formnumerictextbox>
+                </template>
+              </field>
+                <br />
+          Total ticket price:
+          <strong>
+            {{kendoForm.valueGetter("userCount") *
+              kendoForm.valueGetter("ticketCount")}}
+          </strong>
+            <div class="k-form-buttons">
+              <kbutton
+                :theme-color="'primary'"
+                :type="'submit'"
+                :disabled="!kendoForm.allowSubmit"
+              >
+                Submit
+              </kbutton>
+            </div>
+          </fieldset>
+        </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import FormNumericTextBox from "./FormNumericTextBox.vue";
+import { Button } from "@progress/kendo-vue-buttons";
+
+
+export default {
+    
+    components: {
+      field: Field,
+      'form-element': FormElement,
+      formnumerictextbox: FormNumericTextBox,
+      kbutton: Button
+    },
+    inject: {
+      kendoForm: { default: {} },  
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/advanced/reading/FormNumericTextBox.vue b/vue-options-api-demos/form/advanced/reading/FormNumericTextBox.vue
new file mode 100644
index 00000000..fda4a4ec
--- /dev/null
+++ b/vue-options-api-demos/form/advanced/reading/FormNumericTextBox.vue
@@ -0,0 +1,80 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <numerictextbox :style="{ width: '230px' }" 
+                :valid="valid"
+                :value="value"
+                :id="id"
+                :min="0"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { NumericTextBox } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: Number,
+            default: null
+        }
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        klabel: Label,
+        numerictextbox: NumericTextBox
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/advanced/reading/main.js b/vue-options-api-demos/form/advanced/reading/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/form/advanced/reading/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/form/advanced/reading/main.vue b/vue-options-api-demos/form/advanced/reading/main.vue
new file mode 100644
index 00000000..1e094fe2
--- /dev/null
+++ b/vue-options-api-demos/form/advanced/reading/main.vue
@@ -0,0 +1,28 @@
+<template>
+    <k-form
+      :initial-values="{
+        userCount: 20,
+        ticketCount: 100,
+      }"
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
+
diff --git a/vue-options-api-demos/form/basic/FormContent.vue b/vue-options-api-demos/form/basic/FormContent.vue
new file mode 100644
index 00000000..b97a7dc5
--- /dev/null
+++ b/vue-options-api-demos/form/basic/FormContent.vue
@@ -0,0 +1,97 @@
+<template>
+  <form-element :style="{ maxWidth: '650px' }">
+    <fieldset class="k-form-fieldset">
+      <legend class="k-form-legend">Please fill in the fields:</legend>
+      <div class="mb-3">
+        <field
+          :name="'firstName'"
+          :component="'myTemplate'"
+          :label="'First name'"
+        >
+          <template v-slot:myTemplate="{ props }">
+            <forminput
+              v-bind="props"
+              @change="props.onChange"
+              @blur="props.onBlur"
+              @focus="props.onFocus"
+            />
+          </template>
+        </field>
+      </div>
+      <div class="mb-3">
+        <field
+          :name="'lastName'"
+          :component="'myTemplate'"
+          :label="'Last name'"
+        >
+          <template v-slot:myTemplate="{ props }">
+            <forminput
+              v-bind="props"
+              @change="props.onChange"
+              @blur="props.onBlur"
+              @focus="props.onFocus"
+            />
+          </template>
+        </field>
+      </div>
+      <div class="mb-3">
+        <field
+          :name="'email'"
+          :type="'email'"
+          :component="'myTemplate'"
+          :label="'Email'"
+          :validator="emailValidator"
+        >
+          <template v-slot:myTemplate="{ props }">
+            <forminput
+              v-bind="props"
+              @change="props.onChange"
+              @blur="props.onBlur"
+              @focus="props.onFocus"
+            />
+          </template>
+        </field>
+      </div>
+    </fieldset>
+    <div class="k-form-buttons">
+      <kbutton type="submit" :disabled="!kendoForm.allowSubmit">
+        Submit
+      </kbutton>
+      <kbutton type="button" @click="clear">Clear </kbutton>
+    </div>
+  </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import FormInput from "./FormInput.vue";
+import { Button } from "@progress/kendo-vue-buttons";
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const emailValidator = (value) =>
+  emailRegex.test(value) ? "" : "Please enter a valid email.";
+
+export default {
+  components: {
+    field: Field,
+    "form-element": FormElement,
+    forminput: FormInput,
+    kbutton: Button,
+  },
+  inject: {
+    kendoForm: { default: {} },
+  },
+  data: function () {
+    return {
+      emailValidator: emailValidator,
+    };
+  },
+  methods: {
+    handleSubmit(dataItem) {
+      alert(JSON.stringify(dataItem, null, 2));
+    },
+    clear() {
+      this.kendoForm.onFormReset();
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/form/basic/FormInput.vue b/vue-options-api-demos/form/basic/FormInput.vue
new file mode 100644
index 00000000..706d5702
--- /dev/null
+++ b/vue-options-api-demos/form/basic/FormInput.vue
@@ -0,0 +1,84 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :disabled="disabled" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <kinput :style="{ width: '230px' }" 
+                :valid="valid"
+                :id="id"
+                :value="value"
+                :disabled="disabled"
+                :placeholder="placeholder"
+                @input="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        optional: Boolean,
+        disabled: Boolean,
+        placeholder: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      kinput: Input
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/basic/main.js b/vue-options-api-demos/form/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/form/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/form/basic/main.vue b/vue-options-api-demos/form/basic/main.vue
new file mode 100644
index 00000000..cb5e3869
--- /dev/null
+++ b/vue-options-api-demos/form/basic/main.vue
@@ -0,0 +1,24 @@
+<template>
+    <k-form
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/custom-components/advanced/FormContent.vue b/vue-options-api-demos/form/custom-components/advanced/FormContent.vue
new file mode 100644
index 00000000..dbd8d833
--- /dev/null
+++ b/vue-options-api-demos/form/custom-components/advanced/FormContent.vue
@@ -0,0 +1,65 @@
+<template>
+    <form-element :style="{ maxWidth: '650px' }">
+          <fieldset class="k-form-fieldset">
+             <field
+                :id="'fullName'"
+                :name="'fullName'"
+                :label="'Full Name'"
+                :component="'myTemplate'"
+                :validator="nameValidator"
+              >
+               <template v-slot:myTemplate="{props}">
+                  <forminput
+                    v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  />
+              </template>
+              </field>
+            <div class="k-form-buttons">
+              <kbutton
+                :theme-color="'primary'"
+                :type="'submit'"
+                :disabled="!kendoForm.allowSubmit"
+              >
+                Submit
+              </kbutton>
+              <kbutton @click="clear">
+                  Clear
+              </kbutton>
+            </div>
+          </fieldset>
+        </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import FormInput from "./FormInput.vue";
+import { Button } from "@progress/kendo-vue-buttons";
+
+import {
+  nameValidator
+} from "./validators";
+export default {
+    
+    components: {
+      field: Field,
+      'form-element': FormElement,
+      forminput: FormInput,
+      kbutton: Button
+    },
+    inject: {
+      kendoForm: { default: {} },  
+    },
+    methods: {
+      nameValidator: nameValidator,
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      },
+      clear(){
+        this.kendoForm.onFormReset();
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/custom-components/advanced/FormInput.vue b/vue-options-api-demos/form/custom-components/advanced/FormInput.vue
new file mode 100644
index 00000000..706d5702
--- /dev/null
+++ b/vue-options-api-demos/form/custom-components/advanced/FormInput.vue
@@ -0,0 +1,84 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :disabled="disabled" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <kinput :style="{ width: '230px' }" 
+                :valid="valid"
+                :id="id"
+                :value="value"
+                :disabled="disabled"
+                :placeholder="placeholder"
+                @input="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        optional: Boolean,
+        disabled: Boolean,
+        placeholder: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      kinput: Input
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/custom-components/advanced/main.js b/vue-options-api-demos/form/custom-components/advanced/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/form/custom-components/advanced/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/form/custom-components/advanced/main.vue b/vue-options-api-demos/form/custom-components/advanced/main.vue
new file mode 100644
index 00000000..ee5d7f4f
--- /dev/null
+++ b/vue-options-api-demos/form/custom-components/advanced/main.vue
@@ -0,0 +1,24 @@
+<template>
+    <k-form
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
+
diff --git a/vue-options-api-demos/form/custom-components/advanced/validators.js b/vue-options-api-demos/form/custom-components/advanced/validators.js
new file mode 100644
index 00000000..b0779c1d
--- /dev/null
+++ b/vue-options-api-demos/form/custom-components/advanced/validators.js
@@ -0,0 +1,82 @@
+import { getter } from '@progress/kendo-vue-common';
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const phoneRegex = new RegExp(/^[0-9 ()+-]+$/);
+const ccardRegex = new RegExp(/^[0-9-]+$/);
+const cvcRegex = new RegExp(/^[0-9]+$/);
+
+export const termsValidator = value =>
+  value ? '' : "It's required to agree with Terms and Conditions.";
+export const emailValidator = value =>
+  !value
+    ? 'Email field is required.'
+    : emailRegex.test(value)
+    ? ''
+    : 'Email is not in a valid format.';
+export const nameValidator = value =>
+  !value
+    ? 'Full Name is required'
+    : value.length < 7
+    ? 'Full Name should be at least 7 characters long.'
+    : '';
+export const userNameValidator = value =>
+  !value
+    ? 'User Name is required'
+    : value.length < 5
+    ? 'User name should be at least 5 characters long.'
+    : '';
+export const phoneValidator = value =>
+  !value
+    ? 'Phone number is required.'
+    : phoneRegex.test(value)
+    ? ''
+    : 'Not a valid phone number.';
+export const cardValidator = value =>
+  !value
+    ? 'Credit card number is required. '
+    : ccardRegex.test(value)
+    ? ''
+    : 'Not a valid credit card number format.';
+export const cvcValidator = value =>
+  !value
+    ? 'CVC code is required,'
+    : cvcRegex.test(value) || value.length !== 3
+    ? ''
+    : 'Not a valid CVC code format.';
+export const guestsValidator = value =>
+  !value
+    ? 'Number of guests is required'
+    : value <= 5
+    ? ''
+    : 'Maximum 5 guests';
+export const nightsValidator = value =>
+  value ? '' : 'Number of Nights is required.';
+export const arrivalDateValidator = value =>
+  value ? '' : 'Arrival Date is required.';
+export const colorValidator = value => (value ? '' : 'Color is required.');
+export const requiredValidator = value =>
+  value ? '' : 'Error: This field is required.';
+export const passwordValidator = value =>
+  value && value.length > 8 ? '' : 'Password must be at least 8 symbols.';
+export const addressValidator = value => (value ? '' : 'Address is required.');
+
+const userNameGetter = getter('username');
+const emailGetter = getter('email');
+
+export const formValidator = values => {
+  const userName = userNameGetter(values);
+  const emailValue = emailGetter(values);
+
+  if (userName && emailValue && emailRegex.test(emailValue)) {
+    return {};
+  }
+
+  return {
+    VALIDATION_SUMMARY: 'Please fill in the following fields.',
+    ['username']: !userName ? 'User Name is required.' : '',
+    ['email']:
+      emailValue && emailRegex.test(emailValue)
+        ? ''
+        : 'Email is required and should be in a valid format.'
+  };
+};
diff --git a/vue-options-api-demos/form/custom-components/basic/FormContent.vue b/vue-options-api-demos/form/custom-components/basic/FormContent.vue
new file mode 100644
index 00000000..fca87e69
--- /dev/null
+++ b/vue-options-api-demos/form/custom-components/basic/FormContent.vue
@@ -0,0 +1,58 @@
+<template>
+    <form-element :style="{ maxWidth: '650px' }">
+          <fieldset class="k-form-fieldset">
+             <field
+                :id="'fullName'"
+                :name="'fullName'"
+                :component="'myTemplate'"
+              >
+               <template v-slot:myTemplate="{props}">
+                  <forminput
+                    v-bind="props"
+                    @change="props.onChange"
+                  />
+              </template>
+              </field>
+            <div class="k-form-buttons">
+              <kbutton
+                :theme-color="'primary'"
+                :type="'submit'"
+                :disabled="!kendoForm.allowSubmit"
+              >
+                Submit
+              </kbutton>
+              <kbutton @click="clear">
+                  Clear
+              </kbutton>
+            </div>
+          </fieldset>
+        </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import FormInput from "./FormInput.vue";
+import { Button } from "@progress/kendo-vue-buttons";
+
+
+export default {
+    
+    components: {
+      field: Field,
+      'form-element': FormElement,
+      forminput: FormInput,
+      kbutton: Button
+    },
+    inject: {
+      kendoForm: { default: {} },  
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      },
+      clear(){
+        this.kendoForm.onFormReset();
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/custom-components/basic/FormInput.vue b/vue-options-api-demos/form/custom-components/basic/FormInput.vue
new file mode 100644
index 00000000..76733af2
--- /dev/null
+++ b/vue-options-api-demos/form/custom-components/basic/FormInput.vue
@@ -0,0 +1,37 @@
+<template>
+    <fieldwrapper>
+        <div class="k-form-field-wrap">
+            <kinput :style="{ width: '230px' }" 
+                :id="id"
+                :value="value"
+                @input="handleChange"
+                />
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Input } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        id: String,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      kinput: Input
+    },
+    emits: {
+        change: null
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/custom-components/basic/main.js b/vue-options-api-demos/form/custom-components/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/form/custom-components/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/form/custom-components/basic/main.vue b/vue-options-api-demos/form/custom-components/basic/main.vue
new file mode 100644
index 00000000..ee5d7f4f
--- /dev/null
+++ b/vue-options-api-demos/form/custom-components/basic/main.vue
@@ -0,0 +1,24 @@
+<template>
+    <k-form
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
+
diff --git a/vue-options-api-demos/form/fieldarrayvalidation/CommandCell.vue b/vue-options-api-demos/form/fieldarrayvalidation/CommandCell.vue
new file mode 100644
index 00000000..1154fc04
--- /dev/null
+++ b/vue-options-api-demos/form/fieldarrayvalidation/CommandCell.vue
@@ -0,0 +1,35 @@
+<template>
+<td>
+    <kbutton
+        type="button"
+        class="k-grid-remove-command"
+        @click="removeHandler">
+        Remove
+    </kbutton>
+</td>
+</template>
+<script>
+import { Button } from "@progress/kendo-vue-buttons";
+export default {
+    components: {
+        kbutton: Button
+    },
+    props: {
+        field: String,
+        dataItem: Object,
+        format: String,
+        className: String,
+        columnIndex: Number,
+        columnsCount: Number,
+        rowType: String,
+        level: Number,
+        expanded: Boolean,
+        editor: String
+    },
+    methods: {
+        removeHandler: function() {
+            this.$emit('remove', {dataItem:this.dataItem});
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/form/fieldarrayvalidation/FormContent.vue b/vue-options-api-demos/form/fieldarrayvalidation/FormContent.vue
new file mode 100644
index 00000000..c124329c
--- /dev/null
+++ b/vue-options-api-demos/form/fieldarrayvalidation/FormContent.vue
@@ -0,0 +1,61 @@
+<template>
+    <form-element :style="{ maxWidth: '650px' }">
+          <fieldset class="k-form-fieldset">
+          <fieldarray
+            :name="'users'"
+            :component="'myTemplate'"
+            :validator="arrayLengthValidator"
+          >
+            <template v-slot:myTemplate="{props}">
+                  <formgrid
+                    v-bind="props"
+                    @remove="props.onRemove"
+                    @unshift="props.onUnshift"
+                  ></formgrid>
+              </template>
+          </fieldarray>
+          </fieldset>
+          <div class="k-form-buttons">
+            <kbutton
+              type="submit"
+              :disabled="!kendoForm.allowSubmit"
+            >
+              Submit
+            </kbutton>
+               <kbutton
+               type="button"
+                @click="clear">Clear
+              </kbutton>
+          </div>
+        </form-element>
+</template>
+<script>
+import { Field, FieldArray, FormElement } from "@progress/kendo-vue-form";
+import { Button } from "@progress/kendo-vue-buttons";
+import FormGrid from "./FormGrid.vue";
+
+export default {
+    components: {
+      field: Field,
+      fieldarray: FieldArray,
+      'form-element': FormElement,
+      'kbutton': Button,
+      formgrid: FormGrid
+    },
+    inject: {
+      kendoForm: { default: {} },  
+    },
+    methods: {
+      arrayLengthValidator(value){
+          return value && value.length ? "" : "Please add at least one record.";
+      },
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      },
+      clear(){
+        this.kendoForm.onFormReset();
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/fieldarrayvalidation/FormGrid.vue b/vue-options-api-demos/form/fieldarrayvalidation/FormGrid.vue
new file mode 100644
index 00000000..64a0588b
--- /dev/null
+++ b/vue-options-api-demos/form/fieldarrayvalidation/FormGrid.vue
@@ -0,0 +1,67 @@
+<template>
+    <div>
+      <error v-if="visited && validationMessage">{{validationMessage}}</error>
+      <grid :data-items="value" :columns="columns">
+            <template v-slot:myTemplate="{props}">
+            <custom :data-item="props.dataItem" 
+                    @remove="onRemove"/>
+        </template>
+        <grid-toolbar>
+          <kbutton
+            title="Add new"
+            :theme-color="'primary'"
+            @click="onAdd"
+          >
+            Add new
+          </kbutton>
+        </grid-toolbar>
+      </grid>
+    </div>
+</template>
+<script>
+import { Field } from '@progress/kendo-vue-form';
+import CommandCell from './CommandCell.vue';
+import { Input } from "@progress/kendo-vue-inputs";
+import { Error } from "@progress/kendo-vue-labels";
+import { Grid, GridToolbar } from "@progress/kendo-vue-grid";
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    props: {
+         touched: Boolean,
+         label: String,
+         validationMessage: String,
+         hint: String,
+         id: String,
+         valid: Boolean,
+         value: Array,
+         visited: Boolean
+    },
+    components: {
+      error: Error,
+      grid: Grid,
+    'grid-toolbar': GridToolbar,
+    field: Field,
+     'custom': CommandCell,
+      'kbutton': Button
+    },
+    data() {
+        return {
+            input: Input,
+            columns: [
+                { field: 'name', title:'Name'},
+                { cell: 'myTemplate', width:'240px'}
+            ]
+        }
+    },
+    methods: {
+        onAdd (e) {
+            e.preventDefault();
+            this.$emit('unshift', { value: { name: "new item" } });
+        },
+        onRemove (cellProps){
+          this.$emit('remove', { index: cellProps.dataIndex });
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/form/fieldarrayvalidation/main.js b/vue-options-api-demos/form/fieldarrayvalidation/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/form/fieldarrayvalidation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/form/fieldarrayvalidation/main.vue b/vue-options-api-demos/form/fieldarrayvalidation/main.vue
new file mode 100644
index 00000000..cb5e3869
--- /dev/null
+++ b/vue-options-api-demos/form/fieldarrayvalidation/main.vue
@@ -0,0 +1,24 @@
+<template>
+    <k-form
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/fieldvalidation/FormContent.vue b/vue-options-api-demos/form/fieldvalidation/FormContent.vue
new file mode 100644
index 00000000..f0eb0151
--- /dev/null
+++ b/vue-options-api-demos/form/fieldvalidation/FormContent.vue
@@ -0,0 +1,73 @@
+<template>
+    <form-element :style="{ maxWidth: '650px' }">
+          <fieldset class="k-form-fieldset">
+           
+            <div class="mb-3">
+              <field
+                :name="'email'"
+                :type="'email'"
+                :component="'myTemplate'"
+                :label="'Email'"
+                :validator="emailValidator"
+              >
+               <template v-slot:myTemplate="{props}">
+                 <forminput
+                    v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  />
+              </template>
+              </field>
+            </div>
+          </fieldset>
+          <div class="k-form-buttons">
+           <kbutton
+              type="submit"
+              :disabled="!kendoForm.allowSubmit"
+            >
+              Submit
+            </kbutton>
+              <kbutton
+              type="button"
+                @click="clear">Clear
+              </kbutton>
+          </div>
+        </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import FormInput from "./FormInput.vue";
+import { Button } from '@progress/kendo-vue-buttons';
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const emailValidator = (value) =>
+  emailRegex.test(value) ? "" : "Please enter a valid email.";
+
+export default {
+    
+    components: {
+      field: Field,
+      'form-element': FormElement,
+      'forminput': FormInput,
+      'kbutton': Button
+    },
+    inject: {
+      kendoForm: { default: {} },  
+    },
+    data: function () {
+        return { 
+          emailValidator: emailValidator
+         };
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      },
+      clear(){
+        this.kendoForm.onFormReset();
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/fieldvalidation/FormInput.vue b/vue-options-api-demos/form/fieldvalidation/FormInput.vue
new file mode 100644
index 00000000..706d5702
--- /dev/null
+++ b/vue-options-api-demos/form/fieldvalidation/FormInput.vue
@@ -0,0 +1,84 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :disabled="disabled" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <kinput :style="{ width: '230px' }" 
+                :valid="valid"
+                :id="id"
+                :value="value"
+                :disabled="disabled"
+                :placeholder="placeholder"
+                @input="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        optional: Boolean,
+        disabled: Boolean,
+        placeholder: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      kinput: Input
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/fieldvalidation/main.js b/vue-options-api-demos/form/fieldvalidation/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/form/fieldvalidation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/form/fieldvalidation/main.vue b/vue-options-api-demos/form/fieldvalidation/main.vue
new file mode 100644
index 00000000..cb5e3869
--- /dev/null
+++ b/vue-options-api-demos/form/fieldvalidation/main.vue
@@ -0,0 +1,24 @@
+<template>
+    <k-form
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/formvalidation/FormContent.vue b/vue-options-api-demos/form/formvalidation/FormContent.vue
new file mode 100644
index 00000000..cc606c71
--- /dev/null
+++ b/vue-options-api-demos/form/formvalidation/FormContent.vue
@@ -0,0 +1,94 @@
+<template>
+    <form-element :style="{ maxWidth: '650px' }">
+          <fieldset class="k-form-fieldset">
+            <legend class="k-form-legend">
+              Please fill in the fields:
+            </legend>
+                <div v-if="kendoForm.visited &&
+              kendoForm.errors &&
+              kendoForm.errors.VALIDATION_SUMMARY" class="k-messagebox k-messagebox-error">
+                  {{kendoForm.errors.VALIDATION_SUMMARY}}
+                </div>
+            <div class="mb-3">
+               <field
+                :id="'user.firstName'"
+                :name="'user.firstName'"
+                :label="'first Name'"
+                :component="'myTemplate'"
+              >
+               <template v-slot:myTemplate="{props}">
+                  <forminput
+                    v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  />
+              </template>
+              </field>
+            </div>
+
+            <div class="mb-3">
+               <field
+                :id="'user.lastName'"
+                :name="'user.lastName'"
+                :label="'Last Name'"
+                :component="'myTemplate'"
+              >
+               <template v-slot:myTemplate="{props}">
+                  <forminput
+                    v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  />
+              </template>
+              </field>
+            </div>
+          </fieldset>
+          <div class="k-form-buttons">
+           <kbutton
+              type="submit"
+              :disabled="!kendoForm.allowSubmit"
+            >
+              Submit
+            </kbutton>
+              <kbutton
+              type="button"
+                @click="clear">Clear
+              </kbutton>
+          </div>
+        </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import { Input } from "@progress/kendo-vue-inputs";
+import FormInput from "./FormInput.vue";
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      field: Field,
+      'form-element': FormElement,
+      error: Error,
+      'forminput': FormInput,
+      'kbutton': Button
+    },
+    inject: {
+      kendoForm: { default: {} },  
+    },
+    data: function () {
+        return { 
+          kinput: Input
+         };
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      },
+      clear(){
+        this.kendoForm.onFormReset();
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/formvalidation/FormInput.vue b/vue-options-api-demos/form/formvalidation/FormInput.vue
new file mode 100644
index 00000000..706d5702
--- /dev/null
+++ b/vue-options-api-demos/form/formvalidation/FormInput.vue
@@ -0,0 +1,84 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :disabled="disabled" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <kinput :style="{ width: '230px' }" 
+                :valid="valid"
+                :id="id"
+                :value="value"
+                :disabled="disabled"
+                :placeholder="placeholder"
+                @input="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        optional: Boolean,
+        disabled: Boolean,
+        placeholder: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      kinput: Input
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/formvalidation/main.js b/vue-options-api-demos/form/formvalidation/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/form/formvalidation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/form/formvalidation/main.vue b/vue-options-api-demos/form/formvalidation/main.vue
new file mode 100644
index 00000000..1535ff29
--- /dev/null
+++ b/vue-options-api-demos/form/formvalidation/main.vue
@@ -0,0 +1,38 @@
+<template>
+    <k-form
+      :validator="firstOrLastNameValidator"
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+const firstOrLastNameValidator = (values) => {
+  if (values['user.firstName'] || values['user.lastName']) {
+    return;
+  }
+
+  return {
+    VALIDATION_SUMMARY: "Please fill at least one of the following fields.",
+    ["user.firstName"]:
+      "Please check the validation summary for more information.",
+    ["user.lastName"]:
+      "Please check the validation summary for more information.",
+  };
+};
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      firstOrLastNameValidator: firstOrLastNameValidator,
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/guideline/checkboxes/FormCheckbox.vue b/vue-options-api-demos/form/guideline/checkboxes/FormCheckbox.vue
new file mode 100644
index 00000000..9c415a82
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/checkboxes/FormCheckbox.vue
@@ -0,0 +1,84 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+        <span>
+          <checkbox 
+                :value="value"
+                :valid="valid"
+                :id="id"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus" />
+          </span>
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Checkbox } from "@progress/kendo-vue-inputs";
+
+export default {
+    props: {
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        disabled: Boolean,
+        optional: Boolean,
+        visited: Boolean,
+        modified: Boolean,
+        value: {
+             type: [Boolean, String],
+             default: false
+        }
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        klabel: Label,
+        checkbox: Checkbox
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/checkboxes/FormContent.vue b/vue-options-api-demos/form/guideline/checkboxes/FormContent.vue
new file mode 100644
index 00000000..34a2ba85
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/checkboxes/FormContent.vue
@@ -0,0 +1,111 @@
+<template>
+    <form-element :style="{ maxWidth: '650px' }">
+          <fieldset class="k-form-fieldset">
+              <field
+                  :id="'confirmationType'"
+                  :name="'confirmationType'"
+                  :label="'Type of Confirmation'"
+                  :hint="'Hint: Choose a way to receive a confirmation'"
+                  :component="'myTemplate'"
+                  :data-items="confirmationData"
+                >
+                <template v-slot:myTemplate="{props}">
+                    <formradiogroup
+                     v-bind="props"
+                      @change="props.onChange"
+                      @blur="props.onBlur"
+                      @focus="props.onFocus"
+                    ></formradiogroup>
+                </template>
+              </field>
+              <field
+                  :id="'gender'"
+                  :name="'gender'"
+                  :label="'Gender'"
+                  :layout="'horizontal'"
+                  :component="'myTemplate'"
+                  :data-items="genders"
+                >
+             <template v-slot:myTemplate="{props}">
+                    <formradiogroup
+                     v-bind="props"
+                      @change="props.onChange"
+                      @blur="props.onBlur"
+                      @focus="props.onFocus"
+                    ></formradiogroup>
+                </template>
+              </field>
+              <field
+                  :id="'terms'"
+                  :name="'terms'"
+                  :label="'I agree with terms and conditions'"
+                  :hint="'Hint: By checking this, you agree to our Terms&Conditions'"
+                  :component="'myTemplate'"
+                  :validator="termsValidator"
+                >
+                <template v-slot:myTemplate="{props}">
+                    <formcheckbox
+                      v-bind="props"
+                      @change="props.onChange"
+                      @blur="props.onBlur"
+                      @focus="props.onFocus"
+                    ></formcheckbox>
+                </template>
+              </field>
+            <div class="k-form-buttons">
+              <kbutton
+                :theme-color="'primary'"
+                :type="'submit'"
+                :disabled="!kendoForm.allowSubmit"
+              >
+                Submit
+              </kbutton>
+              <kbutton @click="clear">
+                  Clear
+              </kbutton>
+            </div>
+          </fieldset>
+        </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import FormCheckbox from "./FormCheckbox.vue";
+import FormRadioGroup from "./FormRadioGroup.vue";
+import { termsValidator } from './validators';
+import { Button } from "@progress/kendo-vue-buttons";
+import { genders } from "./data";
+
+export default {
+    
+    components: {
+      field: Field,
+      'form-element': FormElement,
+      formcheckbox: FormCheckbox,
+      formradiogroup: FormRadioGroup,
+      kbutton: Button
+    },
+    inject: {
+      kendoForm: { default: {} },  
+    },
+    data: function () {
+        return { 
+          
+          confirmationData: [
+            { label: "Phone Call", value: "phone" },
+            { label: "Via Email", value: "email" },
+          ],
+          genders: genders
+         };
+    },
+    methods: {
+      termsValidator: termsValidator,
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      },
+      clear(){
+        this.kendoForm.onFormReset();
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/guideline/checkboxes/FormRadioGroup.vue b/vue-options-api-demos/form/guideline/checkboxes/FormRadioGroup.vue
new file mode 100644
index 00000000..0dc1d7ae
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/checkboxes/FormRadioGroup.vue
@@ -0,0 +1,107 @@
+<template>
+    <fieldwrapper>
+        <klabel
+            :class="'k-form-label'"
+            :id="labelId"
+            :editor-id="id"
+            :editor-valid="valid"
+            :editor-disabled="disabled"
+        >
+            {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <radiogroup
+                :name="name"
+                :aria-describedby="describedBy"
+                :label="label"
+                :valid="valid"
+                :value="value"
+                :layout="layout"
+                :data-items="dataItems"
+                :id="id"
+                :checked="value"
+                @change="handleChange"
+            />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { RadioGroup } from "@progress/kendo-vue-inputs";
+export default {
+    name: 'FormRadioGroup',
+    props: {
+         name: String,
+         touched: Boolean,
+         label: String,
+         validationMessage: String,
+         hint: String,
+         id: String,
+         valid: {
+            type: Boolean,
+            default: true
+         },
+         disabled: Boolean,
+         layout: String,
+         dataItems: Array,
+         value: {
+             type: String,
+             default: null
+         }
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      radiogroup: RadioGroup
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        },
+        describedBy(){
+            return  `${this.hintId} ${this.errorId}`
+        },
+        labelId(){
+            return this.label ? `${this.id}_label` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/checkboxes/data.js b/vue-options-api-demos/form/guideline/checkboxes/data.js
new file mode 100644
index 00000000..1b3905df
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/checkboxes/data.js
@@ -0,0 +1,212 @@
+export const genders = [
+    { label: 'Male', value: 'male' },
+    { label: 'Female', value: 'female' },
+    { label: 'Other', value: 'other' }
+];
+
+export const countries = [
+    'Albania',
+    'Andorra',
+    'Armenia',
+    'Austria',
+    'Azerbaijan',
+    'Belarus',
+    'Belgium',
+    'Bosnia & Herzegovina',
+    'Bulgaria',
+    'Croatia',
+    'Cyprus',
+    'Czech Republic',
+    'Denmark',
+    'Estonia',
+    'Finland',
+    'France',
+    'Georgia',
+    'Germany',
+    'Greece',
+    'Hungary',
+    'Iceland',
+    'Ireland',
+    'Italy',
+    'Kosovo',
+    'Latvia',
+    'Liechtenstein',
+    'Lithuania',
+    'Luxembourg',
+    'Macedonia',
+    'Malta',
+    'Moldova',
+    'Monaco',
+    'Montenegro',
+    'Netherlands',
+    'Norway',
+    'Poland',
+    'Portugal',
+    'Romania',
+    'Russia',
+    'San Marino',
+    'Serbia',
+    'Slovakia',
+    'Slovenia',
+    'Spain',
+    'Sweden',
+    'Switzerland',
+    'Turkey',
+    'Ukraine',
+    'United Kingdom',
+    'Vatican City'
+];
+
+export const sizes = [
+    'X-Small',
+    'Small',
+    'Medium',
+    'Large',
+    'X-Large',
+    '2X-Large'
+];
+
+export const sports = [
+    'Baseball',
+    'Basketball',
+    'Cricket',
+    'Field Hockey',
+    'Football',
+    'Table Tennis',
+    'Tennis',
+    'Volleyball'
+];
+
+export const equipment = [
+    {
+        text: 'Furniture',
+        id: 1,
+        items: [
+            { text: 'Tables & Chairs', id: 2 },
+            { text: 'Sofas', id: 3 },
+            { text: 'Occasional Furniture', id: 4 }
+        ]
+    },
+    {
+        text: 'Decor',
+        id: 5,
+        items: [
+            { text: 'Bed Linen', id: 6 },
+            { text: 'Curtains & Blinds', id: 7 },
+            { text: 'Carpets', id: 8 }
+        ]
+    }
+];
+
+export const employees = [
+    {
+        id: 1,
+        name: 'Daryl Sweeney',
+        reportsTo: null,
+        phone: '(555) 924-9726',
+        extension: 8253,
+        hireDate: new Date('2012-02-07T20:00:00.000Z'),
+        fullTime: true,
+        position: 'CEO',
+        timeInPosition: 2
+    },
+    {
+        id: 2,
+        name: 'Guy Wooten',
+        reportsTo: 1,
+        phone: '(438) 738-4935',
+        extension: 1155,
+        hireDate: new Date('2010-03-03T20:00:00.000Z'),
+        fullTime: true,
+        position: 'Chief Technical Officer',
+        timeInPosition: 1
+    },
+    {
+        id: 3,
+        name: 'Priscilla Frank',
+        reportsTo: 1,
+        phone: '(278) 927-2684',
+        extension: 4183,
+        hireDate: new Date('2014-11-30T00:00:00.000Z'),
+        fullTime: true,
+        position: 'Chief Product Officer',
+        timeInPosition: 2
+    },
+    {
+        id: 4,
+        name: 'Ursula Holmes',
+        reportsTo: 3,
+        phone: '(302) 760-2034',
+        extension: 2226,
+        hireDate: new Date('2011-06-06T00:00:00.000Z'),
+        fullTime: true,
+        position: 'EVP, Product Strategy',
+        timeInPosition: 4
+    },
+    {
+        id: 5,
+        name: 'Anika Vega',
+        reportsTo: 1,
+        phone: '(910) 714-1802',
+        extension: 6353,
+        hireDate: new Date('2010-02-25T00:00:00.000Z'),
+        fullTime: true,
+        position: 'Chief Process Officer',
+        timeInPosition: 5
+    },
+    {
+        id: 6,
+        name: 'Moses Duncan',
+        reportsTo: 64,
+        phone: '(421) 611-4814',
+        extension: 669,
+        hireDate: new Date('2010-05-24T00:00:00.000Z'),
+        fullTime: true,
+        position: 'Software Developer',
+        timeInPosition: 6
+    },
+    {
+        id: 7,
+        name: 'Nevada Hart',
+        reportsTo: 1,
+        phone: '(254) 220-1576',
+        extension: 6649,
+        hireDate: new Date('2015-08-17T00:00:00.000Z'),
+        fullTime: true,
+        position: 'Chief Financial Officer',
+        timeInPosition: 6
+    },
+    {
+        id: 8,
+        name: 'Hunter Fry',
+        reportsTo: 1,
+        phone: '(766) 358-9858',
+        extension: 3741,
+        hireDate: new Date('2011-02-12T00:00:00.000Z'),
+        fullTime: false,
+        position: 'General Counsel',
+        timeInPosition: 3
+    },
+    {
+        id: 9,
+        name: 'Kuame Carrillo',
+        reportsTo: 8,
+        phone: '(192) 383-1305',
+        extension: 9228,
+        hireDate: new Date('2011-02-22T00:00:00.000Z'),
+        fullTime: true,
+        position: 'Associate General Councel',
+        timeInPosition: 0
+    },
+    {
+        id: 10,
+        name: 'Vernon Ballard',
+        reportsTo: 5,
+        phone: '(702) 185-8890',
+        extension: 9242,
+        hireDate: new Date('2015-06-26T00:00:00.000Z'),
+        fullTime: true,
+        position: 'Director Facilities',
+        timeInPosition: 2
+    }
+];
diff --git a/vue-options-api-demos/form/guideline/checkboxes/main.js b/vue-options-api-demos/form/guideline/checkboxes/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/checkboxes/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/form/guideline/checkboxes/main.vue b/vue-options-api-demos/form/guideline/checkboxes/main.vue
new file mode 100644
index 00000000..798b6d8d
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/checkboxes/main.vue
@@ -0,0 +1,23 @@
+<template>
+    <k-form
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/guideline/checkboxes/validators.js b/vue-options-api-demos/form/guideline/checkboxes/validators.js
new file mode 100644
index 00000000..b0779c1d
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/checkboxes/validators.js
@@ -0,0 +1,82 @@
+import { getter } from '@progress/kendo-vue-common';
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const phoneRegex = new RegExp(/^[0-9 ()+-]+$/);
+const ccardRegex = new RegExp(/^[0-9-]+$/);
+const cvcRegex = new RegExp(/^[0-9]+$/);
+
+export const termsValidator = value =>
+  value ? '' : "It's required to agree with Terms and Conditions.";
+export const emailValidator = value =>
+  !value
+    ? 'Email field is required.'
+    : emailRegex.test(value)
+    ? ''
+    : 'Email is not in a valid format.';
+export const nameValidator = value =>
+  !value
+    ? 'Full Name is required'
+    : value.length < 7
+    ? 'Full Name should be at least 7 characters long.'
+    : '';
+export const userNameValidator = value =>
+  !value
+    ? 'User Name is required'
+    : value.length < 5
+    ? 'User name should be at least 5 characters long.'
+    : '';
+export const phoneValidator = value =>
+  !value
+    ? 'Phone number is required.'
+    : phoneRegex.test(value)
+    ? ''
+    : 'Not a valid phone number.';
+export const cardValidator = value =>
+  !value
+    ? 'Credit card number is required. '
+    : ccardRegex.test(value)
+    ? ''
+    : 'Not a valid credit card number format.';
+export const cvcValidator = value =>
+  !value
+    ? 'CVC code is required,'
+    : cvcRegex.test(value) || value.length !== 3
+    ? ''
+    : 'Not a valid CVC code format.';
+export const guestsValidator = value =>
+  !value
+    ? 'Number of guests is required'
+    : value <= 5
+    ? ''
+    : 'Maximum 5 guests';
+export const nightsValidator = value =>
+  value ? '' : 'Number of Nights is required.';
+export const arrivalDateValidator = value =>
+  value ? '' : 'Arrival Date is required.';
+export const colorValidator = value => (value ? '' : 'Color is required.');
+export const requiredValidator = value =>
+  value ? '' : 'Error: This field is required.';
+export const passwordValidator = value =>
+  value && value.length > 8 ? '' : 'Password must be at least 8 symbols.';
+export const addressValidator = value => (value ? '' : 'Address is required.');
+
+const userNameGetter = getter('username');
+const emailGetter = getter('email');
+
+export const formValidator = values => {
+  const userName = userNameGetter(values);
+  const emailValue = emailGetter(values);
+
+  if (userName && emailValue && emailRegex.test(emailValue)) {
+    return {};
+  }
+
+  return {
+    VALIDATION_SUMMARY: 'Please fill in the following fields.',
+    ['username']: !userName ? 'User Name is required.' : '',
+    ['email']:
+      emailValue && emailRegex.test(emailValue)
+        ? ''
+        : 'Email is required and should be in a valid format.'
+  };
+};
diff --git a/vue-options-api-demos/form/guideline/datepickers/FormContent.vue b/vue-options-api-demos/form/guideline/datepickers/FormContent.vue
new file mode 100644
index 00000000..e120ee1b
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/datepickers/FormContent.vue
@@ -0,0 +1,127 @@
+<template>
+    <form-element :style="{ width: '400px' }">
+          <fieldset class="k-form-fieldset">
+              <field    
+                  :id="'appointment'"
+                  :name="'appointment'"
+                  :label="'Appointment Date and Time'"
+                  :hint="'Hint: Select Date and Time for your appointment'"
+                  :component="'myTemplate'"
+                  :validator="requiredValidator"
+                >
+                <template v-slot:myTemplate="{props}">
+                    <formdatetimepicker
+                      v-bind="props"
+                      @change="props.onChange"
+                      @blur="props.onBlur"
+                      @focus="props.onFocus"
+                    ></formdatetimepicker>
+                </template>
+              </field>
+              <field    
+                  :id="'bdate'"
+                  :name="'bdate'"
+                  :label="'Birth Date'"
+                  :component="'myTemplate'"
+                  :validator="requiredValidator"
+                >
+                <template v-slot:myTemplate="{props}">
+                    <formdateinput
+                      v-bind="props"
+                      @change="props.onChange"
+                      @blur="props.onBlur"
+                      @focus="props.onFocus"
+                    ></formdateinput>
+                </template>
+              </field>
+              <field    
+                  :id="'btime'"
+                  :name="'btime'"
+                  :label="'Time of Birth'"
+                  :hint="'Hint: Select your time of birth'"
+                  :component="'myTemplate'"
+                  :validator="requiredValidator"
+                >
+                <template v-slot:myTemplate="{props}">
+                    <formtimepicker
+                      v-bind="props"
+                      @change="props.onChange"
+                      @blur="props.onBlur"
+                      @focus="props.onFocus"
+                    ></formtimepicker>
+                </template>
+              </field>
+              <field    
+                  :id="'gdate'"
+                  :name="'gdate'"
+                  :label="'Date of Graduation'"
+                  :component="'myTemplate'"
+                  :validator="requiredValidator"
+                >
+                <template v-slot:myTemplate="{props}">
+                    <formdatepicker
+                      v-bind="props"
+                      @change="props.onChange"
+                      @blur="props.onBlur"
+                      @focus="props.onFocus"
+                    ></formdatepicker>
+                </template>
+              </field>
+            <div class="k-form-buttons">
+              <kbutton
+                :theme-color="'primary'"
+                :type="'submit'"
+                :disabled="!kendoForm.allowSubmit"
+              >
+                Submit
+              </kbutton>
+              <kbutton @click="clear">
+                  Clear
+              </kbutton>
+            </div>
+          </fieldset>
+        </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import FormDatePicker from "./FormDatePicker.vue";
+import FormDateTimePicker from "./FormDateTimePicker.vue";
+import FormDateInput from "./FormDateInput.vue";
+import FormTimePicker from "./FormTimePicker.vue";
+
+import { Button } from "@progress/kendo-vue-buttons";
+
+import {
+  requiredValidator
+} from "./validators";
+
+export default {
+    
+    components: {
+      field: Field,
+      'form-element': FormElement,
+      formdatepicker: FormDatePicker,
+      formdatetimepicker: FormDateTimePicker,
+      formdateinput: FormDateInput,
+      formtimepicker:FormTimePicker,
+      kbutton: Button
+    },
+    inject: {
+      kendoForm: { default: {} },  
+    },
+    data: function () {
+        return { 
+          requiredValidator
+         };
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      },
+      clear(){
+        this.kendoForm.onFormReset();
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/guideline/datepickers/FormDateInput.vue b/vue-options-api-demos/form/guideline/datepickers/FormDateInput.vue
new file mode 100644
index 00000000..29cf0d01
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/datepickers/FormDateInput.vue
@@ -0,0 +1,79 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <dateinput :style="{ width: '230px' }" 
+                :valid="valid"
+                :value="value"
+                :id="id"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { DateInput } from '@progress/kendo-vue-dateinputs';
+export default {
+    props: {
+         touched: Boolean,
+         label: String,
+         validationMessage: String,
+         hint: String,
+         id: String,
+         valid: Boolean,
+         value: {
+             type: Date,
+             default: null
+         }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      dateinput: DateInput
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/datepickers/FormDatePicker.vue b/vue-options-api-demos/form/guideline/datepickers/FormDatePicker.vue
new file mode 100644
index 00000000..af21ec48
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/datepickers/FormDatePicker.vue
@@ -0,0 +1,80 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <datepicker :style="{ width: '230px' }" 
+                :value="value"
+                :valid="valid"
+                :id="id"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else :direction="hintDirection">{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+export default {
+    props: {
+        hintDirection: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: Date,
+            default: null
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      datepicker: DatePicker
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/datepickers/FormDateTimePicker.vue b/vue-options-api-demos/form/guideline/datepickers/FormDateTimePicker.vue
new file mode 100644
index 00000000..03e66bc8
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/datepickers/FormDateTimePicker.vue
@@ -0,0 +1,79 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <datetimepicker :style="{ width: '230px' }" 
+                :valid="valid"
+                :value="value"
+                :id="id"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { DateTimePicker } from '@progress/kendo-vue-dateinputs';
+export default {
+    props: {
+         touched: Boolean,
+         label: String,
+         validationMessage: String,
+         hint: String,
+         id: String,
+         valid: Boolean,
+         value: {
+             type: Date,
+             default: null
+         }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      datetimepicker: DateTimePicker
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/datepickers/FormTimePicker.vue b/vue-options-api-demos/form/guideline/datepickers/FormTimePicker.vue
new file mode 100644
index 00000000..b76cc70c
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/datepickers/FormTimePicker.vue
@@ -0,0 +1,79 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <timepicker :style="{ width: '230px' }" 
+                :valid="valid"
+                :value="value"
+                :id="id"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { TimePicker } from '@progress/kendo-vue-dateinputs';
+export default {
+    props: {
+         touched: Boolean,
+         label: String,
+         validationMessage: String,
+         hint: String,
+         id: String,
+         valid: Boolean,
+        value: {
+             type: Date,
+             default: null
+         }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      timepicker: TimePicker
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/datepickers/main.js b/vue-options-api-demos/form/guideline/datepickers/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/datepickers/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/form/guideline/datepickers/main.vue b/vue-options-api-demos/form/guideline/datepickers/main.vue
new file mode 100644
index 00000000..798b6d8d
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/datepickers/main.vue
@@ -0,0 +1,23 @@
+<template>
+    <k-form
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/guideline/datepickers/validators.js b/vue-options-api-demos/form/guideline/datepickers/validators.js
new file mode 100644
index 00000000..b0779c1d
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/datepickers/validators.js
@@ -0,0 +1,82 @@
+import { getter } from '@progress/kendo-vue-common';
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const phoneRegex = new RegExp(/^[0-9 ()+-]+$/);
+const ccardRegex = new RegExp(/^[0-9-]+$/);
+const cvcRegex = new RegExp(/^[0-9]+$/);
+
+export const termsValidator = value =>
+  value ? '' : "It's required to agree with Terms and Conditions.";
+export const emailValidator = value =>
+  !value
+    ? 'Email field is required.'
+    : emailRegex.test(value)
+    ? ''
+    : 'Email is not in a valid format.';
+export const nameValidator = value =>
+  !value
+    ? 'Full Name is required'
+    : value.length < 7
+    ? 'Full Name should be at least 7 characters long.'
+    : '';
+export const userNameValidator = value =>
+  !value
+    ? 'User Name is required'
+    : value.length < 5
+    ? 'User name should be at least 5 characters long.'
+    : '';
+export const phoneValidator = value =>
+  !value
+    ? 'Phone number is required.'
+    : phoneRegex.test(value)
+    ? ''
+    : 'Not a valid phone number.';
+export const cardValidator = value =>
+  !value
+    ? 'Credit card number is required. '
+    : ccardRegex.test(value)
+    ? ''
+    : 'Not a valid credit card number format.';
+export const cvcValidator = value =>
+  !value
+    ? 'CVC code is required,'
+    : cvcRegex.test(value) || value.length !== 3
+    ? ''
+    : 'Not a valid CVC code format.';
+export const guestsValidator = value =>
+  !value
+    ? 'Number of guests is required'
+    : value <= 5
+    ? ''
+    : 'Maximum 5 guests';
+export const nightsValidator = value =>
+  value ? '' : 'Number of Nights is required.';
+export const arrivalDateValidator = value =>
+  value ? '' : 'Arrival Date is required.';
+export const colorValidator = value => (value ? '' : 'Color is required.');
+export const requiredValidator = value =>
+  value ? '' : 'Error: This field is required.';
+export const passwordValidator = value =>
+  value && value.length > 8 ? '' : 'Password must be at least 8 symbols.';
+export const addressValidator = value => (value ? '' : 'Address is required.');
+
+const userNameGetter = getter('username');
+const emailGetter = getter('email');
+
+export const formValidator = values => {
+  const userName = userNameGetter(values);
+  const emailValue = emailGetter(values);
+
+  if (userName && emailValue && emailRegex.test(emailValue)) {
+    return {};
+  }
+
+  return {
+    VALIDATION_SUMMARY: 'Please fill in the following fields.',
+    ['username']: !userName ? 'User Name is required.' : '',
+    ['email']:
+      emailValue && emailRegex.test(emailValue)
+        ? ''
+        : 'Email is required and should be in a valid format.'
+  };
+};
diff --git a/vue-options-api-demos/form/guideline/disabled/FormContent.vue b/vue-options-api-demos/form/guideline/disabled/FormContent.vue
new file mode 100644
index 00000000..b8a61db6
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/disabled/FormContent.vue
@@ -0,0 +1,82 @@
+<template>
+    <form-element :style="{ width: '400px' }" >
+          <fieldset class="k-form-fieldset">
+              <field
+                :id="'ownerName'"
+                :name="'ownerName'"
+                :label="'Owner Name'"
+                :hint="'Hint: Disabled field'"
+                :component="'myTemplate'"
+                :disabled="true"
+              >
+               <template v-slot:myTemplate="{props}">
+                  <forminput
+                     v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  />
+              </template>
+              </field>
+              <field
+                :id="'phoneNumber'"
+                :name="'phoneNumber'"
+                :label="'Phone Number'"
+                :mask="'(999) 000-00-00-00'"
+                :hint="'Hint: Readonly field'"
+                :readonly="true"
+                :component="'myTemplate'"
+              >
+               <template v-slot:myTemplate="{props}">
+                  <formmaskedtextbox
+                     v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  ></formmaskedtextbox>
+              </template>
+              </field>
+            <div class="k-form-buttons">
+              <kbutton
+                :theme-color="'primary'"
+                :type="'submit'"
+                :disabled="!kendoForm.allowSubmit"
+              >
+                Submit
+              </kbutton>
+              <kbutton @click="clear">
+                  Clear
+              </kbutton>
+            </div>
+          </fieldset>
+        </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import FormInput from "./FormInput.vue";
+import FormMaskedTextBox from "./FormMaskedTextBox.vue";
+import { Button } from "@progress/kendo-vue-buttons";
+
+export default {
+    
+    components: {
+      field: Field,
+      'form-element': FormElement,
+      forminput: FormInput,
+      formmaskedtextbox: FormMaskedTextBox,
+      kbutton: Button
+    },
+    inject: {
+      kendoForm: { default: {} },  
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      },
+      clear(){
+        this.kendoForm.onFormReset();
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/guideline/disabled/FormInput.vue b/vue-options-api-demos/form/guideline/disabled/FormInput.vue
new file mode 100644
index 00000000..706d5702
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/disabled/FormInput.vue
@@ -0,0 +1,84 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :disabled="disabled" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <kinput :style="{ width: '230px' }" 
+                :valid="valid"
+                :id="id"
+                :value="value"
+                :disabled="disabled"
+                :placeholder="placeholder"
+                @input="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        optional: Boolean,
+        disabled: Boolean,
+        placeholder: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      kinput: Input
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/disabled/FormMaskedTextBox.vue b/vue-options-api-demos/form/guideline/disabled/FormMaskedTextBox.vue
new file mode 100644
index 00000000..395d904f
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/disabled/FormMaskedTextBox.vue
@@ -0,0 +1,88 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'"
+                :editor-id="id" 
+                :editor-valid="valid"
+                :optional="optional"
+                >
+            {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <maskedtextbox :style="{ width: '230px' }" 
+                :valid="valid"
+                :value="value"
+                :id="id"
+                :mask="mask"
+                :readonly="readonly"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { MaskedTextBox } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        readonly: Boolean,
+        optional: Boolean,
+        mask: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      maskedtextbox: MaskedTextBox
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/disabled/main.js b/vue-options-api-demos/form/guideline/disabled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/form/guideline/disabled/main.vue b/vue-options-api-demos/form/guideline/disabled/main.vue
new file mode 100644
index 00000000..6ac6d672
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/disabled/main.vue
@@ -0,0 +1,27 @@
+<template>
+    <k-form
+      :initial-values="{
+        ownerName: 'Chuck Norris',
+        phoneNumber: '(359) 884-12-33-21',
+      }"
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/guideline/dropdowns/FormAutoComplete.vue b/vue-options-api-demos/form/guideline/dropdowns/FormAutoComplete.vue
new file mode 100644
index 00000000..9a1344e8
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/dropdowns/FormAutoComplete.vue
@@ -0,0 +1,80 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <autocomplete :style="{ width: '230px' }" 
+                :data-items="data" 
+                :valid="valid"
+                :value="value"
+                :id="id"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { AutoComplete } from "@progress/kendo-vue-dropdowns";
+export default {
+    props: {
+        data: Object,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+             type: String,
+             default: ''
+        }
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        klabel: Label,
+        autocomplete: AutoComplete
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/dropdowns/FormComboBox.vue b/vue-options-api-demos/form/guideline/dropdowns/FormComboBox.vue
new file mode 100644
index 00000000..748a36ba
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/dropdowns/FormComboBox.vue
@@ -0,0 +1,87 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+             <combobox
+          :style="{ width: '230px' }" 
+                :name="name"
+                :data-items="data" 
+                :valid="valid"
+                :value="value"
+                :id="id"
+                :text-field="textField"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { ComboBox } from "@progress/kendo-vue-dropdowns";
+export default {
+    props: {
+        textField: String,
+        data: Object,
+        name: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+             type: Object,
+             default: function(){
+                 return {};
+             }
+        }
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        klabel: Label,
+        combobox: ComboBox
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/dropdowns/FormContent.vue b/vue-options-api-demos/form/guideline/dropdowns/FormContent.vue
new file mode 100644
index 00000000..51c3a2d4
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/dropdowns/FormContent.vue
@@ -0,0 +1,130 @@
+<template>
+  <FormElement :style="{ width: '400px' }">
+    <fieldset class="k-form-fieldset">
+      <Field
+        :id="'countryselected'"
+        :name="'countryselected'"
+        :label="'Country'"
+        :hint="'Hint: Only Eroupean countries'"
+        :component="'myTemplate'"
+        :data="countries"
+        :validator="requiredValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <FormAutoComplete
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></FormAutoComplete>
+        </template>
+      </Field>
+      <Field
+        :id="'genderseleceted'"
+        :name="'genderseleceted'"
+        :label="'Gender'"
+        :component="'myTemplate'"
+        :data="genders"
+        :textField="'label'"
+        :validator="requiredValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <FormComboBox
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></FormComboBox>
+        </template>
+      </Field>
+      <Field
+        :id="'dropdownlist'"
+        :name="'dropdownlist'"
+        :label="'T-Shirt Size'"
+        :component="'myTemplate'"
+        :data="sizes"
+        :validator="requiredValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <FormDropDownList
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></FormDropDownList>
+        </template>
+      </Field>
+      <Field
+        :id="'multiselect'"
+        :name="'multiselect'"
+        :label="'Sports'"
+        :component="'myTemplate'"
+        :data="sports"
+        :validator="requiredValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <FormMultiSelect
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></FormMultiSelect>
+        </template>
+      </Field>
+      <div class="k-form-buttons">
+        <kbutton
+          :theme-color="'primary'"
+          :type="'submit'"
+          :disabled="!kendoForm.allowSubmit"
+        >
+          Submit
+        </kbutton>
+        <kbutton @click="clear"> Clear </kbutton>
+      </div>
+    </fieldset>
+  </FormElement>
+</template>
+<script>
+import { Field, FormElement } from '@progress/kendo-vue-form';
+import FormAutoComplete from './FormAutoComplete.vue';
+import FormComboBox from './FormComboBox.vue';
+import FormDropDownList from './FormDropDownList.vue';
+import FormMultiSelect from './FormMultiSelect.vue';
+
+import { Button } from '@progress/kendo-vue-buttons';
+import { countries, genders, sizes, sports } from './data';
+
+import { requiredValidator } from './validators';
+
+export default {
+  components: {
+    Field,
+    FormElement,
+    FormAutoComplete,
+    FormComboBox,
+    FormDropDownList,
+    FormMultiSelect,
+    kbutton: Button,
+  },
+  inject: {
+    kendoForm: { default: {} },
+  },
+  data: function () {
+    return {
+      requiredValidator,
+      genders: genders,
+      countries: countries,
+      sizes: sizes,
+      sports: sports,
+    };
+  },
+  methods: {
+    handleSubmit(dataItem) {
+      alert(JSON.stringify(dataItem, null, 2));
+    },
+    clear() {
+      this.kendoForm.onFormReset();
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/form/guideline/dropdowns/FormDropDownList.vue b/vue-options-api-demos/form/guideline/dropdowns/FormDropDownList.vue
new file mode 100644
index 00000000..ad567de3
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/dropdowns/FormDropDownList.vue
@@ -0,0 +1,82 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+             <dropdownlist
+          :style="{ width: '230px' }" 
+                :data-items="data" 
+                :valid="valid"
+                :value="value"
+                :id="id"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+export default {
+    props: {
+        textField: String,
+        data: Object,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+             type: String,
+             default: ''
+        }
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        klabel: Label,
+        dropdownlist: DropDownList
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/dropdowns/FormMultiSelect.vue b/vue-options-api-demos/form/guideline/dropdowns/FormMultiSelect.vue
new file mode 100644
index 00000000..800a724b
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/dropdowns/FormMultiSelect.vue
@@ -0,0 +1,82 @@
+<template>
+  <fieldwrapper>
+    <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <MultiSelect
+        :style="{ width: '230px' }"
+        :data-items="data"
+        :valid="valid"
+        :id="id"
+        :value="value"
+        @change="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { MultiSelect } from '@progress/kendo-vue-dropdowns';
+export default {
+  props: {
+    textField: String,
+    data: Object,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: Array,
+      default: [],
+    },
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    MultiSelect,
+  },
+  emits: {
+    input: null,
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/form/guideline/dropdowns/data.js b/vue-options-api-demos/form/guideline/dropdowns/data.js
new file mode 100644
index 00000000..1b3905df
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/dropdowns/data.js
@@ -0,0 +1,212 @@
+export const genders = [
+    { label: 'Male', value: 'male' },
+    { label: 'Female', value: 'female' },
+    { label: 'Other', value: 'other' }
+];
+
+export const countries = [
+    'Albania',
+    'Andorra',
+    'Armenia',
+    'Austria',
+    'Azerbaijan',
+    'Belarus',
+    'Belgium',
+    'Bosnia & Herzegovina',
+    'Bulgaria',
+    'Croatia',
+    'Cyprus',
+    'Czech Republic',
+    'Denmark',
+    'Estonia',
+    'Finland',
+    'France',
+    'Georgia',
+    'Germany',
+    'Greece',
+    'Hungary',
+    'Iceland',
+    'Ireland',
+    'Italy',
+    'Kosovo',
+    'Latvia',
+    'Liechtenstein',
+    'Lithuania',
+    'Luxembourg',
+    'Macedonia',
+    'Malta',
+    'Moldova',
+    'Monaco',
+    'Montenegro',
+    'Netherlands',
+    'Norway',
+    'Poland',
+    'Portugal',
+    'Romania',
+    'Russia',
+    'San Marino',
+    'Serbia',
+    'Slovakia',
+    'Slovenia',
+    'Spain',
+    'Sweden',
+    'Switzerland',
+    'Turkey',
+    'Ukraine',
+    'United Kingdom',
+    'Vatican City'
+];
+
+export const sizes = [
+    'X-Small',
+    'Small',
+    'Medium',
+    'Large',
+    'X-Large',
+    '2X-Large'
+];
+
+export const sports = [
+    'Baseball',
+    'Basketball',
+    'Cricket',
+    'Field Hockey',
+    'Football',
+    'Table Tennis',
+    'Tennis',
+    'Volleyball'
+];
+
+export const equipment = [
+    {
+        text: 'Furniture',
+        id: 1,
+        items: [
+            { text: 'Tables & Chairs', id: 2 },
+            { text: 'Sofas', id: 3 },
+            { text: 'Occasional Furniture', id: 4 }
+        ]
+    },
+    {
+        text: 'Decor',
+        id: 5,
+        items: [
+            { text: 'Bed Linen', id: 6 },
+            { text: 'Curtains & Blinds', id: 7 },
+            { text: 'Carpets', id: 8 }
+        ]
+    }
+];
+
+export const employees = [
+    {
+        id: 1,
+        name: 'Daryl Sweeney',
+        reportsTo: null,
+        phone: '(555) 924-9726',
+        extension: 8253,
+        hireDate: new Date('2012-02-07T20:00:00.000Z'),
+        fullTime: true,
+        position: 'CEO',
+        timeInPosition: 2
+    },
+    {
+        id: 2,
+        name: 'Guy Wooten',
+        reportsTo: 1,
+        phone: '(438) 738-4935',
+        extension: 1155,
+        hireDate: new Date('2010-03-03T20:00:00.000Z'),
+        fullTime: true,
+        position: 'Chief Technical Officer',
+        timeInPosition: 1
+    },
+    {
+        id: 3,
+        name: 'Priscilla Frank',
+        reportsTo: 1,
+        phone: '(278) 927-2684',
+        extension: 4183,
+        hireDate: new Date('2014-11-30T00:00:00.000Z'),
+        fullTime: true,
+        position: 'Chief Product Officer',
+        timeInPosition: 2
+    },
+    {
+        id: 4,
+        name: 'Ursula Holmes',
+        reportsTo: 3,
+        phone: '(302) 760-2034',
+        extension: 2226,
+        hireDate: new Date('2011-06-06T00:00:00.000Z'),
+        fullTime: true,
+        position: 'EVP, Product Strategy',
+        timeInPosition: 4
+    },
+    {
+        id: 5,
+        name: 'Anika Vega',
+        reportsTo: 1,
+        phone: '(910) 714-1802',
+        extension: 6353,
+        hireDate: new Date('2010-02-25T00:00:00.000Z'),
+        fullTime: true,
+        position: 'Chief Process Officer',
+        timeInPosition: 5
+    },
+    {
+        id: 6,
+        name: 'Moses Duncan',
+        reportsTo: 64,
+        phone: '(421) 611-4814',
+        extension: 669,
+        hireDate: new Date('2010-05-24T00:00:00.000Z'),
+        fullTime: true,
+        position: 'Software Developer',
+        timeInPosition: 6
+    },
+    {
+        id: 7,
+        name: 'Nevada Hart',
+        reportsTo: 1,
+        phone: '(254) 220-1576',
+        extension: 6649,
+        hireDate: new Date('2015-08-17T00:00:00.000Z'),
+        fullTime: true,
+        position: 'Chief Financial Officer',
+        timeInPosition: 6
+    },
+    {
+        id: 8,
+        name: 'Hunter Fry',
+        reportsTo: 1,
+        phone: '(766) 358-9858',
+        extension: 3741,
+        hireDate: new Date('2011-02-12T00:00:00.000Z'),
+        fullTime: false,
+        position: 'General Counsel',
+        timeInPosition: 3
+    },
+    {
+        id: 9,
+        name: 'Kuame Carrillo',
+        reportsTo: 8,
+        phone: '(192) 383-1305',
+        extension: 9228,
+        hireDate: new Date('2011-02-22T00:00:00.000Z'),
+        fullTime: true,
+        position: 'Associate General Councel',
+        timeInPosition: 0
+    },
+    {
+        id: 10,
+        name: 'Vernon Ballard',
+        reportsTo: 5,
+        phone: '(702) 185-8890',
+        extension: 9242,
+        hireDate: new Date('2015-06-26T00:00:00.000Z'),
+        fullTime: true,
+        position: 'Director Facilities',
+        timeInPosition: 2
+    }
+];
diff --git a/vue-options-api-demos/form/guideline/dropdowns/main.js b/vue-options-api-demos/form/guideline/dropdowns/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/dropdowns/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/form/guideline/dropdowns/main.vue b/vue-options-api-demos/form/guideline/dropdowns/main.vue
new file mode 100644
index 00000000..798b6d8d
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/dropdowns/main.vue
@@ -0,0 +1,23 @@
+<template>
+    <k-form
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/guideline/dropdowns/validators.js b/vue-options-api-demos/form/guideline/dropdowns/validators.js
new file mode 100644
index 00000000..b0779c1d
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/dropdowns/validators.js
@@ -0,0 +1,82 @@
+import { getter } from '@progress/kendo-vue-common';
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const phoneRegex = new RegExp(/^[0-9 ()+-]+$/);
+const ccardRegex = new RegExp(/^[0-9-]+$/);
+const cvcRegex = new RegExp(/^[0-9]+$/);
+
+export const termsValidator = value =>
+  value ? '' : "It's required to agree with Terms and Conditions.";
+export const emailValidator = value =>
+  !value
+    ? 'Email field is required.'
+    : emailRegex.test(value)
+    ? ''
+    : 'Email is not in a valid format.';
+export const nameValidator = value =>
+  !value
+    ? 'Full Name is required'
+    : value.length < 7
+    ? 'Full Name should be at least 7 characters long.'
+    : '';
+export const userNameValidator = value =>
+  !value
+    ? 'User Name is required'
+    : value.length < 5
+    ? 'User name should be at least 5 characters long.'
+    : '';
+export const phoneValidator = value =>
+  !value
+    ? 'Phone number is required.'
+    : phoneRegex.test(value)
+    ? ''
+    : 'Not a valid phone number.';
+export const cardValidator = value =>
+  !value
+    ? 'Credit card number is required. '
+    : ccardRegex.test(value)
+    ? ''
+    : 'Not a valid credit card number format.';
+export const cvcValidator = value =>
+  !value
+    ? 'CVC code is required,'
+    : cvcRegex.test(value) || value.length !== 3
+    ? ''
+    : 'Not a valid CVC code format.';
+export const guestsValidator = value =>
+  !value
+    ? 'Number of guests is required'
+    : value <= 5
+    ? ''
+    : 'Maximum 5 guests';
+export const nightsValidator = value =>
+  value ? '' : 'Number of Nights is required.';
+export const arrivalDateValidator = value =>
+  value ? '' : 'Arrival Date is required.';
+export const colorValidator = value => (value ? '' : 'Color is required.');
+export const requiredValidator = value =>
+  value ? '' : 'Error: This field is required.';
+export const passwordValidator = value =>
+  value && value.length > 8 ? '' : 'Password must be at least 8 symbols.';
+export const addressValidator = value => (value ? '' : 'Address is required.');
+
+const userNameGetter = getter('username');
+const emailGetter = getter('email');
+
+export const formValidator = values => {
+  const userName = userNameGetter(values);
+  const emailValue = emailGetter(values);
+
+  if (userName && emailValue && emailRegex.test(emailValue)) {
+    return {};
+  }
+
+  return {
+    VALIDATION_SUMMARY: 'Please fill in the following fields.',
+    ['username']: !userName ? 'User Name is required.' : '',
+    ['email']:
+      emailValue && emailRegex.test(emailValue)
+        ? ''
+        : 'Email is required and should be in a valid format.'
+  };
+};
diff --git a/vue-options-api-demos/form/guideline/errormessages/FormContent.vue b/vue-options-api-demos/form/guideline/errormessages/FormContent.vue
new file mode 100644
index 00000000..79a5abb0
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/errormessages/FormContent.vue
@@ -0,0 +1,87 @@
+<template>
+    <form-element :style="{ width: '400px' }" >
+          <fieldset class="k-form-fieldset">
+              <field
+                :id="'username'"
+                :name="'username'"
+                :label="'User Name'"
+                :component="'myTemplate'"
+                :validator="userNameValidator"
+              >
+               <template v-slot:myTemplate="{props}">
+                  <forminput
+                    v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  />
+              </template>
+              </field>
+              <field
+                :id="'email'"
+                :name="'email'"
+                :label="'Email'"
+                :component="'myTemplate'"
+                :validator="emailValidator"
+              >
+               <template v-slot:myTemplate="{props}">
+                  <forminput
+                    v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  ></forminput>
+              </template>
+              </field>
+            <div class="k-form-buttons">
+              <kbutton
+                :theme-color="'primary'"
+                :type="'submit'"
+                :disabled="!kendoForm.allowSubmit"
+              >
+                Submit
+              </kbutton>
+              <kbutton @click="clear">
+                  Clear
+              </kbutton>
+            </div>
+          </fieldset>
+        </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import FormInput from "./FormInput.vue";
+import { Button } from "@progress/kendo-vue-buttons";
+import {
+  emailValidator,
+  userNameValidator
+} from "./validators";
+
+export default {
+    
+    components: {
+      field: Field,
+      'form-element': FormElement,
+      forminput: FormInput,
+      kbutton: Button
+    },
+    inject: {
+      kendoForm: { default: {} },  
+    },
+    data: function () {
+        return { 
+          emailValidator,
+          userNameValidator
+         };
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      },
+      clear(){
+        this.kendoForm.onFormReset();
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/guideline/errormessages/FormInput.vue b/vue-options-api-demos/form/guideline/errormessages/FormInput.vue
new file mode 100644
index 00000000..706d5702
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/errormessages/FormInput.vue
@@ -0,0 +1,84 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :disabled="disabled" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <kinput :style="{ width: '230px' }" 
+                :valid="valid"
+                :id="id"
+                :value="value"
+                :disabled="disabled"
+                :placeholder="placeholder"
+                @input="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        optional: Boolean,
+        disabled: Boolean,
+        placeholder: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      kinput: Input
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/errormessages/main.js b/vue-options-api-demos/form/guideline/errormessages/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/errormessages/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/form/guideline/errormessages/main.vue b/vue-options-api-demos/form/guideline/errormessages/main.vue
new file mode 100644
index 00000000..798b6d8d
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/errormessages/main.vue
@@ -0,0 +1,23 @@
+<template>
+    <k-form
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/guideline/errormessages/validators.js b/vue-options-api-demos/form/guideline/errormessages/validators.js
new file mode 100644
index 00000000..b0779c1d
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/errormessages/validators.js
@@ -0,0 +1,82 @@
+import { getter } from '@progress/kendo-vue-common';
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const phoneRegex = new RegExp(/^[0-9 ()+-]+$/);
+const ccardRegex = new RegExp(/^[0-9-]+$/);
+const cvcRegex = new RegExp(/^[0-9]+$/);
+
+export const termsValidator = value =>
+  value ? '' : "It's required to agree with Terms and Conditions.";
+export const emailValidator = value =>
+  !value
+    ? 'Email field is required.'
+    : emailRegex.test(value)
+    ? ''
+    : 'Email is not in a valid format.';
+export const nameValidator = value =>
+  !value
+    ? 'Full Name is required'
+    : value.length < 7
+    ? 'Full Name should be at least 7 characters long.'
+    : '';
+export const userNameValidator = value =>
+  !value
+    ? 'User Name is required'
+    : value.length < 5
+    ? 'User name should be at least 5 characters long.'
+    : '';
+export const phoneValidator = value =>
+  !value
+    ? 'Phone number is required.'
+    : phoneRegex.test(value)
+    ? ''
+    : 'Not a valid phone number.';
+export const cardValidator = value =>
+  !value
+    ? 'Credit card number is required. '
+    : ccardRegex.test(value)
+    ? ''
+    : 'Not a valid credit card number format.';
+export const cvcValidator = value =>
+  !value
+    ? 'CVC code is required,'
+    : cvcRegex.test(value) || value.length !== 3
+    ? ''
+    : 'Not a valid CVC code format.';
+export const guestsValidator = value =>
+  !value
+    ? 'Number of guests is required'
+    : value <= 5
+    ? ''
+    : 'Maximum 5 guests';
+export const nightsValidator = value =>
+  value ? '' : 'Number of Nights is required.';
+export const arrivalDateValidator = value =>
+  value ? '' : 'Arrival Date is required.';
+export const colorValidator = value => (value ? '' : 'Color is required.');
+export const requiredValidator = value =>
+  value ? '' : 'Error: This field is required.';
+export const passwordValidator = value =>
+  value && value.length > 8 ? '' : 'Password must be at least 8 symbols.';
+export const addressValidator = value => (value ? '' : 'Address is required.');
+
+const userNameGetter = getter('username');
+const emailGetter = getter('email');
+
+export const formValidator = values => {
+  const userName = userNameGetter(values);
+  const emailValue = emailGetter(values);
+
+  if (userName && emailValue && emailRegex.test(emailValue)) {
+    return {};
+  }
+
+  return {
+    VALIDATION_SUMMARY: 'Please fill in the following fields.',
+    ['username']: !userName ? 'User Name is required.' : '',
+    ['email']:
+      emailValue && emailRegex.test(emailValue)
+        ? ''
+        : 'Email is required and should be in a valid format.'
+  };
+};
diff --git a/vue-options-api-demos/form/guideline/floating/FormContent.vue b/vue-options-api-demos/form/guideline/floating/FormContent.vue
new file mode 100644
index 00000000..f3f30445
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/floating/FormContent.vue
@@ -0,0 +1,91 @@
+<template>
+    <form-element :style="{ width: '400px' }">
+          <fieldset class="k-form-fieldset">
+              <field
+                  :id="'age'"
+                  :name="'age'"
+                  :label="'Age'"
+                  :hint="'Hint: Enter your age.'"
+                  :format="'n2'"
+                  :component="'myTemplate'"
+                  :validator="requiredValidator"
+                >
+                <template v-slot:myTemplate="{props}">
+                    <formfloatingnumerictextBox
+                     v-bind="props"
+                      @change="props.onChange"
+                      @blur="props.onBlur"
+                      @focus="props.onFocus"
+                    ></formfloatingnumerictextBox>
+                </template>
+              </field>
+              <field
+                  :id="'street'"
+                  :name="'street'"
+                  :label="'Street Number'"
+                  :hint="'Hint: Enter your street number.'"
+                  :format="'n2'"
+                  :component="'myTemplate'"
+                  :validator="requiredValidator"
+                >
+                <template v-slot:myTemplate="{props}">
+                    <formfloatingnumerictextBox
+                      v-bind="props"
+                      @change="props.onChange"
+                      @blur="props.onBlur"
+                      @focus="props.onFocus"
+                    ></formfloatingnumerictextBox>
+                </template>
+              </field>
+            <div class="k-form-buttons">
+              <kbutton
+                :theme-color="'primary'"
+                :type="'submit'"
+                :disabled="!kendoForm.allowSubmit"
+              >
+                Submit
+              </kbutton>
+              <kbutton @click="clear">
+                  Clear
+              </kbutton>
+            </div>
+          </fieldset>
+        </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import FormFloatingNumericTextBox from "./FormFloatingNumericTextBox.vue";
+
+import { Button } from "@progress/kendo-vue-buttons";
+
+import {
+  requiredValidator
+} from "./validators";
+
+export default {
+    
+    components: {
+      field: Field,
+      'form-element': FormElement,
+      formfloatingnumerictextBox:FormFloatingNumericTextBox,
+      kbutton: Button
+    },
+    inject: {
+      kendoForm: { default: {} },  
+    },
+    data: function () {
+        return { 
+          requiredValidator
+         };
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      },
+      clear(){
+        this.kendoForm.onFormReset();
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/guideline/floating/FormFloatingNumericTextBox.vue b/vue-options-api-demos/form/guideline/floating/FormFloatingNumericTextBox.vue
new file mode 100644
index 00000000..5df99979
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/floating/FormFloatingNumericTextBox.vue
@@ -0,0 +1,86 @@
+<template>
+    <fieldwrapper>
+        <floatinglabel 
+            :editor-id="id" 
+            :editor-valid="valid" 
+            :editor-value="value" 
+            :label="label"
+            :optional="optional">
+            <div class="k-form-field-wrap">
+                <numerictextbox :style="{ width: '230px' }" 
+                    :valid="valid"
+                    :value="value"
+                    :id="id"
+                    :min="0"
+                    :format="format"
+                    @change="handleChange"
+                    @blur="handleBlur"
+                    @focus="handleFocus"
+                    />
+                <error v-if="showValidationMessage">
+                    {{validationMessage}}
+                </error>
+                <hint v-else>{{hint}}</hint>
+            </div>
+        </floatinglabel>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, FloatingLabel } from "@progress/kendo-vue-labels";
+import { NumericTextBox } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        optional: Boolean,
+        touched: Boolean,
+        label: String,
+        format: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+         value: {
+             type: Number,
+             default: null
+         }
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        floatinglabel: FloatingLabel,
+        numerictextbox: NumericTextBox
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/floating/main.js b/vue-options-api-demos/form/guideline/floating/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/floating/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/form/guideline/floating/main.vue b/vue-options-api-demos/form/guideline/floating/main.vue
new file mode 100644
index 00000000..798b6d8d
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/floating/main.vue
@@ -0,0 +1,23 @@
+<template>
+    <k-form
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/guideline/floating/validators.js b/vue-options-api-demos/form/guideline/floating/validators.js
new file mode 100644
index 00000000..b0779c1d
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/floating/validators.js
@@ -0,0 +1,82 @@
+import { getter } from '@progress/kendo-vue-common';
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const phoneRegex = new RegExp(/^[0-9 ()+-]+$/);
+const ccardRegex = new RegExp(/^[0-9-]+$/);
+const cvcRegex = new RegExp(/^[0-9]+$/);
+
+export const termsValidator = value =>
+  value ? '' : "It's required to agree with Terms and Conditions.";
+export const emailValidator = value =>
+  !value
+    ? 'Email field is required.'
+    : emailRegex.test(value)
+    ? ''
+    : 'Email is not in a valid format.';
+export const nameValidator = value =>
+  !value
+    ? 'Full Name is required'
+    : value.length < 7
+    ? 'Full Name should be at least 7 characters long.'
+    : '';
+export const userNameValidator = value =>
+  !value
+    ? 'User Name is required'
+    : value.length < 5
+    ? 'User name should be at least 5 characters long.'
+    : '';
+export const phoneValidator = value =>
+  !value
+    ? 'Phone number is required.'
+    : phoneRegex.test(value)
+    ? ''
+    : 'Not a valid phone number.';
+export const cardValidator = value =>
+  !value
+    ? 'Credit card number is required. '
+    : ccardRegex.test(value)
+    ? ''
+    : 'Not a valid credit card number format.';
+export const cvcValidator = value =>
+  !value
+    ? 'CVC code is required,'
+    : cvcRegex.test(value) || value.length !== 3
+    ? ''
+    : 'Not a valid CVC code format.';
+export const guestsValidator = value =>
+  !value
+    ? 'Number of guests is required'
+    : value <= 5
+    ? ''
+    : 'Maximum 5 guests';
+export const nightsValidator = value =>
+  value ? '' : 'Number of Nights is required.';
+export const arrivalDateValidator = value =>
+  value ? '' : 'Arrival Date is required.';
+export const colorValidator = value => (value ? '' : 'Color is required.');
+export const requiredValidator = value =>
+  value ? '' : 'Error: This field is required.';
+export const passwordValidator = value =>
+  value && value.length > 8 ? '' : 'Password must be at least 8 symbols.';
+export const addressValidator = value => (value ? '' : 'Address is required.');
+
+const userNameGetter = getter('username');
+const emailGetter = getter('email');
+
+export const formValidator = values => {
+  const userName = userNameGetter(values);
+  const emailValue = emailGetter(values);
+
+  if (userName && emailValue && emailRegex.test(emailValue)) {
+    return {};
+  }
+
+  return {
+    VALIDATION_SUMMARY: 'Please fill in the following fields.',
+    ['username']: !userName ? 'User Name is required.' : '',
+    ['email']:
+      emailValue && emailRegex.test(emailValue)
+        ? ''
+        : 'Email is required and should be in a valid format.'
+  };
+};
diff --git a/vue-options-api-demos/form/guideline/formbuttons/FormCheckbox.vue b/vue-options-api-demos/form/guideline/formbuttons/FormCheckbox.vue
new file mode 100644
index 00000000..9c415a82
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/formbuttons/FormCheckbox.vue
@@ -0,0 +1,84 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+        <span>
+          <checkbox 
+                :value="value"
+                :valid="valid"
+                :id="id"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus" />
+          </span>
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Checkbox } from "@progress/kendo-vue-inputs";
+
+export default {
+    props: {
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        disabled: Boolean,
+        optional: Boolean,
+        visited: Boolean,
+        modified: Boolean,
+        value: {
+             type: [Boolean, String],
+             default: false
+        }
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        klabel: Label,
+        checkbox: Checkbox
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/formbuttons/FormContent.vue b/vue-options-api-demos/form/guideline/formbuttons/FormContent.vue
new file mode 100644
index 00000000..93a36281
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/formbuttons/FormContent.vue
@@ -0,0 +1,112 @@
+<template>
+    <form-element :style="{ width: '400px' }">
+          <fieldset class="k-form-fieldset">
+            <legend class="k-form-legend">
+                Your Account       
+            </legend>
+              <field
+                :id="'userName'"
+                :name="'userName'"
+                :label="'User Name'"
+                :hint="'Hint: Your username'"
+                :component="'myTemplate'"
+                :validator="requiredValidator"
+              >
+               <template v-slot:myTemplate="{props}">
+                  <forminput
+                    v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  />
+              </template>
+              </field>
+              <field
+                :id="'email'"
+                :name="'email'"
+                :label="'Email'"
+                :hint="'Hint: Your active email'"
+                :optional="true"
+                :component="'myTemplate'"
+              >
+               <template v-slot:myTemplate="{props}">
+                  <forminput
+                    v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  ></forminput>
+              </template>
+              </field>
+              <span class="k-form-separator" />
+              <field
+                  :id="'notifications'"
+                  :name="'notifications'"
+                  :label="'I want to receive notifications'"
+                  :hint="'You will receive our latest updates and promotions on your email'"
+                  :optional="true"
+                  :component="'myTemplate'"
+                >
+                <template v-slot:myTemplate="{props}">
+                    <formcheckbox
+                      v-bind="props"
+                      @change="props.onChange"
+                      @blur="props.onBlur"
+                      @focus="props.onFocus"
+                    ></formcheckbox>
+                </template>
+              </field>
+            <div class="k-form-buttons k-buttons-end">
+              <kbutton
+                :theme-color="'primary'"
+                :type="'submit'"
+                :disabled="!kendoForm.allowSubmit"
+              >
+                Submit
+              </kbutton>
+              <kbutton @click="clear">
+                  Clear
+              </kbutton>
+            </div>
+          </fieldset>
+        </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import FormInput from "./FormInput.vue";
+import FormCheckbox from "./FormCheckbox.vue";
+import { Button } from "@progress/kendo-vue-buttons";
+import {
+  emailValidator,
+  requiredValidator
+} from "./validators";
+
+export default {
+    
+    components: {
+      field: Field,
+      'form-element': FormElement,
+      forminput: FormInput,
+      formcheckbox: FormCheckbox,
+      kbutton: Button
+    },
+    inject: {
+      kendoForm: { default: {} },  
+    },
+    data: function () {
+        return { 
+          emailValidator,
+          requiredValidator
+        }
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      },
+      clear(){
+        this.kendoForm.onFormReset();
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/guideline/formbuttons/FormInput.vue b/vue-options-api-demos/form/guideline/formbuttons/FormInput.vue
new file mode 100644
index 00000000..706d5702
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/formbuttons/FormInput.vue
@@ -0,0 +1,84 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :disabled="disabled" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <kinput :style="{ width: '230px' }" 
+                :valid="valid"
+                :id="id"
+                :value="value"
+                :disabled="disabled"
+                :placeholder="placeholder"
+                @input="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        optional: Boolean,
+        disabled: Boolean,
+        placeholder: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      kinput: Input
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/formbuttons/main.js b/vue-options-api-demos/form/guideline/formbuttons/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/formbuttons/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/form/guideline/formbuttons/main.vue b/vue-options-api-demos/form/guideline/formbuttons/main.vue
new file mode 100644
index 00000000..798b6d8d
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/formbuttons/main.vue
@@ -0,0 +1,23 @@
+<template>
+    <k-form
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/guideline/formbuttons/validators.js b/vue-options-api-demos/form/guideline/formbuttons/validators.js
new file mode 100644
index 00000000..b0779c1d
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/formbuttons/validators.js
@@ -0,0 +1,82 @@
+import { getter } from '@progress/kendo-vue-common';
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const phoneRegex = new RegExp(/^[0-9 ()+-]+$/);
+const ccardRegex = new RegExp(/^[0-9-]+$/);
+const cvcRegex = new RegExp(/^[0-9]+$/);
+
+export const termsValidator = value =>
+  value ? '' : "It's required to agree with Terms and Conditions.";
+export const emailValidator = value =>
+  !value
+    ? 'Email field is required.'
+    : emailRegex.test(value)
+    ? ''
+    : 'Email is not in a valid format.';
+export const nameValidator = value =>
+  !value
+    ? 'Full Name is required'
+    : value.length < 7
+    ? 'Full Name should be at least 7 characters long.'
+    : '';
+export const userNameValidator = value =>
+  !value
+    ? 'User Name is required'
+    : value.length < 5
+    ? 'User name should be at least 5 characters long.'
+    : '';
+export const phoneValidator = value =>
+  !value
+    ? 'Phone number is required.'
+    : phoneRegex.test(value)
+    ? ''
+    : 'Not a valid phone number.';
+export const cardValidator = value =>
+  !value
+    ? 'Credit card number is required. '
+    : ccardRegex.test(value)
+    ? ''
+    : 'Not a valid credit card number format.';
+export const cvcValidator = value =>
+  !value
+    ? 'CVC code is required,'
+    : cvcRegex.test(value) || value.length !== 3
+    ? ''
+    : 'Not a valid CVC code format.';
+export const guestsValidator = value =>
+  !value
+    ? 'Number of guests is required'
+    : value <= 5
+    ? ''
+    : 'Maximum 5 guests';
+export const nightsValidator = value =>
+  value ? '' : 'Number of Nights is required.';
+export const arrivalDateValidator = value =>
+  value ? '' : 'Arrival Date is required.';
+export const colorValidator = value => (value ? '' : 'Color is required.');
+export const requiredValidator = value =>
+  value ? '' : 'Error: This field is required.';
+export const passwordValidator = value =>
+  value && value.length > 8 ? '' : 'Password must be at least 8 symbols.';
+export const addressValidator = value => (value ? '' : 'Address is required.');
+
+const userNameGetter = getter('username');
+const emailGetter = getter('email');
+
+export const formValidator = values => {
+  const userName = userNameGetter(values);
+  const emailValue = emailGetter(values);
+
+  if (userName && emailValue && emailRegex.test(emailValue)) {
+    return {};
+  }
+
+  return {
+    VALIDATION_SUMMARY: 'Please fill in the following fields.',
+    ['username']: !userName ? 'User Name is required.' : '',
+    ['email']:
+      emailValue && emailRegex.test(emailValue)
+        ? ''
+        : 'Email is required and should be in a valid format.'
+  };
+};
diff --git a/vue-options-api-demos/form/guideline/formcomponents/FormCheckbox.vue b/vue-options-api-demos/form/guideline/formcomponents/FormCheckbox.vue
new file mode 100644
index 00000000..9c415a82
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/formcomponents/FormCheckbox.vue
@@ -0,0 +1,84 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+        <span>
+          <checkbox 
+                :value="value"
+                :valid="valid"
+                :id="id"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus" />
+          </span>
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Checkbox } from "@progress/kendo-vue-inputs";
+
+export default {
+    props: {
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        disabled: Boolean,
+        optional: Boolean,
+        visited: Boolean,
+        modified: Boolean,
+        value: {
+             type: [Boolean, String],
+             default: false
+        }
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        klabel: Label,
+        checkbox: Checkbox
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/formcomponents/FormContent.vue b/vue-options-api-demos/form/guideline/formcomponents/FormContent.vue
new file mode 100644
index 00000000..47215fa1
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/formcomponents/FormContent.vue
@@ -0,0 +1,211 @@
+<template>
+    <form-element :style="{ maxWidth: '650px' }">
+          <fieldset class="k-form-fieldset">
+            <legend class="k-form-legend">
+              BOOK YOUR DREAM VACATION TODAY
+            </legend>
+             <field
+                :id="'fullName'"
+                :name="'fullName'"
+                :label="'Full Name'"
+                :component="'myTemplate'"
+                :validator="nameValidator"
+              >
+               <template v-slot:myTemplate="{props}">
+                  <forminput
+                     v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  />
+              </template>
+              </field>
+              <field
+                :id="'phoneNumber'"
+                :name="'phoneNumber'"
+                :label="'Phone Number'"
+                :mask="'(999) 000-00-00-00'"
+                :hint="'Hint: Your active phone number.'"
+                :component="'myTemplate'"
+                :validator="phoneValidator"
+              >
+               <template v-slot:myTemplate="{props}">
+                  <formmaskedtextbox
+                     v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  ></formmaskedtextbox>
+              </template>
+              </field>
+              <field
+                :id="'email'"
+                :name="'email'"
+                :label="'Email'"
+                :hint="'Hint: Enter your personal email address.'"
+                :component="'myTemplate'"
+                :validator="emailValidator"
+              >
+               <template v-slot:myTemplate="{props}">
+                  <forminput
+                     v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  ></forminput>
+              </template>
+              </field>
+              <div :style="{ display: 'flex', justifyContent: 'space-between' }">
+                <field
+                  :id="'arrivalDate'"
+                  :name="'arrivalDate'"
+                  :label="'Arrival Date'"
+                  :hint="'Hint: Should be greater than today.'"
+                  :component="'myTemplate'"
+                  :validator="arrivalDateValidator"
+                  :style="{'width': '90%', 'margin-right': '18px'}"
+                >
+                <template v-slot:myTemplate="{props}">
+                    <formdatepicker
+                      v-bind="props"
+                      @change="props.onChange"
+                      @blur="props.onBlur"
+                      @focus="props.onFocus"
+                    ></formdatepicker>
+                </template>
+                </field>
+                <field
+                  :id="'nightsCount'"
+                  :name="'nightsCount'"
+                  :label="'Number of Nights'"
+                  :format="'n0'"
+                  :component="'myTemplate'"
+                  :validator="nightsValidator"
+                >
+                <template v-slot:myTemplate="{props}">
+                    <formnumerictextbox
+                      v-bind="props"
+                      @change="props.onChange"
+                      @blur="props.onBlur"
+                      @focus="props.onFocus"
+                    ></formnumerictextbox>
+                </template>
+                </field>
+              </div>
+              <field
+                  :id="'guestsCount'"
+                  :name="'guestsCount'"
+                  :label="'Number of Guests'"
+                  :hint="'Hint: Maximum 5 guests.'"
+                  :format="'n0'"
+                  :component="'myTemplate'"
+                  :validator="guestsValidator"
+                >
+                <template v-slot:myTemplate="{props}">
+                    <formnumerictextbox
+                      v-bind="props"
+                      @change="props.onChange"
+                      @blur="props.onBlur"
+                      @focus="props.onFocus"
+                    ></formnumerictextbox>
+                </template>
+              </field>
+              <field
+                  :id="'comments'"
+                  :name="'comments'"
+                  :label="'Comments'"
+                  :component="'myTemplate'"
+                >
+                <template v-slot:myTemplate="{props}">
+                    <formtextarea
+                     v-bind="props"
+                      @change="props.onChange"
+                      @blur="props.onBlur"
+                      @focus="props.onFocus"
+                    ></formtextarea>
+                </template>
+              </field>
+              <span class="k-form-separator" />
+              <field
+                  :id="'terms'"
+                  :name="'terms'"
+                  :label="'I agree with terms and conditions'"
+                  :component="'myTemplate'"
+                  :validator="termsValidator"
+                >
+                <template v-slot:myTemplate="{props}">
+                    <formcheckbox
+                       v-bind="props"
+                      @change="props.onChange"
+                      @blur="props.onBlur"
+                      @focus="props.onFocus"
+                    ></formcheckbox>
+                </template>
+              </field>
+            <div class="k-form-buttons">
+              <kbutton
+                :theme-color="'primary'"
+                :type="'submit'"
+                :disabled="!kendoForm.allowSubmit"
+              >
+                Submit
+              </kbutton>
+            </div>
+          </fieldset>
+    </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import FormInput from "./FormInput.vue";
+import FormMaskedTextBox from "./FormMaskedTextBox.vue";
+import FormDatePicker from "./FormDatePicker.vue";
+import FormNumericTextBox from "./FormNumericTextBox.vue";
+import FormTextArea from "./FormTextArea.vue";
+import FormCheckbox from "./FormCheckbox.vue";
+import { Button } from "@progress/kendo-vue-buttons";
+
+import {
+  termsValidator,
+  emailValidator,
+  nameValidator,
+  phoneValidator,
+  guestsValidator,
+  nightsValidator,
+  arrivalDateValidator,
+} from "./validators";
+
+export default {
+    
+    components: {
+      field: Field,
+      'form-element': FormElement,
+      forminput: FormInput,
+      formmaskedtextbox: FormMaskedTextBox,
+      formdatepicker: FormDatePicker,
+      formnumerictextbox: FormNumericTextBox,
+      formtextarea: FormTextArea,
+      formcheckbox: FormCheckbox,
+      kbutton: Button
+    },
+    inject: {
+      kendoForm: { default: {} },  
+    },
+    data: function () {
+        return { 
+          termsValidator,
+          emailValidator,
+          nameValidator,
+          phoneValidator,
+          guestsValidator,
+          nightsValidator,
+          arrivalDateValidator
+         };
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/guideline/formcomponents/FormDatePicker.vue b/vue-options-api-demos/form/guideline/formcomponents/FormDatePicker.vue
new file mode 100644
index 00000000..af21ec48
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/formcomponents/FormDatePicker.vue
@@ -0,0 +1,80 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <datepicker :style="{ width: '230px' }" 
+                :value="value"
+                :valid="valid"
+                :id="id"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else :direction="hintDirection">{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+export default {
+    props: {
+        hintDirection: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: Date,
+            default: null
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      datepicker: DatePicker
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/formcomponents/FormInput.vue b/vue-options-api-demos/form/guideline/formcomponents/FormInput.vue
new file mode 100644
index 00000000..706d5702
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/formcomponents/FormInput.vue
@@ -0,0 +1,84 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :disabled="disabled" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <kinput :style="{ width: '230px' }" 
+                :valid="valid"
+                :id="id"
+                :value="value"
+                :disabled="disabled"
+                :placeholder="placeholder"
+                @input="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        optional: Boolean,
+        disabled: Boolean,
+        placeholder: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      kinput: Input
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/formcomponents/FormMaskedTextBox.vue b/vue-options-api-demos/form/guideline/formcomponents/FormMaskedTextBox.vue
new file mode 100644
index 00000000..395d904f
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/formcomponents/FormMaskedTextBox.vue
@@ -0,0 +1,88 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'"
+                :editor-id="id" 
+                :editor-valid="valid"
+                :optional="optional"
+                >
+            {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <maskedtextbox :style="{ width: '230px' }" 
+                :valid="valid"
+                :value="value"
+                :id="id"
+                :mask="mask"
+                :readonly="readonly"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { MaskedTextBox } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        readonly: Boolean,
+        optional: Boolean,
+        mask: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      maskedtextbox: MaskedTextBox
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/formcomponents/FormNumericTextBox.vue b/vue-options-api-demos/form/guideline/formcomponents/FormNumericTextBox.vue
new file mode 100644
index 00000000..fda4a4ec
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/formcomponents/FormNumericTextBox.vue
@@ -0,0 +1,80 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <numerictextbox :style="{ width: '230px' }" 
+                :valid="valid"
+                :value="value"
+                :id="id"
+                :min="0"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { NumericTextBox } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: Number,
+            default: null
+        }
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        klabel: Label,
+        numerictextbox: NumericTextBox
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/formcomponents/FormTextArea.vue b/vue-options-api-demos/form/guideline/formcomponents/FormTextArea.vue
new file mode 100644
index 00000000..3c308b6d
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/formcomponents/FormTextArea.vue
@@ -0,0 +1,81 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+        <span class="k-textarea">
+            <textarea 
+                class="k-input"
+                style="margin-top: 0px; margin-bottom: 0px; height: 36px;"
+                :valid="valid"
+                :value="value"
+                :id="id"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+            ></textarea>
+          </span>
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+export default {
+    props: {
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        klabel: Label,
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/formcomponents/main.js b/vue-options-api-demos/form/guideline/formcomponents/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/formcomponents/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/form/guideline/formcomponents/main.vue b/vue-options-api-demos/form/guideline/formcomponents/main.vue
new file mode 100644
index 00000000..798b6d8d
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/formcomponents/main.vue
@@ -0,0 +1,23 @@
+<template>
+    <k-form
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/guideline/formcomponents/validators.js b/vue-options-api-demos/form/guideline/formcomponents/validators.js
new file mode 100644
index 00000000..b0779c1d
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/formcomponents/validators.js
@@ -0,0 +1,82 @@
+import { getter } from '@progress/kendo-vue-common';
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const phoneRegex = new RegExp(/^[0-9 ()+-]+$/);
+const ccardRegex = new RegExp(/^[0-9-]+$/);
+const cvcRegex = new RegExp(/^[0-9]+$/);
+
+export const termsValidator = value =>
+  value ? '' : "It's required to agree with Terms and Conditions.";
+export const emailValidator = value =>
+  !value
+    ? 'Email field is required.'
+    : emailRegex.test(value)
+    ? ''
+    : 'Email is not in a valid format.';
+export const nameValidator = value =>
+  !value
+    ? 'Full Name is required'
+    : value.length < 7
+    ? 'Full Name should be at least 7 characters long.'
+    : '';
+export const userNameValidator = value =>
+  !value
+    ? 'User Name is required'
+    : value.length < 5
+    ? 'User name should be at least 5 characters long.'
+    : '';
+export const phoneValidator = value =>
+  !value
+    ? 'Phone number is required.'
+    : phoneRegex.test(value)
+    ? ''
+    : 'Not a valid phone number.';
+export const cardValidator = value =>
+  !value
+    ? 'Credit card number is required. '
+    : ccardRegex.test(value)
+    ? ''
+    : 'Not a valid credit card number format.';
+export const cvcValidator = value =>
+  !value
+    ? 'CVC code is required,'
+    : cvcRegex.test(value) || value.length !== 3
+    ? ''
+    : 'Not a valid CVC code format.';
+export const guestsValidator = value =>
+  !value
+    ? 'Number of guests is required'
+    : value <= 5
+    ? ''
+    : 'Maximum 5 guests';
+export const nightsValidator = value =>
+  value ? '' : 'Number of Nights is required.';
+export const arrivalDateValidator = value =>
+  value ? '' : 'Arrival Date is required.';
+export const colorValidator = value => (value ? '' : 'Color is required.');
+export const requiredValidator = value =>
+  value ? '' : 'Error: This field is required.';
+export const passwordValidator = value =>
+  value && value.length > 8 ? '' : 'Password must be at least 8 symbols.';
+export const addressValidator = value => (value ? '' : 'Address is required.');
+
+const userNameGetter = getter('username');
+const emailGetter = getter('email');
+
+export const formValidator = values => {
+  const userName = userNameGetter(values);
+  const emailValue = emailGetter(values);
+
+  if (userName && emailValue && emailRegex.test(emailValue)) {
+    return {};
+  }
+
+  return {
+    VALIDATION_SUMMARY: 'Please fill in the following fields.',
+    ['username']: !userName ? 'User Name is required.' : '',
+    ['email']:
+      emailValue && emailRegex.test(emailValue)
+        ? ''
+        : 'Email is required and should be in a valid format.'
+  };
+};
diff --git a/vue-options-api-demos/form/guideline/formvalidation/FormCheckbox.vue b/vue-options-api-demos/form/guideline/formvalidation/FormCheckbox.vue
new file mode 100644
index 00000000..9c415a82
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/formvalidation/FormCheckbox.vue
@@ -0,0 +1,84 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+        <span>
+          <checkbox 
+                :value="value"
+                :valid="valid"
+                :id="id"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus" />
+          </span>
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Checkbox } from "@progress/kendo-vue-inputs";
+
+export default {
+    props: {
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        disabled: Boolean,
+        optional: Boolean,
+        visited: Boolean,
+        modified: Boolean,
+        value: {
+             type: [Boolean, String],
+             default: false
+        }
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        klabel: Label,
+        checkbox: Checkbox
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/formvalidation/FormContent.vue b/vue-options-api-demos/form/guideline/formvalidation/FormContent.vue
new file mode 100644
index 00000000..48034735
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/formvalidation/FormContent.vue
@@ -0,0 +1,127 @@
+<template>
+    <form-element :style="{ width: '400px' }" >
+          <fieldset class="k-form-fieldset">
+            <legend class="k-form-legend">
+                PLEASE FILL IN THE FOLLOWING INFORMATION:
+            </legend>
+                <div v-if="computedErrors.length" class="k-messagebox k-messagebox-error">
+                  {{kendoForm.errors[genericErrorField]}}
+                  <ul>
+                      <li v-for="errors in computedErrors">
+                      {{errors}}</li>
+                  </ul>
+                </div>
+              
+              <field
+                :id="'username'"
+                :name="'username'"
+                :label="'User Name'"
+                :component="'myTemplate'"
+                :validator="userNameValidator"
+              >
+              <template v-slot:myTemplate="{props}">
+                 <forminput
+                    v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  />
+              </template>
+              </field>
+              <field
+                :id="'email'"
+                :name="'email'"
+                :label="'Email'"
+                :hint="'Hint: Enter your personal email address.'"
+                :component="'myTemplate'"
+                :validator="emailValidator"
+              >
+               <template v-slot:myTemplate="{props}">
+                 <forminput
+                    v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  />
+              </template>
+              </field>
+              <field
+                  :id="'notifications'"
+                  :name="'notifications'"
+                  :label="'I want to receive notifications'"
+                  :hint="'You will receive our latest updates and promotions on your email'"
+                  :optional="true"
+                  :component="'myTemplate'"
+                >
+                <template v-slot:myTemplate="{props}">
+                 <formcheckbox
+                    v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  />
+              </template>
+              </field>
+            <div class="k-form-buttons">
+              <kbutton
+                :theme-color="'primary'"
+                :type="'submit'"
+                :disabled="!kendoForm.allowSubmit"
+              >
+                Submit
+              </kbutton>
+              <kbutton @click="clear">
+                  Clear
+              </kbutton>
+            </div>
+          </fieldset>
+        </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import FormInput from "./FormInput.vue";
+import FormCheckbox from "./FormCheckbox.vue";
+import { Button } from "@progress/kendo-vue-buttons";
+import {
+  userNameValidator, 
+  emailValidator,
+} from "./validators";
+
+export default {
+    components: {
+      field: Field,
+      'form-element': FormElement,
+      forminput: FormInput,
+      formcheckbox: FormCheckbox,
+      kbutton: Button
+    },
+    inject: {
+      kendoForm: { default: {} },  
+    },
+    computed: {
+      computedErrors (){
+          return Object.keys(this.kendoForm.errors)
+                      .filter((field) => field !== this.genericErrorField)
+                      .filter((field) => this.kendoForm.errors[field])
+                      .map((field)=> this.kendoForm.errors[field] )
+      }
+    },
+    data: function () {
+        return { 
+          genericErrorField: 'VALIDATION_SUMMARY',
+        
+          emailValidator,
+          userNameValidator,
+         };
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      },
+      clear(){
+        this.kendoForm.onFormReset();
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/guideline/formvalidation/FormInput.vue b/vue-options-api-demos/form/guideline/formvalidation/FormInput.vue
new file mode 100644
index 00000000..706d5702
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/formvalidation/FormInput.vue
@@ -0,0 +1,84 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :disabled="disabled" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <kinput :style="{ width: '230px' }" 
+                :valid="valid"
+                :id="id"
+                :value="value"
+                :disabled="disabled"
+                :placeholder="placeholder"
+                @input="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        optional: Boolean,
+        disabled: Boolean,
+        placeholder: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      kinput: Input
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/formvalidation/main.js b/vue-options-api-demos/form/guideline/formvalidation/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/formvalidation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/form/guideline/formvalidation/main.vue b/vue-options-api-demos/form/guideline/formvalidation/main.vue
new file mode 100644
index 00000000..798b6d8d
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/formvalidation/main.vue
@@ -0,0 +1,23 @@
+<template>
+    <k-form
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/guideline/formvalidation/validators.js b/vue-options-api-demos/form/guideline/formvalidation/validators.js
new file mode 100644
index 00000000..b0779c1d
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/formvalidation/validators.js
@@ -0,0 +1,82 @@
+import { getter } from '@progress/kendo-vue-common';
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const phoneRegex = new RegExp(/^[0-9 ()+-]+$/);
+const ccardRegex = new RegExp(/^[0-9-]+$/);
+const cvcRegex = new RegExp(/^[0-9]+$/);
+
+export const termsValidator = value =>
+  value ? '' : "It's required to agree with Terms and Conditions.";
+export const emailValidator = value =>
+  !value
+    ? 'Email field is required.'
+    : emailRegex.test(value)
+    ? ''
+    : 'Email is not in a valid format.';
+export const nameValidator = value =>
+  !value
+    ? 'Full Name is required'
+    : value.length < 7
+    ? 'Full Name should be at least 7 characters long.'
+    : '';
+export const userNameValidator = value =>
+  !value
+    ? 'User Name is required'
+    : value.length < 5
+    ? 'User name should be at least 5 characters long.'
+    : '';
+export const phoneValidator = value =>
+  !value
+    ? 'Phone number is required.'
+    : phoneRegex.test(value)
+    ? ''
+    : 'Not a valid phone number.';
+export const cardValidator = value =>
+  !value
+    ? 'Credit card number is required. '
+    : ccardRegex.test(value)
+    ? ''
+    : 'Not a valid credit card number format.';
+export const cvcValidator = value =>
+  !value
+    ? 'CVC code is required,'
+    : cvcRegex.test(value) || value.length !== 3
+    ? ''
+    : 'Not a valid CVC code format.';
+export const guestsValidator = value =>
+  !value
+    ? 'Number of guests is required'
+    : value <= 5
+    ? ''
+    : 'Maximum 5 guests';
+export const nightsValidator = value =>
+  value ? '' : 'Number of Nights is required.';
+export const arrivalDateValidator = value =>
+  value ? '' : 'Arrival Date is required.';
+export const colorValidator = value => (value ? '' : 'Color is required.');
+export const requiredValidator = value =>
+  value ? '' : 'Error: This field is required.';
+export const passwordValidator = value =>
+  value && value.length > 8 ? '' : 'Password must be at least 8 symbols.';
+export const addressValidator = value => (value ? '' : 'Address is required.');
+
+const userNameGetter = getter('username');
+const emailGetter = getter('email');
+
+export const formValidator = values => {
+  const userName = userNameGetter(values);
+  const emailValue = emailGetter(values);
+
+  if (userName && emailValue && emailRegex.test(emailValue)) {
+    return {};
+  }
+
+  return {
+    VALIDATION_SUMMARY: 'Please fill in the following fields.',
+    ['username']: !userName ? 'User Name is required.' : '',
+    ['email']:
+      emailValue && emailRegex.test(emailValue)
+        ? ''
+        : 'Email is required and should be in a valid format.'
+  };
+};
diff --git a/vue-options-api-demos/form/guideline/groups/FormCheckbox.vue b/vue-options-api-demos/form/guideline/groups/FormCheckbox.vue
new file mode 100644
index 00000000..9c415a82
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/groups/FormCheckbox.vue
@@ -0,0 +1,84 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+        <span>
+          <checkbox 
+                :value="value"
+                :valid="valid"
+                :id="id"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus" />
+          </span>
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Checkbox } from "@progress/kendo-vue-inputs";
+
+export default {
+    props: {
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        disabled: Boolean,
+        optional: Boolean,
+        visited: Boolean,
+        modified: Boolean,
+        value: {
+             type: [Boolean, String],
+             default: false
+        }
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        klabel: Label,
+        checkbox: Checkbox
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/groups/FormContent.vue b/vue-options-api-demos/form/guideline/groups/FormContent.vue
new file mode 100644
index 00000000..ebe58745
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/groups/FormContent.vue
@@ -0,0 +1,111 @@
+<template>
+    <form-element :style="{ width: '400px' }">
+          <fieldset class="k-form-fieldset">
+            <legend class="k-form-legend">
+                USER DETAILS          
+            </legend>
+              <field
+                :id="'fullName'"
+                :name="'fullName'"
+                :label="'Full Name'"
+                :component="'myTemplate'"
+                :validator="requiredValidator"
+              >
+               <template v-slot:myTemplate="{props}">
+                  <forminput
+                     v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  />
+              </template>
+              </field>
+              <field
+                :id="'email'"
+                :name="'email'"
+                :label="'Email'"
+                :hint="'Hint: Enter your personal email address.'"
+                :component="'myTemplate'"
+                :validator="emailValidator"
+              >
+               <template v-slot:myTemplate="{props}">
+                  <forminput
+                     v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  ></forminput>
+              </template>
+              </field>
+              <span class="k-form-separator" />
+              <field
+                  :id="'notifications'"
+                  :name="'notifications'"
+                  :label="'I want to receive notifications'"
+                  :hint="'You will receive our latest updates and promotions on your email'"
+                  :optional="true"
+                  :component="'myTemplate'"
+                >
+                <template v-slot:myTemplate="{props}">
+                    <formcheckbox
+                       v-bind="props"
+                      @change="props.onChange"
+                      @blur="props.onBlur"
+                      @focus="props.onFocus"
+                    ></formcheckbox>
+                </template>
+              </field>
+            <div class="k-form-buttons">
+              <kbutton
+                :theme-color="'primary'"
+                :type="'submit'"
+                :disabled="!kendoForm.allowSubmit"
+              >
+                Submit
+              </kbutton>
+              <kbutton @click="clear">
+                  Clear
+              </kbutton>
+            </div>
+          </fieldset>
+        </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import FormInput from "./FormInput.vue";
+import FormCheckbox from "./FormCheckbox.vue";
+import { Button } from "@progress/kendo-vue-buttons";
+import {
+  emailValidator,
+  requiredValidator
+} from "./validators";
+
+export default {
+    
+    components: {
+      field: Field,
+      'form-element': FormElement,
+      forminput: FormInput,
+      formcheckbox: FormCheckbox,
+      kbutton: Button
+    },
+    inject: {
+      kendoForm: { default: {} },  
+    },
+    data: function () {
+        return { 
+          emailValidator,
+          requiredValidator
+         };
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      },
+      clear(){
+        this.kendoForm.onFormReset();
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/guideline/groups/FormInput.vue b/vue-options-api-demos/form/guideline/groups/FormInput.vue
new file mode 100644
index 00000000..706d5702
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/groups/FormInput.vue
@@ -0,0 +1,84 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :disabled="disabled" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <kinput :style="{ width: '230px' }" 
+                :valid="valid"
+                :id="id"
+                :value="value"
+                :disabled="disabled"
+                :placeholder="placeholder"
+                @input="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        optional: Boolean,
+        disabled: Boolean,
+        placeholder: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      kinput: Input
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/groups/main.js b/vue-options-api-demos/form/guideline/groups/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/groups/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/form/guideline/groups/main.vue b/vue-options-api-demos/form/guideline/groups/main.vue
new file mode 100644
index 00000000..798b6d8d
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/groups/main.vue
@@ -0,0 +1,23 @@
+<template>
+    <k-form
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/guideline/groups/validators.js b/vue-options-api-demos/form/guideline/groups/validators.js
new file mode 100644
index 00000000..b0779c1d
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/groups/validators.js
@@ -0,0 +1,82 @@
+import { getter } from '@progress/kendo-vue-common';
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const phoneRegex = new RegExp(/^[0-9 ()+-]+$/);
+const ccardRegex = new RegExp(/^[0-9-]+$/);
+const cvcRegex = new RegExp(/^[0-9]+$/);
+
+export const termsValidator = value =>
+  value ? '' : "It's required to agree with Terms and Conditions.";
+export const emailValidator = value =>
+  !value
+    ? 'Email field is required.'
+    : emailRegex.test(value)
+    ? ''
+    : 'Email is not in a valid format.';
+export const nameValidator = value =>
+  !value
+    ? 'Full Name is required'
+    : value.length < 7
+    ? 'Full Name should be at least 7 characters long.'
+    : '';
+export const userNameValidator = value =>
+  !value
+    ? 'User Name is required'
+    : value.length < 5
+    ? 'User name should be at least 5 characters long.'
+    : '';
+export const phoneValidator = value =>
+  !value
+    ? 'Phone number is required.'
+    : phoneRegex.test(value)
+    ? ''
+    : 'Not a valid phone number.';
+export const cardValidator = value =>
+  !value
+    ? 'Credit card number is required. '
+    : ccardRegex.test(value)
+    ? ''
+    : 'Not a valid credit card number format.';
+export const cvcValidator = value =>
+  !value
+    ? 'CVC code is required,'
+    : cvcRegex.test(value) || value.length !== 3
+    ? ''
+    : 'Not a valid CVC code format.';
+export const guestsValidator = value =>
+  !value
+    ? 'Number of guests is required'
+    : value <= 5
+    ? ''
+    : 'Maximum 5 guests';
+export const nightsValidator = value =>
+  value ? '' : 'Number of Nights is required.';
+export const arrivalDateValidator = value =>
+  value ? '' : 'Arrival Date is required.';
+export const colorValidator = value => (value ? '' : 'Color is required.');
+export const requiredValidator = value =>
+  value ? '' : 'Error: This field is required.';
+export const passwordValidator = value =>
+  value && value.length > 8 ? '' : 'Password must be at least 8 symbols.';
+export const addressValidator = value => (value ? '' : 'Address is required.');
+
+const userNameGetter = getter('username');
+const emailGetter = getter('email');
+
+export const formValidator = values => {
+  const userName = userNameGetter(values);
+  const emailValue = emailGetter(values);
+
+  if (userName && emailValue && emailRegex.test(emailValue)) {
+    return {};
+  }
+
+  return {
+    VALIDATION_SUMMARY: 'Please fill in the following fields.',
+    ['username']: !userName ? 'User Name is required.' : '',
+    ['email']:
+      emailValue && emailRegex.test(emailValue)
+        ? ''
+        : 'Email is required and should be in a valid format.'
+  };
+};
diff --git a/vue-options-api-demos/form/guideline/hints/FormContent.vue b/vue-options-api-demos/form/guideline/hints/FormContent.vue
new file mode 100644
index 00000000..231ab390
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/hints/FormContent.vue
@@ -0,0 +1,91 @@
+<template>
+    <form-element :style="{ width: '400px' }" >
+          <fieldset class="k-form-fieldset">
+              <field    
+                :id="'bdate'"
+                :name="'bdate'"
+                :label="'Birth Date'"
+                :component="'myTemplate'"
+                :validator="requiredValidator"
+                :hint="'Hint: Hint message aligned end'"
+                :hintDirection="'end'"
+              >
+                <template v-slot:myTemplate="{props}">
+                    <formdateinput
+                      v-bind="props"
+                      @change="props.onChange"
+                      @blur="props.onBlur"
+                      @focus="props.onFocus"
+                    ></formdateinput>
+                </template>
+              </field>
+              <field
+                :id="'username'"
+                :name="'username'"
+                :label="'User Name'"
+                :component="'myTemplate'"
+                :hint="'Hint: Hint message aligned start'"
+                :validator="requiredValidator"
+              >
+               <template v-slot:myTemplate="{props}">
+                  <forminput
+                     v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  />
+              </template>
+              </field>
+            <div class="k-form-buttons">
+              <kbutton
+                :theme-color="'primary'"
+                :type="'submit'"
+                :disabled="!kendoForm.allowSubmit"
+              >
+                Submit
+              </kbutton>
+              <kbutton @click="clear">
+                  Clear
+              </kbutton>
+            </div>
+          </fieldset>
+        </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import FormInput from "./FormInput.vue";
+import FormDatePicker from "./FormDatePicker.vue";
+
+import { Button } from "@progress/kendo-vue-buttons";
+import {
+  requiredValidator
+} from "./validators";
+
+export default {
+    
+    components: {
+      field: Field,
+      'form-element': FormElement,
+      forminput: FormInput,
+      formdatepicker: FormDatePicker,
+      kbutton: Button
+    },
+    inject: {
+      kendoForm: { default: {} },  
+    },
+    data: function () {
+        return { 
+          requiredValidator
+         };
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      },
+      clear(){
+        this.kendoForm.onFormReset();
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/guideline/hints/FormDatePicker.vue b/vue-options-api-demos/form/guideline/hints/FormDatePicker.vue
new file mode 100644
index 00000000..af21ec48
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/hints/FormDatePicker.vue
@@ -0,0 +1,80 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <datepicker :style="{ width: '230px' }" 
+                :value="value"
+                :valid="valid"
+                :id="id"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else :direction="hintDirection">{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+export default {
+    props: {
+        hintDirection: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: Date,
+            default: null
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      datepicker: DatePicker
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/hints/FormInput.vue b/vue-options-api-demos/form/guideline/hints/FormInput.vue
new file mode 100644
index 00000000..706d5702
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/hints/FormInput.vue
@@ -0,0 +1,84 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :disabled="disabled" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <kinput :style="{ width: '230px' }" 
+                :valid="valid"
+                :id="id"
+                :value="value"
+                :disabled="disabled"
+                :placeholder="placeholder"
+                @input="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        optional: Boolean,
+        disabled: Boolean,
+        placeholder: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      kinput: Input
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/hints/main.js b/vue-options-api-demos/form/guideline/hints/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/hints/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/form/guideline/hints/main.vue b/vue-options-api-demos/form/guideline/hints/main.vue
new file mode 100644
index 00000000..798b6d8d
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/hints/main.vue
@@ -0,0 +1,23 @@
+<template>
+    <k-form
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/guideline/hints/validators.js b/vue-options-api-demos/form/guideline/hints/validators.js
new file mode 100644
index 00000000..b0779c1d
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/hints/validators.js
@@ -0,0 +1,82 @@
+import { getter } from '@progress/kendo-vue-common';
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const phoneRegex = new RegExp(/^[0-9 ()+-]+$/);
+const ccardRegex = new RegExp(/^[0-9-]+$/);
+const cvcRegex = new RegExp(/^[0-9]+$/);
+
+export const termsValidator = value =>
+  value ? '' : "It's required to agree with Terms and Conditions.";
+export const emailValidator = value =>
+  !value
+    ? 'Email field is required.'
+    : emailRegex.test(value)
+    ? ''
+    : 'Email is not in a valid format.';
+export const nameValidator = value =>
+  !value
+    ? 'Full Name is required'
+    : value.length < 7
+    ? 'Full Name should be at least 7 characters long.'
+    : '';
+export const userNameValidator = value =>
+  !value
+    ? 'User Name is required'
+    : value.length < 5
+    ? 'User name should be at least 5 characters long.'
+    : '';
+export const phoneValidator = value =>
+  !value
+    ? 'Phone number is required.'
+    : phoneRegex.test(value)
+    ? ''
+    : 'Not a valid phone number.';
+export const cardValidator = value =>
+  !value
+    ? 'Credit card number is required. '
+    : ccardRegex.test(value)
+    ? ''
+    : 'Not a valid credit card number format.';
+export const cvcValidator = value =>
+  !value
+    ? 'CVC code is required,'
+    : cvcRegex.test(value) || value.length !== 3
+    ? ''
+    : 'Not a valid CVC code format.';
+export const guestsValidator = value =>
+  !value
+    ? 'Number of guests is required'
+    : value <= 5
+    ? ''
+    : 'Maximum 5 guests';
+export const nightsValidator = value =>
+  value ? '' : 'Number of Nights is required.';
+export const arrivalDateValidator = value =>
+  value ? '' : 'Arrival Date is required.';
+export const colorValidator = value => (value ? '' : 'Color is required.');
+export const requiredValidator = value =>
+  value ? '' : 'Error: This field is required.';
+export const passwordValidator = value =>
+  value && value.length > 8 ? '' : 'Password must be at least 8 symbols.';
+export const addressValidator = value => (value ? '' : 'Address is required.');
+
+const userNameGetter = getter('username');
+const emailGetter = getter('email');
+
+export const formValidator = values => {
+  const userName = userNameGetter(values);
+  const emailValue = emailGetter(values);
+
+  if (userName && emailValue && emailRegex.test(emailValue)) {
+    return {};
+  }
+
+  return {
+    VALIDATION_SUMMARY: 'Please fill in the following fields.',
+    ['username']: !userName ? 'User Name is required.' : '',
+    ['email']:
+      emailValue && emailRegex.test(emailValue)
+        ? ''
+        : 'Email is required and should be in a valid format.'
+  };
+};
diff --git a/vue-options-api-demos/form/guideline/horizontal/FormContent.vue b/vue-options-api-demos/form/guideline/horizontal/FormContent.vue
new file mode 100644
index 00000000..53ebb218
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/horizontal/FormContent.vue
@@ -0,0 +1,114 @@
+<template>
+    <form-element :style="{ width: '400px' }" :horizontal="true" >
+          <fieldset class="k-form-fieldset">
+            <legend class="k-form-legend">
+                Horizontal Form            
+            </legend>
+              <field
+                :id="'fullName'"
+                :name="'fullName'"
+                :label="'Full Name'"
+                :component="'myTemplate'"
+                :validator="requiredValidator"
+              >
+               <template v-slot:myTemplate="{props}">
+                  <forminput
+                    v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  />
+              </template>
+              </field>
+              <field
+                :id="'cardNumber'"
+                :name="'cardNumber'"
+                :label="'Card Number'"
+                :mask="'0000-0000-0000-0000'"
+                :hint="'Hint: Your Credit Card Number'"
+                :component="'myTemplate'"
+                :validator="cardValidator"
+              >
+               <template v-slot:myTemplate="{props}">
+                  <formmaskedtextbox
+                     v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  ></formmaskedtextbox>
+              </template>
+              </field>
+              <field
+                :id="'cvc'"
+                :name="'cvc'"
+                :label="'CVC Number'"
+                :mask="'000'"
+                :hint="'Hint: The last 3 digids on the back of the Card'"
+                :component="'myTemplate'"
+                :validator="cvcValidator"
+              >
+               <template v-slot:myTemplate="{props}">
+                  <formmaskedtextbox
+                     v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  ></formmaskedtextbox>
+              </template>
+              </field>
+            <div class="k-form-buttons">
+              <kbutton
+                :theme-color="'primary'"
+                :type="'submit'"
+                :disabled="!kendoForm.allowSubmit"
+              >
+                Submit
+              </kbutton>
+              <kbutton @click="clear">
+                  Clear
+              </kbutton>
+            </div>
+          </fieldset>
+        </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import FormInput from "./FormInput.vue";
+import FormMaskedTextBox from "./FormMaskedTextBox.vue";
+import { Button } from "@progress/kendo-vue-buttons";
+import {
+  requiredValidator,
+  cardValidator,
+  cvcValidator
+} from "./validators";
+
+export default {
+    
+    components: {
+      field: Field,
+      'form-element': FormElement,
+      forminput: FormInput,
+      formmaskedtextbox:FormMaskedTextBox,
+      kbutton: Button
+    },
+    inject: {
+      kendoForm: { default: {} },  
+    },
+    data: function () {
+        return { 
+          requiredValidator,
+          cardValidator,
+          cvcValidator
+         };
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      },
+      clear(){
+        this.kendoForm.onFormReset();
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/guideline/horizontal/FormInput.vue b/vue-options-api-demos/form/guideline/horizontal/FormInput.vue
new file mode 100644
index 00000000..706d5702
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/horizontal/FormInput.vue
@@ -0,0 +1,84 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :disabled="disabled" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <kinput :style="{ width: '230px' }" 
+                :valid="valid"
+                :id="id"
+                :value="value"
+                :disabled="disabled"
+                :placeholder="placeholder"
+                @input="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        optional: Boolean,
+        disabled: Boolean,
+        placeholder: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      kinput: Input
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/horizontal/FormMaskedTextBox.vue b/vue-options-api-demos/form/guideline/horizontal/FormMaskedTextBox.vue
new file mode 100644
index 00000000..395d904f
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/horizontal/FormMaskedTextBox.vue
@@ -0,0 +1,88 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'"
+                :editor-id="id" 
+                :editor-valid="valid"
+                :optional="optional"
+                >
+            {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <maskedtextbox :style="{ width: '230px' }" 
+                :valid="valid"
+                :value="value"
+                :id="id"
+                :mask="mask"
+                :readonly="readonly"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { MaskedTextBox } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        readonly: Boolean,
+        optional: Boolean,
+        mask: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      maskedtextbox: MaskedTextBox
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/horizontal/main.js b/vue-options-api-demos/form/guideline/horizontal/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/horizontal/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/form/guideline/horizontal/main.vue b/vue-options-api-demos/form/guideline/horizontal/main.vue
new file mode 100644
index 00000000..798b6d8d
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/horizontal/main.vue
@@ -0,0 +1,23 @@
+<template>
+    <k-form
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/guideline/horizontal/validators.js b/vue-options-api-demos/form/guideline/horizontal/validators.js
new file mode 100644
index 00000000..b0779c1d
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/horizontal/validators.js
@@ -0,0 +1,82 @@
+import { getter } from '@progress/kendo-vue-common';
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const phoneRegex = new RegExp(/^[0-9 ()+-]+$/);
+const ccardRegex = new RegExp(/^[0-9-]+$/);
+const cvcRegex = new RegExp(/^[0-9]+$/);
+
+export const termsValidator = value =>
+  value ? '' : "It's required to agree with Terms and Conditions.";
+export const emailValidator = value =>
+  !value
+    ? 'Email field is required.'
+    : emailRegex.test(value)
+    ? ''
+    : 'Email is not in a valid format.';
+export const nameValidator = value =>
+  !value
+    ? 'Full Name is required'
+    : value.length < 7
+    ? 'Full Name should be at least 7 characters long.'
+    : '';
+export const userNameValidator = value =>
+  !value
+    ? 'User Name is required'
+    : value.length < 5
+    ? 'User name should be at least 5 characters long.'
+    : '';
+export const phoneValidator = value =>
+  !value
+    ? 'Phone number is required.'
+    : phoneRegex.test(value)
+    ? ''
+    : 'Not a valid phone number.';
+export const cardValidator = value =>
+  !value
+    ? 'Credit card number is required. '
+    : ccardRegex.test(value)
+    ? ''
+    : 'Not a valid credit card number format.';
+export const cvcValidator = value =>
+  !value
+    ? 'CVC code is required,'
+    : cvcRegex.test(value) || value.length !== 3
+    ? ''
+    : 'Not a valid CVC code format.';
+export const guestsValidator = value =>
+  !value
+    ? 'Number of guests is required'
+    : value <= 5
+    ? ''
+    : 'Maximum 5 guests';
+export const nightsValidator = value =>
+  value ? '' : 'Number of Nights is required.';
+export const arrivalDateValidator = value =>
+  value ? '' : 'Arrival Date is required.';
+export const colorValidator = value => (value ? '' : 'Color is required.');
+export const requiredValidator = value =>
+  value ? '' : 'Error: This field is required.';
+export const passwordValidator = value =>
+  value && value.length > 8 ? '' : 'Password must be at least 8 symbols.';
+export const addressValidator = value => (value ? '' : 'Address is required.');
+
+const userNameGetter = getter('username');
+const emailGetter = getter('email');
+
+export const formValidator = values => {
+  const userName = userNameGetter(values);
+  const emailValue = emailGetter(values);
+
+  if (userName && emailValue && emailRegex.test(emailValue)) {
+    return {};
+  }
+
+  return {
+    VALIDATION_SUMMARY: 'Please fill in the following fields.',
+    ['username']: !userName ? 'User Name is required.' : '',
+    ['email']:
+      emailValue && emailRegex.test(emailValue)
+        ? ''
+        : 'Email is required and should be in a valid format.'
+  };
+};
diff --git a/vue-options-api-demos/form/guideline/inputs/FormContent.vue b/vue-options-api-demos/form/guideline/inputs/FormContent.vue
new file mode 100644
index 00000000..d4f43921
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/inputs/FormContent.vue
@@ -0,0 +1,157 @@
+<template>
+    <form-element :style="{ maxWidth: '650px' }">
+          <fieldset class="k-form-fieldset">
+             <field
+                :id="'fullName'"
+                :name="'fullName'"
+                :label="'Full Name'"
+                :component="'myTemplate'"
+                :validator="nameValidator"
+              >
+               <template v-slot:myTemplate="{props}">
+                  <forminput
+                    v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  />
+              </template>
+              </field>
+              <field
+                :id="'phoneNumber'"
+                :name="'phoneNumber'"
+                :label="'Phone Number'"
+                :mask="'(999) 000-00-00-00'"
+                :hint="'Hint: Your active phone number.'"
+                :component="'myTemplate'"
+                :validator="phoneValidator"
+              >
+               <template v-slot:myTemplate="{props}">
+                  <formmaskedtextbox
+                    v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  ></formmaskedtextbox>
+              </template>
+              </field>
+              <field
+                  :id="'amount'"
+                  :name="'amount'"
+                  :label="'Amount'"
+                  :hint="'Hint: Amount of money.'"
+                  :format="'n2'"
+                  :component="'myTemplate'"
+                  :validator="guestsValidator"
+                >
+                <template v-slot:myTemplate="{props}">
+                    <formnumerictextbox
+                      v-bind="props"
+                      @change="props.onChange"
+                      @blur="props.onBlur"
+                      @focus="props.onFocus"
+                    ></formnumerictextbox>
+                </template>
+              </field>
+              <field
+                  :id="'address'"
+                  :name="'address'"
+                  :label="'Address'"
+                  :component="'myTemplate'"
+                  :validator="addressValidator"
+                >
+                <template v-slot:myTemplate="{props}">
+                    <formtextarea
+                      v-bind="props"
+                      @change="props.onChange"
+                      @blur="props.onBlur"
+                      @focus="props.onFocus"
+                    ></formtextarea>
+                </template>
+              </field>
+              <field
+                  :id="'size'"
+                  :name="'size'"
+                  :label="'Size'"
+                  :component="'myTemplate'"
+                  :min="min"
+                  :max="max"
+                  :data="sliderData"
+                >
+                <template v-slot:myTemplate="{props}">
+                    <formslider
+                      v-bind="props"
+                      @change="props.onChange"
+                      @blur="props.onBlur"
+                      @focus="props.onFocus"
+                    ></formslider>
+                </template>
+              </field>
+            <div class="k-form-buttons">
+              <kbutton
+                :theme-color="'primary'"
+                :type="'submit'"
+                :disabled="!kendoForm.allowSubmit"
+              >
+                Submit
+              </kbutton>
+              <kbutton @click="clear">
+                  Clear
+              </kbutton>
+            </div>
+          </fieldset>
+        </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import FormInput from "./FormInput.vue";
+import FormMaskedTextBox from "./FormMaskedTextBox.vue";
+import FormNumericTextBox from "./FormNumericTextBox.vue";
+import FormTextArea from "./FormTextArea.vue";
+import FormSlider from "./FormSlider.vue";
+import { Button } from "@progress/kendo-vue-buttons";
+
+import {
+  nameValidator,
+  phoneValidator,
+  addressValidator,
+  guestsValidator
+} from "./validators";
+
+export default {
+    
+    components: {
+      field: Field,
+      'form-element': FormElement,
+      forminput: FormInput,
+      formmaskedtextbox: FormMaskedTextBox,
+      formnumerictextbox: FormNumericTextBox,
+      formtextarea: FormTextArea,
+      formslider: FormSlider,
+      kbutton: Button
+    },
+    inject: {
+      kendoForm: { default: {} },  
+    },
+    data: function () {
+        return { 
+          nameValidator,
+          phoneValidator,
+          addressValidator,
+          guestsValidator,
+          min: 1,
+          max: 10,
+          sliderData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+         };
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      },
+      clear(){
+        this.kendoForm.onFormReset();
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/guideline/inputs/FormInput.vue b/vue-options-api-demos/form/guideline/inputs/FormInput.vue
new file mode 100644
index 00000000..706d5702
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/inputs/FormInput.vue
@@ -0,0 +1,84 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :disabled="disabled" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <kinput :style="{ width: '230px' }" 
+                :valid="valid"
+                :id="id"
+                :value="value"
+                :disabled="disabled"
+                :placeholder="placeholder"
+                @input="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        optional: Boolean,
+        disabled: Boolean,
+        placeholder: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      kinput: Input
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/inputs/FormMaskedTextBox.vue b/vue-options-api-demos/form/guideline/inputs/FormMaskedTextBox.vue
new file mode 100644
index 00000000..395d904f
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/inputs/FormMaskedTextBox.vue
@@ -0,0 +1,88 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'"
+                :editor-id="id" 
+                :editor-valid="valid"
+                :optional="optional"
+                >
+            {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <maskedtextbox :style="{ width: '230px' }" 
+                :valid="valid"
+                :value="value"
+                :id="id"
+                :mask="mask"
+                :readonly="readonly"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { MaskedTextBox } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        readonly: Boolean,
+        optional: Boolean,
+        mask: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      maskedtextbox: MaskedTextBox
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/inputs/FormNumericTextBox.vue b/vue-options-api-demos/form/guideline/inputs/FormNumericTextBox.vue
new file mode 100644
index 00000000..fda4a4ec
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/inputs/FormNumericTextBox.vue
@@ -0,0 +1,80 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <numerictextbox :style="{ width: '230px' }" 
+                :valid="valid"
+                :value="value"
+                :id="id"
+                :min="0"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { NumericTextBox } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: Number,
+            default: null
+        }
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        klabel: Label,
+        numerictextbox: NumericTextBox
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/inputs/FormSlider.vue b/vue-options-api-demos/form/guideline/inputs/FormSlider.vue
new file mode 100644
index 00000000..f3d5c9a3
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/inputs/FormSlider.vue
@@ -0,0 +1,89 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :editor-disabled="disabled">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <slider
+                :buttons="false"
+                :min="min"
+                :max="max"
+                :valid="valid"
+                :value="value"
+                :id="id"
+                :disabled="disabled"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+            >
+              <slider-label v-for="(item, index) in data" :position="item" :key="index">{{item}}</slider-label>
+            </slider>
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Slider, SliderLabel } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        disabled: Boolean,
+        min: Number,
+        max: Number,
+        data: Object, 
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+             type: Number,
+             default: null
+        }
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        klabel: Label,
+        slider: Slider,
+        'slider-label': SliderLabel
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/inputs/FormTextArea.vue b/vue-options-api-demos/form/guideline/inputs/FormTextArea.vue
new file mode 100644
index 00000000..3c308b6d
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/inputs/FormTextArea.vue
@@ -0,0 +1,81 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+        <span class="k-textarea">
+            <textarea 
+                class="k-input"
+                style="margin-top: 0px; margin-bottom: 0px; height: 36px;"
+                :valid="valid"
+                :value="value"
+                :id="id"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+            ></textarea>
+          </span>
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+export default {
+    props: {
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        klabel: Label,
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/inputs/main.js b/vue-options-api-demos/form/guideline/inputs/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/inputs/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/form/guideline/inputs/main.vue b/vue-options-api-demos/form/guideline/inputs/main.vue
new file mode 100644
index 00000000..ee5d7f4f
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/inputs/main.vue
@@ -0,0 +1,24 @@
+<template>
+    <k-form
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/inputs/validators.js b/vue-options-api-demos/form/guideline/inputs/validators.js
new file mode 100644
index 00000000..b0779c1d
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/inputs/validators.js
@@ -0,0 +1,82 @@
+import { getter } from '@progress/kendo-vue-common';
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const phoneRegex = new RegExp(/^[0-9 ()+-]+$/);
+const ccardRegex = new RegExp(/^[0-9-]+$/);
+const cvcRegex = new RegExp(/^[0-9]+$/);
+
+export const termsValidator = value =>
+  value ? '' : "It's required to agree with Terms and Conditions.";
+export const emailValidator = value =>
+  !value
+    ? 'Email field is required.'
+    : emailRegex.test(value)
+    ? ''
+    : 'Email is not in a valid format.';
+export const nameValidator = value =>
+  !value
+    ? 'Full Name is required'
+    : value.length < 7
+    ? 'Full Name should be at least 7 characters long.'
+    : '';
+export const userNameValidator = value =>
+  !value
+    ? 'User Name is required'
+    : value.length < 5
+    ? 'User name should be at least 5 characters long.'
+    : '';
+export const phoneValidator = value =>
+  !value
+    ? 'Phone number is required.'
+    : phoneRegex.test(value)
+    ? ''
+    : 'Not a valid phone number.';
+export const cardValidator = value =>
+  !value
+    ? 'Credit card number is required. '
+    : ccardRegex.test(value)
+    ? ''
+    : 'Not a valid credit card number format.';
+export const cvcValidator = value =>
+  !value
+    ? 'CVC code is required,'
+    : cvcRegex.test(value) || value.length !== 3
+    ? ''
+    : 'Not a valid CVC code format.';
+export const guestsValidator = value =>
+  !value
+    ? 'Number of guests is required'
+    : value <= 5
+    ? ''
+    : 'Maximum 5 guests';
+export const nightsValidator = value =>
+  value ? '' : 'Number of Nights is required.';
+export const arrivalDateValidator = value =>
+  value ? '' : 'Arrival Date is required.';
+export const colorValidator = value => (value ? '' : 'Color is required.');
+export const requiredValidator = value =>
+  value ? '' : 'Error: This field is required.';
+export const passwordValidator = value =>
+  value && value.length > 8 ? '' : 'Password must be at least 8 symbols.';
+export const addressValidator = value => (value ? '' : 'Address is required.');
+
+const userNameGetter = getter('username');
+const emailGetter = getter('email');
+
+export const formValidator = values => {
+  const userName = userNameGetter(values);
+  const emailValue = emailGetter(values);
+
+  if (userName && emailValue && emailRegex.test(emailValue)) {
+    return {};
+  }
+
+  return {
+    VALIDATION_SUMMARY: 'Please fill in the following fields.',
+    ['username']: !userName ? 'User Name is required.' : '',
+    ['email']:
+      emailValue && emailRegex.test(emailValue)
+        ? ''
+        : 'Email is required and should be in a valid format.'
+  };
+};
diff --git a/vue-options-api-demos/form/guideline/optional/FormContent.vue b/vue-options-api-demos/form/guideline/optional/FormContent.vue
new file mode 100644
index 00000000..eefd043c
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/optional/FormContent.vue
@@ -0,0 +1,97 @@
+<template>
+    <form-element :style="{ width: '400px' }">
+          <fieldset class="k-form-fieldset">
+              <field
+                  :id="'street'"
+                  :name="'street'"
+                  :label="'Street Number'"
+                  :hint="'Hint: Enter your street number.'"
+                  :format="'n2'"
+                  :component="'myTemplate'"
+                  :optional="true"
+                  :validator="requiredValidator"
+                >
+                <template v-slot:myTemplate="{props}">
+                    <formfloatingnumerictextBox
+                      v-bind="props"
+                      @change="props.onChange"
+                      @blur="props.onBlur"
+                      @focus="props.onFocus"
+                    ></formfloatingnumerictextBox>
+                </template>
+              </field>
+              <field
+                :id="'phoneNumber'"
+                :name="'phoneNumber'"
+                :label="'Phone Number'"
+                :mask="'(999) 000-00-00-00'"
+                :hint="'Hint: Your active phone number.'"
+                :optional="true"
+                :component="'myTemplate'"
+                :validator="phoneValidator"
+              >
+               <template v-slot:myTemplate="{props}">
+                  <formmaskedtextbox
+                    v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  ></formmaskedtextbox>
+              </template>
+              </field> 
+            <div class="k-form-buttons">
+              <kbutton
+                :theme-color="'primary'"
+                :type="'submit'"
+                :disabled="!kendoForm.allowSubmit"
+              >
+                Submit
+              </kbutton>
+              <kbutton @click="clear">
+                  Clear
+              </kbutton>
+            </div>
+          </fieldset>
+        </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import FormMaskedTextBox from "./FormMaskedTextBox.vue";
+import FormFloatingNumericTextBox from "./FormFloatingNumericTextBox.vue";
+
+import { Button } from "@progress/kendo-vue-buttons";
+
+import {
+  phoneValidator,
+  requiredValidator
+} from "./validators";
+
+export default {
+    
+    components: {
+      field: Field,
+      'form-element': FormElement,
+      formmaskedtextbox: FormMaskedTextBox,
+      formfloatingnumerictextBox:FormFloatingNumericTextBox,
+      kbutton: Button
+    },
+    inject: {
+      kendoForm: { default: {} },  
+    },
+    data: function () {
+        return { 
+          phoneValidator,
+          requiredValidator,
+         };
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      },
+      clear(){
+        this.kendoForm.onFormReset();
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/guideline/optional/FormFloatingNumericTextBox.vue b/vue-options-api-demos/form/guideline/optional/FormFloatingNumericTextBox.vue
new file mode 100644
index 00000000..5df99979
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/optional/FormFloatingNumericTextBox.vue
@@ -0,0 +1,86 @@
+<template>
+    <fieldwrapper>
+        <floatinglabel 
+            :editor-id="id" 
+            :editor-valid="valid" 
+            :editor-value="value" 
+            :label="label"
+            :optional="optional">
+            <div class="k-form-field-wrap">
+                <numerictextbox :style="{ width: '230px' }" 
+                    :valid="valid"
+                    :value="value"
+                    :id="id"
+                    :min="0"
+                    :format="format"
+                    @change="handleChange"
+                    @blur="handleBlur"
+                    @focus="handleFocus"
+                    />
+                <error v-if="showValidationMessage">
+                    {{validationMessage}}
+                </error>
+                <hint v-else>{{hint}}</hint>
+            </div>
+        </floatinglabel>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, FloatingLabel } from "@progress/kendo-vue-labels";
+import { NumericTextBox } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        optional: Boolean,
+        touched: Boolean,
+        label: String,
+        format: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+         value: {
+             type: Number,
+             default: null
+         }
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        floatinglabel: FloatingLabel,
+        numerictextbox: NumericTextBox
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/optional/FormMaskedTextBox.vue b/vue-options-api-demos/form/guideline/optional/FormMaskedTextBox.vue
new file mode 100644
index 00000000..395d904f
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/optional/FormMaskedTextBox.vue
@@ -0,0 +1,88 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'"
+                :editor-id="id" 
+                :editor-valid="valid"
+                :optional="optional"
+                >
+            {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <maskedtextbox :style="{ width: '230px' }" 
+                :valid="valid"
+                :value="value"
+                :id="id"
+                :mask="mask"
+                :readonly="readonly"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { MaskedTextBox } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        readonly: Boolean,
+        optional: Boolean,
+        mask: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      maskedtextbox: MaskedTextBox
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/optional/main.js b/vue-options-api-demos/form/guideline/optional/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/optional/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/form/guideline/optional/main.vue b/vue-options-api-demos/form/guideline/optional/main.vue
new file mode 100644
index 00000000..798b6d8d
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/optional/main.vue
@@ -0,0 +1,23 @@
+<template>
+    <k-form
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/guideline/optional/validators.js b/vue-options-api-demos/form/guideline/optional/validators.js
new file mode 100644
index 00000000..b0779c1d
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/optional/validators.js
@@ -0,0 +1,82 @@
+import { getter } from '@progress/kendo-vue-common';
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const phoneRegex = new RegExp(/^[0-9 ()+-]+$/);
+const ccardRegex = new RegExp(/^[0-9-]+$/);
+const cvcRegex = new RegExp(/^[0-9]+$/);
+
+export const termsValidator = value =>
+  value ? '' : "It's required to agree with Terms and Conditions.";
+export const emailValidator = value =>
+  !value
+    ? 'Email field is required.'
+    : emailRegex.test(value)
+    ? ''
+    : 'Email is not in a valid format.';
+export const nameValidator = value =>
+  !value
+    ? 'Full Name is required'
+    : value.length < 7
+    ? 'Full Name should be at least 7 characters long.'
+    : '';
+export const userNameValidator = value =>
+  !value
+    ? 'User Name is required'
+    : value.length < 5
+    ? 'User name should be at least 5 characters long.'
+    : '';
+export const phoneValidator = value =>
+  !value
+    ? 'Phone number is required.'
+    : phoneRegex.test(value)
+    ? ''
+    : 'Not a valid phone number.';
+export const cardValidator = value =>
+  !value
+    ? 'Credit card number is required. '
+    : ccardRegex.test(value)
+    ? ''
+    : 'Not a valid credit card number format.';
+export const cvcValidator = value =>
+  !value
+    ? 'CVC code is required,'
+    : cvcRegex.test(value) || value.length !== 3
+    ? ''
+    : 'Not a valid CVC code format.';
+export const guestsValidator = value =>
+  !value
+    ? 'Number of guests is required'
+    : value <= 5
+    ? ''
+    : 'Maximum 5 guests';
+export const nightsValidator = value =>
+  value ? '' : 'Number of Nights is required.';
+export const arrivalDateValidator = value =>
+  value ? '' : 'Arrival Date is required.';
+export const colorValidator = value => (value ? '' : 'Color is required.');
+export const requiredValidator = value =>
+  value ? '' : 'Error: This field is required.';
+export const passwordValidator = value =>
+  value && value.length > 8 ? '' : 'Password must be at least 8 symbols.';
+export const addressValidator = value => (value ? '' : 'Address is required.');
+
+const userNameGetter = getter('username');
+const emailGetter = getter('email');
+
+export const formValidator = values => {
+  const userName = userNameGetter(values);
+  const emailValue = emailGetter(values);
+
+  if (userName && emailValue && emailRegex.test(emailValue)) {
+    return {};
+  }
+
+  return {
+    VALIDATION_SUMMARY: 'Please fill in the following fields.',
+    ['username']: !userName ? 'User Name is required.' : '',
+    ['email']:
+      emailValue && emailRegex.test(emailValue)
+        ? ''
+        : 'Email is required and should be in a valid format.'
+  };
+};
diff --git a/vue-options-api-demos/form/guideline/placeholder/FormContent.vue b/vue-options-api-demos/form/guideline/placeholder/FormContent.vue
new file mode 100644
index 00000000..4bc143aa
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/placeholder/FormContent.vue
@@ -0,0 +1,71 @@
+<template>
+    <form-element :style="{ width: '400px' }" :horizontal="true">
+          <fieldset class="k-form-fieldset">
+             <field
+                :id="'fullName'"
+                :name="'fullName'"
+                :label="'Full Name'"
+                :component="'myTemplate'"
+                :placeholder="'e.g.: Clevey Thursfield'"
+                :validator="requiredValidator"
+              >
+               <template v-slot:myTemplate="{props}">
+                  <forminput
+                    v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  />
+              </template>
+              </field>
+            <div class="k-form-buttons">
+              <kbutton
+                :theme-color="'primary'"
+                :type="'submit'"
+                :disabled="!kendoForm.allowSubmit"
+              >
+                Submit
+              </kbutton>
+              <kbutton @click="clear">
+                  Clear
+              </kbutton>
+            </div>
+          </fieldset>
+        </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import FormInput from "./FormInput.vue";
+import { Button } from "@progress/kendo-vue-buttons";
+
+import {
+  requiredValidator
+} from "./validators";
+
+export default {
+    
+    components: {
+      field: Field,
+      'form-element': FormElement,
+      forminput: FormInput,
+      kbutton: Button
+    },
+    inject: {
+      kendoForm: { default: {} },  
+    },
+    data: function () {
+        return { 
+          requiredValidator
+         };
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      },
+      clear(){
+        this.kendoForm.onFormReset();
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/guideline/placeholder/FormInput.vue b/vue-options-api-demos/form/guideline/placeholder/FormInput.vue
new file mode 100644
index 00000000..706d5702
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/placeholder/FormInput.vue
@@ -0,0 +1,84 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :disabled="disabled" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <kinput :style="{ width: '230px' }" 
+                :valid="valid"
+                :id="id"
+                :value="value"
+                :disabled="disabled"
+                :placeholder="placeholder"
+                @input="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        optional: Boolean,
+        disabled: Boolean,
+        placeholder: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      kinput: Input
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/placeholder/main.js b/vue-options-api-demos/form/guideline/placeholder/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/placeholder/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/form/guideline/placeholder/main.vue b/vue-options-api-demos/form/guideline/placeholder/main.vue
new file mode 100644
index 00000000..798b6d8d
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/placeholder/main.vue
@@ -0,0 +1,23 @@
+<template>
+    <k-form
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/guideline/placeholder/validators.js b/vue-options-api-demos/form/guideline/placeholder/validators.js
new file mode 100644
index 00000000..b0779c1d
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/placeholder/validators.js
@@ -0,0 +1,82 @@
+import { getter } from '@progress/kendo-vue-common';
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const phoneRegex = new RegExp(/^[0-9 ()+-]+$/);
+const ccardRegex = new RegExp(/^[0-9-]+$/);
+const cvcRegex = new RegExp(/^[0-9]+$/);
+
+export const termsValidator = value =>
+  value ? '' : "It's required to agree with Terms and Conditions.";
+export const emailValidator = value =>
+  !value
+    ? 'Email field is required.'
+    : emailRegex.test(value)
+    ? ''
+    : 'Email is not in a valid format.';
+export const nameValidator = value =>
+  !value
+    ? 'Full Name is required'
+    : value.length < 7
+    ? 'Full Name should be at least 7 characters long.'
+    : '';
+export const userNameValidator = value =>
+  !value
+    ? 'User Name is required'
+    : value.length < 5
+    ? 'User name should be at least 5 characters long.'
+    : '';
+export const phoneValidator = value =>
+  !value
+    ? 'Phone number is required.'
+    : phoneRegex.test(value)
+    ? ''
+    : 'Not a valid phone number.';
+export const cardValidator = value =>
+  !value
+    ? 'Credit card number is required. '
+    : ccardRegex.test(value)
+    ? ''
+    : 'Not a valid credit card number format.';
+export const cvcValidator = value =>
+  !value
+    ? 'CVC code is required,'
+    : cvcRegex.test(value) || value.length !== 3
+    ? ''
+    : 'Not a valid CVC code format.';
+export const guestsValidator = value =>
+  !value
+    ? 'Number of guests is required'
+    : value <= 5
+    ? ''
+    : 'Maximum 5 guests';
+export const nightsValidator = value =>
+  value ? '' : 'Number of Nights is required.';
+export const arrivalDateValidator = value =>
+  value ? '' : 'Arrival Date is required.';
+export const colorValidator = value => (value ? '' : 'Color is required.');
+export const requiredValidator = value =>
+  value ? '' : 'Error: This field is required.';
+export const passwordValidator = value =>
+  value && value.length > 8 ? '' : 'Password must be at least 8 symbols.';
+export const addressValidator = value => (value ? '' : 'Address is required.');
+
+const userNameGetter = getter('username');
+const emailGetter = getter('email');
+
+export const formValidator = values => {
+  const userName = userNameGetter(values);
+  const emailValue = emailGetter(values);
+
+  if (userName && emailValue && emailRegex.test(emailValue)) {
+    return {};
+  }
+
+  return {
+    VALIDATION_SUMMARY: 'Please fill in the following fields.',
+    ['username']: !userName ? 'User Name is required.' : '',
+    ['email']:
+      emailValue && emailRegex.test(emailValue)
+        ? ''
+        : 'Email is required and should be in a valid format.'
+  };
+};
diff --git a/vue-options-api-demos/form/guideline/uploads/FormContent.vue b/vue-options-api-demos/form/guideline/uploads/FormContent.vue
new file mode 100644
index 00000000..1964ea7c
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/uploads/FormContent.vue
@@ -0,0 +1,78 @@
+<template>
+    <form-element :style="{ width: '400px' }">
+          <fieldset class="k-form-fieldset">
+              <field
+                  :id="'avatar'"
+                  :name="'avatar'"
+                  :label="'Avatar'"
+                  :hint="'Hint: Upload your avatar picture'"
+                  :component="'myTemplate'"
+                >
+                <template v-slot:myTemplate="{props}">
+                    <formupload
+                      v-bind="props"
+                      @change="props.onChange"
+                      @blur="props.onBlur"
+                      @focus="props.onFocus"
+                    ></formupload>
+                </template>
+              </field>
+              <field
+                  :id="'photos'"
+                  :name="'photos'"
+                  :label="'Upload Photos'"
+                  :hint="'Hint: Select your additional photos'"
+                  :component="'myTemplate'"
+                >
+                <template v-slot:myTemplate="{props}">
+                    <formupload
+                      v-bind="props"
+                      @change="props.onChange"
+                      @blur="props.onBlur"
+                      @focus="props.onFocus"
+                    ></formupload>
+                </template>
+              </field>
+            <div class="k-form-buttons">
+              <kbutton
+                :theme-color="'primary'"
+                :type="'submit'"
+                :disabled="!kendoForm.allowSubmit"
+              >
+                Submit
+              </kbutton>
+              <kbutton @click="clear">
+                  Clear
+              </kbutton>
+            </div>
+          </fieldset>
+        </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import FormUpload from "./FormUpload.vue";
+
+import { Button } from "@progress/kendo-vue-buttons";
+
+export default {
+    
+    components: {
+      field: Field,
+      'form-element': FormElement,
+      formupload: FormUpload,
+      kbutton: Button
+    },
+    inject: {
+      kendoForm: { default: {} },  
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      },
+      clear(){
+        this.kendoForm.onFormReset();
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/guideline/uploads/FormUpload.vue b/vue-options-api-demos/form/guideline/uploads/FormUpload.vue
new file mode 100644
index 00000000..947b1481
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/uploads/FormUpload.vue
@@ -0,0 +1,91 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+        <span>
+            <upload 
+                :valid="valid"
+                :value="value"
+                :id="id"
+                :auto-upload="false"
+                :multiple="false"
+                :show-action-buttons="false"
+                :files="value"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                @add="onAddHandler"
+                @remove="onRemoveHandler"
+            />
+          </span>
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Upload } from "@progress/kendo-vue-upload";
+
+export default {
+    props: {
+        touched: Boolean,
+        optional: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: Array
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        klabel: Label,
+        upload: Upload
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        },
+         onAddHandler(e) {
+            this.$emit('change', {
+                value: e.newState
+            });
+        },
+        onRemoveHandler(e) {
+            this.$emit('change', {
+                value: e.newState
+            });
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/guideline/uploads/main.js b/vue-options-api-demos/form/guideline/uploads/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/uploads/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/form/guideline/uploads/main.vue b/vue-options-api-demos/form/guideline/uploads/main.vue
new file mode 100644
index 00000000..798b6d8d
--- /dev/null
+++ b/vue-options-api-demos/form/guideline/uploads/main.vue
@@ -0,0 +1,23 @@
+<template>
+    <k-form
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/labels/FloatingLabelFormInput.vue b/vue-options-api-demos/form/labels/FloatingLabelFormInput.vue
new file mode 100644
index 00000000..d34eea70
--- /dev/null
+++ b/vue-options-api-demos/form/labels/FloatingLabelFormInput.vue
@@ -0,0 +1,92 @@
+<template>
+    <fieldwrapper>
+        <flabel
+          :label="label"
+          :label-class="'k-form-label'"
+          :editor-id="id"
+          :editor-value="value"
+          :editor-valid="valid"
+          :disabled="disabled"
+          :optional="optional"
+        >
+        <div class="k-form-field-wrap">
+          <kinput
+            :style="{ width: '230px' }"
+            :valid="valid"
+            :id="id"
+            :type="'email'"
+            :value="value"
+            :disabled="disabled"
+            :placeholder="placeholder"
+            @input="handleChange"
+            @blur="handleBlur"
+            @focus="handleFocus"
+          />
+          <error v-if="showValidationMessage">
+            {{ validationMessage }}
+          </error>
+          <hint v-else>{{ hint }}</hint>
+        </div>
+        </flabel>
+    </fieldwrapper>
+  </template>
+  <script>
+  import { FieldWrapper } from '@progress/kendo-vue-form';
+  import { Error, Hint, FloatingLabel } from '@progress/kendo-vue-labels';
+  import { Input } from '@progress/kendo-vue-inputs';
+  export default {
+    props: {
+      optional: Boolean,
+      disabled: Boolean,
+      placeholder: String,
+      touched: Boolean,
+      label: String,
+      validationMessage: String,
+      hint: String,
+      id: String,
+      valid: Boolean,
+      value: {
+        type: String,
+        default: ''
+      }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      flabel: FloatingLabel,
+      kinput: Input
+    },
+    computed: {
+      showValidationMessage() {
+        return this.$props.touched && this.$props.validationMessage;
+      },
+      showHint() {
+        return !this.showValidationMessage && this.$props.hint;
+      },
+      hintId() {
+        return this.showHint ? `${this.$props.id}_hint` : '';
+      },
+      errorId() {
+        return this.showValidationMessage ? `${this.$props.id}_error` : '';
+      },
+    },
+    emits: {
+      change: null,
+      blur: null,
+      focus: null,
+    },
+    methods: {
+      handleChange(e) {
+        this.$emit('change', e);
+      },
+      handleBlur(e) {
+        this.$emit('blur', e);
+      },
+      handleFocus(e) {
+        this.$emit('focus', e);
+      }
+    }
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/form/labels/FormContent.vue b/vue-options-api-demos/form/labels/FormContent.vue
new file mode 100644
index 00000000..9ce93ada
--- /dev/null
+++ b/vue-options-api-demos/form/labels/FormContent.vue
@@ -0,0 +1,76 @@
+<template>
+    <form-element :style="{ maxWidth: '650px' }">
+              <field
+                :id="'email'"
+                :name="'email'"
+                :component="'myTemplate'"
+                :label="'Email (Regular Label)'" 
+                :validator="emailValidator">
+                <template v-slot:myTemplate="{props}">
+                 <forminput
+                    v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  />
+              </template>
+                </field>
+              <field
+                :id="'secondEmail'"
+                :name="'secondEmail'"
+                :component="'myTemplate'"
+                :label="'Email (Floating Label)'" 
+                :validator="emailValidator">
+                <template v-slot:myTemplate="{props}">
+                 <formfloatinglabelinput
+                    v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  />
+              </template>
+                </field>
+          <div class="k-form-buttons">
+           <kbutton
+              type="submit"
+              :disabled="!kendoForm.allowSubmit"
+            >
+              Submit
+            </kbutton>
+          </div>
+        </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import FormInput from "./LabelFormInput.vue";
+import FormFloatingLabelInput from "./FloatingLabelFormInput.vue";
+import { Button } from '@progress/kendo-vue-buttons';
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const emailValidator = (value) =>
+  emailRegex.test(value) ? "" : "Please enter a valid email.";
+
+export default {
+    components: {
+      field: Field,
+      'form-element': FormElement,
+      'forminput': FormInput,
+      'formfloatinglabelinput':FormFloatingLabelInput,
+      'kbutton': Button
+    },
+    inject: {
+      kendoForm: { default: {} },  
+    },
+    data: function () {
+        return { 
+          emailValidator: emailValidator
+         };
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/labels/LabelFormInput.vue b/vue-options-api-demos/form/labels/LabelFormInput.vue
new file mode 100644
index 00000000..83984063
--- /dev/null
+++ b/vue-options-api-demos/form/labels/LabelFormInput.vue
@@ -0,0 +1,85 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" 
+            :disabled="disabled" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <kinput :style="{ width: '230px' }" 
+                :valid="valid"
+                :id="id"
+                :type="'email'"
+                :value="value"
+                :disabled="disabled"
+                :placeholder="placeholder"
+                @input="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        optional: Boolean,
+        disabled: Boolean,
+        placeholder: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      kinput: Input
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/labels/main.js b/vue-options-api-demos/form/labels/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/form/labels/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/form/labels/main.vue b/vue-options-api-demos/form/labels/main.vue
new file mode 100644
index 00000000..cb5e3869
--- /dev/null
+++ b/vue-options-api-demos/form/labels/main.vue
@@ -0,0 +1,24 @@
+<template>
+    <k-form
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/layout/horizontal/FloatingLabelFormInput.vue b/vue-options-api-demos/form/layout/horizontal/FloatingLabelFormInput.vue
new file mode 100644
index 00000000..3f6e4f14
--- /dev/null
+++ b/vue-options-api-demos/form/layout/horizontal/FloatingLabelFormInput.vue
@@ -0,0 +1,84 @@
+<template>
+    <fieldwrapper>
+        <flabel :label-class="'k-form-label'" :label="label" :editor-id="id" :editor-valid="valid" 
+            :disabled="disabled" :optional="optional">
+            <div class="k-form-field-wrap">
+                <kinput :style="{ width: '230px' }" 
+                    :valid="valid"
+                    :id="id"
+                    :type="'email'"
+                    :value="value"
+                    :disabled="disabled"
+                    :placeholder="placeholder"
+                    @input="handleChange"
+                    @blur="handleBlur"
+                    @focus="handleFocus"
+                />
+                <error v-if="showValidationMessage">
+                {{validationMessage}}
+                </error>
+                <hint v-else>{{hint}}</hint>
+            </div>
+        </flabel>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, FloatingLabel } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        optional: Boolean,
+        disabled: Boolean,
+        placeholder: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      flabel: FloatingLabel,
+      kinput: Input
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/layout/horizontal/FormContent.vue b/vue-options-api-demos/form/layout/horizontal/FormContent.vue
new file mode 100644
index 00000000..2dec2369
--- /dev/null
+++ b/vue-options-api-demos/form/layout/horizontal/FormContent.vue
@@ -0,0 +1,76 @@
+<template>
+    <form-element :horizontal="true" :style="{ maxWidth: '650px' }">
+              <field
+                :id="'email'"
+                :name="'email'"
+                :component="'myTemplate'"
+                :label="'Email (Regular Label)'" 
+                :validator="emailValidator">
+                <template v-slot:myTemplate="{props}">
+                 <forminput
+                    v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  />
+              </template>
+                </field>
+              <field
+                :id="'secondEmail'"
+                :name="'secondEmail'"
+                :component="'myTemplate'"
+                :label="'Email (Floating Label)'" 
+                :validator="emailValidator">
+                <template v-slot:myTemplate="{props}">
+                 <formfloatinglabelinput
+                    v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  />
+              </template>
+                </field>
+          <div class="k-form-buttons">
+           <kbutton
+              type="submit"
+              :disabled="!kendoForm.allowSubmit"
+            >
+              Submit
+            </kbutton>
+          </div>
+        </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import FormInput from "./LabelFormInput.vue";
+import FormFloatingLabelInput from "./FloatingLabelFormInput.vue";
+import { Button } from '@progress/kendo-vue-buttons';
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const emailValidator = (value) =>
+  emailRegex.test(value) ? "" : "Please enter a valid email.";
+
+export default {
+    components: {
+      field: Field,
+      'form-element': FormElement,
+      'forminput': FormInput,
+      'formfloatinglabelinput':FormFloatingLabelInput,
+      'kbutton': Button
+    },
+    inject: {
+      kendoForm: { default: {} },  
+    },
+    data: function () {
+        return { 
+          emailValidator: emailValidator
+         };
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/layout/horizontal/LabelFormInput.vue b/vue-options-api-demos/form/layout/horizontal/LabelFormInput.vue
new file mode 100644
index 00000000..d5146c80
--- /dev/null
+++ b/vue-options-api-demos/form/layout/horizontal/LabelFormInput.vue
@@ -0,0 +1,84 @@
+<template>
+    <fieldwrapper>
+        <klabel :editor-id="id" :editor-valid="valid" :disabled="disabled" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <kinput :style="{ width: '230px' }" 
+                :valid="valid"
+                :id="id"
+                :type="'email'"
+                :value="value"
+                :disabled="disabled"
+                :placeholder="placeholder"
+                @input="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        optional: Boolean,
+        disabled: Boolean,
+        placeholder: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      kinput: Input
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/layout/horizontal/main.js b/vue-options-api-demos/form/layout/horizontal/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/form/layout/horizontal/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/form/layout/horizontal/main.vue b/vue-options-api-demos/form/layout/horizontal/main.vue
new file mode 100644
index 00000000..cb5e3869
--- /dev/null
+++ b/vue-options-api-demos/form/layout/horizontal/main.vue
@@ -0,0 +1,24 @@
+<template>
+    <k-form
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/layout/vertical/FloatingLabelFormInput.vue b/vue-options-api-demos/form/layout/vertical/FloatingLabelFormInput.vue
new file mode 100644
index 00000000..34e4b9ac
--- /dev/null
+++ b/vue-options-api-demos/form/layout/vertical/FloatingLabelFormInput.vue
@@ -0,0 +1,84 @@
+<template>
+    <fieldwrapper>
+        <flabel :label="label" :label-class="'k-form-label'" :editor-id="id" :editor-valid="valid" 
+            :disabled="disabled" :optional="optional">
+            <div class="k-form-field-wrap">
+                <kinput :style="{ width: '230px' }" 
+                    :valid="valid"
+                    :id="id"
+                    :type="'email'"
+                    :value="value"
+                    :disabled="disabled"
+                    :placeholder="placeholder"
+                    @input="handleChange"
+                    @blur="handleBlur"
+                    @focus="handleFocus"
+                    />
+                    <error v-if="showValidationMessage">
+                    {{validationMessage}}
+                    </error>
+                    <hint v-else>{{hint}}</hint>
+                </div>
+        </flabel> 
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, FloatingLabel } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        optional: Boolean,
+        disabled: Boolean,
+        placeholder: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      flabel: FloatingLabel,
+      kinput: Input
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/layout/vertical/FormContent.vue b/vue-options-api-demos/form/layout/vertical/FormContent.vue
new file mode 100644
index 00000000..9ce93ada
--- /dev/null
+++ b/vue-options-api-demos/form/layout/vertical/FormContent.vue
@@ -0,0 +1,76 @@
+<template>
+    <form-element :style="{ maxWidth: '650px' }">
+              <field
+                :id="'email'"
+                :name="'email'"
+                :component="'myTemplate'"
+                :label="'Email (Regular Label)'" 
+                :validator="emailValidator">
+                <template v-slot:myTemplate="{props}">
+                 <forminput
+                    v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  />
+              </template>
+                </field>
+              <field
+                :id="'secondEmail'"
+                :name="'secondEmail'"
+                :component="'myTemplate'"
+                :label="'Email (Floating Label)'" 
+                :validator="emailValidator">
+                <template v-slot:myTemplate="{props}">
+                 <formfloatinglabelinput
+                    v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  />
+              </template>
+                </field>
+          <div class="k-form-buttons">
+           <kbutton
+              type="submit"
+              :disabled="!kendoForm.allowSubmit"
+            >
+              Submit
+            </kbutton>
+          </div>
+        </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import FormInput from "./LabelFormInput.vue";
+import FormFloatingLabelInput from "./FloatingLabelFormInput.vue";
+import { Button } from '@progress/kendo-vue-buttons';
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const emailValidator = (value) =>
+  emailRegex.test(value) ? "" : "Please enter a valid email.";
+
+export default {
+    components: {
+      field: Field,
+      'form-element': FormElement,
+      'forminput': FormInput,
+      'formfloatinglabelinput':FormFloatingLabelInput,
+      'kbutton': Button
+    },
+    inject: {
+      kendoForm: { default: {} },  
+    },
+    data: function () {
+        return { 
+          emailValidator: emailValidator
+         };
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/layout/vertical/LabelFormInput.vue b/vue-options-api-demos/form/layout/vertical/LabelFormInput.vue
new file mode 100644
index 00000000..9fecbbfa
--- /dev/null
+++ b/vue-options-api-demos/form/layout/vertical/LabelFormInput.vue
@@ -0,0 +1,83 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid"
+         :disabled="disabled" :optional="optional">
+        {{label}}
+        </klabel>
+        <kinput :style="{ width: '230px' }" 
+            :valid="valid"
+            :id="id"
+            :type="'email'"
+            :value="value"
+            :disabled="disabled"
+            :placeholder="placeholder"
+            @input="handleChange"
+            @blur="handleBlur"
+            @focus="handleFocus"
+            />
+        <error v-if="showValidationMessage">
+            {{validationMessage}}
+        </error>
+        <hint v-else>{{hint}}</hint>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        optional: Boolean,
+        disabled: Boolean,
+        placeholder: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      kinput: Input
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/layout/vertical/main.js b/vue-options-api-demos/form/layout/vertical/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/form/layout/vertical/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/form/layout/vertical/main.vue b/vue-options-api-demos/form/layout/vertical/main.vue
new file mode 100644
index 00000000..cb5e3869
--- /dev/null
+++ b/vue-options-api-demos/form/layout/vertical/main.vue
@@ -0,0 +1,24 @@
+<template>
+    <k-form
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/form/shared/CommandCell.vue b/vue-options-api-demos/form/shared/CommandCell.vue
new file mode 100644
index 00000000..1154fc04
--- /dev/null
+++ b/vue-options-api-demos/form/shared/CommandCell.vue
@@ -0,0 +1,35 @@
+<template>
+<td>
+    <kbutton
+        type="button"
+        class="k-grid-remove-command"
+        @click="removeHandler">
+        Remove
+    </kbutton>
+</td>
+</template>
+<script>
+import { Button } from "@progress/kendo-vue-buttons";
+export default {
+    components: {
+        kbutton: Button
+    },
+    props: {
+        field: String,
+        dataItem: Object,
+        format: String,
+        className: String,
+        columnIndex: Number,
+        columnsCount: Number,
+        rowType: String,
+        level: Number,
+        expanded: Boolean,
+        editor: String
+    },
+    methods: {
+        removeHandler: function() {
+            this.$emit('remove', {dataItem:this.dataItem});
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/form/shared/FormAutoComplete.vue b/vue-options-api-demos/form/shared/FormAutoComplete.vue
new file mode 100644
index 00000000..9a1344e8
--- /dev/null
+++ b/vue-options-api-demos/form/shared/FormAutoComplete.vue
@@ -0,0 +1,80 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <autocomplete :style="{ width: '230px' }" 
+                :data-items="data" 
+                :valid="valid"
+                :value="value"
+                :id="id"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { AutoComplete } from "@progress/kendo-vue-dropdowns";
+export default {
+    props: {
+        data: Object,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+             type: String,
+             default: ''
+        }
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        klabel: Label,
+        autocomplete: AutoComplete
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/shared/FormCheckbox.vue b/vue-options-api-demos/form/shared/FormCheckbox.vue
new file mode 100644
index 00000000..9c415a82
--- /dev/null
+++ b/vue-options-api-demos/form/shared/FormCheckbox.vue
@@ -0,0 +1,84 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+        <span>
+          <checkbox 
+                :value="value"
+                :valid="valid"
+                :id="id"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus" />
+          </span>
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Checkbox } from "@progress/kendo-vue-inputs";
+
+export default {
+    props: {
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        disabled: Boolean,
+        optional: Boolean,
+        visited: Boolean,
+        modified: Boolean,
+        value: {
+             type: [Boolean, String],
+             default: false
+        }
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        klabel: Label,
+        checkbox: Checkbox
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/shared/FormComboBox.vue b/vue-options-api-demos/form/shared/FormComboBox.vue
new file mode 100644
index 00000000..748a36ba
--- /dev/null
+++ b/vue-options-api-demos/form/shared/FormComboBox.vue
@@ -0,0 +1,87 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+             <combobox
+          :style="{ width: '230px' }" 
+                :name="name"
+                :data-items="data" 
+                :valid="valid"
+                :value="value"
+                :id="id"
+                :text-field="textField"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { ComboBox } from "@progress/kendo-vue-dropdowns";
+export default {
+    props: {
+        textField: String,
+        data: Object,
+        name: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+             type: Object,
+             default: function(){
+                 return {};
+             }
+        }
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        klabel: Label,
+        combobox: ComboBox
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/shared/FormDateInput.vue b/vue-options-api-demos/form/shared/FormDateInput.vue
new file mode 100644
index 00000000..29cf0d01
--- /dev/null
+++ b/vue-options-api-demos/form/shared/FormDateInput.vue
@@ -0,0 +1,79 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <dateinput :style="{ width: '230px' }" 
+                :valid="valid"
+                :value="value"
+                :id="id"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { DateInput } from '@progress/kendo-vue-dateinputs';
+export default {
+    props: {
+         touched: Boolean,
+         label: String,
+         validationMessage: String,
+         hint: String,
+         id: String,
+         valid: Boolean,
+         value: {
+             type: Date,
+             default: null
+         }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      dateinput: DateInput
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/shared/FormDatePicker.vue b/vue-options-api-demos/form/shared/FormDatePicker.vue
new file mode 100644
index 00000000..af21ec48
--- /dev/null
+++ b/vue-options-api-demos/form/shared/FormDatePicker.vue
@@ -0,0 +1,80 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <datepicker :style="{ width: '230px' }" 
+                :value="value"
+                :valid="valid"
+                :id="id"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else :direction="hintDirection">{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+export default {
+    props: {
+        hintDirection: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: Date,
+            default: null
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      datepicker: DatePicker
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/shared/FormDateTimePicker.vue b/vue-options-api-demos/form/shared/FormDateTimePicker.vue
new file mode 100644
index 00000000..03e66bc8
--- /dev/null
+++ b/vue-options-api-demos/form/shared/FormDateTimePicker.vue
@@ -0,0 +1,79 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <datetimepicker :style="{ width: '230px' }" 
+                :valid="valid"
+                :value="value"
+                :id="id"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { DateTimePicker } from '@progress/kendo-vue-dateinputs';
+export default {
+    props: {
+         touched: Boolean,
+         label: String,
+         validationMessage: String,
+         hint: String,
+         id: String,
+         valid: Boolean,
+         value: {
+             type: Date,
+             default: null
+         }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      datetimepicker: DateTimePicker
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/shared/FormDropDownList.vue b/vue-options-api-demos/form/shared/FormDropDownList.vue
new file mode 100644
index 00000000..ad567de3
--- /dev/null
+++ b/vue-options-api-demos/form/shared/FormDropDownList.vue
@@ -0,0 +1,82 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+             <dropdownlist
+          :style="{ width: '230px' }" 
+                :data-items="data" 
+                :valid="valid"
+                :value="value"
+                :id="id"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+export default {
+    props: {
+        textField: String,
+        data: Object,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+             type: String,
+             default: ''
+        }
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        klabel: Label,
+        dropdownlist: DropDownList
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/shared/FormFloatingNumericTextBox.vue b/vue-options-api-demos/form/shared/FormFloatingNumericTextBox.vue
new file mode 100644
index 00000000..5df99979
--- /dev/null
+++ b/vue-options-api-demos/form/shared/FormFloatingNumericTextBox.vue
@@ -0,0 +1,86 @@
+<template>
+    <fieldwrapper>
+        <floatinglabel 
+            :editor-id="id" 
+            :editor-valid="valid" 
+            :editor-value="value" 
+            :label="label"
+            :optional="optional">
+            <div class="k-form-field-wrap">
+                <numerictextbox :style="{ width: '230px' }" 
+                    :valid="valid"
+                    :value="value"
+                    :id="id"
+                    :min="0"
+                    :format="format"
+                    @change="handleChange"
+                    @blur="handleBlur"
+                    @focus="handleFocus"
+                    />
+                <error v-if="showValidationMessage">
+                    {{validationMessage}}
+                </error>
+                <hint v-else>{{hint}}</hint>
+            </div>
+        </floatinglabel>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, FloatingLabel } from "@progress/kendo-vue-labels";
+import { NumericTextBox } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        optional: Boolean,
+        touched: Boolean,
+        label: String,
+        format: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+         value: {
+             type: Number,
+             default: null
+         }
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        floatinglabel: FloatingLabel,
+        numerictextbox: NumericTextBox
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/shared/FormGrid.vue b/vue-options-api-demos/form/shared/FormGrid.vue
new file mode 100644
index 00000000..64a0588b
--- /dev/null
+++ b/vue-options-api-demos/form/shared/FormGrid.vue
@@ -0,0 +1,67 @@
+<template>
+    <div>
+      <error v-if="visited && validationMessage">{{validationMessage}}</error>
+      <grid :data-items="value" :columns="columns">
+            <template v-slot:myTemplate="{props}">
+            <custom :data-item="props.dataItem" 
+                    @remove="onRemove"/>
+        </template>
+        <grid-toolbar>
+          <kbutton
+            title="Add new"
+            :theme-color="'primary'"
+            @click="onAdd"
+          >
+            Add new
+          </kbutton>
+        </grid-toolbar>
+      </grid>
+    </div>
+</template>
+<script>
+import { Field } from '@progress/kendo-vue-form';
+import CommandCell from './CommandCell.vue';
+import { Input } from "@progress/kendo-vue-inputs";
+import { Error } from "@progress/kendo-vue-labels";
+import { Grid, GridToolbar } from "@progress/kendo-vue-grid";
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    props: {
+         touched: Boolean,
+         label: String,
+         validationMessage: String,
+         hint: String,
+         id: String,
+         valid: Boolean,
+         value: Array,
+         visited: Boolean
+    },
+    components: {
+      error: Error,
+      grid: Grid,
+    'grid-toolbar': GridToolbar,
+    field: Field,
+     'custom': CommandCell,
+      'kbutton': Button
+    },
+    data() {
+        return {
+            input: Input,
+            columns: [
+                { field: 'name', title:'Name'},
+                { cell: 'myTemplate', width:'240px'}
+            ]
+        }
+    },
+    methods: {
+        onAdd (e) {
+            e.preventDefault();
+            this.$emit('unshift', { value: { name: "new item" } });
+        },
+        onRemove (cellProps){
+          this.$emit('remove', { index: cellProps.dataIndex });
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/form/shared/FormInput.vue b/vue-options-api-demos/form/shared/FormInput.vue
new file mode 100644
index 00000000..706d5702
--- /dev/null
+++ b/vue-options-api-demos/form/shared/FormInput.vue
@@ -0,0 +1,84 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :disabled="disabled" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <kinput :style="{ width: '230px' }" 
+                :valid="valid"
+                :id="id"
+                :value="value"
+                :disabled="disabled"
+                :placeholder="placeholder"
+                @input="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        optional: Boolean,
+        disabled: Boolean,
+        placeholder: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      kinput: Input
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/shared/FormMaskedTextBox.vue b/vue-options-api-demos/form/shared/FormMaskedTextBox.vue
new file mode 100644
index 00000000..395d904f
--- /dev/null
+++ b/vue-options-api-demos/form/shared/FormMaskedTextBox.vue
@@ -0,0 +1,88 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'"
+                :editor-id="id" 
+                :editor-valid="valid"
+                :optional="optional"
+                >
+            {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <maskedtextbox :style="{ width: '230px' }" 
+                :valid="valid"
+                :value="value"
+                :id="id"
+                :mask="mask"
+                :readonly="readonly"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { MaskedTextBox } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        readonly: Boolean,
+        optional: Boolean,
+        mask: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      maskedtextbox: MaskedTextBox
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/shared/FormMultiSelect.vue b/vue-options-api-demos/form/shared/FormMultiSelect.vue
new file mode 100644
index 00000000..800a724b
--- /dev/null
+++ b/vue-options-api-demos/form/shared/FormMultiSelect.vue
@@ -0,0 +1,82 @@
+<template>
+  <fieldwrapper>
+    <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <MultiSelect
+        :style="{ width: '230px' }"
+        :data-items="data"
+        :valid="valid"
+        :id="id"
+        :value="value"
+        @change="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { MultiSelect } from '@progress/kendo-vue-dropdowns';
+export default {
+  props: {
+    textField: String,
+    data: Object,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: Array,
+      default: [],
+    },
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    MultiSelect,
+  },
+  emits: {
+    input: null,
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/form/shared/FormNumericTextBox.vue b/vue-options-api-demos/form/shared/FormNumericTextBox.vue
new file mode 100644
index 00000000..fda4a4ec
--- /dev/null
+++ b/vue-options-api-demos/form/shared/FormNumericTextBox.vue
@@ -0,0 +1,80 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <numerictextbox :style="{ width: '230px' }" 
+                :valid="valid"
+                :value="value"
+                :id="id"
+                :min="0"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { NumericTextBox } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: Number,
+            default: null
+        }
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        klabel: Label,
+        numerictextbox: NumericTextBox
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/shared/FormRadioGroup.vue b/vue-options-api-demos/form/shared/FormRadioGroup.vue
new file mode 100644
index 00000000..0dc1d7ae
--- /dev/null
+++ b/vue-options-api-demos/form/shared/FormRadioGroup.vue
@@ -0,0 +1,107 @@
+<template>
+    <fieldwrapper>
+        <klabel
+            :class="'k-form-label'"
+            :id="labelId"
+            :editor-id="id"
+            :editor-valid="valid"
+            :editor-disabled="disabled"
+        >
+            {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <radiogroup
+                :name="name"
+                :aria-describedby="describedBy"
+                :label="label"
+                :valid="valid"
+                :value="value"
+                :layout="layout"
+                :data-items="dataItems"
+                :id="id"
+                :checked="value"
+                @change="handleChange"
+            />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { RadioGroup } from "@progress/kendo-vue-inputs";
+export default {
+    name: 'FormRadioGroup',
+    props: {
+         name: String,
+         touched: Boolean,
+         label: String,
+         validationMessage: String,
+         hint: String,
+         id: String,
+         valid: {
+            type: Boolean,
+            default: true
+         },
+         disabled: Boolean,
+         layout: String,
+         dataItems: Array,
+         value: {
+             type: String,
+             default: null
+         }
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      radiogroup: RadioGroup
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        },
+        describedBy(){
+            return  `${this.hintId} ${this.errorId}`
+        },
+        labelId(){
+            return this.label ? `${this.id}_label` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/shared/FormSlider.vue b/vue-options-api-demos/form/shared/FormSlider.vue
new file mode 100644
index 00000000..f3d5c9a3
--- /dev/null
+++ b/vue-options-api-demos/form/shared/FormSlider.vue
@@ -0,0 +1,89 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :editor-disabled="disabled">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <slider
+                :buttons="false"
+                :min="min"
+                :max="max"
+                :valid="valid"
+                :value="value"
+                :id="id"
+                :disabled="disabled"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+            >
+              <slider-label v-for="(item, index) in data" :position="item" :key="index">{{item}}</slider-label>
+            </slider>
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Slider, SliderLabel } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        disabled: Boolean,
+        min: Number,
+        max: Number,
+        data: Object, 
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+             type: Number,
+             default: null
+        }
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        klabel: Label,
+        slider: Slider,
+        'slider-label': SliderLabel
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/shared/FormTextArea.vue b/vue-options-api-demos/form/shared/FormTextArea.vue
new file mode 100644
index 00000000..3c308b6d
--- /dev/null
+++ b/vue-options-api-demos/form/shared/FormTextArea.vue
@@ -0,0 +1,81 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+        <span class="k-textarea">
+            <textarea 
+                class="k-input"
+                style="margin-top: 0px; margin-bottom: 0px; height: 36px;"
+                :valid="valid"
+                :value="value"
+                :id="id"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+            ></textarea>
+          </span>
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+export default {
+    props: {
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        klabel: Label,
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/shared/FormTimePicker.vue b/vue-options-api-demos/form/shared/FormTimePicker.vue
new file mode 100644
index 00000000..b76cc70c
--- /dev/null
+++ b/vue-options-api-demos/form/shared/FormTimePicker.vue
@@ -0,0 +1,79 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <timepicker :style="{ width: '230px' }" 
+                :valid="valid"
+                :value="value"
+                :id="id"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { TimePicker } from '@progress/kendo-vue-dateinputs';
+export default {
+    props: {
+         touched: Boolean,
+         label: String,
+         validationMessage: String,
+         hint: String,
+         id: String,
+         valid: Boolean,
+        value: {
+             type: Date,
+             default: null
+         }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      timepicker: TimePicker
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/shared/FormUpload.vue b/vue-options-api-demos/form/shared/FormUpload.vue
new file mode 100644
index 00000000..947b1481
--- /dev/null
+++ b/vue-options-api-demos/form/shared/FormUpload.vue
@@ -0,0 +1,91 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+        <span>
+            <upload 
+                :valid="valid"
+                :value="value"
+                :id="id"
+                :auto-upload="false"
+                :multiple="false"
+                :show-action-buttons="false"
+                :files="value"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                @add="onAddHandler"
+                @remove="onRemoveHandler"
+            />
+          </span>
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Upload } from "@progress/kendo-vue-upload";
+
+export default {
+    props: {
+        touched: Boolean,
+        optional: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: Array
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        klabel: Label,
+        upload: Upload
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        },
+         onAddHandler(e) {
+            this.$emit('change', {
+                value: e.newState
+            });
+        },
+        onRemoveHandler(e) {
+            this.$emit('change', {
+                value: e.newState
+            });
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/form/shared/data.js b/vue-options-api-demos/form/shared/data.js
new file mode 100644
index 00000000..1b3905df
--- /dev/null
+++ b/vue-options-api-demos/form/shared/data.js
@@ -0,0 +1,212 @@
+export const genders = [
+    { label: 'Male', value: 'male' },
+    { label: 'Female', value: 'female' },
+    { label: 'Other', value: 'other' }
+];
+
+export const countries = [
+    'Albania',
+    'Andorra',
+    'Armenia',
+    'Austria',
+    'Azerbaijan',
+    'Belarus',
+    'Belgium',
+    'Bosnia & Herzegovina',
+    'Bulgaria',
+    'Croatia',
+    'Cyprus',
+    'Czech Republic',
+    'Denmark',
+    'Estonia',
+    'Finland',
+    'France',
+    'Georgia',
+    'Germany',
+    'Greece',
+    'Hungary',
+    'Iceland',
+    'Ireland',
+    'Italy',
+    'Kosovo',
+    'Latvia',
+    'Liechtenstein',
+    'Lithuania',
+    'Luxembourg',
+    'Macedonia',
+    'Malta',
+    'Moldova',
+    'Monaco',
+    'Montenegro',
+    'Netherlands',
+    'Norway',
+    'Poland',
+    'Portugal',
+    'Romania',
+    'Russia',
+    'San Marino',
+    'Serbia',
+    'Slovakia',
+    'Slovenia',
+    'Spain',
+    'Sweden',
+    'Switzerland',
+    'Turkey',
+    'Ukraine',
+    'United Kingdom',
+    'Vatican City'
+];
+
+export const sizes = [
+    'X-Small',
+    'Small',
+    'Medium',
+    'Large',
+    'X-Large',
+    '2X-Large'
+];
+
+export const sports = [
+    'Baseball',
+    'Basketball',
+    'Cricket',
+    'Field Hockey',
+    'Football',
+    'Table Tennis',
+    'Tennis',
+    'Volleyball'
+];
+
+export const equipment = [
+    {
+        text: 'Furniture',
+        id: 1,
+        items: [
+            { text: 'Tables & Chairs', id: 2 },
+            { text: 'Sofas', id: 3 },
+            { text: 'Occasional Furniture', id: 4 }
+        ]
+    },
+    {
+        text: 'Decor',
+        id: 5,
+        items: [
+            { text: 'Bed Linen', id: 6 },
+            { text: 'Curtains & Blinds', id: 7 },
+            { text: 'Carpets', id: 8 }
+        ]
+    }
+];
+
+export const employees = [
+    {
+        id: 1,
+        name: 'Daryl Sweeney',
+        reportsTo: null,
+        phone: '(555) 924-9726',
+        extension: 8253,
+        hireDate: new Date('2012-02-07T20:00:00.000Z'),
+        fullTime: true,
+        position: 'CEO',
+        timeInPosition: 2
+    },
+    {
+        id: 2,
+        name: 'Guy Wooten',
+        reportsTo: 1,
+        phone: '(438) 738-4935',
+        extension: 1155,
+        hireDate: new Date('2010-03-03T20:00:00.000Z'),
+        fullTime: true,
+        position: 'Chief Technical Officer',
+        timeInPosition: 1
+    },
+    {
+        id: 3,
+        name: 'Priscilla Frank',
+        reportsTo: 1,
+        phone: '(278) 927-2684',
+        extension: 4183,
+        hireDate: new Date('2014-11-30T00:00:00.000Z'),
+        fullTime: true,
+        position: 'Chief Product Officer',
+        timeInPosition: 2
+    },
+    {
+        id: 4,
+        name: 'Ursula Holmes',
+        reportsTo: 3,
+        phone: '(302) 760-2034',
+        extension: 2226,
+        hireDate: new Date('2011-06-06T00:00:00.000Z'),
+        fullTime: true,
+        position: 'EVP, Product Strategy',
+        timeInPosition: 4
+    },
+    {
+        id: 5,
+        name: 'Anika Vega',
+        reportsTo: 1,
+        phone: '(910) 714-1802',
+        extension: 6353,
+        hireDate: new Date('2010-02-25T00:00:00.000Z'),
+        fullTime: true,
+        position: 'Chief Process Officer',
+        timeInPosition: 5
+    },
+    {
+        id: 6,
+        name: 'Moses Duncan',
+        reportsTo: 64,
+        phone: '(421) 611-4814',
+        extension: 669,
+        hireDate: new Date('2010-05-24T00:00:00.000Z'),
+        fullTime: true,
+        position: 'Software Developer',
+        timeInPosition: 6
+    },
+    {
+        id: 7,
+        name: 'Nevada Hart',
+        reportsTo: 1,
+        phone: '(254) 220-1576',
+        extension: 6649,
+        hireDate: new Date('2015-08-17T00:00:00.000Z'),
+        fullTime: true,
+        position: 'Chief Financial Officer',
+        timeInPosition: 6
+    },
+    {
+        id: 8,
+        name: 'Hunter Fry',
+        reportsTo: 1,
+        phone: '(766) 358-9858',
+        extension: 3741,
+        hireDate: new Date('2011-02-12T00:00:00.000Z'),
+        fullTime: false,
+        position: 'General Counsel',
+        timeInPosition: 3
+    },
+    {
+        id: 9,
+        name: 'Kuame Carrillo',
+        reportsTo: 8,
+        phone: '(192) 383-1305',
+        extension: 9228,
+        hireDate: new Date('2011-02-22T00:00:00.000Z'),
+        fullTime: true,
+        position: 'Associate General Councel',
+        timeInPosition: 0
+    },
+    {
+        id: 10,
+        name: 'Vernon Ballard',
+        reportsTo: 5,
+        phone: '(702) 185-8890',
+        extension: 9242,
+        hireDate: new Date('2015-06-26T00:00:00.000Z'),
+        fullTime: true,
+        position: 'Director Facilities',
+        timeInPosition: 2
+    }
+];
diff --git a/vue-options-api-demos/form/shared/tree-data-operations.js b/vue-options-api-demos/form/shared/tree-data-operations.js
new file mode 100644
index 00000000..1aa4fa17
--- /dev/null
+++ b/vue-options-api-demos/form/shared/tree-data-operations.js
@@ -0,0 +1,31 @@
+import { filterBy } from "@progress/kendo-vue-data-tools";
+import { mapTree, extendDataItem } from "@progress/kendo-vue-common";
+
+export const processTreeData = (data, state, fields) => {
+  const { selectField, expandField, dataItemKey, subItemsField } = fields;
+  const { expanded, value, filter } = state;
+  const filtering = Boolean(filter && filter.value);
+
+  return mapTree(
+    filtering ? filterBy(data, [filter], subItemsField) : data,
+    subItemsField,
+    item => {
+      const props = {
+        [expandField]: expanded.includes(item[dataItemKey]),
+        [selectField]: value && item[dataItemKey] === value[dataItemKey]
+      };
+      return filtering
+        ? extendDataItem(item, subItemsField, props)
+        : { ...item, ...props };
+    }
+  );
+};
+
+export const expandedState = (item, dataItemKey, expanded) => {
+  const nextExpanded = expanded.slice();
+  const itemKey = item[dataItemKey];
+  const index = expanded.indexOf(itemKey);
+  index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);
+
+  return nextExpanded;
+};
diff --git a/vue-options-api-demos/form/shared/validators.js b/vue-options-api-demos/form/shared/validators.js
new file mode 100644
index 00000000..b0779c1d
--- /dev/null
+++ b/vue-options-api-demos/form/shared/validators.js
@@ -0,0 +1,82 @@
+import { getter } from '@progress/kendo-vue-common';
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const phoneRegex = new RegExp(/^[0-9 ()+-]+$/);
+const ccardRegex = new RegExp(/^[0-9-]+$/);
+const cvcRegex = new RegExp(/^[0-9]+$/);
+
+export const termsValidator = value =>
+  value ? '' : "It's required to agree with Terms and Conditions.";
+export const emailValidator = value =>
+  !value
+    ? 'Email field is required.'
+    : emailRegex.test(value)
+    ? ''
+    : 'Email is not in a valid format.';
+export const nameValidator = value =>
+  !value
+    ? 'Full Name is required'
+    : value.length < 7
+    ? 'Full Name should be at least 7 characters long.'
+    : '';
+export const userNameValidator = value =>
+  !value
+    ? 'User Name is required'
+    : value.length < 5
+    ? 'User name should be at least 5 characters long.'
+    : '';
+export const phoneValidator = value =>
+  !value
+    ? 'Phone number is required.'
+    : phoneRegex.test(value)
+    ? ''
+    : 'Not a valid phone number.';
+export const cardValidator = value =>
+  !value
+    ? 'Credit card number is required. '
+    : ccardRegex.test(value)
+    ? ''
+    : 'Not a valid credit card number format.';
+export const cvcValidator = value =>
+  !value
+    ? 'CVC code is required,'
+    : cvcRegex.test(value) || value.length !== 3
+    ? ''
+    : 'Not a valid CVC code format.';
+export const guestsValidator = value =>
+  !value
+    ? 'Number of guests is required'
+    : value <= 5
+    ? ''
+    : 'Maximum 5 guests';
+export const nightsValidator = value =>
+  value ? '' : 'Number of Nights is required.';
+export const arrivalDateValidator = value =>
+  value ? '' : 'Arrival Date is required.';
+export const colorValidator = value => (value ? '' : 'Color is required.');
+export const requiredValidator = value =>
+  value ? '' : 'Error: This field is required.';
+export const passwordValidator = value =>
+  value && value.length > 8 ? '' : 'Password must be at least 8 symbols.';
+export const addressValidator = value => (value ? '' : 'Address is required.');
+
+const userNameGetter = getter('username');
+const emailGetter = getter('email');
+
+export const formValidator = values => {
+  const userName = userNameGetter(values);
+  const emailValue = emailGetter(values);
+
+  if (userName && emailValue && emailRegex.test(emailValue)) {
+    return {};
+  }
+
+  return {
+    VALIDATION_SUMMARY: 'Please fill in the following fields.',
+    ['username']: !userName ? 'User Name is required.' : '',
+    ['email']:
+      emailValue && emailRegex.test(emailValue)
+        ? ''
+        : 'Email is required and should be in a valid format.'
+  };
+};
diff --git a/vue-options-api-demos/gauges/arc-gauge/color-ranges/main.js b/vue-options-api-demos/gauges/arc-gauge/color-ranges/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/gauges/arc-gauge/color-ranges/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/gauges/arc-gauge/color-ranges/main.vue b/vue-options-api-demos/gauges/arc-gauge/color-ranges/main.vue
new file mode 100644
index 00000000..de7ff783
--- /dev/null
+++ b/vue-options-api-demos/gauges/arc-gauge/color-ranges/main.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="row">
+    <ArcGauge :value="value" :colors="colors"> </ArcGauge>
+  </div>
+</template>
+
+<script>
+import { ArcGauge } from "@progress/kendo-vue-gauges";
+
+export default {
+  components: {
+    ArcGauge,
+  },
+  mounted() {
+    setInterval(() => {
+      this.value = Math.ceil(Math.random() * 100);
+    }, 1000);
+  },
+  data() {
+    return {
+      value: 8,
+      colors: [
+        {
+          to: 25,
+          color: "#0058e9",
+        },
+        {
+          from: 25,
+          to: 50,
+          color: "#37b400",
+        },
+        {
+          from: 50,
+          to: 75,
+          color: "#ffc000",
+        },
+        {
+          from: 75,
+          color: "#f31700",
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/gauges/arc-gauge/overview/main.js b/vue-options-api-demos/gauges/arc-gauge/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/gauges/arc-gauge/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/gauges/arc-gauge/overview/main.vue b/vue-options-api-demos/gauges/arc-gauge/overview/main.vue
new file mode 100644
index 00000000..a53a9cc6
--- /dev/null
+++ b/vue-options-api-demos/gauges/arc-gauge/overview/main.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="row">
+    <ArcGauge :value="value" :colors="colors" :center-render="'myTemplate'">
+      <template v-slot:myTemplate="{ props }">
+        <h3
+          :style="{
+            color: props.color,
+          }"
+        >
+          {{ props.value }}%
+        </h3>
+      </template>
+    </ArcGauge>
+  </div>
+</template>
+
+<script>
+import { ArcGauge } from "@progress/kendo-vue-gauges";
+
+export default {
+  components: {
+    ArcGauge,
+  },
+  mounted() {
+    setInterval(() => {
+      this.value = Math.ceil(Math.random() * 100);
+    }, 1000);
+  },
+  data() {
+    return {
+      value: 8,
+      colors: [
+        {
+          to: 25,
+          color: "#0058e9",
+        },
+        {
+          from: 25,
+          to: 50,
+          color: "#37b400",
+        },
+        {
+          from: 50,
+          to: 75,
+          color: "#ffc000",
+        },
+        {
+          from: 75,
+          color: "#f31700",
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/gauges/arc-gauge/scale-options/main.js b/vue-options-api-demos/gauges/arc-gauge/scale-options/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/gauges/arc-gauge/scale-options/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/gauges/arc-gauge/scale-options/main.vue b/vue-options-api-demos/gauges/arc-gauge/scale-options/main.vue
new file mode 100644
index 00000000..fd0512f4
--- /dev/null
+++ b/vue-options-api-demos/gauges/arc-gauge/scale-options/main.vue
@@ -0,0 +1,202 @@
+<template>
+  <div>
+    <div class="example-config">
+      <div class="row">
+        <div class="col-sm-12 col-md-3">
+          <label>
+            <Switch :checked="showLabels" @change="onShowLabelChange" />
+            &nbsp;Show Labels
+          </label>
+        </div>
+        <div class="col-sm-12 col-md-3">
+          <label>
+            <Switch :checked="showTicks" @change="onShowTicksChange" />
+            &nbsp;Show Ticks
+          </label>
+        </div>
+
+        <div class="col-sm-12 col-md-3">
+          <label>
+            <input
+              type="color"
+              :value="ticksColor"
+              @change="onTicksColorChange"
+            />
+            &nbsp;Ticks Color
+          </label>
+        </div>
+        <div class="col-sm-12 col-md-3">
+          <label>
+            <input
+              type="color"
+              :value="labelsColor"
+              @change="onLabelsColorChange"
+            />
+            &nbsp;Labels Color
+          </label>
+        </div>
+      </div>
+      <hr />
+      <div class="row">
+        <div class="col-sm-12 col-md-4">
+          <label>
+            <NumericTextBox
+              :width="80"
+              @change="onRangeSizeChange"
+              :value="rangeSize"
+              :min="1"
+              :max="30"
+            />
+            &nbsp;Range Size
+          </label>
+        </div>
+        <div class="col-sm-12 col-md-4">
+          <label>
+            <DropDownList
+              :style="{ width: 80 }"
+              :data-items="['round', 'butt']"
+              @change="onRangeLineCapChange"
+              :value="rangeLineCap"
+            />
+            &nbsp;Range Line Cap
+          </label>
+        </div>
+        <div class="col-sm-12 col-md-4">
+          <label>
+            <input
+              type="color"
+              :value="rangePlaceholderColor"
+              @change="onRangePlaceholderColorChange"
+            />
+            &nbsp;Range Placeholder Color
+          </label>
+        </div>
+      </div>
+      <hr />
+      <div class="row">
+        <div class="col-sm-12 col-md-6">
+          <label>
+            <Slider
+              :min="-90"
+              :max="90"
+              :value="startAngle"
+              :style="{
+                verticalAlign: 'middle',
+              }"
+              @change="onStartAngleChange"
+            />
+            &nbsp;Start angle
+          </label>
+        </div>
+        <div class="col-sm-12 col-md-6">
+          <label>
+            <Slider
+              :min="90"
+              :max="270"
+              :value="endAngle"
+              :style="{
+                verticalAlign: 'middle',
+              }"
+              @change="onEndAngleChange"
+            />
+            &nbsp;End angle
+          </label>
+        </div>
+      </div>
+      <hr />
+      <label>
+        <Switch @checked="reverse" @change="onReverseChange" />
+        &nbsp;Reverse
+      </label>
+    </div>
+    <ArcGauge :value="30" :transitions="false" :scale="arcScaleConfig" />
+  </div>
+</template>
+
+<script>
+import { ArcGauge } from "@progress/kendo-vue-gauges";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+import { NumericTextBox, Switch } from "@progress/kendo-vue-inputs";
+import { Slider } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    ArcGauge,
+    DropDownList,
+    NumericTextBox,
+    Switch,
+    Slider,
+  },
+  computed: {
+    arcScaleConfig() {
+      return {
+        labels: {
+          format: "c",
+          color: this.labelsColor,
+          visible: this.showLabels,
+        },
+        majorTicks: {
+          visible: this.showTicks,
+          color: this.ticksColor,
+        },
+        minorTicks: {
+          visible: this.showTicks,
+          color: this.ticksColor,
+        },
+        rangeSize: this.rangeSize,
+        rangeLineCap: this.rangeLineCap,
+        rangePlaceholderColor: this.rangePlaceholderColor,
+        startAngle: this.startAngle,
+        endAngle: this.endAngle,
+        reverse: this.reverse,
+      };
+    },
+  },
+  data() {
+    return {
+      showLabels: true,
+      showTicks: true,
+      ticksColor: "#f44ad2",
+      labelsColor: "#0000ff",
+      rangeSize: 15,
+      rangeLineCap: "round",
+      rangePlaceholderColor: "#e6e5e5",
+      startAngle: 0,
+      endAngle: 180,
+      reverse: false,
+    };
+  },
+  methods: {
+    onShowLabelChange() {
+      this.showLabels = !this.showLabels;
+    },
+    onShowTicksChange() {
+      this.showTicks = !this.showTicks;
+    },
+    onRangeSizeChange(e) {
+      this.rangeSize = e.value;
+    },
+    onRangeLineCapChange(e) {
+      this.rangeLineCap = e.value;
+    },
+    onStartAngleChange(e) {
+      this.startAngle = parseInt(e.value, 10);
+    },
+    onEndAngleChange(e) {
+      this.endAngle = parseInt(e.value, 10);
+    },
+    onReverseChange() {
+      this.reverse = !this.reverse;
+    },
+    onTicksColorChange(e) {
+      this.ticksColor = e.target.value;
+    },
+    onLabelsColorChange(e) {
+      this.labelsColor = e.target.value;
+    },
+    onRangePlaceholderColorChange(e) {
+      this.rangePlaceholderColor = e.target.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/gauges/circular-gauge/center-template/main.js b/vue-options-api-demos/gauges/circular-gauge/center-template/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/gauges/circular-gauge/center-template/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/gauges/circular-gauge/center-template/main.vue b/vue-options-api-demos/gauges/circular-gauge/center-template/main.vue
new file mode 100644
index 00000000..b1ec2ebb
--- /dev/null
+++ b/vue-options-api-demos/gauges/circular-gauge/center-template/main.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="row">
+    <CircularGauge
+      :value="value"
+      :colors="colors"
+      :center-render="'myTemplate'"
+    >
+      <template v-slot:myTemplate="{ props }">
+        <h3
+          :style="{
+            color: props.color,
+          }"
+        >
+          {{ props.value }}%
+        </h3>
+      </template>
+    </CircularGauge>
+  </div>
+</template>
+
+<script>
+import { CircularGauge } from '@progress/kendo-vue-gauges';
+
+export default {
+  components: {
+    CircularGauge,
+  },
+  mounted() {
+    setInterval(() => {
+      this.value = Math.ceil(Math.random() * 100);
+    }, 1000);
+  },
+  data() {
+    return {
+      value: 8,
+      colors: [
+        {
+          to: 25,
+          color: '#0058e9',
+        },
+        {
+          from: 25,
+          to: 50,
+          color: '#37b400',
+        },
+        {
+          from: 50,
+          to: 75,
+          color: '#ffc000',
+        },
+        {
+          from: 75,
+          color: '#f31700',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/gauges/circular-gauge/color-ranges/main.js b/vue-options-api-demos/gauges/circular-gauge/color-ranges/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/gauges/circular-gauge/color-ranges/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/gauges/circular-gauge/color-ranges/main.vue b/vue-options-api-demos/gauges/circular-gauge/color-ranges/main.vue
new file mode 100644
index 00000000..5e71af68
--- /dev/null
+++ b/vue-options-api-demos/gauges/circular-gauge/color-ranges/main.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="row">
+    <CircularGauge :value="value" :colors="colors"> </CircularGauge>
+  </div>
+</template>
+
+<script>
+import { CircularGauge } from '@progress/kendo-vue-gauges';
+
+export default {
+  components: {
+    CircularGauge,
+  },
+  mounted() {
+    setInterval(() => {
+      this.value = Math.ceil(Math.random() * 100);
+    }, 1000);
+  },
+  data() {
+    return {
+      value: 8,
+      colors: [
+        {
+          to: 25,
+          color: '#0058e9',
+        },
+        {
+          from: 25,
+          to: 50,
+          color: '#37b400',
+        },
+        {
+          from: 50,
+          to: 75,
+          color: '#ffc000',
+        },
+        {
+          from: 75,
+          color: '#f31700',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/gauges/circular-gauge/overview/main.js b/vue-options-api-demos/gauges/circular-gauge/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/gauges/circular-gauge/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/gauges/circular-gauge/overview/main.vue b/vue-options-api-demos/gauges/circular-gauge/overview/main.vue
new file mode 100644
index 00000000..b1ec2ebb
--- /dev/null
+++ b/vue-options-api-demos/gauges/circular-gauge/overview/main.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="row">
+    <CircularGauge
+      :value="value"
+      :colors="colors"
+      :center-render="'myTemplate'"
+    >
+      <template v-slot:myTemplate="{ props }">
+        <h3
+          :style="{
+            color: props.color,
+          }"
+        >
+          {{ props.value }}%
+        </h3>
+      </template>
+    </CircularGauge>
+  </div>
+</template>
+
+<script>
+import { CircularGauge } from '@progress/kendo-vue-gauges';
+
+export default {
+  components: {
+    CircularGauge,
+  },
+  mounted() {
+    setInterval(() => {
+      this.value = Math.ceil(Math.random() * 100);
+    }, 1000);
+  },
+  data() {
+    return {
+      value: 8,
+      colors: [
+        {
+          to: 25,
+          color: '#0058e9',
+        },
+        {
+          from: 25,
+          to: 50,
+          color: '#37b400',
+        },
+        {
+          from: 50,
+          to: 75,
+          color: '#ffc000',
+        },
+        {
+          from: 75,
+          color: '#f31700',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/gauges/circular-gauge/scale-options/main.js b/vue-options-api-demos/gauges/circular-gauge/scale-options/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/gauges/circular-gauge/scale-options/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/gauges/circular-gauge/scale-options/main.vue b/vue-options-api-demos/gauges/circular-gauge/scale-options/main.vue
new file mode 100644
index 00000000..2942a526
--- /dev/null
+++ b/vue-options-api-demos/gauges/circular-gauge/scale-options/main.vue
@@ -0,0 +1,207 @@
+<template>
+  <div>
+    <div class="example-config">
+      <div class="row">
+        <div class="col-sm-12 col-md-3">
+          <label>
+            <Switch :checked="showLabels" @change="onShowLabelChange" />
+            &nbsp;Show Labels
+          </label>
+        </div>
+        <div class="col-sm-12 col-md-3">
+          <label>
+            <Switch :checked="showTicks" @change="onShowTicksChange" />
+            &nbsp;Show Ticks
+          </label>
+        </div>
+
+        <div class="col-sm-12 col-md-3">
+          <label>
+            <input
+              type="color"
+              :value="ticksColor"
+              @change="onTicksColorChange"
+            />
+            &nbsp;Ticks Color
+          </label>
+        </div>
+        <div class="col-sm-12 col-md-3">
+          <label>
+            <input
+              type="color"
+              :value="labelsColor"
+              @change="onLabelsColorChange"
+            />
+            &nbsp;Labels Color
+          </label>
+        </div>
+      </div>
+      <hr />
+      <div class="row">
+        <div class="col-sm-12 col-md-4">
+          <label>
+            <NumericTextBox
+              :width="80"
+              @change="onRangeSizeChange"
+              :value="rangeSize"
+              :min="1"
+              :max="30"
+            />
+            &nbsp;Range Size
+          </label>
+        </div>
+        <div class="col-sm-12 col-md-4">
+          <label>
+            <DropDownList
+              :style="{ width: 80 }"
+              :data-items="['round', 'butt']"
+              @change="onRangeLineCapChange"
+              :value="rangeLineCap"
+            />
+            &nbsp;Range Line Cap
+          </label>
+        </div>
+        <div class="col-sm-12 col-md-4">
+          <label>
+            <input
+              type="color"
+              :value="rangePlaceholderColor"
+              @change="onRangePlaceholderColorChange"
+            />
+            &nbsp;Range Placeholder Color
+          </label>
+        </div>
+      </div>
+      <hr />
+      <div class="row">
+        <div class="col-sm-12 col-md-6">
+          <label>
+            <Slider
+              :min="-90"
+              :max="90"
+              :value="startAngle"
+              :style="{
+                verticalAlign: 'middle',
+              }"
+              @change="onStartAngleChange"
+            />
+            &nbsp;Start angle
+          </label>
+        </div>
+        <div class="col-sm-12 col-md-6">
+          <label>
+            <Slider
+              :min="0"
+              :max="100"
+              :value="value"
+              :style="{
+                verticalAlign: 'middle',
+              }"
+              @change="onValueChange"
+            />
+            &nbsp;Value ({{ value }})
+          </label>
+        </div>
+      </div>
+      <hr />
+      <label>
+        <Switch @checked="reverse" @change="onReverseChange" />
+        &nbsp;Reverse
+      </label>
+    </div>
+    <CircularGauge
+      :value="value"
+      :transitions="false"
+      :scale="arcScaleConfig"
+    />
+  </div>
+</template>
+
+<script>
+import { CircularGauge } from '@progress/kendo-vue-gauges';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import { NumericTextBox, Switch } from '@progress/kendo-vue-inputs';
+import { Slider } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    CircularGauge,
+    DropDownList,
+    NumericTextBox,
+    Switch,
+    Slider,
+  },
+  computed: {
+    arcScaleConfig() {
+      return {
+        labels: {
+          format: 'c',
+          color: this.labelsColor,
+          visible: this.showLabels,
+        },
+        majorTicks: {
+          visible: this.showTicks,
+          color: this.ticksColor,
+        },
+        minorTicks: {
+          visible: this.showTicks,
+          color: this.ticksColor,
+        },
+        rangeSize: this.rangeSize,
+        rangeLineCap: this.rangeLineCap,
+        rangePlaceholderColor: this.rangePlaceholderColor,
+        startAngle: this.startAngle,
+        endAngle: this.endAngle,
+        reverse: this.reverse,
+      };
+    },
+  },
+  data() {
+    return {
+      value: 30,
+      showLabels: true,
+      showTicks: true,
+      ticksColor: '#f44ad2',
+      labelsColor: '#0000ff',
+      rangeSize: 15,
+      rangeLineCap: 'round',
+      rangePlaceholderColor: '#e6e5e5',
+      startAngle: 0,
+      endAngle: 180,
+      reverse: false,
+    };
+  },
+  methods: {
+    onShowLabelChange() {
+      this.showLabels = !this.showLabels;
+    },
+    onShowTicksChange() {
+      this.showTicks = !this.showTicks;
+    },
+    onRangeSizeChange(e) {
+      this.rangeSize = e.value;
+    },
+    onRangeLineCapChange(e) {
+      this.rangeLineCap = e.value;
+    },
+    onStartAngleChange(e) {
+      this.startAngle = parseInt(e.value, 10);
+    },
+    onValueChange(e) {
+      this.value = parseInt(e.value, 10);
+    },
+    onReverseChange() {
+      this.reverse = !this.reverse;
+    },
+    onTicksColorChange(e) {
+      this.ticksColor = e.target.value;
+    },
+    onLabelsColorChange(e) {
+      this.labelsColor = e.target.value;
+    },
+    onRangePlaceholderColorChange(e) {
+      this.rangePlaceholderColor = e.target.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/gauges/export-options/to-image/main.js b/vue-options-api-demos/gauges/export-options/to-image/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/gauges/export-options/to-image/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/gauges/export-options/to-image/main.vue b/vue-options-api-demos/gauges/export-options/to-image/main.vue
new file mode 100644
index 00000000..4715f7a0
--- /dev/null
+++ b/vue-options-api-demos/gauges/export-options/to-image/main.vue
@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <h5>Export to PNG</h5>
+    <div class="example-config">
+      <Button @click="exportLinearGauge">Export Linear Gauge</Button>
+      <Button @click="exportRadialGauge">Export Radial Gauge</Button>
+      <Button @click="exportArcGauge">Export Arc Gauge</Button>
+    </div>
+    <div class="row">
+      <div class="col-sm-12 col-md-2">
+        <LinearGauge
+          ref="linearGauge"
+          :style="gaugeStyles"
+          :pointer="pointer"
+        />
+      </div>
+      <div class="col-sm-12 col-md-5">
+        <RadialGauge
+          ref="radialGauge"
+          :style="gaugeStyles"
+          :pointer="pointer"
+        />
+      </div>
+      <div class="col-sm-12 col-md-5">
+        <ArcGauge
+          ref="arcGauge"
+          :center-render="'myTemplate'"
+          :style="gaugeStyles"
+          :value="value"
+        >
+          <template v-slot:myTemplate="{ props }">
+            <div
+              :style="{
+                color: props.color,
+              }"
+            >
+              {{ props.value }}%
+            </div>
+          </template>
+        </ArcGauge>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  ArcGauge,
+  LinearGauge,
+  RadialGauge,
+} from '@progress/kendo-vue-gauges';
+import { Button } from '@progress/kendo-vue-buttons';
+import { exportImage } from '@progress/kendo-drawing';
+import { saveAs } from '@progress/kendo-file-saver';
+
+export default {
+  components: {
+    ArcGauge,
+    LinearGauge,
+    RadialGauge,
+    Button,
+  },
+  computed: {
+    pointer() {
+      return { value: this.value };
+    },
+  },
+  data() {
+    return {
+      value: 30,
+      gaugeStyles: {
+        display: 'block',
+      },
+    };
+  },
+  methods: {
+    exportGaugeVisual(gauge, callback) {
+      gauge.exportVisual().then((gaugeVisual) => callback(gaugeVisual));
+    },
+    exportGauge(gauge) {
+      this.exportGaugeVisual(gauge, (gaugeVisual) =>
+        exportImage(gaugeVisual).then((dataURI) => saveAs(dataURI, 'gauge.png'))
+      );
+    },
+    exportLinearGauge() {
+      this.exportGauge(this.$refs.linearGauge);
+    },
+    exportRadialGauge() {
+      this.exportGauge(this.$refs.radialGauge);
+    },
+    exportArcGauge() {
+      this.exportGauge(this.$refs.arcGauge);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/gauges/export-options/to-pdf/main.js b/vue-options-api-demos/gauges/export-options/to-pdf/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/gauges/export-options/to-pdf/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/gauges/export-options/to-pdf/main.vue b/vue-options-api-demos/gauges/export-options/to-pdf/main.vue
new file mode 100644
index 00000000..3bd1b890
--- /dev/null
+++ b/vue-options-api-demos/gauges/export-options/to-pdf/main.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <h5>Export to PDF</h5>
+    <div class="example-config">
+      <Button @click="exportLinearGauge">Export Linear Gauge</Button>
+      <Button @click="exportRadialGauge">Export Radial Gauge</Button>
+      <Button @click="exportArcGauge">Export Arc Gauge</Button>
+    </div>
+    <div class="row">
+      <div class="col-sm-12 col-md-2">
+        <LinearGauge
+          ref="linearGauge"
+          :style="gaugeStyles"
+          :pointer="pointer"
+        />
+      </div>
+      <div class="col-sm-12 col-md-5">
+        <RadialGauge
+          ref="radialGauge"
+          :style="gaugeStyles"
+          :pointer="pointer"
+        />
+      </div>
+      <div class="col-sm-12 col-md-5">
+        <ArcGauge
+          ref="arcGauge"
+          :center-render="'myTemplate'"
+          :style="gaugeStyles"
+          :value="value"
+        >
+          <template v-slot:myTemplate="{ props }">
+            <div
+              :style="{
+                color: props.color,
+              }"
+            >
+              {{ props.value }}%
+            </div>
+          </template>
+        </ArcGauge>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ArcGauge, LinearGauge, RadialGauge } from "@progress/kendo-vue-gauges";
+import { Button } from "@progress/kendo-vue-buttons";
+import { exportPDF } from "@progress/kendo-drawing";
+import { saveAs } from "@progress/kendo-file-saver";
+
+export default {
+  components: {
+    ArcGauge,
+    LinearGauge,
+    RadialGauge,
+    Button,
+  },
+  computed: {
+    pointer() {
+      return { value: this.value };
+    },
+  },
+  data() {
+    return {
+      value: 30,
+      gaugeStyles: {
+        display: "block",
+      },
+    };
+  },
+  methods: {
+    exportGaugeVisual(gauge, callback) {
+      gauge.exportVisual().then((gaugeVisual) => callback(gaugeVisual));
+    },
+    exportGauge(gauge) {
+      this.exportGaugeVisual(gauge, (gaugeVisual) =>
+        exportPDF(gaugeVisual).then((dataURI) => saveAs(dataURI, "gauge.pdf"))
+      );
+    },
+    exportLinearGauge() {
+      this.exportGauge(this.$refs.linearGauge);
+    },
+    exportRadialGauge() {
+      this.exportGauge(this.$refs.radialGauge);
+    },
+    exportArcGauge() {
+      this.exportGauge(this.$refs.arcGauge);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/gauges/export-options/to-svg/main.js b/vue-options-api-demos/gauges/export-options/to-svg/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/gauges/export-options/to-svg/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/gauges/export-options/to-svg/main.vue b/vue-options-api-demos/gauges/export-options/to-svg/main.vue
new file mode 100644
index 00000000..38edb9db
--- /dev/null
+++ b/vue-options-api-demos/gauges/export-options/to-svg/main.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <h5>Export to SVG</h5>
+    <div class="example-config">
+      <Button @click="exportLinearGauge">Export Linear Gauge</Button>
+      <Button @click="exportRadialGauge">Export Radial Gauge</Button>
+      <Button @click="exportArcGauge">Export Arc Gauge</Button>
+    </div>
+    <div class="row">
+      <div class="col-sm-12 col-md-2">
+        <LinearGauge
+          ref="linearGauge"
+          :style="gaugeStyles"
+          :pointer="pointer"
+        />
+      </div>
+      <div class="col-sm-12 col-md-5">
+        <RadialGauge
+          ref="radialGauge"
+          :style="gaugeStyles"
+          :pointer="pointer"
+        />
+      </div>
+      <div class="col-sm-12 col-md-5">
+        <ArcGauge
+          ref="arcGauge"
+          :center-render="'myTemplate'"
+          :style="gaugeStyles"
+          :value="value"
+        >
+          <template v-slot:myTemplate="{ props }">
+            <div
+              :style="{
+                color: props.color,
+              }"
+            >
+              {{ props.value }}%
+            </div>
+          </template>
+        </ArcGauge>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ArcGauge, LinearGauge, RadialGauge } from "@progress/kendo-vue-gauges";
+import { Button } from "@progress/kendo-vue-buttons";
+import { exportImage } from "@progress/kendo-drawing";
+import { saveAs } from "@progress/kendo-file-saver";
+
+export default {
+  components: {
+    ArcGauge,
+    LinearGauge,
+    RadialGauge,
+    Button,
+  },
+  computed: {
+    pointer() {
+      return { value: this.value };
+    },
+  },
+  data() {
+    return {
+      value: 30,
+      gaugeStyles: {
+        display: "block",
+      },
+    };
+  },
+  methods: {
+    exportGaugeVisual(gauge, callback) {
+      gauge.exportVisual().then((gaugeVisual) => callback(gaugeVisual));
+    },
+    exportGauge(gauge) {
+      this.exportGaugeVisual(gauge, (gaugeVisual) =>
+        exportImage(gaugeVisual).then((dataURI) => saveAs(dataURI, "gauge.svg"))
+      );
+    },
+    exportLinearGauge() {
+      this.exportGauge(this.$refs.linearGauge);
+    },
+    exportRadialGauge() {
+      this.exportGauge(this.$refs.radialGauge);
+    },
+    exportArcGauge() {
+      this.exportGauge(this.$refs.arcGauge);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/gauges/globalization/main.js b/vue-options-api-demos/gauges/globalization/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/gauges/globalization/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/gauges/globalization/main.vue b/vue-options-api-demos/gauges/globalization/main.vue
new file mode 100644
index 00000000..ac5e257f
--- /dev/null
+++ b/vue-options-api-demos/gauges/globalization/main.vue
@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <div class="example-config">
+      <label>Current locale: </label>
+      <DropDownList
+        :style="{
+           width: '230px',
+          'margin-left': 5,
+        }"
+        :value="locale"
+        @change="onChange"
+        :data-items="locales"
+      />
+    </div>
+    <intl :locale="locale">
+      <div class="row">
+        <div class="col-sm-12 col-md-2">
+          <LinearGauge :pointer="pointer" :scale="scale" />
+        </div>
+        <div class="col-sm-12 col-md-5">
+          <RadialGauge :pointer="pointer" :scale="scale" />
+        </div>
+        <div class="col-sm-12 col-md-5">
+          <ArcGauge :value="value" :scale="arcScale" />
+        </div>
+      </div>
+    </intl>
+  </div>
+</template>
+
+<script>
+import { ArcGauge, LinearGauge, RadialGauge } from "@progress/kendo-vue-gauges";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+import { IntlProvider } from "@progress/kendo-vue-intl";
+
+import { load } from "@progress/kendo-vue-intl";
+import likelySubtags from "cldr-core/supplemental/likelySubtags.json";
+import currencyData from "cldr-core/supplemental/currencyData.json";
+import weekData from "cldr-core/supplemental/weekData.json";
+import bgNumbers from "cldr-numbers-full/main/bg/numbers.json";
+import bgCurrencies from "cldr-numbers-full/main/bg/currencies.json";
+import bgCaGregorian from "cldr-dates-full/main/bg/ca-gregorian.json";
+import bgDataFields from "cldr-dates-full/main/bg/dateFields.json";
+import bgTimeZoneNames from "cldr-dates-full/main/bg/timeZoneNames.json";
+
+load(
+  likelySubtags,
+  currencyData,
+  weekData,
+  bgNumbers,
+  bgCurrencies,
+  bgCaGregorian,
+  bgDataFields,
+  bgTimeZoneNames
+);
+
+export default {
+  components: {
+    ArcGauge,
+    LinearGauge,
+    RadialGauge,
+    DropDownList,
+    intl: IntlProvider,
+  },
+  data() {
+    return {
+      locale: "en-US",
+      locales: ["bg-BG", "en-US"],
+      value: 30,
+      pointer: {
+        value: 30,
+      },
+      scale: {
+        labels: {
+          format: "c",
+        },
+      },
+      arcScale: {
+        labels: {
+          format: "c",
+          visible: true,
+        },
+        majorTicks: {
+          visible: true,
+        },
+        minorTicks: {
+          visible: true,
+        },
+      },
+    };
+  },
+  methods: {
+    onChange(e) {
+      this.locale = e.target.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/gauges/linear-gauge/multiple-pointers/main.js b/vue-options-api-demos/gauges/linear-gauge/multiple-pointers/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/gauges/linear-gauge/multiple-pointers/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/gauges/linear-gauge/multiple-pointers/main.vue b/vue-options-api-demos/gauges/linear-gauge/multiple-pointers/main.vue
new file mode 100644
index 00000000..af114d82
--- /dev/null
+++ b/vue-options-api-demos/gauges/linear-gauge/multiple-pointers/main.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="row">
+    <div class="col-sm-12 col-md-6">
+      <LinearGauge :pointer="pointer" :scale="scale" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { LinearGauge } from '@progress/kendo-vue-gauges';
+
+export default {
+  components: {
+    LinearGauge,
+  },
+  mounted() {
+    setInterval(() => {
+      this.value = Math.ceil(Math.random() * 100);
+    }, 1000);
+  },
+  data() {
+    return {
+      pointer: [
+        {
+          value: 10,
+          color: '#ffd246',
+          shape: 'arrow',
+        },
+        {
+          value: 20,
+          color: '#28b4c8',
+          shape: 'arrow',
+        },
+        {
+          value: 30,
+          color: '#78d237',
+          shape: 'arrow',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/gauges/linear-gauge/orientation/main.js b/vue-options-api-demos/gauges/linear-gauge/orientation/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/gauges/linear-gauge/orientation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/gauges/linear-gauge/orientation/main.vue b/vue-options-api-demos/gauges/linear-gauge/orientation/main.vue
new file mode 100644
index 00000000..a0381885
--- /dev/null
+++ b/vue-options-api-demos/gauges/linear-gauge/orientation/main.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="row">
+    <div class="col-sm-12 col-md-6">
+      <LinearGauge :pointer="pointerHorizontal" />
+    </div>
+    <div class="col-sm-12 col-md-6">
+      <LinearGauge :pointer="pointerVertical" :scale="scaleVertical" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { LinearGauge } from '@progress/kendo-vue-gauges';
+
+export default {
+  components: {
+    LinearGauge,
+  },
+  mounted() {
+    setInterval(() => {
+      this.value = Math.ceil(Math.random() * 100);
+    }, 1000);
+  },
+  data() {
+    return {
+      pointerHorizontal: {
+        value: 10,
+        color: '#ffd246',
+      },
+      pointerVertical: {
+        value: 10,
+        color: '#28b4c8',
+      },
+      scaleVertical: {
+        vertical: false,
+      },
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/gauges/linear-gauge/overview/main.js b/vue-options-api-demos/gauges/linear-gauge/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/gauges/linear-gauge/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/gauges/linear-gauge/overview/main.vue b/vue-options-api-demos/gauges/linear-gauge/overview/main.vue
new file mode 100644
index 00000000..ad689dc1
--- /dev/null
+++ b/vue-options-api-demos/gauges/linear-gauge/overview/main.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="row">
+    <div class="col-sm-12 col-md-6">
+      <LinearGauge :pointer="pointer" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { LinearGauge } from '@progress/kendo-vue-gauges';
+
+export default {
+  components: {
+    LinearGauge,
+  },
+  computed: {
+    pointer() {
+      return { value: this.value };
+    },
+  },
+  mounted() {
+    setInterval(() => {
+      this.value = Math.ceil(Math.random() * 100);
+    }, 1000);
+  },
+  data() {
+    return {
+      value: 30,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/gauges/linear-gauge/scale-options/main.js b/vue-options-api-demos/gauges/linear-gauge/scale-options/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/gauges/linear-gauge/scale-options/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/gauges/linear-gauge/scale-options/main.vue b/vue-options-api-demos/gauges/linear-gauge/scale-options/main.vue
new file mode 100644
index 00000000..8f6f8d20
--- /dev/null
+++ b/vue-options-api-demos/gauges/linear-gauge/scale-options/main.vue
@@ -0,0 +1,207 @@
+<template>
+  <div>
+    <div class="example-config">
+      <div class="row">
+        <div class="col-sm-12 col-md-3">
+          <label>
+            <Switch :checked="showLabels" @change="onShowLabelChange" />
+            &nbsp;Show Labels
+          </label>
+        </div>
+        <div class="col-sm-12 col-md-3">
+          <label>
+            <Switch :checked="showTicks" @change="onShowTicksChange" />
+            &nbsp;Show Ticks
+          </label>
+        </div>
+
+        <div class="col-sm-12 col-md-3">
+          <label>
+            <input
+              type="color"
+              :value="ticksColor"
+              @change="onTicksColorChange"
+            />
+            &nbsp;Ticks Color
+          </label>
+        </div>
+        <div class="col-sm-12 col-md-3">
+          <label>
+            <input
+              type="color"
+              :value="labelsColor"
+              @change="onLabelsColorChange"
+            />
+            &nbsp;Labels Color
+          </label>
+        </div>
+      </div>
+      <hr />
+      <div class="row">
+        <div class="col-sm-12 col-md-3">
+          <label>
+            <NumericTextBox
+              @change="onLineWidthChange"
+              :value="lineWidth"
+              :min="1"
+              :max="30"
+            />
+            &nbsp;Line Width
+          </label>
+        </div>
+        <div class="col-sm-12 col-md-3">
+          <label>
+            <input
+              type="color"
+              :value="lineColor"
+              @change="onLineColorChange"
+            />
+            &nbsp;Line Color
+          </label>
+        </div>
+        <div class="col-sm-12 col-md-3">
+          <label>
+            <NumericTextBox
+              @change="onRangeSizeChange"
+              :value="rangeSize"
+              :min="1"
+              :max="30"
+            />
+            &nbsp;Range Size
+          </label>
+        </div>
+        <div class="col-sm-12 col-md-3">
+          <label>
+            <input
+              type="color"
+              :value="rangeColor"
+              @change="onRangeColorChange"
+            />
+            &nbsp;Range Color
+          </label>
+        </div>
+      </div>
+      <hr />
+      <div class="row">
+        <div className="col-sm-12 col-md-3">
+          <label>
+            <Switch @checked="vertical" @change="onVerticalChange" />
+            &nbsp;Vertical
+          </label>
+        </div>
+        <div className="col-sm-12 col-md-3">
+          <label>
+            <Switch @checked="reverse" @change="onReverseChange" />
+            &nbsp;Reverse
+          </label>
+        </div>
+      </div>
+    </div>
+    <LinearGauge
+      :pointer="pointer"
+      :transitions="false"
+      :scale="linearScaleConfig"
+    />
+  </div>
+</template>
+
+<script>
+import { LinearGauge } from "@progress/kendo-vue-gauges";
+import { NumericTextBox, Switch } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    LinearGauge,
+    NumericTextBox,
+    Switch,
+  },
+  computed: {
+    linearScaleConfig() {
+      return {
+        labels: {
+          format: "c",
+          color: this.labelsColor,
+          visible: this.showLabels,
+        },
+        majorTicks: {
+          visible: this.showTicks,
+          color: this.ticksColor,
+        },
+        minorTicks: {
+          visible: this.showTicks,
+          color: this.ticksColor,
+        },
+        rangeSize: this.rangeSize,
+        reverse: this.reverse,
+        vertical: this.vertical,
+        ranges: [
+          {
+            from: 0,
+            to: 30,
+            color: this.rangeColor,
+          },
+        ],
+        line: {
+          color: this.lineColor,
+          width: this.lineWidth,
+        },
+      };
+    },
+  },
+  data() {
+    return {
+      pointer: {
+        value: 30,
+      },
+      showLabels: true,
+      showTicks: true,
+      ticksColor: "#008000",
+      labelsColor: "#0000ff",
+      rangeSize: 4,
+      rangeColor: "#ff6358",
+      lineWidth: 2,
+      lineColor: "#656565",
+      reverse: false,
+      vertical: true,
+    };
+  },
+  methods: {
+    onShowLabelChange() {
+      this.showLabels = !this.showLabels;
+    },
+    onShowTicksChange() {
+      this.showTicks = !this.showTicks;
+    },
+    onLineWidthChange(e) {
+      this.lineWidth = e.value;
+    },
+    onRangeSizeChange(e) {
+      this.rangeSize = e.value;
+    },
+    onReverseChange() {
+      this.reverse = !this.reverse;
+    },
+    onVerticalChange() {
+      this.vertical = !this.vertical;
+    },
+    onTicksColorChange(e) {
+      this.ticksColor = e.target.value;
+    },
+    onLabelsColorChange(e) {
+      this.labelsColor = e.target.value;
+    },
+    onLineColorChange(e) {
+      this.lineColor = e.target.value;
+    },
+    onRangeColorChange(e) {
+      this.rangeColor = e.target.value;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.k-numerictextbox {
+  width: 80px;
+}
+</style>
\ No newline at end of file
diff --git a/vue-options-api-demos/gauges/linear-gauge/scale-ranges/main.js b/vue-options-api-demos/gauges/linear-gauge/scale-ranges/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/gauges/linear-gauge/scale-ranges/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/gauges/linear-gauge/scale-ranges/main.vue b/vue-options-api-demos/gauges/linear-gauge/scale-ranges/main.vue
new file mode 100644
index 00000000..ed6c1d57
--- /dev/null
+++ b/vue-options-api-demos/gauges/linear-gauge/scale-ranges/main.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="row">
+    <div class="col-sm-12 col-md-6">
+      <LinearGauge :pointer="pointer" :scale="scale" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { LinearGauge } from '@progress/kendo-vue-gauges';
+
+export default {
+  components: {
+    LinearGauge,
+  },
+  computed: {
+    pointer() {
+      return { value: this.value, shape: this.shape };
+    },
+  },
+  mounted() {
+    setInterval(() => {
+      this.value = Math.ceil(Math.random() * 180);
+    }, 1000);
+  },
+  data() {
+    return {
+      value: 30,
+      shape: 'arrow',
+      scale: {
+        minorUnit: 5,
+        majorUnit: 20,
+        max: 180,
+        ranges: [
+          {
+            from: 80,
+            to: 120,
+            color: '#ffc700',
+          },
+          {
+            from: 120,
+            to: 150,
+            color: '#ff7a00',
+          },
+          {
+            from: 150,
+            to: 180,
+            color: '#c20000',
+          },
+        ],
+      },
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/gauges/overview/main.js b/vue-options-api-demos/gauges/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/gauges/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/gauges/overview/main.vue b/vue-options-api-demos/gauges/overview/main.vue
new file mode 100644
index 00000000..ee78dc3c
--- /dev/null
+++ b/vue-options-api-demos/gauges/overview/main.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="row">
+    <div class="col-sm-12 col-md-6">
+      <RadialGauge :style="gaugeStyles" :pointer="pointer" />
+    </div>
+    <div class="col-sm-12 col-md-6">
+      <ArcGauge
+        :style="gaugeStyles"
+        :value="value"
+        :center-render="'myTemplate'"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <h3
+            :style="{
+              color: props.color,
+            }"
+          >
+            {{ props.value }}%
+          </h3>
+        </template>
+      </ArcGauge>
+    </div>
+    <div class="col-sm-12 col-md-6">
+      <CircularGauge
+        :style="gaugeStyles"
+        :value="value"
+        :centerRender="'myTemplate'"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <h3
+            :style="{
+              color: props.color,
+            }"
+          >
+            {{ props.value }}%
+          </h3>
+        </template>
+      </CircularGauge>
+    </div>
+    <div class="col-sm-12 col-md-6">
+      <LinearGauge :style="gaugeStyles" :pointer="pointer" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  ArcGauge,
+  CircularGauge,
+  LinearGauge,
+  RadialGauge,
+} from "@progress/kendo-vue-gauges";
+
+export default {
+  components: {
+    ArcGauge,
+    CircularGauge,
+    LinearGauge,
+    RadialGauge,
+  },
+  computed: {
+    pointer() {
+      return { value: this.value };
+    },
+  },
+  data() {
+    return {
+      value: 30,
+      gaugeStyles: {
+        display: "block",
+      },
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/gauges/radial-gauge/multiple-pointers/main.js b/vue-options-api-demos/gauges/radial-gauge/multiple-pointers/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/gauges/radial-gauge/multiple-pointers/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/gauges/radial-gauge/multiple-pointers/main.vue b/vue-options-api-demos/gauges/radial-gauge/multiple-pointers/main.vue
new file mode 100644
index 00000000..83828659
--- /dev/null
+++ b/vue-options-api-demos/gauges/radial-gauge/multiple-pointers/main.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <RadialGauge :pointer="pointer" />
+  </div>
+</template>
+
+<script>
+import { RadialGauge } from '@progress/kendo-vue-gauges';
+
+export default {
+  components: {
+    RadialGauge,
+  },
+  computed: {
+    pointer() {
+      return { value: this.value };
+    },
+  },
+  data() {
+    return {
+      pointer: [
+        {
+          value: 10,
+          color: '#ffd246',
+        },
+        {
+          value: 20,
+          color: '#28b4c8',
+        },
+        {
+          value: 30,
+          color: '#78d237',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/gauges/radial-gauge/overview/main.js b/vue-options-api-demos/gauges/radial-gauge/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/gauges/radial-gauge/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/gauges/radial-gauge/overview/main.vue b/vue-options-api-demos/gauges/radial-gauge/overview/main.vue
new file mode 100644
index 00000000..4de54aa6
--- /dev/null
+++ b/vue-options-api-demos/gauges/radial-gauge/overview/main.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <RadialGauge :pointer="pointer" />
+  </div>
+</template>
+
+<script>
+import { RadialGauge } from '@progress/kendo-vue-gauges';
+
+export default {
+  components: {
+    RadialGauge,
+  },
+  computed: {
+    pointer() {
+      return { value: this.value };
+    },
+  },
+  mounted() {
+    setInterval(() => {
+      this.value = Math.ceil(Math.random() * 100);
+    }, 1000);
+  },
+  data() {
+    return {
+      value: 30,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/gauges/radial-gauge/scale-options/main.js b/vue-options-api-demos/gauges/radial-gauge/scale-options/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/gauges/radial-gauge/scale-options/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/gauges/radial-gauge/scale-options/main.vue b/vue-options-api-demos/gauges/radial-gauge/scale-options/main.vue
new file mode 100644
index 00000000..f9984c89
--- /dev/null
+++ b/vue-options-api-demos/gauges/radial-gauge/scale-options/main.vue
@@ -0,0 +1,200 @@
+<template>
+  <div>
+    <div class="example-config">
+      <div class="row">
+        <div class="col-sm-12 col-md-3">
+          <label>
+            <Switch :checked="showLabels" @change="onShowLabelChange" />
+            &nbsp;Show Labels
+          </label>
+        </div>
+        <div class="col-sm-12 col-md-3">
+          <label>
+            <Switch :checked="showTicks" @change="onShowTicksChange" />
+            &nbsp;Show Ticks
+          </label>
+        </div>
+
+        <div class="col-sm-12 col-md-3">
+          <label>
+            <input
+              type="color"
+              :value="ticksColor"
+              @change="onTicksColorChange"
+            />
+            &nbsp;Ticks Color
+          </label>
+        </div>
+        <div class="col-sm-12 col-md-3">
+          <label>
+            <input
+              type="color"
+              :value="labelsColor"
+              @change="onLabelsColorChange"
+            />
+            &nbsp;Labels Color
+          </label>
+        </div>
+      </div>
+      <hr />
+      <div class="row">
+        <div class="col-sm-12 col-md-4">
+          <label>
+            <NumericTextBox
+              :width="80"
+              @change="onRangeSizeChange"
+              :value="rangeSize"
+              :min="1"
+              :max="30"
+            />
+            &nbsp;Range Size
+          </label>
+        </div>
+        <div class="col-sm-12 col-md-4">
+          <label>
+            <input
+              type="color"
+              :value="rangeColor"
+              @change="onRangeColorChange"
+            />
+            &nbsp;Range Color
+          </label>
+        </div>
+      </div>
+      <hr />
+      <div class="row">
+        <div class="col-sm-12 col-md-6">
+          <label>
+            <Slider
+              :min="-90"
+              :max="90"
+              :value="startAngle"
+              :style="{
+                verticalAlign: 'middle',
+              }"
+              @change="onStartAngleChange"
+            />
+            &nbsp;Start angle
+          </label>
+        </div>
+        <div class="col-sm-12 col-md-6">
+          <label>
+            <Slider
+              :min="90"
+              :max="270"
+              :value="endAngle"
+              :style="{
+                verticalAlign: 'middle',
+              }"
+              @change="onEndAngleChange"
+            />
+            &nbsp;End angle
+          </label>
+        </div>
+      </div>
+      <hr />
+      <label>
+        <Switch @checked="reverse" @change="onReverseChange" />
+        &nbsp;Reverse
+      </label>
+    </div>
+    <RadialGauge
+      :pointer="pointer"
+      :transitions="false"
+      :scale="radialScaleConfig"
+    />
+  </div>
+</template>
+
+<script>
+import { RadialGauge } from '@progress/kendo-vue-gauges';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import { NumericTextBox, Switch } from '@progress/kendo-vue-inputs';
+import { Slider } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    RadialGauge,
+    DropDownList,
+    NumericTextBox,
+    Switch,
+    Slider,
+  },
+  computed: {
+    radialScaleConfig() {
+      return {
+        labels: {
+          format: 'c',
+          color: this.labelsColor,
+          visible: this.showLabels,
+        },
+        majorTicks: {
+          visible: this.showTicks,
+          color: this.ticksColor,
+        },
+        minorTicks: {
+          visible: this.showTicks,
+          color: this.ticksColor,
+        },
+        rangeSize: this.rangeSize,
+        startAngle: this.startAngle,
+        endAngle: this.endAngle,
+        reverse: this.reverse,
+        ranges: [
+          {
+            from: 0,
+            to: 50,
+            color: this.rangeColor,
+          },
+        ],
+      };
+    },
+  },
+  data() {
+    return {
+      pointer: {
+        value: 30,
+      },
+      showLabels: true,
+      showTicks: true,
+      ticksColor: '#008000',
+      labelsColor: '#0000ff',
+      rangeSize: 10,
+      rangeLineCap: 'round',
+      rangeColor: '#ffcccc',
+      startAngle: 0,
+      endAngle: 180,
+      reverse: false,
+    };
+  },
+  methods: {
+    onShowLabelChange() {
+      this.showLabels = !this.showLabels;
+    },
+    onShowTicksChange() {
+      this.showTicks = !this.showTicks;
+    },
+    onRangeSizeChange(e) {
+      this.rangeSize = e.value;
+    },
+    onStartAngleChange(e) {
+      this.startAngle = parseInt(e.value, 10);
+    },
+    onEndAngleChange(e) {
+      this.endAngle = parseInt(e.value, 10);
+    },
+    onReverseChange() {
+      this.reverse = !this.reverse;
+    },
+    onTicksColorChange(e) {
+      this.ticksColor = e.target.value;
+    },
+    onLabelsColorChange(e) {
+      this.labelsColor = e.target.value;
+    },
+    onRangeColorChange(e) {
+      this.rangeColor = e.target.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/gauges/radial-gauge/scale-ranges/main.js b/vue-options-api-demos/gauges/radial-gauge/scale-ranges/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/gauges/radial-gauge/scale-ranges/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/gauges/radial-gauge/scale-ranges/main.vue b/vue-options-api-demos/gauges/radial-gauge/scale-ranges/main.vue
new file mode 100644
index 00000000..74c1603d
--- /dev/null
+++ b/vue-options-api-demos/gauges/radial-gauge/scale-ranges/main.vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <RadialGauge :pointer="pointer" :scale="scale" />
+  </div>
+</template>
+
+<script>
+import { RadialGauge } from '@progress/kendo-vue-gauges';
+
+export default {
+  components: {
+    RadialGauge,
+  },
+  computed: {
+    pointer() {
+      return { value: this.value };
+    },
+  },
+  mounted() {
+    setInterval(() => {
+      this.value = Math.ceil(Math.random() * 180);
+    }, 1000);
+  },
+  data() {
+    return {
+      value: 30,
+      scale: {
+        minorUnit: 5,
+        majorUnit: 20,
+        max: 180,
+        ranges: [
+          {
+            from: 80,
+            to: 120,
+            color: '#ffc700',
+          },
+          {
+            from: 120,
+            to: 150,
+            color: '#ff7a00',
+          },
+          {
+            from: 150,
+            to: 180,
+            color: '#c20000',
+          },
+        ],
+      },
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/gauges/rtl/main.js b/vue-options-api-demos/gauges/rtl/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/gauges/rtl/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/gauges/rtl/main.vue b/vue-options-api-demos/gauges/rtl/main.vue
new file mode 100644
index 00000000..82ac669f
--- /dev/null
+++ b/vue-options-api-demos/gauges/rtl/main.vue
@@ -0,0 +1,32 @@
+<template>
+  <div
+    :style="{
+      direction: 'rtl',
+    }"
+  >
+    <LinearGauge :pointer="pointer" :scale="scale" />
+  </div>
+</template>
+
+<script>
+import { LinearGauge } from '@progress/kendo-vue-gauges';
+
+export default {
+  components: {
+    LinearGauge,
+  },
+  data() {
+    return {
+      pointer: {
+        value: 30,
+      },
+      scale: {
+        vertical: false,
+        labels: {
+          format: 'c',
+        },
+      },
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/basic/BudgetComponent.vue b/vue-options-api-demos/grid/basic/BudgetComponent.vue
new file mode 100644
index 00000000..865b74a3
--- /dev/null
+++ b/vue-options-api-demos/grid/basic/BudgetComponent.vue
@@ -0,0 +1,23 @@
+<template>
+  <span :class="[dataItem.budget < 0 ? 'red text-bold' : '']"
+    >{{ formattedNumber }}
+  </span>
+</template>
+
+<script>
+import { provideIntlService } from "@progress/kendo-vue-intl";
+
+export default {
+  inject: {
+    kendoIntlService: { default: null },
+  },
+  props: {
+    dataItem: Object,
+  },
+  computed: {
+    formattedNumber: function () {
+      return provideIntlService(this).formatNumber(this.dataItem.budget, "c");
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/basic/ContactNameComponent.vue b/vue-options-api-demos/grid/basic/ContactNameComponent.vue
new file mode 100644
index 00000000..66f551dc
--- /dev/null
+++ b/vue-options-api-demos/grid/basic/ContactNameComponent.vue
@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <div
+      class="customer-photo"
+      :style="{ 'background-image': photoURL(dataItem) }"
+    ></div>
+    <div class="customer-name">{{ dataItem.full_name }}</div>
+  </div>
+</template>
+
+<script>
+import { images } from "./images";
+
+export default {
+  props: {
+    dataItem: Object,
+  },
+  methods: {
+    photoURL(dataItem) {
+      const code = dataItem.img_id + dataItem.gender;
+      const image = images;
+      return image[code];
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/basic/EngagementComponent.vue b/vue-options-api-demos/grid/basic/EngagementComponent.vue
new file mode 100644
index 00000000..bfafa06c
--- /dev/null
+++ b/vue-options-api-demos/grid/basic/EngagementComponent.vue
@@ -0,0 +1,48 @@
+<template>
+  <Sparkline
+    :data-items="[dataItem.target]"
+    :transitions="false"
+    :type="'bar'"
+    :series-defaults="seriesDefaults"
+  >
+    <ChartArea :opacity="0" :width="180" :height="40" />
+    <ChartValueAxis>
+      <ChartValueAxisItem :max="max" :min="min" />
+    </ChartValueAxis>
+  </Sparkline>
+</template>
+
+<script>
+import {
+  Sparkline,
+  ChartValueAxis,
+  ChartValueAxisItem,
+  ChartArea,
+} from "@progress/kendo-vue-charts";
+
+export default {
+  components: {
+    Sparkline,
+    ChartValueAxis,
+    ChartValueAxisItem,
+    ChartArea,
+  },
+  props: {
+    dataItem: Object,
+  },
+  data() {
+    return {
+      seriesDefaults: {
+        labels: {
+          background:'none',
+          visible: true,
+          padding: 3,
+          format: "{0}%",
+        },
+      },
+      min: 0,
+      max: 130,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/basic/FlagComponent.vue b/vue-options-api-demos/grid/basic/FlagComponent.vue
new file mode 100644
index 00000000..a5881318
--- /dev/null
+++ b/vue-options-api-demos/grid/basic/FlagComponent.vue
@@ -0,0 +1,21 @@
+<template>
+  <img class="flag" :alt="'Flag'"  :src="flagURL(dataItem)" style="width: 30px" />
+</template>
+
+<script>
+import { images } from './images';
+
+export default {
+  props: {
+    dataItem: Object,
+  },
+  methods: {
+    flagURL(dataItem) {
+      const code = dataItem.country;
+      const image = images;
+
+      return image[code];
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/basic/Grid.vue b/vue-options-api-demos/grid/basic/Grid.vue
new file mode 100644
index 00000000..c41c8f2e
--- /dev/null
+++ b/vue-options-api-demos/grid/basic/Grid.vue
@@ -0,0 +1,512 @@
+<template>
+  <div>
+    <pdfexport ref="gridPdfExport">
+      <Grid
+        ref="grid"
+        :style="{ height: '500px' }"
+        :data-items="gridData"
+        :resizable="true"
+        :reorderable="true"
+        :sortable="true"
+        :pageable="gridPageable"
+        :groupable="true"
+        :group="group"
+        :sort="sort"
+        :filter="filter"
+        :take="take"
+        :skip="skip"
+        :expand-field="expandField"
+        :selectable="true"
+        :selected-field="selectedField"
+        :columns="columns"
+        :column-menu="columnMenu"
+        @selectionchange="onSelectionChange"
+        @headerselectionchange="onHeaderSelectionChange"
+        @datastatechange="dataStateChange"
+        @expandchange="expandChange"
+      >
+        <toolbar>
+          <span class="k-textbox k-grid-search k-display-flex">
+            <k-input
+              :style="{ width: '230px' }"
+              :placeholder="gridSearchMessage"
+              :value="searchWord"
+              @input="onFilter"
+            ></k-input>
+          </span>
+          <span class="export-buttons">
+            <dropdownlist
+              :style="{ width: '230px' }"
+              class="localeDropDownList"
+              :value="currentLocale"
+              :text-field="'language'"
+              @change="localeChange"
+              :data-items="locales"
+            >
+            </dropdownlist>
+            <kbutton
+              title="Export to Excel"
+              :theme-color="'primary'"
+              @click="exportExcel"
+            >
+              {{ exportExcelMessage }}</kbutton
+            >&nbsp;
+            <kbutton :theme-color="'primary'" @click="exportPDF">
+              {{ exportPdfMessage }}
+            </kbutton>
+          </span>
+        </toolbar>
+        <template v-slot:contactTemplate="{ props }">
+          <td v-if="props.rowType !== 'groupHeader'">
+            <contact :data-item="props.dataItem"></contact>
+          </td>
+        </template>
+        <template v-slot:flagTemplate="{ props }">
+          <td v-if="props.rowType !== 'groupHeader'" class="text-center">
+            <flag :data-item="props.dataItem"></flag>
+          </td>
+        </template> 
+        <template v-slot:isOnlineTemplate="{ props }">
+          <td class="text-center" v-if="props.rowType !== 'groupHeader'">
+            <isonline :data-item="props.dataItem"></isonline>
+          </td>
+        </template>
+        <template v-slot:budgetTemplate="{ props }">
+          <td class="text-center" v-if="props.rowType !== 'groupHeader'">
+            <budget :data-item="props.dataItem"></budget>
+          </td>
+        </template>
+        <template v-slot:engagementTemplate="{ props }">
+          <td class="text-center" v-if="props.rowType !== 'groupHeader'">
+            <engagement :data-item="props.dataItem"></engagement>
+          </td>
+        </template>
+      </Grid>
+    </pdfexport>
+  </div>
+</template>
+
+<script>
+import { process } from '@progress/kendo-data-query';
+import { Grid, GridToolbar } from '@progress/kendo-vue-grid';
+import { Input } from '@progress/kendo-vue-inputs';
+import { Button } from '@progress/kendo-vue-buttons';
+import { GridPdfExport } from '@progress/kendo-vue-pdf';
+import { saveExcel } from '@progress/kendo-vue-excel-export';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+
+import BudgetComponent from './BudgetComponent.vue';
+import EngagementComponent from './EngagementComponent.vue';
+import IsOnlineComponent from './IsOnlineComponent.vue';
+import Flag from './FlagComponent.vue';
+import ContactName from './ContactNameComponent.vue';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+
+import employees from './employees.json';
+
+export default {
+  name: 'App',
+  components: {
+    Grid: Grid,
+    toolbar: GridToolbar,
+    pdfexport: GridPdfExport,
+    budget: BudgetComponent,
+    engagement: EngagementComponent,
+    isonline: IsOnlineComponent,
+    flag: Flag,
+    contact: ContactName,
+    'k-input': Input,
+    kbutton: Button,
+    dropdownlist: DropDownList,
+  },
+  inject: {
+    kendoLocalizationService: { default: null },
+  },
+  data: function () {
+    return {
+      currentLocale: {
+        language: 'English',
+        locale: 'en',
+      },
+      locales: [
+        {
+          language: 'English',
+          locale: 'en',
+        },
+        {
+          language: 'French',
+          locale: 'fr',
+        },
+        {
+          language: 'Spanish',
+          locale: 'es',
+        },
+      ],
+      localizationLanguage: 'English',
+      searchWord: '',
+      columnMenu: true,
+      selectedField: 'selected',
+      expandField: 'expanded',
+      gridPageable: {
+        buttonCount: 5,
+        info: true,
+        type: 'numeric',
+        pageSizes: true,
+        previousNext: true,
+      },
+      employees: employees,
+      gridData: [],
+      skip: 0,
+      take: 10,
+      group: [],
+      sort: [],
+      filter: null,
+      expandedItems: [],
+    };
+  },
+  created: function () {
+    this.gridData = this.getData(this.employees);
+  },
+  computed: {
+    locale() {
+      if (this.localizationLanguage === 'Spanish') {
+        return 'es';
+      }
+
+      if (this.localizationLanguage === 'French') {
+        return 'fr';
+      }
+
+      return 'en';
+    },
+    selectedDataItems() {
+      return this.gridData.data.filter((item) => item.selected === true);
+    },
+    areAllSelected() {
+      return (
+        this.selectedDataItems.length === this.gridData.data.length &&
+        this.selectedDataItems.length !== 0
+      );
+    },
+    columns() {
+      return [
+        {
+          field: 'selected',
+          width: '45px',
+          columnMenu: false,
+          headerSelectionValue: this.areAllSelected,
+        },
+        {
+          title: this.employeeMessage,
+          children: [
+            {
+              field: 'full_name',
+              title: this.contactNameMessage,
+              width: '220px',
+              cell: 'contactTemplate',
+            },
+            { field: 'job_title', title: this.jobTitleMessage, width: '250px' },
+            {
+              field: 'country',
+              title: this.countryMessage,
+              width: '100px',
+              resizable: false,
+              className: 'text-center',
+              cell: 'flagTemplate',
+            },
+            {
+              field: 'is_online',
+              title: this.statusMessage,
+              width: '100px',
+              resizable: false,
+              className: 'text-center',
+              filter: 'boolean',
+              cell: 'isOnlineTemplate',
+            },
+          ],
+        },
+        {
+          title: this.performanceMessage,
+          children: [
+            {
+              field: 'target',
+              title: this.engagementMessage,
+              width: '230px',
+              resizable: false,
+              filter: 'numeric',
+              cell: 'engagementTemplate',
+            },
+            {
+              field: 'budget',
+              title: this.budgetMessage,
+              width: '120px',
+              filter: 'numeric',
+              format: '{0:c}',
+              cell: 'budgetTemplate',
+            },
+          ],
+        },
+        {
+          title: this.contactsMessage,
+          children: [
+            {
+              field: 'phone',
+              title: this.phoneMessage,
+              width: '140px',
+            },
+            {
+              field: 'address',
+              title: this.addressMessage,
+              width: '200px',
+            },
+          ],
+        },
+      ];
+    },
+    exportPdfMessage() {
+      return provideLocalizationService(this).toLanguageString(
+        'exportPdf',
+        'Export to PDF'
+      );
+    },
+    exportExcelMessage() {
+      return provideLocalizationService(this).toLanguageString(
+        'exportExcel',
+        'Export to Excel'
+      );
+    },
+    gridSearchMessage() {
+      return provideLocalizationService(this).toLanguageString(
+        'gridSearch',
+        'Search in all columns...'
+      );
+    },
+    contactNameMessage() {
+      return provideLocalizationService(this).toLanguageString(
+        'contactName',
+        'Contact Name'
+      );
+    },
+    jobTitleMessage() {
+      return provideLocalizationService(this).toLanguageString(
+        'jobTitle',
+        'Job Title'
+      );
+    },
+    countryMessage() {
+      return provideLocalizationService(this).toLanguageString(
+        'country',
+        'Country'
+      );
+    },
+    employeeMessage() {
+      return provideLocalizationService(this).toLanguageString(
+        'employee',
+        'Employee'
+      );
+    },
+    statusMessage() {
+      return provideLocalizationService(this).toLanguageString(
+        'status',
+        'Status'
+      );
+    },
+    engagementMessage() {
+      return provideLocalizationService(this).toLanguageString(
+        'engagement',
+        'Engagement'
+      );
+    },
+    performanceMessage() {
+      return provideLocalizationService(this).toLanguageString(
+        'performance',
+        'Performance'
+      );
+    },
+    budgetMessage() {
+      return provideLocalizationService(this).toLanguageString(
+        'budget',
+        'Budget'
+      );
+    },
+    contactsMessage() {
+      return provideLocalizationService(this).toLanguageString(
+        'contacts',
+        'Contacts'
+      );
+    },
+    phoneMessage() {
+      return provideLocalizationService(this).toLanguageString(
+        'phone',
+        'Phone'
+      );
+    },
+    addressMessage() {
+      return provideLocalizationService(this).toLanguageString(
+        'address',
+        'Address'
+      );
+    },
+  },
+  methods: {
+    onFilter(e) {
+      let inputValue = e.value;
+      this.searchWord = inputValue;
+      this.take = 10;
+      this.skip = 0;
+      if (inputValue !== '') {
+        this.filter = {
+          logic: 'or',
+          filters: [
+            {
+              field: 'full_name',
+              operator: 'contains',
+              value: inputValue,
+            },
+            {
+              field: 'job_title',
+              operator: 'contains',
+              value: inputValue,
+            },
+            {
+              field: 'budget',
+              operator: 'contains',
+              value: inputValue,
+            },
+            {
+              field: 'phone',
+              operator: 'contains',
+              value: inputValue,
+            },
+            {
+              field: 'address',
+              operator: 'contains',
+              value: inputValue,
+            },
+          ],
+        };
+      } else this.filter = null;
+      this.gridData = this.getData(this.employees);
+    },
+    onHeaderSelectionChange(event) {
+      let checked = event.event.target.checked;
+      const tempData = this.employees.map((item) => {
+        return { ...item, selected: checked };
+      });
+
+      const tempGridData = this.gridData.data.map((item) => {
+        return { ...item, selected: checked };
+      });
+      this.gridData.data = tempGridData;
+      this.employees = tempData;
+    },
+    getData(data) {
+      return process(data, {
+        take: this.take,
+        skip: this.skip,
+        group: this.group,
+        sort: this.sort,
+        filter: this.filter,
+      });
+    },
+    createAppState: function (dataState) {
+      this.group = dataState.group;
+      this.take = dataState.take;
+      this.skip = dataState.skip;
+      this.sort = dataState.sort;
+      this.filter = dataState.filter;
+
+      this.gridData = this.getData(this.employees);
+    },
+    dataStateChange: function (event) {
+      this.createAppState(event.data);
+    },
+    expandChange: function (event) {
+      if (event.dataItem) {
+        event.dataItem[event.target.$props.expandField] = event.value;
+        //
+        // In Vue 2 context, instead of the above line, inside the expandChange method we should have the following:
+        //
+        //   Vue.set(
+        //     event.dataItem,
+        //     event.target.$props.expandField,
+        //     event.dataItem.expanded === undefined ? false : !event.dataItem.expanded
+        //   );
+        //
+      }
+    },
+    exportExcel() {
+      const columnsToExport = [...this.columns];
+      columnsToExport.splice(0, 1);
+      saveExcel({
+        data: this.gridData.data,
+        group: this.group,
+        fileName: 'Employees',
+        columns: columnsToExport,
+      });
+    },
+    exportPDF() {
+      const tempSort = this.sort;
+      this.sort = null;
+      this.$nextTick(() => {
+        this.columnMenu = false;
+        this.$refs.gridPdfExport.save(
+          process(this.gridData.data, { skip: this.skip, take: this.take })
+        );
+        this.columnMenu = true;
+        this.sort = tempSort;
+      });
+    },
+    onSelectionChange(event) {
+      event.dataItem[this.selectedField] = !event.dataItem[this.selectedField];
+    },
+    localeChange(e) {
+      this.currentLocale = e.target.value;
+      this.localizationLanguage = e.target.value.language;
+      this.$emit('localizationLanguageChange', this.localizationLanguage);
+    },
+  },
+};
+</script>
+
+<style>
+td.text-center{
+  margin: 0px;
+}
+
+.customer-photo {
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-size: 32px 35px;
+  background-position: center center;
+  vertical-align: middle;
+  line-height: 32px;
+  box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0, 0, 0, 0.2);
+  margin-left: 5px;
+}
+
+.customer-name {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 32px;
+  padding-left: 10px;
+}
+
+.red {
+  color: #d9534f;
+}
+
+.text-bold {
+  font-weight: 600;
+}
+.export-buttons {
+  margin-left: auto;
+  margin-right: 0;
+}
+
+.localeDropDownList {
+  margin-right: 5px;
+}
+</style>
diff --git a/vue-options-api-demos/grid/basic/IsOnlineComponent.vue b/vue-options-api-demos/grid/basic/IsOnlineComponent.vue
new file mode 100644
index 00000000..c41d77a8
--- /dev/null
+++ b/vue-options-api-demos/grid/basic/IsOnlineComponent.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <span
+      :class="[
+        dataItem.is_online === true
+          ? ' k-badge k-badge-solid k-badge-success k-badge-md k-badge-rounded k-badge-inline'
+          : ' k-badge k-badge-solid k-badge-error k-badge-md k-badge-rounded k-badge-inline',
+      ]"
+      >{{ dataItem.is_online === true ? "Online" : "Offline" }}</span
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    dataItem: Object,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/basic/employees.json b/vue-options-api-demos/grid/basic/employees.json
new file mode 100644
index 00000000..b1240ebd
--- /dev/null
+++ b/vue-options-api-demos/grid/basic/employees.json
@@ -0,0 +1,1403 @@
+[
+    {
+      "id": "848e6002-8a92-447d-951b-1ffd5e695578",
+      "full_name": "Sig Jeannel",
+      "job_title": "Human Resources Assistant III",
+      "country": "US",
+      "is_online": true,
+      "rating": 3,
+      "target": 100,
+      "budget": 47601,
+      "phone": "(936) 9429601",
+      "address": "138 Buhler Avenue",
+      "img_id": 1,
+      "gender": "M"
+    },
+    {
+      "id": "19d18d40-0e64-4837-9420-92130a0ed253",
+      "full_name": "Shelden Greyes",
+      "job_title": "Operator",
+      "country": "GB",
+      "is_online": true,
+      "rating": 5,
+      "target": 40,
+      "budget": 12253,
+      "phone": "(343) 6656271",
+      "address": "2 Waxwing Point",
+      "img_id": 2,
+      "gender": "M"
+    },
+    {
+      "id": "bebdc6eb-9179-484a-917d-2e16a23bfdfe",
+      "full_name": "Megen Cody",
+      "job_title": "Operator",
+      "country": "BR",
+      "is_online": true,
+      "rating": 1,
+      "target": 66,
+      "budget": 96183,
+      "phone": "(178) 2336256",
+      "address": "4082 Stephen Court",
+      "img_id": 6,
+      "gender": "F"
+    },
+    {
+      "id": "38b08b88-e482-46fc-8976-83590c02ec23",
+      "full_name": "Clevey Thursfield",
+      "job_title": "VP Quality Control",
+      "country": "BR",
+      "is_online": true,
+      "rating": 2,
+      "target": 58,
+      "budget": 54936,
+      "phone": "(277) 7415010",
+      "address": "1563 Glacier Hill Parkway",
+      "img_id": 5,
+      "gender": "M"
+    },
+    {
+      "id": "2aac53f8-b72d-4629-9082-6d8239a8fecf",
+      "full_name": "Ruthi Baldini",
+      "job_title": "Data Coordiator",
+      "country": "BR",
+      "is_online": true,
+      "rating": 3,
+      "target": 37,
+      "budget": 46572,
+      "phone": "(766) 5691615",
+      "address": "6 Laurel Avenue",
+      "img_id": 8,
+      "gender": "F"
+    },
+    {
+      "id": "1aa789e5-de01-406e-a2ee-cc5ce20f7e34",
+      "full_name": "Annecorinne Morter",
+      "job_title": "Professor",
+      "country": "FR",
+      "is_online": false,
+      "rating": 2,
+      "target": 35,
+      "budget": 37198,
+      "phone": "(807) 2524830",
+      "address": "106 Green Street",
+      "img_id": 3,
+      "gender": "F"
+    },
+    {
+      "id": "d2ff1b02-3808-44aa-9056-3b5df34bf865",
+      "full_name": "Gracia Punyer",
+      "job_title": "Assistant Manager",
+      "country": "ES",
+      "is_online": true,
+      "rating": 4,
+      "target": 64,
+      "budget": 84752,
+      "phone": "(515) 9749536",
+      "address": "69 Brentwood Alley",
+      "img_id": 2,
+      "gender": "F"
+    },
+    {
+      "id": "26b2b760-27e8-47a6-81c2-07870d1b2b30",
+      "full_name": "Duky Hurring",
+      "job_title": "Account Executive",
+      "country": "BR",
+      "is_online": false,
+      "rating": 3,
+      "target": 61,
+      "budget": -1266,
+      "phone": "(897) 7202034",
+      "address": "39 Morning Circle",
+      "img_id": 3,
+      "gender": "M"
+    },
+    {
+      "id": "91c6b652-4206-4a0c-bac6-dc21283a72d7",
+      "full_name": "Briana Shemelt",
+      "job_title": "Professor",
+      "country": "US",
+      "is_online": false,
+      "rating": 3,
+      "target": 63,
+      "budget": -9308,
+      "phone": "(205) 2560799",
+      "address": "11 Walton Court",
+      "img_id": 2,
+      "gender": "F"
+    },
+    {
+      "id": "1e8289dc-2ef3-4045-ad6b-786d00368427",
+      "full_name": "Lexis Mostin",
+      "job_title": "Analyst Programmer",
+      "country": "FR",
+      "is_online": true,
+      "rating": 4,
+      "target": 81,
+      "budget": 38153,
+      "phone": "(903) 8388089",
+      "address": "38547 Westend Way",
+      "img_id": 4,
+      "gender": "F"
+    },
+    {
+      "id": "797387bd-c247-48b3-97b6-5e75791f8809",
+      "full_name": "Felizio Gooda",
+      "job_title": "GIS Technical Architect",
+      "country": "DE",
+      "is_online": true,
+      "rating": 3,
+      "target": 89,
+      "budget": 81585,
+      "phone": "(372) 2389397",
+      "address": "9 Summer Ridge Circle",
+      "img_id": 2,
+      "gender": "M"
+    },
+    {
+      "id": "24c541b0-4978-4072-84d0-abe94fcd0756",
+      "full_name": "Aubry Oxberry",
+      "job_title": "Financial Advisor",
+      "country": "BR",
+      "is_online": false,
+      "rating": 2,
+      "target": 3,
+      "budget": -6095,
+      "phone": "(665) 4176083",
+      "address": "06 Lerdahl Point",
+      "img_id": 10,
+      "gender": "F"
+    },
+    {
+      "id": "d3416440-7411-42cc-a913-7dd319ca8311",
+      "full_name": "Orly Glasbey",
+      "job_title": "Environmental Tech",
+      "country": "BR",
+      "is_online": true,
+      "rating": 5,
+      "target": 63,
+      "budget": 63945,
+      "phone": "(449) 8482879",
+      "address": "4035 Porter Parkway",
+      "img_id": 6,
+      "gender": "F"
+    },
+    {
+      "id": "139066b5-60c5-4cf5-9afe-fb4e5558b087",
+      "full_name": "Stephanus Culp",
+      "job_title": "Cost Accountant",
+      "country": "BR",
+      "is_online": false,
+      "rating": 2,
+      "target": 60,
+      "budget": 10613,
+      "phone": "(148) 3124030",
+      "address": "57028 Moland Terrace",
+      "img_id": 8,
+      "gender": "M"
+    },
+    {
+      "id": "eb844971-b97d-4f79-bd5a-a266fcfaaf70",
+      "full_name": "Roseanna Janecek",
+      "job_title": "Database Administrator IV",
+      "country": "FR",
+      "is_online": false,
+      "rating": 4,
+      "target": 97,
+      "budget": 77351,
+      "phone": "(125) 4421623",
+      "address": "21973 Beilfuss Alley",
+      "img_id": 4,
+      "gender": "F"
+    },
+    {
+      "id": "5cb391fe-4855-445c-a8b8-617c04d1d999",
+      "full_name": "Weidar McCombe",
+      "job_title": "Civil Engineer",
+      "country": "FR",
+      "is_online": true,
+      "rating": 1,
+      "target": 77,
+      "budget": 35924,
+      "phone": "(488) 7911627",
+      "address": "7 Dahle Terrace",
+      "img_id": 1,
+      "gender": "M"
+    },
+    {
+      "id": "4ba9ad7e-d8b7-40e7-b8cd-67a8e743a249",
+      "full_name": "Evelin Spirritt",
+      "job_title": "Analyst Programmer",
+      "country": "BR",
+      "is_online": false,
+      "rating": 2,
+      "target": 18,
+      "budget": 58552,
+      "phone": "(821) 9538078",
+      "address": "89418 Knutson Pass",
+      "img_id": 1,
+      "gender": "M"
+    },
+    {
+      "id": "e4a31407-39d1-4ab7-aad1-4e026a8c42fa",
+      "full_name": "Andria Helbeck",
+      "job_title": "Nurse Practicioner",
+      "country": "BR",
+      "is_online": true,
+      "rating": 4,
+      "target": 53,
+      "budget": 72526,
+      "phone": "(387) 9614638",
+      "address": "8589 Vernon Drive",
+      "img_id": 8,
+      "gender": "F"
+    },
+    {
+      "id": "cd050499-dbf1-4a43-86ab-54feaacef401",
+      "full_name": "Mariellen Ravelus",
+      "job_title": "Systems Administrator I",
+      "country": "DE",
+      "is_online": true,
+      "rating": 2,
+      "target": 22,
+      "budget": -6659,
+      "phone": "(300) 6741661",
+      "address": "707 Gale Hill",
+      "img_id": 9,
+      "gender": "F"
+    },
+    {
+      "id": "fda1c419-c0b8-4278-94b0-2ebef6bda164",
+      "full_name": "Corri Pergens",
+      "job_title": "Help Desk Operator",
+      "country": "BR",
+      "is_online": true,
+      "rating": 2,
+      "target": 74,
+      "budget": 12376,
+      "phone": "(769) 7145603",
+      "address": "856 Forest Crossing",
+      "img_id": 3,
+      "gender": "F"
+    },
+    {
+      "id": "4a962db9-136e-4fcc-a683-2f961e27fb6e",
+      "full_name": "Friedrick Macknish",
+      "job_title": "Human Resources Assistant II",
+      "country": "FR",
+      "is_online": true,
+      "rating": 2,
+      "target": 38,
+      "budget": 97848,
+      "phone": "(196) 4156385",
+      "address": "157 Talisman Trail",
+      "img_id": 9,
+      "gender": "M"
+    },
+    {
+      "id": "fa47e456-83c4-4fdc-b57b-07effb279967",
+      "full_name": "Georgette Trevorrow",
+      "job_title": "VP Accounting",
+      "country": "FR",
+      "is_online": true,
+      "rating": 3,
+      "target": 3,
+      "budget": 17327,
+      "phone": "(319) 1412549",
+      "address": "07 Marquette Point",
+      "img_id": 3,
+      "gender": "F"
+    },
+    {
+      "id": "67656444-fbcd-4813-84e7-1bdcd82f803e",
+      "full_name": "Vanya Goalby",
+      "job_title": "Senior Cost Accountant",
+      "country": "FR",
+      "is_online": false,
+      "rating": 2,
+      "target": 77,
+      "budget": 33584,
+      "phone": "(496) 7538982",
+      "address": "2192 Iowa Lane",
+      "img_id": 6,
+      "gender": "F"
+    },
+    {
+      "id": "05c098c2-9617-4e66-928a-e29b97297138",
+      "full_name": "Abel Ansell",
+      "job_title": "Actuary",
+      "country": "US",
+      "is_online": false,
+      "rating": 4,
+      "target": 52,
+      "budget": 12312,
+      "phone": "(571) 9908377",
+      "address": "4355 Iowa Parkway",
+      "img_id": 4,
+      "gender": "M"
+    },
+    {
+      "id": "3b263e99-51bf-4461-bb20-d4303d326cd9",
+      "full_name": "Odille Barus",
+      "job_title": "Speech Pathologist",
+      "country": "FR",
+      "is_online": true,
+      "rating": 4,
+      "target": 60,
+      "budget": 46911,
+      "phone": "(974) 1137672",
+      "address": "496 Lotheville Avenue",
+      "img_id": 8,
+      "gender": "F"
+    },
+    {
+      "id": "c09ddfaf-569e-4a75-8e53-1be27cf25927",
+      "full_name": "Rudolf Consadine",
+      "job_title": "Structural Analysis Engineer",
+      "country": "FR",
+      "is_online": true,
+      "rating": 4,
+      "target": 20,
+      "budget": 94258,
+      "phone": "(450) 7612220",
+      "address": "93 Thierer Park",
+      "img_id": 6,
+      "gender": "M"
+    },
+    {
+      "id": "a48abbc9-6143-4f77-a720-0b76ad862a9a",
+      "full_name": "Christabel Bick",
+      "job_title": "Engineer III",
+      "country": "FR",
+      "is_online": true,
+      "rating": 5,
+      "target": 0,
+      "budget": 65359,
+      "phone": "(361) 5159566",
+      "address": "191 Bunting Pass",
+      "img_id": 5,
+      "gender": "F"
+    },
+    {
+      "id": "d8816aee-4230-4392-a045-0a9c297451f7",
+      "full_name": "Lancelot Tanzer",
+      "job_title": "Senior Developer",
+      "country": "US",
+      "is_online": true,
+      "rating": 5,
+      "target": 80,
+      "budget": 13246,
+      "phone": "(502) 3949900",
+      "address": "4287 Corben Plaza",
+      "img_id": 8,
+      "gender": "M"
+    },
+    {
+      "id": "9f5af32c-fb0d-4449-a658-f2c7f182b63a",
+      "full_name": "Bink Byk",
+      "job_title": "Software Engineer I",
+      "country": "FR",
+      "is_online": false,
+      "rating": 3,
+      "target": 17,
+      "budget": 56472,
+      "phone": "(475) 9070061",
+      "address": "075 Eggendart Avenue",
+      "img_id": 9,
+      "gender": "M"
+    },
+    {
+      "id": "dbd7f48a-6540-4560-bb7c-cd60456b55b8",
+      "full_name": "Rhys Pheazey",
+      "job_title": "Speech Pathologist",
+      "country": "BR",
+      "is_online": false,
+      "rating": 5,
+      "target": 98,
+      "budget": 62483,
+      "phone": "(365) 8904529",
+      "address": "987 Carioca Lane",
+      "img_id": 9,
+      "gender": "M"
+    },
+    {
+      "id": "844189fe-d36e-4e06-9761-932259701fc8",
+      "full_name": "Lyndell Howieson",
+      "job_title": "Speech Pathologist",
+      "country": "DE",
+      "is_online": true,
+      "rating": 2,
+      "target": 82,
+      "budget": 16694,
+      "phone": "(461) 3130038",
+      "address": "9 Pennsylvania Crossing",
+      "img_id": 8,
+      "gender": "F"
+    },
+    {
+      "id": "5544d9d5-40ea-4e5a-8fb8-f5016b313b8f",
+      "full_name": "Cassey Fitchell",
+      "job_title": "Software Engineer III",
+      "country": "FR",
+      "is_online": true,
+      "rating": 2,
+      "target": 10,
+      "budget": 91253,
+      "phone": "(985) 5060547",
+      "address": "652 Merry Place",
+      "img_id": 9,
+      "gender": "F"
+    },
+    {
+      "id": "1c669764-3cff-424a-b7e4-e7711d6c7d6c",
+      "full_name": "Coralyn Steljes",
+      "job_title": "Accounting Assistant III",
+      "country": "FR",
+      "is_online": false,
+      "rating": 2,
+      "target": 81,
+      "budget": -9871,
+      "phone": "(760) 5696853",
+      "address": "4 Norway Maple Pass",
+      "img_id": 9,
+      "gender": "F"
+    },
+    {
+      "id": "4cc649dc-7f85-40ab-bc59-950f37268a65",
+      "full_name": "Bruis Creavin",
+      "job_title": "Nuclear Power Engineer",
+      "country": "BR",
+      "is_online": false,
+      "rating": 1,
+      "target": 59,
+      "budget": -5798,
+      "phone": "(570) 8801169",
+      "address": "71 Carioca Park",
+      "img_id": 6,
+      "gender": "M"
+    },
+    {
+      "id": "8c9505f1-e8f8-4ba6-8c9a-5a1d089c6f09",
+      "full_name": "Adrianne Peery",
+      "job_title": "Chief Design Engineer",
+      "country": "FR",
+      "is_online": false,
+      "rating": 2,
+      "target": 2,
+      "budget": 56575,
+      "phone": "(793) 1143493",
+      "address": "3 2nd Drive",
+      "img_id": 7,
+      "gender": "F"
+    },
+    {
+      "id": "ced0905e-44ac-4317-a203-76994e53a751",
+      "full_name": "Port Gerauld",
+      "job_title": "Senior Cost Accountant",
+      "country": "FR",
+      "is_online": true,
+      "rating": 2,
+      "target": 27,
+      "budget": 97919,
+      "phone": "(155) 5488067",
+      "address": "9 High Crossing Center",
+      "img_id": 5,
+      "gender": "M"
+    },
+    {
+      "id": "f0bcc7cd-999e-4611-a04f-7bdc16bc6160",
+      "full_name": "Boy Antoszewski",
+      "job_title": "VP Accounting",
+      "country": "GB",
+      "is_online": true,
+      "rating": 2,
+      "target": 11,
+      "budget": 74779,
+      "phone": "(715) 9192627",
+      "address": "3773 Hazelcrest Road",
+      "img_id": 6,
+      "gender": "M"
+    },
+    {
+      "id": "322540e3-b72e-4b7d-ae4a-d927911340b7",
+      "full_name": "Gib Yakebowitch",
+      "job_title": "Marketing Assistant",
+      "country": "BR",
+      "is_online": false,
+      "rating": 5,
+      "target": 57,
+      "budget": 89028,
+      "phone": "(923) 6953600",
+      "address": "7 Mariners Cove Point",
+      "img_id": 8,
+      "gender": "M"
+    },
+    {
+      "id": "b1ed798d-6177-4a27-9571-2e02be932214",
+      "full_name": "Minerva Gilders",
+      "job_title": "Administrative Officer",
+      "country": "BR",
+      "is_online": false,
+      "rating": 3,
+      "target": 54,
+      "budget": 32267,
+      "phone": "(773) 8863232",
+      "address": "82 Annamark Way",
+      "img_id": 4,
+      "gender": "F"
+    },
+    {
+      "id": "d26bcf84-a8b4-471c-a582-2de64d7e7715",
+      "full_name": "Wait Peperell",
+      "job_title": "Web Designer III",
+      "country": "US",
+      "is_online": true,
+      "rating": 4,
+      "target": 94,
+      "budget": 72251,
+      "phone": "(419) 5806752",
+      "address": "0355 Petterle Avenue",
+      "img_id": 8,
+      "gender": "M"
+    },
+    {
+      "id": "da813d45-bd3b-4bfa-abdd-e12050a5da14",
+      "full_name": "Ailsun Esmead",
+      "job_title": "Software Test Engineer III",
+      "country": "FR",
+      "is_online": true,
+      "rating": 1,
+      "target": 12,
+      "budget": 69596,
+      "phone": "(852) 7039628",
+      "address": "0 Lunder Crossing",
+      "img_id": 8,
+      "gender": "F"
+    },
+    {
+      "id": "944d8752-ef63-47bc-8db0-f40808d50b15",
+      "full_name": "Vallie Van der Velde",
+      "job_title": "Nurse",
+      "country": "GB",
+      "is_online": true,
+      "rating": 3,
+      "target": 89,
+      "budget": 19530,
+      "phone": "(331) 7690832",
+      "address": "2 Almo Lane",
+      "img_id": 4,
+      "gender": "F"
+    },
+    {
+      "id": "3d2f991c-58ef-436d-912e-49496fd2065c",
+      "full_name": "Dov Amber",
+      "job_title": "Sales Representative",
+      "country": "FR",
+      "is_online": false,
+      "rating": 4,
+      "target": 55,
+      "budget": 61106,
+      "phone": "(793) 4768356",
+      "address": "4 Rockefeller Street",
+      "img_id": 3,
+      "gender": "M"
+    },
+    {
+      "id": "29b406e9-ca20-45cb-8630-6df3a632276a",
+      "full_name": "Tedie Alu",
+      "job_title": "Business Systems Analyst",
+      "country": "FR",
+      "is_online": false,
+      "rating": 1,
+      "target": 76,
+      "budget": 3114,
+      "phone": "(602) 5831373",
+      "address": "28 Claremont Plaza",
+      "img_id": 5,
+      "gender": "M"
+    },
+    {
+      "id": "767de27a-421c-4147-a552-26ac56390339",
+      "full_name": "Tally Rizzi",
+      "job_title": "Civil Engineer",
+      "country": "US",
+      "is_online": false,
+      "rating": 1,
+      "target": 5,
+      "budget": 78575,
+      "phone": "(302) 6856300",
+      "address": "1 Roth Park",
+      "img_id": 10,
+      "gender": "M"
+    },
+    {
+      "id": "2b6e6902-11b5-4ca7-8a59-c32b3f57533b",
+      "full_name": "Ilise Lewnden",
+      "job_title": "Database Administrator I",
+      "country": "BR",
+      "is_online": false,
+      "rating": 4,
+      "target": 33,
+      "budget": -1059,
+      "phone": "(659) 8660881",
+      "address": "19 Stuart Alley",
+      "img_id": 2,
+      "gender": "F"
+    },
+    {
+      "id": "c891e87f-b19b-4cb5-8902-b19c59e37494",
+      "full_name": "Farr Penwright",
+      "job_title": "Senior Editor",
+      "country": "US",
+      "is_online": true,
+      "rating": 3,
+      "target": 82,
+      "budget": 30505,
+      "phone": "(505) 3900066",
+      "address": "9200 Karstens Crossing",
+      "img_id": 6,
+      "gender": "M"
+    },
+    {
+      "id": "65821428-adc7-4743-9dd8-cf62400e62f2",
+      "full_name": "Chantal Bidgod",
+      "job_title": "VP Sales",
+      "country": "BR",
+      "is_online": false,
+      "rating": 3,
+      "target": 62,
+      "budget": 25742,
+      "phone": "(746) 3962702",
+      "address": "8807 Kinsman Drive",
+      "img_id": 2,
+      "gender": "F"
+    },
+    {
+      "id": "f42907e0-d92c-4fb0-b886-2e84331ffe28",
+      "full_name": "Johanna Bergin",
+      "job_title": "Electrical Engineer",
+      "country": "BR",
+      "is_online": false,
+      "rating": 2,
+      "target": 54,
+      "budget": 25864,
+      "phone": "(720) 6442547",
+      "address": "93166 Spohn Court",
+      "img_id": 3,
+      "gender": "F"
+    },
+    {
+      "id": "4531be30-eec7-477f-bdc5-88acb8d902af",
+      "full_name": "Padriac Syphas",
+      "job_title": "Marketing Assistant",
+      "country": "BR",
+      "is_online": true,
+      "rating": 1,
+      "target": 50,
+      "budget": 20879,
+      "phone": "(606) 9062546",
+      "address": "50465 Buena Vista Plaza",
+      "img_id": 5,
+      "gender": "M"
+    },
+    {
+      "id": "4f0ab8f6-7a36-4a5c-a513-d5495223a9cd",
+      "full_name": "Garey De Maria",
+      "job_title": "Operator",
+      "country": "US",
+      "is_online": true,
+      "rating": 2,
+      "target": 54,
+      "budget": 94251,
+      "phone": "(972) 1133958",
+      "address": "24 Maple Wood Terrace",
+      "img_id": 9,
+      "gender": "M"
+    },
+    {
+      "id": "13556e73-d43a-485d-8603-cbf1769bd0ac",
+      "full_name": "Glenn Thorwarth",
+      "job_title": "Developer IV",
+      "country": "BR",
+      "is_online": false,
+      "rating": 5,
+      "target": 39,
+      "budget": 33511,
+      "phone": "(394) 3115946",
+      "address": "8 Dryden Park",
+      "img_id": 1,
+      "gender": "M"
+    },
+    {
+      "id": "c8389213-a2cd-4bb8-ba99-9c29e9b70881",
+      "full_name": "Bron Crosson",
+      "job_title": "GIS Technical Architect",
+      "country": "FR",
+      "is_online": true,
+      "rating": 2,
+      "target": 80,
+      "budget": 62081,
+      "phone": "(686) 7934926",
+      "address": "974 Mayfield Place",
+      "img_id": 9,
+      "gender": "M"
+    },
+    {
+      "id": "cd233a4e-0315-496d-8f5f-4c8787b0f1ba",
+      "full_name": "Garey Malecky",
+      "job_title": "Account Executive",
+      "country": "BR",
+      "is_online": false,
+      "rating": 5,
+      "target": 51,
+      "budget": 76354,
+      "phone": "(304) 6324519",
+      "address": "3 Paget Court",
+      "img_id": 9,
+      "gender": "M"
+    },
+    {
+      "id": "339838eb-99dc-4fc0-8e18-060dbcf6bf78",
+      "full_name": "Elisabet Kimblin",
+      "job_title": "Automation Specialist I",
+      "country": "US",
+      "is_online": true,
+      "rating": 3,
+      "target": 35,
+      "budget": 26755,
+      "phone": "(904) 3334563",
+      "address": "75 Buell Court",
+      "img_id": 1,
+      "gender": "F"
+    },
+    {
+      "id": "90a03a5a-1f16-4721-8c56-af4bb89a1f57",
+      "full_name": "Berk Uttley",
+      "job_title": "Health Coach IV",
+      "country": "FR",
+      "is_online": false,
+      "rating": 4,
+      "target": 58,
+      "budget": 82064,
+      "phone": "(200) 2124940",
+      "address": "4 Mockingbird Trail",
+      "img_id": 8,
+      "gender": "M"
+    },
+    {
+      "id": "ce5ba778-43eb-4658-a6bd-56f04e6f125f",
+      "full_name": "Kenny Clackers",
+      "job_title": "Assistant Manager",
+      "country": "FR",
+      "is_online": true,
+      "rating": 4,
+      "target": 37,
+      "budget": 47477,
+      "phone": "(926) 3235464",
+      "address": "53315 Bashford Lane",
+      "img_id": 2,
+      "gender": "M"
+    },
+    {
+      "id": "df3dffe4-6fb4-4a9c-8512-71f7cb508180",
+      "full_name": "Rickard Pingston",
+      "job_title": "Environmental Specialist",
+      "country": "BR",
+      "is_online": true,
+      "rating": 5,
+      "target": 72,
+      "budget": 94173,
+      "phone": "(902) 4658383",
+      "address": "8 Mesta Court",
+      "img_id": 2,
+      "gender": "M"
+    },
+    {
+      "id": "2757a92d-5eed-4215-818f-fdf15b6b27d0",
+      "full_name": "Hobard Clabburn",
+      "job_title": "Systems Administrator I",
+      "country": "BR",
+      "is_online": true,
+      "rating": 2,
+      "target": 37,
+      "budget": 66166,
+      "phone": "(711) 6587550",
+      "address": "29796 Mcbride Court",
+      "img_id": 2,
+      "gender": "M"
+    },
+    {
+      "id": "71ebd82a-f9f2-48ea-ada4-ce8db424df64",
+      "full_name": "Uri Champken",
+      "job_title": "Software Test Engineer IV",
+      "country": "BR",
+      "is_online": false,
+      "rating": 1,
+      "target": 39,
+      "budget": 65176,
+      "phone": "(514) 1953919",
+      "address": "78 Rowland Alley",
+      "img_id": 6,
+      "gender": "M"
+    },
+    {
+      "id": "b7a77c35-1f9f-45c5-ba44-7622d279b377",
+      "full_name": "Obidiah Fold",
+      "job_title": "Budget/Accounting Analyst I",
+      "country": "FR",
+      "is_online": false,
+      "rating": 5,
+      "target": 66,
+      "budget": 74529,
+      "phone": "(747) 8711780",
+      "address": "58 Lakeland Court",
+      "img_id": 9,
+      "gender": "M"
+    },
+    {
+      "id": "9c0fbca6-b793-4fdc-8dcf-5136cb5d049c",
+      "full_name": "Angelia Marconi",
+      "job_title": "Associate Professor",
+      "country": "FR",
+      "is_online": false,
+      "rating": 4,
+      "target": 91,
+      "budget": 38996,
+      "phone": "(530) 7506861",
+      "address": "7 Ohio Parkway",
+      "img_id": 2,
+      "gender": "F"
+    },
+    {
+      "id": "9083010c-4f59-49e7-96c6-894cbf24ed75",
+      "full_name": "Ronda Lock",
+      "job_title": "Quality Engineer",
+      "country": "US",
+      "is_online": false,
+      "rating": 5,
+      "target": 36,
+      "budget": 69903,
+      "phone": "(916) 6819628",
+      "address": "802 American Ash Street",
+      "img_id": 6,
+      "gender": "F"
+    },
+    {
+      "id": "4225013e-fd75-46f6-b678-b25675e131bc",
+      "full_name": "Rachele Fantham",
+      "job_title": "Business Systems Analyst",
+      "country": "FR",
+      "is_online": true,
+      "rating": 2,
+      "target": 100,
+      "budget": 79333,
+      "phone": "(652) 3112938",
+      "address": "62 Grim Center",
+      "img_id": 4,
+      "gender": "F"
+    },
+    {
+      "id": "b75a42e9-db84-479c-96b0-d88109abfebb",
+      "full_name": "Emanuel Deery",
+      "job_title": "Electrical Engineer",
+      "country": "BR",
+      "is_online": false,
+      "rating": 3,
+      "target": 93,
+      "budget": 77477,
+      "phone": "(860) 8318923",
+      "address": "850 Mifflin Junction",
+      "img_id": 8,
+      "gender": "M"
+    },
+    {
+      "id": "b2e28f42-7a35-4e23-b2e4-40fe3ed909ca",
+      "full_name": "Clay Ellins",
+      "job_title": "Design Engineer",
+      "country": "US",
+      "is_online": true,
+      "rating": 4,
+      "target": 98,
+      "budget": 4120,
+      "phone": "(682) 4688237",
+      "address": "458 Scoville Lane",
+      "img_id": 5,
+      "gender": "M"
+    },
+    {
+      "id": "4239103e-80bc-4f09-8655-c2165b063027",
+      "full_name": "Bettina Menlove",
+      "job_title": "Senior Financial Analyst",
+      "country": "FR",
+      "is_online": false,
+      "rating": 5,
+      "target": 78,
+      "budget": 80574,
+      "phone": "(293) 8801412",
+      "address": "29 Onsgard Junction",
+      "img_id": 8,
+      "gender": "F"
+    },
+    {
+      "id": "8442ff74-6f05-43f7-90de-b948a5c2c895",
+      "full_name": "Claiborne Willoughey",
+      "job_title": "Food Chemist",
+      "country": "US",
+      "is_online": true,
+      "rating": 5,
+      "target": 44,
+      "budget": 44673,
+      "phone": "(707) 3380798",
+      "address": "39114 Killdeer Terrace",
+      "img_id": 6,
+      "gender": "M"
+    },
+    {
+      "id": "1701041a-2ede-4c1d-a51b-8fe4b3ec1c35",
+      "full_name": "Desmond Gritskov",
+      "job_title": "Pharmacist",
+      "country": "BR",
+      "is_online": false,
+      "rating": 4,
+      "target": 66,
+      "budget": 45319,
+      "phone": "(412) 1336481",
+      "address": "6912 Farwell Street",
+      "img_id": 6,
+      "gender": "M"
+    },
+    {
+      "id": "609fd74e-e6c3-41ae-a227-d3d9caba0582",
+      "full_name": "Codee Maybery",
+      "job_title": "Clinical Specialist",
+      "country": "US",
+      "is_online": true,
+      "rating": 2,
+      "target": 26,
+      "budget": 43462,
+      "phone": "(682) 7969803",
+      "address": "4 Tennessee Plaza",
+      "img_id": 3,
+      "gender": "F"
+    },
+    {
+      "id": "f535ef7f-c79d-4936-af40-d062d2b2d5c0",
+      "full_name": "Denys Beynke",
+      "job_title": "Occupational Therapist",
+      "country": "BR",
+      "is_online": true,
+      "rating": 4,
+      "target": 60,
+      "budget": 32402,
+      "phone": "(110) 4341370",
+      "address": "99 Trailsway Park",
+      "img_id": 4,
+      "gender": "M"
+    },
+    {
+      "id": "ae126e65-b6ab-4388-ba5c-f6f5d54fc435",
+      "full_name": "Guthry Limpricht",
+      "job_title": "Geologist II",
+      "country": "DE",
+      "is_online": true,
+      "rating": 3,
+      "target": 65,
+      "budget": 68462,
+      "phone": "(100) 8946768",
+      "address": "3117 Commercial Crossing",
+      "img_id": 2,
+      "gender": "M"
+    },
+    {
+      "id": "9b1efdfc-4cce-4350-9516-028884fb1725",
+      "full_name": "Cammie Knoble",
+      "job_title": "Community Outreach Specialist",
+      "country": "GB",
+      "is_online": false,
+      "rating": 2,
+      "target": 1,
+      "budget": 70198,
+      "phone": "(352) 1663192",
+      "address": "55 Longview Place",
+      "img_id": 4,
+      "gender": "F"
+    },
+    {
+      "id": "a44c41e2-3adc-4d52-acb3-06f90e0214c9",
+      "full_name": "Kiri Espinal",
+      "job_title": "Accounting Assistant I",
+      "country": "FR",
+      "is_online": false,
+      "rating": 3,
+      "target": 47,
+      "budget": 3712,
+      "phone": "(946) 6686147",
+      "address": "90480 Chinook Drive",
+      "img_id": 4,
+      "gender": "F"
+    },
+    {
+      "id": "9d6d3063-7be8-49fe-be31-64d0d5949f02",
+      "full_name": "Joy Tiddy",
+      "job_title": "Engineer III",
+      "country": "FR",
+      "is_online": true,
+      "rating": 5,
+      "target": 80,
+      "budget": 61355,
+      "phone": "(849) 1097790",
+      "address": "76 Summerview Hill",
+      "img_id": 9,
+      "gender": "F"
+    },
+    {
+      "id": "44def3bb-7c65-45d3-aef6-bf8b49f934b3",
+      "full_name": "Arlene Karlsson",
+      "job_title": "Civil Engineer",
+      "country": "BR",
+      "is_online": true,
+      "rating": 4,
+      "target": 98,
+      "budget": 14267,
+      "phone": "(699) 4713080",
+      "address": "90 Dorton Point",
+      "img_id": 5,
+      "gender": "F"
+    },
+    {
+      "id": "7b991e13-bef7-4f19-bd18-d5aa9d263cba",
+      "full_name": "Melony Millwater",
+      "job_title": "Chief Design Engineer",
+      "country": "US",
+      "is_online": true,
+      "rating": 2,
+      "target": 27,
+      "budget": 67126,
+      "phone": "(352) 5197697",
+      "address": "65242 Derek Place",
+      "img_id": 1,
+      "gender": "F"
+    },
+    {
+      "id": "ab6704b8-20ed-4881-ab28-96e3d55f7792",
+      "full_name": "Mab Ballham",
+      "job_title": "Programmer Analyst II",
+      "country": "FR",
+      "is_online": false,
+      "rating": 1,
+      "target": 34,
+      "budget": 65648,
+      "phone": "(699) 9285470",
+      "address": "2579 Messerschmidt Crossing",
+      "img_id": 8,
+      "gender": "F"
+    },
+    {
+      "id": "03f0f5a0-8b7c-486e-ae4b-c9e5858bbde8",
+      "full_name": "Nixie MacAskie",
+      "job_title": "Structural Analysis Engineer",
+      "country": "BR",
+      "is_online": true,
+      "rating": 2,
+      "target": 13,
+      "budget": -5312,
+      "phone": "(434) 6153212",
+      "address": "59672 Village Court",
+      "img_id": 4,
+      "gender": "F"
+    },
+    {
+      "id": "6b63462d-b181-4055-813d-983002ea57b8",
+      "full_name": "Gianni Crafts",
+      "job_title": "Tax Accountant",
+      "country": "FR",
+      "is_online": false,
+      "rating": 3,
+      "target": 54,
+      "budget": 85744,
+      "phone": "(428) 3135618",
+      "address": "53766 Buhler Parkway",
+      "img_id": 8,
+      "gender": "M"
+    },
+    {
+      "id": "dcafac96-c436-4232-8d0e-eda10d029e1d",
+      "full_name": "Moyra Summerlie",
+      "job_title": "Business Systems Analyst",
+      "country": "FR",
+      "is_online": true,
+      "rating": 5,
+      "target": 3,
+      "budget": 19109,
+      "phone": "(960) 7792763",
+      "address": "127 Spohn Crossing",
+      "img_id": 6,
+      "gender": "F"
+    },
+    {
+      "id": "a765924f-8ffb-4186-8991-6000a6ce2652",
+      "full_name": "Hagan Trevers",
+      "job_title": "Mechanical Systems Engineer",
+      "country": "FR",
+      "is_online": false,
+      "rating": 2,
+      "target": 93,
+      "budget": 28290,
+      "phone": "(749) 8913157",
+      "address": "516 Clove Road",
+      "img_id": 7,
+      "gender": "M"
+    },
+    {
+      "id": "2c3423dd-81d0-4e41-987e-1c39956c9ba8",
+      "full_name": "Sela Westmacott",
+      "job_title": "Account Executive",
+      "country": "BR",
+      "is_online": false,
+      "rating": 3,
+      "target": 29,
+      "budget": 58239,
+      "phone": "(130) 9778509",
+      "address": "81 Maple Point",
+      "img_id": 2,
+      "gender": "F"
+    },
+    {
+      "id": "e8bce62e-3bf4-4232-801c-bbcc8dab2e74",
+      "full_name": "Lilia Wiz",
+      "job_title": "VP Product Management",
+      "country": "FR",
+      "is_online": false,
+      "rating": 1,
+      "target": 65,
+      "budget": 1438,
+      "phone": "(418) 5940094",
+      "address": "905 Hauk Point",
+      "img_id": 1,
+      "gender": "F"
+    },
+    {
+      "id": "5b9b9235-e0f2-4102-b5f1-d512774e7191",
+      "full_name": "Orlan MacAlpin",
+      "job_title": "Statistician I",
+      "country": "US",
+      "is_online": false,
+      "rating": 1,
+      "target": 1,
+      "budget": 9094,
+      "phone": "(512) 7106617",
+      "address": "6055 Truax Way",
+      "img_id": 2,
+      "gender": "M"
+    },
+    {
+      "id": "1124d1b2-6ac3-4f2f-ba35-1da116844b0e",
+      "full_name": "Ty Nutton",
+      "job_title": "Speech Pathologist",
+      "country": "FR",
+      "is_online": false,
+      "rating": 5,
+      "target": 88,
+      "budget": 76684,
+      "phone": "(250) 2530424",
+      "address": "37247 Merry Plaza",
+      "img_id": 1,
+      "gender": "M"
+    },
+    {
+      "id": "01e7f525-ab3f-48b7-941f-c6ad601ea69f",
+      "full_name": "Mirelle Jandl",
+      "job_title": "Civil Engineer",
+      "country": "DE",
+      "is_online": true,
+      "rating": 3,
+      "target": 19,
+      "budget": 94486,
+      "phone": "(871) 7917453",
+      "address": "31 Anderson Hill",
+      "img_id": 10,
+      "gender": "F"
+    },
+    {
+      "id": "078b38d3-79a5-4df1-bd97-f83e300224a4",
+      "full_name": "Diann Bertram",
+      "job_title": "Structural Engineer",
+      "country": "BR",
+      "is_online": true,
+      "rating": 2,
+      "target": 38,
+      "budget": 2769,
+      "phone": "(716) 9445650",
+      "address": "958 Swallow Drive",
+      "img_id": 4,
+      "gender": "F"
+    },
+    {
+      "id": "7ca6af51-11bc-44f3-b92f-7af02923d040",
+      "full_name": "Cindra Slobom",
+      "job_title": "Web Designer III",
+      "country": "BR",
+      "is_online": true,
+      "rating": 5,
+      "target": 48,
+      "budget": 81624,
+      "phone": "(409) 9223432",
+      "address": "82525 Northridge Junction",
+      "img_id": 1,
+      "gender": "F"
+    },
+    {
+      "id": "86a585e1-b76d-43b5-982d-e74b5b4b616b",
+      "full_name": "Tymon Mattheissen",
+      "job_title": "Dental Hygienist",
+      "country": "FR",
+      "is_online": false,
+      "rating": 2,
+      "target": 51,
+      "budget": 42972,
+      "phone": "(724) 3234885",
+      "address": "64363 Anzinger Plaza",
+      "img_id": 3,
+      "gender": "M"
+    },
+    {
+      "id": "37e366fb-9371-4df5-980c-e9678ec9cde2",
+      "full_name": "Fancie Heighton",
+      "job_title": "Paralegal",
+      "country": "FR",
+      "is_online": true,
+      "rating": 5,
+      "target": 52,
+      "budget": 67403,
+      "phone": "(738) 9982239",
+      "address": "4353 Hermina Junction",
+      "img_id": 1,
+      "gender": "F"
+    },
+    {
+      "id": "b7df7c2a-4d40-4c03-bfb6-ab6d6930340c",
+      "full_name": "Kit Utteridge",
+      "job_title": "Office Assistant I",
+      "country": "FR",
+      "is_online": true,
+      "rating": 4,
+      "target": 93,
+      "budget": 36268,
+      "phone": "(710) 2371400",
+      "address": "46806 Moland Center",
+      "img_id": 7,
+      "gender": "F"
+    },
+    {
+      "id": "7d740468-fad9-4687-895b-cee07aa3bc3d",
+      "full_name": "Lea Willey",
+      "job_title": "VP Quality Control",
+      "country": "US",
+      "is_online": false,
+      "rating": 3,
+      "target": 19,
+      "budget": 54614,
+      "phone": "(304) 3327700",
+      "address": "1 Moland Crossing",
+      "img_id": 6,
+      "gender": "F"
+    },
+    {
+      "id": "88df162f-24fa-495d-a65c-b948607193b8",
+      "full_name": "Arri Halton",
+      "job_title": "Staff Accountant II",
+      "country": "GB",
+      "is_online": true,
+      "rating": 5,
+      "target": 73,
+      "budget": 32500,
+      "phone": "(743) 8449571",
+      "address": "3 Starling Trail",
+      "img_id": 3,
+      "gender": "M"
+    },
+    {
+      "id": "cb93d087-2f15-43cd-9bc3-89716e39a724",
+      "full_name": "Malva Pierpoint",
+      "job_title": "Operator",
+      "country": "US",
+      "is_online": true,
+      "rating": 4,
+      "target": 98,
+      "budget": 20312,
+      "phone": "(423) 8195288",
+      "address": "57584 Algoma Plaza",
+      "img_id": 1,
+      "gender": "F"
+    },
+    {
+      "id": "b76e54a1-1c46-49aa-9464-7dd9aa738b65",
+      "full_name": "Dalston Sabben",
+      "job_title": "Social Worker",
+      "country": "BR",
+      "is_online": true,
+      "rating": 4,
+      "target": 85,
+      "budget": 99048,
+      "phone": "(388) 2523908",
+      "address": "53578 Clove Lane",
+      "img_id": 4,
+      "gender": "M"
+    },
+    {
+      "id": "608f098b-16f8-4460-bb35-9599a8a74280",
+      "full_name": "Delinda Margrie",
+      "job_title": "Financial Advisor",
+      "country": "US",
+      "is_online": false,
+      "rating": 1,
+      "target": 1,
+      "budget": 8398,
+      "phone": "(702) 6480692",
+      "address": "9 Dapin Plaza",
+      "img_id": 9,
+      "gender": "F"
+    },
+    {
+      "id": "23b426f8-76d5-4808-84cb-c42bde8362fd",
+      "full_name": "Meggi Westman",
+      "job_title": "Librarian",
+      "country": "US",
+      "is_online": true,
+      "rating": 3,
+      "target": 64,
+      "budget": 63413,
+      "phone": "(682) 3495155",
+      "address": "82 Duke Terrace",
+      "img_id": 7,
+      "gender": "F"
+    },
+    {
+      "id": "7ecfb74e-64d9-43ee-a028-d2e3841acba9",
+      "full_name": "Bret Barnsdall",
+      "job_title": "Registered Nurse",
+      "country": "BR",
+      "is_online": true,
+      "rating": 3,
+      "target": 52,
+      "budget": 55153,
+      "phone": "(222) 2089814",
+      "address": "4 Corry Park",
+      "img_id": 8,
+      "gender": "M"
+    },
+    {
+      "id": "cf505561-d9e1-4d2a-93d5-4745d50595c2",
+      "full_name": "Matthus Shyres",
+      "job_title": "Marketing Manager",
+      "country": "FR",
+      "is_online": false,
+      "rating": 3,
+      "target": 68,
+      "budget": 33697,
+      "phone": "(539) 9486139",
+      "address": "460 Norway Maple Junction",
+      "img_id": 1,
+      "gender": "M"
+    }
+  ]
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/grid/basic/en-US.js b/vue-options-api-demos/grid/basic/en-US.js
new file mode 100644
index 00000000..e4496d1f
--- /dev/null
+++ b/vue-options-api-demos/grid/basic/en-US.js
@@ -0,0 +1,297 @@
+// Custom Messages
+export const enCustomMessages = {
+    teamEfficiency: "Team Efficiency",
+    teamMembers: "Team Members",
+    dashboard: "Dashboard",
+    planning: "Planning",
+    profile: "Profile",
+    info: "Info",
+    language: "Language",
+    trend: "Trend",
+    volume: "Volume",
+    myTeam: "My Team",
+    allTeams: "All Teams",
+    teamCalendar: "Team Calendar",
+    saveChanges: "Save Changes",
+    cancel: "Cancel",
+    warehouse: "Coffee Warehouse",
+    startFreeTrial: "Start Free Trial",
+    buyNow: "Buy Now",
+    getSource: "Get the source code on GitHub",
+    demoInfo:
+        "This demo application is built using the following Kendo UI for Vue components.",
+    firstName: "First Name",
+    middleName: "Middle Name",
+    lastName: "Last Name",
+    email: "Email Address",
+    phoneNumber: "Phone Number",
+    country: "Country",
+    biography: "Short Biography",
+    public: "Include in public directory",
+    team: "Team",
+    employee: "Employee",
+    contactName: "Contact Name",
+    jobTitle: "Job Title",
+    status: "Status",
+    performance: "Performance",
+    rating: "Rating",
+    engagement: "Engagement",
+    budget: "Budget",
+    contacts: "Contacts",
+    address: "Address",
+    phone: "Phone",
+    gridSearch: "Search in all columns...",
+    exportExcel: "Export to Excel",
+    exportPdf: "Export to PDF"
+};
+
+// Kendo Component Messages
+export const enComponentMessages = {
+    // Grid
+    "kendo.grid.groupPanelEmpty":
+        "Drag a column header and drop it here to group by that column",
+    "kendo.grid.noRecords": "No records available.",
+    "kendo.grid.pagerFirstPage": "Go to the first page",
+    "kendo.grid.pagerPreviousPage": "Go to the previous page",
+    "kendo.grid.pagerNextPage": "Go to the next page",
+    "kendo.grid.pagerLastPage": "Go to the last page",
+    "kendo.grid.pagerPage": "Page",
+    "kendo.grid.pagerOf": "of",
+    "kendo.grid.pagerItems": "items",
+    "kendo.grid.pagerItemsPerPage": "items per page",
+    "kendo.grid.pagerPageNumberInputTitle": "Page Number",
+    "kendo.grid.filter": "Filter",
+    "kendo.grid.filterEqOperator": "Is equal to",
+    "kendo.grid.filterNotEqOperator": "Is not equal to",
+    "kendo.grid.filterIsNullOperator": "Is null",
+    "kendo.grid.filterIsNotNullOperator": "Is not null",
+    "kendo.grid.filterIsEmptyOperator": "Is empty",
+    "kendo.grid.filterIsNotEmptyOperator": "Is not empty",
+    "kendo.grid.filterStartsWithOperator": "Starts with",
+    "kendo.grid.filterContainsOperator": "Contains",
+    "kendo.grid.filterNotContainsOperator": "Does not contain",
+    "kendo.grid.filterEndsWithOperator": "Ends with",
+    "kendo.grid.filterGteOperator": "Is greater than or equal to",
+    "kendo.grid.filterGtOperator": "Is greater than",
+    "kendo.grid.filterLteOperator": "Is less than or equal to",
+    "kendo.grid.filterLtOperator": "Is less than",
+    "kendo.grid.filterIsTrue": "is true",
+    "kendo.grid.filterIsFalse": "is false",
+    "kendo.grid.filterBooleanAll": "(All)",
+    "kendo.grid.filterAfterOrEqualOperator": "Is after or equal to",
+    "kendo.grid.filterAfterOperator": "Is after",
+    "kendo.grid.filterBeforeOperator": "Is before",
+    "kendo.grid.filterBeforeOrEqualOperator": "Is before or equal to",
+    "kendo.grid.filterFilterButton": "Filter",
+    "kendo.grid.filterClearButton": "Clear",
+    "kendo.grid.filterAndLogic": "And",
+    "kendo.grid.filterOrLogic": "Or",
+    "kendo.grid.filterDateToggle": "Toggle calendar",
+    "kendo.grid.filterDateToday": "Today",
+    "kendo.grid.filterNumericDecrement": "Decrease value",
+    "kendo.grid.filterNumericIncrement": "Increase value",
+    "kendo.grid.loading": "Loading",
+    "kendo.grid.sort": "Sort",
+    "kendo.grid.columnMenu": "Column Menu",
+    "kendo.grid.columns": "Columns",
+    "kendo.grid.lock": "Lock",
+    "kendo.grid.unlock": "Unlock",
+    "kendo.grid.stick": "Stick",
+    "kendo.grid.unstick": "Unstick",
+    "kendo.grid.setColumnPosition": "Set Column Position",
+    "kendo.grid.sortAscending": "Sort Ascending",
+    "kendo.grid.sortDescending": "Sort Descending",
+    "kendo.grid.columnsApply": "Apply",
+    "kendo.grid.columnsReset": "Reset",
+    "kendo.grid.sortable": "Sortable",
+    "kendo.grid.sortedAscending": "Sorted ascending",
+    "kendo.grid.sortedDescending": "Sorted descending",
+    "kendo.grid.sortedDefault": "Not sorted",
+
+    // DropDowns
+    "kendo.autocomplete.noDataText": "No data found",
+    "kendo.autocomplete.clearTitle": "Clear",
+    "kendo.combobox.noDataText": "No data found",
+    "kendo.combobox.clearTitle": "Clear",
+    "kendo.dropdownlist.noDataText": "No data found",
+    "kendo.dropdownlist.clearTitle": "Clear",
+
+    // Calendar
+    "kendo.calendar.today": "TODAY",
+
+    // TextBox
+    "kendo.textbox.clearTitle": "Clear",
+
+    // DatePicker
+    "kendo.datepicker.today": "TODAY",
+    "kendo.datepicker.toggle": "Toggle calendar",
+
+    // DateInput
+    "kendo.dateinput.increment": "Increase value",
+    "kendo.dateinput.decrement": "Decrease value",
+
+    // NumericTextBox
+    "kendo.numerictextbox.increment": "Increase value",
+    "kendo.numerictextbox.decrement": "Decrease value",
+
+    // DateTimePicker
+    "kendo.datetimepicker.dateTab": "Date",
+    "kendo.datetimepicker.dateTabLabel": "Date tab",
+    "kendo.datetimepicker.timeTab": "Time",
+    "kendo.datetimepicker.timeTabLabel": "Time tab",
+    "kendo.datetimepicker.toggle": "Toggle popup",
+    "kendo.datetimepicker.accept": "Set",
+    "kendo.datetimepicker.acceptLabel": "Set",
+    "kendo.datetimepicker.cancel": "Cancel",
+    "kendo.datetimepicker.cancelLabel": "Cancel",
+    "kendo.datetimepicker.now": "NOW",
+    "kendo.datetimepicker.nowLabel": "Select now",
+    "kendo.datetimepicker.today": "TODAY",
+    "kendo.datetimepicker.prevButtonTitle": "Navigate to previous view",
+    "kendo.datetimepicker.nextButtonTitle": "Navigate to next view",
+
+    // TimePicker
+    "kendo.timepicker.accept": "Set",
+    "kendo.timepicker.acceptLabel": "Set",
+    "kendo.timepicker.cancel": "Cancel",
+    "kendo.timepicker.cancelLabel": "Cancel",
+    "kendo.timepicker.now": "Now",
+    "kendo.timepicker.nowLabel": "Now",
+    "kendo.timepicker.toggle": "Toggle time list",
+
+    // FileSelect
+    "kendo.fileselect.cancel": "Cancel",
+    "kendo.fileselect.clearSelectedFiles": "Clear",
+    "kendo.fileselect.dropFilesHere": "Drop files here to upload",
+    "kendo.fileselect.externalDropFilesHere":
+        "Drag and drop files here to upload",
+    "kendo.fileselect.filesBatchStatus": "files",
+    "kendo.fileselect.filesBatchStatusFailed": "files failed to upload.",
+    "kendo.fileselect.filesBatchStatusUploaded": "files successfully uploaded.",
+    "kendo.fileselect.fileStatusFailed": "File failed to upload.",
+    "kendo.fileselect.fileStatusUploaded": "File successfully uploaded.",
+    "kendo.fileselect.headerStatusPaused": "Paused",
+    "kendo.fileselect.headerStatusUploaded": "Done",
+    "kendo.fileselect.headerStatusUploading": "Uploading...",
+    "kendo.fileselect.invalidFileExtension": "File type not allowed.",
+    "kendo.fileselect.invalidMaxFileSize": "File size too large.",
+    "kendo.fileselect.invalidMinFileSize": "File size too small.",
+    "kendo.fileselect.remove": "Remove",
+    "kendo.fileselect.retry": "Retry",
+    "kendo.fileselect.select": "Select files...",
+    "kendo.fileselect.uploadSelectedFiles": "Upload files",
+
+    // Scheduler
+    "kendo.scheduler.agendaViewTitle": "Agenda",
+    "kendo.scheduler.allDay": "all day",
+    "kendo.scheduler.allEvents": "All events",
+    "kendo.scheduler.calendarToday": "TODAY",
+    "kendo.scheduler.cancel": "Cancel",
+    "kendo.scheduler.save": "Save",
+    "kendo.scheduler.editorEventTitle": "Title",
+    "kendo.scheduler.editorEventStart": "Start",
+    "kendo.scheduler.editorEventStartTimeZone": "Start Time Zone",
+    "kendo.scheduler.editorEventEnd": "End",
+    "kendo.scheduler.editorEventEndTimeZone": "End Time Zone",
+    "kendo.scheduler.dateHeader": "Date",
+    "kendo.scheduler.dayViewTitle": "Day",
+    "kendo.scheduler.deleteConfirmation":
+        "Are you sure you want to delete this event?",
+    "kendo.scheduler.deleteDialogTitle": "Delete Event",
+    "kendo.scheduler.deleteOccurrence": "Delete current occurrence",
+    "kendo.scheduler.deleteRecurringConfirmation":
+        "Do you want to delete only this event occurrence or the whole series?",
+    "kendo.scheduler.deleteRecurringDialogTitle": "Delete Recurring Item",
+    "kendo.scheduler.deleteSeries": "Delete the series",
+    "kendo.scheduler.deleteTitle": "Delete",
+    "kendo.scheduler.destroy": "Delete",
+    "kendo.scheduler.editOccurrence": "Edit current occurrence",
+    "kendo.scheduler.editorEventAllDay": "All Day Event",
+    "kendo.scheduler.editorEventDescription": "Description",
+    "kendo.scheduler.editorEventSeparateTimeZones": "End in different Time Zone",
+    "kendo.scheduler.editorEventTimeZone": "Specify Time Zone",
+    "kendo.scheduler.editorTitle": "Event",
+    "kendo.scheduler.editRecurringConfirmation":
+        "Do you want to edit only this event occurrence or the whole series?",
+    "kendo.scheduler.editRecurringDialogTitle": "Edit Recurring Item",
+    "kendo.scheduler.editSeries": "Edit the series",
+    "kendo.scheduler.eventHeader": "Event",
+    "kendo.scheduler.monthViewTitle": "Month",
+    "kendo.scheduler.multiDayViewTitle": "Multi-Day",
+    "kendo.scheduler.nextTitle": "Next",
+    "kendo.scheduler.previousTitle": "Previous",
+    "kendo.scheduler.recurrenceEditorDailyInterval": "day(s)",
+    "kendo.scheduler.recurrenceEditorDailyRepeatEvery": "Repeat every",
+    "kendo.scheduler.recurrenceEditorEndAfter": "After",
+    "kendo.scheduler.recurrenceEditorEndLabel": "End",
+    "kendo.scheduler.recurrenceEditorEndNever": "Never",
+    "kendo.scheduler.recurrenceEditorEndOccurrence": "occurrence(s)",
+    "kendo.scheduler.recurrenceEditorEndOn": "On",
+    "kendo.scheduler.recurrenceEditorFrequenciesDaily": "Daily",
+    "kendo.scheduler.recurrenceEditorFrequenciesMonthly": "Monthly",
+    "kendo.scheduler.recurrenceEditorFrequenciesNever": "Never",
+    "kendo.scheduler.recurrenceEditorFrequenciesWeekly": "Weekly",
+    "kendo.scheduler.recurrenceEditorFrequenciesYearly": "Yearly",
+    "kendo.scheduler.recurrenceEditorMonthlyDay": "Day",
+    "kendo.scheduler.recurrenceEditorMonthlyInterval": "month(s)",
+    "kendo.scheduler.recurrenceEditorMonthlyRepeatEvery": "Repeat every",
+    "kendo.scheduler.recurrenceEditorMonthlyRepeatOn": "Repeat on",
+    "kendo.scheduler.recurrenceEditorOffsetPositionsFirst": "First",
+    "kendo.scheduler.recurrenceEditorOffsetPositionsFourth": "Fourth",
+    "kendo.scheduler.recurrenceEditorOffsetPositionsLast": "Last",
+    "kendo.scheduler.recurrenceEditorOffsetPositionsSecond": "Second",
+    "kendo.scheduler.recurrenceEditorOffsetPositionsThird": "Third",
+    "kendo.scheduler.recurrenceEditorRepeat": "Repeat",
+    "kendo.scheduler.recurrenceEditorWeekdaysDay": "Day",
+    "kendo.scheduler.recurrenceEditorWeekdaysWeekday": "Weekday",
+    "kendo.scheduler.recurrenceEditorWeekdaysWeekendday": "Weekend Day",
+    "kendo.scheduler.recurrenceEditorWeeklyInterval": "week(s)",
+    "kendo.scheduler.recurrenceEditorWeeklyRepeatEvery": "Repeat every",
+    "kendo.scheduler.recurrenceEditorWeeklyRepeatOn": "Repeat on",
+    "kendo.scheduler.recurrenceEditorYearlyInterval": "year(s)",
+    "kendo.scheduler.recurrenceEditorYearlyOf": "of",
+    "kendo.scheduler.recurrenceEditorYearlyRepeatEvery": "Repeat every",
+    "kendo.scheduler.recurrenceEditorYearlyRepeatOn": "Repeat on",
+    "kendo.scheduler.showFullDay": "Show full day",
+    "kendo.scheduler.showWorkDay": "Show business hours",
+    "kendo.scheduler.timeHeader": "Time",
+    "kendo.scheduler.timelineMonthViewTitle": "Timeline Month",
+    "kendo.scheduler.timelineViewTitle": "Timeline",
+    "kendo.scheduler.timelineWeekViewTitle": "Timeline Week",
+    "kendo.scheduler.today": "Today",
+    "kendo.scheduler.weekViewTitle": "Week",
+    "kendo.scheduler.workWeekViewTitle": "Work Week",
+
+    // RecurrenceEditor
+    "kendo.recurrenceeditor.dailyInterval": "day(s)",
+    "kendo.recurrenceeditor.dailyRepeatEvery": "Repeat every",
+    "kendo.recurrenceeditor.endAfter": "After",
+    "kendo.recurrenceeditor.endLabel": "End",
+    "kendo.recurrenceeditor.endNever": "Never",
+    "kendo.recurrenceeditor.endOccurrence": "occurrence(s)",
+    "kendo.recurrenceeditor.endOn": "On",
+    "kendo.recurrenceeditor.frequenciesDaily": "Daily",
+    "kendo.recurrenceeditor.frequenciesMonthly": "Monthly",
+    "kendo.recurrenceeditor.frequenciesNever": "Never",
+    "kendo.recurrenceeditor.frequenciesWeekly": "Weekly",
+    "kendo.recurrenceeditor.frequenciesYearly": "Yearly",
+    "kendo.recurrenceeditor.monthlyDay": "Day",
+    "kendo.recurrenceeditor.monthlyInterval": "month(s)",
+    "kendo.recurrenceeditor.monthlyRepeatEvery": "Repeat every",
+    "kendo.recurrenceeditor.monthlyRepeatOn": "Repeat on",
+    "kendo.recurrenceeditor.offsetPositionsFourth": "Fourth",
+    "kendo.recurrenceeditor.offsetPositionsLast": "Last",
+    "kendo.recurrenceeditor.offsetPositionsSecond": "Second",
+    "kendo.recurrenceeditor.offsetPositionsThird": "Third",
+    "kendo.recurrenceeditor.repeat": "Repeat",
+    "kendo.recurrenceeditor.weekdaysDay": "Day",
+    "kendo.recurrenceeditor.weekdaysWeekday": "Weekday",
+    "kendo.recurrenceeditor.weekdaysWeekendday": "Weekend Day",
+    "kendo.recurrenceeditor.weeklyInterval": "week(s)",
+    "kendo.recurrenceeditor.weeklyRepeatEvery": "Repeat every",
+    "kendo.recurrenceeditor.weeklyRepeatOn": "Repeat on",
+    "kendo.recurrenceeditor.yearlyInterval": "year(s)",
+    "kendo.recurrenceeditor.yearlyOf": "of",
+    "kendo.recurrenceeditor.yearlyRepeatEvery": "Repeat every",
+    "kendo.recurrenceeditor.yearlyRepeatOn": "Repeat on"
+};
diff --git a/vue-options-api-demos/grid/basic/es.js b/vue-options-api-demos/grid/basic/es.js
new file mode 100644
index 00000000..ce6e3fab
--- /dev/null
+++ b/vue-options-api-demos/grid/basic/es.js
@@ -0,0 +1,122 @@
+// Custom Messages
+export const esCustomMessages = {
+    teamEfficiency: "Eficiencia del equipo",
+    teamMembers: "Miembros del equipo",
+    dashboard: "Tablero",
+    planning: "Planificación",
+    info: "Informacion",
+    profile: "Perfil",
+    language: "Idioma",
+    trend: "Tendencia",
+    volume: "Volumen",
+    myTeam: "Mi equipo",
+    allTeams: "Todos los equipos",
+    teamCalendar: "Calendario del equipo",
+    saveChanges: "Guardar cambios",
+    cancel: "Cancelar",
+    warehouse: "Almacén De Café",
+    startFreeTrial: "Iniciar prueba gratuita",
+    buyNow: "Comprar ahora",
+    getSource: "Obtenga el código fuente en GitHub",
+    demoInfo:
+        "Esta aplicación de demostración está construida utilizando los siguientes componentes de Kendo UI for Vue.",
+    firstName: "Primer nombre",
+    middleName: "Segundo nombre",
+    lastName: "Apellido",
+    email: "Dirección de correo electrónico",
+    phoneNumber: "Número de teléfono",
+    country: "País",
+    biography: "Biografía corta",
+    public: "Incluir en directorio público",
+    team: "Equipo",
+    employee: "Empleado",
+    contactName: "Nombre de contacto",
+    jobTitle: "Título del trabajo",
+    status: "Estado",
+    performance: "Rendimiento",
+    rating: "Clasificación",
+    engagement: "Compromiso",
+    budget: "Presupuesto",
+    contacts: "Contactos",
+    address: "Dirección",
+    phone: "Teléfono",
+    gridSearch: "Buscar en todas las columnas ...",
+    exportExcel: "Exportar a Excel",
+    exportPdf: "Exportar a PDF"
+};
+
+// Kendo Vue Component Messages
+export const esComponentMessages = {
+    datepicker: {
+        toggleCalendar: "Alternar calendario"
+    },
+    calendar: {
+        today: "Hoy"
+    },
+    dateinput: {
+        increment: "Incrementar valor",
+        decrement: "Disminuir valor"
+    },
+    datetimepicker: {
+        date: "Fecha",
+        time: "Hora",
+        cancel: "Cancelar",
+        set: "Establecer"
+    },
+    numerictextbox: {
+        increment: "Incrementar valor",
+        decrement: "Disminuir valor"
+    },
+    timepicker: {
+        now: "AHORA",
+        set: "Establecer",
+        cancel: "Cancelar"
+    },
+    grid: {
+        groupPanelEmpty:
+            "Arrastre el título de una columna y suéltelo aquí para agrupar por ese criterio",
+        noRecords: "No hay datos disponibles.",
+        pagerFirstPage: "Ir a la primera página",
+        pagerPreviousPage: "Ir a la página anterior",
+        pagerNextPage: "Ir a la página siguiente",
+        pagerLastPage: "Ir a la última página",
+        pagerPage: "Página",
+        pagerOf: "de",
+        pagerItems: "ítems",
+        pagerInfo: "{0} - {1} de {2} ítems",
+        pagerItemsPerPage: "ítems por página",
+        filterEqOperator: "Es igual a",
+        filterNotEqOperator: "No es igual a",
+        filterIsNullOperator: "Es nulo",
+        filterIsNotNullOperator: "No es nulo",
+        filterIsEmptyOperator: "Está vacío",
+        filterIsNotEmptyOperator: "No está vacío",
+        filterStartsWithOperator: "Comienza con",
+        filterContainsOperator: "Contiene",
+        filterNotContainsOperator: "No contiene",
+        filterEndsWithOperator: "Termina en",
+        filterGteOperator: "Es mayor o igual que",
+        filterGtOperator: "Es mayor que",
+        filterLteOperator: "Es menor o igual que",
+        filterLtOperator: "Es menor o igual que",
+        filterIsTrue: "Sí",
+        filterIsFalse: "No",
+        filterBooleanAll: "(Todas)",
+        filterAfterOrEqualOperator: "Es posterior o igual a",
+        filterAfterOperator: "Es posterior",
+        filterBeforeOperator: "Es anterior",
+        filterBeforeOrEqualOperator: "Es anterior o igual a",
+        filterSubmitButton: "Filtrar",
+        filterClearButton: "Limpiar",
+        filterAndLogic: "Y",
+        filterOrLogic: "O",
+        filterTitle: "Filtros",
+        sortAscending: "Orden ascendente",
+        sortDescending: "Orden descendente"
+    },
+    upload: {
+        cancel: "Cancelar",
+        dropFilesHere: "Arrastre los archivos aquí para subirlos",
+        select: "Seleccione..."
+    }
+};
diff --git a/vue-options-api-demos/grid/basic/fr.js b/vue-options-api-demos/grid/basic/fr.js
new file mode 100644
index 00000000..83cdcbf5
--- /dev/null
+++ b/vue-options-api-demos/grid/basic/fr.js
@@ -0,0 +1,123 @@
+// Custom Messages
+export const frCustomMessages = {
+    teamEfficiency: "Efficacité de l'équipe",
+    teamMembers: "Membres de l'équipe",
+    dashboard: "Tableau de bord",
+    planning: "Planification",
+    info: "Info",
+    profile: "Profil",
+    language: "Langue",
+    trend: "Tendance",
+    volume: "Le volume",
+    myTeam: "Mon équipe",
+    allTeams: "Toutes les équipes",
+    teamCalendar: "Calendrier d'équipe",
+    saveChanges: "Sauvegarder les modifications",
+    cancel: "Annuler",
+    warehouse: "Entrepôt De Café",
+    startFreeTrial: "Démarrer l'essai gratuit",
+    buyNow: "Acheter maintenant",
+    getSource: "Récupérer le code source sur GitHub",
+    demoInfo:
+        "Cette application de démonstration est construite à l'aide des composants Kendo UI for Vue.",
+    firstName: "Prénom",
+    middleName: "Deuxième nom",
+    lastName: "Nom de famille",
+    email: "Adresse e-mail",
+    phoneNumber: "Numéro de téléphone",
+    country: "Pays",
+    biography: "Biographie courte",
+    public: "Inclure dans le répertoire public",
+    team: "Équipe",
+    employee: "Employé",
+    contactName: "Nom du contact",
+    jobTitle: "Titre du poste",
+    status: "Statut",
+    performance: "Performance",
+    rating: "Évaluation",
+    engagement: "Engagement",
+    budget: "Budget",
+    contacts: "Contacts",
+    address: "Adresse",
+    phone: "Téléphone",
+    gridSearch: "Rechercher dans toutes les colonnes ...",
+    exportExcel: "Exporter vers Excel",
+    exportPdf: "Exporter au format PDF"
+};
+
+export const frComponentMessages = {
+    grid: {
+        groupPanelEmpty:
+            "Faites glisser un en-tête de colonne et déposez-le ici pour grouper par cette colonne",
+        pagerItemsPerPage: "éléments par page",
+        pagerInfo: "{0} - {1} sur {2} éléments",
+        pagerFirstPage: "Aller à la première page",
+        pagerPreviousPage: "Aller à la page précédente",
+        pagerNextPage: "Aller à la page suivante",
+        pagerLastPage: "Aller à la dernière page",
+        pagerPage: "Page",
+        pagerOf: "de",
+        filterClearButton: "Effacer",
+        filterEqOperator: "Est égal à",
+        filterNotEqOperator: "N'est pas égal à",
+        filterIsNullOperator: "Est nulle",
+        filterIsNotNullOperator: "Est non nulle",
+        filterIsEmptyOperator: "Est vide",
+        filterIsNotEmptyOperator: "N'est pas vide",
+        filterStartsWithOperator: "Commence par",
+        filterContainsOperator: "Contient",
+        filterNotContainsOperator: "Ne contient pas",
+        filterEndsWithOperator: "Se termine par",
+        filterGteOperator: "Est supérieur ou égal à",
+        filterGtOperator: "Est supérieur à",
+        filterLteOperator: "Est inférieur ou égal à",
+        filterLtOperator: "Est inférieur à",
+        filterIsTrue: "Est vrai",
+        filterIsFalse: "Est faux",
+        filterBooleanAll: "(Tous)",
+        filterAfterOrEqualOperator: "Est postérieur ou égal à",
+        filterAfterOperator: "Est postérieur",
+        filterBeforeOperator: "Est antérieur",
+        filterBeforeOrEqualOperator: "Est antérieur ou égal à",
+        noRecords: "Aucun enregistrement disponible."
+    },
+    dateinput: {
+        increment: "Augmenter la valeur",
+        decrement: "Diminuer la valeur"
+    },
+    calendar: {
+        today: "AUJOURD'HUI"
+    },
+    datepicker: {
+        toggleCalendar: "Basculer le calendrier"
+    },
+    dropdowns: {
+        nodata: "AUCUNE DONNÉE DISPONIBLE.",
+        clear: "Effacer"
+    },
+    numerictextbox: {
+        increment: "Augmenter la valeur",
+        decrement: "Diminuer la valeur"
+    },
+    upload: {
+        cancel: "Cancel",
+        clearSelectedFiles: "Effacer",
+        dropFilesHere: "Déposer des fichiers ici pour télécharger",
+        headerStatusUploaded: "Terminé",
+        headerStatusUploading: "Téléchargement...",
+        invalidFileExtension: "Type de fichier non autorisé.",
+        invalidFiles:
+            "Fichier(s) invalide(s). Veuillez vérifier les exigences de téléchargement de fichier.",
+        invalidMaxFileSize: "La taille du fichier est trop grande.",
+        invalidMinFileSize: "La taille du fichier est trop petite.",
+        remove: "Retirer",
+        retry: "Réessayez",
+        select: "Sélectionnez les fichiers...",
+        uploadSelectedFiles: "Télécharger",
+        total: "Total",
+        files: "fichiers"
+    },
+    sortable: {
+        noData: "Aucune donnée"
+    }
+};
diff --git a/vue-options-api-demos/grid/basic/images.js b/vue-options-api-demos/grid/basic/images.js
new file mode 100644
index 00000000..5b2915f9
--- /dev/null
+++ b/vue-options-api-demos/grid/basic/images.js
@@ -0,0 +1,79 @@
+export const images = {
+    "10F":
+        "url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEA8ADwAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsugAoAOlAHP6v4ht9J+RsyTEcRpy31P90e5rCdWNPTr2NoU3PyXc831PxrqjgvAsdvEv8AESCMe7N8v5HrXA8RN/DodioxW+pkRfEu62+SzLKwOd8e3p6cH9QKft5paj9jBvQ29H+KAeYQ3sZVM48xQRjt8wPH8vXpVxxD2mtO6IlQX2Xr2Z69b3EdygliIZGGQRXoJpq62OBpxdnuTVQgoAKACgAoAKACgDlvEmsNYILe3IE8oJ3HpGg+9If5KO7enJHJWqci5Y6N/gv62OmlDm957Lp3f9bnmEk8Vr80mZZJeVQnLP8A9NJjx8vovT27V5LfV/16no26L+vJHI6taTas++dz5SHp0UeyqOM9MdT09QKhSa2L5UjnLu0ltseUoiiHqMscdyeQvp0c+r0+bvuNLsixav5aHdgh+OPXt2FVcpo9I8A+JHs2FtKT5ROAD2+nuP5V00anI7dGclWnzK63R7wrBhkdDXsHlbC0AFABQAUAFACMQoJPAHNLYPI8V1nUfNMt3LyJGyqnui5EKfQgGR/qfUV4FWfM2+7/AOG/zPahDlSS6L/hzhIZpLmVmJJdycsenH3jj+6g+VQO/wCBrkb6HRaxM92ckRgtsIVF/vOc5Y+45B9PmP8AEKd7DUeZ2NG18KvfETXhJJHCjgD2FUk/Q6LRjsW9S8MxW9uSi/d549qbvHVCspaHORSLFGt1GNpWTa49GHOf+BLn3OeapPqjncbaM+hPDOoC+tF/vJ8p+nY17dCfNG3Y8atHkl6nR11HMFABQAUAFAGRrc/kWrAcF/kH/AuP61zVpcsGu+hvSV5X7anh+vOZZfKTpEMn03Hp+gUfnXz83ZvyPagtkYojFpCWx8zfu1HsAC/1LMVT65rmTv8A10N2rfL82bfhnSGmfznHyJ092P3m/E8D/ZArohHmd+hb9xW6s9EWLbwK6bWMriyQb1KnpTa6AnY8zv8ATxamW2HAl+dfZwMj8MKV+rYrmXutxKmr2kjtfh7eFokDH7w2n6qSufxK/rXo4eVpW7nl146eh6wK9g8sKACgAoAKAOX12UFlQ9EBc/h0/WvNxErO3ZNndRjpfu7HkiJ9oZpCM7yx+oHT8wfzBrwJarzPZSszk/F+pw6EsZm3kcRqE++Xb5mI4POTuBwcFR6VpTg5y5Y9EDkormk7K/8AWhN4R8cJeOsVtJJ5OQpWdAecZwsqADdgEhWGTg+hx2uEqe6sgUo1L8ru18meyCcFfM/hxnNMjY841X4hpp12bVpLeNAdozvkf6lV2qPpuzTXM/hWnoN8q+JpPzdhup3630UV/BLFcRmRVygK43EY/iYEBsZ5BHTntyzVnfr2tY2SfLa2m6ad0dT4UjNrLsHBWRsD9f51vRfvL1OCqtPkeyKcjivoTw9haACgAoADxQB514hudiTzdziNR9f84NfP4iduaXdpI9qhH4Y9lc5e0tThd3f+QyWP/AjmvO8zu22OR1vQ49cvYkkGRGS+QSCrZ6gj0yRVUpOL93qbcicbyW2xt2Xge2syPKBVQ4kK54LgYBwABwOntkdCa9J3ktWcqah8K1O2urbFqIB6YpNWSsJbs87/AOFdwXFyl05IeFi0ZIVtuSWP3hz8xJ+bODVxk4qyCajLVrUk1bw7Bo1hIlvnAJlYnqW6luwHI6AAVx1ddTqpaK2ysdLok4eaOYHiTY34uAG/XNVSfvJ+aOCqvda9T2CE/IPoK+jjsjwnuyWqEFABQBHKdqk+1TLRMpbpHnGsxmZliHQMWP1PT+n4Zr5uvrJR6LU92jom++hTl/0eEsMAkYTPoB1/H+uelYNdO/5HbCN5KPTrY5zwztuMzuQ0uSH9AykhgPbOcUqUeVnbWiorljsdiJsNjoo5J9K7b/cec49ty7OwdVKkY4wT7/41pLbQzirXuJC4PHTFQmU0cT8R7k2Wg3kyfe8oqv1chB/6FRZNpPa42+WLtvYoeEJT9htC/wB75fyHP9a5qb10/m/UzqK3/gP6HvducopHoK+njsj556Nk9USFABQBXujtQ1lN2izSC1OIlTzHJ9Tj/H9P514EtW33f/D/ANeZ7cNFbt/SM6VBcmZ2O2O3UhfTO3JP0AI/WiEebmk+h2J+zUV1lq/S5414G1lbpSVb7/zfieT+tYNOErM72+eKaPQbnxZYaawgu96tJwP3bbWzx984Tqf71dMX5HOqUpe+mkl1d9PuTHya/Dax+dIkiW64IZkwoGMg56YI6YJp6rSzsV7OL2qQv5S/Tc3NK1e21dPNtWLL0ztYDj0JAB/AmkYTpypO0rfI8z+MWqollbaOh/fX9zFlR1EUbq7sfQZCr75PpVx0vL+VP77aHLN7R7tfcnqbemsLZII0GFQcD6Kp/rXmQlaz8zaavc7GDxHPYOHT95AfvL/d9x6D1r2YVnHbbqjyZ009Ho+jO/sdXhvUDqcZ7Zr1IzUtjz5R5TTDg9K1IH5oAztRfamPWuWs7ROiktTlXYIpbpgH9eT/ADrxmerHexVtyEds/cc9O2eh/StIe76HU9Urbo8D8T+C77wjezaxpS+bpsrmR4Ywd9vkAuwUfei3bjhRlB/DtBIucFNdmtn3Lp1OT0e67enkdZpdyniG0Q4DY5VhgkfgeCD0INcauvde6PQjP2T547PddCePwgsjjzNgTOcBAP0zitLM2eLitYw176fna5u6zr1h4MsPMkwu0YjjGN7t1wB7nknoOpq7dEeTObk3OR8xQaldeKdZOqXhy5YLGo+7GgJ2Ivtkkk9yGJoqvkhyr5nNBc0uZ/LyPop0Mctuo4Gxj+iCvKWlv66HU+pg2WpPECTyI5HjYewOR+akYrZScWmjGUU1qb1petZTrLGf3TgY54weufp29MjPHT1KMre8vmjy6sfs/cz0OC/kABDHHtXtJHkczRrJqjqMEZq7Bzl/VXwMegzXn130PSorqc27B4sHucH8QP8AGvLeqPQWjKMEyx/I3UcEe47/AI+opRlbQ691oX0m3jBHFdaaehi1bYpS6PbsTJEohkbksgC5PqQOG+p596mVNPVaMuFZx917djhtf1LUvD43sgniY4V04wT0DjqpPbqPfNYWcdGdLcWrrQ8J8Qwav4mmkvTFLMkakkqpKRoOSB6Ack/ma1jF72OSc4p2uvvF8BWomkDY6Mcfgdo/MsT9a5K/YdN2PoK4iCXSn+5CP1Lf4Vx2s16G19H6nnyZR53H3QVc/wC8DsP/AI6wz64BpatWW61E9H5PQ348vavt5EY3j8izD6MoP4n2rtpy0Ul8zhnGzcX8vI63w5eC5tlOc7cr7/Kcc+9e/QfNBeWn3Hh11yzfnZ/edOrjFdhxm1qs+Jtn049sV4teXv8AL/Wx9BSj7tzmppTCWPLRtzx1B/8A1dfwrzW7XXQ7Utn1OYu3+15EE21k5xtIcf7vT+YH4Vzv1/zN0+XoaOgXc+oO9u2FeMDBYgFh0JIGQDnqB613UFKponsYVaipK8l9x1i6fL/y1fHsg/qf8K9aNB/af3HlzxS+xH7yxJpttcJ5c6eYndWyQSD3Ax7GtlRgtbHM8VUacbpJ+QDTLaCCSC3jjhWRXU7EAzuU9cDnqetauKS0RzqTur9z5S8DRm3vXtiPmikcHt0cY/Pr+NfPV1Zn0VN6HtV3KPtUuP8AlnHGD+KMQPzYfnXny0k/Jf5nXH4V6nB3CPYxXM7ghJ5NgyORtb5mGf4Sqpj1Ymrjpr1t/wAH/gES10NLTJgmnTSHqkZXH6A/TBz9DWtPSTS23RjU1Svvsx3h27NpKEU5SQjI9G9fxHB/Cvbpfu7W2e/r3+Z4lX3733W3p2+R6lGg2jOa9NI81mxqmyWTeDgjjIPpXgYlLm54vyPo8O3blaOZud4JSJgGI4HQ/iCRke45A7V5jutvuO9W6nnfiGeaBGRZFeQKxPlkdQD3AJ4+uc1i7qSWm+pqrNM4CPxPc6IsF95jGTcNuTndnjbk9R1z+HqM+hRvGd49N/Q46qTjZ9dj6t0PUotcsYr6PpKgYj0OPmH4c19HF3R87JW0NErg/T/9R/xrQyIvY/5PINIaPma9ih8M+IpvN63Eg2j1DYOcdgOQScAAHGTwPBxCd2ux9BRd4o6S5uS9w+0/NcPGf+AJGCT/AN9BR+OK8aTv9y/M9KKsrdrnLa/rv2eL7MAJI5NzyKMD5Qw5GcY5GST7dFINbQi5aJ2tt6mcmoa2v/kS6LeQvbSJbsx3QlVVtpyQOMMpKk4AHPPFUnyTTl3JlHmg1HsL4Scz3xibKrF+8O7jAXOePQH9MCvdp++1FbJ3/wCAeFV/dpye9rf8E9sglMiBumfpXrHkl/V7XzsvC6r6A8YP14PP1+mK8uphoz1joz1qeJcNHqjznUdSvrJRDJCJATj75PqeCQTg446/WvHqUXT0f3PoerTqqeqXzR5reassE2JYzCpJDbRn5Txzk59yQen8NcnLzX5Xqdt7JXKF54U+12qqkkbxRj92c7TjOR1AwQfQkEd+K1jW5HfZ9TOVO6t06HtnwfWWzsXsZGVljclQCDgHr0JOPrj0FfQYeoqkbo8KvDklY9Zddp/z9P5EflXeec9CH/P9D+uKAR4Z8X9AaVI9StULTg+X8oyTv47c5A6emSa8zER05j1cPL7JzGmWjWVub3WpQhKAeWpy+0D7uQeCx5O32GRivnbXdoHu3stTjGnXXWTUFVYljmeOOIfwx7CVDeu/q3bkiuvk9n7nez+dzHm5lzdr/cXdLs1jfMHCtllH931XPohyAf7uCetZSu5cu729ew1pHm2W/p3Ox8P6ZvuZL6NtoBKn0cOSCPwHOeemK+jpU2mpdIqz83Y+arVE4yj3ldeSueqwzKiAdK7zz9juZo1x0xWUtE32OpLVJaHN6jaLtOABjnpzXDUoqpHV69Oy+R1wrezdktOvd/M8S8UeGm1mb7PC6wykZ3EHafxHIP4H6142kJXttv8A8A9mL5o26Pb59zNj0TUvDdruup0ZEBB8rduPpncFX6nbn61ElGT0VjRNxVjrPhPe+deSb9wkIORwVK5wCW4OeOm3HvXqYSyul0POxN9Gz3+QYP8An6f1/SvXR47K+D/n34/mAaZOxmaxaLfWskT91JHJGCB69R+FY1IqUWn2OinJxkmj5W1q981p4VA/dkwrkcbmB3N1JweBnlsZJycV844cjt89D6KMuZX+R5nYahcwq9mCFLy7gRnA7Y7HGOK62lpUXRHOm9aZ9A+GdH+zWQaRg7Fcnju3zdT25AxXVhqKb9u93dJdv+CediqzX7haJbvubllJ9mt5WUdHX9TivWWh47ZtW0h8sE8k81Qj/9k=')",
+
+    "10M":
+        "url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEASABIAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsbGKAFxQAUAHSgBrssYLOQqjkknAH1JoApQ6naXDbIZ4nYdlkUn8gaV0BPJdwwDdJIiDplmAGfxNPYCZXDAMCCDyCPSgBfpQBIBigBaACgBDQAygBcUAKFxQBja/rtr4btGvbxsIvAA5Z2PRVHqfyABJ4FS2oq7A+YPF/xJufEQNs6CCzzkRqSGf03tkEjPoFH865ZSctNkXY83dkRjvzAMDbtLtn0PyE8foO5qB2LC6xfWmInllMIOEZ2JxnuAen4dsckYpiPVPDvjTULNUhkm8yAFT95S+0H5lAb5uR0Bx+VWpOOnQlrse4eE9dh1nzTb8RrtOwknYxLAqM8gEANjoM+9dCaexJ2wqxhQAUAIaAGCgCQcUAFAHx/8RvFE2v6lIASLS0do4UzgfKcPIe2XI4PUJtAwc1wzlzO3RFpdTzAqLvfKFxsGeDjp9R/9f3oQyTSriOM+ZNvYZ7EgAD+uPXP9ah+RaR6ZbSWlxD5UzLJFIm+NlGGAH3kP94rw3BHf6k22BoxL7w5bYEtpMHXOT1LA+4wv67SPfrRewctzr/CGpS+HrpZYW3QsFWRWyBzxnPYgHvwe/QY0jLlfkZyVj6jt51mjWRCCrqGBHcEZH6V2kFgGgAoAKAIxQBJQAyQEqQOCQcflQB8A3ZYboycuHbP13YyfxrzbGiNKHTWlg2ou1M8tjO4+3+cUpS5UdFOHMzufC3guFkP2lAQ3QHk4/kP89a43Ub0R6UaSjudRd+A41jC2g2bTlcdj/gaalJA4R7WM/TPh7NEzNM21TjHqf8ADH/6q153YzVKKehn6tpNx4flWWIb7eRgki9cZ7/Qnn2PrmnGXQxqU7LmR7H8NruWWykt5WLLbyER56hGLfKP9lSCB+PbgelTeh5j3aPR84rYRIDQAUARigCSgDz/AOIHi2TwvbRpbJ5txdMyr/sIq5eTHG4rxtGQM8npg8tar7JK277nZQo+2bu7RW9t9dj4ggdoL8wXByrfNE+CFdR8wIz65OR1B9etc8XzK6+fkKpT9lLk+59z162XzUiRRhPlx79+n61yVHfRHoUafKuZne6VqVqMRrPEZAQCm5dw9u3NYKLOy62O9guQiZPBPfjH6/0zWtrGbjd6Dmucjgj8/wD9dDBROQ8SurWrnIBUZ+mOf8+tQtGvUUo+615HeeAVB0iGXYEaTcxI/j+Y4b8uPwr3ofCj557s7StBCg4oAfQBHQA8GgDxT4soZZIAgbdHbzuCpwRloxx7kDAx2zXnYlXcfK/6HsYJ25vl+p88X/h+2uJvIkYySRxgFlOMN1OO5xnGe55xXDGThex0zpxqvU6bTJH03YLkGWGMbFcDnsAj/wC0V+62Pm5HDY3K99Vv2KS5bRe3R/o/07kl9rml3Mn2ZrCSKTBfeqIrbVySwUEOQMEnjoM1tFStzK1l5kTdOL5He72dv6f4HovhPWLNx5SPvAHAJz27Z6fSlfuXZr4XodRqeqQW0YKlQxBwp4GaegaxuecXl3q+tZ0+O0UG5DRxSK4xuI4LD+EDqzHsDSUE5JRfXYxnUajK6to7M+i9F00aPYwWKnP2eJIyfUqoDN/wI5P417SVlY8I1KYBQAZIoAKAON1z4ieHfDT+TqV/bwyg4MQbzJB/vRxB3X6sooFsfPPxO+NGi6hNBb6ErX86kq0x3RwBH/gAdQ7sDg5wijkZYn5earBTV3pY6qNZ0naKvfpscHaTnd5n8R/rXkNaWPYT15j2LRUhmhCv04Jx1yMEH6g8j6Vnaxva50p0SO4XIMRBB5YbWGRg4yM8jIIGM9K1V0rJkPR6rY46w0CRNVaSIpbxxfLG0aDL8EfOr5BA9gPY81d0tLC5ZNtvRdO5zt54fvtQdbm5dsGVxIpzgorlQI9pzHlRnJBIb0XAqlJR1tdGUoykrKXK0zu/B2m32iRx3yO96/2kxRWzbdzRkYkKu2AGRWJG7C5XllXIrooRX8TrdpL5bnFiaj0pXukrt9T6Fr0jzQoAKAEoA+P/AIn/AB1/tGNtL8MO8cTZE15gozr/AHIM4dAf4pCFfsoA+YohvsfKMpLsXPUnr698/rQBDbyCCZJD/AwP5c1nNXTSNIaSTPbtJnEuFPQ4xXjtWPdTPStG1JrVtjZ2jkdelTY647ndS6/crbtJCCVQfdHLEd8L7DnHU+lNXRr7t/1K3hHW7TV5JWWX95ExDKwKMP8AgJAOD1zimlbcUmvs+htrdwYdd33Sc55Hrn1qfIXJfU7/AMF2xFkLhwMyMxjOMERkjp/vsC3uNvtXq0ItQTfy9D57ENe0fL8/U7Kuo5AoAKACgD8oMUjMpMOMfX+dAFBzsO70INJroXF8rTPQfD2pFNqk8xkL+HY/iP615lSPKz16M+ZLyPoDQXjv07KcKu7HTGTXHezPRtpZCI+q6bPIo23UOeMAh15PysOeMYwyg5GcgY52VmtNGL2b3jquydmv8/60Mxhbm7+1NaTLOeGKA4I68kbDj/eWm9FbQFTktbNeqt+I7xDqn2TT5dSYmLCbVXoWJ4RT0P3iAe+M+lKMeaSijKpUcKbe3+Z47pPxF8Q6SVNpqF0gQYVDKzxgDsI5C0eB2G3A7V7O2iPm7vc9o8K/tHXtqVh1+BbuPODPBiOUD1Mf+rc+w8r6mmFz6e8MeMtJ8Xw+fpNwk2B88f3ZY8/342ww9M4Kn+FjTKOo6UDCgD8n8Ht1pGZVUhh8vTp78evvTApTpgGkM0bSdoo0uY+i4jkHvzj6kgE8c9zXLON7p+qPRi4wjGcN9pLXfWz7a+R694I8WLBMI5T8kmFyex9/rXnyhynp06iej2PoAW9vdqJlYqxA+Ze+B7dfxqUdu2xDcpFZxNPLISkSliWOFAUZye3HXoaH2RnJ2Tb2PlDxh4tm8TTlAfLtEYmNBxkjPzt7nJ+gPrmvTpUlTV/tf1ofO1qzquy0itl+pxtvJ1HpXSchaBoEaOm6pc6TOtzZyvBNGcq8bFGB9mUg/wCNAbH2Z8HPi3deLrhtF1YIbmOHfFOo2tLs27xIudvmYbeCgUEK2VzyWUn0Poigo/KEdaRmVNg3F1OA3b+R9qAIpVyOKBlFWeH5Tkorb8dumD+PT/Oahrr8jWL6dE7mxBE5UvCSFJBGOo9uPT9etczsnZnbFNLTY7nSPGmqaHC0hk3xpwA4zk9gORWPIm7I6vaypxu3cg1fxzqmv2jR3DCKJiAyx5G7POGJ/hwOR34zxweiFKMXff1OWpVlODu7LTRef/AOCcV1nmkMWUb0oAv9KQgNAHqvwTmePxhp/l/xPMpHqptZQ35Dn6imCP0QoND8mbOTfGM9aDMdjaSPxH9aQDSvFAEBj3dOCM4/z6HvSZa0N3Qbs2UjW7xiRXUN1A2HtuJ4x2wTkcc8VzTjzap+S8zrpzcPda0td67FbVDLIqqymJd7fK3HfJb6c47+xNOCUXa9/T8hzblG9rWel/zKe0RghTkcZPOCQDzj2zgHAOOtbpddvLscsn9lff3/AKuQPVGZAnLZpgXQaQhRQGxr+GtYk0HU7bUoc77SdJgB/EFYZX6OuVI7gkUwP1OByM+tBofkfp7fIKCC84547c0CG+9IABKYYcEHI/Dml5DWmqNqK3P2dTbSus5OZThcfxDry2CCPTHPBrCz5m7Ll6L7jqXK0oybv1e/f5mFdSXBkWCdvM2fdPHCjjaPQd8evOM81pFJO6Vu5NR2SV7rp6CngYrQ5ivKcCmMij4oAtDpSERSy4OwfifSmBNYXLWs6XC4zE6uM9CUYMAfbI5/KgD9O/CPjPT/ABjp6ajZSLtJ2SKcqY5VVS6ENg8bgQccqQaCz8trFtqCgk1CaQhh+U49s/4/4/nQAUAaVveoksQVTHkBGMeAWPHzHIIJ69RXM1KF2nfrZ7LyR6KUJKF420tdaO/dlfU4fJvZATuwFwcAHnnnHH6D6VdKfPHmtY5qsFSlyp+ZUNbGBVfk/SmAiUAWM7RmkBQX5uT0Pb/GqFsW0XPyjj1/+tSA6DTvEF9pEZgs5pIYyxYqjYBYgAn6kAD8KAP/2Q==')",
+
+    "1F":
+        "url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEAYABgAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsugANAHwF8VLi4s9anS4AFzK7tjrhWOV68dCMcYA55FefvJp7J6+rPXVowi47tafLQ4CxgWXJOT/ec9/YZ7fqepNN6foVFX/VnQ2nhu61ZxDZoVQ9Wx1/z7/hXNKoob6vsdsaDltou7Ohm+Gd5pq+YkZfjv1/CsvbrZpo0+r2+Fps5HUPD13EpMqkAdjyB+mK3hUi9mYyoyjujlBCyNsCj2IOD+GP6V1Lujiato0fTPwA0pUvmuwCGWJ0YsMHJOePfBGemMdOauL96xzVVaJ9dV0nCFABQAUAFABQB+dPxWvhqXie+nTkGcwJ9IcRtj6uDz7156esrd2/6+R7CjaMF1skvz/NkngzQJNdv1tEH7uHG8jpnv+XauepLlV1u9vQ76UFd3+GO/mz7B0Xw/baREEjUbgOTiuaMUtXuaVKrk7LRdDZeBXHQYquW5mpuJzt94etboHeg568CseS2qOlVHsfMXjnwgdKuHaAYT7ynGCufpzXZSqW91nLVp395HqnwBv4UkltJCTM6Ep6AAjcM+px+hHFehC1zx6qaj5Jn1HXScIUAFABQAUAQ3Mot4nlPSNGY/RQTUt2TfZFRV2l3aPzK1OY3WovKeql3PuSxJP4nBrzIK0fU9+Xx/wCFH0l8GdKFrpzXjj95OxOfb/8AXk1zVHeXktDriuWml1er+Z7cHqLkWJkfsK0T6IzkrakcjKBjIz9aTQRZx/inQ4NVtmEigtg4P4VzyvFqS0OuD5k4s8t+G1pd6PrE0tthYYoW3DAO7LDgZ+7wMkjntnBNdTruKTha/wChh9WjNuNS6jol01Z9W6bfJqVtHcx8LIuceh6EfgcivWpVFVgqi6r7ns/xPn69GWGqyoy3i7eq3T+aL1bHMFABQAUAUNWjMtlPGvLNDKoHqSjAfrWc/gkl2f5GtPScW+kl+Z+blxaEXFyxznf5SjuSCo/lXnw+GP3ntyVpS+4+n/BWrQWNlFaFJYWUAfPGyg59D0rhl7rbb+49Fe+rJWsra6Ho6Th/uc1nfsTa25yWvX/2ANLdTyRwjpHCD5jcdBjnP0wPWnG7dkW3FK9vvMLQ/GVreypHBp1w6ysVWV9rvlerNksyqM/eJx1A5Fdbi4rW36/kcSlzvRtfLTt3PS7lPNi5G3PauOXvLsdEPdZjR2w0qMSQBQ0jhSmMlwx5xxkY/l1rmlemlJb3St3udkLVW4SvZJvmvazX+Z6boNstrZRRrwMFh9GYsP0NfR4WPJRil5v723+p8tjajq4ic3vdL/wFJfoa9dh54UAFABQAHmgD418ceC30DXsIP9HvJ3nhIHGSu4J+Dpg+2D3rypr2XNF7WdvS/wCmx9DRkqqjJb3XN62X57gNI142+9bmVLgSHauUMBjwNvGNwYHOcg9sDg1knRtsatVlLR/dbv8A5Hr3g2C8WJhfFWdQMEZx057CuaKV3y7G05NJX36l++0FL+YTMSGUEDBIGDweh7jg+1NXTutAurcr1Rf0/Sk01BHCqRr6KOT9T1pvm6sj3d0i5O2cL0rN9jSK3ZWhtPtV15ZQ8RsA2DggkfKO3OSS3bbg0Rp+0nZp7O2js/L/AII5VfY0+ZNfEm1dJq3XvpbRdbnpESCJAg4CgAfgMV9HFcqUVslY+Tk+ZuT3bb+8fVEhQAUAFABQBi65oNrrsIiukDGNg8bd0cHIIPUdOR3FZVKaqKz+RvSqyoy5o/NHnxtYLTOQMqSOeoIr55pQbXY+ri3NJrqXtJnWYM6DC5IHvV03e7MqsHGy+ZPNMOUVwCOwPNNvpcIx6tFIXU1q37wbl/vD+orHmlHfVG/LCastGPe48xldOVbvUuV2mtgUeVNPdEMfjy20nVk0i6AEbJH+8H/LN5Mld/8AstwM9iRng16EMTGg4wqaRa37Pz8u/Y4HgZYqM6tFrnjd8nWSW9vPrbrY9VBBGR3r2d9UfNbaC0wCgAoAKACgAoA8Y8aRPFeOkBwJArEdME/eA+o5HuTXzuMg6c1JfDL81uv1PrcuqxnB02/eh08nez/Br5HGabrc32lNMWKeO4fcY2wvlPtGSA27hgBnawBOOM1ywg5L3Hr26/cenNRjeU9I97Npetr2+Z6Dp+k3YU3F86wouCS5ACj1wMLge7V2ww8n71R2S76Hm1cTSVoUU5yeisnv27/cinf2f9tzReRJNHawN5jMCY/PYDATbgHywTk5HzbRjK8lzUdobd3+n+ZVPnprmq2UnooLourk9deyv69jWt41tYgjdI84+nauNe6rdipNyd11Plvx/K58TyyJuZWiikZUZgxUARkZGQNuwSfMMfLmuyPJVpqM43vLlXfYygp0avtITUFGPM23otbX1t32vrsfRXw68RapDpMaawCXUkIzrsIiHCBtxBJI5zjgY69aj61HBtUIzjNK3KuZt26pcqlttZ7eh4tRfW6kpUqco/zSatG997Np2e/9WPVtL1a31WMyW7Bth2sM8q3oR7jkeo5r3YTVSKmk1fo00/xOGpTdKXJJptdmmtfNf8OadaGQUAeL6z8T5rGVodtvbMpxscvcTe+5IjGiH/ZeUMOODmuGWIUXa3yb1/C9vmfaYXh+ti4KcLuL2npGHy5vekuzUWjjZ/ipqEsiiGZiCeiQxJ9NqkTknPQFufxrkliZt+61Femv4u34H0tPhWEIOVeaulfWT5V5tpQ9T0TQvH1xLbH+1oktpk6FmKF1xgSmMjKBm64JUcjcMYrs9rJ0/aQXM+tnt8j8+rYSFLFSwsKilHmSjJNOMk9bRmvdb3VnZ3XU8l0zxG2qXFxHfshu1QBJEYFN25iEB3AYPIYHkFevNfK4j21Nwg5c8FK9730la6vrtv5an2E8JRssXgE4O3LUpyT+zflk9L2d7XVr3Wl0P0zXYNQlNs2FuEPCk9x3VgefqpyPY108kqL1X6GcZKylbRrVPs1f0ejO1t5J7hgJN5wAMMzvwP8AfJA+orb2rl3+bbJ/d09acUnrslHf0VztoE2JzxgVsrtXZ5Und6HnOueLomka0sczOhKkqG2bwCSpcKRlQCSBzxjrXNNSVnZ8vk1fttdPqXGrRg+WrUjCX966X32t+J5np1gba4uL/Vkk+13v7tAgOVjwxAyQGUMOyYbGMtk4rR1Yyth8PKEZWvJzvJp3Ssox9d3fS+hgqLrSlianM6MG7KFoqUVd35m9eiSVtXe51dvppj+zz3rXCSP8kEJXI3bSeRnhNo4Uj5R1r3cPBYaHNJUaul3GOkteruu133bZ8xmGJWKlLDYR1sLBSsqj+D3XprGV3JtpSleySfQ9Q8IRahpl20l8IljnTbti+8ZA52t2Ujy8bsfMCCcEVcMTTrQSoQcacZPRq3Le1l6XTu9TzqVGpSqSlXm5zlGK5r6Tcb3a+/bT01PVkkWQZQgj2rc7/QfQB+es1yxJYk5Jzk/X/PucV8wz+q42irLRHQ+Hs2Frca7KpPkDybQHODcyfKG65PlJlgP7xHGFbE/0l5/8D/LofO5hL6zUp4BO0X+9rW39lDaFv78rJ7e7e+6v7WI9Pu9Ni068yr2kIBZifNCjaXYODkFiCByOWAIOMnocrJKEnBx/FXu7r8vU/NMRgJ1K7xEIpxqSaSivdUnpFWt03duzfWxzOrnTNXQW1kAl0ilYfujfwMxkqSMP/eHCthugNc0VTlO60cnr538tvu/I9j6licFSdZq8Ir3ld7L1Ss/X8zy7RArtmW1lkkzxJvMTROpK7+oIAYYkBGFOAeCoP0rrYfk9jVSc4Kyv9qPRJJfF5Lffvb8sxP1vD1vrNOrbD1XdpLmlCfXmbb0/vdtD3CxfUbaFJJfKkBH+sVyAB/CXyoHsWX5c88Cvka1aNGT5VJJO1mtV6/8ABPqsJX+tRSavKyaatafnHz8le/TsYGv+Ib6YG2aRbWEcShSd7DuolBUIpHdAWPVWXvyrGSl7sYNPpf8Ayt+tvU+opZW6yUoysns1G7+Sdredzl4/F0cES6fFHH5Y+VDtG4eh2jAHueGPXg100aU6slKbfy/z6/IWJybCYODqV5c82ruDaSS733Xl56eZ2Fpd2l5i3RRdaoykptJdIvR92cYGec4I+6doOT9ZSlSy/wDeJRVR77a6d93ofl2Ppzx0XQjzQwcXZP4ZXvezXTXWzveybvsu18M6NJpi/wDE2k82RyzeYS2xck4VNx4AB2/554a0XjJfXYLkcXeVtHJL9Laea7s83DxeHX1KbbovSN7fnpu9X2e2h1CXCQR/abkDyssIcHkL2bsAWwT1wqckgbq6k1JOpSvGXKnyW0a9H3/4PW56cKL5lQkk4qTSlf4em68+i1vpvoYKeKTa3W8H5OSWX7hA7EH0GBuGMnLYGa4o4hVFz0tJQaUo9r9r7rsnZrWzXX6N4H2UH7W3K1dSf5u17N9baapO9j1e3l8+NZOm9QcfUV68XdJnzUlytpdGfAGlac2s3cdorLGHPzM7BVCjlvmP5erHoDmvmXfZbn9NYzEfVKMq7jKVtoxTbbei26d327Gj4n8RW5ntdK00B7HT5lYFR/rpCyl3xzwTlULZO0DPJJNQWyZ8rRpzjCpi6+tesnzrfkgrqMOi0td7Lmb6WPbdX0CK5LtEytIfvbdwyQOcuWccHgLt2jpx1qakFd2/r56nlYTHypqMZJqK2vZ2T291Ri9Vu73fnsectpFzY3SyNkCNgFbGCGbPBHODtDMDyrbSVLCuVRcXfsfYPFUsRRcI295NtXurLqn1XM4prSSvqky9re17pNWswI7pEZpIWAMU/BLA45DuM5bA+YKx3OCW9lxjWw8oSVpzlDlkmk1JNJO/rp0vs+5+PY/Byw1X2kHz0KUZupFJtqLV3otNNG/iaTurLQy7Txrb6mTFZBkkLbXt33I8ROMswYbQOwK7w3rk1pSwLrNUMUlCvdJPW0kk/P5u9m9LaaHkrMMNltL65hearh7OTS5U4yk9Fe3M+ijbRa83cS+8Mx6w4FtdtI+CDBDukkRuwG75B33KWUDqBnrpUwVLCvlqON12X/DL5M9LD8SVsRT9phlKnGWzlyrTrf4pX7NLX02qW/w21NmCFfskJOGlch5m9QApKp/wJg3fbjr588So+5hoN9L2svRt7eh2wqPENzqy9pLezbsr9fP11+89T8P6dp/gqIJ1DHcSTmQtjkrgZLY6qBtx1AHI5Iq0lUxD5n0S2j6Lq/Xfqdjwc8Ymqa1Ss+kLdOa9kl2e6e2uh1tpqieMZGQANbWbKZFQ5EhPKKzA4IYDLRruGOHb+E+zSre0bi3yxtbTrfbyX9anz+PwP9nwjJrmqSd430cUvitHfR6KUrX3UepNrl2JRsTmFhhlH8I7kD/aI/75VSOGrKtK81TUvZ1Y/BL7Ml/K+mv3/fYeDo8sfaOPNGWso9YyfVen5t7NHHPd2OhKLq7YC3BO0sedzcFeo+XaTnPA4HGaxV7yqOHLVvyzgtVU0unFPqt1+L1PSrXqQVFSTVrqWiVOKdm5PS68lq+iPdrDV7K+gWa1mikiYDaVdSOg44Pp2r2ueK0bSt0bs18j5F05rZNro0rp+aa0Z+erkAY7f57foB+PpXzR/UsrJf1t6fkv+AbngbQU1PVAJv8AUQI07/8AASAi+5LlfwzUV6vsKfP1W39fgfH5jKVCnKNJa1Xyry5vibfVqKb8rI9Ll8NSWMoudJleG4HVS37uQf3XBz19TkZ7dx41LHNvlqbeln/kfNttXc0rLr2/r/hz0Ww1FGgWHWrdrUqoUyY3RiR8Z+YZAULt7kDJJIxkfUUXTqLlutvnd6/lY+YrV5UZ+0w8t3tt7sbrbzlza9kumhFb+DTO8k6kGLHyfdYEdsEsvUAevX7xrbFUJSjTw9N2d0/u+a66/Iihm8Xz1qqve6d7rR/KSd1p0v2R4Vrvhp/C93HNdw3G1pC8UsK7twByY2cgsuB06qVyAxwa2qTqKclN3ShbV6ptWT21V9d9GfPzwlJxTy2MUp1Oaz0S1vKCSdr2uk2leO6N/wAPeOLDw+2y0jlO0ZkjkBRmydxwztliWJPAABPTFZc7qQg8a+Z3tGUXp6u+vr3OenlMo1pvDtW0cqdmrabK11pstrband/8LQtdcgZ7ZHiVeJMpl8DuM4jVk+8GJfIyChzWVd+z921vTqu67Ndz7bK8D7Tld7u/upuyUv5ZWvJqWziuXWz5k0eMXur33ifVRoWnlnlmcoSpLfKP4ppP4YwPmbACDqsecA8dOjOq79Pz/r7j7HG5hhsqpqMEpVbJ2taNNv8AurRPtvN9ZWPpq306DwPpsdnanKIuZGB+Z3b7z57FyNqf3QM9ENemuTkeH+GVtH18/n+l2tj8ulKvjcR9cqNzTez2XZW/litX5tJ/EeY6/wCLYNJuYnw00t2wVYYwScZALbR0VegH0Cg9uGnTq4uFTD1Y+/Tu4y6bXSv/AFpvqe3ia9HLYwqNpc+ijezetm35b36326mL4puTqWm3cV0iQ21s6vBNMWjfcTlB5RUtl1coSwUZ+bp8winh6rX1irL3tI8vbVLXrpu31Fg8zVPFQ5YSlTafPGEVJNNfZvZaNXSvtpoeXWskttGI43kjXriORlXkDkBWA565HUYOT1rodStQfs3Jq3ndWeqs+z6H6VQwGU5vTWOhRpzU9G+WUJKUXaUZx91qcXdSTV+9ypM+Bgcevb/OegrBI+iqTsu39frsjsfDfnaXbG8jVwZyQMLlRGh55xj5nzk/7FRVourFLpv1PmK2Io+1dKt9hLRNaSlrbda21v15jq9B8TFrtFuPuglnI44XJOR0OenBzzXj1MFbW2i1+78vmZVoUa9Jxw8rVHpGMtHd6aPbTfroj23+27eS2ZDtZnBLjg/M2SwKnnAzjkYwK6KdOUXGMnZN3b2133/BfI/NsZgpwU5xi3ZWirdFotVp/eevc5O5s7vT7FI9NvHgjkcsI2+YID/CpAZwobGBkgDjGOnqUMd7TEVZ1Ly9nGyt1dr9eWO19V6b7/J16M8PQhh1FpuWr1ulfS61b6X+/Ywxrd3r00vhjV40WSFM2054W4lRTkqWAAc85UEfKS2ABxrOdOtSlNybnVTkkmvc966i+2yT/wCGPWy6vLDYmHJZU6UlGone7TVpSt13bVupyS+GItOE13eRxw44Bd0U55wACep4x3PbNRiIypqhSeiSTlrbtf8AU+yo4qjN4ivBptt2ai7JK9unp6nJ313qNpAbSKJLCGcld7gCVwQM7Y/v/MDgMygdhWdWvCtNuledlbRO3zlt9x04N1HBQoqNN35vaVGoxj25Vu3pfVP0Pe/APhfT/AdiTKv+n3K7pnfHmcjIiBJ4PdueuSx2qMdyhVw8PbyavbWK2iv5V09dvuR8XWlDG4h4am3KKk7Td/fd9ajvrr9m+r00u7GHdeIRreotpyv+7jBd2GSMEcEZ4xgbVB7cnBY583EyVdQrUrqbetvL8dOnl6nvwnTyanKFePNLl0XZO/xPVXe71302SOH1HwffatrUAtWby4D5u5tvyLuBCDCZO1t2SdwP4c70swjGFad7Je4nqrytZ9t97bpbnkYnC0a86FWs43l70o6NxitrXk1+je1unokvhltZW6sL/c0r2x2OwQBmQblBIULw20gZBxkZwAaSxPtKVKd9W5Jqzs0nePq7X89DroqngJylSUXSc4NO/vR5lyzSV00tFqrq773R49oNpb28L2+qKUuIZWTDna23arLx6fMdpHG3GOK9XDVMPWpqda0nqk7/AGd19zbX4FZt9fweJaySo1h6kY1JKKvH2jvCTXa8YRv53b1bODmbHHp7Y/H+g/wrzEj9kqSt12v0/H9I/fqj1iz0/WLHTYWtZEKCNWWJlxjeN+3cV65bnLDknBrnWN9lJwaaSdk7af5n5viqdKvWnKUWm30e9tNtui6Emn3KO2zWbZrSV/m81QRlEIJPfIZ8Aff+61ezSq0qyV7a7tdl366s+ZruthnKWGneML2hLbml2/wxu9Lbokv4rnzljs5PtMDAMzr94c5OMZyQOvIxjoDXfOgqNGeKjbayfzS1Xq/wZ5lLOHWr08vrKSad5xls/dbVpNpqyT0s/iXmbul+Kmur0JMVMcIIUR8EEDurtjIbgsSPXAHT5Ktg5UsK5a81VpvbzvqlzLTXS2vc+iUcPiqzUWo+yVrTck1ez6JJ/JS0slre+m2qaZqSXEVzFvE33gQA3UkFXDfIy/eVw6sDgrz1xxGHrUKdBU24uNnZXevKtdUrp7NWeiV2zko4ClOpVqc8HFtrm5o7cz0sry07927xjY8k0XSFi1FNRlvJbqOylYJHPIXkUkYVtrMy7l3Z3AZyAexx6s5VZ1lgq8fiUZXV2mlq47JrbrZHFDDewp/XaPLKlDm10Ub2dpOzaavbq9PI9B0CS3u9Wm1TU7dIINJ2+UJGLPcSkGVXG4DJRCHGeC205xkjrc6cdKcYpR0svL9TtpLEV6fI6k5e0fxaKKuknoto3002XTZFfWvEU3jXUhb6WGKchpF6bcj7p9AevTd95uAqrvTftFKNV8sLdd9e3k/x/LjxFWllzjTw1qmKj8SWqg+8rPWa+6C07uWHd6cNG1O4Wad7S7PksrDGwjYu7IIxt3h8AkAgg12YOhh6r5NlG+6Vvx9bnzmdV8XGl7SMPaRmox0bctdrW1vpZ2T1ud1Hr95ZapETAzh0JLhwY2GD8yAYILYPGCQePavAjlkoYavyJSXtNXaLuuZWu033vbTuzhni4vGYdVKji3T0jJSVm4yurNJK1rXe70N24164vbd7mFfsVxbzw7jNtMbRu5jc7hkYCtgkgEcZGORTwUqDw9OV+SSbV9Emle34t72aemx6uDxkassRTbU0tIqN227vl0stW1ayW5jT+F7G62C+k8yWJBGHU/eQEsmcHkorCMk/3B2xXyGMqVMuxFShBLllL2kbbJTSenzv87n3WHx1X2UZ4eGkknJSTTU17st+j5eb/t658ztJyPqPT0/HoOnvX1iP1Cb6Le/lu1f8Ft5n0pF4oK7VjhG08AF+OwGRsPGO1c7km9VpdnyEsCkvenqkvs+X+JHokRgu7d/tFrC0ROzG7PCqP4TGB1JPXqa7oUYO8lHld7Jxk01b0Vj4WvSXMoqpK9nL4UtW3fXn7JLboeaQWGlWlxJe2oubd0LMUVlaM8HjY7EYzzxjOTnqa2xNeVDkwylLlb3W+9tdbbtvY58LlDrueIqyhNtK3NG1tPJX2ST12VtiCzOnRQzTiKRywwclAeepyFOM/jXTjMbzSo0ZU4tXTWrXZarrp5iwPD0sO6s6eKqK6aatF7XkrO2mvkSafc6bZwt5FmNxJG52D4yVGcOjjv6VhisQ3XpxkvdhBysrLSPNJrZ78tvI7MNlnsaFSpCo3Kc4xvJyer5Yp6Sja176blvUdd0iKyYXtjHIwTeZIo443ZV6Z2lSGyOm4rwCMdBphKjqyeNmkrX5UlqunXy9b+R5ePwjgv7OpTlyyaU7ydtdXZrV372TS013PGdc1C48crp5jP2KC8vnt2iRmJ8tEt44wz4yxCJ8x4yTnHFZ0KcHV5bWTd+9vvPWrKrgsE4YeesI67rmvzPdapN3vbWzsenm4t/hda3VzHCHiicRxxR4HGxG5ZhuyzMSxy39Bti6UZVVKlePI4rWTd209X5abJWu2fJYBTnf6zKMrxcvdglbW1u73tdvZLqUdOuE+J1ot+u6G6Ur8sgUxgqSFCsNzYBJO4rn2rnozqRxDTUVrpy6W63tbV+X4nvV6sKeHWFjDmg1d88rt3Vmr20+VvQZrdrJY3MHnOVWLGUiYlchiOC+CeeeQoOenAJcalXDUMTScr210ur6J/k7NbF/UsNmVfC4inC07uP7xRlbva2yvs9ZddLtFmze4+1S2lxIZoJly0TcqOA4IbCsWDYOTgcdKy+tynhaTd1bRWtpa66/d6Giy2nhsXOtQSvzXbaabba6KTVm7tru7ppnEeLvGL6NcxW8ats+zxkc88M6HPIycocHuME4PA4K+D9tJSm9VFL5br8z6vD4ynGMn7NLmm20kmk3a9r9Lpn/2Q==')",
+
+    "1M":
+        "url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEA8ADwAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsugAoAjaQIMntQBzOreLrHR1LXDbcdjgfkCwJ/Ck2o7lKLex5dqPxls4ZtsbMIghLZG3Dfw8+mMn1OR2Oay9rHojX2b6nlusfGK7vMNYy3EY+dcB2Xdu6FQCDleMZGe4Izis5T7aFqCQWnxV1MhjNcXKZOVBYcAk4Unjn6bc8VHtGtmaKC7HpXhv4oSyyql1JviIHzuACCR/EEzx2JC8ehpxrdJbd9hSpK14/ce62d2LlA4IOQCMHIIPcEdR712ehxbaF4UAFABQAUAFAEE0qwruY7QP8AP4/zoA8O8efE5dMLWWnhWm6M5O4J7+hb0GWx14rnnU5fdjudMKfVnzZe6pPqkxmuZGfcerE9foOv+6owPSuJtvVnUkloiEQpKdzcofXuRz9MdyB0/iapvbYdjXitIGG1UCjHVQCxzz0/unrznj+KouzRRRk3tnISpjjGwMc/NljnrkKcLwMAYAA4HU072V2HL2RZhaSE72Hl56Dp0Axjnuck5/SlcfK0e9+A/GrWRWzuSXi+Ug913AHK+oyTlfXkEmt6dbk92Xw/kYVKXPrHf8z6GgmSdFkjIZGGQR0Ir0l3Wx5rVtHoTUwCgAoADxQB4v8AFLxW2l2xtbclGk4aQHB2/wB1O/OMHpxkYORXPVlyqyOilG7uz5Kur/7QxI4Hck8k+/fPt+eScV5+x2EMDZY7gXb7qp6nGfnPYKOSowAMAnJxSGXRFMpDv85Y47hVx0Axjp7YAOaqyKSfQ1rDR55dzuWAk/hDMFye5Gefcn/Gk7LRHRGn3O90vw1bwR79u5j1PqfbPb/PXpg7s6VFLQ7Gz8PWt3F5cyDB59CNwHIPqDnn86uMdBS0ONu9HufDF8gjy8WRsJ+6VPY8fLjvjPPOD2TXLozna6o908G68AVtpPlSX7mTnD/3fTkcgjhuCO9dtCdn7N9dv8jgrwuudbrf07nqFegeeFABQAyRxGpZuAoJNAHwL8U/Ft1q+rzxv+7jgdoo41IIAU45I43E/e565HAWuCb5pO/Q7opQSSPOtPeSU7Vw0jcqB0UdB+A5J6Z6dME5tL5Gkbna6Vp5CZ7j5cjg7jyx+vHX8e9Yt6nXCHc7Sw0yM4DDp0780HUopHV29oNuMBfQd6Vijfs4wqcZJJAXsAO/0otYo6y0jWMAAe1aRVjCTH6tp63sHzDlR8p9DVON0Y3scQLttIKs2QoYcd8jqQeOO/r365zlsyWr3R9FabdpfW0dxGdyyIGBHf3r2E7pM8VrlbXYu0yQoAinYRxszdFUk/QDJoA/MvxXdLe6jczLkI0rkAjB+ZicYHcDgnoOnrXn7t27nfsi/o1r9lszcAfv7g7F9gRgY/3VBaok+h001ZX6s7vT0EKBPT+dZWOyOh2Nkd2MDH9fx/woNTftVAcDjBppDLM+o22nPtnbjOVx/gBmnZLRiv20LC+LFnYR2cTynoMKRn6DHT3qr9EYbbnZafqa3i7ZY3gcjlXUgZxyAcYP06+1aJ30tYzatscx4rtFtoHugPlQHn+6f6emf8nNoT0PQvhvqIudGtkbKuFbAbuu44I/4DiuulNNcq3R59ajOH7xrR2fpfv6noNdJxBQAjAMCDyDwaAPzR8bWUthrl3aTjEi3MgYDgY3bhjHYgjGO1cGzfqd26Vjb0hRIF/uxDC/U9T/AEH4+tYPc76Zvtcx23zOQMc89qpI2b5S5YeL7beIUVpWzwQOPzOBSasCqJ6I9CtXaYLJgrkcfj/nmg2XYtx+HlnufOmPFFiL6aG7HqthoZ2KVR3/ABY49AO36VXMo6In2blq9i3B4kgvn8uNGmbrhF3fT5hlF/4Ey0029LESiorR/cQ61Ib+2fT3RhJcowER27yo+824MUAHXO7PYAsQDVnsRdWs736I6OzPlRRiz2xz2iowjH93G109OcED3Az7YNtaw+KOtvzXzO+CTjyVk/ZzTi32a+F/9u6fI9NsrpbyFZl4DjOPQ9x+Br1IS54qS6nzFWm6M5U30f39mWqsxCgD45/aA8OpYarDqsSbRexkSHt5sZC59spsHvgn1rkqqzuup1U3pbseZaES6nHQVyno0ynd6bJqV0VclYY+CAeTnnH61adhuLm7dDptO0+w0n943ykDoxJ4/nU3vojdQUNTeTxvbxqVj+bb0xyP/rZp8r6Bzx7ndWXie2vbQFZES4ZcBGYA59fXA6n2FJeeg2+XVa9TzLxNpd5c3jQxyEynbiX+ADHRUycAHoCSevzc5Li1DW1xThKqtJW/L7v8z1zRVhswsrsBKVRNqDaAFGMkDhmPVmxkn8gc3vcz08gVJpKK1tu/62R3yXCvJGmfnZWyo6hOCHbHQZUKM4yTxWu5lbldkYGuJJp0qXluTukZYWUd8klSPocg+ua5KicWpx9D2MK1NSoz2Sck+3c9R8PMQskZ/hYN9C6gsPzzXdR0TXZ3+9a/ifP41K8Jrqmv/AXZfgdFXWeSFAHB/EnQrXXtCuIrvI8lDLG4ALJIv3cDjhj8rDI4PtWc7crv0Naabkox3bsfF2j2s2nmXz1KpkYb5TjnA3AElQ3QEgAngEmuG11dHqx/dScJ6duxflVhH58ZwrFsFcE5U4PJyMg8dKLaamnNvyvRdjmJ7Ke8wytsIfcxds5UEcc55PPt0461pGUYbrUwlCdTZ2XmJD5iyzbeUKMM4wpO3Hyr2Geev04qub5eQ1Cydnt1Z6x8ORbzRNZ3CLhwScAAk9M/X/8AVXHa+ktmelHSPu2TR3s2iy28IVY45RFkK5badnYHgnj1Gc9+eTVmlr9/cS0fKkrdF28tn8jPtLF5ZQxIjHonLf8AfbDofZAR1DA0lZ7GvK1u7LstPx/ysepabapaxYjXbu5J5LMcdWY5Zj7sSfeunZHBKyehPcQowBdQwQhxnsR3qGl19SoSafuuzenyZveHZCXlGCA2GBPtx/Xj2raju/vOfGRtGD7XVvXX9Dqq6zxgoAwvE9p9v0m8tx1kt5QPrsOP1xWdRXhJeT/I6KEuSrCT2Uo/mfG6eWoggk+/LHsx64jyQ3scce9eRTlZJdWj6avTvJytom/ubFVI41aJxhTgrgfdYcHI44ZepGSCq8YJI3T0szklGzvFfIi+yxyDCISffAB+hBY/mopbFKLe0ber/wArnJ6pvtplg27dx6Dvn1Pf8NoPcGncHC2j+5aI7bwtJ9kvI1J2E/hn1qW0bxXTyPfZbqBAqsPlI++WRQM+xO4/8BB+tU2v+DczSa6/KzOK1S2l0yf7XZkSwnl0U8jvlR6e35Vk1y6x2N41FJcs1bsd9oWppfwhk7dR0IPoRXRGXMjhqR5Xc31UHrTMEzsbWCKBB5SqgIBwoxXbFKK91W9DypzlJ+/Ju3d3LNWZBQAjKGBU9CMfnQGx8R+J9IuNI1bykH7y0lI2NxuTJKuCf7yEEfWvEceSXL2f4H20ZKrT5+kl9z6r5MddxgHjoa12PPuT6QAzbTTbN4nOeL76D7UIVABhXJPfJ5qV+BlOSTMvQnN7defPyE4UnrhSBjPbjOP/ANdZydvdiiYuUnodotpe3krT3kyGLnYfMwFA+6OcdhjAqJRctdjrUJLf7jbFrdrEI7KOSYnkMTtCqMHJL7T7DAOc1LptbMlx5dWd/wCExJHK4lBRwqhlPXI6dOvBxn6VvSunZnLU+HTuegjpmus49jt4BtjUeij+Vdq0SPIerb82S0yQoAKAPNfiL4VGsW63trF5l5b4Hyj5niOcrj+IqeVHXG4DJIFc1WHMuZLVfkephK/sm6U3aEu+yfR+Xn8jwe/0O/sbZJ72F4FmZhHvG1iFx1U8rnPG4AkDI4rj5ZJXkrdj0JTg5uNNp2te233mLZTi3lGeOakpO2hymv6LcLcTXeA6u26PP3TnpnHPA6/So1vboZyjrczLOG8kdVdwoB6RDZ+v3v1rXRbGkHy7nrOk2lpAymQr5jf8CY/Unms7pHf7VbR/yPV4JkaILEu3cAMkdq0vfY4W23dv5GhCqQP5jfLkAZx1+v8Anv8AWmtNWYPXRG/p4W5kVF6Fv06n9K2j7zSOao+SLfkd30ruPICgAoAKACgDD8Q6JFr9k9pJwT80bf3HH3W+nY+qkiolHmVjSE3TkpL+kfIus6bNpVw9vOpSSMkEfT+hHIPcc15rTi7M92MlJKUTJn1Jmh8k9AeKixTZUt5YgQf4if09fzxQwTsdlDcJZbZBjJx+uD/X+dRe2xomdWmuJEijIznt0HTv+P4jmk520QtyUarLIcBuF/I/n/LHr+EqTYWSPTPB0hcpI3Bbd9Oh5H17e1d1HdfM4K/wv5fmek16B5AUAFABQAUAFAHiPxg0hTFDqSLhsmGQ+vBZD9Rhh9MDtXJWW0vkd+GlvD5r9T5W1KV4SQSACePeuM7mzF+2shBJ6EHP8h+NJom9jok1eS4AVB8o/wA59j6e3Ws+Wxpfsb1heySHaT8oOSR3HA/IgAA9euKjlNEeiaPZy6qVijJRQQzt0wATxj1I+uKtK+iK23PZrM/YQpj42dPwrpXu6o55JS917M7G11m2nAVnWOQjO1jjpwcE4B69ueRnFdsakZdbPseTOlKD2uujRpCZDyGH5itbmGxJTAKACgAoA4D4mwiTQZiesbRsPrvC/wAmNYVfgfyOrDu1RL1/I+PNRt1kXPcdK889do5WW23vtY9ucf4U7mVjtPD2kw3H3s4x7Z/wPY+nWs2bxSPTtK8K246/c4JA7/TpihIvbY9J061itVEcKhFXoBWqVjNmwxwKoyMC8TzJFU9Artg/gP61lYvb7zm5rCHecLt/3SVH5KQKnlRR/9k=')",
+
+    "2F":
+        "url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEBLAEsAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsugAoAKACgAoA80+IXxKsvAsG04nvpFzFAD064aQjkL6AfM2DjABYZyly6Lc0jG+r0R8g3/wAcvEV3dfaVmddjZWOJmWPr93YqhXx/tbyR941HvdzS0VokbT/HnxPcTpfLtgRcAwqoeNgAM71PzAsct8rIwzgHAFF3fRi5VbY+q/hz8QrXx9Y/aIwIbmLAnhBzg/3lzg7SexGVPBzwzaRlfTZmbjy+h6JVkBQAUAFABQAUAFABQBjeIdah8Oadcanc/wCrtYmkI6biOFQe7sQo9yKlvlV+xSV2kj4Eupbvxnffapz5t1qE3AOcKrcqvsioN7AchdiZHBrzZT5bvr+v9aI9KFPmtFbfp/WrPbtJ+DWmxRq12WmkAB7KoP8AshR0HbJNc3NN9bHoezpx05bnC+LfhFLpD/a9ILGAcyRnkqP7yH2/PFaqq46TV/P/ADMZUIy1puz7P9DnPA+uz+DNbivs7VWQQ3iDhXhkOzzMDjchKkkeqk5Oa6oyWjW3T9UedKL1i9z9AY3Eih1OVYAgjuDyDXccQ6gAoAKACgAoAKADpQB8n/tAeOEuTH4YtG3IjCe9I6EL/qoc+rNyfcL6GuOpO/ux6afP/gHXThb3n/S/4JQ+GHhwi3/tOVcsFKxgYBJPLlSeB0VB0xtNeQ3eT7I9unDlin1f5Holh4juGuzbNb3NpsOMThXjkHU7HQkggdCGZc8EVv8ACk1Ydr3VmrdTptS1GGONkmyMjoqs/X2UE0Sd9BpctmfF/iC4T+2GiQ/JIzxH6kHZnuP3mwnvkVcLqGvT/P8AyOGrbnbXU+8fh1fnUvDmn3LHJa2jBPclBsyfrtr1oO8V6HkTVpNeZ2lWQFABQAUAFABQB5H8SPiL/wAIpavHbIHuX3KhYgKp6FiDycenIPGcjIrhq1nH3IrV9e3yO6lR5vfk9F07nwVPqgub17m+l3yTOzvIwZt0h9QATtHQepx0ySIjDmVttP6+bNHJRd/P+vkj7q0C2TR7GC2A+WONF47tjJP4nJJP415kXZnvbK2xo3FyqMPMXYh/i6gdfvHt+orR+lkOKTWju/u+45DV9GHiSN5YJ5Iij7leByucDAzgjKnHT9RSjK12kmTOne0dUfH/AIoeaHVJEmbzJ4Hyz4wWKOF3EdiQMketddPWN+jueTWup2e6Pvz4QRmLwlpwP/PFiP8AdaWQr/46RXpQ0ijyp/Ez0mtDMKACgAoAKAIbiQxRO4xlVYjPAyATyew9aT0TY1vY+X/HXi3wz4ktri1uBJHdxRs0ErJu3yhcqu5SwBc/KykKAO4IGPOlUpzXW9rp/wBbHoRp1IO2lr6o+Xruyhe1ZIsGWNd5PcncBj/gIx+ZrKMmpJva9vwNnHRpbo+49N2arYqkgDCSMB1+q4P/ANY/jXHDc9W7jZroQXlotvH5YWSNlGFeDofTdG2Uz/eI257d61asv8v8tjrhJ94tfy1N16SWr8vxMO+1hvDmlPf6kY7cqp3BT15+XH+02QNoz8xwCetYpOUlCO70/wCCZynCnef2Y7f5a7nwzfa1Nql/Lqky4W5lbI7AEhto/wB0EfWvZVNRiqa3Sv8AM+ZdVzm6kur28j9KPhPdxXfhbTzCchITGR6MjspBx3H6jB71tTd4o5pq0mei1qZhQAUAFABQBxfxAkkj0eURt5QdokkfONsTyKshzxj5ScnoB14rnrX5Go+X3HRRspq/n99j4g8cyWM08k2jmUw/IrSsqpHvVQr+SPvFcg/OcZPI3D5jxqhypTt7tlv1bO32t7xe+vyRxNqTFE8zdNqoP95pQCT7gEk/QCpkuaSgul2/RL/MqPupyfWyXzZ9haLM8MMZhOHCLwehGOlcKVtj0y7e+IpUGDCd475G365puTehWiPmX4gard+J5ZIZXxDaSIoQEhdzKc59SuQMnpk4A5rtowVOHterdvkeZWm5y9n0XTzPJVg8qJbd/u+a4z7nYOe/OBiuptt867L9TkSt7r7n0H4A+Ik3gWHYCJIRGwZcHymyA8LEjGJom8yFzkb4tgyfLUVj7Rw1hq30NfZqfxaJdT7B8FeIm8VaRb6o8Zt3nU7oyCACCRlc87HADpyflYcmu6EuaKk9GcE48knFbHVVoZhQAUAMkcRjP+fXn0AHJpAfMvi3WH1lZhcu5VSw2AnaF9gOMAc/kTmvV9hG1n2OZVWnofK2uObcNZB/lSXC84yoyc/QZGfp7V4srxg4X0jJpeiueqrOV0rNxT+bsdP4fsre+t/sDsN00UmwjoJVcE9TktgowHcKx7GssLGM51Iv4nFJen/Dl1m4Rg1spanv2hTN9lj3ghkVQR6HA/rXmNWbT6M9aOqTQeIdfsvD9sbi/kEe8EIDyWPsoBJ98CtadGVV+6tFu+i/rsZ1KsaXxb9F1Z4NeahZanZyz2e7eXO/eMFixB3AZPyn14OTyBxXq1uSEFTjpZf1+X4nkwcpSc31f9fmcBasVkE0qMwDZxjgkdGHXjoT9B2rh0Vlf+uqOlX7HsPhySPUZ1ijVZYlQNI7AEKcjC89+uQSenAr1IU/bPkT5ocurcdn2T7nHOfslzWtK+iUt13sfaXhK/t76wQ2yrF5QCMi9FIGOO+CBxnPpniqnT9k+VbdPQ5VLn1e/U6asygoAKAOF8d6q2nWZSI7ZJBgem0Z3bsc4Pyg4/xFdVCHNK72RjUlaNluz5ovdS3bpAMF8Ap1wxzkccYJH45Nd1WsqcXy+8+iX4X/AKuZUqTm1f3V1ueOX2mtLOMqWlGWBABBRuRgEqCfx7815FTD1HFKKu7f8HX5npwrQUm27Ipr4e1O6LNEMBCHTHysrDoRgnDdDwT04NVRwk4tTejXmRVxEWnFar0PcfBvig21r5Oogu0ZKFyOflbblsdeOSfqT7rF4V29tTV39pfqv1NsHiUn7Go7L7L/AE/yOP8AGAPi+7Y8rBEFVPpknI+uGP8AwIelehQw/sqShLR7y9X/AJKyOCvX9pUco7bR9P8Agu7PObm+g03/AEZB8n3FUdTzksT3z2A74yfTwa16k3bSK29P66nq0rQir7lSNjezeQFZSf4VcHAOTghTjt0J4PGKziuVe6lJ+a/LuU9X7zcV5fqejeBbaXTpGg3fuXOGHv1498ZBx149K9zCcyvF7Ja9r9F62vf5Hl4m2jXfTvbq/v2+Z9M+DNUGmXSoTthlARh2H91vwPGfQmuutDmjdbrU44S5X5HuNeQdoUAFAHgHi7Wl1W9kUA+VCWjTPH3CVcgYBALDIPORg9CK9ijDkiu71OCcrvTZHlms24s0M68xZwwA5GeAcDrjn6AntwN3BSav01EpuKaXXQj0u2gnhSYBTsaRM47B2x+QIH0rS1tDI21s0HzRgKfbvQBhSaeFkcgbRIr7sdyWIJ/Edab2EZcUBe1kUfe3BD6/KhyP5VEtVZdi46O55jqWkpvy0ZkI4A6Ff/19e/5V8zVpT3g9t16H0FOpHaXyZf0XR9kpuIkWNEG2TOdxJ5wuABn8K1wdKcpc8/hV1r+n/DmWJqQiuWGkt9P1O40C4hE8gTgoxAHv/icgZ+tfQRSjpFW8keM23qz063m2gH0ptEnunhHxD/a8JgkBE0Crlifvjpu9QePm9znvgePVp+zd1s/wO2EuZW6o7GuY2OY8Ua6mjW5VT/pEoIjHcDoX+gzx6n6Gt6VPnfkt/wDIynLlXmfPN2fNbJ5zyfU9j+P869uOmh57OK1W1urxWtrU7tu9my2MRxo0shJPJIjRgg5JJVfeiT5VfzS+92BLp6kvhe4aKExyBR87YwcjGflOfccn3p69fw/ANFsdWzIGAIwW6EcfniocuVqOuu2n9WK5b3a6FUYY7uxV/fgkY/Sqk+VN9u25KV3YzLWJYJdv8LTSMf8Av2P/AIqktUmuw9nYjuNJttSYTQkDBwSO+OD/APrrm5IVX7SL8tOtjpU5U1yP1t2M/UQmmxpCilsuuQoyfmYLk+wzknsBW8UqaSSdtFp5/wBamEm5u7fmYHhnRrm+v9QvYR/o1hFLcSn2DEBRxhnbawRepI7AZrPnUZa9XZW7lWutOiuek6e+9NzdscHt9fetzM7Dw9qp0m7S4GdgO1x6oeo/DqPcCsKkOeLj16Fxlyu59Do6yKHQ5VgCCOhB5BrxNtD0Twfx9q6XOotCCMWy7Px6tnHTk4/CvXoR5Y376nDUd5W7aHnE9/GoDbh1wORnPX19q7LWMDZ+GemrruvyXDqGt7eF2fPQmVTCqH6hnb/gNcmIlyxst2/y1NqSvLyR51qumS+GL+awRmUW8rIOeCoPyn0+ZSD+Nb05c0UzGS5W0adpqokXa7MP++f5jBH5/jWpJpG7EX+qIJx8ozjt+maiV7PlV30W2paWuuiKn2+PcxkwrKRwcZBIU8df/wBVC2V9H2HttsVptYReI2GewC4x+OR/KntsI5i6vJJmJ3eufX8T1qJO2iBI+kfh14cW+8Em3g2wz33nM0mBlmSZwgc9SuEC+wJxzXmSnyVE3qlbT1R2RjeDS0ueK6XNcWt7dWdyDHNC2xo2427SR/PPPT0r1YtPVbHG9NDqEuTHy5AHrmqsI9d8N+N7e0skguSWaMlVIx9zgr19MkD2ArzqtByleOz/ADOqFRRVmeLX0iztJPJh5pc5LAnJY5PyjryckfTNd0YpO9ulvkcrfTzv8ypbaVbnDyqZH7FsDA64CrhQPwz61foI6/w5q8vhUyf2eI1E5UurLkErnbyCGGNxwAQOelYTpqpbmvp2NYycNht/of8Awl1zJqd0fKaYqCsQwuVVVyN248gDPPXNeHicXLCSVGik7K7cul+mluh7WFwccTF1qraTdko26bvW/Udb/DywU5cu31bH/oIWvPeYYiWzjH0X+dz01l+HhupP1f8AlY2o/AmjBcMnPrvf/wCKqViq/Wo/uX+Q3haK0VNfe/8AMz7j4baYSWh3Kzdw7Htj+It2FdEcZXj9pP1S/SxzvCUX9lr0b/W5jzfDeJQcTPFxwWAZR7nAH9PrW6zGovijH5XX+Zk8upv4JS+dn/kYI+HyEEQX9tIepzheP++yav8AtBdYf+Tf8BGTy2a2l98WvybPoHwdf2XhrSLXTbqZI3hRgWPyozFyzFSeoy/XFSqqryvBS18v8rmcsPKgvecdPNL8HY8z+I40nWLpL7S3b7YR5c7IhVHjHQknaS64ABUEFeCeBXtYdTgmpqy6d/8Ahjyari9Y7nnn2aeFwQ6si8iPbtyfdzuPr0A+vU12nOR3Vw7PlZ1tuBmN0QkH1BJ6HqK55Qm3eE7LtZM0UopaxT+di8blY/vcYrYyK76sAcICfwOPyH+IqrCuKuphPmnYRjGfmYD9On8zWVScaUXOTskr/wDDGtOEqslCC1bt5L1O2tte2xrBZxSzkDgqhCk9/nfamSTnG7Nfn1SUqk5Tlu3f+v0P0SlCFKEYR2St3/L8TQim1SfhhFagddzb3H/ARhfyc1Ki/Qtyj2b/AAJTo8twwaWed9pyAG8tc/RACR9WNWovZmbmk7rTyX6mm2lrIMPLKh9pWH8jT5LdX97F7Xsl9yKtvpjQrJPb3MwKFgFlfzI2CjO3a7jqepGCFIwckCumlSUlrK2/6avXby/E82tiZQnblvotFpfRvTR/0jNg0nT7o+fJbxI8vzOuxeHOC38PIJOQeuc5xXA1fX8Ox7KfLovv/rqc7qkUOnzMiYSMcr2AB5IHYDNfZ4CUZUU0kpL3ZWVm7bN/L9T4nMFOFZqTbi/ejdtpX3S7a/oZ/wBoBGV5HqDkV6x5FyvPKrdwCOhoEQmcN1xSGe3S+H9PkYu0EZZiSTtAyT1PFeGqk47Sf3nfyR7FR/CmmN1gA/3Wdf8A0FhVe2n/ADMXs49ihJ4B0KZxLNaJMyghTKzyYzz0d2HX2rOU5T+JlxSh8Oh0b6VbSIY2Vgp67ZJF7Y4KuCOB2NcTpR7fmeksTVX2vwV/vtcd/ZVvjGHGRjh3B/MMD+Oc1Pso9vxZf1qra11/4DH/ACHrptunQP8AjLKf5vS9lHt+L/zF9ZqbX/8AJY/5CNplqwKshIIwcu56+5bI/Cn7KHYn6xU/mt6WX5FT+wLAKVEWAeSA8g7Y/v1SpxWyW1jJ1ptpuT02JP7KtcY2Hj/bf/4qo9lDsbLE1F9p/gZOo+EdL1MFbiIsCMf62Ufyf9etddH9xf2el9/6Zx1putb2jvbb5+hUi8DaRCNqQsoHpLKv57XGfqa6/b1O/wCC/wAjj9nHt+JY/wCEQ0v/AJ4k/WSU/wDs9Ht6i6/gv8g9nHt+LHDwnpY/5YL/AN9P/wDFUvbVP5vyH7OPY//Z')",
+
+    "2M":
+        "url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEBLAEsAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsqgAoAKACgBCQtAHkHjf4vaf4VkNpblLq6T74DfJH7MVzlvVcjHc54rGU7aR1N4076y0PGJP2hdVe4BjS3WLPKbT/Mnk/R/wAKx9pLyR0eyh5/edtpXx+iuEb7RbZlBG1Vfao+pIduTk4wTWyn/Wxk6XZmtpfx5064nEN9A9spON6s0m0f3mUxR/KO5Us2OQpo57fErCdL+V/oe22GpW2pxiazlSaM/wASMD+eOQfY4Napp7HO046PQvUxBQAUAFABQAUAQXE62sTzPwsaljzjgDJ5NJuyuNK7sfM3xS+K8E9v/Z+kSuMPmSZDt3DHyxoQc4O47zgdFx1rknUT92J2wpOPvS0Pky/vp5ZC7kgyYJGcjp1OMckeo+vNIvYottY5A2sOuOh/z3FSO3bQmF08bLIpwTx6cjpz6Ef5PNK3TsVtr3Ntb6Z184EYdQrqwB2dsqeuD9cD6Uc1nZ/8OPl0uv8Ahjb8F+KdS8FagtzbSuYFI3RMx2FSw3AqTjDDuPrkEKRonb3o6Myt9mW35H6F+Htcg8R6fBqdqf3VygYDup6Mp91YEH6V1J3VzhkuV2NqqJCgAoAKACgD59+OHiaWyji0mFiiSxNPNj+NQdscZ/2SwLMO4A7cVxVpNWgvmd2HgtZvpsfINyjSzMp6IP1JAJ+u4muVe6jua5mc9dKzvg8E4/p/n2reL0uYSjrYsmDYgIBYjg4/z/kVF9TTlsiLauMYIwen+fzp3JsdVosH2gGNRvUqW9wOpOO4H8QHQc9q55uzOuEbq3Q1JNMjG2BxhoxkEgHcuQRn1yOPQEA1pCXVGU420Pov9n/VWgS70N3BjjK3FsuSfkf/AFuCegy8fA4zkjqa7qb3XzPNqxtZ/L9UfSldByBQAUAFACdKAPkb49XEY1KOXd/y7LEF9SZHJ6e2V56HmvPrfEl5f5np0FaLfn/keNWmi3srh1gZ0uEAyOCucHJzgZBAPv2rjbVrLoejGLTu9mvuJ5vhjrNx+8iWNgexbBGf89jWkZWWzJlTu90joNO+GV/HERcSKHxwBkjjp1x07HPtzUNt6pWNIxUVZu7KTfDe9835E+XPYgYI7jIIIP8AdbA7ZxU8z2sU6cVqmdJpPw1ubacOs6QuOVCg7Se+VyQvvtYj0AFCbk7fmTZRV1+H+RzfjaFvD9yqTfNvXaCMgZPbP6jHQVolq4rdGc37qfRndfCbUV0fX7SM4MdzAbUHvuYF1z3zmILXZTdmefVXuu39f0j7KBrtPNFoAKACgCpe3MdlC88pwkYyT7f59ePWlsNK+iPz38b61PrPiY28zGW2FyFTp93zOAQP4hkhsY5B4zknglrzPrt8j1Ie64q2mh7Ne30emSC1toWnlVRnHyoD6Z/melcvLY9FNyV38izp3iK5X5LqKOEdsOGP44J/kKrm5dB8tzpBdrKhlGMAdqTl1BK2h57rWuTQMXS7Fqg/2FIH1J6fiRntURu3oaytFa2S8xvh/wASTTzqYruG6DfwlQpI9vfHPX9KrWDu/wASPdqRtFr5F74oaKNZ0nzkQb1wwPcEe459a1e8Zx+Zy292VN/I8Q0FdT0l4LqDPmQyK0LdcyAHb147kdDwTjmr5lF3RkqUpK1tD7w8AnU5NKjuNZffc3H7zbt2iNSAFTB5zxuO4kgsR04HfG9rs8mdk7R6Ha1ZmFABQBS1CyTULeS1kJCTI0bFTggMCDg/jSaurDT5Wmuh8SXHgC407XRb3UbxCC4QxOwX97H5qhXXaTw2c+xyCARx5sk4Pl7ntU0pwdRWuunyO78RWD3twV3mKMOSQv8AHzwHxglfUAjNc/M1Lyud8YXgrX26aHBQ+C0sLgzxSSOMhiCAqDGOAMZ5xznrknOTTlNvSyt6Dp0VHW7u/M9H0yCR4DGpwT0FYWctDpaUdehhXGiJOzCZVcEbWVsjIznBAPqAfqB6URk4eTCUVLSyaJ7LQrOALHFbxxhT8pAyV/3Sen4YobctGCpRgrq3oek21mLi1a2YA/L8oPTpx+tdsFaPKzy6js7o4XWLL7JIsaHeFlt/LQcKrrujxwDw0jqzYGcEA9qz+3p3X4X/AFsda0oOVrNRav35nH8le3mfT2nwtb28cb4DIig46ZAGcHjIz3xXrrQ+Ve+hcpiCgAoAKAPL/Hscq3unyIq+VvlWRiCWHybkAxwAWHfvjBrlqrY78O7cy7q33/8ABscdc2yrJ8xwTk/rXDy2Z7dOXu6HPXBR32R84PXtx7Vk7PRHStN9DZ04CNgzYCjGe3bmrSUWmZP4XFFHUpAjGRXWRyxyq4wF9fUdhWVRK91ubU9rWtZfiNsLpJPmxgjgj0NKLRU7pWO1tZNzjbxlc12p66HkTVl8zzLS9al8a3EVjpUEqHz8yzSqqqoVskjBJPKg5P8AdAAJIwRg07W1FVqx5LK9vPy6fifWAGBivTPBFoAKACgAoAqXtubiF40IVyp2kgMA3Y4PXmk1pZDTs7nheswTRSeVLxKq4bHTdjnHsT09q8erdOx9JQfuprbc86n1eyhm+ws58/ugRs/XpjnI796yS0utj0Ypy2067mnE6qoEfmENgY2t3GQBjuR09RzTafQajrq1pruug661CKwhM0kchQdTgDHXkhiCB8p56HFTsP2bezStrv8A13K2i3iaiy3VurpFIucOu0kdmx+nvms2rOxD0Vn8j0fTmLcL1wQPrj/GumD1PNqKyNj4aeCJ/DsX2u9k3zSrwgAAUHnJwOW56A478nGPThBr3meLUmn7sVoes1ucwUAFABQAUAFAHl3jXT2hnW8QfLJgH2YDv9Rj68151eGvMtj2MLPTke6/I8a1bTFurhLuH93cwklHGAcHqvOQR7EEfjg1xLTQ9yLTXLNXj+XmbNvqWo20QjUoSuCCU74x0BxkDjj+Va3aVrkewoyd+aWu6v8APsV7qyuNTTN9KTHxmIYVTtzgYHUfMc5/Ksntc1Xs6btSjd93d2+/Qls49mWACqAAMdsdq51vcmb+87LQCBOhPABH6nmuyno0edV2dux7aOBx0r2j5wWgAoAKACgAoAKAOT8X6nb2FiyXAB85ljUejOcA+xHUfSsKrSi79dDpopuacdLanh97t3Bk+n4ivGl3R9LSenKxdpwD+VDbsdCsOVS33jx6VnuN2jsXHmigQJxnqR/jV6RVupxayemw+0vhCTLnAA4+p4H5nAFOMtbhONlY98s5wUAbqOP0Br6C1kvQ+We7LoOelAhaACgAoATpQBn3GoxwkRqdzt0A/madhnz/APFzUZUjjAySh8zjgbgQQPoACPx964a2rS6K56NBcqb66IyIZfPQP2YA4+teWmeztsOVGPCnA96uwc8u48xSR9DWTVth8zluUipBOc1jqbrTYuaIp1LVrexX7kR+0Tf7sZGxfq0hU49Aa6qEeaa7LU5cRPkpvu9F89z3mK44Y9Arn/CvoeyPmCjba21rGVwT5UxjIP8AdBYAj644qdlqO19jpYdVilUN6+lOxNjUpCKk92kHHU+n+NA0jFn1EyZCnAHHHTn+Z/lQUkZcJMkjHsAM+/Pr17fkafS4/I82+JGlm8th2JkUE+gOQT+oriqK+q6M7ab5dDidEZvs6RyjbLEPLkXusifK4/Bga8u3K2j173Sa7GpuMZyKtaEg8rN7D0qGWjK1C+W0Q45fHArK3Q2Tsdz8MtKa3t5dUuB+9u2yM9RGmdv4EksPYivXw8OWN+rPFxVTmlyrZfmei7iiIB/Edx/Hn/Cu9/keakc3PdGa1eVFw5cYHc/Nz/PNSuxWwyC8DqCG2+xOKqzWgaHpV/elBsiOCTgn+dIhIyGyzZPYUjQpXB2AKOuc/if84pi2IH1CGwMcLAtLO+FReuM7Qx5GF75+uAaT00BIra1aLfwyI3ICED69c/lWdr6dzRO3yPNdZ0WaGJdZs1LZRReRAc7oxtM6jucDEgHJADjPzGuKtTfxx+a/X/M9ChUX8OXyf6f5GbNMjQrMh4YAg9ua4juS1sZgu3c7elJmlrGfBp76veLbKTl2AJH8Kj7x/AZ/GqhDmkooznP2cXLsfRdnbpYWSQJwoAQD6cfyFe7FctkuiPnZPmbb6sJWwxPZVOPwGKXQNjkZG328YHBaQN+WWNXt9wEE0SBuc59iR/Ki7WiC1z0hhkZ/H8z/APWqWCImbaAR3pj8ijN/rAP8+tHZCOXf91qiyNlghAx/vJnj6Zzj2okruw1ojpsZVnBPUjHbnr+PI/Koeg0VtPfyzJHjhXOPowDfpuxVBsc3q3g22uwRbMbXJ3bVAMYPU4TI257hSB6DrXJKhGWq0/I7YYmUN1zeu/3mKvg8Q4DTbseke0n/AMfOKj6v5/h/wTX612j+P/AJljg8KxieBPMklYgs552rjI4AxnPGOM8nOOd4wVPSP3nJOpKr8XTojvba7W/gt5kBVZV3gHqPlzzjvzXQupy9Uhl+/lxTMP4Yz/ImkM5iz/eRKx/hAx+Of/r/AJ1XQNmVJJCzt7Nj8sVBSP/Z')",
+
+    "3F":
+        "url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEAYABgAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsugAoAKACgA6UAcdq/jay0mTysSTFThjGo2p9WJAz7DNcE8VCDtFOXe233nbDDSmrtqPa+/wBx5z4k+NdtpEoW2jEqDG4HIY57gjIx27n2rB4mUn+7SS89zshg1b33Z+Wx2fgr4kaf4yUpDmGdesbEHPrtPfHcEA1008QpvkkuWX4P0OSthpUlzLWPft6noldpwhQAUAFABSAKYBQAUAFAHF+Lda+xR/Zojh3Byc4woBJJPZQPvN0HTklVby8RUf8ACj8/8v8AM76FP7b+X+Z4vb29zqbNuBWJh82R0B5G4NkK7DlU6xx4aUs7BR5bdtEeslbV79P8zlNS8Gz3zSSxJmJcCNSTzg8nnntxgDr0HZWa23O6LSSUvmbOg+Hjp2y8sR5VxEwLdt4HVJAOjj+FxjI4IHOUrnNUdnaWz/q//APpPRNSF/CpP3iM+/uD7g8H8692hU5lyS3W3mv80fPVafI7rb8jbrtOYKACgAoAKACgAoAQnaM+lJuyuNdjx7xBJ9omcsQASdxPOI02swH/AF0do42A5OBgZr5qUrtvue/ThZJLp+f/AANWadhYxwwquMF+SO/PJJ9WY9ew4UYAxTilo/u/rzNle7fRf1+BqSW6BcAYxWjikNSdzhNZifS5v7TgGUTHnx9mjyNxx/eUcggZ4rLzW6N+XmXI+u3kzrNCu0jkDQn93J+8X0wfvD+vv1710U5crTXTX/M8qrDdP0/yPSQcjNe6tdTxttBaYBQAUAFABQAUARTfcbHoayqfBL0ZcfiXqeMarJFZuk906pHl2AYnDOskuxRgMSSSGIAP+rXA4r5pRcnb+tz6WDsnb7+yaV/8vmdBomtWmrQCa2ZTlA/BJGD0IOFJBxxkAn0FditF8r0aRm02k46xv0OQvdT1W3vRHaxrcxuX8xpWlDjAGzChRGqMSQNmcBctliTWitZtsv4Wko6d7r/gu/qdVcxeZblHGNy4YduR057VyystYnTDVnH+Erj7NO+lHO+2G9Ce6Z4x6jBVf+AkURdjLEwXxrZ6M97tm3RKemVH8q+gpu8U/JHy8tJNeZNWhAUAFABQAUAFACMMgj1FJq6a7jWmp5Tq+iR380aT5/0aSSRNpKkE42kFSCMb3HBr5ptwdl0bPpaTTi2+qX63/JDtL0wWUknlII1Cqo9Nozj6980R5pTbfY3bjGKiu+yNuCNHwwx+GCPwIroSMJNxuVdUHylRwazqG1DueY+F7wanrU92kQiWGR7POOX8hirOT/ECwwp7Abe2SnHl5fRP79RVJuUZQeyk7fl9x9HQjCKOnA/lX0ENIr0R8tLd+rJKskKACgAoAKACgAoA47XLZo7mGaLu21h2KkEn8euPevCxMOWacep7GHneDi+hkXMshw9uqycdS+3GfQbWyfyrkT1vc9aCW03b5X/UsWzzyDc5RF9FBJz7sePyH49q6bq2hnNRi7Ru/N7fJFe8cuGx1FYydzWC5EcB4WaOzXzRwsk0jk+u6Q/N+PzE/UetK9jKqtWv611PoSJgyKw6EAj8q+ki7xTW1kfLtWbXmPqiQoAKACgAoAKACgDJ1OIPtfum4j8q87Ex+GXVX/I7KDtePR2/M8q1TV10gRGPBMsypg5xh2K/QfNgD1J714lrLRbfkfQ09XZuytp6lmXxNDDb+ZcstuBxtzkk+3/6q059NdDSNJ81optktqbvVYStrC8Ebg4nnXyxz3SM4kc9xkIp/v10QozqK9uVd3p9y3MKtenRdnJSkvsx1+97L8X5HKX1n/Z0iWcX3U2oueOhwfxOT+Nc848j5V6CjP2i5311PaPDV8t7ZIQclBtP9K9rCz54cvWOn+R4OIhyTfZnQV3HIFABQAUAFABQBm3t79nU7MZHf/Adz+lc858ukfvNYx7nJ2usPqolViAoZ4kI5+6vzP26k8D2rypTlVlyN919+7PQjBUlzpdn/wAA8I8ZXM91frZQKVsrCVJAwOfNlVcZc9T5bHgdN+5j/DjOrJU06NPSK0fme3hqSklWqfG72XZP/gfobPha0fxBq6XEiZtrQ+Y+77u4A+WPcl8HHopya58LB1aqk17sdX+n4muMqLDUHBP356K29uv4aerPejKdpJ4OCce2O/5Htn86+mbsfHHketxFpRO33S2PTqc8fQdceorwKi+15nuUnZcvkdR4aN1ZZkix5efuk4DKSfbhuMg9OcH1ralGcJc9Pbz2a/rqc1WUZLlnv3XRnpFpfpc8AFG9D/T/ACK9eM77qzPMceXbVF6tTMKAEZggJPAHJoAoXZk+zvIpMbBSVx1GOec9yOuen15MSuk2hrc4htYvUzmViD04T/4muJzl3N+Vdjntb1i5gsp5Vc7kjcj5U4O04P3e3BrJyZolqY0d3/YcN1DE7O7PH9nDbdyJNawTSN8qrnbJI5BxnLKucCprQjQfNDRuNl63d391vvO/D81dpT+GLu/TSyOItoppmFuoLu52gDklmP8AU15DTl7q3eh9HJxgud6JavySPedG0eLRbJbSPHmfekb+9Icbj/ujhQP7mD1zX0dGkqMFBb7t92fH4is8RUc3ttFdl/WvqXrjMMRXPJ4HrnjP5DH1I96qbsjGK19Dmr7TzdRBEX7vQ+pxhf8Avo/19a4ZQ5kklov6R1xnytt/13Omhg8pQi9FAHHtgfrx/wCOg967lGysjjbu7kgVoWDrwRyP8+/6j0p2tsI6eCUTIHHGf0Pcfga3RlsS0xDHjD4z2Ocdsjpn1x1Hvg9QKAIrsZhcf7J/lUy2foNbnl0/yj/PrXms6TC1iLzNLvpWYIqW0xDHoCIyefYd/wAKz3fKddGHM25bJP7zlYLhLy4iL5826sLGRDjjP2NNw65H+rPOO3WujFUpSj7WPwxWvzf/AATTCVo037F7yldfcdB8PLNbm6nuzybUbU9nfdk/UKPyJrgwcOaTqP7Oi9X/AMA78wnyQjSX2tX6K1vvf5Hq4bb93lug9Aef/r/8B46ivabtoj5xIYYCzZIJ2jv656fhn86z5bvXoVe2xa+z5KrjCg5x69x9e9acuy7EXsSFOcjgD/P9f1/2gQwKtxKEUg9R6fXt+I749KzlONPd/I1hTlU+FfPoaWjXK3MJKgja7Ag+vU9PrVU5qavHuRUg6UuWXY1q2MQoArXsixQOzHACn9RWc5KMW5bFRTk0o7nmV8PL/CvPeh0HOeONFvNW8N3OlaaoN1cqgyzBFwXQyAnk8xhlHHoDWEKijJuXR/kepCLULRtdrb1/4Bzlh4f1SC406X7M2210+3gmbdGAJYop42ABYMwO+PDAY6+lehKvCVKVNXu0raehyQw841Yzdkoyd9eh2Xw+t30iyaO7UpdSyM8kfG4HcwAyCRwoByDjnjrWGGj7KnZ7vU1x0/a1ny/DFJL5L/NnosQLcuduey8YHfn3wSffHrXatd9Dy3psSRsqPgdv8QD/AI/jVJWEXOn+fqP8KYjNvLsQjaOp6D19T9B/PjjkVz1aipLz6HTRpOq7dFv/AF5lH745ryb82r3PYSULJbIs+Hn8ueaDsQHA+nyn+Yrswrs5R+ZxYtaRn6r9f8zrK9Q8kKAOF8bawtjbGIHBIyf8K8LHVrNUY+r/AER7eBoczdR+i/UymZLxY5D92RVcD1BAI/OnOqo6Lcwp0XLV6JM1I9xGT35rlin1PSslsWLguY+G2NjjaM/QHg/0+tdyvZdPQwSV3ZX16/8ADmdpdsq3DuDuLNyW6jjucn+L9K7oR0TPOrP3mttf6+XY6tAD0/z0z+hx+FdBxjFjKtk+n65/+tTAmJA4/wA4NAHDXRePUpFkOV2J5Y9FO7I6n+LPPHGB/DXjYr412se3hbcjS3vqa8R4rlidMkFhL5GoJngSKyfpuH6riuqg+Wol3ujlxEb0n5NP9P1O4r2jwyOVxEpY8ADNROShFyfRFRXM1FHneo29jLIJpENxODnLsxXPumdhx2BUgcd+a+Ym4X5km5PW7/y2Po6bqJcl1GG1kl+e4RKMNdXDLHGgLM7kKqgDJJJwAAOSTwBV04OerHKSgrIdp2v6Vqyk6feWl0E6mGeKTH12McV2Om47qxzKalsM1DxBZWRihMgZ52EcYTncxcIfmHACsQGOcjpyeK6YU5SjeK0Sbb22J54xklJ6ykklvv5dC/YoUfCjqCT+JFd0bJK3Y82pfmd+7N+IgqSvctVmBLkdD7UCGOeDjpQMxdYss27XYA3xspzjnYCVYZ64G7dz6Vw4iHNFz7W+7r+Z34afLNQ6O6+fT8vxKNvKCBivIiew0Vr2Q27JOOsTq35HNaJ8slJdHchx5ouPdNHpCMHUMOhAI+hr6Fd0fNbaGZq5PlbRxuNcOK+BRXVnZh17zfZHIi3G6vHjDU9bmPBfj54muNPsYNCtMxjUi4lf/plHt3IMc/vC4Df7AZf4q9SlFR17HJNuVo9/yOS+Guh6ZoEMmq6lGbmKCNRsVVc75GADbXKqdo3dT1II6VhOfNJJ7XOqlG14wtdK+vl+p9C3fg+0vhbT2JNr9nPmxIFUR/M6ysGQdNzrklSOSTzmuiFWVOLhHWLTVn0v2Mp04SkpzVpRknePVp9V/TOv0rLuS/3sYOOmR1x7ZHGea6KMrrXpoceIilK666m1AnlfKOh/riuk4Syw5x7j/GgViu6dPxpFLQvvbLLbNCekiMp/4ECP60mrxce6f4iT5ZKS6O/3HlumXJKjPUcV8xs7H1rV0aN580ZHtWpjax3OhymaxgY9fLUfkMf0r36TvCL8j5uquWpJLu/xP//Z')",
+
+    "3M":
+        "url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEA8ADwAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsugAoAKACgAoAQkKMngD9KAOQm8faBbzC2e+g8wuseA4YBm6AsMqBzyc4HcjBqOZdzTkl2Opgu4bkZhdJB6owbocHoT0PB96q/YizRPTEFABQAUAFABQAUAFABQBj6/rlr4bsZtSvWCQ26FzkgFiBwi56sxwqjuSKlvlV2Uld2R8HeM/i9q/jO6lGnNLbWpBiWGJ3GY88ebhtm49WIxwdpyAK5ZStrLTyOyMOkFc8nudO1K1jFxIjeW/RgeeBn6jp0/wAKSqQbsnqW6U4rma0Oh0jXfEHhh11C1eeAHA8xSwBBwcHqCDgZBGDgA9KFKLdovUHTmleSdvQ+3fhL8TB48tnW6KLeQ4LKoCblJPzKu5jgcAnu2eAMCumMr6Pc45R5dVsex1oZBQAUAFABQAUAFABQB8hftQau6/YtMVsKQ8zIN4zn5VJPCN0cBQSVxk4DisJ7pHTT0i/U8W8B2q/Y1LAZLE+/WvIxEveZ7eFiuVHt8Gjw3UPlyoroy4IYAjB69a5EnutD17LZrQsXeiwvB5O0BdpXGO2OlS7xd0DSas1ofP3h+/fwl4vha3yEhvEG1e6swLJwD94EqPlIGQQMivepu8Yye58pViozlBbH6XqdwBHQjNdp54tABQAUAFABQAUAFAHyl+0zoqTwWl3GHEv73ceCm1PL46ZDHdxtI+70J5HLUlyOK73/AAsd1GDlCT/la09b/wCR4rb20ljbQC3eaLESErBCJWLNgknd3yeg9+teVpKTTSevV2PYinGKcW1p0Vz2Hw5rJkQ2s4LzQDLtgLkeuASM/Q4qG+V2PRg+Za3v6W/AxrjxLPc3pt7aaHC4/cyxujEEkfLJ905IxycZoaTjzSTS7mDlLm5YtempxVl4QPiDxtFaoNkSzQyTs2CACFkZf988qg55xn5cmu6i7RjFvd2R5FeDcpyivhXM/L+rn6AQQpbxrFEAqRqFVR0AAwAPoK9Q8YkoAKACgAoAKACgAoA85+KfhqbxPocltaoJJ4mEqKSBnaCGAJ4ztJwDjOMVhVjzR03TudNGag2ns1b8j580xY7SI+eAvljGDyQQMY+vFfPvRu59bStyj/DbC7kmuVChTxjjP4+h9j0p20NotXZ11ra2xyQgDdSOOvr6fjS0asOSS1Nj4ZeH2l1i91aWMrGXHlEqRuaNfK3ZIwcfPjGegNelh4Xab2irr1Z4GJqckJxjZOckn3st/wAUj6Ar1TwQoAKACgAoAKACgAoACMjFAHxt4rsG0y/u7FjtYuXibqCATg+/B5HqCK+fqR5Js+poT5opejI/D9tCYjJK5WXHzIsQJLD0PmLwe2eaVlY9eNN2TUYu/Xmat6qzOltDIBmQAOxwqj0PC5z3wRkcgHPJ61z2u7IwqS5E7/1+R9MaTZ/YLSK37xoAf97q3/jxNfTQjyRUeyPiqkueUpd2aFWZhQAUAFABQAUAFABQBHNMtvG0shwiKWY+gAyf0o2GlfRHxL408SR6xqEl1BkwtIXhYjBCtglWAzxnnqcGvDnJSk/XQ96CdOMbdEiXTtZt41U5G/8AlWPJbbY9ONfTVam7Y6oPPW5dT5UJDt2yFO4jn1xUK0Gku6/Mzleabemj/I+rtM1CPVbWK9hyI541kUMMMAwBwR6jODX0id1c+Sa5XbsXqYgoAKACgAoAKACgCGe4S2XfIQoH+eBQBwmpeKIb7dZxIwUnDMePXjAzwSB1P4VL3saJW1Pl680MaVdS2Jw6KxaJhyDExLJj6D5T/tKccYrwK8HTm103Xoz6Og1UgvuOhsdOgCAsi9OuK4nJnoKKXQ2NH05Nduzp0AzGgH2hh0VW/hz/AH2APHZck9s9eGoutO8vhW/+Rx4muqEGo/E9j6Js549MiWHGIowFUAfdA4H4V9Na2x8q9dTcimSZdyEEH0qBElABQAUAFABQBj3mrxQbo4iHlXt2B98fyH6UvQpLuc5e3DyRkzHLBdze391QO2T/ACrVLlQeSOQXTnk3AfLlWyf9pgf1GRUqN3cbdlY5yPwsI08pgHjiGEBGHj5J+RhglTn7rZH0IzUVqMays9+j6o2o1pUHeO3VdH/Xc5PUtH1BrsWFspUYBaQj5URjjLY7+gGSevTJHhvCSU/Z7re/S3+fke59bi4c60e1ut/8vM9Eh8OTeGVEujM37j5nRjn7QxwGaX1JA+X+5xtAHX6OnShSjyRXz8z5upUlUlzP7jtFvk1LT/tKZTzI2JB6oy5DA+6sCPwqrWJuOt7uSzRZUO35ASOxOMnP51m0UdXZ6pHcABvkY9M9D9D/AEqLWA1KQgoAKAOX17UWjItYThiNz44O3pgfzPtilvoWtNTm7AbHV+vmO/8A3yinn/vrn8a0ihNk8IN5ln4QtuPvj7o+gHP1q2LYuFQXXHAOf64/lQIq3G4lVjAMjsEGenPXPsBkn2FAExso7BSR8zk8uepPTp2A6AdulUtNyfJFtY9kaoernJP8/wBKdwsZ91EkNpOkQ2qVkbHu2ST+JNIexHcnbFKeyIrf+Of4igCVICETccEIBj8Bkn8amw7m/pF+xbyJDn+4T147Z+nSoatsB0VQA12CAseABk+wFAHmF5cfaJvtP96Vh9F2YA/LBoXfzNHpoPGU3xpyyL5S/wC9L8x/75Ubj7H3rdaGZqRxiGMKeAuBigCeUhXjA4BYf+gtQAkMebhW/uHP4lWX+tAiO/f5QPV/5ZP88UxFx+HA6bRj8T/n9aBlCdMxyR/30fH5dP1oAq3aea3lj7rPErfRSxIP1xj3FVYkuM3mEkfdXv64/wA/nSGVjKYSsi8FSCPwqWtCkegowcBh0IyPxrADA8T3Zs7CQrwZMRj/AIF1/wDHc1L2LjucTCo/dgjKTRK2P9sLg49G4/GtktF6CfUk0GQSGSQncPNYAn2CoPxO0A1SJLvmmWR0P8Dkf4UeQFuR/miz1L4/JGP9KYiyCY32gZbaWPbqQB/I0bAUrwkyRr03OB/49uP6J+tMRbmmWLdI/Cg8mnYBZULSRsoJX5gfTDDPP5UWApXY2zAkcSLjjg7l5H5jirJHSuEjCLwW+UAdvX8hUFFacYGBQGx2+lyeZaxN/sAflx/SudlGF4xhM9jsHXdn8lala+hcdGchYObnTxj78IPHqOv/AOr0rSO1uwSWouggNZMwODJLMwI7ESE/zFWtiNiTTZjcTTTEYBIHsWAIJ/lSW49jSs3+03WByluDk/7bcAfguSf94U+pJbs5DNPOT0QpH+IBY/8AoYpiIpSJL2NR0jGfxP8A9b+dAEmrJtt3Xp0/mKsnYt20m5B7AfyoAivwWiZgMsg3D8Af/rU0BhwSAnI6DjP+H9agpIZezHAA4yaBneaD/wAeMX0b/wBCaudjG62geEA92I/NGpx3GjzrRP3SlexYqfwqloUxzAadZThOkU8jLj0fD4/8frTZEENpIbHTVk6s43H6nn+tTshm7o8f2a0D9Xl+Zj7t/wDWprQTE02TCuT1lmc/lhefyoTtoK34E0HzXjt/d2j9BVdRF3VxmLHqQP61aJIrJs8DgAUAN1GTyraVvRT+vFIDnrY7SEHcbjUGhHcNumx2UfzpsR6VoYxZRf7p/ma52M//2Q==')",
+
+    "4F":
+        "url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEAYABgAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APseWQRKWPalsNI+bfiR8UjbF7OwO8jKkjIXPQjjk478j8Olc7bl6HSoqK8z5Umu7rVbshSZZpW5J9SecfSm2oK7Ek5uy3Og1DQbjTY0a4UjjgnoSecZ9eAR/gKyjVUtjolRcdzjLi4Tdh/QqT7HkZ+h6H8a6kziasZp1F4x5THIHQ91I/pj9KCR/wDaZf5X5yMZ9R6GlsUWFVlQNGeBgj+n+fXimLYspq5dcEcoSfqpzkf59qku5p2140brLGcEYx/n9Khq5onY+u/hT8RxfRppd8QJUGI2JA3qP4f95R09V+maqLtoyJRvqj6DUgjI6GtjDYWgDyD4teMB4a0/yYmxcXOVHqqYO5vzwB2zwetYyfQ3gup8S6jqbXQO0/M3Vj2/z/nmhabFtnQfC/Tvtmo+ZjcsZxn1OeSf88VwYiVlyo78LC7cj6T8TaPFd2Dx7A+0BtuPvbSGx9eMA9a8+L5XdHqyimrWPjnxBpBinkSHJCkkL3xn9cenX869eFTRXPCqUrN8pxbAqcenH+fpXUcOxHkp16H9KYi9bXzRDYen/wBfNLYdy4LmN3DYxjjjv3pgakcqFQyHhc8H26VJaN7TtWeydJkJG0ghgeQRyKllpn3Z8MvFqeJNOVXb/SIcK49eMqw/2WHI9DkdquL6Gc1bVHplaGR8G/HzXJLnxBJa5xHbKqAZ9tzfqR+IFc9rts6NkkeGWk5llCE8UN8quOKu7H0P8LbL7HGz9GZj2/SvGryuz3cPHlR7o6vImAO1c6O1niHinwVJNc/abRcOT86ngEe3v3/OuiM7LlfyOSdK75l8zz7XfhvcuvnwJiT+Jex/Lv711069tJbHFUw19Y6M8xufD97aEpNE6FfUH/JrtVSPRnmujNdDHaBo+GBBFa3MGmtCLlaYiaOZoxwcUiloaNndEfIehqWil2PoD4OeJHsb+JA2FcFcE8Ngghfc/eKejHHORWfws23R9zWtwt1EkyHKuoYfjXStVc5WrOx+dnxrYXHiCW5Q5E6q2B/Dxwv12bSffNYRe5vJWt6Hk+nyBZ1zxzSmvddh09JI+rPAUe23EpIUdyT3rw5q7Po6StE9bTV7SJcPKikdQWApWsb3XcUXdvP9wqw9QQaW2g0r7DLqWG3jMjKCFGTxTv2BxtueVeJdes5v3McCSvgnJXOPQLjnJ9R0x710Rj8jinJbJHAp4LfXW3TLFbDtgc49+v45rf2ihornK6Dnq7I57XvhjNpi/aIHE0XO7aMFffHPFaxrJ6dTnnhnHXoeb3WjyoWIHyqCSfoOPqTW6qI5HSa+RkQkoR2rcw2O58I35s7qFwSAXOCPw6fiODWcjaHY+z/DvxFh0i0FvdKzkszoQOCjYPr/AHt/Hbp2pKXLoNw5vI+MfF2otfXDO53Ekkn1JOfwwNo4qI6Fz7HG6coluoxyAXAP9KuekW/IimveS8z6g0PR1mtQ107LEMhI1baOOrMRjkn8hXjuXK9Nz6KNPmWuxi6jb6TbNlJGUg9VZm5z3IBHWtFKXb8DNwhHrY6jw1fJAVEMgkVjgc/4d/8AOK55vraxvTVtmep6lYSPZFwDgrU2dro1b+yeF3t59lYiNN8u4KBjueB7knsB1/Wtkm9DkbS26HO6t4q1fw/N9nmgLEiNgR90CTOBlV25PI5LcgjJxXWqCS1ZxvEu/ux0On0bxBLdXL2N2vluOMggqfbIADfgAexXjNc9Sn7PVO5006vtdGmip4n8N/Z4mlVcKwPSiM9SZw0Z85zxMsjIONpKj65/w/nXsReh4MlZtGlZzgOuzjycf/XP/fX86Jdhx0Z9C6F4mhFnGtwodlyATngdfQ8biT+NYp20N3G+p88ajcebKT2BP+f1q0raGLfUNAi8zU7ZMdZl/nSqaQl6F0dakV5o+nfEGnXn2FbWxQlmABPQBe+e34d+nTNeHBrmvLY+lmpcvLDc4W78BSX8oaMyW6iNVfzMOS6nls56MD0BXBAxwMV6Xtope6uh5qws5O8n1PRNE8J+XdpMh2RqQSqjCgjvnPf0Ax6VxVJc2qVjvp0vZ2V7n0E0am1wemP6VVvcFf32jzDUvCaTsZYkU4JYcDIJ/I81kn95rypGE3headhvh3FSMHJGMfhwPYGtOaSFyR6JHaaP4TislMkqICecbcgfnms7N6saSTsir4qs4p7R4wB8qnAHtUrRjlGyPhrWSIruaNePmJ9xk817lP4UfMVNJNeZQ04eXMFPRwR/UfyrVmUTvbWSVIlVOwwfr0/lismuxumefTP831P/ANetUczL2hXAt9UtJeyzIT9NwBqaivCS8jWi+WpF+a/M/Qm1t4riNVYcED+VfORVz7NrlVywPDlrnfjpW/JbqczqdLEQEEVwtugxjk46Ae9ZdbGtrK6Op3II9pwAK7NFGxwWlzXRyl5fNYbp0CvCjANg8jPGcegJ5rm21R1rszattShuEDIRz9K1U0Zum76MgubxcVMpHRCHKcXrVyrRMo7gisluOex8S+JLRhfTuP4ZG4r26b0SPlKi96T8zIgGCjD1x/Ouh7HMtzurOcBPqSfzrM2R57dRMMkfX8O9UjJlOJmgkWTptYEfgQat6qwk7O5+iek34a3SQfxIpH0IBr5le7ofcJ8yT7ou3OsFF4NXdk8sV0OJvL+6VJLiFfmfAU56bc/pzzU2FsZkviO/eHYxw+Pfg9/T/GtEkZuVtkN0J9QvpPIuGzBnc3BGcdByTRZdCE3azOnmV9MkzESYz29KjY1THvfM460WK5rGVdM0kbE9AKa0MJs+VfFDK17cKhCkMcgjuRnNevSWibPnKztJpHJQlY8DduI6Y6D866/I49jbWZsDb0FQWmUUZWTD4DA/KfX1H4/rQIgnhjkiIQYYcj29R9PSi9mUldPufYXg26OoaPaTKc5t4wf95UCt+oNeDUXLOS82fVUZXpxa7I6Ka1eUAHpnms79DYyr3XrOzU2uQ8i8bARx/vE8L+P5VfKzSEefZ2t/Wxx1xq6K5Yqox0+b/wCsM/hVqPmbOlFdTcstdvYo/MtoPMUcZ2OB+DdP51agtxeyi9LSv5f8MbOjajea40gltXhiAwXfG0n/AGehP1xj3rOSscjXI+VmvNZiBQPasloBialMsEDduDVrcxm7I+OdZuDc6hcOpwPMI79uPQ+le7BcsUvI+YqO82/MwnUq/BA+lamZ0Fm2IxUgGvabNpFzLZzqUlgkZGU9mU4P8qFsDVnY59ZmU0WLWh9HfBbxEstnJpUrYkt2LoD3jc54/wB18g+mRXl4qHLJTWz/ADR7WCqXi6b3T09H/wAE+hbaQdGGQeleceqzE1Xw5au5ubZVimYfMwUZP+96/wA60TsbUpuk7pGGIrm3+UhHx32jP65qk0d31mPbU07e2uLxgZ2O0dEHAquboYPEP7Ct5nYwjyohGo2qKhs4He/M9zFun5OelQgvoeUeO9dj0yzkYHnBCj1Y8AfnXXShzNI4K8+SLPlYMUJdzy+Tn3Nez6Hz7IlXJz0oJNiFxGoWgD3j9oC2sG1RL+0KM1ynztGysjleAw2kkNjAbP3uCD1rJPV22N5RcVaSaa6PRnzdIhQ5AJ+nStUZbF7Rdcm0S7jvbfiSM8joGU/eU+xH5HB7VM4KacXsXTqOnJTjuj7L8K+LLbX7VLmBuCBuUn5kburDsR+o5HBr56pB03yyPqKdSNWKlH/hj0KNhcAEdDUI32LsemwHlxmtEkTfsWvs1vCPlAFVZLYm76mddTrEpIxgVmxHnOta2kCMSQMZqoxuzGUuU+XvHOrSajKS2RGmNi/UnJPvgfgCa9igktjw683J67HAmbcMGuu1jiEV+4oGdJDaGZA8Z4IH54GaQjofFEH3WTjd27V42GlZuL2P03PsNFqNaCSl1stzjUuQn3lwRwe//wBcfrXr27H5w9CvLarNl4sZ643D+RxVp20MmuppeHfEN54ZufNgPytgSRn7rgfyYdm7e44rKpTjVVn8n2N6VSVF80duq6H1N4T8fW+qRAxthhjfG3DIf6j0I4P6V4U6Uqb8u59DSrxqLTfsd8viEDvxUI6rorXPiHA4q7GfMctqXiJ3Uqp/KmomEp2OEvzJc8ufwrdabHG3c8d8ZIqSIo4PP49/8a76HU82tvY4rCqPU+ldhy7aCoN/SjYZ0VnOIYwpXPPXJH8qgDutWjElurf3QDXz9N2kftuYQU8O32jf8DzXUYgZ2CHA3HH4170XY/HakbLzIIkSH5mHmH0zgD6itDk2Kk7szbsbR2qkkS2zoPC169pepIDweCPUHt/Kuask42OilJxkmfT+mxi6jDISMjpXjPQ9tM0mshjntSuNmLdwhOAK1RiylJENhPoKZB4F4vm337AHCoMYxyPXj8BXp0VaNzy6r96xxxIzgcCuo5yeLchDL2qS9kaqI7jK7VHoSOP1qRHoV6+YiPSvn4aNH7hiXelKPk0ee3y8b/b+lexTfQ/LcTT5YqS6RII1E64yVPrxXVseDuMuIsgLnhfb8yaS0G+xFbEwSK6n7ppS1Vhp2d0fUvg29+0W8YI52jB/xrxpxs2j2oSukd64G2sUjVnO3SAk1qjMy79vs8JI64poh6I+XdYlM97I7dSxr2IK0Ujxpv3mzJJxmtSNieByvXpUsZaEgXgVIz//2Q==')",
+
+    "4M":
+        "url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEBLAEsAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsugAoAKACgAoAKADpQAUAFABQAUAFABQAUAFABQAUAHSgDzjxb8R7Lw45tIcXF5g4j3bUU/wC2wBPHUhQcDqVrKU7aLc1jBvV6I+fda+IuualmVLqaNSSAlsGhQY67W+VmA/vMTu7dK525dzoUYrZHHP4316yTcl5cICd2TM5Y4PfHr3BJz6daE33BpdjvvC/xq1mydBqai8t3IXLbUlzx9wqoyANxO9ecfeGc1qpNGLgumh9S6Drlr4is49Qsm3RSjPbKnurAE4Ydxn3HBBrdO+qMWraGvTEFABQAUAFABQAUAcZ411ubSbQRWYzdXTeXHjqox8z/AIZHPbOe2Kzm7KyLgrvU+atR0KTeYyDJLIwDSclsA5c/QnIA/ixzjknl29Tstf0MDWjHA4toshYwF8penXne5688sQCc98U7pByvoU7SNZztWBGB67Q3btu2sT79fyrCVSMd3Y3hRnLVLT7ind6XJbtvMTgKcrknH5DB69Pl49ahVo7XLeHklt9x3vwg8Xvo2omynyttdsqYznEhztfr2OQxxnaec4BHbGVtejPPlHddUfYVdRzBQAUAFABQAUAFAHjHxJkmj1Cz2cIyMinP8ZOQT+Q59AV/irjrNxXMuiOuglJ2fcbpnheFFzOzSu+dzZI4PXp+HsAAFArxOeUnq3+R7rjGC91LTYtS+DNKHCQqPqM8+vPX/PbirfZNolTb+IT+x7PS1IijUN645P6cVzy906Ytz9DidbVHU5AGc9un+RXNfU6UrHkekRImrRmHvMc44wM4+mdwOfY19BT/AIa9D52tbnlbufd0Odi7uu0Z+uOa9RbI8pklMQUAFABQAUAFAHj3jdU1rULe3iODayDzT3G0h8D0yCPrkHtXmV6ikpQW8dH8z1aFFw5Kktpar5HD658UF0CVreC1eZkyFZyUU4+8RwSyj2/SvOpwvrdfqejN2Wz/ACRt+EfHFx4oB82Dy3XkgBgAuMjlwCSc9uvXFRNuMuXdGkYLl5tjnPFnxCmsZWhs4xM8QYyIVdiADycp0AHUngdyKmEfbPrYuX7iNzh4PHKa63lvAYc4wytvAJ9e4B7ZonQ9nqn+g6dbn0t+pFoscOhayktz/wAe3nLI5xyqHGcdORz6dK7qdRcib6b2PPqUZSqOMN3sfaWn30GpW8d1asJIZVDIw6EH/OD717EZKcVKOzPFnB05OE1aSepcqzMKACgAoAKACgDzzWbUrqOQBsbDn1ztCj+R/KvDrrlqS80mfQUHzUYX+y2vv1Kc2iW7kuiYd8bmHBIHYnnpk/rjrXHyvpf8jpjO29vLqVbSyhsWK245GS2Dk5x371D00R0t8yvLyt06nBaFZRyXE6tgzOzeYPl3YycHBB45ORgisoNrRHTUWz/4Y0tS8OWNmDN5f7wjAYhRgdcAIFHXHUfjTm2u5ilfVW+R5L4jglaSNY8FZGCsDnPyg4I+gbv14reDtGw4RXPzdkfX3hXSP7B0m10/vbworf72Mv8A+PE19FTjyQUfL89T5GvP2tSU+jenpsvwOgrY5wpAFMAoAKACgDlPEsbIqzDoMA+x+Yj35z+leXi4tLnW1rHq4SS1pvfc86vb67nxAG8iLq7g846bV7ZPr2HbNeKm37rdke+uSHvWTl0Em+02cRfT5MZAVVZQ6D1PHz5Pf5seldSiktNDFy5n7yueXxW+oadffa765G4PnC4QAng4GM7T6En1rKUUtIrXubqT6vTtbY6DXdemmVUClsnGR05rlu5Oz6GukVoSeF9Jm1y+hWOMPHE8ckrHG1FBB5BOSTt4xk59OtdlGnKpKKjsmm/Q4qtWNGEm3ZtNR9T6d6V9OfJBQAYpAFMAoAKACgDl/GV/aaVpM95fSLBDCobe3TduAUccksTtGPXNYVYc8HH7jelL2c1LzPOY7mK9hCMBIrENzggrkH8Qa+Y2+R9OnZ3Ri6h4dtkZpImuISxOBFcSogz/AHVyQPoBgdgK6VLyX9fI6IyWzSfnrf8ANL8Dlh4atll3y+c6q2cyzyv83rgttA+ozWEpvZJL5IqVn0t5Xb/NkXiTVk84JDjESnP+8R/h0qFG5knZHofwa1KyuxewRyhr2JovNi6FYimUYf3gzMwOPukDOMjPu4WHKnLvt6I+fxk+aSiui/F/8A9zr0jzAoAKACgAoAhuLmK0QyzukUa8l3YKo+rMQB+JoA8k8RfHHwzoGY4pzqE4yAloA6595SVix6lWcj0pXsOx8nfE/wCKl94/zCV+yWEQJS3Vi2WPG+Rtq72wTtBAVR0GSWMNlJWPUvD99Lp+k2cyfvIkhjUtydhVQp3Yz8uVOT2PtXzs178vVn0sV7kWuyO4/wCE3s4YB9pyin+LBKH6OAV/DOR3AoV9kjRNJ3uefeJPHkN0nl2fPPXsPQk/0HNSqbbvLRFOaS93V/gcAuovdD5jiNeWY9z3Of8AOBWjio7b9iY3lvt1ZxOieOLvwr4hbW9NI4fYyHOyWLCqY3/2WCgg9VYKw5Ar2aScYJPdHz9eSlOTW1z9CPBnj/SfG9olxp8yCYrmS2ZlE0TdwyZyVz91wNrDng5A6UzktY7aqEFAHzz4g/aL0TTsx6XFNfyDgMf3EX1ywMh9T+7H1FK9h2PFNc/aD8SanuW0aGwjPaGMM+O3zybzk+qhcUrjseQ6x4k1LWm8zULqe6bPHmyu4B74DEhQOwAA7ipHsZMRwMnv06dKAI5f9W2ehHHX6+w/Sh7DR6v4N8Zt4cxFdKZ7OQAso5KEjG5c/r0z7V5VWlz6x0Z6VGu6XuvWP5HbXmp6FqAM1jei1LZyoYxkH3VxsJ9x+Zrj5KkdHG6+89L2tKWqly/h/wAA5G6s9Mt1+03Woxzd/LVvMf6YTPP1wK0XtNowt+AuajHWc7+W/wCRwmsaq18DHbgxWy9B0LfX6+n8666dLl+LWR59bEe092C5Yfi/U41lCnA4/T/EfnXo2toeYTw3Etm6ywO0UifMrI21gQexU5B57YpiPavCHx58ReHCI7uT+07cHaUuSTIAehWfmTP+/vGO1PYVj33T/wBpPQJ4Ve6t7yCU/eRFjlUH2fzEJH1RT7U7isfDxY9/p/j/AIUigzgfr/QD+tAEbDcQB9B9O5pAWnIUhQcYHqf8M1QivLyp7ZBH4/5/rSGbtm5MUfcFR+HauNmw94426qD+ApAReUicqoGKYGbfTkYQYA6n6f8A662gupD7GYfl5xj8x/iK1IBsAj6Hv/8AWFMBmcA/gf6f1oAmSYpkD1NAE+OcenH+P5dKYgY45H+fT8hzQAAZGM49xweOT+tACru6Mck8HPr2/wAPzoAMb+P738x/j/WkBraS26BR/dJH5HP9a5JbmyLpTBqRkT/KD+H9aYtjm7l90h9B/nH+feuqKsjNkJIXrxjk9fy4qhDdzu2SNoGQOeelAABn8v5GgBCKYi6Bj27f1P8AhQAH/wCv/QD+tMQnQ4/D8f8A9dIY48/j/Mf4/wBaAFHJyO/I+vf/AD9KANHR2wrL6Ma5JbmqNWTioKM26l2ISOvb8q0itSWc6D3/AC9zXSZi4wMnkfzP+f8APNACockDuG5/HFAAv9D/ACP+NMQ00AXSOQPoPz5P+FMQgPf8f6D8qBjW9B9P6n9aQDxyM9Mjd+I6/wBf0oAcvtx0Ye3+f6UAW9LO2R1HrmuaW5ojUkPNZlGLqDnCoOAck/hmt4LqQzKXnpxnge3+c1qSEjbF47HA+p70APjUR8DsRTEOAwQPcj+VAEZHT/PegZ//2Q==')",
+
+    "5F":
+        "url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEBXgFeAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsugAoAKACgAoA4nxx40t/Bdn9olAeaQ7Y4ycDPdm77R7AkngdyOarV9ktFeT2X6+h00aTqvtFbs+bp/iRqfiuRo1uHiiXqsYMcaj0LLtJ9tzH8q8mpVqfbduyWn9fM9mnRpx+BXfd6/wBfIqLcwL964Mhz82Jc4J9Vy2fxJ+lc3M+qOjl7HS2HxEufCEuxF+1QleYzJjnHBA52477Rz713Uqko7bdmcVWlGe+j7o9h8D/Eq18XsbZ4za3SjIQtuVx3KNgHI7qRmvQp1lN8r0fTzPNqUHTXMtV+R6ZXUcgUAFABQAUAFABQBheJddh8NafNqE+NsKkgHjc38I/Pr7ZrKpP2ceb7l3ZrTg6klFfPyR+eniHxPf8AjXUSbh2k8x/lGcADtj0QDoAOlea/dTqTd5f1oj2YpaU4K0fL82aE+nX74tdPjkeBAPMMQ6k9cEdcD359awjb4pfF5nTJNWjHb7hLbwzqDSZs4JZXI+dMEEAEHOTyGz064ODlhxWnNFqxnyyizX1W7kRN1xC9vMmyM7kweGB3EewGDz3HPrnHS66FyT0Z6DoUX2Z4dUsj86EMwHqOvHoR/TtXMp2em6ZUo6OLWjR9ZaXfpqVtHcx9JFBI9D3H4Gvo4SU4qS6nzc4unJwfQv1oZhQAUAFABQAdKAPlT9orxVH5EGkQM27ezygHAPACjrkgfMScYzgA9a8+pJTmor7N2+1+h6dCPJFzf2rJfqfLugMXuSU++5Ea47Bj8xH4DA+tY1FaKXzO2l8Tf3fqfZfg/TBbwLlQCQDXLFG82ek2tnGh3BQCeuBXRGKOOUnsY/ijw7baraSI6KWKnBwMg44qakbK63LpTadnsfN3ha4l0a/m0+bPkqW2+2ATgfQjj2rhmr8s1u9z0Hs121XofTXw+vlmieOM7o2HmLjoDwDj2YEEewr1MJLeHz/RniYqNrS+X6npFeoeYFABQAUAFAGdq119itJZx/yzRm/IE/0rKo+WLfZGkI80lHzPzT8dapPrGoz3k5JJcgZ7Adh9Bgegrgpd3u9T16nu6R0S0NDwvoF15cWoxRNKDgjaSoGWwPmHQ8Zzjj3rOc05OGyTOqlHlipvVtbbHvnhvxFf2Wx7oOIDJ5REyhXBBC5RwAJU5ByVBwc5ODglHlXMhL3m42a9T2m/1c6TAJ3QuMZOGVQB6kuQAPxoTfRHPyqTtexn2fiuHW4WEaquVOCsqOD2yNp5/DNOe1noVGk4tSTuj5i8VB9B1m7lJ6rmFe5eVMcD/ZPzH2464zxpc3LHs7v5Hdeyb7pJfqe6/Ce5aC5WyP3ltY/MHo6qA2fcYAP0rpw7tUsuqf8Amedio/u79mj6Ar2jxAoAKACgAoAzNaRHsZ1k4QxPuzwANpyfyzWVRe5JeTNaek427o/Obxdpoj8yaP5oigdT7vJID+PygH0IxXm0nsezU6+h9A/CmJI9Jghkwf3SEgj1Ga5d5z/xM6rctOH+FfkdXqLwandJplrtbDqXx0XaQ2Prj+dOTu1BDiuVOcj0G/0+DUY/s84+UYAH0GP5Zrq8jhTcdUZNj4K0/TAGgj8somxSCRhQc468/jnjgcDFKSbWo1U5dI6d0j5M+J9wmn6+ZjufOCm456HG70xxxgYAwAOKzpwcotLTu+50Smocra1toux738EbeSSWW7kBO+FSrH/aIyPzz9BgdqrDr967dIv8zmxbtTS7y2+R9G17J4gUAFABQAUAYXii2e80m8t4iQ8lrOq465MbAY/GsqnwSt2ZrTdpxb7r8z4K1CJtKK2d6FnjuLeO7hw3UsvzRsexEincvqG/vZrykrJNfh5nubtq39I9P8By/bNMZ4H2P5IK+m5DtdTjkcgj6c1zOPJJr5/I6lNOMX8maXhKzur66+1+VLDKhIcxOrjqBuw20sGGMHGefY40VNt3i/mXOSjG0ml5O/57HsF7KIoxGzSi43BkLRsfmHXJRSApHBYnAz16VrKLivNanFHe6ty7OzWz/UdqGvfY9Kl1CYeWsUDSHdxghSQv1Y4A9SeKFJySM5QUJNLofDN8+oeNdQF3cqEBI4GQqKCSxGTkDk/oB2q+aNGLindlKMqslKSslsfc/wAKoootJVYcFUwm71Iznnvgnb6cZHWtMJqpPzRxYvSSR6dXpnmhQAUAFABQAEUAfFPxj8M22kapFND5ayXIlPkB9qRgYIYsSoX7xfn5cgrnGK8px5JNdH0XQ9mnPnit7rq+p5P4G8UT6Lem0J3W87H/AIC3cj2YAAj1AI75VaKcedaNfka0ZPm5Hs9vJo+rNC0tWUTWcuFf5gD2zg8EcjkDP0rCG2jO6VTl92SuvQ9AKrawkSsCzDGe547VpN2VmcF+Z+6rJdOh80fEjxdc67PLoll+7tLVSzEdZpUwcHtsjPG3nLjJ+6KhNJK/f8DRRau1vbQ8w0zzYzFDOxXzQrYxjg99o2g/U5x2BxUyS15VsbRb0uz7p+GtsLTR0QDADHHuMLz+ec++a7sIrU2+8n+h4+Ld6nyO/r0DgCgAoAKAK015BbDMjquPUj+XWldIdn0PNfHPjyPStPkk09mecDI2Juz7ckY+uG+neuepJ2tDc6aUFze/sfEnirWL7xHK1xebY3bAOWJOBkjJZmPc/d9a44tJ3erPUcWlZaIyfD2iz3M6yoCVjYYbGNxzk4+gH+c1NWaUeXq19xVGn73N0R9l+HtAP2eOVGaMMASAcDNcMINq6djoqVOVtNXL+vSyWUa29uSbmYFRI3JUY5Iz3xzUzbVord9SKa5ryekV0PliOM2WrSpIS3yyZzyTkH+eDWl/cXqjZrV27HReGNIh8Y3tpBACssICOx4THAJx1O0ZJHA4HQ1Si78i05n/AEzKTUFzv7K/Hsfb+lWK6baRWydIkVfqQOT+Ne5Tj7OCiuiPnZy55OXdmhWpmFAAeKAPKdY8XNeXT2drlYYfvOON5z6/3eD9eprK93ZbHQocqu9zCmO/DnuP89KLDM2a2W5BUjgr0+tTLRN9ky47peaPPNS+Fw1KYSRTGFP4lK7vy5FeNFuJ7rae6O70PwZZ6QqKu6Qx92xye5wBS5bu7E52VloenWChE2AbVHQVvFW0RxS3v1MXxFpL3QWe3bZJEDj8R2OCAfqCPUGsKlO7Uo7o6KU1FOEloz5kt/D1y+qTSqZJmboWUBi2G4wOOpwMcfSsXNSSgkdXLytyb3/A9K8D+GJ/CMkl9KQsxJConO3PXJ6Z5IIwRnPPFepSp7VJbpaI8mtUWtKO27PdbDxXuAF2oXPdev4jP8sfSvQvbc81x7HXQXMdwN0bBh/ntVX7GdrE9MRzvivVBpGmzXBOCQEX6ucZ/AZP4VMnZXLgrySPB932S581eYbuPaG7Buq5PbOazWjudPS3Y1bW5L2kDtwzhFIz/ETgj86ogu2v72cgdN+Kyn8MvRmkPiXqdYloO4ry7Hpc1i1FaBa0SM3I044wvTitEjNsivrOG8iMM670bqOR+owR+FKSUlZjhJwd46NGJBo9lpal7eNU2gnPJP5nJrBQjF+6jaVSUviZhzR/Lg85OT9Scn9TXrRXKkux5jd22VYQJ71i52xWqgdeN7c4PuBj8zVdfQnZHa6TekSBowQnTJ4yPpT2Ia6HfqcjI71oYnlvxNucxW9l2ldnYeoVdo/9CNZT6I3p6XZ5jYxmKNrC65jIIhcjpnomezDtQtNOho9dUU7LUyYrSJvvrPMX+sbOp/8AHyKNvvFbt2Ou0+TZKGPA3qf15/CpkrpryKWjXqejRYYV5qO16F6OPNaJGTY2VxGcDih6DWupAzZ4rNs0Whmak+xBGOrHJ+g5/nj9a1pRvL01M5ysvwMny920Hscn8P8AP616BwmLZqpkLPlndmk2/wC8TgkdOFAwT6nFAzq7UgY7Ypkno1scxL/uj+VUjJ7nivj+VbzVlt+vkQqOOzMS38iKylvY6YaRv3ZkIm2Mq43DuD9P6VQjzKKbzdUmQHiFtq/V/nb8emc9al72NFsei2MpjxnoeD9P/rf0/GmQelaReRTIELAOOBk9fp71yyhZ3WxupXVnudKg2VK0Ezl7+8C3Jiz0rknL3rHZCPu3J1mVF3ucAVSV9EQ/dMGW4MzmVuAeFHsOg/qfc16MIcit1OKcuZ6bInjO8FhxhT/L+lbGRz9jKsjF4xx6+uABn3HpQB0tsvzDPUYx/kUAemWv+qX/AHRVIxe589ajP9v1O4uRjDSttP8Asqdqn8gKy6tnX8KSLEhby8gcY/z/AJNWQeJRXBt9TuSflInBH/ftcVm9GarY9V0y5WZBzyPzq0Zs2Y32HCnb9B/kflTJNe31a5t1IEnQ4wTnHvhuAPx7fWocE+hV2ivLM0kn2h8l2759B6DisnRg3drX1Zqq00uVPT0Q3z3lOGYkY9e30/nWihGPwqxm5N7svQkEgZzjGMfXmtDMkv5zb2c8mcFYnIPvtOMfjijYDD0cbIx2PUCkM7GzXkUxHpNvxEv+6P5VSMWfNtjHs+Y855/X+prJHWzoVi+XaO4rQzPBNft/s2tTRr/GqSfQ/d/oKzkax2OksJ2gCk9yMY7UbAdbb3DSEA57fT+dURY3bR8LuKgiXBznBBG4EYwQVII9NpBPO7ikSyd8qEQdCp/CkBFynXn+tAF+N2jAXjI78/WgRmeJb4x2ixDI+0SpH9AMyH8xGR+NAIn0v7mR3Gfp0NIex2dmOR7f/roEejW/+rX/AHR/KrRi9z//2Q==')",
+
+    "5M":
+        "url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEBkAGQAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsugAoAKACgAoA8U+I/xitfBjmwskF3fqPnBJEcGRlfMIGWY5yEUg4+8R0OblbRFqPU+Utc+LniLXJBJPcMsQYlYocxRjP+4wLdON7Njn1rJtvcpabGj4d+LWp6YSkk8jk8qBIFIP8AwJHU57gg/Wo1jsaJp6Ox7Fofx+mVkGqW4aMnDSQkAj38s9fU4b6DFNVWtxumuh9L6bqNvq1tHeWjiWCZQyMvQg/yI6EdjxXSmmro5muV2ZeqhBQAUAFABQAUAFAHK+NPFMPg3SZ9VnG7ygBGmceZIxwiD8eTjnaGI6VLfKrjSu7Hwnonhm+8e3k2oXjtHDNM8ssuOZGY52R54wM8nkLwOTXBOooep6dHDurrtHv/AJHbn4W6fbqVDyH644/p+lc3t32PUWBikzidb+GohQvaSFmUEhSOp/Cto1k9GctTBWV4M4mCSS3CpLkMOD/ssp6+vvn3NatX2ODWGkj7A/Z811rqyudNc58lxMnoA+A4HoM7W9Mlq0pOzcPmvyZlVWimvR/mj6LrrOUKACgAoAKACgAoA8L/AGgmJ8OxxBQwkvIQSeqjbJyvoxOB/u7h3rKeiNIK7sZGjWkel2sVrEoCQxqgH0GMn3JyT6k14N225PqfZwgoRUI6WQtxOvzcdO31pHRys5yaRHba2B/OizFseV/EHw/HCi6hb/JJuw4H3WGMg+x7H1rroyveLPExlNK1SOj6np/7N4Z7m9k7CGMY9Cz5/I7a74K0r+X6o8Sb923n+h9ZV1HOFABQAUAFABQAUAebfFTTDqujCFV3stzbuPQYkAJPIOArHpmsaukWb0VecV5o+f8AXbDUtPkE1gjl3c75FnO5u/MeMKCeAOw5LV5alG1np8j6RwmpXivXVr8LF7XJLiK0BRm8xUBZQRuY4JwTg857gVlFpvU75Kah1+W5zllYvcujmB2Uqrmc3H7yNyeVCYAJXr2znANdDaS3XpY81QlzfC/Xm1+41/GSRpoziU5cYCkd26enGc8isKek1Y2rpuk79DT/AGfIru0v7lPLbyZIk81uirjc0fsSckDnoTx6enB+9pt1PnatNwiuZWvqvM+tK6zjCgAoAKACgAoAKAOJ8eTtb2CbVDB541Of4R8zZHv8uPxrmru0GduFV60fLX7keOahqDCRVhUYVdzE9yfuqDzjJ5J5wB7ivHSvsfYOaitTktV1Jd42ozZGGG7GPfhTnmtVT8yJV1ZRsyTTJT5GXxuU4yOOO2R9OtZtWdjWM01cqeNCsmmY7eYhPbjPb3qoaS+Rw13em/Vfmey/BpZLezmgeIgfunM+NocspHlgesaqCcf3snGRXo4f7T7s8nMWuenBfYppW83r+qPaK7TxAoAKACgAoAKACgDL1uw/tKyltwAWdTtz/fHK/TkDms5x5ouPdG1Kfs5xn0T19Ov4Hzbe2z3MgjWRoWj4dQBksp+6dw4HBBxhuuGFeGrxdmup9dFxlqn00at+F7r8DC1NPtGYolEcgHLgP2GM4aVlz+BFbXS1svxK1enNL5qH/wAiQ2Kra2zRO++Ukgnpx24HGfoBWTu2n0M9I3jFmklvb6kqW9x9wOpBJxgk4DEk4+XOeeOOeKa0f4feEkmrdtf/AAFXPp/Q9OttMtI4bQ74wi4k3BjJwPnLjhi3UkcE8969uMVFWR8hKTm3KTbfmbFWQFABQAUAFABQAUANd1iUu5CqoySTgAepPagD5a8T+LNM1bWbiPTkYGEDzXyAkjgkb0A7dmJPJ5IBznza8Ve66/mj3cJKUVrsrO3VJ3ONn1KNiBhlOTntx9ehrBQPQlW6Wf3WKzSjdlTgD+tD0MY73NnQbV9cnNnFnYq5mlH3UU8bQe8jcgf3Rlj0AOtGg60lfSKd2LE4qOFg1HWpJWS7J9WfUfhcx29sLKIBEt1VUUdFQDAH4Y/WvbqRULW0R8nCV733OmrA2CgAoAKACgAoAq3d9BYLvuHWMHgbjjJ9AOpP0ppN6ITaW55n4g8dabqFlNaQq04mUxIWAWN2wTgZO4gbSSduAOvXFbKnJa7GXOrpHyhpETWHiZ45DujuYZNu49SHU46DsD78ivLxUeSKfZnvYGXPVcW94v8ABp/5nd3+lQJ92MbmPXv+leepnvOit2jOl0eNImuJ2MNtECSdx8yZwOIox15YqGYc84XLdPRw9F1nzP4Fv/wDxsZXjhV7OH8R7eS7s9D0e/j0iyggkVI5vLTzI4QBukA+YDHGFYncxIGdxOAa+ghBQjZK3kfIzm5ybbv5l2PxHLHcK8EjQlRwkY3GT2Ix9zgDcQAcZAxSkk9HsCbjsen6R4waVVXUI/JZjgMCPzZQTtz7Ej6VySp9Y7eZ0qp0l+B3McqSjchDD1BBH6Vz7HR6D6ACgAoA5G/8TqrPBaKWkjYoXbhAwzu2922ngnAXOQCcGuiFJvV7HPKoo6I8z1iaa8fzp2MrszLGvQZb5BgDgDYM+g3E12KKirI5HJvVnm2yXVtZFpGdsFijBiBhQWUpxj1JAHsM9c02vsoE7O7/AK7nB+LLRrDVLF4xtKl8nPO7coYemeP1ryMUtLPqme5g3aakujR3tjqBvJWygXYCd7cIgxy7M3QZ49+gySM+HClKpJQp6v8AI+rqYmNKDnUdkvvfkjN1W5k1zZb6eDIkDoVlbCLM0TBsjqEhDcu5Gf4V3MTj62nD2dNUl0/F7/nufAVqntasqzVuZ7b2X/DHVabohC7ndmXH+sc5ZlznuMLGPTGZD8zDFbJcqtdu2l2czd3fbyOgt4IbddtuvMnOedxB/iZvvHPUAnOOM+s2LNCKRLcDnJ9gO/vxx9MD2osF7HQaXrj6bJuBBifG5fTHGcduOc/nWcoc2hcZ8ux6ja3Ud3Gs0RyrD/Irha5XZnandXRZpDKd9ci0hZ+4BwPU/wD1utaQjzNLoZzlypv7jxTULw6demVuIiSjk9vNO9HPsWaVM+qj1r1ErHmlmMlS8rgCOGPCepIXLt/JR9G9aoRh+HtLFtD9qYfvLyQzOe+P+WY+gGDj1peYHkuuRPq15Zqw/ePLcADoAFZ1Lsey4j3sfTJrzMVBySjFa3svmethJqm3KbtFK7+R0dtopvEVE3ixDA9cSXUn94+iH7sYJ+VSXwcljvRoqjHlW7+J9/Ty7HPiK8q8+Z/CvhXZf5vqdrb6ZHaJtwuDgEKMKxHCoo7RJ0Vf4jljnJrqOIm1e4S1hEbchiN4HUrkDYP99isePRjRsUOQ7VDSHJPXHQknoPUDoPXriiwhxYoenPr0A9h6/UUAWYZORxn0/wD1UhnV2UkkUeEYx5OSFJUZ9cA1i0nujZOysmenE4rzzuPLrrUGu7q+lYnEBWKMdgoXcSP99jkn2HpXpwjypL5s82cuZv7kcf4n2TrNaSjAuICEcdVIXeP++SuV9zjvW9rqxlexOkn2uyk2ngCWIHOSdjiIk/Uqx/GnsI2nVbdVReFj2qPYDH+FTsUcJcaNG9xuYfewnIzlDg+WMfwsw8yQjqoC1KSbv/X9dBt2Vl6nWC3CkdAFBA9v7zD0wDtX0yaA2M8zq85PAjtxz6buij/gI5PuaYHK3F017eFcZSOQKfYKvJH+8zeWPc56rRsI3HuJFb93ESwGAT8qqPXJ559EB9+aQDAJGOZGH0GaBWNC2BRsjlj3OePwxUt2LSOvtV8uJV6+5rO/c3SO01W/2IY4jk4O4jtjqPr61hShrzP5GlSdlyo85lXZNcqv3bpcj2kRDlT/ALylWX6Gu5KxxM828XarthjmU9YoiMdckKCP1INVeyYrXaNPwTA/2acxyedGbmXBPTDbXbG3jG5m6/X2p3VmTZpo3Zb8SlY9yszM2dp6bcZz6EYOcgY71D8i15mbpMdwJ5Z7po2EzDylUfNGv8eePQqeCxOD0AxWcVJN3a5dLd/Mt8tlZWlrc1L2/ZG2woHDKApzjLnJVefU89/fpVq3VkvyRyCWGozE25VY03nzn35IJw5x0JJGB0x70n5AvM6WKGG0yyKA78se5OSTk/Uk46c0h7D/ADN3OOfwoAcFWgCeHCsMVLLR3unaV9thDhgNp2/lg/1rnlLldreZ0RjdFK8m8oglSys2CV6jPfjnHrXYtDjZw2ra1DpTtI7Fo127wwIeMrwH5ADrggFlz8o5zyaq9ibdjmvC3h6PxXbjU9SDPZozJbwISvmssrEuzDB2BvkVQQCUYsduAeTmc/JHTZQ9TulsbTSIJRbwpBAqszpGu0OxGCeMZOOCT17+2qXRGbfU4LStJuP7Pl1C0SOL93MbS2RSeXZmLOSeS5JO1QOo5xwHstNhep1ui6eEs43mkM8jpuZsBBlvvAKvTBJGDk+tCvbVhotkS30sdm8DcKgdk+jOpCn65G3P+1TSFsV5CUlMinG8fMOxx0PsQOM9xgdhVbCKUkwzxzUhsV9u45HBoAtRsaWxSL8D/NnsP51O7t95Wx6h4aUy2m7oN7Y9wABn8Tmueq7S+R0U17vzOO1G/W3wrKTk444rvRxPQ5fVrCDWYijjHH8XzD64yOR60NDXkTeHJXtdNGkWhEctivlo7Dcnzs21tvBYr3UkBj/FzxlGCgrLz/zNHJyd35Grb2D20DQ3Esl0XJLvIRkluuAoCqo/hVQAB0qtiTP0cvZq2nE7hbHCN/0zOdoPuo49xg9adtBGju8s8DGevbPuff3/ADqUMzNStlu4JIDxvGQf7rA5U/gcGqEULSU3Fskjfexgn1I4J/GhiIJ0Abip2KsQhsUASKxJwOKl6FItQtuYJ0BP+f8A69V8OxO57nocPk2MKf7GfxJJP8686bvJnoQVopH/2Q==')",
+
+    "6F":
+        "url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEBLAEsAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsugAoAKACgDxn4h/F608IObCyUXl+PvKGxHF7Owzl/9gdP4ivGc3NJ2W5tGm2rvRHzPq/xn8TXkjEXbQKf4LdVQKPQHlvzY/Wlr1KaS0SLlj8evEljC0RlSckAB5o1Lp7jG0Nnod2fUc1ZnZdj0fwZ+0HLJOtt4jjRYpCALmFSNme8iZIK+pTBH900bCsumh9TwzJcIssTB0cBlZSCrKRkEEcEEcgiqI2JKACgAoAKACgAoAKAPKvip45PhGw8q1YLe3IIQ9TEnQyY/vZ+WMd2yeimsKk+X3Y7v8Dpo0+Z80vhX4vsfCGp6izM00hYmQk5PLuSeSSc9+p9fU81lGPRb/kdM5JavRdF1Zz7tLMMn5F6hR3HqT1/E1srLzZzvma7LsiONMsAM88d6tsxS1L6xyW7mF+NvT6HpSvdXQ7OLsz6z+BPxAbI8Nai/BBNm7H8Whyex5KDs2V/iUBJ2dipR0uv6Xc+pq1MAoAKACgAoAKAEJ2jJ4AoA+A/iX4gbxDrc0mcxK5RBnjaPlUD3OOfQBiPvGvOT5m5/d6HscvJFQ+/1/rT0ueU7BdzNKeY4ztUdNx6AD0BPT0GTXR8MbLdnNbnk5dFojSstKl1aXyoV3kkZI+7+fZF6Ad+vU1zylyf1/Wp1Rp8/wCv+Xojv7T4fJEN0rEv+g+grjlXlstEdscPFa2MXxJ4ZaNPNTiROhHcD1rWlVs7PYwrUE1eOjRz2i3sse2e3JjubVxIpHBBU5yv5Z+o9TXbL3X5M8+PvK3VdPzP0X8HeIo/FOk2+px4BmQeYo/hkX5ZF9sMDjPYg10xd0cclyuy26HTVRAUAFABQAUAYHim8NhpV1OOqwuB9WG0fqazqPli35GtNc04rzPzk1u5JmmZeTH+skh2gfgmce+fWuOCsku/5Lf8T0qktXbovxe34EWlabLetHZ24y7naD6d5HP0B2j6nHNVOaV5P+u3+YqdNu0V83+f+R9FaN4fg0KBYYVy+Pmc9Se5P9BXmzk5O56kYqKsuhelj2fMxCj8q57O+humkjA1OOG7hdEZWIHYg4zWivEzdnofPEYfS9R8p+hfH1DHFezdVKd10R4XK6VXlezf5n1p+z9rflte6FIfukXUI9iRHKPz8s49zV03f+v68jKtGz/r+t7n0zXQcgUAFABQAUAcL8SZPJ0C6PThP/Q1NYVfga9PzOmh/EXz/Jn56GNp4xK3WaR5z9AzIg/76GR9axfu/db/ADOmPvX9b/JbI6/wfPb2zSXRuRbSqRGmQhG0ZJzuHBdtzcEcD2rnkm9OVvrdJnXBxjrzJdLNrp/mz221u2mgEm4SHHJHGffHv2ribtod6VzktcvYIMz3e50j/g5K9QOV4XqQMtwMjkZq6cZS0jv/AF1M6so01ee3b/gFHTtXi1JljjtzFlQVYKoG1uQN0ZI6c7SffHSrqQlD4mn8yKc4z1imvVHm3j6wNjcxzjjJx+IOa6MO/igcuKjbln5nefDfWRpHimynBxHOxgf02z5Vf/Hijn0wK2p+795z1VzXt2ufeNdx5gUAFABQAUAcB8TRu0GcdiUH5uBWVT4fmjel8Xyf5Hw5pmkTX9uIUXMiSmEeuAAR+H+Oa56r0T9Tsor3mvQ9Tsvh9a2NkLaWISSPhpNxYKzDOCQCOmSB6A47muH20k9D0vYw6o7HTdOjsLYxqBlQBgdAOTge3Nc85X1e5vGNrKOi6GW+nxXeQQu4ZHIB4OMjnPBwKUZuOkdCpQT3VyxZ6YtkuMDA6Y4A+gHAobb1Y+VLRaHjfxVKhYV4BLE/kDxXZhvib8v1PPxnwJef5I4vTL908qdeHj2FT7rjH45QfnXW1Ztf1/WpxRd0n/Xb9PxP0r0DU01rTra/jORcQpJ+JUbh+DZH4V1xd0mefJcrcexr1RIUAFABQBw/xHtmufD92sYyyIsgH/XN1c/+Og1nP4Wa09JL5/kfIvgPUks/EFuJB+7ubgJ7K8qDGfTDHH1NcjV43/rQ9CMlGTX9a2PoLxYq6ZmUdGGR7H0rzZrkeh61N86t2OTsZlS1M02/e2XOQNuOwBznOOfu496zjHqzduzsjmftryzeZCjRhTyWPDDB4x9cHP1/E5bal3WxpnU968dTwRU3J2PFPirJ5j23YkucewCj+tenhd5PyR4uM0UV5tnm1rcGHah+6Cf1x/LrXfKPVbnmwlayex9/fAzVxqPh4W5Pz2crx49Ef94v4ZZgP92ppaJx7P8APUqstVLuvy0PZa3OYKACgAoAinhS4jaKQBkdSrA9CGGCPxBo8g21R8E+KPD9z4R1SWIAq1rJFcwt6hXbY4/EAcelc1re72/U7L399dfzR7zrOpQeLtFTU7FgQyAlepSQffRh2Kn8xhhkEGvLrRtp2PZw8r28zhf7Uu1gWC9jSDEahJQGZJMcfMvVCfbcM9hVKMWk9u3Y9CMGveiudX1Sa5l8uq+Zyl5dXrDbFMoZzj5YxtUe24ZJ9Bj3J4p8sVua8jlryckUt5PX5RT/AD0NmNk06BUlYvIoGWbGT7nGBmuJtXdjl2R4P4x1f+2NQyn+qgXYnvzlm/E/oBXtYePJG73ep8/ipc07LZaf5nPBNxA9v55rrZxI+ov2d9d+yajPpkjfLcxggf8ATSPlf++kLD6gCueOkvJr8V/TOmavDzT/AAf9I+xa6jjCgAoAKACgD50+N2mr50N6cZe2khI6fdfcD/4+aza1uaxelvM+VtC8YX3hC7L2xD28pxNbvny5NvGcfwuBgBxz2IYcVjOCmtTppzcJaH0ba65ZeMNOMtk2CuPNgbiSFsdwOqnsw4YehBA8yXNT06HuUatpc0dzkfsMdm/mOxZl6A8/l71zyk3od0qkprXbtscxqzz3TFSCiD14JqVpucrPH72IJOyj1r3qXwo+drL33YiDbGB/z7VoZWOs8HeI38OarBqC9IpASPVSef61k1bVbrU0T+y9nofpXYXkWoW8d1Ad0UyLIhHdWAI/nXSndXRytcrs+hapiCgAoAQsFGTwBSbtq9hpX0R8pfFrxL/aeoG0T5YrNNoyerMyMWI7A5UY68Z74rGM+e7W17I6JU/Z2i97XZ8v6xAUlyfXP6kf5+opvYI7nYeCY5YJWnjLL8wUkEjIPUcdeteVVeyPZpq2p9EaVZW98pZowJosbz/ez0YZ6ZxzjvXIdDuuuhz+uaMJNzoKSWo72Vj5l1iPyLmQHsa9yl8KPDrfGzEdsnNbHMTWrF5FQc5OMfWh6K4LVpI+yfAOv6/4cso7cRW13ajlYfNeOVAe0cjho/fawC5OQwyc8MK9nboerUw8JJNXT77/AIf8E+j9Ovk1GBLhAyBxko4wynurDpkHjIJU9VJBBr0U01dHjyi4PlfQu1RAUAVL5gkLE8AAk/Qc1zVnaNjel8asfnn4n1Np766ncnMsxUc5wA29/wAmKKPZailpBHTV1m/JHJagRcxI46jbn8QM/qprWWxjBao9j8C6aotgzDn7348AfrXiSd22e+tEkez6JZbIHlPBmIA/3VyM/iSahIJaadh15pm+Fuf4Tj8qvlJufD2sS+ZcSEdC7Y9xkgV7ENEl5HjVNZNmPmtjmNvw3ZG9vooh3cfpyayqvlizejG815an2XZJsjVemABXhs9tGpHez242I7KvoCapTlHRMlwi9Wke719GfNBQBl6xMtvayyN91I2Y/QAmuOvtY6KPxo/NbXZi08uexI/4EzEt+vf2FVBWSRrN6yaK1qpnwnUcL/49n+pqakrfia0o319D6S8JWRitFAGC2APq3A/Q5/CvG3/ruew9D1UgW6LEvRABV7EGXql01vZzyjqkUhH1CnH6072FY+DZ/mJPtXrx0PGl5FTGBitTA9W+F+mCe5a5b/ln0+prixD2id+HVk5H0pbuAuK849HYezc0DPoOvoz5gKAOD+I98dP0O6kU4LRlM+m/5T+hrhr7pHZQWrfZH516g5Mpzzlix/HgfpW0dgludJ4bsGvLuG1AwzsGPsOf61w1ZXTa9EelSjy2T/xP8T6t0GyVHEa/chHHux4z+A6Vwry6HUzpJoT1psSPIPHfiNpo5tF0zL3G3/SJF+7CmCSuf75AwQOg469KirWb2NeXlXM9NHb/AD/yPlua3MAKH+Hg/h1r1Yu7ueHKPKmimy7M+3+H/wBetzmPffhRbBbOWU93x+QH9a8zEP3reR6uHXuL1Z64rbTiuK512JN1MD6Nr6Q+YCgDzH4sLv0KcdAF3H8DXBX+KJ34f7Xofn7s8+529Pnx+XNXJ8sG/IuC5qiXS56V4Uj+z6tBMcFblZY0A6p5WOT9cHp6150n7vL21+89aMdHP5fJaH09okewgDvzWMdCJHJfEjxRNoaQ2FmNt1qDGOOU8LEMqC3c7vmGMDjr1ABuMb69EbU0vilsunf/AIBl2XhiHRNKkjB8yaZGMsp6uzDLEk889Oe3HrlPV3IlJyd2fM2txCKZlHTe/wCjNXoUv8jza2i+b/r8TnCu5gvqa63ojiSu0vM+hPh84tNOUDuzH9SK8StK838vyPcoxtBL1/M9GWTdzWKNSXfVEbH/2Q==')",
+
+    "6M":
+        "url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEBLAEsAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsugAoAKACgA6UAeOeMfjPpXht2tLFW1O8TIZImAijPTEk2CMg9VQOR0baadjaNOUvI8I1f42+LNQJW1Nvp6HoIohI4GT/FKXGfcKv0xRojoVE42fx54tZt51W63cnCttXt/CoC456YxxRdF+xt2+463QPjr4l0RgmoCPVYB13qI5QP9mSNQM/76PmjQylSt0+4+kfBvxa0LxkRbwSm1vT/AMu1xhHJ9I2zsk+inf3KCixzOLienUiAoAKACgAoAKAA8UAfO/j7xvc620mlaQxis1JSe4Q4aY9GSNuCsXUMw5k6AhM7pclD1PWoYb7c/uPDpdKFsNoXaPYY4Hb/AOvyfwzWfNc9HkUdhF0vJ+UfLjt2/DkdMenPvk1VyeWxDc6QGAyCM8cY69eeOvTpjH55SG4nPXWlmNuMgYPoP64/z0q7mTp9jOfT/Nwy/K6/MrDIIPUcjHIOMY56H6F7GTp83qfTfwY+KVxqMo8N69JvulH+i3D/AHpQoyYZCesiqMox+ZwCGywBa/NHl1KbgfS9I5woAKACgAoA4Xx7rTabZfZYDie7zGCDgrH0kYehwdqnsWz/AA0m+VXOzD0/aTu9lr/keS2+jJFGqqABivMlO7ufSpaaFeTw0JGzgH/D6UKpYGgPh3yo8AY/+v6Y5q/aEcplf2GWH3cn1546D2/z2quew+UxtS8OcFgDt49/qQP/ANdUqgcpyr6V83yjH5/55P1o5ylAxL+xk06VL63JingdZEYcFWUhlIPsR+mO9bQn0OarRTVz7t8J66niXSbXVE4+0xBmA/hkHyyL/wABcMB7Ct9j5qS5W4nRUEBQAUAFAHh/ieb+0dTeTqsR8pfYKSD+bbm/EVy1pW90+hwtPlgn1eoyPsB0FeY9T1krGlFGSKdiW0ifyuOaaVibroUfswjz/OmVoU7qAOpUjAqdijkrvT4wTjj0qXJo1UTk9bsFKbfUH/P5VvTkTKOlj2D4EXJbRJrNutneSKP911SQfmzMa9ZO6TPkcTHknY9tpnGFABQAyV/LRn/ugn8hmga7Hil1B5bbj1bn8+a86vpI+tor3Uh8CYri2OlmpCu2rRkyU9KvbYWxWk4o2GZtwCBipNEzn7iPByayZ0JnJaku9uenSqhoEkek/BaPyV1BfWSFvzRx/wCy17FN3ij5jHK04vyZ7jWp5AUAFAHnPiq7lkuhaqxjVUBXGQS5yTnBxjGB0/HtXJOT51Ha1j6PCUYrDus1dtta20S/4Opj6wGhUvGhlZBwgIBJ+pwKVVczOik7JI4K68W3mmDzJrBxGvXa24gDvkDHSslTT6o2bsupveH/ABvpmv8AyW8gWbvExAb8Ox/Ch0+QzT5tnc7DAqLFFWRVB9Knl7FJszpFXPUfnUuLRV7GJfDaM1k1Y3i+hx95GHy3oDUxetjaSsj0z4QRsFvpP4S8Kf8AAlVy36Ov517VNWij5bHP3oryZ7PWp5AUAFAHnHiVAmoIwGWkMSj2ycE/l/KuGorTVurR9Pg3fDuPSPO/wuc/q00nmMI8ZGetZVJNSaR1UorlTZwd8utiGV4nwwKeUIo0kOC48wuHKfdTJVBgsRgvWlNRkve3+4uomv4dvR3vtp97+44/RrG4vTFearBHDdtJjcqCKTcFViSq8EZJUElt20kbMgEqe4vclp2f+Q6SbTc42kle627Wue1WPmLBnOcDGa5UxNJM4DxFf3s8htrWXyjjBYdv5AfUkCrjKz2ubqC5bnmtvYQz3LQ3WszC4Q4MY/venMjZ5ByAK7G5JfBocCjeVlVu+ysjs7Sz1Cx2iG8S6tz1WQHJB67WG4g+351yScWrWszuimnqaF2RFFJJ/cRj+hrCC96xcnoX/Bni258K2yQTJGqTzmST5WLHftUBmBwMKFUYGAeua61XadklZHNLL1iU53fPbSzVlby6+Z9PqdwBHfmvRPjNtBaBBQBxniSy8y5t5+RtZenqrZ/rXPOPvRl2a/M9vB1LUqlPyb+9f8A5G8QC4b6muKr8bPYpfChjQEAhR1/z2qFoaaXMo2ZiJb19ST/OiT00Rpe+jLG/yLc84rNKyHa7tY42KDMwmIJZW3KckYPboevoTnFVB2d9n0NZLTl+y1ZobL4StLi4e9PmGSUHcrOXT5g4OEbKjiR8YAxuOMZrt9q0tb/pqcKpQi7qK6X+Wwy10GPTAQruV9Gbd+p5/PPFcEn1OxPSyQTR7oXCgFtp2g9MjkfXmiGicidOaMXtdXK+i2za3JbIFyzyIjjngh1JPPbGc+lOmrtLvb8z0ak1hY1L7Ri2vPRpfjY+sAMV7Z+YhQAUAVruNZImDDOBkexHIoNabcZK3p8meaXkYFwT68151ZWlc+oov3Uuw84xWSN0YVw5kYonAXqaT10Nlpqwu7aMQH5h93/P41fLZFRlrsclaXAhm8iQdc7T2I4/xrOKtozocbrmWx1SxDbmm1Y5tjEv/lBHSueRomZqRs2FXA6kk/565x14rde7FLqzJayb7HpXw98MCxH26QHoRFnqSfvyfj91fbPtXXRp299/L9WeVmWK9p+5j5OVulto/q/keqV2nzQUAFAENwP3Tgf3T/KmXHSS9Uea3/yyA+1cGIXU+mo7WIGmA4rhu+h1mBqNsLoYQlckZAJAOPXGD+tWnY3jJQ3Vyjf2bSQMkcjIQuAQQTx7sD/U1rccZLm1RnaZZtPsluiDJFwMDH4n36elZt2NpSUbxhs+507uI1wKm5ynJXc/mSY9KyWrNX7qPS/Dvg2C6t4ry5d/nG4xjAUjccc43cjk4P0Ir1o0k0mz56rjJU5Sp00t/i67fcemxxrCoRAFVQAAOAAOgFdO2iPEbbd3u9WPoEFABQBk6xrNro0Jlu2Cg8Kv8TE9lH9eg710UqM6ztTW276L1M5VI0rOT66Lq2cPeurgMvSuCqlKN0fUU7xdjmrq4lQ5hQSkdQW28exwa82Ojsegknu7GZ/al2uS1vgDspDH9dtdXIjrjRjLaS+ehRn18RcGF8t1yrcfhj+ppezXc6PqsrXVvvRRTW4i21I5Vf0CMQefXH86iUOVX6HNKnKO7X3mrPcMkfzHqM1xy8iImTYwveXCQoMvK6qB7k4rSlG7SJqyUIuT2SbPp22gW1iSFPuxqqj6KMV7ex8RJ8zcn1d/vJqCQoAKAMTXdch0O3M0vLYOxO7H+g9TXZh8PLES5Y6Lq+3/AATmrVY0I8z36I+RPGfi+51C+haZsmWeJFXsoaRQAB+NfWVVDAYafIre615ttbs8vCqWLrxc/wCZfdc9cS8ZUGfun9K/MYVPsvbp/Xmfp8qa3W6JeWG5OtZy91hHsVp3nQboxzirhUa0OiOhlNdXL5Vl/wA/lW7q23N+a2y/Eqx/uiWb7xrllNy0ZDdzHvb/AAcA8Cs0r6DSsrml4b8R23h6+gub1co7+Xnum5T+8A/2e/seOa9vAYd4mc4U94QcvndK3z1PCzOp7GlFvaU0n6Wbv+CPqCKRZkEkZDIwBUjkEHkEH0IrRpxdno10PnFrqh9IYUAce/jbTn3i1cz+WOWUHYD2G44yT/s5/CvVjgK2nOuS/R7/AHL9TheKpq/K72+77/8AI8U8T69JqcpaQ8DoOwHoK+uw1CNGKjFf13Pm69Z1Janhep201/q9r5ILCGZJmUddkbqWOPYHcfYGvHzltUlBdm38l/wT6XKIXnGXaS/M+kbdflH0r80R+jMXc1scj7h/8d/+tW697R7nPJW1RMbpWXtzTS5SosoTXUcdJ66Glzlr2/B+WMbnPAArPkNEzPhsnX97Ny3Ydh/if8j1pN20Rre5wHie5MmoQW6n7ivI34lVX+TV9lw/B+0qS6cq/M+Sz2aUKcPNv8l/mfT/AMJvERvbM6bO2ZLfmPPUxnt/wE/ofau3M8P7OftoLSW/k+/zPmcHV5o+ze629P8AgHr9fPHphQB8uBhp9uLdM8ck92Y9WP8AT0Ffo6XPLmf9I+JlLlXKjmL1yQTXdFWOK+pP4O04HVba+bBDmSMqR7HPtgjg18pmcr1HDtFfifbZcuWjzLfmf4WPb9Y0hNL2yRf6qQ4C91JGce6+nOR05618FXpKn70dr7dj7HDV3V9yXxJb91/mYhjrjPRMe4tUByMqfb/CtVNrR6+ocqe2hjy2PmfeZv8AP4U+fskXyW6jrTTo4uVAyep7/nUOTe5e2w+6hEaHHaoGjwiAnUdXvJX/AOWTJEo9AoJP5ls1+k5BBRp1J92l+f8AmfnWfVX7VQ6JW/r7z0PRtSm0SdLm2O10IP19j7Hoa+ixFKNWLhNaM+Vo1HTfNHdH1N4W8SL4itvN2GORQN4425P905zjjoRx6mvgcTh3hp8t7rp3+Z9XRq+1jzWsdRXCdB//2Q==')",
+
+    "7F":
+        "url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEAYABgAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsugAoAKACgAoAKAI/NQHbkZHbvTsxXHgg9KQxaACgAoAKACgAoAKACgAoAKAPNPHHxGtvCX7iNTPdEZK/wRjqN5Bzlh90AH3rOc1T336L/ADNYU3U20X9bHyN4h8f6ve37am1xIkmGCIrbFjQ/wgLjtxznPVia5fayk7p2ttY7VSjBWav3uZ1j8VdetdqG6lManoW3Dnk8nJ9OvH6muhVZR2d/U5/ZRfS3oeq6N8cNWtztlEU0Q+4HVi/qUaTeuCeisQe3XBpe2Unqkv6/roDoWXuts+ofDviK18R2qXdqwO4DcoOSjEcq3uK6LdY6pnJqnZ6NG/SGFABQAUAFABQAUAYfiTVxoOnT35wfITIBOMkkADOD1JHak2opyfQaTk1FdT441aafVP3zDMlwxkYnljnkbj+WAOOnpXgzqc0m2fR0aKjFJHneo6PI5dVydnBP+13/AC6VUZ2NpUb7HMDTpESTI+6cfz/wro51dHH7Jq6L1sZI8FeQAQR6gHBH16Y96TYlFo9p+FHiZ/Dmrojsfsl3tilB6KWP7qT22sQGPoW9BXTRnZ8r2f5nHXp6cy3X5H2uK7TzgoAKACgAoAKACgDy74tjzdHSDJUS3UQYDuihncf98qT9QKxq6Ql/XU2pfGjy2LRwpZ8DKLhR6HH+NfLSe76H1dPSKRjyaAkUXbIBZj6kk4pptHXoc1J4YBtJWA+Y5P6N/iK1c2nH+uqMnFbHKJpPlE8fxZH0IAb9dtdKl0OVwSY5GbTpVmTrbujj0MZbv/utj8K2g7NP+ro5Ksbprpt9596aFfjVLC3vFG0TxI+303KCR+B4969q99V11+8+dty+720+41aACgAoAKACgAoA8p+Jl1Ey2toxPmGZWxjgghh19dqucY6A+lclaS5XDrv8tV+Z2Uacv4lvdvb56M5iacpuaJC7E4A6c8/4V8+46JJdT6CGyMtt8xEUsToO/A5xjuK0VN9dEbKouhW1iZbKMRhMZHI9un8qc1qkkUtdWzzS6ScvvhikaMZJJRgPzI9/0rblaIbi9FuYxBlm2Y4ZWUD68gfrWi6epy1dE/Q+4PC9sbLTLe3brFEq/p29vSvdty2XZI+Yve782b1IAoAKACgAoAKAPPPGllFPPbu6hmzxnts3MCPf5iPoa8+ukpxfdNfdr+p62Gu6c10i0/nKy/Q5O+0CHU4tjmRUXkiN2TJ98dfociuKPuu66HoWurdzltN8HjS7ky28jBGcsykkdecYAC4B6YUYHA4rerU9oldJeisFKkqKdnJ37u6+V7sTxaZbi8igibyxt5IHfGAcf555qLWsdEV7rt3OT1Hwreo5uLe7nUE7ijEtGBjG0Bnbg9TxuyeCOlbynFrlUEvNX/zOSNKUZOTnJ+Ttb7kjK/s1pnRV5k3KOB1J7D6nioSurre+g38Si9Fu/Rbn2hZQm2gjiPVEVT/wFQP6V6p8493ba5aoEFABQAUAFABQBja1p5vohsxuQkjPHBHOODzxWFSHOlbo/wAOp00aiptp3s1079Dz37fHZxtvwCoyc+leSnZ2PoYxvYx7K8nut1wV/dHhEXAJGfvHPr2GelPfV7G8rRXKtzkPFF4pnQ26SBlPJK4xjoMngj6Vdl0HF20ND+0vPtMyjYwGD+XUUeQ9FqVPBWlnV9UiQHEcT+c/+7Hggf8AAmKr+J9K66cb2XZ3+48mvU9nzSXWPKvmfTtdx4QUAFABQAUAFABQBXurqGyjaa4dIYkGWeRgigepZiAPzppN6ITdtXoeGrqOmeJ4bhdPlS6hjlkiDpnGVOQOcHHQg9GBDKSpBrxK1P2U2n8vmfSYeqpwjJdNGQ2emvp7sJ5Z3tioMe1zmIgcqQCNwzgg8n2NONmtv69D0Lt2dNQv1i1ZvzUtV8nbXqcp4sMUMe+3nnd23bFZSoznC5Lge2QATitLJb/kUvayulSjG1rtyVvPb9CnaWMkVkjXkpeaQb3I+VUjXrwMDLHgcetZbvTYyk0tEfQXgCwistIheJkc3GZmZCGHz/dXcuR8qBVPP3ga9eEXCKi9GfLVpqpNyW2y+R2tWYBQAUAFAB0oA8c8V/HHw54VneyLyXtzESrpbBWRGHBV5WZUBB4YJvKnggHitlTfXT8zJzS21PA/En7ROu6kWj0mOLTYjwGAE02PXe4EY/CLI/vVsqcY+Znzt+XoeJ6xr2pa6fN1G4munJ6yyM559ASQo9FUAVpsrIjqezfA6B0sL2ZeC13hfcLGv891fPYp3nb+tz6HCpxhfu/0R7zHewXKFGYI44Kn/PNcaVvI9SLvschra20Y3MR8vTpWlnsb8ztq3954T8SfGU1tbrY2mU+0Aq0ncIuBtX/ez17c455HXRgm7voeRiarilGP2r6+R4xp+vahpf8Ax5XE1vnr5Ujp/wCgkV66m9jwXFb2Nu38ceIIJPOi1C8WQfxCeXP57ufxrTme36EcqWx634a/aF8TaIUW/ePUoAw3LMoEm3uFlTad2OhcPz2IpOMXuremn4bBdrZ/efdmhazb+IbCDU7Nt0F1GsiHuNw5U46MpyrDswIrka5XY3Turom1PVbTRYGu7+aO2gTq8jBVBPQZPUnsBknsKaTk7RQNqOrPj34o/HaXV9+meHXe3tOVkuQSksw6EJ/FHGfUYdu5UZU9kYKnq9Zfgv8AgnM5OWi0X4s+ZGnTtlieef1685/rTYJWGW7l5CDwFHT3P/1s0LcGrF93xgds9/8A61USfSvwc2x6M7L1a4lJ+o2j/wBBAr5vEK1Vn0eHf7qJ6PdwwXUZ3Lk/kQf51gvI6DzbU7BI3OCdoyeST/M1uhnzb45vxqGolY+UgHlrj1H3j+fH4V6NOHLFd3qeRXnzTsto6f5nNRx7QCep4A/rXYlY4GzREWB0zWtjO5WmfccjoOn0/wA8VLLR9c/BL4oWfh7w9/Z1+/zQ3MvlgnpG6xv3/wBtnP40nT59V6E83Jp8zT/aX19MWWjQt+9XdcyLn5dp/dx59+JD7DnvRSVouXd2Xy3Cb1S7fqfI7hXBYcEdR/n+dakbGbKphIYcqeuPrWb016Gi7D7WQBjyASR3x27dvXiiLQ2jV38Y6fp+laGR7X8INTZIrqzB4EokX/gShW/9BFeLio2kpeR7eFd4OPZnsM8/lZ3DOfQ4xXAj0DzbxZqiafbyTDhmGEB6kngfhnFdUI8zUUY1J8kW+x83SwiWRie/f1Oecn3Ne5yrbyPnXLr5mfMwilA7IBx/n2qG7O3YpLQvbwckcbVH5nr+lakbFJyAMDnHeoZaEhmKLj3oTstAaPoj4/zGfxZMnH7qG3UewMauc++XP4YqoaRj8/zZnL4n/XRHg0paL5uo/wAnnHb0PSqegIoSyBWDDlT978eo/rWTdvQ1SI/LMb57dPz6VNuVj6GhDIWHoP5Z/wDr1qjN6Hq3wqcjUZ4VOC0aP/3yxB/9CHNedi1ometgt5LyTPoqSwknAVhhu/PH4V4uqPaaR4j8U1Wzkhtcgu2WIz91VwAMdskk/wDAa9TBpybm9lovV/1+J5GNkoxUFu3d+i/r8DxnAGT/AJ9v8a9k8Q5uR98hPqa5L3fzOi1lYtRNvznnk9T9O3etlqZvQSVt5PoP8/nQ2NaFbOKhFH0J8d5P+KwvPZbccf8AXvFW0NIx9P1Zg936/oeNyvxn1/wqwWhizbVPTH0rB2RsiVTuQH2H+FPpcWzsSQNjj1/z/OmhM9A+Hd59l1pDnG+J1/VW/wDZa5cSrw+Z3YR8s/kz6Z1rxVFpkCRKBJdT8RL/AHcdXPsv6nA6ZrzKVL2rs/hW/wDkepVqezWm72PmXxZePdag7ysXcABifU5Y/Tg4r3KcVBWirI+fqycpXe5xt5J5MZPduPz/APrfrmqm7IzitTnO9cmx0FmEErxwO5Jx+v8AhWsdtCHoxG44Bzj8qfkCGipGfQHx4BXxhebTji3/APSeL/CuiPwx9P1Zi936nikzlDjp34/MUPQaRlTOc+lc8mapE0bfusfT+pq4/CS9xUbn9aaY2jc0G7e11K2kjO0+Yqn6N8rD8QampHmXKy6b5JKSPSb7XHmvZrpgcWcOAvqxJxj2xjPqR0qKcPZxt82dFSfPK/bY8ye8kuD5shy8hLE/U5/lgfhXTHY4ZbmTfzGRgvYc/nWFR62LirGcetYlloYVQa3WiIE6jPQD86X5D2GikM//2Q==')",
+
+    "7M":
+        "url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEASABIAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsugAoAKAAnFAHA+M/H9j4Ot2lmO+UFVCAjgsR8xGQxVQwZtgJxgHBYVlOagrmsKbm7bHgT/tKXNkzvNZLcQk/u9u63cDnlwWuB83BUKeO571iqrbskjd0oxW7+4ntP2pLV5AJtPkCYy4SQFxzjIyACMEcHb9avnkuiM+SO12vke7+FPiPo3i+NHsLiPe4/1LMFlU+jI2D+IyD2JHNWpp6bPsyHTcdVqu6O9BrUyCgAoAKACgAoAKADpQB4N8RPi5Bpcdxpuhs02oxAKZVUGGJurqHOQ0irknAKp3O4EDirVlTVk9e/b/gnbRoOo7taLofIN5r8l9LJeXU5nm8pkCOSdpyBvYvgsdzFsKMBcgnaDXDZytdO17t3/qx3XULpNXtZJLRf15HHzreyIWffIxKhco20buSFBGMnIG1cnkgdMHrXKttF6nK+b5+glwWuYDmBIrqArvaFdg8o/wDPVR8u5XwAwAYlirbjtwLR6SvDW19dfJktWT0tLrbsS2WrS2iECRkI5BP3kPQ56cHsRwPQE5qZQu9F/Xl5mkZ2W9v66/5n018HviTPp8iWuq3LtbSfKDK25Rj7pUklkbPGc7JBgHDbTShNwlq/d2a/r+u5U6cZx0Xvbpn2Hb3Ed0gkhYOh6EdD2r0k76o8tpx0ZNTEFABQAUAFAHJeN7w2Wj3Do5iZ1ESsASQZiIsqq/MzAOWULySBis56Rf8AW+hpBXkv621PiNPEMcLG1EJeOeGZUfaFcyMhZ3bknKhs5zkHcxDEkn52Ueb3r6prfor2PoIvlslomvv0v+J58kbLqUaJCGnVJN4UAhT5bqDgEKGQfvXO48g8jbiu3T2b10ureeq/4ZHJtNaapP5b/wDDs2IY7u13LAwLTLGiy4wqSb+ig/e+Vdq7d3OXkwxyMnyuzeye3dW/z/yRslKOi3a37Nv/AC/zZhzWC2THzUZ43Y75FfcXDPlWB6OucA/N2VgR/Ftz83w2TWy2tbf0MnDl+JXvu999vUtSaQs6I0ELCIGRjk7XkHG4L97lccDcRnCgtnNQqjTalLXp2Vtv6sU6asnFO3Xzv/XcswhbQOixtI8W1Qp6r+9Vwz4yA/8ACSuAcksB/EXb7JP/AC6eXUajy7XbX+fl1Pun4ZeIJ9Z02PfCIjAqxvhht4yBt2gqSuMON2QRkgHAPoUJNxt20v3PPrxUZX2vrbsepV1nEFABQAUAFAHjPxk+0/YYvszPHtEjAqwUbwYypYck7QHx8o5YKGDMFbmrbLe1+h1UbJva/mfDtrqM9nepMzn7TDnO9MR42mNsqx+825dxwCTweckcMoLlemjfzvudkZO611X3WNuxvlurthgKk7O8rYPO45RA/PysWbkBWYZU7QrE88ouKv2skr/e7fI6YO75dr6t/l99z3nwJ4EstehW/u4gsCD5du9NzlQp2tkHYACeDjc/GAOeZczu3sjrk400opXk/wAF6fkb2ofCbSBg2ivEACuxiZEAOOgY5B4ABLEY5xu5Fq72umXG2l0tOhTg8BpEnkyNvUv5jYUAkjBAGc7BkBmC4DNk4Gc1Lg9+v3HVePZWMLxJ4bt9FtXureBSYWM5BzyQGOGIBOzJyQBnGTmiClzJPZ6GVRRUG47pHr3wgJGlASkfaHJlkQZCp5zuQoUn5RhR0AGScknge9RslZdD5ite93/X9XPYAMV0nILQAUAFABQBxXjeGzktN96yxIgcF237QrjaVbyyJMMdv+rZWBUHOAQYla2ppC99D8+7jS5o7iSQLuRy5CckEDlgS5VvlL54JK4DjjmvKnJR92+3U9enSc/fSdtbf8G5bsLOW1u4oBBkSsFKDcGwcZZSc8suRgAjJBC1zSkpRbvsdcIOE1G3XX/M+2bIp4e0aIoN6lN6hiRy53bemflztycYxzgdIj7kF1vqr+Y5L2taS2tpp2X9XOEtvG2sXbSPHawrbQXBgcuWEpZfvbEJQsB6gEcda3lGdOPM7en9M1pqnVk4x5lyrfVL8jsNbuLmxtBcIFLyKNgGcZYcZ4J/SkpSaV9L/qVDlk3GN/dv+B5PoranqqvLq4lkaSKcrbA7AkgDCNGIQKyy9OCxA6jkE7OMYSWt/v36GTc3CTceTybT06+nzPZvhdos2lWBa7LNcOxD7lVSuOcDYzKQSc5GBnsOc91GNk2+rPCryu1FbJHqR4rqOMBQAUAFABQByvjDTbjU9OkhswjSnjEm4qVPDAqD83HQEH1A3YNZVE3H3dzWm1GXvbHx34S0h9QurvRbpRFdBWNrLhgFkRgkkLZ3uGKxqACM7FbbzjPh1IX12a0a/E+owtZU/clrF6pq3ZrS/wAn8j1Sy8Fpm3a8RoLiCZIZtkhYNsXKPG4YNsYAfeCkNlcAAZ4XFr3X3s/mdU6iT5oWaceaPT5Pzv8Ahbue6G1S3gRIQFjiUKo9AOmM8/j1r1+WyXLsvwPn4yvKXPu3r5nOvpcUkpldQST6Y/E02tLnpKfKuVMj8Txq8ISIM3lnqBxx2/8A1VlNW92HQMLe7c7K/TqZFnYZmiVV2kupI6d+aajeUejujoqyUYTf91/kevQxLCoRAFAHAHFe0lbRHx7d9WSNTEA4oAWgAoAKACgD5o+NOim1vIdSt4m/frtklCnbG8ZUq2QDtkI5TpkgnNeViYNSU1s1r6nrYWaa5HutV6f8Odp8OL+TWNEtr64ZpZmDROztuYmGR4wxbuzABmPqTXnpPmu3fp6dV+Z1VJaci0tr/melAfLiu9bHn7MyLqNsEDgHg/jWLctkehTkt3ucZrOox2yCDzgrLgMd4YqACF4LfLjuQMk9cmsrtaLc9alSc7zUNHtpbfV9Nb/caXhZ3u50diHAG4MDkH3z3zW2HTdSz1tqefjGoU3FK3S2x6jXtnzIEUAFABQAUAFABQBUlNtdbraQxycfNG21uP8AaQ54+opuLtdp8r6taMSkr2i9V0T1RzFjo9j4e3WGngRIxafygchfMY8qP4ULK2AOBg149eKhK0dLq/zR6VOTmry6O1yxDqCsxjPysvVT1Hv7j3rjjVt7r0OmVFr3lt0Y2/hFzGBgMvcEZH4itZXkk47FUX7Nu+jPPNY0fzJQ6xqqr1woGR/QfSsffW2x9DSxDjFxc/xudx4MttsLykbRu2qPQAD/ABr0sJG0XN9WfNY+d5KF76XfzO3zXpHjhQAUAFABQAUAHSgDxnW7r7Y0rlobq2csrwzKRgZ2/I2ThcHqpORyVwTX1tKklGNNxcXZaqzTutpLZ+jXkmfIzqyc5TT5lzPTVNa6OPX5xfm0ePSaHeeD74eIfC0/nW5+S4sHk35XO5o0YnJIOWj7kfc6bK8XG5Y6qboq1SOqj0a7xvt5xez2ex7+DzCNO0a9/Zy0cuqfaXn2ktGt+p6RYeNtM8TBXgkENwBkxsQJY26MCpwevBBHPQivg6lNxk41IuMk7NPSzPvqSTgnTkpRavp1XTQ1H129tDiIo31yAePx/Ks4udN+69CnRhNar/gHP3Gq6pfSgymOOMEA7Cc4J9yB+Ndaleyd238h+z5E7WSSue+6dBFb28aW5DR7QVYEHcGGd2Rwd2c5HBzxxXvxioJKOx8jOTnJyluXQMVZmLQAUAFABQBHLKluhkkO1VGST2H+e3U1STk1GKu3siW1Fc0nZLqeXeIvHbAva6crghSWkKkYGM9Bynbn73PABFe/hsCtKldrfSP9b+mx49bEt3hRTStrLr8l09TwfV/F0+mO17esv2YBUk8pQsqhiBG/VkuI+0gcrMjHcGwcD2asfqyU4tOn1vf3Xe2i3S12WltUnsefCKrLka9/o+/XV9/X0ui4L9NRhNxC4lhuB/rBg45yolTJI6ZU5yOqOcFKuLvZ09HulfTXrF/n07pblJci5Z6rZvr8/wCvQxLiDTbOQyanFFLCVO8n/WqwG4tE64kZCg3YUnHGB0LebjsFHGR9o/cqRV1NR0dukl1tt37aXR62Dxbwr5F71NuzjfVX6xfS/bbvrqd3YeH7fUrVbnRtRuoo2QBUZlnWM4yA0cq71YZ5DMCRyc8GvzyrSdGXLUj1dmrpS9H2/LZn3FKv7Rc1KXRK2l4+q7/n0MPxBo+sW0blr+IWuwliluVnKgfMobzSilgDhtny5+6cVzw5U4p3u3a99NXva3T1OqcpyUnGyile1rvRbXv19ND0v4efEqynhg0q5eOEQxRwxFiFZdgCKkg6AAAL5nADDa3JBP21XCRUVPDO6sna99Lbrr6r7j4ONaXM411Z3etra32fRHuCOrqGQhlPIIOQR7EV5O2h2DqACgAoAOlAHC6/cvqLfZUyLclVZlOA2cFs4IOAGXGMdG57V7mGpqkvaP47NpdVva3no/wPAxVX2jVOPwXSv0b0vfy1X4nkeuWAt1e48sxTIwDOwlztdcDDo4wFZdvPQMAeMV9DSs2op3i1dap6p32a6p3+R5ilJptr3k7aaaWtt5NW+ZzZswWkiQI8bR+YocK/ylVYYbaCCFJByDnB5UgMOl2aXOuvK7d7taq+qv8An20LV1rF20vr95g6TpzWsskI22yuhOFA2DuSq+mcMyYPBLIWOatxjBK0dE9Lbf8AAb/P1KUnJ6vXrff/AIK/Qzru22grOAyxDdG5ywVGJ3CQjlkRmLLIckKcSEFQz1rTXL0e0uqaWifk0rX+/uCak7rTuv1Xn5fcZ/gXVG0jU40ifat2THLHJkEYX5QuCAcEjZkNxwpw3Hg5jhqc8NVcVZxjzxVldSWrt5PZ+R7uBqzhiKavpJ8rd9Gnor+j1R1nxX1s6bo7kHbJdOtunqN3Ln8EU/iRX5tQgp1FfZa/18z7nEz9lSaW8tF8/wDgXPLLq0lspLe3iGFjngaQhcSM6uB5jsP9YjFm2gk7CAowQd/6XSw/sqdNRX8jfd3advRX2+fc/PZ1eecm3/Nb8Vf10PYPDPivUfCzMlmcwj5mhbc8eB1YIWLL6lomXH8SkV1YjBQq6y+TVk/S+33r5mFOvKG33Pb+vQ+nfC/iSDxNaC6h+VhxImc7W9QcDcjdUbAyOCAwYD5CvQlhpcktnqn3X6NdV0Pap1FUV1v1XY6OuU2CgDM1SZootseA7kKM/UZ/nj8a6qEVKV5bLU48RNwhaNlJ6L9TlZIt8ZjX+IblA4+YZyv4/MP++a9dS5ZKT6Oz9Hs/lo/vPn3Hmi4Lqrr/ABLdfPVfcYEl1Ig80YkQfJKjcg8cE+zqMH0cZ6kV6KpxfufC/ig1uu6/7dev+F2OLnlH31rbSS7+f/by08pK5g3enQSsUhURtIoMEoA2nghVb0VgWicHhW57V0xlJK8teV2nHr0ba81pKPVrQpPklyp6SV4v12/+RfZnGXVmsrJaOGjMaElz1jIUs+OBkBw5567gvHBHem4pzVmm9ujTdl96a9LXNFaVraW/B9fxv95zFvdHTpDHcEbfmjVj91ZCN0WSf+WM5GxH42OXgfKgsc3Jq8JX5U079Unpr6fmr9ma2TXNHR2ene29v62+aOeOk2tzKJokfyw5IRPllQjkiM/89Iic+X918BkwXIbapCyvZab/AOf+F9Vt92rjN7Xt2f8AXXzOd+JbXup2dmtyfOjgmKidB8kqyKpjY4AAbGQwOGGQG+Ykn4bHYOnhp+3wllCaSlBbwld623Se3ZNaaNH1eHxU8RT9liG+aDbUn9pWXXq197T8md7eRJFIjkjajHDsgIUHGcjugP4gAspBJr7pQShotUkrem1uzX/APk1Jt2b0bJ51SRCsZ8i5gJ2nPykr1TcfmUg/cL9AcbnT5lzTfVXi9/8AO3Xzt62T0elraPR/1ubng/xFdaDcC6gTEb4FxDtwG5G/HdGUbmH8I+Y42g1y4nDwxNPkb95XcHfby809u+3U1p1XQldfC9GvI+s4ZVnRZYzuR1DKR0IIyD+INfAtOLcXo1oz6RO+q2JKQzhtZ1eJrho9w2W7rE5H8Eknl4zjoBvTcT0XJ7V7mHouNNStrNcyXeKv+Ls7LrofPYqrz1PZrSMFa/m7a+idr/McAcemT/3zJ3HsG7dun9009vu++Pf5f590c/mtNfun1Xo+ny7M5XVoDZubmM4hlyssbAlQzdenKZI3IegcEY7V6tCXtEqcvjjZxl1aX52Wj7p3OOpHlbqRXuyupLs3+V912loczKJ1XyCFdT89vIjZVt3BXnlQ/TnhJRjuTXemr+0V1b3Zxa1Vtn8vxizNRTXsm79YPbfdfP8ACSKEupmTbNKu50/dzKwwT/Dlh6SL8jekgycFhWigknTTsnrBrp10/wAL1X9126Fq8XzrfaS79PxWj89Tn9RsI2cQoqyRlG8styJI5CGVXzwdoDrg9CXHU4OkLP35aP4ZLou+nno79reZrJuNora90/y/rucrc2/9lQ/bLfizV0WdCSXix8qSBjyQgkHJyTEDuJ8lWZyfspJPtZ9uXv8AK2vk7+Rovfi7aO9169vnfTzLPiGwm1HS5hblSp2zGM/cEykbZBzgCQsjdMZLEY2sTy1aEJqdOy55QlGL/wDJl9zjr6LubU6soOMr+6pJtfg/wf5jbW7iv7aKY8wzrnI7B0XblfbIbHchgehrspT9pBVI7ySkl59V67ry0OaceSTh/K2v8v8AMnKkIqTgZjAjLDksmCFPo4KEhSe2MdTWkUrtx2etuz6+mu/mKT27oo6ROYfNsLkkBGCrKvJMbZ2OvTJjOGQ8HG6NuoAxcdXKHm0n36r0ez87NG91ZX/r/hvyPf8A4feNRcSLoV2AskUYEEueJAowY+f4hglSCcqMH5hz8rjsJyN4in8Ld5L+W70fo/z8j18NX5kqUtGtI+dunyPYa+fPTPBNNiabV9d08H5BdROC2Sd06ZI68qGXp/d+UV9epctLD1HvydO0f+Bt5nylaN5ziv5nf5y/4J2tncedAsjd1Ab34OD/ALy4OD3GAe+eSceWTS7try7r0d/60MovTXbZ+a6P1Vvn6XLM4+U7wHGfLkU/dcHPUe+Oe4IDDnNRHdKN1pzRfVf1f81saN8t29bPlkukv6tr52a1OA1rQkjIFs7wr/rFxyVD8EDkDqM7funGRtJOfcoVnJNzSb+F9m1r+Xz6a6HHUSg0vstKS7pP9b/fvocpqVzcWc+bgRyuN0c2MqJCmA7dON6EE8cSDcK7KUYzjaF4rRxvvG+qXyd1/h0NZaO/XZ+dt38/z1M0Xo82XTnDB7dWmjcEHC5UsueCMghuAcOODgk1drctRbT91r70n8np5r0GtYtdtV+q/rqUtQi3uMgeVdxuHTtvQgE4xjBVX9Mb8dBk2nsv5Xb5Si2l+V/S5K2fpdeqZmaLKyQNYOS32UGLd/ejG6RM99yxN5WfbPeojHlbX8srL0ai1911fu1cuTvaS05lf5pu/wB9n95R0e3+zvc2Tn5Ibpgm3gKrtHKoA4GE891UdAMDsMY0F7P2kFsptx8lOPPb/wACuaVHzckurik/WL5b/ckad1CWAiZmWNfLDbDh9rASAIxBCkYK5xnDEAjrXU1dNRbTd9V5Oz+/+tTKL6tXt+v+RasrRIojCoAe3lKlu7BmETkk5YnOx13E4O715z0i7raUb/NLmX4XT76FNtrXo/z0/wCG+ZW0/UPsGqWRjXiSbzmI+Vt1s2OCP7+4Fsg7uQccGs8RHmhKktLqS8rNL8r6djSi+V+06Ra0PsXTL9NUto7uIMqTLuAbAYD3wSPyNfnc4OnJ03unbTY+qjLmSktmf//Z')",
+
+    "8F":
+        "url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEASABIAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/AOV+PXiefV9cfSkceRZ4RQOivtDSMfU5yCfRFHrWEneXkjsiuWPm/wCkeLwFUZVIJL/LHhdzbRwWGSMZxjdlejY98X/w5stPXod7p+mS3ZWOFW6AFQMjLZ/ixhgP4sE7ievTHK2d0VZaHvPhD4aQxKJrtTIxG4qcjPoCMYA9cHGBjGOKxcuiN0lHWR65HoVsowI0GP8AZHXpn8BwPQcVnqw9py7EsWi28JyEAPrikl3H7Z9LIu/Y0AwABkY6darVbGftH1OX1jwvbXiH5ApIIyB6jB/z2NNScdzVNT06nzv4z8Di0jaVVPA4VeB17nOT26DrW8ZprQzlTs9T5y1O1e3umXnCnA4I6dh0x+FdyaSseVKL5rl+3iMwG9XZTxlSQw9x0BI9Dyf7w5Bi9vIfLc29O3afOpD70ZhnjOVB+8VOV3DlSp9SMYNWmTax9TeFJbOCxUQ3AhVjv2ebJtUsqEhfkyFz0B+7yB8oBrojZIyk3c+evH8MsWv6jLeKY2eckDB3FXy/Xj+AbiffgYNYyVrlR6Efh3SG1BonZduQFBHAVc57g9e/fGB3IPBUlbRHp0oaJ9T6s8G+FbeyVZiuWwMFuf8AP0rkcjsa5UesxRjGBxVxVzzpSsWBFit+Qy5hrR0uUal2I2GOOwrN6ehoiFl3cdqVrmifKcdr2mJexmPHXt/nrWHwvQ9KPvRsz5c8W+EUtp2lZCFzn2Oev+f511KTZzOCRwNwIIDsEbRbjgNnerez7VHHpndj2raPk/kckrLS3z/4Yp2EyrMEQch+U9eQcq2QMZAw2RjoQV69MdDldtrWPu3wlo2j3elW/wBtggeaFDCwuI0EqeWzAIwbkYGMD0IxXckrbHE209Dx/wDaE0yGO6sboqqy3AmDBerhBEoBPHZlUnvxjgGuerojairuxkfDzSVvbpYRysQyT2J9v5/SvDlq/I+gh7quz6btrdYFCrwAMVkZTk5GnE2K6YOxxSRb3Cum6MLWEL54o5r6AlYqucVgzoiiAy44pc1jRRKEy7ulYvyOuDscV4l0dLq3Y4+bBqo6aGktdUfIHiq1awmaI/JnJG3j2I+XA+n5dhnsgedU0K3w5s5NW8QWlkwMqmTzBg/wxq0jckgEAKcg8nkDJxXbFaqxwOVk0/kfonZ6NHZoUTABOcEZxgBQAcg4CqAB0HRcKAB2bHIfPn7RSMsmmyn/AFai6x7uPJYL7cDPvg9wK5a2yOqhuX/hHpvk2RuyOZTgH2AH9ePwrwJPWx7+0LntAwKRzFlK3ijFlxE44rrjHQ5m7MjKkGps0WmiFuTWTNVoQsgHNTymib2KcjqOKzdkdEUzF1P50IFZN9jrgtNT5X+KFgQGcDkD8j1yP1/SuulLVHFXhZM5D4K34t/GOnCXAEjSx+257eVR6feYgfj36V60N7o8Ke1mfo6K6TA8H/aA04XekQT9DazMw467oypGe3GT+Fc9X4fmdNHSRa+GbqPD9tIMYKt+jsP0xXz8lZt+Z9D8Sil2Otku5C2YxkDpXOm+h0qnFK0twGtPbYWdMZ79h+Nae0cdGiXhYz96EjoLO+WVdycg12QqaXR5dWi4OzLckvy8Vq56GEYWdihNOIwWY4ArmbsdcIOWkTBl1h5G2RAY6f57Vi5vZHpRw8YK8nr+A1fOmB8z5TS1e+hV4QtymVc3iofKc4Y9Pepv0NuXS6PGfibCHgD9AwZT9QMj+R/A10U9HocVVXjc+bfCV3Jpet2l7GNzWlzHKF/vbZVJX/gWSuexOe1e0naz9D5txu2vU/U6NgygjoRkfjXYcp5l8WNFuda0ow24ZsHJAPGenIyM5UkA84PHevPxHNHlkr8uz7K+1z1sIoTjODsqmjjfdpbpPo/LqvQ5r4e2htvDdtDLkld5PbP7xiBXj1fwuetSurW7Ec3jG8kuZbHRLXzHgR2kkkOxF2jtxucg8YUHnjjrWlGm5bWQqzjBXmnL8jAi8T65qNyLdooZCY4pPlU7G8xmXYrNwXAAcgsvyndnBGLdNN2TV9dHbp3XTyOeniVGyUZJO2qb69v1PR9HuG8sNtMZzhk7Z747j6dv1rktybad0enNc6s9dLp9fmdmnzR5rpjrE8Z+7Oxxl/O93KYUyETlscFvbPYeprB3eh7EEqa82cfqNnqc1uZ4nFpa+aiB4wfMx1Eg6EKGAALE7yQQqj73TCl7vP8Ah5dzjxFf2b9mt+rfTy/zOJt5fEEqfaDevBJGm54pgrR7/MZY4yykNmWNd+ASVHBB61qqUHFyd12eqv8AJ3OWnXqSlyxStbbR2+aO/wDD7X2oxB9TRRKhIJHKt/tL7HsOvrzmvPkrO3Q9lPTszlviHYiaxlUDmM7l/l/Imrg7NGVRe60eB+A9Ga4vo7lo98RkVAx52sx8zjp8w2DnsD6kV2Vqjgoxj3Msvw0arq1J7Rjp63/yP0WgBEahuoAz9cc17i2Pknu7bXY68TfE6+qn+VZzXNCS8ma0ny1Iv+8jzywtVsYRbj5UVpMAdhvOP0xXzU1pY+qStql2LLaPazlWZcFfusuQwJ6kMCCCe/50QbhtoZSqOzTs+6f+Rl/8IdZW0gnikmVhuwqyyYy2c4G7AyCQfUcHiutzb1v69zCHKnf2cVbr0Ne308WijOR/vHJOOh556cVyS3vr8zsdXm92NreSta+/4mrBKfKI9K1htZHHOPvmJYKryNuwQxIPuDURtfXud9VOKutHo/uLJ0C2DEjcobqFY4x6cnoe/rXZZL4XY4nWcviSb7tEMHh6xsDut4QGweQMnnr7An9eM1lKQKd9NEvuX4FuXZaJtRdp/I/4VzS09TWCc3vp+B5Z4lQS2tyG4HlSH8lJ/TFRDdHfJWTv2Oc+FOmGaOG0ZAI43SQnHVhhmP12jb+Arvpr2tVReyd/u1Jqf7HheaOkpRd/WSt+F/wPqdRxXvHw5O44xSA4LUofs85QdOo+hr53EQ5JuK23XofXYaftKam99n6o0LB9gx2rOnpoctdXZbchMsR+FbtJatHPFXsk/mZcshYkn8q5pO7O+EUlZEkRJQjtWsUTJWZj2xCSMM45yKy2bR31FeKfkdFFlR1yK1Wh5MrdNPwHBscAU0uxFur0MfUj1zxxWU1a56OH8jzTVovtscsBOBKrIT6Bhgn8jms4I7p9jtvAeirZRmZBtjA2Rj1/vMfU8BQf94V7WFp8qdTvov1PEzOvzctG+vxS8uy/X7j05RxXonzhO4pIDitcG24U/wCyP5mvGxa99en+Z9LgdaTXaT/JDLWbZx2rhi7G1WF9Sa61IRjYg+Y8D1rSVXSyMqWHu+aWyMttxJJ5rOx3qyVloXoAyJyDg1rtscs7OWm6MO6QRTg/3geKykrM9Gm+aOm6HaTfuC8bnKK+FPsef0JIqU+Uzr0lL3oqz6nRC4xyK6FKx5jp9DC1S5DKT3rCbuelQhyHHRWjXcqwJgNIwXJ6DPU/gPzq6UeaSguuhdafsoOp/Lqe0WVulrGsMYwiKFA9h/U9/U19OkopRjsj4icnUk5y1bd2aQFIglbpSWgHI+II/mRx6Efkc/1rycYrcsvJo+gy+Wk4+af3/wDDGNEDivKPVlYrwJ50jO5AKnAH60lG7uaTlyRUIrdXZopEJD6YrVX6HK5ciJzDcRfKmCvbn+db2ZkpU5ay0foYf9lSSymSd8/7I6Y+tZpdzs9tFK0NF06E8r29kmZGSNR1JIAxQ1YIqdR+6mxlnOLtRJAweNs7SDkcdeelRtp0KqR9npNWel/nsyO9gGMHrUSLpyv6GfpUOdRiUdiWP4KT/OurCq9WPld/gcuNly0ZL0X4o9WiGBX0TPjSekMnNIDF1e28+E7fvJ8w/r+n8q5cRT9pTdt1qjvwlT2VVX2lo/0/E5iAflXzx9DP8TI8RaImo2jeUTFPEfMjkQkMpxg4I5II4I6EVrDZrqbYaty1FGp8Elyvy7P1KnhORNVjENxI8F5EQsm1tqykLkvGjM52kkA55BBGMYJuDvLlehri1WwfxxjVg17snFa9tVaz30udidFvGC4um5OG+RTgeoP+NdnI3Z3/AAPJWLoRcr0Forr3pK77Nf5Fa50hLXe1zdSkKN+0ELlB97hRuPf7vPTHNS4ct7vzNIYtzsqVCCvdN2bs+nxO3bc8T8QaMnibVI7S2Ui1tZd5kLF/OLKjLkkltsR3cH7zY7A55ldXXXv2R9HQhKUPreMk/ZRV4017qnJeSsrJ+Wr8ke2WVpHZW6RRrhYl2j9P19amW587UqSqTcn9p3+XZeXYpXIz8x49KyOunp7qE8O2++aS7boPkT+bH9APzr1sFTsnUfov1PJzCqvdor1f6HdI4FeqeAS7qQDmlA46U7AcLrvxG0Lw/L9mvLkeaPvJGrylfZtgYKf9knd7VhKtTpu0n+v5Hr0MtxWJj7SjTfL0bajf0u0367HM+HPGdl4pluBYJLHHA4Cl1wGDdCCMgHOfkJ3AYJ68eBU5XJyp/CfQVcLUwsYRruLm462e3r/ns9TsC361ktDhscdqOiGOb7Vako4OcjqpPXHqD3B4raye/wB/Y+ioYtSh7DEJSjtr1/yfZrU04Ne1OBArCKX0IbyyAOxUnP6Ae1brnWzX32OOeCwk5Xi6kO6ceZeqa/zKtxc32qnD7YhggmPlyD/DvPQeoFKzekn92/3m0KWGwusU5vopaRT78q3fqS6XpsdkSVGPT61DaWkVZGWIryrJJ7L5G8ZcLt9TWLPMUdbowdUvPLUgcmpOmK5dtzl7W4uoP39u7RuDnGcq3sy9CD09R2weacasqTvB2/L7jGpSjUVpq/n1XzOw03xa0yK1xEVyPvJyP++T/QmvWp42Ml+8VvT/ACPHngWtabv5P/M6WPX7Vlz5ir7NkH8jXcqtN6qS/I4HQqRduV/I+FNa8U6hr9417ezM0p+7glVQdlRQcKB6D6nJ5r5+dSUnzN/8A/Y6GGo4eCoU4pRX4+b7vzMqCOS5lWJRmSVgijPVmIA/Mmsbtna1GlFztZJN79Efavhzw/D4esYrGEf6tfnbu7nl2PuzZ+gwOgrS3Q/Oq1Z1pyqPdv7l0XyNoyBXMY6gA/nkD+VR1suhgldXJDggH2qlpsSrp2Hx2Ky/MMfyrqUbkyrOGmoxrbyztGKlxa0RSqXV2NkUQL71k1YqLc35GBcXpLYTt0qDotbQqPbGRdzVDLStoLaWRjTkViVoXNKsx9nXjHf8CaqCujKTUX95oHTUbnH863sZc6Pg4nA55FR6H6a7LdXO5+Hdot54gso2+6shkx7xozjt/eUU46s83MJezw87dUl97V/1Pspeta7H589ChMuJmxx8qfzasX8Tt2X6m8Ph+b/QnVtpGec1rHuS1daaGrHOqrhRiupTsrI8+VNt3bKksgX5gMVLfU6Yx6XMS5lad/LHA/pWD1Z3KKhHTdj4bNTzRYzb5SzLEAvoKzYRlqLJEI4iV44wPqeP/r1LVo3EpXlZ/wBdS9b24iVUHRQAK1jG1l20OWU76lsRitbGPMf/2Q==')",
+
+    "8M":
+        "url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEBXgFeAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsugAoAKACgAoAKACgAoAKACgAoAKACgAoAKAILq5jsonnlO1IlLMfQAZpN21Gld2R4PqnxjfzGS0SO2jU8PNlmZRnJAUhR09W+prklVf2Ud0aC+0/0OZ/4Wpf6gwWO6EZPTYijr1z7j0znPGOtYurNbnQqEOhc074o6nZSBJ289c871A4/DkZHOM/hTVWUfMToReysez+F/Gtl4mzHF+6nQZMbEcj+8h43Ad+AR3GOa64VFPyZwTpOnruu52VbGAUAFABQAUAFABQAUAeJfFPXftcf9iWjkNI22Ur/AHsKQn4K2446ED0IrirTt7q+Z6OHpX99/I8il+GBEAXc0m47mYg5GR0z1/z9a4nKSd0etGnG1mS6Z8MrewbMrHn7p64/A8cUOTe5oqcI6RQ2/wDBdxA7Mrq6nnPQ/oP60aj9mnschZ3eoaJdiSNijxHcCpIxjuOx9enr7itE+qOOUbNxex9bfD/xiPFdnmXAuYcB8dHB6OB2z0I7H8h30582j3R5FWn7N3js/wAD0CtzmCgAoAKACgAoAbI4jUueigk/gM0D30PBdGtI77UPtUnzupmlcHnDzOSv5Jx7dK8jeV2e/D3Y2WnRHpIjXGMDmt7CuZOq3FtpkDT3RWONeeRn8h/hUtJbmkW2/dPG9S8c2d4Xis0llAyCyIcD88Vi0dEZerPM9YvQ4SVeQxwSeCD1wc9PSiK6GdXbmR03wo1ya11q3hQ4WSTy2B4yrlhg+4zke5rpj7sk0ebUXNBp9Fc+067zygoAKACgAoAKAIrhPMidP7ysPzBFJjWjufNmj3UttqN5Bbj5yqbN3QMWCEn/AHMkkfhXkNWeh9DDWI25H9m3aSXuoSPMzArGGAHBzjb6evAFDvuk7d0dUVFPlbSb2TaV/RGp8R52n06GROVkkUP7DpVSd7MVOPK5R7HHX9rfQQwx6ZFElu0ZZj8xcN/Cpx8pLdWIyo6DNK0bXbfN2sVzVFPljGPJ3b/JHLap4dmltW+0KI3lGSAcgN2I9OalOzuOUVJNdzjtFupNLuIbpG2PbzKX56bMHJ7nJH6dxW22q+R5qg5e795+hFjcreW8Vwhys0aSA9Mh1DA47cGvSTukzxWuVuPZtFmmSFABQAUAFABQB4XqEAtfFUltGqqjwGXIGDl2U4HsCGP4151RWlp1Pbw8rw9DQHg+z3rMRulUsQ5ALjccsN3XB9PTjpUq6jy3dux1XXP7RxXN0fb0GeJLGOfTJEf5Vj5B9MVDXum8Je96o5Xwlqsd5G1q5BktwB9VPQ/0+oqU+hrKPVFDxVJtXaKh7mlrI8da0E120aqCZMcepOPzI6irvpY5Yq07n3boVs1np1rbv96K3hRs+qxqD+or1Yq0UvJHzVVqVScls5Sa9Ls1asxCgAoAKACgAoA4rxPp8a3EGogAOpMDH1V+U/Jxx/vVy1ltLtp956GFnZuHz+7crh+K57nqnKa9oiahFKssrokwVSC4VFxkkgHjnPzeuBU2NYTv7qW19lqefeF9EtdBkdoZhNI3ycuCSB0Awe3YVm31NNY6NMZ4rkAGOhqC29DB8OaSuo6nZMhAb7RGHH95AysR/wB8hsfl3raC1S8ziqScYycd7H2TntXqnzYtABQAUAFABQAUAVby0jvYjDJ90kH6FSCD+BFTJKSsy4SdN8y6fqcVdIbd2jPVSR/n6150lyu3Y9unLmSfRnF6tZo6PeXTNcFVISLlY0HX7qn5ie5b8AKjmS9T0qc+T3YK3d9WcppiWt0ftdnBHEUOCQgU+hPTPTvWcm9i3K+/U5DxdqIDhmI4Bojc5pNJHn2na/cxXCyWbMsyMDEV6hgcgjPHB5549eK6VF3Sjvc5XJcsuba2voej+DvHF34f1GGa+uJLsXBK3buzNvLHkrnoI+AgGBgcAbjXsqnpbqfNuevkfYkciyqHQhlYAqR0IIyCPYiuc0H0AFABQAUAFABQB5x4q16yguY7RDuuWO1ipG1eCQrf7RPAA6Z57VNSg5U3V2t+KOihWUaio33/AAf/AATnk1CJQVPGOoPWvKWm572pxfifXobZC0RCYB4Hf8qr4tEjS/KryZ8461qNxqtx5ceSzE4HoOpJJ4AA5JPAHJNdMKbbUYq7PNq1bJyk7JF6ytBp0exTukfh3HTH9xM4IX1PBb0A4PtQoeyV38X5eS/zPBqYh1Xyx0j27+b/AMia0JcordUkP/166IxvJHNJ2TPsb4a+KIL/AE6OxmkC3NsPLAY4LoPuFc9cAhSOvA9a4asHGTaWlzqhJOK11PUK5zUKACgAoAKAMzWEuntJFsSFnKnYT+oHoxH3SeAa0hyqS5/h6kTvyvk3PkbxBPPZiQklZkbdk/eV1Oec99w5zzXtVLODS2a/A86ldTT6p/idxp1xbeKNPiv0JQyIN204IYcOp91YEc+lfGSXI2ux93BqcVJbNHG634VeYEwTZz2Ycj9cfpQp26It0k+5w8Hg2axkkupW3BUYn8s/0r0MHU/fRT2d196f6nmY6hbDzknqrP8AFX/AqeVvBx+FfVyjdHxUZWZX06JpZ2IBIB/U1hThr6G05WR6ro9jKEYj5QqFvT5sYHQ8kHrg4GMZya3lBJabnMqmqPUND8aXsI8tyLhIwAd/BzgZww5/763fhXnyoRlto/L/ACO5VpR03X9dT0PTvFlrej95mA/7X3f++hxXDKjKG2vodkasZeXqdMkiSDchDA9CDkVz7aG4+gAoAKAPEvit4bguYjeW7Ilzj54s8yjHDKB/EAOf7wGeo576LlKLhZtdH28jknywkpXSfb9TxP4VRX9u97pro+YpEnSEqQ+yXcC6g8ldygHA4Jz3OPLxFF35orX9Oh7+DrxScJNJdG9r9UewjRryTlYJOfVdo/NsCvOVOb0UX91j2nXpR3nH5O/5HM6u6WRks7jarsrIVJHBK84IODjIBx0Ne7hcC/cruVpKXNbdWT29WfMYzM43qYaEeaDjy82zu1vbsvkecvbBGEMe1iw4CBmOCcDqB1/rX0+myPkLtas3tE0RbZSXHQnIyOvfJGen8WD6DPpCXLsEpXOmSRn8wxjAVSqgf7R4A/Ck1ZWJW5YhEdlGLYH5sb5W9O5yfb/6wrDl6nTzdDHm1Z7x+CYrVOI0X78nuB6E9zx6ZxU8ppzW2NaPVDEMPMYT2RDwo7AnPLep9ahxv0KUraJ2PpqvBPbDOKAOO1vxZHp7eTABJIeNxPyg/wDs2Op6ADHJJxXbSw7n70tF26nFUrqHux1f4HkS6lJfXT3rsXVH2KT/ABH/AJaH2GMKuMYGQK9n2aUfZx006dO39dTyHUblzvXX/hzBlmlgvY9a0s5cgRSqeN0SyBiuezKVYe4JwK5KtJ2v1Ss7dfNHfh6sYtwekW7pvpfoz6DTUYmtxcggoE3kg5AGMmvMUW3ZHpt8qbeyPANWuo725ldgCXYvkgHAY5wAev19q+ipx5YpdlY+ZnLmk33bZSiURgMg+d+E4Ax2zxwMDJH+8fStTE2Db+RGtuv3iMsfbqfz71F+o7WGXVyLKECMfvJD8o+nANK12UtDNuAtrb5myxkbLgdXx0Qf7zcUPy6FRZgtI9iArENeXRycdIl/uJ2CxrwT/Eeg5FZ2ez3fTsbXW62XXv8A8OLHpwuQZGOMk4yRnA4ySepPX9O1PlFz20R9n18ufSHl/izxIYpXgjbEUIO/H8TAAkE+nKr+frXq0KOik1q9vJHlV61m4R2W/meQ6hqck7Dbncy8f8CPy/ixy59lUetevGKjov6/r/M8tu+rN2G3W3gWEdIhyfVtpLH/AL6pX1v3/wAyfLsczYx7ont+myRmBHBw2GGPxz144rbbUybNmzv7izgmg3kRTKNwI75zlR0GQCG7HjvmuJ0VzqcfPTzO9V2qbpS8rPy7HPXTiZUMHy78DJIy0fJZsDoAMkZ6n6iuzY4/Lsa2mr5pN0wwo+WMew4qXpogNLJc5HVqnYDCuJhJdPIOVtwsaD1dv85/GmkN6aIpanMftcMA+7EpZ/c4wP8Ax4lvolLf8/8AIpaJ/d/mYUEomllu5OhO0H0QdFHu33m9BgdqS6v+rGj0Sj/VyjI97fsZYAVjHyqB0wKzd3tojRcsdHufZHibVH0y2Hl/elbaD6DGT+PavBowVSWuyVz2a1T2cdN27Hzdrt40nyHP76Qhj/sqSxH4hcV9HFWSSPnW9WyCyf7VcCRhgIScf7h2D9VJ/Gr2TIemhvS3JETnkZ/rUpaoV7IxhJ5TiUfxDaRWj7Eosavdy6tH85EZlXZlBwoBI4BOTzzycY+UcAVy0qUaCcYtvVvXzOupVdVqUklZWstNjDJH+rjG1crCo9FwCfzG0D6GunayOfu/mdUSI0WJeAoqPMRXE/lgsM/KCRVeQtjm1n2CI85kuVJo2L6+iMO7uXudQnjBK52Rg9wNrsxHvtBC+55qL6tLy/G5qlaKfq/yGzgELEvywxgEqOpzyBn9WPUn65oemi2BPdvcrPebTgbgBwADgAegAqG7GiR//9k=')",
+
+    "9F":
+        "url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEBLAEsAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsugAoAKAMHW/Elh4fjMl7KsfGQucsfoBz+NYzqRp/E9e3U2hTlU+Fad+h4B4i/aDW0cxaZbq5zgGXJ/HarKfzrn9tKWsUku7Oj2MY6Sbb7I5j/AIXZ4iukZQ1nCXGFZY23p7jc7KT9Qfw7YvE8un6Gqw6e35nJS+O/EKzCSW9ueOm2RlUflxz6dPas3X5l7ra+bNFR5Xql9yO90P4v6zAypcsJ1GMiSNdxH++hU5PuppLETj2aKeHhLZNM+g/DPjOy8RRgIyxXH8UJYZ/4CeNw78cjvXdSrxqabS7P9O5wVaEqWu8e6/XsdjXWcoUAFABQAUAFAHnfjrxwnhi1bycNOcqucYDfTPO3qew4B5NcVat7NWj8T0X9eR2UaPO7y+Fa/wBep8P+IvFNxq9y8t5K0jNk85P6cYHp7Vwwg2+eWr6tnfOaiuSOi6JHLr4dvNQPnWq/Ljtkf14NdUqkY6NnNGlOWsUVrjSdU035pUcKO45x+HNZ3py2sbclSG6djuPC1+NQX7FeYJx8jHuOhH4enX0ryq8fZvnhsdtJ8y5Zbm4LCXT5tjjfF0A7j6EYIP8APt1xUKSmrx0ka2cHZ7HZaUPszCSNmRhyrqcMCOnTg4P0z6ZrO73WjRq0vkz6D8E+NG1Rv7PviPtIHyOPuygDkf74HOMc8/j7mGxPtP3dT4+j7/8ABPDxOH9n+8p/D1Xb/gHpleqeYFABQAUAYniLUxpFjLc5CsFwpPQMe+O+0ZbHfbisqkuSLlsa0488lE+FPF/iNrsyXMrEqmFjBPrn9STknqTlickk+BC9Sd/6SPelanG39XOR8MaK2sSieYZTPA9frW1Wpye5EVGlzvnlsfR+k6OlvEI0UKMdMV5+r3PWSUdEjTfw/FcqVdQc9jSs+htpbVHmet+B20uYXdmuApyQO3X07HoaHJ25ZbGLpL4ob9i2hXUUCsMMFwwxyP8A9Xf1B9hWC91poza6MqM8ulrmX/V9/Qj+8vcEfxD0z12nPYknsc7TjuQ2XiB9MuUmjY7AwZGHBUjv+B6jpUcri+aGklqgumuWWqeh9j+GtaTX7CK9jxlxhwOzjhh+fI9iK+lo1PawU9ns12a3Pm61P2U3DpuvR7G7XQc4UAFAHjfxqvmtNIjjTjzZsE/RG/mCa87Ft8iiurPQwqXM32X6nwvq0x1C8S2jOQzcrjp8xGPTOFFc8IqnBz8jom3Oah5nuvhnTUtI0RRjaBXlN3bZ71OPKkker2S4A96tFvyOgjjA4rVIXMaEdikyYcZB9RWqgmtTBzcXoeX+K/DbaNKuoWYzETh1/u//AGJ6dOOK5KlPk9PyLUvaK/Vfic3fRx3cBRfmVgWXPY/xqf8AD1DdiKiDs7dUQ9U0ePKWs5mspTkA4U+x5RvoVIXPqPeu2S0U18/1PPTs3B/I+n/gTqrSR3OnscquyVB6fwt/7L+VdmElaUof9vfo/wBDkxSvGM+zt+q/U+hq9Y8kKACgDx341WBvNFVkGWilVvwIKn9WFceIjzR9GdmHlyya7o+LNL09o9d8qZdroZCRjGCM/wAjmuKelNndTX71fee86GED4LKCegJGfyry1FnuppHp1pAAAfSuhRE5GoiZYAVoomd7G9bRFhhe1dEYvocs5JbkeoWyzRNFIAysCCPY1lUjpZjpS1uj5s8QxSeH7locHygdyn1Q8Z+qdCO64PavKcWmdstNVseTa/EVKzIfmU8H/ZzkDP0Y49MZr06L5tH1X4nkVVyu6PdfgHf+Zqcij/lrA34EFW/pXTQXLVt/da/FHPXd6d/NP8z63r1zyAoAKAOc8V6Qms6bNbPwTG20+h2n+Y4/WsqivFmtN8sl6nxtFp0s2pLqFwmwyWwLMON7B2jkbt829HBrw5SdnGXVqS9H/wAE+hhCKcZR3ScWvNf8BojvtZ0u2SSM2sszQDc8sZ2lOQMh2YEnJAwM9fSrhFvVNL1/yHUqRho036f5mp4U8VSW2yQTSvZyfdS4GWVT0KP3A9MfTOKc06bs1r5F0pKavF6dnue+WbNND9pjxgrwfqMipT05jZ9InEajrl9ZuTc3wtYRnKxRjOB/tMSfqf0oU3flV7+QSgkuZ2t5m7oXiGx1kYtNQ82VcAqWVl/FeDz6Zq2v5rp+ZkmvsWa8typ4v0E6nACcGVM7SOASen0BIAxnj1rhqQtqdUZJpo+b7rS21GY2Nv8A6wOFCMduwswHX+6Dz7dMYIq4P2dpPZnFOHO+WO9/uPof4I+CpPDd3dSTsswSJEikXodzHep9GUrjHcHPsPWw7VSTqWtbT59TzsXTeHUaV7317adND6Or0TyAoAKAK17u8hwgyxUhR7kYGfb19qmWzsVHdX2Pn3xdoTaQ9vHtAg8hlGOu8zB3J+u7P5+teLXi4WXS1l9//BPoMLJTvbfmu/mtPyOam8I2sw8zy1YMORyPcjjBx7ZxXInKOzPTdNPdHO63pEMCxQRRrH5Z4xn5VJyVAzjk8nPfnvTcr7t3F7NL4Uke0eHiy6dHG3ACj+Qqo35bFSiua/lY5zXNDe5mZ0UhZUKHGDwylW4I4JBPIOfShXi+aPUHFTjyT6FTw58PdP0wKF3lkbeD0bOMYLD5ivoudvscCtZSlUVpM5Y0o0tYL5no91bqItg5AGKykuhcXrc84HhSN/NvWjDea7KCDtZWDYSRSCOVYfiDisLNRv0WlvXqdEVGT5dm9fu6HsPgWSCS1mEB3GG5eFznPzRhc/qSfxr28IuWDX95/kj53Hyc6qfTlSXyujt69A8oKACgAoA83+Jcamyicj5ll4PoCpyPxwPyrgxS9xep6mBdqjXSxwdtJHHD5kpCooySewAryUj6l+RwH9oDXLomFQIA4RSererew6YqLak35tuh7hp8Hk2yDHAGBXVa0UYTa5mk9ire3iQMIpFKbuFbsT1x9azbto1YuCvqnfyNSytwE8xSD/Ot4xsrowqT15GmiG5J6VjLTQeyLFjpxvNkS52rg+ir1JY88nJ4z7e9VTpuo1FbK3ovP1Mp1lh4uT3d/V36Lsu5V8IaZLoOvarZRA/YZ2S6j9FkdVMgB9yx/KvTprkqSgtrJ/19/wCB4NV89KE38V2v6+78T1Guw4QoAKACgDz34lRF9LDj/lnKpP0Ksv8AMiuLEr3Lroz0cG7Vbd1/keMa/ZyDTBMzMLbGZNuScepx/COp/XivFV3ax9O5Je6cZoy21wVlsbqPCnscjI9cHH1oacXqrPzCK5tYa+h7npV286rHLIoUDgo2AfXGTmt4tvQmcXH3ra+hrajbW97CYZGAHUHIyCOQR7g85q2k1ZmEZSg72Zz2kXU8UjWzMsyx42yLxkEkfMOzDHOMg8EdcDBS5Xy3udLtJc1reRe1nURpVlcX78+RE8mD0JVSQPxOB+NLdmE3yxb7HJ+AvHN7FcLLqrMIb+KOWNWjKgKWdcp2IXB+YZDLtJ54G1Go6Emp7P8ATS6/U82tBV43j8Uf11se82F9ZXXmXUDoQOJG3DAwOMnOMYHBzjrzXswlCV5Ra8zxpRnC0JL0NK3uY7ld8RyvY4IB9xkDI9xwa1TT2M2nHRk9MkKACgDnPFllJfaZNDEMsQpIA3EqrqzBR1LbQduOd2OvSsKsXKDSN6MuSak+h4faXu+0+yv1UkYPpjjg+o5r5/4fd7H1kXzWkuxzGhafbaXPN+5Qxzkkqy/JvwV3Lj7p55x1wD1GapSvrLX1OlUo1fgbhPq11+Wh6pp76eBhLNNwIOCw2gY7ZHQnnAFdS5ekfxOedGtHes7baJ338v8AMjufDkGqvG9zEkcMRDCNBt3sBgb24LKOuOAc8561CVu33ClJRVlKU5d29F6LuX0tEtmcqAoOMY44ArBqzdgT0SPOfipfC20CZBkec8cXHfc27H47adPWSXzOes7Qf3HkSX95ZW2m3Em9SsBEJkYsjIkzjGDkADpgfKRjIGaGvefa+n9fmcyasrb21/r8j0/wrfN4l1qIXDJHasqtcRxlljfylYqhG8lmMuwYIJILAAAGuinaU/e0T3Wqvb8zKpeEPc1a2ejtf8j6phVAqhBhQOB0wPof6817astjw3e+pNTEFABQAHjrQB4X42it767N3pAadoVJu3iQmFdhABMg+QyDJDKpYgKS2CDnx8RBTfNT1a+K2339z3MLUdNclTRP4b7/AHdjL0lY7g8DmvOiuh7vS529lZhDlQBj0rpjFnPOVla5oudvzNwBVPTVmC7I524uvtEnlxc/T+dcjd3odKVkcX8R9Al1bRZILYbp4iJkXu7IDlR7spYL/tYq4SUJpvbZ/Mxqxc4NR33R8opr11e+Ra3ErGG0HlQoxOIwTuYKD6t1/AcAAV6EoJK69TyYS1s/Q97+G8l59sFrYzx20syhQ7KGyOrFCRtLZyBjkexrlp83PaDSvpr+nmdVRR5LzTaWun9bH014fS8gu54Lpy/lxxE/O7qWcv8AON+WjJC8oCVxgjkmvYp8ybjLdJfjfXX0PHqcvKpRW7fS21tNPU6+ug5goAKAKWpWv2y2kgxkOuCucBh3QnsHGVJ7Ampkrpr+v6ZUXytMpW19YwQCI+XaKi4MMm2LYBwRtOBt91yhHIJHNSnFK21um1impXvv57nyu+sPpV1IbUiSNZHCgEbWUMcFSOMEYIxx6V87J8snbu/zPq6cnyr0R1On+Mrs9IGyf9rj+VCqW2LaTWpvJdX+qYEmIkPYdfzqHJy9ASUTqdPsUt145PcnrVxjYzlIS7TJxWM9zaG1z57+IHw0YvJqukIDuy80CjBDH70kY755LJ1zyuc7R10qu0J/f/mcNajZucPu/wAi/wCBNU0/7EljdMkN1afv7a6TG9TyTA+AcHfniQEYz2Izq7RT5vdkvejL9DmV21y6r4ZR/U998Lapd6ldyGKNTEETzZ8lVkbBCNApXG04O8YKqwOwnOK7aUpSk2ktUrvz6W/XscVWMYRSu93Zfnf9O56OseAAxJIHJyR/LA/Su6xwX7GXfayun/NJDO8QGd8SeaB9UQmX8ozTCxwmp/Gjwpo8ggu7xo5M4ZGt7lWTjOXVogQPwJ56UCOQ1D9pHwzbgizW6u2HTbGI0/FpGDAf8AP0oCx8z+M/ivrHxJv47NWNlZGQbLeM5AUdXkbAMj4z6KOgUck81VqMXKWyWi8zppR5pKMdG/yOqi6BF/hAA/CvnG+p9RFWVj0PRi+wVC30NbaHc2VxtwprVOxNjpbaatEzNxK2pXcVnG08zBEQFmYkAADnkms5IuLstT45+IHxKufE0rWVoWgsEYgBSQ02ONzkHBXuq/ic9vYw+HULTn8Xbt/wTw8RiXO8IaR/P/gf0zz7TNWuNInS6tZDFNGQysPb1HII9Qcj6jivQcU90eam1sfS3hH9o64tnEevwLOhVV863CxyjbnlkJEb9f4THj0NCVmS9rH0fpnxM8NarAtzDqFtGrfwzSLDIp7hkkKsMeuCp7EjmrIL2vakdG0u5vsbvstvJKF9SiFgOo7j1rTZB1Py31nVrjWb2W8u3Mk0zl3Y9yTnj0A6ADgAACsGWUw2Bj1oA77wBpK31005IHlcAf72cmvNxcuWKj3PUwcOaTl2PZhp4S4CqeK8Nux7yWp29lD5AABpI16HQWvLA0xbI3WuPsyFucKM1rsQ1c+WPip48udWmOlRboYEwXwfv55A+mDz+XTr6eFpKX76XyXbz9TxsXVcL0Y6d338vQ8WH901654ouccHvTDYlt0aVxGpwWIAz78f54NID6XsvgUfJQzX5WRlDMEhygJAJCkuCQPUqufQUXsVY//Z')",
+
+    "9M":
+        "url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEBLAEsAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APn1asglFAEqigCQCgCQAnpS2AiN5DApZ8kjoB/n/PGKzc7bGqh3Kv8AasTkhV2nj7xA6noByf60cw+Ua2rxliHyD/MexH459O+KfNYnlLSXKyBWUgq3AIP5/wCFUpE8ti0KskXpQIKBhQBmKKQEoFAEgGKNgHigDX0q1e4uEiijaaRiMKgyeTgAYIOT+QHJrCUuX0R0QhfTqzs3+FutSbpktsbj0LrwPYZ6/oK5farsdnsX3Rzt78NdYGdtlKXXjOBg9Ocg4+nQij2sRexkYU/gXVbOP/SLdsJzjbyPbI7fgcmq9ou5PsZdjlhbmNj8hiZD93sT77+hPtitU77GMo8uhsWdx9oUnuD09PxHFdEWczVi7mrICgYlAiiBSGSAYoAeBQA4UgPon4TaKEla8kVTIE2rxyvA49u/SvNqO75T1KUbLmZ79vCDFYtpaG6TbuRM4wfyrK6OhLYybxI3UgAH1rN26G8U+p88/EjwlbshvLf9zID823A4+nTrW1KbTsc1eCa5up4hbW5tjhiCTnPv3B9ffB5yTzxXrRPEkXulbmAUDCgRTFSMeKAHUwJYQC6g9Mj+dJ6DR9Q+D54vCujLf37/AD3OZcDsrElQB9OT9a8iTvJnuQjaKNbTvijpep3AtAkqMehK8Ht2Occ9cYpPbVFRTTsmdTqGt2OmxmS4faAATnPpmsLReiOr3lrsjnbTxbpmq5FnMrnOMHIP05pODXQamnocR8QZ2WzaVQSikBsc4B6H6ZPNVS0lqZVk+TQ8BnMbBWXqckH/AOv+NezE8CWhXzW5gLmgAzQBUFSMdigB1AHReF9PGo3wiK7gscr4/wByNj+hwR74rKq3GLa8vz1/A6qEVKaUtrSfzUXb8bH0/J4VW9tLdJc4t0jDKpYbtgxgEEEAHnI5zivH5rPm6HuKKS5Opzdv4CkfUBdBXt0Mwl3eYvy4AAVFCYwcfNyc888nN81/+GsLkUdm38y948jbUUZYuijB2gE5HAyOOtYxaUjqcLR5TxW38Oys7SQfu5FwUXyyjjAHOVAyNwJwdwIIHBG49Lkkcfs3fS1umljv9RaVNKmjucFjC2T/AMB7575rmjZzVu5vNNQd+x4jHp0rQm4T/VIOckD2+XJySAO3YE168ZJNI8GVOTi5paLVlOus4woEFAFYVIxaAFFAHpfw0sWu7m7MfMkVoXX8Joifzxj3BIPBNc9b4bLud2GaUnfflaR9SJqMUNruIJKkKAO5I6V5V0o2tqtD2VFud09LXZiXOrX2nAzTQpIhVmKiQh04GxVQKQzHncS4xxgGtVF21Rr7rfutpL8Tj7LWX1CaQNbSwk5cEgMjDuMhiVYejque3pWEoW1R0c2v+ZqWMMUwM67RjjHQj1H1/rWXKOVlsch4suYba3m80gRmMr+J4/U1VNe8rHNVklB3M2+tF0rw/JFKiLmBGTA5/eJtCtnkMsgJx7jvmuund1F6mM0o4eX+G3z0/wAzw3pXsnzAZoAKAIBUFDhQA4YpgaOl6jNpc6z27vEQQG2MV3JkFlOOqnHIPFS1dWZcZODTWh9XXckzQp9kCSSbiVDEhckZUnGePwrxkrO57yd1a9ipCmp38f8AxMJbOzbLDyWilkyFxhjOrIMv1AC9OozxXQ23rdW+ZaUo/DTlJd07/h/mYuqC60Y+afs84A4a0uAzj5c4MT4JHUDDE8dCSBU2fW1vJlKT25ZxfnF/5GRZ6xLMJGaN4twyQy7Tuzxx6muaUV9ktTaTUuhg67JD5J+2DeibWZc8krggZ9SeK0px1tHc5akla8vhWrMTxp4tttWhSzsN3l53yMQVyeygH0PLHuQMcCu+lScPelucOIrqcfZ09r6/LZfqzzbNdh5ouaAEzQIhFSULmgB1ACigD6J8Fas91Y25lOJADEp9RGSqn64AB9+e9efKNptfM9WnJ8ify+46PxJZ3FxGjW87QOx5Gcg/8BzjPasrcunQ7VUaXuvlZziq9oB58jTSL3bAA+gqGm9Oh0e0aWruY9zq4iYuxGxDnHq/Yfh1o5ehxuXU8+8RahJMqqflEhzg8Egc5I9CTx9K7KMdW+36nDXk0lHv+hyGa7TzgpgJQAUAQA1IxwNAC0ALmgD3zwbZC50GHkq4eVlYdR+8P+Ga8+o7TfyPYoxvSXz/ADOc1++13TXZFUzxKeHBxx9Ac+nbipTRTjJbbGMmrarfrh18te7HJP8An/OaNEHvSNax0sqBNckkD7oPr64qG+iOiFLrI4jxJcebeMB0jAUfzP8AOu+irRv3PIxLvUaXTT9f1MDdW5xhmmAZoATNAEQpAOzSGLnFP0ARjsUt12gnHqQM4qlF6t6JCv0R9J+BEaPQbffgFkaQ4OQBIzMBnA5wRnjrnFeNUleTaPpKEOWmovz/ADMrXGfeIh909eP61nc6eXoU7S3VQM52980XKUEizNiT5V6Cp2LtoeZeMrD7FsvU2kS/K67gGz0DAHGRj72OmM9zXo4eXNenZ6bO2nzPDxdJRtUTWu6637r9TjlkDDIruaseSPzSATNABmgBgKgcc+nvW6prqRfsNZ/Tgc9PQcH8SeB9QavlS2QrihcjI68/5/oPYE+uat2AmA2xjAztOSPVSMHv1xyPwzzTtoLZnufgTX4bjT1siwWS2Tao/vov3T9QMBh6jPQ189XpOk/7r2Z9PhaqqpR+0t0bUkcl7J8oB3Hr7VybHp2M3XNSs9ExFcSpGE6jPzMfZR8x/lWkKc6nwp+uy+856lWFJe/JLy6/duec6p49YqU06PZnP7yUfN9VQZ/8e/IV6cMIlrUd/Jbf5/kePUxrfu0lZd3v9235nm93cS3j+dMzSux+8x/kOgA//VXpKKirRVl5HkuTk7ybb8yspdfmBIzwKbVydi2lww+8Mj19qzcOw7k6yBun5Vk04jHbsVIyqJOFHtn9P/r12GY4HbwO2APw56e7EUbASlwpIHYYH5Y/9mp7AKJSTwexOPxwP5frQIkguJIG8+BmikXng+/t9PxHXNJxUlZrTsXGTg7xdmtmtDobnx1q/leXHOIAQAfLRQ5yOoc8qT/sgYPSuRYenHW1/XX/AIH3nZLF1ZK3Nbppp8+/3HISyu7bnJeRjnczFm9yWPP5Yrqty6I4276sg83043D8lHU/U+tMQ1TuOOg9PRR2/wCBf56UAOVgTnOMcD+p/AcfWgWxMGXt+A/l+Q5+tMBjuE47/qT1wP8APFAEJuivGcY7AZ/WsnFFEQlyF/3APzK1Xb0FsWFmyRj1z+pP+FMAE+Ofx/Lc3+FACCbZnnoB+gyfzJo2AjWYKceyr+mT+ho2Ad5m5gT6buffp+WKAIjLnqeGyPoo6/nQBD53c9DyfZR0H4/1NIY8zFRn+Jz6/kPwFMQolCjA4H/so5/8eb8xQA4XGzLdx0/3m5P9B+GKd7CKrznsenQ9v9pvx7VNyiES4HUL9cZ+v40hjRKePov8if6VN9vkFiSKYg47YP8AJR/Smv6/AREZiF9sf+yilf8Ar5DHGYhX9z/QU76MBplIz77v5BR/Ol/wRDvPKozDrnA/AYH9ad7XAgaU8r9F/DjP50vIYol3nnucfgO34/yoDYUzEkkduB9W4z+FO4bCeaVOPf8AReAPzOaW39dgEeXLBRxt/mep/nTv0Ar+aSf8/QD+tTcZMcLx1/AVWwj/2Q==')",
+
+    BR:
+        "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAtCAIAAACRYfoNAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkJGNTM2NzBBMEMzNTExRTY5Q0NDQkU3NkQ1MUQ1OTFCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkJGNTM2NzBCMEMzNTExRTY5Q0NDQkU3NkQ1MUQ1OTFCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkY1MzY3MDgwQzM1MTFFNjlDQ0NCRTc2RDUxRDU5MUIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QkY1MzY3MDkwQzM1MTFFNjlDQ0NCRTc2RDUxRDU5MUIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4SeXTsAAAKC0lEQVR42uxZCWwU1xl+b469T3vXu16vjY0x5kiMEw47tATEIbUJh0pKSSg91FRNI0VpS5tDUZS0SqBqUoqCaNQEIqUlASqSNrQpacAFEihHQOXyGl9re32svXjXe83uzs71+t4YB/BVDjuBiqeRvDue433//3/ffywDts4Ft/OiwG2+7gD4PwcgU+S4LQEoEEj0Qmd0sTOKP5CvtxMAibYz0u+m+Wtm+vbP8r02vTmHlQiMcVg0WF44poan8LHcHf5zZcPS/ChUyLmqHG6lK9LJa+qTJgAggOhWBSAxBXp+8zT/b8oDDq2EpM9RgVyttNoTLjVkTsXNiawWUMotBgAzFcHvFfbsmNFwvyMBZIBUK0P1IAsRu8+wpVe7wzGZOh03E1ZQ6BYAgDBZmcnm1Ft3NT1b2mVhZGxvoAVQByBDHg8YADUAalW6ScDMyCtcfTMtydOcKZzREVg3R294U6WETNOU/ERR9wuTOnK0EjY80AOQBZ9dyP/0XNG5FmdP1Ihd4ban7p7YO7+io2pqEOgAyBAwMZF+qblwc8AjKTSg5S8cADa8TM+yx18tb12gxky/sfd8UrZxV9VhnxekWWLyfr7ii7Fb9OJXpnetW31i5YJGcr16y+GI5Rf1JZ9FrQTDDZH7hgBItIGVninpfKqkS88oZCsakEhpnnxtyR8/rCTb1YnD7Aaf51n8d+0DZ7f8bJ/VlAUCwZCVqY1tng3+wpTIAEYeZw4oxPCLnNFdMxoeLgizmKsKgCzoS+iWPbvq7zXTgUEErDx8WOOT+F+Mcu689xNfwYqvNhmMRKkYiOY5Eg86o35e25I0XrpyXABIdK5GfGVK6+apLR69iFRjQQqIiFr1yxUH/j0ZWPj//W58gVbqbHOeDuQ+vLCeoRDRKwW49eLa/N48nXAybk4L7LUL1LUBUNPTyvxenJ6+5orh6EADOo7V5tdvV279UzXQpYEoYzRAkoGMiI5CSI5hl1ZqaXIbDPy8OZ1AHNBZCGbncA/lhbsFti5xrSnvGjggMUWG9IbJgW8X9IIrtk5upkFvzPLQhmdSoslkpVmWFiRJycJkMhuLChcjHJ9Mk6jDesrSBBJ9ReUiUVYzf37rW4X5SSRe8UxCfbAz6HiusbgtZQC0NLpXRwWA0xMEj3p7XioL5OtFrOJoSDgkzY8fFB5T6IiWZliKEWQpJfHFhnwbsDW0hyIBeffhUwFfpqGpz2TSRmMcYK7AwOnWP7H/uUePodTgx2LMoQz7YlPRG51uwn5auU4ARCWpaZbUK+WtD7qiOEaRMsytCMFdZ7bU1DkzcT4c5yQJQQppdXSJO9fuYu+ZUjClzJk0RNviIalD33Q+9c67Z1tb+jCPgYYhT+DZWRUdJ7ZsJ0QYEizEFRT450X7Uw3FtThzj6CzwwGQaZaWfzIh+Hxph1UjDzX8pTuxkSKGgtXfKXJP7uMS8e6YGiGqvxWZvF/LOHOM90wtmHOfu2y2wTvREItnP/5b4MAHwebGENBjDIzZzNdv2+bJ4y4XTkNckRTo9S3eTW0FgjxMyhtMYsz+ubbk9orGHxaFdKpKjug7FvjbbX/YWxVLZrKSSIyKA52lSP7SMkBD4/en04LfH/r0UOuxw+FOf9ZoYBcu88xanOO1un2+XpHLCpBds6DO406BkRKAArQUWpwXX5QTa0rrOnktgqMAUKiZVq5mdu0kG4/FYXQJwB5oC1q37a28imQKyndbJVmRsBb1qxBGoqEERalvCP9rb6Cjli+dmLtgZV51lbe9NdPjT6x9wDehIAmkUd+lgEKzsNoVronYuvorqOEBQBTKag5HrVP0mUKjMLqIYQCRqP7Nj2ZgJgwUn/gD0OtYPivLMvEdw9AUDRUFKeQrViHQ1tx7cF9XKgwq59uWfqNUFuj5pfs9Tg6MnIKJFDPgRJ/pB+fLjsfM6OoUMTiE8GYCacP2bmdaoqpsnJZFUBnxuRjh1o9m8Bxjy9Hr9VqFbBul01lZwfkZMhC68ixmo1bgRQmBzx0iIbn2ZNB3kpt2t+tbq/IrTe8BMTGsVkLVTJxM/aq58Ee1Zf6UAQ1JcMMlMgrJCB6J2D8M20v0/CQzD9VEM/jpCBiN4p6jk6NRl9drFkQplcpqtKwsqzlJVpxOMyZHLJGZ4M2N9HGXkxrGZmRDwfihfRfvnyRMK9oJpGGMRFSIBvt7bY+cKX8v6JLx+4Zrg0bIxPhdlHKR177b7ezhNbNtnEmjDHUFNIBon/5Me1Vre1eKyxpNOofdmIilAYWbFZhKCxi1IEiRaApQV8i/KFdMLdCZNJkUU2h5e1H1QDK+2vC9Wfbp+uInL0wM4Q6OkUdKZ6M29Th9QPRGoKD62IxdXQ4MFg66PAvWLPQlk00AkeIZi0xfPK3RMQNyLHtd1rISJ8ARpVICU5wcELYFo1pGB+juHy9rIDXpEMPvDuZWH6t4vc1L9k0rN1ELqa6Iiez7PY46Tj/TwuXo5MvkVoDFIWDH1hwpBzoZmxxXEnPvLQ6GEpi42OqpjBBP8vj9+S4LlxasZr3dgtnCelzWCz7u+e8eXL6oBfFXkAorW1r7uK/0xabiqMSqyWtMijkSf6gubt7Z4zBR8iwrh6ugflZAGVTd1X2i2elvzMclGj7THowpCPW3w5gPRI4gxJ1brs0AEbJb9VxGCDRmF1ZfeH1dDUPKvktlFV5vtrvWnC0/gfsbRrnG/uZ6ymkKpSX6HyHHsbi5wpxyG0SoFp00i74+p/XIBQ8ukoHmKpvheIBEWzEMZDHrurtjFquxu02aU9ny/ssfWE0CTsD9hq9NGL5fW7appTBFOszrmFlcZ0NDIgr5OeM73U5suTk2jqFx/Qxwa/LNBQ2dUeO5Cx5SAtKXWnWGoSgKkshXUCKWAZKWz8JVS/6z44U9DjuPBGJ4QYGvtnjx7n24hGauu7G8mZ6YmmOP/3ZK27zcgZ6YBn85NHnjruqjdR6QUZuSyz0x6TOrpwV/uur46kWNpEVWbznaZ8Y98bHIdcTMGE8lGEot+yZ12HDwqFMJTMrjdQWHzhTVtjkuxg3YUXm29PQJkfmVgfumd1EDU4mESK/3F24KeET5S5lKXDUXoqdaOVx4L82LEkYi0uOTJkZRj36tplSTZ/uDEOwN2Z9uKPYlzDc8jBi7wZaq02Fes7M7rwOnPCtnxq7AhaBIxlhQHZ+QUlkEUCKoerLsurqJP28o6c1qRklPX/hoUQ3301Hr7lCukxUrrGlSN6DB3cmOoOORs1MOhHNIUUCNzYh3TIe7lJIQ2b/2OM8lDfdauVydBNEllfSndI/VTnq5uSguMdeSnr688bqa8uoTJlxE6SkF17N4r78P5K89V34qZrlhqRlPEo8yAlOoJa4Ijp2PQ7ljGDODFjNuv11hV8j7L+YQGzEyGLfFgHFdtALGed35mfUOgJtc/xVgALbmqDgClr53AAAAAElFTkSuQmCCMzQ4Mw==",
+
+    DE:
+        "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAmCAIAAAD7pgrOAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjZFMUI5MDQ1MEM3MjExRTY4MTcyRDlCOEZDMDU3Rjc3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjZFMUI5MDQ2MEM3MjExRTY4MTcyRDlCOEZDMDU3Rjc3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NkUxQjkwNDMwQzcyMTFFNjgxNzJEOUI4RkMwNTdGNzciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NkUxQjkwNDQwQzcyMTFFNjgxNzJEOUI4RkMwNTdGNzciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6gw/inAAAAVklEQVR42uzWUQ2AMAxF0Y5MxCThDI1TMAXwCXjg74VzHZw0TVslSZL039qeDljhgH6FA7YCAAAAAABIvsR3OmAc4c/cM8MnUKclBgAAAAAAAPjaK8AAbScGyes+6bEAAAAASUVORK5CYII5OTg=",
+
+    ES:
+        "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAArCAIAAABHOBkQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkRGRTFGQzcyMEQxRTExRTY4ODAyRUM0Q0I3OUUwQUMzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkRGRTFGQzczMEQxRTExRTY4ODAyRUM0Q0I3OUUwQUMzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6REZFMUZDNzAwRDFFMTFFNjg4MDJFQzRDQjc5RTBBQzMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6REZFMUZDNzEwRDFFMTFFNjg4MDJFQzRDQjc5RTBBQzMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5CGIEmAAAD1UlEQVR42uyYy28bRRzHfzOzD7/Wie3EdtIkdkwSkTRt0iRSlJKKJqhCnJBAiAM3JLhx4QQ3uCP+A269IIGQECFItEhBrVFJBQ1NaVqTuCHOy0lsK2t7nzPDxs0BboYgY4sdzUr7mFnNZ3+v76yQ9vdBKzcMLd5cABfABXABXIAzNYFqqLUBwjNaSwMgvtziLgTGWfBrnbViEKOTqZxBXsVAaq9B/5UF/v7SOce6JaiGvF8Rf9oOzQ/kFYF5RMvpzrPmBkBQNaStY6+qiUS3pLLu14Dl9PskFG4zvQJPRhyLsCYGwHBoeDJfIfEhOgoIeMOrTVd+vNVujVF6iKovku450YMN4E0YA46Li+C4e7ytIoWMrIEqPqM6bnFcKE0w1TIfW6S7s+yRTZBqIxuXRm/VtXpG0c1vBUzghWsWeGHpLlnelAUdhQ71ShsIfnZlmA8PQ7mAbtwQB1J09BIFu5lciAL/nVoEgWGg1et+lseeLGKbHM+/3HdpjCq7WpewVV732Ytrquk3YLS5YoCDgGBwcp5yG8P3W4v+LY9u9uo9m3Lb+UlPcgZ+Xs+pHeJoLKosnp97rVO8ByzTXDGAZAjHXpXJS1YVEQ8tDsv58YAaAIEgdlDyFagSVhAxWBUFg2/7lPGT4tBEFhBhY0nK3vsECE0Xg+YRqDy0pyu9PLu3komNjJjtomLTfMaf/05SfR9qfDt8jXSkGhEG9VmAwHGOkok3yOzrz1xVcZTF8uX+uyyT7PlI969++bU9mSj45M4hs+sCD7zy3rE8YZVYY6Q6+eDNOkYxCPXD3sP24jcPUjMbBwSJx/Y5c/uOPb31bF9sdWWwuKD/tiTt3/ZiNfMF67/4ZGg6h1jzuJAMa5/jQt6feCvaPXRz5VeK44BlcnUnnUxvTkWzzK6IVWA7fOgdabd3Kvtpti+Cuib4mZTivwlgQOoKpeFZRlVmAndyKkOUknhXKSEXZL93JxLpqFQ5WGBx+cLlgeByJJh2rprGAgyUGGi5jy2L4hSAjRwd6hzURhUpIWm52AZYDAsRZLPK0dq7/YHHUhCaqZARuL/bf/2Xy05JjirGyMXN2yVsMMWMTZl4xH50x6dlRKINzukL67MLj0bC3oH3lc/afZUG6Lp6C1lA1GZ795164AEtOUbb4vqBltwVO3aK2cT0uVjxSVfPvq+Dx9dLz/cdeYQydkK4IZKuPi30NN+SU1Fx8l2FU9c63ccINYehtZOnd2xoDIDgZJh/XjnIX235Z3NKjVKjD56LtvamvvCDt7UBiJe3NID7b9QFcAFcABfg/w3whwADALA9jy2I9PhSAAAAAElFTkSuQmCCMTg5Mw==",
+
+    FR:
+        "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAArCAIAAABHOBkQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkJENDg5REJDMEM3MDExRTZBM0QzODREQzFFNDczOURFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkJENDg5REJEMEM3MDExRTZBM0QzODREQzFFNDczOURFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkQ0ODlEQkEwQzcwMTFFNkEzRDM4NERDMUU0NzM5REUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QkQ0ODlEQkIwQzcwMTFFNkEzRDM4NERDMUU0NzM5REUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5eKs0eAAAAZUlEQVR42uzPMQ2AQBAAwXu610EwQxCAAnrE0GAAETR4IqGABg/XfTIrYJMp0W+R7vmOfZynIT14z+te1lJr+tBF4wEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADTVL8AAJaAJpU7NMCAAAAAASUVORK5CYIIxMDEz",
+
+    GB:
+        "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgCAYAAACinX6EAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFERTU2NTJEMEQyRDExRTY5MUVCQTMxOUMzRTQ4OUQ4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFERTU2NTJFMEQyRDExRTY5MUVCQTMxOUMzRTQ4OUQ4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MURFNTY1MkIwRDJEMTFFNjkxRUJBMzE5QzNFNDg5RDgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MURFNTY1MkMwRDJEMTFFNjkxRUJBMzE5QzNFNDg5RDgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4LW+oDAAAIsElEQVR42sxZC1CU1xk9u/zhsWQFX0CmqcQRELRtWjOdjpXH7rI8HYzhJWR8ZSomVZsqoPGRzqStE03lpSa+UNTEKBKbqMGI7APYBaftVIx1DCwgjTREZNQRlAUFdvvdfx+wsCAoLt6ZOwy7/979zvnOd+537wrqYhc3+GS+M1EsnQfLMBiNOF9Rj7/tqYDmYiNA/8PNGRDgyUbHQyQlzkHRrkXQ//sKdBEpEDgJaT3zgrS+0WDETOVJiOb8HIlrCvH3Ly8D7i5P9n0ULjofAUIBpJJAbFwbgTAfIe7kH8Ot3QUwdnZBLA+Bz9q0Vq7r26teOlmi2CMuEj7rVoIRIaTA5ksC+HlGUYPcg1WoqLr+9EQ869EfePgsZKyWInKaMzo+PYnavEN41NICz/mR8H53BSZEhvG55mb963z3g6OFuEEPEBHwJCK809+BWDKXX/P1iCB+nlXWIOtAJbRjoYhnCDxMFoQNa2SI8HVB52cEPPcQum7ehEdUOKZ/uhsTIkL7f7JHGLVFiYvyRARVK+D/4Qbo/1ENnTQe9XHLcL/8ovXJBfIgaIrScObIMoTMmwF0dQP6R6YvHzfgRlMMD3sgIeDnTq2CYkcMgjWnUftaJHQbtsL11dmYWfoFAkqO24AvVtVCmnIInKr0GlTqGsikQVi/JgnhSxah40ghmnYfJiIS4LkgihTxNsRhc81EBPKTlUZ2/jgpwppxISQUd+Yakvorruj8/AvUvpFPGSepR8nge3inRerWcU6t45VcXtXAzA4c3J15AGrlNajLGBGByFydhIi3UvHgyAk07SyATnIBHnFR8MnoI8JaGmYiNI4gop/UWcYzSepRJHX9MQIe3w/4UQIeYQu8mAeuNXmZgcX5Am/CHP8uc2ORhYjvoCZFhDMTWZUE+bIUdJBHNO0iRUji4fl6NLyZWVoUQSSweZo3SyKi6hkQMQA4M7colvHjp1DDgP/4I1/j0w7n0V+JzUe/JqkzEy+rbLABbhmczdP9iFApqDRUjIggKxF6ZpaMiDMlg4hYSCSwad01LlqYdh4jVw9C+qo+4LUJZuDRckwryLULPIfiKNc2mBNiC9w+AcMQIZOZS2N5Kq+IG3kFdomwlAYjIseiCDIqo3F03sabG/UKVqlPdzVJnQfeTIDlVON5g2qcB57ParxfAoZRIsealMeOnl6oT1+GuvgKfi1liohDhGYhuj4vQuvez3CPiJhAtef9h7cgDg+B0NXFhojtO9W0hGHEBHT39mJuiD82/ZGZmxtlvBA1+47xNc4y7ns4l4D3ZfwBkXWWJ7wKlxhw9l0iM3D98PgECatP3KG/k0YSGOsQOzu74UyZiZLPwvJFc8A1NeN2wQnoq69CKBLBI0aKickLIHRztX6ulzLRcOMOZk6fgg7qBOuG6gQVhRC99gvoGm/Db/pkOF1vRDMB77x+A04eYkx+M35Qxu9TAo+cugyFth7dtIYbZVw4cu9pERiNxhETMBZDf7UWutA37BIQpPkKrj+b6chOooXTX/rPUxu0wM5rQ42umnq7ZsRe01+5ht6HfZIdybpPu9EIqicGOlQBAgaeGhi7ZPI+YXSsAgRDBDMeQ8AXr2MPGJxdOY4bA46P5flJ/zgNblQdyrPO9DjEwhkNBgdjFwxJANsKHX2+FlBj8lS7wEi2JuOAbbDp3T+ZDK9/H0AP+e76K1wC/ewHOsIteNS7AOu8HMq4s7NZ6oJB8he9OtvRjRC4lLVFozqkdNLpjKPMhQf7YWn8LyEecHHZrtLi7onT6G1rh6vvT/GTlakwBPjj+vd34P/KZBgfDt2bG8zv1dOzfvRsf4oM+k7cLTqLdoWWX4MlbsryRXj0kheOFF6CqqwWPUZTKzyazYQ7efLSY1Jm1predCz91W9nYN2KeVgYGWQDngG/lXsA986VwmXqVLy88k24L0lG8f96sH39Xni97IkvP0kdXrLmyNd/dAF3b7Zj41oZYiUBpu1K5IZJdMZwEovR+nEBfti8Fa27DsFrzXKkJMfDY5IY2Z+U4VtNtekUaDkMGR+3C7zo8vjzuJMAYdGzeeDshGeTcSUBzzMD9/FBwLbNEC1dBOUPPcjapoaajqdo70Ti0t+MOCtORLS2TAftpSaEh/ohfUUwYqUBPAkTE2L52a7Q4FbOfjS/vw0ue45iQXoakvcloKSxC9l7yqCp0JkkK3rccXg44JSR0OAZfACDgKsq+QDufUPAvb154O7LUgh4N3ZsKuVvlaw3MO7OJvcfzU7BrupcnEjadVBp6iGj43FGmokINtgFJ5vtpRVoyd0PXeaf4ZqTD0n6CsRkJ+F8oxRZH6uh1dQNe0PFDQl8HgFPGwI4Sb2NMu7s7YWA7VvgvjgZiuZuZBNwdsHKn8eHuIEZdb9gubMsr4O6sgHhIX6kxGDMtxBBx2M2GREsLl3mX+CaewiSdb9DdHYiSv4r40vDqogBRHADgQdTjWeuHAz8flkVWrL3m6TuNRX+2zbBnUm9uQc7tihI6t8RcCY5Bpwb+8bJTIRJEQ2kCD8+zhjJYCJYnBYipKSIaFJECSliBymicoAiON7c6AvYXT9bME4eZKOUdgJ+ixbsyzgBX2IGzqRO7jtmGX8CRchoN8qguGPtErEPtRmsNA6aFZGEC9+HY8dulbU0OAY8w47U2Y8ibIG2YhNw/w/fg2hZKtQM+GbFAKlzcGwzYZ+IzLdDEBPmb0NE24VyPoHW0shIQ1Q2M0sZssgsOfZrz5DAvRjwjSZzs5txBwMfKRH9SoPdFrNpVUT6B3DNOsATEUMewRC8YAF+a+dB3Dv9DTiq8Rlb38OLyxnwXuRQjStVNc8P8OGIqCAitPWQkxKYWQ4sjbaSMpNZZnwA0f7jHPdA+8/Wlrz87nZ6Q+DijJfeT8eUlYuhuQ18tEXJX4nD8JwCH+Y6X6mug7Kige8jNvw+FHIqdfart0e0lJ9t59Vo3Xv09v8FGAAWg1LgHMvcbwAAAABJRU5ErkJggjMxMzY=",
+
+    US:
+        "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAiCAIAAABgN0jYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkFBOEQ0MUQxMEQyRDExRTY4NzY1OUZEN0M0RTRGNDEzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkFBOEQ0MUQyMEQyRDExRTY4NzY1OUZEN0M0RTRGNDEzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QUE4RDQxQ0YwRDJEMTFFNjg3NjU5RkQ3QzRFNEY0MTMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QUE4RDQxRDAwRDJEMTFFNjg3NjU5RkQ3QzRFNEY0MTMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6Xh7i9AAAGGElEQVR42uxX+U8UZxjemdmDZWG5BFZgYeUQVBCKsgiI1opyq4gpiUdprWcFjzYaOSRqj9AfNe0PVcGjaaymtdoIlKYiRWpRKbeLIFpAYMFlD/Y+Z/sAjX/CNJv0y2Tyzjffm8zzfe/zPO8Qq9MO07STxWIRBC4CMQKnk0WShNM5O487SZII5x5nY0y+ScEyh2M2xcyiVpnk+ZpBK0GxGBxUYGDiunXxWwvXtLXJLBabRCIqPby1r+/vGY2e7+52/ESRTmscHX3tdNJ79uZIJAu7u1/YbI4NGxI3b06bT4mIDCopKejsHfZWyKM0EzabnbbaGLvY2EK5XNXb85KkSC8vgd5g6ux4bjbbhF4Ch4Pu6HiuUMx4ePDtdke/bNRotPD5PKSMjU/juCiKEgp5Ou1cit4ojI4My4u3EySTJ0Ckrz6CXdTrTRkZie8WvX2q8vLUpCoiMriicsfXX935q33AU+h+9tMPHrX13/j+PkAeKtni7SWorr5utdoyM6UFW1efqqxVq3UorZ3FmZ8cK2QxOyhxiNTb2yNQ5KOY1gwPT+FTQkMDgWdsXDH2ShES4o9yn5hQvngx4ePj4eHhNilXIUamSOSnUGhGkKLRi0MDUHKxseGpqUsZBkCsXHFg06bU9PS4kycvarXGxMSoYx9vO3P62tDQeECAd3X13hs37jc2tnO57FNVu5TT2vPnfwIfduzIkCYvKS+/pNeZpNKYktItZVXXYm3q7QF2O4vZEkpNKRUK3d34XNR9ePjCwcFXXkKBWq2PjhYPD0+6uXG1WkNYWCCwmc1WsAJ8wDmMjyv57lyrxb4oXDQ4MOblLRhXGhKmhnImuqwEm0kAbIoiVSqdwWBKTY3dtTOjqupKf/8oKue94o01NfV/tPa5u/OOHdsm6x+5crkRcrl3Xy7wnD3zrcViXbs2HkdRdeoyMHAE7nxRgJ9EamNWRomUVYfCw4OiY8RN9zrxDJFZs2Z5a2uvwWCG8GdkrMCZjIxARp1J0mg4QfvjZ9B/qG1kVHDTvQ5okUDgtjo9rr7+UW5O8okTRQxzgLTbaT8/4fK4cOi3RqPncKiEhAjcEWNm6bIwX1/hzIxepzOGhYkWSUQ6vQlF5evrGRsrsVpnU7hcTnx8BJdDERwOAYll+IITY3dBgJgYcX5+Sm1tg1Kp9fHx3L07u6Hh8dOnwxwuu7h4IxSpsfEJEGdlSYNDFly7+iu+flmsJCc7GZU2M2OgSTIzyvf9eH+GSfwv4SAy4KhSpYVh8XgckBVbiyrHPMFiQSL1BjNsCxyAwmrUemDm8dhmk1Wl0mIxUiwEpe7qG6jrsjBLYkKa9FFyckxefsoXn383PT0TERF09GjhhYt18GYYc1nZ9j/bZD/feYiv37cvF4Q+d+4WQIIbmVlJSAGAxYvFpaVbzn1Tv3Cwt9AyamXWiWdbCfhUc3M3rBQWhmahqakT2y8WBxiN5paWntFXr0UiX/Chs2uIy2HD9dhsCt3R783dQDXvek1NXSr5dFJuRtr+bCezJGaDr2NjCplsBOLz4Z5stBI//vAgNCzg0892X7pYd/duG3Ydcb9spLamAQkHDuaHSURnTl+VyYbfWf9WcXFmZUXN7dutFEny/RfwxcFMO3Faaik2FReaNpHIB6cRFOSH9g73yUmVv783OI23UFXwgaZpVDzcTaczYVKpnAkM9JHLkbLg2fPx7JWLDuYn0CyC0RNAJxcXF56dI60or+npeRkVFVxSWvBl9XW0zTDd8orcurq2xl+eoMDQYjjsDnAADM7LS1mfkVhZUTs1pYZ8HSrZfLr65sRvLe03LzD8P0CsSNzPc+O68WZbBnwZ6tvT0x2Ng8PhgEmhy4A6ASSWCjz4LCcLno2Yx+POdxlvUhQ6S5J2tEA9wDSABw960G86aSfFJuf+v1i0g0bbTMwVAgoGEUHOPmAe60mKmP8jw0Ab8iaFRVG+tDnQZqAZ5sD8f6PrDrbx1bhrA2jOKnJtACb5a9cGsLTsiEsDcH0SO2natQG05O90bQDTD5+4NoCgnPX/k/i/HCTLxQe76/gZ1y6hWwFLXPsE2B4ClwbwjwADAFdQfjCv3EDcAAAAAElFTkSuQmCCMjQ3Mg=="
+};
diff --git a/vue-options-api-demos/grid/basic/main.js b/vue-options-api-demos/grid/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/basic/main.vue b/vue-options-api-demos/grid/basic/main.vue
new file mode 100644
index 00000000..03eb1f54
--- /dev/null
+++ b/vue-options-api-demos/grid/basic/main.vue
@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <localization :language="localizationLanguage">
+      <intl :locale="locale">
+        <grid @localizationLanguageChange="onLocalizationLanguageChange"></grid>
+      </intl>
+    </localization>
+  </div>
+</template>
+
+<script>
+import Grid from "./Grid.vue";
+import {
+  load,
+  LocalizationProvider,
+  IntlProvider,
+  loadMessages,
+} from "@progress/kendo-vue-intl";
+
+import { enComponentMessages, enCustomMessages } from "./en-US";
+import { esComponentMessages, esCustomMessages } from "./es";
+import { frComponentMessages, frCustomMessages } from "./fr";
+
+import likelySubtags from "cldr-core/supplemental/likelySubtags.json";
+import currencyData from "cldr-core/supplemental/currencyData.json";
+import weekData from "cldr-core/supplemental/weekData.json";
+
+import numbers from "cldr-numbers-full/main/es/numbers.json";
+import caGregorian from "cldr-dates-full/main/es/ca-gregorian.json";
+import dateFields from "cldr-dates-full/main/es/dateFields.json";
+import timeZoneNames from "cldr-dates-full/main/es/timeZoneNames.json";
+import esNumbers from "cldr-numbers-full/main/es/numbers.json";
+import esCurrencies from "cldr-numbers-full/main/es/currencies.json";
+
+import frNumbers from "cldr-numbers-full/main/fr/numbers.json";
+import frCaGregorian from "cldr-dates-full/main/fr/ca-gregorian.json";
+import frDateFields from "cldr-dates-full/main/fr/dateFields.json";
+import frTimeZoneNames from "cldr-dates-full/main/fr/timeZoneNames.json";
+import frCurrencies from "cldr-numbers-full/main/fr/currencies.json";
+
+load(
+  likelySubtags,
+  currencyData,
+  weekData,
+  numbers,
+  caGregorian,
+  dateFields,
+  timeZoneNames,
+  esNumbers,
+  esCurrencies,
+  frNumbers,
+  frCaGregorian,
+  frDateFields,
+  frTimeZoneNames,
+  frCurrencies
+);
+
+loadMessages(enCustomMessages, "English");
+loadMessages(enComponentMessages, "English");
+loadMessages(esCustomMessages, "Spanish");
+loadMessages(esComponentMessages, "Spanish");
+loadMessages(frCustomMessages, "French");
+loadMessages(frComponentMessages, "French");
+
+export default {
+  components: {
+    Grid: Grid,
+    localization: LocalizationProvider,
+    intl: IntlProvider,
+  },
+  data: function () {
+    return {
+      currentLocale: {
+        language: "English",
+        locale: "en",
+      },
+      locales: [
+        {
+          language: "English",
+          locale: "en",
+        },
+        {
+          language: "French",
+          locale: "fr",
+        },
+        {
+          language: "Spanish",
+          locale: "es",
+        },
+      ],
+      localizationLanguage: "English",
+    };
+  },
+  methods: {
+    onLocalizationLanguageChange(e) {
+      this.localizationLanguage = e;
+    },
+  },
+  computed: {
+    locale() {
+      if (this.localizationLanguage === "Spanish") {
+        return "es";
+      }
+
+      if (this.localizationLanguage === "French") {
+        return "fr";
+      }
+
+      return "en";
+    },
+  },
+};
+</script>
+
+<style>
+</style>
diff --git a/vue-options-api-demos/grid/columns/column-menu/basic/main.js b/vue-options-api-demos/grid/columns/column-menu/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/column-menu/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/columns/column-menu/basic/main.vue b/vue-options-api-demos/grid/columns/column-menu/basic/main.vue
new file mode 100644
index 00000000..6890f218
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/column-menu/basic/main.vue
@@ -0,0 +1,68 @@
+<template>
+  <Grid
+        :data-items="gridData"
+        :take="take"
+        :skip="skip"
+        :sortable="true"
+        :sort= "sort"
+        :filter="filter"
+        @datastatechange="dataStateChange"
+        :pageable="true"
+        :column-menu="columnMenu"
+        :columns="columns"
+    >
+    </Grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import { process } from '@progress/kendo-data-query';
+import { products } from './products';
+
+export default {
+    components: {
+        'Grid': Grid
+    },
+   data: function () {
+        return {
+            columnMenu: true,
+            columns: [
+                { field: 'ProductID', title: 'ID',
+                filter: 'numeric'},
+                { field: 'ProductName', title: 'Name'},
+                { field: 'UnitPrice', filter: 'numeric'},
+                { field: 'Discontinued', filter: 'boolean'}
+            ],
+            take: 10,
+            skip: 0,
+            gridData: [],
+            sort: [],
+            filter: null
+        };
+    },
+   created: function() {
+        this.getData();
+    },
+    methods: {
+        getData: function () {
+            let dataState = {
+                take: this.take,
+                skip: this.skip,
+                filter: this.filter,
+                sort: this.sort
+            };
+            this.gridData = process(products, dataState);
+        },
+        createAppState: function(dataState) {
+            this.take = dataState.take;
+            this.skip = dataState.skip;
+            this.sort = dataState.sort;
+            this.filter = dataState.filter;
+            this.getData();
+        },
+        dataStateChange: function (event) {
+            this.createAppState(event.data);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/columns/column-menu/basic/products.js b/vue-options-api-demos/grid/columns/column-menu/basic/products.js
new file mode 100644
index 00000000..6387e1d9
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/column-menu/basic/products.js
@@ -0,0 +1,139 @@
+const products = [
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22.0000,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.3500,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25.0000,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40.0000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    }];
+
+export { products };
diff --git a/vue-options-api-demos/grid/columns/column-menu/checkboxFilter/ColumnMenu.vue b/vue-options-api-demos/grid/columns/column-menu/checkboxFilter/ColumnMenu.vue
new file mode 100644
index 00000000..36652cb5
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/column-menu/checkboxFilter/ColumnMenu.vue
@@ -0,0 +1,49 @@
+<template>
+<div>
+    <GridColumnMenuCheckboxFilter
+      :column="column"
+      :filter="filter"
+      :filterable="filterable"
+      :unique-data="uniqueData"
+      :search-box="false"
+      :data-items="products" :expanded="true"
+      @filterchange="filterChange"
+      @expandchange="expandChange"
+      @closemenu="closeMenu"/>
+</div>
+</template>
+<script>
+import { GridColumnMenuCheckboxFilter } from '@progress/kendo-vue-grid';
+import { products } from './products';
+
+export default {
+    props: {
+        column: Object,
+        filter: Object,
+        filterable: Boolean,
+        uniqueData: {
+            type: Boolean,
+            default: true
+        }
+    },
+    data () {
+        return {
+            products: products
+        };
+    },
+    components: {
+        'GridColumnMenuCheckboxFilter': GridColumnMenuCheckboxFilter
+    },
+    methods: {
+        expandChange () {
+            this.$emit('expandchange');
+        },
+        closeMenu () {
+            this.$emit('closemenu');
+        },
+        filterChange (newDescriptor, e) {
+            this.$emit('filterchange', newDescriptor, e);
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/grid/columns/column-menu/checkboxFilter/main.js b/vue-options-api-demos/grid/columns/column-menu/checkboxFilter/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/column-menu/checkboxFilter/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/columns/column-menu/checkboxFilter/main.vue b/vue-options-api-demos/grid/columns/column-menu/checkboxFilter/main.vue
new file mode 100644
index 00000000..4ac4be86
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/column-menu/checkboxFilter/main.vue
@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <Grid
+      :data-items="result"
+      :take="dataState.take"
+      :skip="dataState.skip"
+      :filter="dataState.filter"
+      @datastatechange="dataStateChange"
+      :columns="columns"
+      :sortable="true"
+      :pageable="true"
+      :page-size="8"
+    >
+      <template v-slot:myTemplate="{ props }">
+        <custom
+          :column="props.column"
+          :filterable="props.filterable"
+          :filter="props.filter"
+          :unique-data="false"
+          @filterchange="handleFilterChange"
+          @closemenu="
+            () => {
+              props.onClosemenu();
+            }
+          "
+        />
+      </template>
+    </Grid>
+  </div>
+</template>
+<script>
+import { Grid } from "@progress/kendo-vue-grid";
+import { process } from "@progress/kendo-data-query";
+import ColumnMenu from "./ColumnMenu.vue";
+import { products } from "./products";
+
+export default {
+  components: {
+    Grid: Grid,
+    custom: ColumnMenu,
+  },
+  data: function () {
+    return {
+      result: [],
+      dataState: {
+        take: 8,
+        skip: 0,
+        filter: null,
+      },
+      columns: [
+        {
+          field: "ProductID",
+          title: "Product Id",
+          filter: "numeric",
+          columnMenu: "myTemplate",
+        },
+        { field: "ProductName", columnMenu: "myTemplate" },
+        { field: "Category.CategoryName", columnMenu: "myTemplate" },
+        { field: "UnitPrice", filter: "numeric", columnMenu: "myTemplate" },
+        { field: "Discontinued", filter: "boolean", columnMenu: "myTemplate" },
+      ],
+    };
+  },
+  created: function () {
+    this.createDataState({
+      take: 8,
+      skip: 0,
+      filter: null,
+    });
+  },
+  methods: {
+    handleFilterChange: function (filter) {
+      this.dataState = {
+        ...this.dataState,
+        filter: filter,
+      };
+      this.result = process(products.slice(0), this.dataState);
+    },
+    createDataState(dataState) {
+      this.dataState = {
+        ...this.dataState,
+      };
+      this.result = process(products.slice(0), this.dataState);
+    },
+    dataStateChange(event) {
+      this.createDataState(event.dataState);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/columns/column-menu/checkboxFilter/products.js b/vue-options-api-demos/grid/columns/column-menu/checkboxFilter/products.js
new file mode 100644
index 00000000..6387e1d9
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/column-menu/checkboxFilter/products.js
@@ -0,0 +1,139 @@
+const products = [
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22.0000,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.3500,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25.0000,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40.0000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    }];
+
+export { products };
diff --git a/vue-options-api-demos/grid/columns/column-menu/custom-style/main.js b/vue-options-api-demos/grid/columns/column-menu/custom-style/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/column-menu/custom-style/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/columns/column-menu/custom-style/main.vue b/vue-options-api-demos/grid/columns/column-menu/custom-style/main.vue
new file mode 100644
index 00000000..1822f6ae
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/column-menu/custom-style/main.vue
@@ -0,0 +1,111 @@
+<template>
+    <Grid
+      :data-items="gridData"
+      :take="take"
+      :skip="skip"
+      :sortable="true"
+      :sort="sort"
+      :filter="filter"
+      :column-menu-icon="starIcon"
+      @datastatechange="dataStateChange"
+      @filterchange="filterChange"
+      @sortchange="sortChange"
+      :pageable="true"
+      :column-menu="true"
+      :columns="columns"
+    >
+    </Grid>
+  </template>
+  <script>
+  import './styles.css';
+  import {
+    Grid,
+    filterGroupByField,
+    sortGroupByField,
+  } from '@progress/kendo-vue-grid';
+  import { starIcon } from '@progress/kendo-svg-icons';
+  import { process } from '@progress/kendo-data-query';
+  import { products } from './products';
+
+  export default {
+    components: {
+      Grid: Grid,
+    },
+    data: function () {
+      return {
+        starIcon,
+        columnMenu: true,
+        columns: [
+          { field: 'ProductName', title: 'Name' },
+          { field: 'Discontinued', filter: 'boolean' },
+        ],
+        take: 10,
+        skip: 0,
+        gridData: [],
+        sort: [],
+        filter: null,
+      };
+    },
+    created: function () {
+      this.getData();
+    },
+    methods: {
+      getData: function () {
+        let dataState = {
+          take: this.take,
+          skip: this.skip,
+          filter: this.filter,
+          sort: this.sort,
+        };
+        this.gridData = process(products, dataState);
+      },
+      createAppState: function (dataState) {
+        this.take = dataState.take;
+        this.skip = dataState.skip;
+        this.sort = dataState.sort;
+        this.filter = dataState.filter;
+        this.getData();
+      },
+      dataStateChange: function (event) {
+        this.createAppState(event.data);
+      },
+      filterChange: function (event) {
+        let isColumnActive = filterGroupByField(event.event.field, event.filter);
+        // @ts-ignore
+        let changedColumn = this.columns.find(function (column) {
+          return column.field === event.event.field;
+        });
+  
+        if (changedColumn) {
+          changedColumn.headerClassName = isColumnActive ? 'active' : '';
+        }
+  
+        this.filter = event.filter;
+        this.getData();
+      },
+      sortChange: function (event) {
+        let isColumnActive = sortGroupByField(event.event.field, event.sort);
+        // @ts-ignore
+        this.columns.find(function (column) {
+          return column.field === event.event.field;
+        }).headerClassName = isColumnActive ? 'active' : '';
+  
+        this.sort = event.sort;
+        this.getData();
+      },
+      expandChange: function (event) {
+        event.dataItem[event.target.$props.expandField] = event.value;
+        //
+        // In Vue 2 context, instead of the above line, inside the expandChange method we should have the following:
+        //
+        //   Vue.set(
+        //     event.dataItem,
+        //     event.target.$props.expandField,
+        //     event.dataItem.expanded === undefined ? false : !event.dataItem.expanded
+        //   );
+        //
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/grid/columns/column-menu/custom-style/products.js b/vue-options-api-demos/grid/columns/column-menu/custom-style/products.js
new file mode 100644
index 00000000..6387e1d9
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/column-menu/custom-style/products.js
@@ -0,0 +1,139 @@
+const products = [
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22.0000,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.3500,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25.0000,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40.0000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    }];
+
+export { products };
diff --git a/vue-options-api-demos/grid/columns/column-menu/custom-style/styles.css b/vue-options-api-demos/grid/columns/column-menu/custom-style/styles.css
new file mode 100644
index 00000000..61adda33
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/column-menu/custom-style/styles.css
@@ -0,0 +1,4 @@
+th.k-header.active > div > a, th.k-header.active > div > a.k-grid-column-menu:hover {
+    color: #fff;
+    background-color: #ff6358;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/grid/columns/column-menu/custom/ColumnMenu.vue b/vue-options-api-demos/grid/columns/column-menu/custom/ColumnMenu.vue
new file mode 100644
index 00000000..befea2bf
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/column-menu/custom/ColumnMenu.vue
@@ -0,0 +1,155 @@
+<template>
+  <div>
+          <GridColumnMenuSort 
+              :column="column"
+              :sortable="sortable"
+              :sort="sort"
+              @closemenu ="closeMenu"
+              @sortchange = "sortChange"/>
+          <GridColumnMenuFilter 
+              :column="column"
+              :filterable="filterable"
+              :filter="filter"
+              @filterfocus="handleFocus"
+              @closemenu ="closeMenu"
+              @expandchange = "expandChange"
+              @filterchange = "filterChange"
+          />
+          <GridColumnMenuItemGroup>
+              <GridColumnMenuItem
+                  :title="'Columns'"
+                  :icon-class="'k-i-columns'"
+                  @menuitemclick="onMenuItemClick"
+              />
+              <GridColumnMenuItemContent :show="columnsExpanded">
+                  <div class='k-column-list-wrapper'>
+                      <form @submit="onSubmit" @reset="onReset">
+                          <div class='k-column-list'>
+                                      <div :key="idx" class='k-column-list-item' v-for="(column, idx) in currentColumns">
+                                          <span>
+                                              <input
+                                                  :id="'column-visiblity-show-' + idx"
+                                                  :class="'k-checkbox k-checkbox-md k-rounded-md'"
+                                                  :type="'checkbox'"
+                                                  :readOnly="true"
+                                                  :disabled="!column.hidden && oneVisibleColumn"
+                                                  :checked="!column.hidden"
+                                                  @click="onToggleColumn(idx)"
+                                              />
+                                              <label
+                                                  :for="'column-visiblity-show-' + idx"
+                                                  :class="'k-checkbox-label'"
+                                                  :style="{ userSelect: 'none' }"
+                                              >
+                                                  {{column.title}} - {{idx}}
+                                              </label>
+                                          </span>
+                                      </div>
+                          </div>
+                          <div class='k-columnmenu-actions'>
+                              <kbutton type='reset' >Reset</kbutton>
+                              <kbutton :theme-color="'primary'">Save</kbutton>
+                          </div>
+                      </form>
+                  </div>
+              </GridColumnMenuItemContent>
+          </GridColumnMenuItemGroup>
+      </div>
+  </template>
+  <script>
+  import { 
+      GridColumnMenuFilter, 
+      GridColumnMenuSort, 
+      GridColumnMenuItemGroup, 
+      GridColumnMenuItemContent,
+      GridColumnMenuItem  
+  } from '@progress/kendo-vue-grid';
+  import { Button } from '@progress/kendo-vue-buttons';
+  import { products } from './products';
+  
+  export default {
+      props: {
+          column: Object,
+          sortable: [Boolean, Object],
+          sort: {
+              type: Array
+          },        
+          filter: Object,
+          filterable: Boolean,
+          columns: Array
+      },
+      data () {
+          return {
+              currentColumns: [],
+              columnsExpanded: false,
+              filterExpanded: false
+          };
+      },
+      created() { 
+          this.$data.currentColumns = this.$props.columns;
+      },
+      components: {
+          'GridColumnMenuSort': GridColumnMenuSort,
+          'GridColumnMenuFilter': GridColumnMenuFilter,
+          'GridColumnMenuItemGroup': GridColumnMenuItemGroup,
+          'GridColumnMenuItemContent': GridColumnMenuItemContent,
+          'GridColumnMenuItem': GridColumnMenuItem,
+        'kbutton': Button
+      },
+      computed: {
+          oneVisibleColumn(){
+              return this.currentColumns.filter(c => !c.hidden).length === 1;
+          }
+      },
+       methods: {
+          handleFocus(e) {
+              this.$emit("contentfocus", e);
+          },
+          onToggleColumn (id) {
+              this.currentColumns = this.currentColumns.map((column, idx) => {
+                      return idx === id ? { ...column, hidden: !column.hidden } : column;
+                  });
+          },
+          onReset (event) {
+              event.preventDefault();
+              const allColumns = this.$props.columns.map(col => {
+                  return {
+                      ...col,
+                      hidden: false
+                  };
+              });
+      
+              this.currentColumns = allColumns; 
+              this.onSubmit();
+          },
+          onSubmit (event) {
+              if (event) {
+                  event.preventDefault();
+              }
+              this.$emit('columnssubmit', this.currentColumns);
+              this.$emit('closemenu');
+          },
+          onMenuItemClick () {
+              const value = !this.columnsExpanded;
+              this.columnsExpanded = value;
+              this.filterExpanded = value ? false : this.filterExpanded;
+          },
+          onFilterExpandChange (value) {
+              this.filterExpanded = value;
+              this.columnsExpanded = value ? false : this.columnsExpanded;
+          },
+          expandChange () {
+             this.$emit('expandchange');
+         },
+         closeMenu () {
+             this.$emit('closemenu');
+         },
+         filterChange (newDescriptor, e) {
+             this.$emit('filterchange', newDescriptor, e);
+         },
+         sortChange (newDescriptor, e) {
+             this.$emit('sortchange', newDescriptor, e);
+         }
+      }
+  }
+  </script>
\ No newline at end of file
diff --git a/vue-options-api-demos/grid/columns/column-menu/custom/main.js b/vue-options-api-demos/grid/columns/column-menu/custom/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/column-menu/custom/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/columns/column-menu/custom/main.vue b/vue-options-api-demos/grid/columns/column-menu/custom/main.vue
new file mode 100644
index 00000000..380dc05d
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/column-menu/custom/main.vue
@@ -0,0 +1,111 @@
+<template>
+  <Grid
+    :data-items="result"
+    :take="dataState.take"
+    :skip="dataState.skip"
+    :sort="dataState.sort"
+    :filter="dataState.filter"
+    @datastatechange="dataStateChange"
+    :columns="columns"
+    :sortable="true"
+    :pageable="true"
+    :page-size="8"
+  >
+    <template v-slot:myTemplate="{ props }">
+      <custom
+        :column="props.column"
+        :filterable="props.filterable"
+        :filter="props.filter"
+        :sortable="props.sortable"
+        :sort="props.sort"
+        :columns="columns"
+        @sortchange="(e) => props.onSortchange(e)"
+        @filterchange="(e) => props.onFilterchange(e)"
+        @closemenu="(e) => props.onClosemenu(e)"
+        @contentfocus="(e) => props.onContentfocus(e)"
+        @columnssubmit="onColumnsSubmit"
+      />
+    </template>
+  </Grid>
+</template>
+<script>
+import { Grid } from "@progress/kendo-vue-grid";
+import { process } from "@progress/kendo-data-query";
+import ColumnMenu from "./ColumnMenu.vue";
+import { products } from "./products";
+
+export default {
+  components: {
+    Grid: Grid,
+    custom: ColumnMenu,
+  },
+  data: function () {
+    return {
+      result: [],
+      dataState: {
+        take: 0,
+        skip: 0,
+      },
+      columns: [
+        {
+          title: "Product Id",
+          field: "ProductID",
+          filter: "numeric",
+          columnMenu: "myTemplate",
+        },
+        {
+          title: "Product Name",
+          field: "ProductName",
+          filter: "text",
+          columnMenu: "myTemplate",
+        },
+        {
+          title: "Quantity Per Unit",
+          field: "QuantityPerUnit",
+          filter: "numeric",
+          columnMenu: "myTemplate",
+        },
+        {
+          title: "Unit Price",
+          field: "UnitPrice",
+          filter: "numeric",
+          columnMenu: "myTemplate",
+        },
+        {
+          title: "Units In Stock",
+          field: "UnitsInStock",
+          filter: "numeric",
+          columnMenu: "myTemplate",
+        },
+        {
+          title: "Discontinued",
+          field: "Discontinued",
+          filter: "boolean",
+          columnMenu: "myTemplate",
+        },
+      ],
+    };
+  },
+  created: function () {
+    this.createDataState({
+      take: 8,
+      skip: 0,
+    });
+  },
+  methods: {
+    handleFilterChange: function (filter) {
+      this.result = process(products.slice(0), { filter: filter });
+    },
+    createDataState(dataState) {
+      this.result = process(products.slice(0), dataState);
+      this.dataState = dataState;
+    },
+    dataStateChange(event) {
+      this.createDataState(event.data);
+    },
+    onColumnsSubmit(columnsState) {
+      this.columns = columnsState;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/columns/column-menu/custom/products.js b/vue-options-api-demos/grid/columns/column-menu/custom/products.js
new file mode 100644
index 00000000..6387e1d9
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/column-menu/custom/products.js
@@ -0,0 +1,139 @@
+const products = [
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22.0000,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.3500,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25.0000,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40.0000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    }];
+
+export { products };
diff --git a/vue-options-api-demos/grid/columns/column-menu/flter-only-custom-icon/ColumnMenu.vue b/vue-options-api-demos/grid/columns/column-menu/flter-only-custom-icon/ColumnMenu.vue
new file mode 100644
index 00000000..9e59222e
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/column-menu/flter-only-custom-icon/ColumnMenu.vue
@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <GridColumnMenuFilter
+      :expanded="true"
+      :column="column"
+      :filterable="filterable"
+      :filter="filter"
+      @filterfocus="handleFocus"
+      @closemenu="closeMenu"
+      @expandchange="expandChange"
+      @filterchange="filterChange"
+    />
+  </div>
+</template>
+<script>
+import {
+  GridColumnMenuFilter,
+  GridColumnMenuSort,
+  GridColumnMenuItemGroup,
+  GridColumnMenuItemContent,
+  GridColumnMenuItem,
+} from '@progress/kendo-vue-grid';
+import { Button } from '@progress/kendo-vue-buttons';
+import { products } from './products';
+
+export default {
+  props: {
+    column: Object,
+    sortable: [Boolean, Object],
+    sort: {
+      type: Array,
+    },
+    filter: Object,
+    filterable: Boolean,
+    columns: Array,
+  },
+  data() {
+    return {
+      currentColumns: [],
+      columnsExpanded: false,
+      filterExpanded: false,
+    };
+  },
+  created() {
+    this.$data.currentColumns = this.$props.columns;
+  },
+  components: {
+    GridColumnMenuSort: GridColumnMenuSort,
+    GridColumnMenuFilter: GridColumnMenuFilter,
+    GridColumnMenuItemGroup: GridColumnMenuItemGroup,
+    GridColumnMenuItemContent: GridColumnMenuItemContent,
+    GridColumnMenuItem: GridColumnMenuItem,
+    kbutton: Button,
+  },
+  computed: {
+    oneVisibleColumn() {
+      return this.currentColumns.filter((c) => !c.hidden).length === 1;
+    },
+  },
+  emits: [
+    'columnssubmit',
+    'closemenu',
+    'expandchange',
+    'filterchange',
+    'sortchange',
+  ],
+  methods: {
+    handleFocus(e) {
+      this.$emit('contentfocus', e);
+    },
+    onToggleColumn(id) {
+      this.currentColumns = this.currentColumns.map((column, idx) => {
+        return idx === id ? { ...column, hidden: !column.hidden } : column;
+      });
+    },
+    onReset(event) {
+      event.preventDefault();
+      const allColumns = this.$props.columns.map((col) => {
+        return {
+          ...col,
+          hidden: false,
+        };
+      });
+
+      this.currentColumns = allColumns;
+      this.onSubmit();
+    },
+    onSubmit(event) {
+      if (event) {
+        event.preventDefault();
+      }
+      this.$emit('columnssubmit', this.currentColumns);
+      this.$emit('closemenu');
+    },
+    onMenuItemClick() {
+      const value = !this.columnsExpanded;
+      this.columnsExpanded = value;
+      this.filterExpanded = value ? false : this.filterExpanded;
+    },
+    onFilterExpandChange(value) {
+      this.filterExpanded = value;
+      this.columnsExpanded = value ? false : this.columnsExpanded;
+    },
+    expandChange() {
+      this.$emit('expandchange');
+    },
+    closeMenu() {
+      this.$emit('closemenu');
+    },
+    filterChange(newDescriptor, e) {
+      this.$emit('filterchange', newDescriptor, e);
+    },
+    sortChange(newDescriptor, e) {
+      this.$emit('sortchange', newDescriptor, e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/columns/column-menu/flter-only-custom-icon/main.js b/vue-options-api-demos/grid/columns/column-menu/flter-only-custom-icon/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/column-menu/flter-only-custom-icon/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/columns/column-menu/flter-only-custom-icon/main.vue b/vue-options-api-demos/grid/columns/column-menu/flter-only-custom-icon/main.vue
new file mode 100644
index 00000000..67ade191
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/column-menu/flter-only-custom-icon/main.vue
@@ -0,0 +1,143 @@
+<template>
+  <Grid
+    :data-items="result"
+    :take="dataState.take"
+    :skip="dataState.skip"
+    :sort="dataState.sort"
+    :filter="dataState.filter"
+    @datastatechange="dataStateChange"
+    :columns="columns"
+    :sortable="true"
+    :pageable="true"
+    :page-size="8"
+  >
+    <template v-slot:myTemplate="{ props }">
+      <custom
+        :column="props.column"
+        :filterable="props.filterable"
+        :filter="props.filter"
+        :sortable="props.sortable"
+        :sort="props.sort"
+        :columns="columns"
+        @sortchange="(e) => props.onSortchange(e)"
+        @filterchange="(e) => props.onFilterchange(e)"
+        @closemenu="(e) => props.onClosemenu(e)"
+        @contentfocus="(e) => props.onContentfocus(e)"
+        @columnssubmit="onColumnsSubmit"
+      />
+    </template>
+  </Grid>
+</template>
+<script>
+import { Grid, filterGroupByField } from '@progress/kendo-vue-grid';
+import { process } from '@progress/kendo-data-query';
+import ColumnMenu from './ColumnMenu.vue';
+import { products } from './products';
+
+export default {
+  components: {
+    Grid,
+    custom: ColumnMenu,
+  },
+  data: function () {
+    return {
+      result: [],
+      dataState: {
+        take: 0,
+        skip: 0,
+      },
+      columns: [
+        {
+          title: 'Product Id',
+          field: 'ProductID',
+          filter: 'numeric',
+          columnMenu: 'myTemplate',
+          headerClassName: 'customMenu',
+        },
+        {
+          title: 'Product Name',
+          field: 'ProductName',
+          filter: 'text',
+          columnMenu: 'myTemplate',
+          headerClassName: 'customMenu',
+        },
+        {
+          title: 'Quantity Per Unit',
+          field: 'QuantityPerUnit',
+          filter: 'text',
+          columnMenu: 'myTemplate',
+          headerClassName: 'customMenu',
+        },
+        {
+          title: 'Unit Price',
+          field: 'UnitPrice',
+          filter: 'numeric',
+          columnMenu: 'myTemplate',
+          headerClassName: 'customMenu',
+        },
+        {
+          title: 'Units In Stock',
+          field: 'UnitsInStock',
+          filter: 'numeric',
+          columnMenu: 'myTemplate',
+          headerClassName: 'customMenu',
+        },
+        {
+          title: 'Discontinued',
+          field: 'Discontinued',
+          filter: 'boolean',
+          columnMenu: 'myTemplate',
+          headerClassName: 'customMenu',
+        },
+      ],
+    };
+  },
+  created: function () {
+    this.createDataState({
+      take: 8,
+      skip: 0,
+    });
+  },
+  methods: {
+    createDataState(dataState) {
+      this.result = process(products.slice(0), dataState);
+      this.dataState = dataState;
+    },
+    dataStateChange(e) {
+      if (e.event) {
+        let isColumnActive = filterGroupByField(e.event.field, e.data.filter);
+
+        // @ts-ignore
+        let changedColumn = this.columns.find(
+          (column) => column.field === e.event.field
+        );
+
+        if (changedColumn) {
+          changedColumn.headerClassName = isColumnActive
+            ? 'customMenu active'
+            : '';
+        }
+      }
+      this.createDataState(e.data);
+    },
+    onColumnsSubmit(columnsState) {
+      this.columns = columnsState;
+    },
+  },
+};
+</script>
+<style>
+th.k-header.customMenu > div > div > span.k-i-more-vertical::before,
+th.k-header.customMenu.active > div > div > span.k-i-more-vertical::before {
+  content: '\e129';
+}
+
+.k-columnmenu-item {
+  display: none;
+}
+
+th.k-header.active > div > a {
+  color: #fff;
+  background-color: #ff6358;
+}
+</style>
diff --git a/vue-options-api-demos/grid/columns/column-menu/flter-only-custom-icon/products.js b/vue-options-api-demos/grid/columns/column-menu/flter-only-custom-icon/products.js
new file mode 100644
index 00000000..6387e1d9
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/column-menu/flter-only-custom-icon/products.js
@@ -0,0 +1,139 @@
+const products = [
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22.0000,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.3500,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25.0000,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40.0000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    }];
+
+export { products };
diff --git a/vue-options-api-demos/grid/columns/column-virtualization/main.js b/vue-options-api-demos/grid/columns/column-virtualization/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/column-virtualization/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/columns/column-virtualization/main.vue b/vue-options-api-demos/grid/columns/column-virtualization/main.vue
new file mode 100644
index 00000000..0f7ea5f6
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/column-virtualization/main.vue
@@ -0,0 +1,63 @@
+<template>
+    <Grid  
+        :style="{width: '620px', height: '400px'}"
+        :scrollable="'virtual'"
+        :column-virtualization="true"
+        :skip="skip"
+        :take="take"
+        :total="numberOfRows"
+        :data-items="products"
+        :columns = "columns"
+        @pagechange = "pageChange">
+    </Grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+
+export default {
+    components: {
+        'Grid': Grid
+    },
+    created () {
+        this.numberOfColumns = 100;
+        this.numberOfRows = 100000;
+        this.columns = this.getColumns();
+        this.products = this.tempProducts = this.getData(this.skip, this.take);
+    },
+    data: function () {
+        return {
+            tempProducts: [],
+            products: [],
+            columns: [],
+            skip: 0, 
+            take: 15
+        };
+    },
+    methods: {
+        getColumns() {
+            const cols = [];
+            for (let c = 1; c <= this.numberOfColumns; c++) {
+                cols.push({ field: 'Field-' + c.toString(), width: 150 });
+            }
+            return cols;
+        },
+        pageChange(event) {
+            this.skip = event.page.skip;
+            this.take = event.page.take;
+            this.products = this.getData(event.page.skip, event.page.take);
+        },
+        getData(skip, take) {
+            const page = [];
+            for (let r = skip + 1; r <= skip + take && r <= this.numberOfRows; r++) {
+                const row = {};
+                for (let c = 1; c <= this.numberOfColumns; c++) {
+                    row['Field-' + c] = 'R' + r + ':C' + c;
+                }
+                page.push(row);
+            }
+            return page;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/columns/dynamic-column-generation/main.js b/vue-options-api-demos/grid/columns/dynamic-column-generation/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/dynamic-column-generation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/columns/dynamic-column-generation/main.vue b/vue-options-api-demos/grid/columns/dynamic-column-generation/main.vue
new file mode 100644
index 00000000..fa66d1ca
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/dynamic-column-generation/main.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="row">
+    <div class="col m-3">
+      <NumericTextBox
+        v-if="!loader"
+        v-model="numberOfColumns"
+        :min="1"
+        :label="'Number of columns'"
+        :style="{ width: '250px' }"
+      ></NumericTextBox>
+      <div>Loading columns from a remote service</div>
+    </div>
+  </div>
+  <Grid
+    :style="{ height: '440px', width: '700px' }"
+    :data-items="data"
+    :columns="columns"
+    :loader="loader"
+  >
+  </Grid>
+</template>
+<script>
+import { NumericTextBox } from "@progress/kendo-vue-inputs";
+import { Grid } from "@progress/kendo-vue-grid";
+
+export default {
+  components: {
+    Grid,
+    NumericTextBox,
+  },
+  data: function () {
+    return {
+      dataItems: [],
+      data: [],
+      numberOfColumns: 3,
+      numberOfRows: 10,
+    };
+  },
+  created() {
+    this.data = this.getData();
+  },
+  computed: {
+    columns() {
+      const columns = [
+        {
+          field: "id",
+          width: "150px",
+        },
+      ];
+      for (let c = 1; c < this.numberOfColumns; c++) {
+        columns.push({
+          field: "Field-" + c.toString(),
+          width: "150px",
+        });
+      }
+      return columns;
+    },
+  },
+  watch: {
+    numberOfColumns() {
+      this.loader = true;
+      setTimeout(() => {
+        this.data = this.getData();
+        this.loader = false;
+      }, 1000);
+    },
+  },
+  methods: {
+    getData() {
+      const page = [];
+      for (let r = 1; r <= this.numberOfRows; r++) {
+        const row = {
+          id: r,
+        };
+        for (let c = 1; c <= this.numberOfColumns; c++) {
+          row["Field-" + c] = "R" + r + ":C" + c;
+        }
+        page.push(row);
+      }
+      return page;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/columns/headers/main.js b/vue-options-api-demos/grid/columns/headers/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/headers/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/columns/headers/main.vue b/vue-options-api-demos/grid/columns/headers/main.vue
new file mode 100644
index 00000000..3f4d69bd
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/headers/main.vue
@@ -0,0 +1,53 @@
+<template>
+  <Grid
+        :style="{height: '420px'}"
+        :data-items="products"
+        :resizable="true"
+        :reorderable="true"
+        @columnreorder="columnReorder"
+        :columns = "columns">
+    </Grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+
+export default {
+    components: {
+        'Grid': Grid
+    },
+     data: function () {
+        return {
+            products: this.createRandomData(500),
+            columns: [
+                { field: 'ProductID', title: 'ID', width: '40px', resizable: 'false'},
+                { title: 'Product Informaiton', children: [
+                    { field: 'ProductName', title: 'Name' },
+                    { title: 'Unit', children: [
+                            { field: 'UnitPrice', title: 'Price' },
+                            { field: 'UnitsInStock', title: 'In stock' }
+                        ]
+                    }
+                ]}
+            ]
+        };
+    },
+    methods: {
+        columnReorder: function(options) {
+            this.columns = options.columns;
+        },
+        createRandomData(count) {
+            const productNames = ["Aniseed Syrup", "Chef Anton's Cajun Seasoning", "Chef Anton's Gumbo Mix", "Grandma's Boysenberry Spread", "Uncle Bob's Organic Dried Pears", "Northwoods Cranberry Sauce", "Mishi Kobe Niku"];
+            const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120];
+            const units = [5, 1, 54, 555, 16, 293, 654, 42, 89, 90, 32, 293, 412]
+
+            return Array(count).fill({}).map((_, idx) => ({
+                ProductID: idx + 1,
+                ProductName: productNames[Math.floor(Math.random() * productNames.length)],
+                UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)],
+                UnitsInStock: units[Math.floor(Math.random() * units.length)],
+            }));
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/columns/hidden/Header.vue b/vue-options-api-demos/grid/columns/hidden/Header.vue
new file mode 100644
index 00000000..6c446a82
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/hidden/Header.vue
@@ -0,0 +1,35 @@
+<template>
+  <div
+    :style="{
+      display: 'flex',
+    }"
+  >
+    <div :style="{ paddingTop: '5px', paddingRight: '40px' }">{{ title }}</div>
+    <KButton
+      @click="hidecolumn(field)"
+      :theme-color="'primary'"
+      style="float: right"
+    >
+      Hide
+    </KButton>
+  </div>
+</template>
+<script>
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    KButton,
+  },
+  props: {
+    field: String,
+    title: String,
+    sortable: [Boolean, Object],
+  },
+  methods: {
+    hidecolumn: function (e) {
+      this.$emit('hidecolumn', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/columns/hidden/main.js b/vue-options-api-demos/grid/columns/hidden/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/hidden/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/columns/hidden/main.vue b/vue-options-api-demos/grid/columns/hidden/main.vue
new file mode 100644
index 00000000..cd813180
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/hidden/main.vue
@@ -0,0 +1,95 @@
+<template>
+    <div>
+      <div class="example-config">
+        <KButton @click="restoreColumns">Restore hidden columns</KButton>
+      </div>
+      <Grid
+        :style="{ height: '280px' }"
+        :data-items="items"
+        :columns="columns"
+        @hidecolumn="hidecolumn"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <custom
+            :field="props.field"
+            :title="props.title"
+            @hidecolumn="hidecolumn"
+          />
+        </template>
+      </Grid>
+    </div>
+  </template>
+  <script>
+  import { Grid } from '@progress/kendo-vue-grid';
+  import { Button as KButton } from '@progress/kendo-vue-buttons';
+  import Header from './Header.vue';
+
+  export default {
+    components: {
+      Grid,
+      custom: Header,
+      KButton,
+    },
+    data: function () {
+      return {
+        columns: [
+          {
+            field: 'ProductID',
+            title: 'ID',
+            headerCell: 'myTemplate',
+            width: '130px',
+          },
+          {
+            field: 'ProductName',
+            title: 'Product Name',
+            width: '300px',
+            headerCell: 'myTemplate',
+          },
+          {
+            field: 'UnitPrice',
+            title: 'Unit Price',
+            headerCell: 'myTemplate',
+          },
+        ],
+        items: [
+          {
+            ProductID: 1,
+            ProductName: 'Chai',
+            UnitPrice: 18.0,
+          },
+          {
+            ProductID: 2,
+            ProductName: 'Chang',
+            UnitPrice: 19.0,
+          },
+          {
+            ProductID: 3,
+            ProductName: 'Aniseed Syrup',
+            UnitPrice: 10.0,
+          },
+          {
+            ProductID: 4,
+            ProductName: "Chef Anton's Cajun Seasoning",
+            UnitPrice: 22.0,
+          },
+        ],
+      };
+    },
+    methods: {
+      hidecolumn: function (field) {
+        this.columns.map(function (column) {
+          if (column.field === field) {
+            column.hidden = true;
+          }
+        });
+      },
+      restoreColumns: function () {
+        this.columns.map(function (column) {
+          if (column.hidden) {
+            column.hidden = false;
+          }
+        });
+      },
+    },
+  };
+  </script>
diff --git a/vue-options-api-demos/grid/columns/locked/main.js b/vue-options-api-demos/grid/columns/locked/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/locked/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/columns/locked/main.vue b/vue-options-api-demos/grid/columns/locked/main.vue
new file mode 100644
index 00000000..4dbae164
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/locked/main.vue
@@ -0,0 +1,44 @@
+<template>
+    <grid  
+        :style="{height: '400px', width: '500px'}"
+        :data-items="products"
+        :reorderable="true"
+        @columnreorder="columnReorder"
+        :columns = "columns"
+    >
+    </grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import { products } from './products'
+
+export default {
+    components: {
+        'grid': Grid
+    },
+     data: function () {
+        return {
+            products: this.createRandomData(),
+            columns: [
+                { field: 'ProductID', title: 'ID', width: '45px', locked: true},
+                { field: 'ProductName', title: 'Name', width: '250px' },
+                { field: 'Category.CategoryName', title: 'CategoryName' },         
+                { field: 'UnitPrice', title: 'Price', width: '90px' },
+                { field: 'UnitsInStock', title: 'In stock', width: '90px' },
+                { field: 'UnitsOnOrder', title: 'On order', width: '90px' },
+                { field: 'Discontinued', locked: true , width: '120px' },
+                { field: 'QuantityPerUnit', title: 'Additional details', width: '250px' }
+            ]
+        };
+    },
+    methods: {
+        columnReorder: function(options) {
+            this.columns = options.columns;
+        },
+       createRandomData() {
+           return products;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/columns/locked/products.js b/vue-options-api-demos/grid/columns/locked/products.js
new file mode 100644
index 00000000..2a1ce279
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/locked/products.js
@@ -0,0 +1,1313 @@
+const products = [
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22.0000,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.3500,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25.0000,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40.0000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97.0000,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31.0000,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 11,
+        "ProductName": "Queso Cabrales",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "1 kg pkg.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 30,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 12,
+        "ProductName": "Queso Manchego La Pastora",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 86,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 13,
+        "ProductName": "Konbu",
+        "SupplierID": 6,
+        "CategoryID": 8,
+        "QuantityPerUnit": "2 kg box",
+        "UnitPrice": 6.0000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 14,
+        "ProductName": "Tofu",
+        "SupplierID": 6,
+        "CategoryID": 7,
+        "QuantityPerUnit": "40 - 100 g pkgs.",
+        "UnitPrice": 23.2500,
+        "UnitsInStock": 35,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 15,
+        "ProductName": "Genen Shouyu",
+        "SupplierID": 6,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 250 ml bottles",
+        "UnitPrice": 15.5000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 16,
+        "ProductName": "Pavlova",
+        "SupplierID": 7,
+        "CategoryID": 3,
+        "QuantityPerUnit": "32 - 500 g boxes",
+        "UnitPrice": 17.4500,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 17,
+        "ProductName": "Alice Mutton",
+        "SupplierID": 7,
+        "CategoryID": 6,
+        "QuantityPerUnit": "20 - 1 kg tins",
+        "UnitPrice": 39.0000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 18,
+        "ProductName": "Carnarvon Tigers",
+        "SupplierID": 7,
+        "CategoryID": 8,
+        "QuantityPerUnit": "16 kg pkg.",
+        "UnitPrice": 62.5000,
+        "UnitsInStock": 42,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 19,
+        "ProductName": "Teatime Chocolate Biscuits",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 12 pieces",
+        "UnitPrice": 9.2000,
+        "UnitsInStock": 25,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 20,
+        "ProductName": "Sir Rodney's Marmalade",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "30 gift boxes",
+        "UnitPrice": 81.0000,
+        "UnitsInStock": 40,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 21,
+        "ProductName": "Sir Rodney's Scones",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 pkgs. x 4 pieces",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 3,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 22,
+        "ProductName": "Gustaf's Knäckebröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 500 g pkgs.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 104,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 23,
+        "ProductName": "Tunnbröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "12 - 250 g pkgs.",
+        "UnitPrice": 9.0000,
+        "UnitsInStock": 61,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 24,
+        "ProductName": "Guaraná Fantástica",
+        "SupplierID": 10,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 355 ml cans",
+        "UnitPrice": 4.5000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 25,
+        "ProductName": "NuNuCa Nuß-Nougat-Creme",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "20 - 450 g glasses",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 26,
+        "ProductName": "Gumbär Gummibärchen",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 250 g bags",
+        "UnitPrice": 31.2300,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 27,
+        "ProductName": "Schoggi Schokolade",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 100 g pieces",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 49,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 28,
+        "ProductName": "Rössle Sauerkraut",
+        "SupplierID": 12,
+        "CategoryID": 7,
+        "QuantityPerUnit": "25 - 825 g cans",
+        "UnitPrice": 45.6000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 29,
+        "ProductName": "Thüringer Rostbratwurst",
+        "SupplierID": 12,
+        "CategoryID": 6,
+        "QuantityPerUnit": "50 bags x 30 sausgs.",
+        "UnitPrice": 123.7900,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 30,
+        "ProductName": "Nord-Ost Matjeshering",
+        "SupplierID": 13,
+        "CategoryID": 8,
+        "QuantityPerUnit": "10 - 200 g glasses",
+        "UnitPrice": 25.8900,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 31,
+        "ProductName": "Gorgonzola Telino",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "12 - 100 g pkgs",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 32,
+        "ProductName": "Mascarpone Fabioli",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 32.0000,
+        "UnitsInStock": 9,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 33,
+        "ProductName": "Geitost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "500 g",
+        "UnitPrice": 2.5000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 34,
+        "ProductName": "Sasquatch Ale",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 111,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 35,
+        "ProductName": "Steeleye Stout",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 36,
+        "ProductName": "Inlagd Sill",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 250 g  jars",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 37,
+        "ProductName": "Gravad lax",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 500 g pkgs.",
+        "UnitPrice": 26.0000,
+        "UnitsInStock": 11,
+        "UnitsOnOrder": 50,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 38,
+        "ProductName": "Côte de Blaye",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 75 cl bottles",
+        "UnitPrice": 263.5000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 39,
+        "ProductName": "Chartreuse verte",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "750 cc per bottle",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 69,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 40,
+        "ProductName": "Boston Crab Meat",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 4 oz tins",
+        "UnitPrice": 18.4000,
+        "UnitsInStock": 123,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 41,
+        "ProductName": "Jack's New England Clam Chowder",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 12 oz cans",
+        "UnitPrice": 9.6500,
+        "UnitsInStock": 85,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 42,
+        "ProductName": "Singaporean Hokkien Fried Mee",
+        "SupplierID": 20,
+        "CategoryID": 5,
+        "QuantityPerUnit": "32 - 1 kg pkgs.",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 43,
+        "ProductName": "Ipoh Coffee",
+        "SupplierID": 20,
+        "CategoryID": 1,
+        "QuantityPerUnit": "16 - 500 g tins",
+        "UnitPrice": 46.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 44,
+        "ProductName": "Gula Malacca",
+        "SupplierID": 20,
+        "CategoryID": 2,
+        "QuantityPerUnit": "20 - 2 kg bags",
+        "UnitPrice": 19.4500,
+        "UnitsInStock": 27,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 45,
+        "ProductName": "Rogede sild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "1k pkg.",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 5,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 46,
+        "ProductName": "Spegesild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "4 - 450 g glasses",
+        "UnitPrice": 12.0000,
+        "UnitsInStock": 95,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 47,
+        "ProductName": "Zaanse koeken",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 - 4 oz boxes",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 48,
+        "ProductName": "Chocolade",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 pkgs.",
+        "UnitPrice": 12.7500,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 49,
+        "ProductName": "Maxilaku",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 - 50 g pkgs.",
+        "UnitPrice": 20.0000,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 60,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 50,
+        "ProductName": "Valkoinen suklaa",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "12 - 100 g bars",
+        "UnitPrice": 16.2500,
+        "UnitsInStock": 65,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 51,
+        "ProductName": "Manjimup Dried Apples",
+        "SupplierID": 24,
+        "CategoryID": 7,
+        "QuantityPerUnit": "50 - 300 g pkgs.",
+        "UnitPrice": 53.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 52,
+        "ProductName": "Filo Mix",
+        "SupplierID": 24,
+        "CategoryID": 5,
+        "QuantityPerUnit": "16 - 2 kg boxes",
+        "UnitPrice": 7.0000,
+        "UnitsInStock": 38,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 53,
+        "ProductName": "Perth Pasties",
+        "SupplierID": 24,
+        "CategoryID": 6,
+        "QuantityPerUnit": "48 pieces",
+        "UnitPrice": 32.8000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 54,
+        "ProductName": "Tourtière",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "16 pies",
+        "UnitPrice": 7.4500,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 55,
+        "ProductName": "Pâté chinois",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "24 boxes x 2 pies",
+        "UnitPrice": 24.0000,
+        "UnitsInStock": 115,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 56,
+        "ProductName": "Gnocchi di nonna Alice",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 57,
+        "ProductName": "Ravioli Angelo",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 19.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 58,
+        "ProductName": "Escargots de Bourgogne",
+        "SupplierID": 27,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 pieces",
+        "UnitPrice": 13.2500,
+        "UnitsInStock": 62,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 59,
+        "ProductName": "Raclette Courdavault",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 55.0000,
+        "UnitsInStock": 79,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 60,
+        "ProductName": "Camembert Pierrot",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "15 - 300 g rounds",
+        "UnitPrice": 34.0000,
+        "UnitsInStock": 19,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 61,
+        "ProductName": "Sirop d'érable",
+        "SupplierID": 29,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 500 ml bottles",
+        "UnitPrice": 28.5000,
+        "UnitsInStock": 113,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 62,
+        "ProductName": "Tarte au sucre",
+        "SupplierID": 29,
+        "CategoryID": 3,
+        "QuantityPerUnit": "48 pies",
+        "UnitPrice": 49.3000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 63,
+        "ProductName": "Vegie-spread",
+        "SupplierID": 7,
+        "CategoryID": 2,
+        "QuantityPerUnit": "15 - 625 g jars",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 64,
+        "ProductName": "Wimmers gute Semmelknödel",
+        "SupplierID": 12,
+        "CategoryID": 5,
+        "QuantityPerUnit": "20 bags x 4 pieces",
+        "UnitPrice": 33.2500,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 80,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 65,
+        "ProductName": "Louisiana Fiery Hot Pepper Sauce",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "32 - 8 oz bottles",
+        "UnitPrice": 21.0500,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 66,
+        "ProductName": "Louisiana Hot Spiced Okra",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 8 oz jars",
+        "UnitPrice": 17.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 100,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 67,
+        "ProductName": "Laughing Lumberjack Lager",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 52,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 68,
+        "ProductName": "Scottish Longbreads",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 8 pieces",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 69,
+        "ProductName": "Gudbrandsdalsost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 kg pkg.",
+        "UnitPrice": 36.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 70,
+        "ProductName": "Outback Lager",
+        "SupplierID": 7,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 355 ml bottles",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 71,
+        "ProductName": "Flotemysost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 21.5000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 72,
+        "ProductName": "Mozzarella di Giovanni",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 34.8000,
+        "UnitsInStock": 14,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 73,
+        "ProductName": "Röd Kaviar",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 150 g jars",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 101,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 74,
+        "ProductName": "Longlife Tofu",
+        "SupplierID": 4,
+        "CategoryID": 7,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 20,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 75,
+        "ProductName": "Rhönbräu Klosterbier",
+        "SupplierID": 12,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 0.5 l bottles",
+        "UnitPrice": 7.7500,
+        "UnitsInStock": 125,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 76,
+        "ProductName": "Lakkalikööri",
+        "SupplierID": 23,
+        "CategoryID": 1,
+        "QuantityPerUnit": "500 ml",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 57,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 77,
+        "ProductName": "Original Frankfurter grüne Soße",
+        "SupplierID": 12,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 boxes",
+        "UnitPrice": 13.0000,
+        "UnitsInStock": 32,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    }
+];
+
+export { products };
diff --git a/vue-options-api-demos/grid/columns/reordering/main.js b/vue-options-api-demos/grid/columns/reordering/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/reordering/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/columns/reordering/main.vue b/vue-options-api-demos/grid/columns/reordering/main.vue
new file mode 100644
index 00000000..f1eeadaf
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/reordering/main.vue
@@ -0,0 +1,44 @@
+<template>
+  <Grid
+        :style="{height: '400px'}"
+        :data-items="products"
+        :reorderable="true"
+        @columnreorder="columnReorder"
+        :columns = "columns">
+    </Grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+
+export default {
+    components: {
+        'Grid': Grid
+    },
+    data: function () {
+        return {
+            products: this.createRandomData(500),
+            columns: [
+                { field: 'ProductID', title: 'ID', minResizableWidth: '30'},
+                { field: 'ProductName', title: 'Name' },
+                { field: 'UnitPrice', title: 'Price' }
+            ]
+        };
+    },
+    methods: {
+        columnReorder: function(options) {
+            this.columns = options.columns;
+        },
+        createRandomData(count) {
+            const productNames = ["Aniseed Syrup", "Chef Anton's Cajun Seasoning", "Chef Anton's Gumbo Mix", "Grandma's Boysenberry Spread", "Uncle Bob's Organic Dried Pears", "Northwoods Cranberry Sauce", "Mishi Kobe Niku"];
+            const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120]
+
+            return Array(count).fill({}).map((_, idx) => ({
+                ProductID: idx + 1,
+                ProductName: productNames[Math.floor(Math.random() * productNames.length)],
+                UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)]
+            }));
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/columns/resizing/main.js b/vue-options-api-demos/grid/columns/resizing/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/resizing/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/columns/resizing/main.vue b/vue-options-api-demos/grid/columns/resizing/main.vue
new file mode 100644
index 00000000..8943c9aa
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/resizing/main.vue
@@ -0,0 +1,40 @@
+<template>
+   <Grid
+        :style="{height: '400px'}"
+        :data-items="products"
+        :resizable="true"
+        :columns = "columns">
+    </Grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+
+export default {
+    components: {
+        'Grid': Grid
+    },
+    data: function () {
+        return {
+            products: this.createRandomData(500),
+            columns: [
+                { field: 'ProductID', title: 'ID', width: '45px', minResizableWidth: '30'},
+                { field: 'ProductName', title: 'Name', width: '250px' },
+                { field: 'UnitPrice', title: 'Price', width: '80px' }
+            ]
+        };
+    },
+    methods: {
+        createRandomData(count) {
+            const productNames = ["Aniseed Syrup", "Chef Anton's Cajun Seasoning", "Chef Anton's Gumbo Mix", "Grandma's Boysenberry Spread", "Uncle Bob's Organic Dried Pears", "Northwoods Cranberry Sauce", "Mishi Kobe Niku"];
+            const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120]
+
+            return Array(count).fill({}).map((_, idx) => ({
+                ProductID: idx + 1,
+                ProductName: productNames[Math.floor(Math.random() * productNames.length)],
+                UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)]
+            }));
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/columns/widths/fit-smaller-screens/main.js b/vue-options-api-demos/grid/columns/widths/fit-smaller-screens/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/widths/fit-smaller-screens/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/columns/widths/fit-smaller-screens/main.vue b/vue-options-api-demos/grid/columns/widths/fit-smaller-screens/main.vue
new file mode 100644
index 00000000..ef3ff5fc
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/widths/fit-smaller-screens/main.vue
@@ -0,0 +1,74 @@
+<template>
+	<div ref="divWrapper">
+		<Grid 
+      ref="grid" 
+      style="height: 400px" 
+      :data-items="gridData" 
+      :resizable="true" 
+      :columns="columns"
+    >
+		</Grid>
+	</div>
+</template>
+<script>
+import { Grid } from "@progress/kendo-vue-grid";
+import products from "./products.json";
+
+
+const columnsData = [
+  { field: "ProductID", title: "ID" },
+  {
+    field: "ProductName",
+    title: "Name",
+  },
+  {
+    field: "Category.CategoryName",
+    title: "CategoryName",
+  },
+  {
+    field: "UnitPrice",
+    title: "Price",
+    minGridWidth: 500
+  },
+  {
+    field: "UnitsInStock",
+    title: "In stock",
+    minGridWidth: 600
+  }
+];
+
+export default {
+  components: {
+    Grid: Grid
+  },
+  mounted() {
+    this.grid = document.querySelector(".k-grid");
+    window.addEventListener("resize", this.handleResize);
+    this.defineColumns();
+    this.handleResize();
+  },
+  data: function() {
+    return {
+      grid:'',
+      gridData: products,
+      columns: [],
+    };
+  },
+  methods: {
+    defineColumns(){
+      this.columns = columnsData.map((column, index) => {
+        return {
+          field: column.field,
+          title: column.title
+        };
+      });
+    },
+    handleResize() {
+      const currentVisibleColumns = columnsData.filter((c) => !(c.minGridWidth > this.grid.offsetWidth));
+      if (currentVisibleColumns.length !== this.columns.length) {
+          this.columns = currentVisibleColumns
+      }
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/grid/columns/widths/fit-smaller-screens/products.json b/vue-options-api-demos/grid/columns/widths/fit-smaller-screens/products.json
new file mode 100644
index 00000000..4df1c408
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/widths/fit-smaller-screens/products.json
@@ -0,0 +1,1233 @@
+[{
+    "ProductID" : 1,
+    "ProductName" : "Chai",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "10 boxes x 20 bags",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 2,
+    "ProductName" : "Chang",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 3,
+    "ProductName" : "Aniseed Syrup",
+    "SupplierID" : 1,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 550 ml bottles",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 13,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 4,
+    "ProductName" : "Chef Anton's Cajun Seasoning",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "48 - 6 oz jars",
+    "UnitPrice" : 22.0000,
+    "UnitsInStock" : 53,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 5,
+    "ProductName" : "Chef Anton's Gumbo Mix",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "36 boxes",
+    "UnitPrice" : 21.3500,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 6,
+    "ProductName" : "Grandma's Boysenberry Spread",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 8 oz jars",
+    "UnitPrice" : 25.0000,
+    "UnitsInStock" : 120,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 7,
+    "ProductName" : "Uncle Bob's Organic Dried Pears",
+    "SupplierID" : 3,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "12 - 1 lb pkgs.",
+    "UnitPrice" : 30.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 8,
+    "ProductName" : "Northwoods Cranberry Sauce",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 12 oz jars",
+    "UnitPrice" : 40.0000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 9,
+    "ProductName" : "Mishi Kobe Niku",
+    "SupplierID" : 4,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "18 - 500 g pkgs.",
+    "UnitPrice" : 97.0000,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 10,
+    "ProductName" : "Ikura",
+    "SupplierID" : 4,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 200 ml jars",
+    "UnitPrice" : 31.0000,
+    "UnitsInStock" : 31,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 11,
+    "ProductName" : "Queso Cabrales",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "1 kg pkg.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 30,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 12,
+    "ProductName" : "Queso Manchego La Pastora",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 86,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 13,
+    "ProductName" : "Konbu",
+    "SupplierID" : 6,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "2 kg box",
+    "UnitPrice" : 6.0000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 14,
+    "ProductName" : "Tofu",
+    "SupplierID" : 6,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "40 - 100 g pkgs.",
+    "UnitPrice" : 23.2500,
+    "UnitsInStock" : 35,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 15,
+    "ProductName" : "Genen Shouyu",
+    "SupplierID" : 6,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 250 ml bottles",
+    "UnitPrice" : 15.5000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 16,
+    "ProductName" : "Pavlova",
+    "SupplierID" : 7,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "32 - 500 g boxes",
+    "UnitPrice" : 17.4500,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 17,
+    "ProductName" : "Alice Mutton",
+    "SupplierID" : 7,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "20 - 1 kg tins",
+    "UnitPrice" : 39.0000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 18,
+    "ProductName" : "Carnarvon Tigers",
+    "SupplierID" : 7,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "16 kg pkg.",
+    "UnitPrice" : 62.5000,
+    "UnitsInStock" : 42,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 19,
+    "ProductName" : "Teatime Chocolate Biscuits",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 12 pieces",
+    "UnitPrice" : 9.2000,
+    "UnitsInStock" : 25,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 20,
+    "ProductName" : "Sir Rodney's Marmalade",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "30 gift boxes",
+    "UnitPrice" : 81.0000,
+    "UnitsInStock" : 40,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 21,
+    "ProductName" : "Sir Rodney's Scones",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 pkgs. x 4 pieces",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 3,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 22,
+    "ProductName" : "Gustaf's Knäckebröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 500 g pkgs.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 104,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 23,
+    "ProductName" : "Tunnbröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "12 - 250 g pkgs.",
+    "UnitPrice" : 9.0000,
+    "UnitsInStock" : 61,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 24,
+    "ProductName" : "Guaraná Fantástica",
+    "SupplierID" : 10,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 355 ml cans",
+    "UnitPrice" : 4.5000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 25,
+    "ProductName" : "NuNuCa Nuß-Nougat-Creme",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "20 - 450 g glasses",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 26,
+    "ProductName" : "Gumbär Gummibärchen",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 250 g bags",
+    "UnitPrice" : 31.2300,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 27,
+    "ProductName" : "Schoggi Schokolade",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 100 g pieces",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 49,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 28,
+    "ProductName" : "Rössle Sauerkraut",
+    "SupplierID" : 12,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "25 - 825 g cans",
+    "UnitPrice" : 45.6000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 29,
+    "ProductName" : "Thüringer Rostbratwurst",
+    "SupplierID" : 12,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "50 bags x 30 sausgs.",
+    "UnitPrice" : 123.7900,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 30,
+    "ProductName" : "Nord-Ost Matjeshering",
+    "SupplierID" : 13,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "10 - 200 g glasses",
+    "UnitPrice" : 25.8900,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 31,
+    "ProductName" : "Gorgonzola Telino",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "12 - 100 g pkgs",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 32,
+    "ProductName" : "Mascarpone Fabioli",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 32.0000,
+    "UnitsInStock" : 9,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 33,
+    "ProductName" : "Geitost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "500 g",
+    "UnitPrice" : 2.5000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 34,
+    "ProductName" : "Sasquatch Ale",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 111,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 35,
+    "ProductName" : "Steeleye Stout",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 36,
+    "ProductName" : "Inlagd Sill",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 250 g  jars",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 37,
+    "ProductName" : "Gravad lax",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 500 g pkgs.",
+    "UnitPrice" : 26.0000,
+    "UnitsInStock" : 11,
+    "UnitsOnOrder" : 50,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 38,
+    "ProductName" : "Côte de Blaye",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 75 cl bottles",
+    "UnitPrice" : 263.5000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 39,
+    "ProductName" : "Chartreuse verte",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "750 cc per bottle",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 69,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 40,
+    "ProductName" : "Boston Crab Meat",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 4 oz tins",
+    "UnitPrice" : 18.4000,
+    "UnitsInStock" : 123,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 41,
+    "ProductName" : "Jack's New England Clam Chowder",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 12 oz cans",
+    "UnitPrice" : 9.6500,
+    "UnitsInStock" : 85,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 42,
+    "ProductName" : "Singaporean Hokkien Fried Mee",
+    "SupplierID" : 20,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "32 - 1 kg pkgs.",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 43,
+    "ProductName" : "Ipoh Coffee",
+    "SupplierID" : 20,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "16 - 500 g tins",
+    "UnitPrice" : 46.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 44,
+    "ProductName" : "Gula Malacca",
+    "SupplierID" : 20,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "20 - 2 kg bags",
+    "UnitPrice" : 19.4500,
+    "UnitsInStock" : 27,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 45,
+    "ProductName" : "Rogede sild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "1k pkg.",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 5,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 46,
+    "ProductName" : "Spegesild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "4 - 450 g glasses",
+    "UnitPrice" : 12.0000,
+    "UnitsInStock" : 95,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 47,
+    "ProductName" : "Zaanse koeken",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 - 4 oz boxes",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 48,
+    "ProductName" : "Chocolade",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 pkgs.",
+    "UnitPrice" : 12.7500,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 49,
+    "ProductName" : "Maxilaku",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 - 50 g pkgs.",
+    "UnitPrice" : 20.0000,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 60,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 50,
+    "ProductName" : "Valkoinen suklaa",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "12 - 100 g bars",
+    "UnitPrice" : 16.2500,
+    "UnitsInStock" : 65,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 51,
+    "ProductName" : "Manjimup Dried Apples",
+    "SupplierID" : 24,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "50 - 300 g pkgs.",
+    "UnitPrice" : 53.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 52,
+    "ProductName" : "Filo Mix",
+    "SupplierID" : 24,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "16 - 2 kg boxes",
+    "UnitPrice" : 7.0000,
+    "UnitsInStock" : 38,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 53,
+    "ProductName" : "Perth Pasties",
+    "SupplierID" : 24,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "48 pieces",
+    "UnitPrice" : 32.8000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 54,
+    "ProductName" : "Tourtière",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "16 pies",
+    "UnitPrice" : 7.4500,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 55,
+    "ProductName" : "Pâté chinois",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "24 boxes x 2 pies",
+    "UnitPrice" : 24.0000,
+    "UnitsInStock" : 115,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 56,
+    "ProductName" : "Gnocchi di nonna Alice",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 57,
+    "ProductName" : "Ravioli Angelo",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 19.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 58,
+    "ProductName" : "Escargots de Bourgogne",
+    "SupplierID" : 27,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 pieces",
+    "UnitPrice" : 13.2500,
+    "UnitsInStock" : 62,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 59,
+    "ProductName" : "Raclette Courdavault",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 55.0000,
+    "UnitsInStock" : 79,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 60,
+    "ProductName" : "Camembert Pierrot",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "15 - 300 g rounds",
+    "UnitPrice" : 34.0000,
+    "UnitsInStock" : 19,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 61,
+    "ProductName" : "Sirop d'érable",
+    "SupplierID" : 29,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 500 ml bottles",
+    "UnitPrice" : 28.5000,
+    "UnitsInStock" : 113,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 62,
+    "ProductName" : "Tarte au sucre",
+    "SupplierID" : 29,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "48 pies",
+    "UnitPrice" : 49.3000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 63,
+    "ProductName" : "Vegie-spread",
+    "SupplierID" : 7,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "15 - 625 g jars",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 64,
+    "ProductName" : "Wimmers gute Semmelknödel",
+    "SupplierID" : 12,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "20 bags x 4 pieces",
+    "UnitPrice" : 33.2500,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 80,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 65,
+    "ProductName" : "Louisiana Fiery Hot Pepper Sauce",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "32 - 8 oz bottles",
+    "UnitPrice" : 21.0500,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 66,
+    "ProductName" : "Louisiana Hot Spiced Okra",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 8 oz jars",
+    "UnitPrice" : 17.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 100,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 67,
+    "ProductName" : "Laughing Lumberjack Lager",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 52,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 68,
+    "ProductName" : "Scottish Longbreads",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 8 pieces",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 69,
+    "ProductName" : "Gudbrandsdalsost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 kg pkg.",
+    "UnitPrice" : 36.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 70,
+    "ProductName" : "Outback Lager",
+    "SupplierID" : 7,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 355 ml bottles",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 71,
+    "ProductName" : "Flotemysost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 21.5000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 72,
+    "ProductName" : "Mozzarella di Giovanni",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 34.8000,
+    "UnitsInStock" : 14,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 73,
+    "ProductName" : "Röd Kaviar",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 150 g jars",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 101,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 74,
+    "ProductName" : "Longlife Tofu",
+    "SupplierID" : 4,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 20,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 75,
+    "ProductName" : "Rhönbräu Klosterbier",
+    "SupplierID" : 12,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 0.5 l bottles",
+    "UnitPrice" : 7.7500,
+    "UnitsInStock" : 125,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 76,
+    "ProductName" : "Lakkalikööri",
+    "SupplierID" : 23,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "500 ml",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 57,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 77,
+    "ProductName" : "Original Frankfurter grüne Soße",
+    "SupplierID" : 12,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 boxes",
+    "UnitPrice" : 13.0000,
+    "UnitsInStock" : 32,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}]
diff --git a/vue-options-api-demos/grid/columns/widths/minimum-width/main.js b/vue-options-api-demos/grid/columns/widths/minimum-width/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/widths/minimum-width/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/columns/widths/minimum-width/main.vue b/vue-options-api-demos/grid/columns/widths/minimum-width/main.vue
new file mode 100644
index 00000000..f983ed12
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/widths/minimum-width/main.vue
@@ -0,0 +1,96 @@
+<template>
+	<div ref="divWrapper">
+		<Grid ref="grid" 
+                style="height: 440px;" 
+                :data-items="gridData" 
+                :resizable="true" 
+                :columns="columns">
+		</Grid>
+	</div>
+</template>
+
+<script>
+import { Grid } from "@progress/kendo-vue-grid";
+import products from "./products.json";
+
+const ADJUST_PADDING = 4;
+const COLUMN_MIN = 4;
+let minGridWidth = 0;
+
+const columnsData = [
+  { field: "ProductID", title: "ID", minWidth: 50 },
+  {
+    field: "ProductName",
+    title: "Name",
+    minWidth: 200
+  },
+  {
+    field: "Category.CategoryName",
+    title: "CategoryName",
+    minWidth: 200
+  },
+  {
+    field: "UnitPrice",
+    title: "Price",
+    minWidth: 100
+  },
+  {
+    field: "UnitsInStock",
+    title: "In stock",
+    minWidth: 100
+  }
+];
+
+export default {
+  components: {
+    Grid: Grid
+  },
+  mounted() {
+    this.grid = document.querySelector(".k-grid");
+    window.addEventListener("resize", this.handleResize);
+    columnsData.map(item => {
+      return (minGridWidth += item.minWidth);
+    });
+
+    this.gridCurrent = this.grid.offsetWidth;
+    this.setMinWidth = this.grid.offsetWidth < minGridWidth;
+    this.defineColumns();
+  },
+  data: function() {
+    return {
+      grid: "",
+      setMinWidth: false,
+      gridCurrent: 0,
+      gridData: products,
+      columns: []
+    };
+  },
+  methods: {
+    defineColumns(){
+      this.columns = columnsData.map((column, index) => {
+        return {
+          field: column.field,
+          title: column.title,
+          width: this.setWidth(column.minWidth)
+        };
+      });
+    },
+    handleResize() {
+      if (this.grid.offsetWidth < minGridWidth && !this.setMinWidth) {
+        this.setMinWidth = true;
+      } else if (this.grid.offsetWidth > minGridWidth) {
+        this.gridCurrent = this.grid.offsetWidth;
+        this.setMinWidth = false;
+      }
+      this.defineColumns();
+    },
+    setWidth(minWidth) {
+      let width = this.setMinWidth
+        ? minWidth
+        : minWidth + (this.gridCurrent - minGridWidth) / this.columns.length;
+      width < COLUMN_MIN ? width : (width -= ADJUST_PADDING);
+      return width;
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/grid/columns/widths/minimum-width/products.json b/vue-options-api-demos/grid/columns/widths/minimum-width/products.json
new file mode 100644
index 00000000..4df1c408
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/widths/minimum-width/products.json
@@ -0,0 +1,1233 @@
+[{
+    "ProductID" : 1,
+    "ProductName" : "Chai",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "10 boxes x 20 bags",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 2,
+    "ProductName" : "Chang",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 3,
+    "ProductName" : "Aniseed Syrup",
+    "SupplierID" : 1,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 550 ml bottles",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 13,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 4,
+    "ProductName" : "Chef Anton's Cajun Seasoning",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "48 - 6 oz jars",
+    "UnitPrice" : 22.0000,
+    "UnitsInStock" : 53,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 5,
+    "ProductName" : "Chef Anton's Gumbo Mix",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "36 boxes",
+    "UnitPrice" : 21.3500,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 6,
+    "ProductName" : "Grandma's Boysenberry Spread",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 8 oz jars",
+    "UnitPrice" : 25.0000,
+    "UnitsInStock" : 120,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 7,
+    "ProductName" : "Uncle Bob's Organic Dried Pears",
+    "SupplierID" : 3,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "12 - 1 lb pkgs.",
+    "UnitPrice" : 30.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 8,
+    "ProductName" : "Northwoods Cranberry Sauce",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 12 oz jars",
+    "UnitPrice" : 40.0000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 9,
+    "ProductName" : "Mishi Kobe Niku",
+    "SupplierID" : 4,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "18 - 500 g pkgs.",
+    "UnitPrice" : 97.0000,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 10,
+    "ProductName" : "Ikura",
+    "SupplierID" : 4,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 200 ml jars",
+    "UnitPrice" : 31.0000,
+    "UnitsInStock" : 31,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 11,
+    "ProductName" : "Queso Cabrales",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "1 kg pkg.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 30,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 12,
+    "ProductName" : "Queso Manchego La Pastora",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 86,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 13,
+    "ProductName" : "Konbu",
+    "SupplierID" : 6,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "2 kg box",
+    "UnitPrice" : 6.0000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 14,
+    "ProductName" : "Tofu",
+    "SupplierID" : 6,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "40 - 100 g pkgs.",
+    "UnitPrice" : 23.2500,
+    "UnitsInStock" : 35,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 15,
+    "ProductName" : "Genen Shouyu",
+    "SupplierID" : 6,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 250 ml bottles",
+    "UnitPrice" : 15.5000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 16,
+    "ProductName" : "Pavlova",
+    "SupplierID" : 7,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "32 - 500 g boxes",
+    "UnitPrice" : 17.4500,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 17,
+    "ProductName" : "Alice Mutton",
+    "SupplierID" : 7,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "20 - 1 kg tins",
+    "UnitPrice" : 39.0000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 18,
+    "ProductName" : "Carnarvon Tigers",
+    "SupplierID" : 7,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "16 kg pkg.",
+    "UnitPrice" : 62.5000,
+    "UnitsInStock" : 42,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 19,
+    "ProductName" : "Teatime Chocolate Biscuits",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 12 pieces",
+    "UnitPrice" : 9.2000,
+    "UnitsInStock" : 25,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 20,
+    "ProductName" : "Sir Rodney's Marmalade",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "30 gift boxes",
+    "UnitPrice" : 81.0000,
+    "UnitsInStock" : 40,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 21,
+    "ProductName" : "Sir Rodney's Scones",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 pkgs. x 4 pieces",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 3,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 22,
+    "ProductName" : "Gustaf's Knäckebröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 500 g pkgs.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 104,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 23,
+    "ProductName" : "Tunnbröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "12 - 250 g pkgs.",
+    "UnitPrice" : 9.0000,
+    "UnitsInStock" : 61,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 24,
+    "ProductName" : "Guaraná Fantástica",
+    "SupplierID" : 10,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 355 ml cans",
+    "UnitPrice" : 4.5000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 25,
+    "ProductName" : "NuNuCa Nuß-Nougat-Creme",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "20 - 450 g glasses",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 26,
+    "ProductName" : "Gumbär Gummibärchen",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 250 g bags",
+    "UnitPrice" : 31.2300,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 27,
+    "ProductName" : "Schoggi Schokolade",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 100 g pieces",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 49,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 28,
+    "ProductName" : "Rössle Sauerkraut",
+    "SupplierID" : 12,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "25 - 825 g cans",
+    "UnitPrice" : 45.6000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 29,
+    "ProductName" : "Thüringer Rostbratwurst",
+    "SupplierID" : 12,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "50 bags x 30 sausgs.",
+    "UnitPrice" : 123.7900,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 30,
+    "ProductName" : "Nord-Ost Matjeshering",
+    "SupplierID" : 13,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "10 - 200 g glasses",
+    "UnitPrice" : 25.8900,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 31,
+    "ProductName" : "Gorgonzola Telino",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "12 - 100 g pkgs",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 32,
+    "ProductName" : "Mascarpone Fabioli",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 32.0000,
+    "UnitsInStock" : 9,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 33,
+    "ProductName" : "Geitost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "500 g",
+    "UnitPrice" : 2.5000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 34,
+    "ProductName" : "Sasquatch Ale",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 111,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 35,
+    "ProductName" : "Steeleye Stout",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 36,
+    "ProductName" : "Inlagd Sill",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 250 g  jars",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 37,
+    "ProductName" : "Gravad lax",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 500 g pkgs.",
+    "UnitPrice" : 26.0000,
+    "UnitsInStock" : 11,
+    "UnitsOnOrder" : 50,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 38,
+    "ProductName" : "Côte de Blaye",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 75 cl bottles",
+    "UnitPrice" : 263.5000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 39,
+    "ProductName" : "Chartreuse verte",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "750 cc per bottle",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 69,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 40,
+    "ProductName" : "Boston Crab Meat",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 4 oz tins",
+    "UnitPrice" : 18.4000,
+    "UnitsInStock" : 123,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 41,
+    "ProductName" : "Jack's New England Clam Chowder",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 12 oz cans",
+    "UnitPrice" : 9.6500,
+    "UnitsInStock" : 85,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 42,
+    "ProductName" : "Singaporean Hokkien Fried Mee",
+    "SupplierID" : 20,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "32 - 1 kg pkgs.",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 43,
+    "ProductName" : "Ipoh Coffee",
+    "SupplierID" : 20,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "16 - 500 g tins",
+    "UnitPrice" : 46.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 44,
+    "ProductName" : "Gula Malacca",
+    "SupplierID" : 20,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "20 - 2 kg bags",
+    "UnitPrice" : 19.4500,
+    "UnitsInStock" : 27,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 45,
+    "ProductName" : "Rogede sild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "1k pkg.",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 5,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 46,
+    "ProductName" : "Spegesild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "4 - 450 g glasses",
+    "UnitPrice" : 12.0000,
+    "UnitsInStock" : 95,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 47,
+    "ProductName" : "Zaanse koeken",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 - 4 oz boxes",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 48,
+    "ProductName" : "Chocolade",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 pkgs.",
+    "UnitPrice" : 12.7500,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 49,
+    "ProductName" : "Maxilaku",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 - 50 g pkgs.",
+    "UnitPrice" : 20.0000,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 60,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 50,
+    "ProductName" : "Valkoinen suklaa",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "12 - 100 g bars",
+    "UnitPrice" : 16.2500,
+    "UnitsInStock" : 65,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 51,
+    "ProductName" : "Manjimup Dried Apples",
+    "SupplierID" : 24,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "50 - 300 g pkgs.",
+    "UnitPrice" : 53.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 52,
+    "ProductName" : "Filo Mix",
+    "SupplierID" : 24,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "16 - 2 kg boxes",
+    "UnitPrice" : 7.0000,
+    "UnitsInStock" : 38,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 53,
+    "ProductName" : "Perth Pasties",
+    "SupplierID" : 24,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "48 pieces",
+    "UnitPrice" : 32.8000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 54,
+    "ProductName" : "Tourtière",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "16 pies",
+    "UnitPrice" : 7.4500,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 55,
+    "ProductName" : "Pâté chinois",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "24 boxes x 2 pies",
+    "UnitPrice" : 24.0000,
+    "UnitsInStock" : 115,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 56,
+    "ProductName" : "Gnocchi di nonna Alice",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 57,
+    "ProductName" : "Ravioli Angelo",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 19.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 58,
+    "ProductName" : "Escargots de Bourgogne",
+    "SupplierID" : 27,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 pieces",
+    "UnitPrice" : 13.2500,
+    "UnitsInStock" : 62,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 59,
+    "ProductName" : "Raclette Courdavault",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 55.0000,
+    "UnitsInStock" : 79,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 60,
+    "ProductName" : "Camembert Pierrot",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "15 - 300 g rounds",
+    "UnitPrice" : 34.0000,
+    "UnitsInStock" : 19,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 61,
+    "ProductName" : "Sirop d'érable",
+    "SupplierID" : 29,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 500 ml bottles",
+    "UnitPrice" : 28.5000,
+    "UnitsInStock" : 113,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 62,
+    "ProductName" : "Tarte au sucre",
+    "SupplierID" : 29,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "48 pies",
+    "UnitPrice" : 49.3000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 63,
+    "ProductName" : "Vegie-spread",
+    "SupplierID" : 7,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "15 - 625 g jars",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 64,
+    "ProductName" : "Wimmers gute Semmelknödel",
+    "SupplierID" : 12,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "20 bags x 4 pieces",
+    "UnitPrice" : 33.2500,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 80,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 65,
+    "ProductName" : "Louisiana Fiery Hot Pepper Sauce",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "32 - 8 oz bottles",
+    "UnitPrice" : 21.0500,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 66,
+    "ProductName" : "Louisiana Hot Spiced Okra",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 8 oz jars",
+    "UnitPrice" : 17.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 100,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 67,
+    "ProductName" : "Laughing Lumberjack Lager",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 52,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 68,
+    "ProductName" : "Scottish Longbreads",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 8 pieces",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 69,
+    "ProductName" : "Gudbrandsdalsost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 kg pkg.",
+    "UnitPrice" : 36.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 70,
+    "ProductName" : "Outback Lager",
+    "SupplierID" : 7,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 355 ml bottles",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 71,
+    "ProductName" : "Flotemysost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 21.5000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 72,
+    "ProductName" : "Mozzarella di Giovanni",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 34.8000,
+    "UnitsInStock" : 14,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 73,
+    "ProductName" : "Röd Kaviar",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 150 g jars",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 101,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 74,
+    "ProductName" : "Longlife Tofu",
+    "SupplierID" : 4,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 20,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 75,
+    "ProductName" : "Rhönbräu Klosterbier",
+    "SupplierID" : 12,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 0.5 l bottles",
+    "UnitPrice" : 7.7500,
+    "UnitsInStock" : 125,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 76,
+    "ProductName" : "Lakkalikööri",
+    "SupplierID" : 23,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "500 ml",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 57,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 77,
+    "ProductName" : "Original Frankfurter grüne Soße",
+    "SupplierID" : 12,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 boxes",
+    "UnitPrice" : 13.0000,
+    "UnitsInStock" : 32,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}]
diff --git a/vue-options-api-demos/grid/columns/widths/percentage-no-fixed-width/main.js b/vue-options-api-demos/grid/columns/widths/percentage-no-fixed-width/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/widths/percentage-no-fixed-width/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/columns/widths/percentage-no-fixed-width/main.vue b/vue-options-api-demos/grid/columns/widths/percentage-no-fixed-width/main.vue
new file mode 100644
index 00000000..b37a3937
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/widths/percentage-no-fixed-width/main.vue
@@ -0,0 +1,69 @@
+<template>
+  <div ref="divWrapper">
+    <Grid style="height: 400px" :data-items="products" :columns="columns">
+    </Grid>
+  </div>
+</template>
+<script>
+import { Grid } from "@progress/kendo-vue-grid";
+import products from "./products.json";
+
+export default {
+  components: {
+    Grid: Grid,
+  },
+  data: function () {
+    return {
+      gridWidth: 0,
+      products: products,
+    };
+  },
+  mounted() {
+    this.gridWidth = this.$refs.divWrapper.offsetWidth;
+  },
+  computed: {
+    columns() {
+      return [
+        { field: "ProductID", title: "ID" },
+        { field: "ProductName", title: "Name" },
+        { field: "Category.CategoryName", title: "CategoryName" },
+        { field: "UnitPrice", title: "Price" },
+        { field: "UnitsInStock", title: "In stock" },
+      ];
+    },
+  },
+};
+</script>
+<style>
+.k-grid-header col:nth-of-type(1) {
+  width: 10%;
+}
+
+.k-grid-table col:nth-of-type(1) {
+  width: 10%;
+}
+
+.k-grid-header col:nth-of-type(2) {
+  width: 40%;
+}
+
+.k-grid-table col:nth-of-type(2) {
+  width: 40%;
+}
+
+.k-grid-header col:nth-of-type(3) {
+  width: 40%;
+}
+
+.k-grid-table col:nth-of-type(3) {
+  width: 40%;
+}
+
+.k-grid-header col:nth-of-type(4) {
+  width: 10%;
+}
+
+.k-grid-table col:nth-of-type(4) {
+  width: 10%;
+}
+</style>
\ No newline at end of file
diff --git a/vue-options-api-demos/grid/columns/widths/percentage-no-fixed-width/products.json b/vue-options-api-demos/grid/columns/widths/percentage-no-fixed-width/products.json
new file mode 100644
index 00000000..4df1c408
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/widths/percentage-no-fixed-width/products.json
@@ -0,0 +1,1233 @@
+[{
+    "ProductID" : 1,
+    "ProductName" : "Chai",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "10 boxes x 20 bags",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 2,
+    "ProductName" : "Chang",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 3,
+    "ProductName" : "Aniseed Syrup",
+    "SupplierID" : 1,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 550 ml bottles",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 13,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 4,
+    "ProductName" : "Chef Anton's Cajun Seasoning",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "48 - 6 oz jars",
+    "UnitPrice" : 22.0000,
+    "UnitsInStock" : 53,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 5,
+    "ProductName" : "Chef Anton's Gumbo Mix",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "36 boxes",
+    "UnitPrice" : 21.3500,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 6,
+    "ProductName" : "Grandma's Boysenberry Spread",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 8 oz jars",
+    "UnitPrice" : 25.0000,
+    "UnitsInStock" : 120,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 7,
+    "ProductName" : "Uncle Bob's Organic Dried Pears",
+    "SupplierID" : 3,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "12 - 1 lb pkgs.",
+    "UnitPrice" : 30.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 8,
+    "ProductName" : "Northwoods Cranberry Sauce",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 12 oz jars",
+    "UnitPrice" : 40.0000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 9,
+    "ProductName" : "Mishi Kobe Niku",
+    "SupplierID" : 4,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "18 - 500 g pkgs.",
+    "UnitPrice" : 97.0000,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 10,
+    "ProductName" : "Ikura",
+    "SupplierID" : 4,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 200 ml jars",
+    "UnitPrice" : 31.0000,
+    "UnitsInStock" : 31,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 11,
+    "ProductName" : "Queso Cabrales",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "1 kg pkg.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 30,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 12,
+    "ProductName" : "Queso Manchego La Pastora",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 86,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 13,
+    "ProductName" : "Konbu",
+    "SupplierID" : 6,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "2 kg box",
+    "UnitPrice" : 6.0000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 14,
+    "ProductName" : "Tofu",
+    "SupplierID" : 6,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "40 - 100 g pkgs.",
+    "UnitPrice" : 23.2500,
+    "UnitsInStock" : 35,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 15,
+    "ProductName" : "Genen Shouyu",
+    "SupplierID" : 6,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 250 ml bottles",
+    "UnitPrice" : 15.5000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 16,
+    "ProductName" : "Pavlova",
+    "SupplierID" : 7,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "32 - 500 g boxes",
+    "UnitPrice" : 17.4500,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 17,
+    "ProductName" : "Alice Mutton",
+    "SupplierID" : 7,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "20 - 1 kg tins",
+    "UnitPrice" : 39.0000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 18,
+    "ProductName" : "Carnarvon Tigers",
+    "SupplierID" : 7,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "16 kg pkg.",
+    "UnitPrice" : 62.5000,
+    "UnitsInStock" : 42,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 19,
+    "ProductName" : "Teatime Chocolate Biscuits",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 12 pieces",
+    "UnitPrice" : 9.2000,
+    "UnitsInStock" : 25,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 20,
+    "ProductName" : "Sir Rodney's Marmalade",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "30 gift boxes",
+    "UnitPrice" : 81.0000,
+    "UnitsInStock" : 40,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 21,
+    "ProductName" : "Sir Rodney's Scones",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 pkgs. x 4 pieces",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 3,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 22,
+    "ProductName" : "Gustaf's Knäckebröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 500 g pkgs.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 104,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 23,
+    "ProductName" : "Tunnbröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "12 - 250 g pkgs.",
+    "UnitPrice" : 9.0000,
+    "UnitsInStock" : 61,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 24,
+    "ProductName" : "Guaraná Fantástica",
+    "SupplierID" : 10,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 355 ml cans",
+    "UnitPrice" : 4.5000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 25,
+    "ProductName" : "NuNuCa Nuß-Nougat-Creme",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "20 - 450 g glasses",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 26,
+    "ProductName" : "Gumbär Gummibärchen",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 250 g bags",
+    "UnitPrice" : 31.2300,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 27,
+    "ProductName" : "Schoggi Schokolade",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 100 g pieces",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 49,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 28,
+    "ProductName" : "Rössle Sauerkraut",
+    "SupplierID" : 12,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "25 - 825 g cans",
+    "UnitPrice" : 45.6000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 29,
+    "ProductName" : "Thüringer Rostbratwurst",
+    "SupplierID" : 12,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "50 bags x 30 sausgs.",
+    "UnitPrice" : 123.7900,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 30,
+    "ProductName" : "Nord-Ost Matjeshering",
+    "SupplierID" : 13,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "10 - 200 g glasses",
+    "UnitPrice" : 25.8900,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 31,
+    "ProductName" : "Gorgonzola Telino",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "12 - 100 g pkgs",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 32,
+    "ProductName" : "Mascarpone Fabioli",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 32.0000,
+    "UnitsInStock" : 9,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 33,
+    "ProductName" : "Geitost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "500 g",
+    "UnitPrice" : 2.5000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 34,
+    "ProductName" : "Sasquatch Ale",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 111,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 35,
+    "ProductName" : "Steeleye Stout",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 36,
+    "ProductName" : "Inlagd Sill",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 250 g  jars",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 37,
+    "ProductName" : "Gravad lax",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 500 g pkgs.",
+    "UnitPrice" : 26.0000,
+    "UnitsInStock" : 11,
+    "UnitsOnOrder" : 50,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 38,
+    "ProductName" : "Côte de Blaye",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 75 cl bottles",
+    "UnitPrice" : 263.5000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 39,
+    "ProductName" : "Chartreuse verte",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "750 cc per bottle",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 69,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 40,
+    "ProductName" : "Boston Crab Meat",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 4 oz tins",
+    "UnitPrice" : 18.4000,
+    "UnitsInStock" : 123,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 41,
+    "ProductName" : "Jack's New England Clam Chowder",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 12 oz cans",
+    "UnitPrice" : 9.6500,
+    "UnitsInStock" : 85,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 42,
+    "ProductName" : "Singaporean Hokkien Fried Mee",
+    "SupplierID" : 20,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "32 - 1 kg pkgs.",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 43,
+    "ProductName" : "Ipoh Coffee",
+    "SupplierID" : 20,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "16 - 500 g tins",
+    "UnitPrice" : 46.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 44,
+    "ProductName" : "Gula Malacca",
+    "SupplierID" : 20,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "20 - 2 kg bags",
+    "UnitPrice" : 19.4500,
+    "UnitsInStock" : 27,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 45,
+    "ProductName" : "Rogede sild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "1k pkg.",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 5,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 46,
+    "ProductName" : "Spegesild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "4 - 450 g glasses",
+    "UnitPrice" : 12.0000,
+    "UnitsInStock" : 95,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 47,
+    "ProductName" : "Zaanse koeken",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 - 4 oz boxes",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 48,
+    "ProductName" : "Chocolade",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 pkgs.",
+    "UnitPrice" : 12.7500,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 49,
+    "ProductName" : "Maxilaku",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 - 50 g pkgs.",
+    "UnitPrice" : 20.0000,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 60,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 50,
+    "ProductName" : "Valkoinen suklaa",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "12 - 100 g bars",
+    "UnitPrice" : 16.2500,
+    "UnitsInStock" : 65,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 51,
+    "ProductName" : "Manjimup Dried Apples",
+    "SupplierID" : 24,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "50 - 300 g pkgs.",
+    "UnitPrice" : 53.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 52,
+    "ProductName" : "Filo Mix",
+    "SupplierID" : 24,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "16 - 2 kg boxes",
+    "UnitPrice" : 7.0000,
+    "UnitsInStock" : 38,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 53,
+    "ProductName" : "Perth Pasties",
+    "SupplierID" : 24,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "48 pieces",
+    "UnitPrice" : 32.8000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 54,
+    "ProductName" : "Tourtière",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "16 pies",
+    "UnitPrice" : 7.4500,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 55,
+    "ProductName" : "Pâté chinois",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "24 boxes x 2 pies",
+    "UnitPrice" : 24.0000,
+    "UnitsInStock" : 115,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 56,
+    "ProductName" : "Gnocchi di nonna Alice",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 57,
+    "ProductName" : "Ravioli Angelo",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 19.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 58,
+    "ProductName" : "Escargots de Bourgogne",
+    "SupplierID" : 27,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 pieces",
+    "UnitPrice" : 13.2500,
+    "UnitsInStock" : 62,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 59,
+    "ProductName" : "Raclette Courdavault",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 55.0000,
+    "UnitsInStock" : 79,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 60,
+    "ProductName" : "Camembert Pierrot",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "15 - 300 g rounds",
+    "UnitPrice" : 34.0000,
+    "UnitsInStock" : 19,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 61,
+    "ProductName" : "Sirop d'érable",
+    "SupplierID" : 29,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 500 ml bottles",
+    "UnitPrice" : 28.5000,
+    "UnitsInStock" : 113,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 62,
+    "ProductName" : "Tarte au sucre",
+    "SupplierID" : 29,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "48 pies",
+    "UnitPrice" : 49.3000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 63,
+    "ProductName" : "Vegie-spread",
+    "SupplierID" : 7,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "15 - 625 g jars",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 64,
+    "ProductName" : "Wimmers gute Semmelknödel",
+    "SupplierID" : 12,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "20 bags x 4 pieces",
+    "UnitPrice" : 33.2500,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 80,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 65,
+    "ProductName" : "Louisiana Fiery Hot Pepper Sauce",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "32 - 8 oz bottles",
+    "UnitPrice" : 21.0500,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 66,
+    "ProductName" : "Louisiana Hot Spiced Okra",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 8 oz jars",
+    "UnitPrice" : 17.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 100,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 67,
+    "ProductName" : "Laughing Lumberjack Lager",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 52,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 68,
+    "ProductName" : "Scottish Longbreads",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 8 pieces",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 69,
+    "ProductName" : "Gudbrandsdalsost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 kg pkg.",
+    "UnitPrice" : 36.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 70,
+    "ProductName" : "Outback Lager",
+    "SupplierID" : 7,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 355 ml bottles",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 71,
+    "ProductName" : "Flotemysost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 21.5000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 72,
+    "ProductName" : "Mozzarella di Giovanni",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 34.8000,
+    "UnitsInStock" : 14,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 73,
+    "ProductName" : "Röd Kaviar",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 150 g jars",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 101,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 74,
+    "ProductName" : "Longlife Tofu",
+    "SupplierID" : 4,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 20,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 75,
+    "ProductName" : "Rhönbräu Klosterbier",
+    "SupplierID" : 12,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 0.5 l bottles",
+    "UnitPrice" : 7.7500,
+    "UnitsInStock" : 125,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 76,
+    "ProductName" : "Lakkalikööri",
+    "SupplierID" : 23,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "500 ml",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 57,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 77,
+    "ProductName" : "Original Frankfurter grüne Soße",
+    "SupplierID" : 12,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 boxes",
+    "UnitPrice" : 13.0000,
+    "UnitsInStock" : 32,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}]
diff --git a/vue-options-api-demos/grid/columns/widths/percentage-width/main.js b/vue-options-api-demos/grid/columns/widths/percentage-width/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/widths/percentage-width/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/columns/widths/percentage-width/main.vue b/vue-options-api-demos/grid/columns/widths/percentage-width/main.vue
new file mode 100644
index 00000000..d323f2a1
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/widths/percentage-width/main.vue
@@ -0,0 +1,62 @@
+<template>
+  <div ref="divWrapper" style="width: 70%">
+    <Grid style="height: 400px" :data-items="products" :columns="columns">
+    </Grid>
+  </div>
+</template>
+<script>
+import { Grid } from "@progress/kendo-vue-grid";
+import products from "./products.json";
+
+export default {
+  components: {
+    Grid: Grid,
+  },
+  data: function () {
+    return {
+      gridWidth: 0,
+      products: products,
+    };
+  },
+  created() {
+    window.addEventListener("resize", this.myEventHandler);
+  },
+  unmount() {
+    window.removeEventListener("resize", this.myEventHandler);
+  },
+  mounted() {
+    this.gridWidth = this.$refs.divWrapper.offsetWidth;
+  },
+  computed: {
+    columns() {
+      return [
+        { field: "ProductID", title: "ID", width: this.setPercentage(10) },
+        {
+          field: "ProductName",
+          title: "Name",
+          width: this.setPercentage(30),
+        },
+        {
+          field: "Category.CategoryName",
+          title: "CategoryName",
+          width: this.setPercentage(30),
+        },
+        { field: "UnitPrice", title: "Price", width: this.setPercentage(15) },
+        {
+          field: "UnitsInStock",
+          title: "In stock",
+          width: this.setPercentage(15),
+        },
+      ];
+    },
+  },
+  methods: {
+    setPercentage(percentage) {
+      return Math.round(this.gridWidth / 100) * percentage;
+    },
+    myEventHandler(e) {
+      this.gridWidth = this.$refs.divWrapper.offsetWidth;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/grid/columns/widths/percentage-width/products.json b/vue-options-api-demos/grid/columns/widths/percentage-width/products.json
new file mode 100644
index 00000000..4df1c408
--- /dev/null
+++ b/vue-options-api-demos/grid/columns/widths/percentage-width/products.json
@@ -0,0 +1,1233 @@
+[{
+    "ProductID" : 1,
+    "ProductName" : "Chai",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "10 boxes x 20 bags",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 2,
+    "ProductName" : "Chang",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 3,
+    "ProductName" : "Aniseed Syrup",
+    "SupplierID" : 1,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 550 ml bottles",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 13,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 4,
+    "ProductName" : "Chef Anton's Cajun Seasoning",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "48 - 6 oz jars",
+    "UnitPrice" : 22.0000,
+    "UnitsInStock" : 53,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 5,
+    "ProductName" : "Chef Anton's Gumbo Mix",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "36 boxes",
+    "UnitPrice" : 21.3500,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 6,
+    "ProductName" : "Grandma's Boysenberry Spread",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 8 oz jars",
+    "UnitPrice" : 25.0000,
+    "UnitsInStock" : 120,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 7,
+    "ProductName" : "Uncle Bob's Organic Dried Pears",
+    "SupplierID" : 3,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "12 - 1 lb pkgs.",
+    "UnitPrice" : 30.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 8,
+    "ProductName" : "Northwoods Cranberry Sauce",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 12 oz jars",
+    "UnitPrice" : 40.0000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 9,
+    "ProductName" : "Mishi Kobe Niku",
+    "SupplierID" : 4,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "18 - 500 g pkgs.",
+    "UnitPrice" : 97.0000,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 10,
+    "ProductName" : "Ikura",
+    "SupplierID" : 4,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 200 ml jars",
+    "UnitPrice" : 31.0000,
+    "UnitsInStock" : 31,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 11,
+    "ProductName" : "Queso Cabrales",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "1 kg pkg.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 30,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 12,
+    "ProductName" : "Queso Manchego La Pastora",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 86,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 13,
+    "ProductName" : "Konbu",
+    "SupplierID" : 6,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "2 kg box",
+    "UnitPrice" : 6.0000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 14,
+    "ProductName" : "Tofu",
+    "SupplierID" : 6,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "40 - 100 g pkgs.",
+    "UnitPrice" : 23.2500,
+    "UnitsInStock" : 35,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 15,
+    "ProductName" : "Genen Shouyu",
+    "SupplierID" : 6,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 250 ml bottles",
+    "UnitPrice" : 15.5000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 16,
+    "ProductName" : "Pavlova",
+    "SupplierID" : 7,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "32 - 500 g boxes",
+    "UnitPrice" : 17.4500,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 17,
+    "ProductName" : "Alice Mutton",
+    "SupplierID" : 7,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "20 - 1 kg tins",
+    "UnitPrice" : 39.0000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 18,
+    "ProductName" : "Carnarvon Tigers",
+    "SupplierID" : 7,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "16 kg pkg.",
+    "UnitPrice" : 62.5000,
+    "UnitsInStock" : 42,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 19,
+    "ProductName" : "Teatime Chocolate Biscuits",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 12 pieces",
+    "UnitPrice" : 9.2000,
+    "UnitsInStock" : 25,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 20,
+    "ProductName" : "Sir Rodney's Marmalade",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "30 gift boxes",
+    "UnitPrice" : 81.0000,
+    "UnitsInStock" : 40,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 21,
+    "ProductName" : "Sir Rodney's Scones",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 pkgs. x 4 pieces",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 3,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 22,
+    "ProductName" : "Gustaf's Knäckebröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 500 g pkgs.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 104,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 23,
+    "ProductName" : "Tunnbröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "12 - 250 g pkgs.",
+    "UnitPrice" : 9.0000,
+    "UnitsInStock" : 61,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 24,
+    "ProductName" : "Guaraná Fantástica",
+    "SupplierID" : 10,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 355 ml cans",
+    "UnitPrice" : 4.5000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 25,
+    "ProductName" : "NuNuCa Nuß-Nougat-Creme",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "20 - 450 g glasses",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 26,
+    "ProductName" : "Gumbär Gummibärchen",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 250 g bags",
+    "UnitPrice" : 31.2300,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 27,
+    "ProductName" : "Schoggi Schokolade",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 100 g pieces",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 49,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 28,
+    "ProductName" : "Rössle Sauerkraut",
+    "SupplierID" : 12,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "25 - 825 g cans",
+    "UnitPrice" : 45.6000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 29,
+    "ProductName" : "Thüringer Rostbratwurst",
+    "SupplierID" : 12,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "50 bags x 30 sausgs.",
+    "UnitPrice" : 123.7900,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 30,
+    "ProductName" : "Nord-Ost Matjeshering",
+    "SupplierID" : 13,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "10 - 200 g glasses",
+    "UnitPrice" : 25.8900,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 31,
+    "ProductName" : "Gorgonzola Telino",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "12 - 100 g pkgs",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 32,
+    "ProductName" : "Mascarpone Fabioli",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 32.0000,
+    "UnitsInStock" : 9,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 33,
+    "ProductName" : "Geitost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "500 g",
+    "UnitPrice" : 2.5000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 34,
+    "ProductName" : "Sasquatch Ale",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 111,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 35,
+    "ProductName" : "Steeleye Stout",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 36,
+    "ProductName" : "Inlagd Sill",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 250 g  jars",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 37,
+    "ProductName" : "Gravad lax",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 500 g pkgs.",
+    "UnitPrice" : 26.0000,
+    "UnitsInStock" : 11,
+    "UnitsOnOrder" : 50,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 38,
+    "ProductName" : "Côte de Blaye",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 75 cl bottles",
+    "UnitPrice" : 263.5000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 39,
+    "ProductName" : "Chartreuse verte",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "750 cc per bottle",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 69,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 40,
+    "ProductName" : "Boston Crab Meat",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 4 oz tins",
+    "UnitPrice" : 18.4000,
+    "UnitsInStock" : 123,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 41,
+    "ProductName" : "Jack's New England Clam Chowder",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 12 oz cans",
+    "UnitPrice" : 9.6500,
+    "UnitsInStock" : 85,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 42,
+    "ProductName" : "Singaporean Hokkien Fried Mee",
+    "SupplierID" : 20,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "32 - 1 kg pkgs.",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 43,
+    "ProductName" : "Ipoh Coffee",
+    "SupplierID" : 20,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "16 - 500 g tins",
+    "UnitPrice" : 46.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 44,
+    "ProductName" : "Gula Malacca",
+    "SupplierID" : 20,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "20 - 2 kg bags",
+    "UnitPrice" : 19.4500,
+    "UnitsInStock" : 27,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 45,
+    "ProductName" : "Rogede sild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "1k pkg.",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 5,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 46,
+    "ProductName" : "Spegesild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "4 - 450 g glasses",
+    "UnitPrice" : 12.0000,
+    "UnitsInStock" : 95,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 47,
+    "ProductName" : "Zaanse koeken",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 - 4 oz boxes",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 48,
+    "ProductName" : "Chocolade",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 pkgs.",
+    "UnitPrice" : 12.7500,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 49,
+    "ProductName" : "Maxilaku",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 - 50 g pkgs.",
+    "UnitPrice" : 20.0000,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 60,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 50,
+    "ProductName" : "Valkoinen suklaa",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "12 - 100 g bars",
+    "UnitPrice" : 16.2500,
+    "UnitsInStock" : 65,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 51,
+    "ProductName" : "Manjimup Dried Apples",
+    "SupplierID" : 24,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "50 - 300 g pkgs.",
+    "UnitPrice" : 53.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 52,
+    "ProductName" : "Filo Mix",
+    "SupplierID" : 24,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "16 - 2 kg boxes",
+    "UnitPrice" : 7.0000,
+    "UnitsInStock" : 38,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 53,
+    "ProductName" : "Perth Pasties",
+    "SupplierID" : 24,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "48 pieces",
+    "UnitPrice" : 32.8000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 54,
+    "ProductName" : "Tourtière",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "16 pies",
+    "UnitPrice" : 7.4500,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 55,
+    "ProductName" : "Pâté chinois",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "24 boxes x 2 pies",
+    "UnitPrice" : 24.0000,
+    "UnitsInStock" : 115,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 56,
+    "ProductName" : "Gnocchi di nonna Alice",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 57,
+    "ProductName" : "Ravioli Angelo",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 19.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 58,
+    "ProductName" : "Escargots de Bourgogne",
+    "SupplierID" : 27,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 pieces",
+    "UnitPrice" : 13.2500,
+    "UnitsInStock" : 62,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 59,
+    "ProductName" : "Raclette Courdavault",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 55.0000,
+    "UnitsInStock" : 79,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 60,
+    "ProductName" : "Camembert Pierrot",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "15 - 300 g rounds",
+    "UnitPrice" : 34.0000,
+    "UnitsInStock" : 19,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 61,
+    "ProductName" : "Sirop d'érable",
+    "SupplierID" : 29,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 500 ml bottles",
+    "UnitPrice" : 28.5000,
+    "UnitsInStock" : 113,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 62,
+    "ProductName" : "Tarte au sucre",
+    "SupplierID" : 29,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "48 pies",
+    "UnitPrice" : 49.3000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 63,
+    "ProductName" : "Vegie-spread",
+    "SupplierID" : 7,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "15 - 625 g jars",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 64,
+    "ProductName" : "Wimmers gute Semmelknödel",
+    "SupplierID" : 12,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "20 bags x 4 pieces",
+    "UnitPrice" : 33.2500,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 80,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 65,
+    "ProductName" : "Louisiana Fiery Hot Pepper Sauce",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "32 - 8 oz bottles",
+    "UnitPrice" : 21.0500,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 66,
+    "ProductName" : "Louisiana Hot Spiced Okra",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 8 oz jars",
+    "UnitPrice" : 17.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 100,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 67,
+    "ProductName" : "Laughing Lumberjack Lager",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 52,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 68,
+    "ProductName" : "Scottish Longbreads",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 8 pieces",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 69,
+    "ProductName" : "Gudbrandsdalsost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 kg pkg.",
+    "UnitPrice" : 36.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 70,
+    "ProductName" : "Outback Lager",
+    "SupplierID" : 7,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 355 ml bottles",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 71,
+    "ProductName" : "Flotemysost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 21.5000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 72,
+    "ProductName" : "Mozzarella di Giovanni",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 34.8000,
+    "UnitsInStock" : 14,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 73,
+    "ProductName" : "Röd Kaviar",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 150 g jars",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 101,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 74,
+    "ProductName" : "Longlife Tofu",
+    "SupplierID" : 4,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 20,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 75,
+    "ProductName" : "Rhönbräu Klosterbier",
+    "SupplierID" : 12,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 0.5 l bottles",
+    "UnitPrice" : 7.7500,
+    "UnitsInStock" : 125,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 76,
+    "ProductName" : "Lakkalikööri",
+    "SupplierID" : 23,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "500 ml",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 57,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 77,
+    "ProductName" : "Original Frankfurter grüne Soße",
+    "SupplierID" : 12,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 boxes",
+    "UnitPrice" : 13.0000,
+    "UnitsInStock" : 32,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}]
diff --git a/vue-options-api-demos/grid/common/es.json b/vue-options-api-demos/grid/common/es.json
new file mode 100644
index 00000000..72eb2b1c
--- /dev/null
+++ b/vue-options-api-demos/grid/common/es.json
@@ -0,0 +1,55 @@
+{
+    "datepicker": {
+        "toggleCalendar": "Alternar calendario"
+    },
+    "calendar": {
+        "today": "Hoy"
+    },
+    "dateinput": {
+        "increment": "Incrementar valor",
+        "decrement": "Disminuir valor"
+    },
+    "numerictextbox": {
+        "increment": "Incrementar valor",
+        "decrement": "Disminuir valor"
+    },
+    "grid": {
+        "groupPanelEmpty": "Arrastre el título de una columna y suéltelo aquí para agrupar por ese criterio",
+        "noRecords": "No hay datos disponibles.",
+        "pagerFirstPage": "Ir a la primera página",
+        "pagerPreviousPage": "Ir a la página anterior",
+        "pagerNextPage": "Ir a la página siguiente",
+        "pagerLastPage": "Ir a la última página",
+        "pagerPage": "Página",
+        "pagerOf": "de",
+        "pagerTotalPages": "{0}",
+        "pagerItems": "ítems",
+        "pagerInfo": "{0} - {1} de {2} ítems",
+        "pagerItemsPerPage": "ítems por página",
+        "filterEqOperator": "Es igual a",
+        "filterNotEqOperator": "No es igual a",
+        "filterIsNullOperator": "Es nulo",
+        "filterIsNotNullOperator": "No es nulo",
+        "filterIsEmptyOperator": "Está vacío",
+        "filterIsNotEmptyOperator": "No está vacío",
+        "filterStartsWithOperator": "Comienza con",
+        "filterContainsOperator": "Contiene",
+        "filterNotContainsOperator": "No contiene",
+        "filterEndsWithOperator": "Termina en",
+        "filterGteOperator": "Es mayor o igual que",
+        "filterGtOperator": "Es mayor que",
+        "filterLteOperator": "Es menor o igual que",
+        "filterLtOperator": "Es menor o igual que",
+        "filterIsTrue": "Sí",
+        "filterIsFalse": "No",
+        "filterBooleanAll": "(Todas)",
+        "filterAfterOrEqualOperator": "Es posterior o igual a",
+        "filterAfterOperator": "Es posterior",
+        "filterBeforeOperator": "Es anterior",
+        "filterBeforeOrEqualOperator": "Es anterior o igual a",
+        "filterFilterButton": "Filtrar",
+        "filterClearButton": "Limpiar filtros",
+        "filterAndLogic": "Y",
+        "filterOrLogic": "O"
+    }
+}
diff --git a/vue-options-api-demos/grid/common/northwind/categories.json b/vue-options-api-demos/grid/common/northwind/categories.json
new file mode 100644
index 00000000..9b40e6e0
--- /dev/null
+++ b/vue-options-api-demos/grid/common/northwind/categories.json
@@ -0,0 +1,43 @@
+
+[
+	{
+		"categoryID" : 2,
+		"description" : "Sweet and savory sauces relishes spreads and seasonings",
+		"name" : "Condiments"
+	},
+	{
+		"categoryID" : 1,
+		"description" : "Soft drinks coffees teas beers and ales",
+		"name" : "Beverages"
+	},
+	{
+		"categoryID" : 3,
+		"description" : "Desserts candies and sweet breads",
+		"name" : "Confections"
+	},
+	{
+		"categoryID" : 4,
+		"description" : "Cheeses",
+		"name" : "Dairy Products"
+	},
+	{
+		"categoryID" : 5,
+		"description" : "Breads crackers pasta and cereal",
+		"name" : "Grains/Cereals"
+	},
+	{
+		"categoryID" : 6,
+		"description" : "Prepared meats",
+		"name" : "Meat/Poultry"
+	},
+	{
+		"categoryID" : 7,
+		"description" : "Dried fruit and bean curd",
+		"name" : "Produce"
+	},
+	{
+		"categoryID" : 8,
+		"description" : "Seaweed and fish",
+		"name" : "Seafood"
+	}
+]
diff --git a/vue-options-api-demos/grid/common/northwind/customers.json b/vue-options-api-demos/grid/common/northwind/customers.json
new file mode 100644
index 00000000..ccf51582
--- /dev/null
+++ b/vue-options-api-demos/grid/common/northwind/customers.json
@@ -0,0 +1,1277 @@
+
+[
+	{
+		"customerID" : "AROUT",
+		"companyName" : "Around the Horn",
+		"contactName" : "Thomas Hardy",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "120 Hanover Sq.",
+			"city" : "London",
+			"region" : "NULL",
+			"postalCode" : "WA1 1DP",
+			"country" : "UK",
+			"phone" : "(171) 555-7788"
+		}
+	},
+	{
+		"customerID" : "BERGS",
+		"companyName" : "Berglunds snabbköp",
+		"contactName" : "Christina Berglund",
+		"contactTitle" : "Order Administrator",
+		"address" : {
+			"street" : "Berguvsvägen  8",
+			"city" : "Luleå",
+			"region" : "NULL",
+			"postalCode" : "S-958 22",
+			"country" : "Sweden",
+			"phone" : "0921-12 34 65"
+		}
+	},
+	{
+		"customerID" : "BLAUS",
+		"companyName" : "Blauer See Delikatessen",
+		"contactName" : "Hanna Moos",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "Forsterstr. 57",
+			"city" : "Mannheim",
+			"region" : "NULL",
+			"postalCode" : 68306,
+			"country" : "Germany",
+			"phone" : "0621-08460"
+		}
+	},
+	{
+		"customerID" : "BLONP",
+		"companyName" : "Blondesddsl père et fils",
+		"contactName" : "Frédérique Citeaux",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "24 place Kléber",
+			"city" : "Strasbourg",
+			"region" : "NULL",
+			"postalCode" : 67000,
+			"country" : "France",
+			"phone" : "88.60.15.31"
+		}
+	},
+	{
+		"customerID" : "BOLID",
+		"companyName" : "Bólido Comidas preparadas",
+		"contactName" : "Martín Sommer",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "67C Araquil",
+			"city" : "Madrid",
+			"region" : "NULL",
+			"postalCode" : 28023,
+			"country" : "Spain",
+			"phone" : "(91) 555 22 82"
+		}
+	},
+	{
+		"customerID" : "BONAP",
+		"companyName" : "Bon app'",
+		"contactName" : "Laurence Lebihan",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "12 rue des Bouchers",
+			"city" : "Marseille",
+			"region" : "NULL",
+			"postalCode" : 13008,
+			"country" : "France",
+			"phone" : "91.24.45.40"
+		}
+	},
+	{
+		"customerID" : "ANTON",
+		"companyName" : "Antonio Moreno Taquería",
+		"contactName" : "Antonio Moreno",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "Mataderos  2312",
+			"city" : "México D.F.",
+			"region" : "NULL",
+			"postalCode" : 5023,
+			"country" : "Mexico",
+			"phone" : "(5) 555-3932"
+		}
+	},
+	{
+		"customerID" : "ANATR",
+		"companyName" : "Ana Trujillo Emparedados y helados",
+		"contactName" : "Ana Trujillo",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "Avda. de la Constitución 2222",
+			"city" : "México D.F.",
+			"region" : "NULL",
+			"postalCode" : 5021,
+			"country" : "Mexico",
+			"phone" : "(5) 555-4729"
+		}
+	},
+	{
+		"customerID" : "CACTU",
+		"companyName" : "Cactus Comidas para llevar",
+		"contactName" : "Patricio Simpson",
+		"contactTitle" : "Sales Agent",
+		"address" : {
+			"street" : "Cerrito 333",
+			"city" : "Buenos Aires",
+			"region" : "NULL",
+			"postalCode" : 1010,
+			"country" : "Argentina",
+			"phone" : "(1) 135-5555"
+		}
+	},
+	{
+		"customerID" : "BSBEV",
+		"companyName" : "B's Beverages",
+		"contactName" : "Victoria Ashworth",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "Fauntleroy Circus",
+			"city" : "London",
+			"region" : "NULL",
+			"postalCode" : "EC2 5NT",
+			"country" : "UK",
+			"phone" : "(171) 555-1212"
+		}
+	},
+	{
+		"customerID" : "CENTC",
+		"companyName" : "Centro comercial Moctezuma",
+		"contactName" : "Francisco Chang",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "Sierras de Granada 9993",
+			"city" : "México D.F.",
+			"region" : "NULL",
+			"postalCode" : 5022,
+			"country" : "Mexico",
+			"phone" : "(5) 555-3392"
+		}
+	},
+	{
+		"customerID" : "CHOPS",
+		"companyName" : "Chop-suey Chinese",
+		"contactName" : "Yang Wang",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "Hauptstr. 29",
+			"city" : "Bern",
+			"region" : "NULL",
+			"postalCode" : 3012,
+			"country" : "Switzerland",
+			"phone" : "0452-076545"
+		}
+	},
+	{
+		"customerID" : "COMMI",
+		"companyName" : "Comércio Mineiro",
+		"contactName" : "Pedro Afonso",
+		"contactTitle" : "Sales Associate",
+		"address" : {
+			"street" : "23 Av. dos Lusíadas",
+			"city" : "Sao Paulo",
+			"region" : "SP",
+			"postalCode" : "05432-043",
+			"country" : "Brazil",
+			"phone" : "(11) 555-7647"
+		}
+	},
+	{
+		"customerID" : "CONSH",
+		"companyName" : "Consolidated Holdings",
+		"contactName" : "Elizabeth Brown",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "Berkeley Gardens 12  Brewery",
+			"city" : "London",
+			"region" : "NULL",
+			"postalCode" : "WX1 6LT",
+			"country" : "UK",
+			"phone" : "(171) 555-2282"
+		}
+	},
+	{
+		"customerID" : "ALFKI",
+		"companyName" : "Alfreds Futterkiste",
+		"contactName" : "Maria Anders",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "Obere Str. 57",
+			"city" : "Berlin",
+			"region" : "NULL",
+			"postalCode" : 12209,
+			"country" : "Germany",
+			"phone" : "030-0074321"
+		}
+	},
+	{
+		"customerID" : "BOTTM",
+		"companyName" : "Bottom-Dollar Markets",
+		"contactName" : "Elizabeth Lincoln",
+		"contactTitle" : "Accounting Manager",
+		"address" : {
+			"street" : "23 Tsawassen Blvd.",
+			"city" : "Tsawassen",
+			"region" : "BC",
+			"postalCode" : "T2F 8M4",
+			"country" : "Canada",
+			"phone" : "(604) 555-4729"
+		}
+	},
+	{
+		"customerID" : "DRACD",
+		"companyName" : "Drachenblut Delikatessen",
+		"contactName" : "Sven Ottlieb",
+		"contactTitle" : "Order Administrator",
+		"address" : {
+			"street" : "Walserweg 21",
+			"city" : "Aachen",
+			"region" : "NULL",
+			"postalCode" : 52066,
+			"country" : "Germany",
+			"phone" : "0241-039123"
+		}
+	},
+	{
+		"customerID" : "DUMON",
+		"companyName" : "Du monde entier",
+		"contactName" : "Janine Labrune",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "67 rue des Cinquante Otages",
+			"city" : "Nantes",
+			"region" : "NULL",
+			"postalCode" : 44000,
+			"country" : "France",
+			"phone" : "40.67.88.88"
+		}
+	},
+	{
+		"customerID" : "FAMIA",
+		"companyName" : "Familia Arquibaldo",
+		"contactName" : "Aria Cruz",
+		"contactTitle" : "Marketing Assistant",
+		"address" : {
+			"street" : "Rua Orós 92",
+			"city" : "Sao Paulo",
+			"region" : "SP",
+			"postalCode" : "05442-030",
+			"country" : "Brazil",
+			"phone" : "(11) 555-9857"
+		}
+	},
+	{
+		"customerID" : "FISSA",
+		"companyName" : "FISSA Fabrica Inter. Salchichas S.A.",
+		"contactName" : "Diego Roel",
+		"contactTitle" : "Accounting Manager",
+		"address" : {
+			"street" : "C/ Moralzarzal 86",
+			"city" : "Madrid",
+			"region" : "NULL",
+			"postalCode" : 28034,
+			"country" : "Spain",
+			"phone" : "(91) 555 94 44"
+		}
+	},
+	{
+		"customerID" : "FOLIG",
+		"companyName" : "Folies gourmandes",
+		"contactName" : "Martine Rancé",
+		"contactTitle" : "Assistant Sales Agent",
+		"address" : {
+			"street" : "184 chaussée de Tournai",
+			"city" : "Lille",
+			"region" : "NULL",
+			"postalCode" : 59000,
+			"country" : "France",
+			"phone" : "20.16.10.16"
+		}
+	},
+	{
+		"customerID" : "FOLKO",
+		"companyName" : "Folk och fä HB",
+		"contactName" : "Maria Larsson",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "Åkergatan 24",
+			"city" : "Bräcke",
+			"region" : "NULL",
+			"postalCode" : "S-844 67",
+			"country" : "Sweden",
+			"phone" : "0695-34 67 21"
+		}
+	},
+	{
+		"customerID" : "FRANK",
+		"companyName" : "Frankenversand",
+		"contactName" : "Peter Franken",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "Berliner Platz 43",
+			"city" : "München",
+			"region" : "NULL",
+			"postalCode" : 80805,
+			"country" : "Germany",
+			"phone" : "089-0877310"
+		}
+	},
+	{
+		"customerID" : "FRANR",
+		"companyName" : "France restauration",
+		"contactName" : "Carine Schmitt",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "54 rue Royale",
+			"city" : "Nantes",
+			"region" : "NULL",
+			"postalCode" : 44000,
+			"country" : "France",
+			"phone" : "40.32.21.21"
+		}
+	},
+	{
+		"customerID" : "EASTC",
+		"companyName" : "Eastern Connection",
+		"contactName" : "Ann Devon",
+		"contactTitle" : "Sales Agent",
+		"address" : {
+			"street" : "35 King George",
+			"city" : "London",
+			"region" : "NULL",
+			"postalCode" : "WX3 6FW",
+			"country" : "UK",
+			"phone" : "(171) 555-0297"
+		}
+	},
+	{
+		"customerID" : "ERNSH",
+		"companyName" : "Ernst Handel",
+		"contactName" : "Roland Mendel",
+		"contactTitle" : "Sales Manager",
+		"address" : {
+			"street" : "Kirchgasse 6",
+			"city" : "Graz",
+			"region" : "NULL",
+			"postalCode" : 8010,
+			"country" : "Austria",
+			"phone" : "7675-3425"
+		}
+	},
+	{
+		"customerID" : "FRANS",
+		"companyName" : "Franchi S.p.A.",
+		"contactName" : "Paolo Accorti",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "Via Monte Bianco 34",
+			"city" : "Torino",
+			"region" : "NULL",
+			"postalCode" : 10100,
+			"country" : "Italy",
+			"phone" : "011-4988260"
+		}
+	},
+	{
+		"customerID" : "FURIB",
+		"companyName" : "Furia Bacalhau e Frutos do Mar",
+		"contactName" : "Lino Rodriguez",
+		"contactTitle" : "Sales Manager",
+		"address" : {
+			"street" : "Jardim das rosas n. 32",
+			"city" : "Lisboa",
+			"region" : "NULL",
+			"postalCode" : 1675,
+			"country" : "Portugal",
+			"phone" : "(1) 354-2534"
+		}
+	},
+	{
+		"customerID" : "GALED",
+		"companyName" : "Galería del gastrónomo",
+		"contactName" : "Eduardo Saavedra",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "Rambla de Cataluña 23",
+			"city" : "Barcelona",
+			"region" : "NULL",
+			"postalCode" : 8022,
+			"country" : "Spain",
+			"phone" : "(93) 203 4560"
+		}
+	},
+	{
+		"customerID" : "GODOS",
+		"companyName" : "Godos Cocina Típica",
+		"contactName" : "José Pedro Freyre",
+		"contactTitle" : "Sales Manager",
+		"address" : {
+			"street" : "C/ Romero 33",
+			"city" : "Sevilla",
+			"region" : "NULL",
+			"postalCode" : 41101,
+			"country" : "Spain",
+			"phone" : "(95) 555 82 82"
+		}
+	},
+	{
+		"customerID" : "GOURL",
+		"companyName" : "Gourmet Lanchonetes",
+		"contactName" : "André Fonseca",
+		"contactTitle" : "Sales Associate",
+		"address" : {
+			"street" : "Av. Brasil 442",
+			"city" : "Campinas",
+			"region" : "SP",
+			"postalCode" : "04876-786",
+			"country" : "Brazil",
+			"phone" : "(11) 555-9482"
+		}
+	},
+	{
+		"customerID" : "HILAA",
+		"companyName" : "HILARION-Abastos",
+		"contactName" : "Carlos Hernández",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city" : "San Cristóbal",
+			"region" : "Táchira",
+			"postalCode" : 5022,
+			"country" : "Venezuela",
+			"phone" : "(5) 555-1340"
+		}
+	},
+	{
+		"customerID" : "HUNGC",
+		"companyName" : "Hungry Coyote Import Store",
+		"contactName" : "Yoshi Latimer",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "City Center Plaza 516 Main St.",
+			"city" : "Elgin",
+			"region" : "OR",
+			"postalCode" : 97827,
+			"country" : "USA",
+			"phone" : "(503) 555-6874"
+		}
+	},
+	{
+		"customerID" : "HUNGO",
+		"companyName" : "Hungry Owl All-Night Grocers",
+		"contactName" : "Patricia McKenna",
+		"contactTitle" : "Sales Associate",
+		"address" : {
+			"street" : "8 Johnstown Road",
+			"city" : "Cork",
+			"region" : "Co. Cork",
+			"postalCode" : "NULL",
+			"country" : "Ireland",
+			"phone" : "2967 542"
+		}
+	},
+	{
+		"customerID" : "ISLAT",
+		"companyName" : "Island Trading",
+		"contactName" : "Helen Bennett",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "Garden House Crowther Way",
+			"city" : "Cowes",
+			"region" : "Isle of Wight",
+			"postalCode" : "PO31 7PJ",
+			"country" : "UK",
+			"phone" : "(198) 555-8888"
+		}
+	},
+	{
+		"customerID" : "KOENE",
+		"companyName" : "Königlich Essen",
+		"contactName" : "Philip Cramer",
+		"contactTitle" : "Sales Associate",
+		"address" : {
+			"street" : "Maubelstr. 90",
+			"city" : "Brandenburg",
+			"region" : "NULL",
+			"postalCode" : 14776,
+			"country" : "Germany",
+			"phone" : "0555-09876"
+		}
+	},
+	{
+		"customerID" : "LACOR",
+		"companyName" : "La corne d'abondance",
+		"contactName" : "Daniel Tonini",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "67 avenue de l'Europe",
+			"city" : "Versailles",
+			"region" : "NULL",
+			"postalCode" : 78000,
+			"country" : "France",
+			"phone" : "30.59.84.10"
+		}
+	},
+	{
+		"customerID" : "GROSR",
+		"companyName" : "GROSELLA-Restaurante",
+		"contactName" : "Manuel Pereira",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "5ª Ave. Los Palos Grandes",
+			"city" : "Caracas",
+			"region" : "DF",
+			"postalCode" : 1081,
+			"country" : "Venezuela",
+			"phone" : "(2) 283-2951"
+		}
+	},
+	{
+		"customerID" : "HANAR",
+		"companyName" : "Hanari Carnes",
+		"contactName" : "Mario Pontes",
+		"contactTitle" : "Accounting Manager",
+		"address" : {
+			"street" : "Rua do Paço 67",
+			"city" : "Rio de Janeiro",
+			"region" : "RJ",
+			"postalCode" : "05454-876",
+			"country" : "Brazil",
+			"phone" : "(21) 555-0091"
+		}
+	},
+	{
+		"customerID" : "LAUGB",
+		"companyName" : "Laughing Bacchus Wine Cellars",
+		"contactName" : "Yoshi Tannamuri",
+		"contactTitle" : "Marketing Assistant",
+		"address" : {
+			"street" : "1900 Oak St.",
+			"city" : "Vancouver",
+			"region" : "BC",
+			"postalCode" : "V3F 2K1",
+			"country" : "Canada",
+			"phone" : "(604) 555-3392"
+		}
+	},
+	{
+		"customerID" : "LAZYK",
+		"companyName" : "Lazy K Kountry Store",
+		"contactName" : "John Steel",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "12 Orchestra Terrace",
+			"city" : "Walla Walla",
+			"region" : "WA",
+			"postalCode" : 99362,
+			"country" : "USA",
+			"phone" : "(509) 555-7969"
+		}
+	},
+	{
+		"customerID" : "LEHMS",
+		"companyName" : "Lehmanns Marktstand",
+		"contactName" : "Renate Messner",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "Magazinweg 7",
+			"city" : "Frankfurt a.M.",
+			"region" : "NULL",
+			"postalCode" : 60528,
+			"country" : "Germany",
+			"phone" : "069-0245984"
+		}
+	},
+	{
+		"customerID" : "GREAL",
+		"companyName" : "Great Lakes Food Market",
+		"contactName" : "Howard Snyder",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "2732 Baker Blvd.",
+			"city" : "Eugene",
+			"region" : "OR",
+			"postalCode" : 97403,
+			"country" : "USA",
+			"phone" : "(503) 555-7555"
+		}
+	},
+	{
+		"customerID" : "LAMAI",
+		"companyName" : "La maison d'Asie",
+		"contactName" : "Annette Roulet",
+		"contactTitle" : "Sales Manager",
+		"address" : {
+			"street" : "1 rue Alsace-Lorraine",
+			"city" : "Toulouse",
+			"region" : "NULL",
+			"postalCode" : 31000,
+			"country" : "France",
+			"phone" : "61.77.61.10"
+		}
+	},
+	{
+		"customerID" : "LETSS",
+		"companyName" : "Let's Stop N Shop",
+		"contactName" : "Jaime Yorres",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "87 Polk St. Suite 5",
+			"city" : "San Francisco",
+			"region" : "CA",
+			"postalCode" : 94117,
+			"country" : "USA",
+			"phone" : "(415) 555-5938"
+		}
+	},
+	{
+		"customerID" : "MAGAA",
+		"companyName" : "Magazzini Alimentari Riuniti",
+		"contactName" : "Giovanni Rovelli",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "Via Ludovico il Moro 22",
+			"city" : "Bergamo",
+			"region" : "NULL",
+			"postalCode" : 24100,
+			"country" : "Italy",
+			"phone" : "035-640230"
+		}
+	},
+	{
+		"customerID" : "MAISD",
+		"companyName" : "Maison Dewey",
+		"contactName" : "Catherine Dewey",
+		"contactTitle" : "Sales Agent",
+		"address" : {
+			"street" : "Rue Joseph-Bens 532",
+			"city" : "Bruxelles",
+			"region" : "NULL",
+			"postalCode" : "B-1180",
+			"country" : "Belgium",
+			"phone" : "(02) 201 24 67"
+		}
+	},
+	{
+		"customerID" : "MEREP",
+		"companyName" : "Mère Paillarde",
+		"contactName" : "Jean Fresnière",
+		"contactTitle" : "Marketing Assistant",
+		"address" : {
+			"street" : "43 rue St. Laurent",
+			"city" : "Montréal",
+			"region" : "Québec",
+			"postalCode" : "H1J 1C3",
+			"country" : "Canada",
+			"phone" : "(514) 555-8054"
+		}
+	},
+	{
+		"customerID" : "MORGK",
+		"companyName" : "Morgenstern Gesundkost",
+		"contactName" : "Alexander Feuer",
+		"contactTitle" : "Marketing Assistant",
+		"address" : {
+			"street" : "Heerstr. 22",
+			"city" : "Leipzig",
+			"region" : "NULL",
+			"postalCode" : 4179,
+			"country" : "Germany",
+			"phone" : "0342-023176"
+		}
+	},
+	{
+		"customerID" : "NORTS",
+		"companyName" : "North/South",
+		"contactName" : "Simon Crowther",
+		"contactTitle" : "Sales Associate",
+		"address" : {
+			"street" : "South House 300 Queensbridge",
+			"city" : "London",
+			"region" : "NULL",
+			"postalCode" : "SW7 1RZ",
+			"country" : "UK",
+			"phone" : "(171) 555-7733"
+		}
+	},
+	{
+		"customerID" : "OCEAN",
+		"companyName" : "Océano Atlántico Ltda.",
+		"contactName" : "Yvonne Moncada",
+		"contactTitle" : "Sales Agent",
+		"address" : {
+			"street" : "Ing. Gustavo Moncada 8585 Piso 20-A",
+			"city" : "Buenos Aires",
+			"region" : "NULL",
+			"postalCode" : 1010,
+			"country" : "Argentina",
+			"phone" : "(1) 135-5333"
+		}
+	},
+	{
+		"customerID" : "LINOD",
+		"companyName" : "LINO-Delicateses",
+		"contactName" : "Felipe Izquierdo",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "Ave. 5 de Mayo Porlamar",
+			"city" : "I. de Margarita",
+			"region" : "Nueva Esparta",
+			"postalCode" : 4980,
+			"country" : "Venezuela",
+			"phone" : "(8) 34-56-12"
+		}
+	},
+	{
+		"customerID" : "LILAS",
+		"companyName" : "LILA-Supermercado",
+		"contactName" : "Carlos González",
+		"contactTitle" : "Accounting Manager",
+		"address" : {
+			"street" : "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city" : "Barquisimeto",
+			"region" : "Lara",
+			"postalCode" : 3508,
+			"country" : "Venezuela",
+			"phone" : "(9) 331-6954"
+		}
+	},
+	{
+		"customerID" : "OLDWO",
+		"companyName" : "Old World Delicatessen",
+		"contactName" : "Rene Phillips",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "2743 Bering St.",
+			"city" : "Anchorage",
+			"region" : "AK",
+			"postalCode" : 99508,
+			"country" : "USA",
+			"phone" : "(907) 555-7584"
+		}
+	},
+	{
+		"customerID" : "OTTIK",
+		"companyName" : "Ottilies Käseladen",
+		"contactName" : "Henriette Pfalzheim",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "Mehrheimerstr. 369",
+			"city" : "Köln",
+			"region" : "NULL",
+			"postalCode" : 50739,
+			"country" : "Germany",
+			"phone" : "0221-0644327"
+		}
+	},
+	{
+		"customerID" : "PICCO",
+		"companyName" : "Piccolo und mehr",
+		"contactName" : "Georg Pipps",
+		"contactTitle" : "Sales Manager",
+		"address" : {
+			"street" : "Geislweg 14",
+			"city" : "Salzburg",
+			"region" : "NULL",
+			"postalCode" : 5020,
+			"country" : "Austria",
+			"phone" : "6562-9722"
+		}
+	},
+	{
+		"customerID" : "PARIS",
+		"companyName" : "Paris spécialités",
+		"contactName" : "Marie Bertrand",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "265 boulevard Charonne",
+			"city" : "Paris",
+			"region" : "NULL",
+			"postalCode" : 75012,
+			"country" : "France",
+			"phone" : "(1) 42.34.22.66"
+		}
+	},
+	{
+		"customerID" : "PERIC",
+		"companyName" : "Pericles Comidas clásicas",
+		"contactName" : "Guillermo Fernández",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "Calle Dr. Jorge Cash 321",
+			"city" : "México D.F.",
+			"region" : "NULL",
+			"postalCode" : 5033,
+			"country" : "Mexico",
+			"phone" : "(5) 552-3745"
+		}
+	},
+	{
+		"customerID" : "PRINI",
+		"companyName" : "Princesa Isabel Vinhos",
+		"contactName" : "Isabel de Castro",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "Estrada da saúde n. 58",
+			"city" : "Lisboa",
+			"region" : "NULL",
+			"postalCode" : 1756,
+			"country" : "Portugal",
+			"phone" : "(1) 356-5634"
+		}
+	},
+	{
+		"customerID" : "LONEP",
+		"companyName" : "Lonesome Pine Restaurant",
+		"contactName" : "Fran Wilson",
+		"contactTitle" : "Sales Manager",
+		"address" : {
+			"street" : "89 Chiaroscuro Rd.",
+			"city" : "Portland",
+			"region" : "OR",
+			"postalCode" : 97219,
+			"country" : "USA",
+			"phone" : "(503) 555-9573"
+		}
+	},
+	{
+		"customerID" : "QUEEN",
+		"companyName" : "Queen Cozinha",
+		"contactName" : "Lúcia Carvalho",
+		"contactTitle" : "Marketing Assistant",
+		"address" : {
+			"street" : "Alameda dos Canàrios 891",
+			"city" : "Sao Paulo",
+			"region" : "SP",
+			"postalCode" : "05487-020",
+			"country" : "Brazil",
+			"phone" : "(11) 555-1189"
+		}
+	},
+	{
+		"customerID" : "RATTC",
+		"companyName" : "Rattlesnake Canyon Grocery",
+		"contactName" : "Paula Wilson",
+		"contactTitle" : "Assistant Sales Representative",
+		"address" : {
+			"street" : "2817 Milton Dr.",
+			"city" : "Albuquerque",
+			"region" : "NM",
+			"postalCode" : 87110,
+			"country" : "USA",
+			"phone" : "(505) 555-5939"
+		}
+	},
+	{
+		"customerID" : "REGGC",
+		"companyName" : "Reggiani Caseifici",
+		"contactName" : "Maurizio Moroni",
+		"contactTitle" : "Sales Associate",
+		"address" : {
+			"street" : "Strada Provinciale 124",
+			"city" : "Reggio Emilia",
+			"region" : "NULL",
+			"postalCode" : 42100,
+			"country" : "Italy",
+			"phone" : "0522-556721"
+		}
+	},
+	{
+		"customerID" : "QUEDE",
+		"companyName" : "Que Delícia",
+		"contactName" : "Bernardo Batista",
+		"contactTitle" : "Accounting Manager",
+		"address" : {
+			"street" : "Rua da Panificadora",
+			"city" : "12Rio de Janeiro",
+			"region" : "RJ",
+			"postalCode" : "02389-673",
+			"country" : "Brazil",
+			"phone" : "(21) 555-4252"
+		}
+	},
+	{
+		"customerID" : "RANCH",
+		"companyName" : "Rancho grande",
+		"contactName" : "Sergio Gutiérrez",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "Av. del Libertador 900",
+			"city" : "Buenos Aires",
+			"region" : "NULL",
+			"postalCode" : 1010,
+			"country" : "Argentina",
+			"phone" : "(1) 123-5555"
+		}
+	},
+	{
+		"customerID" : "ROMEY",
+		"companyName" : "Romero y tomillo",
+		"contactName" : "Alejandra Camino",
+		"contactTitle" : "Accounting Manager",
+		"address" : {
+			"street" : "Gran Vía 1",
+			"city" : "Madrid",
+			"region" : "NULL",
+			"postalCode" : 28001,
+			"country" : "Spain",
+			"phone" : "(91) 745 6200"
+		}
+	},
+	{
+		"customerID" : "QUICK",
+		"companyName" : "QUICK-Stop",
+		"contactName" : "Horst Kloss",
+		"contactTitle" : "Accounting Manager",
+		"address" : {
+			"street" : "Taucherstraße 10",
+			"city" : "Cunewalde",
+			"region" : "NULL",
+			"postalCode" : 1307,
+			"country" : "Germany",
+			"phone" : "0372-035188"
+		}
+	},
+	{
+		"customerID" : "RICAR",
+		"companyName" : "Ricardo Adocicados",
+		"contactName" : "Janete Limeira",
+		"contactTitle" : "Assistant Sales Agent",
+		"address" : {
+			"street" : "Av. Copacabana 267",
+			"city" : "Rio de Janeiro",
+			"region" : "RJ",
+			"postalCode" : "02389-890",
+			"country" : "Brazil",
+			"phone" : "(21) 555-3412"
+		}
+	},
+	{
+		"customerID" : "RICSU",
+		"companyName" : "Richter Supermarkt",
+		"contactName" : "Michael Holz",
+		"contactTitle" : "Sales Manager",
+		"address" : {
+			"street" : "Grenzacherweg 237",
+			"city" : "Genève",
+			"region" : "NULL",
+			"postalCode" : 1203,
+			"country" : "Switzerland",
+			"phone" : "0897-034214"
+		}
+	},
+	{
+		"customerID" : "SANTG",
+		"companyName" : "Santé Gourmet",
+		"contactName" : "Jonas Bergulfsen",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "Erling Skakkes gate 78",
+			"city" : "Stavern",
+			"region" : "NULL",
+			"postalCode" : 4110,
+			"country" : "Norway",
+			"phone" : "07-98 92 35"
+		}
+	},
+	{
+		"customerID" : "SAVEA",
+		"companyName" : "Save-a-lot Markets",
+		"contactName" : "Jose Pavarotti",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "187 Suffolk Ln.",
+			"city" : "Boise",
+			"region" : "ID",
+			"postalCode" : 83720,
+			"country" : "USA",
+			"phone" : "(208) 555-8097"
+		}
+	},
+	{
+		"customerID" : "SEVES",
+		"companyName" : "Seven Seas Imports",
+		"contactName" : "Hari Kumar",
+		"contactTitle" : "Sales Manager",
+		"address" : {
+			"street" : "90 Wadhurst Rd.",
+			"city" : "London",
+			"region" : "NULL",
+			"postalCode" : "OX15 4NB",
+			"country" : "UK",
+			"phone" : "(171) 555-1717"
+		}
+	},
+	{
+		"customerID" : "SIMOB",
+		"companyName" : "Simons bistro",
+		"contactName" : "Jytte Petersen",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "Vinbæltet 34",
+			"city" : "Kobenhavn",
+			"region" : "NULL",
+			"postalCode" : 1734,
+			"country" : "Denmark",
+			"phone" : "31 12 34 56"
+		}
+	},
+	{
+		"customerID" : "SPECD",
+		"companyName" : "Spécialités du monde",
+		"contactName" : "Dominique Perrier",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "25 rue Lauriston",
+			"city" : "Paris",
+			"region" : "NULL",
+			"postalCode" : 75016,
+			"country" : "France",
+			"phone" : "(1) 47.55.60.10"
+		}
+	},
+	{
+		"customerID" : "SPLIR",
+		"companyName" : "Split Rail Beer & Ale",
+		"contactName" : "Art Braunschweiger",
+		"contactTitle" : "Sales Manager",
+		"address" : {
+			"street" : "P.O. Box 555",
+			"city" : "Lander",
+			"region" : "WY",
+			"postalCode" : 82520,
+			"country" : "USA",
+			"phone" : "(307) 555-4680"
+		}
+	},
+	{
+		"customerID" : "SUPRD",
+		"companyName" : "Suprêmes délices",
+		"contactName" : "Pascale Cartrain",
+		"contactTitle" : "Accounting Manager",
+		"address" : {
+			"street" : "Boulevard Tirou 255",
+			"city" : "Charleroi",
+			"region" : "NULL",
+			"postalCode" : "B-6000",
+			"country" : "Belgium",
+			"phone" : "(071) 23 67 22 20"
+		}
+	},
+	{
+		"customerID" : "THEBI",
+		"companyName" : "The Big Cheese",
+		"contactName" : "Liz Nixon",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "89 Jefferson Way Suite 2",
+			"city" : "Portland",
+			"region" : "OR",
+			"postalCode" : 97201,
+			"country" : "USA",
+			"phone" : "(503) 555-3612"
+		}
+	},
+	{
+		"customerID" : "THECR",
+		"companyName" : "The Cracker Box",
+		"contactName" : "Liu Wong",
+		"contactTitle" : "Marketing Assistant",
+		"address" : {
+			"street" : "55 Grizzly Peak Rd.",
+			"city" : "Butte",
+			"region" : "MT",
+			"postalCode" : 59801,
+			"country" : "USA",
+			"phone" : "(406) 555-5834"
+		}
+	},
+	{
+		"customerID" : "TOMSP",
+		"companyName" : "Toms Spezialitäten",
+		"contactName" : "Karin Josephs",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "Luisenstr. 48",
+			"city" : "Münster",
+			"region" : "NULL",
+			"postalCode" : 44087,
+			"country" : "Germany",
+			"phone" : "0251-031259"
+		}
+	},
+	{
+		"customerID" : "TORTU",
+		"companyName" : "Tortuga Restaurante",
+		"contactName" : "Miguel Angel Paolino",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "Avda. Azteca 123",
+			"city" : "México D.F.",
+			"region" : "NULL",
+			"postalCode" : 5033,
+			"country" : "Mexico",
+			"phone" : "(5) 555-2933"
+		}
+	},
+	{
+		"customerID" : "TRADH",
+		"companyName" : "Tradição Hipermercados",
+		"contactName" : "Anabela Domingues",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "Av. Inês de Castro 414",
+			"city" : "Sao Paulo",
+			"region" : "SP",
+			"postalCode" : "05634-030",
+			"country" : "Brazil",
+			"phone" : "(11) 555-2167"
+		}
+	},
+	{
+		"customerID" : "TRAIH",
+		"companyName" : "Trail's Head Gourmet Provisioners",
+		"contactName" : "Helvetius Nagy",
+		"contactTitle" : "Sales Associate",
+		"address" : {
+			"street" : "722 DaVinci Blvd.",
+			"city" : "Kirkland",
+			"region" : "WA",
+			"postalCode" : 98034,
+			"country" : "USA",
+			"phone" : "(206) 555-8257"
+		}
+	},
+	{
+		"customerID" : "VAFFE",
+		"companyName" : "Vaffeljernet",
+		"contactName" : "Palle Ibsen",
+		"contactTitle" : "Sales Manager",
+		"address" : {
+			"street" : "Smagsloget 45",
+			"city" : "Århus",
+			"region" : "NULL",
+			"postalCode" : 8200,
+			"country" : "Denmark",
+			"phone" : "86 21 32 43"
+		}
+	},
+	{
+		"customerID" : "VICTE",
+		"companyName" : "Victuailles en stock",
+		"contactName" : "Mary Saveley",
+		"contactTitle" : "Sales Agent",
+		"address" : {
+			"street" : "2 rue du Commerce",
+			"city" : "Lyon",
+			"region" : "NULL",
+			"postalCode" : 69004,
+			"country" : "France",
+			"phone" : "78.32.54.86"
+		}
+	},
+	{
+		"customerID" : "VINET",
+		"companyName" : "Vins et alcools Chevalier",
+		"contactName" : "Paul Henriot",
+		"contactTitle" : "Accounting Manager",
+		"address" : {
+			"street" : "59 rue de l'Abbaye",
+			"city" : "Reims",
+			"region" : "NULL",
+			"postalCode" : 51100,
+			"country" : "France",
+			"phone" : "26.47.15.10"
+		}
+	},
+	{
+		"customerID" : "WANDK",
+		"companyName" : "Die Wandernde Kuh",
+		"contactName" : "Rita Müller",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "Adenauerallee 900",
+			"city" : "Stuttgart",
+			"region" : "NULL",
+			"postalCode" : 70563,
+			"country" : "Germany",
+			"phone" : "0711-020361"
+		}
+	},
+	{
+		"customerID" : "WARTH",
+		"companyName" : "Wartian Herkku",
+		"contactName" : "Pirkko Koskitalo",
+		"contactTitle" : "Accounting Manager",
+		"address" : {
+			"street" : "Torikatu 38",
+			"city" : "Oulu",
+			"region" : "NULL",
+			"postalCode" : 90110,
+			"country" : "Finland",
+			"phone" : "981-443655"
+		}
+	},
+	{
+		"customerID" : "WELLI",
+		"companyName" : "Wellington Importadora",
+		"contactName" : "Paula Parente",
+		"contactTitle" : "Sales Manager",
+		"address" : {
+			"street" : "Rua do Mercado 12",
+			"city" : "Resende",
+			"region" : "SP",
+			"postalCode" : "08737-363",
+			"country" : "Brazil",
+			"phone" : "(14) 555-8122"
+		}
+	},
+	{
+		"customerID" : "WHITC",
+		"companyName" : "White Clover Markets",
+		"contactName" : "Karl Jablonski",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "305 - 14th Ave. S. Suite 3B",
+			"city" : "Seattle",
+			"region" : "WA",
+			"postalCode" : 98128,
+			"country" : "USA",
+			"phone" : "(206) 555-4112"
+		}
+	},
+	{
+		"customerID" : "WILMK",
+		"companyName" : "Wilman Kala",
+		"contactName" : "Matti Karttunen",
+		"contactTitle" : "Owner/Marketing Assistant",
+		"address" : {
+			"street" : "Keskuskatu 45",
+			"city" : "Helsinki",
+			"region" : "NULL",
+			"postalCode" : 21240,
+			"country" : "Finland",
+			"phone" : "90-224 8858"
+		}
+	},
+	{
+		"customerID" : "WOLZA",
+		"companyName" : "Wolski  Zajazd",
+		"contactName" : "Zbyszek Piestrzeniewicz",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "ul. Filtrowa 68",
+			"city" : "Warszawa",
+			"region" : "NULL",
+			"postalCode" : "01-012",
+			"country" : "Poland",
+			"phone" : "(26) 642-7012"
+		}
+	}
+]
diff --git a/vue-options-api-demos/grid/common/northwind/employees.json b/vue-options-api-demos/grid/common/northwind/employees.json
new file mode 100644
index 00000000..ca4d4a8b
--- /dev/null
+++ b/vue-options-api-demos/grid/common/northwind/employees.json
@@ -0,0 +1,241 @@
+
+[
+	{
+		"employeeID" : 2,
+		"lastName" : "Fuller",
+		"firstName" : "Andrew",
+		"title" : "Vice President Sales",
+		"titleOfCourtesy" : "Dr.",
+		"birthDate" : "1952-02-19 00:00:00.000",
+		"hireDate" : "1992-08-14 00:00:00.000",
+		"address" : {
+			"street" : "908 W. Capital Way",
+			"city" : "Tacoma",
+			"region" : "WA",
+			"postalCode" : 98401,
+			"country" : "USA",
+			"phone" : "(206) 555-9482"
+		},
+		"notes" : "Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981.  He is fluent in French and Italian and reads German.  He joined the company as a sales representative was promoted to sales manager",
+		"reportsTo" : "NULL",
+		"territoryIDs" : [
+			1730,
+			1833,
+			2116,
+			2139,
+			2184,
+			40222,
+			1581
+		]
+	},
+	{
+		"employeeID" : 5,
+		"lastName" : "Buchanan",
+		"firstName" : "Steven",
+		"title" : "Sales Manager",
+		"titleOfCourtesy" : "Mr.",
+		"birthDate" : "1955-03-04 00:00:00.000",
+		"hireDate" : "1993-10-17 00:00:00.000",
+		"address" : {
+			"street" : "14 Garrett Hill",
+			"city" : "London",
+			"region" : "NULL",
+			"postalCode" : "SW1 8JR",
+			"country" : "UK",
+			"phone" : "(71) 555-4848"
+		},
+		"notes" : "Steven Buchanan graduated from St. Andrews University in Scotland with a BSC degree in 1976.  Upon joining the company as a sales representative in 1992 he spent 6 months in an orientation program at the Seattle office.",
+		"reportsTo" : 2,
+		"territoryIDs" : [
+			2903,
+			7960,
+			8837,
+			10019,
+			10038,
+			11747,
+			14450
+		]
+	},
+	{
+		"employeeID" : 1,
+		"lastName" : "Davolio",
+		"firstName" : "Nancy",
+		"title" : "Sales Representative",
+		"titleOfCourtesy" : "Ms.",
+		"birthDate" : "1948-12-08 00:00:00.000",
+		"hireDate" : "1992-05-01 00:00:00.000",
+		"address" : {
+			"street" : "507 20th Ave. E. Apt. 2A",
+			"city" : "Seattle",
+			"region" : "WA",
+			"postalCode" : 98122,
+			"country" : "USA",
+			"phone" : "(206) 555-9857"
+		},
+		"notes" : "Education includes a BA in psychology from Colorado State University in 1970.  She also completed The Art of the Cold Call.  Nancy is a member of Toastmasters International.",
+		"reportsTo" : 2,
+		"territoryIDs" : [
+			6897,
+			19713
+		]
+	},
+	{
+		"employeeID" : 3,
+		"lastName" : "Leverling",
+		"firstName" : "Janet",
+		"title" : "Sales Representative",
+		"titleOfCourtesy" : "Ms.",
+		"birthDate" : "1963-08-30 00:00:00.000",
+		"hireDate" : "1992-04-01 00:00:00.000",
+		"address" : {
+			"street" : "722 Moss Bay Blvd.",
+			"city" : "Kirkland",
+			"region" : "WA",
+			"postalCode" : 98033,
+			"country" : "USA",
+			"phone" : "(206) 555-3412"
+		},
+		"notes" : "Janet has a BS degree in chemistry from Boston College (1984). She has also completed a certificate program in food retailing management.  Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.",
+		"reportsTo" : 2,
+		"territoryIDs" : [
+			30346,
+			31406,
+			32859,
+			33607
+		]
+	},
+	{
+		"employeeID" : 4,
+		"lastName" : "Peacock",
+		"firstName" : "Margaret",
+		"title" : "Sales Representative",
+		"titleOfCourtesy" : "Mrs.",
+		"birthDate" : "1937-09-19 00:00:00.000",
+		"hireDate" : "1993-05-03 00:00:00.000",
+		"address" : {
+			"street" : "4110 Old Redmond Rd.",
+			"city" : "Redmond",
+			"region" : "WA",
+			"postalCode" : 98052,
+			"country" : "USA",
+			"phone" : "(206) 555-8122"
+		},
+		"notes" : "Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American Institute of Culinary Arts (1966).  She was assigned to the London office temporarily from July through November 1992.",
+		"reportsTo" : 2,
+		"territoryIDs" : [
+			20852,
+			27403,
+			27511
+		]
+	},
+	{
+		"employeeID" : 6,
+		"lastName" : "Suyama",
+		"firstName" : "Michael",
+		"title" : "Sales Representative",
+		"titleOfCourtesy" : "Mr.",
+		"birthDate" : "1963-07-02 00:00:00.000",
+		"hireDate" : "1993-10-17 00:00:00.000",
+		"address" : {
+			"street" : "Coventry House Miner Rd.",
+			"city" : "London",
+			"region" : "NULL",
+			"postalCode" : "EC2 7JR",
+			"country" : "UK",
+			"phone" : "(71) 555-7773"
+		},
+		"notes" : "Michael is a graduate of Sussex University (MA Economics 1983) and the University of California at Los Angeles (MBA marketing 1986).  He has also taken the courses Multi-Cultural Selling and Time Management for the Sales Professional.",
+		"reportsTo" : 5,
+		"territoryIDs" : [
+			85014,
+			85251,
+			98004,
+			98104,
+			98052
+		]
+	},
+	{
+		"employeeID" : 7,
+		"lastName" : "King",
+		"firstName" : "Robert",
+		"title" : "Sales Representative",
+		"titleOfCourtesy" : "Mr.",
+		"birthDate" : "1960-05-29 00:00:00.000",
+		"hireDate" : "1994-01-02 00:00:00.000",
+		"address" : {
+			"street" : "Edgeham Hollow Winchester Way",
+			"city" : "London",
+			"region" : "NULL",
+			"postalCode" : "RG1 9SP",
+			"country" : "UK",
+			"phone" : "(71) 555-5598"
+		},
+		"notes" : "Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the University of Michigan in 1992 the year he joined the company.",
+		"reportsTo" : 5,
+		"territoryIDs" : [
+			60601,
+			80202,
+			80909,
+			90405,
+			94025,
+			94105,
+			95008,
+			95054,
+			95060,
+			60179
+		]
+	},
+	{
+		"employeeID" : 8,
+		"lastName" : "Callahan",
+		"firstName" : "Laura",
+		"title" : "Inside Sales Coordinator",
+		"titleOfCourtesy" : "Ms.",
+		"birthDate" : "1958-01-09 00:00:00.000",
+		"hireDate" : "1994-03-05 00:00:00.000",
+		"address" : {
+			"street" : "4726 11th Ave. N.E.",
+			"city" : "Seattle",
+			"region" : "WA",
+			"postalCode" : 98105,
+			"country" : "USA",
+			"phone" : "(206) 555-1189"
+		},
+		"notes" : "Laura received a BA in psychology from the University of Washington.  She has also completed a course in business French.  She reads and writes French.",
+		"reportsTo" : 2,
+		"territoryIDs" : [
+			19428,
+			44122,
+			45839,
+			53404
+		]
+	},
+	{
+		"employeeID" : 9,
+		"lastName" : "Dodsworth",
+		"firstName" : "Anne",
+		"title" : "Sales Representative",
+		"titleOfCourtesy" : "Ms.",
+		"birthDate" : "1966-01-27 00:00:00.000",
+		"hireDate" : "1994-11-15 00:00:00.000",
+		"address" : {
+			"street" : "7 Houndstooth Rd.",
+			"city" : "London",
+			"region" : "NULL",
+			"postalCode" : "WG2 7LT",
+			"country" : "UK",
+			"phone" : "(71) 555-4444"
+		},
+		"notes" : "Anne has a BA degree in English from St. Lawrence College.  She is fluent in French and German.",
+		"reportsTo" : 5,
+		"territoryIDs" : [
+			3049,
+			3801,
+			48075,
+			48084,
+			48304,
+			55113,
+			55439
+		]
+	}
+]
diff --git a/vue-options-api-demos/grid/common/northwind/orders.json b/vue-options-api-demos/grid/common/northwind/orders.json
new file mode 100644
index 00000000..9d8d8ac9
--- /dev/null
+++ b/vue-options-api-demos/grid/common/northwind/orders.json
@@ -0,0 +1,25576 @@
+[
+	{
+		"orderID": 10271,
+		"customerID": "SPLIR",
+		"employeeID": 6,
+		"orderDate": "1996-08-01 00:00:00.000",
+		"requiredDate": "1996-08-29 00:00:00.000",
+		"shippedDate": "1996-08-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 4.54,
+		"shipName": "Split Rail Beer & Ale",
+		"shipAddress": {
+			"street": "P.O. Box 555",
+			"city": "Lander",
+			"region": "WY",
+			"postalCode": 82520,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10266,
+		"customerID": "WARTH",
+		"employeeID": 3,
+		"orderDate": "1996-07-26 00:00:00.000",
+		"requiredDate": "1996-09-06 00:00:00.000",
+		"shippedDate": "1996-07-31 00:00:00.000",
+		"shipVia": 3,
+		"freight": 25.73,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 12,
+				"unitPrice": 30.4,
+				"quantity": 12,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10279,
+		"customerID": "LEHMS",
+		"employeeID": 8,
+		"orderDate": "1996-08-13 00:00:00.000",
+		"requiredDate": "1996-09-10 00:00:00.000",
+		"shippedDate": "1996-08-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 25.83,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 15,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10292,
+		"customerID": "TRADH",
+		"employeeID": 1,
+		"orderDate": "1996-08-28 00:00:00.000",
+		"requiredDate": "1996-09-25 00:00:00.000",
+		"shippedDate": "1996-09-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.35,
+		"shipName": "Tradiçao Hipermercados",
+		"shipAddress": {
+			"street": "Av. Inês de Castro 414",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05634-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 20,
+				"unitPrice": 64.8,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10295,
+		"customerID": "VINET",
+		"employeeID": 2,
+		"orderDate": "1996-09-02 00:00:00.000",
+		"requiredDate": "1996-09-30 00:00:00.000",
+		"shippedDate": "1996-09-10 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.15,
+		"shipName": "Vins et alcools Chevalier",
+		"shipAddress": {
+			"street": "59 rue de l'Abbaye",
+			"city": "Reims",
+			"region": "NULL",
+			"postalCode": 51100,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 4,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10313,
+		"customerID": "QUICK",
+		"employeeID": 2,
+		"orderDate": "1996-09-24 00:00:00.000",
+		"requiredDate": "1996-10-22 00:00:00.000",
+		"shippedDate": "1996-10-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.96,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 15.2,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10317,
+		"customerID": "LONEP",
+		"employeeID": 6,
+		"orderDate": "1996-09-30 00:00:00.000",
+		"requiredDate": "1996-10-28 00:00:00.000",
+		"shippedDate": "1996-10-10 00:00:00.000",
+		"shipVia": 1,
+		"freight": 12.69,
+		"shipName": "Lonesome Pine Restaurant",
+		"shipAddress": {
+			"street": "89 Chiaroscuro Rd.",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97219,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 14.4,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10322,
+		"customerID": "PERIC",
+		"employeeID": 7,
+		"orderDate": "1996-10-04 00:00:00.000",
+		"requiredDate": "1996-11-01 00:00:00.000",
+		"shippedDate": "1996-10-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 0.4,
+		"shipName": "Pericles Comidas clásicas",
+		"shipAddress": {
+			"street": "Calle Dr. Jorge Cash 321",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 52,
+				"unitPrice": 5.6,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10320,
+		"customerID": "WARTH",
+		"employeeID": 5,
+		"orderDate": "1996-10-03 00:00:00.000",
+		"requiredDate": "1996-10-17 00:00:00.000",
+		"shippedDate": "1996-10-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 34.57,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10321,
+		"customerID": "ISLAT",
+		"employeeID": 3,
+		"orderDate": "1996-10-03 00:00:00.000",
+		"requiredDate": "1996-10-31 00:00:00.000",
+		"shippedDate": "1996-10-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.43,
+		"shipName": "Island Trading",
+		"shipAddress": {
+			"street": "Garden House Crowther Way",
+			"city": "Cowes",
+			"region": "Isle of Wight",
+			"postalCode": "PO31 7PJ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 14.4,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10336,
+		"customerID": "PRINI",
+		"employeeID": 7,
+		"orderDate": "1996-10-23 00:00:00.000",
+		"requiredDate": "1996-11-20 00:00:00.000",
+		"shippedDate": "1996-10-25 00:00:00.000",
+		"shipVia": 2,
+		"freight": 15.51,
+		"shipName": "Princesa Isabel Vinhos",
+		"shipAddress": {
+			"street": "Estrada da saúde n. 58",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1756,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 17.6,
+				"quantity": 18,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10349,
+		"customerID": "SPLIR",
+		"employeeID": 7,
+		"orderDate": "1996-11-08 00:00:00.000",
+		"requiredDate": "1996-12-06 00:00:00.000",
+		"shippedDate": "1996-11-15 00:00:00.000",
+		"shipVia": 1,
+		"freight": 8.63,
+		"shipName": "Split Rail Beer & Ale",
+		"shipAddress": {
+			"street": "P.O. Box 555",
+			"city": "Lander",
+			"region": "WY",
+			"postalCode": 82520,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10331,
+		"customerID": "BONAP",
+		"employeeID": 9,
+		"orderDate": "1996-10-16 00:00:00.000",
+		"requiredDate": "1996-11-27 00:00:00.000",
+		"shippedDate": "1996-10-21 00:00:00.000",
+		"shipVia": 1,
+		"freight": 10.19,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10365,
+		"customerID": "ANTON",
+		"employeeID": 3,
+		"orderDate": "1996-11-27 00:00:00.000",
+		"requiredDate": "1996-12-25 00:00:00.000",
+		"shippedDate": "1996-12-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 22,
+		"shipName": "Antonio Moreno Taquería",
+		"shipAddress": {
+			"street": "Mataderos  2312",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5023,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10371,
+		"customerID": "LAMAI",
+		"employeeID": 1,
+		"orderDate": "1996-12-03 00:00:00.000",
+		"requiredDate": "1996-12-31 00:00:00.000",
+		"shippedDate": "1996-12-24 00:00:00.000",
+		"shipVia": 1,
+		"freight": 0.45,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 15.2,
+				"quantity": 6,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10376,
+		"customerID": "MEREP",
+		"employeeID": 1,
+		"orderDate": "1996-12-09 00:00:00.000",
+		"requiredDate": "1997-01-06 00:00:00.000",
+		"shippedDate": "1996-12-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 20.39,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 42,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10378,
+		"customerID": "FOLKO",
+		"employeeID": 5,
+		"orderDate": "1996-12-10 00:00:00.000",
+		"requiredDate": "1997-01-07 00:00:00.000",
+		"shippedDate": "1996-12-19 00:00:00.000",
+		"shipVia": 3,
+		"freight": 5.44,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10392,
+		"customerID": "PICCO",
+		"employeeID": 2,
+		"orderDate": "1996-12-24 00:00:00.000",
+		"requiredDate": "1997-01-21 00:00:00.000",
+		"shippedDate": "1997-01-01 00:00:00.000",
+		"shipVia": 3,
+		"freight": 122.46,
+		"shipName": "Piccolo und mehr",
+		"shipAddress": {
+			"street": "Geislweg 14",
+			"city": "Salzburg",
+			"region": "NULL",
+			"postalCode": 5020,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10391,
+		"customerID": "DRACD",
+		"employeeID": 3,
+		"orderDate": "1996-12-23 00:00:00.000",
+		"requiredDate": "1997-01-20 00:00:00.000",
+		"shippedDate": "1996-12-31 00:00:00.000",
+		"shipVia": 3,
+		"freight": 5.45,
+		"shipName": "Drachenblut Delikatessen",
+		"shipAddress": {
+			"street": "Walserweg 21",
+			"city": "Aachen",
+			"region": "NULL",
+			"postalCode": 52066,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 4.8,
+				"quantity": 18,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10405,
+		"customerID": "LINOD",
+		"employeeID": 1,
+		"orderDate": "1997-01-06 00:00:00.000",
+		"requiredDate": "1997-02-03 00:00:00.000",
+		"shippedDate": "1997-01-22 00:00:00.000",
+		"shipVia": 1,
+		"freight": 34.82,
+		"shipName": "LINO-Delicateses",
+		"shipAddress": {
+			"street": "Ave. 5 de Mayo Porlamar",
+			"city": "I. de Margarita",
+			"region": "Nueva Esparta",
+			"postalCode": 4980,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 3,
+				"unitPrice": 8,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10412,
+		"customerID": "WARTH",
+		"employeeID": 8,
+		"orderDate": "1997-01-13 00:00:00.000",
+		"requiredDate": "1997-02-10 00:00:00.000",
+		"shippedDate": "1997-01-15 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.77,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 18.6,
+				"quantity": 20,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10422,
+		"customerID": "FRANS",
+		"employeeID": 2,
+		"orderDate": "1997-01-22 00:00:00.000",
+		"requiredDate": "1997-02-19 00:00:00.000",
+		"shippedDate": "1997-01-31 00:00:00.000",
+		"shipVia": 1,
+		"freight": 3.02,
+		"shipName": "Franchi S.p.A.",
+		"shipAddress": {
+			"street": "Via Monte Bianco 34",
+			"city": "Torino",
+			"region": "NULL",
+			"postalCode": 10100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 2,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10433,
+		"customerID": "PRINI",
+		"employeeID": 3,
+		"orderDate": "1997-02-03 00:00:00.000",
+		"requiredDate": "1997-03-03 00:00:00.000",
+		"shippedDate": "1997-03-04 00:00:00.000",
+		"shipVia": 3,
+		"freight": 73.83,
+		"shipName": "Princesa Isabel Vinhos",
+		"shipAddress": {
+			"street": "Estrada da saúde n. 58",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1756,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 28,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10427,
+		"customerID": "PICCO",
+		"employeeID": 4,
+		"orderDate": "1997-01-27 00:00:00.000",
+		"requiredDate": "1997-02-24 00:00:00.000",
+		"shippedDate": "1997-03-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 31.29,
+		"shipName": "Piccolo und mehr",
+		"shipAddress": {
+			"street": "Geislweg 14",
+			"city": "Salzburg",
+			"region": "NULL",
+			"postalCode": 5020,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 18.6,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10437,
+		"customerID": "WARTH",
+		"employeeID": 8,
+		"orderDate": "1997-02-05 00:00:00.000",
+		"requiredDate": "1997-03-05 00:00:00.000",
+		"shippedDate": "1997-02-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 19.97,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10428,
+		"customerID": "REGGC",
+		"employeeID": 7,
+		"orderDate": "1997-01-28 00:00:00.000",
+		"requiredDate": "1997-02-25 00:00:00.000",
+		"shippedDate": "1997-02-04 00:00:00.000",
+		"shipVia": 1,
+		"freight": 11.09,
+		"shipName": "Reggiani Caseifici",
+		"shipAddress": {
+			"street": "Strada Provinciale 124",
+			"city": "Reggio Emilia",
+			"region": "NULL",
+			"postalCode": 42100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 46,
+				"unitPrice": 9.6,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10441,
+		"customerID": "OLDWO",
+		"employeeID": 3,
+		"orderDate": "1997-02-10 00:00:00.000",
+		"requiredDate": "1997-03-24 00:00:00.000",
+		"shippedDate": "1997-03-14 00:00:00.000",
+		"shipVia": 2,
+		"freight": 73.02,
+		"shipName": "Old World Delicatessen",
+		"shipAddress": {
+			"street": "2743 Bering St.",
+			"city": "Anchorage",
+			"region": "AK",
+			"postalCode": 99508,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 27,
+				"unitPrice": 35.1,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10457,
+		"customerID": "KOENE",
+		"employeeID": 2,
+		"orderDate": "1997-02-25 00:00:00.000",
+		"requiredDate": "1997-03-25 00:00:00.000",
+		"shippedDate": "1997-03-03 00:00:00.000",
+		"shipVia": 1,
+		"freight": 11.57,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 36,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10478,
+		"customerID": "VICTE",
+		"employeeID": 2,
+		"orderDate": "1997-03-18 00:00:00.000",
+		"requiredDate": "1997-04-01 00:00:00.000",
+		"shippedDate": "1997-03-26 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.81,
+		"shipName": "Victuailles en stock",
+		"shipAddress": {
+			"street": "2 rue du Commerce",
+			"city": "Lyon",
+			"region": "NULL",
+			"postalCode": 69004,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 24.8,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10482,
+		"customerID": "LAZYK",
+		"employeeID": 1,
+		"orderDate": "1997-03-21 00:00:00.000",
+		"requiredDate": "1997-04-18 00:00:00.000",
+		"shippedDate": "1997-04-10 00:00:00.000",
+		"shipVia": 3,
+		"freight": 7.48,
+		"shipName": "Lazy K Kountry Store",
+		"shipAddress": {
+			"street": "12 Orchestra Terrace",
+			"city": "Walla Walla",
+			"region": "WA",
+			"postalCode": 99362,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10494,
+		"customerID": "COMMI",
+		"employeeID": 4,
+		"orderDate": "1997-04-02 00:00:00.000",
+		"requiredDate": "1997-04-30 00:00:00.000",
+		"shippedDate": "1997-04-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 65.99,
+		"shipName": "Comércio Mineiro",
+		"shipAddress": {
+			"street": "Av. dos Lusíadas 23",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05432-043",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10501,
+		"customerID": "BLAUS",
+		"employeeID": 9,
+		"orderDate": "1997-04-09 00:00:00.000",
+		"requiredDate": "1997-05-07 00:00:00.000",
+		"shippedDate": "1997-04-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 8.85,
+		"shipName": "Blauer See Delikatessen",
+		"shipAddress": {
+			"street": "Forsterstr. 57",
+			"city": "Mannheim",
+			"region": "NULL",
+			"postalCode": 68306,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10496,
+		"customerID": "TRADH",
+		"employeeID": 7,
+		"orderDate": "1997-04-04 00:00:00.000",
+		"requiredDate": "1997-05-02 00:00:00.000",
+		"shippedDate": "1997-04-07 00:00:00.000",
+		"shipVia": 2,
+		"freight": 46.77,
+		"shipName": "Tradiçao Hipermercados",
+		"shipAddress": {
+			"street": "Av. Inês de Castro 414",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05634-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10509,
+		"customerID": "BLAUS",
+		"employeeID": 4,
+		"orderDate": "1997-04-17 00:00:00.000",
+		"requiredDate": "1997-05-15 00:00:00.000",
+		"shippedDate": "1997-04-29 00:00:00.000",
+		"shipVia": 1,
+		"freight": 0.15,
+		"shipName": "Blauer See Delikatessen",
+		"shipAddress": {
+			"street": "Forsterstr. 57",
+			"city": "Mannheim",
+			"region": "NULL",
+			"postalCode": 68306,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10505,
+		"customerID": "MEREP",
+		"employeeID": 3,
+		"orderDate": "1997-04-14 00:00:00.000",
+		"requiredDate": "1997-05-12 00:00:00.000",
+		"shippedDate": "1997-04-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 7.13,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10545,
+		"customerID": "LAZYK",
+		"employeeID": 8,
+		"orderDate": "1997-05-22 00:00:00.000",
+		"requiredDate": "1997-06-19 00:00:00.000",
+		"shippedDate": "1997-06-26 00:00:00.000",
+		"shipVia": 2,
+		"freight": 11.92,
+		"shipName": "Lazy K Kountry Store",
+		"shipAddress": {
+			"street": "12 Orchestra Terrace",
+			"city": "Walla Walla",
+			"region": "WA",
+			"postalCode": 99362,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10556,
+		"customerID": "SIMOB",
+		"employeeID": 2,
+		"orderDate": "1997-06-03 00:00:00.000",
+		"requiredDate": "1997-07-15 00:00:00.000",
+		"shippedDate": "1997-06-13 00:00:00.000",
+		"shipVia": 1,
+		"freight": 9.8,
+		"shipName": "Simons bistro",
+		"shipAddress": {
+			"street": "Vinbæltet 34",
+			"city": "Kobenhavn",
+			"region": "NULL",
+			"postalCode": 1734,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10568,
+		"customerID": "GALED",
+		"employeeID": 3,
+		"orderDate": "1997-06-13 00:00:00.000",
+		"requiredDate": "1997-07-11 00:00:00.000",
+		"shippedDate": "1997-07-09 00:00:00.000",
+		"shipVia": 3,
+		"freight": 6.54,
+		"shipName": "Galería del gastronómo",
+		"shipAddress": {
+			"street": "Rambla de Cataluña 23",
+			"city": "Barcelona",
+			"region": "NULL",
+			"postalCode": 8022,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10581,
+		"customerID": "FAMIA",
+		"employeeID": 3,
+		"orderDate": "1997-06-26 00:00:00.000",
+		"requiredDate": "1997-07-24 00:00:00.000",
+		"shippedDate": "1997-07-02 00:00:00.000",
+		"shipVia": 1,
+		"freight": 3.01,
+		"shipName": "Familia Arquibaldo",
+		"shipAddress": {
+			"street": "Rua Orós 92",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05442-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 50,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10585,
+		"customerID": "WELLI",
+		"employeeID": 7,
+		"orderDate": "1997-07-01 00:00:00.000",
+		"requiredDate": "1997-07-29 00:00:00.000",
+		"shippedDate": "1997-07-10 00:00:00.000",
+		"shipVia": 1,
+		"freight": 13.41,
+		"shipName": "Wellington Importadora",
+		"shipAddress": {
+			"street": "Rua do Mercado 12",
+			"city": "Resende",
+			"region": "SP",
+			"postalCode": "08737-363",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10586,
+		"customerID": "REGGC",
+		"employeeID": 9,
+		"orderDate": "1997-07-02 00:00:00.000",
+		"requiredDate": "1997-07-30 00:00:00.000",
+		"shippedDate": "1997-07-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 0.48,
+		"shipName": "Reggiani Caseifici",
+		"shipAddress": {
+			"street": "Strada Provinciale 124",
+			"city": "Reggio Emilia",
+			"region": "NULL",
+			"postalCode": 42100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 4,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10589,
+		"customerID": "GREAL",
+		"employeeID": 8,
+		"orderDate": "1997-07-04 00:00:00.000",
+		"requiredDate": "1997-08-01 00:00:00.000",
+		"shippedDate": "1997-07-14 00:00:00.000",
+		"shipVia": 2,
+		"freight": 4.42,
+		"shipName": "Great Lakes Food Market",
+		"shipAddress": {
+			"street": "2732 Baker Blvd.",
+			"city": "Eugene",
+			"region": "OR",
+			"postalCode": 97403,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 4,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10584,
+		"customerID": "BLONP",
+		"employeeID": 4,
+		"orderDate": "1997-06-30 00:00:00.000",
+		"requiredDate": "1997-07-28 00:00:00.000",
+		"shippedDate": "1997-07-04 00:00:00.000",
+		"shipVia": 1,
+		"freight": 59.14,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 50,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10599,
+		"customerID": "BSBEV",
+		"employeeID": 6,
+		"orderDate": "1997-07-15 00:00:00.000",
+		"requiredDate": "1997-08-26 00:00:00.000",
+		"shippedDate": "1997-07-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 29.98,
+		"shipName": "B's Beverages",
+		"shipAddress": {
+			"street": "Fauntleroy Circus",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "EC2 5NT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10602,
+		"customerID": "VAFFE",
+		"employeeID": 8,
+		"orderDate": "1997-07-17 00:00:00.000",
+		"requiredDate": "1997-08-14 00:00:00.000",
+		"shippedDate": "1997-07-22 00:00:00.000",
+		"shipVia": 2,
+		"freight": 2.92,
+		"shipName": "Vaffeljernet",
+		"shipAddress": {
+			"street": "Smagsloget 45",
+			"city": "Århus",
+			"region": "NULL",
+			"postalCode": 8200,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 5,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10608,
+		"customerID": "TOMSP",
+		"employeeID": 4,
+		"orderDate": "1997-07-23 00:00:00.000",
+		"requiredDate": "1997-08-20 00:00:00.000",
+		"shippedDate": "1997-08-01 00:00:00.000",
+		"shipVia": 2,
+		"freight": 27.79,
+		"shipName": "Toms Spezialitäten",
+		"shipAddress": {
+			"street": "Luisenstr. 48",
+			"city": "Münster",
+			"region": "NULL",
+			"postalCode": 44087,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 28,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10610,
+		"customerID": "LAMAI",
+		"employeeID": 8,
+		"orderDate": "1997-07-25 00:00:00.000",
+		"requiredDate": "1997-08-22 00:00:00.000",
+		"shippedDate": "1997-08-06 00:00:00.000",
+		"shipVia": 1,
+		"freight": 26.78,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 21,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10615,
+		"customerID": "WILMK",
+		"employeeID": 2,
+		"orderDate": "1997-07-30 00:00:00.000",
+		"requiredDate": "1997-08-27 00:00:00.000",
+		"shippedDate": "1997-08-06 00:00:00.000",
+		"shipVia": 3,
+		"freight": 0.75,
+		"shipName": "Wilman Kala",
+		"shipAddress": {
+			"street": "Keskuskatu 45",
+			"city": "Helsinki",
+			"region": "NULL",
+			"postalCode": 21240,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10617,
+		"customerID": "GREAL",
+		"employeeID": 4,
+		"orderDate": "1997-07-31 00:00:00.000",
+		"requiredDate": "1997-08-28 00:00:00.000",
+		"shippedDate": "1997-08-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 18.53,
+		"shipName": "Great Lakes Food Market",
+		"shipAddress": {
+			"street": "2732 Baker Blvd.",
+			"city": "Eugene",
+			"region": "OR",
+			"postalCode": 97403,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 30,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10628,
+		"customerID": "BLONP",
+		"employeeID": 4,
+		"orderDate": "1997-08-12 00:00:00.000",
+		"requiredDate": "1997-09-09 00:00:00.000",
+		"shippedDate": "1997-08-20 00:00:00.000",
+		"shipVia": 3,
+		"freight": 30.36,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10631,
+		"customerID": "LAMAI",
+		"employeeID": 8,
+		"orderDate": "1997-08-14 00:00:00.000",
+		"requiredDate": "1997-09-11 00:00:00.000",
+		"shippedDate": "1997-08-15 00:00:00.000",
+		"shipVia": 1,
+		"freight": 0.87,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 8,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10639,
+		"customerID": "SANTG",
+		"employeeID": 7,
+		"orderDate": "1997-08-20 00:00:00.000",
+		"requiredDate": "1997-09-17 00:00:00.000",
+		"shippedDate": "1997-08-27 00:00:00.000",
+		"shipVia": 3,
+		"freight": 38.64,
+		"shipName": "Santé Gourmet",
+		"shipAddress": {
+			"street": "Erling Skakkes gate 78",
+			"city": "Stavern",
+			"region": "NULL",
+			"postalCode": 4110,
+			"country": "Norway"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 8,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10655,
+		"customerID": "REGGC",
+		"employeeID": 1,
+		"orderDate": "1997-09-03 00:00:00.000",
+		"requiredDate": "1997-10-01 00:00:00.000",
+		"shippedDate": "1997-09-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 4.41,
+		"shipName": "Reggiani Caseifici",
+		"shipAddress": {
+			"street": "Strada Provinciale 124",
+			"city": "Reggio Emilia",
+			"region": "NULL",
+			"postalCode": 42100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 20,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10660,
+		"customerID": "HUNGC",
+		"employeeID": 8,
+		"orderDate": "1997-09-08 00:00:00.000",
+		"requiredDate": "1997-10-06 00:00:00.000",
+		"shippedDate": "1997-10-15 00:00:00.000",
+		"shipVia": 1,
+		"freight": 111.29,
+		"shipName": "Hungry Coyote Import Store",
+		"shipAddress": {
+			"street": "City Center Plaza 516 Main St.",
+			"city": "Elgin",
+			"region": "OR",
+			"postalCode": 97827,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 20,
+				"unitPrice": 81,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10662,
+		"customerID": "LONEP",
+		"employeeID": 3,
+		"orderDate": "1997-09-09 00:00:00.000",
+		"requiredDate": "1997-10-07 00:00:00.000",
+		"shippedDate": "1997-09-18 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.28,
+		"shipName": "Lonesome Pine Restaurant",
+		"shipAddress": {
+			"street": "89 Chiaroscuro Rd.",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97219,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10669,
+		"customerID": "SIMOB",
+		"employeeID": 2,
+		"orderDate": "1997-09-15 00:00:00.000",
+		"requiredDate": "1997-10-13 00:00:00.000",
+		"shippedDate": "1997-09-22 00:00:00.000",
+		"shipVia": 1,
+		"freight": 24.39,
+		"shipName": "Simons bistro",
+		"shipAddress": {
+			"street": "Vinbæltet 34",
+			"city": "Kobenhavn",
+			"region": "NULL",
+			"postalCode": 1734,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10679,
+		"customerID": "BLONP",
+		"employeeID": 8,
+		"orderDate": "1997-09-23 00:00:00.000",
+		"requiredDate": "1997-10-21 00:00:00.000",
+		"shippedDate": "1997-09-30 00:00:00.000",
+		"shipVia": 3,
+		"freight": 27.94,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10683,
+		"customerID": "DUMON",
+		"employeeID": 2,
+		"orderDate": "1997-09-26 00:00:00.000",
+		"requiredDate": "1997-10-24 00:00:00.000",
+		"shippedDate": "1997-10-01 00:00:00.000",
+		"shipVia": 1,
+		"freight": 4.4,
+		"shipName": "Du monde entier",
+		"shipAddress": {
+			"street": "67 rue des Cinquante Otages",
+			"city": "Nantes",
+			"region": "NULL",
+			"postalCode": 44000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10674,
+		"customerID": "ISLAT",
+		"employeeID": 4,
+		"orderDate": "1997-09-18 00:00:00.000",
+		"requiredDate": "1997-10-16 00:00:00.000",
+		"shippedDate": "1997-09-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 0.9,
+		"shipName": "Island Trading",
+		"shipAddress": {
+			"street": "Garden House Crowther Way",
+			"city": "Cowes",
+			"region": "Isle of Wight",
+			"postalCode": "PO31 7PJ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10692,
+		"customerID": "ALFKI",
+		"employeeID": 4,
+		"orderDate": "1997-10-03 00:00:00.000",
+		"requiredDate": "1997-10-31 00:00:00.000",
+		"shippedDate": "1997-10-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 61.02,
+		"shipName": "Alfred's Futterkiste",
+		"shipAddress": {
+			"street": "Obere Str. 57",
+			"city": "Berlin",
+			"region": "NULL",
+			"postalCode": 12209,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 63,
+				"unitPrice": 43.9,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10689,
+		"customerID": "BERGS",
+		"employeeID": 1,
+		"orderDate": "1997-10-01 00:00:00.000",
+		"requiredDate": "1997-10-29 00:00:00.000",
+		"shippedDate": "1997-10-07 00:00:00.000",
+		"shipVia": 2,
+		"freight": 13.42,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 35,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10699,
+		"customerID": "MORGK",
+		"employeeID": 3,
+		"orderDate": "1997-10-09 00:00:00.000",
+		"requiredDate": "1997-11-06 00:00:00.000",
+		"shippedDate": "1997-10-13 00:00:00.000",
+		"shipVia": 3,
+		"freight": 0.58,
+		"shipName": "Morgenstern Gesundkost",
+		"shipAddress": {
+			"street": "Heerstr. 22",
+			"city": "Leipzig",
+			"region": "NULL",
+			"postalCode": 4179,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10721,
+		"customerID": "QUICK",
+		"employeeID": 5,
+		"orderDate": "1997-10-29 00:00:00.000",
+		"requiredDate": "1997-11-26 00:00:00.000",
+		"shippedDate": "1997-10-31 00:00:00.000",
+		"shipVia": 3,
+		"freight": 48.92,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 50,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10723,
+		"customerID": "WHITC",
+		"employeeID": 3,
+		"orderDate": "1997-10-30 00:00:00.000",
+		"requiredDate": "1997-11-27 00:00:00.000",
+		"shippedDate": "1997-11-25 00:00:00.000",
+		"shipVia": 1,
+		"freight": 21.72,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10738,
+		"customerID": "SPECD",
+		"employeeID": 2,
+		"orderDate": "1997-11-12 00:00:00.000",
+		"requiredDate": "1997-12-10 00:00:00.000",
+		"shippedDate": "1997-11-18 00:00:00.000",
+		"shipVia": 1,
+		"freight": 2.91,
+		"shipName": "Spécialités du monde",
+		"shipAddress": {
+			"street": "25 rue Lauriston",
+			"city": "Paris",
+			"region": "NULL",
+			"postalCode": 75016,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10741,
+		"customerID": "AROUT",
+		"employeeID": 4,
+		"orderDate": "1997-11-14 00:00:00.000",
+		"requiredDate": "1997-11-28 00:00:00.000",
+		"shippedDate": "1997-11-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 10.96,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 15,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10732,
+		"customerID": "BONAP",
+		"employeeID": 3,
+		"orderDate": "1997-11-06 00:00:00.000",
+		"requiredDate": "1997-12-04 00:00:00.000",
+		"shippedDate": "1997-11-07 00:00:00.000",
+		"shipVia": 1,
+		"freight": 16.97,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10743,
+		"customerID": "AROUT",
+		"employeeID": 1,
+		"orderDate": "1997-11-17 00:00:00.000",
+		"requiredDate": "1997-12-15 00:00:00.000",
+		"shippedDate": "1997-11-21 00:00:00.000",
+		"shipVia": 2,
+		"freight": 23.72,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 28,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10754,
+		"customerID": "MAGAA",
+		"employeeID": 6,
+		"orderDate": "1997-11-25 00:00:00.000",
+		"requiredDate": "1997-12-23 00:00:00.000",
+		"shippedDate": "1997-11-27 00:00:00.000",
+		"shipVia": 3,
+		"freight": 2.38,
+		"shipName": "Magazzini Alimentari Riuniti",
+		"shipAddress": {
+			"street": "Via Ludovico il Moro 22",
+			"city": "Bergamo",
+			"region": "NULL",
+			"postalCode": 24100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10744,
+		"customerID": "VAFFE",
+		"employeeID": 6,
+		"orderDate": "1997-11-17 00:00:00.000",
+		"requiredDate": "1997-12-15 00:00:00.000",
+		"shippedDate": "1997-11-24 00:00:00.000",
+		"shipVia": 1,
+		"freight": 69.19,
+		"shipName": "Vaffeljernet",
+		"shipAddress": {
+			"street": "Smagsloget 45",
+			"city": "Århus",
+			"region": "NULL",
+			"postalCode": 8200,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 50,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10765,
+		"customerID": "QUICK",
+		"employeeID": 3,
+		"orderDate": "1997-12-04 00:00:00.000",
+		"requiredDate": "1998-01-01 00:00:00.000",
+		"shippedDate": "1997-12-09 00:00:00.000",
+		"shipVia": 3,
+		"freight": 42.74,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 80,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10770,
+		"customerID": "HANAR",
+		"employeeID": 8,
+		"orderDate": "1997-12-09 00:00:00.000",
+		"requiredDate": "1998-01-06 00:00:00.000",
+		"shippedDate": "1997-12-17 00:00:00.000",
+		"shipVia": 3,
+		"freight": 5.32,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 15,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10771,
+		"customerID": "ERNSH",
+		"employeeID": 9,
+		"orderDate": "1997-12-10 00:00:00.000",
+		"requiredDate": "1998-01-07 00:00:00.000",
+		"shippedDate": "1998-01-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 11.19,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 16,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10767,
+		"customerID": "SUPRD",
+		"employeeID": 4,
+		"orderDate": "1997-12-05 00:00:00.000",
+		"requiredDate": "1998-01-02 00:00:00.000",
+		"shippedDate": "1997-12-15 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.59,
+		"shipName": "Suprêmes délices",
+		"shipAddress": {
+			"street": "Boulevard Tirou 255",
+			"city": "Charleroi",
+			"region": "NULL",
+			"postalCode": "B-6000",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 2,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10782,
+		"customerID": "CACTU",
+		"employeeID": 9,
+		"orderDate": "1997-12-17 00:00:00.000",
+		"requiredDate": "1998-01-14 00:00:00.000",
+		"shippedDate": "1997-12-22 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.1,
+		"shipName": "Cactus Comidas para llevar",
+		"shipAddress": {
+			"street": "Cerrito 333",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 1,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10777,
+		"customerID": "GOURL",
+		"employeeID": 7,
+		"orderDate": "1997-12-15 00:00:00.000",
+		"requiredDate": "1997-12-29 00:00:00.000",
+		"shippedDate": "1998-01-21 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.01,
+		"shipName": "Gourmet Lanchonetes",
+		"shipAddress": {
+			"street": "Av. Brasil 442",
+			"city": "Campinas",
+			"region": "SP",
+			"postalCode": "04876-786",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 20,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10778,
+		"customerID": "BERGS",
+		"employeeID": 3,
+		"orderDate": "1997-12-16 00:00:00.000",
+		"requiredDate": "1998-01-13 00:00:00.000",
+		"shippedDate": "1997-12-24 00:00:00.000",
+		"shipVia": 1,
+		"freight": 6.79,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10797,
+		"customerID": "DRACD",
+		"employeeID": 7,
+		"orderDate": "1997-12-25 00:00:00.000",
+		"requiredDate": "1998-01-22 00:00:00.000",
+		"shippedDate": "1998-01-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 33.35,
+		"shipName": "Drachenblut Delikatessen",
+		"shipAddress": {
+			"street": "Walserweg 21",
+			"city": "Aachen",
+			"region": "NULL",
+			"postalCode": 52066,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10807,
+		"customerID": "FRANS",
+		"employeeID": 4,
+		"orderDate": "1997-12-31 00:00:00.000",
+		"requiredDate": "1998-01-28 00:00:00.000",
+		"shippedDate": "1998-01-30 00:00:00.000",
+		"shipVia": 1,
+		"freight": 1.36,
+		"shipName": "Franchi S.p.A.",
+		"shipAddress": {
+			"street": "Via Monte Bianco 34",
+			"city": "Torino",
+			"region": "NULL",
+			"postalCode": 10100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 1,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10809,
+		"customerID": "WELLI",
+		"employeeID": 7,
+		"orderDate": "1998-01-01 00:00:00.000",
+		"requiredDate": "1998-01-29 00:00:00.000",
+		"shippedDate": "1998-01-07 00:00:00.000",
+		"shipVia": 1,
+		"freight": 4.87,
+		"shipName": "Wellington Importadora",
+		"shipAddress": {
+			"street": "Rua do Mercado 12",
+			"city": "Resende",
+			"region": "SP",
+			"postalCode": "08737-363",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10815,
+		"customerID": "SAVEA",
+		"employeeID": 2,
+		"orderDate": "1998-01-05 00:00:00.000",
+		"requiredDate": "1998-02-02 00:00:00.000",
+		"shippedDate": "1998-01-14 00:00:00.000",
+		"shipVia": 3,
+		"freight": 14.62,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 16,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10820,
+		"customerID": "RATTC",
+		"employeeID": 3,
+		"orderDate": "1998-01-07 00:00:00.000",
+		"requiredDate": "1998-02-04 00:00:00.000",
+		"shippedDate": "1998-01-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 37.52,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10843,
+		"customerID": "VICTE",
+		"employeeID": 4,
+		"orderDate": "1998-01-21 00:00:00.000",
+		"requiredDate": "1998-02-18 00:00:00.000",
+		"shippedDate": "1998-01-26 00:00:00.000",
+		"shipVia": 2,
+		"freight": 9.26,
+		"shipName": "Victuailles en stock",
+		"shipAddress": {
+			"street": "2 rue du Commerce",
+			"city": "Lyon",
+			"region": "NULL",
+			"postalCode": 69004,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 4,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10844,
+		"customerID": "PICCO",
+		"employeeID": 8,
+		"orderDate": "1998-01-21 00:00:00.000",
+		"requiredDate": "1998-02-18 00:00:00.000",
+		"shippedDate": "1998-01-26 00:00:00.000",
+		"shipVia": 2,
+		"freight": 25.22,
+		"shipName": "Piccolo und mehr",
+		"shipAddress": {
+			"street": "Geislweg 14",
+			"city": "Salzburg",
+			"region": "NULL",
+			"postalCode": 5020,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10853,
+		"customerID": "BLAUS",
+		"employeeID": 9,
+		"orderDate": "1998-01-27 00:00:00.000",
+		"requiredDate": "1998-02-24 00:00:00.000",
+		"shippedDate": "1998-02-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 53.83,
+		"shipName": "Blauer See Delikatessen",
+		"shipAddress": {
+			"street": "Forsterstr. 57",
+			"city": "Mannheim",
+			"region": "NULL",
+			"postalCode": 68306,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10874,
+		"customerID": "GODOS",
+		"employeeID": 5,
+		"orderDate": "1998-02-06 00:00:00.000",
+		"requiredDate": "1998-03-06 00:00:00.000",
+		"shippedDate": "1998-02-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 19.58,
+		"shipName": "Godos Cocina Típica",
+		"shipAddress": {
+			"street": "C/ Romero 33",
+			"city": "Sevilla",
+			"region": "NULL",
+			"postalCode": 41101,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10867,
+		"customerID": "LONEP",
+		"employeeID": 6,
+		"orderDate": "1998-02-03 00:00:00.000",
+		"requiredDate": "1998-03-17 00:00:00.000",
+		"shippedDate": "1998-02-11 00:00:00.000",
+		"shipVia": 1,
+		"freight": 1.93,
+		"shipName": "Lonesome Pine Restaurant",
+		"shipAddress": {
+			"street": "89 Chiaroscuro Rd.",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97219,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10878,
+		"customerID": "QUICK",
+		"employeeID": 4,
+		"orderDate": "1998-02-10 00:00:00.000",
+		"requiredDate": "1998-03-10 00:00:00.000",
+		"shippedDate": "1998-02-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 46.69,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 20,
+				"unitPrice": 81,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10883,
+		"customerID": "LONEP",
+		"employeeID": 8,
+		"orderDate": "1998-02-12 00:00:00.000",
+		"requiredDate": "1998-03-12 00:00:00.000",
+		"shippedDate": "1998-02-20 00:00:00.000",
+		"shipVia": 3,
+		"freight": 0.53,
+		"shipName": "Lonesome Pine Restaurant",
+		"shipAddress": {
+			"street": "89 Chiaroscuro Rd.",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97219,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 8,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10887,
+		"customerID": "GALED",
+		"employeeID": 8,
+		"orderDate": "1998-02-13 00:00:00.000",
+		"requiredDate": "1998-03-13 00:00:00.000",
+		"shippedDate": "1998-02-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.25,
+		"shipName": "Galería del gastronómo",
+		"shipAddress": {
+			"street": "Rambla de Cataluña 23",
+			"city": "Barcelona",
+			"region": "NULL",
+			"postalCode": 8022,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10891,
+		"customerID": "LEHMS",
+		"employeeID": 7,
+		"orderDate": "1998-02-17 00:00:00.000",
+		"requiredDate": "1998-03-17 00:00:00.000",
+		"shippedDate": "1998-02-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 20.37,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 15,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10892,
+		"customerID": "MAISD",
+		"employeeID": 4,
+		"orderDate": "1998-02-17 00:00:00.000",
+		"requiredDate": "1998-03-17 00:00:00.000",
+		"shippedDate": "1998-02-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 120.27,
+		"shipName": "Maison Dewey",
+		"shipAddress": {
+			"street": "Rue Joseph-Bens 532",
+			"city": "Bruxelles",
+			"region": "NULL",
+			"postalCode": "B-1180",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 40,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10881,
+		"customerID": "CACTU",
+		"employeeID": 4,
+		"orderDate": "1998-02-11 00:00:00.000",
+		"requiredDate": "1998-03-11 00:00:00.000",
+		"shippedDate": "1998-02-18 00:00:00.000",
+		"shipVia": 1,
+		"freight": 2.84,
+		"shipName": "Cactus Comidas para llevar",
+		"shipAddress": {
+			"street": "Cerrito 333",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 73,
+				"unitPrice": 15,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10900,
+		"customerID": "WELLI",
+		"employeeID": 1,
+		"orderDate": "1998-02-20 00:00:00.000",
+		"requiredDate": "1998-03-20 00:00:00.000",
+		"shippedDate": "1998-03-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.66,
+		"shipName": "Wellington Importadora",
+		"shipAddress": {
+			"street": "Rua do Mercado 12",
+			"city": "Resende",
+			"region": "SP",
+			"postalCode": "08737-363",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 3,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10905,
+		"customerID": "WELLI",
+		"employeeID": 9,
+		"orderDate": "1998-02-24 00:00:00.000",
+		"requiredDate": "1998-03-24 00:00:00.000",
+		"shippedDate": "1998-03-06 00:00:00.000",
+		"shipVia": 2,
+		"freight": 13.72,
+		"shipName": "Wellington Importadora",
+		"shipAddress": {
+			"street": "Rua do Mercado 12",
+			"city": "Resende",
+			"region": "SP",
+			"postalCode": "08737-363",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10914,
+		"customerID": "QUEEN",
+		"employeeID": 6,
+		"orderDate": "1998-02-27 00:00:00.000",
+		"requiredDate": "1998-03-27 00:00:00.000",
+		"shippedDate": "1998-03-02 00:00:00.000",
+		"shipVia": 1,
+		"freight": 21.19,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10906,
+		"customerID": "WOLZA",
+		"employeeID": 4,
+		"orderDate": "1998-02-25 00:00:00.000",
+		"requiredDate": "1998-03-11 00:00:00.000",
+		"shippedDate": "1998-03-03 00:00:00.000",
+		"shipVia": 3,
+		"freight": 26.29,
+		"shipName": "Wolski Zajazd",
+		"shipAddress": {
+			"street": "ul. Filtrowa 68",
+			"city": "Warszawa",
+			"region": "NULL",
+			"postalCode": "01-012",
+			"country": "Poland"
+		},
+		"details": [
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10907,
+		"customerID": "SPECD",
+		"employeeID": 6,
+		"orderDate": "1998-02-25 00:00:00.000",
+		"requiredDate": "1998-03-25 00:00:00.000",
+		"shippedDate": "1998-02-27 00:00:00.000",
+		"shipVia": 3,
+		"freight": 9.19,
+		"shipName": "Spécialités du monde",
+		"shipAddress": {
+			"street": "25 rue Lauriston",
+			"city": "Paris",
+			"region": "NULL",
+			"postalCode": 75016,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 14,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10920,
+		"customerID": "AROUT",
+		"employeeID": 4,
+		"orderDate": "1998-03-03 00:00:00.000",
+		"requiredDate": "1998-03-31 00:00:00.000",
+		"shippedDate": "1998-03-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 29.61,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 50,
+				"unitPrice": 16.25,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10934,
+		"customerID": "LEHMS",
+		"employeeID": 3,
+		"orderDate": "1998-03-09 00:00:00.000",
+		"requiredDate": "1998-04-06 00:00:00.000",
+		"shippedDate": "1998-03-12 00:00:00.000",
+		"shipVia": 3,
+		"freight": 32.01,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 6,
+				"unitPrice": 25,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10936,
+		"customerID": "GREAL",
+		"employeeID": 3,
+		"orderDate": "1998-03-09 00:00:00.000",
+		"requiredDate": "1998-04-06 00:00:00.000",
+		"shippedDate": "1998-03-18 00:00:00.000",
+		"shipVia": 2,
+		"freight": 33.68,
+		"shipName": "Great Lakes Food Market",
+		"shipAddress": {
+			"street": "2732 Baker Blvd.",
+			"city": "Eugene",
+			"region": "OR",
+			"postalCode": 97403,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 30,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10942,
+		"customerID": "REGGC",
+		"employeeID": 9,
+		"orderDate": "1998-03-11 00:00:00.000",
+		"requiredDate": "1998-04-08 00:00:00.000",
+		"shippedDate": "1998-03-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 17.95,
+		"shipName": "Reggiani Caseifici",
+		"shipAddress": {
+			"street": "Strada Provinciale 124",
+			"city": "Reggio Emilia",
+			"region": "NULL",
+			"postalCode": 42100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 49,
+				"unitPrice": 20,
+				"quantity": 28,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10947,
+		"customerID": "BSBEV",
+		"employeeID": 3,
+		"orderDate": "1998-03-13 00:00:00.000",
+		"requiredDate": "1998-04-10 00:00:00.000",
+		"shippedDate": "1998-03-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.26,
+		"shipName": "B's Beverages",
+		"shipAddress": {
+			"street": "Fauntleroy Circus",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "EC2 5NT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 4,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10955,
+		"customerID": "FOLKO",
+		"employeeID": 8,
+		"orderDate": "1998-03-17 00:00:00.000",
+		"requiredDate": "1998-04-14 00:00:00.000",
+		"shippedDate": "1998-03-20 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.26,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 12,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10950,
+		"customerID": "MAGAA",
+		"employeeID": 1,
+		"orderDate": "1998-03-16 00:00:00.000",
+		"requiredDate": "1998-04-13 00:00:00.000",
+		"shippedDate": "1998-03-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 2.5,
+		"shipName": "Magazzini Alimentari Riuniti",
+		"shipAddress": {
+			"street": "Via Ludovico il Moro 22",
+			"city": "Bergamo",
+			"region": "NULL",
+			"postalCode": 24100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10963,
+		"customerID": "FURIB",
+		"employeeID": 9,
+		"orderDate": "1998-03-19 00:00:00.000",
+		"requiredDate": "1998-04-16 00:00:00.000",
+		"shippedDate": "1998-03-26 00:00:00.000",
+		"shipVia": 3,
+		"freight": 2.7,
+		"shipName": "Furia Bacalhau e Frutos do Mar",
+		"shipAddress": {
+			"street": "Jardim das rosas n. 32",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1675,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 2,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10969,
+		"customerID": "COMMI",
+		"employeeID": 1,
+		"orderDate": "1998-03-23 00:00:00.000",
+		"requiredDate": "1998-04-20 00:00:00.000",
+		"shippedDate": "1998-03-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 0.21,
+		"shipName": "Comércio Mineiro",
+		"shipAddress": {
+			"street": "Av. dos Lusíadas 23",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05432-043",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10970,
+		"customerID": "BOLID",
+		"employeeID": 9,
+		"orderDate": "1998-03-24 00:00:00.000",
+		"requiredDate": "1998-04-07 00:00:00.000",
+		"shippedDate": "1998-04-24 00:00:00.000",
+		"shipVia": 1,
+		"freight": 16.16,
+		"shipName": "Bólido Comidas preparadas",
+		"shipAddress": {
+			"street": "C/ Araquil 67",
+			"city": "Madrid",
+			"region": "NULL",
+			"postalCode": 28023,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 40,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10971,
+		"customerID": "FRANR",
+		"employeeID": 2,
+		"orderDate": "1998-03-24 00:00:00.000",
+		"requiredDate": "1998-04-21 00:00:00.000",
+		"shippedDate": "1998-04-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 121.82,
+		"shipName": "France restauration",
+		"shipAddress": {
+			"street": "54 rue Royale",
+			"city": "Nantes",
+			"region": "NULL",
+			"postalCode": 44000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 14,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10965,
+		"customerID": "OLDWO",
+		"employeeID": 6,
+		"orderDate": "1998-03-20 00:00:00.000",
+		"requiredDate": "1998-04-17 00:00:00.000",
+		"shippedDate": "1998-03-30 00:00:00.000",
+		"shipVia": 3,
+		"freight": 144.38,
+		"shipName": "Old World Delicatessen",
+		"shipAddress": {
+			"street": "2743 Bering St.",
+			"city": "Anchorage",
+			"region": "AK",
+			"postalCode": 99508,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 16,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10974,
+		"customerID": "SPLIR",
+		"employeeID": 3,
+		"orderDate": "1998-03-25 00:00:00.000",
+		"requiredDate": "1998-04-08 00:00:00.000",
+		"shippedDate": "1998-04-03 00:00:00.000",
+		"shipVia": 3,
+		"freight": 12.96,
+		"shipName": "Split Rail Beer & Ale",
+		"shipAddress": {
+			"street": "P.O. Box 555",
+			"city": "Lander",
+			"region": "WY",
+			"postalCode": 82520,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 63,
+				"unitPrice": 43.9,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10980,
+		"customerID": "FOLKO",
+		"employeeID": 4,
+		"orderDate": "1998-03-27 00:00:00.000",
+		"requiredDate": "1998-05-08 00:00:00.000",
+		"shippedDate": "1998-04-17 00:00:00.000",
+		"shipVia": 1,
+		"freight": 1.26,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 40,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10981,
+		"customerID": "HANAR",
+		"employeeID": 1,
+		"orderDate": "1998-03-27 00:00:00.000",
+		"requiredDate": "1998-04-24 00:00:00.000",
+		"shippedDate": "1998-04-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 193.37,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 60,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10959,
+		"customerID": "GOURL",
+		"employeeID": 6,
+		"orderDate": "1998-03-18 00:00:00.000",
+		"requiredDate": "1998-04-29 00:00:00.000",
+		"shippedDate": "1998-03-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 4.98,
+		"shipName": "Gourmet Lanchonetes",
+		"shipAddress": {
+			"street": "Av. Brasil 442",
+			"city": "Campinas",
+			"region": "SP",
+			"postalCode": "04876-786",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 20,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10992,
+		"customerID": "THEBI",
+		"employeeID": 1,
+		"orderDate": "1998-04-01 00:00:00.000",
+		"requiredDate": "1998-04-29 00:00:00.000",
+		"shippedDate": "1998-04-03 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.27,
+		"shipName": "The Big Cheese",
+		"shipAddress": {
+			"street": "89 Jefferson Way Suite 2",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97201,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 2,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10994,
+		"customerID": "VAFFE",
+		"employeeID": 2,
+		"orderDate": "1998-04-02 00:00:00.000",
+		"requiredDate": "1998-04-16 00:00:00.000",
+		"shippedDate": "1998-04-09 00:00:00.000",
+		"shipVia": 3,
+		"freight": 65.53,
+		"shipName": "Vaffeljernet",
+		"shipAddress": {
+			"street": "Smagsloget 45",
+			"city": "Århus",
+			"region": "NULL",
+			"postalCode": 8200,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 18,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10996,
+		"customerID": "QUICK",
+		"employeeID": 4,
+		"orderDate": "1998-04-02 00:00:00.000",
+		"requiredDate": "1998-04-30 00:00:00.000",
+		"shippedDate": "1998-04-10 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.12,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 11014,
+		"customerID": "LINOD",
+		"employeeID": 2,
+		"orderDate": "1998-04-10 00:00:00.000",
+		"requiredDate": "1998-05-08 00:00:00.000",
+		"shippedDate": "1998-04-15 00:00:00.000",
+		"shipVia": 3,
+		"freight": 23.6,
+		"shipName": "LINO-Delicateses",
+		"shipAddress": {
+			"street": "Ave. 5 de Mayo Porlamar",
+			"city": "I. de Margarita",
+			"region": "Nueva Esparta",
+			"postalCode": 4980,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 28,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 11020,
+		"customerID": "OTTIK",
+		"employeeID": 2,
+		"orderDate": "1998-04-14 00:00:00.000",
+		"requiredDate": "1998-05-12 00:00:00.000",
+		"shippedDate": "1998-04-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 43.3,
+		"shipName": "Ottilies Käseladen",
+		"shipAddress": {
+			"street": "Mehrheimerstr. 369",
+			"city": "Köln",
+			"region": "NULL",
+			"postalCode": 50739,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 24,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 11040,
+		"customerID": "GREAL",
+		"employeeID": 4,
+		"orderDate": "1998-04-22 00:00:00.000",
+		"requiredDate": "1998-05-20 00:00:00.000",
+		"shippedDate": "NULL",
+		"shipVia": 3,
+		"freight": 18.84,
+		"shipName": "Great Lakes Food Market",
+		"shipAddress": {
+			"street": "2732 Baker Blvd.",
+			"city": "Eugene",
+			"region": "OR",
+			"postalCode": 97403,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 11043,
+		"customerID": "SPECD",
+		"employeeID": 5,
+		"orderDate": "1998-04-22 00:00:00.000",
+		"requiredDate": "1998-05-20 00:00:00.000",
+		"shippedDate": "1998-04-29 00:00:00.000",
+		"shipVia": 2,
+		"freight": 8.8,
+		"shipName": "Spécialités du monde",
+		"shipAddress": {
+			"street": "25 rue Lauriston",
+			"city": "Paris",
+			"region": "NULL",
+			"postalCode": 75016,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 11044,
+		"customerID": "WOLZA",
+		"employeeID": 4,
+		"orderDate": "1998-04-23 00:00:00.000",
+		"requiredDate": "1998-05-21 00:00:00.000",
+		"shippedDate": "1998-05-01 00:00:00.000",
+		"shipVia": 1,
+		"freight": 8.72,
+		"shipName": "Wolski Zajazd",
+		"shipAddress": {
+			"street": "ul. Filtrowa 68",
+			"city": "Warszawa",
+			"region": "NULL",
+			"postalCode": "01-012",
+			"country": "Poland"
+		},
+		"details": [
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 11048,
+		"customerID": "BOTTM",
+		"employeeID": 7,
+		"orderDate": "1998-04-24 00:00:00.000",
+		"requiredDate": "1998-05-22 00:00:00.000",
+		"shippedDate": "1998-04-30 00:00:00.000",
+		"shipVia": 3,
+		"freight": 24.12,
+		"shipName": "Bottom-Dollar Markets",
+		"shipAddress": {
+			"street": "23 Tsawassen Blvd.",
+			"city": "Tsawassen",
+			"region": "BC",
+			"postalCode": "T2F 8M4",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 42,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 11037,
+		"customerID": "GODOS",
+		"employeeID": 7,
+		"orderDate": "1998-04-21 00:00:00.000",
+		"requiredDate": "1998-05-19 00:00:00.000",
+		"shippedDate": "1998-04-27 00:00:00.000",
+		"shipVia": 1,
+		"freight": 3.2,
+		"shipName": "Godos Cocina Típica",
+		"shipAddress": {
+			"street": "C/ Romero 33",
+			"city": "Sevilla",
+			"region": "NULL",
+			"postalCode": 41101,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 4,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 11050,
+		"customerID": "FOLKO",
+		"employeeID": 8,
+		"orderDate": "1998-04-27 00:00:00.000",
+		"requiredDate": "1998-05-25 00:00:00.000",
+		"shippedDate": "1998-05-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 59.41,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 50,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 11057,
+		"customerID": "NORTS",
+		"employeeID": 3,
+		"orderDate": "1998-04-29 00:00:00.000",
+		"requiredDate": "1998-05-27 00:00:00.000",
+		"shippedDate": "1998-05-01 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.13,
+		"shipName": "North/South",
+		"shipAddress": {
+			"street": "South House 300 Queensbridge",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "SW7 1RZ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 11061,
+		"customerID": "GREAL",
+		"employeeID": 4,
+		"orderDate": "1998-04-30 00:00:00.000",
+		"requiredDate": "1998-06-11 00:00:00.000",
+		"shippedDate": "NULL",
+		"shipVia": 3,
+		"freight": 14.01,
+		"shipName": "Great Lakes Food Market",
+		"shipAddress": {
+			"street": "2732 Baker Blvd.",
+			"city": "Eugene",
+			"region": "OR",
+			"postalCode": 97403,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 11051,
+		"customerID": "LAMAI",
+		"employeeID": 7,
+		"orderDate": "1998-04-27 00:00:00.000",
+		"requiredDate": "1998-05-25 00:00:00.000",
+		"shippedDate": "NULL",
+		"shipVia": 3,
+		"freight": 2.79,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 10,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 11067,
+		"customerID": "DRACD",
+		"employeeID": 1,
+		"orderDate": "1998-05-04 00:00:00.000",
+		"requiredDate": "1998-05-18 00:00:00.000",
+		"shippedDate": "1998-05-06 00:00:00.000",
+		"shipVia": 2,
+		"freight": 7.98,
+		"shipName": "Drachenblut Delikatessen",
+		"shipAddress": {
+			"street": "Walserweg 21",
+			"city": "Aachen",
+			"region": "NULL",
+			"postalCode": 52066,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 11069,
+		"customerID": "TORTU",
+		"employeeID": 1,
+		"orderDate": "1998-05-04 00:00:00.000",
+		"requiredDate": "1998-06-01 00:00:00.000",
+		"shippedDate": "1998-05-06 00:00:00.000",
+		"shipVia": 2,
+		"freight": 15.67,
+		"shipName": "Tortuga Restaurante",
+		"shipAddress": {
+			"street": "Avda. Azteca 123",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 11074,
+		"customerID": "SIMOB",
+		"employeeID": 7,
+		"orderDate": "1998-05-06 00:00:00.000",
+		"requiredDate": "1998-06-03 00:00:00.000",
+		"shippedDate": "NULL",
+		"shipVia": 2,
+		"freight": 18.44,
+		"shipName": "Simons bistro",
+		"shipAddress": {
+			"street": "Vinbæltet 34",
+			"city": "Kobenhavn",
+			"region": "NULL",
+			"postalCode": 1734,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 14,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10248,
+		"customerID": "VINET",
+		"employeeID": 5,
+		"orderDate": "1996-07-04 00:00:00.000",
+		"requiredDate": "1996-08-01 00:00:00.000",
+		"shippedDate": "1996-07-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 32.38,
+		"shipName": "Vins et alcools Chevalier",
+		"shipAddress": {
+			"street": "59 rue de l'Abbaye",
+			"city": "Reims",
+			"region": "NULL",
+			"postalCode": 51100,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 14,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 42,
+				"unitPrice": 9.8,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10249,
+		"customerID": "TOMSP",
+		"employeeID": 6,
+		"orderDate": "1996-07-05 00:00:00.000",
+		"requiredDate": "1996-08-16 00:00:00.000",
+		"shippedDate": "1996-07-10 00:00:00.000",
+		"shipVia": 1,
+		"freight": 11.61,
+		"shipName": "Toms Spezialitäten",
+		"shipAddress": {
+			"street": "Luisenstr. 48",
+			"city": "Münster",
+			"region": "NULL",
+			"postalCode": 44087,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 18.6,
+				"quantity": 9,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 42.4,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10250,
+		"customerID": "HANAR",
+		"employeeID": 4,
+		"orderDate": "1996-07-08 00:00:00.000",
+		"requiredDate": "1996-08-05 00:00:00.000",
+		"shippedDate": "1996-07-12 00:00:00.000",
+		"shipVia": 2,
+		"freight": 65.83,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 42.4,
+				"quantity": 35,
+				"discount": 0.15
+			},
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 15,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10252,
+		"customerID": "SUPRD",
+		"employeeID": 4,
+		"orderDate": "1996-07-09 00:00:00.000",
+		"requiredDate": "1996-08-06 00:00:00.000",
+		"shippedDate": "1996-07-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 51.3,
+		"shipName": "Suprêmes délices",
+		"shipAddress": {
+			"street": "Boulevard Tirou 255",
+			"city": "Charleroi",
+			"region": "NULL",
+			"postalCode": "B-6000",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 20,
+				"unitPrice": 64.8,
+				"quantity": 40,
+				"discount": 0.05
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 25,
+				"discount": 0.05
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10253,
+		"customerID": "HANAR",
+		"employeeID": 3,
+		"orderDate": "1996-07-10 00:00:00.000",
+		"requiredDate": "1996-07-24 00:00:00.000",
+		"shippedDate": "1996-07-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 58.17,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 42,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 16,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10251,
+		"customerID": "VICTE",
+		"employeeID": 3,
+		"orderDate": "1996-07-08 00:00:00.000",
+		"requiredDate": "1996-08-05 00:00:00.000",
+		"shippedDate": "1996-07-15 00:00:00.000",
+		"shipVia": 1,
+		"freight": 41.34,
+		"shipName": "Victuailles en stock",
+		"shipAddress": {
+			"street": "2 rue du Commerce",
+			"city": "Lyon",
+			"region": "NULL",
+			"postalCode": 69004,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 22,
+				"unitPrice": 16.8,
+				"quantity": 6,
+				"discount": 0.05
+			},
+			{
+				"productID": 57,
+				"unitPrice": 15.6,
+				"quantity": 15,
+				"discount": 0.05
+			},
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10257,
+		"customerID": "HILAA",
+		"employeeID": 4,
+		"orderDate": "1996-07-16 00:00:00.000",
+		"requiredDate": "1996-08-13 00:00:00.000",
+		"shippedDate": "1996-07-22 00:00:00.000",
+		"shipVia": 3,
+		"freight": 81.91,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 27,
+				"unitPrice": 35.1,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10258,
+		"customerID": "ERNSH",
+		"employeeID": 1,
+		"orderDate": "1996-07-17 00:00:00.000",
+		"requiredDate": "1996-08-14 00:00:00.000",
+		"shippedDate": "1996-07-23 00:00:00.000",
+		"shipVia": 1,
+		"freight": 140.51,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 50,
+				"discount": 0.2
+			},
+			{
+				"productID": 5,
+				"unitPrice": 17,
+				"quantity": 65,
+				"discount": 0.2
+			},
+			{
+				"productID": 32,
+				"unitPrice": 25.6,
+				"quantity": 6,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10259,
+		"customerID": "CENTC",
+		"employeeID": 4,
+		"orderDate": "1996-07-18 00:00:00.000",
+		"requiredDate": "1996-08-15 00:00:00.000",
+		"shippedDate": "1996-07-25 00:00:00.000",
+		"shipVia": 3,
+		"freight": 3.25,
+		"shipName": "Centro comercial Moctezuma",
+		"shipAddress": {
+			"street": "Sierras de Granada 9993",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5022,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 37,
+				"unitPrice": 20.8,
+				"quantity": 1,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10260,
+		"customerID": "OTTIK",
+		"employeeID": 4,
+		"orderDate": "1996-07-19 00:00:00.000",
+		"requiredDate": "1996-08-16 00:00:00.000",
+		"shippedDate": "1996-07-29 00:00:00.000",
+		"shipVia": 1,
+		"freight": 55.09,
+		"shipName": "Ottilies Käseladen",
+		"shipAddress": {
+			"street": "Mehrheimerstr. 369",
+			"city": "Köln",
+			"region": "NULL",
+			"postalCode": 50739,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 16,
+				"discount": 0.25
+			},
+			{
+				"productID": 57,
+				"unitPrice": 15.6,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 15,
+				"discount": 0.25
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 21,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10261,
+		"customerID": "QUEDE",
+		"employeeID": 4,
+		"orderDate": "1996-07-19 00:00:00.000",
+		"requiredDate": "1996-08-16 00:00:00.000",
+		"shippedDate": "1996-07-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.05,
+		"shipName": "Que Delícia",
+		"shipAddress": {
+			"street": "Rua da Panificadora 12",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-673",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 35,
+				"unitPrice": 14.4,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10262,
+		"customerID": "RATTC",
+		"employeeID": 8,
+		"orderDate": "1996-07-22 00:00:00.000",
+		"requiredDate": "1996-08-19 00:00:00.000",
+		"shippedDate": "1996-07-25 00:00:00.000",
+		"shipVia": 3,
+		"freight": 48.29,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 5,
+				"unitPrice": 17,
+				"quantity": 12,
+				"discount": 0.2
+			},
+			{
+				"productID": 7,
+				"unitPrice": 24,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 2,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10256,
+		"customerID": "WELLI",
+		"employeeID": 3,
+		"orderDate": "1996-07-15 00:00:00.000",
+		"requiredDate": "1996-08-12 00:00:00.000",
+		"shippedDate": "1996-07-17 00:00:00.000",
+		"shipVia": 2,
+		"freight": 13.97,
+		"shipName": "Wellington Importadora",
+		"shipAddress": {
+			"street": "Rua do Mercado 12",
+			"city": "Resende",
+			"region": "SP",
+			"postalCode": "08737-363",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10255,
+		"customerID": "RICSU",
+		"employeeID": 9,
+		"orderDate": "1996-07-12 00:00:00.000",
+		"requiredDate": "1996-08-09 00:00:00.000",
+		"shippedDate": "1996-07-15 00:00:00.000",
+		"shipVia": 3,
+		"freight": 148.33,
+		"shipName": "Richter Supermarkt",
+		"shipAddress": {
+			"street": "Starenweg 5",
+			"city": "Genève",
+			"region": "NULL",
+			"postalCode": 1204,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 36,
+				"unitPrice": 15.2,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10264,
+		"customerID": "FOLKO",
+		"employeeID": 6,
+		"orderDate": "1996-07-24 00:00:00.000",
+		"requiredDate": "1996-08-21 00:00:00.000",
+		"shippedDate": "1996-08-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 3.67,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 25,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10265,
+		"customerID": "BLONP",
+		"employeeID": 2,
+		"orderDate": "1996-07-25 00:00:00.000",
+		"requiredDate": "1996-08-22 00:00:00.000",
+		"shippedDate": "1996-08-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 55.28,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10254,
+		"customerID": "CHOPS",
+		"employeeID": 5,
+		"orderDate": "1996-07-11 00:00:00.000",
+		"requiredDate": "1996-08-08 00:00:00.000",
+		"shippedDate": "1996-07-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 22.98,
+		"shipName": "Chop-suey Chinese",
+		"shipAddress": {
+			"street": "Hauptstr. 31",
+			"city": "Bern",
+			"region": "NULL",
+			"postalCode": 3012,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 15,
+				"discount": 0.15
+			},
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 21,
+				"discount": 0.15
+			},
+			{
+				"productID": 74,
+				"unitPrice": 8,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10263,
+		"customerID": "ERNSH",
+		"employeeID": 9,
+		"orderDate": "1996-07-23 00:00:00.000",
+		"requiredDate": "1996-08-20 00:00:00.000",
+		"shippedDate": "1996-07-31 00:00:00.000",
+		"shipVia": 3,
+		"freight": 146.06,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 60,
+				"discount": 0.25
+			},
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 28,
+				"discount": 0
+			},
+			{
+				"productID": 30,
+				"unitPrice": 20.7,
+				"quantity": 60,
+				"discount": 0.25
+			},
+			{
+				"productID": 74,
+				"unitPrice": 8,
+				"quantity": 36,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10268,
+		"customerID": "GROSR",
+		"employeeID": 8,
+		"orderDate": "1996-07-30 00:00:00.000",
+		"requiredDate": "1996-08-27 00:00:00.000",
+		"shippedDate": "1996-08-02 00:00:00.000",
+		"shipVia": 3,
+		"freight": 66.29,
+		"shipName": "GROSELLA-Restaurante",
+		"shipAddress": {
+			"street": "5ª Ave. Los Palos Grandes",
+			"city": "Caracas",
+			"region": "DF",
+			"postalCode": 1081,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 99,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 4,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10267,
+		"customerID": "FRANK",
+		"employeeID": 4,
+		"orderDate": "1996-07-29 00:00:00.000",
+		"requiredDate": "1996-08-26 00:00:00.000",
+		"shippedDate": "1996-08-06 00:00:00.000",
+		"shipVia": 1,
+		"freight": 208.58,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 15,
+				"discount": 0.15
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 70,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10270,
+		"customerID": "WARTH",
+		"employeeID": 1,
+		"orderDate": "1996-08-01 00:00:00.000",
+		"requiredDate": "1996-08-29 00:00:00.000",
+		"shippedDate": "1996-08-02 00:00:00.000",
+		"shipVia": 1,
+		"freight": 136.54,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 15.2,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 36.8,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10274,
+		"customerID": "VINET",
+		"employeeID": 6,
+		"orderDate": "1996-08-06 00:00:00.000",
+		"requiredDate": "1996-09-03 00:00:00.000",
+		"shippedDate": "1996-08-16 00:00:00.000",
+		"shipVia": 1,
+		"freight": 6.01,
+		"shipName": "Vins et alcools Chevalier",
+		"shipAddress": {
+			"street": "59 rue de l'Abbaye",
+			"city": "Reims",
+			"region": "NULL",
+			"postalCode": 51100,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 7,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10275,
+		"customerID": "MAGAA",
+		"employeeID": 1,
+		"orderDate": "1996-08-07 00:00:00.000",
+		"requiredDate": "1996-09-04 00:00:00.000",
+		"shippedDate": "1996-08-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 26.93,
+		"shipName": "Magazzini Alimentari Riuniti",
+		"shipAddress": {
+			"street": "Via Ludovico il Moro 22",
+			"city": "Bergamo",
+			"region": "NULL",
+			"postalCode": 24100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 12,
+				"discount": 0.05
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 6,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10276,
+		"customerID": "TORTU",
+		"employeeID": 8,
+		"orderDate": "1996-08-08 00:00:00.000",
+		"requiredDate": "1996-08-22 00:00:00.000",
+		"shippedDate": "1996-08-14 00:00:00.000",
+		"shipVia": 3,
+		"freight": 13.84,
+		"shipName": "Tortuga Restaurante",
+		"shipAddress": {
+			"street": "Avda. Azteca 123",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 24.8,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 13,
+				"unitPrice": 4.8,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10277,
+		"customerID": "MORGK",
+		"employeeID": 2,
+		"orderDate": "1996-08-09 00:00:00.000",
+		"requiredDate": "1996-09-06 00:00:00.000",
+		"shippedDate": "1996-08-13 00:00:00.000",
+		"shipVia": 3,
+		"freight": 125.77,
+		"shipName": "Morgenstern Gesundkost",
+		"shipAddress": {
+			"street": "Heerstr. 22",
+			"city": "Leipzig",
+			"region": "NULL",
+			"postalCode": 4179,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10273,
+		"customerID": "QUICK",
+		"employeeID": 3,
+		"orderDate": "1996-08-05 00:00:00.000",
+		"requiredDate": "1996-09-02 00:00:00.000",
+		"shippedDate": "1996-08-12 00:00:00.000",
+		"shipVia": 3,
+		"freight": 76.07,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 15,
+				"discount": 0.05
+			},
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 60,
+				"discount": 0.05
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 33,
+				"discount": 0.05
+			},
+			{
+				"productID": 10,
+				"unitPrice": 24.8,
+				"quantity": 24,
+				"discount": 0.05
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10272,
+		"customerID": "RATTC",
+		"employeeID": 6,
+		"orderDate": "1996-08-02 00:00:00.000",
+		"requiredDate": "1996-08-30 00:00:00.000",
+		"shippedDate": "1996-08-06 00:00:00.000",
+		"shipVia": 2,
+		"freight": 98.03,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 20,
+				"unitPrice": 64.8,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10278,
+		"customerID": "BERGS",
+		"employeeID": 8,
+		"orderDate": "1996-08-12 00:00:00.000",
+		"requiredDate": "1996-09-09 00:00:00.000",
+		"shippedDate": "1996-08-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 92.69,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 73,
+				"unitPrice": 12,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 63,
+				"unitPrice": 35.1,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 44,
+				"unitPrice": 15.5,
+				"quantity": 16,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10269,
+		"customerID": "WHITC",
+		"employeeID": 5,
+		"orderDate": "1996-07-31 00:00:00.000",
+		"requiredDate": "1996-08-14 00:00:00.000",
+		"shippedDate": "1996-08-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 4.56,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 60,
+				"discount": 0.05
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10280,
+		"customerID": "BERGS",
+		"employeeID": 2,
+		"orderDate": "1996-08-14 00:00:00.000",
+		"requiredDate": "1996-09-11 00:00:00.000",
+		"shippedDate": "1996-09-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 8.98,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10281,
+		"customerID": "ROMEY",
+		"employeeID": 4,
+		"orderDate": "1996-08-14 00:00:00.000",
+		"requiredDate": "1996-08-28 00:00:00.000",
+		"shippedDate": "1996-08-21 00:00:00.000",
+		"shipVia": 1,
+		"freight": 2.94,
+		"shipName": "Romero y tomillo",
+		"shipAddress": {
+			"street": "Gran Vía 1",
+			"city": "Madrid",
+			"region": "NULL",
+			"postalCode": 28001,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 1,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 35,
+				"unitPrice": 14.4,
+				"quantity": 4,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10282,
+		"customerID": "ROMEY",
+		"employeeID": 4,
+		"orderDate": "1996-08-15 00:00:00.000",
+		"requiredDate": "1996-09-12 00:00:00.000",
+		"shippedDate": "1996-08-21 00:00:00.000",
+		"shipVia": 1,
+		"freight": 12.69,
+		"shipName": "Romero y tomillo",
+		"shipAddress": {
+			"street": "Gran Vía 1",
+			"city": "Madrid",
+			"region": "NULL",
+			"postalCode": 28001,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 20.7,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 57,
+				"unitPrice": 15.6,
+				"quantity": 2,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10283,
+		"customerID": "LILAS",
+		"employeeID": 3,
+		"orderDate": "1996-08-16 00:00:00.000",
+		"requiredDate": "1996-09-13 00:00:00.000",
+		"shippedDate": "1996-08-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 84.81,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 15,
+				"unitPrice": 12.4,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10284,
+		"customerID": "LEHMS",
+		"employeeID": 4,
+		"orderDate": "1996-08-19 00:00:00.000",
+		"requiredDate": "1996-09-16 00:00:00.000",
+		"shippedDate": "1996-08-27 00:00:00.000",
+		"shipVia": 1,
+		"freight": 76.56,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 27,
+				"unitPrice": 35.1,
+				"quantity": 15,
+				"discount": 0.25
+			},
+			{
+				"productID": 44,
+				"unitPrice": 15.5,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 20,
+				"discount": 0.25
+			},
+			{
+				"productID": 67,
+				"unitPrice": 11.2,
+				"quantity": 5,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10285,
+		"customerID": "QUICK",
+		"employeeID": 1,
+		"orderDate": "1996-08-20 00:00:00.000",
+		"requiredDate": "1996-09-17 00:00:00.000",
+		"shippedDate": "1996-08-26 00:00:00.000",
+		"shipVia": 2,
+		"freight": 76.83,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 14.4,
+				"quantity": 45,
+				"discount": 0.2
+			},
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 40,
+				"discount": 0.2
+			},
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 36,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10286,
+		"customerID": "QUICK",
+		"employeeID": 8,
+		"orderDate": "1996-08-21 00:00:00.000",
+		"requiredDate": "1996-09-18 00:00:00.000",
+		"shippedDate": "1996-08-30 00:00:00.000",
+		"shipVia": 3,
+		"freight": 229.24,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 14.4,
+				"quantity": 100,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10287,
+		"customerID": "RICAR",
+		"employeeID": 8,
+		"orderDate": "1996-08-22 00:00:00.000",
+		"requiredDate": "1996-09-19 00:00:00.000",
+		"shippedDate": "1996-08-28 00:00:00.000",
+		"shipVia": 3,
+		"freight": 12.76,
+		"shipName": "Ricardo Adocicados",
+		"shipAddress": {
+			"street": "Av. Copacabana 267",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-890",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 40,
+				"discount": 0.15
+			},
+			{
+				"productID": 34,
+				"unitPrice": 11.2,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 46,
+				"unitPrice": 9.6,
+				"quantity": 15,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10288,
+		"customerID": "REGGC",
+		"employeeID": 4,
+		"orderDate": "1996-08-23 00:00:00.000",
+		"requiredDate": "1996-09-20 00:00:00.000",
+		"shippedDate": "1996-09-03 00:00:00.000",
+		"shipVia": 1,
+		"freight": 7.45,
+		"shipName": "Reggiani Caseifici",
+		"shipAddress": {
+			"street": "Strada Provinciale 124",
+			"city": "Reggio Emilia",
+			"region": "NULL",
+			"postalCode": 42100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 10,
+				"discount": 0.1
+			},
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 3,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10289,
+		"customerID": "BSBEV",
+		"employeeID": 7,
+		"orderDate": "1996-08-26 00:00:00.000",
+		"requiredDate": "1996-09-23 00:00:00.000",
+		"shippedDate": "1996-08-28 00:00:00.000",
+		"shipVia": 3,
+		"freight": 22.77,
+		"shipName": "B's Beverages",
+		"shipAddress": {
+			"street": "Fauntleroy Circus",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "EC2 5NT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 3,
+				"unitPrice": 8,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 26.6,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10290,
+		"customerID": "COMMI",
+		"employeeID": 8,
+		"orderDate": "1996-08-27 00:00:00.000",
+		"requiredDate": "1996-09-24 00:00:00.000",
+		"shippedDate": "1996-09-03 00:00:00.000",
+		"shipVia": 1,
+		"freight": 79.7,
+		"shipName": "Comércio Mineiro",
+		"shipAddress": {
+			"street": "Av. dos Lusíadas 23",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05432-043",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 5,
+				"unitPrice": 17,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 29,
+				"unitPrice": 99,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 16,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10291,
+		"customerID": "QUEDE",
+		"employeeID": 6,
+		"orderDate": "1996-08-27 00:00:00.000",
+		"requiredDate": "1996-09-24 00:00:00.000",
+		"shippedDate": "1996-09-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 6.4,
+		"shipName": "Que Delícia",
+		"shipAddress": {
+			"street": "Rua da Panificadora 12",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-673",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 4.8,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 44,
+				"unitPrice": 15.5,
+				"quantity": 24,
+				"discount": 0.1
+			},
+			{
+				"productID": 51,
+				"unitPrice": 42.4,
+				"quantity": 2,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10296,
+		"customerID": "LILAS",
+		"employeeID": 6,
+		"orderDate": "1996-09-03 00:00:00.000",
+		"requiredDate": "1996-10-01 00:00:00.000",
+		"shippedDate": "1996-09-11 00:00:00.000",
+		"shipVia": 1,
+		"freight": 0.12,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10297,
+		"customerID": "BLONP",
+		"employeeID": 5,
+		"orderDate": "1996-09-04 00:00:00.000",
+		"requiredDate": "1996-10-16 00:00:00.000",
+		"shippedDate": "1996-09-10 00:00:00.000",
+		"shipVia": 2,
+		"freight": 5.74,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10298,
+		"customerID": "HUNGO",
+		"employeeID": 6,
+		"orderDate": "1996-09-05 00:00:00.000",
+		"requiredDate": "1996-10-03 00:00:00.000",
+		"shippedDate": "1996-09-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 168.22,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 36,
+				"unitPrice": 15.2,
+				"quantity": 40,
+				"discount": 0.25
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 30,
+				"discount": 0.25
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10299,
+		"customerID": "RICAR",
+		"employeeID": 4,
+		"orderDate": "1996-09-06 00:00:00.000",
+		"requiredDate": "1996-10-04 00:00:00.000",
+		"shippedDate": "1996-09-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 29.76,
+		"shipName": "Ricardo Adocicados",
+		"shipAddress": {
+			"street": "Av. Copacabana 267",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-890",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10300,
+		"customerID": "MAGAA",
+		"employeeID": 2,
+		"orderDate": "1996-09-09 00:00:00.000",
+		"requiredDate": "1996-10-07 00:00:00.000",
+		"shippedDate": "1996-09-18 00:00:00.000",
+		"shipVia": 2,
+		"freight": 17.68,
+		"shipName": "Magazzini Alimentari Riuniti",
+		"shipAddress": {
+			"street": "Via Ludovico il Moro 22",
+			"city": "Bergamo",
+			"region": "NULL",
+			"postalCode": 24100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 66,
+				"unitPrice": 13.6,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10301,
+		"customerID": "WANDK",
+		"employeeID": 8,
+		"orderDate": "1996-09-09 00:00:00.000",
+		"requiredDate": "1996-10-07 00:00:00.000",
+		"shippedDate": "1996-09-17 00:00:00.000",
+		"shipVia": 2,
+		"freight": 45.08,
+		"shipName": "Die Wandernde Kuh",
+		"shipAddress": {
+			"street": "Adenauerallee 900",
+			"city": "Stuttgart",
+			"region": "NULL",
+			"postalCode": 70563,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10293,
+		"customerID": "TORTU",
+		"employeeID": 1,
+		"orderDate": "1996-08-29 00:00:00.000",
+		"requiredDate": "1996-09-26 00:00:00.000",
+		"shippedDate": "1996-09-11 00:00:00.000",
+		"shipVia": 3,
+		"freight": 21.18,
+		"shipName": "Tortuga Restaurante",
+		"shipAddress": {
+			"street": "Avda. Azteca 123",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 50,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 63,
+				"unitPrice": 35.1,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10294,
+		"customerID": "RATTC",
+		"employeeID": 4,
+		"orderDate": "1996-08-30 00:00:00.000",
+		"requiredDate": "1996-09-27 00:00:00.000",
+		"shippedDate": "1996-09-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 147.26,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 14.4,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 36.8,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10302,
+		"customerID": "SUPRD",
+		"employeeID": 4,
+		"orderDate": "1996-09-10 00:00:00.000",
+		"requiredDate": "1996-10-08 00:00:00.000",
+		"shippedDate": "1996-10-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 6.27,
+		"shipName": "Suprêmes délices",
+		"shipAddress": {
+			"street": "Boulevard Tirou 255",
+			"city": "Charleroi",
+			"region": "NULL",
+			"postalCode": "B-6000",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 28,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 36.8,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10303,
+		"customerID": "GODOS",
+		"employeeID": 7,
+		"orderDate": "1996-09-11 00:00:00.000",
+		"requiredDate": "1996-10-09 00:00:00.000",
+		"shippedDate": "1996-09-18 00:00:00.000",
+		"shipVia": 2,
+		"freight": 107.83,
+		"shipName": "Godos Cocina Típica",
+		"shipAddress": {
+			"street": "C/ Romero 33",
+			"city": "Sevilla",
+			"region": "NULL",
+			"postalCode": 41101,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 40,
+				"discount": 0.1
+			},
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 15,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10304,
+		"customerID": "TORTU",
+		"employeeID": 1,
+		"orderDate": "1996-09-12 00:00:00.000",
+		"requiredDate": "1996-10-10 00:00:00.000",
+		"shippedDate": "1996-09-17 00:00:00.000",
+		"shipVia": 2,
+		"freight": 63.79,
+		"shipName": "Tortuga Restaurante",
+		"shipAddress": {
+			"street": "Avda. Azteca 123",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 49,
+				"unitPrice": 16,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 2,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10306,
+		"customerID": "ROMEY",
+		"employeeID": 1,
+		"orderDate": "1996-09-16 00:00:00.000",
+		"requiredDate": "1996-10-14 00:00:00.000",
+		"shippedDate": "1996-09-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 7.56,
+		"shipName": "Romero y tomillo",
+		"shipAddress": {
+			"street": "Gran Vía 1",
+			"city": "Madrid",
+			"region": "NULL",
+			"postalCode": 28001,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 20.7,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10305,
+		"customerID": "OLDWO",
+		"employeeID": 8,
+		"orderDate": "1996-09-13 00:00:00.000",
+		"requiredDate": "1996-10-11 00:00:00.000",
+		"shippedDate": "1996-10-09 00:00:00.000",
+		"shipVia": 3,
+		"freight": 257.62,
+		"shipName": "Old World Delicatessen",
+		"shipAddress": {
+			"street": "2743 Bering St.",
+			"city": "Anchorage",
+			"region": "AK",
+			"postalCode": 99508,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 99,
+				"quantity": 25,
+				"discount": 0.1
+			},
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 18,
+				"unitPrice": 50,
+				"quantity": 25,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10307,
+		"customerID": "LONEP",
+		"employeeID": 2,
+		"orderDate": "1996-09-17 00:00:00.000",
+		"requiredDate": "1996-10-15 00:00:00.000",
+		"shippedDate": "1996-09-25 00:00:00.000",
+		"shipVia": 2,
+		"freight": 0.56,
+		"shipName": "Lonesome Pine Restaurant",
+		"shipAddress": {
+			"street": "89 Chiaroscuro Rd.",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97219,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10308,
+		"customerID": "ANATR",
+		"employeeID": 7,
+		"orderDate": "1996-09-18 00:00:00.000",
+		"requiredDate": "1996-10-16 00:00:00.000",
+		"shippedDate": "1996-09-24 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.61,
+		"shipName": "Ana Trujillo Emparedados y helados",
+		"shipAddress": {
+			"street": "Avda. de la Constitución 2222",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5021,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 1,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10309,
+		"customerID": "HUNGO",
+		"employeeID": 3,
+		"orderDate": "1996-09-19 00:00:00.000",
+		"requiredDate": "1996-10-17 00:00:00.000",
+		"shippedDate": "1996-10-23 00:00:00.000",
+		"shipVia": 1,
+		"freight": 47.3,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 17.6,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 6,
+				"unitPrice": 20,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 42,
+				"unitPrice": 11.2,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 36.8,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10310,
+		"customerID": "THEBI",
+		"employeeID": 8,
+		"orderDate": "1996-09-20 00:00:00.000",
+		"requiredDate": "1996-10-18 00:00:00.000",
+		"shippedDate": "1996-09-27 00:00:00.000",
+		"shipVia": 2,
+		"freight": 17.52,
+		"shipName": "The Big Cheese",
+		"shipAddress": {
+			"street": "89 Jefferson Way Suite 2",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97201,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10314,
+		"customerID": "RATTC",
+		"employeeID": 1,
+		"orderDate": "1996-09-25 00:00:00.000",
+		"requiredDate": "1996-10-23 00:00:00.000",
+		"shippedDate": "1996-10-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 74.16,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 32,
+				"unitPrice": 25.6,
+				"quantity": 40,
+				"discount": 0.1
+			},
+			{
+				"productID": 58,
+				"unitPrice": 10.6,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 25,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10315,
+		"customerID": "ISLAT",
+		"employeeID": 4,
+		"orderDate": "1996-09-26 00:00:00.000",
+		"requiredDate": "1996-10-24 00:00:00.000",
+		"shippedDate": "1996-10-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 41.76,
+		"shipName": "Island Trading",
+		"shipAddress": {
+			"street": "Garden House Crowther Way",
+			"city": "Cowes",
+			"region": "Isle of Wight",
+			"postalCode": "PO31 7PJ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 34,
+				"unitPrice": 11.2,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10316,
+		"customerID": "RATTC",
+		"employeeID": 1,
+		"orderDate": "1996-09-27 00:00:00.000",
+		"requiredDate": "1996-10-25 00:00:00.000",
+		"shippedDate": "1996-10-08 00:00:00.000",
+		"shipVia": 3,
+		"freight": 150.15,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 70,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10311,
+		"customerID": "DUMON",
+		"employeeID": 1,
+		"orderDate": "1996-09-20 00:00:00.000",
+		"requiredDate": "1996-10-04 00:00:00.000",
+		"shippedDate": "1996-09-26 00:00:00.000",
+		"shipVia": 3,
+		"freight": 24.69,
+		"shipName": "Du monde entier",
+		"shipAddress": {
+			"street": "67 rue des Cinquante Otages",
+			"city": "Nantes",
+			"region": "NULL",
+			"postalCode": 44000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 42,
+				"unitPrice": 11.2,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 7,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10312,
+		"customerID": "WANDK",
+		"employeeID": 2,
+		"orderDate": "1996-09-23 00:00:00.000",
+		"requiredDate": "1996-10-21 00:00:00.000",
+		"shippedDate": "1996-10-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 40.26,
+		"shipName": "Die Wandernde Kuh",
+		"shipAddress": {
+			"street": "Adenauerallee 900",
+			"city": "Stuttgart",
+			"region": "NULL",
+			"postalCode": 70563,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 43,
+				"unitPrice": 36.8,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 4,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10319,
+		"customerID": "TORTU",
+		"employeeID": 7,
+		"orderDate": "1996-10-02 00:00:00.000",
+		"requiredDate": "1996-10-30 00:00:00.000",
+		"shippedDate": "1996-10-11 00:00:00.000",
+		"shipVia": 3,
+		"freight": 64.5,
+		"shipName": "Tortuga Restaurante",
+		"shipAddress": {
+			"street": "Avda. Azteca 123",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10318,
+		"customerID": "ISLAT",
+		"employeeID": 8,
+		"orderDate": "1996-10-01 00:00:00.000",
+		"requiredDate": "1996-10-29 00:00:00.000",
+		"shippedDate": "1996-10-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 4.73,
+		"shipName": "Island Trading",
+		"shipAddress": {
+			"street": "Garden House Crowther Way",
+			"city": "Cowes",
+			"region": "Isle of Wight",
+			"postalCode": "PO31 7PJ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10326,
+		"customerID": "BOLID",
+		"employeeID": 4,
+		"orderDate": "1996-10-10 00:00:00.000",
+		"requiredDate": "1996-11-07 00:00:00.000",
+		"shippedDate": "1996-10-14 00:00:00.000",
+		"shipVia": 2,
+		"freight": 77.92,
+		"shipName": "Bólido Comidas preparadas",
+		"shipAddress": {
+			"street": "C/ Araquil 67",
+			"city": "Madrid",
+			"region": "NULL",
+			"postalCode": 28023,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 17.6,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 57,
+				"unitPrice": 15.6,
+				"quantity": 16,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10323,
+		"customerID": "KOENE",
+		"employeeID": 4,
+		"orderDate": "1996-10-07 00:00:00.000",
+		"requiredDate": "1996-11-04 00:00:00.000",
+		"shippedDate": "1996-10-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 4.88,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 15,
+				"unitPrice": 12.4,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 25,
+				"unitPrice": 11.2,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 4,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10327,
+		"customerID": "FOLKO",
+		"employeeID": 2,
+		"orderDate": "1996-10-11 00:00:00.000",
+		"requiredDate": "1996-11-08 00:00:00.000",
+		"shippedDate": "1996-10-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 63.36,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 25,
+				"discount": 0.2
+			},
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 50,
+				"discount": 0.2
+			},
+			{
+				"productID": 30,
+				"unitPrice": 20.7,
+				"quantity": 35,
+				"discount": 0.2
+			},
+			{
+				"productID": 58,
+				"unitPrice": 10.6,
+				"quantity": 30,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10328,
+		"customerID": "FURIB",
+		"employeeID": 4,
+		"orderDate": "1996-10-14 00:00:00.000",
+		"requiredDate": "1996-11-11 00:00:00.000",
+		"shippedDate": "1996-10-17 00:00:00.000",
+		"shipVia": 3,
+		"freight": 87.03,
+		"shipName": "Furia Bacalhau e Frutos do Mar",
+		"shipAddress": {
+			"street": "Jardim das rosas n. 32",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1675,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 9,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10330,
+		"customerID": "LILAS",
+		"employeeID": 3,
+		"orderDate": "1996-10-16 00:00:00.000",
+		"requiredDate": "1996-11-13 00:00:00.000",
+		"shippedDate": "1996-10-28 00:00:00.000",
+		"shipVia": 1,
+		"freight": 12.75,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 25,
+				"discount": 0.15
+			},
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 50,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10329,
+		"customerID": "SPLIR",
+		"employeeID": 4,
+		"orderDate": "1996-10-15 00:00:00.000",
+		"requiredDate": "1996-11-26 00:00:00.000",
+		"shippedDate": "1996-10-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 191.67,
+		"shipName": "Split Rail Beer & Ale",
+		"shipAddress": {
+			"street": "P.O. Box 555",
+			"city": "Lander",
+			"region": "WY",
+			"postalCode": 82520,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 10,
+				"discount": 0.05
+			},
+			{
+				"productID": 30,
+				"unitPrice": 20.7,
+				"quantity": 8,
+				"discount": 0.05
+			},
+			{
+				"productID": 38,
+				"unitPrice": 210.8,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 12,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10324,
+		"customerID": "SAVEA",
+		"employeeID": 9,
+		"orderDate": "1996-10-08 00:00:00.000",
+		"requiredDate": "1996-11-05 00:00:00.000",
+		"shippedDate": "1996-10-10 00:00:00.000",
+		"shipVia": 1,
+		"freight": 214.27,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 14.4,
+				"quantity": 70,
+				"discount": 0.15
+			},
+			{
+				"productID": 46,
+				"unitPrice": 9.6,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 21,
+				"discount": 0.15
+			},
+			{
+				"productID": 63,
+				"unitPrice": 35.1,
+				"quantity": 80,
+				"discount": 0.15
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 40,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10333,
+		"customerID": "WARTH",
+		"employeeID": 5,
+		"orderDate": "1996-10-18 00:00:00.000",
+		"requiredDate": "1996-11-15 00:00:00.000",
+		"shippedDate": "1996-10-25 00:00:00.000",
+		"shipVia": 3,
+		"freight": 0.59,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 18.6,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 10,
+				"discount": 0.1
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 40,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10334,
+		"customerID": "VICTE",
+		"employeeID": 8,
+		"orderDate": "1996-10-21 00:00:00.000",
+		"requiredDate": "1996-11-18 00:00:00.000",
+		"shippedDate": "1996-10-28 00:00:00.000",
+		"shipVia": 2,
+		"freight": 8.56,
+		"shipName": "Victuailles en stock",
+		"shipAddress": {
+			"street": "2 rue du Commerce",
+			"city": "Lyon",
+			"region": "NULL",
+			"postalCode": 69004,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 5.6,
+				"quantity": 8,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10335,
+		"customerID": "HUNGO",
+		"employeeID": 7,
+		"orderDate": "1996-10-22 00:00:00.000",
+		"requiredDate": "1996-11-19 00:00:00.000",
+		"shippedDate": "1996-10-24 00:00:00.000",
+		"shipVia": 2,
+		"freight": 42.11,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 25,
+				"discount": 0.2
+			},
+			{
+				"productID": 32,
+				"unitPrice": 25.6,
+				"quantity": 6,
+				"discount": 0.2
+			},
+			{
+				"productID": 51,
+				"unitPrice": 42.4,
+				"quantity": 48,
+				"discount": 0.2
+			},
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 7,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10337,
+		"customerID": "FRANK",
+		"employeeID": 4,
+		"orderDate": "1996-10-24 00:00:00.000",
+		"requiredDate": "1996-11-21 00:00:00.000",
+		"shippedDate": "1996-10-29 00:00:00.000",
+		"shipVia": 3,
+		"freight": 108.26,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 23,
+				"unitPrice": 7.2,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 36,
+				"unitPrice": 15.2,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 37,
+				"unitPrice": 20.8,
+				"quantity": 28,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10338,
+		"customerID": "OLDWO",
+		"employeeID": 4,
+		"orderDate": "1996-10-25 00:00:00.000",
+		"requiredDate": "1996-11-22 00:00:00.000",
+		"shippedDate": "1996-10-29 00:00:00.000",
+		"shipVia": 3,
+		"freight": 84.21,
+		"shipName": "Old World Delicatessen",
+		"shipAddress": {
+			"street": "2743 Bering St.",
+			"city": "Anchorage",
+			"region": "AK",
+			"postalCode": 99508,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 30,
+				"unitPrice": 20.7,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10339,
+		"customerID": "MEREP",
+		"employeeID": 2,
+		"orderDate": "1996-10-28 00:00:00.000",
+		"requiredDate": "1996-11-25 00:00:00.000",
+		"shippedDate": "1996-11-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 15.66,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 17.6,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 70,
+				"discount": 0.05
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 28,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10340,
+		"customerID": "BONAP",
+		"employeeID": 1,
+		"orderDate": "1996-10-29 00:00:00.000",
+		"requiredDate": "1996-11-26 00:00:00.000",
+		"shippedDate": "1996-11-08 00:00:00.000",
+		"shipVia": 3,
+		"freight": 166.31,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 50,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 12,
+				"discount": 0.05
+			},
+			{
+				"productID": 43,
+				"unitPrice": 36.8,
+				"quantity": 40,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10341,
+		"customerID": "SIMOB",
+		"employeeID": 7,
+		"orderDate": "1996-10-29 00:00:00.000",
+		"requiredDate": "1996-11-26 00:00:00.000",
+		"shippedDate": "1996-11-05 00:00:00.000",
+		"shipVia": 3,
+		"freight": 26.78,
+		"shipName": "Simons bistro",
+		"shipAddress": {
+			"street": "Vinbæltet 34",
+			"city": "Kobenhavn",
+			"region": "NULL",
+			"postalCode": 1734,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 9,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10342,
+		"customerID": "FRANK",
+		"employeeID": 4,
+		"orderDate": "1996-10-30 00:00:00.000",
+		"requiredDate": "1996-11-13 00:00:00.000",
+		"shippedDate": "1996-11-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 54.83,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 24,
+				"discount": 0.2
+			},
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 56,
+				"discount": 0.2
+			},
+			{
+				"productID": 36,
+				"unitPrice": 15.2,
+				"quantity": 40,
+				"discount": 0.2
+			},
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 40,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10343,
+		"customerID": "LEHMS",
+		"employeeID": 4,
+		"orderDate": "1996-10-31 00:00:00.000",
+		"requiredDate": "1996-11-28 00:00:00.000",
+		"shippedDate": "1996-11-06 00:00:00.000",
+		"shipVia": 1,
+		"freight": 110.37,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 4,
+				"discount": 0.05
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 26.6,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10344,
+		"customerID": "WHITC",
+		"employeeID": 4,
+		"orderDate": "1996-11-01 00:00:00.000",
+		"requiredDate": "1996-11-29 00:00:00.000",
+		"shippedDate": "1996-11-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 23.29,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 17.6,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 8,
+				"unitPrice": 32,
+				"quantity": 70,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10345,
+		"customerID": "QUICK",
+		"employeeID": 2,
+		"orderDate": "1996-11-04 00:00:00.000",
+		"requiredDate": "1996-12-02 00:00:00.000",
+		"shippedDate": "1996-11-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 249.06,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 8,
+				"unitPrice": 32,
+				"quantity": 70,
+				"discount": 0
+			},
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 80,
+				"discount": 0
+			},
+			{
+				"productID": 42,
+				"unitPrice": 11.2,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10346,
+		"customerID": "RATTC",
+		"employeeID": 3,
+		"orderDate": "1996-11-05 00:00:00.000",
+		"requiredDate": "1996-12-17 00:00:00.000",
+		"shippedDate": "1996-11-08 00:00:00.000",
+		"shipVia": 3,
+		"freight": 142.08,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 36,
+				"discount": 0.1
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10347,
+		"customerID": "FAMIA",
+		"employeeID": 4,
+		"orderDate": "1996-11-06 00:00:00.000",
+		"requiredDate": "1996-12-04 00:00:00.000",
+		"shippedDate": "1996-11-08 00:00:00.000",
+		"shipVia": 3,
+		"freight": 3.1,
+		"shipName": "Familia Arquibaldo",
+		"shipAddress": {
+			"street": "Rua Orós 92",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05442-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 25,
+				"unitPrice": 11.2,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 50,
+				"discount": 0.15
+			},
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 6,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10348,
+		"customerID": "WANDK",
+		"employeeID": 4,
+		"orderDate": "1996-11-07 00:00:00.000",
+		"requiredDate": "1996-12-05 00:00:00.000",
+		"shippedDate": "1996-11-15 00:00:00.000",
+		"shipVia": 2,
+		"freight": 0.78,
+		"shipName": "Die Wandernde Kuh",
+		"shipAddress": {
+			"street": "Adenauerallee 900",
+			"city": "Stuttgart",
+			"region": "NULL",
+			"postalCode": 70563,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 14.4,
+				"quantity": 15,
+				"discount": 0.15
+			},
+			{
+				"productID": 23,
+				"unitPrice": 7.2,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10325,
+		"customerID": "KOENE",
+		"employeeID": 1,
+		"orderDate": "1996-10-09 00:00:00.000",
+		"requiredDate": "1996-10-23 00:00:00.000",
+		"shippedDate": "1996-10-14 00:00:00.000",
+		"shipVia": 3,
+		"freight": 64.86,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 4.8,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 14,
+				"unitPrice": 18.6,
+				"quantity": 9,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 6,
+				"unitPrice": 20,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10350,
+		"customerID": "LAMAI",
+		"employeeID": 6,
+		"orderDate": "1996-11-11 00:00:00.000",
+		"requiredDate": "1996-12-09 00:00:00.000",
+		"shippedDate": "1996-12-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 64.19,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 50,
+				"unitPrice": 13,
+				"quantity": 15,
+				"discount": 0.1
+			},
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 18,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10332,
+		"customerID": "MEREP",
+		"employeeID": 3,
+		"orderDate": "1996-10-17 00:00:00.000",
+		"requiredDate": "1996-11-28 00:00:00.000",
+		"shippedDate": "1996-10-21 00:00:00.000",
+		"shipVia": 2,
+		"freight": 52.84,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 50,
+				"quantity": 40,
+				"discount": 0.2
+			},
+			{
+				"productID": 42,
+				"unitPrice": 11.2,
+				"quantity": 10,
+				"discount": 0.2
+			},
+			{
+				"productID": 47,
+				"unitPrice": 7.6,
+				"quantity": 16,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10351,
+		"customerID": "ERNSH",
+		"employeeID": 1,
+		"orderDate": "1996-11-11 00:00:00.000",
+		"requiredDate": "1996-12-09 00:00:00.000",
+		"shippedDate": "1996-11-20 00:00:00.000",
+		"shipVia": 1,
+		"freight": 162.33,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 38,
+				"unitPrice": 210.8,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 13,
+				"discount": 0
+			},
+			{
+				"productID": 44,
+				"unitPrice": 15.5,
+				"quantity": 77,
+				"discount": 0.05
+			},
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 10,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10355,
+		"customerID": "AROUT",
+		"employeeID": 6,
+		"orderDate": "1996-11-15 00:00:00.000",
+		"requiredDate": "1996-12-13 00:00:00.000",
+		"shippedDate": "1996-11-20 00:00:00.000",
+		"shipVia": 1,
+		"freight": 41.95,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 57,
+				"unitPrice": 15.6,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10356,
+		"customerID": "WANDK",
+		"employeeID": 6,
+		"orderDate": "1996-11-18 00:00:00.000",
+		"requiredDate": "1996-12-16 00:00:00.000",
+		"shippedDate": "1996-11-27 00:00:00.000",
+		"shipVia": 2,
+		"freight": 36.71,
+		"shipName": "Die Wandernde Kuh",
+		"shipAddress": {
+			"street": "Adenauerallee 900",
+			"city": "Stuttgart",
+			"region": "NULL",
+			"postalCode": 70563,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10357,
+		"customerID": "LILAS",
+		"employeeID": 1,
+		"orderDate": "1996-11-19 00:00:00.000",
+		"requiredDate": "1996-12-17 00:00:00.000",
+		"shippedDate": "1996-12-02 00:00:00.000",
+		"shipVia": 3,
+		"freight": 34.88,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 24.8,
+				"quantity": 30,
+				"discount": 0.2
+			},
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 16,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 8,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10358,
+		"customerID": "LAMAI",
+		"employeeID": 5,
+		"orderDate": "1996-11-20 00:00:00.000",
+		"requiredDate": "1996-12-18 00:00:00.000",
+		"shippedDate": "1996-11-27 00:00:00.000",
+		"shipVia": 1,
+		"freight": 19.64,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 10,
+				"discount": 0.05
+			},
+			{
+				"productID": 34,
+				"unitPrice": 11.2,
+				"quantity": 10,
+				"discount": 0.05
+			},
+			{
+				"productID": 36,
+				"unitPrice": 15.2,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10359,
+		"customerID": "SEVES",
+		"employeeID": 5,
+		"orderDate": "1996-11-21 00:00:00.000",
+		"requiredDate": "1996-12-19 00:00:00.000",
+		"shippedDate": "1996-11-26 00:00:00.000",
+		"shipVia": 3,
+		"freight": 288.43,
+		"shipName": "Seven Seas Imports",
+		"shipAddress": {
+			"street": "90 Wadhurst Rd.",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "OX15 4NB",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 56,
+				"discount": 0.05
+			},
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 70,
+				"discount": 0.05
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 80,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10360,
+		"customerID": "BLONP",
+		"employeeID": 4,
+		"orderDate": "1996-11-22 00:00:00.000",
+		"requiredDate": "1996-12-20 00:00:00.000",
+		"shippedDate": "1996-12-02 00:00:00.000",
+		"shipVia": 3,
+		"freight": 131.7,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 29,
+				"unitPrice": 99,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 38,
+				"unitPrice": 210.8,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 16,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 28,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10361,
+		"customerID": "QUICK",
+		"employeeID": 1,
+		"orderDate": "1996-11-22 00:00:00.000",
+		"requiredDate": "1996-12-20 00:00:00.000",
+		"shippedDate": "1996-12-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 183.17,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 54,
+				"discount": 0.1
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 55,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10353,
+		"customerID": "PICCO",
+		"employeeID": 7,
+		"orderDate": "1996-11-13 00:00:00.000",
+		"requiredDate": "1996-12-11 00:00:00.000",
+		"shippedDate": "1996-11-25 00:00:00.000",
+		"shipVia": 3,
+		"freight": 360.63,
+		"shipName": "Piccolo und mehr",
+		"shipAddress": {
+			"street": "Geislweg 14",
+			"city": "Salzburg",
+			"region": "NULL",
+			"postalCode": 5020,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 12,
+				"discount": 0.2
+			},
+			{
+				"productID": 38,
+				"unitPrice": 210.8,
+				"quantity": 50,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10363,
+		"customerID": "DRACD",
+		"employeeID": 4,
+		"orderDate": "1996-11-26 00:00:00.000",
+		"requiredDate": "1996-12-24 00:00:00.000",
+		"shippedDate": "1996-12-04 00:00:00.000",
+		"shipVia": 3,
+		"freight": 30.54,
+		"shipName": "Drachenblut Delikatessen",
+		"shipAddress": {
+			"street": "Walserweg 21",
+			"city": "Aachen",
+			"region": "NULL",
+			"postalCode": 52066,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10352,
+		"customerID": "FURIB",
+		"employeeID": 3,
+		"orderDate": "1996-11-12 00:00:00.000",
+		"requiredDate": "1996-11-26 00:00:00.000",
+		"shippedDate": "1996-11-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.3,
+		"shipName": "Furia Bacalhau e Frutos do Mar",
+		"shipAddress": {
+			"street": "Jardim das rosas n. 32",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1675,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 20,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10364,
+		"customerID": "EASTC",
+		"employeeID": 1,
+		"orderDate": "1996-11-26 00:00:00.000",
+		"requiredDate": "1997-01-07 00:00:00.000",
+		"shippedDate": "1996-12-04 00:00:00.000",
+		"shipVia": 1,
+		"freight": 71.97,
+		"shipName": "Eastern Connection",
+		"shipAddress": {
+			"street": "35 King George",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "WX3 6FW",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10354,
+		"customerID": "PERIC",
+		"employeeID": 8,
+		"orderDate": "1996-11-14 00:00:00.000",
+		"requiredDate": "1996-12-12 00:00:00.000",
+		"shippedDate": "1996-11-20 00:00:00.000",
+		"shipVia": 3,
+		"freight": 53.8,
+		"shipName": "Pericles Comidas clásicas",
+		"shipAddress": {
+			"street": "Calle Dr. Jorge Cash 321",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 14.4,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 29,
+				"unitPrice": 99,
+				"quantity": 4,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10362,
+		"customerID": "BONAP",
+		"employeeID": 3,
+		"orderDate": "1996-11-25 00:00:00.000",
+		"requiredDate": "1996-12-23 00:00:00.000",
+		"shippedDate": "1996-11-28 00:00:00.000",
+		"shipVia": 1,
+		"freight": 96.04,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 25,
+				"unitPrice": 11.2,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 42.4,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10366,
+		"customerID": "GALED",
+		"employeeID": 8,
+		"orderDate": "1996-11-28 00:00:00.000",
+		"requiredDate": "1997-01-09 00:00:00.000",
+		"shippedDate": "1996-12-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 10.14,
+		"shipName": "Galería del gastronómo",
+		"shipAddress": {
+			"street": "Rambla de Cataluña 23",
+			"city": "Barcelona",
+			"region": "NULL",
+			"postalCode": 8022,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10367,
+		"customerID": "VAFFE",
+		"employeeID": 7,
+		"orderDate": "1996-11-28 00:00:00.000",
+		"requiredDate": "1996-12-26 00:00:00.000",
+		"shippedDate": "1996-12-02 00:00:00.000",
+		"shipVia": 3,
+		"freight": 13.55,
+		"shipName": "Vaffeljernet",
+		"shipAddress": {
+			"street": "Smagsloget 45",
+			"city": "Århus",
+			"region": "NULL",
+			"postalCode": 8200,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 34,
+				"unitPrice": 11.2,
+				"quantity": 36,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 7,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10372,
+		"customerID": "QUEEN",
+		"employeeID": 5,
+		"orderDate": "1996-12-04 00:00:00.000",
+		"requiredDate": "1997-01-01 00:00:00.000",
+		"shippedDate": "1996-12-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 890.78,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 20,
+				"unitPrice": 64.8,
+				"quantity": 12,
+				"discount": 0.25
+			},
+			{
+				"productID": 38,
+				"unitPrice": 210.8,
+				"quantity": 40,
+				"discount": 0.25
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 70,
+				"discount": 0.25
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 42,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10373,
+		"customerID": "HUNGO",
+		"employeeID": 4,
+		"orderDate": "1996-12-05 00:00:00.000",
+		"requiredDate": "1997-01-02 00:00:00.000",
+		"shippedDate": "1996-12-11 00:00:00.000",
+		"shipVia": 3,
+		"freight": 124.12,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 58,
+				"unitPrice": 10.6,
+				"quantity": 80,
+				"discount": 0.2
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 50,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10374,
+		"customerID": "WOLZA",
+		"employeeID": 1,
+		"orderDate": "1996-12-05 00:00:00.000",
+		"requiredDate": "1997-01-02 00:00:00.000",
+		"shippedDate": "1996-12-09 00:00:00.000",
+		"shipVia": 3,
+		"freight": 3.94,
+		"shipName": "Wolski Zajazd",
+		"shipAddress": {
+			"street": "ul. Filtrowa 68",
+			"city": "Warszawa",
+			"region": "NULL",
+			"postalCode": "01-012",
+			"country": "Poland"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 58,
+				"unitPrice": 10.6,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10375,
+		"customerID": "HUNGC",
+		"employeeID": 3,
+		"orderDate": "1996-12-06 00:00:00.000",
+		"requiredDate": "1997-01-03 00:00:00.000",
+		"shippedDate": "1996-12-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 20.12,
+		"shipName": "Hungry Coyote Import Store",
+		"shipAddress": {
+			"street": "City Center Plaza 516 Main St.",
+			"city": "Elgin",
+			"region": "OR",
+			"postalCode": 97827,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 18.6,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10368,
+		"customerID": "ERNSH",
+		"employeeID": 2,
+		"orderDate": "1996-11-29 00:00:00.000",
+		"requiredDate": "1996-12-27 00:00:00.000",
+		"shippedDate": "1996-12-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 101.95,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 5,
+				"discount": 0.1
+			},
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 13,
+				"discount": 0.1
+			},
+			{
+				"productID": 57,
+				"unitPrice": 15.6,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 26.6,
+				"quantity": 35,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10369,
+		"customerID": "SPLIR",
+		"employeeID": 8,
+		"orderDate": "1996-12-02 00:00:00.000",
+		"requiredDate": "1996-12-30 00:00:00.000",
+		"shippedDate": "1996-12-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 195.68,
+		"shipName": "Split Rail Beer & Ale",
+		"shipAddress": {
+			"street": "P.O. Box 555",
+			"city": "Lander",
+			"region": "WY",
+			"postalCode": 82520,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 99,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 18,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10379,
+		"customerID": "QUEDE",
+		"employeeID": 2,
+		"orderDate": "1996-12-11 00:00:00.000",
+		"requiredDate": "1997-01-08 00:00:00.000",
+		"shippedDate": "1996-12-13 00:00:00.000",
+		"shipVia": 1,
+		"freight": 45.03,
+		"shipName": "Que Delícia",
+		"shipAddress": {
+			"street": "Rua da Panificadora 12",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-673",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 8,
+				"discount": 0.1
+			},
+			{
+				"productID": 63,
+				"unitPrice": 35.1,
+				"quantity": 16,
+				"discount": 0.1
+			},
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 20,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10370,
+		"customerID": "CHOPS",
+		"employeeID": 6,
+		"orderDate": "1996-12-03 00:00:00.000",
+		"requiredDate": "1996-12-31 00:00:00.000",
+		"shippedDate": "1996-12-27 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.17,
+		"shipName": "Chop-suey Chinese",
+		"shipAddress": {
+			"street": "Hauptstr. 31",
+			"city": "Bern",
+			"region": "NULL",
+			"postalCode": 3012,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 14.4,
+				"quantity": 15,
+				"discount": 0.15
+			},
+			{
+				"productID": 64,
+				"unitPrice": 26.6,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 74,
+				"unitPrice": 8,
+				"quantity": 20,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10380,
+		"customerID": "HUNGO",
+		"employeeID": 8,
+		"orderDate": "1996-12-12 00:00:00.000",
+		"requiredDate": "1997-01-09 00:00:00.000",
+		"shippedDate": "1997-01-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 35.03,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 20.7,
+				"quantity": 18,
+				"discount": 0.1
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 6,
+				"discount": 0.1
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 20,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10377,
+		"customerID": "SEVES",
+		"employeeID": 1,
+		"orderDate": "1996-12-09 00:00:00.000",
+		"requiredDate": "1997-01-06 00:00:00.000",
+		"shippedDate": "1996-12-13 00:00:00.000",
+		"shipVia": 3,
+		"freight": 22.21,
+		"shipName": "Seven Seas Imports",
+		"shipAddress": {
+			"street": "90 Wadhurst Rd.",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "OX15 4NB",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 20,
+				"discount": 0.15
+			},
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 20,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10384,
+		"customerID": "BERGS",
+		"employeeID": 3,
+		"orderDate": "1996-12-16 00:00:00.000",
+		"requiredDate": "1997-01-13 00:00:00.000",
+		"shippedDate": "1996-12-20 00:00:00.000",
+		"shipVia": 3,
+		"freight": 168.64,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 20,
+				"unitPrice": 64.8,
+				"quantity": 28,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10385,
+		"customerID": "SPLIR",
+		"employeeID": 1,
+		"orderDate": "1996-12-17 00:00:00.000",
+		"requiredDate": "1997-01-14 00:00:00.000",
+		"shippedDate": "1996-12-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 30.96,
+		"shipName": "Split Rail Beer & Ale",
+		"shipAddress": {
+			"street": "P.O. Box 555",
+			"city": "Lander",
+			"region": "WY",
+			"postalCode": 82520,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 24,
+				"quantity": 10,
+				"discount": 0.2
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 8,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10386,
+		"customerID": "FAMIA",
+		"employeeID": 9,
+		"orderDate": "1996-12-18 00:00:00.000",
+		"requiredDate": "1997-01-01 00:00:00.000",
+		"shippedDate": "1996-12-25 00:00:00.000",
+		"shipVia": 3,
+		"freight": 13.99,
+		"shipName": "Familia Arquibaldo",
+		"shipAddress": {
+			"street": "Rua Orós 92",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05442-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 34,
+				"unitPrice": 11.2,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10387,
+		"customerID": "SANTG",
+		"employeeID": 1,
+		"orderDate": "1996-12-18 00:00:00.000",
+		"requiredDate": "1997-01-15 00:00:00.000",
+		"shippedDate": "1996-12-20 00:00:00.000",
+		"shipVia": 2,
+		"freight": 93.63,
+		"shipName": "Santé Gourmet",
+		"shipAddress": {
+			"street": "Erling Skakkes gate 78",
+			"city": "Stavern",
+			"region": "NULL",
+			"postalCode": 4110,
+			"country": "Norway"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10388,
+		"customerID": "SEVES",
+		"employeeID": 2,
+		"orderDate": "1996-12-19 00:00:00.000",
+		"requiredDate": "1997-01-16 00:00:00.000",
+		"shippedDate": "1996-12-20 00:00:00.000",
+		"shipVia": 1,
+		"freight": 34.86,
+		"shipName": "Seven Seas Imports",
+		"shipAddress": {
+			"street": "90 Wadhurst Rd.",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "OX15 4NB",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 45,
+				"unitPrice": 7.6,
+				"quantity": 15,
+				"discount": 0.2
+			},
+			{
+				"productID": 52,
+				"unitPrice": 5.6,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10389,
+		"customerID": "BOTTM",
+		"employeeID": 4,
+		"orderDate": "1996-12-20 00:00:00.000",
+		"requiredDate": "1997-01-17 00:00:00.000",
+		"shippedDate": "1996-12-24 00:00:00.000",
+		"shipVia": 2,
+		"freight": 47.42,
+		"shipName": "Bottom-Dollar Markets",
+		"shipAddress": {
+			"street": "23 Tsawassen Blvd.",
+			"city": "Tsawassen",
+			"region": "BC",
+			"postalCode": "T2F 8M4",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 24.8,
+				"quantity": 16,
+				"discount": 0
+			},
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10382,
+		"customerID": "ERNSH",
+		"employeeID": 4,
+		"orderDate": "1996-12-13 00:00:00.000",
+		"requiredDate": "1997-01-10 00:00:00.000",
+		"shippedDate": "1996-12-16 00:00:00.000",
+		"shipVia": 1,
+		"freight": 94.77,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 99,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 74,
+				"unitPrice": 8,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 5,
+				"unitPrice": 17,
+				"quantity": 32,
+				"discount": 0
+			},
+			{
+				"productID": 18,
+				"unitPrice": 50,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10381,
+		"customerID": "LILAS",
+		"employeeID": 3,
+		"orderDate": "1996-12-12 00:00:00.000",
+		"requiredDate": "1997-01-09 00:00:00.000",
+		"shippedDate": "1996-12-13 00:00:00.000",
+		"shipVia": 3,
+		"freight": 7.99,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 74,
+				"unitPrice": 8,
+				"quantity": 14,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10383,
+		"customerID": "AROUT",
+		"employeeID": 8,
+		"orderDate": "1996-12-16 00:00:00.000",
+		"requiredDate": "1997-01-13 00:00:00.000",
+		"shippedDate": "1996-12-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 34.24,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 4.8,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 50,
+				"unitPrice": 13,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10390,
+		"customerID": "ERNSH",
+		"employeeID": 6,
+		"orderDate": "1996-12-23 00:00:00.000",
+		"requiredDate": "1997-01-20 00:00:00.000",
+		"shippedDate": "1996-12-26 00:00:00.000",
+		"shipVia": 1,
+		"freight": 126.38,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 60,
+				"discount": 0.1
+			},
+			{
+				"productID": 35,
+				"unitPrice": 14.4,
+				"quantity": 40,
+				"discount": 0.1
+			},
+			{
+				"productID": 46,
+				"unitPrice": 9.6,
+				"quantity": 45,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 24,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10396,
+		"customerID": "FRANK",
+		"employeeID": 1,
+		"orderDate": "1996-12-27 00:00:00.000",
+		"requiredDate": "1997-01-10 00:00:00.000",
+		"shippedDate": "1997-01-06 00:00:00.000",
+		"shipVia": 3,
+		"freight": 135.35,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 23,
+				"unitPrice": 7.2,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10397,
+		"customerID": "PRINI",
+		"employeeID": 5,
+		"orderDate": "1996-12-27 00:00:00.000",
+		"requiredDate": "1997-01-24 00:00:00.000",
+		"shippedDate": "1997-01-02 00:00:00.000",
+		"shipVia": 1,
+		"freight": 60.26,
+		"shipName": "Princesa Isabel Vinhos",
+		"shipAddress": {
+			"street": "Estrada da saúde n. 58",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1756,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 10,
+				"discount": 0.15
+			},
+			{
+				"productID": 51,
+				"unitPrice": 42.4,
+				"quantity": 18,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10398,
+		"customerID": "SAVEA",
+		"employeeID": 2,
+		"orderDate": "1996-12-30 00:00:00.000",
+		"requiredDate": "1997-01-27 00:00:00.000",
+		"shippedDate": "1997-01-09 00:00:00.000",
+		"shipVia": 3,
+		"freight": 89.16,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 14.4,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 120,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10399,
+		"customerID": "VAFFE",
+		"employeeID": 8,
+		"orderDate": "1996-12-31 00:00:00.000",
+		"requiredDate": "1997-01-14 00:00:00.000",
+		"shippedDate": "1997-01-08 00:00:00.000",
+		"shipVia": 3,
+		"freight": 27.36,
+		"shipName": "Vaffeljernet",
+		"shipAddress": {
+			"street": "Smagsloget 45",
+			"city": "Århus",
+			"region": "NULL",
+			"postalCode": 8200,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 14,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10400,
+		"customerID": "EASTC",
+		"employeeID": 1,
+		"orderDate": "1997-01-01 00:00:00.000",
+		"requiredDate": "1997-01-29 00:00:00.000",
+		"shippedDate": "1997-01-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 83.93,
+		"shipName": "Eastern Connection",
+		"shipAddress": {
+			"street": "35 King George",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "WX3 6FW",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 14.4,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 29,
+				"unitPrice": 99,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 16,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10401,
+		"customerID": "RATTC",
+		"employeeID": 1,
+		"orderDate": "1997-01-01 00:00:00.000",
+		"requiredDate": "1997-01-29 00:00:00.000",
+		"shippedDate": "1997-01-10 00:00:00.000",
+		"shipVia": 1,
+		"freight": 12.51,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 20.7,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 70,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 60,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10394,
+		"customerID": "HUNGC",
+		"employeeID": 1,
+		"orderDate": "1996-12-25 00:00:00.000",
+		"requiredDate": "1997-01-22 00:00:00.000",
+		"shippedDate": "1997-01-03 00:00:00.000",
+		"shipVia": 3,
+		"freight": 30.34,
+		"shipName": "Hungry Coyote Import Store",
+		"shipAddress": {
+			"street": "City Center Plaza 516 Main St.",
+			"city": "Elgin",
+			"region": "OR",
+			"postalCode": 97827,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 4.8,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10402,
+		"customerID": "ERNSH",
+		"employeeID": 8,
+		"orderDate": "1997-01-02 00:00:00.000",
+		"requiredDate": "1997-02-13 00:00:00.000",
+		"shippedDate": "1997-01-10 00:00:00.000",
+		"shipVia": 2,
+		"freight": 67.88,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 63,
+				"unitPrice": 35.1,
+				"quantity": 65,
+				"discount": 0
+			},
+			{
+				"productID": 23,
+				"unitPrice": 7.2,
+				"quantity": 60,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10393,
+		"customerID": "SAVEA",
+		"employeeID": 1,
+		"orderDate": "1996-12-25 00:00:00.000",
+		"requiredDate": "1997-01-22 00:00:00.000",
+		"shippedDate": "1997-01-03 00:00:00.000",
+		"shipVia": 3,
+		"freight": 126.56,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 70,
+				"discount": 0.25
+			},
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 32,
+				"discount": 0
+			},
+			{
+				"productID": 25,
+				"unitPrice": 11.2,
+				"quantity": 7,
+				"discount": 0.25
+			},
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 25,
+				"discount": 0.25
+			},
+			{
+				"productID": 14,
+				"unitPrice": 18.6,
+				"quantity": 42,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10395,
+		"customerID": "HILAA",
+		"employeeID": 6,
+		"orderDate": "1996-12-26 00:00:00.000",
+		"requiredDate": "1997-01-23 00:00:00.000",
+		"shippedDate": "1997-01-03 00:00:00.000",
+		"shipVia": 1,
+		"freight": 184.41,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 46,
+				"unitPrice": 9.6,
+				"quantity": 28,
+				"discount": 0.1
+			},
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 70,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10406,
+		"customerID": "QUEEN",
+		"employeeID": 7,
+		"orderDate": "1997-01-07 00:00:00.000",
+		"requiredDate": "1997-02-18 00:00:00.000",
+		"shippedDate": "1997-01-13 00:00:00.000",
+		"shipVia": 1,
+		"freight": 108.04,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 14.4,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 42,
+				"discount": 0.1
+			},
+			{
+				"productID": 36,
+				"unitPrice": 15.2,
+				"quantity": 5,
+				"discount": 0.1
+			},
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 2,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10407,
+		"customerID": "OTTIK",
+		"employeeID": 2,
+		"orderDate": "1997-01-07 00:00:00.000",
+		"requiredDate": "1997-02-04 00:00:00.000",
+		"shippedDate": "1997-01-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 91.48,
+		"shipName": "Ottilies Käseladen",
+		"shipAddress": {
+			"street": "Mehrheimerstr. 369",
+			"city": "Köln",
+			"region": "NULL",
+			"postalCode": 50739,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10408,
+		"customerID": "FOLIG",
+		"employeeID": 8,
+		"orderDate": "1997-01-08 00:00:00.000",
+		"requiredDate": "1997-02-05 00:00:00.000",
+		"shippedDate": "1997-01-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 11.26,
+		"shipName": "Folies gourmandes",
+		"shipAddress": {
+			"street": "184 chaussée de Tournai",
+			"city": "Lille",
+			"region": "NULL",
+			"postalCode": 59000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 37,
+				"unitPrice": 20.8,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10409,
+		"customerID": "OCEAN",
+		"employeeID": 3,
+		"orderDate": "1997-01-09 00:00:00.000",
+		"requiredDate": "1997-02-06 00:00:00.000",
+		"shippedDate": "1997-01-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 29.83,
+		"shipName": "Océano Atlántico Ltda.",
+		"shipAddress": {
+			"street": "Ing. Gustavo Moncada 8585 Piso 20-A",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 18.6,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10410,
+		"customerID": "BOTTM",
+		"employeeID": 3,
+		"orderDate": "1997-01-10 00:00:00.000",
+		"requiredDate": "1997-02-07 00:00:00.000",
+		"shippedDate": "1997-01-15 00:00:00.000",
+		"shipVia": 3,
+		"freight": 2.4,
+		"shipName": "Bottom-Dollar Markets",
+		"shipAddress": {
+			"street": "23 Tsawassen Blvd.",
+			"city": "Tsawassen",
+			"region": "BC",
+			"postalCode": "T2F 8M4",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 49,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 16,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10411,
+		"customerID": "BOTTM",
+		"employeeID": 9,
+		"orderDate": "1997-01-10 00:00:00.000",
+		"requiredDate": "1997-02-07 00:00:00.000",
+		"shippedDate": "1997-01-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 23.65,
+		"shipName": "Bottom-Dollar Markets",
+		"shipAddress": {
+			"street": "23 Tsawassen Blvd.",
+			"city": "Tsawassen",
+			"region": "BC",
+			"postalCode": "T2F 8M4",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 25,
+				"discount": 0.2
+			},
+			{
+				"productID": 44,
+				"unitPrice": 15.5,
+				"quantity": 40,
+				"discount": 0.2
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 9,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10404,
+		"customerID": "MAGAA",
+		"employeeID": 2,
+		"orderDate": "1997-01-03 00:00:00.000",
+		"requiredDate": "1997-01-31 00:00:00.000",
+		"shippedDate": "1997-01-08 00:00:00.000",
+		"shipVia": 1,
+		"freight": 155.97,
+		"shipName": "Magazzini Alimentari Riuniti",
+		"shipAddress": {
+			"street": "Via Ludovico il Moro 22",
+			"city": "Bergamo",
+			"region": "NULL",
+			"postalCode": 24100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 30,
+				"discount": 0.05
+			},
+			{
+				"productID": 42,
+				"unitPrice": 11.2,
+				"quantity": 40,
+				"discount": 0.05
+			},
+			{
+				"productID": 49,
+				"unitPrice": 16,
+				"quantity": 30,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10413,
+		"customerID": "LAMAI",
+		"employeeID": 3,
+		"orderDate": "1997-01-14 00:00:00.000",
+		"requiredDate": "1997-02-11 00:00:00.000",
+		"shippedDate": "1997-01-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 95.66,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 14.4,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 14,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10403,
+		"customerID": "ERNSH",
+		"employeeID": 4,
+		"orderDate": "1997-01-03 00:00:00.000",
+		"requiredDate": "1997-01-31 00:00:00.000",
+		"shippedDate": "1997-01-09 00:00:00.000",
+		"shipVia": 3,
+		"freight": 73.79,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 21,
+				"discount": 0.15
+			},
+			{
+				"productID": 48,
+				"unitPrice": 10.2,
+				"quantity": 70,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10414,
+		"customerID": "FAMIA",
+		"employeeID": 2,
+		"orderDate": "1997-01-14 00:00:00.000",
+		"requiredDate": "1997-02-11 00:00:00.000",
+		"shippedDate": "1997-01-17 00:00:00.000",
+		"shipVia": 3,
+		"freight": 21.48,
+		"shipName": "Familia Arquibaldo",
+		"shipAddress": {
+			"street": "Rua Orós 92",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05442-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 18,
+				"discount": 0.05
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10415,
+		"customerID": "HUNGC",
+		"employeeID": 3,
+		"orderDate": "1997-01-15 00:00:00.000",
+		"requiredDate": "1997-02-12 00:00:00.000",
+		"shippedDate": "1997-01-24 00:00:00.000",
+		"shipVia": 1,
+		"freight": 0.2,
+		"shipName": "Hungry Coyote Import Store",
+		"shipAddress": {
+			"street": "City Center Plaza 516 Main St.",
+			"city": "Elgin",
+			"region": "OR",
+			"postalCode": 97827,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10419,
+		"customerID": "RICSU",
+		"employeeID": 4,
+		"orderDate": "1997-01-20 00:00:00.000",
+		"requiredDate": "1997-02-17 00:00:00.000",
+		"shippedDate": "1997-01-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 137.35,
+		"shipName": "Richter Supermarkt",
+		"shipAddress": {
+			"street": "Starenweg 5",
+			"city": "Genève",
+			"region": "NULL",
+			"postalCode": 1204,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 60,
+				"discount": 0.05
+			},
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10420,
+		"customerID": "WELLI",
+		"employeeID": 3,
+		"orderDate": "1997-01-21 00:00:00.000",
+		"requiredDate": "1997-02-18 00:00:00.000",
+		"shippedDate": "1997-01-27 00:00:00.000",
+		"shipVia": 1,
+		"freight": 44.12,
+		"shipName": "Wellington Importadora",
+		"shipAddress": {
+			"street": "Rua do Mercado 12",
+			"city": "Resende",
+			"region": "SP",
+			"postalCode": "08737-363",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 9,
+				"unitPrice": 77.6,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 13,
+				"unitPrice": 4.8,
+				"quantity": 2,
+				"discount": 0.1
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 8,
+				"discount": 0.1
+			},
+			{
+				"productID": 73,
+				"unitPrice": 12,
+				"quantity": 20,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10421,
+		"customerID": "QUEDE",
+		"employeeID": 8,
+		"orderDate": "1997-01-21 00:00:00.000",
+		"requiredDate": "1997-03-04 00:00:00.000",
+		"shippedDate": "1997-01-27 00:00:00.000",
+		"shipVia": 1,
+		"freight": 99.23,
+		"shipName": "Que Delícia",
+		"shipAddress": {
+			"street": "Rua da Panificadora 12",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-673",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 4,
+				"discount": 0.15
+			},
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 10,
+				"discount": 0.15
+			},
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 15,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10423,
+		"customerID": "GOURL",
+		"employeeID": 6,
+		"orderDate": "1997-01-23 00:00:00.000",
+		"requiredDate": "1997-02-06 00:00:00.000",
+		"shippedDate": "1997-02-24 00:00:00.000",
+		"shipVia": 3,
+		"freight": 24.5,
+		"shipName": "Gourmet Lanchonetes",
+		"shipAddress": {
+			"street": "Av. Brasil 442",
+			"city": "Campinas",
+			"region": "SP",
+			"postalCode": "04876-786",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10424,
+		"customerID": "MEREP",
+		"employeeID": 7,
+		"orderDate": "1997-01-23 00:00:00.000",
+		"requiredDate": "1997-02-20 00:00:00.000",
+		"shippedDate": "1997-01-27 00:00:00.000",
+		"shipVia": 2,
+		"freight": 370.61,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 38,
+				"unitPrice": 210.8,
+				"quantity": 49,
+				"discount": 0.2
+			},
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 30,
+				"discount": 0.2
+			},
+			{
+				"productID": 35,
+				"unitPrice": 14.4,
+				"quantity": 60,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10418,
+		"customerID": "QUICK",
+		"employeeID": 4,
+		"orderDate": "1997-01-17 00:00:00.000",
+		"requiredDate": "1997-02-14 00:00:00.000",
+		"shippedDate": "1997-01-24 00:00:00.000",
+		"shipVia": 1,
+		"freight": 17.55,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 47,
+				"unitPrice": 7.6,
+				"quantity": 55,
+				"discount": 0
+			},
+			{
+				"productID": 61,
+				"unitPrice": 22.8,
+				"quantity": 16,
+				"discount": 0
+			},
+			{
+				"productID": 74,
+				"unitPrice": 8,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10417,
+		"customerID": "SIMOB",
+		"employeeID": 4,
+		"orderDate": "1997-01-16 00:00:00.000",
+		"requiredDate": "1997-02-13 00:00:00.000",
+		"shippedDate": "1997-01-28 00:00:00.000",
+		"shipVia": 3,
+		"freight": 70.29,
+		"shipName": "Simons bistro",
+		"shipAddress": {
+			"street": "Vinbæltet 34",
+			"city": "Kobenhavn",
+			"region": "NULL",
+			"postalCode": 1734,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 38,
+				"unitPrice": 210.8,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 46,
+				"unitPrice": 9.6,
+				"quantity": 2,
+				"discount": 0.25
+			},
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 36,
+				"discount": 0.25
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10416,
+		"customerID": "WARTH",
+		"employeeID": 8,
+		"orderDate": "1997-01-16 00:00:00.000",
+		"requiredDate": "1997-02-13 00:00:00.000",
+		"shippedDate": "1997-01-27 00:00:00.000",
+		"shipVia": 3,
+		"freight": 22.72,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 57,
+				"unitPrice": 15.6,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10425,
+		"customerID": "LAMAI",
+		"employeeID": 6,
+		"orderDate": "1997-01-24 00:00:00.000",
+		"requiredDate": "1997-02-21 00:00:00.000",
+		"shippedDate": "1997-02-14 00:00:00.000",
+		"shipVia": 2,
+		"freight": 7.93,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 10,
+				"discount": 0.25
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 20,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10429,
+		"customerID": "HUNGO",
+		"employeeID": 3,
+		"orderDate": "1997-01-29 00:00:00.000",
+		"requiredDate": "1997-03-12 00:00:00.000",
+		"shippedDate": "1997-02-07 00:00:00.000",
+		"shipVia": 2,
+		"freight": 56.63,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 50,
+				"unitPrice": 13,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 63,
+				"unitPrice": 35.1,
+				"quantity": 35,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10430,
+		"customerID": "ERNSH",
+		"employeeID": 4,
+		"orderDate": "1997-01-30 00:00:00.000",
+		"requiredDate": "1997-02-13 00:00:00.000",
+		"shippedDate": "1997-02-03 00:00:00.000",
+		"shipVia": 1,
+		"freight": 458.78,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 45,
+				"discount": 0.2
+			},
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 70,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10431,
+		"customerID": "BOTTM",
+		"employeeID": 4,
+		"orderDate": "1997-01-30 00:00:00.000",
+		"requiredDate": "1997-02-13 00:00:00.000",
+		"shippedDate": "1997-02-07 00:00:00.000",
+		"shipVia": 2,
+		"freight": 44.17,
+		"shipName": "Bottom-Dollar Markets",
+		"shipAddress": {
+			"street": "23 Tsawassen Blvd.",
+			"city": "Tsawassen",
+			"region": "BC",
+			"postalCode": "T2F 8M4",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 50,
+				"discount": 0.25
+			},
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 50,
+				"discount": 0.25
+			},
+			{
+				"productID": 47,
+				"unitPrice": 7.6,
+				"quantity": 30,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10432,
+		"customerID": "SPLIR",
+		"employeeID": 3,
+		"orderDate": "1997-01-31 00:00:00.000",
+		"requiredDate": "1997-02-14 00:00:00.000",
+		"shippedDate": "1997-02-07 00:00:00.000",
+		"shipVia": 2,
+		"freight": 4.34,
+		"shipName": "Split Rail Beer & Ale",
+		"shipAddress": {
+			"street": "P.O. Box 555",
+			"city": "Lander",
+			"region": "WY",
+			"postalCode": 82520,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10434,
+		"customerID": "FOLKO",
+		"employeeID": 3,
+		"orderDate": "1997-02-03 00:00:00.000",
+		"requiredDate": "1997-03-03 00:00:00.000",
+		"shippedDate": "1997-02-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 17.92,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 18,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10436,
+		"customerID": "BLONP",
+		"employeeID": 3,
+		"orderDate": "1997-02-05 00:00:00.000",
+		"requiredDate": "1997-03-05 00:00:00.000",
+		"shippedDate": "1997-02-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 156.66,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 24,
+				"discount": 0.1
+			},
+			{
+				"productID": 46,
+				"unitPrice": 9.6,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 40,
+				"discount": 0.1
+			},
+			{
+				"productID": 64,
+				"unitPrice": 26.6,
+				"quantity": 30,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10435,
+		"customerID": "CONSH",
+		"employeeID": 8,
+		"orderDate": "1997-02-04 00:00:00.000",
+		"requiredDate": "1997-03-18 00:00:00.000",
+		"shippedDate": "1997-02-07 00:00:00.000",
+		"shipVia": 2,
+		"freight": 9.21,
+		"shipName": "Consolidated Holdings",
+		"shipAddress": {
+			"street": "Berkeley Gardens 12  Brewery",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "WX1 6LT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 22,
+				"unitPrice": 16.8,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10426,
+		"customerID": "GALED",
+		"employeeID": 4,
+		"orderDate": "1997-01-27 00:00:00.000",
+		"requiredDate": "1997-02-24 00:00:00.000",
+		"shippedDate": "1997-02-06 00:00:00.000",
+		"shipVia": 1,
+		"freight": 18.69,
+		"shipName": "Galería del gastronómo",
+		"shipAddress": {
+			"street": "Rambla de Cataluña 23",
+			"city": "Barcelona",
+			"region": "NULL",
+			"postalCode": 8022,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 26.6,
+				"quantity": 7,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10442,
+		"customerID": "ERNSH",
+		"employeeID": 3,
+		"orderDate": "1997-02-11 00:00:00.000",
+		"requiredDate": "1997-03-11 00:00:00.000",
+		"shippedDate": "1997-02-18 00:00:00.000",
+		"shipVia": 2,
+		"freight": 47.94,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 80,
+				"discount": 0
+			},
+			{
+				"productID": 66,
+				"unitPrice": 13.6,
+				"quantity": 60,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10443,
+		"customerID": "REGGC",
+		"employeeID": 8,
+		"orderDate": "1997-02-12 00:00:00.000",
+		"requiredDate": "1997-03-12 00:00:00.000",
+		"shippedDate": "1997-02-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 13.95,
+		"shipName": "Reggiani Caseifici",
+		"shipAddress": {
+			"street": "Strada Provinciale 124",
+			"city": "Reggio Emilia",
+			"region": "NULL",
+			"postalCode": 42100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 6,
+				"discount": 0.2
+			},
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10444,
+		"customerID": "BERGS",
+		"employeeID": 3,
+		"orderDate": "1997-02-12 00:00:00.000",
+		"requiredDate": "1997-03-12 00:00:00.000",
+		"shippedDate": "1997-02-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 3.5,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 35,
+				"unitPrice": 14.4,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10445,
+		"customerID": "BERGS",
+		"employeeID": 3,
+		"orderDate": "1997-02-13 00:00:00.000",
+		"requiredDate": "1997-03-13 00:00:00.000",
+		"shippedDate": "1997-02-20 00:00:00.000",
+		"shipVia": 1,
+		"freight": 9.3,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10446,
+		"customerID": "TOMSP",
+		"employeeID": 6,
+		"orderDate": "1997-02-14 00:00:00.000",
+		"requiredDate": "1997-03-14 00:00:00.000",
+		"shippedDate": "1997-02-19 00:00:00.000",
+		"shipVia": 1,
+		"freight": 14.68,
+		"shipName": "Toms Spezialitäten",
+		"shipAddress": {
+			"street": "Luisenstr. 48",
+			"city": "Münster",
+			"region": "NULL",
+			"postalCode": 44087,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 3,
+				"discount": 0.1
+			},
+			{
+				"productID": 52,
+				"unitPrice": 5.6,
+				"quantity": 15,
+				"discount": 0.1
+			},
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 12,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10440,
+		"customerID": "SAVEA",
+		"employeeID": 4,
+		"orderDate": "1997-02-10 00:00:00.000",
+		"requiredDate": "1997-03-10 00:00:00.000",
+		"shippedDate": "1997-02-28 00:00:00.000",
+		"shipVia": 2,
+		"freight": 86.53,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 45,
+				"discount": 0.15
+			},
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 49,
+				"discount": 0.15
+			},
+			{
+				"productID": 29,
+				"unitPrice": 99,
+				"quantity": 24,
+				"discount": 0.15
+			},
+			{
+				"productID": 61,
+				"unitPrice": 22.8,
+				"quantity": 90,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10439,
+		"customerID": "MEREP",
+		"employeeID": 6,
+		"orderDate": "1997-02-07 00:00:00.000",
+		"requiredDate": "1997-03-07 00:00:00.000",
+		"shippedDate": "1997-02-10 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.07,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 12,
+				"unitPrice": 30.4,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 16,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 26.6,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 74,
+				"unitPrice": 8,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10448,
+		"customerID": "RANCH",
+		"employeeID": 4,
+		"orderDate": "1997-02-17 00:00:00.000",
+		"requiredDate": "1997-03-17 00:00:00.000",
+		"shippedDate": "1997-02-24 00:00:00.000",
+		"shipVia": 2,
+		"freight": 38.82,
+		"shipName": "Rancho grande",
+		"shipAddress": {
+			"street": "Av. del Libertador 900",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10438,
+		"customerID": "TOMSP",
+		"employeeID": 3,
+		"orderDate": "1997-02-06 00:00:00.000",
+		"requiredDate": "1997-03-06 00:00:00.000",
+		"shippedDate": "1997-02-14 00:00:00.000",
+		"shipVia": 2,
+		"freight": 8.24,
+		"shipName": "Toms Spezialitäten",
+		"shipAddress": {
+			"street": "Luisenstr. 48",
+			"city": "Münster",
+			"region": "NULL",
+			"postalCode": 44087,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 15,
+				"discount": 0.2
+			},
+			{
+				"productID": 34,
+				"unitPrice": 11.2,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 57,
+				"unitPrice": 15.6,
+				"quantity": 15,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10447,
+		"customerID": "RICAR",
+		"employeeID": 4,
+		"orderDate": "1997-02-14 00:00:00.000",
+		"requiredDate": "1997-03-14 00:00:00.000",
+		"shippedDate": "1997-03-07 00:00:00.000",
+		"shipVia": 2,
+		"freight": 68.66,
+		"shipName": "Ricardo Adocicados",
+		"shipAddress": {
+			"street": "Av. Copacabana 267",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-890",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 2,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10452,
+		"customerID": "SAVEA",
+		"employeeID": 8,
+		"orderDate": "1997-02-20 00:00:00.000",
+		"requiredDate": "1997-03-20 00:00:00.000",
+		"shippedDate": "1997-02-26 00:00:00.000",
+		"shipVia": 1,
+		"freight": 140.26,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 44,
+				"unitPrice": 15.5,
+				"quantity": 100,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10453,
+		"customerID": "AROUT",
+		"employeeID": 1,
+		"orderDate": "1997-02-21 00:00:00.000",
+		"requiredDate": "1997-03-21 00:00:00.000",
+		"shippedDate": "1997-02-26 00:00:00.000",
+		"shipVia": 2,
+		"freight": 25.36,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 48,
+				"unitPrice": 10.2,
+				"quantity": 15,
+				"discount": 0.1
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 25,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10454,
+		"customerID": "LAMAI",
+		"employeeID": 4,
+		"orderDate": "1997-02-21 00:00:00.000",
+		"requiredDate": "1997-03-21 00:00:00.000",
+		"shippedDate": "1997-02-25 00:00:00.000",
+		"shipVia": 3,
+		"freight": 2.74,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 46,
+				"unitPrice": 9.6,
+				"quantity": 10,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10455,
+		"customerID": "WARTH",
+		"employeeID": 8,
+		"orderDate": "1997-02-24 00:00:00.000",
+		"requiredDate": "1997-04-07 00:00:00.000",
+		"shippedDate": "1997-03-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 180.45,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 61,
+				"unitPrice": 22.8,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10456,
+		"customerID": "KOENE",
+		"employeeID": 8,
+		"orderDate": "1997-02-25 00:00:00.000",
+		"requiredDate": "1997-04-08 00:00:00.000",
+		"shippedDate": "1997-02-28 00:00:00.000",
+		"shipVia": 2,
+		"freight": 8.12,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 40,
+				"discount": 0.15
+			},
+			{
+				"productID": 49,
+				"unitPrice": 16,
+				"quantity": 21,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10450,
+		"customerID": "VICTE",
+		"employeeID": 8,
+		"orderDate": "1997-02-19 00:00:00.000",
+		"requiredDate": "1997-03-19 00:00:00.000",
+		"shippedDate": "1997-03-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 7.23,
+		"shipName": "Victuailles en stock",
+		"shipAddress": {
+			"street": "2 rue du Commerce",
+			"city": "Lyon",
+			"region": "NULL",
+			"postalCode": 69004,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 24.8,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 6,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10451,
+		"customerID": "QUICK",
+		"employeeID": 4,
+		"orderDate": "1997-02-19 00:00:00.000",
+		"requiredDate": "1997-03-05 00:00:00.000",
+		"shippedDate": "1997-03-12 00:00:00.000",
+		"shipVia": 3,
+		"freight": 189.09,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 120,
+				"discount": 0.1
+			},
+			{
+				"productID": 64,
+				"unitPrice": 26.6,
+				"quantity": 35,
+				"discount": 0.1
+			},
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 28,
+				"discount": 0.1
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 55,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10449,
+		"customerID": "BLONP",
+		"employeeID": 3,
+		"orderDate": "1997-02-18 00:00:00.000",
+		"requiredDate": "1997-03-18 00:00:00.000",
+		"shippedDate": "1997-02-27 00:00:00.000",
+		"shipVia": 2,
+		"freight": 53.3,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 24.8,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 5.6,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10461,
+		"customerID": "LILAS",
+		"employeeID": 1,
+		"orderDate": "1997-02-28 00:00:00.000",
+		"requiredDate": "1997-03-28 00:00:00.000",
+		"shippedDate": "1997-03-05 00:00:00.000",
+		"shipVia": 3,
+		"freight": 148.61,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 40,
+				"discount": 0.25
+			},
+			{
+				"productID": 30,
+				"unitPrice": 20.7,
+				"quantity": 28,
+				"discount": 0.25
+			},
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 60,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10462,
+		"customerID": "CONSH",
+		"employeeID": 2,
+		"orderDate": "1997-03-03 00:00:00.000",
+		"requiredDate": "1997-03-31 00:00:00.000",
+		"shippedDate": "1997-03-18 00:00:00.000",
+		"shipVia": 1,
+		"freight": 6.17,
+		"shipName": "Consolidated Holdings",
+		"shipAddress": {
+			"street": "Berkeley Gardens 12  Brewery",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "WX1 6LT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 4.8,
+				"quantity": 1,
+				"discount": 0
+			},
+			{
+				"productID": 23,
+				"unitPrice": 7.2,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10463,
+		"customerID": "SUPRD",
+		"employeeID": 5,
+		"orderDate": "1997-03-04 00:00:00.000",
+		"requiredDate": "1997-04-01 00:00:00.000",
+		"shippedDate": "1997-03-06 00:00:00.000",
+		"shipVia": 3,
+		"freight": 14.78,
+		"shipName": "Suprêmes délices",
+		"shipAddress": {
+			"street": "Boulevard Tirou 255",
+			"city": "Charleroi",
+			"region": "NULL",
+			"postalCode": "B-6000",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 42,
+				"unitPrice": 11.2,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10464,
+		"customerID": "FURIB",
+		"employeeID": 4,
+		"orderDate": "1997-03-04 00:00:00.000",
+		"requiredDate": "1997-04-01 00:00:00.000",
+		"shippedDate": "1997-03-14 00:00:00.000",
+		"shipVia": 2,
+		"freight": 89,
+		"shipName": "Furia Bacalhau e Frutos do Mar",
+		"shipAddress": {
+			"street": "Jardim das rosas n. 32",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1675,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 17.6,
+				"quantity": 16,
+				"discount": 0.2
+			},
+			{
+				"productID": 43,
+				"unitPrice": 36.8,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 30,
+				"discount": 0.2
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10465,
+		"customerID": "VAFFE",
+		"employeeID": 1,
+		"orderDate": "1997-03-05 00:00:00.000",
+		"requiredDate": "1997-04-02 00:00:00.000",
+		"shippedDate": "1997-03-14 00:00:00.000",
+		"shipVia": 3,
+		"freight": 145.04,
+		"shipName": "Vaffeljernet",
+		"shipAddress": {
+			"street": "Smagsloget 45",
+			"city": "Århus",
+			"region": "NULL",
+			"postalCode": 8200,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 29,
+				"unitPrice": 99,
+				"quantity": 18,
+				"discount": 0.1
+			},
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 45,
+				"unitPrice": 7.6,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 50,
+				"unitPrice": 13,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10466,
+		"customerID": "COMMI",
+		"employeeID": 4,
+		"orderDate": "1997-03-06 00:00:00.000",
+		"requiredDate": "1997-04-03 00:00:00.000",
+		"shippedDate": "1997-03-13 00:00:00.000",
+		"shipVia": 1,
+		"freight": 11.93,
+		"shipName": "Comércio Mineiro",
+		"shipAddress": {
+			"street": "Av. dos Lusíadas 23",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05432-043",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 46,
+				"unitPrice": 9.6,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10460,
+		"customerID": "FOLKO",
+		"employeeID": 8,
+		"orderDate": "1997-02-28 00:00:00.000",
+		"requiredDate": "1997-03-28 00:00:00.000",
+		"shippedDate": "1997-03-03 00:00:00.000",
+		"shipVia": 1,
+		"freight": 16.27,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 21,
+				"discount": 0.25
+			},
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 4,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10459,
+		"customerID": "VICTE",
+		"employeeID": 4,
+		"orderDate": "1997-02-27 00:00:00.000",
+		"requiredDate": "1997-03-27 00:00:00.000",
+		"shippedDate": "1997-02-28 00:00:00.000",
+		"shipVia": 2,
+		"freight": 25.09,
+		"shipName": "Victuailles en stock",
+		"shipAddress": {
+			"street": "2 rue du Commerce",
+			"city": "Lyon",
+			"region": "NULL",
+			"postalCode": 69004,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 24,
+				"quantity": 16,
+				"discount": 0.05
+			},
+			{
+				"productID": 46,
+				"unitPrice": 9.6,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10468,
+		"customerID": "KOENE",
+		"employeeID": 3,
+		"orderDate": "1997-03-07 00:00:00.000",
+		"requiredDate": "1997-04-04 00:00:00.000",
+		"shippedDate": "1997-03-12 00:00:00.000",
+		"shipVia": 3,
+		"freight": 44.12,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 20.7,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 36.8,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10469,
+		"customerID": "WHITC",
+		"employeeID": 1,
+		"orderDate": "1997-03-10 00:00:00.000",
+		"requiredDate": "1997-04-07 00:00:00.000",
+		"shippedDate": "1997-03-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 60.18,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 40,
+				"discount": 0.15
+			},
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 35,
+				"discount": 0.15
+			},
+			{
+				"productID": 44,
+				"unitPrice": 15.5,
+				"quantity": 2,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10458,
+		"customerID": "SUPRD",
+		"employeeID": 7,
+		"orderDate": "1997-02-26 00:00:00.000",
+		"requiredDate": "1997-03-26 00:00:00.000",
+		"shippedDate": "1997-03-04 00:00:00.000",
+		"shipVia": 3,
+		"freight": 147.06,
+		"shipName": "Suprêmes délices",
+		"shipAddress": {
+			"street": "Boulevard Tirou 255",
+			"city": "Charleroi",
+			"region": "NULL",
+			"postalCode": "B-6000",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 36.8,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10470,
+		"customerID": "BONAP",
+		"employeeID": 4,
+		"orderDate": "1997-03-11 00:00:00.000",
+		"requiredDate": "1997-04-08 00:00:00.000",
+		"shippedDate": "1997-03-14 00:00:00.000",
+		"shipVia": 2,
+		"freight": 64.56,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 50,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 23,
+				"unitPrice": 7.2,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 26.6,
+				"quantity": 8,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10467,
+		"customerID": "MAGAA",
+		"employeeID": 8,
+		"orderDate": "1997-03-06 00:00:00.000",
+		"requiredDate": "1997-04-03 00:00:00.000",
+		"shippedDate": "1997-03-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 4.93,
+		"shipName": "Magazzini Alimentari Riuniti",
+		"shipAddress": {
+			"street": "Via Ludovico il Moro 22",
+			"city": "Bergamo",
+			"region": "NULL",
+			"postalCode": 24100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 28,
+				"discount": 0
+			},
+			{
+				"productID": 25,
+				"unitPrice": 11.2,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10474,
+		"customerID": "PERIC",
+		"employeeID": 5,
+		"orderDate": "1997-03-13 00:00:00.000",
+		"requiredDate": "1997-04-10 00:00:00.000",
+		"shippedDate": "1997-03-21 00:00:00.000",
+		"shipVia": 2,
+		"freight": 83.49,
+		"shipName": "Pericles Comidas clásicas",
+		"shipAddress": {
+			"street": "Calle Dr. Jorge Cash 321",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 14,
+				"unitPrice": 18.6,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10475,
+		"customerID": "SUPRD",
+		"employeeID": 9,
+		"orderDate": "1997-03-14 00:00:00.000",
+		"requiredDate": "1997-04-11 00:00:00.000",
+		"shippedDate": "1997-04-04 00:00:00.000",
+		"shipVia": 1,
+		"freight": 68.52,
+		"shipName": "Suprêmes délices",
+		"shipAddress": {
+			"street": "Boulevard Tirou 255",
+			"city": "Charleroi",
+			"region": "NULL",
+			"postalCode": "B-6000",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 35,
+				"discount": 0.15
+			},
+			{
+				"productID": 66,
+				"unitPrice": 13.6,
+				"quantity": 60,
+				"discount": 0.15
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 42,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10476,
+		"customerID": "HILAA",
+		"employeeID": 8,
+		"orderDate": "1997-03-17 00:00:00.000",
+		"requiredDate": "1997-04-14 00:00:00.000",
+		"shippedDate": "1997-03-24 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.41,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 2,
+				"discount": 0.05
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10477,
+		"customerID": "PRINI",
+		"employeeID": 5,
+		"orderDate": "1997-03-17 00:00:00.000",
+		"requiredDate": "1997-04-14 00:00:00.000",
+		"shippedDate": "1997-03-25 00:00:00.000",
+		"shipVia": 2,
+		"freight": 13.02,
+		"shipName": "Princesa Isabel Vinhos",
+		"shipAddress": {
+			"street": "Estrada da saúde n. 58",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1756,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 14.4,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 21,
+				"discount": 0.25
+			},
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 20,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10479,
+		"customerID": "RATTC",
+		"employeeID": 3,
+		"orderDate": "1997-03-19 00:00:00.000",
+		"requiredDate": "1997-04-16 00:00:00.000",
+		"shippedDate": "1997-03-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 708.95,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 38,
+				"unitPrice": 210.8,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 28,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 26.6,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10471,
+		"customerID": "BSBEV",
+		"employeeID": 2,
+		"orderDate": "1997-03-11 00:00:00.000",
+		"requiredDate": "1997-04-08 00:00:00.000",
+		"shippedDate": "1997-03-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 45.59,
+		"shipName": "B's Beverages",
+		"shipAddress": {
+			"street": "Fauntleroy Circus",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "EC2 5NT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 24,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10472,
+		"customerID": "SEVES",
+		"employeeID": 8,
+		"orderDate": "1997-03-12 00:00:00.000",
+		"requiredDate": "1997-04-09 00:00:00.000",
+		"shippedDate": "1997-03-19 00:00:00.000",
+		"shipVia": 1,
+		"freight": 4.2,
+		"shipName": "Seven Seas Imports",
+		"shipAddress": {
+			"street": "90 Wadhurst Rd.",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "OX15 4NB",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 80,
+				"discount": 0.05
+			},
+			{
+				"productID": 51,
+				"unitPrice": 42.4,
+				"quantity": 18,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10481,
+		"customerID": "RICAR",
+		"employeeID": 8,
+		"orderDate": "1997-03-20 00:00:00.000",
+		"requiredDate": "1997-04-17 00:00:00.000",
+		"shippedDate": "1997-03-25 00:00:00.000",
+		"shipVia": 2,
+		"freight": 64.33,
+		"shipName": "Ricardo Adocicados",
+		"shipAddress": {
+			"street": "Av. Copacabana 267",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-890",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 49,
+				"unitPrice": 16,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10473,
+		"customerID": "ISLAT",
+		"employeeID": 1,
+		"orderDate": "1997-03-13 00:00:00.000",
+		"requiredDate": "1997-03-27 00:00:00.000",
+		"shippedDate": "1997-03-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 16.37,
+		"shipName": "Island Trading",
+		"shipAddress": {
+			"street": "Garden House Crowther Way",
+			"city": "Cowes",
+			"region": "Isle of Wight",
+			"postalCode": "PO31 7PJ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10484,
+		"customerID": "BSBEV",
+		"employeeID": 3,
+		"orderDate": "1997-03-24 00:00:00.000",
+		"requiredDate": "1997-04-21 00:00:00.000",
+		"shippedDate": "1997-04-01 00:00:00.000",
+		"shipVia": 3,
+		"freight": 6.88,
+		"shipName": "B's Beverages",
+		"shipAddress": {
+			"street": "Fauntleroy Circus",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "EC2 5NT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 42.4,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10485,
+		"customerID": "LINOD",
+		"employeeID": 4,
+		"orderDate": "1997-03-25 00:00:00.000",
+		"requiredDate": "1997-04-08 00:00:00.000",
+		"shippedDate": "1997-03-31 00:00:00.000",
+		"shipVia": 2,
+		"freight": 64.45,
+		"shipName": "LINO-Delicateses",
+		"shipAddress": {
+			"street": "Ave. 5 de Mayo Porlamar",
+			"city": "I. de Margarita",
+			"region": "Nueva Esparta",
+			"postalCode": 4980,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 3,
+				"unitPrice": 8,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 60,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10486,
+		"customerID": "HILAA",
+		"employeeID": 1,
+		"orderDate": "1997-03-26 00:00:00.000",
+		"requiredDate": "1997-04-23 00:00:00.000",
+		"shippedDate": "1997-04-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 30.53,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 42.4,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 74,
+				"unitPrice": 8,
+				"quantity": 16,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10487,
+		"customerID": "QUEEN",
+		"employeeID": 2,
+		"orderDate": "1997-03-26 00:00:00.000",
+		"requiredDate": "1997-04-23 00:00:00.000",
+		"shippedDate": "1997-03-28 00:00:00.000",
+		"shipVia": 2,
+		"freight": 71.07,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 24,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10488,
+		"customerID": "FRANK",
+		"employeeID": 8,
+		"orderDate": "1997-03-27 00:00:00.000",
+		"requiredDate": "1997-04-24 00:00:00.000",
+		"shippedDate": "1997-04-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 4.93,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 73,
+				"unitPrice": 12,
+				"quantity": 20,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10489,
+		"customerID": "PICCO",
+		"employeeID": 6,
+		"orderDate": "1997-03-28 00:00:00.000",
+		"requiredDate": "1997-04-25 00:00:00.000",
+		"shippedDate": "1997-04-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 5.29,
+		"shipName": "Piccolo und mehr",
+		"shipAddress": {
+			"street": "Geislweg 14",
+			"city": "Salzburg",
+			"region": "NULL",
+			"postalCode": 5020,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 15,
+				"discount": 0.25
+			},
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 18,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10483,
+		"customerID": "WHITC",
+		"employeeID": 7,
+		"orderDate": "1997-03-24 00:00:00.000",
+		"requiredDate": "1997-04-21 00:00:00.000",
+		"shippedDate": "1997-04-25 00:00:00.000",
+		"shipVia": 2,
+		"freight": 15.28,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 34,
+				"unitPrice": 11.2,
+				"quantity": 35,
+				"discount": 0.05
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 30,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10491,
+		"customerID": "FURIB",
+		"employeeID": 8,
+		"orderDate": "1997-03-31 00:00:00.000",
+		"requiredDate": "1997-04-28 00:00:00.000",
+		"shippedDate": "1997-04-08 00:00:00.000",
+		"shipVia": 3,
+		"freight": 16.96,
+		"shipName": "Furia Bacalhau e Frutos do Mar",
+		"shipAddress": {
+			"street": "Jardim das rosas n. 32",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1675,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 44,
+				"unitPrice": 15.5,
+				"quantity": 15,
+				"discount": 0.15
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 7,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10480,
+		"customerID": "FOLIG",
+		"employeeID": 6,
+		"orderDate": "1997-03-20 00:00:00.000",
+		"requiredDate": "1997-04-17 00:00:00.000",
+		"shippedDate": "1997-03-24 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.35,
+		"shipName": "Folies gourmandes",
+		"shipAddress": {
+			"street": "184 chaussée de Tournai",
+			"city": "Lille",
+			"region": "NULL",
+			"postalCode": 59000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 47,
+				"unitPrice": 7.6,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10490,
+		"customerID": "HILAA",
+		"employeeID": 7,
+		"orderDate": "1997-03-31 00:00:00.000",
+		"requiredDate": "1997-04-28 00:00:00.000",
+		"shippedDate": "1997-04-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 210.19,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 36,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10492,
+		"customerID": "BOTTM",
+		"employeeID": 3,
+		"orderDate": "1997-04-01 00:00:00.000",
+		"requiredDate": "1997-04-29 00:00:00.000",
+		"shippedDate": "1997-04-11 00:00:00.000",
+		"shipVia": 1,
+		"freight": 62.89,
+		"shipName": "Bottom-Dollar Markets",
+		"shipAddress": {
+			"street": "23 Tsawassen Blvd.",
+			"city": "Tsawassen",
+			"region": "BC",
+			"postalCode": "T2F 8M4",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 25,
+				"unitPrice": 11.2,
+				"quantity": 60,
+				"discount": 0.05
+			},
+			{
+				"productID": 42,
+				"unitPrice": 11.2,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10493,
+		"customerID": "LAMAI",
+		"employeeID": 4,
+		"orderDate": "1997-04-02 00:00:00.000",
+		"requiredDate": "1997-04-30 00:00:00.000",
+		"shippedDate": "1997-04-10 00:00:00.000",
+		"shipVia": 3,
+		"freight": 10.64,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 15,
+				"discount": 0.1
+			},
+			{
+				"productID": 66,
+				"unitPrice": 13.6,
+				"quantity": 10,
+				"discount": 0.1
+			},
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 10,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10498,
+		"customerID": "HILAA",
+		"employeeID": 8,
+		"orderDate": "1997-04-07 00:00:00.000",
+		"requiredDate": "1997-05-05 00:00:00.000",
+		"shippedDate": "1997-04-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 29.75,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10499,
+		"customerID": "LILAS",
+		"employeeID": 4,
+		"orderDate": "1997-04-08 00:00:00.000",
+		"requiredDate": "1997-05-06 00:00:00.000",
+		"shippedDate": "1997-04-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 102.02,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 20,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10500,
+		"customerID": "LAMAI",
+		"employeeID": 6,
+		"orderDate": "1997-04-09 00:00:00.000",
+		"requiredDate": "1997-05-07 00:00:00.000",
+		"shippedDate": "1997-04-17 00:00:00.000",
+		"shipVia": 1,
+		"freight": 42.68,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 15,
+				"unitPrice": 15.5,
+				"quantity": 12,
+				"discount": 0.05
+			},
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 8,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10502,
+		"customerID": "PERIC",
+		"employeeID": 2,
+		"orderDate": "1997-04-10 00:00:00.000",
+		"requiredDate": "1997-05-08 00:00:00.000",
+		"shippedDate": "1997-04-29 00:00:00.000",
+		"shipVia": 1,
+		"freight": 69.32,
+		"shipName": "Pericles Comidas clásicas",
+		"shipAddress": {
+			"street": "Calle Dr. Jorge Cash 321",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 45,
+				"unitPrice": 9.5,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 67,
+				"unitPrice": 14,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10503,
+		"customerID": "HUNGO",
+		"employeeID": 6,
+		"orderDate": "1997-04-11 00:00:00.000",
+		"requiredDate": "1997-05-09 00:00:00.000",
+		"shippedDate": "1997-04-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 16.74,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 70,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10497,
+		"customerID": "LEHMS",
+		"employeeID": 7,
+		"orderDate": "1997-04-04 00:00:00.000",
+		"requiredDate": "1997-05-02 00:00:00.000",
+		"shippedDate": "1997-04-07 00:00:00.000",
+		"shipVia": 1,
+		"freight": 36.21,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10495,
+		"customerID": "LAUGB",
+		"employeeID": 3,
+		"orderDate": "1997-04-03 00:00:00.000",
+		"requiredDate": "1997-05-01 00:00:00.000",
+		"shippedDate": "1997-04-11 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.65,
+		"shipName": "Laughing Bacchus Wine Cellars",
+		"shipAddress": {
+			"street": "2319 Elm St.",
+			"city": "Vancouver",
+			"region": "BC",
+			"postalCode": "V3F 2K1",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 23,
+				"unitPrice": 7.2,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10504,
+		"customerID": "WHITC",
+		"employeeID": 4,
+		"orderDate": "1997-04-11 00:00:00.000",
+		"requiredDate": "1997-05-09 00:00:00.000",
+		"shippedDate": "1997-04-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 59.13,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10508,
+		"customerID": "OTTIK",
+		"employeeID": 1,
+		"orderDate": "1997-04-16 00:00:00.000",
+		"requiredDate": "1997-05-14 00:00:00.000",
+		"shippedDate": "1997-05-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 4.99,
+		"shipName": "Ottilies Käseladen",
+		"shipAddress": {
+			"street": "Mehrheimerstr. 369",
+			"city": "Köln",
+			"region": "NULL",
+			"postalCode": 50739,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10510,
+		"customerID": "SAVEA",
+		"employeeID": 6,
+		"orderDate": "1997-04-18 00:00:00.000",
+		"requiredDate": "1997-05-16 00:00:00.000",
+		"shippedDate": "1997-04-28 00:00:00.000",
+		"shipVia": 3,
+		"freight": 367.63,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 36,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 36,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10511,
+		"customerID": "BONAP",
+		"employeeID": 4,
+		"orderDate": "1997-04-18 00:00:00.000",
+		"requiredDate": "1997-05-16 00:00:00.000",
+		"shippedDate": "1997-04-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 350.64,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 50,
+				"discount": 0.15
+			},
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 50,
+				"discount": 0.15
+			},
+			{
+				"productID": 8,
+				"unitPrice": 40,
+				"quantity": 10,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10512,
+		"customerID": "FAMIA",
+		"employeeID": 7,
+		"orderDate": "1997-04-21 00:00:00.000",
+		"requiredDate": "1997-05-19 00:00:00.000",
+		"shippedDate": "1997-04-24 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.53,
+		"shipName": "Familia Arquibaldo",
+		"shipAddress": {
+			"street": "Rua Orós 92",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05442-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 10,
+				"discount": 0.15
+			},
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 9,
+				"discount": 0.15
+			},
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 6,
+				"discount": 0.15
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 12,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10513,
+		"customerID": "WANDK",
+		"employeeID": 7,
+		"orderDate": "1997-04-22 00:00:00.000",
+		"requiredDate": "1997-06-03 00:00:00.000",
+		"shippedDate": "1997-04-28 00:00:00.000",
+		"shipVia": 1,
+		"freight": 105.65,
+		"shipName": "Die Wandernde Kuh",
+		"shipAddress": {
+			"street": "Adenauerallee 900",
+			"city": "Stuttgart",
+			"region": "NULL",
+			"postalCode": 70563,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 40,
+				"discount": 0.2
+			},
+			{
+				"productID": 32,
+				"unitPrice": 32,
+				"quantity": 50,
+				"discount": 0.2
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 15,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10506,
+		"customerID": "KOENE",
+		"employeeID": 9,
+		"orderDate": "1997-04-15 00:00:00.000",
+		"requiredDate": "1997-05-13 00:00:00.000",
+		"shippedDate": "1997-05-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 21.19,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 18,
+				"discount": 0.1
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 14,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10515,
+		"customerID": "QUICK",
+		"employeeID": 2,
+		"orderDate": "1997-04-23 00:00:00.000",
+		"requiredDate": "1997-05-07 00:00:00.000",
+		"shippedDate": "1997-05-23 00:00:00.000",
+		"shipVia": 1,
+		"freight": 204.47,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 9,
+				"unitPrice": 97,
+				"quantity": 16,
+				"discount": 0.15
+			},
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 27,
+				"unitPrice": 43.9,
+				"quantity": 120,
+				"discount": 0
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 16,
+				"discount": 0.15
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 84,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10516,
+		"customerID": "HUNGO",
+		"employeeID": 2,
+		"orderDate": "1997-04-24 00:00:00.000",
+		"requiredDate": "1997-05-22 00:00:00.000",
+		"shippedDate": "1997-05-01 00:00:00.000",
+		"shipVia": 3,
+		"freight": 62.78,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 25,
+				"discount": 0.1
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 80,
+				"discount": 0.1
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10507,
+		"customerID": "ANTON",
+		"employeeID": 7,
+		"orderDate": "1997-04-15 00:00:00.000",
+		"requiredDate": "1997-05-13 00:00:00.000",
+		"shippedDate": "1997-04-22 00:00:00.000",
+		"shipVia": 1,
+		"freight": 47.45,
+		"shipName": "Antonio Moreno Taquería",
+		"shipAddress": {
+			"street": "Mataderos  2312",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5023,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 15,
+				"discount": 0.15
+			},
+			{
+				"productID": 48,
+				"unitPrice": 12.75,
+				"quantity": 15,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10514,
+		"customerID": "ERNSH",
+		"employeeID": 3,
+		"orderDate": "1997-04-22 00:00:00.000",
+		"requiredDate": "1997-05-20 00:00:00.000",
+		"shippedDate": "1997-05-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 789.95,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 39,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 20,
+				"unitPrice": 81,
+				"quantity": 39,
+				"discount": 0
+			},
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 70,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10517,
+		"customerID": "NORTS",
+		"employeeID": 3,
+		"orderDate": "1997-04-24 00:00:00.000",
+		"requiredDate": "1997-05-22 00:00:00.000",
+		"shippedDate": "1997-04-29 00:00:00.000",
+		"shipVia": 3,
+		"freight": 32.07,
+		"shipName": "North/South",
+		"shipAddress": {
+			"street": "South House 300 Queensbridge",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "SW7 1RZ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10518,
+		"customerID": "TORTU",
+		"employeeID": 4,
+		"orderDate": "1997-04-25 00:00:00.000",
+		"requiredDate": "1997-05-09 00:00:00.000",
+		"shippedDate": "1997-05-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 218.15,
+		"shipName": "Tortuga Restaurante",
+		"shipAddress": {
+			"street": "Avda. Azteca 123",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10519,
+		"customerID": "CHOPS",
+		"employeeID": 6,
+		"orderDate": "1997-04-28 00:00:00.000",
+		"requiredDate": "1997-05-26 00:00:00.000",
+		"shippedDate": "1997-05-01 00:00:00.000",
+		"shipVia": 3,
+		"freight": 91.76,
+		"shipName": "Chop-suey Chinese",
+		"shipAddress": {
+			"street": "Hauptstr. 31",
+			"city": "Bern",
+			"region": "NULL",
+			"postalCode": 3012,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 16,
+				"discount": 0.05
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 10,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10520,
+		"customerID": "SANTG",
+		"employeeID": 7,
+		"orderDate": "1997-04-29 00:00:00.000",
+		"requiredDate": "1997-05-27 00:00:00.000",
+		"shippedDate": "1997-05-01 00:00:00.000",
+		"shipVia": 1,
+		"freight": 13.37,
+		"shipName": "Santé Gourmet",
+		"shipAddress": {
+			"street": "Erling Skakkes gate 78",
+			"city": "Stavern",
+			"region": "NULL",
+			"postalCode": 4110,
+			"country": "Norway"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10521,
+		"customerID": "CACTU",
+		"employeeID": 8,
+		"orderDate": "1997-04-29 00:00:00.000",
+		"requiredDate": "1997-05-27 00:00:00.000",
+		"shippedDate": "1997-05-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 17.22,
+		"shipName": "Cactus Comidas para llevar",
+		"shipAddress": {
+			"street": "Cerrito 333",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10522,
+		"customerID": "LEHMS",
+		"employeeID": 4,
+		"orderDate": "1997-04-30 00:00:00.000",
+		"requiredDate": "1997-05-28 00:00:00.000",
+		"shippedDate": "1997-05-06 00:00:00.000",
+		"shipVia": 1,
+		"freight": 45.33,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 25,
+				"discount": 0.2
+			},
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 40,
+				"discount": 0.2
+			},
+			{
+				"productID": 8,
+				"unitPrice": 40,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10523,
+		"customerID": "SEVES",
+		"employeeID": 7,
+		"orderDate": "1997-05-01 00:00:00.000",
+		"requiredDate": "1997-05-29 00:00:00.000",
+		"shippedDate": "1997-05-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 77.63,
+		"shipName": "Seven Seas Imports",
+		"shipAddress": {
+			"street": "90 Wadhurst Rd.",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "OX15 4NB",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 25,
+				"discount": 0.1
+			},
+			{
+				"productID": 20,
+				"unitPrice": 81,
+				"quantity": 15,
+				"discount": 0.1
+			},
+			{
+				"productID": 37,
+				"unitPrice": 26,
+				"quantity": 18,
+				"discount": 0.1
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 6,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10524,
+		"customerID": "BERGS",
+		"employeeID": 1,
+		"orderDate": "1997-05-01 00:00:00.000",
+		"requiredDate": "1997-05-29 00:00:00.000",
+		"shippedDate": "1997-05-07 00:00:00.000",
+		"shipVia": 2,
+		"freight": 244.79,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10525,
+		"customerID": "BONAP",
+		"employeeID": 1,
+		"orderDate": "1997-05-02 00:00:00.000",
+		"requiredDate": "1997-05-30 00:00:00.000",
+		"shippedDate": "1997-05-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 11.06,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 15,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10526,
+		"customerID": "WARTH",
+		"employeeID": 4,
+		"orderDate": "1997-05-05 00:00:00.000",
+		"requiredDate": "1997-06-02 00:00:00.000",
+		"shippedDate": "1997-05-15 00:00:00.000",
+		"shipVia": 2,
+		"freight": 58.59,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 8,
+				"discount": 0.15
+			},
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 30,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10527,
+		"customerID": "QUICK",
+		"employeeID": 7,
+		"orderDate": "1997-05-05 00:00:00.000",
+		"requiredDate": "1997-06-02 00:00:00.000",
+		"shippedDate": "1997-05-07 00:00:00.000",
+		"shipVia": 1,
+		"freight": 41.9,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 50,
+				"discount": 0.1
+			},
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 30,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10528,
+		"customerID": "GREAL",
+		"employeeID": 6,
+		"orderDate": "1997-05-06 00:00:00.000",
+		"requiredDate": "1997-05-20 00:00:00.000",
+		"shippedDate": "1997-05-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.35,
+		"shipName": "Great Lakes Food Market",
+		"shipAddress": {
+			"street": "2732 Baker Blvd.",
+			"city": "Eugene",
+			"region": "OR",
+			"postalCode": 97403,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 8,
+				"discount": 0.2
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10529,
+		"customerID": "MAISD",
+		"employeeID": 5,
+		"orderDate": "1997-05-07 00:00:00.000",
+		"requiredDate": "1997-06-04 00:00:00.000",
+		"shippedDate": "1997-05-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 66.69,
+		"shipName": "Maison Dewey",
+		"shipAddress": {
+			"street": "Rue Joseph-Bens 532",
+			"city": "Bruxelles",
+			"region": "NULL",
+			"postalCode": "B-1180",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10530,
+		"customerID": "PICCO",
+		"employeeID": 3,
+		"orderDate": "1997-05-08 00:00:00.000",
+		"requiredDate": "1997-06-05 00:00:00.000",
+		"shippedDate": "1997-05-12 00:00:00.000",
+		"shipVia": 2,
+		"freight": 339.22,
+		"shipName": "Piccolo und mehr",
+		"shipAddress": {
+			"street": "Geislweg 14",
+			"city": "Salzburg",
+			"region": "NULL",
+			"postalCode": 5020,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10531,
+		"customerID": "OCEAN",
+		"employeeID": 7,
+		"orderDate": "1997-05-08 00:00:00.000",
+		"requiredDate": "1997-06-05 00:00:00.000",
+		"shippedDate": "1997-05-19 00:00:00.000",
+		"shipVia": 1,
+		"freight": 8.12,
+		"shipName": "Océano Atlántico Ltda.",
+		"shipAddress": {
+			"street": "Ing. Gustavo Moncada 8585 Piso 20-A",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 2,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10532,
+		"customerID": "EASTC",
+		"employeeID": 7,
+		"orderDate": "1997-05-09 00:00:00.000",
+		"requiredDate": "1997-06-06 00:00:00.000",
+		"shippedDate": "1997-05-12 00:00:00.000",
+		"shipVia": 3,
+		"freight": 74.46,
+		"shipName": "Eastern Connection",
+		"shipAddress": {
+			"street": "35 King George",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "WX3 6FW",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 66,
+				"unitPrice": 17,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10536,
+		"customerID": "LEHMS",
+		"employeeID": 3,
+		"orderDate": "1997-05-14 00:00:00.000",
+		"requiredDate": "1997-06-11 00:00:00.000",
+		"shippedDate": "1997-06-06 00:00:00.000",
+		"shipVia": 2,
+		"freight": 58.88,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 12,
+				"unitPrice": 38,
+				"quantity": 15,
+				"discount": 0.25
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 35,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10537,
+		"customerID": "RICSU",
+		"employeeID": 1,
+		"orderDate": "1997-05-14 00:00:00.000",
+		"requiredDate": "1997-05-28 00:00:00.000",
+		"shippedDate": "1997-05-19 00:00:00.000",
+		"shipVia": 1,
+		"freight": 78.85,
+		"shipName": "Richter Supermarkt",
+		"shipAddress": {
+			"street": "Starenweg 5",
+			"city": "Genève",
+			"region": "NULL",
+			"postalCode": 1204,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 73,
+				"unitPrice": 15,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10538,
+		"customerID": "BSBEV",
+		"employeeID": 9,
+		"orderDate": "1997-05-15 00:00:00.000",
+		"requiredDate": "1997-06-12 00:00:00.000",
+		"shippedDate": "1997-05-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.87,
+		"shipName": "B's Beverages",
+		"shipAddress": {
+			"street": "Fauntleroy Circus",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "EC2 5NT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 7,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 1,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10539,
+		"customerID": "BSBEV",
+		"employeeID": 6,
+		"orderDate": "1997-05-16 00:00:00.000",
+		"requiredDate": "1997-06-13 00:00:00.000",
+		"shippedDate": "1997-05-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 12.36,
+		"shipName": "B's Beverages",
+		"shipAddress": {
+			"street": "Fauntleroy Circus",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "EC2 5NT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 20,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10540,
+		"customerID": "QUICK",
+		"employeeID": 3,
+		"orderDate": "1997-05-19 00:00:00.000",
+		"requiredDate": "1997-06-16 00:00:00.000",
+		"shippedDate": "1997-06-13 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1007.64,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 3,
+				"unitPrice": 10,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10541,
+		"customerID": "HANAR",
+		"employeeID": 2,
+		"orderDate": "1997-05-19 00:00:00.000",
+		"requiredDate": "1997-06-16 00:00:00.000",
+		"shippedDate": "1997-05-29 00:00:00.000",
+		"shipVia": 1,
+		"freight": 68.65,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 35,
+				"discount": 0.1
+			},
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 4,
+				"discount": 0.1
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 36,
+				"discount": 0.1
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 9,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10534,
+		"customerID": "LEHMS",
+		"employeeID": 8,
+		"orderDate": "1997-05-12 00:00:00.000",
+		"requiredDate": "1997-06-09 00:00:00.000",
+		"shippedDate": "1997-05-14 00:00:00.000",
+		"shipVia": 2,
+		"freight": 27.94,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 10,
+				"discount": 0.2
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 10,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10533,
+		"customerID": "FOLKO",
+		"employeeID": 8,
+		"orderDate": "1997-05-12 00:00:00.000",
+		"requiredDate": "1997-06-09 00:00:00.000",
+		"shippedDate": "1997-05-22 00:00:00.000",
+		"shipVia": 1,
+		"freight": 188.04,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 50,
+				"discount": 0.05
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 73,
+				"unitPrice": 15,
+				"quantity": 24,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10535,
+		"customerID": "ANTON",
+		"employeeID": 4,
+		"orderDate": "1997-05-13 00:00:00.000",
+		"requiredDate": "1997-06-10 00:00:00.000",
+		"shippedDate": "1997-05-21 00:00:00.000",
+		"shipVia": 1,
+		"freight": 15.64,
+		"shipName": "Antonio Moreno Taquería",
+		"shipAddress": {
+			"street": "Mataderos  2312",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5023,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 50,
+				"discount": 0.1
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 10,
+				"discount": 0.1
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 5,
+				"discount": 0.1
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 15,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10543,
+		"customerID": "LILAS",
+		"employeeID": 8,
+		"orderDate": "1997-05-21 00:00:00.000",
+		"requiredDate": "1997-06-18 00:00:00.000",
+		"shippedDate": "1997-05-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 48.17,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 12,
+				"unitPrice": 38,
+				"quantity": 30,
+				"discount": 0.15
+			},
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 70,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10542,
+		"customerID": "KOENE",
+		"employeeID": 1,
+		"orderDate": "1997-05-20 00:00:00.000",
+		"requiredDate": "1997-06-17 00:00:00.000",
+		"shippedDate": "1997-05-26 00:00:00.000",
+		"shipVia": 3,
+		"freight": 10.95,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 15,
+				"discount": 0.05
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 24,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10546,
+		"customerID": "VICTE",
+		"employeeID": 1,
+		"orderDate": "1997-05-23 00:00:00.000",
+		"requiredDate": "1997-06-20 00:00:00.000",
+		"shippedDate": "1997-05-27 00:00:00.000",
+		"shipVia": 3,
+		"freight": 194.72,
+		"shipName": "Victuailles en stock",
+		"shipAddress": {
+			"street": "2 rue du Commerce",
+			"city": "Lyon",
+			"region": "NULL",
+			"postalCode": 69004,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10547,
+		"customerID": "SEVES",
+		"employeeID": 3,
+		"orderDate": "1997-05-23 00:00:00.000",
+		"requiredDate": "1997-06-20 00:00:00.000",
+		"shippedDate": "1997-06-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 178.43,
+		"shipName": "Seven Seas Imports",
+		"shipAddress": {
+			"street": "90 Wadhurst Rd.",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "OX15 4NB",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 32,
+				"unitPrice": 32,
+				"quantity": 24,
+				"discount": 0.15
+			},
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 60,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10548,
+		"customerID": "TOMSP",
+		"employeeID": 3,
+		"orderDate": "1997-05-26 00:00:00.000",
+		"requiredDate": "1997-06-23 00:00:00.000",
+		"shippedDate": "1997-06-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.43,
+		"shipName": "Toms Spezialitäten",
+		"shipAddress": {
+			"street": "Luisenstr. 48",
+			"city": "Münster",
+			"region": "NULL",
+			"postalCode": 44087,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 34,
+				"unitPrice": 14,
+				"quantity": 10,
+				"discount": 0.25
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 14,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10550,
+		"customerID": "GODOS",
+		"employeeID": 7,
+		"orderDate": "1997-05-28 00:00:00.000",
+		"requiredDate": "1997-06-25 00:00:00.000",
+		"shippedDate": "1997-06-06 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.32,
+		"shipName": "Godos Cocina Típica",
+		"shipAddress": {
+			"street": "C/ Romero 33",
+			"city": "Sevilla",
+			"region": "NULL",
+			"postalCode": 41101,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 8,
+				"discount": 0.1
+			},
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 6,
+				"discount": 0.1
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 10,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10544,
+		"customerID": "LONEP",
+		"employeeID": 4,
+		"orderDate": "1997-05-21 00:00:00.000",
+		"requiredDate": "1997-06-18 00:00:00.000",
+		"shippedDate": "1997-05-30 00:00:00.000",
+		"shipVia": 1,
+		"freight": 24.91,
+		"shipName": "Lonesome Pine Restaurant",
+		"shipAddress": {
+			"street": "89 Chiaroscuro Rd.",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97219,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 7,
+				"discount": 0
+			},
+			{
+				"productID": 67,
+				"unitPrice": 14,
+				"quantity": 7,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10553,
+		"customerID": "WARTH",
+		"employeeID": 2,
+		"orderDate": "1997-05-30 00:00:00.000",
+		"requiredDate": "1997-06-27 00:00:00.000",
+		"shippedDate": "1997-06-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 149.49,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10554,
+		"customerID": "OTTIK",
+		"employeeID": 4,
+		"orderDate": "1997-05-30 00:00:00.000",
+		"requiredDate": "1997-06-27 00:00:00.000",
+		"shippedDate": "1997-06-05 00:00:00.000",
+		"shipVia": 3,
+		"freight": 120.97,
+		"shipName": "Ottilies Käseladen",
+		"shipAddress": {
+			"street": "Mehrheimerstr. 369",
+			"city": "Köln",
+			"region": "NULL",
+			"postalCode": 50739,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 30,
+				"discount": 0.05
+			},
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 10,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10555,
+		"customerID": "SAVEA",
+		"employeeID": 6,
+		"orderDate": "1997-06-02 00:00:00.000",
+		"requiredDate": "1997-06-30 00:00:00.000",
+		"shippedDate": "1997-06-04 00:00:00.000",
+		"shipVia": 3,
+		"freight": 252.49,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 30,
+				"discount": 0.2
+			},
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 35,
+				"discount": 0.2
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 18,
+				"discount": 0.2
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 40,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10557,
+		"customerID": "LEHMS",
+		"employeeID": 9,
+		"orderDate": "1997-06-03 00:00:00.000",
+		"requiredDate": "1997-06-17 00:00:00.000",
+		"shippedDate": "1997-06-06 00:00:00.000",
+		"shipVia": 2,
+		"freight": 96.72,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10558,
+		"customerID": "AROUT",
+		"employeeID": 1,
+		"orderDate": "1997-06-04 00:00:00.000",
+		"requiredDate": "1997-07-02 00:00:00.000",
+		"shippedDate": "1997-06-10 00:00:00.000",
+		"shipVia": 2,
+		"freight": 72.97,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 73,
+				"unitPrice": 15,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10551,
+		"customerID": "FURIB",
+		"employeeID": 4,
+		"orderDate": "1997-05-28 00:00:00.000",
+		"requiredDate": "1997-07-09 00:00:00.000",
+		"shippedDate": "1997-06-06 00:00:00.000",
+		"shipVia": 3,
+		"freight": 72.95,
+		"shipName": "Furia Bacalhau e Frutos do Mar",
+		"shipAddress": {
+			"street": "Jardim das rosas n. 32",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1675,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 40,
+				"discount": 0.15
+			},
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0.15
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10549,
+		"customerID": "QUICK",
+		"employeeID": 5,
+		"orderDate": "1997-05-27 00:00:00.000",
+		"requiredDate": "1997-06-10 00:00:00.000",
+		"shippedDate": "1997-05-30 00:00:00.000",
+		"shipVia": 1,
+		"freight": 171.24,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 55,
+				"discount": 0.15
+			},
+			{
+				"productID": 45,
+				"unitPrice": 9.5,
+				"quantity": 100,
+				"discount": 0.15
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 48,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10552,
+		"customerID": "HILAA",
+		"employeeID": 2,
+		"orderDate": "1997-05-29 00:00:00.000",
+		"requiredDate": "1997-06-26 00:00:00.000",
+		"shippedDate": "1997-06-05 00:00:00.000",
+		"shipVia": 1,
+		"freight": 83.22,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10562,
+		"customerID": "REGGC",
+		"employeeID": 1,
+		"orderDate": "1997-06-09 00:00:00.000",
+		"requiredDate": "1997-07-07 00:00:00.000",
+		"shippedDate": "1997-06-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 22.95,
+		"shipName": "Reggiani Caseifici",
+		"shipAddress": {
+			"street": "Strada Provinciale 124",
+			"city": "Reggio Emilia",
+			"region": "NULL",
+			"postalCode": 42100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 10,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10563,
+		"customerID": "RICAR",
+		"employeeID": 2,
+		"orderDate": "1997-06-10 00:00:00.000",
+		"requiredDate": "1997-07-22 00:00:00.000",
+		"shippedDate": "1997-06-24 00:00:00.000",
+		"shipVia": 2,
+		"freight": 60.43,
+		"shipName": "Ricardo Adocicados",
+		"shipAddress": {
+			"street": "Av. Copacabana 267",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-890",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 70,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10564,
+		"customerID": "RATTC",
+		"employeeID": 4,
+		"orderDate": "1997-06-10 00:00:00.000",
+		"requiredDate": "1997-07-08 00:00:00.000",
+		"shippedDate": "1997-06-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 13.75,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 16,
+				"discount": 0.05
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 6,
+				"discount": 0.05
+			},
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 25,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10565,
+		"customerID": "MEREP",
+		"employeeID": 8,
+		"orderDate": "1997-06-11 00:00:00.000",
+		"requiredDate": "1997-07-09 00:00:00.000",
+		"shippedDate": "1997-06-18 00:00:00.000",
+		"shipVia": 2,
+		"freight": 7.15,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 25,
+				"discount": 0.1
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 18,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10566,
+		"customerID": "BLONP",
+		"employeeID": 9,
+		"orderDate": "1997-06-12 00:00:00.000",
+		"requiredDate": "1997-07-10 00:00:00.000",
+		"shippedDate": "1997-06-18 00:00:00.000",
+		"shipVia": 1,
+		"freight": 88.4,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 35,
+				"discount": 0.15
+			},
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 18,
+				"discount": 0.15
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10567,
+		"customerID": "HUNGO",
+		"employeeID": 1,
+		"orderDate": "1997-06-12 00:00:00.000",
+		"requiredDate": "1997-07-10 00:00:00.000",
+		"shippedDate": "1997-06-17 00:00:00.000",
+		"shipVia": 1,
+		"freight": 33.97,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 60,
+				"discount": 0.2
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 40,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10559,
+		"customerID": "BLONP",
+		"employeeID": 6,
+		"orderDate": "1997-06-05 00:00:00.000",
+		"requiredDate": "1997-07-03 00:00:00.000",
+		"shippedDate": "1997-06-13 00:00:00.000",
+		"shipVia": 1,
+		"freight": 8.05,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 12,
+				"discount": 0.05
+			},
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 18,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10569,
+		"customerID": "RATTC",
+		"employeeID": 5,
+		"orderDate": "1997-06-16 00:00:00.000",
+		"requiredDate": "1997-07-14 00:00:00.000",
+		"shippedDate": "1997-07-11 00:00:00.000",
+		"shipVia": 1,
+		"freight": 58.98,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 35,
+				"discount": 0.2
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10560,
+		"customerID": "FRANK",
+		"employeeID": 8,
+		"orderDate": "1997-06-06 00:00:00.000",
+		"requiredDate": "1997-07-04 00:00:00.000",
+		"shippedDate": "1997-06-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 36.65,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 15,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10570,
+		"customerID": "MEREP",
+		"employeeID": 3,
+		"orderDate": "1997-06-17 00:00:00.000",
+		"requiredDate": "1997-07-15 00:00:00.000",
+		"shippedDate": "1997-06-19 00:00:00.000",
+		"shipVia": 3,
+		"freight": 188.99,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 15,
+				"discount": 0.05
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 60,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10571,
+		"customerID": "ERNSH",
+		"employeeID": 8,
+		"orderDate": "1997-06-17 00:00:00.000",
+		"requiredDate": "1997-07-29 00:00:00.000",
+		"shippedDate": "1997-07-04 00:00:00.000",
+		"shipVia": 3,
+		"freight": 26.06,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 11,
+				"discount": 0.15
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 28,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10572,
+		"customerID": "BERGS",
+		"employeeID": 3,
+		"orderDate": "1997-06-18 00:00:00.000",
+		"requiredDate": "1997-07-16 00:00:00.000",
+		"shippedDate": "1997-06-25 00:00:00.000",
+		"shipVia": 2,
+		"freight": 116.43,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 12,
+				"discount": 0.1
+			},
+			{
+				"productID": 32,
+				"unitPrice": 32,
+				"quantity": 10,
+				"discount": 0.1
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 15,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10561,
+		"customerID": "FOLKO",
+		"employeeID": 2,
+		"orderDate": "1997-06-06 00:00:00.000",
+		"requiredDate": "1997-07-04 00:00:00.000",
+		"shippedDate": "1997-06-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 242.21,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10573,
+		"customerID": "ANTON",
+		"employeeID": 7,
+		"orderDate": "1997-06-19 00:00:00.000",
+		"requiredDate": "1997-07-17 00:00:00.000",
+		"shippedDate": "1997-06-20 00:00:00.000",
+		"shipVia": 3,
+		"freight": 84.84,
+		"shipName": "Antonio Moreno Taquería",
+		"shipAddress": {
+			"street": "Mataderos  2312",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5023,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 34,
+				"unitPrice": 14,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10574,
+		"customerID": "TRAIH",
+		"employeeID": 4,
+		"orderDate": "1997-06-19 00:00:00.000",
+		"requiredDate": "1997-07-17 00:00:00.000",
+		"shippedDate": "1997-06-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 37.6,
+		"shipName": "Trail's Head Gourmet Provisioners",
+		"shipAddress": {
+			"street": "722 DaVinci Blvd.",
+			"city": "Kirkland",
+			"region": "WA",
+			"postalCode": 98034,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10578,
+		"customerID": "BSBEV",
+		"employeeID": 4,
+		"orderDate": "1997-06-24 00:00:00.000",
+		"requiredDate": "1997-07-22 00:00:00.000",
+		"shippedDate": "1997-07-25 00:00:00.000",
+		"shipVia": 3,
+		"freight": 29.6,
+		"shipName": "B's Beverages",
+		"shipAddress": {
+			"street": "Fauntleroy Circus",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "EC2 5NT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10579,
+		"customerID": "LETSS",
+		"employeeID": 1,
+		"orderDate": "1997-06-25 00:00:00.000",
+		"requiredDate": "1997-07-23 00:00:00.000",
+		"shippedDate": "1997-07-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 13.73,
+		"shipName": "Let's Stop N Shop",
+		"shipAddress": {
+			"street": "87 Polk St. Suite 5",
+			"city": "San Francisco",
+			"region": "CA",
+			"postalCode": 94117,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 15,
+				"unitPrice": 15.5,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10580,
+		"customerID": "OTTIK",
+		"employeeID": 4,
+		"orderDate": "1997-06-26 00:00:00.000",
+		"requiredDate": "1997-07-24 00:00:00.000",
+		"shippedDate": "1997-07-01 00:00:00.000",
+		"shipVia": 3,
+		"freight": 75.89,
+		"shipName": "Ottilies Käseladen",
+		"shipAddress": {
+			"street": "Mehrheimerstr. 369",
+			"city": "Köln",
+			"region": "NULL",
+			"postalCode": 50739,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 15,
+				"discount": 0.05
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 9,
+				"discount": 0.05
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 30,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10582,
+		"customerID": "BLAUS",
+		"employeeID": 3,
+		"orderDate": "1997-06-27 00:00:00.000",
+		"requiredDate": "1997-07-25 00:00:00.000",
+		"shippedDate": "1997-07-14 00:00:00.000",
+		"shipVia": 2,
+		"freight": 27.71,
+		"shipName": "Blauer See Delikatessen",
+		"shipAddress": {
+			"street": "Forsterstr. 57",
+			"city": "Mannheim",
+			"region": "NULL",
+			"postalCode": 68306,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 14,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10583,
+		"customerID": "WARTH",
+		"employeeID": 2,
+		"orderDate": "1997-06-30 00:00:00.000",
+		"requiredDate": "1997-07-28 00:00:00.000",
+		"shippedDate": "1997-07-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 7.28,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 24,
+				"discount": 0.15
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 10,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10577,
+		"customerID": "TRAIH",
+		"employeeID": 9,
+		"orderDate": "1997-06-23 00:00:00.000",
+		"requiredDate": "1997-08-04 00:00:00.000",
+		"shippedDate": "1997-06-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 25.41,
+		"shipName": "Trail's Head Gourmet Provisioners",
+		"shipAddress": {
+			"street": "722 DaVinci Blvd.",
+			"city": "Kirkland",
+			"region": "WA",
+			"postalCode": 98034,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10576,
+		"customerID": "TORTU",
+		"employeeID": 3,
+		"orderDate": "1997-06-23 00:00:00.000",
+		"requiredDate": "1997-07-07 00:00:00.000",
+		"shippedDate": "1997-06-30 00:00:00.000",
+		"shipVia": 3,
+		"freight": 18.56,
+		"shipName": "Tortuga Restaurante",
+		"shipAddress": {
+			"street": "Avda. Azteca 123",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10587,
+		"customerID": "QUEDE",
+		"employeeID": 1,
+		"orderDate": "1997-07-02 00:00:00.000",
+		"requiredDate": "1997-07-30 00:00:00.000",
+		"shippedDate": "1997-07-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 62.52,
+		"shipName": "Que Delícia",
+		"shipAddress": {
+			"street": "Rua da Panificadora 12",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-673",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10588,
+		"customerID": "QUICK",
+		"employeeID": 2,
+		"orderDate": "1997-07-03 00:00:00.000",
+		"requiredDate": "1997-07-31 00:00:00.000",
+		"shippedDate": "1997-07-10 00:00:00.000",
+		"shipVia": 3,
+		"freight": 194.67,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 40,
+				"discount": 0.2
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 100,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10590,
+		"customerID": "MEREP",
+		"employeeID": 4,
+		"orderDate": "1997-07-07 00:00:00.000",
+		"requiredDate": "1997-08-04 00:00:00.000",
+		"shippedDate": "1997-07-14 00:00:00.000",
+		"shipVia": 3,
+		"freight": 44.77,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 60,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10575,
+		"customerID": "MORGK",
+		"employeeID": 5,
+		"orderDate": "1997-06-20 00:00:00.000",
+		"requiredDate": "1997-07-04 00:00:00.000",
+		"shippedDate": "1997-06-30 00:00:00.000",
+		"shipVia": 1,
+		"freight": 127.34,
+		"shipName": "Morgenstern Gesundkost",
+		"shipAddress": {
+			"street": "Heerstr. 22",
+			"city": "Leipzig",
+			"region": "NULL",
+			"postalCode": 4179,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 63,
+				"unitPrice": 43.9,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10591,
+		"customerID": "VAFFE",
+		"employeeID": 1,
+		"orderDate": "1997-07-07 00:00:00.000",
+		"requiredDate": "1997-07-21 00:00:00.000",
+		"shippedDate": "1997-07-16 00:00:00.000",
+		"shipVia": 1,
+		"freight": 55.92,
+		"shipName": "Vaffeljernet",
+		"shipAddress": {
+			"street": "Smagsloget 45",
+			"city": "Århus",
+			"region": "NULL",
+			"postalCode": 8200,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 3,
+				"unitPrice": 10,
+				"quantity": 14,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10595,
+		"customerID": "ERNSH",
+		"employeeID": 2,
+		"orderDate": "1997-07-10 00:00:00.000",
+		"requiredDate": "1997-08-07 00:00:00.000",
+		"shippedDate": "1997-07-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 96.78,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 30,
+				"discount": 0.25
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 65,
+				"discount": 0.25
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 120,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10596,
+		"customerID": "WHITC",
+		"employeeID": 8,
+		"orderDate": "1997-07-11 00:00:00.000",
+		"requiredDate": "1997-08-08 00:00:00.000",
+		"shippedDate": "1997-08-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 16.34,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 5,
+				"discount": 0.2
+			},
+			{
+				"productID": 63,
+				"unitPrice": 43.9,
+				"quantity": 24,
+				"discount": 0.2
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 30,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10597,
+		"customerID": "PICCO",
+		"employeeID": 7,
+		"orderDate": "1997-07-11 00:00:00.000",
+		"requiredDate": "1997-08-08 00:00:00.000",
+		"shippedDate": "1997-07-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 35.12,
+		"shipName": "Piccolo und mehr",
+		"shipAddress": {
+			"street": "Geislweg 14",
+			"city": "Salzburg",
+			"region": "NULL",
+			"postalCode": 5020,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 35,
+				"discount": 0.2
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 12,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10598,
+		"customerID": "RATTC",
+		"employeeID": 1,
+		"orderDate": "1997-07-14 00:00:00.000",
+		"requiredDate": "1997-08-11 00:00:00.000",
+		"shippedDate": "1997-07-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 44.42,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 27,
+				"unitPrice": 43.9,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10600,
+		"customerID": "HUNGC",
+		"employeeID": 4,
+		"orderDate": "1997-07-16 00:00:00.000",
+		"requiredDate": "1997-08-13 00:00:00.000",
+		"shippedDate": "1997-07-21 00:00:00.000",
+		"shipVia": 1,
+		"freight": 45.13,
+		"shipName": "Hungry Coyote Import Store",
+		"shipAddress": {
+			"street": "City Center Plaza 516 Main St.",
+			"city": "Elgin",
+			"region": "OR",
+			"postalCode": 97827,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 73,
+				"unitPrice": 15,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10601,
+		"customerID": "HILAA",
+		"employeeID": 7,
+		"orderDate": "1997-07-16 00:00:00.000",
+		"requiredDate": "1997-08-27 00:00:00.000",
+		"shippedDate": "1997-07-22 00:00:00.000",
+		"shipVia": 1,
+		"freight": 58.3,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10603,
+		"customerID": "SAVEA",
+		"employeeID": 8,
+		"orderDate": "1997-07-18 00:00:00.000",
+		"requiredDate": "1997-08-15 00:00:00.000",
+		"shippedDate": "1997-08-08 00:00:00.000",
+		"shipVia": 2,
+		"freight": 48.77,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 48,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 20,
+				"quantity": 25,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10604,
+		"customerID": "FURIB",
+		"employeeID": 1,
+		"orderDate": "1997-07-18 00:00:00.000",
+		"requiredDate": "1997-08-15 00:00:00.000",
+		"shippedDate": "1997-07-29 00:00:00.000",
+		"shipVia": 1,
+		"freight": 7.46,
+		"shipName": "Furia Bacalhau e Frutos do Mar",
+		"shipAddress": {
+			"street": "Jardim das rosas n. 32",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1675,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 48,
+				"unitPrice": 12.75,
+				"quantity": 6,
+				"discount": 0.1
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10605,
+		"customerID": "MEREP",
+		"employeeID": 1,
+		"orderDate": "1997-07-21 00:00:00.000",
+		"requiredDate": "1997-08-18 00:00:00.000",
+		"shippedDate": "1997-07-29 00:00:00.000",
+		"shipVia": 2,
+		"freight": 379.13,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 30,
+				"discount": 0.05
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 70,
+				"discount": 0.05
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 15,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10606,
+		"customerID": "TRADH",
+		"employeeID": 4,
+		"orderDate": "1997-07-22 00:00:00.000",
+		"requiredDate": "1997-08-19 00:00:00.000",
+		"shippedDate": "1997-07-31 00:00:00.000",
+		"shipVia": 3,
+		"freight": 79.4,
+		"shipName": "Tradiçao Hipermercados",
+		"shipAddress": {
+			"street": "Av. Inês de Castro 414",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05634-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 10,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10594,
+		"customerID": "OLDWO",
+		"employeeID": 3,
+		"orderDate": "1997-07-09 00:00:00.000",
+		"requiredDate": "1997-08-06 00:00:00.000",
+		"shippedDate": "1997-07-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 5.24,
+		"shipName": "Old World Delicatessen",
+		"shipAddress": {
+			"street": "2743 Bering St.",
+			"city": "Anchorage",
+			"region": "AK",
+			"postalCode": 99508,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10593,
+		"customerID": "LEHMS",
+		"employeeID": 7,
+		"orderDate": "1997-07-09 00:00:00.000",
+		"requiredDate": "1997-08-06 00:00:00.000",
+		"shippedDate": "1997-08-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 174.2,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 20,
+				"unitPrice": 81,
+				"quantity": 21,
+				"discount": 0.2
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 4,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10592,
+		"customerID": "LEHMS",
+		"employeeID": 3,
+		"orderDate": "1997-07-08 00:00:00.000",
+		"requiredDate": "1997-08-05 00:00:00.000",
+		"shippedDate": "1997-07-16 00:00:00.000",
+		"shipVia": 1,
+		"freight": 32.1,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 15,
+				"unitPrice": 15.5,
+				"quantity": 25,
+				"discount": 0.05
+			},
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 5,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10607,
+		"customerID": "SAVEA",
+		"employeeID": 5,
+		"orderDate": "1997-07-22 00:00:00.000",
+		"requiredDate": "1997-08-19 00:00:00.000",
+		"shippedDate": "1997-07-25 00:00:00.000",
+		"shipVia": 1,
+		"freight": 200.24,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 45,
+				"discount": 0
+			},
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 100,
+				"discount": 0
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 42,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10609,
+		"customerID": "DUMON",
+		"employeeID": 7,
+		"orderDate": "1997-07-24 00:00:00.000",
+		"requiredDate": "1997-08-21 00:00:00.000",
+		"shippedDate": "1997-07-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.85,
+		"shipName": "Du monde entier",
+		"shipAddress": {
+			"street": "67 rue des Cinquante Otages",
+			"city": "Nantes",
+			"region": "NULL",
+			"postalCode": 44000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10614,
+		"customerID": "BLAUS",
+		"employeeID": 8,
+		"orderDate": "1997-07-29 00:00:00.000",
+		"requiredDate": "1997-08-26 00:00:00.000",
+		"shippedDate": "1997-08-01 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.93,
+		"shipName": "Blauer See Delikatessen",
+		"shipAddress": {
+			"street": "Forsterstr. 57",
+			"city": "Mannheim",
+			"region": "NULL",
+			"postalCode": 68306,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10616,
+		"customerID": "GREAL",
+		"employeeID": 1,
+		"orderDate": "1997-07-31 00:00:00.000",
+		"requiredDate": "1997-08-28 00:00:00.000",
+		"shippedDate": "1997-08-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 116.53,
+		"shipName": "Great Lakes Food Market",
+		"shipAddress": {
+			"street": "2732 Baker Blvd.",
+			"city": "Eugene",
+			"region": "OR",
+			"postalCode": 97403,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 15,
+				"discount": 0.05
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 15,
+				"discount": 0.05
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 15,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10618,
+		"customerID": "MEREP",
+		"employeeID": 1,
+		"orderDate": "1997-08-01 00:00:00.000",
+		"requiredDate": "1997-09-12 00:00:00.000",
+		"shippedDate": "1997-08-08 00:00:00.000",
+		"shipVia": 1,
+		"freight": 154.68,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 6,
+				"unitPrice": 25,
+				"quantity": 70,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10619,
+		"customerID": "MEREP",
+		"employeeID": 3,
+		"orderDate": "1997-08-04 00:00:00.000",
+		"requiredDate": "1997-09-01 00:00:00.000",
+		"shippedDate": "1997-08-07 00:00:00.000",
+		"shipVia": 3,
+		"freight": 91.05,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 42,
+				"discount": 0
+			},
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10612,
+		"customerID": "SAVEA",
+		"employeeID": 1,
+		"orderDate": "1997-07-28 00:00:00.000",
+		"requiredDate": "1997-08-25 00:00:00.000",
+		"shippedDate": "1997-08-01 00:00:00.000",
+		"shipVia": 2,
+		"freight": 544.08,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 70,
+				"discount": 0
+			},
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 55,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 20,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 80,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10613,
+		"customerID": "HILAA",
+		"employeeID": 4,
+		"orderDate": "1997-07-29 00:00:00.000",
+		"requiredDate": "1997-08-26 00:00:00.000",
+		"shippedDate": "1997-08-01 00:00:00.000",
+		"shipVia": 2,
+		"freight": 8.11,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 8,
+				"discount": 0.1
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10611,
+		"customerID": "WOLZA",
+		"employeeID": 6,
+		"orderDate": "1997-07-25 00:00:00.000",
+		"requiredDate": "1997-08-22 00:00:00.000",
+		"shippedDate": "1997-08-01 00:00:00.000",
+		"shipVia": 2,
+		"freight": 80.65,
+		"shipName": "Wolski Zajazd",
+		"shipAddress": {
+			"street": "ul. Filtrowa 68",
+			"city": "Warszawa",
+			"region": "NULL",
+			"postalCode": "01-012",
+			"country": "Poland"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10621,
+		"customerID": "ISLAT",
+		"employeeID": 4,
+		"orderDate": "1997-08-05 00:00:00.000",
+		"requiredDate": "1997-09-02 00:00:00.000",
+		"shippedDate": "1997-08-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 23.73,
+		"shipName": "Island Trading",
+		"shipAddress": {
+			"street": "Garden House Crowther Way",
+			"city": "Cowes",
+			"region": "Isle of Wight",
+			"postalCode": "PO31 7PJ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10620,
+		"customerID": "LAUGB",
+		"employeeID": 2,
+		"orderDate": "1997-08-05 00:00:00.000",
+		"requiredDate": "1997-09-02 00:00:00.000",
+		"shippedDate": "1997-08-14 00:00:00.000",
+		"shipVia": 3,
+		"freight": 0.94,
+		"shipName": "Laughing Bacchus Wine Cellars",
+		"shipAddress": {
+			"street": "2319 Elm St.",
+			"city": "Vancouver",
+			"region": "BC",
+			"postalCode": "V3F 2K1",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10625,
+		"customerID": "ANATR",
+		"employeeID": 3,
+		"orderDate": "1997-08-08 00:00:00.000",
+		"requiredDate": "1997-09-05 00:00:00.000",
+		"shippedDate": "1997-08-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 43.9,
+		"shipName": "Ana Trujillo Emparedados y helados",
+		"shipAddress": {
+			"street": "Avda. de la Constitución 2222",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5021,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10623,
+		"customerID": "FRANK",
+		"employeeID": 8,
+		"orderDate": "1997-08-07 00:00:00.000",
+		"requiredDate": "1997-09-04 00:00:00.000",
+		"shippedDate": "1997-08-12 00:00:00.000",
+		"shipVia": 2,
+		"freight": 97.18,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 15,
+				"discount": 0.1
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 25,
+				"discount": 0.1
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 30,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10622,
+		"customerID": "RICAR",
+		"employeeID": 4,
+		"orderDate": "1997-08-06 00:00:00.000",
+		"requiredDate": "1997-09-03 00:00:00.000",
+		"shippedDate": "1997-08-11 00:00:00.000",
+		"shipVia": 3,
+		"freight": 50.97,
+		"shipName": "Ricardo Adocicados",
+		"shipAddress": {
+			"street": "Av. Copacabana 267",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-890",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 18,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10624,
+		"customerID": "THECR",
+		"employeeID": 4,
+		"orderDate": "1997-08-07 00:00:00.000",
+		"requiredDate": "1997-09-04 00:00:00.000",
+		"shippedDate": "1997-08-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 94.8,
+		"shipName": "The Cracker Box",
+		"shipAddress": {
+			"street": "55 Grizzly Peak Rd.",
+			"city": "Butte",
+			"region": "MT",
+			"postalCode": 59801,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10626,
+		"customerID": "BERGS",
+		"employeeID": 1,
+		"orderDate": "1997-08-11 00:00:00.000",
+		"requiredDate": "1997-09-08 00:00:00.000",
+		"shippedDate": "1997-08-20 00:00:00.000",
+		"shipVia": 2,
+		"freight": 138.69,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10627,
+		"customerID": "SAVEA",
+		"employeeID": 8,
+		"orderDate": "1997-08-11 00:00:00.000",
+		"requiredDate": "1997-09-22 00:00:00.000",
+		"shippedDate": "1997-08-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 107.46,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 73,
+				"unitPrice": 15,
+				"quantity": 35,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10630,
+		"customerID": "KOENE",
+		"employeeID": 1,
+		"orderDate": "1997-08-13 00:00:00.000",
+		"requiredDate": "1997-09-10 00:00:00.000",
+		"shippedDate": "1997-08-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 32.35,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 12,
+				"discount": 0.05
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10629,
+		"customerID": "GODOS",
+		"employeeID": 4,
+		"orderDate": "1997-08-12 00:00:00.000",
+		"requiredDate": "1997-09-09 00:00:00.000",
+		"shippedDate": "1997-08-20 00:00:00.000",
+		"shipVia": 3,
+		"freight": 85.46,
+		"shipName": "Godos Cocina Típica",
+		"shipAddress": {
+			"street": "C/ Romero 33",
+			"city": "Sevilla",
+			"region": "NULL",
+			"postalCode": 41101,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10632,
+		"customerID": "WANDK",
+		"employeeID": 8,
+		"orderDate": "1997-08-14 00:00:00.000",
+		"requiredDate": "1997-09-11 00:00:00.000",
+		"shippedDate": "1997-08-19 00:00:00.000",
+		"shipVia": 1,
+		"freight": 41.38,
+		"shipName": "Die Wandernde Kuh",
+		"shipAddress": {
+			"street": "Adenauerallee 900",
+			"city": "Stuttgart",
+			"region": "NULL",
+			"postalCode": 70563,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 30,
+				"discount": 0.05
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10633,
+		"customerID": "ERNSH",
+		"employeeID": 7,
+		"orderDate": "1997-08-15 00:00:00.000",
+		"requiredDate": "1997-09-12 00:00:00.000",
+		"shippedDate": "1997-08-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 477.9,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 12,
+				"unitPrice": 38,
+				"quantity": 36,
+				"discount": 0.15
+			},
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 13,
+				"discount": 0.15
+			},
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 35,
+				"discount": 0.15
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 80,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10634,
+		"customerID": "FOLIG",
+		"employeeID": 4,
+		"orderDate": "1997-08-15 00:00:00.000",
+		"requiredDate": "1997-09-12 00:00:00.000",
+		"shippedDate": "1997-08-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 487.38,
+		"shipName": "Folies gourmandes",
+		"shipAddress": {
+			"street": "184 chaussée de Tournai",
+			"city": "Lille",
+			"region": "NULL",
+			"postalCode": 59000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10638,
+		"customerID": "LINOD",
+		"employeeID": 3,
+		"orderDate": "1997-08-20 00:00:00.000",
+		"requiredDate": "1997-09-17 00:00:00.000",
+		"shippedDate": "1997-09-01 00:00:00.000",
+		"shipVia": 1,
+		"freight": 158.44,
+		"shipName": "LINO-Delicateses",
+		"shipAddress": {
+			"street": "Ave. 5 de Mayo Porlamar",
+			"city": "I. de Margarita",
+			"region": "Nueva Esparta",
+			"postalCode": 4980,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 45,
+				"unitPrice": 9.5,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 60,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10640,
+		"customerID": "WANDK",
+		"employeeID": 4,
+		"orderDate": "1997-08-21 00:00:00.000",
+		"requiredDate": "1997-09-18 00:00:00.000",
+		"shippedDate": "1997-08-28 00:00:00.000",
+		"shipVia": 1,
+		"freight": 23.55,
+		"shipName": "Die Wandernde Kuh",
+		"shipAddress": {
+			"street": "Adenauerallee 900",
+			"city": "Stuttgart",
+			"region": "NULL",
+			"postalCode": 70563,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 20,
+				"discount": 0.25
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 15,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10641,
+		"customerID": "HILAA",
+		"employeeID": 4,
+		"orderDate": "1997-08-22 00:00:00.000",
+		"requiredDate": "1997-09-19 00:00:00.000",
+		"shippedDate": "1997-08-26 00:00:00.000",
+		"shipVia": 2,
+		"freight": 179.61,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 60,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10642,
+		"customerID": "SIMOB",
+		"employeeID": 7,
+		"orderDate": "1997-08-22 00:00:00.000",
+		"requiredDate": "1997-09-19 00:00:00.000",
+		"shippedDate": "1997-09-05 00:00:00.000",
+		"shipVia": 3,
+		"freight": 41.89,
+		"shipName": "Simons bistro",
+		"shipAddress": {
+			"street": "Vinbæltet 34",
+			"city": "Kobenhavn",
+			"region": "NULL",
+			"postalCode": 1734,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 30,
+				"discount": 0.2
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 20,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10643,
+		"customerID": "ALFKI",
+		"employeeID": 6,
+		"orderDate": "1997-08-25 00:00:00.000",
+		"requiredDate": "1997-09-22 00:00:00.000",
+		"shippedDate": "1997-09-02 00:00:00.000",
+		"shipVia": 1,
+		"freight": 29.46,
+		"shipName": "Alfreds Futterkiste",
+		"shipAddress": {
+			"street": "Obere Str. 57",
+			"city": "Berlin",
+			"region": "NULL",
+			"postalCode": 12209,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 15,
+				"discount": 0.25
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 21,
+				"discount": 0.25
+			},
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 2,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10636,
+		"customerID": "WARTH",
+		"employeeID": 4,
+		"orderDate": "1997-08-19 00:00:00.000",
+		"requiredDate": "1997-09-16 00:00:00.000",
+		"shippedDate": "1997-08-26 00:00:00.000",
+		"shipVia": 1,
+		"freight": 1.15,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10644,
+		"customerID": "WELLI",
+		"employeeID": 3,
+		"orderDate": "1997-08-25 00:00:00.000",
+		"requiredDate": "1997-09-22 00:00:00.000",
+		"shippedDate": "1997-09-01 00:00:00.000",
+		"shipVia": 2,
+		"freight": 0.14,
+		"shipName": "Wellington Importadora",
+		"shipAddress": {
+			"street": "Rua do Mercado 12",
+			"city": "Resende",
+			"region": "SP",
+			"postalCode": "08737-363",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 4,
+				"discount": 0.1
+			},
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 21,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10635,
+		"customerID": "MAGAA",
+		"employeeID": 8,
+		"orderDate": "1997-08-18 00:00:00.000",
+		"requiredDate": "1997-09-15 00:00:00.000",
+		"shippedDate": "1997-08-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 47.46,
+		"shipName": "Magazzini Alimentari Riuniti",
+		"shipAddress": {
+			"street": "Via Ludovico il Moro 22",
+			"city": "Bergamo",
+			"region": "NULL",
+			"postalCode": 24100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 5,
+				"unitPrice": 21.35,
+				"quantity": 15,
+				"discount": 0.1
+			},
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 10,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10637,
+		"customerID": "QUEEN",
+		"employeeID": 6,
+		"orderDate": "1997-08-19 00:00:00.000",
+		"requiredDate": "1997-09-16 00:00:00.000",
+		"shippedDate": "1997-08-26 00:00:00.000",
+		"shipVia": 1,
+		"freight": 201.29,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 50,
+				"unitPrice": 16.25,
+				"quantity": 25,
+				"discount": 0.05
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 60,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10645,
+		"customerID": "HANAR",
+		"employeeID": 4,
+		"orderDate": "1997-08-26 00:00:00.000",
+		"requiredDate": "1997-09-23 00:00:00.000",
+		"shippedDate": "1997-09-02 00:00:00.000",
+		"shipVia": 1,
+		"freight": 12.41,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10649,
+		"customerID": "MAISD",
+		"employeeID": 5,
+		"orderDate": "1997-08-28 00:00:00.000",
+		"requiredDate": "1997-09-25 00:00:00.000",
+		"shippedDate": "1997-08-29 00:00:00.000",
+		"shipVia": 3,
+		"freight": 6.2,
+		"shipName": "Maison Dewey",
+		"shipAddress": {
+			"street": "Rue Joseph-Bens 532",
+			"city": "Bruxelles",
+			"region": "NULL",
+			"postalCode": "B-1180",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10650,
+		"customerID": "FAMIA",
+		"employeeID": 5,
+		"orderDate": "1997-08-29 00:00:00.000",
+		"requiredDate": "1997-09-26 00:00:00.000",
+		"shippedDate": "1997-09-03 00:00:00.000",
+		"shipVia": 3,
+		"freight": 176.81,
+		"shipName": "Familia Arquibaldo",
+		"shipAddress": {
+			"street": "Rua Orós 92",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05442-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 25,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10651,
+		"customerID": "WANDK",
+		"employeeID": 8,
+		"orderDate": "1997-09-01 00:00:00.000",
+		"requiredDate": "1997-09-29 00:00:00.000",
+		"shippedDate": "1997-09-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 20.6,
+		"shipName": "Die Wandernde Kuh",
+		"shipAddress": {
+			"street": "Adenauerallee 900",
+			"city": "Stuttgart",
+			"region": "NULL",
+			"postalCode": 70563,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 12,
+				"discount": 0.25
+			},
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 20,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10652,
+		"customerID": "GOURL",
+		"employeeID": 4,
+		"orderDate": "1997-09-01 00:00:00.000",
+		"requiredDate": "1997-09-29 00:00:00.000",
+		"shippedDate": "1997-09-08 00:00:00.000",
+		"shipVia": 2,
+		"freight": 7.14,
+		"shipName": "Gourmet Lanchonetes",
+		"shipAddress": {
+			"street": "Av. Brasil 442",
+			"city": "Campinas",
+			"region": "SP",
+			"postalCode": "04876-786",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 2,
+				"discount": 0.25
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10653,
+		"customerID": "FRANK",
+		"employeeID": 1,
+		"orderDate": "1997-09-02 00:00:00.000",
+		"requiredDate": "1997-09-30 00:00:00.000",
+		"shippedDate": "1997-09-19 00:00:00.000",
+		"shipVia": 1,
+		"freight": 93.25,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 20,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10654,
+		"customerID": "BERGS",
+		"employeeID": 5,
+		"orderDate": "1997-09-02 00:00:00.000",
+		"requiredDate": "1997-09-30 00:00:00.000",
+		"shippedDate": "1997-09-11 00:00:00.000",
+		"shipVia": 1,
+		"freight": 55.26,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 12,
+				"discount": 0.1
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 6,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10647,
+		"customerID": "QUEDE",
+		"employeeID": 4,
+		"orderDate": "1997-08-27 00:00:00.000",
+		"requiredDate": "1997-09-10 00:00:00.000",
+		"shippedDate": "1997-09-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 45.54,
+		"shipName": "Que Delícia",
+		"shipAddress": {
+			"street": "Rua da Panificadora 12",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-673",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10656,
+		"customerID": "GREAL",
+		"employeeID": 6,
+		"orderDate": "1997-09-04 00:00:00.000",
+		"requiredDate": "1997-10-02 00:00:00.000",
+		"shippedDate": "1997-09-10 00:00:00.000",
+		"shipVia": 1,
+		"freight": 57.15,
+		"shipName": "Great Lakes Food Market",
+		"shipAddress": {
+			"street": "2732 Baker Blvd.",
+			"city": "Eugene",
+			"region": "OR",
+			"postalCode": 97403,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 3,
+				"discount": 0.1
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 28,
+				"discount": 0.1
+			},
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 6,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10657,
+		"customerID": "SAVEA",
+		"employeeID": 2,
+		"orderDate": "1997-09-04 00:00:00.000",
+		"requiredDate": "1997-10-02 00:00:00.000",
+		"shippedDate": "1997-09-15 00:00:00.000",
+		"shipVia": 2,
+		"freight": 352.69,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 45,
+				"discount": 0
+			},
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 45,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 15,
+				"unitPrice": 15.5,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10658,
+		"customerID": "QUICK",
+		"employeeID": 4,
+		"orderDate": "1997-09-05 00:00:00.000",
+		"requiredDate": "1997-10-03 00:00:00.000",
+		"shippedDate": "1997-09-08 00:00:00.000",
+		"shipVia": 1,
+		"freight": 364.15,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 70,
+				"discount": 0.05
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 55,
+				"discount": 0.05
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 70,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10646,
+		"customerID": "HUNGO",
+		"employeeID": 9,
+		"orderDate": "1997-08-27 00:00:00.000",
+		"requiredDate": "1997-10-08 00:00:00.000",
+		"shippedDate": "1997-09-03 00:00:00.000",
+		"shipVia": 3,
+		"freight": 142.33,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 15,
+				"discount": 0.25
+			},
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 18,
+				"discount": 0.25
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 35,
+				"discount": 0.25
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 30,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10648,
+		"customerID": "RICAR",
+		"employeeID": 5,
+		"orderDate": "1997-08-28 00:00:00.000",
+		"requiredDate": "1997-10-09 00:00:00.000",
+		"shippedDate": "1997-09-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 14.25,
+		"shipName": "Ricardo Adocicados",
+		"shipAddress": {
+			"street": "Av. Copacabana 267",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-890",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 15,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10659,
+		"customerID": "QUEEN",
+		"employeeID": 7,
+		"orderDate": "1997-09-05 00:00:00.000",
+		"requiredDate": "1997-10-03 00:00:00.000",
+		"shippedDate": "1997-09-10 00:00:00.000",
+		"shipVia": 2,
+		"freight": 105.81,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 24,
+				"discount": 0.05
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 40,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10664,
+		"customerID": "FURIB",
+		"employeeID": 1,
+		"orderDate": "1997-09-10 00:00:00.000",
+		"requiredDate": "1997-10-08 00:00:00.000",
+		"shippedDate": "1997-09-19 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.27,
+		"shipName": "Furia Bacalhau e Frutos do Mar",
+		"shipAddress": {
+			"street": "Jardim das rosas n. 32",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1675,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 24,
+				"discount": 0.15
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 12,
+				"discount": 0.15
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 15,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10661,
+		"customerID": "HUNGO",
+		"employeeID": 7,
+		"orderDate": "1997-09-09 00:00:00.000",
+		"requiredDate": "1997-10-07 00:00:00.000",
+		"shippedDate": "1997-09-15 00:00:00.000",
+		"shipVia": 3,
+		"freight": 17.55,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 3,
+				"discount": 0.2
+			},
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 49,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10665,
+		"customerID": "LONEP",
+		"employeeID": 1,
+		"orderDate": "1997-09-11 00:00:00.000",
+		"requiredDate": "1997-10-09 00:00:00.000",
+		"shippedDate": "1997-09-17 00:00:00.000",
+		"shipVia": 2,
+		"freight": 26.31,
+		"shipName": "Lonesome Pine Restaurant",
+		"shipAddress": {
+			"street": "89 Chiaroscuro Rd.",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97219,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 1,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10663,
+		"customerID": "BONAP",
+		"employeeID": 2,
+		"orderDate": "1997-09-10 00:00:00.000",
+		"requiredDate": "1997-09-24 00:00:00.000",
+		"shippedDate": "1997-10-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 113.15,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 30,
+				"discount": 0.05
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 30,
+				"discount": 0.05
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10666,
+		"customerID": "RICSU",
+		"employeeID": 7,
+		"orderDate": "1997-09-12 00:00:00.000",
+		"requiredDate": "1997-10-10 00:00:00.000",
+		"shippedDate": "1997-09-22 00:00:00.000",
+		"shipVia": 2,
+		"freight": 232.42,
+		"shipName": "Richter Supermarkt",
+		"shipAddress": {
+			"street": "Starenweg 5",
+			"city": "Genève",
+			"region": "NULL",
+			"postalCode": 1204,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 36,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10667,
+		"customerID": "ERNSH",
+		"employeeID": 7,
+		"orderDate": "1997-09-12 00:00:00.000",
+		"requiredDate": "1997-10-10 00:00:00.000",
+		"shippedDate": "1997-09-19 00:00:00.000",
+		"shipVia": 1,
+		"freight": 78.09,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 45,
+				"discount": 0.2
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 14,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10668,
+		"customerID": "WANDK",
+		"employeeID": 1,
+		"orderDate": "1997-09-15 00:00:00.000",
+		"requiredDate": "1997-10-13 00:00:00.000",
+		"shippedDate": "1997-09-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 47.22,
+		"shipName": "Die Wandernde Kuh",
+		"shipAddress": {
+			"street": "Adenauerallee 900",
+			"city": "Stuttgart",
+			"region": "NULL",
+			"postalCode": 70563,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 8,
+				"discount": 0.1
+			},
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 4,
+				"discount": 0.1
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 15,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10670,
+		"customerID": "FRANK",
+		"employeeID": 4,
+		"orderDate": "1997-09-16 00:00:00.000",
+		"requiredDate": "1997-10-14 00:00:00.000",
+		"shippedDate": "1997-09-18 00:00:00.000",
+		"shipVia": 1,
+		"freight": 203.48,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 32,
+				"discount": 0
+			},
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 73,
+				"unitPrice": 15,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 67,
+				"unitPrice": 14,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10672,
+		"customerID": "BERGS",
+		"employeeID": 9,
+		"orderDate": "1997-09-17 00:00:00.000",
+		"requiredDate": "1997-10-01 00:00:00.000",
+		"shippedDate": "1997-09-26 00:00:00.000",
+		"shipVia": 2,
+		"freight": 95.75,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 15,
+				"discount": 0.1
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10671,
+		"customerID": "FRANR",
+		"employeeID": 1,
+		"orderDate": "1997-09-17 00:00:00.000",
+		"requiredDate": "1997-10-15 00:00:00.000",
+		"shippedDate": "1997-09-24 00:00:00.000",
+		"shipVia": 1,
+		"freight": 30.34,
+		"shipName": "France restauration",
+		"shipAddress": {
+			"street": "54 rue Royale",
+			"city": "Nantes",
+			"region": "NULL",
+			"postalCode": 44000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10673,
+		"customerID": "WILMK",
+		"employeeID": 2,
+		"orderDate": "1997-09-18 00:00:00.000",
+		"requiredDate": "1997-10-16 00:00:00.000",
+		"shippedDate": "1997-09-19 00:00:00.000",
+		"shipVia": 1,
+		"freight": 22.76,
+		"shipName": "Wilman Kala",
+		"shipAddress": {
+			"street": "Keskuskatu 45",
+			"city": "Helsinki",
+			"region": "NULL",
+			"postalCode": 21240,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10677,
+		"customerID": "ANTON",
+		"employeeID": 1,
+		"orderDate": "1997-09-22 00:00:00.000",
+		"requiredDate": "1997-10-20 00:00:00.000",
+		"shippedDate": "1997-09-26 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.03,
+		"shipName": "Antonio Moreno Taquería",
+		"shipAddress": {
+			"street": "Mataderos  2312",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5023,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 30,
+				"discount": 0.15
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 8,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10678,
+		"customerID": "SAVEA",
+		"employeeID": 7,
+		"orderDate": "1997-09-23 00:00:00.000",
+		"requiredDate": "1997-10-21 00:00:00.000",
+		"shippedDate": "1997-10-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 388.98,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 12,
+				"unitPrice": 38,
+				"quantity": 100,
+				"discount": 0
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 120,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10680,
+		"customerID": "OLDWO",
+		"employeeID": 1,
+		"orderDate": "1997-09-24 00:00:00.000",
+		"requiredDate": "1997-10-22 00:00:00.000",
+		"shippedDate": "1997-09-26 00:00:00.000",
+		"shipVia": 1,
+		"freight": 26.61,
+		"shipName": "Old World Delicatessen",
+		"shipAddress": {
+			"street": "2743 Bering St.",
+			"city": "Anchorage",
+			"region": "AK",
+			"postalCode": 99508,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 50,
+				"discount": 0.25
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 20,
+				"discount": 0.25
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 40,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10681,
+		"customerID": "GREAL",
+		"employeeID": 3,
+		"orderDate": "1997-09-25 00:00:00.000",
+		"requiredDate": "1997-10-23 00:00:00.000",
+		"shippedDate": "1997-09-30 00:00:00.000",
+		"shipVia": 3,
+		"freight": 76.13,
+		"shipName": "Great Lakes Food Market",
+		"shipAddress": {
+			"street": "2732 Baker Blvd.",
+			"city": "Eugene",
+			"region": "OR",
+			"postalCode": 97403,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 12,
+				"discount": 0.1
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 28,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10682,
+		"customerID": "ANTON",
+		"employeeID": 3,
+		"orderDate": "1997-09-25 00:00:00.000",
+		"requiredDate": "1997-10-23 00:00:00.000",
+		"shippedDate": "1997-10-01 00:00:00.000",
+		"shipVia": 2,
+		"freight": 36.13,
+		"shipName": "Antonio Moreno Taquería",
+		"shipAddress": {
+			"street": "Mataderos  2312",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5023,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 66,
+				"unitPrice": 17,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10675,
+		"customerID": "FRANK",
+		"employeeID": 5,
+		"orderDate": "1997-09-19 00:00:00.000",
+		"requiredDate": "1997-10-17 00:00:00.000",
+		"shippedDate": "1997-09-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 31.85,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10684,
+		"customerID": "OTTIK",
+		"employeeID": 3,
+		"orderDate": "1997-09-26 00:00:00.000",
+		"requiredDate": "1997-10-24 00:00:00.000",
+		"shippedDate": "1997-09-30 00:00:00.000",
+		"shipVia": 1,
+		"freight": 145.63,
+		"shipName": "Ottilies Käseladen",
+		"shipAddress": {
+			"street": "Mehrheimerstr. 369",
+			"city": "Köln",
+			"region": "NULL",
+			"postalCode": 50739,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10685,
+		"customerID": "GOURL",
+		"employeeID": 4,
+		"orderDate": "1997-09-29 00:00:00.000",
+		"requiredDate": "1997-10-13 00:00:00.000",
+		"shippedDate": "1997-10-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 33.75,
+		"shipName": "Gourmet Lanchonetes",
+		"shipAddress": {
+			"street": "Av. Brasil 442",
+			"city": "Campinas",
+			"region": "SP",
+			"postalCode": "04876-786",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10676,
+		"customerID": "TORTU",
+		"employeeID": 2,
+		"orderDate": "1997-09-22 00:00:00.000",
+		"requiredDate": "1997-10-20 00:00:00.000",
+		"shippedDate": "1997-09-29 00:00:00.000",
+		"shipVia": 2,
+		"freight": 2.01,
+		"shipName": "Tortuga Restaurante",
+		"shipAddress": {
+			"street": "Avda. Azteca 123",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 7,
+				"discount": 0
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10686,
+		"customerID": "PICCO",
+		"employeeID": 2,
+		"orderDate": "1997-09-30 00:00:00.000",
+		"requiredDate": "1997-10-28 00:00:00.000",
+		"shippedDate": "1997-10-08 00:00:00.000",
+		"shipVia": 1,
+		"freight": 96.5,
+		"shipName": "Piccolo und mehr",
+		"shipAddress": {
+			"street": "Geislweg 14",
+			"city": "Salzburg",
+			"region": "NULL",
+			"postalCode": 5020,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 30,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10687,
+		"customerID": "HUNGO",
+		"employeeID": 9,
+		"orderDate": "1997-09-30 00:00:00.000",
+		"requiredDate": "1997-10-28 00:00:00.000",
+		"shippedDate": "1997-10-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 296.43,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 9,
+				"unitPrice": 97,
+				"quantity": 50,
+				"discount": 0.25
+			},
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 6,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10691,
+		"customerID": "QUICK",
+		"employeeID": 2,
+		"orderDate": "1997-10-03 00:00:00.000",
+		"requiredDate": "1997-11-14 00:00:00.000",
+		"shippedDate": "1997-10-22 00:00:00.000",
+		"shipVia": 2,
+		"freight": 810.05,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 48,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10693,
+		"customerID": "WHITC",
+		"employeeID": 3,
+		"orderDate": "1997-10-06 00:00:00.000",
+		"requiredDate": "1997-10-20 00:00:00.000",
+		"shippedDate": "1997-10-10 00:00:00.000",
+		"shipVia": 3,
+		"freight": 139.34,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 9,
+				"unitPrice": 97,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 60,
+				"discount": 0.15
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 30,
+				"discount": 0.15
+			},
+			{
+				"productID": 73,
+				"unitPrice": 15,
+				"quantity": 15,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10694,
+		"customerID": "QUICK",
+		"employeeID": 8,
+		"orderDate": "1997-10-06 00:00:00.000",
+		"requiredDate": "1997-11-03 00:00:00.000",
+		"shippedDate": "1997-10-09 00:00:00.000",
+		"shipVia": 3,
+		"freight": 398.36,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 90,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10695,
+		"customerID": "WILMK",
+		"employeeID": 7,
+		"orderDate": "1997-10-07 00:00:00.000",
+		"requiredDate": "1997-11-18 00:00:00.000",
+		"shippedDate": "1997-10-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 16.72,
+		"shipName": "Wilman Kala",
+		"shipAddress": {
+			"street": "Keskuskatu 45",
+			"city": "Helsinki",
+			"region": "NULL",
+			"postalCode": 21240,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 8,
+				"unitPrice": 40,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 12,
+				"unitPrice": 38,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10696,
+		"customerID": "WHITC",
+		"employeeID": 8,
+		"orderDate": "1997-10-08 00:00:00.000",
+		"requiredDate": "1997-11-19 00:00:00.000",
+		"shippedDate": "1997-10-14 00:00:00.000",
+		"shipVia": 3,
+		"freight": 102.55,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 18,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10697,
+		"customerID": "LINOD",
+		"employeeID": 3,
+		"orderDate": "1997-10-08 00:00:00.000",
+		"requiredDate": "1997-11-05 00:00:00.000",
+		"shippedDate": "1997-10-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 45.52,
+		"shipName": "LINO-Delicateses",
+		"shipAddress": {
+			"street": "Ave. 5 de Mayo Porlamar",
+			"city": "I. de Margarita",
+			"region": "Nueva Esparta",
+			"postalCode": 4980,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 9,
+				"discount": 0.25
+			},
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 7,
+				"discount": 0.25
+			},
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 30,
+				"discount": 0.25
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 30,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10698,
+		"customerID": "ERNSH",
+		"employeeID": 4,
+		"orderDate": "1997-10-09 00:00:00.000",
+		"requiredDate": "1997-11-06 00:00:00.000",
+		"shippedDate": "1997-10-17 00:00:00.000",
+		"shipVia": 1,
+		"freight": 272.47,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 8,
+				"discount": 0.05
+			},
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 12,
+				"discount": 0.05
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 65,
+				"discount": 0.05
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 8,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10690,
+		"customerID": "HANAR",
+		"employeeID": 1,
+		"orderDate": "1997-10-02 00:00:00.000",
+		"requiredDate": "1997-10-30 00:00:00.000",
+		"shippedDate": "1997-10-03 00:00:00.000",
+		"shipVia": 1,
+		"freight": 15.8,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 20,
+				"discount": 0.25
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 30,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10702,
+		"customerID": "ALFKI",
+		"employeeID": 4,
+		"orderDate": "1997-10-13 00:00:00.000",
+		"requiredDate": "1997-11-24 00:00:00.000",
+		"shippedDate": "1997-10-21 00:00:00.000",
+		"shipVia": 1,
+		"freight": 23.94,
+		"shipName": "Alfred's Futterkiste",
+		"shipAddress": {
+			"street": "Obere Str. 57",
+			"city": "Berlin",
+			"region": "NULL",
+			"postalCode": 12209,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 3,
+				"unitPrice": 10,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10700,
+		"customerID": "SAVEA",
+		"employeeID": 3,
+		"orderDate": "1997-10-10 00:00:00.000",
+		"requiredDate": "1997-11-07 00:00:00.000",
+		"shippedDate": "1997-10-16 00:00:00.000",
+		"shipVia": 1,
+		"freight": 65.1,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 34,
+				"unitPrice": 14,
+				"quantity": 12,
+				"discount": 0.2
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 40,
+				"discount": 0.2
+			},
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 5,
+				"discount": 0.2
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 60,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10688,
+		"customerID": "VAFFE",
+		"employeeID": 4,
+		"orderDate": "1997-10-01 00:00:00.000",
+		"requiredDate": "1997-10-15 00:00:00.000",
+		"shippedDate": "1997-10-07 00:00:00.000",
+		"shipVia": 2,
+		"freight": 299.09,
+		"shipName": "Vaffeljernet",
+		"shipAddress": {
+			"street": "Smagsloget 45",
+			"city": "Århus",
+			"region": "NULL",
+			"postalCode": 8200,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 18,
+				"discount": 0.1
+			},
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 60,
+				"discount": 0.1
+			},
+			{
+				"productID": 34,
+				"unitPrice": 14,
+				"quantity": 14,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10701,
+		"customerID": "HUNGO",
+		"employeeID": 6,
+		"orderDate": "1997-10-13 00:00:00.000",
+		"requiredDate": "1997-10-27 00:00:00.000",
+		"shippedDate": "1997-10-15 00:00:00.000",
+		"shipVia": 3,
+		"freight": 220.31,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 42,
+				"discount": 0.15
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 20,
+				"discount": 0.15
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 35,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10703,
+		"customerID": "FOLKO",
+		"employeeID": 6,
+		"orderDate": "1997-10-14 00:00:00.000",
+		"requiredDate": "1997-11-11 00:00:00.000",
+		"shippedDate": "1997-10-20 00:00:00.000",
+		"shipVia": 2,
+		"freight": 152.3,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 73,
+				"unitPrice": 15,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10704,
+		"customerID": "QUEEN",
+		"employeeID": 6,
+		"orderDate": "1997-10-14 00:00:00.000",
+		"requiredDate": "1997-11-11 00:00:00.000",
+		"shippedDate": "1997-11-07 00:00:00.000",
+		"shipVia": 1,
+		"freight": 4.78,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 48,
+				"unitPrice": 12.75,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10708,
+		"customerID": "THEBI",
+		"employeeID": 6,
+		"orderDate": "1997-10-17 00:00:00.000",
+		"requiredDate": "1997-11-28 00:00:00.000",
+		"shippedDate": "1997-11-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 2.96,
+		"shipName": "The Big Cheese",
+		"shipAddress": {
+			"street": "89 Jefferson Way Suite 2",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97201,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 5,
+				"unitPrice": 21.35,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10709,
+		"customerID": "GOURL",
+		"employeeID": 1,
+		"orderDate": "1997-10-17 00:00:00.000",
+		"requiredDate": "1997-11-14 00:00:00.000",
+		"shippedDate": "1997-11-20 00:00:00.000",
+		"shipVia": 3,
+		"freight": 210.8,
+		"shipName": "Gourmet Lanchonetes",
+		"shipAddress": {
+			"street": "Av. Brasil 442",
+			"city": "Campinas",
+			"region": "SP",
+			"postalCode": "04876-786",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 8,
+				"unitPrice": 40,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 28,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10710,
+		"customerID": "FRANS",
+		"employeeID": 1,
+		"orderDate": "1997-10-20 00:00:00.000",
+		"requiredDate": "1997-11-17 00:00:00.000",
+		"shippedDate": "1997-10-23 00:00:00.000",
+		"shipVia": 1,
+		"freight": 4.98,
+		"shipName": "Franchi S.p.A.",
+		"shipAddress": {
+			"street": "Via Monte Bianco 34",
+			"city": "Torino",
+			"region": "NULL",
+			"postalCode": 10100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10711,
+		"customerID": "SAVEA",
+		"employeeID": 5,
+		"orderDate": "1997-10-21 00:00:00.000",
+		"requiredDate": "1997-12-02 00:00:00.000",
+		"shippedDate": "1997-10-29 00:00:00.000",
+		"shipVia": 2,
+		"freight": 52.41,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 42,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 120,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10712,
+		"customerID": "HUNGO",
+		"employeeID": 3,
+		"orderDate": "1997-10-21 00:00:00.000",
+		"requiredDate": "1997-11-18 00:00:00.000",
+		"shippedDate": "1997-10-31 00:00:00.000",
+		"shipVia": 1,
+		"freight": 89.93,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 3,
+				"discount": 0.05
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10713,
+		"customerID": "SAVEA",
+		"employeeID": 1,
+		"orderDate": "1997-10-22 00:00:00.000",
+		"requiredDate": "1997-11-19 00:00:00.000",
+		"shippedDate": "1997-10-24 00:00:00.000",
+		"shipVia": 1,
+		"freight": 167.05,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 45,
+				"unitPrice": 9.5,
+				"quantity": 110,
+				"discount": 0
+			},
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10707,
+		"customerID": "AROUT",
+		"employeeID": 4,
+		"orderDate": "1997-10-16 00:00:00.000",
+		"requiredDate": "1997-10-30 00:00:00.000",
+		"shippedDate": "1997-10-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 21.74,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 28,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10715,
+		"customerID": "BONAP",
+		"employeeID": 3,
+		"orderDate": "1997-10-23 00:00:00.000",
+		"requiredDate": "1997-11-06 00:00:00.000",
+		"shippedDate": "1997-10-29 00:00:00.000",
+		"shipVia": 1,
+		"freight": 63.2,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10706,
+		"customerID": "OLDWO",
+		"employeeID": 8,
+		"orderDate": "1997-10-16 00:00:00.000",
+		"requiredDate": "1997-11-13 00:00:00.000",
+		"shippedDate": "1997-10-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 135.63,
+		"shipName": "Old World Delicatessen",
+		"shipAddress": {
+			"street": "2743 Bering St.",
+			"city": "Anchorage",
+			"region": "AK",
+			"postalCode": 99508,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 8,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10705,
+		"customerID": "HILAA",
+		"employeeID": 9,
+		"orderDate": "1997-10-15 00:00:00.000",
+		"requiredDate": "1997-11-12 00:00:00.000",
+		"shippedDate": "1997-11-18 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.52,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 32,
+				"unitPrice": 32,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10714,
+		"customerID": "SAVEA",
+		"employeeID": 5,
+		"orderDate": "1997-10-22 00:00:00.000",
+		"requiredDate": "1997-11-19 00:00:00.000",
+		"shippedDate": "1997-10-27 00:00:00.000",
+		"shipVia": 3,
+		"freight": 24.49,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 18,
+				"discount": 0.25
+			},
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 12,
+				"discount": 0.25
+			},
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 50,
+				"discount": 0.25
+			},
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 27,
+				"discount": 0.25
+			},
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 30,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10719,
+		"customerID": "LETSS",
+		"employeeID": 8,
+		"orderDate": "1997-10-27 00:00:00.000",
+		"requiredDate": "1997-11-24 00:00:00.000",
+		"shippedDate": "1997-11-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 51.44,
+		"shipName": "Let's Stop N Shop",
+		"shipAddress": {
+			"street": "87 Polk St. Suite 5",
+			"city": "San Francisco",
+			"region": "CA",
+			"postalCode": 94117,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 12,
+				"discount": 0.25
+			},
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 3,
+				"discount": 0.25
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 40,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10720,
+		"customerID": "QUEDE",
+		"employeeID": 8,
+		"orderDate": "1997-10-28 00:00:00.000",
+		"requiredDate": "1997-11-11 00:00:00.000",
+		"shippedDate": "1997-11-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 9.53,
+		"shipName": "Que Delícia",
+		"shipAddress": {
+			"street": "Rua da Panificadora 12",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-673",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 8,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10722,
+		"customerID": "SAVEA",
+		"employeeID": 8,
+		"orderDate": "1997-10-29 00:00:00.000",
+		"requiredDate": "1997-12-10 00:00:00.000",
+		"shippedDate": "1997-11-04 00:00:00.000",
+		"shipVia": 1,
+		"freight": 74.58,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 45,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 42,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10724,
+		"customerID": "MEREP",
+		"employeeID": 8,
+		"orderDate": "1997-10-30 00:00:00.000",
+		"requiredDate": "1997-12-11 00:00:00.000",
+		"shippedDate": "1997-11-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 57.75,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 16,
+				"discount": 0
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10716,
+		"customerID": "RANCH",
+		"employeeID": 4,
+		"orderDate": "1997-10-24 00:00:00.000",
+		"requiredDate": "1997-11-21 00:00:00.000",
+		"shippedDate": "1997-10-27 00:00:00.000",
+		"shipVia": 2,
+		"freight": 22.57,
+		"shipName": "Rancho grande",
+		"shipAddress": {
+			"street": "Av. del Libertador 900",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 7,
+				"discount": 0
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10726,
+		"customerID": "EASTC",
+		"employeeID": 4,
+		"orderDate": "1997-11-03 00:00:00.000",
+		"requiredDate": "1997-11-17 00:00:00.000",
+		"shippedDate": "1997-12-05 00:00:00.000",
+		"shipVia": 1,
+		"freight": 16.56,
+		"shipName": "Eastern Connection",
+		"shipAddress": {
+			"street": "35 King George",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "WX3 6FW",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10717,
+		"customerID": "FRANK",
+		"employeeID": 1,
+		"orderDate": "1997-10-24 00:00:00.000",
+		"requiredDate": "1997-11-21 00:00:00.000",
+		"shippedDate": "1997-10-29 00:00:00.000",
+		"shipVia": 2,
+		"freight": 59.25,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 32,
+				"discount": 0.05
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 25,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10727,
+		"customerID": "REGGC",
+		"employeeID": 2,
+		"orderDate": "1997-11-03 00:00:00.000",
+		"requiredDate": "1997-12-01 00:00:00.000",
+		"shippedDate": "1997-12-05 00:00:00.000",
+		"shipVia": 1,
+		"freight": 89.9,
+		"shipName": "Reggiani Caseifici",
+		"shipAddress": {
+			"street": "Strada Provinciale 124",
+			"city": "Reggio Emilia",
+			"region": "NULL",
+			"postalCode": 42100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 10,
+				"discount": 0.05
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 10,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10728,
+		"customerID": "QUEEN",
+		"employeeID": 4,
+		"orderDate": "1997-11-04 00:00:00.000",
+		"requiredDate": "1997-12-02 00:00:00.000",
+		"shippedDate": "1997-11-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 58.33,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10729,
+		"customerID": "LINOD",
+		"employeeID": 8,
+		"orderDate": "1997-11-04 00:00:00.000",
+		"requiredDate": "1997-12-16 00:00:00.000",
+		"shippedDate": "1997-11-14 00:00:00.000",
+		"shipVia": 3,
+		"freight": 141.06,
+		"shipName": "LINO-Delicateses",
+		"shipAddress": {
+			"street": "Ave. 5 de Mayo Porlamar",
+			"city": "I. de Margarita",
+			"region": "Nueva Esparta",
+			"postalCode": 4980,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 50,
+				"unitPrice": 16.25,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10730,
+		"customerID": "BONAP",
+		"employeeID": 5,
+		"orderDate": "1997-11-05 00:00:00.000",
+		"requiredDate": "1997-12-03 00:00:00.000",
+		"shippedDate": "1997-11-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 20.12,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 15,
+				"discount": 0.05
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 3,
+				"discount": 0.05
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 10,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10718,
+		"customerID": "KOENE",
+		"employeeID": 1,
+		"orderDate": "1997-10-27 00:00:00.000",
+		"requiredDate": "1997-11-24 00:00:00.000",
+		"shippedDate": "1997-10-29 00:00:00.000",
+		"shipVia": 3,
+		"freight": 170.88,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 12,
+				"unitPrice": 38,
+				"quantity": 36,
+				"discount": 0
+			},
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10725,
+		"customerID": "FAMIA",
+		"employeeID": 4,
+		"orderDate": "1997-10-31 00:00:00.000",
+		"requiredDate": "1997-11-28 00:00:00.000",
+		"shippedDate": "1997-11-05 00:00:00.000",
+		"shipVia": 3,
+		"freight": 10.83,
+		"shipName": "Familia Arquibaldo",
+		"shipAddress": {
+			"street": "Rua Orós 92",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05442-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10731,
+		"customerID": "CHOPS",
+		"employeeID": 7,
+		"orderDate": "1997-11-06 00:00:00.000",
+		"requiredDate": "1997-12-04 00:00:00.000",
+		"shippedDate": "1997-11-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 96.65,
+		"shipName": "Chop-suey Chinese",
+		"shipAddress": {
+			"street": "Hauptstr. 31",
+			"city": "Bern",
+			"region": "NULL",
+			"postalCode": 3012,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 40,
+				"discount": 0.05
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 30,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10735,
+		"customerID": "LETSS",
+		"employeeID": 6,
+		"orderDate": "1997-11-10 00:00:00.000",
+		"requiredDate": "1997-12-08 00:00:00.000",
+		"shippedDate": "1997-11-21 00:00:00.000",
+		"shipVia": 2,
+		"freight": 45.97,
+		"shipName": "Let's Stop N Shop",
+		"shipAddress": {
+			"street": "87 Polk St. Suite 5",
+			"city": "San Francisco",
+			"region": "CA",
+			"postalCode": 94117,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 2,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10736,
+		"customerID": "HUNGO",
+		"employeeID": 9,
+		"orderDate": "1997-11-11 00:00:00.000",
+		"requiredDate": "1997-12-09 00:00:00.000",
+		"shippedDate": "1997-11-21 00:00:00.000",
+		"shipVia": 2,
+		"freight": 44.1,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10737,
+		"customerID": "VINET",
+		"employeeID": 2,
+		"orderDate": "1997-11-11 00:00:00.000",
+		"requiredDate": "1997-12-09 00:00:00.000",
+		"shippedDate": "1997-11-18 00:00:00.000",
+		"shipVia": 2,
+		"freight": 7.79,
+		"shipName": "Vins et alcools Chevalier",
+		"shipAddress": {
+			"street": "59 rue de l'Abbaye",
+			"city": "Reims",
+			"region": "NULL",
+			"postalCode": 51100,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10739,
+		"customerID": "VINET",
+		"employeeID": 3,
+		"orderDate": "1997-11-12 00:00:00.000",
+		"requiredDate": "1997-12-10 00:00:00.000",
+		"shippedDate": "1997-11-17 00:00:00.000",
+		"shipVia": 3,
+		"freight": 11.08,
+		"shipName": "Vins et alcools Chevalier",
+		"shipAddress": {
+			"street": "59 rue de l'Abbaye",
+			"city": "Reims",
+			"region": "NULL",
+			"postalCode": 51100,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 18,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10740,
+		"customerID": "WHITC",
+		"employeeID": 4,
+		"orderDate": "1997-11-13 00:00:00.000",
+		"requiredDate": "1997-12-11 00:00:00.000",
+		"shippedDate": "1997-11-25 00:00:00.000",
+		"shipVia": 2,
+		"freight": 81.88,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 5,
+				"discount": 0.2
+			},
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 35,
+				"discount": 0.2
+			},
+			{
+				"productID": 45,
+				"unitPrice": 9.5,
+				"quantity": 40,
+				"discount": 0.2
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 14,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10733,
+		"customerID": "BERGS",
+		"employeeID": 1,
+		"orderDate": "1997-11-07 00:00:00.000",
+		"requiredDate": "1997-12-05 00:00:00.000",
+		"shippedDate": "1997-11-10 00:00:00.000",
+		"shipVia": 3,
+		"freight": 110.11,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 16,
+				"discount": 0
+			},
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10742,
+		"customerID": "BOTTM",
+		"employeeID": 3,
+		"orderDate": "1997-11-14 00:00:00.000",
+		"requiredDate": "1997-12-12 00:00:00.000",
+		"shippedDate": "1997-11-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 243.73,
+		"shipName": "Bottom-Dollar Markets",
+		"shipAddress": {
+			"street": "23 Tsawassen Blvd.",
+			"city": "Tsawassen",
+			"region": "BC",
+			"postalCode": "T2F 8M4",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 3,
+				"unitPrice": 10,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10734,
+		"customerID": "GOURL",
+		"employeeID": 2,
+		"orderDate": "1997-11-07 00:00:00.000",
+		"requiredDate": "1997-12-05 00:00:00.000",
+		"shippedDate": "1997-11-12 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.63,
+		"shipName": "Gourmet Lanchonetes",
+		"shipAddress": {
+			"street": "Av. Brasil 442",
+			"city": "Campinas",
+			"region": "SP",
+			"postalCode": "04876-786",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 6,
+				"unitPrice": 25,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10747,
+		"customerID": "PICCO",
+		"employeeID": 6,
+		"orderDate": "1997-11-19 00:00:00.000",
+		"requiredDate": "1997-12-17 00:00:00.000",
+		"shippedDate": "1997-11-26 00:00:00.000",
+		"shipVia": 1,
+		"freight": 117.33,
+		"shipName": "Piccolo und mehr",
+		"shipAddress": {
+			"street": "Geislweg 14",
+			"city": "Salzburg",
+			"region": "NULL",
+			"postalCode": 5020,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 63,
+				"unitPrice": 43.9,
+				"quantity": 9,
+				"discount": 0
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10748,
+		"customerID": "SAVEA",
+		"employeeID": 3,
+		"orderDate": "1997-11-20 00:00:00.000",
+		"requiredDate": "1997-12-18 00:00:00.000",
+		"shippedDate": "1997-11-28 00:00:00.000",
+		"shipVia": 1,
+		"freight": 232.55,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 44,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 28,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10749,
+		"customerID": "ISLAT",
+		"employeeID": 4,
+		"orderDate": "1997-11-20 00:00:00.000",
+		"requiredDate": "1997-12-18 00:00:00.000",
+		"shippedDate": "1997-12-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 61.53,
+		"shipName": "Island Trading",
+		"shipAddress": {
+			"street": "Garden House Crowther Way",
+			"city": "Cowes",
+			"region": "Isle of Wight",
+			"postalCode": "PO31 7PJ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10750,
+		"customerID": "WARTH",
+		"employeeID": 9,
+		"orderDate": "1997-11-21 00:00:00.000",
+		"requiredDate": "1997-12-19 00:00:00.000",
+		"shippedDate": "1997-11-24 00:00:00.000",
+		"shipVia": 1,
+		"freight": 79.3,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 5,
+				"discount": 0.15
+			},
+			{
+				"productID": 45,
+				"unitPrice": 9.5,
+				"quantity": 40,
+				"discount": 0.15
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 25,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10751,
+		"customerID": "RICSU",
+		"employeeID": 3,
+		"orderDate": "1997-11-24 00:00:00.000",
+		"requiredDate": "1997-12-22 00:00:00.000",
+		"shippedDate": "1997-12-03 00:00:00.000",
+		"shipVia": 3,
+		"freight": 130.79,
+		"shipName": "Richter Supermarkt",
+		"shipAddress": {
+			"street": "Starenweg 5",
+			"city": "Genève",
+			"region": "NULL",
+			"postalCode": 1204,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 12,
+				"discount": 0.1
+			},
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 50,
+				"unitPrice": 16.25,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 73,
+				"unitPrice": 15,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10752,
+		"customerID": "NORTS",
+		"employeeID": 2,
+		"orderDate": "1997-11-24 00:00:00.000",
+		"requiredDate": "1997-12-22 00:00:00.000",
+		"shippedDate": "1997-11-28 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.39,
+		"shipName": "North/South",
+		"shipAddress": {
+			"street": "South House 300 Queensbridge",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "SW7 1RZ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10753,
+		"customerID": "FRANS",
+		"employeeID": 3,
+		"orderDate": "1997-11-25 00:00:00.000",
+		"requiredDate": "1997-12-23 00:00:00.000",
+		"shippedDate": "1997-11-27 00:00:00.000",
+		"shipVia": 1,
+		"freight": 7.7,
+		"shipName": "Franchi S.p.A.",
+		"shipAddress": {
+			"street": "Via Monte Bianco 34",
+			"city": "Torino",
+			"region": "NULL",
+			"postalCode": 10100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 45,
+				"unitPrice": 9.5,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 74,
+				"unitPrice": 10,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10745,
+		"customerID": "QUICK",
+		"employeeID": 9,
+		"orderDate": "1997-11-18 00:00:00.000",
+		"requiredDate": "1997-12-16 00:00:00.000",
+		"shippedDate": "1997-11-27 00:00:00.000",
+		"shipVia": 1,
+		"freight": 3.52,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 16,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 45,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 7,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10755,
+		"customerID": "BONAP",
+		"employeeID": 4,
+		"orderDate": "1997-11-26 00:00:00.000",
+		"requiredDate": "1997-12-24 00:00:00.000",
+		"shippedDate": "1997-11-28 00:00:00.000",
+		"shipVia": 2,
+		"freight": 16.71,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 30,
+				"discount": 0.25
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 30,
+				"discount": 0.25
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 14,
+				"discount": 0.25
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 25,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10756,
+		"customerID": "SPLIR",
+		"employeeID": 8,
+		"orderDate": "1997-11-27 00:00:00.000",
+		"requiredDate": "1997-12-25 00:00:00.000",
+		"shippedDate": "1997-12-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 73.21,
+		"shipName": "Split Rail Beer & Ale",
+		"shipAddress": {
+			"street": "P.O. Box 555",
+			"city": "Lander",
+			"region": "WY",
+			"postalCode": 82520,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 21,
+				"discount": 0.2
+			},
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 6,
+				"discount": 0.2
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 20,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10746,
+		"customerID": "CHOPS",
+		"employeeID": 1,
+		"orderDate": "1997-11-19 00:00:00.000",
+		"requiredDate": "1997-12-17 00:00:00.000",
+		"shippedDate": "1997-11-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 31.43,
+		"shipName": "Chop-suey Chinese",
+		"shipAddress": {
+			"street": "Hauptstr. 31",
+			"city": "Bern",
+			"region": "NULL",
+			"postalCode": 3012,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 28,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 9,
+				"discount": 0
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10757,
+		"customerID": "SAVEA",
+		"employeeID": 6,
+		"orderDate": "1997-11-27 00:00:00.000",
+		"requiredDate": "1997-12-25 00:00:00.000",
+		"shippedDate": "1997-12-15 00:00:00.000",
+		"shipVia": 1,
+		"freight": 8.19,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 34,
+				"unitPrice": 14,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 7,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10761,
+		"customerID": "RATTC",
+		"employeeID": 5,
+		"orderDate": "1997-12-02 00:00:00.000",
+		"requiredDate": "1997-12-30 00:00:00.000",
+		"shippedDate": "1997-12-08 00:00:00.000",
+		"shipVia": 2,
+		"freight": 18.66,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 35,
+				"discount": 0.25
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 18,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10762,
+		"customerID": "FOLKO",
+		"employeeID": 3,
+		"orderDate": "1997-12-02 00:00:00.000",
+		"requiredDate": "1997-12-30 00:00:00.000",
+		"shippedDate": "1997-12-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 328.74,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 28,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 16,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10763,
+		"customerID": "FOLIG",
+		"employeeID": 3,
+		"orderDate": "1997-12-03 00:00:00.000",
+		"requiredDate": "1997-12-31 00:00:00.000",
+		"shippedDate": "1997-12-08 00:00:00.000",
+		"shipVia": 3,
+		"freight": 37.35,
+		"shipName": "Folies gourmandes",
+		"shipAddress": {
+			"street": "184 chaussée de Tournai",
+			"city": "Lille",
+			"region": "NULL",
+			"postalCode": 59000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10764,
+		"customerID": "ERNSH",
+		"employeeID": 6,
+		"orderDate": "1997-12-03 00:00:00.000",
+		"requiredDate": "1997-12-31 00:00:00.000",
+		"shippedDate": "1997-12-08 00:00:00.000",
+		"shipVia": 3,
+		"freight": 145.45,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 3,
+				"unitPrice": 10,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 130,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10766,
+		"customerID": "OTTIK",
+		"employeeID": 4,
+		"orderDate": "1997-12-05 00:00:00.000",
+		"requiredDate": "1998-01-02 00:00:00.000",
+		"shippedDate": "1997-12-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 157.55,
+		"shipName": "Ottilies Käseladen",
+		"shipAddress": {
+			"street": "Mehrheimerstr. 369",
+			"city": "Köln",
+			"region": "NULL",
+			"postalCode": 50739,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10760,
+		"customerID": "MAISD",
+		"employeeID": 4,
+		"orderDate": "1997-12-01 00:00:00.000",
+		"requiredDate": "1997-12-29 00:00:00.000",
+		"shippedDate": "1997-12-10 00:00:00.000",
+		"shipVia": 1,
+		"freight": 155.64,
+		"shipName": "Maison Dewey",
+		"shipAddress": {
+			"street": "Rue Joseph-Bens 532",
+			"city": "Bruxelles",
+			"region": "NULL",
+			"postalCode": "B-1180",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 30,
+				"discount": 0.25
+			},
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 12,
+				"discount": 0.25
+			},
+			{
+				"productID": 27,
+				"unitPrice": 43.9,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10768,
+		"customerID": "AROUT",
+		"employeeID": 3,
+		"orderDate": "1997-12-08 00:00:00.000",
+		"requiredDate": "1998-01-05 00:00:00.000",
+		"shippedDate": "1997-12-15 00:00:00.000",
+		"shipVia": 2,
+		"freight": 146.32,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10759,
+		"customerID": "ANATR",
+		"employeeID": 3,
+		"orderDate": "1997-11-28 00:00:00.000",
+		"requiredDate": "1997-12-26 00:00:00.000",
+		"shippedDate": "1997-12-12 00:00:00.000",
+		"shipVia": 3,
+		"freight": 11.99,
+		"shipName": "Ana Trujillo Emparedados y helados",
+		"shipAddress": {
+			"street": "Avda. de la Constitución 2222",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5021,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 32,
+				"unitPrice": 32,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10769,
+		"customerID": "VAFFE",
+		"employeeID": 3,
+		"orderDate": "1997-12-08 00:00:00.000",
+		"requiredDate": "1998-01-05 00:00:00.000",
+		"shippedDate": "1997-12-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 65.06,
+		"shipName": "Vaffeljernet",
+		"shipAddress": {
+			"street": "Smagsloget 45",
+			"city": "Århus",
+			"region": "NULL",
+			"postalCode": 8200,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 30,
+				"discount": 0.05
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 15,
+				"discount": 0.05
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10772,
+		"customerID": "LEHMS",
+		"employeeID": 3,
+		"orderDate": "1997-12-10 00:00:00.000",
+		"requiredDate": "1998-01-07 00:00:00.000",
+		"shippedDate": "1997-12-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 91.28,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 18,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10758,
+		"customerID": "RICSU",
+		"employeeID": 3,
+		"orderDate": "1997-11-28 00:00:00.000",
+		"requiredDate": "1997-12-26 00:00:00.000",
+		"shippedDate": "1997-12-04 00:00:00.000",
+		"shipVia": 3,
+		"freight": 138.17,
+		"shipName": "Richter Supermarkt",
+		"shipAddress": {
+			"street": "Starenweg 5",
+			"city": "Genève",
+			"region": "NULL",
+			"postalCode": 1204,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 60,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10773,
+		"customerID": "ERNSH",
+		"employeeID": 1,
+		"orderDate": "1997-12-11 00:00:00.000",
+		"requiredDate": "1998-01-08 00:00:00.000",
+		"shippedDate": "1997-12-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 96.43,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 33,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 70,
+				"discount": 0.2
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 7,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10775,
+		"customerID": "THECR",
+		"employeeID": 7,
+		"orderDate": "1997-12-12 00:00:00.000",
+		"requiredDate": "1998-01-09 00:00:00.000",
+		"shippedDate": "1997-12-26 00:00:00.000",
+		"shipVia": 1,
+		"freight": 20.25,
+		"shipName": "The Cracker Box",
+		"shipAddress": {
+			"street": "55 Grizzly Peak Rd.",
+			"city": "Butte",
+			"region": "MT",
+			"postalCode": 59801,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 67,
+				"unitPrice": 14,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10774,
+		"customerID": "FOLKO",
+		"employeeID": 4,
+		"orderDate": "1997-12-11 00:00:00.000",
+		"requiredDate": "1997-12-25 00:00:00.000",
+		"shippedDate": "1997-12-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 48.2,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 2,
+				"discount": 0.25
+			},
+			{
+				"productID": 66,
+				"unitPrice": 17,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10779,
+		"customerID": "MORGK",
+		"employeeID": 3,
+		"orderDate": "1997-12-16 00:00:00.000",
+		"requiredDate": "1998-01-13 00:00:00.000",
+		"shippedDate": "1998-01-14 00:00:00.000",
+		"shipVia": 2,
+		"freight": 58.13,
+		"shipName": "Morgenstern Gesundkost",
+		"shipAddress": {
+			"street": "Heerstr. 22",
+			"city": "Leipzig",
+			"region": "NULL",
+			"postalCode": 4179,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10780,
+		"customerID": "LILAS",
+		"employeeID": 2,
+		"orderDate": "1997-12-16 00:00:00.000",
+		"requiredDate": "1997-12-30 00:00:00.000",
+		"shippedDate": "1997-12-25 00:00:00.000",
+		"shipVia": 1,
+		"freight": 42.13,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10781,
+		"customerID": "WARTH",
+		"employeeID": 2,
+		"orderDate": "1997-12-17 00:00:00.000",
+		"requiredDate": "1998-01-14 00:00:00.000",
+		"shippedDate": "1997-12-19 00:00:00.000",
+		"shipVia": 3,
+		"freight": 73.16,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 3,
+				"discount": 0.2
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 74,
+				"unitPrice": 10,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10783,
+		"customerID": "HANAR",
+		"employeeID": 4,
+		"orderDate": "1997-12-18 00:00:00.000",
+		"requiredDate": "1998-01-15 00:00:00.000",
+		"shippedDate": "1997-12-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 124.98,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10784,
+		"customerID": "MAGAA",
+		"employeeID": 4,
+		"orderDate": "1997-12-18 00:00:00.000",
+		"requiredDate": "1998-01-15 00:00:00.000",
+		"shippedDate": "1997-12-22 00:00:00.000",
+		"shipVia": 3,
+		"freight": 70.09,
+		"shipName": "Magazzini Alimentari Riuniti",
+		"shipAddress": {
+			"street": "Via Ludovico il Moro 22",
+			"city": "Bergamo",
+			"region": "NULL",
+			"postalCode": 24100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 2,
+				"discount": 0.15
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 30,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10785,
+		"customerID": "GROSR",
+		"employeeID": 1,
+		"orderDate": "1997-12-18 00:00:00.000",
+		"requiredDate": "1998-01-15 00:00:00.000",
+		"shippedDate": "1997-12-24 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.51,
+		"shipName": "GROSELLA-Restaurante",
+		"shipAddress": {
+			"street": "5ª Ave. Los Palos Grandes",
+			"city": "Caracas",
+			"region": "DF",
+			"postalCode": 1081,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10786,
+		"customerID": "QUEEN",
+		"employeeID": 8,
+		"orderDate": "1997-12-19 00:00:00.000",
+		"requiredDate": "1998-01-16 00:00:00.000",
+		"shippedDate": "1997-12-23 00:00:00.000",
+		"shipVia": 1,
+		"freight": 110.87,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 8,
+				"unitPrice": 40,
+				"quantity": 30,
+				"discount": 0.2
+			},
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 15,
+				"discount": 0.2
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 42,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10776,
+		"customerID": "ERNSH",
+		"employeeID": 1,
+		"orderDate": "1997-12-15 00:00:00.000",
+		"requiredDate": "1998-01-12 00:00:00.000",
+		"shippedDate": "1997-12-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 351.53,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 16,
+				"discount": 0.05
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 12,
+				"discount": 0.05
+			},
+			{
+				"productID": 45,
+				"unitPrice": 9.5,
+				"quantity": 27,
+				"discount": 0.05
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 120,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10787,
+		"customerID": "LAMAI",
+		"employeeID": 2,
+		"orderDate": "1997-12-19 00:00:00.000",
+		"requiredDate": "1998-01-02 00:00:00.000",
+		"shippedDate": "1997-12-26 00:00:00.000",
+		"shipVia": 1,
+		"freight": 249.93,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 15,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10791,
+		"customerID": "FRANK",
+		"employeeID": 6,
+		"orderDate": "1997-12-23 00:00:00.000",
+		"requiredDate": "1998-01-20 00:00:00.000",
+		"shippedDate": "1998-01-01 00:00:00.000",
+		"shipVia": 2,
+		"freight": 16.85,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 14,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10792,
+		"customerID": "WOLZA",
+		"employeeID": 1,
+		"orderDate": "1997-12-23 00:00:00.000",
+		"requiredDate": "1998-01-20 00:00:00.000",
+		"shippedDate": "1997-12-31 00:00:00.000",
+		"shipVia": 3,
+		"freight": 23.79,
+		"shipName": "Wolski Zajazd",
+		"shipAddress": {
+			"street": "ul. Filtrowa 68",
+			"city": "Warszawa",
+			"region": "NULL",
+			"postalCode": "01-012",
+			"country": "Poland"
+		},
+		"details": [
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10793,
+		"customerID": "AROUT",
+		"employeeID": 3,
+		"orderDate": "1997-12-24 00:00:00.000",
+		"requiredDate": "1998-01-21 00:00:00.000",
+		"shippedDate": "1998-01-08 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.52,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 8,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10794,
+		"customerID": "QUEDE",
+		"employeeID": 6,
+		"orderDate": "1997-12-24 00:00:00.000",
+		"requiredDate": "1998-01-21 00:00:00.000",
+		"shippedDate": "1998-01-02 00:00:00.000",
+		"shipVia": 1,
+		"freight": 21.49,
+		"shipName": "Que Delícia",
+		"shipAddress": {
+			"street": "Rua da Panificadora 12",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-673",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 15,
+				"discount": 0.2
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 6,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10790,
+		"customerID": "GOURL",
+		"employeeID": 6,
+		"orderDate": "1997-12-22 00:00:00.000",
+		"requiredDate": "1998-01-19 00:00:00.000",
+		"shippedDate": "1997-12-26 00:00:00.000",
+		"shipVia": 1,
+		"freight": 28.23,
+		"shipName": "Gourmet Lanchonetes",
+		"shipAddress": {
+			"street": "Av. Brasil 442",
+			"city": "Campinas",
+			"region": "SP",
+			"postalCode": "04876-786",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 3,
+				"discount": 0.15
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 20,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10796,
+		"customerID": "HILAA",
+		"employeeID": 3,
+		"orderDate": "1997-12-25 00:00:00.000",
+		"requiredDate": "1998-01-22 00:00:00.000",
+		"shippedDate": "1998-01-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 26.52,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 21,
+				"discount": 0.2
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 35,
+				"discount": 0.2
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 24,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10788,
+		"customerID": "QUICK",
+		"employeeID": 1,
+		"orderDate": "1997-12-22 00:00:00.000",
+		"requiredDate": "1998-01-19 00:00:00.000",
+		"shippedDate": "1998-01-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 42.7,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 50,
+				"discount": 0.05
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 40,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10789,
+		"customerID": "FOLIG",
+		"employeeID": 1,
+		"orderDate": "1997-12-22 00:00:00.000",
+		"requiredDate": "1998-01-19 00:00:00.000",
+		"shippedDate": "1997-12-31 00:00:00.000",
+		"shipVia": 2,
+		"freight": 100.6,
+		"shipName": "Folies gourmandes",
+		"shipAddress": {
+			"street": "184 chaussée de Tournai",
+			"city": "Lille",
+			"region": "NULL",
+			"postalCode": 59000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 63,
+				"unitPrice": 43.9,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10800,
+		"customerID": "SEVES",
+		"employeeID": 1,
+		"orderDate": "1997-12-26 00:00:00.000",
+		"requiredDate": "1998-01-23 00:00:00.000",
+		"shippedDate": "1998-01-05 00:00:00.000",
+		"shipVia": 3,
+		"freight": 137.44,
+		"shipName": "Seven Seas Imports",
+		"shipAddress": {
+			"street": "90 Wadhurst Rd.",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "OX15 4NB",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 50,
+				"discount": 0.1
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 10,
+				"discount": 0.1
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 7,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10801,
+		"customerID": "BOLID",
+		"employeeID": 4,
+		"orderDate": "1997-12-29 00:00:00.000",
+		"requiredDate": "1998-01-26 00:00:00.000",
+		"shippedDate": "1997-12-31 00:00:00.000",
+		"shipVia": 2,
+		"freight": 97.09,
+		"shipName": "Bólido Comidas preparadas",
+		"shipAddress": {
+			"street": "C/ Araquil 67",
+			"city": "Madrid",
+			"region": "NULL",
+			"postalCode": 28023,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 40,
+				"discount": 0.25
+			},
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 20,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10795,
+		"customerID": "ERNSH",
+		"employeeID": 8,
+		"orderDate": "1997-12-24 00:00:00.000",
+		"requiredDate": "1998-01-21 00:00:00.000",
+		"shippedDate": "1998-01-20 00:00:00.000",
+		"shipVia": 2,
+		"freight": 126.66,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 65,
+				"discount": 0
+			},
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 35,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10798,
+		"customerID": "ISLAT",
+		"employeeID": 2,
+		"orderDate": "1997-12-26 00:00:00.000",
+		"requiredDate": "1998-01-23 00:00:00.000",
+		"shippedDate": "1998-01-05 00:00:00.000",
+		"shipVia": 1,
+		"freight": 2.33,
+		"shipName": "Island Trading",
+		"shipAddress": {
+			"street": "Garden House Crowther Way",
+			"city": "Cowes",
+			"region": "Isle of Wight",
+			"postalCode": "PO31 7PJ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10799,
+		"customerID": "KOENE",
+		"employeeID": 9,
+		"orderDate": "1997-12-26 00:00:00.000",
+		"requiredDate": "1998-02-06 00:00:00.000",
+		"shippedDate": "1998-01-05 00:00:00.000",
+		"shipVia": 3,
+		"freight": 30.76,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 20,
+				"discount": 0.15
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 20,
+				"discount": 0.15
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10805,
+		"customerID": "THEBI",
+		"employeeID": 2,
+		"orderDate": "1997-12-30 00:00:00.000",
+		"requiredDate": "1998-01-27 00:00:00.000",
+		"shippedDate": "1998-01-09 00:00:00.000",
+		"shipVia": 3,
+		"freight": 237.34,
+		"shipName": "The Big Cheese",
+		"shipAddress": {
+			"street": "89 Jefferson Way Suite 2",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97201,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 34,
+				"unitPrice": 14,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10802,
+		"customerID": "SIMOB",
+		"employeeID": 4,
+		"orderDate": "1997-12-29 00:00:00.000",
+		"requiredDate": "1998-01-26 00:00:00.000",
+		"shippedDate": "1998-01-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 257.26,
+		"shipName": "Simons bistro",
+		"shipAddress": {
+			"street": "Vinbæltet 34",
+			"city": "Kobenhavn",
+			"region": "NULL",
+			"postalCode": 1734,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 25,
+				"discount": 0.25
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 30,
+				"discount": 0.25
+			},
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 60,
+				"discount": 0.25
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 5,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10803,
+		"customerID": "WELLI",
+		"employeeID": 4,
+		"orderDate": "1997-12-30 00:00:00.000",
+		"requiredDate": "1998-01-27 00:00:00.000",
+		"shippedDate": "1998-01-06 00:00:00.000",
+		"shipVia": 1,
+		"freight": 55.23,
+		"shipName": "Wellington Importadora",
+		"shipAddress": {
+			"street": "Rua do Mercado 12",
+			"city": "Resende",
+			"region": "SP",
+			"postalCode": "08737-363",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 24,
+				"discount": 0.05
+			},
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 15,
+				"discount": 0.05
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 15,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10808,
+		"customerID": "OLDWO",
+		"employeeID": 2,
+		"orderDate": "1998-01-01 00:00:00.000",
+		"requiredDate": "1998-01-29 00:00:00.000",
+		"shippedDate": "1998-01-09 00:00:00.000",
+		"shipVia": 3,
+		"freight": 45.53,
+		"shipName": "Old World Delicatessen",
+		"shipAddress": {
+			"street": "2743 Bering St.",
+			"city": "Anchorage",
+			"region": "AK",
+			"postalCode": 99508,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 20,
+				"discount": 0.15
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 50,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10810,
+		"customerID": "LAUGB",
+		"employeeID": 2,
+		"orderDate": "1998-01-01 00:00:00.000",
+		"requiredDate": "1998-01-29 00:00:00.000",
+		"shippedDate": "1998-01-07 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.33,
+		"shipName": "Laughing Bacchus Wine Cellars",
+		"shipAddress": {
+			"street": "2319 Elm St.",
+			"city": "Vancouver",
+			"region": "BC",
+			"postalCode": "V3F 2K1",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 7,
+				"discount": 0
+			},
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10811,
+		"customerID": "LINOD",
+		"employeeID": 8,
+		"orderDate": "1998-01-02 00:00:00.000",
+		"requiredDate": "1998-01-30 00:00:00.000",
+		"shippedDate": "1998-01-08 00:00:00.000",
+		"shipVia": 1,
+		"freight": 31.22,
+		"shipName": "LINO-Delicateses",
+		"shipAddress": {
+			"street": "Ave. 5 de Mayo Porlamar",
+			"city": "I. de Margarita",
+			"region": "Nueva Esparta",
+			"postalCode": 4980,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10804,
+		"customerID": "SEVES",
+		"employeeID": 6,
+		"orderDate": "1997-12-30 00:00:00.000",
+		"requiredDate": "1998-01-27 00:00:00.000",
+		"shippedDate": "1998-01-07 00:00:00.000",
+		"shipVia": 2,
+		"freight": 27.33,
+		"shipName": "Seven Seas Imports",
+		"shipAddress": {
+			"street": "90 Wadhurst Rd.",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "OX15 4NB",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 36,
+				"discount": 0
+			},
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 20,
+				"quantity": 4,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10814,
+		"customerID": "VICTE",
+		"employeeID": 3,
+		"orderDate": "1998-01-05 00:00:00.000",
+		"requiredDate": "1998-02-02 00:00:00.000",
+		"shippedDate": "1998-01-14 00:00:00.000",
+		"shipVia": 3,
+		"freight": 130.94,
+		"shipName": "Victuailles en stock",
+		"shipAddress": {
+			"street": "2 rue du Commerce",
+			"city": "Lyon",
+			"region": "NULL",
+			"postalCode": 69004,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 20,
+				"discount": 0.15
+			},
+			{
+				"productID": 48,
+				"unitPrice": 12.75,
+				"quantity": 8,
+				"discount": 0.15
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 30,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10812,
+		"customerID": "REGGC",
+		"employeeID": 5,
+		"orderDate": "1998-01-02 00:00:00.000",
+		"requiredDate": "1998-01-30 00:00:00.000",
+		"shippedDate": "1998-01-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 59.78,
+		"shipName": "Reggiani Caseifici",
+		"shipAddress": {
+			"street": "Strada Provinciale 124",
+			"city": "Reggio Emilia",
+			"region": "NULL",
+			"postalCode": 42100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 16,
+				"discount": 0.1
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 40,
+				"discount": 0.1
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10817,
+		"customerID": "KOENE",
+		"employeeID": 3,
+		"orderDate": "1998-01-06 00:00:00.000",
+		"requiredDate": "1998-01-20 00:00:00.000",
+		"shippedDate": "1998-01-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 306.07,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 40,
+				"discount": 0.15
+			},
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 60,
+				"discount": 0.15
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 25,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10806,
+		"customerID": "VICTE",
+		"employeeID": 3,
+		"orderDate": "1997-12-31 00:00:00.000",
+		"requiredDate": "1998-01-28 00:00:00.000",
+		"shippedDate": "1998-01-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 22.11,
+		"shipName": "Victuailles en stock",
+		"shipAddress": {
+			"street": "2 rue du Commerce",
+			"city": "Lyon",
+			"region": "NULL",
+			"postalCode": 69004,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 20,
+				"discount": 0.25
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 74,
+				"unitPrice": 10,
+				"quantity": 15,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10816,
+		"customerID": "GREAL",
+		"employeeID": 4,
+		"orderDate": "1998-01-06 00:00:00.000",
+		"requiredDate": "1998-02-03 00:00:00.000",
+		"shippedDate": "1998-02-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 719.78,
+		"shipName": "Great Lakes Food Market",
+		"shipAddress": {
+			"street": "2732 Baker Blvd.",
+			"city": "Eugene",
+			"region": "OR",
+			"postalCode": 97403,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 30,
+				"discount": 0.05
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10813,
+		"customerID": "RICAR",
+		"employeeID": 1,
+		"orderDate": "1998-01-05 00:00:00.000",
+		"requiredDate": "1998-02-02 00:00:00.000",
+		"shippedDate": "1998-01-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 47.38,
+		"shipName": "Ricardo Adocicados",
+		"shipAddress": {
+			"street": "Av. Copacabana 267",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-890",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 12,
+				"discount": 0.2
+			},
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10818,
+		"customerID": "MAGAA",
+		"employeeID": 7,
+		"orderDate": "1998-01-07 00:00:00.000",
+		"requiredDate": "1998-02-04 00:00:00.000",
+		"shippedDate": "1998-01-12 00:00:00.000",
+		"shipVia": 3,
+		"freight": 65.48,
+		"shipName": "Magazzini Alimentari Riuniti",
+		"shipAddress": {
+			"street": "Via Ludovico il Moro 22",
+			"city": "Bergamo",
+			"region": "NULL",
+			"postalCode": 24100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 32,
+				"unitPrice": 32,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10819,
+		"customerID": "CACTU",
+		"employeeID": 2,
+		"orderDate": "1998-01-07 00:00:00.000",
+		"requiredDate": "1998-02-04 00:00:00.000",
+		"shippedDate": "1998-01-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 19.76,
+		"shipName": "Cactus Comidas para llevar",
+		"shipAddress": {
+			"street": "Cerrito 333",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 7,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10821,
+		"customerID": "SPLIR",
+		"employeeID": 1,
+		"orderDate": "1998-01-08 00:00:00.000",
+		"requiredDate": "1998-02-05 00:00:00.000",
+		"shippedDate": "1998-01-15 00:00:00.000",
+		"shipVia": 1,
+		"freight": 36.68,
+		"shipName": "Split Rail Beer & Ale",
+		"shipAddress": {
+			"street": "P.O. Box 555",
+			"city": "Lander",
+			"region": "WY",
+			"postalCode": 82520,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10822,
+		"customerID": "TRAIH",
+		"employeeID": 6,
+		"orderDate": "1998-01-08 00:00:00.000",
+		"requiredDate": "1998-02-05 00:00:00.000",
+		"shippedDate": "1998-01-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 7,
+		"shipName": "Trail's Head Gourmet Provisioners",
+		"shipAddress": {
+			"street": "722 DaVinci Blvd.",
+			"city": "Kirkland",
+			"region": "WA",
+			"postalCode": 98034,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10823,
+		"customerID": "LILAS",
+		"employeeID": 5,
+		"orderDate": "1998-01-09 00:00:00.000",
+		"requiredDate": "1998-02-06 00:00:00.000",
+		"shippedDate": "1998-01-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 163.97,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 40,
+				"discount": 0.1
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 15,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10824,
+		"customerID": "FOLKO",
+		"employeeID": 8,
+		"orderDate": "1998-01-09 00:00:00.000",
+		"requiredDate": "1998-02-06 00:00:00.000",
+		"shippedDate": "1998-01-30 00:00:00.000",
+		"shipVia": 1,
+		"freight": 1.23,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 9,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10825,
+		"customerID": "DRACD",
+		"employeeID": 1,
+		"orderDate": "1998-01-09 00:00:00.000",
+		"requiredDate": "1998-02-06 00:00:00.000",
+		"shippedDate": "1998-01-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 79.25,
+		"shipName": "Drachenblut Delikatessen",
+		"shipAddress": {
+			"street": "Walserweg 21",
+			"city": "Aachen",
+			"region": "NULL",
+			"postalCode": 52066,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10826,
+		"customerID": "BLONP",
+		"employeeID": 6,
+		"orderDate": "1998-01-12 00:00:00.000",
+		"requiredDate": "1998-02-09 00:00:00.000",
+		"shippedDate": "1998-02-06 00:00:00.000",
+		"shipVia": 1,
+		"freight": 7.09,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10827,
+		"customerID": "BONAP",
+		"employeeID": 1,
+		"orderDate": "1998-01-12 00:00:00.000",
+		"requiredDate": "1998-01-26 00:00:00.000",
+		"shippedDate": "1998-02-06 00:00:00.000",
+		"shipVia": 2,
+		"freight": 63.54,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10828,
+		"customerID": "RANCH",
+		"employeeID": 9,
+		"orderDate": "1998-01-13 00:00:00.000",
+		"requiredDate": "1998-01-27 00:00:00.000",
+		"shippedDate": "1998-02-04 00:00:00.000",
+		"shipVia": 1,
+		"freight": 90.85,
+		"shipName": "Rancho grande",
+		"shipAddress": {
+			"street": "Av. del Libertador 900",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 20,
+				"unitPrice": 81,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 2,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10829,
+		"customerID": "ISLAT",
+		"employeeID": 9,
+		"orderDate": "1998-01-13 00:00:00.000",
+		"requiredDate": "1998-02-10 00:00:00.000",
+		"shippedDate": "1998-01-23 00:00:00.000",
+		"shipVia": 1,
+		"freight": 154.72,
+		"shipName": "Island Trading",
+		"shipAddress": {
+			"street": "Garden House Crowther Way",
+			"city": "Cowes",
+			"region": "Isle of Wight",
+			"postalCode": "PO31 7PJ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 8,
+				"unitPrice": 40,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10830,
+		"customerID": "TRADH",
+		"employeeID": 4,
+		"orderDate": "1998-01-13 00:00:00.000",
+		"requiredDate": "1998-02-24 00:00:00.000",
+		"shippedDate": "1998-01-21 00:00:00.000",
+		"shipVia": 2,
+		"freight": 81.83,
+		"shipName": "Tradiçao Hipermercados",
+		"shipAddress": {
+			"street": "Av. Inês de Castro 414",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05634-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 6,
+				"unitPrice": 25,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 28,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10831,
+		"customerID": "SANTG",
+		"employeeID": 3,
+		"orderDate": "1998-01-14 00:00:00.000",
+		"requiredDate": "1998-02-11 00:00:00.000",
+		"shippedDate": "1998-01-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 72.19,
+		"shipName": "Santé Gourmet",
+		"shipAddress": {
+			"street": "Erling Skakkes gate 78",
+			"city": "Stavern",
+			"region": "NULL",
+			"postalCode": 4110,
+			"country": "Norway"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 9,
+				"discount": 0
+			},
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 8,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10832,
+		"customerID": "LAMAI",
+		"employeeID": 2,
+		"orderDate": "1998-01-14 00:00:00.000",
+		"requiredDate": "1998-02-11 00:00:00.000",
+		"shippedDate": "1998-01-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 43.26,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 3,
+				"discount": 0.2
+			},
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 10,
+				"discount": 0.2
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 16,
+				"discount": 0.2
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10833,
+		"customerID": "OTTIK",
+		"employeeID": 6,
+		"orderDate": "1998-01-15 00:00:00.000",
+		"requiredDate": "1998-02-12 00:00:00.000",
+		"shippedDate": "1998-01-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 71.49,
+		"shipName": "Ottilies Käseladen",
+		"shipAddress": {
+			"street": "Mehrheimerstr. 369",
+			"city": "Köln",
+			"region": "NULL",
+			"postalCode": 50739,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 9,
+				"discount": 0.1
+			},
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 9,
+				"discount": 0.1
+			},
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 20,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10834,
+		"customerID": "TRADH",
+		"employeeID": 1,
+		"orderDate": "1998-01-15 00:00:00.000",
+		"requiredDate": "1998-02-12 00:00:00.000",
+		"shippedDate": "1998-01-19 00:00:00.000",
+		"shipVia": 3,
+		"freight": 29.78,
+		"shipName": "Tradiçao Hipermercados",
+		"shipAddress": {
+			"street": "Av. Inês de Castro 414",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05634-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 8,
+				"discount": 0.05
+			},
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10838,
+		"customerID": "LINOD",
+		"employeeID": 3,
+		"orderDate": "1998-01-19 00:00:00.000",
+		"requiredDate": "1998-02-16 00:00:00.000",
+		"shippedDate": "1998-01-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 59.28,
+		"shipName": "LINO-Delicateses",
+		"shipAddress": {
+			"street": "Ave. 5 de Mayo Porlamar",
+			"city": "I. de Margarita",
+			"region": "Nueva Esparta",
+			"postalCode": 4980,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 4,
+				"discount": 0.25
+			},
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 25,
+				"discount": 0.25
+			},
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 50,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10839,
+		"customerID": "TRADH",
+		"employeeID": 3,
+		"orderDate": "1998-01-19 00:00:00.000",
+		"requiredDate": "1998-02-16 00:00:00.000",
+		"shippedDate": "1998-01-22 00:00:00.000",
+		"shipVia": 3,
+		"freight": 35.43,
+		"shipName": "Tradiçao Hipermercados",
+		"shipAddress": {
+			"street": "Av. Inês de Castro 414",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05634-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 15,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10840,
+		"customerID": "LINOD",
+		"employeeID": 4,
+		"orderDate": "1998-01-19 00:00:00.000",
+		"requiredDate": "1998-03-02 00:00:00.000",
+		"shippedDate": "1998-02-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 2.71,
+		"shipName": "LINO-Delicateses",
+		"shipAddress": {
+			"street": "Ave. 5 de Mayo Porlamar",
+			"city": "I. de Margarita",
+			"region": "Nueva Esparta",
+			"postalCode": 4980,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 6,
+				"discount": 0.2
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10841,
+		"customerID": "SUPRD",
+		"employeeID": 5,
+		"orderDate": "1998-01-20 00:00:00.000",
+		"requiredDate": "1998-02-17 00:00:00.000",
+		"shippedDate": "1998-01-29 00:00:00.000",
+		"shipVia": 2,
+		"freight": 424.3,
+		"shipName": "Suprêmes délices",
+		"shipAddress": {
+			"street": "Boulevard Tirou 255",
+			"city": "Charleroi",
+			"region": "NULL",
+			"postalCode": "B-6000",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 16,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10842,
+		"customerID": "TORTU",
+		"employeeID": 1,
+		"orderDate": "1998-01-20 00:00:00.000",
+		"requiredDate": "1998-02-17 00:00:00.000",
+		"shippedDate": "1998-01-29 00:00:00.000",
+		"shipVia": 3,
+		"freight": 54.42,
+		"shipName": "Tortuga Restaurante",
+		"shipAddress": {
+			"street": "Avda. Azteca 123",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10836,
+		"customerID": "ERNSH",
+		"employeeID": 7,
+		"orderDate": "1998-01-16 00:00:00.000",
+		"requiredDate": "1998-02-13 00:00:00.000",
+		"shippedDate": "1998-01-21 00:00:00.000",
+		"shipVia": 1,
+		"freight": 411.88,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 52,
+				"discount": 0
+			},
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10835,
+		"customerID": "ALFKI",
+		"employeeID": 1,
+		"orderDate": "1998-01-15 00:00:00.000",
+		"requiredDate": "1998-02-12 00:00:00.000",
+		"shippedDate": "1998-01-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 69.53,
+		"shipName": "Alfred's Futterkiste",
+		"shipAddress": {
+			"street": "Obere Str. 57",
+			"city": "Berlin",
+			"region": "NULL",
+			"postalCode": 12209,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 2,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10837,
+		"customerID": "BERGS",
+		"employeeID": 9,
+		"orderDate": "1998-01-16 00:00:00.000",
+		"requiredDate": "1998-02-13 00:00:00.000",
+		"shippedDate": "1998-01-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 13.32,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 21,
+				"discount": 0.25
+			},
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 40,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10845,
+		"customerID": "QUICK",
+		"employeeID": 8,
+		"orderDate": "1998-01-21 00:00:00.000",
+		"requiredDate": "1998-02-04 00:00:00.000",
+		"shippedDate": "1998-01-30 00:00:00.000",
+		"shipVia": 1,
+		"freight": 212.98,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 70,
+				"discount": 0.1
+			},
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 25,
+				"discount": 0.1
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 42,
+				"discount": 0.1
+			},
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 60,
+				"discount": 0.1
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 48,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10848,
+		"customerID": "CONSH",
+		"employeeID": 7,
+		"orderDate": "1998-01-23 00:00:00.000",
+		"requiredDate": "1998-02-20 00:00:00.000",
+		"shippedDate": "1998-01-29 00:00:00.000",
+		"shipVia": 2,
+		"freight": 38.24,
+		"shipName": "Consolidated Holdings",
+		"shipAddress": {
+			"street": "Berkeley Gardens 12  Brewery",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "WX1 6LT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 9,
+				"unitPrice": 97,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 5,
+				"unitPrice": 21.35,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10850,
+		"customerID": "VICTE",
+		"employeeID": 1,
+		"orderDate": "1998-01-23 00:00:00.000",
+		"requiredDate": "1998-03-06 00:00:00.000",
+		"shippedDate": "1998-01-30 00:00:00.000",
+		"shipVia": 1,
+		"freight": 49.19,
+		"shipName": "Victuailles en stock",
+		"shipAddress": {
+			"street": "2 rue du Commerce",
+			"city": "Lyon",
+			"region": "NULL",
+			"postalCode": 69004,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 20,
+				"discount": 0.15
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 4,
+				"discount": 0.15
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 30,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10847,
+		"customerID": "SAVEA",
+		"employeeID": 4,
+		"orderDate": "1998-01-22 00:00:00.000",
+		"requiredDate": "1998-02-05 00:00:00.000",
+		"shippedDate": "1998-02-10 00:00:00.000",
+		"shipVia": 3,
+		"freight": 487.57,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 80,
+				"discount": 0.2
+			},
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 12,
+				"discount": 0.2
+			},
+			{
+				"productID": 37,
+				"unitPrice": 26,
+				"quantity": 60,
+				"discount": 0.2
+			},
+			{
+				"productID": 45,
+				"unitPrice": 9.5,
+				"quantity": 36,
+				"discount": 0.2
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 45,
+				"discount": 0.2
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 55,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10846,
+		"customerID": "SUPRD",
+		"employeeID": 2,
+		"orderDate": "1998-01-22 00:00:00.000",
+		"requiredDate": "1998-03-05 00:00:00.000",
+		"shippedDate": "1998-01-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 56.46,
+		"shipName": "Suprêmes délices",
+		"shipAddress": {
+			"street": "Boulevard Tirou 255",
+			"city": "Charleroi",
+			"region": "NULL",
+			"postalCode": "B-6000",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 74,
+				"unitPrice": 10,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10849,
+		"customerID": "KOENE",
+		"employeeID": 9,
+		"orderDate": "1998-01-23 00:00:00.000",
+		"requiredDate": "1998-02-20 00:00:00.000",
+		"shippedDate": "1998-01-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 0.56,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 3,
+				"unitPrice": 10,
+				"quantity": 49,
+				"discount": 0
+			},
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 18,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10851,
+		"customerID": "RICAR",
+		"employeeID": 5,
+		"orderDate": "1998-01-26 00:00:00.000",
+		"requiredDate": "1998-02-23 00:00:00.000",
+		"shippedDate": "1998-02-02 00:00:00.000",
+		"shipVia": 1,
+		"freight": 160.55,
+		"shipName": "Ricardo Adocicados",
+		"shipAddress": {
+			"street": "Av. Copacabana 267",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-890",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 10,
+				"discount": 0.05
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 10,
+				"discount": 0.05
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 42,
+				"discount": 0.05
+			},
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 5,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10852,
+		"customerID": "RATTC",
+		"employeeID": 8,
+		"orderDate": "1998-01-26 00:00:00.000",
+		"requiredDate": "1998-02-09 00:00:00.000",
+		"shippedDate": "1998-01-30 00:00:00.000",
+		"shipVia": 1,
+		"freight": 174.05,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10854,
+		"customerID": "ERNSH",
+		"employeeID": 3,
+		"orderDate": "1998-01-27 00:00:00.000",
+		"requiredDate": "1998-02-24 00:00:00.000",
+		"shippedDate": "1998-02-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 100.22,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 100,
+				"discount": 0.15
+			},
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 65,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10855,
+		"customerID": "OLDWO",
+		"employeeID": 3,
+		"orderDate": "1998-01-27 00:00:00.000",
+		"requiredDate": "1998-02-24 00:00:00.000",
+		"shippedDate": "1998-02-04 00:00:00.000",
+		"shipVia": 1,
+		"freight": 170.97,
+		"shipName": "Old World Delicatessen",
+		"shipAddress": {
+			"street": "2743 Bering St.",
+			"city": "Anchorage",
+			"region": "AK",
+			"postalCode": 99508,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 15,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10856,
+		"customerID": "ANTON",
+		"employeeID": 3,
+		"orderDate": "1998-01-28 00:00:00.000",
+		"requiredDate": "1998-02-25 00:00:00.000",
+		"shippedDate": "1998-02-10 00:00:00.000",
+		"shipVia": 2,
+		"freight": 58.43,
+		"shipName": "Antonio Moreno Taquería",
+		"shipAddress": {
+			"street": "Mataderos  2312",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5023,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10857,
+		"customerID": "BERGS",
+		"employeeID": 8,
+		"orderDate": "1998-01-28 00:00:00.000",
+		"requiredDate": "1998-02-25 00:00:00.000",
+		"shippedDate": "1998-02-06 00:00:00.000",
+		"shipVia": 2,
+		"freight": 188.85,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 3,
+				"unitPrice": 10,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 35,
+				"discount": 0.25
+			},
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 10,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10858,
+		"customerID": "LACOR",
+		"employeeID": 2,
+		"orderDate": "1998-01-29 00:00:00.000",
+		"requiredDate": "1998-02-26 00:00:00.000",
+		"shippedDate": "1998-02-03 00:00:00.000",
+		"shipVia": 1,
+		"freight": 52.51,
+		"shipName": "La corne d'abondance",
+		"shipAddress": {
+			"street": "67 avenue de l'Europe",
+			"city": "Versailles",
+			"region": "NULL",
+			"postalCode": 78000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 27,
+				"unitPrice": 43.9,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 4,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10859,
+		"customerID": "FRANK",
+		"employeeID": 1,
+		"orderDate": "1998-01-29 00:00:00.000",
+		"requiredDate": "1998-02-26 00:00:00.000",
+		"shippedDate": "1998-02-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 76.1,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 40,
+				"discount": 0.25
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 35,
+				"discount": 0.25
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 30,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10860,
+		"customerID": "FRANR",
+		"employeeID": 3,
+		"orderDate": "1998-01-29 00:00:00.000",
+		"requiredDate": "1998-02-26 00:00:00.000",
+		"shippedDate": "1998-02-04 00:00:00.000",
+		"shipVia": 3,
+		"freight": 19.26,
+		"shipName": "France restauration",
+		"shipAddress": {
+			"street": "54 rue Royale",
+			"city": "Nantes",
+			"region": "NULL",
+			"postalCode": 44000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10861,
+		"customerID": "WHITC",
+		"employeeID": 4,
+		"orderDate": "1998-01-30 00:00:00.000",
+		"requiredDate": "1998-02-27 00:00:00.000",
+		"shippedDate": "1998-02-17 00:00:00.000",
+		"shipVia": 2,
+		"freight": 14.93,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 42,
+				"discount": 0
+			},
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10862,
+		"customerID": "LEHMS",
+		"employeeID": 8,
+		"orderDate": "1998-01-30 00:00:00.000",
+		"requiredDate": "1998-03-13 00:00:00.000",
+		"shippedDate": "1998-02-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 53.23,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 8,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10863,
+		"customerID": "HILAA",
+		"employeeID": 4,
+		"orderDate": "1998-02-02 00:00:00.000",
+		"requiredDate": "1998-03-02 00:00:00.000",
+		"shippedDate": "1998-02-17 00:00:00.000",
+		"shipVia": 2,
+		"freight": 30.26,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0.15
+			},
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 12,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10864,
+		"customerID": "AROUT",
+		"employeeID": 4,
+		"orderDate": "1998-02-02 00:00:00.000",
+		"requiredDate": "1998-03-02 00:00:00.000",
+		"shippedDate": "1998-02-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.04,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 67,
+				"unitPrice": 14,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10865,
+		"customerID": "QUICK",
+		"employeeID": 2,
+		"orderDate": "1998-02-02 00:00:00.000",
+		"requiredDate": "1998-02-16 00:00:00.000",
+		"shippedDate": "1998-02-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 348.14,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 60,
+				"discount": 0.05
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 80,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10869,
+		"customerID": "SEVES",
+		"employeeID": 5,
+		"orderDate": "1998-02-04 00:00:00.000",
+		"requiredDate": "1998-03-04 00:00:00.000",
+		"shippedDate": "1998-02-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 143.28,
+		"shipName": "Seven Seas Imports",
+		"shipAddress": {
+			"street": "90 Wadhurst Rd.",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "OX15 4NB",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10870,
+		"customerID": "WOLZA",
+		"employeeID": 5,
+		"orderDate": "1998-02-04 00:00:00.000",
+		"requiredDate": "1998-03-04 00:00:00.000",
+		"shippedDate": "1998-02-13 00:00:00.000",
+		"shipVia": 3,
+		"freight": 12.04,
+		"shipName": "Wolski Zajazd",
+		"shipAddress": {
+			"street": "ul. Filtrowa 68",
+			"city": "Warszawa",
+			"region": "NULL",
+			"postalCode": "01-012",
+			"country": "Poland"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 2,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10871,
+		"customerID": "BONAP",
+		"employeeID": 9,
+		"orderDate": "1998-02-05 00:00:00.000",
+		"requiredDate": "1998-03-05 00:00:00.000",
+		"shippedDate": "1998-02-10 00:00:00.000",
+		"shipVia": 2,
+		"freight": 112.27,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 6,
+				"unitPrice": 25,
+				"quantity": 50,
+				"discount": 0.05
+			},
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 12,
+				"discount": 0.05
+			},
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 16,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10872,
+		"customerID": "GODOS",
+		"employeeID": 5,
+		"orderDate": "1998-02-05 00:00:00.000",
+		"requiredDate": "1998-03-05 00:00:00.000",
+		"shippedDate": "1998-02-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 175.32,
+		"shipName": "Godos Cocina Típica",
+		"shipAddress": {
+			"street": "C/ Romero 33",
+			"city": "Sevilla",
+			"region": "NULL",
+			"postalCode": 41101,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 10,
+				"discount": 0.05
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 21,
+				"discount": 0.05
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 15,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10873,
+		"customerID": "WILMK",
+		"employeeID": 4,
+		"orderDate": "1998-02-06 00:00:00.000",
+		"requiredDate": "1998-03-06 00:00:00.000",
+		"shippedDate": "1998-02-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 0.82,
+		"shipName": "Wilman Kala",
+		"shipAddress": {
+			"street": "Keskuskatu 45",
+			"city": "Helsinki",
+			"region": "NULL",
+			"postalCode": 21240,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10866,
+		"customerID": "BERGS",
+		"employeeID": 5,
+		"orderDate": "1998-02-03 00:00:00.000",
+		"requiredDate": "1998-03-03 00:00:00.000",
+		"shippedDate": "1998-02-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 109.11,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 21,
+				"discount": 0.25
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 6,
+				"discount": 0.25
+			},
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 40,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10876,
+		"customerID": "BONAP",
+		"employeeID": 7,
+		"orderDate": "1998-02-09 00:00:00.000",
+		"requiredDate": "1998-03-09 00:00:00.000",
+		"shippedDate": "1998-02-12 00:00:00.000",
+		"shipVia": 3,
+		"freight": 60.42,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10877,
+		"customerID": "RICAR",
+		"employeeID": 1,
+		"orderDate": "1998-02-09 00:00:00.000",
+		"requiredDate": "1998-03-09 00:00:00.000",
+		"shippedDate": "1998-02-19 00:00:00.000",
+		"shipVia": 1,
+		"freight": 38.06,
+		"shipName": "Ricardo Adocicados",
+		"shipAddress": {
+			"street": "Av. Copacabana 267",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-890",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 30,
+				"discount": 0.25
+			},
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10868,
+		"customerID": "QUEEN",
+		"employeeID": 7,
+		"orderDate": "1998-02-04 00:00:00.000",
+		"requiredDate": "1998-03-04 00:00:00.000",
+		"shippedDate": "1998-02-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 191.27,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 20,
+				"quantity": 42,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10875,
+		"customerID": "BERGS",
+		"employeeID": 4,
+		"orderDate": "1998-02-06 00:00:00.000",
+		"requiredDate": "1998-03-06 00:00:00.000",
+		"shippedDate": "1998-03-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 32.37,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 20,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 21,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10882,
+		"customerID": "SAVEA",
+		"employeeID": 4,
+		"orderDate": "1998-02-11 00:00:00.000",
+		"requiredDate": "1998-03-11 00:00:00.000",
+		"shippedDate": "1998-02-20 00:00:00.000",
+		"shipVia": 3,
+		"freight": 23.1,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 20,
+				"quantity": 20,
+				"discount": 0.15
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 32,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10884,
+		"customerID": "LETSS",
+		"employeeID": 4,
+		"orderDate": "1998-02-12 00:00:00.000",
+		"requiredDate": "1998-03-12 00:00:00.000",
+		"shippedDate": "1998-02-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 90.97,
+		"shipName": "Let's Stop N Shop",
+		"shipAddress": {
+			"street": "87 Polk St. Suite 5",
+			"city": "San Francisco",
+			"region": "CA",
+			"postalCode": 94117,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 21,
+				"discount": 0.05
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 12,
+				"discount": 0.05
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 40,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10885,
+		"customerID": "SUPRD",
+		"employeeID": 6,
+		"orderDate": "1998-02-12 00:00:00.000",
+		"requiredDate": "1998-03-12 00:00:00.000",
+		"shippedDate": "1998-02-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 5.64,
+		"shipName": "Suprêmes délices",
+		"shipAddress": {
+			"street": "Boulevard Tirou 255",
+			"city": "Charleroi",
+			"region": "NULL",
+			"postalCode": "B-6000",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10886,
+		"customerID": "HANAR",
+		"employeeID": 1,
+		"orderDate": "1998-02-13 00:00:00.000",
+		"requiredDate": "1998-03-13 00:00:00.000",
+		"shippedDate": "1998-03-02 00:00:00.000",
+		"shipVia": 1,
+		"freight": 4.99,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 70,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10880,
+		"customerID": "FOLKO",
+		"employeeID": 7,
+		"orderDate": "1998-02-10 00:00:00.000",
+		"requiredDate": "1998-03-24 00:00:00.000",
+		"shippedDate": "1998-02-18 00:00:00.000",
+		"shipVia": 1,
+		"freight": 88.01,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 30,
+				"discount": 0.2
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 30,
+				"discount": 0.2
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 50,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10879,
+		"customerID": "WILMK",
+		"employeeID": 3,
+		"orderDate": "1998-02-10 00:00:00.000",
+		"requiredDate": "1998-03-10 00:00:00.000",
+		"shippedDate": "1998-02-12 00:00:00.000",
+		"shipVia": 3,
+		"freight": 8.5,
+		"shipName": "Wilman Kala",
+		"shipAddress": {
+			"street": "Keskuskatu 45",
+			"city": "Helsinki",
+			"region": "NULL",
+			"postalCode": 21240,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10889,
+		"customerID": "RATTC",
+		"employeeID": 9,
+		"orderDate": "1998-02-16 00:00:00.000",
+		"requiredDate": "1998-03-16 00:00:00.000",
+		"shippedDate": "1998-02-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 280.61,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10890,
+		"customerID": "DUMON",
+		"employeeID": 7,
+		"orderDate": "1998-02-16 00:00:00.000",
+		"requiredDate": "1998-03-16 00:00:00.000",
+		"shippedDate": "1998-02-18 00:00:00.000",
+		"shipVia": 1,
+		"freight": 32.76,
+		"shipName": "Du monde entier",
+		"shipAddress": {
+			"street": "67 rue des Cinquante Otages",
+			"city": "Nantes",
+			"region": "NULL",
+			"postalCode": 44000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 34,
+				"unitPrice": 14,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 14,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10893,
+		"customerID": "KOENE",
+		"employeeID": 9,
+		"orderDate": "1998-02-18 00:00:00.000",
+		"requiredDate": "1998-03-18 00:00:00.000",
+		"shippedDate": "1998-02-20 00:00:00.000",
+		"shipVia": 2,
+		"freight": 77.78,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 8,
+				"unitPrice": 40,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10894,
+		"customerID": "SAVEA",
+		"employeeID": 1,
+		"orderDate": "1998-02-18 00:00:00.000",
+		"requiredDate": "1998-03-18 00:00:00.000",
+		"shippedDate": "1998-02-20 00:00:00.000",
+		"shipVia": 1,
+		"freight": 116.13,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 28,
+				"discount": 0.05
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 50,
+				"discount": 0.05
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 120,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10888,
+		"customerID": "GODOS",
+		"employeeID": 1,
+		"orderDate": "1998-02-16 00:00:00.000",
+		"requiredDate": "1998-03-16 00:00:00.000",
+		"shippedDate": "1998-02-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 51.87,
+		"shipName": "Godos Cocina Típica",
+		"shipAddress": {
+			"street": "C/ Romero 33",
+			"city": "Sevilla",
+			"region": "NULL",
+			"postalCode": 41101,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 18,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10898,
+		"customerID": "OCEAN",
+		"employeeID": 4,
+		"orderDate": "1998-02-20 00:00:00.000",
+		"requiredDate": "1998-03-20 00:00:00.000",
+		"shippedDate": "1998-03-06 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.27,
+		"shipName": "Océano Atlántico Ltda.",
+		"shipAddress": {
+			"street": "Ing. Gustavo Moncada 8585 Piso 20-A",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10899,
+		"customerID": "LILAS",
+		"employeeID": 5,
+		"orderDate": "1998-02-20 00:00:00.000",
+		"requiredDate": "1998-03-20 00:00:00.000",
+		"shippedDate": "1998-02-26 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.21,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 8,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10901,
+		"customerID": "HILAA",
+		"employeeID": 4,
+		"orderDate": "1998-02-23 00:00:00.000",
+		"requiredDate": "1998-03-23 00:00:00.000",
+		"shippedDate": "1998-02-26 00:00:00.000",
+		"shipVia": 1,
+		"freight": 62.09,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10902,
+		"customerID": "FOLKO",
+		"employeeID": 1,
+		"orderDate": "1998-02-23 00:00:00.000",
+		"requiredDate": "1998-03-23 00:00:00.000",
+		"shippedDate": "1998-03-03 00:00:00.000",
+		"shipVia": 1,
+		"freight": 44.15,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 30,
+				"discount": 0.15
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 6,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10903,
+		"customerID": "HANAR",
+		"employeeID": 3,
+		"orderDate": "1998-02-24 00:00:00.000",
+		"requiredDate": "1998-03-24 00:00:00.000",
+		"shippedDate": "1998-03-04 00:00:00.000",
+		"shipVia": 3,
+		"freight": 36.71,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10896,
+		"customerID": "MAISD",
+		"employeeID": 7,
+		"orderDate": "1998-02-19 00:00:00.000",
+		"requiredDate": "1998-03-19 00:00:00.000",
+		"shippedDate": "1998-02-27 00:00:00.000",
+		"shipVia": 3,
+		"freight": 32.45,
+		"shipName": "Maison Dewey",
+		"shipAddress": {
+			"street": "Rue Joseph-Bens 532",
+			"city": "Bruxelles",
+			"region": "NULL",
+			"postalCode": "B-1180",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 45,
+				"unitPrice": 9.5,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 16,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10904,
+		"customerID": "WHITC",
+		"employeeID": 3,
+		"orderDate": "1998-02-24 00:00:00.000",
+		"requiredDate": "1998-03-24 00:00:00.000",
+		"shippedDate": "1998-02-27 00:00:00.000",
+		"shipVia": 3,
+		"freight": 162.95,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10895,
+		"customerID": "ERNSH",
+		"employeeID": 3,
+		"orderDate": "1998-02-18 00:00:00.000",
+		"requiredDate": "1998-03-18 00:00:00.000",
+		"shippedDate": "1998-02-23 00:00:00.000",
+		"shipVia": 1,
+		"freight": 162.75,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 91,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 100,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 110,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 45,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10897,
+		"customerID": "HUNGO",
+		"employeeID": 3,
+		"orderDate": "1998-02-19 00:00:00.000",
+		"requiredDate": "1998-03-19 00:00:00.000",
+		"shippedDate": "1998-02-25 00:00:00.000",
+		"shipVia": 2,
+		"freight": 603.54,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 80,
+				"discount": 0
+			},
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 36,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10909,
+		"customerID": "SANTG",
+		"employeeID": 1,
+		"orderDate": "1998-02-26 00:00:00.000",
+		"requiredDate": "1998-03-26 00:00:00.000",
+		"shippedDate": "1998-03-10 00:00:00.000",
+		"shipVia": 2,
+		"freight": 53.05,
+		"shipName": "Santé Gourmet",
+		"shipAddress": {
+			"street": "Erling Skakkes gate 78",
+			"city": "Stavern",
+			"region": "NULL",
+			"postalCode": 4110,
+			"country": "Norway"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10910,
+		"customerID": "WILMK",
+		"employeeID": 1,
+		"orderDate": "1998-02-26 00:00:00.000",
+		"requiredDate": "1998-03-26 00:00:00.000",
+		"shippedDate": "1998-03-04 00:00:00.000",
+		"shipVia": 3,
+		"freight": 38.11,
+		"shipName": "Wilman Kala",
+		"shipAddress": {
+			"street": "Keskuskatu 45",
+			"city": "Helsinki",
+			"region": "NULL",
+			"postalCode": 21240,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 20,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10911,
+		"customerID": "GODOS",
+		"employeeID": 3,
+		"orderDate": "1998-02-26 00:00:00.000",
+		"requiredDate": "1998-03-26 00:00:00.000",
+		"shippedDate": "1998-03-05 00:00:00.000",
+		"shipVia": 1,
+		"freight": 38.19,
+		"shipName": "Godos Cocina Típica",
+		"shipAddress": {
+			"street": "C/ Romero 33",
+			"city": "Sevilla",
+			"region": "NULL",
+			"postalCode": 41101,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 67,
+				"unitPrice": 14,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10912,
+		"customerID": "HUNGO",
+		"employeeID": 2,
+		"orderDate": "1998-02-26 00:00:00.000",
+		"requiredDate": "1998-03-26 00:00:00.000",
+		"shippedDate": "1998-03-18 00:00:00.000",
+		"shipVia": 2,
+		"freight": 580.91,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 40,
+				"discount": 0.25
+			},
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 60,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10913,
+		"customerID": "QUEEN",
+		"employeeID": 4,
+		"orderDate": "1998-02-26 00:00:00.000",
+		"requiredDate": "1998-03-26 00:00:00.000",
+		"shippedDate": "1998-03-04 00:00:00.000",
+		"shipVia": 1,
+		"freight": 33.05,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 30,
+				"discount": 0.25
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 40,
+				"discount": 0.25
+			},
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10917,
+		"customerID": "ROMEY",
+		"employeeID": 4,
+		"orderDate": "1998-03-02 00:00:00.000",
+		"requiredDate": "1998-03-30 00:00:00.000",
+		"shippedDate": "1998-03-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 8.29,
+		"shipName": "Romero y tomillo",
+		"shipAddress": {
+			"street": "Gran Vía 1",
+			"city": "Madrid",
+			"region": "NULL",
+			"postalCode": 28001,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 1,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10916,
+		"customerID": "RANCH",
+		"employeeID": 1,
+		"orderDate": "1998-02-27 00:00:00.000",
+		"requiredDate": "1998-03-27 00:00:00.000",
+		"shippedDate": "1998-03-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 63.77,
+		"shipName": "Rancho grande",
+		"shipAddress": {
+			"street": "Av. del Libertador 900",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 32,
+				"unitPrice": 32,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10918,
+		"customerID": "BOTTM",
+		"employeeID": 3,
+		"orderDate": "1998-03-02 00:00:00.000",
+		"requiredDate": "1998-03-30 00:00:00.000",
+		"shippedDate": "1998-03-11 00:00:00.000",
+		"shipVia": 3,
+		"freight": 48.83,
+		"shipName": "Bottom-Dollar Markets",
+		"shipAddress": {
+			"street": "23 Tsawassen Blvd.",
+			"city": "Tsawassen",
+			"region": "BC",
+			"postalCode": "T2F 8M4",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 60,
+				"discount": 0.25
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 25,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10919,
+		"customerID": "LINOD",
+		"employeeID": 2,
+		"orderDate": "1998-03-02 00:00:00.000",
+		"requiredDate": "1998-03-30 00:00:00.000",
+		"shippedDate": "1998-03-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 19.8,
+		"shipName": "LINO-Delicateses",
+		"shipAddress": {
+			"street": "Ave. 5 de Mayo Porlamar",
+			"city": "I. de Margarita",
+			"region": "Nueva Esparta",
+			"postalCode": 4980,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10908,
+		"customerID": "REGGC",
+		"employeeID": 4,
+		"orderDate": "1998-02-26 00:00:00.000",
+		"requiredDate": "1998-03-26 00:00:00.000",
+		"shippedDate": "1998-03-06 00:00:00.000",
+		"shipVia": 2,
+		"freight": 32.96,
+		"shipName": "Reggiani Caseifici",
+		"shipAddress": {
+			"street": "Strada Provinciale 124",
+			"city": "Reggio Emilia",
+			"region": "NULL",
+			"postalCode": 42100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 14,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10921,
+		"customerID": "VAFFE",
+		"employeeID": 1,
+		"orderDate": "1998-03-03 00:00:00.000",
+		"requiredDate": "1998-04-14 00:00:00.000",
+		"shippedDate": "1998-03-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 176.48,
+		"shipName": "Vaffeljernet",
+		"shipAddress": {
+			"street": "Smagsloget 45",
+			"city": "Århus",
+			"region": "NULL",
+			"postalCode": 8200,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 63,
+				"unitPrice": 43.9,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10915,
+		"customerID": "TORTU",
+		"employeeID": 2,
+		"orderDate": "1998-02-27 00:00:00.000",
+		"requiredDate": "1998-03-27 00:00:00.000",
+		"shippedDate": "1998-03-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.51,
+		"shipName": "Tortuga Restaurante",
+		"shipAddress": {
+			"street": "Avda. Azteca 123",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10925,
+		"customerID": "HANAR",
+		"employeeID": 3,
+		"orderDate": "1998-03-04 00:00:00.000",
+		"requiredDate": "1998-04-01 00:00:00.000",
+		"shippedDate": "1998-03-13 00:00:00.000",
+		"shipVia": 1,
+		"freight": 2.27,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 25,
+				"discount": 0.15
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 12,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10926,
+		"customerID": "ANATR",
+		"employeeID": 4,
+		"orderDate": "1998-03-04 00:00:00.000",
+		"requiredDate": "1998-04-01 00:00:00.000",
+		"shippedDate": "1998-03-11 00:00:00.000",
+		"shipVia": 3,
+		"freight": 39.92,
+		"shipName": "Ana Trujillo Emparedados y helados",
+		"shipAddress": {
+			"street": "Avda. de la Constitución 2222",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5021,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 7,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10927,
+		"customerID": "LACOR",
+		"employeeID": 4,
+		"orderDate": "1998-03-05 00:00:00.000",
+		"requiredDate": "1998-04-02 00:00:00.000",
+		"shippedDate": "1998-04-08 00:00:00.000",
+		"shipVia": 1,
+		"freight": 19.79,
+		"shipName": "La corne d'abondance",
+		"shipAddress": {
+			"street": "67 avenue de l'Europe",
+			"city": "Versailles",
+			"region": "NULL",
+			"postalCode": 78000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 20,
+				"unitPrice": 81,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10928,
+		"customerID": "GALED",
+		"employeeID": 1,
+		"orderDate": "1998-03-05 00:00:00.000",
+		"requiredDate": "1998-04-02 00:00:00.000",
+		"shippedDate": "1998-03-18 00:00:00.000",
+		"shipVia": 1,
+		"freight": 1.36,
+		"shipName": "Galería del gastronómo",
+		"shipAddress": {
+			"street": "Rambla de Cataluña 23",
+			"city": "Barcelona",
+			"region": "NULL",
+			"postalCode": 8022,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10929,
+		"customerID": "FRANK",
+		"employeeID": 6,
+		"orderDate": "1998-03-05 00:00:00.000",
+		"requiredDate": "1998-04-02 00:00:00.000",
+		"shippedDate": "1998-03-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 33.93,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 49,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10930,
+		"customerID": "SUPRD",
+		"employeeID": 4,
+		"orderDate": "1998-03-06 00:00:00.000",
+		"requiredDate": "1998-04-17 00:00:00.000",
+		"shippedDate": "1998-03-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 15.55,
+		"shipName": "Suprêmes délices",
+		"shipAddress": {
+			"street": "Boulevard Tirou 255",
+			"city": "Charleroi",
+			"region": "NULL",
+			"postalCode": "B-6000",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 27,
+				"unitPrice": 43.9,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 25,
+				"discount": 0.2
+			},
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 30,
+				"discount": 0.2
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 36,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10931,
+		"customerID": "RICSU",
+		"employeeID": 4,
+		"orderDate": "1998-03-06 00:00:00.000",
+		"requiredDate": "1998-03-20 00:00:00.000",
+		"shippedDate": "1998-03-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 13.6,
+		"shipName": "Richter Supermarkt",
+		"shipAddress": {
+			"street": "Starenweg 5",
+			"city": "Genève",
+			"region": "NULL",
+			"postalCode": 1204,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 42,
+				"discount": 0.15
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10932,
+		"customerID": "BONAP",
+		"employeeID": 8,
+		"orderDate": "1998-03-06 00:00:00.000",
+		"requiredDate": "1998-04-03 00:00:00.000",
+		"shippedDate": "1998-03-24 00:00:00.000",
+		"shipVia": 1,
+		"freight": 134.64,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 14,
+				"discount": 0.1
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 16,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10933,
+		"customerID": "ISLAT",
+		"employeeID": 6,
+		"orderDate": "1998-03-06 00:00:00.000",
+		"requiredDate": "1998-04-03 00:00:00.000",
+		"shippedDate": "1998-03-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 54.15,
+		"shipName": "Island Trading",
+		"shipAddress": {
+			"street": "Garden House Crowther Way",
+			"city": "Cowes",
+			"region": "Isle of Wight",
+			"postalCode": "PO31 7PJ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10935,
+		"customerID": "WELLI",
+		"employeeID": 4,
+		"orderDate": "1998-03-09 00:00:00.000",
+		"requiredDate": "1998-04-06 00:00:00.000",
+		"shippedDate": "1998-03-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 47.59,
+		"shipName": "Wellington Importadora",
+		"shipAddress": {
+			"street": "Rua do Mercado 12",
+			"city": "Resende",
+			"region": "SP",
+			"postalCode": "08737-363",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 4,
+				"discount": 0.25
+			},
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 8,
+				"discount": 0.25
+			},
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10937,
+		"customerID": "CACTU",
+		"employeeID": 7,
+		"orderDate": "1998-03-10 00:00:00.000",
+		"requiredDate": "1998-03-24 00:00:00.000",
+		"shippedDate": "1998-03-13 00:00:00.000",
+		"shipVia": 3,
+		"freight": 31.51,
+		"shipName": "Cactus Comidas para llevar",
+		"shipAddress": {
+			"street": "Cerrito 333",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 34,
+				"unitPrice": 14,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10938,
+		"customerID": "QUICK",
+		"employeeID": 3,
+		"orderDate": "1998-03-10 00:00:00.000",
+		"requiredDate": "1998-04-07 00:00:00.000",
+		"shippedDate": "1998-03-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 31.89,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 20,
+				"discount": 0.25
+			},
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 24,
+				"discount": 0.25
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 49,
+				"discount": 0.25
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 35,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10939,
+		"customerID": "MAGAA",
+		"employeeID": 2,
+		"orderDate": "1998-03-10 00:00:00.000",
+		"requiredDate": "1998-04-07 00:00:00.000",
+		"shippedDate": "1998-03-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 76.33,
+		"shipName": "Magazzini Alimentari Riuniti",
+		"shipAddress": {
+			"street": "Via Ludovico il Moro 22",
+			"city": "Bergamo",
+			"region": "NULL",
+			"postalCode": 24100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 10,
+				"discount": 0.15
+			},
+			{
+				"productID": 67,
+				"unitPrice": 14,
+				"quantity": 40,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10940,
+		"customerID": "BONAP",
+		"employeeID": 8,
+		"orderDate": "1998-03-11 00:00:00.000",
+		"requiredDate": "1998-04-08 00:00:00.000",
+		"shippedDate": "1998-03-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 19.77,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10941,
+		"customerID": "SAVEA",
+		"employeeID": 7,
+		"orderDate": "1998-03-11 00:00:00.000",
+		"requiredDate": "1998-04-08 00:00:00.000",
+		"shippedDate": "1998-03-20 00:00:00.000",
+		"shipVia": 2,
+		"freight": 400.81,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 44,
+				"discount": 0.25
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 30,
+				"discount": 0.25
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 80,
+				"discount": 0.25
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10922,
+		"customerID": "HANAR",
+		"employeeID": 5,
+		"orderDate": "1998-03-03 00:00:00.000",
+		"requiredDate": "1998-03-31 00:00:00.000",
+		"shippedDate": "1998-03-05 00:00:00.000",
+		"shipVia": 3,
+		"freight": 62.74,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10923,
+		"customerID": "LAMAI",
+		"employeeID": 7,
+		"orderDate": "1998-03-03 00:00:00.000",
+		"requiredDate": "1998-04-14 00:00:00.000",
+		"shippedDate": "1998-03-13 00:00:00.000",
+		"shipVia": 3,
+		"freight": 68.26,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 10,
+				"discount": 0.2
+			},
+			{
+				"productID": 67,
+				"unitPrice": 14,
+				"quantity": 24,
+				"discount": 0.2
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 10,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10924,
+		"customerID": "BERGS",
+		"employeeID": 3,
+		"orderDate": "1998-03-04 00:00:00.000",
+		"requiredDate": "1998-04-01 00:00:00.000",
+		"shippedDate": "1998-04-08 00:00:00.000",
+		"shipVia": 2,
+		"freight": 151.52,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10943,
+		"customerID": "BSBEV",
+		"employeeID": 4,
+		"orderDate": "1998-03-11 00:00:00.000",
+		"requiredDate": "1998-04-08 00:00:00.000",
+		"shippedDate": "1998-03-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 2.17,
+		"shipName": "B's Beverages",
+		"shipAddress": {
+			"street": "Fauntleroy Circus",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "EC2 5NT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10944,
+		"customerID": "BOTTM",
+		"employeeID": 6,
+		"orderDate": "1998-03-12 00:00:00.000",
+		"requiredDate": "1998-03-26 00:00:00.000",
+		"shippedDate": "1998-03-13 00:00:00.000",
+		"shipVia": 3,
+		"freight": 52.92,
+		"shipName": "Bottom-Dollar Markets",
+		"shipAddress": {
+			"street": "23 Tsawassen Blvd.",
+			"city": "Tsawassen",
+			"region": "BC",
+			"postalCode": "T2F 8M4",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 5,
+				"discount": 0.25
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 18,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10945,
+		"customerID": "MORGK",
+		"employeeID": 4,
+		"orderDate": "1998-03-12 00:00:00.000",
+		"requiredDate": "1998-04-09 00:00:00.000",
+		"shippedDate": "1998-03-18 00:00:00.000",
+		"shipVia": 1,
+		"freight": 10.22,
+		"shipName": "Morgenstern Gesundkost",
+		"shipAddress": {
+			"street": "Heerstr. 22",
+			"city": "Leipzig",
+			"region": "NULL",
+			"postalCode": 4179,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	}
+]
diff --git a/vue-options-api-demos/grid/common/northwind/products.json b/vue-options-api-demos/grid/common/northwind/products.json
new file mode 100644
index 00000000..36b06995
--- /dev/null
+++ b/vue-options-api-demos/grid/common/northwind/products.json
@@ -0,0 +1,927 @@
+
+[
+	{
+		"productID" : 4,
+		"supplierID" : 2,
+		"categoryID" : 2,
+		"quantityPerUnit" : "48 - 6 oz jars",
+		"unitPrice" : 22,
+		"unitsInStock" : 53,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 0,
+		"discontinued" : false,
+		"name" : "Chef Anton's Cajun Seasoning"
+	},
+	{
+		"productID" : 5,
+		"supplierID" : 2,
+		"categoryID" : 2,
+		"quantityPerUnit" : "36 boxes",
+		"unitPrice" : 21.35,
+		"unitsInStock" : 0,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 0,
+		"discontinued" : true,
+		"name" : "Chef Anton's Gumbo Mix"
+	},
+	{
+		"productID" : 6,
+		"supplierID" : 3,
+		"categoryID" : 2,
+		"quantityPerUnit" : "12 - 8 oz jars",
+		"unitPrice" : 25,
+		"unitsInStock" : 120,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 25,
+		"discontinued" : false,
+		"name" : "Grandma's Boysenberry Spread"
+	},
+	{
+		"productID" : 7,
+		"supplierID" : 3,
+		"categoryID" : 7,
+		"quantityPerUnit" : "12 - 1 lb pkgs.",
+		"unitPrice" : 30,
+		"unitsInStock" : 15,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 10,
+		"discontinued" : false,
+		"name" : "Uncle Bob's Organic Dried Pears"
+	},
+	{
+		"productID" : 8,
+		"supplierID" : 3,
+		"categoryID" : 2,
+		"quantityPerUnit" : "12 - 12 oz jars",
+		"unitPrice" : 40,
+		"unitsInStock" : 6,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 0,
+		"discontinued" : false,
+		"name" : "Northwoods Cranberry Sauce"
+	},
+	{
+		"productID" : 9,
+		"supplierID" : 4,
+		"categoryID" : 6,
+		"quantityPerUnit" : "18 - 500 g pkgs.",
+		"unitPrice" : 97,
+		"unitsInStock" : 29,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 0,
+		"discontinued" : true,
+		"name" : "Mishi Kobe Niku"
+	},
+	{
+		"productID" : 10,
+		"supplierID" : 4,
+		"categoryID" : 8,
+		"quantityPerUnit" : "12 - 200 ml jars",
+		"unitPrice" : 31,
+		"unitsInStock" : 31,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 0,
+		"discontinued" : false,
+		"name" : "Ikura"
+	},
+	{
+		"productID" : 2,
+		"supplierID" : 1,
+		"categoryID" : 1,
+		"quantityPerUnit" : "24 - 12 oz bottles",
+		"unitPrice" : 19,
+		"unitsInStock" : 17,
+		"unitsOnOrder" : 40,
+		"reorderLevel" : 25,
+		"discontinued" : false,
+		"name" : "Chang"
+	},
+	{
+		"productID" : 3,
+		"supplierID" : 1,
+		"categoryID" : 2,
+		"quantityPerUnit" : "12 - 550 ml bottles",
+		"unitPrice" : 10,
+		"unitsInStock" : 13,
+		"unitsOnOrder" : 70,
+		"reorderLevel" : 25,
+		"discontinued" : false,
+		"name" : "Aniseed Syrup"
+	},
+	{
+		"productID" : 11,
+		"supplierID" : 5,
+		"categoryID" : 4,
+		"quantityPerUnit" : "1 kg pkg.",
+		"unitPrice" : 21,
+		"unitsInStock" : 22,
+		"unitsOnOrder" : 30,
+		"reorderLevel" : 30,
+		"discontinued" : false,
+		"name" : "Queso Cabrales"
+	},
+	{
+		"productID" : 12,
+		"supplierID" : 5,
+		"categoryID" : 4,
+		"quantityPerUnit" : "10 - 500 g pkgs.",
+		"unitPrice" : 38,
+		"unitsInStock" : 86,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 0,
+		"discontinued" : false,
+		"name" : "Queso Manchego La Pastora"
+	},
+	{
+		"productID" : 13,
+		"supplierID" : 6,
+		"categoryID" : 8,
+		"quantityPerUnit" : "2 kg box",
+		"unitPrice" : 6,
+		"unitsInStock" : 24,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 5,
+		"discontinued" : false,
+		"name" : "Konbu"
+	},
+	{
+		"productID" : 14,
+		"supplierID" : 6,
+		"categoryID" : 7,
+		"quantityPerUnit" : "40 - 100 g pkgs.",
+		"unitPrice" : 23.25,
+		"unitsInStock" : 35,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 0,
+		"discontinued" : false,
+		"name" : "Tofu"
+	},
+	{
+		"productID" : 15,
+		"supplierID" : 6,
+		"categoryID" : 2,
+		"quantityPerUnit" : "24 - 250 ml bottles",
+		"unitPrice" : 15.5,
+		"unitsInStock" : 39,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 5,
+		"discontinued" : false,
+		"name" : "Genen Shouyu"
+	},
+	{
+		"productID" : 1,
+		"supplierID" : 1,
+		"categoryID" : 1,
+		"quantityPerUnit" : "10 boxes x 20 bags",
+		"unitPrice" : 18,
+		"unitsInStock" : 39,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 10,
+		"discontinued" : false,
+		"name" : "Chai"
+	},
+	{
+		"productID" : 16,
+		"supplierID" : 7,
+		"categoryID" : 3,
+		"quantityPerUnit" : "32 - 500 g boxes",
+		"unitPrice" : 17.45,
+		"unitsInStock" : 29,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 10,
+		"discontinued" : false,
+		"name" : "Pavlova"
+	},
+	{
+		"productID" : 17,
+		"supplierID" : 7,
+		"categoryID" : 6,
+		"quantityPerUnit" : "20 - 1 kg tins",
+		"unitPrice" : 39,
+		"unitsInStock" : 0,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 0,
+		"discontinued" : true,
+		"name" : "Alice Mutton"
+	},
+	{
+		"productID" : 18,
+		"supplierID" : 7,
+		"categoryID" : 8,
+		"quantityPerUnit" : "16 kg pkg.",
+		"unitPrice" : 62.5,
+		"unitsInStock" : 42,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 0,
+		"discontinued" : false,
+		"name" : "Carnarvon Tigers"
+	},
+	{
+		"productID" : 19,
+		"supplierID" : 8,
+		"categoryID" : 3,
+		"quantityPerUnit" : "10 boxes x 12 pieces",
+		"unitPrice" : 9.2,
+		"unitsInStock" : 25,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 5,
+		"discontinued" : false,
+		"name" : "Teatime Chocolate Biscuits"
+	},
+	{
+		"productID" : 20,
+		"supplierID" : 8,
+		"categoryID" : 3,
+		"quantityPerUnit" : "30 gift boxes",
+		"unitPrice" : 81,
+		"unitsInStock" : 40,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 0,
+		"discontinued" : false,
+		"name" : "Sir Rodney's Marmalade"
+	},
+	{
+		"productID" : 24,
+		"supplierID" : 10,
+		"categoryID" : 1,
+		"quantityPerUnit" : "12 - 355 ml cans",
+		"unitPrice" : 4.5,
+		"unitsInStock" : 20,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 0,
+		"discontinued" : true,
+		"name" : "Guaraná Fantástica"
+	},
+	{
+		"productID" : 25,
+		"supplierID" : 11,
+		"categoryID" : 3,
+		"quantityPerUnit" : "20 - 450 g glasses",
+		"unitPrice" : 14,
+		"unitsInStock" : 76,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 30,
+		"discontinued" : false,
+		"name" : "NuNuCa Nuß-Nougat-Creme"
+	},
+	{
+		"productID" : 26,
+		"supplierID" : 11,
+		"categoryID" : 3,
+		"quantityPerUnit" : "100 - 250 g bags",
+		"unitPrice" : 31.23,
+		"unitsInStock" : 15,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 0,
+		"discontinued" : false,
+		"name" : "Gumbär Gummibärchen"
+	},
+	{
+		"productID" : 27,
+		"supplierID" : 11,
+		"categoryID" : 3,
+		"quantityPerUnit" : "100 - 100 g pieces",
+		"unitPrice" : 43.9,
+		"unitsInStock" : 49,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 30,
+		"discontinued" : false,
+		"name" : "Schoggi Schokolade"
+	},
+	{
+		"productID" : 28,
+		"supplierID" : 12,
+		"categoryID" : 7,
+		"quantityPerUnit" : "25 - 825 g cans",
+		"unitPrice" : 45.6,
+		"unitsInStock" : 26,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 0,
+		"discontinued" : true,
+		"name" : "Rössle Sauerkraut"
+	},
+	{
+		"productID" : 29,
+		"supplierID" : 12,
+		"categoryID" : 6,
+		"quantityPerUnit" : "50 bags x 30 sausgs.",
+		"unitPrice" : 123.79,
+		"unitsInStock" : 0,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 0,
+		"discontinued" : true,
+		"name" : "Thüringer Rostbratwurst"
+	},
+	{
+		"productID" : 30,
+		"supplierID" : 13,
+		"categoryID" : 8,
+		"quantityPerUnit" : "10 - 200 g glasses",
+		"unitPrice" : 25.89,
+		"unitsInStock" : 10,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 15,
+		"discontinued" : false,
+		"name" : "Nord-Ost Matjeshering"
+	},
+	{
+		"productID" : 31,
+		"supplierID" : 14,
+		"categoryID" : 4,
+		"quantityPerUnit" : "12 - 100 g pkgs",
+		"unitPrice" : 12.5,
+		"unitsInStock" : 0,
+		"unitsOnOrder" : 70,
+		"reorderLevel" : 20,
+		"discontinued" : false,
+		"name" : "Gorgonzola Telino"
+	},
+	{
+		"productID" : 32,
+		"supplierID" : 14,
+		"categoryID" : 4,
+		"quantityPerUnit" : "24 - 200 g pkgs.",
+		"unitPrice" : 32,
+		"unitsInStock" : 9,
+		"unitsOnOrder" : 40,
+		"reorderLevel" : 25,
+		"discontinued" : false,
+		"name" : "Mascarpone Fabioli"
+	},
+	{
+		"productID" : 33,
+		"supplierID" : 15,
+		"categoryID" : 4,
+		"quantityPerUnit" : "500 g",
+		"unitPrice" : 2.5,
+		"unitsInStock" : 112,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 20,
+		"discontinued" : false,
+		"name" : "Geitost"
+	},
+	{
+		"productID" : 34,
+		"supplierID" : 16,
+		"categoryID" : 1,
+		"quantityPerUnit" : "24 - 12 oz bottles",
+		"unitPrice" : 14,
+		"unitsInStock" : 111,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 15,
+		"discontinued" : false,
+		"name" : "Sasquatch Ale"
+	},
+	{
+		"productID" : 22,
+		"supplierID" : 9,
+		"categoryID" : 5,
+		"quantityPerUnit" : "24 - 500 g pkgs.",
+		"unitPrice" : 21,
+		"unitsInStock" : 104,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 25,
+		"discontinued" : false,
+		"name" : "Gustaf's Knäckebröd"
+	},
+	{
+		"productID" : 21,
+		"supplierID" : 8,
+		"categoryID" : 3,
+		"quantityPerUnit" : "24 pkgs. x 4 pieces",
+		"unitPrice" : 10,
+		"unitsInStock" : 3,
+		"unitsOnOrder" : 40,
+		"reorderLevel" : 5,
+		"discontinued" : false,
+		"name" : "Sir Rodney's Scones"
+	},
+	{
+		"productID" : 35,
+		"supplierID" : 16,
+		"categoryID" : 1,
+		"quantityPerUnit" : "24 - 12 oz bottles",
+		"unitPrice" : 18,
+		"unitsInStock" : 20,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 15,
+		"discontinued" : false,
+		"name" : "Steeleye Stout"
+	},
+	{
+		"productID" : 23,
+		"supplierID" : 9,
+		"categoryID" : 5,
+		"quantityPerUnit" : "12 - 250 g pkgs.",
+		"unitPrice" : 9,
+		"unitsInStock" : 61,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 25,
+		"discontinued" : false,
+		"name" : "Tunnbröd"
+	},
+	{
+		"productID" : 37,
+		"supplierID" : 17,
+		"categoryID" : 8,
+		"quantityPerUnit" : "12 - 500 g pkgs.",
+		"unitPrice" : 26,
+		"unitsInStock" : 11,
+		"unitsOnOrder" : 50,
+		"reorderLevel" : 25,
+		"discontinued" : false,
+		"name" : "Gravad lax"
+	},
+	{
+		"productID" : 40,
+		"supplierID" : 19,
+		"categoryID" : 8,
+		"quantityPerUnit" : "24 - 4 oz tins",
+		"unitPrice" : 18.4,
+		"unitsInStock" : 123,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 30,
+		"discontinued" : false,
+		"name" : "Boston Crab Meat"
+	},
+	{
+		"productID" : 38,
+		"supplierID" : 18,
+		"categoryID" : 1,
+		"quantityPerUnit" : "12 - 75 cl bottles",
+		"unitPrice" : 263.5,
+		"unitsInStock" : 17,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 15,
+		"discontinued" : false,
+		"name" : "Côte de Blaye"
+	},
+	{
+		"productID" : 36,
+		"supplierID" : 17,
+		"categoryID" : 8,
+		"quantityPerUnit" : "24 - 250 g  jars",
+		"unitPrice" : 19,
+		"unitsInStock" : 112,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 20,
+		"discontinued" : false,
+		"name" : "Inlagd Sill"
+	},
+	{
+		"productID" : 41,
+		"supplierID" : 19,
+		"categoryID" : 8,
+		"quantityPerUnit" : "12 - 12 oz cans",
+		"unitPrice" : 9.65,
+		"unitsInStock" : 85,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 10,
+		"discontinued" : false,
+		"name" : "Jack's New England Clam Chowder"
+	},
+	{
+		"productID" : 43,
+		"supplierID" : 20,
+		"categoryID" : 1,
+		"quantityPerUnit" : "16 - 500 g tins",
+		"unitPrice" : 46,
+		"unitsInStock" : 17,
+		"unitsOnOrder" : 10,
+		"reorderLevel" : 25,
+		"discontinued" : false,
+		"name" : "Ipoh Coffee"
+	},
+	{
+		"productID" : 42,
+		"supplierID" : 20,
+		"categoryID" : 5,
+		"quantityPerUnit" : "32 - 1 kg pkgs.",
+		"unitPrice" : 14,
+		"unitsInStock" : 26,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 0,
+		"discontinued" : true,
+		"name" : "Singaporean Hokkien Fried Mee"
+	},
+	{
+		"productID" : 46,
+		"supplierID" : 21,
+		"categoryID" : 8,
+		"quantityPerUnit" : "4 - 450 g glasses",
+		"unitPrice" : 12,
+		"unitsInStock" : 95,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 0,
+		"discontinued" : false,
+		"name" : "Spegesild"
+	},
+	{
+		"productID" : 47,
+		"supplierID" : 22,
+		"categoryID" : 3,
+		"quantityPerUnit" : "10 - 4 oz boxes",
+		"unitPrice" : 9.5,
+		"unitsInStock" : 36,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 0,
+		"discontinued" : false,
+		"name" : "Zaanse koeken"
+	},
+	{
+		"productID" : 48,
+		"supplierID" : 22,
+		"categoryID" : 3,
+		"quantityPerUnit" : "10 pkgs.",
+		"unitPrice" : 12.75,
+		"unitsInStock" : 15,
+		"unitsOnOrder" : 70,
+		"reorderLevel" : 25,
+		"discontinued" : false,
+		"name" : "Chocolade"
+	},
+	{
+		"productID" : 49,
+		"supplierID" : 23,
+		"categoryID" : 3,
+		"quantityPerUnit" : "24 - 50 g pkgs.",
+		"unitPrice" : 20,
+		"unitsInStock" : 10,
+		"unitsOnOrder" : 60,
+		"reorderLevel" : 15,
+		"discontinued" : false,
+		"name" : "Maxilaku"
+	},
+	{
+		"productID" : 50,
+		"supplierID" : 23,
+		"categoryID" : 3,
+		"quantityPerUnit" : "12 - 100 g bars",
+		"unitPrice" : 16.25,
+		"unitsInStock" : 65,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 30,
+		"discontinued" : false,
+		"name" : "Valkoinen suklaa"
+	},
+	{
+		"productID" : 51,
+		"supplierID" : 24,
+		"categoryID" : 7,
+		"quantityPerUnit" : "50 - 300 g pkgs.",
+		"unitPrice" : 53,
+		"unitsInStock" : 20,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 10,
+		"discontinued" : false,
+		"name" : "Manjimup Dried Apples"
+	},
+	{
+		"productID" : 52,
+		"supplierID" : 24,
+		"categoryID" : 5,
+		"quantityPerUnit" : "16 - 2 kg boxes",
+		"unitPrice" : 7,
+		"unitsInStock" : 38,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 25,
+		"discontinued" : false,
+		"name" : "Filo Mix"
+	},
+	{
+		"productID" : 53,
+		"supplierID" : 24,
+		"categoryID" : 6,
+		"quantityPerUnit" : "48 pieces",
+		"unitPrice" : 32.8,
+		"unitsInStock" : 0,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 0,
+		"discontinued" : true,
+		"name" : "Perth Pasties"
+	},
+	{
+		"productID" : 54,
+		"supplierID" : 25,
+		"categoryID" : 6,
+		"quantityPerUnit" : "16 pies",
+		"unitPrice" : 7.45,
+		"unitsInStock" : 21,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 10,
+		"discontinued" : false,
+		"name" : "Tourtière"
+	},
+	{
+		"productID" : 55,
+		"supplierID" : 25,
+		"categoryID" : 6,
+		"quantityPerUnit" : "24 boxes x 2 pies",
+		"unitPrice" : 24,
+		"unitsInStock" : 115,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 20,
+		"discontinued" : false,
+		"name" : "Pâté chinois"
+	},
+	{
+		"productID" : 56,
+		"supplierID" : 26,
+		"categoryID" : 5,
+		"quantityPerUnit" : "24 - 250 g pkgs.",
+		"unitPrice" : 38,
+		"unitsInStock" : 21,
+		"unitsOnOrder" : 10,
+		"reorderLevel" : 30,
+		"discontinued" : false,
+		"name" : "Gnocchi di nonna Alice"
+	},
+	{
+		"productID" : 57,
+		"supplierID" : 26,
+		"categoryID" : 5,
+		"quantityPerUnit" : "24 - 250 g pkgs.",
+		"unitPrice" : 19.5,
+		"unitsInStock" : 36,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 20,
+		"discontinued" : false,
+		"name" : "Ravioli Angelo"
+	},
+	{
+		"productID" : 44,
+		"supplierID" : 20,
+		"categoryID" : 2,
+		"quantityPerUnit" : "20 - 2 kg bags",
+		"unitPrice" : 19.45,
+		"unitsInStock" : 27,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 15,
+		"discontinued" : false,
+		"name" : "Gula Malacca"
+	},
+	{
+		"productID" : 39,
+		"supplierID" : 18,
+		"categoryID" : 1,
+		"quantityPerUnit" : "750 cc per bottle",
+		"unitPrice" : 18,
+		"unitsInStock" : 69,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 5,
+		"discontinued" : false,
+		"name" : "Chartreuse verte"
+	},
+	{
+		"productID" : 59,
+		"supplierID" : 28,
+		"categoryID" : 4,
+		"quantityPerUnit" : "5 kg pkg.",
+		"unitPrice" : 55,
+		"unitsInStock" : 79,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 0,
+		"discontinued" : false,
+		"name" : "Raclette Courdavault"
+	},
+	{
+		"productID" : 60,
+		"supplierID" : 28,
+		"categoryID" : 4,
+		"quantityPerUnit" : "15 - 300 g rounds",
+		"unitPrice" : 34,
+		"unitsInStock" : 19,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 0,
+		"discontinued" : false,
+		"name" : "Camembert Pierrot"
+	},
+	{
+		"productID" : 45,
+		"supplierID" : 21,
+		"categoryID" : 8,
+		"quantityPerUnit" : "1k pkg.",
+		"unitPrice" : 9.5,
+		"unitsInStock" : 5,
+		"unitsOnOrder" : 70,
+		"reorderLevel" : 15,
+		"discontinued" : false,
+		"name" : "Rogede sild"
+	},
+	{
+		"productID" : 58,
+		"supplierID" : 27,
+		"categoryID" : 8,
+		"quantityPerUnit" : "24 pieces",
+		"unitPrice" : 13.25,
+		"unitsInStock" : 62,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 20,
+		"discontinued" : false,
+		"name" : "Escargots de Bourgogne"
+	},
+	{
+		"productID" : 61,
+		"supplierID" : 29,
+		"categoryID" : 2,
+		"quantityPerUnit" : "24 - 500 ml bottles",
+		"unitPrice" : 28.5,
+		"unitsInStock" : 113,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 25,
+		"discontinued" : false,
+		"name" : "Sirop d'érable"
+	},
+	{
+		"productID" : 62,
+		"supplierID" : 29,
+		"categoryID" : 3,
+		"quantityPerUnit" : "48 pies",
+		"unitPrice" : 49.3,
+		"unitsInStock" : 17,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 0,
+		"discontinued" : false,
+		"name" : "Tarte au sucre"
+	},
+	{
+		"productID" : 63,
+		"supplierID" : 7,
+		"categoryID" : 2,
+		"quantityPerUnit" : "15 - 625 g jars",
+		"unitPrice" : 43.9,
+		"unitsInStock" : 24,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 5,
+		"discontinued" : false,
+		"name" : "Vegie-spread"
+	},
+	{
+		"productID" : 64,
+		"supplierID" : 12,
+		"categoryID" : 5,
+		"quantityPerUnit" : "20 bags x 4 pieces",
+		"unitPrice" : 33.25,
+		"unitsInStock" : 22,
+		"unitsOnOrder" : 80,
+		"reorderLevel" : 30,
+		"discontinued" : false,
+		"name" : "Wimmers gute Semmelknödel"
+	},
+	{
+		"productID" : 65,
+		"supplierID" : 2,
+		"categoryID" : 2,
+		"quantityPerUnit" : "32 - 8 oz bottles",
+		"unitPrice" : 21.05,
+		"unitsInStock" : 76,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 0,
+		"discontinued" : false,
+		"name" : "Louisiana Fiery Hot Pepper Sauce"
+	},
+	{
+		"productID" : 66,
+		"supplierID" : 2,
+		"categoryID" : 2,
+		"quantityPerUnit" : "24 - 8 oz jars",
+		"unitPrice" : 17,
+		"unitsInStock" : 4,
+		"unitsOnOrder" : 100,
+		"reorderLevel" : 20,
+		"discontinued" : false,
+		"name" : "Louisiana Hot Spiced Okra"
+	},
+	{
+		"productID" : 67,
+		"supplierID" : 16,
+		"categoryID" : 1,
+		"quantityPerUnit" : "24 - 12 oz bottles",
+		"unitPrice" : 14,
+		"unitsInStock" : 52,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 10,
+		"discontinued" : false,
+		"name" : "Laughing Lumberjack Lager"
+	},
+	{
+		"productID" : 68,
+		"supplierID" : 8,
+		"categoryID" : 3,
+		"quantityPerUnit" : "10 boxes x 8 pieces",
+		"unitPrice" : 12.5,
+		"unitsInStock" : 6,
+		"unitsOnOrder" : 10,
+		"reorderLevel" : 15,
+		"discontinued" : false,
+		"name" : "Scottish Longbreads"
+	},
+	{
+		"productID" : 70,
+		"supplierID" : 7,
+		"categoryID" : 1,
+		"quantityPerUnit" : "24 - 355 ml bottles",
+		"unitPrice" : 15,
+		"unitsInStock" : 15,
+		"unitsOnOrder" : 10,
+		"reorderLevel" : 30,
+		"discontinued" : false,
+		"name" : "Outback Lager"
+	},
+	{
+		"productID" : 71,
+		"supplierID" : 15,
+		"categoryID" : 4,
+		"quantityPerUnit" : "10 - 500 g pkgs.",
+		"unitPrice" : 21.5,
+		"unitsInStock" : 26,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 0,
+		"discontinued" : false,
+		"name" : "Flotemysost"
+	},
+	{
+		"productID" : 73,
+		"supplierID" : 17,
+		"categoryID" : 8,
+		"quantityPerUnit" : "24 - 150 g jars",
+		"unitPrice" : 15,
+		"unitsInStock" : 101,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 5,
+		"discontinued" : false,
+		"name" : "Röd Kaviar"
+	},
+	{
+		"productID" : 74,
+		"supplierID" : 4,
+		"categoryID" : 7,
+		"quantityPerUnit" : "5 kg pkg.",
+		"unitPrice" : 10,
+		"unitsInStock" : 4,
+		"unitsOnOrder" : 20,
+		"reorderLevel" : 5,
+		"discontinued" : false,
+		"name" : "Longlife Tofu"
+	},
+	{
+		"productID" : 75,
+		"supplierID" : 12,
+		"categoryID" : 1,
+		"quantityPerUnit" : "24 - 0.5 l bottles",
+		"unitPrice" : 7.75,
+		"unitsInStock" : 125,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 25,
+		"discontinued" : false,
+		"name" : "Rhönbräu Klosterbier"
+	},
+	{
+		"productID" : 76,
+		"supplierID" : 23,
+		"categoryID" : 1,
+		"quantityPerUnit" : "500 ml",
+		"unitPrice" : 18,
+		"unitsInStock" : 57,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 20,
+		"discontinued" : false,
+		"name" : "Lakkalikööri"
+	},
+	{
+		"productID" : 69,
+		"supplierID" : 15,
+		"categoryID" : 4,
+		"quantityPerUnit" : "10 kg pkg.",
+		"unitPrice" : 36,
+		"unitsInStock" : 26,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 15,
+		"discontinued" : false,
+		"name" : "Gudbrandsdalsost"
+	},
+	{
+		"productID" : 72,
+		"supplierID" : 14,
+		"categoryID" : 4,
+		"quantityPerUnit" : "24 - 200 g pkgs.",
+		"unitPrice" : 34.8,
+		"unitsInStock" : 14,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 0,
+		"discontinued" : false,
+		"name" : "Mozzarella di Giovanni"
+	},
+	{
+		"productID" : 77,
+		"supplierID" : 12,
+		"categoryID" : 2,
+		"quantityPerUnit" : "12 boxes",
+		"unitPrice" : 13,
+		"unitsInStock" : 32,
+		"unitsOnOrder" : 0,
+		"reorderLevel" : 15,
+		"discontinued" : false,
+		"name" : "Original Frankfurter grüne Soße"
+	}
+]
diff --git a/vue-options-api-demos/grid/common/northwind/regions.json b/vue-options-api-demos/grid/common/northwind/regions.json
new file mode 100644
index 00000000..debca3d1
--- /dev/null
+++ b/vue-options-api-demos/grid/common/northwind/regions.json
@@ -0,0 +1,239 @@
+
+[
+	{
+		"regionID" : 1,
+		"name" : "Eastern",
+		"territories" : [
+			{
+				"territoryID" : 1833,
+				"name" : "Georgetow"
+			},
+			{
+				"territoryID" : 1581,
+				"name" : "Westboro"
+			},
+			{
+				"territoryID" : 2116,
+				"name" : "Boston"
+			},
+			{
+				"territoryID" : 2139,
+				"name" : "Cambridge"
+			},
+			{
+				"territoryID" : 1730,
+				"name" : "Bedford"
+			},
+			{
+				"territoryID" : 2903,
+				"name" : "Providence"
+			},
+			{
+				"territoryID" : 6897,
+				"name" : "Wilton"
+			},
+			{
+				"territoryID" : 7960,
+				"name" : "Morristown"
+			},
+			{
+				"territoryID" : 8837,
+				"name" : "Edison"
+			},
+			{
+				"territoryID" : 10019,
+				"name" : "NewYork"
+			},
+			{
+				"territoryID" : 10038,
+				"name" : "NewYork"
+			},
+			{
+				"territoryID" : 11747,
+				"name" : "Mellvile"
+			},
+			{
+				"territoryID" : 14450,
+				"name" : "Fairport"
+			},
+			{
+				"territoryID" : 19713,
+				"name" : "Neward"
+			},
+			{
+				"territoryID" : 2184,
+				"name" : "Braintree"
+			},
+			{
+				"territoryID" : 20852,
+				"name" : "Rockville"
+			},
+			{
+				"territoryID" : 27403,
+				"name" : "Greensboro"
+			},
+			{
+				"territoryID" : 27511,
+				"name" : "Cary"
+			},
+			{
+				"territoryID" : 40222,
+				"name" : "Louisville"
+			}
+		]
+	},
+	{
+		"regionID" : 2,
+		"name" : "Western",
+		"territories" : [
+			{
+				"territoryID" : 60601,
+				"name" : "Chicago"
+			},
+			{
+				"territoryID" : 80202,
+				"name" : "Denver"
+			},
+			{
+				"territoryID" : 60179,
+				"name" : "HoffmanEstates"
+			},
+			{
+				"territoryID" : 85014,
+				"name" : "Phoenix"
+			},
+			{
+				"territoryID" : 80909,
+				"name" : "ColoradoSprings"
+			},
+			{
+				"territoryID" : 85251,
+				"name" : "Scottsdale"
+			},
+			{
+				"territoryID" : 90405,
+				"name" : "SantaMonica"
+			},
+			{
+				"territoryID" : 94025,
+				"name" : "MenloPark"
+			},
+			{
+				"territoryID" : 94105,
+				"name" : "SanFrancisco"
+			},
+			{
+				"territoryID" : 98004,
+				"name" : "Bellevue"
+			},
+			{
+				"territoryID" : 98052,
+				"name" : "Redmond"
+			},
+			{
+				"territoryID" : 98104,
+				"name" : "Seattle"
+			},
+			{
+				"territoryID" : 95008,
+				"name" : "Campbell"
+			},
+			{
+				"territoryID" : 95054,
+				"name" : "SantaClara"
+			},
+			{
+				"territoryID" : 95060,
+				"name" : "SantaCruz"
+			}
+		]
+	},
+	{
+		"regionID" : 4,
+		"name" : "Southern",
+		"territories" : [
+			{
+				"territoryID" : 29202,
+				"name" : "Columbia"
+			},
+			{
+				"territoryID" : 30346,
+				"name" : "Atlanta"
+			},
+			{
+				"territoryID" : 32859,
+				"name" : "Orlando"
+			},
+			{
+				"territoryID" : 31406,
+				"name" : "Savannah"
+			},
+			{
+				"territoryID" : 72716,
+				"name" : "Bentonville"
+			},
+			{
+				"territoryID" : 75234,
+				"name" : "Dallas"
+			},
+			{
+				"territoryID" : 78759,
+				"name" : "Austin"
+			},
+			{
+				"territoryID" : 33607,
+				"name" : "Tampa"
+			}
+		]
+	},
+	{
+		"regionID" : 3,
+		"name" : "Northern",
+		"territories" : [
+			{
+				"territoryID" : 19428,
+				"name" : "Philadelphia"
+			},
+			{
+				"territoryID" : 3801,
+				"name" : "Portsmouth"
+			},
+			{
+				"territoryID" : 3049,
+				"name" : "Hollis"
+			},
+			{
+				"territoryID" : 44122,
+				"name" : "Beachwood"
+			},
+			{
+				"territoryID" : 45839,
+				"name" : "Findlay"
+			},
+			{
+				"territoryID" : 48075,
+				"name" : "Southfield"
+			},
+			{
+				"territoryID" : 48084,
+				"name" : "Troy"
+			},
+			{
+				"territoryID" : 48304,
+				"name" : "BloomfieldHills"
+			},
+			{
+				"territoryID" : 53404,
+				"name" : "Racine"
+			},
+			{
+				"territoryID" : 55113,
+				"name" : "Roseville"
+			},
+			{
+				"territoryID" : 55439,
+				"name" : "Minneapolis"
+			}
+		]
+	}
+]
diff --git a/vue-options-api-demos/grid/common/northwind/shippers.json b/vue-options-api-demos/grid/common/northwind/shippers.json
new file mode 100644
index 00000000..3b4546bd
--- /dev/null
+++ b/vue-options-api-demos/grid/common/northwind/shippers.json
@@ -0,0 +1,18 @@
+
+[
+	{
+		"shipperID" : 1,
+		"companyName" : "Speedy Express",
+		"phone" : "(503) 555-9831"
+	},
+	{
+		"shipperID" : 2,
+		"companyName" : "United Package",
+		"phone" : "(503) 555-3199"
+	},
+	{
+		"shipperID" : 3,
+		"companyName" : "Federal Shipping",
+		"phone" : "(503) 555-9931"
+	}
+]
diff --git a/vue-options-api-demos/grid/common/northwind/suppliers.json b/vue-options-api-demos/grid/common/northwind/suppliers.json
new file mode 100644
index 00000000..403a0673
--- /dev/null
+++ b/vue-options-api-demos/grid/common/northwind/suppliers.json
@@ -0,0 +1,409 @@
+
+[
+	{
+		"supplierID" : 4,
+		"companyName" : "Tokyo Traders",
+		"contactName" : "Yoshi Nagase",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "9-8 Sekimai Musashino-shi",
+			"city" : "Tokyo",
+			"region" : "NULL",
+			"postalCode" : 100,
+			"country" : "Japan",
+			"phone" : "(03) 3555-5011"
+		}
+	},
+	{
+		"supplierID" : 5,
+		"companyName" : "Cooperativa de Quesos 'Las Cabras'",
+		"contactName" : "Antonio del Valle Saavedra",
+		"contactTitle" : "Export Administrator",
+		"address" : {
+			"street" : "Calle del Rosal 4",
+			"city" : "Oviedo",
+			"region" : "Asturias",
+			"postalCode" : 33007,
+			"country" : "Spain",
+			"phone" : "(98) 598 76 54"
+		}
+	},
+	{
+		"supplierID" : 6,
+		"companyName" : "Mayumi's",
+		"contactName" : "Mayumi Ohno",
+		"contactTitle" : "Marketing Representative",
+		"address" : {
+			"street" : "92 Setsuko Chuo-ku",
+			"city" : "Osaka",
+			"region" : "NULL",
+			"postalCode" : 545,
+			"country" : "Japan",
+			"phone" : "(06) 431-7877"
+		}
+	},
+	{
+		"supplierID" : 7,
+		"companyName" : "Pavlova Ltd.",
+		"contactName" : "Ian Devling",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "74 Rose St. Moonie Ponds",
+			"city" : "Melbourne",
+			"region" : "Victoria",
+			"postalCode" : 3058,
+			"country" : "Australia",
+			"phone" : "(03) 444-2343"
+		}
+	},
+	{
+		"supplierID" : 8,
+		"companyName" : "Specialty Biscuits Ltd.",
+		"contactName" : "Peter Wilson",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "29 King's Way",
+			"city" : "Manchester",
+			"region" : "NULL",
+			"postalCode" : "M14 GSD",
+			"country" : "UK",
+			"phone" : "(161) 555-4448"
+		}
+	},
+	{
+		"supplierID" : 9,
+		"companyName" : "PB Knäckebröd AB",
+		"contactName" : "Lars Peterson",
+		"contactTitle" : "Sales Agent",
+		"address" : {
+			"street" : "Kaloadagatan 13",
+			"city" : "Göteborg",
+			"region" : "NULL",
+			"postalCode" : "S-345 67",
+			"country" : "Sweden",
+			"phone" : "031-987 65 43"
+		}
+	},
+	{
+		"supplierID" : 10,
+		"companyName" : "Refrescos Americanas LTDA",
+		"contactName" : "Carlos Diaz",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "Av. das Americanas 12.890",
+			"city" : "Sao Paulo",
+			"region" : "NULL",
+			"postalCode" : 5442,
+			"country" : "Brazil",
+			"phone" : "(11) 555 4640"
+		}
+	},
+	{
+		"supplierID" : 11,
+		"companyName" : "Heli Süßwaren GmbH & Co. KG",
+		"contactName" : "Petra Winkler",
+		"contactTitle" : "Sales Manager",
+		"address" : {
+			"street" : "Tiergartenstraße 5",
+			"city" : "Berlin",
+			"region" : "NULL",
+			"postalCode" : 10785,
+			"country" : "Germany",
+			"phone" : "(010) 9984510"
+		}
+	},
+	{
+		"supplierID" : 2,
+		"companyName" : "New Orleans Cajun Delights",
+		"contactName" : "Shelley Burke",
+		"contactTitle" : "Order Administrator",
+		"address" : {
+			"street" : "P.O. Box 78934",
+			"city" : "New Orleans",
+			"region" : "LA",
+			"postalCode" : 70117,
+			"country" : "USA",
+			"phone" : "(100) 555-4822"
+		}
+	},
+	{
+		"supplierID" : 12,
+		"companyName" : "Plutzer Lebensmittelgroßmärkte AG",
+		"contactName" : "Martin Bein",
+		"contactTitle" : "International Marketing Mgr.",
+		"address" : {
+			"street" : "Bogenallee 51",
+			"city" : "Frankfurt",
+			"region" : "NULL",
+			"postalCode" : 60439,
+			"country" : "Germany",
+			"phone" : "(069) 992755"
+		}
+	},
+	{
+		"supplierID" : 13,
+		"companyName" : "Nord-Ost-Fisch Handelsgesellschaft mbH",
+		"contactName" : "Sven Petersen",
+		"contactTitle" : "Coordinator Foreign Markets",
+		"address" : {
+			"street" : "Frahmredder 112a",
+			"city" : "Cuxhaven",
+			"region" : "NULL",
+			"postalCode" : 27478,
+			"country" : "Germany",
+			"phone" : "(04721) 8713"
+		}
+	},
+	{
+		"supplierID" : 14,
+		"companyName" : "Formaggi Fortini s.r.l.",
+		"contactName" : "Elio Rossi",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "Viale Dante 75",
+			"city" : "Ravenna",
+			"region" : "NULL",
+			"postalCode" : 48100,
+			"country" : "Italy",
+			"phone" : "(0544) 60323"
+		}
+	},
+	{
+		"supplierID" : 15,
+		"companyName" : "Norske Meierier",
+		"contactName" : "Beate Vileid",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "Hatlevegen 5",
+			"city" : "Sandvika",
+			"region" : "NULL",
+			"postalCode" : 1320,
+			"country" : "Norway",
+			"phone" : "(0)2-953010"
+		}
+	},
+	{
+		"supplierID" : 1,
+		"companyName" : "Exotic Liquids",
+		"contactName" : "Charlotte Cooper",
+		"contactTitle" : "Purchasing Manager",
+		"address" : {
+			"street" : "49 Gilbert St.",
+			"city" : "London",
+			"region" : "NULL",
+			"postalCode" : "EC1 4SD",
+			"country" : "UK",
+			"phone" : "(171) 555-2222"
+		}
+	},
+	{
+		"supplierID" : 3,
+		"companyName" : "Grandma Kelly's Homestead",
+		"contactName" : "Regina Murphy",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "707 Oxford Rd.",
+			"city" : "Ann Arbor",
+			"region" : "MI",
+			"postalCode" : 48104,
+			"country" : "USA",
+			"phone" : "(313) 555-5735"
+		}
+	},
+	{
+		"supplierID" : 16,
+		"companyName" : "Bigfoot Breweries",
+		"contactName" : "Cheryl Saylor",
+		"contactTitle" : "Regional Account Rep.",
+		"address" : {
+			"street" : "3400 - 8th Avenue Suite 210",
+			"city" : "Bend",
+			"region" : "OR",
+			"postalCode" : 97101,
+			"country" : "USA",
+			"phone" : "(503) 555-9931"
+		}
+	},
+	{
+		"supplierID" : 17,
+		"companyName" : "Svensk Sjöföda AB",
+		"contactName" : "Michael Björn",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "Brovallavägen 231",
+			"city" : "Stockholm",
+			"region" : "NULL",
+			"postalCode" : "S-123 45",
+			"country" : "Sweden",
+			"phone" : "08-123 45 67"
+		}
+	},
+	{
+		"supplierID" : 18,
+		"companyName" : "Aux joyeux ecclésiastiques",
+		"contactName" : "Guylène Nodier",
+		"contactTitle" : "Sales Manager",
+		"address" : {
+			"street" : "203 Rue des Francs-Bourgeois",
+			"city" : "Paris",
+			"region" : "NULL",
+			"postalCode" : 75004,
+			"country" : "France",
+			"phone" : "(1) 03.83.00.68"
+		}
+	},
+	{
+		"supplierID" : 19,
+		"companyName" : "New England Seafood Cannery",
+		"contactName" : "Robb Merchant",
+		"contactTitle" : "Wholesale Account Agent",
+		"address" : {
+			"street" : "Order Processing Dept. 2100 Paul Revere Blvd.",
+			"city" : "Boston",
+			"region" : "MA",
+			"postalCode" : 2134,
+			"country" : "USA",
+			"phone" : "(617) 555-3267"
+		}
+	},
+	{
+		"supplierID" : 20,
+		"companyName" : "Leka Trading",
+		"contactName" : "Chandra Leka",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "471 Serangoon Loop Suite #402",
+			"city" : "Singapore",
+			"region" : "NULL",
+			"postalCode" : 512,
+			"country" : "Singapore",
+			"phone" : "555-8787"
+		}
+	},
+	{
+		"supplierID" : 21,
+		"companyName" : "Lyngbysild",
+		"contactName" : "Niels Petersen",
+		"contactTitle" : "Sales Manager",
+		"address" : {
+			"street" : "Lyngbysild Fiskebakken 10",
+			"city" : "Lyngby",
+			"region" : "NULL",
+			"postalCode" : 2800,
+			"country" : "Denmark",
+			"phone" : 43844108
+		}
+	},
+	{
+		"supplierID" : 22,
+		"companyName" : "Zaanse Snoepfabriek",
+		"contactName" : "Dirk Luchte",
+		"contactTitle" : "Accounting Manager",
+		"address" : {
+			"street" : "Verkoop Rijnweg 22",
+			"city" : "Zaandam",
+			"region" : "NULL",
+			"postalCode" : "9999 ZZ",
+			"country" : "Netherlands",
+			"phone" : "(12345) 1212"
+		}
+	},
+	{
+		"supplierID" : 25,
+		"companyName" : "Ma Maison",
+		"contactName" : "Jean-Guy Lauzon",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "2960 Rue St. Laurent",
+			"city" : "Montréal",
+			"region" : "Québec",
+			"postalCode" : "H1J 1C3",
+			"country" : "Canada",
+			"phone" : "(514) 555-9022"
+		}
+	},
+	{
+		"supplierID" : 27,
+		"companyName" : "Escargots Nouveaux",
+		"contactName" : "Marie Delamare",
+		"contactTitle" : "Sales Manager",
+		"address" : {
+			"street" : "22 rue H. Voiron",
+			"city" : "Montceau",
+			"region" : "NULL",
+			"postalCode" : 71300,
+			"country" : "France",
+			"phone" : "85.57.00.07"
+		}
+	},
+	{
+		"supplierID" : 26,
+		"companyName" : "Pasta Buttini s.r.l.",
+		"contactName" : "Giovanni Giudici",
+		"contactTitle" : "Order Administrator",
+		"address" : {
+			"street" : "Via dei Gelsomini 153",
+			"city" : "Salerno",
+			"region" : "NULL",
+			"postalCode" : 84100,
+			"country" : "Italy",
+			"phone" : "(089) 6547665"
+		}
+	},
+	{
+		"supplierID" : 28,
+		"companyName" : "Gai pâturage",
+		"contactName" : "Eliane Noz",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "Bat. B 3 rue des Alpes",
+			"city" : "Annecy",
+			"region" : "NULL",
+			"postalCode" : 74000,
+			"country" : "France",
+			"phone" : "38.76.98.06"
+		}
+	},
+	{
+		"supplierID" : 23,
+		"companyName" : "Karkki Oy",
+		"contactName" : "Anne Heikkonen",
+		"contactTitle" : "Product Manager",
+		"address" : {
+			"street" : "Valtakatu 12",
+			"city" : "Lappeenranta",
+			"region" : "NULL",
+			"postalCode" : 53120,
+			"country" : "Finland",
+			"phone" : "(953) 10956"
+		}
+	},
+	{
+		"supplierID" : 24,
+		"companyName" : "G'day Mate",
+		"contactName" : "Wendy Mackenzie",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "170 Prince Edward Parade Hunter's Hill",
+			"city" : "Sydney",
+			"region" : "NSW",
+			"postalCode" : 2042,
+			"country" : "Australia",
+			"phone" : "(02) 555-5914"
+		}
+	},
+	{
+		"supplierID" : 29,
+		"companyName" : "Forêts d'érables",
+		"contactName" : "Chantal Goulet",
+		"contactTitle" : "Accounting Manager",
+		"address" : {
+			"street" : "148 rue Chasseur",
+			"city" : "Ste-Hyacinthe",
+			"region" : "Québec",
+			"postalCode" : "J2S 7S8",
+			"country" : "Canada",
+			"phone" : "(514) 555-2955"
+		}
+	}
+]
diff --git a/vue-options-api-demos/grid/compact-grid/ChangeComponent.vue b/vue-options-api-demos/grid/compact-grid/ChangeComponent.vue
new file mode 100644
index 00000000..2d70a20d
--- /dev/null
+++ b/vue-options-api-demos/grid/compact-grid/ChangeComponent.vue
@@ -0,0 +1,22 @@
+<template>
+  <td>
+    <span :style="getStyle"> {{ changeFieldValue }}</span>
+  </td>
+</template>
+<script>
+export default {
+  props: {
+    dataItem: Object,
+  },
+  computed: {
+    getStyle() {
+      return this.changeFieldValue < 0 ? { color: 'red' } : { color: 'blue' };
+    },
+    changeFieldValue() {
+      return (this.$props.dataItem.close - this.$props.dataItem.open).toFixed(
+        2
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/compact-grid/ChangePercentageComponent.vue b/vue-options-api-demos/grid/compact-grid/ChangePercentageComponent.vue
new file mode 100644
index 00000000..e6f64790
--- /dev/null
+++ b/vue-options-api-demos/grid/compact-grid/ChangePercentageComponent.vue
@@ -0,0 +1,30 @@
+<template>
+  <td>
+    <span :style="getStyle"> {{ formatNumber(changeFieldValue, 'p2') }}</span>
+  </td>
+</template>
+<script>
+import { formatNumber } from '@progress/kendo-intl';
+
+export default {
+  props: {
+    dataItem: Object,
+  },
+  data() {
+    return {
+      formatNumber,
+    };
+  },
+  computed: {
+    getStyle() {
+      return this.changeFieldValue < 0 ? { color: 'red' } : undefined;
+    },
+    changeFieldValue() {
+      return (
+        (this.$props.dataItem.close - this.$props.dataItem.open) /
+        this.$props.dataItem.open
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/compact-grid/GridComponent.vue b/vue-options-api-demos/grid/compact-grid/GridComponent.vue
new file mode 100644
index 00000000..a52d43ca
--- /dev/null
+++ b/vue-options-api-demos/grid/compact-grid/GridComponent.vue
@@ -0,0 +1,146 @@
+<template>
+  <Grid
+    :style="{ height: '525px', margin: '8px' }"
+    :size="size"
+    :data-items="result"
+    :columns="columns"
+    :pageable="true"
+    :skip="skip"
+    :take="take"
+    :total="total"
+    @pagechange="pageChangeHandler"
+  >
+    <template v-slot:changeComponent="{ props }">
+      <ChangeComponent v-bind="props"
+    /></template>
+    <template v-slot:changePercentageComponent="{ props }">
+      <ChangePercentageComponent v-bind="props"
+    /></template>
+
+    <GridToolbar :size="size">
+      <div>
+        {{ size === "small" ? "Compact Size Grid." : "Default Size Grid" }}
+      </div>
+      <span class="k-toolbar-spacer"></span>
+      <KButton :svg-icon="fileExcelIcon" @click="exportExcel">
+        Export to Excel
+      </KButton>
+    </GridToolbar>
+  </Grid>
+</template>
+<script>
+import { Grid, GridToolbar } from "@progress/kendo-vue-grid";
+import { Button as KButton } from "@progress/kendo-vue-buttons";
+import { saveExcel } from "@progress/kendo-vue-excel-export";
+import { fileExcelIcon } from "@progress/kendo-svg-icons";
+
+import ChangeComponent from "./ChangeComponent.vue";
+import ChangePercentageComponent from "./ChangePercentageComponent.vue";
+import companyData from "./companyData.json";
+
+export default {
+  components: {
+    Grid,
+    GridToolbar,
+    KButton,
+    ChangeComponent,
+    ChangePercentageComponent,
+  },
+  props: {
+    size: { type: String, default: "medium" },
+  },
+  data: function () {
+    return {
+      fileExcelIcon,
+      dataItems: companyData,
+      columns: [
+        {
+          field: "symbol",
+          title: "Name",
+          width: "75px",
+        },
+        {
+          field: "date",
+          title: "Date",
+          type: "date",
+          width: "74px",
+          format: "{0:dd MMM}",
+        },
+        {
+          field: "chng",
+          title: "Chng",
+          width: "67px",
+          cell: "changeComponent",
+        },
+        {
+          field: "%Chng",
+          title: "%Chng",
+          width: "100px",
+          cell: "changePercentageComponent",
+        },
+        {
+          field: "close",
+          title: "Close",
+          type: "number",
+          width: "93px",
+          format: "{0:c2}",
+        },
+        {
+          field: "open",
+          title: "Open",
+          width: "93px",
+          format: "{0:c2}",
+        },
+        {
+          field: "low",
+          title: "DLow",
+          width: "93px",
+          format: "{0:c2}",
+        },
+        {
+          field: "high",
+          title: "DHigh",
+          width: "93px",
+          format: "{0:c2}",
+        },
+        {
+          field: "volume",
+          title: "Volume",
+          width: "107px",
+        },
+      ],
+      skip: 0,
+      take: 15,
+    };
+  },
+  computed: {
+    result: {
+      get: function () {
+        return this.dataItems.slice(this.skip, this.take + this.skip);
+      },
+    },
+    total() {
+      return this.dataItems ? this.dataItems.length : 0;
+    },
+  },
+  methods: {
+    pageChangeHandler: function (event) {
+      this.loader = false;
+      this.skip = event.page.skip;
+      this.take = event.page.take;
+    },
+    exportExcel() {
+      saveExcel({
+        data: this.dataItems,
+        fileName: "myFile",
+        columns: this.columns,
+      });
+    },
+  },
+};
+</script>
+<style>
+.buttons {
+  margin-right: 10px;
+}
+</style>
diff --git a/vue-options-api-demos/grid/compact-grid/companyData.json b/vue-options-api-demos/grid/compact-grid/companyData.json
new file mode 100644
index 00000000..fc8558eb
--- /dev/null
+++ b/vue-options-api-demos/grid/compact-grid/companyData.json
@@ -0,0 +1,1002 @@
+[
+  {
+    "id": 1,
+    "symbol": "BA",
+    "date": "2009-01-03T00:00:00",
+    "open": 41.62,
+    "high": 41.69,
+    "low": 39.81,
+    "close": 40.12,
+    "volume": 2632000
+  },
+  {
+    "id": 2,
+    "symbol": "BA",
+    "date": "2009-01-04T00:00:00",
+    "open": 39.88,
+    "high": 41.12,
+    "low": 39.75,
+    "close": 40.12,
+    "volume": 3584700
+  },
+  {
+    "id": 3,
+    "symbol": "BA",
+    "date": "2009-01-05T00:00:00",
+    "open": 42.0,
+    "high": 43.31,
+    "low": 41.38,
+    "close": 42.62,
+    "volume": 7631700
+  },
+  {
+    "id": 4,
+    "symbol": "BA",
+    "date": "2009-01-06T00:00:00",
+    "open": 42.25,
+    "high": 43.44,
+    "low": 41.12,
+    "close": 43.06,
+    "volume": 4922200
+  },
+  {
+    "id": 5,
+    "symbol": "BA",
+    "date": "2009-01-07T00:00:00",
+    "open": 43.88,
+    "high": 44.88,
+    "low": 43.69,
+    "close": 44.12,
+    "volume": 6008300
+  },
+  {
+    "id": 6,
+    "symbol": "BA",
+    "date": "2009-01-10T00:00:00",
+    "open": 44.31,
+    "high": 44.5,
+    "low": 43.5,
+    "close": 43.69,
+    "volume": 2400000
+  },
+  {
+    "id": 7,
+    "symbol": "BA",
+    "date": "2009-01-11T00:00:00",
+    "open": 43.38,
+    "high": 43.94,
+    "low": 42.75,
+    "close": 42.88,
+    "volume": 2450200
+  },
+  {
+    "id": 8,
+    "symbol": "BA",
+    "date": "2009-01-12T00:00:00",
+    "open": 42.75,
+    "high": 44.19,
+    "low": 42.5,
+    "close": 43.06,
+    "volume": 2326900
+  },
+  {
+    "id": 9,
+    "symbol": "BA",
+    "date": "2009-01-13T00:00:00",
+    "open": 43.31,
+    "high": 43.38,
+    "low": 42.0,
+    "close": 42.38,
+    "volume": 3030100
+  },
+  {
+    "id": 10,
+    "symbol": "BA",
+    "date": "2009-01-14T00:00:00",
+    "open": 43.62,
+    "high": 44.25,
+    "low": 42.94,
+    "close": 44.0,
+    "volume": 3834900
+  },
+  {
+    "id": 11,
+    "symbol": "BA",
+    "date": "2009-01-18T00:00:00",
+    "open": 43.88,
+    "high": 45.0,
+    "low": 43.12,
+    "close": 45.0,
+    "volume": 5859100
+  },
+  {
+    "id": 12,
+    "symbol": "BA",
+    "date": "2009-01-19T00:00:00",
+    "open": 45.38,
+    "high": 48.12,
+    "low": 45.25,
+    "close": 47.62,
+    "volume": 11457600
+  },
+  {
+    "id": 13,
+    "symbol": "BA",
+    "date": "2009-01-20T00:00:00",
+    "open": 47.56,
+    "high": 47.88,
+    "low": 45.75,
+    "close": 46.5,
+    "volume": 8931100
+  },
+  {
+    "id": 14,
+    "symbol": "BA",
+    "date": "2009-01-21T00:00:00",
+    "open": 46.94,
+    "high": 46.94,
+    "low": 45.0,
+    "close": 45.69,
+    "volume": 4390000
+  },
+  {
+    "id": 15,
+    "symbol": "BA",
+    "date": "2009-01-24T00:00:00",
+    "open": 45.81,
+    "high": 46.19,
+    "low": 43.62,
+    "close": 44.31,
+    "volume": 3296200
+  },
+  {
+    "id": 16,
+    "symbol": "BA",
+    "date": "2009-01-25T00:00:00",
+    "open": 45.0,
+    "high": 46.0,
+    "low": 44.75,
+    "close": 45.69,
+    "volume": 5052200
+  },
+  {
+    "id": 17,
+    "symbol": "BA",
+    "date": "2009-01-26T00:00:00",
+    "open": 45.69,
+    "high": 46.5,
+    "low": 45.0,
+    "close": 46.19,
+    "volume": 3090100
+  },
+  {
+    "id": 18,
+    "symbol": "BA",
+    "date": "2009-01-27T00:00:00",
+    "open": 46.0,
+    "high": 46.88,
+    "low": 44.88,
+    "close": 45.06,
+    "volume": 3329100
+  },
+  {
+    "id": 19,
+    "symbol": "BA",
+    "date": "2009-01-28T00:00:00",
+    "open": 44.81,
+    "high": 45.62,
+    "low": 44.5,
+    "close": 44.62,
+    "volume": 2258400
+  },
+  {
+    "id": 20,
+    "symbol": "BA",
+    "date": "2009-01-31T00:00:00",
+    "open": 44.0,
+    "high": 44.56,
+    "low": 43.94,
+    "close": 44.5,
+    "volume": 2340500
+  },
+  {
+    "id": 21,
+    "symbol": "BA",
+    "date": "2009-02-01T00:00:00",
+    "open": 43.88,
+    "high": 44.19,
+    "low": 43.31,
+    "close": 43.75,
+    "volume": 2670800
+  },
+  {
+    "id": 22,
+    "symbol": "BA",
+    "date": "2009-02-02T00:00:00",
+    "open": 43.38,
+    "high": 45.19,
+    "low": 43.38,
+    "close": 44.62,
+    "volume": 3295500
+  },
+  {
+    "id": 23,
+    "symbol": "BA",
+    "date": "2009-02-03T00:00:00",
+    "open": 45.0,
+    "high": 45.06,
+    "low": 43.12,
+    "close": 43.44,
+    "volume": 2886400
+  },
+  {
+    "id": 24,
+    "symbol": "BA",
+    "date": "2009-02-04T00:00:00",
+    "open": 43.75,
+    "high": 44.19,
+    "low": 42.56,
+    "close": 44.0,
+    "volume": 2927200
+  },
+  {
+    "id": 25,
+    "symbol": "BA",
+    "date": "2009-02-07T00:00:00",
+    "open": 43.88,
+    "high": 43.88,
+    "low": 41.69,
+    "close": 41.81,
+    "volume": 3024400
+  },
+  {
+    "id": 26,
+    "symbol": "BA",
+    "date": "2009-02-08T00:00:00",
+    "open": 41.94,
+    "high": 42.06,
+    "low": 40.0,
+    "close": 41.0,
+    "volume": 5097700
+  },
+  {
+    "id": 27,
+    "symbol": "BA",
+    "date": "2009-02-09T00:00:00",
+    "open": 40.25,
+    "high": 40.25,
+    "low": 38.38,
+    "close": 39.0,
+    "volume": 5535800
+  },
+  {
+    "id": 28,
+    "symbol": "BA",
+    "date": "2009-02-10T00:00:00",
+    "open": 38.81,
+    "high": 40.19,
+    "low": 38.75,
+    "close": 39.75,
+    "volume": 4040600
+  },
+  {
+    "id": 29,
+    "symbol": "BA",
+    "date": "2009-02-11T00:00:00",
+    "open": 39.75,
+    "high": 40.38,
+    "low": 39.12,
+    "close": 39.88,
+    "volume": 3127800
+  },
+  {
+    "id": 30,
+    "symbol": "BA",
+    "date": "2009-02-14T00:00:00",
+    "open": 39.62,
+    "high": 39.69,
+    "low": 38.06,
+    "close": 38.25,
+    "volume": 2605900
+  },
+  {
+    "id": 31,
+    "symbol": "BA",
+    "date": "2009-02-15T00:00:00",
+    "open": 38.12,
+    "high": 38.69,
+    "low": 37.38,
+    "close": 38.5,
+    "volume": 3947800
+  },
+  {
+    "id": 32,
+    "symbol": "BA",
+    "date": "2009-02-16T00:00:00",
+    "open": 37.75,
+    "high": 37.94,
+    "low": 36.88,
+    "close": 37.25,
+    "volume": 3423000
+  },
+  {
+    "id": 33,
+    "symbol": "BA",
+    "date": "2009-02-17T00:00:00",
+    "open": 37.25,
+    "high": 37.88,
+    "low": 36.56,
+    "close": 37.5,
+    "volume": 3400500
+  },
+  {
+    "id": 34,
+    "symbol": "BA",
+    "date": "2009-02-18T00:00:00",
+    "open": 37.38,
+    "high": 37.5,
+    "low": 35.88,
+    "close": 36.0,
+    "volume": 5536500
+  },
+  {
+    "id": 35,
+    "symbol": "BA",
+    "date": "2009-02-22T00:00:00",
+    "open": 35.94,
+    "high": 39.94,
+    "low": 35.88,
+    "close": 38.88,
+    "volume": 4768400
+  },
+  {
+    "id": 36,
+    "symbol": "BA",
+    "date": "2009-02-23T00:00:00",
+    "open": 38.62,
+    "high": 38.69,
+    "low": 37.06,
+    "close": 37.12,
+    "volume": 3880800
+  },
+  {
+    "id": 37,
+    "symbol": "BA",
+    "date": "2009-02-24T00:00:00",
+    "open": 36.88,
+    "high": 37.0,
+    "low": 35.88,
+    "close": 36.56,
+    "volume": 4198300
+  },
+  {
+    "id": 38,
+    "symbol": "BA",
+    "date": "2009-02-25T00:00:00",
+    "open": 37.06,
+    "high": 38.0,
+    "low": 36.81,
+    "close": 37.81,
+    "volume": 3170600
+  },
+  {
+    "id": 39,
+    "symbol": "BA",
+    "date": "2009-02-28T00:00:00",
+    "open": 37.5,
+    "high": 37.62,
+    "low": 36.56,
+    "close": 37.0,
+    "volume": 3573300
+  },
+  {
+    "id": 40,
+    "symbol": "BA",
+    "date": "2009-02-28T00:00:00",
+    "open": 37.19,
+    "high": 37.62,
+    "low": 36.12,
+    "close": 36.94,
+    "volume": 3503100
+  },
+  {
+    "id": 41,
+    "symbol": "BA",
+    "date": "2009-03-01T00:00:00",
+    "open": 36.94,
+    "high": 36.62,
+    "low": 35.94,
+    "close": 36.31,
+    "volume": 2838000
+  },
+  {
+    "id": 42,
+    "symbol": "BA",
+    "date": "2009-03-02T00:00:00",
+    "open": 35.94,
+    "high": 37.19,
+    "low": 35.38,
+    "close": 35.94,
+    "volume": 4053200
+  },
+  {
+    "id": 43,
+    "symbol": "BA",
+    "date": "2009-03-03T00:00:00",
+    "open": 35.94,
+    "high": 36.5,
+    "low": 35.69,
+    "close": 35.94,
+    "volume": 3884100
+  },
+  {
+    "id": 44,
+    "symbol": "BA",
+    "date": "2009-03-06T00:00:00",
+    "open": 35.94,
+    "high": 36.19,
+    "low": 35.0,
+    "close": 35.12,
+    "volume": 2879500
+  },
+  {
+    "id": 45,
+    "symbol": "BA",
+    "date": "2009-03-07T00:00:00",
+    "open": 35.12,
+    "high": 35.12,
+    "low": 34.12,
+    "close": 34.75,
+    "volume": 3565000
+  },
+  {
+    "id": 46,
+    "symbol": "BA",
+    "date": "2009-03-08T00:00:00",
+    "open": 34.0,
+    "high": 34.19,
+    "low": 33.38,
+    "close": 33.38,
+    "volume": 4134600
+  },
+  {
+    "id": 47,
+    "symbol": "BA",
+    "date": "2009-03-09T00:00:00",
+    "open": 33.5,
+    "high": 34.5,
+    "low": 33.25,
+    "close": 33.75,
+    "volume": 3236700
+  },
+  {
+    "id": 48,
+    "symbol": "BA",
+    "date": "2009-03-10T00:00:00",
+    "open": 33.94,
+    "high": 33.94,
+    "low": 32.31,
+    "close": 33.25,
+    "volume": 5080300
+  },
+  {
+    "id": 49,
+    "symbol": "BA",
+    "date": "2009-03-13T00:00:00",
+    "open": 32.25,
+    "high": 33.12,
+    "low": 32.0,
+    "close": 32.62,
+    "volume": 3420200
+  },
+  {
+    "id": 50,
+    "symbol": "BA",
+    "date": "2009-03-14T00:00:00",
+    "open": 32.75,
+    "high": 33.81,
+    "low": 32.44,
+    "close": 33.06,
+    "volume": 3727900
+  },
+  {
+    "id": 51,
+    "symbol": "BA",
+    "date": "2009-03-15T00:00:00",
+    "open": 32.88,
+    "high": 35.5,
+    "low": 32.81,
+    "close": 34.88,
+    "volume": 4859300
+  },
+  {
+    "id": 52,
+    "symbol": "BA",
+    "date": "2009-03-16T00:00:00",
+    "open": 35.0,
+    "high": 35.94,
+    "low": 34.69,
+    "close": 35.62,
+    "volume": 4725200
+  },
+  {
+    "id": 53,
+    "symbol": "BA",
+    "date": "2009-03-17T00:00:00",
+    "open": 37.25,
+    "high": 38.94,
+    "low": 36.0,
+    "close": 37.19,
+    "volume": 15099400
+  },
+  {
+    "id": 54,
+    "symbol": "BA",
+    "date": "2009-03-20T00:00:00",
+    "open": 37.19,
+    "high": 37.69,
+    "low": 36.38,
+    "close": 37.0,
+    "volume": 5786400
+  },
+  {
+    "id": 55,
+    "symbol": "BA",
+    "date": "2009-03-21T00:00:00",
+    "open": 37.19,
+    "high": 37.44,
+    "low": 36.19,
+    "close": 36.56,
+    "volume": 4153400
+  },
+  {
+    "id": 56,
+    "symbol": "BA",
+    "date": "2009-03-22T00:00:00",
+    "open": 36.94,
+    "high": 37.19,
+    "low": 35.75,
+    "close": 36.38,
+    "volume": 3358600
+  },
+  {
+    "id": 57,
+    "symbol": "BA",
+    "date": "2009-03-23T00:00:00",
+    "open": 35.62,
+    "high": 35.94,
+    "low": 34.81,
+    "close": 35.12,
+    "volume": 4080400
+  },
+  {
+    "id": 58,
+    "symbol": "BA",
+    "date": "2009-03-24T00:00:00",
+    "open": 36.0,
+    "high": 36.44,
+    "low": 35.5,
+    "close": 36.12,
+    "volume": 5797400
+  },
+  {
+    "id": 59,
+    "symbol": "BA",
+    "date": "2009-03-27T00:00:00",
+    "open": 36.25,
+    "high": 37.31,
+    "low": 36.12,
+    "close": 37.12,
+    "volume": 2534000
+  },
+  {
+    "id": 60,
+    "symbol": "BA",
+    "date": "2009-03-28T00:00:00",
+    "open": 36.94,
+    "high": 38.19,
+    "low": 36.88,
+    "close": 38.0,
+    "volume": 5056400
+  },
+  {
+    "id": 61,
+    "symbol": "BA",
+    "date": "2009-03-29T00:00:00",
+    "open": 37.75,
+    "high": 38.19,
+    "low": 37.31,
+    "close": 37.88,
+    "volume": 2731000
+  },
+  {
+    "id": 62,
+    "symbol": "BA",
+    "date": "2009-03-30T00:00:00",
+    "open": 37.88,
+    "high": 38.94,
+    "low": 37.62,
+    "close": 38.62,
+    "volume": 3266100
+  },
+  {
+    "id": 63,
+    "symbol": "BA",
+    "date": "2009-03-31T00:00:00",
+    "open": 38.75,
+    "high": 38.81,
+    "low": 37.81,
+    "close": 37.81,
+    "volume": 4630100
+  },
+  {
+    "id": 64,
+    "symbol": "BA",
+    "date": "2009-04-03T00:00:00",
+    "open": 37.75,
+    "high": 37.75,
+    "low": 37.06,
+    "close": 37.19,
+    "volume": 3234700
+  },
+  {
+    "id": 65,
+    "symbol": "BA",
+    "date": "2009-04-04T00:00:00",
+    "open": 37.38,
+    "high": 38.25,
+    "low": 36.56,
+    "close": 37.31,
+    "volume": 4002100
+  },
+  {
+    "id": 66,
+    "symbol": "BA",
+    "date": "2009-04-05T00:00:00",
+    "open": 36.88,
+    "high": 37.25,
+    "low": 36.0,
+    "close": 36.06,
+    "volume": 2860900
+  },
+  {
+    "id": 67,
+    "symbol": "BA",
+    "date": "2009-04-06T00:00:00",
+    "open": 36.0,
+    "high": 36.44,
+    "low": 35.62,
+    "close": 36.12,
+    "volume": 2941900
+  },
+  {
+    "id": 68,
+    "symbol": "BA",
+    "date": "2009-04-07T00:00:00",
+    "open": 36.19,
+    "high": 36.31,
+    "low": 35.38,
+    "close": 35.69,
+    "volume": 2381600
+  },
+  {
+    "id": 69,
+    "symbol": "BA",
+    "date": "2009-04-10T00:00:00",
+    "open": 35.5,
+    "high": 35.62,
+    "low": 35.0,
+    "close": 35.06,
+    "volume": 2452600
+  },
+  {
+    "id": 70,
+    "symbol": "BA",
+    "date": "2009-04-11T00:00:00",
+    "open": 35.0,
+    "high": 36.38,
+    "low": 35.0,
+    "close": 35.69,
+    "volume": 2251100
+  },
+  {
+    "id": 71,
+    "symbol": "BA",
+    "date": "2009-04-12T00:00:00",
+    "open": 35.94,
+    "high": 38.38,
+    "low": 35.88,
+    "close": 37.62,
+    "volume": 4620200
+  },
+  {
+    "id": 72,
+    "symbol": "BA",
+    "date": "2009-04-13T00:00:00",
+    "open": 37.62,
+    "high": 37.62,
+    "low": 36.5,
+    "close": 37.0,
+    "volume": 2916700
+  },
+  {
+    "id": 73,
+    "symbol": "BA",
+    "date": "2009-04-14T00:00:00",
+    "open": 36.0,
+    "high": 36.75,
+    "low": 34.75,
+    "close": 35.38,
+    "volume": 3744900
+  },
+  {
+    "id": 74,
+    "symbol": "BA",
+    "date": "2009-04-17T00:00:00",
+    "open": 35.12,
+    "high": 35.38,
+    "low": 34.06,
+    "close": 35.31,
+    "volume": 3739100
+  },
+  {
+    "id": 75,
+    "symbol": "BA",
+    "date": "2009-04-18T00:00:00",
+    "open": 34.62,
+    "high": 35.06,
+    "low": 34.31,
+    "close": 34.75,
+    "volume": 3378800
+  },
+  {
+    "id": 76,
+    "symbol": "BA",
+    "date": "2009-04-19T00:00:00",
+    "open": 35.94,
+    "high": 37.75,
+    "low": 35.56,
+    "close": 37.25,
+    "volume": 5709000
+  },
+  {
+    "id": 77,
+    "symbol": "BA",
+    "date": "2009-04-20T00:00:00",
+    "open": 37.5,
+    "high": 40.25,
+    "low": 37.5,
+    "close": 40.06,
+    "volume": 8110700
+  },
+  {
+    "id": 78,
+    "symbol": "BA",
+    "date": "2009-04-24T00:00:00",
+    "open": 39.62,
+    "high": 41.25,
+    "low": 37.5,
+    "close": 37.88,
+    "volume": 10087700
+  },
+  {
+    "id": 79,
+    "symbol": "BA",
+    "date": "2009-04-25T00:00:00",
+    "open": 38.25,
+    "high": 39.56,
+    "low": 38.25,
+    "close": 39.0,
+    "volume": 5397100
+  },
+  {
+    "id": 80,
+    "symbol": "BA",
+    "date": "2009-04-26T00:00:00",
+    "open": 39.19,
+    "high": 40.56,
+    "low": 39.0,
+    "close": 39.94,
+    "volume": 5338300
+  },
+  {
+    "id": 81,
+    "symbol": "BA",
+    "date": "2009-04-27T00:00:00",
+    "open": 39.0,
+    "high": 40.25,
+    "low": 38.94,
+    "close": 39.81,
+    "volume": 3176700
+  },
+  {
+    "id": 82,
+    "symbol": "BA",
+    "date": "2009-04-28T00:00:00",
+    "open": 39.62,
+    "high": 40.06,
+    "low": 38.94,
+    "close": 39.69,
+    "volume": 1853600
+  },
+  {
+    "id": 83,
+    "symbol": "BA",
+    "date": "2009-05-01T00:00:00",
+    "open": 39.69,
+    "high": 40.19,
+    "low": 39.0,
+    "close": 39.06,
+    "volume": 2886100
+  },
+  {
+    "id": 84,
+    "symbol": "BA",
+    "date": "2009-05-02T00:00:00",
+    "open": 39.06,
+    "high": 39.06,
+    "low": 37.81,
+    "close": 37.94,
+    "volume": 2549200
+  },
+  {
+    "id": 85,
+    "symbol": "BA",
+    "date": "2009-05-03T00:00:00",
+    "open": 37.31,
+    "high": 38.19,
+    "low": 36.81,
+    "close": 37.31,
+    "volume": 3311300
+  },
+  {
+    "id": 86,
+    "symbol": "BA",
+    "date": "2009-05-04T00:00:00",
+    "open": 38.25,
+    "high": 39.31,
+    "low": 37.81,
+    "close": 38.19,
+    "volume": 2981100
+  },
+  {
+    "id": 87,
+    "symbol": "BA",
+    "date": "2009-05-05T00:00:00",
+    "open": 38.0,
+    "high": 39.88,
+    "low": 37.94,
+    "close": 39.5,
+    "volume": 2792900
+  },
+  {
+    "id": 88,
+    "symbol": "BA",
+    "date": "2009-05-08T00:00:00",
+    "open": 39.0,
+    "high": 39.5,
+    "low": 38.19,
+    "close": 38.25,
+    "volume": 3146400
+  },
+  {
+    "id": 89,
+    "symbol": "BA",
+    "date": "2009-05-09T00:00:00",
+    "open": 38.5,
+    "high": 39.19,
+    "low": 38.12,
+    "close": 38.31,
+    "volume": 2567300
+  },
+  {
+    "id": 90,
+    "symbol": "BA",
+    "date": "2009-05-10T00:00:00",
+    "open": 37.75,
+    "high": 37.94,
+    "low": 36.56,
+    "close": 36.88,
+    "volume": 4820400
+  },
+  {
+    "id": 91,
+    "symbol": "BA",
+    "date": "2009-05-11T00:00:00",
+    "open": 37.12,
+    "high": 38.19,
+    "low": 37.06,
+    "close": 37.31,
+    "volume": 2887200
+  },
+  {
+    "id": 92,
+    "symbol": "BA",
+    "date": "2009-05-12T00:00:00",
+    "open": 37.62,
+    "high": 37.62,
+    "low": 37.06,
+    "close": 37.19,
+    "volume": 2453200
+  },
+  {
+    "id": 93,
+    "symbol": "BA",
+    "date": "2009-05-15T00:00:00",
+    "open": 36.62,
+    "high": 37.5,
+    "low": 36.44,
+    "close": 37.19,
+    "volume": 2913500
+  },
+  {
+    "id": 94,
+    "symbol": "BA",
+    "date": "2009-05-16T00:00:00",
+    "open": 37.19,
+    "high": 37.88,
+    "low": 36.75,
+    "close": 37.38,
+    "volume": 3815700
+  },
+  {
+    "id": 95,
+    "symbol": "BA",
+    "date": "2009-05-17T00:00:00",
+    "open": 37.0,
+    "high": 37.5,
+    "low": 36.56,
+    "close": 37.38,
+    "volume": 2739800
+  },
+  {
+    "id": 96,
+    "symbol": "BA",
+    "date": "2009-05-18T00:00:00",
+    "open": 37.12,
+    "high": 37.75,
+    "low": 37.12,
+    "close": 37.62,
+    "volume": 2050100
+  },
+  {
+    "id": 97,
+    "symbol": "BA",
+    "date": "2009-05-19T00:00:00",
+    "open": 37.0,
+    "high": 37.38,
+    "low": 36.25,
+    "close": 36.94,
+    "volume": 2193900
+  },
+  {
+    "id": 98,
+    "symbol": "BA",
+    "date": "2009-05-22T00:00:00",
+    "open": 37.38,
+    "high": 37.69,
+    "low": 36.25,
+    "close": 36.56,
+    "volume": 2966000
+  },
+  {
+    "id": 99,
+    "symbol": "BA",
+    "date": "2009-05-23T00:00:00",
+    "open": 36.62,
+    "high": 37.94,
+    "low": 36.62,
+    "close": 37.12,
+    "volume": 2850600
+  },
+  {
+    "id": 100,
+    "symbol": "BA",
+    "date": "2009-05-24T00:00:00",
+    "open": 37.25,
+    "high": 39.0,
+    "low": 37.19,
+    "close": 38.88,
+    "volume": 4642600
+  }
+]
diff --git a/vue-options-api-demos/grid/compact-grid/main.js b/vue-options-api-demos/grid/compact-grid/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/compact-grid/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/compact-grid/main.vue b/vue-options-api-demos/grid/compact-grid/main.vue
new file mode 100644
index 00000000..cee977fe
--- /dev/null
+++ b/vue-options-api-demos/grid/compact-grid/main.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-grid-container">
+    <div class="demo-compact-grid">
+      <Grid :size="'small'" />
+    </div>
+    <div class="demo-default-grid">
+      <Grid :size="'medium'" />
+    </div>
+  </div>
+</template>
+<script>
+import Grid from './GridComponent.vue';
+
+export default {
+  components: {
+    Grid,
+  },
+};
+</script>
+<style>
+@media screen and (min-width: 961px) {
+  .demo-grid-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    gap: 1.5em;
+  }
+  .demo-compact-grid > div,
+  .demo-default-grid > div {
+    width: 49%;
+  }
+}
+@media screen and (max-width: 960px) {
+  .demo-grid-container {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    gap: 1.5em;
+  }
+  .demo-compact-grid,
+  .demo-default-grid {
+    width: 100%;
+  }
+}
+
+.demo-compact-grid,
+.demo-default-grid {
+  display: contents;
+}
+</style>
diff --git a/vue-options-api-demos/grid/custom-rendering/cells/component/ComponentInstance.vue b/vue-options-api-demos/grid/custom-rendering/cells/component/ComponentInstance.vue
new file mode 100644
index 00000000..6fdb6b41
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/cells/component/ComponentInstance.vue
@@ -0,0 +1,37 @@
+<template>
+<td :class="className" @click="clickHandler"><b>{{ getNestedValue(field, dataItem)}}</b></td>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+
+function nestedValue(fieldName, dataItem) {
+    const path = fieldName.split('.');
+    let data = dataItem;
+    path.forEach((p) => {
+        data = data ? data[p] : undefined;
+    });
+
+    return data;
+}
+
+export default {
+    props: {
+        field: String,
+        dataItem: Object,
+        format: String,
+        className: String,
+        columnIndex: Number,
+        columnsCount: Number,
+        rowType: String,
+        level: Number,
+        expanded: Boolean,
+        editor: String,
+    },
+    methods: {
+        clickHandler: function(e){
+            this.$emit('custom', e);
+        },
+        getNestedValue: nestedValue
+    }
+}
+</script>
diff --git a/vue-options-api-demos/grid/custom-rendering/cells/component/main.js b/vue-options-api-demos/grid/custom-rendering/cells/component/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/cells/component/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/custom-rendering/cells/component/main.vue b/vue-options-api-demos/grid/custom-rendering/cells/component/main.vue
new file mode 100644
index 00000000..b29f8db6
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/cells/component/main.vue
@@ -0,0 +1,56 @@
+<template>
+  <grid
+            :style="{height: '280px'}"
+            :data-items="items"
+            :cell-render="cellTemplate"
+            :columns="columns"
+            @custom="customHandler">
+      </grid>
+</template>
+<script>
+import { markRaw } from 'vue';
+import { Grid } from '@progress/kendo-vue-grid';
+import ComponentInstance from './ComponentInstance.vue';
+
+export default {
+    components: {
+        'grid': Grid
+    },
+    data: function () {
+        return {
+            cellTemplate: markRaw(ComponentInstance),
+            columns: [
+                { field: 'ProductID'},
+                { field: 'ProductName', title: 'Product Name' },
+                { field: 'UnitPrice', title: 'Unit Price' }
+            ],
+            items: [{
+                "ProductID": 1,
+                "ProductName": "Chai",
+                "UnitPrice": 18.0000,
+            },
+            {
+                "ProductID": 2,
+                "ProductName": "Chang",
+                "UnitPrice": 19.0000,
+            },
+            {
+                "ProductID": 3,
+                "ProductName": "Aniseed Syrup",
+                "UnitPrice": 10.0000,
+            },
+            {
+                "ProductID": 4,
+                "ProductName": "Chef Anton's Cajun Seasoning",
+                "UnitPrice": 22.0000,
+            }]
+        };
+    },
+    methods: {
+        customHandler: function(e){
+            console.log('customHandler', e);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/custom-rendering/cells/function/main.js b/vue-options-api-demos/grid/custom-rendering/cells/function/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/cells/function/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/custom-rendering/cells/function/main.vue b/vue-options-api-demos/grid/custom-rendering/cells/function/main.vue
new file mode 100644
index 00000000..3b29b356
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/cells/function/main.vue
@@ -0,0 +1,61 @@
+<template>
+  <grid
+            :style="{height: '280px'}"
+            :data-items="items"
+            :columns="columns"
+            @custom="customHandler">
+      </grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+
+export default {
+    components: {
+        'grid': Grid
+    },
+     data: function () {
+        return {
+            columns: [
+                { field: 'ProductID'},
+                { field: 'ProductName', title: 'Product Name' },
+                { field: 'UnitPrice', title: 'Unit Price', cell: this.cellFunction }
+            ],
+            items: [{
+                "ProductID": 1,
+                "ProductName": "Chai",
+                "UnitPrice": 18.0000,
+            },
+            {
+                "ProductID": 2,
+                "ProductName": "Chang",
+                "UnitPrice": 19.0000,
+            },
+            {
+                "ProductID": 3,
+                "ProductName": "Aniseed Syrup",
+                "UnitPrice": 10.0000,
+            },
+            {
+                "ProductID": 4,
+                "ProductName": "Chef Anton's Cajun Seasoning",
+                "UnitPrice": 22.0000,
+            }]
+        };
+    },
+    methods: {
+        customHandler: function(e){
+            console.log('customHandler', e);
+        },
+        cellFunction: function (h, tdElement , props, listeners ) {
+            return h('td', {
+                on: {
+                    click: function(e){
+                        listeners.custom(e);
+                    }
+                }
+            }, ['custom ' + props.dataItem.UnitPrice]);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/custom-rendering/cells/slot/main.js b/vue-options-api-demos/grid/custom-rendering/cells/slot/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/cells/slot/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/custom-rendering/cells/slot/main.vue b/vue-options-api-demos/grid/custom-rendering/cells/slot/main.vue
new file mode 100644
index 00000000..161ac4be
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/cells/slot/main.vue
@@ -0,0 +1,65 @@
+<template>
+  <grid
+            :style="{height: '280px'}"
+            :data-items="items"
+            :cell-render="'myTemplate'"
+            :columns="columns"
+            @custom="customHandler">
+         <template v-slot:myTemplate="{props, listeners}">
+            <td  :class="props.className"><b>{{ getNestedValue(props.field, props.dataItem) }}</b></td>
+        </template>
+      </grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+
+export default {
+    components: {
+        'grid': Grid
+    },
+    data: function () {
+        return {
+            columns: [
+                { field: 'ProductID'},
+                { field: 'ProductName', title: 'Product Name' },
+                { field: 'UnitPrice', title: 'Unit Price' }
+            ],
+            items: [{
+                "ProductID": 1,
+                "ProductName": "Chai",
+                "UnitPrice": 18.0000,
+            },
+            {
+                "ProductID": 2,
+                "ProductName": "Chang",
+                "UnitPrice": 19.0000,
+            },
+            {
+                "ProductID": 3,
+                "ProductName": "Aniseed Syrup",
+                "UnitPrice": 10.0000,
+            },
+            {
+                "ProductID": 4,
+                "ProductName": "Chef Anton's Cajun Seasoning",
+                "UnitPrice": 22.0000,
+            }]
+        };
+    },
+    methods: {
+        customHandler: function(e){
+            console.log('customHandler', e);
+        },
+        getNestedValue: function(fieldName, dataItem) {
+            const path = fieldName.split('.');
+            let data = dataItem;
+            path.forEach((p) => {
+                data = data ? data[p] : undefined;
+            });
+
+            return data;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/custom-rendering/detail/DetailComponent.vue b/vue-options-api-demos/grid/custom-rendering/detail/DetailComponent.vue
new file mode 100644
index 00000000..0cc16731
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/detail/DetailComponent.vue
@@ -0,0 +1,27 @@
+<template>
+<section>
+    <p><strong>Descriptions:</strong> {{dataItem.Descriptions}}</p>
+</section>
+</template>
+<script>
+import { filterBy } from '@progress/kendo-data-query';
+import { products } from './products';
+
+export default {
+    props: {
+        dataItem: Object
+    },
+    data () {
+        return {
+            products: products
+        }
+    },
+    computed: {
+        getFilteredProducts() {
+            const result = filterBy(this.products, {field: 'Category.CategoryID', operator: 'eq', value: this.dataItem.CategoryID});
+
+            return result;
+        }
+    },
+}
+</script>
diff --git a/vue-options-api-demos/grid/custom-rendering/detail/main.js b/vue-options-api-demos/grid/custom-rendering/detail/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/detail/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/custom-rendering/detail/main.vue b/vue-options-api-demos/grid/custom-rendering/detail/main.vue
new file mode 100644
index 00000000..c6655271
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/detail/main.vue
@@ -0,0 +1,67 @@
+<template>
+ <Grid
+    ref="grid"
+    :style="{height: '350px'}"
+    :data-items="categories"
+    :detail="cellTemplate"
+    :columns="columns"
+    @expandchange="expandChange"
+    :expand-field="'expanded'">
+    <template v-slot:myTemplate="{props}">
+        <custom :data-item="props.dataItem" />
+    </template>
+</Grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import { products } from './products';
+import DetailComponent from './DetailComponent.vue';
+
+export default {
+    components: {
+        'Grid': Grid,
+        custom: DetailComponent
+    },
+     data: function () {
+        return {
+            cellTemplate: 'myTemplate',
+            products: products,
+            expandedItems: [],
+            columns: [
+                { field: 'CategoryID', title: 'ID'},
+                { field: 'CategoryName', title: 'Name' }
+            ],
+            categories: [
+                {CategoryID: 1, CategoryName: 'Beverages', Descriptions: 'Soft drinks, coffees, teas, beers, and ales'},
+                {CategoryID: 2, CategoryName: 'Condiments', Descriptions: 'Sweet and savory sauces, relishes, spreads, and seasonings'},
+                {CategoryID: 3, CategoryName: 'Confections', Descriptions: 'Desserts, candies, and sweet breads'},
+                {CategoryID: 4, CategoryName: 'Dairy Products', Descriptions: 'Cheeses'},
+                {CategoryID: 5, CategoryName: 'Grains/Cereals', Descriptions: 'Breads, crackers, pasta, and cereal'},
+                {CategoryID: 6, CategoryName: 'Meat/Poultry', Descriptions: 'Prepared meats'},
+                {CategoryID: 7, CategoryName: 'Produce', Descriptions: 'Dried fruit and bean curd'},
+                {CategoryID: 8, CategoryName: 'Seafood', Descriptions: 'Seaweed and fish'}
+            ]
+        };
+    },
+    methods: {
+        expandChange: function (event) {
+            event.dataItem[event.target.$props.expandField] = !event.dataItem.expanded;
+            //
+            // In Vue 2 context, instead of the above line, inside the expandChange method we should have the following:
+            //
+            //   Vue.set(
+            //     event.dataItem,
+            //     event.target.$props.expandField,
+            //     event.dataItem.expanded === undefined ? false : !event.dataItem.expanded
+            //   );
+            //
+        },
+        getFilteredProducts(catId) {
+            const result = filterBy(products, {field: 'Category.CategoryID', operator: 'eq', value: catId});
+
+            return result;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/custom-rendering/detail/products.js b/vue-options-api-demos/grid/custom-rendering/detail/products.js
new file mode 100644
index 00000000..e626c67b
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/detail/products.js
@@ -0,0 +1,72 @@
+const products = [
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22.0000,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    }
+];
+
+export { products };
diff --git a/vue-options-api-demos/grid/custom-rendering/footer/component/ComponentInstance.vue b/vue-options-api-demos/grid/custom-rendering/footer/component/ComponentInstance.vue
new file mode 100644
index 00000000..6fdb6b41
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/footer/component/ComponentInstance.vue
@@ -0,0 +1,37 @@
+<template>
+<td :class="className" @click="clickHandler"><b>{{ getNestedValue(field, dataItem)}}</b></td>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+
+function nestedValue(fieldName, dataItem) {
+    const path = fieldName.split('.');
+    let data = dataItem;
+    path.forEach((p) => {
+        data = data ? data[p] : undefined;
+    });
+
+    return data;
+}
+
+export default {
+    props: {
+        field: String,
+        dataItem: Object,
+        format: String,
+        className: String,
+        columnIndex: Number,
+        columnsCount: Number,
+        rowType: String,
+        level: Number,
+        expanded: Boolean,
+        editor: String,
+    },
+    methods: {
+        clickHandler: function(e){
+            this.$emit('custom', e);
+        },
+        getNestedValue: nestedValue
+    }
+}
+</script>
diff --git a/vue-options-api-demos/grid/custom-rendering/footer/component/main.js b/vue-options-api-demos/grid/custom-rendering/footer/component/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/footer/component/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/custom-rendering/footer/component/main.vue b/vue-options-api-demos/grid/custom-rendering/footer/component/main.vue
new file mode 100644
index 00000000..0e3ccfad
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/footer/component/main.vue
@@ -0,0 +1,70 @@
+<template>
+        <grid
+            :style="{height: '280px'}"
+            :data-items="items"
+            :columns="columns">
+      </grid>
+</template>
+<script>
+import { markRaw } from 'vue';
+import { Grid } from '@progress/kendo-vue-grid';
+const items = [{
+                "ProductID": 1,
+                "ProductName": "Chai",
+                "UnitPrice": 18.0000,
+            },
+            {
+                "ProductID": 2,
+                "ProductName": "Chang",
+                "UnitPrice": 19.0000,
+            },
+            {
+                "ProductID": 3,
+                "ProductName": "Aniseed Syrup",
+                "UnitPrice": 10.0000,
+            },
+            {
+                "ProductID": 4,
+                "ProductName": "Chef Anton's Cajun Seasoning",
+                "UnitPrice": 22.0000,
+            }];
+
+const footerTemplate = {
+    props: {
+        field: String
+    },
+     data: function () {
+        return {
+            items: items
+        };
+    },
+    computed: {
+        min() {
+            return this.items.reduce((acc, current) => Math.min(acc, current[this.$props.field]), Number.MAX_VALUE);
+        },
+        max() {
+            return this.items.reduce((acc, current) => Math.max(acc, current[this.$props.field]), Number.MIN_VALUE);
+        }
+    },
+    template: `<b>
+            min: {{min}}, max: {{max}}
+        </b>`
+};
+
+export default {
+    components: {
+        'grid': Grid
+    },
+    data: function () {
+        return {
+            columns: [
+                { field: 'ProductID'},
+                { field: 'ProductName', title: 'Product Name' },
+                { field: 'UnitPrice', title: 'Unit Price', footerCell: markRaw(footerTemplate) }
+            ],
+            items: items
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/custom-rendering/footer/function/main.js b/vue-options-api-demos/grid/custom-rendering/footer/function/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/footer/function/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/custom-rendering/footer/function/main.vue b/vue-options-api-demos/grid/custom-rendering/footer/function/main.vue
new file mode 100644
index 00000000..3775c3d5
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/footer/function/main.vue
@@ -0,0 +1,58 @@
+<template>
+        <grid
+            :style="{height: '280px'}"
+            :data-items="items"
+            :columns="columns"
+            @custom="customHandler">
+      </grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+
+export default {
+    components: {
+        'grid': Grid
+    },
+     data: function () {
+        return {
+            columns: [
+                { field: 'ProductID'},
+                { field: 'ProductName', title: 'Product Name' },
+                { field: 'UnitPrice', title: 'Unit Price', 
+                footerCell: this.footerCellFunction }
+            ],
+            items: [{
+                "ProductID": 1,
+                "ProductName": "Chai",
+                "UnitPrice": 18.0000,
+            },
+            {
+                "ProductID": 2,
+                "ProductName": "Chang",
+                "UnitPrice": 19.0000,
+            },
+            {
+                "ProductID": 3,
+                "ProductName": "Aniseed Syrup",
+                "UnitPrice": 10.0000,
+            },
+            {
+                "ProductID": 4,
+                "ProductName": "Chef Anton's Cajun Seasoning",
+                "UnitPrice": 22.0000,
+            }]
+        };
+    },
+    methods: {
+        customHandler: function(e){
+            console.log('customHandler', e);
+        },
+        footerCellFunction: function (h, emptyElement , props, listeners ) {
+            return h('span', {
+                onClick: this.customHandler
+            }, ['custom ' + props.field]);
+        },
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/custom-rendering/footer/slot/main.js b/vue-options-api-demos/grid/custom-rendering/footer/slot/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/footer/slot/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/custom-rendering/footer/slot/main.vue b/vue-options-api-demos/grid/custom-rendering/footer/slot/main.vue
new file mode 100644
index 00000000..62fc56e1
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/footer/slot/main.vue
@@ -0,0 +1,55 @@
+<template>
+    <grid
+            :style="{height: '280px'}"
+            :data-items="items"
+            :columns="columns"
+            @custom="customHandler">
+         <template v-slot:footerTemplate="{props}">
+            <span @click="customHandler">{{ props.field }}</span>
+        </template>
+      </grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+
+export default {
+    components: {
+        'grid': Grid
+    },
+    data: function () {
+        return {
+            columns: [
+                { field: 'ProductID'},
+                { field: 'ProductName', title: 'Product Name' },
+                { field: 'UnitPrice', title: 'Unit Price', footerCell: 'footerTemplate'  }
+            ],
+            items: [{
+                "ProductID": 1,
+                "ProductName": "Chai",
+                "UnitPrice": 18.0000,
+            },
+            {
+                "ProductID": 2,
+                "ProductName": "Chang",
+                "UnitPrice": 19.0000,
+            },
+            {
+                "ProductID": 3,
+                "ProductName": "Aniseed Syrup",
+                "UnitPrice": 10.0000,
+            },
+            {
+                "ProductID": 4,
+                "ProductName": "Chef Anton's Cajun Seasoning",
+                "UnitPrice": 22.0000,
+            }]
+        };
+    },
+    methods: {
+        customHandler: function(e){
+            console.log('customHandler', e);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/custom-rendering/group-header/CustomCell.vue b/vue-options-api-demos/grid/custom-rendering/group-header/CustomCell.vue
new file mode 100644
index 00000000..53a5e00c
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/group-header/CustomCell.vue
@@ -0,0 +1,65 @@
+<template>
+<td v-if="renderCell" :class="className">
+      <b>{{ getNestedValue(field, dataItem)}}</b>
+    </td>
+    <td v-else-if="renderArrow" key="'g' + columnIndex" :class="'k-group-cell'" ></td>
+    <td v-else-if="columnIndex <= level" key='g-colspan'
+        :colSpan="columnsCount - columnIndex">
+      <p class="k-reset">
+        <a @click="onClick"
+           tabIndex="-1"
+           href="#"
+           :class="expanded ? 'k-i-collapse k-icon' : 'k-i-expand k-icon'"/>
+        {{dataItem[field]}} something custom
+      </p>
+    </td>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+
+function nestedValue(fieldName, dataItem) {
+    const path = fieldName.split('.');
+    let data = dataItem;
+    path.forEach((p) => {
+        data = data ? data[p] : undefined;
+    });
+
+    return data;
+}
+
+export default {
+    emits:{
+        click: null
+    },
+     props: {
+        field: String,
+        dataItem: Object,
+        format: String,
+        className: String,
+        columnIndex: Number,
+        columnsCount: Number,
+        rowType: String,
+        level: Number,
+        expanded: Boolean,
+        editor: String,
+    },
+    computed: {
+      renderArrow(){
+        var returnValue = this.columnIndex === undefined || this. level === undefined ||
+          this.columnIndex < this.level || this.columnsCount === undefined ||
+          this.rowType !== 'groupHeader' || this.dataItem[this.field] === undefined;
+        return returnValue && this.dataItem[this.field];
+      },
+      renderCell(){
+        return this.field !== undefined && this.rowType !== 'groupHeader';
+      }
+    },
+    methods: {
+        onClick(e) {
+            // @ts-ignore
+            this.$emit('click', e, this.dataItem, this.expanded);
+        },
+        getNestedValue: nestedValue
+    }
+}
+</script>
diff --git a/vue-options-api-demos/grid/custom-rendering/group-header/main.js b/vue-options-api-demos/grid/custom-rendering/group-header/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/group-header/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/custom-rendering/group-header/main.vue b/vue-options-api-demos/grid/custom-rendering/group-header/main.vue
new file mode 100644
index 00000000..b9be0d76
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/group-header/main.vue
@@ -0,0 +1,104 @@
+<template>
+    <Grid ref="grid"
+           :cell-render="cellTemplate"
+           :style="{height: '520px'}"
+           :data-items="gridData"
+           :resizable="true"
+           :reorderable="true"
+           :sortable="true"
+           :pageable="gridPageable"
+           :groupable="true"
+           :group= "group"
+           :take="take"
+           :skip="skip"
+           :expand-field="'expanded'"
+           :columns="columns"
+           @datastatechange="dataStateChange"
+           @expandchange="expandChange">
+        <template v-slot:myTemplate="{props}">
+            <custom :field="props.field"
+                    :expanded="props.expanded"
+                    :row-type="props.rowType"
+                    :level="props.level"
+                    :column-index="props.columnIndex"
+                    :columns-count="props.columnsCount"
+                    :data-item="props.dataItem"
+                    :class-name="props.className"
+                    @click="clickHandler(props.dataItem)" />
+        </template>
+     </Grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import { process } from '@progress/kendo-data-query';
+import CustomCell from './CustomCell.vue';
+
+export default {
+    components: {
+        'Grid': Grid,
+        'custom': CustomCell
+    },
+    data: function () {
+        return {
+            cellTemplate: 'myTemplate',
+            gridPageable: true,
+            products: this.createRandomData(30),
+            gridData: [],
+            skip: 0,
+            take: 10,
+            group: [ { field: 'UnitsInStock' } ],
+            columns: [
+                { field: 'ProductID', title: 'ID', width: '50px' },
+                { field: 'ProductName', title: 'Product Name' },
+                { field: 'UnitPrice', title: 'Unit Price' },
+                { field: 'UnitsInStock', title: 'Units In Stock' }
+            ]
+        };
+    },
+    created: function() {
+        this.getData();
+    },
+    methods: {
+        clickHandler(dataItem){
+            dataItem.expanded = dataItem.expanded === undefined ? false : !dataItem.expanded;
+        },
+        getData: function () {
+            this.gridData = process(this.products, {take: this.take, skip: this.skip, group: this.group});
+        },
+        createAppState: function(dataState) {
+            this.group = dataState.group;
+            this.take = dataState.take;
+            this.skip = dataState.skip;
+            this.getData();
+        },
+        dataStateChange: function (event) {
+            this.createAppState(event.data);
+        },
+        expandChange: function (event) {
+            event.dataItem[event.target.$props.expandField] = event.value;
+            //
+            // In Vue 2 context, instead of the above line, inside the expandChange method we should have the following:
+            //
+            //   Vue.set(
+            //     event.dataItem,
+            //     event.target.$props.expandField,
+            //     event.dataItem.expanded === undefined ? false : !event.dataItem.expanded
+            //   );
+            //
+        },
+        createRandomData(count) {
+            const productNames = ['Chai', 'Chang', 'Syrup', 'Apple', 'Orange', 'Banana', 'Lemon', 'Pineapple', 'Tea', 'Milk'];
+            const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120];
+            const units = [2, 7, 12, 25,  67, 233, 123, 53, 67, 89];
+
+            return Array(count).fill({}).map((_, idx) => ({
+                ProductID: idx + 1,
+                ProductName: productNames[Math.floor(Math.random() * productNames.length)],
+                UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)],
+                UnitsInStock: units[Math.floor(Math.random() * units.length)]
+            }));
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/custom-rendering/grouping/CustomCell.vue b/vue-options-api-demos/grid/custom-rendering/grouping/CustomCell.vue
new file mode 100644
index 00000000..f9b7b3ac
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/grouping/CustomCell.vue
@@ -0,0 +1,66 @@
+<template>
+<td v-if="renderCell" :class="className">
+    <b>{{ getNestedValue(field, dataItem)}}</b></td>
+<td v-else-if="renderArrow" key="'g' + columnIndex" :class="'k-group-cell'" ></td>
+<td v-else-if="columnIndex <= level" key='g-colspan'
+    :colSpan="columnsCount - columnIndex">
+    <p class="k-reset">
+        <a
+            @click="onClick"
+            tabIndex="-1"
+            href="#"
+            :class="expanded ? 'k-i-collapse k-icon' : 'k-i-expand k-icon'"
+        />
+        {{dataItem[field]}}
+    </p>
+</td>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+
+function nestedValue(fieldName, dataItem) {
+    const path = fieldName.split('.');
+    let data = dataItem;
+    path.forEach((p) => {
+        data = data ? data[p] : undefined;
+    });
+
+    return data;
+}
+
+export default {
+    emits:{
+        click: null
+    },
+    props: {
+        field: String,
+        dataItem: Object,
+        format: String,
+        className: String,
+        columnIndex: Number,
+        columnsCount: Number,
+        rowType: String,
+        level: Number,
+        expanded: Boolean,
+        editor: String,
+    },
+    computed: {
+      renderArrow(){
+        var returnValue = this.columnIndex === undefined ||this.level === undefined ||
+         this.columnIndex < this.level ||this.columnsCount === undefined ||
+          this.rowType !== 'groupHeader' || this.dataItem[this.field] === undefined;
+        return returnValue && this.dataItem[this.field];
+      },
+      renderCell(){
+        return this.field !== undefined && this.rowType !== 'groupHeader';
+      }
+    },
+    methods: {
+        onClick(e) {
+            // @ts-ignore
+            this.$emit('click', e, this.dataItem, this.expanded);
+        },
+        getNestedValue: nestedValue
+    }
+}
+</script>
diff --git a/vue-options-api-demos/grid/custom-rendering/grouping/main.js b/vue-options-api-demos/grid/custom-rendering/grouping/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/grouping/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/custom-rendering/grouping/main.vue b/vue-options-api-demos/grid/custom-rendering/grouping/main.vue
new file mode 100644
index 00000000..7665c960
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/grouping/main.vue
@@ -0,0 +1,105 @@
+<template>
+    <Grid ref="grid"
+          :cell-render="cellTemplate"
+          :style="{height: '520px'}"
+          :data-items="gridData"
+          :resizable="true"
+          :reorderable="true"
+          :sortable="true"
+          :pageable="gridPageable"
+          :groupable="true"
+          :group= "group"
+          :take="take"
+          :skip="skip"
+          :expand-field="'expanded'"
+          :columns="columns"
+          @datastatechange="dataStateChange"
+          @expandchange="expandChange">
+        <template v-slot:myTemplate="{props}">
+            <custom :field="props.field"
+                    :expanded="props.expanded"
+                    :row-type="props.rowType"
+                    :level="props.level"
+                    :column-index="props.columnIndex"
+                    :columns-count="props.columnsCount"
+                    :data-item="props.dataItem"
+                    :class-name="props.className"
+                    @click="clickHandler(props.dataItem)" />
+        </template>
+    </Grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import { process } from '@progress/kendo-data-query';
+import CustomCell from './CustomCell.vue';
+
+export default {
+    components: {
+        'Grid': Grid,
+        'custom': CustomCell
+    },
+    data: function () {
+        return {
+            cellTemplate: 'myTemplate',
+            gridPageable: { pageSizes: true },
+            products: this.createRandomData(1000),
+            gridData: [],
+            skip: 0,
+            take: 10,
+            group: [ { field: 'UnitsInStock' } ],
+            expandedItems: [],
+            columns: [
+                { field: 'ProductID', filterable: false, title: 'ID', width: '50px' },
+                { field: 'ProductName', title: 'Product Name' },
+                { field: 'UnitPrice', filter: 'numeric', title: 'Unit Price' },
+                { field: 'UnitsInStock', title: 'Units In Stock' }
+            ]
+        };
+    },
+    created: function() {
+        this.getData();
+    },
+    methods: {
+        clickHandler(dataItem){
+            dataItem.expanded = dataItem.expanded === undefined ? false : !dataItem.expanded;
+        },
+        getData: function () {
+            this.gridData = process(this.products, {take: this.take, skip: this.skip, group: this.group});
+        },
+        createAppState: function(dataState) {
+            this.group = dataState.group;
+            this.take = dataState.take;
+            this.skip = dataState.skip;
+            this.getData();
+        },
+        dataStateChange: function (event) {
+            this.createAppState(event.data);
+        },
+        expandChange: function (event) {
+            event.dataItem[event.target.$props.expandField] = event.value;
+            //
+            // In Vue 2 context, instead of the above line, inside the expandChange method we should have the following:
+            //
+            //   Vue.set(
+            //     event.dataItem,
+            //     event.target.$props.expandField,
+            //     event.dataItem.expanded === undefined ? false : !event.dataItem.expanded
+            //   );
+            //
+        },
+        createRandomData(count) {
+            const productNames = ['Chai', 'Chang', 'Syrup', 'Apple', 'Orange', 'Banana', 'Lemon', 'Pineapple', 'Tea', 'Milk'];
+            const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120];
+            const units = [2, 7, 12, 25,  67, 233, 123, 53, 67, 89];
+
+            return Array(count).fill({}).map((_, idx) => ({
+                ProductID: idx + 1,
+                ProductName: productNames[Math.floor(Math.random() * productNames.length)],
+                UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)],
+                UnitsInStock: units[Math.floor(Math.random() * units.length)]
+            }));
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/custom-rendering/headers/component/ComponentInstance.vue b/vue-options-api-demos/grid/custom-rendering/headers/component/ComponentInstance.vue
new file mode 100644
index 00000000..6fdb6b41
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/headers/component/ComponentInstance.vue
@@ -0,0 +1,37 @@
+<template>
+<td :class="className" @click="clickHandler"><b>{{ getNestedValue(field, dataItem)}}</b></td>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+
+function nestedValue(fieldName, dataItem) {
+    const path = fieldName.split('.');
+    let data = dataItem;
+    path.forEach((p) => {
+        data = data ? data[p] : undefined;
+    });
+
+    return data;
+}
+
+export default {
+    props: {
+        field: String,
+        dataItem: Object,
+        format: String,
+        className: String,
+        columnIndex: Number,
+        columnsCount: Number,
+        rowType: String,
+        level: Number,
+        expanded: Boolean,
+        editor: String,
+    },
+    methods: {
+        clickHandler: function(e){
+            this.$emit('custom', e);
+        },
+        getNestedValue: nestedValue
+    }
+}
+</script>
diff --git a/vue-options-api-demos/grid/custom-rendering/headers/component/main.js b/vue-options-api-demos/grid/custom-rendering/headers/component/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/headers/component/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/custom-rendering/headers/component/main.vue b/vue-options-api-demos/grid/custom-rendering/headers/component/main.vue
new file mode 100644
index 00000000..1c5e3de7
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/headers/component/main.vue
@@ -0,0 +1,70 @@
+<template>
+        <grid
+            :style="{height: '280px'}"
+            :data-items="items"
+            :columns="columns">
+      </grid>
+</template>
+<script>
+import { markRaw } from 'vue';
+import { Grid } from '@progress/kendo-vue-grid';
+const items = [{
+                "ProductID": 1,
+                "ProductName": "Chai",
+                "UnitPrice": 18.0000,
+            },
+            {
+                "ProductID": 2,
+                "ProductName": "Chang",
+                "UnitPrice": 19.0000,
+            },
+            {
+                "ProductID": 3,
+                "ProductName": "Aniseed Syrup",
+                "UnitPrice": 10.0000,
+            },
+            {
+                "ProductID": 4,
+                "ProductName": "Chef Anton's Cajun Seasoning",
+                "UnitPrice": 22.0000,
+            }];
+
+const headerTemplate = {
+    props: {
+        field: String
+    },
+     data: function () {
+        return {
+            items: items
+        };
+    },
+    computed: {
+        min() {
+            return this.items.reduce((acc, current) => Math.min(acc, current[this.$props.field]), Number.MAX_VALUE);
+        },
+        max() {
+            return this.items.reduce((acc, current) => Math.max(acc, current[this.$props.field]), Number.MIN_VALUE);
+        }
+    },
+    template: `<b>
+            min: {{min}}, max: {{max}}
+        </b>`
+};
+
+export default {
+    components: {
+        'grid': Grid
+    },
+    data: function () {
+        return {
+            columns: [
+                { field: 'ProductID'},
+                { field: 'ProductName', title: 'Product Name' },
+                { field: 'UnitPrice', title: 'Unit Price', headerCell: markRaw(headerTemplate) }
+            ],
+            items: items
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/custom-rendering/headers/function/main.js b/vue-options-api-demos/grid/custom-rendering/headers/function/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/headers/function/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/custom-rendering/headers/function/main.vue b/vue-options-api-demos/grid/custom-rendering/headers/function/main.vue
new file mode 100644
index 00000000..f7ce2219
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/headers/function/main.vue
@@ -0,0 +1,58 @@
+<template>
+        <grid
+            :style="{height: '280px'}"
+            :data-items="items"
+            :columns="columns"
+            @custom="customHandler">
+      </grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+
+export default {
+    components: {
+        'grid': Grid
+    },
+     data: function () {
+        return {
+            columns: [
+                { field: 'ProductID'},
+                { field: 'ProductName', title: 'Product Name' },
+                { field: 'UnitPrice', title: 'Unit Price', 
+                headerCell: this.headerCellFunction }
+            ],
+            items: [{
+                "ProductID": 1,
+                "ProductName": "Chai",
+                "UnitPrice": 18.0000,
+            },
+            {
+                "ProductID": 2,
+                "ProductName": "Chang",
+                "UnitPrice": 19.0000,
+            },
+            {
+                "ProductID": 3,
+                "ProductName": "Aniseed Syrup",
+                "UnitPrice": 10.0000,
+            },
+            {
+                "ProductID": 4,
+                "ProductName": "Chef Anton's Cajun Seasoning",
+                "UnitPrice": 22.0000,
+            }]
+        };
+    },
+    methods: {
+        customHandler: function(e){
+            console.log('customHandler', e);
+        },
+        headerCellFunction: function (h, emptyElement , props, listeners ) {
+            return h('span', {
+                onClick: this.customHandler
+            }, ['custom ' + props.field]);
+        },
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/custom-rendering/headers/slot/main.js b/vue-options-api-demos/grid/custom-rendering/headers/slot/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/headers/slot/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/custom-rendering/headers/slot/main.vue b/vue-options-api-demos/grid/custom-rendering/headers/slot/main.vue
new file mode 100644
index 00000000..4f539cba
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/headers/slot/main.vue
@@ -0,0 +1,55 @@
+<template>
+    <grid
+            :style="{height: '280px'}"
+            :data-items="items"
+            :columns="columns"
+            @custom="customHandler">
+         <template v-slot:headerTemplate="{props}">
+            <span @click="customHandler">{{ props.field }}</span>
+        </template>
+      </grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+
+export default {
+    components: {
+        'grid': Grid
+    },
+    data: function () {
+        return {
+            columns: [
+                { field: 'ProductID'},
+                { field: 'ProductName', title: 'Product Name' },
+                { field: 'UnitPrice', title: 'Unit Price', headerCell: 'headerTemplate'  }
+            ],
+            items: [{
+                "ProductID": 1,
+                "ProductName": "Chai",
+                "UnitPrice": 18.0000,
+            },
+            {
+                "ProductID": 2,
+                "ProductName": "Chang",
+                "UnitPrice": 19.0000,
+            },
+            {
+                "ProductID": 3,
+                "ProductName": "Aniseed Syrup",
+                "UnitPrice": 10.0000,
+            },
+            {
+                "ProductID": 4,
+                "ProductName": "Chef Anton's Cajun Seasoning",
+                "UnitPrice": 22.0000,
+            }]
+        };
+    },
+    methods: {
+        customHandler: function(e){
+            console.log('customHandler', e);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/custom-rendering/hierarchy/DetailComponent.vue b/vue-options-api-demos/grid/custom-rendering/hierarchy/DetailComponent.vue
new file mode 100644
index 00000000..63b85864
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/hierarchy/DetailComponent.vue
@@ -0,0 +1,38 @@
+<template>
+<grid :data-items="getFilteredProducts"
+                     :columns="columns">
+               </grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import { filterBy } from '@progress/kendo-data-query';
+import { products } from './products';
+
+export default {
+    components: {
+        grid: Grid
+    },
+    props: {
+        dataItem: Object
+    },
+    data () {
+        return {
+            products: products,
+            columns: [
+                { field: 'ProductID', filterable: false, title: 'ID', width: '50px' },
+                { field: 'ProductName', title: 'Product Name' },
+                { field: 'UnitPrice', filter: 'numeric', title: 'Unit Price' },
+                { field: 'UnitsInStock', title: 'Units In Stock' },
+                { field: 'Category.CategoryName', title: 'Category Name' }
+            ]
+        }
+    },
+    computed: {
+        getFilteredProducts() {
+            const result = filterBy(this.products, {field: 'Category.CategoryID', operator: 'eq', value: this.dataItem.CategoryID});
+
+            return result;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/grid/custom-rendering/hierarchy/main.js b/vue-options-api-demos/grid/custom-rendering/hierarchy/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/hierarchy/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/custom-rendering/hierarchy/main.vue b/vue-options-api-demos/grid/custom-rendering/hierarchy/main.vue
new file mode 100644
index 00000000..47e57511
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/hierarchy/main.vue
@@ -0,0 +1,61 @@
+<template>
+ <Grid
+    ref="grid"
+    :style="{height: '550px'}"
+    :data-items="categories"
+    :detail="cellTemplate"
+    @expandchange="expandChange"
+    :expand-field="'expanded'">
+    <template v-slot:myTemplate="{props}">
+        <custom :data-item="props.dataItem" />
+    </template>
+ </Grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import { products } from './products';
+import DetailComponent from './DetailComponent.vue';
+
+export default {
+    components: {
+        'Grid': Grid,
+        custom: DetailComponent
+    },
+    data: function () {
+        return {
+            cellTemplate: 'myTemplate',
+            products: products,
+            categories: [
+                {CategoryID: 1, CategoryName: 'Beverages', Descriptions: 'Soft drinks, coffees, teas, beers, and ales'},
+                {CategoryID: 2, CategoryName: 'Condiments', Descriptions: 'Sweet and savory sauces, relishes, spreads, and seasonings'},
+                {CategoryID: 3, CategoryName: 'Confections', Descriptions: 'Desserts, candies, and sweet breads'},
+                {CategoryID: 4, CategoryName: 'Dairy Products', Descriptions: 'Cheeses'},
+                {CategoryID: 5, CategoryName: 'Grains/Cereals', Descriptions: 'Breads, crackers, pasta, and cereal'},
+                {CategoryID: 6, CategoryName: 'Meat/Poultry', Descriptions: 'Prepared meats'},
+                {CategoryID: 7, CategoryName: 'Produce', Descriptions: 'Dried fruit and bean curd'},
+                {CategoryID: 8, CategoryName: 'Seafood', Descriptions: 'Seaweed and fish'}
+            ]
+        };
+    },
+    methods: {
+        expandChange: function (event) {
+            event.dataItem[event.target.$props.expandField] = event.value;
+            //
+            // In Vue 2 context, instead of the above line, inside the expandChange method we should have the following:
+            //
+            //   Vue.set(
+            //     event.dataItem,
+            //     event.target.$props.expandField,
+            //     event.dataItem.expanded === undefined ? false : !event.dataItem.expanded
+            //   );
+            //
+        },
+        getFilteredProducts(catId) {
+            const result = filterBy(products, {field: 'Category.CategoryID', operator: 'eq', value: catId});
+
+            return result;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/custom-rendering/hierarchy/products.js b/vue-options-api-demos/grid/custom-rendering/hierarchy/products.js
new file mode 100644
index 00000000..2a1ce279
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/hierarchy/products.js
@@ -0,0 +1,1313 @@
+const products = [
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22.0000,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.3500,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25.0000,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40.0000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97.0000,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31.0000,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 11,
+        "ProductName": "Queso Cabrales",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "1 kg pkg.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 30,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 12,
+        "ProductName": "Queso Manchego La Pastora",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 86,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 13,
+        "ProductName": "Konbu",
+        "SupplierID": 6,
+        "CategoryID": 8,
+        "QuantityPerUnit": "2 kg box",
+        "UnitPrice": 6.0000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 14,
+        "ProductName": "Tofu",
+        "SupplierID": 6,
+        "CategoryID": 7,
+        "QuantityPerUnit": "40 - 100 g pkgs.",
+        "UnitPrice": 23.2500,
+        "UnitsInStock": 35,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 15,
+        "ProductName": "Genen Shouyu",
+        "SupplierID": 6,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 250 ml bottles",
+        "UnitPrice": 15.5000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 16,
+        "ProductName": "Pavlova",
+        "SupplierID": 7,
+        "CategoryID": 3,
+        "QuantityPerUnit": "32 - 500 g boxes",
+        "UnitPrice": 17.4500,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 17,
+        "ProductName": "Alice Mutton",
+        "SupplierID": 7,
+        "CategoryID": 6,
+        "QuantityPerUnit": "20 - 1 kg tins",
+        "UnitPrice": 39.0000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 18,
+        "ProductName": "Carnarvon Tigers",
+        "SupplierID": 7,
+        "CategoryID": 8,
+        "QuantityPerUnit": "16 kg pkg.",
+        "UnitPrice": 62.5000,
+        "UnitsInStock": 42,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 19,
+        "ProductName": "Teatime Chocolate Biscuits",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 12 pieces",
+        "UnitPrice": 9.2000,
+        "UnitsInStock": 25,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 20,
+        "ProductName": "Sir Rodney's Marmalade",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "30 gift boxes",
+        "UnitPrice": 81.0000,
+        "UnitsInStock": 40,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 21,
+        "ProductName": "Sir Rodney's Scones",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 pkgs. x 4 pieces",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 3,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 22,
+        "ProductName": "Gustaf's Knäckebröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 500 g pkgs.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 104,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 23,
+        "ProductName": "Tunnbröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "12 - 250 g pkgs.",
+        "UnitPrice": 9.0000,
+        "UnitsInStock": 61,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 24,
+        "ProductName": "Guaraná Fantástica",
+        "SupplierID": 10,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 355 ml cans",
+        "UnitPrice": 4.5000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 25,
+        "ProductName": "NuNuCa Nuß-Nougat-Creme",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "20 - 450 g glasses",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 26,
+        "ProductName": "Gumbär Gummibärchen",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 250 g bags",
+        "UnitPrice": 31.2300,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 27,
+        "ProductName": "Schoggi Schokolade",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 100 g pieces",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 49,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 28,
+        "ProductName": "Rössle Sauerkraut",
+        "SupplierID": 12,
+        "CategoryID": 7,
+        "QuantityPerUnit": "25 - 825 g cans",
+        "UnitPrice": 45.6000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 29,
+        "ProductName": "Thüringer Rostbratwurst",
+        "SupplierID": 12,
+        "CategoryID": 6,
+        "QuantityPerUnit": "50 bags x 30 sausgs.",
+        "UnitPrice": 123.7900,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 30,
+        "ProductName": "Nord-Ost Matjeshering",
+        "SupplierID": 13,
+        "CategoryID": 8,
+        "QuantityPerUnit": "10 - 200 g glasses",
+        "UnitPrice": 25.8900,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 31,
+        "ProductName": "Gorgonzola Telino",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "12 - 100 g pkgs",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 32,
+        "ProductName": "Mascarpone Fabioli",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 32.0000,
+        "UnitsInStock": 9,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 33,
+        "ProductName": "Geitost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "500 g",
+        "UnitPrice": 2.5000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 34,
+        "ProductName": "Sasquatch Ale",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 111,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 35,
+        "ProductName": "Steeleye Stout",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 36,
+        "ProductName": "Inlagd Sill",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 250 g  jars",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 37,
+        "ProductName": "Gravad lax",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 500 g pkgs.",
+        "UnitPrice": 26.0000,
+        "UnitsInStock": 11,
+        "UnitsOnOrder": 50,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 38,
+        "ProductName": "Côte de Blaye",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 75 cl bottles",
+        "UnitPrice": 263.5000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 39,
+        "ProductName": "Chartreuse verte",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "750 cc per bottle",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 69,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 40,
+        "ProductName": "Boston Crab Meat",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 4 oz tins",
+        "UnitPrice": 18.4000,
+        "UnitsInStock": 123,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 41,
+        "ProductName": "Jack's New England Clam Chowder",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 12 oz cans",
+        "UnitPrice": 9.6500,
+        "UnitsInStock": 85,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 42,
+        "ProductName": "Singaporean Hokkien Fried Mee",
+        "SupplierID": 20,
+        "CategoryID": 5,
+        "QuantityPerUnit": "32 - 1 kg pkgs.",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 43,
+        "ProductName": "Ipoh Coffee",
+        "SupplierID": 20,
+        "CategoryID": 1,
+        "QuantityPerUnit": "16 - 500 g tins",
+        "UnitPrice": 46.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 44,
+        "ProductName": "Gula Malacca",
+        "SupplierID": 20,
+        "CategoryID": 2,
+        "QuantityPerUnit": "20 - 2 kg bags",
+        "UnitPrice": 19.4500,
+        "UnitsInStock": 27,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 45,
+        "ProductName": "Rogede sild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "1k pkg.",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 5,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 46,
+        "ProductName": "Spegesild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "4 - 450 g glasses",
+        "UnitPrice": 12.0000,
+        "UnitsInStock": 95,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 47,
+        "ProductName": "Zaanse koeken",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 - 4 oz boxes",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 48,
+        "ProductName": "Chocolade",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 pkgs.",
+        "UnitPrice": 12.7500,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 49,
+        "ProductName": "Maxilaku",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 - 50 g pkgs.",
+        "UnitPrice": 20.0000,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 60,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 50,
+        "ProductName": "Valkoinen suklaa",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "12 - 100 g bars",
+        "UnitPrice": 16.2500,
+        "UnitsInStock": 65,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 51,
+        "ProductName": "Manjimup Dried Apples",
+        "SupplierID": 24,
+        "CategoryID": 7,
+        "QuantityPerUnit": "50 - 300 g pkgs.",
+        "UnitPrice": 53.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 52,
+        "ProductName": "Filo Mix",
+        "SupplierID": 24,
+        "CategoryID": 5,
+        "QuantityPerUnit": "16 - 2 kg boxes",
+        "UnitPrice": 7.0000,
+        "UnitsInStock": 38,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 53,
+        "ProductName": "Perth Pasties",
+        "SupplierID": 24,
+        "CategoryID": 6,
+        "QuantityPerUnit": "48 pieces",
+        "UnitPrice": 32.8000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 54,
+        "ProductName": "Tourtière",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "16 pies",
+        "UnitPrice": 7.4500,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 55,
+        "ProductName": "Pâté chinois",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "24 boxes x 2 pies",
+        "UnitPrice": 24.0000,
+        "UnitsInStock": 115,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 56,
+        "ProductName": "Gnocchi di nonna Alice",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 57,
+        "ProductName": "Ravioli Angelo",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 19.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 58,
+        "ProductName": "Escargots de Bourgogne",
+        "SupplierID": 27,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 pieces",
+        "UnitPrice": 13.2500,
+        "UnitsInStock": 62,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 59,
+        "ProductName": "Raclette Courdavault",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 55.0000,
+        "UnitsInStock": 79,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 60,
+        "ProductName": "Camembert Pierrot",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "15 - 300 g rounds",
+        "UnitPrice": 34.0000,
+        "UnitsInStock": 19,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 61,
+        "ProductName": "Sirop d'érable",
+        "SupplierID": 29,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 500 ml bottles",
+        "UnitPrice": 28.5000,
+        "UnitsInStock": 113,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 62,
+        "ProductName": "Tarte au sucre",
+        "SupplierID": 29,
+        "CategoryID": 3,
+        "QuantityPerUnit": "48 pies",
+        "UnitPrice": 49.3000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 63,
+        "ProductName": "Vegie-spread",
+        "SupplierID": 7,
+        "CategoryID": 2,
+        "QuantityPerUnit": "15 - 625 g jars",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 64,
+        "ProductName": "Wimmers gute Semmelknödel",
+        "SupplierID": 12,
+        "CategoryID": 5,
+        "QuantityPerUnit": "20 bags x 4 pieces",
+        "UnitPrice": 33.2500,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 80,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 65,
+        "ProductName": "Louisiana Fiery Hot Pepper Sauce",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "32 - 8 oz bottles",
+        "UnitPrice": 21.0500,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 66,
+        "ProductName": "Louisiana Hot Spiced Okra",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 8 oz jars",
+        "UnitPrice": 17.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 100,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 67,
+        "ProductName": "Laughing Lumberjack Lager",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 52,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 68,
+        "ProductName": "Scottish Longbreads",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 8 pieces",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 69,
+        "ProductName": "Gudbrandsdalsost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 kg pkg.",
+        "UnitPrice": 36.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 70,
+        "ProductName": "Outback Lager",
+        "SupplierID": 7,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 355 ml bottles",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 71,
+        "ProductName": "Flotemysost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 21.5000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 72,
+        "ProductName": "Mozzarella di Giovanni",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 34.8000,
+        "UnitsInStock": 14,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 73,
+        "ProductName": "Röd Kaviar",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 150 g jars",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 101,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 74,
+        "ProductName": "Longlife Tofu",
+        "SupplierID": 4,
+        "CategoryID": 7,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 20,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 75,
+        "ProductName": "Rhönbräu Klosterbier",
+        "SupplierID": 12,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 0.5 l bottles",
+        "UnitPrice": 7.7500,
+        "UnitsInStock": 125,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 76,
+        "ProductName": "Lakkalikööri",
+        "SupplierID": 23,
+        "CategoryID": 1,
+        "QuantityPerUnit": "500 ml",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 57,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 77,
+        "ProductName": "Original Frankfurter grüne Soße",
+        "SupplierID": 12,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 boxes",
+        "UnitPrice": 13.0000,
+        "UnitsInStock": 32,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    }
+];
+
+export { products };
diff --git a/vue-options-api-demos/grid/custom-rendering/loader-template/main.js b/vue-options-api-demos/grid/custom-rendering/loader-template/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/loader-template/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/custom-rendering/loader-template/main.vue b/vue-options-api-demos/grid/custom-rendering/loader-template/main.vue
new file mode 100644
index 00000000..fa5aa884
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/loader-template/main.vue
@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <KButton @click="toggleLoader">
+      {{ loader ? 'Hide Loader' : 'Show Loader' }}</KButton
+    >
+    <br />
+    <br />
+    <b>Choose loader type:</b>
+    <RadioGroup
+      :data-items="types"
+      @change="onRadioGroupChange"
+      :default-value="type"
+      :layout="'horizontal'"
+    />
+    <br />
+    <Grid
+      :style="{ height: '450px' }"
+      :loader="loader"
+      :data-items="result"
+      :pageable="{ buttonCount: 4, pageSizes: true }"
+      :skip="skip"
+      :take="take"
+      :total="total"
+      :columns="columns"
+      @pagechange="pageChangeHandler"
+      :navigatable="true"
+    >
+      <template v-slot:loader>
+        <div class="k-loader-container k-loader-container-md k-loader-top">
+          <div class="k-loader-container-overlay k-overlay-dark" />
+          <div class="k-loader-container-inner">
+            <div v-if="type === 'custom'">
+              <iframe
+                src="https://giphy.com/embed/l3nWhI38IWDofyDrW"
+                width="180"
+                height="180"
+                frameBorder="0"
+                class="giphy-embed"
+                allowFullScreen
+              ></iframe>
+            </div>
+            <Loader v-else :size="'large'" :type="type" />
+          </div>
+        </div>
+      </template>
+    </Grid>
+  </div>
+</template>
+<script>
+import { Button } from '@progress/kendo-vue-buttons';
+import { Grid } from '@progress/kendo-vue-grid';
+import { RadioGroup } from '@progress/kendo-vue-inputs';
+import { Loader } from '@progress/kendo-vue-indicators';
+export default {
+  components: {
+    Grid: Grid,
+    Loader,
+    RadioGroup,
+    KButton: Button,
+  },
+  data: function () {
+    return {
+      type: 'converging-spinner',
+      types: [
+        { label: 'Pulsing', value: 'pulsing' },
+        { label: 'Infinite Spinner', value: 'infinite-spinner' },
+        { label: 'Converging Spinner', value: 'converging-spinner' },
+        { label: 'Custom', value: 'custom' },
+      ],
+      loader: false,
+      dataItems: [],
+      skip: 0,
+      take: 10,
+      columns: [
+        { field: 'ProductID' },
+        { field: 'ProductName', title: 'Product Name' },
+        { field: 'UnitPrice', title: 'Unit Price' },
+      ],
+    };
+  },
+  computed: {
+    result: {
+      get: function () {
+        return this.dataItems.slice(this.skip, this.take + this.skip);
+      },
+    },
+    total() {
+      return this.dataItems ? this.dataItems.length : 0;
+    },
+  },
+  methods: {
+    onRadioGroupChange(e) {
+      this.type = e.value;
+    },
+    toggleLoader() {
+      this.loader = this.loader ? false : 'loader';
+    },
+    pageChangeHandler: function (event) {
+      this.skip = event.page.skip;
+      this.take = event.page.take;
+    },
+    createRandomData(count) {
+      const productNames = [
+        'Chai',
+        'Chang',
+        'Syrup',
+        'Apple',
+        'Orange',
+        'Banana',
+        'Lemon',
+        'Pineapple',
+        'Tea',
+        'Milk',
+      ];
+      const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120];
+      return Array(count)
+        .fill({})
+        .map((_, idx) => ({
+          ProductID: idx + 1,
+          ProductName:
+            productNames[Math.floor(Math.random() * productNames.length)],
+          UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)],
+        }));
+    },
+  },
+  mounted() {
+    this.dataItems = this.createRandomData(1000);
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/custom-rendering/row-reorder/CustomCell.vue b/vue-options-api-demos/grid/custom-rendering/row-reorder/CustomCell.vue
new file mode 100644
index 00000000..b1f12e42
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/row-reorder/CustomCell.vue
@@ -0,0 +1,33 @@
+<template>
+<td @dragover="dragOver">
+    <span class="k-icon k-i-reorder"
+            draggable="true"
+            style="cursor: 'move'"
+            @dragstart="dragStart"
+            @dragend="dragEnd">
+    </span>
+</td>
+</template>
+<script>
+export default {
+    emits:{
+        dragover: null,
+        dragstart: null,
+        dragend: null
+    },
+    props: {
+        dataItem: Object
+    },
+    methods: {
+        dragOver(e){
+          this.$emit('dragover', this.dataItem);
+        },
+        dragStart(e) {
+          this.$emit('dragstart', this.dataItem);
+        },
+        dragEnd(e) {
+          this.$emit('dragend');
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/grid/custom-rendering/row-reorder/main.js b/vue-options-api-demos/grid/custom-rendering/row-reorder/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/row-reorder/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/custom-rendering/row-reorder/main.vue b/vue-options-api-demos/grid/custom-rendering/row-reorder/main.vue
new file mode 100644
index 00000000..71c35e87
--- /dev/null
+++ b/vue-options-api-demos/grid/custom-rendering/row-reorder/main.vue
@@ -0,0 +1,74 @@
+<template>
+    <Grid
+          :data-items="items"
+          :columns="columns">
+    <template v-slot:myTemplate="{props}">
+        <custom  :data-item="props.dataItem"
+                @dragover="reorder"
+                @dragstart="setActive"
+                @dragend="updateRemote"/>
+    </template>
+   </Grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import CustomCell from './CustomCell.vue';
+
+export default {
+    components: {
+        'Grid': Grid,
+        'custom': CustomCell
+    },
+   data () {
+        return {
+            items: [],
+            columns: [
+                { field: 'ProductID', title: '', cell: 'myTemplate', width: '80px', title: 'Reorder' },
+                { field: 'ProductID'},
+                { field: 'ProductName', title: 'Product Name' },
+                { field: 'UnitPrice', title: 'Unit Price' }
+            ],
+            activeItem: null
+        };
+    },
+    methods: {
+        createRandomData(count) {
+            const productNames = ['Chai', 'Chang', 'Syrup', 'Apple', 'Orange', 'Banana', 'Lemon', 'Pineapple', 'Tea', 'Milk'];
+            const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120]
+
+            return Array(count).fill({}).map((_, idx) => ({
+                ProductID: idx + 1,
+                ProductName: productNames[Math.floor(Math.random() * productNames.length)],
+                UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)]
+            }));
+        },
+        reorder(dataItem) {
+          let that = this;
+
+          if (that.activeItem === dataItem) {
+              return;
+          }
+
+          let reorderedData = this.items.slice();
+          let prevIndex = reorderedData.findIndex(p => (p === that.activeItem));
+          let nextIndex = reorderedData.findIndex(p => (p === dataItem));
+          reorderedData.splice(prevIndex, 1);
+          reorderedData.splice(nextIndex, 0, this.activeItem);
+
+          that.items = reorderedData;
+        },
+        setActive(dataItem) {
+          this.activeItem = dataItem;
+        },
+        updateRemote() {
+          console.log('in drag end');
+
+          // Send request to remote to update the source order
+        }
+    },
+    mounted() {
+        this.items = this.createRandomData(10);
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/data-binding/local-data-operations/main.js b/vue-options-api-demos/grid/data-binding/local-data-operations/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/data-binding/local-data-operations/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/data-binding/local-data-operations/main.vue b/vue-options-api-demos/grid/data-binding/local-data-operations/main.vue
new file mode 100644
index 00000000..c5399032
--- /dev/null
+++ b/vue-options-api-demos/grid/data-binding/local-data-operations/main.vue
@@ -0,0 +1,182 @@
+<template>
+  <Grid
+    ref="grid"
+    :style="{ height: '320px' }"
+    :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>
+</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;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/data-binding/odata4-crud/CommandCell.vue b/vue-options-api-demos/grid/data-binding/odata4-crud/CommandCell.vue
new file mode 100644
index 00000000..5767ab6f
--- /dev/null
+++ b/vue-options-api-demos/grid/data-binding/odata4-crud/CommandCell.vue
@@ -0,0 +1,73 @@
+<template>
+<td>
+    <kbutton
+        :class="editButtonClass"
+        :type="'button'"
+        :theme-color="'primary'"
+        @click="editHandler">
+        {{editText}}
+    </kbutton>
+    <kbutton
+        :class="removeButtonClass"
+        @click="removeHandler">
+        {{removeText}}
+    </kbutton>
+</td>
+</template>
+<script>
+import { Button } from '@progress/kendo-vue-buttons';
+export default {
+    components: {
+        kbutton: Button
+    },
+    props: {
+        id: String,
+        field: String,
+        dataItem: Object,
+        format: String,
+        className: String,
+        columnIndex: Number,
+        columnsCount: Number,
+        rowType: String,
+        level: Number,
+        expanded: Boolean
+    },
+    data(){
+        return {
+            navAttrs: {}
+        };
+    },
+    computed: {
+        editText(){
+            if (this.$props.dataItem['inEdit']){
+                return this.$props.dataItem.ProductID? 'Update' : 'Add'
+            } else {
+                return 'Edit';
+            }
+        },
+        removeText(){
+            if (this.$props.dataItem['inEdit']){
+                return this.$props.dataItem.ProductID? 'Cancel' : 'Discard'
+            } else {
+                return 'Remove';
+            }
+        },
+        editButtonClass(){
+            return this.$props.dataItem['inEdit'] ? 'k-grid-save-command' : 'k-grid-edit-command';
+        },
+        removeButtonClass(){
+            return this.$props.dataItem['inEdit'] ? 'k-grid-cancel-command' : 'k-grid-remove-command';
+        }
+    },
+    methods: {
+        editHandler: function() {
+            const command = this.$props.dataItem['inEdit'] ? 'save' : 'edit';
+            this.$emit(command, {dataItem:this.dataItem});
+        },
+        removeHandler: function() {
+            const command = this.$props.dataItem['inEdit'] ? 'cancel' : 'remove';
+            this.$emit(command, {dataItem:this.dataItem});
+        },
+    }
+}
+</script>
diff --git a/vue-options-api-demos/grid/data-binding/odata4-crud/main.js b/vue-options-api-demos/grid/data-binding/odata4-crud/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/data-binding/odata4-crud/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/data-binding/odata4-crud/main.vue b/vue-options-api-demos/grid/data-binding/odata4-crud/main.vue
new file mode 100644
index 00000000..a172d8f3
--- /dev/null
+++ b/vue-options-api-demos/grid/data-binding/odata4-crud/main.vue
@@ -0,0 +1,252 @@
+<template>
+  <Grid
+    ref="grid"
+    :style="{ height: '640px' }"
+    :data-items="gridData"
+    :edit-field="'inEdit'"
+    :sortable="true"
+    :sort="sort"
+    :pageable="pageable"
+    :take="take"
+    :skip="skip"
+    :total="total"
+    :loader="loader"
+    @itemchange="itemChange"
+    @datastatechange="dataStateChange"
+    :columns="columns"
+  >
+    <template v-slot:myTemplate="{ props }">
+      <custom
+        :data-item="props.dataItem"
+        @edit="edit"
+        @save="save"
+        @remove="remove"
+        @cancel="cancel"
+      />
+    </template>
+    <grid-toolbar>
+      <kbutton title="Add new" :theme-color="'primary'" @click="insert">
+        Add new
+      </kbutton>
+      <kbutton
+        v-if="hasItemsInEdit"
+        title="Cancel current changes"
+        @click="cancelChanges"
+      >
+        Cancel current changes
+      </kbutton>
+    </grid-toolbar>
+    <grid-norecords> There is no data available custom </grid-norecords>
+  </Grid>
+</template>
+<script>
+import { Grid, GridToolbar, GridNoRecords } from '@progress/kendo-vue-grid';
+import { Button } from '@progress/kendo-vue-buttons';
+import { process, toODataString } from '@progress/kendo-data-query';
+import CommandCell from './CommandCell.vue';
+
+export default {
+  components: {
+    Grid: Grid,
+    'grid-toolbar': GridToolbar,
+    'grid-norecords': GridNoRecords,
+    custom: CommandCell,
+    kbutton: Button,
+  },
+  data: function () {
+    return {
+      baseUrl: 'https://demos.telerik.com/kendo-ui/service-v4/odata/Products',
+      init: { method: 'GET', accept: 'application/json', headers: {} },
+      filter: null,
+      sort: null,
+      pageable: true,
+      gridData: [],
+      skip: 0,
+      take: 10,
+      total: 0,
+      updatedData: [],
+      editID: null,
+      columns: [
+        { field: 'ProductID', editable: false, width: 60, title: 'id' },
+        { field: 'ProductName' },
+        {
+          field: 'UnitPrice',
+          title: 'Unit Price',
+          editor: 'numeric',
+          format: '{0:c}',
+          width: 120,
+        },
+        {
+          field: 'UnitsInStock',
+          title: 'Units In Stock',
+          editor: 'numeric',
+          width: 120,
+        },
+        { field: 'Discontinued', width: 120, editor: 'boolean' },
+        { cell: 'myTemplate', filterable: false, width: '210px' },
+      ],
+      gridData: [],
+      loader: false,
+    };
+  },
+  computed: {
+    hasItemsInEdit() {
+      return this.gridData.filter((p) => p.inEdit).length > 0;
+    },
+    dataState() {
+      return {
+        sort: this.sort,
+        skip: this.skip,
+        take: this.take,
+      };
+    },
+  },
+  created: function () {
+    this.getData();
+  },
+  methods: {
+    updateService(action = '', item) {
+      const that = this;
+      const idIfNeeded =
+        action === 'DELETE' || action === 'PUT' ? `(${item.ProductID})` : '';
+      const url = this.baseUrl + idIfNeeded;
+      const body =
+        action === 'POST' || action === 'PUT'
+          ? JSON.stringify({
+              ProductID: item.ProductID,
+              ProductName: item.ProductName,
+              QuantityPerUnit: item.QuantityPerUnit,
+              Discontinued: item.Discontinued,
+              UnitPrice: item.UnitPrice,
+              UnitsInStock: item.UnitsInStock,
+            })
+          : {};
+      fetch(url, {
+        method: action,
+        accept: 'application/json',
+        headers: {
+          'Content-type': 'application/json',
+        },
+        body: body,
+      }).then((response) => {
+        if (response.ok) {
+          that.getData();
+        } else {
+          alert('request failed');
+        }
+      });
+    },
+    itemChange: function (e) {
+      if (e.dataItem.ProductID) {
+        let index = this.gridData.findIndex(
+          (p) => p.ProductID === e.dataItem.ProductID
+        );
+        let updated = Object.assign({}, this.gridData[index], {
+          [e.field]: e.value,
+        });
+        this.gridData.splice(index, 1, updated);
+      } else {
+        e.dataItem[e.field] = e.value;
+      }
+    },
+    insert() {
+      const dataItem = { inEdit: true };
+      this.gridData.splice(0, 0, dataItem);
+    },
+    edit: function (e) {
+      let index = this.gridData.findIndex(
+        (p) => p.ProductID === e.dataItem.ProductID
+      );
+      let updated = Object.assign({}, this.gridData[index], { inEdit: true });
+      this.gridData.splice(index, 1, updated);
+    },
+    save: function (e) {
+      let index = this.gridData.findIndex(
+        (p) => p.ProductID === e.dataItem.ProductID
+      );
+      let item = this.gridData[index];
+      this.updateService(item.ProductID ? 'PUT' : 'POST', item);
+    },
+    update(data, item, remove) {
+      let updated;
+      let index = data.findIndex(
+        (p) => item.ProductID && p.ProductID === item.ProductID
+      );
+      if (index >= 0) {
+        updated = Object.assign({}, item);
+        data[index] = updated;
+      } else {
+        let id = 1;
+        this.updatedData.forEach((p) => {
+          if (p.ProductID) {
+            id = Math.max(p.ProductID + 1, id);
+          }
+        });
+        updated = Object.assign({}, item, { ProductID: id });
+        data.unshift(updated);
+        index = 0;
+      }
+
+      if (remove) {
+        data = data.splice(index, 1);
+      }
+      return data[index];
+    },
+    cancel(e) {
+      if (e.dataItem.ProductID) {
+        let index = this.gridData.findIndex(
+          (p) => p.ProductID === e.dataItem.ProductID
+        );
+        let updateDataIndex = this.updatedData.findIndex(
+          (p) => p.ProductID === e.dataItem.ProductID
+        );
+        let updated = Object.assign(this.updatedData[updateDataIndex], {
+          inEdit: undefined,
+        });
+        this.gridData.splice(index, 1, { ...updated });
+      } else {
+        let index = this.gridData.findIndex(
+          (p) => JSON.stringify(e.dataItem) === JSON.stringify(p)
+        );
+
+        this.gridData.splice(index, 1);
+      }
+    },
+    remove(e) {
+      e.dataItem.inEdit = undefined;
+      this.updateService('DELETE', e.dataItem);
+    },
+    cancelChanges() {
+      this.getData();
+    },
+    getData: function (initial) {
+      const that = this;
+      this.loader = true;
+
+      fetch(
+        this.baseUrl + '?' + toODataString(this.dataState) + '&$count=true',
+        this.init
+      )
+        .then((response) => response.json())
+        .then((json) => {
+          const total = json['@odata.count'];
+          const data = json['value'];
+          that.total = total;
+          that.updatedData = [...data];
+          that.gridData = data;
+          this.loader = false;
+        });
+    },
+    createAppState: function (dataState) {
+      this.take = dataState.take;
+      this.skip = dataState.skip;
+      this.filter = dataState.filter;
+      this.sort = dataState.sort;
+      this.getData();
+    },
+    dataStateChange: function (event) {
+      this.createAppState(event.data);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/editing/basic/main.js b/vue-options-api-demos/grid/editing/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/editing/basic/main.vue b/vue-options-api-demos/grid/editing/basic/main.vue
new file mode 100644
index 00000000..fc41cca0
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/basic/main.vue
@@ -0,0 +1,100 @@
+<template>
+  <Grid ref="grid"
+          :style="{height: '320px'}"
+          :data-items="getData"
+          :edit-field="'inEdit'"
+          @rowclick="rowClick"
+          @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>
+</template>
+<script>
+import { Grid, GridToolbar } from '@progress/kendo-vue-grid';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'Grid': Grid,
+        'grid-toolbar': GridToolbar,
+        'kbutton': Button
+    },
+    data: function () {
+        return {
+            updatedData: [],
+            editID: null,
+            group: [ { field: 'UnitsInStock' } ],
+            expandedItems: [],
+            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": "Chef Anton's Cajun Seasoning",
+                "UnitsInStock": 53,
+                "Discontinued": false,
+                "FirstOrderedOn": new Date(1996, 9, 19)
+            }]
+        };
+    },
+    computed: {
+        getData() {
+            return this.gridData.map(
+                (item) => Object.assign({ inEdit: item.ProductID === this.editID}, item));
+        }
+    },
+    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;
+        },
+        rowClick: function (e) {
+            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;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/editing/custom/CommandCell.vue b/vue-options-api-demos/grid/editing/custom/CommandCell.vue
new file mode 100644
index 00000000..ce996006
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/custom/CommandCell.vue
@@ -0,0 +1,61 @@
+<template>
+<td v-if="!dataItem['inEdit']" class="k-command-cell k-table-td">
+    <kbutton
+        :theme-color="'primary'"
+        class="k-grid-edit-command"
+        @click="editHandler">
+        Edit
+    </kbutton>
+    <kbutton
+        class="k-grid-remove-command"
+        @click="removeHandler">
+        Remove
+    </kbutton>
+</td>
+<td v-else>
+        <kbutton
+            class="k-grid-save-command"
+            @click="addUpdateHandler">
+            {{dataItem.ProductID? 'Update' : 'Add'}}
+        </kbutton>
+        <kbutton
+            class="k-grid-cancel-command"
+            @click="cancelDiscardHandler">
+            {{dataItem.ProductID? 'Cancel' : 'Discard'}}
+        </kbutton>
+    </td>
+</template>
+<script>
+import { Button } from '@progress/kendo-vue-buttons';
+export default {
+    components: {
+      'kbutton': Button
+    },
+    props: {
+        field: String,
+        dataItem: Object,
+        format: String,
+        className: String,
+        columnIndex: Number,
+        columnsCount: Number,
+        rowType: String,
+        level: Number,
+        expanded: Boolean,
+        editor: String
+    },
+    methods: {
+        editHandler: function() {
+            this.$emit('edit', {dataItem:this.dataItem});
+        },
+        removeHandler: function() {
+            this.$emit('remove', {dataItem:this.dataItem});
+        },
+        addUpdateHandler: function() {
+            this.$emit('save', {dataItem:this.dataItem});
+        },
+        cancelDiscardHandler: function() {
+            this.$emit('cancel', {dataItem:this.dataItem});
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/grid/editing/custom/DropDownCell.vue b/vue-options-api-demos/grid/editing/custom/DropDownCell.vue
new file mode 100644
index 00000000..097b69e9
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/custom/DropDownCell.vue
@@ -0,0 +1,42 @@
+<template>
+    <td v-if="!dataItem.inEdit" :class="className">{{ dataItem[field] }}</td>
+    <td v-else>
+        <dropdownlist
+            :style="{ width: '100px' }"
+            @change="change"
+            :value="dataItem[field]"
+            :data-items="dataitems"
+        ></dropdownlist>
+    </td>
+</template>
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+
+export default {
+    components: {
+        dropdownlist: DropDownList,
+    },
+    props: {
+        field: String,
+        dataItem: Object,
+        format: String,
+        className: String,
+        columnIndex: Number,
+        columnsCount: Number,
+        rowType: String,
+        level: Number,
+        expanded: Boolean,
+        editor: String,
+    },
+    data() {
+        return {
+            dataitems: ['True', 'False'],
+        };
+    },
+    methods: {
+        change(e) {
+            this.$emit('change', e, e.target.value);
+        },
+    },
+};
+</script>
diff --git a/vue-options-api-demos/grid/editing/custom/main.js b/vue-options-api-demos/grid/editing/custom/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/custom/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/editing/custom/main.vue b/vue-options-api-demos/grid/editing/custom/main.vue
new file mode 100644
index 00000000..5bf92253
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/custom/main.vue
@@ -0,0 +1,207 @@
+<template>
+  <Grid
+    ref="grid"
+    :style="{ height: '440px' }"
+    :data-items="gridData"
+    :edit-field="'inEdit'"
+    @itemchange="itemChange"
+    :columns="columns"
+  >
+    <template v-slot:myTemplate="{ props }">
+      <custom
+        :data-item="props.dataItem"
+        @edit="edit"
+        @save="save"
+        @remove="remove"
+        @cancel="cancel"
+      />
+    </template>
+    <template v-slot:myDropDownCell="{ props }">
+      <ddcell
+        :data-item="props.dataItem"
+        :field="props.field"
+        @change="(e) => ddChange(e, props.dataItem)"
+      />
+    </template>
+    <grid-toolbar>
+      <kbutton title="Add new" :theme-color="'primary'" @click="insert">
+        Add new
+      </kbutton>
+      <kbutton
+        v-if="hasItemsInEdit"
+        title="Cancel current changes"
+        @click="cancelChanges"
+      >
+        Cancel current changes
+      </kbutton>
+    </grid-toolbar>
+    <grid-norecords> There is no data available custom </grid-norecords>
+  </Grid>
+</template>
+<script>
+import { Grid, GridToolbar, GridNoRecords } from '@progress/kendo-vue-grid';
+import { Button } from '@progress/kendo-vue-buttons';
+import CommandCell from './CommandCell.vue';
+import DropDownCell from './DropDownCell.vue';
+
+var sampleProducts = [
+  {
+    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: "Chef Anton's Cajun Seasoning",
+    UnitsInStock: 53,
+    Discontinued: false,
+    FirstOrderedOn: new Date(1996, 9, 19),
+  }
+];
+
+export default {
+  components: {
+    Grid: Grid,
+    'grid-toolbar': GridToolbar,
+    'grid-norecords': GridNoRecords,
+    custom: CommandCell,
+    ddcell: DropDownCell,
+    kbutton: Button
+  },
+  data: function () {
+    return {
+      gridData: sampleProducts.slice(0),
+      updatedData: [],
+      editID: null,
+      group: [{ field: 'UnitsInStock' }],
+      expandedItems: [],
+      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',
+          cell: 'myDropDownCell',
+        },
+        { cell: 'myTemplate', width: '210px' },
+      ]
+    };
+  },
+  computed: {
+    hasItemsInEdit() {
+      return this.gridData.filter((p) => p.inEdit).length > 0;
+    }
+  },
+  methods: {
+    ddChange: function (e, dataItem) {
+      const updatedData = this.gridData.slice();
+
+      const item = this.update(updatedData, dataItem, false);
+      item.Discontinued = e.target.value;
+      this.gridData = updatedData;
+    },
+    itemChange: function (e) {
+      const updatedData = this.gridData.slice();
+
+      const item = this.update(updatedData, e.dataItem, false);
+      item[e.field] = e.value;
+      this.gridData = updatedData;
+    },
+    insert() {
+      const updatedData = this.gridData.slice();
+      const dataItem = { inEdit: true, Discontinued: false };
+      // add the id of the item on insert
+      const item = this.update(updatedData, dataItem, false);
+      const newproducts = this.gridData.slice();
+      newproducts.unshift(item);
+      this.update(newproducts, item, false);
+      this.gridData = newproducts;
+    },
+    edit: function (e) {
+      e.dataItem.inEdit = true;
+    },
+    save: function (e) {
+      e.dataItem.inEdit = undefined;
+      const data = this.gridData.slice();
+      //  e.dataItem.ProductID = this.update(sampleProducts, e.dataItem).ProductID;
+    },
+    update(data, item, remove) {
+      let updated;
+      let itemProductID = item.ProductID;
+      let index = data.findIndex(
+        (p) =>
+          JSON.stringify({ ...p }) === JSON.stringify(item) ||
+          (itemProductID && p.ProductID === itemProductID)
+      );
+      if (index >= 0) {
+        updated = Object.assign({}, item);
+        data[index] = updated;
+      } else {
+        let id = 1;
+        data.forEach((p) => {
+          id = Math.max(p.ProductID + 1, id);
+        });
+        updated = Object.assign({}, item, { ProductID: id });
+        data.unshift(updated);
+        index = 0;
+      }
+
+      if (remove) {
+        data = data.splice(index, 1);
+      }
+      return data[index];
+    },
+    cancel(e) {
+      if (e.dataItem.ProductID) {
+        e.dataItem.inEdit = undefined;
+      } else {
+        this.update(this.gridData, e.dataItem, true);
+      }
+    },
+    remove(e) {
+      e.dataItem.inEdit = undefined;
+      this.update(this.gridData, e.dataItem, true);
+      this.update(sampleProducts, e.dataItem, true);
+      this.gridData = this.gridData.slice();
+    },
+    cancelChanges() {
+      let editedItems = sampleProducts.filter((p) => p.inEdit === true);
+      if (editedItems.length) {
+        editedItems.forEach((item) => {
+          item.inEdit = undefined;
+        });
+      }
+
+      this.gridData = sampleProducts.slice();
+    }
+  }
+};
+</script>
diff --git a/vue-options-api-demos/grid/editing/external/CommandCell.vue b/vue-options-api-demos/grid/editing/external/CommandCell.vue
new file mode 100644
index 00000000..55ed9949
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/external/CommandCell.vue
@@ -0,0 +1,49 @@
+<template>
+<td class="k-command-cell k-table-td">
+    <kbutton
+        :theme-color="'primary'"
+        class="k-grid-edit-command"
+        @click="editHandler"
+    >
+        Edit
+    </kbutton>
+
+    <kbutton
+        class="k-grid-remove-command"
+        @click="removeHandler"
+    >
+        Remove
+    </kbutton>
+</td>
+</template>
+<script>
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'kbutton': Button
+    },
+   props: {
+        field: String,
+        dataItem: Object,
+        format: String,
+        className: String,
+        columnIndex: Number,
+        columnsCount: Number,
+        rowType: String,
+        level: Number,
+        expanded: Boolean,
+        editor: String
+    },
+    methods: {
+        editHandler: function() {
+            this.$emit('edit', this.dataItem);
+        },
+        removeHandler: function() {
+            if(confirm('Confirm deleting: ' + this.dataItem.ProductName)){
+               this.$emit('remove', this.dataItem);
+            }
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/grid/editing/external/DialogContainer.vue b/vue-options-api-demos/grid/editing/external/DialogContainer.vue
new file mode 100644
index 00000000..d7d3718a
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/external/DialogContainer.vue
@@ -0,0 +1,88 @@
+<template>
+  <k-dialog @close="cancel">
+    <div class="k-form k-form-horizontal">
+      <div class="k-form-field">
+        <label for="Product Name" class="k-form-label">Product Name</label>
+        <div class="k-form-field-wrap">
+          <k-input
+            :style="{ width: '230px' }"
+            type="text"
+            :name="'ProductName'"
+            v-model="productInEdit.ProductName"
+          ></k-input>
+        </div>
+      </div>
+      <div class="k-form-field">
+        <label for="Product Name" class="k-form-label">Units In Stock</label>
+        <div class="k-form-field-wrap">
+          <numerictextbox
+            :style="{ width: '230px' }"
+            :name="'UnitsInStock'"
+            v-model="productInEdit.UnitsInStock"
+          ></numerictextbox>
+        </div>
+      </div>
+      <div class="k-form-field">
+        <klabel :editor-id="'Discontinued'" class="k-checkbox-label"> Discontinued </klabel>
+        <div class="k-form-field-wrap">
+          <span>
+            <checkbox
+              :name="'Discontinued'"
+              :id="'Discontinued'"
+              v-model="productInEdit.Discontinued"
+            />
+          </span>
+        </div>
+      </div>
+    </div>
+    <dialog-actions-bar :layout="'start'">
+      <kbutton :theme-color="'primary'" @click="save" :svg-icon="saveIcon"> Save </kbutton>
+      <kbutton @click="cancel" :svg-icon="cancelIcon"> Cancel </kbutton>
+    </dialog-actions-bar>
+  </k-dialog>
+</template>
+<script>
+import { Dialog, DialogActionsBar } from '@progress/kendo-vue-dialogs';
+import { NumericTextBox, Input, Checkbox } from '@progress/kendo-vue-inputs';
+import { Label } from '@progress/kendo-vue-labels';
+import { Button } from '@progress/kendo-vue-buttons';
+import { cancelIcon, saveIcon } from '@progress/kendo-svg-icons';
+
+export default {
+  components: {
+    'k-input': Input,
+    numerictextbox: NumericTextBox,
+    'k-dialog': Dialog,
+    'dialog-actions-bar': DialogActionsBar,
+    kbutton: Button,
+    checkbox: Checkbox,
+    klabel: Label,
+  },
+  props: {
+    dataItem: Object,
+  },
+  data: function () {
+    return {
+      cancelIcon, saveIcon,
+      productInEdit: {
+        ProductName: '',
+        UnitsInStock: 0,
+        Discontinued: false,
+      },
+    };
+  },
+  created: function () {
+    if (this.$props.dataItem) {
+      this.productInEdit = this.$props.dataItem;
+    }
+  },
+  methods: {
+    cancel() {
+      this.$emit('cancel');
+    },
+    save() {
+      this.$emit('save');
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/editing/external/data.js b/vue-options-api-demos/grid/editing/external/data.js
new file mode 100644
index 00000000..771f15d1
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/external/data.js
@@ -0,0 +1,184 @@
+
+export const sampleProducts = [
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 20)
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 12)
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 26)
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 9, 19)
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.35,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 17)
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 9, 19)
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 22)
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 11, 1)
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        },
+        "FirstOrderedOn": new Date(1997, 1, 21)
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 5)
+    }
+];
+
diff --git a/vue-options-api-demos/grid/editing/external/main.js b/vue-options-api-demos/grid/editing/external/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/external/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/editing/external/main.vue b/vue-options-api-demos/grid/editing/external/main.vue
new file mode 100644
index 00000000..b1999053
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/external/main.vue
@@ -0,0 +1,104 @@
+<template>
+ <div class="example-wrapper">
+         <Grid ref="grid"
+            :style="{height: '440px'}"
+            :data-items="products"
+            :columns="columns">
+        <template v-slot:myTemplate="{props}">
+            <custom :data-item="props.dataItem"
+                    @edit="edit"
+                    @remove="remove"/>
+        </template>
+        <grid-toolbar>
+            <kbutton title="Add new"
+                    :theme-color="'primary'"
+                    @click='insert' >
+                Add new
+            </kbutton>
+        </grid-toolbar>
+        <grid-norecords>
+            There is no data available custom
+        </grid-norecords>
+        </Grid>
+        <dialog-container v-if="productInEdit" :data-item="productInEdit" @save="save" @cancel="cancel">
+        </dialog-container>
+    </div>
+</template>
+<script>
+import { Grid, GridToolbar, GridNoRecords } from '@progress/kendo-vue-grid';
+import { sampleProducts } from './data';
+import DialogContainer from './DialogContainer.vue';
+import CommandCell from './CommandCell.vue';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'Grid': Grid,
+        'grid-toolbar': GridToolbar,
+        'grid-norecords': GridNoRecords,
+        'dialog-container': DialogContainer,
+         'custom': CommandCell,
+        'kbutton': Button
+    },
+    data: function () {
+        return {
+            products: sampleProducts.slice(0, 7),
+            productInEdit: undefined,
+            columns: [
+                { field: 'ProductID', editable: false, title: 'ID', width: '80px' },
+                { field: 'ProductName', title: 'Name' },
+                { field: 'UnitsInStock', title: 'Units', filter: 'numeric', width: '150px', editor: 'numeric' },
+                { field: "Discontinued" },
+                { cell: 'myTemplate', width: '210px' }
+            ]
+        };
+    },
+    methods: {
+       edit(dataItem) {
+          this.productInEdit = this.cloneProduct(dataItem);
+       },
+       remove(dataItem) {
+          this.products = this.products.filter(p => p.ProductID !== dataItem.ProductID);
+      },
+       save() {
+        const dataItem = this.productInEdit;
+        const products = this.products.slice();
+        const isNewProduct = dataItem.ProductID === undefined;
+
+        if (isNewProduct) {
+            products.unshift(this.newProduct(dataItem));
+        } else {
+            const index = products.findIndex(p => p.ProductID === dataItem.ProductID);
+            products.splice(index, 1, dataItem);
+        }
+
+        this.products= products;
+        this.productInEdit= undefined;
+      },
+      cancel () {
+          this.productInEdit= undefined;
+      },
+      insert () {
+          this.productInEdit = { };
+      },
+      dialogTitle() {
+          return `${this.productInEdit.ProductID === undefined ? 'Add' : 'Edit'} product`;
+      },
+      cloneProduct(product) {
+          return Object.assign({}, product);
+      },
+      newProduct(source) {
+          const id = this.products.reduce((acc, current) => Math.max(acc, current.ProductID || 0), 0) + 1;
+          const newProduct = {
+              ProductID: id,
+              ProductName: '',
+              UnitsInStock: 0,
+              Discontinued: false
+          };
+
+          return Object.assign(newProduct, source);
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/editing/incell/main.js b/vue-options-api-demos/grid/editing/incell/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/incell/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/editing/incell/main.vue b/vue-options-api-demos/grid/editing/incell/main.vue
new file mode 100644
index 00000000..6a55a633
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/incell/main.vue
@@ -0,0 +1,159 @@
+<template>
+  <Grid
+    ref="grid"
+    :data-items="gridData"
+    :edit-field="'inEdit'"
+    @rowclick="rowClick"
+    @cellclick="cellClick"
+    @itemchange="itemChange"
+    :columns="columns"
+  >
+    <toolbar>
+      <KButton title="Save Changes" @click="saveChanges" :disabled="!changes">
+        Save Changes
+      </KButton>
+      <KButton
+        title="Cancel Changes"
+        @click="cancelChanges"
+        :disabled="!changes"
+      >
+        Cancel Changes
+      </KButton>
+    </toolbar>
+  </Grid>
+</template>
+<script>
+import { Grid, GridToolbar } from "@progress/kendo-vue-grid";
+import { Button as KButton } from "@progress/kendo-vue-buttons";
+var sampleProducts = [
+  {
+    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: "Chef Anton's Cajun Seasoning",
+    UnitsInStock: 53,
+    Discontinued: false,
+    FirstOrderedOn: new Date(1996, 9, 19),
+  },
+];
+
+export default {
+  components: {
+    Grid: Grid,
+    toolbar: GridToolbar,
+    KButton,
+  },
+  mounted() {
+    const that = this;
+    document.body.addEventListener("click", function (e) {
+      document
+        .querySelector(".k-grid-container")
+        .querySelector("." + e.target.classList[0]) !== null
+        ? ""
+        : that.exitEdit(undefined, true);
+    });
+  },
+  data: function () {
+    return {
+      editItem: undefined,
+      changes: false,
+      updatedData: [],
+      editID: null,
+      editField: undefined,
+      group: [{ field: "UnitsInStock" }],
+      expandedItems: [],
+      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: sampleProducts.map((product) => Object.assign({}, product)),
+    };
+  },
+  methods: {
+    cloneProduct(product) {
+      return Object.assign({}, product);
+    },
+    saveChanges() {
+      sampleProducts.splice(0, sampleProducts.length, ...this.gridData);
+      this.gridData = sampleProducts.map((product) =>
+        Object.assign({}, product)
+      );
+      this.editField = undefined;
+      this.changes = false;
+      this.exitEdit(undefined, true);
+    },
+    cancelChanges() {
+      this.gridData = sampleProducts.map((product) =>
+        Object.assign({}, product)
+      );
+      this.changes = false;
+      this.exitEdit(undefined, true);
+    },
+    exitEdit: function (dataItem, exitEdit) {
+      if (!exitEdit && dataItem.inEdit) {
+        return;
+      }
+      this.gridData.forEach((d) => {
+        if (d.inEdit) {
+          d.inEdit = undefined;
+        }
+      });
+      this.editField = undefined;
+    },
+    itemChange: function (e) {
+      e.dataItem[e.field] = e.value;
+      this.changes = true;
+    },
+    rowClick: function (e) {
+      this.gridData.forEach((d) => {
+        if (d.inEdit) {
+          if (e.dataItem !== d) {
+            d.inEdit = undefined;
+          }
+        }
+      });
+    },
+    cellClick: function (e) {
+      if (e.dataItem.inEdit && e.field === this.editField) {
+        return;
+      }
+
+      this.exitEdit(e.dataItem, true);
+      this.editField = e.field;
+      e.dataItem.inEdit = e.field;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/editing/inline-form/CommandCell.vue b/vue-options-api-demos/grid/editing/inline-form/CommandCell.vue
new file mode 100644
index 00000000..c3b6ab9b
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/inline-form/CommandCell.vue
@@ -0,0 +1,57 @@
+<template>
+  <td v-if="!dataItem['inEdit']" class="k-command-cell k-table-td">
+    <kbutton
+      :theme-color="'primary'"
+      class="k-grid-edit-command"
+      @click="editHandler"
+    >
+      Edit
+    </kbutton>
+    <kbutton class="k-grid-remove-command" @click="removeHandler">
+      Remove
+    </kbutton>
+  </td>
+  <td v-else>
+    <kbutton class="k-grid-save-command" @click="addUpdateHandler">
+      {{ dataItem.ProductID ? 'Update' : 'Add' }}
+    </kbutton>
+    <kbutton class="k-grid-cancel-command" @click="cancelDiscardHandler">
+      {{ dataItem.ProductID ? 'Cancel' : 'Discard' }}
+    </kbutton>
+  </td>
+</template>
+<script>
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    kbutton: Button,
+  },
+  props: {
+    field: String,
+    dataItem: Object,
+    format: String,
+    className: String,
+    columnIndex: Number,
+    columnsCount: Number,
+    rowType: String,
+    level: Number,
+    expanded: Boolean,
+    editor: String,
+  },
+  methods: {
+    editHandler() {
+      this.$emit('edit', { dataItem: this.dataItem });
+    },
+    removeHandler() {
+      this.$emit('remove', { dataItem: this.dataItem });
+    },
+    addUpdateHandler() {
+      this.$emit('save', { dataItem: this.dataItem });
+    },
+    cancelDiscardHandler() {
+      this.$emit('cancel', { dataItem: this.dataItem });
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/editing/inline-form/FormContent.vue b/vue-options-api-demos/grid/editing/inline-form/FormContent.vue
new file mode 100644
index 00000000..637a1b84
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/inline-form/FormContent.vue
@@ -0,0 +1,57 @@
+<template>
+  <form-element :style="{ maxWidth: '650px' }">
+    <fieldset class="k-form-fieldset">
+      <Field
+        :name="'name'"
+        :label="'Name'"
+        :component="'myTemplate'"
+        :validator="isValid"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></forminput>
+        </template>
+      </Field>
+    </fieldset>
+  </form-element>
+</template>
+
+<script>
+import { FormElement, Field } from '@progress/kendo-vue-form';
+import FormInput from './FormInput.vue';
+
+export default {
+  components: {
+    'form-element': FormElement,
+    forminput: FormInput,
+    Field,
+  },
+  inject: {
+    kendoForm: { default: {} },
+  },
+  emits: ['change', 'valid'],
+  data() {
+    return {
+      value: '',
+      valid: true,
+      touched: false,
+      validationMessage: '',
+      hint: '',
+      disabled: false,
+    };
+  },
+  methods: {
+    change(e) {
+      this.$emit('change', e, e.target.value);
+    },
+    isValid(value) {
+      this.$emit('valid', value.length > 0);
+      return value.length > 0 ? '' : 'The field is required';
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/editing/inline-form/FormInput.vue b/vue-options-api-demos/grid/editing/inline-form/FormInput.vue
new file mode 100644
index 00000000..fa49ba16
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/inline-form/FormInput.vue
@@ -0,0 +1,89 @@
+<template>
+  <fieldwrapper>
+    <klabel
+      :class="'k-form-label'"
+      :editor-id="id"
+      :editor-valid="valid"
+      :disabled="disabled"
+      :optional="optional"
+    >
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <kinput
+        :valid="valid"
+        :id="id"
+        :value="value"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        @input="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { Input } from '@progress/kendo-vue-inputs';
+export default {
+  props: {
+    optional: Boolean,
+    disabled: Boolean,
+    placeholder: String,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    kinput: Input,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  emits: {
+    input: null,
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/editing/inline-form/NameCell.vue b/vue-options-api-demos/grid/editing/inline-form/NameCell.vue
new file mode 100644
index 00000000..10a5f810
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/inline-form/NameCell.vue
@@ -0,0 +1,58 @@
+<template>
+    <td v-if="!dataItem.inEdit">{{ dataItem[field] }}</td>
+    <td v-else>
+      <textbox
+        ref="nameInput"
+        :value="dataItem[field]"
+        @input="onInput"
+        @change="change"
+        :valid="isValidLength"
+      >
+      </textbox>
+      <Popup
+        :anchor="'nameInput'"
+        :show="!isValidLength && touched"
+        :popup-class="'popup-content'"
+      >
+        <span class="errorMessage">Should be more than 3 symbols.</span>
+      </Popup>
+    </td>
+  </template>
+  
+  <script>
+  import { TextBox } from '@progress/kendo-vue-inputs';
+  import { Popup } from '@progress/kendo-vue-popup';
+  
+  export default {
+    components: {
+      textbox: TextBox,
+      Popup: Popup,
+    },
+    props: {
+      field: String,
+      dataItem: Object,
+    },
+    data() {
+      return {
+        touched: false,
+      };
+    },
+    computed: {
+      isValidLength() {
+        return this.dataItem[this.field] && this.dataItem[this.field].length > 3;
+      },
+    },
+    methods: {
+      onInput(e) {
+        this.dataItem[this.field] = e.value;
+        this.touched = true;
+      },
+      change(e) {
+        this.dataItem[this.field] = e.value;
+        this.touched = true;
+        this.$emit('change', e);
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/grid/editing/inline-form/main.js b/vue-options-api-demos/grid/editing/inline-form/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/inline-form/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/editing/inline-form/main.vue b/vue-options-api-demos/grid/editing/inline-form/main.vue
new file mode 100644
index 00000000..8550e0da
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/inline-form/main.vue
@@ -0,0 +1,212 @@
+<template>
+  <Grid
+    ref="grid"
+    :style="{ height: '440px' }"
+    :data-items="gridData"
+    :edit-field="'inEdit'"
+    @itemchange="itemChange"
+    :columns="columns"
+  >
+    <template v-slot:myTemplate="{ props }">
+      <custom
+        :data-item="props.dataItem"
+        :allow-save="nameValidState"
+        @edit="edit"
+        @save="save"
+        @remove="remove"
+        @cancel="cancel"
+      />
+    </template>
+    <template v-slot:myNameCell="{ props }">
+      <namecell
+        ref="namecell"
+        :data-item="props.dataItem"
+        :field="props.field"
+        @change="(e) => nameChange(e, props.dataItem)"
+        @valid="updateNameValidState"
+      />
+    </template>
+    <grid-toolbar>
+      <kbutton title="Add new" :theme-color="'primary'" @click="insert">
+        Add new
+      </kbutton>
+      <kbutton
+        v-if="hasItemsInEdit"
+        title="Cancel current changes"
+        @click="cancelChanges"
+      >
+        Cancel current changes
+      </kbutton>
+    </grid-toolbar>
+    <grid-norecords> There is no data available custom </grid-norecords>
+  </Grid>
+</template>
+<script>
+import { Grid, GridToolbar, GridNoRecords } from '@progress/kendo-vue-grid';
+import { Button } from '@progress/kendo-vue-buttons';
+import CommandCell from './CommandCell.vue';
+import NameCell from './NameCell.vue';
+import { isLengthAboveThree } from './verificationFunctions.js';
+
+var sampleProducts = [
+  {
+    ProductID: 1,
+    ProductName: 'Chai',
+  },
+  {
+    ProductID: 2,
+    ProductName: 'Chang',
+  },
+  {
+    ProductID: 3,
+    ProductName: 'Aniseed Syrup',
+  },
+  {
+    ProductID: 4,
+    ProductName: "Chef Anton's Cajun Seasoning",
+  },
+];
+
+export default {
+  components: {
+    Grid: Grid,
+    'grid-toolbar': GridToolbar,
+    'grid-norecords': GridNoRecords,
+    custom: CommandCell,
+    namecell: NameCell,
+    kbutton: Button,
+  },
+  data: function () {
+    return {
+      gridData: sampleProducts.slice(0),
+      updatedData: [],
+      editID: null,
+      group: [{ field: 'UnitsInStock' }],
+      expandedItems: [],
+      columns: [
+        { field: 'ProductID', editable: false, title: 'ID', width: '80px' },
+        { field: 'ProductName', title: 'Name', cell: 'myNameCell' },
+        { cell: 'myTemplate', width: '210px' },
+      ],
+      nameValidState: true,
+      initialDataItem: undefined,
+    };
+  },
+  computed: {
+    hasItemsInEdit() {
+      return this.gridData.filter((p) => p.inEdit).length > 0;
+    },
+  },
+  methods: {
+    nameChange(e, dataItem) {
+      if (this.nameValidState) {
+        const updatedData = this.gridData.slice();
+
+        const item = this.update(updatedData, dataItem, false);
+        item.ProductName = e.target.value;
+        this.gridData = updatedData;
+      }
+    },
+    validate(dataItem) {
+      const productNameValue = dataItem.ProductName;
+
+      this.productNameFieldLengthaboveThree =
+        isLengthAboveThree(productNameValue);
+
+      return this.productNameFieldLengthaboveThree;
+    },
+    itemChange(e) {
+      const updatedData = this.gridData.slice();
+
+      const item = this.update(updatedData, e.dataItem, false);
+      item[e.field] = e.value;
+      this.gridData = updatedData;
+    },
+    insert() {
+      const updatedData = this.gridData.slice();
+      const dataItem = { inEdit: true, Discontinued: false, isNew: true };
+      const item = this.update(updatedData, dataItem, false);
+      const newproducts = this.gridData.slice();
+      newproducts.unshift(item);
+      this.update(newproducts, item, false);
+      this.gridData = newproducts;
+    },
+    edit(e) {
+      this.initialDataItem = { ...e.dataItem };
+      e.dataItem.inEdit = true;
+    },
+    save(e) {
+      if (this.validate(e.dataItem)) {
+        let index = this.gridData.findIndex(
+          (p) => p.ProductID === e.dataItem.ProductID
+        );
+        let item = this.gridData[index];
+        let updated = Object.assign(
+          this.update(this.gridData.slice(), item, false),
+          { inEdit: undefined }
+        );
+        this.gridData.splice(index, 1, updated);
+        let updateDataIndex = this.updatedData.findIndex(
+          (p) => p.ProductID === e.dataItem.ProductID
+        );
+        this.updatedData.splice(updateDataIndex, 1, updated);
+      }
+    },
+    update(data, item, remove) {
+      let updated;
+      let itemProductID = item.ProductID;
+      let index = data.findIndex(
+        (p) =>
+          JSON.stringify({ ...p }) === JSON.stringify(item) ||
+          (itemProductID && p.ProductID === itemProductID)
+      );
+      if (index >= 0) {
+        updated = Object.assign({}, item);
+        data[index] = updated;
+      } else {
+        let id = 1;
+        data.forEach((p) => {
+          id = Math.max(p.ProductID + 1, id);
+        });
+        updated = Object.assign({}, item, { ProductID: id });
+        data.unshift(updated);
+        index = 0;
+      }
+
+      if (remove) {
+        data = data.splice(index, 1);
+      }
+      return data[index];
+    },
+    cancel(e) {
+      if (!e.isNew && this.initialDataItem) {
+        e.dataItem.inEdit = undefined;
+        this.gridData.shift();
+        this.newEntry = false;
+        this.update(this.gridData, this.initialDataItem, false);
+      } else {
+        this.update(this.gridData, e.dataItem, true);
+      }
+    },
+    remove(e) {
+      e.dataItem.inEdit = undefined;
+      this.update(this.gridData, e.dataItem, true);
+      this.update(sampleProducts, e.dataItem, true);
+      this.gridData = this.gridData.slice();
+    },
+    cancelChanges() {
+      let editedItems = sampleProducts.filter((p) => p.inEdit === true);
+      if (editedItems.length) {
+        editedItems.forEach((item) => {
+          item.inEdit = undefined;
+        });
+      }
+
+      this.gridData = sampleProducts.slice();
+    },
+    updateNameValidState(value) {
+      this.nameValidState = value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/editing/inline-form/verificationFunctions.js b/vue-options-api-demos/grid/editing/inline-form/verificationFunctions.js
new file mode 100644
index 00000000..75a77600
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/inline-form/verificationFunctions.js
@@ -0,0 +1,5 @@
+// Check if the length of the Name is above 3 symbols
+const isLengthAboveThree = (value) => value !== undefined && value.length > 3;
+
+export { isLengthAboveThree };
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/grid/editing/inline/CommandCell.vue b/vue-options-api-demos/grid/editing/inline/CommandCell.vue
new file mode 100644
index 00000000..fc861d85
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/inline/CommandCell.vue
@@ -0,0 +1,73 @@
+<template>
+<td class="k-command-cell k-table-td">
+    <kbutton
+        :class="editButtonClass"
+        :type="'button'"
+        :theme-color="'primary'"
+        @click="editHandler">
+        {{editText}}
+    </kbutton>
+    <kbutton
+        :class="removeButtonClass"
+        @click="removeHandler">
+        {{removeText}}
+    </kbutton>
+</td>
+</template>
+<script>
+import { Button } from '@progress/kendo-vue-buttons';
+export default {
+    components: {
+        kbutton: Button
+    },
+    props: {
+        id: String,
+        field: String,
+        dataItem: Object,
+        format: String,
+        className: String,
+        columnIndex: Number,
+        columnsCount: Number,
+        rowType: String,
+        level: Number,
+        expanded: Boolean
+    },
+    data(){
+        return {
+            navAttrs: {}
+        };
+    },
+    computed: {
+        editText(){
+            if (this.$props.dataItem['inEdit']){
+                return this.$props.dataItem.ProductID? 'Update' : 'Add'
+            } else {
+                return 'Edit';
+            }
+        },
+        removeText(){
+            if (this.$props.dataItem['inEdit']){
+                return this.$props.dataItem.ProductID? 'Cancel' : 'Discard'
+            } else {
+                return 'Remove';
+            }
+        },
+        editButtonClass(){
+            return this.$props.dataItem['inEdit'] ? 'k-grid-save-command' : 'k-grid-edit-command';
+        },
+        removeButtonClass(){
+            return this.$props.dataItem['inEdit'] ? 'k-grid-cancel-command' : 'k-grid-remove-command';
+        }
+    },
+    methods: {
+        editHandler: function() {
+            const command = this.$props.dataItem['inEdit'] ? 'save' : 'edit';
+            this.$emit(command, {dataItem:this.dataItem});
+        },
+        removeHandler: function() {
+            const command = this.$props.dataItem['inEdit'] ? 'cancel' : 'remove';
+            this.$emit(command, {dataItem:this.dataItem});
+        },
+    }
+}
+</script>
diff --git a/vue-options-api-demos/grid/editing/inline/main.js b/vue-options-api-demos/grid/editing/inline/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/inline/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/editing/inline/main.vue b/vue-options-api-demos/grid/editing/inline/main.vue
new file mode 100644
index 00000000..dafd1b24
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/inline/main.vue
@@ -0,0 +1,199 @@
+<template>
+ <Grid ref="grid"
+          :style="{height: '440px'}"
+          :data-items="gridData"
+          :edit-field="'inEdit'"
+          :sortable="true"
+          :pageable="pageable"
+          :take="take"
+          :skip="skip"
+          :total="total"
+          @itemchange="itemChange"
+          @datastatechange="dataStateChange"
+          :columns="columns">
+        <template v-slot:myTemplate="{props}">
+            <custom :data-item="props.dataItem"
+                    @edit="edit"
+                    @save="save"
+                    @remove="remove"
+                    @cancel="cancel"/>
+        </template>
+        <grid-toolbar>
+            <kbutton title="Add new"
+                    :theme-color="'primary'"
+                    @click='insert' >
+                Add new
+            </kbutton>
+            <kbutton v-if="hasItemsInEdit"
+                    title="Cancel current changes"
+                    @click="cancelChanges">
+                    Cancel current changes
+            </kbutton>
+        </grid-toolbar>
+        <grid-norecords>
+            There is no data available custom
+        </grid-norecords>
+    </Grid>
+</template>
+<script>
+import { Grid, GridToolbar, GridNoRecords } from '@progress/kendo-vue-grid';
+import { Button } from '@progress/kendo-vue-buttons';
+import { process } from '@progress/kendo-data-query';
+import CommandCell from './CommandCell.vue';
+
+export default {
+    components: {
+        'Grid': Grid,
+        'grid-toolbar': GridToolbar,
+        'grid-norecords': GridNoRecords,
+        'custom': CommandCell,
+         'kbutton': Button
+    },
+    data: function () {
+        return {
+            filter: null,
+            sort: null,
+            pageable: true,
+            gridData: [],
+            skip: 0,
+            take: 10,
+            total: 100,
+            updatedData: [],
+            editID: null,
+            columns: [
+                { field: 'ProductID', filterable: false, editable: false, title: 'ID', width: '80px' },
+                { field: 'ProductName', title: 'Name' },
+                { field: 'UnitPrice', filter: 'numeric', title: 'Unit Price' },
+                { field: 'UnitsInStock', title: 'Units', filter: 'numeric', width: '200px', editor: 'numeric' },
+                { field: 'Discontinued', title: 'Discontinued', editor:'boolean' },
+                { cell: 'myTemplate', filterable: false, width: '220px' }
+            ],
+            gridData: []
+        };
+    },
+    computed: {
+        hasItemsInEdit() {
+            return this.gridData.filter(p => p.inEdit).length > 0;
+        }
+    },
+    created: function() {
+        this.updatedData = this.createRandomData(this.total);
+        this.getData();
+    },
+    methods: {
+        itemChange: function (e) {
+            if (e.dataItem.ProductID) {
+              let index = this.gridData.findIndex(p => p.ProductID === e.dataItem.ProductID);
+              let updated = Object.assign({},this.gridData[index], {[e.field]:e.value});
+              this.gridData.splice(index, 1, updated);
+            } else {
+              e.dataItem[e.field] = e.value;
+            }
+        },
+        insert() {
+            const dataItem = { inEdit: true };
+            this.gridData.splice(0, 0, dataItem)
+        },
+        edit: function (e) {
+            let index = this.gridData.findIndex(p => p.ProductID === e.dataItem.ProductID);
+            let updated = Object.assign({},this.gridData[index], {inEdit:true});
+            this.gridData.splice(index, 1, updated);
+        },
+        save: function(e) {
+            let index = this.gridData.findIndex(p => p.ProductID === e.dataItem.ProductID);
+            let item = this.gridData[index];
+            let updated = Object.assign(this.update(this.gridData.slice(), item, false), {inEdit:undefined});
+            this.gridData.splice(index, 1, updated);
+            let updateDataIndex = this.updatedData.findIndex(p => p.ProductID === e.dataItem.ProductID);
+            this.updatedData.splice(updateDataIndex, 1, updated);
+        },
+        update(data, item, remove) {
+            let updated;
+            let index = data.findIndex(p => item.ProductID && p.ProductID === item.ProductID);
+            if (index >= 0) {
+                updated = Object.assign({}, item);
+                data[index] = updated;
+            } else {
+                let maxId = data.reduce((max, p) => p.ProductID > max ? p.ProductID : max, 0);
+                let newId = maxId + 1;
+                updated = Object.assign({}, item, { ProductID: newId });
+                data.unshift(updated);
+                index = 0;
+            }
+
+            if (remove) {
+                data = data.splice(index, 1);
+            }
+            return data[index];
+        },
+        cancel(e) {
+            if (e.dataItem.ProductID) {
+                let index = this.gridData.findIndex(p => p.ProductID === e.dataItem.ProductID);
+                let updateDataIndex = this.updatedData.findIndex(p => p.ProductID === e.dataItem.ProductID);
+                let updated = Object.assign(this.updatedData[updateDataIndex], {'inEdit': undefined});
+                this.gridData.splice(index, 1, updated);
+            } else {
+              let index = this.gridData.findIndex(p => JSON.stringify(e.dataItem) === JSON.stringify(p));
+
+              this.gridData.splice(index, 1);
+            }
+        },
+        remove(e) {
+            e.dataItem.inEdit = undefined;
+            this.update(this.gridData, e.dataItem, true);
+            this.update(this.updatedData, e.dataItem, true);
+        },
+        cancelChanges () {
+             let editedItems = this.updatedData.filter(p => p.inEdit === true);
+             if(editedItems.length){
+                editedItems.forEach(
+                    item => {
+                       item.inEdit = undefined;
+                     });
+             }
+            this.getData();
+        },
+         getData: function () {
+            this.gridData = process(
+              this.updatedData,
+             {
+               take: this.take,
+               skip: this.skip,
+               sort: this.sort,
+               filter: this.filter
+            }).data;
+
+           this.total = process(
+              this.updatedData,
+             {
+               filter: this.filter
+            }).total;
+        },
+        createAppState: function(dataState) {
+            this.take = dataState.take;
+            this.skip = dataState.skip;
+            this.filter = dataState.filter;
+            this.sort = dataState.sort;
+            this.getData();
+        },
+        dataStateChange: function (event) {
+            this.createAppState(event.data);
+        },
+        createRandomData(count) {
+            const productNames = ['Chai', 'Chang', 'Syrup', 'Apple', 'Orange', 'Banana', 'Lemon', 'Pineapple', 'Tea', 'Milk'];
+            const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120];
+            const units = [2, 7, 12, 25,  67, 233, 123, 53, 67, 89];
+            const trueFalse = [true, false];
+
+            return Array(count).fill({}).map((_, idx) => ({
+                ProductID: idx + 1,
+                ProductName: productNames[Math.floor(Math.random() * productNames.length)],
+                UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)],
+                UnitsInStock: units[Math.floor(Math.random() * units.length)],
+                Discontinued: trueFalse[Math.floor(Math.random() * trueFalse.length)]
+            }));
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/editing/validation/CommandCell.vue b/vue-options-api-demos/grid/editing/validation/CommandCell.vue
new file mode 100644
index 00000000..b78ab8cb
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/validation/CommandCell.vue
@@ -0,0 +1,62 @@
+<template>
+<td v-if="!dataItem['inEdit']" class="k-command-cell k-table-td">
+    <kbutton
+        :theme-color="'primary'"
+        class="k-grid-edit-command"
+        @click="editHandler">
+        Edit
+    </kbutton>
+    <kbutton
+        class="k-grid-remove-command"
+        @click="removeHandler">
+        Remove
+    </kbutton>
+</td>
+<td v-else>
+        <kbutton
+            class="k-grid-save-command"
+            @click="addUpdateHandler">
+            {{dataItem.ProductID? 'Update' : 'Add'}}
+        </kbutton>
+        <kbutton
+            class="k-grid-cancel-command"
+            @click="cancelDiscardHandler">
+            {{dataItem.ProductID? 'Cancel' : 'Discard'}}
+        </kbutton>
+    </td>
+</template>
+<script>
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'kbutton': Button
+    },
+    props: {
+        field: String,
+        dataItem: Object,
+        format: String,
+        className: String,
+        columnIndex: Number,
+        columnsCount: Number,
+        rowType: String,
+        level: Number,
+        expanded: Boolean,
+        editor: String
+    },
+    methods: {
+        editHandler: function() {
+            this.$emit('edit', {dataItem:this.dataItem});
+        },
+        removeHandler: function() {
+            this.$emit('remove', {dataItem:this.dataItem});
+        },
+        addUpdateHandler: function() {
+            this.$emit('save', {dataItem:this.dataItem});
+        },
+        cancelDiscardHandler: function() {
+            this.$emit('cancel', {dataItem:this.dataItem});
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/grid/editing/validation/DatePickerCell.vue b/vue-options-api-demos/grid/editing/validation/DatePickerCell.vue
new file mode 100644
index 00000000..5989990c
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/validation/DatePickerCell.vue
@@ -0,0 +1,49 @@
+<template>
+<td v-if="!dataItem.inEdit">{{ formattedCurrentValue}}</td>
+    <td v-else>
+      <datepicker :style="{ width: '100%' }"
+          ref="dateInput"
+          :value="dataItem[field]"
+          :valid="dateInRange"
+          @change="change"
+      ></datepicker>
+
+      <Popup
+          :anchor="'dateInput'"
+          :show="!dateInRange"
+          :popup-class="'popup-content'"
+      >
+          <span class="errorMessage">          
+              Should be between 1.1.1995 and 31.12.2022    
+          </span>  
+      </Popup>
+</td>
+</template>
+<script>
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+import { Popup } from '@progress/kendo-vue-popup';
+
+export default {
+    components: {
+        'datepicker': DatePicker,
+        'Popup': Popup
+    },
+    props: {
+        field: String,
+        dataItem: Object,
+        dateInRange: Boolean
+    },
+    computed: {
+        formattedCurrentValue: function(){
+          return new Intl.DateTimeFormat('en-US').format(this.dataItem[this.field]);  
+        }
+    },
+    methods: {
+        change: function(e) {
+            this.dataItem[this.field] = e.value;
+            this.$emit('change', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/grid/editing/validation/InputCell.vue b/vue-options-api-demos/grid/editing/validation/InputCell.vue
new file mode 100644
index 00000000..eb945580
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/validation/InputCell.vue
@@ -0,0 +1,47 @@
+<template>
+<td v-if="!dataItem.inEdit">{{ dataItem[field]}}</td>
+    <td v-else>
+    <k-input        
+          ref="nameInput"
+          :value="dataItem[field]"
+          @input="onInput"
+          @change="change"
+          :valid="validLength"
+      ></k-input>
+  
+      <Popup
+          :anchor="'nameInput'"
+          :show="!validLength"
+          :popup-class="'popup-content'"
+      >
+          <span class="errorMessage">          
+              Should be more than 3 symbols.  
+          </span>  
+      </Popup>
+</td>
+</template>
+<script>
+import { Input } from '@progress/kendo-vue-inputs';
+import { Popup } from '@progress/kendo-vue-popup';
+
+export default {
+    components: {
+      'k-input': Input,
+      'Popup': Popup
+    },
+    props: {
+        field: String,
+        dataItem: Object,
+        validLength: Boolean
+    },
+    methods: {
+        onInput: function(e){
+          this.dataItem[this.field] = e.value;
+        },
+        change: function(e) {
+            this.dataItem[this.field] = e.value;
+            this.$emit('change', e);
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/grid/editing/validation/NumericCell.vue b/vue-options-api-demos/grid/editing/validation/NumericCell.vue
new file mode 100644
index 00000000..c5508af7
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/validation/NumericCell.vue
@@ -0,0 +1,50 @@
+<template>
+  <td v-if="!dataItem.inEdit">{{ currentValue }}</td>
+      <td v-else>
+      <numerictextbox 
+            ref="numericInput"
+            :value="currentValue"
+            :valid="valid"
+            @change="change"
+        ></numerictextbox>
+          <Popup
+              :anchor="'numericInput'"
+              :show="!valueNotEmpty || !validRange"
+              :popup-class="'popup-content'"
+          >
+            <span v-if="!valueNotEmpty" class="errorMessage">The field is Required</span>
+            <span v-if="!validRange" class="errorMessage">Should be between 0 and 500</span>
+            </Popup>
+  </td>
+</template>
+<script>
+import { NumericTextBox } from '@progress/kendo-vue-inputs';
+import { Popup } from '@progress/kendo-vue-popup';
+
+export default {
+    components: {
+      'numerictextbox': NumericTextBox,
+      'Popup': Popup
+    },
+    props: {
+        field: String,
+        dataItem: Object,
+        valueNotEmpty: Boolean,
+        validRange: Boolean
+    },
+    computed: {    
+        valid: function() {
+          return this.valueNotEmpty && this.validRange;
+        },
+        currentValue: function(){
+          return this.dataItem[this.field];
+        }
+    },
+    methods: {
+        change: function(e) {
+            this.dataItem[this.field] = e.value;
+            this.$emit('change', e);
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/grid/editing/validation/main.js b/vue-options-api-demos/grid/editing/validation/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/validation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/editing/validation/main.vue b/vue-options-api-demos/grid/editing/validation/main.vue
new file mode 100644
index 00000000..91f8a662
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/validation/main.vue
@@ -0,0 +1,251 @@
+<template>
+ <Grid ref="grid"
+          :style="{height: '440px'}"
+          :data-items="gridData"
+          :edit-field="'inEdit'"
+          :sortable="true"
+          :pageable="pageable"
+          :take="take"
+          :skip="skip"
+          :total="total"
+          @itemchange="itemChange"
+          @datastatechange="dataStateChange"
+          :columns="columns">
+        <template v-slot:myTemplate="{props}">
+            <custom :data-item="props.dataItem"
+                    @edit="edit"
+                    @save="save"
+                    @remove="remove"
+                    @cancel="cancel"/>
+        </template>
+        <template v-slot:numericCell="{props}">
+            <numericCell ref="numericCell" :data-item="props.dataItem"
+                    :field="props.field"
+                    :validRange="unitsFieldValueIsInRange"
+                    :valueNotEmpty="unitsFieldHasValue"
+                    @change="(e)=>validate(props.dataItem)"
+                    />
+        </template>
+        <template v-slot:inputCell="{props}">
+            <inputCell :data-item="props.dataItem"
+                    :field="props.field"
+                    :validLength="productNameFieldLengthaboveThree"
+                    @change="(e)=>validate(props.dataItem)"
+                    />
+        </template>
+        <template v-slot:dateCell="{props}">
+            <dateCell :data-item="props.dataItem"
+                    :field="props.field"
+                    :dateInRange="firstOrderedOnDateBetweenRange"
+                    @change="(e)=>validate(props.dataItem)"
+                    />
+        </template>
+        <grid-toolbar>
+            <kbutton title="Add new"
+                    :theme-color="'primary'"
+                    @click='insert' >
+                Add new
+            </kbutton>
+            <kbutton v-if="hasItemsInEdit"
+                    title="Cancel current changes"
+                    @click="cancelChanges">
+                    Cancel current changes
+            </kbutton>
+        </grid-toolbar>
+        <grid-norecords>
+            There is no data available custom
+        </grid-norecords>
+    </Grid>
+</template>
+<script>
+import { Grid, GridToolbar, GridNoRecords } from '@progress/kendo-vue-grid';
+import { Button } from '@progress/kendo-vue-buttons';
+import { process } from '@progress/kendo-data-query';
+import CommandCell from './CommandCell.vue';
+import sampleProducts from "./products.js";
+import NumericCell from './NumericCell.vue';
+import InputCell from './InputCell.vue';
+import DatePickerCell from './DatePickerCell.vue';
+
+import {unitsFieldHasValue, unitsFieldValueIsInRange, isLengthAboveThree ,isDateBetweenRange} from "./verificationFunctions.js";
+
+
+export default {
+    components: {
+        'Grid': Grid,
+        'grid-toolbar': GridToolbar,
+        'grid-norecords': GridNoRecords,
+        'custom': CommandCell,
+        'numericCell': NumericCell,
+        'inputCell': InputCell,
+        'dateCell': DatePickerCell,
+        'kbutton': Button
+    },
+    data: function () {
+        return {
+            filter: null,
+            sort: null,
+            pageable: true,
+            gridData: [],
+            skip: 0,
+            take: 10,
+            total: 10,
+            updatedData: [],
+            editID: null,
+            columns: [
+                { field: 'ProductID', filterable: false, editable: false, title: 'ID', width: '80px' },
+                { field: 'ProductName', title: 'Name',  width: '200px', cell: "inputCell" },
+                { field: 'FirstOrderedOn', title: 'First Ordered',  width: '200px', cell: "dateCell" },
+                { field: 'UnitsInStock', title: 'Units', width: '200px', cell: 'numericCell' },
+                { cell: 'myTemplate', filterable: false }
+            ],
+            gridData: [],
+            unitsFieldHasValue: true,
+            unitsFieldValueIsInRange: true,
+            productNameFieldLengthaboveThree: true,
+            firstOrderedOnDateBetweenRange: true
+        };
+    },
+    computed: {
+        hasItemsInEdit() {
+            return this.gridData.filter(p => p.inEdit).length > 0;
+        }
+    },
+    created: function() {
+        this.updatedData = sampleProducts;
+        this.getData();
+    },
+    methods: {
+        itemChange: function (e) {
+            if (e.dataItem.ProductID) {
+              let index = this.gridData.findIndex(p => p.ProductID === e.dataItem.ProductID);
+              let updated = Object.assign({},this.gridData[index], {[e.field]:e.value});
+              this.gridData.splice(index, 1, updated);
+            } else {
+              e.dataItem[e.field] = e.value;
+            }
+        },
+        validate: function(dataItem){
+            const unitsInStockValue = dataItem.UnitsInStock;
+            const productNameValue = dataItem.ProductName;
+            const orderDateValue = dataItem.FirstOrderedOn;
+
+            this.unitsFieldHasValue = unitsFieldHasValue(unitsInStockValue);
+            this.unitsFieldValueIsInRange = unitsFieldValueIsInRange(unitsInStockValue);
+            this.productNameFieldLengthaboveThree =  isLengthAboveThree(productNameValue);
+            this.firstOrderedOnDateBetweenRange = isDateBetweenRange(orderDateValue);
+
+            return this.unitsFieldHasValue && this.unitsFieldValueIsInRange && this.productNameFieldLengthaboveThree && this.firstOrderedOnDateBetweenRange;
+        },
+        insert: function() {
+            const dataItem = { inEdit: true };
+            const newproducts = this.gridData.slice();
+            this.gridData.splice(0, 0, dataItem)
+        },
+        edit: function (e) {
+            let index = this.gridData.findIndex(p => p.ProductID === e.dataItem.ProductID);
+            let updated = Object.assign({},this.gridData[index], {inEdit:true});
+            this.gridData.splice(index, 1, updated);
+        },
+        save: function(e) {
+            if(this.validate(e.dataItem)){
+                let index = this.gridData.findIndex(p => p.ProductID === e.dataItem.ProductID);
+                let item = this.gridData[index];
+                let updated = Object.assign(this.update(this.gridData.slice(), item, false), {inEdit:undefined});
+                this.gridData.splice(index, 1, updated);
+                let updateDataIndex = this.updatedData.findIndex(p => p.ProductID === e.dataItem.ProductID);
+                this.updatedData.splice(updateDataIndex, 1, updated);
+            }
+        },
+        update(data, item, remove) {
+            let updated;
+            let index = data.findIndex(p => item.ProductID && p.ProductID === item.ProductID);
+            if (index >= 0) {
+                updated = Object.assign({}, item);
+                data[index] = updated;
+            } else {
+                let id = 1;
+                this.updatedData.forEach(p => { if (p.ProductID) { id = Math.max(p.ProductID + 1, id); } });
+                updated = Object.assign({}, item, { ProductID: id });
+
+                data.unshift(updated);
+                index = 0;
+            }
+
+            if (remove) {
+                data = data.splice(index, 1);
+            }
+            return data[index];
+        },
+        cancel(e) {
+            if (e.dataItem.ProductID) {
+                let index = this.gridData.findIndex(p => p.ProductID === e.dataItem.ProductID);
+                let updateDataIndex = this.updatedData.findIndex(p => p.ProductID === e.dataItem.ProductID);
+                let updated = Object.assign(this.updatedData[updateDataIndex], {'inEdit': undefined});
+                this.gridData.splice(index, 1, updated);
+            } else {
+              let index = this.gridData.findIndex(p => JSON.stringify(e.dataItem) === JSON.stringify(p));
+
+              this.gridData.splice(index, 1);
+            }
+        },
+        remove(e) {
+            e.dataItem.inEdit = undefined;
+            this.update(this.gridData, e.dataItem, true);
+            this.update(this.updatedData, e.dataItem, true);
+            this.gridData = this.gridData.slice();
+        },
+        cancelChanges () {
+             let editedItems = this.updatedData.filter(p => p.inEdit === true);
+             if(editedItems.length){
+                editedItems.forEach(
+                    item => {
+                       item.inEdit = undefined;
+                     });
+             }
+            this.getData();
+        },
+         getData: function () {
+            this.gridData = process(
+              this.updatedData,
+             {
+               take: this.take,
+               skip: this.skip,
+               sort: this.sort,
+               filter: this.filter
+            }).data;
+
+           this.total = process(
+              this.updatedData,
+             {
+               filter: this.filter
+            }).total;
+        },
+        createAppState: function(dataState) {
+            this.take = dataState.take;
+            this.skip = dataState.skip;
+            this.filter = dataState.filter;
+            this.sort = dataState.sort;
+            this.getData();
+        },
+        dataStateChange: function (event) {
+            this.createAppState(event.data);
+        }
+    }
+};
+
+</script>
+
+<style scoped>
+  .errorMessage{
+    display: block;
+    color: red;
+  }
+
+  .popup-content {
+    color: #787878;
+    background-color: #fcf7f8;
+    border: 1px solid red;
+    width: 180px;
+  }
+</style>
diff --git a/vue-options-api-demos/grid/editing/validation/products.js b/vue-options-api-demos/grid/editing/validation/products.js
new file mode 100644
index 00000000..da9ef012
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/validation/products.js
@@ -0,0 +1,26 @@
+export default [
+    {
+        ProductID: 1,
+        ProductName: 'Chai',
+        UnitsInStock: 39,
+        FirstOrderedOn: new Date(1996, 8, 20)
+    },
+    {
+        ProductID: 2,
+        ProductName: 'Chang',
+        UnitsInStock: 17,
+        FirstOrderedOn: new Date(1996, 7, 12)
+    },
+    {
+        ProductID: 3,
+        ProductName: 'Aniseed Syrup',
+        UnitsInStock: 13,
+        FirstOrderedOn: new Date(1996, 8, 26)
+    },
+    {
+        ProductID: 4,
+        ProductName: "Chef Anton's Cajun Seasoning",
+        UnitsInStock: 53,
+        FirstOrderedOn: new Date(1996, 9, 19)
+    }
+];
diff --git a/vue-options-api-demos/grid/editing/validation/verificationFunctions.js b/vue-options-api-demos/grid/editing/validation/verificationFunctions.js
new file mode 100644
index 00000000..869fb3fd
--- /dev/null
+++ b/vue-options-api-demos/grid/editing/validation/verificationFunctions.js
@@ -0,0 +1,27 @@
+// Check if the Units field is not empty
+const unitsFieldHasValue = value => value === null || value === undefined ? false : true;
+
+// Check if the value in the Units field is between 0 and 500
+const unitsFieldValueIsInRange = value => value !== null && value >= 0 && value <= 500 ? true : false;
+
+// Check if the length of the Name is above 3 symbols
+const isLengthAboveThree = value => {
+    if (value === undefined) {
+        return false;
+    }
+    return value.length > 3;
+};
+
+// Check if the selected date is between 1.1.1995 and 31.12.2022
+const isDateBetweenRange = value => {
+    const yearOfTheDate = new Date(value).getFullYear();
+
+    return yearOfTheDate >= 1995 && yearOfTheDate <= 2022 ? true : false;
+};
+
+export {
+    unitsFieldHasValue,
+    unitsFieldValueIsInRange,
+    isLengthAboveThree,
+    isDateBetweenRange
+};
diff --git a/vue-options-api-demos/grid/excel/main.js b/vue-options-api-demos/grid/excel/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/excel/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/excel/main.vue b/vue-options-api-demos/grid/excel/main.vue
new file mode 100644
index 00000000..2d3b14cf
--- /dev/null
+++ b/vue-options-api-demos/grid/excel/main.vue
@@ -0,0 +1,58 @@
+<template>
+<div>
+    <kbutton :theme-color="'primary'" @click="exportExcel">Export Excel</kbutton>
+    <Grid
+        :style="{height: '280px'}"
+        :data-items="items"
+        :columns = "columns">
+    </Grid>
+</div>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import { saveExcel } from '@progress/kendo-vue-excel-export';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'Grid': Grid,
+      'kbutton': Button
+    },
+   data: function () {
+        return {
+            items: [],
+            columns: [
+                { field: 'ProductID'},
+                { field: 'ProductName', title: 'Product Name' },
+                { field: 'UnitPrice', title: 'Unit Price' }
+            ]
+        };
+    },
+    methods: {
+        exportExcel () {
+            saveExcel({
+                data: this.items,
+                fileName: "myFile",
+                columns: [
+                  { field: 'ProductID'},
+                  { field: 'ProductName', title: 'Product Name' }
+              ]
+            });
+        },
+        createRandomData(count) {
+            const productNames = ['Chai', 'Chang', 'Syrup', 'Apple', 'Orange', 'Banana', 'Lemon', 'Pineapple', 'Tea', 'Milk'];
+            const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120]
+
+            return Array(count).fill({}).map((_, idx) => ({
+                ProductID: idx + 1,
+                ProductName: productNames[Math.floor(Math.random() * productNames.length)],
+                UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)]
+            }));
+        }
+    },
+    mounted() {
+        this.items = this.createRandomData(1000);
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/filtering/basic/boolean/main.js b/vue-options-api-demos/grid/filtering/basic/boolean/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/basic/boolean/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/filtering/basic/boolean/main.vue b/vue-options-api-demos/grid/filtering/basic/boolean/main.vue
new file mode 100644
index 00000000..7a3d7194
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/basic/boolean/main.vue
@@ -0,0 +1,62 @@
+<template>
+  <Grid
+    :style="{ width: '370px' }"
+    :data-items="products"
+    :filterable="true"
+    :filter="filter"
+    @filterchange="filterChange"
+    :columns="columns"
+    :loader="loader"
+  >
+  </Grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import { filterBy } from '@progress/kendo-data-query';
+import { sampleProducts } from './products';
+
+export default {
+  components: {
+    Grid,
+  },
+  data: function () {
+    return {
+      loader: false,
+      filter: {
+        logic: 'and',
+        filters: [],
+      },
+    };
+  },
+  computed: {
+    products: function () {
+      return filterBy(sampleProducts, this.filter);
+    },
+    columns: function () {
+      return [
+        {
+          field: 'ProductID',
+          filterable: false,
+          title: 'ID',
+          width: '50px',
+        },
+        { field: 'Discontinued', title: 'Discontinued', filter: 'boolean' },
+      ];
+    },
+  },
+  methods: {
+    filterChange: function (ev) {
+      this.loader = true;
+      // The idea behind using the following setTimeout method is to
+      // demonstrate how we can show a loader while fetching data.
+      // In real-life scenarios with remote data binding, the 'loader'
+      // property should be updated before making a server request
+      // and after the request completes.
+      setTimeout(() => {
+        this.filter = ev.filter;
+        this.loader = false;
+      }, 300);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/filtering/basic/boolean/products.js b/vue-options-api-demos/grid/filtering/basic/boolean/products.js
new file mode 100644
index 00000000..ac539009
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/basic/boolean/products.js
@@ -0,0 +1,184 @@
+const sampleProducts = [
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 20)
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 12)
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 26)
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 9, 19)
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.35,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 17)
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 9, 19)
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 22)
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 11, 1)
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        },
+        "FirstOrderedOn": new Date(1997, 1, 21)
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 5)
+    }
+];
+
+export { sampleProducts };
diff --git a/vue-options-api-demos/grid/filtering/basic/date/main.js b/vue-options-api-demos/grid/filtering/basic/date/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/basic/date/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/filtering/basic/date/main.vue b/vue-options-api-demos/grid/filtering/basic/date/main.vue
new file mode 100644
index 00000000..766cc8a8
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/basic/date/main.vue
@@ -0,0 +1,67 @@
+<template>
+  <Grid
+    :style="{ width: '370px' }"
+    :data-items="products"
+    :filterable="true"
+    :filter="filter"
+    @filterchange="filterChange"
+    :columns="columns"
+    :loader="loader"
+  >
+  </Grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import { filterBy } from '@progress/kendo-data-query';
+import { sampleProducts } from './products';
+
+export default {
+  components: {
+    Grid,
+  },
+  data: function () {
+    return {
+      loader: false,
+      filter: {
+        logic: 'and',
+        filters: [],
+      },
+    };
+  },
+  computed: {
+    products: function () {
+      return filterBy(sampleProducts, this.filter);
+    },
+    columns: function () {
+      return [
+        {
+          field: 'ProductID',
+          filterable: false,
+          title: 'ID',
+          width: '50px',
+        },
+        {
+          field: 'FirstOrderedOn',
+          title: 'First Ordered On',
+          filter: 'date',
+          format: '{0:d}',
+        },
+      ];
+    },
+  },
+  methods: {
+    filterChange: function (ev) {
+      this.loader = true;
+      // The idea behind using the following setTimeout method is to
+      // demonstrate how we can show a loader while fetching data.
+      // In real-life scenarios with remote data binding, the 'loader'
+      // property should be updated before making a server request
+      // and after the request completes.
+      setTimeout(() => {
+        this.filter = ev.filter;
+        this.loader = false;
+      }, 300);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/filtering/basic/date/products.js b/vue-options-api-demos/grid/filtering/basic/date/products.js
new file mode 100644
index 00000000..ac539009
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/basic/date/products.js
@@ -0,0 +1,184 @@
+const sampleProducts = [
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 20)
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 12)
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 26)
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 9, 19)
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.35,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 17)
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 9, 19)
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 22)
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 11, 1)
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        },
+        "FirstOrderedOn": new Date(1997, 1, 21)
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 5)
+    }
+];
+
+export { sampleProducts };
diff --git a/vue-options-api-demos/grid/filtering/basic/main.js b/vue-options-api-demos/grid/filtering/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/filtering/basic/main.vue b/vue-options-api-demos/grid/filtering/basic/main.vue
new file mode 100644
index 00000000..bf448934
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/basic/main.vue
@@ -0,0 +1,71 @@
+<template>
+  <Grid
+    :data-items="products"
+    :filterable="true"
+    :filter="filter"
+    @filterchange="filterChange"
+    :columns="columns"
+    :loader="loader"
+  >
+  </Grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import { filterBy } from '@progress/kendo-data-query';
+import { sampleProducts } from './products';
+
+export default {
+  components: {
+    Grid: Grid,
+  },
+  data: function () {
+    return {
+      loader: false,
+      filter: {
+        logic: 'and',
+        filters: [
+          { field: 'UnitPrice', operator: 'neq', value: 18 },
+          {
+            field: 'FirstOrderedOn',
+            operator: 'gte',
+            value: new Date('1996-10-10'),
+          },
+        ],
+      },
+    };
+  },
+  computed: {
+    products: function () {
+      return filterBy(sampleProducts, this.filter);
+    },
+    columns: function () {
+      return [
+        {
+          field: 'ProductID',
+          filterable: false,
+          title: 'Product ID',
+          width: '50px',
+        },
+        { field: 'ProductName', title: 'Product Name' },
+        { field: 'FirstOrderedOn', filter: 'date', title: 'First Ordered On' },
+        { field: 'UnitPrice', filter: 'numeric', title: 'Unit Price' },
+        { field: 'Discontinued', filter: 'boolean', title: 'Discontinued' },
+      ];
+    },
+  },
+  methods: {
+    filterChange: function (ev) {
+      this.loader = true;
+      // The idea behind using the following setTimeout method is to
+      // demonstrate how we can show a loader while fetching data.
+      // In real-life scenarios with remote data binding, the 'loader' 
+      // property should be updated before making a server request
+      // and after the request completes.
+      setTimeout(() => {
+        this.filter = ev.filter;
+        this.loader = false;
+      }, 300);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/filtering/basic/number/main.js b/vue-options-api-demos/grid/filtering/basic/number/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/basic/number/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/filtering/basic/number/main.vue b/vue-options-api-demos/grid/filtering/basic/number/main.vue
new file mode 100644
index 00000000..ea6d94eb
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/basic/number/main.vue
@@ -0,0 +1,62 @@
+<template>
+  <Grid
+    :style="{ width: '370px' }"
+    :data-items="products"
+    :filterable="true"
+    :filter="filter"
+    @filterchange="filterChange"
+    :columns="columns"
+    :loader="loader"
+  >
+  </Grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import { filterBy } from '@progress/kendo-data-query';
+import { sampleProducts } from './products';
+
+export default {
+  components: {
+    Grid,
+  },
+  data: function () {
+    return {
+      loader: false,
+      filter: {
+        logic: 'and',
+        filters: [],
+      },
+    };
+  },
+  computed: {
+    products: function () {
+      return filterBy(sampleProducts, this.filter);
+    },
+    columns: function () {
+      return [
+        {
+          field: 'ProductID',
+          filterable: false,
+          title: 'ID',
+          width: '50px',
+        },
+        { field: 'UnitsInStock', title: 'Units In Stock', filter: 'numeric' },
+      ];
+    },
+  },
+  methods: {
+    filterChange: function (ev) {
+      this.loader = true;
+      // The idea behind using the following setTimeout method is to
+      // demonstrate how we can show a loader while fetching data.
+      // In real-life scenarios with remote data binding, the 'loader'
+      // property should be updated before making a server request
+      // and after the request completes.
+      setTimeout(() => {
+        this.filter = ev.filter;
+        this.loader = false;
+      }, 300);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/filtering/basic/number/products.js b/vue-options-api-demos/grid/filtering/basic/number/products.js
new file mode 100644
index 00000000..ac539009
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/basic/number/products.js
@@ -0,0 +1,184 @@
+const sampleProducts = [
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 20)
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 12)
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 26)
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 9, 19)
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.35,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 17)
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 9, 19)
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 22)
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 11, 1)
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        },
+        "FirstOrderedOn": new Date(1997, 1, 21)
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 5)
+    }
+];
+
+export { sampleProducts };
diff --git a/vue-options-api-demos/grid/filtering/basic/products.js b/vue-options-api-demos/grid/filtering/basic/products.js
new file mode 100644
index 00000000..ac539009
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/basic/products.js
@@ -0,0 +1,184 @@
+const sampleProducts = [
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 20)
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 12)
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 26)
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 9, 19)
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.35,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 17)
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 9, 19)
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 22)
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 11, 1)
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        },
+        "FirstOrderedOn": new Date(1997, 1, 21)
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 5)
+    }
+];
+
+export { sampleProducts };
diff --git a/vue-options-api-demos/grid/filtering/basic/string/main.js b/vue-options-api-demos/grid/filtering/basic/string/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/basic/string/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/filtering/basic/string/main.vue b/vue-options-api-demos/grid/filtering/basic/string/main.vue
new file mode 100644
index 00000000..b8960cc2
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/basic/string/main.vue
@@ -0,0 +1,62 @@
+<template>
+  <Grid
+    :style="{ width: '370px' }"
+    :data-items="products"
+    :filterable="true"
+    :filter="filter"
+    @filterchange="filterChange"
+    :columns="columns"
+    :loader="loader"
+  >
+  </Grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import { filterBy } from '@progress/kendo-data-query';
+import { sampleProducts } from './products';
+
+export default {
+  components: {
+    Grid,
+  },
+  data: function () {
+    return {
+      loader: false,
+      filter: {
+        logic: 'and',
+        filters: [],
+      },
+    };
+  },
+  computed: {
+    products: function () {
+      return filterBy(sampleProducts, this.filter);
+    },
+    columns: function () {
+      return [
+        {
+          field: 'ProductID',
+          filterable: false,
+          title: 'ID',
+          width: '50px',
+        },
+        { field: 'ProductName', title: 'Product Name' },
+      ];
+    },
+  },
+  methods: {
+    filterChange: function (ev) {
+      this.loader = true;
+      // The idea behind using the following setTimeout method is to
+      // demonstrate how we can show a loader while fetching data.
+      // In real-life scenarios with remote data binding, the 'loader'
+      // property should be updated before making a server request
+      // and after the request completes.
+      setTimeout(() => {
+        this.filter = ev.filter;
+        this.loader = false;
+      }, 300);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/filtering/basic/string/products.js b/vue-options-api-demos/grid/filtering/basic/string/products.js
new file mode 100644
index 00000000..ac539009
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/basic/string/products.js
@@ -0,0 +1,184 @@
+const sampleProducts = [
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 20)
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 12)
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 26)
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 9, 19)
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.35,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 17)
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 9, 19)
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 22)
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 11, 1)
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        },
+        "FirstOrderedOn": new Date(1997, 1, 21)
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 5)
+    }
+];
+
+export { sampleProducts };
diff --git a/vue-options-api-demos/grid/filtering/custom/main.js b/vue-options-api-demos/grid/filtering/custom/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/custom/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/filtering/custom/main.vue b/vue-options-api-demos/grid/filtering/custom/main.vue
new file mode 100644
index 00000000..333eff22
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/custom/main.vue
@@ -0,0 +1,87 @@
+<template>
+  <Grid
+    :data-items="products"
+    :filterable="true"
+    :filter="filter"
+    @filterchange="filterChange"
+    :columns="columns"
+    :filter-cell-render="filterRender"
+  >
+    <template v-slot:filterSlotTemplate="{ props, methods }">
+      <div>
+        Filter Slot:
+        <KInput
+          :style="{ width: '180px' }"
+          :value="props.value"
+          @input="
+            (ev) => {
+              props.onChange({
+                operator: 'contains',
+                field: props.field,
+                value: ev.target.value,
+                syntheticEvent: ev,
+              });
+            }
+          "
+        />
+        <KButton
+          :style="{ 'margin-left': '15px' }"
+          @click="
+            (ev) => {
+              props.onChange({ operator: '', field: '', value: '', event: ev });
+            }
+          "
+          >Clear</KButton
+        >
+      </div>
+    </template>
+  </Grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import { Input } from '@progress/kendo-vue-inputs';
+import { Button } from '@progress/kendo-vue-buttons';
+import { filterBy } from '@progress/kendo-data-query';
+import { sampleProducts } from './products';
+
+export default {
+  components: {
+    Grid,
+    KInput: Input,
+    KButton: Button,
+  },
+  data: function () {
+    return {
+      filter: {
+        logic: 'and',
+        filters: [{ field: 'UnitPrice', operator: 'neq', value: 2 }],
+      },
+      columns: [
+        { field: 'ProductID', filterable: false, title: 'ID', width: '50px' },
+        {
+          field: 'ProductName',
+          title: 'Product Name',
+          filterCell: 'filterSlotTemplate',
+          width: '350px',
+        },
+        { field: 'FirstOrderedOn', filter: 'date', title: 'FirstOrderedOn' },
+        { field: 'UnitPrice', filter: 'numeric', title: 'UnitPrice' },
+        { field: 'Discontinued', filter: 'boolean', title: 'Discontinued' },
+      ],
+    };
+  },
+  computed: {
+    products: function () {
+      return filterBy(sampleProducts, this.filter);
+    },
+  },
+  methods: {
+    filterChange: function (ev) {
+      this.filter = ev.filter;
+    },
+    filterRender: function (h, defaultRendering, props, change) {
+      return defaultRendering;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/filtering/custom/products.js b/vue-options-api-demos/grid/filtering/custom/products.js
new file mode 100644
index 00000000..ed1076e6
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/custom/products.js
@@ -0,0 +1,185 @@
+const sampleProducts = [
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 20)
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 12)
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 26)
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 9, 19)
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.35,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 17)
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 9, 19)
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 22)
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 11, 1)
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        },
+        "FirstOrderedOn": new Date(1997, 1, 21)
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 5)
+    }
+];
+
+export { sampleProducts }
+;
diff --git a/vue-options-api-demos/grid/filtering/external/main.js b/vue-options-api-demos/grid/filtering/external/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/external/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/filtering/external/main.vue b/vue-options-api-demos/grid/filtering/external/main.vue
new file mode 100644
index 00000000..f4870737
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/external/main.vue
@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <kFilter
+      :fields="fields"
+      :value="filter"
+      @change="onFilterChange"
+      :default-group-filter="defaultGroupFilter"
+    >
+    </kFilter>
+    <Grid
+      :data-items="products"
+      :filterable="true"
+      :filter="filter"
+      @filterchange="onFilterChange"
+      :columns="columns"
+    >
+    </Grid>
+  </div>
+</template>
+
+<script>
+import { Filter, Operators } from "@progress/kendo-vue-data-tools";
+import { filterBy } from "@progress/kendo-data-query";
+import { Grid } from "@progress/kendo-vue-grid";
+import { sampleProducts } from "./products";
+
+const currentDate = new Date();
+
+export default {
+  components: {
+    kFilter: Filter,
+    Grid,
+  },
+  data: function () {
+    return {
+      defaultGroupFilter: {
+        logic: "and",
+        filters: [],
+      },
+      filter: {
+        logic: "and",
+        filters: [
+          { field: "ProductName", operator: "contains", value: "an" },
+          { field: "UnitPrice", operator: "neq", value: 22 },
+          {
+            logic: "or",
+            filters: [
+              { field: "ProductName", operator: "startswith", value: "c" },
+              { field: "UnitPrice", operator: "eq", value: 19 },
+            ],
+          },
+          { field: "FirstOrderedOn", operator: "lte", value: currentDate },
+          { field: "Discontinued", operator: "eq", value: true },
+        ],
+      },
+      fields: [
+        {
+          name: "ProductName",
+          label: "Product Name",
+          filter: "text",
+          operators: Operators.text,
+        },
+        {
+          name: "UnitPrice",
+          label: "Unit Price",
+          filter: "numeric",
+          operators: Operators.numeric,
+        },
+        {
+          name: "FirstOrderedOn",
+          label: "First Ordered On",
+          filter: "date",
+          operators: Operators.date,
+        },
+        {
+          name: "Discontinued",
+          label: "Discontinued",
+          filter: "boolean",
+          operators: Operators.boolean,
+        },
+      ],
+      columns: [
+        {
+          field: "ProductID",
+          filterable: false,
+          title: "Product ID",
+          width: "50px",
+        },
+        { field: "ProductName", title: "Product Name" },
+        { field: "FirstOrderedOn", filter: "date", title: "First Ordered On" },
+        { field: "UnitPrice", filter: "numeric", title: "Unit Price" },
+        { field: "Discontinued", filter: "boolean", title: "Discontinued" },
+      ],
+    };
+  },
+  computed: {
+    currentFilter() {
+      return filterBy([], this.filter);
+    },
+    products: function () {
+      return filterBy(sampleProducts, this.filter);
+    },
+  },
+  methods: {
+    onFilterChange(event) {
+      if (event.filter !== null) {
+        this.filter = event.filter;
+      } else {
+        this.filter = this.defaultGroupFilter;
+      }
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/filtering/external/products.js b/vue-options-api-demos/grid/filtering/external/products.js
new file mode 100644
index 00000000..d9bc9855
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/external/products.js
@@ -0,0 +1,184 @@
+const sampleProducts = [
+    {
+        ProductID: 1,
+        ProductName: "Chai",
+        SupplierID: 1,
+        CategoryID: 1,
+        QuantityPerUnit: "10 boxes x 20 bags",
+        UnitPrice: 18,
+        UnitsInStock: 39,
+        UnitsOnOrder: 0,
+        ReorderLevel: 10,
+        Discontinued: false,
+        Category: {
+            CategoryID: 1,
+            CategoryName: "Beverages",
+            Description: "Soft drinks, coffees, teas, beers, and ales"
+        },
+        FirstOrderedOn: new Date(1996, 8, 20)
+    },
+    {
+        ProductID: 2,
+        ProductName: "Chang",
+        SupplierID: 1,
+        CategoryID: 1,
+        QuantityPerUnit: "24 - 12 oz bottles",
+        UnitPrice: 19,
+        UnitsInStock: 17,
+        UnitsOnOrder: 40,
+        ReorderLevel: 25,
+        Discontinued: false,
+        Category: {
+            CategoryID: 1,
+            CategoryName: "Beverages",
+            Description: "Soft drinks, coffees, teas, beers, and ales"
+        },
+        FirstOrderedOn: new Date(1996, 7, 12)
+    },
+    {
+        ProductID: 3,
+        ProductName: "Aniseed Syrup",
+        SupplierID: 1,
+        CategoryID: 2,
+        QuantityPerUnit: "12 - 550 ml bottles",
+        UnitPrice: 10,
+        UnitsInStock: 13,
+        UnitsOnOrder: 70,
+        ReorderLevel: 25,
+        Discontinued: false,
+        Category: {
+            CategoryID: 2,
+            CategoryName: "Condiments",
+            Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        FirstOrderedOn: new Date(1996, 8, 26)
+    },
+    {
+        ProductID: 4,
+        ProductName: "Chef Anton's Cajun Seasoning",
+        SupplierID: 2,
+        CategoryID: 2,
+        QuantityPerUnit: "48 - 6 oz jars",
+        UnitPrice: 22,
+        UnitsInStock: 53,
+        UnitsOnOrder: 0,
+        ReorderLevel: 0,
+        Discontinued: false,
+        Category: {
+            CategoryID: 2,
+            CategoryName: "Condiments",
+            Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        FirstOrderedOn: new Date(1996, 9, 19)
+    },
+    {
+        ProductID: 5,
+        ProductName: "Chef Anton's Gumbo Mix",
+        SupplierID: 2,
+        CategoryID: 2,
+        QuantityPerUnit: "36 boxes",
+        UnitPrice: 21.35,
+        UnitsInStock: 0,
+        UnitsOnOrder: 0,
+        ReorderLevel: 0,
+        Discontinued: true,
+        Category: {
+            CategoryID: 2,
+            CategoryName: "Condiments",
+            Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        FirstOrderedOn: new Date(1996, 7, 17)
+    },
+    {
+        ProductID: 6,
+        ProductName: "Grandma's Boysenberry Spread",
+        SupplierID: 3,
+        CategoryID: 2,
+        QuantityPerUnit: "12 - 8 oz jars",
+        UnitPrice: 25,
+        UnitsInStock: 120,
+        UnitsOnOrder: 0,
+        ReorderLevel: 25,
+        Discontinued: false,
+        Category: {
+            CategoryID: 2,
+            CategoryName: "Condiments",
+            Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        FirstOrderedOn: new Date(1996, 9, 19)
+    },
+    {
+        ProductID: 7,
+        ProductName: "Uncle Bob's Organic Dried Pears",
+        SupplierID: 3,
+        CategoryID: 7,
+        QuantityPerUnit: "12 - 1 lb pkgs.",
+        UnitPrice: 30,
+        UnitsInStock: 15,
+        UnitsOnOrder: 0,
+        ReorderLevel: 10,
+        Discontinued: false,
+        Category: {
+            CategoryID: 7,
+            CategoryName: "Produce",
+            Description: "Dried fruit and bean curd"
+        },
+        FirstOrderedOn: new Date(1996, 7, 22)
+    },
+    {
+        ProductID: 8,
+        ProductName: "Northwoods Cranberry Sauce",
+        SupplierID: 3,
+        CategoryID: 2,
+        QuantityPerUnit: "12 - 12 oz jars",
+        UnitPrice: 40,
+        UnitsInStock: 6,
+        UnitsOnOrder: 0,
+        ReorderLevel: 0,
+        Discontinued: false,
+        Category: {
+            CategoryID: 2,
+            CategoryName: "Condiments",
+            Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        FirstOrderedOn: new Date(1996, 11, 1)
+    },
+    {
+        ProductID: 9,
+        ProductName: "Mishi Kobe Niku",
+        SupplierID: 4,
+        CategoryID: 6,
+        QuantityPerUnit: "18 - 500 g pkgs.",
+        UnitPrice: 97,
+        UnitsInStock: 29,
+        UnitsOnOrder: 0,
+        ReorderLevel: 0,
+        Discontinued: true,
+        Category: {
+            CategoryID: 6,
+            CategoryName: "Meat/Poultry",
+            Description: "Prepared meats"
+        },
+        FirstOrderedOn: new Date(1997, 1, 21)
+    },
+    {
+        ProductID: 10,
+        ProductName: "Ikura",
+        SupplierID: 4,
+        CategoryID: 8,
+        QuantityPerUnit: "12 - 200 ml jars",
+        UnitPrice: 31,
+        UnitsInStock: 31,
+        UnitsOnOrder: 0,
+        ReorderLevel: 0,
+        Discontinued: false,
+        Category: {
+            CategoryID: 8,
+            CategoryName: "Seafood",
+            Description: "Seaweed and fish"
+        },
+        FirstOrderedOn: new Date(1996, 8, 5)
+    }
+];
+
+export { sampleProducts };
diff --git a/vue-options-api-demos/grid/filtering/row/custom-daterangepicker/main.js b/vue-options-api-demos/grid/filtering/row/custom-daterangepicker/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/row/custom-daterangepicker/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/filtering/row/custom-daterangepicker/main.vue b/vue-options-api-demos/grid/filtering/row/custom-daterangepicker/main.vue
new file mode 100644
index 00000000..e4dae78b
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/row/custom-daterangepicker/main.vue
@@ -0,0 +1,104 @@
+<template>
+  <Grid
+    :data-items="products"
+    :filterable="true"
+    :filter="filter"
+    @filterchange="filterChange"
+    :columns="columns"
+    :loader="loader"
+  >
+    <template v-slot:filterSlotTemplate="{ props, methods }">
+      <div>
+        <DateRangePicker @change="onDateRangePickerChange" />
+      </div>
+    </template>
+  </Grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import { DateRangePicker } from '@progress/kendo-vue-dateinputs';
+import { filterBy } from '@progress/kendo-data-query';
+import { sampleProducts } from './products';
+
+export default {
+  components: {
+    Grid,
+    DateRangePicker,
+  },
+  data: function () {
+    return {
+      loader: false,
+      uniqueData: null,
+      filter: {
+        logic: 'and',
+        filters: [],
+      },
+    };
+  },
+  computed: {
+    products: function () {
+      return filterBy(sampleProducts, this.filter);
+    },
+    columns: function () {
+      return [
+        {
+          field: 'ProductID',
+          filterable: false,
+          title: 'ID',
+          width: '50px',
+        },
+        { field: 'ProductName', title: 'Product Name' },
+        {
+          field: 'FirstOrderedOn',
+          title: 'First Ordered On',
+          format: '{0:d}',
+          filterCell: 'filterSlotTemplate',
+        },
+      ];
+    },
+  },
+  methods: {
+    filterChange: function (ev) {
+      this.loader = true;
+      // The idea behind using the following setTimeout method is to
+      // demonstrate how we can show a loader while fetching data.
+      // In real-life scenarios with remote data binding, the 'loader'
+      // property should be updated before making a server request
+      // and after the request completes.
+      setTimeout(() => {
+        this.filter = ev.filter;
+        this.loader = false;
+      }, 300);
+    },
+    onDateRangePickerChange(e) {
+      const currentFilters = this.filter.filters;
+
+      const isDateRangeFilterApplied =
+        currentFilters.filter((el) => el.customOperator).length !== 0;
+
+      if (isDateRangeFilterApplied) {
+        const index = currentFilters.map((e) => e.customOperator).indexOf(true);
+        currentFilters.splice(index, 1);
+      }
+      if (e.value.start && e.value.end) {
+        this.filter.filters.push({
+          customOperator: true,
+          logic: 'and',
+          filters: [
+            {
+              field: 'FirstOrderedOn',
+              operator: 'gte',
+              value: e.value.start,
+            },
+            {
+              field: 'FirstOrderedOn',
+              operator: 'lte',
+              value: e.value.end,
+            },
+          ],
+        });
+      }
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/filtering/row/custom-daterangepicker/products.js b/vue-options-api-demos/grid/filtering/row/custom-daterangepicker/products.js
new file mode 100644
index 00000000..2055df16
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/row/custom-daterangepicker/products.js
@@ -0,0 +1,185 @@
+const sampleProducts = [
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 20)
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 12)
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 26)
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 9, 19)
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.35,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 17)
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 9, 19)
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 22)
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 11, 1)
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        },
+        "FirstOrderedOn": new Date(1997, 1, 21)
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 5)
+    }
+];
+
+export { sampleProducts }
+    ;
diff --git a/vue-options-api-demos/grid/filtering/row/custom-dropdownlist/main.js b/vue-options-api-demos/grid/filtering/row/custom-dropdownlist/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/row/custom-dropdownlist/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/filtering/row/custom-dropdownlist/main.vue b/vue-options-api-demos/grid/filtering/row/custom-dropdownlist/main.vue
new file mode 100644
index 00000000..8901d3a4
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/row/custom-dropdownlist/main.vue
@@ -0,0 +1,96 @@
+<template>
+  <Grid
+    :data-items="products"
+    :filterable="true"
+    :filter="filter"
+    @filterchange="filterChange"
+    :columns="columns"
+    :loader="loader"
+  >
+    <template v-slot:filterSlotTemplate="{ props, methods }">
+      <div>
+        <DropDownList
+          :data-items="uniqueData"
+          :text-field="'CategoryName'"
+          :value-field="'CategoryID'"
+          @change="
+            (ev) => {
+              props.onChange({
+                operator: 'contains',
+                field: props.field,
+                value: ev.value.CategoryName,
+                syntheticEvent: ev,
+              });
+            }
+          "
+        />
+      </div>
+    </template>
+  </Grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import { filterBy } from '@progress/kendo-data-query';
+import { sampleProducts } from './products';
+
+export default {
+  components: {
+    Grid,
+    DropDownList,
+  },
+  data: function () {
+    return {
+      loader: false,
+      uniqueData: null,
+      filter: {
+        logic: 'and',
+        filters: [],
+      },
+    };
+  },
+  created() {
+    this.uniqueData = sampleProducts
+      .map((x) => x.Category)
+      .filter(
+        (x, idx, xs) =>
+          xs.findIndex((y) => y.CategoryName === x.CategoryName) === idx
+      );
+  },
+  computed: {
+    products: function () {
+      return filterBy(sampleProducts, this.filter);
+    },
+    columns: function () {
+      return [
+        {
+          field: 'ProductID',
+          filterable: false,
+          title: 'ID',
+          width: '50px',
+        },
+        { field: 'ProductName', title: 'Product Name' },
+        {
+          field: 'Category.CategoryName',
+          title: 'Category',
+          filterCell: 'filterSlotTemplate',
+        },
+      ];
+    },
+  },
+  methods: {
+    filterChange: function (ev) {
+      this.loader = true;
+      // The idea behind using the following setTimeout method is to
+      // demonstrate how we can show a loader while fetching data.
+      // In real-life scenarios with remote data binding, the 'loader'
+      // property should be updated before making a server request
+      // and after the request completes.
+      setTimeout(() => {
+        this.filter = ev.filter;
+        this.loader = false;
+      }, 300);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/filtering/row/custom-dropdownlist/products.js b/vue-options-api-demos/grid/filtering/row/custom-dropdownlist/products.js
new file mode 100644
index 00000000..2055df16
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/row/custom-dropdownlist/products.js
@@ -0,0 +1,185 @@
+const sampleProducts = [
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 20)
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 12)
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 26)
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 9, 19)
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.35,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 17)
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 9, 19)
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 22)
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 11, 1)
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        },
+        "FirstOrderedOn": new Date(1997, 1, 21)
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 5)
+    }
+];
+
+export { sampleProducts }
+    ;
diff --git a/vue-options-api-demos/grid/filtering/row/custom-switch/main.js b/vue-options-api-demos/grid/filtering/row/custom-switch/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/row/custom-switch/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/filtering/row/custom-switch/main.vue b/vue-options-api-demos/grid/filtering/row/custom-switch/main.vue
new file mode 100644
index 00000000..289d82e6
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/row/custom-switch/main.vue
@@ -0,0 +1,86 @@
+<template>
+  <Grid
+    :data-items="products"
+    :filterable="true"
+    :filter="filter"
+    @filterchange="filterChange"
+    :columns="columns"
+    :loader="loader"
+  >
+    <template v-slot:filterSlotTemplate="{ props, methods }">
+      <div>
+        <Switch
+          :on-label="'Yes'"
+          :off-label="'No'"
+          :checked="isChecked"
+          @change="onDiscontinuedFilterChange"
+        />
+      </div>
+    </template>
+  </Grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import { Switch } from '@progress/kendo-vue-inputs';
+import { filterBy } from '@progress/kendo-data-query';
+import { sampleProducts } from './products';
+
+export default {
+  components: {
+    Grid,
+    Switch,
+  },
+  data: function () {
+    return {
+      loader: false,
+      isChecked: false,
+    };
+  },
+  computed: {
+    filter() {
+      return {
+        logic: 'and',
+        filters: [
+          { field: 'Discontinued', operator: 'eq', value: this.isChecked },
+        ],
+      };
+    },
+    products: function () {
+      return filterBy(sampleProducts, this.filter);
+    },
+    columns: function () {
+      return [
+        {
+          field: 'ProductID',
+          filterable: false,
+          title: 'Product ID',
+          width: '50px',
+        },
+        { field: 'ProductName', title: 'Product Name' },
+        {
+          field: 'Discontinued',
+          filterCell: 'filterSlotTemplate',
+          title: 'Discontinued',
+        },
+      ];
+    },
+  },
+  methods: {
+    filterChange: function (ev) {
+      this.loader = true;
+      // The idea behind using the following setTimeout method is to
+      // demonstrate how we can show a loader while fetching data.
+      // In real-life scenarios with remote data binding, the 'loader'
+      // property should be updated before making a server request
+      // and after the request completes.
+      setTimeout(() => {
+        this.filter = ev.filter;
+        this.loader = false;
+      }, 300);
+    },
+    onDiscontinuedFilterChange() {
+      this.isChecked = !this.isChecked;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/filtering/row/custom-switch/products.js b/vue-options-api-demos/grid/filtering/row/custom-switch/products.js
new file mode 100644
index 00000000..2055df16
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/row/custom-switch/products.js
@@ -0,0 +1,185 @@
+const sampleProducts = [
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 20)
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 12)
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 26)
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 9, 19)
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.35,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 17)
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 9, 19)
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 22)
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 11, 1)
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        },
+        "FirstOrderedOn": new Date(1997, 1, 21)
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 5)
+    }
+];
+
+export { sampleProducts }
+    ;
diff --git a/vue-options-api-demos/grid/filtering/select-filter-type/main.js b/vue-options-api-demos/grid/filtering/select-filter-type/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/select-filter-type/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/filtering/select-filter-type/main.vue b/vue-options-api-demos/grid/filtering/select-filter-type/main.vue
new file mode 100644
index 00000000..92e0131c
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/select-filter-type/main.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="example-config">
+    <b>Select Filter Type:</b>
+    <RadioGroup
+      :data-items="dataItems"
+      v-model="radioGroupValue"
+      :layout="'horizontal'"
+      @change="onFilterTypeChange"
+    />
+  </div>
+  <Grid
+    :style="{ height: '450px' }"
+    :data-items="products"
+    :column-menu="radioGroupValue === 'menu'"
+    :filterable="radioGroupValue === 'row'"
+    :filter="filter"
+    @filterchange="filterChange"
+    :columns="columns"
+    :loader="loader"
+  >
+  </Grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import { RadioGroup } from '@progress/kendo-vue-inputs';
+import { filterBy } from '@progress/kendo-data-query';
+import { sampleProducts } from './products';
+
+export default {
+  components: {
+    Grid,
+    RadioGroup,
+  },
+  data: function () {
+    return {
+      radioGroupValue: 'row',
+      loader: false,
+      isChecked: false,
+      filter: null,
+      dataItems: [
+        {
+          label: 'Filter row',
+          value: 'row',
+        },
+        {
+          label: 'ColumnMenu Filtering',
+          value: 'menu',
+        },
+      ],
+    };
+  },
+  computed: {
+    products: function () {
+      return filterBy(sampleProducts, this.filter);
+    },
+    columns: function () {
+      return [
+        {
+          field: 'ProductID',
+          filterable: false,
+          title: 'ID',
+          width: '50px',
+          columnMenu: false,
+        },
+        { field: 'ProductName', title: 'Product Name' },
+        { field: 'FirstOrderedOn', filter: 'date', title: 'First Ordered On' },
+        {
+          field: 'Discontinued',
+          title: 'Discontinued',
+        },
+      ];
+    },
+  },
+  methods: {
+    filterChange: function (ev) {
+      this.loader = true;
+      // The idea behind using the following setTimeout method is to
+      // demonstrate how we can show a loader while fetching data.
+      // In real-life scenarios with remote data binding, the 'loader'
+      // property should be updated before making a server request
+      // and after the request completes.
+      setTimeout(() => {
+        this.filter = ev.filter;
+        this.loader = false;
+      }, 300);
+    },
+    onFilterTypeChange() {
+      this.filter = null;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/filtering/select-filter-type/products.js b/vue-options-api-demos/grid/filtering/select-filter-type/products.js
new file mode 100644
index 00000000..ac539009
--- /dev/null
+++ b/vue-options-api-demos/grid/filtering/select-filter-type/products.js
@@ -0,0 +1,184 @@
+const sampleProducts = [
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 20)
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 12)
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 26)
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 9, 19)
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.35,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 17)
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 9, 19)
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 22)
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 11, 1)
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        },
+        "FirstOrderedOn": new Date(1997, 1, 21)
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 5)
+    }
+];
+
+export { sampleProducts };
diff --git a/vue-options-api-demos/grid/globalization/main.js b/vue-options-api-demos/grid/globalization/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/globalization/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/globalization/main.vue b/vue-options-api-demos/grid/globalization/main.vue
new file mode 100644
index 00000000..37ab4830
--- /dev/null
+++ b/vue-options-api-demos/grid/globalization/main.vue
@@ -0,0 +1,167 @@
+<template>
+    <localization :language="spanish ? 'es-ES' : 'en-EN'">
+      <intl :locale="spanish ? 'es' : 'en'">
+        <div class="col-xs-12 col-md-12 example-config">
+          <kbutton @click="buttonClick">
+            Change to {{ spanish ? 'English' : 'Spanish' }}
+          </kbutton>
+        </div>
+        <grid
+          :style="{ height: '420px' }"
+          :data-items="dataResult"
+          :sortable="true"
+          :groupable="true"
+          :filterable="true"
+          :pageable="{ pageSizes: [5, 7, 10] }"
+          :skip="skip"
+          :take="take"
+          :columns="columns"
+          @datastatechange="dataStateChange"
+        >
+        </grid>
+      </intl>
+    </localization>
+  </template>
+  <script>
+  import { Grid } from '@progress/kendo-vue-grid';
+  import { Button } from '@progress/kendo-vue-buttons';
+  import {
+    IntlProvider,
+    load,
+    LocalizationProvider,
+    loadMessages,
+  } from '@progress/kendo-vue-intl';
+  
+  import likelySubtags from 'cldr-core/supplemental/likelySubtags.json';
+  import currencyData from 'cldr-core/supplemental/currencyData.json';
+  import weekData from 'cldr-core/supplemental/weekData.json';
+  
+  import numbers from 'cldr-numbers-full/main/es/numbers.json';
+  import currencies from 'cldr-numbers-full/main/es/currencies.json';
+  import caGregorian from 'cldr-dates-full/main/es/ca-gregorian.json';
+  import dateFields from 'cldr-dates-full/main/es/dateFields.json';
+  import timeZoneNames from 'cldr-dates-full/main/es/timeZoneNames.json';
+  
+  load(
+    likelySubtags,
+    currencyData,
+    weekData,
+    numbers,
+    currencies,
+    caGregorian,
+    dateFields,
+    timeZoneNames
+  );
+  
+  const esMessages = {
+    datepicker: {
+      toggleCalendar: 'Alternar calendario',
+    },
+    calendar: {
+      today: 'Hoy',
+    },
+    dateinput: {
+      increment: 'Incrementar valor',
+      decrement: 'Disminuir valor',
+    },
+    numerictextbox: {
+      increment: 'Incrementar valor',
+      decrement: 'Disminuir valor',
+    },
+    grid: {
+      groupPanelEmpty:
+        'Arrastre el título de una columna y suéltelo aquí para agrupar por ese criterio',
+      noRecords: 'No hay datos disponibles.',
+      pagerFirstPage: 'Ir a la primera página',
+      pagerPreviousPage: 'Ir a la página anterior',
+      pagerNextPage: 'Ir a la página siguiente',
+      pagerLastPage: 'Ir a la última página',
+      pagerPage: 'Página',
+      pagerOf: 'de',
+      pagerItems: 'ítems',
+      pagerInfo: '{0} - {1} de {2} ítems',
+      pagerItemsPerPage: 'ítems por página',
+      filterEqOperator: 'Es igual a',
+      filterNotEqOperator: 'No es igual a',
+      filterIsNullOperator: 'Es nulo',
+      filterIsNotNullOperator: 'No es nulo',
+      filterIsEmptyOperator: 'Está vacío',
+      filterIsNotEmptyOperator: 'No está vacío',
+      filterStartsWithOperator: 'Comienza con',
+      filterContainsOperator: 'Contiene',
+      filterNotContainsOperator: 'No contiene',
+      filterEndsWithOperator: 'Termina en',
+      filterGteOperator: 'Es mayor o igual que',
+      filterGtOperator: 'Es mayor que',
+      filterLteOperator: 'Es menor o igual que',
+      filterLtOperator: 'Es menor o igual que',
+      filterIsTrue: 'Sí',
+      filterIsFalse: 'No',
+      filterBooleanAll: '(Todas)',
+      filterAfterOrEqualOperator: 'Es posterior o igual a',
+      filterAfterOperator: 'Es posterior',
+      filterBeforeOperator: 'Es anterior',
+      filterBeforeOrEqualOperator: 'Es anterior o igual a',
+      filterFilterButton: 'Filtrar',
+      filterClearButton: 'Limpiar filtros',
+      filterAndLogic: 'Y',
+      filterOrLogic: 'O',
+    },
+  };
+  loadMessages(esMessages, 'es-ES');
+  export default {
+    components: {
+      Grid: Grid,
+      localization: LocalizationProvider,
+      intl: IntlProvider,
+      kbutton: Button,
+    },
+    data: function () {
+      return {
+        spanish: true,
+        skip: 0,
+        take: 7,
+        dataResult: [],
+      };
+    },
+    computed: {
+      columns() {
+        return [
+          { field: 'ProductID', title: 'ID', width: '70px', filterable: false },
+          { field: 'ProductName', title: this.productNameHeader },
+          {
+            field: 'FirstOrderedOn',
+            title: this.orderDateHeader,
+            filter: 'date',
+            format: '{0:D}',
+          },
+          {
+            field: 'UnitPrice',
+            title: this.unitPriceHeader,
+            filter: 'numeric',
+            format: '{0:c}',
+          },
+        ];
+      },
+      productNameHeader() {
+        return this.spanish ? 'Nombre del producto' : 'Product Name';
+      },
+      orderDateHeader() {
+        return this.spanish ? 'Primero ordenado en' : 'First Ordered On';
+      },
+      unitPriceHeader() {
+        return this.spanish ? 'Precio unitario' : 'Unit Price';
+      },
+    },
+    methods: {
+      buttonClick: function () {
+        this.spanish = !this.spanish;
+      },
+      dataStateChange: function (event) {
+        this.take = event.data.take;
+        this.skip = event.data.skip;
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/grid/grouping/aggregates/CellComponent.vue b/vue-options-api-demos/grid/grouping/aggregates/CellComponent.vue
new file mode 100644
index 00000000..ac300691
--- /dev/null
+++ b/vue-options-api-demos/grid/grouping/aggregates/CellComponent.vue
@@ -0,0 +1,96 @@
+<template>
+  <td v-if="rowType === 'groupFooter'">
+    {{ computedAggregates }}
+  </td>
+  <td v-else-if="renderCell" :class="className">
+    {{ getNestedValue(field, dataItem) }}
+  </td>
+  <td
+    v-else-if="renderArrow"
+    key="'g' + columnIndex"
+    :class="'k-group-cell'"
+  ></td>
+  <td
+    v-else-if="columnIndex <= level"
+    key="g-colspan"
+    :colSpan="columnsCount - columnIndex"
+  >
+    <p class="k-reset">
+      <a @click="onClick" tabIndex="-1" href="#">
+        <SvgIcon
+          :icon="expanded ? caretAltDownIcon : caretAltRightIcon"
+        ></SvgIcon>
+      </a>
+      {{ dataItem[field] }}
+    </p>
+  </td>
+</template>
+<script>
+import { SvgIcon } from '@progress/kendo-vue-common';
+import { caretAltDownIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
+
+export default {
+  components: {
+    SvgIcon,
+  },
+  emits: {
+    click: null,
+  },
+  props: {
+    field: String,
+    dataItem: Object,
+    format: String,
+    className: String,
+    columnIndex: Number,
+    columnsCount: Number,
+    rowType: String,
+    level: Number,
+    expanded: Boolean,
+    editor: String,
+  },
+  computed: {
+    renderArrow() {
+      var returnValue =
+        this.columnIndex === undefined ||
+        this.level === undefined ||
+        this.columnIndex < this.level ||
+        this.columnsCount === undefined ||
+        this.rowType !== 'groupHeader' ||
+        this.dataItem[this.field] === undefined;
+      return returnValue && this.dataItem[this.field];
+    },
+    renderCell() {
+      return this.field !== undefined && this.rowType !== 'groupHeader';
+    },
+    computedAggregates() {
+      let renderedString;
+      if (this.field === 'UnitPrice') {
+        renderedString =
+          ' Average: ' + this.dataItem.aggregates.UnitPrice.average.toFixed(2);
+      } else if (this.field === 'UnitsInStock') {
+        renderedString = ' Sum: ' + this.dataItem.aggregates.UnitsInStock.sum;
+      }
+
+      return renderedString;
+    },
+  },
+  data() {
+    return { caretAltDownIcon, caretAltRightIcon };
+  },
+  methods: {
+    onClick(e) {
+      // @ts-ignore
+      this.$emit('click', e, this.dataItem, this.expanded);
+    },
+    getNestedValue(fieldName, dataItem) {
+      const path = fieldName.split('.');
+      let data = dataItem;
+      path.forEach((p) => {
+        data = data ? data[p] : undefined;
+      });
+
+      return data;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/grouping/aggregates/main.js b/vue-options-api-demos/grid/grouping/aggregates/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/grouping/aggregates/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/grouping/aggregates/main.vue b/vue-options-api-demos/grid/grouping/aggregates/main.vue
new file mode 100644
index 00000000..e895f15d
--- /dev/null
+++ b/vue-options-api-demos/grid/grouping/aggregates/main.vue
@@ -0,0 +1,138 @@
+<template>
+    <Grid
+      ref="grid"
+      :cell-render="cellTemplate"
+      :style="{ height: '580px' }"
+      :data-items="gridData"
+      :resizable="true"
+      :reorderable="true"
+      :sortable="true"
+      :pageable="gridPageable"
+      :groupable="{ footer: 'visible' }"
+      :group="group"
+      :take="take"
+      :skip="skip"
+      :expand-field="'expanded'"
+      :columns="columns"
+      @datastatechange="dataStateChange"
+      @expandchange="expandChange"
+    >
+      <template v-slot:myTemplate="{ props }">
+        <custom
+          :field="props.field"
+          :expanded="props.expanded"
+          :row-type="props.rowType"
+          :level="props.level"
+          :column-index="props.columnIndex"
+          :columns-count="props.columnsCount"
+          :data-item="props.dataItem"
+          :class-name="props.className"
+          @click="clickHandler(props.dataItem)"
+        />
+      </template>
+    </Grid>
+  </template>
+  <script>
+  import { Grid } from '@progress/kendo-vue-grid';
+  import { process } from '@progress/kendo-data-query';
+  import CustomCell from './CellComponent.vue';
+
+  export default {
+    components: {
+      Grid: Grid,
+      custom: CustomCell,
+    },
+    data: function () {
+      return {
+        aggregates: [
+          { field: 'UnitsInStock', aggregate: 'sum' },
+          { field: 'UnitPrice', aggregate: 'average' },
+        ],
+        cellTemplate: 'myTemplate',
+        gridPageable: { pageSizes: true },
+        products: this.createRandomData(1000),
+        gridData: [],
+        skip: 0,
+        take: 10,
+        group: [{ field: 'UnitsInStock' }],
+        expandedItems: [],
+        columns: [
+          { field: 'ProductID', filterable: false, title: 'ID', width: '50px' },
+          { field: 'ProductName', title: 'Product Name' },
+          { field: 'UnitPrice', filter: 'numeric', title: 'Unit Price' },
+          { field: 'UnitsInStock', title: 'Units In Stock' },
+        ],
+      };
+    },
+    created: function () {
+      if (this.group) {
+        this.group.map((group) => (group.aggregates = this.aggregates));
+      }
+      this.group = this.group;
+      this.getData();
+    },
+    methods: {
+      clickHandler(dataItem) {
+        dataItem.expanded =
+          dataItem.expanded === undefined ? false : !dataItem.expanded;
+      },
+      getData: function () {
+        this.gridData = process(this.products, {
+          take: this.take,
+          skip: this.skip,
+          group: this.group,
+        });
+      },
+      createAppState: function (dataState) {
+        if (dataState.group) {
+          dataState.group.map((group) => (group.aggregates = this.aggregates));
+        }
+        this.group = dataState.group;
+        this.take = dataState.take;
+        this.skip = dataState.skip;
+        this.getData();
+      },
+      dataStateChange: function (event) {
+        this.createAppState(event.data);
+      },
+      expandChange: function (event) {
+        event.dataItem[event.target.$props.expandField] = event.value;
+        //
+        // In Vue 2 context, instead of the above line, inside the expandChange method we should have the following:
+        //
+        //   Vue.set(
+        //     event.dataItem,
+        //     event.target.$props.expandField,
+        //     event.dataItem.expanded === undefined ? false : !event.dataItem.expanded
+        //   );
+        //
+      },
+      createRandomData(count) {
+        const productNames = [
+          'Chai',
+          'Chang',
+          'Syrup',
+          'Apple',
+          'Orange',
+          'Banana',
+          'Lemon',
+          'Pineapple',
+          'Tea',
+          'Milk',
+        ];
+        const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120];
+        const units = [2, 7, 12, 25, 67, 233, 123, 53, 67, 89];
+
+        return Array(count)
+          .fill({})
+          .map((_, idx) => ({
+            ProductID: idx + 1,
+            ProductName:
+              productNames[Math.floor(Math.random() * productNames.length)],
+            UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)],
+            UnitsInStock: units[Math.floor(Math.random() * units.length)],
+          }));
+      },
+    },
+  };
+  </script>
diff --git a/vue-options-api-demos/grid/grouping/basic/main.js b/vue-options-api-demos/grid/grouping/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/grouping/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/grouping/basic/main.vue b/vue-options-api-demos/grid/grouping/basic/main.vue
new file mode 100644
index 00000000..80618318
--- /dev/null
+++ b/vue-options-api-demos/grid/grouping/basic/main.vue
@@ -0,0 +1,117 @@
+<template>
+  <Grid
+    ref="grid"
+    :style="{ height: '520px' }"
+    :data-items="gridData"
+    :resizable="true"
+    :reorderable="true"
+    :sortable="true"
+    :pageable="gridPageable"
+    :groupable="true"
+    :group="group"
+    :take="take"
+    :skip="skip"
+    :expand-field="'expanded'"
+    :columns="columns"
+    :loader="loader"
+    @datastatechange="dataStateChange"
+    @expandchange="expandChange"
+  >
+  </Grid>
+</template>
+<script>
+import { process } from '@progress/kendo-data-query';
+import { Grid } from '@progress/kendo-vue-grid';
+
+export default {
+  components: {
+    Grid: Grid,
+  },
+  data: function () {
+    return {
+      gridPageable: { pageSizes: true },
+      products: this.createRandomData(1000),
+      gridData: [],
+      skip: 0,
+      take: 10,
+      group: [{ field: 'UnitsInStock' }],
+      expandedItems: [],
+      columns: [
+        { field: 'ProductID', filterable: false, title: 'ID', width: '50px' },
+        { field: 'ProductName', title: 'Product Name' },
+        { field: 'UnitPrice', filter: 'numeric', title: 'Unit Price' },
+        { field: 'UnitsInStock', title: 'Units In Stock' },
+      ],
+      loader: false,
+    };
+  },
+  created: function () {
+    this.getData();
+  },
+  methods: {
+    getData: function () {
+      this.loader = true;
+      // The idea behind using the following setTimeout method is to
+      // demonstrate how we can show a loader while fetching data.
+      // In a real-life scenarios with remote data binding, the 'loader'
+      // property should be updated before making a server request
+      // and after the request completes.
+      setTimeout(() => {
+        this.loader = false;
+        this.gridData = process(this.products, {
+          take: this.take,
+          skip: this.skip,
+          group: this.group,
+        });
+      }, 300);
+    },
+    createAppState: function (dataState) {
+      this.group = dataState.group;
+      this.take = dataState.take;
+      this.skip = dataState.skip;
+      this.getData();
+    },
+    dataStateChange: function (event) {
+      this.createAppState(event.data);
+    },
+    expandChange: function (event) {
+      event.dataItem[event.target.$props.expandField] = event.value;
+      //
+      // In Vue 2 context, instead of the above line, inside the expandChange method we should have the following:
+      //
+      //   Vue.set(
+      //     event.dataItem,
+      //     event.target.$props.expandField,
+      //     event.dataItem.expanded === undefined ? false : !event.dataItem.expanded
+      //   );
+      //
+    },
+    createRandomData(count) {
+      const productNames = [
+        'Chai',
+        'Chang',
+        'Syrup',
+        'Apple',
+        'Orange',
+        'Banana',
+        'Lemon',
+        'Pineapple',
+        'Tea',
+        'Milk',
+      ];
+      const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120];
+      const units = [2, 7, 12, 25, 67, 233, 123, 53, 67, 89];
+
+      return Array(count)
+        .fill({})
+        .map((_, idx) => ({
+          ProductID: idx + 1,
+          ProductName:
+            productNames[Math.floor(Math.random() * productNames.length)],
+          UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)],
+          UnitsInStock: units[Math.floor(Math.random() * units.length)],
+        }));
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/grouping/virtual/main.js b/vue-options-api-demos/grid/grouping/virtual/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/grouping/virtual/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/grouping/virtual/main.vue b/vue-options-api-demos/grid/grouping/virtual/main.vue
new file mode 100644
index 00000000..e0852f47
--- /dev/null
+++ b/vue-options-api-demos/grid/grouping/virtual/main.vue
@@ -0,0 +1,117 @@
+<template>
+  <Grid
+    style="height: 720px"
+    :data-items="gridData"
+    :all-grouped-items="allGroupedData"
+    :collapsed-groups="collapsedGroups"
+    :unique-field="'ProductID'"
+    :columns="columns"
+    :resizable="true"
+    :reorderable="true"
+    :filterable="true"
+    :sortable="true"
+    :groupable="true"
+    :group="group"
+    :row-height="40"
+    :take="take"
+    :skip="skip"
+    :scrollable="'virtual'"
+    @datastatechange="dataStateChange"
+    @expandchange="expandChange"
+    :expand-field="'expanded'"
+  >
+  </Grid>
+</template>
+<script>
+import { process } from '@progress/kendo-data-query';
+import { Grid } from '@progress/kendo-vue-grid';
+import { products } from './products';
+
+export default {
+  components: {
+    Grid: Grid,
+  },
+  data: function () {
+    return {
+      gridData: [],
+      allGroupedData: [],
+      collapsedGroups: [],
+      skip: 0,
+      take: 15,
+      group: [{ field: 'UnitsInStock' }, { field: 'Category.CategoryName' }],
+      columns: [
+        { field: 'ProductID', title: 'ID', filter: 'numeric' },
+        { field: 'ProductName', title: 'Product Name', reorderable: false },
+        {
+          field: 'QuantityPerUnit',
+          title: 'Quantity Per Unit',
+          groupable: true,
+        },
+        {
+          field: 'UnitsInStock',
+          title: 'Units In Stock',
+          filter: 'numeric',
+          reorderable: false,
+        },
+        { field: 'Category.CategoryName', title: 'Category Name' },
+      ],
+    };
+  },
+  created: function () {
+    this.getData();
+  },
+  watch: {
+    group() {
+      this.collapsedGroups = [];
+    },
+  },
+  methods: {
+    getData: function () {
+      this.gridData = process(this.getProducts(), {
+        take: this.take,
+        skip: this.skip,
+        group: this.group,
+      });
+      this.allGroupedData = process(this.getProducts(), {
+        group: this.group,
+      });
+    },
+    createAppState: function (dataState) {
+      this.group = dataState.group;
+      this.take = dataState.take;
+      this.skip = dataState.skip;
+      this.getData();
+    },
+    dataStateChange: function (event) {
+      this.createAppState(event.data);
+    },
+    expandChange: function (event) {
+      const isExpanded =
+        event.dataItem.expanded === undefined
+          ? event.dataItem.aggregates
+          : event.dataItem.expanded;
+
+      event.dataItem.expanded = !isExpanded;
+
+      this.allGroupedData = {
+        ...this.allGroupedData,
+        data: [...this.allGroupedData.data],
+      };
+
+      //
+      // In Vue 2 context, instead of the above line, inside the expandChange method we should have the following:
+      //
+      //   Vue.set(this, 'collapsedGroups', event.collapsedGroups);
+      //   Vue.set(
+      //     event.dataItem,
+      //     event.target.$props.expandField,
+      //     event.dataItem.expanded === undefined ? false : !event.dataItem.expanded
+      //   );
+      //
+    },
+    getProducts: function () {
+      return products;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/grouping/virtual/products.js b/vue-options-api-demos/grid/grouping/virtual/products.js
new file mode 100644
index 00000000..2a1ce279
--- /dev/null
+++ b/vue-options-api-demos/grid/grouping/virtual/products.js
@@ -0,0 +1,1313 @@
+const products = [
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22.0000,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.3500,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25.0000,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40.0000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97.0000,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31.0000,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 11,
+        "ProductName": "Queso Cabrales",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "1 kg pkg.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 30,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 12,
+        "ProductName": "Queso Manchego La Pastora",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 86,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 13,
+        "ProductName": "Konbu",
+        "SupplierID": 6,
+        "CategoryID": 8,
+        "QuantityPerUnit": "2 kg box",
+        "UnitPrice": 6.0000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 14,
+        "ProductName": "Tofu",
+        "SupplierID": 6,
+        "CategoryID": 7,
+        "QuantityPerUnit": "40 - 100 g pkgs.",
+        "UnitPrice": 23.2500,
+        "UnitsInStock": 35,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 15,
+        "ProductName": "Genen Shouyu",
+        "SupplierID": 6,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 250 ml bottles",
+        "UnitPrice": 15.5000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 16,
+        "ProductName": "Pavlova",
+        "SupplierID": 7,
+        "CategoryID": 3,
+        "QuantityPerUnit": "32 - 500 g boxes",
+        "UnitPrice": 17.4500,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 17,
+        "ProductName": "Alice Mutton",
+        "SupplierID": 7,
+        "CategoryID": 6,
+        "QuantityPerUnit": "20 - 1 kg tins",
+        "UnitPrice": 39.0000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 18,
+        "ProductName": "Carnarvon Tigers",
+        "SupplierID": 7,
+        "CategoryID": 8,
+        "QuantityPerUnit": "16 kg pkg.",
+        "UnitPrice": 62.5000,
+        "UnitsInStock": 42,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 19,
+        "ProductName": "Teatime Chocolate Biscuits",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 12 pieces",
+        "UnitPrice": 9.2000,
+        "UnitsInStock": 25,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 20,
+        "ProductName": "Sir Rodney's Marmalade",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "30 gift boxes",
+        "UnitPrice": 81.0000,
+        "UnitsInStock": 40,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 21,
+        "ProductName": "Sir Rodney's Scones",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 pkgs. x 4 pieces",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 3,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 22,
+        "ProductName": "Gustaf's Knäckebröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 500 g pkgs.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 104,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 23,
+        "ProductName": "Tunnbröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "12 - 250 g pkgs.",
+        "UnitPrice": 9.0000,
+        "UnitsInStock": 61,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 24,
+        "ProductName": "Guaraná Fantástica",
+        "SupplierID": 10,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 355 ml cans",
+        "UnitPrice": 4.5000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 25,
+        "ProductName": "NuNuCa Nuß-Nougat-Creme",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "20 - 450 g glasses",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 26,
+        "ProductName": "Gumbär Gummibärchen",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 250 g bags",
+        "UnitPrice": 31.2300,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 27,
+        "ProductName": "Schoggi Schokolade",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 100 g pieces",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 49,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 28,
+        "ProductName": "Rössle Sauerkraut",
+        "SupplierID": 12,
+        "CategoryID": 7,
+        "QuantityPerUnit": "25 - 825 g cans",
+        "UnitPrice": 45.6000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 29,
+        "ProductName": "Thüringer Rostbratwurst",
+        "SupplierID": 12,
+        "CategoryID": 6,
+        "QuantityPerUnit": "50 bags x 30 sausgs.",
+        "UnitPrice": 123.7900,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 30,
+        "ProductName": "Nord-Ost Matjeshering",
+        "SupplierID": 13,
+        "CategoryID": 8,
+        "QuantityPerUnit": "10 - 200 g glasses",
+        "UnitPrice": 25.8900,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 31,
+        "ProductName": "Gorgonzola Telino",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "12 - 100 g pkgs",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 32,
+        "ProductName": "Mascarpone Fabioli",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 32.0000,
+        "UnitsInStock": 9,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 33,
+        "ProductName": "Geitost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "500 g",
+        "UnitPrice": 2.5000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 34,
+        "ProductName": "Sasquatch Ale",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 111,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 35,
+        "ProductName": "Steeleye Stout",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 36,
+        "ProductName": "Inlagd Sill",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 250 g  jars",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 37,
+        "ProductName": "Gravad lax",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 500 g pkgs.",
+        "UnitPrice": 26.0000,
+        "UnitsInStock": 11,
+        "UnitsOnOrder": 50,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 38,
+        "ProductName": "Côte de Blaye",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 75 cl bottles",
+        "UnitPrice": 263.5000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 39,
+        "ProductName": "Chartreuse verte",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "750 cc per bottle",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 69,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 40,
+        "ProductName": "Boston Crab Meat",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 4 oz tins",
+        "UnitPrice": 18.4000,
+        "UnitsInStock": 123,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 41,
+        "ProductName": "Jack's New England Clam Chowder",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 12 oz cans",
+        "UnitPrice": 9.6500,
+        "UnitsInStock": 85,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 42,
+        "ProductName": "Singaporean Hokkien Fried Mee",
+        "SupplierID": 20,
+        "CategoryID": 5,
+        "QuantityPerUnit": "32 - 1 kg pkgs.",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 43,
+        "ProductName": "Ipoh Coffee",
+        "SupplierID": 20,
+        "CategoryID": 1,
+        "QuantityPerUnit": "16 - 500 g tins",
+        "UnitPrice": 46.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 44,
+        "ProductName": "Gula Malacca",
+        "SupplierID": 20,
+        "CategoryID": 2,
+        "QuantityPerUnit": "20 - 2 kg bags",
+        "UnitPrice": 19.4500,
+        "UnitsInStock": 27,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 45,
+        "ProductName": "Rogede sild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "1k pkg.",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 5,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 46,
+        "ProductName": "Spegesild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "4 - 450 g glasses",
+        "UnitPrice": 12.0000,
+        "UnitsInStock": 95,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 47,
+        "ProductName": "Zaanse koeken",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 - 4 oz boxes",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 48,
+        "ProductName": "Chocolade",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 pkgs.",
+        "UnitPrice": 12.7500,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 49,
+        "ProductName": "Maxilaku",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 - 50 g pkgs.",
+        "UnitPrice": 20.0000,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 60,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 50,
+        "ProductName": "Valkoinen suklaa",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "12 - 100 g bars",
+        "UnitPrice": 16.2500,
+        "UnitsInStock": 65,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 51,
+        "ProductName": "Manjimup Dried Apples",
+        "SupplierID": 24,
+        "CategoryID": 7,
+        "QuantityPerUnit": "50 - 300 g pkgs.",
+        "UnitPrice": 53.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 52,
+        "ProductName": "Filo Mix",
+        "SupplierID": 24,
+        "CategoryID": 5,
+        "QuantityPerUnit": "16 - 2 kg boxes",
+        "UnitPrice": 7.0000,
+        "UnitsInStock": 38,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 53,
+        "ProductName": "Perth Pasties",
+        "SupplierID": 24,
+        "CategoryID": 6,
+        "QuantityPerUnit": "48 pieces",
+        "UnitPrice": 32.8000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 54,
+        "ProductName": "Tourtière",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "16 pies",
+        "UnitPrice": 7.4500,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 55,
+        "ProductName": "Pâté chinois",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "24 boxes x 2 pies",
+        "UnitPrice": 24.0000,
+        "UnitsInStock": 115,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 56,
+        "ProductName": "Gnocchi di nonna Alice",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 57,
+        "ProductName": "Ravioli Angelo",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 19.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 58,
+        "ProductName": "Escargots de Bourgogne",
+        "SupplierID": 27,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 pieces",
+        "UnitPrice": 13.2500,
+        "UnitsInStock": 62,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 59,
+        "ProductName": "Raclette Courdavault",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 55.0000,
+        "UnitsInStock": 79,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 60,
+        "ProductName": "Camembert Pierrot",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "15 - 300 g rounds",
+        "UnitPrice": 34.0000,
+        "UnitsInStock": 19,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 61,
+        "ProductName": "Sirop d'érable",
+        "SupplierID": 29,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 500 ml bottles",
+        "UnitPrice": 28.5000,
+        "UnitsInStock": 113,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 62,
+        "ProductName": "Tarte au sucre",
+        "SupplierID": 29,
+        "CategoryID": 3,
+        "QuantityPerUnit": "48 pies",
+        "UnitPrice": 49.3000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 63,
+        "ProductName": "Vegie-spread",
+        "SupplierID": 7,
+        "CategoryID": 2,
+        "QuantityPerUnit": "15 - 625 g jars",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 64,
+        "ProductName": "Wimmers gute Semmelknödel",
+        "SupplierID": 12,
+        "CategoryID": 5,
+        "QuantityPerUnit": "20 bags x 4 pieces",
+        "UnitPrice": 33.2500,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 80,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 65,
+        "ProductName": "Louisiana Fiery Hot Pepper Sauce",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "32 - 8 oz bottles",
+        "UnitPrice": 21.0500,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 66,
+        "ProductName": "Louisiana Hot Spiced Okra",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 8 oz jars",
+        "UnitPrice": 17.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 100,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 67,
+        "ProductName": "Laughing Lumberjack Lager",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 52,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 68,
+        "ProductName": "Scottish Longbreads",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 8 pieces",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 69,
+        "ProductName": "Gudbrandsdalsost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 kg pkg.",
+        "UnitPrice": 36.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 70,
+        "ProductName": "Outback Lager",
+        "SupplierID": 7,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 355 ml bottles",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 71,
+        "ProductName": "Flotemysost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 21.5000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 72,
+        "ProductName": "Mozzarella di Giovanni",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 34.8000,
+        "UnitsInStock": 14,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 73,
+        "ProductName": "Röd Kaviar",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 150 g jars",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 101,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 74,
+        "ProductName": "Longlife Tofu",
+        "SupplierID": 4,
+        "CategoryID": 7,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 20,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 75,
+        "ProductName": "Rhönbräu Klosterbier",
+        "SupplierID": 12,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 0.5 l bottles",
+        "UnitPrice": 7.7500,
+        "UnitsInStock": 125,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 76,
+        "ProductName": "Lakkalikööri",
+        "SupplierID": 23,
+        "CategoryID": 1,
+        "QuantityPerUnit": "500 ml",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 57,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 77,
+        "ProductName": "Original Frankfurter grüne Soße",
+        "SupplierID": 12,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 boxes",
+        "UnitPrice": 13.0000,
+        "UnitsInStock": 32,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    }
+];
+
+export { products };
diff --git a/vue-options-api-demos/grid/keyboard-inline/CommandCell.vue b/vue-options-api-demos/grid/keyboard-inline/CommandCell.vue
new file mode 100644
index 00000000..c6331e80
--- /dev/null
+++ b/vue-options-api-demos/grid/keyboard-inline/CommandCell.vue
@@ -0,0 +1,80 @@
+<template>
+<td v-bind="navAttrs">
+    <kbutton
+        :class="editButtonClass"
+        :type="'button'"
+        :primary="true"
+        @click="editHandler">
+        {{editText}}
+    </kbutton>
+    <kbutton
+        :class="removeButtonClass"
+        @click="removeHandler">
+        {{removeText}}
+    </kbutton>
+</td>
+</template>
+<script>
+import { Button } from '@progress/kendo-vue-buttons';
+export default {
+    components: {
+        kbutton: Button
+    },
+    props: {
+        id: String,
+        field: String,
+        dataItem: Object,
+        format: String,
+        className: String,
+        columnIndex: Number,
+        columnsCount: Number,
+        rowType: String,
+        level: Number,
+        expanded: Boolean
+    },
+    inject: {
+        kendoIntlService: { default: null },
+        getKeyboardNavigationAttributes: { default: ()=>{} }
+    },
+    data(){
+        return {
+            navAttrs: {}
+        };
+    },
+    mounted (){
+        this.navAttrs = this.getKeyboardNavigationAttributes(this.$props.id);
+    },
+    computed: {
+        editText(){
+            if (this.$props.dataItem['inEdit']){
+                return this.$props.dataItem.ProductID? 'Update' : 'Add'
+            } else {
+                return 'Edit';
+            }
+        },
+        removeText(){
+            if (this.$props.dataItem['inEdit']){
+                return this.$props.dataItem.ProductID? 'Cancel' : 'Discard'
+            } else {
+                return 'Remove';
+            }
+        },
+        editButtonClass(){
+            return this.$props.dataItem['inEdit'] ? 'k-grid-save-command' : 'k-grid-edit-command';
+        },
+        removeButtonClass(){
+            return this.$props.dataItem['inEdit'] ? 'k-grid-cancel-command' : 'k-grid-remove-command';
+        }
+    },
+    methods: {
+        editHandler: function() {
+            const command = this.$props.dataItem['inEdit'] ? 'save' : 'edit';
+            this.$emit(command, {dataItem:this.dataItem});
+        },
+        removeHandler: function() {
+            const command = this.$props.dataItem['inEdit'] ? 'cancel' : 'remove';
+            this.$emit(command, {dataItem:this.dataItem});
+        },
+    }
+}
+</script>
diff --git a/vue-options-api-demos/grid/keyboard-inline/main.js b/vue-options-api-demos/grid/keyboard-inline/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/keyboard-inline/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/keyboard-inline/main.vue b/vue-options-api-demos/grid/keyboard-inline/main.vue
new file mode 100644
index 00000000..b1325a66
--- /dev/null
+++ b/vue-options-api-demos/grid/keyboard-inline/main.vue
@@ -0,0 +1,199 @@
+<template>
+ <Grid ref="grid"
+          :style="{height: '440px'}"
+          :data-items="gridData"
+          :edit-field="'inEdit'"
+          :sortable="true"
+          :pageable="pageable"
+          :take="take"
+          :skip="skip"
+          :total="total"
+          @itemchange="itemChange"
+          @datastatechange="dataStateChange"
+          :columns="columns"
+          :navigatable="true">
+        <template v-slot:myTemplate="{props}">
+            <custom v-bind="props"
+                    @edit="edit"
+                    @save="save"
+                    @remove="remove"
+                    @cancel="cancel"/>
+        </template>
+        <grid-toolbar>
+            <kbutton title="Add new"
+                    @click='insert' >
+                Add new
+            </kbutton>
+            <kbutton v-if="hasItemsInEdit"
+                    title="Cancel current changes"
+                    @click="cancelChanges">
+                    Cancel current changes
+            </kbutton>
+        </grid-toolbar>
+        <grid-norecords>
+            There is no data available custom
+        </grid-norecords>
+    </Grid>
+</template>
+<script>
+import { Grid, GridToolbar, GridNoRecords } from '@progress/kendo-vue-grid';
+import { Button } from '@progress/kendo-vue-buttons';
+import { process } from '@progress/kendo-data-query';
+import CommandCell from './CommandCell.vue';
+
+export default {
+    components: {
+        'Grid': Grid,
+        'grid-toolbar': GridToolbar,
+        'grid-norecords': GridNoRecords,
+        'custom': CommandCell,
+        'kbutton': Button
+    },
+    data: function () {
+        return {
+            filter: null,
+            sort: null,
+            pageable: true,
+            gridData: [],
+            skip: 0,
+            take: 10,
+            total: 100,
+            updatedData: [],
+            editID: null,
+            columns: [
+                { field: 'ProductID', filterable: false, editable: false, title: 'ID', width: '80px' },
+                { field: 'ProductName', title: 'Name' },
+                { field: 'UnitPrice', filter: 'numeric', title: 'Unit Price' },
+                { field: 'UnitsInStock', title: 'Units', filter: 'numeric', width: '200px', editor: 'numeric' },
+                { field: 'Discontinued', title: 'Discontinued', editor:'boolean' },
+                { cell: 'myTemplate', filterable: false, width: '210px' }
+            ],
+            gridData: []
+        };
+    },
+    computed: {
+        hasItemsInEdit() {
+            return this.gridData.filter(p => p.inEdit).length > 0;
+        }
+    },
+    created: function() {
+        this.updatedData = this.createRandomData(this.total);
+        this.getData();
+    },
+    methods: {
+        itemChange: function (e) {
+            if (e.dataItem.ProductID) {
+              let index = this.gridData.findIndex(p => p.ProductID === e.dataItem.ProductID);
+              let updated = Object.assign({},this.gridData[index], {[e.field]:e.value});
+              this.gridData.splice(index, 1, updated);
+            } else {
+              e.dataItem[e.field] = e.value;
+            }
+        },
+        insert() {
+            const dataItem = { inEdit: true };
+            this.gridData.splice(0, 0, dataItem)
+        },
+        edit: function (e) {
+            let index = this.gridData.findIndex(p => p.ProductID === e.dataItem.ProductID);
+            let updated = Object.assign({},this.gridData[index], {inEdit:true});
+            this.gridData.splice(index, 1, updated);
+        },
+        save: function(e) {
+            let index = this.gridData.findIndex(p => p.ProductID === e.dataItem.ProductID);
+            let item = this.gridData[index];
+            let updated = Object.assign(this.update(this.gridData.slice(), item, false), {inEdit:undefined});
+            this.gridData.splice(index, 1, updated);
+            let updateDataIndex = this.updatedData.findIndex(p => p.ProductID === e.dataItem.ProductID);
+            this.updatedData.splice(updateDataIndex, 1, updated);
+        },
+        update(data, item, remove) {
+            let updated;
+            let index = data.findIndex(p => item.ProductID && p.ProductID === item.ProductID);
+            if (index >= 0) {
+                updated = Object.assign({}, item);
+                data[index] = updated;
+            } else {
+                let id = 1;
+                this.updatedData.forEach(p => { if (p.ProductID) { id = Math.max(p.ProductID + 1, id); } });
+                updated = Object.assign({}, item, { ProductID: id });
+                data.unshift(updated);
+                index = 0;
+            }
+
+            if (remove) {
+                data = data.splice(index, 1);
+            }
+            return data[index];
+        },
+        cancel(e) {
+            if (e.dataItem.ProductID) {
+                let index = this.gridData.findIndex(p => p.ProductID === e.dataItem.ProductID);
+                let updateDataIndex = this.updatedData.findIndex(p => p.ProductID === e.dataItem.ProductID);
+                let updated = Object.assign(this.updatedData[updateDataIndex], {'inEdit': undefined});
+                this.gridData.splice(index, 1, updated);
+            } else {
+              let index = this.gridData.findIndex(p => JSON.stringify(e.dataItem) === JSON.stringify(p));
+
+              this.gridData.splice(index, 1);
+            }
+        },
+        remove(e) {
+            e.dataItem.inEdit = undefined;
+            this.update(this.gridData, e.dataItem, true);
+            this.update(this.updatedData, e.dataItem, true);
+        },
+        cancelChanges () {
+             let editedItems = this.updatedData.filter(p => p.inEdit === true);
+             if(editedItems.length){
+                editedItems.forEach(
+                    item => {
+                       item.inEdit = undefined;
+                     });
+             }
+            this.getData();
+        },
+         getData: function () {
+            this.gridData = process(
+              this.updatedData,
+             {
+               take: this.take,
+               skip: this.skip,
+               sort: this.sort,
+               filter: this.filter
+            }).data;
+
+           this.total = process(
+              this.updatedData,
+             {
+               filter: this.filter
+            }).total;
+        },
+        createAppState: function(dataState) {
+            this.take = dataState.take;
+            this.skip = dataState.skip;
+            this.filter = dataState.filter;
+            this.sort = dataState.sort;
+            this.getData();
+        },
+        dataStateChange: function (event) {
+            this.createAppState(event.data);
+        },
+        createRandomData(count) {
+            const productNames = ['Chai', 'Chang', 'Syrup', 'Apple', 'Orange', 'Banana', 'Lemon', 'Pineapple', 'Tea', 'Milk'];
+            const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120];
+            const units = [2, 7, 12, 25,  67, 233, 123, 53, 67, 89];
+            const trueFalse = [true, false];
+
+            return Array(count).fill({}).map((_, idx) => ({
+                ProductID: idx + 1,
+                ProductName: productNames[Math.floor(Math.random() * productNames.length)],
+                UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)],
+                UnitsInStock: units[Math.floor(Math.random() * units.length)],
+                Discontinued: trueFalse[Math.floor(Math.random() * trueFalse.length)]
+            }));
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/keyboard-navigation/DetailComponent.vue b/vue-options-api-demos/grid/keyboard-navigation/DetailComponent.vue
new file mode 100644
index 00000000..670506c7
--- /dev/null
+++ b/vue-options-api-demos/grid/keyboard-navigation/DetailComponent.vue
@@ -0,0 +1,39 @@
+<template>
+<grid :data-items="getFilteredProducts"
+                     :columns="columns"
+                     :navigatable="true">
+               </grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import { filterBy } from '@progress/kendo-data-query';
+import { products } from './products';
+
+export default {
+    components: {
+        grid: Grid
+    },
+    props: {
+        dataItem: Object
+    },
+    data () {
+        return {
+            products: products,
+            columns: [
+                { field: 'ProductID', filterable: false, title: 'ID', width: '50px' },
+                { field: 'ProductName', title: 'Product Name' },
+                { field: 'UnitPrice', filter: 'numeric', title: 'Unit Price' },
+                { field: 'UnitsInStock', title: 'Units In Stock' },
+                { field: 'Category.CategoryName', title: 'Category Name' }
+            ]
+        }
+    },
+    computed: {
+        getFilteredProducts() {
+            const result = filterBy(this.products, {field: 'Category.CategoryID', operator: 'eq', value: this.dataItem.CategoryID});
+
+            return result;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/grid/keyboard-navigation/main.js b/vue-options-api-demos/grid/keyboard-navigation/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/keyboard-navigation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/keyboard-navigation/main.vue b/vue-options-api-demos/grid/keyboard-navigation/main.vue
new file mode 100644
index 00000000..7944474a
--- /dev/null
+++ b/vue-options-api-demos/grid/keyboard-navigation/main.vue
@@ -0,0 +1,109 @@
+<template>
+<Grid
+    ref="grid"
+    :pageable="pageable"
+    :take="take"
+    :skip="skip"
+    :total="total"
+    :sortable="true"
+    :filterable="true"
+    :filter="filter"
+    :sort= "sort"
+    :style="{height: '550px'}"
+    :data-items="categories"
+    :detail="cellTemplate"
+    @expandchange="expandChange"
+    :expand-field="'expanded'"
+    :columns="columns"
+    @datastatechange="dataStateChange"
+    :navigatable="true">
+    <template v-slot:myTemplate="{props}">
+        <custom :data-item="props.dataItem" />
+    </template>
+ </Grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import { process } from '@progress/kendo-data-query';
+import { products } from './products';
+import DetailComponent from './DetailComponent.vue';
+const categories = [
+                {CategoryID: 1, CategoryName: 'Beverages', Descriptions: 'Soft drinks, coffees, teas, beers, and ales'},
+                {CategoryID: 2, CategoryName: 'Condiments', Descriptions: 'Sweet and savory sauces, relishes, spreads, and seasonings'},
+                {CategoryID: 3, CategoryName: 'Confections', Descriptions: 'Desserts, candies, and sweet breads'},
+                {CategoryID: 4, CategoryName: 'Dairy Products', Descriptions: 'Cheeses'},
+                {CategoryID: 5, CategoryName: 'Grains/Cereals', Descriptions: 'Breads, crackers, pasta, and cereal'},
+                {CategoryID: 6, CategoryName: 'Meat/Poultry', Descriptions: 'Prepared meats'},
+                {CategoryID: 7, CategoryName: 'Produce', Descriptions: 'Dried fruit and bean curd'},
+                {CategoryID: 8, CategoryName: 'Seafood', Descriptions: 'Seaweed and fish'}
+            ];
+export default {
+    components: {
+        'Grid': Grid,
+        custom: DetailComponent
+    },
+    data: function () {
+        return {
+            skip: 0,
+            take: 5,
+            filter: null,
+            sort: null,
+            pageable: true,
+            cellTemplate: 'myTemplate',
+            products: products,
+            total: categories.length,
+            expandedItems: [],
+            categories: [],
+            columns: [
+                { title: 'Category', field: 'CategoryID', filter: 'numeric'},
+                { title: 'Category', field: 'CategoryName' },
+                { title: 'Descriptions',  field: 'Descriptions' }
+            ]
+        };
+    },
+    created(){
+        this.getData();
+    },
+    methods: {
+        expandChange: function (event) {
+            event.dataItem[event.target.$props.expandField] = event.value;
+            //
+            // In Vue 2 context, instead of the above line, inside the expandChange method we should have the following:
+            //
+            //   Vue.set(
+            //     event.dataItem,
+            //     event.target.$props.expandField,
+            //     event.dataItem.expanded === undefined ? false : !event.dataItem.expanded
+            //   );
+            //
+        },
+        getFilteredProducts(catId) {
+            const result = filterBy(products, {field: 'Category.CategoryID', operator: 'eq', value: catId});
+
+            return result;
+        },
+        getData: function () {
+
+            this.categories = process(
+              categories,
+             {
+               take: this.take,
+               skip: this.skip,
+               sort: this.sort,
+               filter: this.filter
+            }).data;
+        },
+        createAppState: function(dataState) {
+            this.take = dataState.take;
+            this.skip = dataState.skip;
+            this.filter = dataState.filter;
+            this.sort = dataState.sort;
+            this.getData();
+        },
+        dataStateChange: function (event) {
+            this.createAppState(event.data);
+        },
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/keyboard-navigation/products.js b/vue-options-api-demos/grid/keyboard-navigation/products.js
new file mode 100644
index 00000000..2a1ce279
--- /dev/null
+++ b/vue-options-api-demos/grid/keyboard-navigation/products.js
@@ -0,0 +1,1313 @@
+const products = [
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22.0000,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.3500,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25.0000,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40.0000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97.0000,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31.0000,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 11,
+        "ProductName": "Queso Cabrales",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "1 kg pkg.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 30,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 12,
+        "ProductName": "Queso Manchego La Pastora",
+        "SupplierID": 5,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 86,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 13,
+        "ProductName": "Konbu",
+        "SupplierID": 6,
+        "CategoryID": 8,
+        "QuantityPerUnit": "2 kg box",
+        "UnitPrice": 6.0000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 14,
+        "ProductName": "Tofu",
+        "SupplierID": 6,
+        "CategoryID": 7,
+        "QuantityPerUnit": "40 - 100 g pkgs.",
+        "UnitPrice": 23.2500,
+        "UnitsInStock": 35,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 15,
+        "ProductName": "Genen Shouyu",
+        "SupplierID": 6,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 250 ml bottles",
+        "UnitPrice": 15.5000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 16,
+        "ProductName": "Pavlova",
+        "SupplierID": 7,
+        "CategoryID": 3,
+        "QuantityPerUnit": "32 - 500 g boxes",
+        "UnitPrice": 17.4500,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 17,
+        "ProductName": "Alice Mutton",
+        "SupplierID": 7,
+        "CategoryID": 6,
+        "QuantityPerUnit": "20 - 1 kg tins",
+        "UnitPrice": 39.0000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 18,
+        "ProductName": "Carnarvon Tigers",
+        "SupplierID": 7,
+        "CategoryID": 8,
+        "QuantityPerUnit": "16 kg pkg.",
+        "UnitPrice": 62.5000,
+        "UnitsInStock": 42,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 19,
+        "ProductName": "Teatime Chocolate Biscuits",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 12 pieces",
+        "UnitPrice": 9.2000,
+        "UnitsInStock": 25,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 20,
+        "ProductName": "Sir Rodney's Marmalade",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "30 gift boxes",
+        "UnitPrice": 81.0000,
+        "UnitsInStock": 40,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 21,
+        "ProductName": "Sir Rodney's Scones",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 pkgs. x 4 pieces",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 3,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 22,
+        "ProductName": "Gustaf's Knäckebröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 500 g pkgs.",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 104,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 23,
+        "ProductName": "Tunnbröd",
+        "SupplierID": 9,
+        "CategoryID": 5,
+        "QuantityPerUnit": "12 - 250 g pkgs.",
+        "UnitPrice": 9.0000,
+        "UnitsInStock": 61,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 24,
+        "ProductName": "Guaraná Fantástica",
+        "SupplierID": 10,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 355 ml cans",
+        "UnitPrice": 4.5000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 25,
+        "ProductName": "NuNuCa Nuß-Nougat-Creme",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "20 - 450 g glasses",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 26,
+        "ProductName": "Gumbär Gummibärchen",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 250 g bags",
+        "UnitPrice": 31.2300,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 27,
+        "ProductName": "Schoggi Schokolade",
+        "SupplierID": 11,
+        "CategoryID": 3,
+        "QuantityPerUnit": "100 - 100 g pieces",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 49,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 28,
+        "ProductName": "Rössle Sauerkraut",
+        "SupplierID": 12,
+        "CategoryID": 7,
+        "QuantityPerUnit": "25 - 825 g cans",
+        "UnitPrice": 45.6000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 29,
+        "ProductName": "Thüringer Rostbratwurst",
+        "SupplierID": 12,
+        "CategoryID": 6,
+        "QuantityPerUnit": "50 bags x 30 sausgs.",
+        "UnitPrice": 123.7900,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 30,
+        "ProductName": "Nord-Ost Matjeshering",
+        "SupplierID": 13,
+        "CategoryID": 8,
+        "QuantityPerUnit": "10 - 200 g glasses",
+        "UnitPrice": 25.8900,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 31,
+        "ProductName": "Gorgonzola Telino",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "12 - 100 g pkgs",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 32,
+        "ProductName": "Mascarpone Fabioli",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 32.0000,
+        "UnitsInStock": 9,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 33,
+        "ProductName": "Geitost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "500 g",
+        "UnitPrice": 2.5000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 34,
+        "ProductName": "Sasquatch Ale",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 111,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 35,
+        "ProductName": "Steeleye Stout",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 36,
+        "ProductName": "Inlagd Sill",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 250 g  jars",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 112,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 37,
+        "ProductName": "Gravad lax",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 500 g pkgs.",
+        "UnitPrice": 26.0000,
+        "UnitsInStock": 11,
+        "UnitsOnOrder": 50,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 38,
+        "ProductName": "Côte de Blaye",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "12 - 75 cl bottles",
+        "UnitPrice": 263.5000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 39,
+        "ProductName": "Chartreuse verte",
+        "SupplierID": 18,
+        "CategoryID": 1,
+        "QuantityPerUnit": "750 cc per bottle",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 69,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 40,
+        "ProductName": "Boston Crab Meat",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 4 oz tins",
+        "UnitPrice": 18.4000,
+        "UnitsInStock": 123,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 41,
+        "ProductName": "Jack's New England Clam Chowder",
+        "SupplierID": 19,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 12 oz cans",
+        "UnitPrice": 9.6500,
+        "UnitsInStock": 85,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 42,
+        "ProductName": "Singaporean Hokkien Fried Mee",
+        "SupplierID": 20,
+        "CategoryID": 5,
+        "QuantityPerUnit": "32 - 1 kg pkgs.",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 43,
+        "ProductName": "Ipoh Coffee",
+        "SupplierID": 20,
+        "CategoryID": 1,
+        "QuantityPerUnit": "16 - 500 g tins",
+        "UnitPrice": 46.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 44,
+        "ProductName": "Gula Malacca",
+        "SupplierID": 20,
+        "CategoryID": 2,
+        "QuantityPerUnit": "20 - 2 kg bags",
+        "UnitPrice": 19.4500,
+        "UnitsInStock": 27,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 45,
+        "ProductName": "Rogede sild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "1k pkg.",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 5,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 46,
+        "ProductName": "Spegesild",
+        "SupplierID": 21,
+        "CategoryID": 8,
+        "QuantityPerUnit": "4 - 450 g glasses",
+        "UnitPrice": 12.0000,
+        "UnitsInStock": 95,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 47,
+        "ProductName": "Zaanse koeken",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 - 4 oz boxes",
+        "UnitPrice": 9.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 48,
+        "ProductName": "Chocolade",
+        "SupplierID": 22,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 pkgs.",
+        "UnitPrice": 12.7500,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 49,
+        "ProductName": "Maxilaku",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "24 - 50 g pkgs.",
+        "UnitPrice": 20.0000,
+        "UnitsInStock": 10,
+        "UnitsOnOrder": 60,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 50,
+        "ProductName": "Valkoinen suklaa",
+        "SupplierID": 23,
+        "CategoryID": 3,
+        "QuantityPerUnit": "12 - 100 g bars",
+        "UnitPrice": 16.2500,
+        "UnitsInStock": 65,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 51,
+        "ProductName": "Manjimup Dried Apples",
+        "SupplierID": 24,
+        "CategoryID": 7,
+        "QuantityPerUnit": "50 - 300 g pkgs.",
+        "UnitPrice": 53.0000,
+        "UnitsInStock": 20,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 52,
+        "ProductName": "Filo Mix",
+        "SupplierID": 24,
+        "CategoryID": 5,
+        "QuantityPerUnit": "16 - 2 kg boxes",
+        "UnitPrice": 7.0000,
+        "UnitsInStock": 38,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 53,
+        "ProductName": "Perth Pasties",
+        "SupplierID": 24,
+        "CategoryID": 6,
+        "QuantityPerUnit": "48 pieces",
+        "UnitPrice": 32.8000,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 54,
+        "ProductName": "Tourtière",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "16 pies",
+        "UnitPrice": 7.4500,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 55,
+        "ProductName": "Pâté chinois",
+        "SupplierID": 25,
+        "CategoryID": 6,
+        "QuantityPerUnit": "24 boxes x 2 pies",
+        "UnitPrice": 24.0000,
+        "UnitsInStock": 115,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    },
+    {
+        "ProductID": 56,
+        "ProductName": "Gnocchi di nonna Alice",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 21,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 57,
+        "ProductName": "Ravioli Angelo",
+        "SupplierID": 26,
+        "CategoryID": 5,
+        "QuantityPerUnit": "24 - 250 g pkgs.",
+        "UnitPrice": 19.5000,
+        "UnitsInStock": 36,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 58,
+        "ProductName": "Escargots de Bourgogne",
+        "SupplierID": 27,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 pieces",
+        "UnitPrice": 13.2500,
+        "UnitsInStock": 62,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 59,
+        "ProductName": "Raclette Courdavault",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 55.0000,
+        "UnitsInStock": 79,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 60,
+        "ProductName": "Camembert Pierrot",
+        "SupplierID": 28,
+        "CategoryID": 4,
+        "QuantityPerUnit": "15 - 300 g rounds",
+        "UnitPrice": 34.0000,
+        "UnitsInStock": 19,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 61,
+        "ProductName": "Sirop d'érable",
+        "SupplierID": 29,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 500 ml bottles",
+        "UnitPrice": 28.5000,
+        "UnitsInStock": 113,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 62,
+        "ProductName": "Tarte au sucre",
+        "SupplierID": 29,
+        "CategoryID": 3,
+        "QuantityPerUnit": "48 pies",
+        "UnitPrice": 49.3000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 63,
+        "ProductName": "Vegie-spread",
+        "SupplierID": 7,
+        "CategoryID": 2,
+        "QuantityPerUnit": "15 - 625 g jars",
+        "UnitPrice": 43.9000,
+        "UnitsInStock": 24,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 64,
+        "ProductName": "Wimmers gute Semmelknödel",
+        "SupplierID": 12,
+        "CategoryID": 5,
+        "QuantityPerUnit": "20 bags x 4 pieces",
+        "UnitPrice": 33.2500,
+        "UnitsInStock": 22,
+        "UnitsOnOrder": 80,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 5,
+            "CategoryName": "Grains/Cereals",
+            "Description": "Breads, crackers, pasta, and cereal"
+        }
+    },
+    {
+        "ProductID": 65,
+        "ProductName": "Louisiana Fiery Hot Pepper Sauce",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "32 - 8 oz bottles",
+        "UnitPrice": 21.0500,
+        "UnitsInStock": 76,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 66,
+        "ProductName": "Louisiana Hot Spiced Okra",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "24 - 8 oz jars",
+        "UnitPrice": 17.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 100,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 67,
+        "ProductName": "Laughing Lumberjack Lager",
+        "SupplierID": 16,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 14.0000,
+        "UnitsInStock": 52,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 68,
+        "ProductName": "Scottish Longbreads",
+        "SupplierID": 8,
+        "CategoryID": 3,
+        "QuantityPerUnit": "10 boxes x 8 pieces",
+        "UnitPrice": 12.5000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 3,
+            "CategoryName": "Confections",
+            "Description": "Desserts, candies, and sweet breads"
+        }
+    },
+    {
+        "ProductID": 69,
+        "ProductName": "Gudbrandsdalsost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 kg pkg.",
+        "UnitPrice": 36.0000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 70,
+        "ProductName": "Outback Lager",
+        "SupplierID": 7,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 355 ml bottles",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 10,
+        "ReorderLevel": 30,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 71,
+        "ProductName": "Flotemysost",
+        "SupplierID": 15,
+        "CategoryID": 4,
+        "QuantityPerUnit": "10 - 500 g pkgs.",
+        "UnitPrice": 21.5000,
+        "UnitsInStock": 26,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 72,
+        "ProductName": "Mozzarella di Giovanni",
+        "SupplierID": 14,
+        "CategoryID": 4,
+        "QuantityPerUnit": "24 - 200 g pkgs.",
+        "UnitPrice": 34.8000,
+        "UnitsInStock": 14,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 4,
+            "CategoryName": "Dairy Products",
+            "Description": "Cheeses"
+        }
+    },
+    {
+        "ProductID": 73,
+        "ProductName": "Röd Kaviar",
+        "SupplierID": 17,
+        "CategoryID": 8,
+        "QuantityPerUnit": "24 - 150 g jars",
+        "UnitPrice": 15.0000,
+        "UnitsInStock": 101,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        }
+    },
+    {
+        "ProductID": 74,
+        "ProductName": "Longlife Tofu",
+        "SupplierID": 4,
+        "CategoryID": 7,
+        "QuantityPerUnit": "5 kg pkg.",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 4,
+        "UnitsOnOrder": 20,
+        "ReorderLevel": 5,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 75,
+        "ProductName": "Rhönbräu Klosterbier",
+        "SupplierID": 12,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 0.5 l bottles",
+        "UnitPrice": 7.7500,
+        "UnitsInStock": 125,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 76,
+        "ProductName": "Lakkalikööri",
+        "SupplierID": 23,
+        "CategoryID": 1,
+        "QuantityPerUnit": "500 ml",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 57,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 20,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 77,
+        "ProductName": "Original Frankfurter grüne Soße",
+        "SupplierID": 12,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 boxes",
+        "UnitPrice": 13.0000,
+        "UnitsInStock": 32,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 15,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    }
+];
+
+export { products };
diff --git a/vue-options-api-demos/grid/live-data/ChangePriceComponent.vue b/vue-options-api-demos/grid/live-data/ChangePriceComponent.vue
new file mode 100644
index 00000000..442382f8
--- /dev/null
+++ b/vue-options-api-demos/grid/live-data/ChangePriceComponent.vue
@@ -0,0 +1,31 @@
+<template>
+  <span :class="[currentTrends.negative ? 'red' : 'green']">
+    {{ formattedNumber }}
+  </span>
+</template>
+
+<script>
+import { provideIntlService } from '@progress/kendo-vue-intl';
+import { trends } from './utils';
+
+export default {
+  inject: {
+    kendoIntlService: { default: null },
+  },
+  props: {
+    dataItem: Object,
+    field: String,
+  },
+  computed: {
+    currentTrends() {
+      return trends(this.dataItem);
+    },
+    formattedNumber: function () {
+      return provideIntlService(this).formatNumber(
+        this.dataItem[this.field],
+        this.dataItem[this.field] === 'Change' ? 'n5' : '0.##'
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/live-data/Grid.vue b/vue-options-api-demos/grid/live-data/Grid.vue
new file mode 100644
index 00000000..3b264dbd
--- /dev/null
+++ b/vue-options-api-demos/grid/live-data/Grid.vue
@@ -0,0 +1,200 @@
+<template>
+  <div>
+    <Grid
+      ref="grid"
+      :style="{ height: '470px' }"
+      :data-items="gridData"
+      :columns="columns"
+    >
+      <template v-slot:tickerTemplate="{ props }">
+        <td>
+          <ticker :data-item="props.dataItem" :field="props.field"></ticker>
+        </td>
+      </template>
+      <template v-slot:priceTemplate="{ props }">
+        <td class="text-center">
+          <price :data-item="props.dataItem" :field="props.field"></price>
+        </td>
+      </template>
+      <template v-slot:pricechangepercentageTemplate="{ props }">
+        <td class="text-center">
+          <pricechange
+            :data-item="props.dataItem"
+            :field="props.field"
+          ></pricechange>
+        </td>
+      </template>
+      <template v-slot:pricechangeTemplate="{ props }">
+        <td class="text-center">
+          <pricechange
+            :data-item="props.dataItem"
+            :field="props.field"
+          ></pricechange>
+        </td>
+      </template>
+      <template v-slot:highpriceTemplate="{ props }">
+        <td class="text-center">
+          <price :data-item="props.dataItem" :field="props.field"></price>
+        </td>
+      </template>
+      <template v-slot:lowpriceTemplate="{ props }">
+        <td class="text-center">
+          <price :data-item="props.dataItem" :field="props.field"></price>
+        </td>
+      </template>
+      <template v-slot:volumeTemplate="{ props }">
+        <td class="text-center">
+          <volume :data-item="props.dataItem" :field="props.field"></volume>
+        </td>
+      </template>
+      <template v-slot:ratingTemplate="{ props }">
+        <td class="text-center">
+          <rating :data-item="props.dataItem" :field="props.field"></rating>
+        </td>
+      </template>
+    </Grid>
+  </div>
+</template>
+
+<script>
+import { process } from '@progress/kendo-data-query';
+import { Grid, GridToolbar } from '@progress/kendo-vue-grid';
+import TickerComponent from './TickerComponent.vue';
+import PriceComponent from './PriceComponent.vue';
+import ChangePriceComponent from './ChangePriceComponent.vue';
+import VolumeComponent from './VolumeComponent.vue';
+import RatingComponent from './RatingComponent.vue';
+import { DATA } from './financial-data.js';
+
+const ADJUST_PADDING = 4;
+const COLUMN_MIN = 4;
+let minGridWidth = 0;
+
+const columnsData = [
+  {
+    field: 'Ticker',
+    minWidth: 140,
+    cell: 'tickerTemplate',
+  },
+  {
+    field: 'Price',
+    title: 'LAST',
+    minWidth: 120,
+    cell: 'priceTemplate',
+  },
+  {
+    field: 'Change(%)',
+    title: 'CHG %',
+    minWidth: 90,
+    cell: 'pricechangepercentageTemplate',
+  },
+  {
+    field: 'Change',
+    title: 'CHG',
+    minWidth: 90,
+    cell: 'pricechangeTemplate',
+  },
+  {
+    field: 'High(D)',
+    title: 'High',
+    minWidth: 110,
+    cell: 'highpriceTemplate',
+  },
+  {
+    field: 'Low(D)',
+    title: 'LOW',
+    minWidth: 110,
+    cell: 'lowpriceTemplate',
+  },
+  {
+    field: 'Volume',
+    title: 'VOL',
+    minWidth: 90,
+    cell: 'volumeTemplate',
+  },
+  {
+    title: 'RATING',
+    cell: 'ratingTemplate',
+    minWidth: 130,
+  },
+];
+
+export default {
+  name: 'App',
+  components: {
+    Grid: Grid,
+    price: PriceComponent,
+    pricechange: ChangePriceComponent,
+    ticker: TickerComponent,
+    volume: VolumeComponent,
+    rating: RatingComponent,
+  },
+  props: {
+    gridData: Array,
+  },
+  mounted() {
+    this.grid = document.querySelector('.k-grid');
+    window.addEventListener('resize', this.handleResize);
+    columnsData.map((item) => {
+      return (minGridWidth += item.minWidth);
+    });
+
+    this.gridCurrent = this.grid.offsetWidth;
+    this.setMinWidth = this.grid.offsetWidth < minGridWidth;
+    this.defineColumns();
+  },
+  data() {
+    return {
+      setMinWidth: false,
+      gridCurrent: 0,
+      columns: [],
+    };
+  },
+  methods: {
+    defineColumns() {
+      this.columns = columnsData.map((column, index) => {
+        return {
+          field: column.field,
+          title: column.title,
+          width: this.setWidth(column.minWidth),
+          cell: column.cell,
+        };
+      });
+    },
+    setWidth(minWidth) {
+      let width = this.setMinWidth
+        ? minWidth
+        : minWidth + (this.gridCurrent - minGridWidth) / this.columns.length;
+      width < COLUMN_MIN ? width : (width -= ADJUST_PADDING);
+      return width;
+    },
+    handleResize() {
+      if (this.grid.offsetWidth < minGridWidth && !this.setMinWidth) {
+        this.setMinWidth = true;
+      } else if (this.grid.offsetWidth > minGridWidth) {
+        this.gridCurrent = this.grid.offsetWidth;
+        this.setMinWidth = false;
+      }
+      this.defineColumns();
+    },
+  },
+};
+</script>
+
+<style>
+td.text-center {
+  text-align: center;
+}
+
+.red {
+  color: #d9534f;
+}
+
+.green {
+  color: #37b400;
+}
+
+.text-bold {
+  font-weight: 600;
+}
+</style>
diff --git a/vue-options-api-demos/grid/live-data/PriceComponent.vue b/vue-options-api-demos/grid/live-data/PriceComponent.vue
new file mode 100644
index 00000000..8f5857f8
--- /dev/null
+++ b/vue-options-api-demos/grid/live-data/PriceComponent.vue
@@ -0,0 +1,25 @@
+<template>
+  <span>{{ formattedNumber }} </span>
+</template>
+
+<script>
+import { provideIntlService } from '@progress/kendo-vue-intl';
+
+export default {
+  inject: {
+    kendoIntlService: { default: null },
+  },
+  props: {
+    dataItem: Object,
+    field: String,
+  },
+  computed: {
+    formattedNumber: function () {
+      return provideIntlService(this).formatNumber(
+        this.dataItem[this.field],
+        'n5'
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/live-data/RatingComponent.vue b/vue-options-api-demos/grid/live-data/RatingComponent.vue
new file mode 100644
index 00000000..69ca868f
--- /dev/null
+++ b/vue-options-api-demos/grid/live-data/RatingComponent.vue
@@ -0,0 +1,37 @@
+<template>
+  <div
+    :class="[
+      rating === 'Buy' || rating === 'Strong Buy'
+        ? 'green text-bold'
+        : 'red text-bold',
+    ]"
+  >
+    {{ rating }}
+  </div>
+</template>
+
+<script>
+import { trends } from './utils';
+
+export default {
+  props: {
+    dataItem: Object,
+    field: String,
+  },
+  computed: {
+    rating() {
+      const currentTrends = trends(this.$props.dataItem);
+      let value = 'Neutral';
+      return currentTrends.strongNegative
+        ? (value = 'Strong Sell')
+        : currentTrends.negative
+        ? (value = 'Sell')
+        : currentTrends.positive
+        ? (value = 'Buy')
+        : currentTrends.strongPositive
+        ? (value = 'Strong Buy')
+        : (value = 'Neutral');
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/live-data/TickerComponent.vue b/vue-options-api-demos/grid/live-data/TickerComponent.vue
new file mode 100644
index 00000000..74602363
--- /dev/null
+++ b/vue-options-api-demos/grid/live-data/TickerComponent.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <img
+      :alt="`${dataItem.Ticker} icon`"
+      :src="`${dataItem.Image}`"
+    /><span
+      :style="{
+        color: '#4B5FFA',
+        marginLeft: '5px',
+        fontWeight: 'bold',
+      }"
+      >{{ dataItem[field] }}</span
+    >
+  </div>
+</template>
+<script>
+
+export default {
+  props: {
+    dataItem: Object,
+    field: String,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/live-data/VolumeComponent.vue b/vue-options-api-demos/grid/live-data/VolumeComponent.vue
new file mode 100644
index 00000000..59570470
--- /dev/null
+++ b/vue-options-api-demos/grid/live-data/VolumeComponent.vue
@@ -0,0 +1,31 @@
+<template>
+  <span> {{ formattedNumber }} </span>
+</template>
+
+<script>
+import { provideIntlService } from '@progress/kendo-vue-intl';
+import { nFormatter, trends } from './utils';
+
+export default {
+  inject: {
+    kendoIntlService: { default: null },
+  },
+  props: {
+    dataItem: Object,
+  },
+  computed: {
+    formattedNumber: function () {
+      return provideIntlService(this).formatNumber(this.dataItem.Price, 'n5');
+    },
+  },
+  props: {
+    dataItem: Object,
+    field: String,
+  },
+  computed: {
+    formattedNumber: function () {
+      return nFormatter(this.dataItem[this.field]);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/live-data/financial-data.js b/vue-options-api-demos/grid/live-data/financial-data.js
new file mode 100644
index 00000000..3b068f4e
--- /dev/null
+++ b/vue-options-api-demos/grid/live-data/financial-data.js
@@ -0,0 +1,319 @@
+const eighteenCImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/grid/data-binding/18C.png';
+const bitcoinImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/grid/data-binding/Bitcoin.png';
+const busdImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/grid/data-binding/BUSD.png';
+const ethImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/grid/data-binding/ETHERIUM.png';
+const eurImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/grid/data-binding/EUR.png';
+const gbpImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/grid/data-binding/GBP.png';
+const inchImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/grid/data-binding/INCH.png';
+const oxImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/grid/data-binding/OX.png';
+const shibImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/grid/data-binding/SHIB.png';
+const tetherusImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/grid/data-binding/TETHERUS.png';
+const usdImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/grid/data-binding/USD.png';
+const xecImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/grid/data-binding/XEC.png';
+
+export const MOCKFINANCEDATA = [
+  {
+    IndGrou: 'Airlines',
+    IndSect: 'Consumer, Cyclical',
+    IndSubg: 'Airlines',
+    SecType: 'PUBLIC',
+    CpnTyp: 'FIXED',
+    IssuerN: 'AMERICAN AIRLINES GROUP',
+    Moodys: 'WR',
+    Fitch: 'N.A.',
+    DBRS: 'N.A.',
+    CollatT: 'NEW MONEY',
+    Curncy: 'USD',
+    Security: '001765866 Pfd',
+    sector: 'Pfd',
+    CUSIP: '1765866',
+    Cpn: '7.875',
+    Maturity: '7/13/1939',
+    KRD_3YR: 0.00006,
+    RISK_COUNTRY: '',
+    MUNI_SECTOR: '',
+    ZV_SPREAD: 28.302,
+    KRD_5YR: 0,
+    KRD_1YR: -0.00187,
+    PD_WALA: null,
+  },
+];
+export const DATA = [
+  {
+    Ticker: 'OX',
+    Image: oxImage,
+    Spread: 0.01,
+    'Open Price': 1.10345,
+    Price: 1.10345,
+    Buy: 1.10445,
+    Sell: 1.10245,
+    Change: -0.3683,
+    'Change(%)': -0.0287,
+    Volume: 48387,
+    'High(D)': 1.10545,
+    'Low(D)': 1.10145,
+    'High(Y)': 1.10545,
+    'Low(Y)': 1.10145,
+    'Start(Y)': 1.10245,
+    'Change On Year(%)': 8.8502,
+  },
+  {
+    Ticker: 'USD',
+    Image: usdImage,
+    Type: 'Silver',
+    Spread: 0.01,
+    'Open Price': 17.43,
+    Price: 17.42,
+    Buy: 17.43,
+    Sell: 17.43,
+    Change: -0.01,
+    'Change(%)': -0.0574,
+    Volume: 11720,
+    'High(D)': 17.51,
+    'Low(D)': 17.37,
+    'High(Y)': 18.06,
+    'Low(Y)': 13.73,
+    'Start(Y)': 15.895,
+    'Change On Year(%)': 9.5942,
+  },
+  {
+    Ticker: 'SHIB',
+    Image: shibImage,
+    Type: 'Copper',
+    Spread: 0.02,
+    'Open Price': 2.123,
+    Price: 2.113,
+    Buy: 2.123,
+    Sell: 2.123,
+    Change: -0.01,
+    'Change(%)': -0.471,
+    Volume: 28819,
+    'High(D)': 2.16,
+    'Low(D)': 2.11,
+    'High(Y)': 2.94,
+    'Low(Y)': 1.96,
+    'Start(Y)': 2.45,
+    'Change On Year(%)': -13.7551,
+  },
+  {
+    Ticker: 'TETHERUS',
+    Image: tetherusImage,
+    Type: 'Platinum',
+    Spread: 0.01,
+    'Open Price': 1071.6,
+    Price: 1071.0993,
+    Buy: 1071.0943,
+    Sell: 1071.1043,
+    Change: -0.5007,
+    'Change(%)': -0.0467,
+    Volume: 3039,
+    'High(D)': 1081.2,
+    'Low(D)': 1070.5,
+    'High(Y)': 1120.6,
+    'Low(Y)': 812.4,
+    'Start(Y)': 966.5,
+    'Change On Year(%)': 10.8225,
+  },
+  {
+    Ticker: 'XEC',
+    Image: xecImage,
+    Type: 'Palladium',
+    Spread: 0.01,
+    'Open Price': 600.55,
+    Price: 601.0005,
+    Buy: 600.9955,
+    Sell: 601.0055,
+    Change: 0.4505,
+    'Change(%)': 0.075,
+    Volume: 651,
+    'High(D)': 607.2,
+    'Low(D)': 598.4,
+    'High(Y)': 690,
+    'Low(Y)': 458.6,
+    'Start(Y)': 574.3,
+    'Change On Year(%)': 4.6492,
+  },
+  {
+    Ticker: '18C',
+    Image: eighteenCImage,
+    Type: 'Oil',
+    Spread: 0.015,
+    'Open Price': 45.54,
+    Price: 45.7899,
+    Buy: 45.7824,
+    Sell: 45.7974,
+    Change: 0.2499,
+    'Change(%)': 0.5487,
+    Volume: 107196,
+    'High(D)': 45.94,
+    'Low(D)': 45.0,
+    'High(Y)': 65.28,
+    'Low(Y)': 30.79,
+    'Start(Y)': 48.035,
+    'Change On Year(%)': -4.6739,
+  },
+  {
+    Ticker: 'BITCOIN',
+    Image: bitcoinImage,
+    Type: 'Brent',
+    Spread: 0.01,
+    'Open Price': 46.06,
+    Price: 46.05,
+    Buy: 46.06,
+    Sell: 46.06,
+    Change: -0.01,
+    'Change(%)': -0.0217,
+    Volume: 59818,
+    'High(D)': 46.48,
+    'Low(D)': 45.6,
+    'High(Y)': 71.14,
+    'Low(Y)': 30.02,
+    'Start(Y)': 50.58,
+    'Change On Year(%)': -8.9561,
+  },
+  {
+    Ticker: 'ETHERIUM',
+    Image: ethImage,
+    Type: 'Natural Gas',
+    Spread: 0.02,
+    'Open Price': 2.094,
+    Price: 2.104,
+    Buy: 2.094,
+    Sell: 2.094,
+    Change: 0.01,
+    'Change(%)': 0.4776,
+    Volume: 2783,
+    'High(D)': 2.11,
+    'Low(D)': 2.09,
+    'High(Y)': 3.2,
+    'Low(Y)': 1.84,
+    'Start(Y)': 2.52,
+    'Change On Year(%)': -16.5079,
+  },
+  {
+    Ticker: 'INCH',
+    Image: inchImage,
+    Type: 'RBOB Gas',
+    Spread: 0.015,
+    'Open Price': 1.5086,
+    Price: 1.9532,
+    Buy: 1.9457,
+    Sell: 1.9607,
+    Change: 0.4446,
+    'Change(%)': 29.4686,
+    Volume: 2646,
+    'High(D)': 1.9532,
+    'Low(D)': 1.5,
+    'High(Y)': 2.05,
+    'Low(Y)': 1.15,
+    'Start(Y)': 1.6,
+    'Change On Year(%)': 22.0727,
+  },
+  {
+    Ticker: 'BUSD',
+    Image: busdImage,
+    Type: 'Diesel',
+    Spread: 0.015,
+    'Open Price': 1.3474,
+    Price: 1.3574,
+    Buy: 1.3474,
+    Sell: 1.3474,
+    Change: 0.01,
+    'Change(%)': 0.7422,
+    Volume: 2971,
+    'High(D)': 1.36,
+    'Low(D)': 1.34,
+    'High(Y)': 2.11,
+    'Low(Y)': 0.92,
+    'Start(Y)': 1.515,
+    'Change On Year(%)': -10.4026,
+  },
+  {
+    Ticker: 'GBP',
+    Image: gbpImage,
+    Type: 'Ethanol',
+    Spread: 0.01,
+    'Open Price': 1.512,
+    Price: 2.7538,
+    Buy: 2.7488,
+    Sell: 2.7588,
+    Change: 1.2418,
+    'Change(%)': 82.1323,
+    Volume: 14,
+    'High(D)': 2.7538,
+    'Low(D)': 1.1168,
+    'High(Y)': 2.7538,
+    'Low(Y)': 1.1168,
+    'Start(Y)': 1.475,
+    'Change On Year(%)': 86.7011,
+  },
+  {
+    Ticker: 'EUR',
+    Image: eurImage,
+    Type: 'Uranium',
+    Spread: 0.02,
+    'Open Price': 27.55,
+    Price: 27.58,
+    Buy: 27.55,
+    Sell: 27.55,
+    Change: 0.03,
+    'Change(%)': 0.1089,
+    Volume: 12,
+    'High(D)': 27.55,
+    'Low(D)': 27.55,
+    'High(Y)': 29.32,
+    'Low(Y)': 21.28,
+    'Start(Y)': 25.3,
+    'Change On Year(%)': 9.0119,
+  },
+];
+export class FinancialData {
+  generateData = (count) => {
+    const currData = [];
+
+    for (let i = 0; i < count; i++) {
+      const dataObj = Object.assign({}, DATA[i]);
+
+      for (const mockData of MOCKFINANCEDATA) {
+        for (const prop in mockData) {
+          if (mockData.hasOwnProperty(prop)) {
+            dataObj[prop] = mockData[prop];
+          }
+        }
+      }
+
+      dataObj.ID = i;
+      this.randomizeObjectData(dataObj);
+      currData.push(dataObj);
+    }
+
+    return currData;
+  };
+  randomizeObjectData = (dataObj) => {
+    const changeP = 'Change(%)';
+    const res = this.generateNewPrice(dataObj.Price);
+    dataObj.Change = res.Price - dataObj.Price;
+    dataObj.Price = res.Price;
+    dataObj[changeP] = res.ChangePercent;
+  };
+  generateNewPrice = (oldPrice) => {
+    const rnd = parseFloat(Math.random().toFixed(2));
+    const volatility = 2;
+    let newPrice = 0;
+    let changePercent = 2 * volatility * rnd;
+
+    if (changePercent > volatility) {
+      changePercent -= 2 * volatility;
+    }
+
+    const changeAmount = oldPrice * (changePercent / 100);
+    newPrice = oldPrice + changeAmount;
+    const result = {
+      Price: 0,
+      ChangePercent: 0,
+    };
+    result.Price = parseFloat(newPrice.toFixed(2));
+    result.ChangePercent = parseFloat(changePercent.toFixed(2));
+    return result;
+  };
+}
diff --git a/vue-options-api-demos/grid/live-data/main.js b/vue-options-api-demos/grid/live-data/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/live-data/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/live-data/main.vue b/vue-options-api-demos/grid/live-data/main.vue
new file mode 100644
index 00000000..59e3abfd
--- /dev/null
+++ b/vue-options-api-demos/grid/live-data/main.vue
@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <div :style="{ margin: '-30px -30px 30px -30px' }">
+      <div :style="{ display: 'flex', justifyContent: 'center' }">
+        <span
+          class="k-color-primary"
+          :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+          >Configurator</span
+        >
+      </div>
+      <div
+        class="example-config"
+        :style="{
+          display: 'flex',
+          flexWrap: 'wrap',
+        }"
+      >
+        <div>
+          <b>Select data refresh rate:</b>
+          <radiogroup
+            :data-items="radioGroupItems"
+            :value="radiogroupValue"
+            @change="radioChange"
+          />
+        </div>
+      </div>
+    </div>
+    <grid :grid-data="data"></grid>
+  </div>
+</template>
+
+<script>
+import { RadioGroup } from '@progress/kendo-vue-inputs';
+import Grid from './Grid.vue';
+import { FinancialData } from './financial-data';
+import { updateRandomPrices } from './services';
+
+export default {
+  components: {
+    Grid: Grid,
+    radiogroup: RadioGroup,
+  },
+  data() {
+    return {
+      data: [],
+      intervalRef: null,
+      radiogroupValue: 50,
+      radioGroupItems: [
+        {
+          label: '1000 milliseconds',
+          value: 1000,
+        },
+        {
+          label: '500 milliseconds',
+          value: 500,
+        },
+        {
+          label: '50 milliseconds',
+          value: 50,
+        },
+
+        {
+          label: '1 millisecond',
+          value: 1,
+        },
+        {
+          label: '2000 milliseconds',
+          value: 2000,
+        },
+      ],
+    };
+  },
+  created() {
+    this.startDataGeneration(this.radiogroupValue);
+  },
+  methods: {
+    radioChange(e) {
+      this.radiogroupValue = e.value;
+      this.startDataGeneration(this.radiogroupValue);
+    },
+    startDataGeneration() {
+      this.dataReset();
+      this.startLiveUpdate(this.radiogroupValue);
+    },
+    dataReset(volume = 10) {
+      clearInterval(this.intervalRef);
+      const financialData = new FinancialData();
+      this.data = financialData.generateData(volume);
+    },
+    startLiveUpdate(interval) {
+      clearInterval(this.intervalRef);
+      this.intervalRef = setInterval(() => {
+        this.data = updateRandomPrices(this.data);
+      }, interval);
+    },
+  },
+};
+</script>
+
+<style></style>
diff --git a/vue-options-api-demos/grid/live-data/services.js b/vue-options-api-demos/grid/live-data/services.js
new file mode 100644
index 00000000..0ba85ee9
--- /dev/null
+++ b/vue-options-api-demos/grid/live-data/services.js
@@ -0,0 +1,52 @@
+export const updateRandomPrices = (data) => {
+  const newData = data.slice();
+
+  for (
+    let i = Math.round(Math.random() * 10);
+    i < newData.length;
+    i += Math.round(Math.random() * 10)
+  ) {
+    randomizeObjectData(newData[i]);
+  }
+
+  return newData;
+};
+export const updateAllPrices = (data) => {
+  const newData = data.slice();
+
+  for (const dataRow of newData) {
+    randomizeObjectData(dataRow);
+  }
+
+  return newData;
+};
+export const randomizeObjectData = (dataObj) => {
+  const changeP = 'Change(%)';
+  const res = generateNewPrice(dataObj.Price);
+  dataObj.Change = res.Price - dataObj.Price;
+  dataObj.Price = res.Price;
+  dataObj[changeP] = res.ChangePercent;
+};
+export const generateNewPrice = (oldPrice) => {
+  let rnd = Math.random();
+  rnd = Math.round(rnd * 100) / 100;
+  const volatility = 2;
+  let newPrice = 0;
+  let changePercent = 2 * volatility * rnd;
+
+  if (changePercent > volatility) {
+    changePercent -= 2 * volatility;
+  }
+
+  const changeAmount = oldPrice * (changePercent / 100);
+  newPrice = oldPrice + changeAmount;
+  newPrice = Math.round(newPrice * 100) / 100;
+  const result = {
+    Price: 0,
+    ChangePercent: 0,
+  };
+  changePercent = Math.round(changePercent * 100) / 100;
+  result.Price = newPrice;
+  result.ChangePercent = changePercent;
+  return result;
+};
diff --git a/vue-options-api-demos/grid/live-data/trends.js b/vue-options-api-demos/grid/live-data/trends.js
new file mode 100644
index 00000000..74334aa7
--- /dev/null
+++ b/vue-options-api-demos/grid/live-data/trends.js
@@ -0,0 +1,18 @@
+export const negative = (rowData) => {
+  return rowData['Change(%)'] < 0;
+};
+export const positive = (rowData) => {
+  return rowData['Change(%)'] > 0;
+};
+export const changeNegative = (rowData) => {
+  return rowData['Change(%)'] < 0 && rowData['Change(%)'] > -1;
+};
+export const changePositive = (rowData) => {
+  return rowData['Change(%)'] > 0 && rowData['Change(%)'] < 1;
+};
+export const strongPositive = (rowData) => {
+  return rowData['Change(%)'] >= 1;
+};
+export const strongNegative = (rowData) => {
+  return rowData['Change(%)'] <= -1;
+};
diff --git a/vue-options-api-demos/grid/live-data/utils.js b/vue-options-api-demos/grid/live-data/utils.js
new file mode 100644
index 00000000..2d138a89
--- /dev/null
+++ b/vue-options-api-demos/grid/live-data/utils.js
@@ -0,0 +1,60 @@
+import {
+  changeNegative,
+  changePositive,
+  negative,
+  positive,
+  strongNegative,
+  strongPositive,
+} from './trends';
+export const trends = (dataItem) => {
+  return {
+    changeNegative: changeNegative(dataItem),
+    changePositive: changePositive(dataItem),
+    negative: negative(dataItem),
+    positive: positive(dataItem),
+    strongNegative: strongNegative(dataItem),
+    strongPositive: strongPositive(dataItem),
+  };
+};
+export const nFormatter = (num) => {
+  const lookup = [
+    {
+      value: 1,
+      symbol: '',
+    },
+    {
+      value: 1e3,
+      symbol: 'K',
+    },
+    {
+      value: 1e6,
+      symbol: 'M',
+    },
+    {
+      value: 1e9,
+      symbol: 'G',
+    },
+    {
+      value: 1e12,
+      symbol: 'T',
+    },
+    {
+      value: 1e15,
+      symbol: 'P',
+    },
+    {
+      value: 1e18,
+      symbol: 'E',
+    },
+  ];
+  const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
+  let item = lookup
+    .slice()
+    .reverse()
+    .find(function (item) {
+      return num >= item.value;
+    });
+  return item
+    ? (num / item.value).toFixed(3).replace(rx, '$1') + item.symbol
+    : '0';
+};
diff --git a/vue-options-api-demos/grid/paging/basic/main.js b/vue-options-api-demos/grid/paging/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/paging/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/paging/basic/main.vue b/vue-options-api-demos/grid/paging/basic/main.vue
new file mode 100644
index 00000000..15d4eff4
--- /dev/null
+++ b/vue-options-api-demos/grid/paging/basic/main.vue
@@ -0,0 +1,88 @@
+<template>
+  <Grid
+    :style="{ height: '450px' }"
+    :data-items="result"
+    :pageable="true"
+    :skip="skip"
+    :take="take"
+    :total="total"
+    :columns="columns"
+    @pagechange="pageChangeHandler"
+    :loader="loader"
+  >
+  </Grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+
+export default {
+  components: {
+    Grid: Grid,
+  },
+  data: function () {
+    return {
+      loader: false,
+      dataItems: [],
+      skip: 0,
+      take: 10,
+      columns: [
+        { field: 'ProductID' },
+        { field: 'ProductName', title: 'Product Name' },
+        { field: 'UnitPrice', title: 'Unit Price' },
+      ],
+    };
+  },
+  computed: {
+    result: {
+      get: function () {
+        return this.dataItems.slice(this.skip, this.take + this.skip);
+      },
+    },
+    total() {
+      return this.dataItems ? this.dataItems.length : 0;
+    },
+  },
+  methods: {
+    pageChangeHandler: function (event) {
+      this.loader = true;
+      // The idea behind using the following setTimeout method is to
+      // demonstrate how we can show a loader while fetching data.
+      // In a real-life scenarios with remote data binding, the 'loader'
+      // property should be updated before making a server request
+      // and after the request completes.
+      setTimeout(() => {
+        this.loader = false;
+        this.skip = event.page.skip;
+        this.take = event.page.take;
+      }, 300);
+    },
+    createRandomData(count) {
+      const productNames = [
+        'Chai',
+        'Chang',
+        'Syrup',
+        'Apple',
+        'Orange',
+        'Banana',
+        'Lemon',
+        'Pineapple',
+        'Tea',
+        'Milk',
+      ];
+      const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120];
+
+      return Array(count)
+        .fill({})
+        .map((_, idx) => ({
+          ProductID: idx + 1,
+          ProductName:
+            productNames[Math.floor(Math.random() * productNames.length)],
+          UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)],
+        }));
+    },
+  },
+  mounted() {
+    this.dataItems = this.createRandomData(1000);
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/paging/types/main.js b/vue-options-api-demos/grid/paging/types/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/paging/types/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/paging/types/main.vue b/vue-options-api-demos/grid/paging/types/main.vue
new file mode 100644
index 00000000..0adf76e3
--- /dev/null
+++ b/vue-options-api-demos/grid/paging/types/main.vue
@@ -0,0 +1,166 @@
+<template>
+  <div>
+    <div class="example-config row">
+      <div class="col-md-6">
+        <dl>
+          <dt>Pager type:</dt>
+          <dd>
+            <RadioGroup
+              :data-items="pagerTypes"
+              v-model="pagerType"
+              :layout="'horizontal'"
+            />
+          </dd>
+        </dl>
+        <dl>
+          <dt>Max. number of buttons:</dt>
+          <dd>
+            <NumericTextBox
+              class="k-textbox"
+              :style="{ width: '200px' }"
+              v-model="pagerButtons"
+            />
+          </dd>
+        </dl>
+      </div>
+      <div class="col-md-6 row">
+        <div class="col-md-12">
+          <Checkbox :label="'Show info'" v-model="pagerInfo" />
+        </div>
+        <div class="col-md-12">
+          <Checkbox :label="'Show page sizes'" v-model="pagerSizes" />
+        </div>
+        <div class="col-md-12">
+          <Checkbox
+            :label="'Show previous / next buttons'"
+            v-model="pagePrevNext"
+          />
+        </div>
+      </div>
+    </div>
+    <Grid
+      :style="{ height: '340px' }"
+      :data-items="items"
+      :skip="skip"
+      :take="take"
+      :total="total"
+      :pageable="pageable"
+      :page-size="pageSize"
+      @pagechange="pageChangeHandler"
+      :columns="columns"
+      :loader="loader"
+    >
+    </Grid>
+  </div>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import {
+  NumericTextBox,
+  RadioGroup,
+  Checkbox,
+} from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    Grid: Grid,
+    NumericTextBox,
+    RadioGroup,
+    Checkbox,
+  },
+  data: function () {
+    return {
+      loader: false,
+      dataItems: [],
+      pagerType: 'numeric',
+      pagerButtons: 5,
+      pagerInfo: true,
+      pagerSizes: true,
+      pagePrevNext: true,
+      skip: 0,
+      take: 10,
+      pageSize: 10,
+      pageSizeValue: 10,
+      columns: [
+        { field: 'ProductID' },
+        { field: 'ProductName', title: 'Product Name' },
+        { field: 'UnitPrice', title: 'Unit Price' },
+      ],
+      pagerTypes: [
+        {
+          label: 'Numeric',
+          value: 'numeric',
+        },
+        {
+          label: 'Input',
+          value: 'input',
+        },
+      ],
+    };
+  },
+  computed: {
+    pageable() {
+      return {
+        buttonCount: this.pagerButtons,
+        info: this.pagerInfo,
+        type: this.pagerType,
+        pageSizes: this.pagerSizes ? [10, 15, 20, 'all'] : undefined,
+        previousNext: this.pagePrevNext,
+        pageSizeValue: this.pageSizeValue,
+      };
+    },
+    items: {
+      get: function () {
+        return this.dataItems.slice(this.skip, this.take + this.skip);
+      },
+    },
+    total() {
+      return this.dataItems ? this.dataItems.length : 0;
+    },
+  },
+  methods: {
+    pageChangeHandler: function (event) {
+      this.loader = true;
+      // The idea behind using the following setTimeout method is to
+      // demonstrate how we can show a loader while fetching data.
+      // In a real-life scenarios with remote data binding, the 'loader'
+      // property should be updated before making a server request
+      // and after the request completes.
+      setTimeout(() => {
+        this.loader = false;
+        this.skip = event.page.skip;
+        this.take = event.event.value === 'all' ? 1000 : event.page.take;
+
+        this.pageSizeValue = event.event.value;
+      }, 300);
+    },
+    createRandomData(count) {
+      const productNames = [
+        'Chai',
+        'Chang',
+        'Syrup',
+        'Apple',
+        'Orange',
+        'Banana',
+        'Lemon',
+        'Pineapple',
+        'Tea',
+        'Milk',
+      ];
+      const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120];
+
+      return Array(count)
+        .fill({})
+        .map((_, idx) => ({
+          ProductID: idx + 1,
+          ProductName:
+            productNames[Math.floor(Math.random() * productNames.length)],
+          UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)],
+        }));
+    },
+  },
+  mounted() {
+    this.dataItems = this.createRandomData(1000);
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/pdf/all-pages/main.js b/vue-options-api-demos/grid/pdf/all-pages/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/pdf/all-pages/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/pdf/all-pages/main.vue b/vue-options-api-demos/grid/pdf/all-pages/main.vue
new file mode 100644
index 00000000..c5be79f6
--- /dev/null
+++ b/vue-options-api-demos/grid/pdf/all-pages/main.vue
@@ -0,0 +1,83 @@
+<template>
+<div>
+     <kbutton @click="exportPDFWithComp">Export pdf via a component</kbutton>
+    <pdfexport ref="gridPdfExport" :margin="'1cm'">
+        <Grid
+            :data-items="items"
+            :skip= "skip"
+            :take="take"
+            :total="total"
+            :pageable="pageable"
+            :page-size="pageSize"
+            @pagechange="pageChangeHandler"
+            :columns = "columns">
+        </Grid>
+    </pdfexport>
+</div>
+</template>
+<script>
+import { GridPdfExport } from '@progress/kendo-vue-pdf';
+import { Grid } from '@progress/kendo-vue-grid';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'Grid': Grid,
+        'pdfexport': GridPdfExport,
+        'kbutton': Button
+    },
+    data: function () {
+        return {
+            skip: 0,
+            take: 10,
+            products: [],
+            pageSize: 10,
+            pageable: {
+                buttonCount: 5,
+                info: true,
+                type: 'numeric',
+                pageSizes: true,
+                previousNext: true
+            },
+            columns: [
+                { field: 'ProductID'},
+                { field: 'ProductName', title: 'Product Name' },
+                { field: 'UnitPrice', title: 'Unit Price' }
+            ]
+        };
+    },
+    computed: {
+        items: {
+            get: function() {
+                return this.products.slice(this.skip, this.take + this.skip);
+            }
+        },
+        total () {
+            return this.products ? this.products.length : 0;
+        }
+    },
+    methods: {
+        exportPDFWithComp: function() {
+            (this.$refs.gridPdfExport).save(this.products);
+        },
+        pageChangeHandler: function(event) {
+            this.skip = event.page.skip;
+            this.take = event.page.take;
+        },
+        createRandomData(count) {
+            const productNames = ['Chai', 'Chang', 'Syrup', 'Apple', 'Orange', 'Banana', 'Lemon', 'Pineapple', 'Tea', 'Milk'];
+            const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120]
+
+            return Array(count).fill({}).map((_, idx) => ({
+                ProductID: idx + 1,
+                ProductName: productNames[Math.floor(Math.random() * productNames.length)],
+                UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)]
+            }));
+        }
+    },
+    mounted() {
+        this.products = this.createRandomData(1000);
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/pdf/basic/main.js b/vue-options-api-demos/grid/pdf/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/pdf/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/pdf/basic/main.vue b/vue-options-api-demos/grid/pdf/basic/main.vue
new file mode 100644
index 00000000..133c53d7
--- /dev/null
+++ b/vue-options-api-demos/grid/pdf/basic/main.vue
@@ -0,0 +1,83 @@
+<template>
+<div>
+     <kbutton @click="exportPDFWithComp">Export pdf via a component</kbutton>
+    <pdfexport ref="gridPdfExport">
+        <grid
+            :data-items="items"
+            :skip= "skip"
+            :take="take"
+            :total="total"
+            :pageable="pageable"
+            :page-size="pageSize"
+            @pagechange="pageChangeHandler"
+            :columns = "columns">
+        </grid>
+    </pdfexport>
+</div>
+</template>
+<script>
+import { GridPdfExport } from '@progress/kendo-vue-pdf';
+import { Grid } from '@progress/kendo-vue-grid';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'grid': Grid,
+        'pdfexport': GridPdfExport,
+      'kbutton': Button
+    },
+   data: function () {
+        return {
+            skip: 0,
+            take: 10,
+            products: [],
+            pageSize: 10,
+            pageable: {
+                buttonCount: 5,
+                info: true,
+                type: 'numeric',
+                pageSizes: true,
+                previousNext: true
+            },
+            columns: [
+                { field: 'ProductID'},
+                { field: 'ProductName', title: 'Product Name' },
+                { field: 'UnitPrice', title: 'Unit Price' }
+            ]
+        };
+    },
+    computed: {
+        items: {
+            get: function() {
+                return this.products.slice(this.skip, this.take + this.skip);
+            }
+        },
+        total () {
+            return this.products ? this.products.length : 0;
+        }
+    },
+    methods: {
+        exportPDFWithComp: function() {
+            (this.$refs.gridPdfExport).save(this.items);
+        },
+        pageChangeHandler: function(event) {
+            this.skip = event.page.skip;
+            this.take = event.page.take;
+        },
+        createRandomData(count) {
+            const productNames = ['Chai', 'Chang', 'Syrup', 'Apple', 'Orange', 'Banana', 'Lemon', 'Pineapple', 'Tea', 'Milk'];
+            const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120]
+
+            return Array(count).fill({}).map((_, idx) => ({
+                ProductID: idx + 1,
+                ProductName: productNames[Math.floor(Math.random() * productNames.length)],
+                UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)]
+            }));
+        }
+    },
+    mounted() {
+        this.products = this.createRandomData(1000);
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/pdf/custom-columns/main.js b/vue-options-api-demos/grid/pdf/custom-columns/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/pdf/custom-columns/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/pdf/custom-columns/main.vue b/vue-options-api-demos/grid/pdf/custom-columns/main.vue
new file mode 100644
index 00000000..a846c981
--- /dev/null
+++ b/vue-options-api-demos/grid/pdf/custom-columns/main.vue
@@ -0,0 +1,101 @@
+<template>
+    <div>
+        <pdfexport ref="gridPdfExport">
+            <grid
+                :data-items="items"
+                :skip= "skip"
+                :take="take"
+                :total="total"
+                :pageable="pageable"
+                :page-size="pageSize"
+                @pagechange="pageChangeHandler"
+                :columns = "columns">
+                <toolbar>
+                    <kbutton @click="exportPDFWithComp" :theme-color="'primary'">Export to PDF the first two columns(Current page)</kbutton>&nbsp;
+                    <kbutton @click="exportPDFWithComp('all')" :theme-color="'primary'">Export to PDF the first two columns(All Grid data)</kbutton>&nbsp;
+                </toolbar>
+            </grid>
+        </pdfexport>
+    </div>
+</template>
+<script>
+import { GridPdfExport } from '@progress/kendo-vue-pdf';
+import { Grid, GridToolbar  } from '@progress/kendo-vue-grid';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'grid': Grid,
+        'pdfexport': GridPdfExport,
+        'toolbar': GridToolbar,
+        'kbutton': Button
+    },
+   data: function () {
+        return {
+            skip: 0,
+            take: 10,
+            products: [],
+            pageSize: 10,
+            pageable: {
+                buttonCount: 5,
+                info: true,
+                type: 'numeric',
+                pageSizes: true,
+                previousNext: true
+            },
+            columns: [
+                { field: 'ProductID'},
+                { field: 'ProductName', title: 'Product Name' },
+                { field: 'UnitPrice', title: 'Unit Price' },
+                { field: 'Discontinued', title: 'Discontinued' }
+            ],
+            columnsToExport: [
+                { field: 'ProductID'},
+                { field: 'ProductName', title: 'Product Name' },
+            ]
+        };
+    },
+    computed: {
+        items: {
+            get: function() {
+                return this.products.slice(this.skip, this.take + this.skip);
+            }
+        },
+        total () {
+            return this.products ? this.products.length : 0;
+        }
+    },
+    methods: {
+        exportPDFWithComp: function(pagesToExport) {
+            const defaultColumns = this.columns;
+
+            this.columns = this.columnsToExport;
+
+            const itemsToExport = pagesToExport!=="all" ? this.items : this.products;
+
+            (this.$refs.gridPdfExport).save(itemsToExport);
+            this.columns = defaultColumns;
+        },
+        pageChangeHandler: function(event) {
+            this.skip = event.page.skip;
+            this.take = event.page.take;
+        },
+        createRandomData(count) {
+            const productNames = ['Chai', 'Chang', 'Syrup', 'Apple', 'Orange', 'Banana', 'Lemon', 'Pineapple', 'Tea', 'Milk'];
+            const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120];
+            const discontinued = [true, false];
+
+            return Array(count).fill({}).map((_, idx) => ({
+                ProductID: idx + 1,
+                ProductName: productNames[Math.floor(Math.random() * productNames.length)],
+                UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)],
+                Discontinued: discontinued[Math.floor(Math.random() * discontinued.length)]
+            }));
+        }
+    },
+    mounted() {
+        this.products = this.createRandomData(1000);
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/pdf/custom-fonts/main.js b/vue-options-api-demos/grid/pdf/custom-fonts/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/pdf/custom-fonts/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/pdf/custom-fonts/main.vue b/vue-options-api-demos/grid/pdf/custom-fonts/main.vue
new file mode 100644
index 00000000..115b7f6b
--- /dev/null
+++ b/vue-options-api-demos/grid/pdf/custom-fonts/main.vue
@@ -0,0 +1,84 @@
+<template>
+<div>
+     <kbutton @click="exportPDFWithComp">Export pdf via a component</kbutton>
+    <pdfexport ref="gridPdfExport">
+        <Grid
+            :data-items="items"
+            :skip= "skip"
+            :take="take"
+            :total="total"
+            :pageable="pageable"
+            :page-size="pageSize"
+            @pagechange="pageChangeHandler"
+            :columns="columns">
+        </Grid>
+    </pdfexport>
+</div>
+</template>
+<script>
+import './styles.css';
+import { GridPdfExport } from '@progress/kendo-vue-pdf';
+import { Grid } from '@progress/kendo-vue-grid';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'Grid': Grid,
+        'pdfexport': GridPdfExport,
+      'kbutton': Button
+    },
+  data: function () {
+        return {
+            skip: 0,
+            take: 10,
+            products: [],
+            pageSize: 10,
+            pageable: {
+                buttonCount: 5,
+                info: true,
+                type: 'numeric',
+                pageSizes: true,
+                previousNext: true
+            },
+            columns: [
+                { field: 'ProductID'},
+                { field: 'ProductName', title: 'Product Name' },
+                { field: 'UnitPrice', title: 'Unit Price' }
+            ]
+        };
+    },
+    computed: {
+        items: {
+            get: function() {
+                return this.products.slice(this.skip, this.take + this.skip);
+            }
+        },
+        total () {
+            return this.products ? this.products.length : 0;
+        }
+    },
+    methods: {
+        exportPDFWithComp: function() {
+            (this.$refs.gridPdfExport).save(this.items);
+        },
+        pageChangeHandler: function(event) {
+            this.skip = event.page.skip;
+            this.take = event.page.take;
+        },
+        createRandomData(count) {
+            const productNames = ['NuNuCa Nuß-Nougat-Creme', 'Guaraná Fantástica', 'Tunnbröd', 'Apple', 'Orange', 'Banana', 'Lemon', 'Pineapple', 'Tea', 'Milk'];
+            const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120]
+
+            return Array(count).fill({}).map((_, idx) => ({
+                ProductID: idx + 1,
+                ProductName: productNames[Math.floor(Math.random() * productNames.length)],
+                UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)]
+            }));
+        }
+    },
+    mounted() {
+        this.products = this.createRandomData(1000);
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/pdf/custom-fonts/styles.css b/vue-options-api-demos/grid/pdf/custom-fonts/styles.css
new file mode 100644
index 00000000..77abc1f8
--- /dev/null
+++ b/vue-options-api-demos/grid/pdf/custom-fonts/styles.css
@@ -0,0 +1,38 @@
+    /*
+        Use the DejaVu Sans font for displaying and embedding in the PDF file.
+        The standard PDF fonts do not support Unicode characters.
+    */
+    div {
+        font-family: "DejaVu Sans", "Arial", sans-serif;
+        font-size: 12px;
+    }
+
+    /*
+        The examples load the DejaVu Sans from the Kendo UI CDN.
+        Other fonts have to be hosted from your application.
+        The official site of the Deja Vu Fonts project is
+        https://dejavu-fonts.github.io/.
+    */
+    @font-face {
+        font-family: "DejaVu Sans";
+        src: url("https://kendo.cdn.telerik.com/2017.2.621/styles/fonts/DejaVu/DejaVuSans.ttf") format("truetype");
+    }
+
+    @font-face {
+        font-family: "DejaVu Sans";
+        font-weight: bold;
+        src: url("https://kendo.cdn.telerik.com/2017.2.621/styles/fonts/DejaVu/DejaVuSans-Bold.ttf") format("truetype");
+    }
+
+    @font-face {
+        font-family: "DejaVu Sans";
+        font-style: italic;
+        src: url("https://kendo.cdn.telerik.com/2017.2.621/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf") format("truetype");
+    }
+
+    @font-face {
+        font-family: "DejaVu Sans";
+        font-weight: bold;
+        font-style: italic;
+        src: url("https://kendo.cdn.telerik.com/2017.2.621/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf") format("truetype");
+    }
diff --git a/vue-options-api-demos/grid/pdf/fit-content/main.js b/vue-options-api-demos/grid/pdf/fit-content/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/pdf/fit-content/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/pdf/fit-content/main.vue b/vue-options-api-demos/grid/pdf/fit-content/main.vue
new file mode 100644
index 00000000..9a1a9210
--- /dev/null
+++ b/vue-options-api-demos/grid/pdf/fit-content/main.vue
@@ -0,0 +1,86 @@
+<template>
+<div>
+     <kbutton @click="exportPDFWithComp">Export pdf via a component</kbutton>
+    <pdfexport ref="gridPdfExport" :margin="'1cm'" :paper-size="'a4'" :scale="0.5">
+        <Grid
+            :data-items="items"
+            :skip= "skip"
+            :take="take"
+            :total="total"
+            :pageable="pageable"
+            :page-size="pageSize"
+            :columns = "columns"
+            @pagechange="pageChangeHandler">
+        </Grid>
+    </pdfexport>
+</div>
+</template>
+<script>
+import { GridPdfExport } from '@progress/kendo-vue-pdf';
+import { Grid } from '@progress/kendo-vue-grid';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'Grid': Grid,
+        'pdfexport': GridPdfExport,
+      'kbutton': Button
+    },
+  data: function () {
+        return {
+            skip: 0,
+            take: 10,
+            products: [],
+            pageSize: 10,
+            pageable: {
+                buttonCount: 5,
+                info: true,
+                type: 'numeric',
+                pageSizes: true,
+                previousNext: true
+            },
+            columns: [
+                { field: 'ProductID'},
+                { field: 'ProductName', title: 'Product Name' },
+                { field: 'UnitPrice', title: 'Unit Price' }
+            ]
+        };
+    },
+    computed: {
+        items: {
+            get: function() {
+                return this.products.slice(this.skip, this.take + this.skip);
+            }
+        },
+        total () {
+            return this.products ? this.products.length : 0;
+        }
+    },
+    methods: {
+        exportPDFWithComp: function() {
+            (this.$refs.gridPdfExport).save(this.products, this.pdfExported);
+        },
+        pdfExported () {
+            alert("PDF exported!");
+        },
+        pageChangeHandler: function(event) {
+            this.skip = event.page.skip;
+            this.take = event.page.take;
+        },
+        createRandomData(count) {
+            const productNames = ['Chai', 'Chang', 'Syrup', 'Apple', 'Orange', 'Banana', 'Lemon', 'Pineapple', 'Tea', 'Milk'];
+            const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120]
+
+            return Array(count).fill({}).map((_, idx) => ({
+                ProductID: idx + 1,
+                ProductName: productNames[Math.floor(Math.random() * productNames.length)],
+                UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)]
+            }));
+        }
+    },
+    mounted() {
+        this.products = this.createRandomData(1000);
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/pdf/page-template/main.js b/vue-options-api-demos/grid/pdf/page-template/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/pdf/page-template/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/pdf/page-template/main.vue b/vue-options-api-demos/grid/pdf/page-template/main.vue
new file mode 100644
index 00000000..b50bb1f6
--- /dev/null
+++ b/vue-options-api-demos/grid/pdf/page-template/main.vue
@@ -0,0 +1,96 @@
+<template>
+<div>
+     <kbutton @click="exportPDFWithComp">Export pdf via a component</kbutton>
+    <pdfexport ref="gridPdfExport" :margin="'1cm'" :paper-size="'a4'"  :page-template="pageTemplate">
+        <Grid
+            :data-items="items"
+            :skip= "skip"
+            :take="take"
+            :total="total"
+            :pageable="pageable"
+            :page-size="pageSize"
+            @pagechange="pageChangeHandler"
+            :columns = "columns">
+        </Grid>
+    </pdfexport>
+</div>
+</template>
+<script>
+import { markRaw, h } from 'vue';
+import { GridPdfExport } from '@progress/kendo-vue-pdf';
+import { Grid } from '@progress/kendo-vue-grid';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'Grid': Grid,
+        'pdfexport': GridPdfExport,
+        'kbutton': Button
+    },
+  data: function () {
+        return {
+            pageTemplate: markRaw({
+                props: {
+                    pageNum: Number,
+                    totalPages: Number
+                },
+                render: function() {
+                    return h('div',{
+                        style: {position: 'absolute', top: '10px', left: '10px'}
+                    },['Page' + this.$props.pageNum + ' of' + this.$props.totalPages])
+                }
+                // template: `<div style="position: absolute; top: 10px; left: 10px">Page {{pageNum}} of {{totalPages}}</div>`
+            }),
+            skip: 0,
+            take: 10,
+            products: [],
+            pageSize: 10,
+            pageable: {
+                buttonCount: 5,
+                info: true,
+                type: 'numeric',
+                pageSizes: true,
+                previousNext: true
+            },
+            columns: [
+                { field: 'ProductID'},
+                { field: 'ProductName', title: 'Product Name' },
+                { field: 'UnitPrice', title: 'Unit Price' }
+            ]
+        };
+    },
+    computed: {
+        items: {
+            get: function() {
+                return this.products.slice(this.skip, this.take + this.skip);
+            }
+        },
+         total () {
+            return this.products ? this.products.length : 0;
+        }
+    },
+    methods: {
+        exportPDFWithComp: function() {
+            (this.$refs.gridPdfExport).save(this.products);
+        },
+        pageChangeHandler: function(event) {
+            this.skip = event.page.skip;
+            this.take = event.page.take;
+        },
+        createRandomData(count) {
+            const productNames = ['Chai', 'Chang', 'Syrup', 'Apple', 'Orange', 'Banana', 'Lemon', 'Pineapple', 'Tea', 'Milk'];
+            const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120]
+
+            return Array(count).fill({}).map((_, idx) => ({
+                ProductID: idx + 1,
+                ProductName: productNames[Math.floor(Math.random() * productNames.length)],
+                UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)]
+            }));
+        }
+    },
+    mounted() {
+        this.products = this.createRandomData(1000);
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/performance/main.js b/vue-options-api-demos/grid/performance/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/performance/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/performance/main.vue b/vue-options-api-demos/grid/performance/main.vue
new file mode 100644
index 00000000..1ce99570
--- /dev/null
+++ b/vue-options-api-demos/grid/performance/main.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="row">
+    <div class="col m-3">
+      <Button @click="loadItems">Load 100 000 items</Button>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col m-3">
+      Virtual Scrolling
+      <Switch @change="handleSwitchChange" :on-label="''" :off-label="''" />
+      Paging
+    </div>
+  </div>
+  <Grid
+    :key="isPagingOn"
+    :style="{ height: '440px', width: '700px' }"
+    :scrollable="isPagingOn ? 'scrollable' : 'virtual'"
+    :column-virtualization="true"
+    :skip="skip"
+    :take="take"
+    :total="numberOfRows"
+    :data-items="items"
+    :columns="columns"
+    :row-height="40"
+    :pageable="isPagingOn ? pagerSettings : false"
+    @pagechange="pageChange"
+    :sortable="true"
+    @sortchange="sortChange"
+    :sort="sort"
+    @cellclick="cellClick"
+    @rowclick="rowClick"
+    :page-size="10"
+    :edit-field="'inEdit'"
+    :data-item-key="'id'"
+    @itemchange="itemChange"
+  >
+  </Grid>
+</template>
+<script>
+import { Button } from '@progress/kendo-vue-buttons';
+import { Switch } from '@progress/kendo-vue-inputs';
+import { Grid } from '@progress/kendo-vue-grid';
+import { orderBy } from '@progress/kendo-data-query';
+
+export default {
+  components: {
+    Grid,
+    Button,
+    Switch,
+  },
+  data: function () {
+    return {
+      dataItems: [],
+      data: [],
+      numberOfColumns: 100,
+      numberOfRows: 100000,
+      pagerSettings: {
+        info: true,
+        type: 'input',
+        previousNext: true,
+      },
+      columns: [],
+      skip: 0,
+      take: 20,
+      isPagingOn: false,
+      sort: [],
+      items: [],
+    };
+  },
+  created: function () {
+    this.columns = this.createColumns();
+    this.data = this.getData();
+  },
+  methods: {
+    itemChange: function (e) {
+      e.dataItem[e.field] = e.value;
+    },
+    cellClick: function (e) {
+      if (e.dataItem.inEdit && e.field === this.editField) {
+        return;
+      }
+      this.editField = e.field;
+
+      e.dataItem.inEdit = e.field;
+    },
+    rowClick: function (e) {
+      this.items.forEach((d) => {
+        if (d.inEdit) {
+          if (e.dataItem !== d) {
+            d.inEdit = undefined;
+          }
+        }
+      });
+    },
+    loadItems() {
+      this.dataItems = this.data;
+      this.items = this.dataItems.slice(this.skip, this.skip + this.take);
+    },
+    createColumns() {
+      const columns = [
+        {
+          field: 'id',
+          width: '150px',
+          editable: false,
+          locked: true,
+        },
+      ];
+      for (let c = 1; c <= this.numberOfColumns; c++) {
+        columns.push({
+          field: 'Field-' + c.toString(),
+          width: '150px',
+        });
+      }
+      return columns;
+    },
+    pageChange(event) {
+      this.skip = event.page.skip;
+      this.take = event.page.take;
+      this.items = this.dataItems.slice(this.skip, this.skip + this.take);
+    },
+    handleSwitchChange(e) {
+      this.isPagingOn = e.value;
+    },
+    sortChange(e) {
+      this.dataItems = orderBy(this.data, e.sort);
+      this.items = this.dataItems.slice(this.skip, this.skip + this.take);
+
+      this.sort = e.sort;
+    },
+    getData() {
+      const page = [];
+      for (let r = 1; r <= this.numberOfRows; r++) {
+        const row = {
+          id: r,
+        };
+        for (let c = 1; c <= this.numberOfColumns; c++) {
+          row['Field-' + c] = 'R' + r + ':C' + c;
+        }
+        page.push(row);
+      }
+      return page;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/persist-state/ColumnMenu.vue b/vue-options-api-demos/grid/persist-state/ColumnMenu.vue
new file mode 100644
index 00000000..1c5085e2
--- /dev/null
+++ b/vue-options-api-demos/grid/persist-state/ColumnMenu.vue
@@ -0,0 +1,190 @@
+<template>
+    <div>
+      <GridColumnMenuSort
+        :column="column"
+        :sortable="sortable"
+        :sort="sort"
+        @closemenu="closeMenu"
+        @sortchange="sortChange"
+      />
+      <GridColumnMenuFilter
+        :column="column"
+        :filterable="filterable"
+        :filter="filter"
+        @filterfocus="handleFocus"
+        @closemenu="closeMenu"
+        @expandchange="expandChange"
+        @filterchange="filterChange"
+      />
+      <GridColumnMenuItemGroup>
+        <GridColumnMenuItem
+          :title="'Columns'"
+          :icon-class="'k-i-columns'"
+          @menuitemclick="onMenuItemClick"
+        />
+        <GridColumnMenuItemContent :show="columnsExpanded">
+          <div class="k-column-list-wrapper">
+            <form @submit="onSubmit" @reset="onReset">
+              <div class="k-column-list">
+                <div
+                  :key="idx"
+                  class="k-column-list-item"
+                  v-for="(column, idx) in currentColumns"
+                >
+                  <span>
+                    <input
+                      :id="'column-visiblity-show-' + idx"
+                      :class="'k-checkbox k-checkbox-md k-rounded-md'"
+                      :type="'checkbox'"
+                      :readOnly="true"
+                      :disabled="!column.hidden && oneVisibleColumn"
+                      :checked="!column.hidden"
+                      @click="onToggleColumn(idx)"
+                    />
+                    <label
+                      :for="'column-visiblity-show-' + idx"
+                      :class="'k-checkbox-label'"
+                      :style="{ userSelect: 'none' }"
+                    >
+                      {{ column.title }} - {{ idx }}
+                    </label>
+                  </span>
+                </div>
+              </div>
+              <div class="k-columnmenu-actions">
+                <kbutton type="reset">Reset</kbutton>
+                <kbutton :theme-color="'primary'">Save</kbutton>
+              </div>
+            </form>
+          </div>
+        </GridColumnMenuItemContent>
+      </GridColumnMenuItemGroup>
+      <GridColumnMenuItemGroup>
+        <GridColumnMenuItemContent :show="true">
+          <div class="k-column-list-wrapper">
+            <div class="k-column-list">
+              <div
+                @click="columnLockUnlock(true)"
+                :class="['k-column-list-item', $props.locked ? 'k-disabled' : '']"
+              >
+                <span class="k-icon k-i-lock" /> Lock Column
+              </div>
+              <div
+                @click="columnLockUnlock(false)"
+                :class="[
+                  'k-column-list-item',
+                  !$props.locked ? 'k-disabled' : '',
+                ]"
+              >
+                <span class="k-icon k-i-unlock" /> Unlock Column
+              </div>
+            </div>
+          </div>
+        </GridColumnMenuItemContent>
+      </GridColumnMenuItemGroup>
+    </div>
+  </template>
+  <script>
+  import {
+    GridColumnMenuFilter,
+    GridColumnMenuSort,
+    GridColumnMenuItemGroup,
+    GridColumnMenuItemContent,
+    GridColumnMenuItem,
+  } from '@progress/kendo-vue-grid';
+  import { Button } from '@progress/kendo-vue-buttons';
+
+  export default {
+    props: {
+      column: Object,
+      sortable: [Boolean, Object],
+      sort: {
+        type: Array,
+      },
+      filter: Object,
+      filterable: Boolean,
+      locked: Boolean,
+      columns: Array,
+    },
+    data() {
+      return {
+        currentColumns: [],
+        columnsExpanded: false,
+        filterExpanded: false,
+      };
+    },
+    created() {
+      this.$data.currentColumns = this.$props.columns;
+    },
+    components: {
+      GridColumnMenuSort: GridColumnMenuSort,
+      GridColumnMenuFilter: GridColumnMenuFilter,
+      GridColumnMenuItemGroup: GridColumnMenuItemGroup,
+      GridColumnMenuItemContent: GridColumnMenuItemContent,
+      GridColumnMenuItem: GridColumnMenuItem,
+      kbutton: Button,
+    },
+    computed: {
+      oneVisibleColumn() {
+        return this.currentColumns.filter((c) => !c.hidden).length === 1;
+      },
+    },
+    methods: {
+      handleFocus(e) {
+        this.$emit('contentfocus', e);
+      },
+      onToggleColumn(id) {
+        this.currentColumns = this.currentColumns.map((column, idx) => {
+          return idx === id ? { ...column, hidden: !column.hidden } : column;
+        });
+      },
+      onReset(event) {
+        event.preventDefault();
+        const allColumns = this.$props.columns.map((col) => {
+          return {
+            ...col,
+            hidden: false,
+          };
+        });
+
+        this.currentColumns = allColumns;
+        this.onSubmit();
+      },
+      onSubmit(event) {
+        if (event) {
+          event.preventDefault();
+        }
+        this.$emit('columnssubmit', this.currentColumns);
+        this.$emit('closemenu');
+      },
+      onMenuItemClick() {
+        const value = !this.columnsExpanded;
+        this.columnsExpanded = value;
+        this.filterExpanded = value ? false : this.filterExpanded;
+      },
+      onFilterExpandChange(value) {
+        this.filterExpanded = value;
+        this.columnsExpanded = value ? false : this.columnsExpanded;
+      },
+      expandChange() {
+        this.$emit('expandchange');
+      },
+      closeMenu() {
+        this.$emit('closemenu');
+      },
+      filterChange(newDescriptor, e) {
+        this.$emit('filterchange', newDescriptor);
+      },
+      sortChange(newDescriptor, e) {
+        this.$emit('sortchange', newDescriptor);
+      },
+      columnLockUnlock(state) {
+        this.$emit('lockchange', state);
+        this.$emit('closemenu');
+      },
+      columnShowHide(state) {
+        this.$emit('visibilitychange', state);
+      },
+    },
+  };
+  </script>
diff --git a/vue-options-api-demos/grid/persist-state/DetailComponent.vue b/vue-options-api-demos/grid/persist-state/DetailComponent.vue
new file mode 100644
index 00000000..6758ceac
--- /dev/null
+++ b/vue-options-api-demos/grid/persist-state/DetailComponent.vue
@@ -0,0 +1,24 @@
+<template>
+    <div>
+        <section :style='{ width: "200px", float: "left" }'>
+            <p><strong>Street:</strong> {{dataItem.shipAddress.street}}</p>
+            <p><strong>City:</strong> {{dataItem.shipAddress.city}}</p>
+            <p><strong>Country:</strong> {{dataItem.shipAddress.country}}</p>
+            <p><strong>Postal Code:</strong> {{dataItem.shipAddress.postalCode}}</p>
+        </section>
+        <Grid :style='{ width: "500px" }' :data-items="dataItem.details"></Grid>
+    </div>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+
+export default {
+    props: {
+        dataItem: Object
+    },
+    components: {
+        'Grid': Grid
+    }
+}
+</script>
+    
\ No newline at end of file
diff --git a/vue-options-api-demos/grid/persist-state/es.json b/vue-options-api-demos/grid/persist-state/es.json
new file mode 100644
index 00000000..72eb2b1c
--- /dev/null
+++ b/vue-options-api-demos/grid/persist-state/es.json
@@ -0,0 +1,55 @@
+{
+    "datepicker": {
+        "toggleCalendar": "Alternar calendario"
+    },
+    "calendar": {
+        "today": "Hoy"
+    },
+    "dateinput": {
+        "increment": "Incrementar valor",
+        "decrement": "Disminuir valor"
+    },
+    "numerictextbox": {
+        "increment": "Incrementar valor",
+        "decrement": "Disminuir valor"
+    },
+    "grid": {
+        "groupPanelEmpty": "Arrastre el título de una columna y suéltelo aquí para agrupar por ese criterio",
+        "noRecords": "No hay datos disponibles.",
+        "pagerFirstPage": "Ir a la primera página",
+        "pagerPreviousPage": "Ir a la página anterior",
+        "pagerNextPage": "Ir a la página siguiente",
+        "pagerLastPage": "Ir a la última página",
+        "pagerPage": "Página",
+        "pagerOf": "de",
+        "pagerTotalPages": "{0}",
+        "pagerItems": "ítems",
+        "pagerInfo": "{0} - {1} de {2} ítems",
+        "pagerItemsPerPage": "ítems por página",
+        "filterEqOperator": "Es igual a",
+        "filterNotEqOperator": "No es igual a",
+        "filterIsNullOperator": "Es nulo",
+        "filterIsNotNullOperator": "No es nulo",
+        "filterIsEmptyOperator": "Está vacío",
+        "filterIsNotEmptyOperator": "No está vacío",
+        "filterStartsWithOperator": "Comienza con",
+        "filterContainsOperator": "Contiene",
+        "filterNotContainsOperator": "No contiene",
+        "filterEndsWithOperator": "Termina en",
+        "filterGteOperator": "Es mayor o igual que",
+        "filterGtOperator": "Es mayor que",
+        "filterLteOperator": "Es menor o igual que",
+        "filterLtOperator": "Es menor o igual que",
+        "filterIsTrue": "Sí",
+        "filterIsFalse": "No",
+        "filterBooleanAll": "(Todas)",
+        "filterAfterOrEqualOperator": "Es posterior o igual a",
+        "filterAfterOperator": "Es posterior",
+        "filterBeforeOperator": "Es anterior",
+        "filterBeforeOrEqualOperator": "Es anterior o igual a",
+        "filterFilterButton": "Filtrar",
+        "filterClearButton": "Limpiar filtros",
+        "filterAndLogic": "Y",
+        "filterOrLogic": "O"
+    }
+}
diff --git a/vue-options-api-demos/grid/persist-state/main.js b/vue-options-api-demos/grid/persist-state/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/persist-state/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/persist-state/main.vue b/vue-options-api-demos/grid/persist-state/main.vue
new file mode 100644
index 00000000..4940da0b
--- /dev/null
+++ b/vue-options-api-demos/grid/persist-state/main.vue
@@ -0,0 +1,349 @@
+<template>
+  <div :class="'example-config'">
+    <KButton class="buttons" @click="saveState">Save Grid State</KButton>
+    <KButton class="buttons" @click="getState">Reload Grid State</KButton>
+  </div>
+  <localization :language="currentLocale.language">
+    <intl :locale="currentLocale.locale">
+      <div>
+        <Grid
+          :style="{ height: '700px' }"
+          :sortable="sortable"
+          :filterable="filterable"
+          :groupable="groupable"
+          :reorderable="reorderable"
+          :resizable="resizable"
+          :pageable="{ buttonCount: 4, pageSizes: true }"
+          :data-items="dataResult"
+          :skip="skip"
+          :take="take"
+          :sort="sort"
+          :group="group"
+          :filter="filter"
+          :columns="columns"
+          :detail="detailComponent"
+          :expand-field="'expanded'"
+          @datastatechange="dataStateChange"
+          @expandchange="expandChange"
+          @columnreorder="columnReorder"
+          @columnresize="columnResize"
+        >
+          <template v-slot:myTemplate="{ props }">
+            <DetailComponent :data-item="props.dataItem" />
+          </template>
+          <template v-slot:myColumnMenuTemplate="{ props }">
+            <div>
+              <ColumnMenu
+                :column="props.column"
+                :filterable="props.filterable"
+                :filter="props.filter"
+                :sortable="props.sortable"
+                :sort="props.sort"
+                :columns="columns"
+                :locked="isColumnLocked(props.column.field)"
+                @sortchange="(e) => props.onSortchange(e)"
+                @lockchange="(e) => lockChange(e, props.column)"
+                @visibilitychange="(e) => visibilityChange(e, props.column)"
+                @filterchange="(e) => props.onFilterchange(e)"
+                @closemenu="(e) => props.onClosemenu(e)"
+                @contentfocus="(e) => props.onContentfocus(e)"
+                @columnssubmit="onColumnsSubmit"
+              />
+            </div>
+          </template>
+          <GridToolbar>
+            <div
+              :style="{
+                display: 'flex',
+                justifyContent: 'space-between',
+                width: '100%',
+              }"
+            >
+              <span>
+                Locale:
+                <DropDownList
+                  :value="currentLocale"
+                  :text-field="'language'"
+                  @change="dropDownChange"
+                  :data-items="locales"
+                >
+                </DropDownList>
+              </span>
+            </div>
+          </GridToolbar>
+        </Grid>
+      </div>
+    </intl>
+  </localization>
+</template>
+<script>
+import { Grid, GridToolbar } from '@progress/kendo-vue-grid';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import { Button } from '@progress/kendo-vue-buttons';
+import ColumnMenu from './ColumnMenu.vue';
+
+import {
+  IntlProvider,
+  load,
+  LocalizationProvider,
+  loadMessages,
+  IntlService,
+} from '@progress/kendo-vue-intl';
+import DetailComponent from './DetailComponent.vue';
+
+import likelySubtags from 'cldr-core/supplemental/likelySubtags.json';
+import currencyData from 'cldr-core/supplemental/currencyData.json';
+import weekData from 'cldr-core/supplemental/weekData.json';
+
+import numbers from 'cldr-numbers-full/main/es/numbers.json';
+import currencies from 'cldr-numbers-full/main/es/currencies.json';
+import caGregorian from 'cldr-dates-full/main/es/ca-gregorian.json';
+import dateFields from 'cldr-dates-full/main/es/dateFields.json';
+import timeZoneNames from 'cldr-dates-full/main/es/timeZoneNames.json';
+
+load(
+  likelySubtags,
+  currencyData,
+  weekData,
+  numbers,
+  currencies,
+  caGregorian,
+  dateFields,
+  timeZoneNames
+);
+
+import esMessages from './es.json';
+loadMessages(esMessages, 'es-ES');
+
+import { process } from '@progress/kendo-data-query';
+import orders_plain from './orders.json';
+
+const DATE_FORMAT = 'yyyy-mm-dd hh:mm:ss.SSS';
+const intl = new IntlService();
+
+function formatDates(items, noFormat) {
+  items.forEach((o) => {
+    o.orderDate = intl.parseDate(
+      o.orderDate,
+      noFormat ? DATE_FORMAT : undefined
+    );
+    o.shippedDate =
+      o.shippedDate === 'NULL'
+        ? undefined
+        : intl.parseDate(o.shippedDate, noFormat ? DATE_FORMAT : undefined);
+  });
+  return items;
+}
+
+const orders = formatDates(orders_plain, true);
+
+export default {
+  components: {
+    Grid,
+    GridToolbar,
+    DropDownList,
+    intl: IntlProvider,
+    localization: LocalizationProvider,
+    DetailComponent,
+    KButton: Button,
+    ColumnMenu,
+  },
+  data: function () {
+    return {
+      ordersCopy: orders,
+      skip: 0,
+      take: 20,
+      sort: [{ field: 'orderDate', dir: 'desc' }],
+      group: [{ field: 'customerID' }],
+      filter: null,
+      dataResult: [],
+      locales: [
+        {
+          language: 'en-US',
+          locale: 'en',
+        },
+        {
+          language: 'es-ES',
+          locale: 'es',
+        },
+      ],
+      currentLocale: null,
+      sortable: true,
+      filterable: true,
+      groupable: true,
+      reorderable: true,
+      resizable: true,
+      detailComponent: 'myTemplate',
+      restoredData: null,
+      columns: [
+        {
+          field: 'customerID',
+          width: '200px',
+          columnMenu: 'myColumnMenuTemplate',
+        },
+        {
+          field: 'orderDate',
+          filter: 'date',
+          format: '{0:D}',
+          width: '300px',
+          columnMenu: 'myColumnMenuTemplate',
+        },
+        {
+          field: 'shipName',
+          width: '280px',
+          columnMenu: 'myColumnMenuTemplate',
+        },
+        {
+          field: 'freight',
+          filter: 'numeric',
+          width: '200px',
+          columnMenu: 'myColumnMenuTemplate',
+        },
+        {
+          field: 'shippedDate',
+          filter: 'date',
+          format: '{0:D}',
+          width: '300px',
+          columnMenu: 'myColumnMenuTemplate',
+        },
+        {
+          field: 'employeeID',
+          filter: 'numeric',
+          width: '200px',
+          columnMenu: 'myColumnMenuTemplate',
+        },
+        {
+          field: 'orderID',
+          filterable: 'false',
+          title: 'ID',
+          width: '90px',
+          locked: 'true',
+          columnMenu: 'myColumnMenuTemplate',
+        },
+      ],
+    };
+  },
+  created() {
+    this.currentLocale = this.locales[0];
+    const dataState = {
+      skip: this.skip,
+      take: this.take,
+      sort: this.sort,
+      group: this.group,
+      filter: this.filter,
+    };
+    this.dataResult = process(orders, dataState);
+  },
+  methods: {
+    isColumnLocked(columnName) {
+      return this.columns.filter((ev) => ev.field === columnName)[0].locked;
+    },
+    lockChange(state, columnName) {
+      const columnToLock = this.columns.filter(
+        (ev) => ev.field === columnName.field
+      )[0];
+      columnToLock.locked = state;
+    },
+    visibilityChange(state, columnName) {
+      this.columns.filter((ev) => ev.field === columnName.field)[0].hidden =
+        state;
+    },
+    onColumnsSubmit(columnsState) {
+      this.columns = columnsState;
+    },
+    saveState: function () {
+      const gridState = {};
+      gridState.data = [...this.ordersCopy];
+      gridState.sortable = this.sortable;
+      gridState.filterable = this.filterable;
+      gridState.groupable = this.groupable;
+      gridState.skip = this.skip;
+      gridState.take = this.take;
+      gridState.group = this.group;
+      gridState.sort = this.sort;
+      gridState.filter = this.filter;
+      gridState.columns = this.columns;
+      gridState.currentLocale = this.currentLocale;
+
+      localStorage.setItem('gridState', JSON.stringify(gridState));
+    },
+    getState: function () {
+      const gridState = JSON.parse(localStorage.getItem('gridState'));
+
+      if (gridState !== null) {
+        this.restoredData = formatDates(gridState.data);
+        this.sortable = gridState.sortable;
+        this.filterable = gridState.filterable;
+        this.groupable = gridState.groupable;
+        this.skip = gridState.skip;
+        this.take = gridState.take;
+        this.group = gridState.group;
+        this.sort = gridState.sort;
+        this.filter = gridState.filter;
+        this.currentLocale = gridState.currentLocale;
+        this.columns = gridState.columns;
+
+        this.updateState();
+      }
+    },
+    updateState() {
+      this.dataResult = process(this.restoredData, {
+        skip: this.skip,
+        take: this.take,
+        sort: this.sort,
+        filter: this.filter,
+        group: this.group,
+      });
+    },
+    createAppState: function (dataState) {
+      this.take = dataState.take;
+      this.skip = dataState.skip;
+      if (dataState.group) {
+        dataState.group.map((group) => (group.aggregates = this.aggregates));
+      }
+      this.group = dataState.group;
+      this.filter = dataState.filter;
+      this.sort = dataState.sort;
+    },
+    dataStateChange(event) {
+      this.createAppState(event.data);
+      this.dataResult = process(orders, {
+        skip: this.skip,
+        take: this.take,
+        sort: this.sort,
+        filter: this.filter,
+        group: this.group,
+      });
+    },
+    expandChange(event) {
+      const isExpanded =
+        event.dataItem.expanded === undefined
+          ? event.dataItem.aggregates
+          : event.dataItem.expanded;
+      event.dataItem.expanded = !isExpanded;
+
+      this.ordersCopy.find(
+        (order) => order.orderID === event.dataItem.orderID
+      ).expanded = !isExpanded;
+    },
+    pageChangeHandler: function (event) {
+      this.skip = event.page.skip;
+      this.take = event.page.take;
+    },
+    columnReorder: function (options) {
+      this.columns = options.columns;
+    },
+    columnResize: function (options) {
+      this.columns = options.columns;
+    },
+    dropDownChange: function (e) {
+      this.currentLocale = e.target.value;
+    },
+  },
+};
+</script>
+<style>
+.buttons {
+  margin-right: 10px;
+}
+</style>
diff --git a/vue-options-api-demos/grid/persist-state/orders.json b/vue-options-api-demos/grid/persist-state/orders.json
new file mode 100644
index 00000000..9d8d8ac9
--- /dev/null
+++ b/vue-options-api-demos/grid/persist-state/orders.json
@@ -0,0 +1,25576 @@
+[
+	{
+		"orderID": 10271,
+		"customerID": "SPLIR",
+		"employeeID": 6,
+		"orderDate": "1996-08-01 00:00:00.000",
+		"requiredDate": "1996-08-29 00:00:00.000",
+		"shippedDate": "1996-08-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 4.54,
+		"shipName": "Split Rail Beer & Ale",
+		"shipAddress": {
+			"street": "P.O. Box 555",
+			"city": "Lander",
+			"region": "WY",
+			"postalCode": 82520,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10266,
+		"customerID": "WARTH",
+		"employeeID": 3,
+		"orderDate": "1996-07-26 00:00:00.000",
+		"requiredDate": "1996-09-06 00:00:00.000",
+		"shippedDate": "1996-07-31 00:00:00.000",
+		"shipVia": 3,
+		"freight": 25.73,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 12,
+				"unitPrice": 30.4,
+				"quantity": 12,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10279,
+		"customerID": "LEHMS",
+		"employeeID": 8,
+		"orderDate": "1996-08-13 00:00:00.000",
+		"requiredDate": "1996-09-10 00:00:00.000",
+		"shippedDate": "1996-08-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 25.83,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 15,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10292,
+		"customerID": "TRADH",
+		"employeeID": 1,
+		"orderDate": "1996-08-28 00:00:00.000",
+		"requiredDate": "1996-09-25 00:00:00.000",
+		"shippedDate": "1996-09-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.35,
+		"shipName": "Tradiçao Hipermercados",
+		"shipAddress": {
+			"street": "Av. Inês de Castro 414",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05634-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 20,
+				"unitPrice": 64.8,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10295,
+		"customerID": "VINET",
+		"employeeID": 2,
+		"orderDate": "1996-09-02 00:00:00.000",
+		"requiredDate": "1996-09-30 00:00:00.000",
+		"shippedDate": "1996-09-10 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.15,
+		"shipName": "Vins et alcools Chevalier",
+		"shipAddress": {
+			"street": "59 rue de l'Abbaye",
+			"city": "Reims",
+			"region": "NULL",
+			"postalCode": 51100,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 4,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10313,
+		"customerID": "QUICK",
+		"employeeID": 2,
+		"orderDate": "1996-09-24 00:00:00.000",
+		"requiredDate": "1996-10-22 00:00:00.000",
+		"shippedDate": "1996-10-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.96,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 15.2,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10317,
+		"customerID": "LONEP",
+		"employeeID": 6,
+		"orderDate": "1996-09-30 00:00:00.000",
+		"requiredDate": "1996-10-28 00:00:00.000",
+		"shippedDate": "1996-10-10 00:00:00.000",
+		"shipVia": 1,
+		"freight": 12.69,
+		"shipName": "Lonesome Pine Restaurant",
+		"shipAddress": {
+			"street": "89 Chiaroscuro Rd.",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97219,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 14.4,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10322,
+		"customerID": "PERIC",
+		"employeeID": 7,
+		"orderDate": "1996-10-04 00:00:00.000",
+		"requiredDate": "1996-11-01 00:00:00.000",
+		"shippedDate": "1996-10-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 0.4,
+		"shipName": "Pericles Comidas clásicas",
+		"shipAddress": {
+			"street": "Calle Dr. Jorge Cash 321",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 52,
+				"unitPrice": 5.6,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10320,
+		"customerID": "WARTH",
+		"employeeID": 5,
+		"orderDate": "1996-10-03 00:00:00.000",
+		"requiredDate": "1996-10-17 00:00:00.000",
+		"shippedDate": "1996-10-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 34.57,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10321,
+		"customerID": "ISLAT",
+		"employeeID": 3,
+		"orderDate": "1996-10-03 00:00:00.000",
+		"requiredDate": "1996-10-31 00:00:00.000",
+		"shippedDate": "1996-10-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.43,
+		"shipName": "Island Trading",
+		"shipAddress": {
+			"street": "Garden House Crowther Way",
+			"city": "Cowes",
+			"region": "Isle of Wight",
+			"postalCode": "PO31 7PJ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 14.4,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10336,
+		"customerID": "PRINI",
+		"employeeID": 7,
+		"orderDate": "1996-10-23 00:00:00.000",
+		"requiredDate": "1996-11-20 00:00:00.000",
+		"shippedDate": "1996-10-25 00:00:00.000",
+		"shipVia": 2,
+		"freight": 15.51,
+		"shipName": "Princesa Isabel Vinhos",
+		"shipAddress": {
+			"street": "Estrada da saúde n. 58",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1756,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 17.6,
+				"quantity": 18,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10349,
+		"customerID": "SPLIR",
+		"employeeID": 7,
+		"orderDate": "1996-11-08 00:00:00.000",
+		"requiredDate": "1996-12-06 00:00:00.000",
+		"shippedDate": "1996-11-15 00:00:00.000",
+		"shipVia": 1,
+		"freight": 8.63,
+		"shipName": "Split Rail Beer & Ale",
+		"shipAddress": {
+			"street": "P.O. Box 555",
+			"city": "Lander",
+			"region": "WY",
+			"postalCode": 82520,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10331,
+		"customerID": "BONAP",
+		"employeeID": 9,
+		"orderDate": "1996-10-16 00:00:00.000",
+		"requiredDate": "1996-11-27 00:00:00.000",
+		"shippedDate": "1996-10-21 00:00:00.000",
+		"shipVia": 1,
+		"freight": 10.19,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10365,
+		"customerID": "ANTON",
+		"employeeID": 3,
+		"orderDate": "1996-11-27 00:00:00.000",
+		"requiredDate": "1996-12-25 00:00:00.000",
+		"shippedDate": "1996-12-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 22,
+		"shipName": "Antonio Moreno Taquería",
+		"shipAddress": {
+			"street": "Mataderos  2312",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5023,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10371,
+		"customerID": "LAMAI",
+		"employeeID": 1,
+		"orderDate": "1996-12-03 00:00:00.000",
+		"requiredDate": "1996-12-31 00:00:00.000",
+		"shippedDate": "1996-12-24 00:00:00.000",
+		"shipVia": 1,
+		"freight": 0.45,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 15.2,
+				"quantity": 6,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10376,
+		"customerID": "MEREP",
+		"employeeID": 1,
+		"orderDate": "1996-12-09 00:00:00.000",
+		"requiredDate": "1997-01-06 00:00:00.000",
+		"shippedDate": "1996-12-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 20.39,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 42,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10378,
+		"customerID": "FOLKO",
+		"employeeID": 5,
+		"orderDate": "1996-12-10 00:00:00.000",
+		"requiredDate": "1997-01-07 00:00:00.000",
+		"shippedDate": "1996-12-19 00:00:00.000",
+		"shipVia": 3,
+		"freight": 5.44,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10392,
+		"customerID": "PICCO",
+		"employeeID": 2,
+		"orderDate": "1996-12-24 00:00:00.000",
+		"requiredDate": "1997-01-21 00:00:00.000",
+		"shippedDate": "1997-01-01 00:00:00.000",
+		"shipVia": 3,
+		"freight": 122.46,
+		"shipName": "Piccolo und mehr",
+		"shipAddress": {
+			"street": "Geislweg 14",
+			"city": "Salzburg",
+			"region": "NULL",
+			"postalCode": 5020,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10391,
+		"customerID": "DRACD",
+		"employeeID": 3,
+		"orderDate": "1996-12-23 00:00:00.000",
+		"requiredDate": "1997-01-20 00:00:00.000",
+		"shippedDate": "1996-12-31 00:00:00.000",
+		"shipVia": 3,
+		"freight": 5.45,
+		"shipName": "Drachenblut Delikatessen",
+		"shipAddress": {
+			"street": "Walserweg 21",
+			"city": "Aachen",
+			"region": "NULL",
+			"postalCode": 52066,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 4.8,
+				"quantity": 18,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10405,
+		"customerID": "LINOD",
+		"employeeID": 1,
+		"orderDate": "1997-01-06 00:00:00.000",
+		"requiredDate": "1997-02-03 00:00:00.000",
+		"shippedDate": "1997-01-22 00:00:00.000",
+		"shipVia": 1,
+		"freight": 34.82,
+		"shipName": "LINO-Delicateses",
+		"shipAddress": {
+			"street": "Ave. 5 de Mayo Porlamar",
+			"city": "I. de Margarita",
+			"region": "Nueva Esparta",
+			"postalCode": 4980,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 3,
+				"unitPrice": 8,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10412,
+		"customerID": "WARTH",
+		"employeeID": 8,
+		"orderDate": "1997-01-13 00:00:00.000",
+		"requiredDate": "1997-02-10 00:00:00.000",
+		"shippedDate": "1997-01-15 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.77,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 18.6,
+				"quantity": 20,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10422,
+		"customerID": "FRANS",
+		"employeeID": 2,
+		"orderDate": "1997-01-22 00:00:00.000",
+		"requiredDate": "1997-02-19 00:00:00.000",
+		"shippedDate": "1997-01-31 00:00:00.000",
+		"shipVia": 1,
+		"freight": 3.02,
+		"shipName": "Franchi S.p.A.",
+		"shipAddress": {
+			"street": "Via Monte Bianco 34",
+			"city": "Torino",
+			"region": "NULL",
+			"postalCode": 10100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 2,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10433,
+		"customerID": "PRINI",
+		"employeeID": 3,
+		"orderDate": "1997-02-03 00:00:00.000",
+		"requiredDate": "1997-03-03 00:00:00.000",
+		"shippedDate": "1997-03-04 00:00:00.000",
+		"shipVia": 3,
+		"freight": 73.83,
+		"shipName": "Princesa Isabel Vinhos",
+		"shipAddress": {
+			"street": "Estrada da saúde n. 58",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1756,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 28,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10427,
+		"customerID": "PICCO",
+		"employeeID": 4,
+		"orderDate": "1997-01-27 00:00:00.000",
+		"requiredDate": "1997-02-24 00:00:00.000",
+		"shippedDate": "1997-03-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 31.29,
+		"shipName": "Piccolo und mehr",
+		"shipAddress": {
+			"street": "Geislweg 14",
+			"city": "Salzburg",
+			"region": "NULL",
+			"postalCode": 5020,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 18.6,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10437,
+		"customerID": "WARTH",
+		"employeeID": 8,
+		"orderDate": "1997-02-05 00:00:00.000",
+		"requiredDate": "1997-03-05 00:00:00.000",
+		"shippedDate": "1997-02-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 19.97,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10428,
+		"customerID": "REGGC",
+		"employeeID": 7,
+		"orderDate": "1997-01-28 00:00:00.000",
+		"requiredDate": "1997-02-25 00:00:00.000",
+		"shippedDate": "1997-02-04 00:00:00.000",
+		"shipVia": 1,
+		"freight": 11.09,
+		"shipName": "Reggiani Caseifici",
+		"shipAddress": {
+			"street": "Strada Provinciale 124",
+			"city": "Reggio Emilia",
+			"region": "NULL",
+			"postalCode": 42100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 46,
+				"unitPrice": 9.6,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10441,
+		"customerID": "OLDWO",
+		"employeeID": 3,
+		"orderDate": "1997-02-10 00:00:00.000",
+		"requiredDate": "1997-03-24 00:00:00.000",
+		"shippedDate": "1997-03-14 00:00:00.000",
+		"shipVia": 2,
+		"freight": 73.02,
+		"shipName": "Old World Delicatessen",
+		"shipAddress": {
+			"street": "2743 Bering St.",
+			"city": "Anchorage",
+			"region": "AK",
+			"postalCode": 99508,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 27,
+				"unitPrice": 35.1,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10457,
+		"customerID": "KOENE",
+		"employeeID": 2,
+		"orderDate": "1997-02-25 00:00:00.000",
+		"requiredDate": "1997-03-25 00:00:00.000",
+		"shippedDate": "1997-03-03 00:00:00.000",
+		"shipVia": 1,
+		"freight": 11.57,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 36,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10478,
+		"customerID": "VICTE",
+		"employeeID": 2,
+		"orderDate": "1997-03-18 00:00:00.000",
+		"requiredDate": "1997-04-01 00:00:00.000",
+		"shippedDate": "1997-03-26 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.81,
+		"shipName": "Victuailles en stock",
+		"shipAddress": {
+			"street": "2 rue du Commerce",
+			"city": "Lyon",
+			"region": "NULL",
+			"postalCode": 69004,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 24.8,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10482,
+		"customerID": "LAZYK",
+		"employeeID": 1,
+		"orderDate": "1997-03-21 00:00:00.000",
+		"requiredDate": "1997-04-18 00:00:00.000",
+		"shippedDate": "1997-04-10 00:00:00.000",
+		"shipVia": 3,
+		"freight": 7.48,
+		"shipName": "Lazy K Kountry Store",
+		"shipAddress": {
+			"street": "12 Orchestra Terrace",
+			"city": "Walla Walla",
+			"region": "WA",
+			"postalCode": 99362,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10494,
+		"customerID": "COMMI",
+		"employeeID": 4,
+		"orderDate": "1997-04-02 00:00:00.000",
+		"requiredDate": "1997-04-30 00:00:00.000",
+		"shippedDate": "1997-04-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 65.99,
+		"shipName": "Comércio Mineiro",
+		"shipAddress": {
+			"street": "Av. dos Lusíadas 23",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05432-043",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10501,
+		"customerID": "BLAUS",
+		"employeeID": 9,
+		"orderDate": "1997-04-09 00:00:00.000",
+		"requiredDate": "1997-05-07 00:00:00.000",
+		"shippedDate": "1997-04-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 8.85,
+		"shipName": "Blauer See Delikatessen",
+		"shipAddress": {
+			"street": "Forsterstr. 57",
+			"city": "Mannheim",
+			"region": "NULL",
+			"postalCode": 68306,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10496,
+		"customerID": "TRADH",
+		"employeeID": 7,
+		"orderDate": "1997-04-04 00:00:00.000",
+		"requiredDate": "1997-05-02 00:00:00.000",
+		"shippedDate": "1997-04-07 00:00:00.000",
+		"shipVia": 2,
+		"freight": 46.77,
+		"shipName": "Tradiçao Hipermercados",
+		"shipAddress": {
+			"street": "Av. Inês de Castro 414",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05634-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10509,
+		"customerID": "BLAUS",
+		"employeeID": 4,
+		"orderDate": "1997-04-17 00:00:00.000",
+		"requiredDate": "1997-05-15 00:00:00.000",
+		"shippedDate": "1997-04-29 00:00:00.000",
+		"shipVia": 1,
+		"freight": 0.15,
+		"shipName": "Blauer See Delikatessen",
+		"shipAddress": {
+			"street": "Forsterstr. 57",
+			"city": "Mannheim",
+			"region": "NULL",
+			"postalCode": 68306,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10505,
+		"customerID": "MEREP",
+		"employeeID": 3,
+		"orderDate": "1997-04-14 00:00:00.000",
+		"requiredDate": "1997-05-12 00:00:00.000",
+		"shippedDate": "1997-04-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 7.13,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10545,
+		"customerID": "LAZYK",
+		"employeeID": 8,
+		"orderDate": "1997-05-22 00:00:00.000",
+		"requiredDate": "1997-06-19 00:00:00.000",
+		"shippedDate": "1997-06-26 00:00:00.000",
+		"shipVia": 2,
+		"freight": 11.92,
+		"shipName": "Lazy K Kountry Store",
+		"shipAddress": {
+			"street": "12 Orchestra Terrace",
+			"city": "Walla Walla",
+			"region": "WA",
+			"postalCode": 99362,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10556,
+		"customerID": "SIMOB",
+		"employeeID": 2,
+		"orderDate": "1997-06-03 00:00:00.000",
+		"requiredDate": "1997-07-15 00:00:00.000",
+		"shippedDate": "1997-06-13 00:00:00.000",
+		"shipVia": 1,
+		"freight": 9.8,
+		"shipName": "Simons bistro",
+		"shipAddress": {
+			"street": "Vinbæltet 34",
+			"city": "Kobenhavn",
+			"region": "NULL",
+			"postalCode": 1734,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10568,
+		"customerID": "GALED",
+		"employeeID": 3,
+		"orderDate": "1997-06-13 00:00:00.000",
+		"requiredDate": "1997-07-11 00:00:00.000",
+		"shippedDate": "1997-07-09 00:00:00.000",
+		"shipVia": 3,
+		"freight": 6.54,
+		"shipName": "Galería del gastronómo",
+		"shipAddress": {
+			"street": "Rambla de Cataluña 23",
+			"city": "Barcelona",
+			"region": "NULL",
+			"postalCode": 8022,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10581,
+		"customerID": "FAMIA",
+		"employeeID": 3,
+		"orderDate": "1997-06-26 00:00:00.000",
+		"requiredDate": "1997-07-24 00:00:00.000",
+		"shippedDate": "1997-07-02 00:00:00.000",
+		"shipVia": 1,
+		"freight": 3.01,
+		"shipName": "Familia Arquibaldo",
+		"shipAddress": {
+			"street": "Rua Orós 92",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05442-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 50,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10585,
+		"customerID": "WELLI",
+		"employeeID": 7,
+		"orderDate": "1997-07-01 00:00:00.000",
+		"requiredDate": "1997-07-29 00:00:00.000",
+		"shippedDate": "1997-07-10 00:00:00.000",
+		"shipVia": 1,
+		"freight": 13.41,
+		"shipName": "Wellington Importadora",
+		"shipAddress": {
+			"street": "Rua do Mercado 12",
+			"city": "Resende",
+			"region": "SP",
+			"postalCode": "08737-363",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10586,
+		"customerID": "REGGC",
+		"employeeID": 9,
+		"orderDate": "1997-07-02 00:00:00.000",
+		"requiredDate": "1997-07-30 00:00:00.000",
+		"shippedDate": "1997-07-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 0.48,
+		"shipName": "Reggiani Caseifici",
+		"shipAddress": {
+			"street": "Strada Provinciale 124",
+			"city": "Reggio Emilia",
+			"region": "NULL",
+			"postalCode": 42100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 4,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10589,
+		"customerID": "GREAL",
+		"employeeID": 8,
+		"orderDate": "1997-07-04 00:00:00.000",
+		"requiredDate": "1997-08-01 00:00:00.000",
+		"shippedDate": "1997-07-14 00:00:00.000",
+		"shipVia": 2,
+		"freight": 4.42,
+		"shipName": "Great Lakes Food Market",
+		"shipAddress": {
+			"street": "2732 Baker Blvd.",
+			"city": "Eugene",
+			"region": "OR",
+			"postalCode": 97403,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 4,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10584,
+		"customerID": "BLONP",
+		"employeeID": 4,
+		"orderDate": "1997-06-30 00:00:00.000",
+		"requiredDate": "1997-07-28 00:00:00.000",
+		"shippedDate": "1997-07-04 00:00:00.000",
+		"shipVia": 1,
+		"freight": 59.14,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 50,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10599,
+		"customerID": "BSBEV",
+		"employeeID": 6,
+		"orderDate": "1997-07-15 00:00:00.000",
+		"requiredDate": "1997-08-26 00:00:00.000",
+		"shippedDate": "1997-07-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 29.98,
+		"shipName": "B's Beverages",
+		"shipAddress": {
+			"street": "Fauntleroy Circus",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "EC2 5NT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10602,
+		"customerID": "VAFFE",
+		"employeeID": 8,
+		"orderDate": "1997-07-17 00:00:00.000",
+		"requiredDate": "1997-08-14 00:00:00.000",
+		"shippedDate": "1997-07-22 00:00:00.000",
+		"shipVia": 2,
+		"freight": 2.92,
+		"shipName": "Vaffeljernet",
+		"shipAddress": {
+			"street": "Smagsloget 45",
+			"city": "Århus",
+			"region": "NULL",
+			"postalCode": 8200,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 5,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10608,
+		"customerID": "TOMSP",
+		"employeeID": 4,
+		"orderDate": "1997-07-23 00:00:00.000",
+		"requiredDate": "1997-08-20 00:00:00.000",
+		"shippedDate": "1997-08-01 00:00:00.000",
+		"shipVia": 2,
+		"freight": 27.79,
+		"shipName": "Toms Spezialitäten",
+		"shipAddress": {
+			"street": "Luisenstr. 48",
+			"city": "Münster",
+			"region": "NULL",
+			"postalCode": 44087,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 28,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10610,
+		"customerID": "LAMAI",
+		"employeeID": 8,
+		"orderDate": "1997-07-25 00:00:00.000",
+		"requiredDate": "1997-08-22 00:00:00.000",
+		"shippedDate": "1997-08-06 00:00:00.000",
+		"shipVia": 1,
+		"freight": 26.78,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 21,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10615,
+		"customerID": "WILMK",
+		"employeeID": 2,
+		"orderDate": "1997-07-30 00:00:00.000",
+		"requiredDate": "1997-08-27 00:00:00.000",
+		"shippedDate": "1997-08-06 00:00:00.000",
+		"shipVia": 3,
+		"freight": 0.75,
+		"shipName": "Wilman Kala",
+		"shipAddress": {
+			"street": "Keskuskatu 45",
+			"city": "Helsinki",
+			"region": "NULL",
+			"postalCode": 21240,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10617,
+		"customerID": "GREAL",
+		"employeeID": 4,
+		"orderDate": "1997-07-31 00:00:00.000",
+		"requiredDate": "1997-08-28 00:00:00.000",
+		"shippedDate": "1997-08-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 18.53,
+		"shipName": "Great Lakes Food Market",
+		"shipAddress": {
+			"street": "2732 Baker Blvd.",
+			"city": "Eugene",
+			"region": "OR",
+			"postalCode": 97403,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 30,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10628,
+		"customerID": "BLONP",
+		"employeeID": 4,
+		"orderDate": "1997-08-12 00:00:00.000",
+		"requiredDate": "1997-09-09 00:00:00.000",
+		"shippedDate": "1997-08-20 00:00:00.000",
+		"shipVia": 3,
+		"freight": 30.36,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10631,
+		"customerID": "LAMAI",
+		"employeeID": 8,
+		"orderDate": "1997-08-14 00:00:00.000",
+		"requiredDate": "1997-09-11 00:00:00.000",
+		"shippedDate": "1997-08-15 00:00:00.000",
+		"shipVia": 1,
+		"freight": 0.87,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 8,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10639,
+		"customerID": "SANTG",
+		"employeeID": 7,
+		"orderDate": "1997-08-20 00:00:00.000",
+		"requiredDate": "1997-09-17 00:00:00.000",
+		"shippedDate": "1997-08-27 00:00:00.000",
+		"shipVia": 3,
+		"freight": 38.64,
+		"shipName": "Santé Gourmet",
+		"shipAddress": {
+			"street": "Erling Skakkes gate 78",
+			"city": "Stavern",
+			"region": "NULL",
+			"postalCode": 4110,
+			"country": "Norway"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 8,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10655,
+		"customerID": "REGGC",
+		"employeeID": 1,
+		"orderDate": "1997-09-03 00:00:00.000",
+		"requiredDate": "1997-10-01 00:00:00.000",
+		"shippedDate": "1997-09-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 4.41,
+		"shipName": "Reggiani Caseifici",
+		"shipAddress": {
+			"street": "Strada Provinciale 124",
+			"city": "Reggio Emilia",
+			"region": "NULL",
+			"postalCode": 42100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 20,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10660,
+		"customerID": "HUNGC",
+		"employeeID": 8,
+		"orderDate": "1997-09-08 00:00:00.000",
+		"requiredDate": "1997-10-06 00:00:00.000",
+		"shippedDate": "1997-10-15 00:00:00.000",
+		"shipVia": 1,
+		"freight": 111.29,
+		"shipName": "Hungry Coyote Import Store",
+		"shipAddress": {
+			"street": "City Center Plaza 516 Main St.",
+			"city": "Elgin",
+			"region": "OR",
+			"postalCode": 97827,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 20,
+				"unitPrice": 81,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10662,
+		"customerID": "LONEP",
+		"employeeID": 3,
+		"orderDate": "1997-09-09 00:00:00.000",
+		"requiredDate": "1997-10-07 00:00:00.000",
+		"shippedDate": "1997-09-18 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.28,
+		"shipName": "Lonesome Pine Restaurant",
+		"shipAddress": {
+			"street": "89 Chiaroscuro Rd.",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97219,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10669,
+		"customerID": "SIMOB",
+		"employeeID": 2,
+		"orderDate": "1997-09-15 00:00:00.000",
+		"requiredDate": "1997-10-13 00:00:00.000",
+		"shippedDate": "1997-09-22 00:00:00.000",
+		"shipVia": 1,
+		"freight": 24.39,
+		"shipName": "Simons bistro",
+		"shipAddress": {
+			"street": "Vinbæltet 34",
+			"city": "Kobenhavn",
+			"region": "NULL",
+			"postalCode": 1734,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10679,
+		"customerID": "BLONP",
+		"employeeID": 8,
+		"orderDate": "1997-09-23 00:00:00.000",
+		"requiredDate": "1997-10-21 00:00:00.000",
+		"shippedDate": "1997-09-30 00:00:00.000",
+		"shipVia": 3,
+		"freight": 27.94,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10683,
+		"customerID": "DUMON",
+		"employeeID": 2,
+		"orderDate": "1997-09-26 00:00:00.000",
+		"requiredDate": "1997-10-24 00:00:00.000",
+		"shippedDate": "1997-10-01 00:00:00.000",
+		"shipVia": 1,
+		"freight": 4.4,
+		"shipName": "Du monde entier",
+		"shipAddress": {
+			"street": "67 rue des Cinquante Otages",
+			"city": "Nantes",
+			"region": "NULL",
+			"postalCode": 44000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10674,
+		"customerID": "ISLAT",
+		"employeeID": 4,
+		"orderDate": "1997-09-18 00:00:00.000",
+		"requiredDate": "1997-10-16 00:00:00.000",
+		"shippedDate": "1997-09-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 0.9,
+		"shipName": "Island Trading",
+		"shipAddress": {
+			"street": "Garden House Crowther Way",
+			"city": "Cowes",
+			"region": "Isle of Wight",
+			"postalCode": "PO31 7PJ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10692,
+		"customerID": "ALFKI",
+		"employeeID": 4,
+		"orderDate": "1997-10-03 00:00:00.000",
+		"requiredDate": "1997-10-31 00:00:00.000",
+		"shippedDate": "1997-10-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 61.02,
+		"shipName": "Alfred's Futterkiste",
+		"shipAddress": {
+			"street": "Obere Str. 57",
+			"city": "Berlin",
+			"region": "NULL",
+			"postalCode": 12209,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 63,
+				"unitPrice": 43.9,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10689,
+		"customerID": "BERGS",
+		"employeeID": 1,
+		"orderDate": "1997-10-01 00:00:00.000",
+		"requiredDate": "1997-10-29 00:00:00.000",
+		"shippedDate": "1997-10-07 00:00:00.000",
+		"shipVia": 2,
+		"freight": 13.42,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 35,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10699,
+		"customerID": "MORGK",
+		"employeeID": 3,
+		"orderDate": "1997-10-09 00:00:00.000",
+		"requiredDate": "1997-11-06 00:00:00.000",
+		"shippedDate": "1997-10-13 00:00:00.000",
+		"shipVia": 3,
+		"freight": 0.58,
+		"shipName": "Morgenstern Gesundkost",
+		"shipAddress": {
+			"street": "Heerstr. 22",
+			"city": "Leipzig",
+			"region": "NULL",
+			"postalCode": 4179,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10721,
+		"customerID": "QUICK",
+		"employeeID": 5,
+		"orderDate": "1997-10-29 00:00:00.000",
+		"requiredDate": "1997-11-26 00:00:00.000",
+		"shippedDate": "1997-10-31 00:00:00.000",
+		"shipVia": 3,
+		"freight": 48.92,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 50,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10723,
+		"customerID": "WHITC",
+		"employeeID": 3,
+		"orderDate": "1997-10-30 00:00:00.000",
+		"requiredDate": "1997-11-27 00:00:00.000",
+		"shippedDate": "1997-11-25 00:00:00.000",
+		"shipVia": 1,
+		"freight": 21.72,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10738,
+		"customerID": "SPECD",
+		"employeeID": 2,
+		"orderDate": "1997-11-12 00:00:00.000",
+		"requiredDate": "1997-12-10 00:00:00.000",
+		"shippedDate": "1997-11-18 00:00:00.000",
+		"shipVia": 1,
+		"freight": 2.91,
+		"shipName": "Spécialités du monde",
+		"shipAddress": {
+			"street": "25 rue Lauriston",
+			"city": "Paris",
+			"region": "NULL",
+			"postalCode": 75016,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10741,
+		"customerID": "AROUT",
+		"employeeID": 4,
+		"orderDate": "1997-11-14 00:00:00.000",
+		"requiredDate": "1997-11-28 00:00:00.000",
+		"shippedDate": "1997-11-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 10.96,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 15,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10732,
+		"customerID": "BONAP",
+		"employeeID": 3,
+		"orderDate": "1997-11-06 00:00:00.000",
+		"requiredDate": "1997-12-04 00:00:00.000",
+		"shippedDate": "1997-11-07 00:00:00.000",
+		"shipVia": 1,
+		"freight": 16.97,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10743,
+		"customerID": "AROUT",
+		"employeeID": 1,
+		"orderDate": "1997-11-17 00:00:00.000",
+		"requiredDate": "1997-12-15 00:00:00.000",
+		"shippedDate": "1997-11-21 00:00:00.000",
+		"shipVia": 2,
+		"freight": 23.72,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 28,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10754,
+		"customerID": "MAGAA",
+		"employeeID": 6,
+		"orderDate": "1997-11-25 00:00:00.000",
+		"requiredDate": "1997-12-23 00:00:00.000",
+		"shippedDate": "1997-11-27 00:00:00.000",
+		"shipVia": 3,
+		"freight": 2.38,
+		"shipName": "Magazzini Alimentari Riuniti",
+		"shipAddress": {
+			"street": "Via Ludovico il Moro 22",
+			"city": "Bergamo",
+			"region": "NULL",
+			"postalCode": 24100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10744,
+		"customerID": "VAFFE",
+		"employeeID": 6,
+		"orderDate": "1997-11-17 00:00:00.000",
+		"requiredDate": "1997-12-15 00:00:00.000",
+		"shippedDate": "1997-11-24 00:00:00.000",
+		"shipVia": 1,
+		"freight": 69.19,
+		"shipName": "Vaffeljernet",
+		"shipAddress": {
+			"street": "Smagsloget 45",
+			"city": "Århus",
+			"region": "NULL",
+			"postalCode": 8200,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 50,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10765,
+		"customerID": "QUICK",
+		"employeeID": 3,
+		"orderDate": "1997-12-04 00:00:00.000",
+		"requiredDate": "1998-01-01 00:00:00.000",
+		"shippedDate": "1997-12-09 00:00:00.000",
+		"shipVia": 3,
+		"freight": 42.74,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 80,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10770,
+		"customerID": "HANAR",
+		"employeeID": 8,
+		"orderDate": "1997-12-09 00:00:00.000",
+		"requiredDate": "1998-01-06 00:00:00.000",
+		"shippedDate": "1997-12-17 00:00:00.000",
+		"shipVia": 3,
+		"freight": 5.32,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 15,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10771,
+		"customerID": "ERNSH",
+		"employeeID": 9,
+		"orderDate": "1997-12-10 00:00:00.000",
+		"requiredDate": "1998-01-07 00:00:00.000",
+		"shippedDate": "1998-01-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 11.19,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 16,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10767,
+		"customerID": "SUPRD",
+		"employeeID": 4,
+		"orderDate": "1997-12-05 00:00:00.000",
+		"requiredDate": "1998-01-02 00:00:00.000",
+		"shippedDate": "1997-12-15 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.59,
+		"shipName": "Suprêmes délices",
+		"shipAddress": {
+			"street": "Boulevard Tirou 255",
+			"city": "Charleroi",
+			"region": "NULL",
+			"postalCode": "B-6000",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 2,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10782,
+		"customerID": "CACTU",
+		"employeeID": 9,
+		"orderDate": "1997-12-17 00:00:00.000",
+		"requiredDate": "1998-01-14 00:00:00.000",
+		"shippedDate": "1997-12-22 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.1,
+		"shipName": "Cactus Comidas para llevar",
+		"shipAddress": {
+			"street": "Cerrito 333",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 1,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10777,
+		"customerID": "GOURL",
+		"employeeID": 7,
+		"orderDate": "1997-12-15 00:00:00.000",
+		"requiredDate": "1997-12-29 00:00:00.000",
+		"shippedDate": "1998-01-21 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.01,
+		"shipName": "Gourmet Lanchonetes",
+		"shipAddress": {
+			"street": "Av. Brasil 442",
+			"city": "Campinas",
+			"region": "SP",
+			"postalCode": "04876-786",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 20,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10778,
+		"customerID": "BERGS",
+		"employeeID": 3,
+		"orderDate": "1997-12-16 00:00:00.000",
+		"requiredDate": "1998-01-13 00:00:00.000",
+		"shippedDate": "1997-12-24 00:00:00.000",
+		"shipVia": 1,
+		"freight": 6.79,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10797,
+		"customerID": "DRACD",
+		"employeeID": 7,
+		"orderDate": "1997-12-25 00:00:00.000",
+		"requiredDate": "1998-01-22 00:00:00.000",
+		"shippedDate": "1998-01-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 33.35,
+		"shipName": "Drachenblut Delikatessen",
+		"shipAddress": {
+			"street": "Walserweg 21",
+			"city": "Aachen",
+			"region": "NULL",
+			"postalCode": 52066,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10807,
+		"customerID": "FRANS",
+		"employeeID": 4,
+		"orderDate": "1997-12-31 00:00:00.000",
+		"requiredDate": "1998-01-28 00:00:00.000",
+		"shippedDate": "1998-01-30 00:00:00.000",
+		"shipVia": 1,
+		"freight": 1.36,
+		"shipName": "Franchi S.p.A.",
+		"shipAddress": {
+			"street": "Via Monte Bianco 34",
+			"city": "Torino",
+			"region": "NULL",
+			"postalCode": 10100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 1,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10809,
+		"customerID": "WELLI",
+		"employeeID": 7,
+		"orderDate": "1998-01-01 00:00:00.000",
+		"requiredDate": "1998-01-29 00:00:00.000",
+		"shippedDate": "1998-01-07 00:00:00.000",
+		"shipVia": 1,
+		"freight": 4.87,
+		"shipName": "Wellington Importadora",
+		"shipAddress": {
+			"street": "Rua do Mercado 12",
+			"city": "Resende",
+			"region": "SP",
+			"postalCode": "08737-363",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10815,
+		"customerID": "SAVEA",
+		"employeeID": 2,
+		"orderDate": "1998-01-05 00:00:00.000",
+		"requiredDate": "1998-02-02 00:00:00.000",
+		"shippedDate": "1998-01-14 00:00:00.000",
+		"shipVia": 3,
+		"freight": 14.62,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 16,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10820,
+		"customerID": "RATTC",
+		"employeeID": 3,
+		"orderDate": "1998-01-07 00:00:00.000",
+		"requiredDate": "1998-02-04 00:00:00.000",
+		"shippedDate": "1998-01-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 37.52,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10843,
+		"customerID": "VICTE",
+		"employeeID": 4,
+		"orderDate": "1998-01-21 00:00:00.000",
+		"requiredDate": "1998-02-18 00:00:00.000",
+		"shippedDate": "1998-01-26 00:00:00.000",
+		"shipVia": 2,
+		"freight": 9.26,
+		"shipName": "Victuailles en stock",
+		"shipAddress": {
+			"street": "2 rue du Commerce",
+			"city": "Lyon",
+			"region": "NULL",
+			"postalCode": 69004,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 4,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10844,
+		"customerID": "PICCO",
+		"employeeID": 8,
+		"orderDate": "1998-01-21 00:00:00.000",
+		"requiredDate": "1998-02-18 00:00:00.000",
+		"shippedDate": "1998-01-26 00:00:00.000",
+		"shipVia": 2,
+		"freight": 25.22,
+		"shipName": "Piccolo und mehr",
+		"shipAddress": {
+			"street": "Geislweg 14",
+			"city": "Salzburg",
+			"region": "NULL",
+			"postalCode": 5020,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10853,
+		"customerID": "BLAUS",
+		"employeeID": 9,
+		"orderDate": "1998-01-27 00:00:00.000",
+		"requiredDate": "1998-02-24 00:00:00.000",
+		"shippedDate": "1998-02-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 53.83,
+		"shipName": "Blauer See Delikatessen",
+		"shipAddress": {
+			"street": "Forsterstr. 57",
+			"city": "Mannheim",
+			"region": "NULL",
+			"postalCode": 68306,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10874,
+		"customerID": "GODOS",
+		"employeeID": 5,
+		"orderDate": "1998-02-06 00:00:00.000",
+		"requiredDate": "1998-03-06 00:00:00.000",
+		"shippedDate": "1998-02-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 19.58,
+		"shipName": "Godos Cocina Típica",
+		"shipAddress": {
+			"street": "C/ Romero 33",
+			"city": "Sevilla",
+			"region": "NULL",
+			"postalCode": 41101,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10867,
+		"customerID": "LONEP",
+		"employeeID": 6,
+		"orderDate": "1998-02-03 00:00:00.000",
+		"requiredDate": "1998-03-17 00:00:00.000",
+		"shippedDate": "1998-02-11 00:00:00.000",
+		"shipVia": 1,
+		"freight": 1.93,
+		"shipName": "Lonesome Pine Restaurant",
+		"shipAddress": {
+			"street": "89 Chiaroscuro Rd.",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97219,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10878,
+		"customerID": "QUICK",
+		"employeeID": 4,
+		"orderDate": "1998-02-10 00:00:00.000",
+		"requiredDate": "1998-03-10 00:00:00.000",
+		"shippedDate": "1998-02-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 46.69,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 20,
+				"unitPrice": 81,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10883,
+		"customerID": "LONEP",
+		"employeeID": 8,
+		"orderDate": "1998-02-12 00:00:00.000",
+		"requiredDate": "1998-03-12 00:00:00.000",
+		"shippedDate": "1998-02-20 00:00:00.000",
+		"shipVia": 3,
+		"freight": 0.53,
+		"shipName": "Lonesome Pine Restaurant",
+		"shipAddress": {
+			"street": "89 Chiaroscuro Rd.",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97219,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 8,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10887,
+		"customerID": "GALED",
+		"employeeID": 8,
+		"orderDate": "1998-02-13 00:00:00.000",
+		"requiredDate": "1998-03-13 00:00:00.000",
+		"shippedDate": "1998-02-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.25,
+		"shipName": "Galería del gastronómo",
+		"shipAddress": {
+			"street": "Rambla de Cataluña 23",
+			"city": "Barcelona",
+			"region": "NULL",
+			"postalCode": 8022,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10891,
+		"customerID": "LEHMS",
+		"employeeID": 7,
+		"orderDate": "1998-02-17 00:00:00.000",
+		"requiredDate": "1998-03-17 00:00:00.000",
+		"shippedDate": "1998-02-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 20.37,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 15,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10892,
+		"customerID": "MAISD",
+		"employeeID": 4,
+		"orderDate": "1998-02-17 00:00:00.000",
+		"requiredDate": "1998-03-17 00:00:00.000",
+		"shippedDate": "1998-02-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 120.27,
+		"shipName": "Maison Dewey",
+		"shipAddress": {
+			"street": "Rue Joseph-Bens 532",
+			"city": "Bruxelles",
+			"region": "NULL",
+			"postalCode": "B-1180",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 40,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10881,
+		"customerID": "CACTU",
+		"employeeID": 4,
+		"orderDate": "1998-02-11 00:00:00.000",
+		"requiredDate": "1998-03-11 00:00:00.000",
+		"shippedDate": "1998-02-18 00:00:00.000",
+		"shipVia": 1,
+		"freight": 2.84,
+		"shipName": "Cactus Comidas para llevar",
+		"shipAddress": {
+			"street": "Cerrito 333",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 73,
+				"unitPrice": 15,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10900,
+		"customerID": "WELLI",
+		"employeeID": 1,
+		"orderDate": "1998-02-20 00:00:00.000",
+		"requiredDate": "1998-03-20 00:00:00.000",
+		"shippedDate": "1998-03-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.66,
+		"shipName": "Wellington Importadora",
+		"shipAddress": {
+			"street": "Rua do Mercado 12",
+			"city": "Resende",
+			"region": "SP",
+			"postalCode": "08737-363",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 3,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10905,
+		"customerID": "WELLI",
+		"employeeID": 9,
+		"orderDate": "1998-02-24 00:00:00.000",
+		"requiredDate": "1998-03-24 00:00:00.000",
+		"shippedDate": "1998-03-06 00:00:00.000",
+		"shipVia": 2,
+		"freight": 13.72,
+		"shipName": "Wellington Importadora",
+		"shipAddress": {
+			"street": "Rua do Mercado 12",
+			"city": "Resende",
+			"region": "SP",
+			"postalCode": "08737-363",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10914,
+		"customerID": "QUEEN",
+		"employeeID": 6,
+		"orderDate": "1998-02-27 00:00:00.000",
+		"requiredDate": "1998-03-27 00:00:00.000",
+		"shippedDate": "1998-03-02 00:00:00.000",
+		"shipVia": 1,
+		"freight": 21.19,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10906,
+		"customerID": "WOLZA",
+		"employeeID": 4,
+		"orderDate": "1998-02-25 00:00:00.000",
+		"requiredDate": "1998-03-11 00:00:00.000",
+		"shippedDate": "1998-03-03 00:00:00.000",
+		"shipVia": 3,
+		"freight": 26.29,
+		"shipName": "Wolski Zajazd",
+		"shipAddress": {
+			"street": "ul. Filtrowa 68",
+			"city": "Warszawa",
+			"region": "NULL",
+			"postalCode": "01-012",
+			"country": "Poland"
+		},
+		"details": [
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10907,
+		"customerID": "SPECD",
+		"employeeID": 6,
+		"orderDate": "1998-02-25 00:00:00.000",
+		"requiredDate": "1998-03-25 00:00:00.000",
+		"shippedDate": "1998-02-27 00:00:00.000",
+		"shipVia": 3,
+		"freight": 9.19,
+		"shipName": "Spécialités du monde",
+		"shipAddress": {
+			"street": "25 rue Lauriston",
+			"city": "Paris",
+			"region": "NULL",
+			"postalCode": 75016,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 14,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10920,
+		"customerID": "AROUT",
+		"employeeID": 4,
+		"orderDate": "1998-03-03 00:00:00.000",
+		"requiredDate": "1998-03-31 00:00:00.000",
+		"shippedDate": "1998-03-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 29.61,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 50,
+				"unitPrice": 16.25,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10934,
+		"customerID": "LEHMS",
+		"employeeID": 3,
+		"orderDate": "1998-03-09 00:00:00.000",
+		"requiredDate": "1998-04-06 00:00:00.000",
+		"shippedDate": "1998-03-12 00:00:00.000",
+		"shipVia": 3,
+		"freight": 32.01,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 6,
+				"unitPrice": 25,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10936,
+		"customerID": "GREAL",
+		"employeeID": 3,
+		"orderDate": "1998-03-09 00:00:00.000",
+		"requiredDate": "1998-04-06 00:00:00.000",
+		"shippedDate": "1998-03-18 00:00:00.000",
+		"shipVia": 2,
+		"freight": 33.68,
+		"shipName": "Great Lakes Food Market",
+		"shipAddress": {
+			"street": "2732 Baker Blvd.",
+			"city": "Eugene",
+			"region": "OR",
+			"postalCode": 97403,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 30,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10942,
+		"customerID": "REGGC",
+		"employeeID": 9,
+		"orderDate": "1998-03-11 00:00:00.000",
+		"requiredDate": "1998-04-08 00:00:00.000",
+		"shippedDate": "1998-03-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 17.95,
+		"shipName": "Reggiani Caseifici",
+		"shipAddress": {
+			"street": "Strada Provinciale 124",
+			"city": "Reggio Emilia",
+			"region": "NULL",
+			"postalCode": 42100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 49,
+				"unitPrice": 20,
+				"quantity": 28,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10947,
+		"customerID": "BSBEV",
+		"employeeID": 3,
+		"orderDate": "1998-03-13 00:00:00.000",
+		"requiredDate": "1998-04-10 00:00:00.000",
+		"shippedDate": "1998-03-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.26,
+		"shipName": "B's Beverages",
+		"shipAddress": {
+			"street": "Fauntleroy Circus",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "EC2 5NT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 4,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10955,
+		"customerID": "FOLKO",
+		"employeeID": 8,
+		"orderDate": "1998-03-17 00:00:00.000",
+		"requiredDate": "1998-04-14 00:00:00.000",
+		"shippedDate": "1998-03-20 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.26,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 12,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10950,
+		"customerID": "MAGAA",
+		"employeeID": 1,
+		"orderDate": "1998-03-16 00:00:00.000",
+		"requiredDate": "1998-04-13 00:00:00.000",
+		"shippedDate": "1998-03-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 2.5,
+		"shipName": "Magazzini Alimentari Riuniti",
+		"shipAddress": {
+			"street": "Via Ludovico il Moro 22",
+			"city": "Bergamo",
+			"region": "NULL",
+			"postalCode": 24100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10963,
+		"customerID": "FURIB",
+		"employeeID": 9,
+		"orderDate": "1998-03-19 00:00:00.000",
+		"requiredDate": "1998-04-16 00:00:00.000",
+		"shippedDate": "1998-03-26 00:00:00.000",
+		"shipVia": 3,
+		"freight": 2.7,
+		"shipName": "Furia Bacalhau e Frutos do Mar",
+		"shipAddress": {
+			"street": "Jardim das rosas n. 32",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1675,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 2,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10969,
+		"customerID": "COMMI",
+		"employeeID": 1,
+		"orderDate": "1998-03-23 00:00:00.000",
+		"requiredDate": "1998-04-20 00:00:00.000",
+		"shippedDate": "1998-03-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 0.21,
+		"shipName": "Comércio Mineiro",
+		"shipAddress": {
+			"street": "Av. dos Lusíadas 23",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05432-043",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10970,
+		"customerID": "BOLID",
+		"employeeID": 9,
+		"orderDate": "1998-03-24 00:00:00.000",
+		"requiredDate": "1998-04-07 00:00:00.000",
+		"shippedDate": "1998-04-24 00:00:00.000",
+		"shipVia": 1,
+		"freight": 16.16,
+		"shipName": "Bólido Comidas preparadas",
+		"shipAddress": {
+			"street": "C/ Araquil 67",
+			"city": "Madrid",
+			"region": "NULL",
+			"postalCode": 28023,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 40,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10971,
+		"customerID": "FRANR",
+		"employeeID": 2,
+		"orderDate": "1998-03-24 00:00:00.000",
+		"requiredDate": "1998-04-21 00:00:00.000",
+		"shippedDate": "1998-04-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 121.82,
+		"shipName": "France restauration",
+		"shipAddress": {
+			"street": "54 rue Royale",
+			"city": "Nantes",
+			"region": "NULL",
+			"postalCode": 44000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 14,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10965,
+		"customerID": "OLDWO",
+		"employeeID": 6,
+		"orderDate": "1998-03-20 00:00:00.000",
+		"requiredDate": "1998-04-17 00:00:00.000",
+		"shippedDate": "1998-03-30 00:00:00.000",
+		"shipVia": 3,
+		"freight": 144.38,
+		"shipName": "Old World Delicatessen",
+		"shipAddress": {
+			"street": "2743 Bering St.",
+			"city": "Anchorage",
+			"region": "AK",
+			"postalCode": 99508,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 16,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10974,
+		"customerID": "SPLIR",
+		"employeeID": 3,
+		"orderDate": "1998-03-25 00:00:00.000",
+		"requiredDate": "1998-04-08 00:00:00.000",
+		"shippedDate": "1998-04-03 00:00:00.000",
+		"shipVia": 3,
+		"freight": 12.96,
+		"shipName": "Split Rail Beer & Ale",
+		"shipAddress": {
+			"street": "P.O. Box 555",
+			"city": "Lander",
+			"region": "WY",
+			"postalCode": 82520,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 63,
+				"unitPrice": 43.9,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10980,
+		"customerID": "FOLKO",
+		"employeeID": 4,
+		"orderDate": "1998-03-27 00:00:00.000",
+		"requiredDate": "1998-05-08 00:00:00.000",
+		"shippedDate": "1998-04-17 00:00:00.000",
+		"shipVia": 1,
+		"freight": 1.26,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 40,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10981,
+		"customerID": "HANAR",
+		"employeeID": 1,
+		"orderDate": "1998-03-27 00:00:00.000",
+		"requiredDate": "1998-04-24 00:00:00.000",
+		"shippedDate": "1998-04-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 193.37,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 60,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10959,
+		"customerID": "GOURL",
+		"employeeID": 6,
+		"orderDate": "1998-03-18 00:00:00.000",
+		"requiredDate": "1998-04-29 00:00:00.000",
+		"shippedDate": "1998-03-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 4.98,
+		"shipName": "Gourmet Lanchonetes",
+		"shipAddress": {
+			"street": "Av. Brasil 442",
+			"city": "Campinas",
+			"region": "SP",
+			"postalCode": "04876-786",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 20,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10992,
+		"customerID": "THEBI",
+		"employeeID": 1,
+		"orderDate": "1998-04-01 00:00:00.000",
+		"requiredDate": "1998-04-29 00:00:00.000",
+		"shippedDate": "1998-04-03 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.27,
+		"shipName": "The Big Cheese",
+		"shipAddress": {
+			"street": "89 Jefferson Way Suite 2",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97201,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 2,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10994,
+		"customerID": "VAFFE",
+		"employeeID": 2,
+		"orderDate": "1998-04-02 00:00:00.000",
+		"requiredDate": "1998-04-16 00:00:00.000",
+		"shippedDate": "1998-04-09 00:00:00.000",
+		"shipVia": 3,
+		"freight": 65.53,
+		"shipName": "Vaffeljernet",
+		"shipAddress": {
+			"street": "Smagsloget 45",
+			"city": "Århus",
+			"region": "NULL",
+			"postalCode": 8200,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 18,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10996,
+		"customerID": "QUICK",
+		"employeeID": 4,
+		"orderDate": "1998-04-02 00:00:00.000",
+		"requiredDate": "1998-04-30 00:00:00.000",
+		"shippedDate": "1998-04-10 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.12,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 11014,
+		"customerID": "LINOD",
+		"employeeID": 2,
+		"orderDate": "1998-04-10 00:00:00.000",
+		"requiredDate": "1998-05-08 00:00:00.000",
+		"shippedDate": "1998-04-15 00:00:00.000",
+		"shipVia": 3,
+		"freight": 23.6,
+		"shipName": "LINO-Delicateses",
+		"shipAddress": {
+			"street": "Ave. 5 de Mayo Porlamar",
+			"city": "I. de Margarita",
+			"region": "Nueva Esparta",
+			"postalCode": 4980,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 28,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 11020,
+		"customerID": "OTTIK",
+		"employeeID": 2,
+		"orderDate": "1998-04-14 00:00:00.000",
+		"requiredDate": "1998-05-12 00:00:00.000",
+		"shippedDate": "1998-04-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 43.3,
+		"shipName": "Ottilies Käseladen",
+		"shipAddress": {
+			"street": "Mehrheimerstr. 369",
+			"city": "Köln",
+			"region": "NULL",
+			"postalCode": 50739,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 24,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 11040,
+		"customerID": "GREAL",
+		"employeeID": 4,
+		"orderDate": "1998-04-22 00:00:00.000",
+		"requiredDate": "1998-05-20 00:00:00.000",
+		"shippedDate": "NULL",
+		"shipVia": 3,
+		"freight": 18.84,
+		"shipName": "Great Lakes Food Market",
+		"shipAddress": {
+			"street": "2732 Baker Blvd.",
+			"city": "Eugene",
+			"region": "OR",
+			"postalCode": 97403,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 11043,
+		"customerID": "SPECD",
+		"employeeID": 5,
+		"orderDate": "1998-04-22 00:00:00.000",
+		"requiredDate": "1998-05-20 00:00:00.000",
+		"shippedDate": "1998-04-29 00:00:00.000",
+		"shipVia": 2,
+		"freight": 8.8,
+		"shipName": "Spécialités du monde",
+		"shipAddress": {
+			"street": "25 rue Lauriston",
+			"city": "Paris",
+			"region": "NULL",
+			"postalCode": 75016,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 11044,
+		"customerID": "WOLZA",
+		"employeeID": 4,
+		"orderDate": "1998-04-23 00:00:00.000",
+		"requiredDate": "1998-05-21 00:00:00.000",
+		"shippedDate": "1998-05-01 00:00:00.000",
+		"shipVia": 1,
+		"freight": 8.72,
+		"shipName": "Wolski Zajazd",
+		"shipAddress": {
+			"street": "ul. Filtrowa 68",
+			"city": "Warszawa",
+			"region": "NULL",
+			"postalCode": "01-012",
+			"country": "Poland"
+		},
+		"details": [
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 11048,
+		"customerID": "BOTTM",
+		"employeeID": 7,
+		"orderDate": "1998-04-24 00:00:00.000",
+		"requiredDate": "1998-05-22 00:00:00.000",
+		"shippedDate": "1998-04-30 00:00:00.000",
+		"shipVia": 3,
+		"freight": 24.12,
+		"shipName": "Bottom-Dollar Markets",
+		"shipAddress": {
+			"street": "23 Tsawassen Blvd.",
+			"city": "Tsawassen",
+			"region": "BC",
+			"postalCode": "T2F 8M4",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 42,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 11037,
+		"customerID": "GODOS",
+		"employeeID": 7,
+		"orderDate": "1998-04-21 00:00:00.000",
+		"requiredDate": "1998-05-19 00:00:00.000",
+		"shippedDate": "1998-04-27 00:00:00.000",
+		"shipVia": 1,
+		"freight": 3.2,
+		"shipName": "Godos Cocina Típica",
+		"shipAddress": {
+			"street": "C/ Romero 33",
+			"city": "Sevilla",
+			"region": "NULL",
+			"postalCode": 41101,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 4,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 11050,
+		"customerID": "FOLKO",
+		"employeeID": 8,
+		"orderDate": "1998-04-27 00:00:00.000",
+		"requiredDate": "1998-05-25 00:00:00.000",
+		"shippedDate": "1998-05-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 59.41,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 50,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 11057,
+		"customerID": "NORTS",
+		"employeeID": 3,
+		"orderDate": "1998-04-29 00:00:00.000",
+		"requiredDate": "1998-05-27 00:00:00.000",
+		"shippedDate": "1998-05-01 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.13,
+		"shipName": "North/South",
+		"shipAddress": {
+			"street": "South House 300 Queensbridge",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "SW7 1RZ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 11061,
+		"customerID": "GREAL",
+		"employeeID": 4,
+		"orderDate": "1998-04-30 00:00:00.000",
+		"requiredDate": "1998-06-11 00:00:00.000",
+		"shippedDate": "NULL",
+		"shipVia": 3,
+		"freight": 14.01,
+		"shipName": "Great Lakes Food Market",
+		"shipAddress": {
+			"street": "2732 Baker Blvd.",
+			"city": "Eugene",
+			"region": "OR",
+			"postalCode": 97403,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 11051,
+		"customerID": "LAMAI",
+		"employeeID": 7,
+		"orderDate": "1998-04-27 00:00:00.000",
+		"requiredDate": "1998-05-25 00:00:00.000",
+		"shippedDate": "NULL",
+		"shipVia": 3,
+		"freight": 2.79,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 10,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 11067,
+		"customerID": "DRACD",
+		"employeeID": 1,
+		"orderDate": "1998-05-04 00:00:00.000",
+		"requiredDate": "1998-05-18 00:00:00.000",
+		"shippedDate": "1998-05-06 00:00:00.000",
+		"shipVia": 2,
+		"freight": 7.98,
+		"shipName": "Drachenblut Delikatessen",
+		"shipAddress": {
+			"street": "Walserweg 21",
+			"city": "Aachen",
+			"region": "NULL",
+			"postalCode": 52066,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 11069,
+		"customerID": "TORTU",
+		"employeeID": 1,
+		"orderDate": "1998-05-04 00:00:00.000",
+		"requiredDate": "1998-06-01 00:00:00.000",
+		"shippedDate": "1998-05-06 00:00:00.000",
+		"shipVia": 2,
+		"freight": 15.67,
+		"shipName": "Tortuga Restaurante",
+		"shipAddress": {
+			"street": "Avda. Azteca 123",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 11074,
+		"customerID": "SIMOB",
+		"employeeID": 7,
+		"orderDate": "1998-05-06 00:00:00.000",
+		"requiredDate": "1998-06-03 00:00:00.000",
+		"shippedDate": "NULL",
+		"shipVia": 2,
+		"freight": 18.44,
+		"shipName": "Simons bistro",
+		"shipAddress": {
+			"street": "Vinbæltet 34",
+			"city": "Kobenhavn",
+			"region": "NULL",
+			"postalCode": 1734,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 14,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10248,
+		"customerID": "VINET",
+		"employeeID": 5,
+		"orderDate": "1996-07-04 00:00:00.000",
+		"requiredDate": "1996-08-01 00:00:00.000",
+		"shippedDate": "1996-07-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 32.38,
+		"shipName": "Vins et alcools Chevalier",
+		"shipAddress": {
+			"street": "59 rue de l'Abbaye",
+			"city": "Reims",
+			"region": "NULL",
+			"postalCode": 51100,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 14,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 42,
+				"unitPrice": 9.8,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10249,
+		"customerID": "TOMSP",
+		"employeeID": 6,
+		"orderDate": "1996-07-05 00:00:00.000",
+		"requiredDate": "1996-08-16 00:00:00.000",
+		"shippedDate": "1996-07-10 00:00:00.000",
+		"shipVia": 1,
+		"freight": 11.61,
+		"shipName": "Toms Spezialitäten",
+		"shipAddress": {
+			"street": "Luisenstr. 48",
+			"city": "Münster",
+			"region": "NULL",
+			"postalCode": 44087,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 18.6,
+				"quantity": 9,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 42.4,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10250,
+		"customerID": "HANAR",
+		"employeeID": 4,
+		"orderDate": "1996-07-08 00:00:00.000",
+		"requiredDate": "1996-08-05 00:00:00.000",
+		"shippedDate": "1996-07-12 00:00:00.000",
+		"shipVia": 2,
+		"freight": 65.83,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 42.4,
+				"quantity": 35,
+				"discount": 0.15
+			},
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 15,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10252,
+		"customerID": "SUPRD",
+		"employeeID": 4,
+		"orderDate": "1996-07-09 00:00:00.000",
+		"requiredDate": "1996-08-06 00:00:00.000",
+		"shippedDate": "1996-07-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 51.3,
+		"shipName": "Suprêmes délices",
+		"shipAddress": {
+			"street": "Boulevard Tirou 255",
+			"city": "Charleroi",
+			"region": "NULL",
+			"postalCode": "B-6000",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 20,
+				"unitPrice": 64.8,
+				"quantity": 40,
+				"discount": 0.05
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 25,
+				"discount": 0.05
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10253,
+		"customerID": "HANAR",
+		"employeeID": 3,
+		"orderDate": "1996-07-10 00:00:00.000",
+		"requiredDate": "1996-07-24 00:00:00.000",
+		"shippedDate": "1996-07-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 58.17,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 42,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 16,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10251,
+		"customerID": "VICTE",
+		"employeeID": 3,
+		"orderDate": "1996-07-08 00:00:00.000",
+		"requiredDate": "1996-08-05 00:00:00.000",
+		"shippedDate": "1996-07-15 00:00:00.000",
+		"shipVia": 1,
+		"freight": 41.34,
+		"shipName": "Victuailles en stock",
+		"shipAddress": {
+			"street": "2 rue du Commerce",
+			"city": "Lyon",
+			"region": "NULL",
+			"postalCode": 69004,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 22,
+				"unitPrice": 16.8,
+				"quantity": 6,
+				"discount": 0.05
+			},
+			{
+				"productID": 57,
+				"unitPrice": 15.6,
+				"quantity": 15,
+				"discount": 0.05
+			},
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10257,
+		"customerID": "HILAA",
+		"employeeID": 4,
+		"orderDate": "1996-07-16 00:00:00.000",
+		"requiredDate": "1996-08-13 00:00:00.000",
+		"shippedDate": "1996-07-22 00:00:00.000",
+		"shipVia": 3,
+		"freight": 81.91,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 27,
+				"unitPrice": 35.1,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10258,
+		"customerID": "ERNSH",
+		"employeeID": 1,
+		"orderDate": "1996-07-17 00:00:00.000",
+		"requiredDate": "1996-08-14 00:00:00.000",
+		"shippedDate": "1996-07-23 00:00:00.000",
+		"shipVia": 1,
+		"freight": 140.51,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 50,
+				"discount": 0.2
+			},
+			{
+				"productID": 5,
+				"unitPrice": 17,
+				"quantity": 65,
+				"discount": 0.2
+			},
+			{
+				"productID": 32,
+				"unitPrice": 25.6,
+				"quantity": 6,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10259,
+		"customerID": "CENTC",
+		"employeeID": 4,
+		"orderDate": "1996-07-18 00:00:00.000",
+		"requiredDate": "1996-08-15 00:00:00.000",
+		"shippedDate": "1996-07-25 00:00:00.000",
+		"shipVia": 3,
+		"freight": 3.25,
+		"shipName": "Centro comercial Moctezuma",
+		"shipAddress": {
+			"street": "Sierras de Granada 9993",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5022,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 37,
+				"unitPrice": 20.8,
+				"quantity": 1,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10260,
+		"customerID": "OTTIK",
+		"employeeID": 4,
+		"orderDate": "1996-07-19 00:00:00.000",
+		"requiredDate": "1996-08-16 00:00:00.000",
+		"shippedDate": "1996-07-29 00:00:00.000",
+		"shipVia": 1,
+		"freight": 55.09,
+		"shipName": "Ottilies Käseladen",
+		"shipAddress": {
+			"street": "Mehrheimerstr. 369",
+			"city": "Köln",
+			"region": "NULL",
+			"postalCode": 50739,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 16,
+				"discount": 0.25
+			},
+			{
+				"productID": 57,
+				"unitPrice": 15.6,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 15,
+				"discount": 0.25
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 21,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10261,
+		"customerID": "QUEDE",
+		"employeeID": 4,
+		"orderDate": "1996-07-19 00:00:00.000",
+		"requiredDate": "1996-08-16 00:00:00.000",
+		"shippedDate": "1996-07-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.05,
+		"shipName": "Que Delícia",
+		"shipAddress": {
+			"street": "Rua da Panificadora 12",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-673",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 35,
+				"unitPrice": 14.4,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10262,
+		"customerID": "RATTC",
+		"employeeID": 8,
+		"orderDate": "1996-07-22 00:00:00.000",
+		"requiredDate": "1996-08-19 00:00:00.000",
+		"shippedDate": "1996-07-25 00:00:00.000",
+		"shipVia": 3,
+		"freight": 48.29,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 5,
+				"unitPrice": 17,
+				"quantity": 12,
+				"discount": 0.2
+			},
+			{
+				"productID": 7,
+				"unitPrice": 24,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 2,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10256,
+		"customerID": "WELLI",
+		"employeeID": 3,
+		"orderDate": "1996-07-15 00:00:00.000",
+		"requiredDate": "1996-08-12 00:00:00.000",
+		"shippedDate": "1996-07-17 00:00:00.000",
+		"shipVia": 2,
+		"freight": 13.97,
+		"shipName": "Wellington Importadora",
+		"shipAddress": {
+			"street": "Rua do Mercado 12",
+			"city": "Resende",
+			"region": "SP",
+			"postalCode": "08737-363",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10255,
+		"customerID": "RICSU",
+		"employeeID": 9,
+		"orderDate": "1996-07-12 00:00:00.000",
+		"requiredDate": "1996-08-09 00:00:00.000",
+		"shippedDate": "1996-07-15 00:00:00.000",
+		"shipVia": 3,
+		"freight": 148.33,
+		"shipName": "Richter Supermarkt",
+		"shipAddress": {
+			"street": "Starenweg 5",
+			"city": "Genève",
+			"region": "NULL",
+			"postalCode": 1204,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 36,
+				"unitPrice": 15.2,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10264,
+		"customerID": "FOLKO",
+		"employeeID": 6,
+		"orderDate": "1996-07-24 00:00:00.000",
+		"requiredDate": "1996-08-21 00:00:00.000",
+		"shippedDate": "1996-08-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 3.67,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 25,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10265,
+		"customerID": "BLONP",
+		"employeeID": 2,
+		"orderDate": "1996-07-25 00:00:00.000",
+		"requiredDate": "1996-08-22 00:00:00.000",
+		"shippedDate": "1996-08-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 55.28,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10254,
+		"customerID": "CHOPS",
+		"employeeID": 5,
+		"orderDate": "1996-07-11 00:00:00.000",
+		"requiredDate": "1996-08-08 00:00:00.000",
+		"shippedDate": "1996-07-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 22.98,
+		"shipName": "Chop-suey Chinese",
+		"shipAddress": {
+			"street": "Hauptstr. 31",
+			"city": "Bern",
+			"region": "NULL",
+			"postalCode": 3012,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 15,
+				"discount": 0.15
+			},
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 21,
+				"discount": 0.15
+			},
+			{
+				"productID": 74,
+				"unitPrice": 8,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10263,
+		"customerID": "ERNSH",
+		"employeeID": 9,
+		"orderDate": "1996-07-23 00:00:00.000",
+		"requiredDate": "1996-08-20 00:00:00.000",
+		"shippedDate": "1996-07-31 00:00:00.000",
+		"shipVia": 3,
+		"freight": 146.06,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 60,
+				"discount": 0.25
+			},
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 28,
+				"discount": 0
+			},
+			{
+				"productID": 30,
+				"unitPrice": 20.7,
+				"quantity": 60,
+				"discount": 0.25
+			},
+			{
+				"productID": 74,
+				"unitPrice": 8,
+				"quantity": 36,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10268,
+		"customerID": "GROSR",
+		"employeeID": 8,
+		"orderDate": "1996-07-30 00:00:00.000",
+		"requiredDate": "1996-08-27 00:00:00.000",
+		"shippedDate": "1996-08-02 00:00:00.000",
+		"shipVia": 3,
+		"freight": 66.29,
+		"shipName": "GROSELLA-Restaurante",
+		"shipAddress": {
+			"street": "5ª Ave. Los Palos Grandes",
+			"city": "Caracas",
+			"region": "DF",
+			"postalCode": 1081,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 99,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 4,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10267,
+		"customerID": "FRANK",
+		"employeeID": 4,
+		"orderDate": "1996-07-29 00:00:00.000",
+		"requiredDate": "1996-08-26 00:00:00.000",
+		"shippedDate": "1996-08-06 00:00:00.000",
+		"shipVia": 1,
+		"freight": 208.58,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 15,
+				"discount": 0.15
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 70,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10270,
+		"customerID": "WARTH",
+		"employeeID": 1,
+		"orderDate": "1996-08-01 00:00:00.000",
+		"requiredDate": "1996-08-29 00:00:00.000",
+		"shippedDate": "1996-08-02 00:00:00.000",
+		"shipVia": 1,
+		"freight": 136.54,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 15.2,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 36.8,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10274,
+		"customerID": "VINET",
+		"employeeID": 6,
+		"orderDate": "1996-08-06 00:00:00.000",
+		"requiredDate": "1996-09-03 00:00:00.000",
+		"shippedDate": "1996-08-16 00:00:00.000",
+		"shipVia": 1,
+		"freight": 6.01,
+		"shipName": "Vins et alcools Chevalier",
+		"shipAddress": {
+			"street": "59 rue de l'Abbaye",
+			"city": "Reims",
+			"region": "NULL",
+			"postalCode": 51100,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 7,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10275,
+		"customerID": "MAGAA",
+		"employeeID": 1,
+		"orderDate": "1996-08-07 00:00:00.000",
+		"requiredDate": "1996-09-04 00:00:00.000",
+		"shippedDate": "1996-08-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 26.93,
+		"shipName": "Magazzini Alimentari Riuniti",
+		"shipAddress": {
+			"street": "Via Ludovico il Moro 22",
+			"city": "Bergamo",
+			"region": "NULL",
+			"postalCode": 24100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 12,
+				"discount": 0.05
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 6,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10276,
+		"customerID": "TORTU",
+		"employeeID": 8,
+		"orderDate": "1996-08-08 00:00:00.000",
+		"requiredDate": "1996-08-22 00:00:00.000",
+		"shippedDate": "1996-08-14 00:00:00.000",
+		"shipVia": 3,
+		"freight": 13.84,
+		"shipName": "Tortuga Restaurante",
+		"shipAddress": {
+			"street": "Avda. Azteca 123",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 24.8,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 13,
+				"unitPrice": 4.8,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10277,
+		"customerID": "MORGK",
+		"employeeID": 2,
+		"orderDate": "1996-08-09 00:00:00.000",
+		"requiredDate": "1996-09-06 00:00:00.000",
+		"shippedDate": "1996-08-13 00:00:00.000",
+		"shipVia": 3,
+		"freight": 125.77,
+		"shipName": "Morgenstern Gesundkost",
+		"shipAddress": {
+			"street": "Heerstr. 22",
+			"city": "Leipzig",
+			"region": "NULL",
+			"postalCode": 4179,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10273,
+		"customerID": "QUICK",
+		"employeeID": 3,
+		"orderDate": "1996-08-05 00:00:00.000",
+		"requiredDate": "1996-09-02 00:00:00.000",
+		"shippedDate": "1996-08-12 00:00:00.000",
+		"shipVia": 3,
+		"freight": 76.07,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 15,
+				"discount": 0.05
+			},
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 60,
+				"discount": 0.05
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 33,
+				"discount": 0.05
+			},
+			{
+				"productID": 10,
+				"unitPrice": 24.8,
+				"quantity": 24,
+				"discount": 0.05
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10272,
+		"customerID": "RATTC",
+		"employeeID": 6,
+		"orderDate": "1996-08-02 00:00:00.000",
+		"requiredDate": "1996-08-30 00:00:00.000",
+		"shippedDate": "1996-08-06 00:00:00.000",
+		"shipVia": 2,
+		"freight": 98.03,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 20,
+				"unitPrice": 64.8,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10278,
+		"customerID": "BERGS",
+		"employeeID": 8,
+		"orderDate": "1996-08-12 00:00:00.000",
+		"requiredDate": "1996-09-09 00:00:00.000",
+		"shippedDate": "1996-08-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 92.69,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 73,
+				"unitPrice": 12,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 63,
+				"unitPrice": 35.1,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 44,
+				"unitPrice": 15.5,
+				"quantity": 16,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10269,
+		"customerID": "WHITC",
+		"employeeID": 5,
+		"orderDate": "1996-07-31 00:00:00.000",
+		"requiredDate": "1996-08-14 00:00:00.000",
+		"shippedDate": "1996-08-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 4.56,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 60,
+				"discount": 0.05
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10280,
+		"customerID": "BERGS",
+		"employeeID": 2,
+		"orderDate": "1996-08-14 00:00:00.000",
+		"requiredDate": "1996-09-11 00:00:00.000",
+		"shippedDate": "1996-09-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 8.98,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10281,
+		"customerID": "ROMEY",
+		"employeeID": 4,
+		"orderDate": "1996-08-14 00:00:00.000",
+		"requiredDate": "1996-08-28 00:00:00.000",
+		"shippedDate": "1996-08-21 00:00:00.000",
+		"shipVia": 1,
+		"freight": 2.94,
+		"shipName": "Romero y tomillo",
+		"shipAddress": {
+			"street": "Gran Vía 1",
+			"city": "Madrid",
+			"region": "NULL",
+			"postalCode": 28001,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 1,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 35,
+				"unitPrice": 14.4,
+				"quantity": 4,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10282,
+		"customerID": "ROMEY",
+		"employeeID": 4,
+		"orderDate": "1996-08-15 00:00:00.000",
+		"requiredDate": "1996-09-12 00:00:00.000",
+		"shippedDate": "1996-08-21 00:00:00.000",
+		"shipVia": 1,
+		"freight": 12.69,
+		"shipName": "Romero y tomillo",
+		"shipAddress": {
+			"street": "Gran Vía 1",
+			"city": "Madrid",
+			"region": "NULL",
+			"postalCode": 28001,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 20.7,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 57,
+				"unitPrice": 15.6,
+				"quantity": 2,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10283,
+		"customerID": "LILAS",
+		"employeeID": 3,
+		"orderDate": "1996-08-16 00:00:00.000",
+		"requiredDate": "1996-09-13 00:00:00.000",
+		"shippedDate": "1996-08-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 84.81,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 15,
+				"unitPrice": 12.4,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10284,
+		"customerID": "LEHMS",
+		"employeeID": 4,
+		"orderDate": "1996-08-19 00:00:00.000",
+		"requiredDate": "1996-09-16 00:00:00.000",
+		"shippedDate": "1996-08-27 00:00:00.000",
+		"shipVia": 1,
+		"freight": 76.56,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 27,
+				"unitPrice": 35.1,
+				"quantity": 15,
+				"discount": 0.25
+			},
+			{
+				"productID": 44,
+				"unitPrice": 15.5,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 20,
+				"discount": 0.25
+			},
+			{
+				"productID": 67,
+				"unitPrice": 11.2,
+				"quantity": 5,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10285,
+		"customerID": "QUICK",
+		"employeeID": 1,
+		"orderDate": "1996-08-20 00:00:00.000",
+		"requiredDate": "1996-09-17 00:00:00.000",
+		"shippedDate": "1996-08-26 00:00:00.000",
+		"shipVia": 2,
+		"freight": 76.83,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 14.4,
+				"quantity": 45,
+				"discount": 0.2
+			},
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 40,
+				"discount": 0.2
+			},
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 36,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10286,
+		"customerID": "QUICK",
+		"employeeID": 8,
+		"orderDate": "1996-08-21 00:00:00.000",
+		"requiredDate": "1996-09-18 00:00:00.000",
+		"shippedDate": "1996-08-30 00:00:00.000",
+		"shipVia": 3,
+		"freight": 229.24,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 14.4,
+				"quantity": 100,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10287,
+		"customerID": "RICAR",
+		"employeeID": 8,
+		"orderDate": "1996-08-22 00:00:00.000",
+		"requiredDate": "1996-09-19 00:00:00.000",
+		"shippedDate": "1996-08-28 00:00:00.000",
+		"shipVia": 3,
+		"freight": 12.76,
+		"shipName": "Ricardo Adocicados",
+		"shipAddress": {
+			"street": "Av. Copacabana 267",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-890",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 40,
+				"discount": 0.15
+			},
+			{
+				"productID": 34,
+				"unitPrice": 11.2,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 46,
+				"unitPrice": 9.6,
+				"quantity": 15,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10288,
+		"customerID": "REGGC",
+		"employeeID": 4,
+		"orderDate": "1996-08-23 00:00:00.000",
+		"requiredDate": "1996-09-20 00:00:00.000",
+		"shippedDate": "1996-09-03 00:00:00.000",
+		"shipVia": 1,
+		"freight": 7.45,
+		"shipName": "Reggiani Caseifici",
+		"shipAddress": {
+			"street": "Strada Provinciale 124",
+			"city": "Reggio Emilia",
+			"region": "NULL",
+			"postalCode": 42100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 10,
+				"discount": 0.1
+			},
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 3,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10289,
+		"customerID": "BSBEV",
+		"employeeID": 7,
+		"orderDate": "1996-08-26 00:00:00.000",
+		"requiredDate": "1996-09-23 00:00:00.000",
+		"shippedDate": "1996-08-28 00:00:00.000",
+		"shipVia": 3,
+		"freight": 22.77,
+		"shipName": "B's Beverages",
+		"shipAddress": {
+			"street": "Fauntleroy Circus",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "EC2 5NT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 3,
+				"unitPrice": 8,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 26.6,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10290,
+		"customerID": "COMMI",
+		"employeeID": 8,
+		"orderDate": "1996-08-27 00:00:00.000",
+		"requiredDate": "1996-09-24 00:00:00.000",
+		"shippedDate": "1996-09-03 00:00:00.000",
+		"shipVia": 1,
+		"freight": 79.7,
+		"shipName": "Comércio Mineiro",
+		"shipAddress": {
+			"street": "Av. dos Lusíadas 23",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05432-043",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 5,
+				"unitPrice": 17,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 29,
+				"unitPrice": 99,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 16,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10291,
+		"customerID": "QUEDE",
+		"employeeID": 6,
+		"orderDate": "1996-08-27 00:00:00.000",
+		"requiredDate": "1996-09-24 00:00:00.000",
+		"shippedDate": "1996-09-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 6.4,
+		"shipName": "Que Delícia",
+		"shipAddress": {
+			"street": "Rua da Panificadora 12",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-673",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 4.8,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 44,
+				"unitPrice": 15.5,
+				"quantity": 24,
+				"discount": 0.1
+			},
+			{
+				"productID": 51,
+				"unitPrice": 42.4,
+				"quantity": 2,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10296,
+		"customerID": "LILAS",
+		"employeeID": 6,
+		"orderDate": "1996-09-03 00:00:00.000",
+		"requiredDate": "1996-10-01 00:00:00.000",
+		"shippedDate": "1996-09-11 00:00:00.000",
+		"shipVia": 1,
+		"freight": 0.12,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10297,
+		"customerID": "BLONP",
+		"employeeID": 5,
+		"orderDate": "1996-09-04 00:00:00.000",
+		"requiredDate": "1996-10-16 00:00:00.000",
+		"shippedDate": "1996-09-10 00:00:00.000",
+		"shipVia": 2,
+		"freight": 5.74,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10298,
+		"customerID": "HUNGO",
+		"employeeID": 6,
+		"orderDate": "1996-09-05 00:00:00.000",
+		"requiredDate": "1996-10-03 00:00:00.000",
+		"shippedDate": "1996-09-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 168.22,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 36,
+				"unitPrice": 15.2,
+				"quantity": 40,
+				"discount": 0.25
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 30,
+				"discount": 0.25
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10299,
+		"customerID": "RICAR",
+		"employeeID": 4,
+		"orderDate": "1996-09-06 00:00:00.000",
+		"requiredDate": "1996-10-04 00:00:00.000",
+		"shippedDate": "1996-09-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 29.76,
+		"shipName": "Ricardo Adocicados",
+		"shipAddress": {
+			"street": "Av. Copacabana 267",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-890",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10300,
+		"customerID": "MAGAA",
+		"employeeID": 2,
+		"orderDate": "1996-09-09 00:00:00.000",
+		"requiredDate": "1996-10-07 00:00:00.000",
+		"shippedDate": "1996-09-18 00:00:00.000",
+		"shipVia": 2,
+		"freight": 17.68,
+		"shipName": "Magazzini Alimentari Riuniti",
+		"shipAddress": {
+			"street": "Via Ludovico il Moro 22",
+			"city": "Bergamo",
+			"region": "NULL",
+			"postalCode": 24100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 66,
+				"unitPrice": 13.6,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10301,
+		"customerID": "WANDK",
+		"employeeID": 8,
+		"orderDate": "1996-09-09 00:00:00.000",
+		"requiredDate": "1996-10-07 00:00:00.000",
+		"shippedDate": "1996-09-17 00:00:00.000",
+		"shipVia": 2,
+		"freight": 45.08,
+		"shipName": "Die Wandernde Kuh",
+		"shipAddress": {
+			"street": "Adenauerallee 900",
+			"city": "Stuttgart",
+			"region": "NULL",
+			"postalCode": 70563,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10293,
+		"customerID": "TORTU",
+		"employeeID": 1,
+		"orderDate": "1996-08-29 00:00:00.000",
+		"requiredDate": "1996-09-26 00:00:00.000",
+		"shippedDate": "1996-09-11 00:00:00.000",
+		"shipVia": 3,
+		"freight": 21.18,
+		"shipName": "Tortuga Restaurante",
+		"shipAddress": {
+			"street": "Avda. Azteca 123",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 50,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 63,
+				"unitPrice": 35.1,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10294,
+		"customerID": "RATTC",
+		"employeeID": 4,
+		"orderDate": "1996-08-30 00:00:00.000",
+		"requiredDate": "1996-09-27 00:00:00.000",
+		"shippedDate": "1996-09-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 147.26,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 14.4,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 36.8,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10302,
+		"customerID": "SUPRD",
+		"employeeID": 4,
+		"orderDate": "1996-09-10 00:00:00.000",
+		"requiredDate": "1996-10-08 00:00:00.000",
+		"shippedDate": "1996-10-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 6.27,
+		"shipName": "Suprêmes délices",
+		"shipAddress": {
+			"street": "Boulevard Tirou 255",
+			"city": "Charleroi",
+			"region": "NULL",
+			"postalCode": "B-6000",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 28,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 36.8,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10303,
+		"customerID": "GODOS",
+		"employeeID": 7,
+		"orderDate": "1996-09-11 00:00:00.000",
+		"requiredDate": "1996-10-09 00:00:00.000",
+		"shippedDate": "1996-09-18 00:00:00.000",
+		"shipVia": 2,
+		"freight": 107.83,
+		"shipName": "Godos Cocina Típica",
+		"shipAddress": {
+			"street": "C/ Romero 33",
+			"city": "Sevilla",
+			"region": "NULL",
+			"postalCode": 41101,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 40,
+				"discount": 0.1
+			},
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 15,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10304,
+		"customerID": "TORTU",
+		"employeeID": 1,
+		"orderDate": "1996-09-12 00:00:00.000",
+		"requiredDate": "1996-10-10 00:00:00.000",
+		"shippedDate": "1996-09-17 00:00:00.000",
+		"shipVia": 2,
+		"freight": 63.79,
+		"shipName": "Tortuga Restaurante",
+		"shipAddress": {
+			"street": "Avda. Azteca 123",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 49,
+				"unitPrice": 16,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 2,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10306,
+		"customerID": "ROMEY",
+		"employeeID": 1,
+		"orderDate": "1996-09-16 00:00:00.000",
+		"requiredDate": "1996-10-14 00:00:00.000",
+		"shippedDate": "1996-09-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 7.56,
+		"shipName": "Romero y tomillo",
+		"shipAddress": {
+			"street": "Gran Vía 1",
+			"city": "Madrid",
+			"region": "NULL",
+			"postalCode": 28001,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 20.7,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10305,
+		"customerID": "OLDWO",
+		"employeeID": 8,
+		"orderDate": "1996-09-13 00:00:00.000",
+		"requiredDate": "1996-10-11 00:00:00.000",
+		"shippedDate": "1996-10-09 00:00:00.000",
+		"shipVia": 3,
+		"freight": 257.62,
+		"shipName": "Old World Delicatessen",
+		"shipAddress": {
+			"street": "2743 Bering St.",
+			"city": "Anchorage",
+			"region": "AK",
+			"postalCode": 99508,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 99,
+				"quantity": 25,
+				"discount": 0.1
+			},
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 18,
+				"unitPrice": 50,
+				"quantity": 25,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10307,
+		"customerID": "LONEP",
+		"employeeID": 2,
+		"orderDate": "1996-09-17 00:00:00.000",
+		"requiredDate": "1996-10-15 00:00:00.000",
+		"shippedDate": "1996-09-25 00:00:00.000",
+		"shipVia": 2,
+		"freight": 0.56,
+		"shipName": "Lonesome Pine Restaurant",
+		"shipAddress": {
+			"street": "89 Chiaroscuro Rd.",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97219,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10308,
+		"customerID": "ANATR",
+		"employeeID": 7,
+		"orderDate": "1996-09-18 00:00:00.000",
+		"requiredDate": "1996-10-16 00:00:00.000",
+		"shippedDate": "1996-09-24 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.61,
+		"shipName": "Ana Trujillo Emparedados y helados",
+		"shipAddress": {
+			"street": "Avda. de la Constitución 2222",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5021,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 1,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10309,
+		"customerID": "HUNGO",
+		"employeeID": 3,
+		"orderDate": "1996-09-19 00:00:00.000",
+		"requiredDate": "1996-10-17 00:00:00.000",
+		"shippedDate": "1996-10-23 00:00:00.000",
+		"shipVia": 1,
+		"freight": 47.3,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 17.6,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 6,
+				"unitPrice": 20,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 42,
+				"unitPrice": 11.2,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 36.8,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10310,
+		"customerID": "THEBI",
+		"employeeID": 8,
+		"orderDate": "1996-09-20 00:00:00.000",
+		"requiredDate": "1996-10-18 00:00:00.000",
+		"shippedDate": "1996-09-27 00:00:00.000",
+		"shipVia": 2,
+		"freight": 17.52,
+		"shipName": "The Big Cheese",
+		"shipAddress": {
+			"street": "89 Jefferson Way Suite 2",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97201,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10314,
+		"customerID": "RATTC",
+		"employeeID": 1,
+		"orderDate": "1996-09-25 00:00:00.000",
+		"requiredDate": "1996-10-23 00:00:00.000",
+		"shippedDate": "1996-10-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 74.16,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 32,
+				"unitPrice": 25.6,
+				"quantity": 40,
+				"discount": 0.1
+			},
+			{
+				"productID": 58,
+				"unitPrice": 10.6,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 25,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10315,
+		"customerID": "ISLAT",
+		"employeeID": 4,
+		"orderDate": "1996-09-26 00:00:00.000",
+		"requiredDate": "1996-10-24 00:00:00.000",
+		"shippedDate": "1996-10-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 41.76,
+		"shipName": "Island Trading",
+		"shipAddress": {
+			"street": "Garden House Crowther Way",
+			"city": "Cowes",
+			"region": "Isle of Wight",
+			"postalCode": "PO31 7PJ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 34,
+				"unitPrice": 11.2,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10316,
+		"customerID": "RATTC",
+		"employeeID": 1,
+		"orderDate": "1996-09-27 00:00:00.000",
+		"requiredDate": "1996-10-25 00:00:00.000",
+		"shippedDate": "1996-10-08 00:00:00.000",
+		"shipVia": 3,
+		"freight": 150.15,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 70,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10311,
+		"customerID": "DUMON",
+		"employeeID": 1,
+		"orderDate": "1996-09-20 00:00:00.000",
+		"requiredDate": "1996-10-04 00:00:00.000",
+		"shippedDate": "1996-09-26 00:00:00.000",
+		"shipVia": 3,
+		"freight": 24.69,
+		"shipName": "Du monde entier",
+		"shipAddress": {
+			"street": "67 rue des Cinquante Otages",
+			"city": "Nantes",
+			"region": "NULL",
+			"postalCode": 44000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 42,
+				"unitPrice": 11.2,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 7,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10312,
+		"customerID": "WANDK",
+		"employeeID": 2,
+		"orderDate": "1996-09-23 00:00:00.000",
+		"requiredDate": "1996-10-21 00:00:00.000",
+		"shippedDate": "1996-10-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 40.26,
+		"shipName": "Die Wandernde Kuh",
+		"shipAddress": {
+			"street": "Adenauerallee 900",
+			"city": "Stuttgart",
+			"region": "NULL",
+			"postalCode": 70563,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 43,
+				"unitPrice": 36.8,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 4,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10319,
+		"customerID": "TORTU",
+		"employeeID": 7,
+		"orderDate": "1996-10-02 00:00:00.000",
+		"requiredDate": "1996-10-30 00:00:00.000",
+		"shippedDate": "1996-10-11 00:00:00.000",
+		"shipVia": 3,
+		"freight": 64.5,
+		"shipName": "Tortuga Restaurante",
+		"shipAddress": {
+			"street": "Avda. Azteca 123",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10318,
+		"customerID": "ISLAT",
+		"employeeID": 8,
+		"orderDate": "1996-10-01 00:00:00.000",
+		"requiredDate": "1996-10-29 00:00:00.000",
+		"shippedDate": "1996-10-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 4.73,
+		"shipName": "Island Trading",
+		"shipAddress": {
+			"street": "Garden House Crowther Way",
+			"city": "Cowes",
+			"region": "Isle of Wight",
+			"postalCode": "PO31 7PJ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10326,
+		"customerID": "BOLID",
+		"employeeID": 4,
+		"orderDate": "1996-10-10 00:00:00.000",
+		"requiredDate": "1996-11-07 00:00:00.000",
+		"shippedDate": "1996-10-14 00:00:00.000",
+		"shipVia": 2,
+		"freight": 77.92,
+		"shipName": "Bólido Comidas preparadas",
+		"shipAddress": {
+			"street": "C/ Araquil 67",
+			"city": "Madrid",
+			"region": "NULL",
+			"postalCode": 28023,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 17.6,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 57,
+				"unitPrice": 15.6,
+				"quantity": 16,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10323,
+		"customerID": "KOENE",
+		"employeeID": 4,
+		"orderDate": "1996-10-07 00:00:00.000",
+		"requiredDate": "1996-11-04 00:00:00.000",
+		"shippedDate": "1996-10-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 4.88,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 15,
+				"unitPrice": 12.4,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 25,
+				"unitPrice": 11.2,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 4,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10327,
+		"customerID": "FOLKO",
+		"employeeID": 2,
+		"orderDate": "1996-10-11 00:00:00.000",
+		"requiredDate": "1996-11-08 00:00:00.000",
+		"shippedDate": "1996-10-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 63.36,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 25,
+				"discount": 0.2
+			},
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 50,
+				"discount": 0.2
+			},
+			{
+				"productID": 30,
+				"unitPrice": 20.7,
+				"quantity": 35,
+				"discount": 0.2
+			},
+			{
+				"productID": 58,
+				"unitPrice": 10.6,
+				"quantity": 30,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10328,
+		"customerID": "FURIB",
+		"employeeID": 4,
+		"orderDate": "1996-10-14 00:00:00.000",
+		"requiredDate": "1996-11-11 00:00:00.000",
+		"shippedDate": "1996-10-17 00:00:00.000",
+		"shipVia": 3,
+		"freight": 87.03,
+		"shipName": "Furia Bacalhau e Frutos do Mar",
+		"shipAddress": {
+			"street": "Jardim das rosas n. 32",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1675,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 9,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10330,
+		"customerID": "LILAS",
+		"employeeID": 3,
+		"orderDate": "1996-10-16 00:00:00.000",
+		"requiredDate": "1996-11-13 00:00:00.000",
+		"shippedDate": "1996-10-28 00:00:00.000",
+		"shipVia": 1,
+		"freight": 12.75,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 25,
+				"discount": 0.15
+			},
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 50,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10329,
+		"customerID": "SPLIR",
+		"employeeID": 4,
+		"orderDate": "1996-10-15 00:00:00.000",
+		"requiredDate": "1996-11-26 00:00:00.000",
+		"shippedDate": "1996-10-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 191.67,
+		"shipName": "Split Rail Beer & Ale",
+		"shipAddress": {
+			"street": "P.O. Box 555",
+			"city": "Lander",
+			"region": "WY",
+			"postalCode": 82520,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 10,
+				"discount": 0.05
+			},
+			{
+				"productID": 30,
+				"unitPrice": 20.7,
+				"quantity": 8,
+				"discount": 0.05
+			},
+			{
+				"productID": 38,
+				"unitPrice": 210.8,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 12,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10324,
+		"customerID": "SAVEA",
+		"employeeID": 9,
+		"orderDate": "1996-10-08 00:00:00.000",
+		"requiredDate": "1996-11-05 00:00:00.000",
+		"shippedDate": "1996-10-10 00:00:00.000",
+		"shipVia": 1,
+		"freight": 214.27,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 14.4,
+				"quantity": 70,
+				"discount": 0.15
+			},
+			{
+				"productID": 46,
+				"unitPrice": 9.6,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 21,
+				"discount": 0.15
+			},
+			{
+				"productID": 63,
+				"unitPrice": 35.1,
+				"quantity": 80,
+				"discount": 0.15
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 40,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10333,
+		"customerID": "WARTH",
+		"employeeID": 5,
+		"orderDate": "1996-10-18 00:00:00.000",
+		"requiredDate": "1996-11-15 00:00:00.000",
+		"shippedDate": "1996-10-25 00:00:00.000",
+		"shipVia": 3,
+		"freight": 0.59,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 18.6,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 10,
+				"discount": 0.1
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 40,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10334,
+		"customerID": "VICTE",
+		"employeeID": 8,
+		"orderDate": "1996-10-21 00:00:00.000",
+		"requiredDate": "1996-11-18 00:00:00.000",
+		"shippedDate": "1996-10-28 00:00:00.000",
+		"shipVia": 2,
+		"freight": 8.56,
+		"shipName": "Victuailles en stock",
+		"shipAddress": {
+			"street": "2 rue du Commerce",
+			"city": "Lyon",
+			"region": "NULL",
+			"postalCode": 69004,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 5.6,
+				"quantity": 8,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10335,
+		"customerID": "HUNGO",
+		"employeeID": 7,
+		"orderDate": "1996-10-22 00:00:00.000",
+		"requiredDate": "1996-11-19 00:00:00.000",
+		"shippedDate": "1996-10-24 00:00:00.000",
+		"shipVia": 2,
+		"freight": 42.11,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 25,
+				"discount": 0.2
+			},
+			{
+				"productID": 32,
+				"unitPrice": 25.6,
+				"quantity": 6,
+				"discount": 0.2
+			},
+			{
+				"productID": 51,
+				"unitPrice": 42.4,
+				"quantity": 48,
+				"discount": 0.2
+			},
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 7,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10337,
+		"customerID": "FRANK",
+		"employeeID": 4,
+		"orderDate": "1996-10-24 00:00:00.000",
+		"requiredDate": "1996-11-21 00:00:00.000",
+		"shippedDate": "1996-10-29 00:00:00.000",
+		"shipVia": 3,
+		"freight": 108.26,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 23,
+				"unitPrice": 7.2,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 36,
+				"unitPrice": 15.2,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 37,
+				"unitPrice": 20.8,
+				"quantity": 28,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10338,
+		"customerID": "OLDWO",
+		"employeeID": 4,
+		"orderDate": "1996-10-25 00:00:00.000",
+		"requiredDate": "1996-11-22 00:00:00.000",
+		"shippedDate": "1996-10-29 00:00:00.000",
+		"shipVia": 3,
+		"freight": 84.21,
+		"shipName": "Old World Delicatessen",
+		"shipAddress": {
+			"street": "2743 Bering St.",
+			"city": "Anchorage",
+			"region": "AK",
+			"postalCode": 99508,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 30,
+				"unitPrice": 20.7,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10339,
+		"customerID": "MEREP",
+		"employeeID": 2,
+		"orderDate": "1996-10-28 00:00:00.000",
+		"requiredDate": "1996-11-25 00:00:00.000",
+		"shippedDate": "1996-11-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 15.66,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 17.6,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 70,
+				"discount": 0.05
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 28,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10340,
+		"customerID": "BONAP",
+		"employeeID": 1,
+		"orderDate": "1996-10-29 00:00:00.000",
+		"requiredDate": "1996-11-26 00:00:00.000",
+		"shippedDate": "1996-11-08 00:00:00.000",
+		"shipVia": 3,
+		"freight": 166.31,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 50,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 12,
+				"discount": 0.05
+			},
+			{
+				"productID": 43,
+				"unitPrice": 36.8,
+				"quantity": 40,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10341,
+		"customerID": "SIMOB",
+		"employeeID": 7,
+		"orderDate": "1996-10-29 00:00:00.000",
+		"requiredDate": "1996-11-26 00:00:00.000",
+		"shippedDate": "1996-11-05 00:00:00.000",
+		"shipVia": 3,
+		"freight": 26.78,
+		"shipName": "Simons bistro",
+		"shipAddress": {
+			"street": "Vinbæltet 34",
+			"city": "Kobenhavn",
+			"region": "NULL",
+			"postalCode": 1734,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 9,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10342,
+		"customerID": "FRANK",
+		"employeeID": 4,
+		"orderDate": "1996-10-30 00:00:00.000",
+		"requiredDate": "1996-11-13 00:00:00.000",
+		"shippedDate": "1996-11-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 54.83,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 24,
+				"discount": 0.2
+			},
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 56,
+				"discount": 0.2
+			},
+			{
+				"productID": 36,
+				"unitPrice": 15.2,
+				"quantity": 40,
+				"discount": 0.2
+			},
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 40,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10343,
+		"customerID": "LEHMS",
+		"employeeID": 4,
+		"orderDate": "1996-10-31 00:00:00.000",
+		"requiredDate": "1996-11-28 00:00:00.000",
+		"shippedDate": "1996-11-06 00:00:00.000",
+		"shipVia": 1,
+		"freight": 110.37,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 4,
+				"discount": 0.05
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 26.6,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10344,
+		"customerID": "WHITC",
+		"employeeID": 4,
+		"orderDate": "1996-11-01 00:00:00.000",
+		"requiredDate": "1996-11-29 00:00:00.000",
+		"shippedDate": "1996-11-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 23.29,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 17.6,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 8,
+				"unitPrice": 32,
+				"quantity": 70,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10345,
+		"customerID": "QUICK",
+		"employeeID": 2,
+		"orderDate": "1996-11-04 00:00:00.000",
+		"requiredDate": "1996-12-02 00:00:00.000",
+		"shippedDate": "1996-11-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 249.06,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 8,
+				"unitPrice": 32,
+				"quantity": 70,
+				"discount": 0
+			},
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 80,
+				"discount": 0
+			},
+			{
+				"productID": 42,
+				"unitPrice": 11.2,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10346,
+		"customerID": "RATTC",
+		"employeeID": 3,
+		"orderDate": "1996-11-05 00:00:00.000",
+		"requiredDate": "1996-12-17 00:00:00.000",
+		"shippedDate": "1996-11-08 00:00:00.000",
+		"shipVia": 3,
+		"freight": 142.08,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 36,
+				"discount": 0.1
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10347,
+		"customerID": "FAMIA",
+		"employeeID": 4,
+		"orderDate": "1996-11-06 00:00:00.000",
+		"requiredDate": "1996-12-04 00:00:00.000",
+		"shippedDate": "1996-11-08 00:00:00.000",
+		"shipVia": 3,
+		"freight": 3.1,
+		"shipName": "Familia Arquibaldo",
+		"shipAddress": {
+			"street": "Rua Orós 92",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05442-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 25,
+				"unitPrice": 11.2,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 50,
+				"discount": 0.15
+			},
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 6,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10348,
+		"customerID": "WANDK",
+		"employeeID": 4,
+		"orderDate": "1996-11-07 00:00:00.000",
+		"requiredDate": "1996-12-05 00:00:00.000",
+		"shippedDate": "1996-11-15 00:00:00.000",
+		"shipVia": 2,
+		"freight": 0.78,
+		"shipName": "Die Wandernde Kuh",
+		"shipAddress": {
+			"street": "Adenauerallee 900",
+			"city": "Stuttgart",
+			"region": "NULL",
+			"postalCode": 70563,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 14.4,
+				"quantity": 15,
+				"discount": 0.15
+			},
+			{
+				"productID": 23,
+				"unitPrice": 7.2,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10325,
+		"customerID": "KOENE",
+		"employeeID": 1,
+		"orderDate": "1996-10-09 00:00:00.000",
+		"requiredDate": "1996-10-23 00:00:00.000",
+		"shippedDate": "1996-10-14 00:00:00.000",
+		"shipVia": 3,
+		"freight": 64.86,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 4.8,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 14,
+				"unitPrice": 18.6,
+				"quantity": 9,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 6,
+				"unitPrice": 20,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10350,
+		"customerID": "LAMAI",
+		"employeeID": 6,
+		"orderDate": "1996-11-11 00:00:00.000",
+		"requiredDate": "1996-12-09 00:00:00.000",
+		"shippedDate": "1996-12-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 64.19,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 50,
+				"unitPrice": 13,
+				"quantity": 15,
+				"discount": 0.1
+			},
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 18,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10332,
+		"customerID": "MEREP",
+		"employeeID": 3,
+		"orderDate": "1996-10-17 00:00:00.000",
+		"requiredDate": "1996-11-28 00:00:00.000",
+		"shippedDate": "1996-10-21 00:00:00.000",
+		"shipVia": 2,
+		"freight": 52.84,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 50,
+				"quantity": 40,
+				"discount": 0.2
+			},
+			{
+				"productID": 42,
+				"unitPrice": 11.2,
+				"quantity": 10,
+				"discount": 0.2
+			},
+			{
+				"productID": 47,
+				"unitPrice": 7.6,
+				"quantity": 16,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10351,
+		"customerID": "ERNSH",
+		"employeeID": 1,
+		"orderDate": "1996-11-11 00:00:00.000",
+		"requiredDate": "1996-12-09 00:00:00.000",
+		"shippedDate": "1996-11-20 00:00:00.000",
+		"shipVia": 1,
+		"freight": 162.33,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 38,
+				"unitPrice": 210.8,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 13,
+				"discount": 0
+			},
+			{
+				"productID": 44,
+				"unitPrice": 15.5,
+				"quantity": 77,
+				"discount": 0.05
+			},
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 10,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10355,
+		"customerID": "AROUT",
+		"employeeID": 6,
+		"orderDate": "1996-11-15 00:00:00.000",
+		"requiredDate": "1996-12-13 00:00:00.000",
+		"shippedDate": "1996-11-20 00:00:00.000",
+		"shipVia": 1,
+		"freight": 41.95,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 57,
+				"unitPrice": 15.6,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10356,
+		"customerID": "WANDK",
+		"employeeID": 6,
+		"orderDate": "1996-11-18 00:00:00.000",
+		"requiredDate": "1996-12-16 00:00:00.000",
+		"shippedDate": "1996-11-27 00:00:00.000",
+		"shipVia": 2,
+		"freight": 36.71,
+		"shipName": "Die Wandernde Kuh",
+		"shipAddress": {
+			"street": "Adenauerallee 900",
+			"city": "Stuttgart",
+			"region": "NULL",
+			"postalCode": 70563,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10357,
+		"customerID": "LILAS",
+		"employeeID": 1,
+		"orderDate": "1996-11-19 00:00:00.000",
+		"requiredDate": "1996-12-17 00:00:00.000",
+		"shippedDate": "1996-12-02 00:00:00.000",
+		"shipVia": 3,
+		"freight": 34.88,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 24.8,
+				"quantity": 30,
+				"discount": 0.2
+			},
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 16,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 8,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10358,
+		"customerID": "LAMAI",
+		"employeeID": 5,
+		"orderDate": "1996-11-20 00:00:00.000",
+		"requiredDate": "1996-12-18 00:00:00.000",
+		"shippedDate": "1996-11-27 00:00:00.000",
+		"shipVia": 1,
+		"freight": 19.64,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 10,
+				"discount": 0.05
+			},
+			{
+				"productID": 34,
+				"unitPrice": 11.2,
+				"quantity": 10,
+				"discount": 0.05
+			},
+			{
+				"productID": 36,
+				"unitPrice": 15.2,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10359,
+		"customerID": "SEVES",
+		"employeeID": 5,
+		"orderDate": "1996-11-21 00:00:00.000",
+		"requiredDate": "1996-12-19 00:00:00.000",
+		"shippedDate": "1996-11-26 00:00:00.000",
+		"shipVia": 3,
+		"freight": 288.43,
+		"shipName": "Seven Seas Imports",
+		"shipAddress": {
+			"street": "90 Wadhurst Rd.",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "OX15 4NB",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 56,
+				"discount": 0.05
+			},
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 70,
+				"discount": 0.05
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 80,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10360,
+		"customerID": "BLONP",
+		"employeeID": 4,
+		"orderDate": "1996-11-22 00:00:00.000",
+		"requiredDate": "1996-12-20 00:00:00.000",
+		"shippedDate": "1996-12-02 00:00:00.000",
+		"shipVia": 3,
+		"freight": 131.7,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 29,
+				"unitPrice": 99,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 38,
+				"unitPrice": 210.8,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 16,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 28,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10361,
+		"customerID": "QUICK",
+		"employeeID": 1,
+		"orderDate": "1996-11-22 00:00:00.000",
+		"requiredDate": "1996-12-20 00:00:00.000",
+		"shippedDate": "1996-12-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 183.17,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 54,
+				"discount": 0.1
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 55,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10353,
+		"customerID": "PICCO",
+		"employeeID": 7,
+		"orderDate": "1996-11-13 00:00:00.000",
+		"requiredDate": "1996-12-11 00:00:00.000",
+		"shippedDate": "1996-11-25 00:00:00.000",
+		"shipVia": 3,
+		"freight": 360.63,
+		"shipName": "Piccolo und mehr",
+		"shipAddress": {
+			"street": "Geislweg 14",
+			"city": "Salzburg",
+			"region": "NULL",
+			"postalCode": 5020,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 12,
+				"discount": 0.2
+			},
+			{
+				"productID": 38,
+				"unitPrice": 210.8,
+				"quantity": 50,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10363,
+		"customerID": "DRACD",
+		"employeeID": 4,
+		"orderDate": "1996-11-26 00:00:00.000",
+		"requiredDate": "1996-12-24 00:00:00.000",
+		"shippedDate": "1996-12-04 00:00:00.000",
+		"shipVia": 3,
+		"freight": 30.54,
+		"shipName": "Drachenblut Delikatessen",
+		"shipAddress": {
+			"street": "Walserweg 21",
+			"city": "Aachen",
+			"region": "NULL",
+			"postalCode": 52066,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10352,
+		"customerID": "FURIB",
+		"employeeID": 3,
+		"orderDate": "1996-11-12 00:00:00.000",
+		"requiredDate": "1996-11-26 00:00:00.000",
+		"shippedDate": "1996-11-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.3,
+		"shipName": "Furia Bacalhau e Frutos do Mar",
+		"shipAddress": {
+			"street": "Jardim das rosas n. 32",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1675,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 20,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10364,
+		"customerID": "EASTC",
+		"employeeID": 1,
+		"orderDate": "1996-11-26 00:00:00.000",
+		"requiredDate": "1997-01-07 00:00:00.000",
+		"shippedDate": "1996-12-04 00:00:00.000",
+		"shipVia": 1,
+		"freight": 71.97,
+		"shipName": "Eastern Connection",
+		"shipAddress": {
+			"street": "35 King George",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "WX3 6FW",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10354,
+		"customerID": "PERIC",
+		"employeeID": 8,
+		"orderDate": "1996-11-14 00:00:00.000",
+		"requiredDate": "1996-12-12 00:00:00.000",
+		"shippedDate": "1996-11-20 00:00:00.000",
+		"shipVia": 3,
+		"freight": 53.8,
+		"shipName": "Pericles Comidas clásicas",
+		"shipAddress": {
+			"street": "Calle Dr. Jorge Cash 321",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 14.4,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 29,
+				"unitPrice": 99,
+				"quantity": 4,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10362,
+		"customerID": "BONAP",
+		"employeeID": 3,
+		"orderDate": "1996-11-25 00:00:00.000",
+		"requiredDate": "1996-12-23 00:00:00.000",
+		"shippedDate": "1996-11-28 00:00:00.000",
+		"shipVia": 1,
+		"freight": 96.04,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 25,
+				"unitPrice": 11.2,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 42.4,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10366,
+		"customerID": "GALED",
+		"employeeID": 8,
+		"orderDate": "1996-11-28 00:00:00.000",
+		"requiredDate": "1997-01-09 00:00:00.000",
+		"shippedDate": "1996-12-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 10.14,
+		"shipName": "Galería del gastronómo",
+		"shipAddress": {
+			"street": "Rambla de Cataluña 23",
+			"city": "Barcelona",
+			"region": "NULL",
+			"postalCode": 8022,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10367,
+		"customerID": "VAFFE",
+		"employeeID": 7,
+		"orderDate": "1996-11-28 00:00:00.000",
+		"requiredDate": "1996-12-26 00:00:00.000",
+		"shippedDate": "1996-12-02 00:00:00.000",
+		"shipVia": 3,
+		"freight": 13.55,
+		"shipName": "Vaffeljernet",
+		"shipAddress": {
+			"street": "Smagsloget 45",
+			"city": "Århus",
+			"region": "NULL",
+			"postalCode": 8200,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 34,
+				"unitPrice": 11.2,
+				"quantity": 36,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 7,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10372,
+		"customerID": "QUEEN",
+		"employeeID": 5,
+		"orderDate": "1996-12-04 00:00:00.000",
+		"requiredDate": "1997-01-01 00:00:00.000",
+		"shippedDate": "1996-12-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 890.78,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 20,
+				"unitPrice": 64.8,
+				"quantity": 12,
+				"discount": 0.25
+			},
+			{
+				"productID": 38,
+				"unitPrice": 210.8,
+				"quantity": 40,
+				"discount": 0.25
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 70,
+				"discount": 0.25
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 42,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10373,
+		"customerID": "HUNGO",
+		"employeeID": 4,
+		"orderDate": "1996-12-05 00:00:00.000",
+		"requiredDate": "1997-01-02 00:00:00.000",
+		"shippedDate": "1996-12-11 00:00:00.000",
+		"shipVia": 3,
+		"freight": 124.12,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 58,
+				"unitPrice": 10.6,
+				"quantity": 80,
+				"discount": 0.2
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 50,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10374,
+		"customerID": "WOLZA",
+		"employeeID": 1,
+		"orderDate": "1996-12-05 00:00:00.000",
+		"requiredDate": "1997-01-02 00:00:00.000",
+		"shippedDate": "1996-12-09 00:00:00.000",
+		"shipVia": 3,
+		"freight": 3.94,
+		"shipName": "Wolski Zajazd",
+		"shipAddress": {
+			"street": "ul. Filtrowa 68",
+			"city": "Warszawa",
+			"region": "NULL",
+			"postalCode": "01-012",
+			"country": "Poland"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 58,
+				"unitPrice": 10.6,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10375,
+		"customerID": "HUNGC",
+		"employeeID": 3,
+		"orderDate": "1996-12-06 00:00:00.000",
+		"requiredDate": "1997-01-03 00:00:00.000",
+		"shippedDate": "1996-12-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 20.12,
+		"shipName": "Hungry Coyote Import Store",
+		"shipAddress": {
+			"street": "City Center Plaza 516 Main St.",
+			"city": "Elgin",
+			"region": "OR",
+			"postalCode": 97827,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 18.6,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10368,
+		"customerID": "ERNSH",
+		"employeeID": 2,
+		"orderDate": "1996-11-29 00:00:00.000",
+		"requiredDate": "1996-12-27 00:00:00.000",
+		"shippedDate": "1996-12-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 101.95,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 5,
+				"discount": 0.1
+			},
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 13,
+				"discount": 0.1
+			},
+			{
+				"productID": 57,
+				"unitPrice": 15.6,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 26.6,
+				"quantity": 35,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10369,
+		"customerID": "SPLIR",
+		"employeeID": 8,
+		"orderDate": "1996-12-02 00:00:00.000",
+		"requiredDate": "1996-12-30 00:00:00.000",
+		"shippedDate": "1996-12-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 195.68,
+		"shipName": "Split Rail Beer & Ale",
+		"shipAddress": {
+			"street": "P.O. Box 555",
+			"city": "Lander",
+			"region": "WY",
+			"postalCode": 82520,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 99,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 18,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10379,
+		"customerID": "QUEDE",
+		"employeeID": 2,
+		"orderDate": "1996-12-11 00:00:00.000",
+		"requiredDate": "1997-01-08 00:00:00.000",
+		"shippedDate": "1996-12-13 00:00:00.000",
+		"shipVia": 1,
+		"freight": 45.03,
+		"shipName": "Que Delícia",
+		"shipAddress": {
+			"street": "Rua da Panificadora 12",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-673",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 8,
+				"discount": 0.1
+			},
+			{
+				"productID": 63,
+				"unitPrice": 35.1,
+				"quantity": 16,
+				"discount": 0.1
+			},
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 20,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10370,
+		"customerID": "CHOPS",
+		"employeeID": 6,
+		"orderDate": "1996-12-03 00:00:00.000",
+		"requiredDate": "1996-12-31 00:00:00.000",
+		"shippedDate": "1996-12-27 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.17,
+		"shipName": "Chop-suey Chinese",
+		"shipAddress": {
+			"street": "Hauptstr. 31",
+			"city": "Bern",
+			"region": "NULL",
+			"postalCode": 3012,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 14.4,
+				"quantity": 15,
+				"discount": 0.15
+			},
+			{
+				"productID": 64,
+				"unitPrice": 26.6,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 74,
+				"unitPrice": 8,
+				"quantity": 20,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10380,
+		"customerID": "HUNGO",
+		"employeeID": 8,
+		"orderDate": "1996-12-12 00:00:00.000",
+		"requiredDate": "1997-01-09 00:00:00.000",
+		"shippedDate": "1997-01-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 35.03,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 20.7,
+				"quantity": 18,
+				"discount": 0.1
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 6,
+				"discount": 0.1
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 20,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10377,
+		"customerID": "SEVES",
+		"employeeID": 1,
+		"orderDate": "1996-12-09 00:00:00.000",
+		"requiredDate": "1997-01-06 00:00:00.000",
+		"shippedDate": "1996-12-13 00:00:00.000",
+		"shipVia": 3,
+		"freight": 22.21,
+		"shipName": "Seven Seas Imports",
+		"shipAddress": {
+			"street": "90 Wadhurst Rd.",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "OX15 4NB",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 20,
+				"discount": 0.15
+			},
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 20,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10384,
+		"customerID": "BERGS",
+		"employeeID": 3,
+		"orderDate": "1996-12-16 00:00:00.000",
+		"requiredDate": "1997-01-13 00:00:00.000",
+		"shippedDate": "1996-12-20 00:00:00.000",
+		"shipVia": 3,
+		"freight": 168.64,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 20,
+				"unitPrice": 64.8,
+				"quantity": 28,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10385,
+		"customerID": "SPLIR",
+		"employeeID": 1,
+		"orderDate": "1996-12-17 00:00:00.000",
+		"requiredDate": "1997-01-14 00:00:00.000",
+		"shippedDate": "1996-12-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 30.96,
+		"shipName": "Split Rail Beer & Ale",
+		"shipAddress": {
+			"street": "P.O. Box 555",
+			"city": "Lander",
+			"region": "WY",
+			"postalCode": 82520,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 24,
+				"quantity": 10,
+				"discount": 0.2
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 8,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10386,
+		"customerID": "FAMIA",
+		"employeeID": 9,
+		"orderDate": "1996-12-18 00:00:00.000",
+		"requiredDate": "1997-01-01 00:00:00.000",
+		"shippedDate": "1996-12-25 00:00:00.000",
+		"shipVia": 3,
+		"freight": 13.99,
+		"shipName": "Familia Arquibaldo",
+		"shipAddress": {
+			"street": "Rua Orós 92",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05442-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 34,
+				"unitPrice": 11.2,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10387,
+		"customerID": "SANTG",
+		"employeeID": 1,
+		"orderDate": "1996-12-18 00:00:00.000",
+		"requiredDate": "1997-01-15 00:00:00.000",
+		"shippedDate": "1996-12-20 00:00:00.000",
+		"shipVia": 2,
+		"freight": 93.63,
+		"shipName": "Santé Gourmet",
+		"shipAddress": {
+			"street": "Erling Skakkes gate 78",
+			"city": "Stavern",
+			"region": "NULL",
+			"postalCode": 4110,
+			"country": "Norway"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10388,
+		"customerID": "SEVES",
+		"employeeID": 2,
+		"orderDate": "1996-12-19 00:00:00.000",
+		"requiredDate": "1997-01-16 00:00:00.000",
+		"shippedDate": "1996-12-20 00:00:00.000",
+		"shipVia": 1,
+		"freight": 34.86,
+		"shipName": "Seven Seas Imports",
+		"shipAddress": {
+			"street": "90 Wadhurst Rd.",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "OX15 4NB",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 45,
+				"unitPrice": 7.6,
+				"quantity": 15,
+				"discount": 0.2
+			},
+			{
+				"productID": 52,
+				"unitPrice": 5.6,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10389,
+		"customerID": "BOTTM",
+		"employeeID": 4,
+		"orderDate": "1996-12-20 00:00:00.000",
+		"requiredDate": "1997-01-17 00:00:00.000",
+		"shippedDate": "1996-12-24 00:00:00.000",
+		"shipVia": 2,
+		"freight": 47.42,
+		"shipName": "Bottom-Dollar Markets",
+		"shipAddress": {
+			"street": "23 Tsawassen Blvd.",
+			"city": "Tsawassen",
+			"region": "BC",
+			"postalCode": "T2F 8M4",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 24.8,
+				"quantity": 16,
+				"discount": 0
+			},
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10382,
+		"customerID": "ERNSH",
+		"employeeID": 4,
+		"orderDate": "1996-12-13 00:00:00.000",
+		"requiredDate": "1997-01-10 00:00:00.000",
+		"shippedDate": "1996-12-16 00:00:00.000",
+		"shipVia": 1,
+		"freight": 94.77,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 99,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 74,
+				"unitPrice": 8,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 5,
+				"unitPrice": 17,
+				"quantity": 32,
+				"discount": 0
+			},
+			{
+				"productID": 18,
+				"unitPrice": 50,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10381,
+		"customerID": "LILAS",
+		"employeeID": 3,
+		"orderDate": "1996-12-12 00:00:00.000",
+		"requiredDate": "1997-01-09 00:00:00.000",
+		"shippedDate": "1996-12-13 00:00:00.000",
+		"shipVia": 3,
+		"freight": 7.99,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 74,
+				"unitPrice": 8,
+				"quantity": 14,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10383,
+		"customerID": "AROUT",
+		"employeeID": 8,
+		"orderDate": "1996-12-16 00:00:00.000",
+		"requiredDate": "1997-01-13 00:00:00.000",
+		"shippedDate": "1996-12-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 34.24,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 4.8,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 50,
+				"unitPrice": 13,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10390,
+		"customerID": "ERNSH",
+		"employeeID": 6,
+		"orderDate": "1996-12-23 00:00:00.000",
+		"requiredDate": "1997-01-20 00:00:00.000",
+		"shippedDate": "1996-12-26 00:00:00.000",
+		"shipVia": 1,
+		"freight": 126.38,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 60,
+				"discount": 0.1
+			},
+			{
+				"productID": 35,
+				"unitPrice": 14.4,
+				"quantity": 40,
+				"discount": 0.1
+			},
+			{
+				"productID": 46,
+				"unitPrice": 9.6,
+				"quantity": 45,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 24,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10396,
+		"customerID": "FRANK",
+		"employeeID": 1,
+		"orderDate": "1996-12-27 00:00:00.000",
+		"requiredDate": "1997-01-10 00:00:00.000",
+		"shippedDate": "1997-01-06 00:00:00.000",
+		"shipVia": 3,
+		"freight": 135.35,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 23,
+				"unitPrice": 7.2,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10397,
+		"customerID": "PRINI",
+		"employeeID": 5,
+		"orderDate": "1996-12-27 00:00:00.000",
+		"requiredDate": "1997-01-24 00:00:00.000",
+		"shippedDate": "1997-01-02 00:00:00.000",
+		"shipVia": 1,
+		"freight": 60.26,
+		"shipName": "Princesa Isabel Vinhos",
+		"shipAddress": {
+			"street": "Estrada da saúde n. 58",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1756,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 10,
+				"discount": 0.15
+			},
+			{
+				"productID": 51,
+				"unitPrice": 42.4,
+				"quantity": 18,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10398,
+		"customerID": "SAVEA",
+		"employeeID": 2,
+		"orderDate": "1996-12-30 00:00:00.000",
+		"requiredDate": "1997-01-27 00:00:00.000",
+		"shippedDate": "1997-01-09 00:00:00.000",
+		"shipVia": 3,
+		"freight": 89.16,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 14.4,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 120,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10399,
+		"customerID": "VAFFE",
+		"employeeID": 8,
+		"orderDate": "1996-12-31 00:00:00.000",
+		"requiredDate": "1997-01-14 00:00:00.000",
+		"shippedDate": "1997-01-08 00:00:00.000",
+		"shipVia": 3,
+		"freight": 27.36,
+		"shipName": "Vaffeljernet",
+		"shipAddress": {
+			"street": "Smagsloget 45",
+			"city": "Århus",
+			"region": "NULL",
+			"postalCode": 8200,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 14,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10400,
+		"customerID": "EASTC",
+		"employeeID": 1,
+		"orderDate": "1997-01-01 00:00:00.000",
+		"requiredDate": "1997-01-29 00:00:00.000",
+		"shippedDate": "1997-01-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 83.93,
+		"shipName": "Eastern Connection",
+		"shipAddress": {
+			"street": "35 King George",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "WX3 6FW",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 14.4,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 29,
+				"unitPrice": 99,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 16,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10401,
+		"customerID": "RATTC",
+		"employeeID": 1,
+		"orderDate": "1997-01-01 00:00:00.000",
+		"requiredDate": "1997-01-29 00:00:00.000",
+		"shippedDate": "1997-01-10 00:00:00.000",
+		"shipVia": 1,
+		"freight": 12.51,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 20.7,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 70,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 60,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10394,
+		"customerID": "HUNGC",
+		"employeeID": 1,
+		"orderDate": "1996-12-25 00:00:00.000",
+		"requiredDate": "1997-01-22 00:00:00.000",
+		"shippedDate": "1997-01-03 00:00:00.000",
+		"shipVia": 3,
+		"freight": 30.34,
+		"shipName": "Hungry Coyote Import Store",
+		"shipAddress": {
+			"street": "City Center Plaza 516 Main St.",
+			"city": "Elgin",
+			"region": "OR",
+			"postalCode": 97827,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 4.8,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10402,
+		"customerID": "ERNSH",
+		"employeeID": 8,
+		"orderDate": "1997-01-02 00:00:00.000",
+		"requiredDate": "1997-02-13 00:00:00.000",
+		"shippedDate": "1997-01-10 00:00:00.000",
+		"shipVia": 2,
+		"freight": 67.88,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 63,
+				"unitPrice": 35.1,
+				"quantity": 65,
+				"discount": 0
+			},
+			{
+				"productID": 23,
+				"unitPrice": 7.2,
+				"quantity": 60,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10393,
+		"customerID": "SAVEA",
+		"employeeID": 1,
+		"orderDate": "1996-12-25 00:00:00.000",
+		"requiredDate": "1997-01-22 00:00:00.000",
+		"shippedDate": "1997-01-03 00:00:00.000",
+		"shipVia": 3,
+		"freight": 126.56,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 70,
+				"discount": 0.25
+			},
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 32,
+				"discount": 0
+			},
+			{
+				"productID": 25,
+				"unitPrice": 11.2,
+				"quantity": 7,
+				"discount": 0.25
+			},
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 25,
+				"discount": 0.25
+			},
+			{
+				"productID": 14,
+				"unitPrice": 18.6,
+				"quantity": 42,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10395,
+		"customerID": "HILAA",
+		"employeeID": 6,
+		"orderDate": "1996-12-26 00:00:00.000",
+		"requiredDate": "1997-01-23 00:00:00.000",
+		"shippedDate": "1997-01-03 00:00:00.000",
+		"shipVia": 1,
+		"freight": 184.41,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 46,
+				"unitPrice": 9.6,
+				"quantity": 28,
+				"discount": 0.1
+			},
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 70,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10406,
+		"customerID": "QUEEN",
+		"employeeID": 7,
+		"orderDate": "1997-01-07 00:00:00.000",
+		"requiredDate": "1997-02-18 00:00:00.000",
+		"shippedDate": "1997-01-13 00:00:00.000",
+		"shipVia": 1,
+		"freight": 108.04,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 14.4,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 42,
+				"discount": 0.1
+			},
+			{
+				"productID": 36,
+				"unitPrice": 15.2,
+				"quantity": 5,
+				"discount": 0.1
+			},
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 2,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10407,
+		"customerID": "OTTIK",
+		"employeeID": 2,
+		"orderDate": "1997-01-07 00:00:00.000",
+		"requiredDate": "1997-02-04 00:00:00.000",
+		"shippedDate": "1997-01-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 91.48,
+		"shipName": "Ottilies Käseladen",
+		"shipAddress": {
+			"street": "Mehrheimerstr. 369",
+			"city": "Köln",
+			"region": "NULL",
+			"postalCode": 50739,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10408,
+		"customerID": "FOLIG",
+		"employeeID": 8,
+		"orderDate": "1997-01-08 00:00:00.000",
+		"requiredDate": "1997-02-05 00:00:00.000",
+		"shippedDate": "1997-01-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 11.26,
+		"shipName": "Folies gourmandes",
+		"shipAddress": {
+			"street": "184 chaussée de Tournai",
+			"city": "Lille",
+			"region": "NULL",
+			"postalCode": 59000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 37,
+				"unitPrice": 20.8,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10409,
+		"customerID": "OCEAN",
+		"employeeID": 3,
+		"orderDate": "1997-01-09 00:00:00.000",
+		"requiredDate": "1997-02-06 00:00:00.000",
+		"shippedDate": "1997-01-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 29.83,
+		"shipName": "Océano Atlántico Ltda.",
+		"shipAddress": {
+			"street": "Ing. Gustavo Moncada 8585 Piso 20-A",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 18.6,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10410,
+		"customerID": "BOTTM",
+		"employeeID": 3,
+		"orderDate": "1997-01-10 00:00:00.000",
+		"requiredDate": "1997-02-07 00:00:00.000",
+		"shippedDate": "1997-01-15 00:00:00.000",
+		"shipVia": 3,
+		"freight": 2.4,
+		"shipName": "Bottom-Dollar Markets",
+		"shipAddress": {
+			"street": "23 Tsawassen Blvd.",
+			"city": "Tsawassen",
+			"region": "BC",
+			"postalCode": "T2F 8M4",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 49,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 16,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10411,
+		"customerID": "BOTTM",
+		"employeeID": 9,
+		"orderDate": "1997-01-10 00:00:00.000",
+		"requiredDate": "1997-02-07 00:00:00.000",
+		"shippedDate": "1997-01-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 23.65,
+		"shipName": "Bottom-Dollar Markets",
+		"shipAddress": {
+			"street": "23 Tsawassen Blvd.",
+			"city": "Tsawassen",
+			"region": "BC",
+			"postalCode": "T2F 8M4",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 25,
+				"discount": 0.2
+			},
+			{
+				"productID": 44,
+				"unitPrice": 15.5,
+				"quantity": 40,
+				"discount": 0.2
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 9,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10404,
+		"customerID": "MAGAA",
+		"employeeID": 2,
+		"orderDate": "1997-01-03 00:00:00.000",
+		"requiredDate": "1997-01-31 00:00:00.000",
+		"shippedDate": "1997-01-08 00:00:00.000",
+		"shipVia": 1,
+		"freight": 155.97,
+		"shipName": "Magazzini Alimentari Riuniti",
+		"shipAddress": {
+			"street": "Via Ludovico il Moro 22",
+			"city": "Bergamo",
+			"region": "NULL",
+			"postalCode": 24100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 30,
+				"discount": 0.05
+			},
+			{
+				"productID": 42,
+				"unitPrice": 11.2,
+				"quantity": 40,
+				"discount": 0.05
+			},
+			{
+				"productID": 49,
+				"unitPrice": 16,
+				"quantity": 30,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10413,
+		"customerID": "LAMAI",
+		"employeeID": 3,
+		"orderDate": "1997-01-14 00:00:00.000",
+		"requiredDate": "1997-02-11 00:00:00.000",
+		"shippedDate": "1997-01-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 95.66,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 14.4,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 14,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10403,
+		"customerID": "ERNSH",
+		"employeeID": 4,
+		"orderDate": "1997-01-03 00:00:00.000",
+		"requiredDate": "1997-01-31 00:00:00.000",
+		"shippedDate": "1997-01-09 00:00:00.000",
+		"shipVia": 3,
+		"freight": 73.79,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 21,
+				"discount": 0.15
+			},
+			{
+				"productID": 48,
+				"unitPrice": 10.2,
+				"quantity": 70,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10414,
+		"customerID": "FAMIA",
+		"employeeID": 2,
+		"orderDate": "1997-01-14 00:00:00.000",
+		"requiredDate": "1997-02-11 00:00:00.000",
+		"shippedDate": "1997-01-17 00:00:00.000",
+		"shipVia": 3,
+		"freight": 21.48,
+		"shipName": "Familia Arquibaldo",
+		"shipAddress": {
+			"street": "Rua Orós 92",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05442-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 18,
+				"discount": 0.05
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10415,
+		"customerID": "HUNGC",
+		"employeeID": 3,
+		"orderDate": "1997-01-15 00:00:00.000",
+		"requiredDate": "1997-02-12 00:00:00.000",
+		"shippedDate": "1997-01-24 00:00:00.000",
+		"shipVia": 1,
+		"freight": 0.2,
+		"shipName": "Hungry Coyote Import Store",
+		"shipAddress": {
+			"street": "City Center Plaza 516 Main St.",
+			"city": "Elgin",
+			"region": "OR",
+			"postalCode": 97827,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10419,
+		"customerID": "RICSU",
+		"employeeID": 4,
+		"orderDate": "1997-01-20 00:00:00.000",
+		"requiredDate": "1997-02-17 00:00:00.000",
+		"shippedDate": "1997-01-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 137.35,
+		"shipName": "Richter Supermarkt",
+		"shipAddress": {
+			"street": "Starenweg 5",
+			"city": "Genève",
+			"region": "NULL",
+			"postalCode": 1204,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 60,
+				"discount": 0.05
+			},
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10420,
+		"customerID": "WELLI",
+		"employeeID": 3,
+		"orderDate": "1997-01-21 00:00:00.000",
+		"requiredDate": "1997-02-18 00:00:00.000",
+		"shippedDate": "1997-01-27 00:00:00.000",
+		"shipVia": 1,
+		"freight": 44.12,
+		"shipName": "Wellington Importadora",
+		"shipAddress": {
+			"street": "Rua do Mercado 12",
+			"city": "Resende",
+			"region": "SP",
+			"postalCode": "08737-363",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 9,
+				"unitPrice": 77.6,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 13,
+				"unitPrice": 4.8,
+				"quantity": 2,
+				"discount": 0.1
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 8,
+				"discount": 0.1
+			},
+			{
+				"productID": 73,
+				"unitPrice": 12,
+				"quantity": 20,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10421,
+		"customerID": "QUEDE",
+		"employeeID": 8,
+		"orderDate": "1997-01-21 00:00:00.000",
+		"requiredDate": "1997-03-04 00:00:00.000",
+		"shippedDate": "1997-01-27 00:00:00.000",
+		"shipVia": 1,
+		"freight": 99.23,
+		"shipName": "Que Delícia",
+		"shipAddress": {
+			"street": "Rua da Panificadora 12",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-673",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 4,
+				"discount": 0.15
+			},
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 10,
+				"discount": 0.15
+			},
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 15,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10423,
+		"customerID": "GOURL",
+		"employeeID": 6,
+		"orderDate": "1997-01-23 00:00:00.000",
+		"requiredDate": "1997-02-06 00:00:00.000",
+		"shippedDate": "1997-02-24 00:00:00.000",
+		"shipVia": 3,
+		"freight": 24.5,
+		"shipName": "Gourmet Lanchonetes",
+		"shipAddress": {
+			"street": "Av. Brasil 442",
+			"city": "Campinas",
+			"region": "SP",
+			"postalCode": "04876-786",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10424,
+		"customerID": "MEREP",
+		"employeeID": 7,
+		"orderDate": "1997-01-23 00:00:00.000",
+		"requiredDate": "1997-02-20 00:00:00.000",
+		"shippedDate": "1997-01-27 00:00:00.000",
+		"shipVia": 2,
+		"freight": 370.61,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 38,
+				"unitPrice": 210.8,
+				"quantity": 49,
+				"discount": 0.2
+			},
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 30,
+				"discount": 0.2
+			},
+			{
+				"productID": 35,
+				"unitPrice": 14.4,
+				"quantity": 60,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10418,
+		"customerID": "QUICK",
+		"employeeID": 4,
+		"orderDate": "1997-01-17 00:00:00.000",
+		"requiredDate": "1997-02-14 00:00:00.000",
+		"shippedDate": "1997-01-24 00:00:00.000",
+		"shipVia": 1,
+		"freight": 17.55,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 47,
+				"unitPrice": 7.6,
+				"quantity": 55,
+				"discount": 0
+			},
+			{
+				"productID": 61,
+				"unitPrice": 22.8,
+				"quantity": 16,
+				"discount": 0
+			},
+			{
+				"productID": 74,
+				"unitPrice": 8,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10417,
+		"customerID": "SIMOB",
+		"employeeID": 4,
+		"orderDate": "1997-01-16 00:00:00.000",
+		"requiredDate": "1997-02-13 00:00:00.000",
+		"shippedDate": "1997-01-28 00:00:00.000",
+		"shipVia": 3,
+		"freight": 70.29,
+		"shipName": "Simons bistro",
+		"shipAddress": {
+			"street": "Vinbæltet 34",
+			"city": "Kobenhavn",
+			"region": "NULL",
+			"postalCode": 1734,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 38,
+				"unitPrice": 210.8,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 46,
+				"unitPrice": 9.6,
+				"quantity": 2,
+				"discount": 0.25
+			},
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 36,
+				"discount": 0.25
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10416,
+		"customerID": "WARTH",
+		"employeeID": 8,
+		"orderDate": "1997-01-16 00:00:00.000",
+		"requiredDate": "1997-02-13 00:00:00.000",
+		"shippedDate": "1997-01-27 00:00:00.000",
+		"shipVia": 3,
+		"freight": 22.72,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 57,
+				"unitPrice": 15.6,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10425,
+		"customerID": "LAMAI",
+		"employeeID": 6,
+		"orderDate": "1997-01-24 00:00:00.000",
+		"requiredDate": "1997-02-21 00:00:00.000",
+		"shippedDate": "1997-02-14 00:00:00.000",
+		"shipVia": 2,
+		"freight": 7.93,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 10,
+				"discount": 0.25
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 20,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10429,
+		"customerID": "HUNGO",
+		"employeeID": 3,
+		"orderDate": "1997-01-29 00:00:00.000",
+		"requiredDate": "1997-03-12 00:00:00.000",
+		"shippedDate": "1997-02-07 00:00:00.000",
+		"shipVia": 2,
+		"freight": 56.63,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 50,
+				"unitPrice": 13,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 63,
+				"unitPrice": 35.1,
+				"quantity": 35,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10430,
+		"customerID": "ERNSH",
+		"employeeID": 4,
+		"orderDate": "1997-01-30 00:00:00.000",
+		"requiredDate": "1997-02-13 00:00:00.000",
+		"shippedDate": "1997-02-03 00:00:00.000",
+		"shipVia": 1,
+		"freight": 458.78,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 45,
+				"discount": 0.2
+			},
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 70,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10431,
+		"customerID": "BOTTM",
+		"employeeID": 4,
+		"orderDate": "1997-01-30 00:00:00.000",
+		"requiredDate": "1997-02-13 00:00:00.000",
+		"shippedDate": "1997-02-07 00:00:00.000",
+		"shipVia": 2,
+		"freight": 44.17,
+		"shipName": "Bottom-Dollar Markets",
+		"shipAddress": {
+			"street": "23 Tsawassen Blvd.",
+			"city": "Tsawassen",
+			"region": "BC",
+			"postalCode": "T2F 8M4",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 50,
+				"discount": 0.25
+			},
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 50,
+				"discount": 0.25
+			},
+			{
+				"productID": 47,
+				"unitPrice": 7.6,
+				"quantity": 30,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10432,
+		"customerID": "SPLIR",
+		"employeeID": 3,
+		"orderDate": "1997-01-31 00:00:00.000",
+		"requiredDate": "1997-02-14 00:00:00.000",
+		"shippedDate": "1997-02-07 00:00:00.000",
+		"shipVia": 2,
+		"freight": 4.34,
+		"shipName": "Split Rail Beer & Ale",
+		"shipAddress": {
+			"street": "P.O. Box 555",
+			"city": "Lander",
+			"region": "WY",
+			"postalCode": 82520,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10434,
+		"customerID": "FOLKO",
+		"employeeID": 3,
+		"orderDate": "1997-02-03 00:00:00.000",
+		"requiredDate": "1997-03-03 00:00:00.000",
+		"shippedDate": "1997-02-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 17.92,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 18,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10436,
+		"customerID": "BLONP",
+		"employeeID": 3,
+		"orderDate": "1997-02-05 00:00:00.000",
+		"requiredDate": "1997-03-05 00:00:00.000",
+		"shippedDate": "1997-02-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 156.66,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 24,
+				"discount": 0.1
+			},
+			{
+				"productID": 46,
+				"unitPrice": 9.6,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 40,
+				"discount": 0.1
+			},
+			{
+				"productID": 64,
+				"unitPrice": 26.6,
+				"quantity": 30,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10435,
+		"customerID": "CONSH",
+		"employeeID": 8,
+		"orderDate": "1997-02-04 00:00:00.000",
+		"requiredDate": "1997-03-18 00:00:00.000",
+		"shippedDate": "1997-02-07 00:00:00.000",
+		"shipVia": 2,
+		"freight": 9.21,
+		"shipName": "Consolidated Holdings",
+		"shipAddress": {
+			"street": "Berkeley Gardens 12  Brewery",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "WX1 6LT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 22,
+				"unitPrice": 16.8,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10426,
+		"customerID": "GALED",
+		"employeeID": 4,
+		"orderDate": "1997-01-27 00:00:00.000",
+		"requiredDate": "1997-02-24 00:00:00.000",
+		"shippedDate": "1997-02-06 00:00:00.000",
+		"shipVia": 1,
+		"freight": 18.69,
+		"shipName": "Galería del gastronómo",
+		"shipAddress": {
+			"street": "Rambla de Cataluña 23",
+			"city": "Barcelona",
+			"region": "NULL",
+			"postalCode": 8022,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 26.6,
+				"quantity": 7,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10442,
+		"customerID": "ERNSH",
+		"employeeID": 3,
+		"orderDate": "1997-02-11 00:00:00.000",
+		"requiredDate": "1997-03-11 00:00:00.000",
+		"shippedDate": "1997-02-18 00:00:00.000",
+		"shipVia": 2,
+		"freight": 47.94,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 80,
+				"discount": 0
+			},
+			{
+				"productID": 66,
+				"unitPrice": 13.6,
+				"quantity": 60,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10443,
+		"customerID": "REGGC",
+		"employeeID": 8,
+		"orderDate": "1997-02-12 00:00:00.000",
+		"requiredDate": "1997-03-12 00:00:00.000",
+		"shippedDate": "1997-02-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 13.95,
+		"shipName": "Reggiani Caseifici",
+		"shipAddress": {
+			"street": "Strada Provinciale 124",
+			"city": "Reggio Emilia",
+			"region": "NULL",
+			"postalCode": 42100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 6,
+				"discount": 0.2
+			},
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10444,
+		"customerID": "BERGS",
+		"employeeID": 3,
+		"orderDate": "1997-02-12 00:00:00.000",
+		"requiredDate": "1997-03-12 00:00:00.000",
+		"shippedDate": "1997-02-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 3.5,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 35,
+				"unitPrice": 14.4,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10445,
+		"customerID": "BERGS",
+		"employeeID": 3,
+		"orderDate": "1997-02-13 00:00:00.000",
+		"requiredDate": "1997-03-13 00:00:00.000",
+		"shippedDate": "1997-02-20 00:00:00.000",
+		"shipVia": 1,
+		"freight": 9.3,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10446,
+		"customerID": "TOMSP",
+		"employeeID": 6,
+		"orderDate": "1997-02-14 00:00:00.000",
+		"requiredDate": "1997-03-14 00:00:00.000",
+		"shippedDate": "1997-02-19 00:00:00.000",
+		"shipVia": 1,
+		"freight": 14.68,
+		"shipName": "Toms Spezialitäten",
+		"shipAddress": {
+			"street": "Luisenstr. 48",
+			"city": "Münster",
+			"region": "NULL",
+			"postalCode": 44087,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 3,
+				"discount": 0.1
+			},
+			{
+				"productID": 52,
+				"unitPrice": 5.6,
+				"quantity": 15,
+				"discount": 0.1
+			},
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 12,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10440,
+		"customerID": "SAVEA",
+		"employeeID": 4,
+		"orderDate": "1997-02-10 00:00:00.000",
+		"requiredDate": "1997-03-10 00:00:00.000",
+		"shippedDate": "1997-02-28 00:00:00.000",
+		"shipVia": 2,
+		"freight": 86.53,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 45,
+				"discount": 0.15
+			},
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 49,
+				"discount": 0.15
+			},
+			{
+				"productID": 29,
+				"unitPrice": 99,
+				"quantity": 24,
+				"discount": 0.15
+			},
+			{
+				"productID": 61,
+				"unitPrice": 22.8,
+				"quantity": 90,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10439,
+		"customerID": "MEREP",
+		"employeeID": 6,
+		"orderDate": "1997-02-07 00:00:00.000",
+		"requiredDate": "1997-03-07 00:00:00.000",
+		"shippedDate": "1997-02-10 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.07,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 12,
+				"unitPrice": 30.4,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 16,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 26.6,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 74,
+				"unitPrice": 8,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10448,
+		"customerID": "RANCH",
+		"employeeID": 4,
+		"orderDate": "1997-02-17 00:00:00.000",
+		"requiredDate": "1997-03-17 00:00:00.000",
+		"shippedDate": "1997-02-24 00:00:00.000",
+		"shipVia": 2,
+		"freight": 38.82,
+		"shipName": "Rancho grande",
+		"shipAddress": {
+			"street": "Av. del Libertador 900",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10438,
+		"customerID": "TOMSP",
+		"employeeID": 3,
+		"orderDate": "1997-02-06 00:00:00.000",
+		"requiredDate": "1997-03-06 00:00:00.000",
+		"shippedDate": "1997-02-14 00:00:00.000",
+		"shipVia": 2,
+		"freight": 8.24,
+		"shipName": "Toms Spezialitäten",
+		"shipAddress": {
+			"street": "Luisenstr. 48",
+			"city": "Münster",
+			"region": "NULL",
+			"postalCode": 44087,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 15,
+				"discount": 0.2
+			},
+			{
+				"productID": 34,
+				"unitPrice": 11.2,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 57,
+				"unitPrice": 15.6,
+				"quantity": 15,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10447,
+		"customerID": "RICAR",
+		"employeeID": 4,
+		"orderDate": "1997-02-14 00:00:00.000",
+		"requiredDate": "1997-03-14 00:00:00.000",
+		"shippedDate": "1997-03-07 00:00:00.000",
+		"shipVia": 2,
+		"freight": 68.66,
+		"shipName": "Ricardo Adocicados",
+		"shipAddress": {
+			"street": "Av. Copacabana 267",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-890",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 2,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10452,
+		"customerID": "SAVEA",
+		"employeeID": 8,
+		"orderDate": "1997-02-20 00:00:00.000",
+		"requiredDate": "1997-03-20 00:00:00.000",
+		"shippedDate": "1997-02-26 00:00:00.000",
+		"shipVia": 1,
+		"freight": 140.26,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 44,
+				"unitPrice": 15.5,
+				"quantity": 100,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10453,
+		"customerID": "AROUT",
+		"employeeID": 1,
+		"orderDate": "1997-02-21 00:00:00.000",
+		"requiredDate": "1997-03-21 00:00:00.000",
+		"shippedDate": "1997-02-26 00:00:00.000",
+		"shipVia": 2,
+		"freight": 25.36,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 48,
+				"unitPrice": 10.2,
+				"quantity": 15,
+				"discount": 0.1
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 25,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10454,
+		"customerID": "LAMAI",
+		"employeeID": 4,
+		"orderDate": "1997-02-21 00:00:00.000",
+		"requiredDate": "1997-03-21 00:00:00.000",
+		"shippedDate": "1997-02-25 00:00:00.000",
+		"shipVia": 3,
+		"freight": 2.74,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 46,
+				"unitPrice": 9.6,
+				"quantity": 10,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10455,
+		"customerID": "WARTH",
+		"employeeID": 8,
+		"orderDate": "1997-02-24 00:00:00.000",
+		"requiredDate": "1997-04-07 00:00:00.000",
+		"shippedDate": "1997-03-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 180.45,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 61,
+				"unitPrice": 22.8,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10456,
+		"customerID": "KOENE",
+		"employeeID": 8,
+		"orderDate": "1997-02-25 00:00:00.000",
+		"requiredDate": "1997-04-08 00:00:00.000",
+		"shippedDate": "1997-02-28 00:00:00.000",
+		"shipVia": 2,
+		"freight": 8.12,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 40,
+				"discount": 0.15
+			},
+			{
+				"productID": 49,
+				"unitPrice": 16,
+				"quantity": 21,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10450,
+		"customerID": "VICTE",
+		"employeeID": 8,
+		"orderDate": "1997-02-19 00:00:00.000",
+		"requiredDate": "1997-03-19 00:00:00.000",
+		"shippedDate": "1997-03-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 7.23,
+		"shipName": "Victuailles en stock",
+		"shipAddress": {
+			"street": "2 rue du Commerce",
+			"city": "Lyon",
+			"region": "NULL",
+			"postalCode": 69004,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 24.8,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 6,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10451,
+		"customerID": "QUICK",
+		"employeeID": 4,
+		"orderDate": "1997-02-19 00:00:00.000",
+		"requiredDate": "1997-03-05 00:00:00.000",
+		"shippedDate": "1997-03-12 00:00:00.000",
+		"shipVia": 3,
+		"freight": 189.09,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 120,
+				"discount": 0.1
+			},
+			{
+				"productID": 64,
+				"unitPrice": 26.6,
+				"quantity": 35,
+				"discount": 0.1
+			},
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 28,
+				"discount": 0.1
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 55,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10449,
+		"customerID": "BLONP",
+		"employeeID": 3,
+		"orderDate": "1997-02-18 00:00:00.000",
+		"requiredDate": "1997-03-18 00:00:00.000",
+		"shippedDate": "1997-02-27 00:00:00.000",
+		"shipVia": 2,
+		"freight": 53.3,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 24.8,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 5.6,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10461,
+		"customerID": "LILAS",
+		"employeeID": 1,
+		"orderDate": "1997-02-28 00:00:00.000",
+		"requiredDate": "1997-03-28 00:00:00.000",
+		"shippedDate": "1997-03-05 00:00:00.000",
+		"shipVia": 3,
+		"freight": 148.61,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 40,
+				"discount": 0.25
+			},
+			{
+				"productID": 30,
+				"unitPrice": 20.7,
+				"quantity": 28,
+				"discount": 0.25
+			},
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 60,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10462,
+		"customerID": "CONSH",
+		"employeeID": 2,
+		"orderDate": "1997-03-03 00:00:00.000",
+		"requiredDate": "1997-03-31 00:00:00.000",
+		"shippedDate": "1997-03-18 00:00:00.000",
+		"shipVia": 1,
+		"freight": 6.17,
+		"shipName": "Consolidated Holdings",
+		"shipAddress": {
+			"street": "Berkeley Gardens 12  Brewery",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "WX1 6LT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 4.8,
+				"quantity": 1,
+				"discount": 0
+			},
+			{
+				"productID": 23,
+				"unitPrice": 7.2,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10463,
+		"customerID": "SUPRD",
+		"employeeID": 5,
+		"orderDate": "1997-03-04 00:00:00.000",
+		"requiredDate": "1997-04-01 00:00:00.000",
+		"shippedDate": "1997-03-06 00:00:00.000",
+		"shipVia": 3,
+		"freight": 14.78,
+		"shipName": "Suprêmes délices",
+		"shipAddress": {
+			"street": "Boulevard Tirou 255",
+			"city": "Charleroi",
+			"region": "NULL",
+			"postalCode": "B-6000",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 42,
+				"unitPrice": 11.2,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10464,
+		"customerID": "FURIB",
+		"employeeID": 4,
+		"orderDate": "1997-03-04 00:00:00.000",
+		"requiredDate": "1997-04-01 00:00:00.000",
+		"shippedDate": "1997-03-14 00:00:00.000",
+		"shipVia": 2,
+		"freight": 89,
+		"shipName": "Furia Bacalhau e Frutos do Mar",
+		"shipAddress": {
+			"street": "Jardim das rosas n. 32",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1675,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 17.6,
+				"quantity": 16,
+				"discount": 0.2
+			},
+			{
+				"productID": 43,
+				"unitPrice": 36.8,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 30,
+				"discount": 0.2
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10465,
+		"customerID": "VAFFE",
+		"employeeID": 1,
+		"orderDate": "1997-03-05 00:00:00.000",
+		"requiredDate": "1997-04-02 00:00:00.000",
+		"shippedDate": "1997-03-14 00:00:00.000",
+		"shipVia": 3,
+		"freight": 145.04,
+		"shipName": "Vaffeljernet",
+		"shipAddress": {
+			"street": "Smagsloget 45",
+			"city": "Århus",
+			"region": "NULL",
+			"postalCode": 8200,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 29,
+				"unitPrice": 99,
+				"quantity": 18,
+				"discount": 0.1
+			},
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 45,
+				"unitPrice": 7.6,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 50,
+				"unitPrice": 13,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10466,
+		"customerID": "COMMI",
+		"employeeID": 4,
+		"orderDate": "1997-03-06 00:00:00.000",
+		"requiredDate": "1997-04-03 00:00:00.000",
+		"shippedDate": "1997-03-13 00:00:00.000",
+		"shipVia": 1,
+		"freight": 11.93,
+		"shipName": "Comércio Mineiro",
+		"shipAddress": {
+			"street": "Av. dos Lusíadas 23",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05432-043",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 46,
+				"unitPrice": 9.6,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10460,
+		"customerID": "FOLKO",
+		"employeeID": 8,
+		"orderDate": "1997-02-28 00:00:00.000",
+		"requiredDate": "1997-03-28 00:00:00.000",
+		"shippedDate": "1997-03-03 00:00:00.000",
+		"shipVia": 1,
+		"freight": 16.27,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 21,
+				"discount": 0.25
+			},
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 4,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10459,
+		"customerID": "VICTE",
+		"employeeID": 4,
+		"orderDate": "1997-02-27 00:00:00.000",
+		"requiredDate": "1997-03-27 00:00:00.000",
+		"shippedDate": "1997-02-28 00:00:00.000",
+		"shipVia": 2,
+		"freight": 25.09,
+		"shipName": "Victuailles en stock",
+		"shipAddress": {
+			"street": "2 rue du Commerce",
+			"city": "Lyon",
+			"region": "NULL",
+			"postalCode": 69004,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 24,
+				"quantity": 16,
+				"discount": 0.05
+			},
+			{
+				"productID": 46,
+				"unitPrice": 9.6,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10468,
+		"customerID": "KOENE",
+		"employeeID": 3,
+		"orderDate": "1997-03-07 00:00:00.000",
+		"requiredDate": "1997-04-04 00:00:00.000",
+		"shippedDate": "1997-03-12 00:00:00.000",
+		"shipVia": 3,
+		"freight": 44.12,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 20.7,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 36.8,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10469,
+		"customerID": "WHITC",
+		"employeeID": 1,
+		"orderDate": "1997-03-10 00:00:00.000",
+		"requiredDate": "1997-04-07 00:00:00.000",
+		"shippedDate": "1997-03-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 60.18,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 40,
+				"discount": 0.15
+			},
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 35,
+				"discount": 0.15
+			},
+			{
+				"productID": 44,
+				"unitPrice": 15.5,
+				"quantity": 2,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10458,
+		"customerID": "SUPRD",
+		"employeeID": 7,
+		"orderDate": "1997-02-26 00:00:00.000",
+		"requiredDate": "1997-03-26 00:00:00.000",
+		"shippedDate": "1997-03-04 00:00:00.000",
+		"shipVia": 3,
+		"freight": 147.06,
+		"shipName": "Suprêmes délices",
+		"shipAddress": {
+			"street": "Boulevard Tirou 255",
+			"city": "Charleroi",
+			"region": "NULL",
+			"postalCode": "B-6000",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 36.8,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10470,
+		"customerID": "BONAP",
+		"employeeID": 4,
+		"orderDate": "1997-03-11 00:00:00.000",
+		"requiredDate": "1997-04-08 00:00:00.000",
+		"shippedDate": "1997-03-14 00:00:00.000",
+		"shipVia": 2,
+		"freight": 64.56,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 50,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 23,
+				"unitPrice": 7.2,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 26.6,
+				"quantity": 8,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10467,
+		"customerID": "MAGAA",
+		"employeeID": 8,
+		"orderDate": "1997-03-06 00:00:00.000",
+		"requiredDate": "1997-04-03 00:00:00.000",
+		"shippedDate": "1997-03-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 4.93,
+		"shipName": "Magazzini Alimentari Riuniti",
+		"shipAddress": {
+			"street": "Via Ludovico il Moro 22",
+			"city": "Bergamo",
+			"region": "NULL",
+			"postalCode": 24100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 28,
+				"discount": 0
+			},
+			{
+				"productID": 25,
+				"unitPrice": 11.2,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10474,
+		"customerID": "PERIC",
+		"employeeID": 5,
+		"orderDate": "1997-03-13 00:00:00.000",
+		"requiredDate": "1997-04-10 00:00:00.000",
+		"shippedDate": "1997-03-21 00:00:00.000",
+		"shipVia": 2,
+		"freight": 83.49,
+		"shipName": "Pericles Comidas clásicas",
+		"shipAddress": {
+			"street": "Calle Dr. Jorge Cash 321",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 14,
+				"unitPrice": 18.6,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10475,
+		"customerID": "SUPRD",
+		"employeeID": 9,
+		"orderDate": "1997-03-14 00:00:00.000",
+		"requiredDate": "1997-04-11 00:00:00.000",
+		"shippedDate": "1997-04-04 00:00:00.000",
+		"shipVia": 1,
+		"freight": 68.52,
+		"shipName": "Suprêmes délices",
+		"shipAddress": {
+			"street": "Boulevard Tirou 255",
+			"city": "Charleroi",
+			"region": "NULL",
+			"postalCode": "B-6000",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 35,
+				"discount": 0.15
+			},
+			{
+				"productID": 66,
+				"unitPrice": 13.6,
+				"quantity": 60,
+				"discount": 0.15
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 42,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10476,
+		"customerID": "HILAA",
+		"employeeID": 8,
+		"orderDate": "1997-03-17 00:00:00.000",
+		"requiredDate": "1997-04-14 00:00:00.000",
+		"shippedDate": "1997-03-24 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.41,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 2,
+				"discount": 0.05
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10477,
+		"customerID": "PRINI",
+		"employeeID": 5,
+		"orderDate": "1997-03-17 00:00:00.000",
+		"requiredDate": "1997-04-14 00:00:00.000",
+		"shippedDate": "1997-03-25 00:00:00.000",
+		"shipVia": 2,
+		"freight": 13.02,
+		"shipName": "Princesa Isabel Vinhos",
+		"shipAddress": {
+			"street": "Estrada da saúde n. 58",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1756,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 14.4,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 21,
+				"discount": 0.25
+			},
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 20,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10479,
+		"customerID": "RATTC",
+		"employeeID": 3,
+		"orderDate": "1997-03-19 00:00:00.000",
+		"requiredDate": "1997-04-16 00:00:00.000",
+		"shippedDate": "1997-03-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 708.95,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 38,
+				"unitPrice": 210.8,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 28,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 26.6,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10471,
+		"customerID": "BSBEV",
+		"employeeID": 2,
+		"orderDate": "1997-03-11 00:00:00.000",
+		"requiredDate": "1997-04-08 00:00:00.000",
+		"shippedDate": "1997-03-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 45.59,
+		"shipName": "B's Beverages",
+		"shipAddress": {
+			"street": "Fauntleroy Circus",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "EC2 5NT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 24,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10472,
+		"customerID": "SEVES",
+		"employeeID": 8,
+		"orderDate": "1997-03-12 00:00:00.000",
+		"requiredDate": "1997-04-09 00:00:00.000",
+		"shippedDate": "1997-03-19 00:00:00.000",
+		"shipVia": 1,
+		"freight": 4.2,
+		"shipName": "Seven Seas Imports",
+		"shipAddress": {
+			"street": "90 Wadhurst Rd.",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "OX15 4NB",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 80,
+				"discount": 0.05
+			},
+			{
+				"productID": 51,
+				"unitPrice": 42.4,
+				"quantity": 18,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10481,
+		"customerID": "RICAR",
+		"employeeID": 8,
+		"orderDate": "1997-03-20 00:00:00.000",
+		"requiredDate": "1997-04-17 00:00:00.000",
+		"shippedDate": "1997-03-25 00:00:00.000",
+		"shipVia": 2,
+		"freight": 64.33,
+		"shipName": "Ricardo Adocicados",
+		"shipAddress": {
+			"street": "Av. Copacabana 267",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-890",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 49,
+				"unitPrice": 16,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10473,
+		"customerID": "ISLAT",
+		"employeeID": 1,
+		"orderDate": "1997-03-13 00:00:00.000",
+		"requiredDate": "1997-03-27 00:00:00.000",
+		"shippedDate": "1997-03-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 16.37,
+		"shipName": "Island Trading",
+		"shipAddress": {
+			"street": "Garden House Crowther Way",
+			"city": "Cowes",
+			"region": "Isle of Wight",
+			"postalCode": "PO31 7PJ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10484,
+		"customerID": "BSBEV",
+		"employeeID": 3,
+		"orderDate": "1997-03-24 00:00:00.000",
+		"requiredDate": "1997-04-21 00:00:00.000",
+		"shippedDate": "1997-04-01 00:00:00.000",
+		"shipVia": 3,
+		"freight": 6.88,
+		"shipName": "B's Beverages",
+		"shipAddress": {
+			"street": "Fauntleroy Circus",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "EC2 5NT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 42.4,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10485,
+		"customerID": "LINOD",
+		"employeeID": 4,
+		"orderDate": "1997-03-25 00:00:00.000",
+		"requiredDate": "1997-04-08 00:00:00.000",
+		"shippedDate": "1997-03-31 00:00:00.000",
+		"shipVia": 2,
+		"freight": 64.45,
+		"shipName": "LINO-Delicateses",
+		"shipAddress": {
+			"street": "Ave. 5 de Mayo Porlamar",
+			"city": "I. de Margarita",
+			"region": "Nueva Esparta",
+			"postalCode": 4980,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 3,
+				"unitPrice": 8,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 60,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10486,
+		"customerID": "HILAA",
+		"employeeID": 1,
+		"orderDate": "1997-03-26 00:00:00.000",
+		"requiredDate": "1997-04-23 00:00:00.000",
+		"shippedDate": "1997-04-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 30.53,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 42.4,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 74,
+				"unitPrice": 8,
+				"quantity": 16,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10487,
+		"customerID": "QUEEN",
+		"employeeID": 2,
+		"orderDate": "1997-03-26 00:00:00.000",
+		"requiredDate": "1997-04-23 00:00:00.000",
+		"shippedDate": "1997-03-28 00:00:00.000",
+		"shipVia": 2,
+		"freight": 71.07,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 24,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10488,
+		"customerID": "FRANK",
+		"employeeID": 8,
+		"orderDate": "1997-03-27 00:00:00.000",
+		"requiredDate": "1997-04-24 00:00:00.000",
+		"shippedDate": "1997-04-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 4.93,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 73,
+				"unitPrice": 12,
+				"quantity": 20,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10489,
+		"customerID": "PICCO",
+		"employeeID": 6,
+		"orderDate": "1997-03-28 00:00:00.000",
+		"requiredDate": "1997-04-25 00:00:00.000",
+		"shippedDate": "1997-04-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 5.29,
+		"shipName": "Piccolo und mehr",
+		"shipAddress": {
+			"street": "Geislweg 14",
+			"city": "Salzburg",
+			"region": "NULL",
+			"postalCode": 5020,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 15,
+				"discount": 0.25
+			},
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 18,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10483,
+		"customerID": "WHITC",
+		"employeeID": 7,
+		"orderDate": "1997-03-24 00:00:00.000",
+		"requiredDate": "1997-04-21 00:00:00.000",
+		"shippedDate": "1997-04-25 00:00:00.000",
+		"shipVia": 2,
+		"freight": 15.28,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 34,
+				"unitPrice": 11.2,
+				"quantity": 35,
+				"discount": 0.05
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 30,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10491,
+		"customerID": "FURIB",
+		"employeeID": 8,
+		"orderDate": "1997-03-31 00:00:00.000",
+		"requiredDate": "1997-04-28 00:00:00.000",
+		"shippedDate": "1997-04-08 00:00:00.000",
+		"shipVia": 3,
+		"freight": 16.96,
+		"shipName": "Furia Bacalhau e Frutos do Mar",
+		"shipAddress": {
+			"street": "Jardim das rosas n. 32",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1675,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 44,
+				"unitPrice": 15.5,
+				"quantity": 15,
+				"discount": 0.15
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 7,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10480,
+		"customerID": "FOLIG",
+		"employeeID": 6,
+		"orderDate": "1997-03-20 00:00:00.000",
+		"requiredDate": "1997-04-17 00:00:00.000",
+		"shippedDate": "1997-03-24 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.35,
+		"shipName": "Folies gourmandes",
+		"shipAddress": {
+			"street": "184 chaussée de Tournai",
+			"city": "Lille",
+			"region": "NULL",
+			"postalCode": 59000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 47,
+				"unitPrice": 7.6,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10490,
+		"customerID": "HILAA",
+		"employeeID": 7,
+		"orderDate": "1997-03-31 00:00:00.000",
+		"requiredDate": "1997-04-28 00:00:00.000",
+		"shippedDate": "1997-04-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 210.19,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 36,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10492,
+		"customerID": "BOTTM",
+		"employeeID": 3,
+		"orderDate": "1997-04-01 00:00:00.000",
+		"requiredDate": "1997-04-29 00:00:00.000",
+		"shippedDate": "1997-04-11 00:00:00.000",
+		"shipVia": 1,
+		"freight": 62.89,
+		"shipName": "Bottom-Dollar Markets",
+		"shipAddress": {
+			"street": "23 Tsawassen Blvd.",
+			"city": "Tsawassen",
+			"region": "BC",
+			"postalCode": "T2F 8M4",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 25,
+				"unitPrice": 11.2,
+				"quantity": 60,
+				"discount": 0.05
+			},
+			{
+				"productID": 42,
+				"unitPrice": 11.2,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10493,
+		"customerID": "LAMAI",
+		"employeeID": 4,
+		"orderDate": "1997-04-02 00:00:00.000",
+		"requiredDate": "1997-04-30 00:00:00.000",
+		"shippedDate": "1997-04-10 00:00:00.000",
+		"shipVia": 3,
+		"freight": 10.64,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 15,
+				"discount": 0.1
+			},
+			{
+				"productID": 66,
+				"unitPrice": 13.6,
+				"quantity": 10,
+				"discount": 0.1
+			},
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 10,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10498,
+		"customerID": "HILAA",
+		"employeeID": 8,
+		"orderDate": "1997-04-07 00:00:00.000",
+		"requiredDate": "1997-05-05 00:00:00.000",
+		"shippedDate": "1997-04-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 29.75,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10499,
+		"customerID": "LILAS",
+		"employeeID": 4,
+		"orderDate": "1997-04-08 00:00:00.000",
+		"requiredDate": "1997-05-06 00:00:00.000",
+		"shippedDate": "1997-04-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 102.02,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 20,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10500,
+		"customerID": "LAMAI",
+		"employeeID": 6,
+		"orderDate": "1997-04-09 00:00:00.000",
+		"requiredDate": "1997-05-07 00:00:00.000",
+		"shippedDate": "1997-04-17 00:00:00.000",
+		"shipVia": 1,
+		"freight": 42.68,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 15,
+				"unitPrice": 15.5,
+				"quantity": 12,
+				"discount": 0.05
+			},
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 8,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10502,
+		"customerID": "PERIC",
+		"employeeID": 2,
+		"orderDate": "1997-04-10 00:00:00.000",
+		"requiredDate": "1997-05-08 00:00:00.000",
+		"shippedDate": "1997-04-29 00:00:00.000",
+		"shipVia": 1,
+		"freight": 69.32,
+		"shipName": "Pericles Comidas clásicas",
+		"shipAddress": {
+			"street": "Calle Dr. Jorge Cash 321",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 45,
+				"unitPrice": 9.5,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 67,
+				"unitPrice": 14,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10503,
+		"customerID": "HUNGO",
+		"employeeID": 6,
+		"orderDate": "1997-04-11 00:00:00.000",
+		"requiredDate": "1997-05-09 00:00:00.000",
+		"shippedDate": "1997-04-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 16.74,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 70,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10497,
+		"customerID": "LEHMS",
+		"employeeID": 7,
+		"orderDate": "1997-04-04 00:00:00.000",
+		"requiredDate": "1997-05-02 00:00:00.000",
+		"shippedDate": "1997-04-07 00:00:00.000",
+		"shipVia": 1,
+		"freight": 36.21,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10495,
+		"customerID": "LAUGB",
+		"employeeID": 3,
+		"orderDate": "1997-04-03 00:00:00.000",
+		"requiredDate": "1997-05-01 00:00:00.000",
+		"shippedDate": "1997-04-11 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.65,
+		"shipName": "Laughing Bacchus Wine Cellars",
+		"shipAddress": {
+			"street": "2319 Elm St.",
+			"city": "Vancouver",
+			"region": "BC",
+			"postalCode": "V3F 2K1",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 23,
+				"unitPrice": 7.2,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10504,
+		"customerID": "WHITC",
+		"employeeID": 4,
+		"orderDate": "1997-04-11 00:00:00.000",
+		"requiredDate": "1997-05-09 00:00:00.000",
+		"shippedDate": "1997-04-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 59.13,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10508,
+		"customerID": "OTTIK",
+		"employeeID": 1,
+		"orderDate": "1997-04-16 00:00:00.000",
+		"requiredDate": "1997-05-14 00:00:00.000",
+		"shippedDate": "1997-05-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 4.99,
+		"shipName": "Ottilies Käseladen",
+		"shipAddress": {
+			"street": "Mehrheimerstr. 369",
+			"city": "Köln",
+			"region": "NULL",
+			"postalCode": 50739,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10510,
+		"customerID": "SAVEA",
+		"employeeID": 6,
+		"orderDate": "1997-04-18 00:00:00.000",
+		"requiredDate": "1997-05-16 00:00:00.000",
+		"shippedDate": "1997-04-28 00:00:00.000",
+		"shipVia": 3,
+		"freight": 367.63,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 36,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 36,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10511,
+		"customerID": "BONAP",
+		"employeeID": 4,
+		"orderDate": "1997-04-18 00:00:00.000",
+		"requiredDate": "1997-05-16 00:00:00.000",
+		"shippedDate": "1997-04-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 350.64,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 50,
+				"discount": 0.15
+			},
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 50,
+				"discount": 0.15
+			},
+			{
+				"productID": 8,
+				"unitPrice": 40,
+				"quantity": 10,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10512,
+		"customerID": "FAMIA",
+		"employeeID": 7,
+		"orderDate": "1997-04-21 00:00:00.000",
+		"requiredDate": "1997-05-19 00:00:00.000",
+		"shippedDate": "1997-04-24 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.53,
+		"shipName": "Familia Arquibaldo",
+		"shipAddress": {
+			"street": "Rua Orós 92",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05442-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 10,
+				"discount": 0.15
+			},
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 9,
+				"discount": 0.15
+			},
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 6,
+				"discount": 0.15
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 12,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10513,
+		"customerID": "WANDK",
+		"employeeID": 7,
+		"orderDate": "1997-04-22 00:00:00.000",
+		"requiredDate": "1997-06-03 00:00:00.000",
+		"shippedDate": "1997-04-28 00:00:00.000",
+		"shipVia": 1,
+		"freight": 105.65,
+		"shipName": "Die Wandernde Kuh",
+		"shipAddress": {
+			"street": "Adenauerallee 900",
+			"city": "Stuttgart",
+			"region": "NULL",
+			"postalCode": 70563,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 40,
+				"discount": 0.2
+			},
+			{
+				"productID": 32,
+				"unitPrice": 32,
+				"quantity": 50,
+				"discount": 0.2
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 15,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10506,
+		"customerID": "KOENE",
+		"employeeID": 9,
+		"orderDate": "1997-04-15 00:00:00.000",
+		"requiredDate": "1997-05-13 00:00:00.000",
+		"shippedDate": "1997-05-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 21.19,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 18,
+				"discount": 0.1
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 14,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10515,
+		"customerID": "QUICK",
+		"employeeID": 2,
+		"orderDate": "1997-04-23 00:00:00.000",
+		"requiredDate": "1997-05-07 00:00:00.000",
+		"shippedDate": "1997-05-23 00:00:00.000",
+		"shipVia": 1,
+		"freight": 204.47,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 9,
+				"unitPrice": 97,
+				"quantity": 16,
+				"discount": 0.15
+			},
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 27,
+				"unitPrice": 43.9,
+				"quantity": 120,
+				"discount": 0
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 16,
+				"discount": 0.15
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 84,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10516,
+		"customerID": "HUNGO",
+		"employeeID": 2,
+		"orderDate": "1997-04-24 00:00:00.000",
+		"requiredDate": "1997-05-22 00:00:00.000",
+		"shippedDate": "1997-05-01 00:00:00.000",
+		"shipVia": 3,
+		"freight": 62.78,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 25,
+				"discount": 0.1
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 80,
+				"discount": 0.1
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10507,
+		"customerID": "ANTON",
+		"employeeID": 7,
+		"orderDate": "1997-04-15 00:00:00.000",
+		"requiredDate": "1997-05-13 00:00:00.000",
+		"shippedDate": "1997-04-22 00:00:00.000",
+		"shipVia": 1,
+		"freight": 47.45,
+		"shipName": "Antonio Moreno Taquería",
+		"shipAddress": {
+			"street": "Mataderos  2312",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5023,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 15,
+				"discount": 0.15
+			},
+			{
+				"productID": 48,
+				"unitPrice": 12.75,
+				"quantity": 15,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10514,
+		"customerID": "ERNSH",
+		"employeeID": 3,
+		"orderDate": "1997-04-22 00:00:00.000",
+		"requiredDate": "1997-05-20 00:00:00.000",
+		"shippedDate": "1997-05-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 789.95,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 39,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 20,
+				"unitPrice": 81,
+				"quantity": 39,
+				"discount": 0
+			},
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 70,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10517,
+		"customerID": "NORTS",
+		"employeeID": 3,
+		"orderDate": "1997-04-24 00:00:00.000",
+		"requiredDate": "1997-05-22 00:00:00.000",
+		"shippedDate": "1997-04-29 00:00:00.000",
+		"shipVia": 3,
+		"freight": 32.07,
+		"shipName": "North/South",
+		"shipAddress": {
+			"street": "South House 300 Queensbridge",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "SW7 1RZ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10518,
+		"customerID": "TORTU",
+		"employeeID": 4,
+		"orderDate": "1997-04-25 00:00:00.000",
+		"requiredDate": "1997-05-09 00:00:00.000",
+		"shippedDate": "1997-05-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 218.15,
+		"shipName": "Tortuga Restaurante",
+		"shipAddress": {
+			"street": "Avda. Azteca 123",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10519,
+		"customerID": "CHOPS",
+		"employeeID": 6,
+		"orderDate": "1997-04-28 00:00:00.000",
+		"requiredDate": "1997-05-26 00:00:00.000",
+		"shippedDate": "1997-05-01 00:00:00.000",
+		"shipVia": 3,
+		"freight": 91.76,
+		"shipName": "Chop-suey Chinese",
+		"shipAddress": {
+			"street": "Hauptstr. 31",
+			"city": "Bern",
+			"region": "NULL",
+			"postalCode": 3012,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 16,
+				"discount": 0.05
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 10,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10520,
+		"customerID": "SANTG",
+		"employeeID": 7,
+		"orderDate": "1997-04-29 00:00:00.000",
+		"requiredDate": "1997-05-27 00:00:00.000",
+		"shippedDate": "1997-05-01 00:00:00.000",
+		"shipVia": 1,
+		"freight": 13.37,
+		"shipName": "Santé Gourmet",
+		"shipAddress": {
+			"street": "Erling Skakkes gate 78",
+			"city": "Stavern",
+			"region": "NULL",
+			"postalCode": 4110,
+			"country": "Norway"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10521,
+		"customerID": "CACTU",
+		"employeeID": 8,
+		"orderDate": "1997-04-29 00:00:00.000",
+		"requiredDate": "1997-05-27 00:00:00.000",
+		"shippedDate": "1997-05-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 17.22,
+		"shipName": "Cactus Comidas para llevar",
+		"shipAddress": {
+			"street": "Cerrito 333",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10522,
+		"customerID": "LEHMS",
+		"employeeID": 4,
+		"orderDate": "1997-04-30 00:00:00.000",
+		"requiredDate": "1997-05-28 00:00:00.000",
+		"shippedDate": "1997-05-06 00:00:00.000",
+		"shipVia": 1,
+		"freight": 45.33,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 25,
+				"discount": 0.2
+			},
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 40,
+				"discount": 0.2
+			},
+			{
+				"productID": 8,
+				"unitPrice": 40,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10523,
+		"customerID": "SEVES",
+		"employeeID": 7,
+		"orderDate": "1997-05-01 00:00:00.000",
+		"requiredDate": "1997-05-29 00:00:00.000",
+		"shippedDate": "1997-05-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 77.63,
+		"shipName": "Seven Seas Imports",
+		"shipAddress": {
+			"street": "90 Wadhurst Rd.",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "OX15 4NB",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 25,
+				"discount": 0.1
+			},
+			{
+				"productID": 20,
+				"unitPrice": 81,
+				"quantity": 15,
+				"discount": 0.1
+			},
+			{
+				"productID": 37,
+				"unitPrice": 26,
+				"quantity": 18,
+				"discount": 0.1
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 6,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10524,
+		"customerID": "BERGS",
+		"employeeID": 1,
+		"orderDate": "1997-05-01 00:00:00.000",
+		"requiredDate": "1997-05-29 00:00:00.000",
+		"shippedDate": "1997-05-07 00:00:00.000",
+		"shipVia": 2,
+		"freight": 244.79,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10525,
+		"customerID": "BONAP",
+		"employeeID": 1,
+		"orderDate": "1997-05-02 00:00:00.000",
+		"requiredDate": "1997-05-30 00:00:00.000",
+		"shippedDate": "1997-05-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 11.06,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 15,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10526,
+		"customerID": "WARTH",
+		"employeeID": 4,
+		"orderDate": "1997-05-05 00:00:00.000",
+		"requiredDate": "1997-06-02 00:00:00.000",
+		"shippedDate": "1997-05-15 00:00:00.000",
+		"shipVia": 2,
+		"freight": 58.59,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 8,
+				"discount": 0.15
+			},
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 30,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10527,
+		"customerID": "QUICK",
+		"employeeID": 7,
+		"orderDate": "1997-05-05 00:00:00.000",
+		"requiredDate": "1997-06-02 00:00:00.000",
+		"shippedDate": "1997-05-07 00:00:00.000",
+		"shipVia": 1,
+		"freight": 41.9,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 50,
+				"discount": 0.1
+			},
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 30,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10528,
+		"customerID": "GREAL",
+		"employeeID": 6,
+		"orderDate": "1997-05-06 00:00:00.000",
+		"requiredDate": "1997-05-20 00:00:00.000",
+		"shippedDate": "1997-05-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.35,
+		"shipName": "Great Lakes Food Market",
+		"shipAddress": {
+			"street": "2732 Baker Blvd.",
+			"city": "Eugene",
+			"region": "OR",
+			"postalCode": 97403,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 8,
+				"discount": 0.2
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10529,
+		"customerID": "MAISD",
+		"employeeID": 5,
+		"orderDate": "1997-05-07 00:00:00.000",
+		"requiredDate": "1997-06-04 00:00:00.000",
+		"shippedDate": "1997-05-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 66.69,
+		"shipName": "Maison Dewey",
+		"shipAddress": {
+			"street": "Rue Joseph-Bens 532",
+			"city": "Bruxelles",
+			"region": "NULL",
+			"postalCode": "B-1180",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10530,
+		"customerID": "PICCO",
+		"employeeID": 3,
+		"orderDate": "1997-05-08 00:00:00.000",
+		"requiredDate": "1997-06-05 00:00:00.000",
+		"shippedDate": "1997-05-12 00:00:00.000",
+		"shipVia": 2,
+		"freight": 339.22,
+		"shipName": "Piccolo und mehr",
+		"shipAddress": {
+			"street": "Geislweg 14",
+			"city": "Salzburg",
+			"region": "NULL",
+			"postalCode": 5020,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10531,
+		"customerID": "OCEAN",
+		"employeeID": 7,
+		"orderDate": "1997-05-08 00:00:00.000",
+		"requiredDate": "1997-06-05 00:00:00.000",
+		"shippedDate": "1997-05-19 00:00:00.000",
+		"shipVia": 1,
+		"freight": 8.12,
+		"shipName": "Océano Atlántico Ltda.",
+		"shipAddress": {
+			"street": "Ing. Gustavo Moncada 8585 Piso 20-A",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 2,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10532,
+		"customerID": "EASTC",
+		"employeeID": 7,
+		"orderDate": "1997-05-09 00:00:00.000",
+		"requiredDate": "1997-06-06 00:00:00.000",
+		"shippedDate": "1997-05-12 00:00:00.000",
+		"shipVia": 3,
+		"freight": 74.46,
+		"shipName": "Eastern Connection",
+		"shipAddress": {
+			"street": "35 King George",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "WX3 6FW",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 66,
+				"unitPrice": 17,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10536,
+		"customerID": "LEHMS",
+		"employeeID": 3,
+		"orderDate": "1997-05-14 00:00:00.000",
+		"requiredDate": "1997-06-11 00:00:00.000",
+		"shippedDate": "1997-06-06 00:00:00.000",
+		"shipVia": 2,
+		"freight": 58.88,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 12,
+				"unitPrice": 38,
+				"quantity": 15,
+				"discount": 0.25
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 35,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10537,
+		"customerID": "RICSU",
+		"employeeID": 1,
+		"orderDate": "1997-05-14 00:00:00.000",
+		"requiredDate": "1997-05-28 00:00:00.000",
+		"shippedDate": "1997-05-19 00:00:00.000",
+		"shipVia": 1,
+		"freight": 78.85,
+		"shipName": "Richter Supermarkt",
+		"shipAddress": {
+			"street": "Starenweg 5",
+			"city": "Genève",
+			"region": "NULL",
+			"postalCode": 1204,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 73,
+				"unitPrice": 15,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10538,
+		"customerID": "BSBEV",
+		"employeeID": 9,
+		"orderDate": "1997-05-15 00:00:00.000",
+		"requiredDate": "1997-06-12 00:00:00.000",
+		"shippedDate": "1997-05-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.87,
+		"shipName": "B's Beverages",
+		"shipAddress": {
+			"street": "Fauntleroy Circus",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "EC2 5NT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 7,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 1,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10539,
+		"customerID": "BSBEV",
+		"employeeID": 6,
+		"orderDate": "1997-05-16 00:00:00.000",
+		"requiredDate": "1997-06-13 00:00:00.000",
+		"shippedDate": "1997-05-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 12.36,
+		"shipName": "B's Beverages",
+		"shipAddress": {
+			"street": "Fauntleroy Circus",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "EC2 5NT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 20,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10540,
+		"customerID": "QUICK",
+		"employeeID": 3,
+		"orderDate": "1997-05-19 00:00:00.000",
+		"requiredDate": "1997-06-16 00:00:00.000",
+		"shippedDate": "1997-06-13 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1007.64,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 3,
+				"unitPrice": 10,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10541,
+		"customerID": "HANAR",
+		"employeeID": 2,
+		"orderDate": "1997-05-19 00:00:00.000",
+		"requiredDate": "1997-06-16 00:00:00.000",
+		"shippedDate": "1997-05-29 00:00:00.000",
+		"shipVia": 1,
+		"freight": 68.65,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 35,
+				"discount": 0.1
+			},
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 4,
+				"discount": 0.1
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 36,
+				"discount": 0.1
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 9,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10534,
+		"customerID": "LEHMS",
+		"employeeID": 8,
+		"orderDate": "1997-05-12 00:00:00.000",
+		"requiredDate": "1997-06-09 00:00:00.000",
+		"shippedDate": "1997-05-14 00:00:00.000",
+		"shipVia": 2,
+		"freight": 27.94,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 10,
+				"discount": 0.2
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 10,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10533,
+		"customerID": "FOLKO",
+		"employeeID": 8,
+		"orderDate": "1997-05-12 00:00:00.000",
+		"requiredDate": "1997-06-09 00:00:00.000",
+		"shippedDate": "1997-05-22 00:00:00.000",
+		"shipVia": 1,
+		"freight": 188.04,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 50,
+				"discount": 0.05
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 73,
+				"unitPrice": 15,
+				"quantity": 24,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10535,
+		"customerID": "ANTON",
+		"employeeID": 4,
+		"orderDate": "1997-05-13 00:00:00.000",
+		"requiredDate": "1997-06-10 00:00:00.000",
+		"shippedDate": "1997-05-21 00:00:00.000",
+		"shipVia": 1,
+		"freight": 15.64,
+		"shipName": "Antonio Moreno Taquería",
+		"shipAddress": {
+			"street": "Mataderos  2312",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5023,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 50,
+				"discount": 0.1
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 10,
+				"discount": 0.1
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 5,
+				"discount": 0.1
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 15,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10543,
+		"customerID": "LILAS",
+		"employeeID": 8,
+		"orderDate": "1997-05-21 00:00:00.000",
+		"requiredDate": "1997-06-18 00:00:00.000",
+		"shippedDate": "1997-05-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 48.17,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 12,
+				"unitPrice": 38,
+				"quantity": 30,
+				"discount": 0.15
+			},
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 70,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10542,
+		"customerID": "KOENE",
+		"employeeID": 1,
+		"orderDate": "1997-05-20 00:00:00.000",
+		"requiredDate": "1997-06-17 00:00:00.000",
+		"shippedDate": "1997-05-26 00:00:00.000",
+		"shipVia": 3,
+		"freight": 10.95,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 15,
+				"discount": 0.05
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 24,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10546,
+		"customerID": "VICTE",
+		"employeeID": 1,
+		"orderDate": "1997-05-23 00:00:00.000",
+		"requiredDate": "1997-06-20 00:00:00.000",
+		"shippedDate": "1997-05-27 00:00:00.000",
+		"shipVia": 3,
+		"freight": 194.72,
+		"shipName": "Victuailles en stock",
+		"shipAddress": {
+			"street": "2 rue du Commerce",
+			"city": "Lyon",
+			"region": "NULL",
+			"postalCode": 69004,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10547,
+		"customerID": "SEVES",
+		"employeeID": 3,
+		"orderDate": "1997-05-23 00:00:00.000",
+		"requiredDate": "1997-06-20 00:00:00.000",
+		"shippedDate": "1997-06-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 178.43,
+		"shipName": "Seven Seas Imports",
+		"shipAddress": {
+			"street": "90 Wadhurst Rd.",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "OX15 4NB",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 32,
+				"unitPrice": 32,
+				"quantity": 24,
+				"discount": 0.15
+			},
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 60,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10548,
+		"customerID": "TOMSP",
+		"employeeID": 3,
+		"orderDate": "1997-05-26 00:00:00.000",
+		"requiredDate": "1997-06-23 00:00:00.000",
+		"shippedDate": "1997-06-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.43,
+		"shipName": "Toms Spezialitäten",
+		"shipAddress": {
+			"street": "Luisenstr. 48",
+			"city": "Münster",
+			"region": "NULL",
+			"postalCode": 44087,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 34,
+				"unitPrice": 14,
+				"quantity": 10,
+				"discount": 0.25
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 14,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10550,
+		"customerID": "GODOS",
+		"employeeID": 7,
+		"orderDate": "1997-05-28 00:00:00.000",
+		"requiredDate": "1997-06-25 00:00:00.000",
+		"shippedDate": "1997-06-06 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.32,
+		"shipName": "Godos Cocina Típica",
+		"shipAddress": {
+			"street": "C/ Romero 33",
+			"city": "Sevilla",
+			"region": "NULL",
+			"postalCode": 41101,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 8,
+				"discount": 0.1
+			},
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 6,
+				"discount": 0.1
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 10,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10544,
+		"customerID": "LONEP",
+		"employeeID": 4,
+		"orderDate": "1997-05-21 00:00:00.000",
+		"requiredDate": "1997-06-18 00:00:00.000",
+		"shippedDate": "1997-05-30 00:00:00.000",
+		"shipVia": 1,
+		"freight": 24.91,
+		"shipName": "Lonesome Pine Restaurant",
+		"shipAddress": {
+			"street": "89 Chiaroscuro Rd.",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97219,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 7,
+				"discount": 0
+			},
+			{
+				"productID": 67,
+				"unitPrice": 14,
+				"quantity": 7,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10553,
+		"customerID": "WARTH",
+		"employeeID": 2,
+		"orderDate": "1997-05-30 00:00:00.000",
+		"requiredDate": "1997-06-27 00:00:00.000",
+		"shippedDate": "1997-06-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 149.49,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10554,
+		"customerID": "OTTIK",
+		"employeeID": 4,
+		"orderDate": "1997-05-30 00:00:00.000",
+		"requiredDate": "1997-06-27 00:00:00.000",
+		"shippedDate": "1997-06-05 00:00:00.000",
+		"shipVia": 3,
+		"freight": 120.97,
+		"shipName": "Ottilies Käseladen",
+		"shipAddress": {
+			"street": "Mehrheimerstr. 369",
+			"city": "Köln",
+			"region": "NULL",
+			"postalCode": 50739,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 30,
+				"discount": 0.05
+			},
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 10,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10555,
+		"customerID": "SAVEA",
+		"employeeID": 6,
+		"orderDate": "1997-06-02 00:00:00.000",
+		"requiredDate": "1997-06-30 00:00:00.000",
+		"shippedDate": "1997-06-04 00:00:00.000",
+		"shipVia": 3,
+		"freight": 252.49,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 30,
+				"discount": 0.2
+			},
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 35,
+				"discount": 0.2
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 18,
+				"discount": 0.2
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 40,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10557,
+		"customerID": "LEHMS",
+		"employeeID": 9,
+		"orderDate": "1997-06-03 00:00:00.000",
+		"requiredDate": "1997-06-17 00:00:00.000",
+		"shippedDate": "1997-06-06 00:00:00.000",
+		"shipVia": 2,
+		"freight": 96.72,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10558,
+		"customerID": "AROUT",
+		"employeeID": 1,
+		"orderDate": "1997-06-04 00:00:00.000",
+		"requiredDate": "1997-07-02 00:00:00.000",
+		"shippedDate": "1997-06-10 00:00:00.000",
+		"shipVia": 2,
+		"freight": 72.97,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 73,
+				"unitPrice": 15,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10551,
+		"customerID": "FURIB",
+		"employeeID": 4,
+		"orderDate": "1997-05-28 00:00:00.000",
+		"requiredDate": "1997-07-09 00:00:00.000",
+		"shippedDate": "1997-06-06 00:00:00.000",
+		"shipVia": 3,
+		"freight": 72.95,
+		"shipName": "Furia Bacalhau e Frutos do Mar",
+		"shipAddress": {
+			"street": "Jardim das rosas n. 32",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1675,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 40,
+				"discount": 0.15
+			},
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0.15
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10549,
+		"customerID": "QUICK",
+		"employeeID": 5,
+		"orderDate": "1997-05-27 00:00:00.000",
+		"requiredDate": "1997-06-10 00:00:00.000",
+		"shippedDate": "1997-05-30 00:00:00.000",
+		"shipVia": 1,
+		"freight": 171.24,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 55,
+				"discount": 0.15
+			},
+			{
+				"productID": 45,
+				"unitPrice": 9.5,
+				"quantity": 100,
+				"discount": 0.15
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 48,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10552,
+		"customerID": "HILAA",
+		"employeeID": 2,
+		"orderDate": "1997-05-29 00:00:00.000",
+		"requiredDate": "1997-06-26 00:00:00.000",
+		"shippedDate": "1997-06-05 00:00:00.000",
+		"shipVia": 1,
+		"freight": 83.22,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10562,
+		"customerID": "REGGC",
+		"employeeID": 1,
+		"orderDate": "1997-06-09 00:00:00.000",
+		"requiredDate": "1997-07-07 00:00:00.000",
+		"shippedDate": "1997-06-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 22.95,
+		"shipName": "Reggiani Caseifici",
+		"shipAddress": {
+			"street": "Strada Provinciale 124",
+			"city": "Reggio Emilia",
+			"region": "NULL",
+			"postalCode": 42100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 10,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10563,
+		"customerID": "RICAR",
+		"employeeID": 2,
+		"orderDate": "1997-06-10 00:00:00.000",
+		"requiredDate": "1997-07-22 00:00:00.000",
+		"shippedDate": "1997-06-24 00:00:00.000",
+		"shipVia": 2,
+		"freight": 60.43,
+		"shipName": "Ricardo Adocicados",
+		"shipAddress": {
+			"street": "Av. Copacabana 267",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-890",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 70,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10564,
+		"customerID": "RATTC",
+		"employeeID": 4,
+		"orderDate": "1997-06-10 00:00:00.000",
+		"requiredDate": "1997-07-08 00:00:00.000",
+		"shippedDate": "1997-06-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 13.75,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 16,
+				"discount": 0.05
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 6,
+				"discount": 0.05
+			},
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 25,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10565,
+		"customerID": "MEREP",
+		"employeeID": 8,
+		"orderDate": "1997-06-11 00:00:00.000",
+		"requiredDate": "1997-07-09 00:00:00.000",
+		"shippedDate": "1997-06-18 00:00:00.000",
+		"shipVia": 2,
+		"freight": 7.15,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 25,
+				"discount": 0.1
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 18,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10566,
+		"customerID": "BLONP",
+		"employeeID": 9,
+		"orderDate": "1997-06-12 00:00:00.000",
+		"requiredDate": "1997-07-10 00:00:00.000",
+		"shippedDate": "1997-06-18 00:00:00.000",
+		"shipVia": 1,
+		"freight": 88.4,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 35,
+				"discount": 0.15
+			},
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 18,
+				"discount": 0.15
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10567,
+		"customerID": "HUNGO",
+		"employeeID": 1,
+		"orderDate": "1997-06-12 00:00:00.000",
+		"requiredDate": "1997-07-10 00:00:00.000",
+		"shippedDate": "1997-06-17 00:00:00.000",
+		"shipVia": 1,
+		"freight": 33.97,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 60,
+				"discount": 0.2
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 40,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10559,
+		"customerID": "BLONP",
+		"employeeID": 6,
+		"orderDate": "1997-06-05 00:00:00.000",
+		"requiredDate": "1997-07-03 00:00:00.000",
+		"shippedDate": "1997-06-13 00:00:00.000",
+		"shipVia": 1,
+		"freight": 8.05,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 12,
+				"discount": 0.05
+			},
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 18,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10569,
+		"customerID": "RATTC",
+		"employeeID": 5,
+		"orderDate": "1997-06-16 00:00:00.000",
+		"requiredDate": "1997-07-14 00:00:00.000",
+		"shippedDate": "1997-07-11 00:00:00.000",
+		"shipVia": 1,
+		"freight": 58.98,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 35,
+				"discount": 0.2
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10560,
+		"customerID": "FRANK",
+		"employeeID": 8,
+		"orderDate": "1997-06-06 00:00:00.000",
+		"requiredDate": "1997-07-04 00:00:00.000",
+		"shippedDate": "1997-06-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 36.65,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 15,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10570,
+		"customerID": "MEREP",
+		"employeeID": 3,
+		"orderDate": "1997-06-17 00:00:00.000",
+		"requiredDate": "1997-07-15 00:00:00.000",
+		"shippedDate": "1997-06-19 00:00:00.000",
+		"shipVia": 3,
+		"freight": 188.99,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 15,
+				"discount": 0.05
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 60,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10571,
+		"customerID": "ERNSH",
+		"employeeID": 8,
+		"orderDate": "1997-06-17 00:00:00.000",
+		"requiredDate": "1997-07-29 00:00:00.000",
+		"shippedDate": "1997-07-04 00:00:00.000",
+		"shipVia": 3,
+		"freight": 26.06,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 11,
+				"discount": 0.15
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 28,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10572,
+		"customerID": "BERGS",
+		"employeeID": 3,
+		"orderDate": "1997-06-18 00:00:00.000",
+		"requiredDate": "1997-07-16 00:00:00.000",
+		"shippedDate": "1997-06-25 00:00:00.000",
+		"shipVia": 2,
+		"freight": 116.43,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 12,
+				"discount": 0.1
+			},
+			{
+				"productID": 32,
+				"unitPrice": 32,
+				"quantity": 10,
+				"discount": 0.1
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 15,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10561,
+		"customerID": "FOLKO",
+		"employeeID": 2,
+		"orderDate": "1997-06-06 00:00:00.000",
+		"requiredDate": "1997-07-04 00:00:00.000",
+		"shippedDate": "1997-06-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 242.21,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10573,
+		"customerID": "ANTON",
+		"employeeID": 7,
+		"orderDate": "1997-06-19 00:00:00.000",
+		"requiredDate": "1997-07-17 00:00:00.000",
+		"shippedDate": "1997-06-20 00:00:00.000",
+		"shipVia": 3,
+		"freight": 84.84,
+		"shipName": "Antonio Moreno Taquería",
+		"shipAddress": {
+			"street": "Mataderos  2312",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5023,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 34,
+				"unitPrice": 14,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10574,
+		"customerID": "TRAIH",
+		"employeeID": 4,
+		"orderDate": "1997-06-19 00:00:00.000",
+		"requiredDate": "1997-07-17 00:00:00.000",
+		"shippedDate": "1997-06-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 37.6,
+		"shipName": "Trail's Head Gourmet Provisioners",
+		"shipAddress": {
+			"street": "722 DaVinci Blvd.",
+			"city": "Kirkland",
+			"region": "WA",
+			"postalCode": 98034,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10578,
+		"customerID": "BSBEV",
+		"employeeID": 4,
+		"orderDate": "1997-06-24 00:00:00.000",
+		"requiredDate": "1997-07-22 00:00:00.000",
+		"shippedDate": "1997-07-25 00:00:00.000",
+		"shipVia": 3,
+		"freight": 29.6,
+		"shipName": "B's Beverages",
+		"shipAddress": {
+			"street": "Fauntleroy Circus",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "EC2 5NT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10579,
+		"customerID": "LETSS",
+		"employeeID": 1,
+		"orderDate": "1997-06-25 00:00:00.000",
+		"requiredDate": "1997-07-23 00:00:00.000",
+		"shippedDate": "1997-07-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 13.73,
+		"shipName": "Let's Stop N Shop",
+		"shipAddress": {
+			"street": "87 Polk St. Suite 5",
+			"city": "San Francisco",
+			"region": "CA",
+			"postalCode": 94117,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 15,
+				"unitPrice": 15.5,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10580,
+		"customerID": "OTTIK",
+		"employeeID": 4,
+		"orderDate": "1997-06-26 00:00:00.000",
+		"requiredDate": "1997-07-24 00:00:00.000",
+		"shippedDate": "1997-07-01 00:00:00.000",
+		"shipVia": 3,
+		"freight": 75.89,
+		"shipName": "Ottilies Käseladen",
+		"shipAddress": {
+			"street": "Mehrheimerstr. 369",
+			"city": "Köln",
+			"region": "NULL",
+			"postalCode": 50739,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 15,
+				"discount": 0.05
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 9,
+				"discount": 0.05
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 30,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10582,
+		"customerID": "BLAUS",
+		"employeeID": 3,
+		"orderDate": "1997-06-27 00:00:00.000",
+		"requiredDate": "1997-07-25 00:00:00.000",
+		"shippedDate": "1997-07-14 00:00:00.000",
+		"shipVia": 2,
+		"freight": 27.71,
+		"shipName": "Blauer See Delikatessen",
+		"shipAddress": {
+			"street": "Forsterstr. 57",
+			"city": "Mannheim",
+			"region": "NULL",
+			"postalCode": 68306,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 14,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10583,
+		"customerID": "WARTH",
+		"employeeID": 2,
+		"orderDate": "1997-06-30 00:00:00.000",
+		"requiredDate": "1997-07-28 00:00:00.000",
+		"shippedDate": "1997-07-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 7.28,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 24,
+				"discount": 0.15
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 10,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10577,
+		"customerID": "TRAIH",
+		"employeeID": 9,
+		"orderDate": "1997-06-23 00:00:00.000",
+		"requiredDate": "1997-08-04 00:00:00.000",
+		"shippedDate": "1997-06-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 25.41,
+		"shipName": "Trail's Head Gourmet Provisioners",
+		"shipAddress": {
+			"street": "722 DaVinci Blvd.",
+			"city": "Kirkland",
+			"region": "WA",
+			"postalCode": 98034,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10576,
+		"customerID": "TORTU",
+		"employeeID": 3,
+		"orderDate": "1997-06-23 00:00:00.000",
+		"requiredDate": "1997-07-07 00:00:00.000",
+		"shippedDate": "1997-06-30 00:00:00.000",
+		"shipVia": 3,
+		"freight": 18.56,
+		"shipName": "Tortuga Restaurante",
+		"shipAddress": {
+			"street": "Avda. Azteca 123",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10587,
+		"customerID": "QUEDE",
+		"employeeID": 1,
+		"orderDate": "1997-07-02 00:00:00.000",
+		"requiredDate": "1997-07-30 00:00:00.000",
+		"shippedDate": "1997-07-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 62.52,
+		"shipName": "Que Delícia",
+		"shipAddress": {
+			"street": "Rua da Panificadora 12",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-673",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10588,
+		"customerID": "QUICK",
+		"employeeID": 2,
+		"orderDate": "1997-07-03 00:00:00.000",
+		"requiredDate": "1997-07-31 00:00:00.000",
+		"shippedDate": "1997-07-10 00:00:00.000",
+		"shipVia": 3,
+		"freight": 194.67,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 40,
+				"discount": 0.2
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 100,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10590,
+		"customerID": "MEREP",
+		"employeeID": 4,
+		"orderDate": "1997-07-07 00:00:00.000",
+		"requiredDate": "1997-08-04 00:00:00.000",
+		"shippedDate": "1997-07-14 00:00:00.000",
+		"shipVia": 3,
+		"freight": 44.77,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 60,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10575,
+		"customerID": "MORGK",
+		"employeeID": 5,
+		"orderDate": "1997-06-20 00:00:00.000",
+		"requiredDate": "1997-07-04 00:00:00.000",
+		"shippedDate": "1997-06-30 00:00:00.000",
+		"shipVia": 1,
+		"freight": 127.34,
+		"shipName": "Morgenstern Gesundkost",
+		"shipAddress": {
+			"street": "Heerstr. 22",
+			"city": "Leipzig",
+			"region": "NULL",
+			"postalCode": 4179,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 63,
+				"unitPrice": 43.9,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10591,
+		"customerID": "VAFFE",
+		"employeeID": 1,
+		"orderDate": "1997-07-07 00:00:00.000",
+		"requiredDate": "1997-07-21 00:00:00.000",
+		"shippedDate": "1997-07-16 00:00:00.000",
+		"shipVia": 1,
+		"freight": 55.92,
+		"shipName": "Vaffeljernet",
+		"shipAddress": {
+			"street": "Smagsloget 45",
+			"city": "Århus",
+			"region": "NULL",
+			"postalCode": 8200,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 3,
+				"unitPrice": 10,
+				"quantity": 14,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10595,
+		"customerID": "ERNSH",
+		"employeeID": 2,
+		"orderDate": "1997-07-10 00:00:00.000",
+		"requiredDate": "1997-08-07 00:00:00.000",
+		"shippedDate": "1997-07-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 96.78,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 30,
+				"discount": 0.25
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 65,
+				"discount": 0.25
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 120,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10596,
+		"customerID": "WHITC",
+		"employeeID": 8,
+		"orderDate": "1997-07-11 00:00:00.000",
+		"requiredDate": "1997-08-08 00:00:00.000",
+		"shippedDate": "1997-08-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 16.34,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 5,
+				"discount": 0.2
+			},
+			{
+				"productID": 63,
+				"unitPrice": 43.9,
+				"quantity": 24,
+				"discount": 0.2
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 30,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10597,
+		"customerID": "PICCO",
+		"employeeID": 7,
+		"orderDate": "1997-07-11 00:00:00.000",
+		"requiredDate": "1997-08-08 00:00:00.000",
+		"shippedDate": "1997-07-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 35.12,
+		"shipName": "Piccolo und mehr",
+		"shipAddress": {
+			"street": "Geislweg 14",
+			"city": "Salzburg",
+			"region": "NULL",
+			"postalCode": 5020,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 35,
+				"discount": 0.2
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 12,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10598,
+		"customerID": "RATTC",
+		"employeeID": 1,
+		"orderDate": "1997-07-14 00:00:00.000",
+		"requiredDate": "1997-08-11 00:00:00.000",
+		"shippedDate": "1997-07-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 44.42,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 27,
+				"unitPrice": 43.9,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10600,
+		"customerID": "HUNGC",
+		"employeeID": 4,
+		"orderDate": "1997-07-16 00:00:00.000",
+		"requiredDate": "1997-08-13 00:00:00.000",
+		"shippedDate": "1997-07-21 00:00:00.000",
+		"shipVia": 1,
+		"freight": 45.13,
+		"shipName": "Hungry Coyote Import Store",
+		"shipAddress": {
+			"street": "City Center Plaza 516 Main St.",
+			"city": "Elgin",
+			"region": "OR",
+			"postalCode": 97827,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 73,
+				"unitPrice": 15,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10601,
+		"customerID": "HILAA",
+		"employeeID": 7,
+		"orderDate": "1997-07-16 00:00:00.000",
+		"requiredDate": "1997-08-27 00:00:00.000",
+		"shippedDate": "1997-07-22 00:00:00.000",
+		"shipVia": 1,
+		"freight": 58.3,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10603,
+		"customerID": "SAVEA",
+		"employeeID": 8,
+		"orderDate": "1997-07-18 00:00:00.000",
+		"requiredDate": "1997-08-15 00:00:00.000",
+		"shippedDate": "1997-08-08 00:00:00.000",
+		"shipVia": 2,
+		"freight": 48.77,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 48,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 20,
+				"quantity": 25,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10604,
+		"customerID": "FURIB",
+		"employeeID": 1,
+		"orderDate": "1997-07-18 00:00:00.000",
+		"requiredDate": "1997-08-15 00:00:00.000",
+		"shippedDate": "1997-07-29 00:00:00.000",
+		"shipVia": 1,
+		"freight": 7.46,
+		"shipName": "Furia Bacalhau e Frutos do Mar",
+		"shipAddress": {
+			"street": "Jardim das rosas n. 32",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1675,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 48,
+				"unitPrice": 12.75,
+				"quantity": 6,
+				"discount": 0.1
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10605,
+		"customerID": "MEREP",
+		"employeeID": 1,
+		"orderDate": "1997-07-21 00:00:00.000",
+		"requiredDate": "1997-08-18 00:00:00.000",
+		"shippedDate": "1997-07-29 00:00:00.000",
+		"shipVia": 2,
+		"freight": 379.13,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 30,
+				"discount": 0.05
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 70,
+				"discount": 0.05
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 15,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10606,
+		"customerID": "TRADH",
+		"employeeID": 4,
+		"orderDate": "1997-07-22 00:00:00.000",
+		"requiredDate": "1997-08-19 00:00:00.000",
+		"shippedDate": "1997-07-31 00:00:00.000",
+		"shipVia": 3,
+		"freight": 79.4,
+		"shipName": "Tradiçao Hipermercados",
+		"shipAddress": {
+			"street": "Av. Inês de Castro 414",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05634-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 10,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10594,
+		"customerID": "OLDWO",
+		"employeeID": 3,
+		"orderDate": "1997-07-09 00:00:00.000",
+		"requiredDate": "1997-08-06 00:00:00.000",
+		"shippedDate": "1997-07-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 5.24,
+		"shipName": "Old World Delicatessen",
+		"shipAddress": {
+			"street": "2743 Bering St.",
+			"city": "Anchorage",
+			"region": "AK",
+			"postalCode": 99508,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10593,
+		"customerID": "LEHMS",
+		"employeeID": 7,
+		"orderDate": "1997-07-09 00:00:00.000",
+		"requiredDate": "1997-08-06 00:00:00.000",
+		"shippedDate": "1997-08-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 174.2,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 20,
+				"unitPrice": 81,
+				"quantity": 21,
+				"discount": 0.2
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 4,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10592,
+		"customerID": "LEHMS",
+		"employeeID": 3,
+		"orderDate": "1997-07-08 00:00:00.000",
+		"requiredDate": "1997-08-05 00:00:00.000",
+		"shippedDate": "1997-07-16 00:00:00.000",
+		"shipVia": 1,
+		"freight": 32.1,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 15,
+				"unitPrice": 15.5,
+				"quantity": 25,
+				"discount": 0.05
+			},
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 5,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10607,
+		"customerID": "SAVEA",
+		"employeeID": 5,
+		"orderDate": "1997-07-22 00:00:00.000",
+		"requiredDate": "1997-08-19 00:00:00.000",
+		"shippedDate": "1997-07-25 00:00:00.000",
+		"shipVia": 1,
+		"freight": 200.24,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 45,
+				"discount": 0
+			},
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 100,
+				"discount": 0
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 42,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10609,
+		"customerID": "DUMON",
+		"employeeID": 7,
+		"orderDate": "1997-07-24 00:00:00.000",
+		"requiredDate": "1997-08-21 00:00:00.000",
+		"shippedDate": "1997-07-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.85,
+		"shipName": "Du monde entier",
+		"shipAddress": {
+			"street": "67 rue des Cinquante Otages",
+			"city": "Nantes",
+			"region": "NULL",
+			"postalCode": 44000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10614,
+		"customerID": "BLAUS",
+		"employeeID": 8,
+		"orderDate": "1997-07-29 00:00:00.000",
+		"requiredDate": "1997-08-26 00:00:00.000",
+		"shippedDate": "1997-08-01 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.93,
+		"shipName": "Blauer See Delikatessen",
+		"shipAddress": {
+			"street": "Forsterstr. 57",
+			"city": "Mannheim",
+			"region": "NULL",
+			"postalCode": 68306,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10616,
+		"customerID": "GREAL",
+		"employeeID": 1,
+		"orderDate": "1997-07-31 00:00:00.000",
+		"requiredDate": "1997-08-28 00:00:00.000",
+		"shippedDate": "1997-08-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 116.53,
+		"shipName": "Great Lakes Food Market",
+		"shipAddress": {
+			"street": "2732 Baker Blvd.",
+			"city": "Eugene",
+			"region": "OR",
+			"postalCode": 97403,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 15,
+				"discount": 0.05
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 15,
+				"discount": 0.05
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 15,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10618,
+		"customerID": "MEREP",
+		"employeeID": 1,
+		"orderDate": "1997-08-01 00:00:00.000",
+		"requiredDate": "1997-09-12 00:00:00.000",
+		"shippedDate": "1997-08-08 00:00:00.000",
+		"shipVia": 1,
+		"freight": 154.68,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 6,
+				"unitPrice": 25,
+				"quantity": 70,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10619,
+		"customerID": "MEREP",
+		"employeeID": 3,
+		"orderDate": "1997-08-04 00:00:00.000",
+		"requiredDate": "1997-09-01 00:00:00.000",
+		"shippedDate": "1997-08-07 00:00:00.000",
+		"shipVia": 3,
+		"freight": 91.05,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 42,
+				"discount": 0
+			},
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10612,
+		"customerID": "SAVEA",
+		"employeeID": 1,
+		"orderDate": "1997-07-28 00:00:00.000",
+		"requiredDate": "1997-08-25 00:00:00.000",
+		"shippedDate": "1997-08-01 00:00:00.000",
+		"shipVia": 2,
+		"freight": 544.08,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 70,
+				"discount": 0
+			},
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 55,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 20,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 80,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10613,
+		"customerID": "HILAA",
+		"employeeID": 4,
+		"orderDate": "1997-07-29 00:00:00.000",
+		"requiredDate": "1997-08-26 00:00:00.000",
+		"shippedDate": "1997-08-01 00:00:00.000",
+		"shipVia": 2,
+		"freight": 8.11,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 8,
+				"discount": 0.1
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10611,
+		"customerID": "WOLZA",
+		"employeeID": 6,
+		"orderDate": "1997-07-25 00:00:00.000",
+		"requiredDate": "1997-08-22 00:00:00.000",
+		"shippedDate": "1997-08-01 00:00:00.000",
+		"shipVia": 2,
+		"freight": 80.65,
+		"shipName": "Wolski Zajazd",
+		"shipAddress": {
+			"street": "ul. Filtrowa 68",
+			"city": "Warszawa",
+			"region": "NULL",
+			"postalCode": "01-012",
+			"country": "Poland"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10621,
+		"customerID": "ISLAT",
+		"employeeID": 4,
+		"orderDate": "1997-08-05 00:00:00.000",
+		"requiredDate": "1997-09-02 00:00:00.000",
+		"shippedDate": "1997-08-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 23.73,
+		"shipName": "Island Trading",
+		"shipAddress": {
+			"street": "Garden House Crowther Way",
+			"city": "Cowes",
+			"region": "Isle of Wight",
+			"postalCode": "PO31 7PJ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10620,
+		"customerID": "LAUGB",
+		"employeeID": 2,
+		"orderDate": "1997-08-05 00:00:00.000",
+		"requiredDate": "1997-09-02 00:00:00.000",
+		"shippedDate": "1997-08-14 00:00:00.000",
+		"shipVia": 3,
+		"freight": 0.94,
+		"shipName": "Laughing Bacchus Wine Cellars",
+		"shipAddress": {
+			"street": "2319 Elm St.",
+			"city": "Vancouver",
+			"region": "BC",
+			"postalCode": "V3F 2K1",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10625,
+		"customerID": "ANATR",
+		"employeeID": 3,
+		"orderDate": "1997-08-08 00:00:00.000",
+		"requiredDate": "1997-09-05 00:00:00.000",
+		"shippedDate": "1997-08-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 43.9,
+		"shipName": "Ana Trujillo Emparedados y helados",
+		"shipAddress": {
+			"street": "Avda. de la Constitución 2222",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5021,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10623,
+		"customerID": "FRANK",
+		"employeeID": 8,
+		"orderDate": "1997-08-07 00:00:00.000",
+		"requiredDate": "1997-09-04 00:00:00.000",
+		"shippedDate": "1997-08-12 00:00:00.000",
+		"shipVia": 2,
+		"freight": 97.18,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 15,
+				"discount": 0.1
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 25,
+				"discount": 0.1
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 30,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10622,
+		"customerID": "RICAR",
+		"employeeID": 4,
+		"orderDate": "1997-08-06 00:00:00.000",
+		"requiredDate": "1997-09-03 00:00:00.000",
+		"shippedDate": "1997-08-11 00:00:00.000",
+		"shipVia": 3,
+		"freight": 50.97,
+		"shipName": "Ricardo Adocicados",
+		"shipAddress": {
+			"street": "Av. Copacabana 267",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-890",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 18,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10624,
+		"customerID": "THECR",
+		"employeeID": 4,
+		"orderDate": "1997-08-07 00:00:00.000",
+		"requiredDate": "1997-09-04 00:00:00.000",
+		"shippedDate": "1997-08-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 94.8,
+		"shipName": "The Cracker Box",
+		"shipAddress": {
+			"street": "55 Grizzly Peak Rd.",
+			"city": "Butte",
+			"region": "MT",
+			"postalCode": 59801,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10626,
+		"customerID": "BERGS",
+		"employeeID": 1,
+		"orderDate": "1997-08-11 00:00:00.000",
+		"requiredDate": "1997-09-08 00:00:00.000",
+		"shippedDate": "1997-08-20 00:00:00.000",
+		"shipVia": 2,
+		"freight": 138.69,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10627,
+		"customerID": "SAVEA",
+		"employeeID": 8,
+		"orderDate": "1997-08-11 00:00:00.000",
+		"requiredDate": "1997-09-22 00:00:00.000",
+		"shippedDate": "1997-08-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 107.46,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 73,
+				"unitPrice": 15,
+				"quantity": 35,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10630,
+		"customerID": "KOENE",
+		"employeeID": 1,
+		"orderDate": "1997-08-13 00:00:00.000",
+		"requiredDate": "1997-09-10 00:00:00.000",
+		"shippedDate": "1997-08-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 32.35,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 12,
+				"discount": 0.05
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10629,
+		"customerID": "GODOS",
+		"employeeID": 4,
+		"orderDate": "1997-08-12 00:00:00.000",
+		"requiredDate": "1997-09-09 00:00:00.000",
+		"shippedDate": "1997-08-20 00:00:00.000",
+		"shipVia": 3,
+		"freight": 85.46,
+		"shipName": "Godos Cocina Típica",
+		"shipAddress": {
+			"street": "C/ Romero 33",
+			"city": "Sevilla",
+			"region": "NULL",
+			"postalCode": 41101,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10632,
+		"customerID": "WANDK",
+		"employeeID": 8,
+		"orderDate": "1997-08-14 00:00:00.000",
+		"requiredDate": "1997-09-11 00:00:00.000",
+		"shippedDate": "1997-08-19 00:00:00.000",
+		"shipVia": 1,
+		"freight": 41.38,
+		"shipName": "Die Wandernde Kuh",
+		"shipAddress": {
+			"street": "Adenauerallee 900",
+			"city": "Stuttgart",
+			"region": "NULL",
+			"postalCode": 70563,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 30,
+				"discount": 0.05
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10633,
+		"customerID": "ERNSH",
+		"employeeID": 7,
+		"orderDate": "1997-08-15 00:00:00.000",
+		"requiredDate": "1997-09-12 00:00:00.000",
+		"shippedDate": "1997-08-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 477.9,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 12,
+				"unitPrice": 38,
+				"quantity": 36,
+				"discount": 0.15
+			},
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 13,
+				"discount": 0.15
+			},
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 35,
+				"discount": 0.15
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 80,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10634,
+		"customerID": "FOLIG",
+		"employeeID": 4,
+		"orderDate": "1997-08-15 00:00:00.000",
+		"requiredDate": "1997-09-12 00:00:00.000",
+		"shippedDate": "1997-08-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 487.38,
+		"shipName": "Folies gourmandes",
+		"shipAddress": {
+			"street": "184 chaussée de Tournai",
+			"city": "Lille",
+			"region": "NULL",
+			"postalCode": 59000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10638,
+		"customerID": "LINOD",
+		"employeeID": 3,
+		"orderDate": "1997-08-20 00:00:00.000",
+		"requiredDate": "1997-09-17 00:00:00.000",
+		"shippedDate": "1997-09-01 00:00:00.000",
+		"shipVia": 1,
+		"freight": 158.44,
+		"shipName": "LINO-Delicateses",
+		"shipAddress": {
+			"street": "Ave. 5 de Mayo Porlamar",
+			"city": "I. de Margarita",
+			"region": "Nueva Esparta",
+			"postalCode": 4980,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 45,
+				"unitPrice": 9.5,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 60,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10640,
+		"customerID": "WANDK",
+		"employeeID": 4,
+		"orderDate": "1997-08-21 00:00:00.000",
+		"requiredDate": "1997-09-18 00:00:00.000",
+		"shippedDate": "1997-08-28 00:00:00.000",
+		"shipVia": 1,
+		"freight": 23.55,
+		"shipName": "Die Wandernde Kuh",
+		"shipAddress": {
+			"street": "Adenauerallee 900",
+			"city": "Stuttgart",
+			"region": "NULL",
+			"postalCode": 70563,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 20,
+				"discount": 0.25
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 15,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10641,
+		"customerID": "HILAA",
+		"employeeID": 4,
+		"orderDate": "1997-08-22 00:00:00.000",
+		"requiredDate": "1997-09-19 00:00:00.000",
+		"shippedDate": "1997-08-26 00:00:00.000",
+		"shipVia": 2,
+		"freight": 179.61,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 60,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10642,
+		"customerID": "SIMOB",
+		"employeeID": 7,
+		"orderDate": "1997-08-22 00:00:00.000",
+		"requiredDate": "1997-09-19 00:00:00.000",
+		"shippedDate": "1997-09-05 00:00:00.000",
+		"shipVia": 3,
+		"freight": 41.89,
+		"shipName": "Simons bistro",
+		"shipAddress": {
+			"street": "Vinbæltet 34",
+			"city": "Kobenhavn",
+			"region": "NULL",
+			"postalCode": 1734,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 30,
+				"discount": 0.2
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 20,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10643,
+		"customerID": "ALFKI",
+		"employeeID": 6,
+		"orderDate": "1997-08-25 00:00:00.000",
+		"requiredDate": "1997-09-22 00:00:00.000",
+		"shippedDate": "1997-09-02 00:00:00.000",
+		"shipVia": 1,
+		"freight": 29.46,
+		"shipName": "Alfreds Futterkiste",
+		"shipAddress": {
+			"street": "Obere Str. 57",
+			"city": "Berlin",
+			"region": "NULL",
+			"postalCode": 12209,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 15,
+				"discount": 0.25
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 21,
+				"discount": 0.25
+			},
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 2,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10636,
+		"customerID": "WARTH",
+		"employeeID": 4,
+		"orderDate": "1997-08-19 00:00:00.000",
+		"requiredDate": "1997-09-16 00:00:00.000",
+		"shippedDate": "1997-08-26 00:00:00.000",
+		"shipVia": 1,
+		"freight": 1.15,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10644,
+		"customerID": "WELLI",
+		"employeeID": 3,
+		"orderDate": "1997-08-25 00:00:00.000",
+		"requiredDate": "1997-09-22 00:00:00.000",
+		"shippedDate": "1997-09-01 00:00:00.000",
+		"shipVia": 2,
+		"freight": 0.14,
+		"shipName": "Wellington Importadora",
+		"shipAddress": {
+			"street": "Rua do Mercado 12",
+			"city": "Resende",
+			"region": "SP",
+			"postalCode": "08737-363",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 4,
+				"discount": 0.1
+			},
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 21,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10635,
+		"customerID": "MAGAA",
+		"employeeID": 8,
+		"orderDate": "1997-08-18 00:00:00.000",
+		"requiredDate": "1997-09-15 00:00:00.000",
+		"shippedDate": "1997-08-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 47.46,
+		"shipName": "Magazzini Alimentari Riuniti",
+		"shipAddress": {
+			"street": "Via Ludovico il Moro 22",
+			"city": "Bergamo",
+			"region": "NULL",
+			"postalCode": 24100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 5,
+				"unitPrice": 21.35,
+				"quantity": 15,
+				"discount": 0.1
+			},
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 10,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10637,
+		"customerID": "QUEEN",
+		"employeeID": 6,
+		"orderDate": "1997-08-19 00:00:00.000",
+		"requiredDate": "1997-09-16 00:00:00.000",
+		"shippedDate": "1997-08-26 00:00:00.000",
+		"shipVia": 1,
+		"freight": 201.29,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 50,
+				"unitPrice": 16.25,
+				"quantity": 25,
+				"discount": 0.05
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 60,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10645,
+		"customerID": "HANAR",
+		"employeeID": 4,
+		"orderDate": "1997-08-26 00:00:00.000",
+		"requiredDate": "1997-09-23 00:00:00.000",
+		"shippedDate": "1997-09-02 00:00:00.000",
+		"shipVia": 1,
+		"freight": 12.41,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10649,
+		"customerID": "MAISD",
+		"employeeID": 5,
+		"orderDate": "1997-08-28 00:00:00.000",
+		"requiredDate": "1997-09-25 00:00:00.000",
+		"shippedDate": "1997-08-29 00:00:00.000",
+		"shipVia": 3,
+		"freight": 6.2,
+		"shipName": "Maison Dewey",
+		"shipAddress": {
+			"street": "Rue Joseph-Bens 532",
+			"city": "Bruxelles",
+			"region": "NULL",
+			"postalCode": "B-1180",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10650,
+		"customerID": "FAMIA",
+		"employeeID": 5,
+		"orderDate": "1997-08-29 00:00:00.000",
+		"requiredDate": "1997-09-26 00:00:00.000",
+		"shippedDate": "1997-09-03 00:00:00.000",
+		"shipVia": 3,
+		"freight": 176.81,
+		"shipName": "Familia Arquibaldo",
+		"shipAddress": {
+			"street": "Rua Orós 92",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05442-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 25,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10651,
+		"customerID": "WANDK",
+		"employeeID": 8,
+		"orderDate": "1997-09-01 00:00:00.000",
+		"requiredDate": "1997-09-29 00:00:00.000",
+		"shippedDate": "1997-09-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 20.6,
+		"shipName": "Die Wandernde Kuh",
+		"shipAddress": {
+			"street": "Adenauerallee 900",
+			"city": "Stuttgart",
+			"region": "NULL",
+			"postalCode": 70563,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 12,
+				"discount": 0.25
+			},
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 20,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10652,
+		"customerID": "GOURL",
+		"employeeID": 4,
+		"orderDate": "1997-09-01 00:00:00.000",
+		"requiredDate": "1997-09-29 00:00:00.000",
+		"shippedDate": "1997-09-08 00:00:00.000",
+		"shipVia": 2,
+		"freight": 7.14,
+		"shipName": "Gourmet Lanchonetes",
+		"shipAddress": {
+			"street": "Av. Brasil 442",
+			"city": "Campinas",
+			"region": "SP",
+			"postalCode": "04876-786",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 2,
+				"discount": 0.25
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10653,
+		"customerID": "FRANK",
+		"employeeID": 1,
+		"orderDate": "1997-09-02 00:00:00.000",
+		"requiredDate": "1997-09-30 00:00:00.000",
+		"shippedDate": "1997-09-19 00:00:00.000",
+		"shipVia": 1,
+		"freight": 93.25,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 20,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10654,
+		"customerID": "BERGS",
+		"employeeID": 5,
+		"orderDate": "1997-09-02 00:00:00.000",
+		"requiredDate": "1997-09-30 00:00:00.000",
+		"shippedDate": "1997-09-11 00:00:00.000",
+		"shipVia": 1,
+		"freight": 55.26,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 12,
+				"discount": 0.1
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 6,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10647,
+		"customerID": "QUEDE",
+		"employeeID": 4,
+		"orderDate": "1997-08-27 00:00:00.000",
+		"requiredDate": "1997-09-10 00:00:00.000",
+		"shippedDate": "1997-09-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 45.54,
+		"shipName": "Que Delícia",
+		"shipAddress": {
+			"street": "Rua da Panificadora 12",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-673",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10656,
+		"customerID": "GREAL",
+		"employeeID": 6,
+		"orderDate": "1997-09-04 00:00:00.000",
+		"requiredDate": "1997-10-02 00:00:00.000",
+		"shippedDate": "1997-09-10 00:00:00.000",
+		"shipVia": 1,
+		"freight": 57.15,
+		"shipName": "Great Lakes Food Market",
+		"shipAddress": {
+			"street": "2732 Baker Blvd.",
+			"city": "Eugene",
+			"region": "OR",
+			"postalCode": 97403,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 3,
+				"discount": 0.1
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 28,
+				"discount": 0.1
+			},
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 6,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10657,
+		"customerID": "SAVEA",
+		"employeeID": 2,
+		"orderDate": "1997-09-04 00:00:00.000",
+		"requiredDate": "1997-10-02 00:00:00.000",
+		"shippedDate": "1997-09-15 00:00:00.000",
+		"shipVia": 2,
+		"freight": 352.69,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 45,
+				"discount": 0
+			},
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 45,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 15,
+				"unitPrice": 15.5,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10658,
+		"customerID": "QUICK",
+		"employeeID": 4,
+		"orderDate": "1997-09-05 00:00:00.000",
+		"requiredDate": "1997-10-03 00:00:00.000",
+		"shippedDate": "1997-09-08 00:00:00.000",
+		"shipVia": 1,
+		"freight": 364.15,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 70,
+				"discount": 0.05
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 55,
+				"discount": 0.05
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 70,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10646,
+		"customerID": "HUNGO",
+		"employeeID": 9,
+		"orderDate": "1997-08-27 00:00:00.000",
+		"requiredDate": "1997-10-08 00:00:00.000",
+		"shippedDate": "1997-09-03 00:00:00.000",
+		"shipVia": 3,
+		"freight": 142.33,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 15,
+				"discount": 0.25
+			},
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 18,
+				"discount": 0.25
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 35,
+				"discount": 0.25
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 30,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10648,
+		"customerID": "RICAR",
+		"employeeID": 5,
+		"orderDate": "1997-08-28 00:00:00.000",
+		"requiredDate": "1997-10-09 00:00:00.000",
+		"shippedDate": "1997-09-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 14.25,
+		"shipName": "Ricardo Adocicados",
+		"shipAddress": {
+			"street": "Av. Copacabana 267",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-890",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 15,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10659,
+		"customerID": "QUEEN",
+		"employeeID": 7,
+		"orderDate": "1997-09-05 00:00:00.000",
+		"requiredDate": "1997-10-03 00:00:00.000",
+		"shippedDate": "1997-09-10 00:00:00.000",
+		"shipVia": 2,
+		"freight": 105.81,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 24,
+				"discount": 0.05
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 40,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10664,
+		"customerID": "FURIB",
+		"employeeID": 1,
+		"orderDate": "1997-09-10 00:00:00.000",
+		"requiredDate": "1997-10-08 00:00:00.000",
+		"shippedDate": "1997-09-19 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.27,
+		"shipName": "Furia Bacalhau e Frutos do Mar",
+		"shipAddress": {
+			"street": "Jardim das rosas n. 32",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1675,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 24,
+				"discount": 0.15
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 12,
+				"discount": 0.15
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 15,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10661,
+		"customerID": "HUNGO",
+		"employeeID": 7,
+		"orderDate": "1997-09-09 00:00:00.000",
+		"requiredDate": "1997-10-07 00:00:00.000",
+		"shippedDate": "1997-09-15 00:00:00.000",
+		"shipVia": 3,
+		"freight": 17.55,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 3,
+				"discount": 0.2
+			},
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 49,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10665,
+		"customerID": "LONEP",
+		"employeeID": 1,
+		"orderDate": "1997-09-11 00:00:00.000",
+		"requiredDate": "1997-10-09 00:00:00.000",
+		"shippedDate": "1997-09-17 00:00:00.000",
+		"shipVia": 2,
+		"freight": 26.31,
+		"shipName": "Lonesome Pine Restaurant",
+		"shipAddress": {
+			"street": "89 Chiaroscuro Rd.",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97219,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 1,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10663,
+		"customerID": "BONAP",
+		"employeeID": 2,
+		"orderDate": "1997-09-10 00:00:00.000",
+		"requiredDate": "1997-09-24 00:00:00.000",
+		"shippedDate": "1997-10-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 113.15,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 30,
+				"discount": 0.05
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 30,
+				"discount": 0.05
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10666,
+		"customerID": "RICSU",
+		"employeeID": 7,
+		"orderDate": "1997-09-12 00:00:00.000",
+		"requiredDate": "1997-10-10 00:00:00.000",
+		"shippedDate": "1997-09-22 00:00:00.000",
+		"shipVia": 2,
+		"freight": 232.42,
+		"shipName": "Richter Supermarkt",
+		"shipAddress": {
+			"street": "Starenweg 5",
+			"city": "Genève",
+			"region": "NULL",
+			"postalCode": 1204,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 36,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10667,
+		"customerID": "ERNSH",
+		"employeeID": 7,
+		"orderDate": "1997-09-12 00:00:00.000",
+		"requiredDate": "1997-10-10 00:00:00.000",
+		"shippedDate": "1997-09-19 00:00:00.000",
+		"shipVia": 1,
+		"freight": 78.09,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 45,
+				"discount": 0.2
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 14,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10668,
+		"customerID": "WANDK",
+		"employeeID": 1,
+		"orderDate": "1997-09-15 00:00:00.000",
+		"requiredDate": "1997-10-13 00:00:00.000",
+		"shippedDate": "1997-09-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 47.22,
+		"shipName": "Die Wandernde Kuh",
+		"shipAddress": {
+			"street": "Adenauerallee 900",
+			"city": "Stuttgart",
+			"region": "NULL",
+			"postalCode": 70563,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 8,
+				"discount": 0.1
+			},
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 4,
+				"discount": 0.1
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 15,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10670,
+		"customerID": "FRANK",
+		"employeeID": 4,
+		"orderDate": "1997-09-16 00:00:00.000",
+		"requiredDate": "1997-10-14 00:00:00.000",
+		"shippedDate": "1997-09-18 00:00:00.000",
+		"shipVia": 1,
+		"freight": 203.48,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 32,
+				"discount": 0
+			},
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 73,
+				"unitPrice": 15,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 67,
+				"unitPrice": 14,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10672,
+		"customerID": "BERGS",
+		"employeeID": 9,
+		"orderDate": "1997-09-17 00:00:00.000",
+		"requiredDate": "1997-10-01 00:00:00.000",
+		"shippedDate": "1997-09-26 00:00:00.000",
+		"shipVia": 2,
+		"freight": 95.75,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 15,
+				"discount": 0.1
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10671,
+		"customerID": "FRANR",
+		"employeeID": 1,
+		"orderDate": "1997-09-17 00:00:00.000",
+		"requiredDate": "1997-10-15 00:00:00.000",
+		"shippedDate": "1997-09-24 00:00:00.000",
+		"shipVia": 1,
+		"freight": 30.34,
+		"shipName": "France restauration",
+		"shipAddress": {
+			"street": "54 rue Royale",
+			"city": "Nantes",
+			"region": "NULL",
+			"postalCode": 44000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10673,
+		"customerID": "WILMK",
+		"employeeID": 2,
+		"orderDate": "1997-09-18 00:00:00.000",
+		"requiredDate": "1997-10-16 00:00:00.000",
+		"shippedDate": "1997-09-19 00:00:00.000",
+		"shipVia": 1,
+		"freight": 22.76,
+		"shipName": "Wilman Kala",
+		"shipAddress": {
+			"street": "Keskuskatu 45",
+			"city": "Helsinki",
+			"region": "NULL",
+			"postalCode": 21240,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10677,
+		"customerID": "ANTON",
+		"employeeID": 1,
+		"orderDate": "1997-09-22 00:00:00.000",
+		"requiredDate": "1997-10-20 00:00:00.000",
+		"shippedDate": "1997-09-26 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.03,
+		"shipName": "Antonio Moreno Taquería",
+		"shipAddress": {
+			"street": "Mataderos  2312",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5023,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 30,
+				"discount": 0.15
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 8,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10678,
+		"customerID": "SAVEA",
+		"employeeID": 7,
+		"orderDate": "1997-09-23 00:00:00.000",
+		"requiredDate": "1997-10-21 00:00:00.000",
+		"shippedDate": "1997-10-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 388.98,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 12,
+				"unitPrice": 38,
+				"quantity": 100,
+				"discount": 0
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 120,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10680,
+		"customerID": "OLDWO",
+		"employeeID": 1,
+		"orderDate": "1997-09-24 00:00:00.000",
+		"requiredDate": "1997-10-22 00:00:00.000",
+		"shippedDate": "1997-09-26 00:00:00.000",
+		"shipVia": 1,
+		"freight": 26.61,
+		"shipName": "Old World Delicatessen",
+		"shipAddress": {
+			"street": "2743 Bering St.",
+			"city": "Anchorage",
+			"region": "AK",
+			"postalCode": 99508,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 50,
+				"discount": 0.25
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 20,
+				"discount": 0.25
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 40,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10681,
+		"customerID": "GREAL",
+		"employeeID": 3,
+		"orderDate": "1997-09-25 00:00:00.000",
+		"requiredDate": "1997-10-23 00:00:00.000",
+		"shippedDate": "1997-09-30 00:00:00.000",
+		"shipVia": 3,
+		"freight": 76.13,
+		"shipName": "Great Lakes Food Market",
+		"shipAddress": {
+			"street": "2732 Baker Blvd.",
+			"city": "Eugene",
+			"region": "OR",
+			"postalCode": 97403,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 12,
+				"discount": 0.1
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 28,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10682,
+		"customerID": "ANTON",
+		"employeeID": 3,
+		"orderDate": "1997-09-25 00:00:00.000",
+		"requiredDate": "1997-10-23 00:00:00.000",
+		"shippedDate": "1997-10-01 00:00:00.000",
+		"shipVia": 2,
+		"freight": 36.13,
+		"shipName": "Antonio Moreno Taquería",
+		"shipAddress": {
+			"street": "Mataderos  2312",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5023,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 66,
+				"unitPrice": 17,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10675,
+		"customerID": "FRANK",
+		"employeeID": 5,
+		"orderDate": "1997-09-19 00:00:00.000",
+		"requiredDate": "1997-10-17 00:00:00.000",
+		"shippedDate": "1997-09-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 31.85,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10684,
+		"customerID": "OTTIK",
+		"employeeID": 3,
+		"orderDate": "1997-09-26 00:00:00.000",
+		"requiredDate": "1997-10-24 00:00:00.000",
+		"shippedDate": "1997-09-30 00:00:00.000",
+		"shipVia": 1,
+		"freight": 145.63,
+		"shipName": "Ottilies Käseladen",
+		"shipAddress": {
+			"street": "Mehrheimerstr. 369",
+			"city": "Köln",
+			"region": "NULL",
+			"postalCode": 50739,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10685,
+		"customerID": "GOURL",
+		"employeeID": 4,
+		"orderDate": "1997-09-29 00:00:00.000",
+		"requiredDate": "1997-10-13 00:00:00.000",
+		"shippedDate": "1997-10-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 33.75,
+		"shipName": "Gourmet Lanchonetes",
+		"shipAddress": {
+			"street": "Av. Brasil 442",
+			"city": "Campinas",
+			"region": "SP",
+			"postalCode": "04876-786",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10676,
+		"customerID": "TORTU",
+		"employeeID": 2,
+		"orderDate": "1997-09-22 00:00:00.000",
+		"requiredDate": "1997-10-20 00:00:00.000",
+		"shippedDate": "1997-09-29 00:00:00.000",
+		"shipVia": 2,
+		"freight": 2.01,
+		"shipName": "Tortuga Restaurante",
+		"shipAddress": {
+			"street": "Avda. Azteca 123",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 7,
+				"discount": 0
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10686,
+		"customerID": "PICCO",
+		"employeeID": 2,
+		"orderDate": "1997-09-30 00:00:00.000",
+		"requiredDate": "1997-10-28 00:00:00.000",
+		"shippedDate": "1997-10-08 00:00:00.000",
+		"shipVia": 1,
+		"freight": 96.5,
+		"shipName": "Piccolo und mehr",
+		"shipAddress": {
+			"street": "Geislweg 14",
+			"city": "Salzburg",
+			"region": "NULL",
+			"postalCode": 5020,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 30,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10687,
+		"customerID": "HUNGO",
+		"employeeID": 9,
+		"orderDate": "1997-09-30 00:00:00.000",
+		"requiredDate": "1997-10-28 00:00:00.000",
+		"shippedDate": "1997-10-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 296.43,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 9,
+				"unitPrice": 97,
+				"quantity": 50,
+				"discount": 0.25
+			},
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 6,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10691,
+		"customerID": "QUICK",
+		"employeeID": 2,
+		"orderDate": "1997-10-03 00:00:00.000",
+		"requiredDate": "1997-11-14 00:00:00.000",
+		"shippedDate": "1997-10-22 00:00:00.000",
+		"shipVia": 2,
+		"freight": 810.05,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 48,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10693,
+		"customerID": "WHITC",
+		"employeeID": 3,
+		"orderDate": "1997-10-06 00:00:00.000",
+		"requiredDate": "1997-10-20 00:00:00.000",
+		"shippedDate": "1997-10-10 00:00:00.000",
+		"shipVia": 3,
+		"freight": 139.34,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 9,
+				"unitPrice": 97,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 60,
+				"discount": 0.15
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 30,
+				"discount": 0.15
+			},
+			{
+				"productID": 73,
+				"unitPrice": 15,
+				"quantity": 15,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10694,
+		"customerID": "QUICK",
+		"employeeID": 8,
+		"orderDate": "1997-10-06 00:00:00.000",
+		"requiredDate": "1997-11-03 00:00:00.000",
+		"shippedDate": "1997-10-09 00:00:00.000",
+		"shipVia": 3,
+		"freight": 398.36,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 90,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10695,
+		"customerID": "WILMK",
+		"employeeID": 7,
+		"orderDate": "1997-10-07 00:00:00.000",
+		"requiredDate": "1997-11-18 00:00:00.000",
+		"shippedDate": "1997-10-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 16.72,
+		"shipName": "Wilman Kala",
+		"shipAddress": {
+			"street": "Keskuskatu 45",
+			"city": "Helsinki",
+			"region": "NULL",
+			"postalCode": 21240,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 8,
+				"unitPrice": 40,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 12,
+				"unitPrice": 38,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10696,
+		"customerID": "WHITC",
+		"employeeID": 8,
+		"orderDate": "1997-10-08 00:00:00.000",
+		"requiredDate": "1997-11-19 00:00:00.000",
+		"shippedDate": "1997-10-14 00:00:00.000",
+		"shipVia": 3,
+		"freight": 102.55,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 18,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10697,
+		"customerID": "LINOD",
+		"employeeID": 3,
+		"orderDate": "1997-10-08 00:00:00.000",
+		"requiredDate": "1997-11-05 00:00:00.000",
+		"shippedDate": "1997-10-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 45.52,
+		"shipName": "LINO-Delicateses",
+		"shipAddress": {
+			"street": "Ave. 5 de Mayo Porlamar",
+			"city": "I. de Margarita",
+			"region": "Nueva Esparta",
+			"postalCode": 4980,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 9,
+				"discount": 0.25
+			},
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 7,
+				"discount": 0.25
+			},
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 30,
+				"discount": 0.25
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 30,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10698,
+		"customerID": "ERNSH",
+		"employeeID": 4,
+		"orderDate": "1997-10-09 00:00:00.000",
+		"requiredDate": "1997-11-06 00:00:00.000",
+		"shippedDate": "1997-10-17 00:00:00.000",
+		"shipVia": 1,
+		"freight": 272.47,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 8,
+				"discount": 0.05
+			},
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 12,
+				"discount": 0.05
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 65,
+				"discount": 0.05
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 8,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10690,
+		"customerID": "HANAR",
+		"employeeID": 1,
+		"orderDate": "1997-10-02 00:00:00.000",
+		"requiredDate": "1997-10-30 00:00:00.000",
+		"shippedDate": "1997-10-03 00:00:00.000",
+		"shipVia": 1,
+		"freight": 15.8,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 20,
+				"discount": 0.25
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 30,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10702,
+		"customerID": "ALFKI",
+		"employeeID": 4,
+		"orderDate": "1997-10-13 00:00:00.000",
+		"requiredDate": "1997-11-24 00:00:00.000",
+		"shippedDate": "1997-10-21 00:00:00.000",
+		"shipVia": 1,
+		"freight": 23.94,
+		"shipName": "Alfred's Futterkiste",
+		"shipAddress": {
+			"street": "Obere Str. 57",
+			"city": "Berlin",
+			"region": "NULL",
+			"postalCode": 12209,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 3,
+				"unitPrice": 10,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10700,
+		"customerID": "SAVEA",
+		"employeeID": 3,
+		"orderDate": "1997-10-10 00:00:00.000",
+		"requiredDate": "1997-11-07 00:00:00.000",
+		"shippedDate": "1997-10-16 00:00:00.000",
+		"shipVia": 1,
+		"freight": 65.1,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 34,
+				"unitPrice": 14,
+				"quantity": 12,
+				"discount": 0.2
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 40,
+				"discount": 0.2
+			},
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 5,
+				"discount": 0.2
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 60,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10688,
+		"customerID": "VAFFE",
+		"employeeID": 4,
+		"orderDate": "1997-10-01 00:00:00.000",
+		"requiredDate": "1997-10-15 00:00:00.000",
+		"shippedDate": "1997-10-07 00:00:00.000",
+		"shipVia": 2,
+		"freight": 299.09,
+		"shipName": "Vaffeljernet",
+		"shipAddress": {
+			"street": "Smagsloget 45",
+			"city": "Århus",
+			"region": "NULL",
+			"postalCode": 8200,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 18,
+				"discount": 0.1
+			},
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 60,
+				"discount": 0.1
+			},
+			{
+				"productID": 34,
+				"unitPrice": 14,
+				"quantity": 14,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10701,
+		"customerID": "HUNGO",
+		"employeeID": 6,
+		"orderDate": "1997-10-13 00:00:00.000",
+		"requiredDate": "1997-10-27 00:00:00.000",
+		"shippedDate": "1997-10-15 00:00:00.000",
+		"shipVia": 3,
+		"freight": 220.31,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 42,
+				"discount": 0.15
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 20,
+				"discount": 0.15
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 35,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10703,
+		"customerID": "FOLKO",
+		"employeeID": 6,
+		"orderDate": "1997-10-14 00:00:00.000",
+		"requiredDate": "1997-11-11 00:00:00.000",
+		"shippedDate": "1997-10-20 00:00:00.000",
+		"shipVia": 2,
+		"freight": 152.3,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 73,
+				"unitPrice": 15,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10704,
+		"customerID": "QUEEN",
+		"employeeID": 6,
+		"orderDate": "1997-10-14 00:00:00.000",
+		"requiredDate": "1997-11-11 00:00:00.000",
+		"shippedDate": "1997-11-07 00:00:00.000",
+		"shipVia": 1,
+		"freight": 4.78,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 48,
+				"unitPrice": 12.75,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10708,
+		"customerID": "THEBI",
+		"employeeID": 6,
+		"orderDate": "1997-10-17 00:00:00.000",
+		"requiredDate": "1997-11-28 00:00:00.000",
+		"shippedDate": "1997-11-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 2.96,
+		"shipName": "The Big Cheese",
+		"shipAddress": {
+			"street": "89 Jefferson Way Suite 2",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97201,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 5,
+				"unitPrice": 21.35,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10709,
+		"customerID": "GOURL",
+		"employeeID": 1,
+		"orderDate": "1997-10-17 00:00:00.000",
+		"requiredDate": "1997-11-14 00:00:00.000",
+		"shippedDate": "1997-11-20 00:00:00.000",
+		"shipVia": 3,
+		"freight": 210.8,
+		"shipName": "Gourmet Lanchonetes",
+		"shipAddress": {
+			"street": "Av. Brasil 442",
+			"city": "Campinas",
+			"region": "SP",
+			"postalCode": "04876-786",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 8,
+				"unitPrice": 40,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 28,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10710,
+		"customerID": "FRANS",
+		"employeeID": 1,
+		"orderDate": "1997-10-20 00:00:00.000",
+		"requiredDate": "1997-11-17 00:00:00.000",
+		"shippedDate": "1997-10-23 00:00:00.000",
+		"shipVia": 1,
+		"freight": 4.98,
+		"shipName": "Franchi S.p.A.",
+		"shipAddress": {
+			"street": "Via Monte Bianco 34",
+			"city": "Torino",
+			"region": "NULL",
+			"postalCode": 10100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10711,
+		"customerID": "SAVEA",
+		"employeeID": 5,
+		"orderDate": "1997-10-21 00:00:00.000",
+		"requiredDate": "1997-12-02 00:00:00.000",
+		"shippedDate": "1997-10-29 00:00:00.000",
+		"shipVia": 2,
+		"freight": 52.41,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 42,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 120,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10712,
+		"customerID": "HUNGO",
+		"employeeID": 3,
+		"orderDate": "1997-10-21 00:00:00.000",
+		"requiredDate": "1997-11-18 00:00:00.000",
+		"shippedDate": "1997-10-31 00:00:00.000",
+		"shipVia": 1,
+		"freight": 89.93,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 3,
+				"discount": 0.05
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10713,
+		"customerID": "SAVEA",
+		"employeeID": 1,
+		"orderDate": "1997-10-22 00:00:00.000",
+		"requiredDate": "1997-11-19 00:00:00.000",
+		"shippedDate": "1997-10-24 00:00:00.000",
+		"shipVia": 1,
+		"freight": 167.05,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 45,
+				"unitPrice": 9.5,
+				"quantity": 110,
+				"discount": 0
+			},
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10707,
+		"customerID": "AROUT",
+		"employeeID": 4,
+		"orderDate": "1997-10-16 00:00:00.000",
+		"requiredDate": "1997-10-30 00:00:00.000",
+		"shippedDate": "1997-10-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 21.74,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 28,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10715,
+		"customerID": "BONAP",
+		"employeeID": 3,
+		"orderDate": "1997-10-23 00:00:00.000",
+		"requiredDate": "1997-11-06 00:00:00.000",
+		"shippedDate": "1997-10-29 00:00:00.000",
+		"shipVia": 1,
+		"freight": 63.2,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10706,
+		"customerID": "OLDWO",
+		"employeeID": 8,
+		"orderDate": "1997-10-16 00:00:00.000",
+		"requiredDate": "1997-11-13 00:00:00.000",
+		"shippedDate": "1997-10-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 135.63,
+		"shipName": "Old World Delicatessen",
+		"shipAddress": {
+			"street": "2743 Bering St.",
+			"city": "Anchorage",
+			"region": "AK",
+			"postalCode": 99508,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 8,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10705,
+		"customerID": "HILAA",
+		"employeeID": 9,
+		"orderDate": "1997-10-15 00:00:00.000",
+		"requiredDate": "1997-11-12 00:00:00.000",
+		"shippedDate": "1997-11-18 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.52,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 32,
+				"unitPrice": 32,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10714,
+		"customerID": "SAVEA",
+		"employeeID": 5,
+		"orderDate": "1997-10-22 00:00:00.000",
+		"requiredDate": "1997-11-19 00:00:00.000",
+		"shippedDate": "1997-10-27 00:00:00.000",
+		"shipVia": 3,
+		"freight": 24.49,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 18,
+				"discount": 0.25
+			},
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 12,
+				"discount": 0.25
+			},
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 50,
+				"discount": 0.25
+			},
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 27,
+				"discount": 0.25
+			},
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 30,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10719,
+		"customerID": "LETSS",
+		"employeeID": 8,
+		"orderDate": "1997-10-27 00:00:00.000",
+		"requiredDate": "1997-11-24 00:00:00.000",
+		"shippedDate": "1997-11-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 51.44,
+		"shipName": "Let's Stop N Shop",
+		"shipAddress": {
+			"street": "87 Polk St. Suite 5",
+			"city": "San Francisco",
+			"region": "CA",
+			"postalCode": 94117,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 12,
+				"discount": 0.25
+			},
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 3,
+				"discount": 0.25
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 40,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10720,
+		"customerID": "QUEDE",
+		"employeeID": 8,
+		"orderDate": "1997-10-28 00:00:00.000",
+		"requiredDate": "1997-11-11 00:00:00.000",
+		"shippedDate": "1997-11-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 9.53,
+		"shipName": "Que Delícia",
+		"shipAddress": {
+			"street": "Rua da Panificadora 12",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-673",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 8,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10722,
+		"customerID": "SAVEA",
+		"employeeID": 8,
+		"orderDate": "1997-10-29 00:00:00.000",
+		"requiredDate": "1997-12-10 00:00:00.000",
+		"shippedDate": "1997-11-04 00:00:00.000",
+		"shipVia": 1,
+		"freight": 74.58,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 45,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 42,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10724,
+		"customerID": "MEREP",
+		"employeeID": 8,
+		"orderDate": "1997-10-30 00:00:00.000",
+		"requiredDate": "1997-12-11 00:00:00.000",
+		"shippedDate": "1997-11-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 57.75,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 16,
+				"discount": 0
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10716,
+		"customerID": "RANCH",
+		"employeeID": 4,
+		"orderDate": "1997-10-24 00:00:00.000",
+		"requiredDate": "1997-11-21 00:00:00.000",
+		"shippedDate": "1997-10-27 00:00:00.000",
+		"shipVia": 2,
+		"freight": 22.57,
+		"shipName": "Rancho grande",
+		"shipAddress": {
+			"street": "Av. del Libertador 900",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 7,
+				"discount": 0
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10726,
+		"customerID": "EASTC",
+		"employeeID": 4,
+		"orderDate": "1997-11-03 00:00:00.000",
+		"requiredDate": "1997-11-17 00:00:00.000",
+		"shippedDate": "1997-12-05 00:00:00.000",
+		"shipVia": 1,
+		"freight": 16.56,
+		"shipName": "Eastern Connection",
+		"shipAddress": {
+			"street": "35 King George",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "WX3 6FW",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10717,
+		"customerID": "FRANK",
+		"employeeID": 1,
+		"orderDate": "1997-10-24 00:00:00.000",
+		"requiredDate": "1997-11-21 00:00:00.000",
+		"shippedDate": "1997-10-29 00:00:00.000",
+		"shipVia": 2,
+		"freight": 59.25,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 32,
+				"discount": 0.05
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 25,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10727,
+		"customerID": "REGGC",
+		"employeeID": 2,
+		"orderDate": "1997-11-03 00:00:00.000",
+		"requiredDate": "1997-12-01 00:00:00.000",
+		"shippedDate": "1997-12-05 00:00:00.000",
+		"shipVia": 1,
+		"freight": 89.9,
+		"shipName": "Reggiani Caseifici",
+		"shipAddress": {
+			"street": "Strada Provinciale 124",
+			"city": "Reggio Emilia",
+			"region": "NULL",
+			"postalCode": 42100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 10,
+				"discount": 0.05
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 10,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10728,
+		"customerID": "QUEEN",
+		"employeeID": 4,
+		"orderDate": "1997-11-04 00:00:00.000",
+		"requiredDate": "1997-12-02 00:00:00.000",
+		"shippedDate": "1997-11-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 58.33,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10729,
+		"customerID": "LINOD",
+		"employeeID": 8,
+		"orderDate": "1997-11-04 00:00:00.000",
+		"requiredDate": "1997-12-16 00:00:00.000",
+		"shippedDate": "1997-11-14 00:00:00.000",
+		"shipVia": 3,
+		"freight": 141.06,
+		"shipName": "LINO-Delicateses",
+		"shipAddress": {
+			"street": "Ave. 5 de Mayo Porlamar",
+			"city": "I. de Margarita",
+			"region": "Nueva Esparta",
+			"postalCode": 4980,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 50,
+				"unitPrice": 16.25,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10730,
+		"customerID": "BONAP",
+		"employeeID": 5,
+		"orderDate": "1997-11-05 00:00:00.000",
+		"requiredDate": "1997-12-03 00:00:00.000",
+		"shippedDate": "1997-11-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 20.12,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 15,
+				"discount": 0.05
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 3,
+				"discount": 0.05
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 10,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10718,
+		"customerID": "KOENE",
+		"employeeID": 1,
+		"orderDate": "1997-10-27 00:00:00.000",
+		"requiredDate": "1997-11-24 00:00:00.000",
+		"shippedDate": "1997-10-29 00:00:00.000",
+		"shipVia": 3,
+		"freight": 170.88,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 12,
+				"unitPrice": 38,
+				"quantity": 36,
+				"discount": 0
+			},
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10725,
+		"customerID": "FAMIA",
+		"employeeID": 4,
+		"orderDate": "1997-10-31 00:00:00.000",
+		"requiredDate": "1997-11-28 00:00:00.000",
+		"shippedDate": "1997-11-05 00:00:00.000",
+		"shipVia": 3,
+		"freight": 10.83,
+		"shipName": "Familia Arquibaldo",
+		"shipAddress": {
+			"street": "Rua Orós 92",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05442-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10731,
+		"customerID": "CHOPS",
+		"employeeID": 7,
+		"orderDate": "1997-11-06 00:00:00.000",
+		"requiredDate": "1997-12-04 00:00:00.000",
+		"shippedDate": "1997-11-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 96.65,
+		"shipName": "Chop-suey Chinese",
+		"shipAddress": {
+			"street": "Hauptstr. 31",
+			"city": "Bern",
+			"region": "NULL",
+			"postalCode": 3012,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 40,
+				"discount": 0.05
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 30,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10735,
+		"customerID": "LETSS",
+		"employeeID": 6,
+		"orderDate": "1997-11-10 00:00:00.000",
+		"requiredDate": "1997-12-08 00:00:00.000",
+		"shippedDate": "1997-11-21 00:00:00.000",
+		"shipVia": 2,
+		"freight": 45.97,
+		"shipName": "Let's Stop N Shop",
+		"shipAddress": {
+			"street": "87 Polk St. Suite 5",
+			"city": "San Francisco",
+			"region": "CA",
+			"postalCode": 94117,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 2,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10736,
+		"customerID": "HUNGO",
+		"employeeID": 9,
+		"orderDate": "1997-11-11 00:00:00.000",
+		"requiredDate": "1997-12-09 00:00:00.000",
+		"shippedDate": "1997-11-21 00:00:00.000",
+		"shipVia": 2,
+		"freight": 44.1,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10737,
+		"customerID": "VINET",
+		"employeeID": 2,
+		"orderDate": "1997-11-11 00:00:00.000",
+		"requiredDate": "1997-12-09 00:00:00.000",
+		"shippedDate": "1997-11-18 00:00:00.000",
+		"shipVia": 2,
+		"freight": 7.79,
+		"shipName": "Vins et alcools Chevalier",
+		"shipAddress": {
+			"street": "59 rue de l'Abbaye",
+			"city": "Reims",
+			"region": "NULL",
+			"postalCode": 51100,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10739,
+		"customerID": "VINET",
+		"employeeID": 3,
+		"orderDate": "1997-11-12 00:00:00.000",
+		"requiredDate": "1997-12-10 00:00:00.000",
+		"shippedDate": "1997-11-17 00:00:00.000",
+		"shipVia": 3,
+		"freight": 11.08,
+		"shipName": "Vins et alcools Chevalier",
+		"shipAddress": {
+			"street": "59 rue de l'Abbaye",
+			"city": "Reims",
+			"region": "NULL",
+			"postalCode": 51100,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 18,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10740,
+		"customerID": "WHITC",
+		"employeeID": 4,
+		"orderDate": "1997-11-13 00:00:00.000",
+		"requiredDate": "1997-12-11 00:00:00.000",
+		"shippedDate": "1997-11-25 00:00:00.000",
+		"shipVia": 2,
+		"freight": 81.88,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 5,
+				"discount": 0.2
+			},
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 35,
+				"discount": 0.2
+			},
+			{
+				"productID": 45,
+				"unitPrice": 9.5,
+				"quantity": 40,
+				"discount": 0.2
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 14,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10733,
+		"customerID": "BERGS",
+		"employeeID": 1,
+		"orderDate": "1997-11-07 00:00:00.000",
+		"requiredDate": "1997-12-05 00:00:00.000",
+		"shippedDate": "1997-11-10 00:00:00.000",
+		"shipVia": 3,
+		"freight": 110.11,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 16,
+				"discount": 0
+			},
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10742,
+		"customerID": "BOTTM",
+		"employeeID": 3,
+		"orderDate": "1997-11-14 00:00:00.000",
+		"requiredDate": "1997-12-12 00:00:00.000",
+		"shippedDate": "1997-11-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 243.73,
+		"shipName": "Bottom-Dollar Markets",
+		"shipAddress": {
+			"street": "23 Tsawassen Blvd.",
+			"city": "Tsawassen",
+			"region": "BC",
+			"postalCode": "T2F 8M4",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 3,
+				"unitPrice": 10,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10734,
+		"customerID": "GOURL",
+		"employeeID": 2,
+		"orderDate": "1997-11-07 00:00:00.000",
+		"requiredDate": "1997-12-05 00:00:00.000",
+		"shippedDate": "1997-11-12 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.63,
+		"shipName": "Gourmet Lanchonetes",
+		"shipAddress": {
+			"street": "Av. Brasil 442",
+			"city": "Campinas",
+			"region": "SP",
+			"postalCode": "04876-786",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 6,
+				"unitPrice": 25,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10747,
+		"customerID": "PICCO",
+		"employeeID": 6,
+		"orderDate": "1997-11-19 00:00:00.000",
+		"requiredDate": "1997-12-17 00:00:00.000",
+		"shippedDate": "1997-11-26 00:00:00.000",
+		"shipVia": 1,
+		"freight": 117.33,
+		"shipName": "Piccolo und mehr",
+		"shipAddress": {
+			"street": "Geislweg 14",
+			"city": "Salzburg",
+			"region": "NULL",
+			"postalCode": 5020,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 63,
+				"unitPrice": 43.9,
+				"quantity": 9,
+				"discount": 0
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10748,
+		"customerID": "SAVEA",
+		"employeeID": 3,
+		"orderDate": "1997-11-20 00:00:00.000",
+		"requiredDate": "1997-12-18 00:00:00.000",
+		"shippedDate": "1997-11-28 00:00:00.000",
+		"shipVia": 1,
+		"freight": 232.55,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 44,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 28,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10749,
+		"customerID": "ISLAT",
+		"employeeID": 4,
+		"orderDate": "1997-11-20 00:00:00.000",
+		"requiredDate": "1997-12-18 00:00:00.000",
+		"shippedDate": "1997-12-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 61.53,
+		"shipName": "Island Trading",
+		"shipAddress": {
+			"street": "Garden House Crowther Way",
+			"city": "Cowes",
+			"region": "Isle of Wight",
+			"postalCode": "PO31 7PJ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10750,
+		"customerID": "WARTH",
+		"employeeID": 9,
+		"orderDate": "1997-11-21 00:00:00.000",
+		"requiredDate": "1997-12-19 00:00:00.000",
+		"shippedDate": "1997-11-24 00:00:00.000",
+		"shipVia": 1,
+		"freight": 79.3,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 5,
+				"discount": 0.15
+			},
+			{
+				"productID": 45,
+				"unitPrice": 9.5,
+				"quantity": 40,
+				"discount": 0.15
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 25,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10751,
+		"customerID": "RICSU",
+		"employeeID": 3,
+		"orderDate": "1997-11-24 00:00:00.000",
+		"requiredDate": "1997-12-22 00:00:00.000",
+		"shippedDate": "1997-12-03 00:00:00.000",
+		"shipVia": 3,
+		"freight": 130.79,
+		"shipName": "Richter Supermarkt",
+		"shipAddress": {
+			"street": "Starenweg 5",
+			"city": "Genève",
+			"region": "NULL",
+			"postalCode": 1204,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 12,
+				"discount": 0.1
+			},
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 50,
+				"unitPrice": 16.25,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 73,
+				"unitPrice": 15,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10752,
+		"customerID": "NORTS",
+		"employeeID": 2,
+		"orderDate": "1997-11-24 00:00:00.000",
+		"requiredDate": "1997-12-22 00:00:00.000",
+		"shippedDate": "1997-11-28 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.39,
+		"shipName": "North/South",
+		"shipAddress": {
+			"street": "South House 300 Queensbridge",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "SW7 1RZ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10753,
+		"customerID": "FRANS",
+		"employeeID": 3,
+		"orderDate": "1997-11-25 00:00:00.000",
+		"requiredDate": "1997-12-23 00:00:00.000",
+		"shippedDate": "1997-11-27 00:00:00.000",
+		"shipVia": 1,
+		"freight": 7.7,
+		"shipName": "Franchi S.p.A.",
+		"shipAddress": {
+			"street": "Via Monte Bianco 34",
+			"city": "Torino",
+			"region": "NULL",
+			"postalCode": 10100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 45,
+				"unitPrice": 9.5,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 74,
+				"unitPrice": 10,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10745,
+		"customerID": "QUICK",
+		"employeeID": 9,
+		"orderDate": "1997-11-18 00:00:00.000",
+		"requiredDate": "1997-12-16 00:00:00.000",
+		"shippedDate": "1997-11-27 00:00:00.000",
+		"shipVia": 1,
+		"freight": 3.52,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 16,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 45,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 7,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10755,
+		"customerID": "BONAP",
+		"employeeID": 4,
+		"orderDate": "1997-11-26 00:00:00.000",
+		"requiredDate": "1997-12-24 00:00:00.000",
+		"shippedDate": "1997-11-28 00:00:00.000",
+		"shipVia": 2,
+		"freight": 16.71,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 30,
+				"discount": 0.25
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 30,
+				"discount": 0.25
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 14,
+				"discount": 0.25
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 25,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10756,
+		"customerID": "SPLIR",
+		"employeeID": 8,
+		"orderDate": "1997-11-27 00:00:00.000",
+		"requiredDate": "1997-12-25 00:00:00.000",
+		"shippedDate": "1997-12-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 73.21,
+		"shipName": "Split Rail Beer & Ale",
+		"shipAddress": {
+			"street": "P.O. Box 555",
+			"city": "Lander",
+			"region": "WY",
+			"postalCode": 82520,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 21,
+				"discount": 0.2
+			},
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 6,
+				"discount": 0.2
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 20,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10746,
+		"customerID": "CHOPS",
+		"employeeID": 1,
+		"orderDate": "1997-11-19 00:00:00.000",
+		"requiredDate": "1997-12-17 00:00:00.000",
+		"shippedDate": "1997-11-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 31.43,
+		"shipName": "Chop-suey Chinese",
+		"shipAddress": {
+			"street": "Hauptstr. 31",
+			"city": "Bern",
+			"region": "NULL",
+			"postalCode": 3012,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 28,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 9,
+				"discount": 0
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10757,
+		"customerID": "SAVEA",
+		"employeeID": 6,
+		"orderDate": "1997-11-27 00:00:00.000",
+		"requiredDate": "1997-12-25 00:00:00.000",
+		"shippedDate": "1997-12-15 00:00:00.000",
+		"shipVia": 1,
+		"freight": 8.19,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 34,
+				"unitPrice": 14,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 7,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10761,
+		"customerID": "RATTC",
+		"employeeID": 5,
+		"orderDate": "1997-12-02 00:00:00.000",
+		"requiredDate": "1997-12-30 00:00:00.000",
+		"shippedDate": "1997-12-08 00:00:00.000",
+		"shipVia": 2,
+		"freight": 18.66,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 35,
+				"discount": 0.25
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 18,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10762,
+		"customerID": "FOLKO",
+		"employeeID": 3,
+		"orderDate": "1997-12-02 00:00:00.000",
+		"requiredDate": "1997-12-30 00:00:00.000",
+		"shippedDate": "1997-12-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 328.74,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 28,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 16,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10763,
+		"customerID": "FOLIG",
+		"employeeID": 3,
+		"orderDate": "1997-12-03 00:00:00.000",
+		"requiredDate": "1997-12-31 00:00:00.000",
+		"shippedDate": "1997-12-08 00:00:00.000",
+		"shipVia": 3,
+		"freight": 37.35,
+		"shipName": "Folies gourmandes",
+		"shipAddress": {
+			"street": "184 chaussée de Tournai",
+			"city": "Lille",
+			"region": "NULL",
+			"postalCode": 59000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10764,
+		"customerID": "ERNSH",
+		"employeeID": 6,
+		"orderDate": "1997-12-03 00:00:00.000",
+		"requiredDate": "1997-12-31 00:00:00.000",
+		"shippedDate": "1997-12-08 00:00:00.000",
+		"shipVia": 3,
+		"freight": 145.45,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 3,
+				"unitPrice": 10,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 130,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10766,
+		"customerID": "OTTIK",
+		"employeeID": 4,
+		"orderDate": "1997-12-05 00:00:00.000",
+		"requiredDate": "1998-01-02 00:00:00.000",
+		"shippedDate": "1997-12-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 157.55,
+		"shipName": "Ottilies Käseladen",
+		"shipAddress": {
+			"street": "Mehrheimerstr. 369",
+			"city": "Köln",
+			"region": "NULL",
+			"postalCode": 50739,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10760,
+		"customerID": "MAISD",
+		"employeeID": 4,
+		"orderDate": "1997-12-01 00:00:00.000",
+		"requiredDate": "1997-12-29 00:00:00.000",
+		"shippedDate": "1997-12-10 00:00:00.000",
+		"shipVia": 1,
+		"freight": 155.64,
+		"shipName": "Maison Dewey",
+		"shipAddress": {
+			"street": "Rue Joseph-Bens 532",
+			"city": "Bruxelles",
+			"region": "NULL",
+			"postalCode": "B-1180",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 30,
+				"discount": 0.25
+			},
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 12,
+				"discount": 0.25
+			},
+			{
+				"productID": 27,
+				"unitPrice": 43.9,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10768,
+		"customerID": "AROUT",
+		"employeeID": 3,
+		"orderDate": "1997-12-08 00:00:00.000",
+		"requiredDate": "1998-01-05 00:00:00.000",
+		"shippedDate": "1997-12-15 00:00:00.000",
+		"shipVia": 2,
+		"freight": 146.32,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10759,
+		"customerID": "ANATR",
+		"employeeID": 3,
+		"orderDate": "1997-11-28 00:00:00.000",
+		"requiredDate": "1997-12-26 00:00:00.000",
+		"shippedDate": "1997-12-12 00:00:00.000",
+		"shipVia": 3,
+		"freight": 11.99,
+		"shipName": "Ana Trujillo Emparedados y helados",
+		"shipAddress": {
+			"street": "Avda. de la Constitución 2222",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5021,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 32,
+				"unitPrice": 32,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10769,
+		"customerID": "VAFFE",
+		"employeeID": 3,
+		"orderDate": "1997-12-08 00:00:00.000",
+		"requiredDate": "1998-01-05 00:00:00.000",
+		"shippedDate": "1997-12-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 65.06,
+		"shipName": "Vaffeljernet",
+		"shipAddress": {
+			"street": "Smagsloget 45",
+			"city": "Århus",
+			"region": "NULL",
+			"postalCode": 8200,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 30,
+				"discount": 0.05
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 15,
+				"discount": 0.05
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10772,
+		"customerID": "LEHMS",
+		"employeeID": 3,
+		"orderDate": "1997-12-10 00:00:00.000",
+		"requiredDate": "1998-01-07 00:00:00.000",
+		"shippedDate": "1997-12-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 91.28,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 18,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10758,
+		"customerID": "RICSU",
+		"employeeID": 3,
+		"orderDate": "1997-11-28 00:00:00.000",
+		"requiredDate": "1997-12-26 00:00:00.000",
+		"shippedDate": "1997-12-04 00:00:00.000",
+		"shipVia": 3,
+		"freight": 138.17,
+		"shipName": "Richter Supermarkt",
+		"shipAddress": {
+			"street": "Starenweg 5",
+			"city": "Genève",
+			"region": "NULL",
+			"postalCode": 1204,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 60,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10773,
+		"customerID": "ERNSH",
+		"employeeID": 1,
+		"orderDate": "1997-12-11 00:00:00.000",
+		"requiredDate": "1998-01-08 00:00:00.000",
+		"shippedDate": "1997-12-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 96.43,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 33,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 70,
+				"discount": 0.2
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 7,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10775,
+		"customerID": "THECR",
+		"employeeID": 7,
+		"orderDate": "1997-12-12 00:00:00.000",
+		"requiredDate": "1998-01-09 00:00:00.000",
+		"shippedDate": "1997-12-26 00:00:00.000",
+		"shipVia": 1,
+		"freight": 20.25,
+		"shipName": "The Cracker Box",
+		"shipAddress": {
+			"street": "55 Grizzly Peak Rd.",
+			"city": "Butte",
+			"region": "MT",
+			"postalCode": 59801,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 67,
+				"unitPrice": 14,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10774,
+		"customerID": "FOLKO",
+		"employeeID": 4,
+		"orderDate": "1997-12-11 00:00:00.000",
+		"requiredDate": "1997-12-25 00:00:00.000",
+		"shippedDate": "1997-12-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 48.2,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 2,
+				"discount": 0.25
+			},
+			{
+				"productID": 66,
+				"unitPrice": 17,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10779,
+		"customerID": "MORGK",
+		"employeeID": 3,
+		"orderDate": "1997-12-16 00:00:00.000",
+		"requiredDate": "1998-01-13 00:00:00.000",
+		"shippedDate": "1998-01-14 00:00:00.000",
+		"shipVia": 2,
+		"freight": 58.13,
+		"shipName": "Morgenstern Gesundkost",
+		"shipAddress": {
+			"street": "Heerstr. 22",
+			"city": "Leipzig",
+			"region": "NULL",
+			"postalCode": 4179,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10780,
+		"customerID": "LILAS",
+		"employeeID": 2,
+		"orderDate": "1997-12-16 00:00:00.000",
+		"requiredDate": "1997-12-30 00:00:00.000",
+		"shippedDate": "1997-12-25 00:00:00.000",
+		"shipVia": 1,
+		"freight": 42.13,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10781,
+		"customerID": "WARTH",
+		"employeeID": 2,
+		"orderDate": "1997-12-17 00:00:00.000",
+		"requiredDate": "1998-01-14 00:00:00.000",
+		"shippedDate": "1997-12-19 00:00:00.000",
+		"shipVia": 3,
+		"freight": 73.16,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 3,
+				"discount": 0.2
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 74,
+				"unitPrice": 10,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10783,
+		"customerID": "HANAR",
+		"employeeID": 4,
+		"orderDate": "1997-12-18 00:00:00.000",
+		"requiredDate": "1998-01-15 00:00:00.000",
+		"shippedDate": "1997-12-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 124.98,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10784,
+		"customerID": "MAGAA",
+		"employeeID": 4,
+		"orderDate": "1997-12-18 00:00:00.000",
+		"requiredDate": "1998-01-15 00:00:00.000",
+		"shippedDate": "1997-12-22 00:00:00.000",
+		"shipVia": 3,
+		"freight": 70.09,
+		"shipName": "Magazzini Alimentari Riuniti",
+		"shipAddress": {
+			"street": "Via Ludovico il Moro 22",
+			"city": "Bergamo",
+			"region": "NULL",
+			"postalCode": 24100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 2,
+				"discount": 0.15
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 30,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10785,
+		"customerID": "GROSR",
+		"employeeID": 1,
+		"orderDate": "1997-12-18 00:00:00.000",
+		"requiredDate": "1998-01-15 00:00:00.000",
+		"shippedDate": "1997-12-24 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.51,
+		"shipName": "GROSELLA-Restaurante",
+		"shipAddress": {
+			"street": "5ª Ave. Los Palos Grandes",
+			"city": "Caracas",
+			"region": "DF",
+			"postalCode": 1081,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10786,
+		"customerID": "QUEEN",
+		"employeeID": 8,
+		"orderDate": "1997-12-19 00:00:00.000",
+		"requiredDate": "1998-01-16 00:00:00.000",
+		"shippedDate": "1997-12-23 00:00:00.000",
+		"shipVia": 1,
+		"freight": 110.87,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 8,
+				"unitPrice": 40,
+				"quantity": 30,
+				"discount": 0.2
+			},
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 15,
+				"discount": 0.2
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 42,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10776,
+		"customerID": "ERNSH",
+		"employeeID": 1,
+		"orderDate": "1997-12-15 00:00:00.000",
+		"requiredDate": "1998-01-12 00:00:00.000",
+		"shippedDate": "1997-12-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 351.53,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 16,
+				"discount": 0.05
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 12,
+				"discount": 0.05
+			},
+			{
+				"productID": 45,
+				"unitPrice": 9.5,
+				"quantity": 27,
+				"discount": 0.05
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 120,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10787,
+		"customerID": "LAMAI",
+		"employeeID": 2,
+		"orderDate": "1997-12-19 00:00:00.000",
+		"requiredDate": "1998-01-02 00:00:00.000",
+		"shippedDate": "1997-12-26 00:00:00.000",
+		"shipVia": 1,
+		"freight": 249.93,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 15,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10791,
+		"customerID": "FRANK",
+		"employeeID": 6,
+		"orderDate": "1997-12-23 00:00:00.000",
+		"requiredDate": "1998-01-20 00:00:00.000",
+		"shippedDate": "1998-01-01 00:00:00.000",
+		"shipVia": 2,
+		"freight": 16.85,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 14,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10792,
+		"customerID": "WOLZA",
+		"employeeID": 1,
+		"orderDate": "1997-12-23 00:00:00.000",
+		"requiredDate": "1998-01-20 00:00:00.000",
+		"shippedDate": "1997-12-31 00:00:00.000",
+		"shipVia": 3,
+		"freight": 23.79,
+		"shipName": "Wolski Zajazd",
+		"shipAddress": {
+			"street": "ul. Filtrowa 68",
+			"city": "Warszawa",
+			"region": "NULL",
+			"postalCode": "01-012",
+			"country": "Poland"
+		},
+		"details": [
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10793,
+		"customerID": "AROUT",
+		"employeeID": 3,
+		"orderDate": "1997-12-24 00:00:00.000",
+		"requiredDate": "1998-01-21 00:00:00.000",
+		"shippedDate": "1998-01-08 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.52,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 8,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10794,
+		"customerID": "QUEDE",
+		"employeeID": 6,
+		"orderDate": "1997-12-24 00:00:00.000",
+		"requiredDate": "1998-01-21 00:00:00.000",
+		"shippedDate": "1998-01-02 00:00:00.000",
+		"shipVia": 1,
+		"freight": 21.49,
+		"shipName": "Que Delícia",
+		"shipAddress": {
+			"street": "Rua da Panificadora 12",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-673",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 15,
+				"discount": 0.2
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 6,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10790,
+		"customerID": "GOURL",
+		"employeeID": 6,
+		"orderDate": "1997-12-22 00:00:00.000",
+		"requiredDate": "1998-01-19 00:00:00.000",
+		"shippedDate": "1997-12-26 00:00:00.000",
+		"shipVia": 1,
+		"freight": 28.23,
+		"shipName": "Gourmet Lanchonetes",
+		"shipAddress": {
+			"street": "Av. Brasil 442",
+			"city": "Campinas",
+			"region": "SP",
+			"postalCode": "04876-786",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 3,
+				"discount": 0.15
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 20,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10796,
+		"customerID": "HILAA",
+		"employeeID": 3,
+		"orderDate": "1997-12-25 00:00:00.000",
+		"requiredDate": "1998-01-22 00:00:00.000",
+		"shippedDate": "1998-01-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 26.52,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 21,
+				"discount": 0.2
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 35,
+				"discount": 0.2
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 24,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10788,
+		"customerID": "QUICK",
+		"employeeID": 1,
+		"orderDate": "1997-12-22 00:00:00.000",
+		"requiredDate": "1998-01-19 00:00:00.000",
+		"shippedDate": "1998-01-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 42.7,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 50,
+				"discount": 0.05
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 40,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10789,
+		"customerID": "FOLIG",
+		"employeeID": 1,
+		"orderDate": "1997-12-22 00:00:00.000",
+		"requiredDate": "1998-01-19 00:00:00.000",
+		"shippedDate": "1997-12-31 00:00:00.000",
+		"shipVia": 2,
+		"freight": 100.6,
+		"shipName": "Folies gourmandes",
+		"shipAddress": {
+			"street": "184 chaussée de Tournai",
+			"city": "Lille",
+			"region": "NULL",
+			"postalCode": 59000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 63,
+				"unitPrice": 43.9,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10800,
+		"customerID": "SEVES",
+		"employeeID": 1,
+		"orderDate": "1997-12-26 00:00:00.000",
+		"requiredDate": "1998-01-23 00:00:00.000",
+		"shippedDate": "1998-01-05 00:00:00.000",
+		"shipVia": 3,
+		"freight": 137.44,
+		"shipName": "Seven Seas Imports",
+		"shipAddress": {
+			"street": "90 Wadhurst Rd.",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "OX15 4NB",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 50,
+				"discount": 0.1
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 10,
+				"discount": 0.1
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 7,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10801,
+		"customerID": "BOLID",
+		"employeeID": 4,
+		"orderDate": "1997-12-29 00:00:00.000",
+		"requiredDate": "1998-01-26 00:00:00.000",
+		"shippedDate": "1997-12-31 00:00:00.000",
+		"shipVia": 2,
+		"freight": 97.09,
+		"shipName": "Bólido Comidas preparadas",
+		"shipAddress": {
+			"street": "C/ Araquil 67",
+			"city": "Madrid",
+			"region": "NULL",
+			"postalCode": 28023,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 40,
+				"discount": 0.25
+			},
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 20,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10795,
+		"customerID": "ERNSH",
+		"employeeID": 8,
+		"orderDate": "1997-12-24 00:00:00.000",
+		"requiredDate": "1998-01-21 00:00:00.000",
+		"shippedDate": "1998-01-20 00:00:00.000",
+		"shipVia": 2,
+		"freight": 126.66,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 65,
+				"discount": 0
+			},
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 35,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10798,
+		"customerID": "ISLAT",
+		"employeeID": 2,
+		"orderDate": "1997-12-26 00:00:00.000",
+		"requiredDate": "1998-01-23 00:00:00.000",
+		"shippedDate": "1998-01-05 00:00:00.000",
+		"shipVia": 1,
+		"freight": 2.33,
+		"shipName": "Island Trading",
+		"shipAddress": {
+			"street": "Garden House Crowther Way",
+			"city": "Cowes",
+			"region": "Isle of Wight",
+			"postalCode": "PO31 7PJ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10799,
+		"customerID": "KOENE",
+		"employeeID": 9,
+		"orderDate": "1997-12-26 00:00:00.000",
+		"requiredDate": "1998-02-06 00:00:00.000",
+		"shippedDate": "1998-01-05 00:00:00.000",
+		"shipVia": 3,
+		"freight": 30.76,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 20,
+				"discount": 0.15
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 20,
+				"discount": 0.15
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10805,
+		"customerID": "THEBI",
+		"employeeID": 2,
+		"orderDate": "1997-12-30 00:00:00.000",
+		"requiredDate": "1998-01-27 00:00:00.000",
+		"shippedDate": "1998-01-09 00:00:00.000",
+		"shipVia": 3,
+		"freight": 237.34,
+		"shipName": "The Big Cheese",
+		"shipAddress": {
+			"street": "89 Jefferson Way Suite 2",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97201,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 34,
+				"unitPrice": 14,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10802,
+		"customerID": "SIMOB",
+		"employeeID": 4,
+		"orderDate": "1997-12-29 00:00:00.000",
+		"requiredDate": "1998-01-26 00:00:00.000",
+		"shippedDate": "1998-01-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 257.26,
+		"shipName": "Simons bistro",
+		"shipAddress": {
+			"street": "Vinbæltet 34",
+			"city": "Kobenhavn",
+			"region": "NULL",
+			"postalCode": 1734,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 25,
+				"discount": 0.25
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 30,
+				"discount": 0.25
+			},
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 60,
+				"discount": 0.25
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 5,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10803,
+		"customerID": "WELLI",
+		"employeeID": 4,
+		"orderDate": "1997-12-30 00:00:00.000",
+		"requiredDate": "1998-01-27 00:00:00.000",
+		"shippedDate": "1998-01-06 00:00:00.000",
+		"shipVia": 1,
+		"freight": 55.23,
+		"shipName": "Wellington Importadora",
+		"shipAddress": {
+			"street": "Rua do Mercado 12",
+			"city": "Resende",
+			"region": "SP",
+			"postalCode": "08737-363",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 24,
+				"discount": 0.05
+			},
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 15,
+				"discount": 0.05
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 15,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10808,
+		"customerID": "OLDWO",
+		"employeeID": 2,
+		"orderDate": "1998-01-01 00:00:00.000",
+		"requiredDate": "1998-01-29 00:00:00.000",
+		"shippedDate": "1998-01-09 00:00:00.000",
+		"shipVia": 3,
+		"freight": 45.53,
+		"shipName": "Old World Delicatessen",
+		"shipAddress": {
+			"street": "2743 Bering St.",
+			"city": "Anchorage",
+			"region": "AK",
+			"postalCode": 99508,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 20,
+				"discount": 0.15
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 50,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10810,
+		"customerID": "LAUGB",
+		"employeeID": 2,
+		"orderDate": "1998-01-01 00:00:00.000",
+		"requiredDate": "1998-01-29 00:00:00.000",
+		"shippedDate": "1998-01-07 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.33,
+		"shipName": "Laughing Bacchus Wine Cellars",
+		"shipAddress": {
+			"street": "2319 Elm St.",
+			"city": "Vancouver",
+			"region": "BC",
+			"postalCode": "V3F 2K1",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 7,
+				"discount": 0
+			},
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10811,
+		"customerID": "LINOD",
+		"employeeID": 8,
+		"orderDate": "1998-01-02 00:00:00.000",
+		"requiredDate": "1998-01-30 00:00:00.000",
+		"shippedDate": "1998-01-08 00:00:00.000",
+		"shipVia": 1,
+		"freight": 31.22,
+		"shipName": "LINO-Delicateses",
+		"shipAddress": {
+			"street": "Ave. 5 de Mayo Porlamar",
+			"city": "I. de Margarita",
+			"region": "Nueva Esparta",
+			"postalCode": 4980,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10804,
+		"customerID": "SEVES",
+		"employeeID": 6,
+		"orderDate": "1997-12-30 00:00:00.000",
+		"requiredDate": "1998-01-27 00:00:00.000",
+		"shippedDate": "1998-01-07 00:00:00.000",
+		"shipVia": 2,
+		"freight": 27.33,
+		"shipName": "Seven Seas Imports",
+		"shipAddress": {
+			"street": "90 Wadhurst Rd.",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "OX15 4NB",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 36,
+				"discount": 0
+			},
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 20,
+				"quantity": 4,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10814,
+		"customerID": "VICTE",
+		"employeeID": 3,
+		"orderDate": "1998-01-05 00:00:00.000",
+		"requiredDate": "1998-02-02 00:00:00.000",
+		"shippedDate": "1998-01-14 00:00:00.000",
+		"shipVia": 3,
+		"freight": 130.94,
+		"shipName": "Victuailles en stock",
+		"shipAddress": {
+			"street": "2 rue du Commerce",
+			"city": "Lyon",
+			"region": "NULL",
+			"postalCode": 69004,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 20,
+				"discount": 0.15
+			},
+			{
+				"productID": 48,
+				"unitPrice": 12.75,
+				"quantity": 8,
+				"discount": 0.15
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 30,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10812,
+		"customerID": "REGGC",
+		"employeeID": 5,
+		"orderDate": "1998-01-02 00:00:00.000",
+		"requiredDate": "1998-01-30 00:00:00.000",
+		"shippedDate": "1998-01-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 59.78,
+		"shipName": "Reggiani Caseifici",
+		"shipAddress": {
+			"street": "Strada Provinciale 124",
+			"city": "Reggio Emilia",
+			"region": "NULL",
+			"postalCode": 42100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 16,
+				"discount": 0.1
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 40,
+				"discount": 0.1
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10817,
+		"customerID": "KOENE",
+		"employeeID": 3,
+		"orderDate": "1998-01-06 00:00:00.000",
+		"requiredDate": "1998-01-20 00:00:00.000",
+		"shippedDate": "1998-01-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 306.07,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 40,
+				"discount": 0.15
+			},
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 60,
+				"discount": 0.15
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 25,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10806,
+		"customerID": "VICTE",
+		"employeeID": 3,
+		"orderDate": "1997-12-31 00:00:00.000",
+		"requiredDate": "1998-01-28 00:00:00.000",
+		"shippedDate": "1998-01-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 22.11,
+		"shipName": "Victuailles en stock",
+		"shipAddress": {
+			"street": "2 rue du Commerce",
+			"city": "Lyon",
+			"region": "NULL",
+			"postalCode": 69004,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 20,
+				"discount": 0.25
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 74,
+				"unitPrice": 10,
+				"quantity": 15,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10816,
+		"customerID": "GREAL",
+		"employeeID": 4,
+		"orderDate": "1998-01-06 00:00:00.000",
+		"requiredDate": "1998-02-03 00:00:00.000",
+		"shippedDate": "1998-02-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 719.78,
+		"shipName": "Great Lakes Food Market",
+		"shipAddress": {
+			"street": "2732 Baker Blvd.",
+			"city": "Eugene",
+			"region": "OR",
+			"postalCode": 97403,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 30,
+				"discount": 0.05
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10813,
+		"customerID": "RICAR",
+		"employeeID": 1,
+		"orderDate": "1998-01-05 00:00:00.000",
+		"requiredDate": "1998-02-02 00:00:00.000",
+		"shippedDate": "1998-01-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 47.38,
+		"shipName": "Ricardo Adocicados",
+		"shipAddress": {
+			"street": "Av. Copacabana 267",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-890",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 12,
+				"discount": 0.2
+			},
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10818,
+		"customerID": "MAGAA",
+		"employeeID": 7,
+		"orderDate": "1998-01-07 00:00:00.000",
+		"requiredDate": "1998-02-04 00:00:00.000",
+		"shippedDate": "1998-01-12 00:00:00.000",
+		"shipVia": 3,
+		"freight": 65.48,
+		"shipName": "Magazzini Alimentari Riuniti",
+		"shipAddress": {
+			"street": "Via Ludovico il Moro 22",
+			"city": "Bergamo",
+			"region": "NULL",
+			"postalCode": 24100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 32,
+				"unitPrice": 32,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10819,
+		"customerID": "CACTU",
+		"employeeID": 2,
+		"orderDate": "1998-01-07 00:00:00.000",
+		"requiredDate": "1998-02-04 00:00:00.000",
+		"shippedDate": "1998-01-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 19.76,
+		"shipName": "Cactus Comidas para llevar",
+		"shipAddress": {
+			"street": "Cerrito 333",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 7,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10821,
+		"customerID": "SPLIR",
+		"employeeID": 1,
+		"orderDate": "1998-01-08 00:00:00.000",
+		"requiredDate": "1998-02-05 00:00:00.000",
+		"shippedDate": "1998-01-15 00:00:00.000",
+		"shipVia": 1,
+		"freight": 36.68,
+		"shipName": "Split Rail Beer & Ale",
+		"shipAddress": {
+			"street": "P.O. Box 555",
+			"city": "Lander",
+			"region": "WY",
+			"postalCode": 82520,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10822,
+		"customerID": "TRAIH",
+		"employeeID": 6,
+		"orderDate": "1998-01-08 00:00:00.000",
+		"requiredDate": "1998-02-05 00:00:00.000",
+		"shippedDate": "1998-01-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 7,
+		"shipName": "Trail's Head Gourmet Provisioners",
+		"shipAddress": {
+			"street": "722 DaVinci Blvd.",
+			"city": "Kirkland",
+			"region": "WA",
+			"postalCode": 98034,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10823,
+		"customerID": "LILAS",
+		"employeeID": 5,
+		"orderDate": "1998-01-09 00:00:00.000",
+		"requiredDate": "1998-02-06 00:00:00.000",
+		"shippedDate": "1998-01-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 163.97,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 40,
+				"discount": 0.1
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 15,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10824,
+		"customerID": "FOLKO",
+		"employeeID": 8,
+		"orderDate": "1998-01-09 00:00:00.000",
+		"requiredDate": "1998-02-06 00:00:00.000",
+		"shippedDate": "1998-01-30 00:00:00.000",
+		"shipVia": 1,
+		"freight": 1.23,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 9,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10825,
+		"customerID": "DRACD",
+		"employeeID": 1,
+		"orderDate": "1998-01-09 00:00:00.000",
+		"requiredDate": "1998-02-06 00:00:00.000",
+		"shippedDate": "1998-01-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 79.25,
+		"shipName": "Drachenblut Delikatessen",
+		"shipAddress": {
+			"street": "Walserweg 21",
+			"city": "Aachen",
+			"region": "NULL",
+			"postalCode": 52066,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10826,
+		"customerID": "BLONP",
+		"employeeID": 6,
+		"orderDate": "1998-01-12 00:00:00.000",
+		"requiredDate": "1998-02-09 00:00:00.000",
+		"shippedDate": "1998-02-06 00:00:00.000",
+		"shipVia": 1,
+		"freight": 7.09,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10827,
+		"customerID": "BONAP",
+		"employeeID": 1,
+		"orderDate": "1998-01-12 00:00:00.000",
+		"requiredDate": "1998-01-26 00:00:00.000",
+		"shippedDate": "1998-02-06 00:00:00.000",
+		"shipVia": 2,
+		"freight": 63.54,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10828,
+		"customerID": "RANCH",
+		"employeeID": 9,
+		"orderDate": "1998-01-13 00:00:00.000",
+		"requiredDate": "1998-01-27 00:00:00.000",
+		"shippedDate": "1998-02-04 00:00:00.000",
+		"shipVia": 1,
+		"freight": 90.85,
+		"shipName": "Rancho grande",
+		"shipAddress": {
+			"street": "Av. del Libertador 900",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 20,
+				"unitPrice": 81,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 2,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10829,
+		"customerID": "ISLAT",
+		"employeeID": 9,
+		"orderDate": "1998-01-13 00:00:00.000",
+		"requiredDate": "1998-02-10 00:00:00.000",
+		"shippedDate": "1998-01-23 00:00:00.000",
+		"shipVia": 1,
+		"freight": 154.72,
+		"shipName": "Island Trading",
+		"shipAddress": {
+			"street": "Garden House Crowther Way",
+			"city": "Cowes",
+			"region": "Isle of Wight",
+			"postalCode": "PO31 7PJ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 8,
+				"unitPrice": 40,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10830,
+		"customerID": "TRADH",
+		"employeeID": 4,
+		"orderDate": "1998-01-13 00:00:00.000",
+		"requiredDate": "1998-02-24 00:00:00.000",
+		"shippedDate": "1998-01-21 00:00:00.000",
+		"shipVia": 2,
+		"freight": 81.83,
+		"shipName": "Tradiçao Hipermercados",
+		"shipAddress": {
+			"street": "Av. Inês de Castro 414",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05634-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 6,
+				"unitPrice": 25,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 28,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10831,
+		"customerID": "SANTG",
+		"employeeID": 3,
+		"orderDate": "1998-01-14 00:00:00.000",
+		"requiredDate": "1998-02-11 00:00:00.000",
+		"shippedDate": "1998-01-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 72.19,
+		"shipName": "Santé Gourmet",
+		"shipAddress": {
+			"street": "Erling Skakkes gate 78",
+			"city": "Stavern",
+			"region": "NULL",
+			"postalCode": 4110,
+			"country": "Norway"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 9,
+				"discount": 0
+			},
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 8,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10832,
+		"customerID": "LAMAI",
+		"employeeID": 2,
+		"orderDate": "1998-01-14 00:00:00.000",
+		"requiredDate": "1998-02-11 00:00:00.000",
+		"shippedDate": "1998-01-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 43.26,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 3,
+				"discount": 0.2
+			},
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 10,
+				"discount": 0.2
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 16,
+				"discount": 0.2
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10833,
+		"customerID": "OTTIK",
+		"employeeID": 6,
+		"orderDate": "1998-01-15 00:00:00.000",
+		"requiredDate": "1998-02-12 00:00:00.000",
+		"shippedDate": "1998-01-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 71.49,
+		"shipName": "Ottilies Käseladen",
+		"shipAddress": {
+			"street": "Mehrheimerstr. 369",
+			"city": "Köln",
+			"region": "NULL",
+			"postalCode": 50739,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 9,
+				"discount": 0.1
+			},
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 9,
+				"discount": 0.1
+			},
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 20,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10834,
+		"customerID": "TRADH",
+		"employeeID": 1,
+		"orderDate": "1998-01-15 00:00:00.000",
+		"requiredDate": "1998-02-12 00:00:00.000",
+		"shippedDate": "1998-01-19 00:00:00.000",
+		"shipVia": 3,
+		"freight": 29.78,
+		"shipName": "Tradiçao Hipermercados",
+		"shipAddress": {
+			"street": "Av. Inês de Castro 414",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05634-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 8,
+				"discount": 0.05
+			},
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10838,
+		"customerID": "LINOD",
+		"employeeID": 3,
+		"orderDate": "1998-01-19 00:00:00.000",
+		"requiredDate": "1998-02-16 00:00:00.000",
+		"shippedDate": "1998-01-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 59.28,
+		"shipName": "LINO-Delicateses",
+		"shipAddress": {
+			"street": "Ave. 5 de Mayo Porlamar",
+			"city": "I. de Margarita",
+			"region": "Nueva Esparta",
+			"postalCode": 4980,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 4,
+				"discount": 0.25
+			},
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 25,
+				"discount": 0.25
+			},
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 50,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10839,
+		"customerID": "TRADH",
+		"employeeID": 3,
+		"orderDate": "1998-01-19 00:00:00.000",
+		"requiredDate": "1998-02-16 00:00:00.000",
+		"shippedDate": "1998-01-22 00:00:00.000",
+		"shipVia": 3,
+		"freight": 35.43,
+		"shipName": "Tradiçao Hipermercados",
+		"shipAddress": {
+			"street": "Av. Inês de Castro 414",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05634-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 15,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10840,
+		"customerID": "LINOD",
+		"employeeID": 4,
+		"orderDate": "1998-01-19 00:00:00.000",
+		"requiredDate": "1998-03-02 00:00:00.000",
+		"shippedDate": "1998-02-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 2.71,
+		"shipName": "LINO-Delicateses",
+		"shipAddress": {
+			"street": "Ave. 5 de Mayo Porlamar",
+			"city": "I. de Margarita",
+			"region": "Nueva Esparta",
+			"postalCode": 4980,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 6,
+				"discount": 0.2
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10841,
+		"customerID": "SUPRD",
+		"employeeID": 5,
+		"orderDate": "1998-01-20 00:00:00.000",
+		"requiredDate": "1998-02-17 00:00:00.000",
+		"shippedDate": "1998-01-29 00:00:00.000",
+		"shipVia": 2,
+		"freight": 424.3,
+		"shipName": "Suprêmes délices",
+		"shipAddress": {
+			"street": "Boulevard Tirou 255",
+			"city": "Charleroi",
+			"region": "NULL",
+			"postalCode": "B-6000",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 16,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10842,
+		"customerID": "TORTU",
+		"employeeID": 1,
+		"orderDate": "1998-01-20 00:00:00.000",
+		"requiredDate": "1998-02-17 00:00:00.000",
+		"shippedDate": "1998-01-29 00:00:00.000",
+		"shipVia": 3,
+		"freight": 54.42,
+		"shipName": "Tortuga Restaurante",
+		"shipAddress": {
+			"street": "Avda. Azteca 123",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10836,
+		"customerID": "ERNSH",
+		"employeeID": 7,
+		"orderDate": "1998-01-16 00:00:00.000",
+		"requiredDate": "1998-02-13 00:00:00.000",
+		"shippedDate": "1998-01-21 00:00:00.000",
+		"shipVia": 1,
+		"freight": 411.88,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 52,
+				"discount": 0
+			},
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10835,
+		"customerID": "ALFKI",
+		"employeeID": 1,
+		"orderDate": "1998-01-15 00:00:00.000",
+		"requiredDate": "1998-02-12 00:00:00.000",
+		"shippedDate": "1998-01-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 69.53,
+		"shipName": "Alfred's Futterkiste",
+		"shipAddress": {
+			"street": "Obere Str. 57",
+			"city": "Berlin",
+			"region": "NULL",
+			"postalCode": 12209,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 2,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10837,
+		"customerID": "BERGS",
+		"employeeID": 9,
+		"orderDate": "1998-01-16 00:00:00.000",
+		"requiredDate": "1998-02-13 00:00:00.000",
+		"shippedDate": "1998-01-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 13.32,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 21,
+				"discount": 0.25
+			},
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 40,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10845,
+		"customerID": "QUICK",
+		"employeeID": 8,
+		"orderDate": "1998-01-21 00:00:00.000",
+		"requiredDate": "1998-02-04 00:00:00.000",
+		"shippedDate": "1998-01-30 00:00:00.000",
+		"shipVia": 1,
+		"freight": 212.98,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 70,
+				"discount": 0.1
+			},
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 25,
+				"discount": 0.1
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 42,
+				"discount": 0.1
+			},
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 60,
+				"discount": 0.1
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 48,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10848,
+		"customerID": "CONSH",
+		"employeeID": 7,
+		"orderDate": "1998-01-23 00:00:00.000",
+		"requiredDate": "1998-02-20 00:00:00.000",
+		"shippedDate": "1998-01-29 00:00:00.000",
+		"shipVia": 2,
+		"freight": 38.24,
+		"shipName": "Consolidated Holdings",
+		"shipAddress": {
+			"street": "Berkeley Gardens 12  Brewery",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "WX1 6LT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 9,
+				"unitPrice": 97,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 5,
+				"unitPrice": 21.35,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10850,
+		"customerID": "VICTE",
+		"employeeID": 1,
+		"orderDate": "1998-01-23 00:00:00.000",
+		"requiredDate": "1998-03-06 00:00:00.000",
+		"shippedDate": "1998-01-30 00:00:00.000",
+		"shipVia": 1,
+		"freight": 49.19,
+		"shipName": "Victuailles en stock",
+		"shipAddress": {
+			"street": "2 rue du Commerce",
+			"city": "Lyon",
+			"region": "NULL",
+			"postalCode": 69004,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 20,
+				"discount": 0.15
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 4,
+				"discount": 0.15
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 30,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10847,
+		"customerID": "SAVEA",
+		"employeeID": 4,
+		"orderDate": "1998-01-22 00:00:00.000",
+		"requiredDate": "1998-02-05 00:00:00.000",
+		"shippedDate": "1998-02-10 00:00:00.000",
+		"shipVia": 3,
+		"freight": 487.57,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 80,
+				"discount": 0.2
+			},
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 12,
+				"discount": 0.2
+			},
+			{
+				"productID": 37,
+				"unitPrice": 26,
+				"quantity": 60,
+				"discount": 0.2
+			},
+			{
+				"productID": 45,
+				"unitPrice": 9.5,
+				"quantity": 36,
+				"discount": 0.2
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 45,
+				"discount": 0.2
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 55,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10846,
+		"customerID": "SUPRD",
+		"employeeID": 2,
+		"orderDate": "1998-01-22 00:00:00.000",
+		"requiredDate": "1998-03-05 00:00:00.000",
+		"shippedDate": "1998-01-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 56.46,
+		"shipName": "Suprêmes délices",
+		"shipAddress": {
+			"street": "Boulevard Tirou 255",
+			"city": "Charleroi",
+			"region": "NULL",
+			"postalCode": "B-6000",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 74,
+				"unitPrice": 10,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10849,
+		"customerID": "KOENE",
+		"employeeID": 9,
+		"orderDate": "1998-01-23 00:00:00.000",
+		"requiredDate": "1998-02-20 00:00:00.000",
+		"shippedDate": "1998-01-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 0.56,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 3,
+				"unitPrice": 10,
+				"quantity": 49,
+				"discount": 0
+			},
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 18,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10851,
+		"customerID": "RICAR",
+		"employeeID": 5,
+		"orderDate": "1998-01-26 00:00:00.000",
+		"requiredDate": "1998-02-23 00:00:00.000",
+		"shippedDate": "1998-02-02 00:00:00.000",
+		"shipVia": 1,
+		"freight": 160.55,
+		"shipName": "Ricardo Adocicados",
+		"shipAddress": {
+			"street": "Av. Copacabana 267",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-890",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 10,
+				"discount": 0.05
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 10,
+				"discount": 0.05
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 42,
+				"discount": 0.05
+			},
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 5,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10852,
+		"customerID": "RATTC",
+		"employeeID": 8,
+		"orderDate": "1998-01-26 00:00:00.000",
+		"requiredDate": "1998-02-09 00:00:00.000",
+		"shippedDate": "1998-01-30 00:00:00.000",
+		"shipVia": 1,
+		"freight": 174.05,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10854,
+		"customerID": "ERNSH",
+		"employeeID": 3,
+		"orderDate": "1998-01-27 00:00:00.000",
+		"requiredDate": "1998-02-24 00:00:00.000",
+		"shippedDate": "1998-02-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 100.22,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 100,
+				"discount": 0.15
+			},
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 65,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10855,
+		"customerID": "OLDWO",
+		"employeeID": 3,
+		"orderDate": "1998-01-27 00:00:00.000",
+		"requiredDate": "1998-02-24 00:00:00.000",
+		"shippedDate": "1998-02-04 00:00:00.000",
+		"shipVia": 1,
+		"freight": 170.97,
+		"shipName": "Old World Delicatessen",
+		"shipAddress": {
+			"street": "2743 Bering St.",
+			"city": "Anchorage",
+			"region": "AK",
+			"postalCode": 99508,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 15,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10856,
+		"customerID": "ANTON",
+		"employeeID": 3,
+		"orderDate": "1998-01-28 00:00:00.000",
+		"requiredDate": "1998-02-25 00:00:00.000",
+		"shippedDate": "1998-02-10 00:00:00.000",
+		"shipVia": 2,
+		"freight": 58.43,
+		"shipName": "Antonio Moreno Taquería",
+		"shipAddress": {
+			"street": "Mataderos  2312",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5023,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10857,
+		"customerID": "BERGS",
+		"employeeID": 8,
+		"orderDate": "1998-01-28 00:00:00.000",
+		"requiredDate": "1998-02-25 00:00:00.000",
+		"shippedDate": "1998-02-06 00:00:00.000",
+		"shipVia": 2,
+		"freight": 188.85,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 3,
+				"unitPrice": 10,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 35,
+				"discount": 0.25
+			},
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 10,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10858,
+		"customerID": "LACOR",
+		"employeeID": 2,
+		"orderDate": "1998-01-29 00:00:00.000",
+		"requiredDate": "1998-02-26 00:00:00.000",
+		"shippedDate": "1998-02-03 00:00:00.000",
+		"shipVia": 1,
+		"freight": 52.51,
+		"shipName": "La corne d'abondance",
+		"shipAddress": {
+			"street": "67 avenue de l'Europe",
+			"city": "Versailles",
+			"region": "NULL",
+			"postalCode": 78000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 27,
+				"unitPrice": 43.9,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 4,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10859,
+		"customerID": "FRANK",
+		"employeeID": 1,
+		"orderDate": "1998-01-29 00:00:00.000",
+		"requiredDate": "1998-02-26 00:00:00.000",
+		"shippedDate": "1998-02-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 76.1,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 40,
+				"discount": 0.25
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 35,
+				"discount": 0.25
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 30,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10860,
+		"customerID": "FRANR",
+		"employeeID": 3,
+		"orderDate": "1998-01-29 00:00:00.000",
+		"requiredDate": "1998-02-26 00:00:00.000",
+		"shippedDate": "1998-02-04 00:00:00.000",
+		"shipVia": 3,
+		"freight": 19.26,
+		"shipName": "France restauration",
+		"shipAddress": {
+			"street": "54 rue Royale",
+			"city": "Nantes",
+			"region": "NULL",
+			"postalCode": 44000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10861,
+		"customerID": "WHITC",
+		"employeeID": 4,
+		"orderDate": "1998-01-30 00:00:00.000",
+		"requiredDate": "1998-02-27 00:00:00.000",
+		"shippedDate": "1998-02-17 00:00:00.000",
+		"shipVia": 2,
+		"freight": 14.93,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 42,
+				"discount": 0
+			},
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10862,
+		"customerID": "LEHMS",
+		"employeeID": 8,
+		"orderDate": "1998-01-30 00:00:00.000",
+		"requiredDate": "1998-03-13 00:00:00.000",
+		"shippedDate": "1998-02-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 53.23,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 8,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10863,
+		"customerID": "HILAA",
+		"employeeID": 4,
+		"orderDate": "1998-02-02 00:00:00.000",
+		"requiredDate": "1998-03-02 00:00:00.000",
+		"shippedDate": "1998-02-17 00:00:00.000",
+		"shipVia": 2,
+		"freight": 30.26,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0.15
+			},
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 12,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10864,
+		"customerID": "AROUT",
+		"employeeID": 4,
+		"orderDate": "1998-02-02 00:00:00.000",
+		"requiredDate": "1998-03-02 00:00:00.000",
+		"shippedDate": "1998-02-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.04,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 67,
+				"unitPrice": 14,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10865,
+		"customerID": "QUICK",
+		"employeeID": 2,
+		"orderDate": "1998-02-02 00:00:00.000",
+		"requiredDate": "1998-02-16 00:00:00.000",
+		"shippedDate": "1998-02-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 348.14,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 60,
+				"discount": 0.05
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 80,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10869,
+		"customerID": "SEVES",
+		"employeeID": 5,
+		"orderDate": "1998-02-04 00:00:00.000",
+		"requiredDate": "1998-03-04 00:00:00.000",
+		"shippedDate": "1998-02-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 143.28,
+		"shipName": "Seven Seas Imports",
+		"shipAddress": {
+			"street": "90 Wadhurst Rd.",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "OX15 4NB",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10870,
+		"customerID": "WOLZA",
+		"employeeID": 5,
+		"orderDate": "1998-02-04 00:00:00.000",
+		"requiredDate": "1998-03-04 00:00:00.000",
+		"shippedDate": "1998-02-13 00:00:00.000",
+		"shipVia": 3,
+		"freight": 12.04,
+		"shipName": "Wolski Zajazd",
+		"shipAddress": {
+			"street": "ul. Filtrowa 68",
+			"city": "Warszawa",
+			"region": "NULL",
+			"postalCode": "01-012",
+			"country": "Poland"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 2,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10871,
+		"customerID": "BONAP",
+		"employeeID": 9,
+		"orderDate": "1998-02-05 00:00:00.000",
+		"requiredDate": "1998-03-05 00:00:00.000",
+		"shippedDate": "1998-02-10 00:00:00.000",
+		"shipVia": 2,
+		"freight": 112.27,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 6,
+				"unitPrice": 25,
+				"quantity": 50,
+				"discount": 0.05
+			},
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 12,
+				"discount": 0.05
+			},
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 16,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10872,
+		"customerID": "GODOS",
+		"employeeID": 5,
+		"orderDate": "1998-02-05 00:00:00.000",
+		"requiredDate": "1998-03-05 00:00:00.000",
+		"shippedDate": "1998-02-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 175.32,
+		"shipName": "Godos Cocina Típica",
+		"shipAddress": {
+			"street": "C/ Romero 33",
+			"city": "Sevilla",
+			"region": "NULL",
+			"postalCode": 41101,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 10,
+				"discount": 0.05
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 21,
+				"discount": 0.05
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 15,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10873,
+		"customerID": "WILMK",
+		"employeeID": 4,
+		"orderDate": "1998-02-06 00:00:00.000",
+		"requiredDate": "1998-03-06 00:00:00.000",
+		"shippedDate": "1998-02-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 0.82,
+		"shipName": "Wilman Kala",
+		"shipAddress": {
+			"street": "Keskuskatu 45",
+			"city": "Helsinki",
+			"region": "NULL",
+			"postalCode": 21240,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10866,
+		"customerID": "BERGS",
+		"employeeID": 5,
+		"orderDate": "1998-02-03 00:00:00.000",
+		"requiredDate": "1998-03-03 00:00:00.000",
+		"shippedDate": "1998-02-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 109.11,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 21,
+				"discount": 0.25
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 6,
+				"discount": 0.25
+			},
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 40,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10876,
+		"customerID": "BONAP",
+		"employeeID": 7,
+		"orderDate": "1998-02-09 00:00:00.000",
+		"requiredDate": "1998-03-09 00:00:00.000",
+		"shippedDate": "1998-02-12 00:00:00.000",
+		"shipVia": 3,
+		"freight": 60.42,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10877,
+		"customerID": "RICAR",
+		"employeeID": 1,
+		"orderDate": "1998-02-09 00:00:00.000",
+		"requiredDate": "1998-03-09 00:00:00.000",
+		"shippedDate": "1998-02-19 00:00:00.000",
+		"shipVia": 1,
+		"freight": 38.06,
+		"shipName": "Ricardo Adocicados",
+		"shipAddress": {
+			"street": "Av. Copacabana 267",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-890",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 30,
+				"discount": 0.25
+			},
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10868,
+		"customerID": "QUEEN",
+		"employeeID": 7,
+		"orderDate": "1998-02-04 00:00:00.000",
+		"requiredDate": "1998-03-04 00:00:00.000",
+		"shippedDate": "1998-02-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 191.27,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 20,
+				"quantity": 42,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10875,
+		"customerID": "BERGS",
+		"employeeID": 4,
+		"orderDate": "1998-02-06 00:00:00.000",
+		"requiredDate": "1998-03-06 00:00:00.000",
+		"shippedDate": "1998-03-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 32.37,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 20,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 21,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10882,
+		"customerID": "SAVEA",
+		"employeeID": 4,
+		"orderDate": "1998-02-11 00:00:00.000",
+		"requiredDate": "1998-03-11 00:00:00.000",
+		"shippedDate": "1998-02-20 00:00:00.000",
+		"shipVia": 3,
+		"freight": 23.1,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 20,
+				"quantity": 20,
+				"discount": 0.15
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 32,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10884,
+		"customerID": "LETSS",
+		"employeeID": 4,
+		"orderDate": "1998-02-12 00:00:00.000",
+		"requiredDate": "1998-03-12 00:00:00.000",
+		"shippedDate": "1998-02-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 90.97,
+		"shipName": "Let's Stop N Shop",
+		"shipAddress": {
+			"street": "87 Polk St. Suite 5",
+			"city": "San Francisco",
+			"region": "CA",
+			"postalCode": 94117,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 21,
+				"discount": 0.05
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 12,
+				"discount": 0.05
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 40,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10885,
+		"customerID": "SUPRD",
+		"employeeID": 6,
+		"orderDate": "1998-02-12 00:00:00.000",
+		"requiredDate": "1998-03-12 00:00:00.000",
+		"shippedDate": "1998-02-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 5.64,
+		"shipName": "Suprêmes délices",
+		"shipAddress": {
+			"street": "Boulevard Tirou 255",
+			"city": "Charleroi",
+			"region": "NULL",
+			"postalCode": "B-6000",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10886,
+		"customerID": "HANAR",
+		"employeeID": 1,
+		"orderDate": "1998-02-13 00:00:00.000",
+		"requiredDate": "1998-03-13 00:00:00.000",
+		"shippedDate": "1998-03-02 00:00:00.000",
+		"shipVia": 1,
+		"freight": 4.99,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 70,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10880,
+		"customerID": "FOLKO",
+		"employeeID": 7,
+		"orderDate": "1998-02-10 00:00:00.000",
+		"requiredDate": "1998-03-24 00:00:00.000",
+		"shippedDate": "1998-02-18 00:00:00.000",
+		"shipVia": 1,
+		"freight": 88.01,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 30,
+				"discount": 0.2
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 30,
+				"discount": 0.2
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 50,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10879,
+		"customerID": "WILMK",
+		"employeeID": 3,
+		"orderDate": "1998-02-10 00:00:00.000",
+		"requiredDate": "1998-03-10 00:00:00.000",
+		"shippedDate": "1998-02-12 00:00:00.000",
+		"shipVia": 3,
+		"freight": 8.5,
+		"shipName": "Wilman Kala",
+		"shipAddress": {
+			"street": "Keskuskatu 45",
+			"city": "Helsinki",
+			"region": "NULL",
+			"postalCode": 21240,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10889,
+		"customerID": "RATTC",
+		"employeeID": 9,
+		"orderDate": "1998-02-16 00:00:00.000",
+		"requiredDate": "1998-03-16 00:00:00.000",
+		"shippedDate": "1998-02-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 280.61,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10890,
+		"customerID": "DUMON",
+		"employeeID": 7,
+		"orderDate": "1998-02-16 00:00:00.000",
+		"requiredDate": "1998-03-16 00:00:00.000",
+		"shippedDate": "1998-02-18 00:00:00.000",
+		"shipVia": 1,
+		"freight": 32.76,
+		"shipName": "Du monde entier",
+		"shipAddress": {
+			"street": "67 rue des Cinquante Otages",
+			"city": "Nantes",
+			"region": "NULL",
+			"postalCode": 44000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 34,
+				"unitPrice": 14,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 14,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10893,
+		"customerID": "KOENE",
+		"employeeID": 9,
+		"orderDate": "1998-02-18 00:00:00.000",
+		"requiredDate": "1998-03-18 00:00:00.000",
+		"shippedDate": "1998-02-20 00:00:00.000",
+		"shipVia": 2,
+		"freight": 77.78,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 8,
+				"unitPrice": 40,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10894,
+		"customerID": "SAVEA",
+		"employeeID": 1,
+		"orderDate": "1998-02-18 00:00:00.000",
+		"requiredDate": "1998-03-18 00:00:00.000",
+		"shippedDate": "1998-02-20 00:00:00.000",
+		"shipVia": 1,
+		"freight": 116.13,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 28,
+				"discount": 0.05
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 50,
+				"discount": 0.05
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 120,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10888,
+		"customerID": "GODOS",
+		"employeeID": 1,
+		"orderDate": "1998-02-16 00:00:00.000",
+		"requiredDate": "1998-03-16 00:00:00.000",
+		"shippedDate": "1998-02-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 51.87,
+		"shipName": "Godos Cocina Típica",
+		"shipAddress": {
+			"street": "C/ Romero 33",
+			"city": "Sevilla",
+			"region": "NULL",
+			"postalCode": 41101,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 18,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10898,
+		"customerID": "OCEAN",
+		"employeeID": 4,
+		"orderDate": "1998-02-20 00:00:00.000",
+		"requiredDate": "1998-03-20 00:00:00.000",
+		"shippedDate": "1998-03-06 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.27,
+		"shipName": "Océano Atlántico Ltda.",
+		"shipAddress": {
+			"street": "Ing. Gustavo Moncada 8585 Piso 20-A",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10899,
+		"customerID": "LILAS",
+		"employeeID": 5,
+		"orderDate": "1998-02-20 00:00:00.000",
+		"requiredDate": "1998-03-20 00:00:00.000",
+		"shippedDate": "1998-02-26 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.21,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 8,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10901,
+		"customerID": "HILAA",
+		"employeeID": 4,
+		"orderDate": "1998-02-23 00:00:00.000",
+		"requiredDate": "1998-03-23 00:00:00.000",
+		"shippedDate": "1998-02-26 00:00:00.000",
+		"shipVia": 1,
+		"freight": 62.09,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10902,
+		"customerID": "FOLKO",
+		"employeeID": 1,
+		"orderDate": "1998-02-23 00:00:00.000",
+		"requiredDate": "1998-03-23 00:00:00.000",
+		"shippedDate": "1998-03-03 00:00:00.000",
+		"shipVia": 1,
+		"freight": 44.15,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 30,
+				"discount": 0.15
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 6,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10903,
+		"customerID": "HANAR",
+		"employeeID": 3,
+		"orderDate": "1998-02-24 00:00:00.000",
+		"requiredDate": "1998-03-24 00:00:00.000",
+		"shippedDate": "1998-03-04 00:00:00.000",
+		"shipVia": 3,
+		"freight": 36.71,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10896,
+		"customerID": "MAISD",
+		"employeeID": 7,
+		"orderDate": "1998-02-19 00:00:00.000",
+		"requiredDate": "1998-03-19 00:00:00.000",
+		"shippedDate": "1998-02-27 00:00:00.000",
+		"shipVia": 3,
+		"freight": 32.45,
+		"shipName": "Maison Dewey",
+		"shipAddress": {
+			"street": "Rue Joseph-Bens 532",
+			"city": "Bruxelles",
+			"region": "NULL",
+			"postalCode": "B-1180",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 45,
+				"unitPrice": 9.5,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 16,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10904,
+		"customerID": "WHITC",
+		"employeeID": 3,
+		"orderDate": "1998-02-24 00:00:00.000",
+		"requiredDate": "1998-03-24 00:00:00.000",
+		"shippedDate": "1998-02-27 00:00:00.000",
+		"shipVia": 3,
+		"freight": 162.95,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10895,
+		"customerID": "ERNSH",
+		"employeeID": 3,
+		"orderDate": "1998-02-18 00:00:00.000",
+		"requiredDate": "1998-03-18 00:00:00.000",
+		"shippedDate": "1998-02-23 00:00:00.000",
+		"shipVia": 1,
+		"freight": 162.75,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 91,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 100,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 110,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 45,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10897,
+		"customerID": "HUNGO",
+		"employeeID": 3,
+		"orderDate": "1998-02-19 00:00:00.000",
+		"requiredDate": "1998-03-19 00:00:00.000",
+		"shippedDate": "1998-02-25 00:00:00.000",
+		"shipVia": 2,
+		"freight": 603.54,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 80,
+				"discount": 0
+			},
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 36,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10909,
+		"customerID": "SANTG",
+		"employeeID": 1,
+		"orderDate": "1998-02-26 00:00:00.000",
+		"requiredDate": "1998-03-26 00:00:00.000",
+		"shippedDate": "1998-03-10 00:00:00.000",
+		"shipVia": 2,
+		"freight": 53.05,
+		"shipName": "Santé Gourmet",
+		"shipAddress": {
+			"street": "Erling Skakkes gate 78",
+			"city": "Stavern",
+			"region": "NULL",
+			"postalCode": 4110,
+			"country": "Norway"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10910,
+		"customerID": "WILMK",
+		"employeeID": 1,
+		"orderDate": "1998-02-26 00:00:00.000",
+		"requiredDate": "1998-03-26 00:00:00.000",
+		"shippedDate": "1998-03-04 00:00:00.000",
+		"shipVia": 3,
+		"freight": 38.11,
+		"shipName": "Wilman Kala",
+		"shipAddress": {
+			"street": "Keskuskatu 45",
+			"city": "Helsinki",
+			"region": "NULL",
+			"postalCode": 21240,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 20,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10911,
+		"customerID": "GODOS",
+		"employeeID": 3,
+		"orderDate": "1998-02-26 00:00:00.000",
+		"requiredDate": "1998-03-26 00:00:00.000",
+		"shippedDate": "1998-03-05 00:00:00.000",
+		"shipVia": 1,
+		"freight": 38.19,
+		"shipName": "Godos Cocina Típica",
+		"shipAddress": {
+			"street": "C/ Romero 33",
+			"city": "Sevilla",
+			"region": "NULL",
+			"postalCode": 41101,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 67,
+				"unitPrice": 14,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10912,
+		"customerID": "HUNGO",
+		"employeeID": 2,
+		"orderDate": "1998-02-26 00:00:00.000",
+		"requiredDate": "1998-03-26 00:00:00.000",
+		"shippedDate": "1998-03-18 00:00:00.000",
+		"shipVia": 2,
+		"freight": 580.91,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 40,
+				"discount": 0.25
+			},
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 60,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10913,
+		"customerID": "QUEEN",
+		"employeeID": 4,
+		"orderDate": "1998-02-26 00:00:00.000",
+		"requiredDate": "1998-03-26 00:00:00.000",
+		"shippedDate": "1998-03-04 00:00:00.000",
+		"shipVia": 1,
+		"freight": 33.05,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 30,
+				"discount": 0.25
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 40,
+				"discount": 0.25
+			},
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10917,
+		"customerID": "ROMEY",
+		"employeeID": 4,
+		"orderDate": "1998-03-02 00:00:00.000",
+		"requiredDate": "1998-03-30 00:00:00.000",
+		"shippedDate": "1998-03-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 8.29,
+		"shipName": "Romero y tomillo",
+		"shipAddress": {
+			"street": "Gran Vía 1",
+			"city": "Madrid",
+			"region": "NULL",
+			"postalCode": 28001,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 1,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10916,
+		"customerID": "RANCH",
+		"employeeID": 1,
+		"orderDate": "1998-02-27 00:00:00.000",
+		"requiredDate": "1998-03-27 00:00:00.000",
+		"shippedDate": "1998-03-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 63.77,
+		"shipName": "Rancho grande",
+		"shipAddress": {
+			"street": "Av. del Libertador 900",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 32,
+				"unitPrice": 32,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10918,
+		"customerID": "BOTTM",
+		"employeeID": 3,
+		"orderDate": "1998-03-02 00:00:00.000",
+		"requiredDate": "1998-03-30 00:00:00.000",
+		"shippedDate": "1998-03-11 00:00:00.000",
+		"shipVia": 3,
+		"freight": 48.83,
+		"shipName": "Bottom-Dollar Markets",
+		"shipAddress": {
+			"street": "23 Tsawassen Blvd.",
+			"city": "Tsawassen",
+			"region": "BC",
+			"postalCode": "T2F 8M4",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 60,
+				"discount": 0.25
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 25,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10919,
+		"customerID": "LINOD",
+		"employeeID": 2,
+		"orderDate": "1998-03-02 00:00:00.000",
+		"requiredDate": "1998-03-30 00:00:00.000",
+		"shippedDate": "1998-03-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 19.8,
+		"shipName": "LINO-Delicateses",
+		"shipAddress": {
+			"street": "Ave. 5 de Mayo Porlamar",
+			"city": "I. de Margarita",
+			"region": "Nueva Esparta",
+			"postalCode": 4980,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10908,
+		"customerID": "REGGC",
+		"employeeID": 4,
+		"orderDate": "1998-02-26 00:00:00.000",
+		"requiredDate": "1998-03-26 00:00:00.000",
+		"shippedDate": "1998-03-06 00:00:00.000",
+		"shipVia": 2,
+		"freight": 32.96,
+		"shipName": "Reggiani Caseifici",
+		"shipAddress": {
+			"street": "Strada Provinciale 124",
+			"city": "Reggio Emilia",
+			"region": "NULL",
+			"postalCode": 42100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 14,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10921,
+		"customerID": "VAFFE",
+		"employeeID": 1,
+		"orderDate": "1998-03-03 00:00:00.000",
+		"requiredDate": "1998-04-14 00:00:00.000",
+		"shippedDate": "1998-03-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 176.48,
+		"shipName": "Vaffeljernet",
+		"shipAddress": {
+			"street": "Smagsloget 45",
+			"city": "Århus",
+			"region": "NULL",
+			"postalCode": 8200,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 63,
+				"unitPrice": 43.9,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10915,
+		"customerID": "TORTU",
+		"employeeID": 2,
+		"orderDate": "1998-02-27 00:00:00.000",
+		"requiredDate": "1998-03-27 00:00:00.000",
+		"shippedDate": "1998-03-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.51,
+		"shipName": "Tortuga Restaurante",
+		"shipAddress": {
+			"street": "Avda. Azteca 123",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10925,
+		"customerID": "HANAR",
+		"employeeID": 3,
+		"orderDate": "1998-03-04 00:00:00.000",
+		"requiredDate": "1998-04-01 00:00:00.000",
+		"shippedDate": "1998-03-13 00:00:00.000",
+		"shipVia": 1,
+		"freight": 2.27,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 25,
+				"discount": 0.15
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 12,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10926,
+		"customerID": "ANATR",
+		"employeeID": 4,
+		"orderDate": "1998-03-04 00:00:00.000",
+		"requiredDate": "1998-04-01 00:00:00.000",
+		"shippedDate": "1998-03-11 00:00:00.000",
+		"shipVia": 3,
+		"freight": 39.92,
+		"shipName": "Ana Trujillo Emparedados y helados",
+		"shipAddress": {
+			"street": "Avda. de la Constitución 2222",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5021,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 7,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10927,
+		"customerID": "LACOR",
+		"employeeID": 4,
+		"orderDate": "1998-03-05 00:00:00.000",
+		"requiredDate": "1998-04-02 00:00:00.000",
+		"shippedDate": "1998-04-08 00:00:00.000",
+		"shipVia": 1,
+		"freight": 19.79,
+		"shipName": "La corne d'abondance",
+		"shipAddress": {
+			"street": "67 avenue de l'Europe",
+			"city": "Versailles",
+			"region": "NULL",
+			"postalCode": 78000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 20,
+				"unitPrice": 81,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10928,
+		"customerID": "GALED",
+		"employeeID": 1,
+		"orderDate": "1998-03-05 00:00:00.000",
+		"requiredDate": "1998-04-02 00:00:00.000",
+		"shippedDate": "1998-03-18 00:00:00.000",
+		"shipVia": 1,
+		"freight": 1.36,
+		"shipName": "Galería del gastronómo",
+		"shipAddress": {
+			"street": "Rambla de Cataluña 23",
+			"city": "Barcelona",
+			"region": "NULL",
+			"postalCode": 8022,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10929,
+		"customerID": "FRANK",
+		"employeeID": 6,
+		"orderDate": "1998-03-05 00:00:00.000",
+		"requiredDate": "1998-04-02 00:00:00.000",
+		"shippedDate": "1998-03-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 33.93,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 49,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10930,
+		"customerID": "SUPRD",
+		"employeeID": 4,
+		"orderDate": "1998-03-06 00:00:00.000",
+		"requiredDate": "1998-04-17 00:00:00.000",
+		"shippedDate": "1998-03-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 15.55,
+		"shipName": "Suprêmes délices",
+		"shipAddress": {
+			"street": "Boulevard Tirou 255",
+			"city": "Charleroi",
+			"region": "NULL",
+			"postalCode": "B-6000",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 27,
+				"unitPrice": 43.9,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 25,
+				"discount": 0.2
+			},
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 30,
+				"discount": 0.2
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 36,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10931,
+		"customerID": "RICSU",
+		"employeeID": 4,
+		"orderDate": "1998-03-06 00:00:00.000",
+		"requiredDate": "1998-03-20 00:00:00.000",
+		"shippedDate": "1998-03-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 13.6,
+		"shipName": "Richter Supermarkt",
+		"shipAddress": {
+			"street": "Starenweg 5",
+			"city": "Genève",
+			"region": "NULL",
+			"postalCode": 1204,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 42,
+				"discount": 0.15
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10932,
+		"customerID": "BONAP",
+		"employeeID": 8,
+		"orderDate": "1998-03-06 00:00:00.000",
+		"requiredDate": "1998-04-03 00:00:00.000",
+		"shippedDate": "1998-03-24 00:00:00.000",
+		"shipVia": 1,
+		"freight": 134.64,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 14,
+				"discount": 0.1
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 16,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10933,
+		"customerID": "ISLAT",
+		"employeeID": 6,
+		"orderDate": "1998-03-06 00:00:00.000",
+		"requiredDate": "1998-04-03 00:00:00.000",
+		"shippedDate": "1998-03-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 54.15,
+		"shipName": "Island Trading",
+		"shipAddress": {
+			"street": "Garden House Crowther Way",
+			"city": "Cowes",
+			"region": "Isle of Wight",
+			"postalCode": "PO31 7PJ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10935,
+		"customerID": "WELLI",
+		"employeeID": 4,
+		"orderDate": "1998-03-09 00:00:00.000",
+		"requiredDate": "1998-04-06 00:00:00.000",
+		"shippedDate": "1998-03-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 47.59,
+		"shipName": "Wellington Importadora",
+		"shipAddress": {
+			"street": "Rua do Mercado 12",
+			"city": "Resende",
+			"region": "SP",
+			"postalCode": "08737-363",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 4,
+				"discount": 0.25
+			},
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 8,
+				"discount": 0.25
+			},
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10937,
+		"customerID": "CACTU",
+		"employeeID": 7,
+		"orderDate": "1998-03-10 00:00:00.000",
+		"requiredDate": "1998-03-24 00:00:00.000",
+		"shippedDate": "1998-03-13 00:00:00.000",
+		"shipVia": 3,
+		"freight": 31.51,
+		"shipName": "Cactus Comidas para llevar",
+		"shipAddress": {
+			"street": "Cerrito 333",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 34,
+				"unitPrice": 14,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10938,
+		"customerID": "QUICK",
+		"employeeID": 3,
+		"orderDate": "1998-03-10 00:00:00.000",
+		"requiredDate": "1998-04-07 00:00:00.000",
+		"shippedDate": "1998-03-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 31.89,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 20,
+				"discount": 0.25
+			},
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 24,
+				"discount": 0.25
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 49,
+				"discount": 0.25
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 35,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10939,
+		"customerID": "MAGAA",
+		"employeeID": 2,
+		"orderDate": "1998-03-10 00:00:00.000",
+		"requiredDate": "1998-04-07 00:00:00.000",
+		"shippedDate": "1998-03-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 76.33,
+		"shipName": "Magazzini Alimentari Riuniti",
+		"shipAddress": {
+			"street": "Via Ludovico il Moro 22",
+			"city": "Bergamo",
+			"region": "NULL",
+			"postalCode": 24100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 10,
+				"discount": 0.15
+			},
+			{
+				"productID": 67,
+				"unitPrice": 14,
+				"quantity": 40,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10940,
+		"customerID": "BONAP",
+		"employeeID": 8,
+		"orderDate": "1998-03-11 00:00:00.000",
+		"requiredDate": "1998-04-08 00:00:00.000",
+		"shippedDate": "1998-03-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 19.77,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10941,
+		"customerID": "SAVEA",
+		"employeeID": 7,
+		"orderDate": "1998-03-11 00:00:00.000",
+		"requiredDate": "1998-04-08 00:00:00.000",
+		"shippedDate": "1998-03-20 00:00:00.000",
+		"shipVia": 2,
+		"freight": 400.81,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 44,
+				"discount": 0.25
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 30,
+				"discount": 0.25
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 80,
+				"discount": 0.25
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10922,
+		"customerID": "HANAR",
+		"employeeID": 5,
+		"orderDate": "1998-03-03 00:00:00.000",
+		"requiredDate": "1998-03-31 00:00:00.000",
+		"shippedDate": "1998-03-05 00:00:00.000",
+		"shipVia": 3,
+		"freight": 62.74,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10923,
+		"customerID": "LAMAI",
+		"employeeID": 7,
+		"orderDate": "1998-03-03 00:00:00.000",
+		"requiredDate": "1998-04-14 00:00:00.000",
+		"shippedDate": "1998-03-13 00:00:00.000",
+		"shipVia": 3,
+		"freight": 68.26,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 10,
+				"discount": 0.2
+			},
+			{
+				"productID": 67,
+				"unitPrice": 14,
+				"quantity": 24,
+				"discount": 0.2
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 10,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10924,
+		"customerID": "BERGS",
+		"employeeID": 3,
+		"orderDate": "1998-03-04 00:00:00.000",
+		"requiredDate": "1998-04-01 00:00:00.000",
+		"shippedDate": "1998-04-08 00:00:00.000",
+		"shipVia": 2,
+		"freight": 151.52,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10943,
+		"customerID": "BSBEV",
+		"employeeID": 4,
+		"orderDate": "1998-03-11 00:00:00.000",
+		"requiredDate": "1998-04-08 00:00:00.000",
+		"shippedDate": "1998-03-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 2.17,
+		"shipName": "B's Beverages",
+		"shipAddress": {
+			"street": "Fauntleroy Circus",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "EC2 5NT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10944,
+		"customerID": "BOTTM",
+		"employeeID": 6,
+		"orderDate": "1998-03-12 00:00:00.000",
+		"requiredDate": "1998-03-26 00:00:00.000",
+		"shippedDate": "1998-03-13 00:00:00.000",
+		"shipVia": 3,
+		"freight": 52.92,
+		"shipName": "Bottom-Dollar Markets",
+		"shipAddress": {
+			"street": "23 Tsawassen Blvd.",
+			"city": "Tsawassen",
+			"region": "BC",
+			"postalCode": "T2F 8M4",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 5,
+				"discount": 0.25
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 18,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10945,
+		"customerID": "MORGK",
+		"employeeID": 4,
+		"orderDate": "1998-03-12 00:00:00.000",
+		"requiredDate": "1998-04-09 00:00:00.000",
+		"shippedDate": "1998-03-18 00:00:00.000",
+		"shipVia": 1,
+		"freight": 10.22,
+		"shipName": "Morgenstern Gesundkost",
+		"shipAddress": {
+			"street": "Heerstr. 22",
+			"city": "Leipzig",
+			"region": "NULL",
+			"postalCode": 4179,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	}
+]
diff --git a/vue-options-api-demos/grid/print/control-column-widths/main.js b/vue-options-api-demos/grid/print/control-column-widths/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/print/control-column-widths/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/print/control-column-widths/main.vue b/vue-options-api-demos/grid/print/control-column-widths/main.vue
new file mode 100644
index 00000000..bed24fdf
--- /dev/null
+++ b/vue-options-api-demos/grid/print/control-column-widths/main.vue
@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <div class="example-config">
+      <div class="row">
+        <div class="col">
+          <KButton @click="print">Print Grid</KButton>
+        </div>
+      </div>
+    </div>
+    <Grid
+      :style="dimensions"
+      :data-items="dataItems"
+      :columns="columns"
+      :scrollable="scrollable"
+    >
+    </Grid>
+  </div>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import { Checkbox as KCheckbox } from '@progress/kendo-vue-inputs';
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+import products from './products.json';
+
+export default {
+  components: {
+    Grid,
+    KButton,
+    KCheckbox,
+  },
+  data() {
+    return {
+      loader: false,
+      dataItems: [],
+      printState: false,
+      columnsToPrint: [],
+      defaultColumns: [
+        { field: 'ProductID', title: 'ID', width: '250px' },
+        {
+          field: 'ProductName',
+          title: 'Product Name',
+          width: '250px',
+        },
+        {
+          field: 'UnitPrice',
+          title: 'Unit Price',
+          width: '350px',
+        },
+        {
+          field: 'Discontinued',
+          title: 'Discontinued',
+          width: '250px',
+        },
+        {
+          field: 'QuantityPerUnit',
+          title: 'QuantityPerUnit',
+          width: '250px',
+        },
+        {
+          field: 'Category.CategoryName',
+          title: 'CategoryName',
+          width: '250px',
+        },
+      ],
+      scrollable: 'scrollable',
+      dimensions: {
+        height: '400px',
+        width: '600px',
+      },
+    };
+  },
+  methods: {
+    print() {
+      this.setPrintLayout();
+      setTimeout(() => {
+        window.print();
+        this.setNormalLayout();
+      });
+    },
+
+    setPrintLayout() {
+      this.printState = true;
+      this.dimensions = {
+        height: '100%',
+        width: '100%',
+      };
+      this.scrollable = 'none';
+    },
+    setNormalLayout() {
+      this.printState = false;
+      this.dimensions = {
+        height: '400px',
+        width: '800px',
+      };
+      this.scrollable = 'scrollable';
+    },
+  },
+  mounted() {
+    this.dataItems = products;
+    this.columnsToPrint = this.columns;
+  },
+  computed: {
+    columns() {
+      return this.printState
+        ? this.defaultColumns.map((column) => ({
+            ...column,
+            width: 120,
+          }))
+        : this.defaultColumns;
+    },
+  },
+};
+</script>
+<style>
+@media print {
+  * {
+    overflow: visible !important;
+    visibility: hidden;
+  }
+
+  .k-grid {
+    visibility: visible;
+    margin-top: -60px;
+  }
+
+  .k-grid * {
+    visibility: visible;
+  }
+}
+</style>
diff --git a/vue-options-api-demos/grid/print/control-column-widths/products.json b/vue-options-api-demos/grid/print/control-column-widths/products.json
new file mode 100644
index 00000000..4df1c408
--- /dev/null
+++ b/vue-options-api-demos/grid/print/control-column-widths/products.json
@@ -0,0 +1,1233 @@
+[{
+    "ProductID" : 1,
+    "ProductName" : "Chai",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "10 boxes x 20 bags",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 2,
+    "ProductName" : "Chang",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 3,
+    "ProductName" : "Aniseed Syrup",
+    "SupplierID" : 1,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 550 ml bottles",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 13,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 4,
+    "ProductName" : "Chef Anton's Cajun Seasoning",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "48 - 6 oz jars",
+    "UnitPrice" : 22.0000,
+    "UnitsInStock" : 53,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 5,
+    "ProductName" : "Chef Anton's Gumbo Mix",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "36 boxes",
+    "UnitPrice" : 21.3500,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 6,
+    "ProductName" : "Grandma's Boysenberry Spread",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 8 oz jars",
+    "UnitPrice" : 25.0000,
+    "UnitsInStock" : 120,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 7,
+    "ProductName" : "Uncle Bob's Organic Dried Pears",
+    "SupplierID" : 3,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "12 - 1 lb pkgs.",
+    "UnitPrice" : 30.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 8,
+    "ProductName" : "Northwoods Cranberry Sauce",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 12 oz jars",
+    "UnitPrice" : 40.0000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 9,
+    "ProductName" : "Mishi Kobe Niku",
+    "SupplierID" : 4,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "18 - 500 g pkgs.",
+    "UnitPrice" : 97.0000,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 10,
+    "ProductName" : "Ikura",
+    "SupplierID" : 4,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 200 ml jars",
+    "UnitPrice" : 31.0000,
+    "UnitsInStock" : 31,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 11,
+    "ProductName" : "Queso Cabrales",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "1 kg pkg.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 30,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 12,
+    "ProductName" : "Queso Manchego La Pastora",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 86,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 13,
+    "ProductName" : "Konbu",
+    "SupplierID" : 6,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "2 kg box",
+    "UnitPrice" : 6.0000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 14,
+    "ProductName" : "Tofu",
+    "SupplierID" : 6,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "40 - 100 g pkgs.",
+    "UnitPrice" : 23.2500,
+    "UnitsInStock" : 35,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 15,
+    "ProductName" : "Genen Shouyu",
+    "SupplierID" : 6,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 250 ml bottles",
+    "UnitPrice" : 15.5000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 16,
+    "ProductName" : "Pavlova",
+    "SupplierID" : 7,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "32 - 500 g boxes",
+    "UnitPrice" : 17.4500,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 17,
+    "ProductName" : "Alice Mutton",
+    "SupplierID" : 7,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "20 - 1 kg tins",
+    "UnitPrice" : 39.0000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 18,
+    "ProductName" : "Carnarvon Tigers",
+    "SupplierID" : 7,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "16 kg pkg.",
+    "UnitPrice" : 62.5000,
+    "UnitsInStock" : 42,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 19,
+    "ProductName" : "Teatime Chocolate Biscuits",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 12 pieces",
+    "UnitPrice" : 9.2000,
+    "UnitsInStock" : 25,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 20,
+    "ProductName" : "Sir Rodney's Marmalade",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "30 gift boxes",
+    "UnitPrice" : 81.0000,
+    "UnitsInStock" : 40,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 21,
+    "ProductName" : "Sir Rodney's Scones",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 pkgs. x 4 pieces",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 3,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 22,
+    "ProductName" : "Gustaf's Knäckebröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 500 g pkgs.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 104,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 23,
+    "ProductName" : "Tunnbröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "12 - 250 g pkgs.",
+    "UnitPrice" : 9.0000,
+    "UnitsInStock" : 61,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 24,
+    "ProductName" : "Guaraná Fantástica",
+    "SupplierID" : 10,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 355 ml cans",
+    "UnitPrice" : 4.5000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 25,
+    "ProductName" : "NuNuCa Nuß-Nougat-Creme",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "20 - 450 g glasses",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 26,
+    "ProductName" : "Gumbär Gummibärchen",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 250 g bags",
+    "UnitPrice" : 31.2300,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 27,
+    "ProductName" : "Schoggi Schokolade",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 100 g pieces",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 49,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 28,
+    "ProductName" : "Rössle Sauerkraut",
+    "SupplierID" : 12,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "25 - 825 g cans",
+    "UnitPrice" : 45.6000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 29,
+    "ProductName" : "Thüringer Rostbratwurst",
+    "SupplierID" : 12,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "50 bags x 30 sausgs.",
+    "UnitPrice" : 123.7900,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 30,
+    "ProductName" : "Nord-Ost Matjeshering",
+    "SupplierID" : 13,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "10 - 200 g glasses",
+    "UnitPrice" : 25.8900,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 31,
+    "ProductName" : "Gorgonzola Telino",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "12 - 100 g pkgs",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 32,
+    "ProductName" : "Mascarpone Fabioli",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 32.0000,
+    "UnitsInStock" : 9,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 33,
+    "ProductName" : "Geitost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "500 g",
+    "UnitPrice" : 2.5000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 34,
+    "ProductName" : "Sasquatch Ale",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 111,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 35,
+    "ProductName" : "Steeleye Stout",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 36,
+    "ProductName" : "Inlagd Sill",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 250 g  jars",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 37,
+    "ProductName" : "Gravad lax",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 500 g pkgs.",
+    "UnitPrice" : 26.0000,
+    "UnitsInStock" : 11,
+    "UnitsOnOrder" : 50,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 38,
+    "ProductName" : "Côte de Blaye",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 75 cl bottles",
+    "UnitPrice" : 263.5000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 39,
+    "ProductName" : "Chartreuse verte",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "750 cc per bottle",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 69,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 40,
+    "ProductName" : "Boston Crab Meat",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 4 oz tins",
+    "UnitPrice" : 18.4000,
+    "UnitsInStock" : 123,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 41,
+    "ProductName" : "Jack's New England Clam Chowder",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 12 oz cans",
+    "UnitPrice" : 9.6500,
+    "UnitsInStock" : 85,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 42,
+    "ProductName" : "Singaporean Hokkien Fried Mee",
+    "SupplierID" : 20,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "32 - 1 kg pkgs.",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 43,
+    "ProductName" : "Ipoh Coffee",
+    "SupplierID" : 20,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "16 - 500 g tins",
+    "UnitPrice" : 46.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 44,
+    "ProductName" : "Gula Malacca",
+    "SupplierID" : 20,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "20 - 2 kg bags",
+    "UnitPrice" : 19.4500,
+    "UnitsInStock" : 27,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 45,
+    "ProductName" : "Rogede sild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "1k pkg.",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 5,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 46,
+    "ProductName" : "Spegesild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "4 - 450 g glasses",
+    "UnitPrice" : 12.0000,
+    "UnitsInStock" : 95,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 47,
+    "ProductName" : "Zaanse koeken",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 - 4 oz boxes",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 48,
+    "ProductName" : "Chocolade",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 pkgs.",
+    "UnitPrice" : 12.7500,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 49,
+    "ProductName" : "Maxilaku",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 - 50 g pkgs.",
+    "UnitPrice" : 20.0000,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 60,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 50,
+    "ProductName" : "Valkoinen suklaa",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "12 - 100 g bars",
+    "UnitPrice" : 16.2500,
+    "UnitsInStock" : 65,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 51,
+    "ProductName" : "Manjimup Dried Apples",
+    "SupplierID" : 24,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "50 - 300 g pkgs.",
+    "UnitPrice" : 53.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 52,
+    "ProductName" : "Filo Mix",
+    "SupplierID" : 24,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "16 - 2 kg boxes",
+    "UnitPrice" : 7.0000,
+    "UnitsInStock" : 38,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 53,
+    "ProductName" : "Perth Pasties",
+    "SupplierID" : 24,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "48 pieces",
+    "UnitPrice" : 32.8000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 54,
+    "ProductName" : "Tourtière",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "16 pies",
+    "UnitPrice" : 7.4500,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 55,
+    "ProductName" : "Pâté chinois",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "24 boxes x 2 pies",
+    "UnitPrice" : 24.0000,
+    "UnitsInStock" : 115,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 56,
+    "ProductName" : "Gnocchi di nonna Alice",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 57,
+    "ProductName" : "Ravioli Angelo",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 19.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 58,
+    "ProductName" : "Escargots de Bourgogne",
+    "SupplierID" : 27,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 pieces",
+    "UnitPrice" : 13.2500,
+    "UnitsInStock" : 62,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 59,
+    "ProductName" : "Raclette Courdavault",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 55.0000,
+    "UnitsInStock" : 79,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 60,
+    "ProductName" : "Camembert Pierrot",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "15 - 300 g rounds",
+    "UnitPrice" : 34.0000,
+    "UnitsInStock" : 19,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 61,
+    "ProductName" : "Sirop d'érable",
+    "SupplierID" : 29,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 500 ml bottles",
+    "UnitPrice" : 28.5000,
+    "UnitsInStock" : 113,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 62,
+    "ProductName" : "Tarte au sucre",
+    "SupplierID" : 29,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "48 pies",
+    "UnitPrice" : 49.3000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 63,
+    "ProductName" : "Vegie-spread",
+    "SupplierID" : 7,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "15 - 625 g jars",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 64,
+    "ProductName" : "Wimmers gute Semmelknödel",
+    "SupplierID" : 12,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "20 bags x 4 pieces",
+    "UnitPrice" : 33.2500,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 80,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 65,
+    "ProductName" : "Louisiana Fiery Hot Pepper Sauce",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "32 - 8 oz bottles",
+    "UnitPrice" : 21.0500,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 66,
+    "ProductName" : "Louisiana Hot Spiced Okra",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 8 oz jars",
+    "UnitPrice" : 17.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 100,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 67,
+    "ProductName" : "Laughing Lumberjack Lager",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 52,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 68,
+    "ProductName" : "Scottish Longbreads",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 8 pieces",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 69,
+    "ProductName" : "Gudbrandsdalsost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 kg pkg.",
+    "UnitPrice" : 36.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 70,
+    "ProductName" : "Outback Lager",
+    "SupplierID" : 7,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 355 ml bottles",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 71,
+    "ProductName" : "Flotemysost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 21.5000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 72,
+    "ProductName" : "Mozzarella di Giovanni",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 34.8000,
+    "UnitsInStock" : 14,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 73,
+    "ProductName" : "Röd Kaviar",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 150 g jars",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 101,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 74,
+    "ProductName" : "Longlife Tofu",
+    "SupplierID" : 4,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 20,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 75,
+    "ProductName" : "Rhönbräu Klosterbier",
+    "SupplierID" : 12,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 0.5 l bottles",
+    "UnitPrice" : 7.7500,
+    "UnitsInStock" : 125,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 76,
+    "ProductName" : "Lakkalikööri",
+    "SupplierID" : 23,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "500 ml",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 57,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 77,
+    "ProductName" : "Original Frankfurter grüne Soße",
+    "SupplierID" : 12,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 boxes",
+    "UnitPrice" : 13.0000,
+    "UnitsInStock" : 32,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}]
diff --git a/vue-options-api-demos/grid/print/pageable/main.js b/vue-options-api-demos/grid/print/pageable/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/print/pageable/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/print/pageable/main.vue b/vue-options-api-demos/grid/print/pageable/main.vue
new file mode 100644
index 00000000..3446ab0b
--- /dev/null
+++ b/vue-options-api-demos/grid/print/pageable/main.vue
@@ -0,0 +1,150 @@
+<template>
+  <div>
+    <div class="example-config">
+      <div class="row">
+        <div class="col">
+          <KButton @click="print">Print Grid</KButton>
+        </div>
+      </div>
+    </div>
+    <Grid
+      :style="dimensions"
+      :data-items="result"
+      :pageable="pageable"
+      :skip="skip"
+      :take="take"
+      :total="total"
+      :columns="columns"
+      :scrollable="scrollable"
+      @pagechange="pageChangeHandler"
+      :loader="loader"
+    >
+    </Grid>
+  </div>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    Grid,
+    KButton,
+  },
+  data: function () {
+    return {
+      loader: false,
+      dataItems: [],
+      skip: 0,
+      take: 10,
+      columns: [
+        { field: 'ProductID' },
+        { field: 'ProductName', title: 'Product Name' },
+        { field: 'UnitPrice', title: 'Unit Price' },
+      ],
+      scrollable: 'scrollable',
+      isPrintState: false,
+      dimensions: {
+        height: '400px',
+        width: '800px',
+      },
+    };
+  },
+  computed: {
+    result() {
+      return this.isPrintState
+        ? this.dataItems
+        : this.dataItems.slice(this.skip, this.take + this.skip);
+    },
+    total() {
+      return this.dataItems ? this.dataItems.length : 0;
+    },
+    pageable() {
+      return this.isPrintState ? false : true;
+    },
+  },
+  methods: {
+    print() {
+      this.setPrintLayout();
+      setTimeout(() => {
+        window.print();
+        this.setNormalLayout();
+      });
+    },
+
+    setPrintLayout() {
+      this.isPrintState = true;
+      this.dimensions = {
+        height: '100%',
+        width: '100%',
+      };
+      this.scrollable = 'none';
+    },
+    setNormalLayout() {
+      this.isPrintState = false;
+      this.dimensions = {
+        height: '400px',
+        width: '800px',
+      };
+      this.scrollable = 'scrollable';
+    },
+    pageChangeHandler(event) {
+      this.loader = true;
+      // The idea behind using the following setTimeout method is to
+      // demonstrate how we can show a loader while fetching data.
+      // In a real-life scenarios with remote data binding, the 'loader'
+      // property should be updated before making a server request
+      // and after the request completes.
+      setTimeout(() => {
+        this.loader = false;
+        this.skip = event.page.skip;
+        this.take = event.page.take;
+      }, 300);
+    },
+    createRandomData(count) {
+      const productNames = [
+        'Chai',
+        'Chang',
+        'Syrup',
+        'Apple',
+        'Orange',
+        'Banana',
+        'Lemon',
+        'Pineapple',
+        'Tea',
+        'Milk',
+      ];
+      const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120];
+
+      return Array(count)
+        .fill({})
+        .map((_, idx) => ({
+          ProductID: idx + 1,
+          ProductName:
+            productNames[Math.floor(Math.random() * productNames.length)],
+          UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)],
+        }));
+    },
+  },
+  mounted() {
+    this.dataItems = this.createRandomData(100);
+  },
+};
+</script>
+<style>
+@media print {
+  * {
+    overflow: visible !important;
+    visibility: hidden;
+  }
+
+  .k-grid {
+    visibility: visible;
+    margin-top: -60px;
+  }
+
+  .k-grid * {
+    visibility: visible;
+  }
+}
+</style>
diff --git a/vue-options-api-demos/grid/print/scrollable-controlled/main.js b/vue-options-api-demos/grid/print/scrollable-controlled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/print/scrollable-controlled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/print/scrollable-controlled/main.vue b/vue-options-api-demos/grid/print/scrollable-controlled/main.vue
new file mode 100644
index 00000000..30a3b8ab
--- /dev/null
+++ b/vue-options-api-demos/grid/print/scrollable-controlled/main.vue
@@ -0,0 +1,158 @@
+<template>
+  <div>
+    <div class="example-config">
+      <div class="row">
+        <div>
+          <h5>Select Columns to Print</h5>
+          <div v-for="(column, index) in columns" class="col-xs-12 example-col">
+            <KCheckbox
+              :id="column.field"
+              :name="column.field"
+              :defaultChecked="!column.hidden"
+              :label="column.title"
+              @change="onChange"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="example-config">
+      <div class="row">
+        <div class="col">
+          <KButton @click="print">Print Grid</KButton>
+        </div>
+      </div>
+    </div>
+    <Grid
+      :style="dimensions"
+      :data-items="dataItems"
+      :columns="columns"
+      :scrollable="scrollable"
+    >
+    </Grid>
+  </div>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import { Checkbox as KCheckbox } from '@progress/kendo-vue-inputs';
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+import products from './products.json';
+
+export default {
+  components: {
+    Grid,
+    KButton,
+    KCheckbox,
+  },
+  data() {
+    return {
+      loader: false,
+      dataItems: [],
+      printState: false,
+      columnsToPrint: [],
+      defaultColumns: [
+        { field: 'ProductID', title: 'ID', hidden: false, width: '250px' },
+        {
+          field: 'ProductName',
+          title: 'Product Name',
+          hidden: false,
+          width: '250px',
+        },
+        {
+          field: 'UnitPrice',
+          title: 'Unit Price',
+          hidden: false,
+          width: '250px',
+        },
+        {
+          field: 'Discontinued',
+          title: 'Discontinued',
+          hidden: false,
+          width: '250px',
+        },
+        {
+          field: 'QuantityPerUnit',
+          title: 'QuantityPerUnit',
+          hidden: false,
+          width: '250px',
+        },
+        {
+          field: 'Category.CategoryName',
+          title: 'CategoryName',
+          hidden: false,
+          width: '250px',
+        },
+      ],
+      scrollable: 'scrollable',
+      dimensions: {
+        height: '400px',
+        width: '800px',
+      },
+    };
+  },
+  methods: {
+    print() {
+      this.setPrintLayout();
+      setTimeout(() => {
+        window.print();
+        this.setNormalLayout();
+      });
+    },
+
+    setPrintLayout() {
+      this.printState = true;
+      this.dimensions = {
+        height: '100%',
+        width: '100%',
+      };
+      this.scrollable = 'none';
+    },
+    setNormalLayout() {
+      this.printState = false;
+      this.dimensions = {
+        height: '400px',
+        width: '800px',
+      };
+      this.scrollable = 'scrollable';
+    },
+    onChange(event) {
+      const field = event.e.target.name;
+      this.columnsToPrint = this.columnsToPrint.map((column) => {
+        if (column.field === field) {
+          return {
+            ...column,
+            hidden: !column.hidden,
+          };
+        }
+        return column;
+      });
+    },
+  },
+  mounted() {
+    this.dataItems = products;
+    this.columnsToPrint = this.columns;
+  },
+  computed: {
+    columns() {
+      return this.printState ? this.columnsToPrint : this.defaultColumns;
+    },
+  },
+};
+</script>
+<style>
+@media print {
+  * {
+    overflow: visible !important;
+    visibility: hidden;
+  }
+
+  .k-grid {
+    visibility: visible;
+    margin-top: -200px;
+  }
+
+  .k-grid * {
+    visibility: visible;
+  }
+}
+</style>
diff --git a/vue-options-api-demos/grid/print/scrollable-controlled/products.json b/vue-options-api-demos/grid/print/scrollable-controlled/products.json
new file mode 100644
index 00000000..4df1c408
--- /dev/null
+++ b/vue-options-api-demos/grid/print/scrollable-controlled/products.json
@@ -0,0 +1,1233 @@
+[{
+    "ProductID" : 1,
+    "ProductName" : "Chai",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "10 boxes x 20 bags",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 2,
+    "ProductName" : "Chang",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 3,
+    "ProductName" : "Aniseed Syrup",
+    "SupplierID" : 1,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 550 ml bottles",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 13,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 4,
+    "ProductName" : "Chef Anton's Cajun Seasoning",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "48 - 6 oz jars",
+    "UnitPrice" : 22.0000,
+    "UnitsInStock" : 53,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 5,
+    "ProductName" : "Chef Anton's Gumbo Mix",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "36 boxes",
+    "UnitPrice" : 21.3500,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 6,
+    "ProductName" : "Grandma's Boysenberry Spread",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 8 oz jars",
+    "UnitPrice" : 25.0000,
+    "UnitsInStock" : 120,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 7,
+    "ProductName" : "Uncle Bob's Organic Dried Pears",
+    "SupplierID" : 3,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "12 - 1 lb pkgs.",
+    "UnitPrice" : 30.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 8,
+    "ProductName" : "Northwoods Cranberry Sauce",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 12 oz jars",
+    "UnitPrice" : 40.0000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 9,
+    "ProductName" : "Mishi Kobe Niku",
+    "SupplierID" : 4,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "18 - 500 g pkgs.",
+    "UnitPrice" : 97.0000,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 10,
+    "ProductName" : "Ikura",
+    "SupplierID" : 4,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 200 ml jars",
+    "UnitPrice" : 31.0000,
+    "UnitsInStock" : 31,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 11,
+    "ProductName" : "Queso Cabrales",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "1 kg pkg.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 30,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 12,
+    "ProductName" : "Queso Manchego La Pastora",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 86,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 13,
+    "ProductName" : "Konbu",
+    "SupplierID" : 6,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "2 kg box",
+    "UnitPrice" : 6.0000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 14,
+    "ProductName" : "Tofu",
+    "SupplierID" : 6,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "40 - 100 g pkgs.",
+    "UnitPrice" : 23.2500,
+    "UnitsInStock" : 35,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 15,
+    "ProductName" : "Genen Shouyu",
+    "SupplierID" : 6,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 250 ml bottles",
+    "UnitPrice" : 15.5000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 16,
+    "ProductName" : "Pavlova",
+    "SupplierID" : 7,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "32 - 500 g boxes",
+    "UnitPrice" : 17.4500,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 17,
+    "ProductName" : "Alice Mutton",
+    "SupplierID" : 7,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "20 - 1 kg tins",
+    "UnitPrice" : 39.0000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 18,
+    "ProductName" : "Carnarvon Tigers",
+    "SupplierID" : 7,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "16 kg pkg.",
+    "UnitPrice" : 62.5000,
+    "UnitsInStock" : 42,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 19,
+    "ProductName" : "Teatime Chocolate Biscuits",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 12 pieces",
+    "UnitPrice" : 9.2000,
+    "UnitsInStock" : 25,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 20,
+    "ProductName" : "Sir Rodney's Marmalade",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "30 gift boxes",
+    "UnitPrice" : 81.0000,
+    "UnitsInStock" : 40,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 21,
+    "ProductName" : "Sir Rodney's Scones",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 pkgs. x 4 pieces",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 3,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 22,
+    "ProductName" : "Gustaf's Knäckebröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 500 g pkgs.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 104,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 23,
+    "ProductName" : "Tunnbröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "12 - 250 g pkgs.",
+    "UnitPrice" : 9.0000,
+    "UnitsInStock" : 61,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 24,
+    "ProductName" : "Guaraná Fantástica",
+    "SupplierID" : 10,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 355 ml cans",
+    "UnitPrice" : 4.5000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 25,
+    "ProductName" : "NuNuCa Nuß-Nougat-Creme",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "20 - 450 g glasses",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 26,
+    "ProductName" : "Gumbär Gummibärchen",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 250 g bags",
+    "UnitPrice" : 31.2300,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 27,
+    "ProductName" : "Schoggi Schokolade",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 100 g pieces",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 49,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 28,
+    "ProductName" : "Rössle Sauerkraut",
+    "SupplierID" : 12,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "25 - 825 g cans",
+    "UnitPrice" : 45.6000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 29,
+    "ProductName" : "Thüringer Rostbratwurst",
+    "SupplierID" : 12,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "50 bags x 30 sausgs.",
+    "UnitPrice" : 123.7900,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 30,
+    "ProductName" : "Nord-Ost Matjeshering",
+    "SupplierID" : 13,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "10 - 200 g glasses",
+    "UnitPrice" : 25.8900,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 31,
+    "ProductName" : "Gorgonzola Telino",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "12 - 100 g pkgs",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 32,
+    "ProductName" : "Mascarpone Fabioli",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 32.0000,
+    "UnitsInStock" : 9,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 33,
+    "ProductName" : "Geitost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "500 g",
+    "UnitPrice" : 2.5000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 34,
+    "ProductName" : "Sasquatch Ale",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 111,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 35,
+    "ProductName" : "Steeleye Stout",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 36,
+    "ProductName" : "Inlagd Sill",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 250 g  jars",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 37,
+    "ProductName" : "Gravad lax",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 500 g pkgs.",
+    "UnitPrice" : 26.0000,
+    "UnitsInStock" : 11,
+    "UnitsOnOrder" : 50,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 38,
+    "ProductName" : "Côte de Blaye",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 75 cl bottles",
+    "UnitPrice" : 263.5000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 39,
+    "ProductName" : "Chartreuse verte",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "750 cc per bottle",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 69,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 40,
+    "ProductName" : "Boston Crab Meat",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 4 oz tins",
+    "UnitPrice" : 18.4000,
+    "UnitsInStock" : 123,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 41,
+    "ProductName" : "Jack's New England Clam Chowder",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 12 oz cans",
+    "UnitPrice" : 9.6500,
+    "UnitsInStock" : 85,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 42,
+    "ProductName" : "Singaporean Hokkien Fried Mee",
+    "SupplierID" : 20,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "32 - 1 kg pkgs.",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 43,
+    "ProductName" : "Ipoh Coffee",
+    "SupplierID" : 20,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "16 - 500 g tins",
+    "UnitPrice" : 46.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 44,
+    "ProductName" : "Gula Malacca",
+    "SupplierID" : 20,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "20 - 2 kg bags",
+    "UnitPrice" : 19.4500,
+    "UnitsInStock" : 27,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 45,
+    "ProductName" : "Rogede sild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "1k pkg.",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 5,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 46,
+    "ProductName" : "Spegesild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "4 - 450 g glasses",
+    "UnitPrice" : 12.0000,
+    "UnitsInStock" : 95,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 47,
+    "ProductName" : "Zaanse koeken",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 - 4 oz boxes",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 48,
+    "ProductName" : "Chocolade",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 pkgs.",
+    "UnitPrice" : 12.7500,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 49,
+    "ProductName" : "Maxilaku",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 - 50 g pkgs.",
+    "UnitPrice" : 20.0000,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 60,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 50,
+    "ProductName" : "Valkoinen suklaa",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "12 - 100 g bars",
+    "UnitPrice" : 16.2500,
+    "UnitsInStock" : 65,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 51,
+    "ProductName" : "Manjimup Dried Apples",
+    "SupplierID" : 24,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "50 - 300 g pkgs.",
+    "UnitPrice" : 53.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 52,
+    "ProductName" : "Filo Mix",
+    "SupplierID" : 24,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "16 - 2 kg boxes",
+    "UnitPrice" : 7.0000,
+    "UnitsInStock" : 38,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 53,
+    "ProductName" : "Perth Pasties",
+    "SupplierID" : 24,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "48 pieces",
+    "UnitPrice" : 32.8000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 54,
+    "ProductName" : "Tourtière",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "16 pies",
+    "UnitPrice" : 7.4500,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 55,
+    "ProductName" : "Pâté chinois",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "24 boxes x 2 pies",
+    "UnitPrice" : 24.0000,
+    "UnitsInStock" : 115,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 56,
+    "ProductName" : "Gnocchi di nonna Alice",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 57,
+    "ProductName" : "Ravioli Angelo",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 19.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 58,
+    "ProductName" : "Escargots de Bourgogne",
+    "SupplierID" : 27,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 pieces",
+    "UnitPrice" : 13.2500,
+    "UnitsInStock" : 62,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 59,
+    "ProductName" : "Raclette Courdavault",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 55.0000,
+    "UnitsInStock" : 79,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 60,
+    "ProductName" : "Camembert Pierrot",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "15 - 300 g rounds",
+    "UnitPrice" : 34.0000,
+    "UnitsInStock" : 19,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 61,
+    "ProductName" : "Sirop d'érable",
+    "SupplierID" : 29,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 500 ml bottles",
+    "UnitPrice" : 28.5000,
+    "UnitsInStock" : 113,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 62,
+    "ProductName" : "Tarte au sucre",
+    "SupplierID" : 29,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "48 pies",
+    "UnitPrice" : 49.3000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 63,
+    "ProductName" : "Vegie-spread",
+    "SupplierID" : 7,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "15 - 625 g jars",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 64,
+    "ProductName" : "Wimmers gute Semmelknödel",
+    "SupplierID" : 12,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "20 bags x 4 pieces",
+    "UnitPrice" : 33.2500,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 80,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 65,
+    "ProductName" : "Louisiana Fiery Hot Pepper Sauce",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "32 - 8 oz bottles",
+    "UnitPrice" : 21.0500,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 66,
+    "ProductName" : "Louisiana Hot Spiced Okra",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 8 oz jars",
+    "UnitPrice" : 17.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 100,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 67,
+    "ProductName" : "Laughing Lumberjack Lager",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 52,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 68,
+    "ProductName" : "Scottish Longbreads",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 8 pieces",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 69,
+    "ProductName" : "Gudbrandsdalsost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 kg pkg.",
+    "UnitPrice" : 36.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 70,
+    "ProductName" : "Outback Lager",
+    "SupplierID" : 7,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 355 ml bottles",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 71,
+    "ProductName" : "Flotemysost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 21.5000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 72,
+    "ProductName" : "Mozzarella di Giovanni",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 34.8000,
+    "UnitsInStock" : 14,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 73,
+    "ProductName" : "Röd Kaviar",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 150 g jars",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 101,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 74,
+    "ProductName" : "Longlife Tofu",
+    "SupplierID" : 4,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 20,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 75,
+    "ProductName" : "Rhönbräu Klosterbier",
+    "SupplierID" : 12,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 0.5 l bottles",
+    "UnitPrice" : 7.7500,
+    "UnitsInStock" : 125,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 76,
+    "ProductName" : "Lakkalikööri",
+    "SupplierID" : 23,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "500 ml",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 57,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 77,
+    "ProductName" : "Original Frankfurter grüne Soße",
+    "SupplierID" : 12,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 boxes",
+    "UnitPrice" : 13.0000,
+    "UnitsInStock" : 32,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}]
diff --git a/vue-options-api-demos/grid/print/scrollable/main.js b/vue-options-api-demos/grid/print/scrollable/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/print/scrollable/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/print/scrollable/main.vue b/vue-options-api-demos/grid/print/scrollable/main.vue
new file mode 100644
index 00000000..99849aff
--- /dev/null
+++ b/vue-options-api-demos/grid/print/scrollable/main.vue
@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <div class="example-config">
+      <div class="row">
+        <div class="col">
+          <KButton @click="print">Print Grid</KButton>
+        </div>
+      </div>
+    </div>
+    <Grid
+      :style="dimensions"
+      :data-items="dataItems"
+      :columns="columns"
+      :scrollable="scrollable"
+    >
+    </Grid>
+  </div>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    Grid,
+    KButton,
+  },
+  data: function () {
+    return {
+      loader: false,
+      dataItems: [],
+      columns: [
+        { field: 'ProductID' },
+        { field: 'ProductName', title: 'Product Name' },
+        { field: 'UnitPrice', title: 'Unit Price' },
+      ],
+      scrollable: 'scrollable',
+      dimensions: {
+        height: '400px',
+        width: '800px',
+      },
+    };
+  },
+  methods: {
+    print() {
+      this.setPrintLayout();
+      setTimeout(() => {
+        window.print();
+        this.setNormalLayout();
+      });
+    },
+
+    setPrintLayout() {
+      this.dimensions = {
+        height: '100%',
+        width: '100%',
+      };
+      this.scrollable = 'none';
+    },
+    setNormalLayout() {
+      this.dimensions = {
+        height: '400px',
+        width: '800px',
+      };
+      this.scrollable = 'scrollable';
+    },
+    createRandomData(count) {
+      const productNames = [
+        'Chai',
+        'Chang',
+        'Syrup',
+        'Apple',
+        'Orange',
+        'Banana',
+        'Lemon',
+        'Pineapple',
+        'Tea',
+        'Milk',
+      ];
+      const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120];
+
+      return Array(count)
+        .fill({})
+        .map((_, idx) => ({
+          ProductID: idx + 1,
+          ProductName:
+            productNames[Math.floor(Math.random() * productNames.length)],
+          UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)],
+        }));
+    },
+  },
+  mounted() {
+    this.dataItems = this.createRandomData(100);
+  },
+};
+</script>
+<style>
+@media print {
+  * {
+    overflow: visible !important;
+    visibility: hidden;
+  }
+
+  .k-grid {
+    visibility: visible;
+    margin-top: -60px;
+  }
+
+  .k-grid * {
+    visibility: visible;
+  }
+}
+</style>
diff --git a/vue-options-api-demos/grid/responsive-columns/basic/main.js b/vue-options-api-demos/grid/responsive-columns/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/responsive-columns/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/responsive-columns/basic/main.vue b/vue-options-api-demos/grid/responsive-columns/basic/main.vue
new file mode 100644
index 00000000..0f91fd52
--- /dev/null
+++ b/vue-options-api-demos/grid/responsive-columns/basic/main.vue
@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <KButton @click="toggleProductNameVisibility"
+      >Toggle ProductName Visibility</KButton
+    >
+    <KButton @click="toggleCategoryNameVisibility"
+      >Toggle CategoryName Visibility</KButton
+    >
+    <Grid
+      :style="{ height: '400px' }"
+      :data-items="dataItems"
+      :columns="columns"
+    >
+    </Grid>
+  </div>
+</template>
+<script>
+import { Grid } from "@progress/kendo-vue-grid";
+import { Button as KButton } from "@progress/kendo-vue-buttons";
+import products from "./products.json";
+
+export default {
+  components: {
+    Grid,
+    KButton,
+  },
+  data: function () {
+    return {
+      dataItems: products,
+      isProductNameHidden: false,
+      isCategoryNameHidden: false,
+    };
+  },
+  computed: {
+    columns() {
+      return [
+        { field: "ProductID" },
+        {
+          field: "ProductName",
+          title: "Product Name",
+          hidden: this.isProductNameHidden,
+        },
+        {
+          field: "Category.CategoryName",
+          title: "Category Name",
+          hidden: this.isCategoryNameHidden,
+          // media: "(max-width: 500px)",
+        },
+        { field: "UnitPrice", title: "Unit Price" },
+        {
+          field: "UnitsInStock",
+          title: "In Stock",
+          media: "(max-width: 700px)",
+        },
+      ];
+    },
+  },
+  methods: {
+    toggleProductNameVisibility() {
+      this.isProductNameHidden = !this.isProductNameHidden;
+    },
+    toggleCategoryNameVisibility() {
+      this.isCategoryNameHidden = !this.isCategoryNameHidden;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/responsive-columns/basic/products.json b/vue-options-api-demos/grid/responsive-columns/basic/products.json
new file mode 100644
index 00000000..4df1c408
--- /dev/null
+++ b/vue-options-api-demos/grid/responsive-columns/basic/products.json
@@ -0,0 +1,1233 @@
+[{
+    "ProductID" : 1,
+    "ProductName" : "Chai",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "10 boxes x 20 bags",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 2,
+    "ProductName" : "Chang",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 3,
+    "ProductName" : "Aniseed Syrup",
+    "SupplierID" : 1,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 550 ml bottles",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 13,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 4,
+    "ProductName" : "Chef Anton's Cajun Seasoning",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "48 - 6 oz jars",
+    "UnitPrice" : 22.0000,
+    "UnitsInStock" : 53,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 5,
+    "ProductName" : "Chef Anton's Gumbo Mix",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "36 boxes",
+    "UnitPrice" : 21.3500,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 6,
+    "ProductName" : "Grandma's Boysenberry Spread",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 8 oz jars",
+    "UnitPrice" : 25.0000,
+    "UnitsInStock" : 120,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 7,
+    "ProductName" : "Uncle Bob's Organic Dried Pears",
+    "SupplierID" : 3,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "12 - 1 lb pkgs.",
+    "UnitPrice" : 30.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 8,
+    "ProductName" : "Northwoods Cranberry Sauce",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 12 oz jars",
+    "UnitPrice" : 40.0000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 9,
+    "ProductName" : "Mishi Kobe Niku",
+    "SupplierID" : 4,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "18 - 500 g pkgs.",
+    "UnitPrice" : 97.0000,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 10,
+    "ProductName" : "Ikura",
+    "SupplierID" : 4,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 200 ml jars",
+    "UnitPrice" : 31.0000,
+    "UnitsInStock" : 31,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 11,
+    "ProductName" : "Queso Cabrales",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "1 kg pkg.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 30,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 12,
+    "ProductName" : "Queso Manchego La Pastora",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 86,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 13,
+    "ProductName" : "Konbu",
+    "SupplierID" : 6,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "2 kg box",
+    "UnitPrice" : 6.0000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 14,
+    "ProductName" : "Tofu",
+    "SupplierID" : 6,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "40 - 100 g pkgs.",
+    "UnitPrice" : 23.2500,
+    "UnitsInStock" : 35,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 15,
+    "ProductName" : "Genen Shouyu",
+    "SupplierID" : 6,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 250 ml bottles",
+    "UnitPrice" : 15.5000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 16,
+    "ProductName" : "Pavlova",
+    "SupplierID" : 7,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "32 - 500 g boxes",
+    "UnitPrice" : 17.4500,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 17,
+    "ProductName" : "Alice Mutton",
+    "SupplierID" : 7,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "20 - 1 kg tins",
+    "UnitPrice" : 39.0000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 18,
+    "ProductName" : "Carnarvon Tigers",
+    "SupplierID" : 7,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "16 kg pkg.",
+    "UnitPrice" : 62.5000,
+    "UnitsInStock" : 42,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 19,
+    "ProductName" : "Teatime Chocolate Biscuits",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 12 pieces",
+    "UnitPrice" : 9.2000,
+    "UnitsInStock" : 25,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 20,
+    "ProductName" : "Sir Rodney's Marmalade",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "30 gift boxes",
+    "UnitPrice" : 81.0000,
+    "UnitsInStock" : 40,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 21,
+    "ProductName" : "Sir Rodney's Scones",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 pkgs. x 4 pieces",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 3,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 22,
+    "ProductName" : "Gustaf's Knäckebröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 500 g pkgs.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 104,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 23,
+    "ProductName" : "Tunnbröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "12 - 250 g pkgs.",
+    "UnitPrice" : 9.0000,
+    "UnitsInStock" : 61,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 24,
+    "ProductName" : "Guaraná Fantástica",
+    "SupplierID" : 10,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 355 ml cans",
+    "UnitPrice" : 4.5000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 25,
+    "ProductName" : "NuNuCa Nuß-Nougat-Creme",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "20 - 450 g glasses",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 26,
+    "ProductName" : "Gumbär Gummibärchen",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 250 g bags",
+    "UnitPrice" : 31.2300,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 27,
+    "ProductName" : "Schoggi Schokolade",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 100 g pieces",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 49,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 28,
+    "ProductName" : "Rössle Sauerkraut",
+    "SupplierID" : 12,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "25 - 825 g cans",
+    "UnitPrice" : 45.6000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 29,
+    "ProductName" : "Thüringer Rostbratwurst",
+    "SupplierID" : 12,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "50 bags x 30 sausgs.",
+    "UnitPrice" : 123.7900,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 30,
+    "ProductName" : "Nord-Ost Matjeshering",
+    "SupplierID" : 13,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "10 - 200 g glasses",
+    "UnitPrice" : 25.8900,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 31,
+    "ProductName" : "Gorgonzola Telino",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "12 - 100 g pkgs",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 32,
+    "ProductName" : "Mascarpone Fabioli",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 32.0000,
+    "UnitsInStock" : 9,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 33,
+    "ProductName" : "Geitost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "500 g",
+    "UnitPrice" : 2.5000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 34,
+    "ProductName" : "Sasquatch Ale",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 111,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 35,
+    "ProductName" : "Steeleye Stout",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 36,
+    "ProductName" : "Inlagd Sill",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 250 g  jars",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 37,
+    "ProductName" : "Gravad lax",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 500 g pkgs.",
+    "UnitPrice" : 26.0000,
+    "UnitsInStock" : 11,
+    "UnitsOnOrder" : 50,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 38,
+    "ProductName" : "Côte de Blaye",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 75 cl bottles",
+    "UnitPrice" : 263.5000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 39,
+    "ProductName" : "Chartreuse verte",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "750 cc per bottle",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 69,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 40,
+    "ProductName" : "Boston Crab Meat",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 4 oz tins",
+    "UnitPrice" : 18.4000,
+    "UnitsInStock" : 123,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 41,
+    "ProductName" : "Jack's New England Clam Chowder",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 12 oz cans",
+    "UnitPrice" : 9.6500,
+    "UnitsInStock" : 85,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 42,
+    "ProductName" : "Singaporean Hokkien Fried Mee",
+    "SupplierID" : 20,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "32 - 1 kg pkgs.",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 43,
+    "ProductName" : "Ipoh Coffee",
+    "SupplierID" : 20,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "16 - 500 g tins",
+    "UnitPrice" : 46.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 44,
+    "ProductName" : "Gula Malacca",
+    "SupplierID" : 20,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "20 - 2 kg bags",
+    "UnitPrice" : 19.4500,
+    "UnitsInStock" : 27,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 45,
+    "ProductName" : "Rogede sild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "1k pkg.",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 5,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 46,
+    "ProductName" : "Spegesild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "4 - 450 g glasses",
+    "UnitPrice" : 12.0000,
+    "UnitsInStock" : 95,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 47,
+    "ProductName" : "Zaanse koeken",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 - 4 oz boxes",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 48,
+    "ProductName" : "Chocolade",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 pkgs.",
+    "UnitPrice" : 12.7500,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 49,
+    "ProductName" : "Maxilaku",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 - 50 g pkgs.",
+    "UnitPrice" : 20.0000,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 60,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 50,
+    "ProductName" : "Valkoinen suklaa",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "12 - 100 g bars",
+    "UnitPrice" : 16.2500,
+    "UnitsInStock" : 65,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 51,
+    "ProductName" : "Manjimup Dried Apples",
+    "SupplierID" : 24,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "50 - 300 g pkgs.",
+    "UnitPrice" : 53.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 52,
+    "ProductName" : "Filo Mix",
+    "SupplierID" : 24,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "16 - 2 kg boxes",
+    "UnitPrice" : 7.0000,
+    "UnitsInStock" : 38,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 53,
+    "ProductName" : "Perth Pasties",
+    "SupplierID" : 24,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "48 pieces",
+    "UnitPrice" : 32.8000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 54,
+    "ProductName" : "Tourtière",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "16 pies",
+    "UnitPrice" : 7.4500,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 55,
+    "ProductName" : "Pâté chinois",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "24 boxes x 2 pies",
+    "UnitPrice" : 24.0000,
+    "UnitsInStock" : 115,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 56,
+    "ProductName" : "Gnocchi di nonna Alice",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 57,
+    "ProductName" : "Ravioli Angelo",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 19.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 58,
+    "ProductName" : "Escargots de Bourgogne",
+    "SupplierID" : 27,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 pieces",
+    "UnitPrice" : 13.2500,
+    "UnitsInStock" : 62,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 59,
+    "ProductName" : "Raclette Courdavault",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 55.0000,
+    "UnitsInStock" : 79,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 60,
+    "ProductName" : "Camembert Pierrot",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "15 - 300 g rounds",
+    "UnitPrice" : 34.0000,
+    "UnitsInStock" : 19,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 61,
+    "ProductName" : "Sirop d'érable",
+    "SupplierID" : 29,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 500 ml bottles",
+    "UnitPrice" : 28.5000,
+    "UnitsInStock" : 113,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 62,
+    "ProductName" : "Tarte au sucre",
+    "SupplierID" : 29,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "48 pies",
+    "UnitPrice" : 49.3000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 63,
+    "ProductName" : "Vegie-spread",
+    "SupplierID" : 7,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "15 - 625 g jars",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 64,
+    "ProductName" : "Wimmers gute Semmelknödel",
+    "SupplierID" : 12,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "20 bags x 4 pieces",
+    "UnitPrice" : 33.2500,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 80,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 65,
+    "ProductName" : "Louisiana Fiery Hot Pepper Sauce",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "32 - 8 oz bottles",
+    "UnitPrice" : 21.0500,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 66,
+    "ProductName" : "Louisiana Hot Spiced Okra",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 8 oz jars",
+    "UnitPrice" : 17.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 100,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 67,
+    "ProductName" : "Laughing Lumberjack Lager",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 52,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 68,
+    "ProductName" : "Scottish Longbreads",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 8 pieces",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 69,
+    "ProductName" : "Gudbrandsdalsost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 kg pkg.",
+    "UnitPrice" : 36.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 70,
+    "ProductName" : "Outback Lager",
+    "SupplierID" : 7,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 355 ml bottles",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 71,
+    "ProductName" : "Flotemysost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 21.5000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 72,
+    "ProductName" : "Mozzarella di Giovanni",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 34.8000,
+    "UnitsInStock" : 14,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 73,
+    "ProductName" : "Röd Kaviar",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 150 g jars",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 101,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 74,
+    "ProductName" : "Longlife Tofu",
+    "SupplierID" : 4,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 20,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 75,
+    "ProductName" : "Rhönbräu Klosterbier",
+    "SupplierID" : 12,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 0.5 l bottles",
+    "UnitPrice" : 7.7500,
+    "UnitsInStock" : 125,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 76,
+    "ProductName" : "Lakkalikööri",
+    "SupplierID" : 23,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "500 ml",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 57,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 77,
+    "ProductName" : "Original Frankfurter grüne Soße",
+    "SupplierID" : 12,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 boxes",
+    "UnitPrice" : 13.0000,
+    "UnitsInStock" : 32,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}]
diff --git a/vue-options-api-demos/grid/responsive-columns/column-virtualization/main.js b/vue-options-api-demos/grid/responsive-columns/column-virtualization/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/responsive-columns/column-virtualization/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/responsive-columns/column-virtualization/main.vue b/vue-options-api-demos/grid/responsive-columns/column-virtualization/main.vue
new file mode 100644
index 00000000..0871449d
--- /dev/null
+++ b/vue-options-api-demos/grid/responsive-columns/column-virtualization/main.vue
@@ -0,0 +1,68 @@
+<template>
+  <Grid
+    :style="{ width: '620px', height: '400px' }"
+    :scrollable="'virtual'"
+    :column-virtualization="true"
+    :skip="skip"
+    :take="take"
+    :total="numberOfRows"
+    :data-items="products"
+    :columns="columns"
+    @pagechange="pageChange"
+  >
+  </Grid>
+</template>
+<script>
+import { Grid } from "@progress/kendo-vue-grid";
+
+export default {
+  components: {
+    Grid: Grid,
+  },
+  created() {
+    this.numberOfColumns = 100;
+    this.numberOfRows = 100000;
+    this.columns = this.getColumns();
+    this.products = this.tempProducts = this.getData(this.skip, this.take);
+  },
+  data: function () {
+    return {
+      tempProducts: [],
+      products: [],
+      columns: [],
+      skip: 0,
+      take: 15,
+    };
+  },
+  methods: {
+    getColumns() {
+      const cols = [];
+      for (let c = 1; c <= this.numberOfColumns; c++) {
+        cols.push({
+          field: "Field-" + c.toString(),
+          width: 150,
+          hidden: c % 2 === 1 ? true : false,
+          media: c === 6 ? "(min-width: 800px)" : undefined,
+        });
+      }
+      return cols;
+    },
+    pageChange(event) {
+      this.skip = event.page.skip;
+      this.take = event.page.take;
+      this.products = this.getData(event.page.skip, event.page.take);
+    },
+    getData(skip, take) {
+      const page = [];
+      for (let r = skip + 1; r <= skip + take && r <= this.numberOfRows; r++) {
+        const row = {};
+        for (let c = 1; c <= this.numberOfColumns; c++) {
+          row["Field-" + c] = "R" + r + ":C" + c;
+        }
+        page.push(row);
+      }
+      return page;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/responsive-columns/height/main.js b/vue-options-api-demos/grid/responsive-columns/height/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/responsive-columns/height/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/responsive-columns/height/main.vue b/vue-options-api-demos/grid/responsive-columns/height/main.vue
new file mode 100644
index 00000000..bec031cf
--- /dev/null
+++ b/vue-options-api-demos/grid/responsive-columns/height/main.vue
@@ -0,0 +1,68 @@
+<template>
+  <Grid style="height: 440px;"
+            :data-items="items"
+            :columns="columns"
+            :total="numberOfItems"
+            :row-height="40"
+            :skip="skip"
+            :page-size="20"
+            :scrollable="'virtual'"
+            @pagechange="pageChange">
+    </Grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+
+export default {
+    components: {
+        'Grid': Grid
+    },
+     data: function () {
+        return {
+            dataItems: [],
+            items: [],
+            numberOfItems: 50000,
+            columns: [
+                { field: 'id', title: 'ID', width: '70px'},
+                { field: 'firstName', title: 'First Name'},
+                { field: 'lastName', title: 'Last Name'},
+                { field: 'city', title: 'City', width: '120px'},
+                { field: 'title', title: 'Title', width: '200px'}
+            ],
+            skip: 0
+        };
+    },
+    created: function() {
+      this.dataItems = this.createRandomData(this.numberOfItems);
+      this.items = this.dataItems.slice(this.skip, this.skip + 20);
+    },
+    methods: {
+        pageChange(event) {
+            this.skip = event.page.skip;
+            this.items = this.dataItems.slice(this.skip, this.skip + 20);
+        },
+
+        /* Generating example data */
+        createRandomData(count) {
+            const firstNames = [ 'Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
+             'Michael', 'Robert', 'Laura', 'Anne', 'Nige' ],
+            lastNames = [ 'Davolio', 'Fuller', 'Leverling', 'Peacock',
+                'Buchanan', 'Suyama', 'King', 'Callahan', 'Dodsworth', 'White' ],
+            cities = [ 'Seattle', 'Tacoma', 'Kirkland', 'Redmond',
+                'London', 'Philadelphia', 'New York', 'Seattle', 'London', 'Boston' ],
+            titles = [ 'Accountant', 'Vice President, Sales', 'Sales Representative',
+            'Technical Support', 'Sales Manager', 'Web Designer',
+                'Software Developer' ];
+
+            return Array(count).fill({}).map((_, idx) => ({
+                id: idx + 1,
+                firstName: firstNames[Math.floor(Math.random() * firstNames.length)],
+                lastName: lastNames[Math.floor(Math.random() * lastNames.length)],
+                city: cities[Math.floor(Math.random() * cities.length)],
+                title: titles[Math.floor(Math.random() * titles.length)]
+            }));
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/responsive-columns/multicolumn-grid/main.js b/vue-options-api-demos/grid/responsive-columns/multicolumn-grid/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/responsive-columns/multicolumn-grid/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/responsive-columns/multicolumn-grid/main.vue b/vue-options-api-demos/grid/responsive-columns/multicolumn-grid/main.vue
new file mode 100644
index 00000000..9cbf0d7c
--- /dev/null
+++ b/vue-options-api-demos/grid/responsive-columns/multicolumn-grid/main.vue
@@ -0,0 +1,117 @@
+<template>
+  <KButton @click="toggleCategoryVisibility"
+    >Toggle Category Visibility</KButton
+  >
+  <KButton @click="toggleCategoryNameVisibility"
+    >Toggle CategoryName Visibility</KButton
+  >
+
+  <Grid
+    :style="{ height: '420px' }"
+    :data-items="products"
+    :resizable="true"
+    :reorderable="true"
+    @columnreorder="columnReorder"
+    :columns="columns"
+  >
+  </Grid>
+</template>
+<script>
+import { Grid } from "@progress/kendo-vue-grid";
+import { Button as KButton } from "@progress/kendo-vue-buttons";
+
+export default {
+  components: {
+    Grid,
+    KButton,
+  },
+  data: function () {
+    return {
+      products: this.createRandomData(500),
+      isCategoryHidden: false,
+      isCategoryNameHidden: false,
+    };
+  },
+
+  computed: {
+    columns() {
+      return [
+        { field: "ProductID", title: "ID", width: "40px", resizable: "false" },
+        {
+          title: "Product Information",
+          children: [
+            { field: "ProductName", title: "Name" },
+            {
+              title: "Unit",
+              children: [
+                {
+                  field: "UnitPrice",
+                  title: "Price",
+                  media: "(max-width: 650px)",
+                },
+                { field: "UnitsInStock", title: "In stock" },
+              ],
+            },
+          ],
+        },
+        {
+          title: "Category",
+          hidden: this.isCategoryHidden,
+          media: "(min-width: 1000px)",
+          children: [
+            {
+              field: "Category.CategoryName",
+              media: "(min-width: 1000px)",
+              hidden: this.isCategoryHidden || this.isCategoryNameHidden,
+            },
+            {
+              field: "Category.Description",
+              hidden: this.isCategoryHidden,
+              media: "(min-width: 1000px)",
+            },
+          ],
+        },
+      ];
+    },
+  },
+  methods: {
+    toggleCategoryVisibility() {
+      this.isCategoryHidden = !this.isCategoryHidden;
+    },
+    toggleCategoryNameVisibility() {
+      this.isCategoryNameHidden = !this.isCategoryNameHidden;
+    },
+    columnReorder: function (options) {
+      this.columns = options.columns;
+    },
+    createRandomData(count) {
+      const productNames = [
+        "Aniseed Syrup",
+        "Chef Anton's Cajun Seasoning",
+        "Chef Anton's Gumbo Mix",
+        "Grandma's Boysenberry Spread",
+        "Uncle Bob's Organic Dried Pears",
+        "Northwoods Cranberry Sauce",
+        "Mishi Kobe Niku",
+      ];
+      const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120];
+      const units = [5, 1, 54, 555, 16, 293, 654, 42, 89, 90, 32, 293, 412];
+
+      return Array(count)
+        .fill({})
+        .map((_, idx) => ({
+          ProductID: idx + 1,
+          ProductName:
+            productNames[Math.floor(Math.random() * productNames.length)],
+          UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)],
+          UnitsInStock: units[Math.floor(Math.random() * units.length)],
+          Category: {
+            CategoryName:
+              productNames[Math.floor(Math.random() * productNames.length)],
+            Description: "Category Description",
+          },
+        }));
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/rowreorder/component/CustomCell.vue b/vue-options-api-demos/grid/rowreorder/component/CustomCell.vue
new file mode 100644
index 00000000..5974d9a0
--- /dev/null
+++ b/vue-options-api-demos/grid/rowreorder/component/CustomCell.vue
@@ -0,0 +1,92 @@
+<template>
+  <Draggable
+    v-if="field === 'reorder'"
+    @press="onPress"
+    @drag="onDrag"
+    @release="onRelease"
+    ref="draggable"
+  >
+    <td :data-itemid="dataItem.ProductID">
+      <span
+        :style="{
+          cursor: 'move',
+        }"
+        data-drag-handle="true"
+      >
+        <SvgIcon
+          :style="{
+            pointerEvents: 'none',
+          }"
+          :icon="reorderIcon"
+        />
+      </span>
+    </td>
+  </Draggable>
+  <td v-else :data-itemid="dataItem.ProductID">
+    {{ getNestedValue(field, dataItem) }}
+  </td>
+</template>
+<script>
+import { Draggable, SvgIcon } from '@progress/kendo-vue-common';
+import { reorderIcon } from '@progress/kendo-svg-icons';
+export default {
+  emits: {
+    pressHandler: null,
+    dragHandler: null,
+    releaseHandler: null,
+  },
+  components: {
+    Draggable,
+    SvgIcon,
+  },
+  props: {
+    field: String,
+    dataItem: Object,
+  },
+  data() {
+    return {
+      isDragged: false,
+      reorderIcon,
+    };
+  },
+  methods: {
+    getNestedValue: function (fieldName, dataItem) {
+      const path = fieldName.split('.');
+      let data = dataItem;
+      path.forEach((p) => {
+        data = data ? data[p] : undefined;
+      });
+      return data;
+    },
+    onPress(event) {
+      const element = this.$refs.draggable && this.$refs.draggable.element;
+      if (!event.isTouch) {
+        event.originalEvent.preventDefault();
+      }
+      this.isDragged = true;
+      if (element) {
+        this.$emit('pressHandler', this.$props.dataItem, event, element);
+      }
+    },
+    onDrag(event) {
+      document.getElementsByTagName('body')[0].style.cursor = 'move';
+      const element = this.$refs.draggable && this.$refs.draggable.element;
+      if (!event.isTouch) {
+        event.originalEvent.preventDefault();
+      }
+      event.originalEvent.stopPropagation();
+      if (element) {
+        this.$emit('dragHandler', this.$props.dataItem, event, element);
+      }
+    },
+    onRelease(event) {
+      document.getElementsByTagName('body')[0].style.cursor = 'default';
+      const element = this.$refs.draggable && this.$refs.draggable.element;
+      this.isDragged = false;
+      if (element) {
+        this.$emit('releaseHandler', this.$props.dataItem, event, element);
+      }
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/rowreorder/component/DragClue.vue b/vue-options-api-demos/grid/rowreorder/component/DragClue.vue
new file mode 100644
index 00000000..3d2f4f46
--- /dev/null
+++ b/vue-options-api-demos/grid/rowreorder/component/DragClue.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class="k-grid"  :style="{
+                        display: 'block',
+                        position: 'absolute',
+                        zIndex: 20000,
+                        padding: '8px 12px',
+                        top: top + 'px',
+                        left: left + 'px'
+                    }" >
+    <table class="k-grid-table">
+        <tbody>
+            <tr>
+                <td class="k-master-row k-alt" >
+                    <span :class="hintIcon"
+                            style="cursor: 'move'">
+                    </span>
+                </td>
+                <td  class="k-master-row k-alt">
+                {{ dataItem.ProductID }}
+                </td>
+                <td  class="k-master-row k-alt">
+                {{ dataItem.ProductName }}
+                </td>
+                <td class="k-master-row k-alt" >
+                {{ dataItem.UnitPrice }}
+                </td>
+            </tr>
+        </tbody>
+    </table>
+    </div>
+</template>
+<script>
+
+export default {
+  props: {
+    left: Number,
+    top: Number,
+    showContent: Boolean,
+    dataItem: {
+      type: Object,
+      default: {}
+    }
+  },
+  computed:{
+    hintIcon: function(){
+      return this.showContent? 'k-icon k-i-insert-middle' : 'k-icon k-i-cancel'
+    }
+  }
+}
+</script>
diff --git a/vue-options-api-demos/grid/rowreorder/component/DragPointer.vue b/vue-options-api-demos/grid/rowreorder/component/DragPointer.vue
new file mode 100644
index 00000000..8dccb927
--- /dev/null
+++ b/vue-options-api-demos/grid/rowreorder/component/DragPointer.vue
@@ -0,0 +1,15 @@
+<template>
+    <div class="k-drop-hint k-drop-hint-h" :style="{'position': 'absolute', 'z-index': 20000, 'top': targetTopOffset +'px', 'left': targetLeftOffset + 'px'}">          
+        <div class="k-drop-hint-start"></div>
+        <div class="k-drop-hint-line"></div>
+    </div>
+</template>
+<script>
+
+export default {
+  props: {
+    targetLeftOffset: Number,
+    targetTopOffset: Number,
+  }
+}
+</script>
diff --git a/vue-options-api-demos/grid/rowreorder/component/common.js b/vue-options-api-demos/grid/rowreorder/component/common.js
new file mode 100644
index 00000000..b218ca35
--- /dev/null
+++ b/vue-options-api-demos/grid/rowreorder/component/common.js
@@ -0,0 +1,84 @@
+export function reorderData(event, items, activeItem, dropPosition) {
+    const dropItemProductID = getDroppedProductID(event.originalEvent.target);
+    let reorderedData = items;
+
+    if (dropItemProductID) {
+        const activeItemIndex = reorderedData.findIndex(
+            i => i.ProductID === activeItem.ProductID
+        );
+        const hoveredItemIndex = reorderedData.findIndex(
+            i => i.ProductID === dropItemProductID
+        );
+
+        if (activeItemIndex !== hoveredItemIndex) {
+            reorderedData.splice(activeItemIndex, 1);
+
+            if (
+                dropPosition === 'above' &&
+                hoveredItemIndex !== 0 &&
+                hoveredItemIndex < activeItemIndex
+            ) {
+                reorderedData.splice(hoveredItemIndex, 0, {
+                    ...activeItem
+                });
+            } else if (dropPosition === 'above' && hoveredItemIndex === 0) {
+                reorderedData.unshift({ ...activeItem });
+            } else if (
+                dropPosition === 'above' &&
+                hoveredItemIndex !== 0 &&
+                hoveredItemIndex > activeItemIndex
+            ) {
+                reorderedData.splice(hoveredItemIndex - 1, 0, {
+                    ...activeItem
+                });
+            } else if (
+                dropPosition === 'below' &&
+                hoveredItemIndex !== 0 &&
+                hoveredItemIndex < activeItemIndex
+            ) {
+                reorderedData.splice(hoveredItemIndex + 1, 0, {
+                    ...activeItem
+                });
+            } else if (
+                dropPosition === 'below' &&
+                hoveredItemIndex !== 0 &&
+                hoveredItemIndex > activeItemIndex
+            ) {
+                reorderedData.splice(hoveredItemIndex, 0, {
+                    ...activeItem
+                });
+            }
+        }
+    }
+
+    return reorderedData;
+}
+
+export function getDroppedProductID(target) {
+    if (target.getAttribute('data-itemid')) {
+        return parseInt(target.getAttribute('data-itemid'), 10);
+    } else {
+        if (target.parentElement) {
+            return getDroppedProductID(target.parentElement);
+        } else {
+            return false;
+        }
+    }
+}
+
+export function getTargetTopOffSet(event) {
+    if (
+        event.originalEvent.target.className !== 'k-drop-hint-line' &&
+        event.originalEvent.target.className !== 'k-drop-hint k-drop-hint-h'
+    ) {
+        return event.offsetY >=
+            event.originalEvent.target.parentElement.clientHeight / 2
+            ? event.originalEvent.target.parentElement.offsetTop +
+            document.querySelector('.k-grid-header').offsetHeight +
+            document.querySelector('.k-grid').offsetTop +
+            event.originalEvent.target.parentElement.clientHeight
+            : event.originalEvent.target.parentElement.offsetTop +
+            document.querySelector('.k-grid-header').offsetHeight +
+            document.querySelector('.k-grid').offsetTop;
+    }
+}
diff --git a/vue-options-api-demos/grid/rowreorder/component/main.js b/vue-options-api-demos/grid/rowreorder/component/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/rowreorder/component/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/rowreorder/component/main.vue b/vue-options-api-demos/grid/rowreorder/component/main.vue
new file mode 100644
index 00000000..b7f5847e
--- /dev/null
+++ b/vue-options-api-demos/grid/rowreorder/component/main.vue
@@ -0,0 +1,116 @@
+<template>
+    <div>
+        <Grid
+                :data-items="items"
+                :columns="columns"
+                :cell-render="'myTemplate'"
+                :class="isDragging">
+            <template v-slot:myTemplate="{props}">
+                <custom  :data-item="props.dataItem" :field="props.field"
+                        @dragHandler="dragHandler"
+                        @pressHandler="pressHandler"
+                        @releaseHandler="releaseHandler"/>
+            </template>
+        </Grid>
+        <dragclue v-if="showDropHints"
+        :top="top" :left="left" :data-item="activeItem" :showContent="showDragClueContent" />
+        <dragpointer v-if="showDropHints && showDragClueContent" :targetLeftOffset="targetLeftOffset" :targetTopOffset="targetTopOffset"  />
+   </div>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import CustomCell from './CustomCell.vue';
+import DragClue from './DragClue.vue';
+import DragPointer from './DragPointer.vue';
+import { reorderData, getTargetTopOffSet  } from './common'
+
+export default {
+    components: {
+        'Grid': Grid,
+        'custom': CustomCell,
+        'dragclue': DragClue,
+        'dragpointer': DragPointer
+    },
+   data () {
+        return {
+            top: 0,
+            left: 0,
+            targetTopOffset: null,
+            targetLeftOffset: null,
+            showDropHints: false,
+            showDragClueContent: null,
+            dropPosition: '',
+            items: [],
+            columns: [
+                { field: 'reorder', title: '', width: '80px', title: 'Reorder' },
+                { field: 'ProductID'},
+                { field: 'ProductName', title: 'Product Name' },
+                { field: 'UnitPrice', title: 'Unit Price' }
+            ],
+            activeItem: {}
+        };
+    },
+    computed: {
+        isDragging() {
+            return {
+                'dragging': this.activeItem.ProductID
+            };
+        }
+    },
+    methods: {
+        createRandomData(count) {
+            const productNames = ['Chai', 'Chang', 'Syrup', 'Apple', 'Orange', 'Banana', 'Lemon', 'Pineapple', 'Tea', 'Milk'];
+            const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120]
+
+            return Array(count).fill({}).map((_, idx) => ({
+                ProductID: idx + 1,
+                ProductName: productNames[Math.floor(Math.random() * productNames.length)],
+                UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)]
+            }));
+        },
+        dragHandler(dataItem,  event) {
+            this.top = event.pageY + 10;
+            this.left = event.pageX;
+            this.targetLeftOffset = this.getGridReference().offsetLeft + this.getGridReference().offsetLeft/2;
+            this.targetTopOffset = getTargetTopOffSet(event);
+            this.dropPosition = this.getDropPosition(event)
+            this.showDropHints = true;
+        },
+        getDropPosition: function(event){
+            return this.dropPosition = event.offsetY >= event.originalEvent.target.parentElement.clientHeight/2? "below":"above";
+        },
+        pressHandler(dataItem) {
+          this.activeItem = dataItem;
+        },
+        releaseHandler(dataItem, event) {
+            this.showDropHints = false;
+            const reorderedData = reorderData(event, this.items, this.activeItem, this.dropPosition);
+            this.items = reorderedData;
+            this.activeItem = {};
+        },
+        gridMouseover(e) {
+             this.showDragClueContent = true;
+        },
+        gridMouseout(e){
+            this.showDragClueContent = false;
+        },
+        getGridReference(){
+            return document.querySelector(".k-grid");
+        }
+    },
+    mounted() {
+        this.items = this.createRandomData(10);
+
+        const gridBody = document.getElementsByClassName("k-grid-content")[0];
+        gridBody.addEventListener("mouseover", this.gridMouseover, false)
+        gridBody.addEventListener("mouseout", this.gridMouseout, false)
+    },
+    unmounted() {
+        const gridBody = document.getElementsByClassName("k-grid-content")[0];
+        gridBody.removeEventListener("mouseover", this.gridMouseover, false)
+        gridBody.removeEventListener("mouseout", this.gridMouseout, false)
+    }
+};
+
+</script>
+
diff --git a/vue-options-api-demos/grid/rowreorder/css/CustomCell.vue b/vue-options-api-demos/grid/rowreorder/css/CustomCell.vue
new file mode 100644
index 00000000..55291127
--- /dev/null
+++ b/vue-options-api-demos/grid/rowreorder/css/CustomCell.vue
@@ -0,0 +1,98 @@
+<template>
+  <Draggable
+    v-if="field === 'reorder'"
+    @press="onPress"
+    @drag="onDrag"
+    @release="onRelease"
+    ref="draggable"
+  >
+    <td :data-itemid="dataItem.ProductID" :class="tdClass">
+      <span class="k-icon k-i-reorder" :style="{ cursor: 'move' }">
+        <SvgIcon :icon="reorderIcon" />
+      </span>
+    </td>
+  </Draggable>
+  <td v-else :data-itemid="dataItem.ProductID" :class="tdClass">
+    {{ getNestedValue(field, dataItem) }}
+  </td>
+</template>
+<script>
+import { Draggable, SvgIcon } from '@progress/kendo-vue-common';
+import { reorderIcon } from '@progress/kendo-svg-icons';
+export default {
+  emits: {
+    pressHandler: null,
+    dragHandler: null,
+    releaseHandler: null,
+  },
+  components: {
+    Draggable,
+    SvgIcon,
+  },
+  props: {
+    field: String,
+    dataItem: Object,
+    dropPosition: String,
+  },
+  computed: {
+    tdClass: function () {
+      return this.dropPosition === 'above' ? 'above' : 'below';
+    },
+  },
+  data() {
+    return {
+      isDragged: false,
+      reorderIcon,
+    };
+  },
+  methods: {
+    getNestedValue: function (fieldName, dataItem) {
+      const path = fieldName.split('.');
+      let data = dataItem;
+      path.forEach((p) => {
+        data = data ? data[p] : undefined;
+      });
+      return data;
+    },
+    onPress(event) {
+      const element = this.$refs.draggable && this.$refs.draggable.element;
+      if (!event.isTouch) {
+        event.originalEvent.preventDefault();
+      }
+      this.isDragged = true;
+      if (element) {
+        this.$emit('pressHandler', this.$props.dataItem, event, element);
+      }
+    },
+    onDrag(event) {
+      document.getElementsByTagName('body')[0].style.cursor = 'move';
+      const element = this.$refs.draggable && this.$refs.draggable.element;
+      if (!event.isTouch) {
+        event.originalEvent.preventDefault();
+      }
+      event.originalEvent.stopPropagation();
+      if (element) {
+        this.$emit('dragHandler', this.$props.dataItem, event, element);
+      }
+    },
+    onRelease(event) {
+      document.getElementsByTagName('body')[0].style.cursor = 'default';
+      const element = this.$refs.draggable && this.$refs.draggable.element;
+      this.isDragged = false;
+      if (element) {
+        this.$emit('releaseHandler', this.$props.dataItem, event, element);
+      }
+    },
+  },
+};
+</script>
+<style scoped>
+html .k-grid.dragging tbody tr:hover td.below {
+  border-bottom-color: red;
+  border-bottom-width: 2px;
+}
+html .k-grid.dragging tbody tr:hover td.above {
+  border-top-color: red;
+  border-top-width: 2px;
+}
+</style>
diff --git a/vue-options-api-demos/grid/rowreorder/css/DragClue.vue b/vue-options-api-demos/grid/rowreorder/css/DragClue.vue
new file mode 100644
index 00000000..3d2f4f46
--- /dev/null
+++ b/vue-options-api-demos/grid/rowreorder/css/DragClue.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class="k-grid"  :style="{
+                        display: 'block',
+                        position: 'absolute',
+                        zIndex: 20000,
+                        padding: '8px 12px',
+                        top: top + 'px',
+                        left: left + 'px'
+                    }" >
+    <table class="k-grid-table">
+        <tbody>
+            <tr>
+                <td class="k-master-row k-alt" >
+                    <span :class="hintIcon"
+                            style="cursor: 'move'">
+                    </span>
+                </td>
+                <td  class="k-master-row k-alt">
+                {{ dataItem.ProductID }}
+                </td>
+                <td  class="k-master-row k-alt">
+                {{ dataItem.ProductName }}
+                </td>
+                <td class="k-master-row k-alt" >
+                {{ dataItem.UnitPrice }}
+                </td>
+            </tr>
+        </tbody>
+    </table>
+    </div>
+</template>
+<script>
+
+export default {
+  props: {
+    left: Number,
+    top: Number,
+    showContent: Boolean,
+    dataItem: {
+      type: Object,
+      default: {}
+    }
+  },
+  computed:{
+    hintIcon: function(){
+      return this.showContent? 'k-icon k-i-insert-middle' : 'k-icon k-i-cancel'
+    }
+  }
+}
+</script>
diff --git a/vue-options-api-demos/grid/rowreorder/css/common.js b/vue-options-api-demos/grid/rowreorder/css/common.js
new file mode 100644
index 00000000..b218ca35
--- /dev/null
+++ b/vue-options-api-demos/grid/rowreorder/css/common.js
@@ -0,0 +1,84 @@
+export function reorderData(event, items, activeItem, dropPosition) {
+    const dropItemProductID = getDroppedProductID(event.originalEvent.target);
+    let reorderedData = items;
+
+    if (dropItemProductID) {
+        const activeItemIndex = reorderedData.findIndex(
+            i => i.ProductID === activeItem.ProductID
+        );
+        const hoveredItemIndex = reorderedData.findIndex(
+            i => i.ProductID === dropItemProductID
+        );
+
+        if (activeItemIndex !== hoveredItemIndex) {
+            reorderedData.splice(activeItemIndex, 1);
+
+            if (
+                dropPosition === 'above' &&
+                hoveredItemIndex !== 0 &&
+                hoveredItemIndex < activeItemIndex
+            ) {
+                reorderedData.splice(hoveredItemIndex, 0, {
+                    ...activeItem
+                });
+            } else if (dropPosition === 'above' && hoveredItemIndex === 0) {
+                reorderedData.unshift({ ...activeItem });
+            } else if (
+                dropPosition === 'above' &&
+                hoveredItemIndex !== 0 &&
+                hoveredItemIndex > activeItemIndex
+            ) {
+                reorderedData.splice(hoveredItemIndex - 1, 0, {
+                    ...activeItem
+                });
+            } else if (
+                dropPosition === 'below' &&
+                hoveredItemIndex !== 0 &&
+                hoveredItemIndex < activeItemIndex
+            ) {
+                reorderedData.splice(hoveredItemIndex + 1, 0, {
+                    ...activeItem
+                });
+            } else if (
+                dropPosition === 'below' &&
+                hoveredItemIndex !== 0 &&
+                hoveredItemIndex > activeItemIndex
+            ) {
+                reorderedData.splice(hoveredItemIndex, 0, {
+                    ...activeItem
+                });
+            }
+        }
+    }
+
+    return reorderedData;
+}
+
+export function getDroppedProductID(target) {
+    if (target.getAttribute('data-itemid')) {
+        return parseInt(target.getAttribute('data-itemid'), 10);
+    } else {
+        if (target.parentElement) {
+            return getDroppedProductID(target.parentElement);
+        } else {
+            return false;
+        }
+    }
+}
+
+export function getTargetTopOffSet(event) {
+    if (
+        event.originalEvent.target.className !== 'k-drop-hint-line' &&
+        event.originalEvent.target.className !== 'k-drop-hint k-drop-hint-h'
+    ) {
+        return event.offsetY >=
+            event.originalEvent.target.parentElement.clientHeight / 2
+            ? event.originalEvent.target.parentElement.offsetTop +
+            document.querySelector('.k-grid-header').offsetHeight +
+            document.querySelector('.k-grid').offsetTop +
+            event.originalEvent.target.parentElement.clientHeight
+            : event.originalEvent.target.parentElement.offsetTop +
+            document.querySelector('.k-grid-header').offsetHeight +
+            document.querySelector('.k-grid').offsetTop;
+    }
+}
diff --git a/vue-options-api-demos/grid/rowreorder/css/main.js b/vue-options-api-demos/grid/rowreorder/css/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/rowreorder/css/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/rowreorder/css/main.vue b/vue-options-api-demos/grid/rowreorder/css/main.vue
new file mode 100644
index 00000000..c5b355eb
--- /dev/null
+++ b/vue-options-api-demos/grid/rowreorder/css/main.vue
@@ -0,0 +1,113 @@
+<template>
+    <div>
+        <Grid
+                :data-items="items"
+                :columns="columns"
+                :cell-render="'myTemplate'"
+                :class="isDragging">
+            <template v-slot:myTemplate="{props}">
+                <custom  :data-item="props.dataItem" :field="props.field" :dropPosition="dropPosition"
+                        @dragHandler="dragHandler"
+                        @pressHandler="pressHandler"
+                        @releaseHandler="releaseHandler"/>
+            </template>
+        </Grid>
+        <dragclue v-if="showDropHints"
+        :top="top" :left="left" :data-item="activeItem" :showContent="showDragClueContent" />
+   </div>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import CustomCell from './CustomCell.vue';
+import DragClue from './DragClue.vue';
+import { reorderData, getTargetTopOffSet  } from './common'
+
+export default {
+    components: {
+        'Grid': Grid,
+        'custom': CustomCell,
+        'dragclue': DragClue
+    },
+   data () {
+        return {
+            top: 0,
+            left: 0,
+            targetTopOffset: null,
+            targetLeftOffset: null,
+            showDropHints: false,
+            showDragClueContent: null,
+            dropPosition: '',
+            items: [],
+            columns: [
+                { field: 'reorder', title: '', width: '80px', title: 'Reorder' },
+                { field: 'ProductID'},
+                { field: 'ProductName', title: 'Product Name' },
+                { field: 'UnitPrice', title: 'Unit Price' }
+            ],
+            activeItem: {}
+        };
+    },
+    computed: {
+        isDragging() {
+            return {
+                'dragging': this.activeItem.ProductID
+            };
+        }
+    },
+    methods: {
+        createRandomData(count) {
+            const productNames = ['Chai', 'Chang', 'Syrup', 'Apple', 'Orange', 'Banana', 'Lemon', 'Pineapple', 'Tea', 'Milk'];
+            const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120]
+
+            return Array(count).fill({}).map((_, idx) => ({
+                ProductID: idx + 1,
+                ProductName: productNames[Math.floor(Math.random() * productNames.length)],
+                UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)]
+            }));
+        },
+        dragHandler(dataItem,  event) {
+            this.top = event.pageY + 10;
+            this.left = event.pageX;
+            this.targetLeftOffset = this.getGridReference().offsetLeft + this.getGridReference().offsetLeft/2;
+            this.targetTopOffset = getTargetTopOffSet(event);
+            this.dropPosition = this.getDropPosition(event)
+            this.showDropHints = true;
+        },
+        getDropPosition: function(event){
+            return this.dropPosition = event.offsetY >= event.originalEvent.target.parentElement.clientHeight/2? "below":"above";
+        },
+        pressHandler(dataItem) {
+          this.activeItem = dataItem;
+        },
+        releaseHandler(dataItem, event) {
+            this.showDropHints = false;
+            const reorderedData = reorderData(event, this.items, this.activeItem, this.dropPosition);
+            this.items = reorderedData;
+            this.activeItem = {};
+        },
+        gridMouseover(e) {
+             this.showDragClueContent = true;
+        },
+        gridMouseout(e){
+            this.showDragClueContent = false;
+        },
+        getGridReference(){
+            return document.querySelector(".k-grid");
+        }
+    },
+    mounted() {
+        this.items = this.createRandomData(10);
+
+        const gridBody = document.getElementsByClassName("k-grid-content")[0];
+        gridBody.addEventListener("mouseover", this.gridMouseover, false)
+        gridBody.addEventListener("mouseout", this.gridMouseout, false)
+    },
+    unmounted() {
+        const gridBody = document.getElementsByClassName("k-grid-content")[0];
+        gridBody.removeEventListener("mouseover", this.gridMouseover, false)
+        gridBody.removeEventListener("mouseout", this.gridMouseout, false)
+    }
+};
+
+</script>
+
diff --git a/vue-options-api-demos/grid/rows/sticky/main.js b/vue-options-api-demos/grid/rows/sticky/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/rows/sticky/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/rows/sticky/main.vue b/vue-options-api-demos/grid/rows/sticky/main.vue
new file mode 100644
index 00000000..e406a346
--- /dev/null
+++ b/vue-options-api-demos/grid/rows/sticky/main.vue
@@ -0,0 +1,185 @@
+<template>
+  <Grid
+    ref="grid"
+    :style="{ height: '440px' }"
+    :data-items="gridData"
+    :row-height="rowHeight"
+    :cell-render="'cellRenderTemplate'"
+    :columns="columns"
+  >
+    <template v-slot:cellRenderTemplate="{ props }">
+      <td
+        v-if="props.dataItem.locked || props.field === 'locked'"
+        :style="[
+          {
+            top: getTop(props.dataItem) + 'px',
+            bottom: getBottom(props.dataItem) + 'px',
+            'text-align': centerText(props.field),
+          },
+        ]"
+        :class="classNames(props.dataItem, props.className)"
+        @click="handleLockRowChange(props.dataItem) && props.field === 'locked'"
+      >
+        <SvgIcon
+          v-if="props.dataItem.locked && props.field === 'locked'"
+          :icon="pinIcon"
+        />
+        <SvgIcon
+          v-else-if="!props.dataItem.locked && props.field === 'locked'"
+          :icon="unpinIcon"
+        />
+        <span v-else> {{ getNestedValue(props.field, props.dataItem) }} </span>
+      </td>
+      <td v-else>
+        {{ getNestedValue(props.field, props.dataItem) }}
+      </td>
+    </template>
+  </Grid>
+</template>
+<script>
+import { Grid, GridToolbar, GridNoRecords } from '@progress/kendo-vue-grid';
+import { SvgIcon } from '@progress/kendo-vue-common';
+import { pinIcon, unpinIcon } from '@progress/kendo-svg-icons';
+import products from './products.json';
+import { Button } from '@progress/kendo-vue-buttons';
+import { process } from '@progress/kendo-data-query';
+import { filterBy } from '@progress/kendo-data-query';
+const ADJUST_PADDING = 4;
+const COLUMN_MIN = 4;
+let minGridWidth = 0;
+const columnsData = [
+  { field: 'locked', filterable: false, minWidth: 50 },
+  {
+    field: 'ProductID',
+    filterable: false,
+    editable: false,
+    title: 'ID',
+    minWidth: 45,
+  },
+  { field: 'ProductName', title: 'Name', minWidth: 350 },
+  {
+    field: 'UnitPrice',
+    filter: 'numeric',
+    title: 'Unit Price',
+    minWidth: 120,
+  },
+  {
+    field: 'UnitsInStock',
+    title: 'Units',
+    filter: 'numeric',
+    minWidth: 100,
+    editor: 'numeric',
+  },
+  {
+    field: 'Discontinued',
+    title: 'Discontinued',
+    editor: 'boolean',
+    minWidth: 150,
+  },
+];
+const filterDescriptorLocked = {
+  logic: 'and',
+  filters: [
+    {
+      field: 'locked',
+      operator: 'eq',
+      value: true,
+    },
+  ],
+};
+export default {
+  components: {
+    Grid: Grid,
+    'grid-toolbar': GridToolbar,
+    'grid-norecords': GridNoRecords,
+    kbutton: Button,
+    SvgIcon,
+  },
+  mounted() {
+    this.grid = document.querySelector('.k-grid');
+    window.addEventListener('resize', this.handleResize);
+    columnsData.map((item) => {
+      return (minGridWidth += item.minWidth);
+    });
+    this.gridCurrent = this.grid.offsetWidth;
+    this.setMinWidth = this.grid.offsetWidth < minGridWidth;
+    this.defineColumns();
+  },
+  data: function () {
+    return {
+      gridData: [],
+      allLockedRows: [],
+      rowHeight: 50,
+      columns: [],
+      setMinWidth: false,
+      gridCurrent: 0,
+      gridData: products,
+      pinIcon,
+      unpinIcon,
+    };
+  },
+  methods: {
+    handleLockRowChange(dataItem) {
+      let itemIndex = this.gridData.findIndex(
+        (item) => item.ProductID === dataItem.ProductID
+      );
+      let newData = [...this.gridData];
+      newData[itemIndex].locked = !newData[itemIndex].locked;
+      this.gridData = newData;
+      this.allLockedRows = filterBy(newData, filterDescriptorLocked);
+    },
+    getNestedValue(fieldName, dataItem) {
+      const path = fieldName.split('.');
+      let data = dataItem;
+      path.forEach((p) => {
+        data = data ? data[p] : undefined;
+      });
+      return data;
+    },
+    getTop(dataItem) {
+      const indexOfLockedItem = this.allLockedRows.findIndex(
+        (item) => dataItem.ProductID === item.ProductID
+      );
+      return indexOfLockedItem * this.rowHeight;
+    },
+    getBottom(dataItem) {
+      const indexOfLockedItem = this.allLockedRows.findIndex(
+        (item) => dataItem.ProductID === item.ProductID
+      );
+      const numberOfLockedRows = this.allLockedRows.length;
+      return (numberOfLockedRows - indexOfLockedItem - 1) * this.rowHeight;
+    },
+    classNames(dataItem, className) {
+      return dataItem.locked ? className + ' k-grid-row-sticky' : className;
+    },
+    centerText(field) {
+      return field === 'locked' ? 'center' : '';
+    },
+    defineColumns() {
+      this.columns = columnsData.map((column, index) => {
+        return {
+          field: column.field,
+          title: column.title,
+          width: this.setWidth(column.minWidth),
+        };
+      });
+    },
+    handleResize() {
+      if (this.grid.offsetWidth < minGridWidth && !this.setMinWidth) {
+        this.setMinWidth = true;
+      } else if (this.grid.offsetWidth > minGridWidth) {
+        this.gridCurrent = this.grid.offsetWidth;
+        this.setMinWidth = false;
+      }
+      this.defineColumns();
+    },
+    setWidth(minWidth) {
+      let width = this.setMinWidth
+        ? minWidth
+        : minWidth + (this.gridCurrent - minGridWidth) / this.columns.length;
+      width < COLUMN_MIN ? width : (width -= ADJUST_PADDING);
+      return width;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/rows/sticky/products.json b/vue-options-api-demos/grid/rows/sticky/products.json
new file mode 100644
index 00000000..5f03285c
--- /dev/null
+++ b/vue-options-api-demos/grid/rows/sticky/products.json
@@ -0,0 +1,1312 @@
+[
+    {
+      "ProductID": 1,
+      "ProductName": "Chai",
+      "SupplierID": 1,
+      "CategoryID": 1,
+      "QuantityPerUnit": "10 boxes x 20 bags",
+      "UnitPrice": 18.0,
+      "UnitsInStock": 39,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 10,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+      }
+    },
+    {
+      "ProductID": 2,
+      "ProductName": "Chang",
+      "SupplierID": 1,
+      "CategoryID": 1,
+      "QuantityPerUnit": "24 - 12 oz bottles",
+      "UnitPrice": 19.0,
+      "UnitsInStock": 17,
+      "UnitsOnOrder": 40,
+      "ReorderLevel": 25,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+      }
+    },
+    {
+      "ProductID": 3,
+      "ProductName": "Aniseed Syrup",
+      "SupplierID": 1,
+      "CategoryID": 2,
+      "QuantityPerUnit": "12 - 550 ml bottles",
+      "UnitPrice": 10.0,
+      "UnitsInStock": 13,
+      "UnitsOnOrder": 70,
+      "ReorderLevel": 25,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+      }
+    },
+    {
+      "ProductID": 4,
+      "ProductName": "Chef Anton's Cajun Seasoning",
+      "SupplierID": 2,
+      "CategoryID": 2,
+      "QuantityPerUnit": "48 - 6 oz jars",
+      "UnitPrice": 22.0,
+      "UnitsInStock": 53,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 0,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+      }
+    },
+    {
+      "ProductID": 5,
+      "ProductName": "Chef Anton's Gumbo Mix",
+      "SupplierID": 2,
+      "CategoryID": 2,
+      "QuantityPerUnit": "36 boxes",
+      "UnitPrice": 21.35,
+      "UnitsInStock": 0,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 0,
+      "Discontinued": true,
+      "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+      }
+    },
+    {
+      "ProductID": 6,
+      "ProductName": "Grandma's Boysenberry Spread",
+      "SupplierID": 3,
+      "CategoryID": 2,
+      "QuantityPerUnit": "12 - 8 oz jars",
+      "UnitPrice": 25.0,
+      "UnitsInStock": 120,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 25,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+      }
+    },
+    {
+      "ProductID": 7,
+      "ProductName": "Uncle Bob's Organic Dried Pears",
+      "SupplierID": 3,
+      "CategoryID": 7,
+      "QuantityPerUnit": "12 - 1 lb pkgs.",
+      "UnitPrice": 30.0,
+      "UnitsInStock": 15,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 10,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 7,
+        "CategoryName": "Produce",
+        "Description": "Dried fruit and bean curd"
+      }
+    },
+    {
+      "ProductID": 8,
+      "ProductName": "Northwoods Cranberry Sauce",
+      "SupplierID": 3,
+      "CategoryID": 2,
+      "QuantityPerUnit": "12 - 12 oz jars",
+      "UnitPrice": 40.0,
+      "UnitsInStock": 6,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 0,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+      }
+    },
+    {
+      "ProductID": 9,
+      "ProductName": "Mishi Kobe Niku",
+      "SupplierID": 4,
+      "CategoryID": 6,
+      "QuantityPerUnit": "18 - 500 g pkgs.",
+      "UnitPrice": 97.0,
+      "UnitsInStock": 29,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 0,
+      "Discontinued": true,
+      "Category": {
+        "CategoryID": 6,
+        "CategoryName": "Meat/Poultry",
+        "Description": "Prepared meats"
+      }
+    },
+    {
+      "ProductID": 10,
+      "ProductName": "Ikura",
+      "SupplierID": 4,
+      "CategoryID": 8,
+      "QuantityPerUnit": "12 - 200 ml jars",
+      "UnitPrice": 31.0,
+      "UnitsInStock": 31,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 0,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 8,
+        "CategoryName": "Seafood",
+        "Description": "Seaweed and fish"
+      }
+    },
+    {
+      "ProductID": 11,
+      "ProductName": "Queso Cabrales",
+      "SupplierID": 5,
+      "CategoryID": 4,
+      "QuantityPerUnit": "1 kg pkg.",
+      "UnitPrice": 21.0,
+      "UnitsInStock": 22,
+      "UnitsOnOrder": 30,
+      "ReorderLevel": 30,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 4,
+        "CategoryName": "Dairy Products",
+        "Description": "Cheeses"
+      }
+    },
+    {
+      "ProductID": 12,
+      "ProductName": "Queso Manchego La Pastora",
+      "SupplierID": 5,
+      "CategoryID": 4,
+      "QuantityPerUnit": "10 - 500 g pkgs.",
+      "UnitPrice": 38.0,
+      "UnitsInStock": 86,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 0,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 4,
+        "CategoryName": "Dairy Products",
+        "Description": "Cheeses"
+      }
+    },
+    {
+      "ProductID": 13,
+      "ProductName": "Konbu",
+      "SupplierID": 6,
+      "CategoryID": 8,
+      "QuantityPerUnit": "2 kg box",
+      "UnitPrice": 6.0,
+      "UnitsInStock": 24,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 5,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 8,
+        "CategoryName": "Seafood",
+        "Description": "Seaweed and fish"
+      }
+    },
+    {
+      "ProductID": 14,
+      "ProductName": "Tofu",
+      "SupplierID": 6,
+      "CategoryID": 7,
+      "QuantityPerUnit": "40 - 100 g pkgs.",
+      "UnitPrice": 23.25,
+      "UnitsInStock": 35,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 0,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 7,
+        "CategoryName": "Produce",
+        "Description": "Dried fruit and bean curd"
+      }
+    },
+    {
+      "ProductID": 15,
+      "ProductName": "Genen Shouyu",
+      "SupplierID": 6,
+      "CategoryID": 2,
+      "QuantityPerUnit": "24 - 250 ml bottles",
+      "UnitPrice": 15.5,
+      "UnitsInStock": 39,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 5,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+      }
+    },
+    {
+      "ProductID": 16,
+      "ProductName": "Pavlova",
+      "SupplierID": 7,
+      "CategoryID": 3,
+      "QuantityPerUnit": "32 - 500 g boxes",
+      "UnitPrice": 17.45,
+      "UnitsInStock": 29,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 10,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 3,
+        "CategoryName": "Confections",
+        "Description": "Desserts, candies, and sweet breads"
+      }
+    },
+    {
+      "ProductID": 17,
+      "ProductName": "Alice Mutton",
+      "SupplierID": 7,
+      "CategoryID": 6,
+      "QuantityPerUnit": "20 - 1 kg tins",
+      "UnitPrice": 39.0,
+      "UnitsInStock": 0,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 0,
+      "Discontinued": true,
+      "Category": {
+        "CategoryID": 6,
+        "CategoryName": "Meat/Poultry",
+        "Description": "Prepared meats"
+      }
+    },
+    {
+      "ProductID": 18,
+      "ProductName": "Carnarvon Tigers",
+      "SupplierID": 7,
+      "CategoryID": 8,
+      "QuantityPerUnit": "16 kg pkg.",
+      "UnitPrice": 62.5,
+      "UnitsInStock": 42,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 0,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 8,
+        "CategoryName": "Seafood",
+        "Description": "Seaweed and fish"
+      }
+    },
+    {
+      "ProductID": 19,
+      "ProductName": "Teatime Chocolate Biscuits",
+      "SupplierID": 8,
+      "CategoryID": 3,
+      "QuantityPerUnit": "10 boxes x 12 pieces",
+      "UnitPrice": 9.2,
+      "UnitsInStock": 25,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 5,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 3,
+        "CategoryName": "Confections",
+        "Description": "Desserts, candies, and sweet breads"
+      }
+    },
+    {
+      "ProductID": 20,
+      "ProductName": "Sir Rodney's Marmalade",
+      "SupplierID": 8,
+      "CategoryID": 3,
+      "QuantityPerUnit": "30 gift boxes",
+      "UnitPrice": 81.0,
+      "UnitsInStock": 40,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 0,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 3,
+        "CategoryName": "Confections",
+        "Description": "Desserts, candies, and sweet breads"
+      }
+    },
+    {
+      "ProductID": 21,
+      "ProductName": "Sir Rodney's Scones",
+      "SupplierID": 8,
+      "CategoryID": 3,
+      "QuantityPerUnit": "24 pkgs. x 4 pieces",
+      "UnitPrice": 10.0,
+      "UnitsInStock": 3,
+      "UnitsOnOrder": 40,
+      "ReorderLevel": 5,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 3,
+        "CategoryName": "Confections",
+        "Description": "Desserts, candies, and sweet breads"
+      }
+    },
+    {
+      "ProductID": 22,
+      "ProductName": "Gustaf's Knäckebröd",
+      "SupplierID": 9,
+      "CategoryID": 5,
+      "QuantityPerUnit": "24 - 500 g pkgs.",
+      "UnitPrice": 21.0,
+      "UnitsInStock": 104,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 25,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 5,
+        "CategoryName": "Grains/Cereals",
+        "Description": "Breads, crackers, pasta, and cereal"
+      }
+    },
+    {
+      "ProductID": 23,
+      "ProductName": "Tunnbröd",
+      "SupplierID": 9,
+      "CategoryID": 5,
+      "QuantityPerUnit": "12 - 250 g pkgs.",
+      "UnitPrice": 9.0,
+      "UnitsInStock": 61,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 25,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 5,
+        "CategoryName": "Grains/Cereals",
+        "Description": "Breads, crackers, pasta, and cereal"
+      }
+    },
+    {
+      "ProductID": 24,
+      "ProductName": "Guaraná Fantástica",
+      "SupplierID": 10,
+      "CategoryID": 1,
+      "QuantityPerUnit": "12 - 355 ml cans",
+      "UnitPrice": 4.5,
+      "UnitsInStock": 20,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 0,
+      "Discontinued": true,
+      "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+      }
+    },
+    {
+      "ProductID": 25,
+      "ProductName": "NuNuCa Nuß-Nougat-Creme",
+      "SupplierID": 11,
+      "CategoryID": 3,
+      "QuantityPerUnit": "20 - 450 g glasses",
+      "UnitPrice": 14.0,
+      "UnitsInStock": 76,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 30,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 3,
+        "CategoryName": "Confections",
+        "Description": "Desserts, candies, and sweet breads"
+      }
+    },
+    {
+      "ProductID": 26,
+      "ProductName": "Gumbär Gummibärchen",
+      "SupplierID": 11,
+      "CategoryID": 3,
+      "QuantityPerUnit": "100 - 250 g bags",
+      "UnitPrice": 31.23,
+      "UnitsInStock": 15,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 0,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 3,
+        "CategoryName": "Confections",
+        "Description": "Desserts, candies, and sweet breads"
+      }
+    },
+    {
+      "ProductID": 27,
+      "ProductName": "Schoggi Schokolade",
+      "SupplierID": 11,
+      "CategoryID": 3,
+      "QuantityPerUnit": "100 - 100 g pieces",
+      "UnitPrice": 43.9,
+      "UnitsInStock": 49,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 30,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 3,
+        "CategoryName": "Confections",
+        "Description": "Desserts, candies, and sweet breads"
+      }
+    },
+    {
+      "ProductID": 28,
+      "ProductName": "Rössle Sauerkraut",
+      "SupplierID": 12,
+      "CategoryID": 7,
+      "QuantityPerUnit": "25 - 825 g cans",
+      "UnitPrice": 45.6,
+      "UnitsInStock": 26,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 0,
+      "Discontinued": true,
+      "Category": {
+        "CategoryID": 7,
+        "CategoryName": "Produce",
+        "Description": "Dried fruit and bean curd"
+      }
+    },
+    {
+      "ProductID": 29,
+      "ProductName": "Thüringer Rostbratwurst",
+      "SupplierID": 12,
+      "CategoryID": 6,
+      "QuantityPerUnit": "50 bags x 30 sausgs.",
+      "UnitPrice": 123.79,
+      "UnitsInStock": 0,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 0,
+      "Discontinued": true,
+      "Category": {
+        "CategoryID": 6,
+        "CategoryName": "Meat/Poultry",
+        "Description": "Prepared meats"
+      }
+    },
+    {
+      "ProductID": 30,
+      "ProductName": "Nord-Ost Matjeshering",
+      "SupplierID": 13,
+      "CategoryID": 8,
+      "QuantityPerUnit": "10 - 200 g glasses",
+      "UnitPrice": 25.89,
+      "UnitsInStock": 10,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 15,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 8,
+        "CategoryName": "Seafood",
+        "Description": "Seaweed and fish"
+      }
+    },
+    {
+      "ProductID": 31,
+      "ProductName": "Gorgonzola Telino",
+      "SupplierID": 14,
+      "CategoryID": 4,
+      "QuantityPerUnit": "12 - 100 g pkgs",
+      "UnitPrice": 12.5,
+      "UnitsInStock": 0,
+      "UnitsOnOrder": 70,
+      "ReorderLevel": 20,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 4,
+        "CategoryName": "Dairy Products",
+        "Description": "Cheeses"
+      }
+    },
+    {
+      "ProductID": 32,
+      "ProductName": "Mascarpone Fabioli",
+      "SupplierID": 14,
+      "CategoryID": 4,
+      "QuantityPerUnit": "24 - 200 g pkgs.",
+      "UnitPrice": 32.0,
+      "UnitsInStock": 9,
+      "UnitsOnOrder": 40,
+      "ReorderLevel": 25,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 4,
+        "CategoryName": "Dairy Products",
+        "Description": "Cheeses"
+      }
+    },
+    {
+      "ProductID": 33,
+      "ProductName": "Geitost",
+      "SupplierID": 15,
+      "CategoryID": 4,
+      "QuantityPerUnit": "500 g",
+      "UnitPrice": 2.5,
+      "UnitsInStock": 112,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 20,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 4,
+        "CategoryName": "Dairy Products",
+        "Description": "Cheeses"
+      }
+    },
+    {
+      "ProductID": 34,
+      "ProductName": "Sasquatch Ale",
+      "SupplierID": 16,
+      "CategoryID": 1,
+      "QuantityPerUnit": "24 - 12 oz bottles",
+      "UnitPrice": 14.0,
+      "UnitsInStock": 111,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 15,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+      }
+    },
+    {
+      "ProductID": 35,
+      "ProductName": "Steeleye Stout",
+      "SupplierID": 16,
+      "CategoryID": 1,
+      "QuantityPerUnit": "24 - 12 oz bottles",
+      "UnitPrice": 18.0,
+      "UnitsInStock": 20,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 15,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+      }
+    },
+    {
+      "ProductID": 36,
+      "ProductName": "Inlagd Sill",
+      "SupplierID": 17,
+      "CategoryID": 8,
+      "QuantityPerUnit": "24 - 250 g  jars",
+      "UnitPrice": 19.0,
+      "UnitsInStock": 112,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 20,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 8,
+        "CategoryName": "Seafood",
+        "Description": "Seaweed and fish"
+      }
+    },
+    {
+      "ProductID": 37,
+      "ProductName": "Gravad lax",
+      "SupplierID": 17,
+      "CategoryID": 8,
+      "QuantityPerUnit": "12 - 500 g pkgs.",
+      "UnitPrice": 26.0,
+      "UnitsInStock": 11,
+      "UnitsOnOrder": 50,
+      "ReorderLevel": 25,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 8,
+        "CategoryName": "Seafood",
+        "Description": "Seaweed and fish"
+      }
+    },
+    {
+      "ProductID": 38,
+      "ProductName": "Côte de Blaye",
+      "SupplierID": 18,
+      "CategoryID": 1,
+      "QuantityPerUnit": "12 - 75 cl bottles",
+      "UnitPrice": 263.5,
+      "UnitsInStock": 17,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 15,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+      }
+    },
+    {
+      "ProductID": 39,
+      "ProductName": "Chartreuse verte",
+      "SupplierID": 18,
+      "CategoryID": 1,
+      "QuantityPerUnit": "750 cc per bottle",
+      "UnitPrice": 18.0,
+      "UnitsInStock": 69,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 5,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+      }
+    },
+    {
+      "ProductID": 40,
+      "ProductName": "Boston Crab Meat",
+      "SupplierID": 19,
+      "CategoryID": 8,
+      "QuantityPerUnit": "24 - 4 oz tins",
+      "UnitPrice": 18.4,
+      "UnitsInStock": 123,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 30,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 8,
+        "CategoryName": "Seafood",
+        "Description": "Seaweed and fish"
+      }
+    },
+    {
+      "ProductID": 41,
+      "ProductName": "Jack's New England Clam Chowder",
+      "SupplierID": 19,
+      "CategoryID": 8,
+      "QuantityPerUnit": "12 - 12 oz cans",
+      "UnitPrice": 9.65,
+      "UnitsInStock": 85,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 10,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 8,
+        "CategoryName": "Seafood",
+        "Description": "Seaweed and fish"
+      }
+    },
+    {
+      "ProductID": 42,
+      "ProductName": "Singaporean Hokkien Fried Mee",
+      "SupplierID": 20,
+      "CategoryID": 5,
+      "QuantityPerUnit": "32 - 1 kg pkgs.",
+      "UnitPrice": 14.0,
+      "UnitsInStock": 26,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 0,
+      "Discontinued": true,
+      "Category": {
+        "CategoryID": 5,
+        "CategoryName": "Grains/Cereals",
+        "Description": "Breads, crackers, pasta, and cereal"
+      }
+    },
+    {
+      "ProductID": 43,
+      "ProductName": "Ipoh Coffee",
+      "SupplierID": 20,
+      "CategoryID": 1,
+      "QuantityPerUnit": "16 - 500 g tins",
+      "UnitPrice": 46.0,
+      "UnitsInStock": 17,
+      "UnitsOnOrder": 10,
+      "ReorderLevel": 25,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+      }
+    },
+    {
+      "ProductID": 44,
+      "ProductName": "Gula Malacca",
+      "SupplierID": 20,
+      "CategoryID": 2,
+      "QuantityPerUnit": "20 - 2 kg bags",
+      "UnitPrice": 19.45,
+      "UnitsInStock": 27,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 15,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+      }
+    },
+    {
+      "ProductID": 45,
+      "ProductName": "Rogede sild",
+      "SupplierID": 21,
+      "CategoryID": 8,
+      "QuantityPerUnit": "1k pkg.",
+      "UnitPrice": 9.5,
+      "UnitsInStock": 5,
+      "UnitsOnOrder": 70,
+      "ReorderLevel": 15,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 8,
+        "CategoryName": "Seafood",
+        "Description": "Seaweed and fish"
+      }
+    },
+    {
+      "ProductID": 46,
+      "ProductName": "Spegesild",
+      "SupplierID": 21,
+      "CategoryID": 8,
+      "QuantityPerUnit": "4 - 450 g glasses",
+      "UnitPrice": 12.0,
+      "UnitsInStock": 95,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 0,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 8,
+        "CategoryName": "Seafood",
+        "Description": "Seaweed and fish"
+      }
+    },
+    {
+      "ProductID": 47,
+      "ProductName": "Zaanse koeken",
+      "SupplierID": 22,
+      "CategoryID": 3,
+      "QuantityPerUnit": "10 - 4 oz boxes",
+      "UnitPrice": 9.5,
+      "UnitsInStock": 36,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 0,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 3,
+        "CategoryName": "Confections",
+        "Description": "Desserts, candies, and sweet breads"
+      }
+    },
+    {
+      "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"
+      }
+    },
+    {
+      "ProductID": 49,
+      "ProductName": "Maxilaku",
+      "SupplierID": 23,
+      "CategoryID": 3,
+      "QuantityPerUnit": "24 - 50 g pkgs.",
+      "UnitPrice": 20.0,
+      "UnitsInStock": 10,
+      "UnitsOnOrder": 60,
+      "ReorderLevel": 15,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 3,
+        "CategoryName": "Confections",
+        "Description": "Desserts, candies, and sweet breads"
+      }
+    },
+    {
+      "ProductID": 50,
+      "ProductName": "Valkoinen suklaa",
+      "SupplierID": 23,
+      "CategoryID": 3,
+      "QuantityPerUnit": "12 - 100 g bars",
+      "UnitPrice": 16.25,
+      "UnitsInStock": 65,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 30,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 3,
+        "CategoryName": "Confections",
+        "Description": "Desserts, candies, and sweet breads"
+      }
+    },
+    {
+      "ProductID": 51,
+      "ProductName": "Manjimup Dried Apples",
+      "SupplierID": 24,
+      "CategoryID": 7,
+      "QuantityPerUnit": "50 - 300 g pkgs.",
+      "UnitPrice": 53.0,
+      "UnitsInStock": 20,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 10,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 7,
+        "CategoryName": "Produce",
+        "Description": "Dried fruit and bean curd"
+      }
+    },
+    {
+      "ProductID": 52,
+      "ProductName": "Filo Mix",
+      "SupplierID": 24,
+      "CategoryID": 5,
+      "QuantityPerUnit": "16 - 2 kg boxes",
+      "UnitPrice": 7.0,
+      "UnitsInStock": 38,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 25,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 5,
+        "CategoryName": "Grains/Cereals",
+        "Description": "Breads, crackers, pasta, and cereal"
+      }
+    },
+    {
+      "ProductID": 53,
+      "ProductName": "Perth Pasties",
+      "SupplierID": 24,
+      "CategoryID": 6,
+      "QuantityPerUnit": "48 pieces",
+      "UnitPrice": 32.8,
+      "UnitsInStock": 0,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 0,
+      "Discontinued": true,
+      "Category": {
+        "CategoryID": 6,
+        "CategoryName": "Meat/Poultry",
+        "Description": "Prepared meats"
+      }
+    },
+    {
+      "ProductID": 54,
+      "ProductName": "Tourtière",
+      "SupplierID": 25,
+      "CategoryID": 6,
+      "QuantityPerUnit": "16 pies",
+      "UnitPrice": 7.45,
+      "UnitsInStock": 21,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 10,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 6,
+        "CategoryName": "Meat/Poultry",
+        "Description": "Prepared meats"
+      }
+    },
+    {
+      "ProductID": 55,
+      "ProductName": "Pâté chinois",
+      "SupplierID": 25,
+      "CategoryID": 6,
+      "QuantityPerUnit": "24 boxes x 2 pies",
+      "UnitPrice": 24.0,
+      "UnitsInStock": 115,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 20,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 6,
+        "CategoryName": "Meat/Poultry",
+        "Description": "Prepared meats"
+      }
+    },
+    {
+      "ProductID": 56,
+      "ProductName": "Gnocchi di nonna Alice",
+      "SupplierID": 26,
+      "CategoryID": 5,
+      "QuantityPerUnit": "24 - 250 g pkgs.",
+      "UnitPrice": 38.0,
+      "UnitsInStock": 21,
+      "UnitsOnOrder": 10,
+      "ReorderLevel": 30,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 5,
+        "CategoryName": "Grains/Cereals",
+        "Description": "Breads, crackers, pasta, and cereal"
+      }
+    },
+    {
+      "ProductID": 57,
+      "ProductName": "Ravioli Angelo",
+      "SupplierID": 26,
+      "CategoryID": 5,
+      "QuantityPerUnit": "24 - 250 g pkgs.",
+      "UnitPrice": 19.5,
+      "UnitsInStock": 36,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 20,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 5,
+        "CategoryName": "Grains/Cereals",
+        "Description": "Breads, crackers, pasta, and cereal"
+      }
+    },
+    {
+      "ProductID": 58,
+      "ProductName": "Escargots de Bourgogne",
+      "SupplierID": 27,
+      "CategoryID": 8,
+      "QuantityPerUnit": "24 pieces",
+      "UnitPrice": 13.25,
+      "UnitsInStock": 62,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 20,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 8,
+        "CategoryName": "Seafood",
+        "Description": "Seaweed and fish"
+      }
+    },
+    {
+      "ProductID": 59,
+      "ProductName": "Raclette Courdavault",
+      "SupplierID": 28,
+      "CategoryID": 4,
+      "QuantityPerUnit": "5 kg pkg.",
+      "UnitPrice": 55.0,
+      "UnitsInStock": 79,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 0,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 4,
+        "CategoryName": "Dairy Products",
+        "Description": "Cheeses"
+      }
+    },
+    {
+      "ProductID": 60,
+      "ProductName": "Camembert Pierrot",
+      "SupplierID": 28,
+      "CategoryID": 4,
+      "QuantityPerUnit": "15 - 300 g rounds",
+      "UnitPrice": 34.0,
+      "UnitsInStock": 19,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 0,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 4,
+        "CategoryName": "Dairy Products",
+        "Description": "Cheeses"
+      }
+    },
+    {
+      "ProductID": 61,
+      "ProductName": "Sirop d'érable",
+      "SupplierID": 29,
+      "CategoryID": 2,
+      "QuantityPerUnit": "24 - 500 ml bottles",
+      "UnitPrice": 28.5,
+      "UnitsInStock": 113,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 25,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+      }
+    },
+    {
+      "ProductID": 62,
+      "ProductName": "Tarte au sucre",
+      "SupplierID": 29,
+      "CategoryID": 3,
+      "QuantityPerUnit": "48 pies",
+      "UnitPrice": 49.3,
+      "UnitsInStock": 17,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 0,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 3,
+        "CategoryName": "Confections",
+        "Description": "Desserts, candies, and sweet breads"
+      }
+    },
+    {
+      "ProductID": 63,
+      "ProductName": "Vegie-spread",
+      "SupplierID": 7,
+      "CategoryID": 2,
+      "QuantityPerUnit": "15 - 625 g jars",
+      "UnitPrice": 43.9,
+      "UnitsInStock": 24,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 5,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+      }
+    },
+    {
+      "ProductID": 64,
+      "ProductName": "Wimmers gute Semmelknödel",
+      "SupplierID": 12,
+      "CategoryID": 5,
+      "QuantityPerUnit": "20 bags x 4 pieces",
+      "UnitPrice": 33.25,
+      "UnitsInStock": 22,
+      "UnitsOnOrder": 80,
+      "ReorderLevel": 30,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 5,
+        "CategoryName": "Grains/Cereals",
+        "Description": "Breads, crackers, pasta, and cereal"
+      }
+    },
+    {
+      "ProductID": 65,
+      "ProductName": "Louisiana Fiery Hot Pepper Sauce",
+      "SupplierID": 2,
+      "CategoryID": 2,
+      "QuantityPerUnit": "32 - 8 oz bottles",
+      "UnitPrice": 21.05,
+      "UnitsInStock": 76,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 0,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+      }
+    },
+    {
+      "ProductID": 66,
+      "ProductName": "Louisiana Hot Spiced Okra",
+      "SupplierID": 2,
+      "CategoryID": 2,
+      "QuantityPerUnit": "24 - 8 oz jars",
+      "UnitPrice": 17.0,
+      "UnitsInStock": 4,
+      "UnitsOnOrder": 100,
+      "ReorderLevel": 20,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+      }
+    },
+    {
+      "ProductID": 67,
+      "ProductName": "Laughing Lumberjack Lager",
+      "SupplierID": 16,
+      "CategoryID": 1,
+      "QuantityPerUnit": "24 - 12 oz bottles",
+      "UnitPrice": 14.0,
+      "UnitsInStock": 52,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 10,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+      }
+    },
+    {
+      "ProductID": 68,
+      "ProductName": "Scottish Longbreads",
+      "SupplierID": 8,
+      "CategoryID": 3,
+      "QuantityPerUnit": "10 boxes x 8 pieces",
+      "UnitPrice": 12.5,
+      "UnitsInStock": 6,
+      "UnitsOnOrder": 10,
+      "ReorderLevel": 15,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 3,
+        "CategoryName": "Confections",
+        "Description": "Desserts, candies, and sweet breads"
+      }
+    },
+    {
+      "ProductID": 69,
+      "ProductName": "Gudbrandsdalsost",
+      "SupplierID": 15,
+      "CategoryID": 4,
+      "QuantityPerUnit": "10 kg pkg.",
+      "UnitPrice": 36.0,
+      "UnitsInStock": 26,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 15,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 4,
+        "CategoryName": "Dairy Products",
+        "Description": "Cheeses"
+      }
+    },
+    {
+      "ProductID": 70,
+      "ProductName": "Outback Lager",
+      "SupplierID": 7,
+      "CategoryID": 1,
+      "QuantityPerUnit": "24 - 355 ml bottles",
+      "UnitPrice": 15.0,
+      "UnitsInStock": 15,
+      "UnitsOnOrder": 10,
+      "ReorderLevel": 30,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+      }
+    },
+    {
+      "ProductID": 71,
+      "ProductName": "Flotemysost",
+      "SupplierID": 15,
+      "CategoryID": 4,
+      "QuantityPerUnit": "10 - 500 g pkgs.",
+      "UnitPrice": 21.5,
+      "UnitsInStock": 26,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 0,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 4,
+        "CategoryName": "Dairy Products",
+        "Description": "Cheeses"
+      }
+    },
+    {
+      "ProductID": 72,
+      "ProductName": "Mozzarella di Giovanni",
+      "SupplierID": 14,
+      "CategoryID": 4,
+      "QuantityPerUnit": "24 - 200 g pkgs.",
+      "UnitPrice": 34.8,
+      "UnitsInStock": 14,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 0,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 4,
+        "CategoryName": "Dairy Products",
+        "Description": "Cheeses"
+      }
+    },
+    {
+      "ProductID": 73,
+      "ProductName": "Röd Kaviar",
+      "SupplierID": 17,
+      "CategoryID": 8,
+      "QuantityPerUnit": "24 - 150 g jars",
+      "UnitPrice": 15.0,
+      "UnitsInStock": 101,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 5,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 8,
+        "CategoryName": "Seafood",
+        "Description": "Seaweed and fish"
+      }
+    },
+    {
+      "ProductID": 74,
+      "ProductName": "Longlife Tofu",
+      "SupplierID": 4,
+      "CategoryID": 7,
+      "QuantityPerUnit": "5 kg pkg.",
+      "UnitPrice": 10.0,
+      "UnitsInStock": 4,
+      "UnitsOnOrder": 20,
+      "ReorderLevel": 5,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 7,
+        "CategoryName": "Produce",
+        "Description": "Dried fruit and bean curd"
+      }
+    },
+    {
+      "ProductID": 75,
+      "ProductName": "Rhönbräu Klosterbier",
+      "SupplierID": 12,
+      "CategoryID": 1,
+      "QuantityPerUnit": "24 - 0.5 l bottles",
+      "UnitPrice": 7.75,
+      "UnitsInStock": 125,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 25,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+      }
+    },
+    {
+      "ProductID": 76,
+      "ProductName": "Lakkalikööri",
+      "SupplierID": 23,
+      "CategoryID": 1,
+      "QuantityPerUnit": "500 ml",
+      "UnitPrice": 18.0,
+      "UnitsInStock": 57,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 20,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+      }
+    },
+    {
+      "ProductID": 77,
+      "ProductName": "Original Frankfurter grüne Soße",
+      "SupplierID": 12,
+      "CategoryID": 2,
+      "QuantityPerUnit": "12 boxes",
+      "UnitPrice": 13.0,
+      "UnitsInStock": 32,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 15,
+      "Discontinued": false,
+      "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+      }
+    }
+  ]
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/grid/scroll-modes/basic/main.js b/vue-options-api-demos/grid/scroll-modes/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/scroll-modes/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/scroll-modes/basic/main.vue b/vue-options-api-demos/grid/scroll-modes/basic/main.vue
new file mode 100644
index 00000000..bec031cf
--- /dev/null
+++ b/vue-options-api-demos/grid/scroll-modes/basic/main.vue
@@ -0,0 +1,68 @@
+<template>
+  <Grid style="height: 440px;"
+            :data-items="items"
+            :columns="columns"
+            :total="numberOfItems"
+            :row-height="40"
+            :skip="skip"
+            :page-size="20"
+            :scrollable="'virtual'"
+            @pagechange="pageChange">
+    </Grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+
+export default {
+    components: {
+        'Grid': Grid
+    },
+     data: function () {
+        return {
+            dataItems: [],
+            items: [],
+            numberOfItems: 50000,
+            columns: [
+                { field: 'id', title: 'ID', width: '70px'},
+                { field: 'firstName', title: 'First Name'},
+                { field: 'lastName', title: 'Last Name'},
+                { field: 'city', title: 'City', width: '120px'},
+                { field: 'title', title: 'Title', width: '200px'}
+            ],
+            skip: 0
+        };
+    },
+    created: function() {
+      this.dataItems = this.createRandomData(this.numberOfItems);
+      this.items = this.dataItems.slice(this.skip, this.skip + 20);
+    },
+    methods: {
+        pageChange(event) {
+            this.skip = event.page.skip;
+            this.items = this.dataItems.slice(this.skip, this.skip + 20);
+        },
+
+        /* Generating example data */
+        createRandomData(count) {
+            const firstNames = [ 'Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
+             'Michael', 'Robert', 'Laura', 'Anne', 'Nige' ],
+            lastNames = [ 'Davolio', 'Fuller', 'Leverling', 'Peacock',
+                'Buchanan', 'Suyama', 'King', 'Callahan', 'Dodsworth', 'White' ],
+            cities = [ 'Seattle', 'Tacoma', 'Kirkland', 'Redmond',
+                'London', 'Philadelphia', 'New York', 'Seattle', 'London', 'Boston' ],
+            titles = [ 'Accountant', 'Vice President, Sales', 'Sales Representative',
+            'Technical Support', 'Sales Manager', 'Web Designer',
+                'Software Developer' ];
+
+            return Array(count).fill({}).map((_, idx) => ({
+                id: idx + 1,
+                firstName: firstNames[Math.floor(Math.random() * firstNames.length)],
+                lastName: lastNames[Math.floor(Math.random() * lastNames.length)],
+                city: cities[Math.floor(Math.random() * cities.length)],
+                title: titles[Math.floor(Math.random() * titles.length)]
+            }));
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/scroll-modes/custom/main.js b/vue-options-api-demos/grid/scroll-modes/custom/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/scroll-modes/custom/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/scroll-modes/custom/main.vue b/vue-options-api-demos/grid/scroll-modes/custom/main.vue
new file mode 100644
index 00000000..517d105e
--- /dev/null
+++ b/vue-options-api-demos/grid/scroll-modes/custom/main.vue
@@ -0,0 +1,90 @@
+<template>
+ <Grid style="height: 440px;"
+          :data-items="items"
+          :columns="columns"
+          :total="total"
+          :row-height="40"
+          :skip="skip"
+          :scrollable="'virtual'"
+          @pagechange="pageChange">
+    </Grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+
+export default {
+    components: {
+        'Grid': Grid
+    },
+     mounted() {
+        // request the first page on initial load
+        this.requestData(0);
+    },
+    data: function () {
+        return {
+            tempSkip: 0,
+            requestInProgress: false,
+            pageSize: 20,
+            baseUrl: 'https://demos.telerik.com/kendo-ui/service-v4/odata/Orders?$count=true&$top=60&$skip=',
+            init: { method: 'GET', accept: 'application/json', headers: {} },
+            orders: [],
+            items: [],
+            total: 0,
+            skip: 0,
+            columns: [
+                { field: 'Index', title: 'Index', width: '70px'},
+                { field: 'OrderID', title: 'Order Id', width: '100px'},
+                { field: 'ShipCountry', title: 'Ship Country'},
+                { field: 'ShipName', title: 'Ship Name'}
+            ]
+        };
+    },
+    methods: {
+        pageChange(event) {
+            this.requestIfNeeded(event.page.skip);
+            this.skip = event.page.skip;
+            this.items = this.orders.slice(this.skip, this.skip + 20);
+        },
+
+        requestIfNeeded(skip) {
+            for (let i = skip; i < skip + this.pageSize && i < this.orders.length; i++) {
+                if (this.orders[i].OrderID === undefined) {
+
+                    this.requestData(skip);
+                    return;
+                }
+            }
+        },
+
+        requestData(skipParameter) {
+            if (this.requestInProgress) {
+
+                return;
+            }
+            this.requestInProgress = true;
+            var that = this;
+            const skip = Math.max(skipParameter - this.pageSize, 0);
+
+            fetch(this.baseUrl + skip, this.init)
+                .then(response => response.json())
+                .then(json => {
+                    that.requestInProgress = false;
+
+                    const total = json['@odata.count'];
+                    const data = json['value'];
+                    const orders = new Array(total).fill().map((e, i) => ({ Index: i }));
+
+                    data.forEach((order, i) => {
+                        orders[i + skip] = { Index: i + skip, ...order };
+                    });
+
+                    that.requestIfNeeded(that.skip);
+                    that.orders = orders;
+                    that.items = that.orders.slice(that.skip, that.skip + 20);
+                    that.total = total;
+                });
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/scroll-modes/infinite/main.js b/vue-options-api-demos/grid/scroll-modes/infinite/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/scroll-modes/infinite/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/scroll-modes/infinite/main.vue b/vue-options-api-demos/grid/scroll-modes/infinite/main.vue
new file mode 100644
index 00000000..ade27aeb
--- /dev/null
+++ b/vue-options-api-demos/grid/scroll-modes/infinite/main.vue
@@ -0,0 +1,46 @@
+<template>
+ <Grid style="height: 400px;"
+                :data-items="gridData"
+                :columns="columns"
+                @scroll="scrollHandler">
+        </Grid>
+        <br />
+        showing: {{gridData.length}} items
+</template>
+<script>
+import { orderBy } from '@progress/kendo-data-query';
+import { Grid } from '@progress/kendo-vue-grid';
+import products from './products.json';
+
+const availableProducts = products.slice();
+export default {
+    components: {
+        'Grid': Grid
+    },
+    data: function () {
+        return {
+            gridData: availableProducts.splice(0, 20),
+            columns: [
+                { field: 'ProductID', title:'ID', width:'40px'},
+                { field: 'ProductName',  title:'Name', width:'250px'},
+                { field: 'Discontinued', width:'250px'},
+                { field: 'UnitPrice', width:'250px'},
+                { field: 'QuantityPerUnit', width:'250px'},
+                { field: 'Category.CategoryName', width:'250px'}
+            ]
+        };
+    },
+    methods: {
+        scrollHandler: function(event){
+            const e = event;
+            if (e.target.scrollTop + 10 >= e.target.scrollHeight - e.target.clientHeight) {
+                const moreData = availableProducts.splice(0, 10);
+                if (moreData.length > 0) {
+                    this.gridData = this.gridData.concat(moreData);
+                }
+            }
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/scroll-modes/infinite/products.json b/vue-options-api-demos/grid/scroll-modes/infinite/products.json
new file mode 100644
index 00000000..4df1c408
--- /dev/null
+++ b/vue-options-api-demos/grid/scroll-modes/infinite/products.json
@@ -0,0 +1,1233 @@
+[{
+    "ProductID" : 1,
+    "ProductName" : "Chai",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "10 boxes x 20 bags",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 2,
+    "ProductName" : "Chang",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 3,
+    "ProductName" : "Aniseed Syrup",
+    "SupplierID" : 1,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 550 ml bottles",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 13,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 4,
+    "ProductName" : "Chef Anton's Cajun Seasoning",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "48 - 6 oz jars",
+    "UnitPrice" : 22.0000,
+    "UnitsInStock" : 53,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 5,
+    "ProductName" : "Chef Anton's Gumbo Mix",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "36 boxes",
+    "UnitPrice" : 21.3500,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 6,
+    "ProductName" : "Grandma's Boysenberry Spread",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 8 oz jars",
+    "UnitPrice" : 25.0000,
+    "UnitsInStock" : 120,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 7,
+    "ProductName" : "Uncle Bob's Organic Dried Pears",
+    "SupplierID" : 3,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "12 - 1 lb pkgs.",
+    "UnitPrice" : 30.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 8,
+    "ProductName" : "Northwoods Cranberry Sauce",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 12 oz jars",
+    "UnitPrice" : 40.0000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 9,
+    "ProductName" : "Mishi Kobe Niku",
+    "SupplierID" : 4,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "18 - 500 g pkgs.",
+    "UnitPrice" : 97.0000,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 10,
+    "ProductName" : "Ikura",
+    "SupplierID" : 4,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 200 ml jars",
+    "UnitPrice" : 31.0000,
+    "UnitsInStock" : 31,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 11,
+    "ProductName" : "Queso Cabrales",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "1 kg pkg.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 30,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 12,
+    "ProductName" : "Queso Manchego La Pastora",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 86,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 13,
+    "ProductName" : "Konbu",
+    "SupplierID" : 6,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "2 kg box",
+    "UnitPrice" : 6.0000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 14,
+    "ProductName" : "Tofu",
+    "SupplierID" : 6,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "40 - 100 g pkgs.",
+    "UnitPrice" : 23.2500,
+    "UnitsInStock" : 35,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 15,
+    "ProductName" : "Genen Shouyu",
+    "SupplierID" : 6,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 250 ml bottles",
+    "UnitPrice" : 15.5000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 16,
+    "ProductName" : "Pavlova",
+    "SupplierID" : 7,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "32 - 500 g boxes",
+    "UnitPrice" : 17.4500,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 17,
+    "ProductName" : "Alice Mutton",
+    "SupplierID" : 7,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "20 - 1 kg tins",
+    "UnitPrice" : 39.0000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 18,
+    "ProductName" : "Carnarvon Tigers",
+    "SupplierID" : 7,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "16 kg pkg.",
+    "UnitPrice" : 62.5000,
+    "UnitsInStock" : 42,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 19,
+    "ProductName" : "Teatime Chocolate Biscuits",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 12 pieces",
+    "UnitPrice" : 9.2000,
+    "UnitsInStock" : 25,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 20,
+    "ProductName" : "Sir Rodney's Marmalade",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "30 gift boxes",
+    "UnitPrice" : 81.0000,
+    "UnitsInStock" : 40,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 21,
+    "ProductName" : "Sir Rodney's Scones",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 pkgs. x 4 pieces",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 3,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 22,
+    "ProductName" : "Gustaf's Knäckebröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 500 g pkgs.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 104,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 23,
+    "ProductName" : "Tunnbröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "12 - 250 g pkgs.",
+    "UnitPrice" : 9.0000,
+    "UnitsInStock" : 61,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 24,
+    "ProductName" : "Guaraná Fantástica",
+    "SupplierID" : 10,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 355 ml cans",
+    "UnitPrice" : 4.5000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 25,
+    "ProductName" : "NuNuCa Nuß-Nougat-Creme",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "20 - 450 g glasses",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 26,
+    "ProductName" : "Gumbär Gummibärchen",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 250 g bags",
+    "UnitPrice" : 31.2300,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 27,
+    "ProductName" : "Schoggi Schokolade",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 100 g pieces",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 49,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 28,
+    "ProductName" : "Rössle Sauerkraut",
+    "SupplierID" : 12,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "25 - 825 g cans",
+    "UnitPrice" : 45.6000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 29,
+    "ProductName" : "Thüringer Rostbratwurst",
+    "SupplierID" : 12,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "50 bags x 30 sausgs.",
+    "UnitPrice" : 123.7900,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 30,
+    "ProductName" : "Nord-Ost Matjeshering",
+    "SupplierID" : 13,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "10 - 200 g glasses",
+    "UnitPrice" : 25.8900,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 31,
+    "ProductName" : "Gorgonzola Telino",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "12 - 100 g pkgs",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 32,
+    "ProductName" : "Mascarpone Fabioli",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 32.0000,
+    "UnitsInStock" : 9,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 33,
+    "ProductName" : "Geitost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "500 g",
+    "UnitPrice" : 2.5000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 34,
+    "ProductName" : "Sasquatch Ale",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 111,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 35,
+    "ProductName" : "Steeleye Stout",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 36,
+    "ProductName" : "Inlagd Sill",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 250 g  jars",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 37,
+    "ProductName" : "Gravad lax",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 500 g pkgs.",
+    "UnitPrice" : 26.0000,
+    "UnitsInStock" : 11,
+    "UnitsOnOrder" : 50,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 38,
+    "ProductName" : "Côte de Blaye",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 75 cl bottles",
+    "UnitPrice" : 263.5000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 39,
+    "ProductName" : "Chartreuse verte",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "750 cc per bottle",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 69,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 40,
+    "ProductName" : "Boston Crab Meat",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 4 oz tins",
+    "UnitPrice" : 18.4000,
+    "UnitsInStock" : 123,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 41,
+    "ProductName" : "Jack's New England Clam Chowder",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 12 oz cans",
+    "UnitPrice" : 9.6500,
+    "UnitsInStock" : 85,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 42,
+    "ProductName" : "Singaporean Hokkien Fried Mee",
+    "SupplierID" : 20,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "32 - 1 kg pkgs.",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 43,
+    "ProductName" : "Ipoh Coffee",
+    "SupplierID" : 20,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "16 - 500 g tins",
+    "UnitPrice" : 46.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 44,
+    "ProductName" : "Gula Malacca",
+    "SupplierID" : 20,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "20 - 2 kg bags",
+    "UnitPrice" : 19.4500,
+    "UnitsInStock" : 27,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 45,
+    "ProductName" : "Rogede sild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "1k pkg.",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 5,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 46,
+    "ProductName" : "Spegesild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "4 - 450 g glasses",
+    "UnitPrice" : 12.0000,
+    "UnitsInStock" : 95,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 47,
+    "ProductName" : "Zaanse koeken",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 - 4 oz boxes",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 48,
+    "ProductName" : "Chocolade",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 pkgs.",
+    "UnitPrice" : 12.7500,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 49,
+    "ProductName" : "Maxilaku",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 - 50 g pkgs.",
+    "UnitPrice" : 20.0000,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 60,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 50,
+    "ProductName" : "Valkoinen suklaa",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "12 - 100 g bars",
+    "UnitPrice" : 16.2500,
+    "UnitsInStock" : 65,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 51,
+    "ProductName" : "Manjimup Dried Apples",
+    "SupplierID" : 24,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "50 - 300 g pkgs.",
+    "UnitPrice" : 53.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 52,
+    "ProductName" : "Filo Mix",
+    "SupplierID" : 24,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "16 - 2 kg boxes",
+    "UnitPrice" : 7.0000,
+    "UnitsInStock" : 38,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 53,
+    "ProductName" : "Perth Pasties",
+    "SupplierID" : 24,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "48 pieces",
+    "UnitPrice" : 32.8000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 54,
+    "ProductName" : "Tourtière",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "16 pies",
+    "UnitPrice" : 7.4500,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 55,
+    "ProductName" : "Pâté chinois",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "24 boxes x 2 pies",
+    "UnitPrice" : 24.0000,
+    "UnitsInStock" : 115,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 56,
+    "ProductName" : "Gnocchi di nonna Alice",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 57,
+    "ProductName" : "Ravioli Angelo",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 19.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 58,
+    "ProductName" : "Escargots de Bourgogne",
+    "SupplierID" : 27,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 pieces",
+    "UnitPrice" : 13.2500,
+    "UnitsInStock" : 62,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 59,
+    "ProductName" : "Raclette Courdavault",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 55.0000,
+    "UnitsInStock" : 79,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 60,
+    "ProductName" : "Camembert Pierrot",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "15 - 300 g rounds",
+    "UnitPrice" : 34.0000,
+    "UnitsInStock" : 19,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 61,
+    "ProductName" : "Sirop d'érable",
+    "SupplierID" : 29,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 500 ml bottles",
+    "UnitPrice" : 28.5000,
+    "UnitsInStock" : 113,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 62,
+    "ProductName" : "Tarte au sucre",
+    "SupplierID" : 29,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "48 pies",
+    "UnitPrice" : 49.3000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 63,
+    "ProductName" : "Vegie-spread",
+    "SupplierID" : 7,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "15 - 625 g jars",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 64,
+    "ProductName" : "Wimmers gute Semmelknödel",
+    "SupplierID" : 12,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "20 bags x 4 pieces",
+    "UnitPrice" : 33.2500,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 80,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 65,
+    "ProductName" : "Louisiana Fiery Hot Pepper Sauce",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "32 - 8 oz bottles",
+    "UnitPrice" : 21.0500,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 66,
+    "ProductName" : "Louisiana Hot Spiced Okra",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 8 oz jars",
+    "UnitPrice" : 17.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 100,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 67,
+    "ProductName" : "Laughing Lumberjack Lager",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 52,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 68,
+    "ProductName" : "Scottish Longbreads",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 8 pieces",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 69,
+    "ProductName" : "Gudbrandsdalsost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 kg pkg.",
+    "UnitPrice" : 36.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 70,
+    "ProductName" : "Outback Lager",
+    "SupplierID" : 7,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 355 ml bottles",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 71,
+    "ProductName" : "Flotemysost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 21.5000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 72,
+    "ProductName" : "Mozzarella di Giovanni",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 34.8000,
+    "UnitsInStock" : 14,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 73,
+    "ProductName" : "Röd Kaviar",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 150 g jars",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 101,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 74,
+    "ProductName" : "Longlife Tofu",
+    "SupplierID" : 4,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 20,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 75,
+    "ProductName" : "Rhönbräu Klosterbier",
+    "SupplierID" : 12,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 0.5 l bottles",
+    "UnitPrice" : 7.7500,
+    "UnitsInStock" : 125,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 76,
+    "ProductName" : "Lakkalikööri",
+    "SupplierID" : 23,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "500 ml",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 57,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 77,
+    "ProductName" : "Original Frankfurter grüne Soße",
+    "SupplierID" : 12,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 boxes",
+    "UnitPrice" : 13.0000,
+    "UnitsInStock" : 32,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}]
diff --git a/vue-options-api-demos/grid/selection/basic/main.js b/vue-options-api-demos/grid/selection/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/selection/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/selection/basic/main.vue b/vue-options-api-demos/grid/selection/basic/main.vue
new file mode 100644
index 00000000..3dfb79f8
--- /dev/null
+++ b/vue-options-api-demos/grid/selection/basic/main.vue
@@ -0,0 +1,63 @@
+<template>
+<div>
+  Selected Item:  {{selectedItem && selectedItem.ProductID}} , {{selectedItem && selectedItem.ProductName}}
+        <Grid
+        ref="grid"
+        :style="{height: '520px'}"
+        :data-items="items"
+        :selected-field="selectedField"
+        :columns="columns"
+        @rowclick="onRowClick">
+    </Grid>
+</div>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+
+export default {
+    components: {
+        'Grid': Grid
+    },
+    data: function () {
+        return {
+            selectedField: 'selected',
+            selectedID: 1,
+            products: [],
+            columns: [
+                { field: 'ProductID', title: 'ID', width: '50px' },
+                { field: 'ProductName', title: 'Product Name' },
+                { field: 'UnitPrice', filter: 'numeric', title: 'Unit Price' },
+                { field: 'UnitsInStock', title: 'Units In Stock' }
+            ]
+        };
+    },
+    computed: {
+        items () {
+            return this.products.map((item) => ({ ...item, selected: item.ProductID === this.selectedID }));
+        },
+        selectedItem () {
+            return this.products.find((item) => item.ProductID === this.selectedID);
+        }
+    },
+    methods: {
+        onRowClick (event) {
+            this.selectedID = event.dataItem.ProductID;
+        },
+        createRandomData(count) {
+            const productNames = ['Chai', 'Chang', 'Syrup', 'Apple', 'Orange', 'Banana', 'Lemon', 'Pineapple', 'Tea', 'Milk'];
+            const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120]
+
+            return Array(count).fill({}).map((_, idx) => ({
+                ProductID: idx + 1,
+                ProductName: productNames[Math.floor(Math.random() * productNames.length)],
+                UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)],
+                UnitsInStock: Math.floor(Math.random() * 100)
+            }));
+        }
+    },
+     mounted() {
+        this.products = this.createRandomData(1000);
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/selection/custom/main.js b/vue-options-api-demos/grid/selection/custom/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/selection/custom/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/selection/custom/main.vue b/vue-options-api-demos/grid/selection/custom/main.vue
new file mode 100644
index 00000000..a63f6d2d
--- /dev/null
+++ b/vue-options-api-demos/grid/selection/custom/main.vue
@@ -0,0 +1,61 @@
+<template>
+  <Grid
+        ref="grid"
+        :style="{height: '520px'}"
+        :data-items="products"
+        :selected-field="selectedField"
+        :columns="columns"
+        @selectionchange="onSelectionChange"
+        @headerselectionchange="onHeaderSelectionChange"
+        @rowclick="onRowClick">
+    </Grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import { products } from './products';
+
+export default {
+    components: {
+        'Grid': Grid
+    },
+    data: function () {
+        return {
+            selectedField: 'selected',
+            products: products.map(item => { return {...item, selected: false} }),
+            staticColumns: [
+                { field: 'ProductID', title: 'ID', width: '50px' },
+                { field: 'ProductName', title: 'Product Name' },
+                { field: 'UnitPrice', filter: 'numeric', title: 'Unit Price' },
+                { field: 'UnitsInStock', title: 'Units In Stock' }
+            ]
+        };
+    },
+    computed: {
+        areAllSelected () {
+            return this.products.findIndex(item => item.selected === false) === -1;
+        },
+        columns () {
+            return [
+                { field: 'selected', width: '50px', headerSelectionValue: this.areAllSelected },
+                ...this.staticColumns
+            ]
+        }
+    },
+    methods: {
+        onHeaderSelectionChange (event) {
+            let checked = event.event.target.checked;
+            this.products = this.products.map((item) => { return {...item, selected: checked} });
+        },
+        onSelectionChange (event) {
+            event.dataItem[this.selectedField] = !event.dataItem[this.selectedField];
+        },
+        onRowClick (event) {
+            event.dataItem[this.selectedField] = !event.dataItem[this.selectedField];
+        },
+        createRandomData(count) {
+            return
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/selection/custom/products.js b/vue-options-api-demos/grid/selection/custom/products.js
new file mode 100644
index 00000000..eafa8949
--- /dev/null
+++ b/vue-options-api-demos/grid/selection/custom/products.js
@@ -0,0 +1,125 @@
+const products = [
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 39
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 17
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 13
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "UnitPrice": 22.0000,
+        "UnitsInStock": 53
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "UnitPrice": 21.3500,
+        "UnitsInStock": 0
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "UnitPrice": 25.0000,
+        "UnitsInStock": 120
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "UnitPrice": 30.0000,
+        "UnitsInStock": 15
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "UnitPrice": 40.0000,
+        "UnitsInStock": 6
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "UnitPrice": 97.0000,
+        "UnitsInStock": 29
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "UnitPrice": 31.0000,
+        "UnitsInStock": 31
+    },
+    {
+        "ProductID": 11,
+        "ProductName": "Queso Cabrales",
+        "UnitPrice": 21.0000,
+        "UnitsInStock": 22
+    },
+    {
+        "ProductID": 12,
+        "ProductName": "Queso Manchego La Pastora",
+        "UnitPrice": 38.0000,
+        "UnitsInStock": 86
+    },
+    {
+        "ProductID": 13,
+        "ProductName": "Konbu",
+        "SupplierID": 6,
+        "UnitPrice": 6.0000,
+        "UnitsInStock": 24
+    },
+    {
+        "ProductID": 14,
+        "ProductName": "Tofu",
+        "UnitPrice": 23.2500,
+        "UnitsInStock": 35
+    },
+    {
+        "ProductID": 15,
+        "ProductName": "Genen Shouyu",
+        "UnitPrice": 15.5000,
+        "UnitsInStock": 39
+    },
+    {
+        "ProductID": 16,
+        "ProductName": "Pavlova",
+        "UnitPrice": 17.4500,
+        "UnitsInStock": 29
+    },
+    {
+        "ProductID": 17,
+        "ProductName": "Alice Mutton",
+        "UnitPrice": 39.0000,
+        "UnitsInStock": 0
+    },
+    {
+        "ProductID": 18,
+        "ProductName": "Carnarvon Tigers",
+        "UnitPrice": 62.5000,
+        "UnitsInStock": 42
+    },
+    {
+        "ProductID": 19,
+        "ProductName": "Teatime Chocolate Biscuits",
+        "UnitPrice": 9.2000,
+        "UnitsInStock": 25
+    },
+    {
+        "ProductID": 20,
+        "ProductName": "Sir Rodney's Marmalade",
+        "UnitPrice": 81.0000,
+        "UnitsInStock": 40
+    }
+];
+
+export { products };
diff --git a/vue-options-api-demos/grid/shared/categories.json b/vue-options-api-demos/grid/shared/categories.json
new file mode 100644
index 00000000..9b40e6e0
--- /dev/null
+++ b/vue-options-api-demos/grid/shared/categories.json
@@ -0,0 +1,43 @@
+
+[
+	{
+		"categoryID" : 2,
+		"description" : "Sweet and savory sauces relishes spreads and seasonings",
+		"name" : "Condiments"
+	},
+	{
+		"categoryID" : 1,
+		"description" : "Soft drinks coffees teas beers and ales",
+		"name" : "Beverages"
+	},
+	{
+		"categoryID" : 3,
+		"description" : "Desserts candies and sweet breads",
+		"name" : "Confections"
+	},
+	{
+		"categoryID" : 4,
+		"description" : "Cheeses",
+		"name" : "Dairy Products"
+	},
+	{
+		"categoryID" : 5,
+		"description" : "Breads crackers pasta and cereal",
+		"name" : "Grains/Cereals"
+	},
+	{
+		"categoryID" : 6,
+		"description" : "Prepared meats",
+		"name" : "Meat/Poultry"
+	},
+	{
+		"categoryID" : 7,
+		"description" : "Dried fruit and bean curd",
+		"name" : "Produce"
+	},
+	{
+		"categoryID" : 8,
+		"description" : "Seaweed and fish",
+		"name" : "Seafood"
+	}
+]
diff --git a/vue-options-api-demos/grid/shared/customers.json b/vue-options-api-demos/grid/shared/customers.json
new file mode 100644
index 00000000..ccf51582
--- /dev/null
+++ b/vue-options-api-demos/grid/shared/customers.json
@@ -0,0 +1,1277 @@
+
+[
+	{
+		"customerID" : "AROUT",
+		"companyName" : "Around the Horn",
+		"contactName" : "Thomas Hardy",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "120 Hanover Sq.",
+			"city" : "London",
+			"region" : "NULL",
+			"postalCode" : "WA1 1DP",
+			"country" : "UK",
+			"phone" : "(171) 555-7788"
+		}
+	},
+	{
+		"customerID" : "BERGS",
+		"companyName" : "Berglunds snabbköp",
+		"contactName" : "Christina Berglund",
+		"contactTitle" : "Order Administrator",
+		"address" : {
+			"street" : "Berguvsvägen  8",
+			"city" : "Luleå",
+			"region" : "NULL",
+			"postalCode" : "S-958 22",
+			"country" : "Sweden",
+			"phone" : "0921-12 34 65"
+		}
+	},
+	{
+		"customerID" : "BLAUS",
+		"companyName" : "Blauer See Delikatessen",
+		"contactName" : "Hanna Moos",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "Forsterstr. 57",
+			"city" : "Mannheim",
+			"region" : "NULL",
+			"postalCode" : 68306,
+			"country" : "Germany",
+			"phone" : "0621-08460"
+		}
+	},
+	{
+		"customerID" : "BLONP",
+		"companyName" : "Blondesddsl père et fils",
+		"contactName" : "Frédérique Citeaux",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "24 place Kléber",
+			"city" : "Strasbourg",
+			"region" : "NULL",
+			"postalCode" : 67000,
+			"country" : "France",
+			"phone" : "88.60.15.31"
+		}
+	},
+	{
+		"customerID" : "BOLID",
+		"companyName" : "Bólido Comidas preparadas",
+		"contactName" : "Martín Sommer",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "67C Araquil",
+			"city" : "Madrid",
+			"region" : "NULL",
+			"postalCode" : 28023,
+			"country" : "Spain",
+			"phone" : "(91) 555 22 82"
+		}
+	},
+	{
+		"customerID" : "BONAP",
+		"companyName" : "Bon app'",
+		"contactName" : "Laurence Lebihan",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "12 rue des Bouchers",
+			"city" : "Marseille",
+			"region" : "NULL",
+			"postalCode" : 13008,
+			"country" : "France",
+			"phone" : "91.24.45.40"
+		}
+	},
+	{
+		"customerID" : "ANTON",
+		"companyName" : "Antonio Moreno Taquería",
+		"contactName" : "Antonio Moreno",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "Mataderos  2312",
+			"city" : "México D.F.",
+			"region" : "NULL",
+			"postalCode" : 5023,
+			"country" : "Mexico",
+			"phone" : "(5) 555-3932"
+		}
+	},
+	{
+		"customerID" : "ANATR",
+		"companyName" : "Ana Trujillo Emparedados y helados",
+		"contactName" : "Ana Trujillo",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "Avda. de la Constitución 2222",
+			"city" : "México D.F.",
+			"region" : "NULL",
+			"postalCode" : 5021,
+			"country" : "Mexico",
+			"phone" : "(5) 555-4729"
+		}
+	},
+	{
+		"customerID" : "CACTU",
+		"companyName" : "Cactus Comidas para llevar",
+		"contactName" : "Patricio Simpson",
+		"contactTitle" : "Sales Agent",
+		"address" : {
+			"street" : "Cerrito 333",
+			"city" : "Buenos Aires",
+			"region" : "NULL",
+			"postalCode" : 1010,
+			"country" : "Argentina",
+			"phone" : "(1) 135-5555"
+		}
+	},
+	{
+		"customerID" : "BSBEV",
+		"companyName" : "B's Beverages",
+		"contactName" : "Victoria Ashworth",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "Fauntleroy Circus",
+			"city" : "London",
+			"region" : "NULL",
+			"postalCode" : "EC2 5NT",
+			"country" : "UK",
+			"phone" : "(171) 555-1212"
+		}
+	},
+	{
+		"customerID" : "CENTC",
+		"companyName" : "Centro comercial Moctezuma",
+		"contactName" : "Francisco Chang",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "Sierras de Granada 9993",
+			"city" : "México D.F.",
+			"region" : "NULL",
+			"postalCode" : 5022,
+			"country" : "Mexico",
+			"phone" : "(5) 555-3392"
+		}
+	},
+	{
+		"customerID" : "CHOPS",
+		"companyName" : "Chop-suey Chinese",
+		"contactName" : "Yang Wang",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "Hauptstr. 29",
+			"city" : "Bern",
+			"region" : "NULL",
+			"postalCode" : 3012,
+			"country" : "Switzerland",
+			"phone" : "0452-076545"
+		}
+	},
+	{
+		"customerID" : "COMMI",
+		"companyName" : "Comércio Mineiro",
+		"contactName" : "Pedro Afonso",
+		"contactTitle" : "Sales Associate",
+		"address" : {
+			"street" : "23 Av. dos Lusíadas",
+			"city" : "Sao Paulo",
+			"region" : "SP",
+			"postalCode" : "05432-043",
+			"country" : "Brazil",
+			"phone" : "(11) 555-7647"
+		}
+	},
+	{
+		"customerID" : "CONSH",
+		"companyName" : "Consolidated Holdings",
+		"contactName" : "Elizabeth Brown",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "Berkeley Gardens 12  Brewery",
+			"city" : "London",
+			"region" : "NULL",
+			"postalCode" : "WX1 6LT",
+			"country" : "UK",
+			"phone" : "(171) 555-2282"
+		}
+	},
+	{
+		"customerID" : "ALFKI",
+		"companyName" : "Alfreds Futterkiste",
+		"contactName" : "Maria Anders",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "Obere Str. 57",
+			"city" : "Berlin",
+			"region" : "NULL",
+			"postalCode" : 12209,
+			"country" : "Germany",
+			"phone" : "030-0074321"
+		}
+	},
+	{
+		"customerID" : "BOTTM",
+		"companyName" : "Bottom-Dollar Markets",
+		"contactName" : "Elizabeth Lincoln",
+		"contactTitle" : "Accounting Manager",
+		"address" : {
+			"street" : "23 Tsawassen Blvd.",
+			"city" : "Tsawassen",
+			"region" : "BC",
+			"postalCode" : "T2F 8M4",
+			"country" : "Canada",
+			"phone" : "(604) 555-4729"
+		}
+	},
+	{
+		"customerID" : "DRACD",
+		"companyName" : "Drachenblut Delikatessen",
+		"contactName" : "Sven Ottlieb",
+		"contactTitle" : "Order Administrator",
+		"address" : {
+			"street" : "Walserweg 21",
+			"city" : "Aachen",
+			"region" : "NULL",
+			"postalCode" : 52066,
+			"country" : "Germany",
+			"phone" : "0241-039123"
+		}
+	},
+	{
+		"customerID" : "DUMON",
+		"companyName" : "Du monde entier",
+		"contactName" : "Janine Labrune",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "67 rue des Cinquante Otages",
+			"city" : "Nantes",
+			"region" : "NULL",
+			"postalCode" : 44000,
+			"country" : "France",
+			"phone" : "40.67.88.88"
+		}
+	},
+	{
+		"customerID" : "FAMIA",
+		"companyName" : "Familia Arquibaldo",
+		"contactName" : "Aria Cruz",
+		"contactTitle" : "Marketing Assistant",
+		"address" : {
+			"street" : "Rua Orós 92",
+			"city" : "Sao Paulo",
+			"region" : "SP",
+			"postalCode" : "05442-030",
+			"country" : "Brazil",
+			"phone" : "(11) 555-9857"
+		}
+	},
+	{
+		"customerID" : "FISSA",
+		"companyName" : "FISSA Fabrica Inter. Salchichas S.A.",
+		"contactName" : "Diego Roel",
+		"contactTitle" : "Accounting Manager",
+		"address" : {
+			"street" : "C/ Moralzarzal 86",
+			"city" : "Madrid",
+			"region" : "NULL",
+			"postalCode" : 28034,
+			"country" : "Spain",
+			"phone" : "(91) 555 94 44"
+		}
+	},
+	{
+		"customerID" : "FOLIG",
+		"companyName" : "Folies gourmandes",
+		"contactName" : "Martine Rancé",
+		"contactTitle" : "Assistant Sales Agent",
+		"address" : {
+			"street" : "184 chaussée de Tournai",
+			"city" : "Lille",
+			"region" : "NULL",
+			"postalCode" : 59000,
+			"country" : "France",
+			"phone" : "20.16.10.16"
+		}
+	},
+	{
+		"customerID" : "FOLKO",
+		"companyName" : "Folk och fä HB",
+		"contactName" : "Maria Larsson",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "Åkergatan 24",
+			"city" : "Bräcke",
+			"region" : "NULL",
+			"postalCode" : "S-844 67",
+			"country" : "Sweden",
+			"phone" : "0695-34 67 21"
+		}
+	},
+	{
+		"customerID" : "FRANK",
+		"companyName" : "Frankenversand",
+		"contactName" : "Peter Franken",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "Berliner Platz 43",
+			"city" : "München",
+			"region" : "NULL",
+			"postalCode" : 80805,
+			"country" : "Germany",
+			"phone" : "089-0877310"
+		}
+	},
+	{
+		"customerID" : "FRANR",
+		"companyName" : "France restauration",
+		"contactName" : "Carine Schmitt",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "54 rue Royale",
+			"city" : "Nantes",
+			"region" : "NULL",
+			"postalCode" : 44000,
+			"country" : "France",
+			"phone" : "40.32.21.21"
+		}
+	},
+	{
+		"customerID" : "EASTC",
+		"companyName" : "Eastern Connection",
+		"contactName" : "Ann Devon",
+		"contactTitle" : "Sales Agent",
+		"address" : {
+			"street" : "35 King George",
+			"city" : "London",
+			"region" : "NULL",
+			"postalCode" : "WX3 6FW",
+			"country" : "UK",
+			"phone" : "(171) 555-0297"
+		}
+	},
+	{
+		"customerID" : "ERNSH",
+		"companyName" : "Ernst Handel",
+		"contactName" : "Roland Mendel",
+		"contactTitle" : "Sales Manager",
+		"address" : {
+			"street" : "Kirchgasse 6",
+			"city" : "Graz",
+			"region" : "NULL",
+			"postalCode" : 8010,
+			"country" : "Austria",
+			"phone" : "7675-3425"
+		}
+	},
+	{
+		"customerID" : "FRANS",
+		"companyName" : "Franchi S.p.A.",
+		"contactName" : "Paolo Accorti",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "Via Monte Bianco 34",
+			"city" : "Torino",
+			"region" : "NULL",
+			"postalCode" : 10100,
+			"country" : "Italy",
+			"phone" : "011-4988260"
+		}
+	},
+	{
+		"customerID" : "FURIB",
+		"companyName" : "Furia Bacalhau e Frutos do Mar",
+		"contactName" : "Lino Rodriguez",
+		"contactTitle" : "Sales Manager",
+		"address" : {
+			"street" : "Jardim das rosas n. 32",
+			"city" : "Lisboa",
+			"region" : "NULL",
+			"postalCode" : 1675,
+			"country" : "Portugal",
+			"phone" : "(1) 354-2534"
+		}
+	},
+	{
+		"customerID" : "GALED",
+		"companyName" : "Galería del gastrónomo",
+		"contactName" : "Eduardo Saavedra",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "Rambla de Cataluña 23",
+			"city" : "Barcelona",
+			"region" : "NULL",
+			"postalCode" : 8022,
+			"country" : "Spain",
+			"phone" : "(93) 203 4560"
+		}
+	},
+	{
+		"customerID" : "GODOS",
+		"companyName" : "Godos Cocina Típica",
+		"contactName" : "José Pedro Freyre",
+		"contactTitle" : "Sales Manager",
+		"address" : {
+			"street" : "C/ Romero 33",
+			"city" : "Sevilla",
+			"region" : "NULL",
+			"postalCode" : 41101,
+			"country" : "Spain",
+			"phone" : "(95) 555 82 82"
+		}
+	},
+	{
+		"customerID" : "GOURL",
+		"companyName" : "Gourmet Lanchonetes",
+		"contactName" : "André Fonseca",
+		"contactTitle" : "Sales Associate",
+		"address" : {
+			"street" : "Av. Brasil 442",
+			"city" : "Campinas",
+			"region" : "SP",
+			"postalCode" : "04876-786",
+			"country" : "Brazil",
+			"phone" : "(11) 555-9482"
+		}
+	},
+	{
+		"customerID" : "HILAA",
+		"companyName" : "HILARION-Abastos",
+		"contactName" : "Carlos Hernández",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city" : "San Cristóbal",
+			"region" : "Táchira",
+			"postalCode" : 5022,
+			"country" : "Venezuela",
+			"phone" : "(5) 555-1340"
+		}
+	},
+	{
+		"customerID" : "HUNGC",
+		"companyName" : "Hungry Coyote Import Store",
+		"contactName" : "Yoshi Latimer",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "City Center Plaza 516 Main St.",
+			"city" : "Elgin",
+			"region" : "OR",
+			"postalCode" : 97827,
+			"country" : "USA",
+			"phone" : "(503) 555-6874"
+		}
+	},
+	{
+		"customerID" : "HUNGO",
+		"companyName" : "Hungry Owl All-Night Grocers",
+		"contactName" : "Patricia McKenna",
+		"contactTitle" : "Sales Associate",
+		"address" : {
+			"street" : "8 Johnstown Road",
+			"city" : "Cork",
+			"region" : "Co. Cork",
+			"postalCode" : "NULL",
+			"country" : "Ireland",
+			"phone" : "2967 542"
+		}
+	},
+	{
+		"customerID" : "ISLAT",
+		"companyName" : "Island Trading",
+		"contactName" : "Helen Bennett",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "Garden House Crowther Way",
+			"city" : "Cowes",
+			"region" : "Isle of Wight",
+			"postalCode" : "PO31 7PJ",
+			"country" : "UK",
+			"phone" : "(198) 555-8888"
+		}
+	},
+	{
+		"customerID" : "KOENE",
+		"companyName" : "Königlich Essen",
+		"contactName" : "Philip Cramer",
+		"contactTitle" : "Sales Associate",
+		"address" : {
+			"street" : "Maubelstr. 90",
+			"city" : "Brandenburg",
+			"region" : "NULL",
+			"postalCode" : 14776,
+			"country" : "Germany",
+			"phone" : "0555-09876"
+		}
+	},
+	{
+		"customerID" : "LACOR",
+		"companyName" : "La corne d'abondance",
+		"contactName" : "Daniel Tonini",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "67 avenue de l'Europe",
+			"city" : "Versailles",
+			"region" : "NULL",
+			"postalCode" : 78000,
+			"country" : "France",
+			"phone" : "30.59.84.10"
+		}
+	},
+	{
+		"customerID" : "GROSR",
+		"companyName" : "GROSELLA-Restaurante",
+		"contactName" : "Manuel Pereira",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "5ª Ave. Los Palos Grandes",
+			"city" : "Caracas",
+			"region" : "DF",
+			"postalCode" : 1081,
+			"country" : "Venezuela",
+			"phone" : "(2) 283-2951"
+		}
+	},
+	{
+		"customerID" : "HANAR",
+		"companyName" : "Hanari Carnes",
+		"contactName" : "Mario Pontes",
+		"contactTitle" : "Accounting Manager",
+		"address" : {
+			"street" : "Rua do Paço 67",
+			"city" : "Rio de Janeiro",
+			"region" : "RJ",
+			"postalCode" : "05454-876",
+			"country" : "Brazil",
+			"phone" : "(21) 555-0091"
+		}
+	},
+	{
+		"customerID" : "LAUGB",
+		"companyName" : "Laughing Bacchus Wine Cellars",
+		"contactName" : "Yoshi Tannamuri",
+		"contactTitle" : "Marketing Assistant",
+		"address" : {
+			"street" : "1900 Oak St.",
+			"city" : "Vancouver",
+			"region" : "BC",
+			"postalCode" : "V3F 2K1",
+			"country" : "Canada",
+			"phone" : "(604) 555-3392"
+		}
+	},
+	{
+		"customerID" : "LAZYK",
+		"companyName" : "Lazy K Kountry Store",
+		"contactName" : "John Steel",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "12 Orchestra Terrace",
+			"city" : "Walla Walla",
+			"region" : "WA",
+			"postalCode" : 99362,
+			"country" : "USA",
+			"phone" : "(509) 555-7969"
+		}
+	},
+	{
+		"customerID" : "LEHMS",
+		"companyName" : "Lehmanns Marktstand",
+		"contactName" : "Renate Messner",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "Magazinweg 7",
+			"city" : "Frankfurt a.M.",
+			"region" : "NULL",
+			"postalCode" : 60528,
+			"country" : "Germany",
+			"phone" : "069-0245984"
+		}
+	},
+	{
+		"customerID" : "GREAL",
+		"companyName" : "Great Lakes Food Market",
+		"contactName" : "Howard Snyder",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "2732 Baker Blvd.",
+			"city" : "Eugene",
+			"region" : "OR",
+			"postalCode" : 97403,
+			"country" : "USA",
+			"phone" : "(503) 555-7555"
+		}
+	},
+	{
+		"customerID" : "LAMAI",
+		"companyName" : "La maison d'Asie",
+		"contactName" : "Annette Roulet",
+		"contactTitle" : "Sales Manager",
+		"address" : {
+			"street" : "1 rue Alsace-Lorraine",
+			"city" : "Toulouse",
+			"region" : "NULL",
+			"postalCode" : 31000,
+			"country" : "France",
+			"phone" : "61.77.61.10"
+		}
+	},
+	{
+		"customerID" : "LETSS",
+		"companyName" : "Let's Stop N Shop",
+		"contactName" : "Jaime Yorres",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "87 Polk St. Suite 5",
+			"city" : "San Francisco",
+			"region" : "CA",
+			"postalCode" : 94117,
+			"country" : "USA",
+			"phone" : "(415) 555-5938"
+		}
+	},
+	{
+		"customerID" : "MAGAA",
+		"companyName" : "Magazzini Alimentari Riuniti",
+		"contactName" : "Giovanni Rovelli",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "Via Ludovico il Moro 22",
+			"city" : "Bergamo",
+			"region" : "NULL",
+			"postalCode" : 24100,
+			"country" : "Italy",
+			"phone" : "035-640230"
+		}
+	},
+	{
+		"customerID" : "MAISD",
+		"companyName" : "Maison Dewey",
+		"contactName" : "Catherine Dewey",
+		"contactTitle" : "Sales Agent",
+		"address" : {
+			"street" : "Rue Joseph-Bens 532",
+			"city" : "Bruxelles",
+			"region" : "NULL",
+			"postalCode" : "B-1180",
+			"country" : "Belgium",
+			"phone" : "(02) 201 24 67"
+		}
+	},
+	{
+		"customerID" : "MEREP",
+		"companyName" : "Mère Paillarde",
+		"contactName" : "Jean Fresnière",
+		"contactTitle" : "Marketing Assistant",
+		"address" : {
+			"street" : "43 rue St. Laurent",
+			"city" : "Montréal",
+			"region" : "Québec",
+			"postalCode" : "H1J 1C3",
+			"country" : "Canada",
+			"phone" : "(514) 555-8054"
+		}
+	},
+	{
+		"customerID" : "MORGK",
+		"companyName" : "Morgenstern Gesundkost",
+		"contactName" : "Alexander Feuer",
+		"contactTitle" : "Marketing Assistant",
+		"address" : {
+			"street" : "Heerstr. 22",
+			"city" : "Leipzig",
+			"region" : "NULL",
+			"postalCode" : 4179,
+			"country" : "Germany",
+			"phone" : "0342-023176"
+		}
+	},
+	{
+		"customerID" : "NORTS",
+		"companyName" : "North/South",
+		"contactName" : "Simon Crowther",
+		"contactTitle" : "Sales Associate",
+		"address" : {
+			"street" : "South House 300 Queensbridge",
+			"city" : "London",
+			"region" : "NULL",
+			"postalCode" : "SW7 1RZ",
+			"country" : "UK",
+			"phone" : "(171) 555-7733"
+		}
+	},
+	{
+		"customerID" : "OCEAN",
+		"companyName" : "Océano Atlántico Ltda.",
+		"contactName" : "Yvonne Moncada",
+		"contactTitle" : "Sales Agent",
+		"address" : {
+			"street" : "Ing. Gustavo Moncada 8585 Piso 20-A",
+			"city" : "Buenos Aires",
+			"region" : "NULL",
+			"postalCode" : 1010,
+			"country" : "Argentina",
+			"phone" : "(1) 135-5333"
+		}
+	},
+	{
+		"customerID" : "LINOD",
+		"companyName" : "LINO-Delicateses",
+		"contactName" : "Felipe Izquierdo",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "Ave. 5 de Mayo Porlamar",
+			"city" : "I. de Margarita",
+			"region" : "Nueva Esparta",
+			"postalCode" : 4980,
+			"country" : "Venezuela",
+			"phone" : "(8) 34-56-12"
+		}
+	},
+	{
+		"customerID" : "LILAS",
+		"companyName" : "LILA-Supermercado",
+		"contactName" : "Carlos González",
+		"contactTitle" : "Accounting Manager",
+		"address" : {
+			"street" : "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city" : "Barquisimeto",
+			"region" : "Lara",
+			"postalCode" : 3508,
+			"country" : "Venezuela",
+			"phone" : "(9) 331-6954"
+		}
+	},
+	{
+		"customerID" : "OLDWO",
+		"companyName" : "Old World Delicatessen",
+		"contactName" : "Rene Phillips",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "2743 Bering St.",
+			"city" : "Anchorage",
+			"region" : "AK",
+			"postalCode" : 99508,
+			"country" : "USA",
+			"phone" : "(907) 555-7584"
+		}
+	},
+	{
+		"customerID" : "OTTIK",
+		"companyName" : "Ottilies Käseladen",
+		"contactName" : "Henriette Pfalzheim",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "Mehrheimerstr. 369",
+			"city" : "Köln",
+			"region" : "NULL",
+			"postalCode" : 50739,
+			"country" : "Germany",
+			"phone" : "0221-0644327"
+		}
+	},
+	{
+		"customerID" : "PICCO",
+		"companyName" : "Piccolo und mehr",
+		"contactName" : "Georg Pipps",
+		"contactTitle" : "Sales Manager",
+		"address" : {
+			"street" : "Geislweg 14",
+			"city" : "Salzburg",
+			"region" : "NULL",
+			"postalCode" : 5020,
+			"country" : "Austria",
+			"phone" : "6562-9722"
+		}
+	},
+	{
+		"customerID" : "PARIS",
+		"companyName" : "Paris spécialités",
+		"contactName" : "Marie Bertrand",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "265 boulevard Charonne",
+			"city" : "Paris",
+			"region" : "NULL",
+			"postalCode" : 75012,
+			"country" : "France",
+			"phone" : "(1) 42.34.22.66"
+		}
+	},
+	{
+		"customerID" : "PERIC",
+		"companyName" : "Pericles Comidas clásicas",
+		"contactName" : "Guillermo Fernández",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "Calle Dr. Jorge Cash 321",
+			"city" : "México D.F.",
+			"region" : "NULL",
+			"postalCode" : 5033,
+			"country" : "Mexico",
+			"phone" : "(5) 552-3745"
+		}
+	},
+	{
+		"customerID" : "PRINI",
+		"companyName" : "Princesa Isabel Vinhos",
+		"contactName" : "Isabel de Castro",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "Estrada da saúde n. 58",
+			"city" : "Lisboa",
+			"region" : "NULL",
+			"postalCode" : 1756,
+			"country" : "Portugal",
+			"phone" : "(1) 356-5634"
+		}
+	},
+	{
+		"customerID" : "LONEP",
+		"companyName" : "Lonesome Pine Restaurant",
+		"contactName" : "Fran Wilson",
+		"contactTitle" : "Sales Manager",
+		"address" : {
+			"street" : "89 Chiaroscuro Rd.",
+			"city" : "Portland",
+			"region" : "OR",
+			"postalCode" : 97219,
+			"country" : "USA",
+			"phone" : "(503) 555-9573"
+		}
+	},
+	{
+		"customerID" : "QUEEN",
+		"companyName" : "Queen Cozinha",
+		"contactName" : "Lúcia Carvalho",
+		"contactTitle" : "Marketing Assistant",
+		"address" : {
+			"street" : "Alameda dos Canàrios 891",
+			"city" : "Sao Paulo",
+			"region" : "SP",
+			"postalCode" : "05487-020",
+			"country" : "Brazil",
+			"phone" : "(11) 555-1189"
+		}
+	},
+	{
+		"customerID" : "RATTC",
+		"companyName" : "Rattlesnake Canyon Grocery",
+		"contactName" : "Paula Wilson",
+		"contactTitle" : "Assistant Sales Representative",
+		"address" : {
+			"street" : "2817 Milton Dr.",
+			"city" : "Albuquerque",
+			"region" : "NM",
+			"postalCode" : 87110,
+			"country" : "USA",
+			"phone" : "(505) 555-5939"
+		}
+	},
+	{
+		"customerID" : "REGGC",
+		"companyName" : "Reggiani Caseifici",
+		"contactName" : "Maurizio Moroni",
+		"contactTitle" : "Sales Associate",
+		"address" : {
+			"street" : "Strada Provinciale 124",
+			"city" : "Reggio Emilia",
+			"region" : "NULL",
+			"postalCode" : 42100,
+			"country" : "Italy",
+			"phone" : "0522-556721"
+		}
+	},
+	{
+		"customerID" : "QUEDE",
+		"companyName" : "Que Delícia",
+		"contactName" : "Bernardo Batista",
+		"contactTitle" : "Accounting Manager",
+		"address" : {
+			"street" : "Rua da Panificadora",
+			"city" : "12Rio de Janeiro",
+			"region" : "RJ",
+			"postalCode" : "02389-673",
+			"country" : "Brazil",
+			"phone" : "(21) 555-4252"
+		}
+	},
+	{
+		"customerID" : "RANCH",
+		"companyName" : "Rancho grande",
+		"contactName" : "Sergio Gutiérrez",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "Av. del Libertador 900",
+			"city" : "Buenos Aires",
+			"region" : "NULL",
+			"postalCode" : 1010,
+			"country" : "Argentina",
+			"phone" : "(1) 123-5555"
+		}
+	},
+	{
+		"customerID" : "ROMEY",
+		"companyName" : "Romero y tomillo",
+		"contactName" : "Alejandra Camino",
+		"contactTitle" : "Accounting Manager",
+		"address" : {
+			"street" : "Gran Vía 1",
+			"city" : "Madrid",
+			"region" : "NULL",
+			"postalCode" : 28001,
+			"country" : "Spain",
+			"phone" : "(91) 745 6200"
+		}
+	},
+	{
+		"customerID" : "QUICK",
+		"companyName" : "QUICK-Stop",
+		"contactName" : "Horst Kloss",
+		"contactTitle" : "Accounting Manager",
+		"address" : {
+			"street" : "Taucherstraße 10",
+			"city" : "Cunewalde",
+			"region" : "NULL",
+			"postalCode" : 1307,
+			"country" : "Germany",
+			"phone" : "0372-035188"
+		}
+	},
+	{
+		"customerID" : "RICAR",
+		"companyName" : "Ricardo Adocicados",
+		"contactName" : "Janete Limeira",
+		"contactTitle" : "Assistant Sales Agent",
+		"address" : {
+			"street" : "Av. Copacabana 267",
+			"city" : "Rio de Janeiro",
+			"region" : "RJ",
+			"postalCode" : "02389-890",
+			"country" : "Brazil",
+			"phone" : "(21) 555-3412"
+		}
+	},
+	{
+		"customerID" : "RICSU",
+		"companyName" : "Richter Supermarkt",
+		"contactName" : "Michael Holz",
+		"contactTitle" : "Sales Manager",
+		"address" : {
+			"street" : "Grenzacherweg 237",
+			"city" : "Genève",
+			"region" : "NULL",
+			"postalCode" : 1203,
+			"country" : "Switzerland",
+			"phone" : "0897-034214"
+		}
+	},
+	{
+		"customerID" : "SANTG",
+		"companyName" : "Santé Gourmet",
+		"contactName" : "Jonas Bergulfsen",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "Erling Skakkes gate 78",
+			"city" : "Stavern",
+			"region" : "NULL",
+			"postalCode" : 4110,
+			"country" : "Norway",
+			"phone" : "07-98 92 35"
+		}
+	},
+	{
+		"customerID" : "SAVEA",
+		"companyName" : "Save-a-lot Markets",
+		"contactName" : "Jose Pavarotti",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "187 Suffolk Ln.",
+			"city" : "Boise",
+			"region" : "ID",
+			"postalCode" : 83720,
+			"country" : "USA",
+			"phone" : "(208) 555-8097"
+		}
+	},
+	{
+		"customerID" : "SEVES",
+		"companyName" : "Seven Seas Imports",
+		"contactName" : "Hari Kumar",
+		"contactTitle" : "Sales Manager",
+		"address" : {
+			"street" : "90 Wadhurst Rd.",
+			"city" : "London",
+			"region" : "NULL",
+			"postalCode" : "OX15 4NB",
+			"country" : "UK",
+			"phone" : "(171) 555-1717"
+		}
+	},
+	{
+		"customerID" : "SIMOB",
+		"companyName" : "Simons bistro",
+		"contactName" : "Jytte Petersen",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "Vinbæltet 34",
+			"city" : "Kobenhavn",
+			"region" : "NULL",
+			"postalCode" : 1734,
+			"country" : "Denmark",
+			"phone" : "31 12 34 56"
+		}
+	},
+	{
+		"customerID" : "SPECD",
+		"companyName" : "Spécialités du monde",
+		"contactName" : "Dominique Perrier",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "25 rue Lauriston",
+			"city" : "Paris",
+			"region" : "NULL",
+			"postalCode" : 75016,
+			"country" : "France",
+			"phone" : "(1) 47.55.60.10"
+		}
+	},
+	{
+		"customerID" : "SPLIR",
+		"companyName" : "Split Rail Beer & Ale",
+		"contactName" : "Art Braunschweiger",
+		"contactTitle" : "Sales Manager",
+		"address" : {
+			"street" : "P.O. Box 555",
+			"city" : "Lander",
+			"region" : "WY",
+			"postalCode" : 82520,
+			"country" : "USA",
+			"phone" : "(307) 555-4680"
+		}
+	},
+	{
+		"customerID" : "SUPRD",
+		"companyName" : "Suprêmes délices",
+		"contactName" : "Pascale Cartrain",
+		"contactTitle" : "Accounting Manager",
+		"address" : {
+			"street" : "Boulevard Tirou 255",
+			"city" : "Charleroi",
+			"region" : "NULL",
+			"postalCode" : "B-6000",
+			"country" : "Belgium",
+			"phone" : "(071) 23 67 22 20"
+		}
+	},
+	{
+		"customerID" : "THEBI",
+		"companyName" : "The Big Cheese",
+		"contactName" : "Liz Nixon",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "89 Jefferson Way Suite 2",
+			"city" : "Portland",
+			"region" : "OR",
+			"postalCode" : 97201,
+			"country" : "USA",
+			"phone" : "(503) 555-3612"
+		}
+	},
+	{
+		"customerID" : "THECR",
+		"companyName" : "The Cracker Box",
+		"contactName" : "Liu Wong",
+		"contactTitle" : "Marketing Assistant",
+		"address" : {
+			"street" : "55 Grizzly Peak Rd.",
+			"city" : "Butte",
+			"region" : "MT",
+			"postalCode" : 59801,
+			"country" : "USA",
+			"phone" : "(406) 555-5834"
+		}
+	},
+	{
+		"customerID" : "TOMSP",
+		"companyName" : "Toms Spezialitäten",
+		"contactName" : "Karin Josephs",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "Luisenstr. 48",
+			"city" : "Münster",
+			"region" : "NULL",
+			"postalCode" : 44087,
+			"country" : "Germany",
+			"phone" : "0251-031259"
+		}
+	},
+	{
+		"customerID" : "TORTU",
+		"companyName" : "Tortuga Restaurante",
+		"contactName" : "Miguel Angel Paolino",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "Avda. Azteca 123",
+			"city" : "México D.F.",
+			"region" : "NULL",
+			"postalCode" : 5033,
+			"country" : "Mexico",
+			"phone" : "(5) 555-2933"
+		}
+	},
+	{
+		"customerID" : "TRADH",
+		"companyName" : "Tradição Hipermercados",
+		"contactName" : "Anabela Domingues",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "Av. Inês de Castro 414",
+			"city" : "Sao Paulo",
+			"region" : "SP",
+			"postalCode" : "05634-030",
+			"country" : "Brazil",
+			"phone" : "(11) 555-2167"
+		}
+	},
+	{
+		"customerID" : "TRAIH",
+		"companyName" : "Trail's Head Gourmet Provisioners",
+		"contactName" : "Helvetius Nagy",
+		"contactTitle" : "Sales Associate",
+		"address" : {
+			"street" : "722 DaVinci Blvd.",
+			"city" : "Kirkland",
+			"region" : "WA",
+			"postalCode" : 98034,
+			"country" : "USA",
+			"phone" : "(206) 555-8257"
+		}
+	},
+	{
+		"customerID" : "VAFFE",
+		"companyName" : "Vaffeljernet",
+		"contactName" : "Palle Ibsen",
+		"contactTitle" : "Sales Manager",
+		"address" : {
+			"street" : "Smagsloget 45",
+			"city" : "Århus",
+			"region" : "NULL",
+			"postalCode" : 8200,
+			"country" : "Denmark",
+			"phone" : "86 21 32 43"
+		}
+	},
+	{
+		"customerID" : "VICTE",
+		"companyName" : "Victuailles en stock",
+		"contactName" : "Mary Saveley",
+		"contactTitle" : "Sales Agent",
+		"address" : {
+			"street" : "2 rue du Commerce",
+			"city" : "Lyon",
+			"region" : "NULL",
+			"postalCode" : 69004,
+			"country" : "France",
+			"phone" : "78.32.54.86"
+		}
+	},
+	{
+		"customerID" : "VINET",
+		"companyName" : "Vins et alcools Chevalier",
+		"contactName" : "Paul Henriot",
+		"contactTitle" : "Accounting Manager",
+		"address" : {
+			"street" : "59 rue de l'Abbaye",
+			"city" : "Reims",
+			"region" : "NULL",
+			"postalCode" : 51100,
+			"country" : "France",
+			"phone" : "26.47.15.10"
+		}
+	},
+	{
+		"customerID" : "WANDK",
+		"companyName" : "Die Wandernde Kuh",
+		"contactName" : "Rita Müller",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "Adenauerallee 900",
+			"city" : "Stuttgart",
+			"region" : "NULL",
+			"postalCode" : 70563,
+			"country" : "Germany",
+			"phone" : "0711-020361"
+		}
+	},
+	{
+		"customerID" : "WARTH",
+		"companyName" : "Wartian Herkku",
+		"contactName" : "Pirkko Koskitalo",
+		"contactTitle" : "Accounting Manager",
+		"address" : {
+			"street" : "Torikatu 38",
+			"city" : "Oulu",
+			"region" : "NULL",
+			"postalCode" : 90110,
+			"country" : "Finland",
+			"phone" : "981-443655"
+		}
+	},
+	{
+		"customerID" : "WELLI",
+		"companyName" : "Wellington Importadora",
+		"contactName" : "Paula Parente",
+		"contactTitle" : "Sales Manager",
+		"address" : {
+			"street" : "Rua do Mercado 12",
+			"city" : "Resende",
+			"region" : "SP",
+			"postalCode" : "08737-363",
+			"country" : "Brazil",
+			"phone" : "(14) 555-8122"
+		}
+	},
+	{
+		"customerID" : "WHITC",
+		"companyName" : "White Clover Markets",
+		"contactName" : "Karl Jablonski",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "305 - 14th Ave. S. Suite 3B",
+			"city" : "Seattle",
+			"region" : "WA",
+			"postalCode" : 98128,
+			"country" : "USA",
+			"phone" : "(206) 555-4112"
+		}
+	},
+	{
+		"customerID" : "WILMK",
+		"companyName" : "Wilman Kala",
+		"contactName" : "Matti Karttunen",
+		"contactTitle" : "Owner/Marketing Assistant",
+		"address" : {
+			"street" : "Keskuskatu 45",
+			"city" : "Helsinki",
+			"region" : "NULL",
+			"postalCode" : 21240,
+			"country" : "Finland",
+			"phone" : "90-224 8858"
+		}
+	},
+	{
+		"customerID" : "WOLZA",
+		"companyName" : "Wolski  Zajazd",
+		"contactName" : "Zbyszek Piestrzeniewicz",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "ul. Filtrowa 68",
+			"city" : "Warszawa",
+			"region" : "NULL",
+			"postalCode" : "01-012",
+			"country" : "Poland",
+			"phone" : "(26) 642-7012"
+		}
+	}
+]
diff --git a/vue-options-api-demos/grid/shared/employees.json b/vue-options-api-demos/grid/shared/employees.json
new file mode 100644
index 00000000..ca4d4a8b
--- /dev/null
+++ b/vue-options-api-demos/grid/shared/employees.json
@@ -0,0 +1,241 @@
+
+[
+	{
+		"employeeID" : 2,
+		"lastName" : "Fuller",
+		"firstName" : "Andrew",
+		"title" : "Vice President Sales",
+		"titleOfCourtesy" : "Dr.",
+		"birthDate" : "1952-02-19 00:00:00.000",
+		"hireDate" : "1992-08-14 00:00:00.000",
+		"address" : {
+			"street" : "908 W. Capital Way",
+			"city" : "Tacoma",
+			"region" : "WA",
+			"postalCode" : 98401,
+			"country" : "USA",
+			"phone" : "(206) 555-9482"
+		},
+		"notes" : "Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981.  He is fluent in French and Italian and reads German.  He joined the company as a sales representative was promoted to sales manager",
+		"reportsTo" : "NULL",
+		"territoryIDs" : [
+			1730,
+			1833,
+			2116,
+			2139,
+			2184,
+			40222,
+			1581
+		]
+	},
+	{
+		"employeeID" : 5,
+		"lastName" : "Buchanan",
+		"firstName" : "Steven",
+		"title" : "Sales Manager",
+		"titleOfCourtesy" : "Mr.",
+		"birthDate" : "1955-03-04 00:00:00.000",
+		"hireDate" : "1993-10-17 00:00:00.000",
+		"address" : {
+			"street" : "14 Garrett Hill",
+			"city" : "London",
+			"region" : "NULL",
+			"postalCode" : "SW1 8JR",
+			"country" : "UK",
+			"phone" : "(71) 555-4848"
+		},
+		"notes" : "Steven Buchanan graduated from St. Andrews University in Scotland with a BSC degree in 1976.  Upon joining the company as a sales representative in 1992 he spent 6 months in an orientation program at the Seattle office.",
+		"reportsTo" : 2,
+		"territoryIDs" : [
+			2903,
+			7960,
+			8837,
+			10019,
+			10038,
+			11747,
+			14450
+		]
+	},
+	{
+		"employeeID" : 1,
+		"lastName" : "Davolio",
+		"firstName" : "Nancy",
+		"title" : "Sales Representative",
+		"titleOfCourtesy" : "Ms.",
+		"birthDate" : "1948-12-08 00:00:00.000",
+		"hireDate" : "1992-05-01 00:00:00.000",
+		"address" : {
+			"street" : "507 20th Ave. E. Apt. 2A",
+			"city" : "Seattle",
+			"region" : "WA",
+			"postalCode" : 98122,
+			"country" : "USA",
+			"phone" : "(206) 555-9857"
+		},
+		"notes" : "Education includes a BA in psychology from Colorado State University in 1970.  She also completed The Art of the Cold Call.  Nancy is a member of Toastmasters International.",
+		"reportsTo" : 2,
+		"territoryIDs" : [
+			6897,
+			19713
+		]
+	},
+	{
+		"employeeID" : 3,
+		"lastName" : "Leverling",
+		"firstName" : "Janet",
+		"title" : "Sales Representative",
+		"titleOfCourtesy" : "Ms.",
+		"birthDate" : "1963-08-30 00:00:00.000",
+		"hireDate" : "1992-04-01 00:00:00.000",
+		"address" : {
+			"street" : "722 Moss Bay Blvd.",
+			"city" : "Kirkland",
+			"region" : "WA",
+			"postalCode" : 98033,
+			"country" : "USA",
+			"phone" : "(206) 555-3412"
+		},
+		"notes" : "Janet has a BS degree in chemistry from Boston College (1984). She has also completed a certificate program in food retailing management.  Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.",
+		"reportsTo" : 2,
+		"territoryIDs" : [
+			30346,
+			31406,
+			32859,
+			33607
+		]
+	},
+	{
+		"employeeID" : 4,
+		"lastName" : "Peacock",
+		"firstName" : "Margaret",
+		"title" : "Sales Representative",
+		"titleOfCourtesy" : "Mrs.",
+		"birthDate" : "1937-09-19 00:00:00.000",
+		"hireDate" : "1993-05-03 00:00:00.000",
+		"address" : {
+			"street" : "4110 Old Redmond Rd.",
+			"city" : "Redmond",
+			"region" : "WA",
+			"postalCode" : 98052,
+			"country" : "USA",
+			"phone" : "(206) 555-8122"
+		},
+		"notes" : "Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American Institute of Culinary Arts (1966).  She was assigned to the London office temporarily from July through November 1992.",
+		"reportsTo" : 2,
+		"territoryIDs" : [
+			20852,
+			27403,
+			27511
+		]
+	},
+	{
+		"employeeID" : 6,
+		"lastName" : "Suyama",
+		"firstName" : "Michael",
+		"title" : "Sales Representative",
+		"titleOfCourtesy" : "Mr.",
+		"birthDate" : "1963-07-02 00:00:00.000",
+		"hireDate" : "1993-10-17 00:00:00.000",
+		"address" : {
+			"street" : "Coventry House Miner Rd.",
+			"city" : "London",
+			"region" : "NULL",
+			"postalCode" : "EC2 7JR",
+			"country" : "UK",
+			"phone" : "(71) 555-7773"
+		},
+		"notes" : "Michael is a graduate of Sussex University (MA Economics 1983) and the University of California at Los Angeles (MBA marketing 1986).  He has also taken the courses Multi-Cultural Selling and Time Management for the Sales Professional.",
+		"reportsTo" : 5,
+		"territoryIDs" : [
+			85014,
+			85251,
+			98004,
+			98104,
+			98052
+		]
+	},
+	{
+		"employeeID" : 7,
+		"lastName" : "King",
+		"firstName" : "Robert",
+		"title" : "Sales Representative",
+		"titleOfCourtesy" : "Mr.",
+		"birthDate" : "1960-05-29 00:00:00.000",
+		"hireDate" : "1994-01-02 00:00:00.000",
+		"address" : {
+			"street" : "Edgeham Hollow Winchester Way",
+			"city" : "London",
+			"region" : "NULL",
+			"postalCode" : "RG1 9SP",
+			"country" : "UK",
+			"phone" : "(71) 555-5598"
+		},
+		"notes" : "Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the University of Michigan in 1992 the year he joined the company.",
+		"reportsTo" : 5,
+		"territoryIDs" : [
+			60601,
+			80202,
+			80909,
+			90405,
+			94025,
+			94105,
+			95008,
+			95054,
+			95060,
+			60179
+		]
+	},
+	{
+		"employeeID" : 8,
+		"lastName" : "Callahan",
+		"firstName" : "Laura",
+		"title" : "Inside Sales Coordinator",
+		"titleOfCourtesy" : "Ms.",
+		"birthDate" : "1958-01-09 00:00:00.000",
+		"hireDate" : "1994-03-05 00:00:00.000",
+		"address" : {
+			"street" : "4726 11th Ave. N.E.",
+			"city" : "Seattle",
+			"region" : "WA",
+			"postalCode" : 98105,
+			"country" : "USA",
+			"phone" : "(206) 555-1189"
+		},
+		"notes" : "Laura received a BA in psychology from the University of Washington.  She has also completed a course in business French.  She reads and writes French.",
+		"reportsTo" : 2,
+		"territoryIDs" : [
+			19428,
+			44122,
+			45839,
+			53404
+		]
+	},
+	{
+		"employeeID" : 9,
+		"lastName" : "Dodsworth",
+		"firstName" : "Anne",
+		"title" : "Sales Representative",
+		"titleOfCourtesy" : "Ms.",
+		"birthDate" : "1966-01-27 00:00:00.000",
+		"hireDate" : "1994-11-15 00:00:00.000",
+		"address" : {
+			"street" : "7 Houndstooth Rd.",
+			"city" : "London",
+			"region" : "NULL",
+			"postalCode" : "WG2 7LT",
+			"country" : "UK",
+			"phone" : "(71) 555-4444"
+		},
+		"notes" : "Anne has a BA degree in English from St. Lawrence College.  She is fluent in French and German.",
+		"reportsTo" : 5,
+		"territoryIDs" : [
+			3049,
+			3801,
+			48075,
+			48084,
+			48304,
+			55113,
+			55439
+		]
+	}
+]
diff --git a/vue-options-api-demos/grid/shared/es.json b/vue-options-api-demos/grid/shared/es.json
new file mode 100644
index 00000000..72eb2b1c
--- /dev/null
+++ b/vue-options-api-demos/grid/shared/es.json
@@ -0,0 +1,55 @@
+{
+    "datepicker": {
+        "toggleCalendar": "Alternar calendario"
+    },
+    "calendar": {
+        "today": "Hoy"
+    },
+    "dateinput": {
+        "increment": "Incrementar valor",
+        "decrement": "Disminuir valor"
+    },
+    "numerictextbox": {
+        "increment": "Incrementar valor",
+        "decrement": "Disminuir valor"
+    },
+    "grid": {
+        "groupPanelEmpty": "Arrastre el título de una columna y suéltelo aquí para agrupar por ese criterio",
+        "noRecords": "No hay datos disponibles.",
+        "pagerFirstPage": "Ir a la primera página",
+        "pagerPreviousPage": "Ir a la página anterior",
+        "pagerNextPage": "Ir a la página siguiente",
+        "pagerLastPage": "Ir a la última página",
+        "pagerPage": "Página",
+        "pagerOf": "de",
+        "pagerTotalPages": "{0}",
+        "pagerItems": "ítems",
+        "pagerInfo": "{0} - {1} de {2} ítems",
+        "pagerItemsPerPage": "ítems por página",
+        "filterEqOperator": "Es igual a",
+        "filterNotEqOperator": "No es igual a",
+        "filterIsNullOperator": "Es nulo",
+        "filterIsNotNullOperator": "No es nulo",
+        "filterIsEmptyOperator": "Está vacío",
+        "filterIsNotEmptyOperator": "No está vacío",
+        "filterStartsWithOperator": "Comienza con",
+        "filterContainsOperator": "Contiene",
+        "filterNotContainsOperator": "No contiene",
+        "filterEndsWithOperator": "Termina en",
+        "filterGteOperator": "Es mayor o igual que",
+        "filterGtOperator": "Es mayor que",
+        "filterLteOperator": "Es menor o igual que",
+        "filterLtOperator": "Es menor o igual que",
+        "filterIsTrue": "Sí",
+        "filterIsFalse": "No",
+        "filterBooleanAll": "(Todas)",
+        "filterAfterOrEqualOperator": "Es posterior o igual a",
+        "filterAfterOperator": "Es posterior",
+        "filterBeforeOperator": "Es anterior",
+        "filterBeforeOrEqualOperator": "Es anterior o igual a",
+        "filterFilterButton": "Filtrar",
+        "filterClearButton": "Limpiar filtros",
+        "filterAndLogic": "Y",
+        "filterOrLogic": "O"
+    }
+}
diff --git a/vue-options-api-demos/grid/shared/keys.js b/vue-options-api-demos/grid/shared/keys.js
new file mode 100644
index 00000000..592fcc49
--- /dev/null
+++ b/vue-options-api-demos/grid/shared/keys.js
@@ -0,0 +1,21 @@
+const Keys = {
+    backspace: 8,
+    tab: 9,
+    enter: 13,
+    shift: 16,
+    esc: 27,
+    space: 32,
+    pageUp: 33,
+    pageDown: 34,
+    end: 35,
+    home: 36,
+    left: 37,
+    up: 38,
+    right: 39,
+    down: 40,
+    delete: 46
+};
+
+export {
+    Keys
+};
diff --git a/vue-options-api-demos/grid/shared/orders.json b/vue-options-api-demos/grid/shared/orders.json
new file mode 100644
index 00000000..9d8d8ac9
--- /dev/null
+++ b/vue-options-api-demos/grid/shared/orders.json
@@ -0,0 +1,25576 @@
+[
+	{
+		"orderID": 10271,
+		"customerID": "SPLIR",
+		"employeeID": 6,
+		"orderDate": "1996-08-01 00:00:00.000",
+		"requiredDate": "1996-08-29 00:00:00.000",
+		"shippedDate": "1996-08-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 4.54,
+		"shipName": "Split Rail Beer & Ale",
+		"shipAddress": {
+			"street": "P.O. Box 555",
+			"city": "Lander",
+			"region": "WY",
+			"postalCode": 82520,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10266,
+		"customerID": "WARTH",
+		"employeeID": 3,
+		"orderDate": "1996-07-26 00:00:00.000",
+		"requiredDate": "1996-09-06 00:00:00.000",
+		"shippedDate": "1996-07-31 00:00:00.000",
+		"shipVia": 3,
+		"freight": 25.73,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 12,
+				"unitPrice": 30.4,
+				"quantity": 12,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10279,
+		"customerID": "LEHMS",
+		"employeeID": 8,
+		"orderDate": "1996-08-13 00:00:00.000",
+		"requiredDate": "1996-09-10 00:00:00.000",
+		"shippedDate": "1996-08-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 25.83,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 15,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10292,
+		"customerID": "TRADH",
+		"employeeID": 1,
+		"orderDate": "1996-08-28 00:00:00.000",
+		"requiredDate": "1996-09-25 00:00:00.000",
+		"shippedDate": "1996-09-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.35,
+		"shipName": "Tradiçao Hipermercados",
+		"shipAddress": {
+			"street": "Av. Inês de Castro 414",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05634-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 20,
+				"unitPrice": 64.8,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10295,
+		"customerID": "VINET",
+		"employeeID": 2,
+		"orderDate": "1996-09-02 00:00:00.000",
+		"requiredDate": "1996-09-30 00:00:00.000",
+		"shippedDate": "1996-09-10 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.15,
+		"shipName": "Vins et alcools Chevalier",
+		"shipAddress": {
+			"street": "59 rue de l'Abbaye",
+			"city": "Reims",
+			"region": "NULL",
+			"postalCode": 51100,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 4,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10313,
+		"customerID": "QUICK",
+		"employeeID": 2,
+		"orderDate": "1996-09-24 00:00:00.000",
+		"requiredDate": "1996-10-22 00:00:00.000",
+		"shippedDate": "1996-10-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.96,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 15.2,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10317,
+		"customerID": "LONEP",
+		"employeeID": 6,
+		"orderDate": "1996-09-30 00:00:00.000",
+		"requiredDate": "1996-10-28 00:00:00.000",
+		"shippedDate": "1996-10-10 00:00:00.000",
+		"shipVia": 1,
+		"freight": 12.69,
+		"shipName": "Lonesome Pine Restaurant",
+		"shipAddress": {
+			"street": "89 Chiaroscuro Rd.",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97219,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 14.4,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10322,
+		"customerID": "PERIC",
+		"employeeID": 7,
+		"orderDate": "1996-10-04 00:00:00.000",
+		"requiredDate": "1996-11-01 00:00:00.000",
+		"shippedDate": "1996-10-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 0.4,
+		"shipName": "Pericles Comidas clásicas",
+		"shipAddress": {
+			"street": "Calle Dr. Jorge Cash 321",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 52,
+				"unitPrice": 5.6,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10320,
+		"customerID": "WARTH",
+		"employeeID": 5,
+		"orderDate": "1996-10-03 00:00:00.000",
+		"requiredDate": "1996-10-17 00:00:00.000",
+		"shippedDate": "1996-10-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 34.57,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10321,
+		"customerID": "ISLAT",
+		"employeeID": 3,
+		"orderDate": "1996-10-03 00:00:00.000",
+		"requiredDate": "1996-10-31 00:00:00.000",
+		"shippedDate": "1996-10-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.43,
+		"shipName": "Island Trading",
+		"shipAddress": {
+			"street": "Garden House Crowther Way",
+			"city": "Cowes",
+			"region": "Isle of Wight",
+			"postalCode": "PO31 7PJ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 14.4,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10336,
+		"customerID": "PRINI",
+		"employeeID": 7,
+		"orderDate": "1996-10-23 00:00:00.000",
+		"requiredDate": "1996-11-20 00:00:00.000",
+		"shippedDate": "1996-10-25 00:00:00.000",
+		"shipVia": 2,
+		"freight": 15.51,
+		"shipName": "Princesa Isabel Vinhos",
+		"shipAddress": {
+			"street": "Estrada da saúde n. 58",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1756,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 17.6,
+				"quantity": 18,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10349,
+		"customerID": "SPLIR",
+		"employeeID": 7,
+		"orderDate": "1996-11-08 00:00:00.000",
+		"requiredDate": "1996-12-06 00:00:00.000",
+		"shippedDate": "1996-11-15 00:00:00.000",
+		"shipVia": 1,
+		"freight": 8.63,
+		"shipName": "Split Rail Beer & Ale",
+		"shipAddress": {
+			"street": "P.O. Box 555",
+			"city": "Lander",
+			"region": "WY",
+			"postalCode": 82520,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10331,
+		"customerID": "BONAP",
+		"employeeID": 9,
+		"orderDate": "1996-10-16 00:00:00.000",
+		"requiredDate": "1996-11-27 00:00:00.000",
+		"shippedDate": "1996-10-21 00:00:00.000",
+		"shipVia": 1,
+		"freight": 10.19,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10365,
+		"customerID": "ANTON",
+		"employeeID": 3,
+		"orderDate": "1996-11-27 00:00:00.000",
+		"requiredDate": "1996-12-25 00:00:00.000",
+		"shippedDate": "1996-12-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 22,
+		"shipName": "Antonio Moreno Taquería",
+		"shipAddress": {
+			"street": "Mataderos  2312",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5023,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10371,
+		"customerID": "LAMAI",
+		"employeeID": 1,
+		"orderDate": "1996-12-03 00:00:00.000",
+		"requiredDate": "1996-12-31 00:00:00.000",
+		"shippedDate": "1996-12-24 00:00:00.000",
+		"shipVia": 1,
+		"freight": 0.45,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 15.2,
+				"quantity": 6,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10376,
+		"customerID": "MEREP",
+		"employeeID": 1,
+		"orderDate": "1996-12-09 00:00:00.000",
+		"requiredDate": "1997-01-06 00:00:00.000",
+		"shippedDate": "1996-12-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 20.39,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 42,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10378,
+		"customerID": "FOLKO",
+		"employeeID": 5,
+		"orderDate": "1996-12-10 00:00:00.000",
+		"requiredDate": "1997-01-07 00:00:00.000",
+		"shippedDate": "1996-12-19 00:00:00.000",
+		"shipVia": 3,
+		"freight": 5.44,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10392,
+		"customerID": "PICCO",
+		"employeeID": 2,
+		"orderDate": "1996-12-24 00:00:00.000",
+		"requiredDate": "1997-01-21 00:00:00.000",
+		"shippedDate": "1997-01-01 00:00:00.000",
+		"shipVia": 3,
+		"freight": 122.46,
+		"shipName": "Piccolo und mehr",
+		"shipAddress": {
+			"street": "Geislweg 14",
+			"city": "Salzburg",
+			"region": "NULL",
+			"postalCode": 5020,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10391,
+		"customerID": "DRACD",
+		"employeeID": 3,
+		"orderDate": "1996-12-23 00:00:00.000",
+		"requiredDate": "1997-01-20 00:00:00.000",
+		"shippedDate": "1996-12-31 00:00:00.000",
+		"shipVia": 3,
+		"freight": 5.45,
+		"shipName": "Drachenblut Delikatessen",
+		"shipAddress": {
+			"street": "Walserweg 21",
+			"city": "Aachen",
+			"region": "NULL",
+			"postalCode": 52066,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 4.8,
+				"quantity": 18,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10405,
+		"customerID": "LINOD",
+		"employeeID": 1,
+		"orderDate": "1997-01-06 00:00:00.000",
+		"requiredDate": "1997-02-03 00:00:00.000",
+		"shippedDate": "1997-01-22 00:00:00.000",
+		"shipVia": 1,
+		"freight": 34.82,
+		"shipName": "LINO-Delicateses",
+		"shipAddress": {
+			"street": "Ave. 5 de Mayo Porlamar",
+			"city": "I. de Margarita",
+			"region": "Nueva Esparta",
+			"postalCode": 4980,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 3,
+				"unitPrice": 8,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10412,
+		"customerID": "WARTH",
+		"employeeID": 8,
+		"orderDate": "1997-01-13 00:00:00.000",
+		"requiredDate": "1997-02-10 00:00:00.000",
+		"shippedDate": "1997-01-15 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.77,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 18.6,
+				"quantity": 20,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10422,
+		"customerID": "FRANS",
+		"employeeID": 2,
+		"orderDate": "1997-01-22 00:00:00.000",
+		"requiredDate": "1997-02-19 00:00:00.000",
+		"shippedDate": "1997-01-31 00:00:00.000",
+		"shipVia": 1,
+		"freight": 3.02,
+		"shipName": "Franchi S.p.A.",
+		"shipAddress": {
+			"street": "Via Monte Bianco 34",
+			"city": "Torino",
+			"region": "NULL",
+			"postalCode": 10100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 2,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10433,
+		"customerID": "PRINI",
+		"employeeID": 3,
+		"orderDate": "1997-02-03 00:00:00.000",
+		"requiredDate": "1997-03-03 00:00:00.000",
+		"shippedDate": "1997-03-04 00:00:00.000",
+		"shipVia": 3,
+		"freight": 73.83,
+		"shipName": "Princesa Isabel Vinhos",
+		"shipAddress": {
+			"street": "Estrada da saúde n. 58",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1756,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 28,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10427,
+		"customerID": "PICCO",
+		"employeeID": 4,
+		"orderDate": "1997-01-27 00:00:00.000",
+		"requiredDate": "1997-02-24 00:00:00.000",
+		"shippedDate": "1997-03-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 31.29,
+		"shipName": "Piccolo und mehr",
+		"shipAddress": {
+			"street": "Geislweg 14",
+			"city": "Salzburg",
+			"region": "NULL",
+			"postalCode": 5020,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 18.6,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10437,
+		"customerID": "WARTH",
+		"employeeID": 8,
+		"orderDate": "1997-02-05 00:00:00.000",
+		"requiredDate": "1997-03-05 00:00:00.000",
+		"shippedDate": "1997-02-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 19.97,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10428,
+		"customerID": "REGGC",
+		"employeeID": 7,
+		"orderDate": "1997-01-28 00:00:00.000",
+		"requiredDate": "1997-02-25 00:00:00.000",
+		"shippedDate": "1997-02-04 00:00:00.000",
+		"shipVia": 1,
+		"freight": 11.09,
+		"shipName": "Reggiani Caseifici",
+		"shipAddress": {
+			"street": "Strada Provinciale 124",
+			"city": "Reggio Emilia",
+			"region": "NULL",
+			"postalCode": 42100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 46,
+				"unitPrice": 9.6,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10441,
+		"customerID": "OLDWO",
+		"employeeID": 3,
+		"orderDate": "1997-02-10 00:00:00.000",
+		"requiredDate": "1997-03-24 00:00:00.000",
+		"shippedDate": "1997-03-14 00:00:00.000",
+		"shipVia": 2,
+		"freight": 73.02,
+		"shipName": "Old World Delicatessen",
+		"shipAddress": {
+			"street": "2743 Bering St.",
+			"city": "Anchorage",
+			"region": "AK",
+			"postalCode": 99508,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 27,
+				"unitPrice": 35.1,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10457,
+		"customerID": "KOENE",
+		"employeeID": 2,
+		"orderDate": "1997-02-25 00:00:00.000",
+		"requiredDate": "1997-03-25 00:00:00.000",
+		"shippedDate": "1997-03-03 00:00:00.000",
+		"shipVia": 1,
+		"freight": 11.57,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 36,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10478,
+		"customerID": "VICTE",
+		"employeeID": 2,
+		"orderDate": "1997-03-18 00:00:00.000",
+		"requiredDate": "1997-04-01 00:00:00.000",
+		"shippedDate": "1997-03-26 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.81,
+		"shipName": "Victuailles en stock",
+		"shipAddress": {
+			"street": "2 rue du Commerce",
+			"city": "Lyon",
+			"region": "NULL",
+			"postalCode": 69004,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 24.8,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10482,
+		"customerID": "LAZYK",
+		"employeeID": 1,
+		"orderDate": "1997-03-21 00:00:00.000",
+		"requiredDate": "1997-04-18 00:00:00.000",
+		"shippedDate": "1997-04-10 00:00:00.000",
+		"shipVia": 3,
+		"freight": 7.48,
+		"shipName": "Lazy K Kountry Store",
+		"shipAddress": {
+			"street": "12 Orchestra Terrace",
+			"city": "Walla Walla",
+			"region": "WA",
+			"postalCode": 99362,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10494,
+		"customerID": "COMMI",
+		"employeeID": 4,
+		"orderDate": "1997-04-02 00:00:00.000",
+		"requiredDate": "1997-04-30 00:00:00.000",
+		"shippedDate": "1997-04-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 65.99,
+		"shipName": "Comércio Mineiro",
+		"shipAddress": {
+			"street": "Av. dos Lusíadas 23",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05432-043",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10501,
+		"customerID": "BLAUS",
+		"employeeID": 9,
+		"orderDate": "1997-04-09 00:00:00.000",
+		"requiredDate": "1997-05-07 00:00:00.000",
+		"shippedDate": "1997-04-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 8.85,
+		"shipName": "Blauer See Delikatessen",
+		"shipAddress": {
+			"street": "Forsterstr. 57",
+			"city": "Mannheim",
+			"region": "NULL",
+			"postalCode": 68306,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10496,
+		"customerID": "TRADH",
+		"employeeID": 7,
+		"orderDate": "1997-04-04 00:00:00.000",
+		"requiredDate": "1997-05-02 00:00:00.000",
+		"shippedDate": "1997-04-07 00:00:00.000",
+		"shipVia": 2,
+		"freight": 46.77,
+		"shipName": "Tradiçao Hipermercados",
+		"shipAddress": {
+			"street": "Av. Inês de Castro 414",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05634-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10509,
+		"customerID": "BLAUS",
+		"employeeID": 4,
+		"orderDate": "1997-04-17 00:00:00.000",
+		"requiredDate": "1997-05-15 00:00:00.000",
+		"shippedDate": "1997-04-29 00:00:00.000",
+		"shipVia": 1,
+		"freight": 0.15,
+		"shipName": "Blauer See Delikatessen",
+		"shipAddress": {
+			"street": "Forsterstr. 57",
+			"city": "Mannheim",
+			"region": "NULL",
+			"postalCode": 68306,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10505,
+		"customerID": "MEREP",
+		"employeeID": 3,
+		"orderDate": "1997-04-14 00:00:00.000",
+		"requiredDate": "1997-05-12 00:00:00.000",
+		"shippedDate": "1997-04-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 7.13,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10545,
+		"customerID": "LAZYK",
+		"employeeID": 8,
+		"orderDate": "1997-05-22 00:00:00.000",
+		"requiredDate": "1997-06-19 00:00:00.000",
+		"shippedDate": "1997-06-26 00:00:00.000",
+		"shipVia": 2,
+		"freight": 11.92,
+		"shipName": "Lazy K Kountry Store",
+		"shipAddress": {
+			"street": "12 Orchestra Terrace",
+			"city": "Walla Walla",
+			"region": "WA",
+			"postalCode": 99362,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10556,
+		"customerID": "SIMOB",
+		"employeeID": 2,
+		"orderDate": "1997-06-03 00:00:00.000",
+		"requiredDate": "1997-07-15 00:00:00.000",
+		"shippedDate": "1997-06-13 00:00:00.000",
+		"shipVia": 1,
+		"freight": 9.8,
+		"shipName": "Simons bistro",
+		"shipAddress": {
+			"street": "Vinbæltet 34",
+			"city": "Kobenhavn",
+			"region": "NULL",
+			"postalCode": 1734,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10568,
+		"customerID": "GALED",
+		"employeeID": 3,
+		"orderDate": "1997-06-13 00:00:00.000",
+		"requiredDate": "1997-07-11 00:00:00.000",
+		"shippedDate": "1997-07-09 00:00:00.000",
+		"shipVia": 3,
+		"freight": 6.54,
+		"shipName": "Galería del gastronómo",
+		"shipAddress": {
+			"street": "Rambla de Cataluña 23",
+			"city": "Barcelona",
+			"region": "NULL",
+			"postalCode": 8022,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10581,
+		"customerID": "FAMIA",
+		"employeeID": 3,
+		"orderDate": "1997-06-26 00:00:00.000",
+		"requiredDate": "1997-07-24 00:00:00.000",
+		"shippedDate": "1997-07-02 00:00:00.000",
+		"shipVia": 1,
+		"freight": 3.01,
+		"shipName": "Familia Arquibaldo",
+		"shipAddress": {
+			"street": "Rua Orós 92",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05442-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 50,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10585,
+		"customerID": "WELLI",
+		"employeeID": 7,
+		"orderDate": "1997-07-01 00:00:00.000",
+		"requiredDate": "1997-07-29 00:00:00.000",
+		"shippedDate": "1997-07-10 00:00:00.000",
+		"shipVia": 1,
+		"freight": 13.41,
+		"shipName": "Wellington Importadora",
+		"shipAddress": {
+			"street": "Rua do Mercado 12",
+			"city": "Resende",
+			"region": "SP",
+			"postalCode": "08737-363",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10586,
+		"customerID": "REGGC",
+		"employeeID": 9,
+		"orderDate": "1997-07-02 00:00:00.000",
+		"requiredDate": "1997-07-30 00:00:00.000",
+		"shippedDate": "1997-07-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 0.48,
+		"shipName": "Reggiani Caseifici",
+		"shipAddress": {
+			"street": "Strada Provinciale 124",
+			"city": "Reggio Emilia",
+			"region": "NULL",
+			"postalCode": 42100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 4,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10589,
+		"customerID": "GREAL",
+		"employeeID": 8,
+		"orderDate": "1997-07-04 00:00:00.000",
+		"requiredDate": "1997-08-01 00:00:00.000",
+		"shippedDate": "1997-07-14 00:00:00.000",
+		"shipVia": 2,
+		"freight": 4.42,
+		"shipName": "Great Lakes Food Market",
+		"shipAddress": {
+			"street": "2732 Baker Blvd.",
+			"city": "Eugene",
+			"region": "OR",
+			"postalCode": 97403,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 4,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10584,
+		"customerID": "BLONP",
+		"employeeID": 4,
+		"orderDate": "1997-06-30 00:00:00.000",
+		"requiredDate": "1997-07-28 00:00:00.000",
+		"shippedDate": "1997-07-04 00:00:00.000",
+		"shipVia": 1,
+		"freight": 59.14,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 50,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10599,
+		"customerID": "BSBEV",
+		"employeeID": 6,
+		"orderDate": "1997-07-15 00:00:00.000",
+		"requiredDate": "1997-08-26 00:00:00.000",
+		"shippedDate": "1997-07-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 29.98,
+		"shipName": "B's Beverages",
+		"shipAddress": {
+			"street": "Fauntleroy Circus",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "EC2 5NT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10602,
+		"customerID": "VAFFE",
+		"employeeID": 8,
+		"orderDate": "1997-07-17 00:00:00.000",
+		"requiredDate": "1997-08-14 00:00:00.000",
+		"shippedDate": "1997-07-22 00:00:00.000",
+		"shipVia": 2,
+		"freight": 2.92,
+		"shipName": "Vaffeljernet",
+		"shipAddress": {
+			"street": "Smagsloget 45",
+			"city": "Århus",
+			"region": "NULL",
+			"postalCode": 8200,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 5,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10608,
+		"customerID": "TOMSP",
+		"employeeID": 4,
+		"orderDate": "1997-07-23 00:00:00.000",
+		"requiredDate": "1997-08-20 00:00:00.000",
+		"shippedDate": "1997-08-01 00:00:00.000",
+		"shipVia": 2,
+		"freight": 27.79,
+		"shipName": "Toms Spezialitäten",
+		"shipAddress": {
+			"street": "Luisenstr. 48",
+			"city": "Münster",
+			"region": "NULL",
+			"postalCode": 44087,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 28,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10610,
+		"customerID": "LAMAI",
+		"employeeID": 8,
+		"orderDate": "1997-07-25 00:00:00.000",
+		"requiredDate": "1997-08-22 00:00:00.000",
+		"shippedDate": "1997-08-06 00:00:00.000",
+		"shipVia": 1,
+		"freight": 26.78,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 21,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10615,
+		"customerID": "WILMK",
+		"employeeID": 2,
+		"orderDate": "1997-07-30 00:00:00.000",
+		"requiredDate": "1997-08-27 00:00:00.000",
+		"shippedDate": "1997-08-06 00:00:00.000",
+		"shipVia": 3,
+		"freight": 0.75,
+		"shipName": "Wilman Kala",
+		"shipAddress": {
+			"street": "Keskuskatu 45",
+			"city": "Helsinki",
+			"region": "NULL",
+			"postalCode": 21240,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10617,
+		"customerID": "GREAL",
+		"employeeID": 4,
+		"orderDate": "1997-07-31 00:00:00.000",
+		"requiredDate": "1997-08-28 00:00:00.000",
+		"shippedDate": "1997-08-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 18.53,
+		"shipName": "Great Lakes Food Market",
+		"shipAddress": {
+			"street": "2732 Baker Blvd.",
+			"city": "Eugene",
+			"region": "OR",
+			"postalCode": 97403,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 30,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10628,
+		"customerID": "BLONP",
+		"employeeID": 4,
+		"orderDate": "1997-08-12 00:00:00.000",
+		"requiredDate": "1997-09-09 00:00:00.000",
+		"shippedDate": "1997-08-20 00:00:00.000",
+		"shipVia": 3,
+		"freight": 30.36,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10631,
+		"customerID": "LAMAI",
+		"employeeID": 8,
+		"orderDate": "1997-08-14 00:00:00.000",
+		"requiredDate": "1997-09-11 00:00:00.000",
+		"shippedDate": "1997-08-15 00:00:00.000",
+		"shipVia": 1,
+		"freight": 0.87,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 8,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10639,
+		"customerID": "SANTG",
+		"employeeID": 7,
+		"orderDate": "1997-08-20 00:00:00.000",
+		"requiredDate": "1997-09-17 00:00:00.000",
+		"shippedDate": "1997-08-27 00:00:00.000",
+		"shipVia": 3,
+		"freight": 38.64,
+		"shipName": "Santé Gourmet",
+		"shipAddress": {
+			"street": "Erling Skakkes gate 78",
+			"city": "Stavern",
+			"region": "NULL",
+			"postalCode": 4110,
+			"country": "Norway"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 8,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10655,
+		"customerID": "REGGC",
+		"employeeID": 1,
+		"orderDate": "1997-09-03 00:00:00.000",
+		"requiredDate": "1997-10-01 00:00:00.000",
+		"shippedDate": "1997-09-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 4.41,
+		"shipName": "Reggiani Caseifici",
+		"shipAddress": {
+			"street": "Strada Provinciale 124",
+			"city": "Reggio Emilia",
+			"region": "NULL",
+			"postalCode": 42100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 20,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10660,
+		"customerID": "HUNGC",
+		"employeeID": 8,
+		"orderDate": "1997-09-08 00:00:00.000",
+		"requiredDate": "1997-10-06 00:00:00.000",
+		"shippedDate": "1997-10-15 00:00:00.000",
+		"shipVia": 1,
+		"freight": 111.29,
+		"shipName": "Hungry Coyote Import Store",
+		"shipAddress": {
+			"street": "City Center Plaza 516 Main St.",
+			"city": "Elgin",
+			"region": "OR",
+			"postalCode": 97827,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 20,
+				"unitPrice": 81,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10662,
+		"customerID": "LONEP",
+		"employeeID": 3,
+		"orderDate": "1997-09-09 00:00:00.000",
+		"requiredDate": "1997-10-07 00:00:00.000",
+		"shippedDate": "1997-09-18 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.28,
+		"shipName": "Lonesome Pine Restaurant",
+		"shipAddress": {
+			"street": "89 Chiaroscuro Rd.",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97219,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10669,
+		"customerID": "SIMOB",
+		"employeeID": 2,
+		"orderDate": "1997-09-15 00:00:00.000",
+		"requiredDate": "1997-10-13 00:00:00.000",
+		"shippedDate": "1997-09-22 00:00:00.000",
+		"shipVia": 1,
+		"freight": 24.39,
+		"shipName": "Simons bistro",
+		"shipAddress": {
+			"street": "Vinbæltet 34",
+			"city": "Kobenhavn",
+			"region": "NULL",
+			"postalCode": 1734,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10679,
+		"customerID": "BLONP",
+		"employeeID": 8,
+		"orderDate": "1997-09-23 00:00:00.000",
+		"requiredDate": "1997-10-21 00:00:00.000",
+		"shippedDate": "1997-09-30 00:00:00.000",
+		"shipVia": 3,
+		"freight": 27.94,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10683,
+		"customerID": "DUMON",
+		"employeeID": 2,
+		"orderDate": "1997-09-26 00:00:00.000",
+		"requiredDate": "1997-10-24 00:00:00.000",
+		"shippedDate": "1997-10-01 00:00:00.000",
+		"shipVia": 1,
+		"freight": 4.4,
+		"shipName": "Du monde entier",
+		"shipAddress": {
+			"street": "67 rue des Cinquante Otages",
+			"city": "Nantes",
+			"region": "NULL",
+			"postalCode": 44000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10674,
+		"customerID": "ISLAT",
+		"employeeID": 4,
+		"orderDate": "1997-09-18 00:00:00.000",
+		"requiredDate": "1997-10-16 00:00:00.000",
+		"shippedDate": "1997-09-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 0.9,
+		"shipName": "Island Trading",
+		"shipAddress": {
+			"street": "Garden House Crowther Way",
+			"city": "Cowes",
+			"region": "Isle of Wight",
+			"postalCode": "PO31 7PJ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10692,
+		"customerID": "ALFKI",
+		"employeeID": 4,
+		"orderDate": "1997-10-03 00:00:00.000",
+		"requiredDate": "1997-10-31 00:00:00.000",
+		"shippedDate": "1997-10-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 61.02,
+		"shipName": "Alfred's Futterkiste",
+		"shipAddress": {
+			"street": "Obere Str. 57",
+			"city": "Berlin",
+			"region": "NULL",
+			"postalCode": 12209,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 63,
+				"unitPrice": 43.9,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10689,
+		"customerID": "BERGS",
+		"employeeID": 1,
+		"orderDate": "1997-10-01 00:00:00.000",
+		"requiredDate": "1997-10-29 00:00:00.000",
+		"shippedDate": "1997-10-07 00:00:00.000",
+		"shipVia": 2,
+		"freight": 13.42,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 35,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10699,
+		"customerID": "MORGK",
+		"employeeID": 3,
+		"orderDate": "1997-10-09 00:00:00.000",
+		"requiredDate": "1997-11-06 00:00:00.000",
+		"shippedDate": "1997-10-13 00:00:00.000",
+		"shipVia": 3,
+		"freight": 0.58,
+		"shipName": "Morgenstern Gesundkost",
+		"shipAddress": {
+			"street": "Heerstr. 22",
+			"city": "Leipzig",
+			"region": "NULL",
+			"postalCode": 4179,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10721,
+		"customerID": "QUICK",
+		"employeeID": 5,
+		"orderDate": "1997-10-29 00:00:00.000",
+		"requiredDate": "1997-11-26 00:00:00.000",
+		"shippedDate": "1997-10-31 00:00:00.000",
+		"shipVia": 3,
+		"freight": 48.92,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 50,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10723,
+		"customerID": "WHITC",
+		"employeeID": 3,
+		"orderDate": "1997-10-30 00:00:00.000",
+		"requiredDate": "1997-11-27 00:00:00.000",
+		"shippedDate": "1997-11-25 00:00:00.000",
+		"shipVia": 1,
+		"freight": 21.72,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10738,
+		"customerID": "SPECD",
+		"employeeID": 2,
+		"orderDate": "1997-11-12 00:00:00.000",
+		"requiredDate": "1997-12-10 00:00:00.000",
+		"shippedDate": "1997-11-18 00:00:00.000",
+		"shipVia": 1,
+		"freight": 2.91,
+		"shipName": "Spécialités du monde",
+		"shipAddress": {
+			"street": "25 rue Lauriston",
+			"city": "Paris",
+			"region": "NULL",
+			"postalCode": 75016,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10741,
+		"customerID": "AROUT",
+		"employeeID": 4,
+		"orderDate": "1997-11-14 00:00:00.000",
+		"requiredDate": "1997-11-28 00:00:00.000",
+		"shippedDate": "1997-11-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 10.96,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 15,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10732,
+		"customerID": "BONAP",
+		"employeeID": 3,
+		"orderDate": "1997-11-06 00:00:00.000",
+		"requiredDate": "1997-12-04 00:00:00.000",
+		"shippedDate": "1997-11-07 00:00:00.000",
+		"shipVia": 1,
+		"freight": 16.97,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10743,
+		"customerID": "AROUT",
+		"employeeID": 1,
+		"orderDate": "1997-11-17 00:00:00.000",
+		"requiredDate": "1997-12-15 00:00:00.000",
+		"shippedDate": "1997-11-21 00:00:00.000",
+		"shipVia": 2,
+		"freight": 23.72,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 28,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10754,
+		"customerID": "MAGAA",
+		"employeeID": 6,
+		"orderDate": "1997-11-25 00:00:00.000",
+		"requiredDate": "1997-12-23 00:00:00.000",
+		"shippedDate": "1997-11-27 00:00:00.000",
+		"shipVia": 3,
+		"freight": 2.38,
+		"shipName": "Magazzini Alimentari Riuniti",
+		"shipAddress": {
+			"street": "Via Ludovico il Moro 22",
+			"city": "Bergamo",
+			"region": "NULL",
+			"postalCode": 24100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10744,
+		"customerID": "VAFFE",
+		"employeeID": 6,
+		"orderDate": "1997-11-17 00:00:00.000",
+		"requiredDate": "1997-12-15 00:00:00.000",
+		"shippedDate": "1997-11-24 00:00:00.000",
+		"shipVia": 1,
+		"freight": 69.19,
+		"shipName": "Vaffeljernet",
+		"shipAddress": {
+			"street": "Smagsloget 45",
+			"city": "Århus",
+			"region": "NULL",
+			"postalCode": 8200,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 50,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10765,
+		"customerID": "QUICK",
+		"employeeID": 3,
+		"orderDate": "1997-12-04 00:00:00.000",
+		"requiredDate": "1998-01-01 00:00:00.000",
+		"shippedDate": "1997-12-09 00:00:00.000",
+		"shipVia": 3,
+		"freight": 42.74,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 80,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10770,
+		"customerID": "HANAR",
+		"employeeID": 8,
+		"orderDate": "1997-12-09 00:00:00.000",
+		"requiredDate": "1998-01-06 00:00:00.000",
+		"shippedDate": "1997-12-17 00:00:00.000",
+		"shipVia": 3,
+		"freight": 5.32,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 15,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10771,
+		"customerID": "ERNSH",
+		"employeeID": 9,
+		"orderDate": "1997-12-10 00:00:00.000",
+		"requiredDate": "1998-01-07 00:00:00.000",
+		"shippedDate": "1998-01-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 11.19,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 16,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10767,
+		"customerID": "SUPRD",
+		"employeeID": 4,
+		"orderDate": "1997-12-05 00:00:00.000",
+		"requiredDate": "1998-01-02 00:00:00.000",
+		"shippedDate": "1997-12-15 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.59,
+		"shipName": "Suprêmes délices",
+		"shipAddress": {
+			"street": "Boulevard Tirou 255",
+			"city": "Charleroi",
+			"region": "NULL",
+			"postalCode": "B-6000",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 2,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10782,
+		"customerID": "CACTU",
+		"employeeID": 9,
+		"orderDate": "1997-12-17 00:00:00.000",
+		"requiredDate": "1998-01-14 00:00:00.000",
+		"shippedDate": "1997-12-22 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.1,
+		"shipName": "Cactus Comidas para llevar",
+		"shipAddress": {
+			"street": "Cerrito 333",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 1,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10777,
+		"customerID": "GOURL",
+		"employeeID": 7,
+		"orderDate": "1997-12-15 00:00:00.000",
+		"requiredDate": "1997-12-29 00:00:00.000",
+		"shippedDate": "1998-01-21 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.01,
+		"shipName": "Gourmet Lanchonetes",
+		"shipAddress": {
+			"street": "Av. Brasil 442",
+			"city": "Campinas",
+			"region": "SP",
+			"postalCode": "04876-786",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 20,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10778,
+		"customerID": "BERGS",
+		"employeeID": 3,
+		"orderDate": "1997-12-16 00:00:00.000",
+		"requiredDate": "1998-01-13 00:00:00.000",
+		"shippedDate": "1997-12-24 00:00:00.000",
+		"shipVia": 1,
+		"freight": 6.79,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10797,
+		"customerID": "DRACD",
+		"employeeID": 7,
+		"orderDate": "1997-12-25 00:00:00.000",
+		"requiredDate": "1998-01-22 00:00:00.000",
+		"shippedDate": "1998-01-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 33.35,
+		"shipName": "Drachenblut Delikatessen",
+		"shipAddress": {
+			"street": "Walserweg 21",
+			"city": "Aachen",
+			"region": "NULL",
+			"postalCode": 52066,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10807,
+		"customerID": "FRANS",
+		"employeeID": 4,
+		"orderDate": "1997-12-31 00:00:00.000",
+		"requiredDate": "1998-01-28 00:00:00.000",
+		"shippedDate": "1998-01-30 00:00:00.000",
+		"shipVia": 1,
+		"freight": 1.36,
+		"shipName": "Franchi S.p.A.",
+		"shipAddress": {
+			"street": "Via Monte Bianco 34",
+			"city": "Torino",
+			"region": "NULL",
+			"postalCode": 10100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 1,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10809,
+		"customerID": "WELLI",
+		"employeeID": 7,
+		"orderDate": "1998-01-01 00:00:00.000",
+		"requiredDate": "1998-01-29 00:00:00.000",
+		"shippedDate": "1998-01-07 00:00:00.000",
+		"shipVia": 1,
+		"freight": 4.87,
+		"shipName": "Wellington Importadora",
+		"shipAddress": {
+			"street": "Rua do Mercado 12",
+			"city": "Resende",
+			"region": "SP",
+			"postalCode": "08737-363",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10815,
+		"customerID": "SAVEA",
+		"employeeID": 2,
+		"orderDate": "1998-01-05 00:00:00.000",
+		"requiredDate": "1998-02-02 00:00:00.000",
+		"shippedDate": "1998-01-14 00:00:00.000",
+		"shipVia": 3,
+		"freight": 14.62,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 16,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10820,
+		"customerID": "RATTC",
+		"employeeID": 3,
+		"orderDate": "1998-01-07 00:00:00.000",
+		"requiredDate": "1998-02-04 00:00:00.000",
+		"shippedDate": "1998-01-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 37.52,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10843,
+		"customerID": "VICTE",
+		"employeeID": 4,
+		"orderDate": "1998-01-21 00:00:00.000",
+		"requiredDate": "1998-02-18 00:00:00.000",
+		"shippedDate": "1998-01-26 00:00:00.000",
+		"shipVia": 2,
+		"freight": 9.26,
+		"shipName": "Victuailles en stock",
+		"shipAddress": {
+			"street": "2 rue du Commerce",
+			"city": "Lyon",
+			"region": "NULL",
+			"postalCode": 69004,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 4,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10844,
+		"customerID": "PICCO",
+		"employeeID": 8,
+		"orderDate": "1998-01-21 00:00:00.000",
+		"requiredDate": "1998-02-18 00:00:00.000",
+		"shippedDate": "1998-01-26 00:00:00.000",
+		"shipVia": 2,
+		"freight": 25.22,
+		"shipName": "Piccolo und mehr",
+		"shipAddress": {
+			"street": "Geislweg 14",
+			"city": "Salzburg",
+			"region": "NULL",
+			"postalCode": 5020,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10853,
+		"customerID": "BLAUS",
+		"employeeID": 9,
+		"orderDate": "1998-01-27 00:00:00.000",
+		"requiredDate": "1998-02-24 00:00:00.000",
+		"shippedDate": "1998-02-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 53.83,
+		"shipName": "Blauer See Delikatessen",
+		"shipAddress": {
+			"street": "Forsterstr. 57",
+			"city": "Mannheim",
+			"region": "NULL",
+			"postalCode": 68306,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10874,
+		"customerID": "GODOS",
+		"employeeID": 5,
+		"orderDate": "1998-02-06 00:00:00.000",
+		"requiredDate": "1998-03-06 00:00:00.000",
+		"shippedDate": "1998-02-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 19.58,
+		"shipName": "Godos Cocina Típica",
+		"shipAddress": {
+			"street": "C/ Romero 33",
+			"city": "Sevilla",
+			"region": "NULL",
+			"postalCode": 41101,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10867,
+		"customerID": "LONEP",
+		"employeeID": 6,
+		"orderDate": "1998-02-03 00:00:00.000",
+		"requiredDate": "1998-03-17 00:00:00.000",
+		"shippedDate": "1998-02-11 00:00:00.000",
+		"shipVia": 1,
+		"freight": 1.93,
+		"shipName": "Lonesome Pine Restaurant",
+		"shipAddress": {
+			"street": "89 Chiaroscuro Rd.",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97219,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10878,
+		"customerID": "QUICK",
+		"employeeID": 4,
+		"orderDate": "1998-02-10 00:00:00.000",
+		"requiredDate": "1998-03-10 00:00:00.000",
+		"shippedDate": "1998-02-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 46.69,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 20,
+				"unitPrice": 81,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10883,
+		"customerID": "LONEP",
+		"employeeID": 8,
+		"orderDate": "1998-02-12 00:00:00.000",
+		"requiredDate": "1998-03-12 00:00:00.000",
+		"shippedDate": "1998-02-20 00:00:00.000",
+		"shipVia": 3,
+		"freight": 0.53,
+		"shipName": "Lonesome Pine Restaurant",
+		"shipAddress": {
+			"street": "89 Chiaroscuro Rd.",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97219,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 8,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10887,
+		"customerID": "GALED",
+		"employeeID": 8,
+		"orderDate": "1998-02-13 00:00:00.000",
+		"requiredDate": "1998-03-13 00:00:00.000",
+		"shippedDate": "1998-02-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.25,
+		"shipName": "Galería del gastronómo",
+		"shipAddress": {
+			"street": "Rambla de Cataluña 23",
+			"city": "Barcelona",
+			"region": "NULL",
+			"postalCode": 8022,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10891,
+		"customerID": "LEHMS",
+		"employeeID": 7,
+		"orderDate": "1998-02-17 00:00:00.000",
+		"requiredDate": "1998-03-17 00:00:00.000",
+		"shippedDate": "1998-02-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 20.37,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 15,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10892,
+		"customerID": "MAISD",
+		"employeeID": 4,
+		"orderDate": "1998-02-17 00:00:00.000",
+		"requiredDate": "1998-03-17 00:00:00.000",
+		"shippedDate": "1998-02-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 120.27,
+		"shipName": "Maison Dewey",
+		"shipAddress": {
+			"street": "Rue Joseph-Bens 532",
+			"city": "Bruxelles",
+			"region": "NULL",
+			"postalCode": "B-1180",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 40,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10881,
+		"customerID": "CACTU",
+		"employeeID": 4,
+		"orderDate": "1998-02-11 00:00:00.000",
+		"requiredDate": "1998-03-11 00:00:00.000",
+		"shippedDate": "1998-02-18 00:00:00.000",
+		"shipVia": 1,
+		"freight": 2.84,
+		"shipName": "Cactus Comidas para llevar",
+		"shipAddress": {
+			"street": "Cerrito 333",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 73,
+				"unitPrice": 15,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10900,
+		"customerID": "WELLI",
+		"employeeID": 1,
+		"orderDate": "1998-02-20 00:00:00.000",
+		"requiredDate": "1998-03-20 00:00:00.000",
+		"shippedDate": "1998-03-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.66,
+		"shipName": "Wellington Importadora",
+		"shipAddress": {
+			"street": "Rua do Mercado 12",
+			"city": "Resende",
+			"region": "SP",
+			"postalCode": "08737-363",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 3,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10905,
+		"customerID": "WELLI",
+		"employeeID": 9,
+		"orderDate": "1998-02-24 00:00:00.000",
+		"requiredDate": "1998-03-24 00:00:00.000",
+		"shippedDate": "1998-03-06 00:00:00.000",
+		"shipVia": 2,
+		"freight": 13.72,
+		"shipName": "Wellington Importadora",
+		"shipAddress": {
+			"street": "Rua do Mercado 12",
+			"city": "Resende",
+			"region": "SP",
+			"postalCode": "08737-363",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10914,
+		"customerID": "QUEEN",
+		"employeeID": 6,
+		"orderDate": "1998-02-27 00:00:00.000",
+		"requiredDate": "1998-03-27 00:00:00.000",
+		"shippedDate": "1998-03-02 00:00:00.000",
+		"shipVia": 1,
+		"freight": 21.19,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10906,
+		"customerID": "WOLZA",
+		"employeeID": 4,
+		"orderDate": "1998-02-25 00:00:00.000",
+		"requiredDate": "1998-03-11 00:00:00.000",
+		"shippedDate": "1998-03-03 00:00:00.000",
+		"shipVia": 3,
+		"freight": 26.29,
+		"shipName": "Wolski Zajazd",
+		"shipAddress": {
+			"street": "ul. Filtrowa 68",
+			"city": "Warszawa",
+			"region": "NULL",
+			"postalCode": "01-012",
+			"country": "Poland"
+		},
+		"details": [
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10907,
+		"customerID": "SPECD",
+		"employeeID": 6,
+		"orderDate": "1998-02-25 00:00:00.000",
+		"requiredDate": "1998-03-25 00:00:00.000",
+		"shippedDate": "1998-02-27 00:00:00.000",
+		"shipVia": 3,
+		"freight": 9.19,
+		"shipName": "Spécialités du monde",
+		"shipAddress": {
+			"street": "25 rue Lauriston",
+			"city": "Paris",
+			"region": "NULL",
+			"postalCode": 75016,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 14,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10920,
+		"customerID": "AROUT",
+		"employeeID": 4,
+		"orderDate": "1998-03-03 00:00:00.000",
+		"requiredDate": "1998-03-31 00:00:00.000",
+		"shippedDate": "1998-03-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 29.61,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 50,
+				"unitPrice": 16.25,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10934,
+		"customerID": "LEHMS",
+		"employeeID": 3,
+		"orderDate": "1998-03-09 00:00:00.000",
+		"requiredDate": "1998-04-06 00:00:00.000",
+		"shippedDate": "1998-03-12 00:00:00.000",
+		"shipVia": 3,
+		"freight": 32.01,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 6,
+				"unitPrice": 25,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10936,
+		"customerID": "GREAL",
+		"employeeID": 3,
+		"orderDate": "1998-03-09 00:00:00.000",
+		"requiredDate": "1998-04-06 00:00:00.000",
+		"shippedDate": "1998-03-18 00:00:00.000",
+		"shipVia": 2,
+		"freight": 33.68,
+		"shipName": "Great Lakes Food Market",
+		"shipAddress": {
+			"street": "2732 Baker Blvd.",
+			"city": "Eugene",
+			"region": "OR",
+			"postalCode": 97403,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 30,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10942,
+		"customerID": "REGGC",
+		"employeeID": 9,
+		"orderDate": "1998-03-11 00:00:00.000",
+		"requiredDate": "1998-04-08 00:00:00.000",
+		"shippedDate": "1998-03-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 17.95,
+		"shipName": "Reggiani Caseifici",
+		"shipAddress": {
+			"street": "Strada Provinciale 124",
+			"city": "Reggio Emilia",
+			"region": "NULL",
+			"postalCode": 42100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 49,
+				"unitPrice": 20,
+				"quantity": 28,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10947,
+		"customerID": "BSBEV",
+		"employeeID": 3,
+		"orderDate": "1998-03-13 00:00:00.000",
+		"requiredDate": "1998-04-10 00:00:00.000",
+		"shippedDate": "1998-03-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.26,
+		"shipName": "B's Beverages",
+		"shipAddress": {
+			"street": "Fauntleroy Circus",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "EC2 5NT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 4,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10955,
+		"customerID": "FOLKO",
+		"employeeID": 8,
+		"orderDate": "1998-03-17 00:00:00.000",
+		"requiredDate": "1998-04-14 00:00:00.000",
+		"shippedDate": "1998-03-20 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.26,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 12,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10950,
+		"customerID": "MAGAA",
+		"employeeID": 1,
+		"orderDate": "1998-03-16 00:00:00.000",
+		"requiredDate": "1998-04-13 00:00:00.000",
+		"shippedDate": "1998-03-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 2.5,
+		"shipName": "Magazzini Alimentari Riuniti",
+		"shipAddress": {
+			"street": "Via Ludovico il Moro 22",
+			"city": "Bergamo",
+			"region": "NULL",
+			"postalCode": 24100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10963,
+		"customerID": "FURIB",
+		"employeeID": 9,
+		"orderDate": "1998-03-19 00:00:00.000",
+		"requiredDate": "1998-04-16 00:00:00.000",
+		"shippedDate": "1998-03-26 00:00:00.000",
+		"shipVia": 3,
+		"freight": 2.7,
+		"shipName": "Furia Bacalhau e Frutos do Mar",
+		"shipAddress": {
+			"street": "Jardim das rosas n. 32",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1675,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 2,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10969,
+		"customerID": "COMMI",
+		"employeeID": 1,
+		"orderDate": "1998-03-23 00:00:00.000",
+		"requiredDate": "1998-04-20 00:00:00.000",
+		"shippedDate": "1998-03-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 0.21,
+		"shipName": "Comércio Mineiro",
+		"shipAddress": {
+			"street": "Av. dos Lusíadas 23",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05432-043",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10970,
+		"customerID": "BOLID",
+		"employeeID": 9,
+		"orderDate": "1998-03-24 00:00:00.000",
+		"requiredDate": "1998-04-07 00:00:00.000",
+		"shippedDate": "1998-04-24 00:00:00.000",
+		"shipVia": 1,
+		"freight": 16.16,
+		"shipName": "Bólido Comidas preparadas",
+		"shipAddress": {
+			"street": "C/ Araquil 67",
+			"city": "Madrid",
+			"region": "NULL",
+			"postalCode": 28023,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 40,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10971,
+		"customerID": "FRANR",
+		"employeeID": 2,
+		"orderDate": "1998-03-24 00:00:00.000",
+		"requiredDate": "1998-04-21 00:00:00.000",
+		"shippedDate": "1998-04-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 121.82,
+		"shipName": "France restauration",
+		"shipAddress": {
+			"street": "54 rue Royale",
+			"city": "Nantes",
+			"region": "NULL",
+			"postalCode": 44000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 14,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10965,
+		"customerID": "OLDWO",
+		"employeeID": 6,
+		"orderDate": "1998-03-20 00:00:00.000",
+		"requiredDate": "1998-04-17 00:00:00.000",
+		"shippedDate": "1998-03-30 00:00:00.000",
+		"shipVia": 3,
+		"freight": 144.38,
+		"shipName": "Old World Delicatessen",
+		"shipAddress": {
+			"street": "2743 Bering St.",
+			"city": "Anchorage",
+			"region": "AK",
+			"postalCode": 99508,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 16,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10974,
+		"customerID": "SPLIR",
+		"employeeID": 3,
+		"orderDate": "1998-03-25 00:00:00.000",
+		"requiredDate": "1998-04-08 00:00:00.000",
+		"shippedDate": "1998-04-03 00:00:00.000",
+		"shipVia": 3,
+		"freight": 12.96,
+		"shipName": "Split Rail Beer & Ale",
+		"shipAddress": {
+			"street": "P.O. Box 555",
+			"city": "Lander",
+			"region": "WY",
+			"postalCode": 82520,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 63,
+				"unitPrice": 43.9,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10980,
+		"customerID": "FOLKO",
+		"employeeID": 4,
+		"orderDate": "1998-03-27 00:00:00.000",
+		"requiredDate": "1998-05-08 00:00:00.000",
+		"shippedDate": "1998-04-17 00:00:00.000",
+		"shipVia": 1,
+		"freight": 1.26,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 40,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10981,
+		"customerID": "HANAR",
+		"employeeID": 1,
+		"orderDate": "1998-03-27 00:00:00.000",
+		"requiredDate": "1998-04-24 00:00:00.000",
+		"shippedDate": "1998-04-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 193.37,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 60,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10959,
+		"customerID": "GOURL",
+		"employeeID": 6,
+		"orderDate": "1998-03-18 00:00:00.000",
+		"requiredDate": "1998-04-29 00:00:00.000",
+		"shippedDate": "1998-03-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 4.98,
+		"shipName": "Gourmet Lanchonetes",
+		"shipAddress": {
+			"street": "Av. Brasil 442",
+			"city": "Campinas",
+			"region": "SP",
+			"postalCode": "04876-786",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 20,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10992,
+		"customerID": "THEBI",
+		"employeeID": 1,
+		"orderDate": "1998-04-01 00:00:00.000",
+		"requiredDate": "1998-04-29 00:00:00.000",
+		"shippedDate": "1998-04-03 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.27,
+		"shipName": "The Big Cheese",
+		"shipAddress": {
+			"street": "89 Jefferson Way Suite 2",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97201,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 2,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10994,
+		"customerID": "VAFFE",
+		"employeeID": 2,
+		"orderDate": "1998-04-02 00:00:00.000",
+		"requiredDate": "1998-04-16 00:00:00.000",
+		"shippedDate": "1998-04-09 00:00:00.000",
+		"shipVia": 3,
+		"freight": 65.53,
+		"shipName": "Vaffeljernet",
+		"shipAddress": {
+			"street": "Smagsloget 45",
+			"city": "Århus",
+			"region": "NULL",
+			"postalCode": 8200,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 18,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10996,
+		"customerID": "QUICK",
+		"employeeID": 4,
+		"orderDate": "1998-04-02 00:00:00.000",
+		"requiredDate": "1998-04-30 00:00:00.000",
+		"shippedDate": "1998-04-10 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.12,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 11014,
+		"customerID": "LINOD",
+		"employeeID": 2,
+		"orderDate": "1998-04-10 00:00:00.000",
+		"requiredDate": "1998-05-08 00:00:00.000",
+		"shippedDate": "1998-04-15 00:00:00.000",
+		"shipVia": 3,
+		"freight": 23.6,
+		"shipName": "LINO-Delicateses",
+		"shipAddress": {
+			"street": "Ave. 5 de Mayo Porlamar",
+			"city": "I. de Margarita",
+			"region": "Nueva Esparta",
+			"postalCode": 4980,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 28,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 11020,
+		"customerID": "OTTIK",
+		"employeeID": 2,
+		"orderDate": "1998-04-14 00:00:00.000",
+		"requiredDate": "1998-05-12 00:00:00.000",
+		"shippedDate": "1998-04-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 43.3,
+		"shipName": "Ottilies Käseladen",
+		"shipAddress": {
+			"street": "Mehrheimerstr. 369",
+			"city": "Köln",
+			"region": "NULL",
+			"postalCode": 50739,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 24,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 11040,
+		"customerID": "GREAL",
+		"employeeID": 4,
+		"orderDate": "1998-04-22 00:00:00.000",
+		"requiredDate": "1998-05-20 00:00:00.000",
+		"shippedDate": "NULL",
+		"shipVia": 3,
+		"freight": 18.84,
+		"shipName": "Great Lakes Food Market",
+		"shipAddress": {
+			"street": "2732 Baker Blvd.",
+			"city": "Eugene",
+			"region": "OR",
+			"postalCode": 97403,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 11043,
+		"customerID": "SPECD",
+		"employeeID": 5,
+		"orderDate": "1998-04-22 00:00:00.000",
+		"requiredDate": "1998-05-20 00:00:00.000",
+		"shippedDate": "1998-04-29 00:00:00.000",
+		"shipVia": 2,
+		"freight": 8.8,
+		"shipName": "Spécialités du monde",
+		"shipAddress": {
+			"street": "25 rue Lauriston",
+			"city": "Paris",
+			"region": "NULL",
+			"postalCode": 75016,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 11044,
+		"customerID": "WOLZA",
+		"employeeID": 4,
+		"orderDate": "1998-04-23 00:00:00.000",
+		"requiredDate": "1998-05-21 00:00:00.000",
+		"shippedDate": "1998-05-01 00:00:00.000",
+		"shipVia": 1,
+		"freight": 8.72,
+		"shipName": "Wolski Zajazd",
+		"shipAddress": {
+			"street": "ul. Filtrowa 68",
+			"city": "Warszawa",
+			"region": "NULL",
+			"postalCode": "01-012",
+			"country": "Poland"
+		},
+		"details": [
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 11048,
+		"customerID": "BOTTM",
+		"employeeID": 7,
+		"orderDate": "1998-04-24 00:00:00.000",
+		"requiredDate": "1998-05-22 00:00:00.000",
+		"shippedDate": "1998-04-30 00:00:00.000",
+		"shipVia": 3,
+		"freight": 24.12,
+		"shipName": "Bottom-Dollar Markets",
+		"shipAddress": {
+			"street": "23 Tsawassen Blvd.",
+			"city": "Tsawassen",
+			"region": "BC",
+			"postalCode": "T2F 8M4",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 42,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 11037,
+		"customerID": "GODOS",
+		"employeeID": 7,
+		"orderDate": "1998-04-21 00:00:00.000",
+		"requiredDate": "1998-05-19 00:00:00.000",
+		"shippedDate": "1998-04-27 00:00:00.000",
+		"shipVia": 1,
+		"freight": 3.2,
+		"shipName": "Godos Cocina Típica",
+		"shipAddress": {
+			"street": "C/ Romero 33",
+			"city": "Sevilla",
+			"region": "NULL",
+			"postalCode": 41101,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 4,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 11050,
+		"customerID": "FOLKO",
+		"employeeID": 8,
+		"orderDate": "1998-04-27 00:00:00.000",
+		"requiredDate": "1998-05-25 00:00:00.000",
+		"shippedDate": "1998-05-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 59.41,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 50,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 11057,
+		"customerID": "NORTS",
+		"employeeID": 3,
+		"orderDate": "1998-04-29 00:00:00.000",
+		"requiredDate": "1998-05-27 00:00:00.000",
+		"shippedDate": "1998-05-01 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.13,
+		"shipName": "North/South",
+		"shipAddress": {
+			"street": "South House 300 Queensbridge",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "SW7 1RZ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 11061,
+		"customerID": "GREAL",
+		"employeeID": 4,
+		"orderDate": "1998-04-30 00:00:00.000",
+		"requiredDate": "1998-06-11 00:00:00.000",
+		"shippedDate": "NULL",
+		"shipVia": 3,
+		"freight": 14.01,
+		"shipName": "Great Lakes Food Market",
+		"shipAddress": {
+			"street": "2732 Baker Blvd.",
+			"city": "Eugene",
+			"region": "OR",
+			"postalCode": 97403,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 11051,
+		"customerID": "LAMAI",
+		"employeeID": 7,
+		"orderDate": "1998-04-27 00:00:00.000",
+		"requiredDate": "1998-05-25 00:00:00.000",
+		"shippedDate": "NULL",
+		"shipVia": 3,
+		"freight": 2.79,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 10,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 11067,
+		"customerID": "DRACD",
+		"employeeID": 1,
+		"orderDate": "1998-05-04 00:00:00.000",
+		"requiredDate": "1998-05-18 00:00:00.000",
+		"shippedDate": "1998-05-06 00:00:00.000",
+		"shipVia": 2,
+		"freight": 7.98,
+		"shipName": "Drachenblut Delikatessen",
+		"shipAddress": {
+			"street": "Walserweg 21",
+			"city": "Aachen",
+			"region": "NULL",
+			"postalCode": 52066,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 11069,
+		"customerID": "TORTU",
+		"employeeID": 1,
+		"orderDate": "1998-05-04 00:00:00.000",
+		"requiredDate": "1998-06-01 00:00:00.000",
+		"shippedDate": "1998-05-06 00:00:00.000",
+		"shipVia": 2,
+		"freight": 15.67,
+		"shipName": "Tortuga Restaurante",
+		"shipAddress": {
+			"street": "Avda. Azteca 123",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 11074,
+		"customerID": "SIMOB",
+		"employeeID": 7,
+		"orderDate": "1998-05-06 00:00:00.000",
+		"requiredDate": "1998-06-03 00:00:00.000",
+		"shippedDate": "NULL",
+		"shipVia": 2,
+		"freight": 18.44,
+		"shipName": "Simons bistro",
+		"shipAddress": {
+			"street": "Vinbæltet 34",
+			"city": "Kobenhavn",
+			"region": "NULL",
+			"postalCode": 1734,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 14,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10248,
+		"customerID": "VINET",
+		"employeeID": 5,
+		"orderDate": "1996-07-04 00:00:00.000",
+		"requiredDate": "1996-08-01 00:00:00.000",
+		"shippedDate": "1996-07-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 32.38,
+		"shipName": "Vins et alcools Chevalier",
+		"shipAddress": {
+			"street": "59 rue de l'Abbaye",
+			"city": "Reims",
+			"region": "NULL",
+			"postalCode": 51100,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 14,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 42,
+				"unitPrice": 9.8,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10249,
+		"customerID": "TOMSP",
+		"employeeID": 6,
+		"orderDate": "1996-07-05 00:00:00.000",
+		"requiredDate": "1996-08-16 00:00:00.000",
+		"shippedDate": "1996-07-10 00:00:00.000",
+		"shipVia": 1,
+		"freight": 11.61,
+		"shipName": "Toms Spezialitäten",
+		"shipAddress": {
+			"street": "Luisenstr. 48",
+			"city": "Münster",
+			"region": "NULL",
+			"postalCode": 44087,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 18.6,
+				"quantity": 9,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 42.4,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10250,
+		"customerID": "HANAR",
+		"employeeID": 4,
+		"orderDate": "1996-07-08 00:00:00.000",
+		"requiredDate": "1996-08-05 00:00:00.000",
+		"shippedDate": "1996-07-12 00:00:00.000",
+		"shipVia": 2,
+		"freight": 65.83,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 42.4,
+				"quantity": 35,
+				"discount": 0.15
+			},
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 15,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10252,
+		"customerID": "SUPRD",
+		"employeeID": 4,
+		"orderDate": "1996-07-09 00:00:00.000",
+		"requiredDate": "1996-08-06 00:00:00.000",
+		"shippedDate": "1996-07-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 51.3,
+		"shipName": "Suprêmes délices",
+		"shipAddress": {
+			"street": "Boulevard Tirou 255",
+			"city": "Charleroi",
+			"region": "NULL",
+			"postalCode": "B-6000",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 20,
+				"unitPrice": 64.8,
+				"quantity": 40,
+				"discount": 0.05
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 25,
+				"discount": 0.05
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10253,
+		"customerID": "HANAR",
+		"employeeID": 3,
+		"orderDate": "1996-07-10 00:00:00.000",
+		"requiredDate": "1996-07-24 00:00:00.000",
+		"shippedDate": "1996-07-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 58.17,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 42,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 16,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10251,
+		"customerID": "VICTE",
+		"employeeID": 3,
+		"orderDate": "1996-07-08 00:00:00.000",
+		"requiredDate": "1996-08-05 00:00:00.000",
+		"shippedDate": "1996-07-15 00:00:00.000",
+		"shipVia": 1,
+		"freight": 41.34,
+		"shipName": "Victuailles en stock",
+		"shipAddress": {
+			"street": "2 rue du Commerce",
+			"city": "Lyon",
+			"region": "NULL",
+			"postalCode": 69004,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 22,
+				"unitPrice": 16.8,
+				"quantity": 6,
+				"discount": 0.05
+			},
+			{
+				"productID": 57,
+				"unitPrice": 15.6,
+				"quantity": 15,
+				"discount": 0.05
+			},
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10257,
+		"customerID": "HILAA",
+		"employeeID": 4,
+		"orderDate": "1996-07-16 00:00:00.000",
+		"requiredDate": "1996-08-13 00:00:00.000",
+		"shippedDate": "1996-07-22 00:00:00.000",
+		"shipVia": 3,
+		"freight": 81.91,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 27,
+				"unitPrice": 35.1,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10258,
+		"customerID": "ERNSH",
+		"employeeID": 1,
+		"orderDate": "1996-07-17 00:00:00.000",
+		"requiredDate": "1996-08-14 00:00:00.000",
+		"shippedDate": "1996-07-23 00:00:00.000",
+		"shipVia": 1,
+		"freight": 140.51,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 50,
+				"discount": 0.2
+			},
+			{
+				"productID": 5,
+				"unitPrice": 17,
+				"quantity": 65,
+				"discount": 0.2
+			},
+			{
+				"productID": 32,
+				"unitPrice": 25.6,
+				"quantity": 6,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10259,
+		"customerID": "CENTC",
+		"employeeID": 4,
+		"orderDate": "1996-07-18 00:00:00.000",
+		"requiredDate": "1996-08-15 00:00:00.000",
+		"shippedDate": "1996-07-25 00:00:00.000",
+		"shipVia": 3,
+		"freight": 3.25,
+		"shipName": "Centro comercial Moctezuma",
+		"shipAddress": {
+			"street": "Sierras de Granada 9993",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5022,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 37,
+				"unitPrice": 20.8,
+				"quantity": 1,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10260,
+		"customerID": "OTTIK",
+		"employeeID": 4,
+		"orderDate": "1996-07-19 00:00:00.000",
+		"requiredDate": "1996-08-16 00:00:00.000",
+		"shippedDate": "1996-07-29 00:00:00.000",
+		"shipVia": 1,
+		"freight": 55.09,
+		"shipName": "Ottilies Käseladen",
+		"shipAddress": {
+			"street": "Mehrheimerstr. 369",
+			"city": "Köln",
+			"region": "NULL",
+			"postalCode": 50739,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 16,
+				"discount": 0.25
+			},
+			{
+				"productID": 57,
+				"unitPrice": 15.6,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 15,
+				"discount": 0.25
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 21,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10261,
+		"customerID": "QUEDE",
+		"employeeID": 4,
+		"orderDate": "1996-07-19 00:00:00.000",
+		"requiredDate": "1996-08-16 00:00:00.000",
+		"shippedDate": "1996-07-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.05,
+		"shipName": "Que Delícia",
+		"shipAddress": {
+			"street": "Rua da Panificadora 12",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-673",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 35,
+				"unitPrice": 14.4,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10262,
+		"customerID": "RATTC",
+		"employeeID": 8,
+		"orderDate": "1996-07-22 00:00:00.000",
+		"requiredDate": "1996-08-19 00:00:00.000",
+		"shippedDate": "1996-07-25 00:00:00.000",
+		"shipVia": 3,
+		"freight": 48.29,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 5,
+				"unitPrice": 17,
+				"quantity": 12,
+				"discount": 0.2
+			},
+			{
+				"productID": 7,
+				"unitPrice": 24,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 2,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10256,
+		"customerID": "WELLI",
+		"employeeID": 3,
+		"orderDate": "1996-07-15 00:00:00.000",
+		"requiredDate": "1996-08-12 00:00:00.000",
+		"shippedDate": "1996-07-17 00:00:00.000",
+		"shipVia": 2,
+		"freight": 13.97,
+		"shipName": "Wellington Importadora",
+		"shipAddress": {
+			"street": "Rua do Mercado 12",
+			"city": "Resende",
+			"region": "SP",
+			"postalCode": "08737-363",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10255,
+		"customerID": "RICSU",
+		"employeeID": 9,
+		"orderDate": "1996-07-12 00:00:00.000",
+		"requiredDate": "1996-08-09 00:00:00.000",
+		"shippedDate": "1996-07-15 00:00:00.000",
+		"shipVia": 3,
+		"freight": 148.33,
+		"shipName": "Richter Supermarkt",
+		"shipAddress": {
+			"street": "Starenweg 5",
+			"city": "Genève",
+			"region": "NULL",
+			"postalCode": 1204,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 36,
+				"unitPrice": 15.2,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10264,
+		"customerID": "FOLKO",
+		"employeeID": 6,
+		"orderDate": "1996-07-24 00:00:00.000",
+		"requiredDate": "1996-08-21 00:00:00.000",
+		"shippedDate": "1996-08-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 3.67,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 25,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10265,
+		"customerID": "BLONP",
+		"employeeID": 2,
+		"orderDate": "1996-07-25 00:00:00.000",
+		"requiredDate": "1996-08-22 00:00:00.000",
+		"shippedDate": "1996-08-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 55.28,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10254,
+		"customerID": "CHOPS",
+		"employeeID": 5,
+		"orderDate": "1996-07-11 00:00:00.000",
+		"requiredDate": "1996-08-08 00:00:00.000",
+		"shippedDate": "1996-07-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 22.98,
+		"shipName": "Chop-suey Chinese",
+		"shipAddress": {
+			"street": "Hauptstr. 31",
+			"city": "Bern",
+			"region": "NULL",
+			"postalCode": 3012,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 15,
+				"discount": 0.15
+			},
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 21,
+				"discount": 0.15
+			},
+			{
+				"productID": 74,
+				"unitPrice": 8,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10263,
+		"customerID": "ERNSH",
+		"employeeID": 9,
+		"orderDate": "1996-07-23 00:00:00.000",
+		"requiredDate": "1996-08-20 00:00:00.000",
+		"shippedDate": "1996-07-31 00:00:00.000",
+		"shipVia": 3,
+		"freight": 146.06,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 60,
+				"discount": 0.25
+			},
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 28,
+				"discount": 0
+			},
+			{
+				"productID": 30,
+				"unitPrice": 20.7,
+				"quantity": 60,
+				"discount": 0.25
+			},
+			{
+				"productID": 74,
+				"unitPrice": 8,
+				"quantity": 36,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10268,
+		"customerID": "GROSR",
+		"employeeID": 8,
+		"orderDate": "1996-07-30 00:00:00.000",
+		"requiredDate": "1996-08-27 00:00:00.000",
+		"shippedDate": "1996-08-02 00:00:00.000",
+		"shipVia": 3,
+		"freight": 66.29,
+		"shipName": "GROSELLA-Restaurante",
+		"shipAddress": {
+			"street": "5ª Ave. Los Palos Grandes",
+			"city": "Caracas",
+			"region": "DF",
+			"postalCode": 1081,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 99,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 4,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10267,
+		"customerID": "FRANK",
+		"employeeID": 4,
+		"orderDate": "1996-07-29 00:00:00.000",
+		"requiredDate": "1996-08-26 00:00:00.000",
+		"shippedDate": "1996-08-06 00:00:00.000",
+		"shipVia": 1,
+		"freight": 208.58,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 15,
+				"discount": 0.15
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 70,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10270,
+		"customerID": "WARTH",
+		"employeeID": 1,
+		"orderDate": "1996-08-01 00:00:00.000",
+		"requiredDate": "1996-08-29 00:00:00.000",
+		"shippedDate": "1996-08-02 00:00:00.000",
+		"shipVia": 1,
+		"freight": 136.54,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 15.2,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 36.8,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10274,
+		"customerID": "VINET",
+		"employeeID": 6,
+		"orderDate": "1996-08-06 00:00:00.000",
+		"requiredDate": "1996-09-03 00:00:00.000",
+		"shippedDate": "1996-08-16 00:00:00.000",
+		"shipVia": 1,
+		"freight": 6.01,
+		"shipName": "Vins et alcools Chevalier",
+		"shipAddress": {
+			"street": "59 rue de l'Abbaye",
+			"city": "Reims",
+			"region": "NULL",
+			"postalCode": 51100,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 7,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10275,
+		"customerID": "MAGAA",
+		"employeeID": 1,
+		"orderDate": "1996-08-07 00:00:00.000",
+		"requiredDate": "1996-09-04 00:00:00.000",
+		"shippedDate": "1996-08-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 26.93,
+		"shipName": "Magazzini Alimentari Riuniti",
+		"shipAddress": {
+			"street": "Via Ludovico il Moro 22",
+			"city": "Bergamo",
+			"region": "NULL",
+			"postalCode": 24100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 12,
+				"discount": 0.05
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 6,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10276,
+		"customerID": "TORTU",
+		"employeeID": 8,
+		"orderDate": "1996-08-08 00:00:00.000",
+		"requiredDate": "1996-08-22 00:00:00.000",
+		"shippedDate": "1996-08-14 00:00:00.000",
+		"shipVia": 3,
+		"freight": 13.84,
+		"shipName": "Tortuga Restaurante",
+		"shipAddress": {
+			"street": "Avda. Azteca 123",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 24.8,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 13,
+				"unitPrice": 4.8,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10277,
+		"customerID": "MORGK",
+		"employeeID": 2,
+		"orderDate": "1996-08-09 00:00:00.000",
+		"requiredDate": "1996-09-06 00:00:00.000",
+		"shippedDate": "1996-08-13 00:00:00.000",
+		"shipVia": 3,
+		"freight": 125.77,
+		"shipName": "Morgenstern Gesundkost",
+		"shipAddress": {
+			"street": "Heerstr. 22",
+			"city": "Leipzig",
+			"region": "NULL",
+			"postalCode": 4179,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10273,
+		"customerID": "QUICK",
+		"employeeID": 3,
+		"orderDate": "1996-08-05 00:00:00.000",
+		"requiredDate": "1996-09-02 00:00:00.000",
+		"shippedDate": "1996-08-12 00:00:00.000",
+		"shipVia": 3,
+		"freight": 76.07,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 15,
+				"discount": 0.05
+			},
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 60,
+				"discount": 0.05
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 33,
+				"discount": 0.05
+			},
+			{
+				"productID": 10,
+				"unitPrice": 24.8,
+				"quantity": 24,
+				"discount": 0.05
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10272,
+		"customerID": "RATTC",
+		"employeeID": 6,
+		"orderDate": "1996-08-02 00:00:00.000",
+		"requiredDate": "1996-08-30 00:00:00.000",
+		"shippedDate": "1996-08-06 00:00:00.000",
+		"shipVia": 2,
+		"freight": 98.03,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 20,
+				"unitPrice": 64.8,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10278,
+		"customerID": "BERGS",
+		"employeeID": 8,
+		"orderDate": "1996-08-12 00:00:00.000",
+		"requiredDate": "1996-09-09 00:00:00.000",
+		"shippedDate": "1996-08-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 92.69,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 73,
+				"unitPrice": 12,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 63,
+				"unitPrice": 35.1,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 44,
+				"unitPrice": 15.5,
+				"quantity": 16,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10269,
+		"customerID": "WHITC",
+		"employeeID": 5,
+		"orderDate": "1996-07-31 00:00:00.000",
+		"requiredDate": "1996-08-14 00:00:00.000",
+		"shippedDate": "1996-08-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 4.56,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 60,
+				"discount": 0.05
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10280,
+		"customerID": "BERGS",
+		"employeeID": 2,
+		"orderDate": "1996-08-14 00:00:00.000",
+		"requiredDate": "1996-09-11 00:00:00.000",
+		"shippedDate": "1996-09-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 8.98,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10281,
+		"customerID": "ROMEY",
+		"employeeID": 4,
+		"orderDate": "1996-08-14 00:00:00.000",
+		"requiredDate": "1996-08-28 00:00:00.000",
+		"shippedDate": "1996-08-21 00:00:00.000",
+		"shipVia": 1,
+		"freight": 2.94,
+		"shipName": "Romero y tomillo",
+		"shipAddress": {
+			"street": "Gran Vía 1",
+			"city": "Madrid",
+			"region": "NULL",
+			"postalCode": 28001,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 1,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 35,
+				"unitPrice": 14.4,
+				"quantity": 4,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10282,
+		"customerID": "ROMEY",
+		"employeeID": 4,
+		"orderDate": "1996-08-15 00:00:00.000",
+		"requiredDate": "1996-09-12 00:00:00.000",
+		"shippedDate": "1996-08-21 00:00:00.000",
+		"shipVia": 1,
+		"freight": 12.69,
+		"shipName": "Romero y tomillo",
+		"shipAddress": {
+			"street": "Gran Vía 1",
+			"city": "Madrid",
+			"region": "NULL",
+			"postalCode": 28001,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 20.7,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 57,
+				"unitPrice": 15.6,
+				"quantity": 2,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10283,
+		"customerID": "LILAS",
+		"employeeID": 3,
+		"orderDate": "1996-08-16 00:00:00.000",
+		"requiredDate": "1996-09-13 00:00:00.000",
+		"shippedDate": "1996-08-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 84.81,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 15,
+				"unitPrice": 12.4,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10284,
+		"customerID": "LEHMS",
+		"employeeID": 4,
+		"orderDate": "1996-08-19 00:00:00.000",
+		"requiredDate": "1996-09-16 00:00:00.000",
+		"shippedDate": "1996-08-27 00:00:00.000",
+		"shipVia": 1,
+		"freight": 76.56,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 27,
+				"unitPrice": 35.1,
+				"quantity": 15,
+				"discount": 0.25
+			},
+			{
+				"productID": 44,
+				"unitPrice": 15.5,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 20,
+				"discount": 0.25
+			},
+			{
+				"productID": 67,
+				"unitPrice": 11.2,
+				"quantity": 5,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10285,
+		"customerID": "QUICK",
+		"employeeID": 1,
+		"orderDate": "1996-08-20 00:00:00.000",
+		"requiredDate": "1996-09-17 00:00:00.000",
+		"shippedDate": "1996-08-26 00:00:00.000",
+		"shipVia": 2,
+		"freight": 76.83,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 14.4,
+				"quantity": 45,
+				"discount": 0.2
+			},
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 40,
+				"discount": 0.2
+			},
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 36,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10286,
+		"customerID": "QUICK",
+		"employeeID": 8,
+		"orderDate": "1996-08-21 00:00:00.000",
+		"requiredDate": "1996-09-18 00:00:00.000",
+		"shippedDate": "1996-08-30 00:00:00.000",
+		"shipVia": 3,
+		"freight": 229.24,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 14.4,
+				"quantity": 100,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10287,
+		"customerID": "RICAR",
+		"employeeID": 8,
+		"orderDate": "1996-08-22 00:00:00.000",
+		"requiredDate": "1996-09-19 00:00:00.000",
+		"shippedDate": "1996-08-28 00:00:00.000",
+		"shipVia": 3,
+		"freight": 12.76,
+		"shipName": "Ricardo Adocicados",
+		"shipAddress": {
+			"street": "Av. Copacabana 267",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-890",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 40,
+				"discount": 0.15
+			},
+			{
+				"productID": 34,
+				"unitPrice": 11.2,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 46,
+				"unitPrice": 9.6,
+				"quantity": 15,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10288,
+		"customerID": "REGGC",
+		"employeeID": 4,
+		"orderDate": "1996-08-23 00:00:00.000",
+		"requiredDate": "1996-09-20 00:00:00.000",
+		"shippedDate": "1996-09-03 00:00:00.000",
+		"shipVia": 1,
+		"freight": 7.45,
+		"shipName": "Reggiani Caseifici",
+		"shipAddress": {
+			"street": "Strada Provinciale 124",
+			"city": "Reggio Emilia",
+			"region": "NULL",
+			"postalCode": 42100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 10,
+				"discount": 0.1
+			},
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 3,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10289,
+		"customerID": "BSBEV",
+		"employeeID": 7,
+		"orderDate": "1996-08-26 00:00:00.000",
+		"requiredDate": "1996-09-23 00:00:00.000",
+		"shippedDate": "1996-08-28 00:00:00.000",
+		"shipVia": 3,
+		"freight": 22.77,
+		"shipName": "B's Beverages",
+		"shipAddress": {
+			"street": "Fauntleroy Circus",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "EC2 5NT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 3,
+				"unitPrice": 8,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 26.6,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10290,
+		"customerID": "COMMI",
+		"employeeID": 8,
+		"orderDate": "1996-08-27 00:00:00.000",
+		"requiredDate": "1996-09-24 00:00:00.000",
+		"shippedDate": "1996-09-03 00:00:00.000",
+		"shipVia": 1,
+		"freight": 79.7,
+		"shipName": "Comércio Mineiro",
+		"shipAddress": {
+			"street": "Av. dos Lusíadas 23",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05432-043",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 5,
+				"unitPrice": 17,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 29,
+				"unitPrice": 99,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 16,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10291,
+		"customerID": "QUEDE",
+		"employeeID": 6,
+		"orderDate": "1996-08-27 00:00:00.000",
+		"requiredDate": "1996-09-24 00:00:00.000",
+		"shippedDate": "1996-09-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 6.4,
+		"shipName": "Que Delícia",
+		"shipAddress": {
+			"street": "Rua da Panificadora 12",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-673",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 4.8,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 44,
+				"unitPrice": 15.5,
+				"quantity": 24,
+				"discount": 0.1
+			},
+			{
+				"productID": 51,
+				"unitPrice": 42.4,
+				"quantity": 2,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10296,
+		"customerID": "LILAS",
+		"employeeID": 6,
+		"orderDate": "1996-09-03 00:00:00.000",
+		"requiredDate": "1996-10-01 00:00:00.000",
+		"shippedDate": "1996-09-11 00:00:00.000",
+		"shipVia": 1,
+		"freight": 0.12,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10297,
+		"customerID": "BLONP",
+		"employeeID": 5,
+		"orderDate": "1996-09-04 00:00:00.000",
+		"requiredDate": "1996-10-16 00:00:00.000",
+		"shippedDate": "1996-09-10 00:00:00.000",
+		"shipVia": 2,
+		"freight": 5.74,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10298,
+		"customerID": "HUNGO",
+		"employeeID": 6,
+		"orderDate": "1996-09-05 00:00:00.000",
+		"requiredDate": "1996-10-03 00:00:00.000",
+		"shippedDate": "1996-09-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 168.22,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 36,
+				"unitPrice": 15.2,
+				"quantity": 40,
+				"discount": 0.25
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 30,
+				"discount": 0.25
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10299,
+		"customerID": "RICAR",
+		"employeeID": 4,
+		"orderDate": "1996-09-06 00:00:00.000",
+		"requiredDate": "1996-10-04 00:00:00.000",
+		"shippedDate": "1996-09-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 29.76,
+		"shipName": "Ricardo Adocicados",
+		"shipAddress": {
+			"street": "Av. Copacabana 267",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-890",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10300,
+		"customerID": "MAGAA",
+		"employeeID": 2,
+		"orderDate": "1996-09-09 00:00:00.000",
+		"requiredDate": "1996-10-07 00:00:00.000",
+		"shippedDate": "1996-09-18 00:00:00.000",
+		"shipVia": 2,
+		"freight": 17.68,
+		"shipName": "Magazzini Alimentari Riuniti",
+		"shipAddress": {
+			"street": "Via Ludovico il Moro 22",
+			"city": "Bergamo",
+			"region": "NULL",
+			"postalCode": 24100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 66,
+				"unitPrice": 13.6,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10301,
+		"customerID": "WANDK",
+		"employeeID": 8,
+		"orderDate": "1996-09-09 00:00:00.000",
+		"requiredDate": "1996-10-07 00:00:00.000",
+		"shippedDate": "1996-09-17 00:00:00.000",
+		"shipVia": 2,
+		"freight": 45.08,
+		"shipName": "Die Wandernde Kuh",
+		"shipAddress": {
+			"street": "Adenauerallee 900",
+			"city": "Stuttgart",
+			"region": "NULL",
+			"postalCode": 70563,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10293,
+		"customerID": "TORTU",
+		"employeeID": 1,
+		"orderDate": "1996-08-29 00:00:00.000",
+		"requiredDate": "1996-09-26 00:00:00.000",
+		"shippedDate": "1996-09-11 00:00:00.000",
+		"shipVia": 3,
+		"freight": 21.18,
+		"shipName": "Tortuga Restaurante",
+		"shipAddress": {
+			"street": "Avda. Azteca 123",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 50,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 63,
+				"unitPrice": 35.1,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10294,
+		"customerID": "RATTC",
+		"employeeID": 4,
+		"orderDate": "1996-08-30 00:00:00.000",
+		"requiredDate": "1996-09-27 00:00:00.000",
+		"shippedDate": "1996-09-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 147.26,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 14.4,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 36.8,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10302,
+		"customerID": "SUPRD",
+		"employeeID": 4,
+		"orderDate": "1996-09-10 00:00:00.000",
+		"requiredDate": "1996-10-08 00:00:00.000",
+		"shippedDate": "1996-10-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 6.27,
+		"shipName": "Suprêmes délices",
+		"shipAddress": {
+			"street": "Boulevard Tirou 255",
+			"city": "Charleroi",
+			"region": "NULL",
+			"postalCode": "B-6000",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 28,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 36.8,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10303,
+		"customerID": "GODOS",
+		"employeeID": 7,
+		"orderDate": "1996-09-11 00:00:00.000",
+		"requiredDate": "1996-10-09 00:00:00.000",
+		"shippedDate": "1996-09-18 00:00:00.000",
+		"shipVia": 2,
+		"freight": 107.83,
+		"shipName": "Godos Cocina Típica",
+		"shipAddress": {
+			"street": "C/ Romero 33",
+			"city": "Sevilla",
+			"region": "NULL",
+			"postalCode": 41101,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 40,
+				"discount": 0.1
+			},
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 15,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10304,
+		"customerID": "TORTU",
+		"employeeID": 1,
+		"orderDate": "1996-09-12 00:00:00.000",
+		"requiredDate": "1996-10-10 00:00:00.000",
+		"shippedDate": "1996-09-17 00:00:00.000",
+		"shipVia": 2,
+		"freight": 63.79,
+		"shipName": "Tortuga Restaurante",
+		"shipAddress": {
+			"street": "Avda. Azteca 123",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 49,
+				"unitPrice": 16,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 2,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10306,
+		"customerID": "ROMEY",
+		"employeeID": 1,
+		"orderDate": "1996-09-16 00:00:00.000",
+		"requiredDate": "1996-10-14 00:00:00.000",
+		"shippedDate": "1996-09-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 7.56,
+		"shipName": "Romero y tomillo",
+		"shipAddress": {
+			"street": "Gran Vía 1",
+			"city": "Madrid",
+			"region": "NULL",
+			"postalCode": 28001,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 20.7,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10305,
+		"customerID": "OLDWO",
+		"employeeID": 8,
+		"orderDate": "1996-09-13 00:00:00.000",
+		"requiredDate": "1996-10-11 00:00:00.000",
+		"shippedDate": "1996-10-09 00:00:00.000",
+		"shipVia": 3,
+		"freight": 257.62,
+		"shipName": "Old World Delicatessen",
+		"shipAddress": {
+			"street": "2743 Bering St.",
+			"city": "Anchorage",
+			"region": "AK",
+			"postalCode": 99508,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 99,
+				"quantity": 25,
+				"discount": 0.1
+			},
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 18,
+				"unitPrice": 50,
+				"quantity": 25,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10307,
+		"customerID": "LONEP",
+		"employeeID": 2,
+		"orderDate": "1996-09-17 00:00:00.000",
+		"requiredDate": "1996-10-15 00:00:00.000",
+		"shippedDate": "1996-09-25 00:00:00.000",
+		"shipVia": 2,
+		"freight": 0.56,
+		"shipName": "Lonesome Pine Restaurant",
+		"shipAddress": {
+			"street": "89 Chiaroscuro Rd.",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97219,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10308,
+		"customerID": "ANATR",
+		"employeeID": 7,
+		"orderDate": "1996-09-18 00:00:00.000",
+		"requiredDate": "1996-10-16 00:00:00.000",
+		"shippedDate": "1996-09-24 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.61,
+		"shipName": "Ana Trujillo Emparedados y helados",
+		"shipAddress": {
+			"street": "Avda. de la Constitución 2222",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5021,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 1,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10309,
+		"customerID": "HUNGO",
+		"employeeID": 3,
+		"orderDate": "1996-09-19 00:00:00.000",
+		"requiredDate": "1996-10-17 00:00:00.000",
+		"shippedDate": "1996-10-23 00:00:00.000",
+		"shipVia": 1,
+		"freight": 47.3,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 17.6,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 6,
+				"unitPrice": 20,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 42,
+				"unitPrice": 11.2,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 36.8,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10310,
+		"customerID": "THEBI",
+		"employeeID": 8,
+		"orderDate": "1996-09-20 00:00:00.000",
+		"requiredDate": "1996-10-18 00:00:00.000",
+		"shippedDate": "1996-09-27 00:00:00.000",
+		"shipVia": 2,
+		"freight": 17.52,
+		"shipName": "The Big Cheese",
+		"shipAddress": {
+			"street": "89 Jefferson Way Suite 2",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97201,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10314,
+		"customerID": "RATTC",
+		"employeeID": 1,
+		"orderDate": "1996-09-25 00:00:00.000",
+		"requiredDate": "1996-10-23 00:00:00.000",
+		"shippedDate": "1996-10-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 74.16,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 32,
+				"unitPrice": 25.6,
+				"quantity": 40,
+				"discount": 0.1
+			},
+			{
+				"productID": 58,
+				"unitPrice": 10.6,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 25,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10315,
+		"customerID": "ISLAT",
+		"employeeID": 4,
+		"orderDate": "1996-09-26 00:00:00.000",
+		"requiredDate": "1996-10-24 00:00:00.000",
+		"shippedDate": "1996-10-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 41.76,
+		"shipName": "Island Trading",
+		"shipAddress": {
+			"street": "Garden House Crowther Way",
+			"city": "Cowes",
+			"region": "Isle of Wight",
+			"postalCode": "PO31 7PJ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 34,
+				"unitPrice": 11.2,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10316,
+		"customerID": "RATTC",
+		"employeeID": 1,
+		"orderDate": "1996-09-27 00:00:00.000",
+		"requiredDate": "1996-10-25 00:00:00.000",
+		"shippedDate": "1996-10-08 00:00:00.000",
+		"shipVia": 3,
+		"freight": 150.15,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 70,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10311,
+		"customerID": "DUMON",
+		"employeeID": 1,
+		"orderDate": "1996-09-20 00:00:00.000",
+		"requiredDate": "1996-10-04 00:00:00.000",
+		"shippedDate": "1996-09-26 00:00:00.000",
+		"shipVia": 3,
+		"freight": 24.69,
+		"shipName": "Du monde entier",
+		"shipAddress": {
+			"street": "67 rue des Cinquante Otages",
+			"city": "Nantes",
+			"region": "NULL",
+			"postalCode": 44000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 42,
+				"unitPrice": 11.2,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 7,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10312,
+		"customerID": "WANDK",
+		"employeeID": 2,
+		"orderDate": "1996-09-23 00:00:00.000",
+		"requiredDate": "1996-10-21 00:00:00.000",
+		"shippedDate": "1996-10-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 40.26,
+		"shipName": "Die Wandernde Kuh",
+		"shipAddress": {
+			"street": "Adenauerallee 900",
+			"city": "Stuttgart",
+			"region": "NULL",
+			"postalCode": 70563,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 43,
+				"unitPrice": 36.8,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 4,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10319,
+		"customerID": "TORTU",
+		"employeeID": 7,
+		"orderDate": "1996-10-02 00:00:00.000",
+		"requiredDate": "1996-10-30 00:00:00.000",
+		"shippedDate": "1996-10-11 00:00:00.000",
+		"shipVia": 3,
+		"freight": 64.5,
+		"shipName": "Tortuga Restaurante",
+		"shipAddress": {
+			"street": "Avda. Azteca 123",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10318,
+		"customerID": "ISLAT",
+		"employeeID": 8,
+		"orderDate": "1996-10-01 00:00:00.000",
+		"requiredDate": "1996-10-29 00:00:00.000",
+		"shippedDate": "1996-10-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 4.73,
+		"shipName": "Island Trading",
+		"shipAddress": {
+			"street": "Garden House Crowther Way",
+			"city": "Cowes",
+			"region": "Isle of Wight",
+			"postalCode": "PO31 7PJ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10326,
+		"customerID": "BOLID",
+		"employeeID": 4,
+		"orderDate": "1996-10-10 00:00:00.000",
+		"requiredDate": "1996-11-07 00:00:00.000",
+		"shippedDate": "1996-10-14 00:00:00.000",
+		"shipVia": 2,
+		"freight": 77.92,
+		"shipName": "Bólido Comidas preparadas",
+		"shipAddress": {
+			"street": "C/ Araquil 67",
+			"city": "Madrid",
+			"region": "NULL",
+			"postalCode": 28023,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 17.6,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 57,
+				"unitPrice": 15.6,
+				"quantity": 16,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10323,
+		"customerID": "KOENE",
+		"employeeID": 4,
+		"orderDate": "1996-10-07 00:00:00.000",
+		"requiredDate": "1996-11-04 00:00:00.000",
+		"shippedDate": "1996-10-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 4.88,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 15,
+				"unitPrice": 12.4,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 25,
+				"unitPrice": 11.2,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 4,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10327,
+		"customerID": "FOLKO",
+		"employeeID": 2,
+		"orderDate": "1996-10-11 00:00:00.000",
+		"requiredDate": "1996-11-08 00:00:00.000",
+		"shippedDate": "1996-10-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 63.36,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 25,
+				"discount": 0.2
+			},
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 50,
+				"discount": 0.2
+			},
+			{
+				"productID": 30,
+				"unitPrice": 20.7,
+				"quantity": 35,
+				"discount": 0.2
+			},
+			{
+				"productID": 58,
+				"unitPrice": 10.6,
+				"quantity": 30,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10328,
+		"customerID": "FURIB",
+		"employeeID": 4,
+		"orderDate": "1996-10-14 00:00:00.000",
+		"requiredDate": "1996-11-11 00:00:00.000",
+		"shippedDate": "1996-10-17 00:00:00.000",
+		"shipVia": 3,
+		"freight": 87.03,
+		"shipName": "Furia Bacalhau e Frutos do Mar",
+		"shipAddress": {
+			"street": "Jardim das rosas n. 32",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1675,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 9,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10330,
+		"customerID": "LILAS",
+		"employeeID": 3,
+		"orderDate": "1996-10-16 00:00:00.000",
+		"requiredDate": "1996-11-13 00:00:00.000",
+		"shippedDate": "1996-10-28 00:00:00.000",
+		"shipVia": 1,
+		"freight": 12.75,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 25,
+				"discount": 0.15
+			},
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 50,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10329,
+		"customerID": "SPLIR",
+		"employeeID": 4,
+		"orderDate": "1996-10-15 00:00:00.000",
+		"requiredDate": "1996-11-26 00:00:00.000",
+		"shippedDate": "1996-10-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 191.67,
+		"shipName": "Split Rail Beer & Ale",
+		"shipAddress": {
+			"street": "P.O. Box 555",
+			"city": "Lander",
+			"region": "WY",
+			"postalCode": 82520,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 10,
+				"discount": 0.05
+			},
+			{
+				"productID": 30,
+				"unitPrice": 20.7,
+				"quantity": 8,
+				"discount": 0.05
+			},
+			{
+				"productID": 38,
+				"unitPrice": 210.8,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 12,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10324,
+		"customerID": "SAVEA",
+		"employeeID": 9,
+		"orderDate": "1996-10-08 00:00:00.000",
+		"requiredDate": "1996-11-05 00:00:00.000",
+		"shippedDate": "1996-10-10 00:00:00.000",
+		"shipVia": 1,
+		"freight": 214.27,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 14.4,
+				"quantity": 70,
+				"discount": 0.15
+			},
+			{
+				"productID": 46,
+				"unitPrice": 9.6,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 21,
+				"discount": 0.15
+			},
+			{
+				"productID": 63,
+				"unitPrice": 35.1,
+				"quantity": 80,
+				"discount": 0.15
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 40,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10333,
+		"customerID": "WARTH",
+		"employeeID": 5,
+		"orderDate": "1996-10-18 00:00:00.000",
+		"requiredDate": "1996-11-15 00:00:00.000",
+		"shippedDate": "1996-10-25 00:00:00.000",
+		"shipVia": 3,
+		"freight": 0.59,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 18.6,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 10,
+				"discount": 0.1
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 40,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10334,
+		"customerID": "VICTE",
+		"employeeID": 8,
+		"orderDate": "1996-10-21 00:00:00.000",
+		"requiredDate": "1996-11-18 00:00:00.000",
+		"shippedDate": "1996-10-28 00:00:00.000",
+		"shipVia": 2,
+		"freight": 8.56,
+		"shipName": "Victuailles en stock",
+		"shipAddress": {
+			"street": "2 rue du Commerce",
+			"city": "Lyon",
+			"region": "NULL",
+			"postalCode": 69004,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 5.6,
+				"quantity": 8,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10335,
+		"customerID": "HUNGO",
+		"employeeID": 7,
+		"orderDate": "1996-10-22 00:00:00.000",
+		"requiredDate": "1996-11-19 00:00:00.000",
+		"shippedDate": "1996-10-24 00:00:00.000",
+		"shipVia": 2,
+		"freight": 42.11,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 25,
+				"discount": 0.2
+			},
+			{
+				"productID": 32,
+				"unitPrice": 25.6,
+				"quantity": 6,
+				"discount": 0.2
+			},
+			{
+				"productID": 51,
+				"unitPrice": 42.4,
+				"quantity": 48,
+				"discount": 0.2
+			},
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 7,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10337,
+		"customerID": "FRANK",
+		"employeeID": 4,
+		"orderDate": "1996-10-24 00:00:00.000",
+		"requiredDate": "1996-11-21 00:00:00.000",
+		"shippedDate": "1996-10-29 00:00:00.000",
+		"shipVia": 3,
+		"freight": 108.26,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 23,
+				"unitPrice": 7.2,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 36,
+				"unitPrice": 15.2,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 37,
+				"unitPrice": 20.8,
+				"quantity": 28,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10338,
+		"customerID": "OLDWO",
+		"employeeID": 4,
+		"orderDate": "1996-10-25 00:00:00.000",
+		"requiredDate": "1996-11-22 00:00:00.000",
+		"shippedDate": "1996-10-29 00:00:00.000",
+		"shipVia": 3,
+		"freight": 84.21,
+		"shipName": "Old World Delicatessen",
+		"shipAddress": {
+			"street": "2743 Bering St.",
+			"city": "Anchorage",
+			"region": "AK",
+			"postalCode": 99508,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 30,
+				"unitPrice": 20.7,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10339,
+		"customerID": "MEREP",
+		"employeeID": 2,
+		"orderDate": "1996-10-28 00:00:00.000",
+		"requiredDate": "1996-11-25 00:00:00.000",
+		"shippedDate": "1996-11-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 15.66,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 17.6,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 70,
+				"discount": 0.05
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 28,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10340,
+		"customerID": "BONAP",
+		"employeeID": 1,
+		"orderDate": "1996-10-29 00:00:00.000",
+		"requiredDate": "1996-11-26 00:00:00.000",
+		"shippedDate": "1996-11-08 00:00:00.000",
+		"shipVia": 3,
+		"freight": 166.31,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 50,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 12,
+				"discount": 0.05
+			},
+			{
+				"productID": 43,
+				"unitPrice": 36.8,
+				"quantity": 40,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10341,
+		"customerID": "SIMOB",
+		"employeeID": 7,
+		"orderDate": "1996-10-29 00:00:00.000",
+		"requiredDate": "1996-11-26 00:00:00.000",
+		"shippedDate": "1996-11-05 00:00:00.000",
+		"shipVia": 3,
+		"freight": 26.78,
+		"shipName": "Simons bistro",
+		"shipAddress": {
+			"street": "Vinbæltet 34",
+			"city": "Kobenhavn",
+			"region": "NULL",
+			"postalCode": 1734,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 9,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10342,
+		"customerID": "FRANK",
+		"employeeID": 4,
+		"orderDate": "1996-10-30 00:00:00.000",
+		"requiredDate": "1996-11-13 00:00:00.000",
+		"shippedDate": "1996-11-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 54.83,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 24,
+				"discount": 0.2
+			},
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 56,
+				"discount": 0.2
+			},
+			{
+				"productID": 36,
+				"unitPrice": 15.2,
+				"quantity": 40,
+				"discount": 0.2
+			},
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 40,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10343,
+		"customerID": "LEHMS",
+		"employeeID": 4,
+		"orderDate": "1996-10-31 00:00:00.000",
+		"requiredDate": "1996-11-28 00:00:00.000",
+		"shippedDate": "1996-11-06 00:00:00.000",
+		"shipVia": 1,
+		"freight": 110.37,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 4,
+				"discount": 0.05
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 26.6,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10344,
+		"customerID": "WHITC",
+		"employeeID": 4,
+		"orderDate": "1996-11-01 00:00:00.000",
+		"requiredDate": "1996-11-29 00:00:00.000",
+		"shippedDate": "1996-11-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 23.29,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 17.6,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 8,
+				"unitPrice": 32,
+				"quantity": 70,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10345,
+		"customerID": "QUICK",
+		"employeeID": 2,
+		"orderDate": "1996-11-04 00:00:00.000",
+		"requiredDate": "1996-12-02 00:00:00.000",
+		"shippedDate": "1996-11-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 249.06,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 8,
+				"unitPrice": 32,
+				"quantity": 70,
+				"discount": 0
+			},
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 80,
+				"discount": 0
+			},
+			{
+				"productID": 42,
+				"unitPrice": 11.2,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10346,
+		"customerID": "RATTC",
+		"employeeID": 3,
+		"orderDate": "1996-11-05 00:00:00.000",
+		"requiredDate": "1996-12-17 00:00:00.000",
+		"shippedDate": "1996-11-08 00:00:00.000",
+		"shipVia": 3,
+		"freight": 142.08,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 36,
+				"discount": 0.1
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10347,
+		"customerID": "FAMIA",
+		"employeeID": 4,
+		"orderDate": "1996-11-06 00:00:00.000",
+		"requiredDate": "1996-12-04 00:00:00.000",
+		"shippedDate": "1996-11-08 00:00:00.000",
+		"shipVia": 3,
+		"freight": 3.1,
+		"shipName": "Familia Arquibaldo",
+		"shipAddress": {
+			"street": "Rua Orós 92",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05442-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 25,
+				"unitPrice": 11.2,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 50,
+				"discount": 0.15
+			},
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 6,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10348,
+		"customerID": "WANDK",
+		"employeeID": 4,
+		"orderDate": "1996-11-07 00:00:00.000",
+		"requiredDate": "1996-12-05 00:00:00.000",
+		"shippedDate": "1996-11-15 00:00:00.000",
+		"shipVia": 2,
+		"freight": 0.78,
+		"shipName": "Die Wandernde Kuh",
+		"shipAddress": {
+			"street": "Adenauerallee 900",
+			"city": "Stuttgart",
+			"region": "NULL",
+			"postalCode": 70563,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 14.4,
+				"quantity": 15,
+				"discount": 0.15
+			},
+			{
+				"productID": 23,
+				"unitPrice": 7.2,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10325,
+		"customerID": "KOENE",
+		"employeeID": 1,
+		"orderDate": "1996-10-09 00:00:00.000",
+		"requiredDate": "1996-10-23 00:00:00.000",
+		"shippedDate": "1996-10-14 00:00:00.000",
+		"shipVia": 3,
+		"freight": 64.86,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 4.8,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 14,
+				"unitPrice": 18.6,
+				"quantity": 9,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 6,
+				"unitPrice": 20,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10350,
+		"customerID": "LAMAI",
+		"employeeID": 6,
+		"orderDate": "1996-11-11 00:00:00.000",
+		"requiredDate": "1996-12-09 00:00:00.000",
+		"shippedDate": "1996-12-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 64.19,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 50,
+				"unitPrice": 13,
+				"quantity": 15,
+				"discount": 0.1
+			},
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 18,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10332,
+		"customerID": "MEREP",
+		"employeeID": 3,
+		"orderDate": "1996-10-17 00:00:00.000",
+		"requiredDate": "1996-11-28 00:00:00.000",
+		"shippedDate": "1996-10-21 00:00:00.000",
+		"shipVia": 2,
+		"freight": 52.84,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 50,
+				"quantity": 40,
+				"discount": 0.2
+			},
+			{
+				"productID": 42,
+				"unitPrice": 11.2,
+				"quantity": 10,
+				"discount": 0.2
+			},
+			{
+				"productID": 47,
+				"unitPrice": 7.6,
+				"quantity": 16,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10351,
+		"customerID": "ERNSH",
+		"employeeID": 1,
+		"orderDate": "1996-11-11 00:00:00.000",
+		"requiredDate": "1996-12-09 00:00:00.000",
+		"shippedDate": "1996-11-20 00:00:00.000",
+		"shipVia": 1,
+		"freight": 162.33,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 38,
+				"unitPrice": 210.8,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 13,
+				"discount": 0
+			},
+			{
+				"productID": 44,
+				"unitPrice": 15.5,
+				"quantity": 77,
+				"discount": 0.05
+			},
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 10,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10355,
+		"customerID": "AROUT",
+		"employeeID": 6,
+		"orderDate": "1996-11-15 00:00:00.000",
+		"requiredDate": "1996-12-13 00:00:00.000",
+		"shippedDate": "1996-11-20 00:00:00.000",
+		"shipVia": 1,
+		"freight": 41.95,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 57,
+				"unitPrice": 15.6,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10356,
+		"customerID": "WANDK",
+		"employeeID": 6,
+		"orderDate": "1996-11-18 00:00:00.000",
+		"requiredDate": "1996-12-16 00:00:00.000",
+		"shippedDate": "1996-11-27 00:00:00.000",
+		"shipVia": 2,
+		"freight": 36.71,
+		"shipName": "Die Wandernde Kuh",
+		"shipAddress": {
+			"street": "Adenauerallee 900",
+			"city": "Stuttgart",
+			"region": "NULL",
+			"postalCode": 70563,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10357,
+		"customerID": "LILAS",
+		"employeeID": 1,
+		"orderDate": "1996-11-19 00:00:00.000",
+		"requiredDate": "1996-12-17 00:00:00.000",
+		"shippedDate": "1996-12-02 00:00:00.000",
+		"shipVia": 3,
+		"freight": 34.88,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 24.8,
+				"quantity": 30,
+				"discount": 0.2
+			},
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 16,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 8,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10358,
+		"customerID": "LAMAI",
+		"employeeID": 5,
+		"orderDate": "1996-11-20 00:00:00.000",
+		"requiredDate": "1996-12-18 00:00:00.000",
+		"shippedDate": "1996-11-27 00:00:00.000",
+		"shipVia": 1,
+		"freight": 19.64,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 10,
+				"discount": 0.05
+			},
+			{
+				"productID": 34,
+				"unitPrice": 11.2,
+				"quantity": 10,
+				"discount": 0.05
+			},
+			{
+				"productID": 36,
+				"unitPrice": 15.2,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10359,
+		"customerID": "SEVES",
+		"employeeID": 5,
+		"orderDate": "1996-11-21 00:00:00.000",
+		"requiredDate": "1996-12-19 00:00:00.000",
+		"shippedDate": "1996-11-26 00:00:00.000",
+		"shipVia": 3,
+		"freight": 288.43,
+		"shipName": "Seven Seas Imports",
+		"shipAddress": {
+			"street": "90 Wadhurst Rd.",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "OX15 4NB",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 56,
+				"discount": 0.05
+			},
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 70,
+				"discount": 0.05
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 80,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10360,
+		"customerID": "BLONP",
+		"employeeID": 4,
+		"orderDate": "1996-11-22 00:00:00.000",
+		"requiredDate": "1996-12-20 00:00:00.000",
+		"shippedDate": "1996-12-02 00:00:00.000",
+		"shipVia": 3,
+		"freight": 131.7,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 29,
+				"unitPrice": 99,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 38,
+				"unitPrice": 210.8,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 16,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 28,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10361,
+		"customerID": "QUICK",
+		"employeeID": 1,
+		"orderDate": "1996-11-22 00:00:00.000",
+		"requiredDate": "1996-12-20 00:00:00.000",
+		"shippedDate": "1996-12-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 183.17,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 54,
+				"discount": 0.1
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 55,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10353,
+		"customerID": "PICCO",
+		"employeeID": 7,
+		"orderDate": "1996-11-13 00:00:00.000",
+		"requiredDate": "1996-12-11 00:00:00.000",
+		"shippedDate": "1996-11-25 00:00:00.000",
+		"shipVia": 3,
+		"freight": 360.63,
+		"shipName": "Piccolo und mehr",
+		"shipAddress": {
+			"street": "Geislweg 14",
+			"city": "Salzburg",
+			"region": "NULL",
+			"postalCode": 5020,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 12,
+				"discount": 0.2
+			},
+			{
+				"productID": 38,
+				"unitPrice": 210.8,
+				"quantity": 50,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10363,
+		"customerID": "DRACD",
+		"employeeID": 4,
+		"orderDate": "1996-11-26 00:00:00.000",
+		"requiredDate": "1996-12-24 00:00:00.000",
+		"shippedDate": "1996-12-04 00:00:00.000",
+		"shipVia": 3,
+		"freight": 30.54,
+		"shipName": "Drachenblut Delikatessen",
+		"shipAddress": {
+			"street": "Walserweg 21",
+			"city": "Aachen",
+			"region": "NULL",
+			"postalCode": 52066,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10352,
+		"customerID": "FURIB",
+		"employeeID": 3,
+		"orderDate": "1996-11-12 00:00:00.000",
+		"requiredDate": "1996-11-26 00:00:00.000",
+		"shippedDate": "1996-11-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.3,
+		"shipName": "Furia Bacalhau e Frutos do Mar",
+		"shipAddress": {
+			"street": "Jardim das rosas n. 32",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1675,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 20,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10364,
+		"customerID": "EASTC",
+		"employeeID": 1,
+		"orderDate": "1996-11-26 00:00:00.000",
+		"requiredDate": "1997-01-07 00:00:00.000",
+		"shippedDate": "1996-12-04 00:00:00.000",
+		"shipVia": 1,
+		"freight": 71.97,
+		"shipName": "Eastern Connection",
+		"shipAddress": {
+			"street": "35 King George",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "WX3 6FW",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10354,
+		"customerID": "PERIC",
+		"employeeID": 8,
+		"orderDate": "1996-11-14 00:00:00.000",
+		"requiredDate": "1996-12-12 00:00:00.000",
+		"shippedDate": "1996-11-20 00:00:00.000",
+		"shipVia": 3,
+		"freight": 53.8,
+		"shipName": "Pericles Comidas clásicas",
+		"shipAddress": {
+			"street": "Calle Dr. Jorge Cash 321",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 14.4,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 29,
+				"unitPrice": 99,
+				"quantity": 4,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10362,
+		"customerID": "BONAP",
+		"employeeID": 3,
+		"orderDate": "1996-11-25 00:00:00.000",
+		"requiredDate": "1996-12-23 00:00:00.000",
+		"shippedDate": "1996-11-28 00:00:00.000",
+		"shipVia": 1,
+		"freight": 96.04,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 25,
+				"unitPrice": 11.2,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 42.4,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10366,
+		"customerID": "GALED",
+		"employeeID": 8,
+		"orderDate": "1996-11-28 00:00:00.000",
+		"requiredDate": "1997-01-09 00:00:00.000",
+		"shippedDate": "1996-12-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 10.14,
+		"shipName": "Galería del gastronómo",
+		"shipAddress": {
+			"street": "Rambla de Cataluña 23",
+			"city": "Barcelona",
+			"region": "NULL",
+			"postalCode": 8022,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10367,
+		"customerID": "VAFFE",
+		"employeeID": 7,
+		"orderDate": "1996-11-28 00:00:00.000",
+		"requiredDate": "1996-12-26 00:00:00.000",
+		"shippedDate": "1996-12-02 00:00:00.000",
+		"shipVia": 3,
+		"freight": 13.55,
+		"shipName": "Vaffeljernet",
+		"shipAddress": {
+			"street": "Smagsloget 45",
+			"city": "Århus",
+			"region": "NULL",
+			"postalCode": 8200,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 34,
+				"unitPrice": 11.2,
+				"quantity": 36,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 7,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10372,
+		"customerID": "QUEEN",
+		"employeeID": 5,
+		"orderDate": "1996-12-04 00:00:00.000",
+		"requiredDate": "1997-01-01 00:00:00.000",
+		"shippedDate": "1996-12-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 890.78,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 20,
+				"unitPrice": 64.8,
+				"quantity": 12,
+				"discount": 0.25
+			},
+			{
+				"productID": 38,
+				"unitPrice": 210.8,
+				"quantity": 40,
+				"discount": 0.25
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 70,
+				"discount": 0.25
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 42,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10373,
+		"customerID": "HUNGO",
+		"employeeID": 4,
+		"orderDate": "1996-12-05 00:00:00.000",
+		"requiredDate": "1997-01-02 00:00:00.000",
+		"shippedDate": "1996-12-11 00:00:00.000",
+		"shipVia": 3,
+		"freight": 124.12,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 58,
+				"unitPrice": 10.6,
+				"quantity": 80,
+				"discount": 0.2
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 50,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10374,
+		"customerID": "WOLZA",
+		"employeeID": 1,
+		"orderDate": "1996-12-05 00:00:00.000",
+		"requiredDate": "1997-01-02 00:00:00.000",
+		"shippedDate": "1996-12-09 00:00:00.000",
+		"shipVia": 3,
+		"freight": 3.94,
+		"shipName": "Wolski Zajazd",
+		"shipAddress": {
+			"street": "ul. Filtrowa 68",
+			"city": "Warszawa",
+			"region": "NULL",
+			"postalCode": "01-012",
+			"country": "Poland"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 58,
+				"unitPrice": 10.6,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10375,
+		"customerID": "HUNGC",
+		"employeeID": 3,
+		"orderDate": "1996-12-06 00:00:00.000",
+		"requiredDate": "1997-01-03 00:00:00.000",
+		"shippedDate": "1996-12-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 20.12,
+		"shipName": "Hungry Coyote Import Store",
+		"shipAddress": {
+			"street": "City Center Plaza 516 Main St.",
+			"city": "Elgin",
+			"region": "OR",
+			"postalCode": 97827,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 18.6,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10368,
+		"customerID": "ERNSH",
+		"employeeID": 2,
+		"orderDate": "1996-11-29 00:00:00.000",
+		"requiredDate": "1996-12-27 00:00:00.000",
+		"shippedDate": "1996-12-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 101.95,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 5,
+				"discount": 0.1
+			},
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 13,
+				"discount": 0.1
+			},
+			{
+				"productID": 57,
+				"unitPrice": 15.6,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 26.6,
+				"quantity": 35,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10369,
+		"customerID": "SPLIR",
+		"employeeID": 8,
+		"orderDate": "1996-12-02 00:00:00.000",
+		"requiredDate": "1996-12-30 00:00:00.000",
+		"shippedDate": "1996-12-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 195.68,
+		"shipName": "Split Rail Beer & Ale",
+		"shipAddress": {
+			"street": "P.O. Box 555",
+			"city": "Lander",
+			"region": "WY",
+			"postalCode": 82520,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 99,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 18,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10379,
+		"customerID": "QUEDE",
+		"employeeID": 2,
+		"orderDate": "1996-12-11 00:00:00.000",
+		"requiredDate": "1997-01-08 00:00:00.000",
+		"shippedDate": "1996-12-13 00:00:00.000",
+		"shipVia": 1,
+		"freight": 45.03,
+		"shipName": "Que Delícia",
+		"shipAddress": {
+			"street": "Rua da Panificadora 12",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-673",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 8,
+				"discount": 0.1
+			},
+			{
+				"productID": 63,
+				"unitPrice": 35.1,
+				"quantity": 16,
+				"discount": 0.1
+			},
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 20,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10370,
+		"customerID": "CHOPS",
+		"employeeID": 6,
+		"orderDate": "1996-12-03 00:00:00.000",
+		"requiredDate": "1996-12-31 00:00:00.000",
+		"shippedDate": "1996-12-27 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.17,
+		"shipName": "Chop-suey Chinese",
+		"shipAddress": {
+			"street": "Hauptstr. 31",
+			"city": "Bern",
+			"region": "NULL",
+			"postalCode": 3012,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 14.4,
+				"quantity": 15,
+				"discount": 0.15
+			},
+			{
+				"productID": 64,
+				"unitPrice": 26.6,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 74,
+				"unitPrice": 8,
+				"quantity": 20,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10380,
+		"customerID": "HUNGO",
+		"employeeID": 8,
+		"orderDate": "1996-12-12 00:00:00.000",
+		"requiredDate": "1997-01-09 00:00:00.000",
+		"shippedDate": "1997-01-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 35.03,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 20.7,
+				"quantity": 18,
+				"discount": 0.1
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 6,
+				"discount": 0.1
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 20,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10377,
+		"customerID": "SEVES",
+		"employeeID": 1,
+		"orderDate": "1996-12-09 00:00:00.000",
+		"requiredDate": "1997-01-06 00:00:00.000",
+		"shippedDate": "1996-12-13 00:00:00.000",
+		"shipVia": 3,
+		"freight": 22.21,
+		"shipName": "Seven Seas Imports",
+		"shipAddress": {
+			"street": "90 Wadhurst Rd.",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "OX15 4NB",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 20,
+				"discount": 0.15
+			},
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 20,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10384,
+		"customerID": "BERGS",
+		"employeeID": 3,
+		"orderDate": "1996-12-16 00:00:00.000",
+		"requiredDate": "1997-01-13 00:00:00.000",
+		"shippedDate": "1996-12-20 00:00:00.000",
+		"shipVia": 3,
+		"freight": 168.64,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 20,
+				"unitPrice": 64.8,
+				"quantity": 28,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10385,
+		"customerID": "SPLIR",
+		"employeeID": 1,
+		"orderDate": "1996-12-17 00:00:00.000",
+		"requiredDate": "1997-01-14 00:00:00.000",
+		"shippedDate": "1996-12-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 30.96,
+		"shipName": "Split Rail Beer & Ale",
+		"shipAddress": {
+			"street": "P.O. Box 555",
+			"city": "Lander",
+			"region": "WY",
+			"postalCode": 82520,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 24,
+				"quantity": 10,
+				"discount": 0.2
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 8,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10386,
+		"customerID": "FAMIA",
+		"employeeID": 9,
+		"orderDate": "1996-12-18 00:00:00.000",
+		"requiredDate": "1997-01-01 00:00:00.000",
+		"shippedDate": "1996-12-25 00:00:00.000",
+		"shipVia": 3,
+		"freight": 13.99,
+		"shipName": "Familia Arquibaldo",
+		"shipAddress": {
+			"street": "Rua Orós 92",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05442-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 34,
+				"unitPrice": 11.2,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10387,
+		"customerID": "SANTG",
+		"employeeID": 1,
+		"orderDate": "1996-12-18 00:00:00.000",
+		"requiredDate": "1997-01-15 00:00:00.000",
+		"shippedDate": "1996-12-20 00:00:00.000",
+		"shipVia": 2,
+		"freight": 93.63,
+		"shipName": "Santé Gourmet",
+		"shipAddress": {
+			"street": "Erling Skakkes gate 78",
+			"city": "Stavern",
+			"region": "NULL",
+			"postalCode": 4110,
+			"country": "Norway"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10388,
+		"customerID": "SEVES",
+		"employeeID": 2,
+		"orderDate": "1996-12-19 00:00:00.000",
+		"requiredDate": "1997-01-16 00:00:00.000",
+		"shippedDate": "1996-12-20 00:00:00.000",
+		"shipVia": 1,
+		"freight": 34.86,
+		"shipName": "Seven Seas Imports",
+		"shipAddress": {
+			"street": "90 Wadhurst Rd.",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "OX15 4NB",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 45,
+				"unitPrice": 7.6,
+				"quantity": 15,
+				"discount": 0.2
+			},
+			{
+				"productID": 52,
+				"unitPrice": 5.6,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10389,
+		"customerID": "BOTTM",
+		"employeeID": 4,
+		"orderDate": "1996-12-20 00:00:00.000",
+		"requiredDate": "1997-01-17 00:00:00.000",
+		"shippedDate": "1996-12-24 00:00:00.000",
+		"shipVia": 2,
+		"freight": 47.42,
+		"shipName": "Bottom-Dollar Markets",
+		"shipAddress": {
+			"street": "23 Tsawassen Blvd.",
+			"city": "Tsawassen",
+			"region": "BC",
+			"postalCode": "T2F 8M4",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 24.8,
+				"quantity": 16,
+				"discount": 0
+			},
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10382,
+		"customerID": "ERNSH",
+		"employeeID": 4,
+		"orderDate": "1996-12-13 00:00:00.000",
+		"requiredDate": "1997-01-10 00:00:00.000",
+		"shippedDate": "1996-12-16 00:00:00.000",
+		"shipVia": 1,
+		"freight": 94.77,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 99,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 74,
+				"unitPrice": 8,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 5,
+				"unitPrice": 17,
+				"quantity": 32,
+				"discount": 0
+			},
+			{
+				"productID": 18,
+				"unitPrice": 50,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10381,
+		"customerID": "LILAS",
+		"employeeID": 3,
+		"orderDate": "1996-12-12 00:00:00.000",
+		"requiredDate": "1997-01-09 00:00:00.000",
+		"shippedDate": "1996-12-13 00:00:00.000",
+		"shipVia": 3,
+		"freight": 7.99,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 74,
+				"unitPrice": 8,
+				"quantity": 14,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10383,
+		"customerID": "AROUT",
+		"employeeID": 8,
+		"orderDate": "1996-12-16 00:00:00.000",
+		"requiredDate": "1997-01-13 00:00:00.000",
+		"shippedDate": "1996-12-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 34.24,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 4.8,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 50,
+				"unitPrice": 13,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10390,
+		"customerID": "ERNSH",
+		"employeeID": 6,
+		"orderDate": "1996-12-23 00:00:00.000",
+		"requiredDate": "1997-01-20 00:00:00.000",
+		"shippedDate": "1996-12-26 00:00:00.000",
+		"shipVia": 1,
+		"freight": 126.38,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 60,
+				"discount": 0.1
+			},
+			{
+				"productID": 35,
+				"unitPrice": 14.4,
+				"quantity": 40,
+				"discount": 0.1
+			},
+			{
+				"productID": 46,
+				"unitPrice": 9.6,
+				"quantity": 45,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 24,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10396,
+		"customerID": "FRANK",
+		"employeeID": 1,
+		"orderDate": "1996-12-27 00:00:00.000",
+		"requiredDate": "1997-01-10 00:00:00.000",
+		"shippedDate": "1997-01-06 00:00:00.000",
+		"shipVia": 3,
+		"freight": 135.35,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 23,
+				"unitPrice": 7.2,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10397,
+		"customerID": "PRINI",
+		"employeeID": 5,
+		"orderDate": "1996-12-27 00:00:00.000",
+		"requiredDate": "1997-01-24 00:00:00.000",
+		"shippedDate": "1997-01-02 00:00:00.000",
+		"shipVia": 1,
+		"freight": 60.26,
+		"shipName": "Princesa Isabel Vinhos",
+		"shipAddress": {
+			"street": "Estrada da saúde n. 58",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1756,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 10,
+				"discount": 0.15
+			},
+			{
+				"productID": 51,
+				"unitPrice": 42.4,
+				"quantity": 18,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10398,
+		"customerID": "SAVEA",
+		"employeeID": 2,
+		"orderDate": "1996-12-30 00:00:00.000",
+		"requiredDate": "1997-01-27 00:00:00.000",
+		"shippedDate": "1997-01-09 00:00:00.000",
+		"shipVia": 3,
+		"freight": 89.16,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 14.4,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 120,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10399,
+		"customerID": "VAFFE",
+		"employeeID": 8,
+		"orderDate": "1996-12-31 00:00:00.000",
+		"requiredDate": "1997-01-14 00:00:00.000",
+		"shippedDate": "1997-01-08 00:00:00.000",
+		"shipVia": 3,
+		"freight": 27.36,
+		"shipName": "Vaffeljernet",
+		"shipAddress": {
+			"street": "Smagsloget 45",
+			"city": "Århus",
+			"region": "NULL",
+			"postalCode": 8200,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 14,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10400,
+		"customerID": "EASTC",
+		"employeeID": 1,
+		"orderDate": "1997-01-01 00:00:00.000",
+		"requiredDate": "1997-01-29 00:00:00.000",
+		"shippedDate": "1997-01-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 83.93,
+		"shipName": "Eastern Connection",
+		"shipAddress": {
+			"street": "35 King George",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "WX3 6FW",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 14.4,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 29,
+				"unitPrice": 99,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 16,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10401,
+		"customerID": "RATTC",
+		"employeeID": 1,
+		"orderDate": "1997-01-01 00:00:00.000",
+		"requiredDate": "1997-01-29 00:00:00.000",
+		"shippedDate": "1997-01-10 00:00:00.000",
+		"shipVia": 1,
+		"freight": 12.51,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 20.7,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 70,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 60,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10394,
+		"customerID": "HUNGC",
+		"employeeID": 1,
+		"orderDate": "1996-12-25 00:00:00.000",
+		"requiredDate": "1997-01-22 00:00:00.000",
+		"shippedDate": "1997-01-03 00:00:00.000",
+		"shipVia": 3,
+		"freight": 30.34,
+		"shipName": "Hungry Coyote Import Store",
+		"shipAddress": {
+			"street": "City Center Plaza 516 Main St.",
+			"city": "Elgin",
+			"region": "OR",
+			"postalCode": 97827,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 4.8,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10402,
+		"customerID": "ERNSH",
+		"employeeID": 8,
+		"orderDate": "1997-01-02 00:00:00.000",
+		"requiredDate": "1997-02-13 00:00:00.000",
+		"shippedDate": "1997-01-10 00:00:00.000",
+		"shipVia": 2,
+		"freight": 67.88,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 63,
+				"unitPrice": 35.1,
+				"quantity": 65,
+				"discount": 0
+			},
+			{
+				"productID": 23,
+				"unitPrice": 7.2,
+				"quantity": 60,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10393,
+		"customerID": "SAVEA",
+		"employeeID": 1,
+		"orderDate": "1996-12-25 00:00:00.000",
+		"requiredDate": "1997-01-22 00:00:00.000",
+		"shippedDate": "1997-01-03 00:00:00.000",
+		"shipVia": 3,
+		"freight": 126.56,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 70,
+				"discount": 0.25
+			},
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 32,
+				"discount": 0
+			},
+			{
+				"productID": 25,
+				"unitPrice": 11.2,
+				"quantity": 7,
+				"discount": 0.25
+			},
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 25,
+				"discount": 0.25
+			},
+			{
+				"productID": 14,
+				"unitPrice": 18.6,
+				"quantity": 42,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10395,
+		"customerID": "HILAA",
+		"employeeID": 6,
+		"orderDate": "1996-12-26 00:00:00.000",
+		"requiredDate": "1997-01-23 00:00:00.000",
+		"shippedDate": "1997-01-03 00:00:00.000",
+		"shipVia": 1,
+		"freight": 184.41,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 46,
+				"unitPrice": 9.6,
+				"quantity": 28,
+				"discount": 0.1
+			},
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 70,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10406,
+		"customerID": "QUEEN",
+		"employeeID": 7,
+		"orderDate": "1997-01-07 00:00:00.000",
+		"requiredDate": "1997-02-18 00:00:00.000",
+		"shippedDate": "1997-01-13 00:00:00.000",
+		"shipVia": 1,
+		"freight": 108.04,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 14.4,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 42,
+				"discount": 0.1
+			},
+			{
+				"productID": 36,
+				"unitPrice": 15.2,
+				"quantity": 5,
+				"discount": 0.1
+			},
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 2,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10407,
+		"customerID": "OTTIK",
+		"employeeID": 2,
+		"orderDate": "1997-01-07 00:00:00.000",
+		"requiredDate": "1997-02-04 00:00:00.000",
+		"shippedDate": "1997-01-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 91.48,
+		"shipName": "Ottilies Käseladen",
+		"shipAddress": {
+			"street": "Mehrheimerstr. 369",
+			"city": "Köln",
+			"region": "NULL",
+			"postalCode": 50739,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10408,
+		"customerID": "FOLIG",
+		"employeeID": 8,
+		"orderDate": "1997-01-08 00:00:00.000",
+		"requiredDate": "1997-02-05 00:00:00.000",
+		"shippedDate": "1997-01-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 11.26,
+		"shipName": "Folies gourmandes",
+		"shipAddress": {
+			"street": "184 chaussée de Tournai",
+			"city": "Lille",
+			"region": "NULL",
+			"postalCode": 59000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 37,
+				"unitPrice": 20.8,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10409,
+		"customerID": "OCEAN",
+		"employeeID": 3,
+		"orderDate": "1997-01-09 00:00:00.000",
+		"requiredDate": "1997-02-06 00:00:00.000",
+		"shippedDate": "1997-01-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 29.83,
+		"shipName": "Océano Atlántico Ltda.",
+		"shipAddress": {
+			"street": "Ing. Gustavo Moncada 8585 Piso 20-A",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 18.6,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10410,
+		"customerID": "BOTTM",
+		"employeeID": 3,
+		"orderDate": "1997-01-10 00:00:00.000",
+		"requiredDate": "1997-02-07 00:00:00.000",
+		"shippedDate": "1997-01-15 00:00:00.000",
+		"shipVia": 3,
+		"freight": 2.4,
+		"shipName": "Bottom-Dollar Markets",
+		"shipAddress": {
+			"street": "23 Tsawassen Blvd.",
+			"city": "Tsawassen",
+			"region": "BC",
+			"postalCode": "T2F 8M4",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 49,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 16,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10411,
+		"customerID": "BOTTM",
+		"employeeID": 9,
+		"orderDate": "1997-01-10 00:00:00.000",
+		"requiredDate": "1997-02-07 00:00:00.000",
+		"shippedDate": "1997-01-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 23.65,
+		"shipName": "Bottom-Dollar Markets",
+		"shipAddress": {
+			"street": "23 Tsawassen Blvd.",
+			"city": "Tsawassen",
+			"region": "BC",
+			"postalCode": "T2F 8M4",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 25,
+				"discount": 0.2
+			},
+			{
+				"productID": 44,
+				"unitPrice": 15.5,
+				"quantity": 40,
+				"discount": 0.2
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 9,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10404,
+		"customerID": "MAGAA",
+		"employeeID": 2,
+		"orderDate": "1997-01-03 00:00:00.000",
+		"requiredDate": "1997-01-31 00:00:00.000",
+		"shippedDate": "1997-01-08 00:00:00.000",
+		"shipVia": 1,
+		"freight": 155.97,
+		"shipName": "Magazzini Alimentari Riuniti",
+		"shipAddress": {
+			"street": "Via Ludovico il Moro 22",
+			"city": "Bergamo",
+			"region": "NULL",
+			"postalCode": 24100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 30,
+				"discount": 0.05
+			},
+			{
+				"productID": 42,
+				"unitPrice": 11.2,
+				"quantity": 40,
+				"discount": 0.05
+			},
+			{
+				"productID": 49,
+				"unitPrice": 16,
+				"quantity": 30,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10413,
+		"customerID": "LAMAI",
+		"employeeID": 3,
+		"orderDate": "1997-01-14 00:00:00.000",
+		"requiredDate": "1997-02-11 00:00:00.000",
+		"shippedDate": "1997-01-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 95.66,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 14.4,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 14,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10403,
+		"customerID": "ERNSH",
+		"employeeID": 4,
+		"orderDate": "1997-01-03 00:00:00.000",
+		"requiredDate": "1997-01-31 00:00:00.000",
+		"shippedDate": "1997-01-09 00:00:00.000",
+		"shipVia": 3,
+		"freight": 73.79,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 21,
+				"discount": 0.15
+			},
+			{
+				"productID": 48,
+				"unitPrice": 10.2,
+				"quantity": 70,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10414,
+		"customerID": "FAMIA",
+		"employeeID": 2,
+		"orderDate": "1997-01-14 00:00:00.000",
+		"requiredDate": "1997-02-11 00:00:00.000",
+		"shippedDate": "1997-01-17 00:00:00.000",
+		"shipVia": 3,
+		"freight": 21.48,
+		"shipName": "Familia Arquibaldo",
+		"shipAddress": {
+			"street": "Rua Orós 92",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05442-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 18,
+				"discount": 0.05
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10415,
+		"customerID": "HUNGC",
+		"employeeID": 3,
+		"orderDate": "1997-01-15 00:00:00.000",
+		"requiredDate": "1997-02-12 00:00:00.000",
+		"shippedDate": "1997-01-24 00:00:00.000",
+		"shipVia": 1,
+		"freight": 0.2,
+		"shipName": "Hungry Coyote Import Store",
+		"shipAddress": {
+			"street": "City Center Plaza 516 Main St.",
+			"city": "Elgin",
+			"region": "OR",
+			"postalCode": 97827,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10419,
+		"customerID": "RICSU",
+		"employeeID": 4,
+		"orderDate": "1997-01-20 00:00:00.000",
+		"requiredDate": "1997-02-17 00:00:00.000",
+		"shippedDate": "1997-01-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 137.35,
+		"shipName": "Richter Supermarkt",
+		"shipAddress": {
+			"street": "Starenweg 5",
+			"city": "Genève",
+			"region": "NULL",
+			"postalCode": 1204,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 60,
+				"discount": 0.05
+			},
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10420,
+		"customerID": "WELLI",
+		"employeeID": 3,
+		"orderDate": "1997-01-21 00:00:00.000",
+		"requiredDate": "1997-02-18 00:00:00.000",
+		"shippedDate": "1997-01-27 00:00:00.000",
+		"shipVia": 1,
+		"freight": 44.12,
+		"shipName": "Wellington Importadora",
+		"shipAddress": {
+			"street": "Rua do Mercado 12",
+			"city": "Resende",
+			"region": "SP",
+			"postalCode": "08737-363",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 9,
+				"unitPrice": 77.6,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 13,
+				"unitPrice": 4.8,
+				"quantity": 2,
+				"discount": 0.1
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 8,
+				"discount": 0.1
+			},
+			{
+				"productID": 73,
+				"unitPrice": 12,
+				"quantity": 20,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10421,
+		"customerID": "QUEDE",
+		"employeeID": 8,
+		"orderDate": "1997-01-21 00:00:00.000",
+		"requiredDate": "1997-03-04 00:00:00.000",
+		"shippedDate": "1997-01-27 00:00:00.000",
+		"shipVia": 1,
+		"freight": 99.23,
+		"shipName": "Que Delícia",
+		"shipAddress": {
+			"street": "Rua da Panificadora 12",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-673",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 4,
+				"discount": 0.15
+			},
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 10,
+				"discount": 0.15
+			},
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 15,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10423,
+		"customerID": "GOURL",
+		"employeeID": 6,
+		"orderDate": "1997-01-23 00:00:00.000",
+		"requiredDate": "1997-02-06 00:00:00.000",
+		"shippedDate": "1997-02-24 00:00:00.000",
+		"shipVia": 3,
+		"freight": 24.5,
+		"shipName": "Gourmet Lanchonetes",
+		"shipAddress": {
+			"street": "Av. Brasil 442",
+			"city": "Campinas",
+			"region": "SP",
+			"postalCode": "04876-786",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10424,
+		"customerID": "MEREP",
+		"employeeID": 7,
+		"orderDate": "1997-01-23 00:00:00.000",
+		"requiredDate": "1997-02-20 00:00:00.000",
+		"shippedDate": "1997-01-27 00:00:00.000",
+		"shipVia": 2,
+		"freight": 370.61,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 38,
+				"unitPrice": 210.8,
+				"quantity": 49,
+				"discount": 0.2
+			},
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 30,
+				"discount": 0.2
+			},
+			{
+				"productID": 35,
+				"unitPrice": 14.4,
+				"quantity": 60,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10418,
+		"customerID": "QUICK",
+		"employeeID": 4,
+		"orderDate": "1997-01-17 00:00:00.000",
+		"requiredDate": "1997-02-14 00:00:00.000",
+		"shippedDate": "1997-01-24 00:00:00.000",
+		"shipVia": 1,
+		"freight": 17.55,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 47,
+				"unitPrice": 7.6,
+				"quantity": 55,
+				"discount": 0
+			},
+			{
+				"productID": 61,
+				"unitPrice": 22.8,
+				"quantity": 16,
+				"discount": 0
+			},
+			{
+				"productID": 74,
+				"unitPrice": 8,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10417,
+		"customerID": "SIMOB",
+		"employeeID": 4,
+		"orderDate": "1997-01-16 00:00:00.000",
+		"requiredDate": "1997-02-13 00:00:00.000",
+		"shippedDate": "1997-01-28 00:00:00.000",
+		"shipVia": 3,
+		"freight": 70.29,
+		"shipName": "Simons bistro",
+		"shipAddress": {
+			"street": "Vinbæltet 34",
+			"city": "Kobenhavn",
+			"region": "NULL",
+			"postalCode": 1734,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 38,
+				"unitPrice": 210.8,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 46,
+				"unitPrice": 9.6,
+				"quantity": 2,
+				"discount": 0.25
+			},
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 36,
+				"discount": 0.25
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10416,
+		"customerID": "WARTH",
+		"employeeID": 8,
+		"orderDate": "1997-01-16 00:00:00.000",
+		"requiredDate": "1997-02-13 00:00:00.000",
+		"shippedDate": "1997-01-27 00:00:00.000",
+		"shipVia": 3,
+		"freight": 22.72,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 57,
+				"unitPrice": 15.6,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10425,
+		"customerID": "LAMAI",
+		"employeeID": 6,
+		"orderDate": "1997-01-24 00:00:00.000",
+		"requiredDate": "1997-02-21 00:00:00.000",
+		"shippedDate": "1997-02-14 00:00:00.000",
+		"shipVia": 2,
+		"freight": 7.93,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 10,
+				"discount": 0.25
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 20,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10429,
+		"customerID": "HUNGO",
+		"employeeID": 3,
+		"orderDate": "1997-01-29 00:00:00.000",
+		"requiredDate": "1997-03-12 00:00:00.000",
+		"shippedDate": "1997-02-07 00:00:00.000",
+		"shipVia": 2,
+		"freight": 56.63,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 50,
+				"unitPrice": 13,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 63,
+				"unitPrice": 35.1,
+				"quantity": 35,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10430,
+		"customerID": "ERNSH",
+		"employeeID": 4,
+		"orderDate": "1997-01-30 00:00:00.000",
+		"requiredDate": "1997-02-13 00:00:00.000",
+		"shippedDate": "1997-02-03 00:00:00.000",
+		"shipVia": 1,
+		"freight": 458.78,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 45,
+				"discount": 0.2
+			},
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 70,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10431,
+		"customerID": "BOTTM",
+		"employeeID": 4,
+		"orderDate": "1997-01-30 00:00:00.000",
+		"requiredDate": "1997-02-13 00:00:00.000",
+		"shippedDate": "1997-02-07 00:00:00.000",
+		"shipVia": 2,
+		"freight": 44.17,
+		"shipName": "Bottom-Dollar Markets",
+		"shipAddress": {
+			"street": "23 Tsawassen Blvd.",
+			"city": "Tsawassen",
+			"region": "BC",
+			"postalCode": "T2F 8M4",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 50,
+				"discount": 0.25
+			},
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 50,
+				"discount": 0.25
+			},
+			{
+				"productID": 47,
+				"unitPrice": 7.6,
+				"quantity": 30,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10432,
+		"customerID": "SPLIR",
+		"employeeID": 3,
+		"orderDate": "1997-01-31 00:00:00.000",
+		"requiredDate": "1997-02-14 00:00:00.000",
+		"shippedDate": "1997-02-07 00:00:00.000",
+		"shipVia": 2,
+		"freight": 4.34,
+		"shipName": "Split Rail Beer & Ale",
+		"shipAddress": {
+			"street": "P.O. Box 555",
+			"city": "Lander",
+			"region": "WY",
+			"postalCode": 82520,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10434,
+		"customerID": "FOLKO",
+		"employeeID": 3,
+		"orderDate": "1997-02-03 00:00:00.000",
+		"requiredDate": "1997-03-03 00:00:00.000",
+		"shippedDate": "1997-02-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 17.92,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 18,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10436,
+		"customerID": "BLONP",
+		"employeeID": 3,
+		"orderDate": "1997-02-05 00:00:00.000",
+		"requiredDate": "1997-03-05 00:00:00.000",
+		"shippedDate": "1997-02-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 156.66,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 24,
+				"discount": 0.1
+			},
+			{
+				"productID": 46,
+				"unitPrice": 9.6,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 40,
+				"discount": 0.1
+			},
+			{
+				"productID": 64,
+				"unitPrice": 26.6,
+				"quantity": 30,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10435,
+		"customerID": "CONSH",
+		"employeeID": 8,
+		"orderDate": "1997-02-04 00:00:00.000",
+		"requiredDate": "1997-03-18 00:00:00.000",
+		"shippedDate": "1997-02-07 00:00:00.000",
+		"shipVia": 2,
+		"freight": 9.21,
+		"shipName": "Consolidated Holdings",
+		"shipAddress": {
+			"street": "Berkeley Gardens 12  Brewery",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "WX1 6LT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 22,
+				"unitPrice": 16.8,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10426,
+		"customerID": "GALED",
+		"employeeID": 4,
+		"orderDate": "1997-01-27 00:00:00.000",
+		"requiredDate": "1997-02-24 00:00:00.000",
+		"shippedDate": "1997-02-06 00:00:00.000",
+		"shipVia": 1,
+		"freight": 18.69,
+		"shipName": "Galería del gastronómo",
+		"shipAddress": {
+			"street": "Rambla de Cataluña 23",
+			"city": "Barcelona",
+			"region": "NULL",
+			"postalCode": 8022,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 26.6,
+				"quantity": 7,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10442,
+		"customerID": "ERNSH",
+		"employeeID": 3,
+		"orderDate": "1997-02-11 00:00:00.000",
+		"requiredDate": "1997-03-11 00:00:00.000",
+		"shippedDate": "1997-02-18 00:00:00.000",
+		"shipVia": 2,
+		"freight": 47.94,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 80,
+				"discount": 0
+			},
+			{
+				"productID": 66,
+				"unitPrice": 13.6,
+				"quantity": 60,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10443,
+		"customerID": "REGGC",
+		"employeeID": 8,
+		"orderDate": "1997-02-12 00:00:00.000",
+		"requiredDate": "1997-03-12 00:00:00.000",
+		"shippedDate": "1997-02-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 13.95,
+		"shipName": "Reggiani Caseifici",
+		"shipAddress": {
+			"street": "Strada Provinciale 124",
+			"city": "Reggio Emilia",
+			"region": "NULL",
+			"postalCode": 42100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 6,
+				"discount": 0.2
+			},
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10444,
+		"customerID": "BERGS",
+		"employeeID": 3,
+		"orderDate": "1997-02-12 00:00:00.000",
+		"requiredDate": "1997-03-12 00:00:00.000",
+		"shippedDate": "1997-02-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 3.5,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 31.2,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 35,
+				"unitPrice": 14.4,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10445,
+		"customerID": "BERGS",
+		"employeeID": 3,
+		"orderDate": "1997-02-13 00:00:00.000",
+		"requiredDate": "1997-03-13 00:00:00.000",
+		"shippedDate": "1997-02-20 00:00:00.000",
+		"shipVia": 1,
+		"freight": 9.3,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10446,
+		"customerID": "TOMSP",
+		"employeeID": 6,
+		"orderDate": "1997-02-14 00:00:00.000",
+		"requiredDate": "1997-03-14 00:00:00.000",
+		"shippedDate": "1997-02-19 00:00:00.000",
+		"shipVia": 1,
+		"freight": 14.68,
+		"shipName": "Toms Spezialitäten",
+		"shipAddress": {
+			"street": "Luisenstr. 48",
+			"city": "Münster",
+			"region": "NULL",
+			"postalCode": 44087,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 3,
+				"discount": 0.1
+			},
+			{
+				"productID": 52,
+				"unitPrice": 5.6,
+				"quantity": 15,
+				"discount": 0.1
+			},
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 12,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10440,
+		"customerID": "SAVEA",
+		"employeeID": 4,
+		"orderDate": "1997-02-10 00:00:00.000",
+		"requiredDate": "1997-03-10 00:00:00.000",
+		"shippedDate": "1997-02-28 00:00:00.000",
+		"shipVia": 2,
+		"freight": 86.53,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 45,
+				"discount": 0.15
+			},
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 49,
+				"discount": 0.15
+			},
+			{
+				"productID": 29,
+				"unitPrice": 99,
+				"quantity": 24,
+				"discount": 0.15
+			},
+			{
+				"productID": 61,
+				"unitPrice": 22.8,
+				"quantity": 90,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10439,
+		"customerID": "MEREP",
+		"employeeID": 6,
+		"orderDate": "1997-02-07 00:00:00.000",
+		"requiredDate": "1997-03-07 00:00:00.000",
+		"shippedDate": "1997-02-10 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.07,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 12,
+				"unitPrice": 30.4,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 16,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 26.6,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 74,
+				"unitPrice": 8,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10448,
+		"customerID": "RANCH",
+		"employeeID": 4,
+		"orderDate": "1997-02-17 00:00:00.000",
+		"requiredDate": "1997-03-17 00:00:00.000",
+		"shippedDate": "1997-02-24 00:00:00.000",
+		"shipVia": 2,
+		"freight": 38.82,
+		"shipName": "Rancho grande",
+		"shipAddress": {
+			"street": "Av. del Libertador 900",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10438,
+		"customerID": "TOMSP",
+		"employeeID": 3,
+		"orderDate": "1997-02-06 00:00:00.000",
+		"requiredDate": "1997-03-06 00:00:00.000",
+		"shippedDate": "1997-02-14 00:00:00.000",
+		"shipVia": 2,
+		"freight": 8.24,
+		"shipName": "Toms Spezialitäten",
+		"shipAddress": {
+			"street": "Luisenstr. 48",
+			"city": "Münster",
+			"region": "NULL",
+			"postalCode": 44087,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 15,
+				"discount": 0.2
+			},
+			{
+				"productID": 34,
+				"unitPrice": 11.2,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 57,
+				"unitPrice": 15.6,
+				"quantity": 15,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10447,
+		"customerID": "RICAR",
+		"employeeID": 4,
+		"orderDate": "1997-02-14 00:00:00.000",
+		"requiredDate": "1997-03-14 00:00:00.000",
+		"shippedDate": "1997-03-07 00:00:00.000",
+		"shipVia": 2,
+		"freight": 68.66,
+		"shipName": "Ricardo Adocicados",
+		"shipAddress": {
+			"street": "Av. Copacabana 267",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-890",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 2,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10452,
+		"customerID": "SAVEA",
+		"employeeID": 8,
+		"orderDate": "1997-02-20 00:00:00.000",
+		"requiredDate": "1997-03-20 00:00:00.000",
+		"shippedDate": "1997-02-26 00:00:00.000",
+		"shipVia": 1,
+		"freight": 140.26,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 44,
+				"unitPrice": 15.5,
+				"quantity": 100,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10453,
+		"customerID": "AROUT",
+		"employeeID": 1,
+		"orderDate": "1997-02-21 00:00:00.000",
+		"requiredDate": "1997-03-21 00:00:00.000",
+		"shippedDate": "1997-02-26 00:00:00.000",
+		"shipVia": 2,
+		"freight": 25.36,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 48,
+				"unitPrice": 10.2,
+				"quantity": 15,
+				"discount": 0.1
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 25,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10454,
+		"customerID": "LAMAI",
+		"employeeID": 4,
+		"orderDate": "1997-02-21 00:00:00.000",
+		"requiredDate": "1997-03-21 00:00:00.000",
+		"shippedDate": "1997-02-25 00:00:00.000",
+		"shipVia": 3,
+		"freight": 2.74,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 46,
+				"unitPrice": 9.6,
+				"quantity": 10,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10455,
+		"customerID": "WARTH",
+		"employeeID": 8,
+		"orderDate": "1997-02-24 00:00:00.000",
+		"requiredDate": "1997-04-07 00:00:00.000",
+		"shippedDate": "1997-03-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 180.45,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 61,
+				"unitPrice": 22.8,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10456,
+		"customerID": "KOENE",
+		"employeeID": 8,
+		"orderDate": "1997-02-25 00:00:00.000",
+		"requiredDate": "1997-04-08 00:00:00.000",
+		"shippedDate": "1997-02-28 00:00:00.000",
+		"shipVia": 2,
+		"freight": 8.12,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 40,
+				"discount": 0.15
+			},
+			{
+				"productID": 49,
+				"unitPrice": 16,
+				"quantity": 21,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10450,
+		"customerID": "VICTE",
+		"employeeID": 8,
+		"orderDate": "1997-02-19 00:00:00.000",
+		"requiredDate": "1997-03-19 00:00:00.000",
+		"shippedDate": "1997-03-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 7.23,
+		"shipName": "Victuailles en stock",
+		"shipAddress": {
+			"street": "2 rue du Commerce",
+			"city": "Lyon",
+			"region": "NULL",
+			"postalCode": 69004,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 24.8,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 6,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10451,
+		"customerID": "QUICK",
+		"employeeID": 4,
+		"orderDate": "1997-02-19 00:00:00.000",
+		"requiredDate": "1997-03-05 00:00:00.000",
+		"shippedDate": "1997-03-12 00:00:00.000",
+		"shipVia": 3,
+		"freight": 189.09,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 120,
+				"discount": 0.1
+			},
+			{
+				"productID": 64,
+				"unitPrice": 26.6,
+				"quantity": 35,
+				"discount": 0.1
+			},
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 28,
+				"discount": 0.1
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 55,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10449,
+		"customerID": "BLONP",
+		"employeeID": 3,
+		"orderDate": "1997-02-18 00:00:00.000",
+		"requiredDate": "1997-03-18 00:00:00.000",
+		"shippedDate": "1997-02-27 00:00:00.000",
+		"shipVia": 2,
+		"freight": 53.3,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 24.8,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 5.6,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 39.4,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10461,
+		"customerID": "LILAS",
+		"employeeID": 1,
+		"orderDate": "1997-02-28 00:00:00.000",
+		"requiredDate": "1997-03-28 00:00:00.000",
+		"shippedDate": "1997-03-05 00:00:00.000",
+		"shipVia": 3,
+		"freight": 148.61,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 40,
+				"discount": 0.25
+			},
+			{
+				"productID": 30,
+				"unitPrice": 20.7,
+				"quantity": 28,
+				"discount": 0.25
+			},
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 60,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10462,
+		"customerID": "CONSH",
+		"employeeID": 2,
+		"orderDate": "1997-03-03 00:00:00.000",
+		"requiredDate": "1997-03-31 00:00:00.000",
+		"shippedDate": "1997-03-18 00:00:00.000",
+		"shipVia": 1,
+		"freight": 6.17,
+		"shipName": "Consolidated Holdings",
+		"shipAddress": {
+			"street": "Berkeley Gardens 12  Brewery",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "WX1 6LT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 4.8,
+				"quantity": 1,
+				"discount": 0
+			},
+			{
+				"productID": 23,
+				"unitPrice": 7.2,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10463,
+		"customerID": "SUPRD",
+		"employeeID": 5,
+		"orderDate": "1997-03-04 00:00:00.000",
+		"requiredDate": "1997-04-01 00:00:00.000",
+		"shippedDate": "1997-03-06 00:00:00.000",
+		"shipVia": 3,
+		"freight": 14.78,
+		"shipName": "Suprêmes délices",
+		"shipAddress": {
+			"street": "Boulevard Tirou 255",
+			"city": "Charleroi",
+			"region": "NULL",
+			"postalCode": "B-6000",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 42,
+				"unitPrice": 11.2,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10464,
+		"customerID": "FURIB",
+		"employeeID": 4,
+		"orderDate": "1997-03-04 00:00:00.000",
+		"requiredDate": "1997-04-01 00:00:00.000",
+		"shippedDate": "1997-03-14 00:00:00.000",
+		"shipVia": 2,
+		"freight": 89,
+		"shipName": "Furia Bacalhau e Frutos do Mar",
+		"shipAddress": {
+			"street": "Jardim das rosas n. 32",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1675,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 17.6,
+				"quantity": 16,
+				"discount": 0.2
+			},
+			{
+				"productID": 43,
+				"unitPrice": 36.8,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 30,
+				"discount": 0.2
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10465,
+		"customerID": "VAFFE",
+		"employeeID": 1,
+		"orderDate": "1997-03-05 00:00:00.000",
+		"requiredDate": "1997-04-02 00:00:00.000",
+		"shippedDate": "1997-03-14 00:00:00.000",
+		"shipVia": 3,
+		"freight": 145.04,
+		"shipName": "Vaffeljernet",
+		"shipAddress": {
+			"street": "Smagsloget 45",
+			"city": "Århus",
+			"region": "NULL",
+			"postalCode": 8200,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 29,
+				"unitPrice": 99,
+				"quantity": 18,
+				"discount": 0.1
+			},
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 45,
+				"unitPrice": 7.6,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 50,
+				"unitPrice": 13,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10466,
+		"customerID": "COMMI",
+		"employeeID": 4,
+		"orderDate": "1997-03-06 00:00:00.000",
+		"requiredDate": "1997-04-03 00:00:00.000",
+		"shippedDate": "1997-03-13 00:00:00.000",
+		"shipVia": 1,
+		"freight": 11.93,
+		"shipName": "Comércio Mineiro",
+		"shipAddress": {
+			"street": "Av. dos Lusíadas 23",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05432-043",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 46,
+				"unitPrice": 9.6,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10460,
+		"customerID": "FOLKO",
+		"employeeID": 8,
+		"orderDate": "1997-02-28 00:00:00.000",
+		"requiredDate": "1997-03-28 00:00:00.000",
+		"shippedDate": "1997-03-03 00:00:00.000",
+		"shipVia": 1,
+		"freight": 16.27,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 21,
+				"discount": 0.25
+			},
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 4,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10459,
+		"customerID": "VICTE",
+		"employeeID": 4,
+		"orderDate": "1997-02-27 00:00:00.000",
+		"requiredDate": "1997-03-27 00:00:00.000",
+		"shippedDate": "1997-02-28 00:00:00.000",
+		"shipVia": 2,
+		"freight": 25.09,
+		"shipName": "Victuailles en stock",
+		"shipAddress": {
+			"street": "2 rue du Commerce",
+			"city": "Lyon",
+			"region": "NULL",
+			"postalCode": 69004,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 24,
+				"quantity": 16,
+				"discount": 0.05
+			},
+			{
+				"productID": 46,
+				"unitPrice": 9.6,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10468,
+		"customerID": "KOENE",
+		"employeeID": 3,
+		"orderDate": "1997-03-07 00:00:00.000",
+		"requiredDate": "1997-04-04 00:00:00.000",
+		"shippedDate": "1997-03-12 00:00:00.000",
+		"shipVia": 3,
+		"freight": 44.12,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 20.7,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 36.8,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10469,
+		"customerID": "WHITC",
+		"employeeID": 1,
+		"orderDate": "1997-03-10 00:00:00.000",
+		"requiredDate": "1997-04-07 00:00:00.000",
+		"shippedDate": "1997-03-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 60.18,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 40,
+				"discount": 0.15
+			},
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 35,
+				"discount": 0.15
+			},
+			{
+				"productID": 44,
+				"unitPrice": 15.5,
+				"quantity": 2,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10458,
+		"customerID": "SUPRD",
+		"employeeID": 7,
+		"orderDate": "1997-02-26 00:00:00.000",
+		"requiredDate": "1997-03-26 00:00:00.000",
+		"shippedDate": "1997-03-04 00:00:00.000",
+		"shipVia": 3,
+		"freight": 147.06,
+		"shipName": "Suprêmes délices",
+		"shipAddress": {
+			"street": "Boulevard Tirou 255",
+			"city": "Charleroi",
+			"region": "NULL",
+			"postalCode": "B-6000",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 36.8,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10470,
+		"customerID": "BONAP",
+		"employeeID": 4,
+		"orderDate": "1997-03-11 00:00:00.000",
+		"requiredDate": "1997-04-08 00:00:00.000",
+		"shippedDate": "1997-03-14 00:00:00.000",
+		"shipVia": 2,
+		"freight": 64.56,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 50,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 23,
+				"unitPrice": 7.2,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 26.6,
+				"quantity": 8,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10467,
+		"customerID": "MAGAA",
+		"employeeID": 8,
+		"orderDate": "1997-03-06 00:00:00.000",
+		"requiredDate": "1997-04-03 00:00:00.000",
+		"shippedDate": "1997-03-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 4.93,
+		"shipName": "Magazzini Alimentari Riuniti",
+		"shipAddress": {
+			"street": "Via Ludovico il Moro 22",
+			"city": "Bergamo",
+			"region": "NULL",
+			"postalCode": 24100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 28,
+				"discount": 0
+			},
+			{
+				"productID": 25,
+				"unitPrice": 11.2,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10474,
+		"customerID": "PERIC",
+		"employeeID": 5,
+		"orderDate": "1997-03-13 00:00:00.000",
+		"requiredDate": "1997-04-10 00:00:00.000",
+		"shippedDate": "1997-03-21 00:00:00.000",
+		"shipVia": 2,
+		"freight": 83.49,
+		"shipName": "Pericles Comidas clásicas",
+		"shipAddress": {
+			"street": "Calle Dr. Jorge Cash 321",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 36.4,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 14,
+				"unitPrice": 18.6,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10475,
+		"customerID": "SUPRD",
+		"employeeID": 9,
+		"orderDate": "1997-03-14 00:00:00.000",
+		"requiredDate": "1997-04-11 00:00:00.000",
+		"shippedDate": "1997-04-04 00:00:00.000",
+		"shipVia": 1,
+		"freight": 68.52,
+		"shipName": "Suprêmes délices",
+		"shipAddress": {
+			"street": "Boulevard Tirou 255",
+			"city": "Charleroi",
+			"region": "NULL",
+			"postalCode": "B-6000",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 10,
+				"quantity": 35,
+				"discount": 0.15
+			},
+			{
+				"productID": 66,
+				"unitPrice": 13.6,
+				"quantity": 60,
+				"discount": 0.15
+			},
+			{
+				"productID": 76,
+				"unitPrice": 14.4,
+				"quantity": 42,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10476,
+		"customerID": "HILAA",
+		"employeeID": 8,
+		"orderDate": "1997-03-17 00:00:00.000",
+		"requiredDate": "1997-04-14 00:00:00.000",
+		"shippedDate": "1997-03-24 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.41,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 2,
+				"discount": 0.05
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10477,
+		"customerID": "PRINI",
+		"employeeID": 5,
+		"orderDate": "1997-03-17 00:00:00.000",
+		"requiredDate": "1997-04-14 00:00:00.000",
+		"shippedDate": "1997-03-25 00:00:00.000",
+		"shipVia": 2,
+		"freight": 13.02,
+		"shipName": "Princesa Isabel Vinhos",
+		"shipAddress": {
+			"street": "Estrada da saúde n. 58",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1756,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 14.4,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 21,
+				"discount": 0.25
+			},
+			{
+				"productID": 39,
+				"unitPrice": 14.4,
+				"quantity": 20,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10479,
+		"customerID": "RATTC",
+		"employeeID": 3,
+		"orderDate": "1997-03-19 00:00:00.000",
+		"requiredDate": "1997-04-16 00:00:00.000",
+		"shippedDate": "1997-03-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 708.95,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 38,
+				"unitPrice": 210.8,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 26.2,
+				"quantity": 28,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 26.6,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10471,
+		"customerID": "BSBEV",
+		"employeeID": 2,
+		"orderDate": "1997-03-11 00:00:00.000",
+		"requiredDate": "1997-04-08 00:00:00.000",
+		"shippedDate": "1997-03-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 45.59,
+		"shipName": "B's Beverages",
+		"shipAddress": {
+			"street": "Fauntleroy Circus",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "EC2 5NT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 24,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10472,
+		"customerID": "SEVES",
+		"employeeID": 8,
+		"orderDate": "1997-03-12 00:00:00.000",
+		"requiredDate": "1997-04-09 00:00:00.000",
+		"shippedDate": "1997-03-19 00:00:00.000",
+		"shipVia": 1,
+		"freight": 4.2,
+		"shipName": "Seven Seas Imports",
+		"shipAddress": {
+			"street": "90 Wadhurst Rd.",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "OX15 4NB",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 3.6,
+				"quantity": 80,
+				"discount": 0.05
+			},
+			{
+				"productID": 51,
+				"unitPrice": 42.4,
+				"quantity": 18,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10481,
+		"customerID": "RICAR",
+		"employeeID": 8,
+		"orderDate": "1997-03-20 00:00:00.000",
+		"requiredDate": "1997-04-17 00:00:00.000",
+		"shippedDate": "1997-03-25 00:00:00.000",
+		"shipVia": 2,
+		"freight": 64.33,
+		"shipName": "Ricardo Adocicados",
+		"shipAddress": {
+			"street": "Av. Copacabana 267",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-890",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 49,
+				"unitPrice": 16,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 27.2,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10473,
+		"customerID": "ISLAT",
+		"employeeID": 1,
+		"orderDate": "1997-03-13 00:00:00.000",
+		"requiredDate": "1997-03-27 00:00:00.000",
+		"shippedDate": "1997-03-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 16.37,
+		"shipName": "Island Trading",
+		"shipAddress": {
+			"street": "Garden House Crowther Way",
+			"city": "Cowes",
+			"region": "Isle of Wight",
+			"postalCode": "PO31 7PJ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 33,
+				"unitPrice": 2,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 17.2,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10484,
+		"customerID": "BSBEV",
+		"employeeID": 3,
+		"orderDate": "1997-03-24 00:00:00.000",
+		"requiredDate": "1997-04-21 00:00:00.000",
+		"shippedDate": "1997-04-01 00:00:00.000",
+		"shipVia": 3,
+		"freight": 6.88,
+		"shipName": "B's Beverages",
+		"shipAddress": {
+			"street": "Fauntleroy Circus",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "EC2 5NT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 8,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 14.7,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 42.4,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10485,
+		"customerID": "LINOD",
+		"employeeID": 4,
+		"orderDate": "1997-03-25 00:00:00.000",
+		"requiredDate": "1997-04-08 00:00:00.000",
+		"shippedDate": "1997-03-31 00:00:00.000",
+		"shipVia": 2,
+		"freight": 64.45,
+		"shipName": "LINO-Delicateses",
+		"shipAddress": {
+			"street": "Ave. 5 de Mayo Porlamar",
+			"city": "I. de Margarita",
+			"region": "Nueva Esparta",
+			"postalCode": 4980,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 15.2,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 3,
+				"unitPrice": 8,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 55,
+				"unitPrice": 19.2,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 70,
+				"unitPrice": 12,
+				"quantity": 60,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10486,
+		"customerID": "HILAA",
+		"employeeID": 1,
+		"orderDate": "1997-03-26 00:00:00.000",
+		"requiredDate": "1997-04-23 00:00:00.000",
+		"shippedDate": "1997-04-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 30.53,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 42.4,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 74,
+				"unitPrice": 8,
+				"quantity": 16,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10487,
+		"customerID": "QUEEN",
+		"employeeID": 2,
+		"orderDate": "1997-03-26 00:00:00.000",
+		"requiredDate": "1997-04-23 00:00:00.000",
+		"shippedDate": "1997-03-28 00:00:00.000",
+		"shipVia": 2,
+		"freight": 71.07,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 7.3,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 26,
+				"unitPrice": 24.9,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 5.9,
+				"quantity": 24,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10488,
+		"customerID": "FRANK",
+		"employeeID": 8,
+		"orderDate": "1997-03-27 00:00:00.000",
+		"requiredDate": "1997-04-24 00:00:00.000",
+		"shippedDate": "1997-04-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 4.93,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 73,
+				"unitPrice": 12,
+				"quantity": 20,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10489,
+		"customerID": "PICCO",
+		"employeeID": 6,
+		"orderDate": "1997-03-28 00:00:00.000",
+		"requiredDate": "1997-04-25 00:00:00.000",
+		"shippedDate": "1997-04-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 5.29,
+		"shipName": "Piccolo und mehr",
+		"shipAddress": {
+			"street": "Geislweg 14",
+			"city": "Salzburg",
+			"region": "NULL",
+			"postalCode": 5020,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 16.8,
+				"quantity": 15,
+				"discount": 0.25
+			},
+			{
+				"productID": 16,
+				"unitPrice": 13.9,
+				"quantity": 18,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10483,
+		"customerID": "WHITC",
+		"employeeID": 7,
+		"orderDate": "1997-03-24 00:00:00.000",
+		"requiredDate": "1997-04-21 00:00:00.000",
+		"shippedDate": "1997-04-25 00:00:00.000",
+		"shipVia": 2,
+		"freight": 15.28,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 34,
+				"unitPrice": 11.2,
+				"quantity": 35,
+				"discount": 0.05
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 30,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10491,
+		"customerID": "FURIB",
+		"employeeID": 8,
+		"orderDate": "1997-03-31 00:00:00.000",
+		"requiredDate": "1997-04-28 00:00:00.000",
+		"shippedDate": "1997-04-08 00:00:00.000",
+		"shipVia": 3,
+		"freight": 16.96,
+		"shipName": "Furia Bacalhau e Frutos do Mar",
+		"shipAddress": {
+			"street": "Jardim das rosas n. 32",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1675,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 44,
+				"unitPrice": 15.5,
+				"quantity": 15,
+				"discount": 0.15
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 7,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10480,
+		"customerID": "FOLIG",
+		"employeeID": 6,
+		"orderDate": "1997-03-20 00:00:00.000",
+		"requiredDate": "1997-04-17 00:00:00.000",
+		"shippedDate": "1997-03-24 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.35,
+		"shipName": "Folies gourmandes",
+		"shipAddress": {
+			"street": "184 chaussée de Tournai",
+			"city": "Lille",
+			"region": "NULL",
+			"postalCode": 59000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 47,
+				"unitPrice": 7.6,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10490,
+		"customerID": "HILAA",
+		"employeeID": 7,
+		"orderDate": "1997-03-31 00:00:00.000",
+		"requiredDate": "1997-04-28 00:00:00.000",
+		"shippedDate": "1997-04-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 210.19,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 44,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 10,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 6.2,
+				"quantity": 36,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10492,
+		"customerID": "BOTTM",
+		"employeeID": 3,
+		"orderDate": "1997-04-01 00:00:00.000",
+		"requiredDate": "1997-04-29 00:00:00.000",
+		"shippedDate": "1997-04-11 00:00:00.000",
+		"shipVia": 1,
+		"freight": 62.89,
+		"shipName": "Bottom-Dollar Markets",
+		"shipAddress": {
+			"street": "23 Tsawassen Blvd.",
+			"city": "Tsawassen",
+			"region": "BC",
+			"postalCode": "T2F 8M4",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 25,
+				"unitPrice": 11.2,
+				"quantity": 60,
+				"discount": 0.05
+			},
+			{
+				"productID": 42,
+				"unitPrice": 11.2,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10493,
+		"customerID": "LAMAI",
+		"employeeID": 4,
+		"orderDate": "1997-04-02 00:00:00.000",
+		"requiredDate": "1997-04-30 00:00:00.000",
+		"shippedDate": "1997-04-10 00:00:00.000",
+		"shipVia": 3,
+		"freight": 10.64,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 65,
+				"unitPrice": 16.8,
+				"quantity": 15,
+				"discount": 0.1
+			},
+			{
+				"productID": 66,
+				"unitPrice": 13.6,
+				"quantity": 10,
+				"discount": 0.1
+			},
+			{
+				"productID": 69,
+				"unitPrice": 28.8,
+				"quantity": 10,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10498,
+		"customerID": "HILAA",
+		"employeeID": 8,
+		"orderDate": "1997-04-07 00:00:00.000",
+		"requiredDate": "1997-05-05 00:00:00.000",
+		"shippedDate": "1997-04-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 29.75,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10499,
+		"customerID": "LILAS",
+		"employeeID": 4,
+		"orderDate": "1997-04-08 00:00:00.000",
+		"requiredDate": "1997-05-06 00:00:00.000",
+		"shippedDate": "1997-04-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 102.02,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 20,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10500,
+		"customerID": "LAMAI",
+		"employeeID": 6,
+		"orderDate": "1997-04-09 00:00:00.000",
+		"requiredDate": "1997-05-07 00:00:00.000",
+		"shippedDate": "1997-04-17 00:00:00.000",
+		"shipVia": 1,
+		"freight": 42.68,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 15,
+				"unitPrice": 15.5,
+				"quantity": 12,
+				"discount": 0.05
+			},
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 8,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10502,
+		"customerID": "PERIC",
+		"employeeID": 2,
+		"orderDate": "1997-04-10 00:00:00.000",
+		"requiredDate": "1997-05-08 00:00:00.000",
+		"shippedDate": "1997-04-29 00:00:00.000",
+		"shipVia": 1,
+		"freight": 69.32,
+		"shipName": "Pericles Comidas clásicas",
+		"shipAddress": {
+			"street": "Calle Dr. Jorge Cash 321",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 45,
+				"unitPrice": 9.5,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 67,
+				"unitPrice": 14,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10503,
+		"customerID": "HUNGO",
+		"employeeID": 6,
+		"orderDate": "1997-04-11 00:00:00.000",
+		"requiredDate": "1997-05-09 00:00:00.000",
+		"shippedDate": "1997-04-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 16.74,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 70,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10497,
+		"customerID": "LEHMS",
+		"employeeID": 7,
+		"orderDate": "1997-04-04 00:00:00.000",
+		"requiredDate": "1997-05-02 00:00:00.000",
+		"shippedDate": "1997-04-07 00:00:00.000",
+		"shipVia": 1,
+		"freight": 36.21,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 30.4,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 27.8,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10495,
+		"customerID": "LAUGB",
+		"employeeID": 3,
+		"orderDate": "1997-04-03 00:00:00.000",
+		"requiredDate": "1997-05-01 00:00:00.000",
+		"shippedDate": "1997-04-11 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.65,
+		"shipName": "Laughing Bacchus Wine Cellars",
+		"shipAddress": {
+			"street": "2319 Elm St.",
+			"city": "Vancouver",
+			"region": "BC",
+			"postalCode": "V3F 2K1",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 23,
+				"unitPrice": 7.2,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 10.4,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 7.7,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10504,
+		"customerID": "WHITC",
+		"employeeID": 4,
+		"orderDate": "1997-04-11 00:00:00.000",
+		"requiredDate": "1997-05-09 00:00:00.000",
+		"shippedDate": "1997-04-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 59.13,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10508,
+		"customerID": "OTTIK",
+		"employeeID": 1,
+		"orderDate": "1997-04-16 00:00:00.000",
+		"requiredDate": "1997-05-14 00:00:00.000",
+		"shippedDate": "1997-05-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 4.99,
+		"shipName": "Ottilies Käseladen",
+		"shipAddress": {
+			"street": "Mehrheimerstr. 369",
+			"city": "Köln",
+			"region": "NULL",
+			"postalCode": 50739,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10510,
+		"customerID": "SAVEA",
+		"employeeID": 6,
+		"orderDate": "1997-04-18 00:00:00.000",
+		"requiredDate": "1997-05-16 00:00:00.000",
+		"shippedDate": "1997-04-28 00:00:00.000",
+		"shipVia": 3,
+		"freight": 367.63,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 36,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 36,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10511,
+		"customerID": "BONAP",
+		"employeeID": 4,
+		"orderDate": "1997-04-18 00:00:00.000",
+		"requiredDate": "1997-05-16 00:00:00.000",
+		"shippedDate": "1997-04-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 350.64,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 50,
+				"discount": 0.15
+			},
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 50,
+				"discount": 0.15
+			},
+			{
+				"productID": 8,
+				"unitPrice": 40,
+				"quantity": 10,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10512,
+		"customerID": "FAMIA",
+		"employeeID": 7,
+		"orderDate": "1997-04-21 00:00:00.000",
+		"requiredDate": "1997-05-19 00:00:00.000",
+		"shippedDate": "1997-04-24 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.53,
+		"shipName": "Familia Arquibaldo",
+		"shipAddress": {
+			"street": "Rua Orós 92",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05442-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 10,
+				"discount": 0.15
+			},
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 9,
+				"discount": 0.15
+			},
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 6,
+				"discount": 0.15
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 12,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10513,
+		"customerID": "WANDK",
+		"employeeID": 7,
+		"orderDate": "1997-04-22 00:00:00.000",
+		"requiredDate": "1997-06-03 00:00:00.000",
+		"shippedDate": "1997-04-28 00:00:00.000",
+		"shipVia": 1,
+		"freight": 105.65,
+		"shipName": "Die Wandernde Kuh",
+		"shipAddress": {
+			"street": "Adenauerallee 900",
+			"city": "Stuttgart",
+			"region": "NULL",
+			"postalCode": 70563,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 40,
+				"discount": 0.2
+			},
+			{
+				"productID": 32,
+				"unitPrice": 32,
+				"quantity": 50,
+				"discount": 0.2
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 15,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10506,
+		"customerID": "KOENE",
+		"employeeID": 9,
+		"orderDate": "1997-04-15 00:00:00.000",
+		"requiredDate": "1997-05-13 00:00:00.000",
+		"shippedDate": "1997-05-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 21.19,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 18,
+				"discount": 0.1
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 14,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10515,
+		"customerID": "QUICK",
+		"employeeID": 2,
+		"orderDate": "1997-04-23 00:00:00.000",
+		"requiredDate": "1997-05-07 00:00:00.000",
+		"shippedDate": "1997-05-23 00:00:00.000",
+		"shipVia": 1,
+		"freight": 204.47,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 9,
+				"unitPrice": 97,
+				"quantity": 16,
+				"discount": 0.15
+			},
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 27,
+				"unitPrice": 43.9,
+				"quantity": 120,
+				"discount": 0
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 16,
+				"discount": 0.15
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 84,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10516,
+		"customerID": "HUNGO",
+		"employeeID": 2,
+		"orderDate": "1997-04-24 00:00:00.000",
+		"requiredDate": "1997-05-22 00:00:00.000",
+		"shippedDate": "1997-05-01 00:00:00.000",
+		"shipVia": 3,
+		"freight": 62.78,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 25,
+				"discount": 0.1
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 80,
+				"discount": 0.1
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10507,
+		"customerID": "ANTON",
+		"employeeID": 7,
+		"orderDate": "1997-04-15 00:00:00.000",
+		"requiredDate": "1997-05-13 00:00:00.000",
+		"shippedDate": "1997-04-22 00:00:00.000",
+		"shipVia": 1,
+		"freight": 47.45,
+		"shipName": "Antonio Moreno Taquería",
+		"shipAddress": {
+			"street": "Mataderos  2312",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5023,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 15,
+				"discount": 0.15
+			},
+			{
+				"productID": 48,
+				"unitPrice": 12.75,
+				"quantity": 15,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10514,
+		"customerID": "ERNSH",
+		"employeeID": 3,
+		"orderDate": "1997-04-22 00:00:00.000",
+		"requiredDate": "1997-05-20 00:00:00.000",
+		"shippedDate": "1997-05-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 789.95,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 39,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 20,
+				"unitPrice": 81,
+				"quantity": 39,
+				"discount": 0
+			},
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 70,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10517,
+		"customerID": "NORTS",
+		"employeeID": 3,
+		"orderDate": "1997-04-24 00:00:00.000",
+		"requiredDate": "1997-05-22 00:00:00.000",
+		"shippedDate": "1997-04-29 00:00:00.000",
+		"shipVia": 3,
+		"freight": 32.07,
+		"shipName": "North/South",
+		"shipAddress": {
+			"street": "South House 300 Queensbridge",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "SW7 1RZ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10518,
+		"customerID": "TORTU",
+		"employeeID": 4,
+		"orderDate": "1997-04-25 00:00:00.000",
+		"requiredDate": "1997-05-09 00:00:00.000",
+		"shippedDate": "1997-05-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 218.15,
+		"shipName": "Tortuga Restaurante",
+		"shipAddress": {
+			"street": "Avda. Azteca 123",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10519,
+		"customerID": "CHOPS",
+		"employeeID": 6,
+		"orderDate": "1997-04-28 00:00:00.000",
+		"requiredDate": "1997-05-26 00:00:00.000",
+		"shippedDate": "1997-05-01 00:00:00.000",
+		"shipVia": 3,
+		"freight": 91.76,
+		"shipName": "Chop-suey Chinese",
+		"shipAddress": {
+			"street": "Hauptstr. 31",
+			"city": "Bern",
+			"region": "NULL",
+			"postalCode": 3012,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 16,
+				"discount": 0.05
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 10,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10520,
+		"customerID": "SANTG",
+		"employeeID": 7,
+		"orderDate": "1997-04-29 00:00:00.000",
+		"requiredDate": "1997-05-27 00:00:00.000",
+		"shippedDate": "1997-05-01 00:00:00.000",
+		"shipVia": 1,
+		"freight": 13.37,
+		"shipName": "Santé Gourmet",
+		"shipAddress": {
+			"street": "Erling Skakkes gate 78",
+			"city": "Stavern",
+			"region": "NULL",
+			"postalCode": 4110,
+			"country": "Norway"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10521,
+		"customerID": "CACTU",
+		"employeeID": 8,
+		"orderDate": "1997-04-29 00:00:00.000",
+		"requiredDate": "1997-05-27 00:00:00.000",
+		"shippedDate": "1997-05-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 17.22,
+		"shipName": "Cactus Comidas para llevar",
+		"shipAddress": {
+			"street": "Cerrito 333",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10522,
+		"customerID": "LEHMS",
+		"employeeID": 4,
+		"orderDate": "1997-04-30 00:00:00.000",
+		"requiredDate": "1997-05-28 00:00:00.000",
+		"shippedDate": "1997-05-06 00:00:00.000",
+		"shipVia": 1,
+		"freight": 45.33,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 25,
+				"discount": 0.2
+			},
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 40,
+				"discount": 0.2
+			},
+			{
+				"productID": 8,
+				"unitPrice": 40,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10523,
+		"customerID": "SEVES",
+		"employeeID": 7,
+		"orderDate": "1997-05-01 00:00:00.000",
+		"requiredDate": "1997-05-29 00:00:00.000",
+		"shippedDate": "1997-05-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 77.63,
+		"shipName": "Seven Seas Imports",
+		"shipAddress": {
+			"street": "90 Wadhurst Rd.",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "OX15 4NB",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 25,
+				"discount": 0.1
+			},
+			{
+				"productID": 20,
+				"unitPrice": 81,
+				"quantity": 15,
+				"discount": 0.1
+			},
+			{
+				"productID": 37,
+				"unitPrice": 26,
+				"quantity": 18,
+				"discount": 0.1
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 6,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10524,
+		"customerID": "BERGS",
+		"employeeID": 1,
+		"orderDate": "1997-05-01 00:00:00.000",
+		"requiredDate": "1997-05-29 00:00:00.000",
+		"shippedDate": "1997-05-07 00:00:00.000",
+		"shipVia": 2,
+		"freight": 244.79,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10525,
+		"customerID": "BONAP",
+		"employeeID": 1,
+		"orderDate": "1997-05-02 00:00:00.000",
+		"requiredDate": "1997-05-30 00:00:00.000",
+		"shippedDate": "1997-05-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 11.06,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 15,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10526,
+		"customerID": "WARTH",
+		"employeeID": 4,
+		"orderDate": "1997-05-05 00:00:00.000",
+		"requiredDate": "1997-06-02 00:00:00.000",
+		"shippedDate": "1997-05-15 00:00:00.000",
+		"shipVia": 2,
+		"freight": 58.59,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 8,
+				"discount": 0.15
+			},
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 30,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10527,
+		"customerID": "QUICK",
+		"employeeID": 7,
+		"orderDate": "1997-05-05 00:00:00.000",
+		"requiredDate": "1997-06-02 00:00:00.000",
+		"shippedDate": "1997-05-07 00:00:00.000",
+		"shipVia": 1,
+		"freight": 41.9,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 50,
+				"discount": 0.1
+			},
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 30,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10528,
+		"customerID": "GREAL",
+		"employeeID": 6,
+		"orderDate": "1997-05-06 00:00:00.000",
+		"requiredDate": "1997-05-20 00:00:00.000",
+		"shippedDate": "1997-05-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.35,
+		"shipName": "Great Lakes Food Market",
+		"shipAddress": {
+			"street": "2732 Baker Blvd.",
+			"city": "Eugene",
+			"region": "OR",
+			"postalCode": 97403,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 8,
+				"discount": 0.2
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10529,
+		"customerID": "MAISD",
+		"employeeID": 5,
+		"orderDate": "1997-05-07 00:00:00.000",
+		"requiredDate": "1997-06-04 00:00:00.000",
+		"shippedDate": "1997-05-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 66.69,
+		"shipName": "Maison Dewey",
+		"shipAddress": {
+			"street": "Rue Joseph-Bens 532",
+			"city": "Bruxelles",
+			"region": "NULL",
+			"postalCode": "B-1180",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10530,
+		"customerID": "PICCO",
+		"employeeID": 3,
+		"orderDate": "1997-05-08 00:00:00.000",
+		"requiredDate": "1997-06-05 00:00:00.000",
+		"shippedDate": "1997-05-12 00:00:00.000",
+		"shipVia": 2,
+		"freight": 339.22,
+		"shipName": "Piccolo und mehr",
+		"shipAddress": {
+			"street": "Geislweg 14",
+			"city": "Salzburg",
+			"region": "NULL",
+			"postalCode": 5020,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10531,
+		"customerID": "OCEAN",
+		"employeeID": 7,
+		"orderDate": "1997-05-08 00:00:00.000",
+		"requiredDate": "1997-06-05 00:00:00.000",
+		"shippedDate": "1997-05-19 00:00:00.000",
+		"shipVia": 1,
+		"freight": 8.12,
+		"shipName": "Océano Atlántico Ltda.",
+		"shipAddress": {
+			"street": "Ing. Gustavo Moncada 8585 Piso 20-A",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 2,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10532,
+		"customerID": "EASTC",
+		"employeeID": 7,
+		"orderDate": "1997-05-09 00:00:00.000",
+		"requiredDate": "1997-06-06 00:00:00.000",
+		"shippedDate": "1997-05-12 00:00:00.000",
+		"shipVia": 3,
+		"freight": 74.46,
+		"shipName": "Eastern Connection",
+		"shipAddress": {
+			"street": "35 King George",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "WX3 6FW",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 66,
+				"unitPrice": 17,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10536,
+		"customerID": "LEHMS",
+		"employeeID": 3,
+		"orderDate": "1997-05-14 00:00:00.000",
+		"requiredDate": "1997-06-11 00:00:00.000",
+		"shippedDate": "1997-06-06 00:00:00.000",
+		"shipVia": 2,
+		"freight": 58.88,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 12,
+				"unitPrice": 38,
+				"quantity": 15,
+				"discount": 0.25
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 35,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10537,
+		"customerID": "RICSU",
+		"employeeID": 1,
+		"orderDate": "1997-05-14 00:00:00.000",
+		"requiredDate": "1997-05-28 00:00:00.000",
+		"shippedDate": "1997-05-19 00:00:00.000",
+		"shipVia": 1,
+		"freight": 78.85,
+		"shipName": "Richter Supermarkt",
+		"shipAddress": {
+			"street": "Starenweg 5",
+			"city": "Genève",
+			"region": "NULL",
+			"postalCode": 1204,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 73,
+				"unitPrice": 15,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10538,
+		"customerID": "BSBEV",
+		"employeeID": 9,
+		"orderDate": "1997-05-15 00:00:00.000",
+		"requiredDate": "1997-06-12 00:00:00.000",
+		"shippedDate": "1997-05-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.87,
+		"shipName": "B's Beverages",
+		"shipAddress": {
+			"street": "Fauntleroy Circus",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "EC2 5NT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 7,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 1,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10539,
+		"customerID": "BSBEV",
+		"employeeID": 6,
+		"orderDate": "1997-05-16 00:00:00.000",
+		"requiredDate": "1997-06-13 00:00:00.000",
+		"shippedDate": "1997-05-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 12.36,
+		"shipName": "B's Beverages",
+		"shipAddress": {
+			"street": "Fauntleroy Circus",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "EC2 5NT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 20,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10540,
+		"customerID": "QUICK",
+		"employeeID": 3,
+		"orderDate": "1997-05-19 00:00:00.000",
+		"requiredDate": "1997-06-16 00:00:00.000",
+		"shippedDate": "1997-06-13 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1007.64,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 3,
+				"unitPrice": 10,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10541,
+		"customerID": "HANAR",
+		"employeeID": 2,
+		"orderDate": "1997-05-19 00:00:00.000",
+		"requiredDate": "1997-06-16 00:00:00.000",
+		"shippedDate": "1997-05-29 00:00:00.000",
+		"shipVia": 1,
+		"freight": 68.65,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 35,
+				"discount": 0.1
+			},
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 4,
+				"discount": 0.1
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 36,
+				"discount": 0.1
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 9,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10534,
+		"customerID": "LEHMS",
+		"employeeID": 8,
+		"orderDate": "1997-05-12 00:00:00.000",
+		"requiredDate": "1997-06-09 00:00:00.000",
+		"shippedDate": "1997-05-14 00:00:00.000",
+		"shipVia": 2,
+		"freight": 27.94,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 10,
+				"discount": 0.2
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 10,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10533,
+		"customerID": "FOLKO",
+		"employeeID": 8,
+		"orderDate": "1997-05-12 00:00:00.000",
+		"requiredDate": "1997-06-09 00:00:00.000",
+		"shippedDate": "1997-05-22 00:00:00.000",
+		"shipVia": 1,
+		"freight": 188.04,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 50,
+				"discount": 0.05
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 73,
+				"unitPrice": 15,
+				"quantity": 24,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10535,
+		"customerID": "ANTON",
+		"employeeID": 4,
+		"orderDate": "1997-05-13 00:00:00.000",
+		"requiredDate": "1997-06-10 00:00:00.000",
+		"shippedDate": "1997-05-21 00:00:00.000",
+		"shipVia": 1,
+		"freight": 15.64,
+		"shipName": "Antonio Moreno Taquería",
+		"shipAddress": {
+			"street": "Mataderos  2312",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5023,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 50,
+				"discount": 0.1
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 10,
+				"discount": 0.1
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 5,
+				"discount": 0.1
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 15,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10543,
+		"customerID": "LILAS",
+		"employeeID": 8,
+		"orderDate": "1997-05-21 00:00:00.000",
+		"requiredDate": "1997-06-18 00:00:00.000",
+		"shippedDate": "1997-05-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 48.17,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 12,
+				"unitPrice": 38,
+				"quantity": 30,
+				"discount": 0.15
+			},
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 70,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10542,
+		"customerID": "KOENE",
+		"employeeID": 1,
+		"orderDate": "1997-05-20 00:00:00.000",
+		"requiredDate": "1997-06-17 00:00:00.000",
+		"shippedDate": "1997-05-26 00:00:00.000",
+		"shipVia": 3,
+		"freight": 10.95,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 15,
+				"discount": 0.05
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 24,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10546,
+		"customerID": "VICTE",
+		"employeeID": 1,
+		"orderDate": "1997-05-23 00:00:00.000",
+		"requiredDate": "1997-06-20 00:00:00.000",
+		"shippedDate": "1997-05-27 00:00:00.000",
+		"shipVia": 3,
+		"freight": 194.72,
+		"shipName": "Victuailles en stock",
+		"shipAddress": {
+			"street": "2 rue du Commerce",
+			"city": "Lyon",
+			"region": "NULL",
+			"postalCode": 69004,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10547,
+		"customerID": "SEVES",
+		"employeeID": 3,
+		"orderDate": "1997-05-23 00:00:00.000",
+		"requiredDate": "1997-06-20 00:00:00.000",
+		"shippedDate": "1997-06-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 178.43,
+		"shipName": "Seven Seas Imports",
+		"shipAddress": {
+			"street": "90 Wadhurst Rd.",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "OX15 4NB",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 32,
+				"unitPrice": 32,
+				"quantity": 24,
+				"discount": 0.15
+			},
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 60,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10548,
+		"customerID": "TOMSP",
+		"employeeID": 3,
+		"orderDate": "1997-05-26 00:00:00.000",
+		"requiredDate": "1997-06-23 00:00:00.000",
+		"shippedDate": "1997-06-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.43,
+		"shipName": "Toms Spezialitäten",
+		"shipAddress": {
+			"street": "Luisenstr. 48",
+			"city": "Münster",
+			"region": "NULL",
+			"postalCode": 44087,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 34,
+				"unitPrice": 14,
+				"quantity": 10,
+				"discount": 0.25
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 14,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10550,
+		"customerID": "GODOS",
+		"employeeID": 7,
+		"orderDate": "1997-05-28 00:00:00.000",
+		"requiredDate": "1997-06-25 00:00:00.000",
+		"shippedDate": "1997-06-06 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.32,
+		"shipName": "Godos Cocina Típica",
+		"shipAddress": {
+			"street": "C/ Romero 33",
+			"city": "Sevilla",
+			"region": "NULL",
+			"postalCode": 41101,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 8,
+				"discount": 0.1
+			},
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 6,
+				"discount": 0.1
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 10,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10544,
+		"customerID": "LONEP",
+		"employeeID": 4,
+		"orderDate": "1997-05-21 00:00:00.000",
+		"requiredDate": "1997-06-18 00:00:00.000",
+		"shippedDate": "1997-05-30 00:00:00.000",
+		"shipVia": 1,
+		"freight": 24.91,
+		"shipName": "Lonesome Pine Restaurant",
+		"shipAddress": {
+			"street": "89 Chiaroscuro Rd.",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97219,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 7,
+				"discount": 0
+			},
+			{
+				"productID": 67,
+				"unitPrice": 14,
+				"quantity": 7,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10553,
+		"customerID": "WARTH",
+		"employeeID": 2,
+		"orderDate": "1997-05-30 00:00:00.000",
+		"requiredDate": "1997-06-27 00:00:00.000",
+		"shippedDate": "1997-06-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 149.49,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10554,
+		"customerID": "OTTIK",
+		"employeeID": 4,
+		"orderDate": "1997-05-30 00:00:00.000",
+		"requiredDate": "1997-06-27 00:00:00.000",
+		"shippedDate": "1997-06-05 00:00:00.000",
+		"shipVia": 3,
+		"freight": 120.97,
+		"shipName": "Ottilies Käseladen",
+		"shipAddress": {
+			"street": "Mehrheimerstr. 369",
+			"city": "Köln",
+			"region": "NULL",
+			"postalCode": 50739,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 30,
+				"discount": 0.05
+			},
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 10,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10555,
+		"customerID": "SAVEA",
+		"employeeID": 6,
+		"orderDate": "1997-06-02 00:00:00.000",
+		"requiredDate": "1997-06-30 00:00:00.000",
+		"shippedDate": "1997-06-04 00:00:00.000",
+		"shipVia": 3,
+		"freight": 252.49,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 30,
+				"discount": 0.2
+			},
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 35,
+				"discount": 0.2
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 18,
+				"discount": 0.2
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 40,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10557,
+		"customerID": "LEHMS",
+		"employeeID": 9,
+		"orderDate": "1997-06-03 00:00:00.000",
+		"requiredDate": "1997-06-17 00:00:00.000",
+		"shippedDate": "1997-06-06 00:00:00.000",
+		"shipVia": 2,
+		"freight": 96.72,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10558,
+		"customerID": "AROUT",
+		"employeeID": 1,
+		"orderDate": "1997-06-04 00:00:00.000",
+		"requiredDate": "1997-07-02 00:00:00.000",
+		"shippedDate": "1997-06-10 00:00:00.000",
+		"shipVia": 2,
+		"freight": 72.97,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 73,
+				"unitPrice": 15,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10551,
+		"customerID": "FURIB",
+		"employeeID": 4,
+		"orderDate": "1997-05-28 00:00:00.000",
+		"requiredDate": "1997-07-09 00:00:00.000",
+		"shippedDate": "1997-06-06 00:00:00.000",
+		"shipVia": 3,
+		"freight": 72.95,
+		"shipName": "Furia Bacalhau e Frutos do Mar",
+		"shipAddress": {
+			"street": "Jardim das rosas n. 32",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1675,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 40,
+				"discount": 0.15
+			},
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0.15
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10549,
+		"customerID": "QUICK",
+		"employeeID": 5,
+		"orderDate": "1997-05-27 00:00:00.000",
+		"requiredDate": "1997-06-10 00:00:00.000",
+		"shippedDate": "1997-05-30 00:00:00.000",
+		"shipVia": 1,
+		"freight": 171.24,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 55,
+				"discount": 0.15
+			},
+			{
+				"productID": 45,
+				"unitPrice": 9.5,
+				"quantity": 100,
+				"discount": 0.15
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 48,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10552,
+		"customerID": "HILAA",
+		"employeeID": 2,
+		"orderDate": "1997-05-29 00:00:00.000",
+		"requiredDate": "1997-06-26 00:00:00.000",
+		"shippedDate": "1997-06-05 00:00:00.000",
+		"shipVia": 1,
+		"freight": 83.22,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10562,
+		"customerID": "REGGC",
+		"employeeID": 1,
+		"orderDate": "1997-06-09 00:00:00.000",
+		"requiredDate": "1997-07-07 00:00:00.000",
+		"shippedDate": "1997-06-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 22.95,
+		"shipName": "Reggiani Caseifici",
+		"shipAddress": {
+			"street": "Strada Provinciale 124",
+			"city": "Reggio Emilia",
+			"region": "NULL",
+			"postalCode": 42100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 10,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10563,
+		"customerID": "RICAR",
+		"employeeID": 2,
+		"orderDate": "1997-06-10 00:00:00.000",
+		"requiredDate": "1997-07-22 00:00:00.000",
+		"shippedDate": "1997-06-24 00:00:00.000",
+		"shipVia": 2,
+		"freight": 60.43,
+		"shipName": "Ricardo Adocicados",
+		"shipAddress": {
+			"street": "Av. Copacabana 267",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-890",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 70,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10564,
+		"customerID": "RATTC",
+		"employeeID": 4,
+		"orderDate": "1997-06-10 00:00:00.000",
+		"requiredDate": "1997-07-08 00:00:00.000",
+		"shippedDate": "1997-06-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 13.75,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 16,
+				"discount": 0.05
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 6,
+				"discount": 0.05
+			},
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 25,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10565,
+		"customerID": "MEREP",
+		"employeeID": 8,
+		"orderDate": "1997-06-11 00:00:00.000",
+		"requiredDate": "1997-07-09 00:00:00.000",
+		"shippedDate": "1997-06-18 00:00:00.000",
+		"shipVia": 2,
+		"freight": 7.15,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 25,
+				"discount": 0.1
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 18,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10566,
+		"customerID": "BLONP",
+		"employeeID": 9,
+		"orderDate": "1997-06-12 00:00:00.000",
+		"requiredDate": "1997-07-10 00:00:00.000",
+		"shippedDate": "1997-06-18 00:00:00.000",
+		"shipVia": 1,
+		"freight": 88.4,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 35,
+				"discount": 0.15
+			},
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 18,
+				"discount": 0.15
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10567,
+		"customerID": "HUNGO",
+		"employeeID": 1,
+		"orderDate": "1997-06-12 00:00:00.000",
+		"requiredDate": "1997-07-10 00:00:00.000",
+		"shippedDate": "1997-06-17 00:00:00.000",
+		"shipVia": 1,
+		"freight": 33.97,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 60,
+				"discount": 0.2
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 40,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10559,
+		"customerID": "BLONP",
+		"employeeID": 6,
+		"orderDate": "1997-06-05 00:00:00.000",
+		"requiredDate": "1997-07-03 00:00:00.000",
+		"shippedDate": "1997-06-13 00:00:00.000",
+		"shipVia": 1,
+		"freight": 8.05,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 12,
+				"discount": 0.05
+			},
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 18,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10569,
+		"customerID": "RATTC",
+		"employeeID": 5,
+		"orderDate": "1997-06-16 00:00:00.000",
+		"requiredDate": "1997-07-14 00:00:00.000",
+		"shippedDate": "1997-07-11 00:00:00.000",
+		"shipVia": 1,
+		"freight": 58.98,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 35,
+				"discount": 0.2
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10560,
+		"customerID": "FRANK",
+		"employeeID": 8,
+		"orderDate": "1997-06-06 00:00:00.000",
+		"requiredDate": "1997-07-04 00:00:00.000",
+		"shippedDate": "1997-06-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 36.65,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 15,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10570,
+		"customerID": "MEREP",
+		"employeeID": 3,
+		"orderDate": "1997-06-17 00:00:00.000",
+		"requiredDate": "1997-07-15 00:00:00.000",
+		"shippedDate": "1997-06-19 00:00:00.000",
+		"shipVia": 3,
+		"freight": 188.99,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 15,
+				"discount": 0.05
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 60,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10571,
+		"customerID": "ERNSH",
+		"employeeID": 8,
+		"orderDate": "1997-06-17 00:00:00.000",
+		"requiredDate": "1997-07-29 00:00:00.000",
+		"shippedDate": "1997-07-04 00:00:00.000",
+		"shipVia": 3,
+		"freight": 26.06,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 11,
+				"discount": 0.15
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 28,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10572,
+		"customerID": "BERGS",
+		"employeeID": 3,
+		"orderDate": "1997-06-18 00:00:00.000",
+		"requiredDate": "1997-07-16 00:00:00.000",
+		"shippedDate": "1997-06-25 00:00:00.000",
+		"shipVia": 2,
+		"freight": 116.43,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 12,
+				"discount": 0.1
+			},
+			{
+				"productID": 32,
+				"unitPrice": 32,
+				"quantity": 10,
+				"discount": 0.1
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 15,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10561,
+		"customerID": "FOLKO",
+		"employeeID": 2,
+		"orderDate": "1997-06-06 00:00:00.000",
+		"requiredDate": "1997-07-04 00:00:00.000",
+		"shippedDate": "1997-06-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 242.21,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10573,
+		"customerID": "ANTON",
+		"employeeID": 7,
+		"orderDate": "1997-06-19 00:00:00.000",
+		"requiredDate": "1997-07-17 00:00:00.000",
+		"shippedDate": "1997-06-20 00:00:00.000",
+		"shipVia": 3,
+		"freight": 84.84,
+		"shipName": "Antonio Moreno Taquería",
+		"shipAddress": {
+			"street": "Mataderos  2312",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5023,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 34,
+				"unitPrice": 14,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10574,
+		"customerID": "TRAIH",
+		"employeeID": 4,
+		"orderDate": "1997-06-19 00:00:00.000",
+		"requiredDate": "1997-07-17 00:00:00.000",
+		"shippedDate": "1997-06-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 37.6,
+		"shipName": "Trail's Head Gourmet Provisioners",
+		"shipAddress": {
+			"street": "722 DaVinci Blvd.",
+			"city": "Kirkland",
+			"region": "WA",
+			"postalCode": 98034,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10578,
+		"customerID": "BSBEV",
+		"employeeID": 4,
+		"orderDate": "1997-06-24 00:00:00.000",
+		"requiredDate": "1997-07-22 00:00:00.000",
+		"shippedDate": "1997-07-25 00:00:00.000",
+		"shipVia": 3,
+		"freight": 29.6,
+		"shipName": "B's Beverages",
+		"shipAddress": {
+			"street": "Fauntleroy Circus",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "EC2 5NT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10579,
+		"customerID": "LETSS",
+		"employeeID": 1,
+		"orderDate": "1997-06-25 00:00:00.000",
+		"requiredDate": "1997-07-23 00:00:00.000",
+		"shippedDate": "1997-07-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 13.73,
+		"shipName": "Let's Stop N Shop",
+		"shipAddress": {
+			"street": "87 Polk St. Suite 5",
+			"city": "San Francisco",
+			"region": "CA",
+			"postalCode": 94117,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 15,
+				"unitPrice": 15.5,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10580,
+		"customerID": "OTTIK",
+		"employeeID": 4,
+		"orderDate": "1997-06-26 00:00:00.000",
+		"requiredDate": "1997-07-24 00:00:00.000",
+		"shippedDate": "1997-07-01 00:00:00.000",
+		"shipVia": 3,
+		"freight": 75.89,
+		"shipName": "Ottilies Käseladen",
+		"shipAddress": {
+			"street": "Mehrheimerstr. 369",
+			"city": "Köln",
+			"region": "NULL",
+			"postalCode": 50739,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 15,
+				"discount": 0.05
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 9,
+				"discount": 0.05
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 30,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10582,
+		"customerID": "BLAUS",
+		"employeeID": 3,
+		"orderDate": "1997-06-27 00:00:00.000",
+		"requiredDate": "1997-07-25 00:00:00.000",
+		"shippedDate": "1997-07-14 00:00:00.000",
+		"shipVia": 2,
+		"freight": 27.71,
+		"shipName": "Blauer See Delikatessen",
+		"shipAddress": {
+			"street": "Forsterstr. 57",
+			"city": "Mannheim",
+			"region": "NULL",
+			"postalCode": 68306,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 14,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10583,
+		"customerID": "WARTH",
+		"employeeID": 2,
+		"orderDate": "1997-06-30 00:00:00.000",
+		"requiredDate": "1997-07-28 00:00:00.000",
+		"shippedDate": "1997-07-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 7.28,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 24,
+				"discount": 0.15
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 10,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10577,
+		"customerID": "TRAIH",
+		"employeeID": 9,
+		"orderDate": "1997-06-23 00:00:00.000",
+		"requiredDate": "1997-08-04 00:00:00.000",
+		"shippedDate": "1997-06-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 25.41,
+		"shipName": "Trail's Head Gourmet Provisioners",
+		"shipAddress": {
+			"street": "722 DaVinci Blvd.",
+			"city": "Kirkland",
+			"region": "WA",
+			"postalCode": 98034,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10576,
+		"customerID": "TORTU",
+		"employeeID": 3,
+		"orderDate": "1997-06-23 00:00:00.000",
+		"requiredDate": "1997-07-07 00:00:00.000",
+		"shippedDate": "1997-06-30 00:00:00.000",
+		"shipVia": 3,
+		"freight": 18.56,
+		"shipName": "Tortuga Restaurante",
+		"shipAddress": {
+			"street": "Avda. Azteca 123",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10587,
+		"customerID": "QUEDE",
+		"employeeID": 1,
+		"orderDate": "1997-07-02 00:00:00.000",
+		"requiredDate": "1997-07-30 00:00:00.000",
+		"shippedDate": "1997-07-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 62.52,
+		"shipName": "Que Delícia",
+		"shipAddress": {
+			"street": "Rua da Panificadora 12",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-673",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10588,
+		"customerID": "QUICK",
+		"employeeID": 2,
+		"orderDate": "1997-07-03 00:00:00.000",
+		"requiredDate": "1997-07-31 00:00:00.000",
+		"shippedDate": "1997-07-10 00:00:00.000",
+		"shipVia": 3,
+		"freight": 194.67,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 40,
+				"discount": 0.2
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 100,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10590,
+		"customerID": "MEREP",
+		"employeeID": 4,
+		"orderDate": "1997-07-07 00:00:00.000",
+		"requiredDate": "1997-08-04 00:00:00.000",
+		"shippedDate": "1997-07-14 00:00:00.000",
+		"shipVia": 3,
+		"freight": 44.77,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 60,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10575,
+		"customerID": "MORGK",
+		"employeeID": 5,
+		"orderDate": "1997-06-20 00:00:00.000",
+		"requiredDate": "1997-07-04 00:00:00.000",
+		"shippedDate": "1997-06-30 00:00:00.000",
+		"shipVia": 1,
+		"freight": 127.34,
+		"shipName": "Morgenstern Gesundkost",
+		"shipAddress": {
+			"street": "Heerstr. 22",
+			"city": "Leipzig",
+			"region": "NULL",
+			"postalCode": 4179,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 63,
+				"unitPrice": 43.9,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10591,
+		"customerID": "VAFFE",
+		"employeeID": 1,
+		"orderDate": "1997-07-07 00:00:00.000",
+		"requiredDate": "1997-07-21 00:00:00.000",
+		"shippedDate": "1997-07-16 00:00:00.000",
+		"shipVia": 1,
+		"freight": 55.92,
+		"shipName": "Vaffeljernet",
+		"shipAddress": {
+			"street": "Smagsloget 45",
+			"city": "Århus",
+			"region": "NULL",
+			"postalCode": 8200,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 3,
+				"unitPrice": 10,
+				"quantity": 14,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10595,
+		"customerID": "ERNSH",
+		"employeeID": 2,
+		"orderDate": "1997-07-10 00:00:00.000",
+		"requiredDate": "1997-08-07 00:00:00.000",
+		"shippedDate": "1997-07-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 96.78,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 30,
+				"discount": 0.25
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 65,
+				"discount": 0.25
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 120,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10596,
+		"customerID": "WHITC",
+		"employeeID": 8,
+		"orderDate": "1997-07-11 00:00:00.000",
+		"requiredDate": "1997-08-08 00:00:00.000",
+		"shippedDate": "1997-08-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 16.34,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 5,
+				"discount": 0.2
+			},
+			{
+				"productID": 63,
+				"unitPrice": 43.9,
+				"quantity": 24,
+				"discount": 0.2
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 30,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10597,
+		"customerID": "PICCO",
+		"employeeID": 7,
+		"orderDate": "1997-07-11 00:00:00.000",
+		"requiredDate": "1997-08-08 00:00:00.000",
+		"shippedDate": "1997-07-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 35.12,
+		"shipName": "Piccolo und mehr",
+		"shipAddress": {
+			"street": "Geislweg 14",
+			"city": "Salzburg",
+			"region": "NULL",
+			"postalCode": 5020,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 35,
+				"discount": 0.2
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 12,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10598,
+		"customerID": "RATTC",
+		"employeeID": 1,
+		"orderDate": "1997-07-14 00:00:00.000",
+		"requiredDate": "1997-08-11 00:00:00.000",
+		"shippedDate": "1997-07-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 44.42,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 27,
+				"unitPrice": 43.9,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10600,
+		"customerID": "HUNGC",
+		"employeeID": 4,
+		"orderDate": "1997-07-16 00:00:00.000",
+		"requiredDate": "1997-08-13 00:00:00.000",
+		"shippedDate": "1997-07-21 00:00:00.000",
+		"shipVia": 1,
+		"freight": 45.13,
+		"shipName": "Hungry Coyote Import Store",
+		"shipAddress": {
+			"street": "City Center Plaza 516 Main St.",
+			"city": "Elgin",
+			"region": "OR",
+			"postalCode": 97827,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 73,
+				"unitPrice": 15,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10601,
+		"customerID": "HILAA",
+		"employeeID": 7,
+		"orderDate": "1997-07-16 00:00:00.000",
+		"requiredDate": "1997-08-27 00:00:00.000",
+		"shippedDate": "1997-07-22 00:00:00.000",
+		"shipVia": 1,
+		"freight": 58.3,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10603,
+		"customerID": "SAVEA",
+		"employeeID": 8,
+		"orderDate": "1997-07-18 00:00:00.000",
+		"requiredDate": "1997-08-15 00:00:00.000",
+		"shippedDate": "1997-08-08 00:00:00.000",
+		"shipVia": 2,
+		"freight": 48.77,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 48,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 20,
+				"quantity": 25,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10604,
+		"customerID": "FURIB",
+		"employeeID": 1,
+		"orderDate": "1997-07-18 00:00:00.000",
+		"requiredDate": "1997-08-15 00:00:00.000",
+		"shippedDate": "1997-07-29 00:00:00.000",
+		"shipVia": 1,
+		"freight": 7.46,
+		"shipName": "Furia Bacalhau e Frutos do Mar",
+		"shipAddress": {
+			"street": "Jardim das rosas n. 32",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1675,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 48,
+				"unitPrice": 12.75,
+				"quantity": 6,
+				"discount": 0.1
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10605,
+		"customerID": "MEREP",
+		"employeeID": 1,
+		"orderDate": "1997-07-21 00:00:00.000",
+		"requiredDate": "1997-08-18 00:00:00.000",
+		"shippedDate": "1997-07-29 00:00:00.000",
+		"shipVia": 2,
+		"freight": 379.13,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 30,
+				"discount": 0.05
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 70,
+				"discount": 0.05
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 15,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10606,
+		"customerID": "TRADH",
+		"employeeID": 4,
+		"orderDate": "1997-07-22 00:00:00.000",
+		"requiredDate": "1997-08-19 00:00:00.000",
+		"shippedDate": "1997-07-31 00:00:00.000",
+		"shipVia": 3,
+		"freight": 79.4,
+		"shipName": "Tradiçao Hipermercados",
+		"shipAddress": {
+			"street": "Av. Inês de Castro 414",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05634-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 10,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10594,
+		"customerID": "OLDWO",
+		"employeeID": 3,
+		"orderDate": "1997-07-09 00:00:00.000",
+		"requiredDate": "1997-08-06 00:00:00.000",
+		"shippedDate": "1997-07-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 5.24,
+		"shipName": "Old World Delicatessen",
+		"shipAddress": {
+			"street": "2743 Bering St.",
+			"city": "Anchorage",
+			"region": "AK",
+			"postalCode": 99508,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10593,
+		"customerID": "LEHMS",
+		"employeeID": 7,
+		"orderDate": "1997-07-09 00:00:00.000",
+		"requiredDate": "1997-08-06 00:00:00.000",
+		"shippedDate": "1997-08-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 174.2,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 20,
+				"unitPrice": 81,
+				"quantity": 21,
+				"discount": 0.2
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 4,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10592,
+		"customerID": "LEHMS",
+		"employeeID": 3,
+		"orderDate": "1997-07-08 00:00:00.000",
+		"requiredDate": "1997-08-05 00:00:00.000",
+		"shippedDate": "1997-07-16 00:00:00.000",
+		"shipVia": 1,
+		"freight": 32.1,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 15,
+				"unitPrice": 15.5,
+				"quantity": 25,
+				"discount": 0.05
+			},
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 5,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10607,
+		"customerID": "SAVEA",
+		"employeeID": 5,
+		"orderDate": "1997-07-22 00:00:00.000",
+		"requiredDate": "1997-08-19 00:00:00.000",
+		"shippedDate": "1997-07-25 00:00:00.000",
+		"shipVia": 1,
+		"freight": 200.24,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 45,
+				"discount": 0
+			},
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 100,
+				"discount": 0
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 42,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10609,
+		"customerID": "DUMON",
+		"employeeID": 7,
+		"orderDate": "1997-07-24 00:00:00.000",
+		"requiredDate": "1997-08-21 00:00:00.000",
+		"shippedDate": "1997-07-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.85,
+		"shipName": "Du monde entier",
+		"shipAddress": {
+			"street": "67 rue des Cinquante Otages",
+			"city": "Nantes",
+			"region": "NULL",
+			"postalCode": 44000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10614,
+		"customerID": "BLAUS",
+		"employeeID": 8,
+		"orderDate": "1997-07-29 00:00:00.000",
+		"requiredDate": "1997-08-26 00:00:00.000",
+		"shippedDate": "1997-08-01 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.93,
+		"shipName": "Blauer See Delikatessen",
+		"shipAddress": {
+			"street": "Forsterstr. 57",
+			"city": "Mannheim",
+			"region": "NULL",
+			"postalCode": 68306,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10616,
+		"customerID": "GREAL",
+		"employeeID": 1,
+		"orderDate": "1997-07-31 00:00:00.000",
+		"requiredDate": "1997-08-28 00:00:00.000",
+		"shippedDate": "1997-08-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 116.53,
+		"shipName": "Great Lakes Food Market",
+		"shipAddress": {
+			"street": "2732 Baker Blvd.",
+			"city": "Eugene",
+			"region": "OR",
+			"postalCode": 97403,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 15,
+				"discount": 0.05
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 15,
+				"discount": 0.05
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 15,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10618,
+		"customerID": "MEREP",
+		"employeeID": 1,
+		"orderDate": "1997-08-01 00:00:00.000",
+		"requiredDate": "1997-09-12 00:00:00.000",
+		"shippedDate": "1997-08-08 00:00:00.000",
+		"shipVia": 1,
+		"freight": 154.68,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 6,
+				"unitPrice": 25,
+				"quantity": 70,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10619,
+		"customerID": "MEREP",
+		"employeeID": 3,
+		"orderDate": "1997-08-04 00:00:00.000",
+		"requiredDate": "1997-09-01 00:00:00.000",
+		"shippedDate": "1997-08-07 00:00:00.000",
+		"shipVia": 3,
+		"freight": 91.05,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 42,
+				"discount": 0
+			},
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10612,
+		"customerID": "SAVEA",
+		"employeeID": 1,
+		"orderDate": "1997-07-28 00:00:00.000",
+		"requiredDate": "1997-08-25 00:00:00.000",
+		"shippedDate": "1997-08-01 00:00:00.000",
+		"shipVia": 2,
+		"freight": 544.08,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 70,
+				"discount": 0
+			},
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 55,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 20,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 80,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10613,
+		"customerID": "HILAA",
+		"employeeID": 4,
+		"orderDate": "1997-07-29 00:00:00.000",
+		"requiredDate": "1997-08-26 00:00:00.000",
+		"shippedDate": "1997-08-01 00:00:00.000",
+		"shipVia": 2,
+		"freight": 8.11,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 8,
+				"discount": 0.1
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10611,
+		"customerID": "WOLZA",
+		"employeeID": 6,
+		"orderDate": "1997-07-25 00:00:00.000",
+		"requiredDate": "1997-08-22 00:00:00.000",
+		"shippedDate": "1997-08-01 00:00:00.000",
+		"shipVia": 2,
+		"freight": 80.65,
+		"shipName": "Wolski Zajazd",
+		"shipAddress": {
+			"street": "ul. Filtrowa 68",
+			"city": "Warszawa",
+			"region": "NULL",
+			"postalCode": "01-012",
+			"country": "Poland"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10621,
+		"customerID": "ISLAT",
+		"employeeID": 4,
+		"orderDate": "1997-08-05 00:00:00.000",
+		"requiredDate": "1997-09-02 00:00:00.000",
+		"shippedDate": "1997-08-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 23.73,
+		"shipName": "Island Trading",
+		"shipAddress": {
+			"street": "Garden House Crowther Way",
+			"city": "Cowes",
+			"region": "Isle of Wight",
+			"postalCode": "PO31 7PJ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10620,
+		"customerID": "LAUGB",
+		"employeeID": 2,
+		"orderDate": "1997-08-05 00:00:00.000",
+		"requiredDate": "1997-09-02 00:00:00.000",
+		"shippedDate": "1997-08-14 00:00:00.000",
+		"shipVia": 3,
+		"freight": 0.94,
+		"shipName": "Laughing Bacchus Wine Cellars",
+		"shipAddress": {
+			"street": "2319 Elm St.",
+			"city": "Vancouver",
+			"region": "BC",
+			"postalCode": "V3F 2K1",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10625,
+		"customerID": "ANATR",
+		"employeeID": 3,
+		"orderDate": "1997-08-08 00:00:00.000",
+		"requiredDate": "1997-09-05 00:00:00.000",
+		"shippedDate": "1997-08-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 43.9,
+		"shipName": "Ana Trujillo Emparedados y helados",
+		"shipAddress": {
+			"street": "Avda. de la Constitución 2222",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5021,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10623,
+		"customerID": "FRANK",
+		"employeeID": 8,
+		"orderDate": "1997-08-07 00:00:00.000",
+		"requiredDate": "1997-09-04 00:00:00.000",
+		"shippedDate": "1997-08-12 00:00:00.000",
+		"shipVia": 2,
+		"freight": 97.18,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 15,
+				"discount": 0.1
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 25,
+				"discount": 0.1
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 30,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10622,
+		"customerID": "RICAR",
+		"employeeID": 4,
+		"orderDate": "1997-08-06 00:00:00.000",
+		"requiredDate": "1997-09-03 00:00:00.000",
+		"shippedDate": "1997-08-11 00:00:00.000",
+		"shipVia": 3,
+		"freight": 50.97,
+		"shipName": "Ricardo Adocicados",
+		"shipAddress": {
+			"street": "Av. Copacabana 267",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-890",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 18,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10624,
+		"customerID": "THECR",
+		"employeeID": 4,
+		"orderDate": "1997-08-07 00:00:00.000",
+		"requiredDate": "1997-09-04 00:00:00.000",
+		"shippedDate": "1997-08-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 94.8,
+		"shipName": "The Cracker Box",
+		"shipAddress": {
+			"street": "55 Grizzly Peak Rd.",
+			"city": "Butte",
+			"region": "MT",
+			"postalCode": 59801,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10626,
+		"customerID": "BERGS",
+		"employeeID": 1,
+		"orderDate": "1997-08-11 00:00:00.000",
+		"requiredDate": "1997-09-08 00:00:00.000",
+		"shippedDate": "1997-08-20 00:00:00.000",
+		"shipVia": 2,
+		"freight": 138.69,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10627,
+		"customerID": "SAVEA",
+		"employeeID": 8,
+		"orderDate": "1997-08-11 00:00:00.000",
+		"requiredDate": "1997-09-22 00:00:00.000",
+		"shippedDate": "1997-08-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 107.46,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 73,
+				"unitPrice": 15,
+				"quantity": 35,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10630,
+		"customerID": "KOENE",
+		"employeeID": 1,
+		"orderDate": "1997-08-13 00:00:00.000",
+		"requiredDate": "1997-09-10 00:00:00.000",
+		"shippedDate": "1997-08-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 32.35,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 12,
+				"discount": 0.05
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10629,
+		"customerID": "GODOS",
+		"employeeID": 4,
+		"orderDate": "1997-08-12 00:00:00.000",
+		"requiredDate": "1997-09-09 00:00:00.000",
+		"shippedDate": "1997-08-20 00:00:00.000",
+		"shipVia": 3,
+		"freight": 85.46,
+		"shipName": "Godos Cocina Típica",
+		"shipAddress": {
+			"street": "C/ Romero 33",
+			"city": "Sevilla",
+			"region": "NULL",
+			"postalCode": 41101,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 9,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10632,
+		"customerID": "WANDK",
+		"employeeID": 8,
+		"orderDate": "1997-08-14 00:00:00.000",
+		"requiredDate": "1997-09-11 00:00:00.000",
+		"shippedDate": "1997-08-19 00:00:00.000",
+		"shipVia": 1,
+		"freight": 41.38,
+		"shipName": "Die Wandernde Kuh",
+		"shipAddress": {
+			"street": "Adenauerallee 900",
+			"city": "Stuttgart",
+			"region": "NULL",
+			"postalCode": 70563,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 30,
+				"discount": 0.05
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10633,
+		"customerID": "ERNSH",
+		"employeeID": 7,
+		"orderDate": "1997-08-15 00:00:00.000",
+		"requiredDate": "1997-09-12 00:00:00.000",
+		"shippedDate": "1997-08-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 477.9,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 12,
+				"unitPrice": 38,
+				"quantity": 36,
+				"discount": 0.15
+			},
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 13,
+				"discount": 0.15
+			},
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 35,
+				"discount": 0.15
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 80,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10634,
+		"customerID": "FOLIG",
+		"employeeID": 4,
+		"orderDate": "1997-08-15 00:00:00.000",
+		"requiredDate": "1997-09-12 00:00:00.000",
+		"shippedDate": "1997-08-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 487.38,
+		"shipName": "Folies gourmandes",
+		"shipAddress": {
+			"street": "184 chaussée de Tournai",
+			"city": "Lille",
+			"region": "NULL",
+			"postalCode": 59000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10638,
+		"customerID": "LINOD",
+		"employeeID": 3,
+		"orderDate": "1997-08-20 00:00:00.000",
+		"requiredDate": "1997-09-17 00:00:00.000",
+		"shippedDate": "1997-09-01 00:00:00.000",
+		"shipVia": 1,
+		"freight": 158.44,
+		"shipName": "LINO-Delicateses",
+		"shipAddress": {
+			"street": "Ave. 5 de Mayo Porlamar",
+			"city": "I. de Margarita",
+			"region": "Nueva Esparta",
+			"postalCode": 4980,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 45,
+				"unitPrice": 9.5,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 60,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10640,
+		"customerID": "WANDK",
+		"employeeID": 4,
+		"orderDate": "1997-08-21 00:00:00.000",
+		"requiredDate": "1997-09-18 00:00:00.000",
+		"shippedDate": "1997-08-28 00:00:00.000",
+		"shipVia": 1,
+		"freight": 23.55,
+		"shipName": "Die Wandernde Kuh",
+		"shipAddress": {
+			"street": "Adenauerallee 900",
+			"city": "Stuttgart",
+			"region": "NULL",
+			"postalCode": 70563,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 20,
+				"discount": 0.25
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 15,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10641,
+		"customerID": "HILAA",
+		"employeeID": 4,
+		"orderDate": "1997-08-22 00:00:00.000",
+		"requiredDate": "1997-09-19 00:00:00.000",
+		"shippedDate": "1997-08-26 00:00:00.000",
+		"shipVia": 2,
+		"freight": 179.61,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 60,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10642,
+		"customerID": "SIMOB",
+		"employeeID": 7,
+		"orderDate": "1997-08-22 00:00:00.000",
+		"requiredDate": "1997-09-19 00:00:00.000",
+		"shippedDate": "1997-09-05 00:00:00.000",
+		"shipVia": 3,
+		"freight": 41.89,
+		"shipName": "Simons bistro",
+		"shipAddress": {
+			"street": "Vinbæltet 34",
+			"city": "Kobenhavn",
+			"region": "NULL",
+			"postalCode": 1734,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 30,
+				"discount": 0.2
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 20,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10643,
+		"customerID": "ALFKI",
+		"employeeID": 6,
+		"orderDate": "1997-08-25 00:00:00.000",
+		"requiredDate": "1997-09-22 00:00:00.000",
+		"shippedDate": "1997-09-02 00:00:00.000",
+		"shipVia": 1,
+		"freight": 29.46,
+		"shipName": "Alfreds Futterkiste",
+		"shipAddress": {
+			"street": "Obere Str. 57",
+			"city": "Berlin",
+			"region": "NULL",
+			"postalCode": 12209,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 15,
+				"discount": 0.25
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 21,
+				"discount": 0.25
+			},
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 2,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10636,
+		"customerID": "WARTH",
+		"employeeID": 4,
+		"orderDate": "1997-08-19 00:00:00.000",
+		"requiredDate": "1997-09-16 00:00:00.000",
+		"shippedDate": "1997-08-26 00:00:00.000",
+		"shipVia": 1,
+		"freight": 1.15,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10644,
+		"customerID": "WELLI",
+		"employeeID": 3,
+		"orderDate": "1997-08-25 00:00:00.000",
+		"requiredDate": "1997-09-22 00:00:00.000",
+		"shippedDate": "1997-09-01 00:00:00.000",
+		"shipVia": 2,
+		"freight": 0.14,
+		"shipName": "Wellington Importadora",
+		"shipAddress": {
+			"street": "Rua do Mercado 12",
+			"city": "Resende",
+			"region": "SP",
+			"postalCode": "08737-363",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 4,
+				"discount": 0.1
+			},
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 21,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10635,
+		"customerID": "MAGAA",
+		"employeeID": 8,
+		"orderDate": "1997-08-18 00:00:00.000",
+		"requiredDate": "1997-09-15 00:00:00.000",
+		"shippedDate": "1997-08-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 47.46,
+		"shipName": "Magazzini Alimentari Riuniti",
+		"shipAddress": {
+			"street": "Via Ludovico il Moro 22",
+			"city": "Bergamo",
+			"region": "NULL",
+			"postalCode": 24100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 5,
+				"unitPrice": 21.35,
+				"quantity": 15,
+				"discount": 0.1
+			},
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 10,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10637,
+		"customerID": "QUEEN",
+		"employeeID": 6,
+		"orderDate": "1997-08-19 00:00:00.000",
+		"requiredDate": "1997-09-16 00:00:00.000",
+		"shippedDate": "1997-08-26 00:00:00.000",
+		"shipVia": 1,
+		"freight": 201.29,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 50,
+				"unitPrice": 16.25,
+				"quantity": 25,
+				"discount": 0.05
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 60,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10645,
+		"customerID": "HANAR",
+		"employeeID": 4,
+		"orderDate": "1997-08-26 00:00:00.000",
+		"requiredDate": "1997-09-23 00:00:00.000",
+		"shippedDate": "1997-09-02 00:00:00.000",
+		"shipVia": 1,
+		"freight": 12.41,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10649,
+		"customerID": "MAISD",
+		"employeeID": 5,
+		"orderDate": "1997-08-28 00:00:00.000",
+		"requiredDate": "1997-09-25 00:00:00.000",
+		"shippedDate": "1997-08-29 00:00:00.000",
+		"shipVia": 3,
+		"freight": 6.2,
+		"shipName": "Maison Dewey",
+		"shipAddress": {
+			"street": "Rue Joseph-Bens 532",
+			"city": "Bruxelles",
+			"region": "NULL",
+			"postalCode": "B-1180",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10650,
+		"customerID": "FAMIA",
+		"employeeID": 5,
+		"orderDate": "1997-08-29 00:00:00.000",
+		"requiredDate": "1997-09-26 00:00:00.000",
+		"shippedDate": "1997-09-03 00:00:00.000",
+		"shipVia": 3,
+		"freight": 176.81,
+		"shipName": "Familia Arquibaldo",
+		"shipAddress": {
+			"street": "Rua Orós 92",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05442-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 25,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10651,
+		"customerID": "WANDK",
+		"employeeID": 8,
+		"orderDate": "1997-09-01 00:00:00.000",
+		"requiredDate": "1997-09-29 00:00:00.000",
+		"shippedDate": "1997-09-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 20.6,
+		"shipName": "Die Wandernde Kuh",
+		"shipAddress": {
+			"street": "Adenauerallee 900",
+			"city": "Stuttgart",
+			"region": "NULL",
+			"postalCode": 70563,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 12,
+				"discount": 0.25
+			},
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 20,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10652,
+		"customerID": "GOURL",
+		"employeeID": 4,
+		"orderDate": "1997-09-01 00:00:00.000",
+		"requiredDate": "1997-09-29 00:00:00.000",
+		"shippedDate": "1997-09-08 00:00:00.000",
+		"shipVia": 2,
+		"freight": 7.14,
+		"shipName": "Gourmet Lanchonetes",
+		"shipAddress": {
+			"street": "Av. Brasil 442",
+			"city": "Campinas",
+			"region": "SP",
+			"postalCode": "04876-786",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 2,
+				"discount": 0.25
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10653,
+		"customerID": "FRANK",
+		"employeeID": 1,
+		"orderDate": "1997-09-02 00:00:00.000",
+		"requiredDate": "1997-09-30 00:00:00.000",
+		"shippedDate": "1997-09-19 00:00:00.000",
+		"shipVia": 1,
+		"freight": 93.25,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 20,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10654,
+		"customerID": "BERGS",
+		"employeeID": 5,
+		"orderDate": "1997-09-02 00:00:00.000",
+		"requiredDate": "1997-09-30 00:00:00.000",
+		"shippedDate": "1997-09-11 00:00:00.000",
+		"shipVia": 1,
+		"freight": 55.26,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 12,
+				"discount": 0.1
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 6,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10647,
+		"customerID": "QUEDE",
+		"employeeID": 4,
+		"orderDate": "1997-08-27 00:00:00.000",
+		"requiredDate": "1997-09-10 00:00:00.000",
+		"shippedDate": "1997-09-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 45.54,
+		"shipName": "Que Delícia",
+		"shipAddress": {
+			"street": "Rua da Panificadora 12",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-673",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10656,
+		"customerID": "GREAL",
+		"employeeID": 6,
+		"orderDate": "1997-09-04 00:00:00.000",
+		"requiredDate": "1997-10-02 00:00:00.000",
+		"shippedDate": "1997-09-10 00:00:00.000",
+		"shipVia": 1,
+		"freight": 57.15,
+		"shipName": "Great Lakes Food Market",
+		"shipAddress": {
+			"street": "2732 Baker Blvd.",
+			"city": "Eugene",
+			"region": "OR",
+			"postalCode": 97403,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 3,
+				"discount": 0.1
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 28,
+				"discount": 0.1
+			},
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 6,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10657,
+		"customerID": "SAVEA",
+		"employeeID": 2,
+		"orderDate": "1997-09-04 00:00:00.000",
+		"requiredDate": "1997-10-02 00:00:00.000",
+		"shippedDate": "1997-09-15 00:00:00.000",
+		"shipVia": 2,
+		"freight": 352.69,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 45,
+				"discount": 0
+			},
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 45,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 15,
+				"unitPrice": 15.5,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10658,
+		"customerID": "QUICK",
+		"employeeID": 4,
+		"orderDate": "1997-09-05 00:00:00.000",
+		"requiredDate": "1997-10-03 00:00:00.000",
+		"shippedDate": "1997-09-08 00:00:00.000",
+		"shipVia": 1,
+		"freight": 364.15,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 70,
+				"discount": 0.05
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 55,
+				"discount": 0.05
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 70,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10646,
+		"customerID": "HUNGO",
+		"employeeID": 9,
+		"orderDate": "1997-08-27 00:00:00.000",
+		"requiredDate": "1997-10-08 00:00:00.000",
+		"shippedDate": "1997-09-03 00:00:00.000",
+		"shipVia": 3,
+		"freight": 142.33,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 15,
+				"discount": 0.25
+			},
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 18,
+				"discount": 0.25
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 35,
+				"discount": 0.25
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 30,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10648,
+		"customerID": "RICAR",
+		"employeeID": 5,
+		"orderDate": "1997-08-28 00:00:00.000",
+		"requiredDate": "1997-10-09 00:00:00.000",
+		"shippedDate": "1997-09-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 14.25,
+		"shipName": "Ricardo Adocicados",
+		"shipAddress": {
+			"street": "Av. Copacabana 267",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-890",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 15,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10659,
+		"customerID": "QUEEN",
+		"employeeID": 7,
+		"orderDate": "1997-09-05 00:00:00.000",
+		"requiredDate": "1997-10-03 00:00:00.000",
+		"shippedDate": "1997-09-10 00:00:00.000",
+		"shipVia": 2,
+		"freight": 105.81,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 24,
+				"discount": 0.05
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 40,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10664,
+		"customerID": "FURIB",
+		"employeeID": 1,
+		"orderDate": "1997-09-10 00:00:00.000",
+		"requiredDate": "1997-10-08 00:00:00.000",
+		"shippedDate": "1997-09-19 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.27,
+		"shipName": "Furia Bacalhau e Frutos do Mar",
+		"shipAddress": {
+			"street": "Jardim das rosas n. 32",
+			"city": "Lisboa",
+			"region": "NULL",
+			"postalCode": 1675,
+			"country": "Portugal"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 24,
+				"discount": 0.15
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 12,
+				"discount": 0.15
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 15,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10661,
+		"customerID": "HUNGO",
+		"employeeID": 7,
+		"orderDate": "1997-09-09 00:00:00.000",
+		"requiredDate": "1997-10-07 00:00:00.000",
+		"shippedDate": "1997-09-15 00:00:00.000",
+		"shipVia": 3,
+		"freight": 17.55,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 3,
+				"discount": 0.2
+			},
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 49,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10665,
+		"customerID": "LONEP",
+		"employeeID": 1,
+		"orderDate": "1997-09-11 00:00:00.000",
+		"requiredDate": "1997-10-09 00:00:00.000",
+		"shippedDate": "1997-09-17 00:00:00.000",
+		"shipVia": 2,
+		"freight": 26.31,
+		"shipName": "Lonesome Pine Restaurant",
+		"shipAddress": {
+			"street": "89 Chiaroscuro Rd.",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97219,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 1,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10663,
+		"customerID": "BONAP",
+		"employeeID": 2,
+		"orderDate": "1997-09-10 00:00:00.000",
+		"requiredDate": "1997-09-24 00:00:00.000",
+		"shippedDate": "1997-10-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 113.15,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 30,
+				"discount": 0.05
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 30,
+				"discount": 0.05
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10666,
+		"customerID": "RICSU",
+		"employeeID": 7,
+		"orderDate": "1997-09-12 00:00:00.000",
+		"requiredDate": "1997-10-10 00:00:00.000",
+		"shippedDate": "1997-09-22 00:00:00.000",
+		"shipVia": 2,
+		"freight": 232.42,
+		"shipName": "Richter Supermarkt",
+		"shipAddress": {
+			"street": "Starenweg 5",
+			"city": "Genève",
+			"region": "NULL",
+			"postalCode": 1204,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 36,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10667,
+		"customerID": "ERNSH",
+		"employeeID": 7,
+		"orderDate": "1997-09-12 00:00:00.000",
+		"requiredDate": "1997-10-10 00:00:00.000",
+		"shippedDate": "1997-09-19 00:00:00.000",
+		"shipVia": 1,
+		"freight": 78.09,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 45,
+				"discount": 0.2
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 14,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10668,
+		"customerID": "WANDK",
+		"employeeID": 1,
+		"orderDate": "1997-09-15 00:00:00.000",
+		"requiredDate": "1997-10-13 00:00:00.000",
+		"shippedDate": "1997-09-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 47.22,
+		"shipName": "Die Wandernde Kuh",
+		"shipAddress": {
+			"street": "Adenauerallee 900",
+			"city": "Stuttgart",
+			"region": "NULL",
+			"postalCode": 70563,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 8,
+				"discount": 0.1
+			},
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 4,
+				"discount": 0.1
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 15,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10670,
+		"customerID": "FRANK",
+		"employeeID": 4,
+		"orderDate": "1997-09-16 00:00:00.000",
+		"requiredDate": "1997-10-14 00:00:00.000",
+		"shippedDate": "1997-09-18 00:00:00.000",
+		"shipVia": 1,
+		"freight": 203.48,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 32,
+				"discount": 0
+			},
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 73,
+				"unitPrice": 15,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 67,
+				"unitPrice": 14,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10672,
+		"customerID": "BERGS",
+		"employeeID": 9,
+		"orderDate": "1997-09-17 00:00:00.000",
+		"requiredDate": "1997-10-01 00:00:00.000",
+		"shippedDate": "1997-09-26 00:00:00.000",
+		"shipVia": 2,
+		"freight": 95.75,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 15,
+				"discount": 0.1
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10671,
+		"customerID": "FRANR",
+		"employeeID": 1,
+		"orderDate": "1997-09-17 00:00:00.000",
+		"requiredDate": "1997-10-15 00:00:00.000",
+		"shippedDate": "1997-09-24 00:00:00.000",
+		"shipVia": 1,
+		"freight": 30.34,
+		"shipName": "France restauration",
+		"shipAddress": {
+			"street": "54 rue Royale",
+			"city": "Nantes",
+			"region": "NULL",
+			"postalCode": 44000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10673,
+		"customerID": "WILMK",
+		"employeeID": 2,
+		"orderDate": "1997-09-18 00:00:00.000",
+		"requiredDate": "1997-10-16 00:00:00.000",
+		"shippedDate": "1997-09-19 00:00:00.000",
+		"shipVia": 1,
+		"freight": 22.76,
+		"shipName": "Wilman Kala",
+		"shipAddress": {
+			"street": "Keskuskatu 45",
+			"city": "Helsinki",
+			"region": "NULL",
+			"postalCode": 21240,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10677,
+		"customerID": "ANTON",
+		"employeeID": 1,
+		"orderDate": "1997-09-22 00:00:00.000",
+		"requiredDate": "1997-10-20 00:00:00.000",
+		"shippedDate": "1997-09-26 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.03,
+		"shipName": "Antonio Moreno Taquería",
+		"shipAddress": {
+			"street": "Mataderos  2312",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5023,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 30,
+				"discount": 0.15
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 8,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10678,
+		"customerID": "SAVEA",
+		"employeeID": 7,
+		"orderDate": "1997-09-23 00:00:00.000",
+		"requiredDate": "1997-10-21 00:00:00.000",
+		"shippedDate": "1997-10-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 388.98,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 12,
+				"unitPrice": 38,
+				"quantity": 100,
+				"discount": 0
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 120,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10680,
+		"customerID": "OLDWO",
+		"employeeID": 1,
+		"orderDate": "1997-09-24 00:00:00.000",
+		"requiredDate": "1997-10-22 00:00:00.000",
+		"shippedDate": "1997-09-26 00:00:00.000",
+		"shipVia": 1,
+		"freight": 26.61,
+		"shipName": "Old World Delicatessen",
+		"shipAddress": {
+			"street": "2743 Bering St.",
+			"city": "Anchorage",
+			"region": "AK",
+			"postalCode": 99508,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 50,
+				"discount": 0.25
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 20,
+				"discount": 0.25
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 40,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10681,
+		"customerID": "GREAL",
+		"employeeID": 3,
+		"orderDate": "1997-09-25 00:00:00.000",
+		"requiredDate": "1997-10-23 00:00:00.000",
+		"shippedDate": "1997-09-30 00:00:00.000",
+		"shipVia": 3,
+		"freight": 76.13,
+		"shipName": "Great Lakes Food Market",
+		"shipAddress": {
+			"street": "2732 Baker Blvd.",
+			"city": "Eugene",
+			"region": "OR",
+			"postalCode": 97403,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 12,
+				"discount": 0.1
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 28,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10682,
+		"customerID": "ANTON",
+		"employeeID": 3,
+		"orderDate": "1997-09-25 00:00:00.000",
+		"requiredDate": "1997-10-23 00:00:00.000",
+		"shippedDate": "1997-10-01 00:00:00.000",
+		"shipVia": 2,
+		"freight": 36.13,
+		"shipName": "Antonio Moreno Taquería",
+		"shipAddress": {
+			"street": "Mataderos  2312",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5023,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 66,
+				"unitPrice": 17,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10675,
+		"customerID": "FRANK",
+		"employeeID": 5,
+		"orderDate": "1997-09-19 00:00:00.000",
+		"requiredDate": "1997-10-17 00:00:00.000",
+		"shippedDate": "1997-09-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 31.85,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10684,
+		"customerID": "OTTIK",
+		"employeeID": 3,
+		"orderDate": "1997-09-26 00:00:00.000",
+		"requiredDate": "1997-10-24 00:00:00.000",
+		"shippedDate": "1997-09-30 00:00:00.000",
+		"shipVia": 1,
+		"freight": 145.63,
+		"shipName": "Ottilies Käseladen",
+		"shipAddress": {
+			"street": "Mehrheimerstr. 369",
+			"city": "Köln",
+			"region": "NULL",
+			"postalCode": 50739,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10685,
+		"customerID": "GOURL",
+		"employeeID": 4,
+		"orderDate": "1997-09-29 00:00:00.000",
+		"requiredDate": "1997-10-13 00:00:00.000",
+		"shippedDate": "1997-10-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 33.75,
+		"shipName": "Gourmet Lanchonetes",
+		"shipAddress": {
+			"street": "Av. Brasil 442",
+			"city": "Campinas",
+			"region": "SP",
+			"postalCode": "04876-786",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10676,
+		"customerID": "TORTU",
+		"employeeID": 2,
+		"orderDate": "1997-09-22 00:00:00.000",
+		"requiredDate": "1997-10-20 00:00:00.000",
+		"shippedDate": "1997-09-29 00:00:00.000",
+		"shipVia": 2,
+		"freight": 2.01,
+		"shipName": "Tortuga Restaurante",
+		"shipAddress": {
+			"street": "Avda. Azteca 123",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 7,
+				"discount": 0
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10686,
+		"customerID": "PICCO",
+		"employeeID": 2,
+		"orderDate": "1997-09-30 00:00:00.000",
+		"requiredDate": "1997-10-28 00:00:00.000",
+		"shippedDate": "1997-10-08 00:00:00.000",
+		"shipVia": 1,
+		"freight": 96.5,
+		"shipName": "Piccolo und mehr",
+		"shipAddress": {
+			"street": "Geislweg 14",
+			"city": "Salzburg",
+			"region": "NULL",
+			"postalCode": 5020,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 30,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10687,
+		"customerID": "HUNGO",
+		"employeeID": 9,
+		"orderDate": "1997-09-30 00:00:00.000",
+		"requiredDate": "1997-10-28 00:00:00.000",
+		"shippedDate": "1997-10-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 296.43,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 9,
+				"unitPrice": 97,
+				"quantity": 50,
+				"discount": 0.25
+			},
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 6,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10691,
+		"customerID": "QUICK",
+		"employeeID": 2,
+		"orderDate": "1997-10-03 00:00:00.000",
+		"requiredDate": "1997-11-14 00:00:00.000",
+		"shippedDate": "1997-10-22 00:00:00.000",
+		"shipVia": 2,
+		"freight": 810.05,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 48,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10693,
+		"customerID": "WHITC",
+		"employeeID": 3,
+		"orderDate": "1997-10-06 00:00:00.000",
+		"requiredDate": "1997-10-20 00:00:00.000",
+		"shippedDate": "1997-10-10 00:00:00.000",
+		"shipVia": 3,
+		"freight": 139.34,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 9,
+				"unitPrice": 97,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 60,
+				"discount": 0.15
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 30,
+				"discount": 0.15
+			},
+			{
+				"productID": 73,
+				"unitPrice": 15,
+				"quantity": 15,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10694,
+		"customerID": "QUICK",
+		"employeeID": 8,
+		"orderDate": "1997-10-06 00:00:00.000",
+		"requiredDate": "1997-11-03 00:00:00.000",
+		"shippedDate": "1997-10-09 00:00:00.000",
+		"shipVia": 3,
+		"freight": 398.36,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 90,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10695,
+		"customerID": "WILMK",
+		"employeeID": 7,
+		"orderDate": "1997-10-07 00:00:00.000",
+		"requiredDate": "1997-11-18 00:00:00.000",
+		"shippedDate": "1997-10-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 16.72,
+		"shipName": "Wilman Kala",
+		"shipAddress": {
+			"street": "Keskuskatu 45",
+			"city": "Helsinki",
+			"region": "NULL",
+			"postalCode": 21240,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 8,
+				"unitPrice": 40,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 12,
+				"unitPrice": 38,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10696,
+		"customerID": "WHITC",
+		"employeeID": 8,
+		"orderDate": "1997-10-08 00:00:00.000",
+		"requiredDate": "1997-11-19 00:00:00.000",
+		"shippedDate": "1997-10-14 00:00:00.000",
+		"shipVia": 3,
+		"freight": 102.55,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 18,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10697,
+		"customerID": "LINOD",
+		"employeeID": 3,
+		"orderDate": "1997-10-08 00:00:00.000",
+		"requiredDate": "1997-11-05 00:00:00.000",
+		"shippedDate": "1997-10-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 45.52,
+		"shipName": "LINO-Delicateses",
+		"shipAddress": {
+			"street": "Ave. 5 de Mayo Porlamar",
+			"city": "I. de Margarita",
+			"region": "Nueva Esparta",
+			"postalCode": 4980,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 9,
+				"discount": 0.25
+			},
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 7,
+				"discount": 0.25
+			},
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 30,
+				"discount": 0.25
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 30,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10698,
+		"customerID": "ERNSH",
+		"employeeID": 4,
+		"orderDate": "1997-10-09 00:00:00.000",
+		"requiredDate": "1997-11-06 00:00:00.000",
+		"shippedDate": "1997-10-17 00:00:00.000",
+		"shipVia": 1,
+		"freight": 272.47,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 8,
+				"discount": 0.05
+			},
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 12,
+				"discount": 0.05
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 65,
+				"discount": 0.05
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 8,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10690,
+		"customerID": "HANAR",
+		"employeeID": 1,
+		"orderDate": "1997-10-02 00:00:00.000",
+		"requiredDate": "1997-10-30 00:00:00.000",
+		"shippedDate": "1997-10-03 00:00:00.000",
+		"shipVia": 1,
+		"freight": 15.8,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 20,
+				"discount": 0.25
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 30,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10702,
+		"customerID": "ALFKI",
+		"employeeID": 4,
+		"orderDate": "1997-10-13 00:00:00.000",
+		"requiredDate": "1997-11-24 00:00:00.000",
+		"shippedDate": "1997-10-21 00:00:00.000",
+		"shipVia": 1,
+		"freight": 23.94,
+		"shipName": "Alfred's Futterkiste",
+		"shipAddress": {
+			"street": "Obere Str. 57",
+			"city": "Berlin",
+			"region": "NULL",
+			"postalCode": 12209,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 3,
+				"unitPrice": 10,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10700,
+		"customerID": "SAVEA",
+		"employeeID": 3,
+		"orderDate": "1997-10-10 00:00:00.000",
+		"requiredDate": "1997-11-07 00:00:00.000",
+		"shippedDate": "1997-10-16 00:00:00.000",
+		"shipVia": 1,
+		"freight": 65.1,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 34,
+				"unitPrice": 14,
+				"quantity": 12,
+				"discount": 0.2
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 40,
+				"discount": 0.2
+			},
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 5,
+				"discount": 0.2
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 60,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10688,
+		"customerID": "VAFFE",
+		"employeeID": 4,
+		"orderDate": "1997-10-01 00:00:00.000",
+		"requiredDate": "1997-10-15 00:00:00.000",
+		"shippedDate": "1997-10-07 00:00:00.000",
+		"shipVia": 2,
+		"freight": 299.09,
+		"shipName": "Vaffeljernet",
+		"shipAddress": {
+			"street": "Smagsloget 45",
+			"city": "Århus",
+			"region": "NULL",
+			"postalCode": 8200,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 18,
+				"discount": 0.1
+			},
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 60,
+				"discount": 0.1
+			},
+			{
+				"productID": 34,
+				"unitPrice": 14,
+				"quantity": 14,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10701,
+		"customerID": "HUNGO",
+		"employeeID": 6,
+		"orderDate": "1997-10-13 00:00:00.000",
+		"requiredDate": "1997-10-27 00:00:00.000",
+		"shippedDate": "1997-10-15 00:00:00.000",
+		"shipVia": 3,
+		"freight": 220.31,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 42,
+				"discount": 0.15
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 20,
+				"discount": 0.15
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 35,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10703,
+		"customerID": "FOLKO",
+		"employeeID": 6,
+		"orderDate": "1997-10-14 00:00:00.000",
+		"requiredDate": "1997-11-11 00:00:00.000",
+		"shippedDate": "1997-10-20 00:00:00.000",
+		"shipVia": 2,
+		"freight": 152.3,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 73,
+				"unitPrice": 15,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10704,
+		"customerID": "QUEEN",
+		"employeeID": 6,
+		"orderDate": "1997-10-14 00:00:00.000",
+		"requiredDate": "1997-11-11 00:00:00.000",
+		"shippedDate": "1997-11-07 00:00:00.000",
+		"shipVia": 1,
+		"freight": 4.78,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 48,
+				"unitPrice": 12.75,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10708,
+		"customerID": "THEBI",
+		"employeeID": 6,
+		"orderDate": "1997-10-17 00:00:00.000",
+		"requiredDate": "1997-11-28 00:00:00.000",
+		"shippedDate": "1997-11-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 2.96,
+		"shipName": "The Big Cheese",
+		"shipAddress": {
+			"street": "89 Jefferson Way Suite 2",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97201,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 5,
+				"unitPrice": 21.35,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10709,
+		"customerID": "GOURL",
+		"employeeID": 1,
+		"orderDate": "1997-10-17 00:00:00.000",
+		"requiredDate": "1997-11-14 00:00:00.000",
+		"shippedDate": "1997-11-20 00:00:00.000",
+		"shipVia": 3,
+		"freight": 210.8,
+		"shipName": "Gourmet Lanchonetes",
+		"shipAddress": {
+			"street": "Av. Brasil 442",
+			"city": "Campinas",
+			"region": "SP",
+			"postalCode": "04876-786",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 8,
+				"unitPrice": 40,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 28,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10710,
+		"customerID": "FRANS",
+		"employeeID": 1,
+		"orderDate": "1997-10-20 00:00:00.000",
+		"requiredDate": "1997-11-17 00:00:00.000",
+		"shippedDate": "1997-10-23 00:00:00.000",
+		"shipVia": 1,
+		"freight": 4.98,
+		"shipName": "Franchi S.p.A.",
+		"shipAddress": {
+			"street": "Via Monte Bianco 34",
+			"city": "Torino",
+			"region": "NULL",
+			"postalCode": 10100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10711,
+		"customerID": "SAVEA",
+		"employeeID": 5,
+		"orderDate": "1997-10-21 00:00:00.000",
+		"requiredDate": "1997-12-02 00:00:00.000",
+		"shippedDate": "1997-10-29 00:00:00.000",
+		"shipVia": 2,
+		"freight": 52.41,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 42,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 120,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10712,
+		"customerID": "HUNGO",
+		"employeeID": 3,
+		"orderDate": "1997-10-21 00:00:00.000",
+		"requiredDate": "1997-11-18 00:00:00.000",
+		"shippedDate": "1997-10-31 00:00:00.000",
+		"shipVia": 1,
+		"freight": 89.93,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 3,
+				"discount": 0.05
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10713,
+		"customerID": "SAVEA",
+		"employeeID": 1,
+		"orderDate": "1997-10-22 00:00:00.000",
+		"requiredDate": "1997-11-19 00:00:00.000",
+		"shippedDate": "1997-10-24 00:00:00.000",
+		"shipVia": 1,
+		"freight": 167.05,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 45,
+				"unitPrice": 9.5,
+				"quantity": 110,
+				"discount": 0
+			},
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10707,
+		"customerID": "AROUT",
+		"employeeID": 4,
+		"orderDate": "1997-10-16 00:00:00.000",
+		"requiredDate": "1997-10-30 00:00:00.000",
+		"shippedDate": "1997-10-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 21.74,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 28,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10715,
+		"customerID": "BONAP",
+		"employeeID": 3,
+		"orderDate": "1997-10-23 00:00:00.000",
+		"requiredDate": "1997-11-06 00:00:00.000",
+		"shippedDate": "1997-10-29 00:00:00.000",
+		"shipVia": 1,
+		"freight": 63.2,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10706,
+		"customerID": "OLDWO",
+		"employeeID": 8,
+		"orderDate": "1997-10-16 00:00:00.000",
+		"requiredDate": "1997-11-13 00:00:00.000",
+		"shippedDate": "1997-10-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 135.63,
+		"shipName": "Old World Delicatessen",
+		"shipAddress": {
+			"street": "2743 Bering St.",
+			"city": "Anchorage",
+			"region": "AK",
+			"postalCode": 99508,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 8,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10705,
+		"customerID": "HILAA",
+		"employeeID": 9,
+		"orderDate": "1997-10-15 00:00:00.000",
+		"requiredDate": "1997-11-12 00:00:00.000",
+		"shippedDate": "1997-11-18 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.52,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 32,
+				"unitPrice": 32,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10714,
+		"customerID": "SAVEA",
+		"employeeID": 5,
+		"orderDate": "1997-10-22 00:00:00.000",
+		"requiredDate": "1997-11-19 00:00:00.000",
+		"shippedDate": "1997-10-27 00:00:00.000",
+		"shipVia": 3,
+		"freight": 24.49,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 18,
+				"discount": 0.25
+			},
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 12,
+				"discount": 0.25
+			},
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 50,
+				"discount": 0.25
+			},
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 27,
+				"discount": 0.25
+			},
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 30,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10719,
+		"customerID": "LETSS",
+		"employeeID": 8,
+		"orderDate": "1997-10-27 00:00:00.000",
+		"requiredDate": "1997-11-24 00:00:00.000",
+		"shippedDate": "1997-11-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 51.44,
+		"shipName": "Let's Stop N Shop",
+		"shipAddress": {
+			"street": "87 Polk St. Suite 5",
+			"city": "San Francisco",
+			"region": "CA",
+			"postalCode": 94117,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 12,
+				"discount": 0.25
+			},
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 3,
+				"discount": 0.25
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 40,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10720,
+		"customerID": "QUEDE",
+		"employeeID": 8,
+		"orderDate": "1997-10-28 00:00:00.000",
+		"requiredDate": "1997-11-11 00:00:00.000",
+		"shippedDate": "1997-11-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 9.53,
+		"shipName": "Que Delícia",
+		"shipAddress": {
+			"street": "Rua da Panificadora 12",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-673",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 8,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10722,
+		"customerID": "SAVEA",
+		"employeeID": 8,
+		"orderDate": "1997-10-29 00:00:00.000",
+		"requiredDate": "1997-12-10 00:00:00.000",
+		"shippedDate": "1997-11-04 00:00:00.000",
+		"shipVia": 1,
+		"freight": 74.58,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 45,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 42,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10724,
+		"customerID": "MEREP",
+		"employeeID": 8,
+		"orderDate": "1997-10-30 00:00:00.000",
+		"requiredDate": "1997-12-11 00:00:00.000",
+		"shippedDate": "1997-11-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 57.75,
+		"shipName": "Mère Paillarde",
+		"shipAddress": {
+			"street": "43 rue St. Laurent",
+			"city": "Montréal",
+			"region": "Québec",
+			"postalCode": "H1J 1C3",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 16,
+				"discount": 0
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10716,
+		"customerID": "RANCH",
+		"employeeID": 4,
+		"orderDate": "1997-10-24 00:00:00.000",
+		"requiredDate": "1997-11-21 00:00:00.000",
+		"shippedDate": "1997-10-27 00:00:00.000",
+		"shipVia": 2,
+		"freight": 22.57,
+		"shipName": "Rancho grande",
+		"shipAddress": {
+			"street": "Av. del Libertador 900",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 7,
+				"discount": 0
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10726,
+		"customerID": "EASTC",
+		"employeeID": 4,
+		"orderDate": "1997-11-03 00:00:00.000",
+		"requiredDate": "1997-11-17 00:00:00.000",
+		"shippedDate": "1997-12-05 00:00:00.000",
+		"shipVia": 1,
+		"freight": 16.56,
+		"shipName": "Eastern Connection",
+		"shipAddress": {
+			"street": "35 King George",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "WX3 6FW",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10717,
+		"customerID": "FRANK",
+		"employeeID": 1,
+		"orderDate": "1997-10-24 00:00:00.000",
+		"requiredDate": "1997-11-21 00:00:00.000",
+		"shippedDate": "1997-10-29 00:00:00.000",
+		"shipVia": 2,
+		"freight": 59.25,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 32,
+				"discount": 0.05
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 25,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10727,
+		"customerID": "REGGC",
+		"employeeID": 2,
+		"orderDate": "1997-11-03 00:00:00.000",
+		"requiredDate": "1997-12-01 00:00:00.000",
+		"shippedDate": "1997-12-05 00:00:00.000",
+		"shipVia": 1,
+		"freight": 89.9,
+		"shipName": "Reggiani Caseifici",
+		"shipAddress": {
+			"street": "Strada Provinciale 124",
+			"city": "Reggio Emilia",
+			"region": "NULL",
+			"postalCode": 42100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 10,
+				"discount": 0.05
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 10,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10728,
+		"customerID": "QUEEN",
+		"employeeID": 4,
+		"orderDate": "1997-11-04 00:00:00.000",
+		"requiredDate": "1997-12-02 00:00:00.000",
+		"shippedDate": "1997-11-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 58.33,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10729,
+		"customerID": "LINOD",
+		"employeeID": 8,
+		"orderDate": "1997-11-04 00:00:00.000",
+		"requiredDate": "1997-12-16 00:00:00.000",
+		"shippedDate": "1997-11-14 00:00:00.000",
+		"shipVia": 3,
+		"freight": 141.06,
+		"shipName": "LINO-Delicateses",
+		"shipAddress": {
+			"street": "Ave. 5 de Mayo Porlamar",
+			"city": "I. de Margarita",
+			"region": "Nueva Esparta",
+			"postalCode": 4980,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 50,
+				"unitPrice": 16.25,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10730,
+		"customerID": "BONAP",
+		"employeeID": 5,
+		"orderDate": "1997-11-05 00:00:00.000",
+		"requiredDate": "1997-12-03 00:00:00.000",
+		"shippedDate": "1997-11-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 20.12,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 15,
+				"discount": 0.05
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 3,
+				"discount": 0.05
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 10,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10718,
+		"customerID": "KOENE",
+		"employeeID": 1,
+		"orderDate": "1997-10-27 00:00:00.000",
+		"requiredDate": "1997-11-24 00:00:00.000",
+		"shippedDate": "1997-10-29 00:00:00.000",
+		"shipVia": 3,
+		"freight": 170.88,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 12,
+				"unitPrice": 38,
+				"quantity": 36,
+				"discount": 0
+			},
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10725,
+		"customerID": "FAMIA",
+		"employeeID": 4,
+		"orderDate": "1997-10-31 00:00:00.000",
+		"requiredDate": "1997-11-28 00:00:00.000",
+		"shippedDate": "1997-11-05 00:00:00.000",
+		"shipVia": 3,
+		"freight": 10.83,
+		"shipName": "Familia Arquibaldo",
+		"shipAddress": {
+			"street": "Rua Orós 92",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05442-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10731,
+		"customerID": "CHOPS",
+		"employeeID": 7,
+		"orderDate": "1997-11-06 00:00:00.000",
+		"requiredDate": "1997-12-04 00:00:00.000",
+		"shippedDate": "1997-11-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 96.65,
+		"shipName": "Chop-suey Chinese",
+		"shipAddress": {
+			"street": "Hauptstr. 31",
+			"city": "Bern",
+			"region": "NULL",
+			"postalCode": 3012,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 40,
+				"discount": 0.05
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 30,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10735,
+		"customerID": "LETSS",
+		"employeeID": 6,
+		"orderDate": "1997-11-10 00:00:00.000",
+		"requiredDate": "1997-12-08 00:00:00.000",
+		"shippedDate": "1997-11-21 00:00:00.000",
+		"shipVia": 2,
+		"freight": 45.97,
+		"shipName": "Let's Stop N Shop",
+		"shipAddress": {
+			"street": "87 Polk St. Suite 5",
+			"city": "San Francisco",
+			"region": "CA",
+			"postalCode": 94117,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 2,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10736,
+		"customerID": "HUNGO",
+		"employeeID": 9,
+		"orderDate": "1997-11-11 00:00:00.000",
+		"requiredDate": "1997-12-09 00:00:00.000",
+		"shippedDate": "1997-11-21 00:00:00.000",
+		"shipVia": 2,
+		"freight": 44.1,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10737,
+		"customerID": "VINET",
+		"employeeID": 2,
+		"orderDate": "1997-11-11 00:00:00.000",
+		"requiredDate": "1997-12-09 00:00:00.000",
+		"shippedDate": "1997-11-18 00:00:00.000",
+		"shipVia": 2,
+		"freight": 7.79,
+		"shipName": "Vins et alcools Chevalier",
+		"shipAddress": {
+			"street": "59 rue de l'Abbaye",
+			"city": "Reims",
+			"region": "NULL",
+			"postalCode": 51100,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10739,
+		"customerID": "VINET",
+		"employeeID": 3,
+		"orderDate": "1997-11-12 00:00:00.000",
+		"requiredDate": "1997-12-10 00:00:00.000",
+		"shippedDate": "1997-11-17 00:00:00.000",
+		"shipVia": 3,
+		"freight": 11.08,
+		"shipName": "Vins et alcools Chevalier",
+		"shipAddress": {
+			"street": "59 rue de l'Abbaye",
+			"city": "Reims",
+			"region": "NULL",
+			"postalCode": 51100,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 18,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10740,
+		"customerID": "WHITC",
+		"employeeID": 4,
+		"orderDate": "1997-11-13 00:00:00.000",
+		"requiredDate": "1997-12-11 00:00:00.000",
+		"shippedDate": "1997-11-25 00:00:00.000",
+		"shipVia": 2,
+		"freight": 81.88,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 5,
+				"discount": 0.2
+			},
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 35,
+				"discount": 0.2
+			},
+			{
+				"productID": 45,
+				"unitPrice": 9.5,
+				"quantity": 40,
+				"discount": 0.2
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 14,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10733,
+		"customerID": "BERGS",
+		"employeeID": 1,
+		"orderDate": "1997-11-07 00:00:00.000",
+		"requiredDate": "1997-12-05 00:00:00.000",
+		"shippedDate": "1997-11-10 00:00:00.000",
+		"shipVia": 3,
+		"freight": 110.11,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 16,
+				"discount": 0
+			},
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10742,
+		"customerID": "BOTTM",
+		"employeeID": 3,
+		"orderDate": "1997-11-14 00:00:00.000",
+		"requiredDate": "1997-12-12 00:00:00.000",
+		"shippedDate": "1997-11-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 243.73,
+		"shipName": "Bottom-Dollar Markets",
+		"shipAddress": {
+			"street": "23 Tsawassen Blvd.",
+			"city": "Tsawassen",
+			"region": "BC",
+			"postalCode": "T2F 8M4",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 3,
+				"unitPrice": 10,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10734,
+		"customerID": "GOURL",
+		"employeeID": 2,
+		"orderDate": "1997-11-07 00:00:00.000",
+		"requiredDate": "1997-12-05 00:00:00.000",
+		"shippedDate": "1997-11-12 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.63,
+		"shipName": "Gourmet Lanchonetes",
+		"shipAddress": {
+			"street": "Av. Brasil 442",
+			"city": "Campinas",
+			"region": "SP",
+			"postalCode": "04876-786",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 6,
+				"unitPrice": 25,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10747,
+		"customerID": "PICCO",
+		"employeeID": 6,
+		"orderDate": "1997-11-19 00:00:00.000",
+		"requiredDate": "1997-12-17 00:00:00.000",
+		"shippedDate": "1997-11-26 00:00:00.000",
+		"shipVia": 1,
+		"freight": 117.33,
+		"shipName": "Piccolo und mehr",
+		"shipAddress": {
+			"street": "Geislweg 14",
+			"city": "Salzburg",
+			"region": "NULL",
+			"postalCode": 5020,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 63,
+				"unitPrice": 43.9,
+				"quantity": 9,
+				"discount": 0
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10748,
+		"customerID": "SAVEA",
+		"employeeID": 3,
+		"orderDate": "1997-11-20 00:00:00.000",
+		"requiredDate": "1997-12-18 00:00:00.000",
+		"shippedDate": "1997-11-28 00:00:00.000",
+		"shipVia": 1,
+		"freight": 232.55,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 44,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 28,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10749,
+		"customerID": "ISLAT",
+		"employeeID": 4,
+		"orderDate": "1997-11-20 00:00:00.000",
+		"requiredDate": "1997-12-18 00:00:00.000",
+		"shippedDate": "1997-12-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 61.53,
+		"shipName": "Island Trading",
+		"shipAddress": {
+			"street": "Garden House Crowther Way",
+			"city": "Cowes",
+			"region": "Isle of Wight",
+			"postalCode": "PO31 7PJ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10750,
+		"customerID": "WARTH",
+		"employeeID": 9,
+		"orderDate": "1997-11-21 00:00:00.000",
+		"requiredDate": "1997-12-19 00:00:00.000",
+		"shippedDate": "1997-11-24 00:00:00.000",
+		"shipVia": 1,
+		"freight": 79.3,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 5,
+				"discount": 0.15
+			},
+			{
+				"productID": 45,
+				"unitPrice": 9.5,
+				"quantity": 40,
+				"discount": 0.15
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 25,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10751,
+		"customerID": "RICSU",
+		"employeeID": 3,
+		"orderDate": "1997-11-24 00:00:00.000",
+		"requiredDate": "1997-12-22 00:00:00.000",
+		"shippedDate": "1997-12-03 00:00:00.000",
+		"shipVia": 3,
+		"freight": 130.79,
+		"shipName": "Richter Supermarkt",
+		"shipAddress": {
+			"street": "Starenweg 5",
+			"city": "Genève",
+			"region": "NULL",
+			"postalCode": 1204,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 12,
+				"discount": 0.1
+			},
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 50,
+				"unitPrice": 16.25,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 73,
+				"unitPrice": 15,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10752,
+		"customerID": "NORTS",
+		"employeeID": 2,
+		"orderDate": "1997-11-24 00:00:00.000",
+		"requiredDate": "1997-12-22 00:00:00.000",
+		"shippedDate": "1997-11-28 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.39,
+		"shipName": "North/South",
+		"shipAddress": {
+			"street": "South House 300 Queensbridge",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "SW7 1RZ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10753,
+		"customerID": "FRANS",
+		"employeeID": 3,
+		"orderDate": "1997-11-25 00:00:00.000",
+		"requiredDate": "1997-12-23 00:00:00.000",
+		"shippedDate": "1997-11-27 00:00:00.000",
+		"shipVia": 1,
+		"freight": 7.7,
+		"shipName": "Franchi S.p.A.",
+		"shipAddress": {
+			"street": "Via Monte Bianco 34",
+			"city": "Torino",
+			"region": "NULL",
+			"postalCode": 10100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 45,
+				"unitPrice": 9.5,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 74,
+				"unitPrice": 10,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10745,
+		"customerID": "QUICK",
+		"employeeID": 9,
+		"orderDate": "1997-11-18 00:00:00.000",
+		"requiredDate": "1997-12-16 00:00:00.000",
+		"shippedDate": "1997-11-27 00:00:00.000",
+		"shipVia": 1,
+		"freight": 3.52,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 16,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 45,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 7,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10755,
+		"customerID": "BONAP",
+		"employeeID": 4,
+		"orderDate": "1997-11-26 00:00:00.000",
+		"requiredDate": "1997-12-24 00:00:00.000",
+		"shippedDate": "1997-11-28 00:00:00.000",
+		"shipVia": 2,
+		"freight": 16.71,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 30,
+				"discount": 0.25
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 30,
+				"discount": 0.25
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 14,
+				"discount": 0.25
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 25,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10756,
+		"customerID": "SPLIR",
+		"employeeID": 8,
+		"orderDate": "1997-11-27 00:00:00.000",
+		"requiredDate": "1997-12-25 00:00:00.000",
+		"shippedDate": "1997-12-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 73.21,
+		"shipName": "Split Rail Beer & Ale",
+		"shipAddress": {
+			"street": "P.O. Box 555",
+			"city": "Lander",
+			"region": "WY",
+			"postalCode": 82520,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 21,
+				"discount": 0.2
+			},
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 6,
+				"discount": 0.2
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 20,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10746,
+		"customerID": "CHOPS",
+		"employeeID": 1,
+		"orderDate": "1997-11-19 00:00:00.000",
+		"requiredDate": "1997-12-17 00:00:00.000",
+		"shippedDate": "1997-11-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 31.43,
+		"shipName": "Chop-suey Chinese",
+		"shipAddress": {
+			"street": "Hauptstr. 31",
+			"city": "Bern",
+			"region": "NULL",
+			"postalCode": 3012,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 28,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 9,
+				"discount": 0
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10757,
+		"customerID": "SAVEA",
+		"employeeID": 6,
+		"orderDate": "1997-11-27 00:00:00.000",
+		"requiredDate": "1997-12-25 00:00:00.000",
+		"shippedDate": "1997-12-15 00:00:00.000",
+		"shipVia": 1,
+		"freight": 8.19,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 34,
+				"unitPrice": 14,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 7,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10761,
+		"customerID": "RATTC",
+		"employeeID": 5,
+		"orderDate": "1997-12-02 00:00:00.000",
+		"requiredDate": "1997-12-30 00:00:00.000",
+		"shippedDate": "1997-12-08 00:00:00.000",
+		"shipVia": 2,
+		"freight": 18.66,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 35,
+				"discount": 0.25
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 18,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10762,
+		"customerID": "FOLKO",
+		"employeeID": 3,
+		"orderDate": "1997-12-02 00:00:00.000",
+		"requiredDate": "1997-12-30 00:00:00.000",
+		"shippedDate": "1997-12-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 328.74,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 28,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 16,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10763,
+		"customerID": "FOLIG",
+		"employeeID": 3,
+		"orderDate": "1997-12-03 00:00:00.000",
+		"requiredDate": "1997-12-31 00:00:00.000",
+		"shippedDate": "1997-12-08 00:00:00.000",
+		"shipVia": 3,
+		"freight": 37.35,
+		"shipName": "Folies gourmandes",
+		"shipAddress": {
+			"street": "184 chaussée de Tournai",
+			"city": "Lille",
+			"region": "NULL",
+			"postalCode": 59000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10764,
+		"customerID": "ERNSH",
+		"employeeID": 6,
+		"orderDate": "1997-12-03 00:00:00.000",
+		"requiredDate": "1997-12-31 00:00:00.000",
+		"shippedDate": "1997-12-08 00:00:00.000",
+		"shipVia": 3,
+		"freight": 145.45,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 3,
+				"unitPrice": 10,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 130,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10766,
+		"customerID": "OTTIK",
+		"employeeID": 4,
+		"orderDate": "1997-12-05 00:00:00.000",
+		"requiredDate": "1998-01-02 00:00:00.000",
+		"shippedDate": "1997-12-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 157.55,
+		"shipName": "Ottilies Käseladen",
+		"shipAddress": {
+			"street": "Mehrheimerstr. 369",
+			"city": "Köln",
+			"region": "NULL",
+			"postalCode": 50739,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10760,
+		"customerID": "MAISD",
+		"employeeID": 4,
+		"orderDate": "1997-12-01 00:00:00.000",
+		"requiredDate": "1997-12-29 00:00:00.000",
+		"shippedDate": "1997-12-10 00:00:00.000",
+		"shipVia": 1,
+		"freight": 155.64,
+		"shipName": "Maison Dewey",
+		"shipAddress": {
+			"street": "Rue Joseph-Bens 532",
+			"city": "Bruxelles",
+			"region": "NULL",
+			"postalCode": "B-1180",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 30,
+				"discount": 0.25
+			},
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 12,
+				"discount": 0.25
+			},
+			{
+				"productID": 27,
+				"unitPrice": 43.9,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10768,
+		"customerID": "AROUT",
+		"employeeID": 3,
+		"orderDate": "1997-12-08 00:00:00.000",
+		"requiredDate": "1998-01-05 00:00:00.000",
+		"shippedDate": "1997-12-15 00:00:00.000",
+		"shipVia": 2,
+		"freight": 146.32,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10759,
+		"customerID": "ANATR",
+		"employeeID": 3,
+		"orderDate": "1997-11-28 00:00:00.000",
+		"requiredDate": "1997-12-26 00:00:00.000",
+		"shippedDate": "1997-12-12 00:00:00.000",
+		"shipVia": 3,
+		"freight": 11.99,
+		"shipName": "Ana Trujillo Emparedados y helados",
+		"shipAddress": {
+			"street": "Avda. de la Constitución 2222",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5021,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 32,
+				"unitPrice": 32,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10769,
+		"customerID": "VAFFE",
+		"employeeID": 3,
+		"orderDate": "1997-12-08 00:00:00.000",
+		"requiredDate": "1998-01-05 00:00:00.000",
+		"shippedDate": "1997-12-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 65.06,
+		"shipName": "Vaffeljernet",
+		"shipAddress": {
+			"street": "Smagsloget 45",
+			"city": "Århus",
+			"region": "NULL",
+			"postalCode": 8200,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 30,
+				"discount": 0.05
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 15,
+				"discount": 0.05
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10772,
+		"customerID": "LEHMS",
+		"employeeID": 3,
+		"orderDate": "1997-12-10 00:00:00.000",
+		"requiredDate": "1998-01-07 00:00:00.000",
+		"shippedDate": "1997-12-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 91.28,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 18,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10758,
+		"customerID": "RICSU",
+		"employeeID": 3,
+		"orderDate": "1997-11-28 00:00:00.000",
+		"requiredDate": "1997-12-26 00:00:00.000",
+		"shippedDate": "1997-12-04 00:00:00.000",
+		"shipVia": 3,
+		"freight": 138.17,
+		"shipName": "Richter Supermarkt",
+		"shipAddress": {
+			"street": "Starenweg 5",
+			"city": "Genève",
+			"region": "NULL",
+			"postalCode": 1204,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 60,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10773,
+		"customerID": "ERNSH",
+		"employeeID": 1,
+		"orderDate": "1997-12-11 00:00:00.000",
+		"requiredDate": "1998-01-08 00:00:00.000",
+		"shippedDate": "1997-12-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 96.43,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 33,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 70,
+				"discount": 0.2
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 7,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10775,
+		"customerID": "THECR",
+		"employeeID": 7,
+		"orderDate": "1997-12-12 00:00:00.000",
+		"requiredDate": "1998-01-09 00:00:00.000",
+		"shippedDate": "1997-12-26 00:00:00.000",
+		"shipVia": 1,
+		"freight": 20.25,
+		"shipName": "The Cracker Box",
+		"shipAddress": {
+			"street": "55 Grizzly Peak Rd.",
+			"city": "Butte",
+			"region": "MT",
+			"postalCode": 59801,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 67,
+				"unitPrice": 14,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10774,
+		"customerID": "FOLKO",
+		"employeeID": 4,
+		"orderDate": "1997-12-11 00:00:00.000",
+		"requiredDate": "1997-12-25 00:00:00.000",
+		"shippedDate": "1997-12-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 48.2,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 2,
+				"discount": 0.25
+			},
+			{
+				"productID": 66,
+				"unitPrice": 17,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10779,
+		"customerID": "MORGK",
+		"employeeID": 3,
+		"orderDate": "1997-12-16 00:00:00.000",
+		"requiredDate": "1998-01-13 00:00:00.000",
+		"shippedDate": "1998-01-14 00:00:00.000",
+		"shipVia": 2,
+		"freight": 58.13,
+		"shipName": "Morgenstern Gesundkost",
+		"shipAddress": {
+			"street": "Heerstr. 22",
+			"city": "Leipzig",
+			"region": "NULL",
+			"postalCode": 4179,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10780,
+		"customerID": "LILAS",
+		"employeeID": 2,
+		"orderDate": "1997-12-16 00:00:00.000",
+		"requiredDate": "1997-12-30 00:00:00.000",
+		"shippedDate": "1997-12-25 00:00:00.000",
+		"shipVia": 1,
+		"freight": 42.13,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10781,
+		"customerID": "WARTH",
+		"employeeID": 2,
+		"orderDate": "1997-12-17 00:00:00.000",
+		"requiredDate": "1998-01-14 00:00:00.000",
+		"shippedDate": "1997-12-19 00:00:00.000",
+		"shipVia": 3,
+		"freight": 73.16,
+		"shipName": "Wartian Herkku",
+		"shipAddress": {
+			"street": "Torikatu 38",
+			"city": "Oulu",
+			"region": "NULL",
+			"postalCode": 90110,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 3,
+				"discount": 0.2
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 20,
+				"discount": 0.2
+			},
+			{
+				"productID": 74,
+				"unitPrice": 10,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10783,
+		"customerID": "HANAR",
+		"employeeID": 4,
+		"orderDate": "1997-12-18 00:00:00.000",
+		"requiredDate": "1998-01-15 00:00:00.000",
+		"shippedDate": "1997-12-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 124.98,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10784,
+		"customerID": "MAGAA",
+		"employeeID": 4,
+		"orderDate": "1997-12-18 00:00:00.000",
+		"requiredDate": "1998-01-15 00:00:00.000",
+		"shippedDate": "1997-12-22 00:00:00.000",
+		"shipVia": 3,
+		"freight": 70.09,
+		"shipName": "Magazzini Alimentari Riuniti",
+		"shipAddress": {
+			"street": "Via Ludovico il Moro 22",
+			"city": "Bergamo",
+			"region": "NULL",
+			"postalCode": 24100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 2,
+				"discount": 0.15
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 30,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10785,
+		"customerID": "GROSR",
+		"employeeID": 1,
+		"orderDate": "1997-12-18 00:00:00.000",
+		"requiredDate": "1998-01-15 00:00:00.000",
+		"shippedDate": "1997-12-24 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.51,
+		"shipName": "GROSELLA-Restaurante",
+		"shipAddress": {
+			"street": "5ª Ave. Los Palos Grandes",
+			"city": "Caracas",
+			"region": "DF",
+			"postalCode": 1081,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10786,
+		"customerID": "QUEEN",
+		"employeeID": 8,
+		"orderDate": "1997-12-19 00:00:00.000",
+		"requiredDate": "1998-01-16 00:00:00.000",
+		"shippedDate": "1997-12-23 00:00:00.000",
+		"shipVia": 1,
+		"freight": 110.87,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 8,
+				"unitPrice": 40,
+				"quantity": 30,
+				"discount": 0.2
+			},
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 15,
+				"discount": 0.2
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 42,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10776,
+		"customerID": "ERNSH",
+		"employeeID": 1,
+		"orderDate": "1997-12-15 00:00:00.000",
+		"requiredDate": "1998-01-12 00:00:00.000",
+		"shippedDate": "1997-12-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 351.53,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 16,
+				"discount": 0.05
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 12,
+				"discount": 0.05
+			},
+			{
+				"productID": 45,
+				"unitPrice": 9.5,
+				"quantity": 27,
+				"discount": 0.05
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 120,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10787,
+		"customerID": "LAMAI",
+		"employeeID": 2,
+		"orderDate": "1997-12-19 00:00:00.000",
+		"requiredDate": "1998-01-02 00:00:00.000",
+		"shippedDate": "1997-12-26 00:00:00.000",
+		"shipVia": 1,
+		"freight": 249.93,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 15,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10791,
+		"customerID": "FRANK",
+		"employeeID": 6,
+		"orderDate": "1997-12-23 00:00:00.000",
+		"requiredDate": "1998-01-20 00:00:00.000",
+		"shippedDate": "1998-01-01 00:00:00.000",
+		"shipVia": 2,
+		"freight": 16.85,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 14,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10792,
+		"customerID": "WOLZA",
+		"employeeID": 1,
+		"orderDate": "1997-12-23 00:00:00.000",
+		"requiredDate": "1998-01-20 00:00:00.000",
+		"shippedDate": "1997-12-31 00:00:00.000",
+		"shipVia": 3,
+		"freight": 23.79,
+		"shipName": "Wolski Zajazd",
+		"shipAddress": {
+			"street": "ul. Filtrowa 68",
+			"city": "Warszawa",
+			"region": "NULL",
+			"postalCode": "01-012",
+			"country": "Poland"
+		},
+		"details": [
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10793,
+		"customerID": "AROUT",
+		"employeeID": 3,
+		"orderDate": "1997-12-24 00:00:00.000",
+		"requiredDate": "1998-01-21 00:00:00.000",
+		"shippedDate": "1998-01-08 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.52,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 8,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10794,
+		"customerID": "QUEDE",
+		"employeeID": 6,
+		"orderDate": "1997-12-24 00:00:00.000",
+		"requiredDate": "1998-01-21 00:00:00.000",
+		"shippedDate": "1998-01-02 00:00:00.000",
+		"shipVia": 1,
+		"freight": 21.49,
+		"shipName": "Que Delícia",
+		"shipAddress": {
+			"street": "Rua da Panificadora 12",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-673",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 14,
+				"unitPrice": 23.25,
+				"quantity": 15,
+				"discount": 0.2
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 6,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10790,
+		"customerID": "GOURL",
+		"employeeID": 6,
+		"orderDate": "1997-12-22 00:00:00.000",
+		"requiredDate": "1998-01-19 00:00:00.000",
+		"shippedDate": "1997-12-26 00:00:00.000",
+		"shipVia": 1,
+		"freight": 28.23,
+		"shipName": "Gourmet Lanchonetes",
+		"shipAddress": {
+			"street": "Av. Brasil 442",
+			"city": "Campinas",
+			"region": "SP",
+			"postalCode": "04876-786",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 3,
+				"discount": 0.15
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 20,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10796,
+		"customerID": "HILAA",
+		"employeeID": 3,
+		"orderDate": "1997-12-25 00:00:00.000",
+		"requiredDate": "1998-01-22 00:00:00.000",
+		"shippedDate": "1998-01-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 26.52,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 21,
+				"discount": 0.2
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 35,
+				"discount": 0.2
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 24,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10788,
+		"customerID": "QUICK",
+		"employeeID": 1,
+		"orderDate": "1997-12-22 00:00:00.000",
+		"requiredDate": "1998-01-19 00:00:00.000",
+		"shippedDate": "1998-01-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 42.7,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 50,
+				"discount": 0.05
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 40,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10789,
+		"customerID": "FOLIG",
+		"employeeID": 1,
+		"orderDate": "1997-12-22 00:00:00.000",
+		"requiredDate": "1998-01-19 00:00:00.000",
+		"shippedDate": "1997-12-31 00:00:00.000",
+		"shipVia": 2,
+		"freight": 100.6,
+		"shipName": "Folies gourmandes",
+		"shipAddress": {
+			"street": "184 chaussée de Tournai",
+			"city": "Lille",
+			"region": "NULL",
+			"postalCode": 59000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 63,
+				"unitPrice": 43.9,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10800,
+		"customerID": "SEVES",
+		"employeeID": 1,
+		"orderDate": "1997-12-26 00:00:00.000",
+		"requiredDate": "1998-01-23 00:00:00.000",
+		"shippedDate": "1998-01-05 00:00:00.000",
+		"shipVia": 3,
+		"freight": 137.44,
+		"shipName": "Seven Seas Imports",
+		"shipAddress": {
+			"street": "90 Wadhurst Rd.",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "OX15 4NB",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 50,
+				"discount": 0.1
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 10,
+				"discount": 0.1
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 7,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10801,
+		"customerID": "BOLID",
+		"employeeID": 4,
+		"orderDate": "1997-12-29 00:00:00.000",
+		"requiredDate": "1998-01-26 00:00:00.000",
+		"shippedDate": "1997-12-31 00:00:00.000",
+		"shipVia": 2,
+		"freight": 97.09,
+		"shipName": "Bólido Comidas preparadas",
+		"shipAddress": {
+			"street": "C/ Araquil 67",
+			"city": "Madrid",
+			"region": "NULL",
+			"postalCode": 28023,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 40,
+				"discount": 0.25
+			},
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 20,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10795,
+		"customerID": "ERNSH",
+		"employeeID": 8,
+		"orderDate": "1997-12-24 00:00:00.000",
+		"requiredDate": "1998-01-21 00:00:00.000",
+		"shippedDate": "1998-01-20 00:00:00.000",
+		"shipVia": 2,
+		"freight": 126.66,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 65,
+				"discount": 0
+			},
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 35,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10798,
+		"customerID": "ISLAT",
+		"employeeID": 2,
+		"orderDate": "1997-12-26 00:00:00.000",
+		"requiredDate": "1998-01-23 00:00:00.000",
+		"shippedDate": "1998-01-05 00:00:00.000",
+		"shipVia": 1,
+		"freight": 2.33,
+		"shipName": "Island Trading",
+		"shipAddress": {
+			"street": "Garden House Crowther Way",
+			"city": "Cowes",
+			"region": "Isle of Wight",
+			"postalCode": "PO31 7PJ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10799,
+		"customerID": "KOENE",
+		"employeeID": 9,
+		"orderDate": "1997-12-26 00:00:00.000",
+		"requiredDate": "1998-02-06 00:00:00.000",
+		"shippedDate": "1998-01-05 00:00:00.000",
+		"shipVia": 3,
+		"freight": 30.76,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 20,
+				"discount": 0.15
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 20,
+				"discount": 0.15
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10805,
+		"customerID": "THEBI",
+		"employeeID": 2,
+		"orderDate": "1997-12-30 00:00:00.000",
+		"requiredDate": "1998-01-27 00:00:00.000",
+		"shippedDate": "1998-01-09 00:00:00.000",
+		"shipVia": 3,
+		"freight": 237.34,
+		"shipName": "The Big Cheese",
+		"shipAddress": {
+			"street": "89 Jefferson Way Suite 2",
+			"city": "Portland",
+			"region": "OR",
+			"postalCode": 97201,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 34,
+				"unitPrice": 14,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10802,
+		"customerID": "SIMOB",
+		"employeeID": 4,
+		"orderDate": "1997-12-29 00:00:00.000",
+		"requiredDate": "1998-01-26 00:00:00.000",
+		"shippedDate": "1998-01-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 257.26,
+		"shipName": "Simons bistro",
+		"shipAddress": {
+			"street": "Vinbæltet 34",
+			"city": "Kobenhavn",
+			"region": "NULL",
+			"postalCode": 1734,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 25,
+				"discount": 0.25
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 30,
+				"discount": 0.25
+			},
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 60,
+				"discount": 0.25
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 5,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10803,
+		"customerID": "WELLI",
+		"employeeID": 4,
+		"orderDate": "1997-12-30 00:00:00.000",
+		"requiredDate": "1998-01-27 00:00:00.000",
+		"shippedDate": "1998-01-06 00:00:00.000",
+		"shipVia": 1,
+		"freight": 55.23,
+		"shipName": "Wellington Importadora",
+		"shipAddress": {
+			"street": "Rua do Mercado 12",
+			"city": "Resende",
+			"region": "SP",
+			"postalCode": "08737-363",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 24,
+				"discount": 0.05
+			},
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 15,
+				"discount": 0.05
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 15,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10808,
+		"customerID": "OLDWO",
+		"employeeID": 2,
+		"orderDate": "1998-01-01 00:00:00.000",
+		"requiredDate": "1998-01-29 00:00:00.000",
+		"shippedDate": "1998-01-09 00:00:00.000",
+		"shipVia": 3,
+		"freight": 45.53,
+		"shipName": "Old World Delicatessen",
+		"shipAddress": {
+			"street": "2743 Bering St.",
+			"city": "Anchorage",
+			"region": "AK",
+			"postalCode": 99508,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 20,
+				"discount": 0.15
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 50,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10810,
+		"customerID": "LAUGB",
+		"employeeID": 2,
+		"orderDate": "1998-01-01 00:00:00.000",
+		"requiredDate": "1998-01-29 00:00:00.000",
+		"shippedDate": "1998-01-07 00:00:00.000",
+		"shipVia": 3,
+		"freight": 4.33,
+		"shipName": "Laughing Bacchus Wine Cellars",
+		"shipAddress": {
+			"street": "2319 Elm St.",
+			"city": "Vancouver",
+			"region": "BC",
+			"postalCode": "V3F 2K1",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 7,
+				"discount": 0
+			},
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10811,
+		"customerID": "LINOD",
+		"employeeID": 8,
+		"orderDate": "1998-01-02 00:00:00.000",
+		"requiredDate": "1998-01-30 00:00:00.000",
+		"shippedDate": "1998-01-08 00:00:00.000",
+		"shipVia": 1,
+		"freight": 31.22,
+		"shipName": "LINO-Delicateses",
+		"shipAddress": {
+			"street": "Ave. 5 de Mayo Porlamar",
+			"city": "I. de Margarita",
+			"region": "Nueva Esparta",
+			"postalCode": 4980,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10804,
+		"customerID": "SEVES",
+		"employeeID": 6,
+		"orderDate": "1997-12-30 00:00:00.000",
+		"requiredDate": "1998-01-27 00:00:00.000",
+		"shippedDate": "1998-01-07 00:00:00.000",
+		"shipVia": 2,
+		"freight": 27.33,
+		"shipName": "Seven Seas Imports",
+		"shipAddress": {
+			"street": "90 Wadhurst Rd.",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "OX15 4NB",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 36,
+				"discount": 0
+			},
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 20,
+				"quantity": 4,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10814,
+		"customerID": "VICTE",
+		"employeeID": 3,
+		"orderDate": "1998-01-05 00:00:00.000",
+		"requiredDate": "1998-02-02 00:00:00.000",
+		"shippedDate": "1998-01-14 00:00:00.000",
+		"shipVia": 3,
+		"freight": 130.94,
+		"shipName": "Victuailles en stock",
+		"shipAddress": {
+			"street": "2 rue du Commerce",
+			"city": "Lyon",
+			"region": "NULL",
+			"postalCode": 69004,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 20,
+				"discount": 0.15
+			},
+			{
+				"productID": 48,
+				"unitPrice": 12.75,
+				"quantity": 8,
+				"discount": 0.15
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 30,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10812,
+		"customerID": "REGGC",
+		"employeeID": 5,
+		"orderDate": "1998-01-02 00:00:00.000",
+		"requiredDate": "1998-01-30 00:00:00.000",
+		"shippedDate": "1998-01-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 59.78,
+		"shipName": "Reggiani Caseifici",
+		"shipAddress": {
+			"street": "Strada Provinciale 124",
+			"city": "Reggio Emilia",
+			"region": "NULL",
+			"postalCode": 42100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 16,
+				"discount": 0.1
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 40,
+				"discount": 0.1
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10817,
+		"customerID": "KOENE",
+		"employeeID": 3,
+		"orderDate": "1998-01-06 00:00:00.000",
+		"requiredDate": "1998-01-20 00:00:00.000",
+		"shippedDate": "1998-01-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 306.07,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 40,
+				"discount": 0.15
+			},
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 60,
+				"discount": 0.15
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 25,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10806,
+		"customerID": "VICTE",
+		"employeeID": 3,
+		"orderDate": "1997-12-31 00:00:00.000",
+		"requiredDate": "1998-01-28 00:00:00.000",
+		"shippedDate": "1998-01-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 22.11,
+		"shipName": "Victuailles en stock",
+		"shipAddress": {
+			"street": "2 rue du Commerce",
+			"city": "Lyon",
+			"region": "NULL",
+			"postalCode": 69004,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 20,
+				"discount": 0.25
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 74,
+				"unitPrice": 10,
+				"quantity": 15,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10816,
+		"customerID": "GREAL",
+		"employeeID": 4,
+		"orderDate": "1998-01-06 00:00:00.000",
+		"requiredDate": "1998-02-03 00:00:00.000",
+		"shippedDate": "1998-02-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 719.78,
+		"shipName": "Great Lakes Food Market",
+		"shipAddress": {
+			"street": "2732 Baker Blvd.",
+			"city": "Eugene",
+			"region": "OR",
+			"postalCode": 97403,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 30,
+				"discount": 0.05
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10813,
+		"customerID": "RICAR",
+		"employeeID": 1,
+		"orderDate": "1998-01-05 00:00:00.000",
+		"requiredDate": "1998-02-02 00:00:00.000",
+		"shippedDate": "1998-01-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 47.38,
+		"shipName": "Ricardo Adocicados",
+		"shipAddress": {
+			"street": "Av. Copacabana 267",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-890",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 12,
+				"discount": 0.2
+			},
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10818,
+		"customerID": "MAGAA",
+		"employeeID": 7,
+		"orderDate": "1998-01-07 00:00:00.000",
+		"requiredDate": "1998-02-04 00:00:00.000",
+		"shippedDate": "1998-01-12 00:00:00.000",
+		"shipVia": 3,
+		"freight": 65.48,
+		"shipName": "Magazzini Alimentari Riuniti",
+		"shipAddress": {
+			"street": "Via Ludovico il Moro 22",
+			"city": "Bergamo",
+			"region": "NULL",
+			"postalCode": 24100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 32,
+				"unitPrice": 32,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10819,
+		"customerID": "CACTU",
+		"employeeID": 2,
+		"orderDate": "1998-01-07 00:00:00.000",
+		"requiredDate": "1998-02-04 00:00:00.000",
+		"shippedDate": "1998-01-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 19.76,
+		"shipName": "Cactus Comidas para llevar",
+		"shipAddress": {
+			"street": "Cerrito 333",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 7,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10821,
+		"customerID": "SPLIR",
+		"employeeID": 1,
+		"orderDate": "1998-01-08 00:00:00.000",
+		"requiredDate": "1998-02-05 00:00:00.000",
+		"shippedDate": "1998-01-15 00:00:00.000",
+		"shipVia": 1,
+		"freight": 36.68,
+		"shipName": "Split Rail Beer & Ale",
+		"shipAddress": {
+			"street": "P.O. Box 555",
+			"city": "Lander",
+			"region": "WY",
+			"postalCode": 82520,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10822,
+		"customerID": "TRAIH",
+		"employeeID": 6,
+		"orderDate": "1998-01-08 00:00:00.000",
+		"requiredDate": "1998-02-05 00:00:00.000",
+		"shippedDate": "1998-01-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 7,
+		"shipName": "Trail's Head Gourmet Provisioners",
+		"shipAddress": {
+			"street": "722 DaVinci Blvd.",
+			"city": "Kirkland",
+			"region": "WA",
+			"postalCode": 98034,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10823,
+		"customerID": "LILAS",
+		"employeeID": 5,
+		"orderDate": "1998-01-09 00:00:00.000",
+		"requiredDate": "1998-02-06 00:00:00.000",
+		"shippedDate": "1998-01-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 163.97,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 40,
+				"discount": 0.1
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 15,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10824,
+		"customerID": "FOLKO",
+		"employeeID": 8,
+		"orderDate": "1998-01-09 00:00:00.000",
+		"requiredDate": "1998-02-06 00:00:00.000",
+		"shippedDate": "1998-01-30 00:00:00.000",
+		"shipVia": 1,
+		"freight": 1.23,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 9,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10825,
+		"customerID": "DRACD",
+		"employeeID": 1,
+		"orderDate": "1998-01-09 00:00:00.000",
+		"requiredDate": "1998-02-06 00:00:00.000",
+		"shippedDate": "1998-01-14 00:00:00.000",
+		"shipVia": 1,
+		"freight": 79.25,
+		"shipName": "Drachenblut Delikatessen",
+		"shipAddress": {
+			"street": "Walserweg 21",
+			"city": "Aachen",
+			"region": "NULL",
+			"postalCode": 52066,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10826,
+		"customerID": "BLONP",
+		"employeeID": 6,
+		"orderDate": "1998-01-12 00:00:00.000",
+		"requiredDate": "1998-02-09 00:00:00.000",
+		"shippedDate": "1998-02-06 00:00:00.000",
+		"shipVia": 1,
+		"freight": 7.09,
+		"shipName": "Blondel père et fils",
+		"shipAddress": {
+			"street": "24 place Kléber",
+			"city": "Strasbourg",
+			"region": "NULL",
+			"postalCode": 67000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10827,
+		"customerID": "BONAP",
+		"employeeID": 1,
+		"orderDate": "1998-01-12 00:00:00.000",
+		"requiredDate": "1998-01-26 00:00:00.000",
+		"shippedDate": "1998-02-06 00:00:00.000",
+		"shipVia": 2,
+		"freight": 63.54,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10828,
+		"customerID": "RANCH",
+		"employeeID": 9,
+		"orderDate": "1998-01-13 00:00:00.000",
+		"requiredDate": "1998-01-27 00:00:00.000",
+		"shippedDate": "1998-02-04 00:00:00.000",
+		"shipVia": 1,
+		"freight": 90.85,
+		"shipName": "Rancho grande",
+		"shipAddress": {
+			"street": "Av. del Libertador 900",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 20,
+				"unitPrice": 81,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 2,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10829,
+		"customerID": "ISLAT",
+		"employeeID": 9,
+		"orderDate": "1998-01-13 00:00:00.000",
+		"requiredDate": "1998-02-10 00:00:00.000",
+		"shippedDate": "1998-01-23 00:00:00.000",
+		"shipVia": 1,
+		"freight": 154.72,
+		"shipName": "Island Trading",
+		"shipAddress": {
+			"street": "Garden House Crowther Way",
+			"city": "Cowes",
+			"region": "Isle of Wight",
+			"postalCode": "PO31 7PJ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 8,
+				"unitPrice": 40,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10830,
+		"customerID": "TRADH",
+		"employeeID": 4,
+		"orderDate": "1998-01-13 00:00:00.000",
+		"requiredDate": "1998-02-24 00:00:00.000",
+		"shippedDate": "1998-01-21 00:00:00.000",
+		"shipVia": 2,
+		"freight": 81.83,
+		"shipName": "Tradiçao Hipermercados",
+		"shipAddress": {
+			"street": "Av. Inês de Castro 414",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05634-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 6,
+				"unitPrice": 25,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 28,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 24,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10831,
+		"customerID": "SANTG",
+		"employeeID": 3,
+		"orderDate": "1998-01-14 00:00:00.000",
+		"requiredDate": "1998-02-11 00:00:00.000",
+		"shippedDate": "1998-01-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 72.19,
+		"shipName": "Santé Gourmet",
+		"shipAddress": {
+			"street": "Erling Skakkes gate 78",
+			"city": "Stavern",
+			"region": "NULL",
+			"postalCode": 4110,
+			"country": "Norway"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 9,
+				"discount": 0
+			},
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 8,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10832,
+		"customerID": "LAMAI",
+		"employeeID": 2,
+		"orderDate": "1998-01-14 00:00:00.000",
+		"requiredDate": "1998-02-11 00:00:00.000",
+		"shippedDate": "1998-01-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 43.26,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 3,
+				"discount": 0.2
+			},
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 10,
+				"discount": 0.2
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 16,
+				"discount": 0.2
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10833,
+		"customerID": "OTTIK",
+		"employeeID": 6,
+		"orderDate": "1998-01-15 00:00:00.000",
+		"requiredDate": "1998-02-12 00:00:00.000",
+		"shippedDate": "1998-01-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 71.49,
+		"shipName": "Ottilies Käseladen",
+		"shipAddress": {
+			"street": "Mehrheimerstr. 369",
+			"city": "Köln",
+			"region": "NULL",
+			"postalCode": 50739,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 9,
+				"discount": 0.1
+			},
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 9,
+				"discount": 0.1
+			},
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 20,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10834,
+		"customerID": "TRADH",
+		"employeeID": 1,
+		"orderDate": "1998-01-15 00:00:00.000",
+		"requiredDate": "1998-02-12 00:00:00.000",
+		"shippedDate": "1998-01-19 00:00:00.000",
+		"shipVia": 3,
+		"freight": 29.78,
+		"shipName": "Tradiçao Hipermercados",
+		"shipAddress": {
+			"street": "Av. Inês de Castro 414",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05634-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 8,
+				"discount": 0.05
+			},
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 20,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10838,
+		"customerID": "LINOD",
+		"employeeID": 3,
+		"orderDate": "1998-01-19 00:00:00.000",
+		"requiredDate": "1998-02-16 00:00:00.000",
+		"shippedDate": "1998-01-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 59.28,
+		"shipName": "LINO-Delicateses",
+		"shipAddress": {
+			"street": "Ave. 5 de Mayo Porlamar",
+			"city": "I. de Margarita",
+			"region": "Nueva Esparta",
+			"postalCode": 4980,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 4,
+				"discount": 0.25
+			},
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 25,
+				"discount": 0.25
+			},
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 50,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10839,
+		"customerID": "TRADH",
+		"employeeID": 3,
+		"orderDate": "1998-01-19 00:00:00.000",
+		"requiredDate": "1998-02-16 00:00:00.000",
+		"shippedDate": "1998-01-22 00:00:00.000",
+		"shipVia": 3,
+		"freight": 35.43,
+		"shipName": "Tradiçao Hipermercados",
+		"shipAddress": {
+			"street": "Av. Inês de Castro 414",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05634-030",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 15,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10840,
+		"customerID": "LINOD",
+		"employeeID": 4,
+		"orderDate": "1998-01-19 00:00:00.000",
+		"requiredDate": "1998-03-02 00:00:00.000",
+		"shippedDate": "1998-02-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 2.71,
+		"shipName": "LINO-Delicateses",
+		"shipAddress": {
+			"street": "Ave. 5 de Mayo Porlamar",
+			"city": "I. de Margarita",
+			"region": "Nueva Esparta",
+			"postalCode": 4980,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 6,
+				"discount": 0.2
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10841,
+		"customerID": "SUPRD",
+		"employeeID": 5,
+		"orderDate": "1998-01-20 00:00:00.000",
+		"requiredDate": "1998-02-17 00:00:00.000",
+		"shippedDate": "1998-01-29 00:00:00.000",
+		"shipVia": 2,
+		"freight": 424.3,
+		"shipName": "Suprêmes délices",
+		"shipAddress": {
+			"street": "Boulevard Tirou 255",
+			"city": "Charleroi",
+			"region": "NULL",
+			"postalCode": "B-6000",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 16,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10842,
+		"customerID": "TORTU",
+		"employeeID": 1,
+		"orderDate": "1998-01-20 00:00:00.000",
+		"requiredDate": "1998-02-17 00:00:00.000",
+		"shippedDate": "1998-01-29 00:00:00.000",
+		"shipVia": 3,
+		"freight": 54.42,
+		"shipName": "Tortuga Restaurante",
+		"shipAddress": {
+			"street": "Avda. Azteca 123",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 12,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10836,
+		"customerID": "ERNSH",
+		"employeeID": 7,
+		"orderDate": "1998-01-16 00:00:00.000",
+		"requiredDate": "1998-02-13 00:00:00.000",
+		"shippedDate": "1998-01-21 00:00:00.000",
+		"shipVia": 1,
+		"freight": 411.88,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 52,
+				"discount": 0
+			},
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10835,
+		"customerID": "ALFKI",
+		"employeeID": 1,
+		"orderDate": "1998-01-15 00:00:00.000",
+		"requiredDate": "1998-02-12 00:00:00.000",
+		"shippedDate": "1998-01-21 00:00:00.000",
+		"shipVia": 3,
+		"freight": 69.53,
+		"shipName": "Alfred's Futterkiste",
+		"shipAddress": {
+			"street": "Obere Str. 57",
+			"city": "Berlin",
+			"region": "NULL",
+			"postalCode": 12209,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 2,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10837,
+		"customerID": "BERGS",
+		"employeeID": 9,
+		"orderDate": "1998-01-16 00:00:00.000",
+		"requiredDate": "1998-02-13 00:00:00.000",
+		"shippedDate": "1998-01-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 13.32,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 21,
+				"discount": 0.25
+			},
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 40,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10845,
+		"customerID": "QUICK",
+		"employeeID": 8,
+		"orderDate": "1998-01-21 00:00:00.000",
+		"requiredDate": "1998-02-04 00:00:00.000",
+		"shippedDate": "1998-01-30 00:00:00.000",
+		"shipVia": 1,
+		"freight": 212.98,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 70,
+				"discount": 0.1
+			},
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 25,
+				"discount": 0.1
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 42,
+				"discount": 0.1
+			},
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 60,
+				"discount": 0.1
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 48,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10848,
+		"customerID": "CONSH",
+		"employeeID": 7,
+		"orderDate": "1998-01-23 00:00:00.000",
+		"requiredDate": "1998-02-20 00:00:00.000",
+		"shippedDate": "1998-01-29 00:00:00.000",
+		"shipVia": 2,
+		"freight": 38.24,
+		"shipName": "Consolidated Holdings",
+		"shipAddress": {
+			"street": "Berkeley Gardens 12  Brewery",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "WX1 6LT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 9,
+				"unitPrice": 97,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 5,
+				"unitPrice": 21.35,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10850,
+		"customerID": "VICTE",
+		"employeeID": 1,
+		"orderDate": "1998-01-23 00:00:00.000",
+		"requiredDate": "1998-03-06 00:00:00.000",
+		"shippedDate": "1998-01-30 00:00:00.000",
+		"shipVia": 1,
+		"freight": 49.19,
+		"shipName": "Victuailles en stock",
+		"shipAddress": {
+			"street": "2 rue du Commerce",
+			"city": "Lyon",
+			"region": "NULL",
+			"postalCode": 69004,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 20,
+				"discount": 0.15
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 4,
+				"discount": 0.15
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 30,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10847,
+		"customerID": "SAVEA",
+		"employeeID": 4,
+		"orderDate": "1998-01-22 00:00:00.000",
+		"requiredDate": "1998-02-05 00:00:00.000",
+		"shippedDate": "1998-02-10 00:00:00.000",
+		"shipVia": 3,
+		"freight": 487.57,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 80,
+				"discount": 0.2
+			},
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 12,
+				"discount": 0.2
+			},
+			{
+				"productID": 37,
+				"unitPrice": 26,
+				"quantity": 60,
+				"discount": 0.2
+			},
+			{
+				"productID": 45,
+				"unitPrice": 9.5,
+				"quantity": 36,
+				"discount": 0.2
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 45,
+				"discount": 0.2
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 55,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10846,
+		"customerID": "SUPRD",
+		"employeeID": 2,
+		"orderDate": "1998-01-22 00:00:00.000",
+		"requiredDate": "1998-03-05 00:00:00.000",
+		"shippedDate": "1998-01-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 56.46,
+		"shipName": "Suprêmes délices",
+		"shipAddress": {
+			"street": "Boulevard Tirou 255",
+			"city": "Charleroi",
+			"region": "NULL",
+			"postalCode": "B-6000",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 74,
+				"unitPrice": 10,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10849,
+		"customerID": "KOENE",
+		"employeeID": 9,
+		"orderDate": "1998-01-23 00:00:00.000",
+		"requiredDate": "1998-02-20 00:00:00.000",
+		"shippedDate": "1998-01-30 00:00:00.000",
+		"shipVia": 2,
+		"freight": 0.56,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 3,
+				"unitPrice": 10,
+				"quantity": 49,
+				"discount": 0
+			},
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 18,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10851,
+		"customerID": "RICAR",
+		"employeeID": 5,
+		"orderDate": "1998-01-26 00:00:00.000",
+		"requiredDate": "1998-02-23 00:00:00.000",
+		"shippedDate": "1998-02-02 00:00:00.000",
+		"shipVia": 1,
+		"freight": 160.55,
+		"shipName": "Ricardo Adocicados",
+		"shipAddress": {
+			"street": "Av. Copacabana 267",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-890",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 10,
+				"discount": 0.05
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 10,
+				"discount": 0.05
+			},
+			{
+				"productID": 59,
+				"unitPrice": 55,
+				"quantity": 42,
+				"discount": 0.05
+			},
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 5,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10852,
+		"customerID": "RATTC",
+		"employeeID": 8,
+		"orderDate": "1998-01-26 00:00:00.000",
+		"requiredDate": "1998-02-09 00:00:00.000",
+		"shippedDate": "1998-01-30 00:00:00.000",
+		"shipVia": 1,
+		"freight": 174.05,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10854,
+		"customerID": "ERNSH",
+		"employeeID": 3,
+		"orderDate": "1998-01-27 00:00:00.000",
+		"requiredDate": "1998-02-24 00:00:00.000",
+		"shippedDate": "1998-02-05 00:00:00.000",
+		"shipVia": 2,
+		"freight": 100.22,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 100,
+				"discount": 0.15
+			},
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 65,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10855,
+		"customerID": "OLDWO",
+		"employeeID": 3,
+		"orderDate": "1998-01-27 00:00:00.000",
+		"requiredDate": "1998-02-24 00:00:00.000",
+		"shippedDate": "1998-02-04 00:00:00.000",
+		"shipVia": 1,
+		"freight": 170.97,
+		"shipName": "Old World Delicatessen",
+		"shipAddress": {
+			"street": "2743 Bering St.",
+			"city": "Anchorage",
+			"region": "AK",
+			"postalCode": 99508,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 14,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 15,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10856,
+		"customerID": "ANTON",
+		"employeeID": 3,
+		"orderDate": "1998-01-28 00:00:00.000",
+		"requiredDate": "1998-02-25 00:00:00.000",
+		"shippedDate": "1998-02-10 00:00:00.000",
+		"shipVia": 2,
+		"freight": 58.43,
+		"shipName": "Antonio Moreno Taquería",
+		"shipAddress": {
+			"street": "Mataderos  2312",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5023,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10857,
+		"customerID": "BERGS",
+		"employeeID": 8,
+		"orderDate": "1998-01-28 00:00:00.000",
+		"requiredDate": "1998-02-25 00:00:00.000",
+		"shippedDate": "1998-02-06 00:00:00.000",
+		"shipVia": 2,
+		"freight": 188.85,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 3,
+				"unitPrice": 10,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 35,
+				"discount": 0.25
+			},
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 10,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10858,
+		"customerID": "LACOR",
+		"employeeID": 2,
+		"orderDate": "1998-01-29 00:00:00.000",
+		"requiredDate": "1998-02-26 00:00:00.000",
+		"shippedDate": "1998-02-03 00:00:00.000",
+		"shipVia": 1,
+		"freight": 52.51,
+		"shipName": "La corne d'abondance",
+		"shipAddress": {
+			"street": "67 avenue de l'Europe",
+			"city": "Versailles",
+			"region": "NULL",
+			"postalCode": 78000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 27,
+				"unitPrice": 43.9,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 4,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10859,
+		"customerID": "FRANK",
+		"employeeID": 1,
+		"orderDate": "1998-01-29 00:00:00.000",
+		"requiredDate": "1998-02-26 00:00:00.000",
+		"shippedDate": "1998-02-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 76.1,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 40,
+				"discount": 0.25
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 35,
+				"discount": 0.25
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 30,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10860,
+		"customerID": "FRANR",
+		"employeeID": 3,
+		"orderDate": "1998-01-29 00:00:00.000",
+		"requiredDate": "1998-02-26 00:00:00.000",
+		"shippedDate": "1998-02-04 00:00:00.000",
+		"shipVia": 3,
+		"freight": 19.26,
+		"shipName": "France restauration",
+		"shipAddress": {
+			"street": "54 rue Royale",
+			"city": "Nantes",
+			"region": "NULL",
+			"postalCode": 44000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10861,
+		"customerID": "WHITC",
+		"employeeID": 4,
+		"orderDate": "1998-01-30 00:00:00.000",
+		"requiredDate": "1998-02-27 00:00:00.000",
+		"shippedDate": "1998-02-17 00:00:00.000",
+		"shipVia": 2,
+		"freight": 14.93,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 42,
+				"discount": 0
+			},
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10862,
+		"customerID": "LEHMS",
+		"employeeID": 8,
+		"orderDate": "1998-01-30 00:00:00.000",
+		"requiredDate": "1998-03-13 00:00:00.000",
+		"shippedDate": "1998-02-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 53.23,
+		"shipName": "Lehmanns Marktstand",
+		"shipAddress": {
+			"street": "Magazinweg 7",
+			"city": "Frankfurt a.M.",
+			"region": "NULL",
+			"postalCode": 60528,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 8,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10863,
+		"customerID": "HILAA",
+		"employeeID": 4,
+		"orderDate": "1998-02-02 00:00:00.000",
+		"requiredDate": "1998-03-02 00:00:00.000",
+		"shippedDate": "1998-02-17 00:00:00.000",
+		"shipVia": 2,
+		"freight": 30.26,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0.15
+			},
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 12,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10864,
+		"customerID": "AROUT",
+		"employeeID": 4,
+		"orderDate": "1998-02-02 00:00:00.000",
+		"requiredDate": "1998-03-02 00:00:00.000",
+		"shippedDate": "1998-02-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.04,
+		"shipName": "Around the Horn",
+		"shipAddress": {
+			"street": "Brook Farm Stratford St. Mary",
+			"city": "Colchester",
+			"region": "Essex",
+			"postalCode": "CO7 6JX",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 4,
+				"discount": 0
+			},
+			{
+				"productID": 67,
+				"unitPrice": 14,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10865,
+		"customerID": "QUICK",
+		"employeeID": 2,
+		"orderDate": "1998-02-02 00:00:00.000",
+		"requiredDate": "1998-02-16 00:00:00.000",
+		"shippedDate": "1998-02-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 348.14,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 60,
+				"discount": 0.05
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 80,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10869,
+		"customerID": "SEVES",
+		"employeeID": 5,
+		"orderDate": "1998-02-04 00:00:00.000",
+		"requiredDate": "1998-03-04 00:00:00.000",
+		"shippedDate": "1998-02-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 143.28,
+		"shipName": "Seven Seas Imports",
+		"shipAddress": {
+			"street": "90 Wadhurst Rd.",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "OX15 4NB",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 50,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10870,
+		"customerID": "WOLZA",
+		"employeeID": 5,
+		"orderDate": "1998-02-04 00:00:00.000",
+		"requiredDate": "1998-03-04 00:00:00.000",
+		"shippedDate": "1998-02-13 00:00:00.000",
+		"shipVia": 3,
+		"freight": 12.04,
+		"shipName": "Wolski Zajazd",
+		"shipAddress": {
+			"street": "ul. Filtrowa 68",
+			"city": "Warszawa",
+			"region": "NULL",
+			"postalCode": "01-012",
+			"country": "Poland"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 3,
+				"discount": 0
+			},
+			{
+				"productID": 51,
+				"unitPrice": 53,
+				"quantity": 2,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10871,
+		"customerID": "BONAP",
+		"employeeID": 9,
+		"orderDate": "1998-02-05 00:00:00.000",
+		"requiredDate": "1998-03-05 00:00:00.000",
+		"shippedDate": "1998-02-10 00:00:00.000",
+		"shipVia": 2,
+		"freight": 112.27,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 6,
+				"unitPrice": 25,
+				"quantity": 50,
+				"discount": 0.05
+			},
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 12,
+				"discount": 0.05
+			},
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 16,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10872,
+		"customerID": "GODOS",
+		"employeeID": 5,
+		"orderDate": "1998-02-05 00:00:00.000",
+		"requiredDate": "1998-03-05 00:00:00.000",
+		"shippedDate": "1998-02-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 175.32,
+		"shipName": "Godos Cocina Típica",
+		"shipAddress": {
+			"street": "C/ Romero 33",
+			"city": "Sevilla",
+			"region": "NULL",
+			"postalCode": 41101,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 10,
+				"discount": 0.05
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 21,
+				"discount": 0.05
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 15,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10873,
+		"customerID": "WILMK",
+		"employeeID": 4,
+		"orderDate": "1998-02-06 00:00:00.000",
+		"requiredDate": "1998-03-06 00:00:00.000",
+		"shippedDate": "1998-02-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 0.82,
+		"shipName": "Wilman Kala",
+		"shipAddress": {
+			"street": "Keskuskatu 45",
+			"city": "Helsinki",
+			"region": "NULL",
+			"postalCode": 21240,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 3,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10866,
+		"customerID": "BERGS",
+		"employeeID": 5,
+		"orderDate": "1998-02-03 00:00:00.000",
+		"requiredDate": "1998-03-03 00:00:00.000",
+		"shippedDate": "1998-02-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 109.11,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 21,
+				"discount": 0.25
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 6,
+				"discount": 0.25
+			},
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 40,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10876,
+		"customerID": "BONAP",
+		"employeeID": 7,
+		"orderDate": "1998-02-09 00:00:00.000",
+		"requiredDate": "1998-03-09 00:00:00.000",
+		"shippedDate": "1998-02-12 00:00:00.000",
+		"shipVia": 3,
+		"freight": 60.42,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 64,
+				"unitPrice": 33.25,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10877,
+		"customerID": "RICAR",
+		"employeeID": 1,
+		"orderDate": "1998-02-09 00:00:00.000",
+		"requiredDate": "1998-03-09 00:00:00.000",
+		"shippedDate": "1998-02-19 00:00:00.000",
+		"shipVia": 1,
+		"freight": 38.06,
+		"shipName": "Ricardo Adocicados",
+		"shipAddress": {
+			"street": "Av. Copacabana 267",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "02389-890",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 30,
+				"discount": 0.25
+			},
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10868,
+		"customerID": "QUEEN",
+		"employeeID": 7,
+		"orderDate": "1998-02-04 00:00:00.000",
+		"requiredDate": "1998-03-04 00:00:00.000",
+		"shippedDate": "1998-02-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 191.27,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 26,
+				"unitPrice": 31.23,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 20,
+				"quantity": 42,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10875,
+		"customerID": "BERGS",
+		"employeeID": 4,
+		"orderDate": "1998-02-06 00:00:00.000",
+		"requiredDate": "1998-03-06 00:00:00.000",
+		"shippedDate": "1998-03-03 00:00:00.000",
+		"shipVia": 2,
+		"freight": 32.37,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 20,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 21,
+				"discount": 0.1
+			}
+		]
+	},
+	{
+		"orderID": 10882,
+		"customerID": "SAVEA",
+		"employeeID": 4,
+		"orderDate": "1998-02-11 00:00:00.000",
+		"requiredDate": "1998-03-11 00:00:00.000",
+		"shippedDate": "1998-02-20 00:00:00.000",
+		"shipVia": 3,
+		"freight": 23.1,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 20,
+				"quantity": 20,
+				"discount": 0.15
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 32,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10884,
+		"customerID": "LETSS",
+		"employeeID": 4,
+		"orderDate": "1998-02-12 00:00:00.000",
+		"requiredDate": "1998-03-12 00:00:00.000",
+		"shippedDate": "1998-02-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 90.97,
+		"shipName": "Let's Stop N Shop",
+		"shipAddress": {
+			"street": "87 Polk St. Suite 5",
+			"city": "San Francisco",
+			"region": "CA",
+			"postalCode": 94117,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 21,
+				"discount": 0.05
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 12,
+				"discount": 0.05
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 40,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10885,
+		"customerID": "SUPRD",
+		"employeeID": 6,
+		"orderDate": "1998-02-12 00:00:00.000",
+		"requiredDate": "1998-03-12 00:00:00.000",
+		"shippedDate": "1998-02-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 5.64,
+		"shipName": "Suprêmes délices",
+		"shipAddress": {
+			"street": "Boulevard Tirou 255",
+			"city": "Charleroi",
+			"region": "NULL",
+			"postalCode": "B-6000",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 25,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10886,
+		"customerID": "HANAR",
+		"employeeID": 1,
+		"orderDate": "1998-02-13 00:00:00.000",
+		"requiredDate": "1998-03-13 00:00:00.000",
+		"shippedDate": "1998-03-02 00:00:00.000",
+		"shipVia": 1,
+		"freight": 4.99,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 70,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10880,
+		"customerID": "FOLKO",
+		"employeeID": 7,
+		"orderDate": "1998-02-10 00:00:00.000",
+		"requiredDate": "1998-03-24 00:00:00.000",
+		"shippedDate": "1998-02-18 00:00:00.000",
+		"shipVia": 1,
+		"freight": 88.01,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 30,
+				"discount": 0.2
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 30,
+				"discount": 0.2
+			},
+			{
+				"productID": 70,
+				"unitPrice": 15,
+				"quantity": 50,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10879,
+		"customerID": "WILMK",
+		"employeeID": 3,
+		"orderDate": "1998-02-10 00:00:00.000",
+		"requiredDate": "1998-03-10 00:00:00.000",
+		"shippedDate": "1998-02-12 00:00:00.000",
+		"shipVia": 3,
+		"freight": 8.5,
+		"shipName": "Wilman Kala",
+		"shipAddress": {
+			"street": "Keskuskatu 45",
+			"city": "Helsinki",
+			"region": "NULL",
+			"postalCode": 21240,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10889,
+		"customerID": "RATTC",
+		"employeeID": 9,
+		"orderDate": "1998-02-16 00:00:00.000",
+		"requiredDate": "1998-03-16 00:00:00.000",
+		"shippedDate": "1998-02-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 280.61,
+		"shipName": "Rattlesnake Canyon Grocery",
+		"shipAddress": {
+			"street": "2817 Milton Dr.",
+			"city": "Albuquerque",
+			"region": "NM",
+			"postalCode": 87110,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 38,
+				"unitPrice": 263.5,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10890,
+		"customerID": "DUMON",
+		"employeeID": 7,
+		"orderDate": "1998-02-16 00:00:00.000",
+		"requiredDate": "1998-03-16 00:00:00.000",
+		"shippedDate": "1998-02-18 00:00:00.000",
+		"shipVia": 1,
+		"freight": 32.76,
+		"shipName": "Du monde entier",
+		"shipAddress": {
+			"street": "67 rue des Cinquante Otages",
+			"city": "Nantes",
+			"region": "NULL",
+			"postalCode": 44000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 34,
+				"unitPrice": 14,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 14,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10893,
+		"customerID": "KOENE",
+		"employeeID": 9,
+		"orderDate": "1998-02-18 00:00:00.000",
+		"requiredDate": "1998-03-18 00:00:00.000",
+		"shippedDate": "1998-02-20 00:00:00.000",
+		"shipVia": 2,
+		"freight": 77.78,
+		"shipName": "Königlich Essen",
+		"shipAddress": {
+			"street": "Maubelstr. 90",
+			"city": "Brandenburg",
+			"region": "NULL",
+			"postalCode": 14776,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 8,
+				"unitPrice": 40,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 35,
+				"discount": 0
+			},
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10894,
+		"customerID": "SAVEA",
+		"employeeID": 1,
+		"orderDate": "1998-02-18 00:00:00.000",
+		"requiredDate": "1998-03-18 00:00:00.000",
+		"shippedDate": "1998-02-20 00:00:00.000",
+		"shipVia": 1,
+		"freight": 116.13,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 28,
+				"discount": 0.05
+			},
+			{
+				"productID": 69,
+				"unitPrice": 36,
+				"quantity": 50,
+				"discount": 0.05
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 120,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10888,
+		"customerID": "GODOS",
+		"employeeID": 1,
+		"orderDate": "1998-02-16 00:00:00.000",
+		"requiredDate": "1998-03-16 00:00:00.000",
+		"shippedDate": "1998-02-23 00:00:00.000",
+		"shipVia": 2,
+		"freight": 51.87,
+		"shipName": "Godos Cocina Típica",
+		"shipAddress": {
+			"street": "C/ Romero 33",
+			"city": "Sevilla",
+			"region": "NULL",
+			"postalCode": 41101,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 18,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10898,
+		"customerID": "OCEAN",
+		"employeeID": 4,
+		"orderDate": "1998-02-20 00:00:00.000",
+		"requiredDate": "1998-03-20 00:00:00.000",
+		"shippedDate": "1998-03-06 00:00:00.000",
+		"shipVia": 2,
+		"freight": 1.27,
+		"shipName": "Océano Atlántico Ltda.",
+		"shipAddress": {
+			"street": "Ing. Gustavo Moncada 8585 Piso 20-A",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10899,
+		"customerID": "LILAS",
+		"employeeID": 5,
+		"orderDate": "1998-02-20 00:00:00.000",
+		"requiredDate": "1998-03-20 00:00:00.000",
+		"shippedDate": "1998-02-26 00:00:00.000",
+		"shipVia": 3,
+		"freight": 1.21,
+		"shipName": "LILA-Supermercado",
+		"shipAddress": {
+			"street": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
+			"city": "Barquisimeto",
+			"region": "Lara",
+			"postalCode": 3508,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 8,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10901,
+		"customerID": "HILAA",
+		"employeeID": 4,
+		"orderDate": "1998-02-23 00:00:00.000",
+		"requiredDate": "1998-03-23 00:00:00.000",
+		"shippedDate": "1998-02-26 00:00:00.000",
+		"shipVia": 1,
+		"freight": 62.09,
+		"shipName": "HILARION-Abastos",
+		"shipAddress": {
+			"street": "Carrera 22 con Ave. Carlos Soublette #8-35",
+			"city": "San Cristóbal",
+			"region": "Táchira",
+			"postalCode": 5022,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10902,
+		"customerID": "FOLKO",
+		"employeeID": 1,
+		"orderDate": "1998-02-23 00:00:00.000",
+		"requiredDate": "1998-03-23 00:00:00.000",
+		"shippedDate": "1998-03-03 00:00:00.000",
+		"shipVia": 1,
+		"freight": 44.15,
+		"shipName": "Folk och fä HB",
+		"shipAddress": {
+			"street": "Åkergatan 24",
+			"city": "Bräcke",
+			"region": "NULL",
+			"postalCode": "S-844 67",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 30,
+				"discount": 0.15
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 6,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10903,
+		"customerID": "HANAR",
+		"employeeID": 3,
+		"orderDate": "1998-02-24 00:00:00.000",
+		"requiredDate": "1998-03-24 00:00:00.000",
+		"shippedDate": "1998-03-04 00:00:00.000",
+		"shipVia": 3,
+		"freight": 36.71,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 40,
+				"discount": 0
+			},
+			{
+				"productID": 65,
+				"unitPrice": 21.05,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10896,
+		"customerID": "MAISD",
+		"employeeID": 7,
+		"orderDate": "1998-02-19 00:00:00.000",
+		"requiredDate": "1998-03-19 00:00:00.000",
+		"shippedDate": "1998-02-27 00:00:00.000",
+		"shipVia": 3,
+		"freight": 32.45,
+		"shipName": "Maison Dewey",
+		"shipAddress": {
+			"street": "Rue Joseph-Bens 532",
+			"city": "Bruxelles",
+			"region": "NULL",
+			"postalCode": "B-1180",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 45,
+				"unitPrice": 9.5,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 16,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10904,
+		"customerID": "WHITC",
+		"employeeID": 3,
+		"orderDate": "1998-02-24 00:00:00.000",
+		"requiredDate": "1998-03-24 00:00:00.000",
+		"shippedDate": "1998-02-27 00:00:00.000",
+		"shipVia": 3,
+		"freight": 162.95,
+		"shipName": "White Clover Markets",
+		"shipAddress": {
+			"street": "1029 - 12th Ave. S.",
+			"city": "Seattle",
+			"region": "WA",
+			"postalCode": 98124,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10895,
+		"customerID": "ERNSH",
+		"employeeID": 3,
+		"orderDate": "1998-02-18 00:00:00.000",
+		"requiredDate": "1998-03-18 00:00:00.000",
+		"shippedDate": "1998-02-23 00:00:00.000",
+		"shipVia": 1,
+		"freight": 162.75,
+		"shipName": "Ernst Handel",
+		"shipAddress": {
+			"street": "Kirchgasse 6",
+			"city": "Graz",
+			"region": "NULL",
+			"postalCode": 8010,
+			"country": "Austria"
+		},
+		"details": [
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 91,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 100,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 110,
+				"discount": 0
+			},
+			{
+				"productID": 39,
+				"unitPrice": 18,
+				"quantity": 45,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10897,
+		"customerID": "HUNGO",
+		"employeeID": 3,
+		"orderDate": "1998-02-19 00:00:00.000",
+		"requiredDate": "1998-03-19 00:00:00.000",
+		"shippedDate": "1998-02-25 00:00:00.000",
+		"shipVia": 2,
+		"freight": 603.54,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 80,
+				"discount": 0
+			},
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 36,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10909,
+		"customerID": "SANTG",
+		"employeeID": 1,
+		"orderDate": "1998-02-26 00:00:00.000",
+		"requiredDate": "1998-03-26 00:00:00.000",
+		"shippedDate": "1998-03-10 00:00:00.000",
+		"shipVia": 2,
+		"freight": 53.05,
+		"shipName": "Santé Gourmet",
+		"shipAddress": {
+			"street": "Erling Skakkes gate 78",
+			"city": "Stavern",
+			"region": "NULL",
+			"postalCode": 4110,
+			"country": "Norway"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 41,
+				"unitPrice": 9.65,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10910,
+		"customerID": "WILMK",
+		"employeeID": 1,
+		"orderDate": "1998-02-26 00:00:00.000",
+		"requiredDate": "1998-03-26 00:00:00.000",
+		"shippedDate": "1998-03-04 00:00:00.000",
+		"shipVia": 3,
+		"freight": 38.11,
+		"shipName": "Wilman Kala",
+		"shipAddress": {
+			"street": "Keskuskatu 45",
+			"city": "Helsinki",
+			"region": "NULL",
+			"postalCode": 21240,
+			"country": "Finland"
+		},
+		"details": [
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 49,
+				"unitPrice": 20,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10911,
+		"customerID": "GODOS",
+		"employeeID": 3,
+		"orderDate": "1998-02-26 00:00:00.000",
+		"requiredDate": "1998-03-26 00:00:00.000",
+		"shippedDate": "1998-03-05 00:00:00.000",
+		"shipVia": 1,
+		"freight": 38.19,
+		"shipName": "Godos Cocina Típica",
+		"shipAddress": {
+			"street": "C/ Romero 33",
+			"city": "Sevilla",
+			"region": "NULL",
+			"postalCode": 41101,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 12,
+				"discount": 0
+			},
+			{
+				"productID": 67,
+				"unitPrice": 14,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10912,
+		"customerID": "HUNGO",
+		"employeeID": 2,
+		"orderDate": "1998-02-26 00:00:00.000",
+		"requiredDate": "1998-03-26 00:00:00.000",
+		"shippedDate": "1998-03-18 00:00:00.000",
+		"shipVia": 2,
+		"freight": 580.91,
+		"shipName": "Hungry Owl All-Night Grocers",
+		"shipAddress": {
+			"street": "8 Johnstown Road",
+			"city": "Cork",
+			"region": "Co. Cork",
+			"postalCode": "NULL",
+			"country": "Ireland"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 40,
+				"discount": 0.25
+			},
+			{
+				"productID": 29,
+				"unitPrice": 123.79,
+				"quantity": 60,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10913,
+		"customerID": "QUEEN",
+		"employeeID": 4,
+		"orderDate": "1998-02-26 00:00:00.000",
+		"requiredDate": "1998-03-26 00:00:00.000",
+		"shippedDate": "1998-03-04 00:00:00.000",
+		"shipVia": 1,
+		"freight": 33.05,
+		"shipName": "Queen Cozinha",
+		"shipAddress": {
+			"street": "Alameda dos Canàrios 891",
+			"city": "Sao Paulo",
+			"region": "SP",
+			"postalCode": "05487-020",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 4,
+				"unitPrice": 22,
+				"quantity": 30,
+				"discount": 0.25
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 40,
+				"discount": 0.25
+			},
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10917,
+		"customerID": "ROMEY",
+		"employeeID": 4,
+		"orderDate": "1998-03-02 00:00:00.000",
+		"requiredDate": "1998-03-30 00:00:00.000",
+		"shippedDate": "1998-03-11 00:00:00.000",
+		"shipVia": 2,
+		"freight": 8.29,
+		"shipName": "Romero y tomillo",
+		"shipAddress": {
+			"street": "Gran Vía 1",
+			"city": "Madrid",
+			"region": "NULL",
+			"postalCode": 28001,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 30,
+				"unitPrice": 25.89,
+				"quantity": 1,
+				"discount": 0
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10916,
+		"customerID": "RANCH",
+		"employeeID": 1,
+		"orderDate": "1998-02-27 00:00:00.000",
+		"requiredDate": "1998-03-27 00:00:00.000",
+		"shippedDate": "1998-03-09 00:00:00.000",
+		"shipVia": 2,
+		"freight": 63.77,
+		"shipName": "Rancho grande",
+		"shipAddress": {
+			"street": "Av. del Libertador 900",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 32,
+				"unitPrice": 32,
+				"quantity": 6,
+				"discount": 0
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10918,
+		"customerID": "BOTTM",
+		"employeeID": 3,
+		"orderDate": "1998-03-02 00:00:00.000",
+		"requiredDate": "1998-03-30 00:00:00.000",
+		"shippedDate": "1998-03-11 00:00:00.000",
+		"shipVia": 3,
+		"freight": 48.83,
+		"shipName": "Bottom-Dollar Markets",
+		"shipAddress": {
+			"street": "23 Tsawassen Blvd.",
+			"city": "Tsawassen",
+			"region": "BC",
+			"postalCode": "T2F 8M4",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 60,
+				"discount": 0.25
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 25,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10919,
+		"customerID": "LINOD",
+		"employeeID": 2,
+		"orderDate": "1998-03-02 00:00:00.000",
+		"requiredDate": "1998-03-30 00:00:00.000",
+		"shippedDate": "1998-03-04 00:00:00.000",
+		"shipVia": 2,
+		"freight": 19.8,
+		"shipName": "LINO-Delicateses",
+		"shipAddress": {
+			"street": "Ave. 5 de Mayo Porlamar",
+			"city": "I. de Margarita",
+			"region": "Nueva Esparta",
+			"postalCode": 4980,
+			"country": "Venezuela"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 25,
+				"unitPrice": 14,
+				"quantity": 24,
+				"discount": 0
+			},
+			{
+				"productID": 40,
+				"unitPrice": 18.4,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10908,
+		"customerID": "REGGC",
+		"employeeID": 4,
+		"orderDate": "1998-02-26 00:00:00.000",
+		"requiredDate": "1998-03-26 00:00:00.000",
+		"shippedDate": "1998-03-06 00:00:00.000",
+		"shipVia": 2,
+		"freight": 32.96,
+		"shipName": "Reggiani Caseifici",
+		"shipAddress": {
+			"street": "Strada Provinciale 124",
+			"city": "Reggio Emilia",
+			"region": "NULL",
+			"postalCode": 42100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 20,
+				"discount": 0.05
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 14,
+				"discount": 0.05
+			}
+		]
+	},
+	{
+		"orderID": 10921,
+		"customerID": "VAFFE",
+		"employeeID": 1,
+		"orderDate": "1998-03-03 00:00:00.000",
+		"requiredDate": "1998-04-14 00:00:00.000",
+		"shippedDate": "1998-03-09 00:00:00.000",
+		"shipVia": 1,
+		"freight": 176.48,
+		"shipName": "Vaffeljernet",
+		"shipAddress": {
+			"street": "Smagsloget 45",
+			"city": "Århus",
+			"region": "NULL",
+			"postalCode": 8200,
+			"country": "Denmark"
+		},
+		"details": [
+			{
+				"productID": 35,
+				"unitPrice": 18,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 63,
+				"unitPrice": 43.9,
+				"quantity": 40,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10915,
+		"customerID": "TORTU",
+		"employeeID": 2,
+		"orderDate": "1998-02-27 00:00:00.000",
+		"requiredDate": "1998-03-27 00:00:00.000",
+		"shippedDate": "1998-03-02 00:00:00.000",
+		"shipVia": 2,
+		"freight": 3.51,
+		"shipName": "Tortuga Restaurante",
+		"shipAddress": {
+			"street": "Avda. Azteca 123",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5033,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 33,
+				"unitPrice": 2.5,
+				"quantity": 30,
+				"discount": 0
+			},
+			{
+				"productID": 54,
+				"unitPrice": 7.45,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10925,
+		"customerID": "HANAR",
+		"employeeID": 3,
+		"orderDate": "1998-03-04 00:00:00.000",
+		"requiredDate": "1998-04-01 00:00:00.000",
+		"shippedDate": "1998-03-13 00:00:00.000",
+		"shipVia": 1,
+		"freight": 2.27,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 36,
+				"unitPrice": 19,
+				"quantity": 25,
+				"discount": 0.15
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 12,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10926,
+		"customerID": "ANATR",
+		"employeeID": 4,
+		"orderDate": "1998-03-04 00:00:00.000",
+		"requiredDate": "1998-04-01 00:00:00.000",
+		"shippedDate": "1998-03-11 00:00:00.000",
+		"shipVia": 3,
+		"freight": 39.92,
+		"shipName": "Ana Trujillo Emparedados y helados",
+		"shipAddress": {
+			"street": "Avda. de la Constitución 2222",
+			"city": "México D.F.",
+			"region": "NULL",
+			"postalCode": 5021,
+			"country": "Mexico"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 10,
+				"discount": 0
+			},
+			{
+				"productID": 19,
+				"unitPrice": 9.2,
+				"quantity": 7,
+				"discount": 0
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10927,
+		"customerID": "LACOR",
+		"employeeID": 4,
+		"orderDate": "1998-03-05 00:00:00.000",
+		"requiredDate": "1998-04-02 00:00:00.000",
+		"shippedDate": "1998-04-08 00:00:00.000",
+		"shipVia": 1,
+		"freight": 19.79,
+		"shipName": "La corne d'abondance",
+		"shipAddress": {
+			"street": "67 avenue de l'Europe",
+			"city": "Versailles",
+			"region": "NULL",
+			"postalCode": 78000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 20,
+				"unitPrice": 81,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 52,
+				"unitPrice": 7,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10928,
+		"customerID": "GALED",
+		"employeeID": 1,
+		"orderDate": "1998-03-05 00:00:00.000",
+		"requiredDate": "1998-04-02 00:00:00.000",
+		"shippedDate": "1998-03-18 00:00:00.000",
+		"shipVia": 1,
+		"freight": 1.36,
+		"shipName": "Galería del gastronómo",
+		"shipAddress": {
+			"street": "Rambla de Cataluña 23",
+			"city": "Barcelona",
+			"region": "NULL",
+			"postalCode": 8022,
+			"country": "Spain"
+		},
+		"details": [
+			{
+				"productID": 47,
+				"unitPrice": 9.5,
+				"quantity": 5,
+				"discount": 0
+			},
+			{
+				"productID": 76,
+				"unitPrice": 18,
+				"quantity": 5,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10929,
+		"customerID": "FRANK",
+		"employeeID": 6,
+		"orderDate": "1998-03-05 00:00:00.000",
+		"requiredDate": "1998-04-02 00:00:00.000",
+		"shippedDate": "1998-03-12 00:00:00.000",
+		"shipVia": 1,
+		"freight": 33.93,
+		"shipName": "Frankenversand",
+		"shipAddress": {
+			"street": "Berliner Platz 43",
+			"city": "München",
+			"region": "NULL",
+			"postalCode": 80805,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 60,
+				"discount": 0
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 49,
+				"discount": 0
+			},
+			{
+				"productID": 77,
+				"unitPrice": 13,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10930,
+		"customerID": "SUPRD",
+		"employeeID": 4,
+		"orderDate": "1998-03-06 00:00:00.000",
+		"requiredDate": "1998-04-17 00:00:00.000",
+		"shippedDate": "1998-03-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 15.55,
+		"shipName": "Suprêmes délices",
+		"shipAddress": {
+			"street": "Boulevard Tirou 255",
+			"city": "Charleroi",
+			"region": "NULL",
+			"postalCode": "B-6000",
+			"country": "Belgium"
+		},
+		"details": [
+			{
+				"productID": 27,
+				"unitPrice": 43.9,
+				"quantity": 25,
+				"discount": 0
+			},
+			{
+				"productID": 55,
+				"unitPrice": 24,
+				"quantity": 25,
+				"discount": 0.2
+			},
+			{
+				"productID": 58,
+				"unitPrice": 13.25,
+				"quantity": 30,
+				"discount": 0.2
+			},
+			{
+				"productID": 21,
+				"unitPrice": 10,
+				"quantity": 36,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10931,
+		"customerID": "RICSU",
+		"employeeID": 4,
+		"orderDate": "1998-03-06 00:00:00.000",
+		"requiredDate": "1998-03-20 00:00:00.000",
+		"shippedDate": "1998-03-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 13.6,
+		"shipName": "Richter Supermarkt",
+		"shipAddress": {
+			"street": "Starenweg 5",
+			"city": "Genève",
+			"region": "NULL",
+			"postalCode": 1204,
+			"country": "Switzerland"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 42,
+				"discount": 0.15
+			},
+			{
+				"productID": 57,
+				"unitPrice": 19.5,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10932,
+		"customerID": "BONAP",
+		"employeeID": 8,
+		"orderDate": "1998-03-06 00:00:00.000",
+		"requiredDate": "1998-04-03 00:00:00.000",
+		"shippedDate": "1998-03-24 00:00:00.000",
+		"shipVia": 1,
+		"freight": 134.64,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 16,
+				"unitPrice": 17.45,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 14,
+				"discount": 0.1
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 16,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10933,
+		"customerID": "ISLAT",
+		"employeeID": 6,
+		"orderDate": "1998-03-06 00:00:00.000",
+		"requiredDate": "1998-04-03 00:00:00.000",
+		"shippedDate": "1998-03-16 00:00:00.000",
+		"shipVia": 3,
+		"freight": 54.15,
+		"shipName": "Island Trading",
+		"shipAddress": {
+			"street": "Garden House Crowther Way",
+			"city": "Cowes",
+			"region": "Isle of Wight",
+			"postalCode": "PO31 7PJ",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 53,
+				"unitPrice": 32.8,
+				"quantity": 2,
+				"discount": 0
+			},
+			{
+				"productID": 61,
+				"unitPrice": 28.5,
+				"quantity": 30,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10935,
+		"customerID": "WELLI",
+		"employeeID": 4,
+		"orderDate": "1998-03-09 00:00:00.000",
+		"requiredDate": "1998-04-06 00:00:00.000",
+		"shippedDate": "1998-03-18 00:00:00.000",
+		"shipVia": 3,
+		"freight": 47.59,
+		"shipName": "Wellington Importadora",
+		"shipAddress": {
+			"street": "Rua do Mercado 12",
+			"city": "Resende",
+			"region": "SP",
+			"postalCode": "08737-363",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 18,
+				"unitPrice": 62.5,
+				"quantity": 4,
+				"discount": 0.25
+			},
+			{
+				"productID": 23,
+				"unitPrice": 9,
+				"quantity": 8,
+				"discount": 0.25
+			},
+			{
+				"productID": 1,
+				"unitPrice": 18,
+				"quantity": 21,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10937,
+		"customerID": "CACTU",
+		"employeeID": 7,
+		"orderDate": "1998-03-10 00:00:00.000",
+		"requiredDate": "1998-03-24 00:00:00.000",
+		"shippedDate": "1998-03-13 00:00:00.000",
+		"shipVia": 3,
+		"freight": 31.51,
+		"shipName": "Cactus Comidas para llevar",
+		"shipAddress": {
+			"street": "Cerrito 333",
+			"city": "Buenos Aires",
+			"region": "NULL",
+			"postalCode": 1010,
+			"country": "Argentina"
+		},
+		"details": [
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 34,
+				"unitPrice": 14,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10938,
+		"customerID": "QUICK",
+		"employeeID": 3,
+		"orderDate": "1998-03-10 00:00:00.000",
+		"requiredDate": "1998-04-07 00:00:00.000",
+		"shippedDate": "1998-03-16 00:00:00.000",
+		"shipVia": 2,
+		"freight": 31.89,
+		"shipName": "QUICK-Stop",
+		"shipAddress": {
+			"street": "Taucherstraße 10",
+			"city": "Cunewalde",
+			"region": "NULL",
+			"postalCode": 1307,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 20,
+				"discount": 0.25
+			},
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 24,
+				"discount": 0.25
+			},
+			{
+				"productID": 60,
+				"unitPrice": 34,
+				"quantity": 49,
+				"discount": 0.25
+			},
+			{
+				"productID": 71,
+				"unitPrice": 21.5,
+				"quantity": 35,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10939,
+		"customerID": "MAGAA",
+		"employeeID": 2,
+		"orderDate": "1998-03-10 00:00:00.000",
+		"requiredDate": "1998-04-07 00:00:00.000",
+		"shippedDate": "1998-03-13 00:00:00.000",
+		"shipVia": 2,
+		"freight": 76.33,
+		"shipName": "Magazzini Alimentari Riuniti",
+		"shipAddress": {
+			"street": "Via Ludovico il Moro 22",
+			"city": "Bergamo",
+			"region": "NULL",
+			"postalCode": 24100,
+			"country": "Italy"
+		},
+		"details": [
+			{
+				"productID": 2,
+				"unitPrice": 19,
+				"quantity": 10,
+				"discount": 0.15
+			},
+			{
+				"productID": 67,
+				"unitPrice": 14,
+				"quantity": 40,
+				"discount": 0.15
+			}
+		]
+	},
+	{
+		"orderID": 10940,
+		"customerID": "BONAP",
+		"employeeID": 8,
+		"orderDate": "1998-03-11 00:00:00.000",
+		"requiredDate": "1998-04-08 00:00:00.000",
+		"shippedDate": "1998-03-23 00:00:00.000",
+		"shipVia": 3,
+		"freight": 19.77,
+		"shipName": "Bon app'",
+		"shipAddress": {
+			"street": "12 rue des Bouchers",
+			"city": "Marseille",
+			"region": "NULL",
+			"postalCode": 13008,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 7,
+				"unitPrice": 30,
+				"quantity": 8,
+				"discount": 0
+			},
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 20,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10941,
+		"customerID": "SAVEA",
+		"employeeID": 7,
+		"orderDate": "1998-03-11 00:00:00.000",
+		"requiredDate": "1998-04-08 00:00:00.000",
+		"shippedDate": "1998-03-20 00:00:00.000",
+		"shipVia": 2,
+		"freight": 400.81,
+		"shipName": "Save-a-lot Markets",
+		"shipAddress": {
+			"street": "187 Suffolk Ln.",
+			"city": "Boise",
+			"region": "ID",
+			"postalCode": 83720,
+			"country": "USA"
+		},
+		"details": [
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 44,
+				"discount": 0.25
+			},
+			{
+				"productID": 62,
+				"unitPrice": 49.3,
+				"quantity": 30,
+				"discount": 0.25
+			},
+			{
+				"productID": 68,
+				"unitPrice": 12.5,
+				"quantity": 80,
+				"discount": 0.25
+			},
+			{
+				"productID": 72,
+				"unitPrice": 34.8,
+				"quantity": 50,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10922,
+		"customerID": "HANAR",
+		"employeeID": 5,
+		"orderDate": "1998-03-03 00:00:00.000",
+		"requiredDate": "1998-03-31 00:00:00.000",
+		"shippedDate": "1998-03-05 00:00:00.000",
+		"shipVia": 3,
+		"freight": 62.74,
+		"shipName": "Hanari Carnes",
+		"shipAddress": {
+			"street": "Rua do Paço 67",
+			"city": "Rio de Janeiro",
+			"region": "RJ",
+			"postalCode": "05454-876",
+			"country": "Brazil"
+		},
+		"details": [
+			{
+				"productID": 17,
+				"unitPrice": 39,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 24,
+				"unitPrice": 4.5,
+				"quantity": 35,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10923,
+		"customerID": "LAMAI",
+		"employeeID": 7,
+		"orderDate": "1998-03-03 00:00:00.000",
+		"requiredDate": "1998-04-14 00:00:00.000",
+		"shippedDate": "1998-03-13 00:00:00.000",
+		"shipVia": 3,
+		"freight": 68.26,
+		"shipName": "La maison d'Asie",
+		"shipAddress": {
+			"street": "1 rue Alsace-Lorraine",
+			"city": "Toulouse",
+			"region": "NULL",
+			"postalCode": 31000,
+			"country": "France"
+		},
+		"details": [
+			{
+				"productID": 43,
+				"unitPrice": 46,
+				"quantity": 10,
+				"discount": 0.2
+			},
+			{
+				"productID": 67,
+				"unitPrice": 14,
+				"quantity": 24,
+				"discount": 0.2
+			},
+			{
+				"productID": 42,
+				"unitPrice": 14,
+				"quantity": 10,
+				"discount": 0.2
+			}
+		]
+	},
+	{
+		"orderID": 10924,
+		"customerID": "BERGS",
+		"employeeID": 3,
+		"orderDate": "1998-03-04 00:00:00.000",
+		"requiredDate": "1998-04-01 00:00:00.000",
+		"shippedDate": "1998-04-08 00:00:00.000",
+		"shipVia": 2,
+		"freight": 151.52,
+		"shipName": "Berglunds snabbköp",
+		"shipAddress": {
+			"street": "Berguvsvägen  8",
+			"city": "Luleå",
+			"region": "NULL",
+			"postalCode": "S-958 22",
+			"country": "Sweden"
+		},
+		"details": [
+			{
+				"productID": 10,
+				"unitPrice": 31,
+				"quantity": 20,
+				"discount": 0.1
+			},
+			{
+				"productID": 28,
+				"unitPrice": 45.6,
+				"quantity": 30,
+				"discount": 0.1
+			},
+			{
+				"productID": 75,
+				"unitPrice": 7.75,
+				"quantity": 6,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10943,
+		"customerID": "BSBEV",
+		"employeeID": 4,
+		"orderDate": "1998-03-11 00:00:00.000",
+		"requiredDate": "1998-04-08 00:00:00.000",
+		"shippedDate": "1998-03-19 00:00:00.000",
+		"shipVia": 2,
+		"freight": 2.17,
+		"shipName": "B's Beverages",
+		"shipAddress": {
+			"street": "Fauntleroy Circus",
+			"city": "London",
+			"region": "NULL",
+			"postalCode": "EC2 5NT",
+			"country": "UK"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 15,
+				"discount": 0
+			},
+			{
+				"productID": 22,
+				"unitPrice": 21,
+				"quantity": 21,
+				"discount": 0
+			},
+			{
+				"productID": 46,
+				"unitPrice": 12,
+				"quantity": 15,
+				"discount": 0
+			}
+		]
+	},
+	{
+		"orderID": 10944,
+		"customerID": "BOTTM",
+		"employeeID": 6,
+		"orderDate": "1998-03-12 00:00:00.000",
+		"requiredDate": "1998-03-26 00:00:00.000",
+		"shippedDate": "1998-03-13 00:00:00.000",
+		"shipVia": 3,
+		"freight": 52.92,
+		"shipName": "Bottom-Dollar Markets",
+		"shipAddress": {
+			"street": "23 Tsawassen Blvd.",
+			"city": "Tsawassen",
+			"region": "BC",
+			"postalCode": "T2F 8M4",
+			"country": "Canada"
+		},
+		"details": [
+			{
+				"productID": 11,
+				"unitPrice": 21,
+				"quantity": 5,
+				"discount": 0.25
+			},
+			{
+				"productID": 56,
+				"unitPrice": 38,
+				"quantity": 18,
+				"discount": 0
+			},
+			{
+				"productID": 44,
+				"unitPrice": 19.45,
+				"quantity": 18,
+				"discount": 0.25
+			}
+		]
+	},
+	{
+		"orderID": 10945,
+		"customerID": "MORGK",
+		"employeeID": 4,
+		"orderDate": "1998-03-12 00:00:00.000",
+		"requiredDate": "1998-04-09 00:00:00.000",
+		"shippedDate": "1998-03-18 00:00:00.000",
+		"shipVia": 1,
+		"freight": 10.22,
+		"shipName": "Morgenstern Gesundkost",
+		"shipAddress": {
+			"street": "Heerstr. 22",
+			"city": "Leipzig",
+			"region": "NULL",
+			"postalCode": 4179,
+			"country": "Germany"
+		},
+		"details": [
+			{
+				"productID": 13,
+				"unitPrice": 6,
+				"quantity": 20,
+				"discount": 0
+			},
+			{
+				"productID": 31,
+				"unitPrice": 12.5,
+				"quantity": 10,
+				"discount": 0
+			}
+		]
+	}
+]
diff --git a/vue-options-api-demos/grid/shared/products.json b/vue-options-api-demos/grid/shared/products.json
new file mode 100644
index 00000000..4df1c408
--- /dev/null
+++ b/vue-options-api-demos/grid/shared/products.json
@@ -0,0 +1,1233 @@
+[{
+    "ProductID" : 1,
+    "ProductName" : "Chai",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "10 boxes x 20 bags",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 2,
+    "ProductName" : "Chang",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 3,
+    "ProductName" : "Aniseed Syrup",
+    "SupplierID" : 1,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 550 ml bottles",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 13,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 4,
+    "ProductName" : "Chef Anton's Cajun Seasoning",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "48 - 6 oz jars",
+    "UnitPrice" : 22.0000,
+    "UnitsInStock" : 53,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 5,
+    "ProductName" : "Chef Anton's Gumbo Mix",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "36 boxes",
+    "UnitPrice" : 21.3500,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 6,
+    "ProductName" : "Grandma's Boysenberry Spread",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 8 oz jars",
+    "UnitPrice" : 25.0000,
+    "UnitsInStock" : 120,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 7,
+    "ProductName" : "Uncle Bob's Organic Dried Pears",
+    "SupplierID" : 3,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "12 - 1 lb pkgs.",
+    "UnitPrice" : 30.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 8,
+    "ProductName" : "Northwoods Cranberry Sauce",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 12 oz jars",
+    "UnitPrice" : 40.0000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 9,
+    "ProductName" : "Mishi Kobe Niku",
+    "SupplierID" : 4,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "18 - 500 g pkgs.",
+    "UnitPrice" : 97.0000,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 10,
+    "ProductName" : "Ikura",
+    "SupplierID" : 4,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 200 ml jars",
+    "UnitPrice" : 31.0000,
+    "UnitsInStock" : 31,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 11,
+    "ProductName" : "Queso Cabrales",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "1 kg pkg.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 30,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 12,
+    "ProductName" : "Queso Manchego La Pastora",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 86,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 13,
+    "ProductName" : "Konbu",
+    "SupplierID" : 6,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "2 kg box",
+    "UnitPrice" : 6.0000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 14,
+    "ProductName" : "Tofu",
+    "SupplierID" : 6,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "40 - 100 g pkgs.",
+    "UnitPrice" : 23.2500,
+    "UnitsInStock" : 35,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 15,
+    "ProductName" : "Genen Shouyu",
+    "SupplierID" : 6,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 250 ml bottles",
+    "UnitPrice" : 15.5000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 16,
+    "ProductName" : "Pavlova",
+    "SupplierID" : 7,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "32 - 500 g boxes",
+    "UnitPrice" : 17.4500,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 17,
+    "ProductName" : "Alice Mutton",
+    "SupplierID" : 7,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "20 - 1 kg tins",
+    "UnitPrice" : 39.0000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 18,
+    "ProductName" : "Carnarvon Tigers",
+    "SupplierID" : 7,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "16 kg pkg.",
+    "UnitPrice" : 62.5000,
+    "UnitsInStock" : 42,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 19,
+    "ProductName" : "Teatime Chocolate Biscuits",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 12 pieces",
+    "UnitPrice" : 9.2000,
+    "UnitsInStock" : 25,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 20,
+    "ProductName" : "Sir Rodney's Marmalade",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "30 gift boxes",
+    "UnitPrice" : 81.0000,
+    "UnitsInStock" : 40,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 21,
+    "ProductName" : "Sir Rodney's Scones",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 pkgs. x 4 pieces",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 3,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 22,
+    "ProductName" : "Gustaf's Knäckebröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 500 g pkgs.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 104,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 23,
+    "ProductName" : "Tunnbröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "12 - 250 g pkgs.",
+    "UnitPrice" : 9.0000,
+    "UnitsInStock" : 61,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 24,
+    "ProductName" : "Guaraná Fantástica",
+    "SupplierID" : 10,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 355 ml cans",
+    "UnitPrice" : 4.5000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 25,
+    "ProductName" : "NuNuCa Nuß-Nougat-Creme",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "20 - 450 g glasses",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 26,
+    "ProductName" : "Gumbär Gummibärchen",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 250 g bags",
+    "UnitPrice" : 31.2300,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 27,
+    "ProductName" : "Schoggi Schokolade",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 100 g pieces",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 49,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 28,
+    "ProductName" : "Rössle Sauerkraut",
+    "SupplierID" : 12,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "25 - 825 g cans",
+    "UnitPrice" : 45.6000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 29,
+    "ProductName" : "Thüringer Rostbratwurst",
+    "SupplierID" : 12,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "50 bags x 30 sausgs.",
+    "UnitPrice" : 123.7900,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 30,
+    "ProductName" : "Nord-Ost Matjeshering",
+    "SupplierID" : 13,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "10 - 200 g glasses",
+    "UnitPrice" : 25.8900,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 31,
+    "ProductName" : "Gorgonzola Telino",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "12 - 100 g pkgs",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 32,
+    "ProductName" : "Mascarpone Fabioli",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 32.0000,
+    "UnitsInStock" : 9,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 33,
+    "ProductName" : "Geitost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "500 g",
+    "UnitPrice" : 2.5000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 34,
+    "ProductName" : "Sasquatch Ale",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 111,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 35,
+    "ProductName" : "Steeleye Stout",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 36,
+    "ProductName" : "Inlagd Sill",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 250 g  jars",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 37,
+    "ProductName" : "Gravad lax",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 500 g pkgs.",
+    "UnitPrice" : 26.0000,
+    "UnitsInStock" : 11,
+    "UnitsOnOrder" : 50,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 38,
+    "ProductName" : "Côte de Blaye",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 75 cl bottles",
+    "UnitPrice" : 263.5000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 39,
+    "ProductName" : "Chartreuse verte",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "750 cc per bottle",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 69,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 40,
+    "ProductName" : "Boston Crab Meat",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 4 oz tins",
+    "UnitPrice" : 18.4000,
+    "UnitsInStock" : 123,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 41,
+    "ProductName" : "Jack's New England Clam Chowder",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 12 oz cans",
+    "UnitPrice" : 9.6500,
+    "UnitsInStock" : 85,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 42,
+    "ProductName" : "Singaporean Hokkien Fried Mee",
+    "SupplierID" : 20,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "32 - 1 kg pkgs.",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 43,
+    "ProductName" : "Ipoh Coffee",
+    "SupplierID" : 20,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "16 - 500 g tins",
+    "UnitPrice" : 46.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 44,
+    "ProductName" : "Gula Malacca",
+    "SupplierID" : 20,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "20 - 2 kg bags",
+    "UnitPrice" : 19.4500,
+    "UnitsInStock" : 27,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 45,
+    "ProductName" : "Rogede sild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "1k pkg.",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 5,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 46,
+    "ProductName" : "Spegesild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "4 - 450 g glasses",
+    "UnitPrice" : 12.0000,
+    "UnitsInStock" : 95,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 47,
+    "ProductName" : "Zaanse koeken",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 - 4 oz boxes",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 48,
+    "ProductName" : "Chocolade",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 pkgs.",
+    "UnitPrice" : 12.7500,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 49,
+    "ProductName" : "Maxilaku",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 - 50 g pkgs.",
+    "UnitPrice" : 20.0000,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 60,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 50,
+    "ProductName" : "Valkoinen suklaa",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "12 - 100 g bars",
+    "UnitPrice" : 16.2500,
+    "UnitsInStock" : 65,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 51,
+    "ProductName" : "Manjimup Dried Apples",
+    "SupplierID" : 24,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "50 - 300 g pkgs.",
+    "UnitPrice" : 53.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 52,
+    "ProductName" : "Filo Mix",
+    "SupplierID" : 24,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "16 - 2 kg boxes",
+    "UnitPrice" : 7.0000,
+    "UnitsInStock" : 38,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 53,
+    "ProductName" : "Perth Pasties",
+    "SupplierID" : 24,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "48 pieces",
+    "UnitPrice" : 32.8000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 54,
+    "ProductName" : "Tourtière",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "16 pies",
+    "UnitPrice" : 7.4500,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 55,
+    "ProductName" : "Pâté chinois",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "24 boxes x 2 pies",
+    "UnitPrice" : 24.0000,
+    "UnitsInStock" : 115,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 56,
+    "ProductName" : "Gnocchi di nonna Alice",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 57,
+    "ProductName" : "Ravioli Angelo",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 19.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 58,
+    "ProductName" : "Escargots de Bourgogne",
+    "SupplierID" : 27,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 pieces",
+    "UnitPrice" : 13.2500,
+    "UnitsInStock" : 62,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 59,
+    "ProductName" : "Raclette Courdavault",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 55.0000,
+    "UnitsInStock" : 79,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 60,
+    "ProductName" : "Camembert Pierrot",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "15 - 300 g rounds",
+    "UnitPrice" : 34.0000,
+    "UnitsInStock" : 19,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 61,
+    "ProductName" : "Sirop d'érable",
+    "SupplierID" : 29,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 500 ml bottles",
+    "UnitPrice" : 28.5000,
+    "UnitsInStock" : 113,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 62,
+    "ProductName" : "Tarte au sucre",
+    "SupplierID" : 29,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "48 pies",
+    "UnitPrice" : 49.3000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 63,
+    "ProductName" : "Vegie-spread",
+    "SupplierID" : 7,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "15 - 625 g jars",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 64,
+    "ProductName" : "Wimmers gute Semmelknödel",
+    "SupplierID" : 12,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "20 bags x 4 pieces",
+    "UnitPrice" : 33.2500,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 80,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 65,
+    "ProductName" : "Louisiana Fiery Hot Pepper Sauce",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "32 - 8 oz bottles",
+    "UnitPrice" : 21.0500,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 66,
+    "ProductName" : "Louisiana Hot Spiced Okra",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 8 oz jars",
+    "UnitPrice" : 17.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 100,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 67,
+    "ProductName" : "Laughing Lumberjack Lager",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 52,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 68,
+    "ProductName" : "Scottish Longbreads",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 8 pieces",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 69,
+    "ProductName" : "Gudbrandsdalsost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 kg pkg.",
+    "UnitPrice" : 36.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 70,
+    "ProductName" : "Outback Lager",
+    "SupplierID" : 7,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 355 ml bottles",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 71,
+    "ProductName" : "Flotemysost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 21.5000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 72,
+    "ProductName" : "Mozzarella di Giovanni",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 34.8000,
+    "UnitsInStock" : 14,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 73,
+    "ProductName" : "Röd Kaviar",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 150 g jars",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 101,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 74,
+    "ProductName" : "Longlife Tofu",
+    "SupplierID" : 4,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 20,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 75,
+    "ProductName" : "Rhönbräu Klosterbier",
+    "SupplierID" : 12,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 0.5 l bottles",
+    "UnitPrice" : 7.7500,
+    "UnitsInStock" : 125,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 76,
+    "ProductName" : "Lakkalikööri",
+    "SupplierID" : 23,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "500 ml",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 57,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 77,
+    "ProductName" : "Original Frankfurter grüne Soße",
+    "SupplierID" : 12,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 boxes",
+    "UnitPrice" : 13.0000,
+    "UnitsInStock" : 32,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}]
diff --git a/vue-options-api-demos/grid/shared/regions.json b/vue-options-api-demos/grid/shared/regions.json
new file mode 100644
index 00000000..debca3d1
--- /dev/null
+++ b/vue-options-api-demos/grid/shared/regions.json
@@ -0,0 +1,239 @@
+
+[
+	{
+		"regionID" : 1,
+		"name" : "Eastern",
+		"territories" : [
+			{
+				"territoryID" : 1833,
+				"name" : "Georgetow"
+			},
+			{
+				"territoryID" : 1581,
+				"name" : "Westboro"
+			},
+			{
+				"territoryID" : 2116,
+				"name" : "Boston"
+			},
+			{
+				"territoryID" : 2139,
+				"name" : "Cambridge"
+			},
+			{
+				"territoryID" : 1730,
+				"name" : "Bedford"
+			},
+			{
+				"territoryID" : 2903,
+				"name" : "Providence"
+			},
+			{
+				"territoryID" : 6897,
+				"name" : "Wilton"
+			},
+			{
+				"territoryID" : 7960,
+				"name" : "Morristown"
+			},
+			{
+				"territoryID" : 8837,
+				"name" : "Edison"
+			},
+			{
+				"territoryID" : 10019,
+				"name" : "NewYork"
+			},
+			{
+				"territoryID" : 10038,
+				"name" : "NewYork"
+			},
+			{
+				"territoryID" : 11747,
+				"name" : "Mellvile"
+			},
+			{
+				"territoryID" : 14450,
+				"name" : "Fairport"
+			},
+			{
+				"territoryID" : 19713,
+				"name" : "Neward"
+			},
+			{
+				"territoryID" : 2184,
+				"name" : "Braintree"
+			},
+			{
+				"territoryID" : 20852,
+				"name" : "Rockville"
+			},
+			{
+				"territoryID" : 27403,
+				"name" : "Greensboro"
+			},
+			{
+				"territoryID" : 27511,
+				"name" : "Cary"
+			},
+			{
+				"territoryID" : 40222,
+				"name" : "Louisville"
+			}
+		]
+	},
+	{
+		"regionID" : 2,
+		"name" : "Western",
+		"territories" : [
+			{
+				"territoryID" : 60601,
+				"name" : "Chicago"
+			},
+			{
+				"territoryID" : 80202,
+				"name" : "Denver"
+			},
+			{
+				"territoryID" : 60179,
+				"name" : "HoffmanEstates"
+			},
+			{
+				"territoryID" : 85014,
+				"name" : "Phoenix"
+			},
+			{
+				"territoryID" : 80909,
+				"name" : "ColoradoSprings"
+			},
+			{
+				"territoryID" : 85251,
+				"name" : "Scottsdale"
+			},
+			{
+				"territoryID" : 90405,
+				"name" : "SantaMonica"
+			},
+			{
+				"territoryID" : 94025,
+				"name" : "MenloPark"
+			},
+			{
+				"territoryID" : 94105,
+				"name" : "SanFrancisco"
+			},
+			{
+				"territoryID" : 98004,
+				"name" : "Bellevue"
+			},
+			{
+				"territoryID" : 98052,
+				"name" : "Redmond"
+			},
+			{
+				"territoryID" : 98104,
+				"name" : "Seattle"
+			},
+			{
+				"territoryID" : 95008,
+				"name" : "Campbell"
+			},
+			{
+				"territoryID" : 95054,
+				"name" : "SantaClara"
+			},
+			{
+				"territoryID" : 95060,
+				"name" : "SantaCruz"
+			}
+		]
+	},
+	{
+		"regionID" : 4,
+		"name" : "Southern",
+		"territories" : [
+			{
+				"territoryID" : 29202,
+				"name" : "Columbia"
+			},
+			{
+				"territoryID" : 30346,
+				"name" : "Atlanta"
+			},
+			{
+				"territoryID" : 32859,
+				"name" : "Orlando"
+			},
+			{
+				"territoryID" : 31406,
+				"name" : "Savannah"
+			},
+			{
+				"territoryID" : 72716,
+				"name" : "Bentonville"
+			},
+			{
+				"territoryID" : 75234,
+				"name" : "Dallas"
+			},
+			{
+				"territoryID" : 78759,
+				"name" : "Austin"
+			},
+			{
+				"territoryID" : 33607,
+				"name" : "Tampa"
+			}
+		]
+	},
+	{
+		"regionID" : 3,
+		"name" : "Northern",
+		"territories" : [
+			{
+				"territoryID" : 19428,
+				"name" : "Philadelphia"
+			},
+			{
+				"territoryID" : 3801,
+				"name" : "Portsmouth"
+			},
+			{
+				"territoryID" : 3049,
+				"name" : "Hollis"
+			},
+			{
+				"territoryID" : 44122,
+				"name" : "Beachwood"
+			},
+			{
+				"territoryID" : 45839,
+				"name" : "Findlay"
+			},
+			{
+				"territoryID" : 48075,
+				"name" : "Southfield"
+			},
+			{
+				"territoryID" : 48084,
+				"name" : "Troy"
+			},
+			{
+				"territoryID" : 48304,
+				"name" : "BloomfieldHills"
+			},
+			{
+				"territoryID" : 53404,
+				"name" : "Racine"
+			},
+			{
+				"territoryID" : 55113,
+				"name" : "Roseville"
+			},
+			{
+				"territoryID" : 55439,
+				"name" : "Minneapolis"
+			}
+		]
+	}
+]
diff --git a/vue-options-api-demos/grid/shared/sample-products.js b/vue-options-api-demos/grid/shared/sample-products.js
new file mode 100644
index 00000000..17c495bb
--- /dev/null
+++ b/vue-options-api-demos/grid/shared/sample-products.js
@@ -0,0 +1,182 @@
+export const sampleProducts = [
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 20)
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 12)
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 26)
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 9, 19)
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.35,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 17)
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 9, 19)
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 22)
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 11, 1)
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        },
+        "FirstOrderedOn": new Date(1997, 1, 21)
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 5)
+    }
+];
diff --git a/vue-options-api-demos/grid/shared/shippers.json b/vue-options-api-demos/grid/shared/shippers.json
new file mode 100644
index 00000000..3b4546bd
--- /dev/null
+++ b/vue-options-api-demos/grid/shared/shippers.json
@@ -0,0 +1,18 @@
+
+[
+	{
+		"shipperID" : 1,
+		"companyName" : "Speedy Express",
+		"phone" : "(503) 555-9831"
+	},
+	{
+		"shipperID" : 2,
+		"companyName" : "United Package",
+		"phone" : "(503) 555-3199"
+	},
+	{
+		"shipperID" : 3,
+		"companyName" : "Federal Shipping",
+		"phone" : "(503) 555-9931"
+	}
+]
diff --git a/vue-options-api-demos/grid/shared/suppliers.json b/vue-options-api-demos/grid/shared/suppliers.json
new file mode 100644
index 00000000..403a0673
--- /dev/null
+++ b/vue-options-api-demos/grid/shared/suppliers.json
@@ -0,0 +1,409 @@
+
+[
+	{
+		"supplierID" : 4,
+		"companyName" : "Tokyo Traders",
+		"contactName" : "Yoshi Nagase",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "9-8 Sekimai Musashino-shi",
+			"city" : "Tokyo",
+			"region" : "NULL",
+			"postalCode" : 100,
+			"country" : "Japan",
+			"phone" : "(03) 3555-5011"
+		}
+	},
+	{
+		"supplierID" : 5,
+		"companyName" : "Cooperativa de Quesos 'Las Cabras'",
+		"contactName" : "Antonio del Valle Saavedra",
+		"contactTitle" : "Export Administrator",
+		"address" : {
+			"street" : "Calle del Rosal 4",
+			"city" : "Oviedo",
+			"region" : "Asturias",
+			"postalCode" : 33007,
+			"country" : "Spain",
+			"phone" : "(98) 598 76 54"
+		}
+	},
+	{
+		"supplierID" : 6,
+		"companyName" : "Mayumi's",
+		"contactName" : "Mayumi Ohno",
+		"contactTitle" : "Marketing Representative",
+		"address" : {
+			"street" : "92 Setsuko Chuo-ku",
+			"city" : "Osaka",
+			"region" : "NULL",
+			"postalCode" : 545,
+			"country" : "Japan",
+			"phone" : "(06) 431-7877"
+		}
+	},
+	{
+		"supplierID" : 7,
+		"companyName" : "Pavlova Ltd.",
+		"contactName" : "Ian Devling",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "74 Rose St. Moonie Ponds",
+			"city" : "Melbourne",
+			"region" : "Victoria",
+			"postalCode" : 3058,
+			"country" : "Australia",
+			"phone" : "(03) 444-2343"
+		}
+	},
+	{
+		"supplierID" : 8,
+		"companyName" : "Specialty Biscuits Ltd.",
+		"contactName" : "Peter Wilson",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "29 King's Way",
+			"city" : "Manchester",
+			"region" : "NULL",
+			"postalCode" : "M14 GSD",
+			"country" : "UK",
+			"phone" : "(161) 555-4448"
+		}
+	},
+	{
+		"supplierID" : 9,
+		"companyName" : "PB Knäckebröd AB",
+		"contactName" : "Lars Peterson",
+		"contactTitle" : "Sales Agent",
+		"address" : {
+			"street" : "Kaloadagatan 13",
+			"city" : "Göteborg",
+			"region" : "NULL",
+			"postalCode" : "S-345 67",
+			"country" : "Sweden",
+			"phone" : "031-987 65 43"
+		}
+	},
+	{
+		"supplierID" : 10,
+		"companyName" : "Refrescos Americanas LTDA",
+		"contactName" : "Carlos Diaz",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "Av. das Americanas 12.890",
+			"city" : "Sao Paulo",
+			"region" : "NULL",
+			"postalCode" : 5442,
+			"country" : "Brazil",
+			"phone" : "(11) 555 4640"
+		}
+	},
+	{
+		"supplierID" : 11,
+		"companyName" : "Heli Süßwaren GmbH & Co. KG",
+		"contactName" : "Petra Winkler",
+		"contactTitle" : "Sales Manager",
+		"address" : {
+			"street" : "Tiergartenstraße 5",
+			"city" : "Berlin",
+			"region" : "NULL",
+			"postalCode" : 10785,
+			"country" : "Germany",
+			"phone" : "(010) 9984510"
+		}
+	},
+	{
+		"supplierID" : 2,
+		"companyName" : "New Orleans Cajun Delights",
+		"contactName" : "Shelley Burke",
+		"contactTitle" : "Order Administrator",
+		"address" : {
+			"street" : "P.O. Box 78934",
+			"city" : "New Orleans",
+			"region" : "LA",
+			"postalCode" : 70117,
+			"country" : "USA",
+			"phone" : "(100) 555-4822"
+		}
+	},
+	{
+		"supplierID" : 12,
+		"companyName" : "Plutzer Lebensmittelgroßmärkte AG",
+		"contactName" : "Martin Bein",
+		"contactTitle" : "International Marketing Mgr.",
+		"address" : {
+			"street" : "Bogenallee 51",
+			"city" : "Frankfurt",
+			"region" : "NULL",
+			"postalCode" : 60439,
+			"country" : "Germany",
+			"phone" : "(069) 992755"
+		}
+	},
+	{
+		"supplierID" : 13,
+		"companyName" : "Nord-Ost-Fisch Handelsgesellschaft mbH",
+		"contactName" : "Sven Petersen",
+		"contactTitle" : "Coordinator Foreign Markets",
+		"address" : {
+			"street" : "Frahmredder 112a",
+			"city" : "Cuxhaven",
+			"region" : "NULL",
+			"postalCode" : 27478,
+			"country" : "Germany",
+			"phone" : "(04721) 8713"
+		}
+	},
+	{
+		"supplierID" : 14,
+		"companyName" : "Formaggi Fortini s.r.l.",
+		"contactName" : "Elio Rossi",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "Viale Dante 75",
+			"city" : "Ravenna",
+			"region" : "NULL",
+			"postalCode" : 48100,
+			"country" : "Italy",
+			"phone" : "(0544) 60323"
+		}
+	},
+	{
+		"supplierID" : 15,
+		"companyName" : "Norske Meierier",
+		"contactName" : "Beate Vileid",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "Hatlevegen 5",
+			"city" : "Sandvika",
+			"region" : "NULL",
+			"postalCode" : 1320,
+			"country" : "Norway",
+			"phone" : "(0)2-953010"
+		}
+	},
+	{
+		"supplierID" : 1,
+		"companyName" : "Exotic Liquids",
+		"contactName" : "Charlotte Cooper",
+		"contactTitle" : "Purchasing Manager",
+		"address" : {
+			"street" : "49 Gilbert St.",
+			"city" : "London",
+			"region" : "NULL",
+			"postalCode" : "EC1 4SD",
+			"country" : "UK",
+			"phone" : "(171) 555-2222"
+		}
+	},
+	{
+		"supplierID" : 3,
+		"companyName" : "Grandma Kelly's Homestead",
+		"contactName" : "Regina Murphy",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "707 Oxford Rd.",
+			"city" : "Ann Arbor",
+			"region" : "MI",
+			"postalCode" : 48104,
+			"country" : "USA",
+			"phone" : "(313) 555-5735"
+		}
+	},
+	{
+		"supplierID" : 16,
+		"companyName" : "Bigfoot Breweries",
+		"contactName" : "Cheryl Saylor",
+		"contactTitle" : "Regional Account Rep.",
+		"address" : {
+			"street" : "3400 - 8th Avenue Suite 210",
+			"city" : "Bend",
+			"region" : "OR",
+			"postalCode" : 97101,
+			"country" : "USA",
+			"phone" : "(503) 555-9931"
+		}
+	},
+	{
+		"supplierID" : 17,
+		"companyName" : "Svensk Sjöföda AB",
+		"contactName" : "Michael Björn",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "Brovallavägen 231",
+			"city" : "Stockholm",
+			"region" : "NULL",
+			"postalCode" : "S-123 45",
+			"country" : "Sweden",
+			"phone" : "08-123 45 67"
+		}
+	},
+	{
+		"supplierID" : 18,
+		"companyName" : "Aux joyeux ecclésiastiques",
+		"contactName" : "Guylène Nodier",
+		"contactTitle" : "Sales Manager",
+		"address" : {
+			"street" : "203 Rue des Francs-Bourgeois",
+			"city" : "Paris",
+			"region" : "NULL",
+			"postalCode" : 75004,
+			"country" : "France",
+			"phone" : "(1) 03.83.00.68"
+		}
+	},
+	{
+		"supplierID" : 19,
+		"companyName" : "New England Seafood Cannery",
+		"contactName" : "Robb Merchant",
+		"contactTitle" : "Wholesale Account Agent",
+		"address" : {
+			"street" : "Order Processing Dept. 2100 Paul Revere Blvd.",
+			"city" : "Boston",
+			"region" : "MA",
+			"postalCode" : 2134,
+			"country" : "USA",
+			"phone" : "(617) 555-3267"
+		}
+	},
+	{
+		"supplierID" : 20,
+		"companyName" : "Leka Trading",
+		"contactName" : "Chandra Leka",
+		"contactTitle" : "Owner",
+		"address" : {
+			"street" : "471 Serangoon Loop Suite #402",
+			"city" : "Singapore",
+			"region" : "NULL",
+			"postalCode" : 512,
+			"country" : "Singapore",
+			"phone" : "555-8787"
+		}
+	},
+	{
+		"supplierID" : 21,
+		"companyName" : "Lyngbysild",
+		"contactName" : "Niels Petersen",
+		"contactTitle" : "Sales Manager",
+		"address" : {
+			"street" : "Lyngbysild Fiskebakken 10",
+			"city" : "Lyngby",
+			"region" : "NULL",
+			"postalCode" : 2800,
+			"country" : "Denmark",
+			"phone" : 43844108
+		}
+	},
+	{
+		"supplierID" : 22,
+		"companyName" : "Zaanse Snoepfabriek",
+		"contactName" : "Dirk Luchte",
+		"contactTitle" : "Accounting Manager",
+		"address" : {
+			"street" : "Verkoop Rijnweg 22",
+			"city" : "Zaandam",
+			"region" : "NULL",
+			"postalCode" : "9999 ZZ",
+			"country" : "Netherlands",
+			"phone" : "(12345) 1212"
+		}
+	},
+	{
+		"supplierID" : 25,
+		"companyName" : "Ma Maison",
+		"contactName" : "Jean-Guy Lauzon",
+		"contactTitle" : "Marketing Manager",
+		"address" : {
+			"street" : "2960 Rue St. Laurent",
+			"city" : "Montréal",
+			"region" : "Québec",
+			"postalCode" : "H1J 1C3",
+			"country" : "Canada",
+			"phone" : "(514) 555-9022"
+		}
+	},
+	{
+		"supplierID" : 27,
+		"companyName" : "Escargots Nouveaux",
+		"contactName" : "Marie Delamare",
+		"contactTitle" : "Sales Manager",
+		"address" : {
+			"street" : "22 rue H. Voiron",
+			"city" : "Montceau",
+			"region" : "NULL",
+			"postalCode" : 71300,
+			"country" : "France",
+			"phone" : "85.57.00.07"
+		}
+	},
+	{
+		"supplierID" : 26,
+		"companyName" : "Pasta Buttini s.r.l.",
+		"contactName" : "Giovanni Giudici",
+		"contactTitle" : "Order Administrator",
+		"address" : {
+			"street" : "Via dei Gelsomini 153",
+			"city" : "Salerno",
+			"region" : "NULL",
+			"postalCode" : 84100,
+			"country" : "Italy",
+			"phone" : "(089) 6547665"
+		}
+	},
+	{
+		"supplierID" : 28,
+		"companyName" : "Gai pâturage",
+		"contactName" : "Eliane Noz",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "Bat. B 3 rue des Alpes",
+			"city" : "Annecy",
+			"region" : "NULL",
+			"postalCode" : 74000,
+			"country" : "France",
+			"phone" : "38.76.98.06"
+		}
+	},
+	{
+		"supplierID" : 23,
+		"companyName" : "Karkki Oy",
+		"contactName" : "Anne Heikkonen",
+		"contactTitle" : "Product Manager",
+		"address" : {
+			"street" : "Valtakatu 12",
+			"city" : "Lappeenranta",
+			"region" : "NULL",
+			"postalCode" : 53120,
+			"country" : "Finland",
+			"phone" : "(953) 10956"
+		}
+	},
+	{
+		"supplierID" : 24,
+		"companyName" : "G'day Mate",
+		"contactName" : "Wendy Mackenzie",
+		"contactTitle" : "Sales Representative",
+		"address" : {
+			"street" : "170 Prince Edward Parade Hunter's Hill",
+			"city" : "Sydney",
+			"region" : "NSW",
+			"postalCode" : 2042,
+			"country" : "Australia",
+			"phone" : "(02) 555-5914"
+		}
+	},
+	{
+		"supplierID" : 29,
+		"companyName" : "Forêts d'érables",
+		"contactName" : "Chantal Goulet",
+		"contactTitle" : "Accounting Manager",
+		"address" : {
+			"street" : "148 rue Chasseur",
+			"city" : "Ste-Hyacinthe",
+			"region" : "Québec",
+			"postalCode" : "J2S 7S8",
+			"country" : "Canada",
+			"phone" : "(514) 555-2955"
+		}
+	}
+]
diff --git a/vue-options-api-demos/grid/sorting/basic/main.js b/vue-options-api-demos/grid/sorting/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/sorting/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/sorting/basic/main.vue b/vue-options-api-demos/grid/sorting/basic/main.vue
new file mode 100644
index 00000000..32647a6d
--- /dev/null
+++ b/vue-options-api-demos/grid/sorting/basic/main.vue
@@ -0,0 +1,80 @@
+<template>
+  <Grid
+    :style="{ height: '300px' }"
+    :data-items="result"
+    :sortable="true"
+    :sort="sort"
+    :columns="columns"
+    @sortchange="sortChangeHandler"
+    :loader="loader"
+  >
+  </Grid>
+</template>
+<script>
+import { orderBy } from '@progress/kendo-data-query';
+import { Grid } from '@progress/kendo-vue-grid';
+
+export default {
+  components: {
+    Grid: Grid,
+  },
+  data: function () {
+    return {
+      loader: false,
+      sort: [{ field: 'ProductName', dir: 'asc' }],
+      columns: [
+        { field: 'ProductID' },
+        { field: 'ProductName', title: 'Product Name' },
+        { field: 'UnitPrice', title: 'Unit Price' },
+      ],
+    };
+  },
+  computed: {
+    result: {
+      get: function () {
+        return orderBy(this.createRandomData(500), this.sort);
+      },
+    },
+  },
+  methods: {
+    sortChangeHandler: function (e) {
+      this.loader = true;
+      // The idea behind using the following setTimeout method is to
+      // demonstrate how we can show a loader while fetching data.
+      // In a real-life scenarios with remote data binding, the 'loader'
+      // property should be updated before making a server request
+      // and after the request completes.
+      setTimeout(() => {
+        this.loader = false;
+        this.sort = e.sort;
+      }, 200);
+    },
+    createRandomData(count) {
+      const productNames = [
+        'Chai',
+        'Chang',
+        'Syrup',
+        'Apple',
+        'Orange',
+        'Banana',
+        'Lemon',
+        'Pineapple',
+        'Tea',
+        'Milk',
+      ];
+      const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120];
+      const units = [2, 7, 12, 25, 67, 233, 123, 53, 67, 89];
+
+      return Array(count)
+        .fill({})
+        .map((_, idx) => ({
+          ProductID: idx + 1,
+          ProductName:
+            productNames[Math.floor(Math.random() * productNames.length)],
+          UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)],
+          UnitsInStock: units[Math.floor(Math.random() * units.length)],
+        }));
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/grid/sorting/custom/main.js b/vue-options-api-demos/grid/sorting/custom/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/sorting/custom/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/sorting/custom/main.vue b/vue-options-api-demos/grid/sorting/custom/main.vue
new file mode 100644
index 00000000..1d22ff49
--- /dev/null
+++ b/vue-options-api-demos/grid/sorting/custom/main.vue
@@ -0,0 +1,100 @@
+<template>
+ <div class="example-config">
+        <div>
+            <input
+                type="checkbox"
+                class="k-checkbox k-checkbox-md k-rounded-md"
+                id="unsort"
+                :checked= "allowUnsort"
+                @change="changeHandler"
+            />
+            <label for="unsort"
+                class="k-checkbox-label"
+                :style="{lineHeight: '1.2', marginBottom: '1em'}">
+                Enable unsorting
+            </label>
+            <br />
+            <input
+                type="checkbox"
+                class="k-checkbox k-checkbox-md k-rounded-md"
+                id="multiSort"
+                :checked="multiple"
+                @change="changeMultiHandler"
+            />
+            <label for="multiSort"
+                class="k-checkbox-label"
+                :style="{lineHeight: '1.2'}">
+                Enable multiple columns sorting
+            </label>
+        </div>
+        <Grid
+            :style="{height: '300px'}"
+            :data-items="result"
+            :sortable="sortable"
+            :sort= "sort"
+            @sortchange="sortChangeHandler"
+            :columns = "columns">
+        </Grid>
+    </div>
+</template>
+<script>
+import { orderBy } from '@progress/kendo-data-query';
+import { Grid } from '@progress/kendo-vue-grid';
+
+export default {
+    components: {
+        'Grid': Grid
+    },
+    data: function () {
+        return {
+            allowUnsort: true,
+            multiple: false,
+            sort: [
+                { field: 'ProductName', dir: 'asc' }
+            ],
+            columns: [
+                { field: 'ProductID'},
+                { field: 'ProductName', title: 'Product Name' },
+                { field: 'UnitPrice', title: 'Unit Price' }
+            ]
+        };
+    },
+    computed: {
+        sortable() {
+            return {
+                allowUnsort: this.allowUnsort,
+                mode: this.multiple ? 'multiple' : 'single'
+            };
+        },
+        result: {
+            get: function() {
+                return orderBy(this.createRandomData(500), this.sort);
+            }
+        }
+    },
+    methods: {
+        changeHandler: function (e) {
+            this.allowUnsort = e.target.checked;
+        },
+        changeMultiHandler: function (e) {
+            this.multiple = e.target.checked;
+        },
+        sortChangeHandler: function(e) {
+            this.sort = e.sort;
+        },
+        createRandomData(count) {
+            const productNames = ['Chai', 'Chang', 'Syrup', 'Apple', 'Orange', 'Banana', 'Lemon', 'Pineapple', 'Tea', 'Milk'];
+            const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120];
+            const units = [2, 7, 12, 25,  67, 233, 123, 53, 67, 89];
+
+            return Array(count).fill({}).map((_, idx) => ({
+                ProductID: idx + 1,
+                ProductName: productNames[Math.floor(Math.random() * productNames.length)],
+                UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)],
+                UnitsInStock: units[Math.floor(Math.random() * units.length)]
+            }));
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/styling/styling-cell/main.js b/vue-options-api-demos/grid/styling/styling-cell/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/styling/styling-cell/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/styling/styling-cell/main.vue b/vue-options-api-demos/grid/styling/styling-cell/main.vue
new file mode 100644
index 00000000..e3769081
--- /dev/null
+++ b/vue-options-api-demos/grid/styling/styling-cell/main.vue
@@ -0,0 +1,51 @@
+<template>
+        <grid
+            :style="{height: '280px'}"
+            :data-items="items"
+            :columns="columns"
+            >
+            <template v-slot:myCellTemplate="{props}">
+                    <td :style="cellBackground(props.dataItem)">
+                            {{props.dataItem[props.field]}} 
+                            <span v-if="props.dataItem.UnitPrice < 15">
+                                <span className="k-icon k-i-sort-desc-sm" />
+                            </span>
+                            <span v-else>
+                                <span className="k-icon k-i-sort-asc-sm" />
+                            </span>
+                    </td>
+            </template>
+        </grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import products from "./products.json";
+
+export default {
+    components: {
+        'grid': Grid
+    },
+    data: function () {
+        return {
+            columns: [
+                { field: 'ProductName', title: 'Product Name' },
+                { field: 'UnitPrice', title: 'Unit Price', cell:"myCellTemplate"  },
+                { field: 'UnitsOnOrder', title: 'Units On Order' },
+                { field: 'ReorderLevel', title: 'Reorder Level' }
+            ],
+            items: products
+        };
+    },
+    methods: {
+        cellBackground: function(dataItem){
+            const examplePrice = dataItem.UnitPrice < 15;
+
+            return {
+                "background-color": examplePrice 
+                    ? "rgb(243, 23, 0, 0.32)" 
+                    : "rgb(55, 180, 0,0.32)"};
+        }      
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/styling/styling-cell/products.json b/vue-options-api-demos/grid/styling/styling-cell/products.json
new file mode 100644
index 00000000..4df1c408
--- /dev/null
+++ b/vue-options-api-demos/grid/styling/styling-cell/products.json
@@ -0,0 +1,1233 @@
+[{
+    "ProductID" : 1,
+    "ProductName" : "Chai",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "10 boxes x 20 bags",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 2,
+    "ProductName" : "Chang",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 3,
+    "ProductName" : "Aniseed Syrup",
+    "SupplierID" : 1,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 550 ml bottles",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 13,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 4,
+    "ProductName" : "Chef Anton's Cajun Seasoning",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "48 - 6 oz jars",
+    "UnitPrice" : 22.0000,
+    "UnitsInStock" : 53,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 5,
+    "ProductName" : "Chef Anton's Gumbo Mix",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "36 boxes",
+    "UnitPrice" : 21.3500,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 6,
+    "ProductName" : "Grandma's Boysenberry Spread",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 8 oz jars",
+    "UnitPrice" : 25.0000,
+    "UnitsInStock" : 120,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 7,
+    "ProductName" : "Uncle Bob's Organic Dried Pears",
+    "SupplierID" : 3,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "12 - 1 lb pkgs.",
+    "UnitPrice" : 30.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 8,
+    "ProductName" : "Northwoods Cranberry Sauce",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 12 oz jars",
+    "UnitPrice" : 40.0000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 9,
+    "ProductName" : "Mishi Kobe Niku",
+    "SupplierID" : 4,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "18 - 500 g pkgs.",
+    "UnitPrice" : 97.0000,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 10,
+    "ProductName" : "Ikura",
+    "SupplierID" : 4,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 200 ml jars",
+    "UnitPrice" : 31.0000,
+    "UnitsInStock" : 31,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 11,
+    "ProductName" : "Queso Cabrales",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "1 kg pkg.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 30,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 12,
+    "ProductName" : "Queso Manchego La Pastora",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 86,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 13,
+    "ProductName" : "Konbu",
+    "SupplierID" : 6,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "2 kg box",
+    "UnitPrice" : 6.0000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 14,
+    "ProductName" : "Tofu",
+    "SupplierID" : 6,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "40 - 100 g pkgs.",
+    "UnitPrice" : 23.2500,
+    "UnitsInStock" : 35,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 15,
+    "ProductName" : "Genen Shouyu",
+    "SupplierID" : 6,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 250 ml bottles",
+    "UnitPrice" : 15.5000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 16,
+    "ProductName" : "Pavlova",
+    "SupplierID" : 7,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "32 - 500 g boxes",
+    "UnitPrice" : 17.4500,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 17,
+    "ProductName" : "Alice Mutton",
+    "SupplierID" : 7,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "20 - 1 kg tins",
+    "UnitPrice" : 39.0000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 18,
+    "ProductName" : "Carnarvon Tigers",
+    "SupplierID" : 7,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "16 kg pkg.",
+    "UnitPrice" : 62.5000,
+    "UnitsInStock" : 42,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 19,
+    "ProductName" : "Teatime Chocolate Biscuits",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 12 pieces",
+    "UnitPrice" : 9.2000,
+    "UnitsInStock" : 25,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 20,
+    "ProductName" : "Sir Rodney's Marmalade",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "30 gift boxes",
+    "UnitPrice" : 81.0000,
+    "UnitsInStock" : 40,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 21,
+    "ProductName" : "Sir Rodney's Scones",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 pkgs. x 4 pieces",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 3,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 22,
+    "ProductName" : "Gustaf's Knäckebröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 500 g pkgs.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 104,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 23,
+    "ProductName" : "Tunnbröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "12 - 250 g pkgs.",
+    "UnitPrice" : 9.0000,
+    "UnitsInStock" : 61,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 24,
+    "ProductName" : "Guaraná Fantástica",
+    "SupplierID" : 10,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 355 ml cans",
+    "UnitPrice" : 4.5000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 25,
+    "ProductName" : "NuNuCa Nuß-Nougat-Creme",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "20 - 450 g glasses",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 26,
+    "ProductName" : "Gumbär Gummibärchen",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 250 g bags",
+    "UnitPrice" : 31.2300,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 27,
+    "ProductName" : "Schoggi Schokolade",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 100 g pieces",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 49,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 28,
+    "ProductName" : "Rössle Sauerkraut",
+    "SupplierID" : 12,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "25 - 825 g cans",
+    "UnitPrice" : 45.6000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 29,
+    "ProductName" : "Thüringer Rostbratwurst",
+    "SupplierID" : 12,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "50 bags x 30 sausgs.",
+    "UnitPrice" : 123.7900,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 30,
+    "ProductName" : "Nord-Ost Matjeshering",
+    "SupplierID" : 13,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "10 - 200 g glasses",
+    "UnitPrice" : 25.8900,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 31,
+    "ProductName" : "Gorgonzola Telino",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "12 - 100 g pkgs",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 32,
+    "ProductName" : "Mascarpone Fabioli",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 32.0000,
+    "UnitsInStock" : 9,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 33,
+    "ProductName" : "Geitost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "500 g",
+    "UnitPrice" : 2.5000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 34,
+    "ProductName" : "Sasquatch Ale",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 111,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 35,
+    "ProductName" : "Steeleye Stout",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 36,
+    "ProductName" : "Inlagd Sill",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 250 g  jars",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 37,
+    "ProductName" : "Gravad lax",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 500 g pkgs.",
+    "UnitPrice" : 26.0000,
+    "UnitsInStock" : 11,
+    "UnitsOnOrder" : 50,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 38,
+    "ProductName" : "Côte de Blaye",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 75 cl bottles",
+    "UnitPrice" : 263.5000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 39,
+    "ProductName" : "Chartreuse verte",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "750 cc per bottle",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 69,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 40,
+    "ProductName" : "Boston Crab Meat",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 4 oz tins",
+    "UnitPrice" : 18.4000,
+    "UnitsInStock" : 123,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 41,
+    "ProductName" : "Jack's New England Clam Chowder",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 12 oz cans",
+    "UnitPrice" : 9.6500,
+    "UnitsInStock" : 85,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 42,
+    "ProductName" : "Singaporean Hokkien Fried Mee",
+    "SupplierID" : 20,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "32 - 1 kg pkgs.",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 43,
+    "ProductName" : "Ipoh Coffee",
+    "SupplierID" : 20,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "16 - 500 g tins",
+    "UnitPrice" : 46.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 44,
+    "ProductName" : "Gula Malacca",
+    "SupplierID" : 20,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "20 - 2 kg bags",
+    "UnitPrice" : 19.4500,
+    "UnitsInStock" : 27,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 45,
+    "ProductName" : "Rogede sild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "1k pkg.",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 5,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 46,
+    "ProductName" : "Spegesild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "4 - 450 g glasses",
+    "UnitPrice" : 12.0000,
+    "UnitsInStock" : 95,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 47,
+    "ProductName" : "Zaanse koeken",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 - 4 oz boxes",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 48,
+    "ProductName" : "Chocolade",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 pkgs.",
+    "UnitPrice" : 12.7500,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 49,
+    "ProductName" : "Maxilaku",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 - 50 g pkgs.",
+    "UnitPrice" : 20.0000,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 60,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 50,
+    "ProductName" : "Valkoinen suklaa",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "12 - 100 g bars",
+    "UnitPrice" : 16.2500,
+    "UnitsInStock" : 65,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 51,
+    "ProductName" : "Manjimup Dried Apples",
+    "SupplierID" : 24,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "50 - 300 g pkgs.",
+    "UnitPrice" : 53.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 52,
+    "ProductName" : "Filo Mix",
+    "SupplierID" : 24,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "16 - 2 kg boxes",
+    "UnitPrice" : 7.0000,
+    "UnitsInStock" : 38,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 53,
+    "ProductName" : "Perth Pasties",
+    "SupplierID" : 24,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "48 pieces",
+    "UnitPrice" : 32.8000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 54,
+    "ProductName" : "Tourtière",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "16 pies",
+    "UnitPrice" : 7.4500,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 55,
+    "ProductName" : "Pâté chinois",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "24 boxes x 2 pies",
+    "UnitPrice" : 24.0000,
+    "UnitsInStock" : 115,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 56,
+    "ProductName" : "Gnocchi di nonna Alice",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 57,
+    "ProductName" : "Ravioli Angelo",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 19.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 58,
+    "ProductName" : "Escargots de Bourgogne",
+    "SupplierID" : 27,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 pieces",
+    "UnitPrice" : 13.2500,
+    "UnitsInStock" : 62,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 59,
+    "ProductName" : "Raclette Courdavault",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 55.0000,
+    "UnitsInStock" : 79,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 60,
+    "ProductName" : "Camembert Pierrot",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "15 - 300 g rounds",
+    "UnitPrice" : 34.0000,
+    "UnitsInStock" : 19,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 61,
+    "ProductName" : "Sirop d'érable",
+    "SupplierID" : 29,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 500 ml bottles",
+    "UnitPrice" : 28.5000,
+    "UnitsInStock" : 113,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 62,
+    "ProductName" : "Tarte au sucre",
+    "SupplierID" : 29,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "48 pies",
+    "UnitPrice" : 49.3000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 63,
+    "ProductName" : "Vegie-spread",
+    "SupplierID" : 7,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "15 - 625 g jars",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 64,
+    "ProductName" : "Wimmers gute Semmelknödel",
+    "SupplierID" : 12,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "20 bags x 4 pieces",
+    "UnitPrice" : 33.2500,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 80,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 65,
+    "ProductName" : "Louisiana Fiery Hot Pepper Sauce",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "32 - 8 oz bottles",
+    "UnitPrice" : 21.0500,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 66,
+    "ProductName" : "Louisiana Hot Spiced Okra",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 8 oz jars",
+    "UnitPrice" : 17.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 100,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 67,
+    "ProductName" : "Laughing Lumberjack Lager",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 52,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 68,
+    "ProductName" : "Scottish Longbreads",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 8 pieces",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 69,
+    "ProductName" : "Gudbrandsdalsost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 kg pkg.",
+    "UnitPrice" : 36.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 70,
+    "ProductName" : "Outback Lager",
+    "SupplierID" : 7,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 355 ml bottles",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 71,
+    "ProductName" : "Flotemysost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 21.5000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 72,
+    "ProductName" : "Mozzarella di Giovanni",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 34.8000,
+    "UnitsInStock" : 14,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 73,
+    "ProductName" : "Röd Kaviar",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 150 g jars",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 101,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 74,
+    "ProductName" : "Longlife Tofu",
+    "SupplierID" : 4,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 20,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 75,
+    "ProductName" : "Rhönbräu Klosterbier",
+    "SupplierID" : 12,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 0.5 l bottles",
+    "UnitPrice" : 7.7500,
+    "UnitsInStock" : 125,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 76,
+    "ProductName" : "Lakkalikööri",
+    "SupplierID" : 23,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "500 ml",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 57,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 77,
+    "ProductName" : "Original Frankfurter grüne Soße",
+    "SupplierID" : 12,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 boxes",
+    "UnitPrice" : 13.0000,
+    "UnitsInStock" : 32,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}]
diff --git a/vue-options-api-demos/grid/styling/styling-class-name/main.js b/vue-options-api-demos/grid/styling/styling-class-name/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/styling/styling-class-name/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/styling/styling-class-name/main.vue b/vue-options-api-demos/grid/styling/styling-class-name/main.vue
new file mode 100644
index 00000000..771d997c
--- /dev/null
+++ b/vue-options-api-demos/grid/styling/styling-class-name/main.vue
@@ -0,0 +1,38 @@
+<template>
+        <grid
+            :style="{height: '280px'}"
+            :data-items="items"
+            :columns="columns"
+            >
+        </grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import products from "./products.json";
+
+export default {
+    components: {
+        'grid': Grid
+    },
+    data: function () {
+        return {
+            columns: [
+                { field: 'ProductID', title: 'ID', width: "40px" },
+                { field: 'ProductName', title: 'Product Name', className: "product-name " },
+                { field: 'Category.CategoryName', title: 'CategoryName' },
+                { field: 'UnitPrice', title: 'Price'  },
+                { field: 'UnitsInStock', title: 'In stock' }
+            ],
+            items: products.slice(0, 6)
+        };
+    }
+};
+
+</script>
+
+<style>
+    .product-name {
+        color: #F0FFFF;
+        background-color: #888888;
+    }
+</style>
\ No newline at end of file
diff --git a/vue-options-api-demos/grid/styling/styling-class-name/products.json b/vue-options-api-demos/grid/styling/styling-class-name/products.json
new file mode 100644
index 00000000..4df1c408
--- /dev/null
+++ b/vue-options-api-demos/grid/styling/styling-class-name/products.json
@@ -0,0 +1,1233 @@
+[{
+    "ProductID" : 1,
+    "ProductName" : "Chai",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "10 boxes x 20 bags",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 2,
+    "ProductName" : "Chang",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 3,
+    "ProductName" : "Aniseed Syrup",
+    "SupplierID" : 1,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 550 ml bottles",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 13,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 4,
+    "ProductName" : "Chef Anton's Cajun Seasoning",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "48 - 6 oz jars",
+    "UnitPrice" : 22.0000,
+    "UnitsInStock" : 53,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 5,
+    "ProductName" : "Chef Anton's Gumbo Mix",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "36 boxes",
+    "UnitPrice" : 21.3500,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 6,
+    "ProductName" : "Grandma's Boysenberry Spread",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 8 oz jars",
+    "UnitPrice" : 25.0000,
+    "UnitsInStock" : 120,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 7,
+    "ProductName" : "Uncle Bob's Organic Dried Pears",
+    "SupplierID" : 3,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "12 - 1 lb pkgs.",
+    "UnitPrice" : 30.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 8,
+    "ProductName" : "Northwoods Cranberry Sauce",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 12 oz jars",
+    "UnitPrice" : 40.0000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 9,
+    "ProductName" : "Mishi Kobe Niku",
+    "SupplierID" : 4,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "18 - 500 g pkgs.",
+    "UnitPrice" : 97.0000,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 10,
+    "ProductName" : "Ikura",
+    "SupplierID" : 4,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 200 ml jars",
+    "UnitPrice" : 31.0000,
+    "UnitsInStock" : 31,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 11,
+    "ProductName" : "Queso Cabrales",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "1 kg pkg.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 30,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 12,
+    "ProductName" : "Queso Manchego La Pastora",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 86,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 13,
+    "ProductName" : "Konbu",
+    "SupplierID" : 6,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "2 kg box",
+    "UnitPrice" : 6.0000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 14,
+    "ProductName" : "Tofu",
+    "SupplierID" : 6,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "40 - 100 g pkgs.",
+    "UnitPrice" : 23.2500,
+    "UnitsInStock" : 35,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 15,
+    "ProductName" : "Genen Shouyu",
+    "SupplierID" : 6,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 250 ml bottles",
+    "UnitPrice" : 15.5000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 16,
+    "ProductName" : "Pavlova",
+    "SupplierID" : 7,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "32 - 500 g boxes",
+    "UnitPrice" : 17.4500,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 17,
+    "ProductName" : "Alice Mutton",
+    "SupplierID" : 7,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "20 - 1 kg tins",
+    "UnitPrice" : 39.0000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 18,
+    "ProductName" : "Carnarvon Tigers",
+    "SupplierID" : 7,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "16 kg pkg.",
+    "UnitPrice" : 62.5000,
+    "UnitsInStock" : 42,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 19,
+    "ProductName" : "Teatime Chocolate Biscuits",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 12 pieces",
+    "UnitPrice" : 9.2000,
+    "UnitsInStock" : 25,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 20,
+    "ProductName" : "Sir Rodney's Marmalade",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "30 gift boxes",
+    "UnitPrice" : 81.0000,
+    "UnitsInStock" : 40,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 21,
+    "ProductName" : "Sir Rodney's Scones",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 pkgs. x 4 pieces",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 3,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 22,
+    "ProductName" : "Gustaf's Knäckebröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 500 g pkgs.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 104,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 23,
+    "ProductName" : "Tunnbröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "12 - 250 g pkgs.",
+    "UnitPrice" : 9.0000,
+    "UnitsInStock" : 61,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 24,
+    "ProductName" : "Guaraná Fantástica",
+    "SupplierID" : 10,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 355 ml cans",
+    "UnitPrice" : 4.5000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 25,
+    "ProductName" : "NuNuCa Nuß-Nougat-Creme",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "20 - 450 g glasses",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 26,
+    "ProductName" : "Gumbär Gummibärchen",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 250 g bags",
+    "UnitPrice" : 31.2300,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 27,
+    "ProductName" : "Schoggi Schokolade",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 100 g pieces",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 49,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 28,
+    "ProductName" : "Rössle Sauerkraut",
+    "SupplierID" : 12,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "25 - 825 g cans",
+    "UnitPrice" : 45.6000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 29,
+    "ProductName" : "Thüringer Rostbratwurst",
+    "SupplierID" : 12,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "50 bags x 30 sausgs.",
+    "UnitPrice" : 123.7900,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 30,
+    "ProductName" : "Nord-Ost Matjeshering",
+    "SupplierID" : 13,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "10 - 200 g glasses",
+    "UnitPrice" : 25.8900,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 31,
+    "ProductName" : "Gorgonzola Telino",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "12 - 100 g pkgs",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 32,
+    "ProductName" : "Mascarpone Fabioli",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 32.0000,
+    "UnitsInStock" : 9,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 33,
+    "ProductName" : "Geitost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "500 g",
+    "UnitPrice" : 2.5000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 34,
+    "ProductName" : "Sasquatch Ale",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 111,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 35,
+    "ProductName" : "Steeleye Stout",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 36,
+    "ProductName" : "Inlagd Sill",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 250 g  jars",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 37,
+    "ProductName" : "Gravad lax",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 500 g pkgs.",
+    "UnitPrice" : 26.0000,
+    "UnitsInStock" : 11,
+    "UnitsOnOrder" : 50,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 38,
+    "ProductName" : "Côte de Blaye",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 75 cl bottles",
+    "UnitPrice" : 263.5000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 39,
+    "ProductName" : "Chartreuse verte",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "750 cc per bottle",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 69,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 40,
+    "ProductName" : "Boston Crab Meat",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 4 oz tins",
+    "UnitPrice" : 18.4000,
+    "UnitsInStock" : 123,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 41,
+    "ProductName" : "Jack's New England Clam Chowder",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 12 oz cans",
+    "UnitPrice" : 9.6500,
+    "UnitsInStock" : 85,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 42,
+    "ProductName" : "Singaporean Hokkien Fried Mee",
+    "SupplierID" : 20,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "32 - 1 kg pkgs.",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 43,
+    "ProductName" : "Ipoh Coffee",
+    "SupplierID" : 20,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "16 - 500 g tins",
+    "UnitPrice" : 46.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 44,
+    "ProductName" : "Gula Malacca",
+    "SupplierID" : 20,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "20 - 2 kg bags",
+    "UnitPrice" : 19.4500,
+    "UnitsInStock" : 27,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 45,
+    "ProductName" : "Rogede sild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "1k pkg.",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 5,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 46,
+    "ProductName" : "Spegesild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "4 - 450 g glasses",
+    "UnitPrice" : 12.0000,
+    "UnitsInStock" : 95,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 47,
+    "ProductName" : "Zaanse koeken",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 - 4 oz boxes",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 48,
+    "ProductName" : "Chocolade",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 pkgs.",
+    "UnitPrice" : 12.7500,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 49,
+    "ProductName" : "Maxilaku",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 - 50 g pkgs.",
+    "UnitPrice" : 20.0000,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 60,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 50,
+    "ProductName" : "Valkoinen suklaa",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "12 - 100 g bars",
+    "UnitPrice" : 16.2500,
+    "UnitsInStock" : 65,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 51,
+    "ProductName" : "Manjimup Dried Apples",
+    "SupplierID" : 24,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "50 - 300 g pkgs.",
+    "UnitPrice" : 53.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 52,
+    "ProductName" : "Filo Mix",
+    "SupplierID" : 24,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "16 - 2 kg boxes",
+    "UnitPrice" : 7.0000,
+    "UnitsInStock" : 38,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 53,
+    "ProductName" : "Perth Pasties",
+    "SupplierID" : 24,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "48 pieces",
+    "UnitPrice" : 32.8000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 54,
+    "ProductName" : "Tourtière",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "16 pies",
+    "UnitPrice" : 7.4500,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 55,
+    "ProductName" : "Pâté chinois",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "24 boxes x 2 pies",
+    "UnitPrice" : 24.0000,
+    "UnitsInStock" : 115,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 56,
+    "ProductName" : "Gnocchi di nonna Alice",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 57,
+    "ProductName" : "Ravioli Angelo",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 19.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 58,
+    "ProductName" : "Escargots de Bourgogne",
+    "SupplierID" : 27,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 pieces",
+    "UnitPrice" : 13.2500,
+    "UnitsInStock" : 62,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 59,
+    "ProductName" : "Raclette Courdavault",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 55.0000,
+    "UnitsInStock" : 79,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 60,
+    "ProductName" : "Camembert Pierrot",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "15 - 300 g rounds",
+    "UnitPrice" : 34.0000,
+    "UnitsInStock" : 19,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 61,
+    "ProductName" : "Sirop d'érable",
+    "SupplierID" : 29,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 500 ml bottles",
+    "UnitPrice" : 28.5000,
+    "UnitsInStock" : 113,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 62,
+    "ProductName" : "Tarte au sucre",
+    "SupplierID" : 29,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "48 pies",
+    "UnitPrice" : 49.3000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 63,
+    "ProductName" : "Vegie-spread",
+    "SupplierID" : 7,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "15 - 625 g jars",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 64,
+    "ProductName" : "Wimmers gute Semmelknödel",
+    "SupplierID" : 12,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "20 bags x 4 pieces",
+    "UnitPrice" : 33.2500,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 80,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 65,
+    "ProductName" : "Louisiana Fiery Hot Pepper Sauce",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "32 - 8 oz bottles",
+    "UnitPrice" : 21.0500,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 66,
+    "ProductName" : "Louisiana Hot Spiced Okra",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 8 oz jars",
+    "UnitPrice" : 17.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 100,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 67,
+    "ProductName" : "Laughing Lumberjack Lager",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 52,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 68,
+    "ProductName" : "Scottish Longbreads",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 8 pieces",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 69,
+    "ProductName" : "Gudbrandsdalsost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 kg pkg.",
+    "UnitPrice" : 36.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 70,
+    "ProductName" : "Outback Lager",
+    "SupplierID" : 7,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 355 ml bottles",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 71,
+    "ProductName" : "Flotemysost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 21.5000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 72,
+    "ProductName" : "Mozzarella di Giovanni",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 34.8000,
+    "UnitsInStock" : 14,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 73,
+    "ProductName" : "Röd Kaviar",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 150 g jars",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 101,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 74,
+    "ProductName" : "Longlife Tofu",
+    "SupplierID" : 4,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 20,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 75,
+    "ProductName" : "Rhönbräu Klosterbier",
+    "SupplierID" : 12,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 0.5 l bottles",
+    "UnitPrice" : 7.7500,
+    "UnitsInStock" : 125,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 76,
+    "ProductName" : "Lakkalikööri",
+    "SupplierID" : 23,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "500 ml",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 57,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 77,
+    "ProductName" : "Original Frankfurter grüne Soße",
+    "SupplierID" : 12,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 boxes",
+    "UnitPrice" : 13.0000,
+    "UnitsInStock" : 32,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}]
diff --git a/vue-options-api-demos/grid/styling/styling-dynamic/main.js b/vue-options-api-demos/grid/styling/styling-dynamic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/styling/styling-dynamic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/styling/styling-dynamic/main.vue b/vue-options-api-demos/grid/styling/styling-dynamic/main.vue
new file mode 100644
index 00000000..30bf410d
--- /dev/null
+++ b/vue-options-api-demos/grid/styling/styling-dynamic/main.vue
@@ -0,0 +1,81 @@
+<template>
+        <grid
+            :data-items="data"
+            :columns="columns"
+            :editField="'inEdit'"
+            :scrollable="'none'"
+            @itemchange="itemChange"
+            >
+        </grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+
+export default {
+    components: {
+        'grid': Grid
+    },
+    data: function () {
+        return {
+            columns: [
+                { field: 'ProductName', title: 'Product Name', editable: false },
+                { field: 'UnitPrice', title: 'Price', editor: "numeric" },
+                { field: 'UnitsOnOrder', title: 'Units On Order', editor: "numeric" },
+                { title: "Total value", cell: this.cellWithBackGround}
+            ],
+            data: null,
+            initialData: [
+                            {
+                                ProductID: 1,
+                                ProductName: "Tea",
+                                UnitPrice: 18,
+                                UnitsOnOrder: 20,
+                                inEdit: true,
+                            },
+                            {
+                                ProductID: 2,
+                                ProductName: "Coffee",
+                                UnitPrice: 10,
+                                UnitsOnOrder: 55,
+                                inEdit: true,
+                            }
+                        ]
+        };
+    },
+    mounted: function(){
+        this.data = this.initialData;
+    },
+    methods: {
+        itemChange: function(event){
+            const field = event.field || "";
+            event.dataItem[field] = event.value;
+            let newData = this.data.map((item) => {
+                if (item.ProductID === event.dataItem.ProductID) {
+                    item[field] = event.value;
+                }
+
+                return item;
+            });
+            this.data = newData;
+        },
+        cellWithBackGround : function (h, tdElement , props, listeners ) {
+            const product = props.dataItem.UnitPrice * props.dataItem.UnitsOnOrder;
+            
+            if (product < 400) {
+                return h('td', 
+                        {
+                            style:{"background-color": "rgb(55, 180, 0,0.32)"}
+                        }, 
+                        [product]);
+            }
+
+            return h('td', 
+                        {
+                            style:{"background-color": "rgb(243, 23, 0, 0.32)"}
+                        }, 
+                        [product, h('span', {}, ' Maximum exceeded')]);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/styling/styling-header-cell/main.js b/vue-options-api-demos/grid/styling/styling-header-cell/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/styling/styling-header-cell/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/styling/styling-header-cell/main.vue b/vue-options-api-demos/grid/styling/styling-header-cell/main.vue
new file mode 100644
index 00000000..3c814aa8
--- /dev/null
+++ b/vue-options-api-demos/grid/styling/styling-header-cell/main.vue
@@ -0,0 +1,40 @@
+<template>
+        <grid
+            :style="{height: '230px'}"
+            :data-items="items"
+            :columns="columns"
+            >
+            <template v-slot:myHeaderTemplate="{props}">
+                    <a class="k-link" @click="props.onClick">
+                        <span class="k-icon k-i-cart" />
+                        <span style="color: #53d2fa">
+                            {{props.title}}
+                        </span>
+                            {{props.children}}
+                        </a>
+            </template>
+        </grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import products from "./products.json";
+
+export default {
+    components: {
+        'grid': Grid
+    },
+    data: function () {
+        return {
+            columns: [
+                { field: 'ProductID', title: 'ID', width: "40px" },
+                { field: 'ProductName', title: 'Product Name', headerCell: "myHeaderTemplate" },
+                { field: 'Category.CategoryName', title: 'CategoryName' },
+                { field: 'UnitPrice', title: 'Price'  },
+                { field: 'UnitsInStock', title: 'In stock' }
+            ],
+            items: products.slice(0, 6)
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/styling/styling-header-cell/products.json b/vue-options-api-demos/grid/styling/styling-header-cell/products.json
new file mode 100644
index 00000000..4df1c408
--- /dev/null
+++ b/vue-options-api-demos/grid/styling/styling-header-cell/products.json
@@ -0,0 +1,1233 @@
+[{
+    "ProductID" : 1,
+    "ProductName" : "Chai",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "10 boxes x 20 bags",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 2,
+    "ProductName" : "Chang",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 3,
+    "ProductName" : "Aniseed Syrup",
+    "SupplierID" : 1,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 550 ml bottles",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 13,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 4,
+    "ProductName" : "Chef Anton's Cajun Seasoning",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "48 - 6 oz jars",
+    "UnitPrice" : 22.0000,
+    "UnitsInStock" : 53,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 5,
+    "ProductName" : "Chef Anton's Gumbo Mix",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "36 boxes",
+    "UnitPrice" : 21.3500,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 6,
+    "ProductName" : "Grandma's Boysenberry Spread",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 8 oz jars",
+    "UnitPrice" : 25.0000,
+    "UnitsInStock" : 120,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 7,
+    "ProductName" : "Uncle Bob's Organic Dried Pears",
+    "SupplierID" : 3,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "12 - 1 lb pkgs.",
+    "UnitPrice" : 30.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 8,
+    "ProductName" : "Northwoods Cranberry Sauce",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 12 oz jars",
+    "UnitPrice" : 40.0000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 9,
+    "ProductName" : "Mishi Kobe Niku",
+    "SupplierID" : 4,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "18 - 500 g pkgs.",
+    "UnitPrice" : 97.0000,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 10,
+    "ProductName" : "Ikura",
+    "SupplierID" : 4,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 200 ml jars",
+    "UnitPrice" : 31.0000,
+    "UnitsInStock" : 31,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 11,
+    "ProductName" : "Queso Cabrales",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "1 kg pkg.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 30,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 12,
+    "ProductName" : "Queso Manchego La Pastora",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 86,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 13,
+    "ProductName" : "Konbu",
+    "SupplierID" : 6,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "2 kg box",
+    "UnitPrice" : 6.0000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 14,
+    "ProductName" : "Tofu",
+    "SupplierID" : 6,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "40 - 100 g pkgs.",
+    "UnitPrice" : 23.2500,
+    "UnitsInStock" : 35,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 15,
+    "ProductName" : "Genen Shouyu",
+    "SupplierID" : 6,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 250 ml bottles",
+    "UnitPrice" : 15.5000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 16,
+    "ProductName" : "Pavlova",
+    "SupplierID" : 7,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "32 - 500 g boxes",
+    "UnitPrice" : 17.4500,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 17,
+    "ProductName" : "Alice Mutton",
+    "SupplierID" : 7,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "20 - 1 kg tins",
+    "UnitPrice" : 39.0000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 18,
+    "ProductName" : "Carnarvon Tigers",
+    "SupplierID" : 7,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "16 kg pkg.",
+    "UnitPrice" : 62.5000,
+    "UnitsInStock" : 42,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 19,
+    "ProductName" : "Teatime Chocolate Biscuits",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 12 pieces",
+    "UnitPrice" : 9.2000,
+    "UnitsInStock" : 25,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 20,
+    "ProductName" : "Sir Rodney's Marmalade",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "30 gift boxes",
+    "UnitPrice" : 81.0000,
+    "UnitsInStock" : 40,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 21,
+    "ProductName" : "Sir Rodney's Scones",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 pkgs. x 4 pieces",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 3,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 22,
+    "ProductName" : "Gustaf's Knäckebröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 500 g pkgs.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 104,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 23,
+    "ProductName" : "Tunnbröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "12 - 250 g pkgs.",
+    "UnitPrice" : 9.0000,
+    "UnitsInStock" : 61,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 24,
+    "ProductName" : "Guaraná Fantástica",
+    "SupplierID" : 10,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 355 ml cans",
+    "UnitPrice" : 4.5000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 25,
+    "ProductName" : "NuNuCa Nuß-Nougat-Creme",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "20 - 450 g glasses",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 26,
+    "ProductName" : "Gumbär Gummibärchen",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 250 g bags",
+    "UnitPrice" : 31.2300,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 27,
+    "ProductName" : "Schoggi Schokolade",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 100 g pieces",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 49,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 28,
+    "ProductName" : "Rössle Sauerkraut",
+    "SupplierID" : 12,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "25 - 825 g cans",
+    "UnitPrice" : 45.6000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 29,
+    "ProductName" : "Thüringer Rostbratwurst",
+    "SupplierID" : 12,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "50 bags x 30 sausgs.",
+    "UnitPrice" : 123.7900,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 30,
+    "ProductName" : "Nord-Ost Matjeshering",
+    "SupplierID" : 13,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "10 - 200 g glasses",
+    "UnitPrice" : 25.8900,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 31,
+    "ProductName" : "Gorgonzola Telino",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "12 - 100 g pkgs",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 32,
+    "ProductName" : "Mascarpone Fabioli",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 32.0000,
+    "UnitsInStock" : 9,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 33,
+    "ProductName" : "Geitost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "500 g",
+    "UnitPrice" : 2.5000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 34,
+    "ProductName" : "Sasquatch Ale",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 111,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 35,
+    "ProductName" : "Steeleye Stout",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 36,
+    "ProductName" : "Inlagd Sill",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 250 g  jars",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 37,
+    "ProductName" : "Gravad lax",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 500 g pkgs.",
+    "UnitPrice" : 26.0000,
+    "UnitsInStock" : 11,
+    "UnitsOnOrder" : 50,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 38,
+    "ProductName" : "Côte de Blaye",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 75 cl bottles",
+    "UnitPrice" : 263.5000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 39,
+    "ProductName" : "Chartreuse verte",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "750 cc per bottle",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 69,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 40,
+    "ProductName" : "Boston Crab Meat",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 4 oz tins",
+    "UnitPrice" : 18.4000,
+    "UnitsInStock" : 123,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 41,
+    "ProductName" : "Jack's New England Clam Chowder",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 12 oz cans",
+    "UnitPrice" : 9.6500,
+    "UnitsInStock" : 85,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 42,
+    "ProductName" : "Singaporean Hokkien Fried Mee",
+    "SupplierID" : 20,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "32 - 1 kg pkgs.",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 43,
+    "ProductName" : "Ipoh Coffee",
+    "SupplierID" : 20,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "16 - 500 g tins",
+    "UnitPrice" : 46.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 44,
+    "ProductName" : "Gula Malacca",
+    "SupplierID" : 20,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "20 - 2 kg bags",
+    "UnitPrice" : 19.4500,
+    "UnitsInStock" : 27,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 45,
+    "ProductName" : "Rogede sild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "1k pkg.",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 5,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 46,
+    "ProductName" : "Spegesild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "4 - 450 g glasses",
+    "UnitPrice" : 12.0000,
+    "UnitsInStock" : 95,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 47,
+    "ProductName" : "Zaanse koeken",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 - 4 oz boxes",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 48,
+    "ProductName" : "Chocolade",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 pkgs.",
+    "UnitPrice" : 12.7500,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 49,
+    "ProductName" : "Maxilaku",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 - 50 g pkgs.",
+    "UnitPrice" : 20.0000,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 60,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 50,
+    "ProductName" : "Valkoinen suklaa",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "12 - 100 g bars",
+    "UnitPrice" : 16.2500,
+    "UnitsInStock" : 65,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 51,
+    "ProductName" : "Manjimup Dried Apples",
+    "SupplierID" : 24,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "50 - 300 g pkgs.",
+    "UnitPrice" : 53.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 52,
+    "ProductName" : "Filo Mix",
+    "SupplierID" : 24,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "16 - 2 kg boxes",
+    "UnitPrice" : 7.0000,
+    "UnitsInStock" : 38,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 53,
+    "ProductName" : "Perth Pasties",
+    "SupplierID" : 24,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "48 pieces",
+    "UnitPrice" : 32.8000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 54,
+    "ProductName" : "Tourtière",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "16 pies",
+    "UnitPrice" : 7.4500,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 55,
+    "ProductName" : "Pâté chinois",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "24 boxes x 2 pies",
+    "UnitPrice" : 24.0000,
+    "UnitsInStock" : 115,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 56,
+    "ProductName" : "Gnocchi di nonna Alice",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 57,
+    "ProductName" : "Ravioli Angelo",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 19.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 58,
+    "ProductName" : "Escargots de Bourgogne",
+    "SupplierID" : 27,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 pieces",
+    "UnitPrice" : 13.2500,
+    "UnitsInStock" : 62,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 59,
+    "ProductName" : "Raclette Courdavault",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 55.0000,
+    "UnitsInStock" : 79,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 60,
+    "ProductName" : "Camembert Pierrot",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "15 - 300 g rounds",
+    "UnitPrice" : 34.0000,
+    "UnitsInStock" : 19,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 61,
+    "ProductName" : "Sirop d'érable",
+    "SupplierID" : 29,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 500 ml bottles",
+    "UnitPrice" : 28.5000,
+    "UnitsInStock" : 113,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 62,
+    "ProductName" : "Tarte au sucre",
+    "SupplierID" : 29,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "48 pies",
+    "UnitPrice" : 49.3000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 63,
+    "ProductName" : "Vegie-spread",
+    "SupplierID" : 7,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "15 - 625 g jars",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 64,
+    "ProductName" : "Wimmers gute Semmelknödel",
+    "SupplierID" : 12,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "20 bags x 4 pieces",
+    "UnitPrice" : 33.2500,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 80,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 65,
+    "ProductName" : "Louisiana Fiery Hot Pepper Sauce",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "32 - 8 oz bottles",
+    "UnitPrice" : 21.0500,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 66,
+    "ProductName" : "Louisiana Hot Spiced Okra",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 8 oz jars",
+    "UnitPrice" : 17.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 100,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 67,
+    "ProductName" : "Laughing Lumberjack Lager",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 52,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 68,
+    "ProductName" : "Scottish Longbreads",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 8 pieces",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 69,
+    "ProductName" : "Gudbrandsdalsost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 kg pkg.",
+    "UnitPrice" : 36.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 70,
+    "ProductName" : "Outback Lager",
+    "SupplierID" : 7,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 355 ml bottles",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 71,
+    "ProductName" : "Flotemysost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 21.5000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 72,
+    "ProductName" : "Mozzarella di Giovanni",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 34.8000,
+    "UnitsInStock" : 14,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 73,
+    "ProductName" : "Röd Kaviar",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 150 g jars",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 101,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 74,
+    "ProductName" : "Longlife Tofu",
+    "SupplierID" : 4,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 20,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 75,
+    "ProductName" : "Rhönbräu Klosterbier",
+    "SupplierID" : 12,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 0.5 l bottles",
+    "UnitPrice" : 7.7500,
+    "UnitsInStock" : 125,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 76,
+    "ProductName" : "Lakkalikööri",
+    "SupplierID" : 23,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "500 ml",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 57,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 77,
+    "ProductName" : "Original Frankfurter grüne Soße",
+    "SupplierID" : 12,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 boxes",
+    "UnitPrice" : 13.0000,
+    "UnitsInStock" : 32,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}]
diff --git a/vue-options-api-demos/grid/styling/styling-row/main.js b/vue-options-api-demos/grid/styling/styling-row/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/grid/styling/styling-row/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/grid/styling/styling-row/main.vue b/vue-options-api-demos/grid/styling/styling-row/main.vue
new file mode 100644
index 00000000..e113bba7
--- /dev/null
+++ b/vue-options-api-demos/grid/styling/styling-row/main.vue
@@ -0,0 +1,50 @@
+<template>
+        <grid
+            :style="{height: '400px'}"
+            :data-items="items"
+            :columns="columns"
+            :row-render="cellFunction"
+            >
+        </grid>
+</template>
+<script>
+import { Grid } from '@progress/kendo-vue-grid';
+import products from "./products.json";
+
+export default {
+    components: {
+        'grid': Grid
+    },
+    data: function () {
+        return {
+            columns: [
+                { field: 'ProductName', title: 'Product Name' },
+                { field: 'UnitPrice', title: 'Price'  },
+                { field: 'UnitsInStock', title: 'In stock' },
+                { field: 'Discontinued'},
+            ],
+            items: products
+        };
+    },
+    methods: {
+        cellFunction: function (h, trElement , defaultSlots, props ) {
+            const available = !props.dataItem.Discontinued;
+            const green = {
+                backgroundColor: "rgb(55, 180, 0,0.32)",
+            };
+            const red = {
+                backgroundColor: "rgb(243, 23, 0, 0.32)",
+            };
+            const trProps = {
+                style: available ? green : red,
+            };
+   
+            return h(
+                'tr',
+                trProps,
+                defaultSlots);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/grid/styling/styling-row/products.json b/vue-options-api-demos/grid/styling/styling-row/products.json
new file mode 100644
index 00000000..4df1c408
--- /dev/null
+++ b/vue-options-api-demos/grid/styling/styling-row/products.json
@@ -0,0 +1,1233 @@
+[{
+    "ProductID" : 1,
+    "ProductName" : "Chai",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "10 boxes x 20 bags",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 2,
+    "ProductName" : "Chang",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 3,
+    "ProductName" : "Aniseed Syrup",
+    "SupplierID" : 1,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 550 ml bottles",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 13,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 4,
+    "ProductName" : "Chef Anton's Cajun Seasoning",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "48 - 6 oz jars",
+    "UnitPrice" : 22.0000,
+    "UnitsInStock" : 53,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 5,
+    "ProductName" : "Chef Anton's Gumbo Mix",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "36 boxes",
+    "UnitPrice" : 21.3500,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 6,
+    "ProductName" : "Grandma's Boysenberry Spread",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 8 oz jars",
+    "UnitPrice" : 25.0000,
+    "UnitsInStock" : 120,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 7,
+    "ProductName" : "Uncle Bob's Organic Dried Pears",
+    "SupplierID" : 3,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "12 - 1 lb pkgs.",
+    "UnitPrice" : 30.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 8,
+    "ProductName" : "Northwoods Cranberry Sauce",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 12 oz jars",
+    "UnitPrice" : 40.0000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 9,
+    "ProductName" : "Mishi Kobe Niku",
+    "SupplierID" : 4,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "18 - 500 g pkgs.",
+    "UnitPrice" : 97.0000,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 10,
+    "ProductName" : "Ikura",
+    "SupplierID" : 4,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 200 ml jars",
+    "UnitPrice" : 31.0000,
+    "UnitsInStock" : 31,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 11,
+    "ProductName" : "Queso Cabrales",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "1 kg pkg.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 30,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 12,
+    "ProductName" : "Queso Manchego La Pastora",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 86,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 13,
+    "ProductName" : "Konbu",
+    "SupplierID" : 6,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "2 kg box",
+    "UnitPrice" : 6.0000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 14,
+    "ProductName" : "Tofu",
+    "SupplierID" : 6,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "40 - 100 g pkgs.",
+    "UnitPrice" : 23.2500,
+    "UnitsInStock" : 35,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 15,
+    "ProductName" : "Genen Shouyu",
+    "SupplierID" : 6,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 250 ml bottles",
+    "UnitPrice" : 15.5000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 16,
+    "ProductName" : "Pavlova",
+    "SupplierID" : 7,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "32 - 500 g boxes",
+    "UnitPrice" : 17.4500,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 17,
+    "ProductName" : "Alice Mutton",
+    "SupplierID" : 7,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "20 - 1 kg tins",
+    "UnitPrice" : 39.0000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 18,
+    "ProductName" : "Carnarvon Tigers",
+    "SupplierID" : 7,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "16 kg pkg.",
+    "UnitPrice" : 62.5000,
+    "UnitsInStock" : 42,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 19,
+    "ProductName" : "Teatime Chocolate Biscuits",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 12 pieces",
+    "UnitPrice" : 9.2000,
+    "UnitsInStock" : 25,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 20,
+    "ProductName" : "Sir Rodney's Marmalade",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "30 gift boxes",
+    "UnitPrice" : 81.0000,
+    "UnitsInStock" : 40,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 21,
+    "ProductName" : "Sir Rodney's Scones",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 pkgs. x 4 pieces",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 3,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 22,
+    "ProductName" : "Gustaf's Knäckebröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 500 g pkgs.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 104,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 23,
+    "ProductName" : "Tunnbröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "12 - 250 g pkgs.",
+    "UnitPrice" : 9.0000,
+    "UnitsInStock" : 61,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 24,
+    "ProductName" : "Guaraná Fantástica",
+    "SupplierID" : 10,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 355 ml cans",
+    "UnitPrice" : 4.5000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 25,
+    "ProductName" : "NuNuCa Nuß-Nougat-Creme",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "20 - 450 g glasses",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 26,
+    "ProductName" : "Gumbär Gummibärchen",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 250 g bags",
+    "UnitPrice" : 31.2300,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 27,
+    "ProductName" : "Schoggi Schokolade",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 100 g pieces",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 49,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 28,
+    "ProductName" : "Rössle Sauerkraut",
+    "SupplierID" : 12,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "25 - 825 g cans",
+    "UnitPrice" : 45.6000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 29,
+    "ProductName" : "Thüringer Rostbratwurst",
+    "SupplierID" : 12,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "50 bags x 30 sausgs.",
+    "UnitPrice" : 123.7900,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 30,
+    "ProductName" : "Nord-Ost Matjeshering",
+    "SupplierID" : 13,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "10 - 200 g glasses",
+    "UnitPrice" : 25.8900,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 31,
+    "ProductName" : "Gorgonzola Telino",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "12 - 100 g pkgs",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 32,
+    "ProductName" : "Mascarpone Fabioli",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 32.0000,
+    "UnitsInStock" : 9,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 33,
+    "ProductName" : "Geitost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "500 g",
+    "UnitPrice" : 2.5000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 34,
+    "ProductName" : "Sasquatch Ale",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 111,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 35,
+    "ProductName" : "Steeleye Stout",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 36,
+    "ProductName" : "Inlagd Sill",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 250 g  jars",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 37,
+    "ProductName" : "Gravad lax",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 500 g pkgs.",
+    "UnitPrice" : 26.0000,
+    "UnitsInStock" : 11,
+    "UnitsOnOrder" : 50,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 38,
+    "ProductName" : "Côte de Blaye",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 75 cl bottles",
+    "UnitPrice" : 263.5000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 39,
+    "ProductName" : "Chartreuse verte",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "750 cc per bottle",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 69,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 40,
+    "ProductName" : "Boston Crab Meat",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 4 oz tins",
+    "UnitPrice" : 18.4000,
+    "UnitsInStock" : 123,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 41,
+    "ProductName" : "Jack's New England Clam Chowder",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 12 oz cans",
+    "UnitPrice" : 9.6500,
+    "UnitsInStock" : 85,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 42,
+    "ProductName" : "Singaporean Hokkien Fried Mee",
+    "SupplierID" : 20,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "32 - 1 kg pkgs.",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 43,
+    "ProductName" : "Ipoh Coffee",
+    "SupplierID" : 20,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "16 - 500 g tins",
+    "UnitPrice" : 46.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 44,
+    "ProductName" : "Gula Malacca",
+    "SupplierID" : 20,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "20 - 2 kg bags",
+    "UnitPrice" : 19.4500,
+    "UnitsInStock" : 27,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 45,
+    "ProductName" : "Rogede sild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "1k pkg.",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 5,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 46,
+    "ProductName" : "Spegesild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "4 - 450 g glasses",
+    "UnitPrice" : 12.0000,
+    "UnitsInStock" : 95,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 47,
+    "ProductName" : "Zaanse koeken",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 - 4 oz boxes",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 48,
+    "ProductName" : "Chocolade",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 pkgs.",
+    "UnitPrice" : 12.7500,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 49,
+    "ProductName" : "Maxilaku",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 - 50 g pkgs.",
+    "UnitPrice" : 20.0000,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 60,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 50,
+    "ProductName" : "Valkoinen suklaa",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "12 - 100 g bars",
+    "UnitPrice" : 16.2500,
+    "UnitsInStock" : 65,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 51,
+    "ProductName" : "Manjimup Dried Apples",
+    "SupplierID" : 24,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "50 - 300 g pkgs.",
+    "UnitPrice" : 53.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 52,
+    "ProductName" : "Filo Mix",
+    "SupplierID" : 24,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "16 - 2 kg boxes",
+    "UnitPrice" : 7.0000,
+    "UnitsInStock" : 38,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 53,
+    "ProductName" : "Perth Pasties",
+    "SupplierID" : 24,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "48 pieces",
+    "UnitPrice" : 32.8000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 54,
+    "ProductName" : "Tourtière",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "16 pies",
+    "UnitPrice" : 7.4500,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 55,
+    "ProductName" : "Pâté chinois",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "24 boxes x 2 pies",
+    "UnitPrice" : 24.0000,
+    "UnitsInStock" : 115,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 56,
+    "ProductName" : "Gnocchi di nonna Alice",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 57,
+    "ProductName" : "Ravioli Angelo",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 19.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 58,
+    "ProductName" : "Escargots de Bourgogne",
+    "SupplierID" : 27,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 pieces",
+    "UnitPrice" : 13.2500,
+    "UnitsInStock" : 62,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 59,
+    "ProductName" : "Raclette Courdavault",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 55.0000,
+    "UnitsInStock" : 79,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 60,
+    "ProductName" : "Camembert Pierrot",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "15 - 300 g rounds",
+    "UnitPrice" : 34.0000,
+    "UnitsInStock" : 19,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 61,
+    "ProductName" : "Sirop d'érable",
+    "SupplierID" : 29,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 500 ml bottles",
+    "UnitPrice" : 28.5000,
+    "UnitsInStock" : 113,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 62,
+    "ProductName" : "Tarte au sucre",
+    "SupplierID" : 29,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "48 pies",
+    "UnitPrice" : 49.3000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 63,
+    "ProductName" : "Vegie-spread",
+    "SupplierID" : 7,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "15 - 625 g jars",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 64,
+    "ProductName" : "Wimmers gute Semmelknödel",
+    "SupplierID" : 12,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "20 bags x 4 pieces",
+    "UnitPrice" : 33.2500,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 80,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 65,
+    "ProductName" : "Louisiana Fiery Hot Pepper Sauce",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "32 - 8 oz bottles",
+    "UnitPrice" : 21.0500,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 66,
+    "ProductName" : "Louisiana Hot Spiced Okra",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 8 oz jars",
+    "UnitPrice" : 17.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 100,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 67,
+    "ProductName" : "Laughing Lumberjack Lager",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 52,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 68,
+    "ProductName" : "Scottish Longbreads",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 8 pieces",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 69,
+    "ProductName" : "Gudbrandsdalsost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 kg pkg.",
+    "UnitPrice" : 36.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 70,
+    "ProductName" : "Outback Lager",
+    "SupplierID" : 7,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 355 ml bottles",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 71,
+    "ProductName" : "Flotemysost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 21.5000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 72,
+    "ProductName" : "Mozzarella di Giovanni",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 34.8000,
+    "UnitsInStock" : 14,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 73,
+    "ProductName" : "Röd Kaviar",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 150 g jars",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 101,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 74,
+    "ProductName" : "Longlife Tofu",
+    "SupplierID" : 4,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 20,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 75,
+    "ProductName" : "Rhönbräu Klosterbier",
+    "SupplierID" : 12,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 0.5 l bottles",
+    "UnitPrice" : 7.7500,
+    "UnitsInStock" : 125,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 76,
+    "ProductName" : "Lakkalikööri",
+    "SupplierID" : 23,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "500 ml",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 57,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 77,
+    "ProductName" : "Original Frankfurter grüne Soße",
+    "SupplierID" : 12,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 boxes",
+    "UnitPrice" : 13.0000,
+    "UnitsInStock" : 32,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}]
diff --git a/vue-options-api-demos/indicators/badge/alignment/main.js b/vue-options-api-demos/indicators/badge/alignment/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/indicators/badge/alignment/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/indicators/badge/alignment/main.vue b/vue-options-api-demos/indicators/badge/alignment/main.vue
new file mode 100644
index 00000000..1d6cd1f4
--- /dev/null
+++ b/vue-options-api-demos/indicators/badge/alignment/main.vue
@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <div class="flex-container">
+      <div>Badge Alignment</div>
+      <div class="example">
+        <DropDownList
+          :style="{ width: '200px' }"
+          :data-items="alignments"
+          :value="alignment"
+          :text-field="'title'"
+          :data-item-key="'value'"
+          @change="handleAlignment"
+        />
+      </div>
+    </div>
+    <div class="flex-container">
+      <div class="wrap">
+        <span class="badge">
+          <SvgIcon :icon="calendarIcon" style="width: 36px; color: #6c757d" />
+          <Badge :align="alignment.value">11+</Badge>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Badge } from "@progress/kendo-vue-indicators";
+import { Avatar } from "@progress/kendo-vue-layout";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { calendarIcon } from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    Badge,
+    Avatar,
+    DropDownList,
+    SvgIcon,
+  },
+  data() {
+    return {
+      alignment: {
+        title: "top end",
+        value: {
+          vertical: "top",
+          horizontal: "end",
+        },
+      },
+      alignments: [
+        {
+          title: "top start",
+          value: {
+            vertical: "top",
+            horizontal: "start",
+          },
+        },
+        {
+          title: "top end",
+          value: {
+            vertical: "top",
+            horizontal: "end",
+          },
+        },
+        {
+          title: "bottom start",
+          value: {
+            vertical: "bottom",
+            horizontal: "start",
+          },
+        },
+        {
+          title: "bottom end",
+          value: {
+            vertical: "bottom",
+            horizontal: "end",
+          },
+        },
+      ],
+      calendarIcon,
+    };
+  },
+  methods: {
+    handleAlignment(e) {
+      this.alignment = e.target.value;
+    },
+  },
+};
+</script>
+
+<style>
+.badge {
+  position: relative;
+  overflow: visible;
+}
+
+.flex-container {
+  display: inline-flex;
+  flex-direction: column;
+  vertical-align: middle;
+}
+.example {
+  display: flex;
+  margin-bottom: 30px;
+}
+.wrap {
+  display: flex;
+  justify-content: space-around;
+  padding: 30px;
+  width: 370px;
+}
+</style>
diff --git a/vue-options-api-demos/indicators/badge/container/main.js b/vue-options-api-demos/indicators/badge/container/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/indicators/badge/container/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/indicators/badge/container/main.vue b/vue-options-api-demos/indicators/badge/container/main.vue
new file mode 100644
index 00000000..c9840866
--- /dev/null
+++ b/vue-options-api-demos/indicators/badge/container/main.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="example">
+    <h5>Using the BadgeContainer Component</h5>
+    <div class="wrap">
+      <BadgeContainer
+        :content="'content'"
+        :size="'small'"
+        :rounded="'full'"
+        :align="{
+          vertical: 'bottom',
+          horizontal: 'end',
+        }"
+        :theme-color="'success'"
+        :cutout-border="true"
+      >
+        <Avatar :type="'text'">KP</Avatar>
+        <template v-slot:content>
+          <SvgIcon :icon="checkIcon" :size="'small'" />
+        </template>
+      </BadgeContainer>
+      <BadgeContainer :theme-color="'info'" :shape="'dot'" :content="'content'">
+        Available Updates
+        <template v-slot:content>
+          <SvgIcon :icon="checkIcon" :size="'small'" />
+        </template>
+      </BadgeContainer>
+      <BadgeContainer
+        :content="'content'"
+        :align="{
+          vertical: 'bottom',
+          horizontal: 'end',
+        }"
+        :theme-color="'dark'"
+      >
+        <SvgIcon :icon="copyIcon" style="width: 36px; color: #4eb9ed" />
+        <template v-slot:content> 11 </template>
+      </BadgeContainer>
+      <BadgeContainer :content="'content'">
+        <SvgIcon :icon="cartIcon" style="width: 36px" />
+        <template v-slot:content> 4 </template>
+      </BadgeContainer>
+      <BadgeContainer
+        :content="'content'"
+        :theme-color="'tertiary'"
+        :rounded="'full'"
+      >
+        <KButton>Action</KButton>
+        <template v-slot:content> 3 </template>
+      </BadgeContainer>
+    </div>
+    <h5>Using the Badge Component</h5>
+    <div class="wrap">
+      <span class="mail">
+        Mail
+        <Badge>87</Badge>
+      </span>
+      <span class="updates">
+        Available Updates
+        <Badge :theme-color="'info'" :shape="'dot'">
+          <SvgIcon :icon="checkIcon" :size="'small'" />
+        </Badge>
+      </span>
+      <span class="files">
+        <SvgIcon :icon="copyIcon" style="width: 36px; color: #4eb9ed" />
+        <Badge
+          :align="{
+            vertical: 'bottom',
+            horizontal: 'end',
+          }"
+          :theme-color="'dark'"
+        >
+          11
+        </Badge>
+      </span>
+      <span class="shopping-cart">
+        <SvgIcon :icon="cartIcon" style="width: 36px" :size="'small'" />
+        <Badge>4</Badge>
+      </span>
+      <span class="sent-items">
+        <KButton>
+          Action
+          <Badge :theme-color="'tertiary'" :rounded="'full'">34</Badge>
+        </KButton>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { BadgeContainer, Badge } from "@progress/kendo-vue-indicators";
+import { Avatar } from "@progress/kendo-vue-layout";
+import { Button } from "@progress/kendo-vue-buttons";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { copyIcon, cartIcon, checkIcon } from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    BadgeContainer,
+    Badge,
+    Avatar,
+    KButton: Button,
+    SvgIcon,
+  },
+  data() {
+    return {
+      cartIcon,
+      copyIcon,
+      checkIcon,
+    };
+  },
+};
+</script>
+<style>
+.example > div {
+  margin-bottom: 40px;
+}
+.wrap {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin-bottom: 20px;
+}
+.mail,
+.shopping-cart,
+.updates,
+.files,
+.sent-items {
+  position: relative;
+  overflow: visible;
+}
+</style>
diff --git a/vue-options-api-demos/indicators/badge/cutout-border/main.js b/vue-options-api-demos/indicators/badge/cutout-border/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/indicators/badge/cutout-border/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/indicators/badge/cutout-border/main.vue b/vue-options-api-demos/indicators/badge/cutout-border/main.vue
new file mode 100644
index 00000000..f3368667
--- /dev/null
+++ b/vue-options-api-demos/indicators/badge/cutout-border/main.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="wrap">
+    <span class="badge">
+      <Avatar :rounded="'full'" :type="'image'">
+        <img :src="avatarSrc" :eager="true" :alt="'Avatar Image'" />
+      </Avatar>
+      <Badge
+        :align="{
+          vertical: 'bottom',
+          horizontal: 'end',
+        }"
+        :theme-color="'success'"
+        :cutout-border="true"
+      >
+        <SvgIcon :icon="checkIcon" :size="'small'" />
+      </Badge>
+    </span>
+  </div>
+</template>
+
+<script>
+import { Avatar } from "@progress/kendo-vue-layout";
+import { Badge } from "@progress/kendo-vue-indicators";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { checkIcon } from "@progress/kendo-svg-icons";
+
+const avatarImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/SPLIR.jpg';
+
+export default {
+  components: {
+    Avatar,
+    Badge,
+    SvgIcon,
+  },
+  data() {
+    return {
+      fillOptions: ["solid", "outline"],
+      avatarSrc: avatarImage,
+      checkIcon,
+    };
+  },
+};
+</script>
+
+<style>
+.k-icon {
+  font-size: 12px;
+}
+.wrap {
+  text-align: center;
+  background-color: lightgrey;
+  height: 80px;
+}
+.badge {
+  position: relative;
+  overflow: visible;
+}
+</style>
diff --git a/vue-options-api-demos/indicators/badge/fill/main.js b/vue-options-api-demos/indicators/badge/fill/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/indicators/badge/fill/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/indicators/badge/fill/main.vue b/vue-options-api-demos/indicators/badge/fill/main.vue
new file mode 100644
index 00000000..b7da64a5
--- /dev/null
+++ b/vue-options-api-demos/indicators/badge/fill/main.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="wrap">
+    <span class="fill" v-for="(fill, index) in fillOptions" :key="index">
+      {{ fill.toUpperCase() }}
+      <Badge :fill-mode="fill"> 7 </Badge>
+    </span>
+  </div>
+</template>
+
+<script>
+import { Badge } from '@progress/kendo-vue-indicators';
+
+export default {
+  components: { Badge },
+  data() {
+    return {
+      fillOptions: ['solid', 'outline'],
+    };
+  },
+};
+</script>
+
+<style>
+.k-badge-container {
+  margin: 0 30px 20px 0;
+}
+.title {
+  color: #6c757d;
+  padding: 6px 8px;
+}
+.wrap {
+  display: flex;
+  margin-top: 25px;
+  text-align: center;
+  justify-content: space-around;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.fill {
+  position: relative;
+  overflow: visible;
+}
+</style>
diff --git a/vue-options-api-demos/indicators/badge/overview/Contacts.vue b/vue-options-api-demos/indicators/badge/overview/Contacts.vue
new file mode 100644
index 00000000..2d42d412
--- /dev/null
+++ b/vue-options-api-demos/indicators/badge/overview/Contacts.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="contacts">
+    <div class="k-hbox">
+      <span class="badge">
+        <Avatar :type="'image'">
+          <img :src="managerAvatar" :alt="'Manager Image'" />
+        </Avatar>
+        <Badge
+          :size="'small'"
+          :rounded="'full'"
+          :align="{
+            vertical: 'bottom',
+            horizontal: 'end',
+          }"
+          :theme-color="'error'"
+          :cutout-border="true"
+        >
+          <SvgIcon :icon="minusIcon" :size="'xsmall'" />
+        </Badge>
+      </span>
+      <div class="contact-info">
+        <h2>Michael Holz</h2>
+        <p>Manager</p>
+      </div>
+    </div>
+    <div class="k-hbox">
+      <span class="badge">
+        <Avatar :type="'image'">
+          <img :src="designerAvatar" :alt="'Designer Image'" />
+        </Avatar>
+        <Badge
+          :size="'small'"
+          :rounded="'full'"
+          :align="{
+            vertical: 'bottom',
+            horizontal: 'end',
+          }"
+          :theme-color="'success'"
+          :cutout-border="true"
+        >
+          <SvgIcon :icon="checkIcon" :size="'xsmall'" />
+        </Badge>
+      </span>
+      <div class="contact-info">
+        <h2>Lilly Nelson</h2>
+        <p>UX Designer</p>
+      </div>
+    </div>
+    <div class="k-hbox">
+      <span class="badge">
+        <Avatar :type="'image'">
+          <img :src="pmAvatar" :alt="'PM Image'" />
+        </Avatar>
+        <Badge
+          :size="'small'"
+          :rounded="'full'"
+          :align="{
+            vertical: 'bottom',
+            horizontal: 'end',
+          }"
+          :theme-color="'warning'"
+          :cutout-border="true"
+        >
+          <SvgIcon :icon="clockIcon" :size="'xsmall'" />
+        </Badge>
+      </span>
+      <div class="contact-info">
+        <h2>André Stewart</h2>
+        <p>Product Manager</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { Avatar } from "@progress/kendo-vue-layout";
+import { Badge } from "@progress/kendo-vue-indicators";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { minusIcon, clockIcon, checkIcon } from "@progress/kendo-svg-icons";
+
+
+const managerImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/RICSU.jpg';
+const designerImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/BERGS.jpg';
+const pmImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/GOURL.jpg';
+
+export default {
+  components: {
+    Avatar,
+    Badge,
+    SvgIcon,
+  },
+  data() {
+    return {
+      minusIcon,
+      clockIcon,
+      checkIcon,
+      managerAvatar: managerImage,
+      designerAvatar: designerImage,
+      pmAvatar: pmImage,
+    };
+  },
+};
+</script>
+
+<style>
+.badge {
+  position: relative;
+  overflow: visible;
+}
+.contacts h2 {
+  font-size: 1.3em;
+  font-weight: normal;
+  margin: 0;
+}
+.contacts p {
+  margin: 0;
+  font-size: 0.8em;
+}
+.k-hbox {
+  align-items: center;
+  border-bottom: 1px solid #ccc;
+  padding: 12px 14px;
+}
+.k-hbox .contact-info {
+  margin-left: 1em;
+}
+.k-hbox .contact-info p {
+  text-align: left;
+}
+.k-badge .k-icon {
+  font-size: 12px;
+  color: white;
+}
+</style>
diff --git a/vue-options-api-demos/indicators/badge/overview/SocialApps.vue b/vue-options-api-demos/indicators/badge/overview/SocialApps.vue
new file mode 100644
index 00000000..e6cedbdd
--- /dev/null
+++ b/vue-options-api-demos/indicators/badge/overview/SocialApps.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="wrap">
+    <BadgeContainer :content="'content'" :rounded="'full'">
+      <SvgIcon :icon="facebookIcon" :size="'xlarge'" style="color: #5270a4" />
+      <template v-slot:content>
+        <span> 1 </span>
+      </template>
+    </BadgeContainer>
+    <BadgeContainer :content="'content'" :rounded="'full'">
+      <SvgIcon :icon="twitterIcon" :size="'xlarge'" style="color: #4eb9ed" />
+      <template v-slot:content>
+        <span>3 </span>
+      </template>
+    </BadgeContainer>
+    <BadgeContainer
+      :content="'content'"
+      :rounded="'full'"
+      style="color: #b3d062"
+    >
+      <SvgIcon :icon="vimeoIcon" :size="'xlarge'" />
+      <template v-slot:content>
+        <span>77 </span>
+      </template>
+    </BadgeContainer>
+    <BadgeContainer :content="'content'" :rounded="'full'">
+      <SvgIcon :icon="envelopBoxIcon" :size="'xlarge'" />
+      <template v-slot:content>
+        <span>14+ </span>
+      </template>
+    </BadgeContainer>
+  </div>
+</template>
+<script>
+import { BadgeContainer } from "@progress/kendo-vue-indicators";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import {
+  facebookIcon,
+  twitterIcon,
+  vimeoIcon,
+  envelopBoxIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    BadgeContainer,
+    SvgIcon,
+  },
+  data() {
+    return {
+      facebookIcon,
+      twitterIcon,
+      vimeoIcon,
+      envelopBoxIcon,
+    };
+  },
+};
+</script>
+
+<style>
+.wrap {
+  display: flex;
+  justify-content: space-between;
+  padding: 21px 14px;
+  border-bottom: 1px solid #ccc;
+}
+</style>
diff --git a/vue-options-api-demos/indicators/badge/overview/Status.vue b/vue-options-api-demos/indicators/badge/overview/Status.vue
new file mode 100644
index 00000000..4822c1a9
--- /dev/null
+++ b/vue-options-api-demos/indicators/badge/overview/Status.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="status">
+    <KButton>
+      New Updates
+      <Badge :rounded="'full'" :theme-color="'info'" />
+    </KButton>
+    <span class="notifications">
+      <SvgIcon :icon="bellIcon" :size="'xlarge'" />
+      <Badge :rounded="'full'" :theme-color="'warning'" />
+    </span>
+  </div>
+</template>
+<script>
+import { Button } from "@progress/kendo-vue-buttons";
+import { Badge } from "@progress/kendo-vue-indicators";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { bellIcon } from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    KButton: Button,
+    Badge,
+    SvgIcon,
+  },
+  data() {
+    return {
+      bellIcon,
+    };
+  },
+};
+</script>
+
+<style>
+.status {
+  display: flex;
+  justify-content: space-between;
+  padding: 12px 14px;
+}
+.notifications {
+  position: relative;
+  align-self: center;
+  font-size: 21px;
+  color: #6c757d;
+}
+</style>
diff --git a/vue-options-api-demos/indicators/badge/overview/main.js b/vue-options-api-demos/indicators/badge/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/indicators/badge/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/indicators/badge/overview/main.vue b/vue-options-api-demos/indicators/badge/overview/main.vue
new file mode 100644
index 00000000..8cf2e1a9
--- /dev/null
+++ b/vue-options-api-demos/indicators/badge/overview/main.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="example">
+    <div class="example-wrap"><Contacts /> <SocialApps /><Status /></div>
+  </div>
+</template>
+
+<script>
+import Contacts from './Contacts.vue';
+import SocialApps from './SocialApps.vue';
+import Status from './Status.vue';
+
+export default {
+  components: {
+    Contacts,
+    SocialApps,
+    Status,
+  },
+};
+</script>
+
+<style>
+.example {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.example-wrap {
+  border: 1px solid #ccc;
+  width: 230px;
+}
+</style>
diff --git a/vue-options-api-demos/indicators/badge/position/main.js b/vue-options-api-demos/indicators/badge/position/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/indicators/badge/position/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/indicators/badge/position/main.vue b/vue-options-api-demos/indicators/badge/position/main.vue
new file mode 100644
index 00000000..fe18ce7a
--- /dev/null
+++ b/vue-options-api-demos/indicators/badge/position/main.vue
@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <div class="flex-container">
+      <div>Badge Position</div>
+      <div class="example">
+        <DropDownList
+          :data-items="positions"
+          :value="position"
+          @change="handleChange"
+        />
+      </div>
+    </div>
+    <div class="flex-container">
+      <div class="badge">
+        <Avatar :shape="'square'" :type="'text'"> SB </Avatar>
+        <Badge :position="position" :theme-color="'success'">
+          <SvgIcon :icon="checkIcon" :size="'xsmall'" />
+        </Badge>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Badge } from "@progress/kendo-vue-indicators";
+import { Avatar } from "@progress/kendo-vue-layout";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { checkIcon } from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    Badge,
+    Avatar,
+    DropDownList,
+    SvgIcon,
+  },
+  data() {
+    return {
+      position: "edge",
+      positions: ["inside", "edge", "outside"],
+      checkIcon,
+    };
+  },
+  methods: {
+    handleChange(e) {
+      this.position = e.target.value;
+    },
+  },
+};
+</script>
+
+<style>
+.flex-container {
+  display: inline-flex;
+  flex-direction: column;
+  vertical-align: middle;
+}
+.example {
+  display: flex;
+  margin-bottom: 30px;
+}
+.badge {
+  position: relative;
+  overflow: visible;
+  padding-left: 130px;
+}
+</style>
diff --git a/vue-options-api-demos/indicators/badge/positioning/main.js b/vue-options-api-demos/indicators/badge/positioning/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/indicators/badge/positioning/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/indicators/badge/positioning/main.vue b/vue-options-api-demos/indicators/badge/positioning/main.vue
new file mode 100644
index 00000000..42bdf20f
--- /dev/null
+++ b/vue-options-api-demos/indicators/badge/positioning/main.vue
@@ -0,0 +1,156 @@
+<template>
+  <div>
+    <div class="flex-container">
+      <div>Badge Alignment</div>
+      <div class="example">
+        <DropDownList
+          :style="{ width: '200px' }"
+          :data-items="alignments"
+          :value="alignment"
+          :text-field="'title'"
+          :data-item-key="'value'"
+          @change="handleAlignment"
+        />
+      </div>
+      <div>Badge Position</div>
+      <div class="example">
+        <DropDownList
+          :style="{ width: '200px' }"
+          :data-items="positions"
+          :value="position"
+          @change="handlePositionChange"
+        />
+      </div>
+    </div>
+    <div class="flex-container">
+      <div class="wrap">
+        <span class="badge">
+          <SvgIcon
+            :icon="facebookIcon"
+            :size="'xlarge'"
+            style="color: #5270a4"
+          />
+          <Badge :align="alignment.value" :position="position"> 11 </Badge>
+        </span>
+        <span class="badge">
+          <SvgIcon
+            :icon="twitterIcon"
+            :size="'xlarge'"
+            style="color: #4eb9ed"
+          />
+          <Badge :align="alignment.value" :position="position"> 3 </Badge>
+        </span>
+        <span class="badge">
+          <SvgIcon :icon="vimeoIcon" :size="'xlarge'" style="color: #b3d062" />
+          <Badge :align="alignment.value" :position="position"> 77 </Badge>
+        </span>
+        <span class="badge">
+          <SvgIcon :icon="envelopBoxIcon" :size="'xlarge'" />
+          <Badge :align="alignment.value" :position="position"> 14+ </Badge>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Badge } from "@progress/kendo-vue-indicators";
+import { Avatar } from "@progress/kendo-vue-layout";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import {
+  facebookIcon,
+  twitterIcon,
+  vimeoIcon,
+  envelopBoxIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    Badge,
+    Avatar,
+    DropDownList,
+    SvgIcon,
+  },
+  data() {
+    return {
+      facebookIcon,
+      twitterIcon,
+      vimeoIcon,
+      envelopBoxIcon,
+      position: "edge",
+      positions: ["inside", "edge", "outside"],
+      alignment: {
+        title: "top end",
+        value: {
+          vertical: "top",
+          horizontal: "end",
+        },
+      },
+      alignments: [
+        {
+          title: "top start",
+          value: {
+            vertical: "top",
+            horizontal: "start",
+          },
+        },
+        {
+          title: "top end",
+          value: {
+            vertical: "top",
+            horizontal: "end",
+          },
+        },
+        {
+          title: "bottom start",
+          value: {
+            vertical: "bottom",
+            horizontal: "start",
+          },
+        },
+        {
+          title: "bottom end",
+          value: {
+            vertical: "bottom",
+            horizontal: "end",
+          },
+        },
+      ],
+    };
+  },
+  methods: {
+    handleAlignment(e) {
+      this.alignment = e.target.value;
+    },
+    handlePositionChange(e) {
+      this.position = e.target.value;
+    },
+  },
+};
+</script>
+
+<style>
+.badge {
+  position: relative;
+  overflow: visible;
+}
+
+.flex-container {
+  display: inline-flex;
+  flex-direction: column;
+  vertical-align: middle;
+}
+
+.example {
+  display: flex;
+  margin-bottom: 30px;
+}
+
+.wrap {
+  display: flex;
+  justify-content: space-around;
+  padding: 30px;
+  width: 370px;
+}
+</style>
diff --git a/vue-options-api-demos/indicators/badge/rounded/main.js b/vue-options-api-demos/indicators/badge/rounded/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/indicators/badge/rounded/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/indicators/badge/rounded/main.vue b/vue-options-api-demos/indicators/badge/rounded/main.vue
new file mode 100644
index 00000000..0c2ebffe
--- /dev/null
+++ b/vue-options-api-demos/indicators/badge/rounded/main.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="wrap">
+    <span
+      class="roundness"
+      v-for="(rounded, index) in roundedOptions"
+      :key="index"
+    >
+      <span v-if="rounded !== null">
+        {{ rounded.toUpperCase() }}
+        <Badge :rounded="rounded"> 7 </Badge>
+      </span>
+      <span v-else>
+        CUSTOM
+        <Badge :rounded="rounded" :class="'custom-badge-roundness'"> 7 </Badge>
+      </span>
+    </span>
+  </div>
+</template>
+
+<script>
+import { Badge } from '@progress/kendo-vue-indicators';
+
+export default {
+  components: {
+    Badge,
+  },
+  data() {
+    return {
+      roundedOptions: ['small', 'medium', 'large', 'full', null],
+    };
+  },
+};
+</script>
+
+<style>
+.k-badge-container {
+  margin: 0 30px 20px 0;
+}
+.title {
+  color: #6c757d;
+  padding: 6px 8px;
+}
+.wrap {
+  display: flex;
+  margin-top: 25px;
+  text-align: center;
+  justify-content: space-around;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.roundness {
+  position: relative;
+  overflow: visible;
+}
+.custom-badge-roundness {
+  border-bottom-right-radius: 215px;
+  border-bottom-left-radius: 415px;
+  border-top-left-radius: 215px;
+  border-top-right-radius: 415px;
+}
+</style>
diff --git a/vue-options-api-demos/indicators/badge/size/main.js b/vue-options-api-demos/indicators/badge/size/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/indicators/badge/size/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/indicators/badge/size/main.vue b/vue-options-api-demos/indicators/badge/size/main.vue
new file mode 100644
index 00000000..6d02d371
--- /dev/null
+++ b/vue-options-api-demos/indicators/badge/size/main.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="wrap">
+    <span class="sizes" v-for="(size, index) in sizes" :key="index">
+      <span v-if="size !== null">
+        {{ size.toUpperCase() }}
+        <Badge :size="size"> 7 </Badge>
+      </span>
+      <span v-else>
+        CUSTOM
+        <Badge :size="size" :class="'custom-badge-size'"> 7 </Badge>
+      </span>
+    </span>
+  </div>
+</template>
+
+<script>
+import { BadgeContainer, Badge } from '@progress/kendo-vue-indicators';
+
+export default {
+  components: {
+    BadgeContainer,
+    Badge,
+  },
+  data() {
+    return {
+      sizes: ['small', 'medium', 'large', null],
+    };
+  },
+};
+</script>
+
+<style>
+.k-badge-container {
+  margin: 0 30px 20px 0;
+}
+.title {
+  color: #6c757d;
+  padding: 6px 8px;
+}
+.wrap {
+  margin-top: 25px;
+  text-align: center;
+}
+
+.wrap {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.sizes {
+  position: relative;
+  overflow: visible;
+}
+.custom-badge-size {
+  width: 50px;
+  height: 50px;
+  margin-bottom: 100px;
+}
+</style>
diff --git a/vue-options-api-demos/indicators/badge/theme-color/main.js b/vue-options-api-demos/indicators/badge/theme-color/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/indicators/badge/theme-color/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/indicators/badge/theme-color/main.vue b/vue-options-api-demos/indicators/badge/theme-color/main.vue
new file mode 100644
index 00000000..3a72527b
--- /dev/null
+++ b/vue-options-api-demos/indicators/badge/theme-color/main.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="wrap">
+    <span
+      class="themes"
+      v-for="(themeColor, index) in themeColors"
+      :key="index"
+    >
+      {{ themeColor.toUpperCase() }}
+      <Badge :theme-color="themeColor"> 7 </Badge>
+    </span>
+  </div>
+</template>
+
+<script>
+import { BadgeContainer, Badge } from '@progress/kendo-vue-indicators';
+
+export default {
+  components: {
+    BadgeContainer,
+    Badge,
+  },
+  data() {
+    return {
+      themeColors: [
+        'primary',
+        'secondary',
+        'tertiary',
+        'inherit',
+        'info',
+        'success',
+        'error',
+        'warning',
+        'dark',
+        'light',
+        'inverse',
+      ],
+    };
+  },
+};
+</script>
+
+<style>
+.k-badge-container {
+  margin: 0 30px 20px 0;
+}
+.title {
+  color: #6c757d;
+  padding: 6px 8px;
+}
+.wrap {
+  display: flex;
+  margin-top: 25px;
+  text-align: center;
+  justify-content: space-around;
+  align-items: center;
+  margin-bottom: 20px;
+}
+.themes {
+  position: relative;
+  overflow: visible;
+}
+</style>
diff --git a/vue-options-api-demos/indicators/get-started/main.js b/vue-options-api-demos/indicators/get-started/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/indicators/get-started/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/indicators/get-started/main.vue b/vue-options-api-demos/indicators/get-started/main.vue
new file mode 100644
index 00000000..1b36f37f
--- /dev/null
+++ b/vue-options-api-demos/indicators/get-started/main.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="example">
+    <Loader />
+  </div>
+</template>
+<script>
+import { Loader } from '@progress/kendo-vue-indicators';
+
+export default {
+  components: {
+    Loader,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/indicators/globalization/main.js b/vue-options-api-demos/indicators/globalization/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/indicators/globalization/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/indicators/globalization/main.vue b/vue-options-api-demos/indicators/globalization/main.vue
new file mode 100644
index 00000000..67d521cf
--- /dev/null
+++ b/vue-options-api-demos/indicators/globalization/main.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="example" :dir="'rtl'">
+    <div class="col-6">
+      <div class="row badges">
+        <div class="badge-container">
+          <KButton :theme-color="'primary'">Action</KButton>
+          <Badge
+            :align="{
+              vertical: 'top',
+              horizontal: 'end',
+            }"
+            :theme-color="'secondary'"
+            >8</Badge
+          >
+        </div>
+        <div class="badge-container">
+          <span
+            :style="{
+              position: 'relative',
+              overflow: 'visible',
+            }"
+          >
+            <SvgIcon :icon="bellIcon" style="width: 36px" />
+          </span>
+          <Badge :theme-color="'info'">99+</Badge>
+        </div>
+        <div class="badge-container">
+          <Avatar :type="'image'">
+            <img
+              :src="avatarImage"
+              :alt="'Avatar Image'"
+            />
+          </Avatar>
+          <Badge
+            :size="'small'"
+            :align="{
+              vertical: 'bottom',
+              horizontal: 'end',
+            }"
+            :theme-color="'success'"
+            :cutout-border="true"
+          >
+            <SvgIcon :icon="checkIcon" :size="'xsmall'" />
+          </Badge>
+        </div>
+      </div>
+    </div>
+    <div class="col-6">
+      <Card
+        :style="{
+          'min-width': '350px',
+          width: '350px',
+          height: 'auto',
+        }"
+      >
+        <CardHeader class="k-hbox">
+          <Skeleton
+            :shape="'circle'"
+            :style="{
+              width: '45px',
+              height: '45px',
+              'margin-left': '16px',
+            }"
+          />
+          <div
+            :style="{
+              flex: '1 1 50%',
+            }"
+          >
+            <Skeleton
+              :shape="'text'"
+              :style="{
+                width: '100%',
+              }"
+            />
+            <Skeleton
+              :shape="'text'"
+              :style="{
+                width: '40%',
+              }"
+            />
+          </div>
+        </CardHeader>
+        <Skeleton
+          :shape="'rectangle'"
+          :style="{
+            width: '100%',
+            height: '230px',
+          }"
+        />
+        <CardFooter>
+          <Skeleton
+            :shape="'text'"
+            :style="{
+              width: '100%',
+            }"
+          />
+        </CardFooter>
+      </Card>
+    </div>
+  </div>
+</template>
+<script>
+import { Button } from "@progress/kendo-vue-buttons";
+import { Badge, Skeleton } from "@progress/kendo-vue-indicators";
+import {
+  Avatar,
+  Card,
+  CardHeader,
+  CardFooter,
+} from "@progress/kendo-vue-layout";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { bellIcon, checkIcon } from "@progress/kendo-svg-icons";
+
+const avatarImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/RICSU.jpg';
+
+export default {
+  components: {
+    Avatar,
+    Badge,
+    Skeleton,
+    Card,
+    CardHeader,
+    CardFooter,
+    KButton: Button,
+    SvgIcon,
+  },
+  data() {
+    return { bellIcon, checkIcon, avatarImage };
+  },
+};
+</script>
+<style>
+.example {
+  display: flex;
+}
+.badge-container {
+  position: relative;
+  overflow: visible;
+}
+.badges {
+  justify-content: space-between;
+  padding: 15px;
+}
+</style>
diff --git a/vue-options-api-demos/indicators/loader/overview/main.js b/vue-options-api-demos/indicators/loader/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/indicators/loader/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/indicators/loader/overview/main.vue b/vue-options-api-demos/indicators/loader/overview/main.vue
new file mode 100644
index 00000000..29e6a231
--- /dev/null
+++ b/vue-options-api-demos/indicators/loader/overview/main.vue
@@ -0,0 +1,53 @@
+ <template>
+  <div class="example">
+    <div class="example-wrap">
+      <div :style="{ width: '50%' }">
+        <klabel :editor-id="editorId">Pick the animation:&nbsp;</klabel>
+         <dropdownlist
+          :style="{ width: '230px' }"
+          :id="editorId"
+          :value="type"
+          :data-items="types"
+          @change="onTypeChange"
+        />
+      </div>
+      <br />
+      <div :class="'row'" :style="{ width: '50%' }">
+        <div class="col-4">
+          <loader :size="'small'" :type="type" />
+        </div>
+        <div class="col-4">
+          <loader :type="type" />
+        </div>
+        <div class="col-4">
+          <loader :size="'large'" :type="type" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { Loader } from "@progress/kendo-vue-indicators";
+import { Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    loader: Loader,
+    klabel: Label,
+    dropdownlist: DropDownList,
+  },
+  data: function () {
+    return {
+      type: "pulsing",
+      editorId: "changeAnimation",
+      types: ["pulsing", "infinite-spinner", "converging-spinner"],
+    };
+  },
+  methods: {
+    onTypeChange(e) {
+      this.type = e.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/indicators/loader/size/main.js b/vue-options-api-demos/indicators/loader/size/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/indicators/loader/size/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/indicators/loader/size/main.vue b/vue-options-api-demos/indicators/loader/size/main.vue
new file mode 100644
index 00000000..42b8988f
--- /dev/null
+++ b/vue-options-api-demos/indicators/loader/size/main.vue
@@ -0,0 +1,22 @@
+<template>
+   <div class="row col-6">
+      <div class="col-4">
+        <Loader :size="'small'" />
+      </div>
+      <div class="col-4">
+        <Loader :size="'medium'" />
+      </div>
+      <div class="col-4">
+        <Loader :size="'large'"  />
+      </div>
+    </div>
+</template>
+
+<script>
+import { Loader } from "@progress/kendo-vue-indicators";
+export default {
+    components: {
+       Loader
+    }
+};
+</script>
diff --git a/vue-options-api-demos/indicators/loader/theme-color/main.js b/vue-options-api-demos/indicators/loader/theme-color/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/indicators/loader/theme-color/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/indicators/loader/theme-color/main.vue b/vue-options-api-demos/indicators/loader/theme-color/main.vue
new file mode 100644
index 00000000..0350c18e
--- /dev/null
+++ b/vue-options-api-demos/indicators/loader/theme-color/main.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <div class="wrap">
+      <span
+        v-for="(color, index) in themeColors"
+        :key="index"
+        class="k-d-inline-flex k-flex-col k-align-items-center"
+      >
+        <span class="title">{{ color.toUpperCase() }}</span>
+        <Loader :theme-color="color" />
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Loader } from "@progress/kendo-vue-indicators";
+const themeColors = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "info",
+  "success",
+  "error",
+  "warning",
+  "dark",
+  "light",
+  "inverse",
+];
+
+export default {
+  components: {
+    Loader,
+  },
+  data() {
+    return {
+      themeColors,
+    };
+  },
+};
+</script>
+<style>
+.title {
+  color: #6c757d;
+  padding: 6px 15px;
+}
+.wrap {
+  margin-top: 15px;
+  text-align: center;
+}
+</style>
diff --git a/vue-options-api-demos/indicators/loader/type/main.js b/vue-options-api-demos/indicators/loader/type/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/indicators/loader/type/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/indicators/loader/type/main.vue b/vue-options-api-demos/indicators/loader/type/main.vue
new file mode 100644
index 00000000..46da22a1
--- /dev/null
+++ b/vue-options-api-demos/indicators/loader/type/main.vue
@@ -0,0 +1,25 @@
+<template>
+   <div class="row col-6">
+      <div class="col-4">
+        <Loader :type="'pulsing'" />
+      </div>
+      <div class="col-4">
+        <Loader :type="'infinite-spinner'" />
+      </div>
+      <div class="col-4">
+        <Loader :type="'converging-spinner'" />
+      </div>
+    </div>
+     
+</template>
+
+<script>
+import { Loader } from "@progress/kendo-vue-indicators";
+
+export default {
+    components: {
+       Loader
+    },
+    
+};
+</script>
diff --git a/vue-options-api-demos/indicators/overview/main.js b/vue-options-api-demos/indicators/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/indicators/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/indicators/overview/main.vue b/vue-options-api-demos/indicators/overview/main.vue
new file mode 100644
index 00000000..d67e8884
--- /dev/null
+++ b/vue-options-api-demos/indicators/overview/main.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="example" style="display: flex">
+    <div class="col-3">
+      <div class="row">
+        <div>Badges</div>
+      </div>
+      <div class="row">
+        <div class="badge-container">
+          <KButton :theme-color="'primary'">Action</KButton>
+          <Badge
+            :align="{
+              vertical: 'top',
+              horizontal: 'end',
+            }"
+            :theme-color="'secondary'"
+            >8</Badge
+          >
+        </div>
+      </div>
+      <div class="row">
+        <div class="badge-container">
+          <span
+            :style="{
+              position: 'relative',
+              overflow: 'visible',
+            }"
+          >
+            <SvgIcon :icon="bellIcon" style="width: 36px" />
+          </span>
+          <Badge :theme-color="'info'">99+</Badge>
+        </div>
+      </div>
+      <div class="row">
+        <div class="badge-container">
+          <Avatar :type="'image'">
+            <img
+              :src="avatarImage"
+              :alt="'Avatar Image'"
+            />
+          </Avatar>
+          <Badge
+            :size="'small'"
+            :align="{
+              vertical: 'bottom',
+              horizontal: 'end',
+            }"
+            :theme-color="'success'"
+            :cutout-border="true"
+          >
+            <SvgIcon :icon="checkIcon" :size="'xsmall'" />
+          </Badge>
+        </div>
+      </div>
+    </div>
+    <div class="col-3">
+      <div class="row">
+        <div>Loaders</div>
+      </div>
+      <div class="row">
+        <div>
+          <Loader :type="'pulsing'" />
+        </div>
+      </div>
+      <div class="row">
+        <div>
+          <Loader :type="'infinite-spinner'" />
+        </div>
+      </div>
+      <div class="row">
+        <div>
+          <Loader :type="'converging-spinner'" />
+        </div>
+      </div>
+    </div>
+    <div class="col-3">
+      <div class="row">
+        <div class="col-3">Skeleton</div>
+      </div>
+      <div class="row">
+        <div class="example-wrap k-d-flex k-justify-content-around">
+          <Card
+            :style="{
+              'min-width': '350px',
+              width: '350px',
+              height: 'auto',
+            }"
+          >
+            <CardHeader class="k-hbox">
+              <Skeleton
+                :shape="'circle'"
+                :style="{
+                  width: '45px',
+                  height: '45px',
+                  'margin-right': '16px',
+                }"
+              />
+              <div
+                :style="{
+                  flex: '1 1 50%',
+                }"
+              >
+                <Skeleton
+                  :shape="'text'"
+                  :style="{
+                    width: '100%',
+                  }"
+                />
+                <Skeleton
+                  :shape="'text'"
+                  :style="{
+                    width: '40%',
+                  }"
+                />
+              </div>
+            </CardHeader>
+            <Skeleton
+              :shape="'rectangle'"
+              :style="{
+                width: '100%',
+                height: '230px',
+              }"
+            />
+            <CardFooter>
+              <Skeleton
+                :shape="'text'"
+                :style="{
+                  width: '100%',
+                }"
+              />
+            </CardFooter>
+          </Card>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { Button } from "@progress/kendo-vue-buttons";
+import { Badge, Loader, Skeleton } from "@progress/kendo-vue-indicators";
+import {
+  Avatar,
+  Card,
+  CardHeader,
+  CardFooter,
+} from "@progress/kendo-vue-layout";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { bellIcon, checkIcon } from "@progress/kendo-svg-icons";
+
+const avatarImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/RICSU.jpg';
+
+export default {
+  components: {
+    Loader,
+    Skeleton,
+    Badge,
+    Card,
+    CardHeader,
+    CardFooter,
+    KButton: Button,
+    Avatar,
+    SvgIcon,
+  },
+  data() {
+    return { bellIcon, checkIcon, avatarImage };
+  },
+};
+</script>
+
+<style>
+.row {
+  margin: 20px;
+}
+.badge-container {
+  position: relative;
+  overflow: visible;
+}
+</style>
diff --git a/vue-options-api-demos/indicators/skeleton/animation/main.js b/vue-options-api-demos/indicators/skeleton/animation/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/indicators/skeleton/animation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/indicators/skeleton/animation/main.vue b/vue-options-api-demos/indicators/skeleton/animation/main.vue
new file mode 100644
index 00000000..e353a92c
--- /dev/null
+++ b/vue-options-api-demos/indicators/skeleton/animation/main.vue
@@ -0,0 +1,175 @@
+<template>
+  <div class="example">
+    <div class="example-wrap">
+      <div class="row">
+        <div class="col-4">
+          <p>Pulse animation(Default)</p>
+          <Card>
+            <CardHeader class="k-hbox">
+              <Skeleton
+                :shape="'circle'"
+                :style="{
+                  width: '45px',
+                  height: '45px',
+                  'margin-right': 16,
+                }"
+              />
+              <div
+                :style="{
+                  flex: '1 1 50%',
+                }"
+              >
+                <Skeleton
+                  :shape="'text'"
+                  :style="{
+                    width: '100%',
+                  }"
+                />
+                <Skeleton
+                  :shape="'text'"
+                  :style="{
+                    width: '40%',
+                  }"
+                />
+              </div>
+            </CardHeader>
+            <Skeleton
+              :shape="'rectangle'"
+              :style="{
+                width: '100%',
+                height: '150px',
+              }"
+            />
+            <CardFooter>
+              <Skeleton
+                :shape="'text'"
+                :style="{
+                  width: '100%',
+                }"
+              />
+            </CardFooter>
+          </Card>
+        </div>
+        <div class="col-4">
+          <p>Wave animation</p>
+          <Card>
+            <CardHeader class="k-hbox">
+              <Skeleton
+                :shape="'circle'"
+                :style="{
+                  width: '45px',
+                  height: '45px',
+                  'margin-right': 16,
+                }"
+                :animation="{ type: 'wave' }"
+              />
+              <div
+                :style="{
+                  flex: '1 1 50%',
+                }"
+              >
+                <Skeleton
+                  :shape="'text'"
+                  :style="{
+                    width: '100%',
+                  }"
+                  :animation="{ type: 'wave' }"
+                />
+                <Skeleton
+                  :shape="'text'"
+                  :style="{
+                    width: '40%',
+                  }"
+                  :animation="{ type: 'wave' }"
+                />
+              </div>
+            </CardHeader>
+            <Skeleton
+              :shape="'rectangle'"
+              :style="{
+                width: '100%',
+                height: '150px',
+              }"
+              :animation="{ type: 'wave' }"
+            />
+            <CardFooter>
+              <Skeleton
+                :shape="'text'"
+                :style="{
+                  width: '100%',
+                }"
+                :animation="{ type: 'wave' }"
+              />
+            </CardFooter>
+          </Card>
+        </div>
+        <div class="col-4">
+          <p>No animation</p>
+          <Card>
+            <CardHeader class="k-hbox">
+              <Skeleton
+                :shape="'circle'"
+                :style="{
+                  width: '45px',
+                  height: '45px',
+                  'margin-right': 16,
+                }"
+                :animation="false"
+              />
+              <div
+                :style="{
+                  flex: '1 1 50%',
+                }"
+              >
+                <Skeleton
+                  :shape="'text'"
+                  :style="{
+                    width: '100%',
+                  }"
+                  :animation="false"
+                />
+                <Skeleton
+                  :shape="'text'"
+                  :style="{
+                    width: '40%',
+                  }"
+                  :animation="false"
+                />
+              </div>
+            </CardHeader>
+            <Skeleton
+              :shape="'rectangle'"
+              :style="{
+                width: '100%',
+                height: '150px',
+              }"
+              :animation="false"
+            />
+            <CardFooter>
+              <Skeleton
+                :shape="'text'"
+                :style="{
+                  width: '100%',
+                }"
+                :animation="false"
+              />
+            </CardFooter>
+          </Card>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { Skeleton } from '@progress/kendo-vue-indicators';
+import { Card, CardHeader, CardFooter } from '@progress/kendo-vue-layout';
+
+export default {
+  components: {
+    Skeleton,
+    Card,
+    CardHeader,
+    CardFooter,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/indicators/skeleton/dynamic/main.js b/vue-options-api-demos/indicators/skeleton/dynamic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/indicators/skeleton/dynamic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/indicators/skeleton/dynamic/main.vue b/vue-options-api-demos/indicators/skeleton/dynamic/main.vue
new file mode 100644
index 00000000..6c5fefd9
--- /dev/null
+++ b/vue-options-api-demos/indicators/skeleton/dynamic/main.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="example">
+    <div class="example-wrap k-d-flex k-justify-content-around">
+      <Card
+        v-if="!loaded"
+        :style="{
+          'min-width': '350px',
+          width: '350px',
+          height: 'auto',
+        }"
+      >
+        <CardHeader class="k-hbox">
+          <Skeleton
+            :shape="'circle'"
+            :style="{
+              width: '45px',
+              height: '45px',
+              'margin-right': '16px',
+            }"
+          />
+          <div
+            :style="{
+              flex: '1 1 50%',
+            }"
+          >
+            <Skeleton
+              :shape="'text'"
+              :style="{
+                width: '100%',
+              }"
+            />
+            <Skeleton
+              :shape="'text'"
+              :style="{
+                width: '40%',
+              }"
+            />
+          </div>
+        </CardHeader>
+        <Skeleton
+          :shape="'rectangle'"
+          :style="{
+            width: '100%',
+            height: '230px',
+          }"
+        />
+        <CardFooter>
+          <Skeleton
+            :shape="'text'"
+            :style="{
+              width: '100%',
+            }"
+          />
+        </CardFooter>
+      </Card>
+      <Card
+        v-else
+        :style="{
+          'min-width': '350px',
+          width: '350px',
+          height: 'auto',
+        }"
+      >
+        <CardHeader class="k-hbox">
+          <Avatar :type="'image'">
+            <img alt="user-avatar" :src="cardData.userAvatar" />
+          </Avatar>
+          <div
+            :style="{
+              flex: '1 1 50%',
+            }"
+          >
+            <CardTitle>{{ cardData.title }}</CardTitle>
+            <CardSubtitle
+              :style="{
+                'margin-top': '0px',
+              }"
+            >
+              {{ cardData.subtitle }}
+            </CardSubtitle>
+          </div>
+        </CardHeader>
+        <CardImage :src="cardData.thumbnailSrc" />
+        <CardFooter>{{ cardData.description }}</CardFooter>
+      </Card>
+    </div>
+  </div>
+</template>
+<script>
+import { Skeleton } from '@progress/kendo-vue-indicators';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardSubtitle,
+  CardFooter,
+  CardImage,
+  Avatar,
+} from '@progress/kendo-vue-layout';
+
+const cardThumbnail = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/indicators/skeleton/card-thumbnail.jpg';
+const userAvatar = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/indicators/skeleton/user-avatar.jpg';
+
+export default {
+  components: {
+    Skeleton,
+    Card,
+    CardHeader,
+    CardTitle,
+    CardSubtitle,
+    CardFooter,
+    CardImage,
+    Avatar,
+  },
+  created() {
+    setTimeout(() => {
+      this.loaded = true;
+    }, 2000);
+  },
+  data() {
+    return {
+      loaded: false,
+      cardData: {
+        userAvatar: userAvatar,
+        title: 'Tom Smith',
+        subtitle: '5 hours ago',
+        thumbnailSrc: cardThumbnail,
+        description: 'Having so much fun in Prague! #NaZdravi',
+      },
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/indicators/skeleton/overview/main.js b/vue-options-api-demos/indicators/skeleton/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/indicators/skeleton/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/indicators/skeleton/overview/main.vue b/vue-options-api-demos/indicators/skeleton/overview/main.vue
new file mode 100644
index 00000000..a94e97be
--- /dev/null
+++ b/vue-options-api-demos/indicators/skeleton/overview/main.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="example">
+    <div class="example-wrap k-d-flex k-justify-content-around">
+      <Card
+        :style="{
+          'min-width': '350px',
+          width: '350px',
+          height: 'auto',
+        }"
+      >
+        <CardHeader class="k-hbox">
+          <Skeleton
+            :shape="'circle'"
+            :style="{
+              width: '45px',
+              height: '45px',
+              'margin-right': '16px',
+            }"
+          />
+          <div
+            :style="{
+              flex: '1 1 50%',
+            }"
+          >
+            <Skeleton
+              :shape="'text'"
+              :style="{
+                width: '100%',
+              }"
+            />
+            <Skeleton
+              :shape="'text'"
+              :style="{
+                width: '40%',
+              }"
+            />
+          </div>
+        </CardHeader>
+        <Skeleton
+          :shape="'rectangle'"
+          :style="{
+            width: '100%',
+            height: '230px',
+          }"
+        />
+        <CardFooter>
+          <Skeleton
+            :shape="'text'"
+            :style="{
+              width: '100%',
+            }"
+          />
+        </CardFooter>
+      </Card>
+      <Card
+        :style="{
+          'min-width': '350px',
+          width: '350px',
+          height: 'auto',
+        }"
+      >
+        <CardHeader class="k-hbox">
+          <Avatar :type="'image'">
+            <img alt="user-avatar" :src="cardData.userAvatar" />
+          </Avatar>
+          <div
+            :style="{
+              flex: '1 1 50%',
+            }"
+          >
+            <CardTitle>{{ cardData.title }}</CardTitle>
+            <CardSubtitle
+              :style="{
+                'margin-top': '0px',
+              }"
+            >
+              {{ cardData.subtitle }}
+            </CardSubtitle>
+          </div>
+        </CardHeader>
+        <CardImage :src="cardData.thumbnailSrc" />
+        <CardFooter>{{ cardData.description }}</CardFooter>
+      </Card>
+    </div>
+  </div>
+</template>
+<script>
+import { Skeleton } from '@progress/kendo-vue-indicators';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardSubtitle,
+  CardFooter,
+  CardImage,
+  Avatar,
+} from '@progress/kendo-vue-layout';
+
+const cardThumbnail = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/indicators/skeleton/card-thumbnail.jpg';
+const userAvatar = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/indicators/skeleton/user-avatar.jpg';
+
+export default {
+  components: {
+    Skeleton,
+    Card,
+    CardHeader,
+    CardTitle,
+    CardSubtitle,
+    CardFooter,
+    CardImage,
+    Avatar,
+  },
+  data() {
+    return {
+      cardData: {
+        userAvatar: userAvatar,
+        title: 'Tom Smith',
+        subtitle: '5 hours ago',
+        thumbnailSrc: cardThumbnail,
+        description: 'Having so much fun in Prague! #NaZdravi',
+      },
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/indicators/skeleton/shape/main.js b/vue-options-api-demos/indicators/skeleton/shape/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/indicators/skeleton/shape/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/indicators/skeleton/shape/main.vue b/vue-options-api-demos/indicators/skeleton/shape/main.vue
new file mode 100644
index 00000000..b1ea192c
--- /dev/null
+++ b/vue-options-api-demos/indicators/skeleton/shape/main.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="example">
+    <div class="row">
+      <div class="col-2">
+        <div>Text</div>
+      </div>
+      <div class="col-10">
+        <Skeleton
+          :shape="'text'"
+          :style="{
+            width: '300px',
+          }"
+        />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-2">
+        <div>Circle</div>
+      </div>
+      <div class="col-10">
+        <Skeleton
+          :shape="'circle'"
+          :style="{
+            width: '50px',
+            height: '50px',
+          }"
+        />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-2">
+        <div>Rectangle</div>
+      </div>
+      <div class="col-10">
+        <Skeleton
+          :shape="'rectangle'"
+          :style="{
+            width: '300px',
+            height: '100px',
+          }"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { Skeleton } from '@progress/kendo-vue-indicators';
+
+export default {
+  components: {
+    Skeleton,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/basic/main.js b/vue-options-api-demos/inputs/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/basic/main.vue b/vue-options-api-demos/inputs/basic/main.vue
new file mode 100644
index 00000000..243dbbc8
--- /dev/null
+++ b/vue-options-api-demos/inputs/basic/main.vue
@@ -0,0 +1,126 @@
+<template>
+  <div class="row example-wrapper" :style="{ minHeight: '250px' }">
+    <div class="col-12 col-md-6 example-col">
+      <p>Input</p>
+      <Input :style="{ width: '230px' }" :label="'First name'"></Input>
+    </div>
+    <div class="col-12 col-md-6 example-col">
+      <p>NumericTextBox</p>
+      <NumericTextBox :style="{ width: '230px' }" :default-value="123.45" :format="'c2'">
+      </NumericTextBox>
+    </div>
+    <div class="col-12 col-md-6 example-col">
+      <p>MaskedTextBox</p>
+      <MaskedTextBox :style="{ width: '230px' }" :mask="'9-000'" :default-value="'_-___'">
+      </MaskedTextBox>
+    </div>
+    <div class="col-12 col-md-6 example-col">
+      <p>Slider</p>
+      <Slider :buttons="true" :step="1" :default-value="7" :min="1" :max="10">
+      </Slider>
+    </div>
+    <div class="col-12 col-md-6 example-col">
+      <p>RangeSlider</p>
+      <RangeSlider :step="1" :default-value="{ start: 3, end: 8 }" :min="1" :max="10">
+        <SliderLabel :position="1">1</SliderLabel>
+        <SliderLabel :position="3">3</SliderLabel>
+        <SliderLabel :position="5">5</SliderLabel>
+        <SliderLabel :position="7">7</SliderLabel>
+        <SliderLabel :position="10">10</SliderLabel>
+      </RangeSlider>
+    </div>
+    <div class="col-12 col-md-6 example-col">
+      <p>Checkbox</p>
+      <Checkbox :checked="true" :label="'Checkbox Option'" />
+    </div>
+    <div class="col-12 col-md-6 example-col">
+      <p>RadioButton</p>
+      <RadioButton :checked="true" :label="'RadioButton Option'" />
+    </div>
+    <div class="col-12 col-md-6 example-col">
+      <p>RadioGroup</p>
+      <RadioGroup :data-items="dataItems" :default-value="dataItems[2].value" />
+    </div>
+    <div class="col-12 col-md-6 example-col">
+      <p>Switch</p>
+      <Switch />
+    </div>
+    <div class="col-12 col-md-6 example-col">
+      <p>TextArea</p>
+      <TextArea></TextArea>
+    </div>
+    <div class="col-12 col-md-6 example-col">
+      <p>ColorPicker</p>
+      <ColorPicker />
+    </div>
+    <div class="col-12 col-md-6 example-col">
+      <p>ColorPalette</p>
+      <ColorPalette />
+    </div>
+    <div class="col-12 col-md-6 example-col">
+      <p>ColorGradient</p>
+      <ColorGradient />
+    </div>
+    <div class="col-12 col-md-6 example-col">
+      <p>FlatColorPicker</p>
+      <FlatColorPicker />
+    </div>
+  </div>
+</template>
+<script>
+import {
+  NumericTextBox,
+  Input,
+  MaskedTextBox,
+  Slider,
+  SliderLabel,
+  RangeSlider,
+  Checkbox,
+  RadioButton,
+  RadioGroup,
+  Switch,
+  TextArea,
+  ColorGradient,
+  ColorPicker,
+  FlatColorPicker,
+  ColorPalette,
+} from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    Input,
+    NumericTextBox,
+    MaskedTextBox,
+    Slider,
+    SliderLabel,
+    RangeSlider,
+    Checkbox,
+    RadioButton,
+    RadioGroup,
+    Switch,
+    TextArea,
+    ColorGradient,
+    ColorPicker,
+    FlatColorPicker,
+    ColorPalette,
+  },
+  data() {
+    return {
+      dataItems: [
+        {
+          label: "Option 1",
+          value: "option1",
+        },
+        {
+          label: "Option 2",
+          value: "option2",
+        },
+        {
+          label: "Option 3",
+          value: "option3",
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/checkbox/appearance/configurator/CheckboxStyleConfigurator.vue b/vue-options-api-demos/inputs/checkbox/appearance/configurator/CheckboxStyleConfigurator.vue
new file mode 100644
index 00000000..cb2341a7
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/appearance/configurator/CheckboxStyleConfigurator.vue
@@ -0,0 +1,80 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+      >Configurator</span>
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-around',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+            <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+            <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+    rounded: String,
+  },
+  emits: ["sizechange", "roundedchange"],
+  data() {
+    return {
+      sizes: ["small", "medium", "large"],
+      roundedOptions: ["small", "medium", "large"],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleRoundedChange(event) {
+      this.$emit("roundedchange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/checkbox/appearance/configurator/main.js b/vue-options-api-demos/inputs/checkbox/appearance/configurator/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/appearance/configurator/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/checkbox/appearance/configurator/main.vue b/vue-options-api-demos/inputs/checkbox/appearance/configurator/main.vue
new file mode 100644
index 00000000..aea89a62
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/appearance/configurator/main.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <CheckboxStyleConfigurator
+      :size="size"
+      @sizechange="setSize"
+      :rounded="rounded"
+      @roundedchange="setRounded"
+    />
+    <kcheckbox :size="size" :rounded="rounded" :default-checked="true" />
+  </div>
+</template>
+<script>
+import CheckboxStyleConfigurator from './CheckboxStyleConfigurator.vue';
+import { Checkbox } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    CheckboxStyleConfigurator,
+    'kcheckbox': Checkbox,
+  },
+  data() {
+    return {
+      size: 'medium',
+      rounded: 'medium',
+    };
+  },
+  methods: {
+    setRounded(event) {
+      this.rounded = event.value;
+    },
+    setSize(event) {
+      this.size = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/checkbox/appearance/rounded/main.js b/vue-options-api-demos/inputs/checkbox/appearance/rounded/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/appearance/rounded/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/checkbox/appearance/rounded/main.vue b/vue-options-api-demos/inputs/checkbox/appearance/rounded/main.vue
new file mode 100644
index 00000000..f7981983
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/appearance/rounded/main.vue
@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>No roundness:</span>
+        <kcheckbox :rounded="null" :default-checked="true" />
+      </span>
+      <span class="wrapper">
+        <span>Small roundness:</span>
+        <kcheckbox :rounded="'small'" :default-checked="true" />
+      </span>
+      <span class="wrapper">
+        <span>Medium roundness:</span>
+        <kcheckbox :rounded="'medium'" :default-checked="true" />
+      </span>
+      <span class="wrapper">
+        <span>Large roundness:</span>
+        <kcheckbox :rounded="'large'" :default-checked="true" />
+      </span>
+      <span class="wrapper">
+        <span>Custom roundness:</span>
+        <kcheckbox
+          :rounded="null"
+          :class="'custom-checkbox'"
+          :default-checked="true"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { Checkbox } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    kcheckbox: Checkbox,
+  },
+};
+</script>
+
+<style>
+.custom-checkbox input {
+  border-bottom-right-radius: 10px;
+  border-top-left-radius: 10px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/inputs/checkbox/appearance/size/main.js b/vue-options-api-demos/inputs/checkbox/appearance/size/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/appearance/size/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/checkbox/appearance/size/main.vue b/vue-options-api-demos/inputs/checkbox/appearance/size/main.vue
new file mode 100644
index 00000000..dbc7de11
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/appearance/size/main.vue
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Small size:</span>
+        <kcheckbox :size="'small'" :default-checked="true" />
+      </span>
+      <span class="wrapper">
+        <span>Medium size:</span>
+        <kcheckbox :size="'medium'" :default-checked="true" />
+      </span>
+      <span class="wrapper">
+        <span>Large size:</span>
+        <kcheckbox :size="'large'" :default-checked="true" />
+      </span>
+      <span class="wrapper">
+        <span>Custom size:</span>
+        <kcheckbox :size="null" :class="'custom-checkbox'" :default-checked="true" />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { Checkbox } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    kcheckbox: Checkbox,
+  },
+};
+</script>
+
+<style>
+.custom-checkbox input {
+  width: 30px;
+  height: 30px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+</style>
diff --git a/vue-options-api-demos/inputs/checkbox/controlled/checked/main.js b/vue-options-api-demos/inputs/checkbox/controlled/checked/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/controlled/checked/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/checkbox/controlled/checked/main.vue b/vue-options-api-demos/inputs/checkbox/controlled/checked/main.vue
new file mode 100644
index 00000000..eb2ed0f1
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/controlled/checked/main.vue
@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <div class="k-d-flex k-align-items-center">
+        <kbutton class="k-mr-4" @click="handleClick">
+            Change state
+        </kbutton>
+        <checkbox
+            v-model="checked"
+            :label="'Controlled value'"
+        />
+        &nbsp&nbsp
+        <checkbox
+            :checked="checked"
+            @change="handleChange"
+            :label="'Controlled value'"
+        />
+        </div>
+    </div>
+</template>
+<script>
+import { Checkbox } from "@progress/kendo-vue-inputs";
+import { Button } from "@progress/kendo-vue-buttons";
+
+export default {
+    components: {
+        checkbox: Checkbox,
+        kbutton: Button
+    },
+    data: function(){
+        return {
+            checked: true
+        }
+    },
+    methods: {
+        handleClick: function(){
+            this.checked = !this.checked;
+        },
+        handleChange: function(e){
+            this.checked = e.value;
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/inputs/checkbox/controlled/value/main.js b/vue-options-api-demos/inputs/checkbox/controlled/value/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/controlled/value/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/checkbox/controlled/value/main.vue b/vue-options-api-demos/inputs/checkbox/controlled/value/main.vue
new file mode 100644
index 00000000..8057bb4b
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/controlled/value/main.vue
@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <div class="k-d-flex k-align-items-center">
+        <kbutton class="k-mr-4" @click="handleClick">
+            Change state
+        </kbutton>
+        <checkbox
+            v-model="value"
+            :label="'v-model value '"
+        />
+        &nbsp&nbsp
+        <checkbox
+            :value="value"
+            @change="handleChange"
+            :label="'Controlled value'"
+        />
+        </div>
+    </div>
+</template>
+<script>
+import { Checkbox } from "@progress/kendo-vue-inputs";
+import { Button } from "@progress/kendo-vue-buttons";
+
+export default {
+    components: {
+        checkbox: Checkbox,
+        kbutton: Button
+    },
+    data: function(){
+        return {
+            value: true
+        }
+    },
+    methods: {
+        handleClick: function(){
+            this.value = !this.value;
+        },
+        handleChange: function(e){
+            this.value = e.value;
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/inputs/checkbox/default/main.js b/vue-options-api-demos/inputs/checkbox/default/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/default/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/checkbox/default/main.vue b/vue-options-api-demos/inputs/checkbox/default/main.vue
new file mode 100644
index 00000000..55318496
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/default/main.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <checkbox :default-checked="true" :label="'Default checked'" />
+    </div>
+</template>
+<script>
+import { Checkbox } from "@progress/kendo-vue-inputs";
+
+export default {
+    components: {
+        checkbox: Checkbox
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/inputs/checkbox/disabled/main.js b/vue-options-api-demos/inputs/checkbox/disabled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/checkbox/disabled/main.vue b/vue-options-api-demos/inputs/checkbox/disabled/main.vue
new file mode 100644
index 00000000..97f8d452
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/disabled/main.vue
@@ -0,0 +1,17 @@
+<template>
+    <div>
+        <checkbox :disabled="true" :label="'Disabled unchecked'" />
+        <br />
+        <checkbox :disabled="true" :checked="true" :label="'Disabled checked'" />
+    </div>
+</template>
+<script>
+import { Checkbox } from "@progress/kendo-vue-inputs";
+
+export default {
+    components: {
+        checkbox: Checkbox
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/inputs/checkbox/form/basic/main.js b/vue-options-api-demos/inputs/checkbox/form/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/form/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/checkbox/form/basic/main.vue b/vue-options-api-demos/inputs/checkbox/form/basic/main.vue
new file mode 100644
index 00000000..3c4dbaff
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/form/basic/main.vue
@@ -0,0 +1,76 @@
+<template>
+   <div class="row example-wrapper">
+       <div class="row example-wrapper">
+      <div class="col-xs-12 col-sm-8 offset-sm-2 example-col">
+        <form class="k-form" @submit="handleSubmit">
+          <fieldset class="k-form-fieldset">
+            <legend class="k-form-legend">Create new account:</legend>
+            <div class="mb-3">
+              <kinput 
+                :name="'username'"
+                :label="'First Name'"
+                :pattern="'[A-Za-z]+'"
+                :minLength="2"
+                :required="true"
+              />
+            </div>
+            <div class="mb-3">
+              <kinput 
+                :name="'password'"
+                :type="'password'"
+                :label="'Password'"
+                :required="true"
+                :minLength="6"
+                :maxLength="18"
+              />
+            </div>
+            <div class="mb-3">
+               <checkbox :id="'ch'" :name="'checkbox'"
+                :required="true"
+                 :label-render="'myTemplate'"
+                >
+                <template v-slot:myTemplate>
+                  <span>
+                      By clicking <a href="#">Sign Up</a>, you agree to our <a href="#">Terms and Conditions</a>.
+                      </span>
+                </template>
+                </checkbox>
+            </div>
+          </fieldset>
+          <kbutton type="submit" :theme-color="'primary'">Sign up</kbutton>
+        </form>
+      </div>
+               <div v-if="success"
+                        class="alert alert-success"
+                        :style="{ position: 'absolute' }"
+                    >
+                        Form submitted!
+                </div>
+            </div>
+    </div>
+</template>
+<script>
+import { Input, Checkbox } from '@progress/kendo-vue-inputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'kinput': Input,
+        checkbox: Checkbox,
+      'kbutton': Button
+    },
+    data: function(){
+        return {
+            success: false
+        }
+    },
+    methods: {
+        handleSubmit (event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(() => { this.success = false; }, 3000);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/checkbox/form/custom-message/main.js b/vue-options-api-demos/inputs/checkbox/form/custom-message/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/form/custom-message/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/checkbox/form/custom-message/main.vue b/vue-options-api-demos/inputs/checkbox/form/custom-message/main.vue
new file mode 100644
index 00000000..ddcf6bc6
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/form/custom-message/main.vue
@@ -0,0 +1,83 @@
+<template>
+   <div class="row example-wrapper">
+       <div class="row example-wrapper">
+      <div class="col-xs-12 col-sm-8 offset-sm-2 example-col">
+        <form class="k-form" @submit="handleSubmit">
+          <fieldset class="k-form-fieldset">
+            <legend class="k-form-legend">Create new account:</legend>
+            <div class="mb-3">
+              <kinput 
+                :name="'username'"
+                :label="'First Name'"
+                :pattern="'[A-Za-z]+'"
+                :minLength="2"
+                :required="true"
+                :validation-message="usernameValidationMessage"
+              />
+            </div>
+            <div class="mb-3">
+              <kinput 
+                :name="'password'"
+                :type="'password'"
+                :label="'Password'"
+                :required="true"
+                :minLength="6"
+                :maxLength="18"
+                :validation-message="passwordValidationMessage"
+              />
+            </div>
+            <div class="mb-3">
+                <checkbox :id="'ch'" :name="'checkbox'"
+                :required="true"
+                 :label-render="'myTemplate'"
+                :validation-message="checkboxTermsAndConditionsMessage"
+                >
+                <template v-slot:myTemplate>
+                  <span>
+                      By clicking <a href="#">Sign Up</a>, you agree to our <a href="#">Terms and Conditions</a>.
+                      </span>
+                </template>
+                </checkbox>
+            </div>
+          </fieldset>
+          <kbutton type="submit" :theme-color="'primary'">Sign up</kbutton>
+        </form>
+      </div>
+               <div v-if="success"
+                        class="alert alert-success"
+                        :style="{ position: 'absolute' }"
+                    >
+                        Form submitted!
+                </div>
+            </div>
+    </div>
+</template>
+<script>
+import { Input, Checkbox } from '@progress/kendo-vue-inputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'kinput': Input,
+        checkbox: Checkbox,
+      'kbutton': Button
+    },
+    data: function(){
+        return {
+            success: false,
+            usernameValidationMessage: 'Your username should contain only letters',
+            passwordValidationMessage: "Please enter password between 6 and 16 characters",
+            checkboxTermsAndConditionsMessage: "Please indicate that you accept the Terms and Conditions",
+            checkboxsignUpToNewsletterMessage : "Please sign up to the Newsletter"
+        }
+    },
+    methods: {
+        handleSubmit (event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(() => { this.success = false; }, 3000);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/checkbox/form/disable-styles/main.js b/vue-options-api-demos/inputs/checkbox/form/disable-styles/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/form/disable-styles/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/checkbox/form/disable-styles/main.vue b/vue-options-api-demos/inputs/checkbox/form/disable-styles/main.vue
new file mode 100644
index 00000000..6a552097
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/form/disable-styles/main.vue
@@ -0,0 +1,85 @@
+<template>
+   <div class="row example-wrapper">
+       <div class="row example-wrapper">
+      <div class="col-xs-12 col-sm-8 offset-sm-2 example-col">
+        <form class="k-form" @submit="handleSubmit">
+          <fieldset class="k-form-fieldset">
+            <legend class="k-form-legend">Create new account:</legend>
+            <div class="mb-3">
+              <kinput 
+                :name="'username'"
+                :label="'First Name'"
+                :pattern="'[A-Za-z]+'"
+                :minLength="2"
+                :required="true"
+                :validation-message="usernameValidationMessage"
+              />
+            </div>
+            <div class="mb-3">
+              <kinput 
+                :name="'password'"
+                :type="'password'"
+                :label="'Password'"
+                :required="true"
+                :minLength="6"
+                :maxLength="18"
+                :validity-styles="false"
+                :validation-message="passwordValidationMessage"
+              />
+            </div>
+            <div class="mb-3">
+               <checkbox :id="'ch'" :name="'checkbox'"
+                :required="true"
+                 :validity-styles="false"
+                 :label-render="'myTemplate'"
+                :validation-message="checkboxTermsAndConditionsMessage"
+                >
+                <template v-slot:myTemplate>
+                  <span>
+                      By clicking <a href="#">Sign Up</a>, you agree to our <a href="#">Terms and Conditions</a>.
+                      </span>
+                </template>
+                </checkbox>
+            </div>
+          </fieldset>
+          <kbutton type="submit" :theme-color="'primary'">Sign up</kbutton>
+        </form>
+      </div>
+               <div v-if="success"
+                        class="alert alert-success"
+                        :style="{ position: 'absolute' }"
+                    >
+                        Form submitted!
+                </div>
+            </div>
+    </div>
+</template>
+<script>
+import { Input, Checkbox } from '@progress/kendo-vue-inputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'kinput': Input,
+        checkbox: Checkbox,
+      'kbutton': Button
+    },
+    data: function(){
+        return {
+            success: false,
+            usernameValidationMessage: 'Your username should contain only letters',
+            passwordValidationMessage: "Please enter password between 6 and 16 characters",
+            checkboxTermsAndConditionsMessage: "Please indicate that you accept the Terms and Conditions",
+            checkboxsignUpToNewsletterMessage : "Please sign up to the Newsletter"
+        }
+    },
+    methods: {
+        handleSubmit (event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(() => { this.success = false; }, 3000);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/checkbox/form/kendo-vue-form/FormCheckbox.vue b/vue-options-api-demos/inputs/checkbox/form/kendo-vue-form/FormCheckbox.vue
new file mode 100644
index 00000000..9c415a82
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/form/kendo-vue-form/FormCheckbox.vue
@@ -0,0 +1,84 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+        <span>
+          <checkbox 
+                :value="value"
+                :valid="valid"
+                :id="id"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus" />
+          </span>
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Checkbox } from "@progress/kendo-vue-inputs";
+
+export default {
+    props: {
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        disabled: Boolean,
+        optional: Boolean,
+        visited: Boolean,
+        modified: Boolean,
+        value: {
+             type: [Boolean, String],
+             default: false
+        }
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        klabel: Label,
+        checkbox: Checkbox
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/inputs/checkbox/form/kendo-vue-form/FormContent.vue b/vue-options-api-demos/inputs/checkbox/form/kendo-vue-form/FormContent.vue
new file mode 100644
index 00000000..07505af6
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/form/kendo-vue-form/FormContent.vue
@@ -0,0 +1,106 @@
+<template>
+    <form-element :style="{ maxWidth: '650px' }">
+          <fieldset class="k-form-fieldset">
+            <legend class="k-form-legend">
+              BOOK YOUR DREAM VACATION TODAY
+            </legend>
+             <field
+                :id="'firstName'"
+                :name="'firstName'"
+                :label="'First Name'"
+                :component="'myTemplate'"
+                :validator="firstNameValidator"
+              >
+               <template v-slot:myTemplate="{props}">
+                  <forminput
+                     v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  />
+              </template>
+              </field>
+              <field
+                :id="'lastName'"
+                :name="'lastName'"
+                :label="'Last Name'"
+                :component="'myTemplate'"
+                :validator="lastNameValidator"
+              >
+               <template v-slot:myTemplate="{props}">
+                  <forminput
+                     v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  />
+              </template>
+              </field>
+              <span class="k-form-separator" />
+              <field
+                  :id="'terms'"
+                  :name="'terms'"
+                  :label="'I agree with terms and conditions'"
+                  :component="'myTemplate'"
+                  :validator="checkboxValidator"
+                >
+                <template v-slot:myTemplate="{props}">
+                    <formcheckbox
+                       v-bind="props"
+                      @change="props.onChange"
+                      @blur="props.onBlur"
+                      @focus="props.onFocus"
+                    ></formcheckbox>
+                </template>
+              </field>
+            <div class="k-form-buttons">
+              <kbutton
+                :primary="true"
+                :type="'submit'"
+                :disabled="!kendoForm.allowSubmit"
+              >
+                Submit
+              </kbutton>
+            </div>
+          </fieldset>
+    </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import FormInput from "./FormInput.vue";
+import FormCheckbox from "./FormCheckbox.vue";
+import { Button } from "@progress/kendo-vue-buttons";
+
+export default {
+    components: {
+      field: Field,
+      'form-element': FormElement,
+      forminput: FormInput,
+      formcheckbox: FormCheckbox,
+      kbutton: Button
+    },
+    inject: {
+      kendoForm: { default: {} }
+    },
+    methods: {
+      firstNameValidator (value){
+        return   !value
+          ? "First Name is required"
+          : value.length < 7
+          ? "First Name should be at least 7 characters long."
+          : "";
+      },
+      lastNameValidator (value) {
+        return !value
+          ? "Last Name is required"
+          : value.length < 7
+          ? "Last Name should be at least 7 characters long."
+          : "";
+      },
+      checkboxValidator (value) {
+        return  !value ? "Terms&Conditions checkbox is required" : "";
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/checkbox/form/kendo-vue-form/FormInput.vue b/vue-options-api-demos/inputs/checkbox/form/kendo-vue-form/FormInput.vue
new file mode 100644
index 00000000..47972c76
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/form/kendo-vue-form/FormInput.vue
@@ -0,0 +1,94 @@
+<template>
+  <fieldwrapper>
+    <klabel
+      :class="'k-form-label'"
+      :editor-id="id"
+      :editor-valid="valid"
+      :disabled="disabled"
+      :optional="optional"
+    >
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <kinput
+        :valid="valid"
+        :id="id"
+        :value="value"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :required="required"
+        @input="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+export default {
+  props: {
+    optional: Boolean,
+    disabled: Boolean,
+    placeholder: String,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: String,
+      default: "",
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    kinput: Input,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : "";
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : "";
+    },
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit("change", e);
+    },
+    handleBlur(e) {
+      this.$emit("blur", e);
+    },
+    handleFocus(e) {
+      this.$emit("focus", e);
+    },
+  },
+};
+</script>
+
diff --git a/vue-options-api-demos/inputs/checkbox/form/kendo-vue-form/main.js b/vue-options-api-demos/inputs/checkbox/form/kendo-vue-form/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/form/kendo-vue-form/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/checkbox/form/kendo-vue-form/main.vue b/vue-options-api-demos/inputs/checkbox/form/kendo-vue-form/main.vue
new file mode 100644
index 00000000..798b6d8d
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/form/kendo-vue-form/main.vue
@@ -0,0 +1,23 @@
+<template>
+    <k-form
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/checkbox/form/override/main.js b/vue-options-api-demos/inputs/checkbox/form/override/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/form/override/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/checkbox/form/override/main.vue b/vue-options-api-demos/inputs/checkbox/form/override/main.vue
new file mode 100644
index 00000000..abbf4687
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/form/override/main.vue
@@ -0,0 +1,100 @@
+<template>
+ <div class="row example-wrapper">
+                 <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                     <div class="card">
+                         <div class="card-block">
+                             <form class="k-form" @submit="handleSubmit">
+                                 <fieldset>
+                                     <legend>Create new account:</legend>
+                                     <div class="mb-3">
+                                         <k-input
+                                             :name="'username'"
+                                             :label="'First Name'"
+                                             :pattern="'[A-Za-z]+'"
+                                             :min-length="2"
+                                             :required="true"
+                                             :validation-message="usernameValidationMessage"
+                                         >
+                                         </k-input>
+                                     </div>
+                                     <div class="mb-3">
+                                         <k-input 
+                                             v-model="possword"
+                                             :name="'password'"
+                                             type="password"
+                                             :label="'Password'"
+                                             :required="true"
+                                             :min-length="6"
+                                             :max-length="18"
+                                             :validation-message="passwordValidationMessage"
+                                         />
+                                     </div>
+                                     <div class="mb-3">
+                                         <k-input 
+                                             v-model="confirmPassword"
+                                             :name="'confirmPassword'"
+                                             :type="'password'"
+                                             :style="{ width: '100%' }"
+                                             :label="'Confirm Password'"
+                                             :valid="confirmValid"
+                                             :min-length="6"
+                                             :max-length="18"
+                                             :validation-message="passwordValidationMessage"
+                                         />
+                                     </div>
+                                     <div class="mb-3">
+                                         <k-input :style="{ width: '230px' }"
+                                             :name="'email'"
+                                             :type="'email'"
+                                             :label="'Email address'"
+                                             :required='true'
+                                         />
+                                     </div>
+                                 </fieldset>
+                                 <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                             </form>
+                         </div>
+                     </div>
+                 </div>
+                <div v-if="success"
+                         class="alert alert-success"
+                         :style="{ position: 'absolute' }"
+                     >
+                         Form submitted!
+                 </div>
+             </div>
+</template>
+<script>
+import { Input } from '@progress/kendo-vue-inputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'k-input': Input,
+      'kbutton': Button
+    },
+    data: function(){
+        return {
+            usernameValidationMessage: "Your username should contain only letters!",
+            passwordValidationMessage: "Please enter password between 6 and 16 characters!",
+            confirmPasswordValidationMessage: "Passwords does not match!",
+            password: '',
+            confirmPassword: '',
+            success: false
+        }
+    },
+    computed: {
+        confirmValid: function(){
+            return this.password && this.password === this.confirmPassword;
+        }
+    },
+    methods: {
+        handleSubmit (event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(() => { this.success = false; }, 3000);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/checkbox/keyboard/main.js b/vue-options-api-demos/inputs/checkbox/keyboard/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/keyboard/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/checkbox/keyboard/main.vue b/vue-options-api-demos/inputs/checkbox/keyboard/main.vue
new file mode 100644
index 00000000..4778853d
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/keyboard/main.vue
@@ -0,0 +1,20 @@
+<template>
+    <div>
+        <checkbox ref="checkboxRef" :label="'Initially focused'" />
+        <br />
+        <checkbox :label="'Secondary focused'" />
+    </div>
+</template>
+<script>
+import { Checkbox } from "@progress/kendo-vue-inputs";
+
+export default {
+    components: {
+        checkbox: Checkbox,
+    },
+    mounted: function(){
+        this.$refs.checkboxRef.focusElement();
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/inputs/checkbox/labels/custom/main.js b/vue-options-api-demos/inputs/checkbox/labels/custom/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/labels/custom/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/checkbox/labels/custom/main.vue b/vue-options-api-demos/inputs/checkbox/labels/custom/main.vue
new file mode 100644
index 00000000..10689281
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/labels/custom/main.vue
@@ -0,0 +1,26 @@
+<template>
+    <div>
+        <checkbox :id="'chb1'">
+            <label
+            class="k-checkbox-label"
+            :for="'chb1'"
+            :style="{ display:'inline-block'}"
+            >
+            By clicking <a href="#">Sign Up</a>, you agree to our Terms and
+            Conditions.
+            </label>
+        </checkbox>
+    </div>
+</template>
+<script>
+import { Checkbox } from "@progress/kendo-vue-inputs";
+import { Label } from "@progress/kendo-vue-labels";
+
+export default {
+    components: {
+        checkbox: Checkbox,
+        label: Label
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/inputs/checkbox/labels/setup/main.js b/vue-options-api-demos/inputs/checkbox/labels/setup/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/labels/setup/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/checkbox/labels/setup/main.vue b/vue-options-api-demos/inputs/checkbox/labels/setup/main.vue
new file mode 100644
index 00000000..22a4038c
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/labels/setup/main.vue
@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <checkbox :id="'chb1'" :label="'Checkbox label'" />
+        <br />
+        <br />
+        <checkbox
+            :id="'chb2'"
+            :label="'Checkbox label before'"
+            :label-placement="'before'"
+        />
+    </div>
+</template>
+<script>
+import { Checkbox } from "@progress/kendo-vue-inputs";
+
+export default {
+    components: {
+        checkbox: Checkbox
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/inputs/checkbox/main/main.js b/vue-options-api-demos/inputs/checkbox/main/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/main/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/checkbox/main/main.vue b/vue-options-api-demos/inputs/checkbox/main/main.vue
new file mode 100644
index 00000000..277d0715
--- /dev/null
+++ b/vue-options-api-demos/inputs/checkbox/main/main.vue
@@ -0,0 +1,20 @@
+<template>
+    <div>
+        <checkbox :label="'Unchecked state'" />
+        <br />
+        <checkbox :default-checked="true" :label="'Checked state'" />
+        <br />
+        <checkbox :value="null" :label="'Indeterminate state'" />
+        <br />
+    </div>
+</template>
+<script>
+import { Checkbox } from "@progress/kendo-vue-inputs";
+
+export default {
+    components: {
+        checkbox: Checkbox
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/inputs/colorgradient/colorcontrast/main.js b/vue-options-api-demos/inputs/colorgradient/colorcontrast/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorgradient/colorcontrast/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/colorgradient/colorcontrast/main.vue b/vue-options-api-demos/inputs/colorgradient/colorcontrast/main.vue
new file mode 100644
index 00000000..c51c167c
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorgradient/colorcontrast/main.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="row">
+    <div class="col-xs-12 col-md-6 example-col">
+      <p>Foreground Color</p>
+      <ColorGradient
+        :value="foregroundColor"
+        :background-color="backgroundColor"
+        @change="handleForegroundChange"
+      />
+    </div>
+    <div class="col-xs-12 col-md-6 example-col">
+      <p>Background Color</p>
+      <ColorGradient
+        :value="backgroundColor"
+        :opacity="false"
+        @change="handleBackgroundChange"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import { ColorGradient } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    ColorGradient,
+  },
+  data() {
+    return {
+      foregroundColor: 'rgba(49,118,122,1)',
+      backgroundColor: 'rgba(255,255,255,1)',
+    };
+  },
+  methods: {
+    handleForegroundChange(event) {
+      this.foregroundColor = event.value;
+    },
+    handleBackgroundChange(event) {
+      this.backgroundColor = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/colorgradient/controlled/main.js b/vue-options-api-demos/inputs/colorgradient/controlled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorgradient/controlled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/colorgradient/controlled/main.vue b/vue-options-api-demos/inputs/colorgradient/controlled/main.vue
new file mode 100644
index 00000000..9bf1dea3
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorgradient/controlled/main.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="row">
+    <div class="m-3">
+      <p>v-model</p>
+      <ColorGradient v-model="value" />
+    </div>
+    <div class="m-3">
+      <p>value and change event</p>
+      <ColorGradient :value="value" @change="handleChange" />
+    </div>
+  </div>
+</template>
+<script>
+import { ColorGradient } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    ColorGradient,
+  },
+  data() {
+    return {
+      value: 'rgba(237, 126, 50, 1)',
+    };
+  },
+  methods: {
+    handleChange(event) {
+      this.value = event.value;
+    }
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/colorgradient/disabled/main.js b/vue-options-api-demos/inputs/colorgradient/disabled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorgradient/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/colorgradient/disabled/main.vue b/vue-options-api-demos/inputs/colorgradient/disabled/main.vue
new file mode 100644
index 00000000..d303f0a5
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorgradient/disabled/main.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <ColorGradient :default-value="value" :disabled="true" />
+  </div>
+</template>
+<script>
+import { ColorGradient } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    ColorGradient,
+  },
+  data() {
+    return {
+      value: 'rgba(237, 126, 50, 1)',
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/colorgradient/events/Logger.vue b/vue-options-api-demos/inputs/colorgradient/events/Logger.vue
new file mode 100644
index 00000000..aa04a80b
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorgradient/events/Logger.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="example-config">
+    <h5>{{ title }}</h5>
+    <ul class="event-log">
+      <li v-for="(event, idx) in events" :key="idx">{{ event }}</li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    events: Array,
+    title: String,
+  },
+};
+</script>
+
+<style scoped>
+.example-config {
+  margin: 0 0 20px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+  margin: 0;
+  padding: 0;
+  max-height: 100px;
+  overflow-y: auto;
+  list-style-type: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: white;
+}
+.event-log li {
+  margin: 0;
+  padding: 0.3em;
+  line-height: 1.2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+  margin-bottom: -1px;
+}
+</style>
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/colorgradient/events/main.js b/vue-options-api-demos/inputs/colorgradient/events/main.js
new file mode 100644
index 00000000..1f1c6c86
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorgradient/events/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
+
diff --git a/vue-options-api-demos/inputs/colorgradient/events/main.vue b/vue-options-api-demos/inputs/colorgradient/events/main.vue
new file mode 100644
index 00000000..195215e6
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorgradient/events/main.vue
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <ColorGradient @change="onChange" />
+    <br />
+    <br />
+    <Logger :title="'Events list'" :events="eventsList" />
+  </div>
+</template>
+<script>
+import { ColorGradient } from '@progress/kendo-vue-inputs';
+import Logger from './Logger.vue';
+
+export default {
+  components: {
+    Logger,
+    ColorGradient,
+  },
+  computed: {
+    eventsList() {
+      return this.events;
+    },
+  },
+  data: function () {
+    return {
+      events: [],
+    };
+  },
+  methods: {
+    onChange(e) {
+      this.events.unshift(
+        'Change event triggered. Current ColorGradient value is: HEX: ' +
+          e.value +
+          ', RGBA:' +
+          e.rgbaValue
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/colorgradient/keyboard/main.js b/vue-options-api-demos/inputs/colorgradient/keyboard/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorgradient/keyboard/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/colorgradient/keyboard/main.vue b/vue-options-api-demos/inputs/colorgradient/keyboard/main.vue
new file mode 100644
index 00000000..21fc51c9
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorgradient/keyboard/main.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="example-wrapper">
+    <ColorGradient ref="colorPickerRef" />
+  </div>
+</template>
+<script>
+import { ColorGradient } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    ColorGradient,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/colorgradient/opacity/main.js b/vue-options-api-demos/inputs/colorgradient/opacity/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorgradient/opacity/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/colorgradient/opacity/main.vue b/vue-options-api-demos/inputs/colorgradient/opacity/main.vue
new file mode 100644
index 00000000..af77ecf9
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorgradient/opacity/main.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <div class="example-config">
+      <strong>
+        Selected color: <span>{{ value }}</span>
+      </strong>
+    </div>
+    <ColorGradient :opacity="false" :value="value" @change="handleChange" />
+  </div>
+</template>
+<script>
+import { ColorGradient } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    ColorGradient,
+  },
+  data() {
+    return {
+      value: 'rgba(237, 126, 50, 1)',
+    };
+  },
+  methods: {
+    handleChange(event) {
+      this.value = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/colorgradient/overview/main.js b/vue-options-api-demos/inputs/colorgradient/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorgradient/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/colorgradient/overview/main.vue b/vue-options-api-demos/inputs/colorgradient/overview/main.vue
new file mode 100644
index 00000000..fcd2a2dc
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorgradient/overview/main.vue
@@ -0,0 +1,46 @@
+<template>
+  <div
+    :style="{
+      display: 'flex',
+      'flex-direction': 'column',
+      'align-items': 'center',
+    }"
+  >
+    <div
+      :style="{
+        'background-color': value,
+        width: '490px',
+        height: '290px',
+        'background-image': `url(${backgroundUrl})`,
+      }"
+    ></div>
+    <ColorGradient
+      :value="value"
+      @change="handleChange"
+      :style="{
+        'margin-top': '10px',
+      }"
+    />
+  </div>
+</template>
+<script>
+import { ColorGradient } from '@progress/kendo-vue-inputs';
+const motorImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/inputs/colorpicker/motor.png';
+
+export default {
+  components: {
+    ColorGradient,
+  },
+  data() {
+    return {
+      value: 'rgba(237, 126, 50, 1)',
+      backgroundUrl: motorImage
+    };
+  },
+  methods: {
+    handleChange(event) {
+      this.value = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/colorpalette/controlled/main.js b/vue-options-api-demos/inputs/colorpalette/controlled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpalette/controlled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/colorpalette/controlled/main.vue b/vue-options-api-demos/inputs/colorpalette/controlled/main.vue
new file mode 100644
index 00000000..55d3a97c
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpalette/controlled/main.vue
@@ -0,0 +1,33 @@
+<template>
+   <div class="row">
+      <div class="m-3">
+       <span :style="{ color: value }">Selected color: {{ value }}</span>
+       <br />
+       <ColorPalette :value="value" @change="handleOnChange" :palette="'basic'" />
+    </div>
+    <div class="m-3">
+      <span :style="{ color: value }">Selected color: {{ value }}</span>
+      <br />
+      <ColorPalette v-model="value" :palette="'basic'" />
+    </div>
+   </div> 
+</template>
+<script>
+import { ColorPalette } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    ColorPalette,
+  },
+  data() {
+    return {
+      value: 'none',
+    };
+  },
+  methods: {
+    handleOnChange(e) {
+      this.value = e.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/colorpalette/custom/main.js b/vue-options-api-demos/inputs/colorpalette/custom/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpalette/custom/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/colorpalette/custom/main.vue b/vue-options-api-demos/inputs/colorpalette/custom/main.vue
new file mode 100644
index 00000000..f1232ad1
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpalette/custom/main.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="example">
+    <ColorPalette
+      :columns="5"
+      :tile-size="{
+        width: 40,
+        height: 30,
+      }"
+      :palette="'basic'"
+    />
+  </div>
+</template>
+<script>
+import { ColorPalette } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    ColorPalette,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/colorpalette/disabled/main.js b/vue-options-api-demos/inputs/colorpalette/disabled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpalette/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/colorpalette/disabled/main.vue b/vue-options-api-demos/inputs/colorpalette/disabled/main.vue
new file mode 100644
index 00000000..3f94de29
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpalette/disabled/main.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="example">
+    <ColorPalette :disabled="true" :palette="'office'" />
+  </div>
+</template>
+<script>
+import { ColorPalette } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    ColorPalette,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/colorpalette/keyboard/main.js b/vue-options-api-demos/inputs/colorpalette/keyboard/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpalette/keyboard/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/colorpalette/keyboard/main.vue b/vue-options-api-demos/inputs/colorpalette/keyboard/main.vue
new file mode 100644
index 00000000..e83327c3
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpalette/keyboard/main.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="example-wrapper">
+    <ColorPalette ref="colorPaletteRef" :default-value="value" />
+    <p>
+      (use <code>←↓↑→</code> to navigate, <code>enter</code> to select the
+      value)
+    </p>
+  </div>
+</template>
+<script>
+import { ColorPalette } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    ColorPalette,
+  },
+  mounted() {
+    this.$refs.colorPaletteRef.focus();
+  },
+  data() {
+    return {
+      value: "rgba(237, 126, 50, 1)",
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/colorpalette/overview/basic/main.js b/vue-options-api-demos/inputs/colorpalette/overview/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpalette/overview/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/colorpalette/overview/basic/main.vue b/vue-options-api-demos/inputs/colorpalette/overview/basic/main.vue
new file mode 100644
index 00000000..2546f633
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpalette/overview/basic/main.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="example">
+    <div
+      class="img"
+      :style="{
+        backgroundColor: value,
+      }"
+    />
+    <div class="description">
+      <h1>Comfy T-shirt with a cut-away neckline</h1>
+      <p class="price">$19.99</p>
+      <span>incl. VAT</span>
+
+      <p class="selected-color">{{ colorNames[value] }}</p>
+      <ColorPalette
+        :palette="['#37399b', '#a81c85', '#0ab3cc', '#2f7d20', '#a21616']"
+        :value="value"
+        :tile-size="40"
+        @change="handleOnChange"
+      />
+      <button
+        class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
+      >
+        Add to cart
+      </button>
+    </div>
+  </div>
+</template>
+<script>
+import { ColorPalette } from "@progress/kendo-vue-inputs";
+import "./styles.css";
+
+export default {
+  components: {
+    ColorPalette,
+  },
+
+  data() {
+    return {
+      value: "#a21616",
+      colorNames: {
+        "#37399b": "Navy blue",
+        "#a81c85": "Violet",
+        "#0ab3cc": "Light blue",
+        "#2f7d20": "Forest green",
+        "#a21616": "Dark red",
+      },
+    };
+  },
+  methods: {
+    handleOnChange(e) {
+      this.value = e.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/colorpalette/overview/basic/styles.css b/vue-options-api-demos/inputs/colorpalette/overview/basic/styles.css
new file mode 100644
index 00000000..f7de5d25
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpalette/overview/basic/styles.css
@@ -0,0 +1,56 @@
+.example {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    margin: 0 auto;
+    width: 700px;
+    color: #44403f;
+  }
+  .k-colorpalette .k-item {
+    border-radius: 50%;
+  }
+  .description {
+    width: 340px;
+    margin-top: 35px;
+    align-self: flex-start;
+  }
+  h1 {
+    font-size: 32px;
+    font-weight: bold;
+    margin-bottom: 20px;
+  }
+  p {
+    font-size: 20px;
+    letter-spacing: 0.025em;
+    margin-bottom: 0;
+  }
+  .description span {
+    color: #8e8682;
+    display: block;
+    font-size: 13px;
+  }
+  .selected-color {
+    margin: 40px 0 10px 0;
+  }
+  .img {
+    width: 100%;
+    height: 480px;
+    margin-right: 10px;
+    background-size: cover;
+    background-image: url("https://demos.telerik.com/kendo-vue-ui/assets/inputs/colorpalette/demo-img.png");
+  }
+  button {
+    display: block;
+    background: transparent;
+    color: #44403f;
+    border-color: currentColor;
+    width: 200px;
+    margin-top: 40px;
+    padding: 8px;
+    font-size: 20px;
+  }
+  button:hover {
+    background: #0083ff;
+    color: #fff;
+    border-color: currentColor;
+  }
diff --git a/vue-options-api-demos/inputs/colorpalette/overview/events/Logger.vue b/vue-options-api-demos/inputs/colorpalette/overview/events/Logger.vue
new file mode 100644
index 00000000..aa04a80b
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpalette/overview/events/Logger.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="example-config">
+    <h5>{{ title }}</h5>
+    <ul class="event-log">
+      <li v-for="(event, idx) in events" :key="idx">{{ event }}</li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    events: Array,
+    title: String,
+  },
+};
+</script>
+
+<style scoped>
+.example-config {
+  margin: 0 0 20px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+  margin: 0;
+  padding: 0;
+  max-height: 100px;
+  overflow-y: auto;
+  list-style-type: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: white;
+}
+.event-log li {
+  margin: 0;
+  padding: 0.3em;
+  line-height: 1.2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+  margin-bottom: -1px;
+}
+</style>
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/colorpalette/overview/events/main.js b/vue-options-api-demos/inputs/colorpalette/overview/events/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpalette/overview/events/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/colorpalette/overview/events/main.vue b/vue-options-api-demos/inputs/colorpalette/overview/events/main.vue
new file mode 100644
index 00000000..724fd12f
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpalette/overview/events/main.vue
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <ColorPalette :palette="'office'" @change="onChange" />
+    <br />
+    <br />
+    <Logger :title="'Events list'" :events="eventsList" />
+  </div>
+</template>
+<script>
+import { ColorPalette } from '@progress/kendo-vue-inputs';
+import Logger from './Logger.vue';
+
+export default {
+  components: {
+    Logger,
+    ColorPalette,
+  },
+  computed: {
+    eventsList() {
+      return this.events;
+    },
+  },
+  data: function () {
+    return {
+      events: [],
+    };
+  },
+  methods: {
+    onChange(e) {
+      this.events.unshift(
+        'Change event triggered. Current ColorPalette value is: HEX: ' +
+          e.value +
+          '; RGB: ' +
+          e.rgbaValue
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/colorpalette/presets/main.js b/vue-options-api-demos/inputs/colorpalette/presets/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpalette/presets/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/colorpalette/presets/main.vue b/vue-options-api-demos/inputs/colorpalette/presets/main.vue
new file mode 100644
index 00000000..10205af8
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpalette/presets/main.vue
@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <div class="row">
+      <div class="col-md-3">
+        <h4>Office</h4>
+        <ColorPalette :tile-size="16" :palette="'office'" />
+      </div>
+      <div class="col-md-3">
+        <h4>Apex</h4>
+        <ColorPalette :tile-size="16" :palette="'apex'" />
+      </div>
+      <div class="col-md-3">
+        <h4>Austin</h4>
+        <ColorPalette :tile-size="16" :palette="'austin'" />
+      </div>
+      <div class="col-md-3">
+        <h4>Clarity</h4>
+        <ColorPalette :tile-size="16" :palette="'clarity'" />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-3">
+        <h4>Slipstream</h4>
+        <ColorPalette :tile-size="16" :palette="'slipstream'" />
+      </div>
+      <div class="col-md-3">
+        <h4>Metro</h4>
+        <ColorPalette :tile-size="16" :palette="'metro'" />
+      </div>
+      <div class="col-md-3">
+        <h4>Flow</h4>
+        <ColorPalette :tile-size="16" :palette="'flow'" />
+      </div>
+      <div class="col-md-3">
+        <h4>Hardcover</h4>
+        <ColorPalette :tile-size="16" :palette="'hardcover'" />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-3">
+        <h4>Trek</h4>
+        <ColorPalette :tile-size="16" :palette="'trek'" />
+      </div>
+      <div class="col-md-3">
+        <h4>Verve</h4>
+        <ColorPalette :tile-size="16" :palette="'verve'" />
+      </div>
+      <div class="col-md-3">
+        <h4>Basic</h4>
+        <ColorPalette :tile-size="16" :palette="'basic'" />
+      </div>
+      <div class="col-md-3">
+        <h4>Monochrome</h4>
+        <ColorPalette :tile-size="16" :palette="'monochrome'" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ColorPalette } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    ColorPalette,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/colorpicker/adaptive-rendering/main.js b/vue-options-api-demos/inputs/colorpicker/adaptive-rendering/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/adaptive-rendering/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/colorpicker/adaptive-rendering/main.vue b/vue-options-api-demos/inputs/colorpicker/adaptive-rendering/main.vue
new file mode 100644
index 00000000..a438c3e9
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/adaptive-rendering/main.vue
@@ -0,0 +1,23 @@
+<template>
+    <div class="example-wrapper">
+      <ColorPicker
+        :adaptive="true"
+        :adaptive-title="'Choose color'"
+        :default-value="defaultValue"
+      />
+    </div>
+  </template>
+<script>
+import { ColorPicker } from "@progress/kendo-vue-inputs";
+
+export default {
+    components: {
+        ColorPicker
+    },
+    data() {
+        return {
+            defaultValue: "rgba(237, 126, 50, 1)",
+        };
+    },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/colorpicker/appearance/ColorPickerConfigurator.vue b/vue-options-api-demos/inputs/colorpicker/appearance/ColorPickerConfigurator.vue
new file mode 100644
index 00000000..6301fe82
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/appearance/ColorPickerConfigurator.vue
@@ -0,0 +1,105 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Fill Mode
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="fillModes"
+              :value="fillMode"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleFillModeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+    fillMode: String,
+    rounded: String,
+  },
+  emits: [
+    "sizechange",
+    "fillmodechange",
+    "roundedchange",
+  ],
+  data() {
+    return {
+      sizes: ["small", "medium", "large"],
+      fillModes: ["solid", "outline", "flat"],
+      roundedOptions: ["small", "medium", "large", "full"],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleFillModeChange(event) {
+      this.$emit("fillmodechange", event);
+    },
+    handleRoundedChange(event) {
+      this.$emit("roundedchange", event);
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/colorpicker/appearance/main.js b/vue-options-api-demos/inputs/colorpicker/appearance/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/appearance/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/colorpicker/appearance/main.vue b/vue-options-api-demos/inputs/colorpicker/appearance/main.vue
new file mode 100644
index 00000000..1bb9a867
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/appearance/main.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <ColorPickerConfigurator
+      :size="size"
+      @sizechange="setSize"
+      :fill-mode="fillMode"
+      @fillmodechange="setFillMode"
+      :rounded="rounded"
+      @roundedchange="setRounded"
+    />
+    <ColorPicker :size="size" :fill-mode="fillMode" :rounded="rounded" />
+  </div>
+</template>
+<script>
+import { ColorPicker } from "@progress/kendo-vue-inputs";
+import ColorPickerConfigurator from "./ColorPickerConfigurator.vue";
+
+export default {
+  components: {
+    ColorPicker,
+    ColorPickerConfigurator,
+  },
+  methods: {
+    setRounded(event) {
+      this.rounded = event.value;
+    },
+    setSize(event) {
+      this.size = event.value;
+    },
+    setFillMode(event) {
+      this.fillMode = event.value;
+    },
+  },
+  data() {
+    return {
+      size: "medium",
+      rounded: "medium",
+      fillMode: "solid",
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/colorpicker/colorcontrast/main.js b/vue-options-api-demos/inputs/colorpicker/colorcontrast/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/colorcontrast/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/colorpicker/colorcontrast/main.vue b/vue-options-api-demos/inputs/colorpicker/colorcontrast/main.vue
new file mode 100644
index 00000000..9e6254ec
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/colorcontrast/main.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="row">
+    <div class="col-xs-12 col-md-6 example-col">
+      <p>Foreground Color</p>
+      <ColorPicker
+        :view="'gradient'"
+        :value="foregroundColor"
+        @change="handleForegroundChange"
+        :gradient-settings="{
+          backgroundColor: backgroundColor,
+        }"
+      />
+    </div>
+    <div class="col-xs-12 col-md-6 example-col">
+      <p>Background Color</p>
+      <ColorPicker
+        :view="'gradient'"
+        :value="backgroundColor"
+        @change="handleBackgroundChange"
+        :gradient-settings="{
+          opacity: false,
+        }"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import { ColorPicker } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    ColorPicker,
+  },
+  data() {
+    return {
+      foregroundColor: "rgba(49,118,122,1)",
+      backgroundColor: "rgba(255,255,255,1)",
+    };
+  },
+  methods: {
+    handleForegroundChange(e) {
+      this.foregroundColor = e.value;
+    },
+    handleBackgroundChange(e) {
+      this.backgroundColor = e.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/colorpicker/controlled/popup/main.js b/vue-options-api-demos/inputs/colorpicker/controlled/popup/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/controlled/popup/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/colorpicker/controlled/popup/main.vue b/vue-options-api-demos/inputs/colorpicker/controlled/popup/main.vue
new file mode 100644
index 00000000..16b034d6
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/controlled/popup/main.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 example-col">
+        <p>Controlled ColorPicker</p>
+        <ColorPicker :open="open" />
+        &nbsp;
+        <button
+          class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary"
+          @click="handleOnClick"
+        >
+          Toggle
+        </button>
+      </div>
+      <div class="col-xs-12 col-md-6 example-col">
+        <p>Always shown</p>
+        <ColorPicker :open="true" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ColorPicker } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    ColorPicker,
+  },
+  data() {
+    return {
+      open: false,
+    };
+  },
+  methods: {
+    handleOnClick() {
+      this.open = !this.open;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/colorpicker/controlled/value/main.js b/vue-options-api-demos/inputs/colorpicker/controlled/value/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/controlled/value/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/colorpicker/controlled/value/main.vue b/vue-options-api-demos/inputs/colorpicker/controlled/value/main.vue
new file mode 100644
index 00000000..80832f6d
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/controlled/value/main.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="row">
+    <div class="m-3">
+       <span :style="{ color: value }">value and change: {{ value }}</span>
+       <br />
+        <ColorPicker :value="value" @change="handleOnChange" />
+    </div>
+    <div class="m-3">
+      <span :style="{ color: value }">v-model: {{ value }}</span>
+      <br />
+      <ColorPicker v-model="value" />
+    </div>
+  </div>
+</template>
+<script>
+import { ColorPicker } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    ColorPicker,
+  },
+  data() {
+    return {
+      value: "red",
+    };
+  },
+  methods: {
+    handleOnChange(e) {
+      this.value = e.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/colorpicker/custom/custom-icons/main.js b/vue-options-api-demos/inputs/colorpicker/custom/custom-icons/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/custom/custom-icons/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/colorpicker/custom/custom-icons/main.vue b/vue-options-api-demos/inputs/colorpicker/custom/custom-icons/main.vue
new file mode 100644
index 00000000..09e0d0a1
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/custom/custom-icons/main.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <ColorPicker
+      :view="'gradient'"
+      :icon-class-name="'k-icon k-i-edit-tools'"
+    />
+  </div>
+</template>
+<script>
+import { ColorPicker } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    ColorPicker,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/colorpicker/custom/gradient/main.js b/vue-options-api-demos/inputs/colorpicker/custom/gradient/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/custom/gradient/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/colorpicker/custom/gradient/main.vue b/vue-options-api-demos/inputs/colorpicker/custom/gradient/main.vue
new file mode 100644
index 00000000..d2639f46
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/custom/gradient/main.vue
@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <ColorPicker
+      :default-value="selectedColor"
+      :view="'gradient'"
+      :gradient-settings="gradientSettings"
+    />
+  </div>
+</template>
+<script>
+import { ColorPicker } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    ColorPicker,
+  },
+  data() {
+    return {
+      selectedColor: "rgba(237, 126, 50, 1)",
+      gradientSettings: {
+        opacity: false,
+      },
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/colorpicker/custom/kendo-icons/main.js b/vue-options-api-demos/inputs/colorpicker/custom/kendo-icons/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/custom/kendo-icons/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/colorpicker/custom/kendo-icons/main.vue b/vue-options-api-demos/inputs/colorpicker/custom/kendo-icons/main.vue
new file mode 100644
index 00000000..63a95d75
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/custom/kendo-icons/main.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <ColorPicker :view="'gradient'" :svg-icon="editToolsIcon" />
+  </div>
+</template>
+<script>
+import { ColorPicker } from "@progress/kendo-vue-inputs";
+import { editToolsIcon } from "@progress/kendo-svg-icons";
+
+
+export default {
+  components: {
+    ColorPicker,
+  },
+  data() {
+    return {
+      editToolsIcon
+    }
+  }
+};
+</script>
diff --git a/vue-options-api-demos/inputs/colorpicker/custom/palette/main.js b/vue-options-api-demos/inputs/colorpicker/custom/palette/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/custom/palette/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/colorpicker/custom/palette/main.vue b/vue-options-api-demos/inputs/colorpicker/custom/palette/main.vue
new file mode 100644
index 00000000..7bcd10a1
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/custom/palette/main.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <ColorPicker
+      :default-value="selectedColor"
+      :palette-settings="paletteSettings"
+      :view="'palette'"
+    />
+  </div>
+</template>
+<script>
+import { ColorPicker } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    ColorPicker,
+  },
+  data() {
+    return {
+      selectedColor: 'rgba(237, 126, 50, 1)',
+      paletteSettings: {
+        palette: [
+          '#f0d0c9',
+          '#e2a293',
+          '#d4735e',
+          '#65281a',
+          '#eddfda',
+          '#dcc0b6',
+          '#cba092',
+          '#7b4b3a',
+          '#fcecd5',
+          '#f9d9ab',
+          '#f6c781',
+          '#c87d0e',
+          '#e1dca5',
+          '#d0c974',
+          '#a29a36',
+          '#514d1b',
+          '#c6d9f0',
+          '#8db3e2',
+          '#548dd4',
+          '#17365d',
+        ],
+        columns: 5,
+        tileSize: 30,
+      },
+    };
+  },
+  methods: {
+    handleForegroundChange(e) {
+      this.foregroundColor = e.value;
+    },
+    handleBackgroundChange(e) {
+      this.backgroundColor = e.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/colorpicker/default/main.js b/vue-options-api-demos/inputs/colorpicker/default/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/default/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/colorpicker/default/main.vue b/vue-options-api-demos/inputs/colorpicker/default/main.vue
new file mode 100644
index 00000000..b4d57e97
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/default/main.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="row">
+    <div class="col-xs-12 col-md-12 example-col">
+      <p>ColorPicker with default value</p>
+      <ColorPicker :default-value="defaultValue" />
+    </div>
+  </div>
+</template>
+<script>
+import { ColorPicker } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    ColorPicker,
+  },
+  data() {
+    return {
+      defaultValue: "rgba(237, 126, 50, 1)",
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/colorpicker/disabled/main.js b/vue-options-api-demos/inputs/colorpicker/disabled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/colorpicker/disabled/main.vue b/vue-options-api-demos/inputs/colorpicker/disabled/main.vue
new file mode 100644
index 00000000..502256e8
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/disabled/main.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="example-wrapper">
+    <ColorPicker :disabled="true" />
+  </div>
+</template>
+<script>
+import { ColorPicker } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    ColorPicker,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/colorpicker/events/Logger.vue b/vue-options-api-demos/inputs/colorpicker/events/Logger.vue
new file mode 100644
index 00000000..aa04a80b
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/events/Logger.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="example-config">
+    <h5>{{ title }}</h5>
+    <ul class="event-log">
+      <li v-for="(event, idx) in events" :key="idx">{{ event }}</li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    events: Array,
+    title: String,
+  },
+};
+</script>
+
+<style scoped>
+.example-config {
+  margin: 0 0 20px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+  margin: 0;
+  padding: 0;
+  max-height: 100px;
+  overflow-y: auto;
+  list-style-type: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: white;
+}
+.event-log li {
+  margin: 0;
+  padding: 0.3em;
+  line-height: 1.2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+  margin-bottom: -1px;
+}
+</style>
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/colorpicker/events/main.js b/vue-options-api-demos/inputs/colorpicker/events/main.js
new file mode 100644
index 00000000..1f1c6c86
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/events/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
+
diff --git a/vue-options-api-demos/inputs/colorpicker/events/main.vue b/vue-options-api-demos/inputs/colorpicker/events/main.vue
new file mode 100644
index 00000000..79a2e99e
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/events/main.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <ColorPicker
+      :default-value="'rgba(237, 126, 50, 1)'"
+      @activecolorclick="onActiveColorClick"
+      @blur="onBlur"
+      @change="onChange"
+      @focus="onFocus"
+    />
+    <br />
+    <br />
+    <Logger :title="'Events list'" :events="eventsList" />
+  </div>
+</template>
+<script>
+import { ColorPicker } from '@progress/kendo-vue-inputs';
+import Logger from './Logger.vue';
+
+export default {
+  components: {
+    Logger,
+    ColorPicker,
+  },
+  computed: {
+    eventsList() {
+      return this.events;
+    },
+  },
+  data: function () {
+    return {
+      events: [],
+    };
+  },
+  methods: {
+    onActiveColorClick(e) {
+      this.events.unshift(
+        'ActiveColorClick event triggered. Current ColorPicker value is: ' +
+          e.value
+      );
+    },
+    onBlur(e) {
+      this.events.unshift('Blur event triggered.');
+    },
+    onChange(e) {
+      this.events.unshift(
+        'Change event triggered. Current ColorPicker value is: HEX: ' +
+          e.event.value +
+          '; RGB: ' +
+          e.event.rgbaValue
+      );
+    },
+    onFocus(e) {
+      this.events.unshift('Focus event triggered.');
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/colorpicker/keyboard/main.js b/vue-options-api-demos/inputs/colorpicker/keyboard/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/keyboard/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/colorpicker/keyboard/main.vue b/vue-options-api-demos/inputs/colorpicker/keyboard/main.vue
new file mode 100644
index 00000000..986ae8e1
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/keyboard/main.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="example-wrapper">
+    <ColorPicker ref="colorPickerRef" :default-value="value" />
+    <p>
+      (use Alt+<code>↓</code> to open the popup, <code>←↓↑→</code> to navigate,
+      <code>enter</code> to select the value)
+    </p>
+  </div>
+</template>
+<script>
+import { ColorPicker } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    ColorPicker,
+  },
+  mounted() {
+    this.$refs.colorPickerRef.focusElement();
+  },
+  data() {
+    return {
+      value: "rgba(237, 126, 50, 1)",
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/colorpicker/overview/main.js b/vue-options-api-demos/inputs/colorpicker/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/colorpicker/overview/main.vue b/vue-options-api-demos/inputs/colorpicker/overview/main.vue
new file mode 100644
index 00000000..4c71221d
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/overview/main.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="row">
+    <div class="m-3">
+      <p>ColorPicker with gradient and palette</p>
+      <ColorPicker :default-value="'white'" />
+    </div>
+    <div class="m-3">
+      <p>ColorPicker with predefined colors</p>
+      <ColorPicker
+        :view="'palette'"
+        :default-value="'rgba(237, 126, 50, 1)'"
+      />
+    </div>
+    <div class="m-3">
+      <p>ColorPicker with gradient</p>
+      <ColorPicker :view="'gradient'" :default-value="'green'" />
+    </div>
+  </div>
+</template>
+<script>
+import { ColorPicker } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    ColorPicker,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/colorpicker/view/combined/main.js b/vue-options-api-demos/inputs/colorpicker/view/combined/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/view/combined/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/colorpicker/view/combined/main.vue b/vue-options-api-demos/inputs/colorpicker/view/combined/main.vue
new file mode 100644
index 00000000..179364a9
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/view/combined/main.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <div
+      :style="{
+        color: selectedColor,
+      }"
+    >
+      {{ selectedColor }}
+    </div>
+    <ColorPicker
+      :view="'combo'"
+      :value="selectedColor"
+      @change="handleOnChange"
+    />
+  </div>
+</template>
+<script>
+import { ColorPicker } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    ColorPicker,
+  },
+  methods: {
+    handleOnChange(e) {
+      this.selectedColor = e.value;
+    },
+  },
+  data() {
+    return {
+      view: "gradient",
+      selectedColor: "rgba(237, 126, 50, 1)",
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/colorpicker/view/popup/main.js b/vue-options-api-demos/inputs/colorpicker/view/popup/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/view/popup/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/colorpicker/view/popup/main.vue b/vue-options-api-demos/inputs/colorpicker/view/popup/main.vue
new file mode 100644
index 00000000..ea150f69
--- /dev/null
+++ b/vue-options-api-demos/inputs/colorpicker/view/popup/main.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <div class="example-config">
+      {{ view }}
+      <RadioGroup
+        :data-items="dataItems"
+        :default-value="'gradient'"
+        @change="onChange"
+      />
+    </div>
+    <div>
+      <ColorPicker :default-value="value" :view="view" />
+    </div>
+  </div>
+</template>
+<script>
+import { ColorPicker, RadioGroup } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    ColorPicker,
+    RadioGroup,
+  },
+  methods: {
+    onChange(e) {
+      this.view = e.value;
+    },
+  },
+  data() {
+    return {
+      view: "gradient",
+      value: "rgba(237, 126, 50, 1)",
+      dataItems: [
+        {
+          label: "Gradient",
+          value: "gradient",
+        },
+        {
+          label: "Palette",
+          value: "palette",
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/common/es.json b/vue-options-api-demos/inputs/common/es.json
new file mode 100644
index 00000000..45ec5932
--- /dev/null
+++ b/vue-options-api-demos/inputs/common/es.json
@@ -0,0 +1,6 @@
+{
+    "numerictextbox": {
+        "increment": "Incrementar valor",
+        "decrement": "Disminuir valor"
+    }
+}
diff --git a/vue-options-api-demos/inputs/flatcolorpicker/basic/main.js b/vue-options-api-demos/inputs/flatcolorpicker/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/flatcolorpicker/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/flatcolorpicker/basic/main.vue b/vue-options-api-demos/inputs/flatcolorpicker/basic/main.vue
new file mode 100644
index 00000000..4f3633c2
--- /dev/null
+++ b/vue-options-api-demos/inputs/flatcolorpicker/basic/main.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <FlatColorPicker />
+  </div>
+</template>
+<script>
+import { FlatColorPicker } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    FlatColorPicker,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/flatcolorpicker/customization/footer/main.js b/vue-options-api-demos/inputs/flatcolorpicker/customization/footer/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/flatcolorpicker/customization/footer/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/flatcolorpicker/customization/footer/main.vue b/vue-options-api-demos/inputs/flatcolorpicker/customization/footer/main.vue
new file mode 100644
index 00000000..5afb1e7d
--- /dev/null
+++ b/vue-options-api-demos/inputs/flatcolorpicker/customization/footer/main.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <FlatColorPicker :show-buttons="false" />
+  </div>
+</template>
+<script>
+import { FlatColorPicker } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    FlatColorPicker,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/flatcolorpicker/customization/header/main.js b/vue-options-api-demos/inputs/flatcolorpicker/customization/header/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/flatcolorpicker/customization/header/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/flatcolorpicker/customization/header/main.vue b/vue-options-api-demos/inputs/flatcolorpicker/customization/header/main.vue
new file mode 100644
index 00000000..da4fdf61
--- /dev/null
+++ b/vue-options-api-demos/inputs/flatcolorpicker/customization/header/main.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <FlatColorPicker :show-clear-button="false" :show-preview="false" />
+  </div>
+</template>
+<script>
+import { FlatColorPicker } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    FlatColorPicker,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/flatcolorpicker/disabled/main.js b/vue-options-api-demos/inputs/flatcolorpicker/disabled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/flatcolorpicker/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/flatcolorpicker/disabled/main.vue b/vue-options-api-demos/inputs/flatcolorpicker/disabled/main.vue
new file mode 100644
index 00000000..5df9c1d3
--- /dev/null
+++ b/vue-options-api-demos/inputs/flatcolorpicker/disabled/main.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <FlatColorPicker :disabled="true" />
+  </div>
+</template>
+<script>
+import { FlatColorPicker } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    FlatColorPicker,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/flatcolorpicker/events/Logger.vue b/vue-options-api-demos/inputs/flatcolorpicker/events/Logger.vue
new file mode 100644
index 00000000..aa04a80b
--- /dev/null
+++ b/vue-options-api-demos/inputs/flatcolorpicker/events/Logger.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="example-config">
+    <h5>{{ title }}</h5>
+    <ul class="event-log">
+      <li v-for="(event, idx) in events" :key="idx">{{ event }}</li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    events: Array,
+    title: String,
+  },
+};
+</script>
+
+<style scoped>
+.example-config {
+  margin: 0 0 20px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+  margin: 0;
+  padding: 0;
+  max-height: 100px;
+  overflow-y: auto;
+  list-style-type: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: white;
+}
+.event-log li {
+  margin: 0;
+  padding: 0.3em;
+  line-height: 1.2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+  margin-bottom: -1px;
+}
+</style>
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/flatcolorpicker/events/main.js b/vue-options-api-demos/inputs/flatcolorpicker/events/main.js
new file mode 100644
index 00000000..1f1c6c86
--- /dev/null
+++ b/vue-options-api-demos/inputs/flatcolorpicker/events/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
+
diff --git a/vue-options-api-demos/inputs/flatcolorpicker/events/main.vue b/vue-options-api-demos/inputs/flatcolorpicker/events/main.vue
new file mode 100644
index 00000000..bd19240c
--- /dev/null
+++ b/vue-options-api-demos/inputs/flatcolorpicker/events/main.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <FlatColorPicker @viewchange="onViewChange" @change="onChange" />
+    <br />
+    <br />
+    <Logger :title="'Events list'" :events="eventsList" />
+  </div>
+</template>
+<script>
+import { FlatColorPicker } from '@progress/kendo-vue-inputs';
+import Logger from './Logger.vue';
+
+export default {
+  components: {
+    Logger,
+    FlatColorPicker,
+  },
+  computed: {
+    eventsList() {
+      return this.events;
+    },
+  },
+  data: function () {
+    return {
+      events: [],
+    };
+  },
+  methods: {
+    onViewChange(e) {
+      this.events.unshift(
+        'FlatColorPickerViewChangeEvent triggered. Current view is ',
+        e.viewType
+      );
+    },
+    onChange(e) {
+      this.events.unshift(
+        'Change event triggered. Current ColorPicker value is: HEX: ' +
+          e.value +
+          '; RGB: ' +
+          e.rgbaValue
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/flatcolorpicker/keyboard/main.js b/vue-options-api-demos/inputs/flatcolorpicker/keyboard/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/flatcolorpicker/keyboard/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/flatcolorpicker/keyboard/main.vue b/vue-options-api-demos/inputs/flatcolorpicker/keyboard/main.vue
new file mode 100644
index 00000000..9e67683e
--- /dev/null
+++ b/vue-options-api-demos/inputs/flatcolorpicker/keyboard/main.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="example-wrapper">
+    <FlatColorPicker ref="colorPickerRef" />
+  </div>
+</template>
+<script>
+import { FlatColorPicker } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    FlatColorPicker,
+  },
+  data() {
+    return {
+      value: 'rgba(237, 126, 50, 1)',
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/floating-labels/main.js b/vue-options-api-demos/inputs/floating-labels/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/floating-labels/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/floating-labels/main.vue b/vue-options-api-demos/inputs/floating-labels/main.vue
new file mode 100644
index 00000000..c908a7d1
--- /dev/null
+++ b/vue-options-api-demos/inputs/floating-labels/main.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="example-wrapper row">
+    <div class="col-xs-12 col-md-6 example-col">
+      <p>Input</p>
+      <kinput :style="{ width: '230px' }"
+        :id="editorId"
+        :placeholder="'Enter your first name'"
+        :label="'First Name:'"
+        @change="onChangeInput"
+      />
+      <br />
+      <p>MaskedTextBox</p>
+      <maskedtextbox :style="{ width: '230px' }"
+        :mask="mask"
+        :value="maskedTextBoxValue"
+        :label="'Phone number:'"
+        @change="onChangeMaskedTextBox"
+      ></maskedtextbox>
+      <br />
+      <p>NumericTextBox</p>
+      <numerictextbox :style="{ width: '230px' }"
+        :label="'Enter kilometers:'"
+        v-model="numericTextBoxValue"
+      >
+      </numerictextbox>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  Input,
+  MaskedTextBox,
+  NumericTextBox,
+} from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    kinput: Input,
+    maskedtextbox: MaskedTextBox,
+    numerictextbox: NumericTextBox,
+  },
+  data: function () {
+    return {
+      value: undefined,
+      mask: "(999) 000-00-00-00",
+      maskedTextBoxValue: undefined,
+      numericTextBoxValue: undefined,
+    };
+  },
+  methods: {
+    onChangeInput: function (e) {
+      this.value = e.value;
+    },
+    onChangeMaskedTextBox: function (e) {
+      this.maskedTextBoxValue = e.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/get-started/main.js b/vue-options-api-demos/inputs/get-started/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/get-started/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/get-started/main.vue b/vue-options-api-demos/inputs/get-started/main.vue
new file mode 100644
index 00000000..505c36bb
--- /dev/null
+++ b/vue-options-api-demos/inputs/get-started/main.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="example-wrapper">
+    <ColorPicker :view="'gradient'" :default-value="'green'" />
+  </div>
+</template>
+<script>
+import { ColorPicker } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    ColorPicker,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/globalization/es.json b/vue-options-api-demos/inputs/globalization/es.json
new file mode 100644
index 00000000..efa4e824
--- /dev/null
+++ b/vue-options-api-demos/inputs/globalization/es.json
@@ -0,0 +1,11 @@
+{
+    "numerictextbox": {
+        "increment": "Incrementar valor",
+        "decrement": "Disminuir valor"
+    },
+    "slider": {
+        "increment": "Incrementar valor",
+        "decrement": "Disminuir valor",
+        "dragTitle": "arrastrar"
+    }
+}
diff --git a/vue-options-api-demos/inputs/globalization/main.js b/vue-options-api-demos/inputs/globalization/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/globalization/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/globalization/main.vue b/vue-options-api-demos/inputs/globalization/main.vue
new file mode 100644
index 00000000..8f984eaf
--- /dev/null
+++ b/vue-options-api-demos/inputs/globalization/main.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="example-wrapper row">
+    <div class="col-xs-12 col-sm-6 example-col">
+      <localization :language="'en'">
+        <intl :locale="'en'">
+          <p>NumericTextBox</p>
+          <numerictextbox
+            :style="{ width: '230px' }"
+            :default-value="123.45"
+            :format="'c2'"
+          >
+          </numerictextbox>
+          <p>Slider</p>
+          <slider
+            :buttons="true"
+            :step="1"
+            :default-value="7"
+            :min="1"
+            :max="10"
+          >
+          </slider>
+        </intl>
+      </localization>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  IntlProvider,
+  load,
+  loadMessages,
+  LocalizationProvider,
+} from "@progress/kendo-vue-intl";
+import { NumericTextBox, Slider } from "@progress/kendo-vue-inputs";
+
+import likelySubtags from "cldr-core/supplemental/likelySubtags.json";
+import currencyData from "cldr-core/supplemental/currencyData.json";
+import esNumbers from "cldr-numbers-full/main/es/numbers.json";
+import esCurrencies from "cldr-numbers-full/main/es/currencies.json";
+
+load(likelySubtags, currencyData, esNumbers, esCurrencies);
+
+import esMessages from "./es.json";
+loadMessages(esMessages, "es");
+
+export default {
+  components: {
+    numerictextbox: NumericTextBox,
+    slider: Slider,
+    intl: IntlProvider,
+    localization: LocalizationProvider,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/input/appearance/configurator/InputStyleConfigurator copy.vue b/vue-options-api-demos/inputs/input/appearance/configurator/InputStyleConfigurator copy.vue
new file mode 100644
index 00000000..c1b36044
--- /dev/null
+++ b/vue-options-api-demos/inputs/input/appearance/configurator/InputStyleConfigurator copy.vue	
@@ -0,0 +1,105 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Fill Mode
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="fillModes"
+              :value="fillMode"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleFillModeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+    fillMode: String,
+    rounded: String,
+  },
+  emits: [
+    "sizechange",
+    "fillmodechange",
+    "roundedchange",
+  ],
+  data() {
+    return {
+      sizes: ["small", "medium", "large"],
+      fillModes: ["solid", "outline", "flat"],
+      roundedOptions: ["small", "medium", "large", "full"],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleFillModeChange(event) {
+      this.$emit("fillmodechange", event);
+    },
+    handleRoundedChange(event) {
+      this.$emit("roundedchange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/input/appearance/configurator/InputStyleConfigurator.vue b/vue-options-api-demos/inputs/input/appearance/configurator/InputStyleConfigurator.vue
new file mode 100644
index 00000000..c1b36044
--- /dev/null
+++ b/vue-options-api-demos/inputs/input/appearance/configurator/InputStyleConfigurator.vue
@@ -0,0 +1,105 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Fill Mode
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="fillModes"
+              :value="fillMode"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleFillModeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+    fillMode: String,
+    rounded: String,
+  },
+  emits: [
+    "sizechange",
+    "fillmodechange",
+    "roundedchange",
+  ],
+  data() {
+    return {
+      sizes: ["small", "medium", "large"],
+      fillModes: ["solid", "outline", "flat"],
+      roundedOptions: ["small", "medium", "large", "full"],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleFillModeChange(event) {
+      this.$emit("fillmodechange", event);
+    },
+    handleRoundedChange(event) {
+      this.$emit("roundedchange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/input/appearance/configurator/main.js b/vue-options-api-demos/inputs/input/appearance/configurator/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/input/appearance/configurator/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/input/appearance/configurator/main.vue b/vue-options-api-demos/inputs/input/appearance/configurator/main.vue
new file mode 100644
index 00000000..060176cd
--- /dev/null
+++ b/vue-options-api-demos/inputs/input/appearance/configurator/main.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <InputStyleConfigurator
+      :size="size"
+      @sizechange="setSize"
+      :fill-mode="fillMode"
+      @fillmodechange="setFillMode"
+      :rounded="rounded"
+      @roundedchange="setRounded"
+    />
+    <k-input :style="{ width: '230px' }" :size="size" :rounded="rounded" :fill-mode="fillMode" />
+  </div>
+</template>
+<script>
+import InputStyleConfigurator from "./InputStyleConfigurator.vue";
+import { Input } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    InputStyleConfigurator,
+    "k-input": Input,
+  },
+  data() {
+    return {
+      size: "medium",
+      rounded: "medium",
+      fillMode: "solid",
+    };
+  },
+  methods: {
+    setRounded(event) {
+      this.rounded = event.value;
+    },
+    setSize(event) {
+      this.size = event.value;
+    },
+    setFillMode(event) {
+      this.fillMode = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/input/appearance/fill-mode/main.js b/vue-options-api-demos/inputs/input/appearance/fill-mode/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/input/appearance/fill-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/input/appearance/fill-mode/main.vue b/vue-options-api-demos/inputs/input/appearance/fill-mode/main.vue
new file mode 100644
index 00000000..d00c0120
--- /dev/null
+++ b/vue-options-api-demos/inputs/input/appearance/fill-mode/main.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="example-config">
+    <div class="demo">
+      <span class="wrapper">
+        <span>Flat: </span>
+        <kinput :fill-mode="'flat'" :style="{ width: '170px' }" />
+      </span>
+      <span class="wrapper">
+        <span>Solid: </span>
+        <kinput :fill-mode="'solid'" :style="{ width: '170px' }" />
+      </span>
+      <span class="wrapper">
+        <span>Outline: </span>
+        <kinput :fill-mode="'outline'" :style="{ width: '170px' }" />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Custom fill mode: </span>
+        <kinput
+          :fill-mode="null"
+          :class="'custom-input'"
+          :style="{ width: '170px' }"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { Input } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    kinput: Input,
+  },
+};
+</script>
+
+<style>
+.custom-input {
+  background-color: #00aead;
+  border: 2px solid #bfd843;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/inputs/input/appearance/rounded/main.js b/vue-options-api-demos/inputs/input/appearance/rounded/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/input/appearance/rounded/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/input/appearance/rounded/main.vue b/vue-options-api-demos/inputs/input/appearance/rounded/main.vue
new file mode 100644
index 00000000..b783521b
--- /dev/null
+++ b/vue-options-api-demos/inputs/input/appearance/rounded/main.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Small roundness: </span>
+        <kinput :rounded="'small'" :style="{ width: '170px' }" />
+      </span>
+      <span class="wrapper">
+        <span>Medium roundness: </span>
+        <kinput :rounded="'medium'" :style="{ width: '170px' }" />
+      </span>
+      <span class="wrapper">
+        <span>Large roundness: </span>
+        <kinput :rounded="'large'" :style="{ width: '170px' }" />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Full roundness: </span>
+        <kinput :rounded="'full'" :style="{ width: '170px' }" />
+      </span>
+      <span class="wrapper">
+        <span>Custom roundness: </span>
+        <kinput
+          :rounded="null"
+          :class="'custom-input'"
+          :style="{ width: '170px' }"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { Input } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    kinput: Input,
+  },
+};
+</script>
+
+<style>
+.custom-input {
+  border-bottom-right-radius: 15px;
+  border-top-left-radius: 15px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/inputs/input/appearance/size/main.js b/vue-options-api-demos/inputs/input/appearance/size/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/input/appearance/size/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/input/appearance/size/main.vue b/vue-options-api-demos/inputs/input/appearance/size/main.vue
new file mode 100644
index 00000000..c4c1037a
--- /dev/null
+++ b/vue-options-api-demos/inputs/input/appearance/size/main.vue
@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Small size: </span>
+        <kinput :size="'small'" :style="{ width: '170px' }" />
+      </span>
+      <span class="wrapper">
+        <span>Medium size: </span>
+        <kinput :size="'medium'" :style="{ width: '170px' }" />
+      </span>
+      <span class="wrapper">
+        <span>Large size: </span>
+        <kinput :size="'large'" :style="{ width: '170px' }" />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Custom size: </span>
+        <kinput
+          :size="null"
+          :class="'custom-input'"
+          :style="{ width: '170px' }"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { Input } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    kinput: Input,
+  },
+};
+</script>
+
+<style>
+.custom-input input {
+  line-height: 2;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/inputs/input/basic/main.js b/vue-options-api-demos/inputs/input/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/input/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/input/basic/main.vue b/vue-options-api-demos/inputs/input/basic/main.vue
new file mode 100644
index 00000000..fc2e9f3a
--- /dev/null
+++ b/vue-options-api-demos/inputs/input/basic/main.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <div class="col-xs-12 col-md-6 example-col">
+      <p>Input</p>
+      <KInput :style="{ width: '230px' }"></KInput>
+    </div>
+  </div>
+</template>
+<script>
+import { Input } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    KInput: Input,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/input/forms/basic/main.js b/vue-options-api-demos/inputs/input/forms/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/input/forms/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/input/forms/basic/main.vue b/vue-options-api-demos/inputs/input/forms/basic/main.vue
new file mode 100644
index 00000000..357f63c8
--- /dev/null
+++ b/vue-options-api-demos/inputs/input/forms/basic/main.vue
@@ -0,0 +1,83 @@
+<template>
+   <div class="row example-wrapper">
+                <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                    <div class="card">
+                        <div class="card-block">
+                            <form class="k-form" @submit="handleSubmit">
+                                <fieldset>
+                                    <legend>Create new account:</legend>
+                                    <div class="mb-3">
+                                        <k-input 
+                                            :name="'username'"
+                                            :label="'First Name'"
+                                            :pattern="'[A-Za-z]+'"
+                                            :minlength="2"
+                                            :required="true"
+                                        >
+                                        </k-input>
+                                    </div>
+                                    <div class="mb-3">
+                                        <k-input 
+                                            :name="'password'"
+                                            type="password"
+                                            :label="'Password'"
+                                            :required="true"
+                                            :minlength="6"
+                                            :maxlength="18"
+                                        />
+                                    </div>
+                                    <div class="mb-3">
+                                        <k-input 
+                                            :name="'confirmPassword'"
+                                            :type="'password'"
+                                            :label="'Confirm Password'"
+                                            :minlength="6"
+                                            :maxlength="18"
+                                        />
+                                    </div>
+                                    <div class="mb-3">
+                                        <k-input 
+                                            :name="'email'"
+                                            :type="'email'"
+                                            :label="'Email address'"
+                                            :required='true'
+                                        />
+                                    </div>
+                                </fieldset>
+                                <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+               <div v-if="success"
+                        class="alert alert-success"
+                        :style="{ position: 'absolute' }"
+                    >
+                        Form submitted!
+                </div>
+            </div>
+</template>
+<script>
+import { Input } from '@progress/kendo-vue-inputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'k-input': Input,
+      'kbutton': Button
+    },
+    data: function(){
+        return {
+            success: false
+        }
+    },
+    methods: {
+        handleSubmit (event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(() => { this.success = false; }, 3000);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/input/forms/custom-message/main.js b/vue-options-api-demos/inputs/input/forms/custom-message/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/input/forms/custom-message/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/input/forms/custom-message/main.vue b/vue-options-api-demos/inputs/input/forms/custom-message/main.vue
new file mode 100644
index 00000000..166e664f
--- /dev/null
+++ b/vue-options-api-demos/inputs/input/forms/custom-message/main.vue
@@ -0,0 +1,88 @@
+<template>
+   <div class="row example-wrapper">
+                 <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                     <div class="card">
+                         <div class="card-block">
+                             <form class="k-form" @submit="handleSubmit">
+                                 <fieldset>
+                                     <legend>Create new account:</legend>
+                                     <div class="mb-3">
+                                         <k-input 
+                                             :name="'username'"
+                                             :label="'First Name'"
+                                             :pattern="'[A-Za-z]+'"
+                                             :minlength="2"
+                                             :required="true"
+                                             :validation-message="usernameValidationMessage"
+                                         >
+                                         </k-input>
+                                     </div>
+                                     <div class="mb-3">
+                                         <k-input 
+                                             :name="'password'"
+                                             type="password"
+                                             :label="'Password'"
+                                             :required="true"
+                                             :minlength="6"
+                                             :maxlength="18"
+                                             :validation-message="passwordValidationMessage"
+                                         />
+                                     </div>
+                                     <div class="mb-3">
+                                         <k-input 
+                                             :name="'confirmPassword'"
+                                             :type="'password'"
+                                             :label="'Confirm Password'"
+                                             :minlength="6"
+                                             :maxlength="18"
+                                             :validation-message="passwordValidationMessage"
+                                         />
+                                     </div>
+                                     <div class="mb-3">
+                                         <k-input 
+                                             :name="'email'"
+                                             :type="'email'"
+                                             :label="'Email address'"
+                                             :required='true'
+                                         />
+                                     </div>
+                                 </fieldset>
+                                 <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                             </form>
+                         </div>
+                     </div>
+                 </div>
+                <div v-if="success"
+                         class="alert alert-success"
+                         :style="{ position: 'absolute' }"
+                     >
+                         Form submitted!
+                 </div>
+             </div>
+</template>
+<script>
+import { Input } from '@progress/kendo-vue-inputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'k-input': Input,
+      'kbutton': Button
+    },
+    data: function(){
+        return {
+            usernameValidationMessage: "Your username should contain only letters!",
+            passwordValidationMessage: "Please enter password between 6 and 16 characters!",
+            success: false
+        }
+    },
+    methods: {
+        handleSubmit (event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(() => { this.success = false; }, 3000);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/input/forms/disable-styles/main.js b/vue-options-api-demos/inputs/input/forms/disable-styles/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/input/forms/disable-styles/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/input/forms/disable-styles/main.vue b/vue-options-api-demos/inputs/input/forms/disable-styles/main.vue
new file mode 100644
index 00000000..0898b436
--- /dev/null
+++ b/vue-options-api-demos/inputs/input/forms/disable-styles/main.vue
@@ -0,0 +1,84 @@
+<template>
+   <div class="row example-wrapper">
+                 <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                     <div class="card">
+                         <div class="card-block">
+                             <form class="k-form" @submit="handleSubmit">
+                                 <fieldset>
+                                     <legend>Create new account:</legend>
+                                     <div class="mb-3">
+                                         <k-input 
+                                             :validity-styles="false"
+                                             :name="'username'"
+                                             :label="'First Name'"
+                                             :pattern="'[A-Za-z]+'"
+                                             :minlength="2"
+                                             :required="true"
+                                         >
+                                         </k-input>
+                                     </div>
+                                     <div class="mb-3">
+                                         <k-input 
+                                             :name="'password'"
+                                             type="password"
+                                             :label="'Password'"
+                                             :required="true"
+                                             :minlength="6"
+                                             :maxlength="18"
+                                         />
+                                     </div>
+                                     <div class="mb-3">
+                                         <k-input 
+                                             :name="'confirmPassword'"
+                                             :type="'password'"
+                                             :label="'Confirm Password'"
+                                             :minlength="6"
+                                             :maxlength="18"
+                                         />
+                                     </div>
+                                     <div class="mb-3">
+                                         <k-input 
+                                             :name="'email'"
+                                             :type="'email'"
+                                             :label="'Email address'"
+                                             :required='true'
+                                         />
+                                     </div>
+                                 </fieldset>
+                                 <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                             </form>
+                         </div>
+                     </div>
+                 </div>
+                <div v-if="success"
+                         class="alert alert-success"
+                         :style="{ position: 'absolute' }"
+                     >
+                         Form submitted!
+                 </div>
+             </div>
+</template>
+<script>
+import { Input } from '@progress/kendo-vue-inputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'k-input': Input,
+      'kbutton': Button
+    },
+    data: function(){
+        return {
+            success: false
+        }
+    },
+    methods: {
+        handleSubmit (event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(() => { this.success = false; }, 3000);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/input/forms/override/main.js b/vue-options-api-demos/inputs/input/forms/override/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/input/forms/override/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/input/forms/override/main.vue b/vue-options-api-demos/inputs/input/forms/override/main.vue
new file mode 100644
index 00000000..2b20c074
--- /dev/null
+++ b/vue-options-api-demos/inputs/input/forms/override/main.vue
@@ -0,0 +1,99 @@
+<template>
+ <div class="row example-wrapper">
+                 <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                     <div class="card">
+                         <div class="card-block">
+                             <form class="k-form" @submit="handleSubmit">
+                                 <fieldset>
+                                     <legend>Create new account:</legend>
+                                     <div class="mb-3">
+                                         <k-input 
+                                             :name="'username'"
+                                             :label="'First Name'"
+                                             :pattern="'[A-Za-z]+'"
+                                             :minlength="2"
+                                             :required="true"
+                                             :validation-message="usernameValidationMessage"
+                                         >
+                                         </k-input>
+                                     </div>
+                                     <div class="mb-3">
+                                         <k-input 
+                                             v-model="possword"
+                                             :name="'password'"
+                                             type="password"
+                                             :label="'Password'"
+                                             :required="true"
+                                             :minlength="6"
+                                             :maxlength="18"
+                                             :validation-message="passwordValidationMessage"
+                                         />
+                                     </div>
+                                     <div class="mb-3">
+                                         <k-input 
+                                             v-model="confirmPassword"
+                                             :name="'confirmPassword'"
+                                             :type="'password'"
+                                             :label="'Confirm Password'"
+                                             :valid="confirmValid"
+                                             :minlength="6"
+                                             :maxlength="18"
+                                             :validation-message="passwordValidationMessage"
+                                         />
+                                     </div>
+                                     <div class="mb-3">
+                                         <k-input 
+                                             :name="'email'"
+                                             :type="'email'"
+                                             :label="'Email address'"
+                                             :required='true'
+                                         />
+                                     </div>
+                                 </fieldset>
+                                 <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                             </form>
+                         </div>
+                     </div>
+                 </div>
+                <div v-if="success"
+                         class="alert alert-success"
+                         :style="{ position: 'absolute' }"
+                     >
+                         Form submitted!
+                 </div>
+             </div>
+</template>
+<script>
+import { Input } from '@progress/kendo-vue-inputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'k-input': Input,
+      'kbutton': Button
+    },
+    data: function(){
+        return {
+            usernameValidationMessage: "Your username should contain only letters!",
+            passwordValidationMessage: "Please enter password between 6 and 16 characters!",
+            confirmPasswordValidationMessage: "Passwords does not match!",
+            password: '',
+            confirmPassword: '',
+            success: false
+        }
+    },
+    computed: {
+        confirmValid: function(){
+            return this.password && this.password === this.confirmPassword;
+        }
+    },
+    methods: {
+        handleSubmit (event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(() => { this.success = false; }, 3000);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/maskedtextbox/adornments/clear-button/main.js b/vue-options-api-demos/inputs/maskedtextbox/adornments/clear-button/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/adornments/clear-button/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/maskedtextbox/adornments/clear-button/main.vue b/vue-options-api-demos/inputs/maskedtextbox/adornments/clear-button/main.vue
new file mode 100644
index 00000000..68637c14
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/adornments/clear-button/main.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <MaskedTextBox
+      :style="{ width: '230px' }"
+      :show-clear-button="true"
+      :mask="mask"
+      :default-value="defaultValue"
+    />
+  </div>
+</template>
+<script>
+import { MaskedTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    MaskedTextBox,
+  },
+  data: function () {
+    return {
+      mask: '(999) 000-00-00-00',
+      defaultValue: '(359) 555-55-55-55',
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/maskedtextbox/adornments/disabled/InputIcons.vue b/vue-options-api-demos/inputs/maskedtextbox/adornments/disabled/InputIcons.vue
new file mode 100644
index 00000000..f1df8505
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/adornments/disabled/InputIcons.vue
@@ -0,0 +1,24 @@
+<template>
+    <div>
+        <SvgIcon :icon="menuIcon" />
+        <InputSeparator />
+        <SvgIcon :icon="gearIcon" />
+    </div>
+</template>
+<script>
+import { gearIcon, menuIcon } from "@progress/kendo-svg-icons";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { InputSeparator } from "@progress/kendo-vue-inputs";
+export default {
+    components: {
+        InputSeparator,
+        SvgIcon
+    },
+    data(){
+        return {
+            menuIcon,
+            gearIcon
+        }
+    }
+};
+</script>
diff --git a/vue-options-api-demos/inputs/maskedtextbox/adornments/disabled/main.js b/vue-options-api-demos/inputs/maskedtextbox/adornments/disabled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/adornments/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/maskedtextbox/adornments/disabled/main.vue b/vue-options-api-demos/inputs/maskedtextbox/adornments/disabled/main.vue
new file mode 100644
index 00000000..6a4cf2e5
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/adornments/disabled/main.vue
@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <MaskedTextBox
+      :style="{ width: '300px' }"
+      :disabled="true"
+      :inputIconName="'gear'"
+      :showValidationIcon="true"
+      :inputPrefix="'prefix'"
+      :inputSuffix="'suffix'"
+      :showClearButton="true"
+      :mask="mask"
+      :default-value="defaultValue"
+    >
+      <template v-slot:prefix>
+        <InputIcons />
+      </template>
+      <template v-slot:suffix>
+        <SvgIcon :icon="gearIcon" />
+      </template>
+    </MaskedTextBox>
+  </div>
+</template>
+<script>
+import { MaskedTextBox } from '@progress/kendo-vue-inputs';
+import InputIcons from './InputIcons.vue';
+import { SvgIcon } from '@progress/kendo-vue-common';
+import { gearIcon } from '@progress/kendo-svg-icons';
+
+export default {
+    components: {
+        MaskedTextBox,
+        InputIcons,
+        SvgIcon
+    },
+    data: function () {
+        return {
+            mask: '(999) 000-00-00-00',
+            defaultValue: '(359) 555-55-55-55',
+            gearIcon
+        };
+    },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/maskedtextbox/adornments/icon-name/main.js b/vue-options-api-demos/inputs/maskedtextbox/adornments/icon-name/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/adornments/icon-name/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/maskedtextbox/adornments/icon-name/main.vue b/vue-options-api-demos/inputs/maskedtextbox/adornments/icon-name/main.vue
new file mode 100644
index 00000000..28f3823e
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/adornments/icon-name/main.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <MaskedTextBox
+      :style="{ width: '230px' }"
+      :icon-name="'gear'"
+      :mask="mask"
+      :default-value="defaultValue"
+    />
+  </div>
+</template>
+<script>
+import { MaskedTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    MaskedTextBox,
+  },
+  data: function () {
+    return {
+      mask: '(999) 000-00-00-00',
+      defaultValue: '(359) 555-55-55-55',
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/maskedtextbox/adornments/loading-icon/main.js b/vue-options-api-demos/inputs/maskedtextbox/adornments/loading-icon/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/adornments/loading-icon/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/maskedtextbox/adornments/loading-icon/main.vue b/vue-options-api-demos/inputs/maskedtextbox/adornments/loading-icon/main.vue
new file mode 100644
index 00000000..6b59ba84
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/adornments/loading-icon/main.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <MaskedTextBox
+      :style="{ width: '230px' }"
+      :show-loading-icon="true"
+      :mask="mask"
+      :default-value="defaultValue"
+    />
+  </div>
+</template>
+<script>
+import { MaskedTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    MaskedTextBox,
+  },
+  data: function () {
+    return {
+      mask: '(999) 000-00-00-00',
+      defaultValue: '(359) 555-55-55-55',
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/maskedtextbox/adornments/prefix/InputIcons.vue b/vue-options-api-demos/inputs/maskedtextbox/adornments/prefix/InputIcons.vue
new file mode 100644
index 00000000..b00e1cc0
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/adornments/prefix/InputIcons.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <span class="k-input-icon k-icon k-i-menu"></span>
+        <InputSeparator />
+        <span class="k-input-icon k-icon k-i-gear"></span>
+    </div>
+</template>
+<script>
+import { InputSeparator } from "@progress/kendo-vue-inputs";
+export default {
+    components: {
+        InputSeparator,
+    },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/maskedtextbox/adornments/prefix/main.js b/vue-options-api-demos/inputs/maskedtextbox/adornments/prefix/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/adornments/prefix/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/maskedtextbox/adornments/prefix/main.vue b/vue-options-api-demos/inputs/maskedtextbox/adornments/prefix/main.vue
new file mode 100644
index 00000000..4205e44b
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/adornments/prefix/main.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <MaskedTextBox
+      :style="{ width: '230px' }"
+      :inputPrefix="'prefix'"
+      :mask="mask"
+      :default-value="defaultValue"
+    >
+      <template v-slot:prefix>
+        <InputIcons />
+      </template>
+    </MaskedTextBox>
+  </div>
+</template>
+<script>
+import { MaskedTextBox } from '@progress/kendo-vue-inputs';
+import InputIcons from './InputIcons.vue';
+
+export default {
+  components: {
+    MaskedTextBox,
+    InputIcons,
+  },
+  data: function () {
+    return {
+      mask: '(999) 000-00-00-00',
+      defaultValue: '(359) 555-55-55-55',
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/maskedtextbox/adornments/separator/main.js b/vue-options-api-demos/inputs/maskedtextbox/adornments/separator/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/adornments/separator/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/maskedtextbox/adornments/separator/main.vue b/vue-options-api-demos/inputs/maskedtextbox/adornments/separator/main.vue
new file mode 100644
index 00000000..532f500d
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/adornments/separator/main.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <MaskedTextBox
+      :style="{ width: '230px' }"
+      :inputPrefix="'prefix'"
+      :mask="mask"
+      :default-value="defaultValue"
+    >
+      <template v-slot:prefix>
+        <div>
+          &nbsp; &nbsp; &nbsp;
+          <InputSeparator />
+        </div>
+      </template>
+    </MaskedTextBox>
+  </div>
+</template>
+<script>
+import { MaskedTextBox, InputSeparator } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    MaskedTextBox,
+    InputSeparator,
+  },
+  data: function () {
+    return {
+      mask: '(999) 000-00-00-00',
+      defaultValue: '(359) 555-55-55-55',
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/maskedtextbox/adornments/suffix/main.js b/vue-options-api-demos/inputs/maskedtextbox/adornments/suffix/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/adornments/suffix/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/maskedtextbox/adornments/suffix/main.vue b/vue-options-api-demos/inputs/maskedtextbox/adornments/suffix/main.vue
new file mode 100644
index 00000000..ae5599e1
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/adornments/suffix/main.vue
@@ -0,0 +1,27 @@
+<template>
+  <MaskedTextBox
+    :style="{ width: '230px' }"
+    :inputSuffix="'suffix'"
+    :mask="mask"
+    :default-value="defaultValue"
+  >
+    <template v-slot:suffix>
+      <span class="k-input-icon k-icon k-i-gear"></span>
+    </template>
+  </MaskedTextBox>
+</template>
+<script>
+import { MaskedTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    MaskedTextBox,
+  },
+  data: function () {
+    return {
+      mask: '(999) 000-00-00-00',
+      defaultValue: '(359) 555-55-55-55',
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/maskedtextbox/adornments/validation-icon/main.js b/vue-options-api-demos/inputs/maskedtextbox/adornments/validation-icon/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/adornments/validation-icon/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/maskedtextbox/adornments/validation-icon/main.vue b/vue-options-api-demos/inputs/maskedtextbox/adornments/validation-icon/main.vue
new file mode 100644
index 00000000..a4c45fc4
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/adornments/validation-icon/main.vue
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    Valid Input Icon:
+    <br />
+    <MaskedTextBox
+      :style="{ width: '230px' }"
+      :show-validation-icon="true"
+      :input-class="'k-valid'"
+      :mask="mask"
+      :default-value="defaultValue"
+    />
+    <br />
+    <br />
+    Invalid Input Icon:
+    <br />
+    <MaskedTextBox
+      :style="{ width: '230px' }"
+      :show-validation-icon="true"
+      :valid="false"
+      :mask="mask"
+      :default-value="defaultValue"
+    />
+  </div>
+</template>
+<script>
+import { MaskedTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    MaskedTextBox,
+  },
+  data: function () {
+    return {
+      mask: '(999) 000-00-00-00',
+      defaultValue: '(359) 555-55-55-55',
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/maskedtextbox/appearance/configurator/MaskedTextBoxStyleConfigurator.vue b/vue-options-api-demos/inputs/maskedtextbox/appearance/configurator/MaskedTextBoxStyleConfigurator.vue
new file mode 100644
index 00000000..c1b36044
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/appearance/configurator/MaskedTextBoxStyleConfigurator.vue
@@ -0,0 +1,105 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Fill Mode
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="fillModes"
+              :value="fillMode"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleFillModeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+    fillMode: String,
+    rounded: String,
+  },
+  emits: [
+    "sizechange",
+    "fillmodechange",
+    "roundedchange",
+  ],
+  data() {
+    return {
+      sizes: ["small", "medium", "large"],
+      fillModes: ["solid", "outline", "flat"],
+      roundedOptions: ["small", "medium", "large", "full"],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleFillModeChange(event) {
+      this.$emit("fillmodechange", event);
+    },
+    handleRoundedChange(event) {
+      this.$emit("roundedchange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/maskedtextbox/appearance/configurator/main.js b/vue-options-api-demos/inputs/maskedtextbox/appearance/configurator/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/appearance/configurator/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/maskedtextbox/appearance/configurator/main.vue b/vue-options-api-demos/inputs/maskedtextbox/appearance/configurator/main.vue
new file mode 100644
index 00000000..740aa7d8
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/appearance/configurator/main.vue
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <MaskedTextBoxStyleConfigurator
+      :size="size"
+      @sizechange="setSize"
+      :fill-mode="fillMode"
+      @fillmodechange="setFillMode"
+      :rounded="rounded"
+      @roundedchange="setRounded"
+    />
+    <MaskedTextBox
+      :size="size"
+      :fill-mode="fillMode"
+      :rounded="rounded"
+      :style="{ width: '230px' }"
+      :mask="'(999) 000-00-00-00'"
+      :default-value="'(359) 884-12-33-21'"
+    />
+  </div>
+</template>
+<script>
+import MaskedTextBoxStyleConfigurator from "./MaskedTextBoxStyleConfigurator.vue";
+import { MaskedTextBox } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    MaskedTextBoxStyleConfigurator,
+    MaskedTextBox,
+  },
+  data() {
+    return {
+      size: "medium",
+      rounded: "medium",
+      fillMode: "solid",
+    };
+  },
+  methods: {
+    setRounded(event) {
+      this.rounded = event.value;
+    },
+    setSize(event) {
+      this.size = event.value;
+    },
+    setFillMode(event) {
+      this.fillMode = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/maskedtextbox/appearance/fill-mode/main.js b/vue-options-api-demos/inputs/maskedtextbox/appearance/fill-mode/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/appearance/fill-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/maskedtextbox/appearance/fill-mode/main.vue b/vue-options-api-demos/inputs/maskedtextbox/appearance/fill-mode/main.vue
new file mode 100644
index 00000000..1a474b34
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/appearance/fill-mode/main.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="example-config">
+    <div class="demo">
+      <span class="wrapper">
+        <span>Flat:</span>
+        <MaskedTextBox
+          :fill-mode="'flat'"
+          :mask="'(999) 000-00-00-00'"
+          :default-value="'(359) 884-12-33-21'"
+          :style="{ width: '170px' }"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Solid:</span>
+        <MaskedTextBox
+          :fill-mode="'solid'"
+          :mask="'(999) 000-00-00-00'"
+          :default-value="'(359) 884-12-33-21'"
+          :style="{ width: '170px' }"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Outline:</span>
+        <MaskedTextBox
+          :fill-mode="'outline'"
+          :mask="'(999) 000-00-00-00'"
+          :default-value="'(359) 884-12-33-21'"
+          :style="{ width: '170px' }"
+        />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Custom fill mode:</span>
+        <MaskedTextBox
+          :fill-mode="null"
+          :mask="'(999) 000-00-00-00'"
+          :default-value="'(359) 884-12-33-21'"
+          :class="'custom-maskedtextbox'"
+          :style="{ width: '170px' }"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { MaskedTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    MaskedTextBox,
+  },
+};
+</script>
+
+<style>
+.custom-maskedtextbox {
+  background-color: #00aead;
+  border: 2px solid #bfd843;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/inputs/maskedtextbox/appearance/rounded/main.js b/vue-options-api-demos/inputs/maskedtextbox/appearance/rounded/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/appearance/rounded/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/maskedtextbox/appearance/rounded/main.vue b/vue-options-api-demos/inputs/maskedtextbox/appearance/rounded/main.vue
new file mode 100644
index 00000000..2ca7ce35
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/appearance/rounded/main.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Small roundness:</span>
+        <MaskedTextBox
+          :rounded="'small'"
+          :mask="'(999) 000-00-00-00'"
+          :default-value="'(359) 884-12-33-21'"
+          :style="{ width: '170px' }"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Medium roundness:</span>
+        <MaskedTextBox
+          :rounded="'medium'"
+          :mask="'(999) 000-00-00-00'"
+          :default-value="'(359) 884-12-33-21'"
+          :style="{ width: '170px' }"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Large roundness:</span>
+        <MaskedTextBox
+          :rounded="'large'"
+          :mask="'(999) 000-00-00-00'"
+          :default-value="'(359) 884-12-33-21'"
+          :style="{ width: '170px' }"
+        />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Full roundness:</span>
+        <MaskedTextBox
+          :rounded="'full'"
+          :mask="'(999) 000-00-00-00'"
+          :default-value="'(359) 884-12-33-21'"
+          :style="{ width: '170px' }"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Custom roundness:</span>
+        <MaskedTextBox
+          :rounded="null"
+          :class="'custom-maskedtextbox'"
+          :mask="'(999) 000-00-00-00'"
+          :default-value="'(359) 884-12-33-21'"
+          :style="{ width: '170px' }"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { MaskedTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    MaskedTextBox,
+  },
+};
+</script>
+
+<style>
+.custom-maskedtextbox {
+  border-bottom-right-radius: 15px;
+  border-top-left-radius: 15px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/inputs/maskedtextbox/appearance/size/main.js b/vue-options-api-demos/inputs/maskedtextbox/appearance/size/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/appearance/size/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/maskedtextbox/appearance/size/main.vue b/vue-options-api-demos/inputs/maskedtextbox/appearance/size/main.vue
new file mode 100644
index 00000000..c395407a
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/appearance/size/main.vue
@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Small size:</span>
+        <MaskedTextBox
+          :size="'small'"
+          :mask="'(999) 000-00-00-00'"
+          :default-value="'(359) 884-12-33-21'"
+          :style="{ width: '170px' }"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Medium size:</span>
+        <MaskedTextBox
+          :size="'medium'"
+          :mask="'(999) 000-00-00-00'"
+          :default-value="'(359) 884-12-33-21'"
+          :style="{ width: '170px' }"
+        />
+      </span>
+      <span class="wrapper">
+        <span>Large size:</span>
+        <MaskedTextBox
+          :size="'large'"
+          :mask="'(999) 000-00-00-00'"
+          :default-value="'(359) 884-12-33-21'"
+          :style="{ width: '170px' }"
+        />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Custom size:</span>
+        <MaskedTextBox
+          :size="null"
+          :mask="'(999) 000-00-00-00'"
+          :default-value="'(359) 884-12-33-21'"
+          :class="'custom-maskedtextbox'"
+          :style="{ width: '170px' }"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { MaskedTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    MaskedTextBox,
+  },
+};
+</script>
+
+<style>
+.custom-maskedtextbox input {
+  padding: 10px 14px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/inputs/maskedtextbox/basic/main.js b/vue-options-api-demos/inputs/maskedtextbox/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/maskedtextbox/basic/main.vue b/vue-options-api-demos/inputs/maskedtextbox/basic/main.vue
new file mode 100644
index 00000000..f306f01e
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/basic/main.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <div class="col-xs-12 col-md-6 example-col">
+      <p>Enter phone number</p>
+      <MaskedTextBox
+        :style="{ width: '230px' }"
+        :mask="mask"
+        :default-value="defaultValue"
+      ></MaskedTextBox>
+    </div>
+    <div class="col-xs-12 col-md-6 example-col">
+      <p>MaskedTextBox with adornments</p>
+      <MaskedTextBox :style="{ width: '230px' }" :icon-name="'gear'" />
+    </div>
+  </div>
+</template>
+<script>
+import { MaskedTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    MaskedTextBox,
+  },
+  data: function () {
+    return {
+      mask: '(999) 000-00-00-00',
+      defaultValue: '(359) 884-12-33-21',
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/maskedtextbox/disabled/main.js b/vue-options-api-demos/inputs/maskedtextbox/disabled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/maskedtextbox/disabled/main.vue b/vue-options-api-demos/inputs/maskedtextbox/disabled/main.vue
new file mode 100644
index 00000000..43abb2c4
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/disabled/main.vue
@@ -0,0 +1,21 @@
+<template>
+ <div>
+        <maskedtextbox :style="{ width: '230px' }" :mask="mask" :value="value" :disabled="true" ></maskedtextbox>
+    </div>
+</template>
+<script>
+import { MaskedTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        'maskedtextbox': MaskedTextBox
+    },
+    data: function(){
+        return {
+            mask: 'aaaaaaaaaaaaaaaaa',
+            value: 'Andrew Green'
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/maskedtextbox/forms/custom-message/main.js b/vue-options-api-demos/inputs/maskedtextbox/forms/custom-message/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/forms/custom-message/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/maskedtextbox/forms/custom-message/main.vue b/vue-options-api-demos/inputs/maskedtextbox/forms/custom-message/main.vue
new file mode 100644
index 00000000..406500a1
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/forms/custom-message/main.vue
@@ -0,0 +1,75 @@
+<template>
+   <div class="row example-wrapper">
+            <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                <div class="card">
+                    <div class="card-block">
+                        <form class="k-form" @submit="handleSubmit">
+                            <fieldset>
+                                <legend>Please fill in the fields:</legend>
+                                <div class="mb-3">
+                                    <k-input 
+                                        name="firstName"
+                                        :label="'First Name'"
+                                        :default-value="'John'"
+                                        :pattern="'[A-Za-z]+'"
+                                        :min-length='2'
+                                        :required='true'
+                                    ></k-input>
+                                </div>
+                                <div class="mb-3">
+                                    <k-input 
+                                        name="lastName"
+                                        :label="'Last Name'"
+                                        :default-value="'Smith'"
+                                        :pattern="'[A-Za-z]+'"
+                                        :mi-length='2'
+                                        :required="true"
+                                    ></k-input>
+                                </div>
+                                <div>
+                                    <maskedtextbox 
+                                        name="postcode"
+                                        :label="'Postcode (A9 9AA)'"
+                                        :required="true"
+                                        :mask="'A9 9AA'"
+                                    ></maskedtextbox>
+                                </div>
+                            </fieldset>
+                            <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                        </form>
+                    </div>
+                </div>
+            </div>
+                <div v-if="success"
+                    class="alert alert-success"
+                    :style="{ position: 'absolute' }"
+                >
+                    Form submitted!
+                </div>
+    </div>
+</template>
+<script>
+import { MaskedTextBox, Input } from '@progress/kendo-vue-inputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'maskedtextbox': MaskedTextBox,
+        'k-input': Input,
+      'kbutton': Button
+    },
+    data: function(){
+        return {
+            success: false
+        }
+    },
+    methods: {
+        handleSubmit (event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(() => { this.success = false; }, 3000);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/maskedtextbox/forms/disable-style/main.js b/vue-options-api-demos/inputs/maskedtextbox/forms/disable-style/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/forms/disable-style/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/maskedtextbox/forms/disable-style/main.vue b/vue-options-api-demos/inputs/maskedtextbox/forms/disable-style/main.vue
new file mode 100644
index 00000000..7ab86e4a
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/forms/disable-style/main.vue
@@ -0,0 +1,72 @@
+<template>
+   <div class="row example-wrapper">
+            <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                <div class="card">
+                    <div class="card-block">
+                        <form class="k-form" @submit="handleSubmit">
+                            <fieldset>
+                                <legend>Please fill in the fields:</legend>
+                                <div class="mb-3">
+                                    <k-input 
+                                        name="firstName"
+                                        :label="'First Name'"
+                                        :default-value="'John'"
+                                        :pattern="'[A-Za-z]+'"
+                                    ></k-input>
+                                </div>
+                                <div class="mb-3">
+                                    <k-input 
+                                        name="lastName"
+                                        :label="'Last Name'"
+                                        :default-value="'Smith'"
+                                    ></k-input>
+                                </div>
+                                <div>
+                                    <maskedtextbox 
+                                        :validity-styles="false"
+                                        name="postcode"
+                                        :label="'Postcode (A9 9AA)'"
+                                        :required="true"
+                                        :mask="'A9 9AA'"
+                                        :validation-message="'Please enter valid postcode!'"
+                                    ></maskedtextbox>
+                                </div>
+                            </fieldset>
+                            <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                        </form>
+                    </div>
+                </div>
+            </div>
+                <div v-if="success"
+                    class="alert alert-success"
+                    :style="{ position: 'absolute' }"
+                >
+                    Form submitted!
+                </div>
+        </div>
+</template>
+<script>
+import { MaskedTextBox, Input } from '@progress/kendo-vue-inputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'maskedtextbox': MaskedTextBox,
+        'k-input': Input,
+      'kbutton': Button
+    },
+    data: function(){
+        return {
+            success: false
+        }
+    },
+    methods: {
+        handleSubmit (event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(() => { this.success = false; }, 3000);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/maskedtextbox/forms/enforce/main.js b/vue-options-api-demos/inputs/maskedtextbox/forms/enforce/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/forms/enforce/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/maskedtextbox/forms/enforce/main.vue b/vue-options-api-demos/inputs/maskedtextbox/forms/enforce/main.vue
new file mode 100644
index 00000000..ac8cc1a1
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/forms/enforce/main.vue
@@ -0,0 +1,80 @@
+<template>
+      <div class="row example-wrapper">
+            <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                <div class="card">
+                    <div class="card-block">
+                        <form class="k-form" @submit="handleSubmit">
+                            <fieldset>
+                                <legend>Please fill in the fields:</legend>
+                                <div class="mb-3">
+                                    <k-input 
+                                        name="firstName"
+                                        :label="'First Name'"
+                                        :default-value="'John'"
+                                    ></k-input>
+                                </div>
+                                <div class="mb-3">
+                                    <k-input 
+                                        name="lastName"
+                                        :label="'Last Name'"
+                                        :default-value="'Smith'"
+                                    ></k-input>
+                                </div>
+                                <div>
+                                    <maskedtextbox 
+                                        name="postcode"
+                                        :label="'Postcode (A9 9AA)'"
+                                        :required="true"
+                                        :mask="'A9 9AA'"
+                                        @change="onChange"
+                                        :value="postcode"
+                                        :valid="postcode.replace(/_/g, '').length > 3"
+                                        :validation-message="'Please enter valid postcode!'"
+                                    ></maskedtextbox>
+                                </div>
+                            </fieldset>
+                            <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                        </form>
+                    </div>
+                </div>
+            </div>
+                <div v-if="success"
+                    class="alert alert-success"
+                    :style="{ position: 'absolute' }"
+                >
+                    Form submitted!
+                </div>
+        </div>
+</template>
+<script>
+import { MaskedTextBox, Input } from '@progress/kendo-vue-inputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'maskedtextbox': MaskedTextBox,
+        'k-input': Input,
+      'kbutton': Button
+    },
+     data: function(){
+        return {
+            success: false,
+            postcode: ''
+        }
+    },
+    methods: {
+        handleSubmit (event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(() => { this.success = false; }, 3000);
+        },
+        onChange (event) {
+            const postcode = event.target.value;
+            if (this.postcode !== postcode) {
+                this.postcode = postcode;
+            }
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/maskedtextbox/forms/validation/main.js b/vue-options-api-demos/inputs/maskedtextbox/forms/validation/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/forms/validation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/maskedtextbox/forms/validation/main.vue b/vue-options-api-demos/inputs/maskedtextbox/forms/validation/main.vue
new file mode 100644
index 00000000..5a97a19e
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/forms/validation/main.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="row example-wrapper">
+            <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+                <div class="card">
+                    <div class="card-block">
+                        <form class="k-form" @submit="handleSubmit">
+                            <fieldset>
+                                <legend>Please fill in the fields:</legend>
+                                <div class="mb-3">
+                                    <k-input 
+                                        name="firstName"
+                                        :label="'First Name'"
+                                        :default-value="'John'"
+                                        :pattern="'[A-Za-z]+'"
+                                        :min-length='2'
+                                        :required='true'
+                                        :validation-message="'Please enter your first name!'"
+                                    ></k-input>
+                                </div>
+                                <div class="mb-3">
+                                    <k-input 
+                                        name="lastName"
+                                        :label="'Last Name'"
+                                        :default-value="'Smith'"
+                                        :pattern="'[A-Za-z]+'"
+                                        :mi-length='2'
+                                        :required="true"
+                                        :validation-message="'Please enter your last name!'"
+                                    ></k-input>
+                                </div>
+                                <div>
+                                    <maskedtextbox 
+                                        name="postcode"
+                                        :label="'Postcode (A9 9AA)'"
+                                        :required="true"
+                                        :mask="'A9 9AA'"
+                                        :validation-message="'Please enter your postcode!'"
+                                    ></maskedtextbox>
+                                </div>
+                            </fieldset>
+                            <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                        </form>
+                    </div>
+                </div>
+            </div>
+                <div v-if="success"
+                    class="alert alert-success"
+                    :style="{ position: 'absolute' }"
+                >
+                    Form submitted!
+                </div>
+    </div>
+</template>
+<script>
+import { MaskedTextBox, Input } from '@progress/kendo-vue-inputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'maskedtextbox': MaskedTextBox,
+        'k-input': Input,
+      'kbutton': Button
+    },
+    data: function(){
+        return {
+            success: false
+        }
+    },
+    methods: {
+        handleSubmit (event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(() => { this.success = false; }, 3000);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/maskedtextbox/input-mode/main.js b/vue-options-api-demos/inputs/maskedtextbox/input-mode/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/input-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/maskedtextbox/input-mode/main.vue b/vue-options-api-demos/inputs/maskedtextbox/input-mode/main.vue
new file mode 100644
index 00000000..2b04f93c
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/input-mode/main.vue
@@ -0,0 +1,76 @@
+<template>
+    <div class="k-d-grid k-grid-cols-sm-1 k-grid-cols-md-2 k-gap-4 k-max-w-fit">
+        <div class="k-col-span-1">
+            <div>inputmode=text <i>(default)</i></div>
+            <maskedtextbox
+                :mask="lettersMask"
+                :rules="rules"
+                :placeholder="'Enter text...'"
+                :input-attributes="{ inputMode: 'text' }"
+                :style="{ width: '300px' }"
+            />
+        </div>
+        <div class="k-col-span-1">
+            <div>inputmode=tel</div>
+            <maskedtextbox
+                :mask="'(999) 000-00-00-00'"
+                :placeholder="'(___) ___-__-__-__'"
+                :input-attributes="{ inputMode: 'tel' }"
+                :input-suffix="'suffix'"
+                :style="{ width: '300px' }"
+            >
+                <template v-slot:suffix>
+                    <svgicon :icon="bookIcon" />
+                </template>
+            </maskedtextbox>
+        </div>
+        <div class="k-col-span-1">
+            <div>inputmode=email</div>
+            <maskedtextbox
+                :placeholder="'example@email.com'"
+                :input-attributes="{ inputMode: 'email' }"
+                :input-prefix="'prefix'"
+                :style="{ width: '300px' }"
+            >
+                <template v-slot:prefix>
+                    <svgicon :icon="envelopeIcon" />
+                </template>
+            </maskedtextbox>
+        </div>
+        <div class="k-col-span-1">
+            <div>inputmode=numeric</div>
+            <maskedtextbox
+                :mask="numbersMask"
+                :rules="rules"
+                :placeholder="'Enter a number...'"
+                :input-attributes="{ inputMode: 'numeric' }"
+                :style="{ width: '300px' }"
+            />
+        </div>
+    </div>
+</template>
+<script>
+import { MaskedTextBox } from '@progress/kendo-vue-inputs';
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { bookIcon, envelopeIcon } from "@progress/kendo-svg-icons";
+
+export default {
+    components: {
+        'maskedtextbox': MaskedTextBox,
+        'svgicon': SvgIcon,
+    },
+    data() {
+        return {
+            lettersMask: 'LLLLL',
+            numbersMask: 'NNNNN',
+            rules: {
+                "L": /[a-zA-Z]/,
+                "N": /[0-9]/
+            },
+            bookIcon,
+            envelopeIcon
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/maskedtextbox/masks/basic/main.js b/vue-options-api-demos/inputs/maskedtextbox/masks/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/masks/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/maskedtextbox/masks/basic/main.vue b/vue-options-api-demos/inputs/maskedtextbox/masks/basic/main.vue
new file mode 100644
index 00000000..b16c9a0a
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/masks/basic/main.vue
@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <p>Enter phone number</p>
+        <maskedtextbox :style="{ width: '230px' }" :mask="mask" :default-value="defaultValue" ></maskedtextbox>
+    </div>
+</template>
+<script>
+import { MaskedTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        'maskedtextbox': MaskedTextBox
+    },
+    data: function(){
+        return {
+            mask: '0000-0000-0000-0000',
+            defaultValue: '5748-1570-0019-4334'
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/maskedtextbox/masks/extend/main.js b/vue-options-api-demos/inputs/maskedtextbox/masks/extend/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/masks/extend/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/maskedtextbox/masks/extend/main.vue b/vue-options-api-demos/inputs/maskedtextbox/masks/extend/main.vue
new file mode 100644
index 00000000..5c397425
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/masks/extend/main.vue
@@ -0,0 +1,38 @@
+<template>
+   <div class="row example-wrapper">
+        <div>
+            <div class="example-config">
+                <p>{{mask}}</p>
+                <ul>
+                    <li>Y - cyrillic only</li>
+                    <li>L - latin only</li>
+                </ul>
+            </div>
+            <maskedtextbox :style="{ width: '230px' }"
+                :mask="mask"
+                :default-value="'абвг abcd'"
+                :rules="rules"
+            >
+            </maskedtextbox>
+        </div>
+    </div>
+</template>
+<script>
+import { MaskedTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        'maskedtextbox': MaskedTextBox
+    },
+    data: function(){
+        return {
+            mask: 'YYYY LLLL',
+            rules: {
+                "L": /[a-zA-Z]/,
+                "Y": /[\u0400-\u0481\u048A-\u04FF]/
+            }
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/maskedtextbox/readonly/main.js b/vue-options-api-demos/inputs/maskedtextbox/readonly/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/readonly/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/maskedtextbox/readonly/main.vue b/vue-options-api-demos/inputs/maskedtextbox/readonly/main.vue
new file mode 100644
index 00000000..0af7d65f
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/readonly/main.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+        <maskedtextbox :style="{ width: '230px' }" :mask="mask" :value="value" :readonly="true" ></maskedtextbox>
+    </div>
+</template>
+<script>
+import { MaskedTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        'maskedtextbox': MaskedTextBox
+    },
+    data: function(){
+        return {
+            mask: 'aaaaaaaaaaaaaaaaa',
+            value: 'Andrew Green'
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/maskedtextbox/valid-state/main.js b/vue-options-api-demos/inputs/maskedtextbox/valid-state/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/valid-state/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/maskedtextbox/valid-state/main.vue b/vue-options-api-demos/inputs/maskedtextbox/valid-state/main.vue
new file mode 100644
index 00000000..4dcedcf5
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/valid-state/main.vue
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <p>Type any letters</p>
+    <maskedtextbox
+      :style="{ width: '230px' }"
+      :mask="'(999) 000-00-00-00'"
+      :value="value"
+      :valid="valid"
+      @change="handleChange"
+    ></maskedtextbox>
+  </div>
+</template>
+<script>
+import { MaskedTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    maskedtextbox: MaskedTextBox,
+  },
+  data: function () {
+    return {
+      value: '(359) 884-12-33-21',
+      valid: true,
+    };
+  },
+  methods: {
+    handleChange(event) {
+      if (this.value === event.target.value) {
+        this.updateValidity(event);
+      } else {
+        this.value = event.target.value;
+      }
+    },
+    updateValidity(event) {
+      const textbox = event.target;
+      if (textbox.value.length > textbox.value.length) {
+        if (this.valid) {
+          this.valid = false;
+        } else {
+          clearTimeout(this.timeout);
+        }
+        this.timeout = setTimeout(() => {
+          this.valid = true;
+        }, 100);
+      }
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/maskedtextbox/value/main.js b/vue-options-api-demos/inputs/maskedtextbox/value/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/value/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/maskedtextbox/value/main.vue b/vue-options-api-demos/inputs/maskedtextbox/value/main.vue
new file mode 100644
index 00000000..6b0941f5
--- /dev/null
+++ b/vue-options-api-demos/inputs/maskedtextbox/value/main.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+        <maskedtextbox :style="{ width: '230px' }" :mask="mask" :value="value" @change="onChange" ></maskedtextbox>
+    </div>
+</template>
+<script>
+import { MaskedTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        'maskedtextbox': MaskedTextBox
+    },
+    data: function(){
+        return {
+            mask: '0000-0000-0000-0000',
+            value: '5748-1570-0019-4334'
+        };
+    },
+    methods: {
+        onChange: function(event){
+            const value = event.target.value;
+            if (this.value !== value) {
+                this.value = value;
+            }
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/numerictextbox/adornments/clear-button/main.js b/vue-options-api-demos/inputs/numerictextbox/adornments/clear-button/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/adornments/clear-button/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/numerictextbox/adornments/clear-button/main.vue b/vue-options-api-demos/inputs/numerictextbox/adornments/clear-button/main.vue
new file mode 100644
index 00000000..62d331fe
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/adornments/clear-button/main.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <NumericTextBox :style="{ width: '230px' }" :show-clear-button="true" />
+    </div>
+</template>
+<script>
+import { NumericTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        NumericTextBox
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/numerictextbox/adornments/disabled/InputIcons.vue b/vue-options-api-demos/inputs/numerictextbox/adornments/disabled/InputIcons.vue
new file mode 100644
index 00000000..b00e1cc0
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/adornments/disabled/InputIcons.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <span class="k-input-icon k-icon k-i-menu"></span>
+        <InputSeparator />
+        <span class="k-input-icon k-icon k-i-gear"></span>
+    </div>
+</template>
+<script>
+import { InputSeparator } from "@progress/kendo-vue-inputs";
+export default {
+    components: {
+        InputSeparator,
+    },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/numerictextbox/adornments/disabled/main.js b/vue-options-api-demos/inputs/numerictextbox/adornments/disabled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/adornments/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/numerictextbox/adornments/disabled/main.vue b/vue-options-api-demos/inputs/numerictextbox/adornments/disabled/main.vue
new file mode 100644
index 00000000..b4b56641
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/adornments/disabled/main.vue
@@ -0,0 +1,25 @@
+<template>
+    <div>
+        <NumericTextBox :style="{ width: '230px' }" :disabled="true" :inputIconName="'gear'" :showValidationIcon="true"
+            :inputPrefix="'prefix'" :inputSuffix="'suffix'" :showClearButton="true">
+            <template v-slot:prefix>
+                <InputIcons />
+            </template>
+            <template v-slot:suffix>
+                <span class="k-input-icon k-icon k-i-gear"></span>
+            </template>
+        </NumericTextBox>
+    </div>
+</template>
+<script>
+import { NumericTextBox } from '@progress/kendo-vue-inputs';
+import InputIcons from './InputIcons.vue';
+
+export default {
+    components: {
+        NumericTextBox,
+        InputIcons
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/numerictextbox/adornments/icon-name/main.js b/vue-options-api-demos/inputs/numerictextbox/adornments/icon-name/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/adornments/icon-name/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/numerictextbox/adornments/icon-name/main.vue b/vue-options-api-demos/inputs/numerictextbox/adornments/icon-name/main.vue
new file mode 100644
index 00000000..8aa41600
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/adornments/icon-name/main.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <NumericTextBox :style="{ width: '230px' }" :icon-name="'gear'" />
+    </div>
+</template>
+<script>
+import { NumericTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        NumericTextBox
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/numerictextbox/adornments/loading-icon/main.js b/vue-options-api-demos/inputs/numerictextbox/adornments/loading-icon/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/adornments/loading-icon/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/numerictextbox/adornments/loading-icon/main.vue b/vue-options-api-demos/inputs/numerictextbox/adornments/loading-icon/main.vue
new file mode 100644
index 00000000..979a526b
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/adornments/loading-icon/main.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <NumericTextBox :style="{ width: '230px' }" :show-loading-icon="true" />
+    </div>
+</template>
+<script>
+import { NumericTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        NumericTextBox
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/numerictextbox/adornments/prefix/InputIcons.vue b/vue-options-api-demos/inputs/numerictextbox/adornments/prefix/InputIcons.vue
new file mode 100644
index 00000000..b00e1cc0
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/adornments/prefix/InputIcons.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <span class="k-input-icon k-icon k-i-menu"></span>
+        <InputSeparator />
+        <span class="k-input-icon k-icon k-i-gear"></span>
+    </div>
+</template>
+<script>
+import { InputSeparator } from "@progress/kendo-vue-inputs";
+export default {
+    components: {
+        InputSeparator,
+    },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/numerictextbox/adornments/prefix/main.js b/vue-options-api-demos/inputs/numerictextbox/adornments/prefix/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/adornments/prefix/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/numerictextbox/adornments/prefix/main.vue b/vue-options-api-demos/inputs/numerictextbox/adornments/prefix/main.vue
new file mode 100644
index 00000000..4688c047
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/adornments/prefix/main.vue
@@ -0,0 +1,21 @@
+<template>
+    <div>
+        <NumericTextBox :style="{ width: '230px' }" :inputPrefix="'prefix'">
+            <template v-slot:prefix>
+                <InputIcons />
+            </template>
+        </NumericTextBox>
+    </div>
+</template>
+<script>
+import { NumericTextBox } from '@progress/kendo-vue-inputs';
+import InputIcons from './InputIcons.vue';
+
+export default {
+    components: {
+        NumericTextBox,
+        InputIcons
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/numerictextbox/adornments/separator/main.js b/vue-options-api-demos/inputs/numerictextbox/adornments/separator/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/adornments/separator/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/numerictextbox/adornments/separator/main.vue b/vue-options-api-demos/inputs/numerictextbox/adornments/separator/main.vue
new file mode 100644
index 00000000..3c480f43
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/adornments/separator/main.vue
@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <NumericTextBox :style="{ width: '230px' }" :inputPrefix="'prefix'">
+            <template v-slot:prefix>
+                <div>
+                    &nbsp; &nbsp; &nbsp;
+                    <InputSeparator />
+                </div>
+            </template>
+        </NumericTextBox>
+    </div>
+</template>
+<script>
+import { NumericTextBox, InputSeparator } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        NumericTextBox, InputSeparator
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/numerictextbox/adornments/suffix/main.js b/vue-options-api-demos/inputs/numerictextbox/adornments/suffix/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/adornments/suffix/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/numerictextbox/adornments/suffix/main.vue b/vue-options-api-demos/inputs/numerictextbox/adornments/suffix/main.vue
new file mode 100644
index 00000000..3362213b
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/adornments/suffix/main.vue
@@ -0,0 +1,17 @@
+<template>
+    <NumericTextBox :style="{ width: '230px' }" :inputSuffix="'suffix'">
+        <template v-slot:suffix>
+            <span class="k-input-icon k-icon k-i-gear"></span>
+        </template>
+    </NumericTextBox>
+</template>
+<script>
+import { NumericTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        NumericTextBox
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/numerictextbox/adornments/validation-icon/main.js b/vue-options-api-demos/inputs/numerictextbox/adornments/validation-icon/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/adornments/validation-icon/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/numerictextbox/adornments/validation-icon/main.vue b/vue-options-api-demos/inputs/numerictextbox/adornments/validation-icon/main.vue
new file mode 100644
index 00000000..7b24e232
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/adornments/validation-icon/main.vue
@@ -0,0 +1,22 @@
+<template>
+    <div>
+        Valid Input Icon:
+        <br />
+        <NumericTextBox :style="{ width: '230px' }" :show-validation-icon="true" :input-class="'k-valid'" />
+        <br />
+        <br />
+        Invalid Input Icon:
+        <br />
+        <NumericTextBox :style="{ width: '230px' }" :show-validation-icon="true" :valid="false" />
+    </div>
+</template>
+<script>
+import { NumericTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        NumericTextBox
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/numerictextbox/appearance/configurator/NumericTextBoxStyleConfigurator.vue b/vue-options-api-demos/inputs/numerictextbox/appearance/configurator/NumericTextBoxStyleConfigurator.vue
new file mode 100644
index 00000000..c1b36044
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/appearance/configurator/NumericTextBoxStyleConfigurator.vue
@@ -0,0 +1,105 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Fill Mode
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="fillModes"
+              :value="fillMode"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleFillModeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+    fillMode: String,
+    rounded: String,
+  },
+  emits: [
+    "sizechange",
+    "fillmodechange",
+    "roundedchange",
+  ],
+  data() {
+    return {
+      sizes: ["small", "medium", "large"],
+      fillModes: ["solid", "outline", "flat"],
+      roundedOptions: ["small", "medium", "large", "full"],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleFillModeChange(event) {
+      this.$emit("fillmodechange", event);
+    },
+    handleRoundedChange(event) {
+      this.$emit("roundedchange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/numerictextbox/appearance/configurator/main.js b/vue-options-api-demos/inputs/numerictextbox/appearance/configurator/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/appearance/configurator/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/numerictextbox/appearance/configurator/main.vue b/vue-options-api-demos/inputs/numerictextbox/appearance/configurator/main.vue
new file mode 100644
index 00000000..c3e11df9
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/appearance/configurator/main.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <NumericTextBoxStyleConfigurator
+      :size="size"
+      @sizechange="setSize"
+      :fill-mode="fillMode"
+      @fillmodechange="setFillMode"
+      :rounded="rounded"
+      @roundedchange="setRounded"
+    />
+    <NumericTextBox
+      :size="size"
+      :fill-mode="fillMode"
+      :rounded="rounded"
+      :style="{ width: '200px' }"
+    />
+  </div>
+</template>
+<script>
+import NumericTextBoxStyleConfigurator from "./NumericTextBoxStyleConfigurator.vue";
+import { NumericTextBox } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    NumericTextBoxStyleConfigurator,
+    NumericTextBox,
+  },
+  data() {
+    return {
+      size: "medium",
+      rounded: "medium",
+      fillMode: "solid",
+    };
+  },
+  methods: {
+    setRounded(event) {
+      this.rounded = event.value;
+    },
+    setSize(event) {
+      this.size = event.value;
+    },
+    setFillMode(event) {
+      this.fillMode = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/numerictextbox/appearance/fill-mode/main.js b/vue-options-api-demos/inputs/numerictextbox/appearance/fill-mode/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/appearance/fill-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/numerictextbox/appearance/fill-mode/main.vue b/vue-options-api-demos/inputs/numerictextbox/appearance/fill-mode/main.vue
new file mode 100644
index 00000000..6b58cbd3
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/appearance/fill-mode/main.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="example-config">
+    <div class="demo">
+      <span class="wrapper">
+        <span>Flat: </span>
+        <knumeric :fill-mode="'flat'" :style="{ width: '170px' }" />
+      </span>
+      <span class="wrapper">
+        <span>Solid: </span>
+        <knumeric :fill-mode="'solid'" :style="{ width: '170px' }" />
+      </span>
+      <span class="wrapper">
+        <span>Outline: </span>
+        <knumeric :fill-mode="'outline'" :style="{ width: '170px' }" />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Custom fill mode: </span>
+        <knumeric
+          :fill-mode="null"
+          :class="'custom-numerictextbox'"
+          :style="{ width: '170px' }"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { NumericTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    knumeric: NumericTextBox,
+  },
+};
+</script>
+
+<style>
+.custom-numerictextbox {
+  background-color: #00aead;
+  border: 2px solid #bfd843;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/inputs/numerictextbox/appearance/rounded/main.js b/vue-options-api-demos/inputs/numerictextbox/appearance/rounded/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/appearance/rounded/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/numerictextbox/appearance/rounded/main.vue b/vue-options-api-demos/inputs/numerictextbox/appearance/rounded/main.vue
new file mode 100644
index 00000000..21562787
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/appearance/rounded/main.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Small roundness: </span>
+        <knumeric :rounded="'small'" :style="{ width: '170px' }" />
+      </span>
+      <span class="wrapper">
+        <span>Medium roundness: </span>
+        <knumeric :rounded="'medium'" :style="{ width: '170px' }" />
+      </span>
+      <span class="wrapper">
+        <span>Large roundness: </span>
+        <knumeric :rounded="'large'" :style="{ width: '170px' }" />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Full roundness: </span>
+        <knumeric :rounded="'full'" :style="{ width: '170px' }" />
+      </span>
+      <span class="wrapper">
+        <span>Custom roundness: </span>
+        <knumeric
+          :rounded="null"
+          :class="'custom-numerictextbox'"
+          :style="{ width: '170px' }"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { NumericTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    knumeric: NumericTextBox,
+  },
+};
+</script>
+
+<style>
+.custom-numerictextbox {
+  border-bottom-right-radius: 15px;
+  border-top-left-radius: 15px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/inputs/numerictextbox/appearance/size/main.js b/vue-options-api-demos/inputs/numerictextbox/appearance/size/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/appearance/size/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/numerictextbox/appearance/size/main.vue b/vue-options-api-demos/inputs/numerictextbox/appearance/size/main.vue
new file mode 100644
index 00000000..58cecfca
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/appearance/size/main.vue
@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Small size: </span>
+        <knumeric :size="'small'" :style="{ width: '170px' }" />
+      </span>
+      <span class="wrapper">
+        <span>Medium size: </span>
+        <knumeric :size="'medium'" :style="{ width: '170px' }" />
+      </span>
+      <span class="wrapper">
+        <span>Large size: </span>
+        <knumeric :size="'large'" :style="{ width: '170px' }" />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Custom size: </span>
+        <knumeric
+          :size="null"
+          :class="'custom-numerictextbox'"
+          :style="{ width: '170px' }"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { NumericTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    knumeric: NumericTextBox,
+  },
+};
+</script>
+
+<style>
+.custom-numerictextbox input {
+  line-height: 2;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/inputs/numerictextbox/basic/main.js b/vue-options-api-demos/inputs/numerictextbox/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/numerictextbox/basic/main.vue b/vue-options-api-demos/inputs/numerictextbox/basic/main.vue
new file mode 100644
index 00000000..3e22cb6f
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/basic/main.vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <div class="col-xs-12 col-md-6 example-col">
+      <label>
+        <NumericTextBox
+          :style="{ width: '230px' }"
+          :placeholder="'please enter value'"
+          v-model="value"
+        >
+        </NumericTextBox>
+        Kilometers
+      </label>
+    </div>
+    <div class="col-xs-12 col-md-6 example-col">
+      <label>
+        <NumericTextBox
+          :style="{ width: '230px' }"
+          :placeholder="'please enter value'"
+          :icon-name="'gear'"
+          :value="computedValue"
+          @change="ChangeMiles"
+        >
+        </NumericTextBox>
+        Miles
+      </label>
+    </div>
+  </div>
+</template>
+<script>
+import { NumericTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    NumericTextBox,
+  },
+  computed: {
+    computedValue: function () {
+      return this.value == null ? null : this.value / 1.609344;
+    },
+  },
+  data: function () {
+    return {
+      value: null,
+    };
+  },
+  methods: {
+    ChangeMiles(e) {
+      this.value = e.value !== null ? e.value * 1.609344 : null;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/numerictextbox/custom-parse-format/main.js b/vue-options-api-demos/inputs/numerictextbox/custom-parse-format/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/custom-parse-format/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/numerictextbox/custom-parse-format/main.vue b/vue-options-api-demos/inputs/numerictextbox/custom-parse-format/main.vue
new file mode 100644
index 00000000..2f33c893
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/custom-parse-format/main.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="example-wrapper row">
+                <div class="col-xs-12 col-sm-12 example-col">
+                    <label>
+                        <custom-provider-hex :locale="'en'">
+                            <numerictextbox :style="{ width: '230px' }" v-model="value">
+                            </numerictextbox>
+                             HEX
+                        </custom-provider-hex>
+                    </label>
+                </div>
+                <div class="col-xs-12 col-sm-12 example-col">
+                    <label>
+                        <numerictextbox :style="{ width: '230px' }" :format="'n0'" v-model="value"></numerictextbox>
+                        DEC
+                    </label>
+                </div>
+            </div>
+</template>
+<script>
+import { NumericTextBox } from '@progress/kendo-vue-inputs';
+import { IntlProvider } from '@progress/kendo-vue-intl'
+
+let CustomProviderHEX = {
+        ...IntlProvider,
+        methods: {
+            ...IntlProvider.methods,
+            getChildContext() {
+                const childContext = {
+                    kendoIntlService: this.getIntlService()
+                };
+                childContext.kendoIntlService.formatNumber = function (dec) {
+                    return (dec !== null) ? Math.floor(dec).toString(16) : '';
+                };
+                childContext.kendoIntlService.parseNumber = function (hex) {
+                    return parseInt(hex, 16);
+                };
+                return childContext;
+            }
+    }
+};
+
+export default {
+    components: {
+        'numerictextbox': NumericTextBox,
+        'custom-provider-hex': CustomProviderHEX
+    },
+    data: function(){
+        return {
+            value: 11256099
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/numerictextbox/formats/main.js b/vue-options-api-demos/inputs/numerictextbox/formats/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/formats/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/numerictextbox/formats/main.vue b/vue-options-api-demos/inputs/numerictextbox/formats/main.vue
new file mode 100644
index 00000000..0c206e83
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/formats/main.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+        <h6>Decimal</h6>
+        <numerictextbox :style="{ width: '230px' }"
+            :format="'n2'"
+            :default-value="value"
+        ></numerictextbox>
+        <h6>Percentage</h6>
+        <numerictextbox :style="{ width: '230px' }"
+            :format="'p'"
+            :default-value="percentage"
+            :min="0"
+            :max="1"
+            :step="0.1"
+        ></numerictextbox>
+            <h6>Currency</h6>
+        <numerictextbox :style="{ width: '230px' }"
+            :default-value="value"
+            :format="'c2'"
+            :min="0"
+        ></numerictextbox>
+        <h6>Currency with format options</h6>
+        <numerictextbox :style="{ width: '230px' }"
+            :default-value="value"
+            :min="0"
+            :format="formatOptions"
+        ></numerictextbox>
+    </div>
+</template>
+<script>
+import { NumericTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        'numerictextbox': NumericTextBox
+    },
+     data: function(){
+        return {
+            value: 5,
+            percentage: 0.7,
+            formatOptions: {
+                style: 'currency',
+                currency: 'EUR',
+                currencyDisplay: 'name'
+            }
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/numerictextbox/forms/basic/main.js b/vue-options-api-demos/inputs/numerictextbox/forms/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/forms/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/numerictextbox/forms/basic/main.vue b/vue-options-api-demos/inputs/numerictextbox/forms/basic/main.vue
new file mode 100644
index 00000000..ace2740b
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/forms/basic/main.vue
@@ -0,0 +1,72 @@
+<template>
+    <div class="row example-wrapper">
+       <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+           <div class="card">
+               <div class="card-block">
+                   <form class="k-form" @submit="handleSubmit">
+                       <fieldset>
+                           <legend>Please fill in the fields:</legend>
+                           <div class="mb-3">
+                               <k-input 
+                                   :name="'firstName'"
+                                   :label="'First Name'"
+                                   :pattern="'[A-Za-z]+'"
+                                   :min-length="2"
+                                   :required="true"
+                               ></k-input>
+                           </div>
+                           <div class="mb-3">
+                               <k-input
+                                   :name="'lastName'"
+                                   :label="'Last Name'"
+                                   :pattern="'[A-Za-z]+'"
+                                   :min-length="2"
+                                   :required="true"
+                               ></k-input>
+                           </div>
+                           <div>
+                               <numerictextbox 
+                                   :name="'age'"
+                                   :label="'Age'"
+                                   :required="true"
+                               ></numerictextbox>
+                           </div>
+                       </fieldset>
+                       <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                   </form>
+               </div>
+           </div>
+       </div>
+       <div v-if="success"
+               class="alert alert-success"
+               :style="{ position: 'absolute' }"
+           >
+               Form submitted!
+       </div>
+   </div>
+</template>
+<script>
+import { NumericTextBox, Input } from '@progress/kendo-vue-inputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+   components: {
+       'numerictextbox': NumericTextBox,
+       'k-input': Input,
+      'kbutton': Button
+   },
+   data: function(){
+       return {
+         success: false
+       }
+   },
+   methods: {
+       handleSubmit(event) {
+           event.preventDefault();
+           this.success = true;
+           setTimeout(() => { this.success= false; }, 3000);
+       }
+   }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/numerictextbox/forms/custom-message/main.js b/vue-options-api-demos/inputs/numerictextbox/forms/custom-message/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/forms/custom-message/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/numerictextbox/forms/custom-message/main.vue b/vue-options-api-demos/inputs/numerictextbox/forms/custom-message/main.vue
new file mode 100644
index 00000000..ab5f5608
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/forms/custom-message/main.vue
@@ -0,0 +1,78 @@
+<template>
+      <div class="row example-wrapper">
+        <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+            <div class="card">
+                <div class="card-block">
+                    <form class="k-form" @submit="handleSubmit">
+                        <fieldset>
+                            <legend>Please fill in the fields:</legend>
+                            <div class="mb-3">
+                                <k-input 
+                                    :name="'firstName'"
+                                    :label="'First Name'"
+                                    :pattern="'[A-Za-z]+'"
+                                    :min-length="2"
+                                    :required="true"
+                                    :validation-message="firstNameValidationMessage"
+                                ></k-input>
+                            </div>
+                            <div class="mb-3">
+                                <k-input 
+                                    :name="'lastName'"
+                                    :label="'Last Name'"
+                                    :pattern="'[A-Za-z]+'"
+                                    :min-length="2"
+                                    :required="true"
+                                    :validation-message="lastNameValidationMessage"
+                                ></k-input>
+                            </div>
+                            <div>
+                                <numerictextbox 
+                                    :name="'age'"
+                                    :label="'Age'"
+                                    :required="true"
+                                    :validation-message="ageValidationMessage"
+                                ></numerictextbox>
+                            </div>
+                        </fieldset>
+                        <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                    </form>
+                </div>
+            </div>
+        </div>
+        <div v-if="success"
+                class="alert alert-success"
+                :style="{ position: 'absolute' }"
+            >
+                Form submitted!
+        </div>
+    </div>
+</template>
+<script>
+import { NumericTextBox, Input } from '@progress/kendo-vue-inputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+   components: {
+       'numerictextbox': NumericTextBox,
+       'k-input': Input,
+      'kbutton': Button
+   },
+  data: function(){
+        return {
+          firstNameValidationMessage: "Please enter your first name!",
+          lastNameValidationMessage: "Please enter your last name!",
+          ageValidationMessage: "Please enter your age!",
+          success: false
+        }
+    },
+    methods: {
+        handleSubmit(event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(() => { this.success= false; }, 3000);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/numerictextbox/forms/disable-styles/main.js b/vue-options-api-demos/inputs/numerictextbox/forms/disable-styles/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/forms/disable-styles/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/numerictextbox/forms/disable-styles/main.vue b/vue-options-api-demos/inputs/numerictextbox/forms/disable-styles/main.vue
new file mode 100644
index 00000000..b0b3e8cf
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/forms/disable-styles/main.vue
@@ -0,0 +1,81 @@
+<template>
+      <div class="row example-wrapper">
+        <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+            <div class="card">
+                <div class="card-block">
+                    <form class="k-form" @submit="handleSubmit">
+                        <fieldset>
+                            <legend>Please fill in the fields:</legend>
+                            <div class="mb-3">
+                                <k-input 
+                                    :validity-styles="false"
+                                    :name="'firstName'"
+                                    :label="'First Name'"
+                                    :pattern="'[A-Za-z]+'"
+                                    :min-length="2"
+                                    :required="true"
+                                    :validation-message="firstNameValidationMessage"
+                                ></k-input>
+                            </div>
+                            <div class="mb-3">
+                                <k-input 
+                                    :validity-styles="false"
+                                    :name="'lastName'"
+                                    :label="'Last Name'"
+                                    :pattern="'[A-Za-z]+'"
+                                    :min-length="2"
+                                    :required="true"
+                                    :validation-message="lastNameValidationMessage"
+                                ></k-input>
+                            </div>
+                            <div>
+                                <numerictextbox 
+                                    :validity-styles="false"
+                                    :name="'age'"
+                                    :label="'Age'"
+                                    :required="true"
+                                    :validationMessage="ageValidationMessage"
+                                ></numerictextbox>
+                            </div>
+                        </fieldset>
+                        <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                    </form>
+                </div>
+            </div>
+        </div>
+        <div v-if="success"
+                class="alert alert-success"
+                :style="{ position: 'absolute' }"
+            >
+                Form submitted!
+        </div>
+    </div>
+</template>
+<script>
+import { NumericTextBox, Input } from '@progress/kendo-vue-inputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+   components: {
+       'numerictextbox': NumericTextBox,
+       'k-input': Input,
+      'kbutton': Button
+   },
+  data: function(){
+        return {
+          firstNameValidationMessage: "Please enter your first name!",
+          lastNameValidationMessage: "Please enter your first name!",
+          ageValidationMessage: "Please enter your age!",
+          success: false
+        }
+    },
+    methods: {
+        handleSubmit(event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(() => { this.success= false; }, 3000);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/numerictextbox/forms/override/main.js b/vue-options-api-demos/inputs/numerictextbox/forms/override/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/forms/override/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/numerictextbox/forms/override/main.vue b/vue-options-api-demos/inputs/numerictextbox/forms/override/main.vue
new file mode 100644
index 00000000..9656b17a
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/forms/override/main.vue
@@ -0,0 +1,91 @@
+<template>
+     <div class="row example-wrapper">
+        <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
+            <div class="card">
+                <div class="card-block">
+                    <form class="k-form" @submit="handleSubmit">
+                        <fieldset>
+                            <legend>Please fill in the fields:</legend>
+                            <div class="mb-3">
+                                <k-input 
+                                    v-model="firstName"
+                                    :name="'firstName'"
+                                    :label="'First Name'"
+                                    :pattern="'[A-Za-z]+'"
+                                    :min-length="2"
+                                    :required="true"
+                                ></k-input>
+                            </div>
+                            <div class="mb-3">
+                                <k-input 
+                                    v-model="lastName"
+                                    :name="'lastName'"
+                                    :label="'Last Name'"
+                                    :pattern="'[A-Za-z]+'"
+                                    :min-length="2"
+                                    :required="true"
+                                ></k-input>
+                            </div>
+                            <div>
+                                <numerictextbox 
+                                    v-model="age"
+                                    :name="'age'"
+                                    :label="'Age'"
+                                    :required="true"
+                                    :valid="validAge"
+                                    :validationMessage="computedValidationMessage"
+                                ></numerictextbox>
+                            </div>
+                        </fieldset>
+                        <kbutton type="submit" :theme-color="'primary'">Search</kbutton>
+                    </form>
+                </div>
+            </div>
+        </div>
+        <div v-if="success"
+                class="alert alert-success"
+                :style="{ position: 'absolute' }"
+            >
+                Form submitted!
+        </div>
+    </div>
+</template>
+<script>
+import { NumericTextBox, Input } from '@progress/kendo-vue-inputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+   components: {
+       'numerictextbox': NumericTextBox,
+       'k-input': Input,
+      'kbutton': Button
+   },
+   data: function(){
+        return {
+            firstName: '',
+            lastName: '',
+            age: null,
+            success: false,
+            ageValidationMessage: "You must be over 18 years old!"
+        }
+    },
+    computed: {
+        validAge: function (){
+            return this.age >= 18;
+        },
+        computedValidationMessage: function (){
+            return this.age !== null
+            ? this.ageValidationMessage
+            : 'Please enter your age!'
+        }
+    },
+    methods: {
+        handleSubmit(event) {
+            event.preventDefault();
+            this.success = true;
+            setTimeout(() => { this.success= false; }, 3000);
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/numerictextbox/input-mode/main.js b/vue-options-api-demos/inputs/numerictextbox/input-mode/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/input-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/numerictextbox/input-mode/main.vue b/vue-options-api-demos/inputs/numerictextbox/input-mode/main.vue
new file mode 100644
index 00000000..0da4efe5
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/input-mode/main.vue
@@ -0,0 +1,52 @@
+<template>
+    <div class="k-d-grid k-grid-cols-sm-1 k-grid-cols-md-2 k-gap-4 k-max-w-fit">
+        <div class="k-col-span-1">
+            <div>inputmode=numeric</div>
+            <numerictextbox
+                :format="'n0'"
+                :default-value="value"
+                :input-attributes="{ inputMode: 'numeric' }"
+                :input-prefix="'prefix'"
+                :style="{ width: '300px' }"
+            >
+                <template v-slot:prefix>
+                    <svgicon :icon="mapMarkerTargetIcon" />
+                </template>
+            </numerictextbox>
+        </div>
+        <div class="k-col-span-1">
+            <div>inputmode=decimal</div>
+            <numerictextbox
+                :format="'n4'"
+                :default-value="value2"
+                :input-attributes="{ inputMode: 'decimal' }"
+                :input-prefix="'prefix'"
+                :style="{ width: '300px' }"
+            >
+                <template v-slot:prefix>
+                    <svgicon :icon="mapMarkerTargetIcon" />
+                </template>
+            </numerictextbox>
+        </div>
+    </div>
+</template>
+<script>
+import { NumericTextBox } from '@progress/kendo-vue-inputs';
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { mapMarkerTargetIcon } from "@progress/kendo-svg-icons";
+
+export default {
+    components: {
+        'numerictextbox': NumericTextBox,
+        'svgicon': SvgIcon,
+    },
+    data() {
+        return {
+            value: 42,
+            value2: 42.6977,
+            mapMarkerTargetIcon
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/numerictextbox/keyboard/main.js b/vue-options-api-demos/inputs/numerictextbox/keyboard/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/keyboard/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/numerictextbox/keyboard/main.vue b/vue-options-api-demos/inputs/numerictextbox/keyboard/main.vue
new file mode 100644
index 00000000..26de86a5
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/keyboard/main.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>
+        <numerictextbox :style="{ width: '230px' }"
+            :default-value="5"
+        >
+        </numerictextbox> 
+    </div>
+</template>
+<script>
+import { NumericTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        'numerictextbox': NumericTextBox
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/numerictextbox/predefined-step/main.js b/vue-options-api-demos/inputs/numerictextbox/predefined-step/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/predefined-step/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/numerictextbox/predefined-step/main.vue b/vue-options-api-demos/inputs/numerictextbox/predefined-step/main.vue
new file mode 100644
index 00000000..b54813bb
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/predefined-step/main.vue
@@ -0,0 +1,19 @@
+<template>
+ <div>
+    <numerictextbox :style="{ width: '230px' }"
+        :default-value="5"
+        :step="3"
+    >
+    </numerictextbox> 
+</div>
+</template>
+<script>
+import { NumericTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        'numerictextbox': NumericTextBox
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/numerictextbox/spin-buttons/main.js b/vue-options-api-demos/inputs/numerictextbox/spin-buttons/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/spin-buttons/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/numerictextbox/spin-buttons/main.vue b/vue-options-api-demos/inputs/numerictextbox/spin-buttons/main.vue
new file mode 100644
index 00000000..e943f397
--- /dev/null
+++ b/vue-options-api-demos/inputs/numerictextbox/spin-buttons/main.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+        <numerictextbox :style="{ width: '230px' }"
+            :default-value="5"
+            :spinners="false"
+            :step="2"
+        >
+        </numerictextbox> 
+    </div>
+</template>
+<script>
+import { NumericTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        'numerictextbox': NumericTextBox
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/radiobutton/appearance/main.js b/vue-options-api-demos/inputs/radiobutton/appearance/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/radiobutton/appearance/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/radiobutton/appearance/main.vue b/vue-options-api-demos/inputs/radiobutton/appearance/main.vue
new file mode 100644
index 00000000..23d017ac
--- /dev/null
+++ b/vue-options-api-demos/inputs/radiobutton/appearance/main.vue
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Small size:</span>
+        <kradiobutton :size="'small'" :checked="true" />
+      </span>
+      <span class="wrapper">
+        <span>Medium size:</span>
+        <kradiobutton :size="'medium'" :checked="true" />
+      </span>
+      <span class="wrapper">
+        <span>Large size:</span>
+        <kradiobutton :size="'large'" :checked="true" />
+      </span>
+      <span class="wrapper">
+        <span>Custom size:</span>
+        <kradiobutton :size="null" :class="'custom-checkbox'" :checked="true" />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { RadioButton } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    kradiobutton: RadioButton,
+  },
+};
+</script>
+
+<style>
+.custom-checkbox input {
+  width: 30px;
+  height: 30px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+</style>
diff --git a/vue-options-api-demos/inputs/radiobutton/disabled/main.js b/vue-options-api-demos/inputs/radiobutton/disabled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/radiobutton/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/radiobutton/disabled/main.vue b/vue-options-api-demos/inputs/radiobutton/disabled/main.vue
new file mode 100644
index 00000000..b7ce62d7
--- /dev/null
+++ b/vue-options-api-demos/inputs/radiobutton/disabled/main.vue
@@ -0,0 +1,25 @@
+<template>
+    <div>
+        <radiobutton
+            :name="'group1'"
+            :checked="true"
+            :disabled="true"
+            :label="'Disabled checked radio'"
+        />
+        <radiobutton
+            :name="'group1'"
+            :disabled="true"
+            :label="'Disabled unchecked radio'"
+        />
+    </div>
+</template>
+<script>
+import { RadioButton } from "@progress/kendo-vue-inputs";
+
+export default {
+    components: {
+        radiobutton: RadioButton,
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/inputs/radiobutton/labels/custom-labels/main.js b/vue-options-api-demos/inputs/radiobutton/labels/custom-labels/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/radiobutton/labels/custom-labels/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/radiobutton/labels/custom-labels/main.vue b/vue-options-api-demos/inputs/radiobutton/labels/custom-labels/main.vue
new file mode 100644
index 00000000..6e3c9574
--- /dev/null
+++ b/vue-options-api-demos/inputs/radiobutton/labels/custom-labels/main.vue
@@ -0,0 +1,50 @@
+<template>
+    <div>
+      <radiobutton
+        :name="'group1'"
+        :value="'default label'"
+        :checked="true"
+        :label-render="'myTemplate'">
+            <template v-slot:myTemplate>
+                  <span>
+                     Right-to-left support
+                  <strong
+                    :style="{
+                      color: 'green'
+                    }"
+                  >
+                    on
+                  </strong>
+              </span>
+          </template>
+      </radiobutton>
+      <radiobutton
+        :label="'RadioButton label before'"
+        :name="'group1'"
+        :value="'label before'"
+        :label-render="'myTemplate'">
+            <template v-slot:myTemplate>
+                  <span>
+                     Right-to-left support
+                  <strong
+                    :style="{
+                      color: 'red'
+                    }"
+                  >
+                    off
+                  </strong>
+              </span>
+          </template>
+      </radiobutton>
+    </div>
+</template>
+<script>
+import { RadioButton } from "@progress/kendo-vue-inputs";
+
+export default {
+    components: {
+        radiobutton: RadioButton,
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/inputs/radiobutton/labels/setting-up/main.js b/vue-options-api-demos/inputs/radiobutton/labels/setting-up/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/radiobutton/labels/setting-up/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/radiobutton/labels/setting-up/main.vue b/vue-options-api-demos/inputs/radiobutton/labels/setting-up/main.vue
new file mode 100644
index 00000000..36f5957e
--- /dev/null
+++ b/vue-options-api-demos/inputs/radiobutton/labels/setting-up/main.vue
@@ -0,0 +1,26 @@
+<template>
+    <div>
+      <radiobutton
+        :label="'RadioButton label'"
+        :name="'group1'"
+        :value="'default label'"
+        :checked="true"
+      />
+      <radiobutton
+        :label="'RadioButton label before'"
+        :label-placement="'before'"
+        :name="'group1'"
+        :value="'label before'"
+      />
+    </div>
+</template>
+<script>
+import { RadioButton } from "@progress/kendo-vue-inputs";
+
+export default {
+    components: {
+        radiobutton: RadioButton,
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/inputs/radiobutton/overview/main.js b/vue-options-api-demos/inputs/radiobutton/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/radiobutton/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/radiobutton/overview/main.vue b/vue-options-api-demos/inputs/radiobutton/overview/main.vue
new file mode 100644
index 00000000..49e5c5e9
--- /dev/null
+++ b/vue-options-api-demos/inputs/radiobutton/overview/main.vue
@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <radiobutton
+            :name="'group1'"
+            :value="'first'"
+            :checked="selectedValue==='first'"
+            @change="handleChange"
+            :label="'First'"
+        />
+        <radiobutton
+            :name="'group1'"
+            :value="'second'"
+            :checked="selectedValue==='second'"
+            @change="handleChange"
+            :label="'Second'"
+        />
+        <radiobutton
+            :name="'group1'"
+            :value="'third'"
+            :checked="selectedValue==='third'"
+            @change="handleChange"
+            :label="'Third'"
+        />
+    </div>
+</template>
+<script>
+import { RadioButton } from "@progress/kendo-vue-inputs";
+
+export default {
+    components: {
+        radiobutton: RadioButton,
+    },
+    data: function(){
+        return {
+            selectedValue: "first"
+        }
+    },
+    methods: {
+        handleChange: function(e){
+            this.selectedValue = e.value;
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/inputs/radiogroup/controlled/main.js b/vue-options-api-demos/inputs/radiogroup/controlled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/radiogroup/controlled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/radiogroup/controlled/main.vue b/vue-options-api-demos/inputs/radiogroup/controlled/main.vue
new file mode 100644
index 00000000..a1f237e9
--- /dev/null
+++ b/vue-options-api-demos/inputs/radiogroup/controlled/main.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="row">
+    <div class="col-md-5">
+      <span> Control with <i>v-model</i>: </span>
+      <radiogroup :data-items="dataItems"
+          :disabled="disabled"
+          v-model="checked"
+          :layout="'horizontal'" />
+      <span> Control with <i>value</i> and <i>change</i>: </span>
+      <radiogroup :data-items="dataItems"
+          :disabled="disabled"
+          :value="checked"
+          @change="handleChange" />
+    </div>
+    <div class="col-md-4">
+  
+      <span>
+        Current checked value is <strong>{{checked}}</strong>
+      </span>
+      <kbutton @click="handleClick">
+        Toggle disabled state
+      </kbutton>
+      </div>
+    </div>
+</template>
+<script>
+import { RadioGroup } from '@progress/kendo-vue-inputs';
+import { Button } from '@progress/kendo-vue-buttons'
+
+export default {
+    components: {
+        radiogroup: RadioGroup,
+        kbutton: Button
+    },
+    data() {
+      return {
+        checked: 'female',
+        disabled: false,
+        dataItems: [
+          {
+            label: "Female",
+            value: "female",
+          },
+          {
+            label: "Male",
+            value: "male",
+          },
+          {
+            label: "Other",
+            value: "other",
+          },
+        ]
+      };
+    },
+    methods: {
+      handleClick() {
+        this.disabled = !this.disabled;
+      },
+      handleChange (e) {
+        this.checked = e.value;
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/radiogroup/default-state/main.js b/vue-options-api-demos/inputs/radiogroup/default-state/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/radiogroup/default-state/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/radiogroup/default-state/main.vue b/vue-options-api-demos/inputs/radiogroup/default-state/main.vue
new file mode 100644
index 00000000..4f7529c8
--- /dev/null
+++ b/vue-options-api-demos/inputs/radiogroup/default-state/main.vue
@@ -0,0 +1,35 @@
+<template>
+      <div>
+        <radiogroup 
+        :default-value="dataItems[2].value" 
+        :data-items="dataItems" />
+    </div>
+</template>
+<script>
+import { RadioGroup } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        radiogroup: RadioGroup
+    },
+    data() {
+        return {
+            dataItems: [
+            {
+                label: "Female",
+                value: "female",
+            },
+            {
+                label: "Male",
+                value: "male",
+            },
+            {
+                label: "Other",
+                value: "other",
+            },
+            ]
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/radiogroup/forms/FormContent.vue b/vue-options-api-demos/inputs/radiogroup/forms/FormContent.vue
new file mode 100644
index 00000000..fc044241
--- /dev/null
+++ b/vue-options-api-demos/inputs/radiogroup/forms/FormContent.vue
@@ -0,0 +1,131 @@
+<template>
+    <form-element :style="{ maxWidth: '400px' }">
+          <fieldset class="k-form-fieldset">
+            <legend class="k-form-legend">
+              BOOK YOUR DREAM VACATION TODAY
+            </legend>
+             <field
+                :id="'firstName'"
+                :name="'firstName'"
+                :label="'First Name'"
+                :component="'myTemplate'"
+                :validator="firstNameValidator"
+              >
+               <template v-slot:myTemplate="{props}">
+                  <forminput
+                    v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  />
+              </template>
+              </field>
+               <field
+                :id="'lastName'"
+                :name="'lastName'"
+                :label="'Last Name'"
+                :component="'myTemplate'"
+                :validator="lastNameValidator"
+              >
+               <template v-slot:myTemplate="{props}">            
+                  <forminput
+                    v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  />
+              </template>
+              </field>
+                <field
+                :id="'confirmation'"
+                :name="'confirmation'"
+                :label="'Type of reservation confirmation'"
+                :hint="'Hint: Choose a way to receive a confirmation'"
+                :data-items="confirmationData"
+                :layout="'horizontal'"
+                :component="'myTemplate'"
+                :validator="radioGroupValidator"
+              >
+               <template v-slot:myTemplate="{props}">     
+                  <formradiogroup
+                    v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                  />
+              </template>
+              </field>
+            <div class="k-form-buttons">
+              <kbutton
+                :theme-color="'primary'"
+                :type="'submit'"
+                :disabled="!kendoForm.allowSubmit"
+              >
+                Submit
+              </kbutton>
+                <kbutton
+                @click="clear">Clear
+              </kbutton>
+            </div>
+          </fieldset>
+        </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import FormRadioGroup from "./FormRadioGroup.vue";
+import FormInput from "./FormInput.vue";
+import { Button } from "@progress/kendo-vue-buttons";
+
+export default {
+    components: {
+      field: Field,
+      'form-element': FormElement,
+      forminput: FormInput,
+      formradiogroup: FormRadioGroup,
+      kbutton: Button
+    },
+    data() {
+      return {
+        confirmationData: [
+          {
+            label: "Phone Call",
+            value: "phone",
+          },
+          {
+            label: "Via Email",
+            value: "email",
+          },
+        ]
+      };
+    },
+    inject: {
+      kendoForm: { default: {} },  
+    },
+    methods: {
+      firstNameValidator (value){
+        return !value
+          ? "First Name is required"
+          : value.length < 7
+          ? "First Name should be at least 7 characters long."
+          : "";
+      },
+      lastNameValidator (value) {
+        return  !value
+          ? "Last Name is required"
+          : value.length < 7
+          ? "Last Name should be at least 7 characters long."
+          : "";
+      },
+      radioGroupValidator (value) {
+        return !value ? "Type of Confirmation is required" : "";
+      },
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      },
+      clear(){
+        this.kendoForm.onFormReset();
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/radiogroup/forms/FormInput.vue b/vue-options-api-demos/inputs/radiogroup/forms/FormInput.vue
new file mode 100644
index 00000000..5070f7e3
--- /dev/null
+++ b/vue-options-api-demos/inputs/radiogroup/forms/FormInput.vue
@@ -0,0 +1,83 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :disabled="disabled" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+             <kinput :style="{ width: '230px' }" 
+                :value="value"
+                :valid="valid"
+                :id="id"
+                :placeholder="placeholder"
+                :disabled="disabled"
+                @input="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint >{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        optional: Boolean,
+        disabled: Boolean,
+        placeholder: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      kinput: Input
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/inputs/radiogroup/forms/FormRadioGroup.vue b/vue-options-api-demos/inputs/radiogroup/forms/FormRadioGroup.vue
new file mode 100644
index 00000000..fc5f0ccd
--- /dev/null
+++ b/vue-options-api-demos/inputs/radiogroup/forms/FormRadioGroup.vue
@@ -0,0 +1,94 @@
+<template>
+    <fieldwrapper>
+        <klabel
+            :id="labelId"
+            :editor-id="id"
+            :editor-valid="valid"
+            :editor-disabled="disabled"
+        >
+            {{label}}
+        </klabel>
+        <radiogroup
+            :aria-describedby="describedBy"
+            :label="label"
+            :valid="valid"
+            :value="value"
+            :layout="layout"
+            :data-items="dataItems"
+            :id="id"
+            :checked="value"
+            @change="handleChange"
+            @blur="handleBlur"
+            @focus="handleFocus"         
+        />
+        <error v-if="showValidationMessage">
+            {{validationMessage}}
+        </error>
+        <hint >{{hint}}</hint>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { RadioGroup } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+         touched: Boolean,
+         label: String,
+         validationMessage: String,
+         hint: String,
+         id: String,
+         valid: Boolean,
+         disabled: Boolean,
+         layout: String,
+         dataItems: Array,
+         value: {
+             type: String
+         }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      radiogroup: RadioGroup
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        },
+        describedBy(){
+            return  `${this.hindId} ${this.errorId}`
+        },
+        labelId(){
+            return this.label ? `${this.id}_label` : "";
+        }
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/inputs/radiogroup/forms/main.js b/vue-options-api-demos/inputs/radiogroup/forms/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/radiogroup/forms/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/radiogroup/forms/main.vue b/vue-options-api-demos/inputs/radiogroup/forms/main.vue
new file mode 100644
index 00000000..798b6d8d
--- /dev/null
+++ b/vue-options-api-demos/inputs/radiogroup/forms/main.vue
@@ -0,0 +1,23 @@
+<template>
+    <k-form
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/radiogroup/keyboard/main.js b/vue-options-api-demos/inputs/radiogroup/keyboard/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/radiogroup/keyboard/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/radiogroup/keyboard/main.vue b/vue-options-api-demos/inputs/radiogroup/keyboard/main.vue
new file mode 100644
index 00000000..2fe242df
--- /dev/null
+++ b/vue-options-api-demos/inputs/radiogroup/keyboard/main.vue
@@ -0,0 +1,36 @@
+<template>
+    <div>
+        <radiogroup ref="radioGroup" :data-items="dataItems" />
+    </div>
+</template>
+<script>
+import { RadioGroup } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        radiogroup: RadioGroup
+    },
+    mounted: function(){
+        this.$refs.radioGroup.focusElement()
+    },
+    data() {
+        return {
+            dataItems: [
+            {
+                label: "Female",
+                value: "female",
+            },
+            {
+                label: "Male",
+                value: "male",
+            },
+            {
+                label: "Other",
+                value: "other",
+            },
+            ]
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/radiogroup/layout/main.js b/vue-options-api-demos/inputs/radiogroup/layout/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/radiogroup/layout/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/radiogroup/layout/main.vue b/vue-options-api-demos/inputs/radiogroup/layout/main.vue
new file mode 100644
index 00000000..8f630e98
--- /dev/null
+++ b/vue-options-api-demos/inputs/radiogroup/layout/main.vue
@@ -0,0 +1,79 @@
+<template>
+  <div>
+     <p>Change the layout:</p>
+         <dropdownlist
+          :style="{ width: '230px' }" 
+            :data-items='layoutItems'
+            :text-field="'label'"
+            :data-item-key="'value'"
+            :value="layoutSelectorValue"
+            @change="handleChange"
+        >
+        </dropdownlist>
+      <hr />
+    <div class="col-md-8">
+      <radiogroup :data-items="tasks" :layout="layout" />
+    </div>
+   
+    </div>
+</template>
+<script>
+import { RadioGroup } from '@progress/kendo-vue-inputs';
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+    components: {
+      radiogroup: RadioGroup,
+      dropdownlist: DropDownList
+    },
+    data() {
+      return {
+        layoutItems: [
+          {
+            value: 'horizontal',
+            label: 'Horizontal'
+          },
+           {
+            value: 'vertical',
+            label: 'Vertical'
+          }
+        ],
+        layout: 'vertical',
+        layoutSelectorValue: {
+            value: 'vertical',
+            label: 'Vertical'
+        },
+        tasks: [
+          {
+            label: "To Do",
+            value: "to do",
+            className: "task red",
+          },
+          {
+            label: "In Progress",
+            value: "in progress",
+            className: "task orange",
+          },
+          {
+            label: "Ready for Test",
+            value: "ready for test",
+            className: "task blue",
+          },
+          {
+            label: "Done",
+            value: "done",
+            className: "task green",
+          },
+        ]
+      };
+    },
+    methods: {
+      handleChange (e) {
+        this.layout = e.value.value;
+        this.layoutSelectorValue = e.value;
+      }
+    }
+};
+
+</script>
+
diff --git a/vue-options-api-demos/inputs/radiogroup/overview/main.js b/vue-options-api-demos/inputs/radiogroup/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/radiogroup/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/radiogroup/overview/main.vue b/vue-options-api-demos/inputs/radiogroup/overview/main.vue
new file mode 100644
index 00000000..1ecbba2a
--- /dev/null
+++ b/vue-options-api-demos/inputs/radiogroup/overview/main.vue
@@ -0,0 +1,33 @@
+<template>
+    <div>
+        <radiogroup :data-items="dataItems" />
+    </div>
+</template>
+<script>
+import { RadioGroup } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        radiogroup: RadioGroup
+    },
+    data() {
+        return {
+            dataItems: [
+            {
+                label: "Female",
+                value: "female",
+            },
+            {
+                label: "Male",
+                value: "male",
+            },
+            {
+                label: "Other",
+                value: "other",
+            },
+            ]
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/rangeslider/controlled/main.js b/vue-options-api-demos/inputs/rangeslider/controlled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/rangeslider/controlled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/rangeslider/controlled/main.vue b/vue-options-api-demos/inputs/rangeslider/controlled/main.vue
new file mode 100644
index 00000000..5c240493
--- /dev/null
+++ b/vue-options-api-demos/inputs/rangeslider/controlled/main.vue
@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <slider :step="1" :min="1" :max="10" :value="value" @change="onChange">
+      <slider-label
+        :title="value.toString()"
+        :key="value"
+        @click="handleClick(value)"
+        :position="value"
+        v-for="value in [1, 3, 5, 6, 10]"
+      >
+        {{ value }}
+      </slider-label>
+    </slider>
+  </div>
+</template>
+<script>
+import { RangeSlider, SliderLabel } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    slider: RangeSlider,
+    'slider-label': SliderLabel,
+  },
+  data() {
+    return {
+      value: {
+        start: 3,
+        end: 8,
+      },
+    };
+  },
+  methods: {
+    onChange(event) {
+      this.value = event.value;
+    },
+    handleClick(value) {
+      this.value = value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/rangeslider/disabled/main.js b/vue-options-api-demos/inputs/rangeslider/disabled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/rangeslider/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/rangeslider/disabled/main.vue b/vue-options-api-demos/inputs/rangeslider/disabled/main.vue
new file mode 100644
index 00000000..cb90daab
--- /dev/null
+++ b/vue-options-api-demos/inputs/rangeslider/disabled/main.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <slider
+      :step="1"
+      :default-value="{ start: 3, end: 8 }"
+      :min="1"
+      :max="10"
+      :disabled="true"
+    >
+      <slider-label :position="1">1</slider-label>
+      <slider-label :position="3">3</slider-label>
+      <slider-label :position="5">5</slider-label>
+      <slider-label :position="7">7</slider-label>
+      <slider-label :position="10">10</slider-label>
+    </slider>
+  </div>
+</template>
+<script>
+import { RangeSlider, SliderLabel } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    slider: RangeSlider,
+    'slider-label': SliderLabel,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/rangeslider/events/Logger.vue b/vue-options-api-demos/inputs/rangeslider/events/Logger.vue
new file mode 100644
index 00000000..7d9e1695
--- /dev/null
+++ b/vue-options-api-demos/inputs/rangeslider/events/Logger.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="example-config">
+    <h5>{{ title }}</h5>
+    <ul class="event-log">
+      <li v-for="(event, idx) in events" :key="idx">
+        {{ events.length - idx }}. {{ event }}
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    events: Array,
+    title: String,
+  },
+};
+</script>
+
+<style scoped>
+.example-config {
+  margin: 0 0 20px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+  margin: 0;
+  padding: 0;
+  max-height: 100px;
+  overflow-y: auto;
+  list-style-type: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: white;
+}
+.event-log li {
+  margin: 0;
+  padding: 0.3em;
+  line-height: 1.2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+  margin-bottom: -1px;
+}
+</style>
diff --git a/vue-options-api-demos/inputs/rangeslider/events/main.js b/vue-options-api-demos/inputs/rangeslider/events/main.js
new file mode 100644
index 00000000..1f1c6c86
--- /dev/null
+++ b/vue-options-api-demos/inputs/rangeslider/events/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
+
diff --git a/vue-options-api-demos/inputs/rangeslider/events/main.vue b/vue-options-api-demos/inputs/rangeslider/events/main.vue
new file mode 100644
index 00000000..73dd6579
--- /dev/null
+++ b/vue-options-api-demos/inputs/rangeslider/events/main.vue
@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <slider
+      :step="1"
+      :default-value="{ start: 3, end: 8 }"
+      :min="1"
+      :max="10"
+      @change="onChange"
+    >
+      <slider-label :position="1">1</slider-label>
+      <slider-label :position="3">3</slider-label>
+      <slider-label :position="5">5</slider-label>
+      <slider-label :position="7">7</slider-label>
+      <slider-label :position="10">10</slider-label>
+    </slider>
+    <br />
+    <br />
+    <br />
+    <Logger :title="'Events list'" :events="eventsList" />
+  </div>
+</template>
+<script>
+import { RangeSlider, SliderLabel } from '@progress/kendo-vue-inputs';
+import Logger from './Logger.vue';
+
+export default {
+  components: {
+    slider: RangeSlider,
+    'slider-label': SliderLabel,
+    Logger,
+  },
+  computed: {
+    eventsList() {
+      return this.events;
+    },
+  },
+  data() {
+    return {
+      events: [],
+    };
+  },
+  methods: {
+    onChange(ev) {
+      this.events.unshift(
+        'Change event triggered. Start value:' +
+          ev.value.start.toFixed(2) +
+          '. End value: ' +
+          ev.value.end.toFixed(2) +
+          '.'
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/rangeslider/labels/main.js b/vue-options-api-demos/inputs/rangeslider/labels/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/rangeslider/labels/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/rangeslider/labels/main.vue b/vue-options-api-demos/inputs/rangeslider/labels/main.vue
new file mode 100644
index 00000000..e5b78833
--- /dev/null
+++ b/vue-options-api-demos/inputs/rangeslider/labels/main.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <slider :step="1" :default-value="{ start: 3, end: 8 }" :min="1" :max="10">
+      <slider-label :title="'Position 1'" :position="1">Day 1</slider-label>
+      <slider-label :title="'Position 3'" :position="3">Day 3</slider-label>
+      <slider-label :title="'Position 5'" :position="5">Day 5</slider-label>
+      <slider-label :title="'Position 7'" :position="7">Day 7</slider-label>
+      <slider-label :title="'Position 10'" :position="10">Day 10</slider-label>
+    </slider>
+  </div>
+</template>
+<script>
+import { RangeSlider, SliderLabel } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    slider: RangeSlider,
+    'slider-label': SliderLabel,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/rangeslider/orientation/main.js b/vue-options-api-demos/inputs/rangeslider/orientation/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/rangeslider/orientation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/rangeslider/orientation/main.vue b/vue-options-api-demos/inputs/rangeslider/orientation/main.vue
new file mode 100644
index 00000000..6ed22968
--- /dev/null
+++ b/vue-options-api-demos/inputs/rangeslider/orientation/main.vue
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <h6>Horizontal RangeSlider:</h6>
+    <slider :step="1" :default-value="{ start: 3, end: 8 }" :min="1" :max="10">
+      <slider-label :position="1">1</slider-label>
+      <slider-label :position="3">3</slider-label>
+      <slider-label :position="5">5</slider-label>
+      <slider-label :position="7">7</slider-label>
+      <slider-label :position="10">10</slider-label>
+    </slider>
+    <br />
+    <br />
+    <br />
+    <h6>Vertical RangeSlider:</h6>
+    <slider
+      :vertical="true"
+      :step="1"
+      :default-value="{ start: 3, end: 8 }"
+      :min="1"
+      :max="10"
+    >
+      <slider-label :position="1">1</slider-label>
+      <slider-label :position="3">3</slider-label>
+      <slider-label :position="5">5</slider-label>
+      <slider-label :position="7">7</slider-label>
+      <slider-label :position="10">10</slider-label>
+    </slider>
+  </div>
+</template>
+<script>
+import { RangeSlider, SliderLabel } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    slider: RangeSlider,
+    'slider-label': SliderLabel,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/rangeslider/overview/main.js b/vue-options-api-demos/inputs/rangeslider/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/rangeslider/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/rangeslider/overview/main.vue b/vue-options-api-demos/inputs/rangeslider/overview/main.vue
new file mode 100644
index 00000000..c0b73caf
--- /dev/null
+++ b/vue-options-api-demos/inputs/rangeslider/overview/main.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <slider :step="1" :default-value="{ start: 3, end: 8 }" :min="1" :max="10">
+      <slider-label :position="1">1</slider-label>
+      <slider-label :position="3">3</slider-label>
+      <slider-label :position="5">5</slider-label>
+      <slider-label :position="7">7</slider-label>
+      <slider-label :position="10">10</slider-label>
+    </slider>
+  </div>
+</template>
+<script>
+import { RangeSlider, SliderLabel } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    slider: RangeSlider,
+    'slider-label': SliderLabel,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/rating/basic/main.js b/vue-options-api-demos/inputs/rating/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/rating/basic/main.vue b/vue-options-api-demos/inputs/rating/basic/main.vue
new file mode 100644
index 00000000..ab7efb24
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/basic/main.vue
@@ -0,0 +1,13 @@
+<template>
+    <Rating />
+</template>
+
+<script>
+import { Rating } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        Rating,
+    },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/rating/controlled/main.js b/vue-options-api-demos/inputs/rating/controlled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/controlled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/rating/controlled/main.vue b/vue-options-api-demos/inputs/rating/controlled/main.vue
new file mode 100644
index 00000000..f6911540
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/controlled/main.vue
@@ -0,0 +1,23 @@
+<template>
+    <Rating :value="value" @change="handleValueChange" />
+</template>
+
+<script>
+import { Rating } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        Rating,
+    },
+    data: function(){
+        return {
+            value: 2
+        }
+    },
+    methods: {
+        handleValueChange (event) {
+            this.value = event.value;
+        }
+    }
+};
+</script>
diff --git a/vue-options-api-demos/inputs/rating/disabled/main.js b/vue-options-api-demos/inputs/rating/disabled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/rating/disabled/main.vue b/vue-options-api-demos/inputs/rating/disabled/main.vue
new file mode 100644
index 00000000..d296eed5
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/disabled/main.vue
@@ -0,0 +1,13 @@
+<template>
+    <Rating :disabled="true"/>
+</template>
+
+<script>
+import { Rating } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        Rating,
+    }
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/rating/form-support/FormContent.vue b/vue-options-api-demos/inputs/rating/form-support/FormContent.vue
new file mode 100644
index 00000000..297a8e9f
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/form-support/FormContent.vue
@@ -0,0 +1,120 @@
+<template>
+    <form-element :style="{ maxWidth: '650px' }">
+      <fieldset class="k-form-fieldset">
+        <legend class="k-form-legend">Please fill in the fields:</legend>
+        <div class="mb-3">
+          <field
+            :name="'firstName'"
+            :component="'myTemplate'"
+            :label="'First name'"
+          >
+            <template v-slot:myTemplate="{ props }">
+              <forminput
+                v-bind="props"
+                @change="props.onChange"
+                @blur="props.onBlur"
+                @focus="props.onFocus"
+              />
+            </template>
+          </field>
+        </div>
+        <div class="mb-3">
+          <field
+            :name="'lastName'"
+            :component="'myTemplate'"
+            :label="'Last name'"
+          >
+            <template v-slot:myTemplate="{ props }">
+              <forminput
+                v-bind="props"
+                @change="props.onChange"
+                @blur="props.onBlur"
+                @focus="props.onFocus"
+              />
+            </template>
+          </field>
+        </div>
+        <div class="mb-3">
+          <field
+            :name="'email'"
+            :type="'email'"
+            :component="'myTemplate'"
+            :label="'Email'"
+            :validator="emailValidator"
+          >
+            <template v-slot:myTemplate="{ props }">
+              <forminput
+                v-bind="props"
+                @change="props.onChange"
+                @blur="props.onBlur"
+                @focus="props.onFocus"
+              />
+            </template>
+          </field>
+        </div>
+        <div class="mb-3">
+          <legend class="'k-form-legend'">Please rate your experience:</legend>
+          <field
+            :name="'rating'"
+            :component="'myTemplate'"
+            :validator="ratingValidator"
+          >
+            <template v-slot:myTemplate="{ props }">
+                <FormRating
+                    v-bind="props"
+                    @change="props.onChange"
+                    @blur="props.onBlur"
+                    @focus="props.onFocus"
+                />
+            </template>
+          </field>
+        </div>
+      </fieldset>
+      <div class="k-form-buttons">
+        <kbutton type="submit" :disabled="!kendoForm.allowSubmit">
+          Submit
+        </kbutton>
+        <kbutton type="button" @click="clear">Clear </kbutton>
+      </div>
+    </form-element>
+  </template>
+  <script>
+  import { Field, FormElement } from "@progress/kendo-vue-form";
+  import { Button } from "@progress/kendo-vue-buttons";
+  import FormInput from "./FormInput.vue";
+  import FormRating from "./FormRating.vue";
+
+  const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+  const emailValidator = (value) =>
+    emailRegex.test(value) ? "" : "Please enter a valid email.";
+
+const ratingValidator = (value) =>
+    value ? "" : "Please rate your experience.";
+
+  export default {
+    components: {
+      field: Field,
+      "form-element": FormElement,
+      forminput: FormInput,
+      kbutton: Button,
+      FormRating,
+    },
+    inject: {
+      kendoForm: { default: {} },
+    },
+    data: function () {
+      return {
+        emailValidator: emailValidator,
+        ratingValidator: ratingValidator
+      };
+    },
+    methods: {
+      handleSubmit(dataItem) {
+        alert(JSON.stringify(dataItem, null, 2));
+      },
+      clear() {
+        this.kendoForm.onFormReset();
+      },
+    },
+  };
+  </script>
diff --git a/vue-options-api-demos/inputs/rating/form-support/FormInput.vue b/vue-options-api-demos/inputs/rating/form-support/FormInput.vue
new file mode 100644
index 00000000..b69c4a21
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/form-support/FormInput.vue
@@ -0,0 +1,85 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :disabled="disabled" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <kinput :style="{ width: '230px' }"
+                :valid="valid"
+                :id="id"
+                :value="value"
+                :disabled="disabled"
+                :placeholder="placeholder"
+                @input="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+
+export default {
+    props: {
+        optional: Boolean,
+        disabled: Boolean,
+        placeholder: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      kinput: Input
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/inputs/rating/form-support/FormRating.vue b/vue-options-api-demos/inputs/rating/form-support/FormRating.vue
new file mode 100644
index 00000000..0cd38b44
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/form-support/FormRating.vue
@@ -0,0 +1,92 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :disabled="disabled" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <Rating v-if="value === 0" :style="{ width: '230px' }"
+                :valid="valid"
+                :id="id"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <Rating v-else :style="{ width: '230px' }"
+                :valid="valid"
+                :id="id"
+                :value="value"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Rating } from "@progress/kendo-vue-inputs";
+
+export default {
+    props: {
+        optional: Boolean,
+        disabled: Boolean,
+        placeholder: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: Number,
+            default: 0
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      Rating
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleChange(e){
+            console.log('change', e);
+
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/inputs/rating/form-support/main.js b/vue-options-api-demos/inputs/rating/form-support/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/form-support/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/rating/form-support/main.vue b/vue-options-api-demos/inputs/rating/form-support/main.vue
new file mode 100644
index 00000000..cb5e3869
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/form-support/main.vue
@@ -0,0 +1,24 @@
+<template>
+    <k-form
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/rating/icon/main.js b/vue-options-api-demos/inputs/rating/icon/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/icon/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/rating/icon/main.vue b/vue-options-api-demos/inputs/rating/icon/main.vue
new file mode 100644
index 00000000..ba5ccf57
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/icon/main.vue
@@ -0,0 +1,23 @@
+<template>
+    <Rating
+        :defaultValue="2"
+        :svgIcon="heartIcon"
+        :svgIconOutline="heartIcon"
+    />
+</template>
+
+<script>
+import { Rating } from '@progress/kendo-vue-inputs';
+import { heartIcon } from "@progress/kendo-svg-icons";
+
+export default {
+    components: {
+        Rating,
+    },
+    data( ) {
+        return {
+            heartIcon: heartIcon
+        }
+    }
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/rating/item-customization/customItem.vue b/vue-options-api-demos/inputs/rating/item-customization/customItem.vue
new file mode 100644
index 00000000..f7f74352
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/item-customization/customItem.vue
@@ -0,0 +1,40 @@
+<template>
+    <div v-if="half"
+        class="k-rating-precision-complement"
+        :style="{ width: '12px', [props.dir === 'rtl' ? 'right' : 'left']: '50%'}"
+    >
+        <SvgIcon
+        :icon="heartIcon"
+        :class="{[`${heartIcon.name}-outline`]: heartIcon.name}"
+        />
+    </div>
+    <div v-if="half"
+        class="k-rating-precision-part"
+        :style="{ width: '12px' }"
+    >
+        <SvgIcon :icon="heartIcon" />
+    </div>
+    <div v-if="half"
+        :style="{ width: '24px', height: '24px', display: 'block' }"
+    />
+    <SvgIcon v-if="!half"
+        :icon="heartIcon"
+        :class="{[`${heartIcon.name}`]: heartIcon.name}"
+    />
+</template>
+
+<script>
+import { SvgIcon } from '@progress/kendo-vue-common';
+import { heartIcon } from '@progress/kendo-svg-icons';
+
+export default {
+    components: {
+        SvgIcon
+    },
+    data() {
+        return {
+            heartIcon: heartIcon
+        }
+    }
+};
+</script>
diff --git a/vue-options-api-demos/inputs/rating/item-customization/main.js b/vue-options-api-demos/inputs/rating/item-customization/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/item-customization/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/rating/item-customization/main.vue b/vue-options-api-demos/inputs/rating/item-customization/main.vue
new file mode 100644
index 00000000..2d541bb2
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/item-customization/main.vue
@@ -0,0 +1,20 @@
+<template>
+    <div>Custom item</div>
+    <Rating :defaultValue="2" :item="'customItem'">
+      <template v-slot:customItem="{ props }" >
+        <CustomItem v-bind="props"/>
+      </template>
+    </Rating>
+</template>
+
+<script>
+import { Rating } from '@progress/kendo-vue-inputs';
+import CustomItem from './customItem.vue';
+
+export default {
+    components: {
+        Rating,
+        CustomItem
+    }
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/rating/items/main.js b/vue-options-api-demos/inputs/rating/items/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/items/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/rating/items/main.vue b/vue-options-api-demos/inputs/rating/items/main.vue
new file mode 100644
index 00000000..9bcb86dd
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/items/main.vue
@@ -0,0 +1,13 @@
+<template>
+    <Rating :defaultValue="2" :max="15" />
+</template>
+
+<script>
+import { Rating } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        Rating,
+    },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/rating/label/main.js b/vue-options-api-demos/inputs/rating/label/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/label/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/rating/label/main.vue b/vue-options-api-demos/inputs/rating/label/main.vue
new file mode 100644
index 00000000..4ff31f2c
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/label/main.vue
@@ -0,0 +1,29 @@
+<template>
+    <Rating
+        :value="value"
+        :defaultValue="value"
+        :precision="'half'"
+        :label="value ? value + ' out of 5' : 'please select value'"
+        @change="handleValueChange"
+    />
+</template>
+
+<script>
+import { Rating } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        Rating,
+    },
+    data: function(){
+        return {
+            value: 2
+        }
+    },
+    methods: {
+        handleValueChange (event) {
+            this.value = event.value;
+        }
+    }
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/rating/navigation/main.js b/vue-options-api-demos/inputs/rating/navigation/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/navigation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/rating/navigation/main.vue b/vue-options-api-demos/inputs/rating/navigation/main.vue
new file mode 100644
index 00000000..f4950864
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/navigation/main.vue
@@ -0,0 +1,13 @@
+<template>
+    <Rating :defaultValue="1.5" :precision="'half'" />
+</template>
+
+<script>
+import { Rating } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        Rating,
+    },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/rating/precision/first-full/main.js b/vue-options-api-demos/inputs/rating/precision/first-full/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/precision/first-full/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/rating/precision/first-full/main.vue b/vue-options-api-demos/inputs/rating/precision/first-full/main.vue
new file mode 100644
index 00000000..991fb0d8
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/precision/first-full/main.vue
@@ -0,0 +1,20 @@
+<template>
+    <div :style="{ margin: '15px' }" >
+        <h4>Half Precision Mode First-item Full</h4>
+        <Rating
+            :min="1"
+            :max="3"
+            :precision="'half'"
+        />
+    </div>
+</template>
+
+<script>
+import { Rating } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        Rating,
+    },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/rating/precision/first-half/main.js b/vue-options-api-demos/inputs/rating/precision/first-half/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/precision/first-half/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/rating/precision/first-half/main.vue b/vue-options-api-demos/inputs/rating/precision/first-half/main.vue
new file mode 100644
index 00000000..beaa59e1
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/precision/first-half/main.vue
@@ -0,0 +1,20 @@
+<template>
+    <div :style="{ margin: '15px' }" >
+        <h4>Half Precision Mode First-item Half</h4>
+        <Rating
+            :min="0.5"
+            :max="3"
+            :precision="'half'"
+        />
+    </div>
+</template>
+
+<script>
+import { Rating } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        Rating,
+    },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/rating/precision/main.js b/vue-options-api-demos/inputs/rating/precision/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/precision/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/rating/precision/main.vue b/vue-options-api-demos/inputs/rating/precision/main.vue
new file mode 100644
index 00000000..8e165bc5
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/precision/main.vue
@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <div :style="{ margin: '15px' }" >
+            <h4>Item Precision Mode</h4>
+            <Rating :precision="'item'"/>
+        </div>
+        <div :style="{ margin: '15px' }" >
+            <h4>Half Precision Mode</h4>
+            <Rating :precision="'half'"/>
+        </div>
+    </div>
+</template>
+
+<script>
+import { Rating } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        Rating,
+    },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/rating/readonly/main.js b/vue-options-api-demos/inputs/rating/readonly/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/readonly/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/rating/readonly/main.vue b/vue-options-api-demos/inputs/rating/readonly/main.vue
new file mode 100644
index 00000000..2b30f917
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/readonly/main.vue
@@ -0,0 +1,16 @@
+<template>
+    <div>
+      <h4>Readonly Mode</h4>
+      <Rating :defaultValue="3" :readonly="true" />
+    </div>
+</template>
+
+<script>
+import { Rating } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        Rating,
+    },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/rating/selection/main.js b/vue-options-api-demos/inputs/rating/selection/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/selection/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/rating/selection/main.vue b/vue-options-api-demos/inputs/rating/selection/main.vue
new file mode 100644
index 00000000..f5ff2357
--- /dev/null
+++ b/vue-options-api-demos/inputs/rating/selection/main.vue
@@ -0,0 +1,22 @@
+<template>
+    <div>
+      <div :style="{ margin: '15px' }" >
+        <h4>Continues Selection Mode</h4>
+        <Rating :selection="'continues'" />
+      </div>
+      <div :style="{ margin: '15px' }" >
+        <h4>Single Selection Mode</h4>
+        <Rating :selection="'single'" />
+      </div>
+    </div>
+</template>
+
+<script>
+import { Rating } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        Rating,
+    },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/rtl/main.js b/vue-options-api-demos/inputs/rtl/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/rtl/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/rtl/main.vue b/vue-options-api-demos/inputs/rtl/main.vue
new file mode 100644
index 00000000..f376f980
--- /dev/null
+++ b/vue-options-api-demos/inputs/rtl/main.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="row example-wrapper">
+    <div class="col-12 col-md-6 example-col">
+      <p>Input</p>
+      <k-input
+        :style="{ width: '230px' }"
+        :label="'First name'"
+        dir="rtl"
+      ></k-input>
+    </div>
+    <div class="col-12 col-md-6 example-col">
+      <p>NumericTextBox</p>
+      <numerictextbox
+        :style="{ width: '230px' }"
+        :default-value="123.45"
+        :format="'c2'"
+        :dir="'rtl'"
+      >
+      </numerictextbox>
+    </div>
+    <div class="col-12 col-md-6 example-col">
+      <p>MaskedTextBox</p>
+      <maskedtextbox
+        :style="{ width: '230px' }"
+        :mask="'9-000'"
+        :default-value="'_-___'"
+        :dir="'rtl'"
+      >
+      </maskedtextbox>
+    </div>
+    <div class="col-12 col-md-6 example-col">
+      <p>Slider</p>
+      <slider :dir="'rtl'" :min="1" :max="10" :step="1" :default-value="4" />
+    </div>
+    <div class="col-12 col-md-6 example-col">
+      <p>Switch</p>
+      <k-switch :dir="'rtl'" />
+    </div>
+    <div class="col-12 col-md-6 example-col">
+      <p>TextArea</p>
+      <k-textarea :dir="'rtl'" />
+    </div>
+    <div class="col-12 col-md-6 example-col">
+      <p>RadioButton and RadioGroup</p>
+      <radiobutton
+        :dir="'rtl'"
+        :name="'group1'"
+        :value="'first'"
+        :label="'First'"
+      />
+      <radiobutton
+        :dir="'rtl'"
+        :name="'group1'"
+        :value="'second'"
+        :label="'Second'"
+      />
+      <radiobutton
+        :dir="'rtl'"
+        :name="'group1'"
+        :value="'third'"
+        :label="'Third'"
+      />
+    </div>
+    <div class="col-12 col-md-6 example-col">
+      <p>CheckBox</p>
+      <k-checkbox
+        :dir="'rtl'"
+        :default-checked="true"
+        :label="'Checked state'"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import {
+  Checkbox,
+  NumericTextBox,
+  Input,
+  MaskedTextBox,
+  Slider,
+  Switch,
+  TextArea,
+  RadioButton,
+} from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    "k-input": Input,
+    numerictextbox: NumericTextBox,
+    maskedtextbox: MaskedTextBox,
+    slider: Slider,
+    "k-switch": Switch,
+    "k-textarea": TextArea,
+    radiobutton: RadioButton,
+    "k-checkbox": Checkbox,
+  },
+};
+</script>
+
+<style>
+p {
+  font-weight: 600;
+}
+</style>
diff --git a/vue-options-api-demos/inputs/shared/CheckboxStyleConfigurator.vue b/vue-options-api-demos/inputs/shared/CheckboxStyleConfigurator.vue
new file mode 100644
index 00000000..cb2341a7
--- /dev/null
+++ b/vue-options-api-demos/inputs/shared/CheckboxStyleConfigurator.vue
@@ -0,0 +1,80 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+      >Configurator</span>
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-around',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+            <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+            <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+    rounded: String,
+  },
+  emits: ["sizechange", "roundedchange"],
+  data() {
+    return {
+      sizes: ["small", "medium", "large"],
+      roundedOptions: ["small", "medium", "large"],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleRoundedChange(event) {
+      this.$emit("roundedchange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/shared/FormCheckbox.vue b/vue-options-api-demos/inputs/shared/FormCheckbox.vue
new file mode 100644
index 00000000..9c415a82
--- /dev/null
+++ b/vue-options-api-demos/inputs/shared/FormCheckbox.vue
@@ -0,0 +1,84 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+        <span>
+          <checkbox 
+                :value="value"
+                :valid="valid"
+                :id="id"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus" />
+          </span>
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Checkbox } from "@progress/kendo-vue-inputs";
+
+export default {
+    props: {
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        disabled: Boolean,
+        optional: Boolean,
+        visited: Boolean,
+        modified: Boolean,
+        value: {
+             type: [Boolean, String],
+             default: false
+        }
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        klabel: Label,
+        checkbox: Checkbox
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/inputs/shared/FormInput.vue b/vue-options-api-demos/inputs/shared/FormInput.vue
new file mode 100644
index 00000000..47972c76
--- /dev/null
+++ b/vue-options-api-demos/inputs/shared/FormInput.vue
@@ -0,0 +1,94 @@
+<template>
+  <fieldwrapper>
+    <klabel
+      :class="'k-form-label'"
+      :editor-id="id"
+      :editor-valid="valid"
+      :disabled="disabled"
+      :optional="optional"
+    >
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <kinput
+        :valid="valid"
+        :id="id"
+        :value="value"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :required="required"
+        @input="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+export default {
+  props: {
+    optional: Boolean,
+    disabled: Boolean,
+    placeholder: String,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: String,
+      default: "",
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    kinput: Input,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : "";
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : "";
+    },
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit("change", e);
+    },
+    handleBlur(e) {
+      this.$emit("blur", e);
+    },
+    handleFocus(e) {
+      this.$emit("focus", e);
+    },
+  },
+};
+</script>
+
diff --git a/vue-options-api-demos/inputs/shared/FormSwitch.vue b/vue-options-api-demos/inputs/shared/FormSwitch.vue
new file mode 100644
index 00000000..76da195a
--- /dev/null
+++ b/vue-options-api-demos/inputs/shared/FormSwitch.vue
@@ -0,0 +1,100 @@
+<template>
+  <fieldwrapper>
+    <klabel
+      :class="'k-form-label'"
+      :editor-id="id"
+      :editor-valid="valid"
+      :disabled="disabled"
+      :optional="optional"
+    >
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <kswitch
+        :valid="valid"
+        :id="id"
+        :checked="value"
+        :disabled="disabled"
+        :required="required"
+        :placeholder="placeholder"
+        @change="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+
+      <span v-if="showValidationMessage && showHint">
+        <error>
+          {{ validationMessage }}
+        </error>
+        <hint>{{ hint }}</hint>
+      </span>
+      <error v-else-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else-if="showHint">{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Switch } from "@progress/kendo-vue-inputs";
+export default {
+  props: {
+    optional: Boolean,
+    disabled: Boolean,
+    placeholder: String,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    kswitch: Switch,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : "";
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : "";
+    },
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit("change", e);
+    },
+    handleBlur(e) {
+      this.$emit("blur", e);
+    },
+    handleFocus(e) {
+      this.$emit("focus", e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/shared/InputStyleConfigurator.vue b/vue-options-api-demos/inputs/shared/InputStyleConfigurator.vue
new file mode 100644
index 00000000..c1b36044
--- /dev/null
+++ b/vue-options-api-demos/inputs/shared/InputStyleConfigurator.vue
@@ -0,0 +1,105 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Fill Mode
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="fillModes"
+              :value="fillMode"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleFillModeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+    fillMode: String,
+    rounded: String,
+  },
+  emits: [
+    "sizechange",
+    "fillmodechange",
+    "roundedchange",
+  ],
+  data() {
+    return {
+      sizes: ["small", "medium", "large"],
+      fillModes: ["solid", "outline", "flat"],
+      roundedOptions: ["small", "medium", "large", "full"],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleFillModeChange(event) {
+      this.$emit("fillmodechange", event);
+    },
+    handleRoundedChange(event) {
+      this.$emit("roundedchange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/shared/MaskedTextBoxStyleConfigurator.vue b/vue-options-api-demos/inputs/shared/MaskedTextBoxStyleConfigurator.vue
new file mode 100644
index 00000000..c1b36044
--- /dev/null
+++ b/vue-options-api-demos/inputs/shared/MaskedTextBoxStyleConfigurator.vue
@@ -0,0 +1,105 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Fill Mode
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="fillModes"
+              :value="fillMode"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleFillModeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+    fillMode: String,
+    rounded: String,
+  },
+  emits: [
+    "sizechange",
+    "fillmodechange",
+    "roundedchange",
+  ],
+  data() {
+    return {
+      sizes: ["small", "medium", "large"],
+      fillModes: ["solid", "outline", "flat"],
+      roundedOptions: ["small", "medium", "large", "full"],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleFillModeChange(event) {
+      this.$emit("fillmodechange", event);
+    },
+    handleRoundedChange(event) {
+      this.$emit("roundedchange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/shared/NumericTextBoxStyleConfigurator.vue b/vue-options-api-demos/inputs/shared/NumericTextBoxStyleConfigurator.vue
new file mode 100644
index 00000000..c1b36044
--- /dev/null
+++ b/vue-options-api-demos/inputs/shared/NumericTextBoxStyleConfigurator.vue
@@ -0,0 +1,105 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Fill Mode
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="fillModes"
+              :value="fillMode"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleFillModeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+    fillMode: String,
+    rounded: String,
+  },
+  emits: [
+    "sizechange",
+    "fillmodechange",
+    "roundedchange",
+  ],
+  data() {
+    return {
+      sizes: ["small", "medium", "large"],
+      fillModes: ["solid", "outline", "flat"],
+      roundedOptions: ["small", "medium", "large", "full"],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleFillModeChange(event) {
+      this.$emit("fillmodechange", event);
+    },
+    handleRoundedChange(event) {
+      this.$emit("roundedchange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/shared/RadioButtonStyleConfigurator.vue b/vue-options-api-demos/inputs/shared/RadioButtonStyleConfigurator.vue
new file mode 100644
index 00000000..e00c2976
--- /dev/null
+++ b/vue-options-api-demos/inputs/shared/RadioButtonStyleConfigurator.vue
@@ -0,0 +1,61 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="sizeOptions"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+  },
+  emits: ["sizechange"],
+  data() {
+    return {
+      sizeOptions: ["small", "medium", "large"],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/shared/SignatureStyleConfigurator.vue b/vue-options-api-demos/inputs/shared/SignatureStyleConfigurator.vue
new file mode 100644
index 00000000..ffdd6c08
--- /dev/null
+++ b/vue-options-api-demos/inputs/shared/SignatureStyleConfigurator.vue
@@ -0,0 +1,158 @@
+<template>
+    <div :style="{ margin: '-30px -30px 30px -30px' }">
+      <div :style="{ display: 'flex', justifyContent: 'center' }">
+        <span
+          class="k-color-primary"
+          :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+          >Configurator</span
+        >
+      </div>
+      <div
+        class="example-config"
+        :style="{
+          display: 'flex',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+        }"
+      >
+        <span class="k-form-field">
+          <k-label>
+            Color
+            <div class="k-form-field-wrap">
+              <ColorPicker :value="color" @change="handleColorChange" />
+            </div>
+          </k-label>
+        </span>
+        <span class="k-form-field">
+          <k-label>
+            Background Color
+            <div class="k-form-field-wrap">
+              <ColorPicker
+                :value="backgroundColor"
+                @change="handleBackgroundColorChange"
+              />
+            </div>
+          </k-label>
+        </span>
+        <span class="k-form-field">
+          <k-label>
+            Stroke Width
+            <div class="k-form-field-wrap">
+              <dropdownlist
+                :data-items="strokeWidths"
+                :value="strokeWidth"
+                :style="{
+                  'min-width': '120px',
+                }"
+                @change="handleStrokeWidthChange"
+              />
+            </div>
+          </k-label>
+        </span>
+        <span class="k-form-field">
+          <k-label>
+            Size
+            <div class="k-form-field-wrap">
+              <dropdownlist
+                :data-items="sizes"
+                :value="size"
+                :style="{
+                  'min-width': '120px',
+                }"
+                @change="handleSizeChange"
+              />
+            </div>
+          </k-label>
+        </span>
+        <span class="k-form-field">
+          <k-label>
+            Fill Mode
+            <div class="k-form-field-wrap">
+              <dropdownlist
+                :data-items="fillModes"
+                :value="fillMode"
+                :style="{
+                  'min-width': '120px',
+                }"
+                @change="handleFillModeChange"
+              />
+            </div>
+          </k-label>
+        </span>
+        <span class="k-form-field">
+          <k-label>
+            Border Radius
+            <div class="k-form-field-wrap">
+              <dropdownlist
+                :data-items="roundedOptions"
+                :value="rounded"
+                :style="{
+                  'min-width': '120px',
+                }"
+                @change="handleRoundedChange"
+              />
+            </div>
+          </k-label>
+        </span>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import { Label } from '@progress/kendo-vue-labels';
+  import { DropDownList } from '@progress/kendo-vue-dropdowns';
+  import { ColorPicker } from '@progress/kendo-vue-inputs';
+  
+  export default {
+    components: {
+      'k-label': Label,
+      dropdownlist: DropDownList,
+      ColorPicker,
+    },
+    props: {
+      size: String,
+      fillMode: String,
+      rounded: String,
+      strokeWidth: Number,
+      backgroundColor: String,
+      color: String,
+    },
+    emits: [
+      'sizechange',
+      'fillmodechange',
+      'roundedchange',
+      'strokewidthchange',
+      'backgroundchange',
+      'colorchange',
+    ],
+    data() {
+      return {
+        sizes: ['small', 'medium', 'large'],
+        fillModes: ['solid', 'outline', 'flat'],
+        roundedOptions: ['small', 'medium', 'large', 'full'],
+        strokeWidths: [1, 2, 3, 6, 10],
+      };
+    },
+    methods: {
+      handleSizeChange(event) {
+        this.$emit('sizechange', event);
+      },
+      handleFillModeChange(event) {
+        this.$emit('fillmodechange', event);
+      },
+      handleRoundedChange(event) {
+        this.$emit('roundedchange', event);
+      },
+      handleStrokeWidthChange(event) {
+        this.$emit('strokewidthchange', event);
+      },
+      handleBackgroundColorChange(event) {
+        this.$emit('backgroundchange', event.event);
+      },
+      handleColorChange(event) {
+        this.$emit('colorchange', event.event);
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/shared/SwitchStyleConfigurator.vue b/vue-options-api-demos/inputs/shared/SwitchStyleConfigurator.vue
new file mode 100644
index 00000000..c5b405da
--- /dev/null
+++ b/vue-options-api-demos/inputs/shared/SwitchStyleConfigurator.vue
@@ -0,0 +1,101 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="sizeOptions"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Track Rounded Mode
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="trackRoundedOptions"
+              :value="trackRounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleTrackRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Thumb Rounded Radius
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="thumbRoundedOptions"
+              :value="thumbRounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleThumbRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+    thumbRounded: String,
+    trackRounded: String,
+  },
+  emits: ["sizechange", "trackroundedchange", "thumbroundedchange"],
+  data() {
+    return {
+      sizeOptions: ["small", "medium", "large"],
+      trackRoundedOptions: ["small", "medium", "large", "full"],
+      thumbRoundedOptions: ["small", "medium", "large", "full"],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleTrackRoundedChange(event) {
+      this.$emit("trackroundedchange", event);
+    },
+    handleThumbRoundedChange(event) {
+      this.$emit("thumbroundedchange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/shared/TextAreaStyleConfigurator.vue b/vue-options-api-demos/inputs/shared/TextAreaStyleConfigurator.vue
new file mode 100644
index 00000000..c1b36044
--- /dev/null
+++ b/vue-options-api-demos/inputs/shared/TextAreaStyleConfigurator.vue
@@ -0,0 +1,105 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Fill Mode
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="fillModes"
+              :value="fillMode"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleFillModeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+    fillMode: String,
+    rounded: String,
+  },
+  emits: [
+    "sizechange",
+    "fillmodechange",
+    "roundedchange",
+  ],
+  data() {
+    return {
+      sizes: ["small", "medium", "large"],
+      fillModes: ["solid", "outline", "flat"],
+      roundedOptions: ["small", "medium", "large", "full"],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleFillModeChange(event) {
+      this.$emit("fillmodechange", event);
+    },
+    handleRoundedChange(event) {
+      this.$emit("roundedchange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/shared/sample-signature.js b/vue-options-api-demos/inputs/shared/sample-signature.js
new file mode 100644
index 00000000..82d3e903
--- /dev/null
+++ b/vue-options-api-demos/inputs/shared/sample-signature.js
@@ -0,0 +1,2 @@
+export const sampleSignature = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABdwAAAH4CAYAAABQRy9XAAAgAElEQVR4XuzdjZUjt4EuUL8I7BeBuRFYG4HpCCRHIDqC0UYgTgQzikBUBNZEYCoCSxEsFcGTItiHb83apenuJuqX9XPrHJxudaNQwAV6vPs1GvV/fuMiQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEegv8n94taIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBD4jcDdIiBAgAABAgQIECBAgAABAgQIECBAgAABAgMICNwHQNQEAQIECBAgQIAAAQIECBAgQIAAAQIECBAQuFsDBAgQIECAAAECBAgQIECAAAECBAgQIEBgAAGB+wCImiBAgAABAgQIECBAgAABAgQIECBAgAABAgJ3a4AAAQIECBAgQIAAAQIECBAgQIAAAQIECAwgIHAfAFETBAgQIECAAAECBAgQIECAAAECBAgQIEBA4G4NECBAgAABAgQIECBAgAABAgQIECBAgACBAQQE7gMgaoIAAQIECBAgQIAAAQIECBAgQIAAAQIECAjcrQECBAgQIECAAAECBAgQIECAAAECBAgQIDCAgMB9AERNECBAgAABAgQIECBAgAABAgQIECBAgAABgbs1QIAAAQIECBAgQIAAAQIECBAgQIAAAQIEBhAQuA+AqAkCBAgQIECAAAECBAgQIECAAAECBAgQICBwtwYIECBAgAABAgQIECBAgAABAgQIECBAgMAAAgL3ARA1QYAAAQIECBAgQIAAAQIECBAgQIAAAQIEBO7WAAECBAgQIECAAAECBAgQIECAAAECBAgQGEBA4D4AoiYIECBAgAABAgQIECBAgAABAgQIECBAgIDA3RogQIAAAQIECBAgQIAAAQIECBAgQIAAAQIDCAjcB0DUBAECBAgQIECAAAECBAgQIECAAAECBAgQELhbAwQIECBAgAABAgQIECBAgAABAgQIECBAYAABgfsAiJogQIAAAQIECBAgQIAAAQIECBAgQIAAAQICd2uAAAECBAgQIECAAAECBAgQIECAAAECBAgMICBwHwBREwQIECBAgAABAgQIECBAgAABAgQIECBAQOBuDRAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQEEBO4DIGqCAAECBAgQIECAAAECBAgQIECAAAECBAgI3K0BAgQIECBAgAABAgQIECBAgAABAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAYG7NUCAAAECBAgQIECAAAECBAgQIECAAAECBAYQELgPgKgJAgQIECBAgAABAgQIECBAgAABAgQIECAgcLcGCBAgQIAAAQIECBAgQIAAAQIECBAgQIDAAAIC9wEQNUGAAAECBAgQIECAAAECBAgQIECAAAECBATu1gABAgQIECBAgAABAgQIECBAgAABAgQIEBhAQOA+AKImCBAgQIAAAQIECBAgQIAAAQIECBAgQICAwN0aIECAAAECBAgQIECAAAECBAgQIECAAAECAwgI3AdA1AQBAgQIECBAgAABAgQIECBAgAABAgQIEBC4WwMECBAgQIAAAQIECBAgQIAAAQIECBAgQGAAAYH7AIiaIECAAAECBAgQIECAAAECBAgQIECAAAECAndrgAABAgQIECBAgAABAgQIECBAgAABAgQIDCAgcB8AURMECBAgQIAAAQIECBAgQIAAAQIECBAgQEDgbg0QIECAAAECBAgQIECAAAECBAgQIECAAIEBBATuAyBqggABAgQIECBAgAABAgQIECBAgAABAgQICNytAQIECBAgQIAAAQIECBAgQIAAAQIECBAgMICAwH0ARE0QIECAAAECBAgQIECAAAECBAgQIECAAAGBuzVAgAABAgQIECBAgAABAgQIECBAgAABAgQGEBC4D4CoCQIECBAgQIAAAQIECBAgQIAAAQIECBAgIHC3BggQIECAAAECBAgQIECAAAECBAgQIECAwAACAvcBEDVBgAABAgQIECBAgAABAgQIECBAgAABAgQE7tYAAQIECBAgQIAAAQIECBAgQIAAAQIECBAYQEDgPgCiJggQIECAAAECBAgQIECAAAECBAgQIECAgMDdGiBAgAABAgQIECBAgAABAgQIECBAgAABAgMICNwHQNQEAQIECBAgQIAAAQIECBAgQIAAAQIECBAQuFsDBAgQIECAAAECBAgQIECAAAECBAgQIEBgAAGB+wCImiBAgAABAgQIECBAgAABAgQIECBAgAABAgJ3a4AAAQIECBAgQIAAAQIECBAgQIAAAQIECAwgIHAfAFETBAgQIECAAAECBAgQIECAAAECBAgQIEBA4G4NECBAgAABAgQIECBAgAABAgQIECBAgACBAQQE7gMgaoIAAQIECBAgQIAAAQIECBAgQIAAAQIECAjcrQECBAgQIECAAAECBAgQIECAAAECBAgQIDCAgMB9AERNECBAgAABAgQIECBAgAABAgQIECBAgAABgbs1QIAAAQIECBAgQIAAAQIECBAgQIAAAQIEBhAQuA+AqAkCBAgQIECAAAECBAgQIECAAAECBAgQICBwtwYIECBAgAABAgQIECBAgAABAgQIECBAgMAAAgL3ARA1QYAAAQIECBAgQIAAAQIECBAgQIAAAQIEBO7WAAECBAgQIECAAAECBAgQIECAAAECBAgQGEBA4D4AoiYIECBAgAABAgQIECBAgAABAgQIECBAgIDA3RogQIAAAQIECBAgQIAAAQIECBAgQIAAAQIDCAjcB0DUBAECBAgQIECAAAECBAgQIECAAAECBAgQELhbAwQIECBAgAABAgQIECBAgAABAgQIECBAYAABgfsAiJogQIAAAQIECBAgQIAAAQIECBAgQIAAAQICd2uAAAECBAgQIECAAAECBAgQIECAAAECBAgMICBwHwBREwQIECBAgAABAgQIECBAgAABAgQIECBAQOBuDRAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQEEBO4DIGqCAAECBAgQIECAAAECBAgQIECAAAECBAgI3K0BAgQIECBAgAABAgQIECBAgAABAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAYG7NUCAAAECBAgQIECAAAECBAgQIECAAAECBAYQELgPgKgJAgQIECBAgAABAgQIECBAgAABAgQIECAgcLcGCBAgQIAAAQIECBAgQIAAAQIECBAgQIDAAAIC9wEQNUGAAAECBAgQIECAAAECBAgQIECAAAECBATu1gABAgQIECBAgAABAgQIECBAgAABAgQIEBhAQOA+AKImCBAgQIAAAQIECBAgQIAAAQIECBAgQICAwN0aIECAAAECBAgQIECAAAECBAgQIECAAAECAwgI3AdA1AQBAgQIECBAgAABAgQIECBAgAABAgQIEBC4WwMECBAgQIAAAQIECBAgQIAAAQIECBAgQGAAAYH7AIiaIECAAAECBAgQIECAAAECBAgQIECAAAECAndrgAABAgQIECBAgAABAgQIECBAgAABAgQIDCAgcB8AURMECBAgQIAAAQIECBAgQIAAAQIECBAgQEDgbg0QIECAAAECBAgQIECAAAECBAgQIECAAIEBBATuAyBqggABAgQIECBAgAABAgQIECBAgAABAgQICNytAQIECBAgQIAAAQIECBAgQIAAAQIECBAgMICAwH0ARE0QIECAAAECBAgQIECAAAECBAgQIECAAAGBuzVAgAABAgQIECBAgAABAgQIECBAgAABAgQGEBC4D4CoCQIECBAgQIAAAQIECBAgQIAAAQIECBAgIHC3BggQIECAAAECBAgQIECAAAECBAgQIECAwAACAvcBEDVBgAABAgQIECBAgAABAgQIECBAgAABAgQE7tYAAQIECBAgQIAAAQIECBAgQIAAAQIECBAYQEDgPgCiJggQIECAAAECBAgQIECAAAECBAgQIECAgMDdGiBAgAABAgQIECBAgAABAgQIECBAgAABAgMICNwHQNQEAQIECBAgQIAAAQIECBAgQIAAAQIECBAQuFsDBAgQIECAAAECBAgQIECAAAECBAgQIEBgAAGB+wCImiBAgAABAgQIECBAgAABAgQIECBAgAABAgJ3a4AAAQIECBAgQIAAAQIECBAgQIAAAQIECAwgIHAfAFETBAgQIECAAAECBAgQIECAAAECBAgQIEBA4G4NECBAgAABAgQIECBAgAABAgQIECBAgACBAQQE7gMgaoIAAQIECBAgQIAAAQIECBAgQIAAAQIECAjcrQECBAgQIECAAAECBAgQIECAAAECBAgQIDCAgMB9AERNECBAgAABAgQIECBAgAABAgQIECBAgAABgbs1QIAAAQIECBAgQIAAAQIECBAgQIAAAQIEBhAQuA+AqAkCBAgQIECAAAECBAgQIECAAAECBAgQICBwtwYIECBAgAABAgQIECBAgAABAgQIECBAgMAAAgL3ARA1QYAAAQIECBAgQIAAAQIECBAgQIAAAQIEBO7WAAECBAgQIECAAAECBAgQIECAAAECBAgQGEBA4D4AoiYIECBAgAABAgQIECBAgAABAgQIECBAgIDA3RogQIAAAQIECBAgQIAAAQIECBAgQIAAAQIDCAjcB0DUBAECBAgQIECAAAECBAgQIECAAAECBAgQELhbAwQIECBAgAABAgQIECBAgAABAgQIECBAYAABgfsAiJogQIAAAQIECBAgQIAAAQIECBAgQIAAAQICd2uAAAECBAgQIECAAAECBAgQIECAAAECBAgMICBwHwBREwQIECBAgAABAgQIECBAgAABAgQIECBAQOBuDRAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQEEBO4DIGqCAAECBAgQIECAAAECBAgQIECAAAECBAgI3K0BAgQIECBAgAABAgQIECBAgAABAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAYG7NUCAAAECBAgQIECAAAECBAgQIECAAAECBAYQELgPgKgJAgQIECBAgAABAgQIECBAgAABAgQIECAgcLcGCBAgQIAAAQIECBAgQIAAAQIECBAgQIDAAAIC9wEQNUGAAAECBAgQIECAAAECBAgQIECAAAECBATu1gABAgQIECBAgAABAgQIECBAgAABAgQIEBhAQOA+AKImCBAgQIAAAQIECBAgQIAAAQIECBAgQICAwN0aIECAAAECBAgQIECAAAECBAgQIECAAAECAwgI3AdA1AQBAgQIECBAgAABAgQIECBAgAABAgQIEBC4WwMECBAgQIAAAQIECBAgQIBAF4HflZt+6XKjewgQIECAwFoFBO5rnVnjIkCAAAECBAgQIECAAAEC4wh8WZo9lrIr5VLKn0v5cZxHaZUAAQIECCxLQOC+rPnSWwIECBAgQIAAAQIECBAg8CyBBOzflrK/60B2uf9bKXa7P2tmPJcAAQIEZiMgcJ/NVOgIAQIECBAgQIAAAQIECBCYpUCOjnlXyvGN3v2lfO80y97rFAECBAgQmFBA4D4htkcRIECAAAECBAgQIECAAIGFCXxR+vuhlN2Dfr8v3z8ubGy6S4AAAQIEBhcQuA9OqkECBAgQIECAAAECBAgQILB4gQTsCdoTuD+6fi0VPivl8qii7xMgQIAAgbULCNzXPsPGR4AAAQIECBAgQIAAAQIE6gVqjo+5be2n8h+HUrw0td5YTQIECBBYsYDAfcWTa2gECBAgQIAAAQIECBAgQKCFwJel7rGUXcU92dWeuh8r6qpCgAABAgQ2IyBw38xUGygBAgQIECBAgAABAgQIEHhRYF+++m1l0J4GPpXyVSkXngQIECBAgMA/CwjcrQgCBAgQIECAAAECBAgQILBNgQTtX5eSjzXXz6XSoZRzTWV1CBAgQIDAFgUE7lucdWMmQIAAAQIECBAgQIAAgS0L7MrgE7QnPK+93peKx9rK6hEgQIAAga0KCNy3OvPGTYAAAQIECBAgQIAAAQJbE8gLUT+0DNodH7O1VWK8BAgQINBLQODei8/NBAgQIECAAAECBAgQIEBg9gIJ2t+VknPX83nN9dO1/rmmsjoECBAgQIDAPwQE7lYCAQIECBAgQIAAAQIECBBYr8CXZWgfS6kN2nNO+7GU03pJjIwAAQIECIwnIHAfz1bLBAgQIECAAAECBAgQIEDgWQJflAfn+JhdZQd+LfUSzB8r66tGgAABAgQIvCAgcLcsCBAgQIAAAQIECBAgQIDAegT2ZSh5IWo+1lxN0J6w/ZeaG9QhQIAAAQIEXhcQuFsdBAgQIECAAAECBAgQIEBg+QK7MoTsaM/O9trru1LxWMql9gb1CBAgQIAAgbcFBO5WCAECBAgQIECAAAECBAgQWK7ArnQ9O9oPLYbww7W+oL0FmqoECBAgQKBGQOBeo6QOAQIECBAgQIAAAQIECBCYl0BegvqulK9KqX0haoL2YynneQ1FbwgQIECAwHoEBO7rmUsjIUCAAAECBAgQIECAAIFtCCRoT3BeG7T/fK1/2gaPURIgQIAAgecJCNyfZ+/JBAgQIECAAAECBAgQIECgjcCX1+B8V3lTXoiaHfCC9kow1QgQIECAQF8BgXtfQfcTIECAAAECBAgQIECAAIFxBfal+bwQ9bPKxyRo/3gtv1TeoxoBAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAgREEErAnaN+3aPu7Uje72gXtLdBUJUCAAAECQwkI3IeS1A4BAgQIECBAgAABAgQIEBhGYFea+bqUQ4vmPl2D9kuLe1QlQIAAAQIEBhYQuA8MqjkCBAgQIECAAAECBAgQINBRIC9BTdCeHeq11w+l4rGUc+0N6hEgQIAAAQLjCQjcx7PVMgECBAgQIECAAAECBAgQqBFI0P6ulATt+bzm+rlUOpRyrqmsDgECBAgQIDCNgMB9GmdPIUCAAAECBAgQIECAAAECLwl8Wb54LGVXyZOgPfVPlfVVI0CAAAECBCYUELhPiO1RBAgQIECAAAECBAgQIEDgKvBF+ZgXou4qRX4t9T5eixeiVqKpRoAAAQIEphYQuE8t7nkECBAgQIAAAQIECBAgsGWBfRl8zmnPx9rrvaC9lko9AgQIECDwXAGB+3P9PZ0AAQIECBAgQIAAAQIEtiGwK8PMjvbsbK+9visVj6Vcam9QjwABAgQIEHiugMD9uf6eToAAAQIECBAgQIAAAQLrFtiV4WVH+6HFMH8odfMC1R9b3KMqAQIECBAgMAMBgfsMJkEXCBAgQIAAAQIECBAgQGB1Ar8rI3p3Dc7zec2VoP1YyrmmsjoECBAgQIDA/AQE7vObEz0iQIAAAQIECBAgQIAAgWULZEd7dqjXBu0/X4P207KHrfcECBAgQICAwN0aIECAAAECBAgQIECAAAECwwh8eQ3Od5XN/Xqt/7GyvmoECBAgQIDAzAUE7jOfIN0jQIAAAQIECBAgQIAAgdkL7EsP80LUzyp7mqA9IXvKL5X3qEaAAAECBAgsQEDgvoBJ0kUCBAgQIECAAAECBAgQmKVAgvYcH5OPtdd3pWKOmxG014qpR4AAAQIEFiQgcF/QZOkqAQIECBAgQIAAAQIECMxCYFd6kaD90KI3n65B+6XFPaoSIECAAAECCxMQuC9swnSXAAECBAgQIECAAAECBJ4mkJeg5uiYNkH7D6X+sZTz03rtwQQIECBAgMBkAgL3yag9iAABAgQIECBAgAABAgQWKpCg/V0pOQomn9dcP5dKh1LONZXVIUCAAAECBNYhIHBfxzwaBQECBAgQIECAAAECBAiMI5Cg/VhKm6A99U/jdEerBAgQIECAwJwFBO5znh19I0CAAAECBAgQIECAAIFnCXx5Ddp3lR34tdT7eL2n8hbVCBAgQIAAgbUJCNzXNqPGQ4AAAQIECBAgQIAAAQJ9BPbl5pzT/lllI03QnrD9l8p7VCNAgAABAgRWKiBwX+nEGhYBAgQIECBAgAABAgQItBJI0P51KflYe31XKh5LudTeoB4BAgQIECCwbgGB+7rn1+gIECBAgAABAgQIECBA4G2BXfl2gvZDC6hPpW5eoCpob4GmKgECBAgQ2IKAwH0Ls2yMBAgQIECAAAECBAgQIHAvkJeg5uiYNkH7D6X+sZQzTgIECBAgQIDASwICd+uCAAECBAgQIECAAAECBLYkkKD9XSnZoZ7Pa66fr/W/r6msDgECBAgQILBdAYH7dufeyAkQIECAAAECBAgQILA1gRwd0zZoP5Z7TluDMl4CBAgQIECgm4DAvZubuwgQIECAAAECBAgQIEBgOQJflq4mON9VdvnXUu/jtfxSeY9qBAgQIECAAIHfCNwtAgIECBAgQIAAAQIECBBYq8C+DOxbQftap9e4CBAgQIDA/AQE7vObEz0iQIAAAQIECBAgQIAAgX4CCdpzfEw+1l7flYrHUi61N6hHgAABAgQIELgXELhbEwQIECBAgAABAgQIECCwFoFdGciHUr5oMaBPpW7OdRe0t0BTlQABAgQIEHhZQOBuZRAgQIAAAQIECBAgQIDA0gUStGdH+6HFQH4odY+lnFvcoyoBAgQIECBA4E0BgbsFQoAAAQIECBAgQIAAAQJLFfhd6fi7a3BeO4afS8WDoL2WSz0CBAgQIECgjYDAvY2WugQIECBAgAABAgQIECAwB4EmaM9RMPm85krQfizlVFNZHQIECBAgQIBAFwGBexc19xAgQIAAAQIECBAgQIDAswS+LA/+WEpt0P7rNWjPPS4CBAgQIECAwKgCAvdReTVOgAABAgQIECBAgAABAgMJJGg/lrKrbC9Be0L2lF8q71GNAAECBAgQINBLQODei8/NBAgQIECAAAECBAgQIDCywL60/6GUz1o857tSN8fNCNpboKlKgAABAgQI9BcQuPc31AIBAgQIECBAgAABAgQIDC+QoP3rUvKx9krQfizlUnuDegQIECBAgACBIQUE7kNqaosAAQIECBAgQIAAAQIE+grsSgPZ0f5Fi4Z+KHWzo/3HFveoSoAAAQIECBAYXEDgPjipBgkQIECAAAECBAgQIECgg0CC9uxoP7S4N0H7sZRzi3tUJUCAAAECBAiMJiBwH41WwwQIECBAgAABAgQIECBQIfC7UidBe3ao114/X+t/X3uDegQIECBAgACBKQQE7lMoewYBAgQIECBAgAABAgQI3AskaH93Dc7zec2VoP1YyqmmsjoECBAgQIAAgakFBO5Ti3seAQIECBAgQIAAAQIECDQ72muD9l8L2cdr2E6PAAECBAgQIDBbAYH7bKdGxwgQIECAAAECBAiMIrArrf6+lM9KSdi5v3lKvpfSXHkB5ftSHNsxylRsstEvy6iPd+vsLYgmaE/Y/ssmxQyaAAECBAgQWJSAwH1R06WzBAgQIECAAAECBFoJJFD/Yyn7UhKw52PbKyHnv5dyaXuj+gRuBNoG7bn1m1KOpQjaLSUCBAgQIEBgMQIC98VMlY4SIECAAAECBAgQeCjQBOxflJr7UnYP76ir8OdSzS73Oiu1/lkg6zDHx+Rj7fVdqXgs5VJ7g3oECBAgQIAAgbkICNznMhP6QYAAAQIECBAgQKCbwK7cll3sCdlTxrgE7mOorrvNfRle26D9h3LPoZTLummMjgABAgQIEFizgMB9zbNrbAQIECBAgAABAmsVyE72HNGRcDJHxYx9/ak84Dz2Q7S/CoFdGcWHUtr88idB+9EaW8X8GwQBAgQIENi8gMB980sAAAECBAgQIECAwIIEErKPuZP9NQr/f8OCFsmTupqgPTvaDy2e/1Op+5WgvYWYqgQIECBAgMDsBfwfzrOfIh0kQIAAAQIECBDYuECCzHfXIDM724e4sqP4ci0/lo95KeVfS3mp/U/l6212Kw/RP20sRyBrJkF7gvPa6+dS8VjKqfYG9QgQIECAAAECSxEQuC9lpvSTAAECBAgQIEBgawLNkTH7ngPPLuKE6udrubzQXsLPhKYvXc5v7zkBK709QXt+EZSgvfYXQYL2lS4GwyJAgAABAgT+V0DgbjUQIECAAAECBAgQmI9AE2IeSpd2Hbv1a7nv+2s5l4/Zvf7WlTPg//5KhQSkXfvRsftuW4BAs6O9NmjPmvxYynEBY9NFAgQIECBAgEAvAYF7Lz43EyBAgAABAgQIEBhEIKF3c2xMlwYTjN+G7LVtJDBN2L575QYvS62V3Ea9/NXF8Y31cq/QBO0J2x/94mcbgkZJgAABAgQIrF5A4L76KTZAAgQIECBAgACBGQt8XvqWIzn2HfrY7GRPmJkjY9peCdv/VkrC/peunPPepV9t+6H+/AXaBu0Z0TelHEsRtM9/fvWQAAECBAgQGFBA4D4gpqYIECBAgAABAgQIVAgk6E7QnjByV1H/vkpeYnoqJTva+1wJ2/evNJAwP30TlvYRXv69WR8fSnntlzIvjfC769q+LH/4RkCAAAECBAgQaC8gcG9v5g4CBAgQIECAAAECXQS6vGSyeU4C8FMp2c0+RJD5bWnn8MYgHCXTZYbXc8++DCXntOdj7ZW/iMiaGmJ91j5TPQIECBAgQIDA7AQE7rObEh0iQIAAAQIECBBYmcCujCfhZcLItldCzNO1tL33tfqPwvb35cbjUA/TzqIEspM9O9r3LXqdNZr1cm5xj6oECBAgQIAAgdUKCNxXO7UGRoAAAQIECBAg8GSBhJZtdwk3Xc6xHF3PZn9t2Nlh/9dS0q/Xrjz38GQ3j59eYHddq23mXtA+/Tx5IgECBAgQILAAAYH7AiZJFwkQIECAAAECBBYlkBdMJrjct+z1z6X+qZQE7UOfnZ6dywnbd2/0SdjecsJWUD3roe1fX2SdHq9rdQUEhkCAAAECBAgQGFZA4D6sp9YIECBAgAABAgS2KdDnRag/FbKE7KeR6L4o7eYYmfTxtSt9aPNizJG6qtmJBLIWErR/1eJ5gmpWyTgAACAASURBVPYWWKoSIECAAAEC2xUQuG937o2cAAECBAgQIECgv0CfF6GOfSTHrgwv53EncH/rSti+L2XoXfX9dbUwtECX9ZoX9uYXQsehO6M9AgQIECBAgMAaBQTua5xVYyJAgAABAgQIEBhbYFce0PYojqZPObol4eVlxE6+uz7jrV3tefynUg6lCNtHnIwZNN0naB/jiKMZkOgCAQIECBAgQGAcAYH7OK5aJUCAAAECBAgQWKfAvgyrOaO9zQibXcJjh5e70qkcH5N+Prq+KRXaHCnyqD3fn6dA7S9fmt5PtVbnqaVXBAgQIECAAIGeAgL3noBuJ0CAAAECBAgQ2IRAAuzsaM/HNlfOvW7OZx97F3n6d6zoXALVBO2nirqqLFcgvxjKeti1GMIUf33RojuqEiBAgAABAgSWJyBwX96c6TEBAgQIECBAgMB0As1u9n3LR479ItTb7qRv2dVeE6ymX4dSfmw5HtWXIyBoX85c6SkBAgQIECCwQgGB+won1ZAIECBAgAABAgR6C3QJLfPQsV+EejuwBOy1x8fkvvelHHvLaGCuAl3WbM7wz187XOY6KP0iQIAAAQIECCxNQOC+tBnTXwIECBAgQIAAgTEFuoSW6c+UR3HkBZg5Pqb2/PX8EiB17Wofc+U8r+39dT3kY+015S+GavukHgECBAgQIEBgFQIC91VMo0EQIECAAAECBAj0EEiA/Xkpx1J2LdrJWeinUnJG+6XFfX2q5hcCeV76/OhK/zKm1HetT2BfhtT2vQKC9vWtAyMiQIAAAQIEZiYgcJ/ZhOgOAQIECBAgQIDAZAIJrd+Vkt3fNQF207EE2QmxU8Z+EWrzzISrH0r5rFInweqhlEtlfdWWI5C1IGhfznzpKQECBAgQILAxAYH7xibccAkQIECAAAECBP47XO8StP9c7juWcprQMAF7gvaErDVX+phfIHxfU1mdRQlkDbQN2p+xZheFqrMECBAgQIAAgaEFBO5Di2qPAAECBAgQIEBgrgJLCtp313D1UInZ7Lo/VtZXbTkCgvblzJWeEiBAgAABAgR+I3C3CAgQIECAAAECBNYusKSgPX3NjvbaoD1zN+ULW9e+VuY0PkH7nGZDXwgQIECAAAEClQIC90oo1QgQIECAAAECBBYn0DVoz/nnOZ99ymNZuvTVCzAXtySrOrwrtXJ0zKGq9j8qOTqmBZaqBAgQIECAAIExBQTuY+pqmwABAgQIECBA4BkCXcLr9PNZAXbC1TYvbs3xMal/egauZ44msCsttw3an/EC39EANEyAAAECBAgQWIOAwH0Ns2gMBAgQIECAAAECjcCX5ZNjKQkva69nBe1t+ypcrZ3RZdXLWhW0L2vO9JYAAQIECBAg8KqAwN3iIECAAAECBAgQWINA2/A6Y15K0J6+vi8lx9z8sobJMob/FtiVImi3GAgQIECAAAECKxMQuK9sQg2HAAECBAgQILAxgbUH7V6Iur4FLWhf35waEQECBAgQIEDgfwQE7hYDAQIECBAgQIDAEgXWHrR/KpOSc9ovS5wcfX5R4LPy1XelHFr4OEaoBZaqBAgQIECAAIE5CAjc5zAL+kCAAAECBAgQIFArsC8VP5SS8LL2WtLRMc/qa62leu0FsmZzdEw+1l6C9lop9QgQIECAAAECMxMQuM9sQnSHAAECBAgQIEDgRYEuoeWzwusl7b633MYT6LJmBe3jzYeWCRAgQIAAAQKTCAjcJ2H2EAIECBAgQIAAgY4C2cmeHe0JL2uvn0rFHMdyrr1hoHqC9oEgF95M1qod7QufRN0nQIAAAQIECHQVELh3lXMfAQIECBAgQIDAmAK7a2h5aPGQn0vdYymnFvf0rfq70sDn1+emz7XXs3bf1/ZPvfYC+YVL1uu+xa12tLfAUpUAAQIECBAgsAQBgfsSZkkfCRAgQIAAAQLbEdiVoWZ3cILL2utZQXtegJmd9Anday9Be63Ucup1+csGQfty5ldPCRAgQIAAAQKtBATurbhUJkCAAAECBAgQGEkgoXXbAFvQPtJkaPahQNe/bBC0P6RVgQABAgQIECCwbAGB+7LnT+8JECBAgAABAksX6BK0J7Q8lvJxwsF36We6Z0f7hJM0waO6rgNB+wST4xEECBAgQIAAgTkICNznMAv6QIAAAQIECBDYpkDbozieEVp2DVgF7eta07synLZHHUXgGWt2XfJGQ4AAAQIECBBYmIDAfWETprsECBAgQIAAgRUI7MsYvi0lIWbt9b5UzI72X2pvGKBefiGQZzqjfQDMhTaRtdq8DLXNEJrjjr6feM226aO6BAgQIECAAAECIwgI3EdA1SQBAgQIECBAgMCLAgkvs0s4H2uv70rFYymX2hsGqNd2530eaUf7APAzaqIJ2dus1XT/Ge8VmBGbrhAgQIAAAQIECAjcrQECBAgQIECAAIGxBXblAW2P4xC0jz0r2r8XyF8yJGj/qpSs2TZXfuFyupY296lLgAABAgQIECCwMgGB+8om1HAIECBAgAABAjMSSID5oZRDiz49Y6f4/trPz2bezxbdU7WFwK7UfXddp22OD8ojnrFeWwxNVQIECBAgQIAAgakFBO5Ti3seAQIECBAgQGD9Al1eNPpTYcnO4vOEPPvyrLZH3AhYJ5ygkR+V+U/Q/kWH5zzjLzA6dNMtBAgQIECAAAECUwsI3KcW9zwCBAgQIECAwLoF2r5o9BlnXu/KFOSlrQlcay9Be63U/Os1x8a0+YuGjOrXUk6l5EW6l/kPUw8JECBAgAABAgSeISBwf4a6ZxIgQIAAAQIE1iewL0NKiL2rHFrCy+M1vKy8pXe19K3tWfLP2Hnfe6Aa+BeBzH0TtLc9Nia/FErIfirlF7YECBAgQIAAAQIE3hIQuFsfBAgQIECAAAECfQSySzjntO8rG0nQnvAyZarwMgFrgvYcWVN7PWPnfW3f1KsXyLpM0H6ov+V/anoRagc0txAgQIAAAQIEti4gcN/6CjB+AgQIECBAgEA3gV25re1u8anPve5ylrygvdt6mNtdXY+NyTiyTk+lnOc2KP0hQIAAAQIECBCYv4DAff5zpIcECBAgQIAAgTkJdAmxs1P4UMplwoHkZZjHUmqPD2l23uce1zIFdqXbXY+NcT77MudcrwkQIECAAAECsxMQuM9uSnSIAAECBAgQIDBbgbYvRH3Gi0bTx4TmCV9rrmcccVPTL3XqBfalatdjY5q/aPi+tDHVEUf1I1OTAAECBAgQIEBgcQIC98VNmQ4TIECAAAECBCYXSKDZ5oWozziWpW0fg/hNKUdB6+TraYgH5i8XPr/O365Dg/llUN4jkKDdRYAAAQIECBAgQGAwAYH7YJQaIkCAAAECBAisTqDrC1GPE0rsy7Nylnw+1l5TnyVf2y/1HgvsrvP9RflYe1xQ02r+miEBe9bn5fGj1CBAgAABAgQIECDQXkDg3t7MHQQIECBAgACBtQskyPxQyqHFQKfeLb679jHBa+31jLPka/um3tsC2c3+VSn7DlD5i4vsZj+V4tiYDoBuIUCAAAECBAgQqBcQuNdbqUmAAAECBAgQ2IJAdosn2KzdPfzpWv8yEc6uPCd9PLR43jPOkm/RPVVfEchcN2ez5/O2l2Nj2oqpT4AAAQIECBAg0FtA4N6bUAMECBAgQIAAgVUItH3Z6NQhdn4B8K6UYwvt7Gw+lHJucY+qzxfYly50fQmqY2OeP396QIAAAQIECBDYtIDAfdPTb/AECBAgQIAAgf8+oqPNGehTvxC1Cdrb7Lqfuo+WUX+Bvi9BbeY8Z7Q7Nqb/fGiBAAECBAgQIECgo4DAvSOc2wgQIECAAAECCxfYXYP2Q+U4snM452AfK+sPUS27nPPM2uNtntHHIca55TbyYt785UKXl6DGLS/APZVy3jKisRMgQIAAAQIECMxHQOA+n7nQEwIECBAgQIDAFAJddown1MwO86l2Drc93qYJ2hPOT9XHKeZqzc9ojozZdxhkdrMnZE+5dLjfLQQIECBAgAABAgRGExC4j0arYQIECBAgQIDA7ATaBtk5p/0wYai5L8/6UEp2PddeU/8yoLZf6v2rwK58KbvZs6Zq/2rhtpWsx9O18CVAgAABAgQIECAwSwGB+yynRacIECBAgAABAoMK7Etrbc9pTyh6HrQXrzfWtn9pKUH7sZTLRH30mO4CfXazNy9BzV8v/Ni9C+4kQIAAAQIECBAgMI2AwH0aZ08hQIAAAQIECDxDYFcemqD9UPnwhJvHUhJuTnFlJ3t2tO9bPCy7nHO8jfC1BdoTqmbtNUF7Pm97eQlqWzH1CRAgQIAAAQIEZiEgcJ/FNOgEAQIECBAgQGBQgS7ntH9TenAsZYoz0BPAtvlFQHAStKd/50GlNDa0wOelwUMpeQlql8tLULuouYcAAQIECBAgQGA2AgL32UyFjhAgQIAAAQIEBhFoe077p/LU7Bi/DPL0txvZlW+3Ddqz0zn9+36C/nlEN4HMa9/d7KfShpfedvN3FwECBAgQIECAwIwEBO4zmgxdIUCAAAECBAj0EGh7PMtP1yD73OOZtbdmx32C9gTntVdzpMip9gb1Jhfou5s9v+zJ/PplyuRT54EECBAgQIAAAQJjCQjcx5LVLgECBAgQIEBgGoGE2TkH/VD5uJzTnuA7QefYV5ejbaY+R35sg7W1vysDGmI3e9bfZW04xkOAAAECBAgQIEBA4G4NECBAgAABAgSWK9DsGk+wXXO9L5WmOLaja9Cevk3Rvxordf5ZoO9u9pzBf7oWtgQIECBAgAABAgRWKyBwX+3UGhgBAgQIECCwYoG8kDK72neVY0zYeSjlUlm/azVBe1e5ed6X+cxu9vxFRO1aux1J/lrhVEp+iTL22punoF4RIECAAAECBAhsTkDgvrkpN2ACBAgQIEBgwQIJPb8tZV85hpyDfijlXFm/T7UEswlWa3fb51nflXIs5dLnwe4dXCDrqzk2pkvjdrN3UXMPAQIECBAgQIDAKgQE7quYRoMgQIAAAQIEVi7Q9qWjU56DnmA2ofmuxRwI2ltgTVQ189fnbHa72SeaKI8hQIAAAQIECBCYt4DAfd7zo3cECBAgQIAAgbY7x7+5BuC/jEwnaB8ZeKLm+57N/lPpZ/6y4TRRfz2GAAECBAgQIECAwKwFBO6znh6dI0CAAAECBDYssC9jzzntn1UaTHVOe5egPX07lnKuHItq4wpkTTW72dscAdT0KrvZvy8lQfuP43ZV6wQIECBAgAABAgSWJSBwX9Z86S0BAgQIECCwfoFdGeLXpRwqh5pz2vNSywSgY16C9jF1x28766rZzV77S5z7XjW72bPWxv4LivFFPIEAAQIECBAgQIDACAIC9xFQNUmAAAECBAgQ6CiQoD3hec2u4+wyzg7jY8dn1d4maK+Vml+9rKOE7F9cS5ce2s3eRc09BAgQIECAAAECmxUQuG926g2cAAECBAgQmJFAAtEcH7Or7NMULx0VtFdOxgyr3YbsNb+8eWkIdrPPcGJ1iQABAgQIECBAYP4CAvf5z5EeEiBAgAABAusVSMD+bSn7yiFOcRa6oL1yMmZWre+57BlOdrOfrsXZ7DObYN0hQIAAAQIECBBYhoDAfRnzpJcECBAgQIDAugSy67g5PqZmZAlCc9RMwtAxrubokWNpfNfiATk/PveM1a8WXdlk1SZkz19ItJm3e6xP5Qs5l908bnIZGTQBAgQIECBAgMCQAgL3ITW1RYAAAQIECBB4LJAd5Dl7vfaoj/fX+mO8pDJ9eFdK7bnxzegE7Y/neawau9Jw35efpm+Zw6zDBO2XsTqrXQIECBAgQIAAAQJbExC4b23GjZcAAQIECBB4lsC+PDi72vOx5srxMYdSLjWVW9YRtLcEe3L1zFd+UZP1kF3tXS9HxnSVcx8BAgQIECBAgACBSgGBeyWUagQIECBAgACBjgIJS/NC1ISlNVd2HqfuuaZyyzq7Uj872tN+7Q77PMKO9pbQA1RvjvnJcTEpXa+E7NnF3pSu7biPAAECBAgQIECAAIEKAYF7BZIqBAgQIECAAIGOAs057TXhdoLRHPFx7Pist27blW+mL4eWbf907dOp5X2qdxdojovpE7Ln6c257AnaxziOqPsI3UmAAAECBAgQIEBgxQIC9xVPrqERIECAAAECTxPYlyd/W8qusgfflXo5R33oYDT9yI72tuFtjrM5lnKu7L9q/QQyTzkyJvNU88uZ156WX5CcrmXotdRvhO4mQIAAAQIECBAgsBEBgftGJtowCRAgQIAAgUkEduUpOT6mNuBOQJqg/Txw75rzvvct2xW0twTrUT1rpZmnfN71akJ2Lz/tKug+AgQIECBAgAABAgMKCNwHxNQUAQIECBAgsFmB5iWkx0qBHB+ToP1UWb+mWvNizbS7q7nhpo6gvSVYx+rNueyZoz4vP82Z+gnYs35+7NgXtxEgQIAAAQIECBAgMIKAwH0EVE0SIECAAAECmxLIbvbsat9VjvqbUu9YylBHfuS5XV6Emu7mKJucGy+0rZy8jtVyLnvWyaHj/bmtefmp+eqB6FYCBAgQIECAAAECYwsI3McW1j4BAgQIECCwVoFdGVjOad9XDjC7yLOzeahwO8/tcj57upug/VjKpbLvqrUXyProe2RME7JnN3uKiwABAgQIECBAgACBmQsI3Gc+QbpHgAABAgQIzE4gx4J8XUrC85orx3+k7lCBaULcLkeSJLzN7uhTKZeajqvTSaDr+fm3D/t0XS+ZKxcBAgQIECBAgAABAgsSELgvaLJ0lQABAgQIPFFgV579+xeen6+n3F+vff22XoLrPudYp63sFr89miWf3+4gv/3vBN+XnoYJUxNap++PribgTv2+x8fkec2xMS95v9WXjLsJ2vv249GYt/r9zEnXY30as7z8NPOUX8yYp62uJOMmQIAAAQIECBBYvIDAffFTaAAECBAgQOChwB9varwUcu/vWhgiCH/YqSdXuA3qz9e+NB8TfN4HnvnFQM5pv7d6bRjZoZxd6Jee49yV+7Ob/tChnRxhc7qWDre7pUIgZ7Nnbr6oqPtSleblpwna+66Vjl1wGwECBAgQIECAAAECQwoI3IfU1BYBAgQIEBhPIIHvb6/N3wfi+d7tjuv9eN3YVMsJQJsQtNY0AeqhlHNPqQS5Cexrn3v7uJzPfhqgDz2HsNrb87PWHOuz6zDK5lx2c9QBzy0ECBAgQIAAAQIE5i4gcJ/7DOkfAQIECKxR4DY8vw3Lbz/fwi7ztc1tgu5Dj0FlzhO0H0tpG+QmxE2Aa6d0jwl4cGvmJH9tkN3sNUcK3TfX/MWBI2PGmyMtEyBAgAABAgQIEHi6gMD96VOgAwQIECCwAoHbI1v2N+N57fMVDNkQXhHIUTQ5ruZ8LQlZH127UqHr+d/OZ3+k2//7ff7awC9C+vtrgQABAgQIECBAgMCiBATui5ounSVAgACBiQSye/UP12clDE3Jdfv5/TEuE3XNYxYocCp9zu73813f9+W/E7R3Of87QX7zgs0Fksy+y33+2iCDyxn+mffsZncRIECAAAECBAgQILAhAYH7hibbUAkQIEDgN81RLrfHteyKS0quPaNXBbJTNzu3769L+UJK7ddv6zW7wfuw3//i4/4ontv5vT3Kp88zu957Ljf+uZRmx3T60/ZKcJ+g/aW5aNuW+v8qkPXS9a8N7Ga3oggQIECAAAECBAgQ+I3A3SIgQIAAgTUINEe63IatTRDrLPTf/Ob+WJMEv7dXwtuE37fXfZ01rJPbMeyv/3EoH/MCzDlfCXITsqfcz9Oc+72kvmU9ZB1kPbS9frrOzantjeoTIECAAAECBAgQILA+AYH7+ubUiAgQILAmgSZI35VBpeTaXz/efm1NY35tLDmr+3LzzfPN5/eB+UsB+haM2owx6+dDKbXHuTS/tLg9bqjN87rUFeR2UWt3TxOyN/+utLk7f21wKuX2Z7HN/eoSIECAAAECBAgQILBCAYH7CifVkAgQILAQgSZMb3aiJwBN2cKO9Nvw/FLGnJLr/ogVQd44i/nr0uxX17X26AnZXZ66p7uKzXrdX9dt/vv25bmP2n3r+zn/O7vZzX8fxdfv7XM+e/PXBlkPzc/tOL3UKgECBAgQIECAAAECixQQuC9y2nSaAAECsxfYWpiencjNUR+3u8tf+3z2E7jSDu7LuL4tZVc5vm9KvePN3D66Le222TV/257zvx/p9v9+gvacz177y5bbJ/prg/7+WiBAgAABAgQIECCwCQGB+yam2SAJECAwqMBWwvTmCJHbXee3n1+Kaopr/gK70sU2QXjm/tBifvelbtfzv/PXDsdSvi/F+ezjrKXMf/6qIXPa9vLXBm3F1CdAgAABAgQIECCwcQGB+8YXgOETIEDgTqA5n7o51uX+49LBbo9yaXaf34bozj5f+gz/c/+bHc3HymFlfWT3c8LvR1efY0nSdkL9HBtT86xHffH9lwV25ctdgnZ/bWBFESBAgAABAgQIECDQWUDg3pnOjQQIEFikwFoD9dsjXc7XmbmUjym5mq8tctJ0upNAXoaaXe27yrvfl3oJwB/tMk97OZbkUEp+ntpe2TGdUL9Zm23vV/+xwL5USdCej22u/MIla+BUsQ7atKsuAQIECBAgQIAAAQIbEhC4b2iyDZUAgU0IrC1Qb4L0l3ah335tE5NrkFUCu1Ir57Tvq2r/Y6f5oZTLg/qfl+8nKK9t96XmsnM6/XsU6ld2XbU7gcxNl6Dd+eyWEgECBAgQIECAAAECgwkI3Aej1BABAgQmEVhToN6E6Qk6U24D9PMkmh6yJoExjo/ZFaDmbPZ83vfKLvpj30bc/y8C+/KVLkF7ftmS+fDvjUVFgAABAgQIECBAgMBgAgL3wSg1RIAAgcEEmlB9V1pM+ayUfC2h0lIuYfpSZmod/WxzfEx2mefYkOMbQ8/PWo6NSbtDXTmuJD/PruEEMk9dgvbvrvN/Ga4rWiJAgAABAgQIECBAgMA/BATuVgIBAgSeI5Dg7fel3IbpzQtKn9Oj+qcK0+ut1BxXID9HbY6Peev89Pz8ZTd7jo1Ju0Nf/14azEt5Xf0F9qWJtkG7F6H2d9cCAQIECBAgQIAAAQIVAgL3CiRVCBAg0FEgYfpvS0k41ITpSwjVm0D9fB33/ceOHG4jMJhAl+NjDuXpzVq+7Uh+PptjY7p0MCH+H0rZvXHzf5TvZVe9q59A5qpL0B77mhfi9uuduwkQIECAAAECBAgQIFAEBO6WAQECBPoJ/PF6e4KgJkzflc9T5no1gXp22zbnpt9+nGu/9YtABBKOJzzNz9uj67XjY/Lz2eds9qbd70s7OXrm8EZHcnzJW99/NAbf/8e/p23+kiFmzRwJ2q0gAgQIECBAgAABAgQmFRC4T8rtYQQILFQgYU9z/Es+z8715iiYOQ5JoD7HWdGnvgL5mftQyr6yofvjYxLQf17KoUUb94/KSzZP15L2/nb9t+C1LuVnMf3NL7Rc7QXy7212tGfOaq+clX8sJb8M4V6rph4BAgQIECBAgAABAoMJCNwHo9QQAQIrEMhu9WaX+u3Z6nMbmkB9bjOiP2MK5GcyoWvOVq+5ErgeSjlfK+/Lx+xm/+L6813Txm2d7JROeHss5XL9Rv59SNj+1i57YXtb6f+t3/bIoNzZBO2n7o91JwECBAgQIECAAAECBPoLCNz7G2qBAIFlCSTIyXnLt4H6rvx3ypyu7KS9P+7lUr6W4iKwFYG2x8ccC0yOEMnPc58jY+KbwDxt3e+UTvif57x1Cdu7r9Ac0RPfmiOD8hRBe3drdxIgQIAAAQIECBAgMIKAwH0EVE0SIDALgdtgfVd6lIB9P4ue/W8nbkP1S/lyyo+lOAZhZhOlO5MLtD0+JuekH0vJX6lkJ3tKl6vZzZ6gPT+Lt1f+Hak5Rzx9yW58P8ftZiD/Psc3zjXXa+fz19yrDgECBAgQIECAAAECBEYTELiPRqthAgQmFEg4l13rCWoS2uRjbWgzZjcTCCW0u1xLE6afx3yotgksWKDt8THZSd4c7XLoMe7XdrM3TSbATxj8aNf1N6VO7dE3Pbq7qlvzb3XNLzKaQXsZ6qqm32AIECBAgAABAgQIrE9A4L6+OTUiAmsWSDCTl5fuS0nInv/Ox2deOc7gUsp9mH5+Zqc8m8ACBdocH9MML7vIH4Xgr1HkZzfHxWQ3e36GX7rSdsLgmh3zfyn1Tgt0f1aXY9scH1Pbh/fX+fLXA7Vi6hEgQIAAAQIECBAgMLmAwH1ycg8kQKBSIEdD3Ibq+bxrsFb5yDer5fiXy7U0u9bvj5wY4jnaILA1gbbHx/T1yZEvCdpT3rpqfwGQ4D6BvH8P6mdmX6q2OT6mOTIo/wa7CBAgQIAAAQIECBAgMGsBgfusp0fnCGxGoDkSJiFMPn/WrvXb3eoJdm6Pg9nMZBgogYkE2h4f06dbj46MuW17V/6j9oiTT6XuoRQ7rutmJ3P+4WpWc0d+0Xks5VxTWR0CBAgQIECAAAECBAjMQUDgPodZ0AcC2xJowvUmWN8/YfgJ3y6lJFC/PwrmCd3xSAKbE6jdPd4HJmd9n66lZvd52yNO/qO0neNoXHUC+SuAmnPw01p++flVKY/+CqHuyWoRIECAAAECBAgQIEBgQgGB+4TYHkVggwLPDtfvg/Vmx/oGp8KQCcxCYOzjYxKyN8fFtAlr8wuAYym7CqX8u3IopSbEr2huE1XilbD90dW8EDVz4SJAgAABAgQIECBAgMAiBQTui5w2nSYwS4HsDs256/tSEqrl41RXQpqEX+dSLteSz10ECMxDYOzjY3K0SwL2U8vh5t+pr1v8e5WXdh5bPmPr1Q8FoCZszxxmV3v+DXcRIECAAAECBAgQIEBgsQIC98VOnY4TeLrA7bnrCa12E/WoeXlpcxxMcyTMRI/3GAIEWgqMdXxME7InaG973uQL5wAAIABJREFUhnr+vUrQfqgci13tlVB31eL7KGx3fEw3W3cRIECAAAECBAgQIDBTAYH7TCdGtwjMUOB+93p2rI553e5ab46CcYTDmOLaJjCswL4012b3eM3T8wu3UyldQva03/acdkec1MzKy3XyS9m/Xc1fa+Wb8o1jKW1/YdK9V+4kQIAAAQIECBAgQIDAyAIC95GBNU9goQK70u8/lLK/lgQnY1734bqz1sfU1jaBcQTy70Z+MZeXY+bfjqF+KZeQvTmX/dKx603QniNLavvliJOO2Nfb/l4+vva/Hfk3P+vk3O8R7iZAgAABAgQIECBAgMD8BATu85sTPSLwDIEEUJ9fQ7IEZbsROyFcHxFX0wQmFBjrWKn8G5EgtgnZ++5+bvNC1PDliJPDtQ8Tcq7qUR/LaN69MqLMb/53xl8srWrKDYYAAQIECBAgQIAAgUZA4G4tENiuwG3APtYOduH6dteXka9PYMxjpfJvRROw5+MQV9ugPX04lpKw2NVdYF9uzVEyL10xzv/eXLo3704CBAgQIECAAAECBAjMW0DgPu/50TsCQwrsSmPNcQ/5U/4xrrxYMLsWz9ciVBlDWZsExhfIX73k34uEo/trGfqp2UmecP10/XdjqPbT3w/Xvte2+b5UTNDedzd97fPWXC9he+bgpevP1zlf8/iNjQABAgQIECBAgACBjQsI3De+AAx/9QK7MsLsZD+UMsYu9pytfC6lCdmFVatfUga4UoH8W3G7g32Mfy9uj4rJvxuXgS33pb22L2n9rtxzHKEvAw9tMc3lf2u+faW3ORN/rF/2LgZIRwkQIECAAAECBAgQWL+AwH39c2yE2xNozmNPsDFkuNGEZQnKmoB9e7pGTGAdAvfh+m7EYSXUzu7xsc7s3pe22wbt+WXhsZT8e+YaTuA/S1MvraX870e+7peyw1lriQABAgQIECBAgACBmQoI3Gc6MbpFoINAwoyETgnZE7r3vXI8zLmUJly/9G3Q/QQIPEUgu9Wb42Hy+Ri7118aWP4N+er678gYA99f/83Lx9pL0F4r1b5e/rfnr6/c9pfy9VP7Jt1BgAABAgQIECBAgACB5QkI3Jc3Z3pM4F4gYdO7UvruZs95yudrybnKdiJaawSWJ5Aw/Q+lNMF6/n2Y+hr75aMZU9sd7fn37VjKaWqMDT0v/7uRI8zur9jvNuRgqAQIECBAgAABAgQIbFxA4L7xBWD4ixZIgJHQ6dBxFLdHxJxLG2Md99Cxe24jQOCBQP4NaML1ffk8IfsQf93SBz7Hx2RX+xi/sMsYBe19Zmfce//rlebtbh/XXesECBAgQIAAAQIECMxMQOA+swnRHQKVAodS70OHcC0he3YhNqXycaoRIPBkgWbn+q70Y1/KHML1W5Ixj4/JeAXtT16ADx7/1nEy/m/Nec+d3hEgQIAAAQIECBAgMLCA/ydoYFDNEZhA4NvyjEOL5wjZW2CpSuDJAtmhnl3rCZl3pUx95vq5PPP3pdQeUTXm8TExaBu0pz95QWvKGLvsn7w8Zvv443Wu7juYM/Mzjy4CBAgQIECAAAECBAhsRkDgvpmpNtCVCLwWarw0vBztYCf7SibeMFYpkDA94XY+JpScctd6ztXOMVIp52vZlY/5hV76UnONdXxMni9or5mB+dR57X+b3pcu5nsuAgQIECBAgAABAgQIbEZA4L6ZqTbQFQgkjPt7xTi+uQYcdndWYKlCYAKBP5Zn7K4lP8f5PB+nurLruwnWm4+3/z5kV31evHys7NBYx8fkhZs5/31f2Y9Us6O9BdaIVbN28kuS+0vgPiK6pgkQIECAAAECBAgQmKeAwH2e86JXBF4SeC3QeKR1fqFCQrf7QP6lr+U4ABcBAo8FdqVKs1s9nzdHwSTMnvrKz+3t7vXLGx3I0TF5H0T6/Oga6/iYL8uD8+9bTR+aPgraH83WtN/P/AncpzX3NAIECBAgQIAAAQIEZiogcJ/pxOgWgRcEXgs0psY63z0wwX3CvdvrUv4j5fbKERb3X5u6755HoI/ArtycUD0fU5ojYPZ9Gu15b3ab3+5ev/9ZfK359P/Zx8cI2ntO/oxuP5a+CNxnNCG6QoAAAQIECBAgQIDA8wQE7s+z92QCbQUSkCVM+23bG2dc/1L6lnJ71X6tOSZjxsPTtYUJ5GfsNlDPf9+WZw7n9liY/Iw0O9jb9mkOx8cI2tvO2vzrH0sXBe7znyc9JECAAAECBAgQIEBgAgGB+wTIHkFgQIHsqM2LUBMKul4WOL/w5Uv5Wsr99VLd1HGUzvpW1+7m56bZmZ6v3Za5jDq71rNeb3euD/FOhmcfH9MlaM9fxnws5VTKEAZzmeO19eNYBiRwX9usGg8BAgQIECBAgAABAp0EBO6d2NxE4OkCzYsF85JB1zQCLx2d0zz5/EoXLuXrKS9dCVUFiP3mLru1/3BtYlc+puRqAvV8P5/P9Wp2rTe71bNWXltLfcYQlzbHx3wq9Q8Drc9mR33+zWpznn2C9mMppz4Dd+9kApkrgftk3B5EgAABAgQIECBAgMCcBQTuc54dfSPwWKAJFPelahMy5uOajp15rLDOGucHw3r0/dz+1i8J3mp+6B3+u/Kwmr/KyDq+vZo13Xwt7aQs7WreX5A5a+YkIfvYv3Bpe3xM+nkopWZtPZoDQfsjoXV9/1iGI3Bf15waDQECBAgQIECAAAECHQUE7h3h3EZgQQL7F/pa+7U/Lmicukrg2QL5RcXlWhKo5/N8fMbV9viYHNtyHKCjgvYBEBfYRNaOwH2BE6fLBAgQIECAAAECBAgMLyBwH95UiwTWLPDSER27MuCU2+ulr9l5v+aVsZ2xNbv/z2XIzW71S/k8ZQ5XfvbaHh+T41769r9r0J6jlRL2n+aApw+dBY7lToF7Zz43EiBAgAABAgQIECCwJgGB+5pm01gILE/g/siQjKD2awkWa44pWZ6KHj9T4DZQTz/O1840H5/Zt0fPTuBZe1b6UMfHdA3a43y88X00Nt+ft0DmUuA+7znSOwIECBAgQIAAAQIEJhIQuE8E7TEECEwmsH/hSbvytZT766W6CRCbF3FO1mkPGl2geUFpHnS5lnx+vj65+Th6R0Z4QNZxdrW/tMbvHxeHoY6PeVfaOpbS5mWogvYRFsAMmsw6ELjPYCJ0gQABAgQIECBAgACB5wsI3J8/B3pAgMAyBF46Tic9f+3r+V4C0JSXLkfsDDPvzY702xfEXkrTKbnOwzxmlq1kbX0oJee111yfSqUhjo/5srRzfGNtv9QXQXvNDC23TtaDwH2586fnBAgQIECAAAECBAgMKCBwHxBTUwQIEBhQYP9GW2+F/Le31da7f9TQL8vN8SWXCpvzXZ28cDRBenPdhuoVza26yjOOjxG0r3pJ9RrcsdwtcO9F6GYCBAgQIECAAAECBNYiIHBfy0waBwECBAhsQWBfBjn18TGC9i2srH5jFLj383M3AQIECBAgQIAAAQIrEhC4r2gyDYUAAQIEViuwKyOb+vgYQftql9PgAxO4D06qQQIECBAgQIAAAQIEliogcF/qzOk3AQIECGxFoO3xMTmn/fuOODmGKEF72kjIX3s5o71Wap31jmVYjpRZ59waFQECBAgQIECAAAECLQUE7i3BVCdAgAABAhMJ7Mtzao+PSZfel/KxlNtz72u7uisVm6A9oXvtJWivlVp3vWMZnsB93XNsdAQIECBAgAABAgQIVAoI3CuhVCNAgAABAhMJJPDO8TGHyucl9E7dS2X922q78h8JSmuf1dybF+EeSzl1eKZb1ieQtSBwX9+8GhEBAgQIECBAgAABAh0EBO4d0NxCgAABAgRGEnh3DbJrdpkn9O56fMzn13v3LcchaG8JtpHqAveNTLRhEiBAgAABAgQIECDwWEDg/thIDQIECBAgMLZAgu/sav+s8kFdjo/pej57uvRTKTmu5lTZP9W2JXAsw7XDfVtzbrQECBAgQIAAAQIECLwiIHC3NAgQIECAwPMEpjg+ZncNQ78oH2t2zt9qOKP9eWtjSU8WuC9ptvSVAAECBAgQIECAAIFRBQTuo/JqnAABAgQIvCow9vExeQnqoZR9hzn4VO7JjvZzh3vdsj2BYxmyHe7bm3cjJkCAAAECBAgQIEDgBQGBu2VBgAABAgSmFUgAPtbxMbvSdhO05/O213flhoSnl7Y3qr9pgawZgfuml4DBEyBAgAABAgQIECDQCAjcrQUCBAgQIDCNQJfjY/JS1B8rupeXoB5KybExba9fyw3ZzZ7yS9ub1SdQBI6lCNwtBQIECBAgQIAAAQIECBQBgbtlQIAAAQIExhdoc3xMAvAE7acH3dqV7/fZze5FqOPP+1aeIHDfykwbJwECBAgQIECAAAECDwUE7g+JVCBAgAABAp0FPit3fltKPtZc35RKCS/f2mneZzd7+pBjY06lnGs6pA6BCoGsWTvcK6BUIUCAAAECBAgQIEBg/QIC9/XPsRESIECAwPQCOT4mAWR2qtdcP1zrvnZ8zK58P7vkD6Wk7bbXz+WG07Vc2t6sPoEHAsfrer+v9r58Id9zESBAgAABAgQIECBAYDMCAvfNTLWBEiBAgMBEAjnmJeeh1wTjbx0fk/uzmz2hfe0O+fshJsg/XctEw/eYDQocy5jtcN/gxBsyAQIECBAgQIAAAQL/KiBwtyoIECBAgMAwAgnFP5Syr2zuteNjcn9C+7wAtSa0v39cQvxTKQn9L5V9UY1AH4FDuTlHJ91fn67ruE/b7iVAgAABAgQIECBAgMCiBATui5ounSVAgACBGQoMcXzMroyrzwtQw2I3+wwXx0a6tC/j/NsLY82azPdcBAgQIECAAAECBAgQ2IyAwH0zU22gBAgQIDCCQJ/jY4Y4MsZu9hEmVZOtBV4L3C+lpX9r3ZobCBAgQIAAAQIECBAgsGABgfuCJ0/XCRAgQOBpAm2Pj/mu9DRnsf9SSs5lz3Exhx69z1Ed35dy6tGGWwkMKfBfrzTm/9YcUllbBAgQIECAAAECBAjMXsD/EzT7KdJBAgQIEJiRQNvjY34qfU/QfinlXSkJ2ncdx/Nzue90LWnPRWBOAq8F7v+3dDK/aHIRIECAAAECBAgQIEBgEwIC901Ms0ESIECAwAACbY+PyUtL/7OUBO7ZEd/1yu74Uynnrg24j8AEAlmff3zhOX+ydifQ9wgCBAgQIECAAAECBGYjIHCfzVToCAECBAjMVGBX+vVtKfvK/mU3748t6r/UbHbGJ7DPsTF2B1fCq/ZUgXN5+kuB+1/K109P7ZmHEyBAgAABAgQIECBAYEIBgfuE2B5FgAABAosSyPExOQbmOFGvc2RMAvYE7ZeJnukxBIYSyM/J1y809n7Cn6GhxqIdAgQIECBAgAABAgQIdBYQuHemcyMBAgQIrFggZ61/KGU38hh/Le03Lz89j/wszRMYU+BYGn8pcM+RSIcxH6xtAgQIECBAgAABAgQIzElA4D6n2dAXAgQIEHi2wK50oM3xMV37+0O58VSKI2O6CrpvbgL70qG/vdCprPV8z0WAAAECBAgQIECAAIFNCAjcNzHNBkmAAAECFQLZnZsXnOYomTGuHBlzupbLGA/QJoEnCuzLs18K3PM+g39/Yr88mgABAgQIECBAgAABApMKCNwn5fYwAgQIEJihQILC7GrfjdA3R8aMgKrJ2Qr81ys9839vznbKdIwAAQIECBAgQIAAgaEF/D9AQ4tqjwABAgSWIpCd7Dmn/TBChx0ZMwKqJmcvIHCf/RTpIAECBAgQIECAAAECYwsI3McW1j4BAgQIzFHgXenUsZQhj49xZMwcZ1qfphS4lIf9/oUH/ql87TxlRzyLAAECBAgQIECAAAECzxIQuD9L3nMJECBA4BkCn5WHZlf7fsCHf1faystPU1wEtixwLoP/4wsAAvctrwpjJ0CAAAECBAgQILAxAYH7xibccAkQILBRgexkb3a1D0GQ3ewfSzmV8ssQDWqDwAoEBO4rmERDIECAAAECBAgQIECgn4DAvZ+fuwkQIEBg/gL70sWhXoqa3ewJ2RMsuggQ+GeB/FzY4W5VECBAgAABAgQIECCwaQGB+6an3+AJECCwaoHsak/Q/kXPUdrN3hPQ7ZsRyF995C9J7q//KF/I91wECBAgQIAAAQIECBBYvYDAffVTbIAECBDYpMAQL0W1m32TS8egewgcy71fv3D/+/K1fM9FgAABAgQIECBAgACB1QsI3Fc/xQZIgACBTQn0fSnqr0WrOZv9sik5gyXQXyChusC9v6MWCBAgQIAAAQIECBBYsIDAfcGTp+sECBAg8N8COTrm81K+KiWBe5frp3JTE7R3ud89BAj8Yxe7wN1KIECAAAECBAgQIEBg0wIC901Pv8ETIEBg0QIJ2XM++6HHKHJsTIL2H3u04VYCbQV25YbfX2/KL4nyS6Nct5+/9N9tn/Oo/rlUSPk00M/AsbQjcH+k7vsECBAgQIAAAQIECKxaQOC+6uk1OAIECKxOYFdG9GUph1LyeZfLS1C7qLmnjcAfr5X3r3xs09ZUdU/lQTlr/dLjgcdyr8C9B6BbCRAgQIAAAQIECBBYvoDAfflzaAQECBDYgkBC9uxmT+ly5Wz270uxm72LnnteEkionp3p2ZW+u5b7HepLlDuWTn9Tyi8dOp97Be4d4NxCgAABAgQIECBAgMB6BATu65lLIyFAgMDaBBJivivlUEpz5EbbMf5QbjiVkrC9S4DY9nnqr0sg6+4PpTRB+r58nnWZsubrUgb3l1LOLQd5LPUF7i3RVCdAgAABAgQIECBAYF0CAvd1zafRECBAYA0COZv9UErX3ewxyJnUeYnqZQ0gxjCJQHas70pJuN6Urr/omaTDEzwk7zY4XX+ean6WjqWuwH2CifEIAgQIECBAgAABAgTmKyBwn+/c6BkBAgS2JJBgM8fGJCTf9Rh4zmc/lHLu0YZb1y2Q9ZUXlu5LaY6DyUfX2wIJ3/OXIvnZyhFN+e/bvwCIYUxf+vnN2fBHwAQIECBAgAABAgQIENiCgMB9C7NsjAQIEJivQAK7HBuToL3vbuKcO51Qz9Ex853vqXuW8Lc5EmZfPp/LGetNYB2Py7Xcf57/Tqg91nrOz9vh+jPz25EnRuA+MrDmCRAgQIAAAQIECBCYj4DAfT5zoScECBDYmkCOnhgiaP/pGhwmnHRtVyBhehOuP/tImKzJBOVNYN58vJSvpczpSvD+sZT8hclY159Kw+exGtcuAQIECBAgQIAAAQIE5iQgcJ/TbOgLAQIEtiGQYO9Yyq7ncLNLOO0kLHRtS+A+XN8/Yfg5vuhSSsL024/5fIlXDE+l5LidIa/88sGRPUOKaosAAQIECBAgQIAAgVkLCNxnPT06R4AAgVUJ7Mpovi0lwV7f64fSwKGUS9+G3D97gbzMtNmxnjU0xPppM+gExllnCdabnernNg0srG5+ro6lDBG8+zld2OTrLgECBAgQIECAAAEC/QUE7v0NtUCAAAECjwW+KFUStvc9pz272hMI5uWNrnUJ7K4h7758TMCe/55yZ3SzY/1cnnu7a31dyvWjaV6Cmp+3HNXT5vp0/Rk9tblJXQIECBAgQIAAAQIECKxBQOC+hlk0BgIECMxbIGe1HwfoopeiDoA4gybyS5fmrPVd+bwJdqfsWnatNzvWb3euT9mHJT0r85RfmjXzlY/NDvjsYm/Oqz9fXcd60euSzPSVAAECBAgQIECAAIGNCgjcNzrxhk2AAIGJBPJS1A89n5Wdx4dSEua5liOwK11NKHu7Wz2f9/0rh7YCCYTvw/W2bahPgAABAgQIECBAgAABAgSqBATuVUwqESBAgEAHgX25528d7ru95X35j2PPNtw+nkAC9N+WkrnOdf9xvCe/3LJwfWpxzyNAgAABAgQIECBAgACBfxIQuFsQBAgQIDCWwP8rDXfdzexli2PNSl27eVFprsxfc4767e70fV0zo9XKWf7ZtX6+fmzOXB/tgRomQIAAAQIECBAgQIAAAQI1AgL3GiV1CBAgQKCtQALZLrvbE6QeS/nY9oHqPxRodqOnYhOe3wbqu/L1lLld9y8zFa7PbYb0hwABAgQIECBAgAABAgT+R0DgbjEQIECAwBgCx9JoXpba9kqY2ryAsXnx4qV8LSVXE762bXct9ZsXjjbjuT8TfX8z0F35PGVJV/6yIXN9e+a6F3AuaQb1lQABAgQIECBAgAABAhsXELhvfAEYPgECBEYSyA71dyO1fdtswtmU5rr/73z9pa/l60OE97e7xmuGu3+lUtuv1zxrznV+us5LE6xnjvK5iwABAgQIECBAgAABAgQILFpA4L7o6dN5AgQIzE4gO7C/LeWL2fVMh54h0OxYbwJ1wfozZsEzCRAgQIAAAQIECBAgQGAyAYH7ZNQeRIAAgdULZEf7sZSuL0pdPdAKB9j8lUCC9NvSHA20wiEbEgECBAgQIECAAAECBAgQeF1A4G51ECBAgEBfgV1pILva930bcv9sBHLkS3N2+vnaq0v5mJJLoD6bqdIRAgQIECBAgAABAgQIEJiTgMB9TrOhLwQIEFieQJtd7Z/K8E6l5Nzz3bW0PQN9eULz6fFtiH4p3UrJdb5+bF5WO58e6wkBAgQIECBAgAABAgQIEFiYgMB9YROmuwQIEJiJwK7046+lJDB/dOXYka9K+f6NijmG5rat/U3dfL05pmbrAf2vxeL25aKX8t8pzXW++VyA/mhl+j4BAgQIECBAgAABAgQIEBhYQOA+MKjmCBAgsAGBQxnjh1Jqzmp/X+p9LKU5nmRontswPm3f/3e+truW+2fn67/v2aHbXeM1TZ1fqdT26zXPUocAAQIECBAgQIAAAQIECBCYWEDgPjG4xxEgQGDBAgnYc1b7FxVj+KHUya72293YFbepQoAAAQIECBAgQIAAAQIECBBYroDAfblzp+cECBCYUiA7xxO2PzpCJkeeHEvJrnYXAQIECBAgQIAAAQIECBAgQGBTAgL3TU23wRIgQKCTQHa0J2x/dIRMdrUfSrl0eoqbCBAgQIAAAQIECBAgQIAAAQILFxC4L3wCdZ8AAQIjCyRAT9j+1mVX+8iToHkCBAgQIECAAAECBAgQIEBgGQIC92XMk14SIEDgGQI1YXteGpp6zmp/xgx5JgECBAgQIECAAAECBAgQIDArAYH7rKZDZwgQIDAbgZzV/rdS3jpG5pvy/bwY1UWAAAECBAgQIECAAAECBAgQIFAEBO6WAQECBAjcCyRk/3spu1docoRMgvYTOgIECBAgQIAAAQIECBAgQIAAgf8VELhbDQQIECBwL5Cd7fs3wvZ8zxEy1g0BAgQIECBAgAABAgQIECBA4E5A4G5JECBAgMCtwLH8x9fCdouCAAECBAgQIECAAAECBAgQINBeQODe3swdBAgQWKvAvgwsu9tfu/5cvvH9WgdvXAQIECBAgAABAgQIECBAgACBvgIC976C7idAgMA6BHJu+3+W8tpLUt+X7x3XMVSjIECAAAECBAgQIECAAAECBAiMIyBwH8dVqwQIEFiawF9Lh794pdM/lK/vlzYg/SVAgAABAgQIECBAgAABAgQITC0gcJ9a3PMIECAwP4GvSpc+vNKtX8vXd6X8Mr9u6xEBAgQIECBAgAABAgQIECBAYF4CAvd5zYfeECBAYGqBz8oD//7GQ/9UvneeulOeR4AAAQIECBAgQIAAAQIECBBYooDAfYmzps8ECBAYTiAvQf38leac2z6cs5YIECBAgAABAgQIECBAgACBDQgI3DcwyYZIgACBNwReC9x/Kvdk97uLAAECBAgQIECAAAECBAgQIECgUkDgXgmlGgECBFYqkBel5oWpt5dz21c62YZFgAABAgQIECBAgAABAgQIjCsgcB/XV+sECBBYgkBC94+l/L6Un0vJf/+4hI7rIwECBAgQIECAAAECBAgQIEBgTgIC9znNhr4QIEDguQK78vjLc7vg6QQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgSFIJPXAAAHJ0lEQVQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgMD/b8eOaQAAABCG+XeNjZHUASnfCBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfAcH99zvLCRAgQIAAAQIECBAgQIAAAQIECBAgQCAkILiHzjCFAAECBAgQIECAAAECBAgQIECAAAECBH4FBPff7ywnQIAAAQIECBAgQIAAAQIECBAgQIAAgZCA4B46wxQCBAgQIECAAAECBAgQIECAAAECBAgQ+BUQ3H+/s5wAAQIECBAgQIAAAQIECBAgQIAAAQIEQgKCe+gMUwgQIECAAAECBAgQIECAAAECBAgQIEDgV0Bw//3OcgIECBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfAcH99zvLCRAgQIAAAQIECBAgQIAAAQIECBAgQCAkILiHzjCFAAECBAgQIECAAAECBAgQIECAAAECBH4FBPff7ywnQIAAAQIECBAgQIAAAQIECBAgQIAAgZCA4B46wxQCBAgQIECAAAECBAgQIECAAAECBAgQ+BUQ3H+/s5wAAQIECBAgQIAAAQIECBAgQIAAAQIEQgKCe+gMUwgQIECAAAECBAgQIECAAAECBAgQIEDgV0Bw//3OcgIECBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfAcH99zvLCRAgQIAAAQIECBAgQIAAAQIECBAgQCAkILiHzjCFAAECBAgQIECAAAECBAgQIECAAAECBH4FBPff7ywnQIAAAQIECBAgQIAAAQIECBAgQIAAgZCA4B46wxQCBAgQIECAAAECBAgQIECAAAECBAgQ+BUQ3H+/s5wAAQIECBAgQIAAAQIECBAgQIAAAQIEQgKCe+gMUwgQIECAAAECBAgQIECAAAECBAgQIEDgV0Bw//3OcgIECBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfgQGMc9WA31rv6AAAAABJRU5ErkJggg==';
+
diff --git a/vue-options-api-demos/inputs/signature/appearance/all-options/SignatureStyleConfigurator.vue b/vue-options-api-demos/inputs/signature/appearance/all-options/SignatureStyleConfigurator.vue
new file mode 100644
index 00000000..ffdd6c08
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/appearance/all-options/SignatureStyleConfigurator.vue
@@ -0,0 +1,158 @@
+<template>
+    <div :style="{ margin: '-30px -30px 30px -30px' }">
+      <div :style="{ display: 'flex', justifyContent: 'center' }">
+        <span
+          class="k-color-primary"
+          :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+          >Configurator</span
+        >
+      </div>
+      <div
+        class="example-config"
+        :style="{
+          display: 'flex',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+        }"
+      >
+        <span class="k-form-field">
+          <k-label>
+            Color
+            <div class="k-form-field-wrap">
+              <ColorPicker :value="color" @change="handleColorChange" />
+            </div>
+          </k-label>
+        </span>
+        <span class="k-form-field">
+          <k-label>
+            Background Color
+            <div class="k-form-field-wrap">
+              <ColorPicker
+                :value="backgroundColor"
+                @change="handleBackgroundColorChange"
+              />
+            </div>
+          </k-label>
+        </span>
+        <span class="k-form-field">
+          <k-label>
+            Stroke Width
+            <div class="k-form-field-wrap">
+              <dropdownlist
+                :data-items="strokeWidths"
+                :value="strokeWidth"
+                :style="{
+                  'min-width': '120px',
+                }"
+                @change="handleStrokeWidthChange"
+              />
+            </div>
+          </k-label>
+        </span>
+        <span class="k-form-field">
+          <k-label>
+            Size
+            <div class="k-form-field-wrap">
+              <dropdownlist
+                :data-items="sizes"
+                :value="size"
+                :style="{
+                  'min-width': '120px',
+                }"
+                @change="handleSizeChange"
+              />
+            </div>
+          </k-label>
+        </span>
+        <span class="k-form-field">
+          <k-label>
+            Fill Mode
+            <div class="k-form-field-wrap">
+              <dropdownlist
+                :data-items="fillModes"
+                :value="fillMode"
+                :style="{
+                  'min-width': '120px',
+                }"
+                @change="handleFillModeChange"
+              />
+            </div>
+          </k-label>
+        </span>
+        <span class="k-form-field">
+          <k-label>
+            Border Radius
+            <div class="k-form-field-wrap">
+              <dropdownlist
+                :data-items="roundedOptions"
+                :value="rounded"
+                :style="{
+                  'min-width': '120px',
+                }"
+                @change="handleRoundedChange"
+              />
+            </div>
+          </k-label>
+        </span>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import { Label } from '@progress/kendo-vue-labels';
+  import { DropDownList } from '@progress/kendo-vue-dropdowns';
+  import { ColorPicker } from '@progress/kendo-vue-inputs';
+  
+  export default {
+    components: {
+      'k-label': Label,
+      dropdownlist: DropDownList,
+      ColorPicker,
+    },
+    props: {
+      size: String,
+      fillMode: String,
+      rounded: String,
+      strokeWidth: Number,
+      backgroundColor: String,
+      color: String,
+    },
+    emits: [
+      'sizechange',
+      'fillmodechange',
+      'roundedchange',
+      'strokewidthchange',
+      'backgroundchange',
+      'colorchange',
+    ],
+    data() {
+      return {
+        sizes: ['small', 'medium', 'large'],
+        fillModes: ['solid', 'outline', 'flat'],
+        roundedOptions: ['small', 'medium', 'large', 'full'],
+        strokeWidths: [1, 2, 3, 6, 10],
+      };
+    },
+    methods: {
+      handleSizeChange(event) {
+        this.$emit('sizechange', event);
+      },
+      handleFillModeChange(event) {
+        this.$emit('fillmodechange', event);
+      },
+      handleRoundedChange(event) {
+        this.$emit('roundedchange', event);
+      },
+      handleStrokeWidthChange(event) {
+        this.$emit('strokewidthchange', event);
+      },
+      handleBackgroundColorChange(event) {
+        this.$emit('backgroundchange', event.event);
+      },
+      handleColorChange(event) {
+        this.$emit('colorchange', event.event);
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/signature/appearance/all-options/main.js b/vue-options-api-demos/inputs/signature/appearance/all-options/main.js
new file mode 100644
index 00000000..3a6df88d
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/appearance/all-options/main.js
@@ -0,0 +1,4 @@
+import { createApp } from "vue";
+import App from "./main.vue";
+
+createApp(App).mount("#app");
diff --git a/vue-options-api-demos/inputs/signature/appearance/all-options/main.vue b/vue-options-api-demos/inputs/signature/appearance/all-options/main.vue
new file mode 100644
index 00000000..3e8e11b7
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/appearance/all-options/main.vue
@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <SignatureStyleConfigurator
+      :color="color"
+      @colorchange="setColor"
+      :background-color="backgroundColor"
+      @backgroundchange="setBackground"
+      :stroke-width="strokeWidth"
+      @strokewidthchange="setStroke"
+      :size="size"
+      @sizechange="setSize"
+      :fill-mode="fillMode"
+      @fillmodechange="setFillMode"
+      :rounded="rounded"
+      @roundedchange="setRounded"
+    />
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <Signature
+        :style="{ minWidth: '330px', minHeight: '150px' }"
+        :size="size"
+        :rounded="rounded"
+        :fill-mode="fillMode"
+        :stroke-width="strokeWidth"
+        :background-color="backgroundColor"
+        :color="color"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import SignatureStyleConfigurator from "./SignatureStyleConfigurator.vue";
+import { Signature } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    SignatureStyleConfigurator,
+    Signature,
+  },
+  data() {
+    return {
+      size: "medium",
+      rounded: "medium",
+      fillMode: "solid",
+      strokeWidth: 3,
+      backgroundColor: "#fff",
+      color: "#000",
+    };
+  },
+  methods: {
+    setRounded(event) {
+      this.rounded = event.value;
+    },
+    setSize(event) {
+      this.size = event.value;
+    },
+    setFillMode(event) {
+      this.fillMode = event.value;
+    },
+    setStroke(event) {
+      this.strokeWidth = event.value;
+    },
+    setBackground(event) {
+      this.backgroundColor = event.value;
+    },
+    setColor(event) {
+      this.color = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/signature/appearance/all-options/sample-signature.js b/vue-options-api-demos/inputs/signature/appearance/all-options/sample-signature.js
new file mode 100644
index 00000000..82d3e903
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/appearance/all-options/sample-signature.js
@@ -0,0 +1,2 @@
+export const sampleSignature = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABdwAAAH4CAYAAABQRy9XAAAgAElEQVR4XuzdjZUjt4EuUL8I7BeBuRFYG4HpCCRHIDqC0UYgTgQzikBUBNZEYCoCSxEsFcGTItiHb83apenuJuqX9XPrHJxudaNQwAV6vPs1GvV/fuMiQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEegv8n94taIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBD4jcDdIiBAgAABAgQIECBAgAABAgQIECBAgAABAgMICNwHQNQEAQIECBAgQIAAAQIECBAgQIAAAQIECBAQuFsDBAgQIECAAAECBAgQIECAAAECBAgQIEBgAAGB+wCImiBAgAABAgQIECBAgAABAgQIECBAgAABAgJ3a4AAAQIECBAgQIAAAQIECBAgQIAAAQIECAwgIHAfAFETBAgQIECAAAECBAgQIECAAAECBAgQIEBA4G4NECBAgAABAgQIECBAgAABAgQIECBAgACBAQQE7gMgaoIAAQIECBAgQIAAAQIECBAgQIAAAQIECAjcrQECBAgQIECAAAECBAgQIECAAAECBAgQIDCAgMB9AERNECBAgAABAgQIECBAgAABAgQIECBAgAABgbs1QIAAAQIECBAgQIAAAQIECBAgQIAAAQIEBhAQuA+AqAkCBAgQIECAAAECBAgQIECAAAECBAgQICBwtwYIECBAgAABAgQIECBAgAABAgQIECBAgMAAAgL3ARA1QYAAAQIECBAgQIAAAQIECBAgQIAAAQIEBO7WAAECBAgQIECAAAECBAgQIECAAAECBAgQGEBA4D4AoiYIECBAgAABAgQIECBAgAABAgQIECBAgIDA3RogQIAAAQIECBAgQIAAAQIECBAgQIAAAQIDCAjcB0DUBAECBAgQIECAAAECBAgQIECAAAECBAgQELhbAwQIECBAgAABAgQIECBAgAABAgQIECBAYAABgfsAiJogQIAAAQIECBAgQIAAAQIECBAgQIAAAQICd2uAAAECBAgQIECAAAECBAgQIECAAAECBAgMICBwHwBREwQIECBAgAABAgQIECBAgAABAgQIECBAQOBuDRAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQEEBO4DIGqCAAECBAgQIECAAAECBAgQIECAAAECBAgI3K0BAgQIECBAgAABAgQIECBAgAABAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAYG7NUCAAAECBAgQIECAAAECBAgQIECAAAECBAYQELgPgKgJAgQIECBAgAABAgQIECBAgAABAgQIECAgcLcGCBAgQIAAAQIECBAgQIAAAQIECBAgQIDAAAIC9wEQNUGAAAECBAgQIECAAAECBAgQIECAAAECBATu1gABAgQIECBAgAABAgQIECBAgAABAgQIEBhAQOA+AKImCBAgQIAAAQIECBAgQIAAAQIECBAgQICAwN0aIECAAAECBAgQIECAAAECBAgQIECAAAECAwgI3AdA1AQBAgQIECBAgAABAgQIECBAgAABAgQIEBC4WwMECBAgQIAAAQIECBAgQIAAAQIECBAgQGAAAYH7AIiaIECAAAECBAgQIECAAAECBAgQIECAAAECAndrgAABAgQIECBAgAABAgQIECBAgAABAgQIDCAgcB8AURMECBAgQIAAAQIECBAgQIAAAQIECBAgQEDgbg0QIECAAAECBAgQIECAAAECBAgQIECAAIEBBATuAyBqggABAgQIECBAgAABAgQIECBAgAABAgQICNytAQIECBAgQIAAAQIECBAgQIAAAQIECBAgMICAwH0ARE0QIECAAAECBAgQIECAAAECBAgQIECAAAGBuzVAgAABAgQIECBAgAABAgQIECBAgAABAgQGEBC4D4CoCQIECBAgQIAAAQIECBAgQIAAAQIECBAgIHC3BggQIECAAAECBAgQIECAAAECBAgQIECAwAACAvcBEDVBgAABAgQIECBAgAABAgQIECBAgAABAgQE7tYAAQIECBAgQIAAAQIECBAgQIAAAQIECBAYQEDgPgCiJggQIECAAAECBAgQIECAAAECBAgQIECAgMDdGiBAgAABAgQIECBAgAABAgQIECBAgAABAgMICNwHQNQEAQIECBAgQIAAAQIECBAgQIAAAQIECBAQuFsDBAgQIECAAAECBAgQIECAAAECBAgQIEBgAAGB+wCImiBAgAABAgQIECBAgAABAgQIECBAgAABAgJ3a4AAAQIECBAgQIAAAQIECBAgQIAAAQIECAwgIHAfAFETBAgQIECAAAECBAgQIECAAAECBAgQIEBA4G4NECBAgAABAgQIECBAgAABAgQIECBAgACBAQQE7gMgaoIAAQIECBAgQIAAAQIECBAgQIAAAQIECAjcrQECBAgQIECAAAECBAgQIECAAAECBAgQIDCAgMB9AERNECBAgAABAgQIECBAgAABAgQIECBAgAABgbs1QIAAAQIECBAgQIAAAQIECBAgQIAAAQIEBhAQuA+AqAkCBAgQIECAAAECBAgQIECAAAECBAgQICBwtwYIECBAgAABAgQIECBAgAABAgQIECBAgMAAAgL3ARA1QYAAAQIECBAgQIAAAQIECBAgQIAAAQIEBO7WAAECBAgQIECAAAECBAgQIECAAAECBAgQGEBA4D4AoiYIECBAgAABAgQIECBAgAABAgQIECBAgIDA3RogQIAAAQIECBAgQIAAAQIECBAgQIAAAQIDCAjcB0DUBAECBAgQIECAAAECBAgQIECAAAECBAgQELhbAwQIECBAgAABAgQIECBAgAABAgQIECBAYAABgfsAiJogQIAAAQIECBAgQIAAAQIECBAgQIAAAQICd2uAAAECBAgQIECAAAECBAgQIECAAAECBAgMICBwHwBREwQIECBAgAABAgQIECBAgAABAgQIECBAQOBuDRAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQEEBO4DIGqCAAECBAgQIECAAAECBAgQIECAAAECBAgI3K0BAgQIECBAgAABAgQIECBAgAABAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAYG7NUCAAAECBAgQIECAAAECBAgQIECAAAECBAYQELgPgKgJAgQIECBAgAABAgQIECBAgAABAgQIECAgcLcGCBAgQIAAAQIECBAgQIAAAQIECBAgQIDAAAIC9wEQNUGAAAECBAgQIECAAAECBAgQIECAAAECBATu1gABAgQIECBAgAABAgQIECBAgAABAgQIEBhAQOA+AKImCBAgQIAAAQIECBAgQIAAAQIECBAgQICAwN0aIECAAAECBAgQIECAAAECBAgQIECAAAECAwgI3AdA1AQBAgQIECBAgAABAgQIECBAgAABAgQIEBC4WwMECBAgQIAAAQIECBAgQIAAAQIECBAgQGAAAYH7AIiaIECAAAECBAgQIECAAAECBAgQIECAAAECAndrgAABAgQIECBAgAABAgQIECBAgAABAgQIDCAgcB8AURMECBAgQIAAAQIECBAgQIAAAQIECBAgQEDgbg0QIECAAAECBAgQIECAAAECBAgQIECAAIEBBATuAyBqggABAgQIECBAgAABAgQIECBAgAABAgQICNytAQIECBAgQIAAAQIECBAgQIAAAQIECBAgMICAwH0ARE0QIECAAAECBAgQIECAAAECBAgQIECAAAGBuzVAgAABAgQIECBAgAABAgQIECBAgAABAgQGEBC4D4CoCQIECBAgQIAAAQIECBAgQIAAAQIECBAgIHC3BggQIECAAAECBAgQIECAAAECBAgQIECAwAACAvcBEDVBgAABAgQIECBAgAABAgQIECBAgAABAgQE7tYAAQIECBAgQIAAAQIECBAgQIAAAQIECBAYQEDgPgCiJggQIECAAAECBAgQIECAAAECBAgQIECAgMDdGiBAgAABAgQIECBAgAABAgQIECBAgAABAgMICNwHQNQEAQIECBAgQIAAAQIECBAgQIAAAQIECBAQuFsDBAgQIECAAAECBAgQIECAAAECBAgQIEBgAAGB+wCImiBAgAABAgQIECBAgAABAgQIECBAgAABAgJ3a4AAAQIECBAgQIAAAQIECBAgQIAAAQIECAwgIHAfAFETBAgQIECAAAECBAgQIECAAAECBAgQIEBA4G4NECBAgAABAgQIECBAgAABAgQIECBAgACBAQQE7gMgaoIAAQIECBAgQIAAAQIECBAgQIAAAQIECAjcrQECBAgQIECAAAECBAgQIECAAAECBAgQIDCAgMB9AERNECBAgAABAgQIECBAgAABAgQIECBAgAABgbs1QIAAAQIECBAgQIAAAQIECBAgQIAAAQIEBhAQuA+AqAkCBAgQIECAAAECBAgQIECAAAECBAgQICBwtwYIECBAgAABAgQIECBAgAABAgQIECBAgMAAAgL3ARA1QYAAAQIECBAgQIAAAQIECBAgQIAAAQIEBO7WAAECBAgQIECAAAECBAgQIECAAAECBAgQGEBA4D4AoiYIECBAgAABAgQIECBAgAABAgQIECBAgIDA3RogQIAAAQIECBAgQIAAAQIECBAgQIAAAQIDCAjcB0DUBAECBAgQIECAAAECBAgQIECAAAECBAgQELhbAwQIECBAgAABAgQIECBAgAABAgQIECBAYAABgfsAiJogQIAAAQIECBAgQIAAAQIECBAgQIAAAQICd2uAAAECBAgQIECAAAECBAgQIECAAAECBAgMICBwHwBREwQIECBAgAABAgQIECBAgAABAgQIECBAQOBuDRAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQEEBO4DIGqCAAECBAgQIECAAAECBAgQIECAAAECBAgI3K0BAgQIECBAgAABAgQIECBAgAABAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAYG7NUCAAAECBAgQIECAAAECBAgQIECAAAECBAYQELgPgKgJAgQIECBAgAABAgQIECBAgAABAgQIECAgcLcGCBAgQIAAAQIECBAgQIAAAQIECBAgQIDAAAIC9wEQNUGAAAECBAgQIECAAAECBAgQIECAAAECBATu1gABAgQIECBAgAABAgQIECBAgAABAgQIEBhAQOA+AKImCBAgQIAAAQIECBAgQIAAAQIECBAgQICAwN0aIECAAAECBAgQIECAAAECBAgQIECAAAECAwgI3AdA1AQBAgQIECBAgAABAgQIECBAgAABAgQIEBC4WwMECBAgQIAAAQIECBAgQIBAF4HflZt+6XKjewgQIECAwFoFBO5rnVnjIkCAAAECBAgQIECAAAEC4wh8WZo9lrIr5VLKn0v5cZxHaZUAAQIECCxLQOC+rPnSWwIECBAgQIAAAQIECBAg8CyBBOzflrK/60B2uf9bKXa7P2tmPJcAAQIEZiMgcJ/NVOgIAQIECBAgQIAAAQIECBCYpUCOjnlXyvGN3v2lfO80y97rFAECBAgQmFBA4D4htkcRIECAAAECBAgQIECAAIGFCXxR+vuhlN2Dfr8v3z8ubGy6S4AAAQIEBhcQuA9OqkECBAgQIECAAAECBAgQILB4gQTsCdoTuD+6fi0VPivl8qii7xMgQIAAgbULCNzXPsPGR4AAAQIECBAgQIAAAQIE6gVqjo+5be2n8h+HUrw0td5YTQIECBBYsYDAfcWTa2gECBAgQIAAAQIECBAgQKCFwJel7rGUXcU92dWeuh8r6qpCgAABAgQ2IyBw38xUGygBAgQIECBAgAABAgQIEHhRYF+++m1l0J4GPpXyVSkXngQIECBAgMA/CwjcrQgCBAgQIECAAAECBAgQILBNgQTtX5eSjzXXz6XSoZRzTWV1CBAgQIDAFgUE7lucdWMmQIAAAQIECBAgQIAAgS0L7MrgE7QnPK+93peKx9rK6hEgQIAAga0KCNy3OvPGTYAAAQIECBAgQIAAAQJbE8gLUT+0DNodH7O1VWK8BAgQINBLQODei8/NBAgQIECAAAECBAgQIEBg9gIJ2t+VknPX83nN9dO1/rmmsjoECBAgQIDAPwQE7lYCAQIECBAgQIAAAQIECBBYr8CXZWgfS6kN2nNO+7GU03pJjIwAAQIECIwnIHAfz1bLBAgQIECAAAECBAgQIEDgWQJflAfn+JhdZQd+LfUSzB8r66tGgAABAgQIvCAgcLcsCBAgQIAAAQIECBAgQIDAegT2ZSh5IWo+1lxN0J6w/ZeaG9QhQIAAAQIEXhcQuFsdBAgQIECAAAECBAgQIEBg+QK7MoTsaM/O9trru1LxWMql9gb1CBAgQIAAgbcFBO5WCAECBAgQIECAAAECBAgQWK7ArnQ9O9oPLYbww7W+oL0FmqoECBAgQKBGQOBeo6QOAQIECBAgQIAAAQIECBCYl0BegvqulK9KqX0haoL2YynneQ1FbwgQIECAwHoEBO7rmUsjIUCAAAECBAgQIECAAIFtCCRoT3BeG7T/fK1/2gaPURIgQIAAgecJCNyfZ+/JBAgQIECAAAECBAgQIECgjcCX1+B8V3lTXoiaHfCC9kow1QgQIECAQF8BgXtfQfcTIECAAAECBAgQIECAAIFxBfal+bwQ9bPKxyRo/3gtv1TeoxoBAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAgREEErAnaN+3aPu7Uje72gXtLdBUJUCAAAECQwkI3IeS1A4BAgQIECBAgAABAgQIEBhGYFea+bqUQ4vmPl2D9kuLe1QlQIAAAQIEBhYQuA8MqjkCBAgQIECAAAECBAgQINBRIC9BTdCeHeq11w+l4rGUc+0N6hEgQIAAAQLjCQjcx7PVMgECBAgQIECAAAECBAgQqBFI0P6ulATt+bzm+rlUOpRyrqmsDgECBAgQIDCNgMB9GmdPIUCAAAECBAgQIECAAAECLwl8Wb54LGVXyZOgPfVPlfVVI0CAAAECBCYUELhPiO1RBAgQIECAAAECBAgQIEDgKvBF+ZgXou4qRX4t9T5eixeiVqKpRoAAAQIEphYQuE8t7nkECBAgQIAAAQIECBAgsGWBfRl8zmnPx9rrvaC9lko9AgQIECDwXAGB+3P9PZ0AAQIECBAgQIAAAQIEtiGwK8PMjvbsbK+9visVj6Vcam9QjwABAgQIEHiugMD9uf6eToAAAQIECBAgQIAAAQLrFtiV4WVH+6HFMH8odfMC1R9b3KMqAQIECBAgMAMBgfsMJkEXCBAgQIAAAQIECBAgQGB1Ar8rI3p3Dc7zec2VoP1YyrmmsjoECBAgQIDA/AQE7vObEz0iQIAAAQIECBAgQIAAgWULZEd7dqjXBu0/X4P207KHrfcECBAgQICAwN0aIECAAAECBAgQIECAAAECwwh8eQ3Od5XN/Xqt/7GyvmoECBAgQIDAzAUE7jOfIN0jQIAAAQIECBAgQIAAgdkL7EsP80LUzyp7mqA9IXvKL5X3qEaAAAECBAgsQEDgvoBJ0kUCBAgQIECAAAECBAgQmKVAgvYcH5OPtdd3pWKOmxG014qpR4AAAQIEFiQgcF/QZOkqAQIECBAgQIAAAQIECMxCYFd6kaD90KI3n65B+6XFPaoSIECAAAECCxMQuC9swnSXAAECBAgQIECAAAECBJ4mkJeg5uiYNkH7D6X+sZTz03rtwQQIECBAgMBkAgL3yag9iAABAgQIECBAgAABAgQWKpCg/V0pOQomn9dcP5dKh1LONZXVIUCAAAECBNYhIHBfxzwaBQECBAgQIECAAAECBAiMI5Cg/VhKm6A99U/jdEerBAgQIECAwJwFBO5znh19I0CAAAECBAgQIECAAIFnCXx5Ddp3lR34tdT7eL2n8hbVCBAgQIAAgbUJCNzXNqPGQ4AAAQIECBAgQIAAAQJ9BPbl5pzT/lllI03QnrD9l8p7VCNAgAABAgRWKiBwX+nEGhYBAgQIECBAgAABAgQItBJI0P51KflYe31XKh5LudTeoB4BAgQIECCwbgGB+7rn1+gIECBAgAABAgQIECBA4G2BXfl2gvZDC6hPpW5eoCpob4GmKgECBAgQ2IKAwH0Ls2yMBAgQIECAAAECBAgQIHAvkJeg5uiYNkH7D6X+sZQzTgIECBAgQIDASwICd+uCAAECBAgQIECAAAECBLYkkKD9XSnZoZ7Pa66fr/W/r6msDgECBAgQILBdAYH7dufeyAkQIECAAAECBAgQILA1gRwd0zZoP5Z7TluDMl4CBAgQIECgm4DAvZubuwgQIECAAAECBAgQIEBgOQJflq4mON9VdvnXUu/jtfxSeY9qBAgQIECAAIHfCNwtAgIECBAgQIAAAQIECBBYq8C+DOxbQftap9e4CBAgQIDA/AQE7vObEz0iQIAAAQIECBAgQIAAgX4CCdpzfEw+1l7flYrHUi61N6hHgAABAgQIELgXELhbEwQIECBAgAABAgQIECCwFoFdGciHUr5oMaBPpW7OdRe0t0BTlQABAgQIEHhZQOBuZRAgQIAAAQIECBAgQIDA0gUStGdH+6HFQH4odY+lnFvcoyoBAgQIECBA4E0BgbsFQoAAAQIECBAgQIAAAQJLFfhd6fi7a3BeO4afS8WDoL2WSz0CBAgQIECgjYDAvY2WugQIECBAgAABAgQIECAwB4EmaM9RMPm85krQfizlVFNZHQIECBAgQIBAFwGBexc19xAgQIAAAQIECBAgQIDAswS+LA/+WEpt0P7rNWjPPS4CBAgQIECAwKgCAvdReTVOgAABAgQIECBAgAABAgMJJGg/lrKrbC9Be0L2lF8q71GNAAECBAgQINBLQODei8/NBAgQIECAAAECBAgQIDCywL60/6GUz1o857tSN8fNCNpboKlKgAABAgQI9BcQuPc31AIBAgQIECBAgAABAgQIDC+QoP3rUvKx9krQfizlUnuDegQIECBAgACBIQUE7kNqaosAAQIECBAgQIAAAQIE+grsSgPZ0f5Fi4Z+KHWzo/3HFveoSoAAAQIECBAYXEDgPjipBgkQIECAAAECBAgQIECgg0CC9uxoP7S4N0H7sZRzi3tUJUCAAAECBAiMJiBwH41WwwQIECBAgAABAgQIECBQIfC7UidBe3ao114/X+t/X3uDegQIECBAgACBKQQE7lMoewYBAgQIECBAgAABAgQI3AskaH93Dc7zec2VoP1YyqmmsjoECBAgQIAAgakFBO5Ti3seAQIECBAgQIAAAQIECDQ72muD9l8L2cdr2E6PAAECBAgQIDBbAYH7bKdGxwgQIECAAAECBAiMIrArrf6+lM9KSdi5v3lKvpfSXHkB5ftSHNsxylRsstEvy6iPd+vsLYgmaE/Y/ssmxQyaAAECBAgQWJSAwH1R06WzBAgQIECAAAECBFoJJFD/Yyn7UhKw52PbKyHnv5dyaXuj+gRuBNoG7bn1m1KOpQjaLSUCBAgQIEBgMQIC98VMlY4SIECAAAECBAgQeCjQBOxflJr7UnYP76ir8OdSzS73Oiu1/lkg6zDHx+Rj7fVdqXgs5VJ7g3oECBAgQIAAgbkICNznMhP6QYAAAQIECBAgQKCbwK7cll3sCdlTxrgE7mOorrvNfRle26D9h3LPoZTLummMjgABAgQIEFizgMB9zbNrbAQIECBAgAABAmsVyE72HNGRcDJHxYx9/ak84Dz2Q7S/CoFdGcWHUtr88idB+9EaW8X8GwQBAgQIENi8gMB980sAAAECBAgQIECAwIIEErKPuZP9NQr/f8OCFsmTupqgPTvaDy2e/1Op+5WgvYWYqgQIECBAgMDsBfwfzrOfIh0kQIAAAQIECBDYuECCzHfXIDM724e4sqP4ci0/lo95KeVfS3mp/U/l6212Kw/RP20sRyBrJkF7gvPa6+dS8VjKqfYG9QgQIECAAAECSxEQuC9lpvSTAAECBAgQIEBgawLNkTH7ngPPLuKE6udrubzQXsLPhKYvXc5v7zkBK709QXt+EZSgvfYXQYL2lS4GwyJAgAABAgT+V0DgbjUQIECAAAECBAgQmI9AE2IeSpd2Hbv1a7nv+2s5l4/Zvf7WlTPg//5KhQSkXfvRsftuW4BAs6O9NmjPmvxYynEBY9NFAgQIECBAgEAvAYF7Lz43EyBAgAABAgQIEBhEIKF3c2xMlwYTjN+G7LVtJDBN2L575QYvS62V3Ea9/NXF8Y31cq/QBO0J2x/94mcbgkZJgAABAgQIrF5A4L76KTZAAgQIECBAgACBGQt8XvqWIzn2HfrY7GRPmJkjY9peCdv/VkrC/peunPPepV9t+6H+/AXaBu0Z0TelHEsRtM9/fvWQAAECBAgQGFBA4D4gpqYIECBAgAABAgQIVAgk6E7QnjByV1H/vkpeYnoqJTva+1wJ2/evNJAwP30TlvYRXv69WR8fSnntlzIvjfC769q+LH/4RkCAAAECBAgQaC8gcG9v5g4CBAgQIECAAAECXQS6vGSyeU4C8FMp2c0+RJD5bWnn8MYgHCXTZYbXc8++DCXntOdj7ZW/iMiaGmJ91j5TPQIECBAgQIDA7AQE7rObEh0iQIAAAQIECBBYmcCujCfhZcLItldCzNO1tL33tfqPwvb35cbjUA/TzqIEspM9O9r3LXqdNZr1cm5xj6oECBAgQIAAgdUKCNxXO7UGRoAAAQIECBAg8GSBhJZtdwk3Xc6xHF3PZn9t2Nlh/9dS0q/Xrjz38GQ3j59eYHddq23mXtA+/Tx5IgECBAgQILAAAYH7AiZJFwkQIECAAAECBBYlkBdMJrjct+z1z6X+qZQE7UOfnZ6dywnbd2/0SdjecsJWUD3roe1fX2SdHq9rdQUEhkCAAAECBAgQGFZA4D6sp9YIECBAgAABAgS2KdDnRag/FbKE7KeR6L4o7eYYmfTxtSt9aPNizJG6qtmJBLIWErR/1eJ5gmpWyTgAACAASURBVPYWWKoSIECAAAEC2xUQuG937o2cAAECBAgQIECgv0CfF6GOfSTHrgwv53EncH/rSti+L2XoXfX9dbUwtECX9ZoX9uYXQsehO6M9AgQIECBAgMAaBQTua5xVYyJAgAABAgQIEBhbYFce0PYojqZPObol4eVlxE6+uz7jrV3tefynUg6lCNtHnIwZNN0naB/jiKMZkOgCAQIECBAgQGAcAYH7OK5aJUCAAAECBAgQWKfAvgyrOaO9zQibXcJjh5e70qkcH5N+Prq+KRXaHCnyqD3fn6dA7S9fmt5PtVbnqaVXBAgQIECAAIGeAgL3noBuJ0CAAAECBAgQ2IRAAuzsaM/HNlfOvW7OZx97F3n6d6zoXALVBO2nirqqLFcgvxjKeti1GMIUf33RojuqEiBAgAABAgSWJyBwX96c6TEBAgQIECBAgMB0As1u9n3LR479ItTb7qRv2dVeE6ymX4dSfmw5HtWXIyBoX85c6SkBAgQIECCwQgGB+won1ZAIECBAgAABAgR6C3QJLfPQsV+EejuwBOy1x8fkvvelHHvLaGCuAl3WbM7wz187XOY6KP0iQIAAAQIECCxNQOC+tBnTXwIECBAgQIAAgTEFuoSW6c+UR3HkBZg5Pqb2/PX8EiB17Wofc+U8r+39dT3kY+015S+GavukHgECBAgQIEBgFQIC91VMo0EQIECAAAECBAj0EEiA/Xkpx1J2LdrJWeinUnJG+6XFfX2q5hcCeV76/OhK/zKm1HetT2BfhtT2vQKC9vWtAyMiQIAAAQIEZiYgcJ/ZhOgOAQIECBAgQIDAZAIJrd+Vkt3fNQF207EE2QmxU8Z+EWrzzISrH0r5rFInweqhlEtlfdWWI5C1IGhfznzpKQECBAgQILAxAYH7xibccAkQIECAAAECBP47XO8StP9c7juWcprQMAF7gvaErDVX+phfIHxfU1mdRQlkDbQN2p+xZheFqrMECBAgQIAAgaEFBO5Di2qPAAECBAgQIEBgrgJLCtp313D1UInZ7Lo/VtZXbTkCgvblzJWeEiBAgAABAgR+I3C3CAgQIECAAAECBNYusKSgPX3NjvbaoD1zN+ULW9e+VuY0PkH7nGZDXwgQIECAAAEClQIC90oo1QgQIECAAAECBBYn0DVoz/nnOZ99ymNZuvTVCzAXtySrOrwrtXJ0zKGq9j8qOTqmBZaqBAgQIECAAIExBQTuY+pqmwABAgQIECBA4BkCXcLr9PNZAXbC1TYvbs3xMal/egauZ44msCsttw3an/EC39EANEyAAAECBAgQWIOAwH0Ns2gMBAgQIECAAAECjcCX5ZNjKQkva69nBe1t+ypcrZ3RZdXLWhW0L2vO9JYAAQIECBAg8KqAwN3iIECAAAECBAgQWINA2/A6Y15K0J6+vi8lx9z8sobJMob/FtiVImi3GAgQIECAAAECKxMQuK9sQg2HAAECBAgQILAxgbUH7V6Iur4FLWhf35waEQECBAgQIEDgfwQE7hYDAQIECBAgQIDAEgXWHrR/KpOSc9ovS5wcfX5R4LPy1XelHFr4OEaoBZaqBAgQIECAAIE5CAjc5zAL+kCAAAECBAgQIFArsC8VP5SS8LL2WtLRMc/qa62leu0FsmZzdEw+1l6C9lop9QgQIECAAAECMxMQuM9sQnSHAAECBAgQIEDgRYEuoeWzwusl7b633MYT6LJmBe3jzYeWCRAgQIAAAQKTCAjcJ2H2EAIECBAgQIAAgY4C2cmeHe0JL2uvn0rFHMdyrr1hoHqC9oEgF95M1qod7QufRN0nQIAAAQIECHQVELh3lXMfAQIECBAgQIDAmAK7a2h5aPGQn0vdYymnFvf0rfq70sDn1+emz7XXs3bf1/ZPvfYC+YVL1uu+xa12tLfAUpUAAQIECBAgsAQBgfsSZkkfCRAgQIAAAQLbEdiVoWZ3cILL2utZQXtegJmd9Anday9Be63Ucup1+csGQfty5ldPCRAgQIAAAQKtBATurbhUJkCAAAECBAgQGEkgoXXbAFvQPtJkaPahQNe/bBC0P6RVgQABAgQIECCwbAGB+7LnT+8JECBAgAABAksX6BK0J7Q8lvJxwsF36We6Z0f7hJM0waO6rgNB+wST4xEECBAgQIAAgTkICNznMAv6QIAAAQIECBDYpkDbozieEVp2DVgF7eta07synLZHHUXgGWt2XfJGQ4AAAQIECBBYmIDAfWETprsECBAgQIAAgRUI7MsYvi0lIWbt9b5UzI72X2pvGKBefiGQZzqjfQDMhTaRtdq8DLXNEJrjjr6feM226aO6BAgQIECAAAECIwgI3EdA1SQBAgQIECBAgMCLAgkvs0s4H2uv70rFYymX2hsGqNd2530eaUf7APAzaqIJ2dus1XT/Ge8VmBGbrhAgQIAAAQIECAjcrQECBAgQIECAAIGxBXblAW2P4xC0jz0r2r8XyF8yJGj/qpSs2TZXfuFyupY296lLgAABAgQIECCwMgGB+8om1HAIECBAgAABAjMSSID5oZRDiz49Y6f4/trPz2bezxbdU7WFwK7UfXddp22OD8ojnrFeWwxNVQIECBAgQIAAgakFBO5Ti3seAQIECBAgQGD9Al1eNPpTYcnO4vOEPPvyrLZH3AhYJ5ygkR+V+U/Q/kWH5zzjLzA6dNMtBAgQIECAAAECUwsI3KcW9zwCBAgQIECAwLoF2r5o9BlnXu/KFOSlrQlcay9Be63U/Os1x8a0+YuGjOrXUk6l5EW6l/kPUw8JECBAgAABAgSeISBwf4a6ZxIgQIAAAQIE1iewL0NKiL2rHFrCy+M1vKy8pXe19K3tWfLP2Hnfe6Aa+BeBzH0TtLc9Nia/FErIfirlF7YECBAgQIAAAQIE3hIQuFsfBAgQIECAAAECfQSySzjntO8rG0nQnvAyZarwMgFrgvYcWVN7PWPnfW3f1KsXyLpM0H6ov+V/anoRagc0txAgQIAAAQIEti4gcN/6CjB+AgQIECBAgEA3gV25re1u8anPve5ylrygvdt6mNtdXY+NyTiyTk+lnOc2KP0hQIAAAQIECBCYv4DAff5zpIcECBAgQIAAgTkJdAmxs1P4UMplwoHkZZjHUmqPD2l23uce1zIFdqXbXY+NcT77MudcrwkQIECAAAECsxMQuM9uSnSIAAECBAgQIDBbgbYvRH3Gi0bTx4TmCV9rrmcccVPTL3XqBfalatdjY5q/aPi+tDHVEUf1I1OTAAECBAgQIEBgcQIC98VNmQ4TIECAAAECBCYXSKDZ5oWozziWpW0fg/hNKUdB6+TraYgH5i8XPr/O365Dg/llUN4jkKDdRYAAAQIECBAgQGAwAYH7YJQaIkCAAAECBAisTqDrC1GPE0rsy7Nylnw+1l5TnyVf2y/1HgvsrvP9RflYe1xQ02r+miEBe9bn5fGj1CBAgAABAgQIECDQXkDg3t7MHQQIECBAgACBtQskyPxQyqHFQKfeLb679jHBa+31jLPka/um3tsC2c3+VSn7DlD5i4vsZj+V4tiYDoBuIUCAAAECBAgQqBcQuNdbqUmAAAECBAgQ2IJAdosn2KzdPfzpWv8yEc6uPCd9PLR43jPOkm/RPVVfEchcN2ez5/O2l2Nj2oqpT4AAAQIECBAg0FtA4N6bUAMECBAgQIAAgVUItH3Z6NQhdn4B8K6UYwvt7Gw+lHJucY+qzxfYly50fQmqY2OeP396QIAAAQIECBDYtIDAfdPTb/AECBAgQIAAgf8+oqPNGehTvxC1Cdrb7Lqfuo+WUX+Bvi9BbeY8Z7Q7Nqb/fGiBAAECBAgQIECgo4DAvSOc2wgQIECAAAECCxfYXYP2Q+U4snM452AfK+sPUS27nPPM2uNtntHHIca55TbyYt785UKXl6DGLS/APZVy3jKisRMgQIAAAQIECMxHQOA+n7nQEwIECBAgQIDAFAJddown1MwO86l2Drc93qYJ2hPOT9XHKeZqzc9ojozZdxhkdrMnZE+5dLjfLQQIECBAgAABAgRGExC4j0arYQIECBAgQIDA7ATaBtk5p/0wYai5L8/6UEp2PddeU/8yoLZf6v2rwK58KbvZs6Zq/2rhtpWsx9O18CVAgAABAgQIECAwSwGB+yynRacIECBAgAABAoMK7Etrbc9pTyh6HrQXrzfWtn9pKUH7sZTLRH30mO4CfXazNy9BzV8v/Ni9C+4kQIAAAQIECBAgMI2AwH0aZ08hQIAAAQIECDxDYFcemqD9UPnwhJvHUhJuTnFlJ3t2tO9bPCy7nHO8jfC1BdoTqmbtNUF7Pm97eQlqWzH1CRAgQIAAAQIEZiEgcJ/FNOgEAQIECBAgQGBQgS7ntH9TenAsZYoz0BPAtvlFQHAStKd/50GlNDa0wOelwUMpeQlql8tLULuouYcAAQIECBAgQGA2AgL32UyFjhAgQIAAAQIEBhFoe077p/LU7Bi/DPL0txvZlW+3Ddqz0zn9+36C/nlEN4HMa9/d7KfShpfedvN3FwECBAgQIECAwIwEBO4zmgxdIUCAAAECBAj0EGh7PMtP1yD73OOZtbdmx32C9gTntVdzpMip9gb1Jhfou5s9v+zJ/PplyuRT54EECBAgQIAAAQJjCQjcx5LVLgECBAgQIEBgGoGE2TkH/VD5uJzTnuA7QefYV5ejbaY+R35sg7W1vysDGmI3e9bfZW04xkOAAAECBAgQIEBA4G4NECBAgAABAgSWK9DsGk+wXXO9L5WmOLaja9Cevk3Rvxordf5ZoO9u9pzBf7oWtgQIECBAgAABAgRWKyBwX+3UGhgBAgQIECCwYoG8kDK72neVY0zYeSjlUlm/azVBe1e5ed6X+cxu9vxFRO1aux1J/lrhVEp+iTL22punoF4RIECAAAECBAhsTkDgvrkpN2ACBAgQIEBgwQIJPb8tZV85hpyDfijlXFm/T7UEswlWa3fb51nflXIs5dLnwe4dXCDrqzk2pkvjdrN3UXMPAQIECBAgQIDAKgQE7quYRoMgQIAAAQIEVi7Q9qWjU56DnmA2ofmuxRwI2ltgTVQ189fnbHa72SeaKI8hQIAAAQIECBCYt4DAfd7zo3cECBAgQIAAgbY7x7+5BuC/jEwnaB8ZeKLm+57N/lPpZ/6y4TRRfz2GAAECBAgQIECAwKwFBO6znh6dI0CAAAECBDYssC9jzzntn1UaTHVOe5egPX07lnKuHItq4wpkTTW72dscAdT0KrvZvy8lQfuP43ZV6wQIECBAgAABAgSWJSBwX9Z86S0BAgQIECCwfoFdGeLXpRwqh5pz2vNSywSgY16C9jF1x28766rZzV77S5z7XjW72bPWxv4LivFFPIEAAQIECBAgQIDACAIC9xFQNUmAAAECBAgQ6CiQoD3hec2u4+wyzg7jY8dn1d4maK+Vml+9rKOE7F9cS5ce2s3eRc09BAgQIECAAAECmxUQuG926g2cAAECBAgQmJFAAtEcH7Or7NMULx0VtFdOxgyr3YbsNb+8eWkIdrPPcGJ1iQABAgQIECBAYP4CAvf5z5EeEiBAgAABAusVSMD+bSn7yiFOcRa6oL1yMmZWre+57BlOdrOfrsXZ7DObYN0hQIAAAQIECBBYhoDAfRnzpJcECBAgQIDAugSy67g5PqZmZAlCc9RMwtAxrubokWNpfNfiATk/PveM1a8WXdlk1SZkz19ItJm3e6xP5Qs5l908bnIZGTQBAgQIECBAgMCQAgL3ITW1RYAAAQIECBB4LJAd5Dl7vfaoj/fX+mO8pDJ9eFdK7bnxzegE7Y/neawau9Jw35efpm+Zw6zDBO2XsTqrXQIECBAgQIAAAQJbExC4b23GjZcAAQIECBB4lsC+PDi72vOx5srxMYdSLjWVW9YRtLcEe3L1zFd+UZP1kF3tXS9HxnSVcx8BAgQIECBAgACBSgGBeyWUagQIECBAgACBjgIJS/NC1ISlNVd2HqfuuaZyyzq7Uj872tN+7Q77PMKO9pbQA1RvjvnJcTEpXa+E7NnF3pSu7biPAAECBAgQIECAAIEKAYF7BZIqBAgQIECAAIGOAs057TXhdoLRHPFx7Pist27blW+mL4eWbf907dOp5X2qdxdojovpE7Ln6c257AnaxziOqPsI3UmAAAECBAgQIEBgxQIC9xVPrqERIECAAAECTxPYlyd/W8qusgfflXo5R33oYDT9yI72tuFtjrM5lnKu7L9q/QQyTzkyJvNU88uZ156WX5CcrmXotdRvhO4mQIAAAQIECBAgsBEBgftGJtowCRAgQIAAgUkEduUpOT6mNuBOQJqg/Txw75rzvvct2xW0twTrUT1rpZmnfN71akJ2Lz/tKug+AgQIECBAgAABAgMKCNwHxNQUAQIECBAgsFmB5iWkx0qBHB+ToP1UWb+mWvNizbS7q7nhpo6gvSVYx+rNueyZoz4vP82Z+gnYs35+7NgXtxEgQIAAAQIECBAgMIKAwH0EVE0SIECAAAECmxLIbvbsat9VjvqbUu9YylBHfuS5XV6Emu7mKJucGy+0rZy8jtVyLnvWyaHj/bmtefmp+eqB6FYCBAgQIECAAAECYwsI3McW1j4BAgQIECCwVoFdGVjOad9XDjC7yLOzeahwO8/tcj57upug/VjKpbLvqrUXyProe2RME7JnN3uKiwABAgQIECBAgACBmQsI3Gc+QbpHgAABAgQIzE4gx4J8XUrC85orx3+k7lCBaULcLkeSJLzN7uhTKZeajqvTSaDr+fm3D/t0XS+ZKxcBAgQIECBAgAABAgsSELgvaLJ0lQABAgQIPFFgV579+xeen6+n3F+vff22XoLrPudYp63sFr89miWf3+4gv/3vBN+XnoYJUxNap++PribgTv2+x8fkec2xMS95v9WXjLsJ2vv249GYt/r9zEnXY30as7z8NPOUX8yYp62uJOMmQIAAAQIECBBYvIDAffFTaAAECBAgQOChwB9varwUcu/vWhgiCH/YqSdXuA3qz9e+NB8TfN4HnvnFQM5pv7d6bRjZoZxd6Jee49yV+7Ob/tChnRxhc7qWDre7pUIgZ7Nnbr6oqPtSleblpwna+66Vjl1wGwECBAgQIECAAAECQwoI3IfU1BYBAgQIEBhPIIHvb6/N3wfi+d7tjuv9eN3YVMsJQJsQtNY0AeqhlHNPqQS5Cexrn3v7uJzPfhqgDz2HsNrb87PWHOuz6zDK5lx2c9QBzy0ECBAgQIAAAQIE5i4gcJ/7DOkfAQIECKxR4DY8vw3Lbz/fwi7ztc1tgu5Dj0FlzhO0H0tpG+QmxE2Aa6d0jwl4cGvmJH9tkN3sNUcK3TfX/MWBI2PGmyMtEyBAgAABAgQIEHi6gMD96VOgAwQIECCwAoHbI1v2N+N57fMVDNkQXhHIUTQ5ruZ8LQlZH127UqHr+d/OZ3+k2//7ff7awC9C+vtrgQABAgQIECBAgMCiBATui5ounSVAgACBiQSye/UP12clDE3Jdfv5/TEuE3XNYxYocCp9zu73813f9+W/E7R3Of87QX7zgs0Fksy+y33+2iCDyxn+mffsZncRIECAAAECBAgQILAhAYH7hibbUAkQIEDgN81RLrfHteyKS0quPaNXBbJTNzu3769L+UJK7ddv6zW7wfuw3//i4/4ontv5vT3Kp88zu957Ljf+uZRmx3T60/ZKcJ+g/aW5aNuW+v8qkPXS9a8N7Ga3oggQIECAAAECBAgQ+I3A3SIgQIAAgTUINEe63IatTRDrLPTf/Ob+WJMEv7dXwtuE37fXfZ01rJPbMeyv/3EoH/MCzDlfCXITsqfcz9Oc+72kvmU9ZB1kPbS9frrOzantjeoTIECAAAECBAgQILA+AYH7+ubUiAgQILAmgSZI35VBpeTaXz/efm1NY35tLDmr+3LzzfPN5/eB+UsB+haM2owx6+dDKbXHuTS/tLg9bqjN87rUFeR2UWt3TxOyN/+utLk7f21wKuX2Z7HN/eoSIECAAAECBAgQILBCAYH7CifVkAgQILAQgSZMb3aiJwBN2cKO9Nvw/FLGnJLr/ogVQd44i/nr0uxX17X26AnZXZ66p7uKzXrdX9dt/vv25bmP2n3r+zn/O7vZzX8fxdfv7XM+e/PXBlkPzc/tOL3UKgECBAgQIECAAAECixQQuC9y2nSaAAECsxfYWpiencjNUR+3u8tf+3z2E7jSDu7LuL4tZVc5vm9KvePN3D66Le222TV/257zvx/p9v9+gvacz177y5bbJ/prg/7+WiBAgAABAgQIECCwCQGB+yam2SAJECAwqMBWwvTmCJHbXee3n1+Kaopr/gK70sU2QXjm/tBifvelbtfzv/PXDsdSvi/F+ezjrKXMf/6qIXPa9vLXBm3F1CdAgAABAgQIECCwcQGB+8YXgOETIEDgTqA5n7o51uX+49LBbo9yaXaf34bozj5f+gz/c/+bHc3HymFlfWT3c8LvR1efY0nSdkL9HBtT86xHffH9lwV25ctdgnZ/bWBFESBAgAABAgQIECDQWUDg3pnOjQQIEFikwFoD9dsjXc7XmbmUjym5mq8tctJ0upNAXoaaXe27yrvfl3oJwB/tMk97OZbkUEp+ntpe2TGdUL9Zm23vV/+xwL5USdCej22u/MIla+BUsQ7atKsuAQIECBAgQIAAAQIbEhC4b2iyDZUAgU0IrC1Qb4L0l3ah335tE5NrkFUCu1Ir57Tvq2r/Y6f5oZTLg/qfl+8nKK9t96XmsnM6/XsU6ld2XbU7gcxNl6Dd+eyWEgECBAgQIECAAAECgwkI3Aej1BABAgQmEVhToN6E6Qk6U24D9PMkmh6yJoExjo/ZFaDmbPZ83vfKLvpj30bc/y8C+/KVLkF7ftmS+fDvjUVFgAABAgQIECBAgMBgAgL3wSg1RIAAgcEEmlB9V1pM+ayUfC2h0lIuYfpSZmod/WxzfEx2mefYkOMbQ8/PWo6NSbtDXTmuJD/PruEEMk9dgvbvrvN/Ga4rWiJAgAABAgQIECBAgMA/BATuVgIBAgSeI5Dg7fel3IbpzQtKn9Oj+qcK0+ut1BxXID9HbY6Peev89Pz8ZTd7jo1Ju0Nf/14azEt5Xf0F9qWJtkG7F6H2d9cCAQIECBAgQIAAAQIVAgL3CiRVCBAg0FEgYfpvS0k41ITpSwjVm0D9fB33/ceOHG4jMJhAl+NjDuXpzVq+7Uh+PptjY7p0MCH+H0rZvXHzf5TvZVe9q59A5qpL0B77mhfi9uuduwkQIECAAAECBAgQIFAEBO6WAQECBPoJ/PF6e4KgJkzflc9T5no1gXp22zbnpt9+nGu/9YtABBKOJzzNz9uj67XjY/Lz2eds9qbd70s7OXrm8EZHcnzJW99/NAbf/8e/p23+kiFmzRwJ2q0gAgQIECBAgAABAgQmFRC4T8rtYQQILFQgYU9z/Es+z8715iiYOQ5JoD7HWdGnvgL5mftQyr6yofvjYxLQf17KoUUb94/KSzZP15L2/nb9t+C1LuVnMf3NL7Rc7QXy7212tGfOaq+clX8sJb8M4V6rph4BAgQIECBAgAABAoMJCNwHo9QQAQIrEMhu9WaX+u3Z6nMbmkB9bjOiP2MK5GcyoWvOVq+5ErgeSjlfK+/Lx+xm/+L6813Txm2d7JROeHss5XL9Rv59SNj+1i57YXtb6f+t3/bIoNzZBO2n7o91JwECBAgQIECAAAECBPoLCNz7G2qBAIFlCSTIyXnLt4H6rvx3ypyu7KS9P+7lUr6W4iKwFYG2x8ccC0yOEMnPc58jY+KbwDxt3e+UTvif57x1Cdu7r9Ac0RPfmiOD8hRBe3drdxIgQIAAAQIECBAgMIKAwH0EVE0SIDALgdtgfVd6lIB9P4ue/W8nbkP1S/lyyo+lOAZhZhOlO5MLtD0+JuekH0vJX6lkJ3tKl6vZzZ6gPT+Lt1f+Hak5Rzx9yW58P8ftZiD/Psc3zjXXa+fz19yrDgECBAgQIECAAAECBEYTELiPRqthAgQmFEg4l13rCWoS2uRjbWgzZjcTCCW0u1xLE6afx3yotgksWKDt8THZSd4c7XLoMe7XdrM3TSbATxj8aNf1N6VO7dE3Pbq7qlvzb3XNLzKaQXsZ6qqm32AIECBAgAABAgQIrE9A4L6+OTUiAmsWSDCTl5fuS0nInv/Ox2deOc7gUsp9mH5+Zqc8m8ACBdocH9MML7vIH4Xgr1HkZzfHxWQ3e36GX7rSdsLgmh3zfyn1Tgt0f1aXY9scH1Pbh/fX+fLXA7Vi6hEgQIAAAQIECBAgMLmAwH1ycg8kQKBSIEdD3Ibq+bxrsFb5yDer5fiXy7U0u9bvj5wY4jnaILA1gbbHx/T1yZEvCdpT3rpqfwGQ4D6BvH8P6mdmX6q2OT6mOTIo/wa7CBAgQIAAAQIECBAgMGsBgfusp0fnCGxGoDkSJiFMPn/WrvXb3eoJdm6Pg9nMZBgogYkE2h4f06dbj46MuW17V/6j9oiTT6XuoRQ7rutmJ3P+4WpWc0d+0Xks5VxTWR0CBAgQIECAAAECBAjMQUDgPodZ0AcC2xJowvUmWN8/YfgJ3y6lJFC/PwrmCd3xSAKbE6jdPd4HJmd9n66lZvd52yNO/qO0neNoXHUC+SuAmnPw01p++flVKY/+CqHuyWoRIECAAAECBAgQIEBgQgGB+4TYHkVggwLPDtfvg/Vmx/oGp8KQCcxCYOzjYxKyN8fFtAlr8wuAYym7CqX8u3IopSbEr2huE1XilbD90dW8EDVz4SJAgAABAgQIECBAgMAiBQTui5w2nSYwS4HsDs256/tSEqrl41RXQpqEX+dSLteSz10ECMxDYOzjY3K0SwL2U8vh5t+pr1v8e5WXdh5bPmPr1Q8FoCZszxxmV3v+DXcRIECAAAECBAgQIEBgsQIC98VOnY4TeLrA7bnrCa12E/WoeXlpcxxMcyTMRI/3GAIEWgqMdXxME7InaG973uQL5wAAIABJREFUhnr+vUrQfqgci13tlVB31eL7KGx3fEw3W3cRIECAAAECBAgQIDBTAYH7TCdGtwjMUOB+93p2rI553e5ab46CcYTDmOLaJjCswL4012b3eM3T8wu3UyldQva03/acdkec1MzKy3XyS9m/Xc1fa+Wb8o1jKW1/YdK9V+4kQIAAAQIECBAgQIDAyAIC95GBNU9goQK70u8/lLK/lgQnY1734bqz1sfU1jaBcQTy70Z+MZeXY+bfjqF+KZeQvTmX/dKx603QniNLavvliJOO2Nfb/l4+vva/Hfk3P+vk3O8R7iZAgAABAgQIECBAgMD8BATu85sTPSLwDIEEUJ9fQ7IEZbsROyFcHxFX0wQmFBjrWKn8G5EgtgnZ++5+bvNC1PDliJPDtQ8Tcq7qUR/LaN69MqLMb/53xl8srWrKDYYAAQIECBAgQIAAgUZA4G4tENiuwG3APtYOduH6dteXka9PYMxjpfJvRROw5+MQV9ugPX04lpKw2NVdYF9uzVEyL10xzv/eXLo3704CBAgQIECAAAECBAjMW0DgPu/50TsCQwrsSmPNcQ/5U/4xrrxYMLsWz9ciVBlDWZsExhfIX73k34uEo/trGfqp2UmecP10/XdjqPbT3w/Xvte2+b5UTNDedzd97fPWXC9he+bgpevP1zlf8/iNjQABAgQIECBAgACBjQsI3De+AAx/9QK7MsLsZD+UMsYu9pytfC6lCdmFVatfUga4UoH8W3G7g32Mfy9uj4rJvxuXgS33pb22L2n9rtxzHKEvAw9tMc3lf2u+faW3ORN/rF/2LgZIRwkQIECAAAECBAgQWL+AwH39c2yE2xNozmNPsDFkuNGEZQnKmoB9e7pGTGAdAvfh+m7EYSXUzu7xsc7s3pe22wbt+WXhsZT8e+YaTuA/S1MvraX870e+7peyw1lriQABAgQIECBAgACBmQoI3Gc6MbpFoINAwoyETgnZE7r3vXI8zLmUJly/9G3Q/QQIPEUgu9Wb42Hy+Ri7118aWP4N+er678gYA99f/83Lx9pL0F4r1b5e/rfnr6/c9pfy9VP7Jt1BgAABAgQIECBAgACB5QkI3Jc3Z3pM4F4gYdO7UvruZs95yudrybnKdiJaawSWJ5Aw/Q+lNMF6/n2Y+hr75aMZU9sd7fn37VjKaWqMDT0v/7uRI8zur9jvNuRgqAQIECBAgAABAgQIbFxA4L7xBWD4ixZIgJHQ6dBxFLdHxJxLG2Md99Cxe24jQOCBQP4NaML1ffk8IfsQf93SBz7Hx2RX+xi/sMsYBe19Zmfce//rlebtbh/XXesECBAgQIAAAQIECMxMQOA+swnRHQKVAodS70OHcC0he3YhNqXycaoRIPBkgWbn+q70Y1/KHML1W5Ixj4/JeAXtT16ADx7/1nEy/m/Nec+d3hEgQIAAAQIECBAgMLCA/ydoYFDNEZhA4NvyjEOL5wjZW2CpSuDJAtmhnl3rCZl3pUx95vq5PPP3pdQeUTXm8TExaBu0pz95QWvKGLvsn7w8Zvv443Wu7juYM/Mzjy4CBAgQIECAAAECBAhsRkDgvpmpNtCVCLwWarw0vBztYCf7SibeMFYpkDA94XY+JpScctd6ztXOMVIp52vZlY/5hV76UnONdXxMni9or5mB+dR57X+b3pcu5nsuAgQIECBAgAABAgQIbEZA4L6ZqTbQFQgkjPt7xTi+uQYcdndWYKlCYAKBP5Zn7K4lP8f5PB+nurLruwnWm4+3/z5kV31evHys7NBYx8fkhZs5/31f2Y9Us6O9BdaIVbN28kuS+0vgPiK6pgkQIECAAAECBAgQmKeAwH2e86JXBF4SeC3QeKR1fqFCQrf7QP6lr+U4ABcBAo8FdqVKs1s9nzdHwSTMnvrKz+3t7vXLGx3I0TF5H0T6/Oga6/iYL8uD8+9bTR+aPgraH83WtN/P/AncpzX3NAIECBAgQIAAAQIEZiogcJ/pxOgWgRcEXgs0psY63z0wwX3CvdvrUv4j5fbKERb3X5u6755HoI/ArtycUD0fU5ojYPZ9Gu15b3ab3+5ev/9ZfK359P/Zx8cI2ntO/oxuP5a+CNxnNCG6QoAAAQIECBAgQIDA8wQE7s+z92QCbQUSkCVM+23bG2dc/1L6lnJ71X6tOSZjxsPTtYUJ5GfsNlDPf9+WZw7n9liY/Iw0O9jb9mkOx8cI2tvO2vzrH0sXBe7znyc9JECAAAECBAgQIEBgAgGB+wTIHkFgQIHsqM2LUBMKul4WOL/w5Uv5Wsr99VLd1HGUzvpW1+7m56bZmZ6v3Za5jDq71rNeb3euD/FOhmcfH9MlaM9fxnws5VTKEAZzmeO19eNYBiRwX9usGg8BAgQIECBAgAABAp0EBO6d2NxE4OkCzYsF85JB1zQCLx2d0zz5/EoXLuXrKS9dCVUFiP3mLru1/3BtYlc+puRqAvV8P5/P9Wp2rTe71bNWXltLfcYQlzbHx3wq9Q8Drc9mR33+zWpznn2C9mMppz4Dd+9kApkrgftk3B5EgAABAgQIECBAgMCcBQTuc54dfSPwWKAJFPelahMy5uOajp15rLDOGucHw3r0/dz+1i8J3mp+6B3+u/Kwmr/KyDq+vZo13Xwt7aQs7WreX5A5a+YkIfvYv3Bpe3xM+nkopWZtPZoDQfsjoXV9/1iGI3Bf15waDQECBAgQIECAAAECHQUE7h3h3EZgQQL7F/pa+7U/Lmicukrg2QL5RcXlWhKo5/N8fMbV9viYHNtyHKCjgvYBEBfYRNaOwH2BE6fLBAgQIECAAAECBAgMLyBwH95UiwTWLPDSER27MuCU2+ulr9l5v+aVsZ2xNbv/z2XIzW71S/k8ZQ5XfvbaHh+T41769r9r0J6jlRL2n+aApw+dBY7lToF7Zz43EiBAgAABAgQIECCwJgGB+5pm01gILE/g/siQjKD2awkWa44pWZ6KHj9T4DZQTz/O1840H5/Zt0fPTuBZe1b6UMfHdA3a43y88X00Nt+ft0DmUuA+7znSOwIECBAgQIAAAQIEJhIQuE8E7TEECEwmsH/hSbvytZT766W6CRCbF3FO1mkPGl2geUFpHnS5lnx+vj65+Th6R0Z4QNZxdrW/tMbvHxeHoY6PeVfaOpbS5mWogvYRFsAMmsw6ELjPYCJ0gQABAgQIECBAgACB5wsI3J8/B3pAgMAyBF46Tic9f+3r+V4C0JSXLkfsDDPvzY702xfEXkrTKbnOwzxmlq1kbX0oJee111yfSqUhjo/5srRzfGNtv9QXQXvNDC23TtaDwH2586fnBAgQIECAAAECBAgMKCBwHxBTUwQIEBhQYP9GW2+F/Le31da7f9TQL8vN8SWXCpvzXZ28cDRBenPdhuoVza26yjOOjxG0r3pJ9RrcsdwtcO9F6GYCBAgQIECAAAECBNYiIHBfy0waBwECBAhsQWBfBjn18TGC9i2srH5jFLj383M3AQIECBAgQIAAAQIrEhC4r2gyDYUAAQIEViuwKyOb+vgYQftql9PgAxO4D06qQQIECBAgQIAAAQIEliogcF/qzOk3AQIECGxFoO3xMTmn/fuOODmGKEF72kjIX3s5o71Wap31jmVYjpRZ59waFQECBAgQIECAAAECLQUE7i3BVCdAgAABAhMJ7Mtzao+PSZfel/KxlNtz72u7uisVm6A9oXvtJWivlVp3vWMZnsB93XNsdAQIECBAgAABAgQIVAoI3CuhVCNAgAABAhMJJPDO8TGHyucl9E7dS2X922q78h8JSmuf1dybF+EeSzl1eKZb1ieQtSBwX9+8GhEBAgQIECBAgAABAh0EBO4d0NxCgAABAgRGEnh3DbJrdpkn9O56fMzn13v3LcchaG8JtpHqAveNTLRhEiBAgAABAgQIECDwWEDg/thIDQIECBAgMLZAgu/sav+s8kFdjo/pej57uvRTKTmu5lTZP9W2JXAsw7XDfVtzbrQECBAgQIAAAQIECLwiIHC3NAgQIECAwPMEpjg+ZncNQ78oH2t2zt9qOKP9eWtjSU8WuC9ptvSVAAECBAgQIECAAIFRBQTuo/JqnAABAgQIvCow9vExeQnqoZR9hzn4VO7JjvZzh3vdsj2BYxmyHe7bm3cjJkCAAAECBAgQIEDgBQGBu2VBgAABAgSmFUgAPtbxMbvSdhO05/O213flhoSnl7Y3qr9pgawZgfuml4DBEyBAgAABAgQIECDQCAjcrQUCBAgQIDCNQJfjY/JS1B8rupeXoB5KybExba9fyw3ZzZ7yS9ub1SdQBI6lCNwtBQIECBAgQIAAAQIECBQBgbtlQIAAAQIExhdoc3xMAvAE7acH3dqV7/fZze5FqOPP+1aeIHDfykwbJwECBAgQIECAAAECDwUE7g+JVCBAgAABAp0FPit3fltKPtZc35RKCS/f2mneZzd7+pBjY06lnGs6pA6BCoGsWTvcK6BUIUCAAAECBAgQIEBg/QIC9/XPsRESIECAwPQCOT4mAWR2qtdcP1zrvnZ8zK58P7vkD6Wk7bbXz+WG07Vc2t6sPoEHAsfrer+v9r58Id9zESBAgAABAgQIECBAYDMCAvfNTLWBEiBAgMBEAjnmJeeh1wTjbx0fk/uzmz2hfe0O+fshJsg/XctEw/eYDQocy5jtcN/gxBsyAQIECBAgQIAAAQL/KiBwtyoIECBAgMAwAgnFP5Syr2zuteNjcn9C+7wAtSa0v39cQvxTKQn9L5V9UY1AH4FDuTlHJ91fn67ruE/b7iVAgAABAgQIECBAgMCiBATui5ounSVAgACBGQoMcXzMroyrzwtQw2I3+wwXx0a6tC/j/NsLY82azPdcBAgQIECAAAECBAgQ2IyAwH0zU22gBAgQIDCCQJ/jY4Y4MsZu9hEmVZOtBV4L3C+lpX9r3ZobCBAgQIAAAQIECBAgsGABgfuCJ0/XCRAgQOBpAm2Pj/mu9DRnsf9SSs5lz3Exhx69z1Ed35dy6tGGWwkMKfBfrzTm/9YcUllbBAgQIECAAAECBAjMXsD/EzT7KdJBAgQIEJiRQNvjY34qfU/QfinlXSkJ2ncdx/Nzue90LWnPRWBOAq8F7v+3dDK/aHIRIECAAAECBAgQIEBgEwIC901Ms0ESIECAwAACbY+PyUtL/7OUBO7ZEd/1yu74Uynnrg24j8AEAlmff3zhOX+ydifQ9wgCBAgQIECAAAECBGYjIHCfzVToCAECBAjMVGBX+vVtKfvK/mU3748t6r/UbHbGJ7DPsTF2B1fCq/ZUgXN5+kuB+1/K109P7ZmHEyBAgAABAgQIECBAYEIBgfuE2B5FgAABAosSyPExOQbmOFGvc2RMAvYE7ZeJnukxBIYSyM/J1y809n7Cn6GhxqIdAgQIECBAgAABAgQIdBYQuHemcyMBAgQIrFggZ61/KGU38hh/Le03Lz89j/wszRMYU+BYGn8pcM+RSIcxH6xtAgQIECBAgAABAgQIzElA4D6n2dAXAgQIEHi2wK50oM3xMV37+0O58VSKI2O6CrpvbgL70qG/vdCprPV8z0WAAAECBAgQIECAAIFNCAjcNzHNBkmAAAECFQLZnZsXnOYomTGuHBlzupbLGA/QJoEnCuzLs18K3PM+g39/Yr88mgABAgQIECBAgAABApMKCNwn5fYwAgQIEJihQILC7GrfjdA3R8aMgKrJ2Qr81ys9839vznbKdIwAAQIECBAgQIAAgaEF/D9AQ4tqjwABAgSWIpCd7Dmn/TBChx0ZMwKqJmcvIHCf/RTpIAECBAgQIECAAAECYwsI3McW1j4BAgQIzFHgXenUsZQhj49xZMwcZ1qfphS4lIf9/oUH/ql87TxlRzyLAAECBAgQIECAAAECzxIQuD9L3nMJECBA4BkCn5WHZlf7fsCHf1faystPU1wEtixwLoP/4wsAAvctrwpjJ0CAAAECBAgQILAxAYH7xibccAkQILBRgexkb3a1D0GQ3ewfSzmV8ssQDWqDwAoEBO4rmERDIECAAAECBAgQIECgn4DAvZ+fuwkQIEBg/gL70sWhXoqa3ewJ2RMsuggQ+GeB/FzY4W5VECBAgAABAgQIECCwaQGB+6an3+AJECCwaoHsak/Q/kXPUdrN3hPQ7ZsRyF995C9J7q//KF/I91wECBAgQIAAAQIECBBYvYDAffVTbIAECBDYpMAQL0W1m32TS8egewgcy71fv3D/+/K1fM9FgAABAgQIECBAgACB1QsI3Fc/xQZIgACBTQn0fSnqr0WrOZv9sik5gyXQXyChusC9v6MWCBAgQIAAAQIECBBYsIDAfcGTp+sECBAg8N8COTrm81K+KiWBe5frp3JTE7R3ud89BAj8Yxe7wN1KIECAAAECBAgQIEBg0wIC901Pv8ETIEBg0QIJ2XM++6HHKHJsTIL2H3u04VYCbQV25YbfX2/KL4nyS6Nct5+/9N9tn/Oo/rlUSPk00M/AsbQjcH+k7vsECBAgQIAAAQIECKxaQOC+6uk1OAIECKxOYFdG9GUph1LyeZfLS1C7qLmnjcAfr5X3r3xs09ZUdU/lQTlr/dLjgcdyr8C9B6BbCRAgQIAAAQIECBBYvoDAfflzaAQECBDYgkBC9uxmT+ly5Wz270uxm72LnnteEkionp3p2ZW+u5b7HepLlDuWTn9Tyi8dOp97Be4d4NxCgAABAgQIECBAgMB6BATu65lLIyFAgMDaBBJivivlUEpz5EbbMf5QbjiVkrC9S4DY9nnqr0sg6+4PpTRB+r58nnWZsubrUgb3l1LOLQd5LPUF7i3RVCdAgAABAgQIECBAYF0CAvd1zafRECBAYA0COZv9UErX3ewxyJnUeYnqZQ0gxjCJQHas70pJuN6Urr/omaTDEzwk7zY4XX+ean6WjqWuwH2CifEIAgQIECBAgAABAgTmKyBwn+/c6BkBAgS2JJBgM8fGJCTf9Rh4zmc/lHLu0YZb1y2Q9ZUXlu5LaY6DyUfX2wIJ3/OXIvnZyhFN+e/bvwCIYUxf+vnN2fBHwAQIECBAgAABAgQIENiCgMB9C7NsjAQIEJivQAK7HBuToL3vbuKcO51Qz9Ex853vqXuW8Lc5EmZfPp/LGetNYB2Py7Xcf57/Tqg91nrOz9vh+jPz25EnRuA+MrDmCRAgQIAAAQIECBCYj4DAfT5zoScECBDYmkCOnhgiaP/pGhwmnHRtVyBhehOuP/tImKzJBOVNYN58vJSvpczpSvD+sZT8hclY159Kw+exGtcuAQIECBAgQIAAAQIE5iQgcJ/TbOgLAQIEtiGQYO9Yyq7ncLNLOO0kLHRtS+A+XN8/Yfg5vuhSSsL024/5fIlXDE+l5LidIa/88sGRPUOKaosAAQIECBAgQIAAgVkLCNxnPT06R4AAgVUJ7Mpovi0lwV7f64fSwKGUS9+G3D97gbzMtNmxnjU0xPppM+gExllnCdabnernNg0srG5+ro6lDBG8+zld2OTrLgECBAgQIECAAAEC/QUE7v0NtUCAAAECjwW+KFUStvc9pz272hMI5uWNrnUJ7K4h7758TMCe/55yZ3SzY/1cnnu7a31dyvWjaV6Cmp+3HNXT5vp0/Rk9tblJXQIECBAgQIAAAQIECKxBQOC+hlk0BgIECMxbIGe1HwfoopeiDoA4gybyS5fmrPVd+bwJdqfsWnatNzvWb3euT9mHJT0r85RfmjXzlY/NDvjsYm/Oqz9fXcd60euSzPSVAAECBAgQIECAAIGNCgjcNzrxhk2AAIGJBPJS1A89n5Wdx4dSEua5liOwK11NKHu7Wz2f9/0rh7YCCYTvw/W2bahPgAABAgQIECBAgAABAgSqBATuVUwqESBAgEAHgX25528d7ru95X35j2PPNtw+nkAC9N+WkrnOdf9xvCe/3LJwfWpxzyNAgAABAgQIECBAgACBfxIQuFsQBAgQIDCWwP8rDXfdzexli2PNSl27eVFprsxfc4767e70fV0zo9XKWf7ZtX6+fmzOXB/tgRomQIAAAQIECBAgQIAAAQI1AgL3GiV1CBAgQKCtQALZLrvbE6QeS/nY9oHqPxRodqOnYhOe3wbqu/L1lLld9y8zFa7PbYb0hwABAgQIECBAgAABAgT+R0DgbjEQIECAwBgCx9JoXpba9kqY2ryAsXnx4qV8LSVXE762bXct9ZsXjjbjuT8TfX8z0F35PGVJV/6yIXN9e+a6F3AuaQb1lQABAgQIECBAgAABAhsXELhvfAEYPgECBEYSyA71dyO1fdtswtmU5rr/73z9pa/l60OE97e7xmuGu3+lUtuv1zxrznV+us5LE6xnjvK5iwABAgQIECBAgAABAgQILFpA4L7o6dN5AgQIzE4gO7C/LeWL2fVMh54h0OxYbwJ1wfozZsEzCRAgQIAAAQIECBAgQGAyAYH7ZNQeRIAAgdULZEf7sZSuL0pdPdAKB9j8lUCC9NvSHA20wiEbEgECBAgQIECAAAECBAgQeF1A4G51ECBAgEBfgV1pILva930bcv9sBHLkS3N2+vnaq0v5mJJLoD6bqdIRAgQIECBAgAABAgQIEJiTgMB9TrOhLwQIEFieQJtd7Z/K8E6l5Nzz3bW0PQN9eULz6fFtiH4p3UrJdb5+bF5WO58e6wkBAgQIECBAgAABAgQIEFiYgMB9YROmuwQIEJiJwK7046+lJDB/dOXYka9K+f6NijmG5rat/U3dfL05pmbrAf2vxeL25aKX8t8pzXW++VyA/mhl+j4BAgQIECBAgAABAgQIEBhYQOA+MKjmCBAgsAGBQxnjh1Jqzmp/X+p9LKU5nmRontswPm3f/3e+truW+2fn67/v2aHbXeM1TZ1fqdT26zXPUocAAQIECBAgQIAAAQIECBCYWEDgPjG4xxEgQGDBAgnYc1b7FxVj+KHUya72293YFbepQoAAAQIECBAgQIAAAQIECBBYroDAfblzp+cECBCYUiA7xxO2PzpCJkeeHEvJrnYXAQIECBAgQIAAAQIECBAgQGBTAgL3TU23wRIgQKCTQHa0J2x/dIRMdrUfSrl0eoqbCBAgQIAAAQIECBAgQIAAAQILFxC4L3wCdZ8AAQIjCyRAT9j+1mVX+8iToHkCBAgQIECAAAECBAgQIEBgGQIC92XMk14SIEDgGQI1YXteGpp6zmp/xgx5JgECBAgQIECAAAECBAgQIDArAYH7rKZDZwgQIDAbgZzV/rdS3jpG5pvy/bwY1UWAAAECBAgQIECAAAECBAgQIFAEBO6WAQECBAjcCyRk/3spu1docoRMgvYTOgIECBAgQIAAAQIECBAgQIAAgf8VELhbDQQIECBwL5Cd7fs3wvZ8zxEy1g0BAgQIECBAgAABAgQIECBA4E5A4G5JECBAgMCtwLH8x9fCdouCAAECBAgQIECAAAECBAgQINBeQODe3swdBAgQWKvAvgwsu9tfu/5cvvH9WgdvXAQIECBAgAABAgQIECBAgACBvgIC976C7idAgMA6BHJu+3+W8tpLUt+X7x3XMVSjIECAAAECBAgQIECAAAECBAiMIyBwH8dVqwQIEFiawF9Lh794pdM/lK/vlzYg/SVAgAABAgQIECBAgAABAgQITC0gcJ9a3PMIECAwP4GvSpc+vNKtX8vXd6X8Mr9u6xEBAgQIECBAgAABAgQIECBAYF4CAvd5zYfeECBAYGqBz8oD//7GQ/9UvneeulOeR4AAAQIECBAgQIAAAQIECBBYooDAfYmzps8ECBAYTiAvQf38leac2z6cs5YIECBAgAABAgQIECBAgACBDQgI3DcwyYZIgACBNwReC9x/Kvdk97uLAAECBAgQIECAAAECBAgQIECgUkDgXgmlGgECBFYqkBel5oWpt5dz21c62YZFgAABAgQIECBAgAABAgQIjCsgcB/XV+sECBBYgkBC94+l/L6Un0vJf/+4hI7rIwECBAgQIECAAAECBAgQIEBgTgIC9znNhr4QIEDguQK78vjLc7vg6QQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgSFIJPXAAAHJ0lEQVQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgMD/b8eOaQAAABCG+XeNjZHUASnfCBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfAcH99zvLCRAgQIAAAQIECBAgQIAAAQIECBAgQCAkILiHzjCFAAECBAgQIECAAAECBAgQIECAAAECBH4FBPff7ywnQIAAAQIECBAgQIAAAQIECBAgQIAAgZCA4B46wxQCBAgQIECAAAECBAgQIECAAAECBAgQ+BUQ3H+/s5wAAQIECBAgQIAAAQIECBAgQIAAAQIEQgKCe+gMUwgQIECAAAECBAgQIECAAAECBAgQIEDgV0Bw//3OcgIECBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfAcH99zvLCRAgQIAAAQIECBAgQIAAAQIECBAgQCAkILiHzjCFAAECBAgQIECAAAECBAgQIECAAAECBH4FBPff7ywnQIAAAQIECBAgQIAAAQIECBAgQIAAgZCA4B46wxQCBAgQIECAAAECBAgQIECAAAECBAgQ+BUQ3H+/s5wAAQIECBAgQIAAAQIECBAgQIAAAQIEQgKCe+gMUwgQIECAAAECBAgQIECAAAECBAgQIEDgV0Bw//3OcgIECBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfAcH99zvLCRAgQIAAAQIECBAgQIAAAQIECBAgQCAkILiHzjCFAAECBAgQIECAAAECBAgQIECAAAECBH4FBPff7ywnQIAAAQIECBAgQIAAAQIECBAgQIAAgZCA4B46wxQCBAgQIECAAAECBAgQIECAAAECBAgQ+BUQ3H+/s5wAAQIECBAgQIAAAQIECBAgQIAAAQIEQgKCe+gMUwgQIECAAAECBAgQIECAAAECBAgQIEDgV0Bw//3OcgIECBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfgQGMc9WA31rv6AAAAABJRU5ErkJggg==';
+
diff --git a/vue-options-api-demos/inputs/signature/appearance/color/main.js b/vue-options-api-demos/inputs/signature/appearance/color/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/appearance/color/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/signature/appearance/color/main.vue b/vue-options-api-demos/inputs/signature/appearance/color/main.vue
new file mode 100644
index 00000000..e22f4aa8
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/appearance/color/main.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="demo">
+    <span class="wrapper">
+      <div>
+        Brush color value:
+        <span style="color: rgb(37, 37, 96)">
+          <b>rgb(37, 37, 96)</b>
+        </span>
+      </div>
+      <div>
+        Background color value:
+        <span style="color: salmon">
+          <b>salmon</b>
+        </span>
+      </div>
+      <Signature
+        :color="'rgb(37, 37, 96)'"
+        :backgroundColor="'salmon'"
+        :maximizable="false"
+      />
+    </span>
+    <span class="wrapper">
+      <div>
+        Brush color value:
+        <span style="color: #aafc58">
+          <b>#aafc58</b>
+        </span>
+      </div>
+      <div>
+        Background color value:
+        <span style="color: orange">
+          <b>orange</b>
+        </span>
+      </div>
+      <Signature
+        :color="'#aafc58'"
+        :backgroundColor="'orange'"
+        :maximizable="false"
+      />
+    </span>
+    <span class="wrapper">
+      <div>
+        Brush color value:
+        <span style="color: #11dcab">
+          <b>#11dcab</b>
+        </span>
+      </div>
+      <div>
+        Background color value:
+        <span style="color: lightblue">
+          <b>lightblue</b>
+        </span>
+      </div>
+      <Signature
+        :color="'#11dcab'"
+        :backgroundColor="'lightblue'"
+        :maximizable="false"
+      />
+    </span>
+  </div>
+</template>
+<script>
+import { Signature } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    Signature,
+  },
+};
+</script>
+
+<style>
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/inputs/signature/appearance/fill-mode/main.js b/vue-options-api-demos/inputs/signature/appearance/fill-mode/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/appearance/fill-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/signature/appearance/fill-mode/main.vue b/vue-options-api-demos/inputs/signature/appearance/fill-mode/main.vue
new file mode 100644
index 00000000..2f68baef
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/appearance/fill-mode/main.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="example-config">
+    <div class="demo">
+      <span class="wrapper">
+        <div>FillMode: <b>flat</b></div>
+        <Signature :maximizable="false" :fill-mode="'flat'" />
+      </span>
+      <span class="wrapper">
+        <div>FillMode: <b>solid</b></div>
+        <Signature :maximizable="false" :fill-mode="'solid'" />
+      </span>
+      <span class="wrapper">
+        <div>FillMode: <b>outline</b></div>
+        <Signature :maximizable="false" :fill-mode="'outline'" />
+      </span>
+    </div> 
+    <div class="demo">
+      <span class="wrapper">
+        <span>Custom fill mode: </span>
+        <Signature :class="'custom-input'" :maximizable="false" :size="null" />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { Signature } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    Signature,
+  },
+};
+</script>
+
+<style>
+.k-signature {
+  min-width: 150px;
+}
+
+.custom-input {
+  background-color: #00aead;
+  border: 2px solid #bfd843;
+}
+
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/inputs/signature/appearance/roundness/main.js b/vue-options-api-demos/inputs/signature/appearance/roundness/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/appearance/roundness/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/signature/appearance/roundness/main.vue b/vue-options-api-demos/inputs/signature/appearance/roundness/main.vue
new file mode 100644
index 00000000..a7bf938f
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/appearance/roundness/main.vue
@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <div>
+          Roudness:
+          <b>small</b>
+        </div>
+        <Signature :maximizable="false" :rounded="'small'" />
+      </span>
+      <span class="wrapper">
+        <div>
+          Roudness:
+          <b>medium</b>
+        </div>
+        <Signature :maximizable="false" :rounded="'medium'" />
+      </span>
+      <span class="wrapper">
+        <div>
+          Roudness:
+          <b>large</b>
+        </div>
+        <Signature :maximizable="false" :rounded="'large'" />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <div>
+          Roudness:
+          <b>full</b>
+        </div>
+        <Signature :maximizable="false" :rounded="'full'" />
+      </span>
+      <span class="wrapper">
+        <div>
+          Roudness:
+          <b>custom</b>
+        </div>
+        <Signature
+          :class="'custom-input'"
+          :maximizable="false"
+          :roundness="null"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { Signature } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    Signature,
+  },
+};
+</script>
+
+<style>
+.k-signature {
+  min-width: 150px;
+}
+
+.custom-input {
+  min-height: 100px;
+  border-bottom-right-radius: 15px;
+  border-top-left-radius: 15px;
+}
+
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/inputs/signature/appearance/size/main.js b/vue-options-api-demos/inputs/signature/appearance/size/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/appearance/size/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/signature/appearance/size/main.vue b/vue-options-api-demos/inputs/signature/appearance/size/main.vue
new file mode 100644
index 00000000..2406c9c3
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/appearance/size/main.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <div>
+          Size:
+          <b>small</b>
+        </div>
+        <Signature :maximizable="false" :size="'small'" />
+      </span>
+      <span class="wrapper">
+        <div>
+          Size:
+          <b>medium</b>
+        </div>
+        <Signature :maximizable="false" :size="'medium'" />
+      </span>
+      <span class="wrapper">
+        <div>
+          Size:
+          <b>large</b>
+        </div>
+        <Signature :maximizable="false" :size="'large'" />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Custom size: </span>
+        <Signature :class="'custom-input'" :maximizable="false" :size="null" />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { Signature } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    Signature,
+  },
+};
+</script>
+
+<style>
+.k-signature {
+  min-width: 150px;
+}
+
+.custom-input {
+  min-height: 150px;
+  width: 450px;
+}
+
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/inputs/signature/appearance/stroke-width/main.js b/vue-options-api-demos/inputs/signature/appearance/stroke-width/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/appearance/stroke-width/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/signature/appearance/stroke-width/main.vue b/vue-options-api-demos/inputs/signature/appearance/stroke-width/main.vue
new file mode 100644
index 00000000..d6094922
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/appearance/stroke-width/main.vue
@@ -0,0 +1,52 @@
+<template>
+    <h6 class="wrapper">
+      To see the Stroke width difference, draw something in the different Signature
+      components.
+    </h6>
+    <div class="demo">
+      <span class="wrapper">
+        <div>
+          Stroke Width value:
+          <b>1.5</b>
+        </div>
+        <Signature :stroke-width="1.5" :maximizable="false" />
+      </span>
+      <span class="wrapper">
+        <div>
+          Stroke Width value:
+          <b>3.5</b>
+        </div>
+        <Signature :stroke-width="3.5" :maximizable="false" />
+      </span>
+      <span class="wrapper">
+        <div>
+          Stroke Width value:
+          <b>6</b>
+        </div>
+        <Signature :stroke-width="6" :maximizable="false" />
+      </span>
+    </div>
+  </template>
+  <script>
+  import { Signature } from '@progress/kendo-vue-inputs';
+  
+  export default {
+    components: {
+      Signature,
+    },
+  };
+  </script>
+  
+  <style>
+  .wrapper {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .demo {
+    display: flex;
+    flex-direction: row;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/signature/controlled/export-scale/main.js b/vue-options-api-demos/inputs/signature/controlled/export-scale/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/controlled/export-scale/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/signature/controlled/export-scale/main.vue b/vue-options-api-demos/inputs/signature/controlled/export-scale/main.vue
new file mode 100644
index 00000000..54d3e272
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/controlled/export-scale/main.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="demo">
+    <span class="wrapper">
+      <div>
+        Signature value binding using <b>value</b> prop and <b>change</b> event
+      </div>
+      <Signature :value="value" @change="handleOnChange" :popup-scale="2" />
+    </span>
+    <span class="wrapper">
+      <div>Signature value binding using <b>v-model</b></div>
+      <Signature v-model="value" :popup-scale="2" />
+    </span>
+  </div>
+  <div class="demo">
+    <span class="wrapper">
+      <div style="margin-top: 1em">
+        <img
+          alt="Exported image"
+          :src="value"
+          :style="{ border: '1px solid', padding: '10px',  width: '600px' }"
+        />
+      </div>
+    </span>
+  </div>
+</template>
+<script>
+import { Signature } from "@progress/kendo-vue-inputs";
+import { sampleSignature } from "./sample-signature";
+
+export default {
+  components: {
+    Signature,
+  },
+  data() {
+    return {
+      value: sampleSignature,
+    };
+  },
+
+  methods: {
+    handleOnChange(e) {
+      this.value = e.value;
+    },
+  },
+};
+</script>
+<style>
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/inputs/signature/controlled/export-scale/sample-signature.js b/vue-options-api-demos/inputs/signature/controlled/export-scale/sample-signature.js
new file mode 100644
index 00000000..82d3e903
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/controlled/export-scale/sample-signature.js
@@ -0,0 +1,2 @@
+export const sampleSignature = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABdwAAAH4CAYAAABQRy9XAAAgAElEQVR4XuzdjZUjt4EuUL8I7BeBuRFYG4HpCCRHIDqC0UYgTgQzikBUBNZEYCoCSxEsFcGTItiHb83apenuJuqX9XPrHJxudaNQwAV6vPs1GvV/fuMiQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEegv8n94taIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBD4jcDdIiBAgAABAgQIECBAgAABAgQIECBAgAABAgMICNwHQNQEAQIECBAgQIAAAQIECBAgQIAAAQIECBAQuFsDBAgQIECAAAECBAgQIECAAAECBAgQIEBgAAGB+wCImiBAgAABAgQIECBAgAABAgQIECBAgAABAgJ3a4AAAQIECBAgQIAAAQIECBAgQIAAAQIECAwgIHAfAFETBAgQIECAAAECBAgQIECAAAECBAgQIEBA4G4NECBAgAABAgQIECBAgAABAgQIECBAgACBAQQE7gMgaoIAAQIECBAgQIAAAQIECBAgQIAAAQIECAjcrQECBAgQIECAAAECBAgQIECAAAECBAgQIDCAgMB9AERNECBAgAABAgQIECBAgAABAgQIECBAgAABgbs1QIAAAQIECBAgQIAAAQIECBAgQIAAAQIEBhAQuA+AqAkCBAgQIECAAAECBAgQIECAAAECBAgQICBwtwYIECBAgAABAgQIECBAgAABAgQIECBAgMAAAgL3ARA1QYAAAQIECBAgQIAAAQIECBAgQIAAAQIEBO7WAAECBAgQIECAAAECBAgQIECAAAECBAgQGEBA4D4AoiYIECBAgAABAgQIECBAgAABAgQIECBAgIDA3RogQIAAAQIECBAgQIAAAQIECBAgQIAAAQIDCAjcB0DUBAECBAgQIECAAAECBAgQIECAAAECBAgQELhbAwQIECBAgAABAgQIECBAgAABAgQIECBAYAABgfsAiJogQIAAAQIECBAgQIAAAQIECBAgQIAAAQICd2uAAAECBAgQIECAAAECBAgQIECAAAECBAgMICBwHwBREwQIECBAgAABAgQIECBAgAABAgQIECBAQOBuDRAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQEEBO4DIGqCAAECBAgQIECAAAECBAgQIECAAAECBAgI3K0BAgQIECBAgAABAgQIECBAgAABAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAYG7NUCAAAECBAgQIECAAAECBAgQIECAAAECBAYQELgPgKgJAgQIECBAgAABAgQIECBAgAABAgQIECAgcLcGCBAgQIAAAQIECBAgQIAAAQIECBAgQIDAAAIC9wEQNUGAAAECBAgQIECAAAECBAgQIECAAAECBATu1gABAgQIECBAgAABAgQIECBAgAABAgQIEBhAQOA+AKImCBAgQIAAAQIECBAgQIAAAQIECBAgQICAwN0aIECAAAECBAgQIECAAAECBAgQIECAAAECAwgI3AdA1AQBAgQIECBAgAABAgQIECBAgAABAgQIEBC4WwMECBAgQIAAAQIECBAgQIAAAQIECBAgQGAAAYH7AIiaIECAAAECBAgQIECAAAECBAgQIECAAAECAndrgAABAgQIECBAgAABAgQIECBAgAABAgQIDCAgcB8AURMECBAgQIAAAQIECBAgQIAAAQIECBAgQEDgbg0QIECAAAECBAgQIECAAAECBAgQIECAAIEBBATuAyBqggABAgQIECBAgAABAgQIECBAgAABAgQICNytAQIECBAgQIAAAQIECBAgQIAAAQIECBAgMICAwH0ARE0QIECAAAECBAgQIECAAAECBAgQIECAAAGBuzVAgAABAgQIECBAgAABAgQIECBAgAABAgQGEBC4D4CoCQIECBAgQIAAAQIECBAgQIAAAQIECBAgIHC3BggQIECAAAECBAgQIECAAAECBAgQIECAwAACAvcBEDVBgAABAgQIECBAgAABAgQIECBAgAABAgQE7tYAAQIECBAgQIAAAQIECBAgQIAAAQIECBAYQEDgPgCiJggQIECAAAECBAgQIECAAAECBAgQIECAgMDdGiBAgAABAgQIECBAgAABAgQIECBAgAABAgMICNwHQNQEAQIECBAgQIAAAQIECBAgQIAAAQIECBAQuFsDBAgQIECAAAECBAgQIECAAAECBAgQIEBgAAGB+wCImiBAgAABAgQIECBAgAABAgQIECBAgAABAgJ3a4AAAQIECBAgQIAAAQIECBAgQIAAAQIECAwgIHAfAFETBAgQIECAAAECBAgQIECAAAECBAgQIEBA4G4NECBAgAABAgQIECBAgAABAgQIECBAgACBAQQE7gMgaoIAAQIECBAgQIAAAQIECBAgQIAAAQIECAjcrQECBAgQIECAAAECBAgQIECAAAECBAgQIDCAgMB9AERNECBAgAABAgQIECBAgAABAgQIECBAgAABgbs1QIAAAQIECBAgQIAAAQIECBAgQIAAAQIEBhAQuA+AqAkCBAgQIECAAAECBAgQIECAAAECBAgQICBwtwYIECBAgAABAgQIECBAgAABAgQIECBAgMAAAgL3ARA1QYAAAQIECBAgQIAAAQIECBAgQIAAAQIEBO7WAAECBAgQIECAAAECBAgQIECAAAECBAgQGEBA4D4AoiYIECBAgAABAgQIECBAgAABAgQIECBAgIDA3RogQIAAAQIECBAgQIAAAQIECBAgQIAAAQIDCAjcB0DUBAECBAgQIECAAAECBAgQIECAAAECBAgQELhbAwQIECBAgAABAgQIECBAgAABAgQIECBAYAABgfsAiJogQIAAAQIECBAgQIAAAQIECBAgQIAAAQICd2uAAAECBAgQIECAAAECBAgQIECAAAECBAgMICBwHwBREwQIECBAgAABAgQIECBAgAABAgQIECBAQOBuDRAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQEEBO4DIGqCAAECBAgQIECAAAECBAgQIECAAAECBAgI3K0BAgQIECBAgAABAgQIECBAgAABAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAYG7NUCAAAECBAgQIECAAAECBAgQIECAAAECBAYQELgPgKgJAgQIECBAgAABAgQIECBAgAABAgQIECAgcLcGCBAgQIAAAQIECBAgQIAAAQIECBAgQIDAAAIC9wEQNUGAAAECBAgQIECAAAECBAgQIECAAAECBATu1gABAgQIECBAgAABAgQIECBAgAABAgQIEBhAQOA+AKImCBAgQIAAAQIECBAgQIAAAQIECBAgQICAwN0aIECAAAECBAgQIECAAAECBAgQIECAAAECAwgI3AdA1AQBAgQIECBAgAABAgQIECBAgAABAgQIEBC4WwMECBAgQIAAAQIECBAgQIAAAQIECBAgQGAAAYH7AIiaIECAAAECBAgQIECAAAECBAgQIECAAAECAndrgAABAgQIECBAgAABAgQIECBAgAABAgQIDCAgcB8AURMECBAgQIAAAQIECBAgQIAAAQIECBAgQEDgbg0QIECAAAECBAgQIECAAAECBAgQIECAAIEBBATuAyBqggABAgQIECBAgAABAgQIECBAgAABAgQICNytAQIECBAgQIAAAQIECBAgQIAAAQIECBAgMICAwH0ARE0QIECAAAECBAgQIECAAAECBAgQIECAAAGBuzVAgAABAgQIECBAgAABAgQIECBAgAABAgQGEBC4D4CoCQIECBAgQIAAAQIECBAgQIAAAQIECBAgIHC3BggQIECAAAECBAgQIECAAAECBAgQIECAwAACAvcBEDVBgAABAgQIECBAgAABAgQIECBAgAABAgQE7tYAAQIECBAgQIAAAQIECBAgQIAAAQIECBAYQEDgPgCiJggQIECAAAECBAgQIECAAAECBAgQIECAgMDdGiBAgAABAgQIECBAgAABAgQIECBAgAABAgMICNwHQNQEAQIECBAgQIAAAQIECBAgQIAAAQIECBAQuFsDBAgQIECAAAECBAgQIECAAAECBAgQIEBgAAGB+wCImiBAgAABAgQIECBAgAABAgQIECBAgAABAgJ3a4AAAQIECBAgQIAAAQIECBAgQIAAAQIECAwgIHAfAFETBAgQIECAAAECBAgQIECAAAECBAgQIEBA4G4NECBAgAABAgQIECBAgAABAgQIECBAgACBAQQE7gMgaoIAAQIECBAgQIAAAQIECBAgQIAAAQIECAjcrQECBAgQIECAAAECBAgQIECAAAECBAgQIDCAgMB9AERNECBAgAABAgQIECBAgAABAgQIECBAgAABgbs1QIAAAQIECBAgQIAAAQIECBAgQIAAAQIEBhAQuA+AqAkCBAgQIECAAAECBAgQIECAAAECBAgQICBwtwYIECBAgAABAgQIECBAgAABAgQIECBAgMAAAgL3ARA1QYAAAQIECBAgQIAAAQIECBAgQIAAAQIEBO7WAAECBAgQIECAAAECBAgQIECAAAECBAgQGEBA4D4AoiYIECBAgAABAgQIECBAgAABAgQIECBAgIDA3RogQIAAAQIECBAgQIAAAQIECBAgQIAAAQIDCAjcB0DUBAECBAgQIECAAAECBAgQIECAAAECBAgQELhbAwQIECBAgAABAgQIECBAgAABAgQIECBAYAABgfsAiJogQIAAAQIECBAgQIAAAQIECBAgQIAAAQICd2uAAAECBAgQIECAAAECBAgQIECAAAECBAgMICBwHwBREwQIECBAgAABAgQIECBAgAABAgQIECBAQOBuDRAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQEEBO4DIGqCAAECBAgQIECAAAECBAgQIECAAAECBAgI3K0BAgQIECBAgAABAgQIECBAgAABAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAYG7NUCAAAECBAgQIECAAAECBAgQIECAAAECBAYQELgPgKgJAgQIECBAgAABAgQIECBAgAABAgQIECAgcLcGCBAgQIAAAQIECBAgQIAAAQIECBAgQIDAAAIC9wEQNUGAAAECBAgQIECAAAECBAgQIECAAAECBATu1gABAgQIECBAgAABAgQIECBAgAABAgQIEBhAQOA+AKImCBAgQIAAAQIECBAgQIAAAQIECBAgQICAwN0aIECAAAECBAgQIECAAAECBAgQIECAAAECAwgI3AdA1AQBAgQIECBAgAABAgQIECBAgAABAgQIEBC4WwMECBAgQIAAAQIECBAgQIBAF4HflZt+6XKjewgQIECAwFoFBO5rnVnjIkCAAAECBAgQIECAAAEC4wh8WZo9lrIr5VLKn0v5cZxHaZUAAQIECCxLQOC+rPnSWwIECBAgQIAAAQIECBAg8CyBBOzflrK/60B2uf9bKXa7P2tmPJcAAQIEZiMgcJ/NVOgIAQIECBAgQIAAAQIECBCYpUCOjnlXyvGN3v2lfO80y97rFAECBAgQmFBA4D4htkcRIECAAAECBAgQIECAAIGFCXxR+vuhlN2Dfr8v3z8ubGy6S4AAAQIEBhcQuA9OqkECBAgQIECAAAECBAgQILB4gQTsCdoTuD+6fi0VPivl8qii7xMgQIAAgbULCNzXPsPGR4AAAQIECBAgQIAAAQIE6gVqjo+5be2n8h+HUrw0td5YTQIECBBYsYDAfcWTa2gECBAgQIAAAQIECBAgQKCFwJel7rGUXcU92dWeuh8r6qpCgAABAgQ2IyBw38xUGygBAgQIECBAgAABAgQIEHhRYF+++m1l0J4GPpXyVSkXngQIECBAgMA/CwjcrQgCBAgQIECAAAECBAgQILBNgQTtX5eSjzXXz6XSoZRzTWV1CBAgQIDAFgUE7lucdWMmQIAAAQIECBAgQIAAgS0L7MrgE7QnPK+93peKx9rK6hEgQIAAga0KCNy3OvPGTYAAAQIECBAgQIAAAQJbE8gLUT+0DNodH7O1VWK8BAgQINBLQODei8/NBAgQIECAAAECBAgQIEBg9gIJ2t+VknPX83nN9dO1/rmmsjoECBAgQIDAPwQE7lYCAQIECBAgQIAAAQIECBBYr8CXZWgfS6kN2nNO+7GU03pJjIwAAQIECIwnIHAfz1bLBAgQIECAAAECBAgQIEDgWQJflAfn+JhdZQd+LfUSzB8r66tGgAABAgQIvCAgcLcsCBAgQIAAAQIECBAgQIDAegT2ZSh5IWo+1lxN0J6w/ZeaG9QhQIAAAQIEXhcQuFsdBAgQIECAAAECBAgQIEBg+QK7MoTsaM/O9trru1LxWMql9gb1CBAgQIAAgbcFBO5WCAECBAgQIECAAAECBAgQWK7ArnQ9O9oPLYbww7W+oL0FmqoECBAgQKBGQOBeo6QOAQIECBAgQIAAAQIECBCYl0BegvqulK9KqX0haoL2YynneQ1FbwgQIECAwHoEBO7rmUsjIUCAAAECBAgQIECAAIFtCCRoT3BeG7T/fK1/2gaPURIgQIAAgecJCNyfZ+/JBAgQIECAAAECBAgQIECgjcCX1+B8V3lTXoiaHfCC9kow1QgQIECAQF8BgXtfQfcTIECAAAECBAgQIECAAIFxBfal+bwQ9bPKxyRo/3gtv1TeoxoBAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAgREEErAnaN+3aPu7Uje72gXtLdBUJUCAAAECQwkI3IeS1A4BAgQIECBAgAABAgQIEBhGYFea+bqUQ4vmPl2D9kuLe1QlQIAAAQIEBhYQuA8MqjkCBAgQIECAAAECBAgQINBRIC9BTdCeHeq11w+l4rGUc+0N6hEgQIAAAQLjCQjcx7PVMgECBAgQIECAAAECBAgQqBFI0P6ulATt+bzm+rlUOpRyrqmsDgECBAgQIDCNgMB9GmdPIUCAAAECBAgQIECAAAECLwl8Wb54LGVXyZOgPfVPlfVVI0CAAAECBCYUELhPiO1RBAgQIECAAAECBAgQIEDgKvBF+ZgXou4qRX4t9T5eixeiVqKpRoAAAQIEphYQuE8t7nkECBAgQIAAAQIECBAgsGWBfRl8zmnPx9rrvaC9lko9AgQIECDwXAGB+3P9PZ0AAQIECBAgQIAAAQIEtiGwK8PMjvbsbK+9visVj6Vcam9QjwABAgQIEHiugMD9uf6eToAAAQIECBAgQIAAAQLrFtiV4WVH+6HFMH8odfMC1R9b3KMqAQIECBAgMAMBgfsMJkEXCBAgQIAAAQIECBAgQGB1Ar8rI3p3Dc7zec2VoP1YyrmmsjoECBAgQIDA/AQE7vObEz0iQIAAAQIECBAgQIAAgWULZEd7dqjXBu0/X4P207KHrfcECBAgQICAwN0aIECAAAECBAgQIECAAAECwwh8eQ3Od5XN/Xqt/7GyvmoECBAgQIDAzAUE7jOfIN0jQIAAAQIECBAgQIAAgdkL7EsP80LUzyp7mqA9IXvKL5X3qEaAAAECBAgsQEDgvoBJ0kUCBAgQIECAAAECBAgQmKVAgvYcH5OPtdd3pWKOmxG014qpR4AAAQIEFiQgcF/QZOkqAQIECBAgQIAAAQIECMxCYFd6kaD90KI3n65B+6XFPaoSIECAAAECCxMQuC9swnSXAAECBAgQIECAAAECBJ4mkJeg5uiYNkH7D6X+sZTz03rtwQQIECBAgMBkAgL3yag9iAABAgQIECBAgAABAgQWKpCg/V0pOQomn9dcP5dKh1LONZXVIUCAAAECBNYhIHBfxzwaBQECBAgQIECAAAECBAiMI5Cg/VhKm6A99U/jdEerBAgQIECAwJwFBO5znh19I0CAAAECBAgQIECAAIFnCXx5Ddp3lR34tdT7eL2n8hbVCBAgQIAAgbUJCNzXNqPGQ4AAAQIECBAgQIAAAQJ9BPbl5pzT/lllI03QnrD9l8p7VCNAgAABAgRWKiBwX+nEGhYBAgQIECBAgAABAgQItBJI0P51KflYe31XKh5LudTeoB4BAgQIECCwbgGB+7rn1+gIECBAgAABAgQIECBA4G2BXfl2gvZDC6hPpW5eoCpob4GmKgECBAgQ2IKAwH0Ls2yMBAgQIECAAAECBAgQIHAvkJeg5uiYNkH7D6X+sZQzTgIECBAgQIDASwICd+uCAAECBAgQIECAAAECBLYkkKD9XSnZoZ7Pa66fr/W/r6msDgECBAgQILBdAYH7dufeyAkQIECAAAECBAgQILA1gRwd0zZoP5Z7TluDMl4CBAgQIECgm4DAvZubuwgQIECAAAECBAgQIEBgOQJflq4mON9VdvnXUu/jtfxSeY9qBAgQIECAAIHfCNwtAgIECBAgQIAAAQIECBBYq8C+DOxbQftap9e4CBAgQIDA/AQE7vObEz0iQIAAAQIECBAgQIAAgX4CCdpzfEw+1l7flYrHUi61N6hHgAABAgQIELgXELhbEwQIECBAgAABAgQIECCwFoFdGciHUr5oMaBPpW7OdRe0t0BTlQABAgQIEHhZQOBuZRAgQIAAAQIECBAgQIDA0gUStGdH+6HFQH4odY+lnFvcoyoBAgQIECBA4E0BgbsFQoAAAQIECBAgQIAAAQJLFfhd6fi7a3BeO4afS8WDoL2WSz0CBAgQIECgjYDAvY2WugQIECBAgAABAgQIECAwB4EmaM9RMPm85krQfizlVFNZHQIECBAgQIBAFwGBexc19xAgQIAAAQIECBAgQIDAswS+LA/+WEpt0P7rNWjPPS4CBAgQIECAwKgCAvdReTVOgAABAgQIECBAgAABAgMJJGg/lrKrbC9Be0L2lF8q71GNAAECBAgQINBLQODei8/NBAgQIECAAAECBAgQIDCywL60/6GUz1o857tSN8fNCNpboKlKgAABAgQI9BcQuPc31AIBAgQIECBAgAABAgQIDC+QoP3rUvKx9krQfizlUnuDegQIECBAgACBIQUE7kNqaosAAQIECBAgQIAAAQIE+grsSgPZ0f5Fi4Z+KHWzo/3HFveoSoAAAQIECBAYXEDgPjipBgkQIECAAAECBAgQIECgg0CC9uxoP7S4N0H7sZRzi3tUJUCAAAECBAiMJiBwH41WwwQIECBAgAABAgQIECBQIfC7UidBe3ao114/X+t/X3uDegQIECBAgACBKQQE7lMoewYBAgQIECBAgAABAgQI3AskaH93Dc7zec2VoP1YyqmmsjoECBAgQIAAgakFBO5Ti3seAQIECBAgQIAAAQIECDQ72muD9l8L2cdr2E6PAAECBAgQIDBbAYH7bKdGxwgQIECAAAECBAiMIrArrf6+lM9KSdi5v3lKvpfSXHkB5ftSHNsxylRsstEvy6iPd+vsLYgmaE/Y/ssmxQyaAAECBAgQWJSAwH1R06WzBAgQIECAAAECBFoJJFD/Yyn7UhKw52PbKyHnv5dyaXuj+gRuBNoG7bn1m1KOpQjaLSUCBAgQIEBgMQIC98VMlY4SIECAAAECBAgQeCjQBOxflJr7UnYP76ir8OdSzS73Oiu1/lkg6zDHx+Rj7fVdqXgs5VJ7g3oECBAgQIAAgbkICNznMhP6QYAAAQIECBAgQKCbwK7cll3sCdlTxrgE7mOorrvNfRle26D9h3LPoZTLummMjgABAgQIEFizgMB9zbNrbAQIECBAgAABAmsVyE72HNGRcDJHxYx9/ak84Dz2Q7S/CoFdGcWHUtr88idB+9EaW8X8GwQBAgQIENi8gMB980sAAAECBAgQIECAwIIEErKPuZP9NQr/f8OCFsmTupqgPTvaDy2e/1Op+5WgvYWYqgQIECBAgMDsBfwfzrOfIh0kQIAAAQIECBDYuECCzHfXIDM724e4sqP4ci0/lo95KeVfS3mp/U/l6212Kw/RP20sRyBrJkF7gvPa6+dS8VjKqfYG9QgQIECAAAECSxEQuC9lpvSTAAECBAgQIEBgawLNkTH7ngPPLuKE6udrubzQXsLPhKYvXc5v7zkBK709QXt+EZSgvfYXQYL2lS4GwyJAgAABAgT+V0DgbjUQIECAAAECBAgQmI9AE2IeSpd2Hbv1a7nv+2s5l4/Zvf7WlTPg//5KhQSkXfvRsftuW4BAs6O9NmjPmvxYynEBY9NFAgQIECBAgEAvAYF7Lz43EyBAgAABAgQIEBhEIKF3c2xMlwYTjN+G7LVtJDBN2L575QYvS62V3Ea9/NXF8Y31cq/QBO0J2x/94mcbgkZJgAABAgQIrF5A4L76KTZAAgQIECBAgACBGQt8XvqWIzn2HfrY7GRPmJkjY9peCdv/VkrC/peunPPepV9t+6H+/AXaBu0Z0TelHEsRtM9/fvWQAAECBAgQGFBA4D4gpqYIECBAgAABAgQIVAgk6E7QnjByV1H/vkpeYnoqJTva+1wJ2/evNJAwP30TlvYRXv69WR8fSnntlzIvjfC769q+LH/4RkCAAAECBAgQaC8gcG9v5g4CBAgQIECAAAECXQS6vGSyeU4C8FMp2c0+RJD5bWnn8MYgHCXTZYbXc8++DCXntOdj7ZW/iMiaGmJ91j5TPQIECBAgQIDA7AQE7rObEh0iQIAAAQIECBBYmcCujCfhZcLItldCzNO1tL33tfqPwvb35cbjUA/TzqIEspM9O9r3LXqdNZr1cm5xj6oECBAgQIAAgdUKCNxXO7UGRoAAAQIECBAg8GSBhJZtdwk3Xc6xHF3PZn9t2Nlh/9dS0q/Xrjz38GQ3j59eYHddq23mXtA+/Tx5IgECBAgQILAAAYH7AiZJFwkQIECAAAECBBYlkBdMJrjct+z1z6X+qZQE7UOfnZ6dywnbd2/0SdjecsJWUD3roe1fX2SdHq9rdQUEhkCAAAECBAgQGFZA4D6sp9YIECBAgAABAgS2KdDnRag/FbKE7KeR6L4o7eYYmfTxtSt9aPNizJG6qtmJBLIWErR/1eJ5gmpWyTgAACAASURBVPYWWKoSIECAAAEC2xUQuG937o2cAAECBAgQIECgv0CfF6GOfSTHrgwv53EncH/rSti+L2XoXfX9dbUwtECX9ZoX9uYXQsehO6M9AgQIECBAgMAaBQTua5xVYyJAgAABAgQIEBhbYFce0PYojqZPObol4eVlxE6+uz7jrV3tefynUg6lCNtHnIwZNN0naB/jiKMZkOgCAQIECBAgQGAcAYH7OK5aJUCAAAECBAgQWKfAvgyrOaO9zQibXcJjh5e70qkcH5N+Prq+KRXaHCnyqD3fn6dA7S9fmt5PtVbnqaVXBAgQIECAAIGeAgL3noBuJ0CAAAECBAgQ2IRAAuzsaM/HNlfOvW7OZx97F3n6d6zoXALVBO2nirqqLFcgvxjKeti1GMIUf33RojuqEiBAgAABAgSWJyBwX96c6TEBAgQIECBAgMB0As1u9n3LR479ItTb7qRv2dVeE6ymX4dSfmw5HtWXIyBoX85c6SkBAgQIECCwQgGB+won1ZAIECBAgAABAgR6C3QJLfPQsV+EejuwBOy1x8fkvvelHHvLaGCuAl3WbM7wz187XOY6KP0iQIAAAQIECCxNQOC+tBnTXwIECBAgQIAAgTEFuoSW6c+UR3HkBZg5Pqb2/PX8EiB17Wofc+U8r+39dT3kY+015S+GavukHgECBAgQIEBgFQIC91VMo0EQIECAAAECBAj0EEiA/Xkpx1J2LdrJWeinUnJG+6XFfX2q5hcCeV76/OhK/zKm1HetT2BfhtT2vQKC9vWtAyMiQIAAAQIEZiYgcJ/ZhOgOAQIECBAgQIDAZAIJrd+Vkt3fNQF207EE2QmxU8Z+EWrzzISrH0r5rFInweqhlEtlfdWWI5C1IGhfznzpKQECBAgQILAxAYH7xibccAkQIECAAAECBP47XO8StP9c7juWcprQMAF7gvaErDVX+phfIHxfU1mdRQlkDbQN2p+xZheFqrMECBAgQIAAgaEFBO5Di2qPAAECBAgQIEBgrgJLCtp313D1UInZ7Lo/VtZXbTkCgvblzJWeEiBAgAABAgR+I3C3CAgQIECAAAECBNYusKSgPX3NjvbaoD1zN+ULW9e+VuY0PkH7nGZDXwgQIECAAAEClQIC90oo1QgQIECAAAECBBYn0DVoz/nnOZ99ymNZuvTVCzAXtySrOrwrtXJ0zKGq9j8qOTqmBZaqBAgQIECAAIExBQTuY+pqmwABAgQIECBA4BkCXcLr9PNZAXbC1TYvbs3xMal/egauZ44msCsttw3an/EC39EANEyAAAECBAgQWIOAwH0Ns2gMBAgQIECAAAECjcCX5ZNjKQkva69nBe1t+ypcrZ3RZdXLWhW0L2vO9JYAAQIECBAg8KqAwN3iIECAAAECBAgQWINA2/A6Y15K0J6+vi8lx9z8sobJMob/FtiVImi3GAgQIECAAAECKxMQuK9sQg2HAAECBAgQILAxgbUH7V6Iur4FLWhf35waEQECBAgQIEDgfwQE7hYDAQIECBAgQIDAEgXWHrR/KpOSc9ovS5wcfX5R4LPy1XelHFr4OEaoBZaqBAgQIECAAIE5CAjc5zAL+kCAAAECBAgQIFArsC8VP5SS8LL2WtLRMc/qa62leu0FsmZzdEw+1l6C9lop9QgQIECAAAECMxMQuM9sQnSHAAECBAgQIEDgRYEuoeWzwusl7b633MYT6LJmBe3jzYeWCRAgQIAAAQKTCAjcJ2H2EAIECBAgQIAAgY4C2cmeHe0JL2uvn0rFHMdyrr1hoHqC9oEgF95M1qod7QufRN0nQIAAAQIECHQVELh3lXMfAQIECBAgQIDAmAK7a2h5aPGQn0vdYymnFvf0rfq70sDn1+emz7XXs3bf1/ZPvfYC+YVL1uu+xa12tLfAUpUAAQIECBAgsAQBgfsSZkkfCRAgQIAAAQLbEdiVoWZ3cILL2utZQXtegJmd9Anday9Be63Ucup1+csGQfty5ldPCRAgQIAAAQKtBATurbhUJkCAAAECBAgQGEkgoXXbAFvQPtJkaPahQNe/bBC0P6RVgQABAgQIECCwbAGB+7LnT+8JECBAgAABAksX6BK0J7Q8lvJxwsF36We6Z0f7hJM0waO6rgNB+wST4xEECBAgQIAAgTkICNznMAv6QIAAAQIECBDYpkDbozieEVp2DVgF7eta07synLZHHUXgGWt2XfJGQ4AAAQIECBBYmIDAfWETprsECBAgQIAAgRUI7MsYvi0lIWbt9b5UzI72X2pvGKBefiGQZzqjfQDMhTaRtdq8DLXNEJrjjr6feM226aO6BAgQIECAAAECIwgI3EdA1SQBAgQIECBAgMCLAgkvs0s4H2uv70rFYymX2hsGqNd2530eaUf7APAzaqIJ2dus1XT/Ge8VmBGbrhAgQIAAAQIECAjcrQECBAgQIECAAIGxBXblAW2P4xC0jz0r2r8XyF8yJGj/qpSs2TZXfuFyupY296lLgAABAgQIECCwMgGB+8om1HAIECBAgAABAjMSSID5oZRDiz49Y6f4/trPz2bezxbdU7WFwK7UfXddp22OD8ojnrFeWwxNVQIECBAgQIAAgakFBO5Ti3seAQIECBAgQGD9Al1eNPpTYcnO4vOEPPvyrLZH3AhYJ5ygkR+V+U/Q/kWH5zzjLzA6dNMtBAgQIECAAAECUwsI3KcW9zwCBAgQIECAwLoF2r5o9BlnXu/KFOSlrQlcay9Be63U/Os1x8a0+YuGjOrXUk6l5EW6l/kPUw8JECBAgAABAgSeISBwf4a6ZxIgQIAAAQIE1iewL0NKiL2rHFrCy+M1vKy8pXe19K3tWfLP2Hnfe6Aa+BeBzH0TtLc9Nia/FErIfirlF7YECBAgQIAAAQIE3hIQuFsfBAgQIECAAAECfQSySzjntO8rG0nQnvAyZarwMgFrgvYcWVN7PWPnfW3f1KsXyLpM0H6ov+V/anoRagc0txAgQIAAAQIEti4gcN/6CjB+AgQIECBAgEA3gV25re1u8anPve5ylrygvdt6mNtdXY+NyTiyTk+lnOc2KP0hQIAAAQIECBCYv4DAff5zpIcECBAgQIAAgTkJdAmxs1P4UMplwoHkZZjHUmqPD2l23uce1zIFdqXbXY+NcT77MudcrwkQIECAAAECsxMQuM9uSnSIAAECBAgQIDBbgbYvRH3Gi0bTx4TmCV9rrmcccVPTL3XqBfalatdjY5q/aPi+tDHVEUf1I1OTAAECBAgQIEBgcQIC98VNmQ4TIECAAAECBCYXSKDZ5oWozziWpW0fg/hNKUdB6+TraYgH5i8XPr/O365Dg/llUN4jkKDdRYAAAQIECBAgQGAwAYH7YJQaIkCAAAECBAisTqDrC1GPE0rsy7Nylnw+1l5TnyVf2y/1HgvsrvP9RflYe1xQ02r+miEBe9bn5fGj1CBAgAABAgQIECDQXkDg3t7MHQQIECBAgACBtQskyPxQyqHFQKfeLb679jHBa+31jLPka/um3tsC2c3+VSn7DlD5i4vsZj+V4tiYDoBuIUCAAAECBAgQqBcQuNdbqUmAAAECBAgQ2IJAdosn2KzdPfzpWv8yEc6uPCd9PLR43jPOkm/RPVVfEchcN2ez5/O2l2Nj2oqpT4AAAQIECBAg0FtA4N6bUAMECBAgQIAAgVUItH3Z6NQhdn4B8K6UYwvt7Gw+lHJucY+qzxfYly50fQmqY2OeP396QIAAAQIECBDYtIDAfdPTb/AECBAgQIAAgf8+oqPNGehTvxC1Cdrb7Lqfuo+WUX+Bvi9BbeY8Z7Q7Nqb/fGiBAAECBAgQIECgo4DAvSOc2wgQIECAAAECCxfYXYP2Q+U4snM452AfK+sPUS27nPPM2uNtntHHIca55TbyYt785UKXl6DGLS/APZVy3jKisRMgQIAAAQIECMxHQOA+n7nQEwIECBAgQIDAFAJddown1MwO86l2Drc93qYJ2hPOT9XHKeZqzc9ojozZdxhkdrMnZE+5dLjfLQQIECBAgAABAgRGExC4j0arYQIECBAgQIDA7ATaBtk5p/0wYai5L8/6UEp2PddeU/8yoLZf6v2rwK58KbvZs6Zq/2rhtpWsx9O18CVAgAABAgQIECAwSwGB+yynRacIECBAgAABAoMK7Etrbc9pTyh6HrQXrzfWtn9pKUH7sZTLRH30mO4CfXazNy9BzV8v/Ni9C+4kQIAAAQIECBAgMI2AwH0aZ08hQIAAAQIECDxDYFcemqD9UPnwhJvHUhJuTnFlJ3t2tO9bPCy7nHO8jfC1BdoTqmbtNUF7Pm97eQlqWzH1CRAgQIAAAQIEZiEgcJ/FNOgEAQIECBAgQGBQgS7ntH9TenAsZYoz0BPAtvlFQHAStKd/50GlNDa0wOelwUMpeQlql8tLULuouYcAAQIECBAgQGA2AgL32UyFjhAgQIAAAQIEBhFoe077p/LU7Bi/DPL0txvZlW+3Ddqz0zn9+36C/nlEN4HMa9/d7KfShpfedvN3FwECBAgQIECAwIwEBO4zmgxdIUCAAAECBAj0EGh7PMtP1yD73OOZtbdmx32C9gTntVdzpMip9gb1Jhfou5s9v+zJ/PplyuRT54EECBAgQIAAAQJjCQjcx5LVLgECBAgQIEBgGoGE2TkH/VD5uJzTnuA7QefYV5ejbaY+R35sg7W1vysDGmI3e9bfZW04xkOAAAECBAgQIEBA4G4NECBAgAABAgSWK9DsGk+wXXO9L5WmOLaja9Cevk3Rvxordf5ZoO9u9pzBf7oWtgQIECBAgAABAgRWKyBwX+3UGhgBAgQIECCwYoG8kDK72neVY0zYeSjlUlm/azVBe1e5ed6X+cxu9vxFRO1aux1J/lrhVEp+iTL22punoF4RIECAAAECBAhsTkDgvrkpN2ACBAgQIEBgwQIJPb8tZV85hpyDfijlXFm/T7UEswlWa3fb51nflXIs5dLnwe4dXCDrqzk2pkvjdrN3UXMPAQIECBAgQIDAKgQE7quYRoMgQIAAAQIEVi7Q9qWjU56DnmA2ofmuxRwI2ltgTVQ189fnbHa72SeaKI8hQIAAAQIECBCYt4DAfd7zo3cECBAgQIAAgbY7x7+5BuC/jEwnaB8ZeKLm+57N/lPpZ/6y4TRRfz2GAAECBAgQIECAwKwFBO6znh6dI0CAAAECBDYssC9jzzntn1UaTHVOe5egPX07lnKuHItq4wpkTTW72dscAdT0KrvZvy8lQfuP43ZV6wQIECBAgAABAgSWJSBwX9Z86S0BAgQIECCwfoFdGeLXpRwqh5pz2vNSywSgY16C9jF1x28766rZzV77S5z7XjW72bPWxv4LivFFPIEAAQIECBAgQIDACAIC9xFQNUmAAAECBAgQ6CiQoD3hec2u4+wyzg7jY8dn1d4maK+Vml+9rKOE7F9cS5ce2s3eRc09BAgQIECAAAECmxUQuG926g2cAAECBAgQmJFAAtEcH7Or7NMULx0VtFdOxgyr3YbsNb+8eWkIdrPPcGJ1iQABAgQIECBAYP4CAvf5z5EeEiBAgAABAusVSMD+bSn7yiFOcRa6oL1yMmZWre+57BlOdrOfrsXZ7DObYN0hQIAAAQIECBBYhoDAfRnzpJcECBAgQIDAugSy67g5PqZmZAlCc9RMwtAxrubokWNpfNfiATk/PveM1a8WXdlk1SZkz19ItJm3e6xP5Qs5l908bnIZGTQBAgQIECBAgMCQAgL3ITW1RYAAAQIECBB4LJAd5Dl7vfaoj/fX+mO8pDJ9eFdK7bnxzegE7Y/neawau9Jw35efpm+Zw6zDBO2XsTqrXQIECBAgQIAAAQJbExC4b23GjZcAAQIECBB4lsC+PDi72vOx5srxMYdSLjWVW9YRtLcEe3L1zFd+UZP1kF3tXS9HxnSVcx8BAgQIECBAgACBSgGBeyWUagQIECBAgACBjgIJS/NC1ISlNVd2HqfuuaZyyzq7Uj872tN+7Q77PMKO9pbQA1RvjvnJcTEpXa+E7NnF3pSu7biPAAECBAgQIECAAIEKAYF7BZIqBAgQIECAAIGOAs057TXhdoLRHPFx7Pist27blW+mL4eWbf907dOp5X2qdxdojovpE7Ln6c257AnaxziOqPsI3UmAAAECBAgQIEBgxQIC9xVPrqERIECAAAECTxPYlyd/W8qusgfflXo5R33oYDT9yI72tuFtjrM5lnKu7L9q/QQyTzkyJvNU88uZ156WX5CcrmXotdRvhO4mQIAAAQIECBAgsBEBgftGJtowCRAgQIAAgUkEduUpOT6mNuBOQJqg/Txw75rzvvct2xW0twTrUT1rpZmnfN71akJ2Lz/tKug+AgQIECBAgAABAgMKCNwHxNQUAQIECBAgsFmB5iWkx0qBHB+ToP1UWb+mWvNizbS7q7nhpo6gvSVYx+rNueyZoz4vP82Z+gnYs35+7NgXtxEgQIAAAQIECBAgMIKAwH0EVE0SIECAAAECmxLIbvbsat9VjvqbUu9YylBHfuS5XV6Emu7mKJucGy+0rZy8jtVyLnvWyaHj/bmtefmp+eqB6FYCBAgQIECAAAECYwsI3McW1j4BAgQIECCwVoFdGVjOad9XDjC7yLOzeahwO8/tcj57upug/VjKpbLvqrUXyProe2RME7JnN3uKiwABAgQIECBAgACBmQsI3Gc+QbpHgAABAgQIzE4gx4J8XUrC85orx3+k7lCBaULcLkeSJLzN7uhTKZeajqvTSaDr+fm3D/t0XS+ZKxcBAgQIECBAgAABAgsSELgvaLJ0lQABAgQIPFFgV579+xeen6+n3F+vff22XoLrPudYp63sFr89miWf3+4gv/3vBN+XnoYJUxNap++PribgTv2+x8fkec2xMS95v9WXjLsJ2vv249GYt/r9zEnXY30as7z8NPOUX8yYp62uJOMmQIAAAQIECBBYvIDAffFTaAAECBAgQOChwB9varwUcu/vWhgiCH/YqSdXuA3qz9e+NB8TfN4HnvnFQM5pv7d6bRjZoZxd6Jee49yV+7Ob/tChnRxhc7qWDre7pUIgZ7Nnbr6oqPtSleblpwna+66Vjl1wGwECBAgQIECAAAECQwoI3IfU1BYBAgQIEBhPIIHvb6/N3wfi+d7tjuv9eN3YVMsJQJsQtNY0AeqhlHNPqQS5Cexrn3v7uJzPfhqgDz2HsNrb87PWHOuz6zDK5lx2c9QBzy0ECBAgQIAAAQIE5i4gcJ/7DOkfAQIECKxR4DY8vw3Lbz/fwi7ztc1tgu5Dj0FlzhO0H0tpG+QmxE2Aa6d0jwl4cGvmJH9tkN3sNUcK3TfX/MWBI2PGmyMtEyBAgAABAgQIEHi6gMD96VOgAwQIECCwAoHbI1v2N+N57fMVDNkQXhHIUTQ5ruZ8LQlZH127UqHr+d/OZ3+k2//7ff7awC9C+vtrgQABAgQIECBAgMCiBATui5ounSVAgACBiQSye/UP12clDE3Jdfv5/TEuE3XNYxYocCp9zu73813f9+W/E7R3Of87QX7zgs0Fksy+y33+2iCDyxn+mffsZncRIECAAAECBAgQILAhAYH7hibbUAkQIEDgN81RLrfHteyKS0quPaNXBbJTNzu3769L+UJK7ddv6zW7wfuw3//i4/4ontv5vT3Kp88zu957Ljf+uZRmx3T60/ZKcJ+g/aW5aNuW+v8qkPXS9a8N7Ga3oggQIECAAAECBAgQ+I3A3SIgQIAAgTUINEe63IatTRDrLPTf/Ob+WJMEv7dXwtuE37fXfZ01rJPbMeyv/3EoH/MCzDlfCXITsqfcz9Oc+72kvmU9ZB1kPbS9frrOzantjeoTIECAAAECBAgQILA+AYH7+ubUiAgQILAmgSZI35VBpeTaXz/efm1NY35tLDmr+3LzzfPN5/eB+UsB+haM2owx6+dDKbXHuTS/tLg9bqjN87rUFeR2UWt3TxOyN/+utLk7f21wKuX2Z7HN/eoSIECAAAECBAgQILBCAYH7CifVkAgQILAQgSZMb3aiJwBN2cKO9Nvw/FLGnJLr/ogVQd44i/nr0uxX17X26AnZXZ66p7uKzXrdX9dt/vv25bmP2n3r+zn/O7vZzX8fxdfv7XM+e/PXBlkPzc/tOL3UKgECBAgQIECAAAECixQQuC9y2nSaAAECsxfYWpiencjNUR+3u8tf+3z2E7jSDu7LuL4tZVc5vm9KvePN3D66Le222TV/257zvx/p9v9+gvacz177y5bbJ/prg/7+WiBAgAABAgQIECCwCQGB+yam2SAJECAwqMBWwvTmCJHbXee3n1+Kaopr/gK70sU2QXjm/tBifvelbtfzv/PXDsdSvi/F+ezjrKXMf/6qIXPa9vLXBm3F1CdAgAABAgQIECCwcQGB+8YXgOETIEDgTqA5n7o51uX+49LBbo9yaXaf34bozj5f+gz/c/+bHc3HymFlfWT3c8LvR1efY0nSdkL9HBtT86xHffH9lwV25ctdgnZ/bWBFESBAgAABAgQIECDQWUDg3pnOjQQIEFikwFoD9dsjXc7XmbmUjym5mq8tctJ0upNAXoaaXe27yrvfl3oJwB/tMk97OZbkUEp+ntpe2TGdUL9Zm23vV/+xwL5USdCej22u/MIla+BUsQ7atKsuAQIECBAgQIAAAQIbEhC4b2iyDZUAgU0IrC1Qb4L0l3ah335tE5NrkFUCu1Ir57Tvq2r/Y6f5oZTLg/qfl+8nKK9t96XmsnM6/XsU6ld2XbU7gcxNl6Dd+eyWEgECBAgQIECAAAECgwkI3Aej1BABAgQmEVhToN6E6Qk6U24D9PMkmh6yJoExjo/ZFaDmbPZ83vfKLvpj30bc/y8C+/KVLkF7ftmS+fDvjUVFgAABAgQIECBAgMBgAgL3wSg1RIAAgcEEmlB9V1pM+ayUfC2h0lIuYfpSZmod/WxzfEx2mefYkOMbQ8/PWo6NSbtDXTmuJD/PruEEMk9dgvbvrvN/Ga4rWiJAgAABAgQIECBAgMA/BATuVgIBAgSeI5Dg7fel3IbpzQtKn9Oj+qcK0+ut1BxXID9HbY6Peev89Pz8ZTd7jo1Ju0Nf/14azEt5Xf0F9qWJtkG7F6H2d9cCAQIECBAgQIAAAQIVAgL3CiRVCBAg0FEgYfpvS0k41ITpSwjVm0D9fB33/ceOHG4jMJhAl+NjDuXpzVq+7Uh+PptjY7p0MCH+H0rZvXHzf5TvZVe9q59A5qpL0B77mhfi9uuduwkQIECAAAECBAgQIFAEBO6WAQECBPoJ/PF6e4KgJkzflc9T5no1gXp22zbnpt9+nGu/9YtABBKOJzzNz9uj67XjY/Lz2eds9qbd70s7OXrm8EZHcnzJW99/NAbf/8e/p23+kiFmzRwJ2q0gAgQIECBAgAABAgQmFRC4T8rtYQQILFQgYU9z/Es+z8715iiYOQ5JoD7HWdGnvgL5mftQyr6yofvjYxLQf17KoUUb94/KSzZP15L2/nb9t+C1LuVnMf3NL7Rc7QXy7212tGfOaq+clX8sJb8M4V6rph4BAgQIECBAgAABAoMJCNwHo9QQAQIrEMhu9WaX+u3Z6nMbmkB9bjOiP2MK5GcyoWvOVq+5ErgeSjlfK+/Lx+xm/+L6813Txm2d7JROeHss5XL9Rv59SNj+1i57YXtb6f+t3/bIoNzZBO2n7o91JwECBAgQIECAAAECBPoLCNz7G2qBAIFlCSTIyXnLt4H6rvx3ypyu7KS9P+7lUr6W4iKwFYG2x8ccC0yOEMnPc58jY+KbwDxt3e+UTvif57x1Cdu7r9Ac0RPfmiOD8hRBe3drdxIgQIAAAQIECBAgMIKAwH0EVE0SIDALgdtgfVd6lIB9P4ue/W8nbkP1S/lyyo+lOAZhZhOlO5MLtD0+JuekH0vJX6lkJ3tKl6vZzZ6gPT+Lt1f+Hak5Rzx9yW58P8ftZiD/Psc3zjXXa+fz19yrDgECBAgQIECAAAECBEYTELiPRqthAgQmFEg4l13rCWoS2uRjbWgzZjcTCCW0u1xLE6afx3yotgksWKDt8THZSd4c7XLoMe7XdrM3TSbATxj8aNf1N6VO7dE3Pbq7qlvzb3XNLzKaQXsZ6qqm32AIECBAgAABAgQIrE9A4L6+OTUiAmsWSDCTl5fuS0nInv/Ox2deOc7gUsp9mH5+Zqc8m8ACBdocH9MML7vIH4Xgr1HkZzfHxWQ3e36GX7rSdsLgmh3zfyn1Tgt0f1aXY9scH1Pbh/fX+fLXA7Vi6hEgQIAAAQIECBAgMLmAwH1ycg8kQKBSIEdD3Ibq+bxrsFb5yDer5fiXy7U0u9bvj5wY4jnaILA1gbbHx/T1yZEvCdpT3rpqfwGQ4D6BvH8P6mdmX6q2OT6mOTIo/wa7CBAgQIAAAQIECBAgMGsBgfusp0fnCGxGoDkSJiFMPn/WrvXb3eoJdm6Pg9nMZBgogYkE2h4f06dbj46MuW17V/6j9oiTT6XuoRQ7rutmJ3P+4WpWc0d+0Xks5VxTWR0CBAgQIECAAAECBAjMQUDgPodZ0AcC2xJowvUmWN8/YfgJ3y6lJFC/PwrmCd3xSAKbE6jdPd4HJmd9n66lZvd52yNO/qO0neNoXHUC+SuAmnPw01p++flVKY/+CqHuyWoRIECAAAECBAgQIEBgQgGB+4TYHkVggwLPDtfvg/Vmx/oGp8KQCcxCYOzjYxKyN8fFtAlr8wuAYym7CqX8u3IopSbEr2huE1XilbD90dW8EDVz4SJAgAABAgQIECBAgMAiBQTui5w2nSYwS4HsDs256/tSEqrl41RXQpqEX+dSLteSz10ECMxDYOzjY3K0SwL2U8vh5t+pr1v8e5WXdh5bPmPr1Q8FoCZszxxmV3v+DXcRIECAAAECBAgQIEBgsQIC98VOnY4TeLrA7bnrCa12E/WoeXlpcxxMcyTMRI/3GAIEWgqMdXxME7InaG973uQL5wAAIABJREFUhnr+vUrQfqgci13tlVB31eL7KGx3fEw3W3cRIECAAAECBAgQIDBTAYH7TCdGtwjMUOB+93p2rI553e5ab46CcYTDmOLaJjCswL4012b3eM3T8wu3UyldQva03/acdkec1MzKy3XyS9m/Xc1fa+Wb8o1jKW1/YdK9V+4kQIAAAQIECBAgQIDAyAIC95GBNU9goQK70u8/lLK/lgQnY1734bqz1sfU1jaBcQTy70Z+MZeXY+bfjqF+KZeQvTmX/dKx603QniNLavvliJOO2Nfb/l4+vva/Hfk3P+vk3O8R7iZAgAABAgQIECBAgMD8BATu85sTPSLwDIEEUJ9fQ7IEZbsROyFcHxFX0wQmFBjrWKn8G5EgtgnZ++5+bvNC1PDliJPDtQ8Tcq7qUR/LaN69MqLMb/53xl8srWrKDYYAAQIECBAgQIAAgUZA4G4tENiuwG3APtYOduH6dteXka9PYMxjpfJvRROw5+MQV9ugPX04lpKw2NVdYF9uzVEyL10xzv/eXLo3704CBAgQIECAAAECBAjMW0DgPu/50TsCQwrsSmPNcQ/5U/4xrrxYMLsWz9ciVBlDWZsExhfIX73k34uEo/trGfqp2UmecP10/XdjqPbT3w/Xvte2+b5UTNDedzd97fPWXC9he+bgpevP1zlf8/iNjQABAgQIECBAgACBjQsI3De+AAx/9QK7MsLsZD+UMsYu9pytfC6lCdmFVatfUga4UoH8W3G7g32Mfy9uj4rJvxuXgS33pb22L2n9rtxzHKEvAw9tMc3lf2u+faW3ORN/rF/2LgZIRwkQIECAAAECBAgQWL+AwH39c2yE2xNozmNPsDFkuNGEZQnKmoB9e7pGTGAdAvfh+m7EYSXUzu7xsc7s3pe22wbt+WXhsZT8e+YaTuA/S1MvraX870e+7peyw1lriQABAgQIECBAgACBmQoI3Gc6MbpFoINAwoyETgnZE7r3vXI8zLmUJly/9G3Q/QQIPEUgu9Wb42Hy+Ri7118aWP4N+er678gYA99f/83Lx9pL0F4r1b5e/rfnr6/c9pfy9VP7Jt1BgAABAgQIECBAgACB5QkI3Jc3Z3pM4F4gYdO7UvruZs95yudrybnKdiJaawSWJ5Aw/Q+lNMF6/n2Y+hr75aMZU9sd7fn37VjKaWqMDT0v/7uRI8zur9jvNuRgqAQIECBAgAABAgQIbFxA4L7xBWD4ixZIgJHQ6dBxFLdHxJxLG2Md99Cxe24jQOCBQP4NaML1ffk8IfsQf93SBz7Hx2RX+xi/sMsYBe19Zmfce//rlebtbh/XXesECBAgQIAAAQIECMxMQOA+swnRHQKVAodS70OHcC0he3YhNqXycaoRIPBkgWbn+q70Y1/KHML1W5Ixj4/JeAXtT16ADx7/1nEy/m/Nec+d3hEgQIAAAQIECBAgMLCA/ydoYFDNEZhA4NvyjEOL5wjZW2CpSuDJAtmhnl3rCZl3pUx95vq5PPP3pdQeUTXm8TExaBu0pz95QWvKGLvsn7w8Zvv443Wu7juYM/Mzjy4CBAgQIECAAAECBAhsRkDgvpmpNtCVCLwWarw0vBztYCf7SibeMFYpkDA94XY+JpScctd6ztXOMVIp52vZlY/5hV76UnONdXxMni9or5mB+dR57X+b3pcu5nsuAgQIECBAgAABAgQIbEZA4L6ZqTbQFQgkjPt7xTi+uQYcdndWYKlCYAKBP5Zn7K4lP8f5PB+nurLruwnWm4+3/z5kV31evHys7NBYx8fkhZs5/31f2Y9Us6O9BdaIVbN28kuS+0vgPiK6pgkQIECAAAECBAgQmKeAwH2e86JXBF4SeC3QeKR1fqFCQrf7QP6lr+U4ABcBAo8FdqVKs1s9nzdHwSTMnvrKz+3t7vXLGx3I0TF5H0T6/Oga6/iYL8uD8+9bTR+aPgraH83WtN/P/AncpzX3NAIECBAgQIAAAQIEZiogcJ/pxOgWgRcEXgs0psY63z0wwX3CvdvrUv4j5fbKERb3X5u6755HoI/ArtycUD0fU5ojYPZ9Gu15b3ab3+5ev/9ZfK359P/Zx8cI2ntO/oxuP5a+CNxnNCG6QoAAAQIECBAgQIDA8wQE7s+z92QCbQUSkCVM+23bG2dc/1L6lnJ71X6tOSZjxsPTtYUJ5GfsNlDPf9+WZw7n9liY/Iw0O9jb9mkOx8cI2tvO2vzrH0sXBe7znyc9JECAAAECBAgQIEBgAgGB+wTIHkFgQIHsqM2LUBMKul4WOL/w5Uv5Wsr99VLd1HGUzvpW1+7m56bZmZ6v3Za5jDq71rNeb3euD/FOhmcfH9MlaM9fxnws5VTKEAZzmeO19eNYBiRwX9usGg8BAgQIECBAgAABAp0EBO6d2NxE4OkCzYsF85JB1zQCLx2d0zz5/EoXLuXrKS9dCVUFiP3mLru1/3BtYlc+puRqAvV8P5/P9Wp2rTe71bNWXltLfcYQlzbHx3wq9Q8Drc9mR33+zWpznn2C9mMppz4Dd+9kApkrgftk3B5EgAABAgQIECBAgMCcBQTuc54dfSPwWKAJFPelahMy5uOajp15rLDOGucHw3r0/dz+1i8J3mp+6B3+u/Kwmr/KyDq+vZo13Xwt7aQs7WreX5A5a+YkIfvYv3Bpe3xM+nkopWZtPZoDQfsjoXV9/1iGI3Bf15waDQECBAgQIECAAAECHQUE7h3h3EZgQQL7F/pa+7U/Lmicukrg2QL5RcXlWhKo5/N8fMbV9viYHNtyHKCjgvYBEBfYRNaOwH2BE6fLBAgQIECAAAECBAgMLyBwH95UiwTWLPDSER27MuCU2+ulr9l5v+aVsZ2xNbv/z2XIzW71S/k8ZQ5XfvbaHh+T41769r9r0J6jlRL2n+aApw+dBY7lToF7Zz43EiBAgAABAgQIECCwJgGB+5pm01gILE/g/siQjKD2awkWa44pWZ6KHj9T4DZQTz/O1840H5/Zt0fPTuBZe1b6UMfHdA3a43y88X00Nt+ft0DmUuA+7znSOwIECBAgQIAAAQIEJhIQuE8E7TEECEwmsH/hSbvytZT766W6CRCbF3FO1mkPGl2geUFpHnS5lnx+vj65+Th6R0Z4QNZxdrW/tMbvHxeHoY6PeVfaOpbS5mWogvYRFsAMmsw6ELjPYCJ0gQABAgQIECBAgACB5wsI3J8/B3pAgMAyBF46Tic9f+3r+V4C0JSXLkfsDDPvzY702xfEXkrTKbnOwzxmlq1kbX0oJee111yfSqUhjo/5srRzfGNtv9QXQXvNDC23TtaDwH2586fnBAgQIECAAAECBAgMKCBwHxBTUwQIEBhQYP9GW2+F/Le31da7f9TQL8vN8SWXCpvzXZ28cDRBenPdhuoVza26yjOOjxG0r3pJ9RrcsdwtcO9F6GYCBAgQIECAAAECBNYiIHBfy0waBwECBAhsQWBfBjn18TGC9i2srH5jFLj383M3AQIECBAgQIAAAQIrEhC4r2gyDYUAAQIEViuwKyOb+vgYQftql9PgAxO4D06qQQIECBAgQIAAAQIEliogcF/qzOk3AQIECGxFoO3xMTmn/fuOODmGKEF72kjIX3s5o71Wap31jmVYjpRZ59waFQECBAgQIECAAAECLQUE7i3BVCdAgAABAhMJ7Mtzao+PSZfel/KxlNtz72u7uisVm6A9oXvtJWivlVp3vWMZnsB93XNsdAQIECBAgAABAgQIVAoI3CuhVCNAgAABAhMJJPDO8TGHyucl9E7dS2X922q78h8JSmuf1dybF+EeSzl1eKZb1ieQtSBwX9+8GhEBAgQIECBAgAABAh0EBO4d0NxCgAABAgRGEnh3DbJrdpkn9O56fMzn13v3LcchaG8JtpHqAveNTLRhEiBAgAABAgQIECDwWEDg/thIDQIECBAgMLZAgu/sav+s8kFdjo/pej57uvRTKTmu5lTZP9W2JXAsw7XDfVtzbrQECBAgQIAAAQIECLwiIHC3NAgQIECAwPMEpjg+ZncNQ78oH2t2zt9qOKP9eWtjSU8WuC9ptvSVAAECBAgQIECAAIFRBQTuo/JqnAABAgQIvCow9vExeQnqoZR9hzn4VO7JjvZzh3vdsj2BYxmyHe7bm3cjJkCAAAECBAgQIEDgBQGBu2VBgAABAgSmFUgAPtbxMbvSdhO05/O213flhoSnl7Y3qr9pgawZgfuml4DBEyBAgAABAgQIECDQCAjcrQUCBAgQIDCNQJfjY/JS1B8rupeXoB5KybExba9fyw3ZzZ7yS9ub1SdQBI6lCNwtBQIECBAgQIAAAQIECBQBgbtlQIAAAQIExhdoc3xMAvAE7acH3dqV7/fZze5FqOPP+1aeIHDfykwbJwECBAgQIECAAAECDwUE7g+JVCBAgAABAp0FPit3fltKPtZc35RKCS/f2mneZzd7+pBjY06lnGs6pA6BCoGsWTvcK6BUIUCAAAECBAgQIEBg/QIC9/XPsRESIECAwPQCOT4mAWR2qtdcP1zrvnZ8zK58P7vkD6Wk7bbXz+WG07Vc2t6sPoEHAsfrer+v9r58Id9zESBAgAABAgQIECBAYDMCAvfNTLWBEiBAgMBEAjnmJeeh1wTjbx0fk/uzmz2hfe0O+fshJsg/XctEw/eYDQocy5jtcN/gxBsyAQIECBAgQIAAAQL/KiBwtyoIECBAgMAwAgnFP5Syr2zuteNjcn9C+7wAtSa0v39cQvxTKQn9L5V9UY1AH4FDuTlHJ91fn67ruE/b7iVAgAABAgQIECBAgMCiBATui5ounSVAgACBGQoMcXzMroyrzwtQw2I3+wwXx0a6tC/j/NsLY82azPdcBAgQIECAAAECBAgQ2IyAwH0zU22gBAgQIDCCQJ/jY4Y4MsZu9hEmVZOtBV4L3C+lpX9r3ZobCBAgQIAAAQIECBAgsGABgfuCJ0/XCRAgQOBpAm2Pj/mu9DRnsf9SSs5lz3Exhx69z1Ed35dy6tGGWwkMKfBfrzTm/9YcUllbBAgQIECAAAECBAjMXsD/EzT7KdJBAgQIEJiRQNvjY34qfU/QfinlXSkJ2ncdx/Nzue90LWnPRWBOAq8F7v+3dDK/aHIRIECAAAECBAgQIEBgEwIC901Ms0ESIECAwAACbY+PyUtL/7OUBO7ZEd/1yu74Uynnrg24j8AEAlmff3zhOX+ydifQ9wgCBAgQIECAAAECBGYjIHCfzVToCAECBAjMVGBX+vVtKfvK/mU3748t6r/UbHbGJ7DPsTF2B1fCq/ZUgXN5+kuB+1/K109P7ZmHEyBAgAABAgQIECBAYEIBgfuE2B5FgAABAosSyPExOQbmOFGvc2RMAvYE7ZeJnukxBIYSyM/J1y809n7Cn6GhxqIdAgQIECBAgAABAgQIdBYQuHemcyMBAgQIrFggZ61/KGU38hh/Le03Lz89j/wszRMYU+BYGn8pcM+RSIcxH6xtAgQIECBAgAABAgQIzElA4D6n2dAXAgQIEHi2wK50oM3xMV37+0O58VSKI2O6CrpvbgL70qG/vdCprPV8z0WAAAECBAgQIECAAIFNCAjcNzHNBkmAAAECFQLZnZsXnOYomTGuHBlzupbLGA/QJoEnCuzLs18K3PM+g39/Yr88mgABAgQIECBAgAABApMKCNwn5fYwAgQIEJihQILC7GrfjdA3R8aMgKrJ2Qr81ys9839vznbKdIwAAQIECBAgQIAAgaEF/D9AQ4tqjwABAgSWIpCd7Dmn/TBChx0ZMwKqJmcvIHCf/RTpIAECBAgQIECAAAECYwsI3McW1j4BAgQIzFHgXenUsZQhj49xZMwcZ1qfphS4lIf9/oUH/ql87TxlRzyLAAECBAgQIECAAAECzxIQuD9L3nMJECBA4BkCn5WHZlf7fsCHf1faystPU1wEtixwLoP/4wsAAvctrwpjJ0CAAAECBAgQILAxAYH7xibccAkQILBRgexkb3a1D0GQ3ewfSzmV8ssQDWqDwAoEBO4rmERDIECAAAECBAgQIECgn4DAvZ+fuwkQIEBg/gL70sWhXoqa3ewJ2RMsuggQ+GeB/FzY4W5VECBAgAABAgQIECCwaQGB+6an3+AJECCwaoHsak/Q/kXPUdrN3hPQ7ZsRyF995C9J7q//KF/I91wECBAgQIAAAQIECBBYvYDAffVTbIAECBDYpMAQL0W1m32TS8egewgcy71fv3D/+/K1fM9FgAABAgQIECBAgACB1QsI3Fc/xQZIgACBTQn0fSnqr0WrOZv9sik5gyXQXyChusC9v6MWCBAgQIAAAQIECBBYsIDAfcGTp+sECBAg8N8COTrm81K+KiWBe5frp3JTE7R3ud89BAj8Yxe7wN1KIECAAAECBAgQIEBg0wIC901Pv8ETIEBg0QIJ2XM++6HHKHJsTIL2H3u04VYCbQV25YbfX2/KL4nyS6Nct5+/9N9tn/Oo/rlUSPk00M/AsbQjcH+k7vsECBAgQIAAAQIECKxaQOC+6uk1OAIECKxOYFdG9GUph1LyeZfLS1C7qLmnjcAfr5X3r3xs09ZUdU/lQTlr/dLjgcdyr8C9B6BbCRAgQIAAAQIECBBYvoDAfflzaAQECBDYgkBC9uxmT+ly5Wz270uxm72LnnteEkionp3p2ZW+u5b7HepLlDuWTn9Tyi8dOp97Be4d4NxCgAABAgQIECBAgMB6BATu65lLIyFAgMDaBBJivivlUEpz5EbbMf5QbjiVkrC9S4DY9nnqr0sg6+4PpTRB+r58nnWZsubrUgb3l1LOLQd5LPUF7i3RVCdAgAABAgQIECBAYF0CAvd1zafRECBAYA0COZv9UErX3ewxyJnUeYnqZQ0gxjCJQHas70pJuN6Urr/omaTDEzwk7zY4XX+ean6WjqWuwH2CifEIAgQIECBAgAABAgTmKyBwn+/c6BkBAgS2JJBgM8fGJCTf9Rh4zmc/lHLu0YZb1y2Q9ZUXlu5LaY6DyUfX2wIJ3/OXIvnZyhFN+e/bvwCIYUxf+vnN2fBHwAQIECBAgAABAgQIENiCgMB9C7NsjAQIEJivQAK7HBuToL3vbuKcO51Qz9Ex853vqXuW8Lc5EmZfPp/LGetNYB2Py7Xcf57/Tqg91nrOz9vh+jPz25EnRuA+MrDmCRAgQIAAAQIECBCYj4DAfT5zoScECBDYmkCOnhgiaP/pGhwmnHRtVyBhehOuP/tImKzJBOVNYN58vJSvpczpSvD+sZT8hclY159Kw+exGtcuAQIECBAgQIAAAQIE5iQgcJ/TbOgLAQIEtiGQYO9Yyq7ncLNLOO0kLHRtS+A+XN8/Yfg5vuhSSsL024/5fIlXDE+l5LidIa/88sGRPUOKaosAAQIECBAgQIAAgVkLCNxnPT06R4AAgVUJ7Mpovi0lwV7f64fSwKGUS9+G3D97gbzMtNmxnjU0xPppM+gExllnCdabnernNg0srG5+ro6lDBG8+zld2OTrLgECBAgQIECAAAEC/QUE7v0NtUCAAAECjwW+KFUStvc9pz272hMI5uWNrnUJ7K4h7758TMCe/55yZ3SzY/1cnnu7a31dyvWjaV6Cmp+3HNXT5vp0/Rk9tblJXQIECBAgQIAAAQIECKxBQOC+hlk0BgIECMxbIGe1HwfoopeiDoA4gybyS5fmrPVd+bwJdqfsWnatNzvWb3euT9mHJT0r85RfmjXzlY/NDvjsYm/Oqz9fXcd60euSzPSVAAECBAgQIECAAIGNCgjcNzrxhk2AAIGJBPJS1A89n5Wdx4dSEua5liOwK11NKHu7Wz2f9/0rh7YCCYTvw/W2bahPgAABAgQIECBAgAABAgSqBATuVUwqESBAgEAHgX25528d7ru95X35j2PPNtw+nkAC9N+WkrnOdf9xvCe/3LJwfWpxzyNAgAABAgQIECBAgACBfxIQuFsQBAgQIDCWwP8rDXfdzexli2PNSl27eVFprsxfc4767e70fV0zo9XKWf7ZtX6+fmzOXB/tgRomQIAAAQIECBAgQIAAAQI1AgL3GiV1CBAgQKCtQALZLrvbE6QeS/nY9oHqPxRodqOnYhOe3wbqu/L1lLld9y8zFa7PbYb0hwABAgQIECBAgAABAgT+R0DgbjEQIECAwBgCx9JoXpba9kqY2ryAsXnx4qV8LSVXE762bXct9ZsXjjbjuT8TfX8z0F35PGVJV/6yIXN9e+a6F3AuaQb1lQABAgQIECBAgAABAhsXELhvfAEYPgECBEYSyA71dyO1fdtswtmU5rr/73z9pa/l60OE97e7xmuGu3+lUtuv1zxrznV+us5LE6xnjvK5iwABAgQIECBAgAABAgQILFpA4L7o6dN5AgQIzE4gO7C/LeWL2fVMh54h0OxYbwJ1wfozZsEzCRAgQIAAAQIECBAgQGAyAYH7ZNQeRIAAgdULZEf7sZSuL0pdPdAKB9j8lUCC9NvSHA20wiEbEgECBAgQIECAAAECBAgQeF1A4G51ECBAgEBfgV1pILva930bcv9sBHLkS3N2+vnaq0v5mJJLoD6bqdIRAgQIECBAgAABAgQIEJiTgMB9TrOhLwQIEFieQJtd7Z/K8E6l5Nzz3bW0PQN9eULz6fFtiH4p3UrJdb5+bF5WO58e6wkBAgQIECBAgAABAgQIEFiYgMB9YROmuwQIEJiJwK7046+lJDB/dOXYka9K+f6NijmG5rat/U3dfL05pmbrAf2vxeL25aKX8t8pzXW++VyA/mhl+j4BAgQIECBAgAABAgQIEBhYQOA+MKjmCBAgsAGBQxnjh1Jqzmp/X+p9LKU5nmRontswPm3f/3e+truW+2fn67/v2aHbXeM1TZ1fqdT26zXPUocAAQIECBAgQIAAAQIECBCYWEDgPjG4xxEgQGDBAgnYc1b7FxVj+KHUya72293YFbepQoAAAQIECBAgQIAAAQIECBBYroDAfblzp+cECBCYUiA7xxO2PzpCJkeeHEvJrnYXAQIECBAgQIAAAQIECBAgQGBTAgL3TU23wRIgQKCTQHa0J2x/dIRMdrUfSrl0eoqbCBAgQIAAAQIECBAgQIAAAQILFxC4L3wCdZ8AAQIjCyRAT9j+1mVX+8iToHkCBAgQIECAAAECBAgQIEBgGQIC92XMk14SIEDgGQI1YXteGpp6zmp/xgx5JgECBAgQIECAAAECBAgQIDArAYH7rKZDZwgQIDAbgZzV/rdS3jpG5pvy/bwY1UWAAAECBAgQIECAAAECBAgQIFAEBO6WAQECBAjcCyRk/3spu1docoRMgvYTOgIECBAgQIAAAQIECBAgQIAAgf8VELhbDQQIECBwL5Cd7fs3wvZ8zxEy1g0BAgQIECBAgAABAgQIECBA4E5A4G5JECBAgMCtwLH8x9fCdouCAAECBAgQIECAAAECBAgQINBeQODe3swdBAgQWKvAvgwsu9tfu/5cvvH9WgdvXAQIECBAgAABAgQIECBAgACBvgIC976C7idAgMA6BHJu+3+W8tpLUt+X7x3XMVSjIECAAAECBAgQIECAAAECBAiMIyBwH8dVqwQIEFiawF9Lh794pdM/lK/vlzYg/SVAgAABAgQIECBAgAABAgQITC0gcJ9a3PMIECAwP4GvSpc+vNKtX8vXd6X8Mr9u6xEBAgQIECBAgAABAgQIECBAYF4CAvd5zYfeECBAYGqBz8oD//7GQ/9UvneeulOeR4AAAQIECBAgQIAAAQIECBBYooDAfYmzps8ECBAYTiAvQf38leac2z6cs5YIECBAgAABAgQIECBAgACBDQgI3DcwyYZIgACBNwReC9x/Kvdk97uLAAECBAgQIECAAAECBAgQIECgUkDgXgmlGgECBFYqkBel5oWpt5dz21c62YZFgAABAgQIECBAgAABAgQIjCsgcB/XV+sECBBYgkBC94+l/L6Un0vJf/+4hI7rIwECBAgQIECAAAECBAgQIEBgTgIC9znNhr4QIEDguQK78vjLc7vg6QQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgSFIJPXAAAHJ0lEQVQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgMD/b8eOaQAAABCG+XeNjZHUASnfCBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfAcH99zvLCRAgQIAAAQIECBAgQIAAAQIECBAgQCAkILiHzjCFAAECBAgQIECAAAECBAgQIECAAAECBH4FBPff7ywnQIAAAQIECBAgQIAAAQIECBAgQIAAgZCA4B46wxQCBAgQIECAAAECBAgQIECAAAECBAgQ+BUQ3H+/s5wAAQIECBAgQIAAAQIECBAgQIAAAQIEQgKCe+gMUwgQIECAAAECBAgQIECAAAECBAgQIEDgV0Bw//3OcgIECBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfAcH99zvLCRAgQIAAAQIECBAgQIAAAQIECBAgQCAkILiHzjCFAAECBAgQIECAAAECBAgQIECAAAECBH4FBPff7ywnQIAAAQIECBAgQIAAAQIECBAgQIAAgZCA4B46wxQCBAgQIECAAAECBAgQIECAAAECBAgQ+BUQ3H+/s5wAAQIECBAgQIAAAQIECBAgQIAAAQIEQgKCe+gMUwgQIECAAAECBAgQIECAAAECBAgQIEDgV0Bw//3OcgIECBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfAcH99zvLCRAgQIAAAQIECBAgQIAAAQIECBAgQCAkILiHzjCFAAECBAgQIECAAAECBAgQIECAAAECBH4FBPff7ywnQIAAAQIECBAgQIAAAQIECBAgQIAAgZCA4B46wxQCBAgQIECAAAECBAgQIECAAAECBAgQ+BUQ3H+/s5wAAQIECBAgQIAAAQIECBAgQIAAAQIEQgKCe+gMUwgQIECAAAECBAgQIECAAAECBAgQIEDgV0Bw//3OcgIECBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfgQGMc9WA31rv6AAAAABJRU5ErkJggg==';
+
diff --git a/vue-options-api-demos/inputs/signature/controlled/popup/main.js b/vue-options-api-demos/inputs/signature/controlled/popup/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/controlled/popup/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/signature/controlled/popup/main.vue b/vue-options-api-demos/inputs/signature/controlled/popup/main.vue
new file mode 100644
index 00000000..1197e10e
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/controlled/popup/main.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="row">
+    <div class="col-xs-12 col-md-6 example-col">
+      <p>Controlled Signature</p>
+      <p>
+        <KButton @click="toggleOpen" :theme-color="'primary'"> Open </KButton>
+      </p>
+      <Signature
+        :open="open"
+        @open="toggleOpen"
+        @close="toggleOpen"
+        :popup-scale="2"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import { Button } from "@progress/kendo-vue-buttons";
+import { Signature } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    Signature,
+    KButton: Button,
+  },
+  data() {
+    return {
+      open: false,
+    };
+  },
+  methods: {
+    onChange(e) {
+      this.value = e.value;
+    },
+    toggleOpen() {
+      this.open = !this.open;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/signature/controlled/value/main.js b/vue-options-api-demos/inputs/signature/controlled/value/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/controlled/value/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/signature/controlled/value/main.vue b/vue-options-api-demos/inputs/signature/controlled/value/main.vue
new file mode 100644
index 00000000..35d67f5d
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/controlled/value/main.vue
@@ -0,0 +1,23 @@
+<template>
+  <Signature :value="value" @change="onChange" />
+</template>
+<script>
+import { Signature } from "@progress/kendo-vue-inputs";
+import { sampleSignature } from "./sample-signature";
+
+export default {
+  components: {
+    Signature,
+  },
+  data() {
+    return {
+      value: sampleSignature,
+    };
+  },
+  methods: {
+    onChange(e) {
+      this.value = e.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/signature/controlled/value/sample-signature.js b/vue-options-api-demos/inputs/signature/controlled/value/sample-signature.js
new file mode 100644
index 00000000..82d3e903
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/controlled/value/sample-signature.js
@@ -0,0 +1,2 @@
+export const sampleSignature = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABdwAAAH4CAYAAABQRy9XAAAgAElEQVR4XuzdjZUjt4EuUL8I7BeBuRFYG4HpCCRHIDqC0UYgTgQzikBUBNZEYCoCSxEsFcGTItiHb83apenuJuqX9XPrHJxudaNQwAV6vPs1GvV/fuMiQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEegv8n94taIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBD4jcDdIiBAgAABAgQIECBAgAABAgQIECBAgAABAgMICNwHQNQEAQIECBAgQIAAAQIECBAgQIAAAQIECBAQuFsDBAgQIECAAAECBAgQIECAAAECBAgQIEBgAAGB+wCImiBAgAABAgQIECBAgAABAgQIECBAgAABAgJ3a4AAAQIECBAgQIAAAQIECBAgQIAAAQIECAwgIHAfAFETBAgQIECAAAECBAgQIECAAAECBAgQIEBA4G4NECBAgAABAgQIECBAgAABAgQIECBAgACBAQQE7gMgaoIAAQIECBAgQIAAAQIECBAgQIAAAQIECAjcrQECBAgQIECAAAECBAgQIECAAAECBAgQIDCAgMB9AERNECBAgAABAgQIECBAgAABAgQIECBAgAABgbs1QIAAAQIECBAgQIAAAQIECBAgQIAAAQIEBhAQuA+AqAkCBAgQIECAAAECBAgQIECAAAECBAgQICBwtwYIECBAgAABAgQIECBAgAABAgQIECBAgMAAAgL3ARA1QYAAAQIECBAgQIAAAQIECBAgQIAAAQIEBO7WAAECBAgQIECAAAECBAgQIECAAAECBAgQGEBA4D4AoiYIECBAgAABAgQIECBAgAABAgQIECBAgIDA3RogQIAAAQIECBAgQIAAAQIECBAgQIAAAQIDCAjcB0DUBAECBAgQIECAAAECBAgQIECAAAECBAgQELhbAwQIECBAgAABAgQIECBAgAABAgQIECBAYAABgfsAiJogQIAAAQIECBAgQIAAAQIECBAgQIAAAQICd2uAAAECBAgQIECAAAECBAgQIECAAAECBAgMICBwHwBREwQIECBAgAABAgQIECBAgAABAgQIECBAQOBuDRAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQEEBO4DIGqCAAECBAgQIECAAAECBAgQIECAAAECBAgI3K0BAgQIECBAgAABAgQIECBAgAABAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAYG7NUCAAAECBAgQIECAAAECBAgQIECAAAECBAYQELgPgKgJAgQIECBAgAABAgQIECBAgAABAgQIECAgcLcGCBAgQIAAAQIECBAgQIAAAQIECBAgQIDAAAIC9wEQNUGAAAECBAgQIECAAAECBAgQIECAAAECBATu1gABAgQIECBAgAABAgQIECBAgAABAgQIEBhAQOA+AKImCBAgQIAAAQIECBAgQIAAAQIECBAgQICAwN0aIECAAAECBAgQIECAAAECBAgQIECAAAECAwgI3AdA1AQBAgQIECBAgAABAgQIECBAgAABAgQIEBC4WwMECBAgQIAAAQIECBAgQIAAAQIECBAgQGAAAYH7AIiaIECAAAECBAgQIECAAAECBAgQIECAAAECAndrgAABAgQIECBAgAABAgQIECBAgAABAgQIDCAgcB8AURMECBAgQIAAAQIECBAgQIAAAQIECBAgQEDgbg0QIECAAAECBAgQIECAAAECBAgQIECAAIEBBATuAyBqggABAgQIECBAgAABAgQIECBAgAABAgQICNytAQIECBAgQIAAAQIECBAgQIAAAQIECBAgMICAwH0ARE0QIECAAAECBAgQIECAAAECBAgQIECAAAGBuzVAgAABAgQIECBAgAABAgQIECBAgAABAgQGEBC4D4CoCQIECBAgQIAAAQIECBAgQIAAAQIECBAgIHC3BggQIECAAAECBAgQIECAAAECBAgQIECAwAACAvcBEDVBgAABAgQIECBAgAABAgQIECBAgAABAgQE7tYAAQIECBAgQIAAAQIECBAgQIAAAQIECBAYQEDgPgCiJggQIECAAAECBAgQIECAAAECBAgQIECAgMDdGiBAgAABAgQIECBAgAABAgQIECBAgAABAgMICNwHQNQEAQIECBAgQIAAAQIECBAgQIAAAQIECBAQuFsDBAgQIECAAAECBAgQIECAAAECBAgQIEBgAAGB+wCImiBAgAABAgQIECBAgAABAgQIECBAgAABAgJ3a4AAAQIECBAgQIAAAQIECBAgQIAAAQIECAwgIHAfAFETBAgQIECAAAECBAgQIECAAAECBAgQIEBA4G4NECBAgAABAgQIECBAgAABAgQIECBAgACBAQQE7gMgaoIAAQIECBAgQIAAAQIECBAgQIAAAQIECAjcrQECBAgQIECAAAECBAgQIECAAAECBAgQIDCAgMB9AERNECBAgAABAgQIECBAgAABAgQIECBAgAABgbs1QIAAAQIECBAgQIAAAQIECBAgQIAAAQIEBhAQuA+AqAkCBAgQIECAAAECBAgQIECAAAECBAgQICBwtwYIECBAgAABAgQIECBAgAABAgQIECBAgMAAAgL3ARA1QYAAAQIECBAgQIAAAQIECBAgQIAAAQIEBO7WAAECBAgQIECAAAECBAgQIECAAAECBAgQGEBA4D4AoiYIECBAgAABAgQIECBAgAABAgQIECBAgIDA3RogQIAAAQIECBAgQIAAAQIECBAgQIAAAQIDCAjcB0DUBAECBAgQIECAAAECBAgQIECAAAECBAgQELhbAwQIECBAgAABAgQIECBAgAABAgQIECBAYAABgfsAiJogQIAAAQIECBAgQIAAAQIECBAgQIAAAQICd2uAAAECBAgQIECAAAECBAgQIECAAAECBAgMICBwHwBREwQIECBAgAABAgQIECBAgAABAgQIECBAQOBuDRAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQEEBO4DIGqCAAECBAgQIECAAAECBAgQIECAAAECBAgI3K0BAgQIECBAgAABAgQIECBAgAABAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAYG7NUCAAAECBAgQIECAAAECBAgQIECAAAECBAYQELgPgKgJAgQIECBAgAABAgQIECBAgAABAgQIECAgcLcGCBAgQIAAAQIECBAgQIAAAQIECBAgQIDAAAIC9wEQNUGAAAECBAgQIECAAAECBAgQIECAAAECBATu1gABAgQIECBAgAABAgQIECBAgAABAgQIEBhAQOA+AKImCBAgQIAAAQIECBAgQIAAAQIECBAgQICAwN0aIECAAAECBAgQIECAAAECBAgQIECAAAECAwgI3AdA1AQBAgQIECBAgAABAgQIECBAgAABAgQIEBC4WwMECBAgQIAAAQIECBAgQIAAAQIECBAgQGAAAYH7AIiaIECAAAECBAgQIECAAAECBAgQIECAAAECAndrgAABAgQIECBAgAABAgQIECBAgAABAgQIDCAgcB8AURMECBAgQIAAAQIECBAgQIAAAQIECBAgQEDgbg0QIECAAAECBAgQIECAAAECBAgQIECAAIEBBATuAyBqggABAgQIECBAgAABAgQIECBAgAABAgQICNytAQIECBAgQIAAAQIECBAgQIAAAQIECBAgMICAwH0ARE0QIECAAAECBAgQIECAAAECBAgQIECAAAGBuzVAgAABAgQIECBAgAABAgQIECBAgAABAgQGEBC4D4CoCQIECBAgQIAAAQIECBAgQIAAAQIECBAgIHC3BggQIECAAAECBAgQIECAAAECBAgQIECAwAACAvcBEDVBgAABAgQIECBAgAABAgQIECBAgAABAgQE7tYAAQIECBAgQIAAAQIECBAgQIAAAQIECBAYQEDgPgCiJggQIECAAAECBAgQIECAAAECBAgQIECAgMDdGiBAgAABAgQIECBAgAABAgQIECBAgAABAgMICNwHQNQEAQIECBAgQIAAAQIECBAgQIAAAQIECBAQuFsDBAgQIECAAAECBAgQIECAAAECBAgQIEBgAAGB+wCImiBAgAABAgQIECBAgAABAgQIECBAgAABAgJ3a4AAAQIECBAgQIAAAQIECBAgQIAAAQIECAwgIHAfAFETBAgQIECAAAECBAgQIECAAAECBAgQIEBA4G4NECBAgAABAgQIECBAgAABAgQIECBAgACBAQQE7gMgaoIAAQIECBAgQIAAAQIECBAgQIAAAQIECAjcrQECBAgQIECAAAECBAgQIECAAAECBAgQIDCAgMB9AERNECBAgAABAgQIECBAgAABAgQIECBAgAABgbs1QIAAAQIECBAgQIAAAQIECBAgQIAAAQIEBhAQuA+AqAkCBAgQIECAAAECBAgQIECAAAECBAgQICBwtwYIECBAgAABAgQIECBAgAABAgQIECBAgMAAAgL3ARA1QYAAAQIECBAgQIAAAQIECBAgQIAAAQIEBO7WAAECBAgQIECAAAECBAgQIECAAAECBAgQGEBA4D4AoiYIECBAgAABAgQIECBAgAABAgQIECBAgIDA3RogQIAAAQIECBAgQIAAAQIECBAgQIAAAQIDCAjcB0DUBAECBAgQIECAAAECBAgQIECAAAECBAgQELhbAwQIECBAgAABAgQIECBAgAABAgQIECBAYAABgfsAiJogQIAAAQIECBAgQIAAAQIECBAgQIAAAQICd2uAAAECBAgQIECAAAECBAgQIECAAAECBAgMICBwHwBREwQIECBAgAABAgQIECBAgAABAgQIECBAQOBuDRAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQEEBO4DIGqCAAECBAgQIECAAAECBAgQIECAAAECBAgI3K0BAgQIECBAgAABAgQIECBAgAABAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAYG7NUCAAAECBAgQIECAAAECBAgQIECAAAECBAYQELgPgKgJAgQIECBAgAABAgQIECBAgAABAgQIECAgcLcGCBAgQIAAAQIECBAgQIAAAQIECBAgQIDAAAIC9wEQNUGAAAECBAgQIECAAAECBAgQIECAAAECBATu1gABAgQIECBAgAABAgQIECBAgAABAgQIEBhAQOA+AKImCBAgQIAAAQIECBAgQIAAAQIECBAgQICAwN0aIECAAAECBAgQIECAAAECBAgQIECAAAECAwgI3AdA1AQBAgQIECBAgAABAgQIECBAgAABAgQIEBC4WwMECBAgQIAAAQIECBAgQIBAF4HflZt+6XKjewgQIECAwFoFBO5rnVnjIkCAAAECBAgQIECAAAEC4wh8WZo9lrIr5VLKn0v5cZxHaZUAAQIECCxLQOC+rPnSWwIECBAgQIAAAQIECBAg8CyBBOzflrK/60B2uf9bKXa7P2tmPJcAAQIEZiMgcJ/NVOgIAQIECBAgQIAAAQIECBCYpUCOjnlXyvGN3v2lfO80y97rFAECBAgQmFBA4D4htkcRIECAAAECBAgQIECAAIGFCXxR+vuhlN2Dfr8v3z8ubGy6S4AAAQIEBhcQuA9OqkECBAgQIECAAAECBAgQILB4gQTsCdoTuD+6fi0VPivl8qii7xMgQIAAgbULCNzXPsPGR4AAAQIECBAgQIAAAQIE6gVqjo+5be2n8h+HUrw0td5YTQIECBBYsYDAfcWTa2gECBAgQIAAAQIECBAgQKCFwJel7rGUXcU92dWeuh8r6qpCgAABAgQ2IyBw38xUGygBAgQIECBAgAABAgQIEHhRYF+++m1l0J4GPpXyVSkXngQIECBAgMA/CwjcrQgCBAgQIECAAAECBAgQILBNgQTtX5eSjzXXz6XSoZRzTWV1CBAgQIDAFgUE7lucdWMmQIAAAQIECBAgQIAAgS0L7MrgE7QnPK+93peKx9rK6hEgQIAAga0KCNy3OvPGTYAAAQIECBAgQIAAAQJbE8gLUT+0DNodH7O1VWK8BAgQINBLQODei8/NBAgQIECAAAECBAgQIEBg9gIJ2t+VknPX83nN9dO1/rmmsjoECBAgQIDAPwQE7lYCAQIECBAgQIAAAQIECBBYr8CXZWgfS6kN2nNO+7GU03pJjIwAAQIECIwnIHAfz1bLBAgQIECAAAECBAgQIEDgWQJflAfn+JhdZQd+LfUSzB8r66tGgAABAgQIvCAgcLcsCBAgQIAAAQIECBAgQIDAegT2ZSh5IWo+1lxN0J6w/ZeaG9QhQIAAAQIEXhcQuFsdBAgQIECAAAECBAgQIEBg+QK7MoTsaM/O9trru1LxWMql9gb1CBAgQIAAgbcFBO5WCAECBAgQIECAAAECBAgQWK7ArnQ9O9oPLYbww7W+oL0FmqoECBAgQKBGQOBeo6QOAQIECBAgQIAAAQIECBCYl0BegvqulK9KqX0haoL2YynneQ1FbwgQIECAwHoEBO7rmUsjIUCAAAECBAgQIECAAIFtCCRoT3BeG7T/fK1/2gaPURIgQIAAgecJCNyfZ+/JBAgQIECAAAECBAgQIECgjcCX1+B8V3lTXoiaHfCC9kow1QgQIECAQF8BgXtfQfcTIECAAAECBAgQIECAAIFxBfal+bwQ9bPKxyRo/3gtv1TeoxoBAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAgREEErAnaN+3aPu7Uje72gXtLdBUJUCAAAECQwkI3IeS1A4BAgQIECBAgAABAgQIEBhGYFea+bqUQ4vmPl2D9kuLe1QlQIAAAQIEBhYQuA8MqjkCBAgQIECAAAECBAgQINBRIC9BTdCeHeq11w+l4rGUc+0N6hEgQIAAAQLjCQjcx7PVMgECBAgQIECAAAECBAgQqBFI0P6ulATt+bzm+rlUOpRyrqmsDgECBAgQIDCNgMB9GmdPIUCAAAECBAgQIECAAAECLwl8Wb54LGVXyZOgPfVPlfVVI0CAAAECBCYUELhPiO1RBAgQIECAAAECBAgQIEDgKvBF+ZgXou4qRX4t9T5eixeiVqKpRoAAAQIEphYQuE8t7nkECBAgQIAAAQIECBAgsGWBfRl8zmnPx9rrvaC9lko9AgQIECDwXAGB+3P9PZ0AAQIECBAgQIAAAQIEtiGwK8PMjvbsbK+9visVj6Vcam9QjwABAgQIEHiugMD9uf6eToAAAQIECBAgQIAAAQLrFtiV4WVH+6HFMH8odfMC1R9b3KMqAQIECBAgMAMBgfsMJkEXCBAgQIAAAQIECBAgQGB1Ar8rI3p3Dc7zec2VoP1YyrmmsjoECBAgQIDA/AQE7vObEz0iQIAAAQIECBAgQIAAgWULZEd7dqjXBu0/X4P207KHrfcECBAgQICAwN0aIECAAAECBAgQIECAAAECwwh8eQ3Od5XN/Xqt/7GyvmoECBAgQIDAzAUE7jOfIN0jQIAAAQIECBAgQIAAgdkL7EsP80LUzyp7mqA9IXvKL5X3qEaAAAECBAgsQEDgvoBJ0kUCBAgQIECAAAECBAgQmKVAgvYcH5OPtdd3pWKOmxG014qpR4AAAQIEFiQgcF/QZOkqAQIECBAgQIAAAQIECMxCYFd6kaD90KI3n65B+6XFPaoSIECAAAECCxMQuC9swnSXAAECBAgQIECAAAECBJ4mkJeg5uiYNkH7D6X+sZTz03rtwQQIECBAgMBkAgL3yag9iAABAgQIECBAgAABAgQWKpCg/V0pOQomn9dcP5dKh1LONZXVIUCAAAECBNYhIHBfxzwaBQECBAgQIECAAAECBAiMI5Cg/VhKm6A99U/jdEerBAgQIECAwJwFBO5znh19I0CAAAECBAgQIECAAIFnCXx5Ddp3lR34tdT7eL2n8hbVCBAgQIAAgbUJCNzXNqPGQ4AAAQIECBAgQIAAAQJ9BPbl5pzT/lllI03QnrD9l8p7VCNAgAABAgRWKiBwX+nEGhYBAgQIECBAgAABAgQItBJI0P51KflYe31XKh5LudTeoB4BAgQIECCwbgGB+7rn1+gIECBAgAABAgQIECBA4G2BXfl2gvZDC6hPpW5eoCpob4GmKgECBAgQ2IKAwH0Ls2yMBAgQIECAAAECBAgQIHAvkJeg5uiYNkH7D6X+sZQzTgIECBAgQIDASwICd+uCAAECBAgQIECAAAECBLYkkKD9XSnZoZ7Pa66fr/W/r6msDgECBAgQILBdAYH7dufeyAkQIECAAAECBAgQILA1gRwd0zZoP5Z7TluDMl4CBAgQIECgm4DAvZubuwgQIECAAAECBAgQIEBgOQJflq4mON9VdvnXUu/jtfxSeY9qBAgQIECAAIHfCNwtAgIECBAgQIAAAQIECBBYq8C+DOxbQftap9e4CBAgQIDA/AQE7vObEz0iQIAAAQIECBAgQIAAgX4CCdpzfEw+1l7flYrHUi61N6hHgAABAgQIELgXELhbEwQIECBAgAABAgQIECCwFoFdGciHUr5oMaBPpW7OdRe0t0BTlQABAgQIEHhZQOBuZRAgQIAAAQIECBAgQIDA0gUStGdH+6HFQH4odY+lnFvcoyoBAgQIECBA4E0BgbsFQoAAAQIECBAgQIAAAQJLFfhd6fi7a3BeO4afS8WDoL2WSz0CBAgQIECgjYDAvY2WugQIECBAgAABAgQIECAwB4EmaM9RMPm85krQfizlVFNZHQIECBAgQIBAFwGBexc19xAgQIAAAQIECBAgQIDAswS+LA/+WEpt0P7rNWjPPS4CBAgQIECAwKgCAvdReTVOgAABAgQIECBAgAABAgMJJGg/lrKrbC9Be0L2lF8q71GNAAECBAgQINBLQODei8/NBAgQIECAAAECBAgQIDCywL60/6GUz1o857tSN8fNCNpboKlKgAABAgQI9BcQuPc31AIBAgQIECBAgAABAgQIDC+QoP3rUvKx9krQfizlUnuDegQIECBAgACBIQUE7kNqaosAAQIECBAgQIAAAQIE+grsSgPZ0f5Fi4Z+KHWzo/3HFveoSoAAAQIECBAYXEDgPjipBgkQIECAAAECBAgQIECgg0CC9uxoP7S4N0H7sZRzi3tUJUCAAAECBAiMJiBwH41WwwQIECBAgAABAgQIECBQIfC7UidBe3ao114/X+t/X3uDegQIECBAgACBKQQE7lMoewYBAgQIECBAgAABAgQI3AskaH93Dc7zec2VoP1YyqmmsjoECBAgQIAAgakFBO5Ti3seAQIECBAgQIAAAQIECDQ72muD9l8L2cdr2E6PAAECBAgQIDBbAYH7bKdGxwgQIECAAAECBAiMIrArrf6+lM9KSdi5v3lKvpfSXHkB5ftSHNsxylRsstEvy6iPd+vsLYgmaE/Y/ssmxQyaAAECBAgQWJSAwH1R06WzBAgQIECAAAECBFoJJFD/Yyn7UhKw52PbKyHnv5dyaXuj+gRuBNoG7bn1m1KOpQjaLSUCBAgQIEBgMQIC98VMlY4SIECAAAECBAgQeCjQBOxflJr7UnYP76ir8OdSzS73Oiu1/lkg6zDHx+Rj7fVdqXgs5VJ7g3oECBAgQIAAgbkICNznMhP6QYAAAQIECBAgQKCbwK7cll3sCdlTxrgE7mOorrvNfRle26D9h3LPoZTLummMjgABAgQIEFizgMB9zbNrbAQIECBAgAABAmsVyE72HNGRcDJHxYx9/ak84Dz2Q7S/CoFdGcWHUtr88idB+9EaW8X8GwQBAgQIENi8gMB980sAAAECBAgQIECAwIIEErKPuZP9NQr/f8OCFsmTupqgPTvaDy2e/1Op+5WgvYWYqgQIECBAgMDsBfwfzrOfIh0kQIAAAQIECBDYuECCzHfXIDM724e4sqP4ci0/lo95KeVfS3mp/U/l6212Kw/RP20sRyBrJkF7gvPa6+dS8VjKqfYG9QgQIECAAAECSxEQuC9lpvSTAAECBAgQIEBgawLNkTH7ngPPLuKE6udrubzQXsLPhKYvXc5v7zkBK709QXt+EZSgvfYXQYL2lS4GwyJAgAABAgT+V0DgbjUQIECAAAECBAgQmI9AE2IeSpd2Hbv1a7nv+2s5l4/Zvf7WlTPg//5KhQSkXfvRsftuW4BAs6O9NmjPmvxYynEBY9NFAgQIECBAgEAvAYF7Lz43EyBAgAABAgQIEBhEIKF3c2xMlwYTjN+G7LVtJDBN2L575QYvS62V3Ea9/NXF8Y31cq/QBO0J2x/94mcbgkZJgAABAgQIrF5A4L76KTZAAgQIECBAgACBGQt8XvqWIzn2HfrY7GRPmJkjY9peCdv/VkrC/peunPPepV9t+6H+/AXaBu0Z0TelHEsRtM9/fvWQAAECBAgQGFBA4D4gpqYIECBAgAABAgQIVAgk6E7QnjByV1H/vkpeYnoqJTva+1wJ2/evNJAwP30TlvYRXv69WR8fSnntlzIvjfC769q+LH/4RkCAAAECBAgQaC8gcG9v5g4CBAgQIECAAAECXQS6vGSyeU4C8FMp2c0+RJD5bWnn8MYgHCXTZYbXc8++DCXntOdj7ZW/iMiaGmJ91j5TPQIECBAgQIDA7AQE7rObEh0iQIAAAQIECBBYmcCujCfhZcLItldCzNO1tL33tfqPwvb35cbjUA/TzqIEspM9O9r3LXqdNZr1cm5xj6oECBAgQIAAgdUKCNxXO7UGRoAAAQIECBAg8GSBhJZtdwk3Xc6xHF3PZn9t2Nlh/9dS0q/Xrjz38GQ3j59eYHddq23mXtA+/Tx5IgECBAgQILAAAYH7AiZJFwkQIECAAAECBBYlkBdMJrjct+z1z6X+qZQE7UOfnZ6dywnbd2/0SdjecsJWUD3roe1fX2SdHq9rdQUEhkCAAAECBAgQGFZA4D6sp9YIECBAgAABAgS2KdDnRag/FbKE7KeR6L4o7eYYmfTxtSt9aPNizJG6qtmJBLIWErR/1eJ5gmpWyTgAACAASURBVPYWWKoSIECAAAEC2xUQuG937o2cAAECBAgQIECgv0CfF6GOfSTHrgwv53EncH/rSti+L2XoXfX9dbUwtECX9ZoX9uYXQsehO6M9AgQIECBAgMAaBQTua5xVYyJAgAABAgQIEBhbYFce0PYojqZPObol4eVlxE6+uz7jrV3tefynUg6lCNtHnIwZNN0naB/jiKMZkOgCAQIECBAgQGAcAYH7OK5aJUCAAAECBAgQWKfAvgyrOaO9zQibXcJjh5e70qkcH5N+Prq+KRXaHCnyqD3fn6dA7S9fmt5PtVbnqaVXBAgQIECAAIGeAgL3noBuJ0CAAAECBAgQ2IRAAuzsaM/HNlfOvW7OZx97F3n6d6zoXALVBO2nirqqLFcgvxjKeti1GMIUf33RojuqEiBAgAABAgSWJyBwX96c6TEBAgQIECBAgMB0As1u9n3LR479ItTb7qRv2dVeE6ymX4dSfmw5HtWXIyBoX85c6SkBAgQIECCwQgGB+won1ZAIECBAgAABAgR6C3QJLfPQsV+EejuwBOy1x8fkvvelHHvLaGCuAl3WbM7wz187XOY6KP0iQIAAAQIECCxNQOC+tBnTXwIECBAgQIAAgTEFuoSW6c+UR3HkBZg5Pqb2/PX8EiB17Wofc+U8r+39dT3kY+015S+GavukHgECBAgQIEBgFQIC91VMo0EQIECAAAECBAj0EEiA/Xkpx1J2LdrJWeinUnJG+6XFfX2q5hcCeV76/OhK/zKm1HetT2BfhtT2vQKC9vWtAyMiQIAAAQIEZiYgcJ/ZhOgOAQIECBAgQIDAZAIJrd+Vkt3fNQF207EE2QmxU8Z+EWrzzISrH0r5rFInweqhlEtlfdWWI5C1IGhfznzpKQECBAgQILAxAYH7xibccAkQIECAAAECBP47XO8StP9c7juWcprQMAF7gvaErDVX+phfIHxfU1mdRQlkDbQN2p+xZheFqrMECBAgQIAAgaEFBO5Di2qPAAECBAgQIEBgrgJLCtp313D1UInZ7Lo/VtZXbTkCgvblzJWeEiBAgAABAgR+I3C3CAgQIECAAAECBNYusKSgPX3NjvbaoD1zN+ULW9e+VuY0PkH7nGZDXwgQIECAAAEClQIC90oo1QgQIECAAAECBBYn0DVoz/nnOZ99ymNZuvTVCzAXtySrOrwrtXJ0zKGq9j8qOTqmBZaqBAgQIECAAIExBQTuY+pqmwABAgQIECBA4BkCXcLr9PNZAXbC1TYvbs3xMal/egauZ44msCsttw3an/EC39EANEyAAAECBAgQWIOAwH0Ns2gMBAgQIECAAAECjcCX5ZNjKQkva69nBe1t+ypcrZ3RZdXLWhW0L2vO9JYAAQIECBAg8KqAwN3iIECAAAECBAgQWINA2/A6Y15K0J6+vi8lx9z8sobJMob/FtiVImi3GAgQIECAAAECKxMQuK9sQg2HAAECBAgQILAxgbUH7V6Iur4FLWhf35waEQECBAgQIEDgfwQE7hYDAQIECBAgQIDAEgXWHrR/KpOSc9ovS5wcfX5R4LPy1XelHFr4OEaoBZaqBAgQIECAAIE5CAjc5zAL+kCAAAECBAgQIFArsC8VP5SS8LL2WtLRMc/qa62leu0FsmZzdEw+1l6C9lop9QgQIECAAAECMxMQuM9sQnSHAAECBAgQIEDgRYEuoeWzwusl7b633MYT6LJmBe3jzYeWCRAgQIAAAQKTCAjcJ2H2EAIECBAgQIAAgY4C2cmeHe0JL2uvn0rFHMdyrr1hoHqC9oEgF95M1qod7QufRN0nQIAAAQIECHQVELh3lXMfAQIECBAgQIDAmAK7a2h5aPGQn0vdYymnFvf0rfq70sDn1+emz7XXs3bf1/ZPvfYC+YVL1uu+xa12tLfAUpUAAQIECBAgsAQBgfsSZkkfCRAgQIAAAQLbEdiVoWZ3cILL2utZQXtegJmd9Anday9Be63Ucup1+csGQfty5ldPCRAgQIAAAQKtBATurbhUJkCAAAECBAgQGEkgoXXbAFvQPtJkaPahQNe/bBC0P6RVgQABAgQIECCwbAGB+7LnT+8JECBAgAABAksX6BK0J7Q8lvJxwsF36We6Z0f7hJM0waO6rgNB+wST4xEECBAgQIAAgTkICNznMAv6QIAAAQIECBDYpkDbozieEVp2DVgF7eta07synLZHHUXgGWt2XfJGQ4AAAQIECBBYmIDAfWETprsECBAgQIAAgRUI7MsYvi0lIWbt9b5UzI72X2pvGKBefiGQZzqjfQDMhTaRtdq8DLXNEJrjjr6feM226aO6BAgQIECAAAECIwgI3EdA1SQBAgQIECBAgMCLAgkvs0s4H2uv70rFYymX2hsGqNd2530eaUf7APAzaqIJ2dus1XT/Ge8VmBGbrhAgQIAAAQIECAjcrQECBAgQIECAAIGxBXblAW2P4xC0jz0r2r8XyF8yJGj/qpSs2TZXfuFyupY296lLgAABAgQIECCwMgGB+8om1HAIECBAgAABAjMSSID5oZRDiz49Y6f4/trPz2bezxbdU7WFwK7UfXddp22OD8ojnrFeWwxNVQIECBAgQIAAgakFBO5Ti3seAQIECBAgQGD9Al1eNPpTYcnO4vOEPPvyrLZH3AhYJ5ygkR+V+U/Q/kWH5zzjLzA6dNMtBAgQIECAAAECUwsI3KcW9zwCBAgQIECAwLoF2r5o9BlnXu/KFOSlrQlcay9Be63U/Os1x8a0+YuGjOrXUk6l5EW6l/kPUw8JECBAgAABAgSeISBwf4a6ZxIgQIAAAQIE1iewL0NKiL2rHFrCy+M1vKy8pXe19K3tWfLP2Hnfe6Aa+BeBzH0TtLc9Nia/FErIfirlF7YECBAgQIAAAQIE3hIQuFsfBAgQIECAAAECfQSySzjntO8rG0nQnvAyZarwMgFrgvYcWVN7PWPnfW3f1KsXyLpM0H6ov+V/anoRagc0txAgQIAAAQIEti4gcN/6CjB+AgQIECBAgEA3gV25re1u8anPve5ylrygvdt6mNtdXY+NyTiyTk+lnOc2KP0hQIAAAQIECBCYv4DAff5zpIcECBAgQIAAgTkJdAmxs1P4UMplwoHkZZjHUmqPD2l23uce1zIFdqXbXY+NcT77MudcrwkQIECAAAECsxMQuM9uSnSIAAECBAgQIDBbgbYvRH3Gi0bTx4TmCV9rrmcccVPTL3XqBfalatdjY5q/aPi+tDHVEUf1I1OTAAECBAgQIEBgcQIC98VNmQ4TIECAAAECBCYXSKDZ5oWozziWpW0fg/hNKUdB6+TraYgH5i8XPr/O365Dg/llUN4jkKDdRYAAAQIECBAgQGAwAYH7YJQaIkCAAAECBAisTqDrC1GPE0rsy7Nylnw+1l5TnyVf2y/1HgvsrvP9RflYe1xQ02r+miEBe9bn5fGj1CBAgAABAgQIECDQXkDg3t7MHQQIECBAgACBtQskyPxQyqHFQKfeLb679jHBa+31jLPka/um3tsC2c3+VSn7DlD5i4vsZj+V4tiYDoBuIUCAAAECBAgQqBcQuNdbqUmAAAECBAgQ2IJAdosn2KzdPfzpWv8yEc6uPCd9PLR43jPOkm/RPVVfEchcN2ez5/O2l2Nj2oqpT4AAAQIECBAg0FtA4N6bUAMECBAgQIAAgVUItH3Z6NQhdn4B8K6UYwvt7Gw+lHJucY+qzxfYly50fQmqY2OeP396QIAAAQIECBDYtIDAfdPTb/AECBAgQIAAgf8+oqPNGehTvxC1Cdrb7Lqfuo+WUX+Bvi9BbeY8Z7Q7Nqb/fGiBAAECBAgQIECgo4DAvSOc2wgQIECAAAECCxfYXYP2Q+U4snM452AfK+sPUS27nPPM2uNtntHHIca55TbyYt785UKXl6DGLS/APZVy3jKisRMgQIAAAQIECMxHQOA+n7nQEwIECBAgQIDAFAJddown1MwO86l2Drc93qYJ2hPOT9XHKeZqzc9ojozZdxhkdrMnZE+5dLjfLQQIECBAgAABAgRGExC4j0arYQIECBAgQIDA7ATaBtk5p/0wYai5L8/6UEp2PddeU/8yoLZf6v2rwK58KbvZs6Zq/2rhtpWsx9O18CVAgAABAgQIECAwSwGB+yynRacIECBAgAABAoMK7Etrbc9pTyh6HrQXrzfWtn9pKUH7sZTLRH30mO4CfXazNy9BzV8v/Ni9C+4kQIAAAQIECBAgMI2AwH0aZ08hQIAAAQIECDxDYFcemqD9UPnwhJvHUhJuTnFlJ3t2tO9bPCy7nHO8jfC1BdoTqmbtNUF7Pm97eQlqWzH1CRAgQIAAAQIEZiEgcJ/FNOgEAQIECBAgQGBQgS7ntH9TenAsZYoz0BPAtvlFQHAStKd/50GlNDa0wOelwUMpeQlql8tLULuouYcAAQIECBAgQGA2AgL32UyFjhAgQIAAAQIEBhFoe077p/LU7Bi/DPL0txvZlW+3Ddqz0zn9+36C/nlEN4HMa9/d7KfShpfedvN3FwECBAgQIECAwIwEBO4zmgxdIUCAAAECBAj0EGh7PMtP1yD73OOZtbdmx32C9gTntVdzpMip9gb1Jhfou5s9v+zJ/PplyuRT54EECBAgQIAAAQJjCQjcx5LVLgECBAgQIEBgGoGE2TkH/VD5uJzTnuA7QefYV5ejbaY+R35sg7W1vysDGmI3e9bfZW04xkOAAAECBAgQIEBA4G4NECBAgAABAgSWK9DsGk+wXXO9L5WmOLaja9Cevk3Rvxordf5ZoO9u9pzBf7oWtgQIECBAgAABAgRWKyBwX+3UGhgBAgQIECCwYoG8kDK72neVY0zYeSjlUlm/azVBe1e5ed6X+cxu9vxFRO1aux1J/lrhVEp+iTL22punoF4RIECAAAECBAhsTkDgvrkpN2ACBAgQIEBgwQIJPb8tZV85hpyDfijlXFm/T7UEswlWa3fb51nflXIs5dLnwe4dXCDrqzk2pkvjdrN3UXMPAQIECBAgQIDAKgQE7quYRoMgQIAAAQIEVi7Q9qWjU56DnmA2ofmuxRwI2ltgTVQ189fnbHa72SeaKI8hQIAAAQIECBCYt4DAfd7zo3cECBAgQIAAgbY7x7+5BuC/jEwnaB8ZeKLm+57N/lPpZ/6y4TRRfz2GAAECBAgQIECAwKwFBO6znh6dI0CAAAECBDYssC9jzzntn1UaTHVOe5egPX07lnKuHItq4wpkTTW72dscAdT0KrvZvy8lQfuP43ZV6wQIECBAgAABAgSWJSBwX9Z86S0BAgQIECCwfoFdGeLXpRwqh5pz2vNSywSgY16C9jF1x28766rZzV77S5z7XjW72bPWxv4LivFFPIEAAQIECBAgQIDACAIC9xFQNUmAAAECBAgQ6CiQoD3hec2u4+wyzg7jY8dn1d4maK+Vml+9rKOE7F9cS5ce2s3eRc09BAgQIECAAAECmxUQuG926g2cAAECBAgQmJFAAtEcH7Or7NMULx0VtFdOxgyr3YbsNb+8eWkIdrPPcGJ1iQABAgQIECBAYP4CAvf5z5EeEiBAgAABAusVSMD+bSn7yiFOcRa6oL1yMmZWre+57BlOdrOfrsXZ7DObYN0hQIAAAQIECBBYhoDAfRnzpJcECBAgQIDAugSy67g5PqZmZAlCc9RMwtAxrubokWNpfNfiATk/PveM1a8WXdlk1SZkz19ItJm3e6xP5Qs5l908bnIZGTQBAgQIECBAgMCQAgL3ITW1RYAAAQIECBB4LJAd5Dl7vfaoj/fX+mO8pDJ9eFdK7bnxzegE7Y/neawau9Jw35efpm+Zw6zDBO2XsTqrXQIECBAgQIAAAQJbExC4b23GjZcAAQIECBB4lsC+PDi72vOx5srxMYdSLjWVW9YRtLcEe3L1zFd+UZP1kF3tXS9HxnSVcx8BAgQIECBAgACBSgGBeyWUagQIECBAgACBjgIJS/NC1ISlNVd2HqfuuaZyyzq7Uj872tN+7Q77PMKO9pbQA1RvjvnJcTEpXa+E7NnF3pSu7biPAAECBAgQIECAAIEKAYF7BZIqBAgQIECAAIGOAs057TXhdoLRHPFx7Pist27blW+mL4eWbf907dOp5X2qdxdojovpE7Ln6c257AnaxziOqPsI3UmAAAECBAgQIEBgxQIC9xVPrqERIECAAAECTxPYlyd/W8qusgfflXo5R33oYDT9yI72tuFtjrM5lnKu7L9q/QQyTzkyJvNU88uZ156WX5CcrmXotdRvhO4mQIAAAQIECBAgsBEBgftGJtowCRAgQIAAgUkEduUpOT6mNuBOQJqg/Txw75rzvvct2xW0twTrUT1rpZmnfN71akJ2Lz/tKug+AgQIECBAgAABAgMKCNwHxNQUAQIECBAgsFmB5iWkx0qBHB+ToP1UWb+mWvNizbS7q7nhpo6gvSVYx+rNueyZoz4vP82Z+gnYs35+7NgXtxEgQIAAAQIECBAgMIKAwH0EVE0SIECAAAECmxLIbvbsat9VjvqbUu9YylBHfuS5XV6Emu7mKJucGy+0rZy8jtVyLnvWyaHj/bmtefmp+eqB6FYCBAgQIECAAAECYwsI3McW1j4BAgQIECCwVoFdGVjOad9XDjC7yLOzeahwO8/tcj57upug/VjKpbLvqrUXyProe2RME7JnN3uKiwABAgQIECBAgACBmQsI3Gc+QbpHgAABAgQIzE4gx4J8XUrC85orx3+k7lCBaULcLkeSJLzN7uhTKZeajqvTSaDr+fm3D/t0XS+ZKxcBAgQIECBAgAABAgsSELgvaLJ0lQABAgQIPFFgV579+xeen6+n3F+vff22XoLrPudYp63sFr89miWf3+4gv/3vBN+XnoYJUxNap++PribgTv2+x8fkec2xMS95v9WXjLsJ2vv249GYt/r9zEnXY30as7z8NPOUX8yYp62uJOMmQIAAAQIECBBYvIDAffFTaAAECBAgQOChwB9varwUcu/vWhgiCH/YqSdXuA3qz9e+NB8TfN4HnvnFQM5pv7d6bRjZoZxd6Jee49yV+7Ob/tChnRxhc7qWDre7pUIgZ7Nnbr6oqPtSleblpwna+66Vjl1wGwECBAgQIECAAAECQwoI3IfU1BYBAgQIEBhPIIHvb6/N3wfi+d7tjuv9eN3YVMsJQJsQtNY0AeqhlHNPqQS5Cexrn3v7uJzPfhqgDz2HsNrb87PWHOuz6zDK5lx2c9QBzy0ECBAgQIAAAQIE5i4gcJ/7DOkfAQIECKxR4DY8vw3Lbz/fwi7ztc1tgu5Dj0FlzhO0H0tpG+QmxE2Aa6d0jwl4cGvmJH9tkN3sNUcK3TfX/MWBI2PGmyMtEyBAgAABAgQIEHi6gMD96VOgAwQIECCwAoHbI1v2N+N57fMVDNkQXhHIUTQ5ruZ8LQlZH127UqHr+d/OZ3+k2//7ff7awC9C+vtrgQABAgQIECBAgMCiBATui5ounSVAgACBiQSye/UP12clDE3Jdfv5/TEuE3XNYxYocCp9zu73813f9+W/E7R3Of87QX7zgs0Fksy+y33+2iCDyxn+mffsZncRIECAAAECBAgQILAhAYH7hibbUAkQIEDgN81RLrfHteyKS0quPaNXBbJTNzu3769L+UJK7ddv6zW7wfuw3//i4/4ontv5vT3Kp88zu957Ljf+uZRmx3T60/ZKcJ+g/aW5aNuW+v8qkPXS9a8N7Ga3oggQIECAAAECBAgQ+I3A3SIgQIAAgTUINEe63IatTRDrLPTf/Ob+WJMEv7dXwtuE37fXfZ01rJPbMeyv/3EoH/MCzDlfCXITsqfcz9Oc+72kvmU9ZB1kPbS9frrOzantjeoTIECAAAECBAgQILA+AYH7+ubUiAgQILAmgSZI35VBpeTaXz/efm1NY35tLDmr+3LzzfPN5/eB+UsB+haM2owx6+dDKbXHuTS/tLg9bqjN87rUFeR2UWt3TxOyN/+utLk7f21wKuX2Z7HN/eoSIECAAAECBAgQILBCAYH7CifVkAgQILAQgSZMb3aiJwBN2cKO9Nvw/FLGnJLr/ogVQd44i/nr0uxX17X26AnZXZ66p7uKzXrdX9dt/vv25bmP2n3r+zn/O7vZzX8fxdfv7XM+e/PXBlkPzc/tOL3UKgECBAgQIECAAAECixQQuC9y2nSaAAECsxfYWpiencjNUR+3u8tf+3z2E7jSDu7LuL4tZVc5vm9KvePN3D66Le222TV/257zvx/p9v9+gvacz177y5bbJ/prg/7+WiBAgAABAgQIECCwCQGB+yam2SAJECAwqMBWwvTmCJHbXee3n1+Kaopr/gK70sU2QXjm/tBifvelbtfzv/PXDsdSvi/F+ezjrKXMf/6qIXPa9vLXBm3F1CdAgAABAgQIECCwcQGB+8YXgOETIEDgTqA5n7o51uX+49LBbo9yaXaf34bozj5f+gz/c/+bHc3HymFlfWT3c8LvR1efY0nSdkL9HBtT86xHffH9lwV25ctdgnZ/bWBFESBAgAABAgQIECDQWUDg3pnOjQQIEFikwFoD9dsjXc7XmbmUjym5mq8tctJ0upNAXoaaXe27yrvfl3oJwB/tMk97OZbkUEp+ntpe2TGdUL9Zm23vV/+xwL5USdCej22u/MIla+BUsQ7atKsuAQIECBAgQIAAAQIbEhC4b2iyDZUAgU0IrC1Qb4L0l3ah335tE5NrkFUCu1Ir57Tvq2r/Y6f5oZTLg/qfl+8nKK9t96XmsnM6/XsU6ld2XbU7gcxNl6Dd+eyWEgECBAgQIECAAAECgwkI3Aej1BABAgQmEVhToN6E6Qk6U24D9PMkmh6yJoExjo/ZFaDmbPZ83vfKLvpj30bc/y8C+/KVLkF7ftmS+fDvjUVFgAABAgQIECBAgMBgAgL3wSg1RIAAgcEEmlB9V1pM+ayUfC2h0lIuYfpSZmod/WxzfEx2mefYkOMbQ8/PWo6NSbtDXTmuJD/PruEEMk9dgvbvrvN/Ga4rWiJAgAABAgQIECBAgMA/BATuVgIBAgSeI5Dg7fel3IbpzQtKn9Oj+qcK0+ut1BxXID9HbY6Peev89Pz8ZTd7jo1Ju0Nf/14azEt5Xf0F9qWJtkG7F6H2d9cCAQIECBAgQIAAAQIVAgL3CiRVCBAg0FEgYfpvS0k41ITpSwjVm0D9fB33/ceOHG4jMJhAl+NjDuXpzVq+7Uh+PptjY7p0MCH+H0rZvXHzf5TvZVe9q59A5qpL0B77mhfi9uuduwkQIECAAAECBAgQIFAEBO6WAQECBPoJ/PF6e4KgJkzflc9T5no1gXp22zbnpt9+nGu/9YtABBKOJzzNz9uj67XjY/Lz2eds9qbd70s7OXrm8EZHcnzJW99/NAbf/8e/p23+kiFmzRwJ2q0gAgQIECBAgAABAgQmFRC4T8rtYQQILFQgYU9z/Es+z8715iiYOQ5JoD7HWdGnvgL5mftQyr6yofvjYxLQf17KoUUb94/KSzZP15L2/nb9t+C1LuVnMf3NL7Rc7QXy7212tGfOaq+clX8sJb8M4V6rph4BAgQIECBAgAABAoMJCNwHo9QQAQIrEMhu9WaX+u3Z6nMbmkB9bjOiP2MK5GcyoWvOVq+5ErgeSjlfK+/Lx+xm/+L6813Txm2d7JROeHss5XL9Rv59SNj+1i57YXtb6f+t3/bIoNzZBO2n7o91JwECBAgQIECAAAECBPoLCNz7G2qBAIFlCSTIyXnLt4H6rvx3ypyu7KS9P+7lUr6W4iKwFYG2x8ccC0yOEMnPc58jY+KbwDxt3e+UTvif57x1Cdu7r9Ac0RPfmiOD8hRBe3drdxIgQIAAAQIECBAgMIKAwH0EVE0SIDALgdtgfVd6lIB9P4ue/W8nbkP1S/lyyo+lOAZhZhOlO5MLtD0+JuekH0vJX6lkJ3tKl6vZzZ6gPT+Lt1f+Hak5Rzx9yW58P8ftZiD/Psc3zjXXa+fz19yrDgECBAgQIECAAAECBEYTELiPRqthAgQmFEg4l13rCWoS2uRjbWgzZjcTCCW0u1xLE6afx3yotgksWKDt8THZSd4c7XLoMe7XdrM3TSbATxj8aNf1N6VO7dE3Pbq7qlvzb3XNLzKaQXsZ6qqm32AIECBAgAABAgQIrE9A4L6+OTUiAmsWSDCTl5fuS0nInv/Ox2deOc7gUsp9mH5+Zqc8m8ACBdocH9MML7vIH4Xgr1HkZzfHxWQ3e36GX7rSdsLgmh3zfyn1Tgt0f1aXY9scH1Pbh/fX+fLXA7Vi6hEgQIAAAQIECBAgMLmAwH1ycg8kQKBSIEdD3Ibq+bxrsFb5yDer5fiXy7U0u9bvj5wY4jnaILA1gbbHx/T1yZEvCdpT3rpqfwGQ4D6BvH8P6mdmX6q2OT6mOTIo/wa7CBAgQIAAAQIECBAgMGsBgfusp0fnCGxGoDkSJiFMPn/WrvXb3eoJdm6Pg9nMZBgogYkE2h4f06dbj46MuW17V/6j9oiTT6XuoRQ7rutmJ3P+4WpWc0d+0Xks5VxTWR0CBAgQIECAAAECBAjMQUDgPodZ0AcC2xJowvUmWN8/YfgJ3y6lJFC/PwrmCd3xSAKbE6jdPd4HJmd9n66lZvd52yNO/qO0neNoXHUC+SuAmnPw01p++flVKY/+CqHuyWoRIECAAAECBAgQIEBgQgGB+4TYHkVggwLPDtfvg/Vmx/oGp8KQCcxCYOzjYxKyN8fFtAlr8wuAYym7CqX8u3IopSbEr2huE1XilbD90dW8EDVz4SJAgAABAgQIECBAgMAiBQTui5w2nSYwS4HsDs256/tSEqrl41RXQpqEX+dSLteSz10ECMxDYOzjY3K0SwL2U8vh5t+pr1v8e5WXdh5bPmPr1Q8FoCZszxxmV3v+DXcRIECAAAECBAgQIEBgsQIC98VOnY4TeLrA7bnrCa12E/WoeXlpcxxMcyTMRI/3GAIEWgqMdXxME7InaG973uQL5wAAIABJREFUhnr+vUrQfqgci13tlVB31eL7KGx3fEw3W3cRIECAAAECBAgQIDBTAYH7TCdGtwjMUOB+93p2rI553e5ab46CcYTDmOLaJjCswL4012b3eM3T8wu3UyldQva03/acdkec1MzKy3XyS9m/Xc1fa+Wb8o1jKW1/YdK9V+4kQIAAAQIECBAgQIDAyAIC95GBNU9goQK70u8/lLK/lgQnY1734bqz1sfU1jaBcQTy70Z+MZeXY+bfjqF+KZeQvTmX/dKx603QniNLavvliJOO2Nfb/l4+vva/Hfk3P+vk3O8R7iZAgAABAgQIECBAgMD8BATu85sTPSLwDIEEUJ9fQ7IEZbsROyFcHxFX0wQmFBjrWKn8G5EgtgnZ++5+bvNC1PDliJPDtQ8Tcq7qUR/LaN69MqLMb/53xl8srWrKDYYAAQIECBAgQIAAgUZA4G4tENiuwG3APtYOduH6dteXka9PYMxjpfJvRROw5+MQV9ugPX04lpKw2NVdYF9uzVEyL10xzv/eXLo3704CBAgQIECAAAECBAjMW0DgPu/50TsCQwrsSmPNcQ/5U/4xrrxYMLsWz9ciVBlDWZsExhfIX73k34uEo/trGfqp2UmecP10/XdjqPbT3w/Xvte2+b5UTNDedzd97fPWXC9he+bgpevP1zlf8/iNjQABAgQIECBAgACBjQsI3De+AAx/9QK7MsLsZD+UMsYu9pytfC6lCdmFVatfUga4UoH8W3G7g32Mfy9uj4rJvxuXgS33pb22L2n9rtxzHKEvAw9tMc3lf2u+faW3ORN/rF/2LgZIRwkQIECAAAECBAgQWL+AwH39c2yE2xNozmNPsDFkuNGEZQnKmoB9e7pGTGAdAvfh+m7EYSXUzu7xsc7s3pe22wbt+WXhsZT8e+YaTuA/S1MvraX870e+7peyw1lriQABAgQIECBAgACBmQoI3Gc6MbpFoINAwoyETgnZE7r3vXI8zLmUJly/9G3Q/QQIPEUgu9Wb42Hy+Ri7118aWP4N+er678gYA99f/83Lx9pL0F4r1b5e/rfnr6/c9pfy9VP7Jt1BgAABAgQIECBAgACB5QkI3Jc3Z3pM4F4gYdO7UvruZs95yudrybnKdiJaawSWJ5Aw/Q+lNMF6/n2Y+hr75aMZU9sd7fn37VjKaWqMDT0v/7uRI8zur9jvNuRgqAQIECBAgAABAgQIbFxA4L7xBWD4ixZIgJHQ6dBxFLdHxJxLG2Md99Cxe24jQOCBQP4NaML1ffk8IfsQf93SBz7Hx2RX+xi/sMsYBe19Zmfce//rlebtbh/XXesECBAgQIAAAQIECMxMQOA+swnRHQKVAodS70OHcC0he3YhNqXycaoRIPBkgWbn+q70Y1/KHML1W5Ixj4/JeAXtT16ADx7/1nEy/m/Nec+d3hEgQIAAAQIECBAgMLCA/ydoYFDNEZhA4NvyjEOL5wjZW2CpSuDJAtmhnl3rCZl3pUx95vq5PPP3pdQeUTXm8TExaBu0pz95QWvKGLvsn7w8Zvv443Wu7juYM/Mzjy4CBAgQIECAAAECBAhsRkDgvpmpNtCVCLwWarw0vBztYCf7SibeMFYpkDA94XY+JpScctd6ztXOMVIp52vZlY/5hV76UnONdXxMni9or5mB+dR57X+b3pcu5nsuAgQIECBAgAABAgQIbEZA4L6ZqTbQFQgkjPt7xTi+uQYcdndWYKlCYAKBP5Zn7K4lP8f5PB+nurLruwnWm4+3/z5kV31evHys7NBYx8fkhZs5/31f2Y9Us6O9BdaIVbN28kuS+0vgPiK6pgkQIECAAAECBAgQmKeAwH2e86JXBF4SeC3QeKR1fqFCQrf7QP6lr+U4ABcBAo8FdqVKs1s9nzdHwSTMnvrKz+3t7vXLGx3I0TF5H0T6/Oga6/iYL8uD8+9bTR+aPgraH83WtN/P/AncpzX3NAIECBAgQIAAAQIEZiogcJ/pxOgWgRcEXgs0psY63z0wwX3CvdvrUv4j5fbKERb3X5u6755HoI/ArtycUD0fU5ojYPZ9Gu15b3ab3+5ev/9ZfK359P/Zx8cI2ntO/oxuP5a+CNxnNCG6QoAAAQIECBAgQIDA8wQE7s+z92QCbQUSkCVM+23bG2dc/1L6lnJ71X6tOSZjxsPTtYUJ5GfsNlDPf9+WZw7n9liY/Iw0O9jb9mkOx8cI2tvO2vzrH0sXBe7znyc9JECAAAECBAgQIEBgAgGB+wTIHkFgQIHsqM2LUBMKul4WOL/w5Uv5Wsr99VLd1HGUzvpW1+7m56bZmZ6v3Za5jDq71rNeb3euD/FOhmcfH9MlaM9fxnws5VTKEAZzmeO19eNYBiRwX9usGg8BAgQIECBAgAABAp0EBO6d2NxE4OkCzYsF85JB1zQCLx2d0zz5/EoXLuXrKS9dCVUFiP3mLru1/3BtYlc+puRqAvV8P5/P9Wp2rTe71bNWXltLfcYQlzbHx3wq9Q8Drc9mR33+zWpznn2C9mMppz4Dd+9kApkrgftk3B5EgAABAgQIECBAgMCcBQTuc54dfSPwWKAJFPelahMy5uOajp15rLDOGucHw3r0/dz+1i8J3mp+6B3+u/Kwmr/KyDq+vZo13Xwt7aQs7WreX5A5a+YkIfvYv3Bpe3xM+nkopWZtPZoDQfsjoXV9/1iGI3Bf15waDQECBAgQIECAAAECHQUE7h3h3EZgQQL7F/pa+7U/Lmicukrg2QL5RcXlWhKo5/N8fMbV9viYHNtyHKCjgvYBEBfYRNaOwH2BE6fLBAgQIECAAAECBAgMLyBwH95UiwTWLPDSER27MuCU2+ulr9l5v+aVsZ2xNbv/z2XIzW71S/k8ZQ5XfvbaHh+T41769r9r0J6jlRL2n+aApw+dBY7lToF7Zz43EiBAgAABAgQIECCwJgGB+5pm01gILE/g/siQjKD2awkWa44pWZ6KHj9T4DZQTz/O1840H5/Zt0fPTuBZe1b6UMfHdA3a43y88X00Nt+ft0DmUuA+7znSOwIECBAgQIAAAQIEJhIQuE8E7TEECEwmsH/hSbvytZT766W6CRCbF3FO1mkPGl2geUFpHnS5lnx+vj65+Th6R0Z4QNZxdrW/tMbvHxeHoY6PeVfaOpbS5mWogvYRFsAMmsw6ELjPYCJ0gQABAgQIECBAgACB5wsI3J8/B3pAgMAyBF46Tic9f+3r+V4C0JSXLkfsDDPvzY702xfEXkrTKbnOwzxmlq1kbX0oJee111yfSqUhjo/5srRzfGNtv9QXQXvNDC23TtaDwH2586fnBAgQIECAAAECBAgMKCBwHxBTUwQIEBhQYP9GW2+F/Le31da7f9TQL8vN8SWXCpvzXZ28cDRBenPdhuoVza26yjOOjxG0r3pJ9RrcsdwtcO9F6GYCBAgQIECAAAECBNYiIHBfy0waBwECBAhsQWBfBjn18TGC9i2srH5jFLj383M3AQIECBAgQIAAAQIrEhC4r2gyDYUAAQIEViuwKyOb+vgYQftql9PgAxO4D06qQQIECBAgQIAAAQIEliogcF/qzOk3AQIECGxFoO3xMTmn/fuOODmGKEF72kjIX3s5o71Wap31jmVYjpRZ59waFQECBAgQIECAAAECLQUE7i3BVCdAgAABAhMJ7Mtzao+PSZfel/KxlNtz72u7uisVm6A9oXvtJWivlVp3vWMZnsB93XNsdAQIECBAgAABAgQIVAoI3CuhVCNAgAABAhMJJPDO8TGHyucl9E7dS2X922q78h8JSmuf1dybF+EeSzl1eKZb1ieQtSBwX9+8GhEBAgQIECBAgAABAh0EBO4d0NxCgAABAgRGEnh3DbJrdpkn9O56fMzn13v3LcchaG8JtpHqAveNTLRhEiBAgAABAgQIECDwWEDg/thIDQIECBAgMLZAgu/sav+s8kFdjo/pej57uvRTKTmu5lTZP9W2JXAsw7XDfVtzbrQECBAgQIAAAQIECLwiIHC3NAgQIECAwPMEpjg+ZncNQ78oH2t2zt9qOKP9eWtjSU8WuC9ptvSVAAECBAgQIECAAIFRBQTuo/JqnAABAgQIvCow9vExeQnqoZR9hzn4VO7JjvZzh3vdsj2BYxmyHe7bm3cjJkCAAAECBAgQIEDgBQGBu2VBgAABAgSmFUgAPtbxMbvSdhO05/O213flhoSnl7Y3qr9pgawZgfuml4DBEyBAgAABAgQIECDQCAjcrQUCBAgQIDCNQJfjY/JS1B8rupeXoB5KybExba9fyw3ZzZ7yS9ub1SdQBI6lCNwtBQIECBAgQIAAAQIECBQBgbtlQIAAAQIExhdoc3xMAvAE7acH3dqV7/fZze5FqOPP+1aeIHDfykwbJwECBAgQIECAAAECDwUE7g+JVCBAgAABAp0FPit3fltKPtZc35RKCS/f2mneZzd7+pBjY06lnGs6pA6BCoGsWTvcK6BUIUCAAAECBAgQIEBg/QIC9/XPsRESIECAwPQCOT4mAWR2qtdcP1zrvnZ8zK58P7vkD6Wk7bbXz+WG07Vc2t6sPoEHAsfrer+v9r58Id9zESBAgAABAgQIECBAYDMCAvfNTLWBEiBAgMBEAjnmJeeh1wTjbx0fk/uzmz2hfe0O+fshJsg/XctEw/eYDQocy5jtcN/gxBsyAQIECBAgQIAAAQL/KiBwtyoIECBAgMAwAgnFP5Syr2zuteNjcn9C+7wAtSa0v39cQvxTKQn9L5V9UY1AH4FDuTlHJ91fn67ruE/b7iVAgAABAgQIECBAgMCiBATui5ounSVAgACBGQoMcXzMroyrzwtQw2I3+wwXx0a6tC/j/NsLY82azPdcBAgQIECAAAECBAgQ2IyAwH0zU22gBAgQIDCCQJ/jY4Y4MsZu9hEmVZOtBV4L3C+lpX9r3ZobCBAgQIAAAQIECBAgsGABgfuCJ0/XCRAgQOBpAm2Pj/mu9DRnsf9SSs5lz3Exhx69z1Ed35dy6tGGWwkMKfBfrzTm/9YcUllbBAgQIECAAAECBAjMXsD/EzT7KdJBAgQIEJiRQNvjY34qfU/QfinlXSkJ2ncdx/Nzue90LWnPRWBOAq8F7v+3dDK/aHIRIECAAAECBAgQIEBgEwIC901Ms0ESIECAwAACbY+PyUtL/7OUBO7ZEd/1yu74Uynnrg24j8AEAlmff3zhOX+ydifQ9wgCBAgQIECAAAECBGYjIHCfzVToCAECBAjMVGBX+vVtKfvK/mU3748t6r/UbHbGJ7DPsTF2B1fCq/ZUgXN5+kuB+1/K109P7ZmHEyBAgAABAgQIECBAYEIBgfuE2B5FgAABAosSyPExOQbmOFGvc2RMAvYE7ZeJnukxBIYSyM/J1y809n7Cn6GhxqIdAgQIECBAgAABAgQIdBYQuHemcyMBAgQIrFggZ61/KGU38hh/Le03Lz89j/wszRMYU+BYGn8pcM+RSIcxH6xtAgQIECBAgAABAgQIzElA4D6n2dAXAgQIEHi2wK50oM3xMV37+0O58VSKI2O6CrpvbgL70qG/vdCprPV8z0WAAAECBAgQIECAAIFNCAjcNzHNBkmAAAECFQLZnZsXnOYomTGuHBlzupbLGA/QJoEnCuzLs18K3PM+g39/Yr88mgABAgQIECBAgAABApMKCNwn5fYwAgQIEJihQILC7GrfjdA3R8aMgKrJ2Qr81ys9839vznbKdIwAAQIECBAgQIAAgaEF/D9AQ4tqjwABAgSWIpCd7Dmn/TBChx0ZMwKqJmcvIHCf/RTpIAECBAgQIECAAAECYwsI3McW1j4BAgQIzFHgXenUsZQhj49xZMwcZ1qfphS4lIf9/oUH/ql87TxlRzyLAAECBAgQIECAAAECzxIQuD9L3nMJECBA4BkCn5WHZlf7fsCHf1faystPU1wEtixwLoP/4wsAAvctrwpjJ0CAAAECBAgQILAxAYH7xibccAkQILBRgexkb3a1D0GQ3ewfSzmV8ssQDWqDwAoEBO4rmERDIECAAAECBAgQIECgn4DAvZ+fuwkQIEBg/gL70sWhXoqa3ewJ2RMsuggQ+GeB/FzY4W5VECBAgAABAgQIECCwaQGB+6an3+AJECCwaoHsak/Q/kXPUdrN3hPQ7ZsRyF995C9J7q//KF/I91wECBAgQIAAAQIECBBYvYDAffVTbIAECBDYpMAQL0W1m32TS8egewgcy71fv3D/+/K1fM9FgAABAgQIECBAgACB1QsI3Fc/xQZIgACBTQn0fSnqr0WrOZv9sik5gyXQXyChusC9v6MWCBAgQIAAAQIECBBYsIDAfcGTp+sECBAg8N8COTrm81K+KiWBe5frp3JTE7R3ud89BAj8Yxe7wN1KIECAAAECBAgQIEBg0wIC901Pv8ETIEBg0QIJ2XM++6HHKHJsTIL2H3u04VYCbQV25YbfX2/KL4nyS6Nct5+/9N9tn/Oo/rlUSPk00M/AsbQjcH+k7vsECBAgQIAAAQIECKxaQOC+6uk1OAIECKxOYFdG9GUph1LyeZfLS1C7qLmnjcAfr5X3r3xs09ZUdU/lQTlr/dLjgcdyr8C9B6BbCRAgQIAAAQIECBBYvoDAfflzaAQECBDYgkBC9uxmT+ly5Wz270uxm72LnnteEkionp3p2ZW+u5b7HepLlDuWTn9Tyi8dOp97Be4d4NxCgAABAgQIECBAgMB6BATu65lLIyFAgMDaBBJivivlUEpz5EbbMf5QbjiVkrC9S4DY9nnqr0sg6+4PpTRB+r58nnWZsubrUgb3l1LOLQd5LPUF7i3RVCdAgAABAgQIECBAYF0CAvd1zafRECBAYA0COZv9UErX3ewxyJnUeYnqZQ0gxjCJQHas70pJuN6Urr/omaTDEzwk7zY4XX+ean6WjqWuwH2CifEIAgQIECBAgAABAgTmKyBwn+/c6BkBAgS2JJBgM8fGJCTf9Rh4zmc/lHLu0YZb1y2Q9ZUXlu5LaY6DyUfX2wIJ3/OXIvnZyhFN+e/bvwCIYUxf+vnN2fBHwAQIECBAgAABAgQIENiCgMB9C7NsjAQIEJivQAK7HBuToL3vbuKcO51Qz9Ex853vqXuW8Lc5EmZfPp/LGetNYB2Py7Xcf57/Tqg91nrOz9vh+jPz25EnRuA+MrDmCRAgQIAAAQIECBCYj4DAfT5zoScECBDYmkCOnhgiaP/pGhwmnHRtVyBhehOuP/tImKzJBOVNYN58vJSvpczpSvD+sZT8hclY159Kw+exGtcuAQIECBAgQIAAAQIE5iQgcJ/TbOgLAQIEtiGQYO9Yyq7ncLNLOO0kLHRtS+A+XN8/Yfg5vuhSSsL024/5fIlXDE+l5LidIa/88sGRPUOKaosAAQIECBAgQIAAgVkLCNxnPT06R4AAgVUJ7Mpovi0lwV7f64fSwKGUS9+G3D97gbzMtNmxnjU0xPppM+gExllnCdabnernNg0srG5+ro6lDBG8+zld2OTrLgECBAgQIECAAAEC/QUE7v0NtUCAAAECjwW+KFUStvc9pz272hMI5uWNrnUJ7K4h7758TMCe/55yZ3SzY/1cnnu7a31dyvWjaV6Cmp+3HNXT5vp0/Rk9tblJXQIECBAgQIAAAQIECKxBQOC+hlk0BgIECMxbIGe1HwfoopeiDoA4gybyS5fmrPVd+bwJdqfsWnatNzvWb3euT9mHJT0r85RfmjXzlY/NDvjsYm/Oqz9fXcd60euSzPSVAAECBAgQIECAAIGNCgjcNzrxhk2AAIGJBPJS1A89n5Wdx4dSEua5liOwK11NKHu7Wz2f9/0rh7YCCYTvw/W2bahPgAABAgQIECBAgAABAgSqBATuVUwqESBAgEAHgX25528d7ru95X35j2PPNtw+nkAC9N+WkrnOdf9xvCe/3LJwfWpxzyNAgAABAgQIECBAgACBfxIQuFsQBAgQIDCWwP8rDXfdzexli2PNSl27eVFprsxfc4767e70fV0zo9XKWf7ZtX6+fmzOXB/tgRomQIAAAQIECBAgQIAAAQI1AgL3GiV1CBAgQKCtQALZLrvbE6QeS/nY9oHqPxRodqOnYhOe3wbqu/L1lLld9y8zFa7PbYb0hwABAgQIECBAgAABAgT+R0DgbjEQIECAwBgCx9JoXpba9kqY2ryAsXnx4qV8LSVXE762bXct9ZsXjjbjuT8TfX8z0F35PGVJV/6yIXN9e+a6F3AuaQb1lQABAgQIECBAgAABAhsXELhvfAEYPgECBEYSyA71dyO1fdtswtmU5rr/73z9pa/l60OE97e7xmuGu3+lUtuv1zxrznV+us5LE6xnjvK5iwABAgQIECBAgAABAgQILFpA4L7o6dN5AgQIzE4gO7C/LeWL2fVMh54h0OxYbwJ1wfozZsEzCRAgQIAAAQIECBAgQGAyAYH7ZNQeRIAAgdULZEf7sZSuL0pdPdAKB9j8lUCC9NvSHA20wiEbEgECBAgQIECAAAECBAgQeF1A4G51ECBAgEBfgV1pILva930bcv9sBHLkS3N2+vnaq0v5mJJLoD6bqdIRAgQIECBAgAABAgQIEJiTgMB9TrOhLwQIEFieQJtd7Z/K8E6l5Nzz3bW0PQN9eULz6fFtiH4p3UrJdb5+bF5WO58e6wkBAgQIECBAgAABAgQIEFiYgMB9YROmuwQIEJiJwK7046+lJDB/dOXYka9K+f6NijmG5rat/U3dfL05pmbrAf2vxeL25aKX8t8pzXW++VyA/mhl+j4BAgQIECBAgAABAgQIEBhYQOA+MKjmCBAgsAGBQxnjh1Jqzmp/X+p9LKU5nmRontswPm3f/3e+truW+2fn67/v2aHbXeM1TZ1fqdT26zXPUocAAQIECBAgQIAAAQIECBCYWEDgPjG4xxEgQGDBAgnYc1b7FxVj+KHUya72293YFbepQoAAAQIECBAgQIAAAQIECBBYroDAfblzp+cECBCYUiA7xxO2PzpCJkeeHEvJrnYXAQIECBAgQIAAAQIECBAgQGBTAgL3TU23wRIgQKCTQHa0J2x/dIRMdrUfSrl0eoqbCBAgQIAAAQIECBAgQIAAAQILFxC4L3wCdZ8AAQIjCyRAT9j+1mVX+8iToHkCBAgQIECAAAECBAgQIEBgGQIC92XMk14SIEDgGQI1YXteGpp6zmp/xgx5JgECBAgQIECAAAECBAgQIDArAYH7rKZDZwgQIDAbgZzV/rdS3jpG5pvy/bwY1UWAAAECBAgQIECAAAECBAgQIFAEBO6WAQECBAjcCyRk/3spu1docoRMgvYTOgIECBAgQIAAAQIECBAgQIAAgf8VELhbDQQIECBwL5Cd7fs3wvZ8zxEy1g0BAgQIECBAgAABAgQIECBA4E5A4G5JECBAgMCtwLH8x9fCdouCAAECBAgQIECAAAECBAgQINBeQODe3swdBAgQWKvAvgwsu9tfu/5cvvH9WgdvXAQIECBAgAABAgQIECBAgACBvgIC976C7idAgMA6BHJu+3+W8tpLUt+X7x3XMVSjIECAAAECBAgQIECAAAECBAiMIyBwH8dVqwQIEFiawF9Lh794pdM/lK/vlzYg/SVAgAABAgQIECBAgAABAgQITC0gcJ9a3PMIECAwP4GvSpc+vNKtX8vXd6X8Mr9u6xEBAgQIECBAgAABAgQIECBAYF4CAvd5zYfeECBAYGqBz8oD//7GQ/9UvneeulOeR4AAAQIECBAgQIAAAQIECBBYooDAfYmzps8ECBAYTiAvQf38leac2z6cs5YIECBAgAABAgQIECBAgACBDQgI3DcwyYZIgACBNwReC9x/Kvdk97uLAAECBAgQIECAAAECBAgQIECgUkDgXgmlGgECBFYqkBel5oWpt5dz21c62YZFgAABAgQIECBAgAABAgQIjCsgcB/XV+sECBBYgkBC94+l/L6Un0vJf/+4hI7rIwECBAgQIECAAAECBAgQIEBgTgIC9znNhr4QIEDguQK78vjLc7vg6QQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgSFIJPXAAAHJ0lEQVQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgMD/b8eOaQAAABCG+XeNjZHUASnfCBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfAcH99zvLCRAgQIAAAQIECBAgQIAAAQIECBAgQCAkILiHzjCFAAECBAgQIECAAAECBAgQIECAAAECBH4FBPff7ywnQIAAAQIECBAgQIAAAQIECBAgQIAAgZCA4B46wxQCBAgQIECAAAECBAgQIECAAAECBAgQ+BUQ3H+/s5wAAQIECBAgQIAAAQIECBAgQIAAAQIEQgKCe+gMUwgQIECAAAECBAgQIECAAAECBAgQIEDgV0Bw//3OcgIECBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfAcH99zvLCRAgQIAAAQIECBAgQIAAAQIECBAgQCAkILiHzjCFAAECBAgQIECAAAECBAgQIECAAAECBH4FBPff7ywnQIAAAQIECBAgQIAAAQIECBAgQIAAgZCA4B46wxQCBAgQIECAAAECBAgQIECAAAECBAgQ+BUQ3H+/s5wAAQIECBAgQIAAAQIECBAgQIAAAQIEQgKCe+gMUwgQIECAAAECBAgQIECAAAECBAgQIEDgV0Bw//3OcgIECBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfAcH99zvLCRAgQIAAAQIECBAgQIAAAQIECBAgQCAkILiHzjCFAAECBAgQIECAAAECBAgQIECAAAECBH4FBPff7ywnQIAAAQIECBAgQIAAAQIECBAgQIAAgZCA4B46wxQCBAgQIECAAAECBAgQIECAAAECBAgQ+BUQ3H+/s5wAAQIECBAgQIAAAQIECBAgQIAAAQIEQgKCe+gMUwgQIECAAAECBAgQIECAAAECBAgQIEDgV0Bw//3OcgIECBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfgQGMc9WA31rv6AAAAABJRU5ErkJggg==';
+
diff --git a/vue-options-api-demos/inputs/signature/disabled/main.js b/vue-options-api-demos/inputs/signature/disabled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/signature/disabled/main.vue b/vue-options-api-demos/inputs/signature/disabled/main.vue
new file mode 100644
index 00000000..e589e416
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/disabled/main.vue
@@ -0,0 +1,18 @@
+<template>
+  <Signature :value="value" :disabled="true" />
+</template>
+<script>
+import { Signature } from "@progress/kendo-vue-inputs";
+import { sampleSignature } from "./sample-signature";
+
+export default {
+  components: {
+    Signature,
+  },
+  data() {
+    return {
+      value: sampleSignature,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/signature/disabled/sample-signature.js b/vue-options-api-demos/inputs/signature/disabled/sample-signature.js
new file mode 100644
index 00000000..82d3e903
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/disabled/sample-signature.js
@@ -0,0 +1,2 @@
+export const sampleSignature = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABdwAAAH4CAYAAABQRy9XAAAgAElEQVR4XuzdjZUjt4EuUL8I7BeBuRFYG4HpCCRHIDqC0UYgTgQzikBUBNZEYCoCSxEsFcGTItiHb83apenuJuqX9XPrHJxudaNQwAV6vPs1GvV/fuMiQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEegv8n94taIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBD4jcDdIiBAgAABAgQIECBAgAABAgQIECBAgAABAgMICNwHQNQEAQIECBAgQIAAAQIECBAgQIAAAQIECBAQuFsDBAgQIECAAAECBAgQIECAAAECBAgQIEBgAAGB+wCImiBAgAABAgQIECBAgAABAgQIECBAgAABAgJ3a4AAAQIECBAgQIAAAQIECBAgQIAAAQIECAwgIHAfAFETBAgQIECAAAECBAgQIECAAAECBAgQIEBA4G4NECBAgAABAgQIECBAgAABAgQIECBAgACBAQQE7gMgaoIAAQIECBAgQIAAAQIECBAgQIAAAQIECAjcrQECBAgQIECAAAECBAgQIECAAAECBAgQIDCAgMB9AERNECBAgAABAgQIECBAgAABAgQIECBAgAABgbs1QIAAAQIECBAgQIAAAQIECBAgQIAAAQIEBhAQuA+AqAkCBAgQIECAAAECBAgQIECAAAECBAgQICBwtwYIECBAgAABAgQIECBAgAABAgQIECBAgMAAAgL3ARA1QYAAAQIECBAgQIAAAQIECBAgQIAAAQIEBO7WAAECBAgQIECAAAECBAgQIECAAAECBAgQGEBA4D4AoiYIECBAgAABAgQIECBAgAABAgQIECBAgIDA3RogQIAAAQIECBAgQIAAAQIECBAgQIAAAQIDCAjcB0DUBAECBAgQIECAAAECBAgQIECAAAECBAgQELhbAwQIECBAgAABAgQIECBAgAABAgQIECBAYAABgfsAiJogQIAAAQIECBAgQIAAAQIECBAgQIAAAQICd2uAAAECBAgQIECAAAECBAgQIECAAAECBAgMICBwHwBREwQIECBAgAABAgQIECBAgAABAgQIECBAQOBuDRAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQEEBO4DIGqCAAECBAgQIECAAAECBAgQIECAAAECBAgI3K0BAgQIECBAgAABAgQIECBAgAABAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAYG7NUCAAAECBAgQIECAAAECBAgQIECAAAECBAYQELgPgKgJAgQIECBAgAABAgQIECBAgAABAgQIECAgcLcGCBAgQIAAAQIECBAgQIAAAQIECBAgQIDAAAIC9wEQNUGAAAECBAgQIECAAAECBAgQIECAAAECBATu1gABAgQIECBAgAABAgQIECBAgAABAgQIEBhAQOA+AKImCBAgQIAAAQIECBAgQIAAAQIECBAgQICAwN0aIECAAAECBAgQIECAAAECBAgQIECAAAECAwgI3AdA1AQBAgQIECBAgAABAgQIECBAgAABAgQIEBC4WwMECBAgQIAAAQIECBAgQIAAAQIECBAgQGAAAYH7AIiaIECAAAECBAgQIECAAAECBAgQIECAAAECAndrgAABAgQIECBAgAABAgQIECBAgAABAgQIDCAgcB8AURMECBAgQIAAAQIECBAgQIAAAQIECBAgQEDgbg0QIECAAAECBAgQIECAAAECBAgQIECAAIEBBATuAyBqggABAgQIECBAgAABAgQIECBAgAABAgQICNytAQIECBAgQIAAAQIECBAgQIAAAQIECBAgMICAwH0ARE0QIECAAAECBAgQIECAAAECBAgQIECAAAGBuzVAgAABAgQIECBAgAABAgQIECBAgAABAgQGEBC4D4CoCQIECBAgQIAAAQIECBAgQIAAAQIECBAgIHC3BggQIECAAAECBAgQIECAAAECBAgQIECAwAACAvcBEDVBgAABAgQIECBAgAABAgQIECBAgAABAgQE7tYAAQIECBAgQIAAAQIECBAgQIAAAQIECBAYQEDgPgCiJggQIECAAAECBAgQIECAAAECBAgQIECAgMDdGiBAgAABAgQIECBAgAABAgQIECBAgAABAgMICNwHQNQEAQIECBAgQIAAAQIECBAgQIAAAQIECBAQuFsDBAgQIECAAAECBAgQIECAAAECBAgQIEBgAAGB+wCImiBAgAABAgQIECBAgAABAgQIECBAgAABAgJ3a4AAAQIECBAgQIAAAQIECBAgQIAAAQIECAwgIHAfAFETBAgQIECAAAECBAgQIECAAAECBAgQIEBA4G4NECBAgAABAgQIECBAgAABAgQIECBAgACBAQQE7gMgaoIAAQIECBAgQIAAAQIECBAgQIAAAQIECAjcrQECBAgQIECAAAECBAgQIECAAAECBAgQIDCAgMB9AERNECBAgAABAgQIECBAgAABAgQIECBAgAABgbs1QIAAAQIECBAgQIAAAQIECBAgQIAAAQIEBhAQuA+AqAkCBAgQIECAAAECBAgQIECAAAECBAgQICBwtwYIECBAgAABAgQIECBAgAABAgQIECBAgMAAAgL3ARA1QYAAAQIECBAgQIAAAQIECBAgQIAAAQIEBO7WAAECBAgQIECAAAECBAgQIECAAAECBAgQGEBA4D4AoiYIECBAgAABAgQIECBAgAABAgQIECBAgIDA3RogQIAAAQIECBAgQIAAAQIECBAgQIAAAQIDCAjcB0DUBAECBAgQIECAAAECBAgQIECAAAECBAgQELhbAwQIECBAgAABAgQIECBAgAABAgQIECBAYAABgfsAiJogQIAAAQIECBAgQIAAAQIECBAgQIAAAQICd2uAAAECBAgQIECAAAECBAgQIECAAAECBAgMICBwHwBREwQIECBAgAABAgQIECBAgAABAgQIECBAQOBuDRAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQEEBO4DIGqCAAECBAgQIECAAAECBAgQIECAAAECBAgI3K0BAgQIECBAgAABAgQIECBAgAABAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAYG7NUCAAAECBAgQIECAAAECBAgQIECAAAECBAYQELgPgKgJAgQIECBAgAABAgQIECBAgAABAgQIECAgcLcGCBAgQIAAAQIECBAgQIAAAQIECBAgQIDAAAIC9wEQNUGAAAECBAgQIECAAAECBAgQIECAAAECBATu1gABAgQIECBAgAABAgQIECBAgAABAgQIEBhAQOA+AKImCBAgQIAAAQIECBAgQIAAAQIECBAgQICAwN0aIECAAAECBAgQIECAAAECBAgQIECAAAECAwgI3AdA1AQBAgQIECBAgAABAgQIECBAgAABAgQIEBC4WwMECBAgQIAAAQIECBAgQIAAAQIECBAgQGAAAYH7AIiaIECAAAECBAgQIECAAAECBAgQIECAAAECAndrgAABAgQIECBAgAABAgQIECBAgAABAgQIDCAgcB8AURMECBAgQIAAAQIECBAgQIAAAQIECBAgQEDgbg0QIECAAAECBAgQIECAAAECBAgQIECAAIEBBATuAyBqggABAgQIECBAgAABAgQIECBAgAABAgQICNytAQIECBAgQIAAAQIECBAgQIAAAQIECBAgMICAwH0ARE0QIECAAAECBAgQIECAAAECBAgQIECAAAGBuzVAgAABAgQIECBAgAABAgQIECBAgAABAgQGEBC4D4CoCQIECBAgQIAAAQIECBAgQIAAAQIECBAgIHC3BggQIECAAAECBAgQIECAAAECBAgQIECAwAACAvcBEDVBgAABAgQIECBAgAABAgQIECBAgAABAgQE7tYAAQIECBAgQIAAAQIECBAgQIAAAQIECBAYQEDgPgCiJggQIECAAAECBAgQIECAAAECBAgQIECAgMDdGiBAgAABAgQIECBAgAABAgQIECBAgAABAgMICNwHQNQEAQIECBAgQIAAAQIECBAgQIAAAQIECBAQuFsDBAgQIECAAAECBAgQIECAAAECBAgQIEBgAAGB+wCImiBAgAABAgQIECBAgAABAgQIECBAgAABAgJ3a4AAAQIECBAgQIAAAQIECBAgQIAAAQIECAwgIHAfAFETBAgQIECAAAECBAgQIECAAAECBAgQIEBA4G4NECBAgAABAgQIECBAgAABAgQIECBAgACBAQQE7gMgaoIAAQIECBAgQIAAAQIECBAgQIAAAQIECAjcrQECBAgQIECAAAECBAgQIECAAAECBAgQIDCAgMB9AERNECBAgAABAgQIECBAgAABAgQIECBAgAABgbs1QIAAAQIECBAgQIAAAQIECBAgQIAAAQIEBhAQuA+AqAkCBAgQIECAAAECBAgQIECAAAECBAgQICBwtwYIECBAgAABAgQIECBAgAABAgQIECBAgMAAAgL3ARA1QYAAAQIECBAgQIAAAQIECBAgQIAAAQIEBO7WAAECBAgQIECAAAECBAgQIECAAAECBAgQGEBA4D4AoiYIECBAgAABAgQIECBAgAABAgQIECBAgIDA3RogQIAAAQIECBAgQIAAAQIECBAgQIAAAQIDCAjcB0DUBAECBAgQIECAAAECBAgQIECAAAECBAgQELhbAwQIECBAgAABAgQIECBAgAABAgQIECBAYAABgfsAiJogQIAAAQIECBAgQIAAAQIECBAgQIAAAQICd2uAAAECBAgQIECAAAECBAgQIECAAAECBAgMICBwHwBREwQIECBAgAABAgQIECBAgAABAgQIECBAQOBuDRAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQEEBO4DIGqCAAECBAgQIECAAAECBAgQIECAAAECBAgI3K0BAgQIECBAgAABAgQIECBAgAABAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAYG7NUCAAAECBAgQIECAAAECBAgQIECAAAECBAYQELgPgKgJAgQIECBAgAABAgQIECBAgAABAgQIECAgcLcGCBAgQIAAAQIECBAgQIAAAQIECBAgQIDAAAIC9wEQNUGAAAECBAgQIECAAAECBAgQIECAAAECBATu1gABAgQIECBAgAABAgQIECBAgAABAgQIEBhAQOA+AKImCBAgQIAAAQIECBAgQIAAAQIECBAgQICAwN0aIECAAAECBAgQIECAAAECBAgQIECAAAECAwgI3AdA1AQBAgQIECBAgAABAgQIECBAgAABAgQIEBC4WwMECBAgQIAAAQIECBAgQIBAF4HflZt+6XKjewgQIECAwFoFBO5rnVnjIkCAAAECBAgQIECAAAEC4wh8WZo9lrIr5VLKn0v5cZxHaZUAAQIECCxLQOC+rPnSWwIECBAgQIAAAQIECBAg8CyBBOzflrK/60B2uf9bKXa7P2tmPJcAAQIEZiMgcJ/NVOgIAQIECBAgQIAAAQIECBCYpUCOjnlXyvGN3v2lfO80y97rFAECBAgQmFBA4D4htkcRIECAAAECBAgQIECAAIGFCXxR+vuhlN2Dfr8v3z8ubGy6S4AAAQIEBhcQuA9OqkECBAgQIECAAAECBAgQILB4gQTsCdoTuD+6fi0VPivl8qii7xMgQIAAgbULCNzXPsPGR4AAAQIECBAgQIAAAQIE6gVqjo+5be2n8h+HUrw0td5YTQIECBBYsYDAfcWTa2gECBAgQIAAAQIECBAgQKCFwJel7rGUXcU92dWeuh8r6qpCgAABAgQ2IyBw38xUGygBAgQIECBAgAABAgQIEHhRYF+++m1l0J4GPpXyVSkXngQIECBAgMA/CwjcrQgCBAgQIECAAAECBAgQILBNgQTtX5eSjzXXz6XSoZRzTWV1CBAgQIDAFgUE7lucdWMmQIAAAQIECBAgQIAAgS0L7MrgE7QnPK+93peKx9rK6hEgQIAAga0KCNy3OvPGTYAAAQIECBAgQIAAAQJbE8gLUT+0DNodH7O1VWK8BAgQINBLQODei8/NBAgQIECAAAECBAgQIEBg9gIJ2t+VknPX83nN9dO1/rmmsjoECBAgQIDAPwQE7lYCAQIECBAgQIAAAQIECBBYr8CXZWgfS6kN2nNO+7GU03pJjIwAAQIECIwnIHAfz1bLBAgQIECAAAECBAgQIEDgWQJflAfn+JhdZQd+LfUSzB8r66tGgAABAgQIvCAgcLcsCBAgQIAAAQIECBAgQIDAegT2ZSh5IWo+1lxN0J6w/ZeaG9QhQIAAAQIEXhcQuFsdBAgQIECAAAECBAgQIEBg+QK7MoTsaM/O9trru1LxWMql9gb1CBAgQIAAgbcFBO5WCAECBAgQIECAAAECBAgQWK7ArnQ9O9oPLYbww7W+oL0FmqoECBAgQKBGQOBeo6QOAQIECBAgQIAAAQIECBCYl0BegvqulK9KqX0haoL2YynneQ1FbwgQIECAwHoEBO7rmUsjIUCAAAECBAgQIECAAIFtCCRoT3BeG7T/fK1/2gaPURIgQIAAgecJCNyfZ+/JBAgQIECAAAECBAgQIECgjcCX1+B8V3lTXoiaHfCC9kow1QgQIECAQF8BgXtfQfcTIECAAAECBAgQIECAAIFxBfal+bwQ9bPKxyRo/3gtv1TeoxoBAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAgREEErAnaN+3aPu7Uje72gXtLdBUJUCAAAECQwkI3IeS1A4BAgQIECBAgAABAgQIEBhGYFea+bqUQ4vmPl2D9kuLe1QlQIAAAQIEBhYQuA8MqjkCBAgQIECAAAECBAgQINBRIC9BTdCeHeq11w+l4rGUc+0N6hEgQIAAAQLjCQjcx7PVMgECBAgQIECAAAECBAgQqBFI0P6ulATt+bzm+rlUOpRyrqmsDgECBAgQIDCNgMB9GmdPIUCAAAECBAgQIECAAAECLwl8Wb54LGVXyZOgPfVPlfVVI0CAAAECBCYUELhPiO1RBAgQIECAAAECBAgQIEDgKvBF+ZgXou4qRX4t9T5eixeiVqKpRoAAAQIEphYQuE8t7nkECBAgQIAAAQIECBAgsGWBfRl8zmnPx9rrvaC9lko9AgQIECDwXAGB+3P9PZ0AAQIECBAgQIAAAQIEtiGwK8PMjvbsbK+9visVj6Vcam9QjwABAgQIEHiugMD9uf6eToAAAQIECBAgQIAAAQLrFtiV4WVH+6HFMH8odfMC1R9b3KMqAQIECBAgMAMBgfsMJkEXCBAgQIAAAQIECBAgQGB1Ar8rI3p3Dc7zec2VoP1YyrmmsjoECBAgQIDA/AQE7vObEz0iQIAAAQIECBAgQIAAgWULZEd7dqjXBu0/X4P207KHrfcECBAgQICAwN0aIECAAAECBAgQIECAAAECwwh8eQ3Od5XN/Xqt/7GyvmoECBAgQIDAzAUE7jOfIN0jQIAAAQIECBAgQIAAgdkL7EsP80LUzyp7mqA9IXvKL5X3qEaAAAECBAgsQEDgvoBJ0kUCBAgQIECAAAECBAgQmKVAgvYcH5OPtdd3pWKOmxG014qpR4AAAQIEFiQgcF/QZOkqAQIECBAgQIAAAQIECMxCYFd6kaD90KI3n65B+6XFPaoSIECAAAECCxMQuC9swnSXAAECBAgQIECAAAECBJ4mkJeg5uiYNkH7D6X+sZTz03rtwQQIECBAgMBkAgL3yag9iAABAgQIECBAgAABAgQWKpCg/V0pOQomn9dcP5dKh1LONZXVIUCAAAECBNYhIHBfxzwaBQECBAgQIECAAAECBAiMI5Cg/VhKm6A99U/jdEerBAgQIECAwJwFBO5znh19I0CAAAECBAgQIECAAIFnCXx5Ddp3lR34tdT7eL2n8hbVCBAgQIAAgbUJCNzXNqPGQ4AAAQIECBAgQIAAAQJ9BPbl5pzT/lllI03QnrD9l8p7VCNAgAABAgRWKiBwX+nEGhYBAgQIECBAgAABAgQItBJI0P51KflYe31XKh5LudTeoB4BAgQIECCwbgGB+7rn1+gIECBAgAABAgQIECBA4G2BXfl2gvZDC6hPpW5eoCpob4GmKgECBAgQ2IKAwH0Ls2yMBAgQIECAAAECBAgQIHAvkJeg5uiYNkH7D6X+sZQzTgIECBAgQIDASwICd+uCAAECBAgQIECAAAECBLYkkKD9XSnZoZ7Pa66fr/W/r6msDgECBAgQILBdAYH7dufeyAkQIECAAAECBAgQILA1gRwd0zZoP5Z7TluDMl4CBAgQIECgm4DAvZubuwgQIECAAAECBAgQIEBgOQJflq4mON9VdvnXUu/jtfxSeY9qBAgQIECAAIHfCNwtAgIECBAgQIAAAQIECBBYq8C+DOxbQftap9e4CBAgQIDA/AQE7vObEz0iQIAAAQIECBAgQIAAgX4CCdpzfEw+1l7flYrHUi61N6hHgAABAgQIELgXELhbEwQIECBAgAABAgQIECCwFoFdGciHUr5oMaBPpW7OdRe0t0BTlQABAgQIEHhZQOBuZRAgQIAAAQIECBAgQIDA0gUStGdH+6HFQH4odY+lnFvcoyoBAgQIECBA4E0BgbsFQoAAAQIECBAgQIAAAQJLFfhd6fi7a3BeO4afS8WDoL2WSz0CBAgQIECgjYDAvY2WugQIECBAgAABAgQIECAwB4EmaM9RMPm85krQfizlVFNZHQIECBAgQIBAFwGBexc19xAgQIAAAQIECBAgQIDAswS+LA/+WEpt0P7rNWjPPS4CBAgQIECAwKgCAvdReTVOgAABAgQIECBAgAABAgMJJGg/lrKrbC9Be0L2lF8q71GNAAECBAgQINBLQODei8/NBAgQIECAAAECBAgQIDCywL60/6GUz1o857tSN8fNCNpboKlKgAABAgQI9BcQuPc31AIBAgQIECBAgAABAgQIDC+QoP3rUvKx9krQfizlUnuDegQIECBAgACBIQUE7kNqaosAAQIECBAgQIAAAQIE+grsSgPZ0f5Fi4Z+KHWzo/3HFveoSoAAAQIECBAYXEDgPjipBgkQIECAAAECBAgQIECgg0CC9uxoP7S4N0H7sZRzi3tUJUCAAAECBAiMJiBwH41WwwQIECBAgAABAgQIECBQIfC7UidBe3ao114/X+t/X3uDegQIECBAgACBKQQE7lMoewYBAgQIECBAgAABAgQI3AskaH93Dc7zec2VoP1YyqmmsjoECBAgQIAAgakFBO5Ti3seAQIECBAgQIAAAQIECDQ72muD9l8L2cdr2E6PAAECBAgQIDBbAYH7bKdGxwgQIECAAAECBAiMIrArrf6+lM9KSdi5v3lKvpfSXHkB5ftSHNsxylRsstEvy6iPd+vsLYgmaE/Y/ssmxQyaAAECBAgQWJSAwH1R06WzBAgQIECAAAECBFoJJFD/Yyn7UhKw52PbKyHnv5dyaXuj+gRuBNoG7bn1m1KOpQjaLSUCBAgQIEBgMQIC98VMlY4SIECAAAECBAgQeCjQBOxflJr7UnYP76ir8OdSzS73Oiu1/lkg6zDHx+Rj7fVdqXgs5VJ7g3oECBAgQIAAgbkICNznMhP6QYAAAQIECBAgQKCbwK7cll3sCdlTxrgE7mOorrvNfRle26D9h3LPoZTLummMjgABAgQIEFizgMB9zbNrbAQIECBAgAABAmsVyE72HNGRcDJHxYx9/ak84Dz2Q7S/CoFdGcWHUtr88idB+9EaW8X8GwQBAgQIENi8gMB980sAAAECBAgQIECAwIIEErKPuZP9NQr/f8OCFsmTupqgPTvaDy2e/1Op+5WgvYWYqgQIECBAgMDsBfwfzrOfIh0kQIAAAQIECBDYuECCzHfXIDM724e4sqP4ci0/lo95KeVfS3mp/U/l6212Kw/RP20sRyBrJkF7gvPa6+dS8VjKqfYG9QgQIECAAAECSxEQuC9lpvSTAAECBAgQIEBgawLNkTH7ngPPLuKE6udrubzQXsLPhKYvXc5v7zkBK709QXt+EZSgvfYXQYL2lS4GwyJAgAABAgT+V0DgbjUQIECAAAECBAgQmI9AE2IeSpd2Hbv1a7nv+2s5l4/Zvf7WlTPg//5KhQSkXfvRsftuW4BAs6O9NmjPmvxYynEBY9NFAgQIECBAgEAvAYF7Lz43EyBAgAABAgQIEBhEIKF3c2xMlwYTjN+G7LVtJDBN2L575QYvS62V3Ea9/NXF8Y31cq/QBO0J2x/94mcbgkZJgAABAgQIrF5A4L76KTZAAgQIECBAgACBGQt8XvqWIzn2HfrY7GRPmJkjY9peCdv/VkrC/peunPPepV9t+6H+/AXaBu0Z0TelHEsRtM9/fvWQAAECBAgQGFBA4D4gpqYIECBAgAABAgQIVAgk6E7QnjByV1H/vkpeYnoqJTva+1wJ2/evNJAwP30TlvYRXv69WR8fSnntlzIvjfC769q+LH/4RkCAAAECBAgQaC8gcG9v5g4CBAgQIECAAAECXQS6vGSyeU4C8FMp2c0+RJD5bWnn8MYgHCXTZYbXc8++DCXntOdj7ZW/iMiaGmJ91j5TPQIECBAgQIDA7AQE7rObEh0iQIAAAQIECBBYmcCujCfhZcLItldCzNO1tL33tfqPwvb35cbjUA/TzqIEspM9O9r3LXqdNZr1cm5xj6oECBAgQIAAgdUKCNxXO7UGRoAAAQIECBAg8GSBhJZtdwk3Xc6xHF3PZn9t2Nlh/9dS0q/Xrjz38GQ3j59eYHddq23mXtA+/Tx5IgECBAgQILAAAYH7AiZJFwkQIECAAAECBBYlkBdMJrjct+z1z6X+qZQE7UOfnZ6dywnbd2/0SdjecsJWUD3roe1fX2SdHq9rdQUEhkCAAAECBAgQGFZA4D6sp9YIECBAgAABAgS2KdDnRag/FbKE7KeR6L4o7eYYmfTxtSt9aPNizJG6qtmJBLIWErR/1eJ5gmpWyTgAACAASURBVPYWWKoSIECAAAEC2xUQuG937o2cAAECBAgQIECgv0CfF6GOfSTHrgwv53EncH/rSti+L2XoXfX9dbUwtECX9ZoX9uYXQsehO6M9AgQIECBAgMAaBQTua5xVYyJAgAABAgQIEBhbYFce0PYojqZPObol4eVlxE6+uz7jrV3tefynUg6lCNtHnIwZNN0naB/jiKMZkOgCAQIECBAgQGAcAYH7OK5aJUCAAAECBAgQWKfAvgyrOaO9zQibXcJjh5e70qkcH5N+Prq+KRXaHCnyqD3fn6dA7S9fmt5PtVbnqaVXBAgQIECAAIGeAgL3noBuJ0CAAAECBAgQ2IRAAuzsaM/HNlfOvW7OZx97F3n6d6zoXALVBO2nirqqLFcgvxjKeti1GMIUf33RojuqEiBAgAABAgSWJyBwX96c6TEBAgQIECBAgMB0As1u9n3LR479ItTb7qRv2dVeE6ymX4dSfmw5HtWXIyBoX85c6SkBAgQIECCwQgGB+won1ZAIECBAgAABAgR6C3QJLfPQsV+EejuwBOy1x8fkvvelHHvLaGCuAl3WbM7wz187XOY6KP0iQIAAAQIECCxNQOC+tBnTXwIECBAgQIAAgTEFuoSW6c+UR3HkBZg5Pqb2/PX8EiB17Wofc+U8r+39dT3kY+015S+GavukHgECBAgQIEBgFQIC91VMo0EQIECAAAECBAj0EEiA/Xkpx1J2LdrJWeinUnJG+6XFfX2q5hcCeV76/OhK/zKm1HetT2BfhtT2vQKC9vWtAyMiQIAAAQIEZiYgcJ/ZhOgOAQIECBAgQIDAZAIJrd+Vkt3fNQF207EE2QmxU8Z+EWrzzISrH0r5rFInweqhlEtlfdWWI5C1IGhfznzpKQECBAgQILAxAYH7xibccAkQIECAAAECBP47XO8StP9c7juWcprQMAF7gvaErDVX+phfIHxfU1mdRQlkDbQN2p+xZheFqrMECBAgQIAAgaEFBO5Di2qPAAECBAgQIEBgrgJLCtp313D1UInZ7Lo/VtZXbTkCgvblzJWeEiBAgAABAgR+I3C3CAgQIECAAAECBNYusKSgPX3NjvbaoD1zN+ULW9e+VuY0PkH7nGZDXwgQIECAAAEClQIC90oo1QgQIECAAAECBBYn0DVoz/nnOZ99ymNZuvTVCzAXtySrOrwrtXJ0zKGq9j8qOTqmBZaqBAgQIECAAIExBQTuY+pqmwABAgQIECBA4BkCXcLr9PNZAXbC1TYvbs3xMal/egauZ44msCsttw3an/EC39EANEyAAAECBAgQWIOAwH0Ns2gMBAgQIECAAAECjcCX5ZNjKQkva69nBe1t+ypcrZ3RZdXLWhW0L2vO9JYAAQIECBAg8KqAwN3iIECAAAECBAgQWINA2/A6Y15K0J6+vi8lx9z8sobJMob/FtiVImi3GAgQIECAAAECKxMQuK9sQg2HAAECBAgQILAxgbUH7V6Iur4FLWhf35waEQECBAgQIEDgfwQE7hYDAQIECBAgQIDAEgXWHrR/KpOSc9ovS5wcfX5R4LPy1XelHFr4OEaoBZaqBAgQIECAAIE5CAjc5zAL+kCAAAECBAgQIFArsC8VP5SS8LL2WtLRMc/qa62leu0FsmZzdEw+1l6C9lop9QgQIECAAAECMxMQuM9sQnSHAAECBAgQIEDgRYEuoeWzwusl7b633MYT6LJmBe3jzYeWCRAgQIAAAQKTCAjcJ2H2EAIECBAgQIAAgY4C2cmeHe0JL2uvn0rFHMdyrr1hoHqC9oEgF95M1qod7QufRN0nQIAAAQIECHQVELh3lXMfAQIECBAgQIDAmAK7a2h5aPGQn0vdYymnFvf0rfq70sDn1+emz7XXs3bf1/ZPvfYC+YVL1uu+xa12tLfAUpUAAQIECBAgsAQBgfsSZkkfCRAgQIAAAQLbEdiVoWZ3cILL2utZQXtegJmd9Anday9Be63Ucup1+csGQfty5ldPCRAgQIAAAQKtBATurbhUJkCAAAECBAgQGEkgoXXbAFvQPtJkaPahQNe/bBC0P6RVgQABAgQIECCwbAGB+7LnT+8JECBAgAABAksX6BK0J7Q8lvJxwsF36We6Z0f7hJM0waO6rgNB+wST4xEECBAgQIAAgTkICNznMAv6QIAAAQIECBDYpkDbozieEVp2DVgF7eta07synLZHHUXgGWt2XfJGQ4AAAQIECBBYmIDAfWETprsECBAgQIAAgRUI7MsYvi0lIWbt9b5UzI72X2pvGKBefiGQZzqjfQDMhTaRtdq8DLXNEJrjjr6feM226aO6BAgQIECAAAECIwgI3EdA1SQBAgQIECBAgMCLAgkvs0s4H2uv70rFYymX2hsGqNd2530eaUf7APAzaqIJ2dus1XT/Ge8VmBGbrhAgQIAAAQIECAjcrQECBAgQIECAAIGxBXblAW2P4xC0jz0r2r8XyF8yJGj/qpSs2TZXfuFyupY296lLgAABAgQIECCwMgGB+8om1HAIECBAgAABAjMSSID5oZRDiz49Y6f4/trPz2bezxbdU7WFwK7UfXddp22OD8ojnrFeWwxNVQIECBAgQIAAgakFBO5Ti3seAQIECBAgQGD9Al1eNPpTYcnO4vOEPPvyrLZH3AhYJ5ygkR+V+U/Q/kWH5zzjLzA6dNMtBAgQIECAAAECUwsI3KcW9zwCBAgQIECAwLoF2r5o9BlnXu/KFOSlrQlcay9Be63U/Os1x8a0+YuGjOrXUk6l5EW6l/kPUw8JECBAgAABAgSeISBwf4a6ZxIgQIAAAQIE1iewL0NKiL2rHFrCy+M1vKy8pXe19K3tWfLP2Hnfe6Aa+BeBzH0TtLc9Nia/FErIfirlF7YECBAgQIAAAQIE3hIQuFsfBAgQIECAAAECfQSySzjntO8rG0nQnvAyZarwMgFrgvYcWVN7PWPnfW3f1KsXyLpM0H6ov+V/anoRagc0txAgQIAAAQIEti4gcN/6CjB+AgQIECBAgEA3gV25re1u8anPve5ylrygvdt6mNtdXY+NyTiyTk+lnOc2KP0hQIAAAQIECBCYv4DAff5zpIcECBAgQIAAgTkJdAmxs1P4UMplwoHkZZjHUmqPD2l23uce1zIFdqXbXY+NcT77MudcrwkQIECAAAECsxMQuM9uSnSIAAECBAgQIDBbgbYvRH3Gi0bTx4TmCV9rrmcccVPTL3XqBfalatdjY5q/aPi+tDHVEUf1I1OTAAECBAgQIEBgcQIC98VNmQ4TIECAAAECBCYXSKDZ5oWozziWpW0fg/hNKUdB6+TraYgH5i8XPr/O365Dg/llUN4jkKDdRYAAAQIECBAgQGAwAYH7YJQaIkCAAAECBAisTqDrC1GPE0rsy7Nylnw+1l5TnyVf2y/1HgvsrvP9RflYe1xQ02r+miEBe9bn5fGj1CBAgAABAgQIECDQXkDg3t7MHQQIECBAgACBtQskyPxQyqHFQKfeLb679jHBa+31jLPka/um3tsC2c3+VSn7DlD5i4vsZj+V4tiYDoBuIUCAAAECBAgQqBcQuNdbqUmAAAECBAgQ2IJAdosn2KzdPfzpWv8yEc6uPCd9PLR43jPOkm/RPVVfEchcN2ez5/O2l2Nj2oqpT4AAAQIECBAg0FtA4N6bUAMECBAgQIAAgVUItH3Z6NQhdn4B8K6UYwvt7Gw+lHJucY+qzxfYly50fQmqY2OeP396QIAAAQIECBDYtIDAfdPTb/AECBAgQIAAgf8+oqPNGehTvxC1Cdrb7Lqfuo+WUX+Bvi9BbeY8Z7Q7Nqb/fGiBAAECBAgQIECgo4DAvSOc2wgQIECAAAECCxfYXYP2Q+U4snM452AfK+sPUS27nPPM2uNtntHHIca55TbyYt785UKXl6DGLS/APZVy3jKisRMgQIAAAQIECMxHQOA+n7nQEwIECBAgQIDAFAJddown1MwO86l2Drc93qYJ2hPOT9XHKeZqzc9ojozZdxhkdrMnZE+5dLjfLQQIECBAgAABAgRGExC4j0arYQIECBAgQIDA7ATaBtk5p/0wYai5L8/6UEp2PddeU/8yoLZf6v2rwK58KbvZs6Zq/2rhtpWsx9O18CVAgAABAgQIECAwSwGB+yynRacIECBAgAABAoMK7Etrbc9pTyh6HrQXrzfWtn9pKUH7sZTLRH30mO4CfXazNy9BzV8v/Ni9C+4kQIAAAQIECBAgMI2AwH0aZ08hQIAAAQIECDxDYFcemqD9UPnwhJvHUhJuTnFlJ3t2tO9bPCy7nHO8jfC1BdoTqmbtNUF7Pm97eQlqWzH1CRAgQIAAAQIEZiEgcJ/FNOgEAQIECBAgQGBQgS7ntH9TenAsZYoz0BPAtvlFQHAStKd/50GlNDa0wOelwUMpeQlql8tLULuouYcAAQIECBAgQGA2AgL32UyFjhAgQIAAAQIEBhFoe077p/LU7Bi/DPL0txvZlW+3Ddqz0zn9+36C/nlEN4HMa9/d7KfShpfedvN3FwECBAgQIECAwIwEBO4zmgxdIUCAAAECBAj0EGh7PMtP1yD73OOZtbdmx32C9gTntVdzpMip9gb1Jhfou5s9v+zJ/PplyuRT54EECBAgQIAAAQJjCQjcx5LVLgECBAgQIEBgGoGE2TkH/VD5uJzTnuA7QefYV5ejbaY+R35sg7W1vysDGmI3e9bfZW04xkOAAAECBAgQIEBA4G4NECBAgAABAgSWK9DsGk+wXXO9L5WmOLaja9Cevk3Rvxordf5ZoO9u9pzBf7oWtgQIECBAgAABAgRWKyBwX+3UGhgBAgQIECCwYoG8kDK72neVY0zYeSjlUlm/azVBe1e5ed6X+cxu9vxFRO1aux1J/lrhVEp+iTL22punoF4RIECAAAECBAhsTkDgvrkpN2ACBAgQIEBgwQIJPb8tZV85hpyDfijlXFm/T7UEswlWa3fb51nflXIs5dLnwe4dXCDrqzk2pkvjdrN3UXMPAQIECBAgQIDAKgQE7quYRoMgQIAAAQIEVi7Q9qWjU56DnmA2ofmuxRwI2ltgTVQ189fnbHa72SeaKI8hQIAAAQIECBCYt4DAfd7zo3cECBAgQIAAgbY7x7+5BuC/jEwnaB8ZeKLm+57N/lPpZ/6y4TRRfz2GAAECBAgQIECAwKwFBO6znh6dI0CAAAECBDYssC9jzzntn1UaTHVOe5egPX07lnKuHItq4wpkTTW72dscAdT0KrvZvy8lQfuP43ZV6wQIECBAgAABAgSWJSBwX9Z86S0BAgQIECCwfoFdGeLXpRwqh5pz2vNSywSgY16C9jF1x28766rZzV77S5z7XjW72bPWxv4LivFFPIEAAQIECBAgQIDACAIC9xFQNUmAAAECBAgQ6CiQoD3hec2u4+wyzg7jY8dn1d4maK+Vml+9rKOE7F9cS5ce2s3eRc09BAgQIECAAAECmxUQuG926g2cAAECBAgQmJFAAtEcH7Or7NMULx0VtFdOxgyr3YbsNb+8eWkIdrPPcGJ1iQABAgQIECBAYP4CAvf5z5EeEiBAgAABAusVSMD+bSn7yiFOcRa6oL1yMmZWre+57BlOdrOfrsXZ7DObYN0hQIAAAQIECBBYhoDAfRnzpJcECBAgQIDAugSy67g5PqZmZAlCc9RMwtAxrubokWNpfNfiATk/PveM1a8WXdlk1SZkz19ItJm3e6xP5Qs5l908bnIZGTQBAgQIECBAgMCQAgL3ITW1RYAAAQIECBB4LJAd5Dl7vfaoj/fX+mO8pDJ9eFdK7bnxzegE7Y/neawau9Jw35efpm+Zw6zDBO2XsTqrXQIECBAgQIAAAQJbExC4b23GjZcAAQIECBB4lsC+PDi72vOx5srxMYdSLjWVW9YRtLcEe3L1zFd+UZP1kF3tXS9HxnSVcx8BAgQIECBAgACBSgGBeyWUagQIECBAgACBjgIJS/NC1ISlNVd2HqfuuaZyyzq7Uj872tN+7Q77PMKO9pbQA1RvjvnJcTEpXa+E7NnF3pSu7biPAAECBAgQIECAAIEKAYF7BZIqBAgQIECAAIGOAs057TXhdoLRHPFx7Pist27blW+mL4eWbf907dOp5X2qdxdojovpE7Ln6c257AnaxziOqPsI3UmAAAECBAgQIEBgxQIC9xVPrqERIECAAAECTxPYlyd/W8qusgfflXo5R33oYDT9yI72tuFtjrM5lnKu7L9q/QQyTzkyJvNU88uZ156WX5CcrmXotdRvhO4mQIAAAQIECBAgsBEBgftGJtowCRAgQIAAgUkEduUpOT6mNuBOQJqg/Txw75rzvvct2xW0twTrUT1rpZmnfN71akJ2Lz/tKug+AgQIECBAgAABAgMKCNwHxNQUAQIECBAgsFmB5iWkx0qBHB+ToP1UWb+mWvNizbS7q7nhpo6gvSVYx+rNueyZoz4vP82Z+gnYs35+7NgXtxEgQIAAAQIECBAgMIKAwH0EVE0SIECAAAECmxLIbvbsat9VjvqbUu9YylBHfuS5XV6Emu7mKJucGy+0rZy8jtVyLnvWyaHj/bmtefmp+eqB6FYCBAgQIECAAAECYwsI3McW1j4BAgQIECCwVoFdGVjOad9XDjC7yLOzeahwO8/tcj57upug/VjKpbLvqrUXyProe2RME7JnN3uKiwABAgQIECBAgACBmQsI3Gc+QbpHgAABAgQIzE4gx4J8XUrC85orx3+k7lCBaULcLkeSJLzN7uhTKZeajqvTSaDr+fm3D/t0XS+ZKxcBAgQIECBAgAABAgsSELgvaLJ0lQABAgQIPFFgV579+xeen6+n3F+vff22XoLrPudYp63sFr89miWf3+4gv/3vBN+XnoYJUxNap++PribgTv2+x8fkec2xMS95v9WXjLsJ2vv249GYt/r9zEnXY30as7z8NPOUX8yYp62uJOMmQIAAAQIECBBYvIDAffFTaAAECBAgQOChwB9varwUcu/vWhgiCH/YqSdXuA3qz9e+NB8TfN4HnvnFQM5pv7d6bRjZoZxd6Jee49yV+7Ob/tChnRxhc7qWDre7pUIgZ7Nnbr6oqPtSleblpwna+66Vjl1wGwECBAgQIECAAAECQwoI3IfU1BYBAgQIEBhPIIHvb6/N3wfi+d7tjuv9eN3YVMsJQJsQtNY0AeqhlHNPqQS5Cexrn3v7uJzPfhqgDz2HsNrb87PWHOuz6zDK5lx2c9QBzy0ECBAgQIAAAQIE5i4gcJ/7DOkfAQIECKxR4DY8vw3Lbz/fwi7ztc1tgu5Dj0FlzhO0H0tpG+QmxE2Aa6d0jwl4cGvmJH9tkN3sNUcK3TfX/MWBI2PGmyMtEyBAgAABAgQIEHi6gMD96VOgAwQIECCwAoHbI1v2N+N57fMVDNkQXhHIUTQ5ruZ8LQlZH127UqHr+d/OZ3+k2//7ff7awC9C+vtrgQABAgQIECBAgMCiBATui5ounSVAgACBiQSye/UP12clDE3Jdfv5/TEuE3XNYxYocCp9zu73813f9+W/E7R3Of87QX7zgs0Fksy+y33+2iCDyxn+mffsZncRIECAAAECBAgQILAhAYH7hibbUAkQIEDgN81RLrfHteyKS0quPaNXBbJTNzu3769L+UJK7ddv6zW7wfuw3//i4/4ontv5vT3Kp88zu957Ljf+uZRmx3T60/ZKcJ+g/aW5aNuW+v8qkPXS9a8N7Ga3oggQIECAAAECBAgQ+I3A3SIgQIAAgTUINEe63IatTRDrLPTf/Ob+WJMEv7dXwtuE37fXfZ01rJPbMeyv/3EoH/MCzDlfCXITsqfcz9Oc+72kvmU9ZB1kPbS9frrOzantjeoTIECAAAECBAgQILA+AYH7+ubUiAgQILAmgSZI35VBpeTaXz/efm1NY35tLDmr+3LzzfPN5/eB+UsB+haM2owx6+dDKbXHuTS/tLg9bqjN87rUFeR2UWt3TxOyN/+utLk7f21wKuX2Z7HN/eoSIECAAAECBAgQILBCAYH7CifVkAgQILAQgSZMb3aiJwBN2cKO9Nvw/FLGnJLr/ogVQd44i/nr0uxX17X26AnZXZ66p7uKzXrdX9dt/vv25bmP2n3r+zn/O7vZzX8fxdfv7XM+e/PXBlkPzc/tOL3UKgECBAgQIECAAAECixQQuC9y2nSaAAECsxfYWpiencjNUR+3u8tf+3z2E7jSDu7LuL4tZVc5vm9KvePN3D66Le222TV/257zvx/p9v9+gvacz177y5bbJ/prg/7+WiBAgAABAgQIECCwCQGB+yam2SAJECAwqMBWwvTmCJHbXee3n1+Kaopr/gK70sU2QXjm/tBifvelbtfzv/PXDsdSvi/F+ezjrKXMf/6qIXPa9vLXBm3F1CdAgAABAgQIECCwcQGB+8YXgOETIEDgTqA5n7o51uX+49LBbo9yaXaf34bozj5f+gz/c/+bHc3HymFlfWT3c8LvR1efY0nSdkL9HBtT86xHffH9lwV25ctdgnZ/bWBFESBAgAABAgQIECDQWUDg3pnOjQQIEFikwFoD9dsjXc7XmbmUjym5mq8tctJ0upNAXoaaXe27yrvfl3oJwB/tMk97OZbkUEp+ntpe2TGdUL9Zm23vV/+xwL5USdCej22u/MIla+BUsQ7atKsuAQIECBAgQIAAAQIbEhC4b2iyDZUAgU0IrC1Qb4L0l3ah335tE5NrkFUCu1Ir57Tvq2r/Y6f5oZTLg/qfl+8nKK9t96XmsnM6/XsU6ld2XbU7gcxNl6Dd+eyWEgECBAgQIECAAAECgwkI3Aej1BABAgQmEVhToN6E6Qk6U24D9PMkmh6yJoExjo/ZFaDmbPZ83vfKLvpj30bc/y8C+/KVLkF7ftmS+fDvjUVFgAABAgQIECBAgMBgAgL3wSg1RIAAgcEEmlB9V1pM+ayUfC2h0lIuYfpSZmod/WxzfEx2mefYkOMbQ8/PWo6NSbtDXTmuJD/PruEEMk9dgvbvrvN/Ga4rWiJAgAABAgQIECBAgMA/BATuVgIBAgSeI5Dg7fel3IbpzQtKn9Oj+qcK0+ut1BxXID9HbY6Peev89Pz8ZTd7jo1Ju0Nf/14azEt5Xf0F9qWJtkG7F6H2d9cCAQIECBAgQIAAAQIVAgL3CiRVCBAg0FEgYfpvS0k41ITpSwjVm0D9fB33/ceOHG4jMJhAl+NjDuXpzVq+7Uh+PptjY7p0MCH+H0rZvXHzf5TvZVe9q59A5qpL0B77mhfi9uuduwkQIECAAAECBAgQIFAEBO6WAQECBPoJ/PF6e4KgJkzflc9T5no1gXp22zbnpt9+nGu/9YtABBKOJzzNz9uj67XjY/Lz2eds9qbd70s7OXrm8EZHcnzJW99/NAbf/8e/p23+kiFmzRwJ2q0gAgQIECBAgAABAgQmFRC4T8rtYQQILFQgYU9z/Es+z8715iiYOQ5JoD7HWdGnvgL5mftQyr6yofvjYxLQf17KoUUb94/KSzZP15L2/nb9t+C1LuVnMf3NL7Rc7QXy7212tGfOaq+clX8sJb8M4V6rph4BAgQIECBAgAABAoMJCNwHo9QQAQIrEMhu9WaX+u3Z6nMbmkB9bjOiP2MK5GcyoWvOVq+5ErgeSjlfK+/Lx+xm/+L6813Txm2d7JROeHss5XL9Rv59SNj+1i57YXtb6f+t3/bIoNzZBO2n7o91JwECBAgQIECAAAECBPoLCNz7G2qBAIFlCSTIyXnLt4H6rvx3ypyu7KS9P+7lUr6W4iKwFYG2x8ccC0yOEMnPc58jY+KbwDxt3e+UTvif57x1Cdu7r9Ac0RPfmiOD8hRBe3drdxIgQIAAAQIECBAgMIKAwH0EVE0SIDALgdtgfVd6lIB9P4ue/W8nbkP1S/lyyo+lOAZhZhOlO5MLtD0+JuekH0vJX6lkJ3tKl6vZzZ6gPT+Lt1f+Hak5Rzx9yW58P8ftZiD/Psc3zjXXa+fz19yrDgECBAgQIECAAAECBEYTELiPRqthAgQmFEg4l13rCWoS2uRjbWgzZjcTCCW0u1xLE6afx3yotgksWKDt8THZSd4c7XLoMe7XdrM3TSbATxj8aNf1N6VO7dE3Pbq7qlvzb3XNLzKaQXsZ6qqm32AIECBAgAABAgQIrE9A4L6+OTUiAmsWSDCTl5fuS0nInv/Ox2deOc7gUsp9mH5+Zqc8m8ACBdocH9MML7vIH4Xgr1HkZzfHxWQ3e36GX7rSdsLgmh3zfyn1Tgt0f1aXY9scH1Pbh/fX+fLXA7Vi6hEgQIAAAQIECBAgMLmAwH1ycg8kQKBSIEdD3Ibq+bxrsFb5yDer5fiXy7U0u9bvj5wY4jnaILA1gbbHx/T1yZEvCdpT3rpqfwGQ4D6BvH8P6mdmX6q2OT6mOTIo/wa7CBAgQIAAAQIECBAgMGsBgfusp0fnCGxGoDkSJiFMPn/WrvXb3eoJdm6Pg9nMZBgogYkE2h4f06dbj46MuW17V/6j9oiTT6XuoRQ7rutmJ3P+4WpWc0d+0Xks5VxTWR0CBAgQIECAAAECBAjMQUDgPodZ0AcC2xJowvUmWN8/YfgJ3y6lJFC/PwrmCd3xSAKbE6jdPd4HJmd9n66lZvd52yNO/qO0neNoXHUC+SuAmnPw01p++flVKY/+CqHuyWoRIECAAAECBAgQIEBgQgGB+4TYHkVggwLPDtfvg/Vmx/oGp8KQCcxCYOzjYxKyN8fFtAlr8wuAYym7CqX8u3IopSbEr2huE1XilbD90dW8EDVz4SJAgAABAgQIECBAgMAiBQTui5w2nSYwS4HsDs256/tSEqrl41RXQpqEX+dSLteSz10ECMxDYOzjY3K0SwL2U8vh5t+pr1v8e5WXdh5bPmPr1Q8FoCZszxxmV3v+DXcRIECAAAECBAgQIEBgsQIC98VOnY4TeLrA7bnrCa12E/WoeXlpcxxMcyTMRI/3GAIEWgqMdXxME7InaG973uQL5wAAIABJREFUhnr+vUrQfqgci13tlVB31eL7KGx3fEw3W3cRIECAAAECBAgQIDBTAYH7TCdGtwjMUOB+93p2rI553e5ab46CcYTDmOLaJjCswL4012b3eM3T8wu3UyldQva03/acdkec1MzKy3XyS9m/Xc1fa+Wb8o1jKW1/YdK9V+4kQIAAAQIECBAgQIDAyAIC95GBNU9goQK70u8/lLK/lgQnY1734bqz1sfU1jaBcQTy70Z+MZeXY+bfjqF+KZeQvTmX/dKx603QniNLavvliJOO2Nfb/l4+vva/Hfk3P+vk3O8R7iZAgAABAgQIECBAgMD8BATu85sTPSLwDIEEUJ9fQ7IEZbsROyFcHxFX0wQmFBjrWKn8G5EgtgnZ++5+bvNC1PDliJPDtQ8Tcq7qUR/LaN69MqLMb/53xl8srWrKDYYAAQIECBAgQIAAgUZA4G4tENiuwG3APtYOduH6dteXka9PYMxjpfJvRROw5+MQV9ugPX04lpKw2NVdYF9uzVEyL10xzv/eXLo3704CBAgQIECAAAECBAjMW0DgPu/50TsCQwrsSmPNcQ/5U/4xrrxYMLsWz9ciVBlDWZsExhfIX73k34uEo/trGfqp2UmecP10/XdjqPbT3w/Xvte2+b5UTNDedzd97fPWXC9he+bgpevP1zlf8/iNjQABAgQIECBAgACBjQsI3De+AAx/9QK7MsLsZD+UMsYu9pytfC6lCdmFVatfUga4UoH8W3G7g32Mfy9uj4rJvxuXgS33pb22L2n9rtxzHKEvAw9tMc3lf2u+faW3ORN/rF/2LgZIRwkQIECAAAECBAgQWL+AwH39c2yE2xNozmNPsDFkuNGEZQnKmoB9e7pGTGAdAvfh+m7EYSXUzu7xsc7s3pe22wbt+WXhsZT8e+YaTuA/S1MvraX870e+7peyw1lriQABAgQIECBAgACBmQoI3Gc6MbpFoINAwoyETgnZE7r3vXI8zLmUJly/9G3Q/QQIPEUgu9Wb42Hy+Ri7118aWP4N+er678gYA99f/83Lx9pL0F4r1b5e/rfnr6/c9pfy9VP7Jt1BgAABAgQIECBAgACB5QkI3Jc3Z3pM4F4gYdO7UvruZs95yudrybnKdiJaawSWJ5Aw/Q+lNMF6/n2Y+hr75aMZU9sd7fn37VjKaWqMDT0v/7uRI8zur9jvNuRgqAQIECBAgAABAgQIbFxA4L7xBWD4ixZIgJHQ6dBxFLdHxJxLG2Md99Cxe24jQOCBQP4NaML1ffk8IfsQf93SBz7Hx2RX+xi/sMsYBe19Zmfce//rlebtbh/XXesECBAgQIAAAQIECMxMQOA+swnRHQKVAodS70OHcC0he3YhNqXycaoRIPBkgWbn+q70Y1/KHML1W5Ixj4/JeAXtT16ADx7/1nEy/m/Nec+d3hEgQIAAAQIECBAgMLCA/ydoYFDNEZhA4NvyjEOL5wjZW2CpSuDJAtmhnl3rCZl3pUx95vq5PPP3pdQeUTXm8TExaBu0pz95QWvKGLvsn7w8Zvv443Wu7juYM/Mzjy4CBAgQIECAAAECBAhsRkDgvpmpNtCVCLwWarw0vBztYCf7SibeMFYpkDA94XY+JpScctd6ztXOMVIp52vZlY/5hV76UnONdXxMni9or5mB+dR57X+b3pcu5nsuAgQIECBAgAABAgQIbEZA4L6ZqTbQFQgkjPt7xTi+uQYcdndWYKlCYAKBP5Zn7K4lP8f5PB+nurLruwnWm4+3/z5kV31evHys7NBYx8fkhZs5/31f2Y9Us6O9BdaIVbN28kuS+0vgPiK6pgkQIECAAAECBAgQmKeAwH2e86JXBF4SeC3QeKR1fqFCQrf7QP6lr+U4ABcBAo8FdqVKs1s9nzdHwSTMnvrKz+3t7vXLGx3I0TF5H0T6/Oga6/iYL8uD8+9bTR+aPgraH83WtN/P/AncpzX3NAIECBAgQIAAAQIEZiogcJ/pxOgWgRcEXgs0psY63z0wwX3CvdvrUv4j5fbKERb3X5u6755HoI/ArtycUD0fU5ojYPZ9Gu15b3ab3+5ev/9ZfK359P/Zx8cI2ntO/oxuP5a+CNxnNCG6QoAAAQIECBAgQIDA8wQE7s+z92QCbQUSkCVM+23bG2dc/1L6lnJ71X6tOSZjxsPTtYUJ5GfsNlDPf9+WZw7n9liY/Iw0O9jb9mkOx8cI2tvO2vzrH0sXBe7znyc9JECAAAECBAgQIEBgAgGB+wTIHkFgQIHsqM2LUBMKul4WOL/w5Uv5Wsr99VLd1HGUzvpW1+7m56bZmZ6v3Za5jDq71rNeb3euD/FOhmcfH9MlaM9fxnws5VTKEAZzmeO19eNYBiRwX9usGg8BAgQIECBAgAABAp0EBO6d2NxE4OkCzYsF85JB1zQCLx2d0zz5/EoXLuXrKS9dCVUFiP3mLru1/3BtYlc+puRqAvV8P5/P9Wp2rTe71bNWXltLfcYQlzbHx3wq9Q8Drc9mR33+zWpznn2C9mMppz4Dd+9kApkrgftk3B5EgAABAgQIECBAgMCcBQTuc54dfSPwWKAJFPelahMy5uOajp15rLDOGucHw3r0/dz+1i8J3mp+6B3+u/Kwmr/KyDq+vZo13Xwt7aQs7WreX5A5a+YkIfvYv3Bpe3xM+nkopWZtPZoDQfsjoXV9/1iGI3Bf15waDQECBAgQIECAAAECHQUE7h3h3EZgQQL7F/pa+7U/Lmicukrg2QL5RcXlWhKo5/N8fMbV9viYHNtyHKCjgvYBEBfYRNaOwH2BE6fLBAgQIECAAAECBAgMLyBwH95UiwTWLPDSER27MuCU2+ulr9l5v+aVsZ2xNbv/z2XIzW71S/k8ZQ5XfvbaHh+T41769r9r0J6jlRL2n+aApw+dBY7lToF7Zz43EiBAgAABAgQIECCwJgGB+5pm01gILE/g/siQjKD2awkWa44pWZ6KHj9T4DZQTz/O1840H5/Zt0fPTuBZe1b6UMfHdA3a43y88X00Nt+ft0DmUuA+7znSOwIECBAgQIAAAQIEJhIQuE8E7TEECEwmsH/hSbvytZT766W6CRCbF3FO1mkPGl2geUFpHnS5lnx+vj65+Th6R0Z4QNZxdrW/tMbvHxeHoY6PeVfaOpbS5mWogvYRFsAMmsw6ELjPYCJ0gQABAgQIECBAgACB5wsI3J8/B3pAgMAyBF46Tic9f+3r+V4C0JSXLkfsDDPvzY702xfEXkrTKbnOwzxmlq1kbX0oJee111yfSqUhjo/5srRzfGNtv9QXQXvNDC23TtaDwH2586fnBAgQIECAAAECBAgMKCBwHxBTUwQIEBhQYP9GW2+F/Le31da7f9TQL8vN8SWXCpvzXZ28cDRBenPdhuoVza26yjOOjxG0r3pJ9RrcsdwtcO9F6GYCBAgQIECAAAECBNYiIHBfy0waBwECBAhsQWBfBjn18TGC9i2srH5jFLj383M3AQIECBAgQIAAAQIrEhC4r2gyDYUAAQIEViuwKyOb+vgYQftql9PgAxO4D06qQQIECBAgQIAAAQIEliogcF/qzOk3AQIECGxFoO3xMTmn/fuOODmGKEF72kjIX3s5o71Wap31jmVYjpRZ59waFQECBAgQIECAAAECLQUE7i3BVCdAgAABAhMJ7Mtzao+PSZfel/KxlNtz72u7uisVm6A9oXvtJWivlVp3vWMZnsB93XNsdAQIECBAgAABAgQIVAoI3CuhVCNAgAABAhMJJPDO8TGHyucl9E7dS2X922q78h8JSmuf1dybF+EeSzl1eKZb1ieQtSBwX9+8GhEBAgQIECBAgAABAh0EBO4d0NxCgAABAgRGEnh3DbJrdpkn9O56fMzn13v3LcchaG8JtpHqAveNTLRhEiBAgAABAgQIECDwWEDg/thIDQIECBAgMLZAgu/sav+s8kFdjo/pej57uvRTKTmu5lTZP9W2JXAsw7XDfVtzbrQECBAgQIAAAQIECLwiIHC3NAgQIECAwPMEpjg+ZncNQ78oH2t2zt9qOKP9eWtjSU8WuC9ptvSVAAECBAgQIECAAIFRBQTuo/JqnAABAgQIvCow9vExeQnqoZR9hzn4VO7JjvZzh3vdsj2BYxmyHe7bm3cjJkCAAAECBAgQIEDgBQGBu2VBgAABAgSmFUgAPtbxMbvSdhO05/O213flhoSnl7Y3qr9pgawZgfuml4DBEyBAgAABAgQIECDQCAjcrQUCBAgQIDCNQJfjY/JS1B8rupeXoB5KybExba9fyw3ZzZ7yS9ub1SdQBI6lCNwtBQIECBAgQIAAAQIECBQBgbtlQIAAAQIExhdoc3xMAvAE7acH3dqV7/fZze5FqOPP+1aeIHDfykwbJwECBAgQIECAAAECDwUE7g+JVCBAgAABAp0FPit3fltKPtZc35RKCS/f2mneZzd7+pBjY06lnGs6pA6BCoGsWTvcK6BUIUCAAAECBAgQIEBg/QIC9/XPsRESIECAwPQCOT4mAWR2qtdcP1zrvnZ8zK58P7vkD6Wk7bbXz+WG07Vc2t6sPoEHAsfrer+v9r58Id9zESBAgAABAgQIECBAYDMCAvfNTLWBEiBAgMBEAjnmJeeh1wTjbx0fk/uzmz2hfe0O+fshJsg/XctEw/eYDQocy5jtcN/gxBsyAQIECBAgQIAAAQL/KiBwtyoIECBAgMAwAgnFP5Syr2zuteNjcn9C+7wAtSa0v39cQvxTKQn9L5V9UY1AH4FDuTlHJ91fn67ruE/b7iVAgAABAgQIECBAgMCiBATui5ounSVAgACBGQoMcXzMroyrzwtQw2I3+wwXx0a6tC/j/NsLY82azPdcBAgQIECAAAECBAgQ2IyAwH0zU22gBAgQIDCCQJ/jY4Y4MsZu9hEmVZOtBV4L3C+lpX9r3ZobCBAgQIAAAQIECBAgsGABgfuCJ0/XCRAgQOBpAm2Pj/mu9DRnsf9SSs5lz3Exhx69z1Ed35dy6tGGWwkMKfBfrzTm/9YcUllbBAgQIECAAAECBAjMXsD/EzT7KdJBAgQIEJiRQNvjY34qfU/QfinlXSkJ2ncdx/Nzue90LWnPRWBOAq8F7v+3dDK/aHIRIECAAAECBAgQIEBgEwIC901Ms0ESIECAwAACbY+PyUtL/7OUBO7ZEd/1yu74Uynnrg24j8AEAlmff3zhOX+ydifQ9wgCBAgQIECAAAECBGYjIHCfzVToCAECBAjMVGBX+vVtKfvK/mU3748t6r/UbHbGJ7DPsTF2B1fCq/ZUgXN5+kuB+1/K109P7ZmHEyBAgAABAgQIECBAYEIBgfuE2B5FgAABAosSyPExOQbmOFGvc2RMAvYE7ZeJnukxBIYSyM/J1y809n7Cn6GhxqIdAgQIECBAgAABAgQIdBYQuHemcyMBAgQIrFggZ61/KGU38hh/Le03Lz89j/wszRMYU+BYGn8pcM+RSIcxH6xtAgQIECBAgAABAgQIzElA4D6n2dAXAgQIEHi2wK50oM3xMV37+0O58VSKI2O6CrpvbgL70qG/vdCprPV8z0WAAAECBAgQIECAAIFNCAjcNzHNBkmAAAECFQLZnZsXnOYomTGuHBlzupbLGA/QJoEnCuzLs18K3PM+g39/Yr88mgABAgQIECBAgAABApMKCNwn5fYwAgQIEJihQILC7GrfjdA3R8aMgKrJ2Qr81ys9839vznbKdIwAAQIECBAgQIAAgaEF/D9AQ4tqjwABAgSWIpCd7Dmn/TBChx0ZMwKqJmcvIHCf/RTpIAECBAgQIECAAAECYwsI3McW1j4BAgQIzFHgXenUsZQhj49xZMwcZ1qfphS4lIf9/oUH/ql87TxlRzyLAAECBAgQIECAAAECzxIQuD9L3nMJECBA4BkCn5WHZlf7fsCHf1faystPU1wEtixwLoP/4wsAAvctrwpjJ0CAAAECBAgQILAxAYH7xibccAkQILBRgexkb3a1D0GQ3ewfSzmV8ssQDWqDwAoEBO4rmERDIECAAAECBAgQIECgn4DAvZ+fuwkQIEBg/gL70sWhXoqa3ewJ2RMsuggQ+GeB/FzY4W5VECBAgAABAgQIECCwaQGB+6an3+AJECCwaoHsak/Q/kXPUdrN3hPQ7ZsRyF995C9J7q//KF/I91wECBAgQIAAAQIECBBYvYDAffVTbIAECBDYpMAQL0W1m32TS8egewgcy71fv3D/+/K1fM9FgAABAgQIECBAgACB1QsI3Fc/xQZIgACBTQn0fSnqr0WrOZv9sik5gyXQXyChusC9v6MWCBAgQIAAAQIECBBYsIDAfcGTp+sECBAg8N8COTrm81K+KiWBe5frp3JTE7R3ud89BAj8Yxe7wN1KIECAAAECBAgQIEBg0wIC901Pv8ETIEBg0QIJ2XM++6HHKHJsTIL2H3u04VYCbQV25YbfX2/KL4nyS6Nct5+/9N9tn/Oo/rlUSPk00M/AsbQjcH+k7vsECBAgQIAAAQIECKxaQOC+6uk1OAIECKxOYFdG9GUph1LyeZfLS1C7qLmnjcAfr5X3r3xs09ZUdU/lQTlr/dLjgcdyr8C9B6BbCRAgQIAAAQIECBBYvoDAfflzaAQECBDYgkBC9uxmT+ly5Wz270uxm72LnnteEkionp3p2ZW+u5b7HepLlDuWTn9Tyi8dOp97Be4d4NxCgAABAgQIECBAgMB6BATu65lLIyFAgMDaBBJivivlUEpz5EbbMf5QbjiVkrC9S4DY9nnqr0sg6+4PpTRB+r58nnWZsubrUgb3l1LOLQd5LPUF7i3RVCdAgAABAgQIECBAYF0CAvd1zafRECBAYA0COZv9UErX3ewxyJnUeYnqZQ0gxjCJQHas70pJuN6Urr/omaTDEzwk7zY4XX+ean6WjqWuwH2CifEIAgQIECBAgAABAgTmKyBwn+/c6BkBAgS2JJBgM8fGJCTf9Rh4zmc/lHLu0YZb1y2Q9ZUXlu5LaY6DyUfX2wIJ3/OXIvnZyhFN+e/bvwCIYUxf+vnN2fBHwAQIECBAgAABAgQIENiCgMB9C7NsjAQIEJivQAK7HBuToL3vbuKcO51Qz9Ex853vqXuW8Lc5EmZfPp/LGetNYB2Py7Xcf57/Tqg91nrOz9vh+jPz25EnRuA+MrDmCRAgQIAAAQIECBCYj4DAfT5zoScECBDYmkCOnhgiaP/pGhwmnHRtVyBhehOuP/tImKzJBOVNYN58vJSvpczpSvD+sZT8hclY159Kw+exGtcuAQIECBAgQIAAAQIE5iQgcJ/TbOgLAQIEtiGQYO9Yyq7ncLNLOO0kLHRtS+A+XN8/Yfg5vuhSSsL024/5fIlXDE+l5LidIa/88sGRPUOKaosAAQIECBAgQIAAgVkLCNxnPT06R4AAgVUJ7Mpovi0lwV7f64fSwKGUS9+G3D97gbzMtNmxnjU0xPppM+gExllnCdabnernNg0srG5+ro6lDBG8+zld2OTrLgECBAgQIECAAAEC/QUE7v0NtUCAAAECjwW+KFUStvc9pz272hMI5uWNrnUJ7K4h7758TMCe/55yZ3SzY/1cnnu7a31dyvWjaV6Cmp+3HNXT5vp0/Rk9tblJXQIECBAgQIAAAQIECKxBQOC+hlk0BgIECMxbIGe1HwfoopeiDoA4gybyS5fmrPVd+bwJdqfsWnatNzvWb3euT9mHJT0r85RfmjXzlY/NDvjsYm/Oqz9fXcd60euSzPSVAAECBAgQIECAAIGNCgjcNzrxhk2AAIGJBPJS1A89n5Wdx4dSEua5liOwK11NKHu7Wz2f9/0rh7YCCYTvw/W2bahPgAABAgQIECBAgAABAgSqBATuVUwqESBAgEAHgX25528d7ru95X35j2PPNtw+nkAC9N+WkrnOdf9xvCe/3LJwfWpxzyNAgAABAgQIECBAgACBfxIQuFsQBAgQIDCWwP8rDXfdzexli2PNSl27eVFprsxfc4767e70fV0zo9XKWf7ZtX6+fmzOXB/tgRomQIAAAQIECBAgQIAAAQI1AgL3GiV1CBAgQKCtQALZLrvbE6QeS/nY9oHqPxRodqOnYhOe3wbqu/L1lLld9y8zFa7PbYb0hwABAgQIECBAgAABAgT+R0DgbjEQIECAwBgCx9JoXpba9kqY2ryAsXnx4qV8LSVXE762bXct9ZsXjjbjuT8TfX8z0F35PGVJV/6yIXN9e+a6F3AuaQb1lQABAgQIECBAgAABAhsXELhvfAEYPgECBEYSyA71dyO1fdtswtmU5rr/73z9pa/l60OE97e7xmuGu3+lUtuv1zxrznV+us5LE6xnjvK5iwABAgQIECBAgAABAgQILFpA4L7o6dN5AgQIzE4gO7C/LeWL2fVMh54h0OxYbwJ1wfozZsEzCRAgQIAAAQIECBAgQGAyAYH7ZNQeRIAAgdULZEf7sZSuL0pdPdAKB9j8lUCC9NvSHA20wiEbEgECBAgQIECAAAECBAgQeF1A4G51ECBAgEBfgV1pILva930bcv9sBHLkS3N2+vnaq0v5mJJLoD6bqdIRAgQIECBAgAABAgQIEJiTgMB9TrOhLwQIEFieQJtd7Z/K8E6l5Nzz3bW0PQN9eULz6fFtiH4p3UrJdb5+bF5WO58e6wkBAgQIECBAgAABAgQIEFiYgMB9YROmuwQIEJiJwK7046+lJDB/dOXYka9K+f6NijmG5rat/U3dfL05pmbrAf2vxeL25aKX8t8pzXW++VyA/mhl+j4BAgQIECBAgAABAgQIEBhYQOA+MKjmCBAgsAGBQxnjh1Jqzmp/X+p9LKU5nmRontswPm3f/3e+truW+2fn67/v2aHbXeM1TZ1fqdT26zXPUocAAQIECBAgQIAAAQIECBCYWEDgPjG4xxEgQGDBAgnYc1b7FxVj+KHUya72293YFbepQoAAAQIECBAgQIAAAQIECBBYroDAfblzp+cECBCYUiA7xxO2PzpCJkeeHEvJrnYXAQIECBAgQIAAAQIECBAgQGBTAgL3TU23wRIgQKCTQHa0J2x/dIRMdrUfSrl0eoqbCBAgQIAAAQIECBAgQIAAAQILFxC4L3wCdZ8AAQIjCyRAT9j+1mVX+8iToHkCBAgQIECAAAECBAgQIEBgGQIC92XMk14SIEDgGQI1YXteGpp6zmp/xgx5JgECBAgQIECAAAECBAgQIDArAYH7rKZDZwgQIDAbgZzV/rdS3jpG5pvy/bwY1UWAAAECBAgQIECAAAECBAgQIFAEBO6WAQECBAjcCyRk/3spu1docoRMgvYTOgIECBAgQIAAAQIECBAgQIAAgf8VELhbDQQIECBwL5Cd7fs3wvZ8zxEy1g0BAgQIECBAgAABAgQIECBA4E5A4G5JECBAgMCtwLH8x9fCdouCAAECBAgQIECAAAECBAgQINBeQODe3swdBAgQWKvAvgwsu9tfu/5cvvH9WgdvXAQIECBAgAABAgQIECBAgACBvgIC976C7idAgMA6BHJu+3+W8tpLUt+X7x3XMVSjIECAAAECBAgQIECAAAECBAiMIyBwH8dVqwQIEFiawF9Lh794pdM/lK/vlzYg/SVAgAABAgQIECBAgAABAgQITC0gcJ9a3PMIECAwP4GvSpc+vNKtX8vXd6X8Mr9u6xEBAgQIECBAgAABAgQIECBAYF4CAvd5zYfeECBAYGqBz8oD//7GQ/9UvneeulOeR4AAAQIECBAgQIAAAQIECBBYooDAfYmzps8ECBAYTiAvQf38leac2z6cs5YIECBAgAABAgQIECBAgACBDQgI3DcwyYZIgACBNwReC9x/Kvdk97uLAAECBAgQIECAAAECBAgQIECgUkDgXgmlGgECBFYqkBel5oWpt5dz21c62YZFgAABAgQIECBAgAABAgQIjCsgcB/XV+sECBBYgkBC94+l/L6Un0vJf/+4hI7rIwECBAgQIECAAAECBAgQIEBgTgIC9znNhr4QIEDguQK78vjLc7vg6QQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgSFIJPXAAAHJ0lEQVQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgMD/b8eOaQAAABCG+XeNjZHUASnfCBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfAcH99zvLCRAgQIAAAQIECBAgQIAAAQIECBAgQCAkILiHzjCFAAECBAgQIECAAAECBAgQIECAAAECBH4FBPff7ywnQIAAAQIECBAgQIAAAQIECBAgQIAAgZCA4B46wxQCBAgQIECAAAECBAgQIECAAAECBAgQ+BUQ3H+/s5wAAQIECBAgQIAAAQIECBAgQIAAAQIEQgKCe+gMUwgQIECAAAECBAgQIECAAAECBAgQIEDgV0Bw//3OcgIECBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfAcH99zvLCRAgQIAAAQIECBAgQIAAAQIECBAgQCAkILiHzjCFAAECBAgQIECAAAECBAgQIECAAAECBH4FBPff7ywnQIAAAQIECBAgQIAAAQIECBAgQIAAgZCA4B46wxQCBAgQIECAAAECBAgQIECAAAECBAgQ+BUQ3H+/s5wAAQIECBAgQIAAAQIECBAgQIAAAQIEQgKCe+gMUwgQIECAAAECBAgQIECAAAECBAgQIEDgV0Bw//3OcgIECBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfAcH99zvLCRAgQIAAAQIECBAgQIAAAQIECBAgQCAkILiHzjCFAAECBAgQIECAAAECBAgQIECAAAECBH4FBPff7ywnQIAAAQIECBAgQIAAAQIECBAgQIAAgZCA4B46wxQCBAgQIECAAAECBAgQIECAAAECBAgQ+BUQ3H+/s5wAAQIECBAgQIAAAQIECBAgQIAAAQIEQgKCe+gMUwgQIECAAAECBAgQIECAAAECBAgQIEDgV0Bw//3OcgIECBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfgQGMc9WA31rv6AAAAABJRU5ErkJggg==';
+
diff --git a/vue-options-api-demos/inputs/signature/events/main.js b/vue-options-api-demos/inputs/signature/events/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/events/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/signature/events/main.vue b/vue-options-api-demos/inputs/signature/events/main.vue
new file mode 100644
index 00000000..c3e25e18
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/events/main.vue
@@ -0,0 +1,11 @@
+<template>
+
+Signature
+</template>
+<script>
+
+export default {
+
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/signature/forms/kendo/FormContent.vue b/vue-options-api-demos/inputs/signature/forms/kendo/FormContent.vue
new file mode 100644
index 00000000..fed071c4
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/forms/kendo/FormContent.vue
@@ -0,0 +1,98 @@
+<template>
+  <form-element :style="{ width: '400px' }">
+    <fieldset class="k-form-fieldset">
+      <legend class="k-form-legend">User Details</legend>
+      <div class="mb-3">
+        <field
+          :name="'firstName'"
+          :component="'myTemplate'"
+          :label="'First name'"
+        >
+          <template v-slot:myTemplate="{ props }">
+            <forminput
+              v-bind="props"
+              @change="props.onChange"
+              @blur="props.onBlur"
+              @focus="props.onFocus"
+            />
+          </template>
+        </field>
+      </div>
+      <div class="mb-3">
+        <field
+          :name="'lastName'"
+          :component="'myTemplate'"
+          :label="'Last name'"
+        >
+          <template v-slot:myTemplate="{ props }">
+            <forminput
+              v-bind="props"
+              @change="props.onChange"
+              @blur="props.onBlur"
+              @focus="props.onFocus"
+            />
+          </template>
+        </field>
+      </div>
+      <div class="mb-3">
+        <field
+          :name="'signature'"
+          :component="'myTemplate'"
+          :label="'Signature'"
+          :hint="'Sign to agree with our Terms of Use'"
+          :validator="signatureValidator"
+        >
+          <template v-slot:myTemplate="{ props }">
+            <FormSignature v-bind="props" @change="props.onChange" />
+          </template>
+        </field>
+      </div>
+    </fieldset>
+    <div class="k-form-buttons">
+      <kbutton type="submit" :disabled="!kendoForm.allowSubmit">
+        Submit
+      </kbutton>
+      <kbutton type="button" @click="clear">Clear </kbutton>
+    </div>
+  </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import FormInput from "./FormInput.vue";
+import FormSignature from "./FormSignature.vue";
+import { Button } from "@progress/kendo-vue-buttons";
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const emailValidator = (value) =>
+  emailRegex.test(value) ? "" : "Please enter a valid email.";
+
+const signatureValidator = (value) =>
+  !value ? "Signature is required" : "";
+
+export default {
+  components: {
+    field: Field,
+    "form-element": FormElement,
+    forminput: FormInput,
+    kbutton: Button,
+    FormSignature,
+  },
+  inject: {
+    kendoForm: { default: {} },
+  },
+  data: function () {
+    return {
+      emailValidator: emailValidator,
+      signatureValidator: signatureValidator,
+    };
+  },
+  methods: {
+    handleSubmit(dataItem) {
+      alert(JSON.stringify(dataItem, null, 2));
+    },
+    clear() {
+      this.kendoForm.onFormReset();
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/signature/forms/kendo/FormInput.vue b/vue-options-api-demos/inputs/signature/forms/kendo/FormInput.vue
new file mode 100644
index 00000000..61915564
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/forms/kendo/FormInput.vue
@@ -0,0 +1,89 @@
+<template>
+  <fieldwrapper>
+    <klabel
+      :class="'k-form-label'"
+      :editor-id="id"
+      :editor-valid="valid"
+      :disabled="disabled"
+      :optional="optional"
+    >
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <kinput
+        :valid="valid"
+        :id="id"
+        :value="value"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        @input="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+export default {
+  props: {
+    optional: Boolean,
+    disabled: Boolean,
+    placeholder: String,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: String,
+      default: "",
+    },
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    kinput: Input,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : "";
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : "";
+    },
+  },
+  emits: {
+    input: null,
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit("change", e);
+    },
+    handleBlur(e) {
+      this.$emit("blur", e);
+    },
+    handleFocus(e) {
+      this.$emit("focus", e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/signature/forms/kendo/FormSignature.vue b/vue-options-api-demos/inputs/signature/forms/kendo/FormSignature.vue
new file mode 100644
index 00000000..aa5f2239
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/forms/kendo/FormSignature.vue
@@ -0,0 +1,79 @@
+<template>
+  <FieldWrapper>
+    <KLabel
+      :class="'k-form-label'"
+      :id="labelId"
+      :editor-id="id"
+      :editor-valid="valid"
+      :editor-disabled="disabled"
+    >
+      {{ label }}
+    </KLabel>
+    <Signature
+      :id="id"
+      :aria-describedBy="`${hindId} ${errorId}`"
+      :aria-labelledBy="labelId"
+      :value="value"
+      :valid="valid"
+      :disabled="disabled"
+      :layout="layout"
+      :popup-scale="2"
+      @change="onChange"
+    />
+    <Hint v-if="showHint" id="hindId">{{ hint }}</Hint>
+    <Error v-if="showValidationMessage" id="errorId">
+      {{ validationMessage }}
+    </Error>
+  </FieldWrapper>
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Signature } from "@progress/kendo-vue-inputs";
+export default {
+  props: {
+    optional: Boolean,
+    disabled: Boolean,
+    placeholder: String,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: String,
+      default: "",
+    },
+  },
+  components: {
+    FieldWrapper,
+    Error,
+    Hint,
+    KLabel: Label,
+    Signature,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : "";
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : "";
+    },
+  },
+  emits: {
+    change: null,
+  },
+  methods: {
+    onChange(e) {
+      this.$emit("change", e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/signature/forms/kendo/main.js b/vue-options-api-demos/inputs/signature/forms/kendo/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/forms/kendo/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/signature/forms/kendo/main.vue b/vue-options-api-demos/inputs/signature/forms/kendo/main.vue
new file mode 100644
index 00000000..1e5a3f0e
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/forms/kendo/main.vue
@@ -0,0 +1,24 @@
+<template>
+  <div :style="{ display: 'flex', justifyContent: 'center' }">
+    <k-form @submit="handleSubmit">
+      <formcontent />
+    </k-form>
+  </div>
+</template>
+
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from "./FormContent.vue";
+
+export default {
+  components: {
+    "k-form": Form,
+    formcontent: FormContent,
+  },
+  methods: {
+    handleSubmit(dataItem) {
+      alert(JSON.stringify(dataItem, null, 2));
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/signature/overview/main.js b/vue-options-api-demos/inputs/signature/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/signature/overview/main.vue b/vue-options-api-demos/inputs/signature/overview/main.vue
new file mode 100644
index 00000000..60f3128e
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/overview/main.vue
@@ -0,0 +1,227 @@
+<template>
+  <div class="example">
+    <div class="content-wrapper">
+      <Toolbar>
+        <ToolbarItem v-if="!showUpload" class="toolbar-tool">
+          Brush:
+          <ColorPicker :value="color" @change="onColorChange" />
+        </ToolbarItem>
+        <SplitButton
+          v-if="!showUpload"
+          :items="strokeWidthOptions"
+          :text="strokeWidthText"
+          :textField="'text'"
+          @itemclick="onStrokeWidthChange"
+        />
+        <ToolbarSeparator v-if="!showUpload" />
+        <ToolbarItem v-if="!showUpload" :key="3" class="toolbar-tool">
+          Background:
+          <ColorPicker
+            :value="backgroundColor"
+            @change="onBackgroundColorChange"
+          />
+        </ToolbarItem>
+        <ToolbarItem v-if="showUpload" :key="4" class="toolbar-tool">
+          Upload your signature:
+          <localization :language="'en'">
+            <Upload
+              :autoUpload="false"
+              :restrictions="{ allowedExtensions: ['png', 'jpeg'] }"
+              :showFileList="false"
+              :showActionButtons="false"
+              @add="onFileSelect"
+            />
+          </localization>
+        </ToolbarItem>
+        <ToolbarSpacer />
+        <ToolbarItem>
+          <ButtonGroup>
+            <KButton
+              :togglable="true"
+              :selected="!showUpload"
+              @click="onDrawClick"
+              :svg-icon="brushIcon"
+            >
+              Draw
+            </KButton>
+            <KButton
+              :togglable="true"
+              :selected="showUpload"
+              @click="onUploadClick"
+              :svg-icon="uploadIcon"
+            >
+              Upload
+            </KButton>
+          </ButtonGroup>
+        </ToolbarItem>
+      </Toolbar>
+      <div class="signature-wrapper">
+        <Signature
+          v-if="!showUpload"
+          :value="value"
+          @change="onChange"
+          :color="color"
+          :background-color="backgroundColor"
+          :stroke-width="strokeWidth"
+          :smooth="true"
+          :maximizable="false"
+          :hide-line="true"
+        />
+        <div v-if="showUpload && !imageURL" class="placeholder">
+          <Icon :name="'image'" :size="'xlarge'" />
+          <span>Please, browse an image to preview here.</span>
+        </div>
+
+        <img
+          v-if="showUpload && imageURL"
+          :src="imageURL"
+          :title="'Uploaded signature'"
+          :draggable="false"
+        />
+      </div>
+      <div class="notes">
+        By using the Kendo UI for Vue signature component, you can enable your
+        end-users to draw handwritten signatures using touch or pointer devices.
+      </div>
+      <Toolbar>
+        <KButton
+          :svg-icon="saveIcon"
+          :themeColor="'primary'"
+          :disabled="!value"
+          @click="onSave"
+        >
+          Save
+        </KButton>
+
+        <KButton @click="onClear">Clear</KButton>
+      </Toolbar>
+    </div>
+  </div>
+</template>
+<script>
+import { saveAs } from "@progress/kendo-file-saver";
+import {
+  Button,
+  ButtonGroup,
+  SplitButton,
+  Toolbar,
+  ToolbarItem,
+  ToolbarSeparator,
+  ToolbarSpacer,
+} from "@progress/kendo-vue-buttons";
+import { Icon } from "@progress/kendo-vue-common";
+import { ColorPicker, Signature } from "@progress/kendo-vue-inputs";
+import { loadMessages, LocalizationProvider } from "@progress/kendo-vue-intl";
+import { Upload } from "@progress/kendo-vue-upload";
+import { sampleSignature } from "./sample-signature";
+import { brushIcon, uploadIcon, saveIcon } from "@progress/kendo-svg-icons";
+import "./styles.css";
+loadMessages(
+  {
+    upload: {
+      dropFilesHere: "",
+      select: "Browse Image...",
+    },
+  },
+  "en"
+);
+
+export default {
+  components: {
+    ColorPicker,
+    Signature,
+    KButton: Button,
+    ButtonGroup,
+    SplitButton,
+    Toolbar,
+    ToolbarItem,
+    ToolbarSeparator,
+    ToolbarSpacer,
+    Icon,
+    localization: LocalizationProvider,
+    Upload,
+  },
+  data() {
+    return {
+      brushIcon,
+      uploadIcon,
+      saveIcon,
+      value: sampleSignature,
+      color: undefined,
+      backgroundColor: undefined,
+      strokeWidth: 3,
+      strokeWidthText: "Wide",
+      showUpload: false,
+      imageURL: undefined,
+      strokeWidthOptions: [
+        {
+          text: "Normal",
+          value: 1,
+        },
+        {
+          text: "Wide",
+          value: 3,
+        },
+      ],
+    };
+  },
+
+  methods: {
+    onChange(e) {
+      this.value = e.value;
+    },
+    onColorChange(e) {
+      this.color = e.value;
+    },
+    onStrokeWidthChange(e) {
+      this.strokeWidth = e.item.value;
+      this.strokeWidthText = e.item.text;
+    },
+    onBackgroundColorChange(e) {
+      this.backgroundColor = e.value;
+    },
+    onDrawClick() {
+      this.showUpload = false;
+    },
+    onUploadClick() {
+      this.showUpload = true;
+    },
+    revokeImageURL() {
+      if (this.imageURL) {
+        URL.revokeObjectURL(this.imageURL);
+        this.imageURL = undefined;
+      }
+    },
+    readImage(file) {
+      const reader = new FileReader();
+
+      const onLoad = () => {
+        this.value = reader.result;
+        reader.removeEventListener("load", onLoad);
+      };
+
+      reader.addEventListener("load", onLoad);
+      reader.readAsDataURL(file);
+    },
+    onFileSelect(e) {
+      const entry = e.affectedFiles[0];
+      if (entry && entry.getRawFile) {
+        const file = entry.getRawFile();
+        this.readImage(file);
+
+        this.revokeImageURL();
+        this.imageURL = URL.createObjectURL(file);
+      }
+    },
+    onSave() {
+      if (this.value) {
+        saveAs(this.value, "signature.png");
+      }
+    },
+    onClear() {
+      this.value = null;
+      this.revokeImageURL();
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/signature/overview/sample-signature.js b/vue-options-api-demos/inputs/signature/overview/sample-signature.js
new file mode 100644
index 00000000..82d3e903
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/overview/sample-signature.js
@@ -0,0 +1,2 @@
+export const sampleSignature = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABdwAAAH4CAYAAABQRy9XAAAgAElEQVR4XuzdjZUjt4EuUL8I7BeBuRFYG4HpCCRHIDqC0UYgTgQzikBUBNZEYCoCSxEsFcGTItiHb83apenuJuqX9XPrHJxudaNQwAV6vPs1GvV/fuMiQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEegv8n94taIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBD4jcDdIiBAgAABAgQIECBAgAABAgQIECBAgAABAgMICNwHQNQEAQIECBAgQIAAAQIECBAgQIAAAQIECBAQuFsDBAgQIECAAAECBAgQIECAAAECBAgQIEBgAAGB+wCImiBAgAABAgQIECBAgAABAgQIECBAgAABAgJ3a4AAAQIECBAgQIAAAQIECBAgQIAAAQIECAwgIHAfAFETBAgQIECAAAECBAgQIECAAAECBAgQIEBA4G4NECBAgAABAgQIECBAgAABAgQIECBAgACBAQQE7gMgaoIAAQIECBAgQIAAAQIECBAgQIAAAQIECAjcrQECBAgQIECAAAECBAgQIECAAAECBAgQIDCAgMB9AERNECBAgAABAgQIECBAgAABAgQIECBAgAABgbs1QIAAAQIECBAgQIAAAQIECBAgQIAAAQIEBhAQuA+AqAkCBAgQIECAAAECBAgQIECAAAECBAgQICBwtwYIECBAgAABAgQIECBAgAABAgQIECBAgMAAAgL3ARA1QYAAAQIECBAgQIAAAQIECBAgQIAAAQIEBO7WAAECBAgQIECAAAECBAgQIECAAAECBAgQGEBA4D4AoiYIECBAgAABAgQIECBAgAABAgQIECBAgIDA3RogQIAAAQIECBAgQIAAAQIECBAgQIAAAQIDCAjcB0DUBAECBAgQIECAAAECBAgQIECAAAECBAgQELhbAwQIECBAgAABAgQIECBAgAABAgQIECBAYAABgfsAiJogQIAAAQIECBAgQIAAAQIECBAgQIAAAQICd2uAAAECBAgQIECAAAECBAgQIECAAAECBAgMICBwHwBREwQIECBAgAABAgQIECBAgAABAgQIECBAQOBuDRAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQEEBO4DIGqCAAECBAgQIECAAAECBAgQIECAAAECBAgI3K0BAgQIECBAgAABAgQIECBAgAABAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAYG7NUCAAAECBAgQIECAAAECBAgQIECAAAECBAYQELgPgKgJAgQIECBAgAABAgQIECBAgAABAgQIECAgcLcGCBAgQIAAAQIECBAgQIAAAQIECBAgQIDAAAIC9wEQNUGAAAECBAgQIECAAAECBAgQIECAAAECBATu1gABAgQIECBAgAABAgQIECBAgAABAgQIEBhAQOA+AKImCBAgQIAAAQIECBAgQIAAAQIECBAgQICAwN0aIECAAAECBAgQIECAAAECBAgQIECAAAECAwgI3AdA1AQBAgQIECBAgAABAgQIECBAgAABAgQIEBC4WwMECBAgQIAAAQIECBAgQIAAAQIECBAgQGAAAYH7AIiaIECAAAECBAgQIECAAAECBAgQIECAAAECAndrgAABAgQIECBAgAABAgQIECBAgAABAgQIDCAgcB8AURMECBAgQIAAAQIECBAgQIAAAQIECBAgQEDgbg0QIECAAAECBAgQIECAAAECBAgQIECAAIEBBATuAyBqggABAgQIECBAgAABAgQIECBAgAABAgQICNytAQIECBAgQIAAAQIECBAgQIAAAQIECBAgMICAwH0ARE0QIECAAAECBAgQIECAAAECBAgQIECAAAGBuzVAgAABAgQIECBAgAABAgQIECBAgAABAgQGEBC4D4CoCQIECBAgQIAAAQIECBAgQIAAAQIECBAgIHC3BggQIECAAAECBAgQIECAAAECBAgQIECAwAACAvcBEDVBgAABAgQIECBAgAABAgQIECBAgAABAgQE7tYAAQIECBAgQIAAAQIECBAgQIAAAQIECBAYQEDgPgCiJggQIECAAAECBAgQIECAAAECBAgQIECAgMDdGiBAgAABAgQIECBAgAABAgQIECBAgAABAgMICNwHQNQEAQIECBAgQIAAAQIECBAgQIAAAQIECBAQuFsDBAgQIECAAAECBAgQIECAAAECBAgQIEBgAAGB+wCImiBAgAABAgQIECBAgAABAgQIECBAgAABAgJ3a4AAAQIECBAgQIAAAQIECBAgQIAAAQIECAwgIHAfAFETBAgQIECAAAECBAgQIECAAAECBAgQIEBA4G4NECBAgAABAgQIECBAgAABAgQIECBAgACBAQQE7gMgaoIAAQIECBAgQIAAAQIECBAgQIAAAQIECAjcrQECBAgQIECAAAECBAgQIECAAAECBAgQIDCAgMB9AERNECBAgAABAgQIECBAgAABAgQIECBAgAABgbs1QIAAAQIECBAgQIAAAQIECBAgQIAAAQIEBhAQuA+AqAkCBAgQIECAAAECBAgQIECAAAECBAgQICBwtwYIECBAgAABAgQIECBAgAABAgQIECBAgMAAAgL3ARA1QYAAAQIECBAgQIAAAQIECBAgQIAAAQIEBO7WAAECBAgQIECAAAECBAgQIECAAAECBAgQGEBA4D4AoiYIECBAgAABAgQIECBAgAABAgQIECBAgIDA3RogQIAAAQIECBAgQIAAAQIECBAgQIAAAQIDCAjcB0DUBAECBAgQIECAAAECBAgQIECAAAECBAgQELhbAwQIECBAgAABAgQIECBAgAABAgQIECBAYAABgfsAiJogQIAAAQIECBAgQIAAAQIECBAgQIAAAQICd2uAAAECBAgQIECAAAECBAgQIECAAAECBAgMICBwHwBREwQIECBAgAABAgQIECBAgAABAgQIECBAQOBuDRAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQEEBO4DIGqCAAECBAgQIECAAAECBAgQIECAAAECBAgI3K0BAgQIECBAgAABAgQIECBAgAABAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAYG7NUCAAAECBAgQIECAAAECBAgQIECAAAECBAYQELgPgKgJAgQIECBAgAABAgQIECBAgAABAgQIECAgcLcGCBAgQIAAAQIECBAgQIAAAQIECBAgQIDAAAIC9wEQNUGAAAECBAgQIECAAAECBAgQIECAAAECBATu1gABAgQIECBAgAABAgQIECBAgAABAgQIEBhAQOA+AKImCBAgQIAAAQIECBAgQIAAAQIECBAgQICAwN0aIECAAAECBAgQIECAAAECBAgQIECAAAECAwgI3AdA1AQBAgQIECBAgAABAgQIECBAgAABAgQIEBC4WwMECBAgQIAAAQIECBAgQIAAAQIECBAgQGAAAYH7AIiaIECAAAECBAgQIECAAAECBAgQIECAAAECAndrgAABAgQIECBAgAABAgQIECBAgAABAgQIDCAgcB8AURMECBAgQIAAAQIECBAgQIAAAQIECBAgQEDgbg0QIECAAAECBAgQIECAAAECBAgQIECAAIEBBATuAyBqggABAgQIECBAgAABAgQIECBAgAABAgQICNytAQIECBAgQIAAAQIECBAgQIAAAQIECBAgMICAwH0ARE0QIECAAAECBAgQIECAAAECBAgQIECAAAGBuzVAgAABAgQIECBAgAABAgQIECBAgAABAgQGEBC4D4CoCQIECBAgQIAAAQIECBAgQIAAAQIECBAgIHC3BggQIECAAAECBAgQIECAAAECBAgQIECAwAACAvcBEDVBgAABAgQIECBAgAABAgQIECBAgAABAgQE7tYAAQIECBAgQIAAAQIECBAgQIAAAQIECBAYQEDgPgCiJggQIECAAAECBAgQIECAAAECBAgQIECAgMDdGiBAgAABAgQIECBAgAABAgQIECBAgAABAgMICNwHQNQEAQIECBAgQIAAAQIECBAgQIAAAQIECBAQuFsDBAgQIECAAAECBAgQIECAAAECBAgQIEBgAAGB+wCImiBAgAABAgQIECBAgAABAgQIECBAgAABAgJ3a4AAAQIECBAgQIAAAQIECBAgQIAAAQIECAwgIHAfAFETBAgQIECAAAECBAgQIECAAAECBAgQIEBA4G4NECBAgAABAgQIECBAgAABAgQIECBAgACBAQQE7gMgaoIAAQIECBAgQIAAAQIECBAgQIAAAQIECAjcrQECBAgQIECAAAECBAgQIECAAAECBAgQIDCAgMB9AERNECBAgAABAgQIECBAgAABAgQIECBAgAABgbs1QIAAAQIECBAgQIAAAQIECBAgQIAAAQIEBhAQuA+AqAkCBAgQIECAAAECBAgQIECAAAECBAgQICBwtwYIECBAgAABAgQIECBAgAABAgQIECBAgMAAAgL3ARA1QYAAAQIECBAgQIAAAQIECBAgQIAAAQIEBO7WAAECBAgQIECAAAECBAgQIECAAAECBAgQGEBA4D4AoiYIECBAgAABAgQIECBAgAABAgQIECBAgIDA3RogQIAAAQIECBAgQIAAAQIECBAgQIAAAQIDCAjcB0DUBAECBAgQIECAAAECBAgQIECAAAECBAgQELhbAwQIECBAgAABAgQIECBAgAABAgQIECBAYAABgfsAiJogQIAAAQIECBAgQIAAAQIECBAgQIAAAQICd2uAAAECBAgQIECAAAECBAgQIECAAAECBAgMICBwHwBREwQIECBAgAABAgQIECBAgAABAgQIECBAQOBuDRAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQEEBO4DIGqCAAECBAgQIECAAAECBAgQIECAAAECBAgI3K0BAgQIECBAgAABAgQIECBAgAABAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAYG7NUCAAAECBAgQIECAAAECBAgQIECAAAECBAYQELgPgKgJAgQIECBAgAABAgQIECBAgAABAgQIECAgcLcGCBAgQIAAAQIECBAgQIAAAQIECBAgQIDAAAIC9wEQNUGAAAECBAgQIECAAAECBAgQIECAAAECBATu1gABAgQIECBAgAABAgQIECBAgAABAgQIEBhAQOA+AKImCBAgQIAAAQIECBAgQIAAAQIECBAgQICAwN0aIECAAAECBAgQIECAAAECBAgQIECAAAECAwgI3AdA1AQBAgQIECBAgAABAgQIECBAgAABAgQIEBC4WwMECBAgQIAAAQIECBAgQIBAF4HflZt+6XKjewgQIECAwFoFBO5rnVnjIkCAAAECBAgQIECAAAEC4wh8WZo9lrIr5VLKn0v5cZxHaZUAAQIECCxLQOC+rPnSWwIECBAgQIAAAQIECBAg8CyBBOzflrK/60B2uf9bKXa7P2tmPJcAAQIEZiMgcJ/NVOgIAQIECBAgQIAAAQIECBCYpUCOjnlXyvGN3v2lfO80y97rFAECBAgQmFBA4D4htkcRIECAAAECBAgQIECAAIGFCXxR+vuhlN2Dfr8v3z8ubGy6S4AAAQIEBhcQuA9OqkECBAgQIECAAAECBAgQILB4gQTsCdoTuD+6fi0VPivl8qii7xMgQIAAgbULCNzXPsPGR4AAAQIECBAgQIAAAQIE6gVqjo+5be2n8h+HUrw0td5YTQIECBBYsYDAfcWTa2gECBAgQIAAAQIECBAgQKCFwJel7rGUXcU92dWeuh8r6qpCgAABAgQ2IyBw38xUGygBAgQIECBAgAABAgQIEHhRYF+++m1l0J4GPpXyVSkXngQIECBAgMA/CwjcrQgCBAgQIECAAAECBAgQILBNgQTtX5eSjzXXz6XSoZRzTWV1CBAgQIDAFgUE7lucdWMmQIAAAQIECBAgQIAAgS0L7MrgE7QnPK+93peKx9rK6hEgQIAAga0KCNy3OvPGTYAAAQIECBAgQIAAAQJbE8gLUT+0DNodH7O1VWK8BAgQINBLQODei8/NBAgQIECAAAECBAgQIEBg9gIJ2t+VknPX83nN9dO1/rmmsjoECBAgQIDAPwQE7lYCAQIECBAgQIAAAQIECBBYr8CXZWgfS6kN2nNO+7GU03pJjIwAAQIECIwnIHAfz1bLBAgQIECAAAECBAgQIEDgWQJflAfn+JhdZQd+LfUSzB8r66tGgAABAgQIvCAgcLcsCBAgQIAAAQIECBAgQIDAegT2ZSh5IWo+1lxN0J6w/ZeaG9QhQIAAAQIEXhcQuFsdBAgQIECAAAECBAgQIEBg+QK7MoTsaM/O9trru1LxWMql9gb1CBAgQIAAgbcFBO5WCAECBAgQIECAAAECBAgQWK7ArnQ9O9oPLYbww7W+oL0FmqoECBAgQKBGQOBeo6QOAQIECBAgQIAAAQIECBCYl0BegvqulK9KqX0haoL2YynneQ1FbwgQIECAwHoEBO7rmUsjIUCAAAECBAgQIECAAIFtCCRoT3BeG7T/fK1/2gaPURIgQIAAgecJCNyfZ+/JBAgQIECAAAECBAgQIECgjcCX1+B8V3lTXoiaHfCC9kow1QgQIECAQF8BgXtfQfcTIECAAAECBAgQIECAAIFxBfal+bwQ9bPKxyRo/3gtv1TeoxoBAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAgREEErAnaN+3aPu7Uje72gXtLdBUJUCAAAECQwkI3IeS1A4BAgQIECBAgAABAgQIEBhGYFea+bqUQ4vmPl2D9kuLe1QlQIAAAQIEBhYQuA8MqjkCBAgQIECAAAECBAgQINBRIC9BTdCeHeq11w+l4rGUc+0N6hEgQIAAAQLjCQjcx7PVMgECBAgQIECAAAECBAgQqBFI0P6ulATt+bzm+rlUOpRyrqmsDgECBAgQIDCNgMB9GmdPIUCAAAECBAgQIECAAAECLwl8Wb54LGVXyZOgPfVPlfVVI0CAAAECBCYUELhPiO1RBAgQIECAAAECBAgQIEDgKvBF+ZgXou4qRX4t9T5eixeiVqKpRoAAAQIEphYQuE8t7nkECBAgQIAAAQIECBAgsGWBfRl8zmnPx9rrvaC9lko9AgQIECDwXAGB+3P9PZ0AAQIECBAgQIAAAQIEtiGwK8PMjvbsbK+9visVj6Vcam9QjwABAgQIEHiugMD9uf6eToAAAQIECBAgQIAAAQLrFtiV4WVH+6HFMH8odfMC1R9b3KMqAQIECBAgMAMBgfsMJkEXCBAgQIAAAQIECBAgQGB1Ar8rI3p3Dc7zec2VoP1YyrmmsjoECBAgQIDA/AQE7vObEz0iQIAAAQIECBAgQIAAgWULZEd7dqjXBu0/X4P207KHrfcECBAgQICAwN0aIECAAAECBAgQIECAAAECwwh8eQ3Od5XN/Xqt/7GyvmoECBAgQIDAzAUE7jOfIN0jQIAAAQIECBAgQIAAgdkL7EsP80LUzyp7mqA9IXvKL5X3qEaAAAECBAgsQEDgvoBJ0kUCBAgQIECAAAECBAgQmKVAgvYcH5OPtdd3pWKOmxG014qpR4AAAQIEFiQgcF/QZOkqAQIECBAgQIAAAQIECMxCYFd6kaD90KI3n65B+6XFPaoSIECAAAECCxMQuC9swnSXAAECBAgQIECAAAECBJ4mkJeg5uiYNkH7D6X+sZTz03rtwQQIECBAgMBkAgL3yag9iAABAgQIECBAgAABAgQWKpCg/V0pOQomn9dcP5dKh1LONZXVIUCAAAECBNYhIHBfxzwaBQECBAgQIECAAAECBAiMI5Cg/VhKm6A99U/jdEerBAgQIECAwJwFBO5znh19I0CAAAECBAgQIECAAIFnCXx5Ddp3lR34tdT7eL2n8hbVCBAgQIAAgbUJCNzXNqPGQ4AAAQIECBAgQIAAAQJ9BPbl5pzT/lllI03QnrD9l8p7VCNAgAABAgRWKiBwX+nEGhYBAgQIECBAgAABAgQItBJI0P51KflYe31XKh5LudTeoB4BAgQIECCwbgGB+7rn1+gIECBAgAABAgQIECBA4G2BXfl2gvZDC6hPpW5eoCpob4GmKgECBAgQ2IKAwH0Ls2yMBAgQIECAAAECBAgQIHAvkJeg5uiYNkH7D6X+sZQzTgIECBAgQIDASwICd+uCAAECBAgQIECAAAECBLYkkKD9XSnZoZ7Pa66fr/W/r6msDgECBAgQILBdAYH7dufeyAkQIECAAAECBAgQILA1gRwd0zZoP5Z7TluDMl4CBAgQIECgm4DAvZubuwgQIECAAAECBAgQIEBgOQJflq4mON9VdvnXUu/jtfxSeY9qBAgQIECAAIHfCNwtAgIECBAgQIAAAQIECBBYq8C+DOxbQftap9e4CBAgQIDA/AQE7vObEz0iQIAAAQIECBAgQIAAgX4CCdpzfEw+1l7flYrHUi61N6hHgAABAgQIELgXELhbEwQIECBAgAABAgQIECCwFoFdGciHUr5oMaBPpW7OdRe0t0BTlQABAgQIEHhZQOBuZRAgQIAAAQIECBAgQIDA0gUStGdH+6HFQH4odY+lnFvcoyoBAgQIECBA4E0BgbsFQoAAAQIECBAgQIAAAQJLFfhd6fi7a3BeO4afS8WDoL2WSz0CBAgQIECgjYDAvY2WugQIECBAgAABAgQIECAwB4EmaM9RMPm85krQfizlVFNZHQIECBAgQIBAFwGBexc19xAgQIAAAQIECBAgQIDAswS+LA/+WEpt0P7rNWjPPS4CBAgQIECAwKgCAvdReTVOgAABAgQIECBAgAABAgMJJGg/lrKrbC9Be0L2lF8q71GNAAECBAgQINBLQODei8/NBAgQIECAAAECBAgQIDCywL60/6GUz1o857tSN8fNCNpboKlKgAABAgQI9BcQuPc31AIBAgQIECBAgAABAgQIDC+QoP3rUvKx9krQfizlUnuDegQIECBAgACBIQUE7kNqaosAAQIECBAgQIAAAQIE+grsSgPZ0f5Fi4Z+KHWzo/3HFveoSoAAAQIECBAYXEDgPjipBgkQIECAAAECBAgQIECgg0CC9uxoP7S4N0H7sZRzi3tUJUCAAAECBAiMJiBwH41WwwQIECBAgAABAgQIECBQIfC7UidBe3ao114/X+t/X3uDegQIECBAgACBKQQE7lMoewYBAgQIECBAgAABAgQI3AskaH93Dc7zec2VoP1YyqmmsjoECBAgQIAAgakFBO5Ti3seAQIECBAgQIAAAQIECDQ72muD9l8L2cdr2E6PAAECBAgQIDBbAYH7bKdGxwgQIECAAAECBAiMIrArrf6+lM9KSdi5v3lKvpfSXHkB5ftSHNsxylRsstEvy6iPd+vsLYgmaE/Y/ssmxQyaAAECBAgQWJSAwH1R06WzBAgQIECAAAECBFoJJFD/Yyn7UhKw52PbKyHnv5dyaXuj+gRuBNoG7bn1m1KOpQjaLSUCBAgQIEBgMQIC98VMlY4SIECAAAECBAgQeCjQBOxflJr7UnYP76ir8OdSzS73Oiu1/lkg6zDHx+Rj7fVdqXgs5VJ7g3oECBAgQIAAgbkICNznMhP6QYAAAQIECBAgQKCbwK7cll3sCdlTxrgE7mOorrvNfRle26D9h3LPoZTLummMjgABAgQIEFizgMB9zbNrbAQIECBAgAABAmsVyE72HNGRcDJHxYx9/ak84Dz2Q7S/CoFdGcWHUtr88idB+9EaW8X8GwQBAgQIENi8gMB980sAAAECBAgQIECAwIIEErKPuZP9NQr/f8OCFsmTupqgPTvaDy2e/1Op+5WgvYWYqgQIECBAgMDsBfwfzrOfIh0kQIAAAQIECBDYuECCzHfXIDM724e4sqP4ci0/lo95KeVfS3mp/U/l6212Kw/RP20sRyBrJkF7gvPa6+dS8VjKqfYG9QgQIECAAAECSxEQuC9lpvSTAAECBAgQIEBgawLNkTH7ngPPLuKE6udrubzQXsLPhKYvXc5v7zkBK709QXt+EZSgvfYXQYL2lS4GwyJAgAABAgT+V0DgbjUQIECAAAECBAgQmI9AE2IeSpd2Hbv1a7nv+2s5l4/Zvf7WlTPg//5KhQSkXfvRsftuW4BAs6O9NmjPmvxYynEBY9NFAgQIECBAgEAvAYF7Lz43EyBAgAABAgQIEBhEIKF3c2xMlwYTjN+G7LVtJDBN2L575QYvS62V3Ea9/NXF8Y31cq/QBO0J2x/94mcbgkZJgAABAgQIrF5A4L76KTZAAgQIECBAgACBGQt8XvqWIzn2HfrY7GRPmJkjY9peCdv/VkrC/peunPPepV9t+6H+/AXaBu0Z0TelHEsRtM9/fvWQAAECBAgQGFBA4D4gpqYIECBAgAABAgQIVAgk6E7QnjByV1H/vkpeYnoqJTva+1wJ2/evNJAwP30TlvYRXv69WR8fSnntlzIvjfC769q+LH/4RkCAAAECBAgQaC8gcG9v5g4CBAgQIECAAAECXQS6vGSyeU4C8FMp2c0+RJD5bWnn8MYgHCXTZYbXc8++DCXntOdj7ZW/iMiaGmJ91j5TPQIECBAgQIDA7AQE7rObEh0iQIAAAQIECBBYmcCujCfhZcLItldCzNO1tL33tfqPwvb35cbjUA/TzqIEspM9O9r3LXqdNZr1cm5xj6oECBAgQIAAgdUKCNxXO7UGRoAAAQIECBAg8GSBhJZtdwk3Xc6xHF3PZn9t2Nlh/9dS0q/Xrjz38GQ3j59eYHddq23mXtA+/Tx5IgECBAgQILAAAYH7AiZJFwkQIECAAAECBBYlkBdMJrjct+z1z6X+qZQE7UOfnZ6dywnbd2/0SdjecsJWUD3roe1fX2SdHq9rdQUEhkCAAAECBAgQGFZA4D6sp9YIECBAgAABAgS2KdDnRag/FbKE7KeR6L4o7eYYmfTxtSt9aPNizJG6qtmJBLIWErR/1eJ5gmpWyTgAACAASURBVPYWWKoSIECAAAEC2xUQuG937o2cAAECBAgQIECgv0CfF6GOfSTHrgwv53EncH/rSti+L2XoXfX9dbUwtECX9ZoX9uYXQsehO6M9AgQIECBAgMAaBQTua5xVYyJAgAABAgQIEBhbYFce0PYojqZPObol4eVlxE6+uz7jrV3tefynUg6lCNtHnIwZNN0naB/jiKMZkOgCAQIECBAgQGAcAYH7OK5aJUCAAAECBAgQWKfAvgyrOaO9zQibXcJjh5e70qkcH5N+Prq+KRXaHCnyqD3fn6dA7S9fmt5PtVbnqaVXBAgQIECAAIGeAgL3noBuJ0CAAAECBAgQ2IRAAuzsaM/HNlfOvW7OZx97F3n6d6zoXALVBO2nirqqLFcgvxjKeti1GMIUf33RojuqEiBAgAABAgSWJyBwX96c6TEBAgQIECBAgMB0As1u9n3LR479ItTb7qRv2dVeE6ymX4dSfmw5HtWXIyBoX85c6SkBAgQIECCwQgGB+won1ZAIECBAgAABAgR6C3QJLfPQsV+EejuwBOy1x8fkvvelHHvLaGCuAl3WbM7wz187XOY6KP0iQIAAAQIECCxNQOC+tBnTXwIECBAgQIAAgTEFuoSW6c+UR3HkBZg5Pqb2/PX8EiB17Wofc+U8r+39dT3kY+015S+GavukHgECBAgQIEBgFQIC91VMo0EQIECAAAECBAj0EEiA/Xkpx1J2LdrJWeinUnJG+6XFfX2q5hcCeV76/OhK/zKm1HetT2BfhtT2vQKC9vWtAyMiQIAAAQIEZiYgcJ/ZhOgOAQIECBAgQIDAZAIJrd+Vkt3fNQF207EE2QmxU8Z+EWrzzISrH0r5rFInweqhlEtlfdWWI5C1IGhfznzpKQECBAgQILAxAYH7xibccAkQIECAAAECBP47XO8StP9c7juWcprQMAF7gvaErDVX+phfIHxfU1mdRQlkDbQN2p+xZheFqrMECBAgQIAAgaEFBO5Di2qPAAECBAgQIEBgrgJLCtp313D1UInZ7Lo/VtZXbTkCgvblzJWeEiBAgAABAgR+I3C3CAgQIECAAAECBNYusKSgPX3NjvbaoD1zN+ULW9e+VuY0PkH7nGZDXwgQIECAAAEClQIC90oo1QgQIECAAAECBBYn0DVoz/nnOZ99ymNZuvTVCzAXtySrOrwrtXJ0zKGq9j8qOTqmBZaqBAgQIECAAIExBQTuY+pqmwABAgQIECBA4BkCXcLr9PNZAXbC1TYvbs3xMal/egauZ44msCsttw3an/EC39EANEyAAAECBAgQWIOAwH0Ns2gMBAgQIECAAAECjcCX5ZNjKQkva69nBe1t+ypcrZ3RZdXLWhW0L2vO9JYAAQIECBAg8KqAwN3iIECAAAECBAgQWINA2/A6Y15K0J6+vi8lx9z8sobJMob/FtiVImi3GAgQIECAAAECKxMQuK9sQg2HAAECBAgQILAxgbUH7V6Iur4FLWhf35waEQECBAgQIEDgfwQE7hYDAQIECBAgQIDAEgXWHrR/KpOSc9ovS5wcfX5R4LPy1XelHFr4OEaoBZaqBAgQIECAAIE5CAjc5zAL+kCAAAECBAgQIFArsC8VP5SS8LL2WtLRMc/qa62leu0FsmZzdEw+1l6C9lop9QgQIECAAAECMxMQuM9sQnSHAAECBAgQIEDgRYEuoeWzwusl7b633MYT6LJmBe3jzYeWCRAgQIAAAQKTCAjcJ2H2EAIECBAgQIAAgY4C2cmeHe0JL2uvn0rFHMdyrr1hoHqC9oEgF95M1qod7QufRN0nQIAAAQIECHQVELh3lXMfAQIECBAgQIDAmAK7a2h5aPGQn0vdYymnFvf0rfq70sDn1+emz7XXs3bf1/ZPvfYC+YVL1uu+xa12tLfAUpUAAQIECBAgsAQBgfsSZkkfCRAgQIAAAQLbEdiVoWZ3cILL2utZQXtegJmd9Anday9Be63Ucup1+csGQfty5ldPCRAgQIAAAQKtBATurbhUJkCAAAECBAgQGEkgoXXbAFvQPtJkaPahQNe/bBC0P6RVgQABAgQIECCwbAGB+7LnT+8JECBAgAABAksX6BK0J7Q8lvJxwsF36We6Z0f7hJM0waO6rgNB+wST4xEECBAgQIAAgTkICNznMAv6QIAAAQIECBDYpkDbozieEVp2DVgF7eta07synLZHHUXgGWt2XfJGQ4AAAQIECBBYmIDAfWETprsECBAgQIAAgRUI7MsYvi0lIWbt9b5UzI72X2pvGKBefiGQZzqjfQDMhTaRtdq8DLXNEJrjjr6feM226aO6BAgQIECAAAECIwgI3EdA1SQBAgQIECBAgMCLAgkvs0s4H2uv70rFYymX2hsGqNd2530eaUf7APAzaqIJ2dus1XT/Ge8VmBGbrhAgQIAAAQIECAjcrQECBAgQIECAAIGxBXblAW2P4xC0jz0r2r8XyF8yJGj/qpSs2TZXfuFyupY296lLgAABAgQIECCwMgGB+8om1HAIECBAgAABAjMSSID5oZRDiz49Y6f4/trPz2bezxbdU7WFwK7UfXddp22OD8ojnrFeWwxNVQIECBAgQIAAgakFBO5Ti3seAQIECBAgQGD9Al1eNPpTYcnO4vOEPPvyrLZH3AhYJ5ygkR+V+U/Q/kWH5zzjLzA6dNMtBAgQIECAAAECUwsI3KcW9zwCBAgQIECAwLoF2r5o9BlnXu/KFOSlrQlcay9Be63U/Os1x8a0+YuGjOrXUk6l5EW6l/kPUw8JECBAgAABAgSeISBwf4a6ZxIgQIAAAQIE1iewL0NKiL2rHFrCy+M1vKy8pXe19K3tWfLP2Hnfe6Aa+BeBzH0TtLc9Nia/FErIfirlF7YECBAgQIAAAQIE3hIQuFsfBAgQIECAAAECfQSySzjntO8rG0nQnvAyZarwMgFrgvYcWVN7PWPnfW3f1KsXyLpM0H6ov+V/anoRagc0txAgQIAAAQIEti4gcN/6CjB+AgQIECBAgEA3gV25re1u8anPve5ylrygvdt6mNtdXY+NyTiyTk+lnOc2KP0hQIAAAQIECBCYv4DAff5zpIcECBAgQIAAgTkJdAmxs1P4UMplwoHkZZjHUmqPD2l23uce1zIFdqXbXY+NcT77MudcrwkQIECAAAECsxMQuM9uSnSIAAECBAgQIDBbgbYvRH3Gi0bTx4TmCV9rrmcccVPTL3XqBfalatdjY5q/aPi+tDHVEUf1I1OTAAECBAgQIEBgcQIC98VNmQ4TIECAAAECBCYXSKDZ5oWozziWpW0fg/hNKUdB6+TraYgH5i8XPr/O365Dg/llUN4jkKDdRYAAAQIECBAgQGAwAYH7YJQaIkCAAAECBAisTqDrC1GPE0rsy7Nylnw+1l5TnyVf2y/1HgvsrvP9RflYe1xQ02r+miEBe9bn5fGj1CBAgAABAgQIECDQXkDg3t7MHQQIECBAgACBtQskyPxQyqHFQKfeLb679jHBa+31jLPka/um3tsC2c3+VSn7DlD5i4vsZj+V4tiYDoBuIUCAAAECBAgQqBcQuNdbqUmAAAECBAgQ2IJAdosn2KzdPfzpWv8yEc6uPCd9PLR43jPOkm/RPVVfEchcN2ez5/O2l2Nj2oqpT4AAAQIECBAg0FtA4N6bUAMECBAgQIAAgVUItH3Z6NQhdn4B8K6UYwvt7Gw+lHJucY+qzxfYly50fQmqY2OeP396QIAAAQIECBDYtIDAfdPTb/AECBAgQIAAgf8+oqPNGehTvxC1Cdrb7Lqfuo+WUX+Bvi9BbeY8Z7Q7Nqb/fGiBAAECBAgQIECgo4DAvSOc2wgQIECAAAECCxfYXYP2Q+U4snM452AfK+sPUS27nPPM2uNtntHHIca55TbyYt785UKXl6DGLS/APZVy3jKisRMgQIAAAQIECMxHQOA+n7nQEwIECBAgQIDAFAJddown1MwO86l2Drc93qYJ2hPOT9XHKeZqzc9ojozZdxhkdrMnZE+5dLjfLQQIECBAgAABAgRGExC4j0arYQIECBAgQIDA7ATaBtk5p/0wYai5L8/6UEp2PddeU/8yoLZf6v2rwK58KbvZs6Zq/2rhtpWsx9O18CVAgAABAgQIECAwSwGB+yynRacIECBAgAABAoMK7Etrbc9pTyh6HrQXrzfWtn9pKUH7sZTLRH30mO4CfXazNy9BzV8v/Ni9C+4kQIAAAQIECBAgMI2AwH0aZ08hQIAAAQIECDxDYFcemqD9UPnwhJvHUhJuTnFlJ3t2tO9bPCy7nHO8jfC1BdoTqmbtNUF7Pm97eQlqWzH1CRAgQIAAAQIEZiEgcJ/FNOgEAQIECBAgQGBQgS7ntH9TenAsZYoz0BPAtvlFQHAStKd/50GlNDa0wOelwUMpeQlql8tLULuouYcAAQIECBAgQGA2AgL32UyFjhAgQIAAAQIEBhFoe077p/LU7Bi/DPL0txvZlW+3Ddqz0zn9+36C/nlEN4HMa9/d7KfShpfedvN3FwECBAgQIECAwIwEBO4zmgxdIUCAAAECBAj0EGh7PMtP1yD73OOZtbdmx32C9gTntVdzpMip9gb1Jhfou5s9v+zJ/PplyuRT54EECBAgQIAAAQJjCQjcx5LVLgECBAgQIEBgGoGE2TkH/VD5uJzTnuA7QefYV5ejbaY+R35sg7W1vysDGmI3e9bfZW04xkOAAAECBAgQIEBA4G4NECBAgAABAgSWK9DsGk+wXXO9L5WmOLaja9Cevk3Rvxordf5ZoO9u9pzBf7oWtgQIECBAgAABAgRWKyBwX+3UGhgBAgQIECCwYoG8kDK72neVY0zYeSjlUlm/azVBe1e5ed6X+cxu9vxFRO1aux1J/lrhVEp+iTL22punoF4RIECAAAECBAhsTkDgvrkpN2ACBAgQIEBgwQIJPb8tZV85hpyDfijlXFm/T7UEswlWa3fb51nflXIs5dLnwe4dXCDrqzk2pkvjdrN3UXMPAQIECBAgQIDAKgQE7quYRoMgQIAAAQIEVi7Q9qWjU56DnmA2ofmuxRwI2ltgTVQ189fnbHa72SeaKI8hQIAAAQIECBCYt4DAfd7zo3cECBAgQIAAgbY7x7+5BuC/jEwnaB8ZeKLm+57N/lPpZ/6y4TRRfz2GAAECBAgQIECAwKwFBO6znh6dI0CAAAECBDYssC9jzzntn1UaTHVOe5egPX07lnKuHItq4wpkTTW72dscAdT0KrvZvy8lQfuP43ZV6wQIECBAgAABAgSWJSBwX9Z86S0BAgQIECCwfoFdGeLXpRwqh5pz2vNSywSgY16C9jF1x28766rZzV77S5z7XjW72bPWxv4LivFFPIEAAQIECBAgQIDACAIC9xFQNUmAAAECBAgQ6CiQoD3hec2u4+wyzg7jY8dn1d4maK+Vml+9rKOE7F9cS5ce2s3eRc09BAgQIECAAAECmxUQuG926g2cAAECBAgQmJFAAtEcH7Or7NMULx0VtFdOxgyr3YbsNb+8eWkIdrPPcGJ1iQABAgQIECBAYP4CAvf5z5EeEiBAgAABAusVSMD+bSn7yiFOcRa6oL1yMmZWre+57BlOdrOfrsXZ7DObYN0hQIAAAQIECBBYhoDAfRnzpJcECBAgQIDAugSy67g5PqZmZAlCc9RMwtAxrubokWNpfNfiATk/PveM1a8WXdlk1SZkz19ItJm3e6xP5Qs5l908bnIZGTQBAgQIECBAgMCQAgL3ITW1RYAAAQIECBB4LJAd5Dl7vfaoj/fX+mO8pDJ9eFdK7bnxzegE7Y/neawau9Jw35efpm+Zw6zDBO2XsTqrXQIECBAgQIAAAQJbExC4b23GjZcAAQIECBB4lsC+PDi72vOx5srxMYdSLjWVW9YRtLcEe3L1zFd+UZP1kF3tXS9HxnSVcx8BAgQIECBAgACBSgGBeyWUagQIECBAgACBjgIJS/NC1ISlNVd2HqfuuaZyyzq7Uj872tN+7Q77PMKO9pbQA1RvjvnJcTEpXa+E7NnF3pSu7biPAAECBAgQIECAAIEKAYF7BZIqBAgQIECAAIGOAs057TXhdoLRHPFx7Pist27blW+mL4eWbf907dOp5X2qdxdojovpE7Ln6c257AnaxziOqPsI3UmAAAECBAgQIEBgxQIC9xVPrqERIECAAAECTxPYlyd/W8qusgfflXo5R33oYDT9yI72tuFtjrM5lnKu7L9q/QQyTzkyJvNU88uZ156WX5CcrmXotdRvhO4mQIAAAQIECBAgsBEBgftGJtowCRAgQIAAgUkEduUpOT6mNuBOQJqg/Txw75rzvvct2xW0twTrUT1rpZmnfN71akJ2Lz/tKug+AgQIECBAgAABAgMKCNwHxNQUAQIECBAgsFmB5iWkx0qBHB+ToP1UWb+mWvNizbS7q7nhpo6gvSVYx+rNueyZoz4vP82Z+gnYs35+7NgXtxEgQIAAAQIECBAgMIKAwH0EVE0SIECAAAECmxLIbvbsat9VjvqbUu9YylBHfuS5XV6Emu7mKJucGy+0rZy8jtVyLnvWyaHj/bmtefmp+eqB6FYCBAgQIECAAAECYwsI3McW1j4BAgQIECCwVoFdGVjOad9XDjC7yLOzeahwO8/tcj57upug/VjKpbLvqrUXyProe2RME7JnN3uKiwABAgQIECBAgACBmQsI3Gc+QbpHgAABAgQIzE4gx4J8XUrC85orx3+k7lCBaULcLkeSJLzN7uhTKZeajqvTSaDr+fm3D/t0XS+ZKxcBAgQIECBAgAABAgsSELgvaLJ0lQABAgQIPFFgV579+xeen6+n3F+vff22XoLrPudYp63sFr89miWf3+4gv/3vBN+XnoYJUxNap++PribgTv2+x8fkec2xMS95v9WXjLsJ2vv249GYt/r9zEnXY30as7z8NPOUX8yYp62uJOMmQIAAAQIECBBYvIDAffFTaAAECBAgQOChwB9varwUcu/vWhgiCH/YqSdXuA3qz9e+NB8TfN4HnvnFQM5pv7d6bRjZoZxd6Jee49yV+7Ob/tChnRxhc7qWDre7pUIgZ7Nnbr6oqPtSleblpwna+66Vjl1wGwECBAgQIECAAAECQwoI3IfU1BYBAgQIEBhPIIHvb6/N3wfi+d7tjuv9eN3YVMsJQJsQtNY0AeqhlHNPqQS5Cexrn3v7uJzPfhqgDz2HsNrb87PWHOuz6zDK5lx2c9QBzy0ECBAgQIAAAQIE5i4gcJ/7DOkfAQIECKxR4DY8vw3Lbz/fwi7ztc1tgu5Dj0FlzhO0H0tpG+QmxE2Aa6d0jwl4cGvmJH9tkN3sNUcK3TfX/MWBI2PGmyMtEyBAgAABAgQIEHi6gMD96VOgAwQIECCwAoHbI1v2N+N57fMVDNkQXhHIUTQ5ruZ8LQlZH127UqHr+d/OZ3+k2//7ff7awC9C+vtrgQABAgQIECBAgMCiBATui5ounSVAgACBiQSye/UP12clDE3Jdfv5/TEuE3XNYxYocCp9zu73813f9+W/E7R3Of87QX7zgs0Fksy+y33+2iCDyxn+mffsZncRIECAAAECBAgQILAhAYH7hibbUAkQIEDgN81RLrfHteyKS0quPaNXBbJTNzu3769L+UJK7ddv6zW7wfuw3//i4/4ontv5vT3Kp88zu957Ljf+uZRmx3T60/ZKcJ+g/aW5aNuW+v8qkPXS9a8N7Ga3oggQIECAAAECBAgQ+I3A3SIgQIAAgTUINEe63IatTRDrLPTf/Ob+WJMEv7dXwtuE37fXfZ01rJPbMeyv/3EoH/MCzDlfCXITsqfcz9Oc+72kvmU9ZB1kPbS9frrOzantjeoTIECAAAECBAgQILA+AYH7+ubUiAgQILAmgSZI35VBpeTaXz/efm1NY35tLDmr+3LzzfPN5/eB+UsB+haM2owx6+dDKbXHuTS/tLg9bqjN87rUFeR2UWt3TxOyN/+utLk7f21wKuX2Z7HN/eoSIECAAAECBAgQILBCAYH7CifVkAgQILAQgSZMb3aiJwBN2cKO9Nvw/FLGnJLr/ogVQd44i/nr0uxX17X26AnZXZ66p7uKzXrdX9dt/vv25bmP2n3r+zn/O7vZzX8fxdfv7XM+e/PXBlkPzc/tOL3UKgECBAgQIECAAAECixQQuC9y2nSaAAECsxfYWpiencjNUR+3u8tf+3z2E7jSDu7LuL4tZVc5vm9KvePN3D66Le222TV/257zvx/p9v9+gvacz177y5bbJ/prg/7+WiBAgAABAgQIECCwCQGB+yam2SAJECAwqMBWwvTmCJHbXee3n1+Kaopr/gK70sU2QXjm/tBifvelbtfzv/PXDsdSvi/F+ezjrKXMf/6qIXPa9vLXBm3F1CdAgAABAgQIECCwcQGB+8YXgOETIEDgTqA5n7o51uX+49LBbo9yaXaf34bozj5f+gz/c/+bHc3HymFlfWT3c8LvR1efY0nSdkL9HBtT86xHffH9lwV25ctdgnZ/bWBFESBAgAABAgQIECDQWUDg3pnOjQQIEFikwFoD9dsjXc7XmbmUjym5mq8tctJ0upNAXoaaXe27yrvfl3oJwB/tMk97OZbkUEp+ntpe2TGdUL9Zm23vV/+xwL5USdCej22u/MIla+BUsQ7atKsuAQIECBAgQIAAAQIbEhC4b2iyDZUAgU0IrC1Qb4L0l3ah335tE5NrkFUCu1Ir57Tvq2r/Y6f5oZTLg/qfl+8nKK9t96XmsnM6/XsU6ld2XbU7gcxNl6Dd+eyWEgECBAgQIECAAAECgwkI3Aej1BABAgQmEVhToN6E6Qk6U24D9PMkmh6yJoExjo/ZFaDmbPZ83vfKLvpj30bc/y8C+/KVLkF7ftmS+fDvjUVFgAABAgQIECBAgMBgAgL3wSg1RIAAgcEEmlB9V1pM+ayUfC2h0lIuYfpSZmod/WxzfEx2mefYkOMbQ8/PWo6NSbtDXTmuJD/PruEEMk9dgvbvrvN/Ga4rWiJAgAABAgQIECBAgMA/BATuVgIBAgSeI5Dg7fel3IbpzQtKn9Oj+qcK0+ut1BxXID9HbY6Peev89Pz8ZTd7jo1Ju0Nf/14azEt5Xf0F9qWJtkG7F6H2d9cCAQIECBAgQIAAAQIVAgL3CiRVCBAg0FEgYfpvS0k41ITpSwjVm0D9fB33/ceOHG4jMJhAl+NjDuXpzVq+7Uh+PptjY7p0MCH+H0rZvXHzf5TvZVe9q59A5qpL0B77mhfi9uuduwkQIECAAAECBAgQIFAEBO6WAQECBPoJ/PF6e4KgJkzflc9T5no1gXp22zbnpt9+nGu/9YtABBKOJzzNz9uj67XjY/Lz2eds9qbd70s7OXrm8EZHcnzJW99/NAbf/8e/p23+kiFmzRwJ2q0gAgQIECBAgAABAgQmFRC4T8rtYQQILFQgYU9z/Es+z8715iiYOQ5JoD7HWdGnvgL5mftQyr6yofvjYxLQf17KoUUb94/KSzZP15L2/nb9t+C1LuVnMf3NL7Rc7QXy7212tGfOaq+clX8sJb8M4V6rph4BAgQIECBAgAABAoMJCNwHo9QQAQIrEMhu9WaX+u3Z6nMbmkB9bjOiP2MK5GcyoWvOVq+5ErgeSjlfK+/Lx+xm/+L6813Txm2d7JROeHss5XL9Rv59SNj+1i57YXtb6f+t3/bIoNzZBO2n7o91JwECBAgQIECAAAECBPoLCNz7G2qBAIFlCSTIyXnLt4H6rvx3ypyu7KS9P+7lUr6W4iKwFYG2x8ccC0yOEMnPc58jY+KbwDxt3e+UTvif57x1Cdu7r9Ac0RPfmiOD8hRBe3drdxIgQIAAAQIECBAgMIKAwH0EVE0SIDALgdtgfVd6lIB9P4ue/W8nbkP1S/lyyo+lOAZhZhOlO5MLtD0+JuekH0vJX6lkJ3tKl6vZzZ6gPT+Lt1f+Hak5Rzx9yW58P8ftZiD/Psc3zjXXa+fz19yrDgECBAgQIECAAAECBEYTELiPRqthAgQmFEg4l13rCWoS2uRjbWgzZjcTCCW0u1xLE6afx3yotgksWKDt8THZSd4c7XLoMe7XdrM3TSbATxj8aNf1N6VO7dE3Pbq7qlvzb3XNLzKaQXsZ6qqm32AIECBAgAABAgQIrE9A4L6+OTUiAmsWSDCTl5fuS0nInv/Ox2deOc7gUsp9mH5+Zqc8m8ACBdocH9MML7vIH4Xgr1HkZzfHxWQ3e36GX7rSdsLgmh3zfyn1Tgt0f1aXY9scH1Pbh/fX+fLXA7Vi6hEgQIAAAQIECBAgMLmAwH1ycg8kQKBSIEdD3Ibq+bxrsFb5yDer5fiXy7U0u9bvj5wY4jnaILA1gbbHx/T1yZEvCdpT3rpqfwGQ4D6BvH8P6mdmX6q2OT6mOTIo/wa7CBAgQIAAAQIECBAgMGsBgfusp0fnCGxGoDkSJiFMPn/WrvXb3eoJdm6Pg9nMZBgogYkE2h4f06dbj46MuW17V/6j9oiTT6XuoRQ7rutmJ3P+4WpWc0d+0Xks5VxTWR0CBAgQIECAAAECBAjMQUDgPodZ0AcC2xJowvUmWN8/YfgJ3y6lJFC/PwrmCd3xSAKbE6jdPd4HJmd9n66lZvd52yNO/qO0neNoXHUC+SuAmnPw01p++flVKY/+CqHuyWoRIECAAAECBAgQIEBgQgGB+4TYHkVggwLPDtfvg/Vmx/oGp8KQCcxCYOzjYxKyN8fFtAlr8wuAYym7CqX8u3IopSbEr2huE1XilbD90dW8EDVz4SJAgAABAgQIECBAgMAiBQTui5w2nSYwS4HsDs256/tSEqrl41RXQpqEX+dSLteSz10ECMxDYOzjY3K0SwL2U8vh5t+pr1v8e5WXdh5bPmPr1Q8FoCZszxxmV3v+DXcRIECAAAECBAgQIEBgsQIC98VOnY4TeLrA7bnrCa12E/WoeXlpcxxMcyTMRI/3GAIEWgqMdXxME7InaG973uQL5wAAIABJREFUhnr+vUrQfqgci13tlVB31eL7KGx3fEw3W3cRIECAAAECBAgQIDBTAYH7TCdGtwjMUOB+93p2rI553e5ab46CcYTDmOLaJjCswL4012b3eM3T8wu3UyldQva03/acdkec1MzKy3XyS9m/Xc1fa+Wb8o1jKW1/YdK9V+4kQIAAAQIECBAgQIDAyAIC95GBNU9goQK70u8/lLK/lgQnY1734bqz1sfU1jaBcQTy70Z+MZeXY+bfjqF+KZeQvTmX/dKx603QniNLavvliJOO2Nfb/l4+vva/Hfk3P+vk3O8R7iZAgAABAgQIECBAgMD8BATu85sTPSLwDIEEUJ9fQ7IEZbsROyFcHxFX0wQmFBjrWKn8G5EgtgnZ++5+bvNC1PDliJPDtQ8Tcq7qUR/LaN69MqLMb/53xl8srWrKDYYAAQIECBAgQIAAgUZA4G4tENiuwG3APtYOduH6dteXka9PYMxjpfJvRROw5+MQV9ugPX04lpKw2NVdYF9uzVEyL10xzv/eXLo3704CBAgQIECAAAECBAjMW0DgPu/50TsCQwrsSmPNcQ/5U/4xrrxYMLsWz9ciVBlDWZsExhfIX73k34uEo/trGfqp2UmecP10/XdjqPbT3w/Xvte2+b5UTNDedzd97fPWXC9he+bgpevP1zlf8/iNjQABAgQIECBAgACBjQsI3De+AAx/9QK7MsLsZD+UMsYu9pytfC6lCdmFVatfUga4UoH8W3G7g32Mfy9uj4rJvxuXgS33pb22L2n9rtxzHKEvAw9tMc3lf2u+faW3ORN/rF/2LgZIRwkQIECAAAECBAgQWL+AwH39c2yE2xNozmNPsDFkuNGEZQnKmoB9e7pGTGAdAvfh+m7EYSXUzu7xsc7s3pe22wbt+WXhsZT8e+YaTuA/S1MvraX870e+7peyw1lriQABAgQIECBAgACBmQoI3Gc6MbpFoINAwoyETgnZE7r3vXI8zLmUJly/9G3Q/QQIPEUgu9Wb42Hy+Ri7118aWP4N+er678gYA99f/83Lx9pL0F4r1b5e/rfnr6/c9pfy9VP7Jt1BgAABAgQIECBAgACB5QkI3Jc3Z3pM4F4gYdO7UvruZs95yudrybnKdiJaawSWJ5Aw/Q+lNMF6/n2Y+hr75aMZU9sd7fn37VjKaWqMDT0v/7uRI8zur9jvNuRgqAQIECBAgAABAgQIbFxA4L7xBWD4ixZIgJHQ6dBxFLdHxJxLG2Md99Cxe24jQOCBQP4NaML1ffk8IfsQf93SBz7Hx2RX+xi/sMsYBe19Zmfce//rlebtbh/XXesECBAgQIAAAQIECMxMQOA+swnRHQKVAodS70OHcC0he3YhNqXycaoRIPBkgWbn+q70Y1/KHML1W5Ixj4/JeAXtT16ADx7/1nEy/m/Nec+d3hEgQIAAAQIECBAgMLCA/ydoYFDNEZhA4NvyjEOL5wjZW2CpSuDJAtmhnl3rCZl3pUx95vq5PPP3pdQeUTXm8TExaBu0pz95QWvKGLvsn7w8Zvv443Wu7juYM/Mzjy4CBAgQIECAAAECBAhsRkDgvpmpNtCVCLwWarw0vBztYCf7SibeMFYpkDA94XY+JpScctd6ztXOMVIp52vZlY/5hV76UnONdXxMni9or5mB+dR57X+b3pcu5nsuAgQIECBAgAABAgQIbEZA4L6ZqTbQFQgkjPt7xTi+uQYcdndWYKlCYAKBP5Zn7K4lP8f5PB+nurLruwnWm4+3/z5kV31evHys7NBYx8fkhZs5/31f2Y9Us6O9BdaIVbN28kuS+0vgPiK6pgkQIECAAAECBAgQmKeAwH2e86JXBF4SeC3QeKR1fqFCQrf7QP6lr+U4ABcBAo8FdqVKs1s9nzdHwSTMnvrKz+3t7vXLGx3I0TF5H0T6/Oga6/iYL8uD8+9bTR+aPgraH83WtN/P/AncpzX3NAIECBAgQIAAAQIEZiogcJ/pxOgWgRcEXgs0psY63z0wwX3CvdvrUv4j5fbKERb3X5u6755HoI/ArtycUD0fU5ojYPZ9Gu15b3ab3+5ev/9ZfK359P/Zx8cI2ntO/oxuP5a+CNxnNCG6QoAAAQIECBAgQIDA8wQE7s+z92QCbQUSkCVM+23bG2dc/1L6lnJ71X6tOSZjxsPTtYUJ5GfsNlDPf9+WZw7n9liY/Iw0O9jb9mkOx8cI2tvO2vzrH0sXBe7znyc9JECAAAECBAgQIEBgAgGB+wTIHkFgQIHsqM2LUBMKul4WOL/w5Uv5Wsr99VLd1HGUzvpW1+7m56bZmZ6v3Za5jDq71rNeb3euD/FOhmcfH9MlaM9fxnws5VTKEAZzmeO19eNYBiRwX9usGg8BAgQIECBAgAABAp0EBO6d2NxE4OkCzYsF85JB1zQCLx2d0zz5/EoXLuXrKS9dCVUFiP3mLru1/3BtYlc+puRqAvV8P5/P9Wp2rTe71bNWXltLfcYQlzbHx3wq9Q8Drc9mR33+zWpznn2C9mMppz4Dd+9kApkrgftk3B5EgAABAgQIECBAgMCcBQTuc54dfSPwWKAJFPelahMy5uOajp15rLDOGucHw3r0/dz+1i8J3mp+6B3+u/Kwmr/KyDq+vZo13Xwt7aQs7WreX5A5a+YkIfvYv3Bpe3xM+nkopWZtPZoDQfsjoXV9/1iGI3Bf15waDQECBAgQIECAAAECHQUE7h3h3EZgQQL7F/pa+7U/Lmicukrg2QL5RcXlWhKo5/N8fMbV9viYHNtyHKCjgvYBEBfYRNaOwH2BE6fLBAgQIECAAAECBAgMLyBwH95UiwTWLPDSER27MuCU2+ulr9l5v+aVsZ2xNbv/z2XIzW71S/k8ZQ5XfvbaHh+T41769r9r0J6jlRL2n+aApw+dBY7lToF7Zz43EiBAgAABAgQIECCwJgGB+5pm01gILE/g/siQjKD2awkWa44pWZ6KHj9T4DZQTz/O1840H5/Zt0fPTuBZe1b6UMfHdA3a43y88X00Nt+ft0DmUuA+7znSOwIECBAgQIAAAQIEJhIQuE8E7TEECEwmsH/hSbvytZT766W6CRCbF3FO1mkPGl2geUFpHnS5lnx+vj65+Th6R0Z4QNZxdrW/tMbvHxeHoY6PeVfaOpbS5mWogvYRFsAMmsw6ELjPYCJ0gQABAgQIECBAgACB5wsI3J8/B3pAgMAyBF46Tic9f+3r+V4C0JSXLkfsDDPvzY702xfEXkrTKbnOwzxmlq1kbX0oJee111yfSqUhjo/5srRzfGNtv9QXQXvNDC23TtaDwH2586fnBAgQIECAAAECBAgMKCBwHxBTUwQIEBhQYP9GW2+F/Le31da7f9TQL8vN8SWXCpvzXZ28cDRBenPdhuoVza26yjOOjxG0r3pJ9RrcsdwtcO9F6GYCBAgQIECAAAECBNYiIHBfy0waBwECBAhsQWBfBjn18TGC9i2srH5jFLj383M3AQIECBAgQIAAAQIrEhC4r2gyDYUAAQIEViuwKyOb+vgYQftql9PgAxO4D06qQQIECBAgQIAAAQIEliogcF/qzOk3AQIECGxFoO3xMTmn/fuOODmGKEF72kjIX3s5o71Wap31jmVYjpRZ59waFQECBAgQIECAAAECLQUE7i3BVCdAgAABAhMJ7Mtzao+PSZfel/KxlNtz72u7uisVm6A9oXvtJWivlVp3vWMZnsB93XNsdAQIECBAgAABAgQIVAoI3CuhVCNAgAABAhMJJPDO8TGHyucl9E7dS2X922q78h8JSmuf1dybF+EeSzl1eKZb1ieQtSBwX9+8GhEBAgQIECBAgAABAh0EBO4d0NxCgAABAgRGEnh3DbJrdpkn9O56fMzn13v3LcchaG8JtpHqAveNTLRhEiBAgAABAgQIECDwWEDg/thIDQIECBAgMLZAgu/sav+s8kFdjo/pej57uvRTKTmu5lTZP9W2JXAsw7XDfVtzbrQECBAgQIAAAQIECLwiIHC3NAgQIECAwPMEpjg+ZncNQ78oH2t2zt9qOKP9eWtjSU8WuC9ptvSVAAECBAgQIECAAIFRBQTuo/JqnAABAgQIvCow9vExeQnqoZR9hzn4VO7JjvZzh3vdsj2BYxmyHe7bm3cjJkCAAAECBAgQIEDgBQGBu2VBgAABAgSmFUgAPtbxMbvSdhO05/O213flhoSnl7Y3qr9pgawZgfuml4DBEyBAgAABAgQIECDQCAjcrQUCBAgQIDCNQJfjY/JS1B8rupeXoB5KybExba9fyw3ZzZ7yS9ub1SdQBI6lCNwtBQIECBAgQIAAAQIECBQBgbtlQIAAAQIExhdoc3xMAvAE7acH3dqV7/fZze5FqOPP+1aeIHDfykwbJwECBAgQIECAAAECDwUE7g+JVCBAgAABAp0FPit3fltKPtZc35RKCS/f2mneZzd7+pBjY06lnGs6pA6BCoGsWTvcK6BUIUCAAAECBAgQIEBg/QIC9/XPsRESIECAwPQCOT4mAWR2qtdcP1zrvnZ8zK58P7vkD6Wk7bbXz+WG07Vc2t6sPoEHAsfrer+v9r58Id9zESBAgAABAgQIECBAYDMCAvfNTLWBEiBAgMBEAjnmJeeh1wTjbx0fk/uzmz2hfe0O+fshJsg/XctEw/eYDQocy5jtcN/gxBsyAQIECBAgQIAAAQL/KiBwtyoIECBAgMAwAgnFP5Syr2zuteNjcn9C+7wAtSa0v39cQvxTKQn9L5V9UY1AH4FDuTlHJ91fn67ruE/b7iVAgAABAgQIECBAgMCiBATui5ounSVAgACBGQoMcXzMroyrzwtQw2I3+wwXx0a6tC/j/NsLY82azPdcBAgQIECAAAECBAgQ2IyAwH0zU22gBAgQIDCCQJ/jY4Y4MsZu9hEmVZOtBV4L3C+lpX9r3ZobCBAgQIAAAQIECBAgsGABgfuCJ0/XCRAgQOBpAm2Pj/mu9DRnsf9SSs5lz3Exhx69z1Ed35dy6tGGWwkMKfBfrzTm/9YcUllbBAgQIECAAAECBAjMXsD/EzT7KdJBAgQIEJiRQNvjY34qfU/QfinlXSkJ2ncdx/Nzue90LWnPRWBOAq8F7v+3dDK/aHIRIECAAAECBAgQIEBgEwIC901Ms0ESIECAwAACbY+PyUtL/7OUBO7ZEd/1yu74Uynnrg24j8AEAlmff3zhOX+ydifQ9wgCBAgQIECAAAECBGYjIHCfzVToCAECBAjMVGBX+vVtKfvK/mU3748t6r/UbHbGJ7DPsTF2B1fCq/ZUgXN5+kuB+1/K109P7ZmHEyBAgAABAgQIECBAYEIBgfuE2B5FgAABAosSyPExOQbmOFGvc2RMAvYE7ZeJnukxBIYSyM/J1y809n7Cn6GhxqIdAgQIECBAgAABAgQIdBYQuHemcyMBAgQIrFggZ61/KGU38hh/Le03Lz89j/wszRMYU+BYGn8pcM+RSIcxH6xtAgQIECBAgAABAgQIzElA4D6n2dAXAgQIEHi2wK50oM3xMV37+0O58VSKI2O6CrpvbgL70qG/vdCprPV8z0WAAAECBAgQIECAAIFNCAjcNzHNBkmAAAECFQLZnZsXnOYomTGuHBlzupbLGA/QJoEnCuzLs18K3PM+g39/Yr88mgABAgQIECBAgAABApMKCNwn5fYwAgQIEJihQILC7GrfjdA3R8aMgKrJ2Qr81ys9839vznbKdIwAAQIECBAgQIAAgaEF/D9AQ4tqjwABAgSWIpCd7Dmn/TBChx0ZMwKqJmcvIHCf/RTpIAECBAgQIECAAAECYwsI3McW1j4BAgQIzFHgXenUsZQhj49xZMwcZ1qfphS4lIf9/oUH/ql87TxlRzyLAAECBAgQIECAAAECzxIQuD9L3nMJECBA4BkCn5WHZlf7fsCHf1faystPU1wEtixwLoP/4wsAAvctrwpjJ0CAAAECBAgQILAxAYH7xibccAkQILBRgexkb3a1D0GQ3ewfSzmV8ssQDWqDwAoEBO4rmERDIECAAAECBAgQIECgn4DAvZ+fuwkQIEBg/gL70sWhXoqa3ewJ2RMsuggQ+GeB/FzY4W5VECBAgAABAgQIECCwaQGB+6an3+AJECCwaoHsak/Q/kXPUdrN3hPQ7ZsRyF995C9J7q//KF/I91wECBAgQIAAAQIECBBYvYDAffVTbIAECBDYpMAQL0W1m32TS8egewgcy71fv3D/+/K1fM9FgAABAgQIECBAgACB1QsI3Fc/xQZIgACBTQn0fSnqr0WrOZv9sik5gyXQXyChusC9v6MWCBAgQIAAAQIECBBYsIDAfcGTp+sECBAg8N8COTrm81K+KiWBe5frp3JTE7R3ud89BAj8Yxe7wN1KIECAAAECBAgQIEBg0wIC901Pv8ETIEBg0QIJ2XM++6HHKHJsTIL2H3u04VYCbQV25YbfX2/KL4nyS6Nct5+/9N9tn/Oo/rlUSPk00M/AsbQjcH+k7vsECBAgQIAAAQIECKxaQOC+6uk1OAIECKxOYFdG9GUph1LyeZfLS1C7qLmnjcAfr5X3r3xs09ZUdU/lQTlr/dLjgcdyr8C9B6BbCRAgQIAAAQIECBBYvoDAfflzaAQECBDYgkBC9uxmT+ly5Wz270uxm72LnnteEkionp3p2ZW+u5b7HepLlDuWTn9Tyi8dOp97Be4d4NxCgAABAgQIECBAgMB6BATu65lLIyFAgMDaBBJivivlUEpz5EbbMf5QbjiVkrC9S4DY9nnqr0sg6+4PpTRB+r58nnWZsubrUgb3l1LOLQd5LPUF7i3RVCdAgAABAgQIECBAYF0CAvd1zafRECBAYA0COZv9UErX3ewxyJnUeYnqZQ0gxjCJQHas70pJuN6Urr/omaTDEzwk7zY4XX+ean6WjqWuwH2CifEIAgQIECBAgAABAgTmKyBwn+/c6BkBAgS2JJBgM8fGJCTf9Rh4zmc/lHLu0YZb1y2Q9ZUXlu5LaY6DyUfX2wIJ3/OXIvnZyhFN+e/bvwCIYUxf+vnN2fBHwAQIECBAgAABAgQIENiCgMB9C7NsjAQIEJivQAK7HBuToL3vbuKcO51Qz9Ex853vqXuW8Lc5EmZfPp/LGetNYB2Py7Xcf57/Tqg91nrOz9vh+jPz25EnRuA+MrDmCRAgQIAAAQIECBCYj4DAfT5zoScECBDYmkCOnhgiaP/pGhwmnHRtVyBhehOuP/tImKzJBOVNYN58vJSvpczpSvD+sZT8hclY159Kw+exGtcuAQIECBAgQIAAAQIE5iQgcJ/TbOgLAQIEtiGQYO9Yyq7ncLNLOO0kLHRtS+A+XN8/Yfg5vuhSSsL024/5fIlXDE+l5LidIa/88sGRPUOKaosAAQIECBAgQIAAgVkLCNxnPT06R4AAgVUJ7Mpovi0lwV7f64fSwKGUS9+G3D97gbzMtNmxnjU0xPppM+gExllnCdabnernNg0srG5+ro6lDBG8+zld2OTrLgECBAgQIECAAAEC/QUE7v0NtUCAAAECjwW+KFUStvc9pz272hMI5uWNrnUJ7K4h7758TMCe/55yZ3SzY/1cnnu7a31dyvWjaV6Cmp+3HNXT5vp0/Rk9tblJXQIECBAgQIAAAQIECKxBQOC+hlk0BgIECMxbIGe1HwfoopeiDoA4gybyS5fmrPVd+bwJdqfsWnatNzvWb3euT9mHJT0r85RfmjXzlY/NDvjsYm/Oqz9fXcd60euSzPSVAAECBAgQIECAAIGNCgjcNzrxhk2AAIGJBPJS1A89n5Wdx4dSEua5liOwK11NKHu7Wz2f9/0rh7YCCYTvw/W2bahPgAABAgQIECBAgAABAgSqBATuVUwqESBAgEAHgX25528d7ru95X35j2PPNtw+nkAC9N+WkrnOdf9xvCe/3LJwfWpxzyNAgAABAgQIECBAgACBfxIQuFsQBAgQIDCWwP8rDXfdzexli2PNSl27eVFprsxfc4767e70fV0zo9XKWf7ZtX6+fmzOXB/tgRomQIAAAQIECBAgQIAAAQI1AgL3GiV1CBAgQKCtQALZLrvbE6QeS/nY9oHqPxRodqOnYhOe3wbqu/L1lLld9y8zFa7PbYb0hwABAgQIECBAgAABAgT+R0DgbjEQIECAwBgCx9JoXpba9kqY2ryAsXnx4qV8LSVXE762bXct9ZsXjjbjuT8TfX8z0F35PGVJV/6yIXN9e+a6F3AuaQb1lQABAgQIECBAgAABAhsXELhvfAEYPgECBEYSyA71dyO1fdtswtmU5rr/73z9pa/l60OE97e7xmuGu3+lUtuv1zxrznV+us5LE6xnjvK5iwABAgQIECBAgAABAgQILFpA4L7o6dN5AgQIzE4gO7C/LeWL2fVMh54h0OxYbwJ1wfozZsEzCRAgQIAAAQIECBAgQGAyAYH7ZNQeRIAAgdULZEf7sZSuL0pdPdAKB9j8lUCC9NvSHA20wiEbEgECBAgQIECAAAECBAgQeF1A4G51ECBAgEBfgV1pILva930bcv9sBHLkS3N2+vnaq0v5mJJLoD6bqdIRAgQIECBAgAABAgQIEJiTgMB9TrOhLwQIEFieQJtd7Z/K8E6l5Nzz3bW0PQN9eULz6fFtiH4p3UrJdb5+bF5WO58e6wkBAgQIECBAgAABAgQIEFiYgMB9YROmuwQIEJiJwK7046+lJDB/dOXYka9K+f6NijmG5rat/U3dfL05pmbrAf2vxeL25aKX8t8pzXW++VyA/mhl+j4BAgQIECBAgAABAgQIEBhYQOA+MKjmCBAgsAGBQxnjh1Jqzmp/X+p9LKU5nmRontswPm3f/3e+truW+2fn67/v2aHbXeM1TZ1fqdT26zXPUocAAQIECBAgQIAAAQIECBCYWEDgPjG4xxEgQGDBAgnYc1b7FxVj+KHUya72293YFbepQoAAAQIECBAgQIAAAQIECBBYroDAfblzp+cECBCYUiA7xxO2PzpCJkeeHEvJrnYXAQIECBAgQIAAAQIECBAgQGBTAgL3TU23wRIgQKCTQHa0J2x/dIRMdrUfSrl0eoqbCBAgQIAAAQIECBAgQIAAAQILFxC4L3wCdZ8AAQIjCyRAT9j+1mVX+8iToHkCBAgQIECAAAECBAgQIEBgGQIC92XMk14SIEDgGQI1YXteGpp6zmp/xgx5JgECBAgQIECAAAECBAgQIDArAYH7rKZDZwgQIDAbgZzV/rdS3jpG5pvy/bwY1UWAAAECBAgQIECAAAECBAgQIFAEBO6WAQECBAjcCyRk/3spu1docoRMgvYTOgIECBAgQIAAAQIECBAgQIAAgf8VELhbDQQIECBwL5Cd7fs3wvZ8zxEy1g0BAgQIECBAgAABAgQIECBA4E5A4G5JECBAgMCtwLH8x9fCdouCAAECBAgQIECAAAECBAgQINBeQODe3swdBAgQWKvAvgwsu9tfu/5cvvH9WgdvXAQIECBAgAABAgQIECBAgACBvgIC976C7idAgMA6BHJu+3+W8tpLUt+X7x3XMVSjIECAAAECBAgQIECAAAECBAiMIyBwH8dVqwQIEFiawF9Lh794pdM/lK/vlzYg/SVAgAABAgQIECBAgAABAgQITC0gcJ9a3PMIECAwP4GvSpc+vNKtX8vXd6X8Mr9u6xEBAgQIECBAgAABAgQIECBAYF4CAvd5zYfeECBAYGqBz8oD//7GQ/9UvneeulOeR4AAAQIECBAgQIAAAQIECBBYooDAfYmzps8ECBAYTiAvQf38leac2z6cs5YIECBAgAABAgQIECBAgACBDQgI3DcwyYZIgACBNwReC9x/Kvdk97uLAAECBAgQIECAAAECBAgQIECgUkDgXgmlGgECBFYqkBel5oWpt5dz21c62YZFgAABAgQIECBAgAABAgQIjCsgcB/XV+sECBBYgkBC94+l/L6Un0vJf/+4hI7rIwECBAgQIECAAAECBAgQIEBgTgIC9znNhr4QIEDguQK78vjLc7vg6QQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgSFIJPXAAAHJ0lEQVQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgMD/b8eOaQAAABCG+XeNjZHUASnfCBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfAcH99zvLCRAgQIAAAQIECBAgQIAAAQIECBAgQCAkILiHzjCFAAECBAgQIECAAAECBAgQIECAAAECBH4FBPff7ywnQIAAAQIECBAgQIAAAQIECBAgQIAAgZCA4B46wxQCBAgQIECAAAECBAgQIECAAAECBAgQ+BUQ3H+/s5wAAQIECBAgQIAAAQIECBAgQIAAAQIEQgKCe+gMUwgQIECAAAECBAgQIECAAAECBAgQIEDgV0Bw//3OcgIECBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfAcH99zvLCRAgQIAAAQIECBAgQIAAAQIECBAgQCAkILiHzjCFAAECBAgQIECAAAECBAgQIECAAAECBH4FBPff7ywnQIAAAQIECBAgQIAAAQIECBAgQIAAgZCA4B46wxQCBAgQIECAAAECBAgQIECAAAECBAgQ+BUQ3H+/s5wAAQIECBAgQIAAAQIECBAgQIAAAQIEQgKCe+gMUwgQIECAAAECBAgQIECAAAECBAgQIEDgV0Bw//3OcgIECBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfAcH99zvLCRAgQIAAAQIECBAgQIAAAQIECBAgQCAkILiHzjCFAAECBAgQIECAAAECBAgQIECAAAECBH4FBPff7ywnQIAAAQIECBAgQIAAAQIECBAgQIAAgZCA4B46wxQCBAgQIECAAAECBAgQIECAAAECBAgQ+BUQ3H+/s5wAAQIECBAgQIAAAQIECBAgQIAAAQIEQgKCe+gMUwgQIECAAAECBAgQIECAAAECBAgQIEDgV0Bw//3OcgIECBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfgQGMc9WA31rv6AAAAABJRU5ErkJggg==';
+
diff --git a/vue-options-api-demos/inputs/signature/overview/styles.css b/vue-options-api-demos/inputs/signature/overview/styles.css
new file mode 100644
index 00000000..37703aeb
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/overview/styles.css
@@ -0,0 +1,59 @@
+.content-wrapper,
+.content-wrapper img {
+    width: 750px;
+    height: 250px;
+}
+
+.example {
+    display: flex;
+    justify-content: center;
+}
+
+.toolbar-tool {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.k-signature,
+.notes, .placeholder {
+    border-color: rgba(0, 0, 0, 0.08);
+    border-width: 0 1px;
+    border-radius: 0;
+}
+
+.k-upload .k-dropzone {
+    padding: 0;
+}
+
+.signature-wrapper {
+    height: 270px;
+}
+
+.signature-wrapper .k-signature {
+    width: 100%;
+    height: 100%;
+}
+
+.signature-wrapper img {
+    user-select: none;
+}
+
+.placeholder {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    border-width: 1px;
+    border-bottom-width: 0;
+    border-style: solid;
+}
+
+.notes {
+    font-style: italic;
+    border-width: 1px;
+    border-bottom-width: 0;
+    border-style: solid;
+    padding: 1em;
+}
diff --git a/vue-options-api-demos/inputs/signature/popup/disabled/main.js b/vue-options-api-demos/inputs/signature/popup/disabled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/popup/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/signature/popup/disabled/main.vue b/vue-options-api-demos/inputs/signature/popup/disabled/main.vue
new file mode 100644
index 00000000..730561f0
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/popup/disabled/main.vue
@@ -0,0 +1,23 @@
+<template>
+  <Signature :value="value" :maximizable="false" @change="onChange" />
+</template>
+<script>
+import { Signature } from '@progress/kendo-vue-inputs';
+import { sampleSignature } from './sample-signature';
+
+export default {
+  components: {
+    Signature,
+  },
+  data() {
+    return {
+      value: sampleSignature,
+    };
+  },
+  methods: {
+    onChange(e) {
+      this.value = e.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/signature/popup/disabled/sample-signature.js b/vue-options-api-demos/inputs/signature/popup/disabled/sample-signature.js
new file mode 100644
index 00000000..82d3e903
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/popup/disabled/sample-signature.js
@@ -0,0 +1,2 @@
+export const sampleSignature = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABdwAAAH4CAYAAABQRy9XAAAgAElEQVR4XuzdjZUjt4EuUL8I7BeBuRFYG4HpCCRHIDqC0UYgTgQzikBUBNZEYCoCSxEsFcGTItiHb83apenuJuqX9XPrHJxudaNQwAV6vPs1GvV/fuMiQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEegv8n94taIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBD4jcDdIiBAgAABAgQIECBAgAABAgQIECBAgAABAgMICNwHQNQEAQIECBAgQIAAAQIECBAgQIAAAQIECBAQuFsDBAgQIECAAAECBAgQIECAAAECBAgQIEBgAAGB+wCImiBAgAABAgQIECBAgAABAgQIECBAgAABAgJ3a4AAAQIECBAgQIAAAQIECBAgQIAAAQIECAwgIHAfAFETBAgQIECAAAECBAgQIECAAAECBAgQIEBA4G4NECBAgAABAgQIECBAgAABAgQIECBAgACBAQQE7gMgaoIAAQIECBAgQIAAAQIECBAgQIAAAQIECAjcrQECBAgQIECAAAECBAgQIECAAAECBAgQIDCAgMB9AERNECBAgAABAgQIECBAgAABAgQIECBAgAABgbs1QIAAAQIECBAgQIAAAQIECBAgQIAAAQIEBhAQuA+AqAkCBAgQIECAAAECBAgQIECAAAECBAgQICBwtwYIECBAgAABAgQIECBAgAABAgQIECBAgMAAAgL3ARA1QYAAAQIECBAgQIAAAQIECBAgQIAAAQIEBO7WAAECBAgQIECAAAECBAgQIECAAAECBAgQGEBA4D4AoiYIECBAgAABAgQIECBAgAABAgQIECBAgIDA3RogQIAAAQIECBAgQIAAAQIECBAgQIAAAQIDCAjcB0DUBAECBAgQIECAAAECBAgQIECAAAECBAgQELhbAwQIECBAgAABAgQIECBAgAABAgQIECBAYAABgfsAiJogQIAAAQIECBAgQIAAAQIECBAgQIAAAQICd2uAAAECBAgQIECAAAECBAgQIECAAAECBAgMICBwHwBREwQIECBAgAABAgQIECBAgAABAgQIECBAQOBuDRAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQEEBO4DIGqCAAECBAgQIECAAAECBAgQIECAAAECBAgI3K0BAgQIECBAgAABAgQIECBAgAABAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAYG7NUCAAAECBAgQIECAAAECBAgQIECAAAECBAYQELgPgKgJAgQIECBAgAABAgQIECBAgAABAgQIECAgcLcGCBAgQIAAAQIECBAgQIAAAQIECBAgQIDAAAIC9wEQNUGAAAECBAgQIECAAAECBAgQIECAAAECBATu1gABAgQIECBAgAABAgQIECBAgAABAgQIEBhAQOA+AKImCBAgQIAAAQIECBAgQIAAAQIECBAgQICAwN0aIECAAAECBAgQIECAAAECBAgQIECAAAECAwgI3AdA1AQBAgQIECBAgAABAgQIECBAgAABAgQIEBC4WwMECBAgQIAAAQIECBAgQIAAAQIECBAgQGAAAYH7AIiaIECAAAECBAgQIECAAAECBAgQIECAAAECAndrgAABAgQIECBAgAABAgQIECBAgAABAgQIDCAgcB8AURMECBAgQIAAAQIECBAgQIAAAQIECBAgQEDgbg0QIECAAAECBAgQIECAAAECBAgQIECAAIEBBATuAyBqggABAgQIECBAgAABAgQIECBAgAABAgQICNytAQIECBAgQIAAAQIECBAgQIAAAQIECBAgMICAwH0ARE0QIECAAAECBAgQIECAAAECBAgQIECAAAGBuzVAgAABAgQIECBAgAABAgQIECBAgAABAgQGEBC4D4CoCQIECBAgQIAAAQIECBAgQIAAAQIECBAgIHC3BggQIECAAAECBAgQIECAAAECBAgQIECAwAACAvcBEDVBgAABAgQIECBAgAABAgQIECBAgAABAgQE7tYAAQIECBAgQIAAAQIECBAgQIAAAQIECBAYQEDgPgCiJggQIECAAAECBAgQIECAAAECBAgQIECAgMDdGiBAgAABAgQIECBAgAABAgQIECBAgAABAgMICNwHQNQEAQIECBAgQIAAAQIECBAgQIAAAQIECBAQuFsDBAgQIECAAAECBAgQIECAAAECBAgQIEBgAAGB+wCImiBAgAABAgQIECBAgAABAgQIECBAgAABAgJ3a4AAAQIECBAgQIAAAQIECBAgQIAAAQIECAwgIHAfAFETBAgQIECAAAECBAgQIECAAAECBAgQIEBA4G4NECBAgAABAgQIECBAgAABAgQIECBAgACBAQQE7gMgaoIAAQIECBAgQIAAAQIECBAgQIAAAQIECAjcrQECBAgQIECAAAECBAgQIECAAAECBAgQIDCAgMB9AERNECBAgAABAgQIECBAgAABAgQIECBAgAABgbs1QIAAAQIECBAgQIAAAQIECBAgQIAAAQIEBhAQuA+AqAkCBAgQIECAAAECBAgQIECAAAECBAgQICBwtwYIECBAgAABAgQIECBAgAABAgQIECBAgMAAAgL3ARA1QYAAAQIECBAgQIAAAQIECBAgQIAAAQIEBO7WAAECBAgQIECAAAECBAgQIECAAAECBAgQGEBA4D4AoiYIECBAgAABAgQIECBAgAABAgQIECBAgIDA3RogQIAAAQIECBAgQIAAAQIECBAgQIAAAQIDCAjcB0DUBAECBAgQIECAAAECBAgQIECAAAECBAgQELhbAwQIECBAgAABAgQIECBAgAABAgQIECBAYAABgfsAiJogQIAAAQIECBAgQIAAAQIECBAgQIAAAQICd2uAAAECBAgQIECAAAECBAgQIECAAAECBAgMICBwHwBREwQIECBAgAABAgQIECBAgAABAgQIECBAQOBuDRAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQEEBO4DIGqCAAECBAgQIECAAAECBAgQIECAAAECBAgI3K0BAgQIECBAgAABAgQIECBAgAABAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAYG7NUCAAAECBAgQIECAAAECBAgQIECAAAECBAYQELgPgKgJAgQIECBAgAABAgQIECBAgAABAgQIECAgcLcGCBAgQIAAAQIECBAgQIAAAQIECBAgQIDAAAIC9wEQNUGAAAECBAgQIECAAAECBAgQIECAAAECBATu1gABAgQIECBAgAABAgQIECBAgAABAgQIEBhAQOA+AKImCBAgQIAAAQIECBAgQIAAAQIECBAgQICAwN0aIECAAAECBAgQIECAAAECBAgQIECAAAECAwgI3AdA1AQBAgQIECBAgAABAgQIECBAgAABAgQIEBC4WwMECBAgQIAAAQIECBAgQIAAAQIECBAgQGAAAYH7AIiaIECAAAECBAgQIECAAAECBAgQIECAAAECAndrgAABAgQIECBAgAABAgQIECBAgAABAgQIDCAgcB8AURMECBAgQIAAAQIECBAgQIAAAQIECBAgQEDgbg0QIECAAAECBAgQIECAAAECBAgQIECAAIEBBATuAyBqggABAgQIECBAgAABAgQIECBAgAABAgQICNytAQIECBAgQIAAAQIECBAgQIAAAQIECBAgMICAwH0ARE0QIECAAAECBAgQIECAAAECBAgQIECAAAGBuzVAgAABAgQIECBAgAABAgQIECBAgAABAgQGEBC4D4CoCQIECBAgQIAAAQIECBAgQIAAAQIECBAgIHC3BggQIECAAAECBAgQIECAAAECBAgQIECAwAACAvcBEDVBgAABAgQIECBAgAABAgQIECBAgAABAgQE7tYAAQIECBAgQIAAAQIECBAgQIAAAQIECBAYQEDgPgCiJggQIECAAAECBAgQIECAAAECBAgQIECAgMDdGiBAgAABAgQIECBAgAABAgQIECBAgAABAgMICNwHQNQEAQIECBAgQIAAAQIECBAgQIAAAQIECBAQuFsDBAgQIECAAAECBAgQIECAAAECBAgQIEBgAAGB+wCImiBAgAABAgQIECBAgAABAgQIECBAgAABAgJ3a4AAAQIECBAgQIAAAQIECBAgQIAAAQIECAwgIHAfAFETBAgQIECAAAECBAgQIECAAAECBAgQIEBA4G4NECBAgAABAgQIECBAgAABAgQIECBAgACBAQQE7gMgaoIAAQIECBAgQIAAAQIECBAgQIAAAQIECAjcrQECBAgQIECAAAECBAgQIECAAAECBAgQIDCAgMB9AERNECBAgAABAgQIECBAgAABAgQIECBAgAABgbs1QIAAAQIECBAgQIAAAQIECBAgQIAAAQIEBhAQuA+AqAkCBAgQIECAAAECBAgQIECAAAECBAgQICBwtwYIECBAgAABAgQIECBAgAABAgQIECBAgMAAAgL3ARA1QYAAAQIECBAgQIAAAQIECBAgQIAAAQIEBO7WAAECBAgQIECAAAECBAgQIECAAAECBAgQGEBA4D4AoiYIECBAgAABAgQIECBAgAABAgQIECBAgIDA3RogQIAAAQIECBAgQIAAAQIECBAgQIAAAQIDCAjcB0DUBAECBAgQIECAAAECBAgQIECAAAECBAgQELhbAwQIECBAgAABAgQIECBAgAABAgQIECBAYAABgfsAiJogQIAAAQIECBAgQIAAAQIECBAgQIAAAQICd2uAAAECBAgQIECAAAECBAgQIECAAAECBAgMICBwHwBREwQIECBAgAABAgQIECBAgAABAgQIECBAQOBuDRAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQEEBO4DIGqCAAECBAgQIECAAAECBAgQIECAAAECBAgI3K0BAgQIECBAgAABAgQIECBAgAABAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAYG7NUCAAAECBAgQIECAAAECBAgQIECAAAECBAYQELgPgKgJAgQIECBAgAABAgQIECBAgAABAgQIECAgcLcGCBAgQIAAAQIECBAgQIAAAQIECBAgQIDAAAIC9wEQNUGAAAECBAgQIECAAAECBAgQIECAAAECBATu1gABAgQIECBAgAABAgQIECBAgAABAgQIEBhAQOA+AKImCBAgQIAAAQIECBAgQIAAAQIECBAgQICAwN0aIECAAAECBAgQIECAAAECBAgQIECAAAECAwgI3AdA1AQBAgQIECBAgAABAgQIECBAgAABAgQIEBC4WwMECBAgQIAAAQIECBAgQIBAF4HflZt+6XKjewgQIECAwFoFBO5rnVnjIkCAAAECBAgQIECAAAEC4wh8WZo9lrIr5VLKn0v5cZxHaZUAAQIECCxLQOC+rPnSWwIECBAgQIAAAQIECBAg8CyBBOzflrK/60B2uf9bKXa7P2tmPJcAAQIEZiMgcJ/NVOgIAQIECBAgQIAAAQIECBCYpUCOjnlXyvGN3v2lfO80y97rFAECBAgQmFBA4D4htkcRIECAAAECBAgQIECAAIGFCXxR+vuhlN2Dfr8v3z8ubGy6S4AAAQIEBhcQuA9OqkECBAgQIECAAAECBAgQILB4gQTsCdoTuD+6fi0VPivl8qii7xMgQIAAgbULCNzXPsPGR4AAAQIECBAgQIAAAQIE6gVqjo+5be2n8h+HUrw0td5YTQIECBBYsYDAfcWTa2gECBAgQIAAAQIECBAgQKCFwJel7rGUXcU92dWeuh8r6qpCgAABAgQ2IyBw38xUGygBAgQIECBAgAABAgQIEHhRYF+++m1l0J4GPpXyVSkXngQIECBAgMA/CwjcrQgCBAgQIECAAAECBAgQILBNgQTtX5eSjzXXz6XSoZRzTWV1CBAgQIDAFgUE7lucdWMmQIAAAQIECBAgQIAAgS0L7MrgE7QnPK+93peKx9rK6hEgQIAAga0KCNy3OvPGTYAAAQIECBAgQIAAAQJbE8gLUT+0DNodH7O1VWK8BAgQINBLQODei8/NBAgQIECAAAECBAgQIEBg9gIJ2t+VknPX83nN9dO1/rmmsjoECBAgQIDAPwQE7lYCAQIECBAgQIAAAQIECBBYr8CXZWgfS6kN2nNO+7GU03pJjIwAAQIECIwnIHAfz1bLBAgQIECAAAECBAgQIEDgWQJflAfn+JhdZQd+LfUSzB8r66tGgAABAgQIvCAgcLcsCBAgQIAAAQIECBAgQIDAegT2ZSh5IWo+1lxN0J6w/ZeaG9QhQIAAAQIEXhcQuFsdBAgQIECAAAECBAgQIEBg+QK7MoTsaM/O9trru1LxWMql9gb1CBAgQIAAgbcFBO5WCAECBAgQIECAAAECBAgQWK7ArnQ9O9oPLYbww7W+oL0FmqoECBAgQKBGQOBeo6QOAQIECBAgQIAAAQIECBCYl0BegvqulK9KqX0haoL2YynneQ1FbwgQIECAwHoEBO7rmUsjIUCAAAECBAgQIECAAIFtCCRoT3BeG7T/fK1/2gaPURIgQIAAgecJCNyfZ+/JBAgQIECAAAECBAgQIECgjcCX1+B8V3lTXoiaHfCC9kow1QgQIECAQF8BgXtfQfcTIECAAAECBAgQIECAAIFxBfal+bwQ9bPKxyRo/3gtv1TeoxoBAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAgREEErAnaN+3aPu7Uje72gXtLdBUJUCAAAECQwkI3IeS1A4BAgQIECBAgAABAgQIEBhGYFea+bqUQ4vmPl2D9kuLe1QlQIAAAQIEBhYQuA8MqjkCBAgQIECAAAECBAgQINBRIC9BTdCeHeq11w+l4rGUc+0N6hEgQIAAAQLjCQjcx7PVMgECBAgQIECAAAECBAgQqBFI0P6ulATt+bzm+rlUOpRyrqmsDgECBAgQIDCNgMB9GmdPIUCAAAECBAgQIECAAAECLwl8Wb54LGVXyZOgPfVPlfVVI0CAAAECBCYUELhPiO1RBAgQIECAAAECBAgQIEDgKvBF+ZgXou4qRX4t9T5eixeiVqKpRoAAAQIEphYQuE8t7nkECBAgQIAAAQIECBAgsGWBfRl8zmnPx9rrvaC9lko9AgQIECDwXAGB+3P9PZ0AAQIECBAgQIAAAQIEtiGwK8PMjvbsbK+9visVj6Vcam9QjwABAgQIEHiugMD9uf6eToAAAQIECBAgQIAAAQLrFtiV4WVH+6HFMH8odfMC1R9b3KMqAQIECBAgMAMBgfsMJkEXCBAgQIAAAQIECBAgQGB1Ar8rI3p3Dc7zec2VoP1YyrmmsjoECBAgQIDA/AQE7vObEz0iQIAAAQIECBAgQIAAgWULZEd7dqjXBu0/X4P207KHrfcECBAgQICAwN0aIECAAAECBAgQIECAAAECwwh8eQ3Od5XN/Xqt/7GyvmoECBAgQIDAzAUE7jOfIN0jQIAAAQIECBAgQIAAgdkL7EsP80LUzyp7mqA9IXvKL5X3qEaAAAECBAgsQEDgvoBJ0kUCBAgQIECAAAECBAgQmKVAgvYcH5OPtdd3pWKOmxG014qpR4AAAQIEFiQgcF/QZOkqAQIECBAgQIAAAQIECMxCYFd6kaD90KI3n65B+6XFPaoSIECAAAECCxMQuC9swnSXAAECBAgQIECAAAECBJ4mkJeg5uiYNkH7D6X+sZTz03rtwQQIECBAgMBkAgL3yag9iAABAgQIECBAgAABAgQWKpCg/V0pOQomn9dcP5dKh1LONZXVIUCAAAECBNYhIHBfxzwaBQECBAgQIECAAAECBAiMI5Cg/VhKm6A99U/jdEerBAgQIECAwJwFBO5znh19I0CAAAECBAgQIECAAIFnCXx5Ddp3lR34tdT7eL2n8hbVCBAgQIAAgbUJCNzXNqPGQ4AAAQIECBAgQIAAAQJ9BPbl5pzT/lllI03QnrD9l8p7VCNAgAABAgRWKiBwX+nEGhYBAgQIECBAgAABAgQItBJI0P51KflYe31XKh5LudTeoB4BAgQIECCwbgGB+7rn1+gIECBAgAABAgQIECBA4G2BXfl2gvZDC6hPpW5eoCpob4GmKgECBAgQ2IKAwH0Ls2yMBAgQIECAAAECBAgQIHAvkJeg5uiYNkH7D6X+sZQzTgIECBAgQIDASwICd+uCAAECBAgQIECAAAECBLYkkKD9XSnZoZ7Pa66fr/W/r6msDgECBAgQILBdAYH7dufeyAkQIECAAAECBAgQILA1gRwd0zZoP5Z7TluDMl4CBAgQIECgm4DAvZubuwgQIECAAAECBAgQIEBgOQJflq4mON9VdvnXUu/jtfxSeY9qBAgQIECAAIHfCNwtAgIECBAgQIAAAQIECBBYq8C+DOxbQftap9e4CBAgQIDA/AQE7vObEz0iQIAAAQIECBAgQIAAgX4CCdpzfEw+1l7flYrHUi61N6hHgAABAgQIELgXELhbEwQIECBAgAABAgQIECCwFoFdGciHUr5oMaBPpW7OdRe0t0BTlQABAgQIEHhZQOBuZRAgQIAAAQIECBAgQIDA0gUStGdH+6HFQH4odY+lnFvcoyoBAgQIECBA4E0BgbsFQoAAAQIECBAgQIAAAQJLFfhd6fi7a3BeO4afS8WDoL2WSz0CBAgQIECgjYDAvY2WugQIECBAgAABAgQIECAwB4EmaM9RMPm85krQfizlVFNZHQIECBAgQIBAFwGBexc19xAgQIAAAQIECBAgQIDAswS+LA/+WEpt0P7rNWjPPS4CBAgQIECAwKgCAvdReTVOgAABAgQIECBAgAABAgMJJGg/lrKrbC9Be0L2lF8q71GNAAECBAgQINBLQODei8/NBAgQIECAAAECBAgQIDCywL60/6GUz1o857tSN8fNCNpboKlKgAABAgQI9BcQuPc31AIBAgQIECBAgAABAgQIDC+QoP3rUvKx9krQfizlUnuDegQIECBAgACBIQUE7kNqaosAAQIECBAgQIAAAQIE+grsSgPZ0f5Fi4Z+KHWzo/3HFveoSoAAAQIECBAYXEDgPjipBgkQIECAAAECBAgQIECgg0CC9uxoP7S4N0H7sZRzi3tUJUCAAAECBAiMJiBwH41WwwQIECBAgAABAgQIECBQIfC7UidBe3ao114/X+t/X3uDegQIECBAgACBKQQE7lMoewYBAgQIECBAgAABAgQI3AskaH93Dc7zec2VoP1YyqmmsjoECBAgQIAAgakFBO5Ti3seAQIECBAgQIAAAQIECDQ72muD9l8L2cdr2E6PAAECBAgQIDBbAYH7bKdGxwgQIECAAAECBAiMIrArrf6+lM9KSdi5v3lKvpfSXHkB5ftSHNsxylRsstEvy6iPd+vsLYgmaE/Y/ssmxQyaAAECBAgQWJSAwH1R06WzBAgQIECAAAECBFoJJFD/Yyn7UhKw52PbKyHnv5dyaXuj+gRuBNoG7bn1m1KOpQjaLSUCBAgQIEBgMQIC98VMlY4SIECAAAECBAgQeCjQBOxflJr7UnYP76ir8OdSzS73Oiu1/lkg6zDHx+Rj7fVdqXgs5VJ7g3oECBAgQIAAgbkICNznMhP6QYAAAQIECBAgQKCbwK7cll3sCdlTxrgE7mOorrvNfRle26D9h3LPoZTLummMjgABAgQIEFizgMB9zbNrbAQIECBAgAABAmsVyE72HNGRcDJHxYx9/ak84Dz2Q7S/CoFdGcWHUtr88idB+9EaW8X8GwQBAgQIENi8gMB980sAAAECBAgQIECAwIIEErKPuZP9NQr/f8OCFsmTupqgPTvaDy2e/1Op+5WgvYWYqgQIECBAgMDsBfwfzrOfIh0kQIAAAQIECBDYuECCzHfXIDM724e4sqP4ci0/lo95KeVfS3mp/U/l6212Kw/RP20sRyBrJkF7gvPa6+dS8VjKqfYG9QgQIECAAAECSxEQuC9lpvSTAAECBAgQIEBgawLNkTH7ngPPLuKE6udrubzQXsLPhKYvXc5v7zkBK709QXt+EZSgvfYXQYL2lS4GwyJAgAABAgT+V0DgbjUQIECAAAECBAgQmI9AE2IeSpd2Hbv1a7nv+2s5l4/Zvf7WlTPg//5KhQSkXfvRsftuW4BAs6O9NmjPmvxYynEBY9NFAgQIECBAgEAvAYF7Lz43EyBAgAABAgQIEBhEIKF3c2xMlwYTjN+G7LVtJDBN2L575QYvS62V3Ea9/NXF8Y31cq/QBO0J2x/94mcbgkZJgAABAgQIrF5A4L76KTZAAgQIECBAgACBGQt8XvqWIzn2HfrY7GRPmJkjY9peCdv/VkrC/peunPPepV9t+6H+/AXaBu0Z0TelHEsRtM9/fvWQAAECBAgQGFBA4D4gpqYIECBAgAABAgQIVAgk6E7QnjByV1H/vkpeYnoqJTva+1wJ2/evNJAwP30TlvYRXv69WR8fSnntlzIvjfC769q+LH/4RkCAAAECBAgQaC8gcG9v5g4CBAgQIECAAAECXQS6vGSyeU4C8FMp2c0+RJD5bWnn8MYgHCXTZYbXc8++DCXntOdj7ZW/iMiaGmJ91j5TPQIECBAgQIDA7AQE7rObEh0iQIAAAQIECBBYmcCujCfhZcLItldCzNO1tL33tfqPwvb35cbjUA/TzqIEspM9O9r3LXqdNZr1cm5xj6oECBAgQIAAgdUKCNxXO7UGRoAAAQIECBAg8GSBhJZtdwk3Xc6xHF3PZn9t2Nlh/9dS0q/Xrjz38GQ3j59eYHddq23mXtA+/Tx5IgECBAgQILAAAYH7AiZJFwkQIECAAAECBBYlkBdMJrjct+z1z6X+qZQE7UOfnZ6dywnbd2/0SdjecsJWUD3roe1fX2SdHq9rdQUEhkCAAAECBAgQGFZA4D6sp9YIECBAgAABAgS2KdDnRag/FbKE7KeR6L4o7eYYmfTxtSt9aPNizJG6qtmJBLIWErR/1eJ5gmpWyTgAACAASURBVPYWWKoSIECAAAEC2xUQuG937o2cAAECBAgQIECgv0CfF6GOfSTHrgwv53EncH/rSti+L2XoXfX9dbUwtECX9ZoX9uYXQsehO6M9AgQIECBAgMAaBQTua5xVYyJAgAABAgQIEBhbYFce0PYojqZPObol4eVlxE6+uz7jrV3tefynUg6lCNtHnIwZNN0naB/jiKMZkOgCAQIECBAgQGAcAYH7OK5aJUCAAAECBAgQWKfAvgyrOaO9zQibXcJjh5e70qkcH5N+Prq+KRXaHCnyqD3fn6dA7S9fmt5PtVbnqaVXBAgQIECAAIGeAgL3noBuJ0CAAAECBAgQ2IRAAuzsaM/HNlfOvW7OZx97F3n6d6zoXALVBO2nirqqLFcgvxjKeti1GMIUf33RojuqEiBAgAABAgSWJyBwX96c6TEBAgQIECBAgMB0As1u9n3LR479ItTb7qRv2dVeE6ymX4dSfmw5HtWXIyBoX85c6SkBAgQIECCwQgGB+won1ZAIECBAgAABAgR6C3QJLfPQsV+EejuwBOy1x8fkvvelHHvLaGCuAl3WbM7wz187XOY6KP0iQIAAAQIECCxNQOC+tBnTXwIECBAgQIAAgTEFuoSW6c+UR3HkBZg5Pqb2/PX8EiB17Wofc+U8r+39dT3kY+015S+GavukHgECBAgQIEBgFQIC91VMo0EQIECAAAECBAj0EEiA/Xkpx1J2LdrJWeinUnJG+6XFfX2q5hcCeV76/OhK/zKm1HetT2BfhtT2vQKC9vWtAyMiQIAAAQIEZiYgcJ/ZhOgOAQIECBAgQIDAZAIJrd+Vkt3fNQF207EE2QmxU8Z+EWrzzISrH0r5rFInweqhlEtlfdWWI5C1IGhfznzpKQECBAgQILAxAYH7xibccAkQIECAAAECBP47XO8StP9c7juWcprQMAF7gvaErDVX+phfIHxfU1mdRQlkDbQN2p+xZheFqrMECBAgQIAAgaEFBO5Di2qPAAECBAgQIEBgrgJLCtp313D1UInZ7Lo/VtZXbTkCgvblzJWeEiBAgAABAgR+I3C3CAgQIECAAAECBNYusKSgPX3NjvbaoD1zN+ULW9e+VuY0PkH7nGZDXwgQIECAAAEClQIC90oo1QgQIECAAAECBBYn0DVoz/nnOZ99ymNZuvTVCzAXtySrOrwrtXJ0zKGq9j8qOTqmBZaqBAgQIECAAIExBQTuY+pqmwABAgQIECBA4BkCXcLr9PNZAXbC1TYvbs3xMal/egauZ44msCsttw3an/EC39EANEyAAAECBAgQWIOAwH0Ns2gMBAgQIECAAAECjcCX5ZNjKQkva69nBe1t+ypcrZ3RZdXLWhW0L2vO9JYAAQIECBAg8KqAwN3iIECAAAECBAgQWINA2/A6Y15K0J6+vi8lx9z8sobJMob/FtiVImi3GAgQIECAAAECKxMQuK9sQg2HAAECBAgQILAxgbUH7V6Iur4FLWhf35waEQECBAgQIEDgfwQE7hYDAQIECBAgQIDAEgXWHrR/KpOSc9ovS5wcfX5R4LPy1XelHFr4OEaoBZaqBAgQIECAAIE5CAjc5zAL+kCAAAECBAgQIFArsC8VP5SS8LL2WtLRMc/qa62leu0FsmZzdEw+1l6C9lop9QgQIECAAAECMxMQuM9sQnSHAAECBAgQIEDgRYEuoeWzwusl7b633MYT6LJmBe3jzYeWCRAgQIAAAQKTCAjcJ2H2EAIECBAgQIAAgY4C2cmeHe0JL2uvn0rFHMdyrr1hoHqC9oEgF95M1qod7QufRN0nQIAAAQIECHQVELh3lXMfAQIECBAgQIDAmAK7a2h5aPGQn0vdYymnFvf0rfq70sDn1+emz7XXs3bf1/ZPvfYC+YVL1uu+xa12tLfAUpUAAQIECBAgsAQBgfsSZkkfCRAgQIAAAQLbEdiVoWZ3cILL2utZQXtegJmd9Anday9Be63Ucup1+csGQfty5ldPCRAgQIAAAQKtBATurbhUJkCAAAECBAgQGEkgoXXbAFvQPtJkaPahQNe/bBC0P6RVgQABAgQIECCwbAGB+7LnT+8JECBAgAABAksX6BK0J7Q8lvJxwsF36We6Z0f7hJM0waO6rgNB+wST4xEECBAgQIAAgTkICNznMAv6QIAAAQIECBDYpkDbozieEVp2DVgF7eta07synLZHHUXgGWt2XfJGQ4AAAQIECBBYmIDAfWETprsECBAgQIAAgRUI7MsYvi0lIWbt9b5UzI72X2pvGKBefiGQZzqjfQDMhTaRtdq8DLXNEJrjjr6feM226aO6BAgQIECAAAECIwgI3EdA1SQBAgQIECBAgMCLAgkvs0s4H2uv70rFYymX2hsGqNd2530eaUf7APAzaqIJ2dus1XT/Ge8VmBGbrhAgQIAAAQIECAjcrQECBAgQIECAAIGxBXblAW2P4xC0jz0r2r8XyF8yJGj/qpSs2TZXfuFyupY296lLgAABAgQIECCwMgGB+8om1HAIECBAgAABAjMSSID5oZRDiz49Y6f4/trPz2bezxbdU7WFwK7UfXddp22OD8ojnrFeWwxNVQIECBAgQIAAgakFBO5Ti3seAQIECBAgQGD9Al1eNPpTYcnO4vOEPPvyrLZH3AhYJ5ygkR+V+U/Q/kWH5zzjLzA6dNMtBAgQIECAAAECUwsI3KcW9zwCBAgQIECAwLoF2r5o9BlnXu/KFOSlrQlcay9Be63U/Os1x8a0+YuGjOrXUk6l5EW6l/kPUw8JECBAgAABAgSeISBwf4a6ZxIgQIAAAQIE1iewL0NKiL2rHFrCy+M1vKy8pXe19K3tWfLP2Hnfe6Aa+BeBzH0TtLc9Nia/FErIfirlF7YECBAgQIAAAQIE3hIQuFsfBAgQIECAAAECfQSySzjntO8rG0nQnvAyZarwMgFrgvYcWVN7PWPnfW3f1KsXyLpM0H6ov+V/anoRagc0txAgQIAAAQIEti4gcN/6CjB+AgQIECBAgEA3gV25re1u8anPve5ylrygvdt6mNtdXY+NyTiyTk+lnOc2KP0hQIAAAQIECBCYv4DAff5zpIcECBAgQIAAgTkJdAmxs1P4UMplwoHkZZjHUmqPD2l23uce1zIFdqXbXY+NcT77MudcrwkQIECAAAECsxMQuM9uSnSIAAECBAgQIDBbgbYvRH3Gi0bTx4TmCV9rrmcccVPTL3XqBfalatdjY5q/aPi+tDHVEUf1I1OTAAECBAgQIEBgcQIC98VNmQ4TIECAAAECBCYXSKDZ5oWozziWpW0fg/hNKUdB6+TraYgH5i8XPr/O365Dg/llUN4jkKDdRYAAAQIECBAgQGAwAYH7YJQaIkCAAAECBAisTqDrC1GPE0rsy7Nylnw+1l5TnyVf2y/1HgvsrvP9RflYe1xQ02r+miEBe9bn5fGj1CBAgAABAgQIECDQXkDg3t7MHQQIECBAgACBtQskyPxQyqHFQKfeLb679jHBa+31jLPka/um3tsC2c3+VSn7DlD5i4vsZj+V4tiYDoBuIUCAAAECBAgQqBcQuNdbqUmAAAECBAgQ2IJAdosn2KzdPfzpWv8yEc6uPCd9PLR43jPOkm/RPVVfEchcN2ez5/O2l2Nj2oqpT4AAAQIECBAg0FtA4N6bUAMECBAgQIAAgVUItH3Z6NQhdn4B8K6UYwvt7Gw+lHJucY+qzxfYly50fQmqY2OeP396QIAAAQIECBDYtIDAfdPTb/AECBAgQIAAgf8+oqPNGehTvxC1Cdrb7Lqfuo+WUX+Bvi9BbeY8Z7Q7Nqb/fGiBAAECBAgQIECgo4DAvSOc2wgQIECAAAECCxfYXYP2Q+U4snM452AfK+sPUS27nPPM2uNtntHHIca55TbyYt785UKXl6DGLS/APZVy3jKisRMgQIAAAQIECMxHQOA+n7nQEwIECBAgQIDAFAJddown1MwO86l2Drc93qYJ2hPOT9XHKeZqzc9ojozZdxhkdrMnZE+5dLjfLQQIECBAgAABAgRGExC4j0arYQIECBAgQIDA7ATaBtk5p/0wYai5L8/6UEp2PddeU/8yoLZf6v2rwK58KbvZs6Zq/2rhtpWsx9O18CVAgAABAgQIECAwSwGB+yynRacIECBAgAABAoMK7Etrbc9pTyh6HrQXrzfWtn9pKUH7sZTLRH30mO4CfXazNy9BzV8v/Ni9C+4kQIAAAQIECBAgMI2AwH0aZ08hQIAAAQIECDxDYFcemqD9UPnwhJvHUhJuTnFlJ3t2tO9bPCy7nHO8jfC1BdoTqmbtNUF7Pm97eQlqWzH1CRAgQIAAAQIEZiEgcJ/FNOgEAQIECBAgQGBQgS7ntH9TenAsZYoz0BPAtvlFQHAStKd/50GlNDa0wOelwUMpeQlql8tLULuouYcAAQIECBAgQGA2AgL32UyFjhAgQIAAAQIEBhFoe077p/LU7Bi/DPL0txvZlW+3Ddqz0zn9+36C/nlEN4HMa9/d7KfShpfedvN3FwECBAgQIECAwIwEBO4zmgxdIUCAAAECBAj0EGh7PMtP1yD73OOZtbdmx32C9gTntVdzpMip9gb1Jhfou5s9v+zJ/PplyuRT54EECBAgQIAAAQJjCQjcx5LVLgECBAgQIEBgGoGE2TkH/VD5uJzTnuA7QefYV5ejbaY+R35sg7W1vysDGmI3e9bfZW04xkOAAAECBAgQIEBA4G4NECBAgAABAgSWK9DsGk+wXXO9L5WmOLaja9Cevk3Rvxordf5ZoO9u9pzBf7oWtgQIECBAgAABAgRWKyBwX+3UGhgBAgQIECCwYoG8kDK72neVY0zYeSjlUlm/azVBe1e5ed6X+cxu9vxFRO1aux1J/lrhVEp+iTL22punoF4RIECAAAECBAhsTkDgvrkpN2ACBAgQIEBgwQIJPb8tZV85hpyDfijlXFm/T7UEswlWa3fb51nflXIs5dLnwe4dXCDrqzk2pkvjdrN3UXMPAQIECBAgQIDAKgQE7quYRoMgQIAAAQIEVi7Q9qWjU56DnmA2ofmuxRwI2ltgTVQ189fnbHa72SeaKI8hQIAAAQIECBCYt4DAfd7zo3cECBAgQIAAgbY7x7+5BuC/jEwnaB8ZeKLm+57N/lPpZ/6y4TRRfz2GAAECBAgQIECAwKwFBO6znh6dI0CAAAECBDYssC9jzzntn1UaTHVOe5egPX07lnKuHItq4wpkTTW72dscAdT0KrvZvy8lQfuP43ZV6wQIECBAgAABAgSWJSBwX9Z86S0BAgQIECCwfoFdGeLXpRwqh5pz2vNSywSgY16C9jF1x28766rZzV77S5z7XjW72bPWxv4LivFFPIEAAQIECBAgQIDACAIC9xFQNUmAAAECBAgQ6CiQoD3hec2u4+wyzg7jY8dn1d4maK+Vml+9rKOE7F9cS5ce2s3eRc09BAgQIECAAAECmxUQuG926g2cAAECBAgQmJFAAtEcH7Or7NMULx0VtFdOxgyr3YbsNb+8eWkIdrPPcGJ1iQABAgQIECBAYP4CAvf5z5EeEiBAgAABAusVSMD+bSn7yiFOcRa6oL1yMmZWre+57BlOdrOfrsXZ7DObYN0hQIAAAQIECBBYhoDAfRnzpJcECBAgQIDAugSy67g5PqZmZAlCc9RMwtAxrubokWNpfNfiATk/PveM1a8WXdlk1SZkz19ItJm3e6xP5Qs5l908bnIZGTQBAgQIECBAgMCQAgL3ITW1RYAAAQIECBB4LJAd5Dl7vfaoj/fX+mO8pDJ9eFdK7bnxzegE7Y/neawau9Jw35efpm+Zw6zDBO2XsTqrXQIECBAgQIAAAQJbExC4b23GjZcAAQIECBB4lsC+PDi72vOx5srxMYdSLjWVW9YRtLcEe3L1zFd+UZP1kF3tXS9HxnSVcx8BAgQIECBAgACBSgGBeyWUagQIECBAgACBjgIJS/NC1ISlNVd2HqfuuaZyyzq7Uj872tN+7Q77PMKO9pbQA1RvjvnJcTEpXa+E7NnF3pSu7biPAAECBAgQIECAAIEKAYF7BZIqBAgQIECAAIGOAs057TXhdoLRHPFx7Pist27blW+mL4eWbf907dOp5X2qdxdojovpE7Ln6c257AnaxziOqPsI3UmAAAECBAgQIEBgxQIC9xVPrqERIECAAAECTxPYlyd/W8qusgfflXo5R33oYDT9yI72tuFtjrM5lnKu7L9q/QQyTzkyJvNU88uZ156WX5CcrmXotdRvhO4mQIAAAQIECBAgsBEBgftGJtowCRAgQIAAgUkEduUpOT6mNuBOQJqg/Txw75rzvvct2xW0twTrUT1rpZmnfN71akJ2Lz/tKug+AgQIECBAgAABAgMKCNwHxNQUAQIECBAgsFmB5iWkx0qBHB+ToP1UWb+mWvNizbS7q7nhpo6gvSVYx+rNueyZoz4vP82Z+gnYs35+7NgXtxEgQIAAAQIECBAgMIKAwH0EVE0SIECAAAECmxLIbvbsat9VjvqbUu9YylBHfuS5XV6Emu7mKJucGy+0rZy8jtVyLnvWyaHj/bmtefmp+eqB6FYCBAgQIECAAAECYwsI3McW1j4BAgQIECCwVoFdGVjOad9XDjC7yLOzeahwO8/tcj57upug/VjKpbLvqrUXyProe2RME7JnN3uKiwABAgQIECBAgACBmQsI3Gc+QbpHgAABAgQIzE4gx4J8XUrC85orx3+k7lCBaULcLkeSJLzN7uhTKZeajqvTSaDr+fm3D/t0XS+ZKxcBAgQIECBAgAABAgsSELgvaLJ0lQABAgQIPFFgV579+xeen6+n3F+vff22XoLrPudYp63sFr89miWf3+4gv/3vBN+XnoYJUxNap++PribgTv2+x8fkec2xMS95v9WXjLsJ2vv249GYt/r9zEnXY30as7z8NPOUX8yYp62uJOMmQIAAAQIECBBYvIDAffFTaAAECBAgQOChwB9varwUcu/vWhgiCH/YqSdXuA3qz9e+NB8TfN4HnvnFQM5pv7d6bRjZoZxd6Jee49yV+7Ob/tChnRxhc7qWDre7pUIgZ7Nnbr6oqPtSleblpwna+66Vjl1wGwECBAgQIECAAAECQwoI3IfU1BYBAgQIEBhPIIHvb6/N3wfi+d7tjuv9eN3YVMsJQJsQtNY0AeqhlHNPqQS5Cexrn3v7uJzPfhqgDz2HsNrb87PWHOuz6zDK5lx2c9QBzy0ECBAgQIAAAQIE5i4gcJ/7DOkfAQIECKxR4DY8vw3Lbz/fwi7ztc1tgu5Dj0FlzhO0H0tpG+QmxE2Aa6d0jwl4cGvmJH9tkN3sNUcK3TfX/MWBI2PGmyMtEyBAgAABAgQIEHi6gMD96VOgAwQIECCwAoHbI1v2N+N57fMVDNkQXhHIUTQ5ruZ8LQlZH127UqHr+d/OZ3+k2//7ff7awC9C+vtrgQABAgQIECBAgMCiBATui5ounSVAgACBiQSye/UP12clDE3Jdfv5/TEuE3XNYxYocCp9zu73813f9+W/E7R3Of87QX7zgs0Fksy+y33+2iCDyxn+mffsZncRIECAAAECBAgQILAhAYH7hibbUAkQIEDgN81RLrfHteyKS0quPaNXBbJTNzu3769L+UJK7ddv6zW7wfuw3//i4/4ontv5vT3Kp88zu957Ljf+uZRmx3T60/ZKcJ+g/aW5aNuW+v8qkPXS9a8N7Ga3oggQIECAAAECBAgQ+I3A3SIgQIAAgTUINEe63IatTRDrLPTf/Ob+WJMEv7dXwtuE37fXfZ01rJPbMeyv/3EoH/MCzDlfCXITsqfcz9Oc+72kvmU9ZB1kPbS9frrOzantjeoTIECAAAECBAgQILA+AYH7+ubUiAgQILAmgSZI35VBpeTaXz/efm1NY35tLDmr+3LzzfPN5/eB+UsB+haM2owx6+dDKbXHuTS/tLg9bqjN87rUFeR2UWt3TxOyN/+utLk7f21wKuX2Z7HN/eoSIECAAAECBAgQILBCAYH7CifVkAgQILAQgSZMb3aiJwBN2cKO9Nvw/FLGnJLr/ogVQd44i/nr0uxX17X26AnZXZ66p7uKzXrdX9dt/vv25bmP2n3r+zn/O7vZzX8fxdfv7XM+e/PXBlkPzc/tOL3UKgECBAgQIECAAAECixQQuC9y2nSaAAECsxfYWpiencjNUR+3u8tf+3z2E7jSDu7LuL4tZVc5vm9KvePN3D66Le222TV/257zvx/p9v9+gvacz177y5bbJ/prg/7+WiBAgAABAgQIECCwCQGB+yam2SAJECAwqMBWwvTmCJHbXee3n1+Kaopr/gK70sU2QXjm/tBifvelbtfzv/PXDsdSvi/F+ezjrKXMf/6qIXPa9vLXBm3F1CdAgAABAgQIECCwcQGB+8YXgOETIEDgTqA5n7o51uX+49LBbo9yaXaf34bozj5f+gz/c/+bHc3HymFlfWT3c8LvR1efY0nSdkL9HBtT86xHffH9lwV25ctdgnZ/bWBFESBAgAABAgQIECDQWUDg3pnOjQQIEFikwFoD9dsjXc7XmbmUjym5mq8tctJ0upNAXoaaXe27yrvfl3oJwB/tMk97OZbkUEp+ntpe2TGdUL9Zm23vV/+xwL5USdCej22u/MIla+BUsQ7atKsuAQIECBAgQIAAAQIbEhC4b2iyDZUAgU0IrC1Qb4L0l3ah335tE5NrkFUCu1Ir57Tvq2r/Y6f5oZTLg/qfl+8nKK9t96XmsnM6/XsU6ld2XbU7gcxNl6Dd+eyWEgECBAgQIECAAAECgwkI3Aej1BABAgQmEVhToN6E6Qk6U24D9PMkmh6yJoExjo/ZFaDmbPZ83vfKLvpj30bc/y8C+/KVLkF7ftmS+fDvjUVFgAABAgQIECBAgMBgAgL3wSg1RIAAgcEEmlB9V1pM+ayUfC2h0lIuYfpSZmod/WxzfEx2mefYkOMbQ8/PWo6NSbtDXTmuJD/PruEEMk9dgvbvrvN/Ga4rWiJAgAABAgQIECBAgMA/BATuVgIBAgSeI5Dg7fel3IbpzQtKn9Oj+qcK0+ut1BxXID9HbY6Peev89Pz8ZTd7jo1Ju0Nf/14azEt5Xf0F9qWJtkG7F6H2d9cCAQIECBAgQIAAAQIVAgL3CiRVCBAg0FEgYfpvS0k41ITpSwjVm0D9fB33/ceOHG4jMJhAl+NjDuXpzVq+7Uh+PptjY7p0MCH+H0rZvXHzf5TvZVe9q59A5qpL0B77mhfi9uuduwkQIECAAAECBAgQIFAEBO6WAQECBPoJ/PF6e4KgJkzflc9T5no1gXp22zbnpt9+nGu/9YtABBKOJzzNz9uj67XjY/Lz2eds9qbd70s7OXrm8EZHcnzJW99/NAbf/8e/p23+kiFmzRwJ2q0gAgQIECBAgAABAgQmFRC4T8rtYQQILFQgYU9z/Es+z8715iiYOQ5JoD7HWdGnvgL5mftQyr6yofvjYxLQf17KoUUb94/KSzZP15L2/nb9t+C1LuVnMf3NL7Rc7QXy7212tGfOaq+clX8sJb8M4V6rph4BAgQIECBAgAABAoMJCNwHo9QQAQIrEMhu9WaX+u3Z6nMbmkB9bjOiP2MK5GcyoWvOVq+5ErgeSjlfK+/Lx+xm/+L6813Txm2d7JROeHss5XL9Rv59SNj+1i57YXtb6f+t3/bIoNzZBO2n7o91JwECBAgQIECAAAECBPoLCNz7G2qBAIFlCSTIyXnLt4H6rvx3ypyu7KS9P+7lUr6W4iKwFYG2x8ccC0yOEMnPc58jY+KbwDxt3e+UTvif57x1Cdu7r9Ac0RPfmiOD8hRBe3drdxIgQIAAAQIECBAgMIKAwH0EVE0SIDALgdtgfVd6lIB9P4ue/W8nbkP1S/lyyo+lOAZhZhOlO5MLtD0+JuekH0vJX6lkJ3tKl6vZzZ6gPT+Lt1f+Hak5Rzx9yW58P8ftZiD/Psc3zjXXa+fz19yrDgECBAgQIECAAAECBEYTELiPRqthAgQmFEg4l13rCWoS2uRjbWgzZjcTCCW0u1xLE6afx3yotgksWKDt8THZSd4c7XLoMe7XdrM3TSbATxj8aNf1N6VO7dE3Pbq7qlvzb3XNLzKaQXsZ6qqm32AIECBAgAABAgQIrE9A4L6+OTUiAmsWSDCTl5fuS0nInv/Ox2deOc7gUsp9mH5+Zqc8m8ACBdocH9MML7vIH4Xgr1HkZzfHxWQ3e36GX7rSdsLgmh3zfyn1Tgt0f1aXY9scH1Pbh/fX+fLXA7Vi6hEgQIAAAQIECBAgMLmAwH1ycg8kQKBSIEdD3Ibq+bxrsFb5yDer5fiXy7U0u9bvj5wY4jnaILA1gbbHx/T1yZEvCdpT3rpqfwGQ4D6BvH8P6mdmX6q2OT6mOTIo/wa7CBAgQIAAAQIECBAgMGsBgfusp0fnCGxGoDkSJiFMPn/WrvXb3eoJdm6Pg9nMZBgogYkE2h4f06dbj46MuW17V/6j9oiTT6XuoRQ7rutmJ3P+4WpWc0d+0Xks5VxTWR0CBAgQIECAAAECBAjMQUDgPodZ0AcC2xJowvUmWN8/YfgJ3y6lJFC/PwrmCd3xSAKbE6jdPd4HJmd9n66lZvd52yNO/qO0neNoXHUC+SuAmnPw01p++flVKY/+CqHuyWoRIECAAAECBAgQIEBgQgGB+4TYHkVggwLPDtfvg/Vmx/oGp8KQCcxCYOzjYxKyN8fFtAlr8wuAYym7CqX8u3IopSbEr2huE1XilbD90dW8EDVz4SJAgAABAgQIECBAgMAiBQTui5w2nSYwS4HsDs256/tSEqrl41RXQpqEX+dSLteSz10ECMxDYOzjY3K0SwL2U8vh5t+pr1v8e5WXdh5bPmPr1Q8FoCZszxxmV3v+DXcRIECAAAECBAgQIEBgsQIC98VOnY4TeLrA7bnrCa12E/WoeXlpcxxMcyTMRI/3GAIEWgqMdXxME7InaG973uQL5wAAIABJREFUhnr+vUrQfqgci13tlVB31eL7KGx3fEw3W3cRIECAAAECBAgQIDBTAYH7TCdGtwjMUOB+93p2rI553e5ab46CcYTDmOLaJjCswL4012b3eM3T8wu3UyldQva03/acdkec1MzKy3XyS9m/Xc1fa+Wb8o1jKW1/YdK9V+4kQIAAAQIECBAgQIDAyAIC95GBNU9goQK70u8/lLK/lgQnY1734bqz1sfU1jaBcQTy70Z+MZeXY+bfjqF+KZeQvTmX/dKx603QniNLavvliJOO2Nfb/l4+vva/Hfk3P+vk3O8R7iZAgAABAgQIECBAgMD8BATu85sTPSLwDIEEUJ9fQ7IEZbsROyFcHxFX0wQmFBjrWKn8G5EgtgnZ++5+bvNC1PDliJPDtQ8Tcq7qUR/LaN69MqLMb/53xl8srWrKDYYAAQIECBAgQIAAgUZA4G4tENiuwG3APtYOduH6dteXka9PYMxjpfJvRROw5+MQV9ugPX04lpKw2NVdYF9uzVEyL10xzv/eXLo3704CBAgQIECAAAECBAjMW0DgPu/50TsCQwrsSmPNcQ/5U/4xrrxYMLsWz9ciVBlDWZsExhfIX73k34uEo/trGfqp2UmecP10/XdjqPbT3w/Xvte2+b5UTNDedzd97fPWXC9he+bgpevP1zlf8/iNjQABAgQIECBAgACBjQsI3De+AAx/9QK7MsLsZD+UMsYu9pytfC6lCdmFVatfUga4UoH8W3G7g32Mfy9uj4rJvxuXgS33pb22L2n9rtxzHKEvAw9tMc3lf2u+faW3ORN/rF/2LgZIRwkQIECAAAECBAgQWL+AwH39c2yE2xNozmNPsDFkuNGEZQnKmoB9e7pGTGAdAvfh+m7EYSXUzu7xsc7s3pe22wbt+WXhsZT8e+YaTuA/S1MvraX870e+7peyw1lriQABAgQIECBAgACBmQoI3Gc6MbpFoINAwoyETgnZE7r3vXI8zLmUJly/9G3Q/QQIPEUgu9Wb42Hy+Ri7118aWP4N+er678gYA99f/83Lx9pL0F4r1b5e/rfnr6/c9pfy9VP7Jt1BgAABAgQIECBAgACB5QkI3Jc3Z3pM4F4gYdO7UvruZs95yudrybnKdiJaawSWJ5Aw/Q+lNMF6/n2Y+hr75aMZU9sd7fn37VjKaWqMDT0v/7uRI8zur9jvNuRgqAQIECBAgAABAgQIbFxA4L7xBWD4ixZIgJHQ6dBxFLdHxJxLG2Md99Cxe24jQOCBQP4NaML1ffk8IfsQf93SBz7Hx2RX+xi/sMsYBe19Zmfce//rlebtbh/XXesECBAgQIAAAQIECMxMQOA+swnRHQKVAodS70OHcC0he3YhNqXycaoRIPBkgWbn+q70Y1/KHML1W5Ixj4/JeAXtT16ADx7/1nEy/m/Nec+d3hEgQIAAAQIECBAgMLCA/ydoYFDNEZhA4NvyjEOL5wjZW2CpSuDJAtmhnl3rCZl3pUx95vq5PPP3pdQeUTXm8TExaBu0pz95QWvKGLvsn7w8Zvv443Wu7juYM/Mzjy4CBAgQIECAAAECBAhsRkDgvpmpNtCVCLwWarw0vBztYCf7SibeMFYpkDA94XY+JpScctd6ztXOMVIp52vZlY/5hV76UnONdXxMni9or5mB+dR57X+b3pcu5nsuAgQIECBAgAABAgQIbEZA4L6ZqTbQFQgkjPt7xTi+uQYcdndWYKlCYAKBP5Zn7K4lP8f5PB+nurLruwnWm4+3/z5kV31evHys7NBYx8fkhZs5/31f2Y9Us6O9BdaIVbN28kuS+0vgPiK6pgkQIECAAAECBAgQmKeAwH2e86JXBF4SeC3QeKR1fqFCQrf7QP6lr+U4ABcBAo8FdqVKs1s9nzdHwSTMnvrKz+3t7vXLGx3I0TF5H0T6/Oga6/iYL8uD8+9bTR+aPgraH83WtN/P/AncpzX3NAIECBAgQIAAAQIEZiogcJ/pxOgWgRcEXgs0psY63z0wwX3CvdvrUv4j5fbKERb3X5u6755HoI/ArtycUD0fU5ojYPZ9Gu15b3ab3+5ev/9ZfK359P/Zx8cI2ntO/oxuP5a+CNxnNCG6QoAAAQIECBAgQIDA8wQE7s+z92QCbQUSkCVM+23bG2dc/1L6lnJ71X6tOSZjxsPTtYUJ5GfsNlDPf9+WZw7n9liY/Iw0O9jb9mkOx8cI2tvO2vzrH0sXBe7znyc9JECAAAECBAgQIEBgAgGB+wTIHkFgQIHsqM2LUBMKul4WOL/w5Uv5Wsr99VLd1HGUzvpW1+7m56bZmZ6v3Za5jDq71rNeb3euD/FOhmcfH9MlaM9fxnws5VTKEAZzmeO19eNYBiRwX9usGg8BAgQIECBAgAABAp0EBO6d2NxE4OkCzYsF85JB1zQCLx2d0zz5/EoXLuXrKS9dCVUFiP3mLru1/3BtYlc+puRqAvV8P5/P9Wp2rTe71bNWXltLfcYQlzbHx3wq9Q8Drc9mR33+zWpznn2C9mMppz4Dd+9kApkrgftk3B5EgAABAgQIECBAgMCcBQTuc54dfSPwWKAJFPelahMy5uOajp15rLDOGucHw3r0/dz+1i8J3mp+6B3+u/Kwmr/KyDq+vZo13Xwt7aQs7WreX5A5a+YkIfvYv3Bpe3xM+nkopWZtPZoDQfsjoXV9/1iGI3Bf15waDQECBAgQIECAAAECHQUE7h3h3EZgQQL7F/pa+7U/Lmicukrg2QL5RcXlWhKo5/N8fMbV9viYHNtyHKCjgvYBEBfYRNaOwH2BE6fLBAgQIECAAAECBAgMLyBwH95UiwTWLPDSER27MuCU2+ulr9l5v+aVsZ2xNbv/z2XIzW71S/k8ZQ5XfvbaHh+T41769r9r0J6jlRL2n+aApw+dBY7lToF7Zz43EiBAgAABAgQIECCwJgGB+5pm01gILE/g/siQjKD2awkWa44pWZ6KHj9T4DZQTz/O1840H5/Zt0fPTuBZe1b6UMfHdA3a43y88X00Nt+ft0DmUuA+7znSOwIECBAgQIAAAQIEJhIQuE8E7TEECEwmsH/hSbvytZT766W6CRCbF3FO1mkPGl2geUFpHnS5lnx+vj65+Th6R0Z4QNZxdrW/tMbvHxeHoY6PeVfaOpbS5mWogvYRFsAMmsw6ELjPYCJ0gQABAgQIECBAgACB5wsI3J8/B3pAgMAyBF46Tic9f+3r+V4C0JSXLkfsDDPvzY702xfEXkrTKbnOwzxmlq1kbX0oJee111yfSqUhjo/5srRzfGNtv9QXQXvNDC23TtaDwH2586fnBAgQIECAAAECBAgMKCBwHxBTUwQIEBhQYP9GW2+F/Le31da7f9TQL8vN8SWXCpvzXZ28cDRBenPdhuoVza26yjOOjxG0r3pJ9RrcsdwtcO9F6GYCBAgQIECAAAECBNYiIHBfy0waBwECBAhsQWBfBjn18TGC9i2srH5jFLj383M3AQIECBAgQIAAAQIrEhC4r2gyDYUAAQIEViuwKyOb+vgYQftql9PgAxO4D06qQQIECBAgQIAAAQIEliogcF/qzOk3AQIECGxFoO3xMTmn/fuOODmGKEF72kjIX3s5o71Wap31jmVYjpRZ59waFQECBAgQIECAAAECLQUE7i3BVCdAgAABAhMJ7Mtzao+PSZfel/KxlNtz72u7uisVm6A9oXvtJWivlVp3vWMZnsB93XNsdAQIECBAgAABAgQIVAoI3CuhVCNAgAABAhMJJPDO8TGHyucl9E7dS2X922q78h8JSmuf1dybF+EeSzl1eKZb1ieQtSBwX9+8GhEBAgQIECBAgAABAh0EBO4d0NxCgAABAgRGEnh3DbJrdpkn9O56fMzn13v3LcchaG8JtpHqAveNTLRhEiBAgAABAgQIECDwWEDg/thIDQIECBAgMLZAgu/sav+s8kFdjo/pej57uvRTKTmu5lTZP9W2JXAsw7XDfVtzbrQECBAgQIAAAQIECLwiIHC3NAgQIECAwPMEpjg+ZncNQ78oH2t2zt9qOKP9eWtjSU8WuC9ptvSVAAECBAgQIECAAIFRBQTuo/JqnAABAgQIvCow9vExeQnqoZR9hzn4VO7JjvZzh3vdsj2BYxmyHe7bm3cjJkCAAAECBAgQIEDgBQGBu2VBgAABAgSmFUgAPtbxMbvSdhO05/O213flhoSnl7Y3qr9pgawZgfuml4DBEyBAgAABAgQIECDQCAjcrQUCBAgQIDCNQJfjY/JS1B8rupeXoB5KybExba9fyw3ZzZ7yS9ub1SdQBI6lCNwtBQIECBAgQIAAAQIECBQBgbtlQIAAAQIExhdoc3xMAvAE7acH3dqV7/fZze5FqOPP+1aeIHDfykwbJwECBAgQIECAAAECDwUE7g+JVCBAgAABAp0FPit3fltKPtZc35RKCS/f2mneZzd7+pBjY06lnGs6pA6BCoGsWTvcK6BUIUCAAAECBAgQIEBg/QIC9/XPsRESIECAwPQCOT4mAWR2qtdcP1zrvnZ8zK58P7vkD6Wk7bbXz+WG07Vc2t6sPoEHAsfrer+v9r58Id9zESBAgAABAgQIECBAYDMCAvfNTLWBEiBAgMBEAjnmJeeh1wTjbx0fk/uzmz2hfe0O+fshJsg/XctEw/eYDQocy5jtcN/gxBsyAQIECBAgQIAAAQL/KiBwtyoIECBAgMAwAgnFP5Syr2zuteNjcn9C+7wAtSa0v39cQvxTKQn9L5V9UY1AH4FDuTlHJ91fn67ruE/b7iVAgAABAgQIECBAgMCiBATui5ounSVAgACBGQoMcXzMroyrzwtQw2I3+wwXx0a6tC/j/NsLY82azPdcBAgQIECAAAECBAgQ2IyAwH0zU22gBAgQIDCCQJ/jY4Y4MsZu9hEmVZOtBV4L3C+lpX9r3ZobCBAgQIAAAQIECBAgsGABgfuCJ0/XCRAgQOBpAm2Pj/mu9DRnsf9SSs5lz3Exhx69z1Ed35dy6tGGWwkMKfBfrzTm/9YcUllbBAgQIECAAAECBAjMXsD/EzT7KdJBAgQIEJiRQNvjY34qfU/QfinlXSkJ2ncdx/Nzue90LWnPRWBOAq8F7v+3dDK/aHIRIECAAAECBAgQIEBgEwIC901Ms0ESIECAwAACbY+PyUtL/7OUBO7ZEd/1yu74Uynnrg24j8AEAlmff3zhOX+ydifQ9wgCBAgQIECAAAECBGYjIHCfzVToCAECBAjMVGBX+vVtKfvK/mU3748t6r/UbHbGJ7DPsTF2B1fCq/ZUgXN5+kuB+1/K109P7ZmHEyBAgAABAgQIECBAYEIBgfuE2B5FgAABAosSyPExOQbmOFGvc2RMAvYE7ZeJnukxBIYSyM/J1y809n7Cn6GhxqIdAgQIECBAgAABAgQIdBYQuHemcyMBAgQIrFggZ61/KGU38hh/Le03Lz89j/wszRMYU+BYGn8pcM+RSIcxH6xtAgQIECBAgAABAgQIzElA4D6n2dAXAgQIEHi2wK50oM3xMV37+0O58VSKI2O6CrpvbgL70qG/vdCprPV8z0WAAAECBAgQIECAAIFNCAjcNzHNBkmAAAECFQLZnZsXnOYomTGuHBlzupbLGA/QJoEnCuzLs18K3PM+g39/Yr88mgABAgQIECBAgAABApMKCNwn5fYwAgQIEJihQILC7GrfjdA3R8aMgKrJ2Qr81ys9839vznbKdIwAAQIECBAgQIAAgaEF/D9AQ4tqjwABAgSWIpCd7Dmn/TBChx0ZMwKqJmcvIHCf/RTpIAECBAgQIECAAAECYwsI3McW1j4BAgQIzFHgXenUsZQhj49xZMwcZ1qfphS4lIf9/oUH/ql87TxlRzyLAAECBAgQIECAAAECzxIQuD9L3nMJECBA4BkCn5WHZlf7fsCHf1faystPU1wEtixwLoP/4wsAAvctrwpjJ0CAAAECBAgQILAxAYH7xibccAkQILBRgexkb3a1D0GQ3ewfSzmV8ssQDWqDwAoEBO4rmERDIECAAAECBAgQIECgn4DAvZ+fuwkQIEBg/gL70sWhXoqa3ewJ2RMsuggQ+GeB/FzY4W5VECBAgAABAgQIECCwaQGB+6an3+AJECCwaoHsak/Q/kXPUdrN3hPQ7ZsRyF995C9J7q//KF/I91wECBAgQIAAAQIECBBYvYDAffVTbIAECBDYpMAQL0W1m32TS8egewgcy71fv3D/+/K1fM9FgAABAgQIECBAgACB1QsI3Fc/xQZIgACBTQn0fSnqr0WrOZv9sik5gyXQXyChusC9v6MWCBAgQIAAAQIECBBYsIDAfcGTp+sECBAg8N8COTrm81K+KiWBe5frp3JTE7R3ud89BAj8Yxe7wN1KIECAAAECBAgQIEBg0wIC901Pv8ETIEBg0QIJ2XM++6HHKHJsTIL2H3u04VYCbQV25YbfX2/KL4nyS6Nct5+/9N9tn/Oo/rlUSPk00M/AsbQjcH+k7vsECBAgQIAAAQIECKxaQOC+6uk1OAIECKxOYFdG9GUph1LyeZfLS1C7qLmnjcAfr5X3r3xs09ZUdU/lQTlr/dLjgcdyr8C9B6BbCRAgQIAAAQIECBBYvoDAfflzaAQECBDYgkBC9uxmT+ly5Wz270uxm72LnnteEkionp3p2ZW+u5b7HepLlDuWTn9Tyi8dOp97Be4d4NxCgAABAgQIECBAgMB6BATu65lLIyFAgMDaBBJivivlUEpz5EbbMf5QbjiVkrC9S4DY9nnqr0sg6+4PpTRB+r58nnWZsubrUgb3l1LOLQd5LPUF7i3RVCdAgAABAgQIECBAYF0CAvd1zafRECBAYA0COZv9UErX3ewxyJnUeYnqZQ0gxjCJQHas70pJuN6Urr/omaTDEzwk7zY4XX+ean6WjqWuwH2CifEIAgQIECBAgAABAgTmKyBwn+/c6BkBAgS2JJBgM8fGJCTf9Rh4zmc/lHLu0YZb1y2Q9ZUXlu5LaY6DyUfX2wIJ3/OXIvnZyhFN+e/bvwCIYUxf+vnN2fBHwAQIECBAgAABAgQIENiCgMB9C7NsjAQIEJivQAK7HBuToL3vbuKcO51Qz9Ex853vqXuW8Lc5EmZfPp/LGetNYB2Py7Xcf57/Tqg91nrOz9vh+jPz25EnRuA+MrDmCRAgQIAAAQIECBCYj4DAfT5zoScECBDYmkCOnhgiaP/pGhwmnHRtVyBhehOuP/tImKzJBOVNYN58vJSvpczpSvD+sZT8hclY159Kw+exGtcuAQIECBAgQIAAAQIE5iQgcJ/TbOgLAQIEtiGQYO9Yyq7ncLNLOO0kLHRtS+A+XN8/Yfg5vuhSSsL024/5fIlXDE+l5LidIa/88sGRPUOKaosAAQIECBAgQIAAgVkLCNxnPT06R4AAgVUJ7Mpovi0lwV7f64fSwKGUS9+G3D97gbzMtNmxnjU0xPppM+gExllnCdabnernNg0srG5+ro6lDBG8+zld2OTrLgECBAgQIECAAAEC/QUE7v0NtUCAAAECjwW+KFUStvc9pz272hMI5uWNrnUJ7K4h7758TMCe/55yZ3SzY/1cnnu7a31dyvWjaV6Cmp+3HNXT5vp0/Rk9tblJXQIECBAgQIAAAQIECKxBQOC+hlk0BgIECMxbIGe1HwfoopeiDoA4gybyS5fmrPVd+bwJdqfsWnatNzvWb3euT9mHJT0r85RfmjXzlY/NDvjsYm/Oqz9fXcd60euSzPSVAAECBAgQIECAAIGNCgjcNzrxhk2AAIGJBPJS1A89n5Wdx4dSEua5liOwK11NKHu7Wz2f9/0rh7YCCYTvw/W2bahPgAABAgQIECBAgAABAgSqBATuVUwqESBAgEAHgX25528d7ru95X35j2PPNtw+nkAC9N+WkrnOdf9xvCe/3LJwfWpxzyNAgAABAgQIECBAgACBfxIQuFsQBAgQIDCWwP8rDXfdzexli2PNSl27eVFprsxfc4767e70fV0zo9XKWf7ZtX6+fmzOXB/tgRomQIAAAQIECBAgQIAAAQI1AgL3GiV1CBAgQKCtQALZLrvbE6QeS/nY9oHqPxRodqOnYhOe3wbqu/L1lLld9y8zFa7PbYb0hwABAgQIECBAgAABAgT+R0DgbjEQIECAwBgCx9JoXpba9kqY2ryAsXnx4qV8LSVXE762bXct9ZsXjjbjuT8TfX8z0F35PGVJV/6yIXN9e+a6F3AuaQb1lQABAgQIECBAgAABAhsXELhvfAEYPgECBEYSyA71dyO1fdtswtmU5rr/73z9pa/l60OE97e7xmuGu3+lUtuv1zxrznV+us5LE6xnjvK5iwABAgQIECBAgAABAgQILFpA4L7o6dN5AgQIzE4gO7C/LeWL2fVMh54h0OxYbwJ1wfozZsEzCRAgQIAAAQIECBAgQGAyAYH7ZNQeRIAAgdULZEf7sZSuL0pdPdAKB9j8lUCC9NvSHA20wiEbEgECBAgQIECAAAECBAgQeF1A4G51ECBAgEBfgV1pILva930bcv9sBHLkS3N2+vnaq0v5mJJLoD6bqdIRAgQIECBAgAABAgQIEJiTgMB9TrOhLwQIEFieQJtd7Z/K8E6l5Nzz3bW0PQN9eULz6fFtiH4p3UrJdb5+bF5WO58e6wkBAgQIECBAgAABAgQIEFiYgMB9YROmuwQIEJiJwK7046+lJDB/dOXYka9K+f6NijmG5rat/U3dfL05pmbrAf2vxeL25aKX8t8pzXW++VyA/mhl+j4BAgQIECBAgAABAgQIEBhYQOA+MKjmCBAgsAGBQxnjh1Jqzmp/X+p9LKU5nmRontswPm3f/3e+truW+2fn67/v2aHbXeM1TZ1fqdT26zXPUocAAQIECBAgQIAAAQIECBCYWEDgPjG4xxEgQGDBAgnYc1b7FxVj+KHUya72293YFbepQoAAAQIECBAgQIAAAQIECBBYroDAfblzp+cECBCYUiA7xxO2PzpCJkeeHEvJrnYXAQIECBAgQIAAAQIECBAgQGBTAgL3TU23wRIgQKCTQHa0J2x/dIRMdrUfSrl0eoqbCBAgQIAAAQIECBAgQIAAAQILFxC4L3wCdZ8AAQIjCyRAT9j+1mVX+8iToHkCBAgQIECAAAECBAgQIEBgGQIC92XMk14SIEDgGQI1YXteGpp6zmp/xgx5JgECBAgQIECAAAECBAgQIDArAYH7rKZDZwgQIDAbgZzV/rdS3jpG5pvy/bwY1UWAAAECBAgQIECAAAECBAgQIFAEBO6WAQECBAjcCyRk/3spu1docoRMgvYTOgIECBAgQIAAAQIECBAgQIAAgf8VELhbDQQIECBwL5Cd7fs3wvZ8zxEy1g0BAgQIECBAgAABAgQIECBA4E5A4G5JECBAgMCtwLH8x9fCdouCAAECBAgQIECAAAECBAgQINBeQODe3swdBAgQWKvAvgwsu9tfu/5cvvH9WgdvXAQIECBAgAABAgQIECBAgACBvgIC976C7idAgMA6BHJu+3+W8tpLUt+X7x3XMVSjIECAAAECBAgQIECAAAECBAiMIyBwH8dVqwQIEFiawF9Lh794pdM/lK/vlzYg/SVAgAABAgQIECBAgAABAgQITC0gcJ9a3PMIECAwP4GvSpc+vNKtX8vXd6X8Mr9u6xEBAgQIECBAgAABAgQIECBAYF4CAvd5zYfeECBAYGqBz8oD//7GQ/9UvneeulOeR4AAAQIECBAgQIAAAQIECBBYooDAfYmzps8ECBAYTiAvQf38leac2z6cs5YIECBAgAABAgQIECBAgACBDQgI3DcwyYZIgACBNwReC9x/Kvdk97uLAAECBAgQIECAAAECBAgQIECgUkDgXgmlGgECBFYqkBel5oWpt5dz21c62YZFgAABAgQIECBAgAABAgQIjCsgcB/XV+sECBBYgkBC94+l/L6Un0vJf/+4hI7rIwECBAgQIECAAAECBAgQIEBgTgIC9znNhr4QIEDguQK78vjLc7vg6QQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgSFIJPXAAAHJ0lEQVQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgMD/b8eOaQAAABCG+XeNjZHUASnfCBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfAcH99zvLCRAgQIAAAQIECBAgQIAAAQIECBAgQCAkILiHzjCFAAECBAgQIECAAAECBAgQIECAAAECBH4FBPff7ywnQIAAAQIECBAgQIAAAQIECBAgQIAAgZCA4B46wxQCBAgQIECAAAECBAgQIECAAAECBAgQ+BUQ3H+/s5wAAQIECBAgQIAAAQIECBAgQIAAAQIEQgKCe+gMUwgQIECAAAECBAgQIECAAAECBAgQIEDgV0Bw//3OcgIECBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfAcH99zvLCRAgQIAAAQIECBAgQIAAAQIECBAgQCAkILiHzjCFAAECBAgQIECAAAECBAgQIECAAAECBH4FBPff7ywnQIAAAQIECBAgQIAAAQIECBAgQIAAgZCA4B46wxQCBAgQIECAAAECBAgQIECAAAECBAgQ+BUQ3H+/s5wAAQIECBAgQIAAAQIECBAgQIAAAQIEQgKCe+gMUwgQIECAAAECBAgQIECAAAECBAgQIEDgV0Bw//3OcgIECBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfAcH99zvLCRAgQIAAAQIECBAgQIAAAQIECBAgQCAkILiHzjCFAAECBAgQIECAAAECBAgQIECAAAECBH4FBPff7ywnQIAAAQIECBAgQIAAAQIECBAgQIAAgZCA4B46wxQCBAgQIECAAAECBAgQIECAAAECBAgQ+BUQ3H+/s5wAAQIECBAgQIAAAQIECBAgQIAAAQIEQgKCe+gMUwgQIECAAAECBAgQIECAAAECBAgQIEDgV0Bw//3OcgIECBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfgQGMc9WA31rv6AAAAABJRU5ErkJggg==';
+
diff --git a/vue-options-api-demos/inputs/signature/popup/scale/main.js b/vue-options-api-demos/inputs/signature/popup/scale/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/popup/scale/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/signature/popup/scale/main.vue b/vue-options-api-demos/inputs/signature/popup/scale/main.vue
new file mode 100644
index 00000000..bc8c6010
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/popup/scale/main.vue
@@ -0,0 +1,23 @@
+<template>
+  <Signature :value="value" :popup-scale="2.2" @change="onChange" />
+</template>
+<script>
+import { Signature } from '@progress/kendo-vue-inputs';
+import { sampleSignature } from './sample-signature';
+
+export default {
+  components: {
+    Signature,
+  },
+  data() {
+    return {
+      value: sampleSignature,
+    };
+  },
+  methods: {
+    onChange(e) {
+      this.value = e.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/signature/popup/scale/sample-signature.js b/vue-options-api-demos/inputs/signature/popup/scale/sample-signature.js
new file mode 100644
index 00000000..82d3e903
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/popup/scale/sample-signature.js
@@ -0,0 +1,2 @@
+export const sampleSignature = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABdwAAAH4CAYAAABQRy9XAAAgAElEQVR4XuzdjZUjt4EuUL8I7BeBuRFYG4HpCCRHIDqC0UYgTgQzikBUBNZEYCoCSxEsFcGTItiHb83apenuJuqX9XPrHJxudaNQwAV6vPs1GvV/fuMiQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEegv8n94taIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBD4jcDdIiBAgAABAgQIECBAgAABAgQIECBAgAABAgMICNwHQNQEAQIECBAgQIAAAQIECBAgQIAAAQIECBAQuFsDBAgQIECAAAECBAgQIECAAAECBAgQIEBgAAGB+wCImiBAgAABAgQIECBAgAABAgQIECBAgAABAgJ3a4AAAQIECBAgQIAAAQIECBAgQIAAAQIECAwgIHAfAFETBAgQIECAAAECBAgQIECAAAECBAgQIEBA4G4NECBAgAABAgQIECBAgAABAgQIECBAgACBAQQE7gMgaoIAAQIECBAgQIAAAQIECBAgQIAAAQIECAjcrQECBAgQIECAAAECBAgQIECAAAECBAgQIDCAgMB9AERNECBAgAABAgQIECBAgAABAgQIECBAgAABgbs1QIAAAQIECBAgQIAAAQIECBAgQIAAAQIEBhAQuA+AqAkCBAgQIECAAAECBAgQIECAAAECBAgQICBwtwYIECBAgAABAgQIECBAgAABAgQIECBAgMAAAgL3ARA1QYAAAQIECBAgQIAAAQIECBAgQIAAAQIEBO7WAAECBAgQIECAAAECBAgQIECAAAECBAgQGEBA4D4AoiYIECBAgAABAgQIECBAgAABAgQIECBAgIDA3RogQIAAAQIECBAgQIAAAQIECBAgQIAAAQIDCAjcB0DUBAECBAgQIECAAAECBAgQIECAAAECBAgQELhbAwQIECBAgAABAgQIECBAgAABAgQIECBAYAABgfsAiJogQIAAAQIECBAgQIAAAQIECBAgQIAAAQICd2uAAAECBAgQIECAAAECBAgQIECAAAECBAgMICBwHwBREwQIECBAgAABAgQIECBAgAABAgQIECBAQOBuDRAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQEEBO4DIGqCAAECBAgQIECAAAECBAgQIECAAAECBAgI3K0BAgQIECBAgAABAgQIECBAgAABAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAYG7NUCAAAECBAgQIECAAAECBAgQIECAAAECBAYQELgPgKgJAgQIECBAgAABAgQIECBAgAABAgQIECAgcLcGCBAgQIAAAQIECBAgQIAAAQIECBAgQIDAAAIC9wEQNUGAAAECBAgQIECAAAECBAgQIECAAAECBATu1gABAgQIECBAgAABAgQIECBAgAABAgQIEBhAQOA+AKImCBAgQIAAAQIECBAgQIAAAQIECBAgQICAwN0aIECAAAECBAgQIECAAAECBAgQIECAAAECAwgI3AdA1AQBAgQIECBAgAABAgQIECBAgAABAgQIEBC4WwMECBAgQIAAAQIECBAgQIAAAQIECBAgQGAAAYH7AIiaIECAAAECBAgQIECAAAECBAgQIECAAAECAndrgAABAgQIECBAgAABAgQIECBAgAABAgQIDCAgcB8AURMECBAgQIAAAQIECBAgQIAAAQIECBAgQEDgbg0QIECAAAECBAgQIECAAAECBAgQIECAAIEBBATuAyBqggABAgQIECBAgAABAgQIECBAgAABAgQICNytAQIECBAgQIAAAQIECBAgQIAAAQIECBAgMICAwH0ARE0QIECAAAECBAgQIECAAAECBAgQIECAAAGBuzVAgAABAgQIECBAgAABAgQIECBAgAABAgQGEBC4D4CoCQIECBAgQIAAAQIECBAgQIAAAQIECBAgIHC3BggQIECAAAECBAgQIECAAAECBAgQIECAwAACAvcBEDVBgAABAgQIECBAgAABAgQIECBAgAABAgQE7tYAAQIECBAgQIAAAQIECBAgQIAAAQIECBAYQEDgPgCiJggQIECAAAECBAgQIECAAAECBAgQIECAgMDdGiBAgAABAgQIECBAgAABAgQIECBAgAABAgMICNwHQNQEAQIECBAgQIAAAQIECBAgQIAAAQIECBAQuFsDBAgQIECAAAECBAgQIECAAAECBAgQIEBgAAGB+wCImiBAgAABAgQIECBAgAABAgQIECBAgAABAgJ3a4AAAQIECBAgQIAAAQIECBAgQIAAAQIECAwgIHAfAFETBAgQIECAAAECBAgQIECAAAECBAgQIEBA4G4NECBAgAABAgQIECBAgAABAgQIECBAgACBAQQE7gMgaoIAAQIECBAgQIAAAQIECBAgQIAAAQIECAjcrQECBAgQIECAAAECBAgQIECAAAECBAgQIDCAgMB9AERNECBAgAABAgQIECBAgAABAgQIECBAgAABgbs1QIAAAQIECBAgQIAAAQIECBAgQIAAAQIEBhAQuA+AqAkCBAgQIECAAAECBAgQIECAAAECBAgQICBwtwYIECBAgAABAgQIECBAgAABAgQIECBAgMAAAgL3ARA1QYAAAQIECBAgQIAAAQIECBAgQIAAAQIEBO7WAAECBAgQIECAAAECBAgQIECAAAECBAgQGEBA4D4AoiYIECBAgAABAgQIECBAgAABAgQIECBAgIDA3RogQIAAAQIECBAgQIAAAQIECBAgQIAAAQIDCAjcB0DUBAECBAgQIECAAAECBAgQIECAAAECBAgQELhbAwQIECBAgAABAgQIECBAgAABAgQIECBAYAABgfsAiJogQIAAAQIECBAgQIAAAQIECBAgQIAAAQICd2uAAAECBAgQIECAAAECBAgQIECAAAECBAgMICBwHwBREwQIECBAgAABAgQIECBAgAABAgQIECBAQOBuDRAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQEEBO4DIGqCAAECBAgQIECAAAECBAgQIECAAAECBAgI3K0BAgQIECBAgAABAgQIECBAgAABAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAYG7NUCAAAECBAgQIECAAAECBAgQIECAAAECBAYQELgPgKgJAgQIECBAgAABAgQIECBAgAABAgQIECAgcLcGCBAgQIAAAQIECBAgQIAAAQIECBAgQIDAAAIC9wEQNUGAAAECBAgQIECAAAECBAgQIECAAAECBATu1gABAgQIECBAgAABAgQIECBAgAABAgQIEBhAQOA+AKImCBAgQIAAAQIECBAgQIAAAQIECBAgQICAwN0aIECAAAECBAgQIECAAAECBAgQIECAAAECAwgI3AdA1AQBAgQIECBAgAABAgQIECBAgAABAgQIEBC4WwMECBAgQIAAAQIECBAgQIAAAQIECBAgQGAAAYH7AIiaIECAAAECBAgQIECAAAECBAgQIECAAAECAndrgAABAgQIECBAgAABAgQIECBAgAABAgQIDCAgcB8AURMECBAgQIAAAQIECBAgQIAAAQIECBAgQEDgbg0QIECAAAECBAgQIECAAAECBAgQIECAAIEBBATuAyBqggABAgQIECBAgAABAgQIECBAgAABAgQICNytAQIECBAgQIAAAQIECBAgQIAAAQIECBAgMICAwH0ARE0QIECAAAECBAgQIECAAAECBAgQIECAAAGBuzVAgAABAgQIECBAgAABAgQIECBAgAABAgQGEBC4D4CoCQIECBAgQIAAAQIECBAgQIAAAQIECBAgIHC3BggQIECAAAECBAgQIECAAAECBAgQIECAwAACAvcBEDVBgAABAgQIECBAgAABAgQIECBAgAABAgQE7tYAAQIECBAgQIAAAQIECBAgQIAAAQIECBAYQEDgPgCiJggQIECAAAECBAgQIECAAAECBAgQIECAgMDdGiBAgAABAgQIECBAgAABAgQIECBAgAABAgMICNwHQNQEAQIECBAgQIAAAQIECBAgQIAAAQIECBAQuFsDBAgQIECAAAECBAgQIECAAAECBAgQIEBgAAGB+wCImiBAgAABAgQIECBAgAABAgQIECBAgAABAgJ3a4AAAQIECBAgQIAAAQIECBAgQIAAAQIECAwgIHAfAFETBAgQIECAAAECBAgQIECAAAECBAgQIEBA4G4NECBAgAABAgQIECBAgAABAgQIECBAgACBAQQE7gMgaoIAAQIECBAgQIAAAQIECBAgQIAAAQIECAjcrQECBAgQIECAAAECBAgQIECAAAECBAgQIDCAgMB9AERNECBAgAABAgQIECBAgAABAgQIECBAgAABgbs1QIAAAQIECBAgQIAAAQIECBAgQIAAAQIEBhAQuA+AqAkCBAgQIECAAAECBAgQIECAAAECBAgQICBwtwYIECBAgAABAgQIECBAgAABAgQIECBAgMAAAgL3ARA1QYAAAQIECBAgQIAAAQIECBAgQIAAAQIEBO7WAAECBAgQIECAAAECBAgQIECAAAECBAgQGEBA4D4AoiYIECBAgAABAgQIECBAgAABAgQIECBAgIDA3RogQIAAAQIECBAgQIAAAQIECBAgQIAAAQIDCAjcB0DUBAECBAgQIECAAAECBAgQIECAAAECBAgQELhbAwQIECBAgAABAgQIECBAgAABAgQIECBAYAABgfsAiJogQIAAAQIECBAgQIAAAQIECBAgQIAAAQICd2uAAAECBAgQIECAAAECBAgQIECAAAECBAgMICBwHwBREwQIECBAgAABAgQIECBAgAABAgQIECBAQOBuDRAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQEEBO4DIGqCAAECBAgQIECAAAECBAgQIECAAAECBAgI3K0BAgQIECBAgAABAgQIECBAgAABAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAYG7NUCAAAECBAgQIECAAAECBAgQIECAAAECBAYQELgPgKgJAgQIECBAgAABAgQIECBAgAABAgQIECAgcLcGCBAgQIAAAQIECBAgQIAAAQIECBAgQIDAAAIC9wEQNUGAAAECBAgQIECAAAECBAgQIECAAAECBATu1gABAgQIECBAgAABAgQIECBAgAABAgQIEBhAQOA+AKImCBAgQIAAAQIECBAgQIAAAQIECBAgQICAwN0aIECAAAECBAgQIECAAAECBAgQIECAAAECAwgI3AdA1AQBAgQIECBAgAABAgQIECBAgAABAgQIEBC4WwMECBAgQIAAAQIECBAgQIBAF4HflZt+6XKjewgQIECAwFoFBO5rnVnjIkCAAAECBAgQIECAAAEC4wh8WZo9lrIr5VLKn0v5cZxHaZUAAQIECCxLQOC+rPnSWwIECBAgQIAAAQIECBAg8CyBBOzflrK/60B2uf9bKXa7P2tmPJcAAQIEZiMgcJ/NVOgIAQIECBAgQIAAAQIECBCYpUCOjnlXyvGN3v2lfO80y97rFAECBAgQmFBA4D4htkcRIECAAAECBAgQIECAAIGFCXxR+vuhlN2Dfr8v3z8ubGy6S4AAAQIEBhcQuA9OqkECBAgQIECAAAECBAgQILB4gQTsCdoTuD+6fi0VPivl8qii7xMgQIAAgbULCNzXPsPGR4AAAQIECBAgQIAAAQIE6gVqjo+5be2n8h+HUrw0td5YTQIECBBYsYDAfcWTa2gECBAgQIAAAQIECBAgQKCFwJel7rGUXcU92dWeuh8r6qpCgAABAgQ2IyBw38xUGygBAgQIECBAgAABAgQIEHhRYF+++m1l0J4GPpXyVSkXngQIECBAgMA/CwjcrQgCBAgQIECAAAECBAgQILBNgQTtX5eSjzXXz6XSoZRzTWV1CBAgQIDAFgUE7lucdWMmQIAAAQIECBAgQIAAgS0L7MrgE7QnPK+93peKx9rK6hEgQIAAga0KCNy3OvPGTYAAAQIECBAgQIAAAQJbE8gLUT+0DNodH7O1VWK8BAgQINBLQODei8/NBAgQIECAAAECBAgQIEBg9gIJ2t+VknPX83nN9dO1/rmmsjoECBAgQIDAPwQE7lYCAQIECBAgQIAAAQIECBBYr8CXZWgfS6kN2nNO+7GU03pJjIwAAQIECIwnIHAfz1bLBAgQIECAAAECBAgQIEDgWQJflAfn+JhdZQd+LfUSzB8r66tGgAABAgQIvCAgcLcsCBAgQIAAAQIECBAgQIDAegT2ZSh5IWo+1lxN0J6w/ZeaG9QhQIAAAQIEXhcQuFsdBAgQIECAAAECBAgQIEBg+QK7MoTsaM/O9trru1LxWMql9gb1CBAgQIAAgbcFBO5WCAECBAgQIECAAAECBAgQWK7ArnQ9O9oPLYbww7W+oL0FmqoECBAgQKBGQOBeo6QOAQIECBAgQIAAAQIECBCYl0BegvqulK9KqX0haoL2YynneQ1FbwgQIECAwHoEBO7rmUsjIUCAAAECBAgQIECAAIFtCCRoT3BeG7T/fK1/2gaPURIgQIAAgecJCNyfZ+/JBAgQIECAAAECBAgQIECgjcCX1+B8V3lTXoiaHfCC9kow1QgQIECAQF8BgXtfQfcTIECAAAECBAgQIECAAIFxBfal+bwQ9bPKxyRo/3gtv1TeoxoBAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAgREEErAnaN+3aPu7Uje72gXtLdBUJUCAAAECQwkI3IeS1A4BAgQIECBAgAABAgQIEBhGYFea+bqUQ4vmPl2D9kuLe1QlQIAAAQIEBhYQuA8MqjkCBAgQIECAAAECBAgQINBRIC9BTdCeHeq11w+l4rGUc+0N6hEgQIAAAQLjCQjcx7PVMgECBAgQIECAAAECBAgQqBFI0P6ulATt+bzm+rlUOpRyrqmsDgECBAgQIDCNgMB9GmdPIUCAAAECBAgQIECAAAECLwl8Wb54LGVXyZOgPfVPlfVVI0CAAAECBCYUELhPiO1RBAgQIECAAAECBAgQIEDgKvBF+ZgXou4qRX4t9T5eixeiVqKpRoAAAQIEphYQuE8t7nkECBAgQIAAAQIECBAgsGWBfRl8zmnPx9rrvaC9lko9AgQIECDwXAGB+3P9PZ0AAQIECBAgQIAAAQIEtiGwK8PMjvbsbK+9visVj6Vcam9QjwABAgQIEHiugMD9uf6eToAAAQIECBAgQIAAAQLrFtiV4WVH+6HFMH8odfMC1R9b3KMqAQIECBAgMAMBgfsMJkEXCBAgQIAAAQIECBAgQGB1Ar8rI3p3Dc7zec2VoP1YyrmmsjoECBAgQIDA/AQE7vObEz0iQIAAAQIECBAgQIAAgWULZEd7dqjXBu0/X4P207KHrfcECBAgQICAwN0aIECAAAECBAgQIECAAAECwwh8eQ3Od5XN/Xqt/7GyvmoECBAgQIDAzAUE7jOfIN0jQIAAAQIECBAgQIAAgdkL7EsP80LUzyp7mqA9IXvKL5X3qEaAAAECBAgsQEDgvoBJ0kUCBAgQIECAAAECBAgQmKVAgvYcH5OPtdd3pWKOmxG014qpR4AAAQIEFiQgcF/QZOkqAQIECBAgQIAAAQIECMxCYFd6kaD90KI3n65B+6XFPaoSIECAAAECCxMQuC9swnSXAAECBAgQIECAAAECBJ4mkJeg5uiYNkH7D6X+sZTz03rtwQQIECBAgMBkAgL3yag9iAABAgQIECBAgAABAgQWKpCg/V0pOQomn9dcP5dKh1LONZXVIUCAAAECBNYhIHBfxzwaBQECBAgQIECAAAECBAiMI5Cg/VhKm6A99U/jdEerBAgQIECAwJwFBO5znh19I0CAAAECBAgQIECAAIFnCXx5Ddp3lR34tdT7eL2n8hbVCBAgQIAAgbUJCNzXNqPGQ4AAAQIECBAgQIAAAQJ9BPbl5pzT/lllI03QnrD9l8p7VCNAgAABAgRWKiBwX+nEGhYBAgQIECBAgAABAgQItBJI0P51KflYe31XKh5LudTeoB4BAgQIECCwbgGB+7rn1+gIECBAgAABAgQIECBA4G2BXfl2gvZDC6hPpW5eoCpob4GmKgECBAgQ2IKAwH0Ls2yMBAgQIECAAAECBAgQIHAvkJeg5uiYNkH7D6X+sZQzTgIECBAgQIDASwICd+uCAAECBAgQIECAAAECBLYkkKD9XSnZoZ7Pa66fr/W/r6msDgECBAgQILBdAYH7dufeyAkQIECAAAECBAgQILA1gRwd0zZoP5Z7TluDMl4CBAgQIECgm4DAvZubuwgQIECAAAECBAgQIEBgOQJflq4mON9VdvnXUu/jtfxSeY9qBAgQIECAAIHfCNwtAgIECBAgQIAAAQIECBBYq8C+DOxbQftap9e4CBAgQIDA/AQE7vObEz0iQIAAAQIECBAgQIAAgX4CCdpzfEw+1l7flYrHUi61N6hHgAABAgQIELgXELhbEwQIECBAgAABAgQIECCwFoFdGciHUr5oMaBPpW7OdRe0t0BTlQABAgQIEHhZQOBuZRAgQIAAAQIECBAgQIDA0gUStGdH+6HFQH4odY+lnFvcoyoBAgQIECBA4E0BgbsFQoAAAQIECBAgQIAAAQJLFfhd6fi7a3BeO4afS8WDoL2WSz0CBAgQIECgjYDAvY2WugQIECBAgAABAgQIECAwB4EmaM9RMPm85krQfizlVFNZHQIECBAgQIBAFwGBexc19xAgQIAAAQIECBAgQIDAswS+LA/+WEpt0P7rNWjPPS4CBAgQIECAwKgCAvdReTVOgAABAgQIECBAgAABAgMJJGg/lrKrbC9Be0L2lF8q71GNAAECBAgQINBLQODei8/NBAgQIECAAAECBAgQIDCywL60/6GUz1o857tSN8fNCNpboKlKgAABAgQI9BcQuPc31AIBAgQIECBAgAABAgQIDC+QoP3rUvKx9krQfizlUnuDegQIECBAgACBIQUE7kNqaosAAQIECBAgQIAAAQIE+grsSgPZ0f5Fi4Z+KHWzo/3HFveoSoAAAQIECBAYXEDgPjipBgkQIECAAAECBAgQIECgg0CC9uxoP7S4N0H7sZRzi3tUJUCAAAECBAiMJiBwH41WwwQIECBAgAABAgQIECBQIfC7UidBe3ao114/X+t/X3uDegQIECBAgACBKQQE7lMoewYBAgQIECBAgAABAgQI3AskaH93Dc7zec2VoP1YyqmmsjoECBAgQIAAgakFBO5Ti3seAQIECBAgQIAAAQIECDQ72muD9l8L2cdr2E6PAAECBAgQIDBbAYH7bKdGxwgQIECAAAECBAiMIrArrf6+lM9KSdi5v3lKvpfSXHkB5ftSHNsxylRsstEvy6iPd+vsLYgmaE/Y/ssmxQyaAAECBAgQWJSAwH1R06WzBAgQIECAAAECBFoJJFD/Yyn7UhKw52PbKyHnv5dyaXuj+gRuBNoG7bn1m1KOpQjaLSUCBAgQIEBgMQIC98VMlY4SIECAAAECBAgQeCjQBOxflJr7UnYP76ir8OdSzS73Oiu1/lkg6zDHx+Rj7fVdqXgs5VJ7g3oECBAgQIAAgbkICNznMhP6QYAAAQIECBAgQKCbwK7cll3sCdlTxrgE7mOorrvNfRle26D9h3LPoZTLummMjgABAgQIEFizgMB9zbNrbAQIECBAgAABAmsVyE72HNGRcDJHxYx9/ak84Dz2Q7S/CoFdGcWHUtr88idB+9EaW8X8GwQBAgQIENi8gMB980sAAAECBAgQIECAwIIEErKPuZP9NQr/f8OCFsmTupqgPTvaDy2e/1Op+5WgvYWYqgQIECBAgMDsBfwfzrOfIh0kQIAAAQIECBDYuECCzHfXIDM724e4sqP4ci0/lo95KeVfS3mp/U/l6212Kw/RP20sRyBrJkF7gvPa6+dS8VjKqfYG9QgQIECAAAECSxEQuC9lpvSTAAECBAgQIEBgawLNkTH7ngPPLuKE6udrubzQXsLPhKYvXc5v7zkBK709QXt+EZSgvfYXQYL2lS4GwyJAgAABAgT+V0DgbjUQIECAAAECBAgQmI9AE2IeSpd2Hbv1a7nv+2s5l4/Zvf7WlTPg//5KhQSkXfvRsftuW4BAs6O9NmjPmvxYynEBY9NFAgQIECBAgEAvAYF7Lz43EyBAgAABAgQIEBhEIKF3c2xMlwYTjN+G7LVtJDBN2L575QYvS62V3Ea9/NXF8Y31cq/QBO0J2x/94mcbgkZJgAABAgQIrF5A4L76KTZAAgQIECBAgACBGQt8XvqWIzn2HfrY7GRPmJkjY9peCdv/VkrC/peunPPepV9t+6H+/AXaBu0Z0TelHEsRtM9/fvWQAAECBAgQGFBA4D4gpqYIECBAgAABAgQIVAgk6E7QnjByV1H/vkpeYnoqJTva+1wJ2/evNJAwP30TlvYRXv69WR8fSnntlzIvjfC769q+LH/4RkCAAAECBAgQaC8gcG9v5g4CBAgQIECAAAECXQS6vGSyeU4C8FMp2c0+RJD5bWnn8MYgHCXTZYbXc8++DCXntOdj7ZW/iMiaGmJ91j5TPQIECBAgQIDA7AQE7rObEh0iQIAAAQIECBBYmcCujCfhZcLItldCzNO1tL33tfqPwvb35cbjUA/TzqIEspM9O9r3LXqdNZr1cm5xj6oECBAgQIAAgdUKCNxXO7UGRoAAAQIECBAg8GSBhJZtdwk3Xc6xHF3PZn9t2Nlh/9dS0q/Xrjz38GQ3j59eYHddq23mXtA+/Tx5IgECBAgQILAAAYH7AiZJFwkQIECAAAECBBYlkBdMJrjct+z1z6X+qZQE7UOfnZ6dywnbd2/0SdjecsJWUD3roe1fX2SdHq9rdQUEhkCAAAECBAgQGFZA4D6sp9YIECBAgAABAgS2KdDnRag/FbKE7KeR6L4o7eYYmfTxtSt9aPNizJG6qtmJBLIWErR/1eJ5gmpWyTgAACAASURBVPYWWKoSIECAAAEC2xUQuG937o2cAAECBAgQIECgv0CfF6GOfSTHrgwv53EncH/rSti+L2XoXfX9dbUwtECX9ZoX9uYXQsehO6M9AgQIECBAgMAaBQTua5xVYyJAgAABAgQIEBhbYFce0PYojqZPObol4eVlxE6+uz7jrV3tefynUg6lCNtHnIwZNN0naB/jiKMZkOgCAQIECBAgQGAcAYH7OK5aJUCAAAECBAgQWKfAvgyrOaO9zQibXcJjh5e70qkcH5N+Prq+KRXaHCnyqD3fn6dA7S9fmt5PtVbnqaVXBAgQIECAAIGeAgL3noBuJ0CAAAECBAgQ2IRAAuzsaM/HNlfOvW7OZx97F3n6d6zoXALVBO2nirqqLFcgvxjKeti1GMIUf33RojuqEiBAgAABAgSWJyBwX96c6TEBAgQIECBAgMB0As1u9n3LR479ItTb7qRv2dVeE6ymX4dSfmw5HtWXIyBoX85c6SkBAgQIECCwQgGB+won1ZAIECBAgAABAgR6C3QJLfPQsV+EejuwBOy1x8fkvvelHHvLaGCuAl3WbM7wz187XOY6KP0iQIAAAQIECCxNQOC+tBnTXwIECBAgQIAAgTEFuoSW6c+UR3HkBZg5Pqb2/PX8EiB17Wofc+U8r+39dT3kY+015S+GavukHgECBAgQIEBgFQIC91VMo0EQIECAAAECBAj0EEiA/Xkpx1J2LdrJWeinUnJG+6XFfX2q5hcCeV76/OhK/zKm1HetT2BfhtT2vQKC9vWtAyMiQIAAAQIEZiYgcJ/ZhOgOAQIECBAgQIDAZAIJrd+Vkt3fNQF207EE2QmxU8Z+EWrzzISrH0r5rFInweqhlEtlfdWWI5C1IGhfznzpKQECBAgQILAxAYH7xibccAkQIECAAAECBP47XO8StP9c7juWcprQMAF7gvaErDVX+phfIHxfU1mdRQlkDbQN2p+xZheFqrMECBAgQIAAgaEFBO5Di2qPAAECBAgQIEBgrgJLCtp313D1UInZ7Lo/VtZXbTkCgvblzJWeEiBAgAABAgR+I3C3CAgQIECAAAECBNYusKSgPX3NjvbaoD1zN+ULW9e+VuY0PkH7nGZDXwgQIECAAAEClQIC90oo1QgQIECAAAECBBYn0DVoz/nnOZ99ymNZuvTVCzAXtySrOrwrtXJ0zKGq9j8qOTqmBZaqBAgQIECAAIExBQTuY+pqmwABAgQIECBA4BkCXcLr9PNZAXbC1TYvbs3xMal/egauZ44msCsttw3an/EC39EANEyAAAECBAgQWIOAwH0Ns2gMBAgQIECAAAECjcCX5ZNjKQkva69nBe1t+ypcrZ3RZdXLWhW0L2vO9JYAAQIECBAg8KqAwN3iIECAAAECBAgQWINA2/A6Y15K0J6+vi8lx9z8sobJMob/FtiVImi3GAgQIECAAAECKxMQuK9sQg2HAAECBAgQILAxgbUH7V6Iur4FLWhf35waEQECBAgQIEDgfwQE7hYDAQIECBAgQIDAEgXWHrR/KpOSc9ovS5wcfX5R4LPy1XelHFr4OEaoBZaqBAgQIECAAIE5CAjc5zAL+kCAAAECBAgQIFArsC8VP5SS8LL2WtLRMc/qa62leu0FsmZzdEw+1l6C9lop9QgQIECAAAECMxMQuM9sQnSHAAECBAgQIEDgRYEuoeWzwusl7b633MYT6LJmBe3jzYeWCRAgQIAAAQKTCAjcJ2H2EAIECBAgQIAAgY4C2cmeHe0JL2uvn0rFHMdyrr1hoHqC9oEgF95M1qod7QufRN0nQIAAAQIECHQVELh3lXMfAQIECBAgQIDAmAK7a2h5aPGQn0vdYymnFvf0rfq70sDn1+emz7XXs3bf1/ZPvfYC+YVL1uu+xa12tLfAUpUAAQIECBAgsAQBgfsSZkkfCRAgQIAAAQLbEdiVoWZ3cILL2utZQXtegJmd9Anday9Be63Ucup1+csGQfty5ldPCRAgQIAAAQKtBATurbhUJkCAAAECBAgQGEkgoXXbAFvQPtJkaPahQNe/bBC0P6RVgQABAgQIECCwbAGB+7LnT+8JECBAgAABAksX6BK0J7Q8lvJxwsF36We6Z0f7hJM0waO6rgNB+wST4xEECBAgQIAAgTkICNznMAv6QIAAAQIECBDYpkDbozieEVp2DVgF7eta07synLZHHUXgGWt2XfJGQ4AAAQIECBBYmIDAfWETprsECBAgQIAAgRUI7MsYvi0lIWbt9b5UzI72X2pvGKBefiGQZzqjfQDMhTaRtdq8DLXNEJrjjr6feM226aO6BAgQIECAAAECIwgI3EdA1SQBAgQIECBAgMCLAgkvs0s4H2uv70rFYymX2hsGqNd2530eaUf7APAzaqIJ2dus1XT/Ge8VmBGbrhAgQIAAAQIECAjcrQECBAgQIECAAIGxBXblAW2P4xC0jz0r2r8XyF8yJGj/qpSs2TZXfuFyupY296lLgAABAgQIECCwMgGB+8om1HAIECBAgAABAjMSSID5oZRDiz49Y6f4/trPz2bezxbdU7WFwK7UfXddp22OD8ojnrFeWwxNVQIECBAgQIAAgakFBO5Ti3seAQIECBAgQGD9Al1eNPpTYcnO4vOEPPvyrLZH3AhYJ5ygkR+V+U/Q/kWH5zzjLzA6dNMtBAgQIECAAAECUwsI3KcW9zwCBAgQIECAwLoF2r5o9BlnXu/KFOSlrQlcay9Be63U/Os1x8a0+YuGjOrXUk6l5EW6l/kPUw8JECBAgAABAgSeISBwf4a6ZxIgQIAAAQIE1iewL0NKiL2rHFrCy+M1vKy8pXe19K3tWfLP2Hnfe6Aa+BeBzH0TtLc9Nia/FErIfirlF7YECBAgQIAAAQIE3hIQuFsfBAgQIECAAAECfQSySzjntO8rG0nQnvAyZarwMgFrgvYcWVN7PWPnfW3f1KsXyLpM0H6ov+V/anoRagc0txAgQIAAAQIEti4gcN/6CjB+AgQIECBAgEA3gV25re1u8anPve5ylrygvdt6mNtdXY+NyTiyTk+lnOc2KP0hQIAAAQIECBCYv4DAff5zpIcECBAgQIAAgTkJdAmxs1P4UMplwoHkZZjHUmqPD2l23uce1zIFdqXbXY+NcT77MudcrwkQIECAAAECsxMQuM9uSnSIAAECBAgQIDBbgbYvRH3Gi0bTx4TmCV9rrmcccVPTL3XqBfalatdjY5q/aPi+tDHVEUf1I1OTAAECBAgQIEBgcQIC98VNmQ4TIECAAAECBCYXSKDZ5oWozziWpW0fg/hNKUdB6+TraYgH5i8XPr/O365Dg/llUN4jkKDdRYAAAQIECBAgQGAwAYH7YJQaIkCAAAECBAisTqDrC1GPE0rsy7Nylnw+1l5TnyVf2y/1HgvsrvP9RflYe1xQ02r+miEBe9bn5fGj1CBAgAABAgQIECDQXkDg3t7MHQQIECBAgACBtQskyPxQyqHFQKfeLb679jHBa+31jLPka/um3tsC2c3+VSn7DlD5i4vsZj+V4tiYDoBuIUCAAAECBAgQqBcQuNdbqUmAAAECBAgQ2IJAdosn2KzdPfzpWv8yEc6uPCd9PLR43jPOkm/RPVVfEchcN2ez5/O2l2Nj2oqpT4AAAQIECBAg0FtA4N6bUAMECBAgQIAAgVUItH3Z6NQhdn4B8K6UYwvt7Gw+lHJucY+qzxfYly50fQmqY2OeP396QIAAAQIECBDYtIDAfdPTb/AECBAgQIAAgf8+oqPNGehTvxC1Cdrb7Lqfuo+WUX+Bvi9BbeY8Z7Q7Nqb/fGiBAAECBAgQIECgo4DAvSOc2wgQIECAAAECCxfYXYP2Q+U4snM452AfK+sPUS27nPPM2uNtntHHIca55TbyYt785UKXl6DGLS/APZVy3jKisRMgQIAAAQIECMxHQOA+n7nQEwIECBAgQIDAFAJddown1MwO86l2Drc93qYJ2hPOT9XHKeZqzc9ojozZdxhkdrMnZE+5dLjfLQQIECBAgAABAgRGExC4j0arYQIECBAgQIDA7ATaBtk5p/0wYai5L8/6UEp2PddeU/8yoLZf6v2rwK58KbvZs6Zq/2rhtpWsx9O18CVAgAABAgQIECAwSwGB+yynRacIECBAgAABAoMK7Etrbc9pTyh6HrQXrzfWtn9pKUH7sZTLRH30mO4CfXazNy9BzV8v/Ni9C+4kQIAAAQIECBAgMI2AwH0aZ08hQIAAAQIECDxDYFcemqD9UPnwhJvHUhJuTnFlJ3t2tO9bPCy7nHO8jfC1BdoTqmbtNUF7Pm97eQlqWzH1CRAgQIAAAQIEZiEgcJ/FNOgEAQIECBAgQGBQgS7ntH9TenAsZYoz0BPAtvlFQHAStKd/50GlNDa0wOelwUMpeQlql8tLULuouYcAAQIECBAgQGA2AgL32UyFjhAgQIAAAQIEBhFoe077p/LU7Bi/DPL0txvZlW+3Ddqz0zn9+36C/nlEN4HMa9/d7KfShpfedvN3FwECBAgQIECAwIwEBO4zmgxdIUCAAAECBAj0EGh7PMtP1yD73OOZtbdmx32C9gTntVdzpMip9gb1Jhfou5s9v+zJ/PplyuRT54EECBAgQIAAAQJjCQjcx5LVLgECBAgQIEBgGoGE2TkH/VD5uJzTnuA7QefYV5ejbaY+R35sg7W1vysDGmI3e9bfZW04xkOAAAECBAgQIEBA4G4NECBAgAABAgSWK9DsGk+wXXO9L5WmOLaja9Cevk3Rvxordf5ZoO9u9pzBf7oWtgQIECBAgAABAgRWKyBwX+3UGhgBAgQIECCwYoG8kDK72neVY0zYeSjlUlm/azVBe1e5ed6X+cxu9vxFRO1aux1J/lrhVEp+iTL22punoF4RIECAAAECBAhsTkDgvrkpN2ACBAgQIEBgwQIJPb8tZV85hpyDfijlXFm/T7UEswlWa3fb51nflXIs5dLnwe4dXCDrqzk2pkvjdrN3UXMPAQIECBAgQIDAKgQE7quYRoMgQIAAAQIEVi7Q9qWjU56DnmA2ofmuxRwI2ltgTVQ189fnbHa72SeaKI8hQIAAAQIECBCYt4DAfd7zo3cECBAgQIAAgbY7x7+5BuC/jEwnaB8ZeKLm+57N/lPpZ/6y4TRRfz2GAAECBAgQIECAwKwFBO6znh6dI0CAAAECBDYssC9jzzntn1UaTHVOe5egPX07lnKuHItq4wpkTTW72dscAdT0KrvZvy8lQfuP43ZV6wQIECBAgAABAgSWJSBwX9Z86S0BAgQIECCwfoFdGeLXpRwqh5pz2vNSywSgY16C9jF1x28766rZzV77S5z7XjW72bPWxv4LivFFPIEAAQIECBAgQIDACAIC9xFQNUmAAAECBAgQ6CiQoD3hec2u4+wyzg7jY8dn1d4maK+Vml+9rKOE7F9cS5ce2s3eRc09BAgQIECAAAECmxUQuG926g2cAAECBAgQmJFAAtEcH7Or7NMULx0VtFdOxgyr3YbsNb+8eWkIdrPPcGJ1iQABAgQIECBAYP4CAvf5z5EeEiBAgAABAusVSMD+bSn7yiFOcRa6oL1yMmZWre+57BlOdrOfrsXZ7DObYN0hQIAAAQIECBBYhoDAfRnzpJcECBAgQIDAugSy67g5PqZmZAlCc9RMwtAxrubokWNpfNfiATk/PveM1a8WXdlk1SZkz19ItJm3e6xP5Qs5l908bnIZGTQBAgQIECBAgMCQAgL3ITW1RYAAAQIECBB4LJAd5Dl7vfaoj/fX+mO8pDJ9eFdK7bnxzegE7Y/neawau9Jw35efpm+Zw6zDBO2XsTqrXQIECBAgQIAAAQJbExC4b23GjZcAAQIECBB4lsC+PDi72vOx5srxMYdSLjWVW9YRtLcEe3L1zFd+UZP1kF3tXS9HxnSVcx8BAgQIECBAgACBSgGBeyWUagQIECBAgACBjgIJS/NC1ISlNVd2HqfuuaZyyzq7Uj872tN+7Q77PMKO9pbQA1RvjvnJcTEpXa+E7NnF3pSu7biPAAECBAgQIECAAIEKAYF7BZIqBAgQIECAAIGOAs057TXhdoLRHPFx7Pist27blW+mL4eWbf907dOp5X2qdxdojovpE7Ln6c257AnaxziOqPsI3UmAAAECBAgQIEBgxQIC9xVPrqERIECAAAECTxPYlyd/W8qusgfflXo5R33oYDT9yI72tuFtjrM5lnKu7L9q/QQyTzkyJvNU88uZ156WX5CcrmXotdRvhO4mQIAAAQIECBAgsBEBgftGJtowCRAgQIAAgUkEduUpOT6mNuBOQJqg/Txw75rzvvct2xW0twTrUT1rpZmnfN71akJ2Lz/tKug+AgQIECBAgAABAgMKCNwHxNQUAQIECBAgsFmB5iWkx0qBHB+ToP1UWb+mWvNizbS7q7nhpo6gvSVYx+rNueyZoz4vP82Z+gnYs35+7NgXtxEgQIAAAQIECBAgMIKAwH0EVE0SIECAAAECmxLIbvbsat9VjvqbUu9YylBHfuS5XV6Emu7mKJucGy+0rZy8jtVyLnvWyaHj/bmtefmp+eqB6FYCBAgQIECAAAECYwsI3McW1j4BAgQIECCwVoFdGVjOad9XDjC7yLOzeahwO8/tcj57upug/VjKpbLvqrUXyProe2RME7JnN3uKiwABAgQIECBAgACBmQsI3Gc+QbpHgAABAgQIzE4gx4J8XUrC85orx3+k7lCBaULcLkeSJLzN7uhTKZeajqvTSaDr+fm3D/t0XS+ZKxcBAgQIECBAgAABAgsSELgvaLJ0lQABAgQIPFFgV579+xeen6+n3F+vff22XoLrPudYp63sFr89miWf3+4gv/3vBN+XnoYJUxNap++PribgTv2+x8fkec2xMS95v9WXjLsJ2vv249GYt/r9zEnXY30as7z8NPOUX8yYp62uJOMmQIAAAQIECBBYvIDAffFTaAAECBAgQOChwB9varwUcu/vWhgiCH/YqSdXuA3qz9e+NB8TfN4HnvnFQM5pv7d6bRjZoZxd6Jee49yV+7Ob/tChnRxhc7qWDre7pUIgZ7Nnbr6oqPtSleblpwna+66Vjl1wGwECBAgQIECAAAECQwoI3IfU1BYBAgQIEBhPIIHvb6/N3wfi+d7tjuv9eN3YVMsJQJsQtNY0AeqhlHNPqQS5Cexrn3v7uJzPfhqgDz2HsNrb87PWHOuz6zDK5lx2c9QBzy0ECBAgQIAAAQIE5i4gcJ/7DOkfAQIECKxR4DY8vw3Lbz/fwi7ztc1tgu5Dj0FlzhO0H0tpG+QmxE2Aa6d0jwl4cGvmJH9tkN3sNUcK3TfX/MWBI2PGmyMtEyBAgAABAgQIEHi6gMD96VOgAwQIECCwAoHbI1v2N+N57fMVDNkQXhHIUTQ5ruZ8LQlZH127UqHr+d/OZ3+k2//7ff7awC9C+vtrgQABAgQIECBAgMCiBATui5ounSVAgACBiQSye/UP12clDE3Jdfv5/TEuE3XNYxYocCp9zu73813f9+W/E7R3Of87QX7zgs0Fksy+y33+2iCDyxn+mffsZncRIECAAAECBAgQILAhAYH7hibbUAkQIEDgN81RLrfHteyKS0quPaNXBbJTNzu3769L+UJK7ddv6zW7wfuw3//i4/4ontv5vT3Kp88zu957Ljf+uZRmx3T60/ZKcJ+g/aW5aNuW+v8qkPXS9a8N7Ga3oggQIECAAAECBAgQ+I3A3SIgQIAAgTUINEe63IatTRDrLPTf/Ob+WJMEv7dXwtuE37fXfZ01rJPbMeyv/3EoH/MCzDlfCXITsqfcz9Oc+72kvmU9ZB1kPbS9frrOzantjeoTIECAAAECBAgQILA+AYH7+ubUiAgQILAmgSZI35VBpeTaXz/efm1NY35tLDmr+3LzzfPN5/eB+UsB+haM2owx6+dDKbXHuTS/tLg9bqjN87rUFeR2UWt3TxOyN/+utLk7f21wKuX2Z7HN/eoSIECAAAECBAgQILBCAYH7CifVkAgQILAQgSZMb3aiJwBN2cKO9Nvw/FLGnJLr/ogVQd44i/nr0uxX17X26AnZXZ66p7uKzXrdX9dt/vv25bmP2n3r+zn/O7vZzX8fxdfv7XM+e/PXBlkPzc/tOL3UKgECBAgQIECAAAECixQQuC9y2nSaAAECsxfYWpiencjNUR+3u8tf+3z2E7jSDu7LuL4tZVc5vm9KvePN3D66Le222TV/257zvx/p9v9+gvacz177y5bbJ/prg/7+WiBAgAABAgQIECCwCQGB+yam2SAJECAwqMBWwvTmCJHbXee3n1+Kaopr/gK70sU2QXjm/tBifvelbtfzv/PXDsdSvi/F+ezjrKXMf/6qIXPa9vLXBm3F1CdAgAABAgQIECCwcQGB+8YXgOETIEDgTqA5n7o51uX+49LBbo9yaXaf34bozj5f+gz/c/+bHc3HymFlfWT3c8LvR1efY0nSdkL9HBtT86xHffH9lwV25ctdgnZ/bWBFESBAgAABAgQIECDQWUDg3pnOjQQIEFikwFoD9dsjXc7XmbmUjym5mq8tctJ0upNAXoaaXe27yrvfl3oJwB/tMk97OZbkUEp+ntpe2TGdUL9Zm23vV/+xwL5USdCej22u/MIla+BUsQ7atKsuAQIECBAgQIAAAQIbEhC4b2iyDZUAgU0IrC1Qb4L0l3ah335tE5NrkFUCu1Ir57Tvq2r/Y6f5oZTLg/qfl+8nKK9t96XmsnM6/XsU6ld2XbU7gcxNl6Dd+eyWEgECBAgQIECAAAECgwkI3Aej1BABAgQmEVhToN6E6Qk6U24D9PMkmh6yJoExjo/ZFaDmbPZ83vfKLvpj30bc/y8C+/KVLkF7ftmS+fDvjUVFgAABAgQIECBAgMBgAgL3wSg1RIAAgcEEmlB9V1pM+ayUfC2h0lIuYfpSZmod/WxzfEx2mefYkOMbQ8/PWo6NSbtDXTmuJD/PruEEMk9dgvbvrvN/Ga4rWiJAgAABAgQIECBAgMA/BATuVgIBAgSeI5Dg7fel3IbpzQtKn9Oj+qcK0+ut1BxXID9HbY6Peev89Pz8ZTd7jo1Ju0Nf/14azEt5Xf0F9qWJtkG7F6H2d9cCAQIECBAgQIAAAQIVAgL3CiRVCBAg0FEgYfpvS0k41ITpSwjVm0D9fB33/ceOHG4jMJhAl+NjDuXpzVq+7Uh+PptjY7p0MCH+H0rZvXHzf5TvZVe9q59A5qpL0B77mhfi9uuduwkQIECAAAECBAgQIFAEBO6WAQECBPoJ/PF6e4KgJkzflc9T5no1gXp22zbnpt9+nGu/9YtABBKOJzzNz9uj67XjY/Lz2eds9qbd70s7OXrm8EZHcnzJW99/NAbf/8e/p23+kiFmzRwJ2q0gAgQIECBAgAABAgQmFRC4T8rtYQQILFQgYU9z/Es+z8715iiYOQ5JoD7HWdGnvgL5mftQyr6yofvjYxLQf17KoUUb94/KSzZP15L2/nb9t+C1LuVnMf3NL7Rc7QXy7212tGfOaq+clX8sJb8M4V6rph4BAgQIECBAgAABAoMJCNwHo9QQAQIrEMhu9WaX+u3Z6nMbmkB9bjOiP2MK5GcyoWvOVq+5ErgeSjlfK+/Lx+xm/+L6813Txm2d7JROeHss5XL9Rv59SNj+1i57YXtb6f+t3/bIoNzZBO2n7o91JwECBAgQIECAAAECBPoLCNz7G2qBAIFlCSTIyXnLt4H6rvx3ypyu7KS9P+7lUr6W4iKwFYG2x8ccC0yOEMnPc58jY+KbwDxt3e+UTvif57x1Cdu7r9Ac0RPfmiOD8hRBe3drdxIgQIAAAQIECBAgMIKAwH0EVE0SIDALgdtgfVd6lIB9P4ue/W8nbkP1S/lyyo+lOAZhZhOlO5MLtD0+JuekH0vJX6lkJ3tKl6vZzZ6gPT+Lt1f+Hak5Rzx9yW58P8ftZiD/Psc3zjXXa+fz19yrDgECBAgQIECAAAECBEYTELiPRqthAgQmFEg4l13rCWoS2uRjbWgzZjcTCCW0u1xLE6afx3yotgksWKDt8THZSd4c7XLoMe7XdrM3TSbATxj8aNf1N6VO7dE3Pbq7qlvzb3XNLzKaQXsZ6qqm32AIECBAgAABAgQIrE9A4L6+OTUiAmsWSDCTl5fuS0nInv/Ox2deOc7gUsp9mH5+Zqc8m8ACBdocH9MML7vIH4Xgr1HkZzfHxWQ3e36GX7rSdsLgmh3zfyn1Tgt0f1aXY9scH1Pbh/fX+fLXA7Vi6hEgQIAAAQIECBAgMLmAwH1ycg8kQKBSIEdD3Ibq+bxrsFb5yDer5fiXy7U0u9bvj5wY4jnaILA1gbbHx/T1yZEvCdpT3rpqfwGQ4D6BvH8P6mdmX6q2OT6mOTIo/wa7CBAgQIAAAQIECBAgMGsBgfusp0fnCGxGoDkSJiFMPn/WrvXb3eoJdm6Pg9nMZBgogYkE2h4f06dbj46MuW17V/6j9oiTT6XuoRQ7rutmJ3P+4WpWc0d+0Xks5VxTWR0CBAgQIECAAAECBAjMQUDgPodZ0AcC2xJowvUmWN8/YfgJ3y6lJFC/PwrmCd3xSAKbE6jdPd4HJmd9n66lZvd52yNO/qO0neNoXHUC+SuAmnPw01p++flVKY/+CqHuyWoRIECAAAECBAgQIEBgQgGB+4TYHkVggwLPDtfvg/Vmx/oGp8KQCcxCYOzjYxKyN8fFtAlr8wuAYym7CqX8u3IopSbEr2huE1XilbD90dW8EDVz4SJAgAABAgQIECBAgMAiBQTui5w2nSYwS4HsDs256/tSEqrl41RXQpqEX+dSLteSz10ECMxDYOzjY3K0SwL2U8vh5t+pr1v8e5WXdh5bPmPr1Q8FoCZszxxmV3v+DXcRIECAAAECBAgQIEBgsQIC98VOnY4TeLrA7bnrCa12E/WoeXlpcxxMcyTMRI/3GAIEWgqMdXxME7InaG973uQL5wAAIABJREFUhnr+vUrQfqgci13tlVB31eL7KGx3fEw3W3cRIECAAAECBAgQIDBTAYH7TCdGtwjMUOB+93p2rI553e5ab46CcYTDmOLaJjCswL4012b3eM3T8wu3UyldQva03/acdkec1MzKy3XyS9m/Xc1fa+Wb8o1jKW1/YdK9V+4kQIAAAQIECBAgQIDAyAIC95GBNU9goQK70u8/lLK/lgQnY1734bqz1sfU1jaBcQTy70Z+MZeXY+bfjqF+KZeQvTmX/dKx603QniNLavvliJOO2Nfb/l4+vva/Hfk3P+vk3O8R7iZAgAABAgQIECBAgMD8BATu85sTPSLwDIEEUJ9fQ7IEZbsROyFcHxFX0wQmFBjrWKn8G5EgtgnZ++5+bvNC1PDliJPDtQ8Tcq7qUR/LaN69MqLMb/53xl8srWrKDYYAAQIECBAgQIAAgUZA4G4tENiuwG3APtYOduH6dteXka9PYMxjpfJvRROw5+MQV9ugPX04lpKw2NVdYF9uzVEyL10xzv/eXLo3704CBAgQIECAAAECBAjMW0DgPu/50TsCQwrsSmPNcQ/5U/4xrrxYMLsWz9ciVBlDWZsExhfIX73k34uEo/trGfqp2UmecP10/XdjqPbT3w/Xvte2+b5UTNDedzd97fPWXC9he+bgpevP1zlf8/iNjQABAgQIECBAgACBjQsI3De+AAx/9QK7MsLsZD+UMsYu9pytfC6lCdmFVatfUga4UoH8W3G7g32Mfy9uj4rJvxuXgS33pb22L2n9rtxzHKEvAw9tMc3lf2u+faW3ORN/rF/2LgZIRwkQIECAAAECBAgQWL+AwH39c2yE2xNozmNPsDFkuNGEZQnKmoB9e7pGTGAdAvfh+m7EYSXUzu7xsc7s3pe22wbt+WXhsZT8e+YaTuA/S1MvraX870e+7peyw1lriQABAgQIECBAgACBmQoI3Gc6MbpFoINAwoyETgnZE7r3vXI8zLmUJly/9G3Q/QQIPEUgu9Wb42Hy+Ri7118aWP4N+er678gYA99f/83Lx9pL0F4r1b5e/rfnr6/c9pfy9VP7Jt1BgAABAgQIECBAgACB5QkI3Jc3Z3pM4F4gYdO7UvruZs95yudrybnKdiJaawSWJ5Aw/Q+lNMF6/n2Y+hr75aMZU9sd7fn37VjKaWqMDT0v/7uRI8zur9jvNuRgqAQIECBAgAABAgQIbFxA4L7xBWD4ixZIgJHQ6dBxFLdHxJxLG2Md99Cxe24jQOCBQP4NaML1ffk8IfsQf93SBz7Hx2RX+xi/sMsYBe19Zmfce//rlebtbh/XXesECBAgQIAAAQIECMxMQOA+swnRHQKVAodS70OHcC0he3YhNqXycaoRIPBkgWbn+q70Y1/KHML1W5Ixj4/JeAXtT16ADx7/1nEy/m/Nec+d3hEgQIAAAQIECBAgMLCA/ydoYFDNEZhA4NvyjEOL5wjZW2CpSuDJAtmhnl3rCZl3pUx95vq5PPP3pdQeUTXm8TExaBu0pz95QWvKGLvsn7w8Zvv443Wu7juYM/Mzjy4CBAgQIECAAAECBAhsRkDgvpmpNtCVCLwWarw0vBztYCf7SibeMFYpkDA94XY+JpScctd6ztXOMVIp52vZlY/5hV76UnONdXxMni9or5mB+dR57X+b3pcu5nsuAgQIECBAgAABAgQIbEZA4L6ZqTbQFQgkjPt7xTi+uQYcdndWYKlCYAKBP5Zn7K4lP8f5PB+nurLruwnWm4+3/z5kV31evHys7NBYx8fkhZs5/31f2Y9Us6O9BdaIVbN28kuS+0vgPiK6pgkQIECAAAECBAgQmKeAwH2e86JXBF4SeC3QeKR1fqFCQrf7QP6lr+U4ABcBAo8FdqVKs1s9nzdHwSTMnvrKz+3t7vXLGx3I0TF5H0T6/Oga6/iYL8uD8+9bTR+aPgraH83WtN/P/AncpzX3NAIECBAgQIAAAQIEZiogcJ/pxOgWgRcEXgs0psY63z0wwX3CvdvrUv4j5fbKERb3X5u6755HoI/ArtycUD0fU5ojYPZ9Gu15b3ab3+5ev/9ZfK359P/Zx8cI2ntO/oxuP5a+CNxnNCG6QoAAAQIECBAgQIDA8wQE7s+z92QCbQUSkCVM+23bG2dc/1L6lnJ71X6tOSZjxsPTtYUJ5GfsNlDPf9+WZw7n9liY/Iw0O9jb9mkOx8cI2tvO2vzrH0sXBe7znyc9JECAAAECBAgQIEBgAgGB+wTIHkFgQIHsqM2LUBMKul4WOL/w5Uv5Wsr99VLd1HGUzvpW1+7m56bZmZ6v3Za5jDq71rNeb3euD/FOhmcfH9MlaM9fxnws5VTKEAZzmeO19eNYBiRwX9usGg8BAgQIECBAgAABAp0EBO6d2NxE4OkCzYsF85JB1zQCLx2d0zz5/EoXLuXrKS9dCVUFiP3mLru1/3BtYlc+puRqAvV8P5/P9Wp2rTe71bNWXltLfcYQlzbHx3wq9Q8Drc9mR33+zWpznn2C9mMppz4Dd+9kApkrgftk3B5EgAABAgQIECBAgMCcBQTuc54dfSPwWKAJFPelahMy5uOajp15rLDOGucHw3r0/dz+1i8J3mp+6B3+u/Kwmr/KyDq+vZo13Xwt7aQs7WreX5A5a+YkIfvYv3Bpe3xM+nkopWZtPZoDQfsjoXV9/1iGI3Bf15waDQECBAgQIECAAAECHQUE7h3h3EZgQQL7F/pa+7U/Lmicukrg2QL5RcXlWhKo5/N8fMbV9viYHNtyHKCjgvYBEBfYRNaOwH2BE6fLBAgQIECAAAECBAgMLyBwH95UiwTWLPDSER27MuCU2+ulr9l5v+aVsZ2xNbv/z2XIzW71S/k8ZQ5XfvbaHh+T41769r9r0J6jlRL2n+aApw+dBY7lToF7Zz43EiBAgAABAgQIECCwJgGB+5pm01gILE/g/siQjKD2awkWa44pWZ6KHj9T4DZQTz/O1840H5/Zt0fPTuBZe1b6UMfHdA3a43y88X00Nt+ft0DmUuA+7znSOwIECBAgQIAAAQIEJhIQuE8E7TEECEwmsH/hSbvytZT766W6CRCbF3FO1mkPGl2geUFpHnS5lnx+vj65+Th6R0Z4QNZxdrW/tMbvHxeHoY6PeVfaOpbS5mWogvYRFsAMmsw6ELjPYCJ0gQABAgQIECBAgACB5wsI3J8/B3pAgMAyBF46Tic9f+3r+V4C0JSXLkfsDDPvzY702xfEXkrTKbnOwzxmlq1kbX0oJee111yfSqUhjo/5srRzfGNtv9QXQXvNDC23TtaDwH2586fnBAgQIECAAAECBAgMKCBwHxBTUwQIEBhQYP9GW2+F/Le31da7f9TQL8vN8SWXCpvzXZ28cDRBenPdhuoVza26yjOOjxG0r3pJ9RrcsdwtcO9F6GYCBAgQIECAAAECBNYiIHBfy0waBwECBAhsQWBfBjn18TGC9i2srH5jFLj383M3AQIECBAgQIAAAQIrEhC4r2gyDYUAAQIEViuwKyOb+vgYQftql9PgAxO4D06qQQIECBAgQIAAAQIEliogcF/qzOk3AQIECGxFoO3xMTmn/fuOODmGKEF72kjIX3s5o71Wap31jmVYjpRZ59waFQECBAgQIECAAAECLQUE7i3BVCdAgAABAhMJ7Mtzao+PSZfel/KxlNtz72u7uisVm6A9oXvtJWivlVp3vWMZnsB93XNsdAQIECBAgAABAgQIVAoI3CuhVCNAgAABAhMJJPDO8TGHyucl9E7dS2X922q78h8JSmuf1dybF+EeSzl1eKZb1ieQtSBwX9+8GhEBAgQIECBAgAABAh0EBO4d0NxCgAABAgRGEnh3DbJrdpkn9O56fMzn13v3LcchaG8JtpHqAveNTLRhEiBAgAABAgQIECDwWEDg/thIDQIECBAgMLZAgu/sav+s8kFdjo/pej57uvRTKTmu5lTZP9W2JXAsw7XDfVtzbrQECBAgQIAAAQIECLwiIHC3NAgQIECAwPMEpjg+ZncNQ78oH2t2zt9qOKP9eWtjSU8WuC9ptvSVAAECBAgQIECAAIFRBQTuo/JqnAABAgQIvCow9vExeQnqoZR9hzn4VO7JjvZzh3vdsj2BYxmyHe7bm3cjJkCAAAECBAgQIEDgBQGBu2VBgAABAgSmFUgAPtbxMbvSdhO05/O213flhoSnl7Y3qr9pgawZgfuml4DBEyBAgAABAgQIECDQCAjcrQUCBAgQIDCNQJfjY/JS1B8rupeXoB5KybExba9fyw3ZzZ7yS9ub1SdQBI6lCNwtBQIECBAgQIAAAQIECBQBgbtlQIAAAQIExhdoc3xMAvAE7acH3dqV7/fZze5FqOPP+1aeIHDfykwbJwECBAgQIECAAAECDwUE7g+JVCBAgAABAp0FPit3fltKPtZc35RKCS/f2mneZzd7+pBjY06lnGs6pA6BCoGsWTvcK6BUIUCAAAECBAgQIEBg/QIC9/XPsRESIECAwPQCOT4mAWR2qtdcP1zrvnZ8zK58P7vkD6Wk7bbXz+WG07Vc2t6sPoEHAsfrer+v9r58Id9zESBAgAABAgQIECBAYDMCAvfNTLWBEiBAgMBEAjnmJeeh1wTjbx0fk/uzmz2hfe0O+fshJsg/XctEw/eYDQocy5jtcN/gxBsyAQIECBAgQIAAAQL/KiBwtyoIECBAgMAwAgnFP5Syr2zuteNjcn9C+7wAtSa0v39cQvxTKQn9L5V9UY1AH4FDuTlHJ91fn67ruE/b7iVAgAABAgQIECBAgMCiBATui5ounSVAgACBGQoMcXzMroyrzwtQw2I3+wwXx0a6tC/j/NsLY82azPdcBAgQIECAAAECBAgQ2IyAwH0zU22gBAgQIDCCQJ/jY4Y4MsZu9hEmVZOtBV4L3C+lpX9r3ZobCBAgQIAAAQIECBAgsGABgfuCJ0/XCRAgQOBpAm2Pj/mu9DRnsf9SSs5lz3Exhx69z1Ed35dy6tGGWwkMKfBfrzTm/9YcUllbBAgQIECAAAECBAjMXsD/EzT7KdJBAgQIEJiRQNvjY34qfU/QfinlXSkJ2ncdx/Nzue90LWnPRWBOAq8F7v+3dDK/aHIRIECAAAECBAgQIEBgEwIC901Ms0ESIECAwAACbY+PyUtL/7OUBO7ZEd/1yu74Uynnrg24j8AEAlmff3zhOX+ydifQ9wgCBAgQIECAAAECBGYjIHCfzVToCAECBAjMVGBX+vVtKfvK/mU3748t6r/UbHbGJ7DPsTF2B1fCq/ZUgXN5+kuB+1/K109P7ZmHEyBAgAABAgQIECBAYEIBgfuE2B5FgAABAosSyPExOQbmOFGvc2RMAvYE7ZeJnukxBIYSyM/J1y809n7Cn6GhxqIdAgQIECBAgAABAgQIdBYQuHemcyMBAgQIrFggZ61/KGU38hh/Le03Lz89j/wszRMYU+BYGn8pcM+RSIcxH6xtAgQIECBAgAABAgQIzElA4D6n2dAXAgQIEHi2wK50oM3xMV37+0O58VSKI2O6CrpvbgL70qG/vdCprPV8z0WAAAECBAgQIECAAIFNCAjcNzHNBkmAAAECFQLZnZsXnOYomTGuHBlzupbLGA/QJoEnCuzLs18K3PM+g39/Yr88mgABAgQIECBAgAABApMKCNwn5fYwAgQIEJihQILC7GrfjdA3R8aMgKrJ2Qr81ys9839vznbKdIwAAQIECBAgQIAAgaEF/D9AQ4tqjwABAgSWIpCd7Dmn/TBChx0ZMwKqJmcvIHCf/RTpIAECBAgQIECAAAECYwsI3McW1j4BAgQIzFHgXenUsZQhj49xZMwcZ1qfphS4lIf9/oUH/ql87TxlRzyLAAECBAgQIECAAAECzxIQuD9L3nMJECBA4BkCn5WHZlf7fsCHf1faystPU1wEtixwLoP/4wsAAvctrwpjJ0CAAAECBAgQILAxAYH7xibccAkQILBRgexkb3a1D0GQ3ewfSzmV8ssQDWqDwAoEBO4rmERDIECAAAECBAgQIECgn4DAvZ+fuwkQIEBg/gL70sWhXoqa3ewJ2RMsuggQ+GeB/FzY4W5VECBAgAABAgQIECCwaQGB+6an3+AJECCwaoHsak/Q/kXPUdrN3hPQ7ZsRyF995C9J7q//KF/I91wECBAgQIAAAQIECBBYvYDAffVTbIAECBDYpMAQL0W1m32TS8egewgcy71fv3D/+/K1fM9FgAABAgQIECBAgACB1QsI3Fc/xQZIgACBTQn0fSnqr0WrOZv9sik5gyXQXyChusC9v6MWCBAgQIAAAQIECBBYsIDAfcGTp+sECBAg8N8COTrm81K+KiWBe5frp3JTE7R3ud89BAj8Yxe7wN1KIECAAAECBAgQIEBg0wIC901Pv8ETIEBg0QIJ2XM++6HHKHJsTIL2H3u04VYCbQV25YbfX2/KL4nyS6Nct5+/9N9tn/Oo/rlUSPk00M/AsbQjcH+k7vsECBAgQIAAAQIECKxaQOC+6uk1OAIECKxOYFdG9GUph1LyeZfLS1C7qLmnjcAfr5X3r3xs09ZUdU/lQTlr/dLjgcdyr8C9B6BbCRAgQIAAAQIECBBYvoDAfflzaAQECBDYgkBC9uxmT+ly5Wz270uxm72LnnteEkionp3p2ZW+u5b7HepLlDuWTn9Tyi8dOp97Be4d4NxCgAABAgQIECBAgMB6BATu65lLIyFAgMDaBBJivivlUEpz5EbbMf5QbjiVkrC9S4DY9nnqr0sg6+4PpTRB+r58nnWZsubrUgb3l1LOLQd5LPUF7i3RVCdAgAABAgQIECBAYF0CAvd1zafRECBAYA0COZv9UErX3ewxyJnUeYnqZQ0gxjCJQHas70pJuN6Urr/omaTDEzwk7zY4XX+ean6WjqWuwH2CifEIAgQIECBAgAABAgTmKyBwn+/c6BkBAgS2JJBgM8fGJCTf9Rh4zmc/lHLu0YZb1y2Q9ZUXlu5LaY6DyUfX2wIJ3/OXIvnZyhFN+e/bvwCIYUxf+vnN2fBHwAQIECBAgAABAgQIENiCgMB9C7NsjAQIEJivQAK7HBuToL3vbuKcO51Qz9Ex853vqXuW8Lc5EmZfPp/LGetNYB2Py7Xcf57/Tqg91nrOz9vh+jPz25EnRuA+MrDmCRAgQIAAAQIECBCYj4DAfT5zoScECBDYmkCOnhgiaP/pGhwmnHRtVyBhehOuP/tImKzJBOVNYN58vJSvpczpSvD+sZT8hclY159Kw+exGtcuAQIECBAgQIAAAQIE5iQgcJ/TbOgLAQIEtiGQYO9Yyq7ncLNLOO0kLHRtS+A+XN8/Yfg5vuhSSsL024/5fIlXDE+l5LidIa/88sGRPUOKaosAAQIECBAgQIAAgVkLCNxnPT06R4AAgVUJ7Mpovi0lwV7f64fSwKGUS9+G3D97gbzMtNmxnjU0xPppM+gExllnCdabnernNg0srG5+ro6lDBG8+zld2OTrLgECBAgQIECAAAEC/QUE7v0NtUCAAAECjwW+KFUStvc9pz272hMI5uWNrnUJ7K4h7758TMCe/55yZ3SzY/1cnnu7a31dyvWjaV6Cmp+3HNXT5vp0/Rk9tblJXQIECBAgQIAAAQIECKxBQOC+hlk0BgIECMxbIGe1HwfoopeiDoA4gybyS5fmrPVd+bwJdqfsWnatNzvWb3euT9mHJT0r85RfmjXzlY/NDvjsYm/Oqz9fXcd60euSzPSVAAECBAgQIECAAIGNCgjcNzrxhk2AAIGJBPJS1A89n5Wdx4dSEua5liOwK11NKHu7Wz2f9/0rh7YCCYTvw/W2bahPgAABAgQIECBAgAABAgSqBATuVUwqESBAgEAHgX25528d7ru95X35j2PPNtw+nkAC9N+WkrnOdf9xvCe/3LJwfWpxzyNAgAABAgQIECBAgACBfxIQuFsQBAgQIDCWwP8rDXfdzexli2PNSl27eVFprsxfc4767e70fV0zo9XKWf7ZtX6+fmzOXB/tgRomQIAAAQIECBAgQIAAAQI1AgL3GiV1CBAgQKCtQALZLrvbE6QeS/nY9oHqPxRodqOnYhOe3wbqu/L1lLld9y8zFa7PbYb0hwABAgQIECBAgAABAgT+R0DgbjEQIECAwBgCx9JoXpba9kqY2ryAsXnx4qV8LSVXE762bXct9ZsXjjbjuT8TfX8z0F35PGVJV/6yIXN9e+a6F3AuaQb1lQABAgQIECBAgAABAhsXELhvfAEYPgECBEYSyA71dyO1fdtswtmU5rr/73z9pa/l60OE97e7xmuGu3+lUtuv1zxrznV+us5LE6xnjvK5iwABAgQIECBAgAABAgQILFpA4L7o6dN5AgQIzE4gO7C/LeWL2fVMh54h0OxYbwJ1wfozZsEzCRAgQIAAAQIECBAgQGAyAYH7ZNQeRIAAgdULZEf7sZSuL0pdPdAKB9j8lUCC9NvSHA20wiEbEgECBAgQIECAAAECBAgQeF1A4G51ECBAgEBfgV1pILva930bcv9sBHLkS3N2+vnaq0v5mJJLoD6bqdIRAgQIECBAgAABAgQIEJiTgMB9TrOhLwQIEFieQJtd7Z/K8E6l5Nzz3bW0PQN9eULz6fFtiH4p3UrJdb5+bF5WO58e6wkBAgQIECBAgAABAgQIEFiYgMB9YROmuwQIEJiJwK7046+lJDB/dOXYka9K+f6NijmG5rat/U3dfL05pmbrAf2vxeL25aKX8t8pzXW++VyA/mhl+j4BAgQIECBAgAABAgQIEBhYQOA+MKjmCBAgsAGBQxnjh1Jqzmp/X+p9LKU5nmRontswPm3f/3e+truW+2fn67/v2aHbXeM1TZ1fqdT26zXPUocAAQIECBAgQIAAAQIECBCYWEDgPjG4xxEgQGDBAgnYc1b7FxVj+KHUya72293YFbepQoAAAQIECBAgQIAAAQIECBBYroDAfblzp+cECBCYUiA7xxO2PzpCJkeeHEvJrnYXAQIECBAgQIAAAQIECBAgQGBTAgL3TU23wRIgQKCTQHa0J2x/dIRMdrUfSrl0eoqbCBAgQIAAAQIECBAgQIAAAQILFxC4L3wCdZ8AAQIjCyRAT9j+1mVX+8iToHkCBAgQIECAAAECBAgQIEBgGQIC92XMk14SIEDgGQI1YXteGpp6zmp/xgx5JgECBAgQIECAAAECBAgQIDArAYH7rKZDZwgQIDAbgZzV/rdS3jpG5pvy/bwY1UWAAAECBAgQIECAAAECBAgQIFAEBO6WAQECBAjcCyRk/3spu1docoRMgvYTOgIECBAgQIAAAQIECBAgQIAAgf8VELhbDQQIECBwL5Cd7fs3wvZ8zxEy1g0BAgQIECBAgAABAgQIECBA4E5A4G5JECBAgMCtwLH8x9fCdouCAAECBAgQIECAAAECBAgQINBeQODe3swdBAgQWKvAvgwsu9tfu/5cvvH9WgdvXAQIECBAgAABAgQIECBAgACBvgIC976C7idAgMA6BHJu+3+W8tpLUt+X7x3XMVSjIECAAAECBAgQIECAAAECBAiMIyBwH8dVqwQIEFiawF9Lh794pdM/lK/vlzYg/SVAgAABAgQIECBAgAABAgQITC0gcJ9a3PMIECAwP4GvSpc+vNKtX8vXd6X8Mr9u6xEBAgQIECBAgAABAgQIECBAYF4CAvd5zYfeECBAYGqBz8oD//7GQ/9UvneeulOeR4AAAQIECBAgQIAAAQIECBBYooDAfYmzps8ECBAYTiAvQf38leac2z6cs5YIECBAgAABAgQIECBAgACBDQgI3DcwyYZIgACBNwReC9x/Kvdk97uLAAECBAgQIECAAAECBAgQIECgUkDgXgmlGgECBFYqkBel5oWpt5dz21c62YZFgAABAgQIECBAgAABAgQIjCsgcB/XV+sECBBYgkBC94+l/L6Un0vJf/+4hI7rIwECBAgQIECAAAECBAgQIEBgTgIC9znNhr4QIEDguQK78vjLc7vg6QQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgSFIJPXAAAHJ0lEQVQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgMD/b8eOaQAAABCG+XeNjZHUASnfCBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfAcH99zvLCRAgQIAAAQIECBAgQIAAAQIECBAgQCAkILiHzjCFAAECBAgQIECAAAECBAgQIECAAAECBH4FBPff7ywnQIAAAQIECBAgQIAAAQIECBAgQIAAgZCA4B46wxQCBAgQIECAAAECBAgQIECAAAECBAgQ+BUQ3H+/s5wAAQIECBAgQIAAAQIECBAgQIAAAQIEQgKCe+gMUwgQIECAAAECBAgQIECAAAECBAgQIEDgV0Bw//3OcgIECBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfAcH99zvLCRAgQIAAAQIECBAgQIAAAQIECBAgQCAkILiHzjCFAAECBAgQIECAAAECBAgQIECAAAECBH4FBPff7ywnQIAAAQIECBAgQIAAAQIECBAgQIAAgZCA4B46wxQCBAgQIECAAAECBAgQIECAAAECBAgQ+BUQ3H+/s5wAAQIECBAgQIAAAQIECBAgQIAAAQIEQgKCe+gMUwgQIECAAAECBAgQIECAAAECBAgQIEDgV0Bw//3OcgIECBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfAcH99zvLCRAgQIAAAQIECBAgQIAAAQIECBAgQCAkILiHzjCFAAECBAgQIECAAAECBAgQIECAAAECBH4FBPff7ywnQIAAAQIECBAgQIAAAQIECBAgQIAAgZCA4B46wxQCBAgQIECAAAECBAgQIECAAAECBAgQ+BUQ3H+/s5wAAQIECBAgQIAAAQIECBAgQIAAAQIEQgKCe+gMUwgQIECAAAECBAgQIECAAAECBAgQIEDgV0Bw//3OcgIECBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfgQGMc9WA31rv6AAAAABJRU5ErkJggg==';
+
diff --git a/vue-options-api-demos/inputs/signature/readonly/main.js b/vue-options-api-demos/inputs/signature/readonly/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/readonly/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/signature/readonly/main.vue b/vue-options-api-demos/inputs/signature/readonly/main.vue
new file mode 100644
index 00000000..1d1fa068
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/readonly/main.vue
@@ -0,0 +1,18 @@
+<template>
+  <Signature :value="value" :read-only="true" />
+</template>
+<script>
+import { Signature } from "@progress/kendo-vue-inputs";
+import { sampleSignature } from "./sample-signature";
+
+export default {
+  components: {
+    Signature,
+  },
+  data() {
+    return {
+      value: sampleSignature,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/signature/readonly/sample-signature.js b/vue-options-api-demos/inputs/signature/readonly/sample-signature.js
new file mode 100644
index 00000000..82d3e903
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/readonly/sample-signature.js
@@ -0,0 +1,2 @@
+export const sampleSignature = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABdwAAAH4CAYAAABQRy9XAAAgAElEQVR4XuzdjZUjt4EuUL8I7BeBuRFYG4HpCCRHIDqC0UYgTgQzikBUBNZEYCoCSxEsFcGTItiHb83apenuJuqX9XPrHJxudaNQwAV6vPs1GvV/fuMiQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEegv8n94taIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBD4jcDdIiBAgAABAgQIECBAgAABAgQIECBAgAABAgMICNwHQNQEAQIECBAgQIAAAQIECBAgQIAAAQIECBAQuFsDBAgQIECAAAECBAgQIECAAAECBAgQIEBgAAGB+wCImiBAgAABAgQIECBAgAABAgQIECBAgAABAgJ3a4AAAQIECBAgQIAAAQIECBAgQIAAAQIECAwgIHAfAFETBAgQIECAAAECBAgQIECAAAECBAgQIEBA4G4NECBAgAABAgQIECBAgAABAgQIECBAgACBAQQE7gMgaoIAAQIECBAgQIAAAQIECBAgQIAAAQIECAjcrQECBAgQIECAAAECBAgQIECAAAECBAgQIDCAgMB9AERNECBAgAABAgQIECBAgAABAgQIECBAgAABgbs1QIAAAQIECBAgQIAAAQIECBAgQIAAAQIEBhAQuA+AqAkCBAgQIECAAAECBAgQIECAAAECBAgQICBwtwYIECBAgAABAgQIECBAgAABAgQIECBAgMAAAgL3ARA1QYAAAQIECBAgQIAAAQIECBAgQIAAAQIEBO7WAAECBAgQIECAAAECBAgQIECAAAECBAgQGEBA4D4AoiYIECBAgAABAgQIECBAgAABAgQIECBAgIDA3RogQIAAAQIECBAgQIAAAQIECBAgQIAAAQIDCAjcB0DUBAECBAgQIECAAAECBAgQIECAAAECBAgQELhbAwQIECBAgAABAgQIECBAgAABAgQIECBAYAABgfsAiJogQIAAAQIECBAgQIAAAQIECBAgQIAAAQICd2uAAAECBAgQIECAAAECBAgQIECAAAECBAgMICBwHwBREwQIECBAgAABAgQIECBAgAABAgQIECBAQOBuDRAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQEEBO4DIGqCAAECBAgQIECAAAECBAgQIECAAAECBAgI3K0BAgQIECBAgAABAgQIECBAgAABAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAYG7NUCAAAECBAgQIECAAAECBAgQIECAAAECBAYQELgPgKgJAgQIECBAgAABAgQIECBAgAABAgQIECAgcLcGCBAgQIAAAQIECBAgQIAAAQIECBAgQIDAAAIC9wEQNUGAAAECBAgQIECAAAECBAgQIECAAAECBATu1gABAgQIECBAgAABAgQIECBAgAABAgQIEBhAQOA+AKImCBAgQIAAAQIECBAgQIAAAQIECBAgQICAwN0aIECAAAECBAgQIECAAAECBAgQIECAAAECAwgI3AdA1AQBAgQIECBAgAABAgQIECBAgAABAgQIEBC4WwMECBAgQIAAAQIECBAgQIAAAQIECBAgQGAAAYH7AIiaIECAAAECBAgQIECAAAECBAgQIECAAAECAndrgAABAgQIECBAgAABAgQIECBAgAABAgQIDCAgcB8AURMECBAgQIAAAQIECBAgQIAAAQIECBAgQEDgbg0QIECAAAECBAgQIECAAAECBAgQIECAAIEBBATuAyBqggABAgQIECBAgAABAgQIECBAgAABAgQICNytAQIECBAgQIAAAQIECBAgQIAAAQIECBAgMICAwH0ARE0QIECAAAECBAgQIECAAAECBAgQIECAAAGBuzVAgAABAgQIECBAgAABAgQIECBAgAABAgQGEBC4D4CoCQIECBAgQIAAAQIECBAgQIAAAQIECBAgIHC3BggQIECAAAECBAgQIECAAAECBAgQIECAwAACAvcBEDVBgAABAgQIECBAgAABAgQIECBAgAABAgQE7tYAAQIECBAgQIAAAQIECBAgQIAAAQIECBAYQEDgPgCiJggQIECAAAECBAgQIECAAAECBAgQIECAgMDdGiBAgAABAgQIECBAgAABAgQIECBAgAABAgMICNwHQNQEAQIECBAgQIAAAQIECBAgQIAAAQIECBAQuFsDBAgQIECAAAECBAgQIECAAAECBAgQIEBgAAGB+wCImiBAgAABAgQIECBAgAABAgQIECBAgAABAgJ3a4AAAQIECBAgQIAAAQIECBAgQIAAAQIECAwgIHAfAFETBAgQIECAAAECBAgQIECAAAECBAgQIEBA4G4NECBAgAABAgQIECBAgAABAgQIECBAgACBAQQE7gMgaoIAAQIECBAgQIAAAQIECBAgQIAAAQIECAjcrQECBAgQIECAAAECBAgQIECAAAECBAgQIDCAgMB9AERNECBAgAABAgQIECBAgAABAgQIECBAgAABgbs1QIAAAQIECBAgQIAAAQIECBAgQIAAAQIEBhAQuA+AqAkCBAgQIECAAAECBAgQIECAAAECBAgQICBwtwYIECBAgAABAgQIECBAgAABAgQIECBAgMAAAgL3ARA1QYAAAQIECBAgQIAAAQIECBAgQIAAAQIEBO7WAAECBAgQIECAAAECBAgQIECAAAECBAgQGEBA4D4AoiYIECBAgAABAgQIECBAgAABAgQIECBAgIDA3RogQIAAAQIECBAgQIAAAQIECBAgQIAAAQIDCAjcB0DUBAECBAgQIECAAAECBAgQIECAAAECBAgQELhbAwQIECBAgAABAgQIECBAgAABAgQIECBAYAABgfsAiJogQIAAAQIECBAgQIAAAQIECBAgQIAAAQICd2uAAAECBAgQIECAAAECBAgQIECAAAECBAgMICBwHwBREwQIECBAgAABAgQIECBAgAABAgQIECBAQOBuDRAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQEEBO4DIGqCAAECBAgQIECAAAECBAgQIECAAAECBAgI3K0BAgQIECBAgAABAgQIECBAgAABAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAYG7NUCAAAECBAgQIECAAAECBAgQIECAAAECBAYQELgPgKgJAgQIECBAgAABAgQIECBAgAABAgQIECAgcLcGCBAgQIAAAQIECBAgQIAAAQIECBAgQIDAAAIC9wEQNUGAAAECBAgQIECAAAECBAgQIECAAAECBATu1gABAgQIECBAgAABAgQIECBAgAABAgQIEBhAQOA+AKImCBAgQIAAAQIECBAgQIAAAQIECBAgQICAwN0aIECAAAECBAgQIECAAAECBAgQIECAAAECAwgI3AdA1AQBAgQIECBAgAABAgQIECBAgAABAgQIEBC4WwMECBAgQIAAAQIECBAgQIAAAQIECBAgQGAAAYH7AIiaIECAAAECBAgQIECAAAECBAgQIECAAAECAndrgAABAgQIECBAgAABAgQIECBAgAABAgQIDCAgcB8AURMECBAgQIAAAQIECBAgQIAAAQIECBAgQEDgbg0QIECAAAECBAgQIECAAAECBAgQIECAAIEBBATuAyBqggABAgQIECBAgAABAgQIECBAgAABAgQICNytAQIECBAgQIAAAQIECBAgQIAAAQIECBAgMICAwH0ARE0QIECAAAECBAgQIECAAAECBAgQIECAAAGBuzVAgAABAgQIECBAgAABAgQIECBAgAABAgQGEBC4D4CoCQIECBAgQIAAAQIECBAgQIAAAQIECBAgIHC3BggQIECAAAECBAgQIECAAAECBAgQIECAwAACAvcBEDVBgAABAgQIECBAgAABAgQIECBAgAABAgQE7tYAAQIECBAgQIAAAQIECBAgQIAAAQIECBAYQEDgPgCiJggQIECAAAECBAgQIECAAAECBAgQIECAgMDdGiBAgAABAgQIECBAgAABAgQIECBAgAABAgMICNwHQNQEAQIECBAgQIAAAQIECBAgQIAAAQIECBAQuFsDBAgQIECAAAECBAgQIECAAAECBAgQIEBgAAGB+wCImiBAgAABAgQIECBAgAABAgQIECBAgAABAgJ3a4AAAQIECBAgQIAAAQIECBAgQIAAAQIECAwgIHAfAFETBAgQIECAAAECBAgQIECAAAECBAgQIEBA4G4NECBAgAABAgQIECBAgAABAgQIECBAgACBAQQE7gMgaoIAAQIECBAgQIAAAQIECBAgQIAAAQIECAjcrQECBAgQIECAAAECBAgQIECAAAECBAgQIDCAgMB9AERNECBAgAABAgQIECBAgAABAgQIECBAgAABgbs1QIAAAQIECBAgQIAAAQIECBAgQIAAAQIEBhAQuA+AqAkCBAgQIECAAAECBAgQIECAAAECBAgQICBwtwYIECBAgAABAgQIECBAgAABAgQIECBAgMAAAgL3ARA1QYAAAQIECBAgQIAAAQIECBAgQIAAAQIEBO7WAAECBAgQIECAAAECBAgQIECAAAECBAgQGEBA4D4AoiYIECBAgAABAgQIECBAgAABAgQIECBAgIDA3RogQIAAAQIECBAgQIAAAQIECBAgQIAAAQIDCAjcB0DUBAECBAgQIECAAAECBAgQIECAAAECBAgQELhbAwQIECBAgAABAgQIECBAgAABAgQIECBAYAABgfsAiJogQIAAAQIECBAgQIAAAQIECBAgQIAAAQICd2uAAAECBAgQIECAAAECBAgQIECAAAECBAgMICBwHwBREwQIECBAgAABAgQIECBAgAABAgQIECBAQOBuDRAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQEEBO4DIGqCAAECBAgQIECAAAECBAgQIECAAAECBAgI3K0BAgQIECBAgAABAgQIECBAgAABAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAYG7NUCAAAECBAgQIECAAAECBAgQIECAAAECBAYQELgPgKgJAgQIECBAgAABAgQIECBAgAABAgQIECAgcLcGCBAgQIAAAQIECBAgQIAAAQIECBAgQIDAAAIC9wEQNUGAAAECBAgQIECAAAECBAgQIECAAAECBATu1gABAgQIECBAgAABAgQIECBAgAABAgQIEBhAQOA+AKImCBAgQIAAAQIECBAgQIAAAQIECBAgQICAwN0aIECAAAECBAgQIECAAAECBAgQIECAAAECAwgI3AdA1AQBAgQIECBAgAABAgQIECBAgAABAgQIEBC4WwMECBAgQIAAAQIECBAgQIBAF4HflZt+6XKjewgQIECAwFoFBO5rnVnjIkCAAAECBAgQIECAAAEC4wh8WZo9lrIr5VLKn0v5cZxHaZUAAQIECCxLQOC+rPnSWwIECBAgQIAAAQIECBAg8CyBBOzflrK/60B2uf9bKXa7P2tmPJcAAQIEZiMgcJ/NVOgIAQIECBAgQIAAAQIECBCYpUCOjnlXyvGN3v2lfO80y97rFAECBAgQmFBA4D4htkcRIECAAAECBAgQIECAAIGFCXxR+vuhlN2Dfr8v3z8ubGy6S4AAAQIEBhcQuA9OqkECBAgQIECAAAECBAgQILB4gQTsCdoTuD+6fi0VPivl8qii7xMgQIAAgbULCNzXPsPGR4AAAQIECBAgQIAAAQIE6gVqjo+5be2n8h+HUrw0td5YTQIECBBYsYDAfcWTa2gECBAgQIAAAQIECBAgQKCFwJel7rGUXcU92dWeuh8r6qpCgAABAgQ2IyBw38xUGygBAgQIECBAgAABAgQIEHhRYF+++m1l0J4GPpXyVSkXngQIECBAgMA/CwjcrQgCBAgQIECAAAECBAgQILBNgQTtX5eSjzXXz6XSoZRzTWV1CBAgQIDAFgUE7lucdWMmQIAAAQIECBAgQIAAgS0L7MrgE7QnPK+93peKx9rK6hEgQIAAga0KCNy3OvPGTYAAAQIECBAgQIAAAQJbE8gLUT+0DNodH7O1VWK8BAgQINBLQODei8/NBAgQIECAAAECBAgQIEBg9gIJ2t+VknPX83nN9dO1/rmmsjoECBAgQIDAPwQE7lYCAQIECBAgQIAAAQIECBBYr8CXZWgfS6kN2nNO+7GU03pJjIwAAQIECIwnIHAfz1bLBAgQIECAAAECBAgQIEDgWQJflAfn+JhdZQd+LfUSzB8r66tGgAABAgQIvCAgcLcsCBAgQIAAAQIECBAgQIDAegT2ZSh5IWo+1lxN0J6w/ZeaG9QhQIAAAQIEXhcQuFsdBAgQIECAAAECBAgQIEBg+QK7MoTsaM/O9trru1LxWMql9gb1CBAgQIAAgbcFBO5WCAECBAgQIECAAAECBAgQWK7ArnQ9O9oPLYbww7W+oL0FmqoECBAgQKBGQOBeo6QOAQIECBAgQIAAAQIECBCYl0BegvqulK9KqX0haoL2YynneQ1FbwgQIECAwHoEBO7rmUsjIUCAAAECBAgQIECAAIFtCCRoT3BeG7T/fK1/2gaPURIgQIAAgecJCNyfZ+/JBAgQIECAAAECBAgQIECgjcCX1+B8V3lTXoiaHfCC9kow1QgQIECAQF8BgXtfQfcTIECAAAECBAgQIECAAIFxBfal+bwQ9bPKxyRo/3gtv1TeoxoBAgQIECAwgIDAfQBETRAgQIAAAQIECBAgQIAAgREEErAnaN+3aPu7Uje72gXtLdBUJUCAAAECQwkI3IeS1A4BAgQIECBAgAABAgQIEBhGYFea+bqUQ4vmPl2D9kuLe1QlQIAAAQIEBhYQuA8MqjkCBAgQIECAAAECBAgQINBRIC9BTdCeHeq11w+l4rGUc+0N6hEgQIAAAQLjCQjcx7PVMgECBAgQIECAAAECBAgQqBFI0P6ulATt+bzm+rlUOpRyrqmsDgECBAgQIDCNgMB9GmdPIUCAAAECBAgQIECAAAECLwl8Wb54LGVXyZOgPfVPlfVVI0CAAAECBCYUELhPiO1RBAgQIECAAAECBAgQIEDgKvBF+ZgXou4qRX4t9T5eixeiVqKpRoAAAQIEphYQuE8t7nkECBAgQIAAAQIECBAgsGWBfRl8zmnPx9rrvaC9lko9AgQIECDwXAGB+3P9PZ0AAQIECBAgQIAAAQIEtiGwK8PMjvbsbK+9visVj6Vcam9QjwABAgQIEHiugMD9uf6eToAAAQIECBAgQIAAAQLrFtiV4WVH+6HFMH8odfMC1R9b3KMqAQIECBAgMAMBgfsMJkEXCBAgQIAAAQIECBAgQGB1Ar8rI3p3Dc7zec2VoP1YyrmmsjoECBAgQIDA/AQE7vObEz0iQIAAAQIECBAgQIAAgWULZEd7dqjXBu0/X4P207KHrfcECBAgQICAwN0aIECAAAECBAgQIECAAAECwwh8eQ3Od5XN/Xqt/7GyvmoECBAgQIDAzAUE7jOfIN0jQIAAAQIECBAgQIAAgdkL7EsP80LUzyp7mqA9IXvKL5X3qEaAAAECBAgsQEDgvoBJ0kUCBAgQIECAAAECBAgQmKVAgvYcH5OPtdd3pWKOmxG014qpR4AAAQIEFiQgcF/QZOkqAQIECBAgQIAAAQIECMxCYFd6kaD90KI3n65B+6XFPaoSIECAAAECCxMQuC9swnSXAAECBAgQIECAAAECBJ4mkJeg5uiYNkH7D6X+sZTz03rtwQQIECBAgMBkAgL3yag9iAABAgQIECBAgAABAgQWKpCg/V0pOQomn9dcP5dKh1LONZXVIUCAAAECBNYhIHBfxzwaBQECBAgQIECAAAECBAiMI5Cg/VhKm6A99U/jdEerBAgQIECAwJwFBO5znh19I0CAAAECBAgQIECAAIFnCXx5Ddp3lR34tdT7eL2n8hbVCBAgQIAAgbUJCNzXNqPGQ4AAAQIECBAgQIAAAQJ9BPbl5pzT/lllI03QnrD9l8p7VCNAgAABAgRWKiBwX+nEGhYBAgQIECBAgAABAgQItBJI0P51KflYe31XKh5LudTeoB4BAgQIECCwbgGB+7rn1+gIECBAgAABAgQIECBA4G2BXfl2gvZDC6hPpW5eoCpob4GmKgECBAgQ2IKAwH0Ls2yMBAgQIECAAAECBAgQIHAvkJeg5uiYNkH7D6X+sZQzTgIECBAgQIDASwICd+uCAAECBAgQIECAAAECBLYkkKD9XSnZoZ7Pa66fr/W/r6msDgECBAgQILBdAYH7dufeyAkQIECAAAECBAgQILA1gRwd0zZoP5Z7TluDMl4CBAgQIECgm4DAvZubuwgQIECAAAECBAgQIEBgOQJflq4mON9VdvnXUu/jtfxSeY9qBAgQIECAAIHfCNwtAgIECBAgQIAAAQIECBBYq8C+DOxbQftap9e4CBAgQIDA/AQE7vObEz0iQIAAAQIECBAgQIAAgX4CCdpzfEw+1l7flYrHUi61N6hHgAABAgQIELgXELhbEwQIECBAgAABAgQIECCwFoFdGciHUr5oMaBPpW7OdRe0t0BTlQABAgQIEHhZQOBuZRAgQIAAAQIECBAgQIDA0gUStGdH+6HFQH4odY+lnFvcoyoBAgQIECBA4E0BgbsFQoAAAQIECBAgQIAAAQJLFfhd6fi7a3BeO4afS8WDoL2WSz0CBAgQIECgjYDAvY2WugQIECBAgAABAgQIECAwB4EmaM9RMPm85krQfizlVFNZHQIECBAgQIBAFwGBexc19xAgQIAAAQIECBAgQIDAswS+LA/+WEpt0P7rNWjPPS4CBAgQIECAwKgCAvdReTVOgAABAgQIECBAgAABAgMJJGg/lrKrbC9Be0L2lF8q71GNAAECBAgQINBLQODei8/NBAgQIECAAAECBAgQIDCywL60/6GUz1o857tSN8fNCNpboKlKgAABAgQI9BcQuPc31AIBAgQIECBAgAABAgQIDC+QoP3rUvKx9krQfizlUnuDegQIECBAgACBIQUE7kNqaosAAQIECBAgQIAAAQIE+grsSgPZ0f5Fi4Z+KHWzo/3HFveoSoAAAQIECBAYXEDgPjipBgkQIECAAAECBAgQIECgg0CC9uxoP7S4N0H7sZRzi3tUJUCAAAECBAiMJiBwH41WwwQIECBAgAABAgQIECBQIfC7UidBe3ao114/X+t/X3uDegQIECBAgACBKQQE7lMoewYBAgQIECBAgAABAgQI3AskaH93Dc7zec2VoP1YyqmmsjoECBAgQIAAgakFBO5Ti3seAQIECBAgQIAAAQIECDQ72muD9l8L2cdr2E6PAAECBAgQIDBbAYH7bKdGxwgQIECAAAECBAiMIrArrf6+lM9KSdi5v3lKvpfSXHkB5ftSHNsxylRsstEvy6iPd+vsLYgmaE/Y/ssmxQyaAAECBAgQWJSAwH1R06WzBAgQIECAAAECBFoJJFD/Yyn7UhKw52PbKyHnv5dyaXuj+gRuBNoG7bn1m1KOpQjaLSUCBAgQIEBgMQIC98VMlY4SIECAAAECBAgQeCjQBOxflJr7UnYP76ir8OdSzS73Oiu1/lkg6zDHx+Rj7fVdqXgs5VJ7g3oECBAgQIAAgbkICNznMhP6QYAAAQIECBAgQKCbwK7cll3sCdlTxrgE7mOorrvNfRle26D9h3LPoZTLummMjgABAgQIEFizgMB9zbNrbAQIECBAgAABAmsVyE72HNGRcDJHxYx9/ak84Dz2Q7S/CoFdGcWHUtr88idB+9EaW8X8GwQBAgQIENi8gMB980sAAAECBAgQIECAwIIEErKPuZP9NQr/f8OCFsmTupqgPTvaDy2e/1Op+5WgvYWYqgQIECBAgMDsBfwfzrOfIh0kQIAAAQIECBDYuECCzHfXIDM724e4sqP4ci0/lo95KeVfS3mp/U/l6212Kw/RP20sRyBrJkF7gvPa6+dS8VjKqfYG9QgQIECAAAECSxEQuC9lpvSTAAECBAgQIEBgawLNkTH7ngPPLuKE6udrubzQXsLPhKYvXc5v7zkBK709QXt+EZSgvfYXQYL2lS4GwyJAgAABAgT+V0DgbjUQIECAAAECBAgQmI9AE2IeSpd2Hbv1a7nv+2s5l4/Zvf7WlTPg//5KhQSkXfvRsftuW4BAs6O9NmjPmvxYynEBY9NFAgQIECBAgEAvAYF7Lz43EyBAgAABAgQIEBhEIKF3c2xMlwYTjN+G7LVtJDBN2L575QYvS62V3Ea9/NXF8Y31cq/QBO0J2x/94mcbgkZJgAABAgQIrF5A4L76KTZAAgQIECBAgACBGQt8XvqWIzn2HfrY7GRPmJkjY9peCdv/VkrC/peunPPepV9t+6H+/AXaBu0Z0TelHEsRtM9/fvWQAAECBAgQGFBA4D4gpqYIECBAgAABAgQIVAgk6E7QnjByV1H/vkpeYnoqJTva+1wJ2/evNJAwP30TlvYRXv69WR8fSnntlzIvjfC769q+LH/4RkCAAAECBAgQaC8gcG9v5g4CBAgQIECAAAECXQS6vGSyeU4C8FMp2c0+RJD5bWnn8MYgHCXTZYbXc8++DCXntOdj7ZW/iMiaGmJ91j5TPQIECBAgQIDA7AQE7rObEh0iQIAAAQIECBBYmcCujCfhZcLItldCzNO1tL33tfqPwvb35cbjUA/TzqIEspM9O9r3LXqdNZr1cm5xj6oECBAgQIAAgdUKCNxXO7UGRoAAAQIECBAg8GSBhJZtdwk3Xc6xHF3PZn9t2Nlh/9dS0q/Xrjz38GQ3j59eYHddq23mXtA+/Tx5IgECBAgQILAAAYH7AiZJFwkQIECAAAECBBYlkBdMJrjct+z1z6X+qZQE7UOfnZ6dywnbd2/0SdjecsJWUD3roe1fX2SdHq9rdQUEhkCAAAECBAgQGFZA4D6sp9YIECBAgAABAgS2KdDnRag/FbKE7KeR6L4o7eYYmfTxtSt9aPNizJG6qtmJBLIWErR/1eJ5gmpWyTgAACAASURBVPYWWKoSIECAAAEC2xUQuG937o2cAAECBAgQIECgv0CfF6GOfSTHrgwv53EncH/rSti+L2XoXfX9dbUwtECX9ZoX9uYXQsehO6M9AgQIECBAgMAaBQTua5xVYyJAgAABAgQIEBhbYFce0PYojqZPObol4eVlxE6+uz7jrV3tefynUg6lCNtHnIwZNN0naB/jiKMZkOgCAQIECBAgQGAcAYH7OK5aJUCAAAECBAgQWKfAvgyrOaO9zQibXcJjh5e70qkcH5N+Prq+KRXaHCnyqD3fn6dA7S9fmt5PtVbnqaVXBAgQIECAAIGeAgL3noBuJ0CAAAECBAgQ2IRAAuzsaM/HNlfOvW7OZx97F3n6d6zoXALVBO2nirqqLFcgvxjKeti1GMIUf33RojuqEiBAgAABAgSWJyBwX96c6TEBAgQIECBAgMB0As1u9n3LR479ItTb7qRv2dVeE6ymX4dSfmw5HtWXIyBoX85c6SkBAgQIECCwQgGB+won1ZAIECBAgAABAgR6C3QJLfPQsV+EejuwBOy1x8fkvvelHHvLaGCuAl3WbM7wz187XOY6KP0iQIAAAQIECCxNQOC+tBnTXwIECBAgQIAAgTEFuoSW6c+UR3HkBZg5Pqb2/PX8EiB17Wofc+U8r+39dT3kY+015S+GavukHgECBAgQIEBgFQIC91VMo0EQIECAAAECBAj0EEiA/Xkpx1J2LdrJWeinUnJG+6XFfX2q5hcCeV76/OhK/zKm1HetT2BfhtT2vQKC9vWtAyMiQIAAAQIEZiYgcJ/ZhOgOAQIECBAgQIDAZAIJrd+Vkt3fNQF207EE2QmxU8Z+EWrzzISrH0r5rFInweqhlEtlfdWWI5C1IGhfznzpKQECBAgQILAxAYH7xibccAkQIECAAAECBP47XO8StP9c7juWcprQMAF7gvaErDVX+phfIHxfU1mdRQlkDbQN2p+xZheFqrMECBAgQIAAgaEFBO5Di2qPAAECBAgQIEBgrgJLCtp313D1UInZ7Lo/VtZXbTkCgvblzJWeEiBAgAABAgR+I3C3CAgQIECAAAECBNYusKSgPX3NjvbaoD1zN+ULW9e+VuY0PkH7nGZDXwgQIECAAAEClQIC90oo1QgQIECAAAECBBYn0DVoz/nnOZ99ymNZuvTVCzAXtySrOrwrtXJ0zKGq9j8qOTqmBZaqBAgQIECAAIExBQTuY+pqmwABAgQIECBA4BkCXcLr9PNZAXbC1TYvbs3xMal/egauZ44msCsttw3an/EC39EANEyAAAECBAgQWIOAwH0Ns2gMBAgQIECAAAECjcCX5ZNjKQkva69nBe1t+ypcrZ3RZdXLWhW0L2vO9JYAAQIECBAg8KqAwN3iIECAAAECBAgQWINA2/A6Y15K0J6+vi8lx9z8sobJMob/FtiVImi3GAgQIECAAAECKxMQuK9sQg2HAAECBAgQILAxgbUH7V6Iur4FLWhf35waEQECBAgQIEDgfwQE7hYDAQIECBAgQIDAEgXWHrR/KpOSc9ovS5wcfX5R4LPy1XelHFr4OEaoBZaqBAgQIECAAIE5CAjc5zAL+kCAAAECBAgQIFArsC8VP5SS8LL2WtLRMc/qa62leu0FsmZzdEw+1l6C9lop9QgQIECAAAECMxMQuM9sQnSHAAECBAgQIEDgRYEuoeWzwusl7b633MYT6LJmBe3jzYeWCRAgQIAAAQKTCAjcJ2H2EAIECBAgQIAAgY4C2cmeHe0JL2uvn0rFHMdyrr1hoHqC9oEgF95M1qod7QufRN0nQIAAAQIECHQVELh3lXMfAQIECBAgQIDAmAK7a2h5aPGQn0vdYymnFvf0rfq70sDn1+emz7XXs3bf1/ZPvfYC+YVL1uu+xa12tLfAUpUAAQIECBAgsAQBgfsSZkkfCRAgQIAAAQLbEdiVoWZ3cILL2utZQXtegJmd9Anday9Be63Ucup1+csGQfty5ldPCRAgQIAAAQKtBATurbhUJkCAAAECBAgQGEkgoXXbAFvQPtJkaPahQNe/bBC0P6RVgQABAgQIECCwbAGB+7LnT+8JECBAgAABAksX6BK0J7Q8lvJxwsF36We6Z0f7hJM0waO6rgNB+wST4xEECBAgQIAAgTkICNznMAv6QIAAAQIECBDYpkDbozieEVp2DVgF7eta07synLZHHUXgGWt2XfJGQ4AAAQIECBBYmIDAfWETprsECBAgQIAAgRUI7MsYvi0lIWbt9b5UzI72X2pvGKBefiGQZzqjfQDMhTaRtdq8DLXNEJrjjr6feM226aO6BAgQIECAAAECIwgI3EdA1SQBAgQIECBAgMCLAgkvs0s4H2uv70rFYymX2hsGqNd2530eaUf7APAzaqIJ2dus1XT/Ge8VmBGbrhAgQIAAAQIECAjcrQECBAgQIECAAIGxBXblAW2P4xC0jz0r2r8XyF8yJGj/qpSs2TZXfuFyupY296lLgAABAgQIECCwMgGB+8om1HAIECBAgAABAjMSSID5oZRDiz49Y6f4/trPz2bezxbdU7WFwK7UfXddp22OD8ojnrFeWwxNVQIECBAgQIAAgakFBO5Ti3seAQIECBAgQGD9Al1eNPpTYcnO4vOEPPvyrLZH3AhYJ5ygkR+V+U/Q/kWH5zzjLzA6dNMtBAgQIECAAAECUwsI3KcW9zwCBAgQIECAwLoF2r5o9BlnXu/KFOSlrQlcay9Be63U/Os1x8a0+YuGjOrXUk6l5EW6l/kPUw8JECBAgAABAgSeISBwf4a6ZxIgQIAAAQIE1iewL0NKiL2rHFrCy+M1vKy8pXe19K3tWfLP2Hnfe6Aa+BeBzH0TtLc9Nia/FErIfirlF7YECBAgQIAAAQIE3hIQuFsfBAgQIECAAAECfQSySzjntO8rG0nQnvAyZarwMgFrgvYcWVN7PWPnfW3f1KsXyLpM0H6ov+V/anoRagc0txAgQIAAAQIEti4gcN/6CjB+AgQIECBAgEA3gV25re1u8anPve5ylrygvdt6mNtdXY+NyTiyTk+lnOc2KP0hQIAAAQIECBCYv4DAff5zpIcECBAgQIAAgTkJdAmxs1P4UMplwoHkZZjHUmqPD2l23uce1zIFdqXbXY+NcT77MudcrwkQIECAAAECsxMQuM9uSnSIAAECBAgQIDBbgbYvRH3Gi0bTx4TmCV9rrmcccVPTL3XqBfalatdjY5q/aPi+tDHVEUf1I1OTAAECBAgQIEBgcQIC98VNmQ4TIECAAAECBCYXSKDZ5oWozziWpW0fg/hNKUdB6+TraYgH5i8XPr/O365Dg/llUN4jkKDdRYAAAQIECBAgQGAwAYH7YJQaIkCAAAECBAisTqDrC1GPE0rsy7Nylnw+1l5TnyVf2y/1HgvsrvP9RflYe1xQ02r+miEBe9bn5fGj1CBAgAABAgQIECDQXkDg3t7MHQQIECBAgACBtQskyPxQyqHFQKfeLb679jHBa+31jLPka/um3tsC2c3+VSn7DlD5i4vsZj+V4tiYDoBuIUCAAAECBAgQqBcQuNdbqUmAAAECBAgQ2IJAdosn2KzdPfzpWv8yEc6uPCd9PLR43jPOkm/RPVVfEchcN2ez5/O2l2Nj2oqpT4AAAQIECBAg0FtA4N6bUAMECBAgQIAAgVUItH3Z6NQhdn4B8K6UYwvt7Gw+lHJucY+qzxfYly50fQmqY2OeP396QIAAAQIECBDYtIDAfdPTb/AECBAgQIAAgf8+oqPNGehTvxC1Cdrb7Lqfuo+WUX+Bvi9BbeY8Z7Q7Nqb/fGiBAAECBAgQIECgo4DAvSOc2wgQIECAAAECCxfYXYP2Q+U4snM452AfK+sPUS27nPPM2uNtntHHIca55TbyYt785UKXl6DGLS/APZVy3jKisRMgQIAAAQIECMxHQOA+n7nQEwIECBAgQIDAFAJddown1MwO86l2Drc93qYJ2hPOT9XHKeZqzc9ojozZdxhkdrMnZE+5dLjfLQQIECBAgAABAgRGExC4j0arYQIECBAgQIDA7ATaBtk5p/0wYai5L8/6UEp2PddeU/8yoLZf6v2rwK58KbvZs6Zq/2rhtpWsx9O18CVAgAABAgQIECAwSwGB+yynRacIECBAgAABAoMK7Etrbc9pTyh6HrQXrzfWtn9pKUH7sZTLRH30mO4CfXazNy9BzV8v/Ni9C+4kQIAAAQIECBAgMI2AwH0aZ08hQIAAAQIECDxDYFcemqD9UPnwhJvHUhJuTnFlJ3t2tO9bPCy7nHO8jfC1BdoTqmbtNUF7Pm97eQlqWzH1CRAgQIAAAQIEZiEgcJ/FNOgEAQIECBAgQGBQgS7ntH9TenAsZYoz0BPAtvlFQHAStKd/50GlNDa0wOelwUMpeQlql8tLULuouYcAAQIECBAgQGA2AgL32UyFjhAgQIAAAQIEBhFoe077p/LU7Bi/DPL0txvZlW+3Ddqz0zn9+36C/nlEN4HMa9/d7KfShpfedvN3FwECBAgQIECAwIwEBO4zmgxdIUCAAAECBAj0EGh7PMtP1yD73OOZtbdmx32C9gTntVdzpMip9gb1Jhfou5s9v+zJ/PplyuRT54EECBAgQIAAAQJjCQjcx5LVLgECBAgQIEBgGoGE2TkH/VD5uJzTnuA7QefYV5ejbaY+R35sg7W1vysDGmI3e9bfZW04xkOAAAECBAgQIEBA4G4NECBAgAABAgSWK9DsGk+wXXO9L5WmOLaja9Cevk3Rvxordf5ZoO9u9pzBf7oWtgQIECBAgAABAgRWKyBwX+3UGhgBAgQIECCwYoG8kDK72neVY0zYeSjlUlm/azVBe1e5ed6X+cxu9vxFRO1aux1J/lrhVEp+iTL22punoF4RIECAAAECBAhsTkDgvrkpN2ACBAgQIEBgwQIJPb8tZV85hpyDfijlXFm/T7UEswlWa3fb51nflXIs5dLnwe4dXCDrqzk2pkvjdrN3UXMPAQIECBAgQIDAKgQE7quYRoMgQIAAAQIEVi7Q9qWjU56DnmA2ofmuxRwI2ltgTVQ189fnbHa72SeaKI8hQIAAAQIECBCYt4DAfd7zo3cECBAgQIAAgbY7x7+5BuC/jEwnaB8ZeKLm+57N/lPpZ/6y4TRRfz2GAAECBAgQIECAwKwFBO6znh6dI0CAAAECBDYssC9jzzntn1UaTHVOe5egPX07lnKuHItq4wpkTTW72dscAdT0KrvZvy8lQfuP43ZV6wQIECBAgAABAgSWJSBwX9Z86S0BAgQIECCwfoFdGeLXpRwqh5pz2vNSywSgY16C9jF1x28766rZzV77S5z7XjW72bPWxv4LivFFPIEAAQIECBAgQIDACAIC9xFQNUmAAAECBAgQ6CiQoD3hec2u4+wyzg7jY8dn1d4maK+Vml+9rKOE7F9cS5ce2s3eRc09BAgQIECAAAECmxUQuG926g2cAAECBAgQmJFAAtEcH7Or7NMULx0VtFdOxgyr3YbsNb+8eWkIdrPPcGJ1iQABAgQIECBAYP4CAvf5z5EeEiBAgAABAusVSMD+bSn7yiFOcRa6oL1yMmZWre+57BlOdrOfrsXZ7DObYN0hQIAAAQIECBBYhoDAfRnzpJcECBAgQIDAugSy67g5PqZmZAlCc9RMwtAxrubokWNpfNfiATk/PveM1a8WXdlk1SZkz19ItJm3e6xP5Qs5l908bnIZGTQBAgQIECBAgMCQAgL3ITW1RYAAAQIECBB4LJAd5Dl7vfaoj/fX+mO8pDJ9eFdK7bnxzegE7Y/neawau9Jw35efpm+Zw6zDBO2XsTqrXQIECBAgQIAAAQJbExC4b23GjZcAAQIECBB4lsC+PDi72vOx5srxMYdSLjWVW9YRtLcEe3L1zFd+UZP1kF3tXS9HxnSVcx8BAgQIECBAgACBSgGBeyWUagQIECBAgACBjgIJS/NC1ISlNVd2HqfuuaZyyzq7Uj872tN+7Q77PMKO9pbQA1RvjvnJcTEpXa+E7NnF3pSu7biPAAECBAgQIECAAIEKAYF7BZIqBAgQIECAAIGOAs057TXhdoLRHPFx7Pist27blW+mL4eWbf907dOp5X2qdxdojovpE7Ln6c257AnaxziOqPsI3UmAAAECBAgQIEBgxQIC9xVPrqERIECAAAECTxPYlyd/W8qusgfflXo5R33oYDT9yI72tuFtjrM5lnKu7L9q/QQyTzkyJvNU88uZ156WX5CcrmXotdRvhO4mQIAAAQIECBAgsBEBgftGJtowCRAgQIAAgUkEduUpOT6mNuBOQJqg/Txw75rzvvct2xW0twTrUT1rpZmnfN71akJ2Lz/tKug+AgQIECBAgAABAgMKCNwHxNQUAQIECBAgsFmB5iWkx0qBHB+ToP1UWb+mWvNizbS7q7nhpo6gvSVYx+rNueyZoz4vP82Z+gnYs35+7NgXtxEgQIAAAQIECBAgMIKAwH0EVE0SIECAAAECmxLIbvbsat9VjvqbUu9YylBHfuS5XV6Emu7mKJucGy+0rZy8jtVyLnvWyaHj/bmtefmp+eqB6FYCBAgQIECAAAECYwsI3McW1j4BAgQIECCwVoFdGVjOad9XDjC7yLOzeahwO8/tcj57upug/VjKpbLvqrUXyProe2RME7JnN3uKiwABAgQIECBAgACBmQsI3Gc+QbpHgAABAgQIzE4gx4J8XUrC85orx3+k7lCBaULcLkeSJLzN7uhTKZeajqvTSaDr+fm3D/t0XS+ZKxcBAgQIECBAgAABAgsSELgvaLJ0lQABAgQIPFFgV579+xeen6+n3F+vff22XoLrPudYp63sFr89miWf3+4gv/3vBN+XnoYJUxNap++PribgTv2+x8fkec2xMS95v9WXjLsJ2vv249GYt/r9zEnXY30as7z8NPOUX8yYp62uJOMmQIAAAQIECBBYvIDAffFTaAAECBAgQOChwB9varwUcu/vWhgiCH/YqSdXuA3qz9e+NB8TfN4HnvnFQM5pv7d6bRjZoZxd6Jee49yV+7Ob/tChnRxhc7qWDre7pUIgZ7Nnbr6oqPtSleblpwna+66Vjl1wGwECBAgQIECAAAECQwoI3IfU1BYBAgQIEBhPIIHvb6/N3wfi+d7tjuv9eN3YVMsJQJsQtNY0AeqhlHNPqQS5Cexrn3v7uJzPfhqgDz2HsNrb87PWHOuz6zDK5lx2c9QBzy0ECBAgQIAAAQIE5i4gcJ/7DOkfAQIECKxR4DY8vw3Lbz/fwi7ztc1tgu5Dj0FlzhO0H0tpG+QmxE2Aa6d0jwl4cGvmJH9tkN3sNUcK3TfX/MWBI2PGmyMtEyBAgAABAgQIEHi6gMD96VOgAwQIECCwAoHbI1v2N+N57fMVDNkQXhHIUTQ5ruZ8LQlZH127UqHr+d/OZ3+k2//7ff7awC9C+vtrgQABAgQIECBAgMCiBATui5ounSVAgACBiQSye/UP12clDE3Jdfv5/TEuE3XNYxYocCp9zu73813f9+W/E7R3Of87QX7zgs0Fksy+y33+2iCDyxn+mffsZncRIECAAAECBAgQILAhAYH7hibbUAkQIEDgN81RLrfHteyKS0quPaNXBbJTNzu3769L+UJK7ddv6zW7wfuw3//i4/4ontv5vT3Kp88zu957Ljf+uZRmx3T60/ZKcJ+g/aW5aNuW+v8qkPXS9a8N7Ga3oggQIECAAAECBAgQ+I3A3SIgQIAAgTUINEe63IatTRDrLPTf/Ob+WJMEv7dXwtuE37fXfZ01rJPbMeyv/3EoH/MCzDlfCXITsqfcz9Oc+72kvmU9ZB1kPbS9frrOzantjeoTIECAAAECBAgQILA+AYH7+ubUiAgQILAmgSZI35VBpeTaXz/efm1NY35tLDmr+3LzzfPN5/eB+UsB+haM2owx6+dDKbXHuTS/tLg9bqjN87rUFeR2UWt3TxOyN/+utLk7f21wKuX2Z7HN/eoSIECAAAECBAgQILBCAYH7CifVkAgQILAQgSZMb3aiJwBN2cKO9Nvw/FLGnJLr/ogVQd44i/nr0uxX17X26AnZXZ66p7uKzXrdX9dt/vv25bmP2n3r+zn/O7vZzX8fxdfv7XM+e/PXBlkPzc/tOL3UKgECBAgQIECAAAECixQQuC9y2nSaAAECsxfYWpiencjNUR+3u8tf+3z2E7jSDu7LuL4tZVc5vm9KvePN3D66Le222TV/257zvx/p9v9+gvacz177y5bbJ/prg/7+WiBAgAABAgQIECCwCQGB+yam2SAJECAwqMBWwvTmCJHbXee3n1+Kaopr/gK70sU2QXjm/tBifvelbtfzv/PXDsdSvi/F+ezjrKXMf/6qIXPa9vLXBm3F1CdAgAABAgQIECCwcQGB+8YXgOETIEDgTqA5n7o51uX+49LBbo9yaXaf34bozj5f+gz/c/+bHc3HymFlfWT3c8LvR1efY0nSdkL9HBtT86xHffH9lwV25ctdgnZ/bWBFESBAgAABAgQIECDQWUDg3pnOjQQIEFikwFoD9dsjXc7XmbmUjym5mq8tctJ0upNAXoaaXe27yrvfl3oJwB/tMk97OZbkUEp+ntpe2TGdUL9Zm23vV/+xwL5USdCej22u/MIla+BUsQ7atKsuAQIECBAgQIAAAQIbEhC4b2iyDZUAgU0IrC1Qb4L0l3ah335tE5NrkFUCu1Ir57Tvq2r/Y6f5oZTLg/qfl+8nKK9t96XmsnM6/XsU6ld2XbU7gcxNl6Dd+eyWEgECBAgQIECAAAECgwkI3Aej1BABAgQmEVhToN6E6Qk6U24D9PMkmh6yJoExjo/ZFaDmbPZ83vfKLvpj30bc/y8C+/KVLkF7ftmS+fDvjUVFgAABAgQIECBAgMBgAgL3wSg1RIAAgcEEmlB9V1pM+ayUfC2h0lIuYfpSZmod/WxzfEx2mefYkOMbQ8/PWo6NSbtDXTmuJD/PruEEMk9dgvbvrvN/Ga4rWiJAgAABAgQIECBAgMA/BATuVgIBAgSeI5Dg7fel3IbpzQtKn9Oj+qcK0+ut1BxXID9HbY6Peev89Pz8ZTd7jo1Ju0Nf/14azEt5Xf0F9qWJtkG7F6H2d9cCAQIECBAgQIAAAQIVAgL3CiRVCBAg0FEgYfpvS0k41ITpSwjVm0D9fB33/ceOHG4jMJhAl+NjDuXpzVq+7Uh+PptjY7p0MCH+H0rZvXHzf5TvZVe9q59A5qpL0B77mhfi9uuduwkQIECAAAECBAgQIFAEBO6WAQECBPoJ/PF6e4KgJkzflc9T5no1gXp22zbnpt9+nGu/9YtABBKOJzzNz9uj67XjY/Lz2eds9qbd70s7OXrm8EZHcnzJW99/NAbf/8e/p23+kiFmzRwJ2q0gAgQIECBAgAABAgQmFRC4T8rtYQQILFQgYU9z/Es+z8715iiYOQ5JoD7HWdGnvgL5mftQyr6yofvjYxLQf17KoUUb94/KSzZP15L2/nb9t+C1LuVnMf3NL7Rc7QXy7212tGfOaq+clX8sJb8M4V6rph4BAgQIECBAgAABAoMJCNwHo9QQAQIrEMhu9WaX+u3Z6nMbmkB9bjOiP2MK5GcyoWvOVq+5ErgeSjlfK+/Lx+xm/+L6813Txm2d7JROeHss5XL9Rv59SNj+1i57YXtb6f+t3/bIoNzZBO2n7o91JwECBAgQIECAAAECBPoLCNz7G2qBAIFlCSTIyXnLt4H6rvx3ypyu7KS9P+7lUr6W4iKwFYG2x8ccC0yOEMnPc58jY+KbwDxt3e+UTvif57x1Cdu7r9Ac0RPfmiOD8hRBe3drdxIgQIAAAQIECBAgMIKAwH0EVE0SIDALgdtgfVd6lIB9P4ue/W8nbkP1S/lyyo+lOAZhZhOlO5MLtD0+JuekH0vJX6lkJ3tKl6vZzZ6gPT+Lt1f+Hak5Rzx9yW58P8ftZiD/Psc3zjXXa+fz19yrDgECBAgQIECAAAECBEYTELiPRqthAgQmFEg4l13rCWoS2uRjbWgzZjcTCCW0u1xLE6afx3yotgksWKDt8THZSd4c7XLoMe7XdrM3TSbATxj8aNf1N6VO7dE3Pbq7qlvzb3XNLzKaQXsZ6qqm32AIECBAgAABAgQIrE9A4L6+OTUiAmsWSDCTl5fuS0nInv/Ox2deOc7gUsp9mH5+Zqc8m8ACBdocH9MML7vIH4Xgr1HkZzfHxWQ3e36GX7rSdsLgmh3zfyn1Tgt0f1aXY9scH1Pbh/fX+fLXA7Vi6hEgQIAAAQIECBAgMLmAwH1ycg8kQKBSIEdD3Ibq+bxrsFb5yDer5fiXy7U0u9bvj5wY4jnaILA1gbbHx/T1yZEvCdpT3rpqfwGQ4D6BvH8P6mdmX6q2OT6mOTIo/wa7CBAgQIAAAQIECBAgMGsBgfusp0fnCGxGoDkSJiFMPn/WrvXb3eoJdm6Pg9nMZBgogYkE2h4f06dbj46MuW17V/6j9oiTT6XuoRQ7rutmJ3P+4WpWc0d+0Xks5VxTWR0CBAgQIECAAAECBAjMQUDgPodZ0AcC2xJowvUmWN8/YfgJ3y6lJFC/PwrmCd3xSAKbE6jdPd4HJmd9n66lZvd52yNO/qO0neNoXHUC+SuAmnPw01p++flVKY/+CqHuyWoRIECAAAECBAgQIEBgQgGB+4TYHkVggwLPDtfvg/Vmx/oGp8KQCcxCYOzjYxKyN8fFtAlr8wuAYym7CqX8u3IopSbEr2huE1XilbD90dW8EDVz4SJAgAABAgQIECBAgMAiBQTui5w2nSYwS4HsDs256/tSEqrl41RXQpqEX+dSLteSz10ECMxDYOzjY3K0SwL2U8vh5t+pr1v8e5WXdh5bPmPr1Q8FoCZszxxmV3v+DXcRIECAAAECBAgQIEBgsQIC98VOnY4TeLrA7bnrCa12E/WoeXlpcxxMcyTMRI/3GAIEWgqMdXxME7InaG973uQL5wAAIABJREFUhnr+vUrQfqgci13tlVB31eL7KGx3fEw3W3cRIECAAAECBAgQIDBTAYH7TCdGtwjMUOB+93p2rI553e5ab46CcYTDmOLaJjCswL4012b3eM3T8wu3UyldQva03/acdkec1MzKy3XyS9m/Xc1fa+Wb8o1jKW1/YdK9V+4kQIAAAQIECBAgQIDAyAIC95GBNU9goQK70u8/lLK/lgQnY1734bqz1sfU1jaBcQTy70Z+MZeXY+bfjqF+KZeQvTmX/dKx603QniNLavvliJOO2Nfb/l4+vva/Hfk3P+vk3O8R7iZAgAABAgQIECBAgMD8BATu85sTPSLwDIEEUJ9fQ7IEZbsROyFcHxFX0wQmFBjrWKn8G5EgtgnZ++5+bvNC1PDliJPDtQ8Tcq7qUR/LaN69MqLMb/53xl8srWrKDYYAAQIECBAgQIAAgUZA4G4tENiuwG3APtYOduH6dteXka9PYMxjpfJvRROw5+MQV9ugPX04lpKw2NVdYF9uzVEyL10xzv/eXLo3704CBAgQIECAAAECBAjMW0DgPu/50TsCQwrsSmPNcQ/5U/4xrrxYMLsWz9ciVBlDWZsExhfIX73k34uEo/trGfqp2UmecP10/XdjqPbT3w/Xvte2+b5UTNDedzd97fPWXC9he+bgpevP1zlf8/iNjQABAgQIECBAgACBjQsI3De+AAx/9QK7MsLsZD+UMsYu9pytfC6lCdmFVatfUga4UoH8W3G7g32Mfy9uj4rJvxuXgS33pb22L2n9rtxzHKEvAw9tMc3lf2u+faW3ORN/rF/2LgZIRwkQIECAAAECBAgQWL+AwH39c2yE2xNozmNPsDFkuNGEZQnKmoB9e7pGTGAdAvfh+m7EYSXUzu7xsc7s3pe22wbt+WXhsZT8e+YaTuA/S1MvraX870e+7peyw1lriQABAgQIECBAgACBmQoI3Gc6MbpFoINAwoyETgnZE7r3vXI8zLmUJly/9G3Q/QQIPEUgu9Wb42Hy+Ri7118aWP4N+er678gYA99f/83Lx9pL0F4r1b5e/rfnr6/c9pfy9VP7Jt1BgAABAgQIECBAgACB5QkI3Jc3Z3pM4F4gYdO7UvruZs95yudrybnKdiJaawSWJ5Aw/Q+lNMF6/n2Y+hr75aMZU9sd7fn37VjKaWqMDT0v/7uRI8zur9jvNuRgqAQIECBAgAABAgQIbFxA4L7xBWD4ixZIgJHQ6dBxFLdHxJxLG2Md99Cxe24jQOCBQP4NaML1ffk8IfsQf93SBz7Hx2RX+xi/sMsYBe19Zmfce//rlebtbh/XXesECBAgQIAAAQIECMxMQOA+swnRHQKVAodS70OHcC0he3YhNqXycaoRIPBkgWbn+q70Y1/KHML1W5Ixj4/JeAXtT16ADx7/1nEy/m/Nec+d3hEgQIAAAQIECBAgMLCA/ydoYFDNEZhA4NvyjEOL5wjZW2CpSuDJAtmhnl3rCZl3pUx95vq5PPP3pdQeUTXm8TExaBu0pz95QWvKGLvsn7w8Zvv443Wu7juYM/Mzjy4CBAgQIECAAAECBAhsRkDgvpmpNtCVCLwWarw0vBztYCf7SibeMFYpkDA94XY+JpScctd6ztXOMVIp52vZlY/5hV76UnONdXxMni9or5mB+dR57X+b3pcu5nsuAgQIECBAgAABAgQIbEZA4L6ZqTbQFQgkjPt7xTi+uQYcdndWYKlCYAKBP5Zn7K4lP8f5PB+nurLruwnWm4+3/z5kV31evHys7NBYx8fkhZs5/31f2Y9Us6O9BdaIVbN28kuS+0vgPiK6pgkQIECAAAECBAgQmKeAwH2e86JXBF4SeC3QeKR1fqFCQrf7QP6lr+U4ABcBAo8FdqVKs1s9nzdHwSTMnvrKz+3t7vXLGx3I0TF5H0T6/Oga6/iYL8uD8+9bTR+aPgraH83WtN/P/AncpzX3NAIECBAgQIAAAQIEZiogcJ/pxOgWgRcEXgs0psY63z0wwX3CvdvrUv4j5fbKERb3X5u6755HoI/ArtycUD0fU5ojYPZ9Gu15b3ab3+5ev/9ZfK359P/Zx8cI2ntO/oxuP5a+CNxnNCG6QoAAAQIECBAgQIDA8wQE7s+z92QCbQUSkCVM+23bG2dc/1L6lnJ71X6tOSZjxsPTtYUJ5GfsNlDPf9+WZw7n9liY/Iw0O9jb9mkOx8cI2tvO2vzrH0sXBe7znyc9JECAAAECBAgQIEBgAgGB+wTIHkFgQIHsqM2LUBMKul4WOL/w5Uv5Wsr99VLd1HGUzvpW1+7m56bZmZ6v3Za5jDq71rNeb3euD/FOhmcfH9MlaM9fxnws5VTKEAZzmeO19eNYBiRwX9usGg8BAgQIECBAgAABAp0EBO6d2NxE4OkCzYsF85JB1zQCLx2d0zz5/EoXLuXrKS9dCVUFiP3mLru1/3BtYlc+puRqAvV8P5/P9Wp2rTe71bNWXltLfcYQlzbHx3wq9Q8Drc9mR33+zWpznn2C9mMppz4Dd+9kApkrgftk3B5EgAABAgQIECBAgMCcBQTuc54dfSPwWKAJFPelahMy5uOajp15rLDOGucHw3r0/dz+1i8J3mp+6B3+u/Kwmr/KyDq+vZo13Xwt7aQs7WreX5A5a+YkIfvYv3Bpe3xM+nkopWZtPZoDQfsjoXV9/1iGI3Bf15waDQECBAgQIECAAAECHQUE7h3h3EZgQQL7F/pa+7U/Lmicukrg2QL5RcXlWhKo5/N8fMbV9viYHNtyHKCjgvYBEBfYRNaOwH2BE6fLBAgQIECAAAECBAgMLyBwH95UiwTWLPDSER27MuCU2+ulr9l5v+aVsZ2xNbv/z2XIzW71S/k8ZQ5XfvbaHh+T41769r9r0J6jlRL2n+aApw+dBY7lToF7Zz43EiBAgAABAgQIECCwJgGB+5pm01gILE/g/siQjKD2awkWa44pWZ6KHj9T4DZQTz/O1840H5/Zt0fPTuBZe1b6UMfHdA3a43y88X00Nt+ft0DmUuA+7znSOwIECBAgQIAAAQIEJhIQuE8E7TEECEwmsH/hSbvytZT766W6CRCbF3FO1mkPGl2geUFpHnS5lnx+vj65+Th6R0Z4QNZxdrW/tMbvHxeHoY6PeVfaOpbS5mWogvYRFsAMmsw6ELjPYCJ0gQABAgQIECBAgACB5wsI3J8/B3pAgMAyBF46Tic9f+3r+V4C0JSXLkfsDDPvzY702xfEXkrTKbnOwzxmlq1kbX0oJee111yfSqUhjo/5srRzfGNtv9QXQXvNDC23TtaDwH2586fnBAgQIECAAAECBAgMKCBwHxBTUwQIEBhQYP9GW2+F/Le31da7f9TQL8vN8SWXCpvzXZ28cDRBenPdhuoVza26yjOOjxG0r3pJ9RrcsdwtcO9F6GYCBAgQIECAAAECBNYiIHBfy0waBwECBAhsQWBfBjn18TGC9i2srH5jFLj383M3AQIECBAgQIAAAQIrEhC4r2gyDYUAAQIEViuwKyOb+vgYQftql9PgAxO4D06qQQIECBAgQIAAAQIEliogcF/qzOk3AQIECGxFoO3xMTmn/fuOODmGKEF72kjIX3s5o71Wap31jmVYjpRZ59waFQECBAgQIECAAAECLQUE7i3BVCdAgAABAhMJ7Mtzao+PSZfel/KxlNtz72u7uisVm6A9oXvtJWivlVp3vWMZnsB93XNsdAQIECBAgAABAgQIVAoI3CuhVCNAgAABAhMJJPDO8TGHyucl9E7dS2X922q78h8JSmuf1dybF+EeSzl1eKZb1ieQtSBwX9+8GhEBAgQIECBAgAABAh0EBO4d0NxCgAABAgRGEnh3DbJrdpkn9O56fMzn13v3LcchaG8JtpHqAveNTLRhEiBAgAABAgQIECDwWEDg/thIDQIECBAgMLZAgu/sav+s8kFdjo/pej57uvRTKTmu5lTZP9W2JXAsw7XDfVtzbrQECBAgQIAAAQIECLwiIHC3NAgQIECAwPMEpjg+ZncNQ78oH2t2zt9qOKP9eWtjSU8WuC9ptvSVAAECBAgQIECAAIFRBQTuo/JqnAABAgQIvCow9vExeQnqoZR9hzn4VO7JjvZzh3vdsj2BYxmyHe7bm3cjJkCAAAECBAgQIEDgBQGBu2VBgAABAgSmFUgAPtbxMbvSdhO05/O213flhoSnl7Y3qr9pgawZgfuml4DBEyBAgAABAgQIECDQCAjcrQUCBAgQIDCNQJfjY/JS1B8rupeXoB5KybExba9fyw3ZzZ7yS9ub1SdQBI6lCNwtBQIECBAgQIAAAQIECBQBgbtlQIAAAQIExhdoc3xMAvAE7acH3dqV7/fZze5FqOPP+1aeIHDfykwbJwECBAgQIECAAAECDwUE7g+JVCBAgAABAp0FPit3fltKPtZc35RKCS/f2mneZzd7+pBjY06lnGs6pA6BCoGsWTvcK6BUIUCAAAECBAgQIEBg/QIC9/XPsRESIECAwPQCOT4mAWR2qtdcP1zrvnZ8zK58P7vkD6Wk7bbXz+WG07Vc2t6sPoEHAsfrer+v9r58Id9zESBAgAABAgQIECBAYDMCAvfNTLWBEiBAgMBEAjnmJeeh1wTjbx0fk/uzmz2hfe0O+fshJsg/XctEw/eYDQocy5jtcN/gxBsyAQIECBAgQIAAAQL/KiBwtyoIECBAgMAwAgnFP5Syr2zuteNjcn9C+7wAtSa0v39cQvxTKQn9L5V9UY1AH4FDuTlHJ91fn67ruE/b7iVAgAABAgQIECBAgMCiBATui5ounSVAgACBGQoMcXzMroyrzwtQw2I3+wwXx0a6tC/j/NsLY82azPdcBAgQIECAAAECBAgQ2IyAwH0zU22gBAgQIDCCQJ/jY4Y4MsZu9hEmVZOtBV4L3C+lpX9r3ZobCBAgQIAAAQIECBAgsGABgfuCJ0/XCRAgQOBpAm2Pj/mu9DRnsf9SSs5lz3Exhx69z1Ed35dy6tGGWwkMKfBfrzTm/9YcUllbBAgQIECAAAECBAjMXsD/EzT7KdJBAgQIEJiRQNvjY34qfU/QfinlXSkJ2ncdx/Nzue90LWnPRWBOAq8F7v+3dDK/aHIRIECAAAECBAgQIEBgEwIC901Ms0ESIECAwAACbY+PyUtL/7OUBO7ZEd/1yu74Uynnrg24j8AEAlmff3zhOX+ydifQ9wgCBAgQIECAAAECBGYjIHCfzVToCAECBAjMVGBX+vVtKfvK/mU3748t6r/UbHbGJ7DPsTF2B1fCq/ZUgXN5+kuB+1/K109P7ZmHEyBAgAABAgQIECBAYEIBgfuE2B5FgAABAosSyPExOQbmOFGvc2RMAvYE7ZeJnukxBIYSyM/J1y809n7Cn6GhxqIdAgQIECBAgAABAgQIdBYQuHemcyMBAgQIrFggZ61/KGU38hh/Le03Lz89j/wszRMYU+BYGn8pcM+RSIcxH6xtAgQIECBAgAABAgQIzElA4D6n2dAXAgQIEHi2wK50oM3xMV37+0O58VSKI2O6CrpvbgL70qG/vdCprPV8z0WAAAECBAgQIECAAIFNCAjcNzHNBkmAAAECFQLZnZsXnOYomTGuHBlzupbLGA/QJoEnCuzLs18K3PM+g39/Yr88mgABAgQIECBAgAABApMKCNwn5fYwAgQIEJihQILC7GrfjdA3R8aMgKrJ2Qr81ys9839vznbKdIwAAQIECBAgQIAAgaEF/D9AQ4tqjwABAgSWIpCd7Dmn/TBChx0ZMwKqJmcvIHCf/RTpIAECBAgQIECAAAECYwsI3McW1j4BAgQIzFHgXenUsZQhj49xZMwcZ1qfphS4lIf9/oUH/ql87TxlRzyLAAECBAgQIECAAAECzxIQuD9L3nMJECBA4BkCn5WHZlf7fsCHf1faystPU1wEtixwLoP/4wsAAvctrwpjJ0CAAAECBAgQILAxAYH7xibccAkQILBRgexkb3a1D0GQ3ewfSzmV8ssQDWqDwAoEBO4rmERDIECAAAECBAgQIECgn4DAvZ+fuwkQIEBg/gL70sWhXoqa3ewJ2RMsuggQ+GeB/FzY4W5VECBAgAABAgQIECCwaQGB+6an3+AJECCwaoHsak/Q/kXPUdrN3hPQ7ZsRyF995C9J7q//KF/I91wECBAgQIAAAQIECBBYvYDAffVTbIAECBDYpMAQL0W1m32TS8egewgcy71fv3D/+/K1fM9FgAABAgQIECBAgACB1QsI3Fc/xQZIgACBTQn0fSnqr0WrOZv9sik5gyXQXyChusC9v6MWCBAgQIAAAQIECBBYsIDAfcGTp+sECBAg8N8COTrm81K+KiWBe5frp3JTE7R3ud89BAj8Yxe7wN1KIECAAAECBAgQIEBg0wIC901Pv8ETIEBg0QIJ2XM++6HHKHJsTIL2H3u04VYCbQV25YbfX2/KL4nyS6Nct5+/9N9tn/Oo/rlUSPk00M/AsbQjcH+k7vsECBAgQIAAAQIECKxaQOC+6uk1OAIECKxOYFdG9GUph1LyeZfLS1C7qLmnjcAfr5X3r3xs09ZUdU/lQTlr/dLjgcdyr8C9B6BbCRAgQIAAAQIECBBYvoDAfflzaAQECBDYgkBC9uxmT+ly5Wz270uxm72LnnteEkionp3p2ZW+u5b7HepLlDuWTn9Tyi8dOp97Be4d4NxCgAABAgQIECBAgMB6BATu65lLIyFAgMDaBBJivivlUEpz5EbbMf5QbjiVkrC9S4DY9nnqr0sg6+4PpTRB+r58nnWZsubrUgb3l1LOLQd5LPUF7i3RVCdAgAABAgQIECBAYF0CAvd1zafRECBAYA0COZv9UErX3ewxyJnUeYnqZQ0gxjCJQHas70pJuN6Urr/omaTDEzwk7zY4XX+ean6WjqWuwH2CifEIAgQIECBAgAABAgTmKyBwn+/c6BkBAgS2JJBgM8fGJCTf9Rh4zmc/lHLu0YZb1y2Q9ZUXlu5LaY6DyUfX2wIJ3/OXIvnZyhFN+e/bvwCIYUxf+vnN2fBHwAQIECBAgAABAgQIENiCgMB9C7NsjAQIEJivQAK7HBuToL3vbuKcO51Qz9Ex853vqXuW8Lc5EmZfPp/LGetNYB2Py7Xcf57/Tqg91nrOz9vh+jPz25EnRuA+MrDmCRAgQIAAAQIECBCYj4DAfT5zoScECBDYmkCOnhgiaP/pGhwmnHRtVyBhehOuP/tImKzJBOVNYN58vJSvpczpSvD+sZT8hclY159Kw+exGtcuAQIECBAgQIAAAQIE5iQgcJ/TbOgLAQIEtiGQYO9Yyq7ncLNLOO0kLHRtS+A+XN8/Yfg5vuhSSsL024/5fIlXDE+l5LidIa/88sGRPUOKaosAAQIECBAgQIAAgVkLCNxnPT06R4AAgVUJ7Mpovi0lwV7f64fSwKGUS9+G3D97gbzMtNmxnjU0xPppM+gExllnCdabnernNg0srG5+ro6lDBG8+zld2OTrLgECBAgQIECAAAEC/QUE7v0NtUCAAAECjwW+KFUStvc9pz272hMI5uWNrnUJ7K4h7758TMCe/55yZ3SzY/1cnnu7a31dyvWjaV6Cmp+3HNXT5vp0/Rk9tblJXQIECBAgQIAAAQIECKxBQOC+hlk0BgIECMxbIGe1HwfoopeiDoA4gybyS5fmrPVd+bwJdqfsWnatNzvWb3euT9mHJT0r85RfmjXzlY/NDvjsYm/Oqz9fXcd60euSzPSVAAECBAgQIECAAIGNCgjcNzrxhk2AAIGJBPJS1A89n5Wdx4dSEua5liOwK11NKHu7Wz2f9/0rh7YCCYTvw/W2bahPgAABAgQIECBAgAABAgSqBATuVUwqESBAgEAHgX25528d7ru95X35j2PPNtw+nkAC9N+WkrnOdf9xvCe/3LJwfWpxzyNAgAABAgQIECBAgACBfxIQuFsQBAgQIDCWwP8rDXfdzexli2PNSl27eVFprsxfc4767e70fV0zo9XKWf7ZtX6+fmzOXB/tgRomQIAAAQIECBAgQIAAAQI1AgL3GiV1CBAgQKCtQALZLrvbE6QeS/nY9oHqPxRodqOnYhOe3wbqu/L1lLld9y8zFa7PbYb0hwABAgQIECBAgAABAgT+R0DgbjEQIECAwBgCx9JoXpba9kqY2ryAsXnx4qV8LSVXE762bXct9ZsXjjbjuT8TfX8z0F35PGVJV/6yIXN9e+a6F3AuaQb1lQABAgQIECBAgAABAhsXELhvfAEYPgECBEYSyA71dyO1fdtswtmU5rr/73z9pa/l60OE97e7xmuGu3+lUtuv1zxrznV+us5LE6xnjvK5iwABAgQIECBAgAABAgQILFpA4L7o6dN5AgQIzE4gO7C/LeWL2fVMh54h0OxYbwJ1wfozZsEzCRAgQIAAAQIECBAgQGAyAYH7ZNQeRIAAgdULZEf7sZSuL0pdPdAKB9j8lUCC9NvSHA20wiEbEgECBAgQIECAAAECBAgQeF1A4G51ECBAgEBfgV1pILva930bcv9sBHLkS3N2+vnaq0v5mJJLoD6bqdIRAgQIECBAgAABAgQIEJiTgMB9TrOhLwQIEFieQJtd7Z/K8E6l5Nzz3bW0PQN9eULz6fFtiH4p3UrJdb5+bF5WO58e6wkBAgQIECBAgAABAgQIEFiYgMB9YROmuwQIEJiJwK7046+lJDB/dOXYka9K+f6NijmG5rat/U3dfL05pmbrAf2vxeL25aKX8t8pzXW++VyA/mhl+j4BAgQIECBAgAABAgQIEBhYQOA+MKjmCBAgsAGBQxnjh1Jqzmp/X+p9LKU5nmRontswPm3f/3e+truW+2fn67/v2aHbXeM1TZ1fqdT26zXPUocAAQIECBAgQIAAAQIECBCYWEDgPjG4xxEgQGDBAgnYc1b7FxVj+KHUya72293YFbepQoAAAQIECBAgQIAAAQIECBBYroDAfblzp+cECBCYUiA7xxO2PzpCJkeeHEvJrnYXAQIECBAgQIAAAQIECBAgQGBTAgL3TU23wRIgQKCTQHa0J2x/dIRMdrUfSrl0eoqbCBAgQIAAAQIECBAgQIAAAQILFxC4L3wCdZ8AAQIjCyRAT9j+1mVX+8iToHkCBAgQIECAAAECBAgQIEBgGQIC92XMk14SIEDgGQI1YXteGpp6zmp/xgx5JgECBAgQIECAAAECBAgQIDArAYH7rKZDZwgQIDAbgZzV/rdS3jpG5pvy/bwY1UWAAAECBAgQIECAAAECBAgQIFAEBO6WAQECBAjcCyRk/3spu1docoRMgvYTOgIECBAgQIAAAQIECBAgQIAAgf8VELhbDQQIECBwL5Cd7fs3wvZ8zxEy1g0BAgQIECBAgAABAgQIECBA4E5A4G5JECBAgMCtwLH8x9fCdouCAAECBAgQIECAAAECBAgQINBeQODe3swdBAgQWKvAvgwsu9tfu/5cvvH9WgdvXAQIECBAgAABAgQIECBAgACBvgIC976C7idAgMA6BHJu+3+W8tpLUt+X7x3XMVSjIECAAAECBAgQIECAAAECBAiMIyBwH8dVqwQIEFiawF9Lh794pdM/lK/vlzYg/SVAgAABAgQIECBAgAABAgQITC0gcJ9a3PMIECAwP4GvSpc+vNKtX8vXd6X8Mr9u6xEBAgQIECBAgAABAgQIECBAYF4CAvd5zYfeECBAYGqBz8oD//7GQ/9UvneeulOeR4AAAQIECBAgQIAAAQIECBBYooDAfYmzps8ECBAYTiAvQf38leac2z6cs5YIECBAgAABAgQIECBAgACBDQgI3DcwyYZIgACBNwReC9x/Kvdk97uLAAECBAgQIECAAAECBAgQIECgUkDgXgmlGgECBFYqkBel5oWpt5dz21c62YZFgAABAgQIECBAgAABAgQIjCsgcB/XV+sECBBYgkBC94+l/L6Un0vJf/+4hI7rIwECBAgQIECAAAECBAgQIEBgTgIC9znNhr4QIEDguQK78vjLc7vg6QQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgSFIJPXAAAHJ0lEQVQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgAABAgQIECBAgAABAgQIECBAgAABAjMSELjPaDJ0hQABAgQIECBAgAABAgQIECBAgAABAgSWKyBwX+7c6TkBAgQIECBAgAABAgQIECBAgAABAgQIzEhA4D6jydAVAgQIECBAgAABAgQIECBAgAABAgQIEFiugMB9uXOn5wQIECBAgAABAgQIECBAgAABAgQIECAwIwGB+4wmQ1cIECBAgAABAgQIECBAgAABAgQIECBAYLkCAvflzp2eEyBAgAABAgQIECBAgAABAgQIECBAgMCMBATuM5oMXSFAgAABAgQIECBAgAABAgQIECBAgACB5QoI3Jc7d3pOgMD/b8eOaQAAABCG+XeNjZHUASnfCBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfAcH99zvLCRAgQIAAAQIECBAgQIAAAQIECBAgQCAkILiHzjCFAAECBAgQIECAAAECBAgQIECAAAECBH4FBPff7ywnQIAAAQIECBAgQIAAAQIECBAgQIAAgZCA4B46wxQCBAgQIECAAAECBAgQIECAAAECBAgQ+BUQ3H+/s5wAAQIECBAgQIAAAQIECBAgQIAAAQIEQgKCe+gMUwgQIECAAAECBAgQIECAAAECBAgQIEDgV0Bw//3OcgIECBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfAcH99zvLCRAgQIAAAQIECBAgQIAAAQIECBAgQCAkILiHzjCFAAECBAgQIECAAAECBAgQIECAAAECBH4FBPff7ywnQIAAAQIECBAgQIAAAQIECBAgQIAAgZCA4B46wxQCBAgQIECAAAECBAgQIECAAAECBAgQ+BUQ3H+/s5wAAQIECBAgQIAAAQIECBAgQIAAAQIEQgKCe+gMUwgQIECAAAECBAgQIECAAAECBAgQIEDgV0Bw//3OcgIECBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfAcH99zvLCRAgQIAAAQIECBAgQIAAAQIECBAgQCAkILiHzjCFAAECBAgQIECAAAECBAgQIECAAAECBH4FBPff7ywnQIAAAQIECBAgQIAAAQIECBAgQIAAgZCA4B46wxQCBAgQIECAAAECBAgQIECAAAECBAgQ+BUQ3H+/s5wAAQIECBAgQIAAAQIECBAgQIAAAQIEQgKCe+gMUwgQIECAAAECBAgQIECAAAECBAgQIEDgV0Bw//3OcgIECBAgQIAAAQIECBAgQIAAAQIECBAICQjuoTNMIUCAAAECBAgQIECAAAECBAgQIECAAIFfgQGMc9WA31rv6AAAAABJRU5ErkJggg==';
+
diff --git a/vue-options-api-demos/inputs/signature/smooth/main.js b/vue-options-api-demos/inputs/signature/smooth/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/smooth/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/signature/smooth/main.vue b/vue-options-api-demos/inputs/signature/smooth/main.vue
new file mode 100644
index 00000000..4604112a
--- /dev/null
+++ b/vue-options-api-demos/inputs/signature/smooth/main.vue
@@ -0,0 +1,12 @@
+<template>
+  <Signature :smooth="true" :popup-scale="2" />
+</template>
+<script>
+import { Signature } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    Signature,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/slider/buttons/main.js b/vue-options-api-demos/inputs/slider/buttons/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/slider/buttons/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/slider/buttons/main.vue b/vue-options-api-demos/inputs/slider/buttons/main.vue
new file mode 100644
index 00000000..dc04c9d1
--- /dev/null
+++ b/vue-options-api-demos/inputs/slider/buttons/main.vue
@@ -0,0 +1,28 @@
+<template>
+   <div>
+            <slider
+                :buttons="true"
+                :step="1"
+                :default-value="7"
+                :min="1"
+                :max="10"
+            >
+            <slider-label :position="1">1</slider-label>
+            <slider-label :position="3">3</slider-label>
+            <slider-label :position="5">5</slider-label>
+            <slider-label :position="7">7</slider-label>
+            <slider-label :position="10">10</slider-label>
+            </slider>
+        </div>
+</template>
+<script>
+import { Slider, SliderLabel } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        'slider': Slider,
+        'slider-label': SliderLabel
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/slider/controlled/main.js b/vue-options-api-demos/inputs/slider/controlled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/slider/controlled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/slider/controlled/main.vue b/vue-options-api-demos/inputs/slider/controlled/main.vue
new file mode 100644
index 00000000..43292676
--- /dev/null
+++ b/vue-options-api-demos/inputs/slider/controlled/main.vue
@@ -0,0 +1,43 @@
+<template>
+   <div>
+            <slider
+                :step="1"
+                :min="1"
+                :max="10"
+                :value="value"
+                @change="onChange"
+            >
+                <slider-label
+                    :title="value.toString()"
+                    :key="value"
+                    @click="handleClick(value)"
+                    :position="value"
+                    v-for="value in [ 1, 3, 5, 6, 10 ]">
+                </slider-label>
+            </slider>
+        </div>
+</template>
+<script>
+import { Slider, SliderLabel } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        'slider': Slider,
+        'slider-label': SliderLabel
+    },
+    data () {
+        return {
+            value: 7
+        };
+    },
+    methods: {
+        onChange (event) {
+            this.value = event.value;
+        },
+        handleClick (value) {
+            this.value = value;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/slider/labels/main.js b/vue-options-api-demos/inputs/slider/labels/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/slider/labels/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/slider/labels/main.vue b/vue-options-api-demos/inputs/slider/labels/main.vue
new file mode 100644
index 00000000..d28eb004
--- /dev/null
+++ b/vue-options-api-demos/inputs/slider/labels/main.vue
@@ -0,0 +1,28 @@
+<template>
+     <div>
+            <slider
+                :buttons="true"
+                :step="1"
+                :default-value="7"
+                :min="1"
+                :max="10"
+            >
+            <slider-label :position="1">1</slider-label>
+            <slider-label :position="3">3</slider-label>
+            <slider-label :position="5">5</slider-label>
+            <slider-label :position="7">7</slider-label>
+            <slider-label :position="10">10</slider-label>
+            </slider>
+        </div>
+</template>
+<script>
+import { Slider, SliderLabel } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        'slider': Slider,
+        'slider-label': SliderLabel
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/slider/orientation/main.js b/vue-options-api-demos/inputs/slider/orientation/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/slider/orientation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/slider/orientation/main.vue b/vue-options-api-demos/inputs/slider/orientation/main.vue
new file mode 100644
index 00000000..c4bbf169
--- /dev/null
+++ b/vue-options-api-demos/inputs/slider/orientation/main.vue
@@ -0,0 +1,29 @@
+<template>
+    <div>
+            <slider
+                :vertical="true"
+                :buttons="true"
+                :step="1"
+                :default-value="7"
+                :min="1"
+                :max="10"
+            >
+            <slider-label :position="1">1</slider-label>
+            <slider-label :position="3">3</slider-label>
+            <slider-label :position="5">5</slider-label>
+            <slider-label :position="7">7</slider-label>
+            <slider-label :position="10">10</slider-label>
+            </slider>
+        </div>
+</template>
+<script>
+import { Slider, SliderLabel } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        'slider': Slider,
+        'slider-label': SliderLabel
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/slider/overview/main.js b/vue-options-api-demos/inputs/slider/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/slider/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/slider/overview/main.vue b/vue-options-api-demos/inputs/slider/overview/main.vue
new file mode 100644
index 00000000..dc04c9d1
--- /dev/null
+++ b/vue-options-api-demos/inputs/slider/overview/main.vue
@@ -0,0 +1,28 @@
+<template>
+   <div>
+            <slider
+                :buttons="true"
+                :step="1"
+                :default-value="7"
+                :min="1"
+                :max="10"
+            >
+            <slider-label :position="1">1</slider-label>
+            <slider-label :position="3">3</slider-label>
+            <slider-label :position="5">5</slider-label>
+            <slider-label :position="7">7</slider-label>
+            <slider-label :position="10">10</slider-label>
+            </slider>
+        </div>
+</template>
+<script>
+import { Slider, SliderLabel } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        'slider': Slider,
+        'slider-label': SliderLabel
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/switch/appearance/configurator/SwitchStyleConfigurator.vue b/vue-options-api-demos/inputs/switch/appearance/configurator/SwitchStyleConfigurator.vue
new file mode 100644
index 00000000..c5b405da
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/appearance/configurator/SwitchStyleConfigurator.vue
@@ -0,0 +1,101 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="sizeOptions"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Track Rounded Mode
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="trackRoundedOptions"
+              :value="trackRounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleTrackRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Thumb Rounded Radius
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="thumbRoundedOptions"
+              :value="thumbRounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleThumbRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+    thumbRounded: String,
+    trackRounded: String,
+  },
+  emits: ["sizechange", "trackroundedchange", "thumbroundedchange"],
+  data() {
+    return {
+      sizeOptions: ["small", "medium", "large"],
+      trackRoundedOptions: ["small", "medium", "large", "full"],
+      thumbRoundedOptions: ["small", "medium", "large", "full"],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleTrackRoundedChange(event) {
+      this.$emit("trackroundedchange", event);
+    },
+    handleThumbRoundedChange(event) {
+      this.$emit("thumbroundedchange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/switch/appearance/configurator/main.js b/vue-options-api-demos/inputs/switch/appearance/configurator/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/appearance/configurator/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/switch/appearance/configurator/main.vue b/vue-options-api-demos/inputs/switch/appearance/configurator/main.vue
new file mode 100644
index 00000000..9fb854c9
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/appearance/configurator/main.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <SwitchStyleConfigurator
+      :size="size"
+      @sizechange="setSize"
+      :track-rounded="trackRounded"
+      @trackroundedchange="setTrackRounded"
+      :thumb-rounded="thumbRounded"
+      @thumbroundedchange="setThumbRounded"
+    />
+    <Switch
+      :size="size"
+      :track-rounded="trackRounded"
+      :thumb-rounded="thumbRounded"
+    />
+  </div>
+</template>
+
+<script>
+import { Switch } from "@progress/kendo-vue-inputs";
+import SwitchStyleConfigurator from "./SwitchStyleConfigurator.vue";
+
+export default {
+  components: {
+    SwitchStyleConfigurator,
+    Switch,
+  },
+  data() {
+    return {
+      size: "medium",
+      trackRounded: "medium",
+      thumbRounded: "medium",
+    };
+  },
+  methods: {
+    setSize(event) {
+      this.size = event.value;
+    },
+    setTrackRounded(event) {
+      this.trackRounded = event.value;
+    },
+    setThumbRounded(event) {
+      this.thumbRounded = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/switch/appearance/size/main.js b/vue-options-api-demos/inputs/switch/appearance/size/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/appearance/size/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/switch/appearance/size/main.vue b/vue-options-api-demos/inputs/switch/appearance/size/main.vue
new file mode 100644
index 00000000..ac8d4b9c
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/appearance/size/main.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="demo">
+    <span class="wrapper">
+      <span>Small size: </span>
+      <Switch :size="'small'" />
+    </span>
+    <span class="wrapper">
+      <span>Medium size: </span>
+      <Switch :size="'medium'" />
+    </span>
+    <span class="wrapper">
+      <span>Large size: </span>
+      <Switch :size="'large'" />
+    </span>
+  </div>
+</template>
+
+<script>
+import { Switch } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    Switch,
+  },
+};
+</script>
+
+<style>
+.custom-switch {
+  width: 140px;
+  height: 70px;
+}
+
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/inputs/switch/appearance/thumb-rounded/main.js b/vue-options-api-demos/inputs/switch/appearance/thumb-rounded/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/appearance/thumb-rounded/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/switch/appearance/thumb-rounded/main.vue b/vue-options-api-demos/inputs/switch/appearance/thumb-rounded/main.vue
new file mode 100644
index 00000000..f9915a31
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/appearance/thumb-rounded/main.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="demo">
+    <span class="wrapper">
+      <span>Small roundness: </span>
+      <Switch :thumb-rounded="'small'" />
+    </span>
+    <span class="wrapper">
+      <span>Medium roundness: </span>
+      <Switch :thumb-rounded="'medium'" />
+    </span>
+    <span class="wrapper">
+      <span>Large roundness: </span>
+      <Switch :thumb-rounded="'large'" />
+    </span>
+    <span class="wrapper">
+      <span>Full roundness: </span>
+      <Switch :thumb-rounded="'full'" />
+    </span>
+  </div>
+</template>
+
+<script>
+import { Switch } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    Switch,
+  },
+};
+</script>
+
+<style>
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/inputs/switch/appearance/track-rounded/main.js b/vue-options-api-demos/inputs/switch/appearance/track-rounded/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/appearance/track-rounded/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/switch/appearance/track-rounded/main.vue b/vue-options-api-demos/inputs/switch/appearance/track-rounded/main.vue
new file mode 100644
index 00000000..58787569
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/appearance/track-rounded/main.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="demo">
+    <span class="wrapper">
+      <span>Small roundness: </span>
+      <Switch :track-rounded="'small'" />
+    </span>
+    <span class="wrapper">
+      <span>Medium roundness: </span>
+      <Switch :track-rounded="'medium'" />
+    </span>
+    <span class="wrapper">
+      <span>Large roundness: </span>
+      <Switch :track-rounded="'large'" />
+    </span>
+    <span class="wrapper">
+      <span>Full roundness: </span>
+      <Switch :track-rounded="'full'" />
+    </span>
+  </div>
+</template>
+
+<script>
+import { Switch } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    Switch,
+  },
+};
+</script>
+
+<style>
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/inputs/switch/controlled/manual/main.js b/vue-options-api-demos/inputs/switch/controlled/manual/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/controlled/manual/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/switch/controlled/manual/main.vue b/vue-options-api-demos/inputs/switch/controlled/manual/main.vue
new file mode 100644
index 00000000..2e61b799
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/controlled/manual/main.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="row">
+    <div class="col-md-3">
+      <kbutton @click="handleToggleSwitch">Toggle</kbutton>
+    </div>
+    <div class="col-md-3">
+      <k-switch @change="onChange" :checked="checked" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Switch } from "@progress/kendo-vue-inputs";
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    "k-switch": Switch,
+      'kbutton': Button
+  },
+  data() {
+    return {
+      checked: true,
+    };
+  },
+  methods: {
+    onChange(e) {
+      this.checked = e.target.value;
+    },
+    handleToggleSwitch(e) {
+      this.checked = !this.checked;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/switch/controlled/overview/main.js b/vue-options-api-demos/inputs/switch/controlled/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/controlled/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/switch/controlled/overview/main.vue b/vue-options-api-demos/inputs/switch/controlled/overview/main.vue
new file mode 100644
index 00000000..19b930bc
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/controlled/overview/main.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <k-switch @change="onChange" :checked="checked" />
+  </div>
+</template>
+
+<script>
+import { Switch } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    "k-switch": Switch,
+  },
+  data() {
+    return {
+      checked: true,
+    };
+  },
+  methods: {
+    onChange(e) {
+      this.checked = e.target.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/switch/controlled/readonly/main.js b/vue-options-api-demos/inputs/switch/controlled/readonly/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/controlled/readonly/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/switch/controlled/readonly/main.vue b/vue-options-api-demos/inputs/switch/controlled/readonly/main.vue
new file mode 100644
index 00000000..4d16e0ca
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/controlled/readonly/main.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <k-switch :checked="true" />
+  </div>
+</template>
+
+<script>
+import { Switch } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    "k-switch": Switch,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/switch/default/main.js b/vue-options-api-demos/inputs/switch/default/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/default/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/switch/default/main.vue b/vue-options-api-demos/inputs/switch/default/main.vue
new file mode 100644
index 00000000..928f2791
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/default/main.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <k-switch :default-checked="true" />
+  </div>
+</template>
+
+<script>
+import { Switch } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    "k-switch": Switch,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/switch/disabled/main.js b/vue-options-api-demos/inputs/switch/disabled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/switch/disabled/main.vue b/vue-options-api-demos/inputs/switch/disabled/main.vue
new file mode 100644
index 00000000..f6354653
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/disabled/main.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <k-switch @change="onChange" :disabled="true" :checked="checked" />
+  </div>
+</template>
+
+<script>
+import { Switch } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    "k-switch": Switch,
+  },
+  data() {
+    return {
+      checked: true,
+    };
+  },
+  methods: {
+    onChange(e) {
+      this.checked = e.target.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/switch/events/Logger.vue b/vue-options-api-demos/inputs/switch/events/Logger.vue
new file mode 100644
index 00000000..aa04a80b
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/events/Logger.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="example-config">
+    <h5>{{ title }}</h5>
+    <ul class="event-log">
+      <li v-for="(event, idx) in events" :key="idx">{{ event }}</li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    events: Array,
+    title: String,
+  },
+};
+</script>
+
+<style scoped>
+.example-config {
+  margin: 0 0 20px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+  margin: 0;
+  padding: 0;
+  max-height: 100px;
+  overflow-y: auto;
+  list-style-type: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: white;
+}
+.event-log li {
+  margin: 0;
+  padding: 0.3em;
+  line-height: 1.2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+  margin-bottom: -1px;
+}
+</style>
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/switch/events/main.js b/vue-options-api-demos/inputs/switch/events/main.js
new file mode 100644
index 00000000..1f1c6c86
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/events/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
+
diff --git a/vue-options-api-demos/inputs/switch/events/main.vue b/vue-options-api-demos/inputs/switch/events/main.vue
new file mode 100644
index 00000000..5fe3e347
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/events/main.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <k-switch @change="onChange" :checked="checked" />
+    <br />
+    <br />
+    <Logger :title="'Events list'" :events="eventsList" />
+  </div>
+</template>
+<script>
+import { Switch } from "@progress/kendo-vue-inputs";
+import Logger from "./Logger.vue";
+
+export default {
+  components: {
+    Logger,
+    "k-switch": Switch,
+  },
+  computed: {
+    eventsList() {
+      return this.events;
+    },
+  },
+  data: function () {
+    return {
+      checked: true,
+      events: [],
+    };
+  },
+  methods: {
+    onChange(e) {
+      this.checked = e.target.value;
+      this.events.unshift(
+        "Change event triggered. Switch value is: " + e.target.value
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/switch/forms-support/custom-message/FormContent.vue b/vue-options-api-demos/inputs/switch/forms-support/custom-message/FormContent.vue
new file mode 100644
index 00000000..edf52a4f
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/forms-support/custom-message/FormContent.vue
@@ -0,0 +1,176 @@
+<template>
+  <form-element :style="{ maxWidth: '650px' }">
+    <fieldset>
+      <legend>Create new account:</legend>
+      <div class="mb-3">
+        <field
+          :id="'username'"
+          :name="'username'"
+          :component="'myTemplate'"
+          :style="{
+            width: '100%',
+          }"
+          :label="'First Name'"
+          :pattern="'[A-Za-z]+'"
+          :min-length="2"
+          :validator="requiredValidator"
+        >
+          <template v-slot:myTemplate="{ props }">
+            <forminput
+              v-bind="props"
+              :validation-message="usernameValidationMessage"
+              @change="props.onChange"
+              @blur="props.onBlur"
+              @focus="props.onFocus"
+            />
+          </template>
+        </field>
+      </div>
+      <div class="mb-3">
+        <field
+          :name="'password'"
+          :type="'password'"
+          :component="'myTemplate'"
+          :style="{
+            width: '100%',
+          }"
+          :label="'Password'"
+          :min-length="6"
+          :max-length="16"
+          :validator="passwordValidator"
+        >
+          <template v-slot:myTemplate="{ props }">
+            <forminput
+              v-bind="props"
+              :validation-message="passwordValidationMessage"
+              @change="props.onChange"
+              @blur="props.onBlur"
+              @focus="props.onFocus"
+            />
+          </template>
+        </field>
+      </div>
+      <div class="mb-3">
+        <field
+          :name="'confirmPassword'"
+          :type="'password'"
+          :component="'myTemplate'"
+          :style="{
+            width: '100%',
+          }"
+          :label="'Confirm Password'"
+          :min-length="2"
+          :max-length="18"
+          :validator="passwordValidator"
+        >
+          <template v-slot:myTemplate="{ props }">
+            <forminput
+              v-bind="props"
+              :validation-message="passwordValidationMessage"
+              @change="props.onChange"
+              @blur="props.onBlur"
+              @focus="props.onFocus"
+            />
+          </template>
+        </field>
+      </div>
+      <div class="mb-3">
+        <field
+          :name="'email'"
+          :type="'email'"
+          :component="'myTemplate'"
+          :style="{
+            width: '100%',
+          }"
+          :label="'Email address'"
+          :validator="emailValidator"
+        >
+          <template v-slot:myTemplate="{ props }">
+            <forminput
+              v-bind="props"
+              @change="props.onChange"
+              @blur="props.onBlur"
+              @focus="props.onFocus"
+            />
+          </template>
+        </field>
+      </div>
+      <div class="mb-3">
+        <field
+          :id="'keepSigned'"
+          :name="'keepSigned'"
+          :component="'myTemplate'"
+          :validator="requiredValidator"
+        >
+          <template v-slot:myTemplate="{ props }">
+            <formswitch
+              v-bind="props"
+              :validation-message="switchCustomMessage"
+              @change="props.onChange"
+              @blur="props.onBlur"
+              @focus="props.onFocus"
+            />
+          </template>
+        </field>
+        <span
+          :style="{
+            'margin-left': 10,
+            'font-size': 12,
+          }"
+        >
+          Keep me signed in
+        </span>
+      </div>
+    </fieldset>
+    <div class="k-form-buttons">
+      <k-button :disabled="!kendoForm.allowSubmit"> Submit </k-button>
+    </div>
+  </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import { Button } from "@progress/kendo-vue-buttons";
+import FormInput from "./FormInput.vue";
+import FormSwitch from "./FormSwitch.vue";
+
+const requiredValidator = (value) => {
+  return value ? "" : "Error: This field is required.";
+};
+
+const passwordValidator = (value) => {
+  return !value || value.length < 6 || value.length > 16;
+};
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const emailValidator = (value) =>
+  emailRegex.test(value) ? "" : "Please enter a valid email.";
+
+export default {
+  components: {
+    field: Field,
+    "form-element": FormElement,
+    forminput: FormInput,
+    formswitch: FormSwitch,
+    "k-button": Button,
+  },
+  inject: {
+    kendoForm: { default: {} },
+  },
+  data: function () {
+    return {
+      requiredValidator: requiredValidator,
+      passwordValidator: passwordValidator,
+      emailValidator: emailValidator,
+      usernameValidationMessage: "Your username should contain only letters",
+      passwordValidationMessage:
+        "Please enter password between 6 and 16 characters",
+      switchCustomMessage: "Please turn the automatic sign in",
+    };
+  },
+  methods: {
+    handleSubmit(dataItem) {
+      console.log("dataItem=", dataItem);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/switch/forms-support/custom-message/FormInput.vue b/vue-options-api-demos/inputs/switch/forms-support/custom-message/FormInput.vue
new file mode 100644
index 00000000..2171ad3a
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/forms-support/custom-message/FormInput.vue
@@ -0,0 +1,98 @@
+<template>
+  <fieldwrapper>
+    <klabel
+      :class="'k-form-label'"
+      :editor-id="id"
+      :editor-valid="valid"
+      :disabled="disabled"
+      :optional="optional"
+    >
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <kinput
+        :valid="valid"
+        :id="id"
+        :value="value"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :required="required"
+        :validation-message="validationMessage"
+        @input="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { Input } from '@progress/kendo-vue-inputs';
+export default {
+  props: {
+    optional: Boolean,
+    disabled: Boolean,
+    placeholder: String,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: String,
+      default: '',
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    kinput: Input,
+  },
+  computed: {
+    showValidationMessage() {
+      return (
+        this.$props.touched &&
+        this.$props.validationMessage &&
+        !this.$props.valid
+      );
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/switch/forms-support/custom-message/FormSwitch.vue b/vue-options-api-demos/inputs/switch/forms-support/custom-message/FormSwitch.vue
new file mode 100644
index 00000000..f341b3d2
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/forms-support/custom-message/FormSwitch.vue
@@ -0,0 +1,102 @@
+<template>
+  <fieldwrapper>
+    <klabel
+      :class="'k-form-label'"
+      :editor-id="id"
+      :editor-valid="valid"
+      :disabled="disabled"
+      :optional="optional"
+    >
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <kswitch
+        :valid="valid"
+        :id="id"
+        :checked="value"
+        :disabled="disabled"
+        :required="required"
+        :placeholder="placeholder"
+        @change="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+
+      <span v-if="showValidationMessage && showHint">
+        <error>
+          {{ validationMessage }}
+        </error>
+        <hint>{{ hint }}</hint>
+      </span>
+      <hint v-else-if="showHint">{{ hint }}</hint>
+      <error v-else-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { Switch } from '@progress/kendo-vue-inputs';
+export default {
+  props: {
+    optional: Boolean,
+    disabled: Boolean,
+    placeholder: String,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    kswitch: Switch,
+  },
+  computed: {
+    showValidationMessage() {
+      return (
+        this.$props.touched && this.$props.validationMessage && !this.valid
+      );
+    },
+    showHint() {
+      return this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/switch/forms-support/custom-message/main.js b/vue-options-api-demos/inputs/switch/forms-support/custom-message/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/forms-support/custom-message/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/switch/forms-support/custom-message/main.vue b/vue-options-api-demos/inputs/switch/forms-support/custom-message/main.vue
new file mode 100644
index 00000000..7361dbf5
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/forms-support/custom-message/main.vue
@@ -0,0 +1,22 @@
+<template>
+  <k-form @submit="handleSubmit">
+    <formcontent />
+  </k-form>
+</template>
+
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from "./FormContent.vue";
+
+export default {
+  components: {
+    "k-form": Form,
+    formcontent: FormContent,
+  },
+  methods: {
+    handleSubmit(dataItem) {
+      alert(JSON.stringify(dataItem, null, 2));
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/switch/forms-support/form-required/FormContent.vue b/vue-options-api-demos/inputs/switch/forms-support/form-required/FormContent.vue
new file mode 100644
index 00000000..6f3e5603
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/forms-support/form-required/FormContent.vue
@@ -0,0 +1,96 @@
+<template>
+  <form-element :style="{ maxWidth: '650px' }">
+    <fieldset class="k-form-fieldset">
+      <legend>Create new account:</legend>
+      <div class="mb-3">
+        <field
+          :name="'firstName'"
+          :component="'myTemplate'"
+          :label="'First Name:'"
+          :required="true"
+        >
+          <template v-slot:myTemplate="{ props }">
+            <forminput
+              v-bind="props"
+              @change="props.onChange"
+              @blur="props.onBlur"
+              @focus="props.onFocus"
+            />
+          </template>
+        </field>
+      </div>
+      <div class="mb-3">
+        <field
+          :name="'password'"
+          :type="'password'"
+          :component="'myTemplate'"
+          :label="'Password'"
+          :required="true"
+        >
+          <template v-slot:myTemplate="{ props }">
+            <forminput
+              v-bind="props"
+              @change="props.onChange"
+              @blur="props.onBlur"
+              @focus="props.onFocus"
+            />
+          </template>
+        </field>
+      </div>
+      <div class="mb-3">
+        <field
+          :id="'keepSigned'"
+          :name="'keepSigned'"
+          :component="'myTemplate'"
+          :hint="'Keep me signed in'"
+          :required="true"
+        >
+          <template v-slot:myTemplate="{ props }">
+            <formswitch
+              v-bind="props"
+              @change="props.onChange"
+              @blur="props.onBlur"
+              @focus="props.onFocus"
+            />
+          </template>
+        </field>
+      </div>
+    </fieldset>
+    <div class="k-form-buttons">
+      <k-button :disabled="!kendoForm.allowSubmit"> Submit </k-button>
+    </div>
+  </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import { Button } from "@progress/kendo-vue-buttons";
+import FormInput from "./FormInput.vue";
+import FormSwitch from "./FormSwitch.vue";
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const emailValidator = (value) =>
+  emailRegex.test(value) ? "" : "Please enter a valid email.";
+
+export default {
+  components: {
+    field: Field,
+    "form-element": FormElement,
+    forminput: FormInput,
+    formswitch: FormSwitch,
+    "k-button": Button,
+  },
+  inject: {
+    kendoForm: { default: {} },
+  },
+  data: function () {
+    return {
+      emailValidator: emailValidator,
+    };
+  },
+  methods: {
+    handleSubmit(dataItem) {
+      console.log("dataItem=", dataItem);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/switch/forms-support/form-required/FormInput.vue b/vue-options-api-demos/inputs/switch/forms-support/form-required/FormInput.vue
new file mode 100644
index 00000000..b69c4a21
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/forms-support/form-required/FormInput.vue
@@ -0,0 +1,85 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :disabled="disabled" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <kinput :style="{ width: '230px' }"
+                :valid="valid"
+                :id="id"
+                :value="value"
+                :disabled="disabled"
+                :placeholder="placeholder"
+                @input="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+
+export default {
+    props: {
+        optional: Boolean,
+        disabled: Boolean,
+        placeholder: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      kinput: Input
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/inputs/switch/forms-support/form-required/FormSwitch.vue b/vue-options-api-demos/inputs/switch/forms-support/form-required/FormSwitch.vue
new file mode 100644
index 00000000..76da195a
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/forms-support/form-required/FormSwitch.vue
@@ -0,0 +1,100 @@
+<template>
+  <fieldwrapper>
+    <klabel
+      :class="'k-form-label'"
+      :editor-id="id"
+      :editor-valid="valid"
+      :disabled="disabled"
+      :optional="optional"
+    >
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <kswitch
+        :valid="valid"
+        :id="id"
+        :checked="value"
+        :disabled="disabled"
+        :required="required"
+        :placeholder="placeholder"
+        @change="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+
+      <span v-if="showValidationMessage && showHint">
+        <error>
+          {{ validationMessage }}
+        </error>
+        <hint>{{ hint }}</hint>
+      </span>
+      <error v-else-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else-if="showHint">{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Switch } from "@progress/kendo-vue-inputs";
+export default {
+  props: {
+    optional: Boolean,
+    disabled: Boolean,
+    placeholder: String,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    kswitch: Switch,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : "";
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : "";
+    },
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit("change", e);
+    },
+    handleBlur(e) {
+      this.$emit("blur", e);
+    },
+    handleFocus(e) {
+      this.$emit("focus", e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/switch/forms-support/form-required/main.js b/vue-options-api-demos/inputs/switch/forms-support/form-required/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/forms-support/form-required/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/switch/forms-support/form-required/main.vue b/vue-options-api-demos/inputs/switch/forms-support/form-required/main.vue
new file mode 100644
index 00000000..c82b3f5c
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/forms-support/form-required/main.vue
@@ -0,0 +1,23 @@
+<template>
+  <k-form @submit="handleSubmit">
+    <formcontent />
+  </k-form>
+</template>
+
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from "./FormContent.vue";
+
+export default {
+  components: {
+    "k-form": Form,
+    formcontent: FormContent,
+  },
+  methods: {
+    handleSubmit(dataItem) {
+      console.log(dataItem);
+      alert(JSON.stringify(dataItem, null, 2));
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/switch/forms-support/overview/FormContent.vue b/vue-options-api-demos/inputs/switch/forms-support/overview/FormContent.vue
new file mode 100644
index 00000000..0b0b19c8
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/forms-support/overview/FormContent.vue
@@ -0,0 +1,110 @@
+<template>
+  <form-element :style="{ maxWidth: '650px' }">
+    <fieldset class="k-form-fieldset">
+      <legend class="k-form-legend">Please fill in the fields:</legend>
+      <div class="mb-3">
+        <label for="firstName"> First name: </label>
+        <field
+          :class="'k-textbox'"
+          :name="'firstName'"
+          :component="'input'"
+          :label="'First name'"
+        />
+      </div>
+
+      <div class="mb-3">
+        <field
+          :name="'lastName'"
+          :component="'myTemplate'"
+          :label="'Last name'"
+        >
+          <template v-slot:myTemplate="{ props }">
+            <forminput
+              v-bind="props"
+              @change="props.onChange"
+              @blur="props.onBlur"
+              @focus="props.onFocus"
+            />
+          </template>
+        </field>
+      </div>
+      <div class="mb-3">
+        <field
+          :name="'email'"
+          :type="'email'"
+          :component="'myTemplate'"
+          :label="'Email'"
+          :validator="emailValidator"
+        >
+          <template v-slot:myTemplate="{ props }">
+            <forminput
+              v-bind="props"
+              @change="props.onChange"
+              @blur="props.onBlur"
+              @focus="props.onFocus"
+            />
+          </template>
+        </field>
+      </div>
+      <div class="mb-3">
+        <field
+          :id="'keepSigned'"
+          :name="'keepSigned'"
+          :component="'myTemplate'"
+          :hint="'Keep me signed in'"
+          :validator="requiredValidator"
+        >
+          <template v-slot:myTemplate="{ props }">
+            <formswitch
+              v-bind="props"
+              @change="props.onChange"
+              @blur="props.onBlur"
+              @focus="props.onFocus"
+            />
+          </template>
+        </field>
+      </div>
+    </fieldset>
+    <div class="k-form-buttons">
+      <kbutton type="submit" :disabled="!kendoForm.allowSubmit">
+        Submit
+      </kbutton>
+      <kbutton type="button" @click="clear">Clear</kbutton>
+    </div>
+  </form-element>
+</template>
+<script>
+import { Field, FormElement } from '@progress/kendo-vue-form';
+import { Button } from '@progress/kendo-vue-buttons';
+import FormInput from './FormInput.vue';
+import FormSwitch from './FormSwitch.vue';
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const emailValidator = (value) =>
+  emailRegex.test(value) ? '' : 'Please enter a valid email.';
+const requiredValidator = (value) => (value ? '' : 'This field is required.');
+
+export default {
+  components: {
+    field: Field,
+    'form-element': FormElement,
+    forminput: FormInput,
+    formswitch: FormSwitch,
+      'kbutton': Button
+  },
+  inject: {
+    kendoForm: { default: {} },
+  },
+  data: function () {
+    return {
+      emailValidator: emailValidator,
+      requiredValidator: requiredValidator,
+    };
+  },
+  methods: {
+    handleSubmit(dataItem) {
+      console.log('dataItem=', dataItem);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/switch/forms-support/overview/FormInput.vue b/vue-options-api-demos/inputs/switch/forms-support/overview/FormInput.vue
new file mode 100644
index 00000000..b69c4a21
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/forms-support/overview/FormInput.vue
@@ -0,0 +1,85 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :disabled="disabled" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <kinput :style="{ width: '230px' }"
+                :valid="valid"
+                :id="id"
+                :value="value"
+                :disabled="disabled"
+                :placeholder="placeholder"
+                @input="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+
+export default {
+    props: {
+        optional: Boolean,
+        disabled: Boolean,
+        placeholder: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      kinput: Input
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/inputs/switch/forms-support/overview/FormSwitch.vue b/vue-options-api-demos/inputs/switch/forms-support/overview/FormSwitch.vue
new file mode 100644
index 00000000..76da195a
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/forms-support/overview/FormSwitch.vue
@@ -0,0 +1,100 @@
+<template>
+  <fieldwrapper>
+    <klabel
+      :class="'k-form-label'"
+      :editor-id="id"
+      :editor-valid="valid"
+      :disabled="disabled"
+      :optional="optional"
+    >
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <kswitch
+        :valid="valid"
+        :id="id"
+        :checked="value"
+        :disabled="disabled"
+        :required="required"
+        :placeholder="placeholder"
+        @change="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+
+      <span v-if="showValidationMessage && showHint">
+        <error>
+          {{ validationMessage }}
+        </error>
+        <hint>{{ hint }}</hint>
+      </span>
+      <error v-else-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else-if="showHint">{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Switch } from "@progress/kendo-vue-inputs";
+export default {
+  props: {
+    optional: Boolean,
+    disabled: Boolean,
+    placeholder: String,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    kswitch: Switch,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : "";
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : "";
+    },
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit("change", e);
+    },
+    handleBlur(e) {
+      this.$emit("blur", e);
+    },
+    handleFocus(e) {
+      this.$emit("focus", e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/switch/forms-support/overview/main.js b/vue-options-api-demos/inputs/switch/forms-support/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/forms-support/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/switch/forms-support/overview/main.vue b/vue-options-api-demos/inputs/switch/forms-support/overview/main.vue
new file mode 100644
index 00000000..7361dbf5
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/forms-support/overview/main.vue
@@ -0,0 +1,22 @@
+<template>
+  <k-form @submit="handleSubmit">
+    <formcontent />
+  </k-form>
+</template>
+
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from "./FormContent.vue";
+
+export default {
+  components: {
+    "k-form": Form,
+    formcontent: FormContent,
+  },
+  methods: {
+    handleSubmit(dataItem) {
+      alert(JSON.stringify(dataItem, null, 2));
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/switch/keyboard/main.js b/vue-options-api-demos/inputs/switch/keyboard/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/keyboard/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/switch/keyboard/main.vue b/vue-options-api-demos/inputs/switch/keyboard/main.vue
new file mode 100644
index 00000000..c47beba6
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/keyboard/main.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <k-switch ref="switch" />
+  </div>
+</template>
+
+<script>
+import { Switch } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    "k-switch": Switch,
+  },
+  mounted() {
+    this.$refs.switch.focus();
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/switch/labels/main.js b/vue-options-api-demos/inputs/switch/labels/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/labels/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/switch/labels/main.vue b/vue-options-api-demos/inputs/switch/labels/main.vue
new file mode 100644
index 00000000..eb85e646
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/labels/main.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <k-switch :on-label="'I'" :off-label="'O'" />
+  </div>
+</template>
+
+<script>
+import { Switch } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    "k-switch": Switch,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/switch/overview/main.js b/vue-options-api-demos/inputs/switch/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/switch/overview/main.vue b/vue-options-api-demos/inputs/switch/overview/main.vue
new file mode 100644
index 00000000..c743a127
--- /dev/null
+++ b/vue-options-api-demos/inputs/switch/overview/main.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <k-switch />
+  </div>
+</template>
+
+<script>
+import { Switch } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    "k-switch": Switch,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/textarea/adornments/clear-button/main.js b/vue-options-api-demos/inputs/textarea/adornments/clear-button/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/adornments/clear-button/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textarea/adornments/clear-button/main.vue b/vue-options-api-demos/inputs/textarea/adornments/clear-button/main.vue
new file mode 100644
index 00000000..79544c2f
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/adornments/clear-button/main.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <TextArea
+      :style="{ width: '230px' }"
+      v-model="value"
+      :show-clear-button="true"
+      :rows="4"
+    />
+  </div>
+</template>
+<script>
+import { TextArea } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    TextArea,
+  },
+  data() {
+    return {
+      value: 'Clear me!',
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/textarea/adornments/disabled/InputIcons.vue b/vue-options-api-demos/inputs/textarea/adornments/disabled/InputIcons.vue
new file mode 100644
index 00000000..f4854194
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/adornments/disabled/InputIcons.vue
@@ -0,0 +1,21 @@
+<template>
+    <SvgIcon :icon="menuIcon" />
+    <span class="k-flex-1"></span>
+    <SvgIcon :icon="gearIcon" />
+  </template>
+  <script>
+  import { SvgIcon } from "@progress/kendo-vue-common";
+  import { menuIcon, gearIcon } from "@progress/kendo-svg-icons";
+  
+  export default {
+    components: {
+      SvgIcon,
+    },
+    data() {
+      return {
+        menuIcon,
+        gearIcon,
+      };
+    },
+  };
+  </script>
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/textarea/adornments/disabled/main.js b/vue-options-api-demos/inputs/textarea/adornments/disabled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/adornments/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textarea/adornments/disabled/main.vue b/vue-options-api-demos/inputs/textarea/adornments/disabled/main.vue
new file mode 100644
index 00000000..38c95b93
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/adornments/disabled/main.vue
@@ -0,0 +1,40 @@
+<template>
+    <div>
+      <TextArea
+        :style="{ width: '230px' }"
+        :disabled="true"
+        :showValidationIcon="true"
+        :inputPrefix="'prefix'"
+        :inputSuffix="'suffix'"
+        :showClearButton="true"
+        :rows="4"
+      >
+        <template v-slot:prefix>
+          <InputIcons />
+        </template>
+        <template v-slot:suffix>
+          <SvgIcon :icon="envelopeIcon" />
+        </template>
+      </TextArea>
+    </div>
+  </template>
+  <script>
+  import { TextArea } from "@progress/kendo-vue-inputs";
+  import { SvgIcon } from "@progress/kendo-vue-common";
+  import { envelopeIcon } from "@progress/kendo-svg-icons";
+  import InputIcons from "./InputIcons.vue";
+  
+  export default {
+    components: {
+      TextArea,
+      InputIcons,
+      SvgIcon,
+    },
+    data() {
+      return {
+        envelopeIcon,
+      };
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/textarea/adornments/icon-name/main.js b/vue-options-api-demos/inputs/textarea/adornments/icon-name/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/adornments/icon-name/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textarea/adornments/icon-name/main.vue b/vue-options-api-demos/inputs/textarea/adornments/icon-name/main.vue
new file mode 100644
index 00000000..3866e249
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/adornments/icon-name/main.vue
@@ -0,0 +1,31 @@
+<template>
+    <div>
+      <TextArea
+        :style="{ width: '230px' }"
+        :input-prefix="'textAreaIcon'"
+        :rows="4"
+      >
+        <template v-slot:textAreaIcon="{ props }">
+          <SvgIcon :icon="gearIcon" />
+        </template>
+      </TextArea>
+    </div>
+  </template>
+  <script>
+  import { TextArea } from "@progress/kendo-vue-inputs";
+  import { SvgIcon } from "@progress/kendo-vue-common";
+  import { gearIcon } from "@progress/kendo-svg-icons";
+  
+  export default {
+    components: {
+      TextArea,
+      SvgIcon,
+    },
+    data() {
+      return {
+        gearIcon,
+      };
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/textarea/adornments/loading-icon/main.js b/vue-options-api-demos/inputs/textarea/adornments/loading-icon/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/adornments/loading-icon/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textarea/adornments/loading-icon/main.vue b/vue-options-api-demos/inputs/textarea/adornments/loading-icon/main.vue
new file mode 100644
index 00000000..cba7bc3c
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/adornments/loading-icon/main.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <TextArea :style="{ width: '230px' }" :show-loading-icon="true" :rows="4" />
+    </div>
+</template>
+<script>
+import { TextArea } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        TextArea
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/textarea/adornments/prefix/InputIcons.vue b/vue-options-api-demos/inputs/textarea/adornments/prefix/InputIcons.vue
new file mode 100644
index 00000000..da2d068c
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/adornments/prefix/InputIcons.vue
@@ -0,0 +1,23 @@
+<template>
+  <SvgIcon :icon="menuIcon" />
+  <SvgIcon :icon="photosIcon" />
+  <span class="k-flex-1"></span>
+  <SvgIcon :icon="gearIcon" />
+</template>
+<script>
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { menuIcon, photosIcon, gearIcon } from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    SvgIcon,
+  },
+  data() {
+    return {
+      menuIcon,
+      photosIcon,
+      gearIcon,
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/textarea/adornments/prefix/main.js b/vue-options-api-demos/inputs/textarea/adornments/prefix/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/adornments/prefix/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textarea/adornments/prefix/main.vue b/vue-options-api-demos/inputs/textarea/adornments/prefix/main.vue
new file mode 100644
index 00000000..c8241a81
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/adornments/prefix/main.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <div class="example-config">
+      <RadioGroup v-model="value" :data-items="tasks" :layout="'horizontal'" />
+    </div>
+    <TextArea
+      :style="{ width: '230px' }"
+      :flow="value"
+      :inputPrefix="'prefix'"
+      :rows="5"
+      :placeholder="'Type some text...'"
+    >
+      <template v-slot:prefix>
+        <InputIcons />
+      </template>
+    </TextArea>
+  </div>
+</template>
+<script>
+import { TextArea, RadioGroup } from '@progress/kendo-vue-inputs';
+import InputIcons from './InputIcons.vue';
+
+export default {
+  components: {
+    TextArea,
+    InputIcons,
+    RadioGroup,
+  },
+  data() {
+    return {
+      value: 'vertical',
+      tasks: [
+        {
+          label: 'Vertical',
+          value: 'vertical',
+        },
+        {
+          label: 'Horizontal',
+          value: 'horizontal',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/textarea/adornments/separator/main.js b/vue-options-api-demos/inputs/textarea/adornments/separator/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/adornments/separator/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textarea/adornments/separator/main.vue b/vue-options-api-demos/inputs/textarea/adornments/separator/main.vue
new file mode 100644
index 00000000..49c0db0f
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/adornments/separator/main.vue
@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <TextArea :style="{ width: '230px' }" :inputPrefix="'prefix'" :rows="4">
+            <template v-slot:prefix>
+                <div>
+                    &nbsp; &nbsp; &nbsp;
+                    <InputSeparator />
+                </div>
+            </template>
+        </TextArea>
+    </div>
+</template>
+<script>
+import { TextArea, InputSeparator } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        TextArea, InputSeparator
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/textarea/adornments/suffix/InputIcons.vue b/vue-options-api-demos/inputs/textarea/adornments/suffix/InputIcons.vue
new file mode 100644
index 00000000..da2d068c
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/adornments/suffix/InputIcons.vue
@@ -0,0 +1,23 @@
+<template>
+  <SvgIcon :icon="menuIcon" />
+  <SvgIcon :icon="photosIcon" />
+  <span class="k-flex-1"></span>
+  <SvgIcon :icon="gearIcon" />
+</template>
+<script>
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { menuIcon, photosIcon, gearIcon } from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    SvgIcon,
+  },
+  data() {
+    return {
+      menuIcon,
+      photosIcon,
+      gearIcon,
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/textarea/adornments/suffix/main.js b/vue-options-api-demos/inputs/textarea/adornments/suffix/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/adornments/suffix/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textarea/adornments/suffix/main.vue b/vue-options-api-demos/inputs/textarea/adornments/suffix/main.vue
new file mode 100644
index 00000000..8cee2e6c
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/adornments/suffix/main.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <div class="example-config">
+      <RadioGroup v-model="value" :data-items="tasks" :layout="'horizontal'" />
+    </div>
+    <TextArea
+      :style="{ width: '230px' }"
+      :flow="value"
+      :inputSuffix="'prefix'"
+      :rows="5"
+      :resizable="'none'"
+      :placeholder="'Type some text...'"
+    >
+      <template v-slot:prefix>
+        <InputIcons />
+      </template>
+    </TextArea>
+  </div>
+</template>
+<script>
+import { TextArea, RadioGroup } from '@progress/kendo-vue-inputs';
+import InputIcons from './InputIcons.vue';
+
+export default {
+  components: {
+    TextArea,
+    InputIcons,
+    RadioGroup,
+  },
+  data() {
+    return {
+      value: 'vertical',
+      tasks: [
+        {
+          label: 'Vertical',
+          value: 'vertical',
+        },
+        {
+          label: 'Horizontal',
+          value: 'horizontal',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/textarea/adornments/validation-icon/main.js b/vue-options-api-demos/inputs/textarea/adornments/validation-icon/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/adornments/validation-icon/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textarea/adornments/validation-icon/main.vue b/vue-options-api-demos/inputs/textarea/adornments/validation-icon/main.vue
new file mode 100644
index 00000000..33f28c36
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/adornments/validation-icon/main.vue
@@ -0,0 +1,22 @@
+<template>
+    <div>
+        Valid Input Icon:
+        <br />
+        <TextArea :style="{ width: '230px' }" :show-validation-icon="true" :input-class="'k-valid'" :rows="4" />
+        <br />
+        <br />
+        Invalid Input Icon:
+        <br />
+        <TextArea :style="{ width: '230px' }" :show-validation-icon="true" :valid="false" :rows="4" />
+    </div>
+</template>
+<script>
+import { TextArea } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        TextArea
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/textarea/appearance/configurator/TextAreaStyleConfigurator.vue b/vue-options-api-demos/inputs/textarea/appearance/configurator/TextAreaStyleConfigurator.vue
new file mode 100644
index 00000000..c1b36044
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/appearance/configurator/TextAreaStyleConfigurator.vue
@@ -0,0 +1,105 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Fill Mode
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="fillModes"
+              :value="fillMode"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleFillModeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+    fillMode: String,
+    rounded: String,
+  },
+  emits: [
+    "sizechange",
+    "fillmodechange",
+    "roundedchange",
+  ],
+  data() {
+    return {
+      sizes: ["small", "medium", "large"],
+      fillModes: ["solid", "outline", "flat"],
+      roundedOptions: ["small", "medium", "large", "full"],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleFillModeChange(event) {
+      this.$emit("fillmodechange", event);
+    },
+    handleRoundedChange(event) {
+      this.$emit("roundedchange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/textarea/appearance/configurator/main.js b/vue-options-api-demos/inputs/textarea/appearance/configurator/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/appearance/configurator/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textarea/appearance/configurator/main.vue b/vue-options-api-demos/inputs/textarea/appearance/configurator/main.vue
new file mode 100644
index 00000000..3dc29349
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/appearance/configurator/main.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <TextAreaStyleConfigurator
+      :size="size"
+      @sizechange="setSize"
+      :fill-mode="fillMode"
+      @fillmodechange="setFillMode"
+      :rounded="rounded"
+      @roundedchange="setRounded"
+    />
+    <TextArea
+      :size="size"
+      :fillMode="fillMode"
+      :rounded="rounded"
+      :style="{ width: '200px' }"
+    />
+  </div>
+</template>
+<script>
+import TextAreaStyleConfigurator from "./TextAreaStyleConfigurator.vue";
+import { TextArea } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    TextAreaStyleConfigurator,
+    TextArea,
+  },
+  data() {
+    return {
+      size: "medium",
+      rounded: "medium",
+      fillMode: "solid",
+    };
+  },
+  methods: {
+    setRounded(event) {
+      this.rounded = event.value;
+    },
+    setSize(event) {
+      this.size = event.value;
+    },
+    setFillMode(event) {
+      this.fillMode = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/textarea/appearance/fill-mode/main.js b/vue-options-api-demos/inputs/textarea/appearance/fill-mode/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/appearance/fill-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textarea/appearance/fill-mode/main.vue b/vue-options-api-demos/inputs/textarea/appearance/fill-mode/main.vue
new file mode 100644
index 00000000..40346ac6
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/appearance/fill-mode/main.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="example-config">
+    <div class="demo">
+      <span class="wrapper">
+        <span>Flat: </span>
+        <ktextarea :fill-mode="'flat'" :style="{ width: '170px' }" />
+      </span>
+      <span class="wrapper">
+        <span>Solid: </span>
+        <ktextarea :fill-mode="'solid'" :style="{ width: '170px' }" />
+      </span>
+      <span class="wrapper">
+        <span>Outline: </span>
+        <ktextarea :fill-mode="'outline'" :style="{ width: '170px' }" />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Custom fill mode: </span>
+        <ktextarea
+          :fill-mode="null"
+          :class="'custom-textarea'"
+          :style="{ width: '170px' }"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { TextArea } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    ktextarea: TextArea,
+  },
+};
+</script>
+
+<style>
+.custom-textarea {
+  background-color: #00aead;
+  border: 2px solid #bfd843;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/inputs/textarea/appearance/rounded/main.js b/vue-options-api-demos/inputs/textarea/appearance/rounded/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/appearance/rounded/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textarea/appearance/rounded/main.vue b/vue-options-api-demos/inputs/textarea/appearance/rounded/main.vue
new file mode 100644
index 00000000..35e432fc
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/appearance/rounded/main.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Small roundness: </span>
+        <ktextarea :rounded="'small'" :style="{ width: '170px' }" />
+      </span>
+      <span class="wrapper">
+        <span>Medium roundness: </span>
+        <ktextarea :rounded="'medium'" :style="{ width: '170px' }" />
+      </span>
+      <span class="wrapper">
+        <span>Large roundness: </span>
+        <ktextarea :rounded="'large'" :style="{ width: '170px' }" />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Full roundness: </span>
+        <ktextarea :rounded="'full'" :style="{ width: '170px' }" />
+      </span>
+      <span class="wrapper">
+        <span>Custom roundness: </span>
+        <ktextarea
+          :rounded="null"
+          :class="'custom-textarea'"
+          :style="{ width: '170px' }"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { TextArea } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    ktextarea: TextArea,
+  },
+};
+</script>
+
+<style>
+.custom-textarea {
+  border-bottom-right-radius: 15px;
+  border-top-left-radius: 15px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/inputs/textarea/appearance/size/main.js b/vue-options-api-demos/inputs/textarea/appearance/size/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/appearance/size/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textarea/appearance/size/main.vue b/vue-options-api-demos/inputs/textarea/appearance/size/main.vue
new file mode 100644
index 00000000..c777ce98
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/appearance/size/main.vue
@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Small size: </span>
+        <ktextarea :size="'small'" :style="{ width: '170px' }" />
+      </span>
+      <span class="wrapper">
+        <span>Medium size: </span>
+        <ktextarea :size="'medium'" :style="{ width: '170px' }" />
+      </span>
+      <span class="wrapper">
+        <span>Large size: </span>
+        <ktextarea :size="'large'" :style="{ width: '170px' }" />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Custom size: </span>
+        <ktextarea
+          :size="null"
+          :class="'custom-textarea'"
+          :style="{ width: '170px' }"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { TextArea } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    ktextarea: TextArea,
+  },
+};
+</script>
+
+<style>
+.custom-textarea input {
+  line-height: 2;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/inputs/textarea/controlled/main.js b/vue-options-api-demos/inputs/textarea/controlled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/controlled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textarea/controlled/main.vue b/vue-options-api-demos/inputs/textarea/controlled/main.vue
new file mode 100644
index 00000000..5ff104ef
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/controlled/main.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <k-textarea  :style="{ width: '260px' }" :value="value" @change="handleChange" :rows="2" />
+  </div>
+</template>
+
+<script>
+import { TextArea } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    "k-textarea": TextArea,
+  },
+  data() {
+    return {
+      value: "",
+    };
+  },
+  methods: {
+    handleChange(e) {
+      this.value = e.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/textarea/counter/main.js b/vue-options-api-demos/inputs/textarea/counter/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/counter/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textarea/counter/main.vue b/vue-options-api-demos/inputs/textarea/counter/main.vue
new file mode 100644
index 00000000..4a0f7f3f
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/counter/main.vue
@@ -0,0 +1,39 @@
+<template>
+  <div
+    :style="{
+      position: 'absolute',
+    }"
+  >
+    <k-textarea
+       :style="{ width: '260px' }"
+      :maxlength="max"
+      :value="value"
+      @input="handleChange"
+      :rows="4"
+    />
+    <hint :direction="'end'"> {{ value.length }} / {{ max }} </hint>
+  </div>
+</template>
+
+<script>
+import { TextArea } from "@progress/kendo-vue-inputs";
+import { Hint } from "@progress/kendo-vue-labels";
+
+export default {
+  components: {
+    "k-textarea": TextArea,
+    hint: Hint,
+  },
+  data() {
+    return {
+      max: 20,
+      value: "",
+    };
+  },
+  methods: {
+    handleChange(e) {
+      this.value = e.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/textarea/default/main.js b/vue-options-api-demos/inputs/textarea/default/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/default/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textarea/default/main.vue b/vue-options-api-demos/inputs/textarea/default/main.vue
new file mode 100644
index 00000000..6602e258
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/default/main.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <k-textarea  :style="{ width: '260px' }" :default-value="'Textarea default value'" :rows="4" />
+  </div>
+</template>
+
+<script>
+import { TextArea } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    "k-textarea": TextArea,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/textarea/disabled/main.js b/vue-options-api-demos/inputs/textarea/disabled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textarea/disabled/main.vue b/vue-options-api-demos/inputs/textarea/disabled/main.vue
new file mode 100644
index 00000000..bd2534a8
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/disabled/main.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <k-textarea  :style="{ width: '260px' }" :disabled="true" placeholder="'Disabled textarea'" :rows="4" />
+  </div>
+</template>
+
+<script>
+import { TextArea } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    "k-textarea": TextArea,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/textarea/events/Logger.vue b/vue-options-api-demos/inputs/textarea/events/Logger.vue
new file mode 100644
index 00000000..aa04a80b
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/events/Logger.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="example-config">
+    <h5>{{ title }}</h5>
+    <ul class="event-log">
+      <li v-for="(event, idx) in events" :key="idx">{{ event }}</li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    events: Array,
+    title: String,
+  },
+};
+</script>
+
+<style scoped>
+.example-config {
+  margin: 0 0 20px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+  margin: 0;
+  padding: 0;
+  max-height: 100px;
+  overflow-y: auto;
+  list-style-type: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: white;
+}
+.event-log li {
+  margin: 0;
+  padding: 0.3em;
+  line-height: 1.2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+  margin-bottom: -1px;
+}
+</style>
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/textarea/events/main.js b/vue-options-api-demos/inputs/textarea/events/main.js
new file mode 100644
index 00000000..1f1c6c86
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/events/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
+
diff --git a/vue-options-api-demos/inputs/textarea/events/main.vue b/vue-options-api-demos/inputs/textarea/events/main.vue
new file mode 100644
index 00000000..fe259dd8
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/events/main.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <h6>Enter text:</h6>
+    <k-textarea
+      @change="onChange"
+      @blur="onBlur"
+      @focus="onFocus"
+      @input="onInput"
+      :rows="5"
+      :style="{ 'background-color': 'red', width: '100%' }"
+    />
+    <br />
+    <br />
+    <Logger :title="'Events list'" :events="eventsList" />
+  </div>
+</template>
+<script>
+import { TextArea } from '@progress/kendo-vue-inputs';
+import Logger from './Logger.vue';
+
+export default {
+  components: {
+    Logger,
+    'k-textarea': TextArea,
+  },
+  computed: {
+    eventsList() {
+      return this.events;
+    },
+  },
+  data: function () {
+    return {
+      events: [],
+    };
+  },
+  methods: {
+    onChange(e) {
+      this.events.unshift(
+        'Change event triggered. The value of the TextArea is: ' + e.value
+      );
+    },
+    onBlur(e) {
+      this.events.unshift('Blur event triggered.');
+    },
+    onFocus(e) {
+      this.events.unshift('Focus event triggered.');
+    },
+    onInput(e) {
+      this.events.unshift(
+        'Input event triggered.  The value of the TextArea is: ' + e.value
+      );
+    },
+  },
+};
+</script>
+
+<style>
+.k-textarea {
+  width: 100%;
+}
+</style>
diff --git a/vue-options-api-demos/inputs/textarea/forms/FormContent.vue b/vue-options-api-demos/inputs/textarea/forms/FormContent.vue
new file mode 100644
index 00000000..556d866b
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/forms/FormContent.vue
@@ -0,0 +1,117 @@
+<template>
+  <form-element
+    :style="{
+      width: '290px',
+      margin: '0px auto',
+    }"
+  >
+    <legend class="k-form-legend">USER DETAILS</legend>
+    <fieldset class="k-form-fieldset">
+      <field
+        :id="'firstName'"
+        :name="'firstName'"
+        :label="'First Name:'"
+        :component="'myTemplate'"
+        :validator="firstNameValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></forminput>
+        </template>
+      </field>
+      <field
+        :id="'lastName'"
+        :name="'lastName'"
+        :label="'Last Name:'"
+        :validator="lastNameValidator"
+        :component="'myTemplate'"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></forminput>
+        </template>
+      </field>
+      <field
+        :id="'address'"
+        :name="'address'"
+        :label="'Address:'"
+        :component="'myTemplate'"
+        :validator="textAreaValidator"
+        :hint="'Hint: Enter your personal address'"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <formtextarea
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></formtextarea>
+        </template>
+      </field>
+      <div class="k-form-buttons">
+        <kbutton
+          :theme-color="'primary'"
+          :type="'submit'"
+          :disabled="!kendoForm.allowSubmit"
+        >
+          Submit
+        </kbutton>
+        <kbutton @click="clear"> Clear </kbutton>
+      </div>
+    </fieldset>
+  </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import FormTextArea from "./FormTextArea.vue";
+import FormInput from "./FormInput.vue";
+import { Button } from "@progress/kendo-vue-buttons";
+
+const firstNameValidator = (value) =>
+  !value
+    ? "First Name is required"
+    : value.length < 7
+    ? "First Name should be at least 7 characters long."
+    : "";
+
+const lastNameValidator = (value) =>
+  !value
+    ? "Last Name is required"
+    : value.length < 7
+    ? "Last Name should be at least 7 characters long."
+    : "";
+const textAreaValidator = (value) => (!value ? "Address is required" : "");
+
+export default {
+  components: {
+    field: Field,
+    "form-element": FormElement,
+    formtextarea: FormTextArea,
+    forminput: FormInput,
+    kbutton: Button,
+  },
+  inject: {
+    kendoForm: { default: {} },
+  },
+  data() {
+    return {
+      firstNameValidator: firstNameValidator,
+      lastNameValidator: lastNameValidator,
+      textAreaValidator: textAreaValidator,
+    };
+  },
+  methods: {
+    clear() {
+      this.kendoForm.onFormReset();
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/textarea/forms/FormInput.vue b/vue-options-api-demos/inputs/textarea/forms/FormInput.vue
new file mode 100644
index 00000000..d9caa57e
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/forms/FormInput.vue
@@ -0,0 +1,88 @@
+<template>
+  <fieldwrapper>
+    <klabel
+      :class="'k-form-label'"
+      :editor-id="id"
+      :editor-valid="valid"
+      :disabled="disabled"
+      :optional="optional"
+    >
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <kinput :style="{ width: '230px' }"
+        :valid="valid"
+        :id="id"
+        :value="value"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        @input="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { Input } from '@progress/kendo-vue-inputs';
+export default {
+  props: {
+    optional: Boolean,
+    disabled: Boolean,
+    placeholder: String,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    kinput: Input,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/textarea/forms/FormTextArea.vue b/vue-options-api-demos/inputs/textarea/forms/FormTextArea.vue
new file mode 100644
index 00000000..014b7e68
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/forms/FormTextArea.vue
@@ -0,0 +1,84 @@
+<template>
+  <fieldwrapper>
+    <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <span class="k-textarea">
+        <ktextarea
+          :valid="valid"
+          :value="value"
+          :id="id"
+          :maxlength="max"
+          @input="handleChange"
+          @blur="handleBlur"
+          @focus="handleFocus"
+        ></ktextarea>
+      </span>
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <div v-else style="display: flex; justify-content: space-between">
+        <hint>{{ hint }}</hint>
+      </div>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { TextArea } from '@progress/kendo-vue-inputs';
+
+export default {
+  props: {
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    max: Number,
+    valid: Boolean,
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  components: {
+    ktextarea: TextArea,
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/textarea/forms/main.js b/vue-options-api-demos/inputs/textarea/forms/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/forms/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textarea/forms/main.vue b/vue-options-api-demos/inputs/textarea/forms/main.vue
new file mode 100644
index 00000000..ee5d7f4f
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/forms/main.vue
@@ -0,0 +1,24 @@
+<template>
+    <k-form
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
+
diff --git a/vue-options-api-demos/inputs/textarea/input-mode/main.js b/vue-options-api-demos/inputs/textarea/input-mode/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/input-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textarea/input-mode/main.vue b/vue-options-api-demos/inputs/textarea/input-mode/main.vue
new file mode 100644
index 00000000..e962663f
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/input-mode/main.vue
@@ -0,0 +1,77 @@
+<template>
+    <div class="k-d-grid k-grid-cols-sm-1 k-grid-cols-md-2 k-gap-4 k-max-w-fit">
+        <div class="k-col-span-1">
+            <div>
+                inputmode=text <i>(default)</i>
+            </div>
+            <ktextarea
+                :placeholder="'Type your message here...'"
+                :input-attributes="{ inputMode: 'text' }"
+                :style="{ width: '300px' }"
+            />
+        </div>
+        <div class="k-col-span-1">
+            <div>inputmode=email</div>
+            <ktextarea
+                :placeholder="'Type your email here...'"
+                :input-attributes="{ inputMode: 'email' }"
+                :input-prefix="'prefix'"
+                :style="{ width: '300px' }"
+            >
+                <template v-slot:prefix>
+                    <svgicon :icon="envelopeIcon" />
+                </template>
+            </ktextarea>
+        </div>
+        <div class="k-col-span-1">
+            <div>inputmode=search</div>
+            <ktextarea
+                :placeholder="'Search here...'"
+                :input-attributes="{ inputMode: 'search' }"
+                :input-suffix="'suffix'"
+                :style="{ width: '300px' }"
+            >
+                <template v-slot:suffix>
+                    <svgicon :icon="searchIcon" />
+                </template>
+            </ktextarea>
+        </div>
+        <div class="k-col-span-1">
+            <div>inputmode=url</div>
+            <ktextarea
+                :placeholder="'Type here...'"
+                :input-attributes="{ inputMode: 'url' }"
+                :input-prefix="'prefix'"
+                :style="{ width: '300px' }"
+            >
+                <template v-slot:prefix>
+                    <kbutton :disabled="true" :fill-mode="'clear'">
+                        https://
+                    </kbutton>
+                </template>
+            </ktextarea>
+        </div>
+    </div>
+</template>
+<script>
+import { TextArea } from '@progress/kendo-vue-inputs';
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { bookIcon, envelopeIcon, searchIcon } from "@progress/kendo-svg-icons";
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'ktextarea': TextArea,
+        'svgicon': SvgIcon,
+        'kbutton': KButton
+    },
+    data() {
+        return {
+            bookIcon,
+            envelopeIcon,
+            searchIcon
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/textarea/overview/FormContent.vue b/vue-options-api-demos/inputs/textarea/overview/FormContent.vue
new file mode 100644
index 00000000..b4aa8d6e
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/overview/FormContent.vue
@@ -0,0 +1,84 @@
+<template>
+  <form-element :style="{ maxWidth: '650px' }">
+    <fieldset class="k-form-fieldset">
+      <div class="col-xs-12 col-md-6 example-col">
+        <field
+          :id="'sendInvitation'"
+          :name="'sendInvitation'"
+          :label="'Send Invitation:'"
+          :component="'myTemplate'"
+          :max="200"
+          :validator="addressValidator"
+          :hint="'Hint: Enter your text here'"
+        >
+          <template v-slot:myTemplate="{ props }">
+            <formtextarea
+              v-bind="props"
+              @change="props.onChange"
+              @blur="props.onBlur"
+              @focus="props.onFocus"
+            ></formtextarea>
+          </template>
+        </field>
+      </div>
+      <div class="col-xs-12 col-md-6 example-col">
+        <field
+          :id="'invitationDetails'"
+          :name="'invitationDetails'"
+          :label="'Details:'"
+          :component="'myTemplate'"
+          :max="200"
+          :hint="'Hint: Enter Invitation details here'"
+          :icon-name="gearIcon"
+        >
+          <template v-slot:myTemplate="{ props }">
+            <formtextarea
+              v-bind="props"
+              @change="props.onChange"
+              @blur="props.onBlur"
+              @focus="props.onFocus"
+            ></formtextarea>
+          </template>
+        </field>
+      </div>
+      <div class="k-form-buttons">
+        <kbutton
+          :theme-color="'primary'"
+          :type="'submit'"
+          :disabled="!kendoForm.allowSubmit"
+        >
+          Submit
+        </kbutton>
+        <kbutton @click="clear"> Clear </kbutton>
+      </div>
+    </fieldset>
+  </form-element>
+</template>
+<script>
+import { Field, FormElement } from "@progress/kendo-vue-form";
+import { gearIcon } from "@progress/kendo-svg-icons";
+import FormTextArea from "./FormTextArea.vue";
+import { Button } from "@progress/kendo-vue-buttons";
+
+export default {
+  components: {
+    field: Field,
+    "form-element": FormElement,
+    formtextarea: FormTextArea,
+    kbutton: Button,
+  },
+  inject: {
+    kendoForm: { default: {} },
+  },
+  data() {
+    return {
+      gearIcon,
+    };
+  },
+  methods: {
+    clear() {
+      this.kendoForm.onFormReset();
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/textarea/overview/FormTextArea.vue b/vue-options-api-demos/inputs/textarea/overview/FormTextArea.vue
new file mode 100644
index 00000000..6c7e34bf
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/overview/FormTextArea.vue
@@ -0,0 +1,94 @@
+<template>
+  <fieldwrapper :style="{ width: '300px' }">
+    <klabel :editor-id="id" :editor-valid="valid">
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <span class="k-textarea">
+        <ktextarea
+          :valid="valid"
+          :value="value"
+          :id="id"
+          :maxlength="max"
+          @input="handleChange"
+          @blur="handleBlur"
+          @focus="handleFocus"
+          :input-prefix="'textAreaIcon'"
+        >
+          <template v-slot:textAreaIcon>
+            <SvgIcon :icon="iconName" />
+          </template>
+        </ktextarea>
+      </span>
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+        <hint :direction="'end'"> {{ value.length }} / {{ max }} </hint>
+      </error>
+      <div v-else style="display: flex; justify-content: space-between">
+        <hint>{{ hint }}</hint>
+        <hint :direction="'end'"> {{ value.length }} / {{ max }} </hint>
+      </div>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { TextArea } from "@progress/kendo-vue-inputs";
+import { SvgIcon } from "@progress/kendo-vue-common";
+
+export default {
+  props: {
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    max: Number,
+    valid: Boolean,
+    value: {
+      type: String,
+      default: "",
+    },
+    iconName: String,
+  },
+  components: {
+    ktextarea: TextArea,
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    SvgIcon,
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : "";
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : "";
+    },
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit("change", e);
+    },
+    handleBlur(e) {
+      this.$emit("blur", e);
+    },
+    handleFocus(e) {
+      this.$emit("focus", e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/textarea/overview/main.js b/vue-options-api-demos/inputs/textarea/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textarea/overview/main.vue b/vue-options-api-demos/inputs/textarea/overview/main.vue
new file mode 100644
index 00000000..ee5d7f4f
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/overview/main.vue
@@ -0,0 +1,24 @@
+<template>
+    <k-form
+      @submit="handleSubmit">
+      <formcontent />
+   </k-form>
+</template>
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+    components: {
+      'k-form': Form,
+      'formcontent': FormContent
+    },
+    methods: {
+      handleSubmit (dataItem) {
+         alert(JSON.stringify(dataItem, null, 2));
+      }
+    }
+};
+
+</script>
+
diff --git a/vue-options-api-demos/inputs/textarea/sizing/auto-sizing/main.js b/vue-options-api-demos/inputs/textarea/sizing/auto-sizing/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/sizing/auto-sizing/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textarea/sizing/auto-sizing/main.vue b/vue-options-api-demos/inputs/textarea/sizing/auto-sizing/main.vue
new file mode 100644
index 00000000..c2e74d26
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/sizing/auto-sizing/main.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <k-textarea  :style="{ width: '260px' }" :auto-size="true" :rows="2" />
+  </div>
+</template>
+
+<script>
+import { TextArea } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    "k-textarea": TextArea,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/textarea/sizing/initial/main.js b/vue-options-api-demos/inputs/textarea/sizing/initial/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/sizing/initial/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textarea/sizing/initial/main.vue b/vue-options-api-demos/inputs/textarea/sizing/initial/main.vue
new file mode 100644
index 00000000..7b7f9954
--- /dev/null
+++ b/vue-options-api-demos/inputs/textarea/sizing/initial/main.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <k-textarea  :style="{ width: '260px' }" :rows="5" />
+  </div>
+</template>
+
+<script>
+import { TextArea } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    "k-textarea": TextArea,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/textbox/adornments/main.js b/vue-options-api-demos/inputs/textbox/adornments/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/adornments/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textbox/adornments/main.vue b/vue-options-api-demos/inputs/textbox/adornments/main.vue
new file mode 100644
index 00000000..aa7ab570
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/adornments/main.vue
@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <div>Message:</div>
+    <KTextBox
+      :value="value"
+      :placeholder="'Type message'"
+      :input-prefix="'prefix'"
+      :input-suffix="'suffix'"
+      :style="{
+        width: '300px',
+      }"
+      @input="handleInput"
+    >
+      <template v-slot:prefix>
+        <SvgIcon :icon="envelopeIcon" />
+      </template>
+      <template v-slot:suffix>
+        <KButton
+          :disabled="value === EMPTY_VALUE"
+          :theme-color="'primary'"
+          :fill-mode="'flat'"
+          :rounded="null"
+        >
+          Send
+        </KButton>
+      </template>
+    </KTextBox>
+  </div>
+</template>
+  <script>
+import { TextBox as KTextBox } from "@progress/kendo-vue-inputs";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { envelopeIcon } from "@progress/kendo-svg-icons";
+import { Button as KButton } from "@progress/kendo-vue-buttons";
+
+export default {
+  components: {
+    KTextBox,
+    SvgIcon,
+    KButton,
+  },
+  data() {
+    return {
+      envelopeIcon,
+      value: "",
+      EMPTY_VALUE: "",
+    };
+  },
+  methods: {
+    handleInput(event) {
+      this.value = event.target.value;
+    },
+  },
+};
+</script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/textbox/appearance/configurator/InputStyleConfigurator.vue b/vue-options-api-demos/inputs/textbox/appearance/configurator/InputStyleConfigurator.vue
new file mode 100644
index 00000000..c1b36044
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/appearance/configurator/InputStyleConfigurator.vue
@@ -0,0 +1,105 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Fill Mode
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="fillModes"
+              :value="fillMode"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleFillModeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+      <span class="k-form-field">
+        <k-label>
+          Border Radius
+          <div class="k-form-field-wrap">
+             <dropdownlist
+              :data-items="roundedOptions"
+              :value="rounded"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleRoundedChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    "k-label": Label,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+    fillMode: String,
+    rounded: String,
+  },
+  emits: [
+    "sizechange",
+    "fillmodechange",
+    "roundedchange",
+  ],
+  data() {
+    return {
+      sizes: ["small", "medium", "large"],
+      fillModes: ["solid", "outline", "flat"],
+      roundedOptions: ["small", "medium", "large", "full"],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit("sizechange", event);
+    },
+    handleFillModeChange(event) {
+      this.$emit("fillmodechange", event);
+    },
+    handleRoundedChange(event) {
+      this.$emit("roundedchange", event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/textbox/appearance/configurator/main.js b/vue-options-api-demos/inputs/textbox/appearance/configurator/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/appearance/configurator/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textbox/appearance/configurator/main.vue b/vue-options-api-demos/inputs/textbox/appearance/configurator/main.vue
new file mode 100644
index 00000000..c06b9bf2
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/appearance/configurator/main.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <InputStyleConfigurator
+      :size="size"
+      @sizechange="setSize"
+      :fill-mode="fillMode"
+      @fillmodechange="setFillMode"
+      :rounded="rounded"
+      @roundedchange="setRounded"
+    />
+    <KTextBox :style="{ width: '230px' }" :size="size" :rounded="rounded" :fill-mode="fillMode" />
+  </div>
+</template>
+<script>
+import InputStyleConfigurator from "./InputStyleConfigurator.vue";
+import { TextBox } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    InputStyleConfigurator,
+    KTextBox: TextBox,
+  },
+  data() {
+    return {
+      size: "medium",
+      rounded: "medium",
+      fillMode: "solid",
+    };
+  },
+  methods: {
+    setRounded(event) {
+      this.rounded = event.value;
+    },
+    setSize(event) {
+      this.size = event.value;
+    },
+    setFillMode(event) {
+      this.fillMode = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/textbox/appearance/fill-mode/main.js b/vue-options-api-demos/inputs/textbox/appearance/fill-mode/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/appearance/fill-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textbox/appearance/fill-mode/main.vue b/vue-options-api-demos/inputs/textbox/appearance/fill-mode/main.vue
new file mode 100644
index 00000000..99cf3f9b
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/appearance/fill-mode/main.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="example-config">
+    <div class="demo">
+      <span class="wrapper">
+        <span>Flat: </span>
+        <KTextBox :fill-mode="'flat'" :style="{ width: '170px' }" />
+      </span>
+      <span class="wrapper">
+        <span>Solid: </span>
+        <KTextBox :fill-mode="'solid'" :style="{ width: '170px' }" />
+      </span>
+      <span class="wrapper">
+        <span>Outline: </span>
+        <KTextBox :fill-mode="'outline'" :style="{ width: '170px' }" />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Custom fill mode: </span>
+        <KTextBox
+          :fill-mode="null"
+          :class="'custom-input'"
+          :style="{ width: '170px' }"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { TextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    KTextBox: TextBox,
+  },
+};
+</script>
+
+<style>
+.custom-input {
+  background-color: #00aead;
+  border: 2px solid #bfd843;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/inputs/textbox/appearance/rounded/main.js b/vue-options-api-demos/inputs/textbox/appearance/rounded/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/appearance/rounded/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textbox/appearance/rounded/main.vue b/vue-options-api-demos/inputs/textbox/appearance/rounded/main.vue
new file mode 100644
index 00000000..8295f76a
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/appearance/rounded/main.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Small roundness: </span>
+        <KTextBox :rounded="'small'" :style="{ width: '170px' }" />
+      </span>
+      <span class="wrapper">
+        <span>Medium roundness: </span>
+        <KTextBox :rounded="'medium'" :style="{ width: '170px' }" />
+      </span>
+      <span class="wrapper">
+        <span>Large roundness: </span>
+        <KTextBox :rounded="'large'" :style="{ width: '170px' }" />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Full roundness: </span>
+        <KTextBox :rounded="'full'" :style="{ width: '170px' }" />
+      </span>
+      <span class="wrapper">
+        <span>Custom roundness: </span>
+        <KTextBox
+          :rounded="null"
+          :class="'custom-input'"
+          :style="{ width: '170px' }"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { TextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    KTextBox: TextBox,
+  },
+};
+</script>
+
+<style>
+.custom-input {
+  border-bottom-right-radius: 15px;
+  border-top-left-radius: 15px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/inputs/textbox/appearance/size/main.js b/vue-options-api-demos/inputs/textbox/appearance/size/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/appearance/size/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textbox/appearance/size/main.vue b/vue-options-api-demos/inputs/textbox/appearance/size/main.vue
new file mode 100644
index 00000000..c11ce5d6
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/appearance/size/main.vue
@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Small size: </span>
+        <KTextBox :size="'small'" :style="{ width: '170px' }" />
+      </span>
+      <span class="wrapper">
+        <span>Medium size: </span>
+        <KTextBox :size="'medium'" :style="{ width: '170px' }" />
+      </span>
+      <span class="wrapper">
+        <span>Large size: </span>
+        <KTextBox :size="'large'" :style="{ width: '170px' }" />
+      </span>
+    </div>
+    <div class="demo">
+      <span class="wrapper">
+        <span>Custom size: </span>
+        <KTextBox
+          :size="null"
+          :class="'custom-input'"
+          :style="{ width: '170px' }"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { TextBox as KTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    KTextBox,
+  },
+};
+</script>
+
+<style>
+.custom-input input {
+  line-height: 2;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/inputs/textbox/character-count/main.js b/vue-options-api-demos/inputs/textbox/character-count/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/character-count/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textbox/character-count/main.vue b/vue-options-api-demos/inputs/textbox/character-count/main.vue
new file mode 100644
index 00000000..4802c5ca
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/character-count/main.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div>Message:</div>
+    <KTextBox
+      :value="value"
+      :valid="value.length <= MAX_LENGTH"
+      :placeholder="'Type message'"
+      :max-length="MAX_LENGTH"
+      :input-prefix="'prefix'"
+      :input-suffix="'suffix'"
+      :style="{
+        width: '300px',
+      }"
+      @input="handleInput"
+    >
+      <template v-slot:prefix>
+        <SvgIcon :icon="envelopeIcon" />
+        <InputSeparator />
+      </template>
+      <template v-slot:suffix>
+        <SvgIcon
+          v-if="value !== EMPTY_VALUE"
+          @click="handleClear"
+          :icon="xIcon"
+        />
+        {{ `${String(value).length}/${MAX_LENGTH}` }} &nbsp;
+      </template>
+    </KTextBox>
+  </div>
+</template>
+  <script>
+import {
+  TextBox as KTextBox,
+  InputSeparator,
+} from "@progress/kendo-vue-inputs";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { envelopeIcon, xIcon } from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    KTextBox,
+    SvgIcon,
+    InputSeparator,
+  },
+  data() {
+    return {
+      envelopeIcon,
+      xIcon,
+      value: "",
+      MAX_LENGTH: 10,
+      EMPTY_VALUE: "",
+    };
+  },
+  methods: {
+    handleInput(event) {
+      this.value = event.target.value;
+    },
+    handleClear() {
+      this.value = this.EMPTY_VALUE;
+    },
+  },
+};
+</script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/textbox/clear-button/main.js b/vue-options-api-demos/inputs/textbox/clear-button/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/clear-button/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textbox/clear-button/main.vue b/vue-options-api-demos/inputs/textbox/clear-button/main.vue
new file mode 100644
index 00000000..91dee770
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/clear-button/main.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <KTextBox
+      v-model="value"
+      :placeholder="'Type some text...'"
+      :style="{ width: '230px' }"
+      :show-clear-button="true"
+    />
+  </div>
+</template>
+<script>
+import { TextBox as KTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    KTextBox
+  },
+  data() {
+    return {
+      value: 'Clear this text!',
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/textbox/clear-value/main.js b/vue-options-api-demos/inputs/textbox/clear-value/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/clear-value/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textbox/clear-value/main.vue b/vue-options-api-demos/inputs/textbox/clear-value/main.vue
new file mode 100644
index 00000000..f6a673a6
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/clear-value/main.vue
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <div>Message:</div>
+    <KTextBox
+      :value="value"
+      :placeholder="'Type message'"
+      :input-prefix="'prefix'"
+      :input-suffix="'suffix'"
+      :style="{
+        width: '300px',
+      }"
+      @input="handleInput"
+    >
+      <template v-slot:prefix>
+        <SvgIcon :icon="envelopeIcon" />
+        <InputSeparator />
+      </template>
+      <template v-slot:suffix>
+        <SvgIcon
+          v-if="value !== EMPTY_VALUE"
+          @click="handleClear"
+          :icon="xIcon"
+        />
+        <InputSeparator />
+        <KButton
+          :disabled="value === EMPTY_VALUE"
+          :theme-color="'primary'"
+          :fill-mode="'flat'"
+          :rounded="null"
+        >
+          Send
+        </KButton>
+      </template>
+    </KTextBox>
+  </div>
+</template>
+  <script>
+import {
+  TextBox as KTextBox,
+  InputSeparator,
+} from "@progress/kendo-vue-inputs";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { envelopeIcon, xIcon } from "@progress/kendo-svg-icons";
+import { Button as KButton } from "@progress/kendo-vue-buttons";
+
+export default {
+  components: {
+    KTextBox,
+    SvgIcon,
+    KButton,
+    InputSeparator,
+  },
+  data() {
+    return {
+      envelopeIcon,
+      xIcon,
+      value: "Hello world!",
+      EMPTY_VALUE: "",
+    };
+  },
+  methods: {
+    handleInput(event) {
+      this.value = event.target.value;
+    },
+    handleClear() {
+      this.value = this.EMPTY_VALUE;
+    },
+  },
+};
+</script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/textbox/disabled-adornments/TextBoxIcons.vue b/vue-options-api-demos/inputs/textbox/disabled-adornments/TextBoxIcons.vue
new file mode 100644
index 00000000..4e046ffb
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/disabled-adornments/TextBoxIcons.vue
@@ -0,0 +1,27 @@
+<template>
+    <div>
+      <SvgIcon :icon="menuIcon" />
+      &nbsp;
+      <InputSeparator />
+      &nbsp;
+      <SvgIcon :icon="gearIcon" />
+    </div>
+  </template>
+  <script>
+  import { InputSeparator } from "@progress/kendo-vue-inputs";
+  import { SvgIcon } from "@progress/kendo-vue-common";
+  import { menuIcon, gearIcon } from "@progress/kendo-svg-icons";
+  
+  export default {
+    components: {
+      InputSeparator,
+      SvgIcon,
+    },
+    data() {
+      return {
+        menuIcon,
+        gearIcon,
+      };
+    },
+  };
+  </script>
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/textbox/disabled-adornments/main.js b/vue-options-api-demos/inputs/textbox/disabled-adornments/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/disabled-adornments/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textbox/disabled-adornments/main.vue b/vue-options-api-demos/inputs/textbox/disabled-adornments/main.vue
new file mode 100644
index 00000000..7e235626
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/disabled-adornments/main.vue
@@ -0,0 +1,39 @@
+<template>
+    <div>
+      <KTextBox
+        :style="{ width: '230px' }"
+        :disabled="true"
+        :showValidationIcon="true"
+        :inputPrefix="'prefix'"
+        :inputSuffix="'suffix'"
+        :showClearButton="true"
+      >
+        <template v-slot:prefix>
+          <TextBoxIcons />
+        </template>
+        <template v-slot:suffix>
+          <SvgIcon :icon="envelopeIcon" />
+        </template>
+      </KTextBox>
+    </div>
+  </template>
+  <script>
+  import { TextBox as KTextBox } from "@progress/kendo-vue-inputs";
+  import { SvgIcon } from "@progress/kendo-vue-common";
+  import { envelopeIcon } from "@progress/kendo-svg-icons";
+  import TextBoxIcons from "./TextBoxIcons.vue";
+  
+  export default {
+    components: {
+      KTextBox,
+      TextBoxIcons,
+      SvgIcon,
+    },
+    data() {
+      return {
+        envelopeIcon,
+      };
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/textbox/disabled/main.js b/vue-options-api-demos/inputs/textbox/disabled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textbox/disabled/main.vue b/vue-options-api-demos/inputs/textbox/disabled/main.vue
new file mode 100644
index 00000000..9e034ef1
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/disabled/main.vue
@@ -0,0 +1,55 @@
+<template>
+  <div
+    :style="{
+      width: '300px',
+    }"
+  >
+    <div className="example-config">
+      <KCheckbox
+        :label="'Disabled'"
+        :checked="disabled"
+        @change="handleDisabledChange"
+      />
+    </div>
+    <Label>Message:</Label>
+    <FieldWrapper>
+      <KTextBox
+        :value="value"
+        :disabled="disabled"
+        @input="handleInput"
+        :placeholder="'Type your message here'"
+      />
+    </FieldWrapper>
+  </div>
+</template>
+<script>
+import {
+  TextBox as KTextBox,
+  Checkbox as KCheckbox,
+} from '@progress/kendo-vue-inputs';
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Label } from '@progress/kendo-vue-labels';
+
+export default {
+  components: {
+    KCheckbox,
+    KTextBox,
+    FieldWrapper,
+    Label,
+  },
+  data() {
+    return {
+      value: 'Sample text',
+      disabled: true,
+    };
+  },
+  methods: {
+    handleDisabledChange() {
+      this.disabled = !this.disabled;
+    },
+    handleInput(event) {
+      this.value = event.target.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/textbox/forms-support/FormContent.vue b/vue-options-api-demos/inputs/textbox/forms-support/FormContent.vue
new file mode 100644
index 00000000..4f618e52
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/forms-support/FormContent.vue
@@ -0,0 +1,66 @@
+<template>
+    <form-element :style="{ maxWidth: '650px' }">
+      <fieldset class="k-form-fieldset">
+        <field
+          :id="'fullName'"
+          :name="'fullName'"
+          :label="'Full Name'"
+          :component="'myTemplate'"
+          :validator="nameValidator"
+          :hint="'Hint: Write Your Name'"
+        >
+          <template v-slot:myTemplate="{ props }">
+            <FormTextBox
+              v-bind="props"
+              @change="props.onChange"
+              @blur="props.onBlur"
+              @focus="props.onFocus"
+            />
+          </template>
+        </field>
+  
+        <div class="k-form-buttons">
+          <kbutton
+            :theme-color="'primary'"
+            :type="'submit'"
+            :disabled="!kendoForm.allowSubmit"
+          >
+            Submit
+          </kbutton>
+          <kbutton @click="clear"> Clear </kbutton>
+        </div>
+      </fieldset>
+    </form-element>
+  </template>
+  <script>
+  import { Field, FormElement } from '@progress/kendo-vue-form';
+  import FormTextBox from './FormTextBox.vue';
+  import { Button } from '@progress/kendo-vue-buttons';
+  import { nameValidator } from './validators';
+  
+  export default {
+    components: {
+      field: Field,
+      'form-element': FormElement,
+      FormTextBox,
+      kbutton: Button,
+    },
+    inject: {
+      kendoForm: { default: {} },
+    },
+    data: function () {
+      return {
+        nameValidator,
+      };
+    },
+    methods: {
+      handleSubmit(dataItem) {
+        alert(JSON.stringify(dataItem, null, 2));
+      },
+      clear() {
+        this.kendoForm.onFormReset();
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/textbox/forms-support/FormTextBox.vue b/vue-options-api-demos/inputs/textbox/forms-support/FormTextBox.vue
new file mode 100644
index 00000000..6e47d446
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/forms-support/FormTextBox.vue
@@ -0,0 +1,90 @@
+<template>
+    <fieldwrapper>
+      <KLabel
+        :editor-id="id"
+        :editor-valid="valid"
+        :disabled="disabled"
+        :optional="optional"
+      >
+        {{ label }}
+      </KLabel>
+      <div class="k-form-field-wrap">
+        <KTextBox
+          :style="{ width: '230px' }"
+          :valid="valid"
+          :id="id"
+          :value="value"
+          :disabled="disabled"
+          :placeholder="placeholder"
+          @input="handleChange"
+          @blur="handleBlur"
+          @focus="handleFocus"
+        />
+        <error v-if="showValidationMessage">
+          {{ validationMessage }}
+        </error>
+        <hint v-else>{{ hint }}</hint>
+      </div>
+    </fieldwrapper>
+  </template>
+  <script>
+  import { FieldWrapper } from '@progress/kendo-vue-form';
+  import { Error, Hint, Label as KLabel } from '@progress/kendo-vue-labels';
+  import { TextBox as KTextBox } from '@progress/kendo-vue-inputs';
+  export default {
+    props: {
+      optional: Boolean,
+      disabled: Boolean,
+      placeholder: String,
+      touched: Boolean,
+      label: String,
+      validationMessage: String,
+      hint: String,
+      id: String,
+      valid: Boolean,
+      value: {
+        type: String,
+        default: '',
+      },
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      KLabel,
+      KTextBox,
+    },
+    computed: {
+      showValidationMessage() {
+        return this.$props.touched && this.$props.validationMessage;
+      },
+      showHint() {
+        return !this.showValidationMessage && this.$props.hint;
+      },
+      hintId() {
+        return this.showHint ? `${this.$props.id}_hint` : '';
+      },
+      errorId() {
+        return this.showValidationMessage ? `${this.$props.id}_error` : '';
+      },
+    },
+    emits: {
+      input: null,
+      change: null,
+      blur: null,
+      focus: null,
+    },
+    methods: {
+      handleChange(e) {
+        this.$emit('change', e);
+      },
+      handleBlur(e) {
+        this.$emit('blur', e);
+      },
+      handleFocus(e) {
+        this.$emit('focus', e);
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/textbox/forms-support/main.js b/vue-options-api-demos/inputs/textbox/forms-support/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/forms-support/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textbox/forms-support/main.vue b/vue-options-api-demos/inputs/textbox/forms-support/main.vue
new file mode 100644
index 00000000..f4cdf3a6
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/forms-support/main.vue
@@ -0,0 +1,24 @@
+<template>
+  <k-form
+    @submit="handleSubmit">
+    <formcontent />
+ </k-form>
+</template>
+<script>
+import { Form } from "@progress/kendo-vue-form";
+import FormContent from './FormContent.vue';
+
+export default {
+  components: {
+    'k-form': Form,
+    'formcontent': FormContent
+  },
+  methods: {
+    handleSubmit (dataItem) {
+       alert(JSON.stringify(dataItem, null, 2));
+    }
+  }
+};
+
+</script>
+
diff --git a/vue-options-api-demos/inputs/textbox/forms-support/validators.js b/vue-options-api-demos/inputs/textbox/forms-support/validators.js
new file mode 100644
index 00000000..cd15120e
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/forms-support/validators.js
@@ -0,0 +1,83 @@
+import { getter } from "@progress/kendo-vue-common";
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const phoneRegex = new RegExp(/^[0-9 ()+-]+$/);
+const ccardRegex = new RegExp(/^[0-9-]+$/);
+const cvcRegex = new RegExp(/^[0-9]+$/);
+
+export const termsValidator = (value) =>
+    value ? "" : "It's required to agree with Terms and Conditions.";
+export const emailValidator = (value) =>
+    !value
+        ? "Email field is required."
+        : emailRegex.test(value)
+        ? ""
+        : "Email is not in a valid format.";
+export const nameValidator = (value) =>
+    !value
+        ? "Full Name is required"
+        : value.length < 7
+        ? "Full Name should be at least 7 characters long."
+        : "";
+export const userNameValidator = (value) =>
+    !value
+        ? "User Name is required"
+        : value.length < 5
+        ? "User name should be at least 5 characters long."
+        : "";
+export const phoneValidator = (value) =>
+    !value
+        ? "Phone number is required."
+        : phoneRegex.test(value)
+        ? ""
+        : "Not a valid phone number.";
+export const cardValidator = (value) =>
+    !value
+        ? "Credit card number is required. "
+        : ccardRegex.test(value)
+        ? ""
+        : "Not a valid credit card number format.";
+export const cvcValidator = (value) =>
+    !value
+        ? "CVC code is required,"
+        : cvcRegex.test(value) || value.length !== 3
+        ? ""
+        : "Not a valid CVC code format.";
+export const guestsValidator = (value) =>
+    !value
+        ? "Number of guests is required"
+        : value <= 5
+        ? ""
+        : "Maximum 5 guests";
+export const nightsValidator = (value) =>
+    value ? "" : "Number of Nights is required.";
+export const arrivalDateValidator = (value) =>
+    value ? "" : "Arrival Date is required.";
+export const colorValidator = (value) => (value ? "" : "Color is required.");
+export const requiredValidator = (value) =>
+    value ? "" : "Error: This field is required.";
+export const passwordValidator = (value) =>
+    value && value.length > 8 ? "" : "Password must be at least 8 symbols.";
+export const addressValidator = (value) =>
+    value ? "" : "Address is required.";
+
+const userNameGetter = getter("username");
+const emailGetter = getter("email");
+
+export const formValidator = (values) => {
+    const userName = userNameGetter(values);
+    const emailValue = emailGetter(values);
+
+    if (userName && emailValue && emailRegex.test(emailValue)) {
+        return {};
+    }
+
+    return {
+        VALIDATION_SUMMARY: "Please fill in the following fields.",
+        ["username"]: !userName ? "User Name is required." : "",
+        ["email"]:
+            emailValue && emailRegex.test(emailValue)
+                ? ""
+                : "Email is required and should be in a valid format.",
+    };
+};
diff --git a/vue-options-api-demos/inputs/textbox/icon-name/main.js b/vue-options-api-demos/inputs/textbox/icon-name/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/icon-name/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textbox/icon-name/main.vue b/vue-options-api-demos/inputs/textbox/icon-name/main.vue
new file mode 100644
index 00000000..5f2a9ac6
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/icon-name/main.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <KTextBox
+      :style="{ width: '230px' }"
+      :placeholder="'Type some text...'"
+      :icon-name="'gear'"
+    />
+  </div>
+</template>
+<script>
+import { TextBox as KTextBox } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    KTextBox,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/textbox/input-mode/main.js b/vue-options-api-demos/inputs/textbox/input-mode/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/input-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textbox/input-mode/main.vue b/vue-options-api-demos/inputs/textbox/input-mode/main.vue
new file mode 100644
index 00000000..ba017f27
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/input-mode/main.vue
@@ -0,0 +1,90 @@
+<template>
+    <div class="k-d-grid k-grid-cols-sm-1 k-grid-cols-md-2 k-gap-4 k-max-w-fit">
+        <div class="k-col-span-1">
+            <div>
+                inputmode=text <i>(default)</i>
+            </div>
+            <textbox
+                :placeholder="'Type your message here...'"
+                :input-attributes="{ inputMode: 'text' }"
+                :style="{ width: '300px' }"
+            />
+        </div>
+        <div class="k-col-span-1">
+            <div>inputmode=tel</div>
+            <textbox
+                :placeholder="'(999) 000-00-00-00'"
+                :input-attributes="{ inputMode: 'tel' }"
+                :input-suffix="'suffix'"
+                :style="{ width: '300px' }"
+            >
+                <template v-slot:suffix>
+                    <svgicon :icon="bookIcon" />
+                </template>
+            </textbox>
+        </div>
+        <div class="k-col-span-1">
+            <div>inputmode=email</div>
+            <textbox
+                :placeholder="'Type your email here...'"
+                :input-attributes="{ inputMode: 'email' }"
+                :input-prefix="'prefix'"
+                :style="{ width: '300px' }"
+            >
+                <template v-slot:prefix>
+                    <svgicon :icon="envelopeIcon" />
+                </template>
+            </textbox>
+        </div>
+        <div class="k-col-span-1">
+            <div>inputmode=search</div>
+            <textbox
+                :placeholder="'Search here...'"
+                :input-attributes="{ inputMode: 'search' }"
+                :input-suffix="'suffix'"
+                :style="{ width: '300px' }"
+            >
+                <template v-slot:suffix>
+                    <svgicon :icon="searchIcon" />
+                </template>
+            </textbox>
+        </div>
+        <div class="k-col-span-1">
+            <div>inputmode=url</div>
+            <textbox
+                :placeholder="'Type here...'"
+                :input-attributes="{ inputMode: 'url' }"
+                :input-prefix="'prefix'"
+                :style="{ width: '300px' }"
+            >
+                <template v-slot:prefix>
+                    <kbutton :disabled="true" :fill-mode="'clear'">
+                        https://
+                    </kbutton>
+                </template>
+            </textbox>
+        </div>
+    </div>
+</template>
+<script>
+import { TextBox } from '@progress/kendo-vue-inputs';
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { bookIcon, envelopeIcon, searchIcon } from "@progress/kendo-svg-icons";
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'textbox': TextBox,
+        'svgicon': SvgIcon,
+        'kbutton': KButton
+    },
+    data() {
+        return {
+            bookIcon,
+            envelopeIcon,
+            searchIcon
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/textbox/loading-icon/main.js b/vue-options-api-demos/inputs/textbox/loading-icon/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/loading-icon/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textbox/loading-icon/main.vue b/vue-options-api-demos/inputs/textbox/loading-icon/main.vue
new file mode 100644
index 00000000..459b56ec
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/loading-icon/main.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <KTextBox
+      :style="{ width: '230px' }"
+      :placeholder="'Type some text...'"
+      :show-loading-icon="true"
+    />
+  </div>
+</template>
+<script>
+import { TextBox as KTextBox } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    KTextBox,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/textbox/overview/main.js b/vue-options-api-demos/inputs/textbox/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textbox/overview/main.vue b/vue-options-api-demos/inputs/textbox/overview/main.vue
new file mode 100644
index 00000000..e9e4c698
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/overview/main.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="profile-demo card-container">
+    <div class="k-card custom-card">
+      <div class="card-row">
+        <div class="card-column no-flex">
+          <div class="sidebar-container k-skeleton">
+            <div class="avatar-name-container">
+              <div class="k-skeleton skeleton-avatar" />
+              <div class="name-container">
+                <div class="k-skeleton skeleton-text" />
+                <div class="k-skeleton skeleton-small-text-short" />
+              </div>
+            </div>
+            <div class="description-container">
+              <div class="k-skeleton skeleton-small-text" />
+              <div class="k-skeleton skeleton-small-text" />
+              <div class="k-skeleton skeleton-small-text" />
+            </div>
+          </div>
+        </div>
+        <div class="card-column">
+          <div class="avatar-title-container">
+            <div class="k-skeleton skeleton-avatar" />
+            <h4 class="k-h4">My Profile</h4>
+          </div>
+          <div class="component-container">
+            <form class="k-form" @submit="onSubmit">
+              <fieldset>
+                <div>Name</div>
+                <KTextBox
+                  :value="value"
+                  @change="handleChange"
+                  @input="handleInput"
+                  :placeholder="'John Smith'"
+                >
+                </KTextBox>
+              </fieldset>
+            </form>
+          </div>
+          <div class="skeleton-container top">
+            <div class="k-skeleton skeleton-box-small" />
+            <div class="k-skeleton skeleton-box-large" />
+          </div>
+          <div class="skeleton-container bottom">
+            <div class="k-skeleton skeleton-box-small" />
+            <div class="k-skeleton skeleton-box-large-double" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { TextBox as KTextBox } from "@progress/kendo-vue-inputs";
+import "./overview-styles.css";
+
+export default {
+  components: {
+    KTextBox,
+  },
+  data() {
+    return {
+      value: undefined,
+    };
+  },
+  methods: {
+    handleChange(event) {
+      console.log("Change", event);
+      this.value = event.target.value;
+    },
+    handleInput(event) {
+      console.log("Input", event);
+      this.value = event.target.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/textbox/overview/overview-styles.css b/vue-options-api-demos/inputs/textbox/overview/overview-styles.css
new file mode 100644
index 00000000..580a7864
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/overview/overview-styles.css
@@ -0,0 +1,171 @@
+.profile-demo.card-container {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+  }
+  
+  .profile-demo .custom-card {
+    padding: 32px;
+    width: 712px;
+    height: 350px;
+    gap: 32px;
+    border-radius: 4px 4px 0 0;
+    box-shadow: 0 0 12px 4px rgba(0, 0, 0, 0.08);
+  }
+  
+  .profile-demo .card-row {
+    display: flex;
+    gap: 32px;
+  }
+  
+  .profile-demo .card-column {
+    flex: 1;
+  }
+  
+  .profile-demo .no-flex {
+    flex: 0;
+  }
+  
+  .profile-demo .sidebar-container,
+  .profile-demo .avatar-name-container,
+  .profile-demo .name-container,
+  .profile-demo .description-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .profile-demo .sidebar-container {
+    padding: 30px 20px;
+    width: 180px;
+    height: 318px;
+    gap: 50px;
+  }
+  
+  .profile-demo .avatar-name-container {
+    gap: 20px;
+  }
+  
+  .profile-demo .name-container {
+    gap: 5px;
+  }
+  
+  .profile-demo .description-container {
+    width: 100%;
+    gap: 15px;
+  }
+  
+  .profile-demo .k-skeleton {
+    border-radius: 4px;
+    opacity: 0.4;
+  }
+  
+  .profile-demo .sidebar-container .k-skeleton {
+    opacity: 0.8;
+  }
+  
+  .profile-demo .skeleton-avatar {
+    width: 72px;
+    height: 72px;
+    border-radius: 50%;
+  }
+  
+  .profile-demo .skeleton-text {
+    width: 104px;
+    height: 15px;
+  }
+  
+  .profile-demo .skeleton-small-text {
+    width: 100%;
+    height: 10px;
+  }
+  
+  .profile-demo .skeleton-small-text-short {
+    width: 56px;
+    height: 10px;
+  }
+  
+  .profile-demo .skeleton-box-small {
+    width: 124px;
+    height: 15px;
+  }
+  
+  .profile-demo .skeleton-box-large {
+    width: 100%;
+    height: 30px;
+  }
+  
+  .profile-demo .skeleton-box-large-double {
+    width: 100%;
+    height: 56px;
+  }
+  
+  .profile-demo .skeleton-container {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+  
+  .profile-demo .avatar-title-container {
+    margin-bottom: 14px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+  
+  .profile-demo .avatar-title-container .skeleton-avatar {
+    width: 48px;
+    height: 48px;
+    display: none;
+  }
+  
+  .profile-demo .top {
+    margin-bottom: 20px;
+  }
+  
+  .profile-demo .component-container {
+    margin-bottom: 20px;
+  }
+  
+  .profile-demo .k-h4 {
+    margin-bottom: 0;
+    opacity: 0.2;
+  }
+  
+  @media only screen and (max-width: 559px) {
+    .profile-demo .card-column.no-flex {
+      display: none !important;
+    }
+  
+    .profile-demo .avatar-title-container .skeleton-avatar {
+      display: block;
+    }
+  
+    .profile-demo .custom-card {
+      width: 360px;
+      gap: 48px;
+    }
+  
+    .profile-demo .skeleton-box-large-double {
+      height: 72px;
+    }
+  }
+  
+  @media only screen and (max-width: 359px) {
+    .profile-demo .custom-card {
+      padding: 24px;
+    }
+  
+    .profile-demo .k-h4 {
+      font-size: 20px;
+    }
+  
+    .profile-demo .avatar-title-container .skeleton-avatar {
+      width: 32px;
+      height: 32px;
+    }
+  
+    .profile-demo .skeleton-box-large-double {
+      height: 78px;
+    }
+  }
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/textbox/readonly/main.js b/vue-options-api-demos/inputs/textbox/readonly/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/readonly/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textbox/readonly/main.vue b/vue-options-api-demos/inputs/textbox/readonly/main.vue
new file mode 100644
index 00000000..62ed931a
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/readonly/main.vue
@@ -0,0 +1,55 @@
+<template>
+  <div
+    :style="{
+      width: '300px',
+    }"
+  >
+    <div className="example-config">
+      <KCheckbox
+        :label="'Read Only'"
+        :checked="readOnly"
+        @change="handleDisabledChange"
+      />
+    </div>
+    <Label>Message:</Label>
+    <FieldWrapper>
+      <KTextBox
+        :value="value"
+        :readonly="readOnly"
+        @input="handleInput"
+        :placeholder="'Type your message here'"
+      />
+    </FieldWrapper>
+  </div>
+</template>
+<script>
+import {
+  TextBox as KTextBox,
+  Checkbox as KCheckbox,
+} from '@progress/kendo-vue-inputs';
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Label } from '@progress/kendo-vue-labels';
+
+export default {
+  components: {
+    KCheckbox,
+    KTextBox,
+    FieldWrapper,
+    Label,
+  },
+  data() {
+    return {
+      value: 'Sample text',
+      readOnly: true,
+    };
+  },
+  methods: {
+    handleDisabledChange() {
+      this.readOnly = !this.readOnly;
+    },
+    handleInput(event) {
+      this.value = event.target.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/inputs/textbox/separator/main.js b/vue-options-api-demos/inputs/textbox/separator/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/separator/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textbox/separator/main.vue b/vue-options-api-demos/inputs/textbox/separator/main.vue
new file mode 100644
index 00000000..00eca450
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/separator/main.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <div>Message:</div>
+    <KTextBox
+      :value="value"
+      :placeholder="'Type message'"
+      :input-prefix="'prefix'"
+      :input-suffix="'suffix'"
+      :style="{
+        width: '300px',
+      }"
+      @input="handleInput"
+    >
+      <template v-slot:prefix>
+        <SvgIcon :icon="envelopeIcon" />
+        <InputSeparator />
+      </template>
+      <template v-slot:suffix>
+        <InputSeparator />
+        <KButton
+          :disabled="value === EMPTY_VALUE"
+          :theme-color="'primary'"
+          :fill-mode="'flat'"
+          :rounded="null"
+        >
+          Send
+        </KButton>
+      </template>
+    </KTextBox>
+  </div>
+</template>
+  <script>
+import {
+  TextBox as KTextBox,
+  InputSeparator,
+} from "@progress/kendo-vue-inputs";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { envelopeIcon } from "@progress/kendo-svg-icons";
+import { Button as KButton } from "@progress/kendo-vue-buttons";
+
+export default {
+  components: {
+    KTextBox,
+    SvgIcon,
+    KButton,
+    InputSeparator,
+  },
+  data() {
+    return {
+      envelopeIcon,
+      value: "",
+      EMPTY_VALUE: "",
+    };
+  },
+  methods: {
+    handleInput(event) {
+      this.value = event.target.value;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/inputs/textbox/validation-icon-built-in/main.js b/vue-options-api-demos/inputs/textbox/validation-icon-built-in/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/validation-icon-built-in/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textbox/validation-icon-built-in/main.vue b/vue-options-api-demos/inputs/textbox/validation-icon-built-in/main.vue
new file mode 100644
index 00000000..5af6de81
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/validation-icon-built-in/main.vue
@@ -0,0 +1,22 @@
+<template>
+    <div>
+        Valid Input Icon:
+        <br />
+        <KTextBox :style="{ width: '230px' }" :show-validation-icon="true"  />
+        <br />
+        <br />
+        Invalid Input Icon:
+        <br />
+        <KTextBox :style="{ width: '230px' }" :show-validation-icon="true" :valid="false" />
+    </div>
+</template>
+<script>
+import { TextBox as KTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+    components: {
+        KTextBox
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/inputs/textbox/validation-icon/main.js b/vue-options-api-demos/inputs/textbox/validation-icon/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/validation-icon/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/inputs/textbox/validation-icon/main.vue b/vue-options-api-demos/inputs/textbox/validation-icon/main.vue
new file mode 100644
index 00000000..99c076e5
--- /dev/null
+++ b/vue-options-api-demos/inputs/textbox/validation-icon/main.vue
@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <div>Message:</div>
+    <KTextBox
+      :value="value"
+      :placeholder="'Type message'"
+      :input-prefix="'prefix'"
+      :input-suffix="'suffix'"
+      :required="true"
+      :valid="valid"
+      :style="{
+        width: '300px',
+      }"
+      @input="handleInput"
+    >
+      <template v-slot:prefix>
+        <Icon
+          v-if="valid && recommended"
+          :name="'check'"
+          :theme-color="'success'"
+        />
+        <Icon v-else-if="valid" :name="'warning'" :theme-color="'warning'" />
+        <Icon v-else :name="'error'" :theme-color="'error'" />
+      </template>
+      <template v-slot:suffix>
+        {{ `${String(value).length}/${MAX_LENGTH}` }} &nbsp;
+      </template>
+    </KTextBox>
+    <Hint>Recommended size is between at least 5 characters</Hint>
+  </div>
+</template>
+<script>
+import { TextBox as KTextBox } from "@progress/kendo-vue-inputs";
+import { Icon } from "@progress/kendo-vue-common";
+import { Hint } from "@progress/kendo-vue-labels";
+
+const EMPTY_VALUE = "";
+const matchMinimum = (value) =>
+  new RegExp(/^[a-zA-Z0-9]{1,10}$/g).test(String(value));
+const matchRecommended = (value) =>
+  new RegExp(/^[a-zA-Z0-9]{5,10}$/g).test(String(value));
+
+export default {
+  components: {
+    KTextBox,
+    Icon,
+    Hint,
+  },
+  computed: {
+    valid() {
+      return matchMinimum(this.value);
+    },
+    recommended() {
+      return matchRecommended(this.value);
+    },
+  },
+  data() {
+    return {
+      value: EMPTY_VALUE,
+      MAX_LENGTH: 10,
+    };
+  },
+  methods: {
+    handleInput(event) {
+      this.value = event.target.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/intl/custom-service/CustomFormatIntlProvider.js b/vue-options-api-demos/intl/custom-service/CustomFormatIntlProvider.js
new file mode 100644
index 00000000..09ab8547
--- /dev/null
+++ b/vue-options-api-demos/intl/custom-service/CustomFormatIntlProvider.js
@@ -0,0 +1,14 @@
+import { IntlProvider } from '@progress/kendo-vue-intl';
+import { CustomFormatIntlService } from './CustomFormatIntlService';
+
+const CustomFormatIntlProvider = {
+    ...IntlProvider,
+    methods: {
+        ...IntlProvider.methods,
+        getIntlService() {
+            return new CustomFormatIntlService(this.$props.locale);
+        }
+    }
+};
+
+export { CustomFormatIntlProvider };
diff --git a/vue-options-api-demos/intl/custom-service/CustomFormatIntlService.js b/vue-options-api-demos/intl/custom-service/CustomFormatIntlService.js
new file mode 100644
index 00000000..d9741a77
--- /dev/null
+++ b/vue-options-api-demos/intl/custom-service/CustomFormatIntlService.js
@@ -0,0 +1,9 @@
+import { IntlService } from '@progress/kendo-vue-intl';
+
+class CustomFormatIntlService extends IntlService {
+    formatDate(value, format) {
+        return `custom format: ${super.formatDate(value, format)}`;
+    }
+}
+
+export { CustomFormatIntlService };
diff --git a/vue-options-api-demos/intl/custom-service/DateFormatter.vue b/vue-options-api-demos/intl/custom-service/DateFormatter.vue
new file mode 100644
index 00000000..36523bf5
--- /dev/null
+++ b/vue-options-api-demos/intl/custom-service/DateFormatter.vue
@@ -0,0 +1,30 @@
+<template>
+      <div>
+        <span>
+          {{" "}}
+          {{formattedDate}}
+        </span>
+      </div>
+</template>
+
+<script>
+    import {
+      provideIntlService,
+    } from "@progress/kendo-vue-intl";
+
+export default {
+  name: "DateFormatter",
+  props: {
+    date: Date
+  },
+  inject: {
+    kendoIntlService: { default: null },
+  },
+  computed: {
+      formattedDate: function(){
+        return provideIntlService(this).formatDate(this.date, "EEEE, d.MM.y")
+      }
+  }
+}
+
+</script>
diff --git a/vue-options-api-demos/intl/custom-service/main.js b/vue-options-api-demos/intl/custom-service/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/intl/custom-service/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/intl/custom-service/main.vue b/vue-options-api-demos/intl/custom-service/main.vue
new file mode 100644
index 00000000..37578fba
--- /dev/null
+++ b/vue-options-api-demos/intl/custom-service/main.vue
@@ -0,0 +1,24 @@
+<template>
+      <custom>
+        <dateFormatter :date="date" />
+      </custom>
+</template>
+
+<script>
+import { CustomFormatIntlProvider } from "./CustomFormatIntlProvider";
+import DateFormatter from "./DateFormatter.vue";
+
+
+export default {
+    components: {
+      "custom": CustomFormatIntlProvider,
+      "dateFormatter": DateFormatter
+      },
+    data: function () {
+        return {
+            date: new Date()
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/intl/date-formatting/main.js b/vue-options-api-demos/intl/date-formatting/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/intl/date-formatting/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/intl/date-formatting/main.vue b/vue-options-api-demos/intl/date-formatting/main.vue
new file mode 100644
index 00000000..ed0f9a07
--- /dev/null
+++ b/vue-options-api-demos/intl/date-formatting/main.vue
@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <IntlProvider :locale="enLocale">
+      <div style="margin-bottom: 1em">
+        <h5>Format 2000-11-06 using 'd'</h5>
+        <div style="font-size: 1.2em">
+          Result:
+          <strong>
+            <em>{{ formatDate(dateValue, "d", enLocale) }}</em>
+          </strong>
+        </div>
+      </div>
+    </IntlProvider>
+
+    <IntlProvider :locale="deLocale">
+      <div style="margin-bottom: 1em">
+        <h5>Format 2000-11-06 using 'y.M.d'</h5>
+        <div style="font-size: 1.2em">
+          Result:
+          <strong>
+            <em>{{ formatDate(dateValue, "y.M.d", deLocale) }}</em>
+          </strong>
+        </div>
+      </div>
+    </IntlProvider>
+
+    <IntlProvider :locale="bgLocale">
+      <div style="margin-bottom: 1em">
+        <h5>Format 2000-11-06 using "EEEE, d.MM.y" (Bulgarian locale)</h5>
+        <div style="font-size: 1.2em">
+          Result:
+          <strong>
+            <em>{{ formatDate(dateValue, "EEEE, d.MM.y", bgLocale) }}</em>
+          </strong>
+        </div>
+      </div>
+    </IntlProvider>
+  </div>
+</template>
+
+<script>
+import { load, IntlProvider, IntlService } from "@progress/kendo-vue-intl";
+import likelySubtags from "cldr-core/supplemental/likelySubtags.json";
+import weekData from "cldr-core/supplemental/weekData.json";
+import enCaGregorian from "cldr-dates-full/main/en/ca-gregorian.json";
+import deCaGregorian from "cldr-dates-full/main/de/ca-gregorian.json";
+import bgCaGregorian from "cldr-dates-full/main/bg/ca-gregorian.json";
+import bgDateFields from "cldr-dates-full/main/bg/dateFields.json";
+import bgTimeZoneNames from "cldr-dates-full/main/bg/timeZoneNames.json";
+
+load(
+    likelySubtags,
+    weekData,
+    enCaGregorian,
+    deCaGregorian,
+    bgCaGregorian,
+    bgDateFields,
+    bgTimeZoneNames
+);
+
+export default {
+    name: "App",
+    data() {
+        return {
+            dateValue: new Date(2000, 10, 6),
+            enLocale: "en",
+            deLocale: "de",
+            bgLocale: "bg",
+        };
+    },
+    methods: {
+        formatDate(value, format, locale) {
+            const intl = new IntlService(locale);
+            const formattedDate = intl.formatDate(value, format);
+            return formattedDate;
+        },
+    },
+    components: {
+        IntlProvider,
+    },
+};
+</script>
diff --git a/vue-options-api-demos/intl/date-parsing/main.js b/vue-options-api-demos/intl/date-parsing/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/intl/date-parsing/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/intl/date-parsing/main.vue b/vue-options-api-demos/intl/date-parsing/main.vue
new file mode 100644
index 00000000..b28857dc
--- /dev/null
+++ b/vue-options-api-demos/intl/date-parsing/main.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <div style="margin-bottom: 1em">
+      <h5>String "11/6/2000" to parse</h5>
+      <div style="font-size: 1.2em">
+        Result:
+        <strong>
+          <em>{{ enDate ? enDate.toString() : "Invalid date" }}</em>
+        </strong>
+      </div>
+    </div>
+
+    <div>
+      <h5>String "2000-11-06T10:30Z" to parse</h5>
+      <div style="font-size: 1.2em">
+        Result:
+        <strong>
+          <em>{{ utcDate ? utcDate.toString() : "Invalid date" }}</em>
+        </strong>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { provideIntlService } from "@progress/kendo-vue-intl";
+
+export default {
+  name: "App",
+  data() {
+    return {
+      enDate: null,
+      utcDate: null,
+    };
+  },
+  created() {
+    const intl = provideIntlService(this);
+    this.enDate = intl.parseDate("11/6/2000", "M/d/yyyy");
+    this.utcDate = intl.parseDate("2000-11-06T10:30Z");
+  },
+};
+</script>
diff --git a/vue-options-api-demos/intl/general-formatting/FormattedDate.vue b/vue-options-api-demos/intl/general-formatting/FormattedDate.vue
new file mode 100644
index 00000000..beb7aebe
--- /dev/null
+++ b/vue-options-api-demos/intl/general-formatting/FormattedDate.vue
@@ -0,0 +1,30 @@
+<template>
+  <em>{{ formatDate(value, format, locale) }}</em>
+</template>
+<script>
+import { IntlService } from '@progress/kendo-vue-intl';
+
+export default {
+    name: 'FormattedDate',
+    props: {
+        value: {
+            type: Date,
+            required: true,
+        },
+        format: {
+            type: String,
+            required: true,
+        },
+        locale: {
+            type: String,
+            required: true,
+        },
+    },
+    methods: {
+        formatDate(value, format, locale) {
+            const intl = new IntlService(locale);
+            return intl.toString(value, format);
+        },
+    }
+}
+</script>
diff --git a/vue-options-api-demos/intl/general-formatting/FormattedNumber.vue b/vue-options-api-demos/intl/general-formatting/FormattedNumber.vue
new file mode 100644
index 00000000..bd3a9cc2
--- /dev/null
+++ b/vue-options-api-demos/intl/general-formatting/FormattedNumber.vue
@@ -0,0 +1,30 @@
+<template>
+  <em>{{ formatNumber(value, format, locale) }}</em>
+</template>
+<script>
+import { IntlService } from '@progress/kendo-vue-intl';
+
+export default {
+    name: 'FormattedNumber',
+    props: {
+        value: {
+            type: Number,
+            required: true,
+        },
+        format: {
+            type: String,
+            required: true,
+        },
+        locale: {
+            type: String,
+            required: true,
+        },
+    },
+    methods: {
+        formatNumber(value, format, locale) {
+            const intl = new IntlService(locale);
+            return intl.toString(value, format);
+        },
+    },
+}
+</script>
diff --git a/vue-options-api-demos/intl/general-formatting/FormattedText.vue b/vue-options-api-demos/intl/general-formatting/FormattedText.vue
new file mode 100644
index 00000000..b684ddfb
--- /dev/null
+++ b/vue-options-api-demos/intl/general-formatting/FormattedText.vue
@@ -0,0 +1,30 @@
+<template>
+<em>{{ formatText(template, values, locale) }}</em>
+</template>
+<script>
+import { IntlService } from '@progress/kendo-vue-intl';
+
+export default {
+    name: 'FormattedText',
+    props: {
+        template: {
+            type: String,
+            required: true,
+        },
+        values: {
+            type: Array,
+            required: true,
+        },
+        locale: {
+            type: String,
+            required: true,
+        },
+    },
+    methods: {
+        formatText(template, values, locale) {
+            const intl = new IntlService(locale);
+            return intl.format(template, values);
+        },
+    },
+}
+</script>
diff --git a/vue-options-api-demos/intl/general-formatting/main.js b/vue-options-api-demos/intl/general-formatting/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/intl/general-formatting/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/intl/general-formatting/main.vue b/vue-options-api-demos/intl/general-formatting/main.vue
new file mode 100644
index 00000000..a63fb4e3
--- /dev/null
+++ b/vue-options-api-demos/intl/general-formatting/main.vue
@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <IntlProvider :locale="enLocale">
+      <div style="margin-bottom: 1em">
+        <h5>Format Date and Number</h5>
+        <div style="font-size: 1.2em">
+          Result:
+          <strong>
+            <FormattedText
+              template="Date: {0:d} - Price: {1:c}"
+              :values="formatData"
+              :locale="enLocale"
+            />
+          </strong>
+        </div>
+      </div>
+    </IntlProvider>
+
+    <IntlProvider :locale="enLocale">
+      <div style="margin-bottom: 1em">
+        <h5>Convert Date to String</h5>
+        <div style="font-size: 1.2em">
+          Result:
+          <strong>
+            <FormattedDate :value="newDate" format="d" :locale="enLocale" />
+          </strong>
+        </div>
+      </div>
+    </IntlProvider>
+
+    <IntlProvider :locale="bgLocale">
+      <div style="margin-bottom: 1em">
+        <h5>Convert Number to String</h5>
+        <div style="font-size: 1.2em">
+          Result:
+          <strong>
+            <FormattedNumber :value="10.5" format="c" :locale="bgLocale" />
+          </strong>
+        </div>
+      </div>
+    </IntlProvider>
+  </div>
+</template>
+
+<script>
+import FormattedNumber from "./FormattedNumber.vue";
+import FormattedDate from "./FormattedDate.vue";
+import FormattedText from "./FormattedText.vue";
+import { load, IntlProvider, IntlService } from "@progress/kendo-vue-intl";
+import likelySubtags from "cldr-core/supplemental/likelySubtags.json";
+import currencyData from "cldr-core/supplemental/currencyData.json";
+import weekData from "cldr-core/supplemental/weekData.json";
+import enNumbers from "cldr-numbers-full/main/en/numbers.json";
+import enCurrencies from "cldr-numbers-full/main/en/currencies.json";
+import enCaGregorian from "cldr-dates-full/main/en/ca-gregorian.json";
+import bgNumbers from "cldr-numbers-full/main/bg/numbers.json";
+import bgCurrencies from "cldr-numbers-full/main/bg/currencies.json";
+import bgCaGregorian from "cldr-dates-full/main/bg/ca-gregorian.json";
+
+load(
+    likelySubtags,
+    currencyData,
+    weekData,
+    enNumbers,
+    enCurrencies,
+    enCaGregorian,
+    bgNumbers,
+    bgCurrencies,
+    bgCaGregorian
+);
+
+export default {
+    name: "App",
+    data() {
+        return {
+            enLocale: "en",
+            bgLocale: "bg",
+            formatData: [new Date(), 10.5],
+            newDate: new Date(),
+        };
+    },
+    components: {
+        FormattedNumber,
+        FormattedText,
+        FormattedDate,
+        IntlProvider,
+    },
+};
+</script>
diff --git a/vue-options-api-demos/intl/internationalization/getting-started/main.js b/vue-options-api-demos/intl/internationalization/getting-started/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/intl/internationalization/getting-started/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/intl/internationalization/getting-started/main.vue b/vue-options-api-demos/intl/internationalization/getting-started/main.vue
new file mode 100644
index 00000000..2c60e977
--- /dev/null
+++ b/vue-options-api-demos/intl/internationalization/getting-started/main.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <h6>
+      Format {{ decimal }} using 'n2' format with
+      <strong>formatNumber</strong> function.
+    </h6>
+    <h5>Result: {{ formattedNumber }}</h5>
+  </div>
+</template>
+
+<script>
+import { provideIntlService } from "@progress/kendo-vue-intl";
+
+export default {
+  name: "App",
+  data() {
+    return {
+      decimal: 42.12365,
+    };
+  },
+  computed: {
+    formattedNumber() {
+      return provideIntlService(this).formatNumber(this.decimal, "n2");
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/intl/internationalization/overview/Chooser.vue b/vue-options-api-demos/intl/internationalization/overview/Chooser.vue
new file mode 100644
index 00000000..90fe2441
--- /dev/null
+++ b/vue-options-api-demos/intl/internationalization/overview/Chooser.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="col-xs-12 col-sm-12 example-col">
+    <label> {{ label }}: </label>
+    <DropDownList
+      :style="{ width: '250px', marginleft: '10px' }"
+      :value="value"
+      :data-items="options"
+      @change="onChange"
+    >
+    </DropDownList>
+  </div>
+</template>
+
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  name: 'Chooser',
+  components: {
+    DropDownList,
+  },
+  props: {
+    label: String,
+    value: String,
+    options: Object,
+  },
+  methods: {
+    onChange: function (e) {
+      this.$emit('change', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/intl/internationalization/overview/CurrencyFormatter.vue b/vue-options-api-demos/intl/internationalization/overview/CurrencyFormatter.vue
new file mode 100644
index 00000000..f5d66975
--- /dev/null
+++ b/vue-options-api-demos/intl/internationalization/overview/CurrencyFormatter.vue
@@ -0,0 +1,23 @@
+<template>
+      <div class="col-xs-12 col-sm-6 example-col">
+        <label>Locale currency:</label>{{" "}}
+        {{formattedNumber}}
+      </div>
+</template>
+
+<script>
+import { provideIntlService } from "@progress/kendo-vue-intl";
+
+export default {
+  name: "CurrencyFormatter",
+  inject: {
+    kendoIntlService: { default: null },
+  },
+  computed: {
+    formattedNumber: function(){
+        return provideIntlService(this).formatNumber(100, "c")
+    }
+  }
+}
+
+</script>
diff --git a/vue-options-api-demos/intl/internationalization/overview/DateFormatter.vue b/vue-options-api-demos/intl/internationalization/overview/DateFormatter.vue
new file mode 100644
index 00000000..80652816
--- /dev/null
+++ b/vue-options-api-demos/intl/internationalization/overview/DateFormatter.vue
@@ -0,0 +1,22 @@
+<template>
+      <div class="col-xs-12 col-sm-6 example-col">
+        <label>Locale date:</label>{{" "}}
+        {{formattedDate}}
+      </div>
+</template>
+
+<script>
+import { provideIntlService } from "@progress/kendo-vue-intl";
+
+export default {
+  name: "DateFormatter",
+  inject: {
+    kendoIntlService: { default: null },
+  },
+  computed: {
+      formattedDate: function(){
+        return provideIntlService(this).formatDate(new Date(2000, 10, 6), "EEEE, d.MM.y")
+      }
+  }
+}
+</script>
diff --git a/vue-options-api-demos/intl/internationalization/overview/main.js b/vue-options-api-demos/intl/internationalization/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/intl/internationalization/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/intl/internationalization/overview/main.vue b/vue-options-api-demos/intl/internationalization/overview/main.vue
new file mode 100644
index 00000000..a1a1d613
--- /dev/null
+++ b/vue-options-api-demos/intl/internationalization/overview/main.vue
@@ -0,0 +1,80 @@
+<template>
+      <intl :locale="locale">
+        <div class="row">
+          <Chooser
+            :value="locale"
+            :options="locales"
+            :label="'Select locale'"
+            @change="onChange"
+          />
+          <DateFormatter />
+          <CurrencyFormatter />
+        </div>
+      </intl>
+</template>
+
+<script>
+import likelySubtags from "cldr-core/supplemental/likelySubtags.json";
+import currencyData from "cldr-core/supplemental/currencyData.json";
+import weekData from "cldr-core/supplemental/weekData.json";
+
+import bgNumbers from "cldr-numbers-full/main/bg/numbers.json";
+import bgLocalCurrency from "cldr-numbers-full/main/bg/currencies.json";
+import bgCaGregorian from "cldr-dates-full/main/bg/ca-gregorian.json";
+import bgDateFields from "cldr-dates-full/main/bg/dateFields.json";
+
+import usNumbers from "cldr-numbers-full/main/en/numbers.json";
+import usLocalCurrency from "cldr-numbers-full/main/en/currencies.json";
+import usCaGregorian from "cldr-dates-full/main/en/ca-gregorian.json";
+import usDateFields from "cldr-dates-full/main/en/dateFields.json";
+
+import gbNumbers from "cldr-numbers-full/main/en-GB/numbers.json";
+import gbLocalCurrency from "cldr-numbers-full/main/en-GB/currencies.json";
+import gbCaGregorian from "cldr-dates-full/main/en-GB/ca-gregorian.json";
+import gbDateFields from "cldr-dates-full/main/en-GB/dateFields.json";
+
+import { IntlProvider, load } from "@progress/kendo-vue-intl";
+import CurrencyFormatter from "./CurrencyFormatter.vue";
+import Chooser from "./Chooser.vue";
+import DateFormatter from "./DateFormatter.vue";
+
+load(
+  likelySubtags,
+  currencyData,
+  weekData,
+  bgNumbers,
+  bgLocalCurrency,
+  bgCaGregorian,
+  bgDateFields,
+  usNumbers,
+  usLocalCurrency,
+  usCaGregorian,
+  usDateFields,
+  gbNumbers,
+  gbLocalCurrency,
+  gbCaGregorian,
+  gbDateFields
+);
+
+export default {
+    components: {
+      'intl': IntlProvider,
+      DateFormatter,
+      Chooser,
+      CurrencyFormatter
+      },
+    data: function () {
+        return {
+            date: new Date(),
+            locale: "en-US",
+            locales: ["en-US", "bg-BG", "en-GB"]
+        }
+    },
+    methods: {
+      onChange: function(e){
+        this.locale = e.target.value;
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/intl/load-prebuild-data/DateFormatter.vue b/vue-options-api-demos/intl/load-prebuild-data/DateFormatter.vue
new file mode 100644
index 00000000..8c85cc19
--- /dev/null
+++ b/vue-options-api-demos/intl/load-prebuild-data/DateFormatter.vue
@@ -0,0 +1,30 @@
+<template>
+      <div>
+        <span>
+          {{" "}}
+          {{formattedDate}}
+        </span>
+      </div>
+</template>
+
+<script>
+    import {
+      provideIntlService,
+    } from "@progress/kendo-vue-intl";
+
+export default {
+  name: "DateFormatter",
+  props: {
+    date: String
+  },
+  inject: {
+    kendoIntlService: { default: null },
+  },
+  computed: {
+      formattedDate: function(){
+        return provideIntlService(this).formatDate(this.date, "EEEE, d.MM.y")
+      }
+  }
+}
+
+</script>
diff --git a/vue-options-api-demos/intl/load-prebuild-data/main.js b/vue-options-api-demos/intl/load-prebuild-data/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/intl/load-prebuild-data/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/intl/load-prebuild-data/main.vue b/vue-options-api-demos/intl/load-prebuild-data/main.vue
new file mode 100644
index 00000000..9d2c4815
--- /dev/null
+++ b/vue-options-api-demos/intl/load-prebuild-data/main.vue
@@ -0,0 +1,70 @@
+<template>
+ <div class="row">
+        <div class="col-xs-12 col-sm-4 example-col">
+          Date: <strong>{{date.toString()}}</strong>
+        </div>
+        <div class="col-xs-12 col-sm-4 example-col">
+          <dateformatter />
+          Formatted using the default "bg" locale:
+          <strong>
+            <intl :locale="'bg'">
+              <dateformatter :date='date' />
+            </intl>
+          </strong>
+        </div>
+        <div class="col-xs-12 col-sm-4 example-col">
+          Formatted using the "de" locale:
+          <strong>
+            <intl :locale="'de'">
+              <dateformatter :date='date' />
+            </intl>
+          </strong>
+        </div>
+      </div>
+</template>
+
+<script>
+import likelySubtags from "cldr-core/supplemental/likelySubtags.json";
+import currencyData from "cldr-core/supplemental/currencyData.json";
+import weekData from "cldr-core/supplemental/weekData.json";
+
+import bgNumbers from "cldr-numbers-full/main/bg/numbers.json";
+import bgLocalCurrency from "cldr-numbers-full/main/bg/currencies.json";
+import bgCaGregorian from "cldr-dates-full/main/bg/ca-gregorian.json";
+import bgDateFields from "cldr-dates-full/main/bg/dateFields.json";
+
+import deNumbers from "cldr-numbers-full/main/de/numbers.json";
+import deLocalCurrency from "cldr-numbers-full/main/de/currencies.json";
+import deCaGregorian from "cldr-dates-full/main/de/ca-gregorian.json";
+import deDateFields from "cldr-dates-full/main/de/dateFields.json";
+
+import { IntlProvider, load } from "@progress/kendo-vue-intl";
+import DateFormatter from "./DateFormatter.vue";
+
+load(
+  likelySubtags,
+  currencyData,
+  weekData,
+  bgLocalCurrency,
+  bgNumbers,
+  bgCaGregorian,
+  bgDateFields,
+  deLocalCurrency,
+  deNumbers,
+  deCaGregorian,
+  deDateFields
+);
+
+export default {
+    components: {
+      'intl': IntlProvider,
+      'dateformatter':DateFormatter
+      },
+    data: function () {
+        return {
+            date: new Date()
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/intl/localization-overview/main.js b/vue-options-api-demos/intl/localization-overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/intl/localization-overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/intl/localization-overview/main.vue b/vue-options-api-demos/intl/localization-overview/main.vue
new file mode 100644
index 00000000..921821a4
--- /dev/null
+++ b/vue-options-api-demos/intl/localization-overview/main.vue
@@ -0,0 +1,125 @@
+<template>
+  <div :dir="isRtl ? 'rtl' : 'ltr'">
+    <div class="example-config">
+      <DropDownList
+        :data-items="languageOptions"
+        :text-field="'text'"
+        :data-item-key="'value'"
+        :value="locale"
+        @change="handleLocaleChange"
+      />
+    </div>
+    <LocalizationProvider :language="locale">
+      <IntlProvider :locale="locale">
+        <Grid
+          :style="{ height: '420px' }"
+          :data-items="gridData"
+          :columns="columns"
+        />
+      </IntlProvider>
+    </LocalizationProvider>
+  </div>
+</template>
+
+<script>
+import { Grid } from "@progress/kendo-vue-grid";
+import {
+  IntlProvider,
+  LocalizationProvider,
+  loadMessages,
+} from "@progress/kendo-vue-intl";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+import esMessages from "./messages-es.json";
+import heMessages from "./messages-he.json";
+
+// Load messages for supported languages
+loadMessages(esMessages, "es-ES");
+loadMessages(heMessages, "he-IL");
+
+export default {
+  name: "App",
+  components: {
+    Grid,
+    IntlProvider,
+    LocalizationProvider,
+    DropDownList,
+  },
+  data() {
+    return {
+      locale: "en-US", // Default locale
+      isRtl: false, // Default direction (left-to-right)
+      languageOptions: [
+        { text: "English", value: "en-US" },
+        { text: "Español", value: "es-ES" },
+        { text: "עברית", value: "he-IL" },
+      ],
+      gridData: [], // Empty grid data
+      columnTitles: {
+        "en-US": {
+          ProductID: "ID",
+          ProductName: "Product Name",
+          FirstOrderedOn: "First Ordered On",
+          UnitPrice: "Unit Price",
+        },
+        "es-ES": {
+          ProductID: "ID",
+          ProductName: "Nombre del producto",
+          FirstOrderedOn: "Primero ordenado en",
+          UnitPrice: "Precio unitario",
+        },
+        "he-IL": {
+          ProductID: "מזהה מוצר",
+          ProductName: "שם המוצר",
+          FirstOrderedOn: "הוזמן לראשונה בתאריך",
+          UnitPrice: "מחיר ליחידה",
+        },
+      },
+    };
+  },
+  computed: {
+    columns() {
+      return [
+        {
+          field: "ProductID",
+          title: this.titles.ProductID,
+          width: "70px",
+          filterable: false,
+        },
+        { field: "ProductName", title: this.titles.ProductName },
+        {
+          field: "FirstOrderedOn",
+          title: this.titles.FirstOrderedOn,
+          filter: "date",
+          format: "{0:D}",
+        },
+        {
+          field: "UnitPrice",
+          title: this.titles.UnitPrice,
+          filter: "numeric",
+          format: "{0:c}",
+        },
+      ];
+    },
+    titles() {
+      return this.columnTitles[this.locale] || this.columnTitles["en-US"];
+    },
+  },
+  methods: {
+    handleLocaleChange(event) {
+      const newLocale = event.value;
+      this.locale = newLocale.value;
+      if (this.locale === "he-IL") {
+        this.isRtl = true;
+      } else {
+        this.isRtl = false;
+      }
+    },
+  },
+};
+</script>
+
+<style>
+.example-config {
+  margin-bottom: 1em;
+}
+</style>
diff --git a/vue-options-api-demos/intl/localization-overview/messages-es.json b/vue-options-api-demos/intl/localization-overview/messages-es.json
new file mode 100644
index 00000000..42f04529
--- /dev/null
+++ b/vue-options-api-demos/intl/localization-overview/messages-es.json
@@ -0,0 +1,5 @@
+{
+    "grid": {
+        "noRecords": "No hay datos disponibles."
+    }
+}
diff --git a/vue-options-api-demos/intl/localization-overview/messages-he.json b/vue-options-api-demos/intl/localization-overview/messages-he.json
new file mode 100644
index 00000000..758e8a91
--- /dev/null
+++ b/vue-options-api-demos/intl/localization-overview/messages-he.json
@@ -0,0 +1,5 @@
+{
+    "grid": {
+        "noRecords": "אין רשומות זמינות"
+    }
+}
diff --git a/vue-options-api-demos/intl/localization/Chooser.vue b/vue-options-api-demos/intl/localization/Chooser.vue
new file mode 100644
index 00000000..90fe2441
--- /dev/null
+++ b/vue-options-api-demos/intl/localization/Chooser.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="col-xs-12 col-sm-12 example-col">
+    <label> {{ label }}: </label>
+    <DropDownList
+      :style="{ width: '250px', marginleft: '10px' }"
+      :value="value"
+      :data-items="options"
+      @change="onChange"
+    >
+    </DropDownList>
+  </div>
+</template>
+
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  name: 'Chooser',
+  components: {
+    DropDownList,
+  },
+  props: {
+    label: String,
+    value: String,
+    options: Object,
+  },
+  methods: {
+    onChange: function (e) {
+      this.$emit('change', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/intl/localization/MessageComponent.vue b/vue-options-api-demos/intl/localization/MessageComponent.vue
new file mode 100644
index 00000000..dcaf75fd
--- /dev/null
+++ b/vue-options-api-demos/intl/localization/MessageComponent.vue
@@ -0,0 +1,25 @@
+<template>
+    <span style='display: block'>
+      {{message}}
+    </span>
+</template>
+
+<script>
+import { provideLocalizationService } from "@progress/kendo-vue-intl";
+
+export default {
+  name: "MessageComponent",
+  props: {
+    messageKey: String,
+    defaultMessage: String
+  },
+  inject: {
+    kendoLocalizationService: { default: null },
+  },
+  computed: {
+        message(){
+          return  provideLocalizationService(this).toLanguageString(this.messageKey, this.defaultMessage);
+        }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/intl/localization/main.js b/vue-options-api-demos/intl/localization/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/intl/localization/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/intl/localization/main.vue b/vue-options-api-demos/intl/localization/main.vue
new file mode 100644
index 00000000..96d26b99
--- /dev/null
+++ b/vue-options-api-demos/intl/localization/main.vue
@@ -0,0 +1,67 @@
+<template>
+      <div>
+        <Chooser
+          :label="'Select language'"
+          :options="languages"
+          :value="language"
+          @change="onChange"
+        />
+        <localization :language="language">
+          <div>
+            <MessageComponent :messageKey="yesterdaysMessageKey" :defaultMessage="defaultMessages['yesterdaysMessageKey']" />
+            <MessageComponent
+              :messageKey="todaysMessages"
+              :defaultMessage="defaultMessages['todaysMessages']"
+            />
+            <MessageComponent
+              :messageKey="tomorrowsMessageKey"
+              :defaultMessage="defaultMessages['tomorrowsMessageKey']"
+            />
+          </div>
+        </localization>
+      </div>
+</template>
+
+<script>
+import Chooser from "./Chooser.vue";
+import MessageComponent from "./MessageComponent.vue";
+import {
+  messages,
+  todaysMessages,
+  yesterdaysMessageKey,
+  tomorrowsMessageKey,
+} from "./messages";
+import { loadMessages, LocalizationProvider } from "@progress/kendo-vue-intl";
+
+loadMessages(messages["es"], "es");
+loadMessages(messages["bg"], "bg");
+
+export default {
+    components: {
+      'MessageComponent': MessageComponent,
+      'localization': LocalizationProvider,
+      'Chooser': Chooser
+      },
+    data: function () {
+        return {
+            language: "en",
+            languages: ["en", "es", "bg"],
+            messages: messages,
+            todaysMessages: todaysMessages,
+            yesterdaysMessageKey: yesterdaysMessageKey,
+            tomorrowsMessageKey: tomorrowsMessageKey,
+            defaultMessages: {
+              ["yesterdaysMessageKey"]: "Yesterday was a good day!",
+              ["todaysMessages"]: "Today is a good day as well!",
+              ["tomorrowsMessageKey"]: "Tomorrow will be even better!",
+            }
+        }
+    },
+    methods: {
+      onChange: function(e){
+        this.language = e.target.value;
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/intl/localization/messages.js b/vue-options-api-demos/intl/localization/messages.js
new file mode 100644
index 00000000..8cc95c03
--- /dev/null
+++ b/vue-options-api-demos/intl/localization/messages.js
@@ -0,0 +1,16 @@
+export const todaysMessages = 'today';
+export const yesterdaysMessageKey = 'yesterday';
+export const tomorrowsMessageKey = 'tomorrow';
+
+export const messages = {
+    bg: {
+        [yesterdaysMessageKey]: 'Вчера беше чудесен ден!',
+        [todaysMessages]: 'Днес е страхотен ден също!',
+        [tomorrowsMessageKey]: 'Утре ще бъде още по-хубаво!'
+    },
+    es: {
+        [yesterdaysMessageKey]: 'Ayer fue un buen dia!',
+        [todaysMessages]: 'Hoy es un buen día también!',
+        [tomorrowsMessageKey]: 'Mañana será aún mejor!'
+    }
+};
diff --git a/vue-options-api-demos/intl/number-formatting/FormattedNumber.vue b/vue-options-api-demos/intl/number-formatting/FormattedNumber.vue
new file mode 100644
index 00000000..0d163fa6
--- /dev/null
+++ b/vue-options-api-demos/intl/number-formatting/FormattedNumber.vue
@@ -0,0 +1,37 @@
+<template>
+    <em>{{ formatNumber(value, format, formatOptions, locale) }}</em>
+</template>
+<script>
+import { IntlService } from '@progress/kendo-vue-intl';
+
+export default{
+    name: 'FormattedNumber',
+    props: {
+        value: {
+            type: Number,
+            required: true,
+        },
+        format: {
+            type: String,
+            default: null,
+        },
+        formatOptions: {
+            type: Object,
+            default: null,
+        },
+        locale: {
+            type: String,
+            required: true,
+        },
+    },
+    methods: {
+        formatNumber(value, format, formatOptions, locale) {
+            const intl = new IntlService(locale); // Create a new instance with the correct locale
+            if (formatOptions) {
+                return intl.formatNumber(value, formatOptions);
+            }
+            return intl.formatNumber(value, format);
+        },
+    },
+}
+</script>
diff --git a/vue-options-api-demos/intl/number-formatting/main.js b/vue-options-api-demos/intl/number-formatting/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/intl/number-formatting/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/intl/number-formatting/main.vue b/vue-options-api-demos/intl/number-formatting/main.vue
new file mode 100644
index 00000000..b019427e
--- /dev/null
+++ b/vue-options-api-demos/intl/number-formatting/main.vue
@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <IntlProvider :locale="enLocale">
+      <div style="margin-bottom: 1em">
+        <h5>Format 1234.567 using a 'n2' format (2 decimal places)</h5>
+        <div style="font-size: 1.2em">
+          Result:
+          <strong>
+            <FormattedNumber :value="1234.567" format="n2" :locale="enLocale" />
+          </strong>
+        </div>
+      </div>
+    </IntlProvider>
+
+    <IntlProvider :locale="deLocale">
+      <div style="margin-bottom: 1em">
+        <h5>Format 1234.567 using a 'c' format</h5>
+        <div style="font-size: 1.2em">
+          Result:
+          <strong>
+            <FormattedNumber :value="1234.567" format="c" :locale="deLocale" />
+          </strong>
+        </div>
+      </div>
+    </IntlProvider>
+
+    <IntlProvider :locale="bgLocale">
+      <div style="margin-bottom: 1em">
+        <h5>Format 1234.567 using custom format options</h5>
+        <div style="font-size: 1.2em">
+          Result:
+          <strong>
+            <FormattedNumber
+              :value="1234.567"
+              :formatOptions="{
+                style: 'currency',
+                currency: 'USD',
+                currencyDisplay: 'name',
+              }"
+              :locale="bgLocale"
+            />
+          </strong>
+        </div>
+      </div>
+    </IntlProvider>
+
+    <IntlProvider :locale="enLocale">
+      <div>
+        <h5>Format 2345678 using a custom '#,##0.00' format</h5>
+        <div style="font-size: 1.2em">
+          Result:
+          <strong>
+            <FormattedNumber
+              :value="2345678"
+              format="#,##0.00"
+              :locale="enLocale"
+            />
+          </strong>
+        </div>
+      </div>
+    </IntlProvider>
+  </div>
+</template>
+
+<script>
+import FormattedNumber from "./FormattedNumber.vue";
+import { load, IntlProvider } from "@progress/kendo-vue-intl";
+import likelySubtags from "cldr-core/supplemental/likelySubtags.json";
+import currencyData from "cldr-core/supplemental/currencyData.json";
+import weekData from "cldr-core/supplemental/weekData.json";
+
+// CLDR Data for English, German, and Bulgarian
+import enNumbers from "cldr-numbers-full/main/en/numbers.json";
+import enCurrencies from "cldr-numbers-full/main/en/currencies.json";
+import enCaGregorian from "cldr-dates-full/main/en/ca-gregorian.json";
+
+import deNumbers from "cldr-numbers-full/main/de/numbers.json";
+import deCurrencies from "cldr-numbers-full/main/de/currencies.json";
+import deCaGregorian from "cldr-dates-full/main/de/ca-gregorian.json";
+
+import bgNumbers from "cldr-numbers-full/main/bg/numbers.json";
+import bgCurrencies from "cldr-numbers-full/main/bg/currencies.json";
+import bgCaGregorian from "cldr-dates-full/main/bg/ca-gregorian.json";
+
+// Load the necessary CLDR data
+load(
+    likelySubtags,
+    currencyData,
+    weekData,
+    enNumbers,
+    enCurrencies,
+    enCaGregorian,
+    deNumbers,
+    deCurrencies,
+    deCaGregorian,
+    bgNumbers,
+    bgCurrencies,
+    bgCaGregorian
+);
+
+export default {
+    name: "App",
+    data() {
+        return {
+            enLocale: "en",
+            deLocale: "de",
+            bgLocale: "bg",
+        };
+    },
+    components: {
+        IntlProvider,
+        FormattedNumber,
+    },
+};
+</script>
diff --git a/vue-options-api-demos/intl/number-parsing/main.js b/vue-options-api-demos/intl/number-parsing/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/intl/number-parsing/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/intl/number-parsing/main.vue b/vue-options-api-demos/intl/number-parsing/main.vue
new file mode 100644
index 00000000..f8581405
--- /dev/null
+++ b/vue-options-api-demos/intl/number-parsing/main.vue
@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <div style="margin-bottom: 1em">
+      <h5>String "12.22" to parse</h5>
+      <div style="font-size: 1.2em">
+        Result:
+        <strong>
+          <em>{{
+            floatNumber !== null ? floatNumber.toString() : "Invalid number"
+          }}</em>
+        </strong>
+      </div>
+    </div>
+
+    <div style="margin-bottom: 1em">
+      <h5>String "1.212,22 €" to parse</h5>
+      <div style="font-size: 1.2em">
+        Result:
+        <strong>
+          <em>{{
+            currency !== null ? currency.toString() : "Invalid number"
+          }}</em>
+        </strong>
+      </div>
+    </div>
+
+    <div style="margin-bottom: 1em">
+      <h5>String "10.26 %" to parse</h5>
+      <div style="font-size: 1.2em">
+        Result:
+        <strong>
+          <em>{{
+            percentage !== null ? percentage.toString() : "Invalid number"
+          }}</em>
+        </strong>
+      </div>
+    </div>
+
+    <div>
+      <h5>String "1,0000123e+4" to parse</h5>
+      <div style="font-size: 1.2em">
+        Result:
+        <strong>
+          <em>{{
+            exponential !== null ? exponential.toString() : "Invalid number"
+          }}</em>
+        </strong>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { IntlService } from "@progress/kendo-vue-intl";
+
+export default {
+  name: "App",
+  data() {
+    return {
+      floatNumber: null,
+      currency: null,
+      percentage: null,
+      exponential: null,
+    };
+  },
+  created() {
+    const intl = new IntlService("en");
+
+    this.floatNumber = intl.parseNumber("12.22");
+    this.currency = intl.parseNumber("1.212,22 €", "de");
+    this.percentage = intl.parseNumber("10.26 %");
+    this.exponential = intl.parseNumber("1,0000123e+4", "bg");
+  },
+};
+</script>
diff --git a/vue-options-api-demos/intl/reacting/Chooser.vue b/vue-options-api-demos/intl/reacting/Chooser.vue
new file mode 100644
index 00000000..90fe2441
--- /dev/null
+++ b/vue-options-api-demos/intl/reacting/Chooser.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="col-xs-12 col-sm-12 example-col">
+    <label> {{ label }}: </label>
+    <DropDownList
+      :style="{ width: '250px', marginleft: '10px' }"
+      :value="value"
+      :data-items="options"
+      @change="onChange"
+    >
+    </DropDownList>
+  </div>
+</template>
+
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  name: 'Chooser',
+  components: {
+    DropDownList,
+  },
+  props: {
+    label: String,
+    value: String,
+    options: Object,
+  },
+  methods: {
+    onChange: function (e) {
+      this.$emit('change', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/intl/reacting/CurrencyFormatter.vue b/vue-options-api-demos/intl/reacting/CurrencyFormatter.vue
new file mode 100644
index 00000000..f5d66975
--- /dev/null
+++ b/vue-options-api-demos/intl/reacting/CurrencyFormatter.vue
@@ -0,0 +1,23 @@
+<template>
+      <div class="col-xs-12 col-sm-6 example-col">
+        <label>Locale currency:</label>{{" "}}
+        {{formattedNumber}}
+      </div>
+</template>
+
+<script>
+import { provideIntlService } from "@progress/kendo-vue-intl";
+
+export default {
+  name: "CurrencyFormatter",
+  inject: {
+    kendoIntlService: { default: null },
+  },
+  computed: {
+    formattedNumber: function(){
+        return provideIntlService(this).formatNumber(100, "c")
+    }
+  }
+}
+
+</script>
diff --git a/vue-options-api-demos/intl/reacting/DateFormatter.vue b/vue-options-api-demos/intl/reacting/DateFormatter.vue
new file mode 100644
index 00000000..80652816
--- /dev/null
+++ b/vue-options-api-demos/intl/reacting/DateFormatter.vue
@@ -0,0 +1,22 @@
+<template>
+      <div class="col-xs-12 col-sm-6 example-col">
+        <label>Locale date:</label>{{" "}}
+        {{formattedDate}}
+      </div>
+</template>
+
+<script>
+import { provideIntlService } from "@progress/kendo-vue-intl";
+
+export default {
+  name: "DateFormatter",
+  inject: {
+    kendoIntlService: { default: null },
+  },
+  computed: {
+      formattedDate: function(){
+        return provideIntlService(this).formatDate(new Date(2000, 10, 6), "EEEE, d.MM.y")
+      }
+  }
+}
+</script>
diff --git a/vue-options-api-demos/intl/reacting/main.js b/vue-options-api-demos/intl/reacting/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/intl/reacting/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/intl/reacting/main.vue b/vue-options-api-demos/intl/reacting/main.vue
new file mode 100644
index 00000000..a1a1d613
--- /dev/null
+++ b/vue-options-api-demos/intl/reacting/main.vue
@@ -0,0 +1,80 @@
+<template>
+      <intl :locale="locale">
+        <div class="row">
+          <Chooser
+            :value="locale"
+            :options="locales"
+            :label="'Select locale'"
+            @change="onChange"
+          />
+          <DateFormatter />
+          <CurrencyFormatter />
+        </div>
+      </intl>
+</template>
+
+<script>
+import likelySubtags from "cldr-core/supplemental/likelySubtags.json";
+import currencyData from "cldr-core/supplemental/currencyData.json";
+import weekData from "cldr-core/supplemental/weekData.json";
+
+import bgNumbers from "cldr-numbers-full/main/bg/numbers.json";
+import bgLocalCurrency from "cldr-numbers-full/main/bg/currencies.json";
+import bgCaGregorian from "cldr-dates-full/main/bg/ca-gregorian.json";
+import bgDateFields from "cldr-dates-full/main/bg/dateFields.json";
+
+import usNumbers from "cldr-numbers-full/main/en/numbers.json";
+import usLocalCurrency from "cldr-numbers-full/main/en/currencies.json";
+import usCaGregorian from "cldr-dates-full/main/en/ca-gregorian.json";
+import usDateFields from "cldr-dates-full/main/en/dateFields.json";
+
+import gbNumbers from "cldr-numbers-full/main/en-GB/numbers.json";
+import gbLocalCurrency from "cldr-numbers-full/main/en-GB/currencies.json";
+import gbCaGregorian from "cldr-dates-full/main/en-GB/ca-gregorian.json";
+import gbDateFields from "cldr-dates-full/main/en-GB/dateFields.json";
+
+import { IntlProvider, load } from "@progress/kendo-vue-intl";
+import CurrencyFormatter from "./CurrencyFormatter.vue";
+import Chooser from "./Chooser.vue";
+import DateFormatter from "./DateFormatter.vue";
+
+load(
+  likelySubtags,
+  currencyData,
+  weekData,
+  bgNumbers,
+  bgLocalCurrency,
+  bgCaGregorian,
+  bgDateFields,
+  usNumbers,
+  usLocalCurrency,
+  usCaGregorian,
+  usDateFields,
+  gbNumbers,
+  gbLocalCurrency,
+  gbCaGregorian,
+  gbDateFields
+);
+
+export default {
+    components: {
+      'intl': IntlProvider,
+      DateFormatter,
+      Chooser,
+      CurrencyFormatter
+      },
+    data: function () {
+        return {
+            date: new Date(),
+            locale: "en-US",
+            locales: ["en-US", "bg-BG", "en-GB"]
+        }
+    },
+    methods: {
+      onChange: function(e){
+        this.locale = e.target.value;
+      }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/intl/rtl-support/main.js b/vue-options-api-demos/intl/rtl-support/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/intl/rtl-support/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/intl/rtl-support/main.vue b/vue-options-api-demos/intl/rtl-support/main.vue
new file mode 100644
index 00000000..9ae7ea01
--- /dev/null
+++ b/vue-options-api-demos/intl/rtl-support/main.vue
@@ -0,0 +1,47 @@
+<template>
+  <TabStrip :selected="selected" @select="onSelect" :tabs="tabs" dir="rtl">
+    <template v-slot:TabOne>
+      <p>Tab 1 Content</p>
+    </template>
+    <template v-slot:TabTwo>
+      <p>Tab 2 Content</p>
+    </template>
+    <template v-slot:TabThree>
+      <p>Tab 3 Content</p>
+    </template>
+  </TabStrip>
+</template>
+
+<script>
+import { TabStrip } from "@progress/kendo-vue-layout";
+
+export default {
+  components: {
+    TabStrip,
+  },
+  data: function () {
+    return {
+      selected: 2,
+      tabs: [
+        {
+          title: "Tab 1 Title",
+          content: "TabOne",
+        },
+        {
+          title: "Tab 2 Title",
+          content: "TabTwo",
+        },
+        {
+          title: "Tab 3 Title",
+          content: "TabThree",
+        },
+      ],
+    };
+  },
+  methods: {
+    onSelect: function (e) {
+      this.selected = e.selected;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/intl/shared/Chooser.vue b/vue-options-api-demos/intl/shared/Chooser.vue
new file mode 100644
index 00000000..90fe2441
--- /dev/null
+++ b/vue-options-api-demos/intl/shared/Chooser.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="col-xs-12 col-sm-12 example-col">
+    <label> {{ label }}: </label>
+    <DropDownList
+      :style="{ width: '250px', marginleft: '10px' }"
+      :value="value"
+      :data-items="options"
+      @change="onChange"
+    >
+    </DropDownList>
+  </div>
+</template>
+
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  name: 'Chooser',
+  components: {
+    DropDownList,
+  },
+  props: {
+    label: String,
+    value: String,
+    options: Object,
+  },
+  methods: {
+    onChange: function (e) {
+      this.$emit('change', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/intl/use-in-component/DateFormatter.vue b/vue-options-api-demos/intl/use-in-component/DateFormatter.vue
new file mode 100644
index 00000000..8c85cc19
--- /dev/null
+++ b/vue-options-api-demos/intl/use-in-component/DateFormatter.vue
@@ -0,0 +1,30 @@
+<template>
+      <div>
+        <span>
+          {{" "}}
+          {{formattedDate}}
+        </span>
+      </div>
+</template>
+
+<script>
+    import {
+      provideIntlService,
+    } from "@progress/kendo-vue-intl";
+
+export default {
+  name: "DateFormatter",
+  props: {
+    date: String
+  },
+  inject: {
+    kendoIntlService: { default: null },
+  },
+  computed: {
+      formattedDate: function(){
+        return provideIntlService(this).formatDate(this.date, "EEEE, d.MM.y")
+      }
+  }
+}
+
+</script>
diff --git a/vue-options-api-demos/intl/use-in-component/main.js b/vue-options-api-demos/intl/use-in-component/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/intl/use-in-component/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/intl/use-in-component/main.vue b/vue-options-api-demos/intl/use-in-component/main.vue
new file mode 100644
index 00000000..9d2c4815
--- /dev/null
+++ b/vue-options-api-demos/intl/use-in-component/main.vue
@@ -0,0 +1,70 @@
+<template>
+ <div class="row">
+        <div class="col-xs-12 col-sm-4 example-col">
+          Date: <strong>{{date.toString()}}</strong>
+        </div>
+        <div class="col-xs-12 col-sm-4 example-col">
+          <dateformatter />
+          Formatted using the default "bg" locale:
+          <strong>
+            <intl :locale="'bg'">
+              <dateformatter :date='date' />
+            </intl>
+          </strong>
+        </div>
+        <div class="col-xs-12 col-sm-4 example-col">
+          Formatted using the "de" locale:
+          <strong>
+            <intl :locale="'de'">
+              <dateformatter :date='date' />
+            </intl>
+          </strong>
+        </div>
+      </div>
+</template>
+
+<script>
+import likelySubtags from "cldr-core/supplemental/likelySubtags.json";
+import currencyData from "cldr-core/supplemental/currencyData.json";
+import weekData from "cldr-core/supplemental/weekData.json";
+
+import bgNumbers from "cldr-numbers-full/main/bg/numbers.json";
+import bgLocalCurrency from "cldr-numbers-full/main/bg/currencies.json";
+import bgCaGregorian from "cldr-dates-full/main/bg/ca-gregorian.json";
+import bgDateFields from "cldr-dates-full/main/bg/dateFields.json";
+
+import deNumbers from "cldr-numbers-full/main/de/numbers.json";
+import deLocalCurrency from "cldr-numbers-full/main/de/currencies.json";
+import deCaGregorian from "cldr-dates-full/main/de/ca-gregorian.json";
+import deDateFields from "cldr-dates-full/main/de/dateFields.json";
+
+import { IntlProvider, load } from "@progress/kendo-vue-intl";
+import DateFormatter from "./DateFormatter.vue";
+
+load(
+  likelySubtags,
+  currencyData,
+  weekData,
+  bgLocalCurrency,
+  bgNumbers,
+  bgCaGregorian,
+  bgDateFields,
+  deLocalCurrency,
+  deNumbers,
+  deCaGregorian,
+  deDateFields
+);
+
+export default {
+    components: {
+      'intl': IntlProvider,
+      'dateformatter':DateFormatter
+      },
+    data: function () {
+        return {
+            date: new Date()
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/labels/error/basic/main.js b/vue-options-api-demos/labels/error/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/labels/error/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/labels/error/basic/main.vue b/vue-options-api-demos/labels/error/basic/main.vue
new file mode 100644
index 00000000..0e1fe0e6
--- /dev/null
+++ b/vue-options-api-demos/labels/error/basic/main.vue
@@ -0,0 +1,48 @@
+<template>
+    <formelement style="max-width: 400px">
+        <klabel :editor-id="editorId" >
+            First name:&nbsp;
+        </klabel>
+        <kinput :style="{ width: '230px' }" 
+            :id="editorId"
+            @change="onChange"
+            />
+        <error v-if="!showValidationMessage">
+            {{validationMessage}}
+        </error>
+    </formelement>
+</template>
+<script>
+import { FormElement } from "@progress/kendo-vue-form";
+import { Label , Error } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+
+export default {
+    components: {
+        klabel: Label ,
+        error: Error,
+        formelement: FormElement,
+        kinput: Input
+    },
+    data: function(){
+      return {
+        editorId: 'firstName',
+        isValid:!!this.value,
+        validationMessage: "This field is required.",
+        value: undefined,
+      }
+    },
+    computed: {
+        showValidationMessage() {
+            return this.isValid;
+        }
+    },
+    methods: {
+        onChange: function(e){
+            e.value.length > 0 ? this.isValid=true : this.isValid=false;
+            this.value = e.value;
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/labels/error/direction/main.js b/vue-options-api-demos/labels/error/direction/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/labels/error/direction/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/labels/error/direction/main.vue b/vue-options-api-demos/labels/error/direction/main.vue
new file mode 100644
index 00000000..c0721a41
--- /dev/null
+++ b/vue-options-api-demos/labels/error/direction/main.vue
@@ -0,0 +1,48 @@
+<template>
+    <formelement style="max-width: 400px">
+        <klabel :editor-id="editorId" >
+            First name:&nbsp;
+        </klabel>
+        <kinput :style="{ width: '230px' }" 
+            :id="editorId"
+            @change="onChange"
+            />
+        <error v-if="!showValidationMessage" :direction="'end'">
+            {{validationMessage}}
+        </error>
+    </formelement>
+</template>
+<script>
+import { FormElement } from "@progress/kendo-vue-form";
+import { Label , Error } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+
+export default {
+    components: {
+        klabel: Label ,
+        error: Error,
+        formelement: FormElement,
+        kinput: Input
+    },
+    data: function(){
+      return {
+        editorId: 'firstName',
+        isValid:!!this.value,
+        validationMessage: "This field is required.",
+        value: undefined,
+      }
+    },
+    computed: {
+        showValidationMessage() {
+            return this.isValid;
+        }
+    },
+    methods: {
+        onChange: function(e){
+            e.value.length > 0 ? this.isValid=true : this.isValid=false;
+            this.value = e.value;
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/labels/floatinglabel/basic/main.js b/vue-options-api-demos/labels/floatinglabel/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/labels/floatinglabel/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/labels/floatinglabel/basic/main.vue b/vue-options-api-demos/labels/floatinglabel/basic/main.vue
new file mode 100644
index 00000000..e4d7fa84
--- /dev/null
+++ b/vue-options-api-demos/labels/floatinglabel/basic/main.vue
@@ -0,0 +1,189 @@
+<template>
+  <div class="example-wrapper row">
+    <div class="col-xs-12 col-md-6 example-col">
+      <p>Input</p>
+      <kinput :style="{ width: '230px' }"
+        :id="editorId"
+        :placeholder="'Enter your first name'"
+        :label="'First Name:'"
+        @change="onChangeInput"
+      />
+      <br />
+      <br />
+      <p>MaskedTextBox</p>
+      <maskedtextbox :style="{ width: '230px' }"
+        :mask="mask"
+        :value="maskedTextBoxValue"
+        :label="'Phone number:'"
+        @change="onChangeMaskedTextBox"
+      ></maskedtextbox>
+      <br />
+      <br />
+      <p>NumericTextBox</p>
+      <numerictextbox :style="{ width: '230px' }"
+        :label="'Enter kilometers:'"
+        v-model="numericTextBoxValue"
+      >
+      </numerictextbox>
+      <br />
+      <br />
+      <p>DateInput</p>
+      <dateinput :style="{ width: '230px' }"
+        :label="'Enter date:'"
+        @change="onChangeDateInput"
+        @blur="onDateInputBlur"
+        :placeholder="''"
+      />
+      <br />
+      <br />
+      <p>DatePicker</p>
+      <datepicker :style="{ width: '230px' }"
+        :label="'Select date:'"
+        @change="onChangeDatePicker"
+        :value="datePickerValue"
+        :placeholder="''"
+      >
+      </datepicker>
+      <br />
+      <br />
+      <p>TimePicker</p>
+      <timepicker :style="{ width: '230px' }"
+        :label="'Select time:'"
+        @change="onChangeTimePicker"
+        :value="timePickerValue"
+        :placeholder="''"
+      >
+      </timepicker>
+      <br />
+      <br />
+      <p>DateTimePicker</p>
+
+      <datetimepicker :style="{ width: '230px' }"
+        :label="'Select date and time:'"
+        @change="onChangeDateTimePicker"
+        :value="dateTimePickerValue"
+        :placeholder="''"
+      >
+      </datetimepicker>
+    </div>
+    <div class="col-xs-12 col-md-6 example-col">
+      <div>
+        <p>AutoComplete</p>
+        <autocomplete :style="{ width: '230px' }"
+          :label="'Product'"
+          :data-items="dataProducts"
+          :text-field="'productName'"
+        >
+        </autocomplete>
+      </div>
+      <br />
+      <div>
+        <p>ComboBox</p>
+         <combobox
+          :style="{ width: '230px' }"
+          :label="'Product'"
+          :data-items="dataProducts"
+          :text-field="'productName'"
+        >
+        </combobox>
+      </div>
+      <br />
+      <div>
+        <p>DropDownList</p>
+         <dropdownlist
+          :style="{ width: '230px' }"
+          :label="'Product'"
+          :data-items="dataProducts"
+          :text-field="'productName'"
+          :value-field="'productId'"
+        >
+        </dropdownlist>
+      </div>
+      <br />
+      <div>
+        <p>MultiSelect</p>
+        <multiselect :style="{ width: '230px' }"
+          :label="'Product'"
+          :data-items="dataProducts"
+          :text-field="'productName'"
+          :value-field="'productId'"
+        >
+        </multiselect>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  DateInput,
+  DatePicker,
+  TimePicker,
+  DateTimePicker,
+} from "@progress/kendo-vue-dateinputs";
+import {
+  Input,
+  MaskedTextBox,
+  NumericTextBox,
+} from "@progress/kendo-vue-inputs";
+import {
+  AutoComplete,
+  ComboBox,
+  DropDownList,
+  MultiSelect,
+} from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    kinput: Input,
+    maskedtextbox: MaskedTextBox,
+    numerictextbox: NumericTextBox,
+    datepicker: DatePicker,
+    datetimepicker: DateTimePicker,
+    timepicker: TimePicker,
+    dateinput: DateInput,
+    autocomplete: AutoComplete,
+    combobox: ComboBox,
+    dropdownlist: DropDownList,
+    multiselect: MultiSelect,
+  },
+  data: function () {
+    return {
+      value: undefined,
+      mask: "(999) 000-00-00-00",
+      maskedTextBoxValue: undefined,
+      numericTextBoxValue: undefined,
+      dateInputValue: undefined,
+      datePickerValue: undefined,
+      timePickerValue: undefined,
+      dateTimePickerValue: undefined,
+      dataProducts: [
+        { productName: "Chai", productId: 1, categoryId: 1 },
+        { productName: "Chang", productId: 2, categoryId: 1 },
+        { productName: "Aniseed Syrup", productId: 3, categoryId: 2 },
+        { productName: "Genen Shouyu", productId: 4, categoryId: 2 },
+        { productName: "Ikura", productId: 5, categoryId: 3 },
+      ],
+    };
+  },
+  methods: {
+    onChangeInput: function (e) {
+      this.value = e.value;
+    },
+    onChangeMaskedTextBox: function (e) {
+      this.maskedTextBoxValue = e.value;
+    },
+    onChangeDateInput: function (e) {
+      this.dateInputValue = e.value;
+    },
+    onChangeDatePicker: function (e) {
+      this.datePickerValue = e.value;
+    },
+    onChangeDateTimePicker: function (e) {
+      this.dateTimePickerValue = e.value;
+    },
+    onChangeTimePicker: function (e) {
+      this.timePickerValue = e.value;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/labels/floatinglabel/custom/main.js b/vue-options-api-demos/labels/floatinglabel/custom/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/labels/floatinglabel/custom/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/labels/floatinglabel/custom/main.vue b/vue-options-api-demos/labels/floatinglabel/custom/main.vue
new file mode 100644
index 00000000..f1475b85
--- /dev/null
+++ b/vue-options-api-demos/labels/floatinglabel/custom/main.vue
@@ -0,0 +1,39 @@
+<template>
+        <floatinglabel 
+            :editor-id="editorId" 
+            :editor-value="ddlState"
+            :label="'Shirt Size:'">
+             <dropdownlist
+          :style="{ width: '230px' }" 
+                :id="editorId"
+                :ariaLabelledBy="labelId"
+                :data-items="sizes"
+                @change="onChange"
+                />
+        </floatinglabel>
+</template>
+<script>
+import { FloatingLabel } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+    components: {
+        floatinglabel: FloatingLabel,
+        dropdownlist: DropDownList
+    },
+    data: function(){
+      return {
+        editorId: 'sizes-editor',
+        labelId: 'sizes-label',
+        ddlState: undefined,
+        sizes: ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"]
+      }
+    },
+    methods: {
+      onChange: function(e){
+          this.ddlState = e.value;
+      }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/labels/floatinglabel/optional/main.js b/vue-options-api-demos/labels/floatinglabel/optional/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/labels/floatinglabel/optional/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/labels/floatinglabel/optional/main.vue b/vue-options-api-demos/labels/floatinglabel/optional/main.vue
new file mode 100644
index 00000000..40198b46
--- /dev/null
+++ b/vue-options-api-demos/labels/floatinglabel/optional/main.vue
@@ -0,0 +1,36 @@
+<template>
+        <floatinglabel 
+            :editor-id="editorId" 
+            :editor-value="value"
+            :optional="true"
+            :label="'First Name'">
+            <kinput :style="{ width: '230px' }" 
+                :id="editorId"
+                @change="onChange"
+                />
+        </floatinglabel>
+</template>
+
+<script>
+import { FloatingLabel } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+
+export default {
+    components: {
+        floatinglabel: FloatingLabel,
+        kinput: Input
+    },
+    data: function(){
+      return {
+        editorId: 'firstName',
+        value: undefined,
+      }
+    },
+    methods: {
+      onChange: function(e){
+          this.value = e.value;
+      }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/labels/floatinglabel/placeholder/main.js b/vue-options-api-demos/labels/floatinglabel/placeholder/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/labels/floatinglabel/placeholder/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/labels/floatinglabel/placeholder/main.vue b/vue-options-api-demos/labels/floatinglabel/placeholder/main.vue
new file mode 100644
index 00000000..e4f9a077
--- /dev/null
+++ b/vue-options-api-demos/labels/floatinglabel/placeholder/main.vue
@@ -0,0 +1,36 @@
+<template>
+        <floatinglabel 
+            :editor-id="editorId" 
+            :editor-value="value"
+            :label="'Home Address:'">
+            <kinput :style="{ width: '230px' }" 
+                :id="editorId"
+                :placeholder="placeholder"
+                @change="onChange"
+                />
+        </floatinglabel>
+</template>
+<script>
+import { FloatingLabel } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+
+export default {
+    components: {
+        floatinglabel: FloatingLabel,
+        kinput: Input
+    },
+    data: function(){
+      return {
+        editorId: 'homeaddress',
+        placeholder : 'e.g.: Dublin blvd',
+        value: undefined,
+      }
+    },
+    methods: {
+      onChange: function(e){
+          this.value = e.value;
+      }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/labels/floatinglabel/validation/main.js b/vue-options-api-demos/labels/floatinglabel/validation/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/labels/floatinglabel/validation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/labels/floatinglabel/validation/main.vue b/vue-options-api-demos/labels/floatinglabel/validation/main.vue
new file mode 100644
index 00000000..d301b9fc
--- /dev/null
+++ b/vue-options-api-demos/labels/floatinglabel/validation/main.vue
@@ -0,0 +1,57 @@
+<template>
+    <formelement style="max-width: 400px">
+      <fieldwrapper>
+        <floatinglabel 
+            :editor-id="editorId" 
+            :editor-value="value"
+            :label="'First Name:'"
+            :label-class="'k-form-label'">
+            <div class="k-form-field-wrap">
+                <kinput :style="{ width: '230px' }" 
+                    :id="editorId"
+                    :valid="isValid"
+                    @change="onChange"
+                    />
+                <error v-if="!showValidationMessage">
+                    {{validationMessage}}
+                </error>
+            </div>
+        </floatinglabel>
+      </fieldwrapper>
+    </formelement>
+</template>
+<script>
+import { FormElement, FieldWrapper } from "@progress/kendo-vue-form";
+import { FloatingLabel, Error } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+
+export default {
+    components: {
+        floatinglabel: FloatingLabel,
+        error: Error,
+        formelement: FormElement,
+        fieldwrapper: FieldWrapper,
+        kinput: Input
+    },
+    data: function(){
+      return {
+        editorId: 'firstName',
+        isValid:!!this.value,
+        validationMessage: "This field is required.",
+        value: undefined,
+      }
+    },
+    computed: {
+        showValidationMessage() {
+            return this.isValid;
+        }
+    },
+    methods: {
+        onChange: function(e){
+            e.value.length > 0 ? this.isValid=true : this.isValid=false;
+            this.value = e.value;
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/labels/hint/basic/main.js b/vue-options-api-demos/labels/hint/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/labels/hint/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/labels/hint/basic/main.vue b/vue-options-api-demos/labels/hint/basic/main.vue
new file mode 100644
index 00000000..7b65325f
--- /dev/null
+++ b/vue-options-api-demos/labels/hint/basic/main.vue
@@ -0,0 +1,35 @@
+<template>
+    <formelement style="max-width: 400px">
+        <klabel :editor-id="editorId" >
+            First name:&nbsp;
+        </klabel>
+        <kinput :style="{ width: '230px' }" 
+            :id="editorId"
+            :aria-describedby="'firstNameHint'"
+            />
+        <hint :id="'firstNameHint'">
+            e.g.: Peter
+        </hint>
+    </formelement>
+</template>
+<script>
+import { FormElement } from "@progress/kendo-vue-form";
+import { Label, Hint } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+
+export default {
+    components: {
+        klabel: Label ,
+        hint: Hint,
+        formelement: FormElement,
+        kinput: Input
+    },
+    data: function(){
+        return {
+            editorId: 'firstName',
+            validationMessage: "This field is required.",
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/labels/hint/direction/main.js b/vue-options-api-demos/labels/hint/direction/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/labels/hint/direction/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/labels/hint/direction/main.vue b/vue-options-api-demos/labels/hint/direction/main.vue
new file mode 100644
index 00000000..006d3a71
--- /dev/null
+++ b/vue-options-api-demos/labels/hint/direction/main.vue
@@ -0,0 +1,35 @@
+<template>
+    <formelement style="max-width: 400px">
+        <klabel :editor-id="editorId" >
+            First name:&nbsp;
+        </klabel>
+        <kinput :style="{ width: '230px' }" 
+            :id="editorId"
+            :aria-describedby="'firstNameHint'"
+            />
+        <hint :id="'firstNameHint'" :direction="'end'">
+            e.g.: Peter
+        </hint>
+    </formelement>
+</template>
+<script>
+import { FormElement } from "@progress/kendo-vue-form";
+import { Label, Hint } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+
+export default {
+    components: {
+        label: Label ,
+        hint: Hint,
+        formelement: FormElement,
+        kinput: Input
+    },
+    data: function(){
+        return {
+            editorId: 'firstName',
+            validationMessage: "This field is required.",
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/labels/label/basic/main.js b/vue-options-api-demos/labels/label/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/labels/label/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/labels/label/basic/main.vue b/vue-options-api-demos/labels/label/basic/main.vue
new file mode 100644
index 00000000..37d82598
--- /dev/null
+++ b/vue-options-api-demos/labels/label/basic/main.vue
@@ -0,0 +1,27 @@
+  <template>
+      <div>
+          <klabel :editor-id="editorId">
+              First Name:&nbsp;        
+          </klabel>
+          <kinput :style="{ width: '230px' }" :id="editorId" />
+      </div>
+  </template>
+  
+  <script>
+  import { Label } from "@progress/kendo-vue-labels";
+  import { Input } from "@progress/kendo-vue-inputs";
+
+  export default {
+      components: {
+          klabel: Label ,
+          kinput: Input
+      },
+      data: function(){
+        return {
+          editorId: 'firstName',
+          value: undefined,
+        }
+      }
+  }
+  </script>
+
diff --git a/vue-options-api-demos/labels/label/custom/main.js b/vue-options-api-demos/labels/label/custom/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/labels/label/custom/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/labels/label/custom/main.vue b/vue-options-api-demos/labels/label/custom/main.vue
new file mode 100644
index 00000000..1e9b18dd
--- /dev/null
+++ b/vue-options-api-demos/labels/label/custom/main.vue
@@ -0,0 +1,39 @@
+<template>
+        <div>
+            <klabel :id="labelId" :editor-id="editorId">
+              Shirt Size:&nbsp;
+            </klabel>
+             <dropdownlist
+          :style="{ width: '230px' }" 
+                :id="editorId"
+                :ariaLabelledBy="labelId"
+                :data-items="sizes"
+                @change="onChange"
+                />
+        </div>
+</template>
+<script>
+import { Label } from "@progress/kendo-vue-labels";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+    components: {
+        klabel: Label,
+        dropdownlist: DropDownList
+    },
+    data: function(){
+      return {
+        editorId: 'sizes-editor',
+        labelId: 'sizes-label',
+        ddlState: undefined,
+        sizes: ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"]
+      }
+    },
+    methods: {
+      onChange: function(e){
+          this.ddlState = e.value;
+      }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/labels/label/optional/main.js b/vue-options-api-demos/labels/label/optional/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/labels/label/optional/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/labels/label/optional/main.vue b/vue-options-api-demos/labels/label/optional/main.vue
new file mode 100644
index 00000000..e532083c
--- /dev/null
+++ b/vue-options-api-demos/labels/label/optional/main.vue
@@ -0,0 +1,26 @@
+  <template>
+        <div>
+          <klabel :editor-id="editorId" :optional="true">
+              First Name:&nbsp;        
+          </klabel>
+          <kinput :style="{ width: '230px' }" :id="editorId" />
+        </div>
+  </template>
+  <script>
+  import { Label } from "@progress/kendo-vue-labels";
+  import { Input } from "@progress/kendo-vue-inputs";
+
+  export default {
+      components: {
+          klabel: Label ,
+          kinput: Input
+      },
+      data: function(){
+        return {
+          editorId: 'firstName',
+          value: undefined,
+        }
+      }
+  }
+  </script>
+
diff --git a/vue-options-api-demos/labels/label/validation/main.js b/vue-options-api-demos/labels/label/validation/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/labels/label/validation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/labels/label/validation/main.vue b/vue-options-api-demos/labels/label/validation/main.vue
new file mode 100644
index 00000000..117e3f06
--- /dev/null
+++ b/vue-options-api-demos/labels/label/validation/main.vue
@@ -0,0 +1,54 @@
+<template>
+    <formelement style="max-width: 400px">
+      <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="editorId" :editor-valid="false" >
+            First name:&nbsp;
+        </klabel>
+        <div class="k-form-field-wrap">
+            <kinput :style="{ width: '230px' }" 
+                :id="editorId"
+                :valid="isValid"
+                @change="onChange"
+                />
+            <error v-if="!showValidationMessage">
+                {{validationMessage}}
+            </error>
+        </div>
+      </fieldwrapper>
+    </formelement>
+</template>
+<script>
+import { FormElement, FieldWrapper } from "@progress/kendo-vue-form";
+import { Label , Error } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+
+export default {
+    components: {
+        klabel: Label ,
+        error: Error,
+        formelement: FormElement,
+        fieldwrapper: FieldWrapper,
+        kinput: Input
+    },
+    data: function(){
+      return {
+        editorId: 'firstName',
+        isValid:!!this.value,
+        validationMessage: "This field is required.",
+        value: undefined,
+      }
+    },
+    computed: {
+        showValidationMessage() {
+            return this.isValid;
+        }
+    },
+    methods: {
+        onChange: function(e){
+            e.value.length > 0 ? this.isValid=true : this.isValid=false;
+            this.value = e.value;
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/layout/actionsheet/accessibility/main.js b/vue-options-api-demos/layout/actionsheet/accessibility/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/actionsheet/accessibility/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/actionsheet/accessibility/main.vue b/vue-options-api-demos/layout/actionsheet/accessibility/main.vue
new file mode 100644
index 00000000..d5329a95
--- /dev/null
+++ b/vue-options-api-demos/layout/actionsheet/accessibility/main.vue
@@ -0,0 +1,11 @@
+<template>
+  Test test
+</template>
+<script>
+
+export default {
+  components: {
+
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/actionsheet/animation/main.js b/vue-options-api-demos/layout/actionsheet/animation/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/actionsheet/animation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/actionsheet/animation/main.vue b/vue-options-api-demos/layout/actionsheet/animation/main.vue
new file mode 100644
index 00000000..70e49730
--- /dev/null
+++ b/vue-options-api-demos/layout/actionsheet/animation/main.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <KButton
+      :id="'openActionSheetBttn'"
+      @click="openHandler"
+    >
+      OPEN ACTION SHEET
+    </KButton>
+    <ActionSheet
+      :animation="true"
+      :expand="open"
+      :items="items"
+      @close="handleClose"
+      @itemselect="handleItemSelect"
+    >
+    </ActionSheet>
+  </div>
+</template>
+<script>
+import { ActionSheet } from "@progress/kendo-vue-layout";
+import { Button } from "@progress/kendo-vue-buttons";
+const items = [
+  {
+    title: "Edit Item",
+  },
+  {
+    title: "Add to Favorites",
+  },
+  {
+    title: "Cancel",
+  },
+  ,
+];
+
+export default {
+  components: {
+    ActionSheet,
+    KButton: Button,
+  },
+  data() {
+    return {
+      items,
+      open: false,
+    };
+  },
+  methods: {
+    openHandler() {
+      this.open = true;
+    },
+    handleClose() {
+      this.open = false;
+    },
+    handleItemSelect() {
+      this.open = false;
+    },
+    cancel() {
+      this.open = false;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/actionsheet/custom-rendering/content/main.js b/vue-options-api-demos/layout/actionsheet/custom-rendering/content/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/actionsheet/custom-rendering/content/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/actionsheet/custom-rendering/content/main.vue b/vue-options-api-demos/layout/actionsheet/custom-rendering/content/main.vue
new file mode 100644
index 00000000..7f01c455
--- /dev/null
+++ b/vue-options-api-demos/layout/actionsheet/custom-rendering/content/main.vue
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <KButton
+      :id="'openActionSheetBttn'"
+      @click="openHandler"
+    >
+      OPEN ACTION SHEET
+    </KButton>
+    <ActionSheet
+      :expand="open"
+      :title="title"
+      :sub-title="subTitle"
+      :content="'content'"
+      @close="handleClose"
+      @itemselect="handleItemSelect"
+    >
+      <template v-slot:content>
+        <Avatar
+          :type="'image'"
+          :size="'large'"
+          :rounded="'full'"
+          style="width: 128px; height: 128px"
+        >
+          <img :src="avatarUrl" />
+        </Avatar>
+      </template>
+    </ActionSheet>
+  </div>
+</template>
+<script>
+import { ActionSheet, Avatar } from '@progress/kendo-vue-layout';
+import { Button } from '@progress/kendo-vue-buttons';
+
+const avatar2Image = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/stacklayout/avatar2.webp';
+
+export default {
+  components: {
+    ActionSheet,
+    Avatar,
+    KButton: Button,
+  },
+  data() {
+    return {
+      title: 'My profile',
+      subTitle: 'Kendo UI for Vue Native',
+      avatarUrl: avatar2Image,
+      open: false,
+    };
+  },
+  methods: {
+    openHandler() {
+      this.open = true;
+    },
+    handleClose() {
+      this.open = false;
+    },
+    handleItemSelect() {
+      this.open = false;
+    },
+    cancel() {
+      this.open = false;
+    },
+  },
+};
+</script>
+<style>
+.k-actionsheet-content {
+  text-align-last: center;
+  padding: 20px;
+}
+</style>
diff --git a/vue-options-api-demos/layout/actionsheet/custom-rendering/footer/main.js b/vue-options-api-demos/layout/actionsheet/custom-rendering/footer/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/actionsheet/custom-rendering/footer/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/actionsheet/custom-rendering/footer/main.vue b/vue-options-api-demos/layout/actionsheet/custom-rendering/footer/main.vue
new file mode 100644
index 00000000..5b2e6f45
--- /dev/null
+++ b/vue-options-api-demos/layout/actionsheet/custom-rendering/footer/main.vue
@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <KButton :id="'openActionSheetBttn'" @click="openHandler">
+      OPEN ACTION SHEET
+    </KButton>
+    <ActionSheet
+      :expand="open"
+      :items="items"
+      :title="title"
+      :sub-title="subTitle"
+      :footer="'footer'"
+      @close="handleClose"
+      @itemselect="handleItemSelect"
+    >
+      <template v-slot:footer>
+        <KButton
+          :style="{
+            width: '100%',
+          }"
+          :fillMode="'flat'"
+          :themeColor="'primary'"
+          :svgIcon="cancelIcon"
+          @click="cancel"
+        >
+          Cancel
+        </KButton>
+      </template>
+    </ActionSheet>
+  </div>
+</template>
+<script>
+import { ActionSheet } from "@progress/kendo-vue-layout";
+import { Button } from "@progress/kendo-vue-buttons";
+import {
+  cancelIcon,
+  heartIcon,
+  pencilIcon,
+  uploadIcon,
+} from "@progress/kendo-svg-icons";
+const items = [
+  {
+    title: "Edit Item",
+    svgIcon: pencilIcon,
+    description: "Click to edit",
+  },
+  {
+    title: "Add to Favorites",
+    svgIcon: heartIcon,
+  },
+  {
+    title: "Upload New",
+    svgIcon: uploadIcon,
+    disabled: true,
+    group: "top",
+  },
+];
+
+export default {
+  components: {
+    ActionSheet,
+    KButton: Button,
+  },
+  data() {
+    return {
+      items,
+      open: false,
+      cancelIcon,
+    };
+  },
+  methods: {
+    openHandler() {
+      this.open = true;
+    },
+    handleClose() {
+      this.open = false;
+    },
+    handleItemSelect() {
+      this.open = false;
+    },
+    cancel() {
+      this.open = false;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/actionsheet/custom-rendering/header/main.js b/vue-options-api-demos/layout/actionsheet/custom-rendering/header/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/actionsheet/custom-rendering/header/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/actionsheet/custom-rendering/header/main.vue b/vue-options-api-demos/layout/actionsheet/custom-rendering/header/main.vue
new file mode 100644
index 00000000..f75a3e3e
--- /dev/null
+++ b/vue-options-api-demos/layout/actionsheet/custom-rendering/header/main.vue
@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <KButton
+      :id="'openActionSheetBttn'"
+      @click="openHandler"
+    >
+      OPEN ACTION SHEET
+    </KButton>
+    <ActionSheet
+      :expand="open"
+      :items="items"
+      :header="'header'"
+      @close="handleClose"
+      @itemselect="handleItemSelect"
+    >
+      <template v-slot:header>
+        <span class="custom-header">
+          {{ title }} <span class="k-icon k-i-hyperlink-open"></span>
+        </span>
+      </template>
+    </ActionSheet>
+  </div>
+</template>
+<script>
+import { ActionSheet, Avatar } from '@progress/kendo-vue-layout';
+import { Button } from '@progress/kendo-vue-buttons';
+import {
+  heartIcon,
+  cancelIcon,
+  pencilIcon,
+  uploadIcon,
+} from '@progress/kendo-svg-icons';
+const items = [
+  {
+    title: 'Edit Item',
+    svgIcon: pencilIcon,
+    description: 'Click to edit',
+  },
+  {
+    title: 'Add to Favorites',
+    svgIcon: heartIcon,
+  },
+  {
+    title: 'Upload New',
+    svgIcon: uploadIcon,
+    disabled: true,
+  },
+  {
+    title: 'Cancel',
+    svgIcon: cancelIcon,
+  },
+];
+
+export default {
+  components: {
+    ActionSheet,
+    Avatar,
+    KButton: Button,
+  },
+  data() {
+    return {
+      items,
+      title: 'Select an item',
+      open: false,
+    };
+  },
+  methods: {
+    openHandler() {
+      this.open = true;
+    },
+    handleClose() {
+      this.open = false;
+    },
+    handleItemSelect() {
+      this.open = false;
+    },
+    cancel() {
+      this.open = false;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/actionsheet/events/Logger.vue b/vue-options-api-demos/layout/actionsheet/events/Logger.vue
new file mode 100644
index 00000000..aec622fe
--- /dev/null
+++ b/vue-options-api-demos/layout/actionsheet/events/Logger.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="example-config">
+    <h5>{{ title }}</h5>
+    <ul class="event-log">
+      <li v-for="(event, idx) in events" :key="idx">{{ event }}</li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    events: Array,
+    title: String,
+  },
+};
+</script>
+
+<style>
+.example-config {
+  margin: 0 0 20px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+  margin: 0;
+  padding: 0;
+  max-height: 100px;
+  overflow-y: auto;
+  list-style-type: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: white;
+}
+.event-log li {
+  margin: 0;
+  padding: 0.3em;
+  line-height: 1.2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+  margin-bottom: -1px;
+}
+</style>
diff --git a/vue-options-api-demos/layout/actionsheet/events/main.js b/vue-options-api-demos/layout/actionsheet/events/main.js
new file mode 100644
index 00000000..1f1c6c86
--- /dev/null
+++ b/vue-options-api-demos/layout/actionsheet/events/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
+
diff --git a/vue-options-api-demos/layout/actionsheet/events/main.vue b/vue-options-api-demos/layout/actionsheet/events/main.vue
new file mode 100644
index 00000000..9fd4c9da
--- /dev/null
+++ b/vue-options-api-demos/layout/actionsheet/events/main.vue
@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <KButton :id="'openActionSheetBttn'" @click="openHandler">
+      OPEN ACTION SHEET
+    </KButton>
+    <ActionSheet
+      :expand="open"
+      :items="items"
+      @close="handleClose"
+      @itemselect="handleItemSelect"
+    >
+    </ActionSheet>
+    <br />
+    <br />
+    <Logger :title="'Events list'" :events="eventsList" />
+  </div>
+</template>
+
+<script>
+import { ActionSheet } from '@progress/kendo-vue-layout';
+import { Button } from '@progress/kendo-vue-buttons';
+import Logger from './Logger.vue';
+
+const items = [
+  {
+    title: 'Edit Item',
+  },
+  {
+    title: 'Add to Favorites',
+  },
+  {
+    title: 'Cancel',
+  },
+  ,
+];
+
+export default {
+  components: {
+    Logger,
+    ActionSheet,
+    KButton: Button,
+  },
+  computed: {
+    eventsList() {
+      return this.events;
+    },
+  },
+  data: function () {
+    return {
+      events: [],
+      items,
+      open: false,
+    };
+  },
+  methods: {
+    openHandler() {
+      this.open = true;
+      this.events.unshift('ActionSheet was opened');
+    },
+    handleClose() {
+      this.open = false;
+      this.events.unshift('ActionSheet was closed');
+    },
+    handleItemSelect(e) {
+      this.open = false;
+      this.events.unshift("ActionSheet Item '" + e.title + "' was selected");
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/actionsheet/items/disabling/main.js b/vue-options-api-demos/layout/actionsheet/items/disabling/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/actionsheet/items/disabling/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/actionsheet/items/disabling/main.vue b/vue-options-api-demos/layout/actionsheet/items/disabling/main.vue
new file mode 100644
index 00000000..d7dfdd4f
--- /dev/null
+++ b/vue-options-api-demos/layout/actionsheet/items/disabling/main.vue
@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <KButton
+      :id="'openActionSheetBttn'"
+      @click="openHandler"
+    >
+      OPEN ACTION SHEET
+    </KButton>
+    <ActionSheet
+      :expand="open"
+      :title="title"
+      :items="items"
+      @close="handleClose"
+      @itemselect="handleItemSelect"
+    />
+  </div>
+</template>
+<script>
+import { ActionSheet } from '@progress/kendo-vue-layout';
+import { Button } from '@progress/kendo-vue-buttons';
+const items = [
+  {
+    title: 'Edit Item',
+    disabled: true,
+  },
+  {
+    title: 'Add to Favorites',
+  },
+  {
+    title: 'Upload New',
+    disabled: true,
+  },
+];
+
+export default {
+  components: {
+    ActionSheet,
+    KButton: Button,
+  },
+  data() {
+    return {
+      items,
+      title: 'Select an item',
+      open: false,
+    };
+  },
+  methods: {
+    openHandler() {
+      this.open = true;
+    },
+    handleClose() {
+      this.open = false;
+    },
+    handleItemSelect() {
+      this.open = false;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/actionsheet/items/groups/main.js b/vue-options-api-demos/layout/actionsheet/items/groups/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/actionsheet/items/groups/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/actionsheet/items/groups/main.vue b/vue-options-api-demos/layout/actionsheet/items/groups/main.vue
new file mode 100644
index 00000000..d6c7cbaf
--- /dev/null
+++ b/vue-options-api-demos/layout/actionsheet/items/groups/main.vue
@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <KButton
+      :id="'openActionSheetBttn'"
+      @click="openHandler"
+    >
+      OPEN ACTION SHEET
+    </KButton>
+    <ActionSheet
+      :expand="open"
+      :title="title"
+      :items="items"
+      @close="handleClose"
+      @itemselect="handleItemSelect"
+    />
+  </div>
+</template>
+<script>
+import { ActionSheet } from '@progress/kendo-vue-layout';
+import { Button } from '@progress/kendo-vue-buttons';
+import { heartIcon } from '@progress/kendo-svg-icons';
+const items = [
+  {
+    title: 'Add to Cart',
+    group: 'top',
+  },
+  {
+    title: 'Add to Favorites',
+    group: 'top',
+  },
+  {
+    title: 'Report an Issue',
+    group: 'bottom',
+  },
+  {
+    title: 'Cancel',
+    group: 'bottom',
+  },
+];
+
+export default {
+  components: {
+    ActionSheet,
+    KButton: Button,
+  },
+  data() {
+    return {
+      items,
+      title: 'Select an item',
+      open: false,
+    };
+  },
+  methods: {
+    openHandler() {
+      this.open = true;
+    },
+    handleClose() {
+      this.open = false;
+    },
+    handleItemSelect() {
+      this.open = false;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/actionsheet/items/icons/main.js b/vue-options-api-demos/layout/actionsheet/items/icons/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/actionsheet/items/icons/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/actionsheet/items/icons/main.vue b/vue-options-api-demos/layout/actionsheet/items/icons/main.vue
new file mode 100644
index 00000000..04890a85
--- /dev/null
+++ b/vue-options-api-demos/layout/actionsheet/items/icons/main.vue
@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <KButton :id="'openActionSheetBttn'" @click="openHandler">
+      OPEN ACTION SHEET
+    </KButton>
+    <ActionSheet
+      :expand="open"
+      :title="title"
+      :items="items"
+      @close="handleClose"
+      @itemselect="handleItemSelect"
+    />
+  </div>
+</template>
+<script>
+import { ActionSheet } from "@progress/kendo-vue-layout";
+import { Button } from "@progress/kendo-vue-buttons";
+import { cartIcon, heartIcon, xIcon } from "@progress/kendo-svg-icons";
+const items = [
+  {
+    title: "Add to Cart",
+    svgIcon: cartIcon,
+  },
+  {
+    title: "Add to Favorites",
+    svgIcon: heartIcon,
+    iconColor: "#2CAF80",
+  },
+  {
+    title: "Cancel",
+    svgIcon: xIcon,
+  },
+];
+
+export default {
+  components: {
+    ActionSheet,
+    KButton: Button,
+  },
+  data() {
+    return {
+      cartIcon,
+      heartIcon,
+      xIcon,
+      items,
+      title: "Select an item",
+      open: false,
+    };
+  },
+  methods: {
+    openHandler() {
+      this.open = true;
+    },
+    handleClose() {
+      this.open = false;
+    },
+    handleItemSelect() {
+      this.open = false;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/actionsheet/items/overview/main.js b/vue-options-api-demos/layout/actionsheet/items/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/actionsheet/items/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/actionsheet/items/overview/main.vue b/vue-options-api-demos/layout/actionsheet/items/overview/main.vue
new file mode 100644
index 00000000..1a53e0fe
--- /dev/null
+++ b/vue-options-api-demos/layout/actionsheet/items/overview/main.vue
@@ -0,0 +1,60 @@
+<template>
+    <div>
+      <KButton
+        :id="'openActionSheetBttn'"
+        @click="openHandler"
+  
+      >
+        OPEN ACTION SHEET
+      </KButton>
+      <ActionSheet
+        :expand="open"
+        :title="title"
+        :items="items"
+        @close="handleClose"
+        @itemselect="handleItemSelect"
+      />
+    </div>
+  </template>
+  <script>
+  import { ActionSheet } from '@progress/kendo-vue-layout';
+  import { Button } from '@progress/kendo-vue-buttons';
+  import { heartIcon } from '@progress/kendo-svg-icons';
+  const items = [
+    {
+      title: 'Edit Item',
+    },
+    {
+      title: 'Add to Favorites',
+    },
+    {
+      title: 'Cancel',
+    },
+  ];
+  
+  export default {
+    components: {
+      ActionSheet,
+      KButton: Button,
+    },
+    data() {
+      return {
+        items,
+        title: 'Select an item',
+        open: false,
+      };
+    },
+    methods: {
+      openHandler() {
+        this.open = true;
+      },
+      handleClose() {
+        this.open = false;
+      },
+      handleItemSelect() {
+        this.open = false;
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/actionsheet/items/styling/main.js b/vue-options-api-demos/layout/actionsheet/items/styling/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/actionsheet/items/styling/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/actionsheet/items/styling/main.vue b/vue-options-api-demos/layout/actionsheet/items/styling/main.vue
new file mode 100644
index 00000000..3a518af1
--- /dev/null
+++ b/vue-options-api-demos/layout/actionsheet/items/styling/main.vue
@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <KButton
+      :id="'openActionSheetBttn'"
+      @click="openHandler"
+    >
+      OPEN ACTION SHEET
+    </KButton>
+    <ActionSheet
+      :expand="open"
+      :title="title"
+      :items="items"
+      @close="handleClose"
+      @itemselect="handleItemSelect"
+    />
+  </div>
+</template>
+<script>
+import { ActionSheet } from '@progress/kendo-vue-layout';
+import { Button } from '@progress/kendo-vue-buttons';
+const items = [
+  {
+    title: 'Add to Cart',
+    class: 'custom-font',
+  },
+  {
+    title: 'Add to Favorites',
+    style: {
+      textDecoration: 'underline',
+      color: '#fe7f76',
+    },
+  },
+  {
+    title: 'Cancel',
+    group: 'bottom',
+  },
+];
+
+export default {
+  components: {
+    ActionSheet,
+    KButton: Button,
+  },
+  data() {
+    return {
+      items,
+      title: 'Select an item',
+      open: false,
+    };
+  },
+  methods: {
+    openHandler() {
+      this.open = true;
+    },
+    handleClose() {
+      this.open = false;
+    },
+    handleItemSelect() {
+      this.open = false;
+    },
+  },
+};
+</script>
+<style>
+.custom-font {
+  color: #1174ab;
+  font-weight: bold;
+}
+</style>
diff --git a/vue-options-api-demos/layout/actionsheet/items/title/main.js b/vue-options-api-demos/layout/actionsheet/items/title/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/actionsheet/items/title/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/actionsheet/items/title/main.vue b/vue-options-api-demos/layout/actionsheet/items/title/main.vue
new file mode 100644
index 00000000..7e4966cf
--- /dev/null
+++ b/vue-options-api-demos/layout/actionsheet/items/title/main.vue
@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <KButton
+      :id="'openActionSheetBttn'"
+      @click="openHandler"
+    >
+      OPEN ACTION SHEET
+    </KButton>
+    <ActionSheet
+      :expand="open"
+      :title="title"
+      :items="items"
+      @close="handleClose"
+      @itemselect="handleItemSelect"
+    />
+  </div>
+</template>
+<script>
+import { ActionSheet } from '@progress/kendo-vue-layout';
+import { Button } from '@progress/kendo-vue-buttons';
+import { heartIcon } from '@progress/kendo-svg-icons';
+const items = [
+  {
+    title: 'Edit Item',
+    description: 'Click to edit',
+  },
+  {
+    title: 'Add to Favorites',
+  },
+  {
+    title: 'Upload new',
+    description: 'Max size 50MB',
+  },
+];
+
+export default {
+  components: {
+    ActionSheet,
+    KButton: Button,
+  },
+  data() {
+    return {
+      items,
+      title: 'Select an item',
+      open: false,
+    };
+  },
+  methods: {
+    openHandler() {
+      this.open = true;
+    },
+    handleClose() {
+      this.open = false;
+    },
+    handleItemSelect() {
+      this.open = false;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/actionsheet/keyboard-navigation/main.js b/vue-options-api-demos/layout/actionsheet/keyboard-navigation/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/actionsheet/keyboard-navigation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/actionsheet/keyboard-navigation/main.vue b/vue-options-api-demos/layout/actionsheet/keyboard-navigation/main.vue
new file mode 100644
index 00000000..192910f0
--- /dev/null
+++ b/vue-options-api-demos/layout/actionsheet/keyboard-navigation/main.vue
@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <KButton :id="'openActionSheetBttn'" @click="openHandler">
+      OPEN ACTION SHEET
+    </KButton>
+    <ActionSheet
+      :expand="open"
+      :items="items"
+      @close="handleClose"
+      @itemselect="handleItemSelect"
+    >
+    </ActionSheet>
+  </div>
+</template>
+<script>
+import { ActionSheet } from '@progress/kendo-vue-layout';
+import { Button } from '@progress/kendo-vue-buttons';
+const items = [
+  {
+    title: 'Edit Item',
+  },
+  {
+    title: 'Add to Favorites',
+  },
+  {
+    title: 'Cancel',
+  },
+];
+
+export default {
+  components: {
+    ActionSheet,
+    KButton: Button,
+  },
+  data() {
+    return {
+      items,
+      open: false,
+    };
+  },
+  methods: {
+    openHandler() {
+      this.open = true;
+    },
+    handleClose() {
+      this.open = false;
+    },
+    handleItemSelect() {
+      this.open = false;
+    },
+    cancel() {
+      this.open = false;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/actionsheet/overview/main.js b/vue-options-api-demos/layout/actionsheet/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/actionsheet/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/actionsheet/overview/main.vue b/vue-options-api-demos/layout/actionsheet/overview/main.vue
new file mode 100644
index 00000000..26a93604
--- /dev/null
+++ b/vue-options-api-demos/layout/actionsheet/overview/main.vue
@@ -0,0 +1,199 @@
+<template>
+  <div>
+    <div
+      class="demo-app"
+      :style="{
+        position: 'relative',
+      }"
+    >
+      <div
+        id="city"
+        class="demo-view"
+        :style="{
+          position: 'absolute',
+        }"
+      >
+        <div class="title">
+          <h3>Current City</h3>
+        </div>
+        <div class="cards-container">
+          <Card>
+            <CardHeader>
+              <CardTitle>Rome</CardTitle>
+              <CardSubtitle>Capital of Italy</CardSubtitle>
+            </CardHeader>
+            <img
+              class="k-card-image"
+              :src="romeImage"
+              alt="Rome image"
+            />
+            <CardBody>
+              <p>
+                Rome is a sprawling, cosmopolitan city with nearly 3,000 years
+                of globally influential art, architecture and culture on
+                display.
+              </p>
+              <p>
+                Ancient ruins such as the Forum and the Colosseum evoke the
+                power of the former Roman Empire.
+              </p>
+            </CardBody>
+          </Card>
+        </div>
+        <KButton :id="'openActionSheetBttn'" @click="openHandler">
+          OPEN ACTION SHEET
+        </KButton>
+        <ActionSheet
+          :expand="open"
+          :title="title"
+          :items="items"
+          @close="handleClose"
+          @itemselect="handleItemSelect"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { Button } from "@progress/kendo-vue-buttons";
+import {
+  ActionSheet,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardSubtitle,
+  CardBody,
+} from "@progress/kendo-vue-layout";
+import {
+  cancelIcon,
+  heartIcon,
+  pencilIcon,
+  uploadIcon,
+} from "@progress/kendo-svg-icons";
+const items = [
+  {
+    title: "Edit Item",
+    description: "Click to edit",
+    tabIndex: 0,
+    svgIcon: pencilIcon,
+  },
+  {
+    title: "Add to Favorites",
+    tabIndex: 0,
+    svgIcon: heartIcon,
+  },
+  {
+    title: "Upload New",
+    svgIcon: uploadIcon,
+    disabled: true,
+  },
+  {
+    title: "Cancel",
+    tabIndex: 0,
+    svgIcon: cancelIcon,
+    group: "bottom",
+  },
+];
+
+const romeImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || "/") + "assets/layout/actionsheet/rome.jpg";
+
+export default {
+  components: {
+    KButton: Button,
+    ActionSheet,
+    Card,
+    CardHeader,
+    CardTitle,
+    CardSubtitle,
+    CardBody,
+  },
+  data() {
+    return {
+      romeImage,
+      cancelIcon,
+      pencilIcon,
+      heartIcon,
+      uploadIcon,
+      items,
+      title: "Select an item",
+      open: false,
+    };
+  },
+  methods: {
+    openHandler() {
+      this.open = true;
+    },
+    handleClose() {
+      this.open = false;
+    },
+    handleItemSelect() {
+      this.open = false;
+    },
+  },
+};
+</script>
+<style>
+.demo-view {
+  transform: scale(1);
+  overflow: hidden;
+}
+
+.k-actionsheet-container {
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+.k-actionsheet-container > .k-overlay {
+  border-bottom-left-radius: 30px;
+  border-bottom-right-radius: 30px;
+}
+
+.cards-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.k-card {
+  width: 285px;
+  margin: 5%;
+}
+
+#openActionSheetBttn {
+  margin: 0 auto;
+  display: block;
+}
+
+.demo-app {
+  margin: auto;
+  width: 380px;
+  height: 700px;
+  background: #ffffff;
+  box-shadow: 0px 10px 20px #00000016;
+  border-radius: 30px;
+  font-family: "Roboto", sans-serif;
+  font-size: 14px;
+}
+.demo-app .title {
+  width: 100%;
+}
+
+#city {
+  background: #f9f9f9;
+  height: inherit;
+  width: inherit;
+  border-radius: 30px;
+  border: 10px solid white;
+  box-sizing: border-box;
+}
+
+.demo-app h3 {
+  padding-top: 24px;
+  text-align: center;
+  font-size: 28px;
+  letter-spacing: 0.28px;
+  color: #3d57d8;
+  font-weight: 400;
+}
+</style>
diff --git a/vue-options-api-demos/layout/appbar/overview/main.js b/vue-options-api-demos/layout/appbar/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/appbar/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/appbar/overview/main.vue b/vue-options-api-demos/layout/appbar/overview/main.vue
new file mode 100644
index 00000000..f3344992
--- /dev/null
+++ b/vue-options-api-demos/layout/appbar/overview/main.vue
@@ -0,0 +1,118 @@
+<template>
+  <AppBar>
+    <AppBarSection>
+      <KButton :svg-icon="menuIcon" :fill-mode="'flat'" />
+    </AppBarSection>
+
+    <AppBarSpacer :width="4" />
+
+    <AppBarSection>
+      <h1 class="title">Kendo UI for Vue</h1>
+    </AppBarSection>
+
+    <AppBarSpacer :width="32" />
+
+    <AppBarSection>
+      <ul>
+        <li>
+          <span>What's New</span>
+        </li>
+        <li>
+          <span>About</span>
+        </li>
+        <li>
+          <span>Contacts</span>
+        </li>
+      </ul>
+    </AppBarSection>
+
+    <AppBarSpacer />
+
+    <AppBarSection class="actions">
+      <KButton :fill-mode="'flat'">
+        <BadgeContainer
+          :shape="'dot'"
+          :themeColor="'info'"
+          :size="'small'"
+          :position="'inside'"
+        >
+          <SvgIcon :icon="bellIcon" />
+        </BadgeContainer>
+      </KButton>
+    </AppBarSection>
+
+    <AppBarSection>
+      <span class="k-appbar-separator" />
+    </AppBarSection>
+
+    <AppBarSection>
+      <Avatar type="image">
+        <img :src="kendokaAvatar" />
+      </Avatar>
+    </AppBarSection>
+  </AppBar>
+</template>
+<script>
+import {
+  AppBar,
+  AppBarSection,
+  AppBarSpacer,
+  Avatar,
+} from '@progress/kendo-vue-layout';
+import { Button } from '@progress/kendo-vue-buttons';
+import { BadgeContainer } from '@progress/kendo-vue-indicators';
+import { bellIcon, menuIcon } from '@progress/kendo-svg-icons';
+import { SvgIcon } from '@progress/kendo-vue-common';
+let kendokaAvatar = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/suite/kendoka-vue.webp';
+
+export default {
+  components: {
+    AppBar,
+    AppBarSection,
+    AppBarSpacer,
+    Avatar,
+    BadgeContainer,
+    KButton: Button,
+    SvgIcon,
+  },
+  data() {
+    return {
+      kendokaAvatar,
+      menuIcon,
+      bellIcon,
+    };
+  },
+};
+</script>
+
+<style>
+body {
+  background: #dfdfdf;
+}
+
+.title {
+  font-size: 18px;
+  margin: 0;
+}
+
+ul {
+  font-size: 14px;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+}
+
+li {
+  margin: 0 10px;
+}
+
+li:hover {
+  cursor: pointer;
+  color: #84cef1;
+}
+
+.k-button.k-button-md.k-rounded-md.k-button-solid.k-button-solid-base {
+  padding: 0;
+}
+</style>
diff --git a/vue-options-api-demos/layout/appbar/position-mode/main.js b/vue-options-api-demos/layout/appbar/position-mode/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/appbar/position-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/appbar/position-mode/main.vue b/vue-options-api-demos/layout/appbar/position-mode/main.vue
new file mode 100644
index 00000000..4171b9fe
--- /dev/null
+++ b/vue-options-api-demos/layout/appbar/position-mode/main.vue
@@ -0,0 +1,155 @@
+<template>
+  <AppBar>
+    <AppBarSection>
+      <KButton :fill-mode="'flat'">
+        <SvgIcon :icon="menuIcon" />
+      </KButton>
+    </AppBarSection>
+
+    <AppBarSpacer :width="8" />
+    <AppBarSection>
+      <h1 :class="'title'">Weather News</h1>
+    </AppBarSection>
+
+    <AppBarSpacer :width="32" />
+    <AppBarSection>
+      <KInput :placeholder="'Search'" />
+    </AppBarSection>
+
+    <AppBarSpacer />
+
+    <AppBarSection class="social-section">
+      <KButton :fill-mode="'flat'">
+        <SvgIcon :icon="facebookIcon" />
+      </KButton>
+      <KButton :fill-mode="'flat'">
+        <SvgIcon :icon="twitterIcon" />
+      </KButton>
+      <KButton :fill-mode="'flat'">
+        <SvgIcon :icon="pinterestIcon" />
+      </KButton>
+      <KButton :fill-mode="'flat'">
+        <SvgIcon :icon="googleIcon" />
+      </KButton>
+    </AppBarSection>
+  </AppBar>
+  <div class="page-content">
+    <p>
+      Light variable wind or sea breeze. Partly cloudy with sunny spells today,
+      but patches of fog in some places by the coast and some afternoon
+      rainshowerstowards the east. Day time temperatures 10 to 16 deg. C.
+    </p>
+    <p>
+      Westerly or variable wind 3-8 m/s tomorrow. Mostly cloudy and locally some
+      light rain in the west part of Iceland. Partly cloudy in other parts, but
+      fog near the Eastfjords. Temperature 10 to 17 deg. C, warmest in
+      Southeast-Iceland.
+    </p>
+    <p>
+      Westerly 5-10 m/s and cloudy in the west part. Light variable wind and
+      widely fair in other parts of the country, but fog in places by the north
+      and east coast. Temperature 10 to 17 deg. C., warmest in the southeast.
+    </p>
+    <p>
+      On Friday and Saturday: Westerly wind 3-10 m/s. Mostly cloudy and light
+      precipitation, but mainly dry in the east. Temperature 10 to 15 deg. C.
+    </p>
+  </div>
+
+  <AppBar :position="'bottom'" :theme-color="'dark'">
+    <AppBarSpacer :width="150" />
+    <AppBarSection>
+      <ul>
+        <li>
+          <span>What's New</span>
+        </li>
+        <li>
+          <span>Subscriptions</span>
+        </li>
+        <li>
+          <span>Successful Stories</span>
+        </li>
+        <li>
+          <span>About Us</span>
+        </li>
+        <li>
+          <span>Contacts</span>
+        </li>
+      </ul>
+    </AppBarSection>
+
+    <AppBarSpacer :width="100" />
+  </AppBar>
+</template>
+<script>
+import {
+  AppBar,
+  AppBarSection,
+  AppBarSpacer,
+} from "@progress/kendo-vue-layout";
+import { Button } from "@progress/kendo-vue-buttons";
+import { Input } from "@progress/kendo-vue-inputs";
+import {
+  facebookIcon,
+  twitterIcon,
+  pinterestIcon,
+  googleIcon,
+  menuIcon,
+} from "@progress/kendo-svg-icons";
+import { SvgIcon } from "@progress/kendo-vue-common";
+
+export default {
+  components: {
+    AppBar,
+    AppBarSection,
+    AppBarSpacer,
+    KButton: Button,
+    KInput: Input,
+    SvgIcon,
+  },
+  data() {
+    return {
+      facebookIcon,
+      twitterIcon,
+      pinterestIcon,
+      googleIcon,
+      menuIcon,
+    };
+  },
+};
+</script>
+<style>
+#app {
+  padding: 0 !important;
+}
+.title {
+  font-size: 18px;
+  margin: 0;
+}
+.social-section .k-icon {
+  margin: 0 4px;
+}
+ul {
+  font-size: 12px;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+}
+li {
+  margin: 0 12px;
+}
+li:hover {
+  cursor: pointer;
+  color: #ccc;
+}
+.page-content {
+  height: 90%;
+  background: white;
+  padding: 20px 10px;
+}
+
+.k-button.k-button-md.k-rounded-md.k-button-flat.k-button-flat-base {
+  padding: 0;
+}
+</style>
diff --git a/vue-options-api-demos/layout/appbar/position/main.js b/vue-options-api-demos/layout/appbar/position/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/appbar/position/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/appbar/position/main.vue b/vue-options-api-demos/layout/appbar/position/main.vue
new file mode 100644
index 00000000..164c5a3f
--- /dev/null
+++ b/vue-options-api-demos/layout/appbar/position/main.vue
@@ -0,0 +1,151 @@
+<template>
+  <AppBar>
+    <AppBarSection>
+      <KButton :fill-mode="'flat'">
+        <SvgIcon :icon="menuIcon" />
+      </KButton>
+    </AppBarSection>
+
+    <AppBarSpacer :width="8" />
+    <AppBarSection>
+      <h1 :class="'title'">Weather News</h1>
+    </AppBarSection>
+
+    <AppBarSpacer :width="32" />
+    <AppBarSection>
+      <KInput :placeholder="'Search'" />
+    </AppBarSection>
+
+    <AppBarSpacer />
+
+    <AppBarSection class="social-section">
+      <KButton :fill-mode="'flat'" :svg-icon="facebookIcon">
+      </KButton>
+      <KButton :fill-mode="'flat'" :svg-icon="twitterIcon">
+      </KButton>
+      <KButton :fill-mode="'flat'" :svg-icon="pinterestIcon">
+      </KButton>
+      <KButton :fill-mode="'flat'" :svg-icon="googleIcon">
+      </KButton>
+    </AppBarSection>
+  </AppBar>
+  <div class="page-content">
+    <p>
+      Light variable wind or sea breeze. Partly cloudy with sunny spells today,
+      but patches of fog in some places by the coast and some afternoon
+      rainshowerstowards the east. Day time temperatures 10 to 16 deg. C.
+    </p>
+    <p>
+      Westerly or variable wind 3-8 m/s tomorrow. Mostly cloudy and locally some
+      light rain in the west part of Iceland. Partly cloudy in other parts, but
+      fog near the Eastfjords. Temperature 10 to 17 deg. C, warmest in
+      Southeast-Iceland.
+    </p>
+    <p>
+      Westerly 5-10 m/s and cloudy in the west part. Light variable wind and
+      widely fair in other parts of the country, but fog in places by the north
+      and east coast. Temperature 10 to 17 deg. C., warmest in the southeast.
+    </p>
+    <p>
+      On Friday and Saturday: Westerly wind 3-10 m/s. Mostly cloudy and light
+      precipitation, but mainly dry in the east. Temperature 10 to 15 deg. C.
+    </p>
+  </div>
+
+  <AppBar :position="'bottom'" :theme-color="'dark'">
+    <AppBarSpacer :width="150" />
+    <AppBarSection>
+      <ul>
+        <li>
+          <span>What's New</span>
+        </li>
+        <li>
+          <span>Subscriptions</span>
+        </li>
+        <li>
+          <span>Successful Stories</span>
+        </li>
+        <li>
+          <span>About Us</span>
+        </li>
+        <li>
+          <span>Contacts</span>
+        </li>
+      </ul>
+    </AppBarSection>
+
+    <AppBarSpacer :width="100" />
+  </AppBar>
+</template>
+<script>
+import {
+  AppBar,
+  AppBarSection,
+  AppBarSpacer,
+} from '@progress/kendo-vue-layout';
+import { Button } from '@progress/kendo-vue-buttons';
+import { Input } from '@progress/kendo-vue-inputs';
+import {
+  facebookIcon,
+  twitterIcon,
+  pinterestIcon,
+  googleIcon,
+  menuIcon,
+} from '@progress/kendo-svg-icons';
+import { SvgIcon } from "@progress/kendo-vue-common";
+
+export default {
+  components: {
+    AppBar,
+    AppBarSection,
+    AppBarSpacer,
+    KButton: Button,
+    KInput: Input,
+    SvgIcon
+  },
+  data() {
+    return {
+      facebookIcon,
+      twitterIcon,
+      pinterestIcon,
+      googleIcon,
+      menuIcon,
+    };
+  },
+};
+</script>
+<style>
+#app {
+  padding: 0 !important;
+}
+.title {
+  font-size: 18px;
+  margin: 0;
+}
+.social-section .k-icon {
+  margin: 0 4px;
+}
+ul {
+  font-size: 12px;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+}
+li {
+  margin: 0 12px;
+}
+li:hover {
+  cursor: pointer;
+  color: #ccc;
+}
+.page-content {
+  height: 90%;
+  background: white;
+  padding: 20px 10px;
+}
+
+.k-button.k-button-md.k-rounded-md.k-button-flat.k-button-flat-base {
+  padding: 0;
+}
+</style>
diff --git a/vue-options-api-demos/layout/appbar/responsive-design/main.js b/vue-options-api-demos/layout/appbar/responsive-design/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/appbar/responsive-design/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/appbar/responsive-design/main.vue b/vue-options-api-demos/layout/appbar/responsive-design/main.vue
new file mode 100644
index 00000000..5adde0a9
--- /dev/null
+++ b/vue-options-api-demos/layout/appbar/responsive-design/main.vue
@@ -0,0 +1,199 @@
+<template>
+  <AppBar>
+    <AppBarSection>
+      <KButton :svg-icon="menuIcon" :fill-mode="'flat'" />
+    </AppBarSection>
+
+    <AppBarSpacer :width="4" />
+
+    <AppBarSection>
+      <h1 class="title">Kendo UI for Vue</h1>
+    </AppBarSection>
+
+    <AppBarSpacer :width="32" />
+
+    <AppBarSection>
+      <ul>
+        <li>
+          <span>What's New</span>
+        </li>
+        <li>
+          <span>About</span>
+        </li>
+        <li>
+          <span>Contacts</span>
+        </li>
+      </ul>
+    </AppBarSection>
+
+    <AppBarSpacer />
+
+    <AppBarSection class="actions">
+      <KButton :fill-mode="'flat'">
+        <BadgeContainer
+          :shape="'dot'"
+          :themeColor="'info'"
+          :size="'small'"
+          :position="'inside'"
+        >
+          <SvgIcon :icon="bellIcon" />
+        </BadgeContainer>
+      </KButton>
+    </AppBarSection>
+
+    <AppBarSection>
+      <span class="k-appbar-separator" />
+    </AppBarSection>
+    <AppBarSection>
+      <KButton :fill-mode="'flat'">
+        <SvgIcon :icon="menuIcon" />
+      </KButton>
+    </AppBarSection>
+
+    <AppBarSection>
+      <Avatar type="image">
+        <img :src="kendokaAvatar" :alt="'Avatar Image'" />
+      </Avatar>
+    </AppBarSection>
+  </AppBar>
+</template>
+<script>
+import {
+  AppBar,
+  AppBarSection,
+  AppBarSpacer,
+  Avatar,
+} from "@progress/kendo-vue-layout";
+import { Button } from "@progress/kendo-vue-buttons";
+import { BadgeContainer } from "@progress/kendo-vue-indicators";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { menuIcon, bellIcon } from "@progress/kendo-svg-icons";
+
+const kendokaAvatar = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/suite/kendoka-vue.webp';
+
+
+export default {
+  components: {
+    AppBar,
+    AppBarSection,
+    AppBarSpacer,
+    Avatar,
+    BadgeContainer,
+    KButton: Button,
+    SvgIcon,
+  },
+  data() {
+    return {
+      kendokaAvatar,
+      menuIcon,
+      bellIcon,
+    };
+  },
+};
+</script>
+
+<style>
+body {
+  background: #dfdfdf;
+}
+
+.title {
+  font-size: 18px;
+  margin: 0;
+}
+
+.k-badge-container {
+  margin-right: 8px;
+}
+
+ul {
+  font-size: 14px;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+}
+
+li {
+  margin: 0 9px;
+}
+
+li:hover {
+  cursor: pointer;
+  color: #84cef1;
+}
+
+.k-appbar-section {
+  display: flex;
+}
+
+.k-button.k-button-md.k-rounded-md.k-button-solid.k-button-solid-base {
+  padding: 0 8px;
+}
+
+.content li {
+  margin: 0;
+  padding: 6px 5px;
+}
+
+.content ul {
+  display: block;
+}
+
+.content {
+  padding: 4px 8px;
+}
+
+@media only screen and (max-width: 600px) {
+  .appbar-items,
+  .user-actions,
+  .k-avatar,
+  .k-appbar-separator {
+    display: none;
+  }
+
+  .overflow-button {
+    display: block;
+  }
+
+  .content ul li:last-child {
+    display: block;
+  }
+}
+
+/* Small devices (portrait tablets and large phones, 600px and up) */
+@media only screen and (min-width: 600px) {
+  .appbar-items,
+  .user-actions .k-badge-container,
+  .k-avatar,
+  .k-appbar-separator {
+    display: none;
+  }
+
+  .overflow-button {
+    display: block;
+  }
+
+  .content ul li:last-child {
+    display: none;
+  }
+}
+
+/* Medium devices (landscape tablets, 768px and up) */
+@media only screen and (min-width: 768px) {
+  .appbar-items,
+  .user-actions .k-badge-container,
+  .k-appbar-separator,
+  .k-avatar {
+    display: block;
+  }
+
+  .overflow-button {
+    display: none;
+  }
+}
+
+/* Large devices (laptops/desktops, 992px and up) */
+@media only screen and (min-width: 992px) {
+}
+</style>
diff --git a/vue-options-api-demos/layout/appbar/sections/main.js b/vue-options-api-demos/layout/appbar/sections/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/appbar/sections/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/appbar/sections/main.vue b/vue-options-api-demos/layout/appbar/sections/main.vue
new file mode 100644
index 00000000..52adc7e1
--- /dev/null
+++ b/vue-options-api-demos/layout/appbar/sections/main.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <AppBar>
+      <AppBarSection>
+        <KButton :fill-mode="'flat'" :svg-icon="menuIcon"> </KButton>
+      </AppBarSection>
+
+      <AppBarSpacer :width="4" />
+
+      <AppBarSection>
+        <h1 class="title">Gallery</h1>
+      </AppBarSection>
+
+      <AppBarSpacer />
+
+      <AppBarSection>
+        <KInput :placeholder="'Search Photos'" />
+      </AppBarSection>
+    </AppBar>
+  </div>
+</template>
+<script>
+import {
+  AppBar,
+  AppBarSection,
+  AppBarSpacer,
+} from '@progress/kendo-vue-layout';
+import { Button } from '@progress/kendo-vue-buttons';
+import { Input } from '@progress/kendo-vue-inputs';
+import { menuIcon } from '@progress/kendo-svg-icons';
+
+export default {
+  components: {
+    AppBar,
+    AppBarSection,
+    AppBarSpacer,
+    KButton: Button,
+    KInput: Input,
+  },
+  data() {
+    return {
+      menuIcon,
+    };
+  },
+};
+</script>
+<style>
+body {
+  background: #dfdfdf;
+}
+.title {
+  font-size: 18px;
+  margin: 0;
+}
+.k-button k-button-md k-rounded-md k-button-solid k-button-solid-base {
+  padding: 0;
+}
+</style>
diff --git a/vue-options-api-demos/layout/appbar/separators/main.js b/vue-options-api-demos/layout/appbar/separators/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/appbar/separators/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/appbar/separators/main.vue b/vue-options-api-demos/layout/appbar/separators/main.vue
new file mode 100644
index 00000000..48f4f1c8
--- /dev/null
+++ b/vue-options-api-demos/layout/appbar/separators/main.vue
@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <AppBar>
+      <AppBarSection>
+        <h1 :class="'title'">Bookings</h1>
+      </AppBarSection>
+
+      <AppBarSpacer />
+
+      <AppBarSection>
+        <KButton :fill-mode="'flat'">
+          <div :class="'badge'">
+            <SvgIcon :icon="bellIcon" />
+            <Badge
+              :shape="'dot'"
+              :theme-color="'info'"
+              :size="'small'"
+              :position="'inside'"
+            />
+          </div>
+        </KButton>
+        <span :class="'k-appbar-separator'" />
+        <KButton :fill-mode="'flat'" :svg-icon="heartIcon"> </KButton>
+      </AppBarSection>
+    </AppBar>
+  </div>
+</template>
+<script>
+import {
+  AppBar,
+  AppBarSection,
+  AppBarSpacer,
+} from '@progress/kendo-vue-layout';
+import { Button } from '@progress/kendo-vue-buttons';
+import { Badge } from '@progress/kendo-vue-indicators';
+import { bellIcon, heartIcon } from '@progress/kendo-svg-icons';
+import { SvgIcon } from '@progress/kendo-vue-common';
+
+export default {
+  components: {
+    AppBar,
+    AppBarSection,
+    AppBarSpacer,
+    KButton: Button,
+    Badge,
+    SvgIcon,
+  },
+  data() {
+    return {
+      bellIcon,
+      heartIcon,
+    };
+  },
+};
+</script>
+<style>
+body {
+  background: #dfdfdf;
+}
+.title {
+  font-size: 18px;
+  margin: 0;
+}
+.k-icon {
+  font-size: 18px;
+}
+.k-appbar .k-appbar-separator {
+  margin: 0 8px;
+}
+.badge {
+  position: relative;
+  overflow: visible;
+}
+</style>
diff --git a/vue-options-api-demos/layout/appbar/spacings/main.js b/vue-options-api-demos/layout/appbar/spacings/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/appbar/spacings/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/appbar/spacings/main.vue b/vue-options-api-demos/layout/appbar/spacings/main.vue
new file mode 100644
index 00000000..635dd322
--- /dev/null
+++ b/vue-options-api-demos/layout/appbar/spacings/main.vue
@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <AppBar>
+      <AppBarSection>
+        <KButton :fill-mode="'flat'" :svg-icon="menuIcon">
+        </KButton>
+      </AppBarSection>
+
+      <AppBarSpacer :width="4" />
+
+      <AppBarSection>
+        <h1 :class="'title'">My Playlist</h1>
+      </AppBarSection>
+
+      <AppBarSpacer :width="68" />
+
+      <AppBarSection>
+        <KInput :placeholder="'Search Songs'" />
+      </AppBarSection>
+
+      <AppBarSpacer />
+
+      <AppBarSection>
+        <KButton :fill-mode="'flat'">
+          <div class="badge">
+            <SvgIcon :icon="bellIcon" />
+            <Badge :edge="'inside'" :theme-color="'info'" :size="'small'"
+              >8</Badge
+            >
+          </div>
+        </KButton>
+      </AppBarSection>
+    </AppBar>
+  </div>
+</template>
+<script>
+import {
+  AppBar,
+  AppBarSection,
+  AppBarSpacer,
+} from '@progress/kendo-vue-layout';
+import { Button } from '@progress/kendo-vue-buttons';
+import { Badge } from '@progress/kendo-vue-indicators';
+import { Input } from '@progress/kendo-vue-inputs';
+import { bellIcon, menuIcon } from '@progress/kendo-svg-icons';
+import { SvgIcon } from '@progress/kendo-vue-common';
+
+export default {
+  components: {
+    AppBar,
+    AppBarSection,
+    AppBarSpacer,
+    KButton: Button,
+    KInput: Input,
+    Badge,
+    SvgIcon
+  },
+  data() {
+    return {
+      bellIcon, menuIcon
+    }
+  }
+};
+</script>
+<style>
+body {
+  background: #dfdfdf;
+}
+.title {
+  font-size: 18px;
+  margin: 0;
+}
+.k-button.k-button-md.k-rounded-md.k-button-solid.k-button-solid-base {
+  padding: 0;
+}
+.k-appbar .k-appbar-separator {
+  margin: 0 8px;
+}
+.badge {
+  position: relative;
+  overflow: visible;
+}
+</style>
diff --git a/vue-options-api-demos/layout/appbar/theme-color/main.js b/vue-options-api-demos/layout/appbar/theme-color/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/appbar/theme-color/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/appbar/theme-color/main.vue b/vue-options-api-demos/layout/appbar/theme-color/main.vue
new file mode 100644
index 00000000..f68b8152
--- /dev/null
+++ b/vue-options-api-demos/layout/appbar/theme-color/main.vue
@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <div :class="'wrap'" v-for="(color, index) in themeColors">
+      <AppBar :theme-color="color.value" :key="index">
+        <AppBarSection>
+          <KButton :fill-mode="'flat'" :svg-icon="menuIcon"> </KButton>
+        </AppBarSection>
+
+        <AppBarSpacer :width="8" />
+
+        <AppBarSection>
+          <h1 class="title">{{ color.text }} AppBar</h1>
+        </AppBarSection>
+        {{ color.value }}
+        <AppBarSpacer />
+
+        <AppBarSection>
+          <KButton :fill-mode="'flat'">
+            <div :class="'badge'">
+              <SvgIcon :icon="menuIcon" />
+              <Badge :theme-color="'info'" :shape="'dot'" />
+            </div>
+          </KButton>
+        </AppBarSection>
+      </AppBar>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  AppBar,
+  AppBarSection,
+  AppBarSpacer,
+} from '@progress/kendo-vue-layout';
+import { Button } from '@progress/kendo-vue-buttons';
+import { Badge } from '@progress/kendo-vue-indicators';
+
+import { menuIcon } from '@progress/kendo-svg-icons';
+import { SvgIcon } from '@progress/kendo-vue-common';
+
+export default {
+  components: {
+    AppBar,
+    AppBarSection,
+    AppBarSpacer,
+    KButton: Button,
+    Badge,
+    SvgIcon,
+  },
+  data() {
+    return {
+      menuIcon,
+      themeColors: [
+        { text: 'Primary', value: 'primary' },
+        { text: 'Dark', value: 'dark' },
+        { text: 'Light', value: 'light' },
+        { text: 'Inherit', value: 'inherit' }
+      ],
+    };
+  },
+};
+</script>
+<style>
+body {
+  background: #dfdfdf;
+}
+.title {
+  text-transform: capitalize;
+  font-size: 18px;
+  margin: 0;
+}
+.k-badge-container {
+  margin-right: 4px;
+}
+.k-icon {
+  font-size: 18px;
+}
+.k-button k-button-md k-rounded-md k-button-solid k-button-solid-base {
+  padding: 0;
+}
+.k-appbar-dark
+  .k-button
+  k-button-md
+  k-rounded-md
+  k-button-solid
+  k-button-solid-base-clear {
+  color: #ffffffff;
+}
+.k-appbar-dark
+  .k-button
+  k-button-md
+  k-rounded-md
+  k-button-solid
+  k-button-solid-base-clear:hover {
+  color: #ffffff99;
+}
+
+.wrap {
+  margin-bottom: 30px;
+}
+.badge {
+  position: relative;
+  overflow: visible;
+}
+</style>
diff --git a/vue-options-api-demos/layout/avatar/appearance/border/main.js b/vue-options-api-demos/layout/avatar/appearance/border/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/avatar/appearance/border/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/avatar/appearance/border/main.vue b/vue-options-api-demos/layout/avatar/appearance/border/main.vue
new file mode 100644
index 00000000..aaeb8f12
--- /dev/null
+++ b/vue-options-api-demos/layout/avatar/appearance/border/main.vue
@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <h5>Avatar Border</h5>
+    <div :style="{ display: 'flex', justifyContent: 'space-evenly' }">
+      <Avatar
+        :type="'image'"
+        :size="'large'"
+        :rounded="'full'"
+        :border="true"
+        :fill-mode="'outline'"
+        ><img
+          :src="avatarImage"
+          :style="{ width: 64, height: 64 }"
+          :alt="'Avatar Image'"
+      /></Avatar>
+      <Avatar
+        :type="'text'"
+        :size="'large'"
+        :rounded="'full'"
+        :border="true"
+        :fill-mode="'outline'"
+        ><span>JS</span></Avatar
+      >
+      <Avatar
+        :type="'icon'"
+        :size="'large'"
+        :rounded="'full'"
+        :border="true"
+        :fill-mode="'outline'"
+      >
+        <SvgIcon :icon="userIcon" />
+      </Avatar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Avatar } from "@progress/kendo-vue-layout";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { userIcon } from "@progress/kendo-svg-icons";
+
+const avatarImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/RICSU.jpg';
+
+export default {
+  components: {
+    Avatar,
+    SvgIcon,
+  },
+  data() {
+    return {
+      userIcon,
+      avatarImage
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/avatar/appearance/fill-mode/main.js b/vue-options-api-demos/layout/avatar/appearance/fill-mode/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/avatar/appearance/fill-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/avatar/appearance/fill-mode/main.vue b/vue-options-api-demos/layout/avatar/appearance/fill-mode/main.vue
new file mode 100644
index 00000000..c5fcd3d4
--- /dev/null
+++ b/vue-options-api-demos/layout/avatar/appearance/fill-mode/main.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="demo">
+    <span class="wrapper">
+      <span style="text-align: center">Solid</span>
+      <avatar
+        :type="'icon'"
+        :fill-mode="'solid'"
+        style="margin: 10px"
+        :border="true"
+      >
+        <SvgIcon :icon="userIcon" />
+      </avatar>
+    </span>
+    <span class="wrapper">
+      <span style="text-align: center">Outline</span>
+      <avatar
+        :type="'icon'"
+        :fill-mode="'outline'"
+        style="margin: 10px"
+        :border="true"
+      >
+        <SvgIcon :icon="userIcon" />
+      </avatar>
+    </span>
+    <span class="wrapper">
+      <span style="text-align: center">Custom</span>
+      <avatar
+        :type="'icon'"
+        :fill-mode="null"
+        style="margin: 10px"
+        :class="'custom-avatar'"
+      >
+        <SvgIcon :icon="userIcon" />
+      </avatar>
+    </span>
+  </div>
+</template>
+<script>
+import { Avatar } from "@progress/kendo-vue-layout";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { userIcon } from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    Avatar,
+    SvgIcon,
+  },
+  data() {
+    return {
+      userIcon,
+    };
+  },
+};
+</script>
+
+<style>
+.custom-avatar {
+  background-color: lightgreen;
+  border: 3px dotted green;
+}
+
+.custom-avatar .k-icon {
+  color: blue;
+}
+
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/layout/avatar/appearance/rounded/main.js b/vue-options-api-demos/layout/avatar/appearance/rounded/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/avatar/appearance/rounded/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/avatar/appearance/rounded/main.vue b/vue-options-api-demos/layout/avatar/appearance/rounded/main.vue
new file mode 100644
index 00000000..68d9290b
--- /dev/null
+++ b/vue-options-api-demos/layout/avatar/appearance/rounded/main.vue
@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <div class="demo">
+      <span class="wrapper">
+        <span style="text-align: center">Null</span>
+        <Avatar :type="'icon'" :rounded="null" style="margin: 10px">
+          <SvgIcon :icon="userIcon" />
+        </Avatar>
+      </span>
+      <span class="wrapper">
+        <span style="text-align: center">Small</span>
+        <Avatar :type="'icon'" :rounded="'small'" style="margin: 10px">
+          <SvgIcon :icon="userIcon" />
+        </Avatar>
+      </span>
+      <span class="wrapper">
+        <span style="text-align: center">Medium</span>
+        <Avatar :type="'icon'" :rounded="'medium'" style="margin: 10px">
+          <SvgIcon :icon="userIcon" />
+        </Avatar>
+      </span>
+      <span class="wrapper">
+        <span style="text-align: center">Large </span>
+        <Avatar :type="'icon'" :rounded="'large'" style="margin: 10px">
+          <SvgIcon :icon="userIcon" />
+        </Avatar>
+      </span>
+      <span class="wrapper">
+        <span style="text-align: center">Full</span>
+        <Avatar :type="'icon'" :rounded="'full'" style="margin: 10px">
+          <SvgIcon :icon="userIcon" />
+        </Avatar>
+      </span>
+      <span class="wrapper">
+        <span style="text-align: center">Custom</span>
+        <Avatar :type="'icon'" class="custom-avatar">
+          <SvgIcon :icon="userIcon" />
+        </Avatar>
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { Avatar } from "@progress/kendo-vue-layout";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { userIcon } from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    Avatar,
+    SvgIcon,
+  },
+  data() {
+    return {
+      userIcon,
+    };
+  },
+};
+</script>
+
+<style>
+.custom-avatar {
+  border-bottom-right-radius: 15px;
+  border-top-left-radius: 15px;
+  margin: 10px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/layout/avatar/appearance/shapes/main.js b/vue-options-api-demos/layout/avatar/appearance/shapes/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/avatar/appearance/shapes/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/avatar/appearance/shapes/main.vue b/vue-options-api-demos/layout/avatar/appearance/shapes/main.vue
new file mode 100644
index 00000000..bd3fa221
--- /dev/null
+++ b/vue-options-api-demos/layout/avatar/appearance/shapes/main.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <div style="display: flex; justify-content: space-evenly">
+      <Avatar :type="'image'" :size="'large'">
+        <img :src="avatarImage" style="width: 64px; height: 64px" />
+      </Avatar>
+      <Avatar :type="'text'" :size="'large'">
+        <span>JS</span>
+      </Avatar>
+      <Avatar :type="'icon'" :size="'large'">
+        <SvgIcon :icon="userIcon" />
+      </Avatar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Avatar } from "@progress/kendo-vue-layout";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { userIcon } from "@progress/kendo-svg-icons";
+
+const avatarImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/RICSU.jpg';
+
+export default {
+  components: {
+    Avatar,
+    SvgIcon,
+  },
+  data: function () {
+    return {
+      userIcon,
+      avatarImage,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/avatar/appearance/size/main.js b/vue-options-api-demos/layout/avatar/appearance/size/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/avatar/appearance/size/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/avatar/appearance/size/main.vue b/vue-options-api-demos/layout/avatar/appearance/size/main.vue
new file mode 100644
index 00000000..4121e0a2
--- /dev/null
+++ b/vue-options-api-demos/layout/avatar/appearance/size/main.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="demo">
+    <span class="wrapper">
+      <span>Small</span>
+      <Avatar :type="'icon'" :size="'small'" style="margin: 10px">
+        <SvgIcon :icon="userIcon" />
+      </Avatar>
+    </span>
+    <span class="wrapper">
+      <span>Medium</span>
+      <Avatar :type="'icon'" :size="'medium'" style="margin: 10px">
+        <SvgIcon :icon="userIcon" />
+      </Avatar>
+    </span>
+    <span class="wrapper">
+      <span>Large</span>
+      <Avatar :type="'icon'" :size="'large'" style="margin: 10px">
+        <SvgIcon :icon="userIcon" />
+      </Avatar>
+    </span>
+    <span class="wrapper">
+      <span>Custom size</span>
+      <Avatar :type="'icon'" :size="null" class="custom-Avatar">
+        <SvgIcon :icon="userIcon" />
+      </Avatar>
+    </span>
+  </div>
+</template>
+<script>
+import { Avatar } from "@progress/kendo-vue-layout";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { userIcon } from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    Avatar,
+    SvgIcon,
+  },
+  data() {
+    return {
+      userIcon,
+    };
+  },
+};
+</script>
+
+<style>
+.custom-avatar {
+  height: 40px;
+  width: 200px;
+}
+.wrapper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/vue-options-api-demos/layout/avatar/appearance/theme-color/main.js b/vue-options-api-demos/layout/avatar/appearance/theme-color/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/avatar/appearance/theme-color/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/avatar/appearance/theme-color/main.vue b/vue-options-api-demos/layout/avatar/appearance/theme-color/main.vue
new file mode 100644
index 00000000..88ef17c8
--- /dev/null
+++ b/vue-options-api-demos/layout/avatar/appearance/theme-color/main.vue
@@ -0,0 +1,40 @@
+<template>
+    <div>
+      <div v-for="(color, index) in themeColors" :key="index">
+          <avatar :type="'text'" :theme-color="color" style="margin: 10px" >
+              {{color.substr(0, 2)}}
+          </avatar>
+          <span> - {{color}}</span>
+      </div>
+    </div>
+</template>
+
+<script>
+import { Avatar } from "@progress/kendo-vue-layout";
+
+const themeColors = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "inherit",
+  "info",
+  "success",
+  "error",
+  "warning",
+  "dark",
+  "light",
+  "inverse",
+];
+
+export default {
+  components:{
+    'avatar': Avatar
+  },
+  data: function(){
+    return {
+        themeColors: themeColors
+    }
+  }
+}
+
+</script>
diff --git a/vue-options-api-demos/layout/avatar/overview/main.js b/vue-options-api-demos/layout/avatar/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/avatar/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/avatar/overview/main.vue b/vue-options-api-demos/layout/avatar/overview/main.vue
new file mode 100644
index 00000000..e1184653
--- /dev/null
+++ b/vue-options-api-demos/layout/avatar/overview/main.vue
@@ -0,0 +1,145 @@
+<template>
+  <div :class="'avatar-container'">
+    <div :class="'contact-list'">Contacts</div>
+    <div>
+      <div
+        style="
+          padding: 8px 14px;
+          margin-bottom: 4px;
+          box-shadow: 0 1px 2px #ccc;
+        "
+      >
+        <div v-for="(contact, index) in contactInitials" :key="index">
+          <div class="k-hbox">
+            <avatar :rounded="'full'" :type="'icon'" style="margin-right: 5px">
+              {{ contact.avatar }}
+            </avatar>
+            <div style="margin-left: 10px">
+              <h2 :class="'contact-name'">
+                {{ contact.name }}
+              </h2>
+              <p :class="'contact-position'">
+                {{ contact.position }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="k-hbox"
+        style="
+          padding: 8px 14px;
+          margin-bottom: 4px;
+          box-shadow: 0 1px 2px #ccc;
+        "
+      >
+        <div v-for="(contact, index) in contactImages" :key="index">
+          <div class="k-hbox">
+            <avatar :rounded="'full'" :type="'image'" style="margin-right: 5px">
+              <img :src="contact.avatar" :eager="true" :alt="'Avatar Image'" />
+            </avatar>
+            <div style="margin-left: 10px">
+              <h2 :class="'contact-name'">
+                {{ contact.name }}
+              </h2>
+              <p :class="'contact-position'">
+                {{ contact.position }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="k-hbox"
+        style="
+          padding: 8px 14px;
+          margin-bottom: 4px;
+          box-shadow: 0 1px 2px #ccc;
+        "
+      >
+        <avatar :rounded="'full'" :type="'icon'">
+          <SvgIcon :icon="userIcon" />
+        </avatar>
+        <div style="margin-left: 10px">
+          <h2 :class="'contact-name'">Unknown</h2>
+          <p :class="'contact-position'">Not specified</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Avatar } from "@progress/kendo-vue-layout";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { userIcon } from "@progress/kendo-svg-icons";
+
+const firstContactImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/RICSU.jpg';
+const secondContactImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/GOURL.jpg';
+
+const contactImages = [
+  {
+    avatar: firstContactImage,
+    name: "Michael Holz",
+    position: "Manager",
+  },
+  {
+    avatar: secondContactImage,
+    name: "André Stewart",
+    position: "Product Manager",
+  },
+];
+const contactInitials = [
+  {
+    avatar: "JS",
+    name: "Jason Smith",
+    position: "UX Designer",
+  },
+  {
+    avatar: "GP",
+    name: "George Porter",
+    position: "Software Engineer",
+  },
+];
+
+export default {
+  components: {
+    avatar: Avatar,
+    SvgIcon,
+  },
+  data: function () {
+    return {
+      userIcon,
+      contactImages: contactImages,
+      contactInitials: contactInitials,
+    };
+  },
+};
+</script>
+
+<style>
+.avatar-container {
+  width: 340px;
+  margin: auto;
+  padding: 4px 10px;
+  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.26),
+    0px 2px 2px 0px rgba(0, 0, 0, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.08);
+}
+
+.contact-position {
+  margin: 0px;
+  font-size: 0.8em;
+}
+
+.contact-name {
+  font-size: 1.3em;
+  font-weight: normal;
+  margin: 0px;
+}
+
+.contact-list {
+  text-align: center;
+  padding: 4px;
+  font-size: 20px;
+}
+</style>
diff --git a/vue-options-api-demos/layout/bottomnavigation/appearance/BottomNavigationStyleConfigurator.vue b/vue-options-api-demos/layout/bottomnavigation/appearance/BottomNavigationStyleConfigurator.vue
new file mode 100644
index 00000000..81b632a7
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/appearance/BottomNavigationStyleConfigurator.vue
@@ -0,0 +1,93 @@
+<template>
+    <div>
+      <div :style="{ display: 'flex', justifyContent: 'center' }">
+        <span
+          class="k-color-primary"
+          :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+          >Configurator</span
+        >
+      </div>
+      <div
+        class="example-config"
+        :style="{
+          display: 'flex',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+        }"
+      >
+        <span class="k-form-field">
+          <KLabel>
+            Theme
+            <div class="k-form-field-wrap">
+              <DropDownList
+                :data-items="themeColors"
+                :value="theme"
+                :style="{
+                  'min-width': '120px',
+                }"
+                @change="handleThemeChange"
+              />
+            </div>
+          </KLabel>
+        </span>
+        <span class="k-form-field">
+          <KLabel>
+            Fill Mode
+            <div class="k-form-field-wrap">
+              <DropDownList
+                :data-items="fillModes"
+                :value="fillMode"
+                :style="{
+                  'min-width': '120px',
+                }"
+                @change="handleFillModeChange"
+              />
+            </div>
+          </KLabel>
+        </span>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import { Label } from '@progress/kendo-vue-labels';
+  import { DropDownList } from '@progress/kendo-vue-dropdowns';
+  
+  export default {
+    components: {
+      KLabel: Label,
+      DropDownList,
+    },
+    props: {
+      fillMode: String,
+      theme: String,
+    },
+    emits: ['themechange', 'fillmodechange'],
+    data() {
+      return {
+        fillModes: ['solid', 'flat'],
+        themeColors: [
+          'primary',
+          'secondary',
+          'tertiary',
+          'info',
+          'success',
+          'warning',
+          'error',
+          'dark',
+          'light',
+          'inverse',
+        ],
+      };
+    },
+    methods: {
+      handleThemeChange(event) {
+        this.$emit('themechange', event);
+      },
+      handleFillModeChange(event) {
+        this.$emit('fillmodechange', event);
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/bottomnavigation/appearance/main.js b/vue-options-api-demos/layout/bottomnavigation/appearance/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/appearance/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/bottomnavigation/appearance/main.vue b/vue-options-api-demos/layout/bottomnavigation/appearance/main.vue
new file mode 100644
index 00000000..6dfe8a29
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/appearance/main.vue
@@ -0,0 +1,132 @@
+<template>
+  <div class="border-demo">
+      <BottomNavigationStyleConfigurator
+        :theme="theme"
+        @themechange="setTheme"
+        :fill-mode="fillMode"
+        @fillmodechange="setFillMode"
+      />
+      <div class="content">
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus optio
+          vitae dolorem sunt! Obcaecati reprehenderit vero itaque ex. Magnam ex
+          error rem, est quasi libero veniam ipsa enim quod. Porro. Lorem, ipsum
+          dolor sit amet consectetur adipisicing elit. Fuga blanditiis est,
+          harum quibusdam praesentium voluptatibus et similique dolorum aliquid
+          ab saepe enim numquam mollitia laborum alias doloremque impedit
+          voluptates reprehenderit.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus optio
+          vitae dolorem sunt! Obcaecati reprehenderit vero itaque ex. Magnam ex
+          error rem, est quasi libero veniam ipsa enim quod. Porro. Lorem, ipsum
+          dolor sit amet consectetur adipisicing elit. Fuga blanditiis est,
+          harum quibusdam praesentium voluptatibus et similique dolorum aliquid
+          ab saepe enim numquam mollitia laborum alias doloremque impedit
+          voluptates reprehenderit.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus optio
+          vitae dolorem sunt! Obcaecati reprehenderit vero itaque ex. Magnam ex
+          error rem, est quasi libero veniam ipsa enim quod. Porro. Lorem, ipsum
+          dolor sit amet consectetur adipisicing elit. Fuga blanditiis est,
+          harum quibusdam praesentium voluptatibus et similique dolorum aliquid
+          ab saepe enim numquam mollitia laborum alias doloremque impedit
+          voluptates reprehenderit.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus optio
+          vitae dolorem sunt! Obcaecati reprehenderit vero itaque ex. Magnam ex
+          error rem, est quasi libero veniam ipsa enim quod. Porro. Lorem, ipsum
+          dolor sit amet consectetur adipisicing elit. Fuga blanditiis est,
+          harum quibusdam praesentium voluptatibus et similique dolorum aliquid
+          ab saepe enim numquam mollitia laborum alias doloremque impedit
+          voluptates reprehenderit.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus optio
+          vitae dolorem sunt! Obcaecati reprehenderit vero itaque ex. Magnam ex
+          error rem, est quasi libero veniam ipsa enim quod. Porro. Lorem, ipsum
+          dolor sit amet consectetur adipisicing elit. Fuga blanditiis est,
+          harum quibusdam praesentium voluptatibus et similique dolorum aliquid
+          ab saepe enim numquam mollitia laborum alias doloremque impedit
+          voluptates reprehenderit.
+        </p>
+      </div>
+      <BottomNavigation
+        :items="computedItems"
+        @select="onSelect"
+        :fill-mode="fillMode"
+        :theme-color="theme"
+      />
+  </div>
+</template>
+<script>
+import { BottomNavigation } from '@progress/kendo-vue-layout';
+import BottomNavigationStyleConfigurator from './BottomNavigationStyleConfigurator.vue';
+import { arrowsSwapIcon, chartLineMarkersIcon, chartPieIcon, gearIcon, moreHorizontalIcon } from '@progress/kendo-svg-icons';
+export default {
+    components: {
+        BottomNavigation,
+        BottomNavigationStyleConfigurator,
+    },
+    computed: {
+        computedItems() {
+            return this.items.map((item, index) => ({
+                ...item,
+                selected: index === this.selected,
+            }));
+        },
+    },
+    data() {
+        return {
+            theme: 'primary',
+            fillMode: 'flat',
+            selected: 0,
+            items: [
+                {
+                    svgIcon: chartLineMarkersIcon,
+                    text: 'Revenue',
+                    selected: true,
+                },
+                {
+                    svgIcon: arrowsSwapIcon,
+                    text: 'Transactions',
+                },
+                {
+                    svgIcon: chartPieIcon,
+                    text: 'Overview',
+                },
+                {
+                    svgIcon: gearIcon,
+                    text: 'Settings',
+                },
+                {
+                    svgIcon: moreHorizontalIcon,
+                    text: 'More',
+                },
+            ],
+        };
+    },
+    methods: {
+        onSelect(ev) {
+            this.selected = ev.itemIndex;
+        },
+        setTheme(ev) {
+            this.theme = ev.value;
+        },
+        setFillMode(ev) {
+            this.fillMode = ev.value;
+        },
+    },
+};
+</script>
+
+<style>
+#app {
+  padding: 0 !important;
+}
+.content {
+  padding: 20px;
+}
+</style>
diff --git a/vue-options-api-demos/layout/bottomnavigation/basic-usage/Calendar.vue b/vue-options-api-demos/layout/bottomnavigation/basic-usage/Calendar.vue
new file mode 100644
index 00000000..69d326c6
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/basic-usage/Calendar.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <h1 :class="'title-basic-usage-bottomnav k-color-primary'">Calendar</h1>
+    <div :class="'list'">
+      <div :class="'section'">11/5 Monday</div>
+      <div :class="'list-item'">
+        <div>16:00</div>
+        <div :class="'v-line k-bg-error'" />
+        <div>Job interview for internal position</div>
+      </div>
+      <div :class="'list-item'">
+        <div>21:00</div>
+        <div :class="'v-line k-bg-info'" />
+        <div>Martha Birthday</div>
+      </div>
+      <div :class="'section'">Tomorrow</div>
+      <div :class="'list-item'">
+        <div :class="'centered'">No upcoming events</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {};
+</script>
diff --git a/vue-options-api-demos/layout/bottomnavigation/basic-usage/Inbox.vue b/vue-options-api-demos/layout/bottomnavigation/basic-usage/Inbox.vue
new file mode 100644
index 00000000..e4a1626c
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/basic-usage/Inbox.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <h1 :class="'title-basic-usage-bottomnav k-color-primary'">Mail Inbox</h1>
+    <div :class="'list'">
+      <div :class="'list-item'">
+        <Avatar
+          :type="'text'"
+          :shape="'circle'"
+          :theme-color="'tertiary'"
+          :rounded="'full'"
+        >
+          AB
+        </Avatar>
+        <div>
+          Hi Tom, Since Monday I'll be out of office, I'm rescheduling the
+          meeting for Tuesday.
+        </div>
+      </div>
+      <div :class="'list-item separator-basic-usage-bottomnav'" />
+      <div :class="'list-item sub-title-basic-usage-bottomnav'">Last Week</div>
+      <div :class="'list-item'">
+        <Avatar
+          :type="'text'"
+          :shape="'circle'"
+          :theme-color="'info'"
+          :rounded="'full'"
+        >
+          TY
+        </Avatar>
+        <div>
+          Hi Tom, my aunt comes for a visit this Saturday, so I can’t come back
+          to St. Pete…
+        </div>
+      </div>
+      <div :class="'list-item'">
+        <Avatar
+          :type="'text'"
+          :shape="'circle'"
+          :theme-color="'warning'"
+          :rounded="'full'"
+        >
+          IH
+        </Avatar>
+        <div>
+          Dear All, We would like to inform you that IT will be doing planned
+          upgrades…
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { Avatar } from "@progress/kendo-vue-layout";
+export default {
+  components: {
+    Avatar,
+  },
+  data() {
+    return {
+      text: "Home",
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/bottomnavigation/basic-usage/Profile.vue b/vue-options-api-demos/layout/bottomnavigation/basic-usage/Profile.vue
new file mode 100644
index 00000000..88b1fa80
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/basic-usage/Profile.vue
@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <h1 :class="'title-basic-usage-bottomnav k-color-primary'">My Profile</h1>
+    <div :class="'list'">
+      <Avatar
+        :class="'profile-image'"
+        :type="'image'"
+        :shape="'circle'"
+        :rounded="'full'"
+      >
+        <img
+          :src="kendokaAvatar"
+          :alt="'Kendo Logo'" />
+        />
+      </Avatar>
+      <div :class="'email centered'">myusername@mail.com</div>
+      <div :class="'list-item separator-basic-usage-bottomnav'" />
+      <div :class="'list-item sub-title-basic-usage-bottomnav'">Calendars</div>
+      <div :class="'list-item'">
+        <Avatar
+          :type="'text'"
+          :shape="'circle'"
+          :theme-color="'primary'"
+          :size="'small'"
+        />
+        <div>Work</div>
+        <span :class="'k-icon k-i-saturation my-icon'" />
+      </div>
+      <div :class="'list-item'">
+        <Avatar
+          :type="'text'"
+          :shape="'circle'"
+          :themeColor="'info'"
+          :size="'small'"
+        />
+        <div>Family</div>
+        <span :class="'k-icon k-i-saturation my-icon'" />
+      </div>
+      <div :class="'list-item'">
+        <Avatar
+          :type="'text'"
+          :shape="'circle'"
+          :theme-color="'warning'"
+          :size="'small'"
+        />
+        <div>Birthdays</div>
+        <span :class="'k-icon k-i-saturation my-icon'" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { Avatar } from "@progress/kendo-vue-layout";
+
+let kendokaAvatar = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/suite/kendoka-vue.webp';
+
+export default {
+  components: {
+    Avatar,
+  },
+  data() {
+    return {
+      text: "More",
+      kendokaAvatar
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/bottomnavigation/basic-usage/index.js b/vue-options-api-demos/layout/bottomnavigation/basic-usage/index.js
new file mode 100644
index 00000000..f45b152f
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/basic-usage/index.js
@@ -0,0 +1,29 @@
+import { createWebHistory, createRouter } from "vue-router";
+import Inbox from "./Inbox";
+import Calendar from "./Calendar";
+import Profile from "./Profile";
+
+const routes = [
+    {
+        path: "/layout/bottomnavigation/overview/inbox",
+        name: "Inbox",
+        component: Inbox
+    },
+    {
+        path: "/layout/bottomnavigation/overview/calendar",
+        name: "Calendar",
+        component: Calendar
+    },
+    {
+        path: "/layout/bottomnavigation/overview/profile",
+        name: "Profile",
+        component: Profile
+    }
+];
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+});
+
+export default router;
diff --git a/vue-options-api-demos/layout/bottomnavigation/basic-usage/main.js b/vue-options-api-demos/layout/bottomnavigation/basic-usage/main.js
new file mode 100644
index 00000000..b51f2405
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/basic-usage/main.js
@@ -0,0 +1,5 @@
+import { createApp } from "vue";
+import App from "./main.vue";
+import router from "./index.js";
+
+createApp(App).use(router).mount("#app");
diff --git a/vue-options-api-demos/layout/bottomnavigation/basic-usage/main.vue b/vue-options-api-demos/layout/bottomnavigation/basic-usage/main.vue
new file mode 100644
index 00000000..365c1dba
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/basic-usage/main.vue
@@ -0,0 +1,155 @@
+<template>
+  <div id="test" :class="'example-wrapper-basic-usage-bottomonavigation'">
+    <div :class="'page'">
+      <div :class="'content-bottom-navigation'">
+        <router-view />
+      </div>
+      <BottomNavigation
+        :position-mode="'sticky'"
+        :items="computedItems"
+        @select="onSelect"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { BottomNavigation } from "@progress/kendo-vue-layout";
+import { inboxIcon, calendarIcon, userIcon } from "@progress/kendo-svg-icons";
+
+export default {
+    name: "App",
+    components: { BottomNavigation },
+    mounted() {
+        this.$router.push(this.items[0].data);
+    },
+    data() {
+        return {
+            items: [
+                {
+                    text: "Inbox",
+                    id: 1,
+                    svgIcon: inboxIcon,
+                    data: {
+                        path: "/layout/bottomnavigation/overview/inbox",
+                    },
+                    selected: true,
+                },
+                {
+                    text: "Calendar",
+                    id: 2,
+                    svgIcon: calendarIcon,
+                    data: {
+                        path: "/layout/bottomnavigation/overview/calendar",
+                    },
+                },
+                {
+                    text: "Profile",
+                    id: 3,
+                    svgIcon: userIcon,
+                    data: {
+                        path: "/layout/bottomnavigation/overview/profile",
+                    },
+                },
+            ],
+            selected: 0,
+        };
+    },
+    computed: {
+        computedItems() {
+            return this.items.map((item, index) => ({
+                ...item,
+                selected: index === this.selected,
+            }));
+        },
+    },
+    methods: {
+        onSelect(e) {
+            this.selected = e.itemIndex;
+            this.$router.push(e.itemTarget.data.path);
+        },
+    },
+};
+</script>
+<style>
+.example-wrapper-basic-usage-bottomonavigation {
+    width: 350px;
+    margin: 0 auto;
+    box-shadow: 0px 10px 20px #00000029;
+    border-radius: 30px;
+  }
+
+  .page {
+    padding: 10px 10px 0 10px;
+  }
+
+  .content-bottom-navigation {
+    background: #f9f9f9;
+    border-radius: 30px 30px 0 0;
+    height: 550px;
+  }
+
+  .k-bottom-nav {
+    border-radius: 0 0 20px 20px;
+  }
+
+  .title-basic-usage-bottomnav {
+    text-align: center;
+    font-size: 30px;
+    padding: 40px 0;
+  }
+
+  .list {
+    display: flex;
+    flex-direction: column;
+    padding: 0 20px;
+  }
+
+  .list-item {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 30px;
+    position: relative;
+  }
+
+  .k-avatar {
+    margin-right: 15px;
+  }
+
+  .separator-basic-usage-bottomnav {
+    border: 1px solid #ccc;
+  }
+
+  .section {
+    background: #ededed;
+    font-weight: bold;
+    padding: 2px 5px;
+    margin-bottom: 15px;
+  }
+
+  .centered {
+    margin: 30px auto;
+  }
+
+  .v-line {
+    width: 2px;
+    margin: 0 10px 0 15px;
+  }
+
+  .profile-image {
+    width: 100px;
+    height: 100px;
+    flex-basis: 100px;
+    padding: 1px;
+    margin: 0 auto;
+  }
+
+  .email {
+    font-weight: bold;
+  }
+
+  .my-icon {
+    position: absolute;
+    right: 0;
+  }
+</style>
diff --git a/vue-options-api-demos/layout/bottomnavigation/custom-rendering/main.js b/vue-options-api-demos/layout/bottomnavigation/custom-rendering/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/custom-rendering/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/bottomnavigation/custom-rendering/main.vue b/vue-options-api-demos/layout/bottomnavigation/custom-rendering/main.vue
new file mode 100644
index 00000000..1aed5db5
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/custom-rendering/main.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="example-wrapper">
+    <div class="page">
+      <div class="content">
+        <h3 class="title k-color-primary">Custom Item Demo</h3>
+      </div>
+      <BottomNavigation
+        :position-mode="'sticky'"
+        :items="computedItems"
+        @select="onSelect"
+      >
+        <template v-slot:badge="{ props }">
+          <span class="badge">
+            <span :class="`k-icon k-i-${props.item.icon}`" />
+            <Badge :size="'small'">{{ props.item.notifications }} </Badge>
+          </span>
+        </template>
+        <template v-slot:floating="{ props }">
+          <FloatingActionButton
+            :icon="props.item.icon"
+            :position-mode="'absolute'"
+            :align="{ horizontal: 'center', vertical: 'bottom' }"
+            :align-offset="{ y: 20 }"
+          />
+        </template>
+        <template v-slot:icon="{ props }">
+          <span :class="`k-icon k-i-${props.item.icon}`" />
+        </template>
+      </BottomNavigation>
+    </div>
+  </div>
+</template>
+
+<script>
+import { BottomNavigation } from "@progress/kendo-vue-layout";
+import { Badge } from "@progress/kendo-vue-indicators";
+import { FloatingActionButton } from "@progress/kendo-vue-buttons";
+import { heartIcon, homeIcon, plusIcon, searchIcon, userIcon } from "@progress/kendo-svg-icons";
+
+export default {
+  name: "App",
+  components: { BottomNavigation, Badge, FloatingActionButton },
+  data() {
+    return {
+      items: [
+        { svgIcon: homeIcon, selected: true, notifications: 2, item: "badge" },
+        { svgIcon: searchIcon, item: "icon" },
+        { svgIcon: plusIcon, item: "floating" },
+        { svgIcon: heartIcon, notifications: 5, item: "badge" },
+        { svgIcon: userIcon, item: "icon" },
+      ],
+      selected: 0,
+    };
+  },
+  computed: {
+    computedItems() {
+      return this.items.map((item, index) => ({
+        ...item,
+        selected: index === this.selected,
+      }));
+    },
+  },
+  methods: {
+    onSelect(e) {
+      this.selected = e.itemIndex;
+    },
+  },
+};
+</script>
+
+<style>
+.badge {
+  position: relative;
+  overflow: visible;
+}
+.example-wrapper {
+  width: 380px;
+  margin: 0 auto;
+  box-shadow: 0px 10px 20px #00000029;
+  border-radius: 30px;
+}
+
+.page {
+  padding: 10px 10px 0 10px;
+}
+
+.content {
+  background: #F9F9F9;
+  border-radius: 30px 30px 0 0;
+  height: 550px;
+}
+
+.k-bottom-nav {
+  border-radius: 0 0 20px 20px;
+  overflow: visible;
+}
+
+.k-bottom-nav-item {
+  min-width: 40px;
+}
+
+.title {
+  text-align: center;
+  font-size: 30px;
+  padding: 40px 0;
+}
+</style>
diff --git a/vue-options-api-demos/layout/bottomnavigation/fill/BottomNavigationStyleConfigurator.vue b/vue-options-api-demos/layout/bottomnavigation/fill/BottomNavigationStyleConfigurator.vue
new file mode 100644
index 00000000..b804c58f
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/fill/BottomNavigationStyleConfigurator.vue
@@ -0,0 +1,62 @@
+<template>
+    <div>
+      <div :style="{ display: 'flex', justifyContent: 'center' }">
+        <span
+          class="k-color-primary"
+          :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+          >Configurator</span
+        >
+      </div>
+      <div
+        class="example-config"
+        :style="{
+          display: 'flex',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+        }"
+      >
+        <span class="k-form-field">
+          <KLabel>
+            Fill Mode
+            <div class="k-form-field-wrap">
+              <DropDownList
+                :data-items="fillModes"
+                :value="fillMode"
+                :style="{
+                  'min-width': '120px',
+                }"
+                @change="handleFillModeChange"
+              />
+            </div>
+          </KLabel>
+        </span>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import { Label } from '@progress/kendo-vue-labels';
+  import { DropDownList } from '@progress/kendo-vue-dropdowns';
+  
+  export default {
+    components: {
+      KLabel: Label,
+      DropDownList,
+    },
+    props: {
+      fillMode: String,
+    },
+    emits: ['fillmodechange'],
+    data() {
+      return {
+        fillModes: ['solid', 'flat'],
+      };
+    },
+    methods: {
+      handleFillModeChange(event) {
+        this.$emit('fillmodechange', event);
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/bottomnavigation/fill/main.js b/vue-options-api-demos/layout/bottomnavigation/fill/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/fill/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/bottomnavigation/fill/main.vue b/vue-options-api-demos/layout/bottomnavigation/fill/main.vue
new file mode 100644
index 00000000..3340b11d
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/fill/main.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="border-demo">
+      <BottomNavigationStyleConfigurator
+        :fill-mode="fillMode"
+        @fillmodechange="setFillMode"
+      />
+      <div class="content-fill-mode">
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus optio
+          vitae dolorem sunt! Obcaecati reprehenderit vero itaque ex. Magnam ex
+          error rem, est quasi libero veniam ipsa enim quod. Porro. Lorem, ipsum
+          dolor sit amet consectetur adipisicing elit. Fuga blanditiis est,
+          harum quibusdam praesentium voluptatibus et similique dolorum aliquid
+          ab saepe enim numquam mollitia laborum alias doloremque impedit
+          voluptates reprehenderit.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus optio
+          vitae dolorem sunt! Obcaecati reprehenderit vero itaque ex. Magnam ex
+          error rem, est quasi libero veniam ipsa enim quod. Porro. Lorem, ipsum
+          dolor sit amet consectetur adipisicing elit. Fuga blanditiis est,
+          harum quibusdam praesentium voluptatibus et similique dolorum aliquid
+          ab saepe enim numquam mollitia laborum alias doloremque impedit
+          voluptates reprehenderit.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus optio
+          vitae dolorem sunt! Obcaecati reprehenderit vero itaque ex. Magnam ex
+          error rem, est quasi libero veniam ipsa enim quod. Porro. Lorem, ipsum
+          dolor sit amet consectetur adipisicing elit. Fuga blanditiis est,
+          harum quibusdam praesentium voluptatibus et similique dolorum aliquid
+          ab saepe enim numquam mollitia laborum alias doloremque impedit
+          voluptates reprehenderit.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus optio
+          vitae dolorem sunt! Obcaecati reprehenderit vero itaque ex. Magnam ex
+          error rem, est quasi libero veniam ipsa enim quod. Porro. Lorem, ipsum
+          dolor sit amet consectetur adipisicing elit. Fuga blanditiis est,
+          harum quibusdam praesentium voluptatibus et similique dolorum aliquid
+          ab saepe enim numquam mollitia laborum alias doloremque impedit
+          voluptates reprehenderit.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus optio
+          vitae dolorem sunt! Obcaecati reprehenderit vero itaque ex. Magnam ex
+          error rem, est quasi libero veniam ipsa enim quod. Porro. Lorem, ipsum
+          dolor sit amet consectetur adipisicing elit. Fuga blanditiis est,
+          harum quibusdam praesentium voluptatibus et similique dolorum aliquid
+          ab saepe enim numquam mollitia laborum alias doloremque impedit
+          voluptates reprehenderit.
+        </p>
+      </div>
+      <BottomNavigation
+        :items="computedItems"
+        @select="onSelect"
+        :fill-mode="fillMode"
+      />
+  </div>
+</template>
+<script>
+import { BottomNavigation } from '@progress/kendo-vue-layout';
+import BottomNavigationStyleConfigurator from './BottomNavigationStyleConfigurator.vue';
+import { arrowsSwapIcon, chartLineMarkersIcon, chartPieIcon, gearIcon, moreHorizontalIcon } from '@progress/kendo-svg-icons';
+
+export default {
+    components: {
+        BottomNavigation,
+        BottomNavigationStyleConfigurator,
+    },
+    computed: {
+        computedItems() {
+            return this.items.map((item, index) => ({
+                ...item,
+                selected: index === this.selected,
+            }));
+        },
+    },
+    data() {
+        return {
+            theme: 'primary',
+            fillMode: 'solid',
+            selected: 0,
+            items: [
+                {
+                    svgIcon: chartLineMarkersIcon,
+                    text: 'Revenue',
+                    selected: true,
+                },
+                {
+                    svgIcon: arrowsSwapIcon,
+                    text: 'Transactions',
+                },
+                {
+                    svgIcon: chartPieIcon,
+                    text: 'Overview',
+                },
+                {
+                    svgIcon: gearIcon,
+                    text: 'Settings',
+                },
+                {
+                    svgIcon: moreHorizontalIcon,
+                    text: 'More',
+                },
+            ],
+        };
+    },
+    methods: {
+        onSelect(ev) {
+            this.selected = ev.itemIndex;
+        },
+        setFillMode(ev) {
+            this.fillMode = ev.value;
+        },
+    },
+};
+</script>
+
+<style>
+.content-fill-mode {
+  padding: 20px;
+}
+</style>
diff --git a/vue-options-api-demos/layout/bottomnavigation/item-content/main.js b/vue-options-api-demos/layout/bottomnavigation/item-content/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/item-content/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/bottomnavigation/item-content/main.vue b/vue-options-api-demos/layout/bottomnavigation/item-content/main.vue
new file mode 100644
index 00000000..bb14800e
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/item-content/main.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="border-demo">
+    <div class="page">
+      <div class="example-config">
+        <legend>Item content settings</legend>
+        <RadioGroup
+          :data-items="contentTypes"
+          v-model="itemContent"
+          :layout="'horizontal'"
+        />
+      </div>
+      <p class="content-item" v-if="selected === 0">Inbox Content</p>
+      <p class="content-item" v-if="selected === 1">Calendar Content</p>
+      <p class="content-item" v-if="selected === 2">Profile Content</p>
+      <p class="content-item" v-if="selected === 3">More Content</p>
+      <BottomNavigation
+        :positionMode="'sticky'"
+        :items="computedItems"
+        @select="onSelect"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import { BottomNavigation } from "@progress/kendo-vue-layout";
+import { RadioGroup } from "@progress/kendo-vue-inputs";
+import {
+  cameraIcon,
+  folderIcon,
+  searchIcon,
+  moreHorizontalIcon,
+} from "@progress/kendo-svg-icons";
+export default {
+  components: {
+    BottomNavigation,
+    RadioGroup,
+  },
+  computed: {
+    computedItems() {
+      return this.content.map(({ text, ...rest }, index) =>
+        this.itemContent === "Icon"
+          ? {
+              ...rest,
+              selected: index === this.selected,
+            }
+          : {
+              text,
+              ...rest,
+              selected: index === this.selected,
+            }
+      );
+    },
+  },
+  data() {
+    return {
+      contentTypes: [
+        {
+          label: "Icon & Text",
+          value: "Icon & Text",
+        },
+        {
+          label: "Icon",
+          value: "Icon",
+        },
+      ],
+      itemContent: "Icon & Text",
+      selected: 0,
+      content: [
+        {
+          text: "Photos",
+          svgIcon: cameraIcon,
+          selected: true,
+        },
+        {
+          text: "Albums",
+          svgIcon: folderIcon,
+        },
+        {
+          text: "Search",
+          svgIcon: searchIcon,
+        },
+        {
+          text: "More",
+          svgIcon: moreHorizontalIcon,
+        },
+      ],
+    };
+  },
+  methods: {
+    onSelect(ev) {
+      this.selected = ev.itemIndex;
+    },
+  },
+};
+</script>
+<style>
+.content-item {
+  line-height: 200px;
+  text-align: center;
+  vertical-align: middle;
+}
+</style>
diff --git a/vue-options-api-demos/layout/bottomnavigation/item-flow/main.js b/vue-options-api-demos/layout/bottomnavigation/item-flow/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/item-flow/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/bottomnavigation/item-flow/main.vue b/vue-options-api-demos/layout/bottomnavigation/item-flow/main.vue
new file mode 100644
index 00000000..01681ffc
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/item-flow/main.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="border-demo">
+    <div class="page">
+      <div class="example-config">
+        <legend>Item flow settings</legend>
+        <RadioGroup
+          :data-items="contentTypes"
+          v-model="itemFlow"
+          :layout="'horizontal'"
+        />
+      </div>
+      <p class="content-item-flow" v-if="selected === 0">Inbox Content</p>
+      <p class="content-item-flow" v-if="selected === 1">Calendar Content</p>
+      <p class="content-item-flow" v-if="selected === 2">Profile Content</p>
+      <BottomNavigation
+        :positionMode="'sticky'"
+        :itemFlow="itemFlow"
+        :items="computedItems"
+        @select="onSelect"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import { BottomNavigation } from '@progress/kendo-vue-layout';
+import { RadioGroup } from '@progress/kendo-vue-inputs';
+import { calendarIcon, envelopIcon, userIcon } from '@progress/kendo-svg-icons';
+
+export default {
+  components: {
+    BottomNavigation,
+    RadioGroup,
+  },
+  computed: {
+    computedItems() {
+      return this.items.map((item, index) => ({
+        ...item,
+        selected: index === this.selected,
+      }));
+    },
+  },
+  data() {
+    return {
+      contentTypes: [
+        {
+          label: 'Horizontal',
+          value: 'vertical',
+        },
+        {
+          label: 'Vertical',
+          value: 'horizontal',
+        },
+      ],
+      itemFlow: 'vertical',
+      selected: 0,
+      items: [
+        {
+          text: 'Inbox',
+          id: 1,
+          svgIcon: envelopIcon,
+          selected: true,
+        },
+        {
+          text: 'Calendar',
+          id: 2,
+          svgIcon: calendarIcon,
+        },
+        {
+          text: 'Profile',
+          id: 3,
+          svgIcon: userIcon,
+        },
+      ],
+    };
+  },
+  methods: {
+    onSelect(ev) {
+      this.selected = ev.itemIndex;
+    },
+  },
+};
+</script>
+<style>
+.content-item-flow {
+  line-height: 200px;
+  text-align: center;
+  vertical-align: middle;
+}
+</style>
diff --git a/vue-options-api-demos/layout/bottomnavigation/item-render/main.js b/vue-options-api-demos/layout/bottomnavigation/item-render/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/item-render/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/bottomnavigation/item-render/main.vue b/vue-options-api-demos/layout/bottomnavigation/item-render/main.vue
new file mode 100644
index 00000000..0e7bd958
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/item-render/main.vue
@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <BottomNavigation
+      :position-mode="'sticky'"
+      :items="computedItems"
+      :fill="'solid'"
+      :theme-color="'light'"
+      :item="'itemTemplate'"
+      @select="onSelect"
+    >
+      <template v-slot:itemTemplate="{ props }">
+        <span :style="{ 'text-align': 'center', 'text-decoration': 'none' }">
+          <span
+            role="presentation"
+            :class="`k-icon k-i-${props.item.icon}`"
+          ></span>
+          <div>{{ props.item.text }}</div>
+        </span>
+      </template>
+    </BottomNavigation>
+  </div>
+</template>
+
+<script>
+import { homeIcon, heartIcon, searchIcon, userIcon } from "@progress/kendo-svg-icons";
+import { BottomNavigation } from "@progress/kendo-vue-layout";
+
+export default {
+  name: "App",
+  components: { BottomNavigation },
+  data() {
+    return {
+      items: [
+        { svgIcon: homeIcon, text: "Home" },
+        { svgIcon: searchIcon, text: "Search" },
+        { svgIcon: heartIcon, text: "Favorites" },
+        { svgIcon: userIcon, text: "Profile" },
+      ],
+      selected: 0,
+    };
+  },
+  computed: {
+    computedItems() {
+      return this.items.map((item, index) => ({
+        ...item,
+        selected: index === this.selected,
+      }));
+    },
+  },
+  methods: {
+    onSelect(e) {
+      this.selected = e.itemIndex;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/bottomnavigation/position-mode/main.js b/vue-options-api-demos/layout/bottomnavigation/position-mode/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/position-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/bottomnavigation/position-mode/main.vue b/vue-options-api-demos/layout/bottomnavigation/position-mode/main.vue
new file mode 100644
index 00000000..d6dfd80a
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/position-mode/main.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="border-demo">
+    <div class="page">
+      <div class="example-config">
+        <legend>Position mode settings</legend>
+        <RadioGroup
+          :data-items="contentTypes"
+          v-model="positionMode"
+          :layout="'horizontal'"
+        />
+        <span>* Scoll the page to see the position mode differences</span>
+      </div>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus optio
+        vitae dolorem sunt! Obcaecati reprehenderit vero itaque ex. Magnam ex
+        error rem, est quasi libero veniam ipsa enim quod. Porro. Lorem, ipsum
+        dolor sit amet consectetur adipisicing elit. Fuga blanditiis est, harum
+        quibusdam praesentium voluptatibus et similique dolorum aliquid ab saepe
+        enim numquam mollitia laborum alias doloremque impedit voluptates
+        reprehenderit.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus optio
+        vitae dolorem sunt! Obcaecati reprehenderit vero itaque ex. Magnam ex
+        error rem, est quasi libero veniam ipsa enim quod. Porro. Lorem, ipsum
+        dolor sit amet consectetur adipisicing elit. Fuga blanditiis est, harum
+        quibusdam praesentium voluptatibus et similique dolorum aliquid ab saepe
+        enim numquam mollitia laborum alias doloremque impedit voluptates
+        reprehenderit.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus optio
+        vitae dolorem sunt! Obcaecati reprehenderit vero itaque ex. Magnam ex
+        error rem, est quasi libero veniam ipsa enim quod. Porro. Lorem, ipsum
+        dolor sit amet consectetur adipisicing elit. Fuga blanditiis est, harum
+        quibusdam praesentium voluptatibus et similique dolorum aliquid ab saepe
+        enim numquam mollitia laborum alias doloremque impedit voluptates
+        reprehenderit.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus optio
+        vitae dolorem sunt! Obcaecati reprehenderit vero itaque ex. Magnam ex
+        error rem, est quasi libero veniam ipsa enim quod. Porro. Lorem, ipsum
+        dolor sit amet consectetur adipisicing elit. Fuga blanditiis est, harum
+        quibusdam praesentium voluptatibus et similique dolorum aliquid ab saepe
+        enim numquam mollitia laborum alias doloremque impedit voluptates
+        reprehenderit.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus optio
+        vitae dolorem sunt! Obcaecati reprehenderit vero itaque ex. Magnam ex
+        error rem, est quasi libero veniam ipsa enim quod. Porro. Lorem, ipsum
+        dolor sit amet consectetur adipisicing elit. Fuga blanditiis est, harum
+        quibusdam praesentium voluptatibus et similique dolorum aliquid ab saepe
+        enim numquam mollitia laborum alias doloremque impedit voluptates
+        reprehenderit.
+      </p>
+      <BottomNavigation
+        :positionMode="positionMode"
+        :items="computedItems"
+        @select="onSelect"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import { BottomNavigation } from "@progress/kendo-vue-layout";
+import { RadioGroup } from "@progress/kendo-vue-inputs";
+import { calendarIcon, envelopIcon, userIcon } from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    BottomNavigation,
+    RadioGroup,
+  },
+  computed: {
+    computedItems() {
+      return this.items.map((item, index) => ({
+        ...item,
+        selected: index === this.selected,
+      }));
+    },
+  },
+  data() {
+    return {
+      contentTypes: [
+        {
+          label: "Fixed",
+          value: "fixed",
+        },
+        {
+          label: "Sticky",
+          value: "sticky",
+        },
+      ],
+      positionMode: "fixed",
+      selected: 0,
+      items: [
+        {
+          text: "Inbox",
+          id: 1,
+          svgIcon: envelopIcon,
+          selected: true,
+        },
+        {
+          text: "Calendar",
+          id: 2,
+          svgIcon: calendarIcon,
+        },
+        {
+          text: "Profile",
+          id: 3,
+          svgIcon: userIcon,
+        },
+      ],
+    };
+  },
+  methods: {
+    onSelect(ev) {
+      this.selected = ev.itemIndex;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/bottomnavigation/routing/Bills.vue b/vue-options-api-demos/layout/bottomnavigation/routing/Bills.vue
new file mode 100644
index 00000000..7914866d
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/routing/Bills.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <h3 class="title k-color-primary">{{ text }}</h3>
+    <Avatar :type="'icon'" :size="'large'">
+      <SvgIcon :icon="fileTxtIcon" :size="'large'"/>
+    </Avatar>
+  </div>
+</template>
+<script>
+import { Avatar } from "@progress/kendo-vue-layout";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { fileTxtIcon } from "@progress/kendo-svg-icons";
+export default {
+    components: {
+        Avatar,
+        SvgIcon
+    },
+    data() {
+        return {
+            text: "Bills",
+            fileTxtIcon
+        };
+    },
+};
+</script>
diff --git a/vue-options-api-demos/layout/bottomnavigation/routing/Home.vue b/vue-options-api-demos/layout/bottomnavigation/routing/Home.vue
new file mode 100644
index 00000000..df8d019f
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/routing/Home.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <h3 class="title k-color-primary">{{ text }}</h3>
+    <Avatar :type="'icon'" :size="'large'">
+      <SvgIcon :icon="homeIcon" :size="'large'"/>
+    </Avatar>
+  </div>
+</template>
+<script>
+import { Avatar } from "@progress/kendo-vue-layout";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { homeIcon } from "@progress/kendo-svg-icons";
+export default {
+    components: {
+        Avatar,
+        SvgIcon
+    },
+    data() {
+        return {
+            text: "Home",
+            homeIcon
+        };
+    },
+};
+</script>
diff --git a/vue-options-api-demos/layout/bottomnavigation/routing/More.vue b/vue-options-api-demos/layout/bottomnavigation/routing/More.vue
new file mode 100644
index 00000000..ebab3126
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/routing/More.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <h3 class="title k-color-primary">{{ text }}</h3>
+    <Avatar :type="'icon'" :size="'large'">
+      <SvgIcon :icon="moreHorizontalIcon" :size="'large'"/>
+    </Avatar>
+  </div>
+</template>
+<script>
+import { Avatar } from "@progress/kendo-vue-layout";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { moreHorizontalIcon } from "@progress/kendo-svg-icons";
+export default {
+    components: {
+        Avatar,
+        SvgIcon
+    },
+    data() {
+        return {
+            text: "More",
+            moreHorizontalIcon
+        };
+    },
+};
+</script>
diff --git a/vue-options-api-demos/layout/bottomnavigation/routing/Payments.vue b/vue-options-api-demos/layout/bottomnavigation/routing/Payments.vue
new file mode 100644
index 00000000..694b7c58
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/routing/Payments.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <h3 class="title k-color-primary">{{ text }}</h3>
+    <Avatar :type="'icon'" :size="'large'">
+      <SvgIcon :icon="dollarIcon" :size="'large'"/>
+    </Avatar>
+  </div>
+</template>
+<script>
+import { Avatar } from "@progress/kendo-vue-layout";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { dollarIcon } from "@progress/kendo-svg-icons";
+export default {
+    components: {
+        Avatar,
+        SvgIcon
+    },
+    data() {
+        return {
+            text: "Payments",
+            dollarIcon
+        };
+    },
+};
+</script>
diff --git a/vue-options-api-demos/layout/bottomnavigation/routing/Services.vue b/vue-options-api-demos/layout/bottomnavigation/routing/Services.vue
new file mode 100644
index 00000000..a8d10122
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/routing/Services.vue
@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <h3 class="title k-color-primary">{{ text }}</h3>
+    <Avatar :type="'icon'" :size="'large'">
+      <SvgIcon :icon="gearIcon" :size="'large'"/>
+    </Avatar>
+  </div>
+</template>
+<script>
+import { Avatar } from "@progress/kendo-vue-layout";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { gearIcon } from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    Avatar,
+    SvgIcon
+  },
+  data() {
+    return {
+      text: "Services",
+      gearIcon
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/bottomnavigation/routing/index.js b/vue-options-api-demos/layout/bottomnavigation/routing/index.js
new file mode 100644
index 00000000..a00b033e
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/routing/index.js
@@ -0,0 +1,41 @@
+import { createWebHistory, createRouter } from "vue-router";
+import Home from "./Home";
+import Bills from "./Bills";
+import Payments from "./Payments";
+import Services from "./Services";
+import More from "./More";
+
+const routes = [
+    {
+        path: "/layout/bottomnavigation/routing/home",
+        name: "Home",
+        component: Home
+    },
+    {
+        path: "/layout/bottomnavigation/routing/bills",
+        name: "Bills",
+        component: Bills
+    },
+    {
+        path: "/layout/bottomnavigation/routing/payments",
+        name: "Payments",
+        component: Payments
+    },
+    {
+        path: "/layout/bottomnavigation/routing/services",
+        name: "Services",
+        component: Services
+    },
+    {
+        path: "/layout/bottomnavigation/routing/more",
+        name: "More",
+        component: More
+    }
+];
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+});
+
+export default router;
diff --git a/vue-options-api-demos/layout/bottomnavigation/routing/main.js b/vue-options-api-demos/layout/bottomnavigation/routing/main.js
new file mode 100644
index 00000000..b51f2405
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/routing/main.js
@@ -0,0 +1,5 @@
+import { createApp } from "vue";
+import App from "./main.vue";
+import router from "./index.js";
+
+createApp(App).use(router).mount("#app");
diff --git a/vue-options-api-demos/layout/bottomnavigation/routing/main.vue b/vue-options-api-demos/layout/bottomnavigation/routing/main.vue
new file mode 100644
index 00000000..67b466f7
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/routing/main.vue
@@ -0,0 +1,115 @@
+<template>
+  <div :class="'example-wrapper'">
+    <div :class="'page'">
+      <div :class="'content'">
+        <router-view />
+      </div>
+      <BottomNavigation :position-mode="'sticky'" :items="computedItems" @select="onSelect" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { dollarIcon, fileTxtIcon, gearIcon, homeIcon, moreHorizontalIcon } from "@progress/kendo-svg-icons";
+import { BottomNavigation } from "@progress/kendo-vue-layout";
+
+export default {
+  name: "App",
+  components: { BottomNavigation },
+  mounted() {
+    this.$router.push(this.items[0].data);
+  },
+  data() {
+    return {
+      items: [
+        {
+          text: "Home",
+          id: 1,
+          svgIcon: homeIcon,
+          data: {
+            path: "/layout/bottomnavigation/routing/home",
+          },
+          selected: true,
+        },
+        {
+          text: "Bills",
+          id: 2,
+          svgIcon: fileTxtIcon,
+          data: {
+            path: "/layout/bottomnavigation/routing/bills",
+          },
+        },
+        {
+          text: "Payments",
+          id: 3,
+          svgIcon: dollarIcon,
+          data: {
+            path: "/layout/bottomnavigation/routing/payments",
+          },
+        },
+        {
+          text: "Services",
+          id: 3,
+          svgIcon: gearIcon,
+          data: {
+            path: "/layout/bottomnavigation/routing/services",
+          },
+        },
+        {
+          text: "More",
+          id: 3,
+          svgIcon: moreHorizontalIcon,
+          data: {
+            path: "/layout/bottomnavigation/routing/more",
+          },
+        },
+      ],
+      selected: 0,
+    };
+  },
+  computed: {
+    computedItems() {
+      return this.items.map((item, index) => ({
+        ...item,
+        selected: index === this.selected,
+      }));
+    },
+  },
+  methods: {
+    onSelect(e) {
+      this.selected = e.itemIndex;
+      this.$router.push(e.itemTarget.data.path);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.example-wrapper {
+  width: 750px;
+  margin: 0 auto;
+  box-shadow: 0px 10px 20px #00000029;
+  border-radius: 30px;
+}
+
+.page {
+  padding: 10px 10px 0 10px;
+}
+
+.content {
+  background: #F9F9F9;
+  border-radius: 30px 30px 0 0;
+  height: 350px;
+  text-align: center;
+}
+
+.k-bottom-nav {
+  border-radius: 0 0 20px 20px;
+}
+
+.title {
+  text-align: center;
+  font-size: 30px;
+  padding: 40px 0;
+}
+</style>
diff --git a/vue-options-api-demos/layout/bottomnavigation/theme-color/BottomNavigationStyleConfigurator.vue b/vue-options-api-demos/layout/bottomnavigation/theme-color/BottomNavigationStyleConfigurator.vue
new file mode 100644
index 00000000..b6da4570
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/theme-color/BottomNavigationStyleConfigurator.vue
@@ -0,0 +1,73 @@
+<template>
+    <div>
+      <div :style="{ display: 'flex', justifyContent: 'center' }">
+        <span
+          class="k-color-primary"
+          :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+          >Configurator</span
+        >
+      </div>
+      <div
+        class="example-config"
+        :style="{
+          display: 'flex',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+        }"
+      >
+        <span class="k-form-field">
+          <KLabel>
+            Theme
+            <div class="k-form-field-wrap">
+              <DropDownList
+                :data-items="themeColors"
+                :value="theme"
+                :style="{
+                  'min-width': '120px',
+                }"
+                @change="handleThemeChange"
+              />
+            </div>
+          </KLabel>
+        </span>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import { Label } from '@progress/kendo-vue-labels';
+  import { DropDownList } from '@progress/kendo-vue-dropdowns';
+  
+  export default {
+    components: {
+      KLabel: Label,
+      DropDownList,
+    },
+    props: {
+      theme: String,
+    },
+    emits: ['themechange'],
+    data() {
+      return {
+        themeColors: [
+          'primary',
+          'secondary',
+          'tertiary',
+          'info',
+          'success',
+          'warning',
+          'error',
+          'dark',
+          'light',
+          'inverse',
+        ],
+      };
+    },
+    methods: {
+      handleThemeChange(event) {
+        this.$emit('themechange', event);
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/bottomnavigation/theme-color/main.js b/vue-options-api-demos/layout/bottomnavigation/theme-color/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/theme-color/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/bottomnavigation/theme-color/main.vue b/vue-options-api-demos/layout/bottomnavigation/theme-color/main.vue
new file mode 100644
index 00000000..1bba4bb2
--- /dev/null
+++ b/vue-options-api-demos/layout/bottomnavigation/theme-color/main.vue
@@ -0,0 +1,126 @@
+<template>
+  <div class="border-demo">
+      <BottomNavigationStyleConfigurator
+        :theme="theme"
+        @themechange="setTheme"
+      />
+      <div class="content">
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus optio
+          vitae dolorem sunt! Obcaecati reprehenderit vero itaque ex. Magnam ex
+          error rem, est quasi libero veniam ipsa enim quod. Porro. Lorem, ipsum
+          dolor sit amet consectetur adipisicing elit. Fuga blanditiis est,
+          harum quibusdam praesentium voluptatibus et similique dolorum aliquid
+          ab saepe enim numquam mollitia laborum alias doloremque impedit
+          voluptates reprehenderit.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus optio
+          vitae dolorem sunt! Obcaecati reprehenderit vero itaque ex. Magnam ex
+          error rem, est quasi libero veniam ipsa enim quod. Porro. Lorem, ipsum
+          dolor sit amet consectetur adipisicing elit. Fuga blanditiis est,
+          harum quibusdam praesentium voluptatibus et similique dolorum aliquid
+          ab saepe enim numquam mollitia laborum alias doloremque impedit
+          voluptates reprehenderit.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus optio
+          vitae dolorem sunt! Obcaecati reprehenderit vero itaque ex. Magnam ex
+          error rem, est quasi libero veniam ipsa enim quod. Porro. Lorem, ipsum
+          dolor sit amet consectetur adipisicing elit. Fuga blanditiis est,
+          harum quibusdam praesentium voluptatibus et similique dolorum aliquid
+          ab saepe enim numquam mollitia laborum alias doloremque impedit
+          voluptates reprehenderit.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus optio
+          vitae dolorem sunt! Obcaecati reprehenderit vero itaque ex. Magnam ex
+          error rem, est quasi libero veniam ipsa enim quod. Porro. Lorem, ipsum
+          dolor sit amet consectetur adipisicing elit. Fuga blanditiis est,
+          harum quibusdam praesentium voluptatibus et similique dolorum aliquid
+          ab saepe enim numquam mollitia laborum alias doloremque impedit
+          voluptates reprehenderit.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus optio
+          vitae dolorem sunt! Obcaecati reprehenderit vero itaque ex. Magnam ex
+          error rem, est quasi libero veniam ipsa enim quod. Porro. Lorem, ipsum
+          dolor sit amet consectetur adipisicing elit. Fuga blanditiis est,
+          harum quibusdam praesentium voluptatibus et similique dolorum aliquid
+          ab saepe enim numquam mollitia laborum alias doloremque impedit
+          voluptates reprehenderit.
+        </p>
+      </div>
+      <BottomNavigation
+        :items="computedItems"
+        @select="onSelect"
+        :theme-color="theme"
+      />
+  </div>
+</template>
+<script>
+import { BottomNavigation } from '@progress/kendo-vue-layout';
+import BottomNavigationStyleConfigurator from './BottomNavigationStyleConfigurator.vue';
+import { arrowsSwapIcon, chartLineMarkersIcon, chartPieIcon, gearIcon, moreHorizontalIcon } from '@progress/kendo-svg-icons';
+
+export default {
+    components: {
+        BottomNavigation,
+        BottomNavigationStyleConfigurator,
+    },
+    computed: {
+        computedItems() {
+            return this.items.map((item, index) => ({
+                ...item,
+                selected: index === this.selected,
+            }));
+        },
+    },
+    data() {
+        return {
+            theme: 'success',
+            selected: 0,
+            items: [
+                {
+                    svgIcon: chartLineMarkersIcon,
+                    text: 'Revenue',
+                    selected: true,
+                },
+                {
+                    svgIcon: arrowsSwapIcon,
+                    text: 'Transactions',
+                },
+                {
+                    svgIcon: chartPieIcon,
+                    text: 'Overview',
+                },
+                {
+                    svgIcon: gearIcon,
+                    text: 'Settings',
+                },
+                {
+                    svgIcon: moreHorizontalIcon,
+                    text: 'More',
+                },
+            ],
+        };
+    },
+    methods: {
+        onSelect(ev) {
+            this.selected = ev.itemIndex;
+        },
+        setTheme(ev) {
+            this.theme = ev.value;
+        },
+    },
+};
+</script>
+
+<style>
+#app {
+  padding: 0 !important;
+}
+.content {
+  padding: 20px;
+}
+</style>
diff --git a/vue-options-api-demos/layout/card/actions/main.js b/vue-options-api-demos/layout/card/actions/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/card/actions/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/card/actions/main.vue b/vue-options-api-demos/layout/card/actions/main.vue
new file mode 100644
index 00000000..321dc95a
--- /dev/null
+++ b/vue-options-api-demos/layout/card/actions/main.vue
@@ -0,0 +1,109 @@
+<template>
+    <div style="display: flex; justify-content: space-evenly">
+      <div style="width: 45%" class="k-card-list">
+        <div>Actions Orientation</div>
+        <hr />
+        <card style="width: 200px">
+          <cardBody>
+            <p>
+              Some quick example text to build on the card title and make up the
+              bulk of the card content.
+            </p>
+          </cardBody>
+          <cardActions>
+            <kbutton :fill-mode="'flat'" :theme-color="'primary'">Action 1</kbutton>
+           <kbutton :fill-mode="'flat'" :theme-color="'primary'">Action 2</kbutton>
+          </cardActions>
+        </card>
+        <card style="width: 200px">
+          <cardBody>
+            <p>
+              Some quick example text to build on the card title and make up the
+              bulk of the card content.
+            </p>
+          </cardBody>
+          <cardActions :orientation="'vertical'">
+            <kbutton :fill-mode="'flat'" :theme-color="'primary'">Action 1</kbutton>
+           <kbutton :fill-mode="'flat'" :theme-color="'primary'">Action 2</kbutton>
+          </cardActions>
+        </card>
+      </div>
+      <div style="width: 45%" class="k-card-list">
+        <div>Actions Layout</div>
+        <hr />
+        <card style="width: 300px">
+          <cardBody>
+            <p>
+              Some quick example text to build on the card title and make up the
+              bulk of the card content.
+            </p>
+          </cardBody>
+          <cardActions>
+            <kbutton :fill-mode="'flat'" :theme-color="'primary'">Action 1</kbutton>
+           <kbutton :fill-mode="'flat'" :theme-color="'primary'">Action 2</kbutton>
+          </cardActions>
+        </card>
+        <card style="width: 300px">
+          <cardBody>
+            <p>
+              Some quick example text to build on the card title and make up the
+              bulk of the card content.
+            </p>
+          </cardBody>
+          <cardActions :layout="'center'">
+            <kbutton :fill-mode="'flat'" :theme-color="'primary'">Action 1</kbutton>
+           <kbutton :fill-mode="'flat'" :theme-color="'primary'">Action 2</kbutton>
+          </cardActions>
+        </card>
+        <card style="width: 300px">
+          <cardBody>
+            <p>
+              Some quick example text to build on the card title and make up the
+              bulk of the card content.
+            </p>
+          </cardBody>
+          <cardActions :layout="'end'">
+            <kbutton :fill-mode="'flat'" :theme-color="'primary'">Action 1</kbutton>
+           <kbutton :fill-mode="'flat'" :theme-color="'primary'">Action 2</kbutton>
+          </cardActions>
+        </card>
+        <card style="width: 300px">
+          <cardBody>
+            <p>
+              Some quick example text to build on the card title and make up the
+              bulk of the card content.
+            </p>
+          </cardBody>
+          <cardActions :layout="'stretched'">
+            <kbutton :fill-mode="'flat'" :theme-color="'primary'">Action 1</kbutton>
+           <kbutton :fill-mode="'flat'" :theme-color="'primary'">Action 2</kbutton>
+          </cardActions>
+        </card>
+      </div>
+    </div>
+</template>
+<script>
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  CardTitle,
+  CardImage,
+  CardActions,
+} from "@progress/kendo-vue-layout";
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'card': Card,
+        'cardHeader': CardHeader,
+        'cardBody': CardBody, 
+        'cardTitle': CardTitle,
+        'cardImage': CardImage, 
+        'cardActions': CardActions,
+      'kbutton': Button
+    }
+};
+
+</script>
+
diff --git a/vue-options-api-demos/layout/card/layouts/main.js b/vue-options-api-demos/layout/card/layouts/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/card/layouts/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/card/layouts/main.vue b/vue-options-api-demos/layout/card/layouts/main.vue
new file mode 100644
index 00000000..edeca18b
--- /dev/null
+++ b/vue-options-api-demos/layout/card/layouts/main.vue
@@ -0,0 +1,79 @@
+<template>
+  <div>
+      <div class="example-config">
+          <h6>Change taps position: </h6>
+           <dropdownlist
+          :style="{ width: '230px' }" 
+              :data-items='data'
+              :default-value="'k-card-deck'"
+              @change="handleChange"
+          >
+          </dropdownlist>
+      </div>
+      <hr />
+      <div :class="currentLayout">
+          <card style="width: 200px">
+              <cardBody>
+              <cardTitle>Card Title</cardTitle>
+              <cardTitle>Card Subtitle</cardTitle>
+              <p>
+                  Some quick example text to build on the card title and make up the
+                  bulk of the card content.
+              </p>
+              </cardBody>
+              <cardActions>
+              <kbutton :fill-mode="'flat'" :theme-color="'primary'">Action 1</kbutton>
+              <kbutton :fill-mode="'flat'" :theme-color="'primary'">Action 2</kbutton>
+              </cardActions>
+          </card>
+          <card style="width: 200px">
+              <cardBody>
+              <cardTitle>Card Title</cardTitle>
+              <cardTitle>Card Subtitle</cardTitle>
+              <p>
+                  Some quick example text to build on the card title and make up the
+                  bulk of the card content.
+              </p>
+              </cardBody>
+              <cardActions>
+              <kbutton :fill-mode="'flat'" :theme-color="'primary'">Action 1</kbutton>
+              <kbutton :fill-mode="'flat'" :theme-color="'primary'">Action 2</kbutton>
+              </cardActions>
+          </card>
+      </div>
+  </div>
+</template>
+<script>
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  CardActions,
+} from "@progress/kendo-vue-layout";
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'card': Card,
+        'cardBody': CardBody, 
+        'cardTitle': CardTitle,
+        'cardActions': CardActions,
+        'dropdownlist': DropDownList,
+      'kbutton': Button
+    },
+    data: function(){
+        return {
+            currentLayout: 'k-card-deck',
+            data: ["k-card-list", "k-card-group", "k-card-deck"]
+        }
+    },
+    methods:{
+        handleChange: function(e){
+            this.currentLayout = e.value;
+        }
+    }
+};
+
+</script>
+
diff --git a/vue-options-api-demos/layout/card/orientation/main.js b/vue-options-api-demos/layout/card/orientation/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/card/orientation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/card/orientation/main.vue b/vue-options-api-demos/layout/card/orientation/main.vue
new file mode 100644
index 00000000..4d3de377
--- /dev/null
+++ b/vue-options-api-demos/layout/card/orientation/main.vue
@@ -0,0 +1,108 @@
+<template>
+  <div style="display: flex; justify-content: space-evenly">
+    <div style="width: 45%">
+      <div>Horizontal Card</div>
+      <hr />
+      <card :orientation="'horizontal'">
+        <cardImage
+          :src="'https://store-images.s-microsoft.com/image/apps.29972.14474337564596307.6c783b22-9460-4205-938c-2969961ed85c.aa21aff2-b2b2-411b-88bb-158187c6e238?mode=scale&q=90&h=1080&w=1920'"
+        />
+        <div class="k-vbox">
+          <cardHeader>
+            <cardTitle>Coffee with friends</cardTitle>
+            <cardSubtitle>
+              <span class="reviews">
+                <SvgIcon :icon="starIcon" style="color: #ffce2a" />
+                <SvgIcon :icon="starIcon" style="color: #ffce2a" />
+                <SvgIcon :icon="starIcon" style="color: #ffce2a" />
+                <SvgIcon :icon="starIcon" style="color: #ffce2a" />
+                <SvgIcon :icon="starOutlineIcon" />
+                <div>4/5 (681)</div>
+              </span>
+            </cardSubtitle>
+          </cardHeader>
+          <cardBody>
+            <p>
+              The right place to be if you're in love with high quality espresso
+              or tea. We offer wide range to top coffee brands as Davidoff Cafe,
+              Lavazza, Tchibo, Illy.
+            </p>
+          </cardBody>
+          <cardActions>
+            <kbutton :fill-mode="'flat'" :theme-color="'primary'"
+              >Review</kbutton
+            >
+          </cardActions>
+        </div>
+      </card>
+    </div>
+    <div style="width: 45%">
+      <div>Vertical Card</div>
+      <hr />
+      <card :orientation="'vertical'">
+        <cardImage
+          :src="'https://store-images.s-microsoft.com/image/apps.29972.14474337564596307.6c783b22-9460-4205-938c-2969961ed85c.aa21aff2-b2b2-411b-88bb-158187c6e238?mode=scale&q=90&h=1080&w=1920'"
+        />
+        <div>
+          <cardHeader>
+            <cardTitle>Coffee with friends</cardTitle>
+            <cardSubtitle>
+              <span class="reviews">
+                <SvgIcon :icon="starIcon" style="color: #ffce2a" />
+                <SvgIcon :icon="starIcon" style="color: #ffce2a" />
+                <SvgIcon :icon="starIcon" style="color: #ffce2a" />
+                <SvgIcon :icon="starIcon" style="color: #ffce2a" />
+                <SvgIcon :icon="starOutlineIcon" />
+                <div>4/5 (681)</div>
+              </span>
+            </cardSubtitle>
+          </cardHeader>
+          <cardBody>
+            <p>
+              The right place to be if you're in love with high quality espresso
+              or tea. We offer wide range to top coffee brands as Davidoff Cafe,
+              Lavazza, Tchibo, Illy.
+            </p>
+          </cardBody>
+          <cardActions>
+            <kbutton :fill-mode="'flat'" :theme-color="'primary'"
+              >Review</kbutton
+            >
+          </cardActions>
+        </div>
+      </card>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  CardTitle,
+  CardImage,
+  CardActions,
+} from "@progress/kendo-vue-layout";
+import { Button } from "@progress/kendo-vue-buttons";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { starIcon, starOutlineIcon } from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    card: Card,
+    cardHeader: CardHeader,
+    cardBody: CardBody,
+    cardTitle: CardTitle,
+    cardImage: CardImage,
+    cardActions: CardActions,
+    kbutton: Button,
+    SvgIcon,
+  },
+  data() {
+    return {
+      starIcon,
+      starOutlineIcon,
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/card/overview/main.js b/vue-options-api-demos/layout/card/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/card/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/card/overview/main.vue b/vue-options-api-demos/layout/card/overview/main.vue
new file mode 100644
index 00000000..2376c50d
--- /dev/null
+++ b/vue-options-api-demos/layout/card/overview/main.vue
@@ -0,0 +1,236 @@
+<template>
+    <div style="display: flex; justify-content: space-evenly; flex-wrap: wrap">
+      <div v-for="(card, index) in cards" :key="index">
+        <card
+          style="
+            width: 260px;
+            box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
+            margin-top: 15px;
+          "
+        >
+          <cardHeader class="k-hbox" style="background: transparent">
+            <avatar type="image" size="medium" shape="circle">
+              <img
+                style="width: 45px; height: 45px"
+                :src="card.thumbnailSrc"
+                :alt="'Card Thumbnail'"
+              />
+            </avatar>
+            <div>
+              <cardTitle style="margin-bottom: 4px">
+                {{ card.headerTitle }}
+              </cardTitle>
+              <cardSubtitle>
+                <p>{{ card.headerSubtitle }}</p>
+              </cardSubtitle>
+            </div>
+          </cardHeader>
+          <cardImage
+            :src="card.scrollViewItems.url"
+            style="height: 185px; max-width: 100%"
+          />
+          <cardActions style="display: flex; justify-content: space-between">
+            <div>
+              <kbutton
+                :fill-mode="'flat'"
+                :svg-icon="card.postLiked ? heartIcon : heartOutlineIcon"
+                @click="() => postLikesCount(card)"
+              >
+              </kbutton>
+              <kbutton
+                :fill-mode="'flat'"
+                :svg-icon="commentIcon"
+                @click="() => commentClick(card)"
+              >
+              </kbutton>
+              <kbutton :fill-mode="'flat'" :svg-icon="shareIcon"> </kbutton>
+            </div>
+            <span style="font-size: 13px; align-self: center; color: #656565">
+              {{ card.postLikes }} likes
+            </span>
+          </cardActions>
+          <cardBody v-if="card.commentsExpanded">
+            <div>
+              <div style="margin-bottom: 8px; padding: 0 16px">
+                <div v-for="(comment, index) in card.comments" :key="index">
+                  <div style="display: flex; justify-content: space-between">
+                    <div
+                      style="padding: 4px 0; align-items: center; display: flex"
+                    >
+                      <avatar
+                        :type="'text'"
+                        :rounded="'full'"
+                        style="color: white"
+                        :size="'small'"
+                      >
+                        <span>SS</span>
+                      </avatar>
+                      <div style="display: flex; flex-direction: column">
+                        <span
+                          style="
+                            font-size: 13px;
+                            font-weight: bold;
+                            max-width: 100px;
+                            word-break: break-all;
+                          "
+                        >
+                          {{ comment.text }}
+                        </span>
+                        <span class="time">
+                          1s ago
+                          <span style="margin-left: 8px">
+                            {{ comment.likes }} like
+                          </span>
+                        </span>
+                      </div>
+                    </div>
+                    <kbutton :fill-mode="'flat'">
+                      <span
+                        :class="
+                          comment && comment.likes > 0
+                            ? 'k-icon k-i-heart'
+                            : 'k-icon k-i-heart-outline'
+                        "
+                      />
+                    </kbutton>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="k-hbox" style="padding: 16px 16px 0">
+              <textarea
+                class="k-textarea"
+                placeholder="Comment..."
+                style="
+                  resize: none;
+                  border-radius: 10px;
+                  padding: 5px;
+                  font-size: 10px;
+                "
+              />
+              <kbutton
+                :fill-mode="'flat'"
+                :theme-color="'primary'"
+                style="margin-left: 10px; border-radius: 10px"
+                @click="() => postComment(card)"
+              >
+                Post
+              </kbutton>
+            </div>
+          </cardBody>
+        </card>
+      </div>
+    </div>
+  </template>
+
+  <script>
+  import {
+    Card,
+    CardHeader,
+    CardBody,
+    CardTitle,
+    CardSubtitle,
+    CardImage,
+    CardActions,
+    Avatar,
+  } from "@progress/kendo-vue-layout";
+  import { Button } from "@progress/kendo-vue-buttons";
+  import {
+    commentIcon,
+    heartIcon,
+    heartOutlineIcon,
+    shareIcon
+  } from "@progress/kendo-svg-icons";
+
+  const rilaImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/card/rila.jpg';
+  const rilaLakesImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/card/rila_lakes.jpg';
+  const bgFlagImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/card/bg_flag.jpg';
+  const roseFestivalImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/card/rose_festival.jpg';
+
+  const cardsData = [
+    {
+      thumbnailSrc: bgFlagImage,
+      headerTitle: "bg_traditions",
+      headerSubtitle: "Bulgaria, Europe",
+      commentsExpanded: false,
+      postLiked: false,
+      comments: [],
+      newCommentTextValue: "",
+      postLikes: 174,
+      scrollViewItems: {
+        url: roseFestivalImage,
+      },
+    },
+    {
+      thumbnailSrc: rilaImage,
+      headerTitle: "bg_mountains",
+      headerSubtitle: "Bulgaria, Europe",
+      commentsExpanded: false,
+      postLiked: false,
+      comments: [],
+      newCommentTextValue: "",
+      postLikes: 962,
+      scrollViewItems: {
+        url: rilaLakesImage,
+      },
+    },
+  ];
+
+  export default {
+    components: {
+      card: Card,
+      cardHeader: CardHeader,
+      cardBody: CardBody,
+      cardTitle: CardTitle,
+      cardSubtitle: CardSubtitle,
+      cardImage: CardImage,
+      cardActions: CardActions,
+      avatar: Avatar,
+      kbutton: Button,
+    },
+    data: function () {
+      return {
+        rilaImage,
+        rilaLakesImage,
+        bgFlagImage,
+        roseFestivalImage,
+        commentIcon,
+        heartIcon,
+        heartOutlineIcon,
+        shareIcon,
+        cards: cardsData,
+      };
+    },
+    methods: {
+      postLikesCount: function (card) {
+        let index = this.cards.findIndex(
+          (item) => item.thumbnailSrc === card.thumbnailSrc
+        );
+        let newCards = [...this.cards];
+        newCards[index].postLiked = !newCards[index].postLiked;
+        this.cards = newCards;
+      },
+      commentClick: function (card) {
+        let index = this.cards.findIndex(
+          (item) => item.thumbnailSrc === card.thumbnailSrc
+        );
+        let newCards = [...this.cards];
+        newCards[index].commentsExpanded = !newCards[index].commentsExpanded;
+        this.cards = newCards;
+      },
+      postComment: function (card) {
+        let index = this.cards.findIndex(
+          (item) => item.thumbnailSrc === card.thumbnailSrc
+        );
+        let newCards = [...this.cards];
+        let textArea = document.querySelector(".k-textarea");
+        newCards[index].comments.push({
+          likes: 0,
+          text: textArea.value,
+        });
+        textArea.value = "";
+        this.cards = newCards;
+      },
+    },
+  };
+  </script>
diff --git a/vue-options-api-demos/layout/card/types/main.js b/vue-options-api-demos/layout/card/types/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/card/types/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/card/types/main.vue b/vue-options-api-demos/layout/card/types/main.vue
new file mode 100644
index 00000000..acf9b164
--- /dev/null
+++ b/vue-options-api-demos/layout/card/types/main.vue
@@ -0,0 +1,119 @@
+<template>
+    <div style="display: flex; justify-content: space-evenly">
+      <div class="k-card-list">
+        <card style="width: 200px">
+          <cardBody>
+            <cardTitle>Card Title</cardTitle>
+            <cardTitle>Card Subtitle</cardTitle>
+            <p>
+              Some quick example text to build on the card title and make up the
+              bulk of the card content.
+            </p>
+          </cardBody>
+          <cardActions>
+            <kbutton :fill-mode="'flat'" :theme-color="'primary'">Action 1</kbutton>
+           <kbutton :fill-mode="'flat'" :theme-color="'primary'">Action 2</kbutton>
+          </cardActions>
+        </card>
+        <card style="width: 200px" :type="'primary'">
+          <cardBody>
+            <cardTitle>Card Title</cardTitle>
+            <cardTitle>Card Subtitle</cardTitle>
+            <p>
+              Some quick example text to build on the card title and make up the
+              bulk of the card content.
+            </p>
+          </cardBody>
+          <cardActions>
+            <kbutton :fill-mode="'flat'" :theme-color="'primary'">Action 1</kbutton>
+           <kbutton :fill-mode="'flat'" :theme-color="'primary'">Action 2</kbutton>
+          </cardActions>
+        </card>
+      </div>
+      <div class="k-card-list">
+        <card style="width: 200px" :type="'info'">
+          <cardBody>
+            <cardTitle>Card Title</cardTitle>
+            <cardTitle>Card Subtitle</cardTitle>
+            <p>
+              Some quick example text to build on the card title and make up the
+              bulk of the card content.
+            </p>
+          </cardBody>
+          <cardActions>
+            <kbutton :fill-mode="'flat'" :theme-color="'primary'">Action 1</kbutton>
+           <kbutton :fill-mode="'flat'" :theme-color="'primary'">Action 2</kbutton>
+          </cardActions>
+        </card>
+        <card style="width: 200px" :type="'success'">
+          <cardBody>
+            <cardTitle>Card Title</cardTitle>
+            <cardTitle>Card Subtitle</cardTitle>
+            <p>
+              Some quick example text to build on the card title and make up the
+              bulk of the card content.
+            </p>
+          </cardBody>
+          <cardActions>
+            <kbutton :fill-mode="'flat'" :theme-color="'primary'">Action 1</kbutton>
+           <kbutton :fill-mode="'flat'" :theme-color="'primary'">Action 2</kbutton>
+          </cardActions>
+        </card>
+      </div>
+    <div class="k-card-list">
+        <card style="width: 200px" :type="'warning'">
+          <cardBody>
+            <cardTitle>Card Title</cardTitle>
+            <cardTitle>Card Subtitle</cardTitle>
+            <p>
+              Some quick example text to build on the card title and make up the
+              bulk of the card content.
+            </p>
+          </cardBody>
+          <cardActions>
+            <kbutton :fill-mode="'flat'" :theme-color="'primary'">Action 1</kbutton>
+           <kbutton :fill-mode="'flat'" :theme-color="'primary'">Action 2</kbutton>
+          </cardActions>
+        </card>
+        <card style="width: 200px" :type="'error'">
+          <cardBody>
+            <cardTitle>Card Title</cardTitle>
+            <cardTitle>Card Subtitle</cardTitle>
+            <p>
+              Some quick example text to build on the card title and make up the
+              bulk of the card content.
+            </p>
+          </cardBody>
+          <cardActions>
+            <kbutton :fill-mode="'flat'" :theme-color="'primary'">Action 1</kbutton>
+           <kbutton :fill-mode="'flat'" :theme-color="'primary'">Action 2</kbutton>
+          </cardActions>
+        </card>
+      </div>
+    </div>
+</template>
+<script>
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  CardTitle,
+  CardImage,
+  CardActions,
+} from "@progress/kendo-vue-layout";
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        'card': Card,
+        'cardHeader': CardHeader,
+        'cardBody': CardBody, 
+        'cardTitle': CardTitle,
+        'cardImage': CardImage, 
+        'cardActions': CardActions,
+      'kbutton': Button
+    }
+};
+
+</script>
+
diff --git a/vue-options-api-demos/layout/context-menu/data-binding/local/main.js b/vue-options-api-demos/layout/context-menu/data-binding/local/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/data-binding/local/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/context-menu/data-binding/local/main.vue b/vue-options-api-demos/layout/context-menu/data-binding/local/main.vue
new file mode 100644
index 00000000..67758ebb
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/data-binding/local/main.vue
@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <div :style="rectangularStyle" @contextmenu="handleContextMenu">
+      <p>Right click here to open Context menu</p>
+    </div>
+    <Popup :show="show" :offset="currentOffset">
+      <Menu
+        :items="items"
+        :vertical="true"
+        :style="{ display: 'inline-block' }"
+      />
+    </Popup>
+  </div>
+</template>
+
+<script>
+import { Menu } from '@progress/kendo-vue-layout';
+import { Popup } from '@progress/kendo-vue-popup';
+
+export default {
+  components: {
+    Menu,
+    Popup,
+  },
+  mounted: function () {
+    document.addEventListener(
+      'click',
+      function () {
+        this.show = false;
+      }.bind(this)
+    );
+  },
+  computed: {
+    currentOffset() {
+      return this.offSet;
+    },
+  },
+  data: function () {
+    return {
+      offSet: {
+        left: 0,
+        top: 0,
+      },
+      show: false,
+      items: [
+        {
+          text: 'First item',
+        },
+        {
+          text: 'Second item',
+          items: [
+            {
+              text: 'Second item child item',
+            },
+          ],
+        },
+      ],
+      rectangularStyle: {
+        width: '300px',
+        height: '200px',
+        backgroundColor: '#f6f6f6',
+        borderRadius: '5px',
+        justifyContent: 'center',
+        display: 'flex',
+        position: 'absolute',
+        alignItems: 'center',
+        boxShadow:
+          '0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08)',
+      },
+    };
+  },
+  methods: {
+    handleContextMenu(e) {
+      e.preventDefault();
+      this.offSet = {
+        left: e.clientX,
+        top: e.clientY,
+      };
+      this.show = true;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/context-menu/data-binding/remote/main.js b/vue-options-api-demos/layout/context-menu/data-binding/remote/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/data-binding/remote/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/context-menu/data-binding/remote/main.vue b/vue-options-api-demos/layout/context-menu/data-binding/remote/main.vue
new file mode 100644
index 00000000..9ae402ea
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/data-binding/remote/main.vue
@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <div :style="rectangularStyle" @contextmenu="handleContextMenu">
+      <p>Right click here to open Context menu</p>
+    </div>
+    <Popup :show="show" :offset="currentOffset">
+      <Menu
+        :items="items"
+        :vertical="true"
+        :style="{ display: 'inline-block' }"
+      />
+    </Popup>
+  </div>
+</template>
+
+<script>
+import { Menu } from '@progress/kendo-vue-layout';
+import { Popup } from '@progress/kendo-vue-popup';
+
+export default {
+  components: {
+    Menu,
+    Popup,
+  },
+  mounted: function () {
+    document.addEventListener(
+      'click',
+      function () {
+        this.show = false;
+      }.bind(this)
+    );
+
+    fetch(this.url)
+      .then((response) => response.json())
+      .then((json) => {
+        this.items = this.mapItems(json.value);
+      });
+  },
+  computed: {
+    currentOffset() {
+      return this.offSet;
+    },
+  },
+  data: function () {
+    return {
+      offSet: {
+        left: 0,
+        top: 0,
+      },
+      show: false,
+      url: 'https://odatasampleservices.azurewebsites.net/V4/Northwind/Northwind.svc/Categories?$expand=Products',
+      items: [],
+      rectangularStyle: {
+        width: '300px',
+        height: '200px',
+        backgroundColor: '#f6f6f6',
+        borderRadius: '5px',
+        justifyContent: 'center',
+        display: 'flex',
+        position: 'absolute',
+        alignItems: 'center',
+        boxShadow:
+          '0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08)',
+      },
+    };
+  },
+  methods: {
+    handleContextMenu(e) {
+      e.preventDefault();
+      this.offSet = {
+        left: e.clientX,
+        top: e.clientY,
+      };
+      this.show = true;
+    },
+    mapItems: function (items) {
+      return items.map((item) => {
+        const result = {
+          text: item.CategoryName,
+        };
+
+        if (item.Products) {
+          result.items = item.Products.map((childItem) => {
+            return {
+              text: childItem.ProductName,
+            };
+          });
+        }
+
+        return result;
+      });
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/context-menu/events/Logger.vue b/vue-options-api-demos/layout/context-menu/events/Logger.vue
new file mode 100644
index 00000000..aec622fe
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/events/Logger.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="example-config">
+    <h5>{{ title }}</h5>
+    <ul class="event-log">
+      <li v-for="(event, idx) in events" :key="idx">{{ event }}</li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    events: Array,
+    title: String,
+  },
+};
+</script>
+
+<style>
+.example-config {
+  margin: 0 0 20px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+  margin: 0;
+  padding: 0;
+  max-height: 100px;
+  overflow-y: auto;
+  list-style-type: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: white;
+}
+.event-log li {
+  margin: 0;
+  padding: 0.3em;
+  line-height: 1.2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+  margin-bottom: -1px;
+}
+</style>
diff --git a/vue-options-api-demos/layout/context-menu/events/main.js b/vue-options-api-demos/layout/context-menu/events/main.js
new file mode 100644
index 00000000..1f1c6c86
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/events/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
+
diff --git a/vue-options-api-demos/layout/context-menu/events/main.vue b/vue-options-api-demos/layout/context-menu/events/main.vue
new file mode 100644
index 00000000..3785b96d
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/events/main.vue
@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <div :style="rectangularStyle" @contextmenu="handleContextMenu">
+      <p>Right click here to open Context menu</p>
+    </div>
+    <Popup :show="show" :offset="currentOffset">
+      <Menu
+        :items="items"
+        :vertical="true"
+        @select="onMenuSelect"
+        :style="{ display: 'inline-block' }"
+      />
+    </Popup>
+    <Logger
+      :title="'Events list'"
+      :events="eventsList"
+      :style="{ 'margin-top': '20px' }"
+    />
+  </div>
+</template>
+
+<script>
+import { Menu } from '@progress/kendo-vue-layout';
+import { Popup } from '@progress/kendo-vue-popup';
+import Logger from './Logger.vue';
+
+export default {
+  components: {
+    Menu,
+    Popup,
+    Logger,
+  },
+  mounted: function () {
+    document.addEventListener(
+      'click',
+      function () {
+        this.show = false;
+      }.bind(this)
+    );
+  },
+  computed: {
+    currentOffset() {
+      return this.offSet;
+    },
+    eventsList() {
+      return this.events;
+    },
+  },
+  data: function () {
+    return {
+      offSet: {
+        left: 0,
+        top: 0,
+      },
+      show: false,
+      rectangularStyle: {
+        width: '300px',
+        height: '200px',
+        backgroundColor: '#f6f6f6',
+        borderRadius: '5px',
+        justifyContent: 'center',
+        display: 'flex',
+        alignItems: 'center',
+        boxShadow:
+          '0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08)',
+      },
+      events: [],
+      items: [
+        {
+          text: 'First item',
+        },
+        {
+          text: 'Second item',
+          items: [
+            {
+              text: 'Second item child item',
+            },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    onMenuSelect(e) {
+      this.events.unshift("Menu Item '" + e.item.text + "' was selected");
+    },
+    handleContextMenu(e) {
+      e.preventDefault();
+      this.offSet = {
+        left: e.clientX,
+        top: e.clientY,
+      };
+      this.show = true;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/context-menu/items/properties/disabled/main.js b/vue-options-api-demos/layout/context-menu/items/properties/disabled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/items/properties/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/context-menu/items/properties/disabled/main.vue b/vue-options-api-demos/layout/context-menu/items/properties/disabled/main.vue
new file mode 100644
index 00000000..952be9a9
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/items/properties/disabled/main.vue
@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <div :style="rectangularStyle" @contextmenu="handleContextMenu">
+      <p>Right click here to open Context menu</p>
+    </div>
+    <Popup :show="show" :offset="currentOffset">
+      <Menu
+        :items="items"
+        :vertical="true"
+        :style="{ display: 'inline-block' }"
+      />
+    </Popup>
+  </div>
+</template>
+
+<script>
+import { Menu } from '@progress/kendo-vue-layout';
+import { Popup } from '@progress/kendo-vue-popup';
+
+export default {
+  components: {
+    Menu,
+    Popup,
+  },
+  mounted: function () {
+    document.addEventListener(
+      'click',
+      function () {
+        this.show = false;
+      }.bind(this)
+    );
+  },
+  computed: {
+    currentOffset() {
+      return this.offSet;
+    },
+  },
+  data: function () {
+    return {
+      offSet: {
+        left: 0,
+        top: 0,
+      },
+      show: false,
+      items: [
+        {
+          text: 'Item1',
+          disabled: true,
+          items: [
+            {
+              text: 'Item1.1',
+            },
+          ],
+        },
+        {
+          text: 'Item2',
+          disabled: true,
+        },
+      ],
+      rectangularStyle: {
+        width: '300px',
+        height: '200px',
+        backgroundColor: '#f6f6f6',
+        borderRadius: '5px',
+        justifyContent: 'center',
+        display: 'flex',
+        position: 'absolute',
+        alignItems: 'center',
+        boxShadow:
+          '0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08)',
+      },
+    };
+  },
+  methods: {
+    handleContextMenu(e) {
+      e.preventDefault();
+      this.offSet = {
+        left: e.clientX,
+        top: e.clientY,
+      };
+      this.show = true;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/context-menu/items/properties/icon/main.js b/vue-options-api-demos/layout/context-menu/items/properties/icon/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/items/properties/icon/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/context-menu/items/properties/icon/main.vue b/vue-options-api-demos/layout/context-menu/items/properties/icon/main.vue
new file mode 100644
index 00000000..265714aa
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/items/properties/icon/main.vue
@@ -0,0 +1,142 @@
+<template>
+  <div>
+    <div :style="rectangularStyle" @contextmenu="handleContextMenu">
+      <p>Right click here to open Context menu</p>
+    </div>
+    <Popup :show="show" :offset="currentOffset">
+      <Menu
+        :items="items"
+        :vertical="true"
+        :style="{ display: 'inline-block' }"
+      />
+    </Popup>
+  </div>
+</template>
+
+<script>
+import { Menu } from "@progress/kendo-vue-layout";
+import { Popup } from "@progress/kendo-vue-popup";
+import {
+  folderIcon,
+  fileIcon,
+  fileImageIcon,
+  filePdfIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    Menu,
+    Popup,
+  },
+  mounted: function () {
+    document.addEventListener(
+      "click",
+      function () {
+        this.show = false;
+      }.bind(this)
+    );
+  },
+  computed: {
+    currentOffset() {
+      return this.offSet;
+    },
+  },
+  data: function () {
+    return {
+      offSet: {
+        left: 0,
+        top: 0,
+      },
+      show: false,
+      items: [
+        {
+          text: "My Web Site",
+          svgIcon: folderIcon,
+          items: [
+            {
+              text: "images",
+              svgIcon: folderIcon,
+              items: [
+                {
+                  text: "logo.png",
+                  svgIcon: fileImageIcon,
+                },
+                {
+                  text: "body-back.png",
+                  svgIcon: fileImageIcon,
+                },
+                {
+                  text: "my-photo.png",
+                  svgIcon: fileImageIcon,
+                },
+              ],
+            },
+            {
+              text: "resources",
+              svgIcon: folderIcon,
+              items: [
+                {
+                  text: "pdf",
+                  svgIcon: folderIcon,
+                  items: [
+                    {
+                      text: "prices.pdf",
+                      svgIcon: filePdfIcon,
+                    },
+                    {
+                      text: "brochure.pdf",
+                      svgIcon: filePdfIcon,
+                    },
+                  ],
+                },
+                {
+                  text: "zip",
+                  svgIcon: folderIcon,
+                },
+              ],
+            },
+            {
+              text: "about.html",
+              svgIcon: fileIcon,
+            },
+            {
+              text: "contacts.html",
+              svgIcon: fileIcon,
+            },
+            {
+              text: "index.html",
+              svgIcon: fileIcon,
+            },
+            {
+              text: "portfolio.html",
+              svgIcon: fileIcon,
+            },
+          ],
+        },
+      ],
+      rectangularStyle: {
+        width: "300px",
+        height: "200px",
+        backgroundColor: "#f6f6f6",
+        borderRadius: "5px",
+        justifyContent: "center",
+        display: "flex",
+        position: "absolute",
+        alignItems: "center",
+        boxShadow:
+          "0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08)",
+      },
+    };
+  },
+  methods: {
+    handleContextMenu(e) {
+      e.preventDefault();
+      this.offSet = {
+        left: e.clientX,
+        top: e.clientY,
+      };
+      this.show = true;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/context-menu/items/properties/styles/main.js b/vue-options-api-demos/layout/context-menu/items/properties/styles/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/items/properties/styles/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/context-menu/items/properties/styles/main.vue b/vue-options-api-demos/layout/context-menu/items/properties/styles/main.vue
new file mode 100644
index 00000000..2ab59f80
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/items/properties/styles/main.vue
@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <div :style="rectangularStyle" @contextmenu="handleContextMenu">
+      <p>Right click here to open Context menu</p>
+    </div>
+    <Popup :show="show" :offset="currentOffset">
+      <Menu
+        :items="items"
+        :vertical="true"
+        :style="{ display: 'inline-block' }"
+      />
+    </Popup>
+  </div>
+</template>
+
+<script>
+import { Menu } from '@progress/kendo-vue-layout';
+import { Popup } from '@progress/kendo-vue-popup';
+
+export default {
+  components: {
+    Menu,
+    Popup,
+  },
+  mounted: function () {
+    document.addEventListener(
+      'click',
+      function () {
+        this.show = false;
+      }.bind(this)
+    );
+  },
+  computed: {
+    currentOffset() {
+      return this.offSet;
+    },
+  },
+  data: function () {
+    return {
+      offSet: {
+        left: 0,
+        top: 0,
+      },
+      show: false,
+      items: [
+        {
+          text: 'Item1',
+          cssClass: 'active',
+        },
+        {
+          text: 'Item2',
+          cssStyle: {
+            backgroundColor: '#d3d3d3',
+          },
+        },
+      ],
+      rectangularStyle: {
+        width: '300px',
+        height: '200px',
+        backgroundColor: '#f6f6f6',
+        borderRadius: '5px',
+        justifyContent: 'center',
+        display: 'flex',
+        position: 'absolute',
+        alignItems: 'center',
+        boxShadow:
+          '0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08)',
+      },
+    };
+  },
+  methods: {
+    handleContextMenu(e) {
+      e.preventDefault();
+      this.offSet = {
+        left: e.clientX,
+        top: e.clientY,
+      };
+      this.show = true;
+    },
+  },
+};
+</script>
+<style>
+.active {
+  box-shadow: inset 0 0 3px 1px #ff6358;
+}
+</style>
diff --git a/vue-options-api-demos/layout/context-menu/items/properties/text/main.js b/vue-options-api-demos/layout/context-menu/items/properties/text/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/items/properties/text/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/context-menu/items/properties/text/main.vue b/vue-options-api-demos/layout/context-menu/items/properties/text/main.vue
new file mode 100644
index 00000000..7cba5676
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/items/properties/text/main.vue
@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <div :style="rectangularStyle" @contextmenu="handleContextMenu">
+      <p>Right click here to open Context menu</p>
+    </div>
+    <Popup :show="show" :offset="currentOffset">
+      <Menu
+        :items="items"
+        :vertical="true"
+        :style="{ display: 'inline-block' }"
+      />
+    </Popup>
+  </div>
+</template>
+
+<script>
+import { Menu } from '@progress/kendo-vue-layout';
+import { Popup } from '@progress/kendo-vue-popup';
+
+export default {
+  components: {
+    Menu,
+    Popup,
+  },
+  mounted: function () {
+    document.addEventListener(
+      'click',
+      function () {
+        this.show = false;
+      }.bind(this)
+    );
+  },
+  computed: {
+    currentOffset() {
+      return this.offSet;
+    },
+  },
+  data: function () {
+    return {
+      offSet: {
+        left: 0,
+        top: 0,
+      },
+      show: false,
+      items: [
+        {
+          text: 'First item',
+          items: [{ text: 'Child item 1.1' }, { text: 'Child item 1.2' }],
+        },
+        {
+          text: 'Second item',
+        },
+      ],
+      rectangularStyle: {
+        width: '300px',
+        height: '200px',
+        backgroundColor: '#f6f6f6',
+        borderRadius: '5px',
+        justifyContent: 'center',
+        display: 'flex',
+        position: 'absolute',
+        alignItems: 'center',
+        boxShadow:
+          '0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08)',
+      },
+    };
+  },
+  methods: {
+    handleContextMenu(e) {
+      e.preventDefault();
+      this.offSet = {
+        left: e.clientX,
+        top: e.clientY,
+      };
+      this.show = true;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/context-menu/items/properties/url/main.js b/vue-options-api-demos/layout/context-menu/items/properties/url/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/items/properties/url/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/context-menu/items/properties/url/main.vue b/vue-options-api-demos/layout/context-menu/items/properties/url/main.vue
new file mode 100644
index 00000000..d950ccb4
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/items/properties/url/main.vue
@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <div :style="rectangularStyle" @contextmenu="handleContextMenu">
+      <p>Right click here to open Context menu</p>
+    </div>
+    <Popup :show="show" :offset="currentOffset">
+      <Menu
+        :items="items"
+        :vertical="true"
+        :style="{ display: 'inline-block' }"
+      />
+    </Popup>
+  </div>
+</template>
+
+<script>
+import { Menu } from '@progress/kendo-vue-layout';
+import { Popup } from '@progress/kendo-vue-popup';
+
+export default {
+  components: {
+    Menu,
+    Popup,
+  },
+  mounted: function () {
+    document.addEventListener(
+      'click',
+      function () {
+        this.show = false;
+      }.bind(this)
+    );
+  },
+  computed: {
+    currentOffset() {
+      return this.offSet;
+    },
+  },
+  data: function () {
+    return {
+      offSet: {
+        left: 0,
+        top: 0,
+      },
+      show: false,
+      items: [
+        {
+          text: 'First item',
+          url: 'https://www.example.com/?item=1.1',
+          items: [{ text: 'Child item 1.1' }, { text: 'Child item 1.2' }],
+        },
+        {
+          text: 'Second item',
+          url: 'https://www.example.com/?item=2',
+        },
+      ],
+      rectangularStyle: {
+        width: '300px',
+        height: '200px',
+        backgroundColor: '#f6f6f6',
+        borderRadius: '5px',
+        justifyContent: 'center',
+        display: 'flex',
+        position: 'absolute',
+        alignItems: 'center',
+        boxShadow:
+          '0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08)',
+      },
+    };
+  },
+  methods: {
+    handleContextMenu(e) {
+      e.preventDefault();
+      this.offSet = {
+        left: e.clientX,
+        top: e.clientY,
+      };
+      this.show = true;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/context-menu/items/rendering/content-render/main.js b/vue-options-api-demos/layout/context-menu/items/rendering/content-render/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/items/rendering/content-render/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/context-menu/items/rendering/content-render/main.vue b/vue-options-api-demos/layout/context-menu/items/rendering/content-render/main.vue
new file mode 100644
index 00000000..419ef73a
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/items/rendering/content-render/main.vue
@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <div :style="rectangularStyle" @contextmenu="handleContextMenu">
+      <p>Right click here to open Context menu</p>
+    </div>
+    <Popup :show="show" :offset="currentOffset">
+      <Menu :items="items" :vertical="true">
+        <template v-slot:contentRender="{ props }">
+          <div :style="{ padding: '10px' }">
+            Custom content for itemId: {{ props.itemId }}, text:
+            {{ props.item.text }}
+          </div>
+        </template>
+      </Menu>
+    </Popup>
+  </div>
+</template>
+
+<script>
+import { Menu } from '@progress/kendo-vue-layout';
+import { Popup } from '@progress/kendo-vue-popup';
+import {
+  heartIcon
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    Menu,
+    Popup,
+  },
+  mounted: function () {
+    document.addEventListener(
+      'click',
+      function () {
+        this.show = false;
+      }.bind(this)
+    );
+  },
+  computed: {
+    currentOffset() {
+      return this.offSet;
+    },
+  },
+  data: function () {
+    return {
+      offSet: {
+        left: 0,
+        top: 0,
+      },
+      show: false,
+      itemRender: 'itemRender',
+      items: [
+        {
+          text: 'Item1',
+          contentRender: 'contentRender',
+        },
+        {
+          text: 'Item2',
+          svgIcon: heartIcon,
+          items: [{ text: 'Item2.1' }, { text: 'Item2.2' }],
+        },
+      ],
+      rectangularStyle: {
+        width: '300px',
+        height: '200px',
+        backgroundColor: '#f6f6f6',
+        borderRadius: '5px',
+        justifyContent: 'center',
+        display: 'flex',
+        position: 'absolute',
+        alignItems: 'center',
+        boxShadow:
+          '0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08)',
+      },
+    };
+  },
+  methods: {
+    handleContextMenu(e) {
+      e.preventDefault();
+      this.offSet = {
+        left: e.clientX,
+        top: e.clientY,
+      };
+      this.show = true;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/context-menu/items/rendering/item-render/main.js b/vue-options-api-demos/layout/context-menu/items/rendering/item-render/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/items/rendering/item-render/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/context-menu/items/rendering/item-render/main.vue b/vue-options-api-demos/layout/context-menu/items/rendering/item-render/main.vue
new file mode 100644
index 00000000..e9b63fdf
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/items/rendering/item-render/main.vue
@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <div :style="rectangularStyle" @contextmenu="handleContextMenu">
+      <p>Right click here to open Context menu</p>
+    </div>
+    <Popup :show="show" :offset="currentOffset">
+      <Menu
+        :items="items"
+        :vertical="true"
+        :style="{ display: 'inline-block' }"
+      >
+        <template v-slot:itemRender="{ props }">
+          <div>itemId: {{ props.itemId }}, Custom text</div>
+        </template>
+      </Menu>
+    </Popup>
+  </div>
+</template>
+
+<script>
+import { Menu } from '@progress/kendo-vue-layout';
+import { Popup } from '@progress/kendo-vue-popup';
+import {
+  heartIcon
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    Menu,
+    Popup,
+  },
+  mounted: function () {
+    document.addEventListener(
+      'click',
+      function () {
+        this.show = false;
+      }.bind(this)
+    );
+  },
+  computed: {
+    currentOffset() {
+      return this.offSet;
+    },
+  },
+  data: function () {
+    return {
+      offSet: {
+        left: 0,
+        top: 0,
+      },
+      show: false,
+      items: [
+        {
+          text: 'Item1',
+          render: 'itemRender',
+        },
+        {
+          text: 'Item2',
+          svgIcon: heartIcon,
+          items: [{ text: 'Item2.1' }, { text: 'Item2.2' }],
+        },
+      ],
+      rectangularStyle: {
+        width: '300px',
+        height: '200px',
+        backgroundColor: '#f6f6f6',
+        borderRadius: '5px',
+        justifyContent: 'center',
+        display: 'flex',
+        position: 'absolute',
+        alignItems: 'center',
+        boxShadow:
+          '0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08)',
+      },
+    };
+  },
+  methods: {
+    handleContextMenu(e) {
+      e.preventDefault();
+      this.offSet = {
+        left: e.clientX,
+        top: e.clientY,
+      };
+      this.show = true;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/context-menu/items/rendering/link-render/main.js b/vue-options-api-demos/layout/context-menu/items/rendering/link-render/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/items/rendering/link-render/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/context-menu/items/rendering/link-render/main.vue b/vue-options-api-demos/layout/context-menu/items/rendering/link-render/main.vue
new file mode 100644
index 00000000..fb6228e3
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/items/rendering/link-render/main.vue
@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <div :style="rectangularStyle" @contextmenu="handleContextMenu">
+      <p>Right click here to open Context menu</p>
+    </div>
+    <Popup :show="show" :offset="currentOffset">
+      <Menu :items="items" :vertical="true">
+        <template v-slot:linkRender="{ props }">
+          <MenuItemLink :url="props.item.url" :opened="props.opened">
+            <span
+              v-if="props.item.icon"
+              :class="`k-icon k-i-${props.item.icon}`"
+              role="presentation"
+              key="0"
+            />
+            {{ props.item.text }}
+            <MenuItemArrow
+              v-if="props.item.items && props.item.items.length > 0"
+              :itemId="props.itemId"
+              :vertical-menu="true"
+              :dir="props.dir"
+              key="1"
+            />
+          </MenuItemLink>
+        </template>
+      </Menu>
+    </Popup>
+  </div>
+</template>
+
+<script>
+import { Menu, MenuItemArrow, MenuItemLink } from '@progress/kendo-vue-layout';
+import { Popup } from '@progress/kendo-vue-popup';
+import {
+  heartIcon
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    Menu,
+    MenuItemArrow,
+    MenuItemLink,
+    Popup,
+  },
+  mounted: function () {
+    document.addEventListener(
+      'click',
+      function () {
+        this.show = false;
+      }.bind(this)
+    );
+  },
+  computed: {
+    currentOffset() {
+      return this.offSet;
+    },
+  },
+  data: function () {
+    return {
+      offSet: {
+        left: 0,
+        top: 0,
+      },
+      show: false,
+      itemRender: 'itemRender',
+      items: [
+        { text: 'Item1' },
+        {
+          text: 'Item2',
+          linkRender: 'linkRender',
+          svgIcon: heartIcon,
+          items: [{ text: 'Item2.1' }, { text: 'Item2.2' }],
+        },
+      ],
+      rectangularStyle: {
+        width: '300px',
+        height: '200px',
+        backgroundColor: '#f6f6f6',
+        borderRadius: '5px',
+        justifyContent: 'center',
+        display: 'flex',
+        position: 'absolute',
+        alignItems: 'center',
+        boxShadow:
+          '0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08)',
+      },
+    };
+  },
+  methods: {
+    handleContextMenu(e) {
+      e.preventDefault();
+      this.offSet = {
+        left: e.clientX,
+        top: e.clientY,
+      };
+      this.show = true;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/context-menu/items/rendering/menu-item-render/main.js b/vue-options-api-demos/layout/context-menu/items/rendering/menu-item-render/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/items/rendering/menu-item-render/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/context-menu/items/rendering/menu-item-render/main.vue b/vue-options-api-demos/layout/context-menu/items/rendering/menu-item-render/main.vue
new file mode 100644
index 00000000..650ed85c
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/items/rendering/menu-item-render/main.vue
@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <div :style="rectangularStyle" @contextmenu="handleContextMenu">
+      <p>Right click here to open Context menu</p>
+    </div>
+    <Popup :show="show" :offset="currentOffset">
+      <Menu :items="items" :item-render="itemRender" :vertical="true">
+        <template v-slot:itemRender="{ props }">
+          <div>itemId: {{ props.itemId }}, Custom text</div>
+        </template>
+      </Menu>
+    </Popup>
+  </div>
+</template>
+
+<script>
+import { Menu } from "@progress/kendo-vue-layout";
+import { Popup } from "@progress/kendo-vue-popup";
+import {
+  filterSmallIcon,
+  sortAscSmallIcon,
+  sortDescSmallIcon,
+} from "@progress/kendo-svg-icons";
+export default {
+  components: {
+    Menu,
+    Popup,
+  },
+  mounted: function () {
+    document.addEventListener(
+      "click",
+      function () {
+        this.show = false;
+      }.bind(this)
+    );
+  },
+  computed: {
+    currentOffset() {
+      return this.offSet;
+    },
+  },
+  data: function () {
+    return {
+      offSet: {
+        left: 0,
+        top: 0,
+      },
+      show: false,
+      itemRender: "itemRender",
+      items: [
+        {
+          text: "Order ID",
+          items: [
+            { text: "Filter", svgIcon: filterSmallIcon },
+            { text: "Sort Ascending", svgIcon: sortAscSmallIcon },
+            { text: "Sort Descending", svgIcon: sortDescSmallIcon },
+          ],
+        },
+        {
+          text: "Ship Country",
+          items: [
+            { text: "Filter", svgIcon: filterSmallIcon },
+            { text: "Sort Ascending", svgIcon: sortAscSmallIcon },
+            { text: "Sort Descending", svgIcon: sortDescSmallIcon },
+          ],
+        },
+        {
+          text: "Ship Address",
+          items: [
+            { text: "Filter", svgIcon: filterSmallIcon },
+            { text: "Sort Ascending", svgIcon: sortAscSmallIcon },
+            { text: "Sort Descending", svgIcon: sortDescSmallIcon },
+          ],
+        },
+      ],
+      rectangularStyle: {
+        width: "300px",
+        height: "200px",
+        backgroundColor: "#f6f6f6",
+        borderRadius: "5px",
+        justifyContent: "center",
+        display: "flex",
+        position: "absolute",
+        alignItems: "center",
+        boxShadow:
+          "0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08)",
+      },
+    };
+  },
+  methods: {
+    handleContextMenu(e) {
+      e.preventDefault();
+      this.offSet = {
+        left: e.clientX,
+        top: e.clientY,
+      };
+      this.show = true;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/context-menu/items/rendering/menu-link-render/main.js b/vue-options-api-demos/layout/context-menu/items/rendering/menu-link-render/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/items/rendering/menu-link-render/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/context-menu/items/rendering/menu-link-render/main.vue b/vue-options-api-demos/layout/context-menu/items/rendering/menu-link-render/main.vue
new file mode 100644
index 00000000..395c92ba
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/items/rendering/menu-link-render/main.vue
@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <div :style="rectangularStyle" @contextmenu="handleContextMenu">
+      <p>Right click here to open Context menu</p>
+    </div>
+    <Popup :show="show" :offset="currentOffset">
+      <Menu :items="items" :link-render="'linkRender'" :vertical="true">
+        <template v-slot:linkRender="{ props }">
+          <MenuItemLink :url="props.item.url" :opened="props.opened">
+            <span
+              v-if="props.item.icon"
+              :class="`k-icon k-i-${props.item.icon}`"
+              role="presentation"
+              key="0"
+            />
+            {{ props.item.text }}
+            <MenuItemArrow
+              v-if="props.item.items && props.item.items.length > 0"
+              :itemId="props.itemId"
+              :vertical-menu="true"
+              :dir="props.dir"
+              key="1"
+            />
+          </MenuItemLink>
+        </template>
+      </Menu>
+    </Popup>
+  </div>
+</template>
+
+<script>
+import { Menu, MenuItemArrow, MenuItemLink } from '@progress/kendo-vue-layout';
+import { Popup } from '@progress/kendo-vue-popup';
+import {
+  heartIcon
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    Menu,
+    MenuItemArrow,
+    MenuItemLink,
+    Popup,
+  },
+  mounted: function () {
+    document.addEventListener(
+      'click',
+      function () {
+        this.show = false;
+      }.bind(this)
+    );
+  },
+  computed: {
+    currentOffset() {
+      return this.offSet;
+    },
+  },
+  data: function () {
+    return {
+      offSet: {
+        left: 0,
+        top: 0,
+      },
+      show: false,
+      itemRender: 'itemRender',
+      items: [
+        { text: 'Item1' },
+        {
+          text: 'Item2',
+          svgIcon: heartIcon,
+          items: [{ text: 'Item2.1' }, { text: 'Item2.2' }],
+        },
+      ],
+      rectangularStyle: {
+        width: '300px',
+        height: '200px',
+        backgroundColor: '#f6f6f6',
+        borderRadius: '5px',
+        justifyContent: 'center',
+        display: 'flex',
+        position: 'absolute',
+        alignItems: 'center',
+        boxShadow:
+          '0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08)',
+      },
+    };
+  },
+  methods: {
+    handleContextMenu(e) {
+      e.preventDefault();
+      this.offSet = {
+        left: e.clientX,
+        top: e.clientY,
+      };
+      this.show = true;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/context-menu/open-close/main.js b/vue-options-api-demos/layout/context-menu/open-close/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/open-close/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/context-menu/open-close/main.vue b/vue-options-api-demos/layout/context-menu/open-close/main.vue
new file mode 100644
index 00000000..33eef3a8
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/open-close/main.vue
@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <div :style="rectangularStyle" @contextmenu="handleContextMenu">
+      <p>Right click here to open Context menu</p>
+    </div>
+    <Popup :show="show" :offset="currentOffset">
+      <Menu
+        :items="items"
+        :hover-open-delay="0"
+        :hover-close-delay="300"
+        :vertical="true"
+      >
+      </Menu>
+    </Popup>
+  </div>
+</template>
+
+<script>
+import { Menu, MenuItemArrow, MenuItemLink } from '@progress/kendo-vue-layout';
+import { Popup } from '@progress/kendo-vue-popup';
+
+export default {
+  components: {
+    Menu,
+    MenuItemArrow,
+    MenuItemLink,
+    Popup,
+  },
+  mounted: function () {
+    document.addEventListener(
+      'click',
+      function () {
+        this.show = false;
+      }.bind(this)
+    );
+  },
+  computed: {
+    currentOffset() {
+      return this.offSet;
+    },
+  },
+  data: function () {
+    return {
+      offSet: {
+        left: 0,
+        top: 0,
+      },
+      show: false,
+      itemRender: 'itemRender',
+      items: [
+        {
+          text: 'Item1',
+          items: [
+            { text: 'Item1.1' },
+            {
+              text: 'Item1.2',
+              items: [{ text: 'Item1.2.1' }, { text: 'Item1.2.2' }],
+            },
+          ],
+        },
+        {
+          text: 'Item2',
+          items: [
+            { text: 'Item2.1' },
+            { text: 'Item2.2' },
+            { text: 'Item2.3' },
+          ],
+        },
+        {
+          text: 'Item3',
+        },
+      ],
+      rectangularStyle: {
+        width: '300px',
+        height: '200px',
+        backgroundColor: '#f6f6f6',
+        borderRadius: '5px',
+        justifyContent: 'center',
+        display: 'flex',
+        position: 'absolute',
+        alignItems: 'center',
+        boxShadow:
+          '0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08)',
+      },
+    };
+  },
+  methods: {
+    handleContextMenu(e) {
+      e.preventDefault();
+      this.offSet = {
+        left: e.clientX,
+        top: e.clientY,
+      };
+      this.show = true;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/context-menu/overview/main.js b/vue-options-api-demos/layout/context-menu/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/context-menu/overview/main.vue b/vue-options-api-demos/layout/context-menu/overview/main.vue
new file mode 100644
index 00000000..673f72be
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/overview/main.vue
@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <div :style="rectangularStyle" @contextmenu="handleContextMenu">
+      <p>Right click here to open Context menu</p>
+    </div>
+    <Popup :show="show" :offset="currentOffset">
+      <Menu
+        :items="items"
+        :vertical="true"
+        :style="{ display: 'inline-block' }"
+      />
+    </Popup>
+  </div>
+</template>
+
+<script>
+import { Menu } from '@progress/kendo-vue-layout';
+import { Popup } from '@progress/kendo-vue-popup';
+
+export default {
+  components: {
+    Menu,
+    Popup,
+  },
+  mounted: function () {
+    document.addEventListener(
+      'click',
+      function () {
+        this.show = false;
+      }.bind(this)
+    );
+  },
+  computed: {
+    currentOffset() {
+      return this.offSet;
+    },
+  },
+  data: function () {
+    return {
+      offSet: {
+        left: 0,
+        top: 0,
+      },
+      show: false,
+      items: [
+        {
+          text: 'Item1',
+          items: [
+            { text: 'Item1.1' },
+            {
+              text: 'Item1.2',
+              items: [{ text: 'Item1.2.1' }, { text: 'Item1.2.2' }],
+            },
+          ],
+        },
+        {
+          text: 'Item2',
+          items: [
+            { text: 'Item2.1' },
+            { text: 'Item2.2' },
+            { text: 'Item2.3' },
+          ],
+        },
+        {
+          text: 'Item3',
+        },
+      ],
+      rectangularStyle: {
+        width: '300px',
+        height: '200px',
+        backgroundColor: '#f6f6f6',
+        borderRadius: '5px',
+        justifyContent: 'center',
+        display: 'flex',
+        position: 'absolute',
+        alignItems: 'center',
+        boxShadow:
+          '0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08)',
+      },
+    };
+  },
+  methods: {
+    handleContextMenu(e) {
+      e.preventDefault();
+      this.offSet = {
+        left: e.clientX,
+        top: e.clientY,
+      };
+      this.show = true;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/context-menu/vertical/main.js b/vue-options-api-demos/layout/context-menu/vertical/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/vertical/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/context-menu/vertical/main.vue b/vue-options-api-demos/layout/context-menu/vertical/main.vue
new file mode 100644
index 00000000..df067050
--- /dev/null
+++ b/vue-options-api-demos/layout/context-menu/vertical/main.vue
@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <div class="example-config">
+      Select <b>ContextMenu</b> orientation:
+      <RadioGroup :data-items="directions" v-model="orientation"> </RadioGroup>
+    </div>
+    <div :style="rectangularStyle" @contextmenu="handleContextMenu">
+      <p>Right click here to open Context menu</p>
+    </div>
+    <Popup :show="show" :offset="currentOffset">
+      <Menu
+        :items="items"
+        :vertical="orientation"
+        :style="{ display: 'inline-block' }"
+      />
+    </Popup>
+  </div>
+</template>
+
+<script>
+import { Menu } from '@progress/kendo-vue-layout';
+import { RadioGroup } from '@progress/kendo-vue-inputs';
+import { Popup } from '@progress/kendo-vue-popup';
+
+export default {
+  components: {
+    Menu,
+    Popup,
+    RadioGroup,
+  },
+  mounted: function () {
+    document.addEventListener(
+      'click',
+      function () {
+        this.show = false;
+      }.bind(this)
+    );
+  },
+  computed: {
+    currentOffset() {
+      return this.offSet;
+    },
+  },
+  data: function () {
+    return {
+      directions: [
+        {
+          label: 'Horizontal',
+          value: false,
+        },
+        {
+          label: 'Vertical',
+          value: true,
+        },
+      ],
+      orientation: true,
+      offSet: {
+        left: 0,
+        top: 0,
+      },
+      show: false,
+      items: [
+        {
+          text: 'Item1',
+          items: [
+            { text: 'Item1.1' },
+            {
+              text: 'Item1.2',
+              items: [{ text: 'Item1.2.1' }, { text: 'Item1.2.2' }],
+            },
+          ],
+        },
+        {
+          text: 'Item2',
+          items: [
+            { text: 'Item2.1' },
+            { text: 'Item2.2' },
+            { text: 'Item2.3' },
+          ],
+        },
+        {
+          text: 'Item3',
+        },
+      ],
+      rectangularStyle: {
+        width: '300px',
+        height: '200px',
+        backgroundColor: '#f6f6f6',
+        borderRadius: '5px',
+        justifyContent: 'center',
+        display: 'flex',
+        position: 'absolute',
+        alignItems: 'center',
+        boxShadow:
+          '0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08)',
+      },
+    };
+  },
+  methods: {
+    handleContextMenu(e) {
+      e.preventDefault();
+      this.offSet = {
+        left: e.clientX,
+        top: e.clientY,
+      };
+      this.show = true;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/drawer/custom-render/Berlin.vue b/vue-options-api-demos/layout/drawer/custom-render/Berlin.vue
new file mode 100644
index 00000000..5816104e
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/custom-render/Berlin.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <span class="cloudy-custom-drawer">
+      <img :src="cloudyImage" />
+    </span>
+    <span class="weather">
+      <h2>18<span>ºC</span></h2>
+      <p>Cloudy weather in Berlin</p>
+    </span>
+  </div>
+</template>
+<script>
+const cloudyImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/tabstrip/cloudy.png';
+
+export default {
+  data() {
+    return {
+      cloudyImage
+    }
+  }
+};
+</script>
+<style>
+.cloudy-custom-drawer {
+  display: block;
+  margin: 30px auto 10px;
+  width: 128px;
+  height: 128px;
+}
+</style>
diff --git a/vue-options-api-demos/layout/drawer/custom-render/Madrid.vue b/vue-options-api-demos/layout/drawer/custom-render/Madrid.vue
new file mode 100644
index 00000000..fb850c18
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/custom-render/Madrid.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <span class="sunny-custom-drawer">
+      <img :src="sunnyImage" />
+    </span>
+    <span class="weather">
+      <h2>31<span>ºC</span></h2>
+      <p>Sunny weather in Madrid</p>
+    </span>
+  </div>
+</template>
+<script>
+const sunnyImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/tabstrip/sunny.png';
+
+export default {
+  data() {
+    return {
+      sunnyImage
+    }
+  }
+};
+</script>
+
+<style>
+.sunny-custom-drawer {
+  display: block;
+  margin: 30px auto 10px;
+  width: 128px;
+  height: 128px;
+}
+</style>
diff --git a/vue-options-api-demos/layout/drawer/custom-render/Paris.vue b/vue-options-api-demos/layout/drawer/custom-render/Paris.vue
new file mode 100644
index 00000000..e2361df1
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/custom-render/Paris.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <span class="sunny-custom-drawer">
+      <img :src="sunnyImage" />
+    </span>
+        <span class="weather">
+      <h2>21<span>ºC</span></h2>
+      <p>Sunny weather in Paris</p>
+    </span>
+  </div>
+</template>
+<script>
+const sunnyImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/tabstrip/sunny.png';
+export default {
+    data() {
+        return {
+            sunnyImage
+        }
+    }
+};
+</script>
+<style>
+.sunny-custom-drawer {
+  display: block;
+  margin: 30px auto 10px;
+  width: 128px;
+  height: 128px;
+}
+</style>
diff --git a/vue-options-api-demos/layout/drawer/custom-render/Rome.vue b/vue-options-api-demos/layout/drawer/custom-render/Rome.vue
new file mode 100644
index 00000000..2d1dcb11
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/custom-render/Rome.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <span class="sunny-custom-drawer">
+      <img :src="sunnyImage" />
+    </span>
+    <span class="weather">
+      <h2>30<span>ºC</span></h2>
+      <p>Sunny weather in Rome</p>
+    </span>
+  </div>
+</template>
+<script>
+const sunnyImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/tabstrip/sunny.png';
+export default {
+  data() {
+    return {
+      sunnyImage
+    }
+  }
+};
+</script>
+<style>
+.sunny-custom-drawer {
+  display: block;
+  margin: 30px auto 10px;
+  width: 128px;
+  height: 128px;
+}
+</style>
diff --git a/vue-options-api-demos/layout/drawer/custom-render/index.js b/vue-options-api-demos/layout/drawer/custom-render/index.js
new file mode 100644
index 00000000..ba777b16
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/custom-render/index.js
@@ -0,0 +1,35 @@
+import { createWebHistory, createRouter } from "vue-router";
+import Paris from "./Paris";
+import Rome from "./Rome";
+import Berlin from "./Berlin";
+import Madrid from "./Madrid";
+
+const routes = [
+    {
+        path: "/layout/drawer/custom-render",
+        name: "Paris",
+        component: Paris
+    },
+    {
+        path: "/layout/drawer/custom-render/rome",
+        name: "Rome",
+        component: Rome
+    },
+    {
+        path: "/layout/drawer/custom-render/berlin",
+        name: "Berlin",
+        component: Berlin
+    },
+    {
+        path: "/layout/drawer/custom-render/madrid",
+        name: "Madrid",
+        component: Madrid
+    }
+];
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+});
+
+export default router;
diff --git a/vue-options-api-demos/layout/drawer/custom-render/main.js b/vue-options-api-demos/layout/drawer/custom-render/main.js
new file mode 100644
index 00000000..e38732dc
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/custom-render/main.js
@@ -0,0 +1,6 @@
+import { createApp } from "vue";
+import App from "./main.vue";
+import router from "./index.js";
+import "./styles.css";
+
+createApp(App).use(router).mount("#app");
diff --git a/vue-options-api-demos/layout/drawer/custom-render/main.vue b/vue-options-api-demos/layout/drawer/custom-render/main.vue
new file mode 100644
index 00000000..6f63b378
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/custom-render/main.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="border-demo">
+    <div class="custom-toolbar">
+      <kbutton :svg-icon="menuIcon" :fill-mode="'flat'" @click="handleClick" />
+      <span class="title">Weather Forecast in Europe</span>
+    </div>
+    <Drawer
+      :expanded="expanded"
+      :position="position"
+      :mode="mode"
+      :mini="true"
+      :width="175"
+      :items="
+        items.map((item, index) => ({
+          ...item,
+          selected: index === selectedId,
+        }))
+      "
+      :item="'CustomItem'"
+      @select="onSelect"
+    >
+      <template v-slot:CustomItem="{ props }">
+        <DrawerItem
+          v-bind="props"
+          @click="props.onClick"
+          v-if="!props.separator"
+        >
+          <span class="k-svg-icon">
+            <img :src="props.flag" />
+          </span>
+          <div class="item-descr-wrap">
+            <div>{{ props.text }}</div>
+            <span class="item-descr">Capital of {{ props.country }}</span>
+          </div>
+        </DrawerItem>
+        <li
+          v-else
+          class="k-drawer-item k-drawer-separator"
+          role="separator"
+          aria-label="ariaLabelSeparator"
+        />
+      </template>
+      <DrawerContent>
+        <router-view />
+      </DrawerContent>
+    </Drawer>
+  </div>
+</template>
+
+<script>
+import { Drawer, DrawerContent, DrawerItem } from '@progress/kendo-vue-layout';
+import { Button } from '@progress/kendo-vue-buttons';
+import { menuIcon } from '@progress/kendo-svg-icons';
+
+const franceFlag = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/drawer/france-flag.png';
+const spainFlag = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/drawer/spain-flag.png';
+const italyFlag = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/drawer/italy-flag.png';
+const germanyFlag = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/drawer/germany-flag.png';
+
+export default {
+  name: 'App',
+  components: { Drawer, DrawerItem, DrawerContent, kbutton: Button },
+  mounted() {
+    this.$router.push(this.items[0].data);
+  },
+  data() {
+    return {
+      menuIcon,
+      items: [
+        {
+          text: 'Paris',
+          selected: true,
+          flag: franceFlag,
+          country: 'France',
+          data: { path: '/layout/drawer/custom-render/paris' },
+        },
+        {
+          separator: true,
+        },
+        {
+          text: 'Rome',
+          flag: italyFlag,
+          country: 'Italy',
+          data: { path: '/layout/drawer/custom-render/rome' },
+        },
+        {
+          separator: true,
+        },
+        {
+          text: 'Berlin',
+          flag: germanyFlag,
+          country: 'Germany',
+          data: { path: '/layout/drawer/custom-render/berlin' },
+        },
+        {
+          separator: true,
+        },
+        {
+          text: 'Madrid',
+          flag: spainFlag,
+          country: 'Spain',
+          data: { path: '/layout/drawer/custom-render/madrid' },
+        },
+      ],
+      expanded: true,
+      selectedId: 0,
+      position: 'start',
+      mode: 'push',
+    };
+  },
+  methods: {
+    onSelect(e) {
+      this.selectedId = e.itemIndex;
+      this.$router.push(this.items[e.itemIndex].data);
+    },
+    handleClick() {
+      this.expanded = !this.expanded;
+    },
+  },
+};
+</script>
+
+<style scoped>
+@import './styles.css';
+</style>
diff --git a/vue-options-api-demos/layout/drawer/custom-render/styles.css b/vue-options-api-demos/layout/drawer/custom-render/styles.css
new file mode 100644
index 00000000..f824c50d
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/custom-render/styles.css
@@ -0,0 +1,50 @@
+my-app {
+  padding: 0 !important;
+}
+
+.k-drawer-content {
+  padding: 20px;
+}
+
+.k-drawer-container {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+}
+.k-drawer-item {
+  align-items: center;
+  user-select: none;
+}
+.weather {
+  margin: 0 auto 30px;
+  text-align: center;
+}
+.k-drawer-container .k-drawer-items .k-icon {
+  font-size: 20px;
+  margin-right: 16px;
+  height: 20px;
+}
+.custom-toolbar {
+  width: 100%;
+  background-color: #f6f6f6;
+  line-height: 10px;
+  border-bottom: inset;
+  border-bottom-width: 1px;
+  padding: 3px 8px;
+  color: #656565;
+}
+.title {
+  margin-left: 20px;
+  font-weight: bold;
+  font-size: 17px;
+}
+.item-descr {
+  margin-top: -5px;
+}
+.item-descr-wrap > span {
+  font-size: 70%;
+}
+.item-descr-wrap {
+  display: flex;
+  flex-direction: column;
+}
diff --git a/vue-options-api-demos/layout/drawer/display-modes/main.js b/vue-options-api-demos/layout/drawer/display-modes/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/display-modes/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/drawer/display-modes/main.vue b/vue-options-api-demos/layout/drawer/display-modes/main.vue
new file mode 100644
index 00000000..3798754d
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/display-modes/main.vue
@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <Drawer
+      :expanded="expanded"
+      :position="'start'"
+      :mode="expandMode"
+      :animation="{
+        duration: 400,
+      }"
+      :items="
+        items.map((item, index) => ({
+          ...item,
+          selected: index === selectedId,
+        }))
+      "
+      @overlayclick="handleClick"
+      @select="handleSelect"
+    >
+      <DrawerContent>
+        <div class="k-form">
+          <div class="k-form-field">
+            <kbutton @click="handleClick"> Toggle the Drawer state </kbutton>
+          </div>
+          <div class="k-form-field">
+            <label for="expandedSwitch">
+              Switch Drawer expand mode &nbsp;
+            </label>
+            <Checkbox
+              :checked="mode"
+              @change="handleChange"
+              :id="'expandedSwitch'"
+            />
+          </div>
+          <div class="k-form-field">
+            <p>
+              Current drawer mode is <b>{{ expandMode }}</b>
+            </p>
+          </div>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  </div>
+</template>
+
+<script>
+import { Drawer, DrawerContent } from "@progress/kendo-vue-layout";
+import { Checkbox } from "@progress/kendo-vue-inputs";
+import { Button } from "@progress/kendo-vue-buttons";
+import {
+  inboxIcon,
+  bellIcon,
+  calendarIcon,
+  envelopLinkIcon,
+  starOutlineIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    Drawer,
+    DrawerContent,
+    Checkbox,
+    kbutton: Button,
+  },
+  computed: {
+    expandMode() {
+      return this.mode ? "overlay" : "push";
+    },
+  },
+  data() {
+    return {
+      items: [
+        {
+          text: "Inbox",
+          svgIcon: inboxIcon,
+          selected: true,
+        },
+        {
+          separator: true,
+        },
+        {
+          text: "Notifications",
+          svgIcon: bellIcon,
+        },
+        {
+          text: "Calendar",
+          svgIcon: calendarIcon,
+        },
+        {
+          separator: true,
+        },
+        {
+          text: "Attachments",
+          svgIcon: envelopLinkIcon,
+        },
+        {
+          text: "Favourites",
+          svgIcon: starOutlineIcon,
+        },
+      ],
+      expanded: true,
+      selectedId: null,
+      mode: true,
+    };
+  },
+  methods: {
+    handleClick() {
+      this.expanded = !this.expanded;
+    },
+    handleChange() {
+      this.mode = !this.mode;
+    },
+    handleSelect(ev) {
+      this.selectedId = ev.itemIndex;
+      this.expanded = false;
+    },
+  },
+};
+</script>
+<style>
+my-app {
+  padding: 0 !important;
+}
+.k-drawer-content {
+  padding: 20px;
+}
+.k-drawer-container {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+}
+.k-drawer-item {
+  user-select: none;
+}
+</style>
diff --git a/vue-options-api-demos/layout/drawer/events/Logger.vue b/vue-options-api-demos/layout/drawer/events/Logger.vue
new file mode 100644
index 00000000..aec622fe
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/events/Logger.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="example-config">
+    <h5>{{ title }}</h5>
+    <ul class="event-log">
+      <li v-for="(event, idx) in events" :key="idx">{{ event }}</li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    events: Array,
+    title: String,
+  },
+};
+</script>
+
+<style>
+.example-config {
+  margin: 0 0 20px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+  margin: 0;
+  padding: 0;
+  max-height: 100px;
+  overflow-y: auto;
+  list-style-type: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: white;
+}
+.event-log li {
+  margin: 0;
+  padding: 0.3em;
+  line-height: 1.2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+  margin-bottom: -1px;
+}
+</style>
diff --git a/vue-options-api-demos/layout/drawer/events/main.js b/vue-options-api-demos/layout/drawer/events/main.js
new file mode 100644
index 00000000..1f1c6c86
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/events/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
+
diff --git a/vue-options-api-demos/layout/drawer/events/main.vue b/vue-options-api-demos/layout/drawer/events/main.vue
new file mode 100644
index 00000000..7abe4a6b
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/events/main.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="border-demo">
+    <div class="custom-toolbar">
+      <kbutton :svg-icon="menuIcon" :fill-mode="'flat'" @click="handleClick" />
+      <span class="title">Drawer Events Demo</span>
+    </div>
+    <Drawer
+      :expanded="expanded"
+      :position="position"
+      :mode="mode"
+      :items="
+        items.map((item, index) => ({
+          ...item,
+          selected: index === selectedId,
+        }))
+      "
+      @select="handleSelect"
+    >
+      <DrawerContent>
+        <Logger :title="'Events list'" :events="eventsList" />
+      </DrawerContent>
+    </Drawer>
+  </div>
+</template>
+
+<script>
+import { Drawer, DrawerContent } from "@progress/kendo-vue-layout";
+import { Button } from "@progress/kendo-vue-buttons";
+import {
+  menuIcon,
+  inboxIcon,
+  calendarIcon,
+  envelopLinkIcon,
+  starOutlineIcon,
+} from "@progress/kendo-svg-icons";
+import Logger from "./Logger.vue";
+import "./styles.css";
+
+export default {
+  components: {
+    Drawer,
+    DrawerContent,
+    Logger,
+    kbutton: Button,
+  },
+  computed: {
+    eventsList() {
+      return this.events;
+    },
+  },
+  data() {
+    return {
+      menuIcon,
+      events: [],
+      items: [
+        {
+          text: "Inbox",
+          icon: "inbox",
+          svgIcon: inboxIcon,
+          selected: true,
+        },
+        {
+          text: "Calendar",
+          icon: "calendar",
+          svgIcon: calendarIcon,
+        },
+        {
+          text: "Attachments",
+          icon: "hyperlink-email",
+          svgIcon: envelopLinkIcon,
+        },
+        {
+          text: "Favourites",
+          icon: "star-outline",
+          svgIcon: starOutlineIcon,
+        },
+      ],
+      expanded: true,
+      selectedId: 0,
+      position: "start",
+      mode: "push",
+    };
+  },
+  methods: {
+    handleSelect(e) {
+      this.events.unshift(
+        "Drawer Item '" + e.itemTarget.props.text + "' was clicked"
+      );
+      this.selectedId = e.itemIndex;
+    },
+    handleClick() {
+      this.expanded = !this.expanded;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/drawer/events/styles.css b/vue-options-api-demos/layout/drawer/events/styles.css
new file mode 100644
index 00000000..15b7dd98
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/events/styles.css
@@ -0,0 +1,47 @@
+my-app {
+    padding: 0 !important;
+  }
+  
+  .k-drawer-container {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+  }
+  .k-drawer-item {
+    user-select: none;
+  }
+  .k-icon {
+    font-size: 20px;
+  }
+  .custom-toolbar {
+    width: 100%;
+    background-color: #f6f6f6;
+    line-height: 10px;
+    border-bottom: inset;
+    border-bottom-width: 1px;
+    padding: 3px 8px;
+    color: #656565;
+  }
+  .mail-box {
+    margin-left: 20px;
+    font-weight: bold;
+    font-size: 17px;
+  }
+  .page ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .page li {
+    font-size: 1.2em;
+    background: 0 0;
+    border-radius: 0;
+    border-width: 0 0 1px;
+    border-color: rgba(33, 37, 41, 0.125);
+    border-style: solid;
+    line-height: 1.5em;
+    padding: 1.09em 0.84em 1.23em 0.84em;
+  }
+  .page li:last-child {
+    border: 0;
+  }
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/drawer/expanded/main.js b/vue-options-api-demos/layout/drawer/expanded/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/expanded/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/drawer/expanded/main.vue b/vue-options-api-demos/layout/drawer/expanded/main.vue
new file mode 100644
index 00000000..e79dd67d
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/expanded/main.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="border-demo">
+    <Drawer
+      :expanded="expanded"
+      :position="position"
+      :mode="mode"
+      :items="
+        items.map((item, index) => ({
+          ...item,
+          selected: index === selectedId,
+        }))
+      "
+      @select="handleSelect"
+    >
+      <DrawerContent>
+        <kbutton @click="handleClick"> Toggle the drawer state </kbutton>
+      </DrawerContent>
+    </Drawer>
+  </div>
+</template>
+
+<script>
+import { Drawer, DrawerContent } from "@progress/kendo-vue-layout";
+import { Button } from "@progress/kendo-vue-buttons";
+import {
+  inboxIcon,
+  calendarIcon,
+  envelopLinkIcon,
+  starOutlineIcon,
+} from "@progress/kendo-svg-icons";
+import "./styles.css";
+
+export default {
+  name: "App",
+  components: { Drawer, DrawerContent, kbutton: Button },
+  data() {
+    return {
+      items: [
+        {
+          text: "Inbox",
+          svgIcon: inboxIcon,
+          selected: true,
+        },
+        {
+          text: "Calendar",
+          svgIcon: calendarIcon,
+        },
+        {
+          text: "Attachments",
+          svgIcon: envelopLinkIcon,
+        },
+        {
+          text: "Favourites",
+          svgIcon: starOutlineIcon,
+        },
+      ],
+      expanded: true,
+      selectedId: 0,
+      position: "start",
+      mode: "push",
+    };
+  },
+  methods: {
+    handleClick(e) {
+      this.expanded = !this.expanded;
+    },
+    handleSelect(e) {
+      this.selectedId = e.itemIndex;
+    },
+  },
+};
+</script>
+
+<style></style>
diff --git a/vue-options-api-demos/layout/drawer/expanded/styles.css b/vue-options-api-demos/layout/drawer/expanded/styles.css
new file mode 100644
index 00000000..2c51ae54
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/expanded/styles.css
@@ -0,0 +1,13 @@
+my-app { padding: 0 !important; }
+
+.k-drawer-content { 
+    padding: 20px;
+}
+.k-drawer-container {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+}
+.k-drawer-item {
+    user-select: none;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/drawer/getting-started/Attachments.vue b/vue-options-api-demos/layout/drawer/getting-started/Attachments.vue
new file mode 100644
index 00000000..c9e8420e
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/getting-started/Attachments.vue
@@ -0,0 +1,14 @@
+<template>
+  <div id="Attachments" class="page attachments-page">
+    <ul>
+      <li>Build enterprise apps</li>
+      <li>Fw: Regarding Multiline textbox</li>
+      <li>Away next week</li>
+      <li>Fw: Your Costume is ready</li>
+      <li>Update completed</li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/drawer/getting-started/Calendar.vue b/vue-options-api-demos/layout/drawer/getting-started/Calendar.vue
new file mode 100644
index 00000000..eae206eb
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/getting-started/Calendar.vue
@@ -0,0 +1,17 @@
+<template>
+  <div id="Calendar" class="page calendar-page">
+    <ul>
+      <li>
+        <h6>11/5 Monday</h6>
+        <p>Martha Birthday</p>
+      </li>
+      <li>
+        <h6>15/6 Sunday</h6>
+        <p>Job interview for internal position</p>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/drawer/getting-started/Favourites.vue b/vue-options-api-demos/layout/drawer/getting-started/Favourites.vue
new file mode 100644
index 00000000..b602c3ec
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/getting-started/Favourites.vue
@@ -0,0 +1,12 @@
+<template>
+  <div id="Favourites" class="page favourites-page">
+    <ul>
+      <li>70% Discount!</li>
+      <li>90% Discount!</li>
+      <li>One time offer!</li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/drawer/getting-started/Inbox.vue b/vue-options-api-demos/layout/drawer/getting-started/Inbox.vue
new file mode 100644
index 00000000..b49cf320
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/getting-started/Inbox.vue
@@ -0,0 +1,23 @@
+<template>
+  <div id="Inbox" class="page inbox-page">
+    <ul>
+      <li>
+        <h6>Monday meeting</h6>
+        <p>
+          Hi Tom, Since Monday I'll be out of office, I'm rescheduling the
+          meeting for Tuesday.
+        </p>
+      </li>
+      <li>
+        <h6>I'm sorry, Tom</h6>
+        <p>
+          Hi Tom, my aunt comes for a visit this Saturday, so I can't come back
+          to St. Pete...
+        </p>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {};
+</script>
diff --git a/vue-options-api-demos/layout/drawer/getting-started/Notifications.vue b/vue-options-api-demos/layout/drawer/getting-started/Notifications.vue
new file mode 100644
index 00000000..252acb15
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/getting-started/Notifications.vue
@@ -0,0 +1,14 @@
+<template>
+  <div id="Notifications" class="page notifications-page">
+    <ul>
+      <li>Monday meeting</li>
+      <li>Regarding org chart changes</li>
+      <li>Meeting with Cliff</li>
+      <li>Global Marketing Meeting</li>
+      <li>Out tonight with collegues?</li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/drawer/getting-started/index.js b/vue-options-api-demos/layout/drawer/getting-started/index.js
new file mode 100644
index 00000000..f697d7fb
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/getting-started/index.js
@@ -0,0 +1,41 @@
+import { createWebHistory, createRouter } from "vue-router";
+import Inbox from "./Inbox";
+import Notifications from "./Notifications";
+import Attachments from "./Attachments";
+import Favourites from "./Favourites";
+import Calendar from "./Calendar";
+
+const routes = [
+    {
+        path: "/layout/drawer/overview/inbox",
+        name: "Inbox",
+        component: Inbox
+    },
+    {
+        path: "/layout/drawer/overview/notifications",
+        name: "Notifications",
+        component: Notifications
+    },
+    {
+        path: "/layout/drawer/overview/attachments",
+        name: "Attachments",
+        component: Attachments
+    },
+    {
+        path: "/layout/drawer/overview/favourites",
+        name: "Favourites",
+        component: Favourites
+    },
+    {
+        path: "/layout/drawer/overview/calendar",
+        name: "Calendar",
+        component: Calendar
+    }
+];
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+});
+
+export default router;
diff --git a/vue-options-api-demos/layout/drawer/getting-started/main.js b/vue-options-api-demos/layout/drawer/getting-started/main.js
new file mode 100644
index 00000000..b51f2405
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/getting-started/main.js
@@ -0,0 +1,5 @@
+import { createApp } from "vue";
+import App from "./main.vue";
+import router from "./index.js";
+
+createApp(App).use(router).mount("#app");
diff --git a/vue-options-api-demos/layout/drawer/getting-started/main.vue b/vue-options-api-demos/layout/drawer/getting-started/main.vue
new file mode 100644
index 00000000..a13d072d
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/getting-started/main.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="border-demo">
+    <div class="custom-toolbar">
+      <kbutton :svg-icon="menuIcon" :fill-mode="'flat'" @click="handleClick" />
+      <span class="title">Mail Box</span>
+    </div>
+    <Drawer
+      :expanded="expanded"
+      :position="position"
+      :mode="mode"
+      :mini="true"
+      :items="
+        items.map((item, index) => ({
+          ...item,
+          selected: index === selectedId,
+        }))
+      "
+      @select="onSelect"
+    >
+      <DrawerContent>
+        <router-view />
+      </DrawerContent>
+    </Drawer>
+  </div>
+</template>
+
+<script>
+import { Drawer, DrawerContent } from "@progress/kendo-vue-layout";
+import { Button } from "@progress/kendo-vue-buttons";
+import { menuIcon } from "@progress/kendo-svg-icons";
+import {
+    inboxIcon,
+    bellIcon,
+    calendarIcon,
+    envelopLinkIcon,
+    starOutlineIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+    name: "App",
+    components: { Drawer, DrawerContent, kbutton: Button },
+    mounted() {
+        this.$router.push(this.items[0].data);
+    },
+    data() {
+        return {
+            menuIcon,
+            items: [
+                {
+                    text: "Inbox",
+                    svgIcon: inboxIcon,
+                    selected: true,
+                    data: {
+                        path: "/layout/drawer/overview/inbox",
+                    },
+                },
+                {
+                    separator: true,
+                },
+                {
+                    text: "Notifications",
+                    svgIcon: bellIcon,
+                    data: {
+                        path: "/layout/drawer/overview/notifications",
+                    },
+                },
+                {
+                    text: "Calendar",
+                    svgIcon: calendarIcon,
+                    data: {
+                        path: "/layout/drawer/overview/calendar",
+                    },
+                },
+                {
+                    separator: true,
+                },
+                {
+                    text: "Attachments",
+                    svgIcon: envelopLinkIcon,
+                    icon: "hyperlink-email",
+                    data: {
+                        path: "/layout/drawer/overview/attachments",
+                    },
+                },
+                {
+                    text: "Favourites",
+                    svgIcon: starOutlineIcon,
+                    data: {
+                        path: "/layout/drawer/overview/favourites",
+                    },
+                },
+            ],
+            expanded: true,
+            selectedId: 0,
+            position: "start",
+            mode: "push",
+        };
+    },
+    methods: {
+        onSelect(e) {
+            this.selectedId = e.itemIndex;
+            this.$router.push(this.items[e.itemIndex].data);
+            this.expanded = !this.expanded;
+        },
+        handleClick() {
+            this.expanded = !this.expanded;
+        },
+    },
+};
+</script>
+
+<style scoped>
+@import "./styles.css";
+</style>
diff --git a/vue-options-api-demos/layout/drawer/getting-started/styles.css b/vue-options-api-demos/layout/drawer/getting-started/styles.css
new file mode 100644
index 00000000..e0cca405
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/getting-started/styles.css
@@ -0,0 +1,47 @@
+my-app {
+  padding: 0 !important;
+}
+
+.k-drawer-container {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+}
+.k-drawer-item {
+  user-select: none;
+}
+.k-icon {
+  font-size: 20px;
+}
+.custom-toolbar {
+  width: 100%;
+  background-color: #f6f6f6;
+  line-height: 10px;
+  border-bottom: inset;
+  border-bottom-width: 1px;
+  padding: 3px 8px;
+  color: #656565;
+}
+.mail-box {
+  margin-left: 20px;
+  font-weight: bold;
+  font-size: 17px;
+}
+.page ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.page li {
+  font-size: 1.2em;
+  background: 0 0;
+  border-radius: 0;
+  border-width: 0 0 1px;
+  border-color: rgba(33, 37, 41, 0.125);
+  border-style: solid;
+  line-height: 1.5em;
+  padding: 1.09em 0.84em 1.23em 0.84em;
+}
+.page li:last-child {
+  border: 0;
+}
diff --git a/vue-options-api-demos/layout/drawer/hierarchical/Education.vue b/vue-options-api-demos/layout/drawer/hierarchical/Education.vue
new file mode 100644
index 00000000..2a8b12ec
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/hierarchical/Education.vue
@@ -0,0 +1,177 @@
+<template>
+  <div
+    id="Education"
+    :style="{
+      display: 'flex',
+      justifyContent: 'space-evenly',
+      marginBottom: 10,
+    }"
+  >
+    <div :style="{ width: '47%' }">
+      <Card>
+        <CardImage
+          src="https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg"
+          style="padding: 20px 20px"
+        />
+        <div>
+          <CardHeader>
+            <CardTitle>Vue</CardTitle>
+            <CardSubtitle>
+              <span class="reviews">
+                <span
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                >
+                  <SvgIcon :icon="starIcon" />
+                </span>
+                <span
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                >
+                  <SvgIcon :icon="starIcon" />
+                </span>
+                <span
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                >
+                  <SvgIcon :icon="starIcon" />
+                </span>
+                <span
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                >
+                  <SvgIcon :icon="starIcon" />
+                </span>
+                <span
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                >
+                  <SvgIcon :icon="starIcon" />
+                </span>
+                <div>5/5 (981)</div>
+              </span>
+            </CardSubtitle>
+          </CardHeader>
+          <CardBody>
+            <p>
+              If you're serious about learning Vue, there's no better place to
+              do it. This course includes all of the best practices and newest
+              APIs for building professional Vue apps in 2022.
+            </p>
+          </CardBody>
+          <CardActions>
+            <kbutton :fill-mode="'flat'" :theme-color="'primary'"
+              >Review</kbutton
+            >
+          </CardActions>
+        </div>
+      </Card>
+    </div>
+    <div
+      :style="{
+        width: '47%',
+      }"
+    >
+      <Card>
+        <CardImage
+          :src="jslogo"
+        />
+        <div>
+          <CardHeader>
+            <CardTitle>Advanced JS</CardTitle>
+            <CardSubtitle>
+              <span class="reviews">
+                <span
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                >
+                  <SvgIcon :icon="starIcon" />
+                </span>
+                <span
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                >
+                  <SvgIcon :icon="starIcon" />
+                </span>
+                <span
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                >
+                  <SvgIcon :icon="starIcon" />
+                </span>
+                <span
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                >
+                  <SvgIcon :icon="starIcon" />
+                </span>
+                <span
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                >
+                  <SvgIcon :icon="starOutlineIcon" />
+                </span>
+                <div>4/5 (681)</div>
+              </span>
+            </CardSubtitle>
+          </CardHeader>
+          <CardBody>
+            <p>
+              If you use JavaScript in any capacity, there's probably not
+              another resource that will benefit you more than this course.
+              Closures, The 'this' keyword, module patterns and so much more.
+            </p>
+          </CardBody>
+          <CardActions>
+            <kbutton :fill-mode="'flat'" :theme-color="'primary'"
+              >Review</kbutton
+            >
+          </CardActions>
+        </div>
+      </Card>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  Card,
+  CardImage,
+  CardHeader,
+  CardTitle,
+  CardSubtitle,
+  CardBody,
+  CardActions,
+} from "@progress/kendo-vue-layout";
+import { Button } from "@progress/kendo-vue-buttons";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { starIcon, starOutlineIcon } from "@progress/kendo-svg-icons";
+
+const jslogo = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/drawer/js-logo.png';
+
+export default {
+  components: {
+    Card,
+    CardImage,
+    CardHeader,
+    CardTitle,
+    CardSubtitle,
+    CardBody,
+    CardActions,
+    kbutton: Button,
+    SvgIcon,
+  },
+  data() {
+    return { starIcon, starOutlineIcon, jslogo };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/drawer/hierarchical/Europe.vue b/vue-options-api-demos/layout/drawer/hierarchical/Europe.vue
new file mode 100644
index 00000000..6fcef18a
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/hierarchical/Europe.vue
@@ -0,0 +1,162 @@
+<template>
+  <div
+    id="Europe"
+    :style="{
+      display: 'flex',
+      justifyContent: 'space-evenly',
+      marginBottom: 10,
+    }"
+  >
+    <div
+      :style="{
+        width: '47%',
+      }"
+    >
+      <Card>
+        <CardImage
+          :src="amsterdamImage"
+        />
+        <div>
+          <CardHeader>
+            <CardTitle>Amsterdam holiday</CardTitle>
+            <CardSubtitle>
+              <span class="reviews">
+                <span
+                  class="k-icon k-i-star"
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                />
+                <span
+                  class="k-icon k-i-star"
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                />
+                <span
+                  class="k-icon k-i-star"
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                />
+                <span
+                  class="k-icon k-i-star"
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                />
+                <span class="k-icon k-i-star-outline" />
+                <div>4/5 (391)</div>
+              </span>
+            </CardSubtitle>
+          </CardHeader>
+          <CardBody>
+            <p>
+              Amsterdam is the perfect place for a great holiday, with its great
+              museums and galleries, lovely eateries, picturesque winding
+              streets and canals, and lively nightlife scene.
+            </p>
+          </CardBody>
+          <CardActions>
+            <kbutton :fill-mode="'flat'" :theme-color="'primary'" >Review</kbutton>
+          </CardActions>
+        </div>
+      </Card>
+    </div>
+    <div
+      :style="{
+        width: '47%',
+      }"
+    >
+      <Card>
+        <CardImage
+          :src="budapestImage"
+        />
+        <div>
+          <CardHeader>
+            <CardTitle>Budapest holiday</CardTitle>
+            <CardSubtitle>
+              <span class="reviews">
+                <span
+                  class="k-icon k-i-star"
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                />
+                <span
+                  class="k-icon k-i-star"
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                />
+                <span
+                  class="k-icon k-i-star"
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                />
+                <span
+                  class="k-icon k-i-star"
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                />
+                <span
+                  class="k-icon k-i-star"
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                />
+                <div>5/5 (1023)</div>
+              </span>
+            </CardSubtitle>
+          </CardHeader>
+          <CardBody>
+            <p>
+              Discover why Budapest has long been a much-loved destination. Take
+              an evening summer stroll along the banks of the Danube River, and
+              enjoy the view from Castle Hill.
+            </p>
+          </CardBody>
+          <CardActions>
+            <kbutton :fill-mode="'flat'" :theme-color="'primary'" >Review</kbutton>
+          </CardActions>
+        </div>
+      </Card>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  Card,
+  CardImage,
+  CardHeader,
+  CardTitle,
+  CardSubtitle,
+  CardBody,
+  CardActions,
+} from "@progress/kendo-vue-layout";
+import { Button } from '@progress/kendo-vue-buttons';
+
+const amsterdamImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/drawer/amsterdam.jpg';
+const budapestImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/drawer/budapest.jpg';
+
+export default {
+  components: {
+    Card,
+    CardImage,
+    CardHeader,
+    CardTitle,
+    CardSubtitle,
+    CardBody,
+    CardActions,
+      'kbutton': Button
+  },
+  data() {
+    return {
+      amsterdamImage,
+      budapestImage,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/drawer/hierarchical/Food.vue b/vue-options-api-demos/layout/drawer/hierarchical/Food.vue
new file mode 100644
index 00000000..e25ca6c8
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/hierarchical/Food.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <JapaneseFood />
+    <ItalianFood />
+  </div>
+</template>
+<script>
+import JapaneseFood from "./JapaneseFood.vue";
+import ItalianFood from "./ItalianFood.vue";
+export default {
+  components: {
+    JapaneseFood,
+    ItalianFood,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/drawer/hierarchical/ItalianFood.vue b/vue-options-api-demos/layout/drawer/hierarchical/ItalianFood.vue
new file mode 100644
index 00000000..daefd4dc
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/hierarchical/ItalianFood.vue
@@ -0,0 +1,157 @@
+<template>
+  <div
+    id="ItalianFood"
+    :style="{
+      display: 'flex',
+      justifyContent: 'space-evenly',
+      marginBottom: 10,
+    }"
+  >
+    <div
+      :style="{
+        width: '47%',
+      }"
+    >
+      <Card>
+        <CardImage
+          :src="pastaImage"
+        />
+        <div>
+          <CardHeader>
+            <CardTitle>Pasta</CardTitle>
+            <CardSubtitle>
+              <span class="reviews">
+                <span
+                  class="k-icon k-i-star"
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                />
+                <span
+                  class="k-icon k-i-star"
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                />
+                <span
+                  class="k-icon k-i-star"
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                />
+                <span
+                  class="k-icon k-i-star"
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                />
+                <span class="k-icon k-i-star-outline" />
+                <div>4/5 (681)</div>
+              </span>
+            </CardSubtitle>
+          </CardHeader>
+          <CardBody>
+            <p>
+              Pasta is a type of Italian food typically made from an unleavened
+              dough of durum wheat flour mixed with water or eggs, and formed
+              into sheets or various shapes, then cooked by boiling or baking.
+            </p>
+          </CardBody>
+          <CardActions>
+            <kbutton :fill-mode="'flat'" :theme-color="'primary'" >Review</kbutton>
+          </CardActions>
+        </div>
+      </Card>
+    </div>
+    <div
+      :style="{
+        width: '47%',
+      }"
+    >
+      <Card>
+        <CardImage
+          :src="pizzaImage"
+        />
+        <div>
+          <CardHeader>
+            <CardTitle>Pizza</CardTitle>
+            <CardSubtitle>
+              <span class="reviews">
+                <span
+                  class="k-icon k-i-star"
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                />
+                <span
+                  class="k-icon k-i-star"
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                />
+                <span
+                  class="k-icon k-i-star"
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                />
+                <span
+                  class="k-icon k-i-star"
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                />
+                <span class="k-icon k-i-star-outline" />
+                <div>4/5 (681)</div>
+              </span>
+            </CardSubtitle>
+          </CardHeader>
+          <CardBody>
+            <p>
+              Though a slab of flat bread served with oil and spices was around
+              long before the unification Italy, there’s perhaps no dish that is
+              as common or as representative of the country as the humble pizza.
+            </p>
+          </CardBody>
+          <CardActions>
+            <kbutton :fill-mode="'flat'" :theme-color="'primary'" >Review</kbutton>
+          </CardActions>
+        </div>
+      </Card>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  Card,
+  CardImage,
+  CardHeader,
+  CardTitle,
+  CardSubtitle,
+  CardBody,
+  CardActions,
+} from "@progress/kendo-vue-layout";
+import { Button } from '@progress/kendo-vue-buttons';
+
+const pizzaImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/drawer/pizza.jpg';
+const pastaImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/drawer/pasta.jpg';
+
+export default {
+  components: {
+    Card,
+    CardImage,
+    CardHeader,
+    CardTitle,
+    CardSubtitle,
+    CardBody,
+    CardActions,
+      'kbutton': Button
+  },
+  data() {
+    return {
+      pizzaImage,
+      pastaImage
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/drawer/hierarchical/JapaneseFood.vue b/vue-options-api-demos/layout/drawer/hierarchical/JapaneseFood.vue
new file mode 100644
index 00000000..de0d6ba3
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/hierarchical/JapaneseFood.vue
@@ -0,0 +1,169 @@
+<template>
+  <div>
+    <div
+      id="JapaneseFood"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-evenly',
+        marginBottom: 10,
+      }"
+    >
+      <div
+        :style="{
+          width: '47%',
+        }"
+      >
+        <Card>
+          <CardImage
+            :src="sushiImage"
+          />
+          <div>
+            <CardHeader>
+              <CardTitle>Sushi</CardTitle>
+              <CardSubtitle>
+                <span class="reviews">
+                  <span
+                    class="k-icon k-i-star"
+                    :style="{
+                      color: '#ffce2a',
+                    }"
+                  />
+                  <span
+                    class="k-icon k-i-star"
+                    :style="{
+                      color: '#ffce2a',
+                    }"
+                  />
+                  <span
+                    class="k-icon k-i-star"
+                    :style="{
+                      color: '#ffce2a',
+                    }"
+                  />
+                  <span
+                    class="k-icon k-i-star"
+                    :style="{
+                      color: '#ffce2a',
+                    }"
+                  />
+                  <span
+                    class="k-icon k-i-star"
+                    :style="{
+                      color: '#ffce2a',
+                    }"
+                  />
+                  <div>5/5 (203)</div>
+                </span>
+              </CardSubtitle>
+            </CardHeader>
+            <CardBody>
+              <p>
+                Sushi is a Japanese dish of prepared vinegared rice,
+                accompanying with seafood, vegetables, and occasionally tropical
+                fruits.
+              </p>
+            </CardBody>
+            <CardActions>
+              <kbutton :fill-mode="'flat'" :theme-color="'primary'" >Review</kbutton>
+            </CardActions>
+          </div>
+        </Card>
+      </div>
+      <div
+        :style="{
+          width: '47%',
+        }"
+      >
+        <Card>
+          <CardImage
+            :src="ramenImage"
+          />
+          <div>
+            <CardHeader>
+              <CardTitle>Ramen</CardTitle>
+              <CardSubtitle>
+                <span class="reviews">
+                  <span
+                    class="k-icon k-i-star"
+                    :style="{
+                      color: '#ffce2a',
+                    }"
+                  />
+                  <span
+                    class="k-icon k-i-star"
+                    :style="{
+                      color: '#ffce2a',
+                    }"
+                  />
+                  <span
+                    class="k-icon k-i-star"
+                    :style="{
+                      color: '#ffce2a',
+                    }"
+                  />
+                  <span
+                    class="k-icon k-i-star"
+                    :style="{
+                      color: '#ffce2a',
+                    }"
+                  />
+                  <span
+                    class="k-icon k-i-star"
+                    :style="{
+                      color: '#ffce2a',
+                    }"
+                  />
+                  <div>5/5 (653)</div>
+                </span>
+              </CardSubtitle>
+            </CardHeader>
+            <CardBody>
+              <p>
+                Ramen is a Japanese dish with a translation of "pulled noodles".
+                It consists of wheat noodles served in a meat or fish-based
+                broth.
+              </p>
+            </CardBody>
+            <CardActions>
+              <kbutton :fill-mode="'flat'" :theme-color="'primary'" >Review</kbutton>
+            </CardActions>
+          </div>
+        </Card>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  Card,
+  CardImage,
+  CardHeader,
+  CardTitle,
+  CardSubtitle,
+  CardBody,
+  CardActions,
+} from "@progress/kendo-vue-layout";
+import { Button } from '@progress/kendo-vue-buttons';
+
+const sushiImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/drawer/sushi.jpg';
+const ramenImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/drawer/ramen.jpg';
+
+export default {
+  components: {
+    Card,
+    CardImage,
+    CardHeader,
+    CardTitle,
+    CardSubtitle,
+    CardBody,
+    CardActions,
+      'kbutton': Button
+  },
+  data(){
+    return {
+      sushiImage,
+      ramenImage,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/drawer/hierarchical/NorthAmerica.vue b/vue-options-api-demos/layout/drawer/hierarchical/NorthAmerica.vue
new file mode 100644
index 00000000..07821c64
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/hierarchical/NorthAmerica.vue
@@ -0,0 +1,162 @@
+<template>
+  <div
+    id="NorthAmerica"
+    :style="{
+      display: 'flex',
+      justifyContent: 'space-evenly',
+      marginBottom: 10,
+    }"
+  >
+    <div
+      :style="{
+        width: '47%',
+      }"
+    >
+      <Card>
+        <CardImage
+          :src="newYorkImage"
+        />
+        <div>
+          <CardHeader>
+            <CardTitle>New York holiday</CardTitle>
+            <CardSubtitle>
+              <span className="reviews">
+                <span
+                  className="k-icon k-i-star"
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                />
+                <span
+                  className="k-icon k-i-star"
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                />
+                <span
+                  className="k-icon k-i-star"
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                />
+                <span
+                  className="k-icon k-i-star"
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                />
+                <span className="k-icon k-i-star-outline" />
+                <div>4/5 (2523)</div>
+              </span>
+            </CardSubtitle>
+          </CardHeader>
+          <CardBody>
+            <p>
+              New York holidays are the ideal way to explore one of the most
+              iconic destinations. Offering both return flights and
+              accommodation, they offer great value and fantastic savings.
+            </p>
+          </CardBody>
+          <CardActions>
+            <kbutton :fill-mode="'flat'" :theme-color="'primary'" >Review</kbutton>
+          </CardActions>
+        </div>
+      </Card>
+    </div>
+    <div
+      :style="{
+        width: '47%',
+      }"
+    >
+      <Card>
+        <CardImage
+          :src="lasvegasImage"
+        />
+        <div>
+          <CardHeader>
+            <CardTitle>Las Vegas holiday</CardTitle>
+            <CardSubtitle>
+              <span className="reviews">
+                <span
+                  className="k-icon k-i-star"
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                />
+                <span
+                  className="k-icon k-i-star"
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                />
+                <span
+                  className="k-icon k-i-star"
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                />
+                <span
+                  className="k-icon k-i-star"
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                />
+                <span
+                  className="k-icon k-i-star"
+                  :style="{
+                    color: '#ffce2a',
+                  }"
+                />
+                <div>5/5 (357)</div>
+              </span>
+            </CardSubtitle>
+          </CardHeader>
+          <CardBody>
+            <p>
+              With its famous casinos, gourmet restaurants and glitzy shows, Las
+              Vegas is truly a must-see destination. Explore the famous hotels
+              and casinos that are home to the best restaurants and clubs.
+            </p>
+          </CardBody>
+          <CardActions>
+            <kbutton :fill-mode="'flat'" :theme-color="'primary'" >Review</kbutton>
+          </CardActions>
+        </div>
+      </Card>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  Card,
+  CardImage,
+  CardHeader,
+  CardTitle,
+  CardSubtitle,
+  CardBody,
+  CardActions,
+} from "@progress/kendo-vue-layout";
+import { Button } from '@progress/kendo-vue-buttons';
+
+const lasvegasImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/drawer/las-vegas.jpg';
+const newYorkImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/drawer/new-york.jpg';
+
+export default {
+  components: {
+    Card,
+    CardImage,
+    CardHeader,
+    CardTitle,
+    CardSubtitle,
+    CardBody,
+    CardActions,
+      'kbutton': Button
+  },
+  data(){
+    return {
+      lasvegasImage,
+      newYorkImage
+    }
+  }
+};
+</script>
diff --git a/vue-options-api-demos/layout/drawer/hierarchical/Travel.vue b/vue-options-api-demos/layout/drawer/hierarchical/Travel.vue
new file mode 100644
index 00000000..92dd85de
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/hierarchical/Travel.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <Europe />
+    <NorthAmerica />
+  </div>
+</template>
+<script>
+import Europe from "./Europe.vue";
+import NorthAmerica from "./NorthAmerica.vue";
+export default {
+  components: {
+    Europe,
+    NorthAmerica,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/drawer/hierarchical/index.js b/vue-options-api-demos/layout/drawer/hierarchical/index.js
new file mode 100644
index 00000000..b50687fc
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/hierarchical/index.js
@@ -0,0 +1,73 @@
+import { createWebHistory, createRouter } from "vue-router";
+import Education from "./Education.vue";
+import Food from "./Food.vue";
+import JapaneseFood from "./JapaneseFood.vue";
+import ItalianFood from "./ItalianFood.vue";
+import Travel from "./Travel.vue";
+import Europe from "./Europe.vue";
+import NorthAmerica from "./NorthAmerica.vue";
+
+const routes = [
+    {
+        icon: "pencil",
+        id: 1,
+        path: "/layout/drawer/hierarchical/education",
+        name: "Education",
+        component: Education
+    },
+    {
+        separator: true
+    },
+    {
+        text: "Food",
+        id: 2,
+        path: "/layout/drawer/hierarchical/food",
+        ["data-expanded"]: true,
+        component: Food
+    },
+    {
+        text: "Japanese Food",
+        id: 4,
+        parentId: 2,
+        path: "/layout/drawer/hierarchical/food/japanese",
+        component: JapaneseFood
+    },
+    {
+        text: "Italian Food",
+        id: 5,
+        parentId: 2,
+        path: "/layout/drawer/hierarchical/food/italian",
+        component: ItalianFood
+    },
+    {
+        separator: true
+    },
+    {
+        text: "Travel",
+        ["data-expanded"]: true,
+        id: 3,
+        path: "/layout/drawer/hierarchical/travel",
+        component: Travel
+    },
+    {
+        text: "Europe",
+        id: 6,
+        parentId: 3,
+        path: "/layout/drawer/hierarchical/travel/europe",
+        component: Europe
+    },
+    {
+        text: "North America",
+        id: 7,
+        parentId: 3,
+        path: "/layout/drawer/hierarchical/travel/america",
+        component: NorthAmerica
+    }
+];
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+});
+
+export default router;
diff --git a/vue-options-api-demos/layout/drawer/hierarchical/main.js b/vue-options-api-demos/layout/drawer/hierarchical/main.js
new file mode 100644
index 00000000..e38732dc
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/hierarchical/main.js
@@ -0,0 +1,6 @@
+import { createApp } from "vue";
+import App from "./main.vue";
+import router from "./index.js";
+import "./styles.css";
+
+createApp(App).use(router).mount("#app");
diff --git a/vue-options-api-demos/layout/drawer/hierarchical/main.vue b/vue-options-api-demos/layout/drawer/hierarchical/main.vue
new file mode 100644
index 00000000..350ea00e
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/hierarchical/main.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="border-demo">
+    <div class="custom-toolbar">
+      <kbutton :svg-icon="menuIcon" :fill-mode="'flat'" @click="handleClick" />
+      <span class="title">Categories</span>
+    </div>
+    <Drawer
+      :animation="false"
+      :expanded="expanded"
+      :position="position"
+      :mode="mode"
+      :mini="true"
+      :width="175"
+      :items="dataItems"
+      :item="'CustomItem'"
+      @select="onSelect"
+    >
+      <template v-slot:CustomItem="{ props }">
+        <DrawerItem
+          v-if="props.visible !== false"
+          v-bind="props"
+          @click="props.onClick"
+        >
+          <span><SvgIcon :icon="props.svgIcon" /></span>
+          <span class="k-item-text">{{ props.text }}</span>
+          <span
+            v-if="props['data-expanded'] !== undefined"
+            :style="{
+              position: 'absolute',
+              right: '10px',
+              visibility: expanded ? '' : 'hidden',
+            }"
+          >
+            <SvgIcon
+              :icon="
+                props['data-expanded'] ? chevronDownIcon : chevronRightIcon
+              "
+            />
+          </span>
+        </DrawerItem>
+      </template>
+      <DrawerContent>
+        <router-view />
+      </DrawerContent>
+    </Drawer>
+  </div>
+</template>
+
+<script>
+import { Drawer, DrawerContent, DrawerItem } from "@progress/kendo-vue-layout";
+import { Button } from "@progress/kendo-vue-buttons";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import {
+    menuIcon,
+    pencilIcon,
+    heartIcon,
+    minusIcon,
+    globeIcon,
+    chevronRightIcon,
+    chevronDownIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+    name: "App",
+    components: { Drawer, DrawerItem, DrawerContent, kbutton: Button, SvgIcon },
+    mounted() {
+        this.$router.push(this.items[0].data);
+    },
+    computed: {
+        dataItems() {
+            const newItems = this.items.map((item) => {
+                const { parentId, ...others } = item;
+                if (parentId !== undefined) {
+                    const parent = this.items.find((parent) => parent.id === parentId);
+                    return { ...others, visible: parent["data-expanded"] };
+                }
+                return item;
+            });
+            return newItems;
+        },
+    },
+    data() {
+        return {
+            menuIcon,
+            chevronRightIcon,
+            chevronDownIcon,
+            items: [
+                {
+                    text: "Education",
+                    svgIcon: pencilIcon,
+                    id: 1,
+                    selected: true,
+                    data: {
+                        path: "/layout/drawer/hierarchical/education",
+                    },
+                },
+                {
+                    separator: true,
+                },
+                {
+                    text: "Food",
+                    svgIcon: heartIcon,
+                    id: 2,
+                    ["data-expanded"]: true,
+                    data: {
+                        path: "/layout/drawer/hierarchical/food",
+                    },
+                },
+                {
+                    text: "Japanese Food",
+                    svgIcon: minusIcon,
+                    id: 4,
+                    parentId: 2,
+                    data: {
+                        path: "/layout/drawer/hierarchical/food/japanese",
+                    },
+                },
+                {
+                    text: "Italian Food",
+                    svgIcon: minusIcon,
+                    id: 5,
+                    parentId: 2,
+                    data: {
+                        path: "/layout/drawer/hierarchical/food/italian",
+                    },
+                },
+                {
+                    separator: true,
+                },
+                {
+                    text: "Travel",
+                    svgIcon: globeIcon,
+                    ["data-expanded"]: true,
+                    id: 3,
+                    data: {
+                        path: "/layout/drawer/hierarchical/travel",
+                    },
+                },
+                {
+                    text: "Europe",
+                    svgIcon: minusIcon,
+                    id: 6,
+                    parentId: 3,
+                    data: {
+                        path: "/layout/drawer/hierarchical/travel/europe",
+                    },
+                },
+                {
+                    text: "North America",
+                    svgIcon: minusIcon,
+                    id: 7,
+                    parentId: 3,
+                    data: {
+                        path: "/layout/drawer/hierarchical/travel/america",
+                    },
+                },
+            ],
+            expanded: true,
+            position: "start",
+            mode: "push",
+        };
+    },
+    methods: {
+        onSelect(ev) {
+            const currentItem = ev.itemTarget.props;
+            const isParent = currentItem["data-expanded"] !== undefined;
+            const nextExpanded = !currentItem["data-expanded"];
+            const newData = this.items.map((item) => {
+                const {
+                    selected,
+                    ["data-expanded"]: currentExpanded,
+                    id,
+                    ...others
+                } = item;
+                const isCurrentItem = currentItem.id === id;
+                return {
+                    selected: isCurrentItem,
+                    ["data-expanded"]:
+            isCurrentItem && isParent ? nextExpanded : currentExpanded,
+                    id,
+                    ...others,
+                };
+            });
+            this.$router.push(this.items[ev.itemIndex].data);
+
+            this.items = newData;
+        },
+        handleClick() {
+            this.expanded = !this.expanded;
+        },
+    },
+};
+</script>
+
+<style scoped>
+@import "./styles.css";
+</style>
diff --git a/vue-options-api-demos/layout/drawer/hierarchical/styles.css b/vue-options-api-demos/layout/drawer/hierarchical/styles.css
new file mode 100644
index 00000000..5d236ab0
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/hierarchical/styles.css
@@ -0,0 +1,52 @@
+my-app {
+  padding: 0 !important;
+}
+
+.k-drawer-content {
+  padding: 20px;
+}
+
+.k-drawer-container {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+}
+.k-drawer-item {
+  align-items: center;
+  user-select: none;
+}
+.weather-icon {
+  display: block;
+  margin: 30px auto 10px;
+  width: 128px;
+  height: 128px;
+}
+.k-drawer-container .k-drawer-items .k-icon {
+  font-size: 20px;
+  margin-right: 16px;
+  height: 20px;
+}
+.custom-toolbar {
+  width: 100%;
+  background-color: #f6f6f6;
+  line-height: 10px;
+  border-bottom: inset;
+  border-bottom-width: 1px;
+  padding: 3px 8px;
+  color: #656565;
+}
+.title {
+  margin-left: 20px;
+  font-weight: bold;
+  font-size: 17px;
+}
+.item-descr {
+  margin-top: -5px;
+}
+.item-descr-wrap > span {
+  font-size: 70%;
+}
+.item-descr-wrap {
+  display: flex;
+  flex-direction: column;
+}
diff --git a/vue-options-api-demos/layout/drawer/mini-mode/main.js b/vue-options-api-demos/layout/drawer/mini-mode/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/mini-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/drawer/mini-mode/main.vue b/vue-options-api-demos/layout/drawer/mini-mode/main.vue
new file mode 100644
index 00000000..8e0ba99c
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/mini-mode/main.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="border-demo">
+    <Drawer
+      :expanded="expanded"
+      :position="'start'"
+      :mode="'push'"
+      :mini="true"
+      :items="
+        items.map((item, index) => ({
+          ...item,
+          selected: index === selectedId,
+        }))
+      "
+      @select="handleSelect"
+    >
+      <DrawerContent>
+        <kbutton @click="handleClick"> Toggle the drawer state </kbutton>
+      </DrawerContent>
+    </Drawer>
+  </div>
+</template>
+
+<script>
+import { Drawer, DrawerContent } from "@progress/kendo-vue-layout";
+import { Button } from "@progress/kendo-vue-buttons";
+import {
+  inboxIcon,
+  bellIcon,
+  calendarIcon,
+  envelopLinkIcon,
+  starOutlineIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    Drawer,
+    DrawerContent,
+    kbutton: Button,
+  },
+  created() {
+    this.selectedId = this.items.findIndex((x) => x.selected === true);
+  },
+  data() {
+    return {
+      items: [
+        {
+          text: "Inbox",
+          svgIcon: inboxIcon,
+          selected: true,
+        },
+        {
+          separator: true,
+        },
+        {
+          text: "Notifications",
+          svgIcon: bellIcon,
+        },
+        {
+          text: "Calendar",
+          svgIcon: calendarIcon,
+        },
+        {
+          separator: true,
+        },
+        {
+          text: "Attachments",
+          svgIcon: envelopLinkIcon,
+        },
+        {
+          text: "Favourites",
+          svgIcon: starOutlineIcon,
+        },
+      ],
+      expanded: true,
+      selectedId: null,
+    };
+  },
+  methods: {
+    handleClick() {
+      this.expanded = !this.expanded;
+    },
+    handleSelect(ev) {
+      this.selectedId = ev.itemIndex;
+      this.expanded = false;
+    },
+  },
+};
+</script>
+<style>
+my-app {
+  padding: 0 !important;
+}
+.k-drawer-content {
+  padding: 20px;
+}
+.k-drawer-container {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+}
+.k-drawer-item {
+  user-select: none;
+}
+</style>
diff --git a/vue-options-api-demos/layout/drawer/positioning/main.js b/vue-options-api-demos/layout/drawer/positioning/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/positioning/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/drawer/positioning/main.vue b/vue-options-api-demos/layout/drawer/positioning/main.vue
new file mode 100644
index 00000000..cbfdb392
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/positioning/main.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="border-demo">
+    <Drawer
+      :expanded="expanded"
+      :position="positionMode"
+      :mode="'push'"
+      :items="
+        items.map((item, index) => ({
+          ...item,
+          selected: index === selectedId,
+        }))
+      "
+      @overlayclick="handleClick"
+      @select="handleSelect"
+    >
+      <DrawerContent>
+        <div class="k-form">
+          <div class="k-form-field">
+            <kbutton @click="handleClick"> Toggle the Drawer state </kbutton>
+          </div>
+          <div class="k-form-field">
+            <label for="expandedSwitch"> Switch Drawer position &nbsp; </label>
+            <Checkbox
+              :checked="position"
+              @change="handleChange"
+              :id="'expandedSwitch'"
+            />
+          </div>
+          <div class="k-form-field">
+            <p>
+              Current drawer mode is <b>{{ positionMode }}</b>
+            </p>
+          </div>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  </div>
+</template>
+
+<script>
+import { Drawer, DrawerContent } from "@progress/kendo-vue-layout";
+import { Checkbox } from "@progress/kendo-vue-inputs";
+import { Button } from "@progress/kendo-vue-buttons";
+import {
+  inboxIcon,
+  bellIcon,
+  calendarIcon,
+  envelopLinkIcon,
+  starOutlineIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    Drawer,
+    DrawerContent,
+    Checkbox,
+    kbutton: Button,
+  },
+  computed: {
+    positionMode() {
+      return this.position ? "start" : "end";
+    },
+  },
+  data() {
+    return {
+      items: [
+        {
+          text: "Inbox",
+          svgIcon: inboxIcon,
+          selected: true,
+        },
+        {
+          separator: true,
+        },
+        {
+          text: "Notifications",
+          svgIcon: bellIcon,
+        },
+        {
+          text: "Calendar",
+          svgIcon: calendarIcon,
+        },
+        {
+          separator: true,
+        },
+        {
+          text: "Attachments",
+          svgIcon: envelopLinkIcon,
+        },
+        {
+          text: "Favourites",
+          svgIcon: starOutlineIcon,
+        },
+      ],
+      expanded: true,
+      selectedId: null,
+      position: true,
+    };
+  },
+  methods: {
+    handleClick() {
+      this.expanded = !this.expanded;
+    },
+    handleChange() {
+      this.position = !this.position;
+    },
+    handleSelect(ev) {
+      this.selectedId = ev.itemIndex;
+      this.expanded = false;
+    },
+  },
+};
+</script>
+<style>
+my-app {
+  padding: 0 !important;
+}
+.k-drawer-content {
+  padding: 20px;
+}
+.k-drawer-container {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+}
+.k-drawer-item {
+  user-select: none;
+}
+</style>
diff --git a/vue-options-api-demos/layout/drawer/routing/About.vue b/vue-options-api-demos/layout/drawer/routing/About.vue
new file mode 100644
index 00000000..fc3752c7
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/routing/About.vue
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <h2>About</h2>
+    <div>
+      <p>
+        So cuffed therefore by some sadistically mallard rewrote yet
+        accommodatingly more cat adequate pesky far this dear fitting and
+        groundhog horse some selfish jeepers juggled about since upheld heatedly
+        well much.
+      </p>
+      <p>
+        Therefore falcon usefully crab during onto hello regally rat wiped
+        misread reluctant unlike iguanodon fish far bald abjectly far chameleon
+        more scurrilous gagged virtuously sufficient arrogant cobra froze dog
+        waywardly staunch thus consoled.
+      </p>
+      <p>
+        Amphibious darn well densely far meanly inanimately incoherent away
+        flamingo outside yet jeez that yawned secret evasive dear overrode rat
+        cow one overpaid far hatchet much.
+      </p>
+      <p>
+        Had aerial well well coasted darn chuckled studied underlay fatally the
+        but among because patient or shook depending much sloth wetted cheered
+        some bee.
+      </p>
+      <p>
+        Bombastically yikes some coquettish erroneously in therefore
+        disgracefully glanced some connected and goodness more read marvelous up
+        one rebukingly darn fuzzily.
+      </p>
+      <p>
+        Meadowlark and hence regarding flaunting amongst steadfastly demurely
+        like far and stiffly bled reluctant alongside jeez this save opposite
+        well and this shuddered and smoked wherever condescendingly hey onto
+        much.
+      </p>
+      <p>
+        Hello gosh gosh up effortlessly valiant hotly less rubbed gerbil and
+        ouch inside fatuous suitably far fuzzily unihibitedly locked froze
+        timidly hello much revealed lorikeet lantern this much one and far
+        decidedly.
+      </p>
+    </div>
+  </div>
+</template>
+<script>
+export default {};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/drawer/routing/Home.vue b/vue-options-api-demos/layout/drawer/routing/Home.vue
new file mode 100644
index 00000000..96a78ccc
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/routing/Home.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <h2>Home page</h2>
+    <div>
+      <p>
+        However engaging wherever growled much methodic shamefully more human
+        agreeable gracefully and less equitable insistent gasped that when wasp
+        baboon rebuilt more slept stingily along knew llama.
+      </p>
+      <p>
+        Prim crud far healthy wholesomely more far chortled ouch in adroitly
+        gawked affably reasonably manfully reindeer mysteriously overpaid
+        considering far far until.
+      </p>
+      <p>
+        Red-handed off thickly save aboard mawkishly that amidst moth pending
+        jerkily monogamous some much or creatively indecent neat far jeepers up
+        spoiled about.
+      </p>
+      <p>
+        Owing desperate like one shark or bit yikes up so thus grumbled gosh
+        more bawled much and regardless hey far bought through crud well
+        staunchly hysteric inside incorrect the closed.
+      </p>
+      <p>
+        Industrious jubilant blanched bestially yet that less far far a wow the
+        militant preparatory crudely acrimonious under a towards lemur wedded
+        that while decorously this peered darn a much.
+      </p>
+      <p>
+        Dizzy boundless hence but because moodily and alas a truculently less
+        hardheaded so on ambiguously incompetently less moaned hilarious until
+        one jeepers amid heinously.
+      </p>
+      <p>
+        Where beneath less misspelled across artistically spiteful jeepers much
+        more that when blushed a much a this groundhog therefore far arduous
+        dependent much satanic where dear goodness hummingbird.
+      </p>
+    </div>
+  </div>
+</template>
+<script>
+export default {};
+</script>
diff --git a/vue-options-api-demos/layout/drawer/routing/Products.vue b/vue-options-api-demos/layout/drawer/routing/Products.vue
new file mode 100644
index 00000000..8d4f3453
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/routing/Products.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <h2>Products</h2>
+    <div>
+      <p>
+        Inclusive and foolishly more on yikes far one vociferous squinted lied
+        much the howled disagreed yet seal needlessly vulgarly far moistly
+        wanton.
+      </p>
+      <p>
+        Human and some barring roadrunner behind swore hello ebulliently pending
+        less upon amiable less amiably dear harsh telepathic regarding hey
+        poignant ahead.
+      </p>
+      <p>
+        Immensely a that gosh accurately by naughtily patted laxly far pangolin
+        ouch this like marvelous bitter crab jeez after unobtrusive flamboyant
+        octopus.
+      </p>
+      <p>
+        So koala that ouch and much porpoise falcon from and wasp curtly crud
+        much more frequently and accidental beneath during far.
+      </p>
+    </div>
+  </div>
+</template>
+<script>
+export default {};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/drawer/routing/index.js b/vue-options-api-demos/layout/drawer/routing/index.js
new file mode 100644
index 00000000..e298d8c5
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/routing/index.js
@@ -0,0 +1,29 @@
+import { createWebHistory, createRouter } from "vue-router";
+import Home from "./Home";
+import About from "./About";
+import Products from "./Products";
+
+const routes = [
+    {
+        path: "/layout/drawer/routing/home",
+        name: "Home",
+        component: Home
+    },
+    {
+        path: "/layout/drawer/routing/about",
+        name: "About",
+        component: About
+    },
+    {
+        path: "/layout/drawer/routing/products",
+        name: "Products",
+        component: Products
+    }
+];
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+});
+
+export default router;
diff --git a/vue-options-api-demos/layout/drawer/routing/main.js b/vue-options-api-demos/layout/drawer/routing/main.js
new file mode 100644
index 00000000..e38732dc
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/routing/main.js
@@ -0,0 +1,6 @@
+import { createApp } from "vue";
+import App from "./main.vue";
+import router from "./index.js";
+import "./styles.css";
+
+createApp(App).use(router).mount("#app");
diff --git a/vue-options-api-demos/layout/drawer/routing/main.vue b/vue-options-api-demos/layout/drawer/routing/main.vue
new file mode 100644
index 00000000..b79abbcf
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/routing/main.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="border-demo">
+    <div class="custom-toolbar">
+      <kbutton :svg-icon="menuIcon" :fill-mode="'flat'" @click="handleClick" />
+      <span class="title">Navigational drawer</span>
+    </div>
+    <Drawer
+      :expanded="expanded"
+      :position="position"
+      :mode="mode"
+      :items="
+        items.map((item, index) => ({
+          ...item,
+          selected: index === selectedId,
+        }))
+      "
+      @select="onSelect"
+    >
+      <DrawerContent>
+        <router-view />
+      </DrawerContent>
+    </Drawer>
+  </div>
+</template>
+
+<script>
+import { Drawer, DrawerContent } from "@progress/kendo-vue-layout";
+import { Button } from "@progress/kendo-vue-buttons";
+import { menuIcon } from "@progress/kendo-svg-icons";
+
+export default {
+  components: { Drawer, DrawerContent, "kbutton": Button },
+  mounted() {
+    this.$router.push(this.items[0].data);
+  },
+  data() {
+    return {
+      menuIcon,
+      items: [
+        {
+          text: "Home",
+          selected: true,
+          data: {
+            path: "/layout/drawer/routing/home",
+          },
+        },
+        {
+          text: "Products",
+          data: {
+            path: "/layout/drawer/routing/products",
+          },
+        },
+        {
+          text: "About",
+          data: {
+            path: "/layout/drawer/routing/about",
+          },
+        },
+      ],
+      expanded: true,
+      selectedId: 0,
+      position: "start",
+      mode: "push",
+    };
+  },
+  methods: {
+    onSelect(e) {
+      this.selectedId = e.itemIndex;
+      this.$router.push(this.items[e.itemIndex].data);
+    },
+    handleClick() {
+      this.expanded = !this.expanded;
+    },
+  },
+};
+</script>
+
+<style></style>
diff --git a/vue-options-api-demos/layout/drawer/routing/styles.css b/vue-options-api-demos/layout/drawer/routing/styles.css
new file mode 100644
index 00000000..b104f402
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/routing/styles.css
@@ -0,0 +1,35 @@
+my-app { padding: 0 !important; }
+
+.k-drawer-container {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+}
+.k-drawer-item {
+    user-select: none;
+}
+.k-icon {
+    font-size: 20px;
+}
+.title {
+    margin-left: 20px;
+    font-weight: bold;
+    font-size: 17px;
+}
+.custom-toolbar {
+    width: 100%;
+    background-color: #f6f6f6;
+    line-height: 10px;
+    border-bottom: inset;
+    border-bottom-width: 1px;
+    padding: 3px 8px;
+    color: #656565;
+}
+.k-drawer-container {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+}
+.k-drawer-content {
+    padding: 10px;
+}
diff --git a/vue-options-api-demos/layout/drawer/templates/content/index.js b/vue-options-api-demos/layout/drawer/templates/content/index.js
new file mode 100644
index 00000000..e69de29b
diff --git a/vue-options-api-demos/layout/drawer/templates/content/main.js b/vue-options-api-demos/layout/drawer/templates/content/main.js
new file mode 100644
index 00000000..0d438a73
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/templates/content/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');
diff --git a/vue-options-api-demos/layout/drawer/templates/content/main.vue b/vue-options-api-demos/layout/drawer/templates/content/main.vue
new file mode 100644
index 00000000..0a282722
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/templates/content/main.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="border-demo">
+    <Drawer
+      :expanded="stateVisible"
+      :position="'start'"
+      :mode="'push'"
+      :navigation-header="'headerTemplate'"
+      :navigation-footer="'footerTemplate'"
+      :navigation-content="'contentTemplate'"
+    >
+      <template v-slot:headerTemplate="{ props }">
+        <div class="custom-header" style="background-color: lightgreen">
+          Header Content
+          <br />
+          <br />
+          <br />
+          <br />
+          <br />
+        </div>
+      </template>
+      <template v-slot:contentTemplate="{ props }">
+        <div class="custom-content" style="background-color: lightyellow">
+          <form>
+            <label class="k-form-field">
+              <span>First Name</span>
+              <KInput placeholder="Your Name"></KInput>
+            </label>
+            <label class="k-form-field">
+              <span>Last Name</span>
+              <KInput placeholder="Your Last Name"></KInput>
+            </label>
+            <label class="k-form-field">
+              <KButton @click="handleClick">Submit</KButton>
+            </label>
+          </form>
+        </div>
+      </template>
+      <template v-slot:footerTemplate="{ props }">
+        <div
+          style="text-align: center; background-color: magenta"
+          class="custom-footer"
+        >
+          Footer Content
+          <KButton @click="handleClick">Collapse Drawer</KButton>
+        </div>
+      </template>
+      <DrawerContent>
+        <KButton class="expand-drawer-btn" @click="handleClick"
+          >Toggle the drawer state</KButton
+        >
+      </DrawerContent>
+    </Drawer>
+  </div>
+</template>
+
+<script>
+import { bellIcon } from '@progress/kendo-svg-icons';
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+import { Input as KInput } from '@progress/kendo-vue-inputs';
+import {
+  Drawer,
+  DrawerContent,
+  DrawerNavigation,
+} from '@progress/kendo-vue-layout';
+
+export default {
+  components: {
+    Drawer,
+    DrawerContent,
+    DrawerNavigation,
+    KButton,
+    KInput,
+  },
+  data() {
+    return {
+      stateVisible: false,
+    };
+  },
+  methods: {
+    handleClick() {
+      this.stateVisible = !this.stateVisible;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/drawer/templates/header-footer/Attachments.vue b/vue-options-api-demos/layout/drawer/templates/header-footer/Attachments.vue
new file mode 100644
index 00000000..c9e8420e
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/templates/header-footer/Attachments.vue
@@ -0,0 +1,14 @@
+<template>
+  <div id="Attachments" class="page attachments-page">
+    <ul>
+      <li>Build enterprise apps</li>
+      <li>Fw: Regarding Multiline textbox</li>
+      <li>Away next week</li>
+      <li>Fw: Your Costume is ready</li>
+      <li>Update completed</li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/drawer/templates/header-footer/Calendar.vue b/vue-options-api-demos/layout/drawer/templates/header-footer/Calendar.vue
new file mode 100644
index 00000000..eae206eb
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/templates/header-footer/Calendar.vue
@@ -0,0 +1,17 @@
+<template>
+  <div id="Calendar" class="page calendar-page">
+    <ul>
+      <li>
+        <h6>11/5 Monday</h6>
+        <p>Martha Birthday</p>
+      </li>
+      <li>
+        <h6>15/6 Sunday</h6>
+        <p>Job interview for internal position</p>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/drawer/templates/header-footer/Favourites.vue b/vue-options-api-demos/layout/drawer/templates/header-footer/Favourites.vue
new file mode 100644
index 00000000..b602c3ec
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/templates/header-footer/Favourites.vue
@@ -0,0 +1,12 @@
+<template>
+  <div id="Favourites" class="page favourites-page">
+    <ul>
+      <li>70% Discount!</li>
+      <li>90% Discount!</li>
+      <li>One time offer!</li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/drawer/templates/header-footer/Inbox.vue b/vue-options-api-demos/layout/drawer/templates/header-footer/Inbox.vue
new file mode 100644
index 00000000..b49cf320
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/templates/header-footer/Inbox.vue
@@ -0,0 +1,23 @@
+<template>
+  <div id="Inbox" class="page inbox-page">
+    <ul>
+      <li>
+        <h6>Monday meeting</h6>
+        <p>
+          Hi Tom, Since Monday I'll be out of office, I'm rescheduling the
+          meeting for Tuesday.
+        </p>
+      </li>
+      <li>
+        <h6>I'm sorry, Tom</h6>
+        <p>
+          Hi Tom, my aunt comes for a visit this Saturday, so I can't come back
+          to St. Pete...
+        </p>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {};
+</script>
diff --git a/vue-options-api-demos/layout/drawer/templates/header-footer/Notifications.vue b/vue-options-api-demos/layout/drawer/templates/header-footer/Notifications.vue
new file mode 100644
index 00000000..abbe59cf
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/templates/header-footer/Notifications.vue
@@ -0,0 +1,14 @@
+<template>
+  <div id="Notifications" class="page notifications-page">
+    <ul>
+      <li>Monday meeting</li>
+      <li>Regarding org chart changes</li>
+      <li>Meeting with Cliff</li>
+      <li>Global Marketing Meeting</li>
+      <li>Out tonight with colleagues?</li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/drawer/templates/header-footer/index.js b/vue-options-api-demos/layout/drawer/templates/header-footer/index.js
new file mode 100644
index 00000000..c8032481
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/templates/header-footer/index.js
@@ -0,0 +1,41 @@
+import { createWebHistory, createRouter } from "vue-router";
+import Inbox from "./Inbox";
+import Notifications from "./Notifications";
+import Attachments from "./Attachments";
+import Favourites from "./Favourites";
+import Calendar from "./Calendar";
+
+const routes = [
+    {
+        path: "/layout/drawer/templates/header-footer/inbox",
+        name: "Inbox",
+        component: Inbox
+    },
+    {
+        path: "/layout/drawer/templates/header-footer/notifications",
+        name: "Notifications",
+        component: Notifications
+    },
+    {
+        path: "/layout/drawer/templates/header-footer/attachments",
+        name: "Attachments",
+        component: Attachments
+    },
+    {
+        path: "/layout/drawer/templates/header-footer/favourites",
+        name: "Favourites",
+        component: Favourites
+    },
+    {
+        path: "/layout/drawer/templates/header-footer/calendar",
+        name: "Calendar",
+        component: Calendar
+    }
+];
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+});
+
+export default router;
diff --git a/vue-options-api-demos/layout/drawer/templates/header-footer/main.js b/vue-options-api-demos/layout/drawer/templates/header-footer/main.js
new file mode 100644
index 00000000..b51f2405
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/templates/header-footer/main.js
@@ -0,0 +1,5 @@
+import { createApp } from "vue";
+import App from "./main.vue";
+import router from "./index.js";
+
+createApp(App).use(router).mount("#app");
diff --git a/vue-options-api-demos/layout/drawer/templates/header-footer/main.vue b/vue-options-api-demos/layout/drawer/templates/header-footer/main.vue
new file mode 100644
index 00000000..2f7ee1ad
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/templates/header-footer/main.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="border-demo">
+    <div class="custom-toolbar">
+      <kbutton :svg-icon="menuIcon" :fill-mode="'flat'" @click="handleClick" />
+      <span class="title">Mail Box</span>
+    </div>
+    <Drawer
+      :expanded="expanded"
+      :position="position"
+      :mode="mode"
+      :items="
+        items.map((item, index) => ({
+          ...item,
+          selected: index === selectedId,
+        }))
+      "
+      @select="onSelect"
+      :navigation-header="'headerTemplate'"
+      :navigation-footer="'footerTemplate'"
+    >
+      <template v-slot:headerTemplate="{ props }">
+        <div class="custom-header">Header Content</div>
+      </template>
+      <template v-slot:footerTemplate="{ props }">
+        <div class="custom-footer">
+          Footer Content
+        </div>
+      </template>
+      <DrawerContent>
+        <router-view />
+      </DrawerContent>
+    </Drawer>
+  </div>
+</template>
+
+<script>
+import { Drawer, DrawerContent } from '@progress/kendo-vue-layout';
+import { Button } from '@progress/kendo-vue-buttons';
+import { menuIcon } from '@progress/kendo-svg-icons';
+
+export default {
+  name: 'App',
+  components: { Drawer, DrawerContent, kbutton: Button },
+  mounted() {
+    this.$router.push(this.items[0].data);
+  },
+  data() {
+    return {
+      menuIcon,
+      items: [
+        {
+          text: 'Inbox',
+          selected: true,
+          data: {
+            path: '/layout/drawer/templates/header-footer/inbox',
+          },
+        },
+        {
+          separator: true,
+        },
+        {
+          text: 'Notifications',
+          data: {
+            path: '/layout/drawer/templates/header-footer/notifications',
+          },
+        },
+        {
+          text: 'Calendar',
+          data: {
+            path: '/layout/drawer/templates/header-footer/calendar',
+          },
+        },
+        {
+          separator: true,
+        },
+        {
+          text: 'Attachments',
+          data: {
+            path: '/layout/drawer/templates/header-footer/attachments',
+          },
+        },
+        {
+          text: 'Favourites',
+          data: {
+            path: '/layout/drawer/templates/header-footer/favourites',
+          },
+        },
+      ],
+      expanded: false,
+      selectedId: 0,
+      position: 'start',
+      mode: 'push',
+    };
+  },
+  methods: {
+    onSelect(e) {
+      this.selectedId = e.itemIndex;
+      this.$router.push(this.items[e.itemIndex].data);
+      this.expanded = !this.expanded;
+    },
+    handleClick() {
+      this.expanded = !this.expanded;
+    },
+  },
+};
+</script>
+
+<style scoped>
+@import './styles.css';
+</style>
diff --git a/vue-options-api-demos/layout/drawer/templates/header-footer/styles.css b/vue-options-api-demos/layout/drawer/templates/header-footer/styles.css
new file mode 100644
index 00000000..5b9933b7
--- /dev/null
+++ b/vue-options-api-demos/layout/drawer/templates/header-footer/styles.css
@@ -0,0 +1,53 @@
+my-app {
+    padding: 0 !important;
+}
+  
+.k-drawer-container {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+}
+.k-drawer-item {
+    user-select: none;
+}
+.k-icon {
+    font-size: 20px;
+}
+.custom-toolbar {
+    width: 100%;
+    background-color: #f6f6f6;
+    line-height: 10px;
+    border-bottom: inset;
+    border-bottom-width: 1px;
+    padding: 3px 8px;
+    color: #656565;
+}
+.mail-box {
+    margin-left: 20px;
+    font-weight: bold;
+    font-size: 17px;
+}
+.page ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+.page li {
+    font-size: 1.2em;
+    background: 0 0;
+    border-radius: 0;
+    border-width: 0 0 1px;
+    border-color: rgba(33, 37, 41, 0.125);
+    border-style: solid;
+    line-height: 1.5em;
+    padding: 1.09em 0.84em 1.23em 0.84em;
+}
+.page li:last-child {
+    border: 0;
+}
+.custom-header,
+.custom-footer {
+  padding: 8px 16px;
+  background-color: #f6f6f6;
+}
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/expansionpanel/animations/data.js b/vue-options-api-demos/layout/expansionpanel/animations/data.js
new file mode 100644
index 00000000..2c7cd0d0
--- /dev/null
+++ b/vue-options-api-demos/layout/expansionpanel/animations/data.js
@@ -0,0 +1,38 @@
+const brazilImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/countries/brazil.jpg';
+const chileImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/countries/chile.jpg';
+const colombiaImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/countries/colombia.jpg';
+const ecuadorImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/countries/ecuador.jpg';
+const guyanaImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/countries/guyana.jpg';
+
+export const data = [{
+    id: 'Brazil',
+    country: 'Brazil',
+    continent: 'South America',
+    imageUrl: brazilImage,
+    text: 'The word “Brazil” likely comes from the Portuguese word for brazilwood, a tree that once grew plentifully along the Brazilian coast. In Portuguese, brazilwood is called pau-brasil, with the word brasil commonly given the etymology “red like an ember”, formed from brasa (“ember”) and the suffix -il (from -iculum or -ilium). As brazilwood produces a deep red dye, it was highly valued by the European textile industry and was the earliest commercially exploited product from Brazil. Throughout the 16th century, massive amounts of brazilwood were harvested by indigenous peoples (mostly Tupi) along the Brazilian coast, who sold the timber to European traders (mostly Portuguese, but also French) in return for assorted European consumer goods.'
+}, {
+    id: 'Chile',
+    country: 'Chile',
+    continent: 'South America',
+    imageUrl: chileImage,
+    text: `There are various theories about the origin of the word Chile. According to 17th-century Spanish chronicler Diego de Rosales, the Incas called the valley
+          of the Aconcagua Chili by corruption of the name of a Picunche tribal chief (cacique) called Tili, who ruled the area at the time of the Incan conquest in the 15th century. Another theory points to the similarity of the valley of the Aconcagua with that of the Casma Valley in Peru, where there was a town and valley named Chili.`
+}, {
+    id: 'Colombia',
+    country: 'Colombia',
+    continent: 'South America',
+    imageUrl: colombiaImage,
+    text: 'The name “Colombia” is derived from the last name of the Italian navigator Christopher Columbus. It was conceived by the Venezuelan revolutionary Francisco de Miranda as a reference to all of the New World, but especially to those portions under Spanish law. The name was later adopted by the Republic of Colombia of 1819, formed from the territories of the old Viceroyalty of New Granada (modern-day Colombia, Panama, Venezuela, Ecuador, and northwest Brazil).'
+}, {
+    id: 'Ecuador',
+    country: 'Ecuador',
+    continent: 'South America',
+    imageUrl: ecuadorImage,
+    text: 'The origin of the name of Ecuador is from Spain. When the Spaniards colonized the land they called it “el ecuador” which translated means “the equator”.'
+}, {
+    id: 'Guyana',
+    country: 'Guyana',
+    continent: 'South America',
+    imageUrl: guyanaImage,
+    text: 'The name “Guyana” derives from Guiana, the original name for the region that formerly included Guyana (British Guiana), Suriname (Dutch Guiana), French Guiana, and parts of Colombia, Venezuela and Brazil. According to the Oxford English Dictionary, “Guyana” comes from an indigenous Amerindian language and means “land of many waters”.'
+}];
diff --git a/vue-options-api-demos/layout/expansionpanel/animations/main.js b/vue-options-api-demos/layout/expansionpanel/animations/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/expansionpanel/animations/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/expansionpanel/animations/main.vue b/vue-options-api-demos/layout/expansionpanel/animations/main.vue
new file mode 100644
index 00000000..53a4b1d4
--- /dev/null
+++ b/vue-options-api-demos/layout/expansionpanel/animations/main.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="k-d-flex k-justify-content-center k-pt-11">
+    <div>
+      <ExpansionPanel
+        v-for="(panel, index) in expansionPanelData"
+        :title="panel.country"
+        :subtitle="panel.continent"
+        :expanded="expanded[panel.id]"
+        :tab-index="index"
+        :key="panel.id"
+        @action="(ev) => handleAction(ev, panel.id)"
+      >
+        <Reveal
+          :appear="expanded[panel.id]"
+          :transition-enter-duration="150"
+          :transition-exit-duration="150"
+        >
+          <ExpansionPanelContent v-if="expanded">
+            <div class="content">
+              <div class="image-container">
+                <img :src="panel.imageUrl" :alt="panel.country" />
+              </div>
+              <span class="content-text">{{ panel.text }}</span>
+            </div>
+          </ExpansionPanelContent>
+        </Reveal>
+      </ExpansionPanel>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  ExpansionPanel,
+  ExpansionPanelContent,
+} from '@progress/kendo-vue-layout';
+
+import { Reveal } from '@progress/kendo-vue-animation';
+import { data } from './data.js';
+import './styles.css';
+
+export default {
+  components: {
+    ExpansionPanel,
+    ExpansionPanelContent,
+    Reveal,
+  },
+  data() {
+    return {
+      expanded: [false, false, false, false, false],
+      expansionPanelData: data,
+    };
+  },
+  methods: {
+    handleAction(ev, itemId) {
+      this.expanded[itemId] = !this.expanded[itemId];
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/expansionpanel/animations/styles.css b/vue-options-api-demos/layout/expansionpanel/animations/styles.css
new file mode 100644
index 00000000..54592767
--- /dev/null
+++ b/vue-options-api-demos/layout/expansionpanel/animations/styles.css
@@ -0,0 +1,27 @@
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.k-expander {
+    width: 600px;
+}
+
+.content {
+    display: flex;
+}
+
+.image-container {
+    height: 250px;
+    margin-right: 20px;
+}
+
+img {
+    height: 100%;
+}
+
+.content-text {
+    display: block;
+    text-align: justify;
+}
diff --git a/vue-options-api-demos/layout/expansionpanel/disabled/main.js b/vue-options-api-demos/layout/expansionpanel/disabled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/expansionpanel/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/expansionpanel/disabled/main.vue b/vue-options-api-demos/layout/expansionpanel/disabled/main.vue
new file mode 100644
index 00000000..e221df45
--- /dev/null
+++ b/vue-options-api-demos/layout/expansionpanel/disabled/main.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="k-d-flex k-justify-content-center k-pt-11">
+    <ExpansionPanel
+      :style="{ width: '450px' }"
+      :title="'Chile'"
+      :subtitle="'South America'"
+      :disabled="true"
+      :expanded="expanded"
+      @action="handleAction"
+    >
+      <Reveal :appear="expanded">
+        <ExpansionPanelContent v-if="expanded">
+          There are various theories about the origin of the word Chile.
+          According to 17th-century Spanish chronicler Diego de Rosales, the
+          Incas called the valley of the Aconcagua Chili by corruption of the
+          name of a Picunche tribal chief (cacique) called Tili, who ruled the
+          area at the time of the Incan conquest in the 15th century. Another
+          theory points to the similarity of the valley of the Aconcagua with
+          that of the Casma Valley in Peru, where there was a town and valley
+          named Chili.
+        </ExpansionPanelContent>
+      </Reveal>
+    </ExpansionPanel>
+  </div>
+</template>
+<script>
+import {
+  ExpansionPanel,
+  ExpansionPanelContent,
+} from '@progress/kendo-vue-layout';
+
+import { Reveal } from '@progress/kendo-vue-animation';
+
+export default {
+  components: {
+    ExpansionPanel,
+    ExpansionPanelContent,
+    Reveal,
+  },
+  data() {
+    return {
+      expanded: false,
+    };
+  },
+  methods: {
+    handleAction(ev) {
+      this.expanded = !ev.expanded;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/expansionpanel/events/Logger.vue b/vue-options-api-demos/layout/expansionpanel/events/Logger.vue
new file mode 100644
index 00000000..ae76e60a
--- /dev/null
+++ b/vue-options-api-demos/layout/expansionpanel/events/Logger.vue
@@ -0,0 +1,43 @@
+<template>
+    <div class="example-config">
+        <h5>{{ title }}</h5>
+        <ul class="event-log">
+            <li v-for="(event, idx) in events" :key="idx">{{ events.length - idx }}. {{ event }}</li>
+        </ul>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        events: Array,
+        title: String,
+    },
+};
+</script>
+
+<style>
+.example-config {
+    margin: 0 0 20px;
+    padding: 20px;
+    background-color: rgba(0, 0, 0, 0.03);
+    border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+    margin: 0;
+    padding: 0;
+    max-height: 100px;
+    overflow-y: auto;
+    list-style-type: none;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    background-color: white;
+}
+.event-log li {
+    margin: 0;
+    padding: 0.3em;
+    line-height: 1.2em;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+    margin-bottom: -1px;
+}
+</style>
diff --git a/vue-options-api-demos/layout/expansionpanel/events/data.js b/vue-options-api-demos/layout/expansionpanel/events/data.js
new file mode 100644
index 00000000..e375e7c2
--- /dev/null
+++ b/vue-options-api-demos/layout/expansionpanel/events/data.js
@@ -0,0 +1,28 @@
+const brazilImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/countries/brazil.jpg';
+const chileImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/countries/chile.jpg';
+const colombiaImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/countries/colombia.jpg';
+
+export const data = [
+    {
+        id: 'Brazil',
+        country: 'Brazil',
+        continent: 'South America',
+        imageUrl: brazilImage,
+        text: 'The word “Brazil” likely comes from the Portuguese word for brazilwood, a tree that once grew plentifully along the Brazilian coast. In Portuguese, brazilwood is called pau-brasil, with the word brasil commonly given the etymology “red like an ember”, formed from brasa (“ember”) and the suffix -il (from -iculum or -ilium). As brazilwood produces a deep red dye, it was highly valued by the European textile industry and was the earliest commercially exploited product from Brazil. Throughout the 16th century, massive amounts of brazilwood were harvested by indigenous peoples (mostly Tupi) along the Brazilian coast, who sold the timber to European traders (mostly Portuguese, but also French) in return for assorted European consumer goods.',
+    },
+    {
+        id: 'Chile',
+        country: 'Chile',
+        continent: 'South America',
+        imageUrl: chileImage,
+        text: `There are various theories about the origin of the word Chile. According to 17th-century Spanish chronicler Diego de Rosales, the Incas called the valley
+          of the Aconcagua Chili by corruption of the name of a Picunche tribal chief (cacique) called Tili, who ruled the area at the time of the Incan conquest in the 15th century. Another theory points to the similarity of the valley of the Aconcagua with that of the Casma Valley in Peru, where there was a town and valley named Chili.`,
+    },
+    {
+        id: 'Colombia',
+        country: 'Colombia',
+        continent: 'South America',
+        imageUrl: colombiaImage,
+        text: 'The name “Colombia” is derived from the last name of the Italian navigator Christopher Columbus. It was conceived by the Venezuelan revolutionary Francisco de Miranda as a reference to all of the New World, but especially to those portions under Spanish law. The name was later adopted by the Republic of Colombia of 1819, formed from the territories of the old Viceroyalty of New Granada (modern-day Colombia, Panama, Venezuela, Ecuador, and northwest Brazil).',
+    },
+];
diff --git a/vue-options-api-demos/layout/expansionpanel/events/main.js b/vue-options-api-demos/layout/expansionpanel/events/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/expansionpanel/events/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/expansionpanel/events/main.vue b/vue-options-api-demos/layout/expansionpanel/events/main.vue
new file mode 100644
index 00000000..e35854a4
--- /dev/null
+++ b/vue-options-api-demos/layout/expansionpanel/events/main.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="k-d-flex k-justify-content-center k-pt-11">
+      <div>
+        <ExpansionPanel
+          v-for="(panel, index) in expansionPanelData"
+          :title="panel.country"
+          :subtitle="panel.continent"
+          :expanded="expanded[panel.id]"
+          :tab-index="index"
+          :key="panel.id"
+          @action="(ev) => handleAction(ev, panel.id)"
+        >
+          <Reveal :appear="expanded[panel.id]">
+            <ExpansionPanelContent v-if="expanded">
+              <div class="content">
+                <div class="image-container">
+                  <img :src="panel.imageUrl" :alt="panel.country" />
+                </div>
+                <span class="content-text">{{ panel.text }}</span>
+              </div>
+            </ExpansionPanelContent>
+          </Reveal>
+        </ExpansionPanel>
+      </div>
+    </div>
+    <br />
+    <br />
+    <Logger :title="'Events list'" :events="eventsList" />
+  </div>
+</template>
+<script>
+import {
+  ExpansionPanel,
+  ExpansionPanelContent,
+} from '@progress/kendo-vue-layout';
+import Logger from './Logger.vue';
+
+import { Reveal } from '@progress/kendo-vue-animation';
+import { data } from './data.js';
+import './styles.css';
+
+export default {
+  components: {
+    ExpansionPanel,
+    ExpansionPanelContent,
+    Reveal,
+    Logger,
+  },
+  data() {
+    return {
+      expanded: [false, false, false, false, false],
+      expansionPanelData: data,
+      events: [],
+    };
+  },
+  methods: {
+    handleAction(ev, itemId) {
+      let expandedItems = this.expanded.slice();
+      expandedItems = expandedItems.map((el) => (el = false));
+      expandedItems[itemId] = !this.expanded[itemId];
+      this.expanded = expandedItems;
+
+      this.events.unshift(
+        'Action event triggered for item: ' +
+          ev.event.target.firstElementChild.innerText
+      );
+    },
+  },
+  computed: {
+    eventsList() {
+      return this.events;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/expansionpanel/events/styles.css b/vue-options-api-demos/layout/expansionpanel/events/styles.css
new file mode 100644
index 00000000..fef260d9
--- /dev/null
+++ b/vue-options-api-demos/layout/expansionpanel/events/styles.css
@@ -0,0 +1,28 @@
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .k-expander {
+    width: 480px;
+  }
+  
+  .content {
+    display: flex;
+  }
+  
+  .image-container {
+    height: 250px;
+    margin-right: 20px;
+  }
+  
+  img {
+    height: 100%;
+  }
+  
+  .content-text {
+    display: block;
+    text-align: justify;
+  }
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/expansionpanel/icons/main.js b/vue-options-api-demos/layout/expansionpanel/icons/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/expansionpanel/icons/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/expansionpanel/icons/main.vue b/vue-options-api-demos/layout/expansionpanel/icons/main.vue
new file mode 100644
index 00000000..cd15d50f
--- /dev/null
+++ b/vue-options-api-demos/layout/expansionpanel/icons/main.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="k-d-flex k-justify-content-center k-pt-11">
+    <div :style="{ display: 'flex' }">
+      <div class="section-icons-expansionpanel">
+        <div class="label-icons-expansionpanel">Custom Kendo UI for Vue Icons</div>
+        <ExpansionPanel
+          :style="{ width: '280px' }"
+          :title="'Colombia'"
+          :expanded="expanded"
+          :expand-icon="'arrow-seek-down'"
+          :collapse-icon="'arrow-seek-up'"
+          @action="handleAction"
+        >
+          <Reveal :appear="expanded">
+            <ExpansionPanelContent v-if="expanded">
+              The name “Colombia” is derived from the last name of the Italian
+              navigator Christopher Columbus. It was conceived by the Venezuelan
+              revolutionary Francisco de Miranda as a reference to all of the
+              New World, but especially to those portions under Spanish law. The
+              name was later adopted by the Republic of Colombia of 1819, formed
+              from the territories of the old Viceroyalty of New Granada
+              (modern-day Colombia, Panama, Venezuela, Ecuador, and northwest
+              Brazil).
+            </ExpansionPanelContent>
+          </Reveal>
+        </ExpansionPanel>
+      </div>
+      <div class="section-icons-expansionpanel">
+        <div class="label-icons-expansionpanel">Custom Font Awesome Icons</div>
+
+        <ExpansionPanel
+          :style="{ width: '280px' }"
+          :title="'Colombia'"
+          :expanded="expanded"
+          :expand-icon="'fa fa-plus'"
+          :collapse-icon="'fa fa-minus'"
+          @action="handleAction"
+        >
+          <Reveal :appear="expanded">
+            <ExpansionPanelContent v-if="expanded">
+              The name “Colombia” is derived from the last name of the Italian
+              navigator Christopher Columbus. It was conceived by the Venezuelan
+              revolutionary Francisco de Miranda as a reference to all of the
+              New World, but especially to those portions under Spanish law. The
+              name was later adopted by the Republic of Colombia of 1819, formed
+              from the territories of the old Viceroyalty of New Granada
+              (modern-day Colombia, Panama, Venezuela, Ecuador, and northwest
+              Brazil).
+            </ExpansionPanelContent>
+          </Reveal>
+        </ExpansionPanel>
+      </div>
+    </div>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+  </div>
+</template>
+<script>
+import {
+    ExpansionPanel,
+    ExpansionPanelContent,
+} from '@progress/kendo-vue-layout';
+
+import { Reveal } from '@progress/kendo-vue-animation';
+
+export default {
+    components: {
+        ExpansionPanel,
+        ExpansionPanelContent,
+        Reveal,
+    },
+    data() {
+        return {
+            expanded: false,
+        };
+    },
+    methods: {
+        handleAction(ev) {
+            this.expanded = !ev.expanded;
+        },
+    },
+};
+</script>
+<style>
+.label-icons-expansionpanel {
+  margin: 10px;
+  font-weight: 600;
+}
+
+.section-icons-expansionpanel {
+  min-width: 320px;
+  padding: 10px;
+}
+</style>
diff --git a/vue-options-api-demos/layout/expansionpanel/overview/data.js b/vue-options-api-demos/layout/expansionpanel/overview/data.js
new file mode 100644
index 00000000..2c7cd0d0
--- /dev/null
+++ b/vue-options-api-demos/layout/expansionpanel/overview/data.js
@@ -0,0 +1,38 @@
+const brazilImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/countries/brazil.jpg';
+const chileImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/countries/chile.jpg';
+const colombiaImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/countries/colombia.jpg';
+const ecuadorImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/countries/ecuador.jpg';
+const guyanaImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/countries/guyana.jpg';
+
+export const data = [{
+    id: 'Brazil',
+    country: 'Brazil',
+    continent: 'South America',
+    imageUrl: brazilImage,
+    text: 'The word “Brazil” likely comes from the Portuguese word for brazilwood, a tree that once grew plentifully along the Brazilian coast. In Portuguese, brazilwood is called pau-brasil, with the word brasil commonly given the etymology “red like an ember”, formed from brasa (“ember”) and the suffix -il (from -iculum or -ilium). As brazilwood produces a deep red dye, it was highly valued by the European textile industry and was the earliest commercially exploited product from Brazil. Throughout the 16th century, massive amounts of brazilwood were harvested by indigenous peoples (mostly Tupi) along the Brazilian coast, who sold the timber to European traders (mostly Portuguese, but also French) in return for assorted European consumer goods.'
+}, {
+    id: 'Chile',
+    country: 'Chile',
+    continent: 'South America',
+    imageUrl: chileImage,
+    text: `There are various theories about the origin of the word Chile. According to 17th-century Spanish chronicler Diego de Rosales, the Incas called the valley
+          of the Aconcagua Chili by corruption of the name of a Picunche tribal chief (cacique) called Tili, who ruled the area at the time of the Incan conquest in the 15th century. Another theory points to the similarity of the valley of the Aconcagua with that of the Casma Valley in Peru, where there was a town and valley named Chili.`
+}, {
+    id: 'Colombia',
+    country: 'Colombia',
+    continent: 'South America',
+    imageUrl: colombiaImage,
+    text: 'The name “Colombia” is derived from the last name of the Italian navigator Christopher Columbus. It was conceived by the Venezuelan revolutionary Francisco de Miranda as a reference to all of the New World, but especially to those portions under Spanish law. The name was later adopted by the Republic of Colombia of 1819, formed from the territories of the old Viceroyalty of New Granada (modern-day Colombia, Panama, Venezuela, Ecuador, and northwest Brazil).'
+}, {
+    id: 'Ecuador',
+    country: 'Ecuador',
+    continent: 'South America',
+    imageUrl: ecuadorImage,
+    text: 'The origin of the name of Ecuador is from Spain. When the Spaniards colonized the land they called it “el ecuador” which translated means “the equator”.'
+}, {
+    id: 'Guyana',
+    country: 'Guyana',
+    continent: 'South America',
+    imageUrl: guyanaImage,
+    text: 'The name “Guyana” derives from Guiana, the original name for the region that formerly included Guyana (British Guiana), Suriname (Dutch Guiana), French Guiana, and parts of Colombia, Venezuela and Brazil. According to the Oxford English Dictionary, “Guyana” comes from an indigenous Amerindian language and means “land of many waters”.'
+}];
diff --git a/vue-options-api-demos/layout/expansionpanel/overview/main.js b/vue-options-api-demos/layout/expansionpanel/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/expansionpanel/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/expansionpanel/overview/main.vue b/vue-options-api-demos/layout/expansionpanel/overview/main.vue
new file mode 100644
index 00000000..0f889cd6
--- /dev/null
+++ b/vue-options-api-demos/layout/expansionpanel/overview/main.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="k-d-flex k-justify-content-center k-pt-11">
+    <div>
+      <ExpansionPanel
+        v-for="(panel, index) in expansionPanelData"
+        :title="panel.country"
+        :subtitle="panel.continent"
+        :expanded="expanded[panel.id]"
+        :tab-index="index"
+        :key="panel.id"
+        @action="(ev) => handleAction(ev, panel.id)"
+      >
+        <Reveal :appear="expanded[panel.id]">
+          <ExpansionPanelContent v-if="expanded">
+            <div class="content">
+              <div class="image-container">
+                <img :src="panel.imageUrl" :alt="panel.country" />
+              </div>
+              <span class="content-text">{{ panel.text }}</span>
+            </div>
+          </ExpansionPanelContent>
+        </Reveal>
+      </ExpansionPanel>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  ExpansionPanel,
+  ExpansionPanelContent,
+} from '@progress/kendo-vue-layout';
+
+import { Reveal } from '@progress/kendo-vue-animation';
+import { data } from './data.js';
+import './styles.css';
+
+export default {
+  components: {
+    ExpansionPanel,
+    ExpansionPanelContent,
+    Reveal,
+  },
+  data() {
+    return {
+      expanded: [false, false, false, false, false],
+      expansionPanelData: data,
+    };
+  },
+  methods: {
+    handleAction(ev, itemId) {
+      let expandedItems = this.expanded.slice();
+      expandedItems = expandedItems.map((el) => (el = false));
+      expandedItems[itemId] = !this.expanded[itemId];
+      this.expanded = expandedItems;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/expansionpanel/overview/styles.css b/vue-options-api-demos/layout/expansionpanel/overview/styles.css
new file mode 100644
index 00000000..54592767
--- /dev/null
+++ b/vue-options-api-demos/layout/expansionpanel/overview/styles.css
@@ -0,0 +1,27 @@
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.k-expander {
+    width: 600px;
+}
+
+.content {
+    display: flex;
+}
+
+.image-container {
+    height: 250px;
+    margin-right: 20px;
+}
+
+img {
+    height: 100%;
+}
+
+.content-text {
+    display: block;
+    text-align: justify;
+}
diff --git a/vue-options-api-demos/layout/get-started/main.js b/vue-options-api-demos/layout/get-started/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/get-started/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/get-started/main.vue b/vue-options-api-demos/layout/get-started/main.vue
new file mode 100644
index 00000000..3ca34e19
--- /dev/null
+++ b/vue-options-api-demos/layout/get-started/main.vue
@@ -0,0 +1,44 @@
+<template>
+    <div class="panelbar-wrapper">
+      <PanelBar :expand-mode="'single'" :items="items">
+        <template v-slot:competitionOverview>
+          <div style="padding: 10px">
+            A very demanding competition with more than 5000 participants.
+          </div>
+        </template>
+      </PanelBar>
+    </div>
+  </template>
+  
+  <script>
+  import { PanelBar } from '@progress/kendo-vue-layout';
+  
+  export default {
+    components: {
+      PanelBar,
+    },
+    data() {
+      return {
+        items: [
+          {
+            title: 'Competition',
+            content: 'competitionOverview',
+          },
+          {
+            title: 'Winners',
+            items: [
+              { title: 'Winners 2022' },
+              { title: 'Winner 2021' },
+              { title: 'Winner 2020' },
+            ],
+          },
+        ],
+      };
+    },
+  };
+  </script>
+  <style>
+  .k-content {
+    padding: 4px 8px;
+  }
+  </style>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/globalization/AccountDetails.vue b/vue-options-api-demos/layout/globalization/AccountDetails.vue
new file mode 100644
index 00000000..6fa74202
--- /dev/null
+++ b/vue-options-api-demos/layout/globalization/AccountDetails.vue
@@ -0,0 +1,90 @@
+<template>
+  <form-element>
+    <fieldset
+      class="k-form-fieldset"
+      :style="{
+        width: '500px',
+      }"
+    >
+      <field
+        :id="'username'"
+        :name="'username'"
+        :label="'Username'"
+        :component="'myTemplate'"
+        :validator="userNameValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          />
+        </template>
+      </field>
+      <field
+        :id="'email'"
+        :name="'email'"
+        :label="'Email'"
+        :hint="'Hint: Enter your personal email address.'"
+        :component="'myTemplate'"
+        :validator="emailValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></forminput>
+        </template>
+      </field>
+      <field
+        :id="'password'"
+        :name="'password'"
+        :label="'Password'"
+        :component="'myTemplate'"
+        :type="'password'"
+        :hint="'Hint: enter alphanumeric characters only.'"
+        :validator="passwordValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></forminput>
+        </template>
+      </field>
+    </fieldset>
+  </form-element>
+</template>
+<script>
+import { Field, FormElement } from '@progress/kendo-vue-form';
+import FormInput from './FormInput.vue';
+
+import {
+  emailValidator,
+  userNameValidator,
+  passwordValidator,
+} from './validators';
+
+export default {
+  components: {
+    field: Field,
+    'form-element': FormElement,
+    forminput: FormInput,
+  },
+  inject: {
+    kendoForm: { default: {} },
+  },
+  data: function () {
+    return {
+      emailValidator,
+      userNameValidator,
+      passwordValidator,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/globalization/AvatarComponent.vue b/vue-options-api-demos/layout/globalization/AvatarComponent.vue
new file mode 100644
index 00000000..f6ce7c44
--- /dev/null
+++ b/vue-options-api-demos/layout/globalization/AvatarComponent.vue
@@ -0,0 +1,131 @@
+<template>
+  <div :class="'avatar-container'">
+    <div :class="'contact-list'">Contacts</div>
+    <div :class="'contacts-wrapper'">
+      <div v-for="(contact, index) in contactInitials" :key="index">
+        <div class="k-hbox">
+          <avatar :rounded="'full'" :type="'icon'">
+            {{ contact.avatar }}
+          </avatar>
+          <div style="margin-left: 10px">
+            <h2 :class="'contact-name'">
+              {{ contact.name }}
+            </h2>
+            <p :class="'contact-position'">
+              {{ contact.position }}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div v-for="(contact, index) in contactImages" :key="index">
+        <div class="k-hbox">
+          <avatar :rounded="'full'" :type="'image'">
+            <img :src="contact.avatar" :eager="true" :alt="'Avatar Image'" />
+          </avatar>
+          <div style="margin-left: 10px">
+            <h2 :class="'contact-name'">
+              {{ contact.name }}
+            </h2>
+            <p :class="'contact-position'">
+              {{ contact.position }}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div class="k-hbox">
+        <avatar :rounded="'full'" :type="'icon'">
+          <SvgIcon :icon="userIcon"></SvgIcon>
+        </avatar>
+        <div style="margin-left: 10px">
+          <h2 :class="'contact-name'">Unknown</h2>
+          <p :class="'contact-position'">Not specified</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+
+import { Avatar } from '@progress/kendo-vue-layout';
+import { SvgIcon } from '@progress/kendo-vue-common';
+import { userIcon } from '@progress/kendo-svg-icons';
+
+const firstContactImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/RICSU.jpg';
+const secondContactImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/GOURL.jpg';
+
+const contactImages = [
+  {
+    avatar: firstContactImage,
+    name: 'Michael Holz',
+    position: 'Manager',
+  },
+  {
+    avatar: secondContactImage,
+    name: 'André Stewart',
+    position: 'Product Manager',
+  },
+];
+const contactInitials = [
+  {
+    avatar: 'JS',
+    name: 'Jason Smith',
+    position: 'UX Designer',
+  },
+  {
+    avatar: 'GP',
+    name: 'George Porter',
+    position: 'Software Engineer',
+  },
+];
+
+export default {
+  components: {
+    avatar: Avatar,
+    SvgIcon,
+  },
+  data: function () {
+    return {
+      userIcon,
+      contactImages: contactImages,
+      contactInitials: contactInitials,
+    };
+  },
+};
+</script>
+
+<style>
+.avatar-container {
+  width: 280px;
+  margin: auto;
+  padding: 4px 10px;
+  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.26),
+    0px 2px 2px 0px rgba(0, 0, 0, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.08);
+}
+
+.contact-position {
+  margin: 0px;
+  font-size: 0.8em;
+}
+
+.contact-name {
+  font-size: 1.3em;
+  font-weight: normal;
+  margin: 0px;
+}
+
+.contact-list {
+  text-align: center;
+  padding: 4px;
+  font-size: 20px;
+}
+
+.contacts-wrapper {
+  padding: 8px 14px;
+  margin-bottom: 4px;
+  box-shadow: 0px 1px 2px #ccc;
+}
+</style>
diff --git a/vue-options-api-demos/layout/globalization/CardComponent.vue b/vue-options-api-demos/layout/globalization/CardComponent.vue
new file mode 100644
index 00000000..a7b1ab18
--- /dev/null
+++ b/vue-options-api-demos/layout/globalization/CardComponent.vue
@@ -0,0 +1,60 @@
+<template>
+    <card
+      style='width: 300px; margin: auto;'
+    >
+      <cardImage :src="barcelonaImage" />
+      <cardHeader>
+        <cardTitle>Barcelona</cardTitle>
+      </cardHeader>
+      <cardBody>
+        <p>
+          Barcelona, the cosmopolitan capital of Spain's Catalonia region, is
+          known for its art and architecture.
+        </p>
+        <p>
+          The fantastical Sagrada Família church and other modernist landmarks
+          designed by Antoni Gaudí dot the city.
+        </p>
+      </cardBody>
+      <cardActions>
+        <span>
+          <kbutton :theme-color="'primary'">Map</kbutton>
+        </span>
+        <span>
+          <kbutton :theme-color="'primary'">Weather</kbutton>
+        </span>
+      </cardActions>
+    </card>
+</template>
+
+<script>
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  CardTitle,
+  CardImage,
+  CardActions,
+} from "@progress/kendo-vue-layout";
+import { Button } from '@progress/kendo-vue-buttons';
+
+const barcelonaImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/card/barcelona.jpg';
+
+export default {
+  components:{
+    card: Card,
+    cardHeader: CardHeader,
+    cardBody: CardBody,
+    cardTitle: CardTitle,
+    cardImage: CardImage,
+    cardActions: CardActions,
+      'kbutton': Button
+  },
+  data(){
+    return {
+      barcelonaImage
+    }
+  }
+}
+
+</script>
diff --git a/vue-options-api-demos/layout/globalization/FormInput.vue b/vue-options-api-demos/layout/globalization/FormInput.vue
new file mode 100644
index 00000000..e9551d6f
--- /dev/null
+++ b/vue-options-api-demos/layout/globalization/FormInput.vue
@@ -0,0 +1,90 @@
+<template>
+  <fieldwrapper>
+    <klabel
+      :class="'k-form-label'"
+      :editor-id="id"
+      :editor-valid="valid"
+      :disabled="disabled"
+      :optional="optional"
+    >
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <kinput
+        :valid="valid"
+        :id="id"
+        :value="value"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :type="type"
+        @input="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { Input } from '@progress/kendo-vue-inputs';
+export default {
+  props: {
+    optional: Boolean,
+    disabled: Boolean,
+    placeholder: String,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: String,
+      default: '',
+    },
+    type: String,
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    kinput: Input,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/globalization/MenuComponent.vue b/vue-options-api-demos/layout/globalization/MenuComponent.vue
new file mode 100644
index 00000000..8d7af4b5
--- /dev/null
+++ b/vue-options-api-demos/layout/globalization/MenuComponent.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="" style="width: 500px; margin: auto">
+    <div>
+      <kendo-menu :items="items"> </kendo-menu>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Menu } from "@progress/kendo-vue-layout";
+
+export default {
+  components: {
+    "kendo-menu": Menu,
+  },
+  data: function () {
+    return {
+      items: [
+        {
+          text: "Invasion Games",
+          items: [{ text: "Hockey" }, { text: "Soccer" }, { text: "Rugby" }],
+        },
+        {
+          text: "Net & Court Games",
+          items: [
+            { text: "Badminton" },
+            { text: "Squash" },
+            { text: "Tennis" },
+            { text: "Table Tennis" },
+            { text: "Volleyball" },
+          ],
+        },
+        {
+          text: "Target Games",
+          items: [
+            { text: "Golf" },
+            { text: "Lawn bowls" },
+            { text: "Tenpin bowling" },
+          ],
+        },
+      ],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/globalization/PanelBarComponent.vue b/vue-options-api-demos/layout/globalization/PanelBarComponent.vue
new file mode 100644
index 00000000..6d19275d
--- /dev/null
+++ b/vue-options-api-demos/layout/globalization/PanelBarComponent.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="panelbar-wrapper">
+    <PanelBar :expand-mode="'single'" :items="items">
+    </PanelBar>
+  </div>
+</template>
+
+<script>
+import { PanelBar } from '@progress/kendo-vue-layout';
+import './panelbar-styles.css';
+
+export default {
+  components: {
+    PanelBar,
+  },
+  data() {
+    return {
+      items: [
+        {
+          title: 'Projects',
+          items: [
+            { title: 'New Business Plan' },
+            {
+              title: 'Sales Forecasts',
+              items: [
+                { title: 'Q1 Forecast' },
+                { title: 'Q2 Forecast' },
+                { title: 'Q3 Forecast' },
+                { title: 'Q4 Forecast' },
+              ],
+            },
+            { title: 'Sales Reports' },
+          ],
+        },
+        {
+          title: 'Programs',
+          items: [
+            { title: 'Monday' },
+            { title: 'Tuesday' },
+            { title: 'Wednesday' },
+            { title: 'Thursday' },
+            { title: 'Friday' },
+          ],
+        },
+        { title: 'Communication', disabled: true },
+      ],
+    };
+  }
+};
+</script>
diff --git a/vue-options-api-demos/layout/globalization/PersonalDetails.vue b/vue-options-api-demos/layout/globalization/PersonalDetails.vue
new file mode 100644
index 00000000..cb1ae7fd
--- /dev/null
+++ b/vue-options-api-demos/layout/globalization/PersonalDetails.vue
@@ -0,0 +1,64 @@
+<template>
+  <form-element>
+    <fieldset
+      class="k-form-fieldset"
+      :style="{
+        width: '500px',
+      }"
+    >
+      <field
+        :id="'firstName'"
+        :name="'firstName'"
+        :label="'First Name'"
+        :component="'myTemplate'"
+        :validator="requiredValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          />
+        </template>
+      </field>
+      <field
+        :id="'lastName'"
+        :name="'lastName'"
+        :label="'Last Name'"
+        :component="'myTemplate'"
+        :validator="requiredValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          />
+        </template>
+      </field>
+    </fieldset>
+  </form-element>
+</template>
+<script>
+import { Field, FormElement } from '@progress/kendo-vue-form';
+import FormInput from './FormInput.vue';
+import { requiredValidator } from './validators';
+
+export default {
+  components: {
+    field: Field,
+    'form-element': FormElement,
+    forminput: FormInput,
+  },
+  inject: {
+    kendoForm: { default: {} },
+  },
+  data: function () {
+    return {
+      requiredValidator,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/globalization/RegisterComponent.vue b/vue-options-api-demos/layout/globalization/RegisterComponent.vue
new file mode 100644
index 00000000..a4f81426
--- /dev/null
+++ b/vue-options-api-demos/layout/globalization/RegisterComponent.vue
@@ -0,0 +1,14 @@
+<template>
+  <form-element>
+    <h3>Click on the "Register" button to complete your registration.</h3>
+  </form-element>
+</template>
+<script>
+import { FormElement } from '@progress/kendo-vue-form';
+
+export default {
+  components: {
+    'form-element': FormElement,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/globalization/SplitterComponent.vue b/vue-options-api-demos/layout/globalization/SplitterComponent.vue
new file mode 100644
index 00000000..dd2306f9
--- /dev/null
+++ b/vue-options-api-demos/layout/globalization/SplitterComponent.vue
@@ -0,0 +1,76 @@
+<template>
+  <Splitter
+    :style="{ height: '340px' }"
+    :panes="panes"
+    :orientation="'vertical'"
+    @change="onChange"
+  >
+    <template v-slot:first>
+      <Splitter :panes="innerPanes" @change="onInnerChange">
+        <template v-slot:left>
+          <div class="pane-content">
+            <h3>Inner splitter / left pane</h3>
+            <p>Resizable and collapsible.</p>
+          </div>
+        </template>
+        <template v-slot:center>
+          <div class="pane-content">
+            <h3>Inner splitter / center pane</h3>
+            <p>Resizable only.</p>
+          </div>
+        </template>
+        <template v-slot:right>
+          <div class="pane-content">
+            <h3>Inner splitter / right pane</h3>
+            <p>Resizable and collapsible.</p>
+          </div>
+        </template>
+      </Splitter>
+    </template>
+    <template v-slot:second>
+      <div class="pane-content">
+        <h3>Outer splitter / Middle pane</h3>
+        <p>Resizable only.</p>
+      </div>
+    </template>
+    <template v-slot:third>
+      <div class="pane-content">
+        <h3>Outer splitter / Middle pane</h3>
+        <p>Resizable only.</p>
+      </div>
+    </template>
+  </Splitter>
+</template>
+
+<script>
+import { Splitter } from '@progress/kendo-vue-layout';
+import './styles.css';
+
+export default {
+  components: {
+    Splitter,
+  },
+  data() {
+    return {
+      panes: [
+        { size: '40%', containsSplitter: true, content: 'first' },
+        { content: 'second' },
+        { size: '30%', resizable: false, content: 'third' },
+      ],
+      innerPanes: [
+        { size: '20%', min: '20px', collapsible: true, content: 'left' },
+        { content: 'center' },
+        { size: '30%', min: '20px', collapsible: true, content: 'right' },
+      ],
+    };
+  },
+  methods: {
+    onChange(event) {
+      this.panes = event.newState;
+    },
+    onInnerChange(event) {
+      this.innerPanes = event.newState;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/globalization/StepperComponent.vue b/vue-options-api-demos/layout/globalization/StepperComponent.vue
new file mode 100644
index 00000000..6bbe466c
--- /dev/null
+++ b/vue-options-api-demos/layout/globalization/StepperComponent.vue
@@ -0,0 +1,38 @@
+
+<template>
+  <Stepper :value="value" @change="handleChange" :items="items" :dir="'rtl'" />
+</template>
+
+<script>
+import { Stepper } from "@progress/kendo-vue-layout";
+export default {
+  components: {
+    Stepper,
+  },
+  data() {
+    return {
+      value: 0,
+      items: [
+        {
+          label: "Account Info",
+          icon: "lock",
+        },
+        {
+          label: "Personal Info",
+          icon: "user",
+        },
+        {
+          label: "Payment Details",
+          icon: "track-changes",
+          optional: true,
+        },
+      ],
+    };
+  },
+  methods: {
+    handleChange(e) {
+      this.value = e.value;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/globalization/TabStripComponent.vue b/vue-options-api-demos/layout/globalization/TabStripComponent.vue
new file mode 100644
index 00000000..07a34d77
--- /dev/null
+++ b/vue-options-api-demos/layout/globalization/TabStripComponent.vue
@@ -0,0 +1,150 @@
+<template>
+    <TabStrip :selected="selected" @select="onSelect" :tabs="tabs">
+        <template v-slot:Paris>
+            <div>
+                <span class="rainy">
+                    <img :src="rainyImage" />
+                </span>
+                <div class="weather">
+                    <h2>17<span>&ordm;C</span></h2>
+                    <p>Rainy weather in Paris.</p>
+                </div>
+                <p class="info">City info</p>
+                <p>
+                    Paris is the capital and most populous city of France. It has an area
+                    of 105 square kilometres (41 square miles) and a population in 2013 of
+                    2,229,621 within its administrative limits. The city is both a commune
+                    and department, and forms the centre and headquarters of the
+                    Île-de-France, or Paris Region, which has an area of 12,012 square
+                    kilometres (4,638 square miles) and a population in 2014 of
+                    12,005,077, comprising 18.2 percent of the population of France.
+                </p>
+            </div>
+        </template>
+        <template v-slot:NewYork>
+            <div>
+                <span class="sunny">
+                    <img :src="sunnyImage" />
+                </span>
+                <div class="weather">
+                    <h2>29<span>&ordm;C</span></h2>
+                    <p>Sunny weather in New York.</p>
+                </div>
+                <p class="info">City info</p>
+                <p>
+                    The City of New York, often called New York City or simply New York,
+                    is the most populous city in the United States. With an estimated 2015
+                    population of 8,550,405 distributed over a land area of just 305
+                    square miles (790 km2), New York City is also the most densely
+                    populated major city in the United States. Located at the southern tip
+                    of the state of New York, the city is the center of the New York
+                    metropolitan area, one of the most populous urban agglomerations in
+                    the world.
+                </p>
+                <p>
+                    A global power city, New York City exerts a significant impact upon
+                    commerce, finance, media, art, fashion, research, technology,
+                    education, and entertainment, its fast pace defining the term New York
+                    minute. Home to the headquarters of the United Nations, New York is an
+                    important center for international diplomacy and has been described as
+                    the cultural and financial capital of the world.
+                </p>
+            </div>
+        </template>
+        <template v-slot:Tallin>
+            <div>
+                <span class="sunny">
+                    <img :src="sunnyImage" />
+                </span>
+                <div class="weather">
+                    <h2>21<span>&ordm;C</span></h2>
+                    <p>Sunny weather in Tallin.</p>
+                </div>
+                <p class="info">City info</p>
+                <p>
+                    Tallinn is the capital and largest city of Estonia. It is situated on
+                    the northern coast of the country, on the shore of the Gulf of
+                    Finland, 80 km (50 mi) south of Helsinki, east of Stockholm and west
+                    of Saint Petersburg. From the 13th century until 1918 (and briefly
+                    during the Nazi occupation of Estonia from 1941 to 1944), the city was
+                    known as Reval. Tallinn occupies an area of 159.2 km2 (61.5 sq mi) and
+                    has a population of 443,894. Approximately 32% of Estonia's total
+                    population lives in Tallinn.
+                </p>
+                <p>
+                    Tallinn was founded in 1248, but the earliest human settlements are
+                    over 5,000 years old, making it one of the oldest capital cities of
+                    Northern Europe. Due to its strategic location, the city became a
+                    major trade hub, especially from the 14th to the 16th century, when it
+                    grew in importance as part of the Hanseatic League.
+                </p>
+            </div>
+        </template>
+        <template v-slot:Sydney> </template>
+    </TabStrip>
+</template>
+
+<script>
+import { TabStrip } from '@progress/kendo-vue-layout';
+
+const sunnyImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/tabstrip/sunny.png';
+const rainyImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/tabstrip/rainy.png';
+
+export default {
+    components: {
+        TabStrip
+    },
+    data: function () {
+        return {
+            sunnyImage,
+            rainyImage,
+            selected: 0,
+            tabs: [
+                {
+                    title: 'Paris',
+                    content: 'Paris',
+                },
+                {
+                    title: 'New York City',
+                    content: 'NewYork',
+                },
+                {
+                    title: 'Tallinn',
+                    content: 'Tallin',
+                },
+                {
+                    title: 'Sydney',
+                    content: 'Tallin',
+                    disabled: true,
+                },
+            ],
+        };
+    },
+    methods: {
+        onSelect: function (e) {
+            this.selected = e.selected;
+        },
+    },
+};
+</script>
+
+<style>
+.sunny,
+.cloudy,
+.rainy {
+    display: block;
+    margin: 30px auto 10px;
+    width: 128px;
+    height: 128px;
+}
+
+.weather {
+    margin: 0 auto 30px;
+    text-align: center;
+}
+
+.info {
+    font-weight: bold;
+    font-size: 20px;
+}
+</style>
diff --git a/vue-options-api-demos/layout/globalization/TileLayoutComponent.vue b/vue-options-api-demos/layout/globalization/TileLayoutComponent.vue
new file mode 100644
index 00000000..9de428f6
--- /dev/null
+++ b/vue-options-api-demos/layout/globalization/TileLayoutComponent.vue
@@ -0,0 +1,54 @@
+<template>
+  <div :dir="'rtl'">
+    <TileLayout
+      :columns="3"
+      :rowHeight="200"
+      :gap="{
+        rows: 10,
+        columns: 10,
+      }"
+      :items="tiles"
+    >
+      <template v-slot:firstTile>
+        <p>Reorderable tile.</p>
+      </template>
+      <template v-slot:secondTile>
+        <p>Reorderable tile.</p>
+      </template>
+      <template v-slot:thirdTile>
+        <p>Reorderable tile.</p>
+      </template>
+    </TileLayout>
+  </div>
+</template>
+<script>
+import { TileLayout } from '@progress/kendo-vue-layout';
+
+export default {
+  components: {
+    TileLayout,
+  },
+  data() {
+    return {
+      tiles: [
+        {
+          defaultPosition: { col: 1, colSpan: 1, rowSpan: 1 },
+          headerText: 'Tile 1',
+          body: 'firstTile',
+        },
+        {
+          defaultPosition: { col: 2, colSpan: 1, rowSpan: 1 },
+          headerText: 'Tile 2',
+          body: 'secondTile',
+        },
+        {
+          defaultPosition: { col: 3, colSpan: 1, rowSpan: 2 },
+          headerText: 'Tile 3',
+          body: 'thirdTile',
+          reorderable: false,
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/globalization/WizardComponent.vue b/vue-options-api-demos/layout/globalization/WizardComponent.vue
new file mode 100644
index 00000000..609c3b65
--- /dev/null
+++ b/vue-options-api-demos/layout/globalization/WizardComponent.vue
@@ -0,0 +1,123 @@
+<template>
+  <div
+    :style="{
+      display: 'flex',
+      'flex-direction': 'column',
+    }"
+  >
+    <Stepper :value="step" :items="steps" @change="stepperChange" :dir="'rtl'" />
+    <br />
+    <k-form ref="form" :class="'form-element'" :initial-values="initialValues">
+      <personalDetails v-show="step === 0" />
+      <accountDetails v-show="step === 1" />
+      <register v-show="step === 2" />
+    </k-form>
+    <span :style="{ 'margin-top': '40px' }" :class="'k-form-separator'" />
+    <div
+      :style="{
+        'justify-content': 'space-between',
+        'align-content': 'center',
+      }"
+      :class="'k-form-buttons'"
+    >
+      <span :style="{ 'align-self': 'center' }">
+        Step {{ step + 1 }} of 3
+      </span>
+      <span>
+        <span v-if="step !== 0">
+          <k-button
+            :style="{ 'margin-right': '16px' }"
+            @click="prevButtonClick"
+          >
+            Previous
+          </k-button>
+        </span>
+        <k-button :theme-color="'primary'" @click="nextSubmitButtonClick">
+          {{ isLastStep ? 'Register' : 'Next' }}
+        </k-button>
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { Stepper } from '@progress/kendo-vue-layout';
+import { Form } from '@progress/kendo-vue-form';
+import { Button } from '@progress/kendo-vue-buttons';
+import AccountDetails from './AccountDetails.vue';
+import PersonalDetails from './PersonalDetails.vue';
+import Register from './RegisterComponent.vue';
+
+export default {
+  components: {
+    'k-form': Form,
+    Stepper,
+    'k-button': Button,
+    accountDetails: AccountDetails,
+    personalDetails: PersonalDetails,
+    register: Register,
+  },
+  data() {
+    return {
+      disableNextStep: true,
+      initialValues: {
+        firstName: 'John',
+        lastName: 'Doe',
+        username: 'john',
+        email: 'john.doe@email.com',
+        password: 'password123',
+      },
+      step: 0,
+      steps: [
+        {
+          label: 'User Data',
+          componentName: 'accountDetails',
+        },
+        {
+          label: 'Login Data',
+          componentName: 'personalDetails',
+        },
+        {
+          label: 'Register',
+          componentName: 'paymentDetails',
+        },
+      ],
+    };
+  },
+  computed: {
+    isLastStep() {
+      return this.steps.length - 1 === this.step;
+    },
+  },
+  methods: {
+    stepperChange(event) {
+      this.step = event.value;
+    },
+    nextSubmitButtonClick() {
+      this.formErrors = this.$refs.form.form.errors;
+      if (this.isLastStep) {
+        this.showErrors = false;
+        const formValues = this.$refs.form.form.values;
+        for (const property in formValues) {
+          if (formValues[property] === null || formValues[property] === '') {
+            this.showErrors = true;
+          }
+        }
+        if (!this.showErrors) {
+          alert(JSON.stringify(this.$refs.form.form.values, null, 2));
+        }
+      } else {
+        this.step += 1;
+      }
+    },
+    prevButtonClick() {
+      this.step -= 1;
+    },
+  },
+};
+</script>
+<style>
+.form-element {
+  display: flex;
+  justify-content: center;
+}
+</style>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/globalization/content-overview.js b/vue-options-api-demos/layout/globalization/content-overview.js
new file mode 100644
index 00000000..53f848aa
--- /dev/null
+++ b/vue-options-api-demos/layout/globalization/content-overview.js
@@ -0,0 +1,3 @@
+const content = `<p style="text-align: center;"><img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/labs/kendo/2020-revamp/vue-kendoka-bottom.png" alt="Kendo UI for Vue logo" title="Kendo UI for Vue Native" width="100" height="100" /></p><p><strong>Kendo UI for Vue Native Editor</strong> allows your users to edit HTML in a familiar, user-friendly way.<br>In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists, and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards and provides <a href="https://www.telerik.com/kendo-vue-ui/components/editor/tools/" target="_blank" title="https://www.telerik.com/kendo-vue-ui/components/editor/tools/">multiple tools</a> for content manipulation.</p><p>Features include:</p><ul><li><p>Text formatting &amp; alignment</p></li><li><p>Bulleted and numbered lists</p></li><li><p>Hyperlink and image dialogs</p></li><li><p>Identical HTML output across modern browsers</p></li><li><p>Highly customizable tools</p></li></ul><p></p><p>The Editor has a table option as well, allowing to add and edit tabular data.<br /></p><table><tbody><tr><td><p style="text-align: center;"><strong>Product Id</strong></p></td><td><p style="text-align: center;"><strong>Product Name</strong></p></td><td><p style="text-align: center;"><strong>Price</strong></p></td></tr><tr><td><p>1</p></td><td><p>Chai</p></td><td><p style="text-align: right;">18</p></td></tr><tr><td><p>2</p></td><td><p>Chang</p></td><td><p style="text-align: right;">19</p></td></tr><tr><td><p>3</p></td><td><p>Aniseed Syrup</p></td><td><p style="text-align: right;">10</p></td></tr></tbody></table><p></p>`;
+
+export default content;
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/globalization/index.js b/vue-options-api-demos/layout/globalization/index.js
new file mode 100644
index 00000000..d450baa2
--- /dev/null
+++ b/vue-options-api-demos/layout/globalization/index.js
@@ -0,0 +1,53 @@
+import { createWebHistory, createRouter } from 'vue-router';
+import Avatar from './AvatarComponent.vue';
+import Card from './CardComponent.vue';
+import Menu from './MenuComponent.vue';
+import Splitter from './SplitterComponent.vue';
+import PanelBar from './PanelBarComponent.vue';
+import TabStrip from './TabStripComponent.vue';
+import TileLayout from './TileLayoutComponent.vue';
+
+const routes = [
+    {
+        path: '/layout/globalization/avatar',
+        name: 'Avatar',
+        component: Avatar,
+    },
+    {
+        path: '/layout/globalization/card',
+        name: 'Card',
+        component: Card,
+    },
+    {
+        path: '/layout/globalization/menu',
+        name: 'Menu',
+        component: Menu,
+    },
+    {
+        path: '/layout/globalization/panelbar',
+        name: 'PanelBar',
+        component: PanelBar,
+    },
+    {
+        path: '/layout/globalization/splitter',
+        name: 'Splitter',
+        component: Splitter,
+    },
+    {
+        path: '/layout/globalization/tabstrip',
+        name: 'TabStrip',
+        component: TabStrip,
+    },
+    {
+        path: '/layout/globalization/tilelayout',
+        name: 'TileLayout',
+        component: TileLayout,
+    },
+];
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes,
+});
+
+export default router;
diff --git a/vue-options-api-demos/layout/globalization/main.js b/vue-options-api-demos/layout/globalization/main.js
new file mode 100644
index 00000000..b51f2405
--- /dev/null
+++ b/vue-options-api-demos/layout/globalization/main.js
@@ -0,0 +1,5 @@
+import { createApp } from "vue";
+import App from "./main.vue";
+import router from "./index.js";
+
+createApp(App).use(router).mount("#app");
diff --git a/vue-options-api-demos/layout/globalization/main.vue b/vue-options-api-demos/layout/globalization/main.vue
new file mode 100644
index 00000000..5ad594f9
--- /dev/null
+++ b/vue-options-api-demos/layout/globalization/main.vue
@@ -0,0 +1,159 @@
+<template>
+  <div class="border-demo">
+    <AppBar :dir="'rtl'">
+      <AppBarSection>
+        <kbutton :svg-icon="layoutIcon" :fill-mode="'flat'" @click="handleClick" />
+        <span class="title"
+          >AppBar component from which the Drawer Component is controlled</span
+        >
+      </AppBarSection>
+    </AppBar>
+
+    <Drawer
+      :expanded="expanded"
+      :position="position"
+      :mode="mode"
+      :mini="true"
+      :items="
+        items.map((item, index) => ({
+          ...item,
+          selected: index === selectedId,
+        }))
+      "
+      @select="onSelect"
+      :dir="'rtl'"
+    >
+      <DrawerContent>
+        <div class="content">
+          <router-view> </router-view>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  </div>
+</template>
+
+<script>
+import { Drawer, DrawerContent } from '@progress/kendo-vue-layout';
+import { Button } from '@progress/kendo-vue-buttons';
+import { AppBar, AppBarSection } from '@progress/kendo-vue-layout';
+import {
+    layoutIcon
+} from "@progress/kendo-svg-icons";
+import './styles.css';
+import { userIcon, imageIcon, menuIcon, layoutSideBySideIcon, arrowsLeftRightIcon, layout1By4Icon, layoutStackedIcon } from '@progress/kendo-svg-icons';
+
+export default {
+    name: 'App',
+    components: { Drawer, DrawerContent, kbutton: Button, AppBar, AppBarSection },
+    mounted() {
+        this.$router.push(this.items[0].data);
+    },
+    data() {
+        return {
+            layoutIcon,
+            items: [
+                {
+                    text: 'Avatar',
+                    svgIcon: userIcon,
+                    selected: true,
+                    data: {
+                        path: '/layout/globalization/avatar',
+                    },
+                },
+                {
+                    separator: true,
+                },
+                {
+                    text: 'Card',
+                    svgIcon: imageIcon,
+                    data: {
+                        path: '/layout/globalization/card',
+                    },
+                },
+                {
+                    separator: true,
+                },
+                {
+                    text: 'Menu',
+                    svgIcon: menuIcon,
+                    data: {
+                        path: '/layout/globalization/menu',
+                    },
+                },
+                {
+                    separator: true,
+                },
+                {
+                    text: 'PanelBar',
+                    svgIcon: layoutSideBySideIcon,
+                    data: {
+                        path: '/layout/globalization/panelbar',
+                    },
+                },
+                {
+                    separator: true,
+                },
+                {
+                    text: 'Splitter',
+                    svgIcon: arrowsLeftRightIcon,
+                    data: {
+                        path: '/layout/globalization/splitter',
+                    },
+                },
+                {
+                    separator: true,
+                },
+                {
+                    text: 'TabStrip',
+                    svgIcon: layoutStackedIcon,
+                    data: {
+                        path: '/layout/globalization/tabstrip',
+                    },
+                },
+                {
+                    separator: true,
+                },
+                {
+                    text: 'TileLayout',
+                    svgIcon: layout1By4Icon,
+                    data: {
+                        path: '/layout/globalization/TileLayout',
+                    },
+                },
+                {
+                    separator: true,
+                },
+            ],
+            expanded: true,
+            selectedId: 0,
+            position: 'start',
+            mode: 'push',
+        };
+    },
+    methods: {
+        onSelect(e) {
+            this.selectedId = e.itemIndex;
+            this.$router.push(this.items[e.itemIndex].data);
+        },
+        handleClick() {
+            this.expanded = !this.expanded;
+        },
+    },
+};
+</script>
+
+<style>
+.header {
+  font-size: 20px;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 20px;
+}
+#app {
+  padding: 0px;
+}
+
+body {
+  text-align: inherit;
+}
+</style>
diff --git a/vue-options-api-demos/layout/globalization/panelbar-styles.css b/vue-options-api-demos/layout/globalization/panelbar-styles.css
new file mode 100644
index 00000000..34a35a5e
--- /dev/null
+++ b/vue-options-api-demos/layout/globalization/panelbar-styles.css
@@ -0,0 +1,35 @@
+.teamMate:after {
+  content: ".";
+  display: block;
+  height: 0;
+  line-height: 0;
+  clear: both;
+  visibility: hidden;
+}
+.teamMate h2 {
+  font-size: 1.3em;
+  font-weight: normal;
+  padding-top: 17px;
+  margin: 0;
+}
+.teamMate p {
+  margin: 0;
+  font-size: .8em;
+}
+.teamMate img {
+  display: inline-block;
+  vertical-align: top;
+  width: 50px;
+  height: 50px;
+  margin: 10px;
+  border: 1px solid #ccc;
+  border-radius: 50%;
+}
+.mate-info {
+  display: inline-block;
+  vertical-align: top;
+}
+.panelbar-wrapper {
+  max-width: 300px;
+  margin: 0 auto;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/globalization/splitter-styles.css b/vue-options-api-demos/layout/globalization/splitter-styles.css
new file mode 100644
index 00000000..31339449
--- /dev/null
+++ b/vue-options-api-demos/layout/globalization/splitter-styles.css
@@ -0,0 +1,14 @@
+.pane-content {
+  padding: 0 10px;
+}
+
+h3 {
+  font-size: 1.2em;
+  margin: 10px 0;
+  padding: 0;
+}
+
+p {
+  margin: 0;
+  padding: 0;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/globalization/styles.css b/vue-options-api-demos/layout/globalization/styles.css
new file mode 100644
index 00000000..4dd5f55c
--- /dev/null
+++ b/vue-options-api-demos/layout/globalization/styles.css
@@ -0,0 +1,59 @@
+my-app {
+  padding: 0 !important;
+}
+
+.k-drawer-container > .k-drawer-content > .content {
+  padding: 40px 20px;
+}
+
+.k-drawer-container {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+}
+
+.k-drawer-item {
+  user-select: none;
+}
+
+.k-icon {
+  font-size: 20px;
+}
+
+.custom-toolbar {
+  display: flex;
+  width: 100%;
+  background-color: #f6f6f6;
+  line-height: 10px;
+  border-bottom: inset;
+  border-bottom-width: 1px;
+  padding: 8px 6px;
+  color: #000000;
+}
+
+.mail-box {
+  margin-left: 20px;
+  font-weight: bold;
+  font-size: 17px;
+}
+
+.page ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.page li {
+  font-size: 1.2em;
+  background: 0 0;
+  border-radius: 0;
+  border-width: 0 0 1px;
+  border-color: rgba(33, 37, 41, 0.125);
+  border-style: solid;
+  line-height: 1.5em;
+  padding: 1.09em 0.84em 1.23em 0.84em;
+}
+
+.page li:last-child {
+  border: 0;
+}
diff --git a/vue-options-api-demos/layout/globalization/validators.js b/vue-options-api-demos/layout/globalization/validators.js
new file mode 100644
index 00000000..b1fa8aa6
--- /dev/null
+++ b/vue-options-api-demos/layout/globalization/validators.js
@@ -0,0 +1,83 @@
+import { getter } from '@progress/kendo-vue-common';
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const phoneRegex = new RegExp(/^[0-9 ()+-]+$/);
+const ccardRegex = new RegExp(/^[0-9-]+$/);
+const cvcRegex = new RegExp(/^[0-9]+$/);
+
+export const termsValidator = (value) =>
+  value ? '' : "It's required to agree with Terms and Conditions.";
+export const emailValidator = (value) =>
+  !value
+    ? 'Email field is required.'
+    : emailRegex.test(value)
+    ? ''
+    : 'Email is not in a valid format.';
+export const nameValidator = (value) =>
+  !value
+    ? 'Full Name is required'
+    : value.length < 7
+    ? 'Full Name should be at least 7 characters long.'
+    : '';
+export const userNameValidator = (value) =>
+  !value
+    ? 'User Name is required'
+    : value.length < 5
+    ? 'User name should be at least 5 characters long.'
+    : '';
+export const phoneValidator = (value) =>
+  !value
+    ? 'Phone number is required.'
+    : phoneRegex.test(value)
+    ? ''
+    : 'Not a valid phone number.';
+export const cardValidator = (value) =>
+  !value
+    ? 'Credit card number is required. '
+    : ccardRegex.test(value)
+    ? ''
+    : 'Not a valid credit card number format.';
+export const cvcValidator = (value) =>
+  !value
+    ? 'CVC code is required,'
+    : cvcRegex.test(value) || value.length !== 3
+    ? ''
+    : 'Not a valid CVC code format.';
+export const guestsValidator = (value) =>
+  !value
+    ? 'Number of guests is required'
+    : value <= 5
+    ? ''
+    : 'Maximum 5 guests';
+export const nightsValidator = (value) =>
+  value ? '' : 'Number of Nights is required.';
+export const arrivalDateValidator = (value) =>
+  value ? '' : 'Arrival Date is required.';
+export const colorValidator = (value) => (value ? '' : 'Color is required.');
+export const requiredValidator = (value) =>
+  value ? '' : 'Error: This field is required.';
+export const passwordValidator = (value) =>
+  value && value.length > 8 ? '' : 'Password must be at least 8 symbols.';
+export const addressValidator = (value) =>
+  value ? '' : 'Address is required.';
+
+const userNameGetter = getter('username');
+const emailGetter = getter('email');
+
+export const formValidator = (values) => {
+  const userName = userNameGetter(values);
+  const emailValue = emailGetter(values);
+
+  if (userName && emailValue && emailRegex.test(emailValue)) {
+    return {};
+  }
+
+  return {
+    VALIDATION_SUMMARY: 'Please fill in the following fields.',
+    ['username']: !userName ? 'User Name is required.' : '',
+    ['email']:
+      emailValue && emailRegex.test(emailValue)
+        ? ''
+        : 'Email is required and should be in a valid format.',
+  };
+};
diff --git a/vue-options-api-demos/layout/gridlayout/items/main.js b/vue-options-api-demos/layout/gridlayout/items/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/gridlayout/items/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/gridlayout/items/main.vue b/vue-options-api-demos/layout/gridlayout/items/main.vue
new file mode 100644
index 00000000..2021285a
--- /dev/null
+++ b/vue-options-api-demos/layout/gridlayout/items/main.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <div class="example-wrapper">
+      <div class="page">
+        <div class="content">
+          <GridLayout
+            :rows="[
+              { height: '90px' },
+              { height: '90px' },
+              { height: '90px' },
+              { height: '90px' },
+              { height: '90px' },
+            ]"
+            :cols="[{ width: '90px' }, { width: '90px' }, { width: '90px' }]"
+            :gap="{ rows: 5, cols: 5 }"
+            :items="items"
+          >
+            <template v-slot:content1>
+              <div class="box rect">Box</div>
+            </template>
+            <template v-slot:content2>
+              <div class="box">Box</div>
+            </template>
+            <template v-slot:content3>
+              <div class="box">Box</div>
+            </template>
+            <template v-slot:content4>
+              <div class="box big">Box</div>
+            </template>
+            <template v-slot:content5>
+              <div class="box rect">Box</div>
+            </template>
+            <template v-slot:content6>
+              <div class="box">Box</div>
+            </template>
+            <template v-slot:content7>
+              <div class="box">Box</div>
+            </template>
+            <template v-slot:content8>
+              <div class="box">Box</div>
+            </template>
+            <template v-slot:content9>
+              <div class="box">Box</div>
+            </template>
+            <template v-slot:content10>
+              <div class="box">Box</div>
+            </template>
+          </GridLayout>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { GridLayout } from '@progress/kendo-vue-layout';
+
+import './styles.css';
+
+export default {
+  components: {
+    GridLayout,
+  },
+  data() {
+    return {
+      items: [
+        { row: 1, col: 1, colSpan: 2, content: 'content1' },
+        { row: 1, col: 3, content: 'content2' },
+        { row: 2, col: 1, content: 'content3' },
+        { row: 2, col: 2, colSpan: 2, rowSpan: 2, content: 'content4' },
+        { row: 3, col: 1, rowSpan: 2, content: 'content5' },
+        { row: 4, col: 2, content: 'content6' },
+        { row: 4, col: 3, content: 'content7' },
+        { row: 5, col: 1, content: 'content8' },
+        { row: 5, col: 2, content: 'content9' },
+        { row: 5, col: 3, content: 'content10' },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/gridlayout/items/styles.css b/vue-options-api-demos/layout/gridlayout/items/styles.css
new file mode 100644
index 00000000..13212c38
--- /dev/null
+++ b/vue-options-api-demos/layout/gridlayout/items/styles.css
@@ -0,0 +1,26 @@
+.example-wrapper {
+    width: 300px;
+    margin: 0 auto;
+    box-shadow: 0px 10px 20px #00000029;
+    border-radius: 30px;
+  }
+  .page {
+    padding: 20px 10px;
+  }
+  .content {
+    background: #f9f9f9;
+    height: 470px;
+    overflow: auto;
+  }
+  .box {
+    padding: 4px;
+    background-color: #87dfce;
+    height: 100%;
+  }
+  .big {
+    background-color: #fea69c;
+  }
+  .rect {
+    background-color: #fee47c;
+  }
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/gridlayout/layout/gaps/main.js b/vue-options-api-demos/layout/gridlayout/layout/gaps/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/gridlayout/layout/gaps/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/gridlayout/layout/gaps/main.vue b/vue-options-api-demos/layout/gridlayout/layout/gaps/main.vue
new file mode 100644
index 00000000..4b87432e
--- /dev/null
+++ b/vue-options-api-demos/layout/gridlayout/layout/gaps/main.vue
@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <div class="row k-mb-4">
+      <div class="col col-6">
+        <div class="k-label">Set Row Gap</div>
+        <NumericTextBox :value="rowGap" @change="handleRowGapChange" :min="0" />
+      </div>
+      <div class="col col-6">
+        <div class="k-label">Set Column Gap</div>
+        <NumericTextBox :value="colGap" @change="handleColGapChange" :min="0" />
+      </div>
+    </div>
+    <div class="example-wrapper">
+      <div class="page">
+        <div class="content">
+          <GridLayout
+            :items="items"
+            :rows="[
+              {
+                height: '90px',
+              },
+              {
+                height: '90px',
+              },
+              {
+                height: '90px',
+              },
+              {
+                height: '90px',
+              },
+              {
+                height: '90px',
+              },
+            ]"
+            :cols="[
+              {
+                width: '90px',
+              },
+              {
+                width: '90px',
+              },
+              {
+                width: '90px',
+              },
+            ]"
+            :gap="{
+              rows: rowGap,
+              cols: colGap,
+            }"
+          >
+            <template
+              v-for="index in 15"
+              v-slot:[getSlotName(index)]
+              :key="index"
+            >
+              <div :class="['box', 'box-' + (index - 1)]"></div>
+            </template>
+          </GridLayout>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { NumericTextBox } from '@progress/kendo-vue-inputs';
+import { GridLayout } from '@progress/kendo-vue-layout';
+
+import './styles.css';
+
+export default {
+  components: {
+    GridLayout,
+    NumericTextBox,
+  },
+  data() {
+    return {
+      rowGap: 5,
+      colGap: 5,
+      items: [...Array(15)].map((el, index) => {
+        return { content: 'content' + (index + 1) };
+      }),
+      // The above definition is a short version of the following:
+      // items: [
+      //   { content: 'content1' },
+      //   { content: 'content2' },
+      //   { content: 'content3' },
+      //   { content: 'content4' },
+      //   { content: 'content5' },
+      //   { content: 'content6' },
+      //   { content: 'content7' },
+      //   { content: 'content8' },
+      //   { content: 'content9' },
+      //   { content: 'content10' },
+      //   { content: 'content11' },
+      //   { content: 'content12' },
+      //   { content: 'content13' },
+      //   { content: 'content14' },
+      //   { content: 'content15' },
+      // ],
+    };
+  },
+  methods: {
+    handleColGapChange(e) {
+      this.colGap = e.value;
+    },
+    handleRowGapChange(e) {
+      this.rowGap = e.value;
+    },
+    getSlotName(index) {
+      return `content${index}`;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/gridlayout/layout/gaps/styles.css b/vue-options-api-demos/layout/gridlayout/layout/gaps/styles.css
new file mode 100644
index 00000000..b0e7e229
--- /dev/null
+++ b/vue-options-api-demos/layout/gridlayout/layout/gaps/styles.css
@@ -0,0 +1,44 @@
+.example-wrapper {
+    width: 300px;
+    margin: 0 auto;
+    box-shadow: 0px 10px 20px #00000029;
+    border-radius: 30px;
+  }
+  .page {
+    padding: 20px 10px;
+  }
+  .content {
+    background: #f9f9f9;
+    height: 470px;
+    overflow: auto;
+  }
+  .box {
+    padding: 4px;
+    height: 100%;
+  }
+  .box-0,
+  .box-5,
+  .box-10 {
+    background-color: #89c0dd;
+  }
+  .box-1,
+  .box-6,
+  .box-11 {
+    background-color: #85d9b0;
+  }
+  .box-2,
+  .box-7,
+  .box-12 {
+    background-color: #f2ab7e;
+  }
+  .box-3,
+  .box-8,
+  .box-13 {
+    background-color: #fee47c;
+  }
+  .box-4,
+  .box-9,
+  .box-14 {
+    background-color: #fea69c;
+  }
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/gridlayout/layout/horizontalalign/main.js b/vue-options-api-demos/layout/gridlayout/layout/horizontalalign/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/gridlayout/layout/horizontalalign/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/gridlayout/layout/horizontalalign/main.vue b/vue-options-api-demos/layout/gridlayout/layout/horizontalalign/main.vue
new file mode 100644
index 00000000..7aaf92fd
--- /dev/null
+++ b/vue-options-api-demos/layout/gridlayout/layout/horizontalalign/main.vue
@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <DropDownList
+      :data-items="hAligns"
+      :value="hAlign"
+      @change="handleAlignChange"
+    />
+    <div class="example-wrapper">
+      <div class="page">
+        <div class="content">
+          <GridLayout
+            :items="items"
+            :align="{
+              horizontal: hAlign,
+            }"
+            :rows="[
+              {
+                height: '90px',
+              },
+              {
+                height: '90px',
+              },
+              {
+                height: '90px',
+              },
+              {
+                height: '90px',
+              },
+              {
+                height: '90px',
+              },
+            ]"
+            :cols="[
+              {
+                width: '90px',
+              },
+              {
+                width: '90px',
+              },
+              {
+                width: '90px',
+              },
+            ]"
+            :gap="{
+              rows: 5,
+              cols: 5,
+            }"
+          >
+            <template
+              v-for="index in 15"
+              v-slot:[getSlotName(index)]
+              :key="index"
+            >
+              <div :class="['box', 'box-' + (index - 1)]">Box</div>
+            </template>
+          </GridLayout>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import { GridLayout } from '@progress/kendo-vue-layout';
+
+import './styles.css';
+
+export default {
+  components: {
+    GridLayout,
+    DropDownList,
+  },
+  data() {
+    return {
+      hAlign: 'stretch',
+      hAligns: ['start', 'center', 'end', 'stretch'],
+      items: [...Array(15)].map((el, index) => {
+        return { content: 'content' + (index + 1) };
+      }),
+    };
+  },
+  methods: {
+    handleAlignChange(e) {
+      this.hAlign = e.value;
+    },
+    getSlotName(index) {
+      return `content${index}`;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/gridlayout/layout/horizontalalign/styles.css b/vue-options-api-demos/layout/gridlayout/layout/horizontalalign/styles.css
new file mode 100644
index 00000000..b0e7e229
--- /dev/null
+++ b/vue-options-api-demos/layout/gridlayout/layout/horizontalalign/styles.css
@@ -0,0 +1,44 @@
+.example-wrapper {
+    width: 300px;
+    margin: 0 auto;
+    box-shadow: 0px 10px 20px #00000029;
+    border-radius: 30px;
+  }
+  .page {
+    padding: 20px 10px;
+  }
+  .content {
+    background: #f9f9f9;
+    height: 470px;
+    overflow: auto;
+  }
+  .box {
+    padding: 4px;
+    height: 100%;
+  }
+  .box-0,
+  .box-5,
+  .box-10 {
+    background-color: #89c0dd;
+  }
+  .box-1,
+  .box-6,
+  .box-11 {
+    background-color: #85d9b0;
+  }
+  .box-2,
+  .box-7,
+  .box-12 {
+    background-color: #f2ab7e;
+  }
+  .box-3,
+  .box-8,
+  .box-13 {
+    background-color: #fee47c;
+  }
+  .box-4,
+  .box-9,
+  .box-14 {
+    background-color: #fea69c;
+  }
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/gridlayout/layout/rows-cols/main.js b/vue-options-api-demos/layout/gridlayout/layout/rows-cols/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/gridlayout/layout/rows-cols/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/gridlayout/layout/rows-cols/main.vue b/vue-options-api-demos/layout/gridlayout/layout/rows-cols/main.vue
new file mode 100644
index 00000000..a92a8683
--- /dev/null
+++ b/vue-options-api-demos/layout/gridlayout/layout/rows-cols/main.vue
@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <div class="row k-mb-4">
+      <div class="col col-6">
+        <div class="k-label">Set Row Height</div>
+        <NumericTextBox :value="rowHeight" @change="handleRowChange" />
+      </div>
+      <div class="col col-6">
+        <div class="k-label">Set Column Width</div>
+        <NumericTextBox :value="colWidth" @change="handleColChange" />
+      </div>
+    </div>
+    <div class="example-wrapper">
+      <div class="page">
+        <div class="content">
+          <GridLayout
+            :items="items"
+            :rows="[
+              {
+                height: computedRowHeight,
+              },
+              {
+                height: computedRowHeight,
+              },
+              {
+                height: computedRowHeight,
+              },
+              {
+                height: computedRowHeight,
+              },
+              {
+                height: computedRowHeight,
+              },
+            ]"
+            :cols="[
+              {
+                width: computedColWidth,
+              },
+              {
+                width: computedColWidth,
+              },
+              {
+                width: computedColWidth,
+              },
+            ]"
+            :gap="{
+              rows: 5,
+              cols: 5,
+            }"
+          >
+            <template
+              v-for="index in 15"
+              v-slot:[getSlotName(index)]
+              :key="index"
+            >
+              <div :class="['box', 'box-' + (index - 1)]"></div>
+            </template>
+          </GridLayout>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { NumericTextBox } from '@progress/kendo-vue-inputs';
+import { GridLayout } from '@progress/kendo-vue-layout';
+
+import './styles.css';
+
+export default {
+  components: {
+    GridLayout,
+    NumericTextBox,
+  },
+  data() {
+    return {
+      colWidth: 90,
+      rowHeight: 90,
+      items: [...Array(15)].map((el, index) => {
+        return { content: 'content' + (index + 1) };
+      }),
+      // The above definition is a short version of the following:
+      // items: [
+      //   { content: 'content1' },
+      //   { content: 'content2' },
+      //   { content: 'content3' },
+      //   { content: 'content4' },
+      //   { content: 'content5' },
+      //   { content: 'content6' },
+      //   { content: 'content7' },
+      //   { content: 'content8' },
+      //   { content: 'content9' },
+      //   { content: 'content10' },
+      //   { content: 'content11' },
+      //   { content: 'content12' },
+      //   { content: 'content13' },
+      //   { content: 'content14' },
+      //   { content: 'content15' },
+      // ],
+    };
+  },
+  computed: {
+    computedRowHeight() {
+      return this.rowHeight + 'px';
+    },
+    computedColWidth() {
+      return this.colWidth + 'px';
+    },
+  },
+  methods: {
+    handleColChange(e) {
+      this.colWidth = e.value;
+    },
+    handleRowChange(e) {
+      this.rowHeight = e.value;
+    },
+    getSlotName(index) {
+      return `content${index}`;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/gridlayout/layout/rows-cols/styles.css b/vue-options-api-demos/layout/gridlayout/layout/rows-cols/styles.css
new file mode 100644
index 00000000..b0e7e229
--- /dev/null
+++ b/vue-options-api-demos/layout/gridlayout/layout/rows-cols/styles.css
@@ -0,0 +1,44 @@
+.example-wrapper {
+    width: 300px;
+    margin: 0 auto;
+    box-shadow: 0px 10px 20px #00000029;
+    border-radius: 30px;
+  }
+  .page {
+    padding: 20px 10px;
+  }
+  .content {
+    background: #f9f9f9;
+    height: 470px;
+    overflow: auto;
+  }
+  .box {
+    padding: 4px;
+    height: 100%;
+  }
+  .box-0,
+  .box-5,
+  .box-10 {
+    background-color: #89c0dd;
+  }
+  .box-1,
+  .box-6,
+  .box-11 {
+    background-color: #85d9b0;
+  }
+  .box-2,
+  .box-7,
+  .box-12 {
+    background-color: #f2ab7e;
+  }
+  .box-3,
+  .box-8,
+  .box-13 {
+    background-color: #fee47c;
+  }
+  .box-4,
+  .box-9,
+  .box-14 {
+    background-color: #fea69c;
+  }
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/gridlayout/layout/verticalalign/main.js b/vue-options-api-demos/layout/gridlayout/layout/verticalalign/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/gridlayout/layout/verticalalign/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/gridlayout/layout/verticalalign/main.vue b/vue-options-api-demos/layout/gridlayout/layout/verticalalign/main.vue
new file mode 100644
index 00000000..ea4e6066
--- /dev/null
+++ b/vue-options-api-demos/layout/gridlayout/layout/verticalalign/main.vue
@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <DropDownList
+      :data-items="vAligns"
+      :value="vAlign"
+      @change="handleAlignChange"
+    />
+    <div class="example-wrapper">
+      <div class="page">
+        <div class="content">
+          <GridLayout
+            :items="items"
+            :align="{
+              vertical: vAlign,
+            }"
+            :rows="[
+              {
+                height: '90px',
+              },
+              {
+                height: '90px',
+              },
+              {
+                height: '90px',
+              },
+              {
+                height: '90px',
+              },
+              {
+                height: '90px',
+              },
+            ]"
+            :cols="[
+              {
+                width: '90px',
+              },
+              {
+                width: '90px',
+              },
+              {
+                width: '90px',
+              },
+            ]"
+            :gap="{
+              rows: 5,
+              cols: 5,
+            }"
+          >
+            <template
+              v-for="index in 15"
+              v-slot:[getSlotName(index)]
+              :key="index"
+            >
+              <div :class="['box', 'box-' + (index - 1)]">Box</div>
+            </template>
+          </GridLayout>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import { GridLayout } from '@progress/kendo-vue-layout';
+
+import './styles.css';
+
+export default {
+  components: {
+    GridLayout,
+    DropDownList,
+  },
+  data() {
+    return {
+      vAlign: 'stretch',
+      vAligns: ['top', 'middle', 'bottom', 'stretch'],
+      items: [...Array(15)].map((el, index) => {
+        return { content: 'content' + (index + 1) };
+      }),
+    };
+  },
+  methods: {
+    handleAlignChange(e) {
+      this.vAlign = e.value;
+    },
+    getSlotName(index) {
+      return `content${index}`;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/gridlayout/layout/verticalalign/styles.css b/vue-options-api-demos/layout/gridlayout/layout/verticalalign/styles.css
new file mode 100644
index 00000000..b0e7e229
--- /dev/null
+++ b/vue-options-api-demos/layout/gridlayout/layout/verticalalign/styles.css
@@ -0,0 +1,44 @@
+.example-wrapper {
+    width: 300px;
+    margin: 0 auto;
+    box-shadow: 0px 10px 20px #00000029;
+    border-radius: 30px;
+  }
+  .page {
+    padding: 20px 10px;
+  }
+  .content {
+    background: #f9f9f9;
+    height: 470px;
+    overflow: auto;
+  }
+  .box {
+    padding: 4px;
+    height: 100%;
+  }
+  .box-0,
+  .box-5,
+  .box-10 {
+    background-color: #89c0dd;
+  }
+  .box-1,
+  .box-6,
+  .box-11 {
+    background-color: #85d9b0;
+  }
+  .box-2,
+  .box-7,
+  .box-12 {
+    background-color: #f2ab7e;
+  }
+  .box-3,
+  .box-8,
+  .box-13 {
+    background-color: #fee47c;
+  }
+  .box-4,
+  .box-9,
+  .box-14 {
+    background-color: #fea69c;
+  }
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/gridlayout/overview/RecommendedArticle.vue b/vue-options-api-demos/layout/gridlayout/overview/RecommendedArticle.vue
new file mode 100644
index 00000000..e71fbea9
--- /dev/null
+++ b/vue-options-api-demos/layout/gridlayout/overview/RecommendedArticle.vue
@@ -0,0 +1,51 @@
+<template>
+  <Card :orientation="'horizontal'" class="card-article">
+    <div class="card-article-description k-d-flex-col">
+      <div class="author k-font-weight-bold">{{ article.author }}</div>
+      <CardTitle class="title k-font-weight-bold">{{
+        article.title
+      }}</CardTitle>
+      <CardSubtitle class="subtitle">{{ article.subtitle }}</CardSubtitle>
+      <div class="date k-d-flex">
+        <div>{{ formattedDate }}</div>
+        <div class="separator">|</div>
+        <div>{{ article.minsLength }} min read</div>
+      </div>
+    </div>
+    <div>
+      <CardImage class="card-article-image" :src="article.imagePath" />
+      <div v-if="article.imageText" class="photo-text">
+        {{ article.imageText }}
+      </div>
+    </div>
+  </Card>
+</template>
+<script>
+import {
+  Card,
+  CardTitle,
+  CardSubtitle,
+  CardImage,
+} from '@progress/kendo-vue-layout';
+
+export default {
+  components: {
+    Card,
+    CardTitle,
+    CardSubtitle,
+    CardImage,
+  },
+  props: {
+    article: Object,
+  },
+  computed: {
+    formattedDate() {
+      return (
+        this.article.date.toLocaleString('en-us', { month: 'short' }) +
+        ' ' +
+        this.article.date.getDate()
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/gridlayout/overview/TrendingArticle.vue b/vue-options-api-demos/layout/gridlayout/overview/TrendingArticle.vue
new file mode 100644
index 00000000..34805c1b
--- /dev/null
+++ b/vue-options-api-demos/layout/gridlayout/overview/TrendingArticle.vue
@@ -0,0 +1,36 @@
+<template>
+    <div class="article k-d-flex">
+      <div
+        class="article-position k-d-inline-flex k-text-primary k-font-weight-bold"
+      >
+        0{{ position }}
+      </div>
+      <div class="article-description k-d-flex-col">
+        <div class="author">{{ article.author }}</div>
+        <div class="title k-font-weight-bold">{{ article.title }}</div>
+        <div class="date k-d-flex">
+          <div>{{ formattedDate }}</div>
+          <div class="separator">|</div>
+          <div>{{ article.minsLength }} min read</div>
+        </div>
+      </div>
+    </div>
+  </template>
+  <script>
+  export default {
+    props: {
+      position: Number,
+      article: Object,
+    },
+    computed: {
+      formattedDate() {
+        return (
+          this.article.date.toLocaleString('en-us', { month: 'short' }) +
+          ' ' +
+          this.article.date.getDate()
+        );
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/gridlayout/overview/articles-info.js b/vue-options-api-demos/layout/gridlayout/overview/articles-info.js
new file mode 100644
index 00000000..2e56c8db
--- /dev/null
+++ b/vue-options-api-demos/layout/gridlayout/overview/articles-info.js
@@ -0,0 +1,84 @@
+const tags = [
+    { name: 'Art' },
+    { name: 'Books' },
+    { name: 'Film' },
+    { name: 'Gaming' },
+    { name: 'Music' },
+    { name: 'Photography' },
+    { name: 'Podcasts' },
+    { name: 'TV' },
+    { name: 'Visual Design' }
+];
+const articles = [
+    {
+        author: 'Camille Fournier',
+        title: 'An incomplete list of skills senior engineers need',
+        minsLength: 4,
+        date: new Date()
+    },
+    {
+        author: 'Mathew MacDonald',
+        title: 'A Closer Look at 5 New Features in C# 10',
+        minsLength: 6,
+        date: new Date()
+    },
+    {
+        author: 'Camille Fournier',
+        title: '20 Necessary Requirements of a Perfect Laptop',
+        minsLength: 4,
+        date: new Date()
+    },
+    {
+        author: 'Anton Subbotin',
+        title: 'Top 3 Coding Teachers',
+        minsLength: 5,
+        date: new Date()
+    },
+    {
+        author: 'Umair Haque',
+        title: 'Welcome to a New Dark Age',
+        minsLength: 9,
+        date: new Date()
+    },
+    {
+        author: 'Jean Campbell',
+        title: 'An Open Letter to Millennials',
+        minsLength: 7,
+        date: new Date()
+    }
+  ];
+
+const machineImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/gridlayout/machine-learning.jpg';
+const climateImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/gridlayout/climate.jpg';
+const booksImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/gridlayout/books.jpg';
+
+const recommendedArticles = [
+    {
+        author: 'Andreas Maier',
+        title:
+            'Pattern Recognition and the Fundamental Methods of Machine Learning',
+        subtitle: 'A Comprehensive Overview of Classical ML Methods',
+        minsLength: 7,
+        imagePath: machineImage,
+        imageText: 'Photo by Nathan Van Egmond on Unsplash',
+        date: new Date()
+    },
+    {
+        author: 'Whet Moser',
+        title: 'Our Climate Change Future Looks Like the Everglades',
+        subtitle: 'We are all Florida man.',
+        minsLength: 6,
+        imagePath: climateImage,
+        date: new Date()
+    },
+    {
+        author: 'Ali Tamaseb',
+        title: 'What I Learned About Startups by Collecting 30,000 Data Points',
+        subtitle: 'I spend 4 years conducting one of the largest studies.',
+        minsLength: 8,
+        imagePath: booksImage,
+        imageText: 'Photo by Firmbee.com on Unsplash',
+        date: new Date()
+    }
+];
+export { tags, articles, recommendedArticles };
diff --git a/vue-options-api-demos/layout/gridlayout/overview/main.js b/vue-options-api-demos/layout/gridlayout/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/gridlayout/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/gridlayout/overview/main.vue b/vue-options-api-demos/layout/gridlayout/overview/main.vue
new file mode 100644
index 00000000..358a1be1
--- /dev/null
+++ b/vue-options-api-demos/layout/gridlayout/overview/main.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="grid-layout-container">
+    <GridLayout
+      :gap="{ rows: 6, cols: 10 }"
+      :rows="[
+        { height: '20px' },
+        { height: '100px' },
+        { height: '100px' },
+        { height: '20px' },
+        { height: '660px' },
+      ]"
+      :cols="[{ width: '270px' }, { width: '270px' }, { width: '310px' }]"
+      :items="items"
+    >
+      <template v-slot:content1>
+        <div class="k-text-inverse k-text-uppercase k-font-weight-bold">
+          Trending articles
+        </div>
+      </template>
+      <template v-slot:content2>
+        <TrendingArticle :position="1" :article="articles[0]"></TrendingArticle>
+      </template>
+      <template v-slot:content3>
+        <TrendingArticle :position="2" :article="articles[1]"></TrendingArticle>
+      </template>
+      <template v-slot:content4>
+        <TrendingArticle :position="3" :article="articles[2]"></TrendingArticle>
+      </template>
+      <template v-slot:content5>
+        <TrendingArticle :position="4" :article="articles[3]"></TrendingArticle>
+      </template>
+      <template v-slot:content6>
+        <TrendingArticle :position="5" :article="articles[4]"></TrendingArticle>
+      </template>
+      <template v-slot:content7>
+        <TrendingArticle :position="6" :article="articles[5]"></TrendingArticle>
+      </template>
+      <template v-slot:content8>
+        <div class="k-text-inverse k-text-uppercase k-font-weight-bold">
+          Recommended for you
+        </div>
+      </template>
+      <template v-slot:content9>
+        <RecommendedArticle
+          v-for="article of recommendedArticles"
+          :key="article.title"
+          :article="article"
+        ></RecommendedArticle>
+      </template>
+      <template v-slot:content10>
+        <div class="k-text-inverse k-text-uppercase k-font-weight-bold">
+          Events this month
+        </div>
+      </template>
+      <template v-slot:content11>
+        <div>
+          <Calendar
+            class="event-calendar"
+            :value="selectedDate"
+            @change="handleValueChange"
+            :bottom-view="'year'"
+            :top-view="'decade'"
+            :navigation="false"
+          >
+          </Calendar>
+          <div
+            class="k-text-inverse k-text-uppercase k-font-weight-bold k-mt-4"
+          >
+            Discover more
+          </div>
+          <ChipList
+            :selection="'multiple'"
+            :default-data-items="tags"
+            :text-field="'name'"
+            :value-field="'name'"
+          />
+        </div>
+      </template>
+    </GridLayout>
+  </div>
+</template>
+<script>
+import { GridLayout } from '@progress/kendo-vue-layout';
+import { ChipList, Chip } from '@progress/kendo-vue-buttons';
+import { Calendar } from '@progress/kendo-vue-dateinputs';
+import { tags, articles, recommendedArticles } from './articles-info';
+import RecommendedArticle from './RecommendedArticle.vue';
+import TrendingArticle from './TrendingArticle.vue';
+import './styles.css';
+
+export default {
+  components: {
+    GridLayout,
+    ChipList,
+    Chip,
+    Calendar,
+    RecommendedArticle,
+    TrendingArticle,
+  },
+  data() {
+    return {
+      items: [
+        { row: 1, col: 1, colSpan: 3, content: 'content1' },
+        { row: 2, col: 1, content: 'content2' },
+        { row: 2, col: 2, content: 'content3' },
+        { row: 2, col: 3, content: 'content4' },
+        { row: 3, col: 1, content: 'content5' },
+        { row: 3, col: 2, content: 'content6' },
+        { row: 3, col: 3, content: 'content7' },
+        { row: 4, col: 1, colSpan: 2, content: 'content8' },
+        { row: 5, col: 1, colSpan: 2, content: 'content9' },
+        { row: 4, col: 3, content: 'content10' },
+        { row: 5, col: 3, content: 'content11' },
+      ],
+      tags: tags,
+      articles: articles,
+      recommendedArticles: recommendedArticles,
+      selectedDate: new Date(),
+    };
+  },
+  methods: {
+    handleValueChange(event) {
+      this.selectedDate = new Date(event.value);
+      this.articles = this.articles.sort(() => Math.random() - 0.5);
+      this.recommendedArticles = this.recommendedArticles.sort(
+        () => Math.random() - 0.5
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/gridlayout/overview/styles.css b/vue-options-api-demos/layout/gridlayout/overview/styles.css
new file mode 100644
index 00000000..aa69aafa
--- /dev/null
+++ b/vue-options-api-demos/layout/gridlayout/overview/styles.css
@@ -0,0 +1,83 @@
+.grid-layout-container { overflow-x: auto; }
+
+.k-grid-layout {
+    width: 870px;
+    margin: auto;
+}
+
+.article, .card-article {
+    gap: 16px;
+    color: #656565;
+}
+
+.card-article {
+    padding: 16px;
+    margin-bottom: 8px;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 3px;
+}
+
+.article-description { gap: 6px; }
+
+.article-description .date,
+.card-article-description .date {
+    font-size: 10px;
+    line-height: 20px;
+}
+
+.article-description .separator,
+.card-article-description .separator {
+    padding: 0 5px;
+}
+
+.article-position { font-size: 32px; }
+
+.article-description .title {
+    font-size: 14px;
+    line-height: 20px;
+}
+
+.article-description .author {
+    font-size: 12px;
+    line-height: 20px;
+}
+
+.card-article-description .title {
+    font-size: 18px;
+    line-height: 24px;
+}
+
+.card-article-description .sub-title {
+    font-size: 14px;
+    line-height: 24px;
+}
+
+.card-article-description .author {
+    font-size: 14px;
+    line-height: 20px;
+    padding-bottom: 4px;
+}
+
+.k-card-horizontal .k-card-image.card-article-image {
+    max-width: 225px;
+}
+
+.card-article .photo-text {
+    text-align: right;
+    font-style: italic;
+    font-size: 10px;
+    opacity: 0.7;
+}
+
+.k-chip-list {
+    padding: 5px 0px;
+    grid-gap: 6px;
+    margin-top: 8px;
+}
+
+.k-chip {
+    margin: 0px;
+    border-radius: 2px;
+}
+
+.event-calendar { width: 100%; }
diff --git a/vue-options-api-demos/layout/menu/data-binding/local/main.js b/vue-options-api-demos/layout/menu/data-binding/local/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/data-binding/local/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/menu/data-binding/local/main.vue b/vue-options-api-demos/layout/menu/data-binding/local/main.vue
new file mode 100644
index 00000000..dec63ebd
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/data-binding/local/main.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <div>
+      <kendo-menu :items="items" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Menu } from "@progress/kendo-vue-layout";
+
+export default {
+  components: {
+    "kendo-menu": Menu,
+  },
+  data: function () {
+    return {
+      items: [
+        {
+          text: "First item",
+        },
+        {
+          text: "Second item",
+          items: [
+            {
+              text: "Second item child item",
+            },
+          ],
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/menu/data-binding/remote/main.js b/vue-options-api-demos/layout/menu/data-binding/remote/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/data-binding/remote/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/menu/data-binding/remote/main.vue b/vue-options-api-demos/layout/menu/data-binding/remote/main.vue
new file mode 100644
index 00000000..88e6cd5b
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/data-binding/remote/main.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <div>
+      <kendo-menu :items="items" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Menu } from "@progress/kendo-vue-layout";
+
+export default {
+  components: {
+    "kendo-menu": Menu,
+  },
+  mounted: function () {
+    fetch(this.url)
+      .then((response) => response.json())
+      .then((json) => {
+        this.items = this.mapItems(json.value);
+      });
+  },
+  data: function () {
+    return {
+      url:
+        "https://odatasampleservices.azurewebsites.net/V4/Northwind/Northwind.svc/Categories?$expand=Products",
+      items: [],
+    };
+  },
+  methods: {
+    mapItems: function (items) {
+      return items.map((item) => {
+        const result = {
+          text: item.CategoryName,
+        };
+
+        if (item.Products) {
+          result.items = item.Products.map((childItem) => {
+            return {
+              text: childItem.ProductName,
+            };
+          });
+        }
+
+        return result;
+      });
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/menu/events/Logger.vue b/vue-options-api-demos/layout/menu/events/Logger.vue
new file mode 100644
index 00000000..aec622fe
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/events/Logger.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="example-config">
+    <h5>{{ title }}</h5>
+    <ul class="event-log">
+      <li v-for="(event, idx) in events" :key="idx">{{ event }}</li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    events: Array,
+    title: String,
+  },
+};
+</script>
+
+<style>
+.example-config {
+  margin: 0 0 20px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+  margin: 0;
+  padding: 0;
+  max-height: 100px;
+  overflow-y: auto;
+  list-style-type: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: white;
+}
+.event-log li {
+  margin: 0;
+  padding: 0.3em;
+  line-height: 1.2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+  margin-bottom: -1px;
+}
+</style>
diff --git a/vue-options-api-demos/layout/menu/events/main.js b/vue-options-api-demos/layout/menu/events/main.js
new file mode 100644
index 00000000..1f1c6c86
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/events/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
+
diff --git a/vue-options-api-demos/layout/menu/events/main.vue b/vue-options-api-demos/layout/menu/events/main.vue
new file mode 100644
index 00000000..ccf0f910
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/events/main.vue
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <kendo-menu :items="items" @select="onMenuSelect" />
+    <br />
+    <br />
+    <Logger :title="'Events list'" :events="eventsList" />
+  </div>
+</template>
+
+<script>
+import { Menu } from "@progress/kendo-vue-layout";
+import Logger from "./Logger.vue";
+
+export default {
+  components: {
+    "kendo-menu": Menu,
+    Logger,
+  },
+  computed: {
+    eventsList() {
+      return this.events;
+    },
+  },
+  data: function () {
+    return {
+      events: [],
+      items: [
+        {
+          text: "First item",
+        },
+        {
+          text: "Second item",
+          items: [
+            {
+              text: "Second item child item",
+            },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    onMenuSelect(e) {
+      this.events.unshift("Menu Item '" + e.item.text +"' was selected");
+    },
+  },
+};
+</script>
+
diff --git a/vue-options-api-demos/layout/menu/items/properties/disabled/main.js b/vue-options-api-demos/layout/menu/items/properties/disabled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/items/properties/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/menu/items/properties/disabled/main.vue b/vue-options-api-demos/layout/menu/items/properties/disabled/main.vue
new file mode 100644
index 00000000..af669f1d
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/items/properties/disabled/main.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <div>
+      <kendo-menu :items="items" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Menu } from "@progress/kendo-vue-layout";
+
+export default {
+  components: {
+    "kendo-menu": Menu,
+  },
+  data: function () {
+    return {
+      items: [
+        {
+          text: "Item1",
+          disabled: true,
+          items: [
+            {
+              text: "Item1.1",
+            },
+          ],
+        },
+        {
+          text: "Item2",
+          disabled: true,
+        },
+      ],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/menu/items/properties/icon/main.js b/vue-options-api-demos/layout/menu/items/properties/icon/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/items/properties/icon/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/menu/items/properties/icon/main.vue b/vue-options-api-demos/layout/menu/items/properties/icon/main.vue
new file mode 100644
index 00000000..ecb747ba
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/items/properties/icon/main.vue
@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <div>
+      <kendo-menu :items="items" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Menu } from "@progress/kendo-vue-layout";
+import {
+  folderIcon,
+  fileIcon,
+  fileImageIcon,
+  filePdfIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    "kendo-menu": Menu,
+  },
+  data: function () {
+    return {
+      items: [
+        {
+          text: "My Web Site",
+          svgIcon: folderIcon,
+          items: [
+            {
+              text: "images",
+              svgIcon: folderIcon,
+              items: [
+                {
+                  text: "logo.png",
+                  svgIcon: fileImageIcon,
+                },
+                {
+                  text: "body-back.png",
+                  svgIcon: fileImageIcon,
+                },
+                {
+                  text: "my-photo.png",
+                  svgIcon: fileImageIcon,
+                },
+              ],
+            },
+            {
+              text: "resources",
+              svgIcon: folderIcon,
+              items: [
+                {
+                  text: "pdf",
+                  svgIcon: folderIcon,
+                  items: [
+                    {
+                      text: "prices.pdf",
+                      svgIcon: filePdfIcon,
+                    },
+                    {
+                      text: "brochure.pdf",
+                      svgIcon: filePdfIcon,
+                    },
+                  ],
+                },
+                {
+                  text: "zip",
+                  svgIcon: folderIcon,
+                },
+              ],
+            },
+            {
+              text: "about.html",
+              svgIcon: fileIcon,
+            },
+            {
+              text: "contacts.html",
+              svgIcon: fileIcon,
+            },
+            {
+              text: "index.html",
+              svgIcon: fileIcon,
+            },
+            {
+              text: "portfolio.html",
+              svgIcon: fileIcon,
+            },
+          ],
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/menu/items/properties/separator/main.js b/vue-options-api-demos/layout/menu/items/properties/separator/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/items/properties/separator/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/menu/items/properties/separator/main.vue b/vue-options-api-demos/layout/menu/items/properties/separator/main.vue
new file mode 100644
index 00000000..f8ff79ea
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/items/properties/separator/main.vue
@@ -0,0 +1,34 @@
+<template>
+    <div>
+      <div>
+        <kendo-menu :items="items" />
+      </div>
+    </div>
+  </template>
+
+  <script>
+  import { Menu } from "@progress/kendo-vue-layout";
+
+  export default {
+    components: {
+      "kendo-menu": Menu,
+    },
+    data: function () {
+      return {
+        items: [
+          { text: "Item1",
+                items: [
+                    { text: "Child item 1.1" },
+                    { text: "Child item 1.2" },
+                    { separator: true },
+                    { text: "Child item 1.3" }
+                ]
+          },
+          { text: "Item2" },
+          { separator: true },
+          { text: "Item3" }
+        ]
+      };
+    },
+  };
+  </script>
diff --git a/vue-options-api-demos/layout/menu/items/properties/styles/main.js b/vue-options-api-demos/layout/menu/items/properties/styles/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/items/properties/styles/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/menu/items/properties/styles/main.vue b/vue-options-api-demos/layout/menu/items/properties/styles/main.vue
new file mode 100644
index 00000000..c0d52194
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/items/properties/styles/main.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <div>
+      <kendo-menu :items="items" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Menu } from "@progress/kendo-vue-layout";
+
+export default {
+  components: {
+    "kendo-menu": Menu,
+  },
+  data: function () {
+    return {
+      items: [
+        {
+          text: "Item1",
+          cssClass: "active",
+        },
+        {
+          text: "Item2",
+          cssStyle: {
+            backgroundColor: "#d3d3d3",
+          },
+        },
+      ],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/menu/items/properties/styles/styles.css b/vue-options-api-demos/layout/menu/items/properties/styles/styles.css
new file mode 100644
index 00000000..ca2eeaf5
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/items/properties/styles/styles.css
@@ -0,0 +1,3 @@
+.active {
+    box-shadow: inset 0 0 3px 1px #ff6358;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/menu/items/properties/text/main.js b/vue-options-api-demos/layout/menu/items/properties/text/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/items/properties/text/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/menu/items/properties/text/main.vue b/vue-options-api-demos/layout/menu/items/properties/text/main.vue
new file mode 100644
index 00000000..fd4e4f44
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/items/properties/text/main.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <div>
+      <kendo-menu :items="items" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Menu } from "@progress/kendo-vue-layout";
+
+export default {
+  components: {
+    "kendo-menu": Menu,
+  },
+  data: function () {
+    return {
+      items: [
+        {
+          text: "First item",
+          items: [{ text: "Child item 1.1" }, { text: "Child item 1.2" }],
+        },
+        {
+          text: "Second item",
+        },
+      ],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/menu/items/properties/url/main.js b/vue-options-api-demos/layout/menu/items/properties/url/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/items/properties/url/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/menu/items/properties/url/main.vue b/vue-options-api-demos/layout/menu/items/properties/url/main.vue
new file mode 100644
index 00000000..6ba2ff51
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/items/properties/url/main.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <div>
+      <kendo-menu :items="items" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Menu } from "@progress/kendo-vue-layout";
+
+export default {
+  components: {
+    "kendo-menu": Menu,
+  },
+  data: function () {
+    return {
+      items: [
+        {
+          text: "First item",
+          url: "https://www.example.com/?item=1.1",
+          items: [{ text: "Child item 1.1" }, { text: "Child item 1.2" }],
+        },
+        {
+          text: "Second item",
+          url: "https://www.example.com/?item=2",
+        },
+      ],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/menu/items/rendering/content-render-with-popup/items.json b/vue-options-api-demos/layout/menu/items/rendering/content-render-with-popup/items.json
new file mode 100644
index 00000000..8b372d28
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/items/rendering/content-render-with-popup/items.json
@@ -0,0 +1,16 @@
+[{
+    "text": "Order ID", "items": [
+        { "text": "Filter", "icon": "filter-sm" },
+        { "text": "Sort Ascending", "icon": "sort-asc-sm" },
+        { "text": "Sort Descending", "icon": "sort-desc-sm" }]
+}, {
+    "text": "Ship Country", "items": [
+        { "text": "Filter", "icon": "filter-sm" },
+        { "text": "Sort Ascending", "icon": "sort-asc-sm" },
+        { "text": "Sort Descending", "icon": "sort-desc-sm" }]
+}, {
+    "text": "Ship Address", "items": [
+        { "text": "Filter", "icon": "filter-sm" },
+        { "text": "Sort Ascending", "icon": "sort-asc-sm" },
+        { "text": "Sort Descending", "icon": "sort-desc-sm" }]
+}]
diff --git a/vue-options-api-demos/layout/menu/items/rendering/content-render-with-popup/main.js b/vue-options-api-demos/layout/menu/items/rendering/content-render-with-popup/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/items/rendering/content-render-with-popup/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/menu/items/rendering/content-render-with-popup/main.vue b/vue-options-api-demos/layout/menu/items/rendering/content-render-with-popup/main.vue
new file mode 100644
index 00000000..3bfe24d8
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/items/rendering/content-render-with-popup/main.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <div>
+      <kendo-menu :items="items" :item-render="itemRender">
+        <template v-slot:myTemplate="{ props }">
+          `itemId: ${props.itemId}, text: ${props.item.text}`;
+        </template>
+      </kendo-menu>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Menu } from "@progress/kendo-vue-layout";
+import {
+  heartIcon
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    "kendo-menu": Menu,
+  },
+  data: function () {
+    return {
+      itemRender: "myTemplate",
+      items: [
+        {
+          text: "Item1",
+        },
+        {
+          text: "Item2",
+          svgIcon: heartIcon,
+          items: ["Item2.1", "Item2.2"],
+        },
+      ],
+    };
+  },
+  methods: {
+    resetMenu () {
+      this.$refs.menu.reset();
+    },
+    clearFilter() {
+      setChosenFilter("");
+    }
+  }
+};
+</script>
diff --git a/vue-options-api-demos/layout/menu/items/rendering/content-render/main.js b/vue-options-api-demos/layout/menu/items/rendering/content-render/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/items/rendering/content-render/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/menu/items/rendering/content-render/main.vue b/vue-options-api-demos/layout/menu/items/rendering/content-render/main.vue
new file mode 100644
index 00000000..84f04d65
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/items/rendering/content-render/main.vue
@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <div>
+      <kendo-menu :items="items">
+        <template v-slot:contentRender="{ props }">
+          <div
+            :style="{ padding: '10px' }"
+          >
+            Custom content for itemId: {{props.itemId}}, text: {{props.item.text}}
+          </div>
+        </template>
+      </kendo-menu>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Menu } from "@progress/kendo-vue-layout";
+import {
+  heartIcon
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    "kendo-menu": Menu,
+  },
+  data: function () {
+    return {
+      items: [
+        {
+          text: "Item1",
+          contentRender: "contentRender",
+        },
+        {
+          text: "Item2",
+          svgIcon: heartIcon,
+          items: [{ text: 'Item2.1' },{ text: 'Item2.2'}]
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/menu/items/rendering/item-render/main.js b/vue-options-api-demos/layout/menu/items/rendering/item-render/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/items/rendering/item-render/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/menu/items/rendering/item-render/main.vue b/vue-options-api-demos/layout/menu/items/rendering/item-render/main.vue
new file mode 100644
index 00000000..e278cec9
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/items/rendering/item-render/main.vue
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <div>
+      <kendo-menu :items="items">
+        <template v-slot:itemRender="{ props }">
+          <div>itemId: {{ props.itemId }}, Custom text</div>
+        </template>
+      </kendo-menu>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Menu } from "@progress/kendo-vue-layout";
+import {
+  heartIcon
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    "kendo-menu": Menu,
+  },
+  data: function () {
+    return {
+      items: [
+        {
+          text: "Item1",
+          render: "itemRender",
+        },
+        {
+          text: "Item2",
+          svgIcon: heartIcon,
+          items: [{ text: 'Item2.1' }, { text: 'Item2.2' }],
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/menu/items/rendering/link-render/main.js b/vue-options-api-demos/layout/menu/items/rendering/link-render/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/items/rendering/link-render/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/menu/items/rendering/link-render/main.vue b/vue-options-api-demos/layout/menu/items/rendering/link-render/main.vue
new file mode 100644
index 00000000..7f828353
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/items/rendering/link-render/main.vue
@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <div>
+      <kendo-menu :items="items">
+        <template v-slot:linkRender="{ props }">
+            <MenuItemLink :url="props.item.url" :opened="props.opened">
+        
+          <span v-if="props.item.icon"
+            :class="`k-icon k-i-${props.item.icon}`"
+            role="presentation"
+            key="0"
+          />
+            {{ props.item.text }}
+          <MenuItemArrow v-if="props.item.items && props.item.items.length > 0"
+            :itemId="props.itemId"
+            :vertical-menu="false"
+            :dir="props.dir"
+            key="1"
+          />
+          </MenuItemLink>
+        </template>
+      </kendo-menu>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Menu, MenuItemLink, MenuItemArrow } from "@progress/kendo-vue-layout";
+import {
+  heartIcon
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    "kendo-menu": Menu,
+    MenuItemLink,
+    MenuItemArrow
+  },
+  data: function () {
+    return {
+      items: [
+        { text: "Item1" },
+        {
+          text: "Item2",
+          linkRender: 'linkRender',
+          svgIcon: heartIcon,
+          items: [{ text: "Item2.1" }, { text: "Item2.2" }],
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/menu/items/rendering/menu-item-render/main.js b/vue-options-api-demos/layout/menu/items/rendering/menu-item-render/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/items/rendering/menu-item-render/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/menu/items/rendering/menu-item-render/main.vue b/vue-options-api-demos/layout/menu/items/rendering/menu-item-render/main.vue
new file mode 100644
index 00000000..8527476e
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/items/rendering/menu-item-render/main.vue
@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <Menu :items="items" :item-render="itemRender">
+      <template v-slot:itemRender="{ props }">
+        <div>itemId: {{ props.itemId }}, Custom text</div>
+      </template>
+    </Menu>
+  </div>
+</template>
+
+<script>
+import { Menu } from "@progress/kendo-vue-layout";
+import {
+  filterSmallIcon,
+  sortAscSmallIcon,
+  sortDescSmallIcon,
+} from "@progress/kendo-svg-icons";
+export default {
+  components: {
+    Menu,
+  },
+  data: function () {
+    return {
+      itemRender: "itemRender",
+      items: [
+        {
+          text: "Order ID",
+          items: [
+            { text: "Filter", svgIcon: filterSmallIcon },
+            { text: "Sort Ascending", svgIcon: sortAscSmallIcon },
+            { text: "Sort Descending", svgIcon: sortDescSmallIcon },
+          ],
+        },
+        {
+          text: "Ship Country",
+          items: [
+            { text: "Filter", svgIcon: filterSmallIcon },
+            { text: "Sort Ascending", svgIcon: sortAscSmallIcon },
+            { text: "Sort Descending", svgIcon: sortDescSmallIcon },
+          ],
+        },
+        {
+          text: "Ship Address",
+          items: [
+            { text: "Filter", svgIcon: filterSmallIcon },
+            { text: "Sort Ascending", svgIcon: sortAscSmallIcon },
+            { text: "Sort Descending", svgIcon: sortDescSmallIcon },
+          ],
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/menu/items/rendering/menu-link-render/main.js b/vue-options-api-demos/layout/menu/items/rendering/menu-link-render/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/items/rendering/menu-link-render/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/menu/items/rendering/menu-link-render/main.vue b/vue-options-api-demos/layout/menu/items/rendering/menu-link-render/main.vue
new file mode 100644
index 00000000..9e30e111
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/items/rendering/menu-link-render/main.vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <div>
+      <kendo-menu :items="items" :link-render="'myTemplate'">
+        <template v-slot:myTemplate="{ props }">
+            <MenuItemLink :url="props.item.url" :opened="props.opened">
+        
+          <span v-if="props.item.icon"
+            :class="`k-icon k-i-${props.item.icon}`"
+            role="presentation"
+            key="0"
+          />
+            {{ props.item.text }}
+          <MenuItemArrow v-if="props.item.items && props.item.items.length > 0"
+            :itemId="props.itemId"
+            :vertical-menu="false"
+            :dir="props.dir"
+            key="1"
+          />
+          </MenuItemLink>
+        </template>
+      </kendo-menu>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Menu, MenuItemLink, MenuItemArrow } from "@progress/kendo-vue-layout";
+import {
+  heartIcon
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    "kendo-menu": Menu,
+    MenuItemLink,
+    MenuItemArrow
+  },
+  data: function () {
+    return {
+      items: [
+        { text: "Item1" },
+        {
+          text: "Item2",
+          svgIcon: heartIcon,
+          items: [{ text: "Item2.1" }, { text: "Item2.2" }],
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/menu/localization/Menu.vue b/vue-options-api-demos/layout/menu/localization/Menu.vue
new file mode 100644
index 00000000..014d5cc2
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/localization/Menu.vue
@@ -0,0 +1,107 @@
+<template>
+    <div>
+        <div class="example-config">
+            <dropdownlist :style="{ width: '230px' }" class="localeDropDownList" :value="currentLocale"
+                :text-field="'language'" @change="localeChange" :data-items="locales">
+            </dropdownlist>
+        </div>
+        <kendo-menu :items="items" />
+    </div>
+</template>
+  
+<script>
+import { Menu } from '@progress/kendo-vue-layout';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+
+export default {
+    name: 'App',
+    components: {
+        dropdownlist: DropDownList,
+        'kendo-menu': Menu,
+    },
+    inject: {
+        kendoLocalizationService: { default: null },
+    },
+    data: function () {
+        return {
+            currentLocale: {
+                language: 'English',
+                locale: 'en',
+            },
+            locales: [
+                {
+                    language: 'English',
+                    locale: 'en',
+                },
+                {
+                    language: 'French',
+                    locale: 'fr',
+                },
+                {
+                    language: 'Spanish',
+                    locale: 'es',
+                },
+            ],
+            localizationLanguage: 'English',
+        };
+    },
+    computed: {
+        items() {
+            return [
+                {
+                    text: this.item1,
+                    items: [
+                        { text: this.item11 },
+                        {
+                            text: this.item12,
+                            items: [{ text: 'Item1.2.1' }, { text: 'Item1.2.2' }],
+                        },
+                    ],
+                },
+                {
+                    text: this.item2,
+                    items: [{ text: this.item21 }, { text: this.item22 }],
+                },
+            ];
+        },
+        locale() {
+            if (this.localizationLanguage === 'Spanish') {
+                return 'es';
+            }
+
+            if (this.localizationLanguage === 'French') {
+                return 'fr';
+            }
+
+            return 'en';
+        },
+        item1() {
+            return provideLocalizationService(this).toLanguageString('item1');
+        },
+        item11() {
+            return provideLocalizationService(this).toLanguageString('item11');
+        },
+        item12() {
+            return provideLocalizationService(this).toLanguageString('item12');
+        },
+        item2() {
+            return provideLocalizationService(this).toLanguageString('item2');
+        },
+        item21() {
+            return provideLocalizationService(this).toLanguageString('item21');
+        },
+        item22() {
+            return provideLocalizationService(this).toLanguageString('item22');
+        },
+    },
+    methods: {
+        localeChange(e) {
+            this.currentLocale = e.target.value;
+            this.localizationLanguage = e.target.value.language;
+            this.$emit('localizationLanguageChange', this.localizationLanguage);
+        },
+    },
+};
+</script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/menu/localization/en-US.js b/vue-options-api-demos/layout/menu/localization/en-US.js
new file mode 100644
index 00000000..cf32853a
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/localization/en-US.js
@@ -0,0 +1,9 @@
+// Custom EN Messages
+export const enCustomMessages = {
+    item1: 'Item 1 in English',
+    item11: 'Item 1.1 in English',
+    item12: 'Item 1.2 in English',
+    item2: 'Item 2 in English',
+    item21: 'Item 2.1 in English',
+    item22: 'Item 2.2 in English',
+};
diff --git a/vue-options-api-demos/layout/menu/localization/es.js b/vue-options-api-demos/layout/menu/localization/es.js
new file mode 100644
index 00000000..9c9604d9
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/localization/es.js
@@ -0,0 +1,9 @@
+// Custom ES Messages
+export const esCustomMessages = {
+    item1: 'Item 1 in Spanish',
+    item11: 'Item 1.1 in Spanish',
+    item12: 'Item 1.2 in Spanish',
+    item2: 'Item 2 in Spanish',
+    item21: 'Item 2.1 in Spanish',
+    item22: 'Item 2.2 in Spanish',
+};
diff --git a/vue-options-api-demos/layout/menu/localization/fr.js b/vue-options-api-demos/layout/menu/localization/fr.js
new file mode 100644
index 00000000..d9717ecb
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/localization/fr.js
@@ -0,0 +1,9 @@
+// Custom FR Messages
+export const frCustomMessages = {
+    item1: 'Item 1 in French',
+    item11: 'Item 1.1 in French',
+    item12: 'Item 1.2 in French',
+    item2: 'Item 2 in French',
+    item21: 'Item 2.1 in French',
+    item22: 'Item 2.2 in French',
+};
diff --git a/vue-options-api-demos/layout/menu/localization/main.js b/vue-options-api-demos/layout/menu/localization/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/localization/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/menu/localization/main.vue b/vue-options-api-demos/layout/menu/localization/main.vue
new file mode 100644
index 00000000..9cff1285
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/localization/main.vue
@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <LocalizationProvider :language="localizationLanguage">
+      <Menu @localizationLanguageChange="onLocalizationLanguageChange"></Menu>
+    </LocalizationProvider>
+  </div>
+</template>
+
+<script>
+import Menu from './Menu.vue';
+import {
+  LocalizationProvider,
+  loadMessages,
+} from '@progress/kendo-vue-intl';
+
+import { enCustomMessages } from './en-US';
+import { esCustomMessages } from './es';
+import { frCustomMessages } from './fr';
+
+loadMessages(enCustomMessages, 'English');
+loadMessages(esCustomMessages, 'Spanish');
+loadMessages(frCustomMessages, 'French');
+
+export default {
+  components: {
+    Menu: Menu,
+    LocalizationProvider,
+  },
+  data: function () {
+    return {
+      currentLocale: {
+        language: 'English',
+        locale: 'en',
+      },
+      locales: [
+        {
+          language: 'English',
+          locale: 'en',
+        },
+        {
+          language: 'French',
+          locale: 'fr',
+        },
+        {
+          language: 'Spanish',
+          locale: 'es',
+        },
+      ],
+      localizationLanguage: 'English',
+    };
+  },
+  methods: {
+    onLocalizationLanguageChange(e) {
+      this.localizationLanguage = e;
+    },
+  },
+};
+</script>
+
+<style></style>
diff --git a/vue-options-api-demos/layout/menu/open-close/click/main.js b/vue-options-api-demos/layout/menu/open-close/click/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/open-close/click/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/menu/open-close/click/main.vue b/vue-options-api-demos/layout/menu/open-close/click/main.vue
new file mode 100644
index 00000000..bae07def
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/open-close/click/main.vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <div>
+      <kendo-menu :items="items" :open-on-click="true" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Menu } from "@progress/kendo-vue-layout";
+
+export default {
+  components: {
+    "kendo-menu": Menu,
+  },
+
+  data: function () {
+    return {
+      items: [
+        {
+          text: "Item1",
+
+          items: [
+            { text: "Item1.1" },
+
+            {
+              text: "Item1.2",
+
+              items: [{ text: "Item1.2.1" }, { text: "Item1.2.2" }],
+            },
+          ],
+        },
+        {
+          text: "Item2",
+
+          items: [
+            { text: "Item2.1" },
+
+            { text: "Item2.2" },
+
+            { text: "Item2.3" },
+          ],
+        },
+        {
+          text: "Item3",
+        },
+      ],
+    };
+  },
+};
+</script>
+
diff --git a/vue-options-api-demos/layout/menu/open-close/hover/main.js b/vue-options-api-demos/layout/menu/open-close/hover/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/open-close/hover/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/menu/open-close/hover/main.vue b/vue-options-api-demos/layout/menu/open-close/hover/main.vue
new file mode 100644
index 00000000..563db303
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/open-close/hover/main.vue
@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <div>
+      <kendo-menu
+        :items="items"
+        :hover-open-delay="0"
+        :hover-close-delay="200"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Menu } from "@progress/kendo-vue-layout";
+
+export default {
+  components: {
+    "kendo-menu": Menu,
+  },
+  data: function () {
+    return {
+      items: [
+        {
+          text: "Item1",
+          items: [
+            { text: "Item1.1" },
+            {
+              text: "Item1.2",
+              items: [{ text: "Item1.2.1" }, { text: "Item1.2.2" }],
+            },
+          ],
+        },
+        {
+          text: "Item2",
+          items: [
+            { text: "Item2.1" },
+            { text: "Item2.2" },
+            { text: "Item2.3" },
+          ],
+        },
+        {
+          text: "Item3",
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/menu/overview/main.js b/vue-options-api-demos/layout/menu/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/menu/overview/main.vue b/vue-options-api-demos/layout/menu/overview/main.vue
new file mode 100644
index 00000000..09cd5a32
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/overview/main.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <div>
+      <kendo-menu :items="items" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Menu } from "@progress/kendo-vue-layout";
+
+export default {
+  components: {
+    "kendo-menu": Menu,
+  },
+  data: function () {
+    return {
+      items: [
+        {
+          text: "Item1",
+          items: [
+            { text: "Item1.1" },
+            {
+              text: "Item1.2",
+              items: [{ text: "Item1.2.1" }, { text: "Item1.2.2" }],
+            },
+          ],
+        },
+        {
+          text: "Item2",
+          items: [
+            { text: "Item2.1" },
+            { text: "Item2.2" },
+            { text: "Item2.3" },
+          ],
+        },
+        {
+          text: "Item3",
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/menu/routing/About.vue b/vue-options-api-demos/layout/menu/routing/About.vue
new file mode 100644
index 00000000..fc3752c7
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/routing/About.vue
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <h2>About</h2>
+    <div>
+      <p>
+        So cuffed therefore by some sadistically mallard rewrote yet
+        accommodatingly more cat adequate pesky far this dear fitting and
+        groundhog horse some selfish jeepers juggled about since upheld heatedly
+        well much.
+      </p>
+      <p>
+        Therefore falcon usefully crab during onto hello regally rat wiped
+        misread reluctant unlike iguanodon fish far bald abjectly far chameleon
+        more scurrilous gagged virtuously sufficient arrogant cobra froze dog
+        waywardly staunch thus consoled.
+      </p>
+      <p>
+        Amphibious darn well densely far meanly inanimately incoherent away
+        flamingo outside yet jeez that yawned secret evasive dear overrode rat
+        cow one overpaid far hatchet much.
+      </p>
+      <p>
+        Had aerial well well coasted darn chuckled studied underlay fatally the
+        but among because patient or shook depending much sloth wetted cheered
+        some bee.
+      </p>
+      <p>
+        Bombastically yikes some coquettish erroneously in therefore
+        disgracefully glanced some connected and goodness more read marvelous up
+        one rebukingly darn fuzzily.
+      </p>
+      <p>
+        Meadowlark and hence regarding flaunting amongst steadfastly demurely
+        like far and stiffly bled reluctant alongside jeez this save opposite
+        well and this shuddered and smoked wherever condescendingly hey onto
+        much.
+      </p>
+      <p>
+        Hello gosh gosh up effortlessly valiant hotly less rubbed gerbil and
+        ouch inside fatuous suitably far fuzzily unihibitedly locked froze
+        timidly hello much revealed lorikeet lantern this much one and far
+        decidedly.
+      </p>
+    </div>
+  </div>
+</template>
+<script>
+export default {};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/menu/routing/Home.vue b/vue-options-api-demos/layout/menu/routing/Home.vue
new file mode 100644
index 00000000..96a78ccc
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/routing/Home.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <h2>Home page</h2>
+    <div>
+      <p>
+        However engaging wherever growled much methodic shamefully more human
+        agreeable gracefully and less equitable insistent gasped that when wasp
+        baboon rebuilt more slept stingily along knew llama.
+      </p>
+      <p>
+        Prim crud far healthy wholesomely more far chortled ouch in adroitly
+        gawked affably reasonably manfully reindeer mysteriously overpaid
+        considering far far until.
+      </p>
+      <p>
+        Red-handed off thickly save aboard mawkishly that amidst moth pending
+        jerkily monogamous some much or creatively indecent neat far jeepers up
+        spoiled about.
+      </p>
+      <p>
+        Owing desperate like one shark or bit yikes up so thus grumbled gosh
+        more bawled much and regardless hey far bought through crud well
+        staunchly hysteric inside incorrect the closed.
+      </p>
+      <p>
+        Industrious jubilant blanched bestially yet that less far far a wow the
+        militant preparatory crudely acrimonious under a towards lemur wedded
+        that while decorously this peered darn a much.
+      </p>
+      <p>
+        Dizzy boundless hence but because moodily and alas a truculently less
+        hardheaded so on ambiguously incompetently less moaned hilarious until
+        one jeepers amid heinously.
+      </p>
+      <p>
+        Where beneath less misspelled across artistically spiteful jeepers much
+        more that when blushed a much a this groundhog therefore far arduous
+        dependent much satanic where dear goodness hummingbird.
+      </p>
+    </div>
+  </div>
+</template>
+<script>
+export default {};
+</script>
diff --git a/vue-options-api-demos/layout/menu/routing/Products.vue b/vue-options-api-demos/layout/menu/routing/Products.vue
new file mode 100644
index 00000000..8d4f3453
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/routing/Products.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <h2>Products</h2>
+    <div>
+      <p>
+        Inclusive and foolishly more on yikes far one vociferous squinted lied
+        much the howled disagreed yet seal needlessly vulgarly far moistly
+        wanton.
+      </p>
+      <p>
+        Human and some barring roadrunner behind swore hello ebulliently pending
+        less upon amiable less amiably dear harsh telepathic regarding hey
+        poignant ahead.
+      </p>
+      <p>
+        Immensely a that gosh accurately by naughtily patted laxly far pangolin
+        ouch this like marvelous bitter crab jeez after unobtrusive flamboyant
+        octopus.
+      </p>
+      <p>
+        So koala that ouch and much porpoise falcon from and wasp curtly crud
+        much more frequently and accidental beneath during far.
+      </p>
+    </div>
+  </div>
+</template>
+<script>
+export default {};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/menu/routing/Team.vue b/vue-options-api-demos/layout/menu/routing/Team.vue
new file mode 100644
index 00000000..ad3d8953
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/routing/Team.vue
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <h3>Team</h3>
+    <div>
+      <p>
+        Leapt sprang volubly that or adroitly cozy sold creepy shuffled spent
+        flirted withdrew gosh zebra prideful swung yawned monkey penguin.
+      </p>
+      <p>
+        This wow flinched one immoral this dear far inflexible newt far outside
+        up hey excluding goodness hello much after feverishly direly fitted wow
+        some youthful crud stark more strict unjustifiable that told one.
+      </p>
+      <p>
+        Shark audible mistook removed tryingly much delicate yet sudden after
+        contrary thus brusque more won wallaby frowningly much censorious spryly
+        thanks circuitous this sewed dreamed wow.
+      </p>
+      <p>
+        The against alas less adoringly some cutting aboard lighted some dear
+        agilely and enticingly before thanks upon was neglectful merrily some
+        porpoise tenably and and groundhog together kiwi much barked miser.
+      </p>
+      <p>
+        Much flamingo mocking much far far some since among ritually since crud
+        near one tartly left far and far this ineffectively goodness mighty some
+        and intricately far.
+      </p>
+      <p>
+        Modestly mastodon hypocritically hatchet gerbil successful dispassionate
+        nefariously and the dangerously far in one less save gosh became and
+        sparing that by alas.
+      </p>
+    </div>
+  </div>
+</template>
+<script>
+export default {};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/menu/routing/index.js b/vue-options-api-demos/layout/menu/routing/index.js
new file mode 100644
index 00000000..fce5e2ad
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/routing/index.js
@@ -0,0 +1,35 @@
+import { createWebHistory, createRouter } from "vue-router";
+import Home from "./Home";
+import About from "./About";
+import Products from "./Products";
+import Team from "./Team";
+
+const routes = [
+    {
+        path: "/layout/menu/routing/home",
+        name: "Home",
+        component: Home
+    },
+    {
+        path: "/layout/menu/routing/about",
+        name: "About",
+        component: About
+    },
+    {
+        path: "/layout/menu/routing/products",
+        name: "Products",
+        component: Products
+    },
+    {
+        path: "/layout/menu/routing/about/team",
+        name: "Team",
+        component: Team
+    }
+];
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+});
+
+export default router;
diff --git a/vue-options-api-demos/layout/menu/routing/main.js b/vue-options-api-demos/layout/menu/routing/main.js
new file mode 100644
index 00000000..b51f2405
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/routing/main.js
@@ -0,0 +1,5 @@
+import { createApp } from "vue";
+import App from "./main.vue";
+import router from "./index.js";
+
+createApp(App).use(router).mount("#app");
diff --git a/vue-options-api-demos/layout/menu/routing/main.vue b/vue-options-api-demos/layout/menu/routing/main.vue
new file mode 100644
index 00000000..229bff33
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/routing/main.vue
@@ -0,0 +1,56 @@
+<template>
+  <kendo-menu :items="items" @select="onSelect" />
+  <router-view />
+</template>
+
+<script>
+import { Menu } from "@progress/kendo-vue-layout";
+
+export default {
+  name: "App",
+  components: { "kendo-menu": Menu },
+  mounted () {
+     this.$router.push(this.items[0].data);
+  },
+  data() {
+    return {
+      items: [
+        {
+          text: "Home",
+          data: {
+            path: "/layout/menu/routing/home",
+          },
+        },
+        {
+          text: "Products",
+          data: {
+            path: "/layout/menu/routing/products",
+          },
+        },
+        {
+          text: "About",
+          data: {
+            path: "/layout/menu/routing/about",
+          },
+          items: [
+            {
+              text: "Team",
+              data: {
+                path: "/layout/menu/routing/about/team",
+              },
+            },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    onSelect(e) {
+      this.$router.push(e.item.data);
+    },
+  },
+};
+</script>
+
+<style>
+</style>
diff --git a/vue-options-api-demos/layout/menu/vertical/main.js b/vue-options-api-demos/layout/menu/vertical/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/vertical/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/menu/vertical/main.vue b/vue-options-api-demos/layout/menu/vertical/main.vue
new file mode 100644
index 00000000..dc7d4890
--- /dev/null
+++ b/vue-options-api-demos/layout/menu/vertical/main.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <div>
+      <kendo-menu
+        :items="items"
+        :vertical="true"
+        :style="{
+          display: 'inline-block',
+        }"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Menu } from "@progress/kendo-vue-layout";
+
+export default {
+  components: {
+    "kendo-menu": Menu,
+  },
+  data: function () {
+    return {
+      items: [
+        {
+          text: "Item1",
+          items: [
+            { text: "Item1.1" },
+            {
+              text: "Item1.2",
+              items: [{ text: "Item1.2.1" }, { text: "Item1.2.2" }],
+            },
+          ],
+        },
+        {
+          text: "Item2",
+          items: [
+            { text: "Item2.1" },
+            { text: "Item2.2" },
+            { text: "Item2.3" },
+          ],
+        },
+        {
+          text: "Item3",
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/overview/AccountDetails.vue b/vue-options-api-demos/layout/overview/AccountDetails.vue
new file mode 100644
index 00000000..8ae89334
--- /dev/null
+++ b/vue-options-api-demos/layout/overview/AccountDetails.vue
@@ -0,0 +1,93 @@
+<template>
+  <form-element>
+    <fieldset
+      class="k-form-fieldset"
+      :style="{
+        width: '500px',
+        margin: '0 auto',
+      }"
+    >
+      <field
+        :id="'username'"
+        :name="'username'"
+        :label="'Username'"
+        :component="'myTemplate'"
+        :validator="userNameValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          />
+        </template>
+      </field>
+      <field
+        :id="'email'"
+        :name="'email'"
+        :label="'Email'"
+        :hint="'Hint: Enter your personal email address.'"
+        :component="'myTemplate'"
+        :validator="emailValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></forminput>
+        </template>
+      </field>
+      <field
+        :id="'password'"
+        :name="'password'"
+        :label="'Password'"
+        :component="'myTemplate'"
+        :type="'password'"
+        :hint="'Hint: enter alphanumeric characters only.'"
+        :validator="passwordValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></forminput>
+        </template>
+      </field>
+    </fieldset>
+  </form-element>
+</template>
+<script>
+import { Field, FormElement } from '@progress/kendo-vue-form';
+import FormInput from './FormInput.vue';
+import { Button } from '@progress/kendo-vue-buttons';
+
+import {
+  emailValidator,
+  userNameValidator,
+  passwordValidator,
+} from './validators';
+
+export default {
+  components: {
+    field: Field,
+    'form-element': FormElement,
+    forminput: FormInput,
+    kbutton: Button,
+  },
+  inject: {
+    kendoForm: { default: {} },
+  },
+  data: function () {
+    return {
+      emailValidator,
+      userNameValidator,
+      passwordValidator,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/overview/Avatar.vue b/vue-options-api-demos/layout/overview/Avatar.vue
new file mode 100644
index 00000000..bc369d9f
--- /dev/null
+++ b/vue-options-api-demos/layout/overview/Avatar.vue
@@ -0,0 +1,129 @@
+<template>
+  <div :class="'avatar-container'">
+    <div :class="'contact-list'">Contacts</div>
+    <div :class="'contacts-wrapper'">
+      <div v-for="(contact, index) in contactInitials" :key="index">
+        <div class="k-hbox">
+          <avatar :rounded="'full'" :type="'icon'">
+            {{ contact.avatar }}
+          </avatar>
+          <div style="margin-left: 10px">
+            <h2 :class="'contact-name'">
+              {{ contact.name }}
+            </h2>
+            <p :class="'contact-position'">
+              {{ contact.position }}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div v-for="(contact, index) in contactImages" :key="index">
+        <div class="k-hbox">
+          <avatar :rounded="'full'" :type="'image'">
+            <img :src="contact.avatar" :eager="true" :alt="'Avatar Image'" />
+          </avatar>
+          <div style="margin-left: 10px">
+            <h2 :class="'contact-name'">
+              {{ contact.name }}
+            </h2>
+            <p :class="'contact-position'">
+              {{ contact.position }}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div class="k-hbox">
+        <avatar :rounded="'full'" :type="'icon'">
+          <SvgIcon :icon="userIcon" />
+        </avatar>
+        <div style="margin-left: 10px">
+          <h2 :class="'contact-name'">Unknown</h2>
+          <p :class="'contact-position'">Not specified</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Avatar } from "@progress/kendo-vue-layout";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import { userIcon } from "@progress/kendo-svg-icons";
+
+const firstContactImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/RICSU.jpg';
+const secondContactImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/dropdowns/contacts/GOURL.jpg';
+
+const contactImages = [
+  {
+    avatar: firstContactImage,
+    name: "Michael Holz",
+    position: "Manager",
+  },
+  {
+    avatar: secondContactImage,
+    name: "André Stewart",
+    position: "Product Manager",
+  },
+];
+const contactInitials = [
+  {
+    avatar: "JS",
+    name: "Jason Smith",
+    position: "UX Designer",
+  },
+  {
+    avatar: "GP",
+    name: "George Porter",
+    position: "Software Engineer",
+  },
+];
+
+export default {
+  components: {
+    avatar: Avatar,
+    SvgIcon,
+  },
+  data: function () {
+    return {
+      contactImages: contactImages,
+      contactInitials: contactInitials,
+      userIcon,
+    };
+  },
+};
+</script>
+
+<style>
+.avatar-container {
+  width: 280px;
+  margin: auto;
+  padding: 4px 10px;
+  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.26),
+    0px 2px 2px 0px rgba(0, 0, 0, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.08);
+}
+
+.contact-position {
+  margin: 0px;
+  font-size: 0.8em;
+}
+
+.contact-name {
+  font-size: 1.3em;
+  font-weight: normal;
+  margin: 0px;
+}
+
+.contact-list {
+  text-align: center;
+  padding: 4px;
+  font-size: 20px;
+}
+
+.contacts-wrapper {
+  padding: 8px 14px;
+  margin-bottom: 4px;
+  box-shadow: 0px 1px 2px #ccc;
+}
+</style>
diff --git a/vue-options-api-demos/layout/overview/BottomNavigation.vue b/vue-options-api-demos/layout/overview/BottomNavigation.vue
new file mode 100644
index 00000000..4306f654
--- /dev/null
+++ b/vue-options-api-demos/layout/overview/BottomNavigation.vue
@@ -0,0 +1,140 @@
+<template>
+  <div id="test" :class="'example-wrapper-overview-bottomnavigation'">
+    <div :class="'page'">
+      <div :class="'content-bottom-navigation'">
+        <h3 v-if="selected === 0" :class="'title k-color-primary'">Inbox</h3>
+        <h3 v-if="selected === 1" :class="'title k-color-primary'">Calendar</h3>
+        <h3 v-if="selected === 2" :class="'title k-color-primary'">Profile</h3>
+      </div>
+      <BottomNavigation
+        :position-mode="'sticky'"
+        :items="computedItems"
+        @select="onSelect"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { envelopIcon, calendarIcon, userIcon } from '@progress/kendo-svg-icons';
+import { BottomNavigation } from '@progress/kendo-vue-layout';
+
+export default {
+    name: 'App',
+    components: { BottomNavigation },
+
+    data() {
+        return {
+            items: [
+                {
+                    text: 'Inbox',
+                    id: 1,
+                    svgIcon: envelopIcon,
+                    selected: true,
+                },
+                {
+                    text: 'Calendar',
+                    id: 2,
+                    svgIcon: calendarIcon,
+                },
+                {
+                    text: 'Profile',
+                    id: 3,
+                    svgIcon: userIcon,
+                },
+            ],
+            selected: 0,
+        };
+    },
+    computed: {
+        computedItems() {
+            return this.items.map((item, index) => ({
+                ...item,
+                selected: index === this.selected,
+            }));
+        },
+    },
+    methods: {
+        onSelect(e) {
+            this.selected = e.itemIndex;
+        },
+    },
+};
+</script>
+
+<style scoped>
+.example-wrapper-overview-bottomnavigation {
+  width: 350px;
+  margin: 0 auto;
+  box-shadow: 0px 10px 20px #00000029;
+  border-radius: 30px;
+}
+.page {
+  padding: 10px 10px 0 10px;
+}
+.content-bottom-navigation {
+  background: #f9f9f9;
+  border-radius: 30px 30px 0 0;
+  height: 350px;
+}
+.k-bottom-nav {
+  border-radius: 0 0 20px 20px;
+}
+.list {
+  display: flex;
+  flex-direction: column;
+  padding: 0 20px;
+}
+.list-item {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 30px;
+  position: relative;
+}
+.k-avatar {
+  margin-right: 15px;
+}
+.separator {
+  border: 1px solid #ccc;
+}
+.section {
+  background: #ededed;
+  font-weight: bold;
+  padding: 2px 5px;
+  margin-bottom: 15px;
+}
+.centered {
+  margin: 30px auto;
+}
+.v-line {
+  width: 2px;
+  margin: 0 10px 0 15px;
+}
+.profile-image {
+  width: 100px;
+  height: 100px;
+  flex-basis: 100px;
+  padding: 1px;
+  margin: 0 auto;
+}
+.email {
+  font-weight: bold;
+}
+.my-icon {
+  position: absolute;
+  right: 0;
+}
+
+.example-wrapper {
+  width: 300px;
+  margin: 0 auto;
+  box-shadow: 0px 10px 20px #00000029;
+  border-radius: 30px;
+}
+
+.example-wrapper .title {
+  text-align: center;
+  font-size: 30px;
+  padding: 40px 0;
+}
+</style>
diff --git a/vue-options-api-demos/layout/overview/Card.vue b/vue-options-api-demos/layout/overview/Card.vue
new file mode 100644
index 00000000..c512e342
--- /dev/null
+++ b/vue-options-api-demos/layout/overview/Card.vue
@@ -0,0 +1,58 @@
+<template>
+  <card style="width: 300px; margin: auto">
+    <cardImage
+      :src="barcelonaImage"
+    />
+    <cardHeader>
+      <cardTitle>Barcelona</cardTitle>
+    </cardHeader>
+    <cardBody>
+      <p>
+        Barcelona, the cosmopolitan capital of Spain's Catalonia region, is
+        known for its art and architecture.
+      </p>
+      <p>
+        The fantastical Sagrada Família church and other modernist landmarks
+        designed by Antoni Gaudí dot the city.
+      </p>
+    </cardBody>
+    <cardActions>
+      <span>
+        <kbutton :theme-color="'primary'">Map</kbutton>
+      </span>
+      <span>
+        <kbutton :theme-color="'primary'">Weather</kbutton>
+      </span>
+    </cardActions>
+  </card>
+</template>
+
+<script>
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  CardTitle,
+  CardImage,
+  CardActions,
+} from '@progress/kendo-vue-layout';
+import { Button } from '@progress/kendo-vue-buttons';
+const barcelonaImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/card/barcelona.jpg';
+
+export default {
+  components: {
+    card: Card,
+    cardHeader: CardHeader,
+    cardBody: CardBody,
+    cardTitle: CardTitle,
+    cardImage: CardImage,
+    cardActions: CardActions,
+    kbutton: Button,
+  },
+  data() {
+    return {
+      barcelonaImage,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/overview/ContextMenu.vue b/vue-options-api-demos/layout/overview/ContextMenu.vue
new file mode 100644
index 00000000..af0f28e1
--- /dev/null
+++ b/vue-options-api-demos/layout/overview/ContextMenu.vue
@@ -0,0 +1,93 @@
+<template>
+  <div :style="{ display: 'flex', justifyContent: 'center' }">
+    <div :style="rectangularStyle" @contextmenu="handleContextMenu">
+      <p>Right click here to open a Context menu</p>
+    </div>
+    <Popup :show="show" :offset="currentOffset">
+      <Menu
+        :items="items"
+        :vertical="true"
+        :style="{ display: 'inline-block' }"
+      />
+    </Popup>
+  </div>
+</template>
+
+<script>
+import { Menu } from '@progress/kendo-vue-layout';
+import { Popup } from '@progress/kendo-vue-popup';
+
+export default {
+  components: {
+    Menu,
+    Popup,
+  },
+  mounted: function () {
+    document.addEventListener(
+      'click',
+      function () {
+        this.show = false;
+      }.bind(this)
+    );
+  },
+  computed: {
+    currentOffset() {
+      return this.offSet;
+    },
+  },
+  data: function () {
+    return {
+      offSet: {
+        left: 0,
+        top: 0,
+      },
+      show: false,
+      items: [
+        {
+          text: 'Item1',
+          items: [
+            { text: 'Item1.1' },
+            {
+              text: 'Item1.2',
+              items: [{ text: 'Item1.2.1' }, { text: 'Item1.2.2' }],
+            },
+          ],
+        },
+        {
+          text: 'Item2',
+          items: [
+            { text: 'Item2.1' },
+            { text: 'Item2.2' },
+            { text: 'Item2.3' },
+          ],
+        },
+        {
+          text: 'Item3',
+        },
+      ],
+      rectangularStyle: {
+        width: '300px',
+        height: '200px',
+        backgroundColor: '#f6f6f6',
+        borderRadius: '5px',
+        justifyContent: 'center',
+        display: 'flex',
+        position: 'absolute',
+        alignItems: 'center',
+        boxShadow:
+          '0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08)',
+      },
+    };
+  },
+  methods: {
+    handleContextMenu(e) {
+      e.preventDefault();
+      this.offSet = {
+        left: e.clientX,
+        top: e.clientY,
+      };
+      this.show = true;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/overview/ExpansionPanel.vue b/vue-options-api-demos/layout/overview/ExpansionPanel.vue
new file mode 100644
index 00000000..d7d058e5
--- /dev/null
+++ b/vue-options-api-demos/layout/overview/ExpansionPanel.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="wrapper-expansion-panel">
+    <ExpansionPanel
+      :title="'Colombia'"
+      :subtitle="'South America'"
+      :expanded="expanded"
+      @action="handleAction"
+    >
+      <Reveal :appear="expanded">
+        <ExpansionPanelContent v-if="true">
+          <div :class="'content'">
+            <div :class="'image-container'">
+              <img
+                :src="colombiaImage"
+                :alt="'Colombia'"
+              />
+            </div>
+            <span :class="'content-text'">
+              The name “Colombia” is derived from the last name of the Italian
+              navigator Christopher Columbus. It was conceived by the Venezuelan
+              revolutionary Francisco de Miranda as a reference to all of the
+              New World, but especially to those portions under Spanish law. The
+              name was later adopted by the Republic of Colombia of 1819, formed
+              from the territories of the old Viceroyalty of New Granada
+              (modern-day Colombia, Panama, Venezuela, Ecuador, and northwest
+              Brazil).</span
+            >
+          </div>
+        </ExpansionPanelContent>
+      </Reveal>
+    </ExpansionPanel>
+  </div>
+</template>
+<script>
+import {
+  ExpansionPanel,
+  ExpansionPanelContent,
+} from "@progress/kendo-vue-layout";
+import { Reveal } from "@progress/kendo-vue-animation";
+
+const colombiaImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/countries/colombia.jpg';
+
+export default {
+  components: {
+    ExpansionPanel,
+    ExpansionPanelContent,
+    Reveal,
+  },
+  data() {
+    return {
+      expanded: false,
+      colombiaImage
+    };
+  },
+  methods: {
+    handleAction(ev) {
+      this.expanded = !ev.expanded;
+    },
+  },
+};
+</script>
+<style>
+.wrapper-expansion-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.k-expander {
+  width: 600px;
+}
+
+.wrapper-expansion-panel > .content {
+  display: flex;
+}
+
+.image-container {
+  height: 250px;
+  margin-right: 20px;
+}
+
+img {
+  height: 100%;
+}
+
+.content-text {
+  display: block;
+  text-align: justify;
+}
+</style>
diff --git a/vue-options-api-demos/layout/overview/FormInput.vue b/vue-options-api-demos/layout/overview/FormInput.vue
new file mode 100644
index 00000000..e9551d6f
--- /dev/null
+++ b/vue-options-api-demos/layout/overview/FormInput.vue
@@ -0,0 +1,90 @@
+<template>
+  <fieldwrapper>
+    <klabel
+      :class="'k-form-label'"
+      :editor-id="id"
+      :editor-valid="valid"
+      :disabled="disabled"
+      :optional="optional"
+    >
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <kinput
+        :valid="valid"
+        :id="id"
+        :value="value"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :type="type"
+        @input="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { Input } from '@progress/kendo-vue-inputs';
+export default {
+  props: {
+    optional: Boolean,
+    disabled: Boolean,
+    placeholder: String,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: String,
+      default: '',
+    },
+    type: String,
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    kinput: Input,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/overview/GridLayout.vue b/vue-options-api-demos/layout/overview/GridLayout.vue
new file mode 100644
index 00000000..e15160d0
--- /dev/null
+++ b/vue-options-api-demos/layout/overview/GridLayout.vue
@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <div class="example-wrapper-gridlayout">
+      <GridLayout
+        :rows="[
+          { height: '90px' },
+          { height: '90px' },
+          { height: '90px' },
+          { height: '90px' },
+          { height: '90px' },
+        ]"
+        :cols="[{ width: '90px' }, { width: '90px' }, { width: '90px' }]"
+        :gap="{ rows: 5, cols: 5 }"
+        :items="items"
+      >
+        <template v-slot:content1>
+          <div class="box rect">Box</div>
+        </template>
+        <template v-slot:content2>
+          <div class="box">Box</div>
+        </template>
+        <template v-slot:content3>
+          <div class="box">Box</div>
+        </template>
+        <template v-slot:content4>
+          <div class="box big">Box</div>
+        </template>
+        <template v-slot:content5>
+          <div class="box rect">Box</div>
+        </template>
+        <template v-slot:content6>
+          <div class="box">Box</div>
+        </template>
+        <template v-slot:content7>
+          <div class="box">Box</div>
+        </template>
+        <template v-slot:content8>
+          <div class="box">Box</div>
+        </template>
+        <template v-slot:content9>
+          <div class="box">Box</div>
+        </template>
+        <template v-slot:content10>
+          <div class="box">Box</div>
+        </template>
+      </GridLayout>
+    </div>
+  </div>
+</template>
+<script>
+import { GridLayout } from '@progress/kendo-vue-layout';
+
+export default {
+  components: {
+    GridLayout,
+  },
+  data() {
+    return {
+      items: [
+        { row: 1, col: 1, colSpan: 2, content: 'content1' },
+        { row: 1, col: 3, content: 'content2' },
+        { row: 2, col: 1, content: 'content3' },
+        { row: 2, col: 2, colSpan: 2, rowSpan: 2, content: 'content4' },
+        { row: 3, col: 1, rowSpan: 2, content: 'content5' },
+        { row: 4, col: 2, content: 'content6' },
+        { row: 4, col: 3, content: 'content7' },
+        { row: 5, col: 1, content: 'content8' },
+        { row: 5, col: 2, content: 'content9' },
+        { row: 5, col: 3, content: 'content10' },
+      ],
+    };
+  },
+};
+</script>
+
+<style scoped>
+@import './gridlayout-styles.css';
+</style>
diff --git a/vue-options-api-demos/layout/overview/Menu.vue b/vue-options-api-demos/layout/overview/Menu.vue
new file mode 100644
index 00000000..8d7af4b5
--- /dev/null
+++ b/vue-options-api-demos/layout/overview/Menu.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="" style="width: 500px; margin: auto">
+    <div>
+      <kendo-menu :items="items"> </kendo-menu>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Menu } from "@progress/kendo-vue-layout";
+
+export default {
+  components: {
+    "kendo-menu": Menu,
+  },
+  data: function () {
+    return {
+      items: [
+        {
+          text: "Invasion Games",
+          items: [{ text: "Hockey" }, { text: "Soccer" }, { text: "Rugby" }],
+        },
+        {
+          text: "Net & Court Games",
+          items: [
+            { text: "Badminton" },
+            { text: "Squash" },
+            { text: "Tennis" },
+            { text: "Table Tennis" },
+            { text: "Volleyball" },
+          ],
+        },
+        {
+          text: "Target Games",
+          items: [
+            { text: "Golf" },
+            { text: "Lawn bowls" },
+            { text: "Tenpin bowling" },
+          ],
+        },
+      ],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/overview/PanelBar.vue b/vue-options-api-demos/layout/overview/PanelBar.vue
new file mode 100644
index 00000000..0304614a
--- /dev/null
+++ b/vue-options-api-demos/layout/overview/PanelBar.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="panelbar-wrapper">
+    <PanelBar :expand-mode="'single'" :items="items">
+      <template v-slot:first>
+        <div>
+          <div class="teamMate">
+            <img :src="andrewImage" alt="Andrew Fuller" />
+            <span class="mate-info">
+              <h2>Andrew Fuller</h2>
+              <p>Team Lead</p>
+            </span>
+          </div>
+          <div class="teamMate">
+            <img :src="nancyImage" alt="Andrew Fuller" />
+            <span class="mate-info">
+              <h2>Nancy Leverling</h2>
+              <p>Sales Associate</p>
+            </span>
+          </div>
+          <div class="teamMate">
+            <img :src="robertImage" alt="Andrew Fuller" />
+            <span class="mate-info">
+              <h2>Robert King</h2>
+              <p>Business System Analyst</p>
+            </span>
+          </div>
+        </div>
+      </template>
+    </PanelBar>
+  </div>
+</template>
+
+<script>
+import { PanelBar } from '@progress/kendo-vue-layout';
+import './panelbar-styles.css';
+
+const andrewImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/panelbar/andrew.jpg';
+const nancyImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/panelbar/nancy.jpg';
+const robertImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/panelbar/robert.jpg';
+
+export default {
+  components: {
+    PanelBar,
+  },
+  data() {
+    return {
+      andrewImage,
+      nancyImage,
+      robertImage,
+      items: [
+        {
+          expanded: true,
+          title: 'My Teammates',
+          content: 'first',
+        },
+        {
+          title: 'Projects',
+          items: [
+            { title: 'New Business Plan' },
+            {
+              title: 'Sales Forecasts',
+              items: [
+                { title: 'Q1 Forecast' },
+                { title: 'Q2 Forecast' },
+                { title: 'Q3 Forecast' },
+                { title: 'Q4 Forecast' },
+              ],
+            },
+            { title: 'Sales Reports' },
+          ],
+        },
+        {
+          title: 'Programs',
+          items: [
+            { title: 'Monday' },
+            { title: 'Tuesday' },
+            { title: 'Wednesday' },
+            { title: 'Thursday' },
+            { title: 'Friday' },
+          ],
+        },
+        { title: 'Communication', disabled: true },
+      ],
+    };
+  }
+};
+</script>
diff --git a/vue-options-api-demos/layout/overview/PersonalDetails.vue b/vue-options-api-demos/layout/overview/PersonalDetails.vue
new file mode 100644
index 00000000..d487cf61
--- /dev/null
+++ b/vue-options-api-demos/layout/overview/PersonalDetails.vue
@@ -0,0 +1,67 @@
+<template>
+  <form-element>
+    <fieldset
+      class="k-form-fieldset"
+      :style="{
+        width: '500px',
+        margin: '0 auto',
+      }"
+    >
+      <field
+        :id="'firstName'"
+        :name="'firstName'"
+        :label="'First Name'"
+        :component="'myTemplate'"
+        :validator="requiredValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          />
+        </template>
+      </field>
+      <field
+        :id="'lastName'"
+        :name="'lastName'"
+        :label="'Last Name'"
+        :component="'myTemplate'"
+        :validator="requiredValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          />
+        </template>
+      </field>
+    </fieldset>
+  </form-element>
+</template>
+<script>
+import { Field, FormElement } from '@progress/kendo-vue-form';
+import FormInput from './FormInput.vue';
+import { Button } from '@progress/kendo-vue-buttons';
+import { requiredValidator } from './validators';
+
+export default {
+  components: {
+    field: Field,
+    'form-element': FormElement,
+    forminput: FormInput,
+    kbutton: Button,
+  },
+  inject: {
+    kendoForm: { default: {} },
+  },
+  data: function () {
+    return {
+      requiredValidator,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/overview/Register.vue b/vue-options-api-demos/layout/overview/Register.vue
new file mode 100644
index 00000000..39ca5fea
--- /dev/null
+++ b/vue-options-api-demos/layout/overview/Register.vue
@@ -0,0 +1,17 @@
+<template>
+  <form-element :style="{
+    width: '500px',
+    margin: '0 auto',
+  }">
+    <h3>Click on the "Register" button to complete your registration.</h3>
+  </form-element>
+</template>
+<script>
+import { FormElement } from '@progress/kendo-vue-form';
+
+export default {
+  components: {
+    'form-element': FormElement,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/overview/Splitter.vue b/vue-options-api-demos/layout/overview/Splitter.vue
new file mode 100644
index 00000000..dd2306f9
--- /dev/null
+++ b/vue-options-api-demos/layout/overview/Splitter.vue
@@ -0,0 +1,76 @@
+<template>
+  <Splitter
+    :style="{ height: '340px' }"
+    :panes="panes"
+    :orientation="'vertical'"
+    @change="onChange"
+  >
+    <template v-slot:first>
+      <Splitter :panes="innerPanes" @change="onInnerChange">
+        <template v-slot:left>
+          <div class="pane-content">
+            <h3>Inner splitter / left pane</h3>
+            <p>Resizable and collapsible.</p>
+          </div>
+        </template>
+        <template v-slot:center>
+          <div class="pane-content">
+            <h3>Inner splitter / center pane</h3>
+            <p>Resizable only.</p>
+          </div>
+        </template>
+        <template v-slot:right>
+          <div class="pane-content">
+            <h3>Inner splitter / right pane</h3>
+            <p>Resizable and collapsible.</p>
+          </div>
+        </template>
+      </Splitter>
+    </template>
+    <template v-slot:second>
+      <div class="pane-content">
+        <h3>Outer splitter / Middle pane</h3>
+        <p>Resizable only.</p>
+      </div>
+    </template>
+    <template v-slot:third>
+      <div class="pane-content">
+        <h3>Outer splitter / Middle pane</h3>
+        <p>Resizable only.</p>
+      </div>
+    </template>
+  </Splitter>
+</template>
+
+<script>
+import { Splitter } from '@progress/kendo-vue-layout';
+import './styles.css';
+
+export default {
+  components: {
+    Splitter,
+  },
+  data() {
+    return {
+      panes: [
+        { size: '40%', containsSplitter: true, content: 'first' },
+        { content: 'second' },
+        { size: '30%', resizable: false, content: 'third' },
+      ],
+      innerPanes: [
+        { size: '20%', min: '20px', collapsible: true, content: 'left' },
+        { content: 'center' },
+        { size: '30%', min: '20px', collapsible: true, content: 'right' },
+      ],
+    };
+  },
+  methods: {
+    onChange(event) {
+      this.panes = event.newState;
+    },
+    onInnerChange(event) {
+      this.innerPanes = event.newState;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/overview/StackLayout.vue b/vue-options-api-demos/layout/overview/StackLayout.vue
new file mode 100644
index 00000000..82724c7f
--- /dev/null
+++ b/vue-options-api-demos/layout/overview/StackLayout.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <StackLayout
+      :orientation="'vertical'"
+      :align="{
+        vertical: 'top',
+      }"
+    >
+      <div class="box stacklayout-header">Header</div>
+      <StackLayout
+        :orientation="'horizontal'"
+        :style="{
+          height: '300px',
+        }"
+      >
+        <div class="box nav">Navigation</div>
+        <div class="box stacklayout-content">Content</div>
+        <div class="box toc">TOC</div>
+      </StackLayout>
+      <div class="box stacklayout-footer">Footer</div>
+    </StackLayout>
+  </div>
+</template>
+<script>
+import { StackLayout } from '@progress/kendo-vue-layout';
+
+export default {
+    components: {
+        StackLayout,
+    },
+};
+</script>
+
+<style scoped>
+@import './stacklayout-styles.css';
+</style>
diff --git a/vue-options-api-demos/layout/overview/Stepper.vue b/vue-options-api-demos/layout/overview/Stepper.vue
new file mode 100644
index 00000000..88b07b7d
--- /dev/null
+++ b/vue-options-api-demos/layout/overview/Stepper.vue
@@ -0,0 +1,38 @@
+<template>
+  <Stepper :value="value" @change="handleChange" :items="items" />
+</template>
+
+<script>
+import { lockIcon, trackChangesIcon, userIcon } from "@progress/kendo-svg-icons";
+import { Stepper } from "@progress/kendo-vue-layout";
+export default {
+    components: {
+        Stepper,
+    },
+    data() {
+        return {
+            value: 0,
+            items: [
+                {
+                    label: "Account Info",
+                    svgIcon: lockIcon
+                },
+                {
+                    label: "Personal Info",
+                    svgIcon: userIcon
+                },
+                {
+                    label: "Payment Details",
+                    svgIcon: trackChangesIcon,
+                    optional: true,
+                },
+            ],
+        };
+    },
+    methods: {
+        handleChange(e) {
+            this.value = e.value;
+        },
+    },
+};
+</script>
diff --git a/vue-options-api-demos/layout/overview/TabStrip.vue b/vue-options-api-demos/layout/overview/TabStrip.vue
new file mode 100644
index 00000000..07a34d77
--- /dev/null
+++ b/vue-options-api-demos/layout/overview/TabStrip.vue
@@ -0,0 +1,150 @@
+<template>
+    <TabStrip :selected="selected" @select="onSelect" :tabs="tabs">
+        <template v-slot:Paris>
+            <div>
+                <span class="rainy">
+                    <img :src="rainyImage" />
+                </span>
+                <div class="weather">
+                    <h2>17<span>&ordm;C</span></h2>
+                    <p>Rainy weather in Paris.</p>
+                </div>
+                <p class="info">City info</p>
+                <p>
+                    Paris is the capital and most populous city of France. It has an area
+                    of 105 square kilometres (41 square miles) and a population in 2013 of
+                    2,229,621 within its administrative limits. The city is both a commune
+                    and department, and forms the centre and headquarters of the
+                    Île-de-France, or Paris Region, which has an area of 12,012 square
+                    kilometres (4,638 square miles) and a population in 2014 of
+                    12,005,077, comprising 18.2 percent of the population of France.
+                </p>
+            </div>
+        </template>
+        <template v-slot:NewYork>
+            <div>
+                <span class="sunny">
+                    <img :src="sunnyImage" />
+                </span>
+                <div class="weather">
+                    <h2>29<span>&ordm;C</span></h2>
+                    <p>Sunny weather in New York.</p>
+                </div>
+                <p class="info">City info</p>
+                <p>
+                    The City of New York, often called New York City or simply New York,
+                    is the most populous city in the United States. With an estimated 2015
+                    population of 8,550,405 distributed over a land area of just 305
+                    square miles (790 km2), New York City is also the most densely
+                    populated major city in the United States. Located at the southern tip
+                    of the state of New York, the city is the center of the New York
+                    metropolitan area, one of the most populous urban agglomerations in
+                    the world.
+                </p>
+                <p>
+                    A global power city, New York City exerts a significant impact upon
+                    commerce, finance, media, art, fashion, research, technology,
+                    education, and entertainment, its fast pace defining the term New York
+                    minute. Home to the headquarters of the United Nations, New York is an
+                    important center for international diplomacy and has been described as
+                    the cultural and financial capital of the world.
+                </p>
+            </div>
+        </template>
+        <template v-slot:Tallin>
+            <div>
+                <span class="sunny">
+                    <img :src="sunnyImage" />
+                </span>
+                <div class="weather">
+                    <h2>21<span>&ordm;C</span></h2>
+                    <p>Sunny weather in Tallin.</p>
+                </div>
+                <p class="info">City info</p>
+                <p>
+                    Tallinn is the capital and largest city of Estonia. It is situated on
+                    the northern coast of the country, on the shore of the Gulf of
+                    Finland, 80 km (50 mi) south of Helsinki, east of Stockholm and west
+                    of Saint Petersburg. From the 13th century until 1918 (and briefly
+                    during the Nazi occupation of Estonia from 1941 to 1944), the city was
+                    known as Reval. Tallinn occupies an area of 159.2 km2 (61.5 sq mi) and
+                    has a population of 443,894. Approximately 32% of Estonia's total
+                    population lives in Tallinn.
+                </p>
+                <p>
+                    Tallinn was founded in 1248, but the earliest human settlements are
+                    over 5,000 years old, making it one of the oldest capital cities of
+                    Northern Europe. Due to its strategic location, the city became a
+                    major trade hub, especially from the 14th to the 16th century, when it
+                    grew in importance as part of the Hanseatic League.
+                </p>
+            </div>
+        </template>
+        <template v-slot:Sydney> </template>
+    </TabStrip>
+</template>
+
+<script>
+import { TabStrip } from '@progress/kendo-vue-layout';
+
+const sunnyImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/tabstrip/sunny.png';
+const rainyImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/tabstrip/rainy.png';
+
+export default {
+    components: {
+        TabStrip
+    },
+    data: function () {
+        return {
+            sunnyImage,
+            rainyImage,
+            selected: 0,
+            tabs: [
+                {
+                    title: 'Paris',
+                    content: 'Paris',
+                },
+                {
+                    title: 'New York City',
+                    content: 'NewYork',
+                },
+                {
+                    title: 'Tallinn',
+                    content: 'Tallin',
+                },
+                {
+                    title: 'Sydney',
+                    content: 'Tallin',
+                    disabled: true,
+                },
+            ],
+        };
+    },
+    methods: {
+        onSelect: function (e) {
+            this.selected = e.selected;
+        },
+    },
+};
+</script>
+
+<style>
+.sunny,
+.cloudy,
+.rainy {
+    display: block;
+    margin: 30px auto 10px;
+    width: 128px;
+    height: 128px;
+}
+
+.weather {
+    margin: 0 auto 30px;
+    text-align: center;
+}
+
+.info {
+    font-weight: bold;
+    font-size: 20px;
+}
+</style>
diff --git a/vue-options-api-demos/layout/overview/TileLayout.vue b/vue-options-api-demos/layout/overview/TileLayout.vue
new file mode 100644
index 00000000..07d0215f
--- /dev/null
+++ b/vue-options-api-demos/layout/overview/TileLayout.vue
@@ -0,0 +1,65 @@
+<template>
+    <TileLayout
+      :columns="3"
+      :row-height="150"
+      :gap="{ rows: '10px', columns: '10px' }"
+      :items="tiles"
+    >
+      <template v-slot:tileOneHeader="{ props }"> Tile 1 </template>
+      <template v-slot:tileOneBody="{ props }">
+        <p>Reorderable and resizable tile.</p>
+      </template>
+      <template v-slot:tileTwoHeader="{ props }"> Tile 2 </template>
+      <template v-slot:tileTwoBody="{ props }">
+        <p>Reorderable and horizontally resizable only tile.</p>
+      </template>
+      <template v-slot:tileThreeHeader="{ props }"> Tile 3 </template>
+      <template v-slot:tileThreeBody="{ props }">
+        <p>Reorderable and vertically resizable only tile.</p>
+      </template>
+      <template v-slot:tileFourHeader="{ props }"> Tile 4 </template>
+      <template v-slot:tileFourBody="{ props }">
+        <p>Resizable only.</p>
+      </template>
+    </TileLayout>
+  </template>
+  
+  <script>
+  import { TileLayout } from '@progress/kendo-vue-layout';
+  
+  export default {
+    components: {
+      TileLayout,
+    },
+    data: function () {
+      return {
+        tiles: [
+          {
+            defaultPosition: { col: 1, colSpan: 2, rowSpan: 1 },
+            header: 'tileOneHeader',
+            body: 'tileOneBody',
+          },
+          {
+            defaultPosition: { col: 1, colSpan: 1, rowSpan: 1 },
+            header: 'tileTwoHeader',
+            body: 'tileTwoBody',
+            resizable: 'horizontal',
+          },
+          {
+            defaultPosition: { col: 3, colSpan: 1, rowSpan: 1 },
+            header: 'tileThreeHeader',
+            body: 'tileThreeBody',
+            resizable: 'vertical',
+          },
+          {
+            defaultPosition: { col: 2, colSpan: 2, rowSpan: 1 },
+            header: 'tileFourHeader',
+            body: 'tileFourBody',
+            reorderable: false,
+          },
+        ],
+      };
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/overview/Wizard.vue b/vue-options-api-demos/layout/overview/Wizard.vue
new file mode 100644
index 00000000..a2395fdd
--- /dev/null
+++ b/vue-options-api-demos/layout/overview/Wizard.vue
@@ -0,0 +1,123 @@
+<template>
+  <div
+    :style="{
+      display: 'flex',
+      'flex-direction': 'column',
+    }"
+  >
+    <Stepper :value="step" :items="steps" @change="stepperChange" />
+    <br />
+    <k-form ref="form" :class="'form-element'" :initial-values="initialValues">
+      <personalDetails v-show="step === 0" />
+      <accountDetails v-show="step === 1" />
+      <register v-show="step === 2" />
+    </k-form>
+    <span :style="{ 'margin-top': '40px' }" :class="'k-form-separator'" />
+    <div
+      :style="{
+        'justify-content': 'space-between',
+        'align-content': 'center',
+      }"
+      :class="'k-form-buttons'"
+    >
+      <span :style="{ 'align-self': 'center' }">
+        Step {{ step + 1 }} of 3
+      </span>
+      <span>
+        <span v-if="step !== 0">
+          <k-button
+            :style="{ 'margin-right': '16px' }"
+            @click="prevButtonClick"
+          >
+            Previous
+          </k-button>
+        </span>
+        <k-button :theme-color="'primary'" @click="nextSubmitButtonClick">
+          {{ isLastStep ? 'Register' : 'Next' }}
+        </k-button>
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { Stepper } from '@progress/kendo-vue-layout';
+import { Form } from '@progress/kendo-vue-form';
+import { Button } from '@progress/kendo-vue-buttons';
+import AccountDetails from './AccountDetails.vue';
+import PersonalDetails from './PersonalDetails.vue';
+import Register from './Register.vue';
+
+export default {
+  components: {
+    'k-form': Form,
+    Stepper,
+    'k-button': Button,
+    accountDetails: AccountDetails,
+    personalDetails: PersonalDetails,
+    register: Register,
+  },
+  data() {
+    return {
+      disableNextStep: true,
+      initialValues: {
+        firstName: 'John',
+        lastName: 'Doe',
+        username: 'john',
+        email: 'john.doe@email.com',
+        password: 'password123',
+      },
+      step: 0,
+      steps: [
+        {
+          label: 'User Data',
+          componentName: 'accountDetails',
+        },
+        {
+          label: 'Login Data',
+          componentName: 'personalDetails',
+        },
+        {
+          label: 'Register',
+          componentName: 'paymentDetails',
+        },
+      ],
+    };
+  },
+  computed: {
+    isLastStep() {
+      return this.steps.length - 1 === this.step;
+    },
+  },
+  methods: {
+    stepperChange(event) {
+      this.step = event.value;
+    },
+    nextSubmitButtonClick() {
+      this.formErrors = this.$refs.form.form.errors;
+      if (this.isLastStep) {
+        this.showErrors = false;
+        const formValues = this.$refs.form.form.values;
+        for (const property in formValues) {
+          if (formValues[property] === null || formValues[property] === '') {
+            this.showErrors = true;
+          }
+        }
+        if (!this.showErrors) {
+          alert(JSON.stringify(this.$refs.form.form.values, null, 2));
+        }
+      } else {
+        this.step += 1;
+      }
+    },
+    prevButtonClick() {
+      this.step -= 1;
+    },
+  },
+};
+</script>
+<style>
+.form-element {
+  display: flex;
+  justify-content: center;
+}
+</style>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/overview/gridlayout-styles.css b/vue-options-api-demos/layout/overview/gridlayout-styles.css
new file mode 100644
index 00000000..5b70dce8
--- /dev/null
+++ b/vue-options-api-demos/layout/overview/gridlayout-styles.css
@@ -0,0 +1,22 @@
+.example-wrapper-gridlayout {
+  width: 300px;
+  margin: 0 auto;
+}
+.page {
+  padding: 20px 10px;
+}
+.content {
+  background: #f9f9f9;
+  overflow: auto;
+}
+.box {
+  padding: 4px;
+  background-color: #87dfce;
+  height: 100%;
+}
+.big {
+  background-color: #fea69c;
+}
+.rect {
+  background-color: #fee47c;
+}
diff --git a/vue-options-api-demos/layout/overview/index.js b/vue-options-api-demos/layout/overview/index.js
new file mode 100644
index 00000000..06959308
--- /dev/null
+++ b/vue-options-api-demos/layout/overview/index.js
@@ -0,0 +1,95 @@
+import { createWebHistory, createRouter } from 'vue-router';
+import Avatar from './Avatar';
+import BottomNavigation from './BottomNavigation';
+import Card from './Card';
+import ContextMenu from './ContextMenu';
+import GridLayout from './GridLayout';
+import ExpansionPanel from './ExpansionPanel';
+import Menu from './Menu';
+import Splitter from './Splitter';
+import StackLayout from './StackLayout';
+import Stepper from './Stepper';
+import PanelBar from './PanelBar';
+import TabStrip from './TabStrip';
+import TileLayout from './TileLayout';
+import Wizard from './Wizard';
+
+const routes = [
+    {
+        path: '/layout/overview/avatar',
+        name: 'Avatar',
+        component: Avatar,
+    },
+    {
+        path: '/layout/overview/bottomnavigation',
+        name: 'BottomNavigation',
+        component: BottomNavigation,
+    },
+    {
+        path: '/layout/overview/card',
+        name: 'Card',
+        component: Card,
+    },
+    {
+        path: '/layout/overview/contextmenu',
+        name: 'ContextMenu',
+        component: ContextMenu,
+    },
+    {
+        path: '/layout/overview/expansionpanel',
+        name: 'ExpansionPanel',
+        component: ExpansionPanel,
+    },
+    {
+        path: '/layout/overview/gridlayout',
+        name: 'GridLayout',
+        component: GridLayout,
+    },
+    {
+        path: '/layout/overview/menu',
+        name: 'Menu',
+        component: Menu,
+    },
+    {
+        path: '/layout/overview/panelbar',
+        name: 'PanelBar',
+        component: PanelBar,
+    },
+    {
+        path: '/layout/overview/splitter',
+        name: 'Splitter',
+        component: Splitter,
+    },
+    {
+        path: '/layout/overview/stacklayout',
+        name: 'StackLayout',
+        component: StackLayout,
+    },
+    {
+        path: '/layout/overview/stepper',
+        name: 'Stepper',
+        component: Stepper,
+    },
+    {
+        path: '/layout/overview/tabstrip',
+        name: 'TabStrip',
+        component: TabStrip,
+    },
+    {
+        path: '/layout/overview/tilelayout',
+        name: 'TileLayout',
+        component: TileLayout,
+    },
+    {
+        path: '/layout/overview/wizard',
+        name: 'Wizard',
+        component: Wizard,
+    },
+];
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes,
+});
+
+export default router;
diff --git a/vue-options-api-demos/layout/overview/main.js b/vue-options-api-demos/layout/overview/main.js
new file mode 100644
index 00000000..8632ea7b
--- /dev/null
+++ b/vue-options-api-demos/layout/overview/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+import router from './index.js';
+
+createApp(App).use(router).mount('#app');
diff --git a/vue-options-api-demos/layout/overview/main.vue b/vue-options-api-demos/layout/overview/main.vue
new file mode 100644
index 00000000..a99c1365
--- /dev/null
+++ b/vue-options-api-demos/layout/overview/main.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="border-demo">
+    <AppBar>
+      <AppBarSection>
+        <KButton :fill-mode="'flat'" @click="handleClick">
+          <SvgIcon :icon="layoutIcon" />
+        </KButton>
+      </AppBarSection>
+
+      <AppBarSection>
+        <h1 className="title">AppBar expanding Drawer component</h1>
+      </AppBarSection>
+
+      <AppBarSpacer />
+
+      <AppBarSection>
+        <Avatar :type="'image'">
+          <img :src="kendokaAvatar" :alt="'Kendo Logo'" />
+        </Avatar>
+      </AppBarSection>
+    </AppBar>
+    <Drawer
+      :expanded="expanded"
+      :position="position"
+      :mode="mode"
+      :mini="true"
+      :items="
+        items.map((item, index) => ({
+          ...item,
+          selected: index === selectedId,
+        }))
+      "
+      @select="onSelect"
+    >
+      <DrawerContent>
+        <div class="content-overview">
+          <router-view />
+        </div>
+      </DrawerContent>
+    </Drawer>
+  </div>
+</template>
+
+<script>
+import {
+  Avatar,
+  Drawer,
+  DrawerContent,
+  AppBar,
+  AppBarSection,
+  AppBarSpacer,
+} from "@progress/kendo-vue-layout";
+import { Button } from "@progress/kendo-vue-buttons";
+import "./styles.css";
+import {
+  userIcon,
+  moreHorizontalIcon,
+  bringBackwardIcon,
+  imageIcon,
+  insertTopIcon,
+  gridLayoutIcon,
+  menuIcon,
+  layoutSideBySideIcon,
+  colResizeIcon,
+  layoutStackedIcon,
+  listOrderedIcon,
+  layoutIcon,
+  layout1By4Icon,
+  thumbnailsUpIcon,
+} from "@progress/kendo-svg-icons";
+import { SvgIcon } from "@progress/kendo-vue-common";
+let kendokaAvatar = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/suite/kendoka-vue.webp';
+
+
+export default {
+  name: "App",
+  components: {
+    Avatar,
+    Drawer,
+    DrawerContent,
+    KButton: Button,
+    AppBar,
+    AppBarSection,
+    AppBarSpacer,
+    SvgIcon,
+  },
+  mounted() {
+    this.$router.push(this.items[0].data);
+  },
+  data() {
+    return {
+      kendokaAvatar,
+      userIcon,
+      bringBackwardIcon,
+      imageIcon,
+      insertTopIcon,
+      menuIcon,
+      layoutSideBySideIcon,
+      colResizeIcon,
+      layoutStackedIcon,
+      layoutIcon,
+      items: [
+        {
+          text: "Avatar",
+          svgIcon: userIcon,
+          selected: true,
+          data: {
+            path: "/layout/overview/avatar",
+          },
+        },
+        {
+          separator: true,
+        },
+        {
+          text: "BottomNavigation",
+          svgIcon: moreHorizontalIcon,
+          data: {
+            path: "/layout/overview/bottomnavigation",
+          },
+        },
+        {
+          separator: true,
+        },
+        {
+          text: "ContextMenu",
+          svgIcon: bringBackwardIcon,
+          data: {
+            path: "/layout/overview/contextmenu",
+          },
+        },
+        {
+          separator: true,
+        },
+        {
+          text: "Card",
+          svgIcon: imageIcon,
+          data: {
+            path: "/layout/overview/card",
+          },
+        },
+        {
+          separator: true,
+        },
+        {
+          text: "ExpansionPanel",
+          svgIcon: insertTopIcon,
+          data: {
+            path: "/layout/overview/expansionpanel",
+          },
+        },
+        {
+          separator: true,
+        },
+        {
+          text: "GridLayout",
+          svgIcon: gridLayoutIcon,
+          data: {
+            path: "/layout/overview/gridlayout",
+          },
+        },
+        {
+          separator: true,
+        },
+        {
+          text: "Menu",
+          svgIcon: menuIcon,
+          data: {
+            path: "/layout/overview/menu",
+          },
+        },
+        {
+          separator: true,
+        },
+        {
+          text: "PanelBar",
+          svgIcon: layoutSideBySideIcon,
+          data: {
+            path: "/layout/overview/panelbar",
+          },
+        },
+        {
+          separator: true,
+        },
+        {
+          text: "Splitter",
+          svgIcon: colResizeIcon,
+          data: {
+            path: "/layout/overview/splitter",
+          },
+        },
+        {
+          separator: true,
+        },
+        {
+          text: "StackLayout",
+          svgIcon: layoutStackedIcon,
+          data: {
+            path: "/layout/overview/stacklayout",
+          },
+        },
+        {
+          separator: true,
+        },
+        {
+          text: "Stepper",
+          svgIcon: listOrderedIcon,
+          data: {
+            path: "/layout/overview/stepper",
+          },
+        },
+        {
+          separator: true,
+        },
+        {
+          text: "TabStrip",
+          svgIcon: layoutIcon,
+          data: {
+            path: "/layout/overview/tabstrip",
+          },
+        },
+        {
+          separator: true,
+        },
+        {
+          text: "TileLayout",
+          svgIcon: layout1By4Icon,
+          data: {
+            path: "/layout/overview/tilelayout",
+          },
+        },
+        {
+          separator: true,
+        },
+        {
+          text: "Wizard",
+          svgIcon: thumbnailsUpIcon,
+          data: {
+            path: "/layout/overview/wizard",
+          },
+        },
+      ],
+      expanded: true,
+      selectedId: 0,
+      position: "start",
+      mode: "push",
+    };
+  },
+  methods: {
+    onSelect(e) {
+      this.selectedId = e.itemIndex;
+      this.$router.push(this.items[e.itemIndex].data);
+    },
+    handleClick() {
+      this.expanded = !this.expanded;
+    },
+  },
+};
+</script>
+
+<style>
+.info {
+  font-weight: bold;
+  font-size: 20px;
+}
+
+.weather {
+    margin: 0 auto 30px;
+    text-align: center;
+}
+
+.header {
+  font-size: 20px;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 20px;
+}
+</style>
diff --git a/vue-options-api-demos/layout/overview/panelbar-styles.css b/vue-options-api-demos/layout/overview/panelbar-styles.css
new file mode 100644
index 00000000..34a35a5e
--- /dev/null
+++ b/vue-options-api-demos/layout/overview/panelbar-styles.css
@@ -0,0 +1,35 @@
+.teamMate:after {
+  content: ".";
+  display: block;
+  height: 0;
+  line-height: 0;
+  clear: both;
+  visibility: hidden;
+}
+.teamMate h2 {
+  font-size: 1.3em;
+  font-weight: normal;
+  padding-top: 17px;
+  margin: 0;
+}
+.teamMate p {
+  margin: 0;
+  font-size: .8em;
+}
+.teamMate img {
+  display: inline-block;
+  vertical-align: top;
+  width: 50px;
+  height: 50px;
+  margin: 10px;
+  border: 1px solid #ccc;
+  border-radius: 50%;
+}
+.mate-info {
+  display: inline-block;
+  vertical-align: top;
+}
+.panelbar-wrapper {
+  max-width: 300px;
+  margin: 0 auto;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/overview/splitter-styles.css b/vue-options-api-demos/layout/overview/splitter-styles.css
new file mode 100644
index 00000000..31339449
--- /dev/null
+++ b/vue-options-api-demos/layout/overview/splitter-styles.css
@@ -0,0 +1,14 @@
+.pane-content {
+  padding: 0 10px;
+}
+
+h3 {
+  font-size: 1.2em;
+  margin: 10px 0;
+  padding: 0;
+}
+
+p {
+  margin: 0;
+  padding: 0;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/overview/stacklayout-styles.css b/vue-options-api-demos/layout/overview/stacklayout-styles.css
new file mode 100644
index 00000000..76d15e1d
--- /dev/null
+++ b/vue-options-api-demos/layout/overview/stacklayout-styles.css
@@ -0,0 +1,20 @@
+.box {
+  padding: 4px;
+  text-align: center;
+  vertical-align: center;
+}
+.stacklayout-header {
+  background-color: #fae47a;
+}
+.nav {
+  background-color: #fbd17f;
+}
+.box.stacklayout-content {
+  background-color: #f5bf8b;
+}
+.toc {
+  background-color: #ebaa79;
+}
+.stacklayout-footer {
+  background-color: #e39a6a;
+}
diff --git a/vue-options-api-demos/layout/overview/styles.css b/vue-options-api-demos/layout/overview/styles.css
new file mode 100644
index 00000000..5d4133de
--- /dev/null
+++ b/vue-options-api-demos/layout/overview/styles.css
@@ -0,0 +1,49 @@
+my-app {
+  padding: 0 !important;
+}
+.k-drawer-content {
+  height: 100%;
+}
+.k-drawer-container > .k-drawer-content > .content-overview {
+  padding: 40px 50px 40px 40px;
+  height: 100%;
+}
+.k-drawer-container {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+}
+.k-drawer-item {
+  user-select: none;
+}
+.k-icon {
+  font-size: 20px;
+}
+.mail-box {
+  margin-left: 20px;
+  font-weight: bold;
+  font-size: 17px;
+}
+.page ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.page li {
+  font-size: 1.2em;
+  background: 0 0;
+  border-radius: 0;
+  border-width: 0 0 1px;
+  border-color: rgba(33, 37, 41, 0.125);
+  border-style: solid;
+  line-height: 1.5em;
+  padding: 1.09em 0.84em 1.23em 0.84em;
+}
+.page li:last-child {
+  border: 0;
+}
+
+h1.title {
+  font-size: 18px;
+  margin: 0;
+}
diff --git a/vue-options-api-demos/layout/overview/validators.js b/vue-options-api-demos/layout/overview/validators.js
new file mode 100644
index 00000000..b1fa8aa6
--- /dev/null
+++ b/vue-options-api-demos/layout/overview/validators.js
@@ -0,0 +1,83 @@
+import { getter } from '@progress/kendo-vue-common';
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const phoneRegex = new RegExp(/^[0-9 ()+-]+$/);
+const ccardRegex = new RegExp(/^[0-9-]+$/);
+const cvcRegex = new RegExp(/^[0-9]+$/);
+
+export const termsValidator = (value) =>
+  value ? '' : "It's required to agree with Terms and Conditions.";
+export const emailValidator = (value) =>
+  !value
+    ? 'Email field is required.'
+    : emailRegex.test(value)
+    ? ''
+    : 'Email is not in a valid format.';
+export const nameValidator = (value) =>
+  !value
+    ? 'Full Name is required'
+    : value.length < 7
+    ? 'Full Name should be at least 7 characters long.'
+    : '';
+export const userNameValidator = (value) =>
+  !value
+    ? 'User Name is required'
+    : value.length < 5
+    ? 'User name should be at least 5 characters long.'
+    : '';
+export const phoneValidator = (value) =>
+  !value
+    ? 'Phone number is required.'
+    : phoneRegex.test(value)
+    ? ''
+    : 'Not a valid phone number.';
+export const cardValidator = (value) =>
+  !value
+    ? 'Credit card number is required. '
+    : ccardRegex.test(value)
+    ? ''
+    : 'Not a valid credit card number format.';
+export const cvcValidator = (value) =>
+  !value
+    ? 'CVC code is required,'
+    : cvcRegex.test(value) || value.length !== 3
+    ? ''
+    : 'Not a valid CVC code format.';
+export const guestsValidator = (value) =>
+  !value
+    ? 'Number of guests is required'
+    : value <= 5
+    ? ''
+    : 'Maximum 5 guests';
+export const nightsValidator = (value) =>
+  value ? '' : 'Number of Nights is required.';
+export const arrivalDateValidator = (value) =>
+  value ? '' : 'Arrival Date is required.';
+export const colorValidator = (value) => (value ? '' : 'Color is required.');
+export const requiredValidator = (value) =>
+  value ? '' : 'Error: This field is required.';
+export const passwordValidator = (value) =>
+  value && value.length > 8 ? '' : 'Password must be at least 8 symbols.';
+export const addressValidator = (value) =>
+  value ? '' : 'Address is required.';
+
+const userNameGetter = getter('username');
+const emailGetter = getter('email');
+
+export const formValidator = (values) => {
+  const userName = userNameGetter(values);
+  const emailValue = emailGetter(values);
+
+  if (userName && emailValue && emailRegex.test(emailValue)) {
+    return {};
+  }
+
+  return {
+    VALIDATION_SUMMARY: 'Please fill in the following fields.',
+    ['username']: !userName ? 'User Name is required.' : '',
+    ['email']:
+      emailValue && emailRegex.test(emailValue)
+        ? ''
+        : 'Email is required and should be in a valid format.',
+  };
+};
diff --git a/vue-options-api-demos/layout/panelbar/animation/main.js b/vue-options-api-demos/layout/panelbar/animation/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/animation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/panelbar/animation/main.vue b/vue-options-api-demos/layout/panelbar/animation/main.vue
new file mode 100644
index 00000000..c5d496b9
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/animation/main.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="panelbar-wrapper">
+    <PanelBar :expand-mode="'single'" :items="items"> </PanelBar>
+  </div>
+</template>
+
+<script>
+import { PanelBar } from '@progress/kendo-vue-layout';
+import './styles.css';
+
+export default {
+  components: {
+    PanelBar,
+  },
+  data() {
+    return {
+      items: [
+        {
+          title: 'Sales Forecasts',
+          items: [
+            { title: 'Q1 Forecast' },
+            { title: 'Q2 Forecast' },
+            { title: 'Q3 Forecast' },
+            { title: 'Q4 Forecast' },
+          ],
+          animation: false,
+        },
+        {
+          title: 'Programs',
+          items: [
+            { title: 'Monday' },
+            { title: 'Tuesday' },
+            { title: 'Wednesday' },
+            { title: 'Thursday' },
+            { title: 'Friday' },
+          ],
+          animation: true,
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/panelbar/animation/styles.css b/vue-options-api-demos/layout/panelbar/animation/styles.css
new file mode 100644
index 00000000..bccdcb24
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/animation/styles.css
@@ -0,0 +1,35 @@
+.teamMate:after {
+    content: ".";
+    display: block;
+    height: 0;
+    line-height: 0;
+    clear: both;
+    visibility: hidden;
+}
+.teamMate h2 {
+    font-size: 1.3em;
+    font-weight: normal;
+    padding-top: 17px;
+    margin: 0;
+}
+.teamMate p {
+    margin: 0;
+    font-size: .8em;
+}
+.teamMate img {
+    display: inline-block;
+    vertical-align: top;
+    width: 50px;
+    height: 50px;
+    margin: 10px;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+}
+.mate-info {
+    display: inline-block;
+    vertical-align: top;
+}
+.panelbar-wrapper {
+    max-width: 300px;
+    margin: 0 auto;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/panelbar/binding/local/main.js b/vue-options-api-demos/layout/panelbar/binding/local/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/binding/local/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/panelbar/binding/local/main.vue b/vue-options-api-demos/layout/panelbar/binding/local/main.vue
new file mode 100644
index 00000000..c8dbacc7
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/binding/local/main.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="panelbar-wrapper">
+    <PanelBar :expand-mode="'single'" :items="items">
+      <template v-slot:first>
+        <div style="padding: 10px">First Item Template</div>
+      </template>
+    </PanelBar>
+  </div>
+</template>
+
+<script>
+import { PanelBar } from '@progress/kendo-vue-layout';
+import './styles.css';
+
+export default {
+  components: {
+    PanelBar,
+  },
+  data() {
+    return {
+      items: [
+        { title: 'First item', content: 'first', expanded: true },
+        {
+          title: 'Second item',
+          items: [{ title: 'Second item child item' }],
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/panelbar/binding/local/styles.css b/vue-options-api-demos/layout/panelbar/binding/local/styles.css
new file mode 100644
index 00000000..6559c072
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/binding/local/styles.css
@@ -0,0 +1,3 @@
+.k-content {
+    padding: 4px 8px;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/panelbar/binding/remote/main.js b/vue-options-api-demos/layout/panelbar/binding/remote/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/binding/remote/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/panelbar/binding/remote/main.vue b/vue-options-api-demos/layout/panelbar/binding/remote/main.vue
new file mode 100644
index 00000000..cc511985
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/binding/remote/main.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="panelbar-wrapper">
+    <PanelBar :expand-mode="'single'" :items="categoriesView" />
+  </div>
+</template>
+
+<script>
+import { PanelBar } from '@progress/kendo-vue-layout';
+import './styles.css';
+
+export default {
+  components: {
+    PanelBar,
+  },
+  created() {
+    this.getData();
+  },
+  data() {
+    return {
+      baseUrl:
+        'https://odatasampleservices.azurewebsites.net/V4/Northwind/Northwind.svc',
+      init: { method: 'GET', accept: 'application/jsonp', headers: {} },
+      categoriesView: [],
+    };
+  },
+  methods: {
+    queryChildItems(categoryId) {
+      const queryStr = this.filterToString({
+        filter: `CategoryID eq ${categoryId}`,
+      });
+
+      let data;
+      fetch(`${this.baseUrl}/Products?${queryStr}`, this.init)
+        .then((response) => response.json())
+        .then((json) => {
+          const items = json.value;
+          data = items.map((el) => {
+            return { title: el.ProductName };
+          });
+          this.categoriesView[categoryId - 1].items = data;
+        });
+    },
+    filterToString({ filter }) {
+      return filter ? `&$filter=${filter}` : '';
+    },
+    getData: function (initial) {
+      const that = this;
+      fetch(this.baseUrl + '/Categories', this.init)
+        .then((response) => {
+          return response.json();
+        })
+        .then((json) => {
+          const categories = json.value;
+          that.categoriesView = categories.map((item) => {
+            const data = {
+              title: item.CategoryName,
+              id: item.CategoryID.toString(),
+              items: [],
+            };
+            that.queryChildItems(item.CategoryID);
+            return data;
+          });
+        });
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/panelbar/binding/remote/styles.css b/vue-options-api-demos/layout/panelbar/binding/remote/styles.css
new file mode 100644
index 00000000..722d0c5f
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/binding/remote/styles.css
@@ -0,0 +1,8 @@
+.panelbar-wrapper {
+    max-width: 400px;
+    margin: 0 auto;
+}
+.custom-loading-template {
+    padding: 30px;
+    text-align: center;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/panelbar/controlled-state/all/main.js b/vue-options-api-demos/layout/panelbar/controlled-state/all/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/controlled-state/all/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/panelbar/controlled-state/all/main.vue b/vue-options-api-demos/layout/panelbar/controlled-state/all/main.vue
new file mode 100644
index 00000000..a4d76933
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/controlled-state/all/main.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>
+   Vue component
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "App",
+};
+</script>
diff --git a/vue-options-api-demos/layout/panelbar/controlled-state/basic/main.js b/vue-options-api-demos/layout/panelbar/controlled-state/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/controlled-state/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/panelbar/controlled-state/basic/main.vue b/vue-options-api-demos/layout/panelbar/controlled-state/basic/main.vue
new file mode 100644
index 00000000..0c916111
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/controlled-state/basic/main.vue
@@ -0,0 +1,120 @@
+<template>
+  <kbutton @click="handleCollapse">Collapse All items</kbutton>
+  <kbutton @click="handleExpand">Expand All items</kbutton>
+  <br />
+  <br />
+  <div class="panelbar-wrapper">
+    <PanelBar
+      :items="items"
+      :mode="'multiple'"
+      :expanded="expanded"
+      @select="onSelect"
+      :animation="false"
+    >
+    </PanelBar>
+  </div>
+</template>
+
+<script>
+import { PanelBar } from '@progress/kendo-vue-layout';
+import { Button } from '@progress/kendo-vue-buttons';
+import './styles.css';
+let dataItems = [];
+
+export default {
+  components: {
+    PanelBar,
+    kbutton: Button,
+  },
+  data() {
+    return {
+      expanded: ['.0', '5'],
+      updated: 0,
+      items: [
+        {
+          id: '1',
+          title: 'Home',
+          items: [
+            {
+              id: '2',
+              title: 'Decor',
+            },
+            {
+              id: '3',
+              title: 'Furniture',
+            },
+            {
+              id: '4',
+              title: 'Lights',
+            },
+          ],
+        },
+        {
+          id: '5',
+          title: 'Kitchen',
+          items: [
+            {
+              id: '6',
+              title: 'Tables',
+            },
+            {
+              id: '7',
+              title: 'Decor',
+              items: [
+                {
+                  id: '8',
+                  title: 'Lights',
+                },
+                {
+                  id: '9',
+                  title: 'Candles',
+                },
+                {
+                  id: '10',
+                  title: 'Cook books',
+                },
+                {
+                  id: '11',
+                  title: 'Plates',
+                },
+              ],
+            },
+            {
+              id: '12',
+              title: 'Chairs',
+            },
+          ],
+        },
+        {
+          id: '13',
+          title: 'Bathroom',
+          disabled: true,
+        },
+      ],
+    };
+  },
+  methods: {
+    flatData(data) {
+      for (let index = 0; index < data.length; index++) {
+        const currentItem = { ...data[index] };
+
+        if (currentItem.items && currentItem.items.length) {
+          currentItem.items = this.flatData(currentItem.items);
+          dataItems.push(currentItem.id);
+        }
+      }
+      return dataItems;
+    },
+    onSelect(ev) {
+      this.expanded = ev.expandedItems;
+    },
+    handleExpand(e) {
+      this.expanded = this.flatData(this.items).sort();
+    },
+    handleCollapse(e) {
+      this.expanded = [];
+      dataItems = [];
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/panelbar/controlled-state/basic/styles.css b/vue-options-api-demos/layout/panelbar/controlled-state/basic/styles.css
new file mode 100644
index 00000000..53f83a9a
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/controlled-state/basic/styles.css
@@ -0,0 +1,5 @@
+.panelbar-wrapper {
+    max-width: 300px;
+    margin: 0 auto;
+  }
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/panelbar/controlled/basic/main.js b/vue-options-api-demos/layout/panelbar/controlled/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/controlled/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/panelbar/controlled/basic/main.vue b/vue-options-api-demos/layout/panelbar/controlled/basic/main.vue
new file mode 100644
index 00000000..b96c34c5
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/controlled/basic/main.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="panelbar-wrapper">
+    <PanelBar
+      :expand-mode="'multiple'"
+      :items="items"
+      :expanded="expanded"
+      :selected="selected"
+      :focused="focused"
+    >
+    </PanelBar>
+  </div>
+</template>
+
+<script>
+import { PanelBar } from '@progress/kendo-vue-layout';
+import './styles.css';
+
+export default {
+  components: {
+    PanelBar,
+  },
+  data() {
+    return {
+      selected: '.0',
+      focused: '.1.0',
+      expanded: ['.1', '.1.1'],
+      items: [
+        {
+          title: '.0',
+          items: [
+            {
+              title: '.0.0',
+            },
+            {
+              title: '.0.1',
+            },
+            {
+              title: '.0.2',
+            },
+          ],
+        },
+        {
+          title: '.1',
+          items: [
+            {
+              title: '.1.0',
+            },
+            {
+              title: '.1.1',
+              items: [
+                {
+                  title: '.1.1.0',
+                },
+                {
+                  title: '.1.1.1',
+                },
+                {
+                  title: '.1.1.2',
+                },
+                {
+                  title: '.1.1.3',
+                },
+              ],
+            },
+            {
+              title: '.1.2',
+            },
+          ],
+        },
+        {
+          title: '.2',
+          disabled: true,
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/panelbar/controlled/basic/styles.css b/vue-options-api-demos/layout/panelbar/controlled/basic/styles.css
new file mode 100644
index 00000000..239429a9
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/controlled/basic/styles.css
@@ -0,0 +1,4 @@
+.panelbar-wrapper {
+    max-width: 300px;
+    margin: 0 auto;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/panelbar/controlled/custom/main.js b/vue-options-api-demos/layout/panelbar/controlled/custom/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/controlled/custom/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/panelbar/controlled/custom/main.vue b/vue-options-api-demos/layout/panelbar/controlled/custom/main.vue
new file mode 100644
index 00000000..1954e09d
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/controlled/custom/main.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="panelbar-wrapper">
+    <PanelBar
+      :animation="animation"
+      :expand-mode="'multiple'"
+      :items="items"
+      :expanded="expanded"
+      :selected="selected"
+      :focused="focused"
+      @select="onSelect"
+    >
+    </PanelBar>
+  </div>
+</template>
+
+<script>
+import { PanelBar } from '@progress/kendo-vue-layout';
+import './styles.css';
+
+export default {
+  components: {
+    PanelBar,
+  },
+  mounted() {
+    this.aniamtion = true;
+  },
+  data() {
+    return {
+      animation: false,
+      selected: 1,
+      focused: 6,
+      expanded: [5, 7],
+      items: [
+        {
+          id: 1,
+          title: 'Id: 1',
+          items: [
+            {
+              id: 2,
+              title: 'Id: 2',
+            },
+            {
+              id: 3,
+              title: 'Id: 3',
+            },
+            {
+              id: 4,
+              title: 'Id: 4',
+            },
+          ],
+        },
+        {
+          id: 5,
+          title: 'Id: 5',
+          items: [
+            {
+              id: 6,
+              title: 'Id: 6',
+            },
+            {
+              id: 7,
+              title: 'Id: 7',
+              items: [
+                {
+                  id: 8,
+                  title: 'Id: 8',
+                },
+                {
+                  id: 9,
+                  title: 'Id: 9',
+                },
+                {
+                  id: 10,
+                  title: 'Id: 10',
+                },
+                {
+                  id: 11,
+                  title: 'Id: 11',
+                },
+              ],
+            },
+            {
+              id: 12,
+              title: 'Id: 12',
+            },
+          ],
+        },
+        {
+          id: 13,
+          title: 'Id: 13',
+          disabled: true,
+        },
+      ],
+    };
+  },
+  methods: {
+    onSelect(e) {
+      this.expanded = e.expandedItems;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/panelbar/controlled/custom/styles.css b/vue-options-api-demos/layout/panelbar/controlled/custom/styles.css
new file mode 100644
index 00000000..239429a9
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/controlled/custom/styles.css
@@ -0,0 +1,4 @@
+.panelbar-wrapper {
+    max-width: 300px;
+    margin: 0 auto;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/panelbar/custom/collections/main.js b/vue-options-api-demos/layout/panelbar/custom/collections/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/custom/collections/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/panelbar/custom/collections/main.vue b/vue-options-api-demos/layout/panelbar/custom/collections/main.vue
new file mode 100644
index 00000000..6f1bc513
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/custom/collections/main.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="panelbar-wrapper">
+    <PanelBar :expand-mode="'single'" :items="items">
+      <template v-slot:first="{ props }">
+        <div class="custom-template">First item content</div>
+      </template>
+    </PanelBar>
+  </div>
+</template>
+
+<script>
+import { PanelBar } from '@progress/kendo-vue-layout';
+import './styles.css';
+
+export default {
+  components: {
+    PanelBar,
+  },
+  data() {
+    return {
+      items: [
+        {
+          title: 'First item',
+          content: 'first',
+        },
+        {
+          title: 'Second item',
+          items: [
+            {
+              title: 'Child item',
+            },
+          ],
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/panelbar/custom/collections/styles.css b/vue-options-api-demos/layout/panelbar/custom/collections/styles.css
new file mode 100644
index 00000000..1882d556
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/custom/collections/styles.css
@@ -0,0 +1,4 @@
+.custom-template {
+    padding: 30px;
+    text-align: center;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/panelbar/custom/custom/main.js b/vue-options-api-demos/layout/panelbar/custom/custom/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/custom/custom/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/panelbar/custom/custom/main.vue b/vue-options-api-demos/layout/panelbar/custom/custom/main.vue
new file mode 100644
index 00000000..9bb29c49
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/custom/custom/main.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="panelbar-wrapper">
+    <PanelBar :expand-mode="'single'" :items="items" @select="onSelect">
+      <template v-slot:first="{ props }">
+        <div style="padding: 10px">
+          First Item Template.
+          <b>{{ props.item.myCustomProp }}</b>
+        </div>
+      </template>
+    </PanelBar>
+  </div>
+</template>
+
+<script>
+import { PanelBar } from '@progress/kendo-vue-layout';
+import './styles.css';
+
+export default {
+  components: {
+    PanelBar,
+  },
+  data() {
+    return {
+      items: [
+        {
+          title: 'First item',
+          content: 'first',
+          myCustomProp: 'This information is passed through a custom property',
+          expanded: true,
+        },
+        {
+          title: 'Second item',
+          myCustomProp: 'Second Item: Custom property',
+          items: [
+            {
+              title: 'Second item child item',
+              myCustomProp: 'Second Item, Child: Custom property',
+            },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    onSelect(ev) {
+      console.log(ev.target.myCustomProp);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/panelbar/custom/custom/styles.css b/vue-options-api-demos/layout/panelbar/custom/custom/styles.css
new file mode 100644
index 00000000..239429a9
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/custom/custom/styles.css
@@ -0,0 +1,4 @@
+.panelbar-wrapper {
+    max-width: 300px;
+    margin: 0 auto;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/panelbar/expand/main.js b/vue-options-api-demos/layout/panelbar/expand/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/expand/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/panelbar/expand/main.vue b/vue-options-api-demos/layout/panelbar/expand/main.vue
new file mode 100644
index 00000000..61502f8a
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/expand/main.vue
@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <div class="example-config row">
+      <div class="col-sm-4">
+        <h5>Expand modes:</h5>
+        <radiobutton
+          :name="'expandMode'"
+          :value="'single'"
+          :checked="expandMode === 'single'"
+          @change="handleChange"
+          :label="'Single expand mode'"
+        />
+        <radiobutton
+          :name="'expandMode'"
+          :value="'multiple'"
+          :checked="expandMode === 'multiple'"
+          @change="handleChange"
+          :label="'Multiple expand mode'"
+        />
+      </div>
+    </div>
+    <div class="panelbar-wrapper">
+      <PanelBar :expand-mode="expandMode" :items="items"> </PanelBar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { PanelBar } from '@progress/kendo-vue-layout';
+import { RadioButton } from '@progress/kendo-vue-inputs';
+import './styles.css';
+
+export default {
+  components: {
+    PanelBar,
+    radiobutton: RadioButton,
+  },
+  data() {
+    return {
+      expandMode: 'multiple',
+      items: [
+        {
+          title: 'Invasion Games',
+          expanded: true,
+          items: [
+            { title: 'Hockey' },
+            { title: 'Soccer' },
+            { title: 'Rugby' },
+            { title: 'Basketball' },
+            { title: 'Water polo' },
+            { title: 'Netball' },
+          ],
+        },
+        {
+          title: 'Striking & Fielding Games',
+          items: [
+            { title: 'Cricket' },
+            { title: 'Softball' },
+            { title: 'Baseball' },
+          ],
+        },
+        {
+          title: 'Net & Court Games',
+          expanded: true,
+          items: [
+            { title: 'Badminton' },
+            { title: 'Squash' },
+            { title: 'Tennis' },
+            { title: 'Table Tennis' },
+            { title: 'Volleyball' },
+          ],
+        },
+        {
+          title: 'Target Games',
+          items: [
+            { title: 'Golf' },
+            { title: 'Lawn bowls' },
+            { title: 'Tenpin bowling' },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    handleChange(e) {
+      this.expandMode = e.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/panelbar/expand/styles.css b/vue-options-api-demos/layout/panelbar/expand/styles.css
new file mode 100644
index 00000000..239429a9
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/expand/styles.css
@@ -0,0 +1,4 @@
+.panelbar-wrapper {
+    max-width: 300px;
+    margin: 0 auto;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/panelbar/items/custom/main.js b/vue-options-api-demos/layout/panelbar/items/custom/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/items/custom/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/panelbar/items/custom/main.vue b/vue-options-api-demos/layout/panelbar/items/custom/main.vue
new file mode 100644
index 00000000..656d5755
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/items/custom/main.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="panelbar-wrapper">
+    <PanelBar :expand-mode="'single'" :items="items" @select="onSelect">
+      <template v-slot:first="{ props }">
+        <div style="padding: 10px">
+          First Item Template.
+          <b>{{ props.item.myCustomProp }}</b>
+        </div>
+      </template>
+    </PanelBar>
+  </div>
+</template>
+
+<script>
+import { PanelBar } from '@progress/kendo-vue-layout';
+import './styles.css';
+
+export default {
+  components: {
+    PanelBar,
+  },
+  data() {
+    return {
+      items: [
+        {
+          title: 'First item',
+          content: 'first',
+          myCustomProp: 'This information is passed through a custom property',
+          expanded: true,
+        },
+        {
+          title: 'Second item',
+          myCustomProp: 'Second Item: Custom property',
+          items: [
+            {
+              title: 'Second item child item',
+              myCustomProp: 'Second Item, Child: Custom property',
+            },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    onSelect(ev) {
+      console.log(ev.target.myCustomProp);
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/panelbar/items/custom/styles.css b/vue-options-api-demos/layout/panelbar/items/custom/styles.css
new file mode 100644
index 00000000..239429a9
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/items/custom/styles.css
@@ -0,0 +1,4 @@
+.panelbar-wrapper {
+    max-width: 300px;
+    margin: 0 auto;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/panelbar/items/state/disabled/main.js b/vue-options-api-demos/layout/panelbar/items/state/disabled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/items/state/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/panelbar/items/state/disabled/main.vue b/vue-options-api-demos/layout/panelbar/items/state/disabled/main.vue
new file mode 100644
index 00000000..c0bae9fc
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/items/state/disabled/main.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="panelbar-wrapper">
+    <PanelBar :items="items"> </PanelBar>
+  </div>
+</template>
+
+<script>
+import { PanelBar } from '@progress/kendo-vue-layout';
+import './styles.css';
+
+export default {
+  components: {
+    PanelBar,
+  },
+  data() {
+    return {
+      items: [
+        { title: 'Team' },
+        { title: 'Projects', disabled: 'true' },
+        { title: 'Programs' },
+        { title: 'Communication' },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/panelbar/items/state/disabled/styles.css b/vue-options-api-demos/layout/panelbar/items/state/disabled/styles.css
new file mode 100644
index 00000000..239429a9
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/items/state/disabled/styles.css
@@ -0,0 +1,4 @@
+.panelbar-wrapper {
+    max-width: 300px;
+    margin: 0 auto;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/panelbar/items/state/expanded/main.js b/vue-options-api-demos/layout/panelbar/items/state/expanded/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/items/state/expanded/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/panelbar/items/state/expanded/main.vue b/vue-options-api-demos/layout/panelbar/items/state/expanded/main.vue
new file mode 100644
index 00000000..ed979edd
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/items/state/expanded/main.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="panelbar-wrapper">
+    <PanelBar :items="items"> </PanelBar>
+  </div>
+</template>
+
+<script>
+import { PanelBar } from '@progress/kendo-vue-layout';
+import './styles.css';
+
+export default {
+  components: {
+    PanelBar,
+  },
+  data() {
+    return {
+      items: [
+        { title: 'Team' },
+        {
+          title: 'Projects',
+          expanded: 'true',
+          items: [
+            { title: 'Business Plan' },
+            { title: 'Forecast' },
+            { title: 'OKRs' },
+          ],
+        },
+        {
+          title: 'Programs',
+          items: [{ title: 'Programs' }, { title: 'Communication' }],
+        },
+        { title: 'Communication' },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/panelbar/items/state/expanded/styles.css b/vue-options-api-demos/layout/panelbar/items/state/expanded/styles.css
new file mode 100644
index 00000000..239429a9
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/items/state/expanded/styles.css
@@ -0,0 +1,4 @@
+.panelbar-wrapper {
+    max-width: 300px;
+    margin: 0 auto;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/panelbar/items/state/selected/main.js b/vue-options-api-demos/layout/panelbar/items/state/selected/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/items/state/selected/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/panelbar/items/state/selected/main.vue b/vue-options-api-demos/layout/panelbar/items/state/selected/main.vue
new file mode 100644
index 00000000..a3fdcc6c
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/items/state/selected/main.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="panelbar-wrapper">
+    <PanelBar :items="items"> </PanelBar>
+  </div>
+</template>
+
+<script>
+import { PanelBar } from '@progress/kendo-vue-layout';
+import './styles.css';
+
+export default {
+  components: {
+    PanelBar,
+  },
+  data() {
+    return {
+      items: [
+        { title: 'Team' },
+        { title: 'Projects', selected: 'true' },
+        { title: 'Programs' },
+        { title: 'Communication' },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/panelbar/items/state/selected/styles.css b/vue-options-api-demos/layout/panelbar/items/state/selected/styles.css
new file mode 100644
index 00000000..239429a9
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/items/state/selected/styles.css
@@ -0,0 +1,4 @@
+.panelbar-wrapper {
+    max-width: 300px;
+    margin: 0 auto;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/panelbar/items/titles/getting-started/main.js b/vue-options-api-demos/layout/panelbar/items/titles/getting-started/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/items/titles/getting-started/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/panelbar/items/titles/getting-started/main.vue b/vue-options-api-demos/layout/panelbar/items/titles/getting-started/main.vue
new file mode 100644
index 00000000..7379d29a
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/items/titles/getting-started/main.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="panelbar-wrapper">
+    <PanelBar :items="items"> </PanelBar>
+  </div>
+</template>
+
+<script>
+import { PanelBar } from '@progress/kendo-vue-layout';
+import './styles.css';
+
+export default {
+  components: {
+    PanelBar,
+  },
+  data() {
+    return {
+      items: [
+        {
+          title: 'First Title',
+        },
+        {
+          title: 'Second Title',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/panelbar/items/titles/getting-started/styles.css b/vue-options-api-demos/layout/panelbar/items/titles/getting-started/styles.css
new file mode 100644
index 00000000..239429a9
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/items/titles/getting-started/styles.css
@@ -0,0 +1,4 @@
+.panelbar-wrapper {
+    max-width: 300px;
+    margin: 0 auto;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/panelbar/items/titles/icons/main.js b/vue-options-api-demos/layout/panelbar/items/titles/icons/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/items/titles/icons/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/panelbar/items/titles/icons/main.vue b/vue-options-api-demos/layout/panelbar/items/titles/icons/main.vue
new file mode 100644
index 00000000..abe505f9
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/items/titles/icons/main.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="panelbar-wrapper">
+    <PanelBar :items="items"> </PanelBar>
+  </div>
+</template>
+
+<script>
+import { PanelBar } from '@progress/kendo-vue-layout';
+import {
+  fileIcon,
+  filePdfIcon,
+  folderIcon,
+  imageIcon,
+} from '@progress/kendo-svg-icons';
+import './styles.css';
+
+export default {
+  components: {
+    PanelBar,
+  },
+  data() {
+    return {
+      items: [
+        {
+          title: 'My Web Site',
+          svgIcon: folderIcon,
+          expanded: 'true',
+        },
+        {
+          title: 'images',
+          svgIcon: folderIcon,
+          expanded: true,
+          items: [
+            { title: 'logo.png', svgIcon: imageIcon },
+            { title: 'body-back.png', svgIcon: imageIcon },
+            { title: 'my-photo.png', svgIcon: imageIcon },
+          ],
+        },
+        {
+          title: 'resources',
+          svgIcon: folderIcon,
+          expanded: true,
+          items: [
+            {
+              title: 'pdf',
+              svgIcon: folderIcon,
+              expanded: false,
+              items: [
+                { title: 'prices.pdf', svgIcon: filePdfIcon },
+                { title: 'brochure.pdf', svgIcon: filePdfIcon },
+              ],
+            },
+          ],
+        },
+        {
+          title: 'zip',
+          svgIcon: folderIcon,
+          items: [
+            { title: 'about.html', svgIcon: fileIcon },
+            { title: 'contacts.html', svgIcon: fileIcon },
+            { title: 'index.html', svgIcon: fileIcon },
+            { title: 'portfolio.html', svgIcon: fileIcon },
+          ],
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/panelbar/items/titles/icons/styles.css b/vue-options-api-demos/layout/panelbar/items/titles/icons/styles.css
new file mode 100644
index 00000000..239429a9
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/items/titles/icons/styles.css
@@ -0,0 +1,4 @@
+.panelbar-wrapper {
+    max-width: 300px;
+    margin: 0 auto;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/panelbar/items/titles/images/main.js b/vue-options-api-demos/layout/panelbar/items/titles/images/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/items/titles/images/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/panelbar/items/titles/images/main.vue b/vue-options-api-demos/layout/panelbar/items/titles/images/main.vue
new file mode 100644
index 00000000..65227965
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/items/titles/images/main.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="panelbar-wrapper">
+    <PanelBar :items="items"> </PanelBar>
+  </div>
+</template>
+
+<script>
+import { PanelBar } from '@progress/kendo-vue-layout';
+import './styles.css';
+
+const starIcon = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/panelbar/icons/star.png';
+const photoIcon = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/panelbar/icons/photo.png';
+const videoIcon = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/panelbar/icons/video.png';
+const speakerIcon = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/panelbar/icons/speaker.png';
+const golfIcon = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/panelbar/icons/golf.png';
+const baseballIcon = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/panelbar/icons/baseball.png';
+
+export default {
+  components: {
+    PanelBar,
+  },
+  data() {
+    return {
+      items: [
+        {
+          title: 'Golf',
+          imageUrl: golfIcon,
+          items: [
+            { title: 'Top News', imageUrl: starIcon },
+            { title: 'Photo Galleries', imageUrl: photoIcon },
+            { title: 'Video Records', imageUrl: videoIcon },
+            { title: 'Radio Records', imageUrl: speakerIcon },
+          ],
+        },
+        {
+          title: 'Baseball',
+          imageUrl: baseballIcon,
+          items: [
+            { title: 'Top News', imageUrl: starIcon },
+            { title: 'Photo Galleries', imageUrl: photoIcon },
+            { title: 'Video Records', imageUrl: videoIcon },
+            { title: 'Radio Records', imageUrl: speakerIcon },
+          ],
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/panelbar/items/titles/images/styles.css b/vue-options-api-demos/layout/panelbar/items/titles/images/styles.css
new file mode 100644
index 00000000..239429a9
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/items/titles/images/styles.css
@@ -0,0 +1,4 @@
+.panelbar-wrapper {
+    max-width: 300px;
+    margin: 0 auto;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/panelbar/keyboard/main.js b/vue-options-api-demos/layout/panelbar/keyboard/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/keyboard/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/panelbar/keyboard/main.vue b/vue-options-api-demos/layout/panelbar/keyboard/main.vue
new file mode 100644
index 00000000..fd551665
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/keyboard/main.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="panelbar-wrapper">
+    <PanelBar :expand-mode="'single'" :items="items">
+    </PanelBar>
+  </div>
+</template>
+
+<script>
+import { PanelBar } from '@progress/kendo-vue-layout';
+import './styles.css';
+
+export default {
+  components: {
+    PanelBar,
+  },
+  data() {
+    return {
+      items: [
+        {
+          title: 'Projects',
+          items: [
+            { title: 'New Business Plan' },
+            {
+              title: 'Sales Forecasts',
+              items: [
+                { title: 'Q1 Forecast' },
+                { title: 'Q2 Forecast' },
+                { title: 'Q3 Forecast' },
+                { title: 'Q4 Forecast' },
+              ],
+            },
+            { title: 'Sales Reports' },
+          ],
+        },
+        {
+          title: 'Programs',
+          items: [
+            { title: 'Monday' },
+            { title: 'Tuesday' },
+            { title: 'Wednesday' },
+            { title: 'Thursday' },
+            { title: 'Friday' },
+          ],
+        },
+        { title: 'Communication', disabled: true },
+      ],
+    };
+  }
+};
+</script>
diff --git a/vue-options-api-demos/layout/panelbar/keyboard/styles.css b/vue-options-api-demos/layout/panelbar/keyboard/styles.css
new file mode 100644
index 00000000..bccdcb24
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/keyboard/styles.css
@@ -0,0 +1,35 @@
+.teamMate:after {
+    content: ".";
+    display: block;
+    height: 0;
+    line-height: 0;
+    clear: both;
+    visibility: hidden;
+}
+.teamMate h2 {
+    font-size: 1.3em;
+    font-weight: normal;
+    padding-top: 17px;
+    margin: 0;
+}
+.teamMate p {
+    margin: 0;
+    font-size: .8em;
+}
+.teamMate img {
+    display: inline-block;
+    vertical-align: top;
+    width: 50px;
+    height: 50px;
+    margin: 10px;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+}
+.mate-info {
+    display: inline-block;
+    vertical-align: top;
+}
+.panelbar-wrapper {
+    max-width: 300px;
+    margin: 0 auto;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/panelbar/mounted/main.js b/vue-options-api-demos/layout/panelbar/mounted/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/mounted/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/panelbar/mounted/main.vue b/vue-options-api-demos/layout/panelbar/mounted/main.vue
new file mode 100644
index 00000000..a4d76933
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/mounted/main.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>
+   Vue component
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "App",
+};
+</script>
diff --git a/vue-options-api-demos/layout/panelbar/overview/basic/main.js b/vue-options-api-demos/layout/panelbar/overview/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/overview/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/panelbar/overview/basic/main.vue b/vue-options-api-demos/layout/panelbar/overview/basic/main.vue
new file mode 100644
index 00000000..9d038817
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/overview/basic/main.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="panelbar-wrapper">
+    <PanelBar :expand-mode="'single'" :items="items">
+      <template v-slot:first>
+        <div>
+          <div class="teamMate">
+            <img :src="andrewImage" alt="Andrew Fuller" />
+            <span class="mate-info">
+              <h2>Andrew Fuller</h2>
+              <p>Team Lead</p>
+            </span>
+          </div>
+          <div class="teamMate">
+            <img :src="nancyImage" alt="Nancy Leverling" />
+            <span class="mate-info">
+              <h2>Nancy Leverling</h2>
+              <p>Sales Associate</p>
+            </span>
+          </div>
+          <div class="teamMate">
+            <img :src="robertImage" alt="Robert King" />
+            <span class="mate-info">
+              <h2>Robert King</h2>
+              <p>Business System Analyst</p>
+            </span>
+          </div>
+        </div>
+      </template>
+    </PanelBar>
+  </div>
+</template>
+
+<script>
+import { PanelBar } from '@progress/kendo-vue-layout';
+import './styles.css';
+
+const andrewImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/panelbar/andrew.jpg';
+const nancyImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/panelbar/nancy.jpg';
+const robertImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/panelbar/robert.jpg';
+
+export default {
+  components: {
+    PanelBar,
+  },
+  data() {
+    return {
+      andrewImage,
+      nancyImage,
+      robertImage,
+      items: [
+        {
+          expanded: true,
+          title: 'My Teammates',
+          content: 'first',
+        },
+        {
+          title: 'Projects',
+          items: [
+            { title: 'New Business Plan' },
+            {
+              title: 'Sales Forecasts',
+              items: [
+                { title: 'Q1 Forecast' },
+                { title: 'Q2 Forecast' },
+                { title: 'Q3 Forecast' },
+                { title: 'Q4 Forecast' },
+              ],
+            },
+            { title: 'Sales Reports' },
+          ],
+        },
+        {
+          title: 'Programs',
+          items: [
+            { title: 'Monday' },
+            { title: 'Tuesday' },
+            { title: 'Wednesday' },
+            { title: 'Thursday' },
+            { title: 'Friday' },
+          ],
+        },
+        { title: 'Communication', disabled: true },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/panelbar/overview/basic/styles.css b/vue-options-api-demos/layout/panelbar/overview/basic/styles.css
new file mode 100644
index 00000000..bccdcb24
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/overview/basic/styles.css
@@ -0,0 +1,35 @@
+.teamMate:after {
+    content: ".";
+    display: block;
+    height: 0;
+    line-height: 0;
+    clear: both;
+    visibility: hidden;
+}
+.teamMate h2 {
+    font-size: 1.3em;
+    font-weight: normal;
+    padding-top: 17px;
+    margin: 0;
+}
+.teamMate p {
+    margin: 0;
+    font-size: .8em;
+}
+.teamMate img {
+    display: inline-block;
+    vertical-align: top;
+    width: 50px;
+    height: 50px;
+    margin: 10px;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+}
+.mate-info {
+    display: inline-block;
+    vertical-align: top;
+}
+.panelbar-wrapper {
+    max-width: 300px;
+    margin: 0 auto;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/panelbar/overview/events/Logger.vue b/vue-options-api-demos/layout/panelbar/overview/events/Logger.vue
new file mode 100644
index 00000000..833738a1
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/overview/events/Logger.vue
@@ -0,0 +1,43 @@
+<template>
+    <div class="example-config">
+        <h5>{{ title }}</h5>
+        <ul class="event-log">
+            <li v-for="(event, idx) in events" :key="idx">{{ events.length - idx }}. {{ event }}</li>
+        </ul>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        events: Array,
+        title: String,
+    },
+};
+</script>
+
+<style scoped>
+.example-config {
+    margin: 0 0 20px;
+    padding: 20px;
+    background-color: rgba(0, 0, 0, 0.03);
+    border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+    margin: 0;
+    padding: 0;
+    max-height: 100px;
+    overflow-y: auto;
+    list-style-type: none;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    background-color: white;
+}
+.event-log li {
+    margin: 0;
+    padding: 0.3em;
+    line-height: 1.2em;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+    margin-bottom: -1px;
+}
+</style>
diff --git a/vue-options-api-demos/layout/panelbar/overview/events/main.js b/vue-options-api-demos/layout/panelbar/overview/events/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/overview/events/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/panelbar/overview/events/main.vue b/vue-options-api-demos/layout/panelbar/overview/events/main.vue
new file mode 100644
index 00000000..60743625
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/overview/events/main.vue
@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <div class="panelbar-wrapper">
+      <PanelBar :expand-mode="'single'" :items="items" @select="onSelect">
+      </PanelBar>
+    </div>
+    <br />
+    <br />
+    <Logger :title="'Events list'" :events="eventsList" />
+  </div>
+</template>
+
+<script>
+import { PanelBar } from '@progress/kendo-vue-layout';
+import Logger from './Logger.vue';
+import './styles.css';
+
+export default {
+  components: {
+    PanelBar,
+    Logger,
+  },
+  computed: {
+    eventsList() {
+      return this.events;
+    },
+  },
+  data: function () {
+    return {
+      events: [],
+      items: [
+        {
+          title: 'Sales Forecasts',
+          items: [
+            { title: 'Q1 Forecast' },
+            { title: 'Q2 Forecast' },
+            { title: 'Q3 Forecast' },
+            { title: 'Q4 Forecast' },
+          ],
+        },
+        {
+          title: 'Programs',
+          items: [
+            { title: 'Monday' },
+            { title: 'Tuesday' },
+            { title: 'Wednesday' },
+            { title: 'Thursday' },
+            { title: 'Friday' },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    onSelect(event) {
+      this.events.unshift('Item ' + event.target.title + ' was selected.');
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/panelbar/overview/events/styles.css b/vue-options-api-demos/layout/panelbar/overview/events/styles.css
new file mode 100644
index 00000000..5bcfa632
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/overview/events/styles.css
@@ -0,0 +1,20 @@
+.pane-content {
+    padding: 0 10px;
+}
+
+h3 {
+    font-size: 1.2em;
+    margin: 10px 0;
+    padding: 0;
+}
+
+h4 {
+    font-size: 1em;
+    margin: 10px 0;
+    padding: 0;
+}
+
+p {
+    margin: 0;
+    padding: 0;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/panelbar/routing/About.vue b/vue-options-api-demos/layout/panelbar/routing/About.vue
new file mode 100644
index 00000000..fc3752c7
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/routing/About.vue
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <h2>About</h2>
+    <div>
+      <p>
+        So cuffed therefore by some sadistically mallard rewrote yet
+        accommodatingly more cat adequate pesky far this dear fitting and
+        groundhog horse some selfish jeepers juggled about since upheld heatedly
+        well much.
+      </p>
+      <p>
+        Therefore falcon usefully crab during onto hello regally rat wiped
+        misread reluctant unlike iguanodon fish far bald abjectly far chameleon
+        more scurrilous gagged virtuously sufficient arrogant cobra froze dog
+        waywardly staunch thus consoled.
+      </p>
+      <p>
+        Amphibious darn well densely far meanly inanimately incoherent away
+        flamingo outside yet jeez that yawned secret evasive dear overrode rat
+        cow one overpaid far hatchet much.
+      </p>
+      <p>
+        Had aerial well well coasted darn chuckled studied underlay fatally the
+        but among because patient or shook depending much sloth wetted cheered
+        some bee.
+      </p>
+      <p>
+        Bombastically yikes some coquettish erroneously in therefore
+        disgracefully glanced some connected and goodness more read marvelous up
+        one rebukingly darn fuzzily.
+      </p>
+      <p>
+        Meadowlark and hence regarding flaunting amongst steadfastly demurely
+        like far and stiffly bled reluctant alongside jeez this save opposite
+        well and this shuddered and smoked wherever condescendingly hey onto
+        much.
+      </p>
+      <p>
+        Hello gosh gosh up effortlessly valiant hotly less rubbed gerbil and
+        ouch inside fatuous suitably far fuzzily unihibitedly locked froze
+        timidly hello much revealed lorikeet lantern this much one and far
+        decidedly.
+      </p>
+    </div>
+  </div>
+</template>
+<script>
+export default {};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/panelbar/routing/Home.vue b/vue-options-api-demos/layout/panelbar/routing/Home.vue
new file mode 100644
index 00000000..96a78ccc
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/routing/Home.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <h2>Home page</h2>
+    <div>
+      <p>
+        However engaging wherever growled much methodic shamefully more human
+        agreeable gracefully and less equitable insistent gasped that when wasp
+        baboon rebuilt more slept stingily along knew llama.
+      </p>
+      <p>
+        Prim crud far healthy wholesomely more far chortled ouch in adroitly
+        gawked affably reasonably manfully reindeer mysteriously overpaid
+        considering far far until.
+      </p>
+      <p>
+        Red-handed off thickly save aboard mawkishly that amidst moth pending
+        jerkily monogamous some much or creatively indecent neat far jeepers up
+        spoiled about.
+      </p>
+      <p>
+        Owing desperate like one shark or bit yikes up so thus grumbled gosh
+        more bawled much and regardless hey far bought through crud well
+        staunchly hysteric inside incorrect the closed.
+      </p>
+      <p>
+        Industrious jubilant blanched bestially yet that less far far a wow the
+        militant preparatory crudely acrimonious under a towards lemur wedded
+        that while decorously this peered darn a much.
+      </p>
+      <p>
+        Dizzy boundless hence but because moodily and alas a truculently less
+        hardheaded so on ambiguously incompetently less moaned hilarious until
+        one jeepers amid heinously.
+      </p>
+      <p>
+        Where beneath less misspelled across artistically spiteful jeepers much
+        more that when blushed a much a this groundhog therefore far arduous
+        dependent much satanic where dear goodness hummingbird.
+      </p>
+    </div>
+  </div>
+</template>
+<script>
+export default {};
+</script>
diff --git a/vue-options-api-demos/layout/panelbar/routing/Products.vue b/vue-options-api-demos/layout/panelbar/routing/Products.vue
new file mode 100644
index 00000000..8d4f3453
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/routing/Products.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <h2>Products</h2>
+    <div>
+      <p>
+        Inclusive and foolishly more on yikes far one vociferous squinted lied
+        much the howled disagreed yet seal needlessly vulgarly far moistly
+        wanton.
+      </p>
+      <p>
+        Human and some barring roadrunner behind swore hello ebulliently pending
+        less upon amiable less amiably dear harsh telepathic regarding hey
+        poignant ahead.
+      </p>
+      <p>
+        Immensely a that gosh accurately by naughtily patted laxly far pangolin
+        ouch this like marvelous bitter crab jeez after unobtrusive flamboyant
+        octopus.
+      </p>
+      <p>
+        So koala that ouch and much porpoise falcon from and wasp curtly crud
+        much more frequently and accidental beneath during far.
+      </p>
+    </div>
+  </div>
+</template>
+<script>
+export default {};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/panelbar/routing/Team.vue b/vue-options-api-demos/layout/panelbar/routing/Team.vue
new file mode 100644
index 00000000..ad3d8953
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/routing/Team.vue
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <h3>Team</h3>
+    <div>
+      <p>
+        Leapt sprang volubly that or adroitly cozy sold creepy shuffled spent
+        flirted withdrew gosh zebra prideful swung yawned monkey penguin.
+      </p>
+      <p>
+        This wow flinched one immoral this dear far inflexible newt far outside
+        up hey excluding goodness hello much after feverishly direly fitted wow
+        some youthful crud stark more strict unjustifiable that told one.
+      </p>
+      <p>
+        Shark audible mistook removed tryingly much delicate yet sudden after
+        contrary thus brusque more won wallaby frowningly much censorious spryly
+        thanks circuitous this sewed dreamed wow.
+      </p>
+      <p>
+        The against alas less adoringly some cutting aboard lighted some dear
+        agilely and enticingly before thanks upon was neglectful merrily some
+        porpoise tenably and and groundhog together kiwi much barked miser.
+      </p>
+      <p>
+        Much flamingo mocking much far far some since among ritually since crud
+        near one tartly left far and far this ineffectively goodness mighty some
+        and intricately far.
+      </p>
+      <p>
+        Modestly mastodon hypocritically hatchet gerbil successful dispassionate
+        nefariously and the dangerously far in one less save gosh became and
+        sparing that by alas.
+      </p>
+    </div>
+  </div>
+</template>
+<script>
+export default {};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/panelbar/routing/index.js b/vue-options-api-demos/layout/panelbar/routing/index.js
new file mode 100644
index 00000000..0b78e644
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/routing/index.js
@@ -0,0 +1,35 @@
+import { createWebHistory, createRouter } from "vue-router";
+import Home from "./Home";
+import About from "./About";
+import Products from "./Products";
+import Team from "./Team";
+
+const routes = [
+    {
+        path: "/layout/panelbar/routing/home",
+        name: "Home",
+        component: Home
+    },
+    {
+        path: "/layout/panelbar/routing/about",
+        name: "About",
+        component: About
+    },
+    {
+        path: "/layout/panelbar/routing/products",
+        name: "Products",
+        component: Products
+    },
+    {
+        path: "/layout/panelbar/routing/about/team",
+        name: "Team",
+        component: Team
+    }
+];
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+});
+
+export default router;
diff --git a/vue-options-api-demos/layout/panelbar/routing/main.js b/vue-options-api-demos/layout/panelbar/routing/main.js
new file mode 100644
index 00000000..8632ea7b
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/routing/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+import router from './index.js';
+
+createApp(App).use(router).mount('#app');
diff --git a/vue-options-api-demos/layout/panelbar/routing/main.vue b/vue-options-api-demos/layout/panelbar/routing/main.vue
new file mode 100644
index 00000000..f461ec42
--- /dev/null
+++ b/vue-options-api-demos/layout/panelbar/routing/main.vue
@@ -0,0 +1,67 @@
+<template>
+  <div style="display:flex">
+    <div class="panelbar-wrapper-routing">
+      <PanelBar :items="items" @select="onSelect" />
+    </div>
+    <div>
+      <router-view />
+    </div>
+  </div>
+</template>
+
+<script>
+import { PanelBar } from '@progress/kendo-vue-layout';
+
+export default {
+  name: 'App',
+  components: { PanelBar },
+  mounted() {
+    this.$router.push(this.items[0].data);
+  },
+  data() {
+    return {
+      items: [
+        {
+          title: 'Home',
+          data: {
+            path: '/layout/panelbar/routing/home',
+          },
+        },
+        {
+          title: 'Products',
+          data: {
+            path: '/layout/panelbar/routing/products',
+          },
+        },
+        {
+          title: 'About',
+          data: {
+            path: '/layout/panelbar/routing/about',
+          },
+          items: [
+            {
+              title: 'Team',
+              data: {
+                path: '/layout/panelbar/routing/about/team',
+              },
+            },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    onSelect(e) {
+      this.$router.push(e.target.data);
+    },
+  },
+};
+</script>
+
+<style>
+.panelbar-wrapper-routing {
+    min-width: 180px;
+    max-width: 300px;
+    margin-right: 15px;
+}
+</style>
diff --git a/vue-options-api-demos/layout/splitter/events/Logger.vue b/vue-options-api-demos/layout/splitter/events/Logger.vue
new file mode 100644
index 00000000..833738a1
--- /dev/null
+++ b/vue-options-api-demos/layout/splitter/events/Logger.vue
@@ -0,0 +1,43 @@
+<template>
+    <div class="example-config">
+        <h5>{{ title }}</h5>
+        <ul class="event-log">
+            <li v-for="(event, idx) in events" :key="idx">{{ events.length - idx }}. {{ event }}</li>
+        </ul>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        events: Array,
+        title: String,
+    },
+};
+</script>
+
+<style scoped>
+.example-config {
+    margin: 0 0 20px;
+    padding: 20px;
+    background-color: rgba(0, 0, 0, 0.03);
+    border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+    margin: 0;
+    padding: 0;
+    max-height: 100px;
+    overflow-y: auto;
+    list-style-type: none;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    background-color: white;
+}
+.event-log li {
+    margin: 0;
+    padding: 0.3em;
+    line-height: 1.2em;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+    margin-bottom: -1px;
+}
+</style>
diff --git a/vue-options-api-demos/layout/splitter/events/main.js b/vue-options-api-demos/layout/splitter/events/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/splitter/events/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/splitter/events/main.vue b/vue-options-api-demos/layout/splitter/events/main.vue
new file mode 100644
index 00000000..b3c153c4
--- /dev/null
+++ b/vue-options-api-demos/layout/splitter/events/main.vue
@@ -0,0 +1,162 @@
+<template>
+  <div>
+    <Splitter
+      :style="{ height: '340px' }"
+      :panes="panes"
+      :orientation="'vertical'"
+      @change="onChange"
+    >
+      <template v-slot:first>
+        <Splitter :panes="innerPanes" @change="onInnerChange">
+          <template v-slot:left>
+            <div class="pane-content">
+              <h3>Inner splitter / left pane</h3>
+              <p>Resizable and collapsible.</p>
+            </div>
+          </template>
+          <template v-slot:center>
+            <div class="pane-content">
+              <h3>Inner splitter / center pane</h3>
+              <p>Resizable only.</p>
+            </div>
+          </template>
+          <template v-slot:right>
+            <div class="pane-content">
+              <h3>Inner splitter / right pane</h3>
+              <p>Resizable and collapsible.</p>
+            </div>
+          </template>
+        </Splitter>
+      </template>
+      <template v-slot:second>
+        <div class="pane-content">
+          <h3>Outer splitter / Middle pane</h3>
+          <p>Resizable only.</p>
+        </div>
+      </template>
+      <template v-slot:third>
+        <div class="pane-content">
+          <h3>Outer splitter / Middle pane</h3>
+          <p>Resizable only.</p>
+        </div>
+      </template>
+    </Splitter>
+    <br />
+    <br />
+    <Logger :title="'Events list'" :events="eventsList" />
+  </div>
+</template>
+
+<script>
+import { Splitter } from '@progress/kendo-vue-layout';
+import Logger from './Logger.vue';
+import './styles.css';
+
+export default {
+  components: {
+    Splitter,
+    Logger,
+  },
+  computed: {
+    eventsList() {
+      return this.events;
+    },
+  },
+  data: function () {
+    return {
+      events: [],
+      panes: [
+        { size: '40%', containsSplitter: true, content: 'first' },
+        { content: 'second' },
+        { size: '30%', resizable: false, content: 'third' },
+      ],
+      innerPanes: [
+        {
+          size: '20%',
+          min: '20px',
+          collapsible: true,
+          content: 'left',
+          collapsed: false,
+        },
+        { content: 'center' },
+        {
+          size: '30%',
+          min: '20px',
+          collapsible: true,
+          content: 'right',
+          collapsed: false,
+        },
+      ],
+    };
+  },
+  methods: {
+    trackOuterChanges(event) {
+      event.newState.forEach((pane, index) => {
+        if (
+          pane.collapsed !== this.panes[index].collapsed &&
+          this.panes[index].collapsed !== undefined
+        ) {
+          this.events.unshift(
+            "Pane '" +
+              index +
+              "' with a " +
+              pane.orientation +
+              ' orientation' +
+              this.getExpandedCollapsedText(pane.collapsed)
+          );
+        } else if (
+          pane.size !== this.panes[index].size &&
+          this.panes[index].size !== undefined
+        ) {
+          this.events.unshift(
+            "Outer pane '" +
+              index +
+              "' with a " +
+              pane.orientation +
+              ' orientation was resized'
+          );
+        }
+      });
+    },
+    trackInnerChanges(event) {
+      event.newState.forEach((pane, index) => {
+        if (
+          pane.collapsed !== this.innerPanes[index].collapsed &&
+          this.innerPanes[index].collapsed !== undefined
+        ) {
+          this.events.unshift(
+            "Pane '" +
+              index +
+              "' with a " +
+              pane.orientation +
+              ' orientation' +
+              this.getExpandedCollapsedText(pane.collapsed)
+          );
+        } else if (
+          pane.size !== this.innerPanes[index].size &&
+          this.innerPanes[index].size !== undefined
+        ) {
+          this.events.unshift(
+            "Inner pane '" +
+              index +
+              "' with a " +
+              pane.orientation +
+              ' orientation was resized'
+          );
+        }
+      });
+    },
+    onChange(event) {
+      this.trackOuterChanges(event);
+      this.panes = event.newState;
+    },
+    onInnerChange(event) {
+      this.trackInnerChanges(event);
+      this.innerPanes = event.newState;
+    },
+    getExpandedCollapsedText(value) {
+      return value ? ' was collapsed' : ' was expanded';
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/splitter/events/styles.css b/vue-options-api-demos/layout/splitter/events/styles.css
new file mode 100644
index 00000000..5bcfa632
--- /dev/null
+++ b/vue-options-api-demos/layout/splitter/events/styles.css
@@ -0,0 +1,20 @@
+.pane-content {
+    padding: 0 10px;
+}
+
+h3 {
+    font-size: 1.2em;
+    margin: 10px 0;
+    padding: 0;
+}
+
+h4 {
+    font-size: 1em;
+    margin: 10px 0;
+    padding: 0;
+}
+
+p {
+    margin: 0;
+    padding: 0;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/splitter/keyboard/main.js b/vue-options-api-demos/layout/splitter/keyboard/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/splitter/keyboard/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/splitter/keyboard/main.vue b/vue-options-api-demos/layout/splitter/keyboard/main.vue
new file mode 100644
index 00000000..a4d76933
--- /dev/null
+++ b/vue-options-api-demos/layout/splitter/keyboard/main.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>
+   Vue component
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "App",
+};
+</script>
diff --git a/vue-options-api-demos/layout/splitter/keyboard/styles.css b/vue-options-api-demos/layout/splitter/keyboard/styles.css
new file mode 100644
index 00000000..15616aa3
--- /dev/null
+++ b/vue-options-api-demos/layout/splitter/keyboard/styles.css
@@ -0,0 +1,2 @@
+.k-splitter + .k-splitter { margin: 20px 0 0; }
+h3 { font-size: 1.2em; padding: 10px; }
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/splitter/orientation/main.js b/vue-options-api-demos/layout/splitter/orientation/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/splitter/orientation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/splitter/orientation/main.vue b/vue-options-api-demos/layout/splitter/orientation/main.vue
new file mode 100644
index 00000000..eb7985d9
--- /dev/null
+++ b/vue-options-api-demos/layout/splitter/orientation/main.vue
@@ -0,0 +1,88 @@
+<template>
+  <p style="font-weight: 600">Horizontal orientation:</p>
+  <Splitter
+    :style="{ height: '340px' }"
+    :panes="horizontalPanes"
+    :orientation="'horizontal'"
+    @change="onHorizontalChange"
+  >
+    <template v-slot:left>
+      <div class="pane-content">
+        <h3>Left pane</h3>
+        <p>Resizable and collapsible.</p>
+      </div>
+    </template>
+    <template v-slot:center>
+      <div class="pane-content">
+        <h3>Center pane</h3>
+        <p>Resizable only.</p>
+      </div>
+    </template>
+    <template v-slot:right>
+      <div class="pane-content">
+        <h3>Right pane</h3>
+        <p>Resizable and collapsible.</p>
+      </div>
+    </template>
+  </Splitter>
+  <br />
+  <p style="font-weight: 600">Vertical orientation:</p>
+  <Splitter
+    :style="{ height: '340px' }"
+    :panes="verticalPanes"
+    :orientation="'vertical'"
+    @change="onVerticalChange"
+  >
+    <template v-slot:top>
+      <div class="pane-content">
+        <h3>Top pane</h3>
+        <p>Resizable and collapsible.</p>
+      </div>
+    </template>
+    <template v-slot:center>
+      <div class="pane-content">
+        <h3>Center pane</h3>
+        <p>Resizable only.</p>
+      </div>
+    </template>
+    <template v-slot:bottom>
+      <div class="pane-content">
+        <h3>Bottom pane</h3>
+        <p>Resizable and collapsible.</p>
+      </div>
+    </template>
+  </Splitter>
+</template>
+
+<script>
+import { Splitter } from '@progress/kendo-vue-layout';
+import './styles.css';
+
+export default {
+  components: {
+    Splitter,
+  },
+  data() {
+    return {
+      horizontalPanes: [
+        { size: '30%', content: 'left', collapsible: true },
+        { content: 'center' },
+        { size: '30%', collapsible: true, content: 'right' },
+      ],
+      verticalPanes: [
+        { size: '20%', min: '20px', collapsible: true, content: 'top' },
+        { content: 'center' },
+        { size: '30%', min: '20px', collapsible: true, content: 'bottom' },
+      ],
+    };
+  },
+  methods: {
+    onHorizontalChange(event) {
+      this.horizontalPanes = event.newState;
+    },
+    onVerticalChange(event) {
+      this.verticalPanes = event.newState;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/splitter/orientation/styles.css b/vue-options-api-demos/layout/splitter/orientation/styles.css
new file mode 100644
index 00000000..caf5133b
--- /dev/null
+++ b/vue-options-api-demos/layout/splitter/orientation/styles.css
@@ -0,0 +1,10 @@
+h3 {
+    font-size: 1.2em;
+    margin: 10px 0;
+    padding: 0;
+}
+
+p {
+    margin: 0;
+    padding: 0;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/splitter/overview/basic/main.js b/vue-options-api-demos/layout/splitter/overview/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/splitter/overview/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/splitter/overview/basic/main.vue b/vue-options-api-demos/layout/splitter/overview/basic/main.vue
new file mode 100644
index 00000000..47294956
--- /dev/null
+++ b/vue-options-api-demos/layout/splitter/overview/basic/main.vue
@@ -0,0 +1,76 @@
+<template>
+  <Splitter
+    :style="{ height: '340px' }"
+    :panes="panes"
+    :orientation="'vertical'"
+    @change="onChange"
+  >
+    <template v-slot:first>
+      <Splitter :panes="innerPanes" @change="onInnerChange">
+        <template v-slot:left>
+          <div class="pane-content">
+            <h3>Inner splitter / left pane</h3>
+            <p>Resizable and collapsible.</p>
+          </div>
+        </template>
+        <template v-slot:center>
+          <div class="pane-content">
+            <h3>Inner splitter / center pane</h3>
+            <p>Resizable only.</p>
+          </div>
+        </template>
+        <template v-slot:right>
+          <div class="pane-content">
+            <h3>Inner splitter / right pane</h3>
+            <p>Resizable and collapsible.</p>
+          </div>
+        </template>
+      </Splitter>
+    </template>
+    <template v-slot:second>
+      <div class="pane-content">
+        <h3>Outer splitter / Middle pane</h3>
+        <p>Resizable only.</p>
+      </div>
+    </template>
+    <template v-slot:third>
+      <div class="pane-content">
+        <h3>Outer splitter / Middle pane</h3>
+        <p>Resizable only.</p>
+      </div>
+    </template>
+  </Splitter>
+</template>
+
+<script>
+import { Splitter } from '@progress/kendo-vue-layout';
+import './styles.css';
+
+export default {
+  components: {
+    Splitter,
+  },
+  data() {
+    return {
+      panes: [
+        { size: '40%', containsSplitter: true, content: 'first' },
+        { content: 'second' },
+        { size: '30%', resizable: false, content: 'third' },
+      ],
+      innerPanes: [
+        { size: '20%', min: '20px', collapsible: true, content: 'left' },
+        { content: 'center' },
+        { size: '30%', min: '20px', collapsible: true, content: 'right' },
+      ],
+    };
+  },
+  methods: {
+    onChange(event) {
+      this.panes = event.newState;
+    },
+    onInnerChange(event) {
+      this.innerPanes = event.newState;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/splitter/overview/basic/styles.css b/vue-options-api-demos/layout/splitter/overview/basic/styles.css
new file mode 100644
index 00000000..019839d9
--- /dev/null
+++ b/vue-options-api-demos/layout/splitter/overview/basic/styles.css
@@ -0,0 +1,3 @@
+.pane-content { padding: 0 10px; }
+h3 { font-size: 1.2em; margin: 10px 0; padding: 0; }
+p { margin: 0; padding: 0; }
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/splitter/panes/collapsing/main.js b/vue-options-api-demos/layout/splitter/panes/collapsing/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/splitter/panes/collapsing/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/splitter/panes/collapsing/main.vue b/vue-options-api-demos/layout/splitter/panes/collapsing/main.vue
new file mode 100644
index 00000000..7ff60574
--- /dev/null
+++ b/vue-options-api-demos/layout/splitter/panes/collapsing/main.vue
@@ -0,0 +1,49 @@
+<template>
+  <Splitter
+    :style="{ height: '340px' }"
+    :panes="horizontalPanes"
+    :orientation="'horizontal'"
+    @change="onHorizontalChange"
+  >
+    <template v-slot:sideBar>
+      <div class="pane-content">
+        <h3>Sidebar content</h3>
+        <p>Collapsible. Non-resizable. Size of 200px.</p>
+      </div>
+    </template>
+    <template v-slot:mainContent>
+      <div class="pane-content">
+        <h3>Main content</h3>
+      </div>
+    </template>
+  </Splitter>
+</template>
+
+<script>
+import { Splitter } from '@progress/kendo-vue-layout';
+import './styles.css';
+
+export default {
+  components: {
+    Splitter,
+  },
+  data() {
+    return {
+      horizontalPanes: [
+        {
+          size: '200px',
+          collapsible: true,
+          resizable: false,
+          content: 'sideBar',
+        },
+        { content: 'mainContent' },
+      ],
+    };
+  },
+  methods: {
+    onHorizontalChange(event) {
+      this.horizontalPanes = event.newState;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/splitter/panes/collapsing/styles.css b/vue-options-api-demos/layout/splitter/panes/collapsing/styles.css
new file mode 100644
index 00000000..a6e10809
--- /dev/null
+++ b/vue-options-api-demos/layout/splitter/panes/collapsing/styles.css
@@ -0,0 +1,9 @@
+h3 {
+    font-size: 1.2em;
+    padding: 10px;
+}
+
+p {
+    margin: 0;
+    padding: 0 10px;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/splitter/panes/dimensions/main.js b/vue-options-api-demos/layout/splitter/panes/dimensions/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/splitter/panes/dimensions/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/splitter/panes/dimensions/main.vue b/vue-options-api-demos/layout/splitter/panes/dimensions/main.vue
new file mode 100644
index 00000000..70fd8b83
--- /dev/null
+++ b/vue-options-api-demos/layout/splitter/panes/dimensions/main.vue
@@ -0,0 +1,52 @@
+<template>
+  <Splitter
+    :style="{ height: '340px' }"
+    :panes="horizontalPanes"
+    :orientation="'horizontal'"
+    @change="onHorizontalChange"
+  >
+    <template v-slot:left>
+      <div class="pane-content">
+        <h3>Left pane</h3>
+        <p>Resizable. Minimum width of 5%.</p>
+      </div>
+    </template>
+    <template v-slot:center>
+      <div class="pane-content">
+        <h3>Center pane</h3>
+        <p>Resizable only.</p>
+      </div>
+    </template>
+    <template v-slot:right>
+      <div class="pane-content">
+        <h3>Right pane</h3>
+        <p>Resizable.</p>
+      </div>
+    </template>
+  </Splitter>
+</template>
+
+<script>
+import { Splitter } from '@progress/kendo-vue-layout';
+import './styles.css';
+
+export default {
+  components: {
+    Splitter,
+  },
+  data() {
+    return {
+      horizontalPanes: [
+        { size: '200px', min: '5%', content: 'left' },
+        { content: 'center' },
+        { size: '20%', content: 'right' },
+      ],
+    };
+  },
+  methods: {
+    onHorizontalChange(event) {
+      this.horizontalPanes = event.newState;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/splitter/panes/dimensions/styles.css b/vue-options-api-demos/layout/splitter/panes/dimensions/styles.css
new file mode 100644
index 00000000..a6e10809
--- /dev/null
+++ b/vue-options-api-demos/layout/splitter/panes/dimensions/styles.css
@@ -0,0 +1,9 @@
+h3 {
+    font-size: 1.2em;
+    padding: 10px;
+}
+
+p {
+    margin: 0;
+    padding: 0 10px;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/splitter/panes/resizing/main.js b/vue-options-api-demos/layout/splitter/panes/resizing/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/splitter/panes/resizing/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/splitter/panes/resizing/main.vue b/vue-options-api-demos/layout/splitter/panes/resizing/main.vue
new file mode 100644
index 00000000..a63f5af0
--- /dev/null
+++ b/vue-options-api-demos/layout/splitter/panes/resizing/main.vue
@@ -0,0 +1,52 @@
+<template>
+  <Splitter
+    :style="{ height: '340px' }"
+    :panes="horizontalPanes"
+    :orientation="'horizontal'"
+    @change="onHorizontalChange"
+  >
+    <template v-slot:left>
+      <div class="pane-content">
+        <h3>Left pane</h3>
+        <p>Resizable. Default size of 200px.</p>
+      </div>
+    </template>
+    <template v-slot:center>
+      <div class="pane-content">
+        <h3>Center pane</h3>
+        <p>Resizable only.</p>
+      </div>
+    </template>
+    <template v-slot:right>
+      <div class="pane-content">
+        <h3>Right pane</h3>
+        <p>Non-resizable. Size of 20%.</p>
+      </div>
+    </template>
+  </Splitter>
+</template>
+
+<script>
+import { Splitter } from '@progress/kendo-vue-layout';
+import './styles.css';
+
+export default {
+  components: {
+    Splitter,
+  },
+  data() {
+    return {
+      horizontalPanes: [
+        { size: '200px', content: 'left' },
+        { content: 'center' },
+        { size: '20%', resizable: false, content: 'right' },
+      ],
+    };
+  },
+  methods: {
+    onHorizontalChange(event) {
+      this.horizontalPanes = event.newState;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/splitter/panes/resizing/styles.css b/vue-options-api-demos/layout/splitter/panes/resizing/styles.css
new file mode 100644
index 00000000..a6e10809
--- /dev/null
+++ b/vue-options-api-demos/layout/splitter/panes/resizing/styles.css
@@ -0,0 +1,9 @@
+h3 {
+    font-size: 1.2em;
+    padding: 10px;
+}
+
+p {
+    margin: 0;
+    padding: 0 10px;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/splitter/panes/scrolling/main.js b/vue-options-api-demos/layout/splitter/panes/scrolling/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/splitter/panes/scrolling/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/splitter/panes/scrolling/main.vue b/vue-options-api-demos/layout/splitter/panes/scrolling/main.vue
new file mode 100644
index 00000000..71042648
--- /dev/null
+++ b/vue-options-api-demos/layout/splitter/panes/scrolling/main.vue
@@ -0,0 +1,91 @@
+<template>
+  <Splitter
+    :style="{ height: '340px' }"
+    :panes="horizontalPanes"
+    :orientation="'horizontal'"
+    @change="onHorizontalChange"
+  >
+    <template v-slot:sideBar>
+      <div class="pane-content">
+        <h3>Sidebar content</h3>
+        <h4>Item 1</h4>
+        <h4>Item 2</h4>
+        <h4>Item 3</h4>
+        <h4>Item 4</h4>
+        <h4>Item 5</h4>
+        <h4>Item 6</h4>
+        <h4>Item 7</h4>
+        <h4>Item 8</h4>
+        <h4>Item 9</h4>
+        <h4>Item 10</h4>
+        <h4>Item 11</h4>
+        <h4>Item 12</h4>
+        <h4>Item 13</h4>
+        <h4>Item 14</h4>
+        <h4>Item 15</h4>
+        <h4>Item 16</h4>
+        <h4>Item 17</h4>
+        <h4>Item 18</h4>
+        <h4>Item 19</h4>
+        <h4>Item 20</h4>
+      </div>
+    </template>
+    <template v-slot:mainContent>
+      <div class="pane-content">
+        <h3>Main content</h3>
+        <section>
+          <h3>What is Lorem Ipsum?</h3>
+          Lorem Ipsum is simply dummy text of the printing and typesetting
+          industry. Lorem Ipsum has been the industry's standard dummy text ever
+          since the 1500s, when an unknown printer took a galley of type and
+          scrambled it to make a type specimen book. It has survived not only
+          five centuries, but also the leap into electronic typesetting,
+          remaining essentially unchanged. It was popularised in the 1960s with
+          the release of Letraset sheets containing Lorem Ipsum passages, and
+          more recently with desktop publishing software like Aldus PageMaker
+          including versions of Lorem Ipsum.
+        </section>
+        <section>
+          <h3>Why do we use it?</h3>
+          It is a long established fact that a reader will be distracted by the
+          readable content of a page when looking at its layout. The point of
+          using Lorem Ipsum is that it has a more-or-less normal distribution of
+          letters, as opposed to using 'Content here, content here', making it
+          look like readable English. Many desktop publishing packages and web
+          page editors now use Lorem Ipsum as their default model text, and a
+          search for 'lorem ipsum' will uncover many web sites still in their
+          infancy. Various versions have evolved over the years, sometimes by
+          accident, sometimes on purpose (injected humour and the like).
+        </section>
+      </div>
+    </template>
+  </Splitter>
+</template>
+
+<script>
+import { Splitter } from '@progress/kendo-vue-layout';
+import './styles.css';
+
+export default {
+  components: {
+    Splitter,
+  },
+  data() {
+    return {
+      horizontalPanes: [
+        {
+          size: '200px',
+          scrollable: true,
+          content: 'sideBar',
+        },
+        { content: 'mainContent', scrollable: false },
+      ],
+    };
+  },
+  methods: {
+    onHorizontalChange(event) {
+      this.horizontalPanes = event.newState;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/splitter/panes/scrolling/styles.css b/vue-options-api-demos/layout/splitter/panes/scrolling/styles.css
new file mode 100644
index 00000000..5bcfa632
--- /dev/null
+++ b/vue-options-api-demos/layout/splitter/panes/scrolling/styles.css
@@ -0,0 +1,20 @@
+.pane-content {
+    padding: 0 10px;
+}
+
+h3 {
+    font-size: 1.2em;
+    margin: 10px 0;
+    padding: 0;
+}
+
+h4 {
+    font-size: 1em;
+    margin: 10px 0;
+    padding: 0;
+}
+
+p {
+    margin: 0;
+    padding: 0;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/stacklayout/gaps/main.js b/vue-options-api-demos/layout/stacklayout/gaps/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/stacklayout/gaps/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/stacklayout/gaps/main.vue b/vue-options-api-demos/layout/stacklayout/gaps/main.vue
new file mode 100644
index 00000000..19ebf025
--- /dev/null
+++ b/vue-options-api-demos/layout/stacklayout/gaps/main.vue
@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <NumericTextBox
+      :value="gap"
+      :style="{ marginBottom: '20px' }"
+      @change="handleGapChange"
+    />
+    <div class="example-wrapper">
+      <div class="page">
+        <div class="content">
+          <StackLayout :orientation="'vertical'" :gap="gap">
+            <div class="box first k-flex-40" />
+            <div class="box second k-flex-20" />
+            <div class="box third k-flex-10" />
+            <div class="box fourth k-flex-30" />
+          </StackLayout>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { NumericTextBox } from "@progress/kendo-vue-inputs";
+import { StackLayout } from "@progress/kendo-vue-layout";
+import "./styles.css";
+
+export default {
+  components: {
+    StackLayout,
+    NumericTextBox,
+  },
+  data() {
+    return {
+      gap: 0,
+    };
+  },
+  methods: {
+    handleGapChange(e) {
+      this.gap = e.value !== null ? e.value : this.gap;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/stacklayout/gaps/styles.css b/vue-options-api-demos/layout/stacklayout/gaps/styles.css
new file mode 100644
index 00000000..3677a955
--- /dev/null
+++ b/vue-options-api-demos/layout/stacklayout/gaps/styles.css
@@ -0,0 +1,23 @@
+.example-wrapper {
+    width: 300px;
+    margin: 0 auto;
+    box-shadow: 0px 10px 20px #00000029;
+    border-radius: 30px;
+}
+.page { padding: 20px 10px; }
+.content {
+    background: #F9F9F9;
+    border-radius: 30px 30px 0 0;
+    height: 450px;
+}
+.k-hstack { height: 50%; }
+.k-vstack { height: 100%; }
+.box { padding: 4px; }
+.first { background-color: #fae47a; }
+.second { background-color: #fbd17f; }
+.third { background-color: #f5bf8b; }
+.fourth { background-color: #ebaa79; }
+.k-flex-10 { flex: 1 1 10%; }
+.k-flex-20 { flex: 1 1 20%; }
+.k-flex-30 { flex: 1 1 30%; }
+.k-flex-40 { flex: 1 1 40%; }
diff --git a/vue-options-api-demos/layout/stacklayout/horizontalalign/main.js b/vue-options-api-demos/layout/stacklayout/horizontalalign/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/stacklayout/horizontalalign/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/stacklayout/horizontalalign/main.vue b/vue-options-api-demos/layout/stacklayout/horizontalalign/main.vue
new file mode 100644
index 00000000..78459683
--- /dev/null
+++ b/vue-options-api-demos/layout/stacklayout/horizontalalign/main.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <DropDownList
+      :style="{ marginBottom: '15px' }"
+      :data-items="orientations"
+      :value="orientation"
+      @change="handleOrientationChange"
+    />
+    <DropDownList
+      :style="{ marginBottom: '15px' }"
+      :data-items="hAligns"
+      :value="hAlign"
+      @change="handleAlignChange"
+    />
+    <div class="example-wrapper">
+      <div class="page">
+        <div class="content">
+          <StackLayout
+            :orientation="orientation"
+            :align="{
+              horizontal: hAlign,
+            }"
+          >
+            <div class="box first">Box</div>
+            <div class="box second">Box</div>
+            <div class="box third">Box</div>
+            <div class="box fourth">Box</div>
+          </StackLayout>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import { StackLayout } from '@progress/kendo-vue-layout';
+import './styles.css';
+
+export default {
+  components: {
+    StackLayout,
+    DropDownList,
+  },
+  data() {
+    return {
+      hAlign: 'stretch',
+      orientation: 'horizontal',
+      orientations: ['horizontal', 'vertical'],
+      hAligns: ['start', 'center', 'end', 'stretch'],
+    };
+  },
+  methods: {
+    handleOrientationChange(e) {
+      this.orientation = e.value;
+    },
+    handleAlignChange(e) {
+      this.hAlign = e.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/stacklayout/horizontalalign/styles.css b/vue-options-api-demos/layout/stacklayout/horizontalalign/styles.css
new file mode 100644
index 00000000..e9f6d6f2
--- /dev/null
+++ b/vue-options-api-demos/layout/stacklayout/horizontalalign/styles.css
@@ -0,0 +1,18 @@
+.example-wrapper {
+    width: 300px;
+    margin: 0 auto;
+    box-shadow: 0px 10px 20px #00000029;
+    border-radius: 30px;
+}
+.page { padding: 20px 10px; }
+.content {
+    background: #F9F9F9;
+    border-radius: 30px 30px 0 0;
+    height: 450px;
+}
+.box { padding: 10px; }
+.first { background-color: #fae47a; }
+.second { background-color: #fbd17f; }
+.third { background-color: #f5bf8b; }
+.fourth { background-color: #ebaa79; }
+.k-dropdown { margin: 0px 20px 20px 0px; }
diff --git a/vue-options-api-demos/layout/stacklayout/nestedlayouts/main.js b/vue-options-api-demos/layout/stacklayout/nestedlayouts/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/stacklayout/nestedlayouts/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/stacklayout/nestedlayouts/main.vue b/vue-options-api-demos/layout/stacklayout/nestedlayouts/main.vue
new file mode 100644
index 00000000..93fe4b79
--- /dev/null
+++ b/vue-options-api-demos/layout/stacklayout/nestedlayouts/main.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <div class="example-wrapper">
+      <StackLayout
+        :orientation="'vertical'"
+        :align="{
+          vertical: 'top',
+        }"
+      >
+        <div class="box header">Header</div>
+        <StackLayout
+          :orientation="'horizontal'"
+          :style="{
+            height: '300px',
+          }"
+        >
+          <div class="box nav">Navigation</div>
+          <div class="box content">Content</div>
+          <div class="box toc">TOC</div>
+        </StackLayout>
+        <div class="box footer">Footer</div>
+      </StackLayout>
+    </div>
+  </div>
+</template>
+<script>
+import { StackLayout } from '@progress/kendo-vue-layout';
+import './styles.css';
+
+export default {
+  components: {
+    StackLayout,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/stacklayout/nestedlayouts/styles.css b/vue-options-api-demos/layout/stacklayout/nestedlayouts/styles.css
new file mode 100644
index 00000000..00fd5a71
--- /dev/null
+++ b/vue-options-api-demos/layout/stacklayout/nestedlayouts/styles.css
@@ -0,0 +1,10 @@
+.box {
+    padding: 4px; 
+    text-align: center; 
+    vertical-align: center; 
+}
+.header { background-color: #fae47a; }
+.nav { background-color: #fbd17f; }
+.content { background-color: #f5bf8b; }
+.toc { background-color: #ebaa79; }
+.footer { background-color: #e39a6a; }
diff --git a/vue-options-api-demos/layout/stacklayout/orientation/main.js b/vue-options-api-demos/layout/stacklayout/orientation/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/stacklayout/orientation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/stacklayout/orientation/main.vue b/vue-options-api-demos/layout/stacklayout/orientation/main.vue
new file mode 100644
index 00000000..a5d403c1
--- /dev/null
+++ b/vue-options-api-demos/layout/stacklayout/orientation/main.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <DropDownList
+      :style="{ marginBottom: '20px' }"
+      :data-items="orientations"
+      :value="orientation"
+      @change="toggleOrientation"
+    />
+    <div class="example-wrapper">
+      <div class="page">
+        <div class="content">
+          <StackLayout :orientation="orientation" :gap="15">
+            <div class="box first k-flex-40" />
+            <div class="box second k-flex-20" />
+            <div class="box third k-flex-10" />
+            <div class="box fourth k-flex-30" />
+          </StackLayout>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import { StackLayout } from '@progress/kendo-vue-layout';
+
+import './styles.css';
+
+export default {
+  components: {
+    StackLayout,
+    DropDownList,
+  },
+  data() {
+    return {
+      orientation: 'horizontal',
+      orientations: ['horizontal', 'vertical'],
+    };
+  },
+  methods: {
+    toggleOrientation(orientation) {
+      this.orientation = orientation.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/stacklayout/orientation/styles.css b/vue-options-api-demos/layout/stacklayout/orientation/styles.css
new file mode 100644
index 00000000..d50942cb
--- /dev/null
+++ b/vue-options-api-demos/layout/stacklayout/orientation/styles.css
@@ -0,0 +1,23 @@
+.example-wrapper {
+    width: 300px;
+    margin: 0 auto;
+    box-shadow: 0px 10px 20px #00000029;
+    border-radius: 30px;
+}
+.page { padding: 20px 10px; }
+.content {
+    background: #F9F9F9;
+    border-radius: 30px 30px 0 0;
+    height: 450px;
+}
+.k-hstack,
+.k-vstack { height: 100%; }
+.box { padding: 4px; }
+.first { background-color: #fae47a; }
+.second { background-color: #fbd17f; }
+.third { background-color: #f5bf8b; }
+.fourth { background-color: #ebaa79; }
+.k-flex-10 { flex: 1 1 10%; }
+.k-flex-20 { flex: 1 1 20%; }
+.k-flex-30 { flex: 1 1 30%; }
+.k-flex-40 { flex: 1 1 40%; }
diff --git a/vue-options-api-demos/layout/stacklayout/overview/main.js b/vue-options-api-demos/layout/stacklayout/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/stacklayout/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/stacklayout/overview/main.vue b/vue-options-api-demos/layout/stacklayout/overview/main.vue
new file mode 100644
index 00000000..b675feb4
--- /dev/null
+++ b/vue-options-api-demos/layout/stacklayout/overview/main.vue
@@ -0,0 +1,156 @@
+<template>
+  <div className="example-container k-d-flex-col">
+    <div class="header-stacklayout-overview k-d-flex">
+      <div class="title-stacklayout-overview">Popular Creators</div>
+      <span class="k-spacer" />
+      <div class="k-d-flex k-align-items-center">
+        <ButtonGroup selection="single">
+          <KButton
+            :selected="orientation === 'horizontal'"
+            :toggleable="true"
+            @click="toggleOrientation('horizontal')"
+          >
+            Horizontal
+          </KButton>
+          <KButton
+            :selected="orientation === 'vertical'"
+            :toggleable="true"
+            @click="toggleOrientation('vertical')"
+          >
+            Vertical
+          </KButton>
+        </ButtonGroup>
+      </div>
+    </div>
+    <StackLayout :gap="15" :orientation="orientation">
+      <Card width="auto">
+        <CardHeader class="k-hstack">
+          <Avatar
+            width="40px"
+            height="40px"
+            shape="circle"
+            type="image"
+          ><img :src="lindseyAvatar"/></Avatar>
+          <div>
+            <CardTitle>Lindsey Mango</CardTitle>
+            <CardSubtitle>34K followers</CardSubtitle>
+          </div>
+        </CardHeader>
+        <img class="card-img" :src="lindseyImage" alt="lindsey_img" />
+        <CardBody>
+          <p class="photo-desc">
+            Photos by Rikonavt and by Ivana La on Unsplash
+          </p>
+        </CardBody>
+        <CardActions layout="center">
+          <KButton fillMode="flat" themeColor="primary">
+            See more from Lindsey
+          </KButton>
+        </CardActions>
+      </Card>
+      <Card width="auto">
+        <CardHeader class="k-hstack">
+          <Avatar
+            width="40px"
+            height="40px"
+            shape="circle"
+            type="image"
+          ><img :src="vincenzoAvatar"/></Avatar>
+          <div>
+            <CardTitle>Vincenzo Mays</CardTitle>
+            <CardSubtitle>32K followers</CardSubtitle>
+          </div>
+        </CardHeader>
+        <img class="card-img" :src="vincenzoImage" alt="vincenzo_img" />
+        <CardBody>
+          <p class="photo-desc">
+            Photos by Irene Strong and by the BlackRabbit on Unsplash
+          </p>
+        </CardBody>
+        <CardActions layout="center">
+          <KButton :fillMode="'flat'" :themeColor="'primary'">
+            See more from Vicenzo
+          </KButton>
+        </CardActions>
+      </Card>
+      <Card width="auto">
+        <CardHeader class="k-hstack">
+          <Avatar
+            width="40px"
+            height="40px"
+            type="image"
+          ><img :src="marissaAvatar"/></Avatar>
+          <div>
+            <CardTitle>Marissa Webb</CardTitle>
+            <CardSubtitle>36K followers</CardSubtitle>
+          </div>
+        </CardHeader>
+        <img class="card-img" :src="marissaImage" alt="marissa_img" />
+        <CardBody>
+          <p class="photo-desc">
+            Photos by JJ Jordan and by Silvana Carlos on Unsplash
+          </p>
+        </CardBody>
+        <CardActions layout="center">
+          <KButton :fillMode="'flat'" :themeColor="'primary'">
+            See more from Marissa
+          </KButton>
+        </CardActions>
+      </Card>
+    </StackLayout>
+  </div>
+</template>
+<script>
+import {
+    StackLayout,
+    Avatar,
+    Card,
+    CardActions,
+    CardBody,
+    CardHeader,
+    CardSubtitle,
+    CardTitle,
+} from '@progress/kendo-vue-layout';
+import { Button, ButtonGroup } from '@progress/kendo-vue-buttons';
+import './styles.css';
+
+console.log('VITE_VUE_DEMOS_BASE_URL:', import.meta.env.VITE_VUE_DEMOS_BASE_URL);
+
+const avatar1Image = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/stacklayout/avatar1.jpg';
+const avatar2Image = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/stacklayout/avatar2.webp';
+const avatar3Image = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/stacklayout/avatar3.webp';
+const dog1Image = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/stacklayout/dog1.webp';
+const dog2Image = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/stacklayout/dog2.webp';
+const summerImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/stacklayout/summer.jpg';
+
+export default {
+    components: {
+        StackLayout,
+        Avatar,
+        KButton: Button,
+        ButtonGroup,
+        CardHeader,
+        CardBody,
+        CardActions,
+        Card,
+        CardTitle,
+        CardSubtitle,
+    },
+    data() {
+        return {
+            orientation: 'horizontal',
+            lindseyAvatar: avatar1Image,
+            vincenzoAvatar: avatar2Image,
+            marissaAvatar: avatar3Image,
+            lindseyImage: dog1Image,
+            vincenzoImage: summerImage,
+            marissaImage: dog2Image,
+        };
+    },
+    methods: {
+        toggleOrientation(orientation) {
+            this.orientation = orientation;
+        },
+    },
+};
+</script>
diff --git a/vue-options-api-demos/layout/stacklayout/overview/styles.css b/vue-options-api-demos/layout/stacklayout/overview/styles.css
new file mode 100644
index 00000000..ea6da123
--- /dev/null
+++ b/vue-options-api-demos/layout/stacklayout/overview/styles.css
@@ -0,0 +1,30 @@
+.example-container {
+    margin: 0 auto;
+    max-width: 900px;
+}
+.title-stacklayout-overview {
+    font-size: 2em;
+    margin-block-start: 0.67em;
+    margin-block-end: 0.67em;
+    font-weight: bold;
+}
+.k-flex-30 { flex: 1 1 30%; }
+.k-flex-40 { flex: 1 1 40%; }
+.k-card-cover {
+    object-fit: cover;
+    width: 100%;
+    height: 375px;
+}
+.k-card .k-card-body { padding: 5px 8px; }
+.photo-text {
+    text-align: right;
+    font-size: 10px;
+    font-style: italic;
+}
+@media only screen and (max-width: 890px) {
+  .k-card-title { font-size: 18px; }
+}
+@media only screen and (max-width: 760px) {
+  .k-card-title,
+  .k-card-subtitle { display: none; }
+}
diff --git a/vue-options-api-demos/layout/stacklayout/verticalalign/main.js b/vue-options-api-demos/layout/stacklayout/verticalalign/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/stacklayout/verticalalign/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/stacklayout/verticalalign/main.vue b/vue-options-api-demos/layout/stacklayout/verticalalign/main.vue
new file mode 100644
index 00000000..a5eb7226
--- /dev/null
+++ b/vue-options-api-demos/layout/stacklayout/verticalalign/main.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <DropDownList
+      :style="{ marginBottom: '15px' }"
+      :data-items="orientations"
+      :value="orientation"
+      @change="handleOrientationChange"
+    />
+    <DropDownList
+      :style="{ marginBottom: '15px' }"
+      :data-items="vAligns"
+      :value="vAlign"
+      @change="handleAlignChange"
+    />
+    <div class="example-wrapper">
+      <div class="page">
+        <div class="content">
+          <StackLayout
+            :orientation="orientation"
+            :align="{
+              vertical: vAlign,
+            }"
+            :style="{
+              height: '100%',
+            }"
+          >
+            <div class="box first">Box</div>
+            <div class="box second">Box</div>
+            <div class="box third">Box</div>
+            <div class="box fourth">Box</div>
+          </StackLayout>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import { StackLayout } from '@progress/kendo-vue-layout';
+import './styles.css';
+
+export default {
+  components: {
+    StackLayout,
+    DropDownList,
+  },
+  data() {
+    return {
+      vAlign: 'stretch',
+      orientation: 'horizontal',
+      orientations: ['horizontal', 'vertical'],
+      vAligns: ['top', 'middle', 'bottom', 'stretch'],
+    };
+  },
+  methods: {
+    handleOrientationChange(e) {
+      this.orientation = e.value;
+    },
+    handleAlignChange(e) {
+      this.vAlign = e.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/stacklayout/verticalalign/styles.css b/vue-options-api-demos/layout/stacklayout/verticalalign/styles.css
new file mode 100644
index 00000000..4766c64b
--- /dev/null
+++ b/vue-options-api-demos/layout/stacklayout/verticalalign/styles.css
@@ -0,0 +1,18 @@
+.example-wrapper {
+    width: 300px;
+    margin: 0 auto;
+    box-shadow: 0px 10px 20px #00000029;
+    border-radius: 30px;
+}
+.page { padding: 20px 10px; }
+.content {
+    background: #F9F9F9;
+    border-radius: 30px 30px 0 0;
+    height: 450px;
+}
+.box { padding: 4px; }
+.first { background-color: #fae47a; }
+.second { background-color: #fbd17f; }
+.third { background-color: #f5bf8b; }
+.fourth { background-color: #ebaa79; }
+.k-dropdown { margin: 0px 20px 20px 0px; }
diff --git a/vue-options-api-demos/layout/stepper/custom-rendering/main.js b/vue-options-api-demos/layout/stepper/custom-rendering/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/stepper/custom-rendering/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/stepper/custom-rendering/main.vue b/vue-options-api-demos/layout/stepper/custom-rendering/main.vue
new file mode 100644
index 00000000..29333d5e
--- /dev/null
+++ b/vue-options-api-demos/layout/stepper/custom-rendering/main.vue
@@ -0,0 +1,148 @@
+<template>
+  <div>
+    <div class="mb-5">
+      <Stepper
+        class="emoji-stepper"
+        :value="value"
+        @change="handleChange"
+        :items="stepsWithEmoji"
+        :item="'StepWithEmoji'"
+      >
+        <template v-slot:StepWithEmoji="{ props }">
+          <Step v-bind="props" @change="(e) => props.onChange(e)">
+            <span class="k-step-indicator" aria-hidden="true">
+              <span class="emoji">{{ props.emoji }}</span>
+            </span>
+            <span class="k-step-label">
+              <span class="k-step-text">{{ props.label }}</span>
+            </span>
+          </Step>
+        </template>
+      </Stepper>
+    </div>
+    <div class="mb-1">
+      <Stepper
+        :class="'custom-stepper'"
+        :value="value"
+        @change="handleChange"
+        :items="customSteps"
+        :item="'CustomStep'"
+      >
+        <template v-slot:CustomStep="{ props }">
+          <Step v-bind="props">
+            <div class="custom-step">
+              <SvgIcon :icon="props.svgIcon" />
+            </div>
+            <span class="step-label">{{ props.label }}</span>
+          </Step>
+        </template>
+      </Stepper>
+    </div>
+  </div>
+</template>
+<script>
+import { Stepper, Step } from "@progress/kendo-vue-layout";
+import { SvgIcon } from "@progress/kendo-vue-common";
+import {
+  gearIcon,
+  zoomInIcon,
+  eyeIcon,
+  fileAddIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    Stepper,
+    Step,
+    SvgIcon
+},
+  data() {
+    return {
+      value: 2,
+      stepsWithEmoji: [
+        {
+          label: "Happy",
+          emoji: "😀",
+        },
+        {
+          label: "Angry",
+          emoji: "😠",
+        },
+        {
+          label: "Cool",
+          emoji: "😎",
+        },
+        {
+          label: "Love",
+          emoji: "😍",
+        },
+      ],
+      customSteps: [
+        {
+          label: "Configuration",
+          svgIcon: gearIcon
+        },
+        {
+          label: "Sizing",
+          svgIcon: zoomInIcon
+        },
+        {
+          label: "Preview",
+          svgIcon: eyeIcon
+        },
+        {
+          label: "Submit",
+          svgIcon: fileAddIcon
+        },
+      ],
+    };
+  },
+  methods: {
+    handleChange(e) {
+      this.value = e.value;
+    },
+  },
+};
+</script>
+<style>
+.emoji-stepper .emoji {
+  height: 100%;
+  line-height: 30px;
+  font-size: 24px;
+}
+.custom-stepper .k-progressbar {
+  height: 4px;
+  top: 18px;
+}
+.custom-stepper .k-progressbar .k-state-selected {
+  background: linear-gradient(to right, #ffc837, #ff8008);
+}
+.custom-step {
+  width: 40px;
+  height: 40px;
+  border: 2px solid #ff8008;
+  border-radius: 10px;
+  background-clip: padding-box;
+  border-radius: 10px;
+  box-sizing: border-box;
+  text-align: center;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+}
+.k-step-done .custom-step {
+  background-image: radial-gradient(circle at center, #ffc837 10px, #ff8008);
+}
+.k-step:not(.k-step-done):not(.k-step-current) .custom-step {
+  border: 2px solid #ccc;
+}
+.k-step-link .k-icon {
+  font-size: 24px;
+  color: #000;
+}
+.k-step-link .step-label {
+  color: #75240d;
+  font-weight: bold;
+}
+</style>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/stepper/display-modes/main.js b/vue-options-api-demos/layout/stepper/display-modes/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/stepper/display-modes/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/stepper/display-modes/main.vue b/vue-options-api-demos/layout/stepper/display-modes/main.vue
new file mode 100644
index 00000000..d269f926
--- /dev/null
+++ b/vue-options-api-demos/layout/stepper/display-modes/main.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="row">
+    <div class="col-6">
+      <p>Simple Steps</p>
+      <Stepper :value="value" @change="handleChange" :items="steps" />
+    </div>
+    <div class="col-6">
+      <p>Steps with icons</p>
+      <Stepper :value="value" @change="handleChange" :items="icons" />
+    </div>
+    <div class="col-6 pt-5">
+      <p>Steps with labels</p>
+      <Stepper :value="value" @change="handleChange" :items="stepsWithLabel" />
+    </div>
+    <div class="col-6 pt-5">
+      <p>Steps with icons and labels</p>
+      <Stepper :value="value" @change="handleChange" :items="iconsWithLabel" />
+    </div>
+    <div class="col-6 pt-5">
+      <p>Steps with custom text</p>
+      <Stepper :value="value" @change="handleChange" :items="customText" />
+    </div>
+    <div class="col-6 pt-5">
+      <p>Labels Only</p>
+      <Stepper
+        :value="value"
+        @change="handleChange"
+        :mode="'labels'"
+        :items="labelOnly"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import { Stepper } from "@progress/kendo-vue-layout";
+
+import {
+  lockIcon,
+  userIcon,
+  trackChangesIcon,
+} from "@progress/kendo-svg-icons";
+export default {
+  components: {
+    Stepper,
+  },
+  data() {
+    return {
+      value: 1,
+      steps: [{}, {}, {}],
+      stepsWithLabel: [
+        {
+          label: "Step 1",
+        },
+        {
+          label: "Step 2",
+        },
+        {
+          label: "Step 3",
+        },
+      ],
+      icons: [
+        {
+          svgIcon: lockIcon,
+        },
+        {
+          svgIcon: userIcon,
+        },
+        {
+          svgIcon: trackChangesIcon,
+        },
+      ],
+      iconsWithLabel: [
+        {
+          svgIcon: lockIcon,
+          label: "Step 1",
+        },
+        {
+          svgIcon: userIcon,
+          label: "Step 2",
+        },
+        {
+          svgIcon: trackChangesIcon,
+          label: "Step 3",
+        },
+      ],
+      customText: [
+        {
+          text: "A",
+        },
+        {
+          text: "B",
+        },
+        {
+          text: "C",
+        },
+      ],
+      labelOnly: [
+        {
+          label: "Step 1",
+        },
+        {
+          label: "Step 2",
+        },
+        {
+          label: "Step 3",
+        },
+      ],
+    };
+  },
+  methods: {
+    handleChange(e) {
+      this.value = e.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/stepper/events/Logger.vue b/vue-options-api-demos/layout/stepper/events/Logger.vue
new file mode 100644
index 00000000..aa04a80b
--- /dev/null
+++ b/vue-options-api-demos/layout/stepper/events/Logger.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="example-config">
+    <h5>{{ title }}</h5>
+    <ul class="event-log">
+      <li v-for="(event, idx) in events" :key="idx">{{ event }}</li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    events: Array,
+    title: String,
+  },
+};
+</script>
+
+<style scoped>
+.example-config {
+  margin: 0 0 20px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+  margin: 0;
+  padding: 0;
+  max-height: 100px;
+  overflow-y: auto;
+  list-style-type: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: white;
+}
+.event-log li {
+  margin: 0;
+  padding: 0.3em;
+  line-height: 1.2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+  margin-bottom: -1px;
+}
+</style>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/stepper/events/main.js b/vue-options-api-demos/layout/stepper/events/main.js
new file mode 100644
index 00000000..1f1c6c86
--- /dev/null
+++ b/vue-options-api-demos/layout/stepper/events/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
+
diff --git a/vue-options-api-demos/layout/stepper/events/main.vue b/vue-options-api-demos/layout/stepper/events/main.vue
new file mode 100644
index 00000000..d1170c75
--- /dev/null
+++ b/vue-options-api-demos/layout/stepper/events/main.vue
@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <Stepper
+      :value="value"
+      @change="handleChange"
+      @focus="onFocus"
+      :items="items"
+    />
+    <br />
+    <br />
+    <Logger :title="'Events list'" :events="eventsList" />
+  </div>
+</template>
+
+<script>
+import { Stepper } from "@progress/kendo-vue-layout";
+import {
+  cartIcon,
+  dollarIcon,
+  eyeIcon,
+  mapMarkerIcon,
+  trackChangesAcceptIcon,
+} from "@progress/kendo-svg-icons";
+import Logger from "./Logger.vue";
+
+export default {
+  components: {
+    Stepper,
+    Logger,
+  },
+  computed: {
+    eventsList() {
+      return this.events;
+    },
+  },
+  data() {
+    return {
+      events: [],
+      value: 0,
+      items: [
+        {
+          label: "Cart",
+          svgIcon: cartIcon,
+        },
+        {
+          label: "Delivery Address",
+          svgIcon: mapMarkerIcon,
+        },
+        {
+          label: "Payment Method",
+          svgIcon: dollarIcon,
+        },
+        {
+          label: "Preview",
+          svgIcon: eyeIcon,
+          optional: true,
+        },
+        {
+          label: "Finish Order",
+          svgIcon: trackChangesAcceptIcon,
+        },
+      ],
+    };
+  },
+  methods: {
+    handleChange(e) {
+      this.events.unshift("Step '" + e.event.component.label + "' was clicked");
+      this.value = e.value;
+    },
+    onFocus(e) {
+      this.events.unshift("Step '" + e.target.innerText + "' was focused");
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/stepper/getting-started/main.js b/vue-options-api-demos/layout/stepper/getting-started/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/stepper/getting-started/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/stepper/getting-started/main.vue b/vue-options-api-demos/layout/stepper/getting-started/main.vue
new file mode 100644
index 00000000..2b606c5f
--- /dev/null
+++ b/vue-options-api-demos/layout/stepper/getting-started/main.vue
@@ -0,0 +1,53 @@
+<template>
+  <Stepper :value="value" @change="handleChange" :items="items" />
+</template>
+
+<script>
+import { Stepper } from "@progress/kendo-vue-layout";
+import {
+  cartIcon,
+  dollarIcon,
+  eyeIcon,
+  mapMarkerIcon,
+  trackChangesAcceptIcon,
+} from "@progress/kendo-svg-icons";
+
+export default {
+  components: {
+    Stepper,
+  },
+  data() {
+    return {
+      value: 0,
+      items: [
+        {
+          label: "Cart",
+          svgIcon: cartIcon,
+        },
+        {
+          label: "Delivery Address",
+          svgIcon: mapMarkerIcon,
+        },
+        {
+          label: "Payment Method",
+         svgIcon: dollarIcon,
+        },
+        {
+          label: "Preview",
+          svgIcon: eyeIcon,
+          optional: true,
+        },
+        {
+          label: "Finish Order",
+          svgIcon: trackChangesAcceptIcon,
+        },
+      ],
+    };
+  },
+  methods: {
+    handleChange(e) {
+      this.value = e.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/stepper/keyboard-navigation/main.js b/vue-options-api-demos/layout/stepper/keyboard-navigation/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/stepper/keyboard-navigation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/stepper/keyboard-navigation/main.vue b/vue-options-api-demos/layout/stepper/keyboard-navigation/main.vue
new file mode 100644
index 00000000..e6a5d2dd
--- /dev/null
+++ b/vue-options-api-demos/layout/stepper/keyboard-navigation/main.vue
@@ -0,0 +1,53 @@
+<template>
+  <Stepper :value="value" @change="handleChange" :items="items" />
+</template>
+
+<script>
+import { Stepper } from "@progress/kendo-vue-layout";
+
+import {
+  cartIcon,
+  dollarIcon,
+  eyeIcon,
+  mapMarkerIcon,
+  trackChangesAcceptIcon,
+} from "@progress/kendo-svg-icons";
+export default {
+  components: {
+    Stepper,
+  },
+  data() {
+    return {
+      value: 0,
+      items: [
+        {
+          label: "Cart",
+          svgIcon: cartIcon,
+        },
+        {
+          label: "Delivery Address",
+          svgIcon: mapMarkerIcon,
+        },
+        {
+          label: "Payment Method",
+          svgIcon: dollarIcon,
+        },
+        {
+          label: "Preview",
+          svgIcon: eyeIcon,
+          optional: true,
+        },
+        {
+          label: "Finish Order",
+          svgIcon: trackChangesAcceptIcon,
+        },
+      ],
+    };
+  },
+  methods: {
+    handleChange(e) {
+      this.value = e.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/stepper/linear/main.js b/vue-options-api-demos/layout/stepper/linear/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/stepper/linear/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/stepper/linear/main.vue b/vue-options-api-demos/layout/stepper/linear/main.vue
new file mode 100644
index 00000000..34498244
--- /dev/null
+++ b/vue-options-api-demos/layout/stepper/linear/main.vue
@@ -0,0 +1,58 @@
+<template>
+  <Stepper
+    :value="value"
+    @change="handleChange"
+    :items="items"
+    :linear="true"
+  />
+</template>
+
+<script>
+import { Stepper } from "@progress/kendo-vue-layout";
+
+import {
+  cartIcon,
+  dollarIcon,
+  eyeIcon,
+  mapMarkerIcon,
+  trackChangesAcceptIcon,
+} from "@progress/kendo-svg-icons";
+export default {
+  components: {
+    Stepper,
+  },
+  data() {
+    return {
+      value: 0,
+      items: [
+        {
+          label: "Cart",
+          svgIcon: cartIcon,
+        },
+        {
+          label: "Delivery Address",
+          svgIcon: mapMarkerIcon,
+        },
+        {
+          label: "Payment Method",
+          svgIcon: dollarIcon,
+        },
+        {
+          label: "Preview",
+          svgIcon: eyeIcon,
+          optional: true,
+        },
+        {
+          label: "Finish Order",
+          svgIcon: trackChangesAcceptIcon,
+        },
+      ],
+    };
+  },
+  methods: {
+    handleChange(e) {
+      this.value = e.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/stepper/orientation/main.js b/vue-options-api-demos/layout/stepper/orientation/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/stepper/orientation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/stepper/orientation/main.vue b/vue-options-api-demos/layout/stepper/orientation/main.vue
new file mode 100644
index 00000000..e58b7b2a
--- /dev/null
+++ b/vue-options-api-demos/layout/stepper/orientation/main.vue
@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <p>Change the orientation:</p>
+    <DropDownList
+      :style="{ width: '220px' }"
+      :data-items="['horizontal', 'vertical']"
+      :value="orientation"
+      @change="handleOrientationChange"
+    />
+    <hr />
+    <Stepper
+      :value="value"
+      @change="handleChange"
+      :items="items"
+      :orientation="orientation"
+    />
+  </div>
+</template>
+
+<script>
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+import { Stepper } from "@progress/kendo-vue-layout";
+import {
+  lockIcon,
+  userIcon,
+  myspaceIcon,
+  trackChangesAcceptIcon,
+} from "@progress/kendo-svg-icons";
+export default {
+  components: {
+    Stepper,
+    DropDownList,
+  },
+  data() {
+    return {
+      value: 1,
+      orientation: "horizontal",
+      items: [
+        {
+          svgIcon: lockIcon,
+          label: "Account Info",
+        },
+        {
+          svgIcon: userIcon,
+          label: "Personal Info",
+        },
+        {
+          svgIcon: myspaceIcon,
+          label: "Membership",
+        },
+        {
+          svgIcon: trackChangesAcceptIcon,
+          label: "Verification",
+        },
+      ],
+    };
+  },
+  methods: {
+    handleChange(e) {
+      this.value = e.value;
+    },
+    handleOrientationChange(e) {
+      this.orientation = e.target.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/stepper/types/main.js b/vue-options-api-demos/layout/stepper/types/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/stepper/types/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/stepper/types/main.vue b/vue-options-api-demos/layout/stepper/types/main.vue
new file mode 100644
index 00000000..4e48e7d5
--- /dev/null
+++ b/vue-options-api-demos/layout/stepper/types/main.vue
@@ -0,0 +1,42 @@
+<template>
+   <Stepper :value="value" @change="handleChange" :items="items" />
+</template>
+
+<script>
+import {
+ Stepper
+    } from '@progress/kendo-vue-layout';
+export default {
+    components: {
+       Stepper
+    },
+    data () {
+      return {
+        value: 0,
+        items: [
+            {
+                label: "Success Step",
+                isValid: true,
+            },
+            {
+                label: "Error Step",
+                isValid: false,
+            },
+            {
+                label: "Disabled Step",
+                disabled: true,
+            },
+            {
+                label: "Optional Step",
+                optional: true,
+            },
+        ]
+      };
+    },
+    methods: {
+      handleChange (e) {
+        this.value = e.value;
+      }
+    }
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/stepper/validation/basic/main.js b/vue-options-api-demos/layout/stepper/validation/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/stepper/validation/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/stepper/validation/basic/main.vue b/vue-options-api-demos/layout/stepper/validation/basic/main.vue
new file mode 100644
index 00000000..cedc5855
--- /dev/null
+++ b/vue-options-api-demos/layout/stepper/validation/basic/main.vue
@@ -0,0 +1,58 @@
+<template>
+  <div
+    :style="{
+      display: 'grid',
+      gridTemplateRows: 'repeat(2, 100px)',
+    }"
+  >
+    <Stepper :value="step" @change="handleChange" :items="steps" />
+    <Stepper
+      :value="step"
+      @change="handleChange"
+      :items="steps"
+      :mode="'labels'"
+    />
+  </div>
+</template>
+<script>
+import { Stepper } from "@progress/kendo-vue-layout";
+export default {
+  components: {
+    Stepper,
+  },
+  data() {
+    return {
+      step: 0,
+      steps: [
+        {
+          label: "Account Details",
+          isValid: undefined,
+        },
+        {
+          label: "Personal Details",
+          isValid: undefined,
+        },
+        {
+          label: "Delivery Details",
+          isValid: undefined,
+        },
+        {
+          label: "Payment Details",
+          isValid: undefined,
+        },
+      ],
+    };
+  },
+  methods: {
+    handleChange(e) {
+      const isValid = this.step % 2 === 0;
+      const currentSteps = this.steps.map((currentStep, index) => ({
+        ...currentStep,
+        isValid: index === this.step ? isValid : currentStep.isValid,
+      }));
+      this.steps = currentSteps;
+      this.step = e.value;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/stepper/validation/icons/main.js b/vue-options-api-demos/layout/stepper/validation/icons/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/stepper/validation/icons/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/stepper/validation/icons/main.vue b/vue-options-api-demos/layout/stepper/validation/icons/main.vue
new file mode 100644
index 00000000..cdcc915b
--- /dev/null
+++ b/vue-options-api-demos/layout/stepper/validation/icons/main.vue
@@ -0,0 +1,77 @@
+<template>
+  <div
+    :style="{
+      display: 'grid',
+      gridTemplateRows: 'repeat(2, 100px)',
+    }"
+  >
+    <Stepper
+      :value="step"
+      @change="handleChange"
+      :items="steps"
+    />
+    <Stepper
+      :value="step"
+      @change="handleChange"
+      :items="steps"
+      :mode="'labels'"
+    />
+  </div>
+</template>
+<script>
+import { Stepper } from "@progress/kendo-vue-layout";
+import {
+  checkCircleIcon,
+  checkOutlineIcon,
+  xCircleIcon,
+  xOutlineIcon,
+  xIcon
+} from "@progress/kendo-svg-icons";
+export default {
+  components: {
+    Stepper,
+  },
+  data() {
+    return {
+      checkCircleIcon,
+      xCircleIcon,
+      step: 0,
+      steps: [
+        {
+          label: "Account Details",
+          isValid: undefined,
+          successSvgIcon: checkCircleIcon,
+          errorSvgIcon:xCircleIcon
+        },
+        {
+          label: "Personal Details",
+          isValid: undefined,
+          successSvgIcon: checkCircleIcon,
+          errorSvgIcon:xOutlineIcon
+        },
+        {
+          label: "Delivery Details",
+          isValid: undefined,
+          successSvgIcon: checkOutlineIcon,
+          errorSvgIcon:xIcon
+        },
+        {
+          label: "Payment Details",
+          isValid: undefined,
+        },
+      ],
+    };
+  },
+  methods: {
+    handleChange(e) {
+      const isValid = this.step % 2 === 0;
+      const currentSteps = this.steps.map((currentStep, index) => ({
+        ...currentStep,
+        isValid: index === this.step ? isValid : currentStep.isValid,
+      }));
+      this.steps = currentSteps;
+      this.step = e.value;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/tabstrip/configuration/main.js b/vue-options-api-demos/layout/tabstrip/configuration/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/tabstrip/configuration/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/tabstrip/configuration/main.vue b/vue-options-api-demos/layout/tabstrip/configuration/main.vue
new file mode 100644
index 00000000..184e173d
--- /dev/null
+++ b/vue-options-api-demos/layout/tabstrip/configuration/main.vue
@@ -0,0 +1,47 @@
+<template>
+  <TabStrip :selected="selected" @select="onSelect" :tabs="tabs">
+    <template v-slot:Paris>
+      Paris is the capital and most populous city of France.</template>
+    <template v-slot:NewYork>
+      The City of New York, often called New York City or simply New York, is
+      the most populous city in the United States.</template>
+    <template v-slot:Tallin>
+      Tallinn is the capital and largest city of Estonia.</template>
+  </TabStrip>
+</template>
+
+<script>
+import { TabStrip } from '@progress/kendo-vue-layout';
+
+const initialTabs = [
+  {
+    title: 'Paris',
+    content: 'Paris',
+  },
+  {
+    title: 'NewYork',
+    content: 'NewYork',
+  },
+  {
+    title: 'Tallinn',
+    content: 'Tallin',
+  },
+];
+
+export default {
+  components: {
+    TabStrip
+  },
+  data: function () {
+    return {
+      selected: 0,
+      tabs: initialTabs,
+    };
+  },
+  methods: {
+    onSelect: function (e) {
+      this.selected = e.selected;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/tabstrip/events/Logger.vue b/vue-options-api-demos/layout/tabstrip/events/Logger.vue
new file mode 100644
index 00000000..d0ed6682
--- /dev/null
+++ b/vue-options-api-demos/layout/tabstrip/events/Logger.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="example-config">
+    <ul class="event-log">
+      <li v-for="(event, idx) in events" :key="idx">
+        {{ events.length - idx }}. {{ event }}
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    events: Array,
+  },
+};
+</script>
+
+<style scoped>
+.example-config {
+  margin: 0 0 20px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+  margin: 0;
+  padding: 0;
+  max-height: 100px;
+  overflow-y: auto;
+  list-style-type: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: white;
+}
+.event-log li {
+  margin: 0;
+  padding: 0.3em;
+  line-height: 1.2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+  margin-bottom: -1px;
+}
+</style>
diff --git a/vue-options-api-demos/layout/tabstrip/events/main.js b/vue-options-api-demos/layout/tabstrip/events/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/tabstrip/events/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/tabstrip/events/main.vue b/vue-options-api-demos/layout/tabstrip/events/main.vue
new file mode 100644
index 00000000..07a34d77
--- /dev/null
+++ b/vue-options-api-demos/layout/tabstrip/events/main.vue
@@ -0,0 +1,150 @@
+<template>
+    <TabStrip :selected="selected" @select="onSelect" :tabs="tabs">
+        <template v-slot:Paris>
+            <div>
+                <span class="rainy">
+                    <img :src="rainyImage" />
+                </span>
+                <div class="weather">
+                    <h2>17<span>&ordm;C</span></h2>
+                    <p>Rainy weather in Paris.</p>
+                </div>
+                <p class="info">City info</p>
+                <p>
+                    Paris is the capital and most populous city of France. It has an area
+                    of 105 square kilometres (41 square miles) and a population in 2013 of
+                    2,229,621 within its administrative limits. The city is both a commune
+                    and department, and forms the centre and headquarters of the
+                    Île-de-France, or Paris Region, which has an area of 12,012 square
+                    kilometres (4,638 square miles) and a population in 2014 of
+                    12,005,077, comprising 18.2 percent of the population of France.
+                </p>
+            </div>
+        </template>
+        <template v-slot:NewYork>
+            <div>
+                <span class="sunny">
+                    <img :src="sunnyImage" />
+                </span>
+                <div class="weather">
+                    <h2>29<span>&ordm;C</span></h2>
+                    <p>Sunny weather in New York.</p>
+                </div>
+                <p class="info">City info</p>
+                <p>
+                    The City of New York, often called New York City or simply New York,
+                    is the most populous city in the United States. With an estimated 2015
+                    population of 8,550,405 distributed over a land area of just 305
+                    square miles (790 km2), New York City is also the most densely
+                    populated major city in the United States. Located at the southern tip
+                    of the state of New York, the city is the center of the New York
+                    metropolitan area, one of the most populous urban agglomerations in
+                    the world.
+                </p>
+                <p>
+                    A global power city, New York City exerts a significant impact upon
+                    commerce, finance, media, art, fashion, research, technology,
+                    education, and entertainment, its fast pace defining the term New York
+                    minute. Home to the headquarters of the United Nations, New York is an
+                    important center for international diplomacy and has been described as
+                    the cultural and financial capital of the world.
+                </p>
+            </div>
+        </template>
+        <template v-slot:Tallin>
+            <div>
+                <span class="sunny">
+                    <img :src="sunnyImage" />
+                </span>
+                <div class="weather">
+                    <h2>21<span>&ordm;C</span></h2>
+                    <p>Sunny weather in Tallin.</p>
+                </div>
+                <p class="info">City info</p>
+                <p>
+                    Tallinn is the capital and largest city of Estonia. It is situated on
+                    the northern coast of the country, on the shore of the Gulf of
+                    Finland, 80 km (50 mi) south of Helsinki, east of Stockholm and west
+                    of Saint Petersburg. From the 13th century until 1918 (and briefly
+                    during the Nazi occupation of Estonia from 1941 to 1944), the city was
+                    known as Reval. Tallinn occupies an area of 159.2 km2 (61.5 sq mi) and
+                    has a population of 443,894. Approximately 32% of Estonia's total
+                    population lives in Tallinn.
+                </p>
+                <p>
+                    Tallinn was founded in 1248, but the earliest human settlements are
+                    over 5,000 years old, making it one of the oldest capital cities of
+                    Northern Europe. Due to its strategic location, the city became a
+                    major trade hub, especially from the 14th to the 16th century, when it
+                    grew in importance as part of the Hanseatic League.
+                </p>
+            </div>
+        </template>
+        <template v-slot:Sydney> </template>
+    </TabStrip>
+</template>
+
+<script>
+import { TabStrip } from '@progress/kendo-vue-layout';
+
+const sunnyImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/tabstrip/sunny.png';
+const rainyImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/tabstrip/rainy.png';
+
+export default {
+    components: {
+        TabStrip
+    },
+    data: function () {
+        return {
+            sunnyImage,
+            rainyImage,
+            selected: 0,
+            tabs: [
+                {
+                    title: 'Paris',
+                    content: 'Paris',
+                },
+                {
+                    title: 'New York City',
+                    content: 'NewYork',
+                },
+                {
+                    title: 'Tallinn',
+                    content: 'Tallin',
+                },
+                {
+                    title: 'Sydney',
+                    content: 'Tallin',
+                    disabled: true,
+                },
+            ],
+        };
+    },
+    methods: {
+        onSelect: function (e) {
+            this.selected = e.selected;
+        },
+    },
+};
+</script>
+
+<style>
+.sunny,
+.cloudy,
+.rainy {
+    display: block;
+    margin: 30px auto 10px;
+    width: 128px;
+    height: 128px;
+}
+
+.weather {
+    margin: 0 auto 30px;
+    text-align: center;
+}
+
+.info {
+    font-weight: bold;
+    font-size: 20px;
+}
+</style>
diff --git a/vue-options-api-demos/layout/tabstrip/keyboard/main.js b/vue-options-api-demos/layout/tabstrip/keyboard/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/tabstrip/keyboard/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/tabstrip/keyboard/main.vue b/vue-options-api-demos/layout/tabstrip/keyboard/main.vue
new file mode 100644
index 00000000..671e6578
--- /dev/null
+++ b/vue-options-api-demos/layout/tabstrip/keyboard/main.vue
@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <div class="example-config">
+      <legend>Layout Settings</legend>
+      <span>TabPosition:</span>
+      <RadioGroup
+        :data-items="radioGroupItems"
+        :layout="'horizontal'"
+        :value="position"
+        @change="handleChange"
+      />
+    </div>
+    <hr />
+    <TabStrip
+      :selected="selected"
+      @select="onSelect"
+      :tab-position="position"
+      :tabs="tabs"
+    >
+      <template v-slot:Paris>
+        <div class="weather">
+          <h4>17<span>&ordm;C</span></h4>
+          <p>Rainy weather in Paris.</p>
+        </div>
+      </template>
+      <template v-slot:NewYork>
+        <div class="weather">
+          <h4>29<span>&ordm;C</span></h4>
+          <p>Sunny weather in New York.</p>
+        </div>
+      </template>
+      <template v-slot:London>
+        <div class="weather">
+          <h4>21<span>&ordm;C</span></h4>
+          <p>Sunny weather in London.</p>
+        </div>
+      </template>
+      <template v-slot:Moscow>
+        <div class="weather">
+          <h4>16<span>&ordm;C</span></h4>
+          <p>Cloudy weather in Moscow.</p>
+        </div>
+      </template>
+    </TabStrip>
+  </div>
+</template>
+
+<script>
+import { TabStrip } from '@progress/kendo-vue-layout';
+import { RadioGroup } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    TabStrip,
+    RadioGroup,
+  },
+  data: function () {
+    return {
+      selected: 0,
+      position: 'top',
+      tabs: [
+        { title: 'Paris', content: 'Paris' },
+        { title: 'New York', content: 'NewYork' },
+        { title: 'London', content: 'London' },
+        { title: 'Moscow', content: 'Moscow' },
+      ],
+      radioGroupItems: [
+        {
+          label: 'Left',
+          value: 'left',
+        },
+        {
+          label: 'Right',
+          value: 'right',
+        },
+        {
+          label: 'Top',
+          value: 'top',
+        },
+        {
+          label: 'Bottom',
+          value: 'bottom',
+        },
+      ],
+    };
+  },
+  methods: {
+    onSelect: function (e) {
+      this.selected = e.selected;
+    },
+    handleChange(e) {
+      this.position = e.value;
+    },
+  },
+};
+</script>
+
+<style>
+.weather {
+  margin: 30px;
+  text-align: center;
+}
+</style>
diff --git a/vue-options-api-demos/layout/tabstrip/overview/main.js b/vue-options-api-demos/layout/tabstrip/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/tabstrip/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/tabstrip/overview/main.vue b/vue-options-api-demos/layout/tabstrip/overview/main.vue
new file mode 100644
index 00000000..1d0befe7
--- /dev/null
+++ b/vue-options-api-demos/layout/tabstrip/overview/main.vue
@@ -0,0 +1,144 @@
+<template>
+    <TabStrip :selected="selected" @select="onSelect" :tabs="tabs">
+        <template v-slot:Paris>
+            <div>
+                <span class="rainy">
+                    <img :src="rainyImage" />
+                </span>
+                <div class="weather">
+                    <h2>17<span>&ordm;C</span></h2>
+                    <p>Rainy weather in Paris.</p>
+                </div>
+                <p class="info">City info</p>
+                <p>
+                    Paris is the capital and most populous city of France. It has an area
+                    of 105 square kilometres (41 square miles) and a population in 2013 of
+                    2,229,621 within its administrative limits. The city is both a commune
+                    and department, and forms the centre and headquarters of the
+                    Île-de-France, or Paris Region, which has an area of 12,012 square
+                    kilometres (4,638 square miles) and a population in 2014 of
+                    12,005,077, comprising 18.2 percent of the population of France.
+                </p>
+            </div>
+        </template>
+        <template v-slot:NewYork>
+            <div>
+                <span class="sunny">
+                    <img :src="sunnyImage" />
+                </span>
+                <div class="weather">
+                    <h2>29<span>&ordm;C</span></h2>
+                    <p>Sunny weather in New York.</p>
+                </div>
+                <p class="info">City info</p>
+                <p>
+                    The City of New York, often called New York City or simply New York,
+                    is the most populous city in the United States. With an estimated 2015
+                    population of 8,550,405 distributed over a land area of just 305
+                    square miles (790 km2), New York City is also the most densely
+                    populated major city in the United States. Located at the southern tip
+                    of the state of New York, the city is the center of the New York
+                    metropolitan area, one of the most populous urban agglomerations in
+                    the world.
+                </p>
+                <p>
+                    A global power city, New York City exerts a significant impact upon
+                    commerce, finance, media, art, fashion, research, technology,
+                    education, and entertainment, its fast pace defining the term New York
+                    minute. Home to the headquarters of the United Nations, New York is an
+                    important center for international diplomacy and has been described as
+                    the cultural and financial capital of the world.
+                </p>
+            </div>
+        </template>
+        <template v-slot:Tallin>
+            <div>
+                <span class="sunny">
+                    <img :src="sunnyImage" />
+                </span>
+                <div class="weather">
+                    <h2>21<span>&ordm;C</span></h2>
+                    <p>Sunny weather in Tallin.</p>
+                </div>
+                <p class="info">City info</p>
+                <p>
+                    Tallinn is the capital and largest city of Estonia. It is situated on
+                    the northern coast of the country, on the shore of the Gulf of
+                    Finland, 80 km (50 mi) south of Helsinki, east of Stockholm and west
+                    of Saint Petersburg. From the 13th century until 1918 (and briefly
+                    during the Nazi occupation of Estonia from 1941 to 1944), the city was
+                    known as Reval. Tallinn occupies an area of 159.2 km2 (61.5 sq mi) and
+                    has a population of 443,894. Approximately 32% of Estonia's total
+                    population lives in Tallinn.
+                </p>
+                <p>
+                    Tallinn was founded in 1248, but the earliest human settlements are
+                    over 5,000 years old, making it one of the oldest capital cities of
+                    Northern Europe. Due to its strategic location, the city became a
+                    major trade hub, especially from the 14th to the 16th century, when it
+                    grew in importance as part of the Hanseatic League.
+                </p>
+            </div>
+        </template>
+        <template v-slot:Sydney> </template>
+    </TabStrip>
+</template>
+
+<script>
+import { TabStrip } from '@progress/kendo-vue-layout';
+
+const sunnyImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/tabstrip/sunny.png';
+const rainyImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/tabstrip/rainy.png';
+
+export default {
+    components: {
+        TabStrip
+    },
+    data: function () {
+        return {
+            sunnyImage,
+            rainyImage,
+            selected: 0,
+            tabs: [
+                {
+                    title: 'Paris',
+                    content: 'Paris',
+                },
+                {
+                    title: 'New York City',
+                    content: 'NewYork',
+                },
+                {
+                    title: 'Tallinn',
+                    content: 'Tallin',
+                },
+                {
+                    title: 'Sydney',
+                    content: 'Tallin',
+                    disabled: true,
+                },
+            ],
+        };
+    },
+    methods: {
+        onSelect: function (e) {
+            this.selected = e.selected;
+        },
+    },
+};
+</script>
+
+<style>
+.sunny,
+.cloudy,
+.rainy {
+    display: block;
+    margin: 30px auto 10px;
+    width: 128px;
+    height: 128px;
+}
+.info {
+    font-weight: bold;
+    font-size: 20px;
+}
+</style>
diff --git a/vue-options-api-demos/layout/tabstrip/size/main.js b/vue-options-api-demos/layout/tabstrip/size/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/tabstrip/size/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/tabstrip/size/main.vue b/vue-options-api-demos/layout/tabstrip/size/main.vue
new file mode 100644
index 00000000..05371ea5
--- /dev/null
+++ b/vue-options-api-demos/layout/tabstrip/size/main.vue
@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <div class="example-config">
+      <legend>Layout Settings</legend>
+      <span>TabStrip Size:</span>
+      <RadioGroup
+        :data-items="radioGroupItems"
+        :layout="'horizontal'"
+        :value="size"
+        @change="handleChange"
+      />
+    </div>
+    <hr />
+    <TabStrip
+      :selected="selected"
+      @select="onSelect"
+      :size="size"
+      :tabs="tabs"
+    >
+      <template v-slot:Paris>
+        <div class="weather">
+          <h4>17<span>&ordm;C</span></h4>
+          <p>Rainy weather in Paris.</p>
+        </div>
+      </template>
+      <template v-slot:NewYork>
+        <div class="weather">
+          <h4>29<span>&ordm;C</span></h4>
+          <p>Sunny weather in New York.</p>
+        </div>
+      </template>
+      <template v-slot:London>
+        <div class="weather">
+          <h4>21<span>&ordm;C</span></h4>
+          <p>Sunny weather in London.</p>
+        </div>
+      </template>
+      <template v-slot:Moscow>
+        <div class="weather">
+          <h4>16<span>&ordm;C</span></h4>
+          <p>Cloudy weather in Moscow.</p>
+        </div>
+      </template>
+    </TabStrip>
+  </div>
+</template>
+
+<script>
+import { TabStrip } from '@progress/kendo-vue-layout';
+import { RadioGroup } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    TabStrip,
+    RadioGroup,
+  },
+  data: function () {
+    return {
+      selected: 0,
+      size: 'large',
+      tabs: [
+        { title: 'Paris', content: 'Paris' },
+        { title: 'New York', content: 'NewYork' },
+        { title: 'London', content: 'London' },
+        { title: 'Moscow', content: 'Moscow' },
+      ],
+      radioGroupItems: [
+        {
+          label: 'small',
+          value: 'small',
+        },
+        {
+          label: 'medium',
+          value: 'medium',
+        },
+        {
+          label: 'large',
+          value: 'large',
+        },
+        {
+          label: 'null',
+          value: null,
+        },
+      ],
+    };
+  },
+  methods: {
+    onSelect: function (e) {
+      this.selected = e.selected;
+    },
+    handleChange(e) {
+      this.size = e.value;
+    },
+  },
+};
+</script>
+
+<style>
+.weather {
+  margin: 30px;
+  text-align: center;
+}
+</style>
diff --git a/vue-options-api-demos/layout/tabstrip/tabs/alignment/main.js b/vue-options-api-demos/layout/tabstrip/tabs/alignment/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/tabstrip/tabs/alignment/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/tabstrip/tabs/alignment/main.vue b/vue-options-api-demos/layout/tabstrip/tabs/alignment/main.vue
new file mode 100644
index 00000000..21674b44
--- /dev/null
+++ b/vue-options-api-demos/layout/tabstrip/tabs/alignment/main.vue
@@ -0,0 +1,129 @@
+<template>
+    <div>
+      <div class="example-config">
+        <legend>Layout Settings</legend>
+        <span>TabAlignment:</span>
+        <RadioGroup
+          :data-items="radioGroupItems"
+          :layout="'horizontal'"
+          :value="alignment"
+          @change="handleChange"
+        />
+      </div>
+      <hr />
+      <TabStrip
+        :selected="selected"
+        @select="onSelect"
+        :tab-alignment="alignment"
+        :tabs="tabs"
+      >
+        <template v-slot:Paris>
+          <p>
+            Paris is the capital and most populous city of France. It has an area
+            of 105 square kilometres (41 square miles) and a population in 2013 of
+            2,229,621 within its administrative limits. The city is both a commune
+            and department, and forms the centre and headquarters of the
+            Île-de-France, or Paris Region, which has an area of 12,012 square
+            kilometres (4,638 square miles) and a population in 2014 of
+            12,005,077, comprising 18.2 percent of the population of France.
+          </p>
+        </template>
+        <template v-slot:NewYork>
+          <div>
+            <p>
+              The City of New York, often called New York City or simply New York,
+              is the most populous city in the United States. With an estimated
+              2015 population of 8,550,405 distributed over a land area of just
+              305 square miles (790 km2), New York City is also the most densely
+              populated major city in the United States. Located at the southern
+              tip of the state of New York, the city is the center of the New York
+              metropolitan area, one of the most populous urban agglomerations in
+              the world.
+            </p>
+            <p>
+              A global power city, New York City exerts a significant impact upon
+              commerce, finance, media, art, fashion, research, technology,
+              education, and entertainment, its fast pace defining the term New
+              York minute. Home to the headquarters of the United Nations, New
+              York is an important center for international diplomacy and has been
+              described as the cultural and financial capital of the world.
+            </p>
+          </div>
+        </template>
+        <template v-slot:Tallinn>
+          <div>
+            <p>
+              Tallinn is the capital and largest city of Estonia. It is situated
+              on the northern coast of the country, on the shore of the Gulf of
+              Finland, 80 km (50 mi) south of Helsinki, east of Stockholm and west
+              of Saint Petersburg. From the 13th century until 1918 (and briefly
+              during the Nazi occupation of Estonia from 1941 to 1944), the city
+              was known as Reval. Tallinn occupies an area of 159.2 km2 (61.5 sq
+              mi) and has a population of 443,894. Approximately 32% of Estonia's
+              total population lives in Tallinn.
+            </p>
+            <p>
+              Tallinn was founded in 1248, but the earliest human settlements are
+              over 5,000 years old, making it one of the oldest capital cities of
+              Northern Europe. Due to its strategic location, the city became a
+              major trade hub, especially from the 14th to the 16th century, when
+              it grew in importance as part of the Hanseatic League.
+            </p>
+          </div>
+        </template>
+      </TabStrip>
+    </div>
+  </template>
+
+  <script>
+  import { TabStrip } from '@progress/kendo-vue-layout';
+  import { RadioGroup } from '@progress/kendo-vue-inputs';
+
+  export default {
+    components: {
+      TabStrip,
+      RadioGroup,
+    },
+    data: function () {
+      return {
+        selected: 0,
+        alignment: 'start',
+        tabs: [
+          { title: 'Paris', content: 'Paris' },
+          { title: 'New York', content: 'NewYork' },
+          { title: 'Tallinn', content: 'Tallinn' },
+        ],
+        radioGroupItems: [
+          {
+            label: 'Start',
+            value: 'start',
+          },
+          {
+            label: 'Center',
+            value: 'center',
+          },
+          {
+            label: 'End',
+            value: 'end',
+          },
+          {
+            label: 'Justify',
+            value: 'justify',
+          },
+          {
+            label: 'Stretched',
+            value: 'stretched',
+          },
+        ],
+      };
+    },
+    methods: {
+      onSelect: function (e) {
+        this.selected = e.selected;
+      },
+      handleChange(e) {
+        this.alignment = e.value;
+      },
+    },
+  };
+  </script>
diff --git a/vue-options-api-demos/layout/tabstrip/tabs/closable-tabs/Title.vue b/vue-options-api-demos/layout/tabstrip/tabs/closable-tabs/Title.vue
new file mode 100644
index 00000000..a3892dd6
--- /dev/null
+++ b/vue-options-api-demos/layout/tabstrip/tabs/closable-tabs/Title.vue
@@ -0,0 +1,32 @@
+<template>
+    <span class="k-item k-state-default">
+      <span class="k-link">{{content}}</span>
+      <span class="k-link" @click="() => onTabRemove(content)">
+        <SvgIcon :icon="xIcon" />
+      </span>
+    </span>
+</template>
+
+<script>
+import { SvgIcon } from '@progress/kendo-vue-common';
+import { xIcon } from '@progress/kendo-svg-icons';
+
+export default {
+    components: {
+        SvgIcon
+    },
+    props:{
+        content: String
+    },
+    data(){
+        return {
+            xIcon
+        }
+    },
+    methods: {
+        onTabRemove: function(e){
+            this.$emit("tabRemove", e)
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/layout/tabstrip/tabs/closable-tabs/main.js b/vue-options-api-demos/layout/tabstrip/tabs/closable-tabs/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/tabstrip/tabs/closable-tabs/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/tabstrip/tabs/closable-tabs/main.vue b/vue-options-api-demos/layout/tabstrip/tabs/closable-tabs/main.vue
new file mode 100644
index 00000000..37bb9581
--- /dev/null
+++ b/vue-options-api-demos/layout/tabstrip/tabs/closable-tabs/main.vue
@@ -0,0 +1,62 @@
+<template>
+  <TabStrip :selected="selected" @select="onSelect" :tabs="tabs">
+    <template v-slot:Paris>
+      Paris is the capital and most populous city of France.
+    </template>
+    <template v-slot:titleRender="{ props }">
+      <Title :content="props.title" @tabRemove="(e) => onTabRemove(e)" />
+    </template>
+    <template v-slot:NewYork>
+      The City of New York, often called New York City or simply New York, is
+      the most populous city in the United States.
+    </template>
+    <template v-slot:Tallin>
+      Tallinn is the capital and largest city of Estonia.
+    </template>
+  </TabStrip>
+</template>
+
+<script>
+import { TabStrip } from '@progress/kendo-vue-layout';
+import Title from './Title.vue';
+
+export default {
+  components: {
+    TabStrip,
+    Title,
+  },
+  data: function () {
+    return {
+      selected: 0,
+      tabs: [
+        {
+          title: 'Paris',
+          content: 'Paris',
+          titleRender: 'titleRender',
+        },
+        {
+          title: 'New York City',
+          content: 'NewYork',
+          titleRender: 'titleRender',
+        },
+        {
+          title: 'Tallinn',
+          content: 'Tallin',
+          titleRender: 'titleRender',
+        },
+      ],
+    };
+  },
+  methods: {
+    onSelect: function (e) {
+      this.selected = e.selected;
+    },
+    onTabRemove: function (tab) {
+      const newTabs = this.tabs.filter((item) => {
+        return item.title !== tab;
+      });
+      this.tabs = newTabs;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/tabstrip/tabs/disabled/main.js b/vue-options-api-demos/layout/tabstrip/tabs/disabled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/tabstrip/tabs/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/tabstrip/tabs/disabled/main.vue b/vue-options-api-demos/layout/tabstrip/tabs/disabled/main.vue
new file mode 100644
index 00000000..b5989d18
--- /dev/null
+++ b/vue-options-api-demos/layout/tabstrip/tabs/disabled/main.vue
@@ -0,0 +1,48 @@
+<template>
+  <TabStrip :selected="selected" @select="onSelect" :tabs="tabs">
+    <template v-slot:TabOne>
+      <p>Tab 1 Content</p>
+    </template>
+    <template v-slot:TabTwo>
+      <p>Tab 2 Content</p>
+    </template>
+    <template v-slot:TabThree>
+      <p>Tab 3 Content</p>
+    </template>
+  </TabStrip>
+</template>
+
+<script>
+import { TabStrip } from '@progress/kendo-vue-layout';
+
+export default {
+  components: {
+    TabStrip,
+  },
+  data: function () {
+    return {
+      selected: 0,
+      tabs: [
+        {
+          title: 'Tab 1 Title',
+          content: 'TabOne',
+        },
+        {
+          title: 'Tab 2 Title',
+          content: 'TabTwo',
+        },
+        {
+          title: 'Tab 3 Title',
+          content: 'TabThree',
+          disabled: true,
+        },
+      ],
+    };
+  },
+  methods: {
+    onSelect: function (e) {
+      this.selected = e.selected;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/tabstrip/tabs/initial/main.js b/vue-options-api-demos/layout/tabstrip/tabs/initial/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/tabstrip/tabs/initial/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/tabstrip/tabs/initial/main.vue b/vue-options-api-demos/layout/tabstrip/tabs/initial/main.vue
new file mode 100644
index 00000000..c458f224
--- /dev/null
+++ b/vue-options-api-demos/layout/tabstrip/tabs/initial/main.vue
@@ -0,0 +1,47 @@
+<template>
+  <TabStrip :selected="selected" @select="onSelect" :tabs="tabs">
+    <template v-slot:TabOne>
+      <p>Tab 1 Content</p>
+    </template>
+    <template v-slot:TabTwo>
+      <p>Tab 2 Content</p>
+    </template>
+    <template v-slot:TabThree>
+      <p>Tab 3 Content</p>
+    </template>
+  </TabStrip>
+</template>
+
+<script>
+import { TabStrip } from '@progress/kendo-vue-layout';
+
+export default {
+  components: {
+    TabStrip,
+  },
+  data: function () {
+    return {
+      selected: 2,
+      tabs: [
+        {
+          title: 'Tab 1 Title',
+          content: 'TabOne',
+        },
+        {
+          title: 'Tab 2 Title',
+          content: 'TabTwo',
+        },
+        {
+          title: 'Tab 3 Title',
+          content: 'TabThree',
+        },
+      ],
+    };
+  },
+  methods: {
+    onSelect: function (e) {
+      this.selected = e.selected;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/tabstrip/tabs/position/main.js b/vue-options-api-demos/layout/tabstrip/tabs/position/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/tabstrip/tabs/position/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/tabstrip/tabs/position/main.vue b/vue-options-api-demos/layout/tabstrip/tabs/position/main.vue
new file mode 100644
index 00000000..605c913d
--- /dev/null
+++ b/vue-options-api-demos/layout/tabstrip/tabs/position/main.vue
@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <div class="example-config">
+      <legend>Layout Settings</legend>
+      <span>TabPosition:</span>
+      <RadioGroup
+        :data-items="radioGroupItems"
+        :layout="'horizontal'"
+        :value="position"
+        @change="handleChange"
+      />
+    </div>
+    <hr />
+    <TabStrip
+      :selected="selected"
+      @select="onSelect"
+      :tab-position="position"
+      :tabs="tabs"
+    >
+      <template v-slot:Paris>
+        <p>
+          Paris is the capital and most populous city of France. It has an area
+          of 105 square kilometres (41 square miles) and a population in 2013 of
+          2,229,621 within its administrative limits. The city is both a commune
+          and department, and forms the centre and headquarters of the
+          Île-de-France, or Paris Region, which has an area of 12,012 square
+          kilometres (4,638 square miles) and a population in 2014 of
+          12,005,077, comprising 18.2 percent of the population of France.
+        </p>
+      </template>
+      <template v-slot:NewYork>
+        <div>
+          <p>
+            The City of New York, often called New York City or simply New York,
+            is the most populous city in the United States. With an estimated
+            2015 population of 8,550,405 distributed over a land area of just
+            305 square miles (790 km2), New York City is also the most densely
+            populated major city in the United States. Located at the southern
+            tip of the state of New York, the city is the center of the New York
+            metropolitan area, one of the most populous urban agglomerations in
+            the world.
+          </p>
+          <p>
+            A global power city, New York City exerts a significant impact upon
+            commerce, finance, media, art, fashion, research, technology,
+            education, and entertainment, its fast pace defining the term New
+            York minute. Home to the headquarters of the United Nations, New
+            York is an important center for international diplomacy and has been
+            described as the cultural and financial capital of the world.
+          </p>
+        </div>
+      </template>
+      <template v-slot:Tallinn>
+        <div>
+          <p>
+            Tallinn is the capital and largest city of Estonia. It is situated
+            on the northern coast of the country, on the shore of the Gulf of
+            Finland, 80 km (50 mi) south of Helsinki, east of Stockholm and west
+            of Saint Petersburg. From the 13th century until 1918 (and briefly
+            during the Nazi occupation of Estonia from 1941 to 1944), the city
+            was known as Reval. Tallinn occupies an area of 159.2 km2 (61.5 sq
+            mi) and has a population of 443,894. Approximately 32% of Estonia's
+            total population lives in Tallinn.
+          </p>
+          <p>
+            Tallinn was founded in 1248, but the earliest human settlements are
+            over 5,000 years old, making it one of the oldest capital cities of
+            Northern Europe. Due to its strategic location, the city became a
+            major trade hub, especially from the 14th to the 16th century, when
+            it grew in importance as part of the Hanseatic League.
+          </p>
+        </div>
+      </template>
+    </TabStrip>
+  </div>
+</template>
+
+<script>
+import { TabStrip } from '@progress/kendo-vue-layout';
+import { RadioGroup } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    TabStrip,
+    RadioGroup,
+  },
+  data: function () {
+    return {
+      selected: 0,
+      position: 'top',
+      tabs: [
+        { title: 'Paris', content: 'Paris' },
+        { title: 'New York', content: 'NewYork' },
+        { title: 'Tallinn', content: 'Tallinn' },
+      ],
+      radioGroupItems: [
+        {
+          label: 'Left',
+          value: 'left',
+        },
+        {
+          label: 'Right',
+          value: 'right',
+        },
+        {
+          label: 'Top',
+          value: 'top',
+        },
+        {
+          label: 'Bottom',
+          value: 'bottom',
+        },
+      ],
+    };
+  },
+  methods: {
+    onSelect: function (e) {
+      this.selected = e.selected;
+    },
+    handleChange(e) {
+      this.position = e.value;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/tabstrip/tabs/titles/main.js b/vue-options-api-demos/layout/tabstrip/tabs/titles/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/tabstrip/tabs/titles/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/tabstrip/tabs/titles/main.vue b/vue-options-api-demos/layout/tabstrip/tabs/titles/main.vue
new file mode 100644
index 00000000..02f4f3ee
--- /dev/null
+++ b/vue-options-api-demos/layout/tabstrip/tabs/titles/main.vue
@@ -0,0 +1,47 @@
+<template>
+  <TabStrip :selected="selected" @select="onSelect" :tabs="tabs">
+    <template v-slot:TabOne>
+      <p>Tab 1 Content</p>
+    </template>
+    <template v-slot:TabTwo>
+      <p>Tab 2 Content</p>
+    </template>
+    <template v-slot:TabThree>
+      <p>Tab 3 Content</p>
+    </template>
+  </TabStrip>
+</template>
+
+<script>
+import { TabStrip } from '@progress/kendo-vue-layout';
+
+export default {
+  components: {
+    TabStrip,
+  },
+  data: function () {
+    return {
+      selected: -1,
+      tabs: [
+        {
+          title: 'Tab 1 Title',
+          content: 'TabOne',
+        },
+        {
+          title: 'Tab 2 Title',
+          content: 'TabTwo',
+        },
+        {
+          title: 'Tab 3 Title',
+          content: 'TabThree',
+        },
+      ],
+    };
+  },
+  methods: {
+    onSelect: function (e) {
+      this.selected = e.selected;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/tilelayout/add-remove/PageViews.vue b/vue-options-api-demos/layout/tilelayout/add-remove/PageViews.vue
new file mode 100644
index 00000000..59c15cc1
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/add-remove/PageViews.vue
@@ -0,0 +1,77 @@
+<template>
+    <Chart
+      :zoomable="{
+        mousewheel: {
+          lock: 'y',
+        },
+      }"
+      :style="{
+        height: '100%',
+      }"
+    >
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem
+          :baseUnit="'fit'"
+          :type="'date'"
+          :majorTicks="{
+            visible: false,
+          }"
+          :categories="dates"
+        />
+      </ChartCategoryAxis>
+      <ChartValueAxis>
+        <ChartValueAxisItem
+          :labels="{
+            step: 2,
+          }"
+        />
+      </ChartValueAxis>
+      <ChartArea :background="'white'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'line'"
+          :markers="{
+            visible: false,
+          }"
+          :dataItems="views"
+        />
+      </ChartSeries>
+    </Chart>
+  </template>
+  <script>
+  import {
+    Chart,
+    ChartArea,
+    ChartSeries,
+    ChartSeriesItem,
+    ChartCategoryAxis,
+    ChartCategoryAxisItem,
+    ChartValueAxis,
+    ChartValueAxisItem,
+  } from '@progress/kendo-vue-charts';
+  
+  export default {
+    components: {
+      Chart,
+      ChartArea,
+      ChartSeries,
+      ChartSeriesItem,
+      ChartCategoryAxis,
+      ChartCategoryAxisItem,
+      ChartValueAxis,
+      ChartValueAxisItem,
+    },
+    props: {
+      dataItems: Array,
+    },
+    computed: {
+      dates() {
+        return this.dataItems.map((item, i) => item.date);
+      },
+      views() {
+        return this.dataItems.map((item, i) => item.value);
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/tilelayout/add-remove/PopularPagesChart.vue b/vue-options-api-demos/layout/tilelayout/add-remove/PopularPagesChart.vue
new file mode 100644
index 00000000..89a178d1
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/add-remove/PopularPagesChart.vue
@@ -0,0 +1,60 @@
+<template>
+    <Chart
+        :style="{
+          height: '100%'
+        }"
+      >
+        <ChartCategoryAxis>
+          <ChartCategoryAxisItem :categories="pages" :startAngle="45" />
+        </ChartCategoryAxis>
+        <ChartValueAxis>
+          <ChartValueAxisItem
+            :majorUnit="10000"
+            :max="100000"
+            :labels="{
+              step: 5,
+            }"
+          />
+        </ChartValueAxis>
+        <ChartArea :background="'white'" />
+        <ChartSeries>
+            <ChartSeriesItem v-for="(item, i) in visits" :key="i" :type="'column'" :dataItems="item.visits" />
+        </ChartSeries>
+      </Chart>
+  </template>
+  <script>
+  import {
+  Chart,
+  ChartArea,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartValueAxis,
+  ChartValueAxisItem,
+  } from "@progress/kendo-vue-charts";
+  
+  export default { 
+    components: {
+        Chart,
+        ChartArea,
+        ChartSeries,
+        ChartSeriesItem,
+        ChartCategoryAxis,
+        ChartCategoryAxisItem,
+        ChartValueAxis,
+        ChartValueAxisItem,
+    },
+    data () {
+      return {
+          pages: ["Home", "Price", "Sign-up", "Product", "Blog"],
+          visits: [
+              {
+              page: "Page",
+              visits: [80000, 60000, 30000, 20000, 2000],
+              },
+          ]
+      }
+    }
+  }
+  </script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/tilelayout/add-remove/VisitorsDonut.vue b/vue-options-api-demos/layout/tilelayout/add-remove/VisitorsDonut.vue
new file mode 100644
index 00000000..01d0e61a
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/add-remove/VisitorsDonut.vue
@@ -0,0 +1,37 @@
+<template>
+    <Chart
+     :style="{
+       height: '100%'
+     }"
+   >
+     <ChartSeries>
+       <ChartSeriesItem
+         :type="'donut'"
+         :dataItems="dataItems"
+         :categoryField="'type'"
+         :field="'value'"
+       />
+     </ChartSeries>
+     <ChartLegend :position="'bottom'" :visible="true" />
+   </Chart>
+</template>
+<script>
+import {
+ Chart,
+ ChartLegend,
+ ChartSeries,
+ ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+
+export default {
+   components: {
+       Chart,
+       ChartLegend,
+       ChartSeries,
+       ChartSeriesItem,
+   },
+   props: {
+       dataItems: Array
+   }
+}
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/tilelayout/add-remove/WindowContent.vue b/vue-options-api-demos/layout/tilelayout/add-remove/WindowContent.vue
new file mode 100644
index 00000000..7278efd7
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/add-remove/WindowContent.vue
@@ -0,0 +1,109 @@
+<template>
+    <window
+      v-if="showForm"
+      :title="'Configure the Chart you want to add'"
+      :width="450"
+      @close="closeWindow"
+    >
+      <div class="k-form">
+        <fieldset>
+          <label class="k-form-field">
+            Select Chart Type:
+            <DropDownList
+              :data-items="dropDownValues"
+              :text-field="'text'"
+              :data-item-key="'id'"
+              :value-field="'id'"
+              :value-primitive="true"
+              v-model="chartTypeDDLValue"
+            />
+          </label>
+          <label class="k-form-field">
+            Select Column Span:
+            <NumericTextBox
+              :min="1"
+              :max="maxColumnNumber"
+              v-model="chartSpanValue"
+            />
+          </label>
+          <label class="k-form-field">
+            Select Where the New Chart to be Inserted:
+            <RadioGroup v-model="chartPosition" :data-items="radioGroupOptions" />
+          </label>
+        </fieldset>
+  
+        <KButton :theme-color="'primary'" @click="onSubmit">Insert</KButton>
+      </div>
+    </window>
+  </template>
+  <script>
+  import { DropDownList } from '@progress/kendo-vue-dropdowns';
+  import { Window } from '@progress/kendo-vue-dialogs';
+  import { RadioGroup, NumericTextBox } from '@progress/kendo-vue-inputs';
+  import { Button as KButton } from '@progress/kendo-vue-buttons';
+  
+  export default {
+    components: { Window, DropDownList, NumericTextBox, RadioGroup, KButton },
+    props: {
+      showForm: Boolean,
+      maxColumnNumber: Number,
+    },
+    data() {
+      return {
+        chartTypeDDLValue: 1,
+        chartSpanValue: 1,
+        chartPosition: 'start',
+        radioGroupOptions: [
+          {
+            label: 'Insert At the Beginning',
+            value: 'start',
+          },
+          {
+            label: 'Insert At the End',
+            value: 'end',
+          },
+        ],
+        dropDownValues: [
+          {
+            id: 1,
+            text: 'Add Page Views Chart',
+          },
+          {
+            id: 2,
+            text: 'Add Most Visited Pages Chart',
+          },
+          {
+            id: 3,
+            text: 'Add Visitors Chart',
+          },
+        ],
+      };
+    },
+    emits: ['addChart', 'close'],
+    methods: {
+      onSubmit(e) {
+        this.$emit('addChart', {
+          colspan: this.chartSpanValue,
+          insertPosition: this.chartPosition,
+          tileTemplate:
+            this.chartTypeDDLValue === 1
+              ? 'pageviews'
+              : this.chartTypeDDLValue === 2
+              ? 'popularpageschart'
+              : 'visitors',
+          title:
+            this.chartTypeDDLValue === 1
+              ? 'Page Views'
+              : this.chartTypeDDLValue === 2
+              ? 'Most Visited Pages'
+              : 'Visitors',
+        });
+        this.$emit('close');
+      },
+      closeWindow() {
+        this.$emit('close');
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/tilelayout/add-remove/main.js b/vue-options-api-demos/layout/tilelayout/add-remove/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/add-remove/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/tilelayout/add-remove/main.vue b/vue-options-api-demos/layout/tilelayout/add-remove/main.vue
new file mode 100644
index 00000000..bc0dfc98
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/add-remove/main.vue
@@ -0,0 +1,234 @@
+<template>
+  <Toolbar>
+    <KButton
+      :svg-icon="pencilIcon"
+      :theme-color="'primary'"
+      @click="onEditBtnClick"
+      >{{ reorderable ? 'Save' : 'Edit' }}</KButton
+    >
+    <KButton v-if="reorderable" :theme-color="'info'" @click="handleClick"
+      >Add New Tile</KButton
+    >
+  </Toolbar>
+  <TileLayout
+    :columns="maxColumnNumber"
+    :rowHeight="255"
+    :positions="dataItems"
+    :gap="{
+      rows: 10,
+      columns: 10,
+    }"
+    :items="tiles"
+    @reposition="handleReposition"
+    @tileresize="handleResize"
+  >
+    <template v-slot:customHeader="{ props }"
+      ><span :style="{ display: 'flex', justifyContent: 'space-between' }"
+        ><h5 class="k-card-title">{{ props.headerText }}</h5>
+        <SvgIcon
+          v-if="reorderable"
+          :icon="xIcon"
+          @click="removeTile(props.id)"
+          :style="{ paddingTop: '3px', cursor: 'default' }"
+      /></span>
+    </template>
+    <template v-slot:pageviews="{ props }">
+      <PageViewsChart :key="props.tile.uniqueKey" :dataItems="pageViews" />
+    </template>
+    <template v-slot:pageviewsHeader="{ props }"
+      ><span :style="{ display: 'flex', justifyContent: 'space-between' }"
+        ><h5 class="k-card-title">Visitors</h5>
+        <SvgIcon
+          v-if="reorderable"
+          :icon="xIcon"
+          @click="removeTile(props.id)"
+          :style="{ paddingTop: '3px', cursor: 'default' }"
+      /></span>
+    </template>
+    <template v-slot:popularpageschart="{ props }">
+      <PopularPagesChart :key="props.tile.uniqueKey" :dataItems="pageViews" />
+    </template>
+    <template v-slot:popularpageschartHeader="{ props }"
+      ><span :style="{ display: 'flex', justifyContent: 'space-between' }"
+        ><h5 class="k-card-title">Most Visited Pages</h5>
+        <SvgIcon
+          v-if="reorderable"
+          :icon="xIcon"
+          @click="removeTile(props.id)"
+          :style="{ paddingTop: '3px', cursor: 'default' }"
+      /></span>
+    </template>
+    <template v-slot:visitors="{ props }">
+      <VisitorsDonut :key="props.tile.uniqueKey" :dataItems="visitors" />
+    </template>
+    <template v-slot:visitorsHeader="{ props }"
+      ><span :style="{ display: 'flex', justifyContent: 'space-between' }"
+        ><h5 class="k-card-title">Page Views</h5>
+        <SvgIcon
+          v-if="reorderable"
+          :icon="xIcon"
+          @click="removeTile(props.id)"
+          :style="{ paddingTop: '3px', cursor: 'default' }"
+      /></span>
+    </template>
+  </TileLayout>
+  <WindowContent
+    :show-form="showAddForm"
+    :max-column-number="maxColumnNumber"
+    @close="handleClick"
+    @addChart="addChart"
+  />
+</template>
+<script>
+import { TileLayout } from '@progress/kendo-vue-layout';
+import { Toolbar, Button as KButton } from '@progress/kendo-vue-buttons';
+import {
+  conversions,
+  channelUsers,
+  pageViews,
+  visitors,
+} from './tilelayout-data';
+import { SvgIcon } from '@progress/kendo-vue-common';
+import { xIcon, pencilIcon } from '@progress/kendo-svg-icons';
+import PageViewsChart from './PageViews.vue';
+import PopularPagesChart from './PopularPagesChart.vue';
+import VisitorsDonut from './VisitorsDonut.vue';
+import WindowContent from './WindowContent.vue';
+
+export default {
+  components: {
+    KButton,
+    Toolbar,
+    TileLayout,
+    PageViewsChart,
+    PopularPagesChart,
+    VisitorsDonut,
+    WindowContent,
+    SvgIcon,
+  },
+  data() {
+    return {
+      pageviewsKey: 0,
+      popularpageschartKey: 0,
+      visitorsKey: 0,
+      xIcon,
+      pencilIcon,
+      maxColumnNumber: 4,
+      showAddForm: false,
+      conversions,
+      channelUsers,
+      pageViews,
+      visitors,
+      reorderable: false,
+      dataItems: [
+        {
+          col: 1,
+          colSpan: 2,
+          rowSpan: 1,
+          id: 1,
+        },
+        {
+          col: 3,
+          colSpan: 2,
+          rowSpan: 1,
+          id: 2,
+        },
+        {
+          col: 1,
+          colSpan: 2,
+          rowSpan: 2,
+          id: 3,
+        },
+      ],
+      tilesBase: [
+        {
+          body: 'pageviews',
+          header: 'pageviewsHeader',
+          uniqueKey: 0,
+          id: 1,
+        },
+        {
+          header: 'popularpageschartHeader',
+          body: 'popularpageschart',
+          uniqueKey: 0,
+          id: 2,
+        },
+        {
+          header: 'visitorsHeader',
+          body: 'visitors',
+          uniqueKey: 0,
+          id: 3,
+        },
+      ],
+    };
+  },
+  computed: {
+    tiles() {
+      return this.tilesBase.map((el) => ({
+        ...el,
+        reorderable: this.reorderable,
+        class: this.reorderable ? undefined : 'custom',
+      }));
+    },
+  },
+  methods: {
+    removeTile(id) {
+      this.tilesBase = this.tilesBase.filter((el) => el.id !== id);
+      this.dataItems = this.dataItems.filter((el) => el.id !== id);
+    },
+    handleClick() {
+      this.showAddForm = !this.showAddForm;
+    },
+    handleReposition(e) {
+      this.dataItems = e.value;
+    },
+    handleResize(e) {
+      this.dataItems = e.value;
+      setTimeout(() => {
+        this.tilesBase[e.index].uniqueKey += 1;
+      }, 500);
+    },
+    onEditBtnClick() {
+      this.reorderable = !this.reorderable;
+    },
+    addChart(e) {
+      const getMaxTileId = Math.max(...this.tilesBase.map((tile) => tile.id));
+
+      if (e.insertPosition === 'start') {
+        this.dataItems.unshift({
+          col: 1,
+          colSpan: e.colspan,
+          rowSpan: 1,
+          id: getMaxTileId + 1,
+        });
+        this.tilesBase.unshift({
+          headerText: e.title,
+          header: 'customHeader',
+          body: e.tileTemplate,
+          id: getMaxTileId + 1,
+          uniqueKey: 0,
+        });
+      } else {
+        this.dataItems.push({
+          col: 1,
+          colSpan: e.colspan,
+          rowSpan: 1,
+          row: this.dataItems.lenth,
+          id: getMaxTileId + 1,
+        });
+        this.tilesBase.push({
+          headerText: e.title,
+          body: e.tileTemplate,
+          id: getMaxTileId + 1,
+          uniqueKey: 0,
+        });
+      }
+    },
+  },
+};
+</script>
+<style>
+div.custom .k-resize-handle {
+  display: none;
+}
+</style>
diff --git a/vue-options-api-demos/layout/tilelayout/add-remove/tilelayout-data.js b/vue-options-api-demos/layout/tilelayout/add-remove/tilelayout-data.js
new file mode 100644
index 00000000..968964dc
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/add-remove/tilelayout-data.js
@@ -0,0 +1,104 @@
+const conversions = [
+    {
+        value: 2000,
+        date: new Date(2020, 3, 1),
+    },
+    {
+        value: 80000,
+        date: new Date(2020, 3, 5),
+    },
+    {
+        value: 130000,
+        date: new Date(2020, 3, 10),
+    },
+    {
+        value: 170000,
+        date: new Date(2020, 3, 15),
+    },
+    {
+        value: 190000,
+        date: new Date(2020, 3, 20),
+    },
+    {
+        value: 190000,
+        date: new Date(2020, 3, 30),
+    },
+];
+const channelUsers = [
+    {
+        channel: "Organic Search",
+        conversion: 8232,
+        users: 70500,
+    },
+    {
+        channel: "Direct",
+        conversion: 6574,
+        users: 24900,
+    },
+    {
+        channel: "Referral",
+        conversion: 4932,
+        users: 20000,
+    },
+    {
+        channel: "Social Media",
+        conversion: 2928,
+        users: 19500,
+    },
+    {
+        channel: "Email",
+        conversion: 2456,
+        users: 18100,
+    },
+    {
+        channel: "Support",
+        conversion: 4234,
+        users: 2934,
+    },
+    {
+        channel: "Other",
+        conversion: 1172,
+        users: 16540,
+    },
+];
+const pageViews = [
+    {
+        value: 2000,
+        date: new Date(2020, 2, 30),
+    },
+    {
+        value: 80000,
+        date: new Date(2020, 3, 5),
+    },
+    {
+        value: 130000,
+        date: new Date(2020, 3, 10),
+    },
+    {
+        value: 170000,
+        date: new Date(2020, 3, 15),
+    },
+    {
+        value: 190000,
+        date: new Date(2020, 3, 20),
+    },
+    {
+        value: 150000,
+        date: new Date(2020, 3, 25),
+    },
+    {
+        value: 160000,
+        date: new Date(2020, 3, 30),
+    },
+];
+const visitors = [
+    {
+        value: 70,
+        type: "New",
+    },
+    {
+        value: 30,
+        type: "Returning",
+    },
+];
+export { conversions, channelUsers, pageViews, visitors };
diff --git a/vue-options-api-demos/layout/tilelayout/auto-flow/main.js b/vue-options-api-demos/layout/tilelayout/auto-flow/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/auto-flow/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/tilelayout/auto-flow/main.vue b/vue-options-api-demos/layout/tilelayout/auto-flow/main.vue
new file mode 100644
index 00000000..fd24d433
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/auto-flow/main.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="example">
+    <div class="example-wrap">
+      <div class="row" :style="{ 'margin-bottom': '30px' }">
+        <div class="col">
+          <DropDownList
+            :data-items="autoFlows"
+            :value="flow"
+            @change="handleChange"
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <TileLayout
+            :columns="3"
+            :rowHeight="100"
+            :gap="{
+              rows: 10,
+              columns: 10,
+            }"
+            :items="tiles"
+            :auto-flow="flow"
+          >
+            <template v-slot:firstTile>
+              <span :style="styles">Tile 1</span>
+            </template>
+            <template v-slot:secondTile>
+              <span :style="styles">Tile 2</span>
+            </template>
+            <template v-slot:thirdTile>
+              <span :style="styles">Tile 3</span>
+            </template>
+            <template v-slot:fourthTile>
+              <span :style="styles">Tile 4</span>
+            </template>
+            <template v-slot:fifthTile>
+              <span :style="styles">Tile 5</span>
+            </template>
+          </TileLayout>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { TileLayout } from '@progress/kendo-vue-layout';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  components: {
+    TileLayout,
+    DropDownList,
+  },
+  data() {
+    return {
+      flow: 'column',
+      autoFlows: ['column', 'column dense', 'row', 'row dense', 'unset'],
+      styles: {
+        fontSize: '24px',
+        'text-align': 'center',
+        margin: 'auto',
+        userSelect: 'none',
+      },
+      tiles: [
+        {
+          defaultPosition: { row: 3, colSpan: 1, rowSpan: 1 },
+          item: 'firstTile',
+          resizable: false,
+          reorderable: false,
+        },
+        {
+          defaultPosition: { colSpan: 1, rowSpan: 1 },
+          item: 'secondTile',
+          resizable: false,
+          reorderable: false,
+        },
+        {
+          defaultPosition: { colSpan: 1, rowSpan: 1 },
+          item: 'thirdTile',
+          resizable: false,
+          reorderable: false,
+        },
+        {
+          defaultPosition: { col: 2, colSpan: 1, rowSpan: 1 },
+          item: 'fourthTile',
+          resizable: false,
+          reorderable: false,
+        },
+        {
+          defaultPosition: { colSpan: 1, rowSpan: 1 },
+          item: 'fifthTile',
+          resizable: false,
+          reorderable: false,
+        },
+      ],
+    };
+  },
+  methods: {
+    handleChange(e) {
+      this.flow = e.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/tilelayout/configuration-unique/main.js b/vue-options-api-demos/layout/tilelayout/configuration-unique/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/configuration-unique/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/tilelayout/configuration-unique/main.vue b/vue-options-api-demos/layout/tilelayout/configuration-unique/main.vue
new file mode 100644
index 00000000..6ce01733
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/configuration-unique/main.vue
@@ -0,0 +1,96 @@
+<template>
+    <TileLayout
+      :columns="4"
+      :row-height="200"
+      :column-width="240"
+      :auto-flow="'column dense'"
+      :gap="{
+        rows: 10,
+        columns: 10,
+      }"
+      :items="tiles"
+      :data-item-key="'id'"
+    >
+      <template v-slot:firstTileBody>
+        <p>Reorderable and resizable tile.</p>
+      </template>
+      <template v-slot:secondTileBody>
+        <p>Reorderable and horizontally resizable only tile.</p>
+      </template>
+      <template v-slot:thirdTileBody>
+        <p>Reorderable and vertically resizable only tile.</p>
+      </template>
+      <template v-slot:fourthTileBody>
+        <p>Resizable only.</p>
+      </template>
+      <template v-slot:fifthTileBody>
+        <p>Non-resizable and non-reorderable.</p>
+      </template>
+      <template v-slot:sixthTileBody>
+        <p>Reorderable and resizable tile.</p>
+      </template>
+      <template v-slot:firstTileHeader> Tile 1 </template>
+      <template v-slot:secondTileHeader> Tile 2 </template>
+      <template v-slot:thirdTileHeader> Tile 3 </template>
+      <template v-slot:fourthTileHeader> Tile 4 </template>
+      <template v-slot:fifthTileHeader> Tile 5 </template>
+      <template v-slot:sixthTileHeader> Tile 6 </template>
+    </TileLayout>
+  </template>
+  <script>
+  import { TileLayout } from '@progress/kendo-vue-layout';
+  
+  export default {
+    components: {
+      TileLayout,
+    },
+    data() {
+      return {
+        tiles: [
+          {
+            id: "1235",
+            defaultPosition: { col: 1, colSpan: 3, rowSpan: 1 },
+            header: 'firstTileHeader',
+            body: 'firstTileBody',
+          },
+          {
+            id: "2356",
+            defaultPosition: { col: 1, colSpan: 1, rowSpan: 2 },
+            header: 'secondTileHeader',
+            body: 'secondTileBody',
+            resizable: 'horizontal',
+          },
+          {
+            id: "3467",
+            defaultPosition: { col: 4, colSpan: 1, rowSpan: 1 },
+            header: 'thirdTileHeader',
+            body: 'thirdTileBody',
+            resizable: 'vertical',
+          },
+          {
+            id: "4589",
+            defaultPosition: { col: 2, colSpan: 1, rowSpan: 1 },
+            header: 'fourthTileHeader',
+            body: 'fourthTileBody',
+            reorderable: false,
+          },
+          {
+            id: "5691",
+            defaultPosition: { col: 3, colSpan: 2, rowSpan: 1 },
+            header: 'fifthTileHeader',
+            body: 'fifthTileBody',
+            resizable: false,
+            reorderable: false,
+          },
+          {
+            id: "6792",
+            defaultPosition: { col: 2, colSpan: 3, rowSpan: 1 },
+            header: 'sixthTileHeader',
+            body: 'sixthTileBody',
+          },
+        ],
+      };
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/tilelayout/configuration/main.js b/vue-options-api-demos/layout/tilelayout/configuration/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/configuration/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/tilelayout/configuration/main.vue b/vue-options-api-demos/layout/tilelayout/configuration/main.vue
new file mode 100644
index 00000000..4e7e3c24
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/configuration/main.vue
@@ -0,0 +1,89 @@
+<template>
+    <TileLayout
+      :columns="4"
+      :row-height="200"
+      :column-width="240"
+      :auto-flow="'column dense'"
+      :gap="{
+        rows: 10,
+        columns: 10,
+      }"
+      :items="tiles"
+    >
+      <template v-slot:firstTileBody>
+        <p>Reorderable and resizable tile.</p>
+      </template>
+      <template v-slot:secondTileBody>
+        <p>Reorderable and horizontally resizable only tile.</p>
+      </template>
+      <template v-slot:thirdTileBody>
+        <p>Reorderable and vertically resizable only tile.</p>
+      </template>
+      <template v-slot:fourthTileBody>
+        <p>Resizable only.</p>
+      </template>
+      <template v-slot:fifthTileBody>
+        <p>Non-resizable and non-reorderable.</p>
+      </template>
+      <template v-slot:sixthTileBody>
+        <p>Reorderable and resizable tile.</p>
+      </template>
+      <template v-slot:firstTileHeader> Tile 1 </template>
+      <template v-slot:secondTileHeader> Tile 2 </template>
+      <template v-slot:thirdTileHeader> Tile 3 </template>
+      <template v-slot:fourthTileHeader> Tile 4 </template>
+      <template v-slot:fifthTileHeader> Tile 5 </template>
+      <template v-slot:sixthTileHeader> Tile 6 </template>
+    </TileLayout>
+  </template>
+  <script>
+  import { TileLayout } from '@progress/kendo-vue-layout';
+  
+  export default {
+    components: {
+      TileLayout,
+    },
+    data() {
+      return {
+        tiles: [
+          {
+            defaultPosition: { col: 1, colSpan: 3, rowSpan: 1 },
+            header: 'firstTileHeader',
+            body: 'firstTileBody',
+          },
+          {
+            defaultPosition: { col: 1, colSpan: 1, rowSpan: 2 },
+            header: 'secondTileHeader',
+            body: 'secondTileBody',
+            resizable: 'horizontal',
+          },
+          {
+            defaultPosition: { col: 4, colSpan: 1, rowSpan: 1 },
+            header: 'thirdTileHeader',
+            body: 'thirdTileBody',
+            resizable: 'vertical',
+          },
+          {
+            defaultPosition: { col: 2, colSpan: 1, rowSpan: 1 },
+            header: 'fourthTileHeader',
+            body: 'fourthTileBody',
+            reorderable: false,
+          },
+          {
+            defaultPosition: { col: 3, colSpan: 2, rowSpan: 1 },
+            header: 'fifthTileHeader',
+            body: 'fifthTileBody',
+            resizable: false,
+            reorderable: false,
+          },
+          {
+            defaultPosition: { col: 2, colSpan: 3, rowSpan: 1 },
+            header: 'sixthTileHeader',
+            body: 'sixthTileBody',
+          },
+        ],
+      };
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/tilelayout/events/Logger.vue b/vue-options-api-demos/layout/tilelayout/events/Logger.vue
new file mode 100644
index 00000000..7d9e1695
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/events/Logger.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="example-config">
+    <h5>{{ title }}</h5>
+    <ul class="event-log">
+      <li v-for="(event, idx) in events" :key="idx">
+        {{ events.length - idx }}. {{ event }}
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    events: Array,
+    title: String,
+  },
+};
+</script>
+
+<style scoped>
+.example-config {
+  margin: 0 0 20px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+  margin: 0;
+  padding: 0;
+  max-height: 100px;
+  overflow-y: auto;
+  list-style-type: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: white;
+}
+.event-log li {
+  margin: 0;
+  padding: 0.3em;
+  line-height: 1.2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+  margin-bottom: -1px;
+}
+</style>
diff --git a/vue-options-api-demos/layout/tilelayout/events/main.js b/vue-options-api-demos/layout/tilelayout/events/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/events/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/tilelayout/events/main.vue b/vue-options-api-demos/layout/tilelayout/events/main.vue
new file mode 100644
index 00000000..3a377ae5
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/events/main.vue
@@ -0,0 +1,106 @@
+<template>
+  <TileLayout
+    :columns="3"
+    :rowHeight="150"
+    :gap="{
+      rows: 10,
+      columns: 10,
+    }"
+    :items="tiles"
+    @reposition="onReposition"
+  >
+    <template v-slot:firstTileBody>
+      <p :style="styles">
+        Tile is 1st in order. It's on the first column. Spans across two columns
+        and one row.
+      </p>
+    </template>
+    <template v-slot:secondTileBody>
+      <p :style="styles">
+        Tile is 2nd in order. It's on the first column. Spans across one column
+        and one row.
+      </p>
+    </template>
+    <template v-slot:thirdTileBody>
+      <p :style="styles">
+        Tile is 3th in order. It's on the first column. Spans across three
+        columns and one row.
+      </p>
+    </template>
+    <template v-slot:fourthTileBody>
+      <p :style="styles">
+        Tile is 4th in order. It's on the second column and row unset. Spans
+        across one column and one row.
+      </p>
+    </template>
+    <template v-slot:fifthTileBody>
+      <p :style="styles">
+        Tile is 5th in order. It's on the third column and row unset. Spans
+        across one column and two rows.
+      </p>
+    </template>
+    <template v-slot:firstTileHeader> Tile 1 </template>
+    <template v-slot:secondTileHeader> Tile 2 </template>
+    <template v-slot:thirdTileHeader> Tile 3 </template>
+    <template v-slot:fourthTileHeader> Tile 4 </template>
+    <template v-slot:fifthTileHeader> Tile 5 </template>
+  </TileLayout>
+  <br />
+  <br />
+  <Logger :title="'Events list'" :events="eventsList" />
+</template>
+<script>
+import { TileLayout } from '@progress/kendo-vue-layout';
+import Logger from './Logger.vue';
+
+export default {
+  components: {
+    TileLayout,
+    Logger,
+  },
+  computed: {
+    eventsList() {
+      return this.events;
+    },
+  },
+  data() {
+    return {
+      events: [],
+      styles: { padding: '10px', fontSize: '12px' },
+      tiles: [
+        {
+          defaultPosition: { col: 1, colSpan: 2, rowSpan: 1, order: 1 },
+          header: 'firstTileHeader',
+          body: 'firstTileBody',
+        },
+        {
+          defaultPosition: { col: 1, colSpan: 1, rowSpan: 1, order: 2 },
+          header: 'secondTileHeader',
+          body: 'secondTileBody',
+        },
+        {
+          defaultPosition: { col: 3, colSpan: 1, rowSpan: 2, order: 5 },
+          header: 'thirdTileHeader',
+          body: 'thirdTileBody',
+        },
+        {
+          defaultPosition: { col: 2, colSpan: 1, rowSpan: 1, order: 4 },
+          header: 'fourthTileHeader',
+          body: 'fourthTileBody',
+        },
+        {
+          defaultPosition: { col: 1, colSpan: 3, rowSpan: 1, order: 3 },
+          header: 'fifthTileHeader',
+          body: 'fifthTileBody',
+        },
+      ],
+    };
+  },
+  methods: {
+    onReposition(e) {
+      console.log(e.value);
+      this.events.unshift('Reposition event triggered.');
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/tilelayout/overview/ConversionRate.vue b/vue-options-api-demos/layout/tilelayout/overview/ConversionRate.vue
new file mode 100644
index 00000000..0e6ffd65
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/overview/ConversionRate.vue
@@ -0,0 +1,33 @@
+<template>
+    <div>
+      <h3>{{ visitorToCustomer }}%</h3>
+      <p>Visitor to customer</p>
+    </div>
+  </template>
+  <script>
+  export default {
+    props: {
+      dataItems: Array,
+    },
+    computed: {
+      visitorToCustomer() {
+        return Math.round(this.users() / this.conversions());
+      },
+    },
+    methods: {
+      conversions() {
+        let conversionsNumber = 0;
+        this.dataItems.map(
+          (item, i) => (conversionsNumber = conversionsNumber + item.conversion)
+        );
+        return conversionsNumber;
+      },
+      users() {
+        let usersNumber = 0;
+        this.dataItems.map((item, i) => (usersNumber = usersNumber + item.users));
+        return usersNumber;
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/tilelayout/overview/ConversionsChart.vue b/vue-options-api-demos/layout/tilelayout/overview/ConversionsChart.vue
new file mode 100644
index 00000000..9a6b170c
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/overview/ConversionsChart.vue
@@ -0,0 +1,70 @@
+<template>
+     <Chart
+      :zoomable="{
+        mousewheel: {
+          lock: 'y'
+        },
+      }"
+      :style="{
+        height: '100%'
+      }"
+    >
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :baseUnitStep="'auto'" :categories="dates" />
+      </ChartCategoryAxis>
+      <ChartValueAxis>
+        <ChartValueAxisItem
+          :max="200000"
+          :labels="{
+            step: 2,
+          }"
+        />
+      </ChartValueAxis>
+      <ChartArea :background="'white'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'line'"
+          :markers="{
+            visible: false,
+          }"
+          :dataItems="views"
+        />
+      </ChartSeries>
+    </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartArea,
+  ChartSeries,
+  ChartSeriesItem,
+  ChartCategoryAxis,
+  ChartCategoryAxisItem,
+  ChartValueAxis,
+  ChartValueAxisItem,
+} from "@progress/kendo-vue-charts";
+
+export default { 
+    components: {
+        Chart,
+        ChartArea,
+        ChartSeries,
+        ChartSeriesItem,
+        ChartCategoryAxis,
+        ChartCategoryAxisItem,
+        ChartValueAxis,
+        ChartValueAxisItem,
+    },
+    props: {
+        dataItems: Array
+    },
+    computed: {
+        dates() {
+            return this.dataItems.map((item, i) => item.date);
+        },
+        views() {
+            return this.dataItems.map((item, i) => item.value);;
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/tilelayout/overview/PageViews.vue b/vue-options-api-demos/layout/tilelayout/overview/PageViews.vue
new file mode 100644
index 00000000..7821feb7
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/overview/PageViews.vue
@@ -0,0 +1,76 @@
+<template>
+     <Chart
+      :zoomable="{
+        mousewheel: {
+          lock: 'y'
+        }
+      }"
+      :style="{
+        height: '100%'
+      }"
+    >
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem
+          :baseUnit="'fit'"
+          :type="'date'"
+          :majorTicks="{
+            visible: false,
+          }"
+          :categories="dates"
+        />
+      </ChartCategoryAxis>
+      <ChartValueAxis>
+        <ChartValueAxisItem
+          :labels="{
+            step: 2,
+          }"
+        />
+      </ChartValueAxis>
+      <ChartArea :background="'white'" />
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'line'"
+          :markers="{
+            visible: false,
+          }"
+          :dataItems="views"
+        />
+      </ChartSeries>
+    </Chart>
+</template>
+<script>
+import {
+ Chart,
+ ChartArea,
+ ChartSeries,
+ ChartSeriesItem,
+ ChartCategoryAxis,
+ ChartCategoryAxisItem,
+ ChartValueAxis,
+ ChartValueAxisItem,
+} from "@progress/kendo-vue-charts";
+
+export default { 
+   components: {
+       Chart,
+       ChartArea,
+       ChartSeries,
+       ChartSeriesItem,
+       ChartCategoryAxis,
+       ChartCategoryAxisItem,
+       ChartValueAxis,
+       ChartValueAxisItem,
+   },
+   props: {
+       dataItems: Array
+   },
+   computed: {
+       dates() {
+           return this.dataItems.map((item, i) => item.date);
+       },
+       views() {
+           return this.dataItems.map((item, i) => item.value);;
+       }
+   }
+}
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/tilelayout/overview/PopularPagesChart.vue b/vue-options-api-demos/layout/tilelayout/overview/PopularPagesChart.vue
new file mode 100644
index 00000000..ee5878ca
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/overview/PopularPagesChart.vue
@@ -0,0 +1,60 @@
+<template>
+  <Chart
+      :style="{
+        height: '100%'
+      }"
+    >
+      <ChartCategoryAxis>
+        <ChartCategoryAxisItem :categories="pages" :startAngle="45" />
+      </ChartCategoryAxis>
+      <ChartValueAxis>
+        <ChartValueAxisItem
+          :majorUnit="10000"
+          :max="100000"
+          :labels="{
+            step: 5,
+          }"
+        />
+      </ChartValueAxis>
+      <ChartArea :background="'white'" />
+      <ChartSeries>
+          <ChartSeriesItem v-for="(item, i) in visits" :key="i" :type="'column'" :dataItems="item.visits" />
+      </ChartSeries>
+    </Chart>
+</template>
+<script>
+import {
+Chart,
+ChartArea,
+ChartSeries,
+ChartSeriesItem,
+ChartCategoryAxis,
+ChartCategoryAxisItem,
+ChartValueAxis,
+ChartValueAxisItem,
+} from "@progress/kendo-vue-charts";
+
+export default { 
+  components: {
+      Chart,
+      ChartArea,
+      ChartSeries,
+      ChartSeriesItem,
+      ChartCategoryAxis,
+      ChartCategoryAxisItem,
+      ChartValueAxis,
+      ChartValueAxisItem,
+  },
+  data () {
+    return {
+        pages: ["Home", "Price", "Sign-up", "Product", "Blog"],
+        visits: [
+            {
+            page: "Page",
+            visits: [80000, 60000, 30000, 20000, 2000],
+            },
+        ]
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/tilelayout/overview/UsersGrid.vue b/vue-options-api-demos/layout/tilelayout/overview/UsersGrid.vue
new file mode 100644
index 00000000..2187a20b
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/overview/UsersGrid.vue
@@ -0,0 +1,32 @@
+<template>
+     <div>{{dataItems.length}}
+     <Grid
+      :style="{
+        height: '100%'
+      }"
+      :data-items="dataItems"
+      :scrollable="'scrollable'"
+      :columns="columns"
+    >
+    </Grid> 
+</div>
+</template>
+<script>
+import { Grid } from "@progress/kendo-vue-grid";
+export default {
+    components: {
+        Grid
+    },
+    props: {
+        dataItems: Array
+    },
+    data() {
+        return {
+            columns: [
+                { field: 'channel', title: 'Channel' },
+                { field: 'users', title: 'Number Of Users' }
+            ]
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/tilelayout/overview/VisitorsDonut.vue b/vue-options-api-demos/layout/tilelayout/overview/VisitorsDonut.vue
new file mode 100644
index 00000000..19423f8e
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/overview/VisitorsDonut.vue
@@ -0,0 +1,37 @@
+<template>
+     <Chart
+      :style="{
+        height: '100%'
+      }"
+    >
+      <ChartSeries>
+        <ChartSeriesItem
+          :type="'donut'"
+          :dataItems="dataItems"
+          :categoryField="'type'"
+          :field="'value'"
+        />
+      </ChartSeries>
+      <ChartLegend :position="'bottom'" :visible="true" />
+    </Chart>
+</template>
+<script>
+import {
+  Chart,
+  ChartLegend,
+  ChartSeries,
+  ChartSeriesItem,
+} from "@progress/kendo-vue-charts";
+
+export default {
+    components: {
+        Chart,
+        ChartLegend,
+        ChartSeries,
+        ChartSeriesItem,
+    },
+    props: {
+        dataItems: Array
+    }
+}
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/tilelayout/overview/main.js b/vue-options-api-demos/layout/tilelayout/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/tilelayout/overview/main.vue b/vue-options-api-demos/layout/tilelayout/overview/main.vue
new file mode 100644
index 00000000..dcd0ab82
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/overview/main.vue
@@ -0,0 +1,183 @@
+<template>
+    <TileLayout
+      :columns="4"
+      :rowHeight="255"
+      :positions="dataItems"
+      :gap="{
+        rows: 10,
+        columns: 10,
+      }"
+      :items="tiles"
+      @reposition="handleReposition"
+    >
+    <template v-slot:pageviews>
+      <PageViewsChart :dataItems="pageViews" />
+    </template>
+    <template v-slot:popularpageschart>
+      <PopularPagesChart :dataItems="pageViews" />
+    </template>
+   <template v-slot:usersgrid>
+      <UsersGrid :dataItems="channelUsers" />
+    </template>
+    <template v-slot:conversionrate>
+      <div>
+        <ConversionRate :dataItems="channelUsers" />
+      </div>
+    </template>
+    <template v-slot:currently>
+      <div>
+        <h3
+          :style="{
+            marginBottom: '-1px',
+            marginTop: '-10px'
+          }"
+        >
+          2399
+        </h3>
+        <p>Active users right now</p>
+      </div>
+    </template>
+    <template v-slot:bouncerate>
+      <div>
+        <h3
+          :style="{
+            marginBottom: '-1px',
+            marginTop: '-10px',
+          }"
+        >
+          55%
+        </h3>
+        <p>
+          The percentage of all sessions on your site in which users viewed
+          only a single page.
+        </p>
+      </div>
+    </template>
+    <template v-slot:visitors>
+      <VisitorsDonut :dataItems="visitors" />
+    </template>
+    <template v-slot:conversions>
+      <ConversionsChart :dataItems="conversions" />
+    </template>
+    </TileLayout>
+</template>
+<script>
+import {
+  TileLayout
+} from "@progress/kendo-vue-layout";
+import {
+  conversions,
+  channelUsers,
+  pageViews,
+  visitors,
+} from "./tilelayout-data";
+import ConversionsChart from "./ConversionsChart.vue";
+import ConversionRate from "./ConversionRate.vue";
+import PageViewsChart from "./PageViews.vue";
+import PopularPagesChart from "./PopularPagesChart.vue";
+import UsersGrid from "./UsersGrid.vue";
+import VisitorsDonut from "./VisitorsDonut.vue";
+
+export default {
+    components: {
+      TileLayout,
+      ConversionsChart,
+      ConversionRate,
+      PageViewsChart,
+      PopularPagesChart,
+      UsersGrid,
+      VisitorsDonut
+    },
+    data() {
+      return {
+        conversions,
+        channelUsers,
+        pageViews,
+        visitors,
+        dataItems: [
+          {
+            col: 1,
+            colSpan: 3,
+            rowSpan: 1,
+          },
+          {
+            col: 1,
+            colSpan: 2,
+            rowSpan: 1,
+          },
+          {
+            col: 1,
+            colSpan: 2,
+            rowSpan: 2,
+          },
+          {
+            col: 4,
+            colSpan: 1,
+            rowSpan: 1,
+          },
+          {
+            col: 3,
+            colSpan: 1,
+            rowSpan: 1,
+          },
+          {
+            col: 3,
+            colSpan: 1,
+            rowSpan: 1,
+          },
+          {
+            col: 4,
+            colSpan: 1,
+            rowSpan: 2,
+          },
+          {
+            col: 3,
+            colSpan: 2,
+            rowSpan: 1,
+          }
+        ],
+        tiles: [
+          {
+            headerText: "Page Views",
+            body: 'pageviews',
+          },
+          {
+            headerText: "Most Visited Pages",
+            body: 'popularpageschart',
+          },
+          {
+            headerText: "Users by Channel",
+            body: 'usersgrid',
+          },
+          {
+            headerText: "Conversion Rate",
+            body: 'conversionrate',
+          },
+          {
+            headerText: "Currently",
+            body: 'currently',
+          },
+          {
+            headerText: "Bounce Rate",
+            body: 'bouncerate',
+          },
+          {
+            headerText: "Visitors",
+            body: 'visitors'
+          },
+          {
+            headerText: "Conversions This Month",
+            body: 'conversions'
+          },
+        ]
+      };
+    },
+    methods: {
+      handleReposition (e) {
+        this.dataItems = e.value;
+      }
+    }
+};
+
+</script>
+
diff --git a/vue-options-api-demos/layout/tilelayout/overview/tilelayout-data.js b/vue-options-api-demos/layout/tilelayout/overview/tilelayout-data.js
new file mode 100644
index 00000000..cb0d4e13
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/overview/tilelayout-data.js
@@ -0,0 +1,78 @@
+const conversions = [{
+    value: 2000,
+    date: new Date(2020, 3, 1)
+  }, {
+    value: 80000,
+    date: new Date(2020, 3, 5)
+  }, {
+    value: 130000,
+    date: new Date(2020, 3, 10)
+  }, {
+    value: 170000,
+    date: new Date(2020, 3, 15)
+  }, {
+    value: 190000,
+    date: new Date(2020, 3, 20)
+  }, {
+    value: 190000,
+    date: new Date(2020, 3, 30)
+  }];
+  const channelUsers = [{
+    channel: "Organic Search",
+    conversion: 8232,
+    users: 70500
+  }, {
+    channel: "Direct",
+    conversion: 6574,
+    users: 24900
+  }, {
+    channel: "Referral",
+    conversion: 4932,
+    users: 20000
+  }, {
+    channel: "Social Media",
+    conversion: 2928,
+    users: 19500
+  }, {
+    channel: "Email",
+    conversion: 2456,
+    users: 18100
+  }, {
+    channel: "Support",
+    conversion: 4234,
+    users: 2934
+  }, {
+    channel: "Other",
+    conversion: 1172,
+    users: 16540
+  }];
+  const pageViews = [{
+    value: 2000,
+    date: new Date(2020, 2, 30)
+  }, {
+    value: 80000,
+    date: new Date(2020, 3, 5)
+  }, {
+    value: 130000,
+    date: new Date(2020, 3, 10)
+  }, {
+    value: 170000,
+    date: new Date(2020, 3, 15)
+  }, {
+    value: 190000,
+    date: new Date(2020, 3, 20)
+  }, {
+    value: 150000,
+    date: new Date(2020, 3, 25)
+  }, {
+    value: 160000,
+    date: new Date(2020, 3, 30)
+  }];
+  const visitors = [{
+    value: 70,
+    type: "New"
+  }, {
+    value: 30,
+    type: "Returning"
+  }];
+  export { conversions, channelUsers, pageViews, visitors };
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/tilelayout/tiles/controlled-mode/main.js b/vue-options-api-demos/layout/tilelayout/tiles/controlled-mode/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/tiles/controlled-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/tilelayout/tiles/controlled-mode/main.vue b/vue-options-api-demos/layout/tilelayout/tiles/controlled-mode/main.vue
new file mode 100644
index 00000000..71fb7553
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/tiles/controlled-mode/main.vue
@@ -0,0 +1,76 @@
+<template>
+  <TileLayout
+    :columns="3"
+    :gap="{
+      rows: 10,
+      columns: 10,
+    }"
+    :positions="positions"
+    :items="tiles"
+    @reposition="onReposition"
+  >
+    <template v-slot:firstTile>
+      <p :style="styles">1</p>
+    </template>
+    <template v-slot:secondTile>
+      <p :style="styles">2</p>
+    </template>
+    <template v-slot:thirdTile>
+      <p :style="styles">3</p>
+    </template>
+    <template v-slot:fourthTile>
+      <p :style="styles">4</p>
+    </template>
+    <template v-slot:fifthTile>
+      <p :style="styles">5</p>
+    </template>
+  </TileLayout>
+</template>
+<script>
+import { TileLayout } from '@progress/kendo-vue-layout';
+
+export default {
+  components: {
+    TileLayout,
+  },
+  data() {
+    return {
+      styles: {
+        fontSize: '24px',
+        textAlign: 'center',
+        margin: 'auto',
+        userSelect: 'none',
+      },
+      positions: [
+        { col: 1, colSpan: 1, rowSpan: 2 },
+        { col: 2, colSpan: 2, rowSpan: 2 },
+        { col: 1, colSpan: 3, rowSpan: 1 },
+        { col: 1, colSpan: 2, rowSpan: 2 },
+        { col: 3, colSpan: 1, rowSpan: 2 },
+      ],
+      tiles: [
+        {
+          body: 'firstTile',
+        },
+        {
+          body: 'secondTile',
+        },
+        {
+          body: 'thirdTile',
+        },
+        {
+          body: 'fourthTile',
+        },
+        {
+          body: 'fifthTile',
+        },
+      ],
+    };
+  },
+  methods: {
+    onReposition(e) {
+      this.positions = e.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/tilelayout/tiles/custom-header-body/main.js b/vue-options-api-demos/layout/tilelayout/tiles/custom-header-body/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/tiles/custom-header-body/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/tilelayout/tiles/custom-header-body/main.vue b/vue-options-api-demos/layout/tilelayout/tiles/custom-header-body/main.vue
new file mode 100644
index 00000000..f5c1c1d8
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/tiles/custom-header-body/main.vue
@@ -0,0 +1,88 @@
+<template>
+  <TileLayout
+    :columns="3"
+    :rowHeight="150"
+    :gap="{
+      rows: 10,
+      columns: 10,
+    }"
+    :items="tiles"
+  >
+    <template v-slot:firstTileBody>
+      <p :style="styles">
+        Tile is 1st in order. It's on the first column. Spans across two columns
+        and one row.
+      </p>
+    </template>
+    <template v-slot:secondTileBody>
+      <p :style="styles">
+        Tile is 2nd in order. It's on the first column. Spans across one column
+        and one row.
+      </p>
+    </template>
+    <template v-slot:thirdTileBody>
+      <p :style="styles">
+        Tile is 3th in order. It's on the first column. Spans across three
+        columns and one row.
+      </p>
+    </template>
+    <template v-slot:fourthTileBody>
+      <p :style="styles">
+        Tile is 4th in order. It's on the second column and row unset. Spans
+        across one column and one row.
+      </p>
+    </template>
+    <template v-slot:fifthTileBody>
+      <p :style="styles">
+        Tile is 5th in order. It's on the third column and row unset. Spans
+        across one column and two rows.
+      </p>
+    </template>
+    <template v-slot:firstTileHeader> Tile 1 </template>
+    <template v-slot:secondTileHeader> Tile 2 </template>
+    <template v-slot:thirdTileHeader> Tile 3 </template>
+    <template v-slot:fourthTileHeader> Tile 4 </template>
+    <template v-slot:fifthTileHeader> Tile 5 </template>
+  </TileLayout>
+</template>
+<script>
+import { TileLayout } from '@progress/kendo-vue-layout';
+
+export default {
+  components: {
+    TileLayout,
+  },
+  data() {
+    return {
+      styles: { padding: '10px', fontSize: '12px' },
+      tiles: [
+        {
+          defaultPosition: { col: 1, colSpan: 2, rowSpan: 1, order: 1 },
+          header: 'firstTileHeader',
+          body: 'firstTileBody',
+        },
+        {
+          defaultPosition: { col: 1, colSpan: 1, rowSpan: 1, order: 2 },
+          header: 'secondTileHeader',
+          body: 'secondTileBody',
+        },
+        {
+          defaultPosition: { col: 3, colSpan: 1, rowSpan: 2, order: 5 },
+          header: 'thirdTileHeader',
+          body: 'thirdTileBody',
+        },
+        {
+          defaultPosition: { col: 2, colSpan: 1, rowSpan: 1, order: 4 },
+          header: 'fourthTileHeader',
+          body: 'fourthTileBody',
+        },
+        {
+          defaultPosition: { col: 1, colSpan: 3, rowSpan: 1, order: 3 },
+          header: 'fifthTileHeader',
+          body: 'fifthTileBody',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/tilelayout/tiles/custom-rendering/main.js b/vue-options-api-demos/layout/tilelayout/tiles/custom-rendering/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/tiles/custom-rendering/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/tilelayout/tiles/custom-rendering/main.vue b/vue-options-api-demos/layout/tilelayout/tiles/custom-rendering/main.vue
new file mode 100644
index 00000000..83451618
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/tiles/custom-rendering/main.vue
@@ -0,0 +1,78 @@
+<template>
+  <TileLayout
+    :columns="3"
+    :rowHeight="150"
+    :gap="{
+      rows: 10,
+      columns: 10,
+    }"
+    :items="tiles"
+  >
+    <template v-slot:firstTile>
+      <p :style="styles">
+        Tile is 1st in order. It's on the first column. Spans across two columns
+        and one row.
+      </p>
+    </template>
+    <template v-slot:secondTile>
+      <p :style="styles">
+        Tile is 2nd in order. It's on the first column. Spans across one column
+        and one row.
+      </p>
+    </template>
+    <template v-slot:thirdTile>
+      <p :style="styles">
+        Tile is 3th in order. It's on the first column. Spans across three
+        columns and one row.
+      </p>
+    </template>
+    <template v-slot:fourthTile>
+      <p :style="styles">
+        Tile is 4th in order. It's on the second column and row unset. Spans
+        across one column and one row.
+      </p>
+    </template>
+    <template v-slot:fifthTile>
+      <p :style="styles">
+        Tile is 5th in order. It's on the third column and row unset. Spans
+        across one column and two rows.
+      </p>
+    </template>
+  </TileLayout>
+</template>
+<script>
+import { TileLayout } from '@progress/kendo-vue-layout';
+
+export default {
+  components: {
+    TileLayout,
+  },
+  data() {
+    return {
+      styles: { padding: '10px' },
+      tiles: [
+        {
+          defaultPosition: { col: 1, colSpan: 2, rowSpan: 1, order: 1 },
+          item: 'firstTile',
+        },
+        {
+          defaultPosition: { col: 1, colSpan: 1, rowSpan: 1, order: 2 },
+          item: 'secondTile',
+        },
+        {
+          defaultPosition: { col: 3, colSpan: 1, rowSpan: 2, order: 5 },
+          item: 'thirdTile',
+        },
+        {
+          defaultPosition: { col: 2, colSpan: 1, rowSpan: 1, order: 4 },
+          item: 'fourthTile',
+        },
+        {
+          defaultPosition: { col: 1, colSpan: 3, rowSpan: 1, order: 3 },
+          item: 'fifthTile',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/tilelayout/tiles/positions/main.js b/vue-options-api-demos/layout/tilelayout/tiles/positions/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/tiles/positions/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/tilelayout/tiles/positions/main.vue b/vue-options-api-demos/layout/tilelayout/tiles/positions/main.vue
new file mode 100644
index 00000000..568571a8
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/tiles/positions/main.vue
@@ -0,0 +1,78 @@
+<template>
+  <TileLayout
+    :columns="3"
+    :rowHeight="150"
+    :gap="{
+      rows: 10,
+      columns: 10,
+    }"
+    :items="tiles"
+  >
+    <template v-slot:firstTile>
+      <p :style="styles">
+        Tile is 1st in order. It's on the first column. Spans across two columns
+        and one row.
+      </p>
+    </template>
+    <template v-slot:secondTile>
+      <p :style="styles">
+        Tile is 2nd in order. It's on the first column. Spans across one column
+        and one row.
+      </p>
+    </template>
+    <template v-slot:thirdTile>
+      <p :style="styles">
+        Tile is 3th in order. It's on the first column. Spans across three
+        columns and one row.
+      </p>
+    </template>
+    <template v-slot:fourthTile>
+      <p :style="styles">
+        Tile is 4th in order. It's on the second column and row unset. Spans
+        across one column and one row.
+      </p>
+    </template>
+    <template v-slot:fifthTile>
+      <p :style="styles">
+        Tile is 5th in order. It's on the third column and row unset. Spans
+        across one column and two rows.
+      </p>
+    </template>
+  </TileLayout>
+</template>
+<script>
+import { TileLayout } from '@progress/kendo-vue-layout';
+
+export default {
+  components: {
+    TileLayout,
+  },
+  data() {
+    return {
+      styles: { padding: '10px', margin: 'auto', userSelect: 'none' },
+      tiles: [
+        {
+          defaultPosition: { col: 1, colSpan: 2, rowSpan: 1, order: 1 },
+          item: 'firstTile',
+        },
+        {
+          defaultPosition: { col: 1, colSpan: 1, rowSpan: 1, order: 2 },
+          item: 'secondTile',
+        },
+        {
+          defaultPosition: { col: 3, colSpan: 1, rowSpan: 2, order: 5 },
+          item: 'thirdTile',
+        },
+        {
+          defaultPosition: { col: 2, colSpan: 1, rowSpan: 1, order: 4 },
+          item: 'fourthTile',
+        },
+        {
+          defaultPosition: { col: 1, colSpan: 3, rowSpan: 1, order: 3 },
+          item: 'fifthTile',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/tilelayout/tiles/reordering/main.js b/vue-options-api-demos/layout/tilelayout/tiles/reordering/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/tiles/reordering/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/tilelayout/tiles/reordering/main.vue b/vue-options-api-demos/layout/tilelayout/tiles/reordering/main.vue
new file mode 100644
index 00000000..10fc0d4a
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/tiles/reordering/main.vue
@@ -0,0 +1,52 @@
+<template>
+  <TileLayout
+    :columns="3"
+    :rowHeight="200"
+    :gap="{
+      rows: 10,
+      columns: 10,
+    }"
+    :items="tiles"
+  >
+    <template v-slot:firstTile>
+      <p>Reorderable tile.</p>
+    </template>
+    <template v-slot:secondTile>
+      <p>Reorderable tile.</p>
+    </template>
+    <template v-slot:thirdTile>
+      <p>Reorderable tile.</p>
+    </template>
+  </TileLayout>
+</template>
+<script>
+import { TileLayout } from '@progress/kendo-vue-layout';
+
+export default {
+  components: {
+    TileLayout,
+  },
+  data() {
+    return {
+      tiles: [
+        {
+          defaultPosition: { col: 1, colSpan: 1, rowSpan: 1 },
+          headerText: 'Tile 1',
+          body: 'firstTile',
+        },
+        {
+          defaultPosition: { col: 2, colSpan: 1, rowSpan: 1 },
+          headerText: 'Tile 2',
+          body: 'secondTile',
+        },
+        {
+          defaultPosition: { col: 3, colSpan: 1, rowSpan: 2 },
+          headerText: 'Tile 3',
+          body: 'thirdTile',
+          reorderable: false,
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/tilelayout/tiles/resizing/main.js b/vue-options-api-demos/layout/tilelayout/tiles/resizing/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/tiles/resizing/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/tilelayout/tiles/resizing/main.vue b/vue-options-api-demos/layout/tilelayout/tiles/resizing/main.vue
new file mode 100644
index 00000000..768f67ad
--- /dev/null
+++ b/vue-options-api-demos/layout/tilelayout/tiles/resizing/main.vue
@@ -0,0 +1,68 @@
+<template>
+  <TileLayout
+    :columns="3"
+    :rowHeight="200"
+    :gap="{
+      rows: 10,
+      columns: 10,
+    }"
+    :items="tiles"
+  >
+    <template v-slot:firstTile>
+      <p :style="styles">1</p>
+    </template>
+    <template v-slot:secondTile>
+      <p :style="styles">2</p>
+    </template>
+    <template v-slot:thirdTile>
+      <p :style="styles">3</p>
+    </template>
+    <template v-slot:fourthTile>
+      <p :style="styles">4</p>
+    </template>
+  </TileLayout>
+</template>
+<script>
+import { TileLayout } from '@progress/kendo-vue-layout';
+
+export default {
+  components: {
+    TileLayout,
+  },
+  data() {
+    return {
+      styles: {
+        fontSize: '24px',
+        textAlign: 'center',
+        margin: 'auto',
+        userSelect: 'none',
+      },
+      tiles: [
+        {
+          defaultPosition: { col: 1, colSpan: 1, rowSpan: 1 },
+          headerText: 'Tile 1',
+          body: 'firstTile',
+        },
+        {
+          defaultPosition: { col: 2, colSpan: 1, rowSpan: 1 },
+          headerText: 'Tile 2',
+          body: 'secondTile',
+          resizable: false,
+        },
+        {
+          defaultPosition: { col: 3, colSpan: 1, rowSpan: 2 },
+          headerText: 'Tile 3',
+          body: 'thirdTile',
+          resizable: 'vertical',
+        },
+        {
+          defaultPosition: { col: 1, colSpan: 2, rowSpan: 1 },
+          headerText: 'Tile 4',
+          body: 'fourthTile',
+          resizable: 'horizontal',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/basic/AccountDetails.vue b/vue-options-api-demos/layout/wizard/basic/AccountDetails.vue
new file mode 100644
index 00000000..8ae89334
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/basic/AccountDetails.vue
@@ -0,0 +1,93 @@
+<template>
+  <form-element>
+    <fieldset
+      class="k-form-fieldset"
+      :style="{
+        width: '500px',
+        margin: '0 auto',
+      }"
+    >
+      <field
+        :id="'username'"
+        :name="'username'"
+        :label="'Username'"
+        :component="'myTemplate'"
+        :validator="userNameValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          />
+        </template>
+      </field>
+      <field
+        :id="'email'"
+        :name="'email'"
+        :label="'Email'"
+        :hint="'Hint: Enter your personal email address.'"
+        :component="'myTemplate'"
+        :validator="emailValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></forminput>
+        </template>
+      </field>
+      <field
+        :id="'password'"
+        :name="'password'"
+        :label="'Password'"
+        :component="'myTemplate'"
+        :type="'password'"
+        :hint="'Hint: enter alphanumeric characters only.'"
+        :validator="passwordValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></forminput>
+        </template>
+      </field>
+    </fieldset>
+  </form-element>
+</template>
+<script>
+import { Field, FormElement } from '@progress/kendo-vue-form';
+import FormInput from './FormInput.vue';
+import { Button } from '@progress/kendo-vue-buttons';
+
+import {
+  emailValidator,
+  userNameValidator,
+  passwordValidator,
+} from './validators';
+
+export default {
+  components: {
+    field: Field,
+    'form-element': FormElement,
+    forminput: FormInput,
+    kbutton: Button,
+  },
+  inject: {
+    kendoForm: { default: {} },
+  },
+  data: function () {
+    return {
+      emailValidator,
+      userNameValidator,
+      passwordValidator,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/basic/FormInput.vue b/vue-options-api-demos/layout/wizard/basic/FormInput.vue
new file mode 100644
index 00000000..e9551d6f
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/basic/FormInput.vue
@@ -0,0 +1,90 @@
+<template>
+  <fieldwrapper>
+    <klabel
+      :class="'k-form-label'"
+      :editor-id="id"
+      :editor-valid="valid"
+      :disabled="disabled"
+      :optional="optional"
+    >
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <kinput
+        :valid="valid"
+        :id="id"
+        :value="value"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :type="type"
+        @input="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { Input } from '@progress/kendo-vue-inputs';
+export default {
+  props: {
+    optional: Boolean,
+    disabled: Boolean,
+    placeholder: String,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: String,
+      default: '',
+    },
+    type: String,
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    kinput: Input,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/basic/PersonalDetails.vue b/vue-options-api-demos/layout/wizard/basic/PersonalDetails.vue
new file mode 100644
index 00000000..d487cf61
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/basic/PersonalDetails.vue
@@ -0,0 +1,67 @@
+<template>
+  <form-element>
+    <fieldset
+      class="k-form-fieldset"
+      :style="{
+        width: '500px',
+        margin: '0 auto',
+      }"
+    >
+      <field
+        :id="'firstName'"
+        :name="'firstName'"
+        :label="'First Name'"
+        :component="'myTemplate'"
+        :validator="requiredValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          />
+        </template>
+      </field>
+      <field
+        :id="'lastName'"
+        :name="'lastName'"
+        :label="'Last Name'"
+        :component="'myTemplate'"
+        :validator="requiredValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          />
+        </template>
+      </field>
+    </fieldset>
+  </form-element>
+</template>
+<script>
+import { Field, FormElement } from '@progress/kendo-vue-form';
+import FormInput from './FormInput.vue';
+import { Button } from '@progress/kendo-vue-buttons';
+import { requiredValidator } from './validators';
+
+export default {
+  components: {
+    field: Field,
+    'form-element': FormElement,
+    forminput: FormInput,
+    kbutton: Button,
+  },
+  inject: {
+    kendoForm: { default: {} },
+  },
+  data: function () {
+    return {
+      requiredValidator,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/basic/Register.vue b/vue-options-api-demos/layout/wizard/basic/Register.vue
new file mode 100644
index 00000000..810d8d57
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/basic/Register.vue
@@ -0,0 +1,16 @@
+<template>
+  <form-element :style="{
+    margin: '0 auto',
+  }">
+    <h3>Click on the "Register" button to complete your registration.</h3>
+  </form-element>
+</template>
+<script>
+import { FormElement } from '@progress/kendo-vue-form';
+
+export default {
+  components: {
+    'form-element': FormElement,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/basic/main.js b/vue-options-api-demos/layout/wizard/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/wizard/basic/main.vue b/vue-options-api-demos/layout/wizard/basic/main.vue
new file mode 100644
index 00000000..fd995115
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/basic/main.vue
@@ -0,0 +1,123 @@
+<template>
+  <div
+    :style="{
+      display: 'flex',
+      'flex-direction': 'column',
+    }"
+  >
+    <Stepper :value="step" :items="steps" @change="stepperChange" />
+    <br />
+    <k-form ref="form" :class="'form-element'" :initial-values="initialValues">
+      <personalDetails v-show="step === 0" />
+      <accountDetails v-show="step === 1" />
+      <register v-show="step === 2" />
+    </k-form>
+    <span :style="{ 'margin-top': '40px' }" :class="'k-form-separator'" />
+    <div
+      :style="{
+        'justify-content': 'space-between',
+        'align-content': 'center',
+      }"
+      :class="'k-form-buttons'"
+    >
+      <span :style="{ 'align-self': 'center' }">
+        Step {{ step + 1 }} of 3
+      </span>
+      <span>
+        <span v-if="step !== 0">
+          <k-button
+            :style="{ 'margin-right': '16px' }"
+            @click="prevButtonClick"
+          >
+            Previous
+          </k-button>
+        </span>
+        <k-button :theme-color="'primary'" @click="nextSubmitButtonClick">
+          {{ isLastStep ? 'Register' : 'Next' }}
+        </k-button>
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { Stepper } from '@progress/kendo-vue-layout';
+import { Form } from '@progress/kendo-vue-form';
+import { Button } from '@progress/kendo-vue-buttons';
+import PersonalDetails from './PersonalDetails.vue';
+import AccountDetails from './AccountDetails.vue';
+import Register from './Register.vue';
+
+export default {
+  components: {
+    'k-form': Form,
+    Stepper,
+    'k-button': Button,
+    accountDetails: AccountDetails,
+    personalDetails: PersonalDetails,
+    register: Register,
+  },
+  data() {
+    return {
+      disableNextStep: true,
+      initialValues: {
+        firstName: 'John',
+        lastName: 'Doe',
+        username: 'john',
+        email: 'john.doe@email.com',
+        password: 'password123',
+      },
+      step: 0,
+      steps: [
+        {
+          label: 'User Data',
+          componentName: 'accountDetails',
+        },
+        {
+          label: 'Login Data',
+          componentName: 'personalDetails',
+        },
+        {
+          label: 'Register',
+          componentName: 'paymentDetails',
+        },
+      ],
+    };
+  },
+  computed: {
+    isLastStep() {
+      return this.steps.length - 1 === this.step;
+    },
+  },
+  methods: {
+    stepperChange(event) {
+      this.step = event.value;
+    },
+    nextSubmitButtonClick() {
+      this.formErrors = this.$refs.form.form.errors;
+      if (this.isLastStep) {
+        this.showErrors = false;
+        const formValues = this.$refs.form.form.values;
+        for (const property in formValues) {
+          if (formValues[property] === null || formValues[property] === '') {
+            this.showErrors = true;
+          }
+        }
+        if (!this.showErrors) {
+          alert(JSON.stringify(this.$refs.form.form.values, null, 2));
+        }
+      } else {
+        this.step += 1;
+      }
+    },
+    prevButtonClick() {
+      this.step -= 1;
+    },
+  },
+};
+</script>
+<style>
+.form-element {
+  display: flex;
+  justify-content: center;
+}
+</style>
diff --git a/vue-options-api-demos/layout/wizard/basic/validators.js b/vue-options-api-demos/layout/wizard/basic/validators.js
new file mode 100644
index 00000000..b1fa8aa6
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/basic/validators.js
@@ -0,0 +1,83 @@
+import { getter } from '@progress/kendo-vue-common';
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const phoneRegex = new RegExp(/^[0-9 ()+-]+$/);
+const ccardRegex = new RegExp(/^[0-9-]+$/);
+const cvcRegex = new RegExp(/^[0-9]+$/);
+
+export const termsValidator = (value) =>
+  value ? '' : "It's required to agree with Terms and Conditions.";
+export const emailValidator = (value) =>
+  !value
+    ? 'Email field is required.'
+    : emailRegex.test(value)
+    ? ''
+    : 'Email is not in a valid format.';
+export const nameValidator = (value) =>
+  !value
+    ? 'Full Name is required'
+    : value.length < 7
+    ? 'Full Name should be at least 7 characters long.'
+    : '';
+export const userNameValidator = (value) =>
+  !value
+    ? 'User Name is required'
+    : value.length < 5
+    ? 'User name should be at least 5 characters long.'
+    : '';
+export const phoneValidator = (value) =>
+  !value
+    ? 'Phone number is required.'
+    : phoneRegex.test(value)
+    ? ''
+    : 'Not a valid phone number.';
+export const cardValidator = (value) =>
+  !value
+    ? 'Credit card number is required. '
+    : ccardRegex.test(value)
+    ? ''
+    : 'Not a valid credit card number format.';
+export const cvcValidator = (value) =>
+  !value
+    ? 'CVC code is required,'
+    : cvcRegex.test(value) || value.length !== 3
+    ? ''
+    : 'Not a valid CVC code format.';
+export const guestsValidator = (value) =>
+  !value
+    ? 'Number of guests is required'
+    : value <= 5
+    ? ''
+    : 'Maximum 5 guests';
+export const nightsValidator = (value) =>
+  value ? '' : 'Number of Nights is required.';
+export const arrivalDateValidator = (value) =>
+  value ? '' : 'Arrival Date is required.';
+export const colorValidator = (value) => (value ? '' : 'Color is required.');
+export const requiredValidator = (value) =>
+  value ? '' : 'Error: This field is required.';
+export const passwordValidator = (value) =>
+  value && value.length > 8 ? '' : 'Password must be at least 8 symbols.';
+export const addressValidator = (value) =>
+  value ? '' : 'Address is required.';
+
+const userNameGetter = getter('username');
+const emailGetter = getter('email');
+
+export const formValidator = (values) => {
+  const userName = userNameGetter(values);
+  const emailValue = emailGetter(values);
+
+  if (userName && emailValue && emailRegex.test(emailValue)) {
+    return {};
+  }
+
+  return {
+    VALIDATION_SUMMARY: 'Please fill in the following fields.',
+    ['username']: !userName ? 'User Name is required.' : '',
+    ['email']:
+      emailValue && emailRegex.test(emailValue)
+        ? ''
+        : 'Email is required and should be in a valid format.',
+  };
+};
diff --git a/vue-options-api-demos/layout/wizard/positioning/AccountDetails.vue b/vue-options-api-demos/layout/wizard/positioning/AccountDetails.vue
new file mode 100644
index 00000000..8ae89334
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/positioning/AccountDetails.vue
@@ -0,0 +1,93 @@
+<template>
+  <form-element>
+    <fieldset
+      class="k-form-fieldset"
+      :style="{
+        width: '500px',
+        margin: '0 auto',
+      }"
+    >
+      <field
+        :id="'username'"
+        :name="'username'"
+        :label="'Username'"
+        :component="'myTemplate'"
+        :validator="userNameValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          />
+        </template>
+      </field>
+      <field
+        :id="'email'"
+        :name="'email'"
+        :label="'Email'"
+        :hint="'Hint: Enter your personal email address.'"
+        :component="'myTemplate'"
+        :validator="emailValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></forminput>
+        </template>
+      </field>
+      <field
+        :id="'password'"
+        :name="'password'"
+        :label="'Password'"
+        :component="'myTemplate'"
+        :type="'password'"
+        :hint="'Hint: enter alphanumeric characters only.'"
+        :validator="passwordValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></forminput>
+        </template>
+      </field>
+    </fieldset>
+  </form-element>
+</template>
+<script>
+import { Field, FormElement } from '@progress/kendo-vue-form';
+import FormInput from './FormInput.vue';
+import { Button } from '@progress/kendo-vue-buttons';
+
+import {
+  emailValidator,
+  userNameValidator,
+  passwordValidator,
+} from './validators';
+
+export default {
+  components: {
+    field: Field,
+    'form-element': FormElement,
+    forminput: FormInput,
+    kbutton: Button,
+  },
+  inject: {
+    kendoForm: { default: {} },
+  },
+  data: function () {
+    return {
+      emailValidator,
+      userNameValidator,
+      passwordValidator,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/positioning/FormInput.vue b/vue-options-api-demos/layout/wizard/positioning/FormInput.vue
new file mode 100644
index 00000000..e9551d6f
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/positioning/FormInput.vue
@@ -0,0 +1,90 @@
+<template>
+  <fieldwrapper>
+    <klabel
+      :class="'k-form-label'"
+      :editor-id="id"
+      :editor-valid="valid"
+      :disabled="disabled"
+      :optional="optional"
+    >
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <kinput
+        :valid="valid"
+        :id="id"
+        :value="value"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :type="type"
+        @input="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { Input } from '@progress/kendo-vue-inputs';
+export default {
+  props: {
+    optional: Boolean,
+    disabled: Boolean,
+    placeholder: String,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: String,
+      default: '',
+    },
+    type: String,
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    kinput: Input,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/positioning/PersonalDetails.vue b/vue-options-api-demos/layout/wizard/positioning/PersonalDetails.vue
new file mode 100644
index 00000000..d487cf61
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/positioning/PersonalDetails.vue
@@ -0,0 +1,67 @@
+<template>
+  <form-element>
+    <fieldset
+      class="k-form-fieldset"
+      :style="{
+        width: '500px',
+        margin: '0 auto',
+      }"
+    >
+      <field
+        :id="'firstName'"
+        :name="'firstName'"
+        :label="'First Name'"
+        :component="'myTemplate'"
+        :validator="requiredValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          />
+        </template>
+      </field>
+      <field
+        :id="'lastName'"
+        :name="'lastName'"
+        :label="'Last Name'"
+        :component="'myTemplate'"
+        :validator="requiredValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          />
+        </template>
+      </field>
+    </fieldset>
+  </form-element>
+</template>
+<script>
+import { Field, FormElement } from '@progress/kendo-vue-form';
+import FormInput from './FormInput.vue';
+import { Button } from '@progress/kendo-vue-buttons';
+import { requiredValidator } from './validators';
+
+export default {
+  components: {
+    field: Field,
+    'form-element': FormElement,
+    forminput: FormInput,
+    kbutton: Button,
+  },
+  inject: {
+    kendoForm: { default: {} },
+  },
+  data: function () {
+    return {
+      requiredValidator,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/positioning/Register.vue b/vue-options-api-demos/layout/wizard/positioning/Register.vue
new file mode 100644
index 00000000..51be3bf2
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/positioning/Register.vue
@@ -0,0 +1,17 @@
+<template>
+  <form-element :style="{
+    width: '750px',
+    margin: '0 auto',
+  }">
+    <h3>Click on the "Register" button to complete your registration.</h3>
+  </form-element>
+</template>
+<script>
+import { FormElement } from '@progress/kendo-vue-form';
+
+export default {
+  components: {
+    'form-element': FormElement,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/positioning/main.js b/vue-options-api-demos/layout/wizard/positioning/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/positioning/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/wizard/positioning/main.vue b/vue-options-api-demos/layout/wizard/positioning/main.vue
new file mode 100644
index 00000000..cda5a8fb
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/positioning/main.vue
@@ -0,0 +1,173 @@
+<template>
+  <p>Change content position:</p>
+  <DropDownList
+    :style="{ width: '220px' }"
+    :data-items="['Left', 'Right', 'Down']"
+    :value="position"
+    @change="handlePositionChange"
+  />
+  <hr />
+  <div :style="wizardStyles">
+    <Stepper
+      :value="step"
+      :items="steps"
+      @change="stepperChange"
+      :orientation="stepperOrientation"
+      :style="{ margin: '30px', height: '100%' }"
+    />
+    <br />
+    <div>
+      <k-form
+        ref="form"
+        :class="'form-element'"
+        :initial-values="initialValues"
+      >
+        <personalDetails v-show="step === 0" />
+        <accountDetails v-show="step === 1" />
+        <register v-show="step === 2" />
+      </k-form>
+      <span :style="{ 'margin-top': '40px' }" :class="'k-form-separator'" />
+      <div
+        :style="{
+          'justify-content': 'space-between',
+          'align-content': 'center',
+        }"
+        :class="'k-form-buttons'"
+      >
+        <span :style="{ 'align-self': 'center' }">
+          Step {{ step + 1 }} of 3
+        </span>
+        <span>
+          <span v-if="step !== 0">
+            <k-button
+              :style="{ 'margin-right': '16px' }"
+              @click="prevButtonClick"
+            >
+              Previous
+            </k-button>
+          </span>
+          <k-button :theme-color="'primary'" @click="nextSubmitButtonClick">
+            {{ isLastStep ? 'Register' : 'Next' }}
+          </k-button>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { Stepper } from '@progress/kendo-vue-layout';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import { Form } from '@progress/kendo-vue-form';
+import { Button } from '@progress/kendo-vue-buttons';
+import PersonalDetails from './PersonalDetails.vue';
+import AccountDetails from './AccountDetails.vue';
+import Register from './Register.vue';
+
+export default {
+  components: {
+    'k-form': Form,
+    Stepper,
+    DropDownList,
+    'k-button': Button,
+    accountDetails: AccountDetails,
+    personalDetails: PersonalDetails,
+    register: Register,
+  },
+  data() {
+    return {
+      position: 'Down',
+      stepperOrientation: 'horizontal',
+      wizardStyles: {
+        display: 'flex',
+        'justify-content': 'center',
+        'flex-direction': 'column',
+      },
+      initialValues: {
+        firstName: 'John',
+        lastName: 'Doe',
+        username: 'john',
+        email: 'john.doe@email.com',
+        password: 'password123',
+      },
+      step: 0,
+      steps: [
+        {
+          label: 'User Data',
+          componentName: 'accountDetails',
+        },
+        {
+          label: 'Login Data',
+          componentName: 'personalDetails',
+        },
+        {
+          label: 'Register',
+          componentName: 'paymentDetails',
+        },
+      ],
+    };
+  },
+  computed: {
+    isLastStep() {
+      return this.steps.length - 1 === this.step;
+    },
+  },
+  methods: {
+    stepperChange(event) {
+      this.step = event.value;
+    },
+    nextSubmitButtonClick() {
+      this.formErrors = this.$refs.form.form.errors;
+      if (this.isLastStep) {
+        this.showErrors = false;
+        const formValues = this.$refs.form.form.values;
+        for (const property in formValues) {
+          if (formValues[property] === null || formValues[property] === '') {
+            this.showErrors = true;
+          }
+        }
+        if (!this.showErrors) {
+          alert(JSON.stringify(this.$refs.form.form.values, null, 2));
+        }
+      } else {
+        this.step += 1;
+      }
+    },
+    prevButtonClick() {
+      this.step -= 1;
+    },
+    handlePositionChange(e) {
+      const value = e.value;
+      this.position = value;
+
+      if (value === 'Down') {
+        this.wizardStyles = {
+          display: 'flex',
+          'justify-content': 'center',
+          'flex-direction': 'column',
+        };
+        this.stepperOrientation = 'horizontal';
+      } else if (value === 'Right') {
+        this.wizardStyles = {
+          display: 'flex',
+          'justify-content': 'center',
+          'flex-direction': 'row',
+        };
+        this.stepperOrientation = 'vertical';
+      } else if (value === 'Left') {
+        this.wizardStyles = {
+          display: 'flex',
+          'justify-content': 'center',
+          'flex-direction': 'row-reverse',
+        };
+        this.stepperOrientation = 'vertical';
+      }
+    },
+  },
+};
+</script>
+<style>
+.form-element {
+  display: flex;
+  justify-content: center;
+}
+</style>
diff --git a/vue-options-api-demos/layout/wizard/positioning/validators.js b/vue-options-api-demos/layout/wizard/positioning/validators.js
new file mode 100644
index 00000000..b1fa8aa6
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/positioning/validators.js
@@ -0,0 +1,83 @@
+import { getter } from '@progress/kendo-vue-common';
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const phoneRegex = new RegExp(/^[0-9 ()+-]+$/);
+const ccardRegex = new RegExp(/^[0-9-]+$/);
+const cvcRegex = new RegExp(/^[0-9]+$/);
+
+export const termsValidator = (value) =>
+  value ? '' : "It's required to agree with Terms and Conditions.";
+export const emailValidator = (value) =>
+  !value
+    ? 'Email field is required.'
+    : emailRegex.test(value)
+    ? ''
+    : 'Email is not in a valid format.';
+export const nameValidator = (value) =>
+  !value
+    ? 'Full Name is required'
+    : value.length < 7
+    ? 'Full Name should be at least 7 characters long.'
+    : '';
+export const userNameValidator = (value) =>
+  !value
+    ? 'User Name is required'
+    : value.length < 5
+    ? 'User name should be at least 5 characters long.'
+    : '';
+export const phoneValidator = (value) =>
+  !value
+    ? 'Phone number is required.'
+    : phoneRegex.test(value)
+    ? ''
+    : 'Not a valid phone number.';
+export const cardValidator = (value) =>
+  !value
+    ? 'Credit card number is required. '
+    : ccardRegex.test(value)
+    ? ''
+    : 'Not a valid credit card number format.';
+export const cvcValidator = (value) =>
+  !value
+    ? 'CVC code is required,'
+    : cvcRegex.test(value) || value.length !== 3
+    ? ''
+    : 'Not a valid CVC code format.';
+export const guestsValidator = (value) =>
+  !value
+    ? 'Number of guests is required'
+    : value <= 5
+    ? ''
+    : 'Maximum 5 guests';
+export const nightsValidator = (value) =>
+  value ? '' : 'Number of Nights is required.';
+export const arrivalDateValidator = (value) =>
+  value ? '' : 'Arrival Date is required.';
+export const colorValidator = (value) => (value ? '' : 'Color is required.');
+export const requiredValidator = (value) =>
+  value ? '' : 'Error: This field is required.';
+export const passwordValidator = (value) =>
+  value && value.length > 8 ? '' : 'Password must be at least 8 symbols.';
+export const addressValidator = (value) =>
+  value ? '' : 'Address is required.';
+
+const userNameGetter = getter('username');
+const emailGetter = getter('email');
+
+export const formValidator = (values) => {
+  const userName = userNameGetter(values);
+  const emailValue = emailGetter(values);
+
+  if (userName && emailValue && emailRegex.test(emailValue)) {
+    return {};
+  }
+
+  return {
+    VALIDATION_SUMMARY: 'Please fill in the following fields.',
+    ['username']: !userName ? 'User Name is required.' : '',
+    ['email']:
+      emailValue && emailRegex.test(emailValue)
+        ? ''
+        : 'Email is required and should be in a valid format.',
+  };
+};
diff --git a/vue-options-api-demos/layout/wizard/router/FormContent.vue b/vue-options-api-demos/layout/wizard/router/FormContent.vue
new file mode 100644
index 00000000..6c4043c2
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/router/FormContent.vue
@@ -0,0 +1,58 @@
+<template>
+  <form-element>
+    <fieldset
+      class="k-form-fieldset"
+      :style="{
+        width: '500px',
+      }"
+    >
+      <field
+        :id="'firstName'"
+        :name="'firstName'"
+        :label="'First Name'"
+        :component="'myTemplate'"
+        :validator="requiredValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          />
+        </template>
+      </field>
+      <field
+        :id="'lastName'"
+        :name="'lastName'"
+        :label="'Last Name'"
+        :component="'myTemplate'"
+        :validator="requiredValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          />
+        </template>
+      </field>
+    </fieldset>
+  </form-element>
+</template>
+<script>
+import { Field, FormElement } from '@progress/kendo-vue-form';
+import FormInput from './FormInput.vue';
+
+export default {
+  components: {
+    field: Field,
+    'form-element': FormElement,
+    forminput: FormInput,
+  },
+  inject: {
+    kendoForm: { default: {} },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/wizard/router/FormInput.vue b/vue-options-api-demos/layout/wizard/router/FormInput.vue
new file mode 100644
index 00000000..9b89ca9e
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/router/FormInput.vue
@@ -0,0 +1,82 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :disabled="disabled" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <kinput :style="{ width: '230px' }" 
+                :valid="valid"
+                :id="id"
+                :value="value"
+                :disabled="disabled"
+                :placeholder="placeholder"
+                @input="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        optional: Boolean,
+        disabled: Boolean,
+        placeholder: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      kinput: Input
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/layout/wizard/router/Overview.vue b/vue-options-api-demos/layout/wizard/router/Overview.vue
new file mode 100644
index 00000000..570c3a65
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/router/Overview.vue
@@ -0,0 +1,13 @@
+<template>
+  <div style="display: flex; justify-content: center;">
+    <div style="flex-direction: column; ">
+      <h2>Overview</h2>
+      <div>
+        <h3>To complete your registration, please follow the next steps</h3>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/router/Register.vue b/vue-options-api-demos/layout/wizard/router/Register.vue
new file mode 100644
index 00000000..6a8549fa
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/router/Register.vue
@@ -0,0 +1,13 @@
+<template>
+  <div style="display: flex; justify-content: center;">
+    <div style="flex-direction: column; ">
+      <h2>Register</h2>
+      <div>
+        <h3>Click on the "Register" button to complete your registration.</h3>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/wizard/router/UserDetails.vue b/vue-options-api-demos/layout/wizard/router/UserDetails.vue
new file mode 100644
index 00000000..064a8c30
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/router/UserDetails.vue
@@ -0,0 +1,20 @@
+<template>
+  <div style="display: flex; justify-content: center;">
+    <div style="flex-direction: column; ">
+      <k-form ref="form" :class="'form-element'" :initial-values="initialValues">
+        <formcontent />
+      </k-form>
+    </div>
+  </div>
+</template>
+<script>
+import { Form } from '@progress/kendo-vue-form';
+import FormContent from './FormContent.vue';
+
+export default {
+  components: {
+    'k-form': Form,
+    'formcontent': FormContent
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/layout/wizard/router/index.js b/vue-options-api-demos/layout/wizard/router/index.js
new file mode 100644
index 00000000..beea1b1b
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/router/index.js
@@ -0,0 +1,29 @@
+import { createWebHistory, createRouter } from "vue-router";
+import Overview from "./Overview";
+import UserDetails from "./UserDetails";
+import Register from "./Register";
+
+const routes = [
+    {
+        path: "/layout/wizard/routing/overview",
+        name: "Overview",
+        component: Overview
+    },
+    {
+        path: "/layout/wizard/routing/user-details",
+        name: "UserDetails",
+        component: UserDetails
+    },
+    {
+        path: "/layout/wizard/routing/register",
+        name: "Register",
+        component: Register
+    }
+];
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+});
+
+export default router;
diff --git a/vue-options-api-demos/layout/wizard/router/main.js b/vue-options-api-demos/layout/wizard/router/main.js
new file mode 100644
index 00000000..b51f2405
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/router/main.js
@@ -0,0 +1,5 @@
+import { createApp } from "vue";
+import App from "./main.vue";
+import router from "./index.js";
+
+createApp(App).use(router).mount("#app");
diff --git a/vue-options-api-demos/layout/wizard/router/main.vue b/vue-options-api-demos/layout/wizard/router/main.vue
new file mode 100644
index 00000000..6eebf450
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/router/main.vue
@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <Stepper :value="step" @change="handleChange" :items="items" />
+    <router-view />
+    <span :style="{ 'margin-top': '40px' }" :class="'k-form-separator'" />
+    <div
+      :style="{
+        'justify-content': 'space-between',
+        'align-content': 'center',
+      }"
+      :class="'k-form-buttons'"
+    >
+      <span :style="{ 'align-self': 'center' }">Step {{ step + 1 }} of 3</span>
+      <span>
+        <span v-if="step !== 0">
+          <k-button :style="{ 'margin-right': '16px' }" @click="prevButtonClick">Previous</k-button>
+        </span>
+        <k-button
+          :theme-color="'primary'"
+          @click="nextSubmitButtonClick"
+        >{{ isLastStep ? 'Register' : 'Next' }}</k-button>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Button } from "@progress/kendo-vue-buttons";
+import { Stepper } from "@progress/kendo-vue-layout";
+
+export default {
+  name: "App",
+  components: { Stepper, "k-button": Button },
+  mounted() {
+    this.$router.push(this.items[0].data);
+  },
+  computed: {
+    isLastStep() {
+      return this.items.length - 1 === this.step;
+    },
+  },
+  data() {
+    return {
+      step: 0,
+      items: [
+        {
+          label: "Home",
+          data: {
+            path: "/layout/wizard/routing/overview",
+          },
+        },
+        {
+          label: "Details",
+          data: {
+            path: "/layout/wizard/routing/user-details",
+          },
+        },
+        {
+          label: "Register",
+          data: {
+            path: "/layout/wizard/routing/register",
+          },
+        },
+      ],
+    };
+  },
+  methods: {
+    handleChange(e) {
+      this.step = e.value;
+      this.$router.push(this.items[e.value].data);
+    },
+    onClick() {
+      if (this.value <= 1) { this.value += 1; }
+      this.$router.push(this.items[this.value].data);
+    },
+    nextSubmitButtonClick() {
+      if (this.isLastStep) {
+        alert("Registration completed!");
+      }
+      else {
+        this.step += 1;
+        this.$router.push(this.items[this.step].data);
+      }
+    },
+    prevButtonClick() {
+      this.step -= 1;
+      this.$router.push(this.items[this.step].data);
+    },
+  },
+};
+</script>
+
+<style>
+</style>
diff --git a/vue-options-api-demos/layout/wizard/validation/step/AccountDetails.vue b/vue-options-api-demos/layout/wizard/validation/step/AccountDetails.vue
new file mode 100644
index 00000000..87854265
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/step/AccountDetails.vue
@@ -0,0 +1,124 @@
+<template>
+  <form-element @change="onChange">
+    <fieldset
+      class="k-form-fieldset"
+      :style="{
+        width: '500px',
+        margin: '0 auto',
+      }"
+    >
+      <field
+        :id="'username'"
+        :name="'username'"
+        :label="'Username'"
+        :component="'myTemplate'"
+        :validator="userNameValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          />
+        </template>
+      </field>
+      <field
+        :id="'email'"
+        :name="'email'"
+        :label="'Email'"
+        :hint="'Hint: Enter your personal email address.'"
+        :component="'myTemplate'"
+        :validator="emailValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></forminput>
+        </template>
+      </field>
+      <field
+        :id="'password'"
+        :name="'password'"
+        :label="'Password'"
+        :component="'myTemplate'"
+        :type="'password'"
+        :validator="passwordValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></forminput>
+        </template>
+      </field>
+      <field
+        :id="'avatar'"
+        :name="'avatar'"
+        :label="'Avatar'"
+        :hint="'Hint: Upload your avatar picture'"
+        :optional="true"
+        :component="'myTemplate'"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <formupload
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></formupload>
+        </template>
+      </field>
+    </fieldset>
+  </form-element>
+</template>
+<script>
+import { Field, FormElement } from '@progress/kendo-vue-form';
+import FormInput from './FormInput.vue';
+import FormUpload from './FormUpload.vue';
+import { Button } from '@progress/kendo-vue-buttons';
+
+import {
+  emailValidator,
+  userNameValidator,
+  passwordValidator,
+} from './validators';
+
+export default {
+  components: {
+    field: Field,
+    'form-element': FormElement,
+    forminput: FormInput,
+    kbutton: Button,
+    formupload: FormUpload,
+  },
+  inject: {
+    kendoForm: { default: {} },
+  },
+  data: function () {
+    return {
+      emailValidator,
+      userNameValidator,
+      passwordValidator,
+    };
+  },
+  computed: {
+    disableNextStep() {
+      const errors = this.kendoForm.errors;
+      return (
+        errors.username === '' && errors.password == '' && errors.email == ''
+      );
+    },
+  },
+  methods: {
+    onChange() {
+      this.$emit('isStepValid', { disableNextStep: this.disableNextStep });
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/validation/step/CardSelector.vue b/vue-options-api-demos/layout/wizard/validation/step/CardSelector.vue
new file mode 100644
index 00000000..100f31f9
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/step/CardSelector.vue
@@ -0,0 +1,201 @@
+<template>
+  <fieldwrapper>
+      <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{ label }}
+      </klabel>
+      <div class="k-form-field-wrap">
+        <ul
+          class="k-radio-list k-list-horizontal"
+          :style="{ display: 'flex', 'justify-content': 'space-between' }"
+        >
+          <li class="k-radio-item">
+            <input
+              @change="handleChange"
+              @blur="handleBlur"
+              @focus="handleFocus"
+              :checked="value === 'visa'"
+              :id="'visa'"
+              :type="'radio'"
+              :value="'visa'"
+              :name="'paymentType'"
+              :style="inputStyles"
+            />
+            <label
+              @mouseenter="onMouseEnterLabel"
+              @mouseleave="onMouseLeaveLabel"
+              htmlFor="visa"
+              :style="visaStyle"
+            />
+          </li>
+
+          <li class="k-radio-item">
+            <input
+              @change="handleChange"
+              @blur="handleBlur"
+              @focus="handleFocus"
+              :checked="value === 'masterCard'"
+              :id="'masterCard'"
+              :type="'radio'"
+              :value="'masterCard'"
+              :name="'paymentType'"
+              :style="inputStyles"
+            />
+            <label
+              @mouseenter="onMouseEnterLabel"
+              @mouseleave="onMouseLeaveLabel"
+              htmlFor="masterCard"
+              :style="mastercardStyle"
+            />
+          </li>
+          <li class="k-radio-item">
+            <input
+              @change="handleChange"
+              @blur="handleBlur"
+              @focus="handleFocus"
+              :checked="value === 'paypal'"
+              :id="'paypal'"
+              :type="'radio'"
+              :value="'paypal'"
+              :name="'paymentType'"
+              :style="inputStyles"
+            />
+            <label
+              @mouseenter="onMouseEnterLabel"
+              @mouseleave="onMouseLeaveLabel"
+              htmlFor="paypal"
+              :style="paypalStyle"
+            />
+          </li>
+        </ul>
+        <error v-if="showValidationMessage">
+          {{ validationMessage }}
+        </error>
+        <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+
+const filter = 'brightness(1.8) grayscale(1) opacity(.7)';
+const filterHover = 'brightness(1.2) grayscale(.5) opacity(.9)';
+const cardStyle = {
+  cursor: 'pointer',
+  backgroundSize: 'auto',
+  backgroundRepeat: 'no-repeat',
+  backgroundPosition: 'center',
+  display: 'inline-block',
+  width: '138px',
+  height: '70px',
+  border: '1px solid',
+};
+
+const inputStyles = {
+  visibility: 'hidden',
+  position: 'absolute',
+};
+
+export default {
+  props: {
+    data: Object,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  computed: {
+    visaStyle() {
+      return {
+        backgroundImage:
+          'url(https://cdn-icons-png.flaticon.com/128/196/196578.png)',
+        filter:
+          this.value === 'visa'
+            ? 'none'
+            : this.cardHover === 'visa'
+            ? filterHover
+            : filter,
+        ...cardStyle,
+      };
+    },
+    mastercardStyle() {
+      return {
+        backgroundImage:
+          'url(https://cdn-icons-png.flaticon.com/128/196/196561.png)',
+        filter:
+          this.value === 'masterCard'
+            ? 'none'
+            : this.cardHover === 'masterCard'
+            ? filterHover
+            : filter,
+        ...cardStyle,
+      };
+    },
+    paypalStyle() {
+      return {
+        backgroundImage:
+          'url(https://cdn-icons-png.flaticon.com/128/196/196565.png)',
+        filter:
+          this.value === 'paypal'
+            ? 'none'
+            : this.cardHover === 'paypal'
+            ? filterHover
+            : filter,
+        ...cardStyle,
+      };
+    },
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  data() {
+    return {
+      cardHover: '',
+      inputStyles,
+    };
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+    onMouseEnterLabel(event) {
+      this.cardHover = event.currentTarget.getAttribute('for');
+    },
+    onMouseLeaveLabel(event) {
+      this.cardHover = '';
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/validation/step/ErrorSummary.vue b/vue-options-api-demos/layout/wizard/validation/step/ErrorSummary.vue
new file mode 100644
index 00000000..d2d081b5
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/step/ErrorSummary.vue
@@ -0,0 +1,62 @@
+<template>
+  <div v-if="showStep1">Step1</div>
+  <ul>
+    <li v-if="formErrors.username">{{ formErrors.username }}</li>
+    <li v-if="formErrors.email">{{ formErrors.email }}</li>
+    <li v-if="formErrors.password">{{ formErrors.password }}</li>
+  </ul>
+
+  <p v-if="showStep2">Step2</p>
+  <ul>
+    <li v-if="formErrors.fullName">Full Name: {{ formErrors.fullName }}</li>
+    <li v-if="formErrors.countryselected">
+      Country: {{ formErrors.countryselected }}
+    </li>
+    <li v-if="formErrors.gender">Gender: {{ formErrors.gender }}</li>
+  </ul>
+
+  <p v-if="showStep3">Step3</p>
+  <ul>
+    <li v-if="formErrors.cardNumber">
+      Card Number: {{ formErrors.cardNumber }}
+    </li>
+    <li v-if="formErrors.cvc">CVC code: {{ formErrors.cvc }}</li>
+    <li v-if="formErrors.expireDate">
+      Expire Date: {{ formErrors.expireDate }}
+    </li>
+    <li v-if="formErrors.cardHolder">
+      Card Holder: {{ formErrors.cardHolder }}
+    </li>
+  </ul>
+</template>
+<script>
+export default {
+  props: {
+    formErrors: Object,
+  },
+  computed: {
+    showStep1() {
+      return (
+        this.formErrors.username ||
+        this.formErrors.email ||
+        this.formErrors.password
+      );
+    },
+    showStep2() {
+      return (
+        this.formErrors.fullName ||
+        this.formErrors.countryselected ||
+        this.formErrors.gender
+      );
+    },
+    showStep3() {
+      return (
+        this.formErrors.cardNumber ||
+        this.formErrors.cvc ||
+        this.formErrors.expireDate ||
+        this.formErrors.cardHolder
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/validation/step/FormAutoComplete.vue b/vue-options-api-demos/layout/wizard/validation/step/FormAutoComplete.vue
new file mode 100644
index 00000000..39526b0c
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/step/FormAutoComplete.vue
@@ -0,0 +1,79 @@
+<template>
+  <fieldwrapper>
+    <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <autocomplete
+        :data-items="data"
+        :valid="valid"
+        :value="value"
+        :id="id"
+        @change="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { AutoComplete } from '@progress/kendo-vue-dropdowns';
+export default {
+  props: {
+    data: Object,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    autocomplete: AutoComplete,
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/validation/step/FormCheckbox.vue b/vue-options-api-demos/layout/wizard/validation/step/FormCheckbox.vue
new file mode 100644
index 00000000..a3b982f3
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/step/FormCheckbox.vue
@@ -0,0 +1,89 @@
+<template>
+    <fieldwrapper>
+        <klabel :editor-id="id" :editor-valid="valid" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+        <span>
+          <checkbox 
+                :value="value"
+                :valid="valid"
+                :id="id"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus" />
+          </span>
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Checkbox } from "@progress/kendo-vue-inputs";
+
+export default {
+    props: {
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        disabled: Boolean,
+        optional: Boolean,
+        visited: Boolean,
+        modified: Boolean,
+        value: {
+             type: [Boolean, String],
+             default: false
+        }
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        klabel: Label,
+        checkbox: Checkbox
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/layout/wizard/validation/step/FormDateInput.vue b/vue-options-api-demos/layout/wizard/validation/step/FormDateInput.vue
new file mode 100644
index 00000000..67b4a198
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/step/FormDateInput.vue
@@ -0,0 +1,77 @@
+<template>
+  <fieldwrapper>
+    <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <dateinput
+        :valid="valid"
+        :value="value"
+        :id="id"
+        @change="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { DateInput } from '@progress/kendo-vue-dateinputs';
+export default {
+  props: {
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: Date,
+      default: null,
+    },
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    dateinput: DateInput,
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/validation/step/FormDatePicker.vue b/vue-options-api-demos/layout/wizard/validation/step/FormDatePicker.vue
new file mode 100644
index 00000000..2a332d1c
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/step/FormDatePicker.vue
@@ -0,0 +1,79 @@
+<template>
+    <fieldwrapper>
+        <klabel :editor-id="id" :editor-valid="valid">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <datepicker :style="{ width: '230px' }" 
+                :value="value"
+                :valid="valid"
+                :id="id"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else :direction="hintDirection">{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+export default {
+    props: {
+        hintDirection: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: Date,
+            default: null
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      datepicker: DatePicker
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/layout/wizard/validation/step/FormInput.vue b/vue-options-api-demos/layout/wizard/validation/step/FormInput.vue
new file mode 100644
index 00000000..e9551d6f
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/step/FormInput.vue
@@ -0,0 +1,90 @@
+<template>
+  <fieldwrapper>
+    <klabel
+      :class="'k-form-label'"
+      :editor-id="id"
+      :editor-valid="valid"
+      :disabled="disabled"
+      :optional="optional"
+    >
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <kinput
+        :valid="valid"
+        :id="id"
+        :value="value"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :type="type"
+        @input="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { Input } from '@progress/kendo-vue-inputs';
+export default {
+  props: {
+    optional: Boolean,
+    disabled: Boolean,
+    placeholder: String,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: String,
+      default: '',
+    },
+    type: String,
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    kinput: Input,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/validation/step/FormMaskedTextBox.vue b/vue-options-api-demos/layout/wizard/validation/step/FormMaskedTextBox.vue
new file mode 100644
index 00000000..8f991820
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/step/FormMaskedTextBox.vue
@@ -0,0 +1,83 @@
+<template>
+  <fieldwrapper>
+    <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :optional="optional">
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <maskedtextbox
+        :valid="valid"
+        :value="value"
+        :id="id"
+        :mask="mask"
+        :readonly="readonly"
+        @change="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { MaskedTextBox } from '@progress/kendo-vue-inputs';
+export default {
+  props: {
+    readonly: Boolean,
+    optional: Boolean,
+    mask: String,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: String,
+      default: '',
+    },
+    width: Number,
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    maskedtextbox: MaskedTextBox,
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/validation/step/FormNumericTextBox.vue b/vue-options-api-demos/layout/wizard/validation/step/FormNumericTextBox.vue
new file mode 100644
index 00000000..f46568cc
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/step/FormNumericTextBox.vue
@@ -0,0 +1,79 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <numerictextbox :style="{ width: '230px' }" 
+                :valid="valid"
+                :value="value"
+                :id="id"
+                :min="0"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { NumericTextBox } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: Number,
+            default: null
+        }
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        klabel: Label,
+        numerictextbox: NumericTextBox
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/layout/wizard/validation/step/FormRadioGroup.vue b/vue-options-api-demos/layout/wizard/validation/step/FormRadioGroup.vue
new file mode 100644
index 00000000..c52a637b
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/step/FormRadioGroup.vue
@@ -0,0 +1,104 @@
+<template>
+  <fieldwrapper>
+    <klabel
+      :class="'k-form-label'"
+      :id="labelId"
+      :editor-id="id"
+      :editor-valid="valid"
+      :editor-disabled="disabled"
+    >
+      {{ label }}
+    </klabel>
+    <radiogroup
+      :name="name"
+      :aria-describedby="describedBy"
+      :label="label"
+      :valid="valid"
+      :value="value"
+      :layout="layout"
+      :data-items="dataItems"
+      :id="id"
+      :checked="value"
+      @change="handleChange"
+    />
+    <error v-if="showValidationMessage">
+      {{ validationMessage }}
+    </error>
+    <hint v-else>{{ hint }}</hint>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { RadioGroup } from '@progress/kendo-vue-inputs';
+export default {
+  name: 'FormRadioGroup',
+  props: {
+    name: String,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: {
+      type: Boolean,
+      default: true,
+    },
+    disabled: Boolean,
+    layout: String,
+    dataItems: Array,
+    value: {
+      type: String,
+      default: null,
+    },
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    radiogroup: RadioGroup,
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+    describedBy() {
+      return `${this.hintId} ${this.errorId}`;
+    },
+    labelId() {
+      return this.label ? `${this.id}_label` : '';
+    },
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/validation/step/FormTextArea.vue b/vue-options-api-demos/layout/wizard/validation/step/FormTextArea.vue
new file mode 100644
index 00000000..011196b5
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/step/FormTextArea.vue
@@ -0,0 +1,80 @@
+<template>
+  <fieldwrapper>
+    <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :optional="optional">
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <span class="k-textarea">
+        <textarea
+          class="k-input"
+          style="margin-top: 0px; margin-bottom: 0px; height: 56px"
+          :valid="valid"
+          :value="value"
+          :id="id"
+          @change="handleChange"
+          @blur="handleBlur"
+          @focus="handleFocus"
+        ></textarea>
+      </span>
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+export default {
+  props: {
+    optional: Boolean,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/validation/step/FormUpload.vue b/vue-options-api-demos/layout/wizard/validation/step/FormUpload.vue
new file mode 100644
index 00000000..f8f1645b
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/step/FormUpload.vue
@@ -0,0 +1,90 @@
+<template>
+  <fieldwrapper>
+    <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :optional="optional">
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <span>
+        <upload
+          :valid="valid"
+          :value="value"
+          :id="id"
+          :auto-upload="false"
+          :multiple="false"
+          :show-action-buttons="false"
+          :files="value"
+          @blur="handleBlur"
+          @focus="handleFocus"
+          @add="onAddHandler"
+          @remove="onRemoveHandler"
+        />
+      </span>
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { Upload } from '@progress/kendo-vue-upload';
+
+export default {
+  props: {
+    touched: Boolean,
+    optional: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: Array,
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    upload: Upload,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  methods: {
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+    onAddHandler(e) {
+      this.$emit('change', {
+        value: e.newState,
+      });
+    },
+    onRemoveHandler(e) {
+      this.$emit('change', {
+        value: e.newState,
+      });
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/validation/step/PaymentDetails.vue b/vue-options-api-demos/layout/wizard/validation/step/PaymentDetails.vue
new file mode 100644
index 00000000..de3c965f
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/step/PaymentDetails.vue
@@ -0,0 +1,152 @@
+<template>
+  <form-element @change="onChange">
+    <fieldset
+      class="k-form-fieldset"
+      :style="{
+        width: '500px',
+        margin: '0 auto',
+      }"
+    >
+      <field
+        :id="'cardselector'"
+        :name="'cardselector'"
+        :label="'Full Name'"
+        :component="'myTemplate'"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <cardselector
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          />
+        </template>
+      </field>
+      <div :style="{ display: 'flex', justifyContent: 'space-between' }">
+        <field
+          :style="{ width: '70%', 'padding-right': '5px' }"
+          :id="'cardNumber'"
+          :name="'cardNumber'"
+          :label="'Card Number'"
+          :mask="'0000-0000-0000-0000'"
+          :hint="'Hint: Your Credit Card Number'"
+          :component="'myTemplate'"
+          :validator="cardValidator"
+        >
+          <template v-slot:myTemplate="{ props }">
+            <formmaskedtextbox
+              v-bind="props"
+              @change="props.onChange"
+              @blur="props.onBlur"
+              @focus="props.onFocus"
+            ></formmaskedtextbox>
+          </template>
+        </field>
+        <field
+          :id="'cvc'"
+          :name="'cvc'"
+          :label="'CVC Number'"
+          :mask="'000'"
+          :hint="'Hint: The last 3 digids on the back of the Card'"
+          :component="'myTemplate'"
+          :validator="cvcValidator"
+        >
+          <template v-slot:myTemplate="{ props }">
+            <formmaskedtextbox
+              v-bind="props"
+              @change="props.onChange"
+              @blur="props.onBlur"
+              @focus="props.onFocus"
+            ></formmaskedtextbox>
+          </template>
+        </field>
+      </div>
+      <field
+        :id="'expireDate'"
+        :name="'expireDate'"
+        :label="'Expiration Date'"
+        :optional="true"
+        :component="'myTemplate'"
+        :validator="requiredValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <formdateinput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></formdateinput>
+        </template>
+      </field>
+      <field
+        :id="'cardHolder'"
+        :name="'cardHolder'"
+        :label="'Card Holder Name'"
+        :component="'myTemplate'"
+        :validator="requiredValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></forminput>
+        </template>
+      </field>
+    </fieldset>
+  </form-element>
+</template>
+<script>
+import { Field, FormElement } from '@progress/kendo-vue-form';
+import FormInput from './FormInput.vue';
+import FormAutoComplete from './FormAutoComplete.vue';
+import FormRadioGroup from './FormRadioGroup.vue';
+import FormTextArea from './FormTextArea.vue';
+import CardSelector from './CardSelector.vue';
+import FormMaskedTextBox from './FormMaskedTextBox.vue';
+import FormDateInput from './FormDateInput.vue';
+import { Button } from '@progress/kendo-vue-buttons';
+import { cardValidator, cvcValidator, requiredValidator } from './validators';
+
+export default {
+  components: {
+    field: Field,
+    'form-element': FormElement,
+    forminput: FormInput,
+    formautocomplete: FormAutoComplete,
+    formradiogroup: FormRadioGroup,
+    formtextarea: FormTextArea,
+    formmaskedtextbox: FormMaskedTextBox,
+    cardselector: CardSelector,
+    formdateinput: FormDateInput,
+    kbutton: Button,
+  },
+  inject: {
+    kendoForm: { default: {} },
+  },
+  data: function () {
+    return {
+      cardValidator,
+      cvcValidator,
+      requiredValidator,
+    };
+  },
+  computed: {
+    disableNextStep() {
+      const errors = this.kendoForm.errors;
+      return (
+        errors.cardNumber === '' &&
+        errors.cvc === '' &&
+        errors.expireDate == '' &&
+        errors.cardHolder == ''
+      );
+    },
+  },
+  methods: {
+    onChange() {
+      this.$emit('isStepValid', { disableNextStep: this.disableNextStep });
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/validation/step/PersonalDetails.vue b/vue-options-api-demos/layout/wizard/validation/step/PersonalDetails.vue
new file mode 100644
index 00000000..3a418c5b
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/step/PersonalDetails.vue
@@ -0,0 +1,182 @@
+<template>
+  <form-element @change="onChange">
+    <fieldset
+      class="k-form-fieldset"
+      :style="{
+        width: '500px',
+        margin: '0 auto',
+      }"
+    >
+      <field
+        :id="'fullName'"
+        :name="'fullName'"
+        :label="'Full Name'"
+        :component="'myTemplate'"
+        :validator="nameValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          />
+        </template>
+      </field>
+      <field
+        :id="'countryselected'"
+        :name="'countryselected'"
+        :label="'Country'"
+        :hint="'Hint: Only European countries.'"
+        :component="'myTemplate'"
+        :data="countries"
+        :validator="requiredValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <formautocomplete
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></formautocomplete>
+        </template>
+      </field>
+      <field
+        :id="'gender'"
+        :name="'gender'"
+        :label="'Gender'"
+        :layout="'horizontal'"
+        :component="'myTemplate'"
+        :data-items="genders"
+        :validator="requiredValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <formradiogroup
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></formradiogroup>
+        </template>
+      </field>
+      <field
+        :id="'about'"
+        :name="'about'"
+        :label="'About'"
+        :optional="true"
+        :component="'myTemplate'"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <formtextarea
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></formtextarea>
+        </template>
+      </field>
+    </fieldset>
+  </form-element>
+</template>
+<script>
+import { Field, FormElement } from '@progress/kendo-vue-form';
+import FormInput from './FormInput.vue';
+import FormAutoComplete from './FormAutoComplete.vue';
+import FormRadioGroup from './FormRadioGroup.vue';
+import FormTextArea from './FormTextArea.vue';
+import { Button } from '@progress/kendo-vue-buttons';
+import { requiredValidator, nameValidator } from './validators';
+
+export default {
+  components: {
+    field: Field,
+    'form-element': FormElement,
+    forminput: FormInput,
+    formautocomplete: FormAutoComplete,
+    formradiogroup: FormRadioGroup,
+    formtextarea: FormTextArea,
+    kbutton: Button,
+  },
+  inject: {
+    kendoForm: { default: {} },
+  },
+  data: function () {
+    return {
+      requiredValidator,
+      nameValidator,
+      genders: [
+        { label: 'Male', value: 'male' },
+        { label: 'Female', value: 'female' },
+        { label: 'Other', value: 'other' },
+      ],
+      countries: [
+        'Albania',
+        'Andorra',
+        'Armenia',
+        'Austria',
+        'Azerbaijan',
+        'Belarus',
+        'Belgium',
+        'Bosnia & Herzegovina',
+        'Bulgaria',
+        'Croatia',
+        'Cyprus',
+        'Czech Republic',
+        'Denmark',
+        'Estonia',
+        'Finland',
+        'France',
+        'Georgia',
+        'Germany',
+        'Greece',
+        'Hungary',
+        'Iceland',
+        'Ireland',
+        'Italy',
+        'Kosovo',
+        'Latvia',
+        'Liechtenstein',
+        'Lithuania',
+        'Luxembourg',
+        'Macedonia',
+        'Malta',
+        'Moldova',
+        'Monaco',
+        'Montenegro',
+        'Netherlands',
+        'Norway',
+        'Poland',
+        'Portugal',
+        'Romania',
+        'Russia',
+        'San Marino',
+        'Serbia',
+        'Slovakia',
+        'Slovenia',
+        'Spain',
+        'Sweden',
+        'Switzerland',
+        'Turkey',
+        'Ukraine',
+        'United Kingdom',
+        'Vatican City',
+      ],
+    };
+  },
+  computed: {
+    disableNextStep() {
+      const errors = this.kendoForm.errors;
+      return (
+        errors.fullName === '' &&
+        errors.gender == '' &&
+        errors.countryselected == ''
+      );
+    },
+  },
+  methods: {
+    onChange() {
+      this.$emit('isStepValid', { disableNextStep: this.disableNextStep });
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/validation/step/main.js b/vue-options-api-demos/layout/wizard/validation/step/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/step/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/wizard/validation/step/main.vue b/vue-options-api-demos/layout/wizard/validation/step/main.vue
new file mode 100644
index 00000000..7cb1469a
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/step/main.vue
@@ -0,0 +1,167 @@
+<template>
+  <div
+    :style="{
+      display: 'flex',
+      'flex-direction': 'column',
+    }"
+  >
+    <Stepper :value="step" :items="steps" @change="stepperChange" />
+    <k-form ref="form" :class="'form-element'" :initial-values="initialValues">
+      <accountDetails v-show="step === 0" @isStepValid="isStepValid" />
+      <personalDetails v-show="step === 1" @isStepValid="isStepValid" />
+      <paymentDetails v-show="step === 2" @isStepValid="isStepValid" />
+    </k-form>
+    <div
+      v-if="showErrors && isLastStep"
+      class="k-messagebox k-messagebox-error"
+    >
+      <errorSummary :form-errors="formErrors" />
+    </div>
+    <span :style="{ 'margin-top': '40px' }" :class="'k-form-separator'" />
+    <div
+      :style="{
+        'justify-content': 'space-between',
+        'align-content': 'center',
+      }"
+      :class="'k-form-buttons'"
+    >
+      <span :style="{ 'align-self': 'center' }">
+        Step {{ step + 1 }} of 3
+      </span>
+      <span>
+        <span v-if="step !== 0">
+          <k-button
+            :style="{ 'margin-right': '16px' }"
+            @click="prevButtonClick"
+          >
+            Previous
+          </k-button>
+        </span>
+        <k-button
+          :theme-color="'primary'"
+          @click="nextSubmitButtonClick"
+          :disabled="disableNextStep"
+        >
+          {{ isLastStep ? 'Submit' : 'Next' }}
+        </k-button>
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { Stepper } from '@progress/kendo-vue-layout';
+import { Form } from '@progress/kendo-vue-form';
+import { Button } from '@progress/kendo-vue-buttons';
+import AccountDetails from './AccountDetails.vue';
+import PersonalDetails from './PersonalDetails.vue';
+import PaymentDetails from './PaymentDetails.vue';
+import ErrorSummary from './ErrorSummary.vue';
+
+export default {
+  components: {
+    'k-form': Form,
+    Stepper,
+    'k-button': Button,
+    accountDetails: AccountDetails,
+    personalDetails: PersonalDetails,
+    paymentDetails: PaymentDetails,
+    errorSummary: ErrorSummary,
+  },
+  data() {
+    return {
+      disableNextStep: true,
+      initialValues: {
+        username: null,
+        email: null,
+        password: null,
+        fullName: null,
+        countryselected: null,
+        gender: null,
+        cardselector: null,
+        cardNumber: null,
+        cvc: null,
+        expireDate: null,
+        cardHolder: null,
+      },
+      formErrors: null,
+      showErrors: false,
+      step: 0,
+    };
+  },
+  computed: {
+    isLastStep() {
+      return this.steps.length - 1 === this.step;
+    },
+    isStepTwoDisabled() {
+      if (this.step >= 1) {
+        return true;
+      }
+      if (this.step < 1 && !this.disableNextStep) {
+        return true;
+      }
+    },
+    isStepThreeDisabled() {
+      if (this.step >= 2) {
+        return true;
+      }
+      if (this.step < 2 && this.step !== 0 && !this.disableNextStep) {
+        return true;
+      }
+    },
+    steps() {
+      return [
+        {
+          label: 'Account Details',
+          componentName: 'accountDetails',
+        },
+        {
+          label: 'Personal Details',
+          componentName: 'personalDetails',
+          disabled: !this.isStepTwoDisabled,
+        },
+        {
+          label: 'Payment Details',
+          componentName: 'paymentDetails',
+          disabled: !this.isStepThreeDisabled,
+        },
+      ];
+    },
+  },
+  methods: {
+    isStepValid(value) {
+      this.disableNextStep = !value.disableNextStep;
+    },
+    stepperChange(event) {
+      this.step = event.value;
+    },
+    nextSubmitButtonClick() {
+      this.formErrors = this.$refs.form.form.errors;
+      if (this.isLastStep) {
+        this.showErrors = false;
+        const formValues = this.$refs.form.form.values;
+        for (const property in formValues) {
+          if (formValues[property] === null || formValues[property] === '') {
+            this.showErrors = true;
+          }
+        }
+        if (!this.showErrors) {
+          alert(JSON.stringify(this.$refs.form.form.values, null, 2));
+        }
+      } else {
+        this.step += 1;
+        this.disableNextStep = true;
+      }
+    },
+    prevButtonClick() {
+      this.step -= 1;
+      this.disableNextStep = false;
+    },
+  },
+};
+</script>
+<style>
+.form-element {
+  display: flex;
+  justify-content: center;
+}
+</style>
diff --git a/vue-options-api-demos/layout/wizard/validation/step/validators.js b/vue-options-api-demos/layout/wizard/validation/step/validators.js
new file mode 100644
index 00000000..b1fa8aa6
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/step/validators.js
@@ -0,0 +1,83 @@
+import { getter } from '@progress/kendo-vue-common';
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const phoneRegex = new RegExp(/^[0-9 ()+-]+$/);
+const ccardRegex = new RegExp(/^[0-9-]+$/);
+const cvcRegex = new RegExp(/^[0-9]+$/);
+
+export const termsValidator = (value) =>
+  value ? '' : "It's required to agree with Terms and Conditions.";
+export const emailValidator = (value) =>
+  !value
+    ? 'Email field is required.'
+    : emailRegex.test(value)
+    ? ''
+    : 'Email is not in a valid format.';
+export const nameValidator = (value) =>
+  !value
+    ? 'Full Name is required'
+    : value.length < 7
+    ? 'Full Name should be at least 7 characters long.'
+    : '';
+export const userNameValidator = (value) =>
+  !value
+    ? 'User Name is required'
+    : value.length < 5
+    ? 'User name should be at least 5 characters long.'
+    : '';
+export const phoneValidator = (value) =>
+  !value
+    ? 'Phone number is required.'
+    : phoneRegex.test(value)
+    ? ''
+    : 'Not a valid phone number.';
+export const cardValidator = (value) =>
+  !value
+    ? 'Credit card number is required. '
+    : ccardRegex.test(value)
+    ? ''
+    : 'Not a valid credit card number format.';
+export const cvcValidator = (value) =>
+  !value
+    ? 'CVC code is required,'
+    : cvcRegex.test(value) || value.length !== 3
+    ? ''
+    : 'Not a valid CVC code format.';
+export const guestsValidator = (value) =>
+  !value
+    ? 'Number of guests is required'
+    : value <= 5
+    ? ''
+    : 'Maximum 5 guests';
+export const nightsValidator = (value) =>
+  value ? '' : 'Number of Nights is required.';
+export const arrivalDateValidator = (value) =>
+  value ? '' : 'Arrival Date is required.';
+export const colorValidator = (value) => (value ? '' : 'Color is required.');
+export const requiredValidator = (value) =>
+  value ? '' : 'Error: This field is required.';
+export const passwordValidator = (value) =>
+  value && value.length > 8 ? '' : 'Password must be at least 8 symbols.';
+export const addressValidator = (value) =>
+  value ? '' : 'Address is required.';
+
+const userNameGetter = getter('username');
+const emailGetter = getter('email');
+
+export const formValidator = (values) => {
+  const userName = userNameGetter(values);
+  const emailValue = emailGetter(values);
+
+  if (userName && emailValue && emailRegex.test(emailValue)) {
+    return {};
+  }
+
+  return {
+    VALIDATION_SUMMARY: 'Please fill in the following fields.',
+    ['username']: !userName ? 'User Name is required.' : '',
+    ['email']:
+      emailValue && emailRegex.test(emailValue)
+        ? ''
+        : 'Email is required and should be in a valid format.',
+  };
+};
diff --git a/vue-options-api-demos/layout/wizard/validation/submit/AccountDetails.vue b/vue-options-api-demos/layout/wizard/validation/submit/AccountDetails.vue
new file mode 100644
index 00000000..c2621bfc
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/submit/AccountDetails.vue
@@ -0,0 +1,111 @@
+<template>
+  <form-element>
+    <fieldset
+      class="k-form-fieldset"
+      :style="{
+        width: '500px',
+        margin: '0 auto',
+      }"
+    >
+      <field
+        :id="'username'"
+        :name="'username'"
+        :label="'Username'"
+        :component="'myTemplate'"
+        :validator="userNameValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          />
+        </template>
+      </field>
+      <field
+        :id="'email'"
+        :name="'email'"
+        :label="'Email'"
+        :hint="'Hint: Enter your personal email address.'"
+        :component="'myTemplate'"
+        :validator="emailValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></forminput>
+        </template>
+      </field>
+      <field
+        :id="'password'"
+        :name="'password'"
+        :label="'Password'"
+        :component="'myTemplate'"
+        :type="'password'"
+        :validator="passwordValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></forminput>
+        </template>
+      </field>
+      <field
+        :id="'avatar'"
+        :name="'avatar'"
+        :label="'Avatar'"
+        :hint="'Hint: Upload your avatar picture'"
+        :optional="true"
+        :component="'myTemplate'"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <formupload
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></formupload>
+        </template>
+      </field>
+    </fieldset>
+  </form-element>
+</template>
+<script>
+import { Field, FormElement } from '@progress/kendo-vue-form';
+import FormInput from './FormInput.vue';
+import FormUpload from './FormUpload.vue';
+import { Button } from '@progress/kendo-vue-buttons';
+
+import {
+  emailValidator,
+  userNameValidator,
+  passwordValidator,
+} from './validators';
+
+export default {
+  components: {
+    field: Field,
+    'form-element': FormElement,
+    forminput: FormInput,
+    kbutton: Button,
+    formupload: FormUpload,
+  },
+  inject: {
+    kendoForm: { default: {} },
+  },
+  data: function () {
+    return {
+      emailValidator,
+      userNameValidator,
+      passwordValidator,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/validation/submit/CardSelector.vue b/vue-options-api-demos/layout/wizard/validation/submit/CardSelector.vue
new file mode 100644
index 00000000..3c933c91
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/submit/CardSelector.vue
@@ -0,0 +1,201 @@
+<template>
+  <fieldwrapper>
+    <div class="k-form-field-wrap">
+      <klabel :editor-id="id" :editor-valid="valid">
+        {{ label }}
+      </klabel>
+      <ul
+        class="k-radio-list k-list-horizontal"
+        :style="{ display: 'flex', 'justify-content': 'space-between' }"
+      >
+        <li class="k-radio-item">
+          <input
+            @change="handleChange"
+            @blur="handleBlur"
+            @focus="handleFocus"
+            :checked="value === 'visa'"
+            :id="'visa'"
+            :type="'radio'"
+            :value="'visa'"
+            :name="'paymentType'"
+            :style="inputStyles"
+          />
+          <label
+            @mouseenter="onMouseEnterLabel"
+            @mouseleave="onMouseLeaveLabel"
+            htmlFor="visa"
+            :style="visaStyle"
+          />
+        </li>
+
+        <li class="k-radio-item">
+          <input
+            @change="handleChange"
+            @blur="handleBlur"
+            @focus="handleFocus"
+            :checked="value === 'masterCard'"
+            :id="'masterCard'"
+            :type="'radio'"
+            :value="'masterCard'"
+            :name="'paymentType'"
+            :style="inputStyles"
+          />
+          <label
+            @mouseenter="onMouseEnterLabel"
+            @mouseleave="onMouseLeaveLabel"
+            htmlFor="masterCard"
+            :style="mastercardStyle"
+          />
+        </li>
+        <li class="k-radio-item">
+          <input
+            @change="handleChange"
+            @blur="handleBlur"
+            @focus="handleFocus"
+            :checked="value === 'paypal'"
+            :id="'paypal'"
+            :type="'radio'"
+            :value="'paypal'"
+            :name="'paymentType'"
+            :style="inputStyles"
+          />
+          <label
+            @mouseenter="onMouseEnterLabel"
+            @mouseleave="onMouseLeaveLabel"
+            htmlFor="paypal"
+            :style="paypalStyle"
+          />
+        </li>
+      </ul>
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+
+const filter = 'brightness(1.8) grayscale(1) opacity(.7)';
+const filterHover = 'brightness(1.2) grayscale(.5) opacity(.9)';
+const cardStyle = {
+  cursor: 'pointer',
+  backgroundSize: 'auto',
+  backgroundRepeat: 'no-repeat',
+  backgroundPosition: 'center',
+  display: 'inline-block',
+  width: '138px',
+  height: '70px',
+  border: '1px solid',
+};
+
+const inputStyles = {
+  visibility: 'hidden',
+  position: 'absolute',
+};
+
+export default {
+  props: {
+    data: Object,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  computed: {
+    visaStyle() {
+      return {
+        backgroundImage:
+          'url(https://cdn-icons-png.flaticon.com/128/196/196578.png)',
+        filter:
+          this.value === 'visa'
+            ? 'none'
+            : this.cardHover === 'visa'
+            ? filterHover
+            : filter,
+        ...cardStyle,
+      };
+    },
+    mastercardStyle() {
+      return {
+        backgroundImage:
+          'url(https://cdn-icons-png.flaticon.com/128/196/196561.png)',
+        filter:
+          this.value === 'masterCard'
+            ? 'none'
+            : this.cardHover === 'masterCard'
+            ? filterHover
+            : filter,
+        ...cardStyle,
+      };
+    },
+    paypalStyle() {
+      return {
+        backgroundImage:
+          'url(https://cdn-icons-png.flaticon.com/128/196/196565.png)',
+        filter:
+          this.value === 'paypal'
+            ? 'none'
+            : this.cardHover === 'paypal'
+            ? filterHover
+            : filter,
+        ...cardStyle,
+      };
+    },
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  data() {
+    return {
+      cardHover: '',
+      inputStyles,
+    };
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+    onMouseEnterLabel(event) {
+      this.cardHover = event.currentTarget.getAttribute('for');
+    },
+    onMouseLeaveLabel(event) {
+      this.cardHover = '';
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/validation/submit/ErrorSummary.vue b/vue-options-api-demos/layout/wizard/validation/submit/ErrorSummary.vue
new file mode 100644
index 00000000..d2d081b5
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/submit/ErrorSummary.vue
@@ -0,0 +1,62 @@
+<template>
+  <div v-if="showStep1">Step1</div>
+  <ul>
+    <li v-if="formErrors.username">{{ formErrors.username }}</li>
+    <li v-if="formErrors.email">{{ formErrors.email }}</li>
+    <li v-if="formErrors.password">{{ formErrors.password }}</li>
+  </ul>
+
+  <p v-if="showStep2">Step2</p>
+  <ul>
+    <li v-if="formErrors.fullName">Full Name: {{ formErrors.fullName }}</li>
+    <li v-if="formErrors.countryselected">
+      Country: {{ formErrors.countryselected }}
+    </li>
+    <li v-if="formErrors.gender">Gender: {{ formErrors.gender }}</li>
+  </ul>
+
+  <p v-if="showStep3">Step3</p>
+  <ul>
+    <li v-if="formErrors.cardNumber">
+      Card Number: {{ formErrors.cardNumber }}
+    </li>
+    <li v-if="formErrors.cvc">CVC code: {{ formErrors.cvc }}</li>
+    <li v-if="formErrors.expireDate">
+      Expire Date: {{ formErrors.expireDate }}
+    </li>
+    <li v-if="formErrors.cardHolder">
+      Card Holder: {{ formErrors.cardHolder }}
+    </li>
+  </ul>
+</template>
+<script>
+export default {
+  props: {
+    formErrors: Object,
+  },
+  computed: {
+    showStep1() {
+      return (
+        this.formErrors.username ||
+        this.formErrors.email ||
+        this.formErrors.password
+      );
+    },
+    showStep2() {
+      return (
+        this.formErrors.fullName ||
+        this.formErrors.countryselected ||
+        this.formErrors.gender
+      );
+    },
+    showStep3() {
+      return (
+        this.formErrors.cardNumber ||
+        this.formErrors.cvc ||
+        this.formErrors.expireDate ||
+        this.formErrors.cardHolder
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/validation/submit/FormAutoComplete.vue b/vue-options-api-demos/layout/wizard/validation/submit/FormAutoComplete.vue
new file mode 100644
index 00000000..39526b0c
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/submit/FormAutoComplete.vue
@@ -0,0 +1,79 @@
+<template>
+  <fieldwrapper>
+    <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <autocomplete
+        :data-items="data"
+        :valid="valid"
+        :value="value"
+        :id="id"
+        @change="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { AutoComplete } from '@progress/kendo-vue-dropdowns';
+export default {
+  props: {
+    data: Object,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    autocomplete: AutoComplete,
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/validation/submit/FormCheckbox.vue b/vue-options-api-demos/layout/wizard/validation/submit/FormCheckbox.vue
new file mode 100644
index 00000000..d3438819
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/submit/FormCheckbox.vue
@@ -0,0 +1,89 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+        <span>
+          <checkbox 
+                :value="value"
+                :valid="valid"
+                :id="id"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus" />
+          </span>
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Checkbox } from "@progress/kendo-vue-inputs";
+
+export default {
+    props: {
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        disabled: Boolean,
+        optional: Boolean,
+        visited: Boolean,
+        modified: Boolean,
+        value: {
+             type: [Boolean, String],
+             default: false
+        }
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        klabel: Label,
+        checkbox: Checkbox
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/layout/wizard/validation/submit/FormDateInput.vue b/vue-options-api-demos/layout/wizard/validation/submit/FormDateInput.vue
new file mode 100644
index 00000000..67b4a198
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/submit/FormDateInput.vue
@@ -0,0 +1,77 @@
+<template>
+  <fieldwrapper>
+    <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <dateinput
+        :valid="valid"
+        :value="value"
+        :id="id"
+        @change="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { DateInput } from '@progress/kendo-vue-dateinputs';
+export default {
+  props: {
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: Date,
+      default: null,
+    },
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    dateinput: DateInput,
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/validation/submit/FormDatePicker.vue b/vue-options-api-demos/layout/wizard/validation/submit/FormDatePicker.vue
new file mode 100644
index 00000000..6f6dfddc
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/submit/FormDatePicker.vue
@@ -0,0 +1,79 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <datepicker :style="{ width: '230px' }" 
+                :value="value"
+                :valid="valid"
+                :id="id"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else :direction="hintDirection">{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+export default {
+    props: {
+        hintDirection: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: Date,
+            default: null
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      datepicker: DatePicker
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/layout/wizard/validation/submit/FormInput.vue b/vue-options-api-demos/layout/wizard/validation/submit/FormInput.vue
new file mode 100644
index 00000000..e9551d6f
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/submit/FormInput.vue
@@ -0,0 +1,90 @@
+<template>
+  <fieldwrapper>
+    <klabel
+      :class="'k-form-label'"
+      :editor-id="id"
+      :editor-valid="valid"
+      :disabled="disabled"
+      :optional="optional"
+    >
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <kinput
+        :valid="valid"
+        :id="id"
+        :value="value"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :type="type"
+        @input="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { Input } from '@progress/kendo-vue-inputs';
+export default {
+  props: {
+    optional: Boolean,
+    disabled: Boolean,
+    placeholder: String,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: String,
+      default: '',
+    },
+    type: String,
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    kinput: Input,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/validation/submit/FormMaskedTextBox.vue b/vue-options-api-demos/layout/wizard/validation/submit/FormMaskedTextBox.vue
new file mode 100644
index 00000000..8f991820
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/submit/FormMaskedTextBox.vue
@@ -0,0 +1,83 @@
+<template>
+  <fieldwrapper>
+    <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :optional="optional">
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <maskedtextbox
+        :valid="valid"
+        :value="value"
+        :id="id"
+        :mask="mask"
+        :readonly="readonly"
+        @change="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { MaskedTextBox } from '@progress/kendo-vue-inputs';
+export default {
+  props: {
+    readonly: Boolean,
+    optional: Boolean,
+    mask: String,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: String,
+      default: '',
+    },
+    width: Number,
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    maskedtextbox: MaskedTextBox,
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/validation/submit/FormNumericTextBox.vue b/vue-options-api-demos/layout/wizard/validation/submit/FormNumericTextBox.vue
new file mode 100644
index 00000000..f46568cc
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/submit/FormNumericTextBox.vue
@@ -0,0 +1,79 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <numerictextbox :style="{ width: '230px' }" 
+                :valid="valid"
+                :value="value"
+                :id="id"
+                :min="0"
+                @change="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { NumericTextBox } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: Number,
+            default: null
+        }
+    },
+    components: {
+        fieldwrapper: FieldWrapper,
+        error: Error,
+        hint: Hint,
+        klabel: Label,
+        numerictextbox: NumericTextBox
+    },
+    emits: {
+        change: null,
+        blur: null,
+        focus: null
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/layout/wizard/validation/submit/FormRadioGroup.vue b/vue-options-api-demos/layout/wizard/validation/submit/FormRadioGroup.vue
new file mode 100644
index 00000000..1ab866bc
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/submit/FormRadioGroup.vue
@@ -0,0 +1,106 @@
+<template>
+  <fieldwrapper>
+    <klabel
+      :class="'k-form-label'"
+      :id="labelId"
+      :editor-id="id"
+      :editor-valid="valid"
+      :editor-disabled="disabled"
+    >
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <radiogroup
+        :name="name"
+        :aria-describedby="describedBy"
+        :label="label"
+        :valid="valid"
+        :value="value"
+        :layout="layout"
+        :data-items="dataItems"
+        :id="id"
+        :checked="value"
+        @change="handleChange"
+      />
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { RadioGroup } from '@progress/kendo-vue-inputs';
+export default {
+  name: 'FormRadioGroup',
+  props: {
+    name: String,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: {
+      type: Boolean,
+      default: true,
+    },
+    disabled: Boolean,
+    layout: String,
+    dataItems: Array,
+    value: {
+      type: String,
+      default: null,
+    },
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    radiogroup: RadioGroup,
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+    describedBy() {
+      return `${this.hintId} ${this.errorId}`;
+    },
+    labelId() {
+      return this.label ? `${this.id}_label` : '';
+    },
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/validation/submit/FormTextArea.vue b/vue-options-api-demos/layout/wizard/validation/submit/FormTextArea.vue
new file mode 100644
index 00000000..011196b5
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/submit/FormTextArea.vue
@@ -0,0 +1,80 @@
+<template>
+  <fieldwrapper>
+    <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :optional="optional">
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <span class="k-textarea">
+        <textarea
+          class="k-input"
+          style="margin-top: 0px; margin-bottom: 0px; height: 56px"
+          :valid="valid"
+          :value="value"
+          :id="id"
+          @change="handleChange"
+          @blur="handleBlur"
+          @focus="handleFocus"
+        ></textarea>
+      </span>
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+export default {
+  props: {
+    optional: Boolean,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/validation/submit/FormUpload.vue b/vue-options-api-demos/layout/wizard/validation/submit/FormUpload.vue
new file mode 100644
index 00000000..3e2c664d
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/submit/FormUpload.vue
@@ -0,0 +1,90 @@
+<template>
+  <fieldwrapper>
+    <klabel :editor-id="id" :editor-valid="valid" :optional="optional">
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <span>
+        <upload
+          :valid="valid"
+          :value="value"
+          :id="id"
+          :auto-upload="false"
+          :multiple="false"
+          :show-action-buttons="false"
+          :files="value"
+          @blur="handleBlur"
+          @focus="handleFocus"
+          @add="onAddHandler"
+          @remove="onRemoveHandler"
+        />
+      </span>
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { Upload } from '@progress/kendo-vue-upload';
+
+export default {
+  props: {
+    touched: Boolean,
+    optional: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: Array,
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    upload: Upload,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  methods: {
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+    onAddHandler(e) {
+      this.$emit('change', {
+        value: e.newState,
+      });
+    },
+    onRemoveHandler(e) {
+      this.$emit('change', {
+        value: e.newState,
+      });
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/validation/submit/PaymentDetails.vue b/vue-options-api-demos/layout/wizard/validation/submit/PaymentDetails.vue
new file mode 100644
index 00000000..922b898b
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/submit/PaymentDetails.vue
@@ -0,0 +1,136 @@
+<template>
+  <form-element>
+    <fieldset
+      class="k-form-fieldset"
+      :style="{
+        width: '500px',
+        margin: '0 auto',
+      }"
+    >
+      <field
+        :id="'cardselector'"
+        :name="'cardselector'"
+        :label="'Full Name'"
+        :component="'myTemplate'"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <cardselector
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          />
+        </template>
+      </field>
+      <div :style="{ display: 'flex', justifyContent: 'space-between' }">
+        <field
+          :style="{ width: '70%', 'padding-right': '5px' }"
+          :id="'cardNumber'"
+          :name="'cardNumber'"
+          :label="'Card Number'"
+          :mask="'0000-0000-0000-0000'"
+          :hint="'Hint: Your Credit Card Number'"
+          :component="'myTemplate'"
+          :validator="cardValidator"
+        >
+          <template v-slot:myTemplate="{ props }">
+            <formmaskedtextbox
+              v-bind="props"
+              @change="props.onChange"
+              @blur="props.onBlur"
+              @focus="props.onFocus"
+            ></formmaskedtextbox>
+          </template>
+        </field>
+        <field
+          :id="'cvc'"
+          :name="'cvc'"
+          :label="'CVC Number'"
+          :mask="'000'"
+          :hint="'Hint: The last 3 digids on the back of the Card'"
+          :component="'myTemplate'"
+          :validator="cvcValidator"
+        >
+          <template v-slot:myTemplate="{ props }">
+            <formmaskedtextbox
+              v-bind="props"
+              @change="props.onChange"
+              @blur="props.onBlur"
+              @focus="props.onFocus"
+            ></formmaskedtextbox>
+          </template>
+        </field>
+      </div>
+      <field
+        :id="'expireDate'"
+        :name="'expireDate'"
+        :label="'Expiration Date'"
+        :optional="true"
+        :component="'myTemplate'"
+        :validator="requiredValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <formdateinput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></formdateinput>
+        </template>
+      </field>
+      <field
+        :id="'cardHolder'"
+        :name="'cardHolder'"
+        :label="'Card Holder Name'"
+        :component="'myTemplate'"
+        :validator="requiredValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></forminput>
+        </template>
+      </field>
+    </fieldset>
+  </form-element>
+</template>
+<script>
+import { Field, FormElement } from '@progress/kendo-vue-form';
+import FormInput from './FormInput.vue';
+import FormAutoComplete from './FormAutoComplete.vue';
+import FormRadioGroup from './FormRadioGroup.vue';
+import FormTextArea from './FormTextArea.vue';
+import CardSelector from './CardSelector.vue';
+import FormMaskedTextBox from './FormMaskedTextBox.vue';
+import FormDateInput from './FormDateInput.vue';
+import { Button } from '@progress/kendo-vue-buttons';
+import { cardValidator, cvcValidator, requiredValidator } from './validators';
+
+export default {
+  components: {
+    field: Field,
+    'form-element': FormElement,
+    forminput: FormInput,
+    formautocomplete: FormAutoComplete,
+    formradiogroup: FormRadioGroup,
+    formtextarea: FormTextArea,
+    formmaskedtextbox: FormMaskedTextBox,
+    cardselector: CardSelector,
+    formdateinput: FormDateInput,
+    kbutton: Button,
+  },
+  inject: {
+    kendoForm: { default: {} },
+  },
+  data: function () {
+    return {
+      cardValidator,
+      cvcValidator,
+      requiredValidator,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/validation/submit/PersonalDetails.vue b/vue-options-api-demos/layout/wizard/validation/submit/PersonalDetails.vue
new file mode 100644
index 00000000..1fe82fac
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/submit/PersonalDetails.vue
@@ -0,0 +1,167 @@
+<template>
+  <form-element>
+    <fieldset
+      class="k-form-fieldset"
+      :style="{
+        width: '500px',
+        margin: '0 auto',
+      }"
+    >
+      <field
+        :id="'fullName'"
+        :name="'fullName'"
+        :label="'Full Name'"
+        :component="'myTemplate'"
+        :validator="nameValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          />
+        </template>
+      </field>
+      <field
+        :id="'countryselected'"
+        :name="'countryselected'"
+        :label="'Country'"
+        :hint="'Hint: Only European countries.'"
+        :component="'myTemplate'"
+        :data="countries"
+        :validator="requiredValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <formautocomplete
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></formautocomplete>
+        </template>
+      </field>
+      <field
+        :id="'gender'"
+        :name="'gender'"
+        :label="'Gender'"
+        :layout="'horizontal'"
+        :component="'myTemplate'"
+        :data-items="genders"
+        :validator="requiredValidator"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <formradiogroup
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></formradiogroup>
+        </template>
+      </field>
+      <field
+        :id="'about'"
+        :name="'about'"
+        :label="'About'"
+        :optional="true"
+        :component="'myTemplate'"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <formtextarea
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          ></formtextarea>
+        </template>
+      </field>
+    </fieldset>
+  </form-element>
+</template>
+<script>
+import { Field, FormElement } from '@progress/kendo-vue-form';
+import FormInput from './FormInput.vue';
+import FormAutoComplete from './FormAutoComplete.vue';
+import FormRadioGroup from './FormRadioGroup.vue';
+import FormTextArea from './FormTextArea.vue';
+import { Button } from '@progress/kendo-vue-buttons';
+import { requiredValidator, nameValidator } from './validators';
+
+export default {
+  components: {
+    field: Field,
+    'form-element': FormElement,
+    forminput: FormInput,
+    formautocomplete: FormAutoComplete,
+    formradiogroup: FormRadioGroup,
+    formtextarea: FormTextArea,
+    kbutton: Button,
+  },
+  inject: {
+    kendoForm: { default: {} },
+  },
+  data: function () {
+    return {
+      requiredValidator,
+      nameValidator,
+      genders: [
+        { label: 'Male', value: 'male' },
+        { label: 'Female', value: 'female' },
+        { label: 'Other', value: 'other' },
+      ],
+      countries: [
+        'Albania',
+        'Andorra',
+        'Armenia',
+        'Austria',
+        'Azerbaijan',
+        'Belarus',
+        'Belgium',
+        'Bosnia & Herzegovina',
+        'Bulgaria',
+        'Croatia',
+        'Cyprus',
+        'Czech Republic',
+        'Denmark',
+        'Estonia',
+        'Finland',
+        'France',
+        'Georgia',
+        'Germany',
+        'Greece',
+        'Hungary',
+        'Iceland',
+        'Ireland',
+        'Italy',
+        'Kosovo',
+        'Latvia',
+        'Liechtenstein',
+        'Lithuania',
+        'Luxembourg',
+        'Macedonia',
+        'Malta',
+        'Moldova',
+        'Monaco',
+        'Montenegro',
+        'Netherlands',
+        'Norway',
+        'Poland',
+        'Portugal',
+        'Romania',
+        'Russia',
+        'San Marino',
+        'Serbia',
+        'Slovakia',
+        'Slovenia',
+        'Spain',
+        'Sweden',
+        'Switzerland',
+        'Turkey',
+        'Ukraine',
+        'United Kingdom',
+        'Vatican City',
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/layout/wizard/validation/submit/main.js b/vue-options-api-demos/layout/wizard/validation/submit/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/submit/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/layout/wizard/validation/submit/main.vue b/vue-options-api-demos/layout/wizard/validation/submit/main.vue
new file mode 100644
index 00000000..4eff8af9
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/submit/main.vue
@@ -0,0 +1,138 @@
+<template>
+  <div
+    :style="{
+      display: 'flex',
+      'flex-direction': 'column',
+    }"
+  >
+    <Stepper :value="step" :items="steps" @change="stepperChange" />
+    <k-form ref="form" :class="'form-element'" :initial-values="initialValues">
+      <accountDetails v-show="step === 0" />
+      <personalDetails v-show="step === 1" />
+      <paymentDetails v-show="step === 2" />
+    </k-form>
+    <div
+      v-if="showErrors && isLastStep"
+      class="k-messagebox k-messagebox-error"
+    >
+      <errorSummary :form-errors="formErrors" />
+    </div>
+    <span :style="{ 'margin-top': '40px' }" :class="'k-form-separator'" />
+    <div
+      :style="{
+        'justify-content': 'space-between',
+        'align-content': 'center',
+      }"
+      :class="'k-form-buttons'"
+    >
+      <span :style="{ 'align-self': 'center' }">
+        Step {{ step + 1 }} of 3
+      </span>
+      <span>
+        <span v-if="step !== 0">
+          <k-button
+            :style="{ 'margin-right': '16px' }"
+            @click="prevButtonClick"
+          >
+            Previous
+          </k-button>
+        </span>
+        <k-button :theme-color="'primary'" @click="nextSubmitButtonClick">
+          {{ isLastStep ? 'Submit' : 'Next' }}
+        </k-button>
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { Stepper } from '@progress/kendo-vue-layout';
+import { Form } from '@progress/kendo-vue-form';
+import { Button } from '@progress/kendo-vue-buttons';
+import AccountDetails from './AccountDetails.vue';
+import PersonalDetails from './PersonalDetails.vue';
+import PaymentDetails from './PaymentDetails.vue';
+import ErrorSummary from './ErrorSummary.vue';
+
+export default {
+  components: {
+    'k-form': Form,
+    Stepper,
+    'k-button': Button,
+    accountDetails: AccountDetails,
+    personalDetails: PersonalDetails,
+    paymentDetails: PaymentDetails,
+    errorSummary: ErrorSummary,
+  },
+  data() {
+    return {
+      initialValues: {
+        username: null,
+        email: null,
+        password: null,
+        fullName: null,
+        countryselected: null,
+        gender: null,
+        cardselector: null,
+        cardNumber: null,
+        cvc: null,
+        expireDate: null,
+        cardHolder: null,
+      },
+      formErrors: null,
+      showErrors: false,
+      step: 0,
+      steps: [
+        {
+          label: 'Account Details',
+          componentName: 'accountDetails',
+        },
+        {
+          label: 'Personal Details',
+          componentName: 'personalDetails',
+        },
+        {
+          label: 'Payment Details',
+          componentName: 'paymentDetails',
+        },
+      ],
+    };
+  },
+  computed: {
+    isLastStep() {
+      return this.steps.length - 1 === this.step;
+    },
+  },
+  methods: {
+    stepperChange(event) {
+      this.step = event.value;
+    },
+    nextSubmitButtonClick() {
+      this.formErrors = this.$refs.form.form.errors;
+      if (this.isLastStep) {
+        this.showErrors = false;
+        const formValues = this.$refs.form.form.values;
+        for (const property in formValues) {
+          if (formValues[property] === null || formValues[property] === '') {
+            this.$refs.form.onSubmit();
+            this.showErrors = true;
+          }
+        }
+        if (!this.showErrors) {
+          alert(JSON.stringify(this.$refs.form.form.values, null, 2));
+        }
+      } else {
+        this.step += 1;
+      }
+    },
+    prevButtonClick() {
+      this.step -= 1;
+    },
+  },
+};
+</script>
+<style>
+.form-element {
+  display: flex;
+  justify-content: center;
+}
+</style>
diff --git a/vue-options-api-demos/layout/wizard/validation/submit/validators.js b/vue-options-api-demos/layout/wizard/validation/submit/validators.js
new file mode 100644
index 00000000..b1fa8aa6
--- /dev/null
+++ b/vue-options-api-demos/layout/wizard/validation/submit/validators.js
@@ -0,0 +1,83 @@
+import { getter } from '@progress/kendo-vue-common';
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const phoneRegex = new RegExp(/^[0-9 ()+-]+$/);
+const ccardRegex = new RegExp(/^[0-9-]+$/);
+const cvcRegex = new RegExp(/^[0-9]+$/);
+
+export const termsValidator = (value) =>
+  value ? '' : "It's required to agree with Terms and Conditions.";
+export const emailValidator = (value) =>
+  !value
+    ? 'Email field is required.'
+    : emailRegex.test(value)
+    ? ''
+    : 'Email is not in a valid format.';
+export const nameValidator = (value) =>
+  !value
+    ? 'Full Name is required'
+    : value.length < 7
+    ? 'Full Name should be at least 7 characters long.'
+    : '';
+export const userNameValidator = (value) =>
+  !value
+    ? 'User Name is required'
+    : value.length < 5
+    ? 'User name should be at least 5 characters long.'
+    : '';
+export const phoneValidator = (value) =>
+  !value
+    ? 'Phone number is required.'
+    : phoneRegex.test(value)
+    ? ''
+    : 'Not a valid phone number.';
+export const cardValidator = (value) =>
+  !value
+    ? 'Credit card number is required. '
+    : ccardRegex.test(value)
+    ? ''
+    : 'Not a valid credit card number format.';
+export const cvcValidator = (value) =>
+  !value
+    ? 'CVC code is required,'
+    : cvcRegex.test(value) || value.length !== 3
+    ? ''
+    : 'Not a valid CVC code format.';
+export const guestsValidator = (value) =>
+  !value
+    ? 'Number of guests is required'
+    : value <= 5
+    ? ''
+    : 'Maximum 5 guests';
+export const nightsValidator = (value) =>
+  value ? '' : 'Number of Nights is required.';
+export const arrivalDateValidator = (value) =>
+  value ? '' : 'Arrival Date is required.';
+export const colorValidator = (value) => (value ? '' : 'Color is required.');
+export const requiredValidator = (value) =>
+  value ? '' : 'Error: This field is required.';
+export const passwordValidator = (value) =>
+  value && value.length > 8 ? '' : 'Password must be at least 8 symbols.';
+export const addressValidator = (value) =>
+  value ? '' : 'Address is required.';
+
+const userNameGetter = getter('username');
+const emailGetter = getter('email');
+
+export const formValidator = (values) => {
+  const userName = userNameGetter(values);
+  const emailValue = emailGetter(values);
+
+  if (userName && emailValue && emailRegex.test(emailValue)) {
+    return {};
+  }
+
+  return {
+    VALIDATION_SUMMARY: 'Please fill in the following fields.',
+    ['username']: !userName ? 'User Name is required.' : '',
+    ['email']:
+      emailValue && emailRegex.test(emailValue)
+        ? ''
+        : 'Email is required and should be in a valid format.',
+  };
+};
diff --git a/vue-options-api-demos/listbox/customization/main.js b/vue-options-api-demos/listbox/customization/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/listbox/customization/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/listbox/customization/main.vue b/vue-options-api-demos/listbox/customization/main.vue
new file mode 100644
index 00000000..bedf3c19
--- /dev/null
+++ b/vue-options-api-demos/listbox/customization/main.vue
@@ -0,0 +1,130 @@
+<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"
+          :text-field="'ProductName'"
+          :selectedField="SELECTED_FIELD"
+          @itemclick="itemClick"
+          :toolbar="'toolbar'"
+          :item="'item'"
+        >
+          <template v-slot:toolbar>
+            <ListBoxToolbar
+              :tools="[
+                'moveUp',
+                'moveDown',
+                'transferTo',
+                'transferFrom',
+                'transferAllTo',
+                'transferAllFrom',
+                'remove',
+              ]"
+              :dataItems="notDiscontinued"
+              :dataConnected="discontinued"
+              @toolclick="handleToolBarClick"
+            />
+          </template>
+          <template v-slot:item="{ props }">
+            <div>
+              <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"
+          @itemclick="itemClick2"
+          :item="'item'"
+        >
+          <template v-slot:item="{ props }">
+            <div>
+              <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,
+  processListBoxData,
+} 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: {
+    itemClick(e) {
+      this.handleItemClick(e, 'notDiscontinued', 'discontinued');
+    },
+    itemClick2(e) {
+      this.handleItemClick(e, 'discontinued', 'notDiscontinued');
+    },
+    handleItemClick(event, data, connectedData) {
+      this[data] = this[data].map((item) => {
+        if (item.ProductID === event.dataItem.ProductID) {
+          item[SELECTED_FIELD] = !item[SELECTED_FIELD];
+        } else if (!event.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.notDiscontinued,
+        this.discontinued,
+        toolName,
+        SELECTED_FIELD
+      );
+
+      this.notDiscontinued = result.listBoxOneData;
+      this.discontinued = result.listBoxTwoData;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/listbox/customization/products.json b/vue-options-api-demos/listbox/customization/products.json
new file mode 100644
index 00000000..4df1c408
--- /dev/null
+++ b/vue-options-api-demos/listbox/customization/products.json
@@ -0,0 +1,1233 @@
+[{
+    "ProductID" : 1,
+    "ProductName" : "Chai",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "10 boxes x 20 bags",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 2,
+    "ProductName" : "Chang",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 3,
+    "ProductName" : "Aniseed Syrup",
+    "SupplierID" : 1,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 550 ml bottles",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 13,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 4,
+    "ProductName" : "Chef Anton's Cajun Seasoning",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "48 - 6 oz jars",
+    "UnitPrice" : 22.0000,
+    "UnitsInStock" : 53,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 5,
+    "ProductName" : "Chef Anton's Gumbo Mix",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "36 boxes",
+    "UnitPrice" : 21.3500,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 6,
+    "ProductName" : "Grandma's Boysenberry Spread",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 8 oz jars",
+    "UnitPrice" : 25.0000,
+    "UnitsInStock" : 120,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 7,
+    "ProductName" : "Uncle Bob's Organic Dried Pears",
+    "SupplierID" : 3,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "12 - 1 lb pkgs.",
+    "UnitPrice" : 30.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 8,
+    "ProductName" : "Northwoods Cranberry Sauce",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 12 oz jars",
+    "UnitPrice" : 40.0000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 9,
+    "ProductName" : "Mishi Kobe Niku",
+    "SupplierID" : 4,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "18 - 500 g pkgs.",
+    "UnitPrice" : 97.0000,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 10,
+    "ProductName" : "Ikura",
+    "SupplierID" : 4,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 200 ml jars",
+    "UnitPrice" : 31.0000,
+    "UnitsInStock" : 31,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 11,
+    "ProductName" : "Queso Cabrales",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "1 kg pkg.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 30,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 12,
+    "ProductName" : "Queso Manchego La Pastora",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 86,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 13,
+    "ProductName" : "Konbu",
+    "SupplierID" : 6,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "2 kg box",
+    "UnitPrice" : 6.0000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 14,
+    "ProductName" : "Tofu",
+    "SupplierID" : 6,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "40 - 100 g pkgs.",
+    "UnitPrice" : 23.2500,
+    "UnitsInStock" : 35,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 15,
+    "ProductName" : "Genen Shouyu",
+    "SupplierID" : 6,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 250 ml bottles",
+    "UnitPrice" : 15.5000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 16,
+    "ProductName" : "Pavlova",
+    "SupplierID" : 7,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "32 - 500 g boxes",
+    "UnitPrice" : 17.4500,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 17,
+    "ProductName" : "Alice Mutton",
+    "SupplierID" : 7,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "20 - 1 kg tins",
+    "UnitPrice" : 39.0000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 18,
+    "ProductName" : "Carnarvon Tigers",
+    "SupplierID" : 7,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "16 kg pkg.",
+    "UnitPrice" : 62.5000,
+    "UnitsInStock" : 42,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 19,
+    "ProductName" : "Teatime Chocolate Biscuits",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 12 pieces",
+    "UnitPrice" : 9.2000,
+    "UnitsInStock" : 25,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 20,
+    "ProductName" : "Sir Rodney's Marmalade",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "30 gift boxes",
+    "UnitPrice" : 81.0000,
+    "UnitsInStock" : 40,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 21,
+    "ProductName" : "Sir Rodney's Scones",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 pkgs. x 4 pieces",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 3,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 22,
+    "ProductName" : "Gustaf's Knäckebröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 500 g pkgs.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 104,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 23,
+    "ProductName" : "Tunnbröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "12 - 250 g pkgs.",
+    "UnitPrice" : 9.0000,
+    "UnitsInStock" : 61,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 24,
+    "ProductName" : "Guaraná Fantástica",
+    "SupplierID" : 10,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 355 ml cans",
+    "UnitPrice" : 4.5000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 25,
+    "ProductName" : "NuNuCa Nuß-Nougat-Creme",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "20 - 450 g glasses",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 26,
+    "ProductName" : "Gumbär Gummibärchen",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 250 g bags",
+    "UnitPrice" : 31.2300,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 27,
+    "ProductName" : "Schoggi Schokolade",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 100 g pieces",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 49,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 28,
+    "ProductName" : "Rössle Sauerkraut",
+    "SupplierID" : 12,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "25 - 825 g cans",
+    "UnitPrice" : 45.6000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 29,
+    "ProductName" : "Thüringer Rostbratwurst",
+    "SupplierID" : 12,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "50 bags x 30 sausgs.",
+    "UnitPrice" : 123.7900,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 30,
+    "ProductName" : "Nord-Ost Matjeshering",
+    "SupplierID" : 13,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "10 - 200 g glasses",
+    "UnitPrice" : 25.8900,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 31,
+    "ProductName" : "Gorgonzola Telino",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "12 - 100 g pkgs",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 32,
+    "ProductName" : "Mascarpone Fabioli",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 32.0000,
+    "UnitsInStock" : 9,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 33,
+    "ProductName" : "Geitost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "500 g",
+    "UnitPrice" : 2.5000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 34,
+    "ProductName" : "Sasquatch Ale",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 111,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 35,
+    "ProductName" : "Steeleye Stout",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 36,
+    "ProductName" : "Inlagd Sill",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 250 g  jars",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 37,
+    "ProductName" : "Gravad lax",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 500 g pkgs.",
+    "UnitPrice" : 26.0000,
+    "UnitsInStock" : 11,
+    "UnitsOnOrder" : 50,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 38,
+    "ProductName" : "Côte de Blaye",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 75 cl bottles",
+    "UnitPrice" : 263.5000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 39,
+    "ProductName" : "Chartreuse verte",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "750 cc per bottle",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 69,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 40,
+    "ProductName" : "Boston Crab Meat",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 4 oz tins",
+    "UnitPrice" : 18.4000,
+    "UnitsInStock" : 123,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 41,
+    "ProductName" : "Jack's New England Clam Chowder",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 12 oz cans",
+    "UnitPrice" : 9.6500,
+    "UnitsInStock" : 85,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 42,
+    "ProductName" : "Singaporean Hokkien Fried Mee",
+    "SupplierID" : 20,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "32 - 1 kg pkgs.",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 43,
+    "ProductName" : "Ipoh Coffee",
+    "SupplierID" : 20,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "16 - 500 g tins",
+    "UnitPrice" : 46.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 44,
+    "ProductName" : "Gula Malacca",
+    "SupplierID" : 20,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "20 - 2 kg bags",
+    "UnitPrice" : 19.4500,
+    "UnitsInStock" : 27,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 45,
+    "ProductName" : "Rogede sild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "1k pkg.",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 5,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 46,
+    "ProductName" : "Spegesild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "4 - 450 g glasses",
+    "UnitPrice" : 12.0000,
+    "UnitsInStock" : 95,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 47,
+    "ProductName" : "Zaanse koeken",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 - 4 oz boxes",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 48,
+    "ProductName" : "Chocolade",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 pkgs.",
+    "UnitPrice" : 12.7500,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 49,
+    "ProductName" : "Maxilaku",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 - 50 g pkgs.",
+    "UnitPrice" : 20.0000,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 60,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 50,
+    "ProductName" : "Valkoinen suklaa",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "12 - 100 g bars",
+    "UnitPrice" : 16.2500,
+    "UnitsInStock" : 65,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 51,
+    "ProductName" : "Manjimup Dried Apples",
+    "SupplierID" : 24,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "50 - 300 g pkgs.",
+    "UnitPrice" : 53.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 52,
+    "ProductName" : "Filo Mix",
+    "SupplierID" : 24,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "16 - 2 kg boxes",
+    "UnitPrice" : 7.0000,
+    "UnitsInStock" : 38,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 53,
+    "ProductName" : "Perth Pasties",
+    "SupplierID" : 24,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "48 pieces",
+    "UnitPrice" : 32.8000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 54,
+    "ProductName" : "Tourtière",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "16 pies",
+    "UnitPrice" : 7.4500,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 55,
+    "ProductName" : "Pâté chinois",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "24 boxes x 2 pies",
+    "UnitPrice" : 24.0000,
+    "UnitsInStock" : 115,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 56,
+    "ProductName" : "Gnocchi di nonna Alice",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 57,
+    "ProductName" : "Ravioli Angelo",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 19.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 58,
+    "ProductName" : "Escargots de Bourgogne",
+    "SupplierID" : 27,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 pieces",
+    "UnitPrice" : 13.2500,
+    "UnitsInStock" : 62,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 59,
+    "ProductName" : "Raclette Courdavault",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 55.0000,
+    "UnitsInStock" : 79,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 60,
+    "ProductName" : "Camembert Pierrot",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "15 - 300 g rounds",
+    "UnitPrice" : 34.0000,
+    "UnitsInStock" : 19,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 61,
+    "ProductName" : "Sirop d'érable",
+    "SupplierID" : 29,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 500 ml bottles",
+    "UnitPrice" : 28.5000,
+    "UnitsInStock" : 113,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 62,
+    "ProductName" : "Tarte au sucre",
+    "SupplierID" : 29,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "48 pies",
+    "UnitPrice" : 49.3000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 63,
+    "ProductName" : "Vegie-spread",
+    "SupplierID" : 7,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "15 - 625 g jars",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 64,
+    "ProductName" : "Wimmers gute Semmelknödel",
+    "SupplierID" : 12,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "20 bags x 4 pieces",
+    "UnitPrice" : 33.2500,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 80,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 65,
+    "ProductName" : "Louisiana Fiery Hot Pepper Sauce",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "32 - 8 oz bottles",
+    "UnitPrice" : 21.0500,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 66,
+    "ProductName" : "Louisiana Hot Spiced Okra",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 8 oz jars",
+    "UnitPrice" : 17.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 100,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 67,
+    "ProductName" : "Laughing Lumberjack Lager",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 52,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 68,
+    "ProductName" : "Scottish Longbreads",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 8 pieces",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 69,
+    "ProductName" : "Gudbrandsdalsost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 kg pkg.",
+    "UnitPrice" : 36.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 70,
+    "ProductName" : "Outback Lager",
+    "SupplierID" : 7,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 355 ml bottles",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 71,
+    "ProductName" : "Flotemysost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 21.5000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 72,
+    "ProductName" : "Mozzarella di Giovanni",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 34.8000,
+    "UnitsInStock" : 14,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 73,
+    "ProductName" : "Röd Kaviar",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 150 g jars",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 101,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 74,
+    "ProductName" : "Longlife Tofu",
+    "SupplierID" : 4,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 20,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 75,
+    "ProductName" : "Rhönbräu Klosterbier",
+    "SupplierID" : 12,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 0.5 l bottles",
+    "UnitPrice" : 7.7500,
+    "UnitsInStock" : 125,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 76,
+    "ProductName" : "Lakkalikööri",
+    "SupplierID" : 23,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "500 ml",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 57,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 77,
+    "ProductName" : "Original Frankfurter grüne Soße",
+    "SupplierID" : 12,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 boxes",
+    "UnitPrice" : 13.0000,
+    "UnitsInStock" : 32,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}]
diff --git a/vue-options-api-demos/listbox/drag-and-drop/main.js b/vue-options-api-demos/listbox/drag-and-drop/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/listbox/drag-and-drop/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/listbox/drag-and-drop/main.vue b/vue-options-api-demos/listbox/drag-and-drop/main.vue
new file mode 100644
index 00000000..807f980d
--- /dev/null
+++ b/vue-options-api-demos/listbox/drag-and-drop/main.vue
@@ -0,0 +1,94 @@
+<template>
+    <div class="example">
+      <div class="demo-section k-content wide">
+        <div>
+          <img
+            :src="arrowleftImage"
+            alt="drag-indicator"
+            class="arrow"
+          />
+          <br />
+          <ListBox
+            :dataItems="notDiscontinued"
+            :text-field="'ProductName'"
+            :draggable="true"
+            @dragstart="handleDragStart"
+            @drop="handleDrop"
+          />
+          <ListBox
+            :dataItems="discontinued"
+            :text-field="'ProductName'"
+            :draggable="true"
+            :style="{ marginLeft: '12px' }"
+            @dragstart="handleDragStart"
+            @drop="handleDrop"
+          />
+          <img
+            :src="arrowrightImage"
+            alt="drag-indicator"
+            class="arrow"
+          />
+        </div>
+      </div>
+    </div>
+  </template>
+  <script>
+  import {
+    ListBox,
+    ListBoxToolbar,
+    processListBoxDragAndDrop,
+  } from '@progress/kendo-vue-listbox';
+  import products from './products.json';
+
+
+  const arrowleftImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/listbox/arrow-left2right.png';
+  const arrowrightImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/listbox/arrow-right2left.png';
+
+  export default {
+    components: {
+      ListBox,
+      ListBoxToolbar,
+    },
+    data() {
+      return {
+        notDiscontinued: products.filter((product) => !product.Discontinued),
+        discontinued: products.filter((product) => product.Discontinued),
+        draggedItem: {},
+        arrowleftImage,
+        arrowrightImage,
+      };
+    },
+    methods: {
+      handleDragStart(e) {
+        this.draggedItem = e.dataItem;
+      },
+      handleDrop(e) {
+        let result = processListBoxDragAndDrop(
+          this.notDiscontinued,
+          this.discontinued,
+          this.draggedItem,
+          e.dataItem,
+          'ProductID'
+        );
+
+        this.notDiscontinued = result.listBoxOneData;
+        this.discontinued = result.listBoxTwoData;
+      },
+    },
+  };
+  </script>
+
+  <style>
+  .arrow {
+    padding: 8px 0 5px 238px;
+  }
+  .example .demo-section {
+    max-width: none;
+    width: 640px;
+  }
+
+  .example .k-listbox {
+    width: 275px;
+    height: 310px;
+  }
+  </style>
diff --git a/vue-options-api-demos/listbox/drag-and-drop/products.json b/vue-options-api-demos/listbox/drag-and-drop/products.json
new file mode 100644
index 00000000..4df1c408
--- /dev/null
+++ b/vue-options-api-demos/listbox/drag-and-drop/products.json
@@ -0,0 +1,1233 @@
+[{
+    "ProductID" : 1,
+    "ProductName" : "Chai",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "10 boxes x 20 bags",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 2,
+    "ProductName" : "Chang",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 3,
+    "ProductName" : "Aniseed Syrup",
+    "SupplierID" : 1,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 550 ml bottles",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 13,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 4,
+    "ProductName" : "Chef Anton's Cajun Seasoning",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "48 - 6 oz jars",
+    "UnitPrice" : 22.0000,
+    "UnitsInStock" : 53,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 5,
+    "ProductName" : "Chef Anton's Gumbo Mix",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "36 boxes",
+    "UnitPrice" : 21.3500,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 6,
+    "ProductName" : "Grandma's Boysenberry Spread",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 8 oz jars",
+    "UnitPrice" : 25.0000,
+    "UnitsInStock" : 120,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 7,
+    "ProductName" : "Uncle Bob's Organic Dried Pears",
+    "SupplierID" : 3,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "12 - 1 lb pkgs.",
+    "UnitPrice" : 30.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 8,
+    "ProductName" : "Northwoods Cranberry Sauce",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 12 oz jars",
+    "UnitPrice" : 40.0000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 9,
+    "ProductName" : "Mishi Kobe Niku",
+    "SupplierID" : 4,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "18 - 500 g pkgs.",
+    "UnitPrice" : 97.0000,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 10,
+    "ProductName" : "Ikura",
+    "SupplierID" : 4,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 200 ml jars",
+    "UnitPrice" : 31.0000,
+    "UnitsInStock" : 31,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 11,
+    "ProductName" : "Queso Cabrales",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "1 kg pkg.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 30,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 12,
+    "ProductName" : "Queso Manchego La Pastora",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 86,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 13,
+    "ProductName" : "Konbu",
+    "SupplierID" : 6,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "2 kg box",
+    "UnitPrice" : 6.0000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 14,
+    "ProductName" : "Tofu",
+    "SupplierID" : 6,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "40 - 100 g pkgs.",
+    "UnitPrice" : 23.2500,
+    "UnitsInStock" : 35,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 15,
+    "ProductName" : "Genen Shouyu",
+    "SupplierID" : 6,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 250 ml bottles",
+    "UnitPrice" : 15.5000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 16,
+    "ProductName" : "Pavlova",
+    "SupplierID" : 7,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "32 - 500 g boxes",
+    "UnitPrice" : 17.4500,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 17,
+    "ProductName" : "Alice Mutton",
+    "SupplierID" : 7,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "20 - 1 kg tins",
+    "UnitPrice" : 39.0000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 18,
+    "ProductName" : "Carnarvon Tigers",
+    "SupplierID" : 7,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "16 kg pkg.",
+    "UnitPrice" : 62.5000,
+    "UnitsInStock" : 42,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 19,
+    "ProductName" : "Teatime Chocolate Biscuits",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 12 pieces",
+    "UnitPrice" : 9.2000,
+    "UnitsInStock" : 25,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 20,
+    "ProductName" : "Sir Rodney's Marmalade",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "30 gift boxes",
+    "UnitPrice" : 81.0000,
+    "UnitsInStock" : 40,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 21,
+    "ProductName" : "Sir Rodney's Scones",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 pkgs. x 4 pieces",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 3,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 22,
+    "ProductName" : "Gustaf's Knäckebröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 500 g pkgs.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 104,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 23,
+    "ProductName" : "Tunnbröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "12 - 250 g pkgs.",
+    "UnitPrice" : 9.0000,
+    "UnitsInStock" : 61,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 24,
+    "ProductName" : "Guaraná Fantástica",
+    "SupplierID" : 10,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 355 ml cans",
+    "UnitPrice" : 4.5000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 25,
+    "ProductName" : "NuNuCa Nuß-Nougat-Creme",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "20 - 450 g glasses",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 26,
+    "ProductName" : "Gumbär Gummibärchen",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 250 g bags",
+    "UnitPrice" : 31.2300,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 27,
+    "ProductName" : "Schoggi Schokolade",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 100 g pieces",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 49,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 28,
+    "ProductName" : "Rössle Sauerkraut",
+    "SupplierID" : 12,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "25 - 825 g cans",
+    "UnitPrice" : 45.6000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 29,
+    "ProductName" : "Thüringer Rostbratwurst",
+    "SupplierID" : 12,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "50 bags x 30 sausgs.",
+    "UnitPrice" : 123.7900,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 30,
+    "ProductName" : "Nord-Ost Matjeshering",
+    "SupplierID" : 13,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "10 - 200 g glasses",
+    "UnitPrice" : 25.8900,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 31,
+    "ProductName" : "Gorgonzola Telino",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "12 - 100 g pkgs",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 32,
+    "ProductName" : "Mascarpone Fabioli",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 32.0000,
+    "UnitsInStock" : 9,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 33,
+    "ProductName" : "Geitost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "500 g",
+    "UnitPrice" : 2.5000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 34,
+    "ProductName" : "Sasquatch Ale",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 111,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 35,
+    "ProductName" : "Steeleye Stout",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 36,
+    "ProductName" : "Inlagd Sill",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 250 g  jars",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 37,
+    "ProductName" : "Gravad lax",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 500 g pkgs.",
+    "UnitPrice" : 26.0000,
+    "UnitsInStock" : 11,
+    "UnitsOnOrder" : 50,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 38,
+    "ProductName" : "Côte de Blaye",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 75 cl bottles",
+    "UnitPrice" : 263.5000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 39,
+    "ProductName" : "Chartreuse verte",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "750 cc per bottle",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 69,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 40,
+    "ProductName" : "Boston Crab Meat",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 4 oz tins",
+    "UnitPrice" : 18.4000,
+    "UnitsInStock" : 123,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 41,
+    "ProductName" : "Jack's New England Clam Chowder",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 12 oz cans",
+    "UnitPrice" : 9.6500,
+    "UnitsInStock" : 85,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 42,
+    "ProductName" : "Singaporean Hokkien Fried Mee",
+    "SupplierID" : 20,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "32 - 1 kg pkgs.",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 43,
+    "ProductName" : "Ipoh Coffee",
+    "SupplierID" : 20,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "16 - 500 g tins",
+    "UnitPrice" : 46.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 44,
+    "ProductName" : "Gula Malacca",
+    "SupplierID" : 20,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "20 - 2 kg bags",
+    "UnitPrice" : 19.4500,
+    "UnitsInStock" : 27,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 45,
+    "ProductName" : "Rogede sild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "1k pkg.",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 5,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 46,
+    "ProductName" : "Spegesild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "4 - 450 g glasses",
+    "UnitPrice" : 12.0000,
+    "UnitsInStock" : 95,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 47,
+    "ProductName" : "Zaanse koeken",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 - 4 oz boxes",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 48,
+    "ProductName" : "Chocolade",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 pkgs.",
+    "UnitPrice" : 12.7500,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 49,
+    "ProductName" : "Maxilaku",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 - 50 g pkgs.",
+    "UnitPrice" : 20.0000,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 60,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 50,
+    "ProductName" : "Valkoinen suklaa",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "12 - 100 g bars",
+    "UnitPrice" : 16.2500,
+    "UnitsInStock" : 65,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 51,
+    "ProductName" : "Manjimup Dried Apples",
+    "SupplierID" : 24,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "50 - 300 g pkgs.",
+    "UnitPrice" : 53.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 52,
+    "ProductName" : "Filo Mix",
+    "SupplierID" : 24,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "16 - 2 kg boxes",
+    "UnitPrice" : 7.0000,
+    "UnitsInStock" : 38,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 53,
+    "ProductName" : "Perth Pasties",
+    "SupplierID" : 24,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "48 pieces",
+    "UnitPrice" : 32.8000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 54,
+    "ProductName" : "Tourtière",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "16 pies",
+    "UnitPrice" : 7.4500,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 55,
+    "ProductName" : "Pâté chinois",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "24 boxes x 2 pies",
+    "UnitPrice" : 24.0000,
+    "UnitsInStock" : 115,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 56,
+    "ProductName" : "Gnocchi di nonna Alice",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 57,
+    "ProductName" : "Ravioli Angelo",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 19.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 58,
+    "ProductName" : "Escargots de Bourgogne",
+    "SupplierID" : 27,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 pieces",
+    "UnitPrice" : 13.2500,
+    "UnitsInStock" : 62,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 59,
+    "ProductName" : "Raclette Courdavault",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 55.0000,
+    "UnitsInStock" : 79,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 60,
+    "ProductName" : "Camembert Pierrot",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "15 - 300 g rounds",
+    "UnitPrice" : 34.0000,
+    "UnitsInStock" : 19,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 61,
+    "ProductName" : "Sirop d'érable",
+    "SupplierID" : 29,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 500 ml bottles",
+    "UnitPrice" : 28.5000,
+    "UnitsInStock" : 113,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 62,
+    "ProductName" : "Tarte au sucre",
+    "SupplierID" : 29,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "48 pies",
+    "UnitPrice" : 49.3000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 63,
+    "ProductName" : "Vegie-spread",
+    "SupplierID" : 7,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "15 - 625 g jars",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 64,
+    "ProductName" : "Wimmers gute Semmelknödel",
+    "SupplierID" : 12,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "20 bags x 4 pieces",
+    "UnitPrice" : 33.2500,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 80,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 65,
+    "ProductName" : "Louisiana Fiery Hot Pepper Sauce",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "32 - 8 oz bottles",
+    "UnitPrice" : 21.0500,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 66,
+    "ProductName" : "Louisiana Hot Spiced Okra",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 8 oz jars",
+    "UnitPrice" : 17.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 100,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 67,
+    "ProductName" : "Laughing Lumberjack Lager",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 52,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 68,
+    "ProductName" : "Scottish Longbreads",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 8 pieces",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 69,
+    "ProductName" : "Gudbrandsdalsost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 kg pkg.",
+    "UnitPrice" : 36.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 70,
+    "ProductName" : "Outback Lager",
+    "SupplierID" : 7,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 355 ml bottles",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 71,
+    "ProductName" : "Flotemysost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 21.5000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 72,
+    "ProductName" : "Mozzarella di Giovanni",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 34.8000,
+    "UnitsInStock" : 14,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 73,
+    "ProductName" : "Röd Kaviar",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 150 g jars",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 101,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 74,
+    "ProductName" : "Longlife Tofu",
+    "SupplierID" : 4,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 20,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 75,
+    "ProductName" : "Rhönbräu Klosterbier",
+    "SupplierID" : 12,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 0.5 l bottles",
+    "UnitPrice" : 7.7500,
+    "UnitsInStock" : 125,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 76,
+    "ProductName" : "Lakkalikööri",
+    "SupplierID" : 23,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "500 ml",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 57,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 77,
+    "ProductName" : "Original Frankfurter grüne Soße",
+    "SupplierID" : 12,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 boxes",
+    "UnitPrice" : 13.0000,
+    "UnitsInStock" : 32,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}]
diff --git a/vue-options-api-demos/listbox/get-started/data.js b/vue-options-api-demos/listbox/get-started/data.js
new file mode 100644
index 00000000..d5d92bba
--- /dev/null
+++ b/vue-options-api-demos/listbox/get-started/data.js
@@ -0,0 +1,30 @@
+export const data = [
+    {
+      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: 'Michael Suyama',
+      selected: false
+    }
+  ];
diff --git a/vue-options-api-demos/listbox/get-started/main.js b/vue-options-api-demos/listbox/get-started/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/listbox/get-started/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/listbox/get-started/main.vue b/vue-options-api-demos/listbox/get-started/main.vue
new file mode 100644
index 00000000..dace38e6
--- /dev/null
+++ b/vue-options-api-demos/listbox/get-started/main.vue
@@ -0,0 +1,101 @@
+<template>
+    <div class="container">
+      <div class="row justify-content-center">
+        <div class="col" style="padding-right: 0">
+          <h6>Employees</h6>
+          <ListBox
+            :style="{ height: '400px', width: '100%' }"
+            :dataItems="employees"
+            :text-field="'name'"
+            :selectedField="SELECTED_FIELD"
+            @itemclick="itemClick"
+            :toolbar="'toolbar'"
+          >
+            <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
+            :style="{ height: '400px', width: '100%' }"
+            :dataItems="developers"
+            :textField="'name'"
+            :selectedField="SELECTED_FIELD"
+            @itemclick="itemClick2"
+          />
+        </div>
+      </div>
+    </div>
+  </template>
+  <script>
+  import {
+    ListBox,
+    ListBoxToolbar,
+    processListBoxData,
+  } from '@progress/kendo-vue-listbox';
+  const SELECTED_FIELD = 'selected';
+  import { data } from './data';
+  export default {
+    components: {
+      ListBox,
+      ListBoxToolbar,
+    },
+    data() {
+      return {
+        SELECTED_FIELD,
+        employees: data,
+        developers: [],
+      };
+    },
+    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;
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/listbox/messages/data.js b/vue-options-api-demos/listbox/messages/data.js
new file mode 100644
index 00000000..d5d92bba
--- /dev/null
+++ b/vue-options-api-demos/listbox/messages/data.js
@@ -0,0 +1,30 @@
+export const data = [
+    {
+      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: 'Michael Suyama',
+      selected: false
+    }
+  ];
diff --git a/vue-options-api-demos/listbox/messages/es.json b/vue-options-api-demos/listbox/messages/es.json
new file mode 100644
index 00000000..5ea0b181
--- /dev/null
+++ b/vue-options-api-demos/listbox/messages/es.json
@@ -0,0 +1,11 @@
+{
+    "listbox": {
+        "moveUp": "Ascender",
+        "moveDown": "Мove hacia abajo",
+        "transferTo": "Transferir a",
+        "transferFrom": "Transferido de",
+        "transferAllTo": "Transferir todo a",
+        "transferAllFrom": "Transferir todo desde",
+        "remove": "Eliminar"
+    }
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/listbox/messages/main.js b/vue-options-api-demos/listbox/messages/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/listbox/messages/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/listbox/messages/main.vue b/vue-options-api-demos/listbox/messages/main.vue
new file mode 100644
index 00000000..7507ce60
--- /dev/null
+++ b/vue-options-api-demos/listbox/messages/main.vue
@@ -0,0 +1,108 @@
+<template>
+    <localization language="es">
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col k-pr-2">
+            <h6>Employees</h6>
+            <ListBox
+              :style="{ height: '400px', width: '100%' }"
+              :dataItems="employees"
+              :text-field="'name'"
+              :selectedField="SELECTED_FIELD"
+              @itemclick="itemClick"
+              :toolbar="'toolbar'"
+            >
+              <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 k-pl-0">
+            <h6>Developers</h6>
+            <ListBox
+              :style="{ height: '400px', width: '100%' }"
+              :dataItems="developers"
+              :textField="'name'"
+              :selectedField="SELECTED_FIELD"
+              @itemclick="itemClick2"
+            />
+          </div>
+        </div>
+      </div>
+    </localization>
+  </template>
+  <script>
+  import {
+    ListBox,
+    ListBoxToolbar,
+    processListBoxData,
+  } from '@progress/kendo-vue-listbox';
+  const SELECTED_FIELD = 'selected';
+  import { data } from './data';
+  import { LocalizationProvider, loadMessages } from '@progress/kendo-vue-intl';
+  import esMessages from './es.json';
+  
+  loadMessages(esMessages, 'es');
+  export default {
+    components: {
+      ListBox,
+      ListBoxToolbar,
+      localization: LocalizationProvider,
+    },
+    data() {
+      return {
+        SELECTED_FIELD,
+        employees: data,
+        developers: [],
+      };
+    },
+    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;
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/listbox/multiple-lists/main.js b/vue-options-api-demos/listbox/multiple-lists/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/listbox/multiple-lists/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/listbox/multiple-lists/main.vue b/vue-options-api-demos/listbox/multiple-lists/main.vue
new file mode 100644
index 00000000..a08c6ad7
--- /dev/null
+++ b/vue-options-api-demos/listbox/multiple-lists/main.vue
@@ -0,0 +1,151 @@
+<template>
+  <div class="container">
+    <div class="row justify-content-between">
+      <div class="col" style="padding-right: 0">
+        <h6>To Do</h6>
+        <ListBox
+          :style="{ height: '350px', width: '100%' }"
+          :dataItems="toDo"
+          :text-field="'name'"
+          :selectedField="SELECTED_FIELD"
+          @itemclick="itemClick1"
+          :toolbar="'toolbar'"
+        >
+          <template v-slot:toolbar>
+            <ListBoxToolbar
+              :tools="toolbarTools"
+              :dataItems="toDo"
+              :dataConnected="inDevelopment"
+              @toolclick="handleToolBarClick1"
+            />
+          </template>
+        </ListBox>
+      </div>
+      <div class="col" style="padding-right: 0; padding-left: 10px">
+        <h6>In Development</h6>
+        <ListBox
+          :style="{ height: '350px', width: '100%' }"
+          :dataItems="inDevelopment"
+          :text-field="'name'"
+          :selectedField="SELECTED_FIELD"
+          @itemclick="itemClick2"
+          :toolbar="'toolbar'"
+        >
+          <template v-slot:toolbar>
+            <ListBoxToolbar
+              :tools="toolbarTools"
+              :dataItems="inDevelopment"
+              :dataConnected="shipped"
+              @toolclick="handleToolBarClick2"
+            />
+          </template>
+        </ListBox>
+      </div>
+      <div class="col" style="padding-right: 0; padding-left: 10px">
+        <h6>Shipped</h6>
+        <ListBox
+          :style="{ height: '350px', width: '100%' }"
+          :dataItems="shipped"
+          :text-field="'name'"
+          :selectedField="SELECTED_FIELD"
+          @itemclick="itemClick3"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  ListBox,
+  ListBoxToolbar,
+  processListBoxData,
+} from '@progress/kendo-vue-listbox';
+const toDo = [
+  { name: 'SpreadSheet', selected: false },
+  { name: 'PivotGrid', selected: false },
+];
+
+const inDevelopment = [
+  { name: 'TileLayout', selected: false },
+  { name: 'MultiColumnComboBox', selected: false },
+];
+
+const shipped = [
+  { name: 'Grid', selected: false },
+  { name: 'Scheduler', selected: false },
+];
+
+const SELECTED_FIELD = 'selected';
+
+const toolbarTools = [
+  'moveUp',
+  'moveDown',
+  'transferTo',
+  'transferFrom',
+  'transferAllTo',
+  'transferAllFrom',
+  'remove',
+];
+export default {
+  components: {
+    ListBox,
+    ListBoxToolbar,
+  },
+  data() {
+    return {
+      toolbarTools,
+      SELECTED_FIELD,
+      toDo,
+      inDevelopment,
+      shipped,
+    };
+  },
+  methods: {
+    itemClick1(e) {
+      this.handleItemClick(e, 'toDo', 'inDevelopment', 'shipped');
+    },
+    itemClick2(e) {
+      this.handleItemClick(e, 'inDevelopment', 'toDo', 'shipped');
+    },
+    itemClick3(e) {
+      this.handleItemClick(e, 'shipped', 'inDevelopment', 'toDo');
+    },
+    handleItemClick(event, data, connectedData, secondConnectedData) {
+      (this[data] = this[data].map((item) => {
+        if (item.name === event.dataItem.name) {
+          item[SELECTED_FIELD] = !item[SELECTED_FIELD];
+        } else if (!event.event.ctrlKey) {
+          item[SELECTED_FIELD] = false;
+        }
+        return item;
+      })),
+        (this[connectedData] = this[connectedData].map((item) => {
+          item[SELECTED_FIELD] = false;
+          return item;
+        })),
+        (this[secondConnectedData] = this[secondConnectedData].map((item) => {
+          item[SELECTED_FIELD] = false;
+          return item;
+        }));
+    },
+    handleToolBarClick1(e) {
+      this.toolBarClick(e, 'toDo', 'inDevelopment');
+    },
+    handleToolBarClick2(e) {
+      this.toolBarClick(e, 'inDevelopment', 'shipped');
+    },
+    toolBarClick(e, from, to) {
+      let toolName = e.toolName || '';
+      let result = processListBoxData(
+        this[from],
+        this[to],
+        toolName,
+        SELECTED_FIELD
+      );
+
+      this[from] = result.listBoxOneData;
+      this[to] = result.listBoxTwoData;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/listbox/overview/data.js b/vue-options-api-demos/listbox/overview/data.js
new file mode 100644
index 00000000..d5d92bba
--- /dev/null
+++ b/vue-options-api-demos/listbox/overview/data.js
@@ -0,0 +1,30 @@
+export const data = [
+    {
+      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: 'Michael Suyama',
+      selected: false
+    }
+  ];
diff --git a/vue-options-api-demos/listbox/overview/main.js b/vue-options-api-demos/listbox/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/listbox/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/listbox/overview/main.vue b/vue-options-api-demos/listbox/overview/main.vue
new file mode 100644
index 00000000..dace38e6
--- /dev/null
+++ b/vue-options-api-demos/listbox/overview/main.vue
@@ -0,0 +1,101 @@
+<template>
+    <div class="container">
+      <div class="row justify-content-center">
+        <div class="col" style="padding-right: 0">
+          <h6>Employees</h6>
+          <ListBox
+            :style="{ height: '400px', width: '100%' }"
+            :dataItems="employees"
+            :text-field="'name'"
+            :selectedField="SELECTED_FIELD"
+            @itemclick="itemClick"
+            :toolbar="'toolbar'"
+          >
+            <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
+            :style="{ height: '400px', width: '100%' }"
+            :dataItems="developers"
+            :textField="'name'"
+            :selectedField="SELECTED_FIELD"
+            @itemclick="itemClick2"
+          />
+        </div>
+      </div>
+    </div>
+  </template>
+  <script>
+  import {
+    ListBox,
+    ListBoxToolbar,
+    processListBoxData,
+  } from '@progress/kendo-vue-listbox';
+  const SELECTED_FIELD = 'selected';
+  import { data } from './data';
+  export default {
+    components: {
+      ListBox,
+      ListBoxToolbar,
+    },
+    data() {
+      return {
+        SELECTED_FIELD,
+        employees: data,
+        developers: [],
+      };
+    },
+    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;
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/listbox/rtl/data.js b/vue-options-api-demos/listbox/rtl/data.js
new file mode 100644
index 00000000..d5d92bba
--- /dev/null
+++ b/vue-options-api-demos/listbox/rtl/data.js
@@ -0,0 +1,30 @@
+export const data = [
+    {
+      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: 'Michael Suyama',
+      selected: false
+    }
+  ];
diff --git a/vue-options-api-demos/listbox/rtl/main.js b/vue-options-api-demos/listbox/rtl/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/listbox/rtl/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/listbox/rtl/main.vue b/vue-options-api-demos/listbox/rtl/main.vue
new file mode 100644
index 00000000..33801b0a
--- /dev/null
+++ b/vue-options-api-demos/listbox/rtl/main.vue
@@ -0,0 +1,103 @@
+<template>
+    <div class="k-rtl">
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col" style="padding-left: 0">
+            <h6 :style="{ textAlign: 'start' }">Employees</h6>
+            <ListBox
+              :style="{ height: '400px', width: '100%' }"
+              :dataItems="employees"
+              :text-field="'name'"
+              :selectedField="SELECTED_FIELD"
+              @itemclick="itemClick"
+              :toolbar="'toolbar'"
+            >
+              <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-left: 0; padding-right: 9px">
+            <h6 :style="{ textAlign: 'start' }">Developers</h6>
+            <ListBox
+              :style="{ height: '400px', width: '100%' }"
+              :dataItems="developers"
+              :textField="'name'"
+              :selectedField="SELECTED_FIELD"
+              @itemclick="itemClick2"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  <script>
+  import {
+    ListBox,
+    ListBoxToolbar,
+    processListBoxData,
+  } from '@progress/kendo-vue-listbox';
+  const SELECTED_FIELD = 'selected';
+  import { data } from './data';
+  export default {
+    components: {
+      ListBox,
+      ListBoxToolbar,
+    },
+    data() {
+      return {
+        SELECTED_FIELD,
+        employees: data,
+        developers: [],
+      };
+    },
+    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;
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/listbox/selection/data.js b/vue-options-api-demos/listbox/selection/data.js
new file mode 100644
index 00000000..d5d92bba
--- /dev/null
+++ b/vue-options-api-demos/listbox/selection/data.js
@@ -0,0 +1,30 @@
+export const data = [
+    {
+      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: 'Michael Suyama',
+      selected: false
+    }
+  ];
diff --git a/vue-options-api-demos/listbox/selection/main.js b/vue-options-api-demos/listbox/selection/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/listbox/selection/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/listbox/selection/main.vue b/vue-options-api-demos/listbox/selection/main.vue
new file mode 100644
index 00000000..247049ff
--- /dev/null
+++ b/vue-options-api-demos/listbox/selection/main.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="container">
+    <div class="row justify-content-center">
+      <div class="col" style="padding-right: 0">
+        <h6>Employees</h6>
+        <ListBox
+          :style="{ height: '400px', width: '100%' }"
+          :dataItems="employees"
+          :text-field="'name'"
+          :selectedField="SELECTED_FIELD"
+          @itemclick="itemClick"
+          :toolbar="'toolbar'"
+        >
+          <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
+          :style="{ height: '400px', width: '100%' }"
+          :dataItems="developers"
+          :textField="'name'"
+          :selectedField="SELECTED_FIELD"
+          @itemclick="itemClick2"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  ListBox,
+  ListBoxToolbar,
+  processListBoxData,
+} from '@progress/kendo-vue-listbox';
+const SELECTED_FIELD = 'selected';
+import { data } from './data';
+export default {
+  components: {
+    ListBox,
+    ListBoxToolbar,
+  },
+  data() {
+    return {
+      SELECTED_FIELD,
+      employees: data,
+      developers: [],
+    };
+  },
+  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.event.ctrlKey && !event.event.metaKey) {
+          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;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/listbox/shared/data.js b/vue-options-api-demos/listbox/shared/data.js
new file mode 100644
index 00000000..d5d92bba
--- /dev/null
+++ b/vue-options-api-demos/listbox/shared/data.js
@@ -0,0 +1,30 @@
+export const data = [
+    {
+      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: 'Michael Suyama',
+      selected: false
+    }
+  ];
diff --git a/vue-options-api-demos/listbox/shared/es.json b/vue-options-api-demos/listbox/shared/es.json
new file mode 100644
index 00000000..5ea0b181
--- /dev/null
+++ b/vue-options-api-demos/listbox/shared/es.json
@@ -0,0 +1,11 @@
+{
+    "listbox": {
+        "moveUp": "Ascender",
+        "moveDown": "Мove hacia abajo",
+        "transferTo": "Transferir a",
+        "transferFrom": "Transferido de",
+        "transferAllTo": "Transferir todo a",
+        "transferAllFrom": "Transferir todo desde",
+        "remove": "Eliminar"
+    }
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/listbox/shared/products.json b/vue-options-api-demos/listbox/shared/products.json
new file mode 100644
index 00000000..4df1c408
--- /dev/null
+++ b/vue-options-api-demos/listbox/shared/products.json
@@ -0,0 +1,1233 @@
+[{
+    "ProductID" : 1,
+    "ProductName" : "Chai",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "10 boxes x 20 bags",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 2,
+    "ProductName" : "Chang",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 3,
+    "ProductName" : "Aniseed Syrup",
+    "SupplierID" : 1,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 550 ml bottles",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 13,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 4,
+    "ProductName" : "Chef Anton's Cajun Seasoning",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "48 - 6 oz jars",
+    "UnitPrice" : 22.0000,
+    "UnitsInStock" : 53,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 5,
+    "ProductName" : "Chef Anton's Gumbo Mix",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "36 boxes",
+    "UnitPrice" : 21.3500,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 6,
+    "ProductName" : "Grandma's Boysenberry Spread",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 8 oz jars",
+    "UnitPrice" : 25.0000,
+    "UnitsInStock" : 120,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 7,
+    "ProductName" : "Uncle Bob's Organic Dried Pears",
+    "SupplierID" : 3,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "12 - 1 lb pkgs.",
+    "UnitPrice" : 30.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 8,
+    "ProductName" : "Northwoods Cranberry Sauce",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 12 oz jars",
+    "UnitPrice" : 40.0000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 9,
+    "ProductName" : "Mishi Kobe Niku",
+    "SupplierID" : 4,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "18 - 500 g pkgs.",
+    "UnitPrice" : 97.0000,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 10,
+    "ProductName" : "Ikura",
+    "SupplierID" : 4,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 200 ml jars",
+    "UnitPrice" : 31.0000,
+    "UnitsInStock" : 31,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 11,
+    "ProductName" : "Queso Cabrales",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "1 kg pkg.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 30,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 12,
+    "ProductName" : "Queso Manchego La Pastora",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 86,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 13,
+    "ProductName" : "Konbu",
+    "SupplierID" : 6,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "2 kg box",
+    "UnitPrice" : 6.0000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 14,
+    "ProductName" : "Tofu",
+    "SupplierID" : 6,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "40 - 100 g pkgs.",
+    "UnitPrice" : 23.2500,
+    "UnitsInStock" : 35,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 15,
+    "ProductName" : "Genen Shouyu",
+    "SupplierID" : 6,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 250 ml bottles",
+    "UnitPrice" : 15.5000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 16,
+    "ProductName" : "Pavlova",
+    "SupplierID" : 7,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "32 - 500 g boxes",
+    "UnitPrice" : 17.4500,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 17,
+    "ProductName" : "Alice Mutton",
+    "SupplierID" : 7,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "20 - 1 kg tins",
+    "UnitPrice" : 39.0000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 18,
+    "ProductName" : "Carnarvon Tigers",
+    "SupplierID" : 7,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "16 kg pkg.",
+    "UnitPrice" : 62.5000,
+    "UnitsInStock" : 42,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 19,
+    "ProductName" : "Teatime Chocolate Biscuits",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 12 pieces",
+    "UnitPrice" : 9.2000,
+    "UnitsInStock" : 25,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 20,
+    "ProductName" : "Sir Rodney's Marmalade",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "30 gift boxes",
+    "UnitPrice" : 81.0000,
+    "UnitsInStock" : 40,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 21,
+    "ProductName" : "Sir Rodney's Scones",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 pkgs. x 4 pieces",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 3,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 22,
+    "ProductName" : "Gustaf's Knäckebröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 500 g pkgs.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 104,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 23,
+    "ProductName" : "Tunnbröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "12 - 250 g pkgs.",
+    "UnitPrice" : 9.0000,
+    "UnitsInStock" : 61,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 24,
+    "ProductName" : "Guaraná Fantástica",
+    "SupplierID" : 10,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 355 ml cans",
+    "UnitPrice" : 4.5000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 25,
+    "ProductName" : "NuNuCa Nuß-Nougat-Creme",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "20 - 450 g glasses",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 26,
+    "ProductName" : "Gumbär Gummibärchen",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 250 g bags",
+    "UnitPrice" : 31.2300,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 27,
+    "ProductName" : "Schoggi Schokolade",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 100 g pieces",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 49,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 28,
+    "ProductName" : "Rössle Sauerkraut",
+    "SupplierID" : 12,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "25 - 825 g cans",
+    "UnitPrice" : 45.6000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 29,
+    "ProductName" : "Thüringer Rostbratwurst",
+    "SupplierID" : 12,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "50 bags x 30 sausgs.",
+    "UnitPrice" : 123.7900,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 30,
+    "ProductName" : "Nord-Ost Matjeshering",
+    "SupplierID" : 13,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "10 - 200 g glasses",
+    "UnitPrice" : 25.8900,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 31,
+    "ProductName" : "Gorgonzola Telino",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "12 - 100 g pkgs",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 32,
+    "ProductName" : "Mascarpone Fabioli",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 32.0000,
+    "UnitsInStock" : 9,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 33,
+    "ProductName" : "Geitost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "500 g",
+    "UnitPrice" : 2.5000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 34,
+    "ProductName" : "Sasquatch Ale",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 111,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 35,
+    "ProductName" : "Steeleye Stout",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 36,
+    "ProductName" : "Inlagd Sill",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 250 g  jars",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 37,
+    "ProductName" : "Gravad lax",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 500 g pkgs.",
+    "UnitPrice" : 26.0000,
+    "UnitsInStock" : 11,
+    "UnitsOnOrder" : 50,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 38,
+    "ProductName" : "Côte de Blaye",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 75 cl bottles",
+    "UnitPrice" : 263.5000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 39,
+    "ProductName" : "Chartreuse verte",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "750 cc per bottle",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 69,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 40,
+    "ProductName" : "Boston Crab Meat",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 4 oz tins",
+    "UnitPrice" : 18.4000,
+    "UnitsInStock" : 123,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 41,
+    "ProductName" : "Jack's New England Clam Chowder",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 12 oz cans",
+    "UnitPrice" : 9.6500,
+    "UnitsInStock" : 85,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 42,
+    "ProductName" : "Singaporean Hokkien Fried Mee",
+    "SupplierID" : 20,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "32 - 1 kg pkgs.",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 43,
+    "ProductName" : "Ipoh Coffee",
+    "SupplierID" : 20,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "16 - 500 g tins",
+    "UnitPrice" : 46.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 44,
+    "ProductName" : "Gula Malacca",
+    "SupplierID" : 20,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "20 - 2 kg bags",
+    "UnitPrice" : 19.4500,
+    "UnitsInStock" : 27,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 45,
+    "ProductName" : "Rogede sild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "1k pkg.",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 5,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 46,
+    "ProductName" : "Spegesild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "4 - 450 g glasses",
+    "UnitPrice" : 12.0000,
+    "UnitsInStock" : 95,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 47,
+    "ProductName" : "Zaanse koeken",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 - 4 oz boxes",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 48,
+    "ProductName" : "Chocolade",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 pkgs.",
+    "UnitPrice" : 12.7500,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 49,
+    "ProductName" : "Maxilaku",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 - 50 g pkgs.",
+    "UnitPrice" : 20.0000,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 60,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 50,
+    "ProductName" : "Valkoinen suklaa",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "12 - 100 g bars",
+    "UnitPrice" : 16.2500,
+    "UnitsInStock" : 65,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 51,
+    "ProductName" : "Manjimup Dried Apples",
+    "SupplierID" : 24,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "50 - 300 g pkgs.",
+    "UnitPrice" : 53.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 52,
+    "ProductName" : "Filo Mix",
+    "SupplierID" : 24,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "16 - 2 kg boxes",
+    "UnitPrice" : 7.0000,
+    "UnitsInStock" : 38,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 53,
+    "ProductName" : "Perth Pasties",
+    "SupplierID" : 24,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "48 pieces",
+    "UnitPrice" : 32.8000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 54,
+    "ProductName" : "Tourtière",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "16 pies",
+    "UnitPrice" : 7.4500,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 55,
+    "ProductName" : "Pâté chinois",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "24 boxes x 2 pies",
+    "UnitPrice" : 24.0000,
+    "UnitsInStock" : 115,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 56,
+    "ProductName" : "Gnocchi di nonna Alice",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 57,
+    "ProductName" : "Ravioli Angelo",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 19.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 58,
+    "ProductName" : "Escargots de Bourgogne",
+    "SupplierID" : 27,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 pieces",
+    "UnitPrice" : 13.2500,
+    "UnitsInStock" : 62,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 59,
+    "ProductName" : "Raclette Courdavault",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 55.0000,
+    "UnitsInStock" : 79,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 60,
+    "ProductName" : "Camembert Pierrot",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "15 - 300 g rounds",
+    "UnitPrice" : 34.0000,
+    "UnitsInStock" : 19,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 61,
+    "ProductName" : "Sirop d'érable",
+    "SupplierID" : 29,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 500 ml bottles",
+    "UnitPrice" : 28.5000,
+    "UnitsInStock" : 113,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 62,
+    "ProductName" : "Tarte au sucre",
+    "SupplierID" : 29,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "48 pies",
+    "UnitPrice" : 49.3000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 63,
+    "ProductName" : "Vegie-spread",
+    "SupplierID" : 7,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "15 - 625 g jars",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 64,
+    "ProductName" : "Wimmers gute Semmelknödel",
+    "SupplierID" : 12,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "20 bags x 4 pieces",
+    "UnitPrice" : 33.2500,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 80,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 65,
+    "ProductName" : "Louisiana Fiery Hot Pepper Sauce",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "32 - 8 oz bottles",
+    "UnitPrice" : 21.0500,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 66,
+    "ProductName" : "Louisiana Hot Spiced Okra",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 8 oz jars",
+    "UnitPrice" : 17.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 100,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 67,
+    "ProductName" : "Laughing Lumberjack Lager",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 52,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 68,
+    "ProductName" : "Scottish Longbreads",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 8 pieces",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 69,
+    "ProductName" : "Gudbrandsdalsost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 kg pkg.",
+    "UnitPrice" : 36.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 70,
+    "ProductName" : "Outback Lager",
+    "SupplierID" : 7,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 355 ml bottles",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 71,
+    "ProductName" : "Flotemysost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 21.5000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 72,
+    "ProductName" : "Mozzarella di Giovanni",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 34.8000,
+    "UnitsInStock" : 14,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 73,
+    "ProductName" : "Röd Kaviar",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 150 g jars",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 101,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 74,
+    "ProductName" : "Longlife Tofu",
+    "SupplierID" : 4,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 20,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 75,
+    "ProductName" : "Rhönbräu Klosterbier",
+    "SupplierID" : 12,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 0.5 l bottles",
+    "UnitPrice" : 7.7500,
+    "UnitsInStock" : 125,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 76,
+    "ProductName" : "Lakkalikööri",
+    "SupplierID" : 23,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "500 ml",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 57,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 77,
+    "ProductName" : "Original Frankfurter grüne Soße",
+    "SupplierID" : 12,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 boxes",
+    "UnitPrice" : 13.0000,
+    "UnitsInStock" : 32,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}]
diff --git a/vue-options-api-demos/listview/default-scrolling/employees.js b/vue-options-api-demos/listview/default-scrolling/employees.js
new file mode 100644
index 00000000..88c947bb
--- /dev/null
+++ b/vue-options-api-demos/listview/default-scrolling/employees.js
@@ -0,0 +1,1402 @@
+export const employees = [
+    {
+        id: '848e6002-8a92-447d-951b-1ffd5e695578',
+        full_name: 'Sig Jeannel',
+        job_title: 'Human Resources Assistant III',
+        country: 'US',
+        is_online: true,
+        rating: 3,
+        target: 100,
+        budget: 47601,
+        phone: '(936) 9429601',
+        address: '138 Buhler Avenue',
+        img_id: 1,
+        gender: 'M',
+    },
+    {
+        id: '19d18d40-0e64-4837-9420-92130a0ed253',
+        full_name: 'Shelden Greyes',
+        job_title: 'Operator',
+        country: 'GB',
+        is_online: true,
+        rating: 5,
+        target: 40,
+        budget: 12253,
+        phone: '(343) 6656271',
+        address: '2 Waxwing Point',
+        img_id: 2,
+        gender: 'M',
+    },
+    {
+        id: 'bebdc6eb-9179-484a-917d-2e16a23bfdfe',
+        full_name: 'Megen Cody',
+        job_title: 'Operator',
+        country: 'BR',
+        is_online: true,
+        rating: 1,
+        target: 66,
+        budget: 96183,
+        phone: '(178) 2336256',
+        address: '4082 Stephen Court',
+        img_id: 6,
+        gender: 'F',
+    },
+    {
+        id: '38b08b88-e482-46fc-8976-83590c02ec23',
+        full_name: 'Clevey Thursfield',
+        job_title: 'VP Quality Control',
+        country: 'BR',
+        is_online: true,
+        rating: 2,
+        target: 58,
+        budget: 54936,
+        phone: '(277) 7415010',
+        address: '1563 Glacier Hill Parkway',
+        img_id: 5,
+        gender: 'M',
+    },
+    {
+        id: '2aac53f8-b72d-4629-9082-6d8239a8fecf',
+        full_name: 'Ruthi Baldini',
+        job_title: 'Data Coordiator',
+        country: 'BR',
+        is_online: true,
+        rating: 3,
+        target: 37,
+        budget: 46572,
+        phone: '(766) 5691615',
+        address: '6 Laurel Avenue',
+        img_id: 8,
+        gender: 'F',
+    },
+    {
+        id: '1aa789e5-de01-406e-a2ee-cc5ce20f7e34',
+        full_name: 'Annecorinne Morter',
+        job_title: 'Professor',
+        country: 'FR',
+        is_online: false,
+        rating: 2,
+        target: 35,
+        budget: 37198,
+        phone: '(807) 2524830',
+        address: '106 Green Street',
+        img_id: 3,
+        gender: 'F',
+    },
+    {
+        id: 'd2ff1b02-3808-44aa-9056-3b5df34bf865',
+        full_name: 'Gracia Punyer',
+        job_title: 'Assistant Manager',
+        country: 'ES',
+        is_online: true,
+        rating: 4,
+        target: 64,
+        budget: 84752,
+        phone: '(515) 9749536',
+        address: '69 Brentwood Alley',
+        img_id: 2,
+        gender: 'F',
+    },
+    {
+        id: '26b2b760-27e8-47a6-81c2-07870d1b2b30',
+        full_name: 'Duky Hurring',
+        job_title: 'Account Executive',
+        country: 'BR',
+        is_online: false,
+        rating: 3,
+        target: 61,
+        budget: -1266,
+        phone: '(897) 7202034',
+        address: '39 Morning Circle',
+        img_id: 3,
+        gender: 'M',
+    },
+    {
+        id: '91c6b652-4206-4a0c-bac6-dc21283a72d7',
+        full_name: 'Briana Shemelt',
+        job_title: 'Professor',
+        country: 'US',
+        is_online: false,
+        rating: 3,
+        target: 63,
+        budget: -9308,
+        phone: '(205) 2560799',
+        address: '11 Walton Court',
+        img_id: 2,
+        gender: 'F',
+    },
+    {
+        id: '1e8289dc-2ef3-4045-ad6b-786d00368427',
+        full_name: 'Lexis Mostin',
+        job_title: 'Analyst Programmer',
+        country: 'FR',
+        is_online: true,
+        rating: 4,
+        target: 81,
+        budget: 38153,
+        phone: '(903) 8388089',
+        address: '38547 Westend Way',
+        img_id: 4,
+        gender: 'F',
+    },
+    {
+        id: '797387bd-c247-48b3-97b6-5e75791f8809',
+        full_name: 'Felizio Gooda',
+        job_title: 'GIS Technical Architect',
+        country: 'DE',
+        is_online: true,
+        rating: 3,
+        target: 89,
+        budget: 81585,
+        phone: '(372) 2389397',
+        address: '9 Summer Ridge Circle',
+        img_id: 2,
+        gender: 'M',
+    },
+    {
+        id: '24c541b0-4978-4072-84d0-abe94fcd0756',
+        full_name: 'Aubry Oxberry',
+        job_title: 'Financial Advisor',
+        country: 'BR',
+        is_online: false,
+        rating: 2,
+        target: 3,
+        budget: -6095,
+        phone: '(665) 4176083',
+        address: '06 Lerdahl Point',
+        img_id: 10,
+        gender: 'F',
+    },
+    {
+        id: 'd3416440-7411-42cc-a913-7dd319ca8311',
+        full_name: 'Orly Glasbey',
+        job_title: 'Environmental Tech',
+        country: 'BR',
+        is_online: true,
+        rating: 5,
+        target: 63,
+        budget: 63945,
+        phone: '(449) 8482879',
+        address: '4035 Porter Parkway',
+        img_id: 6,
+        gender: 'F',
+    },
+    {
+        id: '139066b5-60c5-4cf5-9afe-fb4e5558b087',
+        full_name: 'Stephanus Culp',
+        job_title: 'Cost Accountant',
+        country: 'BR',
+        is_online: false,
+        rating: 2,
+        target: 60,
+        budget: 10613,
+        phone: '(148) 3124030',
+        address: '57028 Moland Terrace',
+        img_id: 8,
+        gender: 'M',
+    },
+    {
+        id: 'eb844971-b97d-4f79-bd5a-a266fcfaaf70',
+        full_name: 'Roseanna Janecek',
+        job_title: 'Database Administrator IV',
+        country: 'FR',
+        is_online: false,
+        rating: 4,
+        target: 97,
+        budget: 77351,
+        phone: '(125) 4421623',
+        address: '21973 Beilfuss Alley',
+        img_id: 4,
+        gender: 'F',
+    },
+    {
+        id: '5cb391fe-4855-445c-a8b8-617c04d1d999',
+        full_name: 'Weidar McCombe',
+        job_title: 'Civil Engineer',
+        country: 'FR',
+        is_online: true,
+        rating: 1,
+        target: 77,
+        budget: 35924,
+        phone: '(488) 7911627',
+        address: '7 Dahle Terrace',
+        img_id: 1,
+        gender: 'M',
+    },
+    {
+        id: '4ba9ad7e-d8b7-40e7-b8cd-67a8e743a249',
+        full_name: 'Evelin Spirritt',
+        job_title: 'Analyst Programmer',
+        country: 'BR',
+        is_online: false,
+        rating: 2,
+        target: 18,
+        budget: 58552,
+        phone: '(821) 9538078',
+        address: '89418 Knutson Pass',
+        img_id: 1,
+        gender: 'M',
+    },
+    {
+        id: 'e4a31407-39d1-4ab7-aad1-4e026a8c42fa',
+        full_name: 'Andria Helbeck',
+        job_title: 'Nurse Practicioner',
+        country: 'BR',
+        is_online: true,
+        rating: 4,
+        target: 53,
+        budget: 72526,
+        phone: '(387) 9614638',
+        address: '8589 Vernon Drive',
+        img_id: 8,
+        gender: 'F',
+    },
+    {
+        id: 'cd050499-dbf1-4a43-86ab-54feaacef401',
+        full_name: 'Mariellen Ravelus',
+        job_title: 'Systems Administrator I',
+        country: 'DE',
+        is_online: true,
+        rating: 2,
+        target: 22,
+        budget: -6659,
+        phone: '(300) 6741661',
+        address: '707 Gale Hill',
+        img_id: 9,
+        gender: 'F',
+    },
+    {
+        id: 'fda1c419-c0b8-4278-94b0-2ebef6bda164',
+        full_name: 'Corri Pergens',
+        job_title: 'Help Desk Operator',
+        country: 'BR',
+        is_online: true,
+        rating: 2,
+        target: 74,
+        budget: 12376,
+        phone: '(769) 7145603',
+        address: '856 Forest Crossing',
+        img_id: 3,
+        gender: 'F',
+    },
+    {
+        id: '4a962db9-136e-4fcc-a683-2f961e27fb6e',
+        full_name: 'Friedrick Macknish',
+        job_title: 'Human Resources Assistant II',
+        country: 'FR',
+        is_online: true,
+        rating: 2,
+        target: 38,
+        budget: 97848,
+        phone: '(196) 4156385',
+        address: '157 Talisman Trail',
+        img_id: 9,
+        gender: 'M',
+    },
+    {
+        id: 'fa47e456-83c4-4fdc-b57b-07effb279967',
+        full_name: 'Georgette Trevorrow',
+        job_title: 'VP Accounting',
+        country: 'FR',
+        is_online: true,
+        rating: 3,
+        target: 3,
+        budget: 17327,
+        phone: '(319) 1412549',
+        address: '07 Marquette Point',
+        img_id: 3,
+        gender: 'F',
+    },
+    {
+        id: '67656444-fbcd-4813-84e7-1bdcd82f803e',
+        full_name: 'Vanya Goalby',
+        job_title: 'Senior Cost Accountant',
+        country: 'FR',
+        is_online: false,
+        rating: 2,
+        target: 77,
+        budget: 33584,
+        phone: '(496) 7538982',
+        address: '2192 Iowa Lane',
+        img_id: 6,
+        gender: 'F',
+    },
+    {
+        id: '05c098c2-9617-4e66-928a-e29b97297138',
+        full_name: 'Abel Ansell',
+        job_title: 'Actuary',
+        country: 'US',
+        is_online: false,
+        rating: 4,
+        target: 52,
+        budget: 12312,
+        phone: '(571) 9908377',
+        address: '4355 Iowa Parkway',
+        img_id: 4,
+        gender: 'M',
+    },
+    {
+        id: '3b263e99-51bf-4461-bb20-d4303d326cd9',
+        full_name: 'Odille Barus',
+        job_title: 'Speech Pathologist',
+        country: 'FR',
+        is_online: true,
+        rating: 4,
+        target: 60,
+        budget: 46911,
+        phone: '(974) 1137672',
+        address: '496 Lotheville Avenue',
+        img_id: 8,
+        gender: 'F',
+    },
+    {
+        id: 'c09ddfaf-569e-4a75-8e53-1be27cf25927',
+        full_name: 'Rudolf Consadine',
+        job_title: 'Structural Analysis Engineer',
+        country: 'FR',
+        is_online: true,
+        rating: 4,
+        target: 20,
+        budget: 94258,
+        phone: '(450) 7612220',
+        address: '93 Thierer Park',
+        img_id: 6,
+        gender: 'M',
+    },
+    {
+        id: 'a48abbc9-6143-4f77-a720-0b76ad862a9a',
+        full_name: 'Christabel Bick',
+        job_title: 'Engineer III',
+        country: 'FR',
+        is_online: true,
+        rating: 5,
+        target: 0,
+        budget: 65359,
+        phone: '(361) 5159566',
+        address: '191 Bunting Pass',
+        img_id: 5,
+        gender: 'F',
+    },
+    {
+        id: 'd8816aee-4230-4392-a045-0a9c297451f7',
+        full_name: 'Lancelot Tanzer',
+        job_title: 'Senior Developer',
+        country: 'US',
+        is_online: true,
+        rating: 5,
+        target: 80,
+        budget: 13246,
+        phone: '(502) 3949900',
+        address: '4287 Corben Plaza',
+        img_id: 8,
+        gender: 'M',
+    },
+    {
+        id: '9f5af32c-fb0d-4449-a658-f2c7f182b63a',
+        full_name: 'Bink Byk',
+        job_title: 'Software Engineer I',
+        country: 'FR',
+        is_online: false,
+        rating: 3,
+        target: 17,
+        budget: 56472,
+        phone: '(475) 9070061',
+        address: '075 Eggendart Avenue',
+        img_id: 9,
+        gender: 'M',
+    },
+    {
+        id: 'dbd7f48a-6540-4560-bb7c-cd60456b55b8',
+        full_name: 'Rhys Pheazey',
+        job_title: 'Speech Pathologist',
+        country: 'BR',
+        is_online: false,
+        rating: 5,
+        target: 98,
+        budget: 62483,
+        phone: '(365) 8904529',
+        address: '987 Carioca Lane',
+        img_id: 9,
+        gender: 'M',
+    },
+    {
+        id: '844189fe-d36e-4e06-9761-932259701fc8',
+        full_name: 'Lyndell Howieson',
+        job_title: 'Speech Pathologist',
+        country: 'DE',
+        is_online: true,
+        rating: 2,
+        target: 82,
+        budget: 16694,
+        phone: '(461) 3130038',
+        address: '9 Pennsylvania Crossing',
+        img_id: 8,
+        gender: 'F',
+    },
+    {
+        id: '5544d9d5-40ea-4e5a-8fb8-f5016b313b8f',
+        full_name: 'Cassey Fitchell',
+        job_title: 'Software Engineer III',
+        country: 'FR',
+        is_online: true,
+        rating: 2,
+        target: 10,
+        budget: 91253,
+        phone: '(985) 5060547',
+        address: '652 Merry Place',
+        img_id: 9,
+        gender: 'F',
+    },
+    {
+        id: '1c669764-3cff-424a-b7e4-e7711d6c7d6c',
+        full_name: 'Coralyn Steljes',
+        job_title: 'Accounting Assistant III',
+        country: 'FR',
+        is_online: false,
+        rating: 2,
+        target: 81,
+        budget: -9871,
+        phone: '(760) 5696853',
+        address: '4 Norway Maple Pass',
+        img_id: 9,
+        gender: 'F',
+    },
+    {
+        id: '4cc649dc-7f85-40ab-bc59-950f37268a65',
+        full_name: 'Bruis Creavin',
+        job_title: 'Nuclear Power Engineer',
+        country: 'BR',
+        is_online: false,
+        rating: 1,
+        target: 59,
+        budget: -5798,
+        phone: '(570) 8801169',
+        address: '71 Carioca Park',
+        img_id: 6,
+        gender: 'M',
+    },
+    {
+        id: '8c9505f1-e8f8-4ba6-8c9a-5a1d089c6f09',
+        full_name: 'Adrianne Peery',
+        job_title: 'Chief Design Engineer',
+        country: 'FR',
+        is_online: false,
+        rating: 2,
+        target: 2,
+        budget: 56575,
+        phone: '(793) 1143493',
+        address: '3 2nd Drive',
+        img_id: 7,
+        gender: 'F',
+    },
+    {
+        id: 'ced0905e-44ac-4317-a203-76994e53a751',
+        full_name: 'Port Gerauld',
+        job_title: 'Senior Cost Accountant',
+        country: 'FR',
+        is_online: true,
+        rating: 2,
+        target: 27,
+        budget: 97919,
+        phone: '(155) 5488067',
+        address: '9 High Crossing Center',
+        img_id: 5,
+        gender: 'M',
+    },
+    {
+        id: 'f0bcc7cd-999e-4611-a04f-7bdc16bc6160',
+        full_name: 'Boy Antoszewski',
+        job_title: 'VP Accounting',
+        country: 'GB',
+        is_online: true,
+        rating: 2,
+        target: 11,
+        budget: 74779,
+        phone: '(715) 9192627',
+        address: '3773 Hazelcrest Road',
+        img_id: 6,
+        gender: 'M',
+    },
+    {
+        id: '322540e3-b72e-4b7d-ae4a-d927911340b7',
+        full_name: 'Gib Yakebowitch',
+        job_title: 'Marketing Assistant',
+        country: 'BR',
+        is_online: false,
+        rating: 5,
+        target: 57,
+        budget: 89028,
+        phone: '(923) 6953600',
+        address: '7 Mariners Cove Point',
+        img_id: 8,
+        gender: 'M',
+    },
+    {
+        id: 'b1ed798d-6177-4a27-9571-2e02be932214',
+        full_name: 'Minerva Gilders',
+        job_title: 'Administrative Officer',
+        country: 'BR',
+        is_online: false,
+        rating: 3,
+        target: 54,
+        budget: 32267,
+        phone: '(773) 8863232',
+        address: '82 Annamark Way',
+        img_id: 4,
+        gender: 'F',
+    },
+    {
+        id: 'd26bcf84-a8b4-471c-a582-2de64d7e7715',
+        full_name: 'Wait Peperell',
+        job_title: 'Web Designer III',
+        country: 'US',
+        is_online: true,
+        rating: 4,
+        target: 94,
+        budget: 72251,
+        phone: '(419) 5806752',
+        address: '0355 Petterle Avenue',
+        img_id: 8,
+        gender: 'M',
+    },
+    {
+        id: 'da813d45-bd3b-4bfa-abdd-e12050a5da14',
+        full_name: 'Ailsun Esmead',
+        job_title: 'Software Test Engineer III',
+        country: 'FR',
+        is_online: true,
+        rating: 1,
+        target: 12,
+        budget: 69596,
+        phone: '(852) 7039628',
+        address: '0 Lunder Crossing',
+        img_id: 8,
+        gender: 'F',
+    },
+    {
+        id: '944d8752-ef63-47bc-8db0-f40808d50b15',
+        full_name: 'Vallie Van der Velde',
+        job_title: 'Nurse',
+        country: 'GB',
+        is_online: true,
+        rating: 3,
+        target: 89,
+        budget: 19530,
+        phone: '(331) 7690832',
+        address: '2 Almo Lane',
+        img_id: 4,
+        gender: 'F',
+    },
+    {
+        id: '3d2f991c-58ef-436d-912e-49496fd2065c',
+        full_name: 'Dov Amber',
+        job_title: 'Sales Representative',
+        country: 'FR',
+        is_online: false,
+        rating: 4,
+        target: 55,
+        budget: 61106,
+        phone: '(793) 4768356',
+        address: '4 Rockefeller Street',
+        img_id: 3,
+        gender: 'M',
+    },
+    {
+        id: '29b406e9-ca20-45cb-8630-6df3a632276a',
+        full_name: 'Tedie Alu',
+        job_title: 'Business Systems Analyst',
+        country: 'FR',
+        is_online: false,
+        rating: 1,
+        target: 76,
+        budget: 3114,
+        phone: '(602) 5831373',
+        address: '28 Claremont Plaza',
+        img_id: 5,
+        gender: 'M',
+    },
+    {
+        id: '767de27a-421c-4147-a552-26ac56390339',
+        full_name: 'Tally Rizzi',
+        job_title: 'Civil Engineer',
+        country: 'US',
+        is_online: false,
+        rating: 1,
+        target: 5,
+        budget: 78575,
+        phone: '(302) 6856300',
+        address: '1 Roth Park',
+        img_id: 10,
+        gender: 'M',
+    },
+    {
+        id: '2b6e6902-11b5-4ca7-8a59-c32b3f57533b',
+        full_name: 'Ilise Lewnden',
+        job_title: 'Database Administrator I',
+        country: 'BR',
+        is_online: false,
+        rating: 4,
+        target: 33,
+        budget: -1059,
+        phone: '(659) 8660881',
+        address: '19 Stuart Alley',
+        img_id: 2,
+        gender: 'F',
+    },
+    {
+        id: 'c891e87f-b19b-4cb5-8902-b19c59e37494',
+        full_name: 'Farr Penwright',
+        job_title: 'Senior Editor',
+        country: 'US',
+        is_online: true,
+        rating: 3,
+        target: 82,
+        budget: 30505,
+        phone: '(505) 3900066',
+        address: '9200 Karstens Crossing',
+        img_id: 6,
+        gender: 'M',
+    },
+    {
+        id: '65821428-adc7-4743-9dd8-cf62400e62f2',
+        full_name: 'Chantal Bidgod',
+        job_title: 'VP Sales',
+        country: 'BR',
+        is_online: false,
+        rating: 3,
+        target: 62,
+        budget: 25742,
+        phone: '(746) 3962702',
+        address: '8807 Kinsman Drive',
+        img_id: 2,
+        gender: 'F',
+    },
+    {
+        id: 'f42907e0-d92c-4fb0-b886-2e84331ffe28',
+        full_name: 'Johanna Bergin',
+        job_title: 'Electrical Engineer',
+        country: 'BR',
+        is_online: false,
+        rating: 2,
+        target: 54,
+        budget: 25864,
+        phone: '(720) 6442547',
+        address: '93166 Spohn Court',
+        img_id: 3,
+        gender: 'F',
+    },
+    {
+        id: '4531be30-eec7-477f-bdc5-88acb8d902af',
+        full_name: 'Padriac Syphas',
+        job_title: 'Marketing Assistant',
+        country: 'BR',
+        is_online: true,
+        rating: 1,
+        target: 50,
+        budget: 20879,
+        phone: '(606) 9062546',
+        address: '50465 Buena Vista Plaza',
+        img_id: 5,
+        gender: 'M',
+    },
+    {
+        id: '4f0ab8f6-7a36-4a5c-a513-d5495223a9cd',
+        full_name: 'Garey De Maria',
+        job_title: 'Operator',
+        country: 'US',
+        is_online: true,
+        rating: 2,
+        target: 54,
+        budget: 94251,
+        phone: '(972) 1133958',
+        address: '24 Maple Wood Terrace',
+        img_id: 9,
+        gender: 'M',
+    },
+    {
+        id: '13556e73-d43a-485d-8603-cbf1769bd0ac',
+        full_name: 'Glenn Thorwarth',
+        job_title: 'Developer IV',
+        country: 'BR',
+        is_online: false,
+        rating: 5,
+        target: 39,
+        budget: 33511,
+        phone: '(394) 3115946',
+        address: '8 Dryden Park',
+        img_id: 1,
+        gender: 'M',
+    },
+    {
+        id: 'c8389213-a2cd-4bb8-ba99-9c29e9b70881',
+        full_name: 'Bron Crosson',
+        job_title: 'GIS Technical Architect',
+        country: 'FR',
+        is_online: true,
+        rating: 2,
+        target: 80,
+        budget: 62081,
+        phone: '(686) 7934926',
+        address: '974 Mayfield Place',
+        img_id: 9,
+        gender: 'M',
+    },
+    {
+        id: 'cd233a4e-0315-496d-8f5f-4c8787b0f1ba',
+        full_name: 'Garey Malecky',
+        job_title: 'Account Executive',
+        country: 'BR',
+        is_online: false,
+        rating: 5,
+        target: 51,
+        budget: 76354,
+        phone: '(304) 6324519',
+        address: '3 Paget Court',
+        img_id: 9,
+        gender: 'M',
+    },
+    {
+        id: '339838eb-99dc-4fc0-8e18-060dbcf6bf78',
+        full_name: 'Elisabet Kimblin',
+        job_title: 'Automation Specialist I',
+        country: 'US',
+        is_online: true,
+        rating: 3,
+        target: 35,
+        budget: 26755,
+        phone: '(904) 3334563',
+        address: '75 Buell Court',
+        img_id: 1,
+        gender: 'F',
+    },
+    {
+        id: '90a03a5a-1f16-4721-8c56-af4bb89a1f57',
+        full_name: 'Berk Uttley',
+        job_title: 'Health Coach IV',
+        country: 'FR',
+        is_online: false,
+        rating: 4,
+        target: 58,
+        budget: 82064,
+        phone: '(200) 2124940',
+        address: '4 Mockingbird Trail',
+        img_id: 8,
+        gender: 'M',
+    },
+    {
+        id: 'ce5ba778-43eb-4658-a6bd-56f04e6f125f',
+        full_name: 'Kenny Clackers',
+        job_title: 'Assistant Manager',
+        country: 'FR',
+        is_online: true,
+        rating: 4,
+        target: 37,
+        budget: 47477,
+        phone: '(926) 3235464',
+        address: '53315 Bashford Lane',
+        img_id: 2,
+        gender: 'M',
+    },
+    {
+        id: 'df3dffe4-6fb4-4a9c-8512-71f7cb508180',
+        full_name: 'Rickard Pingston',
+        job_title: 'Environmental Specialist',
+        country: 'BR',
+        is_online: true,
+        rating: 5,
+        target: 72,
+        budget: 94173,
+        phone: '(902) 4658383',
+        address: '8 Mesta Court',
+        img_id: 2,
+        gender: 'M',
+    },
+    {
+        id: '2757a92d-5eed-4215-818f-fdf15b6b27d0',
+        full_name: 'Hobard Clabburn',
+        job_title: 'Systems Administrator I',
+        country: 'BR',
+        is_online: true,
+        rating: 2,
+        target: 37,
+        budget: 66166,
+        phone: '(711) 6587550',
+        address: '29796 Mcbride Court',
+        img_id: 2,
+        gender: 'M',
+    },
+    {
+        id: '71ebd82a-f9f2-48ea-ada4-ce8db424df64',
+        full_name: 'Uri Champken',
+        job_title: 'Software Test Engineer IV',
+        country: 'BR',
+        is_online: false,
+        rating: 1,
+        target: 39,
+        budget: 65176,
+        phone: '(514) 1953919',
+        address: '78 Rowland Alley',
+        img_id: 6,
+        gender: 'M',
+    },
+    {
+        id: 'b7a77c35-1f9f-45c5-ba44-7622d279b377',
+        full_name: 'Obidiah Fold',
+        job_title: 'Budget/Accounting Analyst I',
+        country: 'FR',
+        is_online: false,
+        rating: 5,
+        target: 66,
+        budget: 74529,
+        phone: '(747) 8711780',
+        address: '58 Lakeland Court',
+        img_id: 9,
+        gender: 'M',
+    },
+    {
+        id: '9c0fbca6-b793-4fdc-8dcf-5136cb5d049c',
+        full_name: 'Angelia Marconi',
+        job_title: 'Associate Professor',
+        country: 'FR',
+        is_online: false,
+        rating: 4,
+        target: 91,
+        budget: 38996,
+        phone: '(530) 7506861',
+        address: '7 Ohio Parkway',
+        img_id: 2,
+        gender: 'F',
+    },
+    {
+        id: '9083010c-4f59-49e7-96c6-894cbf24ed75',
+        full_name: 'Ronda Lock',
+        job_title: 'Quality Engineer',
+        country: 'US',
+        is_online: false,
+        rating: 5,
+        target: 36,
+        budget: 69903,
+        phone: '(916) 6819628',
+        address: '802 American Ash Street',
+        img_id: 6,
+        gender: 'F',
+    },
+    {
+        id: '4225013e-fd75-46f6-b678-b25675e131bc',
+        full_name: 'Rachele Fantham',
+        job_title: 'Business Systems Analyst',
+        country: 'FR',
+        is_online: true,
+        rating: 2,
+        target: 100,
+        budget: 79333,
+        phone: '(652) 3112938',
+        address: '62 Grim Center',
+        img_id: 4,
+        gender: 'F',
+    },
+    {
+        id: 'b75a42e9-db84-479c-96b0-d88109abfebb',
+        full_name: 'Emanuel Deery',
+        job_title: 'Electrical Engineer',
+        country: 'BR',
+        is_online: false,
+        rating: 3,
+        target: 93,
+        budget: 77477,
+        phone: '(860) 8318923',
+        address: '850 Mifflin Junction',
+        img_id: 8,
+        gender: 'M',
+    },
+    {
+        id: 'b2e28f42-7a35-4e23-b2e4-40fe3ed909ca',
+        full_name: 'Clay Ellins',
+        job_title: 'Design Engineer',
+        country: 'US',
+        is_online: true,
+        rating: 4,
+        target: 98,
+        budget: 4120,
+        phone: '(682) 4688237',
+        address: '458 Scoville Lane',
+        img_id: 5,
+        gender: 'M',
+    },
+    {
+        id: '4239103e-80bc-4f09-8655-c2165b063027',
+        full_name: 'Bettina Menlove',
+        job_title: 'Senior Financial Analyst',
+        country: 'FR',
+        is_online: false,
+        rating: 5,
+        target: 78,
+        budget: 80574,
+        phone: '(293) 8801412',
+        address: '29 Onsgard Junction',
+        img_id: 8,
+        gender: 'F',
+    },
+    {
+        id: '8442ff74-6f05-43f7-90de-b948a5c2c895',
+        full_name: 'Claiborne Willoughey',
+        job_title: 'Food Chemist',
+        country: 'US',
+        is_online: true,
+        rating: 5,
+        target: 44,
+        budget: 44673,
+        phone: '(707) 3380798',
+        address: '39114 Killdeer Terrace',
+        img_id: 6,
+        gender: 'M',
+    },
+    {
+        id: '1701041a-2ede-4c1d-a51b-8fe4b3ec1c35',
+        full_name: 'Desmond Gritskov',
+        job_title: 'Pharmacist',
+        country: 'BR',
+        is_online: false,
+        rating: 4,
+        target: 66,
+        budget: 45319,
+        phone: '(412) 1336481',
+        address: '6912 Farwell Street',
+        img_id: 6,
+        gender: 'M',
+    },
+    {
+        id: '609fd74e-e6c3-41ae-a227-d3d9caba0582',
+        full_name: 'Codee Maybery',
+        job_title: 'Clinical Specialist',
+        country: 'US',
+        is_online: true,
+        rating: 2,
+        target: 26,
+        budget: 43462,
+        phone: '(682) 7969803',
+        address: '4 Tennessee Plaza',
+        img_id: 3,
+        gender: 'F',
+    },
+    {
+        id: 'f535ef7f-c79d-4936-af40-d062d2b2d5c0',
+        full_name: 'Denys Beynke',
+        job_title: 'Occupational Therapist',
+        country: 'BR',
+        is_online: true,
+        rating: 4,
+        target: 60,
+        budget: 32402,
+        phone: '(110) 4341370',
+        address: '99 Trailsway Park',
+        img_id: 4,
+        gender: 'M',
+    },
+    {
+        id: 'ae126e65-b6ab-4388-ba5c-f6f5d54fc435',
+        full_name: 'Guthry Limpricht',
+        job_title: 'Geologist II',
+        country: 'DE',
+        is_online: true,
+        rating: 3,
+        target: 65,
+        budget: 68462,
+        phone: '(100) 8946768',
+        address: '3117 Commercial Crossing',
+        img_id: 2,
+        gender: 'M',
+    },
+    {
+        id: '9b1efdfc-4cce-4350-9516-028884fb1725',
+        full_name: 'Cammie Knoble',
+        job_title: 'Community Outreach Specialist',
+        country: 'GB',
+        is_online: false,
+        rating: 2,
+        target: 1,
+        budget: 70198,
+        phone: '(352) 1663192',
+        address: '55 Longview Place',
+        img_id: 4,
+        gender: 'F',
+    },
+    {
+        id: 'a44c41e2-3adc-4d52-acb3-06f90e0214c9',
+        full_name: 'Kiri Espinal',
+        job_title: 'Accounting Assistant I',
+        country: 'FR',
+        is_online: false,
+        rating: 3,
+        target: 47,
+        budget: 3712,
+        phone: '(946) 6686147',
+        address: '90480 Chinook Drive',
+        img_id: 4,
+        gender: 'F',
+    },
+    {
+        id: '9d6d3063-7be8-49fe-be31-64d0d5949f02',
+        full_name: 'Joy Tiddy',
+        job_title: 'Engineer III',
+        country: 'FR',
+        is_online: true,
+        rating: 5,
+        target: 80,
+        budget: 61355,
+        phone: '(849) 1097790',
+        address: '76 Summerview Hill',
+        img_id: 9,
+        gender: 'F',
+    },
+    {
+        id: '44def3bb-7c65-45d3-aef6-bf8b49f934b3',
+        full_name: 'Arlene Karlsson',
+        job_title: 'Civil Engineer',
+        country: 'BR',
+        is_online: true,
+        rating: 4,
+        target: 98,
+        budget: 14267,
+        phone: '(699) 4713080',
+        address: '90 Dorton Point',
+        img_id: 5,
+        gender: 'F',
+    },
+    {
+        id: '7b991e13-bef7-4f19-bd18-d5aa9d263cba',
+        full_name: 'Melony Millwater',
+        job_title: 'Chief Design Engineer',
+        country: 'US',
+        is_online: true,
+        rating: 2,
+        target: 27,
+        budget: 67126,
+        phone: '(352) 5197697',
+        address: '65242 Derek Place',
+        img_id: 1,
+        gender: 'F',
+    },
+    {
+        id: 'ab6704b8-20ed-4881-ab28-96e3d55f7792',
+        full_name: 'Mab Ballham',
+        job_title: 'Programmer Analyst II',
+        country: 'FR',
+        is_online: false,
+        rating: 1,
+        target: 34,
+        budget: 65648,
+        phone: '(699) 9285470',
+        address: '2579 Messerschmidt Crossing',
+        img_id: 8,
+        gender: 'F',
+    },
+    {
+        id: '03f0f5a0-8b7c-486e-ae4b-c9e5858bbde8',
+        full_name: 'Nixie MacAskie',
+        job_title: 'Structural Analysis Engineer',
+        country: 'BR',
+        is_online: true,
+        rating: 2,
+        target: 13,
+        budget: -5312,
+        phone: '(434) 6153212',
+        address: '59672 Village Court',
+        img_id: 4,
+        gender: 'F',
+    },
+    {
+        id: '6b63462d-b181-4055-813d-983002ea57b8',
+        full_name: 'Gianni Crafts',
+        job_title: 'Tax Accountant',
+        country: 'FR',
+        is_online: false,
+        rating: 3,
+        target: 54,
+        budget: 85744,
+        phone: '(428) 3135618',
+        address: '53766 Buhler Parkway',
+        img_id: 8,
+        gender: 'M',
+    },
+    {
+        id: 'dcafac96-c436-4232-8d0e-eda10d029e1d',
+        full_name: 'Moyra Summerlie',
+        job_title: 'Business Systems Analyst',
+        country: 'FR',
+        is_online: true,
+        rating: 5,
+        target: 3,
+        budget: 19109,
+        phone: '(960) 7792763',
+        address: '127 Spohn Crossing',
+        img_id: 6,
+        gender: 'F',
+    },
+    {
+        id: 'a765924f-8ffb-4186-8991-6000a6ce2652',
+        full_name: 'Hagan Trevers',
+        job_title: 'Mechanical Systems Engineer',
+        country: 'FR',
+        is_online: false,
+        rating: 2,
+        target: 93,
+        budget: 28290,
+        phone: '(749) 8913157',
+        address: '516 Clove Road',
+        img_id: 7,
+        gender: 'M',
+    },
+    {
+        id: '2c3423dd-81d0-4e41-987e-1c39956c9ba8',
+        full_name: 'Sela Westmacott',
+        job_title: 'Account Executive',
+        country: 'BR',
+        is_online: false,
+        rating: 3,
+        target: 29,
+        budget: 58239,
+        phone: '(130) 9778509',
+        address: '81 Maple Point',
+        img_id: 2,
+        gender: 'F',
+    },
+    {
+        id: 'e8bce62e-3bf4-4232-801c-bbcc8dab2e74',
+        full_name: 'Lilia Wiz',
+        job_title: 'VP Product Management',
+        country: 'FR',
+        is_online: false,
+        rating: 1,
+        target: 65,
+        budget: 1438,
+        phone: '(418) 5940094',
+        address: '905 Hauk Point',
+        img_id: 1,
+        gender: 'F',
+    },
+    {
+        id: '5b9b9235-e0f2-4102-b5f1-d512774e7191',
+        full_name: 'Orlan MacAlpin',
+        job_title: 'Statistician I',
+        country: 'US',
+        is_online: false,
+        rating: 1,
+        target: 1,
+        budget: 9094,
+        phone: '(512) 7106617',
+        address: '6055 Truax Way',
+        img_id: 2,
+        gender: 'M',
+    },
+    {
+        id: '1124d1b2-6ac3-4f2f-ba35-1da116844b0e',
+        full_name: 'Ty Nutton',
+        job_title: 'Speech Pathologist',
+        country: 'FR',
+        is_online: false,
+        rating: 5,
+        target: 88,
+        budget: 76684,
+        phone: '(250) 2530424',
+        address: '37247 Merry Plaza',
+        img_id: 1,
+        gender: 'M',
+    },
+    {
+        id: '01e7f525-ab3f-48b7-941f-c6ad601ea69f',
+        full_name: 'Mirelle Jandl',
+        job_title: 'Civil Engineer',
+        country: 'DE',
+        is_online: true,
+        rating: 3,
+        target: 19,
+        budget: 94486,
+        phone: '(871) 7917453',
+        address: '31 Anderson Hill',
+        img_id: 10,
+        gender: 'F',
+    },
+    {
+        id: '078b38d3-79a5-4df1-bd97-f83e300224a4',
+        full_name: 'Diann Bertram',
+        job_title: 'Structural Engineer',
+        country: 'BR',
+        is_online: true,
+        rating: 2,
+        target: 38,
+        budget: 2769,
+        phone: '(716) 9445650',
+        address: '958 Swallow Drive',
+        img_id: 4,
+        gender: 'F',
+    },
+    {
+        id: '7ca6af51-11bc-44f3-b92f-7af02923d040',
+        full_name: 'Cindra Slobom',
+        job_title: 'Web Designer III',
+        country: 'BR',
+        is_online: true,
+        rating: 5,
+        target: 48,
+        budget: 81624,
+        phone: '(409) 9223432',
+        address: '82525 Northridge Junction',
+        img_id: 1,
+        gender: 'F',
+    },
+    {
+        id: '86a585e1-b76d-43b5-982d-e74b5b4b616b',
+        full_name: 'Tymon Mattheissen',
+        job_title: 'Dental Hygienist',
+        country: 'FR',
+        is_online: false,
+        rating: 2,
+        target: 51,
+        budget: 42972,
+        phone: '(724) 3234885',
+        address: '64363 Anzinger Plaza',
+        img_id: 3,
+        gender: 'M',
+    },
+    {
+        id: '37e366fb-9371-4df5-980c-e9678ec9cde2',
+        full_name: 'Fancie Heighton',
+        job_title: 'Paralegal',
+        country: 'FR',
+        is_online: true,
+        rating: 5,
+        target: 52,
+        budget: 67403,
+        phone: '(738) 9982239',
+        address: '4353 Hermina Junction',
+        img_id: 1,
+        gender: 'F',
+    },
+    {
+        id: 'b7df7c2a-4d40-4c03-bfb6-ab6d6930340c',
+        full_name: 'Kit Utteridge',
+        job_title: 'Office Assistant I',
+        country: 'FR',
+        is_online: true,
+        rating: 4,
+        target: 93,
+        budget: 36268,
+        phone: '(710) 2371400',
+        address: '46806 Moland Center',
+        img_id: 7,
+        gender: 'F',
+    },
+    {
+        id: '7d740468-fad9-4687-895b-cee07aa3bc3d',
+        full_name: 'Lea Willey',
+        job_title: 'VP Quality Control',
+        country: 'US',
+        is_online: false,
+        rating: 3,
+        target: 19,
+        budget: 54614,
+        phone: '(304) 3327700',
+        address: '1 Moland Crossing',
+        img_id: 6,
+        gender: 'F',
+    },
+    {
+        id: '88df162f-24fa-495d-a65c-b948607193b8',
+        full_name: 'Arri Halton',
+        job_title: 'Staff Accountant II',
+        country: 'GB',
+        is_online: true,
+        rating: 5,
+        target: 73,
+        budget: 32500,
+        phone: '(743) 8449571',
+        address: '3 Starling Trail',
+        img_id: 3,
+        gender: 'M',
+    },
+    {
+        id: 'cb93d087-2f15-43cd-9bc3-89716e39a724',
+        full_name: 'Malva Pierpoint',
+        job_title: 'Operator',
+        country: 'US',
+        is_online: true,
+        rating: 4,
+        target: 98,
+        budget: 20312,
+        phone: '(423) 8195288',
+        address: '57584 Algoma Plaza',
+        img_id: 1,
+        gender: 'F',
+    },
+    {
+        id: 'b76e54a1-1c46-49aa-9464-7dd9aa738b65',
+        full_name: 'Dalston Sabben',
+        job_title: 'Social Worker',
+        country: 'BR',
+        is_online: true,
+        rating: 4,
+        target: 85,
+        budget: 99048,
+        phone: '(388) 2523908',
+        address: '53578 Clove Lane',
+        img_id: 4,
+        gender: 'M',
+    },
+    {
+        id: '608f098b-16f8-4460-bb35-9599a8a74280',
+        full_name: 'Delinda Margrie',
+        job_title: 'Financial Advisor',
+        country: 'US',
+        is_online: false,
+        rating: 1,
+        target: 1,
+        budget: 8398,
+        phone: '(702) 6480692',
+        address: '9 Dapin Plaza',
+        img_id: 9,
+        gender: 'F',
+    },
+    {
+        id: '23b426f8-76d5-4808-84cb-c42bde8362fd',
+        full_name: 'Meggi Westman',
+        job_title: 'Librarian',
+        country: 'US',
+        is_online: true,
+        rating: 3,
+        target: 64,
+        budget: 63413,
+        phone: '(682) 3495155',
+        address: '82 Duke Terrace',
+        img_id: 7,
+        gender: 'F',
+    },
+    {
+        id: '7ecfb74e-64d9-43ee-a028-d2e3841acba9',
+        full_name: 'Bret Barnsdall',
+        job_title: 'Registered Nurse',
+        country: 'BR',
+        is_online: true,
+        rating: 3,
+        target: 52,
+        budget: 55153,
+        phone: '(222) 2089814',
+        address: '4 Corry Park',
+        img_id: 8,
+        gender: 'M',
+    },
+    {
+        id: 'cf505561-d9e1-4d2a-93d5-4745d50595c2',
+        full_name: 'Matthus Shyres',
+        job_title: 'Marketing Manager',
+        country: 'FR',
+        is_online: false,
+        rating: 3,
+        target: 68,
+        budget: 33697,
+        phone: '(539) 9486139',
+        address: '460 Norway Maple Junction',
+        img_id: 1,
+        gender: 'M',
+    },
+];
diff --git a/vue-options-api-demos/listview/default-scrolling/images.js b/vue-options-api-demos/listview/default-scrolling/images.js
new file mode 100644
index 00000000..1bb509bb
--- /dev/null
+++ b/vue-options-api-demos/listview/default-scrolling/images.js
@@ -0,0 +1,55 @@
+export const images = {
+    '10F':
+        'data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEA8ADwAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsugAoAOlAHP6v4ht9J+RsyTEcRpy31P90e5rCdWNPTr2NoU3PyXc831PxrqjgvAsdvEv8AESCMe7N8v5HrXA8RN/DodioxW+pkRfEu62+SzLKwOd8e3p6cH9QKft5paj9jBvQ29H+KAeYQ3sZVM48xQRjt8wPH8vXpVxxD2mtO6IlQX2Xr2Z69b3EdygliIZGGQRXoJpq62OBpxdnuTVQgoAKACgAoAKACgDlvEmsNYILe3IE8oJ3HpGg+9If5KO7enJHJWqci5Y6N/gv62OmlDm957Lp3f9bnmEk8Vr80mZZJeVQnLP8A9NJjx8vovT27V5LfV/16no26L+vJHI6taTas++dz5SHp0UeyqOM9MdT09QKhSa2L5UjnLu0ltseUoiiHqMscdyeQvp0c+r0+bvuNLsixav5aHdgh+OPXt2FVcpo9I8A+JHs2FtKT5ROAD2+nuP5V00anI7dGclWnzK63R7wrBhkdDXsHlbC0AFABQAUAFACMQoJPAHNLYPI8V1nUfNMt3LyJGyqnui5EKfQgGR/qfUV4FWfM2+7/AOG/zPahDlSS6L/hzhIZpLmVmJJdycsenH3jj+6g+VQO/wCBrkb6HRaxM92ckRgtsIVF/vOc5Y+45B9PmP8AEKd7DUeZ2NG18KvfETXhJJHCjgD2FUk/Q6LRjsW9S8MxW9uSi/d549qbvHVCspaHORSLFGt1GNpWTa49GHOf+BLn3OeapPqjncbaM+hPDOoC+tF/vJ8p+nY17dCfNG3Y8atHkl6nR11HMFABQAUAFAGRrc/kWrAcF/kH/AuP61zVpcsGu+hvSV5X7anh+vOZZfKTpEMn03Hp+gUfnXz83ZvyPagtkYojFpCWx8zfu1HsAC/1LMVT65rmTv8A10N2rfL82bfhnSGmfznHyJ092P3m/E8D/ZArohHmd+hb9xW6s9EWLbwK6bWMriyQb1KnpTa6AnY8zv8ATxamW2HAl+dfZwMj8MKV+rYrmXutxKmr2kjtfh7eFokDH7w2n6qSufxK/rXo4eVpW7nl146eh6wK9g8sKACgAoAKAOX12UFlQ9EBc/h0/WvNxErO3ZNndRjpfu7HkiJ9oZpCM7yx+oHT8wfzBrwJarzPZSszk/F+pw6EsZm3kcRqE++Xb5mI4POTuBwcFR6VpTg5y5Y9EDkormk7K/8AWhN4R8cJeOsVtJJ5OQpWdAecZwsqADdgEhWGTg+hx2uEqe6sgUo1L8ru18meyCcFfM/hxnNMjY841X4hpp12bVpLeNAdozvkf6lV2qPpuzTXM/hWnoN8q+JpPzdhup3630UV/BLFcRmRVygK43EY/iYEBsZ5BHTntyzVnfr2tY2SfLa2m6ad0dT4UjNrLsHBWRsD9f51vRfvL1OCqtPkeyKcjivoTw9haACgAoADxQB514hudiTzdziNR9f84NfP4iduaXdpI9qhH4Y9lc5e0tThd3f+QyWP/AjmvO8zu22OR1vQ49cvYkkGRGS+QSCrZ6gj0yRVUpOL93qbcicbyW2xt2Xge2syPKBVQ4kK54LgYBwABwOntkdCa9J3ktWcqah8K1O2urbFqIB6YpNWSsJbs87/AOFdwXFyl05IeFi0ZIVtuSWP3hz8xJ+bODVxk4qyCajLVrUk1bw7Bo1hIlvnAJlYnqW6luwHI6AAVx1ddTqpaK2ysdLok4eaOYHiTY34uAG/XNVSfvJ+aOCqvda9T2CE/IPoK+jjsjwnuyWqEFABQBHKdqk+1TLRMpbpHnGsxmZliHQMWP1PT+n4Zr5uvrJR6LU92jom++hTl/0eEsMAkYTPoB1/H+uelYNdO/5HbCN5KPTrY5zwztuMzuQ0uSH9AykhgPbOcUqUeVnbWiorljsdiJsNjoo5J9K7b/cec49ty7OwdVKkY4wT7/41pLbQzirXuJC4PHTFQmU0cT8R7k2Wg3kyfe8oqv1chB/6FRZNpPa42+WLtvYoeEJT9htC/wB75fyHP9a5qb10/m/UzqK3/gP6HvducopHoK+njsj556Nk9USFABQBXujtQ1lN2izSC1OIlTzHJ9Tj/H9P514EtW33f/D/ANeZ7cNFbt/SM6VBcmZ2O2O3UhfTO3JP0AI/WiEebmk+h2J+zUV1lq/S5414G1lbpSVb7/zfieT+tYNOErM72+eKaPQbnxZYaawgu96tJwP3bbWzx984Tqf71dMX5HOqUpe+mkl1d9PuTHya/Dax+dIkiW64IZkwoGMg56YI6YJp6rSzsV7OL2qQv5S/Tc3NK1e21dPNtWLL0ztYDj0JAB/AmkYTpypO0rfI8z+MWqollbaOh/fX9zFlR1EUbq7sfQZCr75PpVx0vL+VP77aHLN7R7tfcnqbemsLZII0GFQcD6Kp/rXmQlaz8zaavc7GDxHPYOHT95AfvL/d9x6D1r2YVnHbbqjyZ009Ho+jO/sdXhvUDqcZ7Zr1IzUtjz5R5TTDg9K1IH5oAztRfamPWuWs7ROiktTlXYIpbpgH9eT/ADrxmerHexVtyEds/cc9O2eh/StIe76HU9Urbo8D8T+C77wjezaxpS+bpsrmR4Ywd9vkAuwUfei3bjhRlB/DtBIucFNdmtn3Lp1OT0e67enkdZpdyniG0Q4DY5VhgkfgeCD0INcauvde6PQjP2T547PddCePwgsjjzNgTOcBAP0zitLM2eLitYw176fna5u6zr1h4MsPMkwu0YjjGN7t1wB7nknoOpq7dEeTObk3OR8xQaldeKdZOqXhy5YLGo+7GgJ2Ivtkkk9yGJoqvkhyr5nNBc0uZ/LyPop0Mctuo4Gxj+iCvKWlv66HU+pg2WpPECTyI5HjYewOR+akYrZScWmjGUU1qb1petZTrLGf3TgY54weufp29MjPHT1KMre8vmjy6sfs/cz0OC/kABDHHtXtJHkczRrJqjqMEZq7Bzl/VXwMegzXn130PSorqc27B4sHucH8QP8AGvLeqPQWjKMEyx/I3UcEe47/AI+opRlbQ691oX0m3jBHFdaaehi1bYpS6PbsTJEohkbksgC5PqQOG+p596mVNPVaMuFZx917djhtf1LUvD43sgniY4V04wT0DjqpPbqPfNYWcdGdLcWrrQ8J8Qwav4mmkvTFLMkakkqpKRoOSB6Ack/ma1jF72OSc4p2uvvF8BWomkDY6Mcfgdo/MsT9a5K/YdN2PoK4iCXSn+5CP1Lf4Vx2s16G19H6nnyZR53H3QVc/wC8DsP/AI6wz64BpatWW61E9H5PQ348vavt5EY3j8izD6MoP4n2rtpy0Ul8zhnGzcX8vI63w5eC5tlOc7cr7/Kcc+9e/QfNBeWn3Hh11yzfnZ/edOrjFdhxm1qs+Jtn049sV4teXv8AL/Wx9BSj7tzmppTCWPLRtzx1B/8A1dfwrzW7XXQ7Utn1OYu3+15EE21k5xtIcf7vT+YH4Vzv1/zN0+XoaOgXc+oO9u2FeMDBYgFh0JIGQDnqB613UFKponsYVaipK8l9x1i6fL/y1fHsg/qf8K9aNB/af3HlzxS+xH7yxJpttcJ5c6eYndWyQSD3Ax7GtlRgtbHM8VUacbpJ+QDTLaCCSC3jjhWRXU7EAzuU9cDnqetauKS0RzqTur9z5S8DRm3vXtiPmikcHt0cY/Pr+NfPV1Zn0VN6HtV3KPtUuP8AlnHGD+KMQPzYfnXny0k/Jf5nXH4V6nB3CPYxXM7ghJ5NgyORtb5mGf4Sqpj1Ymrjpr1t/wAH/gES10NLTJgmnTSHqkZXH6A/TBz9DWtPSTS23RjU1Svvsx3h27NpKEU5SQjI9G9fxHB/Cvbpfu7W2e/r3+Z4lX3733W3p2+R6lGg2jOa9NI81mxqmyWTeDgjjIPpXgYlLm54vyPo8O3blaOZud4JSJgGI4HQ/iCRke45A7V5jutvuO9W6nnfiGeaBGRZFeQKxPlkdQD3AJ4+uc1i7qSWm+pqrNM4CPxPc6IsF95jGTcNuTndnjbk9R1z+HqM+hRvGd49N/Q46qTjZ9dj6t0PUotcsYr6PpKgYj0OPmH4c19HF3R87JW0NErg/T/9R/xrQyIvY/5PINIaPma9ih8M+IpvN63Eg2j1DYOcdgOQScAAHGTwPBxCd2ux9BRd4o6S5uS9w+0/NcPGf+AJGCT/AN9BR+OK8aTv9y/M9KKsrdrnLa/rv2eL7MAJI5NzyKMD5Qw5GcY5GST7dFINbQi5aJ2tt6mcmoa2v/kS6LeQvbSJbsx3QlVVtpyQOMMpKk4AHPPFUnyTTl3JlHmg1HsL4Scz3xibKrF+8O7jAXOePQH9MCvdp++1FbJ3/wCAeFV/dpye9rf8E9sglMiBumfpXrHkl/V7XzsvC6r6A8YP14PP1+mK8uphoz1joz1qeJcNHqjznUdSvrJRDJCJATj75PqeCQTg446/WvHqUXT0f3PoerTqqeqXzR5reassE2JYzCpJDbRn5Txzk59yQen8NcnLzX5Xqdt7JXKF54U+12qqkkbxRj92c7TjOR1AwQfQkEd+K1jW5HfZ9TOVO6t06HtnwfWWzsXsZGVljclQCDgHr0JOPrj0FfQYeoqkbo8KvDklY9Zddp/z9P5EflXeec9CH/P9D+uKAR4Z8X9AaVI9StULTg+X8oyTv47c5A6emSa8zER05j1cPL7JzGmWjWVub3WpQhKAeWpy+0D7uQeCx5O32GRivnbXdoHu3stTjGnXXWTUFVYljmeOOIfwx7CVDeu/q3bkiuvk9n7nez+dzHm5lzdr/cXdLs1jfMHCtllH931XPohyAf7uCetZSu5cu729ew1pHm2W/p3Ox8P6ZvuZL6NtoBKn0cOSCPwHOeemK+jpU2mpdIqz83Y+arVE4yj3ldeSueqwzKiAdK7zz9juZo1x0xWUtE32OpLVJaHN6jaLtOABjnpzXDUoqpHV69Oy+R1wrezdktOvd/M8S8UeGm1mb7PC6wykZ3EHafxHIP4H6142kJXttv8A8A9mL5o26Pb59zNj0TUvDdruup0ZEBB8rduPpncFX6nbn61ElGT0VjRNxVjrPhPe+deSb9wkIORwVK5wCW4OeOm3HvXqYSyul0POxN9Gz3+QYP8An6f1/SvXR47K+D/n34/mAaZOxmaxaLfWskT91JHJGCB69R+FY1IqUWn2OinJxkmj5W1q981p4VA/dkwrkcbmB3N1JweBnlsZJycV844cjt89D6KMuZX+R5nYahcwq9mCFLy7gRnA7Y7HGOK62lpUXRHOm9aZ9A+GdH+zWQaRg7Fcnju3zdT25AxXVhqKb9u93dJdv+CediqzX7haJbvubllJ9mt5WUdHX9TivWWh47ZtW0h8sE8k81Qj/9k=',
+
+    '10M':
+        'data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEASABIAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsbGKAFxQAUAHSgBrssYLOQqjkknAH1JoApQ6naXDbIZ4nYdlkUn8gaV0BPJdwwDdJIiDplmAGfxNPYCZXDAMCCDyCPSgBfpQBIBigBaACgBDQAygBcUAKFxQBja/rtr4btGvbxsIvAA5Z2PRVHqfyABJ4FS2oq7A+YPF/xJufEQNs6CCzzkRqSGf03tkEjPoFH865ZSctNkXY83dkRjvzAMDbtLtn0PyE8foO5qB2LC6xfWmInllMIOEZ2JxnuAen4dsckYpiPVPDvjTULNUhkm8yAFT95S+0H5lAb5uR0Bx+VWpOOnQlrse4eE9dh1nzTb8RrtOwknYxLAqM8gEANjoM+9dCaexJ2wqxhQAUAIaAGCgCQcUAFAHx/8RvFE2v6lIASLS0do4UzgfKcPIe2XI4PUJtAwc1wzlzO3RFpdTzAqLvfKFxsGeDjp9R/9f3oQyTSriOM+ZNvYZ7EgAD+uPXP9ah+RaR6ZbSWlxD5UzLJFIm+NlGGAH3kP94rw3BHf6k22BoxL7w5bYEtpMHXOT1LA+4wv67SPfrRewctzr/CGpS+HrpZYW3QsFWRWyBzxnPYgHvwe/QY0jLlfkZyVj6jt51mjWRCCrqGBHcEZH6V2kFgGgAoAKAIxQBJQAyQEqQOCQcflQB8A3ZYboycuHbP13YyfxrzbGiNKHTWlg2ou1M8tjO4+3+cUpS5UdFOHMzufC3guFkP2lAQ3QHk4/kP89a43Ub0R6UaSjudRd+A41jC2g2bTlcdj/gaalJA4R7WM/TPh7NEzNM21TjHqf8ADH/6q153YzVKKehn6tpNx4flWWIb7eRgki9cZ7/Qnn2PrmnGXQxqU7LmR7H8NruWWykt5WLLbyER56hGLfKP9lSCB+PbgelTeh5j3aPR84rYRIDQAUARigCSgDz/AOIHi2TwvbRpbJ5txdMyr/sIq5eTHG4rxtGQM8npg8tar7JK277nZQo+2bu7RW9t9dj4ggdoL8wXByrfNE+CFdR8wIz65OR1B9etc8XzK6+fkKpT9lLk+59z162XzUiRRhPlx79+n61yVHfRHoUafKuZne6VqVqMRrPEZAQCm5dw9u3NYKLOy62O9guQiZPBPfjH6/0zWtrGbjd6Dmucjgj8/wD9dDBROQ8SurWrnIBUZ+mOf8+tQtGvUUo+615HeeAVB0iGXYEaTcxI/j+Y4b8uPwr3ofCj557s7StBCg4oAfQBHQA8GgDxT4soZZIAgbdHbzuCpwRloxx7kDAx2zXnYlXcfK/6HsYJ25vl+p88X/h+2uJvIkYySRxgFlOMN1OO5xnGe55xXDGThex0zpxqvU6bTJH03YLkGWGMbFcDnsAj/wC0V+62Pm5HDY3K99Vv2KS5bRe3R/o/07kl9rml3Mn2ZrCSKTBfeqIrbVySwUEOQMEnjoM1tFStzK1l5kTdOL5He72dv6f4HovhPWLNx5SPvAHAJz27Z6fSlfuXZr4XodRqeqQW0YKlQxBwp4GaegaxuecXl3q+tZ0+O0UG5DRxSK4xuI4LD+EDqzHsDSUE5JRfXYxnUajK6to7M+i9F00aPYwWKnP2eJIyfUqoDN/wI5P417SVlY8I1KYBQAZIoAKAON1z4ieHfDT+TqV/bwyg4MQbzJB/vRxB3X6sooFsfPPxO+NGi6hNBb6ErX86kq0x3RwBH/gAdQ7sDg5wijkZYn5earBTV3pY6qNZ0naKvfpscHaTnd5n8R/rXkNaWPYT15j2LRUhmhCv04Jx1yMEH6g8j6Vnaxva50p0SO4XIMRBB5YbWGRg4yM8jIIGM9K1V0rJkPR6rY46w0CRNVaSIpbxxfLG0aDL8EfOr5BA9gPY81d0tLC5ZNtvRdO5zt54fvtQdbm5dsGVxIpzgorlQI9pzHlRnJBIb0XAqlJR1tdGUoykrKXK0zu/B2m32iRx3yO96/2kxRWzbdzRkYkKu2AGRWJG7C5XllXIrooRX8TrdpL5bnFiaj0pXukrt9T6Fr0jzQoAKAEoA+P/AIn/AB1/tGNtL8MO8cTZE15gozr/AHIM4dAf4pCFfsoA+YohvsfKMpLsXPUnr698/rQBDbyCCZJD/AwP5c1nNXTSNIaSTPbtJnEuFPQ4xXjtWPdTPStG1JrVtjZ2jkdelTY647ndS6/crbtJCCVQfdHLEd8L7DnHU+lNXRr7t/1K3hHW7TV5JWWX95ExDKwKMP8AgJAOD1zimlbcUmvs+htrdwYdd33Sc55Hrn1qfIXJfU7/AMF2xFkLhwMyMxjOMERkjp/vsC3uNvtXq0ItQTfy9D57ENe0fL8/U7Kuo5AoAKACgD8oMUjMpMOMfX+dAFBzsO70INJroXF8rTPQfD2pFNqk8xkL+HY/iP615lSPKz16M+ZLyPoDQXjv07KcKu7HTGTXHezPRtpZCI+q6bPIo23UOeMAh15PysOeMYwyg5GcgY52VmtNGL2b3jquydmv8/60Mxhbm7+1NaTLOeGKA4I68kbDj/eWm9FbQFTktbNeqt+I7xDqn2TT5dSYmLCbVXoWJ4RT0P3iAe+M+lKMeaSijKpUcKbe3+Z47pPxF8Q6SVNpqF0gQYVDKzxgDsI5C0eB2G3A7V7O2iPm7vc9o8K/tHXtqVh1+BbuPODPBiOUD1Mf+rc+w8r6mmFz6e8MeMtJ8Xw+fpNwk2B88f3ZY8/342ww9M4Kn+FjTKOo6UDCgD8n8Ht1pGZVUhh8vTp78evvTApTpgGkM0bSdoo0uY+i4jkHvzj6kgE8c9zXLON7p+qPRi4wjGcN9pLXfWz7a+R694I8WLBMI5T8kmFyex9/rXnyhynp06iej2PoAW9vdqJlYqxA+Ze+B7dfxqUdu2xDcpFZxNPLISkSliWOFAUZye3HXoaH2RnJ2Tb2PlDxh4tm8TTlAfLtEYmNBxkjPzt7nJ+gPrmvTpUlTV/tf1ofO1qzquy0itl+pxtvJ1HpXSchaBoEaOm6pc6TOtzZyvBNGcq8bFGB9mUg/wCNAbH2Z8HPi3deLrhtF1YIbmOHfFOo2tLs27xIudvmYbeCgUEK2VzyWUn0Poigo/KEdaRmVNg3F1OA3b+R9qAIpVyOKBlFWeH5Tkorb8dumD+PT/Oahrr8jWL6dE7mxBE5UvCSFJBGOo9uPT9etczsnZnbFNLTY7nSPGmqaHC0hk3xpwA4zk9gORWPIm7I6vaypxu3cg1fxzqmv2jR3DCKJiAyx5G7POGJ/hwOR34zxweiFKMXff1OWpVlODu7LTRef/AOCcV1nmkMWUb0oAv9KQgNAHqvwTmePxhp/l/xPMpHqptZQ35Dn6imCP0QoND8mbOTfGM9aDMdjaSPxH9aQDSvFAEBj3dOCM4/z6HvSZa0N3Qbs2UjW7xiRXUN1A2HtuJ4x2wTkcc8VzTjzap+S8zrpzcPda0td67FbVDLIqqymJd7fK3HfJb6c47+xNOCUXa9/T8hzblG9rWel/zKe0RghTkcZPOCQDzj2zgHAOOtbpddvLscsn9lff3/AKuQPVGZAnLZpgXQaQhRQGxr+GtYk0HU7bUoc77SdJgB/EFYZX6OuVI7gkUwP1OByM+tBofkfp7fIKCC84547c0CG+9IABKYYcEHI/Dml5DWmqNqK3P2dTbSus5OZThcfxDry2CCPTHPBrCz5m7Ll6L7jqXK0oybv1e/f5mFdSXBkWCdvM2fdPHCjjaPQd8evOM81pFJO6Vu5NR2SV7rp6CngYrQ5ivKcCmMij4oAtDpSERSy4OwfifSmBNYXLWs6XC4zE6uM9CUYMAfbI5/KgD9O/CPjPT/ABjp6ajZSLtJ2SKcqY5VVS6ENg8bgQccqQaCz8trFtqCgk1CaQhh+U49s/4/4/nQAUAaVveoksQVTHkBGMeAWPHzHIIJ69RXM1KF2nfrZ7LyR6KUJKF420tdaO/dlfU4fJvZATuwFwcAHnnnHH6D6VdKfPHmtY5qsFSlyp+ZUNbGBVfk/SmAiUAWM7RmkBQX5uT0Pb/GqFsW0XPyjj1/+tSA6DTvEF9pEZgs5pIYyxYqjYBYgAn6kAD8KAP/2Q==',
+
+    '1F': 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEAYABgAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsugANAHwF8VLi4s9anS4AFzK7tjrhWOV68dCMcYA55FefvJp7J6+rPXVowi47tafLQ4CxgWXJOT/ec9/YZ7fqepNN6foVFX/VnQ2nhu61ZxDZoVQ9Wx1/z7/hXNKoob6vsdsaDltou7Ohm+Gd5pq+YkZfjv1/CsvbrZpo0+r2+Fps5HUPD13EpMqkAdjyB+mK3hUi9mYyoyjujlBCyNsCj2IOD+GP6V1Lujiato0fTPwA0pUvmuwCGWJ0YsMHJOePfBGemMdOauL96xzVVaJ9dV0nCFABQAUAFABQB+dPxWvhqXie+nTkGcwJ9IcRtj6uDz7156esrd2/6+R7CjaMF1skvz/NkngzQJNdv1tEH7uHG8jpnv+XauepLlV1u9vQ76UFd3+GO/mz7B0Xw/baREEjUbgOTiuaMUtXuaVKrk7LRdDZeBXHQYquW5mpuJzt94etboHeg568CseS2qOlVHsfMXjnwgdKuHaAYT7ynGCufpzXZSqW91nLVp395HqnwBv4UkltJCTM6Ep6AAjcM+px+hHFehC1zx6qaj5Jn1HXScIUAFABQAUAQ3Mot4nlPSNGY/RQTUt2TfZFRV2l3aPzK1OY3WovKeql3PuSxJP4nBrzIK0fU9+Xx/wCFH0l8GdKFrpzXjj95OxOfb/8AXk1zVHeXktDriuWml1er+Z7cHqLkWJkfsK0T6IzkrakcjKBjIz9aTQRZx/inQ4NVtmEigtg4P4VzyvFqS0OuD5k4s8t+G1pd6PrE0tthYYoW3DAO7LDgZ+7wMkjntnBNdTruKTha/wChh9WjNuNS6jol01Z9W6bfJqVtHcx8LIuceh6EfgcivWpVFVgqi6r7ns/xPn69GWGqyoy3i7eq3T+aL1bHMFABQAUAUNWjMtlPGvLNDKoHqSjAfrWc/gkl2f5GtPScW+kl+Z+blxaEXFyxznf5SjuSCo/lXnw+GP3ntyVpS+4+n/BWrQWNlFaFJYWUAfPGyg59D0rhl7rbb+49Fe+rJWsra6Ho6Th/uc1nfsTa25yWvX/2ANLdTyRwjpHCD5jcdBjnP0wPWnG7dkW3FK9vvMLQ/GVreypHBp1w6ysVWV9rvlerNksyqM/eJx1A5Fdbi4rW36/kcSlzvRtfLTt3PS7lPNi5G3PauOXvLsdEPdZjR2w0qMSQBQ0jhSmMlwx5xxkY/l1rmlemlJb3St3udkLVW4SvZJvmvazX+Z6boNstrZRRrwMFh9GYsP0NfR4WPJRil5v723+p8tjajq4ic3vdL/wFJfoa9dh54UAFABQAHmgD418ceC30DXsIP9HvJ3nhIHGSu4J+Dpg+2D3rypr2XNF7WdvS/wCmx9DRkqqjJb3XN62X57gNI142+9bmVLgSHauUMBjwNvGNwYHOcg9sDg1knRtsatVlLR/dbv8A5Hr3g2C8WJhfFWdQMEZx057CuaKV3y7G05NJX36l++0FL+YTMSGUEDBIGDweh7jg+1NXTutAurcr1Rf0/Sk01BHCqRr6KOT9T1pvm6sj3d0i5O2cL0rN9jSK3ZWhtPtV15ZQ8RsA2DggkfKO3OSS3bbg0Rp+0nZp7O2js/L/AII5VfY0+ZNfEm1dJq3XvpbRdbnpESCJAg4CgAfgMV9HFcqUVslY+Tk+ZuT3bb+8fVEhQAUAFABQBi65oNrrsIiukDGNg8bd0cHIIPUdOR3FZVKaqKz+RvSqyoy5o/NHnxtYLTOQMqSOeoIr55pQbXY+ri3NJrqXtJnWYM6DC5IHvV03e7MqsHGy+ZPNMOUVwCOwPNNvpcIx6tFIXU1q37wbl/vD+orHmlHfVG/LCastGPe48xldOVbvUuV2mtgUeVNPdEMfjy20nVk0i6AEbJH+8H/LN5Mld/8AstwM9iRng16EMTGg4wqaRa37Pz8u/Y4HgZYqM6tFrnjd8nWSW9vPrbrY9VBBGR3r2d9UfNbaC0wCgAoAKACgAoA8Y8aRPFeOkBwJArEdME/eA+o5HuTXzuMg6c1JfDL81uv1PrcuqxnB02/eh08nez/Br5HGabrc32lNMWKeO4fcY2wvlPtGSA27hgBnawBOOM1ywg5L3Hr26/cenNRjeU9I97Npetr2+Z6Dp+k3YU3F86wouCS5ACj1wMLge7V2ww8n71R2S76Hm1cTSVoUU5yeisnv27/cinf2f9tzReRJNHawN5jMCY/PYDATbgHywTk5HzbRjK8lzUdobd3+n+ZVPnprmq2UnooLourk9deyv69jWt41tYgjdI84+nauNe6rdipNyd11Plvx/K58TyyJuZWiikZUZgxUARkZGQNuwSfMMfLmuyPJVpqM43vLlXfYygp0avtITUFGPM23otbX1t32vrsfRXw68RapDpMaawCXUkIzrsIiHCBtxBJI5zjgY69aj61HBtUIzjNK3KuZt26pcqlttZ7eh4tRfW6kpUqco/zSatG997Np2e/9WPVtL1a31WMyW7Bth2sM8q3oR7jkeo5r3YTVSKmk1fo00/xOGpTdKXJJptdmmtfNf8OadaGQUAeL6z8T5rGVodtvbMpxscvcTe+5IjGiH/ZeUMOODmuGWIUXa3yb1/C9vmfaYXh+ti4KcLuL2npGHy5vekuzUWjjZ/ipqEsiiGZiCeiQxJ9NqkTknPQFufxrkliZt+61Femv4u34H0tPhWEIOVeaulfWT5V5tpQ9T0TQvH1xLbH+1oktpk6FmKF1xgSmMjKBm64JUcjcMYrs9rJ0/aQXM+tnt8j8+rYSFLFSwsKilHmSjJNOMk9bRmvdb3VnZ3XU8l0zxG2qXFxHfshu1QBJEYFN25iEB3AYPIYHkFevNfK4j21Nwg5c8FK9730la6vrtv5an2E8JRssXgE4O3LUpyT+zflk9L2d7XVr3Wl0P0zXYNQlNs2FuEPCk9x3VgefqpyPY108kqL1X6GcZKylbRrVPs1f0ejO1t5J7hgJN5wAMMzvwP8AfJA+orb2rl3+bbJ/d09acUnrslHf0VztoE2JzxgVsrtXZ5Und6HnOueLomka0sczOhKkqG2bwCSpcKRlQCSBzxjrXNNSVnZ8vk1fttdPqXGrRg+WrUjCX966X32t+J5np1gba4uL/Vkk+13v7tAgOVjwxAyQGUMOyYbGMtk4rR1Yyth8PKEZWvJzvJp3Ssox9d3fS+hgqLrSlianM6MG7KFoqUVd35m9eiSVtXe51dvppj+zz3rXCSP8kEJXI3bSeRnhNo4Uj5R1r3cPBYaHNJUaul3GOkteruu133bZ8xmGJWKlLDYR1sLBSsqj+D3XprGV3JtpSleySfQ9Q8IRahpl20l8IljnTbti+8ZA52t2Ujy8bsfMCCcEVcMTTrQSoQcacZPRq3Le1l6XTu9TzqVGpSqSlXm5zlGK5r6Tcb3a+/bT01PVkkWQZQgj2rc7/QfQB+es1yxJYk5Jzk/X/PucV8wz+q42irLRHQ+Hs2Frca7KpPkDybQHODcyfKG65PlJlgP7xHGFbE/0l5/8D/LofO5hL6zUp4BO0X+9rW39lDaFv78rJ7e7e+6v7WI9Pu9Ni068yr2kIBZifNCjaXYODkFiCByOWAIOMnocrJKEnBx/FXu7r8vU/NMRgJ1K7xEIpxqSaSivdUnpFWt03duzfWxzOrnTNXQW1kAl0ilYfujfwMxkqSMP/eHCthugNc0VTlO60cnr538tvu/I9j6licFSdZq8Ir3ld7L1Ss/X8zy7RArtmW1lkkzxJvMTROpK7+oIAYYkBGFOAeCoP0rrYfk9jVSc4Kyv9qPRJJfF5Lffvb8sxP1vD1vrNOrbD1XdpLmlCfXmbb0/vdtD3CxfUbaFJJfKkBH+sVyAB/CXyoHsWX5c88Cvka1aNGT5VJJO1mtV6/8ABPqsJX+tRSavKyaatafnHz8le/TsYGv+Ib6YG2aRbWEcShSd7DuolBUIpHdAWPVWXvyrGSl7sYNPpf8Ayt+tvU+opZW6yUoysns1G7+Sdredzl4/F0cES6fFHH5Y+VDtG4eh2jAHueGPXg100aU6slKbfy/z6/IWJybCYODqV5c82ruDaSS733Xl56eZ2Fpd2l5i3RRdaoykptJdIvR92cYGec4I+6doOT9ZSlSy/wDeJRVR77a6d93ofl2Ppzx0XQjzQwcXZP4ZXvezXTXWzveybvsu18M6NJpi/wDE2k82RyzeYS2xck4VNx4AB2/554a0XjJfXYLkcXeVtHJL9Laea7s83DxeHX1KbbovSN7fnpu9X2e2h1CXCQR/abkDyssIcHkL2bsAWwT1wqckgbq6k1JOpSvGXKnyW0a9H3/4PW56cKL5lQkk4qTSlf4em68+i1vpvoYKeKTa3W8H5OSWX7hA7EH0GBuGMnLYGa4o4hVFz0tJQaUo9r9r7rsnZrWzXX6N4H2UH7W3K1dSf5u17N9baapO9j1e3l8+NZOm9QcfUV68XdJnzUlytpdGfAGlac2s3cdorLGHPzM7BVCjlvmP5erHoDmvmXfZbn9NYzEfVKMq7jKVtoxTbbei26d327Gj4n8RW5ntdK00B7HT5lYFR/rpCyl3xzwTlULZO0DPJJNQWyZ8rRpzjCpi6+tesnzrfkgrqMOi0td7Lmb6WPbdX0CK5LtEytIfvbdwyQOcuWccHgLt2jpx1qakFd2/r56nlYTHypqMZJqK2vZ2T291Ri9Vu73fnsectpFzY3SyNkCNgFbGCGbPBHODtDMDyrbSVLCuVRcXfsfYPFUsRRcI295NtXurLqn1XM4prSSvqky9re17pNWswI7pEZpIWAMU/BLA45DuM5bA+YKx3OCW9lxjWw8oSVpzlDlkmk1JNJO/rp0vs+5+PY/Byw1X2kHz0KUZupFJtqLV3otNNG/iaTurLQy7Txrb6mTFZBkkLbXt33I8ROMswYbQOwK7w3rk1pSwLrNUMUlCvdJPW0kk/P5u9m9LaaHkrMMNltL65hearh7OTS5U4yk9Fe3M+ijbRa83cS+8Mx6w4FtdtI+CDBDukkRuwG75B33KWUDqBnrpUwVLCvlqON12X/DL5M9LD8SVsRT9phlKnGWzlyrTrf4pX7NLX02qW/w21NmCFfskJOGlch5m9QApKp/wJg3fbjr588So+5hoN9L2svRt7eh2wqPENzqy9pLezbsr9fP11+89T8P6dp/gqIJ1DHcSTmQtjkrgZLY6qBtx1AHI5Iq0lUxD5n0S2j6Lq/Xfqdjwc8Ymqa1Ss+kLdOa9kl2e6e2uh1tpqieMZGQANbWbKZFQ5EhPKKzA4IYDLRruGOHb+E+zSre0bi3yxtbTrfbyX9anz+PwP9nwjJrmqSd430cUvitHfR6KUrX3UepNrl2JRsTmFhhlH8I7kD/aI/75VSOGrKtK81TUvZ1Y/BL7Ml/K+mv3/fYeDo8sfaOPNGWso9YyfVen5t7NHHPd2OhKLq7YC3BO0sedzcFeo+XaTnPA4HGaxV7yqOHLVvyzgtVU0unFPqt1+L1PSrXqQVFSTVrqWiVOKdm5PS68lq+iPdrDV7K+gWa1mikiYDaVdSOg44Pp2r2ueK0bSt0bs18j5F05rZNro0rp+aa0Z+erkAY7f57foB+PpXzR/UsrJf1t6fkv+AbngbQU1PVAJv8AUQI07/8AASAi+5LlfwzUV6vsKfP1W39fgfH5jKVCnKNJa1Xyry5vibfVqKb8rI9Ll8NSWMoudJleG4HVS37uQf3XBz19TkZ7dx41LHNvlqbeln/kfNttXc0rLr2/r/hz0Ww1FGgWHWrdrUqoUyY3RiR8Z+YZAULt7kDJJIxkfUUXTqLlutvnd6/lY+YrV5UZ+0w8t3tt7sbrbzlza9kumhFb+DTO8k6kGLHyfdYEdsEsvUAevX7xrbFUJSjTw9N2d0/u+a66/Iihm8Xz1qqve6d7rR/KSd1p0v2R4Vrvhp/C93HNdw3G1pC8UsK7twByY2cgsuB06qVyAxwa2qTqKclN3ShbV6ptWT21V9d9GfPzwlJxTy2MUp1Oaz0S1vKCSdr2uk2leO6N/wAPeOLDw+2y0jlO0ZkjkBRmydxwztliWJPAABPTFZc7qQg8a+Z3tGUXp6u+vr3OenlMo1pvDtW0cqdmrabK11pstrband/8LQtdcgZ7ZHiVeJMpl8DuM4jVk+8GJfIyChzWVd+z921vTqu67Ndz7bK8D7Tld7u/upuyUv5ZWvJqWziuXWz5k0eMXur33ifVRoWnlnlmcoSpLfKP4ppP4YwPmbACDqsecA8dOjOq79Pz/r7j7HG5hhsqpqMEpVbJ2taNNv8AurRPtvN9ZWPpq306DwPpsdnanKIuZGB+Z3b7z57FyNqf3QM9ENemuTkeH+GVtH18/n+l2tj8ulKvjcR9cqNzTez2XZW/litX5tJ/EeY6/wCLYNJuYnw00t2wVYYwScZALbR0VegH0Cg9uGnTq4uFTD1Y+/Tu4y6bXSv/AFpvqe3ia9HLYwqNpc+ijezetm35b36326mL4puTqWm3cV0iQ21s6vBNMWjfcTlB5RUtl1coSwUZ+bp8winh6rX1irL3tI8vbVLXrpu31Fg8zVPFQ5YSlTafPGEVJNNfZvZaNXSvtpoeXWskttGI43kjXriORlXkDkBWA565HUYOT1rodStQfs3Jq3ndWeqs+z6H6VQwGU5vTWOhRpzU9G+WUJKUXaUZx91qcXdSTV+9ypM+Bgcevb/OegrBI+iqTsu39frsjsfDfnaXbG8jVwZyQMLlRGh55xj5nzk/7FRVourFLpv1PmK2Io+1dKt9hLRNaSlrbda21v15jq9B8TFrtFuPuglnI44XJOR0OenBzzXj1MFbW2i1+78vmZVoUa9Jxw8rVHpGMtHd6aPbTfroj23+27eS2ZDtZnBLjg/M2SwKnnAzjkYwK6KdOUXGMnZN3b2133/BfI/NsZgpwU5xi3ZWirdFotVp/eevc5O5s7vT7FI9NvHgjkcsI2+YID/CpAZwobGBkgDjGOnqUMd7TEVZ1Ly9nGyt1dr9eWO19V6b7/J16M8PQhh1FpuWr1ulfS61b6X+/Ywxrd3r00vhjV40WSFM2054W4lRTkqWAAc85UEfKS2ABxrOdOtSlNybnVTkkmvc966i+2yT/wCGPWy6vLDYmHJZU6UlGone7TVpSt13bVupyS+GItOE13eRxw44Bd0U55wACep4x3PbNRiIypqhSeiSTlrbtf8AU+yo4qjN4ivBptt2ai7JK9unp6nJ313qNpAbSKJLCGcld7gCVwQM7Y/v/MDgMygdhWdWvCtNuledlbRO3zlt9x04N1HBQoqNN35vaVGoxj25Vu3pfVP0Pe/APhfT/AdiTKv+n3K7pnfHmcjIiBJ4PdueuSx2qMdyhVw8PbyavbWK2iv5V09dvuR8XWlDG4h4am3KKk7Td/fd9ajvrr9m+r00u7GHdeIRreotpyv+7jBd2GSMEcEZ4xgbVB7cnBY583EyVdQrUrqbetvL8dOnl6nvwnTyanKFePNLl0XZO/xPVXe71302SOH1HwffatrUAtWby4D5u5tvyLuBCDCZO1t2SdwP4c70swjGFad7Je4nqrytZ9t97bpbnkYnC0a86FWs43l70o6NxitrXk1+je1unokvhltZW6sL/c0r2x2OwQBmQblBIULw20gZBxkZwAaSxPtKVKd9W5Jqzs0nePq7X89DroqngJylSUXSc4NO/vR5lyzSV00tFqrq773R49oNpb28L2+qKUuIZWTDna23arLx6fMdpHG3GOK9XDVMPWpqda0nqk7/AGd19zbX4FZt9fweJaySo1h6kY1JKKvH2jvCTXa8YRv53b1bODmbHHp7Y/H+g/wrzEj9kqSt12v0/H9I/fqj1iz0/WLHTYWtZEKCNWWJlxjeN+3cV65bnLDknBrnWN9lJwaaSdk7af5n5viqdKvWnKUWm30e9tNtui6Emn3KO2zWbZrSV/m81QRlEIJPfIZ8Aff+61ezSq0qyV7a7tdl366s+ZruthnKWGneML2hLbml2/wxu9Lbokv4rnzljs5PtMDAMzr94c5OMZyQOvIxjoDXfOgqNGeKjbayfzS1Xq/wZ5lLOHWr08vrKSad5xls/dbVpNpqyT0s/iXmbul+Kmur0JMVMcIIUR8EEDurtjIbgsSPXAHT5Ktg5UsK5a81VpvbzvqlzLTXS2vc+iUcPiqzUWo+yVrTck1ez6JJ/JS0slre+m2qaZqSXEVzFvE33gQA3UkFXDfIy/eVw6sDgrz1xxGHrUKdBU24uNnZXevKtdUrp7NWeiV2zko4ClOpVqc8HFtrm5o7cz0sry07927xjY8k0XSFi1FNRlvJbqOylYJHPIXkUkYVtrMy7l3Z3AZyAexx6s5VZ1lgq8fiUZXV2mlq47JrbrZHFDDewp/XaPLKlDm10Ub2dpOzaavbq9PI9B0CS3u9Wm1TU7dIINJ2+UJGLPcSkGVXG4DJRCHGeC205xkjrc6cdKcYpR0svL9TtpLEV6fI6k5e0fxaKKuknoto3002XTZFfWvEU3jXUhb6WGKchpF6bcj7p9AevTd95uAqrvTftFKNV8sLdd9e3k/x/LjxFWllzjTw1qmKj8SWqg+8rPWa+6C07uWHd6cNG1O4Wad7S7PksrDGwjYu7IIxt3h8AkAgg12YOhh6r5NlG+6Vvx9bnzmdV8XGl7SMPaRmox0bctdrW1vpZ2T1ud1Hr95ZapETAzh0JLhwY2GD8yAYILYPGCQePavAjlkoYavyJSXtNXaLuuZWu033vbTuzhni4vGYdVKji3T0jJSVm4yurNJK1rXe70N24164vbd7mFfsVxbzw7jNtMbRu5jc7hkYCtgkgEcZGORTwUqDw9OV+SSbV9Emle34t72aemx6uDxkassRTbU0tIqN227vl0stW1ayW5jT+F7G62C+k8yWJBGHU/eQEsmcHkorCMk/3B2xXyGMqVMuxFShBLllL2kbbJTSenzv87n3WHx1X2UZ4eGkknJSTTU17st+j5eb/t658ztJyPqPT0/HoOnvX1iP1Cb6Le/lu1f8Ft5n0pF4oK7VjhG08AF+OwGRsPGO1c7km9VpdnyEsCkvenqkvs+X+JHokRgu7d/tFrC0ROzG7PCqP4TGB1JPXqa7oUYO8lHld7Jxk01b0Vj4WvSXMoqpK9nL4UtW3fXn7JLboeaQWGlWlxJe2oubd0LMUVlaM8HjY7EYzzxjOTnqa2xNeVDkwylLlb3W+9tdbbtvY58LlDrueIqyhNtK3NG1tPJX2ST12VtiCzOnRQzTiKRywwclAeepyFOM/jXTjMbzSo0ZU4tXTWrXZarrp5iwPD0sO6s6eKqK6aatF7XkrO2mvkSafc6bZwt5FmNxJG52D4yVGcOjjv6VhisQ3XpxkvdhBysrLSPNJrZ78tvI7MNlnsaFSpCo3Kc4xvJyer5Yp6Sja176blvUdd0iKyYXtjHIwTeZIo443ZV6Z2lSGyOm4rwCMdBphKjqyeNmkrX5UlqunXy9b+R5ePwjgv7OpTlyyaU7ydtdXZrV372TS013PGdc1C48crp5jP2KC8vnt2iRmJ8tEt44wz4yxCJ8x4yTnHFZ0KcHV5bWTd+9vvPWrKrgsE4YeesI67rmvzPdapN3vbWzsenm4t/hda3VzHCHiicRxxR4HGxG5ZhuyzMSxy39Bti6UZVVKlePI4rWTd209X5abJWu2fJYBTnf6zKMrxcvdglbW1u73tdvZLqUdOuE+J1ot+u6G6Ur8sgUxgqSFCsNzYBJO4rn2rnozqRxDTUVrpy6W63tbV+X4nvV6sKeHWFjDmg1d88rt3Vmr20+VvQZrdrJY3MHnOVWLGUiYlchiOC+CeeeQoOenAJcalXDUMTScr210ur6J/k7NbF/UsNmVfC4inC07uP7xRlbva2yvs9ZddLtFmze4+1S2lxIZoJly0TcqOA4IbCsWDYOTgcdKy+tynhaTd1bRWtpa66/d6Giy2nhsXOtQSvzXbaabba6KTVm7tru7ppnEeLvGL6NcxW8ats+zxkc88M6HPIycocHuME4PA4K+D9tJSm9VFL5br8z6vD4ynGMn7NLmm20kmk3a9r9Lpn/2Q==',
+
+    '1M': 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEA8ADwAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsugAoAjaQIMntQBzOreLrHR1LXDbcdjgfkCwJ/Ck2o7lKLex5dqPxls4ZtsbMIghLZG3Dfw8+mMn1OR2Oay9rHojX2b6nlusfGK7vMNYy3EY+dcB2Xdu6FQCDleMZGe4Izis5T7aFqCQWnxV1MhjNcXKZOVBYcAk4Unjn6bc8VHtGtmaKC7HpXhv4oSyyql1JviIHzuACCR/EEzx2JC8ehpxrdJbd9hSpK14/ce62d2LlA4IOQCMHIIPcEdR712ehxbaF4UAFABQAUAFAEE0qwruY7QP8AP4/zoA8O8efE5dMLWWnhWm6M5O4J7+hb0GWx14rnnU5fdjudMKfVnzZe6pPqkxmuZGfcerE9foOv+6owPSuJtvVnUkloiEQpKdzcofXuRz9MdyB0/iapvbYdjXitIGG1UCjHVQCxzz0/unrznj+KouzRRRk3tnISpjjGwMc/NljnrkKcLwMAYAA4HU072V2HL2RZhaSE72Hl56Dp0Axjnuck5/SlcfK0e9+A/GrWRWzuSXi+Ug913AHK+oyTlfXkEmt6dbk92Xw/kYVKXPrHf8z6GgmSdFkjIZGGQR0Ir0l3Wx5rVtHoTUwCgAoADxQB4v8AFLxW2l2xtbclGk4aQHB2/wB1O/OMHpxkYORXPVlyqyOilG7uz5Kur/7QxI4Hck8k+/fPt+eScV5+x2EMDZY7gXb7qp6nGfnPYKOSowAMAnJxSGXRFMpDv85Y47hVx0Axjp7YAOaqyKSfQ1rDR55dzuWAk/hDMFye5Gefcn/Gk7LRHRGn3O90vw1bwR79u5j1PqfbPb/PXpg7s6VFLQ7Gz8PWt3F5cyDB59CNwHIPqDnn86uMdBS0ONu9HufDF8gjy8WRsJ+6VPY8fLjvjPPOD2TXLozna6o908G68AVtpPlSX7mTnD/3fTkcgjhuCO9dtCdn7N9dv8jgrwuudbrf07nqFegeeFABQAyRxGpZuAoJNAHwL8U/Ft1q+rzxv+7jgdoo41IIAU45I43E/e565HAWuCb5pO/Q7opQSSPOtPeSU7Vw0jcqB0UdB+A5J6Z6dME5tL5Gkbna6Vp5CZ7j5cjg7jyx+vHX8e9Yt6nXCHc7Sw0yM4DDp0780HUopHV29oNuMBfQd6Vijfs4wqcZJJAXsAO/0otYo6y0jWMAAe1aRVjCTH6tp63sHzDlR8p9DVON0Y3scQLttIKs2QoYcd8jqQeOO/r365zlsyWr3R9FabdpfW0dxGdyyIGBHf3r2E7pM8VrlbXYu0yQoAinYRxszdFUk/QDJoA/MvxXdLe6jczLkI0rkAjB+ZicYHcDgnoOnrXn7t27nfsi/o1r9lszcAfv7g7F9gRgY/3VBaok+h001ZX6s7vT0EKBPT+dZWOyOh2Nkd2MDH9fx/woNTftVAcDjBppDLM+o22nPtnbjOVx/gBmnZLRiv20LC+LFnYR2cTynoMKRn6DHT3qr9EYbbnZafqa3i7ZY3gcjlXUgZxyAcYP06+1aJ30tYzatscx4rtFtoHugPlQHn+6f6emf8nNoT0PQvhvqIudGtkbKuFbAbuu44I/4DiuulNNcq3R59ajOH7xrR2fpfv6noNdJxBQAjAMCDyDwaAPzR8bWUthrl3aTjEi3MgYDgY3bhjHYgjGO1cGzfqd26Vjb0hRIF/uxDC/U9T/AEH4+tYPc76Zvtcx23zOQMc89qpI2b5S5YeL7beIUVpWzwQOPzOBSasCqJ6I9CtXaYLJgrkcfj/nmg2XYtx+HlnufOmPFFiL6aG7HqthoZ2KVR3/ABY49AO36VXMo6In2blq9i3B4kgvn8uNGmbrhF3fT5hlF/4Ey0029LESiorR/cQ61Ib+2fT3RhJcowER27yo+824MUAHXO7PYAsQDVnsRdWs736I6OzPlRRiz2xz2iowjH93G109OcED3Az7YNtaw+KOtvzXzO+CTjyVk/ZzTi32a+F/9u6fI9NsrpbyFZl4DjOPQ9x+Br1IS54qS6nzFWm6M5U30f39mWqsxCgD45/aA8OpYarDqsSbRexkSHt5sZC59spsHvgn1rkqqzuup1U3pbseZaES6nHQVyno0ynd6bJqV0VclYY+CAeTnnH61adhuLm7dDptO0+w0n943ykDoxJ4/nU3vojdQUNTeTxvbxqVj+bb0xyP/rZp8r6Bzx7ndWXie2vbQFZES4ZcBGYA59fXA6n2FJeeg2+XVa9TzLxNpd5c3jQxyEynbiX+ADHRUycAHoCSevzc5Li1DW1xThKqtJW/L7v8z1zRVhswsrsBKVRNqDaAFGMkDhmPVmxkn8gc3vcz08gVJpKK1tu/62R3yXCvJGmfnZWyo6hOCHbHQZUKM4yTxWu5lbldkYGuJJp0qXluTukZYWUd8klSPocg+ua5KicWpx9D2MK1NSoz2Sck+3c9R8PMQskZ/hYN9C6gsPzzXdR0TXZ3+9a/ifP41K8Jrqmv/AXZfgdFXWeSFAHB/EnQrXXtCuIrvI8lDLG4ALJIv3cDjhj8rDI4PtWc7crv0Naabkox3bsfF2j2s2nmXz1KpkYb5TjnA3AElQ3QEgAngEmuG11dHqx/dScJ6duxflVhH58ZwrFsFcE5U4PJyMg8dKLaamnNvyvRdjmJ7Ke8wytsIfcxds5UEcc55PPt0461pGUYbrUwlCdTZ2XmJD5iyzbeUKMM4wpO3Hyr2Geev04qub5eQ1Cydnt1Z6x8ORbzRNZ3CLhwScAAk9M/X/8AVXHa+ktmelHSPu2TR3s2iy28IVY45RFkK5badnYHgnj1Gc9+eTVmlr9/cS0fKkrdF28tn8jPtLF5ZQxIjHonLf8AfbDofZAR1DA0lZ7GvK1u7LstPx/ysepabapaxYjXbu5J5LMcdWY5Zj7sSfeunZHBKyehPcQowBdQwQhxnsR3qGl19SoSafuuzenyZveHZCXlGCA2GBPtx/Xj2raju/vOfGRtGD7XVvXX9Dqq6zxgoAwvE9p9v0m8tx1kt5QPrsOP1xWdRXhJeT/I6KEuSrCT2Uo/mfG6eWoggk+/LHsx64jyQ3scce9eRTlZJdWj6avTvJytom/ubFVI41aJxhTgrgfdYcHI44ZepGSCq8YJI3T0szklGzvFfIi+yxyDCISffAB+hBY/mopbFKLe0ber/wArnJ6pvtplg27dx6Dvn1Pf8NoPcGncHC2j+5aI7bwtJ9kvI1J2E/hn1qW0bxXTyPfZbqBAqsPlI++WRQM+xO4/8BB+tU2v+DczSa6/KzOK1S2l0yf7XZkSwnl0U8jvlR6e35Vk1y6x2N41FJcs1bsd9oWppfwhk7dR0IPoRXRGXMjhqR5Xc31UHrTMEzsbWCKBB5SqgIBwoxXbFKK91W9DypzlJ+/Ju3d3LNWZBQAjKGBU9CMfnQGx8R+J9IuNI1bykH7y0lI2NxuTJKuCf7yEEfWvEceSXL2f4H20ZKrT5+kl9z6r5MddxgHjoa12PPuT6QAzbTTbN4nOeL76D7UIVABhXJPfJ5qV+BlOSTMvQnN7defPyE4UnrhSBjPbjOP/ANdZydvdiiYuUnodotpe3krT3kyGLnYfMwFA+6OcdhjAqJRctdjrUJLf7jbFrdrEI7KOSYnkMTtCqMHJL7T7DAOc1LptbMlx5dWd/wCExJHK4lBRwqhlPXI6dOvBxn6VvSunZnLU+HTuegjpmus49jt4BtjUeij+Vdq0SPIerb82S0yQoAKAPNfiL4VGsW63trF5l5b4Hyj5niOcrj+IqeVHXG4DJIFc1WHMuZLVfkephK/sm6U3aEu+yfR+Xn8jwe/0O/sbZJ72F4FmZhHvG1iFx1U8rnPG4AkDI4rj5ZJXkrdj0JTg5uNNp2te233mLZTi3lGeOakpO2hymv6LcLcTXeA6u26PP3TnpnHPA6/So1vboZyjrczLOG8kdVdwoB6RDZ+v3v1rXRbGkHy7nrOk2lpAymQr5jf8CY/Unms7pHf7VbR/yPV4JkaILEu3cAMkdq0vfY4W23dv5GhCqQP5jfLkAZx1+v8Anv8AWmtNWYPXRG/p4W5kVF6Fv06n9K2j7zSOao+SLfkd30ruPICgAoAKACgDD8Q6JFr9k9pJwT80bf3HH3W+nY+qkiolHmVjSE3TkpL+kfIus6bNpVw9vOpSSMkEfT+hHIPcc15rTi7M92MlJKUTJn1Jmh8k9AeKixTZUt5YgQf4if09fzxQwTsdlDcJZbZBjJx+uD/X+dRe2xomdWmuJEijIznt0HTv+P4jmk520QtyUarLIcBuF/I/n/LHr+EqTYWSPTPB0hcpI3Bbd9Oh5H17e1d1HdfM4K/wv5fmek16B5AUAFABQAUAFAHiPxg0hTFDqSLhsmGQ+vBZD9Rhh9MDtXJWW0vkd+GlvD5r9T5W1KV4SQSACePeuM7mzF+2shBJ6EHP8h+NJom9jok1eS4AVB8o/wA59j6e3Ws+Wxpfsb1heySHaT8oOSR3HA/IgAA9euKjlNEeiaPZy6qVijJRQQzt0wATxj1I+uKtK+iK23PZrM/YQpj42dPwrpXu6o55JS917M7G11m2nAVnWOQjO1jjpwcE4B69ueRnFdsakZdbPseTOlKD2uujRpCZDyGH5itbmGxJTAKACgAoA4D4mwiTQZiesbRsPrvC/wAmNYVfgfyOrDu1RL1/I+PNRt1kXPcdK889do5WW23vtY9ucf4U7mVjtPD2kw3H3s4x7Z/wPY+nWs2bxSPTtK8K246/c4JA7/TpihIvbY9J061itVEcKhFXoBWqVjNmwxwKoyMC8TzJFU9Artg/gP61lYvb7zm5rCHecLt/3SVH5KQKnlRR/9k=',
+
+    '2F': 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEBLAEsAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsugAoAKACgAoA80+IXxKsvAsG04nvpFzFAD064aQjkL6AfM2DjABYZyly6Lc0jG+r0R8g3/wAcvEV3dfaVmddjZWOJmWPr93YqhXx/tbyR941HvdzS0VokbT/HnxPcTpfLtgRcAwqoeNgAM71PzAsct8rIwzgHAFF3fRi5VbY+q/hz8QrXx9Y/aIwIbmLAnhBzg/3lzg7SexGVPBzwzaRlfTZmbjy+h6JVkBQAUAFABQAUAFABQBjeIdah8Oadcanc/wCrtYmkI6biOFQe7sQo9yKlvlV+xSV2kj4Eupbvxnffapz5t1qE3AOcKrcqvsioN7AchdiZHBrzZT5bvr+v9aI9KFPmtFbfp/WrPbtJ+DWmxRq12WmkAB7KoP8AshR0HbJNc3NN9bHoezpx05bnC+LfhFLpD/a9ILGAcyRnkqP7yH2/PFaqq46TV/P/ADMZUIy1puz7P9DnPA+uz+DNbivs7VWQQ3iDhXhkOzzMDjchKkkeqk5Oa6oyWjW3T9UedKL1i9z9AY3Eih1OVYAgjuDyDXccQ6gAoAKACgAoAKADpQB8n/tAeOEuTH4YtG3IjCe9I6EL/qoc+rNyfcL6GuOpO/ux6afP/gHXThb3n/S/4JQ+GHhwi3/tOVcsFKxgYBJPLlSeB0VB0xtNeQ3eT7I9unDlin1f5Holh4juGuzbNb3NpsOMThXjkHU7HQkggdCGZc8EVv8ACk1Ydr3VmrdTptS1GGONkmyMjoqs/X2UE0Sd9BpctmfF/iC4T+2GiQ/JIzxH6kHZnuP3mwnvkVcLqGvT/P8AyOGrbnbXU+8fh1fnUvDmn3LHJa2jBPclBsyfrtr1oO8V6HkTVpNeZ2lWQFABQAUAFABQB5H8SPiL/wAIpavHbIHuX3KhYgKp6FiDycenIPGcjIrhq1nH3IrV9e3yO6lR5vfk9F07nwVPqgub17m+l3yTOzvIwZt0h9QATtHQepx0ySIjDmVttP6+bNHJRd/P+vkj7q0C2TR7GC2A+WONF47tjJP4nJJP415kXZnvbK2xo3FyqMPMXYh/i6gdfvHt+orR+lkOKTWju/u+45DV9GHiSN5YJ5Iij7leByucDAzgjKnHT9RSjK12kmTOne0dUfH/AIoeaHVJEmbzJ4Hyz4wWKOF3EdiQMketddPWN+jueTWup2e6Pvz4QRmLwlpwP/PFiP8AdaWQr/46RXpQ0ijyp/Ez0mtDMKACgAoAKAIbiQxRO4xlVYjPAyATyew9aT0TY1vY+X/HXi3wz4ktri1uBJHdxRs0ErJu3yhcqu5SwBc/KykKAO4IGPOlUpzXW9rp/wBbHoRp1IO2lr6o+Xruyhe1ZIsGWNd5PcncBj/gIx+ZrKMmpJva9vwNnHRpbo+49N2arYqkgDCSMB1+q4P/ANY/jXHDc9W7jZroQXlotvH5YWSNlGFeDofTdG2Uz/eI257d61asv8v8tjrhJ94tfy1N16SWr8vxMO+1hvDmlPf6kY7cqp3BT15+XH+02QNoz8xwCetYpOUlCO70/wCCZynCnef2Y7f5a7nwzfa1Nql/Lqky4W5lbI7AEhto/wB0EfWvZVNRiqa3Sv8AM+ZdVzm6kur28j9KPhPdxXfhbTzCchITGR6MjspBx3H6jB71tTd4o5pq0mei1qZhQAUAFABQBxfxAkkj0eURt5QdokkfONsTyKshzxj5ScnoB14rnrX5Go+X3HRRspq/n99j4g8cyWM08k2jmUw/IrSsqpHvVQr+SPvFcg/OcZPI3D5jxqhypTt7tlv1bO32t7xe+vyRxNqTFE8zdNqoP95pQCT7gEk/QCpkuaSgul2/RL/MqPupyfWyXzZ9haLM8MMZhOHCLwehGOlcKVtj0y7e+IpUGDCd475G365puTehWiPmX4gard+J5ZIZXxDaSIoQEhdzKc59SuQMnpk4A5rtowVOHterdvkeZWm5y9n0XTzPJVg8qJbd/u+a4z7nYOe/OBiuptt867L9TkSt7r7n0H4A+Ik3gWHYCJIRGwZcHymyA8LEjGJom8yFzkb4tgyfLUVj7Rw1hq30NfZqfxaJdT7B8FeIm8VaRb6o8Zt3nU7oyCACCRlc87HADpyflYcmu6EuaKk9GcE48knFbHVVoZhQAUAMkcRjP+fXn0AHJpAfMvi3WH1lZhcu5VSw2AnaF9gOMAc/kTmvV9hG1n2OZVWnofK2uObcNZB/lSXC84yoyc/QZGfp7V4srxg4X0jJpeiueqrOV0rNxT+bsdP4fsre+t/sDsN00UmwjoJVcE9TktgowHcKx7GssLGM51Iv4nFJen/Dl1m4Rg1spanv2hTN9lj3ghkVQR6HA/rXmNWbT6M9aOqTQeIdfsvD9sbi/kEe8EIDyWPsoBJ98CtadGVV+6tFu+i/rsZ1KsaXxb9F1Z4NeahZanZyz2e7eXO/eMFixB3AZPyn14OTyBxXq1uSEFTjpZf1+X4nkwcpSc31f9fmcBasVkE0qMwDZxjgkdGHXjoT9B2rh0Vlf+uqOlX7HsPhySPUZ1ijVZYlQNI7AEKcjC89+uQSenAr1IU/bPkT5ocurcdn2T7nHOfslzWtK+iUt13sfaXhK/t76wQ2yrF5QCMi9FIGOO+CBxnPpniqnT9k+VbdPQ5VLn1e/U6asygoAKAOF8d6q2nWZSI7ZJBgem0Z3bsc4Pyg4/xFdVCHNK72RjUlaNluz5ovdS3bpAMF8Ap1wxzkccYJH45Nd1WsqcXy+8+iX4X/AKuZUqTm1f3V1ueOX2mtLOMqWlGWBABBRuRgEqCfx7815FTD1HFKKu7f8HX5npwrQUm27Ipr4e1O6LNEMBCHTHysrDoRgnDdDwT04NVRwk4tTejXmRVxEWnFar0PcfBvig21r5Oogu0ZKFyOflbblsdeOSfqT7rF4V29tTV39pfqv1NsHiUn7Go7L7L/AE/yOP8AGAPi+7Y8rBEFVPpknI+uGP8AwIelehQw/sqShLR7y9X/AJKyOCvX9pUco7bR9P8Agu7PObm+g03/AEZB8n3FUdTzksT3z2A74yfTwa16k3bSK29P66nq0rQir7lSNjezeQFZSf4VcHAOTghTjt0J4PGKziuVe6lJ+a/LuU9X7zcV5fqejeBbaXTpGg3fuXOGHv1498ZBx149K9zCcyvF7Ja9r9F62vf5Hl4m2jXfTvbq/v2+Z9M+DNUGmXSoTthlARh2H91vwPGfQmuutDmjdbrU44S5X5HuNeQdoUAFAHgHi7Wl1W9kUA+VCWjTPH3CVcgYBALDIPORg9CK9ijDkiu71OCcrvTZHlms24s0M68xZwwA5GeAcDrjn6AntwN3BSav01EpuKaXXQj0u2gnhSYBTsaRM47B2x+QIH0rS1tDI21s0HzRgKfbvQBhSaeFkcgbRIr7sdyWIJ/Edab2EZcUBe1kUfe3BD6/KhyP5VEtVZdi46O55jqWkpvy0ZkI4A6Ff/19e/5V8zVpT3g9t16H0FOpHaXyZf0XR9kpuIkWNEG2TOdxJ5wuABn8K1wdKcpc8/hV1r+n/DmWJqQiuWGkt9P1O40C4hE8gTgoxAHv/icgZ+tfQRSjpFW8keM23qz063m2gH0ptEnunhHxD/a8JgkBE0Crlifvjpu9QePm9znvgePVp+zd1s/wO2EuZW6o7GuY2OY8Ua6mjW5VT/pEoIjHcDoX+gzx6n6Gt6VPnfkt/wDIynLlXmfPN2fNbJ5zyfU9j+P869uOmh57OK1W1urxWtrU7tu9my2MRxo0shJPJIjRgg5JJVfeiT5VfzS+92BLp6kvhe4aKExyBR87YwcjGflOfccn3p69fw/ANFsdWzIGAIwW6EcfniocuVqOuu2n9WK5b3a6FUYY7uxV/fgkY/Sqk+VN9u25KV3YzLWJYJdv8LTSMf8Av2P/AIqktUmuw9nYjuNJttSYTQkDBwSO+OD/APrrm5IVX7SL8tOtjpU5U1yP1t2M/UQmmxpCilsuuQoyfmYLk+wzknsBW8UqaSSdtFp5/wBamEm5u7fmYHhnRrm+v9QvYR/o1hFLcSn2DEBRxhnbawRepI7AZrPnUZa9XZW7lWutOiuek6e+9NzdscHt9fetzM7Dw9qp0m7S4GdgO1x6oeo/DqPcCsKkOeLj16Fxlyu59Do6yKHQ5VgCCOhB5BrxNtD0Twfx9q6XOotCCMWy7Px6tnHTk4/CvXoR5Y376nDUd5W7aHnE9/GoDbh1wORnPX19q7LWMDZ+GemrruvyXDqGt7eF2fPQmVTCqH6hnb/gNcmIlyxst2/y1NqSvLyR51qumS+GL+awRmUW8rIOeCoPyn0+ZSD+Nb05c0UzGS5W0adpqokXa7MP++f5jBH5/jWpJpG7EX+qIJx8ozjt+maiV7PlV30W2paWuuiKn2+PcxkwrKRwcZBIU8df/wBVC2V9H2HttsVptYReI2GewC4x+OR/KntsI5i6vJJmJ3eufX8T1qJO2iBI+kfh14cW+8Em3g2wz33nM0mBlmSZwgc9SuEC+wJxzXmSnyVE3qlbT1R2RjeDS0ueK6XNcWt7dWdyDHNC2xo2427SR/PPPT0r1YtPVbHG9NDqEuTHy5AHrmqsI9d8N+N7e0skguSWaMlVIx9zgr19MkD2ArzqtByleOz/ADOqFRRVmeLX0iztJPJh5pc5LAnJY5PyjryckfTNd0YpO9ulvkcrfTzv8ypbaVbnDyqZH7FsDA64CrhQPwz61foI6/w5q8vhUyf2eI1E5UurLkErnbyCGGNxwAQOelYTpqpbmvp2NYycNht/of8Awl1zJqd0fKaYqCsQwuVVVyN248gDPPXNeHicXLCSVGik7K7cul+mluh7WFwccTF1qraTdko26bvW/Udb/DywU5cu31bH/oIWvPeYYiWzjH0X+dz01l+HhupP1f8AlY2o/AmjBcMnPrvf/wCKqViq/Wo/uX+Q3haK0VNfe/8AMz7j4baYSWh3Kzdw7Htj+It2FdEcZXj9pP1S/SxzvCUX9lr0b/W5jzfDeJQcTPFxwWAZR7nAH9PrW6zGovijH5XX+Zk8upv4JS+dn/kYI+HyEEQX9tIepzheP++yav8AtBdYf+Tf8BGTy2a2l98WvybPoHwdf2XhrSLXTbqZI3hRgWPyozFyzFSeoy/XFSqqryvBS18v8rmcsPKgvecdPNL8HY8z+I40nWLpL7S3b7YR5c7IhVHjHQknaS64ABUEFeCeBXtYdTgmpqy6d/8Ahjyari9Y7nnn2aeFwQ6si8iPbtyfdzuPr0A+vU12nOR3Vw7PlZ1tuBmN0QkH1BJ6HqK55Qm3eE7LtZM0UopaxT+di8blY/vcYrYyK76sAcICfwOPyH+IqrCuKuphPmnYRjGfmYD9On8zWVScaUXOTskr/wDDGtOEqslCC1bt5L1O2tte2xrBZxSzkDgqhCk9/nfamSTnG7Nfn1SUqk5Tlu3f+v0P0SlCFKEYR2St3/L8TQim1SfhhFagddzb3H/ARhfyc1Ki/Qtyj2b/AAJTo8twwaWed9pyAG8tc/RACR9WNWovZmbmk7rTyX6mm2lrIMPLKh9pWH8jT5LdX97F7Xsl9yKtvpjQrJPb3MwKFgFlfzI2CjO3a7jqepGCFIwckCumlSUlrK2/6avXby/E82tiZQnblvotFpfRvTR/0jNg0nT7o+fJbxI8vzOuxeHOC38PIJOQeuc5xXA1fX8Ox7KfLovv/rqc7qkUOnzMiYSMcr2AB5IHYDNfZ4CUZUU0kpL3ZWVm7bN/L9T4nMFOFZqTbi/ejdtpX3S7a/oZ/wBoBGV5HqDkV6x5FyvPKrdwCOhoEQmcN1xSGe3S+H9PkYu0EZZiSTtAyT1PFeGqk47Sf3nfyR7FR/CmmN1gA/3Wdf8A0FhVe2n/ADMXs49ihJ4B0KZxLNaJMyghTKzyYzz0d2HX2rOU5T+JlxSh8Oh0b6VbSIY2Vgp67ZJF7Y4KuCOB2NcTpR7fmeksTVX2vwV/vtcd/ZVvjGHGRjh3B/MMD+Oc1Pso9vxZf1qra11/4DH/ACHrptunQP8AjLKf5vS9lHt+L/zF9ZqbX/8AJY/5CNplqwKshIIwcu56+5bI/Cn7KHYn6xU/mt6WX5FT+wLAKVEWAeSA8g7Y/v1SpxWyW1jJ1ptpuT02JP7KtcY2Hj/bf/4qo9lDsbLE1F9p/gZOo+EdL1MFbiIsCMf62Ufyf9etddH9xf2el9/6Zx1putb2jvbb5+hUi8DaRCNqQsoHpLKv57XGfqa6/b1O/wCC/wAjj9nHt+JY/wCEQ0v/AJ4k/WSU/wDs9Ht6i6/gv8g9nHt+LHDwnpY/5YL/AN9P/wDFUvbVP5vyH7OPY//Z',
+
+    '2M': 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEBLAEsAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsqgAoAKACgBCQtAHkHjf4vaf4VkNpblLq6T74DfJH7MVzlvVcjHc54rGU7aR1N4076y0PGJP2hdVe4BjS3WLPKbT/Mnk/R/wAKx9pLyR0eyh5/edtpXx+iuEb7RbZlBG1Vfao+pIduTk4wTWyn/Wxk6XZmtpfx5064nEN9A9spON6s0m0f3mUxR/KO5Us2OQpo57fErCdL+V/oe22GpW2pxiazlSaM/wASMD+eOQfY4Napp7HO046PQvUxBQAUAFABQAUAQXE62sTzPwsaljzjgDJ5NJuyuNK7sfM3xS+K8E9v/Z+kSuMPmSZDt3DHyxoQc4O47zgdFx1rknUT92J2wpOPvS0Pky/vp5ZC7kgyYJGcjp1OMckeo+vNIvYottY5A2sOuOh/z3FSO3bQmF08bLIpwTx6cjpz6Ef5PNK3TsVtr3Ntb6Z184EYdQrqwB2dsqeuD9cD6Uc1nZ/8OPl0uv8Ahjb8F+KdS8FagtzbSuYFI3RMx2FSw3AqTjDDuPrkEKRonb3o6Myt9mW35H6F+Htcg8R6fBqdqf3VygYDup6Mp91YEH6V1J3VzhkuV2NqqJCgAoAKACgD59+OHiaWyji0mFiiSxNPNj+NQdscZ/2SwLMO4A7cVxVpNWgvmd2HgtZvpsfINyjSzMp6IP1JAJ+u4muVe6jua5mc9dKzvg8E4/p/n2reL0uYSjrYsmDYgIBYjg4/z/kVF9TTlsiLauMYIwen+fzp3JsdVosH2gGNRvUqW9wOpOO4H8QHQc9q55uzOuEbq3Q1JNMjG2BxhoxkEgHcuQRn1yOPQEA1pCXVGU420Pov9n/VWgS70N3BjjK3FsuSfkf/AFuCegy8fA4zkjqa7qb3XzPNqxtZ/L9UfSldByBQAUAFACdKAPkb49XEY1KOXd/y7LEF9SZHJ6e2V56HmvPrfEl5f5np0FaLfn/keNWmi3srh1gZ0uEAyOCucHJzgZBAPv2rjbVrLoejGLTu9mvuJ5vhjrNx+8iWNgexbBGf89jWkZWWzJlTu90joNO+GV/HERcSKHxwBkjjp1x07HPtzUNt6pWNIxUVZu7KTfDe9835E+XPYgYI7jIIIP8AdbA7ZxU8z2sU6cVqmdJpPw1ubacOs6QuOVCg7Se+VyQvvtYj0AFCbk7fmTZRV1+H+RzfjaFvD9yqTfNvXaCMgZPbP6jHQVolq4rdGc37qfRndfCbUV0fX7SM4MdzAbUHvuYF1z3zmILXZTdmefVXuu39f0j7KBrtPNFoAKACgCpe3MdlC88pwkYyT7f59ePWlsNK+iPz38b61PrPiY28zGW2FyFTp93zOAQP4hkhsY5B4zknglrzPrt8j1Ie64q2mh7Ne30emSC1toWnlVRnHyoD6Z/melcvLY9FNyV38izp3iK5X5LqKOEdsOGP44J/kKrm5dB8tzpBdrKhlGMAdqTl1BK2h57rWuTQMXS7Fqg/2FIH1J6fiRntURu3oaytFa2S8xvh/wASTTzqYruG6DfwlQpI9vfHPX9KrWDu/wASPdqRtFr5F74oaKNZ0nzkQb1wwPcEe459a1e8Zx+Zy292VN/I8Q0FdT0l4LqDPmQyK0LdcyAHb147kdDwTjmr5lF3RkqUpK1tD7w8AnU5NKjuNZffc3H7zbt2iNSAFTB5zxuO4kgsR04HfG9rs8mdk7R6Ha1ZmFABQBS1CyTULeS1kJCTI0bFTggMCDg/jSaurDT5Wmuh8SXHgC407XRb3UbxCC4QxOwX97H5qhXXaTw2c+xyCARx5sk4Pl7ntU0pwdRWuunyO78RWD3twV3mKMOSQv8AHzwHxglfUAjNc/M1Lyud8YXgrX26aHBQ+C0sLgzxSSOMhiCAqDGOAMZ5xznrknOTTlNvSyt6Dp0VHW7u/M9H0yCR4DGpwT0FYWctDpaUdehhXGiJOzCZVcEbWVsjIznBAPqAfqB6URk4eTCUVLSyaJ7LQrOALHFbxxhT8pAyV/3Sen4YobctGCpRgrq3oek21mLi1a2YA/L8oPTpx+tdsFaPKzy6js7o4XWLL7JIsaHeFlt/LQcKrrujxwDw0jqzYGcEA9qz+3p3X4X/AFsda0oOVrNRav35nH8le3mfT2nwtb28cb4DIig46ZAGcHjIz3xXrrQ+Ve+hcpiCgAoAKAPL/Hscq3unyIq+VvlWRiCWHybkAxwAWHfvjBrlqrY78O7cy7q33/8ABscdc2yrJ8xwTk/rXDy2Z7dOXu6HPXBR32R84PXtx7Vk7PRHStN9DZ04CNgzYCjGe3bmrSUWmZP4XFFHUpAjGRXWRyxyq4wF9fUdhWVRK91ubU9rWtZfiNsLpJPmxgjgj0NKLRU7pWO1tZNzjbxlc12p66HkTVl8zzLS9al8a3EVjpUEqHz8yzSqqqoVskjBJPKg5P8AdAAJIwRg07W1FVqx5LK9vPy6fifWAGBivTPBFoAKACgAoAqXtubiF40IVyp2kgMA3Y4PXmk1pZDTs7nheswTRSeVLxKq4bHTdjnHsT09q8erdOx9JQfuprbc86n1eyhm+ws58/ugRs/XpjnI796yS0utj0Ypy2067mnE6qoEfmENgY2t3GQBjuR09RzTafQajrq1pruug661CKwhM0kchQdTgDHXkhiCB8p56HFTsP2bezStrv8A13K2i3iaiy3VurpFIucOu0kdmx+nvms2rOxD0Vn8j0fTmLcL1wQPrj/GumD1PNqKyNj4aeCJ/DsX2u9k3zSrwgAAUHnJwOW56A478nGPThBr3meLUmn7sVoes1ucwUAFABQAUAFAHl3jXT2hnW8QfLJgH2YDv9Rj68151eGvMtj2MLPTke6/I8a1bTFurhLuH93cwklHGAcHqvOQR7EEfjg1xLTQ9yLTXLNXj+XmbNvqWo20QjUoSuCCU74x0BxkDjj+Va3aVrkewoyd+aWu6v8APsV7qyuNTTN9KTHxmIYVTtzgYHUfMc5/Ksntc1Xs6btSjd93d2+/Qls49mWACqAAMdsdq51vcmb+87LQCBOhPABH6nmuyno0edV2dux7aOBx0r2j5wWgAoAKACgAoAKAOT8X6nb2FiyXAB85ljUejOcA+xHUfSsKrSi79dDpopuacdLanh97t3Bk+n4ivGl3R9LSenKxdpwD+VDbsdCsOVS33jx6VnuN2jsXHmigQJxnqR/jV6RVupxayemw+0vhCTLnAA4+p4H5nAFOMtbhONlY98s5wUAbqOP0Br6C1kvQ+We7LoOelAhaACgAoATpQBn3GoxwkRqdzt0A/madhnz/APFzUZUjjAySh8zjgbgQQPoACPx964a2rS6K56NBcqb66IyIZfPQP2YA4+teWmeztsOVGPCnA96uwc8u48xSR9DWTVth8zluUipBOc1jqbrTYuaIp1LVrexX7kR+0Tf7sZGxfq0hU49Aa6qEeaa7LU5cRPkpvu9F89z3mK44Y9Arn/CvoeyPmCjba21rGVwT5UxjIP8AdBYAj644qdlqO19jpYdVilUN6+lOxNjUpCKk92kHHU+n+NA0jFn1EyZCnAHHHTn+Z/lQUkZcJMkjHsAM+/Pr17fkafS4/I82+JGlm8th2JkUE+gOQT+oriqK+q6M7ab5dDidEZvs6RyjbLEPLkXusifK4/Bga8u3K2j173Sa7GpuMZyKtaEg8rN7D0qGWjK1C+W0Q45fHArK3Q2Tsdz8MtKa3t5dUuB+9u2yM9RGmdv4EksPYivXw8OWN+rPFxVTmlyrZfmei7iiIB/Edx/Hn/Cu9/keakc3PdGa1eVFw5cYHc/Nz/PNSuxWwyC8DqCG2+xOKqzWgaHpV/elBsiOCTgn+dIhIyGyzZPYUjQpXB2AKOuc/if84pi2IH1CGwMcLAtLO+FReuM7Qx5GF75+uAaT00BIra1aLfwyI3ICED69c/lWdr6dzRO3yPNdZ0WaGJdZs1LZRReRAc7oxtM6jucDEgHJADjPzGuKtTfxx+a/X/M9ChUX8OXyf6f5GbNMjQrMh4YAg9ua4juS1sZgu3c7elJmlrGfBp76veLbKTl2AJH8Kj7x/AZ/GqhDmkooznP2cXLsfRdnbpYWSQJwoAQD6cfyFe7FctkuiPnZPmbb6sJWwxPZVOPwGKXQNjkZG328YHBaQN+WWNXt9wEE0SBuc59iR/Ki7WiC1z0hhkZ/H8z/APWqWCImbaAR3pj8ijN/rAP8+tHZCOXf91qiyNlghAx/vJnj6Zzj2okruw1ojpsZVnBPUjHbnr+PI/Koeg0VtPfyzJHjhXOPowDfpuxVBsc3q3g22uwRbMbXJ3bVAMYPU4TI257hSB6DrXJKhGWq0/I7YYmUN1zeu/3mKvg8Q4DTbseke0n/AMfOKj6v5/h/wTX612j+P/AJljg8KxieBPMklYgs552rjI4AxnPGOM8nOOd4wVPSP3nJOpKr8XTojvba7W/gt5kBVZV3gHqPlzzjvzXQupy9Uhl+/lxTMP4Yz/ImkM5iz/eRKx/hAx+Of/r/AJ1XQNmVJJCzt7Nj8sVBSP/Z',
+
+    '3F': 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEAYABgAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsugAoAKACgA6UAcdq/jay0mTysSTFThjGo2p9WJAz7DNcE8VCDtFOXe233nbDDSmrtqPa+/wBx5z4k+NdtpEoW2jEqDG4HIY57gjIx27n2rB4mUn+7SS89zshg1b33Z+Wx2fgr4kaf4yUpDmGdesbEHPrtPfHcEA1008QpvkkuWX4P0OSthpUlzLWPft6noldpwhQAUAFABSAKYBQAUAFAHF+Lda+xR/Zojh3Byc4woBJJPZQPvN0HTklVby8RUf8ACj8/8v8AM76FP7b+X+Z4vb29zqbNuBWJh82R0B5G4NkK7DlU6xx4aUs7BR5bdtEeslbV79P8zlNS8Gz3zSSxJmJcCNSTzg8nnntxgDr0HZWa23O6LSSUvmbOg+Hjp2y8sR5VxEwLdt4HVJAOjj+FxjI4IHOUrnNUdnaWz/q//APpPRNSF/CpP3iM+/uD7g8H8692hU5lyS3W3mv80fPVafI7rb8jbrtOYKACgAoAKACgAoAQnaM+lJuyuNdjx7xBJ9omcsQASdxPOI02swH/AF0do42A5OBgZr5qUrtvue/ThZJLp+f/AANWadhYxwwquMF+SO/PJJ9WY9ew4UYAxTilo/u/rzNle7fRf1+BqSW6BcAYxWjikNSdzhNZifS5v7TgGUTHnx9mjyNxx/eUcggZ4rLzW6N+XmXI+u3kzrNCu0jkDQn93J+8X0wfvD+vv1710U5crTXTX/M8qrDdP0/yPSQcjNe6tdTxttBaYBQAUAFABQAUARTfcbHoayqfBL0ZcfiXqeMarJFZuk906pHl2AYnDOskuxRgMSSSGIAP+rXA4r5pRcnb+tz6WDsnb7+yaV/8vmdBomtWmrQCa2ZTlA/BJGD0IOFJBxxkAn0FditF8r0aRm02k46xv0OQvdT1W3vRHaxrcxuX8xpWlDjAGzChRGqMSQNmcBctliTWitZtsv4Wko6d7r/gu/qdVcxeZblHGNy4YduR057VyystYnTDVnH+Erj7NO+lHO+2G9Ce6Z4x6jBVf+AkURdjLEwXxrZ6M97tm3RKemVH8q+gpu8U/JHy8tJNeZNWhAUAFABQAUAFACMMgj1FJq6a7jWmp5Tq+iR380aT5/0aSSRNpKkE42kFSCMb3HBr5ptwdl0bPpaTTi2+qX63/JDtL0wWUknlII1Cqo9Nozj6980R5pTbfY3bjGKiu+yNuCNHwwx+GCPwIroSMJNxuVdUHylRwazqG1DueY+F7wanrU92kQiWGR7POOX8hirOT/ECwwp7Abe2SnHl5fRP79RVJuUZQeyk7fl9x9HQjCKOnA/lX0ENIr0R8tLd+rJKskKACgAoAKACgAoA47XLZo7mGaLu21h2KkEn8euPevCxMOWacep7GHneDi+hkXMshw9uqycdS+3GfQbWyfyrkT1vc9aCW03b5X/UsWzzyDc5RF9FBJz7sePyH49q6bq2hnNRi7Ru/N7fJFe8cuGx1FYydzWC5EcB4WaOzXzRwsk0jk+u6Q/N+PzE/UetK9jKqtWv611PoSJgyKw6EAj8q+ki7xTW1kfLtWbXmPqiQoAKACgAoAKACgDJ1OIPtfum4j8q87Ex+GXVX/I7KDtePR2/M8q1TV10gRGPBMsypg5xh2K/QfNgD1J714lrLRbfkfQ09XZuytp6lmXxNDDb+ZcstuBxtzkk+3/6q059NdDSNJ81optktqbvVYStrC8Ebg4nnXyxz3SM4kc9xkIp/v10QozqK9uVd3p9y3MKtenRdnJSkvsx1+97L8X5HKX1n/Z0iWcX3U2oueOhwfxOT+Nc848j5V6CjP2i5311PaPDV8t7ZIQclBtP9K9rCz54cvWOn+R4OIhyTfZnQV3HIFABQAUAFABQBm3t79nU7MZHf/Adz+lc858ukfvNYx7nJ2usPqolViAoZ4kI5+6vzP26k8D2rypTlVlyN919+7PQjBUlzpdn/wAA8I8ZXM91frZQKVsrCVJAwOfNlVcZc9T5bHgdN+5j/DjOrJU06NPSK0fme3hqSklWqfG72XZP/gfobPha0fxBq6XEiZtrQ+Y+77u4A+WPcl8HHopya58LB1aqk17sdX+n4muMqLDUHBP356K29uv4aerPejKdpJ4OCce2O/5Htn86+mbsfHHketxFpRO33S2PTqc8fQdceorwKi+15nuUnZcvkdR4aN1ZZkix5efuk4DKSfbhuMg9OcH1ralGcJc9Pbz2a/rqc1WUZLlnv3XRnpFpfpc8AFG9D/T/ACK9eM77qzPMceXbVF6tTMKAEZggJPAHJoAoXZk+zvIpMbBSVx1GOec9yOuen15MSuk2hrc4htYvUzmViD04T/4muJzl3N+Vdjntb1i5gsp5Vc7kjcj5U4O04P3e3BrJyZolqY0d3/YcN1DE7O7PH9nDbdyJNawTSN8qrnbJI5BxnLKucCprQjQfNDRuNl63d391vvO/D81dpT+GLu/TSyOItoppmFuoLu52gDklmP8AU15DTl7q3eh9HJxgud6JavySPedG0eLRbJbSPHmfekb+9Icbj/ujhQP7mD1zX0dGkqMFBb7t92fH4is8RUc3ttFdl/WvqXrjMMRXPJ4HrnjP5DH1I96qbsjGK19Dmr7TzdRBEX7vQ+pxhf8Avo/19a4ZQ5kklov6R1xnytt/13Omhg8pQi9FAHHtgfrx/wCOg967lGysjjbu7kgVoWDrwRyP8+/6j0p2tsI6eCUTIHHGf0Pcfga3RlsS0xDHjD4z2Ocdsjpn1x1Hvg9QKAIrsZhcf7J/lUy2foNbnl0/yj/PrXms6TC1iLzNLvpWYIqW0xDHoCIyefYd/wAKz3fKddGHM25bJP7zlYLhLy4iL5826sLGRDjjP2NNw65H+rPOO3WujFUpSj7WPwxWvzf/AATTCVo037F7yldfcdB8PLNbm6nuzybUbU9nfdk/UKPyJrgwcOaTqP7Oi9X/AMA78wnyQjSX2tX6K1vvf5Hq4bb93lug9Aef/r/8B46ivabtoj5xIYYCzZIJ2jv656fhn86z5bvXoVe2xa+z5KrjCg5x69x9e9acuy7EXsSFOcjgD/P9f1/2gQwKtxKEUg9R6fXt+I749KzlONPd/I1hTlU+FfPoaWjXK3MJKgja7Ag+vU9PrVU5qavHuRUg6UuWXY1q2MQoArXsixQOzHACn9RWc5KMW5bFRTk0o7nmV8PL/CvPeh0HOeONFvNW8N3OlaaoN1cqgyzBFwXQyAnk8xhlHHoDWEKijJuXR/kepCLULRtdrb1/4Bzlh4f1SC406X7M2210+3gmbdGAJYop42ABYMwO+PDAY6+lehKvCVKVNXu0raehyQw841Yzdkoyd9eh2Xw+t30iyaO7UpdSyM8kfG4HcwAyCRwoByDjnjrWGGj7KnZ7vU1x0/a1ny/DFJL5L/NnosQLcuduey8YHfn3wSffHrXatd9Dy3psSRsqPgdv8QD/AI/jVJWEXOn+fqP8KYjNvLsQjaOp6D19T9B/PjjkVz1aipLz6HTRpOq7dFv/AF5lH745ryb82r3PYSULJbIs+Hn8ueaDsQHA+nyn+Yrswrs5R+ZxYtaRn6r9f8zrK9Q8kKAOF8bawtjbGIHBIyf8K8LHVrNUY+r/AER7eBoczdR+i/UymZLxY5D92RVcD1BAI/OnOqo6Lcwp0XLV6JM1I9xGT35rlin1PSslsWLguY+G2NjjaM/QHg/0+tdyvZdPQwSV3ZX16/8ADmdpdsq3DuDuLNyW6jjucn+L9K7oR0TPOrP3mttf6+XY6tAD0/z0z+hx+FdBxjFjKtk+n65/+tTAmJA4/wA4NAHDXRePUpFkOV2J5Y9FO7I6n+LPPHGB/DXjYr412se3hbcjS3vqa8R4rlidMkFhL5GoJngSKyfpuH6riuqg+Wol3ujlxEb0n5NP9P1O4r2jwyOVxEpY8ADNROShFyfRFRXM1FHneo29jLIJpENxODnLsxXPumdhx2BUgcd+a+Ym4X5km5PW7/y2Po6bqJcl1GG1kl+e4RKMNdXDLHGgLM7kKqgDJJJwAAOSTwBV04OerHKSgrIdp2v6Vqyk6feWl0E6mGeKTH12McV2Om47qxzKalsM1DxBZWRihMgZ52EcYTncxcIfmHACsQGOcjpyeK6YU5SjeK0Sbb22J54xklJ6ykklvv5dC/YoUfCjqCT+JFd0bJK3Y82pfmd+7N+IgqSvctVmBLkdD7UCGOeDjpQMxdYss27XYA3xspzjnYCVYZ64G7dz6Vw4iHNFz7W+7r+Z34afLNQ6O6+fT8vxKNvKCBivIiew0Vr2Q27JOOsTq35HNaJ8slJdHchx5ouPdNHpCMHUMOhAI+hr6Fd0fNbaGZq5PlbRxuNcOK+BRXVnZh17zfZHIi3G6vHjDU9bmPBfj54muNPsYNCtMxjUi4lf/plHt3IMc/vC4Df7AZf4q9SlFR17HJNuVo9/yOS+Guh6ZoEMmq6lGbmKCNRsVVc75GADbXKqdo3dT1II6VhOfNJJ7XOqlG14wtdK+vl+p9C3fg+0vhbT2JNr9nPmxIFUR/M6ysGQdNzrklSOSTzmuiFWVOLhHWLTVn0v2Mp04SkpzVpRknePVp9V/TOv0rLuS/3sYOOmR1x7ZHGea6KMrrXpoceIilK666m1AnlfKOh/riuk4Syw5x7j/GgViu6dPxpFLQvvbLLbNCekiMp/4ECP60mrxce6f4iT5ZKS6O/3HlumXJKjPUcV8xs7H1rV0aN580ZHtWpjax3OhymaxgY9fLUfkMf0r36TvCL8j5uquWpJLu/xP//Z',
+
+    '3M': 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEA8ADwAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsugAoAKACgAoAQkKMngD9KAOQm8faBbzC2e+g8wuseA4YBm6AsMqBzyc4HcjBqOZdzTkl2Opgu4bkZhdJB6owbocHoT0PB96q/YizRPTEFABQAUAFABQAUAFABQBj6/rlr4bsZtSvWCQ26FzkgFiBwi56sxwqjuSKlvlV2Uld2R8HeM/i9q/jO6lGnNLbWpBiWGJ3GY88ebhtm49WIxwdpyAK5ZStrLTyOyMOkFc8nudO1K1jFxIjeW/RgeeBn6jp0/wAKSqQbsnqW6U4rma0Oh0jXfEHhh11C1eeAHA8xSwBBwcHqCDgZBGDgA9KFKLdovUHTmleSdvQ+3fhL8TB48tnW6KLeQ4LKoCblJPzKu5jgcAnu2eAMCumMr6Pc45R5dVsex1oZBQAUAFABQAUAFABQB8hftQau6/YtMVsKQ8zIN4zn5VJPCN0cBQSVxk4DisJ7pHTT0i/U8W8B2q/Y1LAZLE+/WvIxEveZ7eFiuVHt8Gjw3UPlyoroy4IYAjB69a5EnutD17LZrQsXeiwvB5O0BdpXGO2OlS7xd0DSas1ofP3h+/fwl4vha3yEhvEG1e6swLJwD94EqPlIGQQMivepu8Yye58pViozlBbH6XqdwBHQjNdp54tABQAUAFABQAUAFAHyl+0zoqTwWl3GHEv73ceCm1PL46ZDHdxtI+70J5HLUlyOK73/AAsd1GDlCT/la09b/wCR4rb20ljbQC3eaLESErBCJWLNgknd3yeg9+teVpKTTSevV2PYinGKcW1p0Vz2Hw5rJkQ2s4LzQDLtgLkeuASM/Q4qG+V2PRg+Za3v6W/AxrjxLPc3pt7aaHC4/cyxujEEkfLJ905IxycZoaTjzSTS7mDlLm5YtempxVl4QPiDxtFaoNkSzQyTs2CACFkZf988qg55xn5cmu6i7RjFvd2R5FeDcpyivhXM/L+rn6AQQpbxrFEAqRqFVR0AAwAPoK9Q8YkoAKACgAoAKACgAoA85+KfhqbxPocltaoJJ4mEqKSBnaCGAJ4ztJwDjOMVhVjzR03TudNGag2ns1b8j580xY7SI+eAvljGDyQQMY+vFfPvRu59bStyj/DbC7kmuVChTxjjP4+h9j0p20NotXZ11ra2xyQgDdSOOvr6fjS0asOSS1Nj4ZeH2l1i91aWMrGXHlEqRuaNfK3ZIwcfPjGegNelh4Xab2irr1Z4GJqckJxjZOckn3st/wAUj6Ar1TwQoAKACgAoAKACgAoACMjFAHxt4rsG0y/u7FjtYuXibqCATg+/B5HqCK+fqR5Js+poT5opejI/D9tCYjJK5WXHzIsQJLD0PmLwe2eaVlY9eNN2TUYu/Xmat6qzOltDIBmQAOxwqj0PC5z3wRkcgHPJ61z2u7IwqS5E7/1+R9MaTZ/YLSK37xoAf97q3/jxNfTQjyRUeyPiqkueUpd2aFWZhQAUAFABQAUAFABQBHNMtvG0shwiKWY+gAyf0o2GlfRHxL408SR6xqEl1BkwtIXhYjBCtglWAzxnnqcGvDnJSk/XQ96CdOMbdEiXTtZt41U5G/8AlWPJbbY9ONfTVam7Y6oPPW5dT5UJDt2yFO4jn1xUK0Gku6/Mzleabemj/I+rtM1CPVbWK9hyI541kUMMMAwBwR6jODX0id1c+Sa5XbsXqYgoAKACgAoAKACgCGe4S2XfIQoH+eBQBwmpeKIb7dZxIwUnDMePXjAzwSB1P4VL3saJW1Pl680MaVdS2Jw6KxaJhyDExLJj6D5T/tKccYrwK8HTm103Xoz6Og1UgvuOhsdOgCAsi9OuK4nJnoKKXQ2NH05Nduzp0AzGgH2hh0VW/hz/AH2APHZck9s9eGoutO8vhW/+Rx4muqEGo/E9j6Js549MiWHGIowFUAfdA4H4V9Na2x8q9dTcimSZdyEEH0qBElABQAUAFABQBj3mrxQbo4iHlXt2B98fyH6UvQpLuc5e3DyRkzHLBdze391QO2T/ACrVLlQeSOQXTnk3AfLlWyf9pgf1GRUqN3cbdlY5yPwsI08pgHjiGEBGHj5J+RhglTn7rZH0IzUVqMays9+j6o2o1pUHeO3VdH/Xc5PUtH1BrsWFspUYBaQj5URjjLY7+gGSevTJHhvCSU/Z7re/S3+fke59bi4c60e1ut/8vM9Eh8OTeGVEujM37j5nRjn7QxwGaX1JA+X+5xtAHX6OnShSjyRXz8z5upUlUlzP7jtFvk1LT/tKZTzI2JB6oy5DA+6sCPwqrWJuOt7uSzRZUO35ASOxOMnP51m0UdXZ6pHcABvkY9M9D9D/AEqLWA1KQgoAKAOX17UWjItYThiNz44O3pgfzPtilvoWtNTm7AbHV+vmO/8A3yinn/vrn8a0ihNk8IN5ln4QtuPvj7o+gHP1q2LYuFQXXHAOf64/lQIq3G4lVjAMjsEGenPXPsBkn2FAExso7BSR8zk8uepPTp2A6AdulUtNyfJFtY9kaoernJP8/wBKdwsZ91EkNpOkQ2qVkbHu2ST+JNIexHcnbFKeyIrf+Of4igCVICETccEIBj8Bkn8amw7m/pF+xbyJDn+4T147Z+nSoatsB0VQA12CAseABk+wFAHmF5cfaJvtP96Vh9F2YA/LBoXfzNHpoPGU3xpyyL5S/wC9L8x/75Ubj7H3rdaGZqRxiGMKeAuBigCeUhXjA4BYf+gtQAkMebhW/uHP4lWX+tAiO/f5QPV/5ZP88UxFx+HA6bRj8T/n9aBlCdMxyR/30fH5dP1oAq3aea3lj7rPErfRSxIP1xj3FVYkuM3mEkfdXv64/wA/nSGVjKYSsi8FSCPwqWtCkegowcBh0IyPxrADA8T3Zs7CQrwZMRj/AIF1/wDHc1L2LjucTCo/dgjKTRK2P9sLg49G4/GtktF6CfUk0GQSGSQncPNYAn2CoPxO0A1SJLvmmWR0P8Dkf4UeQFuR/miz1L4/JGP9KYiyCY32gZbaWPbqQB/I0bAUrwkyRr03OB/49uP6J+tMRbmmWLdI/Cg8mnYBZULSRsoJX5gfTDDPP5UWApXY2zAkcSLjjg7l5H5jirJHSuEjCLwW+UAdvX8hUFFacYGBQGx2+lyeZaxN/sAflx/SudlGF4xhM9jsHXdn8lala+hcdGchYObnTxj78IPHqOv/AOr0rSO1uwSWouggNZMwODJLMwI7ESE/zFWtiNiTTZjcTTTEYBIHsWAIJ/lSW49jSs3+03WByluDk/7bcAfguSf94U+pJbs5DNPOT0QpH+IBY/8AoYpiIpSJL2NR0jGfxP8A9b+dAEmrJtt3Xp0/mKsnYt20m5B7AfyoAivwWiZgMsg3D8Af/rU0BhwSAnI6DjP+H9agpIZezHAA4yaBneaD/wAeMX0b/wBCaudjG62geEA92I/NGpx3GjzrRP3SlexYqfwqloUxzAadZThOkU8jLj0fD4/8frTZEENpIbHTVk6s43H6nn+tTshm7o8f2a0D9Xl+Zj7t/wDWprQTE02TCuT1lmc/lhefyoTtoK34E0HzXjt/d2j9BVdRF3VxmLHqQP61aJIrJs8DgAUAN1GTyraVvRT+vFIDnrY7SEHcbjUGhHcNumx2UfzpsR6VoYxZRf7p/ma52M//2Q==',
+
+    '4F': 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEAYABgAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APseWQRKWPalsNI+bfiR8UjbF7OwO8jKkjIXPQjjk478j8Olc7bl6HSoqK8z5Umu7rVbshSZZpW5J9SecfSm2oK7Ek5uy3Og1DQbjTY0a4UjjgnoSecZ9eAR/gKyjVUtjolRcdzjLi4Tdh/QqT7HkZ+h6H8a6kziasZp1F4x5THIHQ91I/pj9KCR/wDaZf5X5yMZ9R6GlsUWFVlQNGeBgj+n+fXimLYspq5dcEcoSfqpzkf59qku5p2140brLGcEYx/n9Khq5onY+u/hT8RxfRppd8QJUGI2JA3qP4f95R09V+maqLtoyJRvqj6DUgjI6GtjDYWgDyD4teMB4a0/yYmxcXOVHqqYO5vzwB2zwetYyfQ3gup8S6jqbXQO0/M3Vj2/z/nmhabFtnQfC/Tvtmo+ZjcsZxn1OeSf88VwYiVlyo78LC7cj6T8TaPFd2Dx7A+0BtuPvbSGx9eMA9a8+L5XdHqyimrWPjnxBpBinkSHJCkkL3xn9cenX869eFTRXPCqUrN8pxbAqcenH+fpXUcOxHkp16H9KYi9bXzRDYen/wBfNLYdy4LmN3DYxjjjv3pgakcqFQyHhc8H26VJaN7TtWeydJkJG0ghgeQRyKllpn3Z8MvFqeJNOVXb/SIcK49eMqw/2WHI9DkdquL6Gc1bVHplaGR8G/HzXJLnxBJa5xHbKqAZ9tzfqR+IFc9rts6NkkeGWk5llCE8UN8quOKu7H0P8LbL7HGz9GZj2/SvGryuz3cPHlR7o6vImAO1c6O1niHinwVJNc/abRcOT86ngEe3v3/OuiM7LlfyOSdK75l8zz7XfhvcuvnwJiT+Jex/Lv711069tJbHFUw19Y6M8xufD97aEpNE6FfUH/JrtVSPRnmujNdDHaBo+GBBFa3MGmtCLlaYiaOZoxwcUiloaNndEfIehqWil2PoD4OeJHsb+JA2FcFcE8Ngghfc/eKejHHORWfws23R9zWtwt1EkyHKuoYfjXStVc5WrOx+dnxrYXHiCW5Q5E6q2B/Dxwv12bSffNYRe5vJWt6Hk+nyBZ1zxzSmvddh09JI+rPAUe23EpIUdyT3rw5q7Po6StE9bTV7SJcPKikdQWApWsb3XcUXdvP9wqw9QQaW2g0r7DLqWG3jMjKCFGTxTv2BxtueVeJdes5v3McCSvgnJXOPQLjnJ9R0x710Rj8jinJbJHAp4LfXW3TLFbDtgc49+v45rf2ihornK6Dnq7I57XvhjNpi/aIHE0XO7aMFffHPFaxrJ6dTnnhnHXoeb3WjyoWIHyqCSfoOPqTW6qI5HSa+RkQkoR2rcw2O58I35s7qFwSAXOCPw6fiODWcjaHY+z/DvxFh0i0FvdKzkszoQOCjYPr/AHt/Hbp2pKXLoNw5vI+MfF2otfXDO53Ekkn1JOfwwNo4qI6Fz7HG6coluoxyAXAP9KuekW/IimveS8z6g0PR1mtQ107LEMhI1baOOrMRjkn8hXjuXK9Nz6KNPmWuxi6jb6TbNlJGUg9VZm5z3IBHWtFKXb8DNwhHrY6jw1fJAVEMgkVjgc/4d/8AOK55vraxvTVtmep6lYSPZFwDgrU2dro1b+yeF3t59lYiNN8u4KBjueB7knsB1/Wtkm9DkbS26HO6t4q1fw/N9nmgLEiNgR90CTOBlV25PI5LcgjJxXWqCS1ZxvEu/ux0On0bxBLdXL2N2vluOMggqfbIADfgAexXjNc9Sn7PVO5006vtdGmip4n8N/Z4mlVcKwPSiM9SZw0Z85zxMsjIONpKj65/w/nXsReh4MlZtGlZzgOuzjycf/XP/fX86Jdhx0Z9C6F4mhFnGtwodlyATngdfQ8biT+NYp20N3G+p88ajcebKT2BP+f1q0raGLfUNAi8zU7ZMdZl/nSqaQl6F0dakV5o+nfEGnXn2FbWxQlmABPQBe+e34d+nTNeHBrmvLY+lmpcvLDc4W78BSX8oaMyW6iNVfzMOS6nls56MD0BXBAxwMV6Xtope6uh5qws5O8n1PRNE8J+XdpMh2RqQSqjCgjvnPf0Ax6VxVJc2qVjvp0vZ2V7n0E0am1wemP6VVvcFf32jzDUvCaTsZYkU4JYcDIJ/I81kn95rypGE3headhvh3FSMHJGMfhwPYGtOaSFyR6JHaaP4TislMkqICecbcgfnms7N6saSTsir4qs4p7R4wB8qnAHtUrRjlGyPhrWSIruaNePmJ9xk817lP4UfMVNJNeZQ04eXMFPRwR/UfyrVmUTvbWSVIlVOwwfr0/lismuxumefTP831P/ANetUczL2hXAt9UtJeyzIT9NwBqaivCS8jWi+WpF+a/M/Qm1t4riNVYcED+VfORVz7NrlVywPDlrnfjpW/JbqczqdLEQEEVwtugxjk46Ae9ZdbGtrK6Op3II9pwAK7NFGxwWlzXRyl5fNYbp0CvCjANg8jPGcegJ5rm21R1rszattShuEDIRz9K1U0Zum76MgubxcVMpHRCHKcXrVyrRMo7gisluOex8S+JLRhfTuP4ZG4r26b0SPlKi96T8zIgGCjD1x/Ouh7HMtzurOcBPqSfzrM2R57dRMMkfX8O9UjJlOJmgkWTptYEfgQat6qwk7O5+iek34a3SQfxIpH0IBr5le7ofcJ8yT7ou3OsFF4NXdk8sV0OJvL+6VJLiFfmfAU56bc/pzzU2FsZkviO/eHYxw+Pfg9/T/GtEkZuVtkN0J9QvpPIuGzBnc3BGcdByTRZdCE3azOnmV9MkzESYz29KjY1THvfM460WK5rGVdM0kbE9AKa0MJs+VfFDK17cKhCkMcgjuRnNevSWibPnKztJpHJQlY8DduI6Y6D866/I49jbWZsDb0FQWmUUZWTD4DA/KfX1H4/rQIgnhjkiIQYYcj29R9PSi9mUldPufYXg26OoaPaTKc5t4wf95UCt+oNeDUXLOS82fVUZXpxa7I6Ka1eUAHpnms79DYyr3XrOzU2uQ8i8bARx/vE8L+P5VfKzSEefZ2t/Wxx1xq6K5Yqox0+b/wCsM/hVqPmbOlFdTcstdvYo/MtoPMUcZ2OB+DdP51agtxeyi9LSv5f8MbOjajea40gltXhiAwXfG0n/AGehP1xj3rOSscjXI+VmvNZiBQPasloBialMsEDduDVrcxm7I+OdZuDc6hcOpwPMI79uPQ+le7BcsUvI+YqO82/MwnUq/BA+lamZ0Fm2IxUgGvabNpFzLZzqUlgkZGU9mU4P8qFsDVnY59ZmU0WLWh9HfBbxEstnJpUrYkt2LoD3jc54/wB18g+mRXl4qHLJTWz/ADR7WCqXi6b3T09H/wAE+hbaQdGGQeleceqzE1Xw5au5ubZVimYfMwUZP+96/wA60TsbUpuk7pGGIrm3+UhHx32jP65qk0d31mPbU07e2uLxgZ2O0dEHAquboYPEP7Ct5nYwjyohGo2qKhs4He/M9zFun5OelQgvoeUeO9dj0yzkYHnBCj1Y8AfnXXShzNI4K8+SLPlYMUJdzy+Tn3Nez6Hz7IlXJz0oJNiFxGoWgD3j9oC2sG1RL+0KM1ynztGysjleAw2kkNjAbP3uCD1rJPV22N5RcVaSaa6PRnzdIhQ5AJ+nStUZbF7Rdcm0S7jvbfiSM8joGU/eU+xH5HB7VM4KacXsXTqOnJTjuj7L8K+LLbX7VLmBuCBuUn5kburDsR+o5HBr56pB03yyPqKdSNWKlH/hj0KNhcAEdDUI32LsemwHlxmtEkTfsWvs1vCPlAFVZLYm76mddTrEpIxgVmxHnOta2kCMSQMZqoxuzGUuU+XvHOrSajKS2RGmNi/UnJPvgfgCa9igktjw683J67HAmbcMGuu1jiEV+4oGdJDaGZA8Z4IH54GaQjofFEH3WTjd27V42GlZuL2P03PsNFqNaCSl1stzjUuQn3lwRwe//wBcfrXr27H5w9CvLarNl4sZ643D+RxVp20MmuppeHfEN54ZufNgPytgSRn7rgfyYdm7e44rKpTjVVn8n2N6VSVF80duq6H1N4T8fW+qRAxthhjfG3DIf6j0I4P6V4U6Uqb8u59DSrxqLTfsd8viEDvxUI6rorXPiHA4q7GfMctqXiJ3Uqp/KmomEp2OEvzJc8ufwrdabHG3c8d8ZIqSIo4PP49/8a76HU82tvY4rCqPU+ldhy7aCoN/SjYZ0VnOIYwpXPPXJH8qgDutWjElurf3QDXz9N2kftuYQU8O32jf8DzXUYgZ2CHA3HH4170XY/HakbLzIIkSH5mHmH0zgD6itDk2Kk7szbsbR2qkkS2zoPC169pepIDweCPUHt/Kuask42OilJxkmfT+mxi6jDISMjpXjPQ9tM0mshjntSuNmLdwhOAK1RiylJENhPoKZB4F4vm337AHCoMYxyPXj8BXp0VaNzy6r96xxxIzgcCuo5yeLchDL2qS9kaqI7jK7VHoSOP1qRHoV6+YiPSvn4aNH7hiXelKPk0ee3y8b/b+lexTfQ/LcTT5YqS6RII1E64yVPrxXVseDuMuIsgLnhfb8yaS0G+xFbEwSK6n7ppS1Vhp2d0fUvg29+0W8YI52jB/xrxpxs2j2oSukd64G2sUjVnO3SAk1qjMy79vs8JI64poh6I+XdYlM97I7dSxr2IK0Ujxpv3mzJJxmtSNieByvXpUsZaEgXgVIz//2Q==',
+
+    '4M': 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEBLAEsAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsugAoAKACgAoAKADpQAUAFABQAUAFABQAUAFABQAUAHSgDzjxb8R7Lw45tIcXF5g4j3bUU/wC2wBPHUhQcDqVrKU7aLc1jBvV6I+fda+IuualmVLqaNSSAlsGhQY67W+VmA/vMTu7dK525dzoUYrZHHP4316yTcl5cICd2TM5Y4PfHr3BJz6daE33BpdjvvC/xq1mydBqai8t3IXLbUlzx9wqoyANxO9ecfeGc1qpNGLgumh9S6Drlr4is49Qsm3RSjPbKnurAE4Ydxn3HBBrdO+qMWraGvTEFABQAUAFABQAUAcZ411ubSbQRWYzdXTeXHjqox8z/AIZHPbOe2Kzm7KyLgrvU+atR0KTeYyDJLIwDSclsA5c/QnIA/ixzjknl29Tstf0MDWjHA4toshYwF8penXne5688sQCc98U7pByvoU7SNZztWBGB67Q3btu2sT79fyrCVSMd3Y3hRnLVLT7ind6XJbtvMTgKcrknH5DB69Pl49ahVo7XLeHklt9x3vwg8Xvo2omynyttdsqYznEhztfr2OQxxnaec4BHbGVtejPPlHddUfYVdRzBQAUAFABQAUAFAHjHxJkmj1Cz2cIyMinP8ZOQT+Q59AV/irjrNxXMuiOuglJ2fcbpnheFFzOzSu+dzZI4PXp+HsAAFArxOeUnq3+R7rjGC91LTYtS+DNKHCQqPqM8+vPX/PbirfZNolTb+IT+x7PS1IijUN645P6cVzy906Ytz9DidbVHU5AGc9un+RXNfU6UrHkekRImrRmHvMc44wM4+mdwOfY19BT/AIa9D52tbnlbufd0Odi7uu0Z+uOa9RbI8pklMQUAFABQAUAFAHj3jdU1rULe3iODayDzT3G0h8D0yCPrkHtXmV6ikpQW8dH8z1aFFw5Kktpar5HD658UF0CVreC1eZkyFZyUU4+8RwSyj2/SvOpwvrdfqejN2Wz/ACRt+EfHFx4oB82Dy3XkgBgAuMjlwCSc9uvXFRNuMuXdGkYLl5tjnPFnxCmsZWhs4xM8QYyIVdiADycp0AHUngdyKmEfbPrYuX7iNzh4PHKa63lvAYc4wytvAJ9e4B7ZonQ9nqn+g6dbn0t+pFoscOhayktz/wAe3nLI5xyqHGcdORz6dK7qdRcib6b2PPqUZSqOMN3sfaWn30GpW8d1asJIZVDIw6EH/OD717EZKcVKOzPFnB05OE1aSepcqzMKACgAoAKACgDzzWbUrqOQBsbDn1ztCj+R/KvDrrlqS80mfQUHzUYX+y2vv1Kc2iW7kuiYd8bmHBIHYnnpk/rjrXHyvpf8jpjO29vLqVbSyhsWK245GS2Dk5x371D00R0t8yvLyt06nBaFZRyXE6tgzOzeYPl3YycHBB45ORgisoNrRHTUWz/4Y0tS8OWNmDN5f7wjAYhRgdcAIFHXHUfjTm2u5ilfVW+R5L4jglaSNY8FZGCsDnPyg4I+gbv14reDtGw4RXPzdkfX3hXSP7B0m10/vbworf72Mv8A+PE19FTjyQUfL89T5GvP2tSU+jenpsvwOgrY5wpAFMAoAKACgDlPEsbIqzDoMA+x+Yj35z+leXi4tLnW1rHq4SS1pvfc86vb67nxAG8iLq7g846bV7ZPr2HbNeKm37rdke+uSHvWTl0Em+02cRfT5MZAVVZQ6D1PHz5Pf5seldSiktNDFy5n7yueXxW+oadffa765G4PnC4QAng4GM7T6En1rKUUtIrXubqT6vTtbY6DXdemmVUClsnGR05rlu5Oz6GukVoSeF9Jm1y+hWOMPHE8ckrHG1FBB5BOSTt4xk59OtdlGnKpKKjsmm/Q4qtWNGEm3ZtNR9T6d6V9OfJBQAYpAFMAoAKACgDl/GV/aaVpM95fSLBDCobe3TduAUccksTtGPXNYVYc8HH7jelL2c1LzPOY7mK9hCMBIrENzggrkH8Qa+Y2+R9OnZ3Ri6h4dtkZpImuISxOBFcSogz/AHVyQPoBgdgK6VLyX9fI6IyWzSfnrf8ANL8Dlh4atll3y+c6q2cyzyv83rgttA+ozWEpvZJL5IqVn0t5Xb/NkXiTVk84JDjESnP+8R/h0qFG5knZHofwa1KyuxewRyhr2JovNi6FYimUYf3gzMwOPukDOMjPu4WHKnLvt6I+fxk+aSiui/F/8A9zr0jzAoAKACgAoAhuLmK0QyzukUa8l3YKo+rMQB+JoA8k8RfHHwzoGY4pzqE4yAloA6595SVix6lWcj0pXsOx8nfE/wCKl94/zCV+yWEQJS3Vi2WPG+Rtq72wTtBAVR0GSWMNlJWPUvD99Lp+k2cyfvIkhjUtydhVQp3Yz8uVOT2PtXzs178vVn0sV7kWuyO4/wCE3s4YB9pyin+LBKH6OAV/DOR3AoV9kjRNJ3uefeJPHkN0nl2fPPXsPQk/0HNSqbbvLRFOaS93V/gcAuovdD5jiNeWY9z3Of8AOBWjio7b9iY3lvt1ZxOieOLvwr4hbW9NI4fYyHOyWLCqY3/2WCgg9VYKw5Ar2aScYJPdHz9eSlOTW1z9CPBnj/SfG9olxp8yCYrmS2ZlE0TdwyZyVz91wNrDng5A6UzktY7aqEFAHzz4g/aL0TTsx6XFNfyDgMf3EX1ywMh9T+7H1FK9h2PFNc/aD8SanuW0aGwjPaGMM+O3zybzk+qhcUrjseQ6x4k1LWm8zULqe6bPHmyu4B74DEhQOwAA7ipHsZMRwMnv06dKAI5f9W2ehHHX6+w/Sh7DR6v4N8Zt4cxFdKZ7OQAso5KEjG5c/r0z7V5VWlz6x0Z6VGu6XuvWP5HbXmp6FqAM1jei1LZyoYxkH3VxsJ9x+Zrj5KkdHG6+89L2tKWqly/h/wAA5G6s9Mt1+03Woxzd/LVvMf6YTPP1wK0XtNowt+AuajHWc7+W/wCRwmsaq18DHbgxWy9B0LfX6+n8666dLl+LWR59bEe092C5Yfi/U41lCnA4/T/EfnXo2toeYTw3Etm6ywO0UifMrI21gQexU5B57YpiPavCHx58ReHCI7uT+07cHaUuSTIAehWfmTP+/vGO1PYVj33T/wBpPQJ4Ve6t7yCU/eRFjlUH2fzEJH1RT7U7isfDxY9/p/j/AIUigzgfr/QD+tAEbDcQB9B9O5pAWnIUhQcYHqf8M1QivLyp7ZBH4/5/rSGbtm5MUfcFR+HauNmw94426qD+ApAReUicqoGKYGbfTkYQYA6n6f8A662gupD7GYfl5xj8x/iK1IBsAj6Hv/8AWFMBmcA/gf6f1oAmSYpkD1NAE+OcenH+P5dKYgY45H+fT8hzQAAZGM49xweOT+tACru6Mck8HPr2/wAPzoAMb+P738x/j/WkBraS26BR/dJH5HP9a5JbmyLpTBqRkT/KD+H9aYtjm7l90h9B/nH+feuqKsjNkJIXrxjk9fy4qhDdzu2SNoGQOeelAABn8v5GgBCKYi6Bj27f1P8AhQAH/wCv/QD+tMQnQ4/D8f8A9dIY48/j/Mf4/wBaAFHJyO/I+vf/AD9KANHR2wrL6Ma5JbmqNWTioKM26l2ISOvb8q0itSWc6D3/AC9zXSZi4wMnkfzP+f8APNACockDuG5/HFAAv9D/ACP+NMQ00AXSOQPoPz5P+FMQgPf8f6D8qBjW9B9P6n9aQDxyM9Mjd+I6/wBf0oAcvtx0Ye3+f6UAW9LO2R1HrmuaW5ojUkPNZlGLqDnCoOAck/hmt4LqQzKXnpxnge3+c1qSEjbF47HA+p70APjUR8DsRTEOAwQPcj+VAEZHT/PegZ//2Q==',
+
+    '5F': 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEBXgFeAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsugAoAKACgAoA4nxx40t/Bdn9olAeaQ7Y4ycDPdm77R7AkngdyOarV9ktFeT2X6+h00aTqvtFbs+bp/iRqfiuRo1uHiiXqsYMcaj0LLtJ9tzH8q8mpVqfbduyWn9fM9mnRpx+BXfd6/wBfIqLcwL964Mhz82Jc4J9Vy2fxJ+lc3M+qOjl7HS2HxEufCEuxF+1QleYzJjnHBA52477Rz713Uqko7bdmcVWlGe+j7o9h8D/Eq18XsbZ4za3SjIQtuVx3KNgHI7qRmvQp1lN8r0fTzPNqUHTXMtV+R6ZXUcgUAFABQAUAFABQBheJddh8NafNqE+NsKkgHjc38I/Pr7ZrKpP2ceb7l3ZrTg6klFfPyR+eniHxPf8AjXUSbh2k8x/lGcADtj0QDoAOlea/dTqTd5f1oj2YpaU4K0fL82aE+nX74tdPjkeBAPMMQ6k9cEdcD359awjb4pfF5nTJNWjHb7hLbwzqDSZs4JZXI+dMEEAEHOTyGz064ODlhxWnNFqxnyyizX1W7kRN1xC9vMmyM7kweGB3EewGDz3HPrnHS66FyT0Z6DoUX2Z4dUsj86EMwHqOvHoR/TtXMp2em6ZUo6OLWjR9ZaXfpqVtHcx9JFBI9D3H4Gvo4SU4qS6nzc4unJwfQv1oZhQAUAFABQAdKAPlT9orxVH5EGkQM27ezygHAPACjrkgfMScYzgA9a8+pJTmor7N2+1+h6dCPJFzf2rJfqfLugMXuSU++5Ea47Bj8xH4DA+tY1FaKXzO2l8Tf3fqfZfg/TBbwLlQCQDXLFG82ek2tnGh3BQCeuBXRGKOOUnsY/ijw7baraSI6KWKnBwMg44qakbK63LpTadnsfN3ha4l0a/m0+bPkqW2+2ATgfQjj2rhmr8s1u9z0Hs121XofTXw+vlmieOM7o2HmLjoDwDj2YEEewr1MJLeHz/RniYqNrS+X6npFeoeYFABQAUAFAGdq119itJZx/yzRm/IE/0rKo+WLfZGkI80lHzPzT8dapPrGoz3k5JJcgZ7Adh9Bgegrgpd3u9T16nu6R0S0NDwvoF15cWoxRNKDgjaSoGWwPmHQ8Zzjj3rOc05OGyTOqlHlipvVtbbHvnhvxFf2Wx7oOIDJ5REyhXBBC5RwAJU5ByVBwc5ODglHlXMhL3m42a9T2m/1c6TAJ3QuMZOGVQB6kuQAPxoTfRHPyqTtexn2fiuHW4WEaquVOCsqOD2yNp5/DNOe1noVGk4tSTuj5i8VB9B1m7lJ6rmFe5eVMcD/ZPzH2464zxpc3LHs7v5Hdeyb7pJfqe6/Ce5aC5WyP3ltY/MHo6qA2fcYAP0rpw7tUsuqf8Amedio/u79mj6Ar2jxAoAKACgAoAzNaRHsZ1k4QxPuzwANpyfyzWVRe5JeTNaek427o/Obxdpoj8yaP5oigdT7vJID+PygH0IxXm0nsezU6+h9A/CmJI9Jghkwf3SEgj1Ga5d5z/xM6rctOH+FfkdXqLwandJplrtbDqXx0XaQ2Prj+dOTu1BDiuVOcj0G/0+DUY/s84+UYAH0GP5Zrq8jhTcdUZNj4K0/TAGgj8somxSCRhQc468/jnjgcDFKSbWo1U5dI6d0j5M+J9wmn6+ZjufOCm456HG70xxxgYAwAOKzpwcotLTu+50Smocra1toux738EbeSSWW7kBO+FSrH/aIyPzz9BgdqrDr967dIv8zmxbtTS7y2+R9G17J4gUAFABQAUAYXii2e80m8t4iQ8lrOq465MbAY/GsqnwSt2ZrTdpxb7r8z4K1CJtKK2d6FnjuLeO7hw3UsvzRsexEincvqG/vZrykrJNfh5nubtq39I9P8By/bNMZ4H2P5IK+m5DtdTjkcgj6c1zOPJJr5/I6lNOMX8maXhKzur66+1+VLDKhIcxOrjqBuw20sGGMHGefY40VNt3i/mXOSjG0ml5O/57HsF7KIoxGzSi43BkLRsfmHXJRSApHBYnAz16VrKLivNanFHe6ty7OzWz/UdqGvfY9Kl1CYeWsUDSHdxghSQv1Y4A9SeKFJySM5QUJNLofDN8+oeNdQF3cqEBI4GQqKCSxGTkDk/oB2q+aNGLindlKMqslKSslsfc/wAKoootJVYcFUwm71Iznnvgnb6cZHWtMJqpPzRxYvSSR6dXpnmhQAUAFABQAEUAfFPxj8M22kapFND5ayXIlPkB9qRgYIYsSoX7xfn5cgrnGK8px5JNdH0XQ9mnPnit7rq+p5P4G8UT6Lem0J3W87H/AIC3cj2YAAj1AI75VaKcedaNfka0ZPm5Hs9vJo+rNC0tWUTWcuFf5gD2zg8EcjkDP0rCG2jO6VTl92SuvQ9AKrawkSsCzDGe547VpN2VmcF+Z+6rJdOh80fEjxdc67PLoll+7tLVSzEdZpUwcHtsjPG3nLjJ+6KhNJK/f8DRRau1vbQ8w0zzYzFDOxXzQrYxjg99o2g/U5x2BxUyS15VsbRb0uz7p+GtsLTR0QDADHHuMLz+ec++a7sIrU2+8n+h4+Ld6nyO/r0DgCgAoAKAK015BbDMjquPUj+XWldIdn0PNfHPjyPStPkk09mecDI2Juz7ckY+uG+neuepJ2tDc6aUFze/sfEnirWL7xHK1xebY3bAOWJOBkjJZmPc/d9a44tJ3erPUcWlZaIyfD2iz3M6yoCVjYYbGNxzk4+gH+c1NWaUeXq19xVGn73N0R9l+HtAP2eOVGaMMASAcDNcMINq6djoqVOVtNXL+vSyWUa29uSbmYFRI3JUY5Iz3xzUzbVord9SKa5ryekV0PliOM2WrSpIS3yyZzyTkH+eDWl/cXqjZrV27HReGNIh8Y3tpBACssICOx4THAJx1O0ZJHA4HQ1Si78i05n/AEzKTUFzv7K/Hsfb+lWK6baRWydIkVfqQOT+Ne5Tj7OCiuiPnZy55OXdmhWpmFAAeKAPKdY8XNeXT2drlYYfvOON5z6/3eD9eprK93ZbHQocqu9zCmO/DnuP89KLDM2a2W5BUjgr0+tTLRN9ky47peaPPNS+Fw1KYSRTGFP4lK7vy5FeNFuJ7rae6O70PwZZ6QqKu6Qx92xye5wBS5bu7E52VloenWChE2AbVHQVvFW0RxS3v1MXxFpL3QWe3bZJEDj8R2OCAfqCPUGsKlO7Uo7o6KU1FOEloz5kt/D1y+qTSqZJmboWUBi2G4wOOpwMcfSsXNSSgkdXLytyb3/A9K8D+GJ/CMkl9KQsxJConO3PXJ6Z5IIwRnPPFepSp7VJbpaI8mtUWtKO27PdbDxXuAF2oXPdev4jP8sfSvQvbc81x7HXQXMdwN0bBh/ntVX7GdrE9MRzvivVBpGmzXBOCQEX6ucZ/AZP4VMnZXLgrySPB932S581eYbuPaG7Buq5PbOazWjudPS3Y1bW5L2kDtwzhFIz/ETgj86ogu2v72cgdN+Kyn8MvRmkPiXqdYloO4ry7Hpc1i1FaBa0SM3I044wvTitEjNsivrOG8iMM670bqOR+owR+FKSUlZjhJwd46NGJBo9lpal7eNU2gnPJP5nJrBQjF+6jaVSUviZhzR/Lg85OT9Scn9TXrRXKkux5jd22VYQJ71i52xWqgdeN7c4PuBj8zVdfQnZHa6TekSBowQnTJ4yPpT2Ia6HfqcjI71oYnlvxNucxW9l2ldnYeoVdo/9CNZT6I3p6XZ5jYxmKNrC65jIIhcjpnomezDtQtNOho9dUU7LUyYrSJvvrPMX+sbOp/8AHyKNvvFbt2Ou0+TZKGPA3qf15/CpkrpryKWjXqejRYYV5qO16F6OPNaJGTY2VxGcDih6DWupAzZ4rNs0Whmak+xBGOrHJ+g5/nj9a1pRvL01M5ysvwMny920Hscn8P8AP616BwmLZqpkLPlndmk2/wC8TgkdOFAwT6nFAzq7UgY7Ypkno1scxL/uj+VUjJ7nivj+VbzVlt+vkQqOOzMS38iKylvY6YaRv3ZkIm2Mq43DuD9P6VQjzKKbzdUmQHiFtq/V/nb8emc9al72NFsei2MpjxnoeD9P/rf0/GmQelaReRTIELAOOBk9fp71yyhZ3WxupXVnudKg2VK0Ezl7+8C3Jiz0rknL3rHZCPu3J1mVF3ucAVSV9EQ/dMGW4MzmVuAeFHsOg/qfc16MIcit1OKcuZ6bInjO8FhxhT/L+lbGRz9jKsjF4xx6+uABn3HpQB0tsvzDPUYx/kUAemWv+qX/AHRVIxe589ajP9v1O4uRjDSttP8Asqdqn8gKy6tnX8KSLEhby8gcY/z/AJNWQeJRXBt9TuSflInBH/ftcVm9GarY9V0y5WZBzyPzq0Zs2Y32HCnb9B/kflTJNe31a5t1IEnQ4wTnHvhuAPx7fWocE+hV2ivLM0kn2h8l2759B6DisnRg3drX1Zqq00uVPT0Q3z3lOGYkY9e30/nWihGPwqxm5N7svQkEgZzjGMfXmtDMkv5zb2c8mcFYnIPvtOMfjijYDD0cbIx2PUCkM7GzXkUxHpNvxEv+6P5VSMWfNtjHs+Y855/X+prJHWzoVi+XaO4rQzPBNft/s2tTRr/GqSfQ/d/oKzkax2OksJ2gCk9yMY7UbAdbb3DSEA57fT+dURY3bR8LuKgiXBznBBG4EYwQVII9NpBPO7ikSyd8qEQdCp/CkBFynXn+tAF+N2jAXjI78/WgRmeJb4x2ixDI+0SpH9AMyH8xGR+NAIn0v7mR3Gfp0NIex2dmOR7f/roEejW/+rX/AHR/KrRi9z//2Q==',
+
+    '5M': 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEBkAGQAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsugAoAKACgAoA8U+I/xitfBjmwskF3fqPnBJEcGRlfMIGWY5yEUg4+8R0OblbRFqPU+Utc+LniLXJBJPcMsQYlYocxRjP+4wLdON7Njn1rJtvcpabGj4d+LWp6YSkk8jk8qBIFIP8AwJHU57gg/Wo1jsaJp6Ox7Fofx+mVkGqW4aMnDSQkAj38s9fU4b6DFNVWtxumuh9L6bqNvq1tHeWjiWCZQyMvQg/yI6EdjxXSmmro5muV2ZeqhBQAUAFABQAUAFAHK+NPFMPg3SZ9VnG7ygBGmceZIxwiD8eTjnaGI6VLfKrjSu7Hwnonhm+8e3k2oXjtHDNM8ssuOZGY52R54wM8nkLwOTXBOooep6dHDurrtHv/AJHbn4W6fbqVDyH644/p+lc3t32PUWBikzidb+GohQvaSFmUEhSOp/Cto1k9GctTBWV4M4mCSS3CpLkMOD/ssp6+vvn3NatX2ODWGkj7A/Z811rqyudNc58lxMnoA+A4HoM7W9Mlq0pOzcPmvyZlVWimvR/mj6LrrOUKACgAoAKACgAoA8L/AGgmJ8OxxBQwkvIQSeqjbJyvoxOB/u7h3rKeiNIK7sZGjWkel2sVrEoCQxqgH0GMn3JyT6k14N225PqfZwgoRUI6WQtxOvzcdO31pHRys5yaRHba2B/OizFseV/EHw/HCi6hb/JJuw4H3WGMg+x7H1rroyveLPExlNK1SOj6np/7N4Z7m9k7CGMY9Cz5/I7a74K0r+X6o8Sb923n+h9ZV1HOFABQAUAFABQAUAebfFTTDqujCFV3stzbuPQYkAJPIOArHpmsaukWb0VecV5o+f8AXbDUtPkE1gjl3c75FnO5u/MeMKCeAOw5LV5alG1np8j6RwmpXivXVr8LF7XJLiK0BRm8xUBZQRuY4JwTg857gVlFpvU75Kah1+W5zllYvcujmB2Uqrmc3H7yNyeVCYAJXr2znANdDaS3XpY81QlzfC/Xm1+41/GSRpoziU5cYCkd26enGc8isKek1Y2rpuk79DT/AGfIru0v7lPLbyZIk81uirjc0fsSckDnoTx6enB+9pt1PnatNwiuZWvqvM+tK6zjCgAoAKACgAoAKAOJ8eTtb2CbVDB541Of4R8zZHv8uPxrmru0GduFV60fLX7keOahqDCRVhUYVdzE9yfuqDzjJ5J5wB7ivHSvsfYOaitTktV1Jd42ozZGGG7GPfhTnmtVT8yJV1ZRsyTTJT5GXxuU4yOOO2R9OtZtWdjWM01cqeNCsmmY7eYhPbjPb3qoaS+Rw13em/Vfmey/BpZLezmgeIgfunM+NocspHlgesaqCcf3snGRXo4f7T7s8nMWuenBfYppW83r+qPaK7TxAoAKACgAoAKACgDL1uw/tKyltwAWdTtz/fHK/TkDms5x5ouPdG1Kfs5xn0T19Ov4Hzbe2z3MgjWRoWj4dQBksp+6dw4HBBxhuuGFeGrxdmup9dFxlqn00at+F7r8DC1NPtGYolEcgHLgP2GM4aVlz+BFbXS1svxK1enNL5qH/wAiQ2Kra2zRO++Ukgnpx24HGfoBWTu2n0M9I3jFmklvb6kqW9x9wOpBJxgk4DEk4+XOeeOOeKa0f4feEkmrdtf/AAFXPp/Q9OttMtI4bQ74wi4k3BjJwPnLjhi3UkcE8969uMVFWR8hKTm3KTbfmbFWQFABQAUAFABQAUANd1iUu5CqoySTgAepPagD5a8T+LNM1bWbiPTkYGEDzXyAkjgkb0A7dmJPJ5IBznza8Ve66/mj3cJKUVrsrO3VJ3ONn1KNiBhlOTntx9ehrBQPQlW6Wf3WKzSjdlTgD+tD0MY73NnQbV9cnNnFnYq5mlH3UU8bQe8jcgf3Rlj0AOtGg60lfSKd2LE4qOFg1HWpJWS7J9WfUfhcx29sLKIBEt1VUUdFQDAH4Y/WvbqRULW0R8nCV733OmrA2CgAoAKACgAoAq3d9BYLvuHWMHgbjjJ9AOpP0ppN6ITaW55n4g8dabqFlNaQq04mUxIWAWN2wTgZO4gbSSduAOvXFbKnJa7GXOrpHyhpETWHiZ45DujuYZNu49SHU46DsD78ivLxUeSKfZnvYGXPVcW94v8ABp/5nd3+lQJ92MbmPXv+leepnvOit2jOl0eNImuJ2MNtECSdx8yZwOIox15YqGYc84XLdPRw9F1nzP4Fv/wDxsZXjhV7OH8R7eS7s9D0e/j0iyggkVI5vLTzI4QBukA+YDHGFYncxIGdxOAa+ghBQjZK3kfIzm5ybbv5l2PxHLHcK8EjQlRwkY3GT2Ix9zgDcQAcZAxSkk9HsCbjsen6R4waVVXUI/JZjgMCPzZQTtz7Ej6VySp9Y7eZ0qp0l+B3McqSjchDD1BBH6Vz7HR6D6ACgAoA5G/8TqrPBaKWkjYoXbhAwzu2922ngnAXOQCcGuiFJvV7HPKoo6I8z1iaa8fzp2MrszLGvQZb5BgDgDYM+g3E12KKirI5HJvVnm2yXVtZFpGdsFijBiBhQWUpxj1JAHsM9c02vsoE7O7/AK7nB+LLRrDVLF4xtKl8nPO7coYemeP1ryMUtLPqme5g3aakujR3tjqBvJWygXYCd7cIgxy7M3QZ49+gySM+HClKpJQp6v8AI+rqYmNKDnUdkvvfkjN1W5k1zZb6eDIkDoVlbCLM0TBsjqEhDcu5Gf4V3MTj62nD2dNUl0/F7/nufAVqntasqzVuZ7b2X/DHVabohC7ndmXH+sc5ZlznuMLGPTGZD8zDFbJcqtdu2l2czd3fbyOgt4IbddtuvMnOedxB/iZvvHPUAnOOM+s2LNCKRLcDnJ9gO/vxx9MD2osF7HQaXrj6bJuBBifG5fTHGcduOc/nWcoc2hcZ8ux6ja3Ud3Gs0RyrD/Irha5XZnandXRZpDKd9ci0hZ+4BwPU/wD1utaQjzNLoZzlypv7jxTULw6demVuIiSjk9vNO9HPsWaVM+qj1r1ErHmlmMlS8rgCOGPCepIXLt/JR9G9aoRh+HtLFtD9qYfvLyQzOe+P+WY+gGDj1peYHkuuRPq15Zqw/ePLcADoAFZ1Lsey4j3sfTJrzMVBySjFa3svmethJqm3KbtFK7+R0dtopvEVE3ixDA9cSXUn94+iH7sYJ+VSXwcljvRoqjHlW7+J9/Ty7HPiK8q8+Z/CvhXZf5vqdrb6ZHaJtwuDgEKMKxHCoo7RJ0Vf4jljnJrqOIm1e4S1hEbchiN4HUrkDYP99isePRjRsUOQ7VDSHJPXHQknoPUDoPXriiwhxYoenPr0A9h6/UUAWYZORxn0/wD1UhnV2UkkUeEYx5OSFJUZ9cA1i0nujZOysmenE4rzzuPLrrUGu7q+lYnEBWKMdgoXcSP99jkn2HpXpwjypL5s82cuZv7kcf4n2TrNaSjAuICEcdVIXeP++SuV9zjvW9rqxlexOkn2uyk2ngCWIHOSdjiIk/Uqx/GnsI2nVbdVReFj2qPYDH+FTsUcJcaNG9xuYfewnIzlDg+WMfwsw8yQjqoC1KSbv/X9dBt2Vl6nWC3CkdAFBA9v7zD0wDtX0yaA2M8zq85PAjtxz6buij/gI5PuaYHK3F017eFcZSOQKfYKvJH+8zeWPc56rRsI3HuJFb93ESwGAT8qqPXJ559EB9+aQDAJGOZGH0GaBWNC2BRsjlj3OePwxUt2LSOvtV8uJV6+5rO/c3SO01W/2IY4jk4O4jtjqPr61hShrzP5GlSdlyo85lXZNcqv3bpcj2kRDlT/ALylWX6Gu5KxxM828XarthjmU9YoiMdckKCP1INVeyYrXaNPwTA/2acxyedGbmXBPTDbXbG3jG5m6/X2p3VmTZpo3Zb8SlY9yszM2dp6bcZz6EYOcgY71D8i15mbpMdwJ5Z7po2EzDylUfNGv8eePQqeCxOD0AxWcVJN3a5dLd/Mt8tlZWlrc1L2/ZG2woHDKApzjLnJVefU89/fpVq3VkvyRyCWGozE25VY03nzn35IJw5x0JJGB0x70n5AvM6WKGG0yyKA78se5OSTk/Uk46c0h7D/ADN3OOfwoAcFWgCeHCsMVLLR3unaV9thDhgNp2/lg/1rnlLldreZ0RjdFK8m8oglSys2CV6jPfjnHrXYtDjZw2ra1DpTtI7Fo127wwIeMrwH5ADrggFlz8o5zyaq9ibdjmvC3h6PxXbjU9SDPZozJbwISvmssrEuzDB2BvkVQQCUYsduAeTmc/JHTZQ9TulsbTSIJRbwpBAqszpGu0OxGCeMZOOCT17+2qXRGbfU4LStJuP7Pl1C0SOL93MbS2RSeXZmLOSeS5JO1QOo5xwHstNhep1ui6eEs43mkM8jpuZsBBlvvAKvTBJGDk+tCvbVhotkS30sdm8DcKgdk+jOpCn65G3P+1TSFsV5CUlMinG8fMOxx0PsQOM9xgdhVbCKUkwzxzUhsV9u45HBoAtRsaWxSL8D/NnsP51O7t95Wx6h4aUy2m7oN7Y9wABn8Tmueq7S+R0U17vzOO1G/W3wrKTk444rvRxPQ5fVrCDWYijjHH8XzD64yOR60NDXkTeHJXtdNGkWhEctivlo7Dcnzs21tvBYr3UkBj/FzxlGCgrLz/zNHJyd35Grb2D20DQ3Esl0XJLvIRkluuAoCqo/hVQAB0qtiTP0cvZq2nE7hbHCN/0zOdoPuo49xg9adtBGju8s8DGevbPuff3/ADqUMzNStlu4JIDxvGQf7rA5U/gcGqEULSU3Fskjfexgn1I4J/GhiIJ0Abip2KsQhsUASKxJwOKl6FItQtuYJ0BP+f8A69V8OxO57nocPk2MKf7GfxJJP8686bvJnoQVopH/2Q==',
+
+    '6F': 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEBLAEsAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsugAoAKACgDxn4h/F608IObCyUXl+PvKGxHF7Owzl/9gdP4ivGc3NJ2W5tGm2rvRHzPq/xn8TXkjEXbQKf4LdVQKPQHlvzY/Wlr1KaS0SLlj8evEljC0RlSckAB5o1Lp7jG0Nnod2fUc1ZnZdj0fwZ+0HLJOtt4jjRYpCALmFSNme8iZIK+pTBH900bCsumh9TwzJcIssTB0cBlZSCrKRkEEcEEcgiqI2JKACgAoAKACgAoAKAPKvip45PhGw8q1YLe3IIQ9TEnQyY/vZ+WMd2yeimsKk+X3Y7v8Dpo0+Z80vhX4vsfCGp6izM00hYmQk5PLuSeSSc9+p9fU81lGPRb/kdM5JavRdF1Zz7tLMMn5F6hR3HqT1/E1srLzZzvma7LsiONMsAM88d6tsxS1L6xyW7mF+NvT6HpSvdXQ7OLsz6z+BPxAbI8Nai/BBNm7H8Whyex5KDs2V/iUBJ2dipR0uv6Xc+pq1MAoAKACgAoAKAEJ2jJ4AoA+A/iX4gbxDrc0mcxK5RBnjaPlUD3OOfQBiPvGvOT5m5/d6HscvJFQ+/1/rT0ueU7BdzNKeY4ztUdNx6AD0BPT0GTXR8MbLdnNbnk5dFojSstKl1aXyoV3kkZI+7+fZF6Ad+vU1zylyf1/Wp1Rp8/wCv+Xojv7T4fJEN0rEv+g+grjlXlstEdscPFa2MXxJ4ZaNPNTiROhHcD1rWlVs7PYwrUE1eOjRz2i3sse2e3JjubVxIpHBBU5yv5Z+o9TXbL3X5M8+PvK3VdPzP0X8HeIo/FOk2+px4BmQeYo/hkX5ZF9sMDjPYg10xd0cclyuy26HTVRAUAFABQAUAYHim8NhpV1OOqwuB9WG0fqazqPli35GtNc04rzPzk1u5JmmZeTH+skh2gfgmce+fWuOCsku/5Lf8T0qktXbovxe34EWlabLetHZ24y7naD6d5HP0B2j6nHNVOaV5P+u3+YqdNu0V83+f+R9FaN4fg0KBYYVy+Pmc9Se5P9BXmzk5O56kYqKsuhelj2fMxCj8q57O+humkjA1OOG7hdEZWIHYg4zWivEzdnofPEYfS9R8p+hfH1DHFezdVKd10R4XK6VXlezf5n1p+z9rflte6FIfukXUI9iRHKPz8s49zV03f+v68jKtGz/r+t7n0zXQcgUAFABQAUAcL8SZPJ0C6PThP/Q1NYVfga9PzOmh/EXz/Jn56GNp4xK3WaR5z9AzIg/76GR9axfu/db/ADOmPvX9b/JbI6/wfPb2zSXRuRbSqRGmQhG0ZJzuHBdtzcEcD2rnkm9OVvrdJnXBxjrzJdLNrp/mz221u2mgEm4SHHJHGffHv2ribtod6VzktcvYIMz3e50j/g5K9QOV4XqQMtwMjkZq6cZS0jv/AF1M6so01ee3b/gFHTtXi1JljjtzFlQVYKoG1uQN0ZI6c7SffHSrqQlD4mn8yKc4z1imvVHm3j6wNjcxzjjJx+IOa6MO/igcuKjbln5nefDfWRpHimynBxHOxgf02z5Vf/Hijn0wK2p+795z1VzXt2ufeNdx5gUAFABQAUAcB8TRu0GcdiUH5uBWVT4fmjel8Xyf5Hw5pmkTX9uIUXMiSmEeuAAR+H+Oa56r0T9Tsor3mvQ9Tsvh9a2NkLaWISSPhpNxYKzDOCQCOmSB6A47muH20k9D0vYw6o7HTdOjsLYxqBlQBgdAOTge3Nc85X1e5vGNrKOi6GW+nxXeQQu4ZHIB4OMjnPBwKUZuOkdCpQT3VyxZ6YtkuMDA6Y4A+gHAobb1Y+VLRaHjfxVKhYV4BLE/kDxXZhvib8v1PPxnwJef5I4vTL908qdeHj2FT7rjH45QfnXW1Ztf1/WpxRd0n/Xb9PxP0r0DU01rTra/jORcQpJ+JUbh+DZH4V1xd0mefJcrcexr1RIUAFABQBw/xHtmufD92sYyyIsgH/XN1c/+Og1nP4Wa09JL5/kfIvgPUks/EFuJB+7ubgJ7K8qDGfTDHH1NcjV43/rQ9CMlGTX9a2PoLxYq6ZmUdGGR7H0rzZrkeh61N86t2OTsZlS1M02/e2XOQNuOwBznOOfu496zjHqzduzsjmftryzeZCjRhTyWPDDB4x9cHP1/E5bal3WxpnU968dTwRU3J2PFPirJ5j23YkucewCj+tenhd5PyR4uM0UV5tnm1rcGHah+6Cf1x/LrXfKPVbnmwlayex9/fAzVxqPh4W5Pz2crx49Ef94v4ZZgP92ppaJx7P8APUqstVLuvy0PZa3OYKACgAoAinhS4jaKQBkdSrA9CGGCPxBo8g21R8E+KPD9z4R1SWIAq1rJFcwt6hXbY4/EAcelc1re72/U7L399dfzR7zrOpQeLtFTU7FgQyAlepSQffRh2Kn8xhhkEGvLrRtp2PZw8r28zhf7Uu1gWC9jSDEahJQGZJMcfMvVCfbcM9hVKMWk9u3Y9CMGveiudX1Sa5l8uq+Zyl5dXrDbFMoZzj5YxtUe24ZJ9Bj3J4p8sVua8jlryckUt5PX5RT/AD0NmNk06BUlYvIoGWbGT7nGBmuJtXdjl2R4P4x1f+2NQyn+qgXYnvzlm/E/oBXtYePJG73ep8/ipc07LZaf5nPBNxA9v55rrZxI+ov2d9d+yajPpkjfLcxggf8ATSPlf++kLD6gCueOkvJr8V/TOmavDzT/AAf9I+xa6jjCgAoAKACgD50+N2mr50N6cZe2khI6fdfcD/4+aza1uaxelvM+VtC8YX3hC7L2xD28pxNbvny5NvGcfwuBgBxz2IYcVjOCmtTppzcJaH0ba65ZeMNOMtk2CuPNgbiSFsdwOqnsw4YehBA8yXNT06HuUatpc0dzkfsMdm/mOxZl6A8/l71zyk3od0qkprXbtscxqzz3TFSCiD14JqVpucrPH72IJOyj1r3qXwo+drL33YiDbGB/z7VoZWOs8HeI38OarBqC9IpASPVSef61k1bVbrU0T+y9nofpXYXkWoW8d1Ad0UyLIhHdWAI/nXSndXRytcrs+hapiCgAoAQsFGTwBSbtq9hpX0R8pfFrxL/aeoG0T5YrNNoyerMyMWI7A5UY68Z74rGM+e7W17I6JU/Z2i97XZ8v6xAUlyfXP6kf5+opvYI7nYeCY5YJWnjLL8wUkEjIPUcdeteVVeyPZpq2p9EaVZW98pZowJosbz/ez0YZ6ZxzjvXIdDuuuhz+uaMJNzoKSWo72Vj5l1iPyLmQHsa9yl8KPDrfGzEdsnNbHMTWrF5FQc5OMfWh6K4LVpI+yfAOv6/4cso7cRW13ajlYfNeOVAe0cjho/fawC5OQwyc8MK9nboerUw8JJNXT77/AIf8E+j9Ovk1GBLhAyBxko4wynurDpkHjIJU9VJBBr0U01dHjyi4PlfQu1RAUAVL5gkLE8AAk/Qc1zVnaNjel8asfnn4n1Np766ncnMsxUc5wA29/wAmKKPZailpBHTV1m/JHJagRcxI46jbn8QM/qprWWxjBao9j8C6aotgzDn7348AfrXiSd22e+tEkez6JZbIHlPBmIA/3VyM/iSahIJaadh15pm+Fuf4Tj8qvlJufD2sS+ZcSEdC7Y9xkgV7ENEl5HjVNZNmPmtjmNvw3ZG9vooh3cfpyayqvlizejG815an2XZJsjVemABXhs9tGpHez242I7KvoCapTlHRMlwi9Wke719GfNBQBl6xMtvayyN91I2Y/QAmuOvtY6KPxo/NbXZi08uexI/4EzEt+vf2FVBWSRrN6yaK1qpnwnUcL/49n+pqakrfia0o319D6S8JWRitFAGC2APq3A/Q5/CvG3/ruew9D1UgW6LEvRABV7EGXql01vZzyjqkUhH1CnH6072FY+DZ/mJPtXrx0PGl5FTGBitTA9W+F+mCe5a5b/ln0+prixD2id+HVk5H0pbuAuK849HYezc0DPoOvoz5gKAOD+I98dP0O6kU4LRlM+m/5T+hrhr7pHZQWrfZH516g5Mpzzlix/HgfpW0dgludJ4bsGvLuG1AwzsGPsOf61w1ZXTa9EelSjy2T/xP8T6t0GyVHEa/chHHux4z+A6Vwry6HUzpJoT1psSPIPHfiNpo5tF0zL3G3/SJF+7CmCSuf75AwQOg469KirWb2NeXlXM9NHb/AD/yPlua3MAKH+Hg/h1r1Yu7ueHKPKmimy7M+3+H/wBetzmPffhRbBbOWU93x+QH9a8zEP3reR6uHXuL1Z64rbTiuK512JN1MD6Nr6Q+YCgDzH4sLv0KcdAF3H8DXBX+KJ34f7Xofn7s8+529Pnx+XNXJ8sG/IuC5qiXS56V4Uj+z6tBMcFblZY0A6p5WOT9cHp6150n7vL21+89aMdHP5fJaH09okewgDvzWMdCJHJfEjxRNoaQ2FmNt1qDGOOU8LEMqC3c7vmGMDjr1ABuMb69EbU0vilsunf/AIBl2XhiHRNKkjB8yaZGMsp6uzDLEk889Oe3HrlPV3IlJyd2fM2txCKZlHTe/wCjNXoUv8jza2i+b/r8TnCu5gvqa63ojiSu0vM+hPh84tNOUDuzH9SK8StK838vyPcoxtBL1/M9GWTdzWKNSXfVEbH/2Q==',
+
+    '6M': 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEBLAEsAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsugAoAKACgA6UAeOeMfjPpXht2tLFW1O8TIZImAijPTEk2CMg9VQOR0baadjaNOUvI8I1f42+LNQJW1Nvp6HoIohI4GT/FKXGfcKv0xRojoVE42fx54tZt51W63cnCttXt/CoC456YxxRdF+xt2+463QPjr4l0RgmoCPVYB13qI5QP9mSNQM/76PmjQylSt0+4+kfBvxa0LxkRbwSm1vT/AMu1xhHJ9I2zsk+inf3KCixzOLienUiAoAKACgAoAKAA8UAfO/j7xvc620mlaQxis1JSe4Q4aY9GSNuCsXUMw5k6AhM7pclD1PWoYb7c/uPDpdKFsNoXaPYY4Hb/AOvyfwzWfNc9HkUdhF0vJ+UfLjt2/DkdMenPvk1VyeWxDc6QGAyCM8cY69eeOvTpjH55SG4nPXWlmNuMgYPoP64/z0q7mTp9jOfT/Nwy/K6/MrDIIPUcjHIOMY56H6F7GTp83qfTfwY+KVxqMo8N69JvulH+i3D/AHpQoyYZCesiqMox+ZwCGywBa/NHl1KbgfS9I5woAKACgAoA4Xx7rTabZfZYDie7zGCDgrH0kYehwdqnsWz/AA0m+VXOzD0/aTu9lr/keS2+jJFGqqABivMlO7ufSpaaFeTw0JGzgH/D6UKpYGgPh3yo8AY/+v6Y5q/aEcplf2GWH3cn1546D2/z2quew+UxtS8OcFgDt49/qQP/ANdUqgcpyr6V83yjH5/55P1o5ylAxL+xk06VL63JingdZEYcFWUhlIPsR+mO9bQn0OarRTVz7t8J66niXSbXVE4+0xBmA/hkHyyL/wABcMB7Ct9j5qS5W4nRUEBQAUAFAHh/ieb+0dTeTqsR8pfYKSD+bbm/EVy1pW90+hwtPlgn1eoyPsB0FeY9T1krGlFGSKdiW0ifyuOaaVibroUfswjz/OmVoU7qAOpUjAqdijkrvT4wTjj0qXJo1UTk9bsFKbfUH/P5VvTkTKOlj2D4EXJbRJrNutneSKP911SQfmzMa9ZO6TPkcTHknY9tpnGFABQAyV/LRn/ugn8hmga7Hil1B5bbj1bn8+a86vpI+tor3Uh8CYri2OlmpCu2rRkyU9KvbYWxWk4o2GZtwCBipNEzn7iPByayZ0JnJaku9uenSqhoEkek/BaPyV1BfWSFvzRx/wCy17FN3ij5jHK04vyZ7jWp5AUAFAHnPiq7lkuhaqxjVUBXGQS5yTnBxjGB0/HtXJOT51Ha1j6PCUYrDus1dtta20S/4Opj6wGhUvGhlZBwgIBJ+pwKVVczOik7JI4K68W3mmDzJrBxGvXa24gDvkDHSslTT6o2bsupveH/ABvpmv8AyW8gWbvExAb8Ox/Ch0+QzT5tnc7DAqLFFWRVB9Knl7FJszpFXPUfnUuLRV7GJfDaM1k1Y3i+hx95GHy3oDUxetjaSsj0z4QRsFvpP4S8Kf8AAlVy36Ov517VNWij5bHP3oryZ7PWp5AUAFAHnHiVAmoIwGWkMSj2ycE/l/KuGorTVurR9Pg3fDuPSPO/wuc/q00nmMI8ZGetZVJNSaR1UorlTZwd8utiGV4nwwKeUIo0kOC48wuHKfdTJVBgsRgvWlNRkve3+4uomv4dvR3vtp97+44/RrG4vTFearBHDdtJjcqCKTcFViSq8EZJUElt20kbMgEqe4vclp2f+Q6SbTc42kle627Wue1WPmLBnOcDGa5UxNJM4DxFf3s8htrWXyjjBYdv5AfUkCrjKz2ubqC5bnmtvYQz3LQ3WszC4Q4MY/venMjZ5ByAK7G5JfBocCjeVlVu+ysjs7Sz1Cx2iG8S6tz1WQHJB67WG4g+351yScWrWszuimnqaF2RFFJJ/cRj+hrCC96xcnoX/Bni258K2yQTJGqTzmST5WLHftUBmBwMKFUYGAeua61XadklZHNLL1iU53fPbSzVlby6+Z9PqdwBHfmvRPjNtBaBBQBxniSy8y5t5+RtZenqrZ/rXPOPvRl2a/M9vB1LUqlPyb+9f8A5G8QC4b6muKr8bPYpfChjQEAhR1/z2qFoaaXMo2ZiJb19ST/OiT00Rpe+jLG/yLc84rNKyHa7tY42KDMwmIJZW3KckYPboevoTnFVB2d9n0NZLTl+y1ZobL4StLi4e9PmGSUHcrOXT5g4OEbKjiR8YAxuOMZrt9q0tb/pqcKpQi7qK6X+Wwy10GPTAQruV9Gbd+p5/PPFcEn1OxPSyQTR7oXCgFtp2g9MjkfXmiGicidOaMXtdXK+i2za3JbIFyzyIjjngh1JPPbGc+lOmrtLvb8z0ak1hY1L7Ri2vPRpfjY+sAMV7Z+YhQAUAVruNZImDDOBkexHIoNabcZK3p8meaXkYFwT68151ZWlc+oov3Uuw84xWSN0YVw5kYonAXqaT10Nlpqwu7aMQH5h93/P41fLZFRlrsclaXAhm8iQdc7T2I4/xrOKtozocbrmWx1SxDbmm1Y5tjEv/lBHSueRomZqRs2FXA6kk/565x14rde7FLqzJayb7HpXw98MCxH26QHoRFnqSfvyfj91fbPtXXRp299/L9WeVmWK9p+5j5OVulto/q/keqV2nzQUAFAENwP3Tgf3T/KmXHSS9Uea3/yyA+1cGIXU+mo7WIGmA4rhu+h1mBqNsLoYQlckZAJAOPXGD+tWnY3jJQ3Vyjf2bSQMkcjIQuAQQTx7sD/U1rccZLm1RnaZZtPsluiDJFwMDH4n36elZt2NpSUbxhs+507uI1wKm5ynJXc/mSY9KyWrNX7qPS/Dvg2C6t4ry5d/nG4xjAUjccc43cjk4P0Ir1o0k0mz56rjJU5Sp00t/i67fcemxxrCoRAFVQAAOAAOgFdO2iPEbbd3u9WPoEFABQBk6xrNro0Jlu2Cg8Kv8TE9lH9eg710UqM6ztTW276L1M5VI0rOT66Lq2cPeurgMvSuCqlKN0fUU7xdjmrq4lQ5hQSkdQW28exwa82Ojsegknu7GZ/al2uS1vgDspDH9dtdXIjrjRjLaS+ehRn18RcGF8t1yrcfhj+ppezXc6PqsrXVvvRRTW4i21I5Vf0CMQefXH86iUOVX6HNKnKO7X3mrPcMkfzHqM1xy8iImTYwveXCQoMvK6qB7k4rSlG7SJqyUIuT2SbPp22gW1iSFPuxqqj6KMV7ex8RJ8zcn1d/vJqCQoAKAMTXdch0O3M0vLYOxO7H+g9TXZh8PLES5Y6Lq+3/AATmrVY0I8z36I+RPGfi+51C+haZsmWeJFXsoaRQAB+NfWVVDAYafIre615ttbs8vCqWLrxc/wCZfdc9cS8ZUGfun9K/MYVPsvbp/Xmfp8qa3W6JeWG5OtZy91hHsVp3nQboxzirhUa0OiOhlNdXL5Vl/wA/lW7q23N+a2y/Eqx/uiWb7xrllNy0ZDdzHvb/AAcA8Cs0r6DSsrml4b8R23h6+gub1co7+Xnum5T+8A/2e/seOa9vAYd4mc4U94QcvndK3z1PCzOp7GlFvaU0n6Wbv+CPqCKRZkEkZDIwBUjkEHkEH0IrRpxdno10PnFrqh9IYUAce/jbTn3i1cz+WOWUHYD2G44yT/s5/CvVjgK2nOuS/R7/AHL9TheKpq/K72+77/8AI8U8T69JqcpaQ8DoOwHoK+uw1CNGKjFf13Pm69Z1Janhep201/q9r5ILCGZJmUddkbqWOPYHcfYGvHzltUlBdm38l/wT6XKIXnGXaS/M+kbdflH0r80R+jMXc1scj7h/8d/+tW697R7nPJW1RMbpWXtzTS5SosoTXUcdJ66Glzlr2/B+WMbnPAArPkNEzPhsnX97Ny3Ydh/if8j1pN20Rre5wHie5MmoQW6n7ivI34lVX+TV9lw/B+0qS6cq/M+Sz2aUKcPNv8l/mfT/AMJvERvbM6bO2ZLfmPPUxnt/wE/ofau3M8P7OftoLSW/k+/zPmcHV5o+ze629P8AgHr9fPHphQB8uBhp9uLdM8ck92Y9WP8AT0Ffo6XPLmf9I+JlLlXKjmL1yQTXdFWOK+pP4O04HVba+bBDmSMqR7HPtgjg18pmcr1HDtFfifbZcuWjzLfmf4WPb9Y0hNL2yRf6qQ4C91JGce6+nOR05618FXpKn70dr7dj7HDV3V9yXxJb91/mYhjrjPRMe4tUByMqfb/CtVNrR6+ocqe2hjy2PmfeZv8AP4U+fskXyW6jrTTo4uVAyep7/nUOTe5e2w+6hEaHHaoGjwiAnUdXvJX/AOWTJEo9AoJP5ls1+k5BBRp1J92l+f8AmfnWfVX7VQ6JW/r7z0PRtSm0SdLm2O10IP19j7Hoa+ixFKNWLhNaM+Vo1HTfNHdH1N4W8SL4itvN2GORQN4425P905zjjoRx6mvgcTh3hp8t7rp3+Z9XRq+1jzWsdRXCdB//2Q==',
+
+    '7F': 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEAYABgAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsugAoAKACgAoAKAI/NQHbkZHbvTsxXHgg9KQxaACgAoAKACgAoAKACgAoAKAPNPHHxGtvCX7iNTPdEZK/wRjqN5Bzlh90AH3rOc1T336L/ADNYU3U20X9bHyN4h8f6ve37am1xIkmGCIrbFjQ/wgLjtxznPVia5fayk7p2ttY7VSjBWav3uZ1j8VdetdqG6lManoW3Dnk8nJ9OvH6muhVZR2d/U5/ZRfS3oeq6N8cNWtztlEU0Q+4HVi/qUaTeuCeisQe3XBpe2Unqkv6/roDoWXuts+ofDviK18R2qXdqwO4DcoOSjEcq3uK6LdY6pnJqnZ6NG/SGFABQAUAFABQAUAYfiTVxoOnT35wfITIBOMkkADOD1JHak2opyfQaTk1FdT441aafVP3zDMlwxkYnljnkbj+WAOOnpXgzqc0m2fR0aKjFJHneo6PI5dVydnBP+13/AC6VUZ2NpUb7HMDTpESTI+6cfz/wro51dHH7Jq6L1sZI8FeQAQR6gHBH16Y96TYlFo9p+FHiZ/Dmrojsfsl3tilB6KWP7qT22sQGPoW9BXTRnZ8r2f5nHXp6cy3X5H2uK7TzgoAKACgAoAKACgDy74tjzdHSDJUS3UQYDuihncf98qT9QKxq6Ql/XU2pfGjy2LRwpZ8DKLhR6HH+NfLSe76H1dPSKRjyaAkUXbIBZj6kk4pptHXoc1J4YBtJWA+Y5P6N/iK1c2nH+uqMnFbHKJpPlE8fxZH0IAb9dtdKl0OVwSY5GbTpVmTrbujj0MZbv/utj8K2g7NP+ro5Ksbprpt9596aFfjVLC3vFG0TxI+303KCR+B4969q99V11+8+dty+720+41aACgAoAKACgAoA8p+Jl1Ey2toxPmGZWxjgghh19dqucY6A+lclaS5XDrv8tV+Z2Uacv4lvdvb56M5iacpuaJC7E4A6c8/4V8+46JJdT6CGyMtt8xEUsToO/A5xjuK0VN9dEbKouhW1iZbKMRhMZHI9un8qc1qkkUtdWzzS6ScvvhikaMZJJRgPzI9/0rblaIbi9FuYxBlm2Y4ZWUD68gfrWi6epy1dE/Q+4PC9sbLTLe3brFEq/p29vSvdty2XZI+Yve782b1IAoAKACgAoAKAPPPGllFPPbu6hmzxnts3MCPf5iPoa8+ukpxfdNfdr+p62Gu6c10i0/nKy/Q5O+0CHU4tjmRUXkiN2TJ98dfociuKPuu66HoWurdzltN8HjS7ky28jBGcsykkdecYAC4B6YUYHA4rerU9oldJeisFKkqKdnJ37u6+V7sTxaZbi8igibyxt5IHfGAcf555qLWsdEV7rt3OT1Hwreo5uLe7nUE7ijEtGBjG0Bnbg9TxuyeCOlbynFrlUEvNX/zOSNKUZOTnJ+Ttb7kjK/s1pnRV5k3KOB1J7D6nioSurre+g38Si9Fu/Rbn2hZQm2gjiPVEVT/wFQP6V6p8493ba5aoEFABQAUAFABQBja1p5vohsxuQkjPHBHOODzxWFSHOlbo/wAOp00aiptp3s1079Dz37fHZxtvwCoyc+leSnZ2PoYxvYx7K8nut1wV/dHhEXAJGfvHPr2GelPfV7G8rRXKtzkPFF4pnQ26SBlPJK4xjoMngj6Vdl0HF20ND+0vPtMyjYwGD+XUUeQ9FqVPBWlnV9UiQHEcT+c/+7Hggf8AAmKr+J9K66cb2XZ3+48mvU9nzSXWPKvmfTtdx4QUAFABQAUAFABQBXurqGyjaa4dIYkGWeRgigepZiAPzppN6ITdtXoeGrqOmeJ4bhdPlS6hjlkiDpnGVOQOcHHQg9GBDKSpBrxK1P2U2n8vmfSYeqpwjJdNGQ2emvp7sJ5Z3tioMe1zmIgcqQCNwzgg8n2NONmtv69D0Lt2dNQv1i1ZvzUtV8nbXqcp4sMUMe+3nnd23bFZSoznC5Lge2QATitLJb/kUvayulSjG1rtyVvPb9CnaWMkVkjXkpeaQb3I+VUjXrwMDLHgcetZbvTYyk0tEfQXgCwistIheJkc3GZmZCGHz/dXcuR8qBVPP3ga9eEXCKi9GfLVpqpNyW2y+R2tWYBQAUAFAB0oA8c8V/HHw54VneyLyXtzESrpbBWRGHBV5WZUBB4YJvKnggHitlTfXT8zJzS21PA/En7ROu6kWj0mOLTYjwGAE02PXe4EY/CLI/vVsqcY+Znzt+XoeJ6xr2pa6fN1G4munJ6yyM559ASQo9FUAVpsrIjqezfA6B0sL2ZeC13hfcLGv891fPYp3nb+tz6HCpxhfu/0R7zHewXKFGYI44Kn/PNcaVvI9SLvschra20Y3MR8vTpWlnsb8ztq3954T8SfGU1tbrY2mU+0Aq0ncIuBtX/ez17c455HXRgm7voeRiarilGP2r6+R4xp+vahpf8Ax5XE1vnr5Ujp/wCgkV66m9jwXFb2Nu38ceIIJPOi1C8WQfxCeXP57ufxrTme36EcqWx634a/aF8TaIUW/ePUoAw3LMoEm3uFlTad2OhcPz2IpOMXuremn4bBdrZ/efdmhazb+IbCDU7Nt0F1GsiHuNw5U46MpyrDswIrka5XY3Turom1PVbTRYGu7+aO2gTq8jBVBPQZPUnsBknsKaTk7RQNqOrPj34o/HaXV9+meHXe3tOVkuQSksw6EJ/FHGfUYdu5UZU9kYKnq9Zfgv8AgnM5OWi0X4s+ZGnTtlieef1685/rTYJWGW7l5CDwFHT3P/1s0LcGrF93xgds9/8A61USfSvwc2x6M7L1a4lJ+o2j/wBBAr5vEK1Vn0eHf7qJ6PdwwXUZ3Lk/kQf51gvI6DzbU7BI3OCdoyeST/M1uhnzb45vxqGolY+UgHlrj1H3j+fH4V6NOHLFd3qeRXnzTsto6f5nNRx7QCep4A/rXYlY4GzREWB0zWtjO5WmfccjoOn0/wA8VLLR9c/BL4oWfh7w9/Z1+/zQ3MvlgnpG6xv3/wBtnP40nT59V6E83Jp8zT/aX19MWWjQt+9XdcyLn5dp/dx59+JD7DnvRSVouXd2Xy3Cb1S7fqfI7hXBYcEdR/n+dakbGbKphIYcqeuPrWb016Gi7D7WQBjyASR3x27dvXiiLQ2jV38Y6fp+laGR7X8INTZIrqzB4EokX/gShW/9BFeLio2kpeR7eFd4OPZnsM8/lZ3DOfQ4xXAj0DzbxZqiafbyTDhmGEB6kngfhnFdUI8zUUY1J8kW+x83SwiWRie/f1Oecn3Ne5yrbyPnXLr5mfMwilA7IBx/n2qG7O3YpLQvbwckcbVH5nr+lakbFJyAMDnHeoZaEhmKLj3oTstAaPoj4/zGfxZMnH7qG3UewMauc++XP4YqoaRj8/zZnL4n/XRHg0paL5uo/wAnnHb0PSqegIoSyBWDDlT978eo/rWTdvQ1SI/LMb57dPz6VNuVj6GhDIWHoP5Z/wDr1qjN6Hq3wqcjUZ4VOC0aP/3yxB/9CHNedi1ometgt5LyTPoqSwknAVhhu/PH4V4uqPaaR4j8U1Wzkhtcgu2WIz91VwAMdskk/wDAa9TBpybm9lovV/1+J5GNkoxUFu3d+i/r8DxnAGT/AJ9v8a9k8Q5uR98hPqa5L3fzOi1lYtRNvznnk9T9O3etlqZvQSVt5PoP8/nQ2NaFbOKhFH0J8d5P+KwvPZbccf8AXvFW0NIx9P1Zg936/oeNyvxn1/wqwWhizbVPTH0rB2RsiVTuQH2H+FPpcWzsSQNjj1/z/OmhM9A+Hd59l1pDnG+J1/VW/wDZa5cSrw+Z3YR8s/kz6Z1rxVFpkCRKBJdT8RL/AHcdXPsv6nA6ZrzKVL2rs/hW/wDkepVqezWm72PmXxZePdag7ysXcABifU5Y/Tg4r3KcVBWirI+fqycpXe5xt5J5MZPduPz/APrfrmqm7IzitTnO9cmx0FmEErxwO5Jx+v8AhWsdtCHoxG44Bzj8qfkCGipGfQHx4BXxhebTji3/APSeL/CuiPwx9P1Zi936nikzlDjp34/MUPQaRlTOc+lc8mapE0bfusfT+pq4/CS9xUbn9aaY2jc0G7e11K2kjO0+Yqn6N8rD8QampHmXKy6b5JKSPSb7XHmvZrpgcWcOAvqxJxj2xjPqR0qKcPZxt82dFSfPK/bY8ye8kuD5shy8hLE/U5/lgfhXTHY4ZbmTfzGRgvYc/nWFR62LirGcetYlloYVQa3WiIE6jPQD86X5D2GikM//2Q==',
+
+    '7M': 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEASABIAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsugAoAKAAnFAHA+M/H9j4Ot2lmO+UFVCAjgsR8xGQxVQwZtgJxgHBYVlOagrmsKbm7bHgT/tKXNkzvNZLcQk/u9u63cDnlwWuB83BUKeO571iqrbskjd0oxW7+4ntP2pLV5AJtPkCYy4SQFxzjIyACMEcHb9avnkuiM+SO12vke7+FPiPo3i+NHsLiPe4/1LMFlU+jI2D+IyD2JHNWpp6bPsyHTcdVqu6O9BrUyCgAoAKACgAoAKADpQB4N8RPi5Bpcdxpuhs02oxAKZVUGGJurqHOQ0irknAKp3O4EDirVlTVk9e/b/gnbRoOo7taLofIN5r8l9LJeXU5nm8pkCOSdpyBvYvgsdzFsKMBcgnaDXDZytdO17t3/qx3XULpNXtZJLRf15HHzreyIWffIxKhco20buSFBGMnIG1cnkgdMHrXKttF6nK+b5+glwWuYDmBIrqArvaFdg8o/wDPVR8u5XwAwAYlirbjtwLR6SvDW19dfJktWT0tLrbsS2WrS2iECRkI5BP3kPQ56cHsRwPQE5qZQu9F/Xl5mkZ2W9v66/5n018HviTPp8iWuq3LtbSfKDK25Rj7pUklkbPGc7JBgHDbTShNwlq/d2a/r+u5U6cZx0Xvbpn2Hb3Ed0gkhYOh6EdD2r0k76o8tpx0ZNTEFABQAUAFAHJeN7w2Wj3Do5iZ1ESsASQZiIsqq/MzAOWULySBis56Rf8AW+hpBXkv621PiNPEMcLG1EJeOeGZUfaFcyMhZ3bknKhs5zkHcxDEkn52Ueb3r6prfor2PoIvlslomvv0v+J58kbLqUaJCGnVJN4UAhT5bqDgEKGQfvXO48g8jbiu3T2b10ureeq/4ZHJtNaapP5b/wDDs2IY7u13LAwLTLGiy4wqSb+ig/e+Vdq7d3OXkwxyMnyuzeye3dW/z/yRslKOi3a37Nv/AC/zZhzWC2THzUZ43Y75FfcXDPlWB6OucA/N2VgR/Ftz83w2TWy2tbf0MnDl+JXvu999vUtSaQs6I0ELCIGRjk7XkHG4L97lccDcRnCgtnNQqjTalLXp2Vtv6sU6asnFO3Xzv/XcswhbQOixtI8W1Qp6r+9Vwz4yA/8ACSuAcksB/EXb7JP/AC6eXUajy7XbX+fl1Pun4ZeIJ9Z02PfCIjAqxvhht4yBt2gqSuMON2QRkgHAPoUJNxt20v3PPrxUZX2vrbsepV1nEFABQAUAFAHjPxk+0/YYvszPHtEjAqwUbwYypYck7QHx8o5YKGDMFbmrbLe1+h1UbJva/mfDtrqM9nepMzn7TDnO9MR42mNsqx+825dxwCTweckcMoLlemjfzvudkZO611X3WNuxvlurthgKk7O8rYPO45RA/PysWbkBWYZU7QrE88ouKv2skr/e7fI6YO75dr6t/l99z3nwJ4EstehW/u4gsCD5du9NzlQp2tkHYACeDjc/GAOeZczu3sjrk400opXk/wAF6fkb2ofCbSBg2ivEACuxiZEAOOgY5B4ABLEY5xu5Fq72umXG2l0tOhTg8BpEnkyNvUv5jYUAkjBAGc7BkBmC4DNk4Gc1Lg9+v3HVePZWMLxJ4bt9FtXureBSYWM5BzyQGOGIBOzJyQBnGTmiClzJPZ6GVRRUG47pHr3wgJGlASkfaHJlkQZCp5zuQoUn5RhR0AGScknge9RslZdD5ite93/X9XPYAMV0nILQAUAFABQBxXjeGzktN96yxIgcF237QrjaVbyyJMMdv+rZWBUHOAQYla2ppC99D8+7jS5o7iSQLuRy5CckEDlgS5VvlL54JK4DjjmvKnJR92+3U9enSc/fSdtbf8G5bsLOW1u4oBBkSsFKDcGwcZZSc8suRgAjJBC1zSkpRbvsdcIOE1G3XX/M+2bIp4e0aIoN6lN6hiRy53bemflztycYxzgdIj7kF1vqr+Y5L2taS2tpp2X9XOEtvG2sXbSPHawrbQXBgcuWEpZfvbEJQsB6gEcda3lGdOPM7en9M1pqnVk4x5lyrfVL8jsNbuLmxtBcIFLyKNgGcZYcZ4J/SkpSaV9L/qVDlk3GN/dv+B5PoranqqvLq4lkaSKcrbA7AkgDCNGIQKyy9OCxA6jkE7OMYSWt/v36GTc3CTceTybT06+nzPZvhdos2lWBa7LNcOxD7lVSuOcDYzKQSc5GBnsOc91GNk2+rPCryu1FbJHqR4rqOMBQAUAFABQByvjDTbjU9OkhswjSnjEm4qVPDAqD83HQEH1A3YNZVE3H3dzWm1GXvbHx34S0h9QurvRbpRFdBWNrLhgFkRgkkLZ3uGKxqACM7FbbzjPh1IX12a0a/E+owtZU/clrF6pq3ZrS/wAn8j1Sy8Fpm3a8RoLiCZIZtkhYNsXKPG4YNsYAfeCkNlcAAZ4XFr3X3s/mdU6iT5oWaceaPT5Pzv8Ahbue6G1S3gRIQFjiUKo9AOmM8/j1r1+WyXLsvwPn4yvKXPu3r5nOvpcUkpldQST6Y/E02tLnpKfKuVMj8Txq8ISIM3lnqBxx2/8A1VlNW92HQMLe7c7K/TqZFnYZmiVV2kupI6d+aajeUejujoqyUYTf91/kevQxLCoRAFAHAHFe0lbRHx7d9WSNTEA4oAWgAoAKACgD5o+NOim1vIdSt4m/frtklCnbG8ZUq2QDtkI5TpkgnNeViYNSU1s1r6nrYWaa5HutV6f8Odp8OL+TWNEtr64ZpZmDROztuYmGR4wxbuzABmPqTXnpPmu3fp6dV+Z1VJaci0tr/melAfLiu9bHn7MyLqNsEDgHg/jWLctkehTkt3ucZrOox2yCDzgrLgMd4YqACF4LfLjuQMk9cmsrtaLc9alSc7zUNHtpbfV9Nb/caXhZ3u50diHAG4MDkH3z3zW2HTdSz1tqefjGoU3FK3S2x6jXtnzIEUAFABQAUAFABQBUlNtdbraQxycfNG21uP8AaQ54+opuLtdp8r6taMSkr2i9V0T1RzFjo9j4e3WGngRIxafygchfMY8qP4ULK2AOBg149eKhK0dLq/zR6VOTmry6O1yxDqCsxjPysvVT1Hv7j3rjjVt7r0OmVFr3lt0Y2/hFzGBgMvcEZH4itZXkk47FUX7Nu+jPPNY0fzJQ6xqqr1woGR/QfSsffW2x9DSxDjFxc/xudx4MttsLykbRu2qPQAD/ABr0sJG0XN9WfNY+d5KF76XfzO3zXpHjhQAUAFABQAUAHSgDxnW7r7Y0rlobq2csrwzKRgZ2/I2ThcHqpORyVwTX1tKklGNNxcXZaqzTutpLZ+jXkmfIzqyc5TT5lzPTVNa6OPX5xfm0ePSaHeeD74eIfC0/nW5+S4sHk35XO5o0YnJIOWj7kfc6bK8XG5Y6qboq1SOqj0a7xvt5xez2ex7+DzCNO0a9/Zy0cuqfaXn2ktGt+p6RYeNtM8TBXgkENwBkxsQJY26MCpwevBBHPQivg6lNxk41IuMk7NPSzPvqSTgnTkpRavp1XTQ1H129tDiIo31yAePx/Ks4udN+69CnRhNar/gHP3Gq6pfSgymOOMEA7Cc4J9yB+Ndaleyd238h+z5E7WSSue+6dBFb28aW5DR7QVYEHcGGd2Rwd2c5HBzxxXvxioJKOx8jOTnJyluXQMVZmLQAUAFABQBHLKluhkkO1VGST2H+e3U1STk1GKu3siW1Fc0nZLqeXeIvHbAva6crghSWkKkYGM9Bynbn73PABFe/hsCtKldrfSP9b+mx49bEt3hRTStrLr8l09TwfV/F0+mO17esv2YBUk8pQsqhiBG/VkuI+0gcrMjHcGwcD2asfqyU4tOn1vf3Xe2i3S12WltUnsefCKrLka9/o+/XV9/X0ui4L9NRhNxC4lhuB/rBg45yolTJI6ZU5yOqOcFKuLvZ09HulfTXrF/n07pblJci5Z6rZvr8/wCvQxLiDTbOQyanFFLCVO8n/WqwG4tE64kZCg3YUnHGB0LebjsFHGR9o/cqRV1NR0dukl1tt37aXR62Dxbwr5F71NuzjfVX6xfS/bbvrqd3YeH7fUrVbnRtRuoo2QBUZlnWM4yA0cq71YZ5DMCRyc8GvzyrSdGXLUj1dmrpS9H2/LZn3FKv7Rc1KXRK2l4+q7/n0MPxBo+sW0blr+IWuwliluVnKgfMobzSilgDhtny5+6cVzw5U4p3u3a99NXva3T1OqcpyUnGyile1rvRbXv19ND0v4efEqynhg0q5eOEQxRwxFiFZdgCKkg6AAAL5nADDa3JBP21XCRUVPDO6sna99Lbrr6r7j4ONaXM411Z3etra32fRHuCOrqGQhlPIIOQR7EV5O2h2DqACgAoAOlAHC6/cvqLfZUyLclVZlOA2cFs4IOAGXGMdG57V7mGpqkvaP47NpdVva3no/wPAxVX2jVOPwXSv0b0vfy1X4nkeuWAt1e48sxTIwDOwlztdcDDo4wFZdvPQMAeMV9DSs2op3i1dap6p32a6p3+R5ilJptr3k7aaaWtt5NW+ZzZswWkiQI8bR+YocK/ylVYYbaCCFJByDnB5UgMOl2aXOuvK7d7taq+qv8An20LV1rF20vr95g6TpzWsskI22yuhOFA2DuSq+mcMyYPBLIWOatxjBK0dE9Lbf8AAb/P1KUnJ6vXrff/AIK/Qzru22grOAyxDdG5ywVGJ3CQjlkRmLLIckKcSEFQz1rTXL0e0uqaWifk0rX+/uCak7rTuv1Xn5fcZ/gXVG0jU40ifat2THLHJkEYX5QuCAcEjZkNxwpw3Hg5jhqc8NVcVZxjzxVldSWrt5PZ+R7uBqzhiKavpJ8rd9Gnor+j1R1nxX1s6bo7kHbJdOtunqN3Ln8EU/iRX5tQgp1FfZa/18z7nEz9lSaW8tF8/wDgXPLLq0lspLe3iGFjngaQhcSM6uB5jsP9YjFm2gk7CAowQd/6XSw/sqdNRX8jfd3advRX2+fc/PZ1eecm3/Nb8Vf10PYPDPivUfCzMlmcwj5mhbc8eB1YIWLL6lomXH8SkV1YjBQq6y+TVk/S+33r5mFOvKG33Pb+vQ+nfC/iSDxNaC6h+VhxImc7W9QcDcjdUbAyOCAwYD5CvQlhpcktnqn3X6NdV0Pap1FUV1v1XY6OuU2CgDM1SZootseA7kKM/UZ/nj8a6qEVKV5bLU48RNwhaNlJ6L9TlZIt8ZjX+IblA4+YZyv4/MP++a9dS5ZKT6Oz9Hs/lo/vPn3Hmi4Lqrr/ABLdfPVfcYEl1Ig80YkQfJKjcg8cE+zqMH0cZ6kV6KpxfufC/ig1uu6/7dev+F2OLnlH31rbSS7+f/by08pK5g3enQSsUhURtIoMEoA2nghVb0VgWicHhW57V0xlJK8teV2nHr0ba81pKPVrQpPklyp6SV4v12/+RfZnGXVmsrJaOGjMaElz1jIUs+OBkBw5567gvHBHem4pzVmm9ujTdl96a9LXNFaVraW/B9fxv95zFvdHTpDHcEbfmjVj91ZCN0WSf+WM5GxH42OXgfKgsc3Jq8JX5U079Unpr6fmr9ma2TXNHR2ene29v62+aOeOk2tzKJokfyw5IRPllQjkiM/89Iic+X918BkwXIbapCyvZab/AOf+F9Vt92rjN7Xt2f8AXXzOd+JbXup2dmtyfOjgmKidB8kqyKpjY4AAbGQwOGGQG+Ykn4bHYOnhp+3wllCaSlBbwld623Se3ZNaaNH1eHxU8RT9liG+aDbUn9pWXXq197T8md7eRJFIjkjajHDsgIUHGcjugP4gAspBJr7pQShotUkrem1uzX/APk1Jt2b0bJ51SRCsZ8i5gJ2nPykr1TcfmUg/cL9AcbnT5lzTfVXi9/8AO3Xzt62T0elraPR/1ubng/xFdaDcC6gTEb4FxDtwG5G/HdGUbmH8I+Y42g1y4nDwxNPkb95XcHfby809u+3U1p1XQldfC9GvI+s4ZVnRZYzuR1DKR0IIyD+INfAtOLcXo1oz6RO+q2JKQzhtZ1eJrho9w2W7rE5H8Eknl4zjoBvTcT0XJ7V7mHouNNStrNcyXeKv+Ls7LrofPYqrz1PZrSMFa/m7a+idr/McAcemT/3zJ3HsG7dun9009vu++Pf5f590c/mtNfun1Xo+ny7M5XVoDZubmM4hlyssbAlQzdenKZI3IegcEY7V6tCXtEqcvjjZxl1aX52Wj7p3OOpHlbqRXuyupLs3+V912loczKJ1XyCFdT89vIjZVt3BXnlQ/TnhJRjuTXemr+0V1b3Zxa1Vtn8vxizNRTXsm79YPbfdfP8ACSKEupmTbNKu50/dzKwwT/Dlh6SL8jekgycFhWigknTTsnrBrp10/wAL1X9126Fq8XzrfaS79PxWj89Tn9RsI2cQoqyRlG8styJI5CGVXzwdoDrg9CXHU4OkLP35aP4ZLou+nno79reZrJuNora90/y/rucrc2/9lQ/bLfizV0WdCSXix8qSBjyQgkHJyTEDuJ8lWZyfspJPtZ9uXv8AK2vk7+Rovfi7aO9169vnfTzLPiGwm1HS5hblSp2zGM/cEykbZBzgCQsjdMZLEY2sTy1aEJqdOy55QlGL/wDJl9zjr6LubU6soOMr+6pJtfg/wf5jbW7iv7aKY8wzrnI7B0XblfbIbHchgehrspT9pBVI7ySkl59V67ry0OaceSTh/K2v8v8AMnKkIqTgZjAjLDksmCFPo4KEhSe2MdTWkUrtx2etuz6+mu/mKT27oo6ROYfNsLkkBGCrKvJMbZ2OvTJjOGQ8HG6NuoAxcdXKHm0n36r0ez87NG91ZX/r/hvyPf8A4feNRcSLoV2AskUYEEueJAowY+f4hglSCcqMH5hz8rjsJyN4in8Ld5L+W70fo/z8j18NX5kqUtGtI+dunyPYa+fPTPBNNiabV9d08H5BdROC2Sd06ZI68qGXp/d+UV9epctLD1HvydO0f+Bt5nylaN5ziv5nf5y/4J2tncedAsjd1Ab34OD/ALy4OD3GAe+eSceWTS7try7r0d/60MovTXbZ+a6P1Vvn6XLM4+U7wHGfLkU/dcHPUe+Oe4IDDnNRHdKN1pzRfVf1f81saN8t29bPlkukv6tr52a1OA1rQkjIFs7wr/rFxyVD8EDkDqM7funGRtJOfcoVnJNzSb+F9m1r+Xz6a6HHUSg0vstKS7pP9b/fvocpqVzcWc+bgRyuN0c2MqJCmA7dON6EE8cSDcK7KUYzjaF4rRxvvG+qXyd1/h0NZaO/XZ+dt38/z1M0Xo82XTnDB7dWmjcEHC5UsueCMghuAcOODgk1drctRbT91r70n8np5r0GtYtdtV+q/rqUtQi3uMgeVdxuHTtvQgE4xjBVX9Mb8dBk2nsv5Xb5Si2l+V/S5K2fpdeqZmaLKyQNYOS32UGLd/ejG6RM99yxN5WfbPeojHlbX8srL0ai1911fu1cuTvaS05lf5pu/wB9n95R0e3+zvc2Tn5Ibpgm3gKrtHKoA4GE891UdAMDsMY0F7P2kFsptx8lOPPb/wACuaVHzckurik/WL5b/ckad1CWAiZmWNfLDbDh9rASAIxBCkYK5xnDEAjrXU1dNRbTd9V5Oz+/+tTKL6tXt+v+RasrRIojCoAe3lKlu7BmETkk5YnOx13E4O715z0i7raUb/NLmX4XT76FNtrXo/z0/wCG+ZW0/UPsGqWRjXiSbzmI+Vt1s2OCP7+4Fsg7uQccGs8RHmhKktLqS8rNL8r6djSi+V+06Ra0PsXTL9NUto7uIMqTLuAbAYD3wSPyNfnc4OnJ03unbTY+qjLmSktmf//Z',
+
+    '8F': 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEASABIAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/AOV+PXiefV9cfSkceRZ4RQOivtDSMfU5yCfRFHrWEneXkjsiuWPm/wCkeLwFUZVIJL/LHhdzbRwWGSMZxjdlejY98X/w5stPXod7p+mS3ZWOFW6AFQMjLZ/ixhgP4sE7ievTHK2d0VZaHvPhD4aQxKJrtTIxG4qcjPoCMYA9cHGBjGOKxcuiN0lHWR65HoVsowI0GP8AZHXpn8BwPQcVnqw9py7EsWi28JyEAPrikl3H7Z9LIu/Y0AwABkY6darVbGftH1OX1jwvbXiH5ApIIyB6jB/z2NNScdzVNT06nzv4z8Di0jaVVPA4VeB17nOT26DrW8ZprQzlTs9T5y1O1e3umXnCnA4I6dh0x+FdyaSseVKL5rl+3iMwG9XZTxlSQw9x0BI9Dyf7w5Bi9vIfLc29O3afOpD70ZhnjOVB+8VOV3DlSp9SMYNWmTax9TeFJbOCxUQ3AhVjv2ebJtUsqEhfkyFz0B+7yB8oBrojZIyk3c+evH8MsWv6jLeKY2eckDB3FXy/Xj+AbiffgYNYyVrlR6Efh3SG1BonZduQFBHAVc57g9e/fGB3IPBUlbRHp0oaJ9T6s8G+FbeyVZiuWwMFuf8AP0rkcjsa5UesxRjGBxVxVzzpSsWBFit+Qy5hrR0uUal2I2GOOwrN6ehoiFl3cdqVrmifKcdr2mJexmPHXt/nrWHwvQ9KPvRsz5c8W+EUtp2lZCFzn2Oev+f511KTZzOCRwNwIIDsEbRbjgNnerez7VHHpndj2raPk/kckrLS3z/4Yp2EyrMEQch+U9eQcq2QMZAw2RjoQV69MdDldtrWPu3wlo2j3elW/wBtggeaFDCwuI0EqeWzAIwbkYGMD0IxXckrbHE209Dx/wDaE0yGO6sboqqy3AmDBerhBEoBPHZlUnvxjgGuerojairuxkfDzSVvbpYRysQyT2J9v5/SvDlq/I+gh7quz6btrdYFCrwAMVkZTk5GnE2K6YOxxSRb3Cum6MLWEL54o5r6AlYqucVgzoiiAy44pc1jRRKEy7ulYvyOuDscV4l0dLq3Y4+bBqo6aGktdUfIHiq1awmaI/JnJG3j2I+XA+n5dhnsgedU0K3w5s5NW8QWlkwMqmTzBg/wxq0jckgEAKcg8nkDJxXbFaqxwOVk0/kfonZ6NHZoUTABOcEZxgBQAcg4CqAB0HRcKAB2bHIfPn7RSMsmmyn/AFai6x7uPJYL7cDPvg9wK5a2yOqhuX/hHpvk2RuyOZTgH2AH9ePwrwJPWx7+0LntAwKRzFlK3ijFlxE44rrjHQ5m7MjKkGps0WmiFuTWTNVoQsgHNTymib2KcjqOKzdkdEUzF1P50IFZN9jrgtNT5X+KFgQGcDkD8j1yP1/SuulLVHFXhZM5D4K34t/GOnCXAEjSx+257eVR6feYgfj36V60N7o8Ke1mfo6K6TA8H/aA04XekQT9DazMw467oypGe3GT+Fc9X4fmdNHSRa+GbqPD9tIMYKt+jsP0xXz8lZt+Z9D8Sil2Otku5C2YxkDpXOm+h0qnFK0twGtPbYWdMZ79h+Nae0cdGiXhYz96EjoLO+WVdycg12QqaXR5dWi4OzLckvy8Vq56GEYWdihNOIwWY4ArmbsdcIOWkTBl1h5G2RAY6f57Vi5vZHpRw8YK8nr+A1fOmB8z5TS1e+hV4QtymVc3iofKc4Y9Pepv0NuXS6PGfibCHgD9AwZT9QMj+R/A10U9HocVVXjc+bfCV3Jpet2l7GNzWlzHKF/vbZVJX/gWSuexOe1e0naz9D5txu2vU/U6NgygjoRkfjXYcp5l8WNFuda0ow24ZsHJAPGenIyM5UkA84PHevPxHNHlkr8uz7K+1z1sIoTjODsqmjjfdpbpPo/LqvQ5r4e2htvDdtDLkld5PbP7xiBXj1fwuetSurW7Ec3jG8kuZbHRLXzHgR2kkkOxF2jtxucg8YUHnjjrWlGm5bWQqzjBXmnL8jAi8T65qNyLdooZCY4pPlU7G8xmXYrNwXAAcgsvyndnBGLdNN2TV9dHbp3XTyOeniVGyUZJO2qb69v1PR9HuG8sNtMZzhk7Z747j6dv1rktybad0enNc6s9dLp9fmdmnzR5rpjrE8Z+7Oxxl/O93KYUyETlscFvbPYeprB3eh7EEqa82cfqNnqc1uZ4nFpa+aiB4wfMx1Eg6EKGAALE7yQQqj73TCl7vP8Ah5dzjxFf2b9mt+rfTy/zOJt5fEEqfaDevBJGm54pgrR7/MZY4yykNmWNd+ASVHBB61qqUHFyd12eqv8AJ3OWnXqSlyxStbbR2+aO/wDD7X2oxB9TRRKhIJHKt/tL7HsOvrzmvPkrO3Q9lPTszlviHYiaxlUDmM7l/l/Imrg7NGVRe60eB+A9Ga4vo7lo98RkVAx52sx8zjp8w2DnsD6kV2Vqjgoxj3Msvw0arq1J7Rjp63/yP0WgBEahuoAz9cc17i2Pknu7bXY68TfE6+qn+VZzXNCS8ma0ny1Iv+8jzywtVsYRbj5UVpMAdhvOP0xXzU1pY+qStql2LLaPazlWZcFfusuQwJ6kMCCCe/50QbhtoZSqOzTs+6f+Rl/8IdZW0gnikmVhuwqyyYy2c4G7AyCQfUcHiutzb1v69zCHKnf2cVbr0Ne308WijOR/vHJOOh556cVyS3vr8zsdXm92NreSta+/4mrBKfKI9K1htZHHOPvmJYKryNuwQxIPuDURtfXud9VOKutHo/uLJ0C2DEjcobqFY4x6cnoe/rXZZL4XY4nWcviSb7tEMHh6xsDut4QGweQMnnr7An9eM1lKQKd9NEvuX4FuXZaJtRdp/I/4VzS09TWCc3vp+B5Z4lQS2tyG4HlSH8lJ/TFRDdHfJWTv2Oc+FOmGaOG0ZAI43SQnHVhhmP12jb+Arvpr2tVReyd/u1Jqf7HheaOkpRd/WSt+F/wPqdRxXvHw5O44xSA4LUofs85QdOo+hr53EQ5JuK23XofXYaftKam99n6o0LB9gx2rOnpoctdXZbchMsR+FbtJatHPFXsk/mZcshYkn8q5pO7O+EUlZEkRJQjtWsUTJWZj2xCSMM45yKy2bR31FeKfkdFFlR1yK1Wh5MrdNPwHBscAU0uxFur0MfUj1zxxWU1a56OH8jzTVovtscsBOBKrIT6Bhgn8jms4I7p9jtvAeirZRmZBtjA2Rj1/vMfU8BQf94V7WFp8qdTvov1PEzOvzctG+vxS8uy/X7j05RxXonzhO4pIDitcG24U/wCyP5mvGxa99en+Z9LgdaTXaT/JDLWbZx2rhi7G1WF9Sa61IRjYg+Y8D1rSVXSyMqWHu+aWyMttxJJ5rOx3qyVloXoAyJyDg1rtscs7OWm6MO6QRTg/3geKykrM9Gm+aOm6HaTfuC8bnKK+FPsef0JIqU+Uzr0lL3oqz6nRC4xyK6FKx5jp9DC1S5DKT3rCbuelQhyHHRWjXcqwJgNIwXJ6DPU/gPzq6UeaSguuhdafsoOp/Lqe0WVulrGsMYwiKFA9h/U9/U19OkopRjsj4icnUk5y1bd2aQFIglbpSWgHI+II/mRx6Efkc/1rycYrcsvJo+gy+Wk4+af3/wDDGNEDivKPVlYrwJ50jO5AKnAH60lG7uaTlyRUIrdXZopEJD6YrVX6HK5ciJzDcRfKmCvbn+db2ZkpU5ay0foYf9lSSymSd8/7I6Y+tZpdzs9tFK0NF06E8r29kmZGSNR1JIAxQ1YIqdR+6mxlnOLtRJAweNs7SDkcdeelRtp0KqR9npNWel/nsyO9gGMHrUSLpyv6GfpUOdRiUdiWP4KT/OurCq9WPld/gcuNly0ZL0X4o9WiGBX0TPjSekMnNIDF1e28+E7fvJ8w/r+n8q5cRT9pTdt1qjvwlT2VVX2lo/0/E5iAflXzx9DP8TI8RaImo2jeUTFPEfMjkQkMpxg4I5II4I6EVrDZrqbYaty1FGp8Elyvy7P1KnhORNVjENxI8F5EQsm1tqykLkvGjM52kkA55BBGMYJuDvLlehri1WwfxxjVg17snFa9tVaz30udidFvGC4um5OG+RTgeoP+NdnI3Z3/AAPJWLoRcr0Forr3pK77Nf5Fa50hLXe1zdSkKN+0ELlB97hRuPf7vPTHNS4ct7vzNIYtzsqVCCvdN2bs+nxO3bc8T8QaMnibVI7S2Ui1tZd5kLF/OLKjLkkltsR3cH7zY7A55ldXXXv2R9HQhKUPreMk/ZRV4017qnJeSsrJ+Wr8ke2WVpHZW6RRrhYl2j9P19amW587UqSqTcn9p3+XZeXYpXIz8x49KyOunp7qE8O2++aS7boPkT+bH9APzr1sFTsnUfov1PJzCqvdor1f6HdI4FeqeAS7qQDmlA46U7AcLrvxG0Lw/L9mvLkeaPvJGrylfZtgYKf9knd7VhKtTpu0n+v5Hr0MtxWJj7SjTfL0bajf0u0367HM+HPGdl4pluBYJLHHA4Cl1wGDdCCMgHOfkJ3AYJ68eBU5XJyp/CfQVcLUwsYRruLm462e3r/ns9TsC361ktDhscdqOiGOb7Vako4OcjqpPXHqD3B4raye/wB/Y+ioYtSh7DEJSjtr1/yfZrU04Ne1OBArCKX0IbyyAOxUnP6Ae1brnWzX32OOeCwk5Xi6kO6ceZeqa/zKtxc32qnD7YhggmPlyD/DvPQeoFKzekn92/3m0KWGwusU5vopaRT78q3fqS6XpsdkSVGPT61DaWkVZGWIryrJJ7L5G8ZcLt9TWLPMUdbowdUvPLUgcmpOmK5dtzl7W4uoP39u7RuDnGcq3sy9CD09R2weacasqTvB2/L7jGpSjUVpq/n1XzOw03xa0yK1xEVyPvJyP++T/QmvWp42Ml+8VvT/ACPHngWtabv5P/M6WPX7Vlz5ir7NkH8jXcqtN6qS/I4HQqRduV/I+FNa8U6hr9417ezM0p+7glVQdlRQcKB6D6nJ5r5+dSUnzN/8A/Y6GGo4eCoU4pRX4+b7vzMqCOS5lWJRmSVgijPVmIA/Mmsbtna1GlFztZJN79Efavhzw/D4esYrGEf6tfnbu7nl2PuzZ+gwOgrS3Q/Oq1Z1pyqPdv7l0XyNoyBXMY6gA/nkD+VR1suhgldXJDggH2qlpsSrp2Hx2Ky/MMfyrqUbkyrOGmoxrbyztGKlxa0RSqXV2NkUQL71k1YqLc35GBcXpLYTt0qDotbQqPbGRdzVDLStoLaWRjTkViVoXNKsx9nXjHf8CaqCujKTUX95oHTUbnH863sZc6Pg4nA55FR6H6a7LdXO5+Hdot54gso2+6shkx7xozjt/eUU46s83MJezw87dUl97V/1Pspeta7H589ChMuJmxx8qfzasX8Tt2X6m8Ph+b/QnVtpGec1rHuS1daaGrHOqrhRiupTsrI8+VNt3bKksgX5gMVLfU6Yx6XMS5lad/LHA/pWD1Z3KKhHTdj4bNTzRYzb5SzLEAvoKzYRlqLJEI4iV44wPqeP/r1LVo3EpXlZ/wBdS9b24iVUHRQAK1jG1l20OWU76lsRitbGPMf/2Q==',
+
+    '8M': 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEBXgFeAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsugAoAKACgAoAKACgAoAKACgAoAKACgAoAKAILq5jsonnlO1IlLMfQAZpN21Gld2R4PqnxjfzGS0SO2jU8PNlmZRnJAUhR09W+prklVf2Ud0aC+0/0OZ/4Wpf6gwWO6EZPTYijr1z7j0znPGOtYurNbnQqEOhc074o6nZSBJ289c871A4/DkZHOM/hTVWUfMToReysez+F/Gtl4mzHF+6nQZMbEcj+8h43Ad+AR3GOa64VFPyZwTpOnruu52VbGAUAFABQAUAFABQAUAeJfFPXftcf9iWjkNI22Ur/AHsKQn4K2446ED0IrirTt7q+Z6OHpX99/I8il+GBEAXc0m47mYg5GR0z1/z9a4nKSd0etGnG1mS6Z8MrewbMrHn7p64/A8cUOTe5oqcI6RQ2/wDBdxA7Mrq6nnPQ/oP60aj9mnschZ3eoaJdiSNijxHcCpIxjuOx9enr7itE+qOOUbNxex9bfD/xiPFdnmXAuYcB8dHB6OB2z0I7H8h30582j3R5FWn7N3js/wAD0CtzmCgAoAKACgAoAbI4jUueigk/gM0D30PBdGtI77UPtUnzupmlcHnDzOSv5Jx7dK8jeV2e/D3Y2WnRHpIjXGMDmt7CuZOq3FtpkDT3RWONeeRn8h/hUtJbmkW2/dPG9S8c2d4Xis0llAyCyIcD88Vi0dEZerPM9YvQ4SVeQxwSeCD1wc9PSiK6GdXbmR03wo1ya11q3hQ4WSTy2B4yrlhg+4zke5rpj7sk0ebUXNBp9Fc+067zygoAKACgAoAKAIrhPMidP7ysPzBFJjWjufNmj3UttqN5Bbj5yqbN3QMWCEn/AHMkkfhXkNWeh9DDWI25H9m3aSXuoSPMzArGGAHBzjb6evAFDvuk7d0dUVFPlbSb2TaV/RGp8R52n06GROVkkUP7DpVSd7MVOPK5R7HHX9rfQQwx6ZFElu0ZZj8xcN/Cpx8pLdWIyo6DNK0bXbfN2sVzVFPljGPJ3b/JHLap4dmltW+0KI3lGSAcgN2I9OalOzuOUVJNdzjtFupNLuIbpG2PbzKX56bMHJ7nJH6dxW22q+R5qg5e795+hFjcreW8Vwhys0aSA9Mh1DA47cGvSTukzxWuVuPZtFmmSFABQAUAFABQB4XqEAtfFUltGqqjwGXIGDl2U4HsCGP4151RWlp1Pbw8rw9DQHg+z3rMRulUsQ5ALjccsN3XB9PTjpUq6jy3dux1XXP7RxXN0fb0GeJLGOfTJEf5Vj5B9MVDXum8Je96o5Xwlqsd5G1q5BktwB9VPQ/0+oqU+hrKPVFDxVJtXaKh7mlrI8da0E120aqCZMcepOPzI6irvpY5Yq07n3boVs1np1rbv96K3hRs+qxqD+or1Yq0UvJHzVVqVScls5Sa9Ls1asxCgAoAKACgAoA4rxPp8a3EGogAOpMDH1V+U/Jxx/vVy1ltLtp956GFnZuHz+7crh+K57nqnKa9oiahFKssrokwVSC4VFxkkgHjnPzeuBU2NYTv7qW19lqefeF9EtdBkdoZhNI3ycuCSB0Awe3YVm31NNY6NMZ4rkAGOhqC29DB8OaSuo6nZMhAb7RGHH95AysR/wB8hsfl3raC1S8ziqScYycd7H2TntXqnzYtABQAUAFABQAUAVby0jvYjDJ90kH6FSCD+BFTJKSsy4SdN8y6fqcVdIbd2jPVSR/n6150lyu3Y9unLmSfRnF6tZo6PeXTNcFVISLlY0HX7qn5ie5b8AKjmS9T0qc+T3YK3d9WcppiWt0ftdnBHEUOCQgU+hPTPTvWcm9i3K+/U5DxdqIDhmI4Bojc5pNJHn2na/cxXCyWbMsyMDEV6hgcgjPHB5549eK6VF3Sjvc5XJcsuba2voej+DvHF34f1GGa+uJLsXBK3buzNvLHkrnoI+AgGBgcAbjXsqnpbqfNuevkfYkciyqHQhlYAqR0IIyCPYiuc0H0AFABQAUAFABQB5x4q16yguY7RDuuWO1ipG1eCQrf7RPAA6Z57VNSg5U3V2t+KOihWUaio33/AAf/AATnk1CJQVPGOoPWvKWm572pxfifXobZC0RCYB4Hf8qr4tEjS/KryZ8461qNxqtx5ceSzE4HoOpJJ4AA5JPAHJNdMKbbUYq7PNq1bJyk7JF6ytBp0exTukfh3HTH9xM4IX1PBb0A4PtQoeyV38X5eS/zPBqYh1Xyx0j27+b/AMia0JcordUkP/166IxvJHNJ2TPsb4a+KIL/AE6OxmkC3NsPLAY4LoPuFc9cAhSOvA9a4asHGTaWlzqhJOK11PUK5zUKACgAoAKAMzWEuntJFsSFnKnYT+oHoxH3SeAa0hyqS5/h6kTvyvk3PkbxBPPZiQklZkbdk/eV1Oec99w5zzXtVLODS2a/A86ldTT6p/idxp1xbeKNPiv0JQyIN204IYcOp91YEc+lfGSXI2ux93BqcVJbNHG634VeYEwTZz2Ycj9cfpQp26It0k+5w8Hg2axkkupW3BUYn8s/0r0MHU/fRT2d196f6nmY6hbDzknqrP8AFX/AqeVvBx+FfVyjdHxUZWZX06JpZ2IBIB/U1hThr6G05WR6ro9jKEYj5QqFvT5sYHQ8kHrg4GMZya3lBJabnMqmqPUND8aXsI8tyLhIwAd/BzgZww5/763fhXnyoRlto/L/ACO5VpR03X9dT0PTvFlrej95mA/7X3f++hxXDKjKG2vodkasZeXqdMkiSDchDA9CDkVz7aG4+gAoAKAPEvit4bguYjeW7Ilzj54s8yjHDKB/EAOf7wGeo576LlKLhZtdH28jknywkpXSfb9TxP4VRX9u97pro+YpEnSEqQ+yXcC6g8ldygHA4Jz3OPLxFF35orX9Oh7+DrxScJNJdG9r9UewjRryTlYJOfVdo/NsCvOVOb0UX91j2nXpR3nH5O/5HM6u6WRks7jarsrIVJHBK84IODjIBx0Ne7hcC/cruVpKXNbdWT29WfMYzM43qYaEeaDjy82zu1vbsvkecvbBGEMe1iw4CBmOCcDqB1/rX0+myPkLtas3tE0RbZSXHQnIyOvfJGen8WD6DPpCXLsEpXOmSRn8wxjAVSqgf7R4A/Ck1ZWJW5YhEdlGLYH5sb5W9O5yfb/6wrDl6nTzdDHm1Z7x+CYrVOI0X78nuB6E9zx6ZxU8ppzW2NaPVDEMPMYT2RDwo7AnPLep9ahxv0KUraJ2PpqvBPbDOKAOO1vxZHp7eTABJIeNxPyg/wDs2Op6ADHJJxXbSw7n70tF26nFUrqHux1f4HkS6lJfXT3rsXVH2KT/ABH/AJaH2GMKuMYGQK9n2aUfZx006dO39dTyHUblzvXX/hzBlmlgvY9a0s5cgRSqeN0SyBiuezKVYe4JwK5KtJ2v1Ss7dfNHfh6sYtwekW7pvpfoz6DTUYmtxcggoE3kg5AGMmvMUW3ZHpt8qbeyPANWuo725ldgCXYvkgHAY5wAev19q+ipx5YpdlY+ZnLmk33bZSiURgMg+d+E4Ax2zxwMDJH+8fStTE2Db+RGtuv3iMsfbqfz71F+o7WGXVyLKECMfvJD8o+nANK12UtDNuAtrb5myxkbLgdXx0Qf7zcUPy6FRZgtI9iArENeXRycdIl/uJ2CxrwT/Eeg5FZ2ez3fTsbXW62XXv8A8OLHpwuQZGOMk4yRnA4ySepPX9O1PlFz20R9n18ufSHl/izxIYpXgjbEUIO/H8TAAkE+nKr+frXq0KOik1q9vJHlV61m4R2W/meQ6hqck7Dbncy8f8CPy/ixy59lUetevGKjov6/r/M8tu+rN2G3W3gWEdIhyfVtpLH/AL6pX1v3/wAyfLsczYx7ont+myRmBHBw2GGPxz144rbbUybNmzv7izgmg3kRTKNwI75zlR0GQCG7HjvmuJ0VzqcfPTzO9V2qbpS8rPy7HPXTiZUMHy78DJIy0fJZsDoAMkZ6n6iuzY4/Lsa2mr5pN0wwo+WMew4qXpogNLJc5HVqnYDCuJhJdPIOVtwsaD1dv85/GmkN6aIpanMftcMA+7EpZ/c4wP8Ax4lvolLf8/8AIpaJ/d/mYUEomllu5OhO0H0QdFHu33m9BgdqS6v+rGj0Sj/VyjI97fsZYAVjHyqB0wKzd3tojRcsdHufZHibVH0y2Hl/elbaD6DGT+PavBowVSWuyVz2a1T2cdN27Hzdrt40nyHP76Qhj/sqSxH4hcV9HFWSSPnW9WyCyf7VcCRhgIScf7h2D9VJ/Gr2TIemhvS3JETnkZ/rUpaoV7IxhJ5TiUfxDaRWj7Eosavdy6tH85EZlXZlBwoBI4BOTzzycY+UcAVy0qUaCcYtvVvXzOupVdVqUklZWstNjDJH+rjG1crCo9FwCfzG0D6GunayOfu/mdUSI0WJeAoqPMRXE/lgsM/KCRVeQtjm1n2CI85kuVJo2L6+iMO7uXudQnjBK52Rg9wNrsxHvtBC+55qL6tLy/G5qlaKfq/yGzgELEvywxgEqOpzyBn9WPUn65oemi2BPdvcrPebTgbgBwADgAegAqG7GiR//9k=',
+
+    '9F': 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEBLAEsAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APsugAoAKAMHW/Elh4fjMl7KsfGQucsfoBz+NYzqRp/E9e3U2hTlU+Fad+h4B4i/aDW0cxaZbq5zgGXJ/HarKfzrn9tKWsUku7Oj2MY6Sbb7I5j/AIXZ4iukZQ1nCXGFZY23p7jc7KT9Qfw7YvE8un6Gqw6e35nJS+O/EKzCSW9ueOm2RlUflxz6dPas3X5l7ra+bNFR5Xql9yO90P4v6zAypcsJ1GMiSNdxH++hU5PuppLETj2aKeHhLZNM+g/DPjOy8RRgIyxXH8UJYZ/4CeNw78cjvXdSrxqabS7P9O5wVaEqWu8e6/XsdjXWcoUAFABQAUAFAHnfjrxwnhi1bycNOcqucYDfTPO3qew4B5NcVat7NWj8T0X9eR2UaPO7y+Fa/wBep8P+IvFNxq9y8t5K0jNk85P6cYHp7Vwwg2+eWr6tnfOaiuSOi6JHLr4dvNQPnWq/Ljtkf14NdUqkY6NnNGlOWsUVrjSdU035pUcKO45x+HNZ3py2sbclSG6djuPC1+NQX7FeYJx8jHuOhH4enX0ryq8fZvnhsdtJ8y5Zbm4LCXT5tjjfF0A7j6EYIP8APt1xUKSmrx0ka2cHZ7HZaUPszCSNmRhyrqcMCOnTg4P0z6ZrO73WjRq0vkz6D8E+NG1Rv7PviPtIHyOPuygDkf74HOMc8/j7mGxPtP3dT4+j7/8ABPDxOH9n+8p/D1Xb/gHpleqeYFABQAUAYniLUxpFjLc5CsFwpPQMe+O+0ZbHfbisqkuSLlsa0488lE+FPF/iNrsyXMrEqmFjBPrn9STknqTlickk+BC9Sd/6SPelanG39XOR8MaK2sSieYZTPA9frW1Wpye5EVGlzvnlsfR+k6OlvEI0UKMdMV5+r3PWSUdEjTfw/FcqVdQc9jSs+htpbVHmet+B20uYXdmuApyQO3X07HoaHJ25ZbGLpL4ob9i2hXUUCsMMFwwxyP8A9Xf1B9hWC91poza6MqM8ulrmX/V9/Qj+8vcEfxD0z12nPYknsc7TjuQ2XiB9MuUmjY7AwZGHBUjv+B6jpUcri+aGklqgumuWWqeh9j+GtaTX7CK9jxlxhwOzjhh+fI9iK+lo1PawU9ns12a3Pm61P2U3DpuvR7G7XQc4UAFAHjfxqvmtNIjjTjzZsE/RG/mCa87Ft8iiurPQwqXM32X6nwvq0x1C8S2jOQzcrjp8xGPTOFFc8IqnBz8jom3Oah5nuvhnTUtI0RRjaBXlN3bZ71OPKkker2S4A96tFvyOgjjA4rVIXMaEdikyYcZB9RWqgmtTBzcXoeX+K/DbaNKuoWYzETh1/u//AGJ6dOOK5KlPk9PyLUvaK/Vfic3fRx3cBRfmVgWXPY/xqf8AD1DdiKiDs7dUQ9U0ePKWs5mspTkA4U+x5RvoVIXPqPeu2S0U18/1PPTs3B/I+n/gTqrSR3OnscquyVB6fwt/7L+VdmElaUof9vfo/wBDkxSvGM+zt+q/U+hq9Y8kKACgDx341WBvNFVkGWilVvwIKn9WFceIjzR9GdmHlyya7o+LNL09o9d8qZdroZCRjGCM/wAjmuKelNndTX71fee86GED4LKCegJGfyry1FnuppHp1pAAAfSuhRE5GoiZYAVoomd7G9bRFhhe1dEYvocs5JbkeoWyzRNFIAysCCPY1lUjpZjpS1uj5s8QxSeH7locHygdyn1Q8Z+qdCO64PavKcWmdstNVseTa/EVKzIfmU8H/ZzkDP0Y49MZr06L5tH1X4nkVVyu6PdfgHf+Zqcij/lrA34EFW/pXTQXLVt/da/FHPXd6d/NP8z63r1zyAoAKAOc8V6Qms6bNbPwTG20+h2n+Y4/WsqivFmtN8sl6nxtFp0s2pLqFwmwyWwLMON7B2jkbt829HBrw5SdnGXVqS9H/wAE+hhCKcZR3ScWvNf8BojvtZ0u2SSM2sszQDc8sZ2lOQMh2YEnJAwM9fSrhFvVNL1/yHUqRho036f5mp4U8VSW2yQTSvZyfdS4GWVT0KP3A9MfTOKc06bs1r5F0pKavF6dnue+WbNND9pjxgrwfqMipT05jZ9InEajrl9ZuTc3wtYRnKxRjOB/tMSfqf0oU3flV7+QSgkuZ2t5m7oXiGx1kYtNQ82VcAqWVl/FeDz6Zq2v5rp+ZkmvsWa8typ4v0E6nACcGVM7SOASen0BIAxnj1rhqQtqdUZJpo+b7rS21GY2Nv8A6wOFCMduwswHX+6Dz7dMYIq4P2dpPZnFOHO+WO9/uPof4I+CpPDd3dSTsswSJEikXodzHep9GUrjHcHPsPWw7VSTqWtbT59TzsXTeHUaV7317adND6Or0TyAoAKAK17u8hwgyxUhR7kYGfb19qmWzsVHdX2Pn3xdoTaQ9vHtAg8hlGOu8zB3J+u7P5+teLXi4WXS1l9//BPoMLJTvbfmu/mtPyOam8I2sw8zy1YMORyPcjjBx7ZxXInKOzPTdNPdHO63pEMCxQRRrH5Z4xn5VJyVAzjk8nPfnvTcr7t3F7NL4Uke0eHiy6dHG3ACj+Qqo35bFSiua/lY5zXNDe5mZ0UhZUKHGDwylW4I4JBPIOfShXi+aPUHFTjyT6FTw58PdP0wKF3lkbeD0bOMYLD5ivoudvscCtZSlUVpM5Y0o0tYL5no91bqItg5AGKykuhcXrc84HhSN/NvWjDea7KCDtZWDYSRSCOVYfiDisLNRv0WlvXqdEVGT5dm9fu6HsPgWSCS1mEB3GG5eFznPzRhc/qSfxr28IuWDX95/kj53Hyc6qfTlSXyujt69A8oKACgAoA83+Jcamyicj5ll4PoCpyPxwPyrgxS9xep6mBdqjXSxwdtJHHD5kpCooySewAryUj6l+RwH9oDXLomFQIA4RSererew6YqLak35tuh7hp8Hk2yDHAGBXVa0UYTa5mk9ire3iQMIpFKbuFbsT1x9azbto1YuCvqnfyNSytwE8xSD/Ot4xsrowqT15GmiG5J6VjLTQeyLFjpxvNkS52rg+ir1JY88nJ4z7e9VTpuo1FbK3ovP1Mp1lh4uT3d/V36Lsu5V8IaZLoOvarZRA/YZ2S6j9FkdVMgB9yx/KvTprkqSgtrJ/19/wCB4NV89KE38V2v6+78T1Guw4QoAKACgDz34lRF9LDj/lnKpP0Ksv8AMiuLEr3Lroz0cG7Vbd1/keMa/ZyDTBMzMLbGZNuScepx/COp/XivFV3ax9O5Je6cZoy21wVlsbqPCnscjI9cHH1oacXqrPzCK5tYa+h7npV286rHLIoUDgo2AfXGTmt4tvQmcXH3ra+hrajbW97CYZGAHUHIyCOQR7g85q2k1ZmEZSg72Zz2kXU8UjWzMsyx42yLxkEkfMOzDHOMg8EdcDBS5Xy3udLtJc1reRe1nURpVlcX78+RE8mD0JVSQPxOB+NLdmE3yxb7HJ+AvHN7FcLLqrMIb+KOWNWjKgKWdcp2IXB+YZDLtJ54G1Go6Emp7P8ATS6/U82tBV43j8Uf11se82F9ZXXmXUDoQOJG3DAwOMnOMYHBzjrzXswlCV5Ra8zxpRnC0JL0NK3uY7ld8RyvY4IB9xkDI9xwa1TT2M2nHRk9MkKACgDnPFllJfaZNDEMsQpIA3EqrqzBR1LbQduOd2OvSsKsXKDSN6MuSak+h4faXu+0+yv1UkYPpjjg+o5r5/4fd7H1kXzWkuxzGhafbaXPN+5Qxzkkqy/JvwV3Lj7p55x1wD1GapSvrLX1OlUo1fgbhPq11+Wh6pp76eBhLNNwIOCw2gY7ZHQnnAFdS5ekfxOedGtHes7baJ338v8AMjufDkGqvG9zEkcMRDCNBt3sBgb24LKOuOAc8561CVu33ClJRVlKU5d29F6LuX0tEtmcqAoOMY44ArBqzdgT0SPOfipfC20CZBkec8cXHfc27H47adPWSXzOes7Qf3HkSX95ZW2m3Em9SsBEJkYsjIkzjGDkADpgfKRjIGaGvefa+n9fmcyasrb21/r8j0/wrfN4l1qIXDJHasqtcRxlljfylYqhG8lmMuwYIJILAAAGuinaU/e0T3Wqvb8zKpeEPc1a2ejtf8j6phVAqhBhQOB0wPof6817astjw3e+pNTEFABQAHjrQB4X42it767N3pAadoVJu3iQmFdhABMg+QyDJDKpYgKS2CDnx8RBTfNT1a+K2339z3MLUdNclTRP4b7/AHdjL0lY7g8DmvOiuh7vS529lZhDlQBj0rpjFnPOVla5oudvzNwBVPTVmC7I524uvtEnlxc/T+dcjd3odKVkcX8R9Al1bRZILYbp4iJkXu7IDlR7spYL/tYq4SUJpvbZ/Mxqxc4NR33R8opr11e+Ra3ErGG0HlQoxOIwTuYKD6t1/AcAAV6EoJK69TyYS1s/Q97+G8l59sFrYzx20syhQ7KGyOrFCRtLZyBjkexrlp83PaDSvpr+nmdVRR5LzTaWun9bH014fS8gu54Lpy/lxxE/O7qWcv8AON+WjJC8oCVxgjkmvYp8ybjLdJfjfXX0PHqcvKpRW7fS21tNPU6+ug5goAKAKWpWv2y2kgxkOuCucBh3QnsHGVJ7Ampkrpr+v6ZUXytMpW19YwQCI+XaKi4MMm2LYBwRtOBt91yhHIJHNSnFK21um1impXvv57nyu+sPpV1IbUiSNZHCgEbWUMcFSOMEYIxx6V87J8snbu/zPq6cnyr0R1On+Mrs9IGyf9rj+VCqW2LaTWpvJdX+qYEmIkPYdfzqHJy9ASUTqdPsUt145PcnrVxjYzlIS7TJxWM9zaG1z57+IHw0YvJqukIDuy80CjBDH70kY755LJ1zyuc7R10qu0J/f/mcNajZucPu/wAi/wCBNU0/7EljdMkN1afv7a6TG9TyTA+AcHfniQEYz2Izq7RT5vdkvejL9DmV21y6r4ZR/U998Lapd6ldyGKNTEETzZ8lVkbBCNApXG04O8YKqwOwnOK7aUpSk2ktUrvz6W/XscVWMYRSu93Zfnf9O56OseAAxJIHJyR/LA/Su6xwX7GXfayun/NJDO8QGd8SeaB9UQmX8ozTCxwmp/Gjwpo8ggu7xo5M4ZGt7lWTjOXVogQPwJ56UCOQ1D9pHwzbgizW6u2HTbGI0/FpGDAf8AP0oCx8z+M/ivrHxJv47NWNlZGQbLeM5AUdXkbAMj4z6KOgUck81VqMXKWyWi8zppR5pKMdG/yOqi6BF/hAA/CvnG+p9RFWVj0PRi+wVC30NbaHc2VxtwprVOxNjpbaatEzNxK2pXcVnG08zBEQFmYkAADnkms5IuLstT45+IHxKufE0rWVoWgsEYgBSQ02ONzkHBXuq/ic9vYw+HULTn8Xbt/wTw8RiXO8IaR/P/gf0zz7TNWuNInS6tZDFNGQysPb1HII9Qcj6jivQcU90eam1sfS3hH9o64tnEevwLOhVV863CxyjbnlkJEb9f4THj0NCVmS9rH0fpnxM8NarAtzDqFtGrfwzSLDIp7hkkKsMeuCp7EjmrIL2vakdG0u5vsbvstvJKF9SiFgOo7j1rTZB1Py31nVrjWb2W8u3Mk0zl3Y9yTnj0A6ADgAACsGWUw2Bj1oA77wBpK31005IHlcAf72cmvNxcuWKj3PUwcOaTl2PZhp4S4CqeK8Nux7yWp29lD5AABpI16HQWvLA0xbI3WuPsyFucKM1rsQ1c+WPip48udWmOlRboYEwXwfv55A+mDz+XTr6eFpKX76XyXbz9TxsXVcL0Y6d338vQ8WH901654ouccHvTDYlt0aVxGpwWIAz78f54NID6XsvgUfJQzX5WRlDMEhygJAJCkuCQPUqufQUXsVY//Z',
+
+    '9M': 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAAEBLAEsAAD//gAfTEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQD/2wCEAAUFBQgFCAwHBwwMCQkJDA0MDAwMDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0BBQgICgcKDAcHDA0MCgwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/AABEIAG4AZAMBEQACEQEDEQH/2gAMAwEAAhEDEQA/APn1asglFAEqigCQCgCQAnpS2AiN5DApZ8kjoB/n/PGKzc7bGqh3Kv8AasTkhV2nj7xA6noByf60cw+Ua2rxliHyD/MexH459O+KfNYnlLSXKyBWUgq3AIP5/wCFUpE8ti0KskXpQIKBhQBmKKQEoFAEgGKNgHigDX0q1e4uEiijaaRiMKgyeTgAYIOT+QHJrCUuX0R0QhfTqzs3+FutSbpktsbj0LrwPYZ6/oK5farsdnsX3Rzt78NdYGdtlKXXjOBg9Ocg4+nQij2sRexkYU/gXVbOP/SLdsJzjbyPbI7fgcmq9ou5PsZdjlhbmNj8hiZD93sT77+hPtitU77GMo8uhsWdx9oUnuD09PxHFdEWczVi7mrICgYlAiiBSGSAYoAeBQA4UgPon4TaKEla8kVTIE2rxyvA49u/SvNqO75T1KUbLmZ79vCDFYtpaG6TbuRM4wfyrK6OhLYybxI3UgAH1rN26G8U+p88/EjwlbshvLf9zID823A4+nTrW1KbTsc1eCa5up4hbW5tjhiCTnPv3B9ffB5yTzxXrRPEkXulbmAUDCgRTFSMeKAHUwJYQC6g9Mj+dJ6DR9Q+D54vCujLf37/AD3OZcDsrElQB9OT9a8iTvJnuQjaKNbTvijpep3AtAkqMehK8Ht2Occ9cYpPbVFRTTsmdTqGt2OmxmS4faAATnPpmsLReiOr3lrsjnbTxbpmq5FnMrnOMHIP05pODXQamnocR8QZ2WzaVQSikBsc4B6H6ZPNVS0lqZVk+TQ8BnMbBWXqckH/AOv+NezE8CWhXzW5gLmgAzQBUFSMdigB1AHReF9PGo3wiK7gscr4/wByNj+hwR74rKq3GLa8vz1/A6qEVKaUtrSfzUXb8bH0/J4VW9tLdJc4t0jDKpYbtgxgEEEAHnI5zivH5rPm6HuKKS5Opzdv4CkfUBdBXt0Mwl3eYvy4AAVFCYwcfNyc888nN81/+GsLkUdm38y948jbUUZYuijB2gE5HAyOOtYxaUjqcLR5TxW38Oys7SQfu5FwUXyyjjAHOVAyNwJwdwIIHBG49Lkkcfs3fS1umljv9RaVNKmjucFjC2T/AMB7575rmjZzVu5vNNQd+x4jHp0rQm4T/VIOckD2+XJySAO3YE168ZJNI8GVOTi5paLVlOus4woEFAFYVIxaAFFAHpfw0sWu7m7MfMkVoXX8Joifzxj3BIPBNc9b4bLud2GaUnfflaR9SJqMUNruIJKkKAO5I6V5V0o2tqtD2VFud09LXZiXOrX2nAzTQpIhVmKiQh04GxVQKQzHncS4xxgGtVF21Rr7rfutpL8Tj7LWX1CaQNbSwk5cEgMjDuMhiVYejque3pWEoW1R0c2v+ZqWMMUwM67RjjHQj1H1/rWXKOVlsch4suYba3m80gRmMr+J4/U1VNe8rHNVklB3M2+tF0rw/JFKiLmBGTA5/eJtCtnkMsgJx7jvmuund1F6mM0o4eX+G3z0/wAzw3pXsnzAZoAKAIBUFDhQA4YpgaOl6jNpc6z27vEQQG2MV3JkFlOOqnHIPFS1dWZcZODTWh9XXckzQp9kCSSbiVDEhckZUnGePwrxkrO57yd1a9ipCmp38f8AxMJbOzbLDyWilkyFxhjOrIMv1AC9OozxXQ23rdW+ZaUo/DTlJd07/h/mYuqC60Y+afs84A4a0uAzj5c4MT4JHUDDE8dCSBU2fW1vJlKT25ZxfnF/5GRZ6xLMJGaN4twyQy7Tuzxx6muaUV9ktTaTUuhg67JD5J+2DeibWZc8krggZ9SeK0px1tHc5akla8vhWrMTxp4tttWhSzsN3l53yMQVyeygH0PLHuQMcCu+lScPelucOIrqcfZ09r6/LZfqzzbNdh5ouaAEzQIhFSULmgB1ACigD6J8Fas91Y25lOJADEp9RGSqn64AB9+e9efKNptfM9WnJ8ify+46PxJZ3FxGjW87QOx5Gcg/8BzjPasrcunQ7VUaXuvlZziq9oB58jTSL3bAA+gqGm9Oh0e0aWruY9zq4iYuxGxDnHq/Yfh1o5ehxuXU8+8RahJMqqflEhzg8Egc5I9CTx9K7KMdW+36nDXk0lHv+hyGa7TzgpgJQAUAQA1IxwNAC0ALmgD3zwbZC50GHkq4eVlYdR+8P+Ga8+o7TfyPYoxvSXz/ADOc1++13TXZFUzxKeHBxx9Ac+nbipTRTjJbbGMmrarfrh18te7HJP8An/OaNEHvSNax0sqBNckkD7oPr64qG+iOiFLrI4jxJcebeMB0jAUfzP8AOu+irRv3PIxLvUaXTT9f1MDdW5xhmmAZoATNAEQpAOzSGLnFP0ARjsUt12gnHqQM4qlF6t6JCv0R9J+BEaPQbffgFkaQ4OQBIzMBnA5wRnjrnFeNUleTaPpKEOWmovz/ADMrXGfeIh909eP61nc6eXoU7S3VQM52980XKUEizNiT5V6Cp2LtoeZeMrD7FsvU2kS/K67gGz0DAHGRj72OmM9zXo4eXNenZ6bO2nzPDxdJRtUTWu6637r9TjlkDDIruaseSPzSATNABmgBgKgcc+nvW6prqRfsNZ/Tgc9PQcH8SeB9QavlS2QrihcjI68/5/oPYE+uat2AmA2xjAztOSPVSMHv1xyPwzzTtoLZnufgTX4bjT1siwWS2Tao/vov3T9QMBh6jPQ189XpOk/7r2Z9PhaqqpR+0t0bUkcl7J8oB3Hr7VybHp2M3XNSs9ExFcSpGE6jPzMfZR8x/lWkKc6nwp+uy+856lWFJe/JLy6/duec6p49YqU06PZnP7yUfN9VQZ/8e/IV6cMIlrUd/Jbf5/kePUxrfu0lZd3v9235nm93cS3j+dMzSux+8x/kOgA//VXpKKirRVl5HkuTk7ybb8yspdfmBIzwKbVydi2lww+8Mj19qzcOw7k6yBun5Vk04jHbsVIyqJOFHtn9P/r12GY4HbwO2APw56e7EUbASlwpIHYYH5Y/9mp7AKJSTwexOPxwP5frQIkguJIG8+BmikXng+/t9PxHXNJxUlZrTsXGTg7xdmtmtDobnx1q/leXHOIAQAfLRQ5yOoc8qT/sgYPSuRYenHW1/XX/AIH3nZLF1ZK3Nbppp8+/3HISyu7bnJeRjnczFm9yWPP5Yrqty6I4276sg83043D8lHU/U+tMQ1TuOOg9PRR2/wCBf56UAOVgTnOMcD+p/AcfWgWxMGXt+A/l+Q5+tMBjuE47/qT1wP8APFAEJuivGcY7AZ/WsnFFEQlyF/3APzK1Xb0FsWFmyRj1z+pP+FMAE+Ofx/Lc3+FACCbZnnoB+gyfzJo2AjWYKceyr+mT+ho2Ad5m5gT6buffp+WKAIjLnqeGyPoo6/nQBD53c9DyfZR0H4/1NIY8zFRn+Jz6/kPwFMQolCjA4H/so5/8eb8xQA4XGzLdx0/3m5P9B+GKd7CKrznsenQ9v9pvx7VNyiES4HUL9cZ+v40hjRKePov8if6VN9vkFiSKYg47YP8AJR/Smv6/AREZiF9sf+yilf8Ar5DHGYhX9z/QU76MBplIz77v5BR/Ol/wRDvPKozDrnA/AYH9ad7XAgaU8r9F/DjP50vIYol3nnucfgO34/yoDYUzEkkduB9W4z+FO4bCeaVOPf8AReAPzOaW39dgEeXLBRxt/mep/nTv0Ar+aSf8/QD+tTcZMcLx1/AVWwj/2Q==',
+
+    BR: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAtCAIAAACRYfoNAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkJGNTM2NzBBMEMzNTExRTY5Q0NDQkU3NkQ1MUQ1OTFCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkJGNTM2NzBCMEMzNTExRTY5Q0NDQkU3NkQ1MUQ1OTFCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkY1MzY3MDgwQzM1MTFFNjlDQ0NCRTc2RDUxRDU5MUIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QkY1MzY3MDkwQzM1MTFFNjlDQ0NCRTc2RDUxRDU5MUIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4SeXTsAAAKC0lEQVR42uxZCWwU1xl+b469T3vXu16vjY0x5kiMEw47tATEIbUJh0pKSSg91FRNI0VpS5tDUZS0SqBqUoqCaNQEIqUlASqSNrQpacAFEihHQOXyGl9re32svXjXe83uzs71+t4YB/BVDjuBiqeRvDue433//3/ffywDts4Ft/OiwG2+7gD4PwcgU+S4LQEoEEj0Qmd0sTOKP5CvtxMAibYz0u+m+Wtm+vbP8r02vTmHlQiMcVg0WF44poan8LHcHf5zZcPS/ChUyLmqHG6lK9LJa+qTJgAggOhWBSAxBXp+8zT/b8oDDq2EpM9RgVyttNoTLjVkTsXNiawWUMotBgAzFcHvFfbsmNFwvyMBZIBUK0P1IAsRu8+wpVe7wzGZOh03E1ZQ6BYAgDBZmcnm1Ft3NT1b2mVhZGxvoAVQByBDHg8YADUAalW6ScDMyCtcfTMtydOcKZzREVg3R294U6WETNOU/ERR9wuTOnK0EjY80AOQBZ9dyP/0XNG5FmdP1Ihd4ban7p7YO7+io2pqEOgAyBAwMZF+qblwc8AjKTSg5S8cADa8TM+yx18tb12gxky/sfd8UrZxV9VhnxekWWLyfr7ii7Fb9OJXpnetW31i5YJGcr16y+GI5Rf1JZ9FrQTDDZH7hgBItIGVninpfKqkS88oZCsakEhpnnxtyR8/rCTb1YnD7Aaf51n8d+0DZ7f8bJ/VlAUCwZCVqY1tng3+wpTIAEYeZw4oxPCLnNFdMxoeLgizmKsKgCzoS+iWPbvq7zXTgUEErDx8WOOT+F+Mcu689xNfwYqvNhmMRKkYiOY5Eg86o35e25I0XrpyXABIdK5GfGVK6+apLR69iFRjQQqIiFr1yxUH/j0ZWPj//W58gVbqbHOeDuQ+vLCeoRDRKwW49eLa/N48nXAybk4L7LUL1LUBUNPTyvxenJ6+5orh6EADOo7V5tdvV279UzXQpYEoYzRAkoGMiI5CSI5hl1ZqaXIbDPy8OZ1AHNBZCGbncA/lhbsFti5xrSnvGjggMUWG9IbJgW8X9IIrtk5upkFvzPLQhmdSoslkpVmWFiRJycJkMhuLChcjHJ9Mk6jDesrSBBJ9ReUiUVYzf37rW4X5SSRe8UxCfbAz6HiusbgtZQC0NLpXRwWA0xMEj3p7XioL5OtFrOJoSDgkzY8fFB5T6IiWZliKEWQpJfHFhnwbsDW0hyIBeffhUwFfpqGpz2TSRmMcYK7AwOnWP7H/uUePodTgx2LMoQz7YlPRG51uwn5auU4ARCWpaZbUK+WtD7qiOEaRMsytCMFdZ7bU1DkzcT4c5yQJQQppdXSJO9fuYu+ZUjClzJk0RNviIalD33Q+9c67Z1tb+jCPgYYhT+DZWRUdJ7ZsJ0QYEizEFRT450X7Uw3FtThzj6CzwwGQaZaWfzIh+Hxph1UjDzX8pTuxkSKGgtXfKXJP7uMS8e6YGiGqvxWZvF/LOHOM90wtmHOfu2y2wTvREItnP/5b4MAHwebGENBjDIzZzNdv2+bJ4y4XTkNckRTo9S3eTW0FgjxMyhtMYsz+ubbk9orGHxaFdKpKjug7FvjbbX/YWxVLZrKSSIyKA52lSP7SMkBD4/en04LfH/r0UOuxw+FOf9ZoYBcu88xanOO1un2+XpHLCpBds6DO406BkRKAArQUWpwXX5QTa0rrOnktgqMAUKiZVq5mdu0kG4/FYXQJwB5oC1q37a28imQKyndbJVmRsBb1qxBGoqEERalvCP9rb6Cjli+dmLtgZV51lbe9NdPjT6x9wDehIAmkUd+lgEKzsNoVronYuvorqOEBQBTKag5HrVP0mUKjMLqIYQCRqP7Nj2ZgJgwUn/gD0OtYPivLMvEdw9AUDRUFKeQrViHQ1tx7cF9XKgwq59uWfqNUFuj5pfs9Tg6MnIKJFDPgRJ/pB+fLjsfM6OoUMTiE8GYCacP2bmdaoqpsnJZFUBnxuRjh1o9m8Bxjy9Hr9VqFbBul01lZwfkZMhC68ixmo1bgRQmBzx0iIbn2ZNB3kpt2t+tbq/IrTe8BMTGsVkLVTJxM/aq58Ee1Zf6UAQ1JcMMlMgrJCB6J2D8M20v0/CQzD9VEM/jpCBiN4p6jk6NRl9drFkQplcpqtKwsqzlJVpxOMyZHLJGZ4M2N9HGXkxrGZmRDwfihfRfvnyRMK9oJpGGMRFSIBvt7bY+cKX8v6JLx+4Zrg0bIxPhdlHKR177b7ezhNbNtnEmjDHUFNIBon/5Me1Vre1eKyxpNOofdmIilAYWbFZhKCxi1IEiRaApQV8i/KFdMLdCZNJkUU2h5e1H1QDK+2vC9Wfbp+uInL0wM4Q6OkUdKZ6M29Th9QPRGoKD62IxdXQ4MFg66PAvWLPQlk00AkeIZi0xfPK3RMQNyLHtd1rISJ8ARpVICU5wcELYFo1pGB+juHy9rIDXpEMPvDuZWH6t4vc1L9k0rN1ELqa6Iiez7PY46Tj/TwuXo5MvkVoDFIWDH1hwpBzoZmxxXEnPvLQ6GEpi42OqpjBBP8vj9+S4LlxasZr3dgtnCelzWCz7u+e8eXL6oBfFXkAorW1r7uK/0xabiqMSqyWtMijkSf6gubt7Z4zBR8iwrh6ugflZAGVTd1X2i2elvzMclGj7THowpCPW3w5gPRI4gxJ1brs0AEbJb9VxGCDRmF1ZfeH1dDUPKvktlFV5vtrvWnC0/gfsbRrnG/uZ6ymkKpSX6HyHHsbi5wpxyG0SoFp00i74+p/XIBQ8ukoHmKpvheIBEWzEMZDHrurtjFquxu02aU9ny/ssfWE0CTsD9hq9NGL5fW7appTBFOszrmFlcZ0NDIgr5OeM73U5suTk2jqFx/Qxwa/LNBQ2dUeO5Cx5SAtKXWnWGoSgKkshXUCKWAZKWz8JVS/6z44U9DjuPBGJ4QYGvtnjx7n24hGauu7G8mZ6YmmOP/3ZK27zcgZ6YBn85NHnjruqjdR6QUZuSyz0x6TOrpwV/uur46kWNpEVWbznaZ8Y98bHIdcTMGE8lGEot+yZ12HDwqFMJTMrjdQWHzhTVtjkuxg3YUXm29PQJkfmVgfumd1EDU4mESK/3F24KeET5S5lKXDUXoqdaOVx4L82LEkYi0uOTJkZRj36tplSTZ/uDEOwN2Z9uKPYlzDc8jBi7wZaq02Fes7M7rwOnPCtnxq7AhaBIxlhQHZ+QUlkEUCKoerLsurqJP28o6c1qRklPX/hoUQ3301Hr7lCukxUrrGlSN6DB3cmOoOORs1MOhHNIUUCNzYh3TIe7lJIQ2b/2OM8lDfdauVydBNEllfSndI/VTnq5uSguMdeSnr688bqa8uoTJlxE6SkF17N4r78P5K89V34qZrlhqRlPEo8yAlOoJa4Ijp2PQ7ljGDODFjNuv11hV8j7L+YQGzEyGLfFgHFdtALGed35mfUOgJtc/xVgALbmqDgClr53AAAAAElFTkSuQmCCMzQ4Mw==',
+
+    DE: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAmCAIAAAD7pgrOAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjZFMUI5MDQ1MEM3MjExRTY4MTcyRDlCOEZDMDU3Rjc3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjZFMUI5MDQ2MEM3MjExRTY4MTcyRDlCOEZDMDU3Rjc3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NkUxQjkwNDMwQzcyMTFFNjgxNzJEOUI4RkMwNTdGNzciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NkUxQjkwNDQwQzcyMTFFNjgxNzJEOUI4RkMwNTdGNzciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6gw/inAAAAVklEQVR42uzWUQ2AMAxF0Y5MxCThDI1TMAXwCXjg74VzHZw0TVslSZL039qeDljhgH6FA7YCAAAAAABIvsR3OmAc4c/cM8MnUKclBgAAAAAAAPjaK8AAbScGyes+6bEAAAAASUVORK5CYII5OTg=',
+
+    ES: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAArCAIAAABHOBkQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkRGRTFGQzcyMEQxRTExRTY4ODAyRUM0Q0I3OUUwQUMzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkRGRTFGQzczMEQxRTExRTY4ODAyRUM0Q0I3OUUwQUMzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6REZFMUZDNzAwRDFFMTFFNjg4MDJFQzRDQjc5RTBBQzMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6REZFMUZDNzEwRDFFMTFFNjg4MDJFQzRDQjc5RTBBQzMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5CGIEmAAAD1UlEQVR42uyYy28bRRzHfzOzD7/Wie3EdtIkdkwSkTRt0iRSlJKKJqhCnJBAiAM3JLhx4QQ3uCP+A269IIGQECFItEhBrVFJBQ1NaVqTuCHOy0lsK2t7nzPDxs0BboYgY4sdzUr7mFnNZ3+v76yQ9vdBKzcMLd5cABfABXABXIAzNYFqqLUBwjNaSwMgvtziLgTGWfBrnbViEKOTqZxBXsVAaq9B/5UF/v7SOce6JaiGvF8Rf9oOzQ/kFYF5RMvpzrPmBkBQNaStY6+qiUS3pLLu14Dl9PskFG4zvQJPRhyLsCYGwHBoeDJfIfEhOgoIeMOrTVd+vNVujVF6iKovku450YMN4E0YA46Li+C4e7ytIoWMrIEqPqM6bnFcKE0w1TIfW6S7s+yRTZBqIxuXRm/VtXpG0c1vBUzghWsWeGHpLlnelAUdhQ71ShsIfnZlmA8PQ7mAbtwQB1J09BIFu5lciAL/nVoEgWGg1et+lseeLGKbHM+/3HdpjCq7WpewVV732Ytrquk3YLS5YoCDgGBwcp5yG8P3W4v+LY9u9uo9m3Lb+UlPcgZ+Xs+pHeJoLKosnp97rVO8ByzTXDGAZAjHXpXJS1YVEQ8tDsv58YAaAIEgdlDyFagSVhAxWBUFg2/7lPGT4tBEFhBhY0nK3vsECE0Xg+YRqDy0pyu9PLu3komNjJjtomLTfMaf/05SfR9qfDt8jXSkGhEG9VmAwHGOkok3yOzrz1xVcZTF8uX+uyyT7PlI969++bU9mSj45M4hs+sCD7zy3rE8YZVYY6Q6+eDNOkYxCPXD3sP24jcPUjMbBwSJx/Y5c/uOPb31bF9sdWWwuKD/tiTt3/ZiNfMF67/4ZGg6h1jzuJAMa5/jQt6feCvaPXRz5VeK44BlcnUnnUxvTkWzzK6IVWA7fOgdabd3Kvtpti+Cuib4mZTivwlgQOoKpeFZRlVmAndyKkOUknhXKSEXZL93JxLpqFQ5WGBx+cLlgeByJJh2rprGAgyUGGi5jy2L4hSAjRwd6hzURhUpIWm52AZYDAsRZLPK0dq7/YHHUhCaqZARuL/bf/2Xy05JjirGyMXN2yVsMMWMTZl4xH50x6dlRKINzukL67MLj0bC3oH3lc/afZUG6Lp6C1lA1GZ795164AEtOUbb4vqBltwVO3aK2cT0uVjxSVfPvq+Dx9dLz/cdeYQydkK4IZKuPi30NN+SU1Fx8l2FU9c63ccINYehtZOnd2xoDIDgZJh/XjnIX235Z3NKjVKjD56LtvamvvCDt7UBiJe3NID7b9QFcAFcABfg/w3whwADALA9jy2I9PhSAAAAAElFTkSuQmCCMTg5Mw==',
+
+    FR: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAArCAIAAABHOBkQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkJENDg5REJDMEM3MDExRTZBM0QzODREQzFFNDczOURFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkJENDg5REJEMEM3MDExRTZBM0QzODREQzFFNDczOURFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkQ0ODlEQkEwQzcwMTFFNkEzRDM4NERDMUU0NzM5REUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QkQ0ODlEQkIwQzcwMTFFNkEzRDM4NERDMUU0NzM5REUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5eKs0eAAAAZUlEQVR42uzPMQ2AQBAAwXu610EwQxCAAnrE0GAAETR4IqGABg/XfTIrYJMp0W+R7vmOfZynIT14z+te1lJr+tBF4wEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADTVL8AAJaAJpU7NMCAAAAAASUVORK5CYIIxMDEz',
+
+    GB: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgCAYAAACinX6EAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFERTU2NTJEMEQyRDExRTY5MUVCQTMxOUMzRTQ4OUQ4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFERTU2NTJFMEQyRDExRTY5MUVCQTMxOUMzRTQ4OUQ4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MURFNTY1MkIwRDJEMTFFNjkxRUJBMzE5QzNFNDg5RDgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MURFNTY1MkMwRDJEMTFFNjkxRUJBMzE5QzNFNDg5RDgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4LW+oDAAAIsElEQVR42sxZC1CU1xk9u/zhsWQFX0CmqcQRELRtWjOdjpXH7rI8HYzhJWR8ZSomVZsqoPGRzqStE03lpSa+UNTEKBKbqMGI7APYBaftVIx1DCwgjTREZNQRlAUFdvvdfx+wsCAoLt6ZOwy7/979zvnOd+537wrqYhc3+GS+M1EsnQfLMBiNOF9Rj7/tqYDmYiNA/8PNGRDgyUbHQyQlzkHRrkXQ//sKdBEpEDgJaT3zgrS+0WDETOVJiOb8HIlrCvH3Ly8D7i5P9n0ULjofAUIBpJJAbFwbgTAfIe7kH8Ot3QUwdnZBLA+Bz9q0Vq7r26teOlmi2CMuEj7rVoIRIaTA5ksC+HlGUYPcg1WoqLr+9EQ869EfePgsZKyWInKaMzo+PYnavEN41NICz/mR8H53BSZEhvG55mb963z3g6OFuEEPEBHwJCK809+BWDKXX/P1iCB+nlXWIOtAJbRjoYhnCDxMFoQNa2SI8HVB52cEPPcQum7ehEdUOKZ/uhsTIkL7f7JHGLVFiYvyRARVK+D/4Qbo/1ENnTQe9XHLcL/8ovXJBfIgaIrScObIMoTMmwF0dQP6R6YvHzfgRlMMD3sgIeDnTq2CYkcMgjWnUftaJHQbtsL11dmYWfoFAkqO24AvVtVCmnIInKr0GlTqGsikQVi/JgnhSxah40ghmnYfJiIS4LkgihTxNsRhc81EBPKTlUZ2/jgpwppxISQUd+Yakvorruj8/AvUvpFPGSepR8nge3inRerWcU6t45VcXtXAzA4c3J15AGrlNajLGBGByFydhIi3UvHgyAk07SyATnIBHnFR8MnoI8JaGmYiNI4gop/UWcYzSepRJHX9MQIe3w/4UQIeYQu8mAeuNXmZgcX5Am/CHP8uc2ORhYjvoCZFhDMTWZUE+bIUdJBHNO0iRUji4fl6NLyZWVoUQSSweZo3SyKi6hkQMQA4M7colvHjp1DDgP/4I1/j0w7n0V+JzUe/JqkzEy+rbLABbhmczdP9iFApqDRUjIggKxF6ZpaMiDMlg4hYSCSwad01LlqYdh4jVw9C+qo+4LUJZuDRckwryLULPIfiKNc2mBNiC9w+AcMQIZOZS2N5Kq+IG3kFdomwlAYjIseiCDIqo3F03sabG/UKVqlPdzVJnQfeTIDlVON5g2qcB57ParxfAoZRIsealMeOnl6oT1+GuvgKfi1liohDhGYhuj4vQuvez3CPiJhAtef9h7cgDg+B0NXFhojtO9W0hGHEBHT39mJuiD82/ZGZmxtlvBA1+47xNc4y7ns4l4D3ZfwBkXWWJ7wKlxhw9l0iM3D98PgECatP3KG/k0YSGOsQOzu74UyZiZLPwvJFc8A1NeN2wQnoq69CKBLBI0aKickLIHRztX6ulzLRcOMOZk6fgg7qBOuG6gQVhRC99gvoGm/Db/pkOF1vRDMB77x+A04eYkx+M35Qxu9TAo+cugyFth7dtIYbZVw4cu9pERiNxhETMBZDf7UWutA37BIQpPkKrj+b6chOooXTX/rPUxu0wM5rQ42umnq7ZsRe01+5ht6HfZIdybpPu9EIqicGOlQBAgaeGhi7ZPI+YXSsAgRDBDMeQ8AXr2MPGJxdOY4bA46P5flJ/zgNblQdyrPO9DjEwhkNBgdjFwxJANsKHX2+FlBj8lS7wEi2JuOAbbDp3T+ZDK9/H0AP+e76K1wC/ewHOsIteNS7AOu8HMq4s7NZ6oJB8he9OtvRjRC4lLVFozqkdNLpjKPMhQf7YWn8LyEecHHZrtLi7onT6G1rh6vvT/GTlakwBPjj+vd34P/KZBgfDt2bG8zv1dOzfvRsf4oM+k7cLTqLdoWWX4MlbsryRXj0kheOFF6CqqwWPUZTKzyazYQ7efLSY1Jm1predCz91W9nYN2KeVgYGWQDngG/lXsA986VwmXqVLy88k24L0lG8f96sH39Xni97IkvP0kdXrLmyNd/dAF3b7Zj41oZYiUBpu1K5IZJdMZwEovR+nEBfti8Fa27DsFrzXKkJMfDY5IY2Z+U4VtNtekUaDkMGR+3C7zo8vjzuJMAYdGzeeDshGeTcSUBzzMD9/FBwLbNEC1dBOUPPcjapoaajqdo70Ti0t+MOCtORLS2TAftpSaEh/ohfUUwYqUBPAkTE2L52a7Q4FbOfjS/vw0ue45iQXoakvcloKSxC9l7yqCp0JkkK3rccXg44JSR0OAZfACDgKsq+QDufUPAvb154O7LUgh4N3ZsKuVvlaw3MO7OJvcfzU7BrupcnEjadVBp6iGj43FGmokINtgFJ5vtpRVoyd0PXeaf4ZqTD0n6CsRkJ+F8oxRZH6uh1dQNe0PFDQl8HgFPGwI4Sb2NMu7s7YWA7VvgvjgZiuZuZBNwdsHKn8eHuIEZdb9gubMsr4O6sgHhIX6kxGDMtxBBx2M2GREsLl3mX+CaewiSdb9DdHYiSv4r40vDqogBRHADgQdTjWeuHAz8flkVWrL3m6TuNRX+2zbBnUm9uQc7tihI6t8RcCY5Bpwb+8bJTIRJEQ2kCD8+zhjJYCJYnBYipKSIaFJECSliBymicoAiON7c6AvYXT9bME4eZKOUdgJ+ixbsyzgBX2IGzqRO7jtmGX8CRchoN8qguGPtErEPtRmsNA6aFZGEC9+HY8dulbU0OAY8w47U2Y8ibIG2YhNw/w/fg2hZKtQM+GbFAKlzcGwzYZ+IzLdDEBPmb0NE24VyPoHW0shIQ1Q2M0sZssgsOfZrz5DAvRjwjSZzs5txBwMfKRH9SoPdFrNpVUT6B3DNOsATEUMewRC8YAF+a+dB3Dv9DTiq8Rlb38OLyxnwXuRQjStVNc8P8OGIqCAitPWQkxKYWQ4sjbaSMpNZZnwA0f7jHPdA+8/Wlrz87nZ6Q+DijJfeT8eUlYuhuQ18tEXJX4nD8JwCH+Y6X6mug7Kige8jNvw+FHIqdfart0e0lJ9t59Vo3Xv09v8FGAAWg1LgHMvcbwAAAABJRU5ErkJggjMxMzY=',
+
+    US: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAiCAIAAABgN0jYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkFBOEQ0MUQxMEQyRDExRTY4NzY1OUZEN0M0RTRGNDEzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkFBOEQ0MUQyMEQyRDExRTY4NzY1OUZEN0M0RTRGNDEzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QUE4RDQxQ0YwRDJEMTFFNjg3NjU5RkQ3QzRFNEY0MTMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QUE4RDQxRDAwRDJEMTFFNjg3NjU5RkQ3QzRFNEY0MTMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6Xh7i9AAAGGElEQVR42uxX+U8UZxjemdmDZWG5BFZgYeUQVBCKsgiI1opyq4gpiUdprWcFjzYaOSRqj9AfNe0PVcGjaaymtdoIlKYiRWpRKbeLIFpAYMFlD/Y+Z/sAjX/CNJv0y2Tyzjffm8zzfe/zPO8Qq9MO07STxWIRBC4CMQKnk0WShNM5O487SZII5x5nY0y+ScEyh2M2xcyiVpnk+ZpBK0GxGBxUYGDiunXxWwvXtLXJLBabRCIqPby1r+/vGY2e7+52/ESRTmscHX3tdNJ79uZIJAu7u1/YbI4NGxI3b06bT4mIDCopKejsHfZWyKM0EzabnbbaGLvY2EK5XNXb85KkSC8vgd5g6ux4bjbbhF4Ch4Pu6HiuUMx4ePDtdke/bNRotPD5PKSMjU/juCiKEgp5Ou1cit4ojI4My4u3EySTJ0Ckrz6CXdTrTRkZie8WvX2q8vLUpCoiMriicsfXX935q33AU+h+9tMPHrX13/j+PkAeKtni7SWorr5utdoyM6UFW1efqqxVq3UorZ3FmZ8cK2QxOyhxiNTb2yNQ5KOY1gwPT+FTQkMDgWdsXDH2ShES4o9yn5hQvngx4ePj4eHhNilXIUamSOSnUGhGkKLRi0MDUHKxseGpqUsZBkCsXHFg06bU9PS4kycvarXGxMSoYx9vO3P62tDQeECAd3X13hs37jc2tnO57FNVu5TT2vPnfwIfduzIkCYvKS+/pNeZpNKYktItZVXXYm3q7QF2O4vZEkpNKRUK3d34XNR9ePjCwcFXXkKBWq2PjhYPD0+6uXG1WkNYWCCwmc1WsAJ8wDmMjyv57lyrxb4oXDQ4MOblLRhXGhKmhnImuqwEm0kAbIoiVSqdwWBKTY3dtTOjqupKf/8oKue94o01NfV/tPa5u/OOHdsm6x+5crkRcrl3Xy7wnD3zrcViXbs2HkdRdeoyMHAE7nxRgJ9EamNWRomUVYfCw4OiY8RN9zrxDJFZs2Z5a2uvwWCG8GdkrMCZjIxARp1J0mg4QfvjZ9B/qG1kVHDTvQ5okUDgtjo9rr7+UW5O8okTRQxzgLTbaT8/4fK4cOi3RqPncKiEhAjcEWNm6bIwX1/hzIxepzOGhYkWSUQ6vQlF5evrGRsrsVpnU7hcTnx8BJdDERwOAYll+IITY3dBgJgYcX5+Sm1tg1Kp9fHx3L07u6Hh8dOnwxwuu7h4IxSpsfEJEGdlSYNDFly7+iu+flmsJCc7GZU2M2OgSTIzyvf9eH+GSfwv4SAy4KhSpYVh8XgckBVbiyrHPMFiQSL1BjNsCxyAwmrUemDm8dhmk1Wl0mIxUiwEpe7qG6jrsjBLYkKa9FFyckxefsoXn383PT0TERF09GjhhYt18GYYc1nZ9j/bZD/feYiv37cvF4Q+d+4WQIIbmVlJSAGAxYvFpaVbzn1Tv3Cwt9AyamXWiWdbCfhUc3M3rBQWhmahqakT2y8WBxiN5paWntFXr0UiX/Chs2uIy2HD9dhsCt3R783dQDXvek1NXSr5dFJuRtr+bCezJGaDr2NjCplsBOLz4Z5stBI//vAgNCzg0892X7pYd/duG3Ydcb9spLamAQkHDuaHSURnTl+VyYbfWf9WcXFmZUXN7dutFEny/RfwxcFMO3Faaik2FReaNpHIB6cRFOSH9g73yUmVv783OI23UFXwgaZpVDzcTaczYVKpnAkM9JHLkbLg2fPx7JWLDuYn0CyC0RNAJxcXF56dI60or+npeRkVFVxSWvBl9XW0zTDd8orcurq2xl+eoMDQYjjsDnAADM7LS1mfkVhZUTs1pYZ8HSrZfLr65sRvLe03LzD8P0CsSNzPc+O68WZbBnwZ6tvT0x2Ng8PhgEmhy4A6ASSWCjz4LCcLno2Yx+POdxlvUhQ6S5J2tEA9wDSABw960G86aSfFJuf+v1i0g0bbTMwVAgoGEUHOPmAe60mKmP8jw0Ab8iaFRVG+tDnQZqAZ5sD8f6PrDrbx1bhrA2jOKnJtACb5a9cGsLTsiEsDcH0SO2natQG05O90bQDTD5+4NoCgnPX/k/i/HCTLxQe76/gZ1y6hWwFLXPsE2B4ClwbwjwADAFdQfjCv3EDcAAAAAElFTkSuQmCCMjQ3Mg==',
+};
diff --git a/vue-options-api-demos/listview/default-scrolling/main.js b/vue-options-api-demos/listview/default-scrolling/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/listview/default-scrolling/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/listview/default-scrolling/main.vue b/vue-options-api-demos/listview/default-scrolling/main.vue
new file mode 100644
index 00000000..f056f684
--- /dev/null
+++ b/vue-options-api-demos/listview/default-scrolling/main.vue
@@ -0,0 +1,112 @@
+<template>
+    <div>
+      <ListView
+        :data-items="employees"
+        :item="'ItemRender'"
+        :header="'HeaderRender'"
+        :style="{ width: '300px', height: '400px' }"
+      >
+        <template v-slot:HeaderRender="{ props }">
+          <h3 class="header-title">Contacts</h3>
+        </template>
+        <template v-slot:ItemRender="{ props }">
+          <div :style="{ padding: '10px' }">
+            <Card class="contact-card" :style="{ width: '260px' }">
+              <CardHeader class="k-hbox">
+                <Avatar
+                  :style="{ width: '40px', height: '40px' }"
+                  :type="'image'"
+                  :rounded="'full'"
+                  :size="'medium'"
+                >
+                  <img :src="photoURL(props.dataItem)" :eager="true" :alt="'Avatar Image'"/>
+                </Avatar>
+                <div>
+                  <CardTitle class="contact-name">
+                    {{ props.dataItem.full_name }}
+                  </CardTitle>
+                  <CardSubtitle class="contact-phone">
+                    {{ props.dataItem.phone }}
+                  </CardSubtitle>
+                </div>
+              </CardHeader>
+  
+              <CardActions>
+                <KButton style="width: 100%" :theme-color="'primary'"
+                  >Call</KButton
+                >
+              </CardActions>
+            </Card>
+          </div>
+        </template>
+      </ListView>
+    </div>
+  </template>
+  <script>
+  import { ListView } from '@progress/kendo-vue-listview';
+  import { Button } from '@progress/kendo-vue-buttons';
+  import {
+    Avatar,
+    Card,
+    CardHeader,
+    CardTitle,
+    CardImage,
+    CardSubtitle,
+    CardBody,
+    CardActions,
+  } from '@progress/kendo-vue-layout';
+  import { employees } from './employees';
+  import { images } from './images';
+  
+  export default {
+    components: {
+      Avatar,
+      ListView,
+      Card,
+      CardHeader,
+      CardTitle,
+      CardImage,
+      CardSubtitle,
+      CardBody,
+      CardActions,
+      KButton: Button,
+    },
+    data() {
+      return {
+        employees: employees,
+        images: images,
+      };
+    },
+    methods: {
+      photoURL(dataItem) {
+        const code = dataItem.img_id + dataItem.gender;
+        return images[code];
+      },
+    },
+  };
+  </script>
+  
+  <style>
+  .k-listview {
+    margin: auto;
+  }
+  
+  .k-listview {
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    color: #424242;
+    background-color: #ffffff;
+  }
+  .header-title {
+    text-align: center;
+    font-size: 36px;
+    margin: 0;
+  }
+  .contact-card .contact-name {
+    font-size: 19px;
+  }
+  .contact-card .contact-phone {
+    margin-top: 0;
+    font-size: 12px;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/listview/editing/ItemRender.vue b/vue-options-api-demos/listview/editing/ItemRender.vue
new file mode 100644
index 00000000..1172f4aa
--- /dev/null
+++ b/vue-options-api-demos/listview/editing/ItemRender.vue
@@ -0,0 +1,175 @@
+<template>
+    <div :key="dataItem.ProductID">
+      <Card :orientation="'horizontal'" :style="{ borderWidth: '0px 0px 1px' }">
+        <CardBody v-if="dataItem.edit">
+          <div class="k-hbox k-justify-content-between k-flex-wrap">
+            <div style="{ width: '40%', padding: '5px 0px' }">
+              <label :style="{ display: 'block' }">Name:</label>
+              <Input
+                :value="dataItem.ProductName"
+                @input="(e) => handleChange(e, 'ProductName')"
+              />
+              <label :style="{ display: 'block' }">Category:</label>
+              <DropDownList
+                :data-items="dropDownData"
+                :text-field="'CategoryName'"
+                :value="dataItem.Category"
+                @change="(e) => handleChange(e, 'Category')"
+              />
+            </div>
+            <div :style="{ width: '35%', padding: '5px 0px' }">
+              <label :style="{ display: 'block' }">Price:</label>
+              <NumericTextBox
+                :value="dataItem.UnitPrice"
+                :format="'c2'"
+                @change="(e) => handleChange(e, 'UnitPrice')"
+              />
+              <label :style="{ display: 'block' }">Available:</label>
+              <NumericTextBox
+                :value="dataItem.UnitsInStock"
+                @change="(e) => handleChange(e, 'UnitsInStock')"
+              />
+            </div>
+            <div :style="{ width: '25%', padding: '5px 0px' }">
+              <button
+                class="
+                  k-button
+                  k-button-md
+                  k-rounded-md
+                  k-button-solid
+                  k-button-solid-primary
+                "
+                :style="{ marginRight: '5px' }"
+                @click="handleSave(dataItem)"
+              >
+                Save
+              </button>
+              <button
+                class="
+                  k-button
+                  k-button-md
+                  k-rounded-md
+                  k-button-solid
+                  k-button-solid-base
+                "
+                @click="cancelEdit(dataItem)"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        </CardBody>
+        <CardBody v-else>
+          <div class="k-hbox k-justify-content-between k-flex-wrap">
+            <div :style="{ width: '40%', padding: '5px 0px' }">
+              <CardTitle :style="{ fontSize: '16px' }">
+                {{ dataItem.ProductName }}
+              </CardTitle>
+              <CardSubtitle>{{ dataItem.Category.CategoryName }}</CardSubtitle>
+            </div>
+            <div :style="{ width: '35%', padding: '5px 0px' }">
+              <div>
+                Price:{{ ' ' }}
+                {{ formattedPrice }}
+              </div>
+              <div>Available units: {{ dataItem.UnitsInStock }}</div>
+            </div>
+            <div :style="{ width: '25%', padding: '5px 0px' }">
+              <KButton
+                :rounded="'medium'"
+                :fill="'solid'"
+                :theme-color="'primary'"
+                :style="{ marginRight: '5px' }"
+                @click="enterEdit"
+              >
+                Edit
+              </KButton>
+              <KButton
+                :rounded="'medium'"
+                :fill="'solid'"
+                @click="handleDelete(dataItem)"
+              >
+                Delete
+              </KButton>
+            </div>
+          </div>
+        </CardBody>
+      </Card>
+    </div>
+  </template>
+  
+  <script>
+  import {
+    Card,
+    CardTitle,
+    CardSubtitle,
+    CardBody,
+  } from '@progress/kendo-vue-layout';
+  import { Input, NumericTextBox } from '@progress/kendo-vue-inputs';
+  import { Button } from '@progress/kendo-vue-buttons';
+  import { DropDownList } from '@progress/kendo-vue-dropdowns';
+  import { provideIntlService } from '@progress/kendo-vue-intl';
+  
+  export default {
+    components: {
+      Card,
+      CardTitle,
+      CardSubtitle,
+      CardBody,
+      Input,
+      NumericTextBox,
+      DropDownList,
+      KButton: Button,
+    },
+    props: {
+      dataItem: Object,
+    },
+    data() {
+      return {
+        originalDataItem: null,
+        dropDownData: [
+          { CategoryName: 'Beverages', CategoryID: 1 },
+          { CategoryName: 'Condiments', CategoryID: 2 },
+          { CategoryName: 'Confections', CategoryID: 3 },
+          { CategoryName: 'Dairy Products', CategoryID: 4 },
+          { CategoryName: 'Grains/Cereals', CategoryID: 5 },
+          { CategoryName: 'Meat/Poultry', CategoryID: 6 },
+          { CategoryName: 'Produce', CategoryID: 7 },
+          { CategoryName: 'Seafood', CategoryID: 8 },
+        ],
+      };
+    },
+    inject: {
+      kendoIntlService: { default: null },
+    },
+    computed: {
+      formattedPrice: function () {
+        return provideIntlService(this).formatNumber(
+          this.$props.dataItem.UnitPrice,
+          'c'
+        );
+      },
+    },
+    emits: ['saveitem', 'deleteitem', 'update'],
+    methods: {
+      enterEdit() {
+        this.originalDataItem = { ...this.$props.dataItem };
+        this.$props.dataItem.edit = true;
+      },
+      cancelEdit() {
+        Object.assign(this.$props.dataItem, this.originalDataItem);
+        this.$props.dataItem.edit = false;
+      },
+      handleChange(e, field) {
+        this.$props.dataItem[field] = e.value;
+      },
+      handleSave(ev) {
+        this.$emit('saveitem', ev);
+      },
+      handleDelete(ev) {
+        this.$emit('deleteitem', ev);
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/listview/editing/main.js b/vue-options-api-demos/listview/editing/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/listview/editing/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/listview/editing/main.vue b/vue-options-api-demos/listview/editing/main.vue
new file mode 100644
index 00000000..b6e57acb
--- /dev/null
+++ b/vue-options-api-demos/listview/editing/main.vue
@@ -0,0 +1,55 @@
+<template>
+  <ListView
+    :style="{ width: '100%', height: '500px' }"
+    :data-items="products"
+    :item="'myItem'"
+    :header="'myHeader'"
+  >
+    <template v-slot:myItem="{ props }">
+      <ItemRender
+        v-bind="props"
+        @saveitem="saveData"
+        @deleteitem="deleteData"
+      />
+    </template>
+
+    <template v-slot:myHeader="{ props }">
+      <ListViewHeader
+        :style="{ color: 'rgb(160, 160, 160)', fontSize: '14px' }"
+        class="pl-3 pb-2 pt-2"
+      >
+        Product list
+      </ListViewHeader>
+    </template>
+  </ListView>
+</template>
+<script>
+import { ListView, ListViewHeader } from '@progress/kendo-vue-listview';
+import ItemRender from './ItemRender.vue';
+import products from './products.json';
+
+export default {
+  components: {
+    ListView,
+    ListViewHeader,
+    ItemRender,
+  },
+  data() {
+    return {
+      products: products,
+    };
+  },
+  methods: {
+    saveData(dataItem) {
+      this.products = this.products.map((e) =>
+        e.ProductID === dataItem.ProductID ? { ...dataItem, edit: false } : e
+      );
+    },
+    deleteData(dataItem) {
+      this.products = this.products.filter(
+        (e) => e.ProductID !== dataItem.ProductID
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/listview/editing/products.json b/vue-options-api-demos/listview/editing/products.json
new file mode 100644
index 00000000..3da39edd
--- /dev/null
+++ b/vue-options-api-demos/listview/editing/products.json
@@ -0,0 +1,1234 @@
+
+[{
+    "ProductID" : 1,
+    "ProductName" : "Chai",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "10 boxes x 20 bags",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 2,
+    "ProductName" : "Chang",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 3,
+    "ProductName" : "Aniseed Syrup",
+    "SupplierID" : 1,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 550 ml bottles",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 13,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 4,
+    "ProductName" : "Chef Anton's Cajun Seasoning",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "48 - 6 oz jars",
+    "UnitPrice" : 22.0000,
+    "UnitsInStock" : 53,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 5,
+    "ProductName" : "Chef Anton's Gumbo Mix",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "36 boxes",
+    "UnitPrice" : 21.3500,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 6,
+    "ProductName" : "Grandma's Boysenberry Spread",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 8 oz jars",
+    "UnitPrice" : 25.0000,
+    "UnitsInStock" : 120,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 7,
+    "ProductName" : "Uncle Bob's Organic Dried Pears",
+    "SupplierID" : 3,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "12 - 1 lb pkgs.",
+    "UnitPrice" : 30.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 8,
+    "ProductName" : "Northwoods Cranberry Sauce",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 12 oz jars",
+    "UnitPrice" : 40.0000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 9,
+    "ProductName" : "Mishi Kobe Niku",
+    "SupplierID" : 4,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "18 - 500 g pkgs.",
+    "UnitPrice" : 97.0000,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 10,
+    "ProductName" : "Ikura",
+    "SupplierID" : 4,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 200 ml jars",
+    "UnitPrice" : 31.0000,
+    "UnitsInStock" : 31,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 11,
+    "ProductName" : "Queso Cabrales",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "1 kg pkg.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 30,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 12,
+    "ProductName" : "Queso Manchego La Pastora",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 86,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 13,
+    "ProductName" : "Konbu",
+    "SupplierID" : 6,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "2 kg box",
+    "UnitPrice" : 6.0000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 14,
+    "ProductName" : "Tofu",
+    "SupplierID" : 6,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "40 - 100 g pkgs.",
+    "UnitPrice" : 23.2500,
+    "UnitsInStock" : 35,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 15,
+    "ProductName" : "Genen Shouyu",
+    "SupplierID" : 6,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 250 ml bottles",
+    "UnitPrice" : 15.5000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 16,
+    "ProductName" : "Pavlova",
+    "SupplierID" : 7,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "32 - 500 g boxes",
+    "UnitPrice" : 17.4500,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 17,
+    "ProductName" : "Alice Mutton",
+    "SupplierID" : 7,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "20 - 1 kg tins",
+    "UnitPrice" : 39.0000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 18,
+    "ProductName" : "Carnarvon Tigers",
+    "SupplierID" : 7,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "16 kg pkg.",
+    "UnitPrice" : 62.5000,
+    "UnitsInStock" : 42,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 19,
+    "ProductName" : "Teatime Chocolate Biscuits",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 12 pieces",
+    "UnitPrice" : 9.2000,
+    "UnitsInStock" : 25,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 20,
+    "ProductName" : "Sir Rodney's Marmalade",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "30 gift boxes",
+    "UnitPrice" : 81.0000,
+    "UnitsInStock" : 40,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 21,
+    "ProductName" : "Sir Rodney's Scones",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 pkgs. x 4 pieces",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 3,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 22,
+    "ProductName" : "Gustaf's Knäckebröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 500 g pkgs.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 104,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 23,
+    "ProductName" : "Tunnbröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "12 - 250 g pkgs.",
+    "UnitPrice" : 9.0000,
+    "UnitsInStock" : 61,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 24,
+    "ProductName" : "Guaraná Fantástica",
+    "SupplierID" : 10,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 355 ml cans",
+    "UnitPrice" : 4.5000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 25,
+    "ProductName" : "NuNuCa Nuß-Nougat-Creme",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "20 - 450 g glasses",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 26,
+    "ProductName" : "Gumbär Gummibärchen",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 250 g bags",
+    "UnitPrice" : 31.2300,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 27,
+    "ProductName" : "Schoggi Schokolade",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 100 g pieces",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 49,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 28,
+    "ProductName" : "Rössle Sauerkraut",
+    "SupplierID" : 12,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "25 - 825 g cans",
+    "UnitPrice" : 45.6000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 29,
+    "ProductName" : "Thüringer Rostbratwurst",
+    "SupplierID" : 12,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "50 bags x 30 sausgs.",
+    "UnitPrice" : 123.7900,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 30,
+    "ProductName" : "Nord-Ost Matjeshering",
+    "SupplierID" : 13,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "10 - 200 g glasses",
+    "UnitPrice" : 25.8900,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 31,
+    "ProductName" : "Gorgonzola Telino",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "12 - 100 g pkgs",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 32,
+    "ProductName" : "Mascarpone Fabioli",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 32.0000,
+    "UnitsInStock" : 9,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 33,
+    "ProductName" : "Geitost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "500 g",
+    "UnitPrice" : 2.5000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 34,
+    "ProductName" : "Sasquatch Ale",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 111,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 35,
+    "ProductName" : "Steeleye Stout",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 36,
+    "ProductName" : "Inlagd Sill",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 250 g  jars",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 37,
+    "ProductName" : "Gravad lax",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 500 g pkgs.",
+    "UnitPrice" : 26.0000,
+    "UnitsInStock" : 11,
+    "UnitsOnOrder" : 50,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 38,
+    "ProductName" : "Côte de Blaye",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 75 cl bottles",
+    "UnitPrice" : 263.5000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 39,
+    "ProductName" : "Chartreuse verte",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "750 cc per bottle",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 69,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 40,
+    "ProductName" : "Boston Crab Meat",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 4 oz tins",
+    "UnitPrice" : 18.4000,
+    "UnitsInStock" : 123,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 41,
+    "ProductName" : "Jack's New England Clam Chowder",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 12 oz cans",
+    "UnitPrice" : 9.6500,
+    "UnitsInStock" : 85,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 42,
+    "ProductName" : "Singaporean Hokkien Fried Mee",
+    "SupplierID" : 20,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "32 - 1 kg pkgs.",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 43,
+    "ProductName" : "Ipoh Coffee",
+    "SupplierID" : 20,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "16 - 500 g tins",
+    "UnitPrice" : 46.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 44,
+    "ProductName" : "Gula Malacca",
+    "SupplierID" : 20,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "20 - 2 kg bags",
+    "UnitPrice" : 19.4500,
+    "UnitsInStock" : 27,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 45,
+    "ProductName" : "Rogede sild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "1k pkg.",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 5,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 46,
+    "ProductName" : "Spegesild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "4 - 450 g glasses",
+    "UnitPrice" : 12.0000,
+    "UnitsInStock" : 95,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 47,
+    "ProductName" : "Zaanse koeken",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 - 4 oz boxes",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 48,
+    "ProductName" : "Chocolade",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 pkgs.",
+    "UnitPrice" : 12.7500,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 49,
+    "ProductName" : "Maxilaku",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 - 50 g pkgs.",
+    "UnitPrice" : 20.0000,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 60,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 50,
+    "ProductName" : "Valkoinen suklaa",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "12 - 100 g bars",
+    "UnitPrice" : 16.2500,
+    "UnitsInStock" : 65,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 51,
+    "ProductName" : "Manjimup Dried Apples",
+    "SupplierID" : 24,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "50 - 300 g pkgs.",
+    "UnitPrice" : 53.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 52,
+    "ProductName" : "Filo Mix",
+    "SupplierID" : 24,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "16 - 2 kg boxes",
+    "UnitPrice" : 7.0000,
+    "UnitsInStock" : 38,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 53,
+    "ProductName" : "Perth Pasties",
+    "SupplierID" : 24,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "48 pieces",
+    "UnitPrice" : 32.8000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 54,
+    "ProductName" : "Tourtière",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "16 pies",
+    "UnitPrice" : 7.4500,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 55,
+    "ProductName" : "Pâté chinois",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "24 boxes x 2 pies",
+    "UnitPrice" : 24.0000,
+    "UnitsInStock" : 115,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 56,
+    "ProductName" : "Gnocchi di nonna Alice",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 57,
+    "ProductName" : "Ravioli Angelo",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 19.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 58,
+    "ProductName" : "Escargots de Bourgogne",
+    "SupplierID" : 27,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 pieces",
+    "UnitPrice" : 13.2500,
+    "UnitsInStock" : 62,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 59,
+    "ProductName" : "Raclette Courdavault",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 55.0000,
+    "UnitsInStock" : 79,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 60,
+    "ProductName" : "Camembert Pierrot",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "15 - 300 g rounds",
+    "UnitPrice" : 34.0000,
+    "UnitsInStock" : 19,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 61,
+    "ProductName" : "Sirop d'érable",
+    "SupplierID" : 29,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 500 ml bottles",
+    "UnitPrice" : 28.5000,
+    "UnitsInStock" : 113,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 62,
+    "ProductName" : "Tarte au sucre",
+    "SupplierID" : 29,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "48 pies",
+    "UnitPrice" : 49.3000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 63,
+    "ProductName" : "Vegie-spread",
+    "SupplierID" : 7,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "15 - 625 g jars",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 64,
+    "ProductName" : "Wimmers gute Semmelknödel",
+    "SupplierID" : 12,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "20 bags x 4 pieces",
+    "UnitPrice" : 33.2500,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 80,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 65,
+    "ProductName" : "Louisiana Fiery Hot Pepper Sauce",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "32 - 8 oz bottles",
+    "UnitPrice" : 21.0500,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 66,
+    "ProductName" : "Louisiana Hot Spiced Okra",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 8 oz jars",
+    "UnitPrice" : 17.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 100,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 67,
+    "ProductName" : "Laughing Lumberjack Lager",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 52,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 68,
+    "ProductName" : "Scottish Longbreads",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 8 pieces",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 69,
+    "ProductName" : "Gudbrandsdalsost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 kg pkg.",
+    "UnitPrice" : 36.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 70,
+    "ProductName" : "Outback Lager",
+    "SupplierID" : 7,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 355 ml bottles",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 71,
+    "ProductName" : "Flotemysost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 21.5000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 72,
+    "ProductName" : "Mozzarella di Giovanni",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 34.8000,
+    "UnitsInStock" : 14,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 73,
+    "ProductName" : "Röd Kaviar",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 150 g jars",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 101,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 74,
+    "ProductName" : "Longlife Tofu",
+    "SupplierID" : 4,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 20,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 75,
+    "ProductName" : "Rhönbräu Klosterbier",
+    "SupplierID" : 12,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 0.5 l bottles",
+    "UnitPrice" : 7.7500,
+    "UnitsInStock" : 125,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 76,
+    "ProductName" : "Lakkalikööri",
+    "SupplierID" : 23,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "500 ml",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 57,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 77,
+    "ProductName" : "Original Frankfurter grüne Soße",
+    "SupplierID" : 12,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 boxes",
+    "UnitPrice" : 13.0000,
+    "UnitsInStock" : 32,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}]
diff --git a/vue-options-api-demos/listview/endless-scrolling/destinations.json b/vue-options-api-demos/listview/endless-scrolling/destinations.json
new file mode 100644
index 00000000..542eb216
--- /dev/null
+++ b/vue-options-api-demos/listview/endless-scrolling/destinations.json
@@ -0,0 +1,117 @@
+[
+    {
+        "Destination": "BRUSSELS, BELGIUM",
+        "Text": "Chocolate, beer, music and surrealism.",
+        "Image": "brussels-180x150.png"
+    },
+    {
+        "Destination": "PORTO, PORTUGAL",
+        "Text": "Taste it, drink it, eat it, love it. Bem-vindo ao Porto!",
+        "Image": "porto-180x150.png"
+    },
+    {
+        "Destination": "MALAGA, SPAIN",
+        "Text": "Enjoy the perfect climat.",
+        "Image": "malaga-180x150.png"
+    },
+    {
+        "Destination": "BUDAPEST, HUNGARY",
+        "Text": "One of the most exciting cities in the world.",
+        "Image": "budapest-180x150.png"
+    },
+    {
+        "Destination": "BRATISLAVA, SLOVAKIA",
+        "Text": "A modern city on the Danube.",
+        "Image": "bratislava-180x150.png"
+    },
+    {
+        "Destination": "FLORENCE, ITALY",
+        "Text": "Love and culture are everywhere!",
+        "Image": "florence-180x150.png"
+    },
+    {
+        "Destination": "POZNAN, POLAND",
+        "Text": "A unique heritage with rich cultural offer.",
+        "Image": "poznan-180x150.png"
+    },
+    {
+        "Destination": "ATHENS, GREECE",
+        "Text": "The biggest open-air museum in Europe.",
+        "Image": "athens-180x150.png"
+    },
+    {
+        "Destination": "SOFIA, BULGARIA",
+        "Text": "One of Europe's oldest cities.",
+        "Image": "sofia-180x150.png"
+    },
+    {
+        "Destination": "BORDEAUX, FRANCE",
+        "Text": "Discover exciting new facets of its character.",
+        "Image": "bordeaux-180x150.png"
+    },
+    {
+        "Destination": "GENEVA, SWITZERLAND",
+        "Text": "One of the most welcoming cities in Europe.",
+        "Image": "geneva-180x150.png"
+    },
+    {
+        "Destination": "RIGA, LATVIA",
+        "Text": "At the crossroads of various nations and cultures.",
+        "Image": "riga-180x150.png"
+    },
+    {
+        "Destination": "SEVILLE, SPAIN",
+        "Text": "Seville. Any time of year…",
+        "Image": "seville-180x150.png"
+    },
+    {
+        "Destination": "COLMAR, FRANCE",
+        "Text": "A condensed version of the Alsace region.",
+        "Image": "colmar-180x150.png"
+    },
+    {
+        "Destination": "VIENNA, AUSTRIA",
+        "Text": "The Giant Ferris Wheel is awaiting you.",
+        "Image": "vienna-180x150.png"
+    },
+    {
+        "Destination": "MONTPELLIER, FRANCE",
+        "Text": "Smart, Mediterranean, attractive, welcoming and festive.",
+        "Image": "montpellier-180x150.png"
+    },
+    {
+        "Destination": "VALENCIA, SPAIN",
+        "Text": "Sun, culture, history and future. ",
+        "Image": "valencia-180x150.png"
+    },
+    {
+        "Destination": "BARCELONA, SPAIN",
+        "Text": "Barcelona never sleeps.",
+        "Image": "barcelona-180x150.png"
+    },
+    {
+        "Destination": "MILAN, ITALY",
+        "Text": "The hub of Italian culture",
+        "Image": "milan-180x150.png"
+    },
+    {
+        "Destination": "GDANSK, POLAND",
+        "Text": "You'll be amazed by the beauty of Gdansk.",
+        "Image": "gdansk-180x150.png"
+    },
+    {
+        "Destination": "ROME, ITALY",
+        "Text": "Treat yourself to a stay in the Eternal City.",
+        "Image": "rome-180x150.png"
+    },
+    {
+        "Destination": "EDINBURGH, SCOTLAND",
+        "Text": "Shopping, dining & architectural splendour.",
+        "Image": "edinburgh-180x150.png"
+    },
+    {
+        "Destination": "LISBON, PORTUGAL",
+        "Text": "The pure pleasure of being in one of the best cities in the world.",
+        "Image": "lisbon-180x150.png"
+    }
+]
diff --git a/vue-options-api-demos/listview/endless-scrolling/main.js b/vue-options-api-demos/listview/endless-scrolling/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/listview/endless-scrolling/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/listview/endless-scrolling/main.vue b/vue-options-api-demos/listview/endless-scrolling/main.vue
new file mode 100644
index 00000000..542b027f
--- /dev/null
+++ b/vue-options-api-demos/listview/endless-scrolling/main.vue
@@ -0,0 +1,102 @@
+<template>
+  <ListView
+    :style="{ width: '100%', height: '530px' }"
+    :data-items="data"
+    :item="'myItem'"
+    :header="'myHeader'"
+    @scroll="scrollHandler"
+  >
+    <template v-slot:myItem="{ props }">
+      <Card
+        :style="{
+          width: '180px',
+          boxShadow: 'none',
+          flex: '0 0 25.33%',
+          margin: '25px',
+          border: 'none',
+        }"
+      >
+        <CardImage :src="`${destinationsBaseUrl}${props.dataItem.Image}`" :style="{ height: '150px', width: '180px' }" />
+        <div :style="{ padding: 0 }">
+          <CardTitle :style="{ fontSize: '14px' }">
+            {{ props.dataItem.Destination }}
+          </CardTitle>
+          <CardSubtitle :style="{ fontSize: '12px', marginTop: 0 }">
+            {{ props.dataItem.Text }}
+          </CardSubtitle>
+        </div>
+      </Card>
+    </template>
+    <template v-slot:myHeader>
+      <ListViewHeader
+        :style="{ color: 'rgb(160, 160, 160)', fontSize: '14px' }"
+        class="pl-4 pb-2 pt-2"
+      >
+        Top European destinations
+      </ListViewHeader>
+    </template>
+  </ListView>
+</template>
+<script>
+import { ListView, ListViewHeader } from '@progress/kendo-vue-listview';
+import {
+  Card,
+  CardTitle,
+  CardImage,
+  CardSubtitle,
+} from '@progress/kendo-vue-layout';
+import destinations from './destinations.json';
+
+const destinationsBaseUrl = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/listview/destinations/';
+
+
+export default {
+  components: {
+    ListView,
+    ListViewHeader,
+    Card,
+    CardTitle,
+    CardImage,
+    CardSubtitle,
+  },
+  data() {
+    return {
+      destinationsBaseUrl,
+      destinations: destinations,
+      availableData: [],
+      data: [],
+    };
+  },
+  created() {
+    this.availableData = this.createLargeData();
+    this.data = this.availableData.splice(0, 12);
+  },
+  methods: {
+    scrollHandler(e) {
+      if (
+        e.target.scrollTop + 10 >=
+        e.target.scrollHeight - e.target.clientHeight
+      ) {
+        const moreData = this.availableData.splice(0, 6);
+
+        if (moreData.length > 0) {
+          this.data.push(...moreData);
+        }
+      }
+    },
+    createLargeData() {
+      let data = this.destinations.slice();
+      for (let i = 0; i < 4; i++) {
+        data = data.concat(this.destinations);
+      }
+      return data;
+    },
+  },
+};
+</script>
+<style>
+.k-listview-content {
+  display: flex;
+  flex-wrap: wrap;
+}
+</style>
diff --git a/vue-options-api-demos/listview/events/Logger.vue b/vue-options-api-demos/listview/events/Logger.vue
new file mode 100644
index 00000000..7d9e1695
--- /dev/null
+++ b/vue-options-api-demos/listview/events/Logger.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="example-config">
+    <h5>{{ title }}</h5>
+    <ul class="event-log">
+      <li v-for="(event, idx) in events" :key="idx">
+        {{ events.length - idx }}. {{ event }}
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    events: Array,
+    title: String,
+  },
+};
+</script>
+
+<style scoped>
+.example-config {
+  margin: 0 0 20px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+  margin: 0;
+  padding: 0;
+  max-height: 100px;
+  overflow-y: auto;
+  list-style-type: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: white;
+}
+.event-log li {
+  margin: 0;
+  padding: 0.3em;
+  line-height: 1.2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+  margin-bottom: -1px;
+}
+</style>
diff --git a/vue-options-api-demos/listview/events/main.js b/vue-options-api-demos/listview/events/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/listview/events/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/listview/events/main.vue b/vue-options-api-demos/listview/events/main.vue
new file mode 100644
index 00000000..0b3038a3
--- /dev/null
+++ b/vue-options-api-demos/listview/events/main.vue
@@ -0,0 +1,49 @@
+<template>
+  <ListView
+    :style="{ width: '100%', height: '300px' }"
+    :data-items="products"
+    :item="'myItem'"
+    @scroll="onScroll"
+  >
+    <template v-slot:myItem="{ props }">
+      <div
+        class="k-listview-item"
+        :style="{ padding: '10px', borderBottom: '1px solid lightgrey' }"
+      >
+        {{ props.dataItem.ProductName }}
+      </div>
+    </template>
+  </ListView>
+  <br />
+  <br />
+  <Logger :title="'Events list'" :events="eventsList" />
+</template>
+<script>
+import { ListView } from '@progress/kendo-vue-listview';
+import Logger from './Logger.vue';
+
+import products from './products.json';
+
+export default {
+  components: {
+    ListView,
+    Logger,
+  },
+  data() {
+    return {
+      products: products,
+      events: [],
+    };
+  },
+  methods: {
+    onScroll(e) {
+      this.events.unshift('The Scroll event was triggered');
+    },
+  },
+  computed: {
+    eventsList() {
+      return this.events;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/listview/events/products.json b/vue-options-api-demos/listview/events/products.json
new file mode 100644
index 00000000..3da39edd
--- /dev/null
+++ b/vue-options-api-demos/listview/events/products.json
@@ -0,0 +1,1234 @@
+
+[{
+    "ProductID" : 1,
+    "ProductName" : "Chai",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "10 boxes x 20 bags",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 2,
+    "ProductName" : "Chang",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 3,
+    "ProductName" : "Aniseed Syrup",
+    "SupplierID" : 1,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 550 ml bottles",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 13,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 4,
+    "ProductName" : "Chef Anton's Cajun Seasoning",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "48 - 6 oz jars",
+    "UnitPrice" : 22.0000,
+    "UnitsInStock" : 53,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 5,
+    "ProductName" : "Chef Anton's Gumbo Mix",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "36 boxes",
+    "UnitPrice" : 21.3500,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 6,
+    "ProductName" : "Grandma's Boysenberry Spread",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 8 oz jars",
+    "UnitPrice" : 25.0000,
+    "UnitsInStock" : 120,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 7,
+    "ProductName" : "Uncle Bob's Organic Dried Pears",
+    "SupplierID" : 3,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "12 - 1 lb pkgs.",
+    "UnitPrice" : 30.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 8,
+    "ProductName" : "Northwoods Cranberry Sauce",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 12 oz jars",
+    "UnitPrice" : 40.0000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 9,
+    "ProductName" : "Mishi Kobe Niku",
+    "SupplierID" : 4,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "18 - 500 g pkgs.",
+    "UnitPrice" : 97.0000,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 10,
+    "ProductName" : "Ikura",
+    "SupplierID" : 4,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 200 ml jars",
+    "UnitPrice" : 31.0000,
+    "UnitsInStock" : 31,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 11,
+    "ProductName" : "Queso Cabrales",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "1 kg pkg.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 30,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 12,
+    "ProductName" : "Queso Manchego La Pastora",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 86,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 13,
+    "ProductName" : "Konbu",
+    "SupplierID" : 6,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "2 kg box",
+    "UnitPrice" : 6.0000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 14,
+    "ProductName" : "Tofu",
+    "SupplierID" : 6,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "40 - 100 g pkgs.",
+    "UnitPrice" : 23.2500,
+    "UnitsInStock" : 35,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 15,
+    "ProductName" : "Genen Shouyu",
+    "SupplierID" : 6,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 250 ml bottles",
+    "UnitPrice" : 15.5000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 16,
+    "ProductName" : "Pavlova",
+    "SupplierID" : 7,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "32 - 500 g boxes",
+    "UnitPrice" : 17.4500,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 17,
+    "ProductName" : "Alice Mutton",
+    "SupplierID" : 7,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "20 - 1 kg tins",
+    "UnitPrice" : 39.0000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 18,
+    "ProductName" : "Carnarvon Tigers",
+    "SupplierID" : 7,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "16 kg pkg.",
+    "UnitPrice" : 62.5000,
+    "UnitsInStock" : 42,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 19,
+    "ProductName" : "Teatime Chocolate Biscuits",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 12 pieces",
+    "UnitPrice" : 9.2000,
+    "UnitsInStock" : 25,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 20,
+    "ProductName" : "Sir Rodney's Marmalade",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "30 gift boxes",
+    "UnitPrice" : 81.0000,
+    "UnitsInStock" : 40,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 21,
+    "ProductName" : "Sir Rodney's Scones",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 pkgs. x 4 pieces",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 3,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 22,
+    "ProductName" : "Gustaf's Knäckebröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 500 g pkgs.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 104,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 23,
+    "ProductName" : "Tunnbröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "12 - 250 g pkgs.",
+    "UnitPrice" : 9.0000,
+    "UnitsInStock" : 61,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 24,
+    "ProductName" : "Guaraná Fantástica",
+    "SupplierID" : 10,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 355 ml cans",
+    "UnitPrice" : 4.5000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 25,
+    "ProductName" : "NuNuCa Nuß-Nougat-Creme",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "20 - 450 g glasses",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 26,
+    "ProductName" : "Gumbär Gummibärchen",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 250 g bags",
+    "UnitPrice" : 31.2300,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 27,
+    "ProductName" : "Schoggi Schokolade",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 100 g pieces",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 49,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 28,
+    "ProductName" : "Rössle Sauerkraut",
+    "SupplierID" : 12,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "25 - 825 g cans",
+    "UnitPrice" : 45.6000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 29,
+    "ProductName" : "Thüringer Rostbratwurst",
+    "SupplierID" : 12,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "50 bags x 30 sausgs.",
+    "UnitPrice" : 123.7900,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 30,
+    "ProductName" : "Nord-Ost Matjeshering",
+    "SupplierID" : 13,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "10 - 200 g glasses",
+    "UnitPrice" : 25.8900,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 31,
+    "ProductName" : "Gorgonzola Telino",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "12 - 100 g pkgs",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 32,
+    "ProductName" : "Mascarpone Fabioli",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 32.0000,
+    "UnitsInStock" : 9,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 33,
+    "ProductName" : "Geitost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "500 g",
+    "UnitPrice" : 2.5000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 34,
+    "ProductName" : "Sasquatch Ale",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 111,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 35,
+    "ProductName" : "Steeleye Stout",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 36,
+    "ProductName" : "Inlagd Sill",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 250 g  jars",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 37,
+    "ProductName" : "Gravad lax",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 500 g pkgs.",
+    "UnitPrice" : 26.0000,
+    "UnitsInStock" : 11,
+    "UnitsOnOrder" : 50,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 38,
+    "ProductName" : "Côte de Blaye",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 75 cl bottles",
+    "UnitPrice" : 263.5000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 39,
+    "ProductName" : "Chartreuse verte",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "750 cc per bottle",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 69,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 40,
+    "ProductName" : "Boston Crab Meat",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 4 oz tins",
+    "UnitPrice" : 18.4000,
+    "UnitsInStock" : 123,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 41,
+    "ProductName" : "Jack's New England Clam Chowder",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 12 oz cans",
+    "UnitPrice" : 9.6500,
+    "UnitsInStock" : 85,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 42,
+    "ProductName" : "Singaporean Hokkien Fried Mee",
+    "SupplierID" : 20,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "32 - 1 kg pkgs.",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 43,
+    "ProductName" : "Ipoh Coffee",
+    "SupplierID" : 20,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "16 - 500 g tins",
+    "UnitPrice" : 46.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 44,
+    "ProductName" : "Gula Malacca",
+    "SupplierID" : 20,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "20 - 2 kg bags",
+    "UnitPrice" : 19.4500,
+    "UnitsInStock" : 27,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 45,
+    "ProductName" : "Rogede sild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "1k pkg.",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 5,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 46,
+    "ProductName" : "Spegesild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "4 - 450 g glasses",
+    "UnitPrice" : 12.0000,
+    "UnitsInStock" : 95,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 47,
+    "ProductName" : "Zaanse koeken",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 - 4 oz boxes",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 48,
+    "ProductName" : "Chocolade",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 pkgs.",
+    "UnitPrice" : 12.7500,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 49,
+    "ProductName" : "Maxilaku",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 - 50 g pkgs.",
+    "UnitPrice" : 20.0000,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 60,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 50,
+    "ProductName" : "Valkoinen suklaa",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "12 - 100 g bars",
+    "UnitPrice" : 16.2500,
+    "UnitsInStock" : 65,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 51,
+    "ProductName" : "Manjimup Dried Apples",
+    "SupplierID" : 24,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "50 - 300 g pkgs.",
+    "UnitPrice" : 53.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 52,
+    "ProductName" : "Filo Mix",
+    "SupplierID" : 24,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "16 - 2 kg boxes",
+    "UnitPrice" : 7.0000,
+    "UnitsInStock" : 38,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 53,
+    "ProductName" : "Perth Pasties",
+    "SupplierID" : 24,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "48 pieces",
+    "UnitPrice" : 32.8000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 54,
+    "ProductName" : "Tourtière",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "16 pies",
+    "UnitPrice" : 7.4500,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 55,
+    "ProductName" : "Pâté chinois",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "24 boxes x 2 pies",
+    "UnitPrice" : 24.0000,
+    "UnitsInStock" : 115,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 56,
+    "ProductName" : "Gnocchi di nonna Alice",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 57,
+    "ProductName" : "Ravioli Angelo",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 19.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 58,
+    "ProductName" : "Escargots de Bourgogne",
+    "SupplierID" : 27,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 pieces",
+    "UnitPrice" : 13.2500,
+    "UnitsInStock" : 62,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 59,
+    "ProductName" : "Raclette Courdavault",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 55.0000,
+    "UnitsInStock" : 79,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 60,
+    "ProductName" : "Camembert Pierrot",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "15 - 300 g rounds",
+    "UnitPrice" : 34.0000,
+    "UnitsInStock" : 19,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 61,
+    "ProductName" : "Sirop d'érable",
+    "SupplierID" : 29,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 500 ml bottles",
+    "UnitPrice" : 28.5000,
+    "UnitsInStock" : 113,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 62,
+    "ProductName" : "Tarte au sucre",
+    "SupplierID" : 29,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "48 pies",
+    "UnitPrice" : 49.3000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 63,
+    "ProductName" : "Vegie-spread",
+    "SupplierID" : 7,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "15 - 625 g jars",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 64,
+    "ProductName" : "Wimmers gute Semmelknödel",
+    "SupplierID" : 12,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "20 bags x 4 pieces",
+    "UnitPrice" : 33.2500,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 80,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 65,
+    "ProductName" : "Louisiana Fiery Hot Pepper Sauce",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "32 - 8 oz bottles",
+    "UnitPrice" : 21.0500,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 66,
+    "ProductName" : "Louisiana Hot Spiced Okra",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 8 oz jars",
+    "UnitPrice" : 17.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 100,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 67,
+    "ProductName" : "Laughing Lumberjack Lager",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 52,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 68,
+    "ProductName" : "Scottish Longbreads",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 8 pieces",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 69,
+    "ProductName" : "Gudbrandsdalsost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 kg pkg.",
+    "UnitPrice" : 36.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 70,
+    "ProductName" : "Outback Lager",
+    "SupplierID" : 7,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 355 ml bottles",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 71,
+    "ProductName" : "Flotemysost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 21.5000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 72,
+    "ProductName" : "Mozzarella di Giovanni",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 34.8000,
+    "UnitsInStock" : 14,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 73,
+    "ProductName" : "Röd Kaviar",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 150 g jars",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 101,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 74,
+    "ProductName" : "Longlife Tofu",
+    "SupplierID" : 4,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 20,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 75,
+    "ProductName" : "Rhönbräu Klosterbier",
+    "SupplierID" : 12,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 0.5 l bottles",
+    "UnitPrice" : 7.7500,
+    "UnitsInStock" : 125,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 76,
+    "ProductName" : "Lakkalikööri",
+    "SupplierID" : 23,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "500 ml",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 57,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 77,
+    "ProductName" : "Original Frankfurter grüne Soße",
+    "SupplierID" : 12,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 boxes",
+    "UnitPrice" : 13.0000,
+    "UnitsInStock" : 32,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}]
diff --git a/vue-options-api-demos/listview/filtering/main.js b/vue-options-api-demos/listview/filtering/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/listview/filtering/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/listview/filtering/main.vue b/vue-options-api-demos/listview/filtering/main.vue
new file mode 100644
index 00000000..4a1e8b6e
--- /dev/null
+++ b/vue-options-api-demos/listview/filtering/main.vue
@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <Filter :value="filter" @change="onFilterChange" :fields="filterFields" />
+    <ListView
+      :data-items="dataItems"
+      :item="'ItemRender'"
+      :style="{ width: '100%' }"
+    >
+      <template v-slot:ItemRender="{ props }">
+        <Card
+          :style="{ height: '110px', margin: '20px', border: 'none' }"
+          :orientation="'horizontal'"
+        >
+          <CardImage
+            :src="`${baseUrl}${props.dataItem.ProductID}.jpg`"
+            :style="{ height: '110px' }"
+          />
+          <div :style="{ width: '40%' }">
+            <CardTitle :style="{ fontSize: '16px' }">
+              {{ props.dataItem.ProductName }}
+            </CardTitle>
+            <CardSubtitle :style="{ fontSize: '14px' }">
+              {{ props.dataItem.Category.CategoryName }}
+            </CardSubtitle>
+          </div>
+          <CardBody>
+            <div>
+              Price:{{ ' ' }}
+              {{ getFormattedPrice(props.dataItem.UnitPrice) }}
+            </div>
+            <div>Available units: {{ props.dataItem.UnitsInStock }}</div>
+          </CardBody>
+        </Card>
+      </template>
+    </ListView>
+  </div>
+</template>
+<script>
+import { ListView } from '@progress/kendo-vue-listview';
+import {
+  Card,
+  CardTitle,
+  CardImage,
+  CardSubtitle,
+  CardBody,
+} from '@progress/kendo-vue-layout';
+import {
+  Filter,
+  Operators,
+  TextFilter,
+  NumericFilter,
+  BooleanFilter,
+} from '@progress/kendo-vue-data-tools';
+import { filterBy } from '@progress/kendo-data-query';
+import { provideIntlService } from '@progress/kendo-vue-intl';
+import products from './products.json';
+
+const baseUrl = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/listview/products/';
+
+export default {
+  components: {
+    ListView,
+    Card,
+    CardTitle,
+    CardImage,
+    CardSubtitle,
+    CardBody,
+    Filter,
+  },
+  computed: {
+    dataItems() {
+      return filterBy(this.products, this.filter);
+    },
+  },
+  inject: {
+    kendoIntlService: { default: null },
+  },
+  data() {
+    return {
+      baseUrl,
+      products: products,
+      filterFields: [
+        {
+          name: 'ProductName',
+          label: 'Name',
+          filter: TextFilter,
+          operators: Operators.text,
+        },
+        {
+          name: 'UnitPrice',
+          label: 'Price',
+          filter: NumericFilter,
+          operators: Operators.numeric,
+        },
+        {
+          name: 'Discontinued',
+          label: 'Discontinued',
+          filter: BooleanFilter,
+          operators: Operators.boolean,
+        },
+      ],
+      filter: {
+        logic: 'and',
+        filters: [
+          { field: 'UnitPrice', operator: 'gt', value: 20 },
+          { field: 'UnitPrice', operator: 'lt', value: 50 },
+          { field: 'Discontinued', operator: 'eq', value: false },
+          {
+            logic: 'or',
+            filters: [
+              { field: 'ProductName', operator: 'contains', value: 'organic' },
+              {
+                field: 'ProductName',
+                operator: 'contains',
+                value: 'cranberry',
+              },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    onFilterChange(ev) {
+      this.filter = ev.filter;
+    },
+    getFormattedPrice(price) {
+      return provideIntlService(this).formatNumber(price, 'c');
+    },
+  },
+};
+</script>
+
+<style>
+.k-card-image {
+  margin-right: 6px;
+}
+</style>
diff --git a/vue-options-api-demos/listview/filtering/products.json b/vue-options-api-demos/listview/filtering/products.json
new file mode 100644
index 00000000..3da39edd
--- /dev/null
+++ b/vue-options-api-demos/listview/filtering/products.json
@@ -0,0 +1,1234 @@
+
+[{
+    "ProductID" : 1,
+    "ProductName" : "Chai",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "10 boxes x 20 bags",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 2,
+    "ProductName" : "Chang",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 3,
+    "ProductName" : "Aniseed Syrup",
+    "SupplierID" : 1,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 550 ml bottles",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 13,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 4,
+    "ProductName" : "Chef Anton's Cajun Seasoning",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "48 - 6 oz jars",
+    "UnitPrice" : 22.0000,
+    "UnitsInStock" : 53,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 5,
+    "ProductName" : "Chef Anton's Gumbo Mix",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "36 boxes",
+    "UnitPrice" : 21.3500,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 6,
+    "ProductName" : "Grandma's Boysenberry Spread",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 8 oz jars",
+    "UnitPrice" : 25.0000,
+    "UnitsInStock" : 120,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 7,
+    "ProductName" : "Uncle Bob's Organic Dried Pears",
+    "SupplierID" : 3,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "12 - 1 lb pkgs.",
+    "UnitPrice" : 30.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 8,
+    "ProductName" : "Northwoods Cranberry Sauce",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 12 oz jars",
+    "UnitPrice" : 40.0000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 9,
+    "ProductName" : "Mishi Kobe Niku",
+    "SupplierID" : 4,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "18 - 500 g pkgs.",
+    "UnitPrice" : 97.0000,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 10,
+    "ProductName" : "Ikura",
+    "SupplierID" : 4,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 200 ml jars",
+    "UnitPrice" : 31.0000,
+    "UnitsInStock" : 31,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 11,
+    "ProductName" : "Queso Cabrales",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "1 kg pkg.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 30,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 12,
+    "ProductName" : "Queso Manchego La Pastora",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 86,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 13,
+    "ProductName" : "Konbu",
+    "SupplierID" : 6,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "2 kg box",
+    "UnitPrice" : 6.0000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 14,
+    "ProductName" : "Tofu",
+    "SupplierID" : 6,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "40 - 100 g pkgs.",
+    "UnitPrice" : 23.2500,
+    "UnitsInStock" : 35,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 15,
+    "ProductName" : "Genen Shouyu",
+    "SupplierID" : 6,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 250 ml bottles",
+    "UnitPrice" : 15.5000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 16,
+    "ProductName" : "Pavlova",
+    "SupplierID" : 7,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "32 - 500 g boxes",
+    "UnitPrice" : 17.4500,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 17,
+    "ProductName" : "Alice Mutton",
+    "SupplierID" : 7,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "20 - 1 kg tins",
+    "UnitPrice" : 39.0000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 18,
+    "ProductName" : "Carnarvon Tigers",
+    "SupplierID" : 7,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "16 kg pkg.",
+    "UnitPrice" : 62.5000,
+    "UnitsInStock" : 42,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 19,
+    "ProductName" : "Teatime Chocolate Biscuits",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 12 pieces",
+    "UnitPrice" : 9.2000,
+    "UnitsInStock" : 25,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 20,
+    "ProductName" : "Sir Rodney's Marmalade",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "30 gift boxes",
+    "UnitPrice" : 81.0000,
+    "UnitsInStock" : 40,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 21,
+    "ProductName" : "Sir Rodney's Scones",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 pkgs. x 4 pieces",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 3,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 22,
+    "ProductName" : "Gustaf's Knäckebröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 500 g pkgs.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 104,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 23,
+    "ProductName" : "Tunnbröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "12 - 250 g pkgs.",
+    "UnitPrice" : 9.0000,
+    "UnitsInStock" : 61,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 24,
+    "ProductName" : "Guaraná Fantástica",
+    "SupplierID" : 10,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 355 ml cans",
+    "UnitPrice" : 4.5000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 25,
+    "ProductName" : "NuNuCa Nuß-Nougat-Creme",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "20 - 450 g glasses",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 26,
+    "ProductName" : "Gumbär Gummibärchen",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 250 g bags",
+    "UnitPrice" : 31.2300,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 27,
+    "ProductName" : "Schoggi Schokolade",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 100 g pieces",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 49,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 28,
+    "ProductName" : "Rössle Sauerkraut",
+    "SupplierID" : 12,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "25 - 825 g cans",
+    "UnitPrice" : 45.6000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 29,
+    "ProductName" : "Thüringer Rostbratwurst",
+    "SupplierID" : 12,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "50 bags x 30 sausgs.",
+    "UnitPrice" : 123.7900,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 30,
+    "ProductName" : "Nord-Ost Matjeshering",
+    "SupplierID" : 13,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "10 - 200 g glasses",
+    "UnitPrice" : 25.8900,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 31,
+    "ProductName" : "Gorgonzola Telino",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "12 - 100 g pkgs",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 32,
+    "ProductName" : "Mascarpone Fabioli",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 32.0000,
+    "UnitsInStock" : 9,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 33,
+    "ProductName" : "Geitost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "500 g",
+    "UnitPrice" : 2.5000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 34,
+    "ProductName" : "Sasquatch Ale",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 111,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 35,
+    "ProductName" : "Steeleye Stout",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 36,
+    "ProductName" : "Inlagd Sill",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 250 g  jars",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 37,
+    "ProductName" : "Gravad lax",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 500 g pkgs.",
+    "UnitPrice" : 26.0000,
+    "UnitsInStock" : 11,
+    "UnitsOnOrder" : 50,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 38,
+    "ProductName" : "Côte de Blaye",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 75 cl bottles",
+    "UnitPrice" : 263.5000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 39,
+    "ProductName" : "Chartreuse verte",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "750 cc per bottle",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 69,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 40,
+    "ProductName" : "Boston Crab Meat",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 4 oz tins",
+    "UnitPrice" : 18.4000,
+    "UnitsInStock" : 123,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 41,
+    "ProductName" : "Jack's New England Clam Chowder",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 12 oz cans",
+    "UnitPrice" : 9.6500,
+    "UnitsInStock" : 85,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 42,
+    "ProductName" : "Singaporean Hokkien Fried Mee",
+    "SupplierID" : 20,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "32 - 1 kg pkgs.",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 43,
+    "ProductName" : "Ipoh Coffee",
+    "SupplierID" : 20,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "16 - 500 g tins",
+    "UnitPrice" : 46.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 44,
+    "ProductName" : "Gula Malacca",
+    "SupplierID" : 20,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "20 - 2 kg bags",
+    "UnitPrice" : 19.4500,
+    "UnitsInStock" : 27,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 45,
+    "ProductName" : "Rogede sild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "1k pkg.",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 5,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 46,
+    "ProductName" : "Spegesild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "4 - 450 g glasses",
+    "UnitPrice" : 12.0000,
+    "UnitsInStock" : 95,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 47,
+    "ProductName" : "Zaanse koeken",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 - 4 oz boxes",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 48,
+    "ProductName" : "Chocolade",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 pkgs.",
+    "UnitPrice" : 12.7500,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 49,
+    "ProductName" : "Maxilaku",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 - 50 g pkgs.",
+    "UnitPrice" : 20.0000,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 60,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 50,
+    "ProductName" : "Valkoinen suklaa",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "12 - 100 g bars",
+    "UnitPrice" : 16.2500,
+    "UnitsInStock" : 65,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 51,
+    "ProductName" : "Manjimup Dried Apples",
+    "SupplierID" : 24,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "50 - 300 g pkgs.",
+    "UnitPrice" : 53.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 52,
+    "ProductName" : "Filo Mix",
+    "SupplierID" : 24,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "16 - 2 kg boxes",
+    "UnitPrice" : 7.0000,
+    "UnitsInStock" : 38,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 53,
+    "ProductName" : "Perth Pasties",
+    "SupplierID" : 24,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "48 pieces",
+    "UnitPrice" : 32.8000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 54,
+    "ProductName" : "Tourtière",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "16 pies",
+    "UnitPrice" : 7.4500,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 55,
+    "ProductName" : "Pâté chinois",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "24 boxes x 2 pies",
+    "UnitPrice" : 24.0000,
+    "UnitsInStock" : 115,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 56,
+    "ProductName" : "Gnocchi di nonna Alice",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 57,
+    "ProductName" : "Ravioli Angelo",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 19.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 58,
+    "ProductName" : "Escargots de Bourgogne",
+    "SupplierID" : 27,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 pieces",
+    "UnitPrice" : 13.2500,
+    "UnitsInStock" : 62,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 59,
+    "ProductName" : "Raclette Courdavault",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 55.0000,
+    "UnitsInStock" : 79,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 60,
+    "ProductName" : "Camembert Pierrot",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "15 - 300 g rounds",
+    "UnitPrice" : 34.0000,
+    "UnitsInStock" : 19,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 61,
+    "ProductName" : "Sirop d'érable",
+    "SupplierID" : 29,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 500 ml bottles",
+    "UnitPrice" : 28.5000,
+    "UnitsInStock" : 113,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 62,
+    "ProductName" : "Tarte au sucre",
+    "SupplierID" : 29,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "48 pies",
+    "UnitPrice" : 49.3000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 63,
+    "ProductName" : "Vegie-spread",
+    "SupplierID" : 7,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "15 - 625 g jars",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 64,
+    "ProductName" : "Wimmers gute Semmelknödel",
+    "SupplierID" : 12,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "20 bags x 4 pieces",
+    "UnitPrice" : 33.2500,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 80,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 65,
+    "ProductName" : "Louisiana Fiery Hot Pepper Sauce",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "32 - 8 oz bottles",
+    "UnitPrice" : 21.0500,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 66,
+    "ProductName" : "Louisiana Hot Spiced Okra",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 8 oz jars",
+    "UnitPrice" : 17.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 100,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 67,
+    "ProductName" : "Laughing Lumberjack Lager",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 52,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 68,
+    "ProductName" : "Scottish Longbreads",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 8 pieces",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 69,
+    "ProductName" : "Gudbrandsdalsost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 kg pkg.",
+    "UnitPrice" : 36.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 70,
+    "ProductName" : "Outback Lager",
+    "SupplierID" : 7,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 355 ml bottles",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 71,
+    "ProductName" : "Flotemysost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 21.5000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 72,
+    "ProductName" : "Mozzarella di Giovanni",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 34.8000,
+    "UnitsInStock" : 14,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 73,
+    "ProductName" : "Röd Kaviar",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 150 g jars",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 101,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 74,
+    "ProductName" : "Longlife Tofu",
+    "SupplierID" : 4,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 20,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 75,
+    "ProductName" : "Rhönbräu Klosterbier",
+    "SupplierID" : 12,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 0.5 l bottles",
+    "UnitPrice" : 7.7500,
+    "UnitsInStock" : 125,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 76,
+    "ProductName" : "Lakkalikööri",
+    "SupplierID" : 23,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "500 ml",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 57,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 77,
+    "ProductName" : "Original Frankfurter grüne Soße",
+    "SupplierID" : 12,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 boxes",
+    "UnitPrice" : 13.0000,
+    "UnitsInStock" : 32,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}]
diff --git a/vue-options-api-demos/listview/footer-template/main.js b/vue-options-api-demos/listview/footer-template/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/listview/footer-template/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/listview/footer-template/main.vue b/vue-options-api-demos/listview/footer-template/main.vue
new file mode 100644
index 00000000..1d299021
--- /dev/null
+++ b/vue-options-api-demos/listview/footer-template/main.vue
@@ -0,0 +1,91 @@
+<template>
+  <ListView
+    :style="{ width: '100%', height: '600px' }"
+    :data-items="products"
+    :item="'myItem'"
+    :footer="'myFooter'"
+  >
+    <template v-slot:myFooter="{ props }">
+      <div class="footer">
+        <div class="meta">{{ products.length }} products in total</div>
+      </div>
+    </template>
+    <template v-slot:myItem="{ props }">
+      <div class="product">
+        <div class="description">
+          <div class="product-name">{{ props.dataItem.ProductName }}</div>
+          <div class="category-name">
+            {{ props.dataItem.Category.CategoryName }}
+          </div>
+        </div>
+        <div class="price">
+          <div>${{ props.dataItem.UnitPrice }}</div>
+        </div>
+      </div>
+    </template>
+  </ListView>
+</template>
+<script>
+import { ListView } from '@progress/kendo-vue-listview';
+import products from './products.json';
+
+export default {
+  components: {
+    ListView,
+  },
+  data() {
+    return {
+      products: products,
+    };
+  },
+};
+</script>
+
+<style>
+.k-listview {
+  font-family: sans-serif;
+  height: 340px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.product {
+  width: 100%;
+}
+.footer {
+  display: flex;
+  padding: 8px 4px 8px 12px;
+  align-items: center;
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+}
+.footer .meta {
+  flex: 1;
+}
+.reload-text {
+  margin-left: 4px;
+  padding-top: 1px;
+}
+.product {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border-bottom-width: 1px;
+  border-bottom-color: #ebebeb;
+  border-bottom-style: solid;
+}
+.description {
+  flex: 1;
+}
+.category-name {
+  font-size: 12px;
+}
+.product-name {
+  font-size: 16px;
+}
+.product-name,
+.price {
+  height: auto;
+  font-weight: bold;
+}
+.product {
+  padding: 12px;
+}
+</style>
diff --git a/vue-options-api-demos/listview/footer-template/products.json b/vue-options-api-demos/listview/footer-template/products.json
new file mode 100644
index 00000000..3da39edd
--- /dev/null
+++ b/vue-options-api-demos/listview/footer-template/products.json
@@ -0,0 +1,1234 @@
+
+[{
+    "ProductID" : 1,
+    "ProductName" : "Chai",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "10 boxes x 20 bags",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 2,
+    "ProductName" : "Chang",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 3,
+    "ProductName" : "Aniseed Syrup",
+    "SupplierID" : 1,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 550 ml bottles",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 13,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 4,
+    "ProductName" : "Chef Anton's Cajun Seasoning",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "48 - 6 oz jars",
+    "UnitPrice" : 22.0000,
+    "UnitsInStock" : 53,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 5,
+    "ProductName" : "Chef Anton's Gumbo Mix",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "36 boxes",
+    "UnitPrice" : 21.3500,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 6,
+    "ProductName" : "Grandma's Boysenberry Spread",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 8 oz jars",
+    "UnitPrice" : 25.0000,
+    "UnitsInStock" : 120,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 7,
+    "ProductName" : "Uncle Bob's Organic Dried Pears",
+    "SupplierID" : 3,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "12 - 1 lb pkgs.",
+    "UnitPrice" : 30.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 8,
+    "ProductName" : "Northwoods Cranberry Sauce",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 12 oz jars",
+    "UnitPrice" : 40.0000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 9,
+    "ProductName" : "Mishi Kobe Niku",
+    "SupplierID" : 4,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "18 - 500 g pkgs.",
+    "UnitPrice" : 97.0000,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 10,
+    "ProductName" : "Ikura",
+    "SupplierID" : 4,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 200 ml jars",
+    "UnitPrice" : 31.0000,
+    "UnitsInStock" : 31,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 11,
+    "ProductName" : "Queso Cabrales",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "1 kg pkg.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 30,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 12,
+    "ProductName" : "Queso Manchego La Pastora",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 86,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 13,
+    "ProductName" : "Konbu",
+    "SupplierID" : 6,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "2 kg box",
+    "UnitPrice" : 6.0000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 14,
+    "ProductName" : "Tofu",
+    "SupplierID" : 6,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "40 - 100 g pkgs.",
+    "UnitPrice" : 23.2500,
+    "UnitsInStock" : 35,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 15,
+    "ProductName" : "Genen Shouyu",
+    "SupplierID" : 6,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 250 ml bottles",
+    "UnitPrice" : 15.5000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 16,
+    "ProductName" : "Pavlova",
+    "SupplierID" : 7,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "32 - 500 g boxes",
+    "UnitPrice" : 17.4500,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 17,
+    "ProductName" : "Alice Mutton",
+    "SupplierID" : 7,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "20 - 1 kg tins",
+    "UnitPrice" : 39.0000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 18,
+    "ProductName" : "Carnarvon Tigers",
+    "SupplierID" : 7,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "16 kg pkg.",
+    "UnitPrice" : 62.5000,
+    "UnitsInStock" : 42,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 19,
+    "ProductName" : "Teatime Chocolate Biscuits",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 12 pieces",
+    "UnitPrice" : 9.2000,
+    "UnitsInStock" : 25,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 20,
+    "ProductName" : "Sir Rodney's Marmalade",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "30 gift boxes",
+    "UnitPrice" : 81.0000,
+    "UnitsInStock" : 40,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 21,
+    "ProductName" : "Sir Rodney's Scones",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 pkgs. x 4 pieces",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 3,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 22,
+    "ProductName" : "Gustaf's Knäckebröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 500 g pkgs.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 104,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 23,
+    "ProductName" : "Tunnbröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "12 - 250 g pkgs.",
+    "UnitPrice" : 9.0000,
+    "UnitsInStock" : 61,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 24,
+    "ProductName" : "Guaraná Fantástica",
+    "SupplierID" : 10,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 355 ml cans",
+    "UnitPrice" : 4.5000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 25,
+    "ProductName" : "NuNuCa Nuß-Nougat-Creme",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "20 - 450 g glasses",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 26,
+    "ProductName" : "Gumbär Gummibärchen",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 250 g bags",
+    "UnitPrice" : 31.2300,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 27,
+    "ProductName" : "Schoggi Schokolade",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 100 g pieces",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 49,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 28,
+    "ProductName" : "Rössle Sauerkraut",
+    "SupplierID" : 12,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "25 - 825 g cans",
+    "UnitPrice" : 45.6000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 29,
+    "ProductName" : "Thüringer Rostbratwurst",
+    "SupplierID" : 12,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "50 bags x 30 sausgs.",
+    "UnitPrice" : 123.7900,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 30,
+    "ProductName" : "Nord-Ost Matjeshering",
+    "SupplierID" : 13,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "10 - 200 g glasses",
+    "UnitPrice" : 25.8900,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 31,
+    "ProductName" : "Gorgonzola Telino",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "12 - 100 g pkgs",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 32,
+    "ProductName" : "Mascarpone Fabioli",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 32.0000,
+    "UnitsInStock" : 9,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 33,
+    "ProductName" : "Geitost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "500 g",
+    "UnitPrice" : 2.5000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 34,
+    "ProductName" : "Sasquatch Ale",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 111,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 35,
+    "ProductName" : "Steeleye Stout",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 36,
+    "ProductName" : "Inlagd Sill",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 250 g  jars",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 37,
+    "ProductName" : "Gravad lax",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 500 g pkgs.",
+    "UnitPrice" : 26.0000,
+    "UnitsInStock" : 11,
+    "UnitsOnOrder" : 50,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 38,
+    "ProductName" : "Côte de Blaye",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 75 cl bottles",
+    "UnitPrice" : 263.5000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 39,
+    "ProductName" : "Chartreuse verte",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "750 cc per bottle",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 69,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 40,
+    "ProductName" : "Boston Crab Meat",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 4 oz tins",
+    "UnitPrice" : 18.4000,
+    "UnitsInStock" : 123,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 41,
+    "ProductName" : "Jack's New England Clam Chowder",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 12 oz cans",
+    "UnitPrice" : 9.6500,
+    "UnitsInStock" : 85,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 42,
+    "ProductName" : "Singaporean Hokkien Fried Mee",
+    "SupplierID" : 20,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "32 - 1 kg pkgs.",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 43,
+    "ProductName" : "Ipoh Coffee",
+    "SupplierID" : 20,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "16 - 500 g tins",
+    "UnitPrice" : 46.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 44,
+    "ProductName" : "Gula Malacca",
+    "SupplierID" : 20,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "20 - 2 kg bags",
+    "UnitPrice" : 19.4500,
+    "UnitsInStock" : 27,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 45,
+    "ProductName" : "Rogede sild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "1k pkg.",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 5,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 46,
+    "ProductName" : "Spegesild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "4 - 450 g glasses",
+    "UnitPrice" : 12.0000,
+    "UnitsInStock" : 95,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 47,
+    "ProductName" : "Zaanse koeken",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 - 4 oz boxes",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 48,
+    "ProductName" : "Chocolade",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 pkgs.",
+    "UnitPrice" : 12.7500,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 49,
+    "ProductName" : "Maxilaku",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 - 50 g pkgs.",
+    "UnitPrice" : 20.0000,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 60,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 50,
+    "ProductName" : "Valkoinen suklaa",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "12 - 100 g bars",
+    "UnitPrice" : 16.2500,
+    "UnitsInStock" : 65,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 51,
+    "ProductName" : "Manjimup Dried Apples",
+    "SupplierID" : 24,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "50 - 300 g pkgs.",
+    "UnitPrice" : 53.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 52,
+    "ProductName" : "Filo Mix",
+    "SupplierID" : 24,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "16 - 2 kg boxes",
+    "UnitPrice" : 7.0000,
+    "UnitsInStock" : 38,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 53,
+    "ProductName" : "Perth Pasties",
+    "SupplierID" : 24,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "48 pieces",
+    "UnitPrice" : 32.8000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 54,
+    "ProductName" : "Tourtière",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "16 pies",
+    "UnitPrice" : 7.4500,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 55,
+    "ProductName" : "Pâté chinois",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "24 boxes x 2 pies",
+    "UnitPrice" : 24.0000,
+    "UnitsInStock" : 115,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 56,
+    "ProductName" : "Gnocchi di nonna Alice",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 57,
+    "ProductName" : "Ravioli Angelo",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 19.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 58,
+    "ProductName" : "Escargots de Bourgogne",
+    "SupplierID" : 27,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 pieces",
+    "UnitPrice" : 13.2500,
+    "UnitsInStock" : 62,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 59,
+    "ProductName" : "Raclette Courdavault",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 55.0000,
+    "UnitsInStock" : 79,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 60,
+    "ProductName" : "Camembert Pierrot",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "15 - 300 g rounds",
+    "UnitPrice" : 34.0000,
+    "UnitsInStock" : 19,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 61,
+    "ProductName" : "Sirop d'érable",
+    "SupplierID" : 29,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 500 ml bottles",
+    "UnitPrice" : 28.5000,
+    "UnitsInStock" : 113,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 62,
+    "ProductName" : "Tarte au sucre",
+    "SupplierID" : 29,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "48 pies",
+    "UnitPrice" : 49.3000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 63,
+    "ProductName" : "Vegie-spread",
+    "SupplierID" : 7,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "15 - 625 g jars",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 64,
+    "ProductName" : "Wimmers gute Semmelknödel",
+    "SupplierID" : 12,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "20 bags x 4 pieces",
+    "UnitPrice" : 33.2500,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 80,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 65,
+    "ProductName" : "Louisiana Fiery Hot Pepper Sauce",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "32 - 8 oz bottles",
+    "UnitPrice" : 21.0500,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 66,
+    "ProductName" : "Louisiana Hot Spiced Okra",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 8 oz jars",
+    "UnitPrice" : 17.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 100,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 67,
+    "ProductName" : "Laughing Lumberjack Lager",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 52,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 68,
+    "ProductName" : "Scottish Longbreads",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 8 pieces",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 69,
+    "ProductName" : "Gudbrandsdalsost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 kg pkg.",
+    "UnitPrice" : 36.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 70,
+    "ProductName" : "Outback Lager",
+    "SupplierID" : 7,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 355 ml bottles",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 71,
+    "ProductName" : "Flotemysost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 21.5000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 72,
+    "ProductName" : "Mozzarella di Giovanni",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 34.8000,
+    "UnitsInStock" : 14,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 73,
+    "ProductName" : "Röd Kaviar",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 150 g jars",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 101,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 74,
+    "ProductName" : "Longlife Tofu",
+    "SupplierID" : 4,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 20,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 75,
+    "ProductName" : "Rhönbräu Klosterbier",
+    "SupplierID" : 12,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 0.5 l bottles",
+    "UnitPrice" : 7.7500,
+    "UnitsInStock" : 125,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 76,
+    "ProductName" : "Lakkalikööri",
+    "SupplierID" : 23,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "500 ml",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 57,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 77,
+    "ProductName" : "Original Frankfurter grüne Soße",
+    "SupplierID" : 12,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 boxes",
+    "UnitPrice" : 13.0000,
+    "UnitsInStock" : 32,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}]
diff --git a/vue-options-api-demos/listview/get-started/main.js b/vue-options-api-demos/listview/get-started/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/listview/get-started/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/listview/get-started/main.vue b/vue-options-api-demos/listview/get-started/main.vue
new file mode 100644
index 00000000..eaa9dab4
--- /dev/null
+++ b/vue-options-api-demos/listview/get-started/main.vue
@@ -0,0 +1,31 @@
+<template>
+  <ListView
+    :style="{ width: '100%', height: '600px' }"
+    :data-items="products"
+    :item="'myItem'"
+  >
+    <template v-slot:myItem="{ props }">
+      <div
+        class="k-listview-item"
+        :style="{ padding: '10px', borderBottom: '1px solid lightgrey' }"
+      >
+        {{ props.dataItem.ProductName }}
+      </div>
+    </template>
+  </ListView>
+</template>
+<script>
+import { ListView } from '@progress/kendo-vue-listview';
+import products from './products.json';
+
+export default {
+  components: {
+    ListView,
+  },
+  data() {
+    return {
+      products: products,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/listview/get-started/products.json b/vue-options-api-demos/listview/get-started/products.json
new file mode 100644
index 00000000..3da39edd
--- /dev/null
+++ b/vue-options-api-demos/listview/get-started/products.json
@@ -0,0 +1,1234 @@
+
+[{
+    "ProductID" : 1,
+    "ProductName" : "Chai",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "10 boxes x 20 bags",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 2,
+    "ProductName" : "Chang",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 3,
+    "ProductName" : "Aniseed Syrup",
+    "SupplierID" : 1,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 550 ml bottles",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 13,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 4,
+    "ProductName" : "Chef Anton's Cajun Seasoning",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "48 - 6 oz jars",
+    "UnitPrice" : 22.0000,
+    "UnitsInStock" : 53,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 5,
+    "ProductName" : "Chef Anton's Gumbo Mix",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "36 boxes",
+    "UnitPrice" : 21.3500,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 6,
+    "ProductName" : "Grandma's Boysenberry Spread",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 8 oz jars",
+    "UnitPrice" : 25.0000,
+    "UnitsInStock" : 120,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 7,
+    "ProductName" : "Uncle Bob's Organic Dried Pears",
+    "SupplierID" : 3,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "12 - 1 lb pkgs.",
+    "UnitPrice" : 30.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 8,
+    "ProductName" : "Northwoods Cranberry Sauce",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 12 oz jars",
+    "UnitPrice" : 40.0000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 9,
+    "ProductName" : "Mishi Kobe Niku",
+    "SupplierID" : 4,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "18 - 500 g pkgs.",
+    "UnitPrice" : 97.0000,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 10,
+    "ProductName" : "Ikura",
+    "SupplierID" : 4,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 200 ml jars",
+    "UnitPrice" : 31.0000,
+    "UnitsInStock" : 31,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 11,
+    "ProductName" : "Queso Cabrales",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "1 kg pkg.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 30,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 12,
+    "ProductName" : "Queso Manchego La Pastora",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 86,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 13,
+    "ProductName" : "Konbu",
+    "SupplierID" : 6,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "2 kg box",
+    "UnitPrice" : 6.0000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 14,
+    "ProductName" : "Tofu",
+    "SupplierID" : 6,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "40 - 100 g pkgs.",
+    "UnitPrice" : 23.2500,
+    "UnitsInStock" : 35,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 15,
+    "ProductName" : "Genen Shouyu",
+    "SupplierID" : 6,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 250 ml bottles",
+    "UnitPrice" : 15.5000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 16,
+    "ProductName" : "Pavlova",
+    "SupplierID" : 7,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "32 - 500 g boxes",
+    "UnitPrice" : 17.4500,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 17,
+    "ProductName" : "Alice Mutton",
+    "SupplierID" : 7,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "20 - 1 kg tins",
+    "UnitPrice" : 39.0000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 18,
+    "ProductName" : "Carnarvon Tigers",
+    "SupplierID" : 7,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "16 kg pkg.",
+    "UnitPrice" : 62.5000,
+    "UnitsInStock" : 42,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 19,
+    "ProductName" : "Teatime Chocolate Biscuits",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 12 pieces",
+    "UnitPrice" : 9.2000,
+    "UnitsInStock" : 25,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 20,
+    "ProductName" : "Sir Rodney's Marmalade",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "30 gift boxes",
+    "UnitPrice" : 81.0000,
+    "UnitsInStock" : 40,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 21,
+    "ProductName" : "Sir Rodney's Scones",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 pkgs. x 4 pieces",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 3,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 22,
+    "ProductName" : "Gustaf's Knäckebröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 500 g pkgs.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 104,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 23,
+    "ProductName" : "Tunnbröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "12 - 250 g pkgs.",
+    "UnitPrice" : 9.0000,
+    "UnitsInStock" : 61,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 24,
+    "ProductName" : "Guaraná Fantástica",
+    "SupplierID" : 10,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 355 ml cans",
+    "UnitPrice" : 4.5000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 25,
+    "ProductName" : "NuNuCa Nuß-Nougat-Creme",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "20 - 450 g glasses",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 26,
+    "ProductName" : "Gumbär Gummibärchen",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 250 g bags",
+    "UnitPrice" : 31.2300,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 27,
+    "ProductName" : "Schoggi Schokolade",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 100 g pieces",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 49,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 28,
+    "ProductName" : "Rössle Sauerkraut",
+    "SupplierID" : 12,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "25 - 825 g cans",
+    "UnitPrice" : 45.6000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 29,
+    "ProductName" : "Thüringer Rostbratwurst",
+    "SupplierID" : 12,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "50 bags x 30 sausgs.",
+    "UnitPrice" : 123.7900,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 30,
+    "ProductName" : "Nord-Ost Matjeshering",
+    "SupplierID" : 13,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "10 - 200 g glasses",
+    "UnitPrice" : 25.8900,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 31,
+    "ProductName" : "Gorgonzola Telino",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "12 - 100 g pkgs",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 32,
+    "ProductName" : "Mascarpone Fabioli",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 32.0000,
+    "UnitsInStock" : 9,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 33,
+    "ProductName" : "Geitost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "500 g",
+    "UnitPrice" : 2.5000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 34,
+    "ProductName" : "Sasquatch Ale",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 111,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 35,
+    "ProductName" : "Steeleye Stout",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 36,
+    "ProductName" : "Inlagd Sill",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 250 g  jars",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 37,
+    "ProductName" : "Gravad lax",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 500 g pkgs.",
+    "UnitPrice" : 26.0000,
+    "UnitsInStock" : 11,
+    "UnitsOnOrder" : 50,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 38,
+    "ProductName" : "Côte de Blaye",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 75 cl bottles",
+    "UnitPrice" : 263.5000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 39,
+    "ProductName" : "Chartreuse verte",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "750 cc per bottle",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 69,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 40,
+    "ProductName" : "Boston Crab Meat",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 4 oz tins",
+    "UnitPrice" : 18.4000,
+    "UnitsInStock" : 123,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 41,
+    "ProductName" : "Jack's New England Clam Chowder",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 12 oz cans",
+    "UnitPrice" : 9.6500,
+    "UnitsInStock" : 85,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 42,
+    "ProductName" : "Singaporean Hokkien Fried Mee",
+    "SupplierID" : 20,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "32 - 1 kg pkgs.",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 43,
+    "ProductName" : "Ipoh Coffee",
+    "SupplierID" : 20,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "16 - 500 g tins",
+    "UnitPrice" : 46.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 44,
+    "ProductName" : "Gula Malacca",
+    "SupplierID" : 20,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "20 - 2 kg bags",
+    "UnitPrice" : 19.4500,
+    "UnitsInStock" : 27,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 45,
+    "ProductName" : "Rogede sild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "1k pkg.",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 5,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 46,
+    "ProductName" : "Spegesild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "4 - 450 g glasses",
+    "UnitPrice" : 12.0000,
+    "UnitsInStock" : 95,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 47,
+    "ProductName" : "Zaanse koeken",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 - 4 oz boxes",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 48,
+    "ProductName" : "Chocolade",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 pkgs.",
+    "UnitPrice" : 12.7500,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 49,
+    "ProductName" : "Maxilaku",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 - 50 g pkgs.",
+    "UnitPrice" : 20.0000,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 60,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 50,
+    "ProductName" : "Valkoinen suklaa",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "12 - 100 g bars",
+    "UnitPrice" : 16.2500,
+    "UnitsInStock" : 65,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 51,
+    "ProductName" : "Manjimup Dried Apples",
+    "SupplierID" : 24,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "50 - 300 g pkgs.",
+    "UnitPrice" : 53.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 52,
+    "ProductName" : "Filo Mix",
+    "SupplierID" : 24,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "16 - 2 kg boxes",
+    "UnitPrice" : 7.0000,
+    "UnitsInStock" : 38,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 53,
+    "ProductName" : "Perth Pasties",
+    "SupplierID" : 24,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "48 pieces",
+    "UnitPrice" : 32.8000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 54,
+    "ProductName" : "Tourtière",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "16 pies",
+    "UnitPrice" : 7.4500,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 55,
+    "ProductName" : "Pâté chinois",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "24 boxes x 2 pies",
+    "UnitPrice" : 24.0000,
+    "UnitsInStock" : 115,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 56,
+    "ProductName" : "Gnocchi di nonna Alice",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 57,
+    "ProductName" : "Ravioli Angelo",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 19.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 58,
+    "ProductName" : "Escargots de Bourgogne",
+    "SupplierID" : 27,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 pieces",
+    "UnitPrice" : 13.2500,
+    "UnitsInStock" : 62,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 59,
+    "ProductName" : "Raclette Courdavault",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 55.0000,
+    "UnitsInStock" : 79,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 60,
+    "ProductName" : "Camembert Pierrot",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "15 - 300 g rounds",
+    "UnitPrice" : 34.0000,
+    "UnitsInStock" : 19,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 61,
+    "ProductName" : "Sirop d'érable",
+    "SupplierID" : 29,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 500 ml bottles",
+    "UnitPrice" : 28.5000,
+    "UnitsInStock" : 113,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 62,
+    "ProductName" : "Tarte au sucre",
+    "SupplierID" : 29,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "48 pies",
+    "UnitPrice" : 49.3000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 63,
+    "ProductName" : "Vegie-spread",
+    "SupplierID" : 7,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "15 - 625 g jars",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 64,
+    "ProductName" : "Wimmers gute Semmelknödel",
+    "SupplierID" : 12,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "20 bags x 4 pieces",
+    "UnitPrice" : 33.2500,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 80,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 65,
+    "ProductName" : "Louisiana Fiery Hot Pepper Sauce",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "32 - 8 oz bottles",
+    "UnitPrice" : 21.0500,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 66,
+    "ProductName" : "Louisiana Hot Spiced Okra",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 8 oz jars",
+    "UnitPrice" : 17.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 100,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 67,
+    "ProductName" : "Laughing Lumberjack Lager",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 52,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 68,
+    "ProductName" : "Scottish Longbreads",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 8 pieces",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 69,
+    "ProductName" : "Gudbrandsdalsost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 kg pkg.",
+    "UnitPrice" : 36.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 70,
+    "ProductName" : "Outback Lager",
+    "SupplierID" : 7,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 355 ml bottles",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 71,
+    "ProductName" : "Flotemysost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 21.5000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 72,
+    "ProductName" : "Mozzarella di Giovanni",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 34.8000,
+    "UnitsInStock" : 14,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 73,
+    "ProductName" : "Röd Kaviar",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 150 g jars",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 101,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 74,
+    "ProductName" : "Longlife Tofu",
+    "SupplierID" : 4,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 20,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 75,
+    "ProductName" : "Rhönbräu Klosterbier",
+    "SupplierID" : 12,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 0.5 l bottles",
+    "UnitPrice" : 7.7500,
+    "UnitsInStock" : 125,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 76,
+    "ProductName" : "Lakkalikööri",
+    "SupplierID" : 23,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "500 ml",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 57,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 77,
+    "ProductName" : "Original Frankfurter grüne Soße",
+    "SupplierID" : 12,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 boxes",
+    "UnitPrice" : 13.0000,
+    "UnitsInStock" : 32,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}]
diff --git a/vue-options-api-demos/listview/header-template/main.js b/vue-options-api-demos/listview/header-template/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/listview/header-template/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/listview/header-template/main.vue b/vue-options-api-demos/listview/header-template/main.vue
new file mode 100644
index 00000000..eba8e02d
--- /dev/null
+++ b/vue-options-api-demos/listview/header-template/main.vue
@@ -0,0 +1,121 @@
+<template>
+  <ListView
+    :style="{ width: '100%', height: '600px' }"
+    :data-items="dataItems"
+    :item="'myItem'"
+    :header="'myHeader'"
+  >
+    <template v-slot:myHeader="{ props }">
+      <div class="listview-header">
+        <div class="listview-title">Inventory</div>
+        <KInput
+          :class="'filter-input'"
+          :placeholder="'Filter items...'"
+          :input-suffix="'suffix'"
+          @input="handleFilterChange"
+        >
+          <template v-slot:suffix>
+            <span class="k-input-icon k-icon k-i-search"></span>
+          </template>
+        </KInput>
+      </div>
+    </template>
+    <template v-slot:myItem="{ props }">
+      <div class="product">
+        <div class="description">
+          <div class="product-name">{{ props.dataItem.ProductName }}</div>
+          <div class="category-name">
+            {{ props.dataItem.Category.CategoryName }}
+          </div>
+        </div>
+        <div class="price">
+          <div>${{ props.dataItem.UnitPrice }}</div>
+        </div>
+      </div>
+    </template>
+  </ListView>
+</template>
+<script>
+import { ListView } from '@progress/kendo-vue-listview';
+import { Input } from '@progress/kendo-vue-inputs';
+import { filterBy } from '@progress/kendo-data-query';
+import products from './products.json';
+
+export default {
+    components: {
+        ListView,
+        KInput: Input,
+    },
+    data() {
+        return {
+            products: products,
+            filter: null,
+        };
+    },
+    computed: {
+        dataItems() {
+            return filterBy(this.products, this.filter);
+        },
+    },
+    methods: {
+        handleFilterChange(ev) {
+            this.filter = {
+                logic: 'or',
+                filters: [
+                    { field: 'ProductName', operator: 'contains', value: ev.value },
+                    { field: 'CategoryName', operator: 'contains', value: ev.value },
+                ],
+            };
+        },
+    },
+};
+</script>
+
+<style scoped>
+.k-listview {
+  font-family: sans-serif;
+  height: 340px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.product {
+  width: 100%;
+}
+.listview-header {
+  display: flex;
+  padding: 12px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.listview-title {
+  flex: 1;
+  font-size: 22px;
+  font-weight: bold;
+}
+.filter-input {
+  width: 200px;
+}
+.product {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border-bottom-width: 1px;
+  border-bottom-color: #ebebeb;
+  border-bottom-style: solid;
+}
+.description {
+  flex: 1;
+}
+.category-name {
+  font-size: 12px;
+}
+.product-name {
+  font-size: 16px;
+}
+.product-name,
+.price {
+  height: auto;
+  font-weight: bold;
+}
+.product {
+  padding: 12px;
+}
+</style>
diff --git a/vue-options-api-demos/listview/header-template/products.json b/vue-options-api-demos/listview/header-template/products.json
new file mode 100644
index 00000000..3da39edd
--- /dev/null
+++ b/vue-options-api-demos/listview/header-template/products.json
@@ -0,0 +1,1234 @@
+
+[{
+    "ProductID" : 1,
+    "ProductName" : "Chai",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "10 boxes x 20 bags",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 2,
+    "ProductName" : "Chang",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 3,
+    "ProductName" : "Aniseed Syrup",
+    "SupplierID" : 1,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 550 ml bottles",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 13,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 4,
+    "ProductName" : "Chef Anton's Cajun Seasoning",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "48 - 6 oz jars",
+    "UnitPrice" : 22.0000,
+    "UnitsInStock" : 53,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 5,
+    "ProductName" : "Chef Anton's Gumbo Mix",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "36 boxes",
+    "UnitPrice" : 21.3500,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 6,
+    "ProductName" : "Grandma's Boysenberry Spread",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 8 oz jars",
+    "UnitPrice" : 25.0000,
+    "UnitsInStock" : 120,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 7,
+    "ProductName" : "Uncle Bob's Organic Dried Pears",
+    "SupplierID" : 3,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "12 - 1 lb pkgs.",
+    "UnitPrice" : 30.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 8,
+    "ProductName" : "Northwoods Cranberry Sauce",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 12 oz jars",
+    "UnitPrice" : 40.0000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 9,
+    "ProductName" : "Mishi Kobe Niku",
+    "SupplierID" : 4,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "18 - 500 g pkgs.",
+    "UnitPrice" : 97.0000,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 10,
+    "ProductName" : "Ikura",
+    "SupplierID" : 4,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 200 ml jars",
+    "UnitPrice" : 31.0000,
+    "UnitsInStock" : 31,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 11,
+    "ProductName" : "Queso Cabrales",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "1 kg pkg.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 30,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 12,
+    "ProductName" : "Queso Manchego La Pastora",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 86,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 13,
+    "ProductName" : "Konbu",
+    "SupplierID" : 6,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "2 kg box",
+    "UnitPrice" : 6.0000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 14,
+    "ProductName" : "Tofu",
+    "SupplierID" : 6,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "40 - 100 g pkgs.",
+    "UnitPrice" : 23.2500,
+    "UnitsInStock" : 35,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 15,
+    "ProductName" : "Genen Shouyu",
+    "SupplierID" : 6,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 250 ml bottles",
+    "UnitPrice" : 15.5000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 16,
+    "ProductName" : "Pavlova",
+    "SupplierID" : 7,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "32 - 500 g boxes",
+    "UnitPrice" : 17.4500,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 17,
+    "ProductName" : "Alice Mutton",
+    "SupplierID" : 7,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "20 - 1 kg tins",
+    "UnitPrice" : 39.0000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 18,
+    "ProductName" : "Carnarvon Tigers",
+    "SupplierID" : 7,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "16 kg pkg.",
+    "UnitPrice" : 62.5000,
+    "UnitsInStock" : 42,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 19,
+    "ProductName" : "Teatime Chocolate Biscuits",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 12 pieces",
+    "UnitPrice" : 9.2000,
+    "UnitsInStock" : 25,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 20,
+    "ProductName" : "Sir Rodney's Marmalade",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "30 gift boxes",
+    "UnitPrice" : 81.0000,
+    "UnitsInStock" : 40,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 21,
+    "ProductName" : "Sir Rodney's Scones",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 pkgs. x 4 pieces",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 3,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 22,
+    "ProductName" : "Gustaf's Knäckebröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 500 g pkgs.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 104,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 23,
+    "ProductName" : "Tunnbröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "12 - 250 g pkgs.",
+    "UnitPrice" : 9.0000,
+    "UnitsInStock" : 61,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 24,
+    "ProductName" : "Guaraná Fantástica",
+    "SupplierID" : 10,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 355 ml cans",
+    "UnitPrice" : 4.5000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 25,
+    "ProductName" : "NuNuCa Nuß-Nougat-Creme",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "20 - 450 g glasses",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 26,
+    "ProductName" : "Gumbär Gummibärchen",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 250 g bags",
+    "UnitPrice" : 31.2300,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 27,
+    "ProductName" : "Schoggi Schokolade",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 100 g pieces",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 49,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 28,
+    "ProductName" : "Rössle Sauerkraut",
+    "SupplierID" : 12,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "25 - 825 g cans",
+    "UnitPrice" : 45.6000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 29,
+    "ProductName" : "Thüringer Rostbratwurst",
+    "SupplierID" : 12,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "50 bags x 30 sausgs.",
+    "UnitPrice" : 123.7900,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 30,
+    "ProductName" : "Nord-Ost Matjeshering",
+    "SupplierID" : 13,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "10 - 200 g glasses",
+    "UnitPrice" : 25.8900,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 31,
+    "ProductName" : "Gorgonzola Telino",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "12 - 100 g pkgs",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 32,
+    "ProductName" : "Mascarpone Fabioli",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 32.0000,
+    "UnitsInStock" : 9,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 33,
+    "ProductName" : "Geitost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "500 g",
+    "UnitPrice" : 2.5000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 34,
+    "ProductName" : "Sasquatch Ale",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 111,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 35,
+    "ProductName" : "Steeleye Stout",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 36,
+    "ProductName" : "Inlagd Sill",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 250 g  jars",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 37,
+    "ProductName" : "Gravad lax",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 500 g pkgs.",
+    "UnitPrice" : 26.0000,
+    "UnitsInStock" : 11,
+    "UnitsOnOrder" : 50,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 38,
+    "ProductName" : "Côte de Blaye",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 75 cl bottles",
+    "UnitPrice" : 263.5000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 39,
+    "ProductName" : "Chartreuse verte",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "750 cc per bottle",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 69,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 40,
+    "ProductName" : "Boston Crab Meat",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 4 oz tins",
+    "UnitPrice" : 18.4000,
+    "UnitsInStock" : 123,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 41,
+    "ProductName" : "Jack's New England Clam Chowder",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 12 oz cans",
+    "UnitPrice" : 9.6500,
+    "UnitsInStock" : 85,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 42,
+    "ProductName" : "Singaporean Hokkien Fried Mee",
+    "SupplierID" : 20,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "32 - 1 kg pkgs.",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 43,
+    "ProductName" : "Ipoh Coffee",
+    "SupplierID" : 20,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "16 - 500 g tins",
+    "UnitPrice" : 46.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 44,
+    "ProductName" : "Gula Malacca",
+    "SupplierID" : 20,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "20 - 2 kg bags",
+    "UnitPrice" : 19.4500,
+    "UnitsInStock" : 27,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 45,
+    "ProductName" : "Rogede sild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "1k pkg.",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 5,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 46,
+    "ProductName" : "Spegesild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "4 - 450 g glasses",
+    "UnitPrice" : 12.0000,
+    "UnitsInStock" : 95,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 47,
+    "ProductName" : "Zaanse koeken",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 - 4 oz boxes",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 48,
+    "ProductName" : "Chocolade",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 pkgs.",
+    "UnitPrice" : 12.7500,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 49,
+    "ProductName" : "Maxilaku",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 - 50 g pkgs.",
+    "UnitPrice" : 20.0000,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 60,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 50,
+    "ProductName" : "Valkoinen suklaa",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "12 - 100 g bars",
+    "UnitPrice" : 16.2500,
+    "UnitsInStock" : 65,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 51,
+    "ProductName" : "Manjimup Dried Apples",
+    "SupplierID" : 24,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "50 - 300 g pkgs.",
+    "UnitPrice" : 53.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 52,
+    "ProductName" : "Filo Mix",
+    "SupplierID" : 24,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "16 - 2 kg boxes",
+    "UnitPrice" : 7.0000,
+    "UnitsInStock" : 38,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 53,
+    "ProductName" : "Perth Pasties",
+    "SupplierID" : 24,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "48 pieces",
+    "UnitPrice" : 32.8000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 54,
+    "ProductName" : "Tourtière",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "16 pies",
+    "UnitPrice" : 7.4500,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 55,
+    "ProductName" : "Pâté chinois",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "24 boxes x 2 pies",
+    "UnitPrice" : 24.0000,
+    "UnitsInStock" : 115,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 56,
+    "ProductName" : "Gnocchi di nonna Alice",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 57,
+    "ProductName" : "Ravioli Angelo",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 19.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 58,
+    "ProductName" : "Escargots de Bourgogne",
+    "SupplierID" : 27,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 pieces",
+    "UnitPrice" : 13.2500,
+    "UnitsInStock" : 62,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 59,
+    "ProductName" : "Raclette Courdavault",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 55.0000,
+    "UnitsInStock" : 79,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 60,
+    "ProductName" : "Camembert Pierrot",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "15 - 300 g rounds",
+    "UnitPrice" : 34.0000,
+    "UnitsInStock" : 19,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 61,
+    "ProductName" : "Sirop d'érable",
+    "SupplierID" : 29,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 500 ml bottles",
+    "UnitPrice" : 28.5000,
+    "UnitsInStock" : 113,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 62,
+    "ProductName" : "Tarte au sucre",
+    "SupplierID" : 29,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "48 pies",
+    "UnitPrice" : 49.3000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 63,
+    "ProductName" : "Vegie-spread",
+    "SupplierID" : 7,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "15 - 625 g jars",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 64,
+    "ProductName" : "Wimmers gute Semmelknödel",
+    "SupplierID" : 12,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "20 bags x 4 pieces",
+    "UnitPrice" : 33.2500,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 80,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 65,
+    "ProductName" : "Louisiana Fiery Hot Pepper Sauce",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "32 - 8 oz bottles",
+    "UnitPrice" : 21.0500,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 66,
+    "ProductName" : "Louisiana Hot Spiced Okra",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 8 oz jars",
+    "UnitPrice" : 17.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 100,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 67,
+    "ProductName" : "Laughing Lumberjack Lager",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 52,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 68,
+    "ProductName" : "Scottish Longbreads",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 8 pieces",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 69,
+    "ProductName" : "Gudbrandsdalsost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 kg pkg.",
+    "UnitPrice" : 36.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 70,
+    "ProductName" : "Outback Lager",
+    "SupplierID" : 7,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 355 ml bottles",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 71,
+    "ProductName" : "Flotemysost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 21.5000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 72,
+    "ProductName" : "Mozzarella di Giovanni",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 34.8000,
+    "UnitsInStock" : 14,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 73,
+    "ProductName" : "Röd Kaviar",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 150 g jars",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 101,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 74,
+    "ProductName" : "Longlife Tofu",
+    "SupplierID" : 4,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 20,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 75,
+    "ProductName" : "Rhönbräu Klosterbier",
+    "SupplierID" : 12,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 0.5 l bottles",
+    "UnitPrice" : 7.7500,
+    "UnitsInStock" : 125,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 76,
+    "ProductName" : "Lakkalikööri",
+    "SupplierID" : 23,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "500 ml",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 57,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 77,
+    "ProductName" : "Original Frankfurter grüne Soße",
+    "SupplierID" : 12,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 boxes",
+    "UnitPrice" : 13.0000,
+    "UnitsInStock" : 32,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}]
diff --git a/vue-options-api-demos/listview/item-template/main.js b/vue-options-api-demos/listview/item-template/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/listview/item-template/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/listview/item-template/main.vue b/vue-options-api-demos/listview/item-template/main.vue
new file mode 100644
index 00000000..4e694995
--- /dev/null
+++ b/vue-options-api-demos/listview/item-template/main.vue
@@ -0,0 +1,66 @@
+<template>
+  <ListView
+    :style="{ width: '100%', height: '600px' }"
+    :data-items="products"
+    :item="'myItem'"
+  >
+    <template v-slot:myItem="{ props }">
+      <div
+        class="k-listview-item"
+        :style="{ padding: '10px', borderBottom: '1px solid lightgrey' }"
+      >
+        <strong>[{{ props.dataItem.ProductID }}]:</strong>
+        <span class="product-name">{{ props.dataItem.ProductName }}</span>
+        <span class="item-position"
+          >({{
+            isFirst(props.dataItem.ProductID)
+              ? 'first'
+              : isLast(props.dataItem.ProductID)
+              ? 'last'
+              : 'mid'
+          }})</span
+        >
+      </div>
+    </template>
+  </ListView>
+</template>
+<script>
+import { ListView } from '@progress/kendo-vue-listview';
+import products from './products.json';
+
+export default {
+  components: {
+    ListView,
+  },
+  data() {
+    return {
+      products: products,
+    };
+  },
+  methods: {
+    isFirst(ProductID) {
+      return ProductID === 1;
+    },
+    isLast(ProductID) {
+      return ProductID === this.products.length;
+    },
+  },
+};
+</script>
+
+<style>
+.k-listview {
+  font-family: sans-serif;
+  height: 340px;
+}
+.product {
+  padding: 8px;
+  width: 100%;
+}
+.product-name {
+  margin: 0 4px;
+}
+.item-position {
+  font-style: italic;
+}
+</style>
diff --git a/vue-options-api-demos/listview/item-template/products.json b/vue-options-api-demos/listview/item-template/products.json
new file mode 100644
index 00000000..3da39edd
--- /dev/null
+++ b/vue-options-api-demos/listview/item-template/products.json
@@ -0,0 +1,1234 @@
+
+[{
+    "ProductID" : 1,
+    "ProductName" : "Chai",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "10 boxes x 20 bags",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 2,
+    "ProductName" : "Chang",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 3,
+    "ProductName" : "Aniseed Syrup",
+    "SupplierID" : 1,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 550 ml bottles",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 13,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 4,
+    "ProductName" : "Chef Anton's Cajun Seasoning",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "48 - 6 oz jars",
+    "UnitPrice" : 22.0000,
+    "UnitsInStock" : 53,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 5,
+    "ProductName" : "Chef Anton's Gumbo Mix",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "36 boxes",
+    "UnitPrice" : 21.3500,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 6,
+    "ProductName" : "Grandma's Boysenberry Spread",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 8 oz jars",
+    "UnitPrice" : 25.0000,
+    "UnitsInStock" : 120,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 7,
+    "ProductName" : "Uncle Bob's Organic Dried Pears",
+    "SupplierID" : 3,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "12 - 1 lb pkgs.",
+    "UnitPrice" : 30.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 8,
+    "ProductName" : "Northwoods Cranberry Sauce",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 12 oz jars",
+    "UnitPrice" : 40.0000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 9,
+    "ProductName" : "Mishi Kobe Niku",
+    "SupplierID" : 4,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "18 - 500 g pkgs.",
+    "UnitPrice" : 97.0000,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 10,
+    "ProductName" : "Ikura",
+    "SupplierID" : 4,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 200 ml jars",
+    "UnitPrice" : 31.0000,
+    "UnitsInStock" : 31,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 11,
+    "ProductName" : "Queso Cabrales",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "1 kg pkg.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 30,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 12,
+    "ProductName" : "Queso Manchego La Pastora",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 86,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 13,
+    "ProductName" : "Konbu",
+    "SupplierID" : 6,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "2 kg box",
+    "UnitPrice" : 6.0000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 14,
+    "ProductName" : "Tofu",
+    "SupplierID" : 6,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "40 - 100 g pkgs.",
+    "UnitPrice" : 23.2500,
+    "UnitsInStock" : 35,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 15,
+    "ProductName" : "Genen Shouyu",
+    "SupplierID" : 6,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 250 ml bottles",
+    "UnitPrice" : 15.5000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 16,
+    "ProductName" : "Pavlova",
+    "SupplierID" : 7,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "32 - 500 g boxes",
+    "UnitPrice" : 17.4500,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 17,
+    "ProductName" : "Alice Mutton",
+    "SupplierID" : 7,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "20 - 1 kg tins",
+    "UnitPrice" : 39.0000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 18,
+    "ProductName" : "Carnarvon Tigers",
+    "SupplierID" : 7,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "16 kg pkg.",
+    "UnitPrice" : 62.5000,
+    "UnitsInStock" : 42,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 19,
+    "ProductName" : "Teatime Chocolate Biscuits",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 12 pieces",
+    "UnitPrice" : 9.2000,
+    "UnitsInStock" : 25,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 20,
+    "ProductName" : "Sir Rodney's Marmalade",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "30 gift boxes",
+    "UnitPrice" : 81.0000,
+    "UnitsInStock" : 40,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 21,
+    "ProductName" : "Sir Rodney's Scones",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 pkgs. x 4 pieces",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 3,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 22,
+    "ProductName" : "Gustaf's Knäckebröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 500 g pkgs.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 104,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 23,
+    "ProductName" : "Tunnbröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "12 - 250 g pkgs.",
+    "UnitPrice" : 9.0000,
+    "UnitsInStock" : 61,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 24,
+    "ProductName" : "Guaraná Fantástica",
+    "SupplierID" : 10,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 355 ml cans",
+    "UnitPrice" : 4.5000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 25,
+    "ProductName" : "NuNuCa Nuß-Nougat-Creme",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "20 - 450 g glasses",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 26,
+    "ProductName" : "Gumbär Gummibärchen",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 250 g bags",
+    "UnitPrice" : 31.2300,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 27,
+    "ProductName" : "Schoggi Schokolade",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 100 g pieces",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 49,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 28,
+    "ProductName" : "Rössle Sauerkraut",
+    "SupplierID" : 12,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "25 - 825 g cans",
+    "UnitPrice" : 45.6000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 29,
+    "ProductName" : "Thüringer Rostbratwurst",
+    "SupplierID" : 12,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "50 bags x 30 sausgs.",
+    "UnitPrice" : 123.7900,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 30,
+    "ProductName" : "Nord-Ost Matjeshering",
+    "SupplierID" : 13,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "10 - 200 g glasses",
+    "UnitPrice" : 25.8900,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 31,
+    "ProductName" : "Gorgonzola Telino",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "12 - 100 g pkgs",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 32,
+    "ProductName" : "Mascarpone Fabioli",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 32.0000,
+    "UnitsInStock" : 9,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 33,
+    "ProductName" : "Geitost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "500 g",
+    "UnitPrice" : 2.5000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 34,
+    "ProductName" : "Sasquatch Ale",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 111,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 35,
+    "ProductName" : "Steeleye Stout",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 36,
+    "ProductName" : "Inlagd Sill",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 250 g  jars",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 37,
+    "ProductName" : "Gravad lax",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 500 g pkgs.",
+    "UnitPrice" : 26.0000,
+    "UnitsInStock" : 11,
+    "UnitsOnOrder" : 50,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 38,
+    "ProductName" : "Côte de Blaye",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 75 cl bottles",
+    "UnitPrice" : 263.5000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 39,
+    "ProductName" : "Chartreuse verte",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "750 cc per bottle",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 69,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 40,
+    "ProductName" : "Boston Crab Meat",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 4 oz tins",
+    "UnitPrice" : 18.4000,
+    "UnitsInStock" : 123,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 41,
+    "ProductName" : "Jack's New England Clam Chowder",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 12 oz cans",
+    "UnitPrice" : 9.6500,
+    "UnitsInStock" : 85,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 42,
+    "ProductName" : "Singaporean Hokkien Fried Mee",
+    "SupplierID" : 20,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "32 - 1 kg pkgs.",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 43,
+    "ProductName" : "Ipoh Coffee",
+    "SupplierID" : 20,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "16 - 500 g tins",
+    "UnitPrice" : 46.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 44,
+    "ProductName" : "Gula Malacca",
+    "SupplierID" : 20,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "20 - 2 kg bags",
+    "UnitPrice" : 19.4500,
+    "UnitsInStock" : 27,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 45,
+    "ProductName" : "Rogede sild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "1k pkg.",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 5,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 46,
+    "ProductName" : "Spegesild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "4 - 450 g glasses",
+    "UnitPrice" : 12.0000,
+    "UnitsInStock" : 95,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 47,
+    "ProductName" : "Zaanse koeken",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 - 4 oz boxes",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 48,
+    "ProductName" : "Chocolade",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 pkgs.",
+    "UnitPrice" : 12.7500,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 49,
+    "ProductName" : "Maxilaku",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 - 50 g pkgs.",
+    "UnitPrice" : 20.0000,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 60,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 50,
+    "ProductName" : "Valkoinen suklaa",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "12 - 100 g bars",
+    "UnitPrice" : 16.2500,
+    "UnitsInStock" : 65,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 51,
+    "ProductName" : "Manjimup Dried Apples",
+    "SupplierID" : 24,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "50 - 300 g pkgs.",
+    "UnitPrice" : 53.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 52,
+    "ProductName" : "Filo Mix",
+    "SupplierID" : 24,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "16 - 2 kg boxes",
+    "UnitPrice" : 7.0000,
+    "UnitsInStock" : 38,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 53,
+    "ProductName" : "Perth Pasties",
+    "SupplierID" : 24,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "48 pieces",
+    "UnitPrice" : 32.8000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 54,
+    "ProductName" : "Tourtière",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "16 pies",
+    "UnitPrice" : 7.4500,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 55,
+    "ProductName" : "Pâté chinois",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "24 boxes x 2 pies",
+    "UnitPrice" : 24.0000,
+    "UnitsInStock" : 115,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 56,
+    "ProductName" : "Gnocchi di nonna Alice",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 57,
+    "ProductName" : "Ravioli Angelo",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 19.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 58,
+    "ProductName" : "Escargots de Bourgogne",
+    "SupplierID" : 27,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 pieces",
+    "UnitPrice" : 13.2500,
+    "UnitsInStock" : 62,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 59,
+    "ProductName" : "Raclette Courdavault",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 55.0000,
+    "UnitsInStock" : 79,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 60,
+    "ProductName" : "Camembert Pierrot",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "15 - 300 g rounds",
+    "UnitPrice" : 34.0000,
+    "UnitsInStock" : 19,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 61,
+    "ProductName" : "Sirop d'érable",
+    "SupplierID" : 29,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 500 ml bottles",
+    "UnitPrice" : 28.5000,
+    "UnitsInStock" : 113,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 62,
+    "ProductName" : "Tarte au sucre",
+    "SupplierID" : 29,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "48 pies",
+    "UnitPrice" : 49.3000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 63,
+    "ProductName" : "Vegie-spread",
+    "SupplierID" : 7,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "15 - 625 g jars",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 64,
+    "ProductName" : "Wimmers gute Semmelknödel",
+    "SupplierID" : 12,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "20 bags x 4 pieces",
+    "UnitPrice" : 33.2500,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 80,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 65,
+    "ProductName" : "Louisiana Fiery Hot Pepper Sauce",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "32 - 8 oz bottles",
+    "UnitPrice" : 21.0500,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 66,
+    "ProductName" : "Louisiana Hot Spiced Okra",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 8 oz jars",
+    "UnitPrice" : 17.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 100,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 67,
+    "ProductName" : "Laughing Lumberjack Lager",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 52,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 68,
+    "ProductName" : "Scottish Longbreads",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 8 pieces",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 69,
+    "ProductName" : "Gudbrandsdalsost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 kg pkg.",
+    "UnitPrice" : 36.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 70,
+    "ProductName" : "Outback Lager",
+    "SupplierID" : 7,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 355 ml bottles",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 71,
+    "ProductName" : "Flotemysost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 21.5000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 72,
+    "ProductName" : "Mozzarella di Giovanni",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 34.8000,
+    "UnitsInStock" : 14,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 73,
+    "ProductName" : "Röd Kaviar",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 150 g jars",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 101,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 74,
+    "ProductName" : "Longlife Tofu",
+    "SupplierID" : 4,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 20,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 75,
+    "ProductName" : "Rhönbräu Klosterbier",
+    "SupplierID" : 12,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 0.5 l bottles",
+    "UnitPrice" : 7.7500,
+    "UnitsInStock" : 125,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 76,
+    "ProductName" : "Lakkalikööri",
+    "SupplierID" : 23,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "500 ml",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 57,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 77,
+    "ProductName" : "Original Frankfurter grüne Soße",
+    "SupplierID" : 12,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 boxes",
+    "UnitPrice" : 13.0000,
+    "UnitsInStock" : 32,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}]
diff --git a/vue-options-api-demos/listview/overview/contacts.json b/vue-options-api-demos/listview/overview/contacts.json
new file mode 100644
index 00000000..3c97d01d
--- /dev/null
+++ b/vue-options-api-demos/listview/overview/contacts.json
@@ -0,0 +1,45 @@
+[
+    {
+      "id": 1,
+      "name": "Jenson Delaney",
+      "email": "jenson.delany@mail.com",
+      "messagesCount": 3
+    },
+    {
+      "id": 2,
+      "name": "Amaya Coffey",
+      "email": "amaya.coffey@mail.com",
+      "messagesCount": 1
+    },
+    {
+      "id": 3,
+      "name": "Habib Joyce",
+      "email": "habib.joyce@mail.com",
+      "messagesCount": 5
+    },
+    {
+      "id": 4,
+      "name": "Lilly-Ann Roche",
+      "email": "lilly-ann.roche@mail.com",
+      "messagesCount": 8
+    },
+    {
+      "id": 5,
+      "name": "Giulia Haworth",
+      "email": "giulia.haworth@mail.com",
+      "messagesCount": 3
+    },
+    {
+      "id": 6,
+      "name": "Dawson Humphrey",
+      "email": "dawson.humphrey@mail.com",
+      "messagesCount": 2
+    },
+    {
+      "id": 7,
+      "name": "Reilly McCullough",
+      "email": "reilly.mccullough@mail.com",
+      "messagesCount": 3
+    }
+  ]
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/listview/overview/main.js b/vue-options-api-demos/listview/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/listview/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/listview/overview/main.vue b/vue-options-api-demos/listview/overview/main.vue
new file mode 100644
index 00000000..f8c839bf
--- /dev/null
+++ b/vue-options-api-demos/listview/overview/main.vue
@@ -0,0 +1,96 @@
+<template>
+  <ListView
+    :style="{ width: '100%' }"
+    :data-items="contacts"
+    :item="'myItem'"
+    :header="'myHeader'"
+    :footer="'myFooter'"
+  >
+    <template v-slot:myItem="{ props }">
+      <div class="row p-2 border-bottom align-middle" :style="{ margin: 0 }">
+        <div class="col-2">
+          <Avatar type="image" :rounded="'full'">
+            <img
+              :src="`${contactsBaseUrl}${props.dataItem.id}.png`"
+              :alt="'Avatar Image'"
+            />
+          </Avatar>
+        </div>
+        <div class="col-6">
+          <h2
+            :style="{
+              'font-size': '14px',
+              color: '#454545',
+              marginBottom: '0px',
+            }"
+            class="text-uppercase"
+          >
+            {{ props.dataItem.name }}
+          </h2>
+          <div :style="{ 'font-size': '12px', color: '#a0a0a0' }">
+            {{ props.dataItem.email }}
+          </div>
+        </div>
+        <div class="col-4">
+          <div
+            class="k-chip k-chip-md k-rounded-md k-chip-solid k-chip-solid-base"
+          >
+            <div class="k-chip-content">
+              {{ props.dataItem.messagesCount }} new messages
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-slot:myHeader>
+      <ListViewHeader
+        :style="{ color: 'rgb(160, 160, 160)', 'font-size': '14px' }"
+        class="pl-3 pb-2 pt-2"
+      >
+        Contact list
+      </ListViewHeader>
+    </template>
+    <template v-slot:myFooter>
+      <ListViewFooter
+        :style="{ color: 'rgb(160, 160, 160)', 'font-size': '14px' }"
+        class="pl-3 pb-2 pt-2"
+      >
+        {{ messages }} unread messages in total
+      </ListViewFooter>
+    </template>
+  </ListView>
+</template>
+<script>
+import {
+  ListView,
+  ListViewFooter,
+  ListViewHeader,
+} from '@progress/kendo-vue-listview';
+import { Avatar } from '@progress/kendo-vue-layout';
+import contacts from './contacts.json';
+
+const contactsBaseUrl = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/listview/contacts/';
+
+export default {
+  components: {
+    ListView,
+    ListViewFooter,
+    ListViewHeader,
+    Avatar,
+  },
+  computed: {
+    messages() {
+      return this.contacts.reduce((acc, el) => {
+        acc = acc + el.messagesCount;
+        return acc;
+      }, 0);
+    },
+  },
+  data() {
+    return {
+      contactsBaseUrl,
+      contacts: contacts,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/listview/paging/articles.json b/vue-options-api-demos/listview/paging/articles.json
new file mode 100644
index 00000000..fc3e9449
--- /dev/null
+++ b/vue-options-api-demos/listview/paging/articles.json
@@ -0,0 +1,152 @@
+[
+    {
+        "Title": "How to Make Games for Everyone",
+        "Subtitle": "Why the new player’s experience matters",
+        "Date": "Jan 21,  2020",
+        "Image": "1-220x140.png"
+    },
+    {
+        "Title": "How to design with love?",
+        "Subtitle": "7 tips to fall in love with your job.",
+        "Date": "Feb 24,  2020",
+        "Image": "2-220x140.png"
+    },
+    {
+        "Title": "A good designer is an Emotional Polymath — what?",
+        "Subtitle": "Polymaths describes a person whose expertise spans a significant number of realities. ",
+        "Date": "Jan 16,  2020",
+        "Image": "3-220x140.png"
+    },
+    {
+        "Title": "Why Minimalist Logos Are the Best for Big Business",
+        "Subtitle": "Analyzing logos from giants like Netflix, Youtube, and Google",
+        "Date": "Feb 20, 2020",
+        "Image": "4-220x140.png"
+    },
+    {
+        "Title": "Money, Likes, and Memes Are All the Same Thing",
+        "Subtitle": "How the token economy has replaced cash with Twitch emotes and Instagram likes",
+        "Date": "Feb 13, 2020",
+        "Image": "5-220x140.png"
+    },
+    {
+        "Title": "From UX to UI development",
+        "Subtitle": "The transition between the stages of the digital design process",
+        "Date": "Jan 11, 2020",
+        "Image": "6-220x140.png"
+    },
+    {
+        "Title": "7 Things Mentally Strong People Avoid Doing",
+        "Subtitle": "Become your own mental strength coach",
+        "Date": "Jan 17, 2020",
+        "Image": "7-220x140.png"
+    },
+    {
+        "Title": "How to Solve Your 'Lack of Motivation' Problem",
+        "Subtitle": "Hint: Understand that lack of motivation is a lie.",
+        "Date": "Mar 5, 2020",
+        "Image": "8-220x140.png"
+    },
+    {
+        "Title": "Make it a habit to externalize your design work",
+        "Subtitle": "Move faster by revealing the process through sketches, whiteboards and by printing your work out",
+        "Date": "Feb 12, 2020",
+        "Image": "9-220x140.png"
+    },
+    {
+        "Title": "Morning Routines That Will Help You Feel More Energized",
+        "Subtitle": "Skip your cup of coffee and do these instead.",
+        "Date": "Feb 19, 2020",
+        "Image": "10-220x140.png"
+    },
+    {
+        "Title": "What Color is Your Name? A New Synesthesia Tool Will Show You",
+        "Subtitle": "Here's your chance to see how people with synesthesia perceive letters and numbers",
+        "Date": "Feb 3, 2020",
+        "Image": "11-220x140.png"
+    },
+    {
+        "Title": "When it comes to design, your eyes are way better than maths",
+        "Subtitle": "A quick look at how mathematics is not the ultimate source of design thruth",
+        "Date": "Feb 22, 2020",
+        "Image": "12-220x140.png"
+    },
+    {
+        "Title": "Microinteractions: small details matter",
+        "Subtitle": "Microinteractions are the small details that exist inside features. ",
+        "Date": "Jan 7, 2020",
+        "Image": "13-220x140.png"
+    },
+    {
+        "Title": "Key principles in animation",
+        "Subtitle": "Animated interfaces are full of life and emotions. Animations add life to static things.",
+        "Date": "Mar 24, 2020",
+        "Image": "14-220x140.png"
+    },
+    {
+        "Title": "The 60-30-10 Rule of Time Management",
+        "Subtitle": "A simple framework for allocating your time.",
+        "Date": "Mar 13, 2020",
+        "Image": "15-220x140.png"
+    },
+    {
+        "Title": "Real-time mobile UI/UX prototyping with Figma Mirror",
+        "Subtitle": "Today many design teams are transferring their design system from Sketch and Adobe XD to Figma.",
+        "Date": "Jan 30, 2020",
+        "Image": "16-220x140.png"
+    },
+    {
+        "Title": "5 apps that will turn your mobile phone into a productivity machine",
+        "Subtitle": "Instead of letting your mobile device become detrimental to your productivity, here are tips to turn your phone into a productivity machine.",
+        "Date": "Jan 9, 2020",
+        "Image": "17-220x140.png"
+    },
+    {
+        "Title": "Lessons I've Learned From Studying Money for 10 Years",
+        "Subtitle": "Master money, and you'll be able to do more work you enjoy and less work of the bill-paying variety.",
+        "Date": "Mar 14, 2020",
+        "Image": "18-220x140.png"
+    },
+    {
+        "Title": "The 5-Year Rule: How to Create the Future You Want",
+        "Subtitle": "A proven process for building your dream life",
+        "Date": "Feb 11, 2020",
+        "Image": "19-220x140.png"
+    },
+    {
+        "Title": "Creativity is only impressive when there's restrictions",
+        "Subtitle": "Why 'form follows function' is a valid design principle in today's web design landscape",
+        "Date": "Feb 18, 2020",
+        "Image": "20-220x140.png"
+    },
+    {
+        "Title": "3 areas of focus to becoming a better Product Designer",
+        "Subtitle": "Close Sketch. Stop browsing Dribbble. Forget color for a second.",
+        "Date": "Jan 23, 2020",
+        "Image": "21-220x140.png"
+    },
+    {
+        "Title": "The secret of usable design",
+        "Subtitle": "Improving usability through emotional, reflective and visceral design.",
+        "Date": "Feb 26, 2020",
+        "Image": "22-220x140.png"
+    },
+    {
+        "Title": "When You Eat Is More Important Than What You Eat",
+        "Subtitle": "A practical guide to time-restricted eating",
+        "Date": "Mar 23, 2020",
+        "Image": "23-220x140.png"
+    },
+    {
+        "Title": "Breaking into Design",
+        "Subtitle": "How to grow as a designer and land your first position in the field",
+        "Date": "Mar 4, 2020",
+        "Image": "24-220x140.png"
+    },
+    {
+        "Title": "What's the Difference Between Brand and Brand Identity",
+        "Subtitle": "Semantics and the Quest for Truth",
+        "Date": "Feb 16, 2020",
+        "Image": "25-220x140.png"
+    }
+]
diff --git a/vue-options-api-demos/listview/paging/main.js b/vue-options-api-demos/listview/paging/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/listview/paging/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/listview/paging/main.vue b/vue-options-api-demos/listview/paging/main.vue
new file mode 100644
index 00000000..f6075e6f
--- /dev/null
+++ b/vue-options-api-demos/listview/paging/main.vue
@@ -0,0 +1,111 @@
+<template>
+  <ListView
+    :style="{ width: '100%' }"
+    :data-items="articles.slice(skip, skip + take)"
+    :item="'myItem'"
+    :header="'myHeader'"
+  >
+    <template v-slot:myItem="{ props }">
+      <Card
+        :style="{
+          padding: '20px 24px',
+          border: 'none',
+          borderBottom: '1px solid rgba(0,0,0,0.12)',
+        }"
+        :orientation="'horizontal'"
+        class="d-flex justify-content-between"
+      >
+        <div class="k-vbox k-column">
+          <div :style="{ padding: '0 8px', marginRight: '3rem' }">
+            <CardTitle :style="{ fontSize: '18px' }">{{
+              props.dataItem.Title
+            }}</CardTitle>
+            <CardSubtitle :style="{ fontSize: '14px', marginTop: '0px' }">
+              {{ props.dataItem.Subtitle }}
+            </CardSubtitle>
+            <CardSubtitle :style="{ fontSize: '12px' }">{{
+              props.dataItem.Date
+            }}</CardSubtitle>
+          </div>
+          <CardActions :style="{ padding: '0px' }">
+            <KButton :rounded="'medium'" :fill-mode="'flat'" :size="'medium'">
+              Save for later
+            </KButton>
+            <KButton :rounded="'medium'" :fill-mode="'flat'" :size="'medium'">
+              Add to favorites
+            </KButton>
+          </CardActions>
+        </div>
+        <CardImage
+          :src="`${articlesBaseUrl}${props.dataItem.Image}`"
+          :style="{ width: '220px', height: '140px', maxWidth: '220px' }"
+        />
+      </Card>
+    </template>
+    <template v-slot:myHeader>
+      <ListViewHeader
+        :style="{ color: 'rgb(160, 160, 160)', fontSize: '14px' }"
+        class="pl-4 pb-2 pt-2"
+      >
+        TRENDING ARTICLES THIS WEEK
+      </ListViewHeader>
+    </template>
+  </ListView>
+
+  <Pager
+    :skip="skip"
+    :take="take"
+    @pagechange="handlePageChange"
+    :total="articles.length"
+  />
+</template>
+<script>
+import { ListView, ListViewHeader } from '@progress/kendo-vue-listview';
+import { Button } from '@progress/kendo-vue-buttons';
+import {
+  Card,
+  CardTitle,
+  CardImage,
+  CardSubtitle,
+  CardActions,
+} from '@progress/kendo-vue-layout';
+import { Pager } from '@progress/kendo-vue-data-tools';
+import articles from './articles.json';
+
+const articlesBaseUrl = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/listview/articles/';
+
+export default {
+  components: {
+    ListView,
+    ListViewHeader,
+    Card,
+    CardTitle,
+    CardImage,
+    CardSubtitle,
+    CardActions,
+    Pager,
+    KButton: Button,
+  },
+  data() {
+    return {
+      articlesBaseUrl,
+      articles: articles,
+      skip: 0,
+      take: 3,
+    };
+  },
+  methods: {
+    handlePageChange(e) {
+      this.skip = e.skip;
+    },
+  },
+};
+</script>
+<style>
+.k-card:last-of-type {
+  border: none !important;
+}
+.k-pager-wrap {
+  border-top: none;
+}
+</style>
diff --git a/vue-options-api-demos/listview/shared/articles.json b/vue-options-api-demos/listview/shared/articles.json
new file mode 100644
index 00000000..fc3e9449
--- /dev/null
+++ b/vue-options-api-demos/listview/shared/articles.json
@@ -0,0 +1,152 @@
+[
+    {
+        "Title": "How to Make Games for Everyone",
+        "Subtitle": "Why the new player’s experience matters",
+        "Date": "Jan 21,  2020",
+        "Image": "1-220x140.png"
+    },
+    {
+        "Title": "How to design with love?",
+        "Subtitle": "7 tips to fall in love with your job.",
+        "Date": "Feb 24,  2020",
+        "Image": "2-220x140.png"
+    },
+    {
+        "Title": "A good designer is an Emotional Polymath — what?",
+        "Subtitle": "Polymaths describes a person whose expertise spans a significant number of realities. ",
+        "Date": "Jan 16,  2020",
+        "Image": "3-220x140.png"
+    },
+    {
+        "Title": "Why Minimalist Logos Are the Best for Big Business",
+        "Subtitle": "Analyzing logos from giants like Netflix, Youtube, and Google",
+        "Date": "Feb 20, 2020",
+        "Image": "4-220x140.png"
+    },
+    {
+        "Title": "Money, Likes, and Memes Are All the Same Thing",
+        "Subtitle": "How the token economy has replaced cash with Twitch emotes and Instagram likes",
+        "Date": "Feb 13, 2020",
+        "Image": "5-220x140.png"
+    },
+    {
+        "Title": "From UX to UI development",
+        "Subtitle": "The transition between the stages of the digital design process",
+        "Date": "Jan 11, 2020",
+        "Image": "6-220x140.png"
+    },
+    {
+        "Title": "7 Things Mentally Strong People Avoid Doing",
+        "Subtitle": "Become your own mental strength coach",
+        "Date": "Jan 17, 2020",
+        "Image": "7-220x140.png"
+    },
+    {
+        "Title": "How to Solve Your 'Lack of Motivation' Problem",
+        "Subtitle": "Hint: Understand that lack of motivation is a lie.",
+        "Date": "Mar 5, 2020",
+        "Image": "8-220x140.png"
+    },
+    {
+        "Title": "Make it a habit to externalize your design work",
+        "Subtitle": "Move faster by revealing the process through sketches, whiteboards and by printing your work out",
+        "Date": "Feb 12, 2020",
+        "Image": "9-220x140.png"
+    },
+    {
+        "Title": "Morning Routines That Will Help You Feel More Energized",
+        "Subtitle": "Skip your cup of coffee and do these instead.",
+        "Date": "Feb 19, 2020",
+        "Image": "10-220x140.png"
+    },
+    {
+        "Title": "What Color is Your Name? A New Synesthesia Tool Will Show You",
+        "Subtitle": "Here's your chance to see how people with synesthesia perceive letters and numbers",
+        "Date": "Feb 3, 2020",
+        "Image": "11-220x140.png"
+    },
+    {
+        "Title": "When it comes to design, your eyes are way better than maths",
+        "Subtitle": "A quick look at how mathematics is not the ultimate source of design thruth",
+        "Date": "Feb 22, 2020",
+        "Image": "12-220x140.png"
+    },
+    {
+        "Title": "Microinteractions: small details matter",
+        "Subtitle": "Microinteractions are the small details that exist inside features. ",
+        "Date": "Jan 7, 2020",
+        "Image": "13-220x140.png"
+    },
+    {
+        "Title": "Key principles in animation",
+        "Subtitle": "Animated interfaces are full of life and emotions. Animations add life to static things.",
+        "Date": "Mar 24, 2020",
+        "Image": "14-220x140.png"
+    },
+    {
+        "Title": "The 60-30-10 Rule of Time Management",
+        "Subtitle": "A simple framework for allocating your time.",
+        "Date": "Mar 13, 2020",
+        "Image": "15-220x140.png"
+    },
+    {
+        "Title": "Real-time mobile UI/UX prototyping with Figma Mirror",
+        "Subtitle": "Today many design teams are transferring their design system from Sketch and Adobe XD to Figma.",
+        "Date": "Jan 30, 2020",
+        "Image": "16-220x140.png"
+    },
+    {
+        "Title": "5 apps that will turn your mobile phone into a productivity machine",
+        "Subtitle": "Instead of letting your mobile device become detrimental to your productivity, here are tips to turn your phone into a productivity machine.",
+        "Date": "Jan 9, 2020",
+        "Image": "17-220x140.png"
+    },
+    {
+        "Title": "Lessons I've Learned From Studying Money for 10 Years",
+        "Subtitle": "Master money, and you'll be able to do more work you enjoy and less work of the bill-paying variety.",
+        "Date": "Mar 14, 2020",
+        "Image": "18-220x140.png"
+    },
+    {
+        "Title": "The 5-Year Rule: How to Create the Future You Want",
+        "Subtitle": "A proven process for building your dream life",
+        "Date": "Feb 11, 2020",
+        "Image": "19-220x140.png"
+    },
+    {
+        "Title": "Creativity is only impressive when there's restrictions",
+        "Subtitle": "Why 'form follows function' is a valid design principle in today's web design landscape",
+        "Date": "Feb 18, 2020",
+        "Image": "20-220x140.png"
+    },
+    {
+        "Title": "3 areas of focus to becoming a better Product Designer",
+        "Subtitle": "Close Sketch. Stop browsing Dribbble. Forget color for a second.",
+        "Date": "Jan 23, 2020",
+        "Image": "21-220x140.png"
+    },
+    {
+        "Title": "The secret of usable design",
+        "Subtitle": "Improving usability through emotional, reflective and visceral design.",
+        "Date": "Feb 26, 2020",
+        "Image": "22-220x140.png"
+    },
+    {
+        "Title": "When You Eat Is More Important Than What You Eat",
+        "Subtitle": "A practical guide to time-restricted eating",
+        "Date": "Mar 23, 2020",
+        "Image": "23-220x140.png"
+    },
+    {
+        "Title": "Breaking into Design",
+        "Subtitle": "How to grow as a designer and land your first position in the field",
+        "Date": "Mar 4, 2020",
+        "Image": "24-220x140.png"
+    },
+    {
+        "Title": "What's the Difference Between Brand and Brand Identity",
+        "Subtitle": "Semantics and the Quest for Truth",
+        "Date": "Feb 16, 2020",
+        "Image": "25-220x140.png"
+    }
+]
diff --git a/vue-options-api-demos/listview/shared/contacts.json b/vue-options-api-demos/listview/shared/contacts.json
new file mode 100644
index 00000000..3c97d01d
--- /dev/null
+++ b/vue-options-api-demos/listview/shared/contacts.json
@@ -0,0 +1,45 @@
+[
+    {
+      "id": 1,
+      "name": "Jenson Delaney",
+      "email": "jenson.delany@mail.com",
+      "messagesCount": 3
+    },
+    {
+      "id": 2,
+      "name": "Amaya Coffey",
+      "email": "amaya.coffey@mail.com",
+      "messagesCount": 1
+    },
+    {
+      "id": 3,
+      "name": "Habib Joyce",
+      "email": "habib.joyce@mail.com",
+      "messagesCount": 5
+    },
+    {
+      "id": 4,
+      "name": "Lilly-Ann Roche",
+      "email": "lilly-ann.roche@mail.com",
+      "messagesCount": 8
+    },
+    {
+      "id": 5,
+      "name": "Giulia Haworth",
+      "email": "giulia.haworth@mail.com",
+      "messagesCount": 3
+    },
+    {
+      "id": 6,
+      "name": "Dawson Humphrey",
+      "email": "dawson.humphrey@mail.com",
+      "messagesCount": 2
+    },
+    {
+      "id": 7,
+      "name": "Reilly McCullough",
+      "email": "reilly.mccullough@mail.com",
+      "messagesCount": 3
+    }
+  ]
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/listview/shared/destinations.json b/vue-options-api-demos/listview/shared/destinations.json
new file mode 100644
index 00000000..542eb216
--- /dev/null
+++ b/vue-options-api-demos/listview/shared/destinations.json
@@ -0,0 +1,117 @@
+[
+    {
+        "Destination": "BRUSSELS, BELGIUM",
+        "Text": "Chocolate, beer, music and surrealism.",
+        "Image": "brussels-180x150.png"
+    },
+    {
+        "Destination": "PORTO, PORTUGAL",
+        "Text": "Taste it, drink it, eat it, love it. Bem-vindo ao Porto!",
+        "Image": "porto-180x150.png"
+    },
+    {
+        "Destination": "MALAGA, SPAIN",
+        "Text": "Enjoy the perfect climat.",
+        "Image": "malaga-180x150.png"
+    },
+    {
+        "Destination": "BUDAPEST, HUNGARY",
+        "Text": "One of the most exciting cities in the world.",
+        "Image": "budapest-180x150.png"
+    },
+    {
+        "Destination": "BRATISLAVA, SLOVAKIA",
+        "Text": "A modern city on the Danube.",
+        "Image": "bratislava-180x150.png"
+    },
+    {
+        "Destination": "FLORENCE, ITALY",
+        "Text": "Love and culture are everywhere!",
+        "Image": "florence-180x150.png"
+    },
+    {
+        "Destination": "POZNAN, POLAND",
+        "Text": "A unique heritage with rich cultural offer.",
+        "Image": "poznan-180x150.png"
+    },
+    {
+        "Destination": "ATHENS, GREECE",
+        "Text": "The biggest open-air museum in Europe.",
+        "Image": "athens-180x150.png"
+    },
+    {
+        "Destination": "SOFIA, BULGARIA",
+        "Text": "One of Europe's oldest cities.",
+        "Image": "sofia-180x150.png"
+    },
+    {
+        "Destination": "BORDEAUX, FRANCE",
+        "Text": "Discover exciting new facets of its character.",
+        "Image": "bordeaux-180x150.png"
+    },
+    {
+        "Destination": "GENEVA, SWITZERLAND",
+        "Text": "One of the most welcoming cities in Europe.",
+        "Image": "geneva-180x150.png"
+    },
+    {
+        "Destination": "RIGA, LATVIA",
+        "Text": "At the crossroads of various nations and cultures.",
+        "Image": "riga-180x150.png"
+    },
+    {
+        "Destination": "SEVILLE, SPAIN",
+        "Text": "Seville. Any time of year…",
+        "Image": "seville-180x150.png"
+    },
+    {
+        "Destination": "COLMAR, FRANCE",
+        "Text": "A condensed version of the Alsace region.",
+        "Image": "colmar-180x150.png"
+    },
+    {
+        "Destination": "VIENNA, AUSTRIA",
+        "Text": "The Giant Ferris Wheel is awaiting you.",
+        "Image": "vienna-180x150.png"
+    },
+    {
+        "Destination": "MONTPELLIER, FRANCE",
+        "Text": "Smart, Mediterranean, attractive, welcoming and festive.",
+        "Image": "montpellier-180x150.png"
+    },
+    {
+        "Destination": "VALENCIA, SPAIN",
+        "Text": "Sun, culture, history and future. ",
+        "Image": "valencia-180x150.png"
+    },
+    {
+        "Destination": "BARCELONA, SPAIN",
+        "Text": "Barcelona never sleeps.",
+        "Image": "barcelona-180x150.png"
+    },
+    {
+        "Destination": "MILAN, ITALY",
+        "Text": "The hub of Italian culture",
+        "Image": "milan-180x150.png"
+    },
+    {
+        "Destination": "GDANSK, POLAND",
+        "Text": "You'll be amazed by the beauty of Gdansk.",
+        "Image": "gdansk-180x150.png"
+    },
+    {
+        "Destination": "ROME, ITALY",
+        "Text": "Treat yourself to a stay in the Eternal City.",
+        "Image": "rome-180x150.png"
+    },
+    {
+        "Destination": "EDINBURGH, SCOTLAND",
+        "Text": "Shopping, dining & architectural splendour.",
+        "Image": "edinburgh-180x150.png"
+    },
+    {
+        "Destination": "LISBON, PORTUGAL",
+        "Text": "The pure pleasure of being in one of the best cities in the world.",
+        "Image": "lisbon-180x150.png"
+    }
+]
diff --git a/vue-options-api-demos/listview/shared/products.json b/vue-options-api-demos/listview/shared/products.json
new file mode 100644
index 00000000..3da39edd
--- /dev/null
+++ b/vue-options-api-demos/listview/shared/products.json
@@ -0,0 +1,1234 @@
+
+[{
+    "ProductID" : 1,
+    "ProductName" : "Chai",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "10 boxes x 20 bags",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 2,
+    "ProductName" : "Chang",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 3,
+    "ProductName" : "Aniseed Syrup",
+    "SupplierID" : 1,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 550 ml bottles",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 13,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 4,
+    "ProductName" : "Chef Anton's Cajun Seasoning",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "48 - 6 oz jars",
+    "UnitPrice" : 22.0000,
+    "UnitsInStock" : 53,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 5,
+    "ProductName" : "Chef Anton's Gumbo Mix",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "36 boxes",
+    "UnitPrice" : 21.3500,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 6,
+    "ProductName" : "Grandma's Boysenberry Spread",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 8 oz jars",
+    "UnitPrice" : 25.0000,
+    "UnitsInStock" : 120,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 7,
+    "ProductName" : "Uncle Bob's Organic Dried Pears",
+    "SupplierID" : 3,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "12 - 1 lb pkgs.",
+    "UnitPrice" : 30.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 8,
+    "ProductName" : "Northwoods Cranberry Sauce",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 12 oz jars",
+    "UnitPrice" : 40.0000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 9,
+    "ProductName" : "Mishi Kobe Niku",
+    "SupplierID" : 4,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "18 - 500 g pkgs.",
+    "UnitPrice" : 97.0000,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 10,
+    "ProductName" : "Ikura",
+    "SupplierID" : 4,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 200 ml jars",
+    "UnitPrice" : 31.0000,
+    "UnitsInStock" : 31,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 11,
+    "ProductName" : "Queso Cabrales",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "1 kg pkg.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 30,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 12,
+    "ProductName" : "Queso Manchego La Pastora",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 86,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 13,
+    "ProductName" : "Konbu",
+    "SupplierID" : 6,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "2 kg box",
+    "UnitPrice" : 6.0000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 14,
+    "ProductName" : "Tofu",
+    "SupplierID" : 6,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "40 - 100 g pkgs.",
+    "UnitPrice" : 23.2500,
+    "UnitsInStock" : 35,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 15,
+    "ProductName" : "Genen Shouyu",
+    "SupplierID" : 6,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 250 ml bottles",
+    "UnitPrice" : 15.5000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 16,
+    "ProductName" : "Pavlova",
+    "SupplierID" : 7,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "32 - 500 g boxes",
+    "UnitPrice" : 17.4500,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 17,
+    "ProductName" : "Alice Mutton",
+    "SupplierID" : 7,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "20 - 1 kg tins",
+    "UnitPrice" : 39.0000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 18,
+    "ProductName" : "Carnarvon Tigers",
+    "SupplierID" : 7,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "16 kg pkg.",
+    "UnitPrice" : 62.5000,
+    "UnitsInStock" : 42,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 19,
+    "ProductName" : "Teatime Chocolate Biscuits",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 12 pieces",
+    "UnitPrice" : 9.2000,
+    "UnitsInStock" : 25,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 20,
+    "ProductName" : "Sir Rodney's Marmalade",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "30 gift boxes",
+    "UnitPrice" : 81.0000,
+    "UnitsInStock" : 40,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 21,
+    "ProductName" : "Sir Rodney's Scones",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 pkgs. x 4 pieces",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 3,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 22,
+    "ProductName" : "Gustaf's Knäckebröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 500 g pkgs.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 104,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 23,
+    "ProductName" : "Tunnbröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "12 - 250 g pkgs.",
+    "UnitPrice" : 9.0000,
+    "UnitsInStock" : 61,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 24,
+    "ProductName" : "Guaraná Fantástica",
+    "SupplierID" : 10,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 355 ml cans",
+    "UnitPrice" : 4.5000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 25,
+    "ProductName" : "NuNuCa Nuß-Nougat-Creme",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "20 - 450 g glasses",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 26,
+    "ProductName" : "Gumbär Gummibärchen",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 250 g bags",
+    "UnitPrice" : 31.2300,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 27,
+    "ProductName" : "Schoggi Schokolade",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 100 g pieces",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 49,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 28,
+    "ProductName" : "Rössle Sauerkraut",
+    "SupplierID" : 12,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "25 - 825 g cans",
+    "UnitPrice" : 45.6000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 29,
+    "ProductName" : "Thüringer Rostbratwurst",
+    "SupplierID" : 12,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "50 bags x 30 sausgs.",
+    "UnitPrice" : 123.7900,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 30,
+    "ProductName" : "Nord-Ost Matjeshering",
+    "SupplierID" : 13,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "10 - 200 g glasses",
+    "UnitPrice" : 25.8900,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 31,
+    "ProductName" : "Gorgonzola Telino",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "12 - 100 g pkgs",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 32,
+    "ProductName" : "Mascarpone Fabioli",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 32.0000,
+    "UnitsInStock" : 9,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 33,
+    "ProductName" : "Geitost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "500 g",
+    "UnitPrice" : 2.5000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 34,
+    "ProductName" : "Sasquatch Ale",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 111,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 35,
+    "ProductName" : "Steeleye Stout",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 36,
+    "ProductName" : "Inlagd Sill",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 250 g  jars",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 37,
+    "ProductName" : "Gravad lax",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 500 g pkgs.",
+    "UnitPrice" : 26.0000,
+    "UnitsInStock" : 11,
+    "UnitsOnOrder" : 50,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 38,
+    "ProductName" : "Côte de Blaye",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 75 cl bottles",
+    "UnitPrice" : 263.5000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 39,
+    "ProductName" : "Chartreuse verte",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "750 cc per bottle",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 69,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 40,
+    "ProductName" : "Boston Crab Meat",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 4 oz tins",
+    "UnitPrice" : 18.4000,
+    "UnitsInStock" : 123,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 41,
+    "ProductName" : "Jack's New England Clam Chowder",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 12 oz cans",
+    "UnitPrice" : 9.6500,
+    "UnitsInStock" : 85,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 42,
+    "ProductName" : "Singaporean Hokkien Fried Mee",
+    "SupplierID" : 20,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "32 - 1 kg pkgs.",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 43,
+    "ProductName" : "Ipoh Coffee",
+    "SupplierID" : 20,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "16 - 500 g tins",
+    "UnitPrice" : 46.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 44,
+    "ProductName" : "Gula Malacca",
+    "SupplierID" : 20,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "20 - 2 kg bags",
+    "UnitPrice" : 19.4500,
+    "UnitsInStock" : 27,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 45,
+    "ProductName" : "Rogede sild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "1k pkg.",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 5,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 46,
+    "ProductName" : "Spegesild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "4 - 450 g glasses",
+    "UnitPrice" : 12.0000,
+    "UnitsInStock" : 95,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 47,
+    "ProductName" : "Zaanse koeken",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 - 4 oz boxes",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 48,
+    "ProductName" : "Chocolade",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 pkgs.",
+    "UnitPrice" : 12.7500,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 49,
+    "ProductName" : "Maxilaku",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 - 50 g pkgs.",
+    "UnitPrice" : 20.0000,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 60,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 50,
+    "ProductName" : "Valkoinen suklaa",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "12 - 100 g bars",
+    "UnitPrice" : 16.2500,
+    "UnitsInStock" : 65,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 51,
+    "ProductName" : "Manjimup Dried Apples",
+    "SupplierID" : 24,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "50 - 300 g pkgs.",
+    "UnitPrice" : 53.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 52,
+    "ProductName" : "Filo Mix",
+    "SupplierID" : 24,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "16 - 2 kg boxes",
+    "UnitPrice" : 7.0000,
+    "UnitsInStock" : 38,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 53,
+    "ProductName" : "Perth Pasties",
+    "SupplierID" : 24,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "48 pieces",
+    "UnitPrice" : 32.8000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 54,
+    "ProductName" : "Tourtière",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "16 pies",
+    "UnitPrice" : 7.4500,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 55,
+    "ProductName" : "Pâté chinois",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "24 boxes x 2 pies",
+    "UnitPrice" : 24.0000,
+    "UnitsInStock" : 115,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 56,
+    "ProductName" : "Gnocchi di nonna Alice",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 57,
+    "ProductName" : "Ravioli Angelo",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 19.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 58,
+    "ProductName" : "Escargots de Bourgogne",
+    "SupplierID" : 27,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 pieces",
+    "UnitPrice" : 13.2500,
+    "UnitsInStock" : 62,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 59,
+    "ProductName" : "Raclette Courdavault",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 55.0000,
+    "UnitsInStock" : 79,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 60,
+    "ProductName" : "Camembert Pierrot",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "15 - 300 g rounds",
+    "UnitPrice" : 34.0000,
+    "UnitsInStock" : 19,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 61,
+    "ProductName" : "Sirop d'érable",
+    "SupplierID" : 29,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 500 ml bottles",
+    "UnitPrice" : 28.5000,
+    "UnitsInStock" : 113,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 62,
+    "ProductName" : "Tarte au sucre",
+    "SupplierID" : 29,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "48 pies",
+    "UnitPrice" : 49.3000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 63,
+    "ProductName" : "Vegie-spread",
+    "SupplierID" : 7,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "15 - 625 g jars",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 64,
+    "ProductName" : "Wimmers gute Semmelknödel",
+    "SupplierID" : 12,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "20 bags x 4 pieces",
+    "UnitPrice" : 33.2500,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 80,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 65,
+    "ProductName" : "Louisiana Fiery Hot Pepper Sauce",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "32 - 8 oz bottles",
+    "UnitPrice" : 21.0500,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 66,
+    "ProductName" : "Louisiana Hot Spiced Okra",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 8 oz jars",
+    "UnitPrice" : 17.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 100,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 67,
+    "ProductName" : "Laughing Lumberjack Lager",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 52,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 68,
+    "ProductName" : "Scottish Longbreads",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 8 pieces",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 69,
+    "ProductName" : "Gudbrandsdalsost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 kg pkg.",
+    "UnitPrice" : 36.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 70,
+    "ProductName" : "Outback Lager",
+    "SupplierID" : 7,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 355 ml bottles",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 71,
+    "ProductName" : "Flotemysost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 21.5000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 72,
+    "ProductName" : "Mozzarella di Giovanni",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 34.8000,
+    "UnitsInStock" : 14,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 73,
+    "ProductName" : "Röd Kaviar",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 150 g jars",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 101,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 74,
+    "ProductName" : "Longlife Tofu",
+    "SupplierID" : 4,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 20,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 75,
+    "ProductName" : "Rhönbräu Klosterbier",
+    "SupplierID" : 12,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 0.5 l bottles",
+    "UnitPrice" : 7.7500,
+    "UnitsInStock" : 125,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 76,
+    "ProductName" : "Lakkalikööri",
+    "SupplierID" : 23,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "500 ml",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 57,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 77,
+    "ProductName" : "Original Frankfurter grüne Soße",
+    "SupplierID" : 12,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 boxes",
+    "UnitPrice" : 13.0000,
+    "UnitsInStock" : 32,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}]
diff --git a/vue-options-api-demos/notification/animation/main.js b/vue-options-api-demos/notification/animation/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/notification/animation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/notification/animation/main.vue b/vue-options-api-demos/notification/animation/main.vue
new file mode 100644
index 00000000..8e7d6c37
--- /dev/null
+++ b/vue-options-api-demos/notification/animation/main.vue
@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <KButton @click="onToggle('success')">
+      {{ (success ? 'Hide ' : 'Show ') + 'Success with Slide Animation' }}
+    </KButton>
+    <br />
+    <br />
+    <KButton @click="onToggle('error')">
+      {{ (error ? 'Hide ' : 'Show ') + 'Error with Expand Animation' }}
+    </KButton>
+    <br />
+    <br />
+    <KButton @click="onToggle('warning')">
+      {{ (warning ? 'Hide ' : 'Show ') + 'Warning with Reveal Animation' }}
+    </KButton>
+    <br />
+    <br />
+    <KButton @click="onToggle('info')">
+      {{ (info ? 'Hide ' : 'Show ') + 'Info' }}
+    </KButton>
+    <br />
+    <br />
+    <KButton @click="onToggle('none')">
+      {{ (none ? 'Hide ' : 'Show ') + 'Unstyled with Push Animation' }}
+    </KButton>
+    <NotificationGroup
+      :style="{
+        right: 0,
+        bottom: 0,
+        alignItems: 'flex-start',
+        flexWrap: 'wrap-reverse',
+      }"
+    >
+      <Slide :appear="success">
+        <Notification
+          :type="{
+            style: 'success',
+            icon: true,
+          }"
+          :closable="true"
+          @close="onClose('success')"
+        >
+          <span>Your data has been saved.</span>
+        </Notification>
+      </Slide>
+      <Expand :appear="error">
+        <Notification
+          v-if="error"
+          :type="{
+            style: 'error',
+            icon: true,
+          }"
+          :closable="true"
+          @close="onClose('error')"
+        >
+          <span>Oops! Something went wrong ...</span>
+        </Notification>
+      </Expand>
+      <Reveal :appear="warning">
+        <Notification
+          v-if="warning"
+          :type="{
+            style: 'warning',
+            icon: true,
+          }"
+          :closable="true"
+          @close="onClose('warning')"
+        >
+          <span>Your password will expire in 2 days!</span>
+        </Notification>
+      </Reveal>
+      <Zoom :appear="info">
+        <Notification
+          v-if="info"
+          :type="{
+            style: 'info',
+            icon: true,
+          }"
+          :closable="true"
+          @close="onClose('info')"
+        >
+          <span>You have 1 new message!</span>
+        </Notification>
+      </Zoom>
+      <Push :appear="none">
+        <Notification
+          v-if="none"
+          :type="{
+            style: 'none',
+            icon: false,
+          }"
+          :closable="true"
+          @close="onClose('none')"
+          :style="{
+            overflow: 'visible',
+          }"
+        >
+          <span>Hanna Moos likes your status.</span>
+        </Notification>
+      </Push>
+    </NotificationGroup>
+  </div>
+</template>
+
+<script>
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+import {
+  Push,
+  Zoom,
+  Reveal,
+  Expand,
+  Slide,
+} from '@progress/kendo-vue-animation';
+import {
+  Notification,
+  NotificationGroup,
+} from '@progress/kendo-vue-notification';
+import './styles.css';
+
+export default {
+  components: {
+    Push,
+    Zoom,
+    Reveal,
+    Expand,
+    Slide,
+    Notification,
+    NotificationGroup,
+    KButton,
+  },
+  data() {
+    return {
+      success: false,
+      error: false,
+      warning: false,
+      info: false,
+      none: false,
+    };
+  },
+  methods: {
+    onToggle(flag) {
+      this[flag] = !this[flag];
+    },
+    onClose(flag) {
+      this[flag] = false;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/notification/animation/styles.css b/vue-options-api-demos/notification/animation/styles.css
new file mode 100644
index 00000000..8bb7204a
--- /dev/null
+++ b/vue-options-api-demos/notification/animation/styles.css
@@ -0,0 +1,3 @@
+.k-notification-container {
+    margin: 6px;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/notification/events/Logger.vue b/vue-options-api-demos/notification/events/Logger.vue
new file mode 100644
index 00000000..7d9e1695
--- /dev/null
+++ b/vue-options-api-demos/notification/events/Logger.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="example-config">
+    <h5>{{ title }}</h5>
+    <ul class="event-log">
+      <li v-for="(event, idx) in events" :key="idx">
+        {{ events.length - idx }}. {{ event }}
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    events: Array,
+    title: String,
+  },
+};
+</script>
+
+<style scoped>
+.example-config {
+  margin: 0 0 20px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+  margin: 0;
+  padding: 0;
+  max-height: 100px;
+  overflow-y: auto;
+  list-style-type: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: white;
+}
+.event-log li {
+  margin: 0;
+  padding: 0.3em;
+  line-height: 1.2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+  margin-bottom: -1px;
+}
+</style>
diff --git a/vue-options-api-demos/notification/events/main.js b/vue-options-api-demos/notification/events/main.js
new file mode 100644
index 00000000..1f1c6c86
--- /dev/null
+++ b/vue-options-api-demos/notification/events/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
+
diff --git a/vue-options-api-demos/notification/events/main.vue b/vue-options-api-demos/notification/events/main.vue
new file mode 100644
index 00000000..057e5c67
--- /dev/null
+++ b/vue-options-api-demos/notification/events/main.vue
@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <KButton @click="onOpen('success')"> Show Success </KButton>
+    &nbsp;
+    <KButton @click="onOpen('error')"> Show Error </KButton>
+    &nbsp;
+    <KButton @click="onOpen('warning')"> Show Warning </KButton>
+    &nbsp;
+    <KButton @click="onOpen('info')">
+      {{ (info ? 'Hide ' : 'Show ') + 'Info' }}
+    </KButton>
+    &nbsp;
+    <KButton @click="onOpen('none')"> Show Default </KButton>
+    <NotificationGroup
+      :style="{
+        right: 0,
+        bottom: 0,
+        alignItems: 'flex-start',
+        flexWrap: 'wrap-reverse',
+      }"
+    >
+      <Fade :appear="success">
+        <Notification
+          :type="{
+            style: 'success',
+            icon: true,
+          }"
+          :closable="true"
+          @close="onClose('success')"
+        >
+          <span>Your data has been saved.</span>
+        </Notification>
+      </Fade>
+      <Fade :appear="error">
+        <Notification
+          v-if="error"
+          :type="{
+            style: 'error',
+            icon: true,
+          }"
+          :closable="true"
+          @close="onClose('error')"
+        >
+          <span>Oops! Something went wrong ...</span>
+        </Notification>
+      </Fade>
+      <Fade :appear="warning">
+        <Notification
+          v-if="warning"
+          :type="{
+            style: 'warning',
+            icon: true,
+          }"
+          :closable="true"
+          @close="onClose('warning')"
+        >
+          <span>Your password will expire in 2 days!</span>
+        </Notification>
+      </Fade>
+      <Fade :appear="info">
+        <Notification
+          v-if="info"
+          :type="{
+            style: 'info',
+            icon: true,
+          }"
+          :closable="true"
+          @close="onClose('info')"
+        >
+          <span>You have 1 new message!</span>
+        </Notification>
+      </Fade>
+      <Fade :appear="none">
+        <Notification
+          v-if="none"
+          :type="{
+            style: 'none',
+            icon: false,
+          }"
+          :closable="true"
+          @close="onClose('none')"
+          :style="{
+            overflow: 'visible',
+          }"
+        >
+          <span>Hanna Moos likes your status.</span>
+        </Notification>
+      </Fade>
+    </NotificationGroup>
+    <br />
+    <br />
+    <Logger :title="'Events list'" :events="eventsList" />
+  </div>
+</template>
+
+<script>
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+import { Fade } from '@progress/kendo-vue-animation';
+import {
+  Notification,
+  NotificationGroup,
+} from '@progress/kendo-vue-notification';
+import Logger from './Logger.vue';
+
+export default {
+  components: {
+    Fade,
+    Notification,
+    NotificationGroup,
+    Logger,
+    KButton,
+  },
+  computed: {
+    eventsList() {
+      return this.events;
+    },
+  },
+  data() {
+    return {
+      events: [],
+      success: false,
+      error: false,
+      warning: false,
+      info: false,
+      none: false,
+    };
+  },
+  methods: {
+    onOpen(flag) {
+      this.events.unshift(flag + ' notification opened');
+      this[flag] = true;
+    },
+    onClose(flag) {
+      this.events.unshift(flag + ' notification closed');
+      this[flag] = false;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/notification/get-started/main.js b/vue-options-api-demos/notification/get-started/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/notification/get-started/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/notification/get-started/main.vue b/vue-options-api-demos/notification/get-started/main.vue
new file mode 100644
index 00000000..e7da0ca7
--- /dev/null
+++ b/vue-options-api-demos/notification/get-started/main.vue
@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <KButton @click="onToggle('success')"> Save data </KButton>
+    <NotificationGroup
+      :style="{
+        right: 0,
+        bottom: 0,
+        'align-items': 'flex-start',
+        flexWrap: 'wrap-reverse',
+      }"
+    >
+      <Fade :appear="success">
+        <Notification
+          v-if="success"
+          :type="{ style: 'success', icon: true }"
+          closable="true"
+          @close="onClose('success')"
+        >
+          <span>Your data has been saved.</span>
+        </Notification>
+      </Fade>
+    </NotificationGroup>
+  </div>
+</template>
+
+<script>
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+import { Fade } from '@progress/kendo-vue-animation';
+import {
+  Notification,
+  NotificationGroup,
+} from '@progress/kendo-vue-notification';
+import './styles.css';
+
+export default {
+  components: {
+    Fade,
+    Notification,
+    NotificationGroup,
+    KButton,
+  },
+  data() {
+    return {
+      success: false,
+    };
+  },
+  methods: {
+    onToggle(flag) {
+      this[flag] = !this[flag];
+    },
+    onClose(flag) {
+      this[flag] = false;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/notification/get-started/styles.css b/vue-options-api-demos/notification/get-started/styles.css
new file mode 100644
index 00000000..8bb7204a
--- /dev/null
+++ b/vue-options-api-demos/notification/get-started/styles.css
@@ -0,0 +1,3 @@
+.k-notification-container {
+    margin: 6px;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/notification/overview/main.js b/vue-options-api-demos/notification/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/notification/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/notification/overview/main.vue b/vue-options-api-demos/notification/overview/main.vue
new file mode 100644
index 00000000..398cf489
--- /dev/null
+++ b/vue-options-api-demos/notification/overview/main.vue
@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <KButton @click="onToggle('success')">
+      {{ (success ? 'Hide ' : 'Show ') + 'Success' }}
+    </KButton>
+    &nbsp;
+    <KButton @click="onToggle('error')">
+      {{ (error ? 'Hide ' : 'Show ') + 'Error' }}
+    </KButton>
+    &nbsp;
+    <KButton @click="onToggle('warning')">
+      {{ (warning ? 'Hide ' : 'Show ') + 'Warning' }}
+    </KButton>
+    &nbsp;
+    <KButton @click="onToggle('info')">
+      {{ (info ? 'Hide ' : 'Show ') + 'Info' }}
+    </KButton>
+    &nbsp;
+    <KButton @click="onToggle('none')">
+      {{ (none ? 'Hide ' : 'Show ') + 'Unstyled' }}
+    </KButton>
+    <NotificationGroup
+      :style="{
+        right: 0,
+        bottom: 0,
+        alignItems: 'flex-start',
+        flexWrap: 'wrap-reverse',
+      }"
+    >
+      <Fade :appear="success">
+        <Notification
+          :type="{
+            style: 'success',
+            icon: true,
+          }"
+          :closable="true"
+          @close="onClose('success')"
+        >
+          <span>Your data has been saved.</span>
+        </Notification>
+      </Fade>
+      <Fade :appear="error">
+        <Notification
+          v-if="error"
+          :type="{
+            style: 'error',
+            icon: true,
+          }"
+          :closable="true"
+          @close="onClose('error')"
+        >
+          <span>Oops! Something went wrong ...</span>
+        </Notification>
+      </Fade>
+      <Fade :appear="warning">
+        <Notification
+          v-if="warning"
+          :type="{
+            style: 'warning',
+            icon: true,
+          }"
+          :closable="true"
+          @close="onClose('warning')"
+        >
+          <span>Your password will expire in 2 days!</span>
+        </Notification>
+      </Fade>
+      <Fade :appear="info">
+        <Notification
+          v-if="info"
+          :type="{
+            style: 'info',
+            icon: true,
+          }"
+          :closable="true"
+          @close="onClose('info')"
+        >
+          <span>You have 1 new message!</span>
+        </Notification>
+      </Fade>
+      <Fade :appear="none">
+        <Notification
+          v-if="none"
+          :type="{
+            style: 'none',
+            icon: false,
+          }"
+          :closable="true"
+          @close="onClose('none')"
+          :style="{
+            overflow: 'visible',
+          }"
+        >
+          <span>Hanna Moos likes your status.</span>
+        </Notification>
+      </Fade>
+    </NotificationGroup>
+  </div>
+</template>
+
+<script>
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+import { Fade } from '@progress/kendo-vue-animation';
+import {
+  Notification,
+  NotificationGroup,
+} from '@progress/kendo-vue-notification';
+import './styles.css';
+
+export default {
+  components: {
+    Fade,
+    Notification,
+    NotificationGroup,
+    KButton,
+  },
+  data() {
+    return {
+      success: false,
+      error: false,
+      warning: false,
+      info: false,
+      none: false,
+    };
+  },
+  methods: {
+    onToggle(flag) {
+      this[flag] = !this[flag];
+    },
+    onClose(flag) {
+      this[flag] = false;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/notification/overview/styles.css b/vue-options-api-demos/notification/overview/styles.css
new file mode 100644
index 00000000..8bb7204a
--- /dev/null
+++ b/vue-options-api-demos/notification/overview/styles.css
@@ -0,0 +1,3 @@
+.k-notification-container {
+    margin: 6px;
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/notification/positions/Notifications.vue b/vue-options-api-demos/notification/positions/Notifications.vue
new file mode 100644
index 00000000..e861174a
--- /dev/null
+++ b/vue-options-api-demos/notification/positions/Notifications.vue
@@ -0,0 +1,22 @@
+<template>
+  <Notification :key="'success'" :type="{ style: 'success', icon: true }">
+    <span> {{ content }}</span>
+  </Notification>
+  <Notification :key="'info'" :type="{ style: 'info' }">
+    <span>{{ content }}</span>
+  </Notification>
+</template>
+<script>
+import { Notification } from '@progress/kendo-vue-notification';
+
+export default {
+  components: {
+    Notification,
+  },
+  data() {
+    return {
+      content: 'Your data has been saved.',
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/notification/positions/main.js b/vue-options-api-demos/notification/positions/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/notification/positions/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/notification/positions/main.vue b/vue-options-api-demos/notification/positions/main.vue
new file mode 100644
index 00000000..6f0c4c9f
--- /dev/null
+++ b/vue-options-api-demos/notification/positions/main.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <NotificationGroup :style="position.topLeft">
+      <Notifications> </Notifications>
+    </NotificationGroup>
+
+    <NotificationGroup :style="position.bottomLeft">
+      <Notifications> </Notifications>
+    </NotificationGroup>
+
+    <NotificationGroup :style="position.topCenter">
+      <Notifications> </Notifications>
+    </NotificationGroup>
+
+    <NotificationGroup :style="position.bottomCenter">
+      <Notifications> </Notifications>
+    </NotificationGroup>
+
+    <NotificationGroup :style="position.topRight">
+      <Notifications> </Notifications>
+    </NotificationGroup>
+
+    <NotificationGroup :style="position.bottomRight">
+      <Notifications> </Notifications>
+    </NotificationGroup>
+  </div>
+</template>
+
+<script>
+import { NotificationGroup } from '@progress/kendo-vue-notification';
+import Notifications from './Notifications.vue';
+
+export default {
+  components: {
+    NotificationGroup,
+    Notifications,
+  },
+  data() {
+    return {
+      position: {
+        topLeft: { top: 0, left: 0, alignItems: 'flex-start' },
+        topCenter: { top: 0, left: '50%', transform: 'translateX(-50%)' },
+        topRight: { top: 0, right: 0, alignItems: 'flex-end' },
+        bottomLeft: { bottom: 0, left: 0, alignItems: 'flex-start' },
+        bottomCenter: { bottom: 0, left: '50%', transform: 'translateX(-50%)' },
+        bottomRight: { bottom: 0, right: 0, alignItems: 'flex-end' },
+      },
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/notification/types/main.js b/vue-options-api-demos/notification/types/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/notification/types/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/notification/types/main.vue b/vue-options-api-demos/notification/types/main.vue
new file mode 100644
index 00000000..0a111ff8
--- /dev/null
+++ b/vue-options-api-demos/notification/types/main.vue
@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <KButton @click="onToggle('none')">
+      {{ (none ? 'Hide ' : 'Show ') + 'Unstyled' }}
+    </KButton>
+    &nbsp;
+    <KButton @click="onToggle('success')">
+      {{ (success ? 'Hide ' : 'Show ') + 'Success' }}
+    </KButton>
+    &nbsp;
+    <KButton @click="onToggle('error')">
+      {{ (error ? 'Hide ' : 'Show ') + 'Error' }}
+    </KButton>
+    &nbsp;
+    <KButton @click="onToggle('warning')">
+      {{ (warning ? 'Hide ' : 'Show ') + 'Warning' }}
+    </KButton>
+    &nbsp;
+    <KButton @click="onToggle('info')">
+      {{ (info ? 'Hide ' : 'Show ') + 'Info' }}
+    </KButton>
+
+    <NotificationGroup
+      :style="{
+        right: 0,
+        bottom: 0,
+        alignItems: 'flex-start',
+        flexWrap: 'wrap-reverse',
+      }"
+    >
+      <Notification
+        v-if="none"
+        :type="{
+          style: 'none',
+          icon: false,
+        }"
+        :closable="true"
+        @close="onClose('none')"
+        :style="{
+          overflow: 'visible',
+        }"
+      >
+        <span> Default Notification .</span>
+      </Notification>
+      <Notification
+        v-if="success"
+        :type="{
+          style: 'success',
+          icon: true,
+        }"
+        :closable="true"
+        @close="onClose('success')"
+      >
+        <span>Success Notification</span>
+      </Notification>
+      <Notification
+        v-if="error"
+        :type="{
+          style: 'error',
+          icon: true,
+        }"
+        :closable="true"
+        @close="onClose('error')"
+      >
+        <span> Error Notification </span>
+      </Notification>
+      <Notification
+        v-if="warning"
+        :type="{
+          style: 'warning',
+          icon: true,
+        }"
+        :closable="true"
+        @close="onClose('warning')"
+      >
+        <span> Warning Notification </span>
+      </Notification>
+      <Notification
+        v-if="info"
+        :type="{
+          style: 'info',
+          icon: true,
+        }"
+        :closable="true"
+        @close="onClose('info')"
+      >
+        <span> Info Notification </span>
+      </Notification>
+    </NotificationGroup>
+  </div>
+</template>
+
+<script>
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+import {
+  Notification,
+  NotificationGroup,
+} from '@progress/kendo-vue-notification';
+
+export default {
+  components: {
+    Notification,
+    NotificationGroup,
+    KButton,
+  },
+  data() {
+    return {
+      success: false,
+      error: false,
+      warning: false,
+      info: false,
+      none: false,
+    };
+  },
+  methods: {
+    onToggle(flag) {
+      this[flag] = !this[flag];
+    },
+    onClose(flag) {
+      this[flag] = false;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/pdf/base64/main.js b/vue-options-api-demos/pdf/base64/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/pdf/base64/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/pdf/base64/main.vue b/vue-options-api-demos/pdf/base64/main.vue
new file mode 100644
index 00000000..e74b6af4
--- /dev/null
+++ b/vue-options-api-demos/pdf/base64/main.vue
@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <div class="example-config">
+      <kbutton @click="exportPDFWithMethod">
+        Export with method
+      </kbutton>
+    </div>
+
+    <div id="exportContent" ref="container">
+      <grid :data-items="items" :columns="columns">
+      </grid>
+    </div>
+  </div>
+</template>
+
+<script>
+import { drawDOM, exportPDF } from '@progress/kendo-drawing';
+import { Grid } from "@progress/kendo-vue-grid";
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    grid: Grid,
+      'kbutton': Button
+  },
+  data: function() {
+    return {
+      items:[
+        {
+          "ProductID": 1,
+          "ProductName": "Chai",
+          "SupplierID": 1,
+          "CategoryID": 1,
+          "QuantityPerUnit": "10 boxes x 20 bags",
+          "UnitPrice": 18.0000,
+          "UnitsInStock": 39,
+          "UnitsOnOrder": 0,
+          "ReorderLevel": 10,
+          "Discontinued": false,
+          "Category": {
+              "CategoryID": 1,
+              "CategoryName": "Beverages",
+              "Description": "Soft drinks, coffees, teas, beers, and ales"
+          }
+        }
+      ],
+      columns: [
+        { field: "ProductID" },
+        { field: "ProductName", title: "Product Name" },
+        { field: "UnitPrice", title: "Unit Price" }
+      ]
+    };
+  },
+  methods: {
+    exportPDFWithMethod: function() {
+      let gridElement = document.getElementsByClassName('k-grid')[0];
+
+      drawDOM(gridElement, { paperSize: "A3", margin: 100 }).then((group) => {
+          return exportPDF(group);
+      }).then((dataUri) => {
+          console.log(dataUri.split(';base64,')[1]);
+      });    
+      }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/pdf/content-scaling/main.js b/vue-options-api-demos/pdf/content-scaling/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/pdf/content-scaling/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/pdf/content-scaling/main.vue b/vue-options-api-demos/pdf/content-scaling/main.vue
new file mode 100644
index 00000000..7ac33296
--- /dev/null
+++ b/vue-options-api-demos/pdf/content-scaling/main.vue
@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <div class="example-config">
+      <kbutton @click="exportDefaultResolution">
+        Export PDF
+      </kbutton>
+    </div>
+    <pdfexport
+      :scale="0.6"
+      :paper-size="'A4'"
+      margin="2cm"
+      ref="contentToExport"
+    >
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis
+        libero, lobortis ac rutrum quis, varius a velit. Donec lacus erat,
+        cursus sed porta quis, adipiscing et ligula. Duis volutpat, sem pharetra
+        accumsan pharetra, mi ligula cursus felis, ac aliquet leo diam eget
+        risus. Integer facilisis, justo cursus venenatis vehicula, massa nisl
+        tempor sem, in ullamcorper neque mauris in orci.
+      </p>
+      <p>
+        Ut orci ligula, varius ac consequat in, rhoncus in dolor. Mauris
+        pulvinar molestie accumsan. Vestibulum ante ipsum primis in faucibus
+        orci luctus et ultrices posuere cubilia Curae; Aenean velit ligula,
+        pharetra quis aliquam sed, scelerisque sed sapien. Class aptent taciti
+        sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
+        Aliquam dui mi, vulputate vitae pulvinar ac, condimentum sed eros.
+      </p>
+      <p>
+        Aliquam at nisl quis est adipiscing bibendum. Nam malesuada eros
+        facilisis arcu vulputate at aliquam nunc tempor. In commodo scelerisque
+        enim, eget sodales lorem condimentum rutrum. Phasellus sem metus,
+        ultricies at commodo in, tristique non est. Morbi vel mauris eget mauris
+        commodo elementum. Nam eget libero lacus, ut sollicitudin ante. Nam odio
+        quam, suscipit a fringilla eget, dignissim nec arcu. Donec tristique
+        arcu ut sapien elementum pellentesque.
+      </p>
+      <p>
+        Maecenas vitae eros vel enim molestie cursus. Proin ut lacinia ipsum.
+        Nam at elit arcu, at porttitor ipsum. Praesent id viverra lorem. Nam
+        lacinia elementum fermentum. Nulla facilisi. Nulla bibendum erat sed sem
+        interdum suscipit. Vestibulum eget molestie leo. Aliquam erat volutpat.
+        Ut sed nulla libero. Suspendisse id euismod quam. Aliquam interdum
+        turpis vitae purus consectetur in pulvinar libero accumsan. In id augue
+        dui, ac volutpat ante. Suspendisse purus est, ullamcorper id bibendum
+        sed, placerat id leo.
+      </p>
+    </pdfexport>
+  </div>
+</template>
+<script>
+import { PDFExport } from "@progress/kendo-vue-pdf";
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    pdfexport: PDFExport,
+      'kbutton': Button
+  },
+  methods: {
+    exportDefaultResolution: function() {
+      this.$refs.contentToExport.save();
+    }
+  }
+};
+</script>
diff --git a/vue-options-api-demos/pdf/content-styling/class/main.js b/vue-options-api-demos/pdf/content-styling/class/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/pdf/content-styling/class/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/pdf/content-styling/class/main.vue b/vue-options-api-demos/pdf/content-styling/class/main.vue
new file mode 100644
index 00000000..ec6c145e
--- /dev/null
+++ b/vue-options-api-demos/pdf/content-styling/class/main.vue
@@ -0,0 +1,44 @@
+<template>
+  <div id="vueapp" class="vue-app">
+    <div class="example-config">
+      <kbutton @click="exportPDF">
+        Export PDF
+      </kbutton>
+    </div>
+    <pdfexport ref="contentToExport" :margin="'1cm'" :paper-size="'A4'">
+      <div style="width: 500px">
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis libero, lobortis ac rutrum quis,
+          varius
+          a velit. Donec lacus erat, cursus sed porta quis, adipiscing et ligula. Duis volutpat, sem pharetra accumsan
+          pharetra, mi ligula cursus felis, ac aliquet leo diam eget risus. Integer facilisis, justo cursus venenatis
+          vehicula, massa nisl tempor sem, in ullamcorper neque mauris in orci.
+        </p>
+        <p>
+          Ut orci ligula, varius ac consequat in, rhoncus in dolor. Mauris pulvinar molestie accumsan. Vestibulum ante
+          ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean velit ligula, pharetra quis
+          aliquam sed, scelerisque sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+          inceptos himenaeos. Aliquam dui mi, vulputate vitae pulvinar ac, condimentum sed eros.
+        </p>
+      </div>
+    </pdfexport>
+  </div>
+</template>
+
+<script>
+import { PDFExport } from "@progress/kendo-vue-pdf";
+import { Button } from '@progress/kendo-vue-buttons';
+import './styles.css';
+
+export default {
+  components: {
+    pdfexport: PDFExport,
+      'kbutton': Button
+  },
+  methods: {
+    exportPDF: function() {
+      this.$refs.contentToExport.save();
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/pdf/content-styling/class/styles.css b/vue-options-api-demos/pdf/content-styling/class/styles.css
new file mode 100644
index 00000000..de240e87
--- /dev/null
+++ b/vue-options-api-demos/pdf/content-styling/class/styles.css
@@ -0,0 +1,4 @@
+.k-pdf-export p {
+  border: 2px dashed #aaa;
+  padding: 10px;
+}
diff --git a/vue-options-api-demos/pdf/content-styling/element/main.js b/vue-options-api-demos/pdf/content-styling/element/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/pdf/content-styling/element/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/pdf/content-styling/element/main.vue b/vue-options-api-demos/pdf/content-styling/element/main.vue
new file mode 100644
index 00000000..ec6c145e
--- /dev/null
+++ b/vue-options-api-demos/pdf/content-styling/element/main.vue
@@ -0,0 +1,44 @@
+<template>
+  <div id="vueapp" class="vue-app">
+    <div class="example-config">
+      <kbutton @click="exportPDF">
+        Export PDF
+      </kbutton>
+    </div>
+    <pdfexport ref="contentToExport" :margin="'1cm'" :paper-size="'A4'">
+      <div style="width: 500px">
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis libero, lobortis ac rutrum quis,
+          varius
+          a velit. Donec lacus erat, cursus sed porta quis, adipiscing et ligula. Duis volutpat, sem pharetra accumsan
+          pharetra, mi ligula cursus felis, ac aliquet leo diam eget risus. Integer facilisis, justo cursus venenatis
+          vehicula, massa nisl tempor sem, in ullamcorper neque mauris in orci.
+        </p>
+        <p>
+          Ut orci ligula, varius ac consequat in, rhoncus in dolor. Mauris pulvinar molestie accumsan. Vestibulum ante
+          ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean velit ligula, pharetra quis
+          aliquam sed, scelerisque sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+          inceptos himenaeos. Aliquam dui mi, vulputate vitae pulvinar ac, condimentum sed eros.
+        </p>
+      </div>
+    </pdfexport>
+  </div>
+</template>
+
+<script>
+import { PDFExport } from "@progress/kendo-vue-pdf";
+import { Button } from '@progress/kendo-vue-buttons';
+import './styles.css';
+
+export default {
+  components: {
+    pdfexport: PDFExport,
+      'kbutton': Button
+  },
+  methods: {
+    exportPDF: function() {
+      this.$refs.contentToExport.save();
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/pdf/content-styling/element/styles.css b/vue-options-api-demos/pdf/content-styling/element/styles.css
new file mode 100644
index 00000000..65fd3b70
--- /dev/null
+++ b/vue-options-api-demos/pdf/content-styling/element/styles.css
@@ -0,0 +1,3 @@
+kendo-pdf-document p {
+  background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=");
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/pdf/embedded-image/main.js b/vue-options-api-demos/pdf/embedded-image/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/pdf/embedded-image/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/pdf/embedded-image/main.vue b/vue-options-api-demos/pdf/embedded-image/main.vue
new file mode 100644
index 00000000..4b9171fb
--- /dev/null
+++ b/vue-options-api-demos/pdf/embedded-image/main.vue
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <div class="example-config">
+      <kbutton @click="exportDefaultResolution">
+        Export PDF with default resolution
+      </kbutton>
+      &nbsp;
+      <kbutton @click="export36DPI">
+        Export PDF with 36 dpi
+      </kbutton>
+    </div>
+    <img
+      ref="imageToExport"
+      src="https://c2.staticflickr.com/2/1574/25734996011_637430f5d8_c.jpg"
+      style="width:750px"
+      alt="Landscape Image"
+    />
+  </div>
+</template>
+<script>
+import { savePDF } from "@progress/kendo-vue-pdf";
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    'kbutton': Button
+  },
+  methods: {
+    
+    exportDefaultResolution: function() {
+      savePDF(this.$refs.imageToExport);
+    },
+    export36DPI: function() {
+      savePDF(this.$refs.imageToExport, { imageResolution: 36 });
+    }
+
+  }
+};
+</script>
diff --git a/vue-options-api-demos/pdf/get-started/main.js b/vue-options-api-demos/pdf/get-started/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/pdf/get-started/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/pdf/get-started/main.vue b/vue-options-api-demos/pdf/get-started/main.vue
new file mode 100644
index 00000000..6b93c30b
--- /dev/null
+++ b/vue-options-api-demos/pdf/get-started/main.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <div class="example-config">
+      <kbutton @click="exportPDFWithComponent">
+        Export to PDF with component
+      </kbutton>
+      &nbsp;
+      <kbutton @click="exportPDFWithMethod">
+        Export to PDF with method
+      </kbutton>
+    </div>
+
+    <pdfexport ref="PdfExport">
+        <grid
+          ref="grid"
+          :data-items="gridData"
+          :columns="columns"
+        >
+        </grid>
+    </pdfexport>
+  </div>
+</template>
+<script>
+import { PDFExport, savePDF } from "@progress/kendo-vue-pdf";
+import { Grid } from "@progress/kendo-vue-grid";
+import { Button } from '@progress/kendo-vue-buttons';
+import products from "./products.json";
+
+export default {
+  components: {
+    grid: Grid,
+    pdfexport: PDFExport,
+    'kbutton': Button
+  },
+  data: function() {
+    return {
+      gridData: products,
+      columns: [
+        { field: "ProductID" },
+        { field: "ProductName", title: "Product Name" },
+        { field: "Category.CategoryName", title: "Category Name" },
+        { field: "UnitPrice", title: "Unit Price" },
+        { field: "UnitsInStock", title: "Units In Stock" }
+      ]
+    };
+  },
+  methods: {
+    exportPDFWithComponent: function() {
+      this.$refs.PdfExport.save(this.items);
+    },
+    exportPDFWithMethod: function() {
+      savePDF(this.$refs.grid.$el, {
+        paperSize: "A4"
+      });
+    }
+  }
+};
+</script>
diff --git a/vue-options-api-demos/pdf/get-started/products.json b/vue-options-api-demos/pdf/get-started/products.json
new file mode 100644
index 00000000..d3ab4ee8
--- /dev/null
+++ b/vue-options-api-demos/pdf/get-started/products.json
@@ -0,0 +1,155 @@
+[
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18.0000,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19.0000,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        }
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10.0000,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22.0000,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.3500,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25.0000,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30.0000,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        }
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40.0000,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        }
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97.0000,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        }
+    }
+]
diff --git a/vue-options-api-demos/pdf/hidden-content/main.js b/vue-options-api-demos/pdf/hidden-content/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/pdf/hidden-content/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/pdf/hidden-content/main.vue b/vue-options-api-demos/pdf/hidden-content/main.vue
new file mode 100644
index 00000000..9186ba53
--- /dev/null
+++ b/vue-options-api-demos/pdf/hidden-content/main.vue
@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <div class="example-config">
+      <kbutton @click="exportPDF">
+        Export PDF
+      </kbutton>
+    </div>
+    <div class="hiddenContainer">
+      <pdfexport ref="contentToExport" :margin="'1cm'" :paper-size="'A4'">
+        <div style="width: 500px">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis libero, lobortis ac rutrum quis,
+            varius
+            a velit. Donec lacus erat, cursus sed porta quis, adipiscing et ligula. Duis volutpat, sem pharetra accumsan
+            pharetra, mi ligula cursus felis, ac aliquet leo diam eget risus. Integer facilisis, justo cursus venenatis
+            vehicula, massa nisl tempor sem, in ullamcorper neque mauris in orci.
+          </p>
+          <p>
+            Ut orci ligula, varius ac consequat in, rhoncus in dolor. Mauris pulvinar molestie accumsan. Vestibulum ante
+            ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean velit ligula, pharetra quis
+            aliquam sed, scelerisque sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+            inceptos himenaeos. Aliquam dui mi, vulputate vitae pulvinar ac, condimentum sed eros.
+          </p>
+        </div>
+      </pdfexport>
+    </div>
+  </div>
+</template>
+
+<script>
+import { PDFExport } from "@progress/kendo-vue-pdf";
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    pdfexport: PDFExport,
+      'kbutton': Button
+  },
+  methods: {
+    exportPDF: function() {
+      this.$refs.contentToExport.save();
+    }
+  }
+};
+</script>
+
+<style scoped>
+  .hiddenContainer {
+    position: absolute;
+    left: -1000px;
+    top: 0;
+  }
+</style>
\ No newline at end of file
diff --git a/vue-options-api-demos/pdf/hyperlinks/main.js b/vue-options-api-demos/pdf/hyperlinks/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/pdf/hyperlinks/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/pdf/hyperlinks/main.vue b/vue-options-api-demos/pdf/hyperlinks/main.vue
new file mode 100644
index 00000000..f850e3ce
--- /dev/null
+++ b/vue-options-api-demos/pdf/hyperlinks/main.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <div class="example-config">
+      <kbutton @click="exportDefaultResolution">
+        Export PDF
+      </kbutton>
+    </div>
+    <pdfexport :avoidLinks="true" :paper-size="'A4'" margin="2cm" ref="contentToExport">
+      This is
+      <a href="http://www.telerik.com/kendo-vue-ui/">a non-clickable link</a>.
+    </pdfexport>
+  </div>
+</template>
+<script>
+import { PDFExport } from "@progress/kendo-vue-pdf";
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    pdfexport: PDFExport,
+      'kbutton': Button
+  },
+  methods: {
+    exportDefaultResolution: function() {
+      this.$refs.contentToExport.save();
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/pdf/multipage-content/automatic-page-breaking/main.js b/vue-options-api-demos/pdf/multipage-content/automatic-page-breaking/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/pdf/multipage-content/automatic-page-breaking/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/pdf/multipage-content/automatic-page-breaking/main.vue b/vue-options-api-demos/pdf/multipage-content/automatic-page-breaking/main.vue
new file mode 100644
index 00000000..c8194d69
--- /dev/null
+++ b/vue-options-api-demos/pdf/multipage-content/automatic-page-breaking/main.vue
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <div class="example-config">
+      <kbutton @click="exportPDF">
+        Export PDF
+      </kbutton>
+    </div>
+    <pdfexport ref="contentToExport" margin="2cm" :paper-size="'A4'">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis libero, lobortis ac rutrum quis, varius a
+        velit. Donec lacus erat, cursus sed porta quis, adipiscing et ligula. Duis volutpat, sem pharetra accumsan
+        pharetra, mi ligula cursus felis, ac aliquet leo diam eget risus. Integer facilisis, justo cursus venenatis
+        vehicula, massa nisl tempor sem, in ullamcorper neque mauris in orci.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis libero, lobortis ac rutrum quis, varius a
+        velit. Donec lacus erat, cursus sed porta quis, adipiscing et ligula. Duis volutpat, sem pharetra accumsan
+        pharetra, mi ligula cursus felis, ac aliquet leo diam eget risus. Integer facilisis, justo cursus venenatis
+        vehicula, massa nisl tempor sem, in ullamcorper neque mauris in orci.
+      </p>
+      <p>
+        Ut orci ligula, varius ac consequat in, rhoncus in dolor. Mauris pulvinar molestie accumsan. Vestibulum ante
+        ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean velit ligula, pharetra quis
+        aliquam sed, scelerisque sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+        inceptos himenaeos. Aliquam dui mi, vulputate vitae pulvinar ac, condimentum sed eros.
+        Ut orci ligula, varius ac consequat in, rhoncus in dolor. Mauris pulvinar molestie accumsan. Vestibulum ante
+        ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean velit ligula, pharetra quis
+        aliquam sed, scelerisque sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+        inceptos himenaeos. Aliquam dui mi, vulputate vitae pulvinar ac, condimentum sed eros.
+      </p>
+      <p>
+        Aliquam at nisl quis est adipiscing bibendum. Nam malesuada eros facilisis arcu vulputate at aliquam nunc
+        tempor. In commodo scelerisque enim, eget sodales lorem condimentum rutrum. Phasellus sem metus, ultricies at
+        commodo in, tristique non est. Morbi vel mauris eget mauris commodo elementum. Nam eget libero lacus, ut
+        sollicitudin ante. Nam odio quam, suscipit a fringilla eget, dignissim nec arcu. Donec tristique arcu ut sapien
+        elementum pellentesque.
+        Aliquam at nisl quis est adipiscing bibendum. Nam malesuada eros facilisis arcu vulputate at aliquam nunc
+        tempor. In commodo scelerisque enim, eget sodales lorem condimentum rutrum. Phasellus sem metus, ultricies at
+        commodo in, tristique non est. Morbi vel mauris eget mauris commodo elementum. Nam eget libero lacus, ut
+        sollicitudin ante. Nam odio quam, suscipit a fringilla eget, dignissim nec arcu. Donec tristique arcu ut sapien
+        elementum pellentesque.
+      </p>
+      <p>
+        Maecenas vitae eros vel enim molestie cursus. Proin ut lacinia ipsum. Nam at elit arcu, at porttitor ipsum.
+        Praesent id viverra lorem. Nam lacinia elementum fermentum. Nulla facilisi. Nulla bibendum erat sed sem interdum
+        suscipit. Vestibulum eget molestie leo. Aliquam erat volutpat. Ut sed nulla libero. Suspendisse id euismod quam.
+        Aliquam interdum turpis vitae purus consectetur in pulvinar libero accumsan. In id augue dui, ac volutpat ante.
+        Suspendisse purus est, ullamcorper id bibendum sed, placerat id leo.
+        Maecenas vitae eros vel enim molestie cursus. Proin ut lacinia ipsum. Nam at elit arcu, at porttitor ipsum.
+        Praesent id viverra lorem. Nam lacinia elementum fermentum. Nulla facilisi. Nulla bibendum erat sed sem interdum
+        suscipit. Vestibulum eget molestie leo. Aliquam erat volutpat. Ut sed nulla libero. Suspendisse id euismod quam.
+        Aliquam interdum turpis vitae purus consectetur in pulvinar libero accumsan. In id augue dui, ac volutpat ante.
+        Suspendisse purus est, ullamcorper id bibendum sed, placerat id leo.
+      </p>
+    </pdfexport>
+  </div>
+</template>
+<script>
+import { PDFExport } from "@progress/kendo-vue-pdf";
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    pdfexport: PDFExport,
+      'kbutton': Button
+  },
+  methods: {
+    exportPDF: function() {
+      this.$refs.contentToExport.save();
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/pdf/multipage-content/manual-page-breaking/main.js b/vue-options-api-demos/pdf/multipage-content/manual-page-breaking/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/pdf/multipage-content/manual-page-breaking/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/pdf/multipage-content/manual-page-breaking/main.vue b/vue-options-api-demos/pdf/multipage-content/manual-page-breaking/main.vue
new file mode 100644
index 00000000..db78c03e
--- /dev/null
+++ b/vue-options-api-demos/pdf/multipage-content/manual-page-breaking/main.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <div class="example-config">
+      <kbutton @click="exportPDF">
+        Export PDF
+      </kbutton>
+    </div>
+    <pdfexport ref="contentToExport" forcePageBreak=".page-break" :paper-size="'A4'">
+      <div style="width: '595px' , height: '420px'">
+        <h3>Page 1</h3>
+        <p>
+          Aliquam at nisl quis est adipiscing bibendum. Nam malesuada eros facilisis arcu vulputate at aliquam nunc
+          tempor. In commodo scelerisque enim, eget sodales lorem condimentum rutrum. Phasellus sem metus, ultricies at
+          commodo in, tristique non est. Morbi vel mauris eget mauris commodo elementum. Nam eget libero lacus, ut
+          sollicitudin ante. Nam odio quam, suscipit a fringilla eget, dignissim nec arcu. Donec tristique arcu ut
+          sapien elementum pellentesque.
+        </p>
+
+        <h3 class="page-break">Page 2</h3>
+        <p>
+          Aliquam at nisl quis est adipiscing bibendum. Nam malesuada eros facilisis arcu vulputate at aliquam nunc
+          tempor. In commodo scelerisque enim, eget sodales lorem condimentum rutrum. Phasellus sem metus, ultricies at
+          commodo in, tristique non est. Morbi vel mauris eget mauris commodo elementum. Nam eget libero lacus, ut
+          sollicitudin ante. Nam odio quam, suscipit a fringilla eget, dignissim nec arcu. Donec tristique arcu ut
+          sapien elementum pellentesque.
+        </p>
+      </div>
+    </pdfexport>
+  </div>
+</template>
+<script>
+import { PDFExport } from "@progress/kendo-vue-pdf";
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    pdfexport: PDFExport,
+      'kbutton': Button
+  },
+  methods: {
+    exportPDF: function() {
+      this.$refs.contentToExport.save();
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/pdf/multipage-content/multi-page-content-keep-together/Content.vue b/vue-options-api-demos/pdf/multipage-content/multi-page-content-keep-together/Content.vue
new file mode 100644
index 00000000..40a12c26
--- /dev/null
+++ b/vue-options-api-demos/pdf/multipage-content/multi-page-content-keep-together/Content.vue
@@ -0,0 +1,56 @@
+<template>
+    <div>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis libero, lobortis ac rutrum quis, varius a
+        velit. Donec lacus erat, cursus sed porta quis, adipiscing et ligula. Duis volutpat, sem pharetra accumsan
+        pharetra, mi ligula cursus felis, ac aliquet leo diam eget risus. Integer facilisis, justo cursus venenatis
+        vehicula, massa nisl tempor sem, in ullamcorper neque mauris in orci.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis libero, lobortis ac rutrum quis, varius a
+        velit. Donec lacus erat, cursus sed porta quis, adipiscing et ligula. Duis volutpat, sem pharetra accumsan
+        pharetra, mi ligula cursus felis, ac aliquet leo diam eget risus. Integer facilisis, justo cursus venenatis
+        vehicula, massa nisl tempor sem, in ullamcorper neque mauris in orci.
+      </p>
+      <p class="prevent-split">
+        Ut orci ligula, varius ac consequat in, rhoncus in dolor. Mauris pulvinar molestie accumsan. Vestibulum ante ipsum
+        primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean velit ligula, pharetra quis aliquam sed,
+        scelerisque sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
+        himenaeos. Aliquam dui mi, vulputate vitae pulvinar ac, condimentum sed eros.
+        Ut orci ligula, varius ac consequat in, rhoncus in dolor. Mauris pulvinar molestie accumsan. Vestibulum ante ipsum
+        primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean velit ligula, pharetra quis aliquam sed,
+        scelerisque sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
+        himenaeos. Aliquam dui mi, vulputate vitae pulvinar ac, condimentum sed eros.
+      </p>
+      <p class="prevent-split">
+        Aliquam at nisl quis est adipiscing bibendum. Nam malesuada eros facilisis arcu vulputate at aliquam nunc tempor.
+        In commodo scelerisque enim, eget sodales lorem condimentum rutrum. Phasellus sem metus, ultricies at commodo in,
+        tristique non est. Morbi vel mauris eget mauris commodo elementum. Nam eget libero lacus, ut sollicitudin ante.
+        Nam odio quam, suscipit a fringilla eget, dignissim nec arcu. Donec tristique arcu ut sapien elementum
+        pellentesque.
+        Aliquam at nisl quis est adipiscing bibendum. Nam malesuada eros facilisis arcu vulputate at aliquam nunc tempor.
+        In commodo scelerisque enim, eget sodales lorem condimentum rutrum. Phasellus sem metus, ultricies at commodo in,
+        tristique non est. Morbi vel mauris eget mauris commodo elementum. Nam eget libero lacus, ut sollicitudin ante.
+        Nam odio quam, suscipit a fringilla eget, dignissim nec arcu. Donec tristique arcu ut sapien elementum
+        pellentesque.
+      </p>
+      <p>
+        Maecenas vitae eros vel enim molestie cursus. Proin ut lacinia ipsum. Nam at elit arcu, at porttitor ipsum.
+        Praesent id viverra lorem. Nam lacinia elementum fermentum. Nulla facilisi. Nulla bibendum erat sed sem interdum
+        suscipit. Vestibulum eget molestie leo. Aliquam erat volutpat. Ut sed nulla libero. Suspendisse id euismod quam.
+        Aliquam interdum turpis vitae purus consectetur in pulvinar libero accumsan. In id augue dui, ac volutpat ante.
+        Suspendisse purus est, ullamcorper id bibendum sed, placerat id leo.
+        Maecenas vitae eros vel enim molestie cursus. Proin ut lacinia ipsum. Nam at elit arcu, at porttitor ipsum.
+        Praesent id viverra lorem. Nam lacinia elementum fermentum. Nulla facilisi. Nulla bibendum erat sed sem interdum
+        suscipit. Vestibulum eget molestie leo. Aliquam erat volutpat. Ut sed nulla libero. Suspendisse id euismod quam.
+        Aliquam interdum turpis vitae purus consectetur in pulvinar libero accumsan. In id augue dui, ac volutpat ante.
+        Suspendisse purus est, ullamcorper id bibendum sed, placerat id leo.
+      </p>
+    </div>
+  </template>
+<script>
+export default {
+    data () {
+        return {
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/pdf/multipage-content/multi-page-content-keep-together/main.js b/vue-options-api-demos/pdf/multipage-content/multi-page-content-keep-together/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/pdf/multipage-content/multi-page-content-keep-together/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/pdf/multipage-content/multi-page-content-keep-together/main.vue b/vue-options-api-demos/pdf/multipage-content/multi-page-content-keep-together/main.vue
new file mode 100644
index 00000000..a3bb9af6
--- /dev/null
+++ b/vue-options-api-demos/pdf/multipage-content/multi-page-content-keep-together/main.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <div class="example-config">
+      <kbutton @click="exportPDF">
+        Export PDF
+      </kbutton>
+    </div>
+    <pdfexport ref="contentToExport" :margin="'2cm'" :paper-size="'A4'" :keepTogether="'.prevent-split'">
+      <Content />
+    </pdfexport>
+  </div>
+</template>
+
+<script>
+import { PDFExport } from "@progress/kendo-vue-pdf";
+import Content from "./Content.vue";
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    pdfexport: PDFExport,
+    Content: Content,
+      'kbutton': Button
+  },
+  methods: {
+    exportPDF: function() {
+      this.$refs.contentToExport.save();
+    }
+  }
+};
+</script>
diff --git a/vue-options-api-demos/pdf/multipage-content/page-templates/Content.vue b/vue-options-api-demos/pdf/multipage-content/page-templates/Content.vue
new file mode 100644
index 00000000..0cdbb373
--- /dev/null
+++ b/vue-options-api-demos/pdf/multipage-content/page-templates/Content.vue
@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis libero, lobortis ac rutrum quis, varius a
+      velit. Donec lacus erat, cursus sed porta quis, adipiscing et ligula. Duis volutpat, sem pharetra accumsan
+      pharetra, mi ligula cursus felis, ac aliquet leo diam eget risus. Integer facilisis, justo cursus venenatis
+      vehicula, massa nisl tempor sem, in ullamcorper neque mauris in orci.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis libero, lobortis ac rutrum quis, varius a
+      velit. Donec lacus erat, cursus sed porta quis, adipiscing et ligula. Duis volutpat, sem pharetra accumsan
+      pharetra, mi ligula cursus felis, ac aliquet leo diam eget risus. Integer facilisis, justo cursus venenatis
+      vehicula, massa nisl tempor sem, in ullamcorper neque mauris in orci.
+    </p>
+    <p>
+      Ut orci ligula, varius ac consequat in, rhoncus in dolor. Mauris pulvinar molestie accumsan. Vestibulum ante ipsum
+      primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean velit ligula, pharetra quis aliquam sed,
+      scelerisque sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
+      himenaeos. Aliquam dui mi, vulputate vitae pulvinar ac, condimentum sed eros.
+      Ut orci ligula, varius ac consequat in, rhoncus in dolor. Mauris pulvinar molestie accumsan. Vestibulum ante ipsum
+      primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean velit ligula, pharetra quis aliquam sed,
+      scelerisque sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
+      himenaeos. Aliquam dui mi, vulputate vitae pulvinar ac, condimentum sed eros.
+    </p>
+    <p>
+      Aliquam at nisl quis est adipiscing bibendum. Nam malesuada eros facilisis arcu vulputate at aliquam nunc tempor.
+      In commodo scelerisque enim, eget sodales lorem condimentum rutrum. Phasellus sem metus, ultricies at commodo in,
+      tristique non est. Morbi vel mauris eget mauris commodo elementum. Nam eget libero lacus, ut sollicitudin ante.
+      Nam odio quam, suscipit a fringilla eget, dignissim nec arcu. Donec tristique arcu ut sapien elementum
+      pellentesque.
+      Aliquam at nisl quis est adipiscing bibendum. Nam malesuada eros facilisis arcu vulputate at aliquam nunc tempor.
+      In commodo scelerisque enim, eget sodales lorem condimentum rutrum. Phasellus sem metus, ultricies at commodo in,
+      tristique non est. Morbi vel mauris eget mauris commodo elementum. Nam eget libero lacus, ut sollicitudin ante.
+      Nam odio quam, suscipit a fringilla eget, dignissim nec arcu. Donec tristique arcu ut sapien elementum
+      pellentesque.
+    </p>
+    <p>
+      Maecenas vitae eros vel enim molestie cursus. Proin ut lacinia ipsum. Nam at elit arcu, at porttitor ipsum.
+      Praesent id viverra lorem. Nam lacinia elementum fermentum. Nulla facilisi. Nulla bibendum erat sed sem interdum
+      suscipit. Vestibulum eget molestie leo. Aliquam erat volutpat. Ut sed nulla libero. Suspendisse id euismod quam.
+      Aliquam interdum turpis vitae purus consectetur in pulvinar libero accumsan. In id augue dui, ac volutpat ante.
+      Suspendisse purus est, ullamcorper id bibendum sed, placerat id leo.
+      Maecenas vitae eros vel enim molestie cursus. Proin ut lacinia ipsum. Nam at elit arcu, at porttitor ipsum.
+      Praesent id viverra lorem. Nam lacinia elementum fermentum. Nulla facilisi. Nulla bibendum erat sed sem interdum
+      suscipit. Vestibulum eget molestie leo. Aliquam erat volutpat. Ut sed nulla libero. Suspendisse id euismod quam.
+      Aliquam interdum turpis vitae purus consectetur in pulvinar libero accumsan. In id augue dui, ac volutpat ante.
+      Suspendisse purus est, ullamcorper id bibendum sed, placerat id leo.
+    </p>
+  </div>
+</template>
+<script>
+  export default {
+    data () {
+        return {
+        }
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/pdf/multipage-content/page-templates/main.js b/vue-options-api-demos/pdf/multipage-content/page-templates/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/pdf/multipage-content/page-templates/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/pdf/multipage-content/page-templates/main.vue b/vue-options-api-demos/pdf/multipage-content/page-templates/main.vue
new file mode 100644
index 00000000..2117261a
--- /dev/null
+++ b/vue-options-api-demos/pdf/multipage-content/page-templates/main.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <div class="example-config">
+      <kbutton @click="exportPDF">
+        Export PDF
+      </kbutton>
+    </div>
+    <pdfexport ref="contentToExport" margin="2cm" :paper-size="'A4'" :page-template="pageTemplate">
+      <Content />
+    </pdfexport>
+  </div>
+</template>
+
+<script>
+import { markRaw, h } from 'vue';
+import { PDFExport } from "@progress/kendo-vue-pdf";
+import Content from "./Content.vue";
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    pdfexport: PDFExport,
+    Content: Content,
+      'kbutton': Button
+  },
+  data: function(){
+    return {
+      pageTemplate: markRaw({
+                props: {
+                    pageNum: Number,
+                    totalPages: Number
+                },
+                render: function() {
+                    return h('div',{
+                        style: {position: 'absolute', top: '10px', left: '10px'}
+                    },['Page ' + this.$props.pageNum + ' of ' + this.$props.totalPages])
+                }
+    })
+    }
+  },
+  methods: {
+    exportPDF: function() {
+      this.$refs.contentToExport.save();
+    }
+  }
+};
+</script>
diff --git a/vue-options-api-demos/pdf/overview/main.js b/vue-options-api-demos/pdf/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/pdf/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/pdf/overview/main.vue b/vue-options-api-demos/pdf/overview/main.vue
new file mode 100644
index 00000000..b8d1089d
--- /dev/null
+++ b/vue-options-api-demos/pdf/overview/main.vue
@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <div class="example-config">
+      <kbutton @click="exportPDFWithComponent">
+        Export with component
+      </kbutton>
+      &nbsp;
+      <kbutton @click="exportPDFWithMethod">
+        Export with method
+      </kbutton>
+      <br />
+      <br />
+      <span>
+        Select sport activity:
+         <dropdownlist
+          :style="{ width: '230px' }"
+          v-model="selectedSport"
+          :data-items="sports"
+          :default-item="'Select sport ...'"
+        >
+        </dropdownlist>
+      </span>
+    </div>
+
+    <pdfexport ref="PdfExport">
+      <div id="exportContent" ref="container">
+        <h3 class="text-center">Weekend personal planning</h3>
+        <hr class="k-hr" />
+        <grid
+          :data-items="items"
+          :skip="skip"
+          :take="take"
+          :total="total"
+          :pageable="pageable"
+          :page-size="pageSize"
+          @pagechange="pageChangeHandler"
+          :columns="columns"
+        >
+        </grid>
+        <br />
+        <span style="font-weight: bold">Planned sport for the weekend:</span>
+        {{ selectedSport }}
+      </div>
+    </pdfexport>
+  </div>
+</template>
+<script>
+import { PDFExport, savePDF } from "@progress/kendo-vue-pdf";
+import { Grid } from "@progress/kendo-vue-grid";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    grid: Grid,
+    pdfexport: PDFExport,
+    dropdownlist: DropDownList,
+      'kbutton': Button
+  },
+  data: function() {
+    return {
+      selectedSport: "",
+      sports: ["Basketball", "Football", "Tennis", "Volleyball"],
+      skip: 0,
+      take: 10,
+      products: [],
+      pageSize: 10,
+      pageable: {
+        buttonCount: 5,
+        info: true,
+        type: "numeric",
+        pageSizes: true,
+        previousNext: true
+      },
+      columns: [
+        { field: "ProductID" },
+        { field: "ProductName", title: "Product Name" },
+        { field: "UnitPrice", title: "Unit Price" }
+      ]
+    };
+  },
+  computed: {
+    items: {
+      get: function() {
+        return this.products.slice(this.skip, this.take + this.skip);
+      }
+    },
+    total() {
+      return this.products ? this.products.length : 0;
+    }
+  },
+  methods: {
+    exportPDFWithComponent: function() {
+      this.$refs.PdfExport.save(this.items);
+    },
+    exportPDFWithMethod: function() {
+      savePDF(this.$refs.container, {
+        paperSize: "auto",
+        margin: 40,
+        fileName: `Report for `
+      });
+    },
+    pageChangeHandler: function(event) {
+      this.skip = event.page.skip;
+      this.take = event.page.take;
+    },
+    createRandomData(count) {
+      const productNames = [
+        "Chai",
+        "Chang",
+        "Syrup",
+        "Apple",
+        "Orange",
+        "Banana",
+        "Lemon",
+        "Pineapple",
+        "Tea",
+        "Milk"
+      ];
+      const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120];
+
+      return Array(count)
+        .fill({})
+        .map((_, idx) => ({
+          ProductID: idx + 1,
+          ProductName:
+            productNames[Math.floor(Math.random() * productNames.length)],
+          UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)]
+        }));
+    }
+  },
+  mounted() {
+    this.products = this.createRandomData(1000);
+  }
+};
+</script>
diff --git a/vue-options-api-demos/pdf/table-headers/main.js b/vue-options-api-demos/pdf/table-headers/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/pdf/table-headers/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/pdf/table-headers/main.vue b/vue-options-api-demos/pdf/table-headers/main.vue
new file mode 100644
index 00000000..d70dd869
--- /dev/null
+++ b/vue-options-api-demos/pdf/table-headers/main.vue
@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <div class="example-config">
+      <div>
+      <input class="k-checkbox k-checkbox-md k-rounded-md" type="checkbox" id="repeatHeaders" checked="repeatHeaders" @change="switchRepeatHeaderVisualization"/>
+        <label class="k-checkbox-label mb-2" for="repeatHeaders">Repeat headers</label>
+      </div>
+      <kbutton @click="exportPDF">
+        Export to PDF with component
+      </kbutton>
+    </div>
+
+    <table class="table" ref="table">
+      <thead>
+        <tr>
+          <th>Product</th>
+          <th>Unit Price</th>
+          <th>Qty</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(product,i) in gridData" :key="i">
+          <td>{{ product.ProductName }}</td> 
+          <td>{{ product.UnitPrice }}</td>  
+          <td>{{ product.QuantityPerUnit }}</td>  
+       </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script>
+import { savePDF } from "@progress/kendo-vue-pdf";
+import products from "./products.json";
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+      'kbutton': Button
+  },
+  data: function() {
+    return {
+      gridData: products,
+      repeatHeaders: true
+    };
+  },
+  methods: {
+    exportPDF: function() {
+      savePDF(this.$refs.table, {
+            repeatHeaders: this.repeatHeaders,
+            paperSize: 'A4',
+            margin: '2cm'
+      });
+    },
+    switchRepeatHeaderVisualization: function(){
+      this.repeatHeaders = !this.repeatHeaders;
+    }
+  }
+};
+</script>
diff --git a/vue-options-api-demos/pdf/table-headers/products.json b/vue-options-api-demos/pdf/table-headers/products.json
new file mode 100644
index 00000000..54a01dab
--- /dev/null
+++ b/vue-options-api-demos/pdf/table-headers/products.json
@@ -0,0 +1,1021 @@
+[{
+    "ProductName": "Chai",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "10 boxes x 20 bags",
+    "UnitPrice": 18.0000,
+    "UnitsInStock": 39,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 10,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Chang",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "24 - 12 oz bottles",
+    "UnitPrice": 19.0000,
+    "UnitsInStock": 17,
+    "UnitsOnOrder": 40,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Aniseed Syrup",
+    "SupplierID": 1,
+    "CategoryID": 2,
+    "QuantityPerUnit": "12 - 550 ml bottles",
+    "UnitPrice": 10.0000,
+    "UnitsInStock": 13,
+    "UnitsOnOrder": 70,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductName": "Chef Anton's Cajun Seasoning",
+    "SupplierID": 2,
+    "CategoryID": 2,
+    "QuantityPerUnit": "48 - 6 oz jars",
+    "UnitPrice": 22.0000,
+    "UnitsInStock": 53,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 0,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+},{
+    "ProductName": "Chai",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "10 boxes x 20 bags",
+    "UnitPrice": 18.0000,
+    "UnitsInStock": 39,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 10,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Chang",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "24 - 12 oz bottles",
+    "UnitPrice": 19.0000,
+    "UnitsInStock": 17,
+    "UnitsOnOrder": 40,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Aniseed Syrup",
+    "SupplierID": 1,
+    "CategoryID": 2,
+    "QuantityPerUnit": "12 - 550 ml bottles",
+    "UnitPrice": 10.0000,
+    "UnitsInStock": 13,
+    "UnitsOnOrder": 70,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductName": "Chef Anton's Cajun Seasoning",
+    "SupplierID": 2,
+    "CategoryID": 2,
+    "QuantityPerUnit": "48 - 6 oz jars",
+    "UnitPrice": 22.0000,
+    "UnitsInStock": 53,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 0,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+},{
+    "ProductName": "Chai",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "10 boxes x 20 bags",
+    "UnitPrice": 18.0000,
+    "UnitsInStock": 39,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 10,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Chang",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "24 - 12 oz bottles",
+    "UnitPrice": 19.0000,
+    "UnitsInStock": 17,
+    "UnitsOnOrder": 40,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Aniseed Syrup",
+    "SupplierID": 1,
+    "CategoryID": 2,
+    "QuantityPerUnit": "12 - 550 ml bottles",
+    "UnitPrice": 10.0000,
+    "UnitsInStock": 13,
+    "UnitsOnOrder": 70,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductName": "Chef Anton's Cajun Seasoning",
+    "SupplierID": 2,
+    "CategoryID": 2,
+    "QuantityPerUnit": "48 - 6 oz jars",
+    "UnitPrice": 22.0000,
+    "UnitsInStock": 53,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 0,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+},{
+    "ProductName": "Chai",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "10 boxes x 20 bags",
+    "UnitPrice": 18.0000,
+    "UnitsInStock": 39,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 10,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Chang",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "24 - 12 oz bottles",
+    "UnitPrice": 19.0000,
+    "UnitsInStock": 17,
+    "UnitsOnOrder": 40,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Aniseed Syrup",
+    "SupplierID": 1,
+    "CategoryID": 2,
+    "QuantityPerUnit": "12 - 550 ml bottles",
+    "UnitPrice": 10.0000,
+    "UnitsInStock": 13,
+    "UnitsOnOrder": 70,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductName": "Chef Anton's Cajun Seasoning",
+    "SupplierID": 2,
+    "CategoryID": 2,
+    "QuantityPerUnit": "48 - 6 oz jars",
+    "UnitPrice": 22.0000,
+    "UnitsInStock": 53,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 0,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+},{
+    "ProductName": "Chai",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "10 boxes x 20 bags",
+    "UnitPrice": 18.0000,
+    "UnitsInStock": 39,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 10,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Chang",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "24 - 12 oz bottles",
+    "UnitPrice": 19.0000,
+    "UnitsInStock": 17,
+    "UnitsOnOrder": 40,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Aniseed Syrup",
+    "SupplierID": 1,
+    "CategoryID": 2,
+    "QuantityPerUnit": "12 - 550 ml bottles",
+    "UnitPrice": 10.0000,
+    "UnitsInStock": 13,
+    "UnitsOnOrder": 70,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductName": "Chef Anton's Cajun Seasoning",
+    "SupplierID": 2,
+    "CategoryID": 2,
+    "QuantityPerUnit": "48 - 6 oz jars",
+    "UnitPrice": 22.0000,
+    "UnitsInStock": 53,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 0,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+},{
+    "ProductName": "Chai",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "10 boxes x 20 bags",
+    "UnitPrice": 18.0000,
+    "UnitsInStock": 39,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 10,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Chang",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "24 - 12 oz bottles",
+    "UnitPrice": 19.0000,
+    "UnitsInStock": 17,
+    "UnitsOnOrder": 40,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Aniseed Syrup",
+    "SupplierID": 1,
+    "CategoryID": 2,
+    "QuantityPerUnit": "12 - 550 ml bottles",
+    "UnitPrice": 10.0000,
+    "UnitsInStock": 13,
+    "UnitsOnOrder": 70,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductName": "Chef Anton's Cajun Seasoning",
+    "SupplierID": 2,
+    "CategoryID": 2,
+    "QuantityPerUnit": "48 - 6 oz jars",
+    "UnitPrice": 22.0000,
+    "UnitsInStock": 53,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 0,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+},{
+    "ProductName": "Chai",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "10 boxes x 20 bags",
+    "UnitPrice": 18.0000,
+    "UnitsInStock": 39,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 10,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Chang",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "24 - 12 oz bottles",
+    "UnitPrice": 19.0000,
+    "UnitsInStock": 17,
+    "UnitsOnOrder": 40,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Aniseed Syrup",
+    "SupplierID": 1,
+    "CategoryID": 2,
+    "QuantityPerUnit": "12 - 550 ml bottles",
+    "UnitPrice": 10.0000,
+    "UnitsInStock": 13,
+    "UnitsOnOrder": 70,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductName": "Chef Anton's Cajun Seasoning",
+    "SupplierID": 2,
+    "CategoryID": 2,
+    "QuantityPerUnit": "48 - 6 oz jars",
+    "UnitPrice": 22.0000,
+    "UnitsInStock": 53,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 0,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+},{
+    "ProductName": "Chai",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "10 boxes x 20 bags",
+    "UnitPrice": 18.0000,
+    "UnitsInStock": 39,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 10,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Chang",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "24 - 12 oz bottles",
+    "UnitPrice": 19.0000,
+    "UnitsInStock": 17,
+    "UnitsOnOrder": 40,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Aniseed Syrup",
+    "SupplierID": 1,
+    "CategoryID": 2,
+    "QuantityPerUnit": "12 - 550 ml bottles",
+    "UnitPrice": 10.0000,
+    "UnitsInStock": 13,
+    "UnitsOnOrder": 70,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductName": "Chef Anton's Cajun Seasoning",
+    "SupplierID": 2,
+    "CategoryID": 2,
+    "QuantityPerUnit": "48 - 6 oz jars",
+    "UnitPrice": 22.0000,
+    "UnitsInStock": 53,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 0,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+},{
+    "ProductName": "Chai",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "10 boxes x 20 bags",
+    "UnitPrice": 18.0000,
+    "UnitsInStock": 39,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 10,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Chang",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "24 - 12 oz bottles",
+    "UnitPrice": 19.0000,
+    "UnitsInStock": 17,
+    "UnitsOnOrder": 40,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Aniseed Syrup",
+    "SupplierID": 1,
+    "CategoryID": 2,
+    "QuantityPerUnit": "12 - 550 ml bottles",
+    "UnitPrice": 10.0000,
+    "UnitsInStock": 13,
+    "UnitsOnOrder": 70,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductName": "Chef Anton's Cajun Seasoning",
+    "SupplierID": 2,
+    "CategoryID": 2,
+    "QuantityPerUnit": "48 - 6 oz jars",
+    "UnitPrice": 22.0000,
+    "UnitsInStock": 53,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 0,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+},{
+    "ProductName": "Chai",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "10 boxes x 20 bags",
+    "UnitPrice": 18.0000,
+    "UnitsInStock": 39,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 10,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Chang",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "24 - 12 oz bottles",
+    "UnitPrice": 19.0000,
+    "UnitsInStock": 17,
+    "UnitsOnOrder": 40,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Aniseed Syrup",
+    "SupplierID": 1,
+    "CategoryID": 2,
+    "QuantityPerUnit": "12 - 550 ml bottles",
+    "UnitPrice": 10.0000,
+    "UnitsInStock": 13,
+    "UnitsOnOrder": 70,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductName": "Chef Anton's Cajun Seasoning",
+    "SupplierID": 2,
+    "CategoryID": 2,
+    "QuantityPerUnit": "48 - 6 oz jars",
+    "UnitPrice": 22.0000,
+    "UnitsInStock": 53,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 0,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+},{
+    "ProductName": "Chai",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "10 boxes x 20 bags",
+    "UnitPrice": 18.0000,
+    "UnitsInStock": 39,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 10,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Chang",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "24 - 12 oz bottles",
+    "UnitPrice": 19.0000,
+    "UnitsInStock": 17,
+    "UnitsOnOrder": 40,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Aniseed Syrup",
+    "SupplierID": 1,
+    "CategoryID": 2,
+    "QuantityPerUnit": "12 - 550 ml bottles",
+    "UnitPrice": 10.0000,
+    "UnitsInStock": 13,
+    "UnitsOnOrder": 70,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductName": "Chef Anton's Cajun Seasoning",
+    "SupplierID": 2,
+    "CategoryID": 2,
+    "QuantityPerUnit": "48 - 6 oz jars",
+    "UnitPrice": 22.0000,
+    "UnitsInStock": 53,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 0,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+},{
+    "ProductName": "Chai",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "10 boxes x 20 bags",
+    "UnitPrice": 18.0000,
+    "UnitsInStock": 39,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 10,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Chang",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "24 - 12 oz bottles",
+    "UnitPrice": 19.0000,
+    "UnitsInStock": 17,
+    "UnitsOnOrder": 40,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Aniseed Syrup",
+    "SupplierID": 1,
+    "CategoryID": 2,
+    "QuantityPerUnit": "12 - 550 ml bottles",
+    "UnitPrice": 10.0000,
+    "UnitsInStock": 13,
+    "UnitsOnOrder": 70,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductName": "Chef Anton's Cajun Seasoning",
+    "SupplierID": 2,
+    "CategoryID": 2,
+    "QuantityPerUnit": "48 - 6 oz jars",
+    "UnitPrice": 22.0000,
+    "UnitsInStock": 53,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 0,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+},{
+    "ProductName": "Chai",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "10 boxes x 20 bags",
+    "UnitPrice": 18.0000,
+    "UnitsInStock": 39,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 10,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Chang",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "24 - 12 oz bottles",
+    "UnitPrice": 19.0000,
+    "UnitsInStock": 17,
+    "UnitsOnOrder": 40,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Aniseed Syrup",
+    "SupplierID": 1,
+    "CategoryID": 2,
+    "QuantityPerUnit": "12 - 550 ml bottles",
+    "UnitPrice": 10.0000,
+    "UnitsInStock": 13,
+    "UnitsOnOrder": 70,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductName": "Chef Anton's Cajun Seasoning",
+    "SupplierID": 2,
+    "CategoryID": 2,
+    "QuantityPerUnit": "48 - 6 oz jars",
+    "UnitPrice": 22.0000,
+    "UnitsInStock": 53,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 0,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+},{
+    "ProductName": "Chai",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "10 boxes x 20 bags",
+    "UnitPrice": 18.0000,
+    "UnitsInStock": 39,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 10,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Chang",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "24 - 12 oz bottles",
+    "UnitPrice": 19.0000,
+    "UnitsInStock": 17,
+    "UnitsOnOrder": 40,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Aniseed Syrup",
+    "SupplierID": 1,
+    "CategoryID": 2,
+    "QuantityPerUnit": "12 - 550 ml bottles",
+    "UnitPrice": 10.0000,
+    "UnitsInStock": 13,
+    "UnitsOnOrder": 70,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductName": "Chef Anton's Cajun Seasoning",
+    "SupplierID": 2,
+    "CategoryID": 2,
+    "QuantityPerUnit": "48 - 6 oz jars",
+    "UnitPrice": 22.0000,
+    "UnitsInStock": 53,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 0,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+},{
+    "ProductName": "Chai",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "10 boxes x 20 bags",
+    "UnitPrice": 18.0000,
+    "UnitsInStock": 39,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 10,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Chang",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "24 - 12 oz bottles",
+    "UnitPrice": 19.0000,
+    "UnitsInStock": 17,
+    "UnitsOnOrder": 40,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Aniseed Syrup",
+    "SupplierID": 1,
+    "CategoryID": 2,
+    "QuantityPerUnit": "12 - 550 ml bottles",
+    "UnitPrice": 10.0000,
+    "UnitsInStock": 13,
+    "UnitsOnOrder": 70,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductName": "Chef Anton's Cajun Seasoning",
+    "SupplierID": 2,
+    "CategoryID": 2,
+    "QuantityPerUnit": "48 - 6 oz jars",
+    "UnitPrice": 22.0000,
+    "UnitsInStock": 53,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 0,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+},{
+    "ProductName": "Chai",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "10 boxes x 20 bags",
+    "UnitPrice": 18.0000,
+    "UnitsInStock": 39,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 10,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Chang",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "24 - 12 oz bottles",
+    "UnitPrice": 19.0000,
+    "UnitsInStock": 17,
+    "UnitsOnOrder": 40,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Aniseed Syrup",
+    "SupplierID": 1,
+    "CategoryID": 2,
+    "QuantityPerUnit": "12 - 550 ml bottles",
+    "UnitPrice": 10.0000,
+    "UnitsInStock": 13,
+    "UnitsOnOrder": 70,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductName": "Chef Anton's Cajun Seasoning",
+    "SupplierID": 2,
+    "CategoryID": 2,
+    "QuantityPerUnit": "48 - 6 oz jars",
+    "UnitPrice": 22.0000,
+    "UnitsInStock": 53,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 0,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+},{
+    "ProductName": "Chai",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "10 boxes x 20 bags",
+    "UnitPrice": 18.0000,
+    "UnitsInStock": 39,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 10,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Chang",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "24 - 12 oz bottles",
+    "UnitPrice": 19.0000,
+    "UnitsInStock": 17,
+    "UnitsOnOrder": 40,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 1,
+        "CategoryName": "Beverages",
+        "Description": "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductName": "Aniseed Syrup",
+    "SupplierID": 1,
+    "CategoryID": 2,
+    "QuantityPerUnit": "12 - 550 ml bottles",
+    "UnitPrice": 10.0000,
+    "UnitsInStock": 13,
+    "UnitsOnOrder": 70,
+    "ReorderLevel": 25,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductName": "Chef Anton's Cajun Seasoning",
+    "SupplierID": 2,
+    "CategoryID": 2,
+    "QuantityPerUnit": "48 - 6 oz jars",
+    "UnitPrice": 22.0000,
+    "UnitsInStock": 53,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 0,
+    "Discontinued": false,
+    "Category": {
+        "CategoryID": 2,
+        "CategoryName": "Condiments",
+        "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}]
diff --git a/vue-options-api-demos/popup/align/absolute/main.js b/vue-options-api-demos/popup/align/absolute/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/popup/align/absolute/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/popup/align/absolute/main.vue b/vue-options-api-demos/popup/align/absolute/main.vue
new file mode 100644
index 00000000..b74097d4
--- /dev/null
+++ b/vue-options-api-demos/popup/align/absolute/main.vue
@@ -0,0 +1,25 @@
+<template>
+    <Popup
+            :offset="offset"
+            :show="true"
+            :popup-class="'popup-content'"
+        >
+            Popup content.
+        </Popup>
+</template>
+<script>
+import './styles.css';
+import { Popup } from '@progress/kendo-vue-popup';
+
+export default {
+    components: {
+      'Popup': Popup
+    },
+    data: function(){
+        return {
+            offset: { left: 150, top: 50 }
+        };
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/popup/align/absolute/styles.css b/vue-options-api-demos/popup/align/absolute/styles.css
new file mode 100644
index 00000000..a22dd864
--- /dev/null
+++ b/vue-options-api-demos/popup/align/absolute/styles.css
@@ -0,0 +1,6 @@
+.popup-content {
+  padding: 30px;
+  color: #787878;
+  background-color: #fcf7f8;
+  border: 1px solid rgba(0,0,0,.05);
+}
diff --git a/vue-options-api-demos/popup/align/basic/main.js b/vue-options-api-demos/popup/align/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/popup/align/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/popup/align/basic/main.vue b/vue-options-api-demos/popup/align/basic/main.vue
new file mode 100644
index 00000000..f4e33d2f
--- /dev/null
+++ b/vue-options-api-demos/popup/align/basic/main.vue
@@ -0,0 +1,48 @@
+<template>
+  <div>
+        <kbutton
+            @click="onClick"
+            ref="button"
+        >
+            {{buttonText}}
+        </kbutton>
+        <Popup
+            :anchor="'button'"
+            :show="show"
+            :popup-class="'popup-content'"
+        >
+            Popup content.
+        </Popup>
+    </div>
+</template>
+<script>
+import './styles.css';
+import { Popup } from '@progress/kendo-vue-popup';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'Popup': Popup,
+      'kbutton': Button
+    },
+    data: function(){
+        return {
+            show: false
+        };
+    },
+    computed: {
+        buttonText: function(){
+            return this.show ? 'Hide' : 'Show';
+        }
+    },
+    mounted(){
+        this.show= true;
+    },
+    methods: {
+         onClick () {
+            this.show = !this.show;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/popup/align/basic/styles.css b/vue-options-api-demos/popup/align/basic/styles.css
new file mode 100644
index 00000000..75c49538
--- /dev/null
+++ b/vue-options-api-demos/popup/align/basic/styles.css
@@ -0,0 +1,6 @@
+.popup-content {
+    padding: 30px;
+    color: #787878;
+    background-color: #fcf7f8;
+    border: 1px solid rgba(0,0,0,.05);
+  }
diff --git a/vue-options-api-demos/popup/align/positioning/main.js b/vue-options-api-demos/popup/align/positioning/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/popup/align/positioning/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/popup/align/positioning/main.vue b/vue-options-api-demos/popup/align/positioning/main.vue
new file mode 100644
index 00000000..ba329f8d
--- /dev/null
+++ b/vue-options-api-demos/popup/align/positioning/main.vue
@@ -0,0 +1,118 @@
+<template>
+   <div>
+    <div class="example-config row">
+                        <div class="col-sm-4 col-xs-12">
+                            <h4>Anchor align point</h4>
+                            <p>
+                                Horizontal <br />
+                                <dropdownlist
+                                    :style="{ width: '230px'}"
+                                    name="anchorHorizontal" v-model="anchorHorizontal" :data-items="horizontalOptions">
+                                </dropdownlist>
+                            </p>
+                            <p>
+                                Vertical <br />
+                                <dropdownlist
+                                    :style="{ width: '230px'}"
+                                    name="anchorVertical" v-model="anchorVertical" :data-items="verticalOptions">
+                                </dropdownlist>
+                            </p>
+                        </div>
+                        <div class="col-sm-4 col-xs-12">
+                            <h4>Popup align point</h4>
+                            <p>
+                                Horizontal <br />
+                                <dropdownlist
+                                    :style="{ width: '230px'}"
+                                    name="popupHorizontal" v-model="popupHorizontal" :data-items="horizontalOptions">
+                                </dropdownlist>
+                            </p>
+                            <p>
+                                Vertical <br />
+                                 <dropdownlist
+                                    :style="{ width: '230px'}"
+                                    name="popupVertical" v-model="popupVertical" :data-items="verticalOptions">
+                                </dropdownlist>
+                            </p>
+                        </div>
+                        <div class="col-sm-4 col-xs-12">
+                            <h4>Popup action</h4>
+                            <br />
+                               <kbutton
+                                @click="onClick"
+                            >
+                                {{buttonText}}
+                            </kbutton>
+                        </div>
+                    </div>
+        <span
+            ref="anchor"
+            class="anchor content"
+        >
+            ANCHOR
+        </span>
+     
+        <Popup
+            :anchor="'anchor'"
+            :show="show"
+            :anchor-align="anchorAlign"
+            :popup-align="popupAlign"
+        >
+           <div class="content popup-inner-content">
+                <p>Popup content.</p>
+            </div>
+        </Popup>
+    </div>
+</template>
+<script>
+import './styles.css';
+import { Popup } from '@progress/kendo-vue-popup';
+import { Button } from '@progress/kendo-vue-buttons';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+
+export default {
+    components: {
+      'Popup': Popup,
+      'kbutton': Button,
+      'dropdownlist': DropDownList
+    },
+     data: function(){
+        return {
+            anchor: null,
+            anchorHorizontal: 'left',
+            anchorVertical: 'bottom',
+            popupHorizontal: 'right',
+            popupVertical: 'top',
+            show: false,
+            horizontalOptions: ['left','center','right'],
+            verticalOptions: ['top', 'middle', 'bottom']
+        };
+    },
+    computed: {
+        buttonText: function(){
+            return this.show ? 'Hide' : 'Show';
+        },
+        anchorAlign: function(){
+            return {
+                horizontal: this.anchorHorizontal,
+                vertical: this.anchorVertical
+            };
+        },
+        popupAlign: function(){
+            return {
+                horizontal: this.popupHorizontal,
+                vertical: this.popupVertical
+            };
+        }
+    },
+    mounted(){
+        this.show= true;
+    },
+    methods: {
+         onClick () {
+            this.show = !this.show;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/popup/align/positioning/styles.css b/vue-options-api-demos/popup/align/positioning/styles.css
new file mode 100644
index 00000000..49f911de
--- /dev/null
+++ b/vue-options-api-demos/popup/align/positioning/styles.css
@@ -0,0 +1,23 @@
+.content {
+  padding: 30px;
+  color: #ffffff;
+  background-color: #999999;
+  border: 1px solid rgba(0,0,0,.05);
+}
+
+.popup-inner-content {
+  width: 100px;
+  height: 50px;
+  margin: 0;
+  padding: 0;
+}
+
+.content p {
+  margin: 0;
+}
+
+.anchor {
+  display: block;
+  width: 120px;
+  margin: 100px auto;
+}
diff --git a/vue-options-api-demos/popup/animations/main.js b/vue-options-api-demos/popup/animations/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/popup/animations/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/popup/animations/main.vue b/vue-options-api-demos/popup/animations/main.vue
new file mode 100644
index 00000000..5f6b5274
--- /dev/null
+++ b/vue-options-api-demos/popup/animations/main.vue
@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <div class="example-config">
+      <input
+        id="animate"
+        type="checkbox"
+        class="k-checkbox k-checkbox-md k-rounded-md"
+        v-model="animate"
+      />
+      <label for="animate" class="k-checkbox-label">Animate</label>
+      <hr />
+      <knumerictextbox
+        id="animationDuration"
+        :min="0"
+        :disabled="!animate"
+        v-model.number="animationDuration"
+        :style="{ width: '100px' }"
+      />
+      <label for="animationDuration" class="k-label"
+        >&nbsp;Animation duration</label
+      >
+      <hr />
+    </div>
+    <kbutton @click="onClick" ref="button">
+      {{ buttonText }}
+    </kbutton>
+    <Popup
+      :anchor="'button'"
+      :show="show"
+      :animate="computedAnimate"
+      :popup-class="'popup-content'"
+    >
+      Popup content.
+    </Popup>
+  </div>
+</template>
+<script>
+import "./styles.css";
+import { Popup } from "@progress/kendo-vue-popup";
+import { Button } from "@progress/kendo-vue-buttons";
+import { NumericTextBox } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    Popup: Popup,
+    kbutton: Button,
+    knumerictextbox: NumericTextBox,
+  },
+  data: function () {
+    return {
+      show: false,
+      animate: true,
+      animationDuration: 300,
+    };
+  },
+  computed: {
+    buttonText: function () {
+      return this.show ? "Hide" : "Show";
+    },
+    computedAnimate: function () {
+      return this.animate
+        ? {
+            openDuration: this.animationDuration,
+            closeDuration: this.animationDuration,
+          }
+        : false;
+    },
+  },
+  mounted() {
+    this.show = true;
+  },
+  methods: {
+    onClick() {
+      this.show = !this.show;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/popup/animations/styles.css b/vue-options-api-demos/popup/animations/styles.css
new file mode 100644
index 00000000..75c49538
--- /dev/null
+++ b/vue-options-api-demos/popup/animations/styles.css
@@ -0,0 +1,6 @@
+.popup-content {
+    padding: 30px;
+    color: #787878;
+    background-color: #fcf7f8;
+    border: 1px solid rgba(0,0,0,.05);
+  }
diff --git a/vue-options-api-demos/popup/basic/main.js b/vue-options-api-demos/popup/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/popup/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/popup/basic/main.vue b/vue-options-api-demos/popup/basic/main.vue
new file mode 100644
index 00000000..9712a92b
--- /dev/null
+++ b/vue-options-api-demos/popup/basic/main.vue
@@ -0,0 +1,48 @@
+<template>
+ <div>
+       <kbutton
+            @click="onClick"
+            ref="button"
+        >
+            {{buttonText}}
+        </kbutton>
+        <Popup
+            :anchor="'button'"
+            :show="show"
+            :popup-class="'popup-content'"
+        >
+            Popup content.
+        </Popup>
+    </div>
+</template>
+<script>
+import './styles.css';
+import { Popup } from '@progress/kendo-vue-popup';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'Popup': Popup,
+      'kbutton': Button
+    },
+    data: function(){
+        return {
+            show: false
+        };
+    },
+    computed: {
+        buttonText: function(){
+            return this.show ? 'Hide' : 'Show';
+        }
+    },
+    mounted(){
+        this.show= true;
+    },
+    methods: {
+         onClick () {
+            this.show = !this.show;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/popup/basic/styles.css b/vue-options-api-demos/popup/basic/styles.css
new file mode 100644
index 00000000..5a41f98d
--- /dev/null
+++ b/vue-options-api-demos/popup/basic/styles.css
@@ -0,0 +1,6 @@
+.popup-content {
+    padding: 30px;
+    color: #787878;
+    background-color: #fcf7f8;
+    border: 1px solid rgba(0,0,0,.05);
+}
diff --git a/vue-options-api-demos/popup/hidden/main.js b/vue-options-api-demos/popup/hidden/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/popup/hidden/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/popup/hidden/main.vue b/vue-options-api-demos/popup/hidden/main.vue
new file mode 100644
index 00000000..9712a92b
--- /dev/null
+++ b/vue-options-api-demos/popup/hidden/main.vue
@@ -0,0 +1,48 @@
+<template>
+ <div>
+       <kbutton
+            @click="onClick"
+            ref="button"
+        >
+            {{buttonText}}
+        </kbutton>
+        <Popup
+            :anchor="'button'"
+            :show="show"
+            :popup-class="'popup-content'"
+        >
+            Popup content.
+        </Popup>
+    </div>
+</template>
+<script>
+import './styles.css';
+import { Popup } from '@progress/kendo-vue-popup';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'Popup': Popup,
+      'kbutton': Button
+    },
+    data: function(){
+        return {
+            show: false
+        };
+    },
+    computed: {
+        buttonText: function(){
+            return this.show ? 'Hide' : 'Show';
+        }
+    },
+    mounted(){
+        this.show= true;
+    },
+    methods: {
+         onClick () {
+            this.show = !this.show;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/popup/hidden/styles.css b/vue-options-api-demos/popup/hidden/styles.css
new file mode 100644
index 00000000..5a41f98d
--- /dev/null
+++ b/vue-options-api-demos/popup/hidden/styles.css
@@ -0,0 +1,6 @@
+.popup-content {
+    padding: 30px;
+    color: #787878;
+    background-color: #fcf7f8;
+    border: 1px solid rgba(0,0,0,.05);
+}
diff --git a/vue-options-api-demos/popup/styling/main.js b/vue-options-api-demos/popup/styling/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/popup/styling/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/popup/styling/main.vue b/vue-options-api-demos/popup/styling/main.vue
new file mode 100644
index 00000000..2d6b8958
--- /dev/null
+++ b/vue-options-api-demos/popup/styling/main.vue
@@ -0,0 +1,49 @@
+<template>
+ <div>
+        <kbutton
+            @click="onClick"
+            ref="button"
+        >
+            {{buttonText}}
+        </kbutton>
+        <Popup
+            :anchor="'button'"
+            :show="show"
+            class="wrapper"
+            :popup-class="'inner-wrapper'"
+        >
+            Popup content.
+        </Popup>
+    </div>
+</template>
+<script>
+import './styles.css';
+import { Popup } from '@progress/kendo-vue-popup';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'Popup': Popup,
+      'kbutton': Button
+    },
+   data: function(){
+        return {
+            show: false
+        };
+    },
+    computed: {
+        buttonText: function(){
+            return this.show ? 'Hide' : 'Show';
+        }
+    },
+    mounted(){
+        this.show= true;
+    },
+    methods: {
+         onClick () {
+            this.show = !this.show;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/popup/styling/styles.css b/vue-options-api-demos/popup/styling/styles.css
new file mode 100644
index 00000000..a43fd222
--- /dev/null
+++ b/vue-options-api-demos/popup/styling/styles.css
@@ -0,0 +1,9 @@
+.wrapper {
+    color: #ffffff;
+    background-color: #eeeeee;
+  }
+
+  .inner-wrapper {
+      padding: 20px;
+      background-color: #fcfcfc;
+  }
diff --git a/vue-options-api-demos/popup/viewport/main.js b/vue-options-api-demos/popup/viewport/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/popup/viewport/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/popup/viewport/main.vue b/vue-options-api-demos/popup/viewport/main.vue
new file mode 100644
index 00000000..5197587e
--- /dev/null
+++ b/vue-options-api-demos/popup/viewport/main.vue
@@ -0,0 +1,56 @@
+<template>
+    <div>
+        <kbutton
+            class="anchor"
+            @click="onClick"
+            ref="button"
+        >
+            {{buttonText}}
+        </kbutton>
+        <Popup
+            :anchor="'button'"
+            :show="show"
+            :popup-class="'popup-content'"
+            :collision="collision"
+        >
+           <div class="popup-inner-content">
+                Popup
+            </div>
+        </Popup>
+    </div>
+</template>
+<script>
+import './styles.css';
+import { Popup } from '@progress/kendo-vue-popup';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+      'Popup': Popup,
+      'kbutton': Button
+    },
+     data: function(){
+        return {
+            show: false,
+            collision: {
+                horizontal: "fit",
+                vertical: "flip"
+            }
+        };
+    },
+    computed: {
+        buttonText: function(){
+            return this.show ? 'Hide' : 'Show';
+        }
+    },
+    mounted(){
+        this.show= true;
+    },
+    methods: {
+         onClick () {
+            this.show = !this.show;
+        }
+    }
+};
+
+</script>
diff --git a/vue-options-api-demos/popup/viewport/styles.css b/vue-options-api-demos/popup/viewport/styles.css
new file mode 100644
index 00000000..d1a10bdf
--- /dev/null
+++ b/vue-options-api-demos/popup/viewport/styles.css
@@ -0,0 +1,19 @@
+.popup-content {
+    color: #787878;
+    background-color: #fcf7f8;
+    border: 1px solid rgba(0,0,0,.05);
+    padding: 30px;
+}
+
+.popup-inner-content {
+    width: 100px;
+    height: 50px;
+    margin: 0;
+    padding: 0;
+}
+
+.anchor {
+    position: absolute;
+    top: 150px;
+    left: 50px;
+}
diff --git a/vue-options-api-demos/progressbars/chunkprogressbar/appearance/FormContent.vue b/vue-options-api-demos/progressbars/chunkprogressbar/appearance/FormContent.vue
new file mode 100644
index 00000000..d026470d
--- /dev/null
+++ b/vue-options-api-demos/progressbars/chunkprogressbar/appearance/FormContent.vue
@@ -0,0 +1,141 @@
+<template>
+    <form-element :style="{ maxWidth: '650px' }">
+      <fieldset class="k-form-fieldset">
+        <legend class="k-form-legend">
+          PROFILE COMPLETENESS: {{ completeness }}%
+        </legend>
+        <ChunkProgressBar
+          :value="completeness"
+          :empty-style="emptyStyles"
+          :progressStyle="progressStyles"
+          :chunk-count="chunks"
+        />
+        <div class="mb-3">
+          <field
+            :name="'firstName'"
+            :component="'myTemplate'"
+            :label="'First name'"
+          >
+            <template v-slot:myTemplate="{ props }">
+              <forminput
+                v-bind="props"
+                @change="props.onChange"
+                @blur="props.onBlur"
+                @focus="props.onFocus"
+              />
+            </template>
+          </field>
+        </div>
+        <div class="mb-3">
+          <field
+            :name="'lastName'"
+            :component="'myTemplate'"
+            :label="'Last name'"
+          >
+            <template v-slot:myTemplate="{ props }">
+              <forminput
+                v-bind="props"
+                @change="props.onChange"
+                @blur="props.onBlur"
+                @focus="props.onFocus"
+              />
+            </template>
+          </field>
+        </div>
+        <div class="mb-3">
+          <field
+            :id="'gender'"
+            :name="'gender'"
+            :label="'Gender'"
+            :component="'myTemplate'"
+            :data="genders"
+          >
+            <template v-slot:myTemplate="{ props }">
+              <formdropdownlist
+                v-bind="props"
+                @change="props.onChange"
+                @blur="props.onBlur"
+                @focus="props.onFocus"
+              ></formdropdownlist>
+            </template>
+          </field>
+        </div>
+        <div class="mb-3">
+          <field
+            :name="'occupation'"
+            :component="'myTemplate'"
+            :label="'Occupation'"
+          >
+            <template v-slot:myTemplate="{ props }">
+              <forminput
+                v-bind="props"
+                @change="props.onChange"
+                @blur="props.onBlur"
+                @focus="props.onFocus"
+              />
+            </template>
+          </field>
+        </div>
+      </fieldset>
+      <div class="k-form-buttons">
+        <kbutton type="submit" :disabled="!kendoForm.allowSubmit">
+          Submit
+        </kbutton>
+        <kbutton type="button" @click="clear">Clear </kbutton>
+      </div>
+    </form-element>
+  </template>
+  <script>
+  import { Field, FormElement } from '@progress/kendo-vue-form';
+  import FormInput from './FormInput.vue';
+  import FormDropDownList from './FormDropDownList.vue';
+  import { Button } from '@progress/kendo-vue-buttons';
+  import { ChunkProgressBar } from '@progress/kendo-vue-progressbars';
+  
+  const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+  const emailValidator = (value) =>
+    emailRegex.test(value) ? '' : 'Please enter a valid email.';
+  
+  export default {
+    components: {
+      field: Field,
+      'form-element': FormElement,
+      forminput: FormInput,
+      formdropdownlist: FormDropDownList,
+      kbutton: Button,
+      ChunkProgressBar,
+    },
+    inject: {
+      kendoForm: { default: {} },
+    },
+    data: function () {
+      return {
+        emailValidator: emailValidator,
+        chunks: 4,
+        emptyStyles: { background: 'pink' },
+        progressStyles: { background: 'lightgreen' },
+        genders: ['Male', 'Female', 'Other'],
+      };
+    },
+    methods: {
+      handleSubmit(dataItem) {
+        alert(JSON.stringify(dataItem, null, 2));
+      },
+      clear() {
+        this.kendoForm.onFormReset();
+      },
+    },
+    computed: {
+      completeness() {
+        return (
+          Object.keys(this.kendoForm.values).reduce(
+            (sum, currentVal) =>
+              sum + (!!this.kendoForm.values[currentVal] ? 1 : 0),
+            0
+          ) * 25
+        );
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/progressbars/chunkprogressbar/appearance/FormDropDownList.vue b/vue-options-api-demos/progressbars/chunkprogressbar/appearance/FormDropDownList.vue
new file mode 100644
index 00000000..0c08d742
--- /dev/null
+++ b/vue-options-api-demos/progressbars/chunkprogressbar/appearance/FormDropDownList.vue
@@ -0,0 +1,82 @@
+<template>
+    <fieldwrapper>
+      <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+        {{ label }} {{ value }}
+      </klabel>
+      <div class="k-form-field-wrap">
+        <dropdownlist
+          :style="{ width: '230px' }"
+          :data-items="data"
+          :valid="valid"
+          :value="value"
+          :id="id"
+          @change="handleChange"
+          @blur="handleBlur"
+          @focus="handleFocus"
+        />
+        <error v-if="showValidationMessage">
+          {{ validationMessage }}
+        </error>
+        <hint v-else>{{ hint }}</hint>
+      </div>
+    </fieldwrapper>
+  </template>
+  <script>
+  import { FieldWrapper } from '@progress/kendo-vue-form';
+  import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+  import { DropDownList } from '@progress/kendo-vue-dropdowns';
+  export default {
+    props: {
+      textField: String,
+      data: Object,
+      touched: Boolean,
+      label: String,
+      validationMessage: String,
+      hint: String,
+      id: String,
+      valid: Boolean,
+      value: {
+        type: String,
+        default: '',
+      },
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      dropdownlist: DropDownList,
+    },
+    emits: {
+      change: null,
+      blur: null,
+      focus: null,
+    },
+    computed: {
+      showValidationMessage() {
+        return this.$props.touched && this.$props.validationMessage;
+      },
+      showHint() {
+        return !this.showValidationMessage && this.$props.hint;
+      },
+      hintId() {
+        return this.showHint ? `${this.$props.id}_hint` : '';
+      },
+      errorId() {
+        return this.showValidationMessage ? `${this.$props.id}_error` : '';
+      },
+    },
+    methods: {
+      handleChange(e) {
+        this.$emit('change', e);
+      },
+      handleBlur(e) {
+        this.$emit('blur', e);
+      },
+      handleFocus(e) {
+        this.$emit('focus', e);
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/progressbars/chunkprogressbar/appearance/FormInput.vue b/vue-options-api-demos/progressbars/chunkprogressbar/appearance/FormInput.vue
new file mode 100644
index 00000000..706d5702
--- /dev/null
+++ b/vue-options-api-demos/progressbars/chunkprogressbar/appearance/FormInput.vue
@@ -0,0 +1,84 @@
+<template>
+    <fieldwrapper>
+        <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid" :disabled="disabled" :optional="optional">
+        {{label}}
+        </klabel>
+        <div class="k-form-field-wrap">
+            <kinput :style="{ width: '230px' }" 
+                :valid="valid"
+                :id="id"
+                :value="value"
+                :disabled="disabled"
+                :placeholder="placeholder"
+                @input="handleChange"
+                @blur="handleBlur"
+                @focus="handleFocus"
+                />
+            <error v-if="showValidationMessage">
+                {{validationMessage}}
+            </error>
+            <hint v-else>{{hint}}</hint>
+        </div>
+    </fieldwrapper> 
+</template>
+<script>
+import { FieldWrapper } from "@progress/kendo-vue-form";
+import { Error, Hint, Label } from "@progress/kendo-vue-labels";
+import { Input } from "@progress/kendo-vue-inputs";
+export default {
+    props: {
+        optional: Boolean,
+        disabled: Boolean,
+        placeholder: String,
+        touched: Boolean,
+        label: String,
+        validationMessage: String,
+        hint: String,
+        id: String,
+        valid: Boolean,
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+      fieldwrapper: FieldWrapper,
+      error: Error,
+      hint: Hint,
+      klabel: Label,
+      kinput: Input
+    },
+    computed: {
+        showValidationMessage() {
+            return this.$props.touched && this.$props.validationMessage;
+        },
+        showHint() {
+            return !this.showValidationMessage && this.$props.hint;
+        },
+        hintId() {
+            return this.showHint ? `${this.$props.id}_hint` : "";
+        },
+        errorId() {
+            return this.showValidationMessage ? `${this.$props.id}_error` : "";
+        }
+    },
+    emits: {
+        input: null,
+        change: null,
+        blur: null,
+        focus: null
+    },
+    methods: {
+        handleChange(e){
+            this.$emit('change', e);
+        },
+        handleBlur(e){
+            this.$emit('blur', e);
+        },
+        handleFocus(e){
+            this.$emit('focus', e);
+        }
+    }
+}
+</script>
+
diff --git a/vue-options-api-demos/progressbars/chunkprogressbar/appearance/main.js b/vue-options-api-demos/progressbars/chunkprogressbar/appearance/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/progressbars/chunkprogressbar/appearance/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/progressbars/chunkprogressbar/appearance/main.vue b/vue-options-api-demos/progressbars/chunkprogressbar/appearance/main.vue
new file mode 100644
index 00000000..38928a06
--- /dev/null
+++ b/vue-options-api-demos/progressbars/chunkprogressbar/appearance/main.vue
@@ -0,0 +1,27 @@
+<template>
+  <k-form :initialValues="formValue" @submit="handleSubmit">
+    <formcontent />
+  </k-form>
+</template>
+
+<script>
+import { Form } from '@progress/kendo-vue-form';
+import FormContent from './FormContent.vue';
+
+export default {
+  components: {
+    'k-form': Form,
+    formcontent: FormContent,
+  },
+  data() {
+    return {
+      formValue: { gender: 'Male' }
+    }
+  },
+  methods: {
+    handleSubmit(dataItem) {
+      alert(JSON.stringify(dataItem, null, 2));
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/progressbars/chunkprogressbar/dimensions/main.js b/vue-options-api-demos/progressbars/chunkprogressbar/dimensions/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/progressbars/chunkprogressbar/dimensions/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/progressbars/chunkprogressbar/dimensions/main.vue b/vue-options-api-demos/progressbars/chunkprogressbar/dimensions/main.vue
new file mode 100644
index 00000000..d0dc86de
--- /dev/null
+++ b/vue-options-api-demos/progressbars/chunkprogressbar/dimensions/main.vue
@@ -0,0 +1,31 @@
+<template>
+  <ChunkProgressBar :value="value" :style="{ width: '450px' }" />
+</template>
+<script>
+import { ChunkProgressBar } from '@progress/kendo-vue-progressbars';
+
+export default {
+  components: {
+    ChunkProgressBar,
+  },
+  data() {
+    return {
+      value: 40,
+    };
+  },
+  mounted() {
+    setInterval(() => {
+      this.handleIncrease();
+    }, 800);
+  },
+  methods: {
+    handleIncrease() {
+      if (this.value < 100) {
+        this.value = this.value + 20;
+      } else {
+        this.value = 0;
+      }
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/progressbars/chunkprogressbar/direction/main.js b/vue-options-api-demos/progressbars/chunkprogressbar/direction/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/progressbars/chunkprogressbar/direction/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/progressbars/chunkprogressbar/direction/main.vue b/vue-options-api-demos/progressbars/chunkprogressbar/direction/main.vue
new file mode 100644
index 00000000..2bed3ecd
--- /dev/null
+++ b/vue-options-api-demos/progressbars/chunkprogressbar/direction/main.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="container">
+    <div class="row mb-4">
+      <div class="col-sm">
+        <p>
+          State:
+          <strong>{{ isProgressBarReversed ? 'Reversed' : 'Default' }}</strong>
+        </p>
+        <KCheckbox
+          :id="'reverse'"
+          v-model="isProgressBarReversed"
+          :label="'Toggle the reverse state'"
+          :labelPlacement="'before'"
+        />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-sm">
+        <ChunkProgressBar :value="value" :reverse="isProgressBarReversed" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ChunkProgressBar } from '@progress/kendo-vue-progressbars';
+import { Checkbox } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    ChunkProgressBar,
+    KCheckbox: Checkbox,
+  },
+  data() {
+    return {
+      value: 40,
+      isProgressBarReversed: false,
+    };
+  },
+  mounted() {
+    setInterval(() => {
+      this.handleIncrease();
+    }, 800);
+  },
+  methods: {
+    handleIncrease() {
+      if (this.value < 100) {
+        this.value = this.value + 20;
+      } else {
+        this.value = 0;
+      }
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/progressbars/chunkprogressbar/disabled/main.js b/vue-options-api-demos/progressbars/chunkprogressbar/disabled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/progressbars/chunkprogressbar/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/progressbars/chunkprogressbar/disabled/main.vue b/vue-options-api-demos/progressbars/chunkprogressbar/disabled/main.vue
new file mode 100644
index 00000000..f2c820f7
--- /dev/null
+++ b/vue-options-api-demos/progressbars/chunkprogressbar/disabled/main.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="container">
+    <div class="row mb-4">
+      <div class="col-sm">
+        <KCheckbox
+          :id="'disabled'"
+          v-model="disabled"
+          :label="'Toggle the disabled state'"
+          :labelPlacement="'before'"
+        />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-sm">
+        <ChunkProgressBar :value="20" :disabled="disabled" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ChunkProgressBar } from '@progress/kendo-vue-progressbars';
+import { Checkbox } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    ChunkProgressBar,
+    KCheckbox: Checkbox,
+  },
+  data() {
+    return {
+      disabled: true,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/progressbars/chunkprogressbar/orientation/main.js b/vue-options-api-demos/progressbars/chunkprogressbar/orientation/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/progressbars/chunkprogressbar/orientation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/progressbars/chunkprogressbar/orientation/main.vue b/vue-options-api-demos/progressbars/chunkprogressbar/orientation/main.vue
new file mode 100644
index 00000000..50cec5ba
--- /dev/null
+++ b/vue-options-api-demos/progressbars/chunkprogressbar/orientation/main.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="row">
+    <div class="col-6 example-col">
+      <p>Horizontal ChunkProgressBar</p>
+      <ChunkProgressBar :value="value" />
+    </div>
+
+    <div class="col-6 example-col">
+      <p>Vertical ChunkProgressBar</p>
+      <ChunkProgressBar :value="value" :orientation="'vertical'" />
+    </div>
+  </div>
+</template>
+<script>
+import { ChunkProgressBar } from '@progress/kendo-vue-progressbars';
+
+export default {
+  components: {
+    ChunkProgressBar,
+  },
+  data() {
+    return {
+      value: 40,
+    };
+  },
+  mounted() {
+    setInterval(() => {
+      this.handleIncrease();
+    }, 800);
+  },
+  methods: {
+    handleIncrease() {
+      if (this.value < 100) {
+        this.value = this.value + 20;
+      } else {
+        this.value = 0;
+      }
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/progressbars/chunkprogressbar/overview/main.js b/vue-options-api-demos/progressbars/chunkprogressbar/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/progressbars/chunkprogressbar/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/progressbars/chunkprogressbar/overview/main.vue b/vue-options-api-demos/progressbars/chunkprogressbar/overview/main.vue
new file mode 100644
index 00000000..7eebd7a0
--- /dev/null
+++ b/vue-options-api-demos/progressbars/chunkprogressbar/overview/main.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <ChunkProgressBar :value="value" />
+  </div>
+</template>
+<script>
+import { ChunkProgressBar } from '@progress/kendo-vue-progressbars';
+
+export default {
+  components: {
+    ChunkProgressBar,
+  },
+  data() {
+    return {
+      value: 0,
+    };
+  },
+  mounted() {
+    setInterval(() => {
+      this.handleIncrease();
+    }, 800);
+  },
+  methods: {
+    handleIncrease() {
+      if (this.value < 100) {
+        this.value = this.value + 20;
+      } else {
+        this.value = 0;
+      }
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/progressbars/chunkprogressbar/value_ranges/main.js b/vue-options-api-demos/progressbars/chunkprogressbar/value_ranges/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/progressbars/chunkprogressbar/value_ranges/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/progressbars/chunkprogressbar/value_ranges/main.vue b/vue-options-api-demos/progressbars/chunkprogressbar/value_ranges/main.vue
new file mode 100644
index 00000000..cd98b693
--- /dev/null
+++ b/vue-options-api-demos/progressbars/chunkprogressbar/value_ranges/main.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="container">
+    <div class="row mb-4">
+      <div class="col-sm">
+        <KCheckbox
+          :id="'indeterminate'"
+          @change="handleClick"
+          :label="'Toggle the indeterminate state'"
+          :labelPlacement="'before'"
+        />
+      </div>
+    </div>
+    <div class="row mb-4">
+      <div class="col-sm">
+        <NumericTextBox
+          :style="{ width: '150px' }"
+          :max="max"
+          :min="min"
+          :value="value"
+          @change="handleChange"
+        />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-sm">
+        <div :style="{ display: 'flex', justifyContent: 'space-between' }">
+          <div class="mr-2">Min: {{ min }}</div>
+          <div class="ml-2">Max: {{ max }}</div>
+        </div>
+        <ChunkProgressBar
+          :min="min"
+          :max="max"
+          :value="value"
+          :chunkCount="10"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ChunkProgressBar } from '@progress/kendo-vue-progressbars';
+import { Checkbox, NumericTextBox } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    ChunkProgressBar,
+    KCheckbox: Checkbox,
+    NumericTextBox,
+  },
+  data() {
+    return {
+      value: 0,
+      prevValue: 0,
+      min: -10,
+      max: 10,
+    };
+  },
+  methods: {
+    handleClick() {
+      if (this.value == null) {
+        this.value = this.prevValue;
+      } else {
+        this.value = null;
+      }
+    },
+    handleChange(e) {
+      this.value = e.target.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/progressbars/get-started/main.js b/vue-options-api-demos/progressbars/get-started/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/progressbars/get-started/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/progressbars/get-started/main.vue b/vue-options-api-demos/progressbars/get-started/main.vue
new file mode 100644
index 00000000..4eba7f5d
--- /dev/null
+++ b/vue-options-api-demos/progressbars/get-started/main.vue
@@ -0,0 +1,18 @@
+<template>
+  <ProgressBar :value="value" />
+</template>
+
+<script>
+import { ProgressBar } from '@progress/kendo-vue-progressbars';
+
+export default {
+  components: {
+    ProgressBar,
+  },
+  data() {
+    return {
+      value: 55,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/progressbars/globalization/main.js b/vue-options-api-demos/progressbars/globalization/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/progressbars/globalization/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/progressbars/globalization/main.vue b/vue-options-api-demos/progressbars/globalization/main.vue
new file mode 100644
index 00000000..eb22fd3d
--- /dev/null
+++ b/vue-options-api-demos/progressbars/globalization/main.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="container" :dir="'rtl'">
+    <div class="row">
+      <div class="col-sm mb-2">ProgressBar</div>
+      <div class="col-sm mb-2">Chunk ProgressBar</div>
+    </div>
+    <div class="row">
+      <div class="col-sm">
+        <ProgressBar :value="value" />
+      </div>
+      <div class="col-sm">
+        <ChunkProgressBar :value="value" :chunk-count="chunks" />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-sm">
+        <div>
+          Value: <strong>{{value}}</strong>
+        </div>
+        <div>
+          Chunk count: <strong>{{chunks}}</strong>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ProgressBar, ChunkProgressBar } from "@progress/kendo-vue-progressbars";
+
+export default {
+  components: {
+    ProgressBar,
+    ChunkProgressBar
+  },
+  data() {
+    return {
+      value: 55,
+      chunks: 20
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/progressbars/overview/main.js b/vue-options-api-demos/progressbars/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/progressbars/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/progressbars/overview/main.vue b/vue-options-api-demos/progressbars/overview/main.vue
new file mode 100644
index 00000000..315d3348
--- /dev/null
+++ b/vue-options-api-demos/progressbars/overview/main.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="container">
+    <div class="row">
+      <div class="col-sm mb-2">ProgressBar</div>
+      <div class="col-sm mb-2">
+          Chunk ProgressBar
+        </div>
+    </div>
+    <div class="row">
+      <div class="col-sm">
+        <ProgressBar :value="value" />
+      </div>
+      <div class="col-sm">
+        <ChunkProgressBar :value="value" :chunkCount="chunkCount" />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-sm">
+        <div>
+          Value: <strong>{{ value }}</strong>
+        </div>
+        <div>
+          Chunks: <strong>{{ chunkCount }}</strong>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ProgressBar, ChunkProgressBar } from "@progress/kendo-vue-progressbars";
+
+export default {
+  components: {
+    ProgressBar,
+    ChunkProgressBar
+  },
+  data() {
+    return {
+      value: 55,
+      chunkCount: 20
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/progressbars/progressbar/animation-2/main.js b/vue-options-api-demos/progressbars/progressbar/animation-2/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/progressbars/progressbar/animation-2/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/progressbars/progressbar/animation-2/main.vue b/vue-options-api-demos/progressbars/progressbar/animation-2/main.vue
new file mode 100644
index 00000000..faa0e637
--- /dev/null
+++ b/vue-options-api-demos/progressbars/progressbar/animation-2/main.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="container">
+    <div class="row mb-4">
+      <div class="col-sm">
+        <Checkbox
+          :id="'animation'"
+          @change="handleAnimation"
+          :label="'Disable the animation'"
+          :label-placement="'before'"
+        />
+      </div>
+    </div>
+    <div class="row mb-4">
+      <div class="col-sm">
+        <ProgressBar :value="animatedValue" :animation="animation" />
+      </div>
+      <div class="col-sm">
+        <kbutton @click="changeProgress">
+          {{ animatedValue === 0 ? "Start progress" : "Reset progress" }}
+        </kbutton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ProgressBar } from "@progress/kendo-vue-progressbars";
+import { Checkbox } from "@progress/kendo-vue-inputs";
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    ProgressBar,
+    Checkbox,
+      'kbutton': Button
+  },
+  data() {
+    return {
+      animation: true,
+      animatedValue: 0,
+    };
+  },
+  methods: {
+    handleAnimation(e) {
+      this.animation = !e.value;
+    },
+    changeProgress() {
+      const newValue = this.animatedValue === 100 ? 0 : 100;
+      this.animatedValue = newValue;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/progressbars/progressbar/animation/main.js b/vue-options-api-demos/progressbars/progressbar/animation/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/progressbars/progressbar/animation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/progressbars/progressbar/animation/main.vue b/vue-options-api-demos/progressbars/progressbar/animation/main.vue
new file mode 100644
index 00000000..faa0e637
--- /dev/null
+++ b/vue-options-api-demos/progressbars/progressbar/animation/main.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="container">
+    <div class="row mb-4">
+      <div class="col-sm">
+        <Checkbox
+          :id="'animation'"
+          @change="handleAnimation"
+          :label="'Disable the animation'"
+          :label-placement="'before'"
+        />
+      </div>
+    </div>
+    <div class="row mb-4">
+      <div class="col-sm">
+        <ProgressBar :value="animatedValue" :animation="animation" />
+      </div>
+      <div class="col-sm">
+        <kbutton @click="changeProgress">
+          {{ animatedValue === 0 ? "Start progress" : "Reset progress" }}
+        </kbutton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ProgressBar } from "@progress/kendo-vue-progressbars";
+import { Checkbox } from "@progress/kendo-vue-inputs";
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    ProgressBar,
+    Checkbox,
+      'kbutton': Button
+  },
+  data() {
+    return {
+      animation: true,
+      animatedValue: 0,
+    };
+  },
+  methods: {
+    handleAnimation(e) {
+      this.animation = !e.value;
+    },
+    changeProgress() {
+      const newValue = this.animatedValue === 100 ? 0 : 100;
+      this.animatedValue = newValue;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/progressbars/progressbar/appearance/main.js b/vue-options-api-demos/progressbars/progressbar/appearance/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/progressbars/progressbar/appearance/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/progressbars/progressbar/appearance/main.vue b/vue-options-api-demos/progressbars/progressbar/appearance/main.vue
new file mode 100644
index 00000000..517cf31e
--- /dev/null
+++ b/vue-options-api-demos/progressbars/progressbar/appearance/main.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="row">
+    <div class="col-12 mb-5">
+      <kinput :style="{ width: '230px' }" :value="value" @input="handleInputChange" />
+    </div>
+    <div class="col-12 mb-5">
+      <ProgressBar
+        :value="value.length"
+        :max="max"
+        :progress-style="progressStyles"
+        :empty-style="emptyStyles"
+        :label-render="'labelTemplate'"
+      >
+        <template v-slot:labelTemplate>
+          <strong style="padding: 0 0.5em">{{ customText }}</strong>
+        </template>
+      </ProgressBar>
+    </div>
+    <div class="col-12">
+      <kbutton @click="resetPassword" :theme-color="'primary'">
+        Reset Password
+      </kbutton>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ProgressBar } from "@progress/kendo-vue-progressbars";
+import { Input } from "@progress/kendo-vue-inputs";
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    ProgressBar,
+    kinput: Input,
+    'kbutton': Button
+  },
+  data() {
+    return {
+      value: "",
+      customText: "Empty",
+      emptyStyles: {
+        color: "",
+        background: "",
+      },
+      progressStyles: {
+        background: "",
+      },
+      max: 9,
+    };
+  },
+  methods: {
+    handleInputChange(e) {
+      if (e.value.length <= 9) {
+        this.value = e.value;
+      }
+
+      switch (e.value.length) {
+        case 0:
+          this.updateAppearance("Empty", "", "", "");
+          break;
+
+        case 1:
+          this.updateAppearance("Weak", "red", "#ee9f05", "#ff000014");
+          break;
+
+        case 5:
+          this.updateAppearance("Good", "#428bca", "#428bca", "#428bca1f");
+          break;
+
+        case 9:
+          this.updateAppearance("Strong", "#8EBC00", "#8EBC00", "#8ebc0021");
+          break;
+
+        default:
+      }
+    },
+    updateAppearance(text, textColor, progressBackground, emptyBackground) {
+      this.customText = text;
+      this.emptyStyles = {
+        color: textColor,
+        background: emptyBackground,
+      };
+      this.progressStyles = {
+        background: progressBackground,
+      };
+    },
+    resetPassword() {
+      this.value = "";
+      this.customText = "Empty";
+      this.emptyStyles = {
+        color: "",
+        background: "",
+      };
+      this.progressStyles = {
+        background: "",
+      };
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/progressbars/progressbar/dimensions/main.js b/vue-options-api-demos/progressbars/progressbar/dimensions/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/progressbars/progressbar/dimensions/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/progressbars/progressbar/dimensions/main.vue b/vue-options-api-demos/progressbars/progressbar/dimensions/main.vue
new file mode 100644
index 00000000..26dda03e
--- /dev/null
+++ b/vue-options-api-demos/progressbars/progressbar/dimensions/main.vue
@@ -0,0 +1,22 @@
+<template>
+  <ProgressBar
+    :value="50"
+    :style="{
+      width: '600px',
+    }"
+  />
+</template>
+
+<script>
+import { ProgressBar } from "@progress/kendo-vue-progressbars";
+
+export default {
+  components: {
+    ProgressBar,
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
diff --git a/vue-options-api-demos/progressbars/progressbar/direction/main.js b/vue-options-api-demos/progressbars/progressbar/direction/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/progressbars/progressbar/direction/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/progressbars/progressbar/direction/main.vue b/vue-options-api-demos/progressbars/progressbar/direction/main.vue
new file mode 100644
index 00000000..63bdc207
--- /dev/null
+++ b/vue-options-api-demos/progressbars/progressbar/direction/main.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="container">
+    <div class="row mb-4">
+      <div class="col-sm">
+        <p>
+          State: <strong>{{ direction ? "Reversed" : "Default" }}</strong>
+        </p>
+        <Checkbox
+          id="reverse"
+          @click="handleReverse"
+          :label="'Toggle the reverse state'"
+          :label-placement="'before'"
+        />
+      </div>
+    </div>
+    <div class="row mb-4">
+      <div class="col-sm">
+        <ProgressBar :value="50" :reverse="direction" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ProgressBar } from "@progress/kendo-vue-progressbars";
+import { Checkbox } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    ProgressBar,
+    Checkbox,
+  },
+  data() {
+    return {
+      direction: false,
+    };
+  },
+  methods: {
+    handleReverse(e) {
+      this.direction = e.target.checked;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/progressbars/progressbar/disabled/main.js b/vue-options-api-demos/progressbars/progressbar/disabled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/progressbars/progressbar/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/progressbars/progressbar/disabled/main.vue b/vue-options-api-demos/progressbars/progressbar/disabled/main.vue
new file mode 100644
index 00000000..90b0522d
--- /dev/null
+++ b/vue-options-api-demos/progressbars/progressbar/disabled/main.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="container">
+    <div class="row mb-4">
+      <div class="col-sm">
+        <Checkbox
+          :id="'disabled'"
+          @click="handleClick"
+          :label="'Toggle the disabled state'"
+          :label-placement="'before'"
+        />
+      </div>
+    </div>
+    <div class="row mb-4">
+      <div class="col-sm">
+        <ProgressBar :value="20" :disabled="disabled" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ProgressBar } from "@progress/kendo-vue-progressbars";
+import { Checkbox } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    ProgressBar,
+    Checkbox,
+  },
+  data() {
+    return {
+      disabled: false,
+    };
+  },
+  methods: {
+    handleClick(e) {
+      this.disabled = e.target.checked;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/progressbars/progressbar/label/custom/main.js b/vue-options-api-demos/progressbars/progressbar/label/custom/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/progressbars/progressbar/label/custom/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/progressbars/progressbar/label/custom/main.vue b/vue-options-api-demos/progressbars/progressbar/label/custom/main.vue
new file mode 100644
index 00000000..2f1cd8c9
--- /dev/null
+++ b/vue-options-api-demos/progressbars/progressbar/label/custom/main.vue
@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <div class="text-center">
+      <kbutton :theme-color="'primary'" @click="start">start</kbutton>
+      <kbutton @click="stop">stop</kbutton>
+      <kbutton @click="reset">reset</kbutton>
+    </div>
+    <br />
+    <div class="text-center">
+      <ProgressBar :value="value" :label-render="'labelTemplate'">
+        <template v-slot:labelTemplate>
+          <strong style="padding: 0 0.5em">{{ value }}% Loading</strong>
+        </template>
+      </ProgressBar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ProgressBar } from "@progress/kendo-vue-progressbars";
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    ProgressBar,
+      'kbutton': Button
+  },
+  data() {
+    return {
+      value: 0,
+      currentInterval: null,
+    };
+  },
+  methods: {
+    start(e) {
+      this.currentInterval = setInterval(() => {
+        if (this.value < 100) {
+          this.value = this.value + 1;
+        }
+      }, 50);
+    },
+    stop(e) {
+      clearInterval(this.currentInterval);
+      this.clearInterval = null;
+    },
+    reset(e) {
+      this.value = 0;
+      clearInterval(this.currentInterval);
+      this.clearInterval = null;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/progressbars/progressbar/label/getting-started/main.js b/vue-options-api-demos/progressbars/progressbar/label/getting-started/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/progressbars/progressbar/label/getting-started/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/progressbars/progressbar/label/getting-started/main.vue b/vue-options-api-demos/progressbars/progressbar/label/getting-started/main.vue
new file mode 100644
index 00000000..5ba307a0
--- /dev/null
+++ b/vue-options-api-demos/progressbars/progressbar/label/getting-started/main.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="container">
+    <div class="row mb-4">
+      <div class="col-sm">
+        <DropDownList
+          :data-items="positions"
+          :value="position"
+          @change="handleChange"
+          :style="{
+            width: 180,
+          }"
+        />
+      </div>
+      <div class="col-sm">
+        <strong>Result:</strong>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-sm">
+        <Checkbox
+          :id="'visibility'"
+          :checked="visible"
+          @click="handleClick"
+          :label="'Toggle the label visibility'"
+          :label-placement="'before'"
+        />
+      </div>
+      <div class="col-sm">
+        <ProgressBar
+          :value="value"
+          :label-visible="visible"
+          :label-placement="position"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ProgressBar } from "@progress/kendo-vue-progressbars";
+import { Checkbox } from "@progress/kendo-vue-inputs";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    ProgressBar,
+    Checkbox,
+    DropDownList,
+  },
+  data() {
+    return {
+      value: 50,
+      visible: true,
+      positions: ["start", "center", "end"],
+      position: "start",
+    };
+  },
+  methods: {
+    handleClick(e) {
+      this.visible = e.target.checked;
+    },
+    handleChange(e) {
+      this.position = e.target.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/progressbars/progressbar/orientation/main.js b/vue-options-api-demos/progressbars/progressbar/orientation/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/progressbars/progressbar/orientation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/progressbars/progressbar/orientation/main.vue b/vue-options-api-demos/progressbars/progressbar/orientation/main.vue
new file mode 100644
index 00000000..225327a0
--- /dev/null
+++ b/vue-options-api-demos/progressbars/progressbar/orientation/main.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="row">
+    <div class="col-6 example-col">
+      <p>Horizontal ProgressBar</p>
+      <ProgressBar :value="50" />
+    </div>
+
+    <div class="col-6 example-col">
+      <p>Vertical ProgressBar</p>
+      <ProgressBar :value="50" :orientation="'vertical'" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { ProgressBar } from "@progress/kendo-vue-progressbars";
+
+export default {
+  components: {
+    ProgressBar,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/progressbars/progressbar/overview/main.js b/vue-options-api-demos/progressbars/progressbar/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/progressbars/progressbar/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/progressbars/progressbar/overview/main.vue b/vue-options-api-demos/progressbars/progressbar/overview/main.vue
new file mode 100644
index 00000000..468bd93f
--- /dev/null
+++ b/vue-options-api-demos/progressbars/progressbar/overview/main.vue
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <div class="text-center">
+      <kbutton :theme-color="'primary'" @click="start">start</kbutton>
+      <kbutton @click="stop">stop</kbutton>
+      <kbutton @click="reset">reset</kbutton>
+    </div>
+    <br />
+    <div class="text-center">
+      <ProgressBar :value="value" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { ProgressBar } from "@progress/kendo-vue-progressbars";
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    ProgressBar,
+      'kbutton': Button
+  },
+  data() {
+    return {
+      value: 0,
+      currentInterval: null,
+    };
+  },
+  methods: {
+    start(e) {
+      this.currentInterval = setInterval(() => {
+        if (this.value < 100) {
+          this.value = this.value + 1;
+        }
+      }, 50);
+    },
+    stop(e) {
+      clearInterval(this.currentInterval);
+      this.clearInterval = null;
+    },
+    reset(e) {
+      this.value = 0;
+      clearInterval(this.currentInterval);
+      this.clearInterval = null;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/progressbars/progressbar/value_ranges/main.js b/vue-options-api-demos/progressbars/progressbar/value_ranges/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/progressbars/progressbar/value_ranges/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/progressbars/progressbar/value_ranges/main.vue b/vue-options-api-demos/progressbars/progressbar/value_ranges/main.vue
new file mode 100644
index 00000000..af2a258c
--- /dev/null
+++ b/vue-options-api-demos/progressbars/progressbar/value_ranges/main.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="container">
+    <div class="row mb-4">
+      <div class="col-sm">
+        <kcheckbox
+          :id="'indeterminate'"
+          @click="handleClick"
+          :label="'Toggle the indeterminate state'"
+          :label-placement="'before'"
+        />
+      </div>
+    </div>
+    <div class="row mb-4">
+      <div class="col-sm">
+        Value:{{ " " }}
+        <NumericTextBox
+          :style="{ width: '150px' }"
+          :max="max"
+          :min="min"
+          :value="value"
+          @change="handleChange"
+        />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-sm">
+        <div :style="{ display: 'flex', justifyContent: 'space-between' }">
+          <div class="mr-2">Min: {{ min }}</div>
+          <div class="ml-2">Max: {{ max }}</div>
+        </div>
+        <ProgressBar :min="min" :max="max" :value="value" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ProgressBar } from "@progress/kendo-vue-progressbars";
+import { Checkbox, NumericTextBox } from "@progress/kendo-vue-inputs";
+
+export default {
+  components: {
+    ProgressBar,
+    kcheckbox: Checkbox,
+    NumericTextBox,
+  },
+  data() {
+    return {
+      value: 0,
+      min: -10,
+      max: 10,
+      prevValue: null,
+    };
+  },
+  watch: {
+    value(_new, old) {
+      this.prevValue = old;
+    },
+  },
+  methods: {
+    handleClick() {
+      if (this.value == null) {
+        this.value = this.prevValue;
+      } else {
+        this.value = null;
+      }
+    },
+    handleChange(e) {
+      this.value = e.target.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/accessibility/summary/main.js b/vue-options-api-demos/scheduler/accessibility/summary/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/accessibility/summary/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/accessibility/summary/main.vue b/vue-options-api-demos/scheduler/accessibility/summary/main.vue
new file mode 100644
index 00000000..3fbcbc92
--- /dev/null
+++ b/vue-options-api-demos/scheduler/accessibility/summary/main.vue
@@ -0,0 +1,9 @@
+<template>
+            <div>Scheudler demo</div>
+</template>
+<script>
+export default {
+
+
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/adaptive-slot-height/disabled/events-utc.js b/vue-options-api-demos/scheduler/adaptive-slot-height/disabled/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/adaptive-slot-height/disabled/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/adaptive-slot-height/disabled/main.js b/vue-options-api-demos/scheduler/adaptive-slot-height/disabled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/adaptive-slot-height/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/adaptive-slot-height/disabled/main.vue b/vue-options-api-demos/scheduler/adaptive-slot-height/disabled/main.vue
new file mode 100644
index 00000000..ecb08a88
--- /dev/null
+++ b/vue-options-api-demos/scheduler/adaptive-slot-height/disabled/main.vue
@@ -0,0 +1,80 @@
+<template>
+  <Scheduler
+    :style="{ height: '900px' }"
+    :resources="resources"
+    :views="views"
+    :defaultDate="displayDate"
+    :dataItems="sampleDataWithResources"
+    :viewSlot="'slotRender'"
+  >
+     <template v-slot:slotRender="{ props }">
+      <SchedulerViewSlot
+        v-bind="props"
+        :expandable="false"
+        :slotStyle="{
+          height: '120px',
+        }"
+      />
+    </template>
+  </Scheduler>
+</template>
+<script>
+import { Scheduler, SchedulerItem, SchedulerViewItem, SchedulerViewSlot } from '@progress/kendo-vue-scheduler';
+import { sampleDataWithResources, displayDate } from './events-utc';
+
+export default {
+  components: {
+    Scheduler,
+    SchedulerViewItem,
+    SchedulerViewSlot
+  },
+  data() {
+    return {
+      resources: [
+        {
+          name: 'Rooms',
+          data: [
+            {
+              text: 'Meeting Room 101',
+              value: 1,
+            },
+            {
+              text: 'Meeting Room 201',
+              value: 2,
+              color: '#FF7272',
+            },
+          ],
+          field: 'roomId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+        {
+          name: 'Persons',
+          data: [
+            {
+              text: 'Peter',
+              value: 1,
+              color: '#5392E4',
+            },
+            {
+              text: 'Alex',
+              value: 2,
+              color: '#54677B',
+            },
+          ],
+          field: 'personId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+      ],
+      views: [
+        { name: 'month', title: 'Month', itemsPerSlot: 2 }
+      ],
+      sampleDataWithResources,
+      displayDate,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/adaptive-slot-height/overview/events-utc.js b/vue-options-api-demos/scheduler/adaptive-slot-height/overview/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/adaptive-slot-height/overview/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/adaptive-slot-height/overview/main.js b/vue-options-api-demos/scheduler/adaptive-slot-height/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/adaptive-slot-height/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/adaptive-slot-height/overview/main.vue b/vue-options-api-demos/scheduler/adaptive-slot-height/overview/main.vue
new file mode 100644
index 00000000..5633c185
--- /dev/null
+++ b/vue-options-api-demos/scheduler/adaptive-slot-height/overview/main.vue
@@ -0,0 +1,88 @@
+<template>
+  <Scheduler
+    :style="{ height: '900px' }"
+    :resources="resources"
+    :views="views"
+    :defaultDate="displayDate"
+    :dataItems="sampleDataWithResources"
+    :viewItem="'itemRender'"
+    :viewSlot="'slotRender'"
+  >
+    <template v-slot:itemRender="{ props }">
+      <SchedulerViewItem
+        v-bind="props"
+        :itemStyle="{
+          height: 'auto',
+        }"
+      />
+    </template>
+     <template v-slot:slotRender="{ props }">
+      <SchedulerViewSlot
+        v-bind="props"
+        :slotStyle="{
+          minHeight: '120px',
+        }"
+      />
+    </template>
+  </Scheduler>
+</template>
+<script>
+import { Scheduler, SchedulerItem, SchedulerViewItem, SchedulerViewSlot } from '@progress/kendo-vue-scheduler';
+import { sampleDataWithResources, displayDate } from './events-utc';
+
+export default {
+  components: {
+    Scheduler,
+    SchedulerViewItem,
+    SchedulerViewSlot
+  },
+  data() {
+    return {
+      resources: [
+        {
+          name: 'Rooms',
+          data: [
+            {
+              text: 'Meeting Room 101',
+              value: 1,
+            },
+            {
+              text: 'Meeting Room 201',
+              value: 2,
+              color: '#FF7272',
+            },
+          ],
+          field: 'roomId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+        {
+          name: 'Persons',
+          data: [
+            {
+              text: 'Peter',
+              value: 1,
+              color: '#5392E4',
+            },
+            {
+              text: 'Alex',
+              value: 2,
+              color: '#54677B',
+            },
+          ],
+          field: 'personId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+      ],
+      views: [
+        { name: 'month', title: 'Month', itemsPerSlot: 8 }
+      ],
+      sampleDataWithResources,
+      displayDate,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/auto-item-height/constant/events-utc.js b/vue-options-api-demos/scheduler/auto-item-height/constant/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/auto-item-height/constant/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/auto-item-height/constant/main.js b/vue-options-api-demos/scheduler/auto-item-height/constant/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/auto-item-height/constant/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/auto-item-height/constant/main.vue b/vue-options-api-demos/scheduler/auto-item-height/constant/main.vue
new file mode 100644
index 00000000..ebcc9ea2
--- /dev/null
+++ b/vue-options-api-demos/scheduler/auto-item-height/constant/main.vue
@@ -0,0 +1,82 @@
+<template>
+  <Scheduler
+    :style="{ height: '900px' }"
+    :resources="resources"
+    :views="views"
+    :defaultDate="displayDate"
+    :dataItems="sampleDataWithResources"
+    :viewItem="'itemRender'"
+  >
+    <template v-slot:itemRender="{ props }">
+      <SchedulerViewItem
+        v-bind="props"
+        :itemStyle="{
+          height: '45px',
+        }"
+      />
+    </template>
+  </Scheduler>
+</template>
+<script>
+import { Scheduler, SchedulerItem, SchedulerViewItem } from '@progress/kendo-vue-scheduler';
+import { sampleDataWithResources, displayDate } from './events-utc';
+
+export default {
+  components: {
+    Scheduler,
+    SchedulerViewItem,
+  },
+  data() {
+    return {
+      resources: [
+        {
+          name: 'Rooms',
+          data: [
+            {
+              text: 'Meeting Room 101',
+              value: 1,
+            },
+            {
+              text: 'Meeting Room 201',
+              value: 2,
+              color: '#FF7272',
+            },
+          ],
+          field: 'roomId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+        {
+          name: 'Persons',
+          data: [
+            {
+              text: 'Peter',
+              value: 1,
+              color: '#5392E4',
+            },
+            {
+              text: 'Alex',
+              value: 2,
+              color: '#54677B',
+            },
+          ],
+          field: 'personId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+      ],
+      views: [
+          { name: 'workweek', title: 'Work week' },
+        { name: 'day', title: 'Day' },
+        { name: 'week', title: 'Week' },
+        { name: 'month', title: 'Month' },
+        { name: 'agenda', title: 'Agenda' },
+      ],
+      sampleDataWithResources,
+      displayDate,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/auto-item-height/overview/events-utc.js b/vue-options-api-demos/scheduler/auto-item-height/overview/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/auto-item-height/overview/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/auto-item-height/overview/main.js b/vue-options-api-demos/scheduler/auto-item-height/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/auto-item-height/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/auto-item-height/overview/main.vue b/vue-options-api-demos/scheduler/auto-item-height/overview/main.vue
new file mode 100644
index 00000000..0b24ab54
--- /dev/null
+++ b/vue-options-api-demos/scheduler/auto-item-height/overview/main.vue
@@ -0,0 +1,82 @@
+<template>
+  <Scheduler
+    :style="{ height: '900px' }"
+    :resources="resources"
+    :views="views"
+    :defaultDate="displayDate"
+    :dataItems="sampleDataWithResources"
+    :viewItem="'itemRender'"
+  >
+    <template v-slot:itemRender="{ props }">
+      <SchedulerViewItem
+        v-bind="props"
+        :itemStyle="{
+          height: 'auto',
+        }"
+      />
+    </template>
+  </Scheduler>
+</template>
+<script>
+import { Scheduler, SchedulerItem, SchedulerViewItem } from '@progress/kendo-vue-scheduler';
+import { sampleDataWithResources, displayDate } from './events-utc';
+
+export default {
+  components: {
+    Scheduler,
+    SchedulerViewItem,
+  },
+  data() {
+    return {
+      resources: [
+        {
+          name: 'Rooms',
+          data: [
+            {
+              text: 'Meeting Room 101',
+              value: 1,
+            },
+            {
+              text: 'Meeting Room 201',
+              value: 2,
+              color: '#FF7272',
+            },
+          ],
+          field: 'roomId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+        {
+          name: 'Persons',
+          data: [
+            {
+              text: 'Peter',
+              value: 1,
+              color: '#5392E4',
+            },
+            {
+              text: 'Alex',
+              value: 2,
+              color: '#54677B',
+            },
+          ],
+          field: 'personId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+      ],
+      views: [
+          { name: 'workweek', title: 'Work week' },
+        { name: 'day', title: 'Day' },
+        { name: 'week', title: 'Week' },
+        { name: 'month', title: 'Month' },
+        { name: 'agenda', title: 'Agenda' },
+      ],
+      sampleDataWithResources,
+      displayDate,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/context/main.js b/vue-options-api-demos/scheduler/context/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/context/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/context/main.vue b/vue-options-api-demos/scheduler/context/main.vue
new file mode 100644
index 00000000..3fbcbc92
--- /dev/null
+++ b/vue-options-api-demos/scheduler/context/main.vue
@@ -0,0 +1,9 @@
+<template>
+            <div>Scheudler demo</div>
+</template>
+<script>
+export default {
+
+
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/custom-templates/agenda/task/events-utc.js b/vue-options-api-demos/scheduler/custom-templates/agenda/task/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/custom-templates/agenda/task/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/custom-templates/agenda/task/main.js b/vue-options-api-demos/scheduler/custom-templates/agenda/task/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/custom-templates/agenda/task/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/custom-templates/agenda/task/main.vue b/vue-options-api-demos/scheduler/custom-templates/agenda/task/main.vue
new file mode 100644
index 00000000..b6d8843c
--- /dev/null
+++ b/vue-options-api-demos/scheduler/custom-templates/agenda/task/main.vue
@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <Scheduler
+      :style="{ height: '700px' }"
+      :data-items="sampleData"
+      :default-date="displayDate"
+      :views="views"
+      :task="'taskRender'"
+    >
+      <template
+        v-slot:taskRender="{
+          props: { title, isAllDay, recurrenceRule, isRecurring, ...others },
+        }"
+      >
+        <SchedulerTask
+          v-bind="others"
+          :class="'agenda-task'"
+          :style="{
+            backgroundColor: isAllDay ? 'green' : 'blue',
+          }"
+        >
+          <div class="k-event-template">
+            <span v-if="isAllDay" class="k-icon k-i-calendar"></span>
+            <span v-if="recurrenceRule" class="k-icon k-i-reload"></span>
+            <span
+              v-if="!recurrenceRule && !isAllDay"
+              class="k-icon k-i-arrow-right"
+            ></span>
+            {{ title }}
+          </div>
+        </SchedulerTask>
+      </template>
+    </Scheduler>
+  </div>
+</template>
+<script>
+import { Scheduler, SchedulerTask } from '@progress/kendo-vue-scheduler';
+import { sampleData, displayDate } from './events-utc';
+
+export default {
+  components: {
+    Scheduler,
+    SchedulerTask,
+  },
+  data() {
+    return {
+      views: [{ name: 'agenda' }],
+      sampleData,
+      displayDate,
+    };
+  },
+};
+</script>
+<style>
+.agenda-task {
+  color: white;
+}
+
+.k-icon {
+  padding-bottom: 4px;
+}
+</style>
diff --git a/vue-options-api-demos/scheduler/custom-templates/events/color/events-utc.js b/vue-options-api-demos/scheduler/custom-templates/events/color/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/custom-templates/events/color/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/custom-templates/events/color/main.js b/vue-options-api-demos/scheduler/custom-templates/events/color/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/custom-templates/events/color/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/custom-templates/events/color/main.vue b/vue-options-api-demos/scheduler/custom-templates/events/color/main.vue
new file mode 100644
index 00000000..b7b7eb7b
--- /dev/null
+++ b/vue-options-api-demos/scheduler/custom-templates/events/color/main.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <Scheduler
+      :style="{ height: '700px' }"
+      :data-items="sampleData"
+      :default-date="displayDate"
+      :views="views"
+      :item="'itemRender'"
+    >
+      <template v-slot:itemRender="{ props }">
+        <SchedulerItem
+          v-bind="props"
+          :itemStyle="{
+            backgroundColor: props.isAllDay ? 'green' : 'blue',
+          }"
+        >
+          <div class="k-event-template">
+            {{ props.title }}
+          </div>
+        </SchedulerItem>
+      </template>
+    </Scheduler>
+  </div>
+</template>
+<script>
+import { Scheduler, SchedulerItem } from '@progress/kendo-vue-scheduler';
+import { sampleData, displayDate } from './events-utc';
+
+export default {
+  components: {
+    Scheduler,
+    SchedulerItem,
+  },
+  data() {
+    return {
+      views: [
+        { name: 'day' },
+        { name: 'workweek', title: 'Work week' },
+        { name: 'week' },
+        { name: 'month' },
+      ],
+      sampleData,
+      displayDate,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/custom-templates/events/image/events-utc.js b/vue-options-api-demos/scheduler/custom-templates/events/image/events-utc.js
new file mode 100644
index 00000000..b7cf1630
--- /dev/null
+++ b/vue-options-api-demos/scheduler/custom-templates/events/image/events-utc.js
@@ -0,0 +1,900 @@
+const baseData = [
+    {
+        TaskID: 4,
+        OwnerID: 2,
+        Title: 'Bowling tournament',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-09T21:00:00.000Z',
+        End: '2013-06-10T00:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 5,
+        OwnerID: 2,
+        Title: 'Take the dog to the vet',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-10T07:00:00.000Z',
+        End: '2013-06-10T08:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 6,
+        OwnerID: 2,
+        Title: 'Call Charlie about the project',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-11T11:30:00.000Z',
+        End: '2013-06-11T13:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 7,
+        OwnerID: 3,
+        Title: 'Meeting with Alex',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-12T11:00:00.000Z',
+        End: '2013-06-12T12:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 9,
+        OwnerID: 2,
+        Title: "Alex's Birthday",
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-14T02:00:00.000Z',
+        End: '2013-06-14T02:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: true,
+        image: null,
+    },
+    {
+        TaskID: 12,
+        OwnerID: 2,
+        Title: 'Car Service',
+        RoomID: 1,
+        Description: 'Might come to work later!',
+        StartTimezone: null,
+        Start: '2013-06-24T08:30:00.000Z',
+        End: '2013-06-24T10:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image:
+            'https://st3.depositphotos.com/1177973/12967/i/450/depositphotos_129673012-stock-photo-cubes-with-words-car-service.jpg',
+    },
+    {
+        TaskID: 14,
+        OwnerID: 3,
+        RoomID: 2,
+        PersonID: 3,
+        Title: 'Replace the printer on the 1st floor',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-24T10:00:00.000Z',
+        End: '2013-06-24T11:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: true,
+        image: null,
+    },
+    {
+        TaskID: 15,
+        OwnerID: 1,
+        Title: 'Attending HR Conference',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-25T00:00:00.000Z',
+        End: '2013-06-26T00:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: true,
+        image: null,
+    },
+    {
+        TaskID: 16,
+        OwnerID: 1,
+        Title: 'Business Lunch with Gregory Watkins',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-25T12:00:00.000Z',
+        End: '2013-06-25T13:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 17,
+        OwnerID: 1,
+        Title: 'Breakfast with CFO and COO',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-27T08:30:00.000Z',
+        End: '2013-06-27T09:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 18,
+        OwnerID: 1,
+        Title: 'Job Interview - Mathew Stevens',
+        Description: 'Junior Researcher',
+        StartTimezone: null,
+        Start: '2013-06-27T10:00:00.000Z',
+        End: '2013-06-27T11:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 19,
+        OwnerID: 1,
+        Title: 'Review CVs with Tim',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-27T11:00:00.000Z',
+        End: '2013-06-27T11:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 20,
+        OwnerID: 1,
+        Title: 'Lunch with Monica',
+        Description: 'Discuss the Employee handbook',
+        StartTimezone: null,
+        Start: '2013-06-27T12:00:00.000Z',
+        End: '2013-06-27T13:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 21,
+        OwnerID: 1,
+        Title: 'Job Interview - John Stewart',
+        Description: 'Accountant',
+        StartTimezone: null,
+        Start: '2013-06-27T14:00:00.000Z',
+        End: '2013-06-27T15:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 22,
+        OwnerID: 1,
+        Title: 'Job Interview - Mary Smith',
+        Description: 'Accountant',
+        StartTimezone: null,
+        Start: '2013-06-27T15:30:00.000Z',
+        End: '2013-06-27T16:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 24,
+        OwnerID: 3,
+        Title: 'Register new Access Cards',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-24T12:00:00.000Z',
+        End: '2013-06-24T12:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: true,
+        image: null,
+    },
+    {
+        TaskID: 25,
+        OwnerID: 1,
+        Title: 'HR Lecture',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-04T19:00:00.000Z',
+        End: '2013-06-04T21:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: 'FREQ=WEEKLY;BYDAY=TU,TH',
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 26,
+        OwnerID: 1,
+        Title: 'Dentist',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-28T08:00:00.000Z',
+        End: '2013-06-28T09:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 27,
+        OwnerID: 1,
+        Title: 'Job Interview - Laura Bailey',
+        Description: 'Helpdesk',
+        StartTimezone: null,
+        Start: '2013-06-28T09:30:00.000Z',
+        End: '2013-06-28T10:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 28,
+        OwnerID: 1,
+        Title: 'Job Interview - Jenny Baxter',
+        Description: 'Helpdesk',
+        StartTimezone: null,
+        Start: '2013-06-28T11:00:00.000Z',
+        End: '2013-06-28T12:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 31,
+        OwnerID: 1,
+        Title: 'Team building prep tasks',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-28T14:00:00.000Z',
+        End: '2013-06-28T17:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 32,
+        OwnerID: 2,
+        RoomID: 2,
+        Title: 'Job Interview - Bernard Atkins',
+        Description: 'Helpdesk',
+        StartTimezone: null,
+        Start: '2013-06-24T13:30:00.000Z',
+        End: '2013-06-24T14:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 34,
+        OwnerID: 1,
+        Title: 'Review Job Applications',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-24T15:00:00.000Z',
+        End: '2013-06-24T17:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 35,
+        OwnerID: 1,
+        Title: 'Grand Canyon tour',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-23T00:00:00.000Z',
+        End: '2013-06-23T00:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: true,
+        image: null,
+    },
+    {
+        TaskID: 40,
+        OwnerID: 3,
+        Title: 'Install new laptops in conference rooms',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-24T13:30:00.000Z',
+        End: '2013-06-24T15:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 66,
+        OwnerID: 3,
+        Title: "Bob's Birthday",
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-29T08:00:00.000Z',
+        End: '2013-06-29T06:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: true,
+        image: null,
+    },
+    {
+        TaskID: 68,
+        OwnerID: 1,
+        RoomID: 2,
+        Title: 'Breakfast with Tom',
+        Description: 'Have to ask him about his holiday plans',
+        StartTimezone: null,
+        Start: '2013-06-24T09:45:00.000Z',
+        End: '2013-06-24T11:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image:
+            'https://st4.depositphotos.com/13349494/27821/i/450/depositphotos_278217016-stock-photo-top-view-tasty-breakfast-pancakes.jpg',
+    },
+    {
+        TaskID: 69,
+        OwnerID: 2,
+        Title: 'Team planning meeting',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-24T10:00:00.000Z',
+        End: '2013-06-24T12:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: true,
+        image: null,
+    },
+    {
+        TaskID: 70,
+        OwnerID: 2,
+        Title: 'Support Phone Call',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-24T16:00:00.000Z',
+        End: '2013-06-24T16:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: true,
+        image: null,
+    },
+    {
+        TaskID: 71,
+        OwnerID: 2,
+        Title: 'Business breakfast with Caroline',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-25T09:00:00.000Z',
+        End: '2013-06-25T10:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 72,
+        OwnerID: 2,
+        Title: "Discuss preojects' deadlines",
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-25T11:00:00.000Z',
+        End: '2013-06-25T11:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 73,
+        OwnerID: 2,
+        Title: 'Support Meeting',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-25T15:00:00.000Z',
+        End: '2013-06-25T16:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 74,
+        OwnerID: 2,
+        Title: 'Dine with Mathew',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-25T18:30:00.000Z',
+        End: '2013-06-25T20:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 79,
+        OwnerID: 2,
+        Title: 'Banking',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-26T09:00:00.000Z',
+        End: '2013-06-26T10:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 80,
+        OwnerID: 3,
+        Title: 'Software updates',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-25T10:00:00.000Z',
+        End: '2013-06-25T12:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 81,
+        OwnerID: 3,
+        Title: 'UPS maintenance',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-25T16:30:00.000Z',
+        End: '2013-06-25T18:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 82,
+        OwnerID: 2,
+        Title: 'Support Call',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-26T11:30:00.000Z',
+        End: '2013-06-26T12:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 83,
+        OwnerID: 3,
+        Title: 'Phone Sync with NY office ',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-26T13:30:00.000Z',
+        End: '2013-06-26T14:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 84,
+        OwnerID: 3,
+        Title: 'Phone Sync with Boston Office',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-26T15:00:00.000Z',
+        End: '2013-06-26T16:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 85,
+        OwnerID: 3,
+        Title: 'Server maintenance',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-26T18:30:00.000Z',
+        End: '2013-06-26T21:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: true,
+        image: null,
+    },
+    {
+        TaskID: 86,
+        OwnerID: 2,
+        Title: 'Status meeting',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-28T13:30:00.000Z',
+        End: '2013-06-28T15:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 87,
+        OwnerID: 3,
+        Title: 'Helpdesk status meeting',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-27T10:30:00.000Z',
+        End: '2013-06-27T11:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 88,
+        OwnerID: 2,
+        Title: 'Business Lunch',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-27T12:00:00.000Z',
+        End: '2013-06-27T13:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 89,
+        OwnerID: 3,
+        Title: 'Employee database update',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-27T14:00:00.000Z',
+        End: '2013-06-27T15:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 90,
+        OwnerID: 3,
+        Title: 'Website upload',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-27T07:30:00.000Z',
+        End: '2013-06-27T08:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 91,
+        OwnerID: 2,
+        Title: 'Meeting with marketing guys',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-27T17:00:00.000Z',
+        End: '2013-06-27T18:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 92,
+        OwnerID: 3,
+        Title: 'Meeting with Internet provider',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-28T10:30:00.000Z',
+        End: '2013-06-28T11:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 93,
+        OwnerID: 3,
+        Title: "Bob's Birthday Party",
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-29T20:00:00.000Z',
+        End: '2013-06-29T23:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 95,
+        OwnerID: 2,
+        Title: 'Dance Practice',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-03T18:30:00.000Z',
+        End: '2013-06-03T20:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,WE',
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 114,
+        OwnerID: 3,
+        Title: 'Software updates',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-04T09:00:00.000Z',
+        End: '2013-06-04T12:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: '',
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 115,
+        OwnerID: 1,
+        Title: 'Breakfast at Starbucks',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-04T08:00:00.000Z',
+        End: '2013-06-04T09:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: '',
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 116,
+        OwnerID: 2,
+        Title: 'Performance review',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-04T14:00:00.000Z',
+        End: '2013-06-04T17:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: '',
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 118,
+        OwnerID: 1,
+        Title: 'HR seminar preparation',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-05T10:00:00.000Z',
+        End: '2013-06-05T12:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: '',
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 119,
+        OwnerID: 3,
+        Title: 'Helpdesk weekly meeting',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-05T15:00:00.000Z',
+        End: '2013-06-05T16:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: 'FREQ=WEEKLY;BYDAY=WE',
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 120,
+        OwnerID: 3,
+        Title: 'Website upload',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-07T07:00:00.000Z',
+        End: '2013-06-07T08:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: '',
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException',
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) =>
+    Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map((dataItem) => ({
+    id: dataItem.TaskID,
+    start: parseAdjust(dataItem.Start),
+    startTimezone: dataItem.startTimezone,
+    end: parseAdjust(dataItem.End),
+    endTimezone: dataItem.endTimezone,
+    isAllDay: dataItem.isAllDay,
+    title: dataItem.Title,
+    description: dataItem.Description,
+    recurrenceRule: dataItem.RecurrenceRule,
+    recurrenceId: dataItem.RecurrenceID,
+    recurrenceExceptions: dataItem.RecurrenceException,
+    image: dataItem.image,
+
+    roomId: dataItem.RoomID,
+    ownerID: dataItem.OwnerID,
+    personId: dataItem.OwnerID,
+}));
+
+export const sampleDataWithResources = baseData.map((dataItem) => ({
+    id: dataItem.TaskID,
+    start: parseAdjust(dataItem.Start),
+    startTimezone: dataItem.startTimezone,
+    end: parseAdjust(dataItem.End),
+    endTimezone: dataItem.endTimezone,
+    isAllDay: dataItem.isAllDay,
+    title: dataItem.Title,
+    description: dataItem.Description,
+    recurrenceRule: dataItem.RecurrenceRule,
+    recurrenceId: dataItem.RecurrenceID,
+    recurrenceExceptions: dataItem.RecurrenceException,
+    roomId: randomInt(1, 2),
+    personId: randomInt(1, 2),
+}));
+
+export const sampleDataWithCustomSchema = baseData.map((dataItem) => ({
+    ...dataItem,
+    Start: parseAdjust(dataItem.Start),
+    End: parseAdjust(dataItem.End),
+    PersonIDs: randomInt(1, 2),
+    RoomID: randomInt(1, 2),
+}));
diff --git a/vue-options-api-demos/scheduler/custom-templates/events/image/main.js b/vue-options-api-demos/scheduler/custom-templates/events/image/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/custom-templates/events/image/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/custom-templates/events/image/main.vue b/vue-options-api-demos/scheduler/custom-templates/events/image/main.vue
new file mode 100644
index 00000000..a7ffc02f
--- /dev/null
+++ b/vue-options-api-demos/scheduler/custom-templates/events/image/main.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <Scheduler
+      :style="{ height: '700px' }"
+      :data-items="sampleData"
+      :default-date="displayDate"
+      :views="views"
+      :item="'itemRender'"
+    >
+      <template v-slot:itemRender="{ props }">
+        <SchedulerItem v-bind="props">
+          <div class="k-event-template" v-if="!props.isAllDay">
+            {{ props.title }}
+            <div :style="{ 'padding-top': '5px', display: 'flex' }">
+              <img :src="props.dataItem.image" :style="{ width: '120px' }" :alt="'Event Image'" />
+              <span :style="{ 'padding-left': '5px' }">{{
+                props.description
+              }}</span>
+            </div>
+          </div>
+          <div class="k-event-template" v-else>
+            <img
+              :src="'https://static4.depositphotos.com/1004274/315/v/450/depositphotos_3152530-stock-illustration-eco-icon.jpg'"
+              :style="{ width: '18px', 'padding-bottom': '5px' }"
+              :alt="'Eco Icon'"
+            />
+            {{ props.title }}
+          </div>
+        </SchedulerItem>
+      </template>
+    </Scheduler>
+  </div>
+</template>
+<script>
+import { Scheduler, SchedulerItem } from '@progress/kendo-vue-scheduler';
+import { sampleData, displayDate } from './events-utc';
+
+export default {
+  components: {
+    Scheduler,
+    SchedulerItem,
+  },
+  data() {
+    return {
+      views: [{ name: 'day' }, { name: 'month' }],
+      sampleData,
+      displayDate,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/custom-templates/events/resources/events-utc.js b/vue-options-api-demos/scheduler/custom-templates/events/resources/events-utc.js
new file mode 100644
index 00000000..b7cf1630
--- /dev/null
+++ b/vue-options-api-demos/scheduler/custom-templates/events/resources/events-utc.js
@@ -0,0 +1,900 @@
+const baseData = [
+    {
+        TaskID: 4,
+        OwnerID: 2,
+        Title: 'Bowling tournament',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-09T21:00:00.000Z',
+        End: '2013-06-10T00:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 5,
+        OwnerID: 2,
+        Title: 'Take the dog to the vet',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-10T07:00:00.000Z',
+        End: '2013-06-10T08:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 6,
+        OwnerID: 2,
+        Title: 'Call Charlie about the project',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-11T11:30:00.000Z',
+        End: '2013-06-11T13:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 7,
+        OwnerID: 3,
+        Title: 'Meeting with Alex',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-12T11:00:00.000Z',
+        End: '2013-06-12T12:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 9,
+        OwnerID: 2,
+        Title: "Alex's Birthday",
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-14T02:00:00.000Z',
+        End: '2013-06-14T02:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: true,
+        image: null,
+    },
+    {
+        TaskID: 12,
+        OwnerID: 2,
+        Title: 'Car Service',
+        RoomID: 1,
+        Description: 'Might come to work later!',
+        StartTimezone: null,
+        Start: '2013-06-24T08:30:00.000Z',
+        End: '2013-06-24T10:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image:
+            'https://st3.depositphotos.com/1177973/12967/i/450/depositphotos_129673012-stock-photo-cubes-with-words-car-service.jpg',
+    },
+    {
+        TaskID: 14,
+        OwnerID: 3,
+        RoomID: 2,
+        PersonID: 3,
+        Title: 'Replace the printer on the 1st floor',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-24T10:00:00.000Z',
+        End: '2013-06-24T11:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: true,
+        image: null,
+    },
+    {
+        TaskID: 15,
+        OwnerID: 1,
+        Title: 'Attending HR Conference',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-25T00:00:00.000Z',
+        End: '2013-06-26T00:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: true,
+        image: null,
+    },
+    {
+        TaskID: 16,
+        OwnerID: 1,
+        Title: 'Business Lunch with Gregory Watkins',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-25T12:00:00.000Z',
+        End: '2013-06-25T13:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 17,
+        OwnerID: 1,
+        Title: 'Breakfast with CFO and COO',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-27T08:30:00.000Z',
+        End: '2013-06-27T09:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 18,
+        OwnerID: 1,
+        Title: 'Job Interview - Mathew Stevens',
+        Description: 'Junior Researcher',
+        StartTimezone: null,
+        Start: '2013-06-27T10:00:00.000Z',
+        End: '2013-06-27T11:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 19,
+        OwnerID: 1,
+        Title: 'Review CVs with Tim',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-27T11:00:00.000Z',
+        End: '2013-06-27T11:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 20,
+        OwnerID: 1,
+        Title: 'Lunch with Monica',
+        Description: 'Discuss the Employee handbook',
+        StartTimezone: null,
+        Start: '2013-06-27T12:00:00.000Z',
+        End: '2013-06-27T13:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 21,
+        OwnerID: 1,
+        Title: 'Job Interview - John Stewart',
+        Description: 'Accountant',
+        StartTimezone: null,
+        Start: '2013-06-27T14:00:00.000Z',
+        End: '2013-06-27T15:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 22,
+        OwnerID: 1,
+        Title: 'Job Interview - Mary Smith',
+        Description: 'Accountant',
+        StartTimezone: null,
+        Start: '2013-06-27T15:30:00.000Z',
+        End: '2013-06-27T16:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 24,
+        OwnerID: 3,
+        Title: 'Register new Access Cards',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-24T12:00:00.000Z',
+        End: '2013-06-24T12:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: true,
+        image: null,
+    },
+    {
+        TaskID: 25,
+        OwnerID: 1,
+        Title: 'HR Lecture',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-04T19:00:00.000Z',
+        End: '2013-06-04T21:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: 'FREQ=WEEKLY;BYDAY=TU,TH',
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 26,
+        OwnerID: 1,
+        Title: 'Dentist',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-28T08:00:00.000Z',
+        End: '2013-06-28T09:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 27,
+        OwnerID: 1,
+        Title: 'Job Interview - Laura Bailey',
+        Description: 'Helpdesk',
+        StartTimezone: null,
+        Start: '2013-06-28T09:30:00.000Z',
+        End: '2013-06-28T10:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 28,
+        OwnerID: 1,
+        Title: 'Job Interview - Jenny Baxter',
+        Description: 'Helpdesk',
+        StartTimezone: null,
+        Start: '2013-06-28T11:00:00.000Z',
+        End: '2013-06-28T12:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 31,
+        OwnerID: 1,
+        Title: 'Team building prep tasks',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-28T14:00:00.000Z',
+        End: '2013-06-28T17:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 32,
+        OwnerID: 2,
+        RoomID: 2,
+        Title: 'Job Interview - Bernard Atkins',
+        Description: 'Helpdesk',
+        StartTimezone: null,
+        Start: '2013-06-24T13:30:00.000Z',
+        End: '2013-06-24T14:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 34,
+        OwnerID: 1,
+        Title: 'Review Job Applications',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-24T15:00:00.000Z',
+        End: '2013-06-24T17:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 35,
+        OwnerID: 1,
+        Title: 'Grand Canyon tour',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-23T00:00:00.000Z',
+        End: '2013-06-23T00:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: true,
+        image: null,
+    },
+    {
+        TaskID: 40,
+        OwnerID: 3,
+        Title: 'Install new laptops in conference rooms',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-24T13:30:00.000Z',
+        End: '2013-06-24T15:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 66,
+        OwnerID: 3,
+        Title: "Bob's Birthday",
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-29T08:00:00.000Z',
+        End: '2013-06-29T06:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: true,
+        image: null,
+    },
+    {
+        TaskID: 68,
+        OwnerID: 1,
+        RoomID: 2,
+        Title: 'Breakfast with Tom',
+        Description: 'Have to ask him about his holiday plans',
+        StartTimezone: null,
+        Start: '2013-06-24T09:45:00.000Z',
+        End: '2013-06-24T11:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image:
+            'https://st4.depositphotos.com/13349494/27821/i/450/depositphotos_278217016-stock-photo-top-view-tasty-breakfast-pancakes.jpg',
+    },
+    {
+        TaskID: 69,
+        OwnerID: 2,
+        Title: 'Team planning meeting',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-24T10:00:00.000Z',
+        End: '2013-06-24T12:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: true,
+        image: null,
+    },
+    {
+        TaskID: 70,
+        OwnerID: 2,
+        Title: 'Support Phone Call',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-24T16:00:00.000Z',
+        End: '2013-06-24T16:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: true,
+        image: null,
+    },
+    {
+        TaskID: 71,
+        OwnerID: 2,
+        Title: 'Business breakfast with Caroline',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-25T09:00:00.000Z',
+        End: '2013-06-25T10:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 72,
+        OwnerID: 2,
+        Title: "Discuss preojects' deadlines",
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-25T11:00:00.000Z',
+        End: '2013-06-25T11:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 73,
+        OwnerID: 2,
+        Title: 'Support Meeting',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-25T15:00:00.000Z',
+        End: '2013-06-25T16:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 74,
+        OwnerID: 2,
+        Title: 'Dine with Mathew',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-25T18:30:00.000Z',
+        End: '2013-06-25T20:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 79,
+        OwnerID: 2,
+        Title: 'Banking',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-26T09:00:00.000Z',
+        End: '2013-06-26T10:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 80,
+        OwnerID: 3,
+        Title: 'Software updates',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-25T10:00:00.000Z',
+        End: '2013-06-25T12:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 81,
+        OwnerID: 3,
+        Title: 'UPS maintenance',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-25T16:30:00.000Z',
+        End: '2013-06-25T18:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 82,
+        OwnerID: 2,
+        Title: 'Support Call',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-26T11:30:00.000Z',
+        End: '2013-06-26T12:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 83,
+        OwnerID: 3,
+        Title: 'Phone Sync with NY office ',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-26T13:30:00.000Z',
+        End: '2013-06-26T14:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 84,
+        OwnerID: 3,
+        Title: 'Phone Sync with Boston Office',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-26T15:00:00.000Z',
+        End: '2013-06-26T16:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 85,
+        OwnerID: 3,
+        Title: 'Server maintenance',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-26T18:30:00.000Z',
+        End: '2013-06-26T21:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: true,
+        image: null,
+    },
+    {
+        TaskID: 86,
+        OwnerID: 2,
+        Title: 'Status meeting',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-28T13:30:00.000Z',
+        End: '2013-06-28T15:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 87,
+        OwnerID: 3,
+        Title: 'Helpdesk status meeting',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-27T10:30:00.000Z',
+        End: '2013-06-27T11:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 88,
+        OwnerID: 2,
+        Title: 'Business Lunch',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-27T12:00:00.000Z',
+        End: '2013-06-27T13:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 89,
+        OwnerID: 3,
+        Title: 'Employee database update',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-27T14:00:00.000Z',
+        End: '2013-06-27T15:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 90,
+        OwnerID: 3,
+        Title: 'Website upload',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-27T07:30:00.000Z',
+        End: '2013-06-27T08:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 91,
+        OwnerID: 2,
+        Title: 'Meeting with marketing guys',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-27T17:00:00.000Z',
+        End: '2013-06-27T18:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 92,
+        OwnerID: 3,
+        Title: 'Meeting with Internet provider',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-28T10:30:00.000Z',
+        End: '2013-06-28T11:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 93,
+        OwnerID: 3,
+        Title: "Bob's Birthday Party",
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-29T20:00:00.000Z',
+        End: '2013-06-29T23:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: null,
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 95,
+        OwnerID: 2,
+        Title: 'Dance Practice',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-03T18:30:00.000Z',
+        End: '2013-06-03T20:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,WE',
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 114,
+        OwnerID: 3,
+        Title: 'Software updates',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-04T09:00:00.000Z',
+        End: '2013-06-04T12:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: '',
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 115,
+        OwnerID: 1,
+        Title: 'Breakfast at Starbucks',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-04T08:00:00.000Z',
+        End: '2013-06-04T09:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: '',
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 116,
+        OwnerID: 2,
+        Title: 'Performance review',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-04T14:00:00.000Z',
+        End: '2013-06-04T17:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: '',
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 118,
+        OwnerID: 1,
+        Title: 'HR seminar preparation',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-05T10:00:00.000Z',
+        End: '2013-06-05T12:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: '',
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 119,
+        OwnerID: 3,
+        Title: 'Helpdesk weekly meeting',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-05T15:00:00.000Z',
+        End: '2013-06-05T16:00:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: 'FREQ=WEEKLY;BYDAY=WE',
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+    {
+        TaskID: 120,
+        OwnerID: 3,
+        Title: 'Website upload',
+        Description: '',
+        StartTimezone: null,
+        Start: '2013-06-07T07:00:00.000Z',
+        End: '2013-06-07T08:30:00.000Z',
+        EndTimezone: null,
+        RecurrenceRule: '',
+        RecurrenceID: null,
+        RecurrenceException: null,
+        isAllDay: false,
+        image: null,
+    },
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException',
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) =>
+    Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map((dataItem) => ({
+    id: dataItem.TaskID,
+    start: parseAdjust(dataItem.Start),
+    startTimezone: dataItem.startTimezone,
+    end: parseAdjust(dataItem.End),
+    endTimezone: dataItem.endTimezone,
+    isAllDay: dataItem.isAllDay,
+    title: dataItem.Title,
+    description: dataItem.Description,
+    recurrenceRule: dataItem.RecurrenceRule,
+    recurrenceId: dataItem.RecurrenceID,
+    recurrenceExceptions: dataItem.RecurrenceException,
+    image: dataItem.image,
+
+    roomId: dataItem.RoomID,
+    ownerID: dataItem.OwnerID,
+    personId: dataItem.OwnerID,
+}));
+
+export const sampleDataWithResources = baseData.map((dataItem) => ({
+    id: dataItem.TaskID,
+    start: parseAdjust(dataItem.Start),
+    startTimezone: dataItem.startTimezone,
+    end: parseAdjust(dataItem.End),
+    endTimezone: dataItem.endTimezone,
+    isAllDay: dataItem.isAllDay,
+    title: dataItem.Title,
+    description: dataItem.Description,
+    recurrenceRule: dataItem.RecurrenceRule,
+    recurrenceId: dataItem.RecurrenceID,
+    recurrenceExceptions: dataItem.RecurrenceException,
+    roomId: randomInt(1, 2),
+    personId: randomInt(1, 2),
+}));
+
+export const sampleDataWithCustomSchema = baseData.map((dataItem) => ({
+    ...dataItem,
+    Start: parseAdjust(dataItem.Start),
+    End: parseAdjust(dataItem.End),
+    PersonIDs: randomInt(1, 2),
+    RoomID: randomInt(1, 2),
+}));
diff --git a/vue-options-api-demos/scheduler/custom-templates/events/resources/main.js b/vue-options-api-demos/scheduler/custom-templates/events/resources/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/custom-templates/events/resources/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/custom-templates/events/resources/main.vue b/vue-options-api-demos/scheduler/custom-templates/events/resources/main.vue
new file mode 100644
index 00000000..c681a67a
--- /dev/null
+++ b/vue-options-api-demos/scheduler/custom-templates/events/resources/main.vue
@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <Scheduler
+      :style="{ height: '700px' }"
+      :data-items="sampleData"
+      :default-date="displayDate"
+      :views="views"
+      :resources="resources"
+      :item="'itemRender'"
+    >
+      <template v-slot:itemRender="{ props }">
+        <SchedulerItem v-bind="props">
+          <div class="k-event-template" v-if="!props.isAllDay">
+            {{ props.title }}
+            <span
+              :style="{
+                padding: '4px',
+                margin: '4px',
+                'background-color': getOwnerResource(props.dataItem.ownerID)
+                  .color,
+              }"
+            >
+              {{ getOwnerResource(props.dataItem.ownerID).text }}
+            </span>
+            <div :style="{ 'padding-top': '8px', display: 'flex' }">
+              <img :src="props.dataItem.image" :style="{ width: '120px' }" :alt="'Event Image'"/>
+              <span :style="{ 'padding-left': '5px' }">{{
+                props.description
+              }}</span>
+            </div>
+          </div>
+          <div class="k-event-template" v-else>
+            <img
+              :src="'https://static4.depositphotos.com/1004274/315/v/450/depositphotos_3152530-stock-illustration-eco-icon.jpg'"
+              :style="{ width: '18px', 'padding-bottom': '5px' }"
+              :alt="'Eco Icon'"
+            />
+            {{ props.title }}
+            <span
+              :style="{
+                padding: '4px',
+                margin: '4px',
+                'background-color': getOwnerResource(props.dataItem.ownerID)
+                  .color,
+              }"
+            >
+              {{ getOwnerResource(props.dataItem.ownerID).text }}
+            </span>
+          </div>
+        </SchedulerItem>
+      </template>
+    </Scheduler>
+  </div>
+</template>
+<script>
+import { Scheduler, SchedulerItem } from '@progress/kendo-vue-scheduler';
+import { sampleData, displayDate } from './events-utc';
+
+export default {
+  components: {
+    Scheduler,
+    SchedulerItem,
+  },
+  methods: {
+    getOwnerResource(ownerID) {
+      const resource = JSON.parse(
+        JSON.stringify(
+          this.resources[1].data.filter((el) => el.value === ownerID)
+        )
+      )[0];
+      return resource !== undefined ? resource : '';
+    },
+  },
+  data() {
+    return {
+      views: [{ name: 'day' }, { name: 'month' }],
+      sampleData,
+      displayDate,
+      resources: [
+        {
+          name: 'Rooms',
+          data: [
+            { text: 'Meeting Room 101', value: 1, color: '#56ca85' },
+            { text: 'Meeting Room 201', value: 2, color: '#FF7272' },
+          ],
+          field: 'roomId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+        {
+          name: 'Persons',
+          data: [
+            { text: 'Peter', value: 1, color: '#5392E4' },
+            { text: 'Alex', value: 2, color: '#58677B' },
+            { text: 'Bob', value: 3, color: '#228B22' },
+          ],
+          field: 'personId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/custom-templates/header-footer/events-utc.js b/vue-options-api-demos/scheduler/custom-templates/header-footer/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/custom-templates/header-footer/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/custom-templates/header-footer/main.js b/vue-options-api-demos/scheduler/custom-templates/header-footer/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/custom-templates/header-footer/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/custom-templates/header-footer/main.vue b/vue-options-api-demos/scheduler/custom-templates/header-footer/main.vue
new file mode 100644
index 00000000..823f6f5f
--- /dev/null
+++ b/vue-options-api-demos/scheduler/custom-templates/header-footer/main.vue
@@ -0,0 +1,145 @@
+<template>
+  <div>
+    <div class="example-config">
+      <div class="row">
+        <div class="col-">
+          Show/Hide Header:
+          <kswitch :default-checked="true" @change="handleHeaderChange" />
+        </div>
+        <div class="col">
+          Show/Hide Footer:
+          <kswitch :default-checked="true" @change="handleFooterChange" />
+        </div>
+      </div>
+    </div>
+    <Scheduler
+      :data-items="sampleData"
+      :default-date="displayDate"
+      :views="views"
+      :style="{ height: '700px' }"
+      :header="'headerRender'"
+      :footer="'footerRender'"
+    >
+      <template v-slot:headerRender="{ props }">
+        <SchedulerHeader v-if="showHeader">
+          <SchedulerNavigation
+            @prevclick="props.onPrevclick"
+            @nextclick="props.onNextclick"
+            @todayclick="props.onTodayclick"
+          />
+          <span
+            :style="{
+              'background-color': '#ff7272',
+              'padding-top': '5px',
+              'padding-bottom': '5px',
+              'padding-left': '3px',
+              'padding-right': '3px',
+            }"
+          >
+            Something
+          </span>
+
+          <NavigationDatePicker
+            :value="props.currentDate"
+            @change="props.onDatepickerchange"
+          />
+          <span
+            :style="{
+              'background-color': '#56ca85',
+              'padding-top': '5px',
+              'padding-bottom': '5px',
+              'padding-left': '3px',
+              'padding-right': '3px',
+            }"
+            >Before Spacer</span
+          >
+          <ToolbarSpacer />
+          <span
+            :style="{
+              'background-color': '#ccff99',
+              'padding-top': '5px',
+              'padding-bottom': '5px',
+              'padding-left': '3px',
+              'padding-right': '3px',
+            }"
+            >After Spacer</span
+          >
+          <SchedulerViewSelector />
+        </SchedulerHeader>
+      </template>
+      <template v-slot:footerRender="{ props }">
+        <SchedulerFooter v-if="showFooter">
+          <BusinessHours
+            :slot-duration="props.slotDuration"
+            @click="props.onShowworkhoursclick"
+          />
+          <span
+            :style="{
+              'background-color': '#ff7272',
+              'padding-top': '5px',
+              'padding-bottom': '5px',
+              'padding-left': '3px',
+              'padding-right': '3px',
+            }"
+          >
+            Custom Footer Template
+          </span>
+        </SchedulerFooter>
+      </template>
+    </Scheduler>
+  </div>
+</template>
+<script>
+import { ToolbarSpacer } from '@progress/kendo-vue-buttons';
+import { Switch } from '@progress/kendo-vue-inputs';
+import {
+  Scheduler,
+  SchedulerHeader,
+  SchedulerFooter,
+  BusinessHours,
+  SchedulerNavigation,
+  NavigationDatePicker,
+  SchedulerViewSelector,
+} from '@progress/kendo-vue-scheduler';
+import { sampleData, displayDate } from './events-utc';
+
+export default {
+  components: {
+    kswitch: Switch,
+    Scheduler,
+    SchedulerHeader,
+    SchedulerFooter,
+    BusinessHours,
+    SchedulerNavigation,
+    NavigationDatePicker,
+    SchedulerViewSelector,
+    ToolbarSpacer,
+  },
+  data() {
+    return {
+      views: [
+        { name: 'week' },
+        { name: 'day' },
+        { name: 'workWeek' },
+        { name: 'month' },
+        { name: 'agenda' },
+        {
+          name: 'timeline',
+        },
+      ],
+      sampleData,
+      displayDate,
+      showHeader: true,
+      showFooter: true,
+    };
+  },
+  methods: {
+    handleHeaderChange() {
+      this.showHeader = !this.showHeader;
+    },
+    handleFooterChange() {
+      this.showFooter = !this.showFooter;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/custom-templates/slots/color/events-utc.js b/vue-options-api-demos/scheduler/custom-templates/slots/color/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/custom-templates/slots/color/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/custom-templates/slots/color/main.js b/vue-options-api-demos/scheduler/custom-templates/slots/color/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/custom-templates/slots/color/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/custom-templates/slots/color/main.vue b/vue-options-api-demos/scheduler/custom-templates/slots/color/main.vue
new file mode 100644
index 00000000..9fb2175e
--- /dev/null
+++ b/vue-options-api-demos/scheduler/custom-templates/slots/color/main.vue
@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <Scheduler
+      :style="{ height: '700px' }"
+      :data-items="sampleData"
+      :default-date="displayDate"
+      :views="views"
+      :slot-render="'slotRender'"
+    >
+      <template v-slot:slotRender="{ props }">
+        <SchedulerSlot
+          v-bind="props"
+          :style="{
+            'background-color': props.isAllDay
+              ? '#56ca85' // Define the color of AllDay slots
+              : props.isWorkDay
+              ? '#ffddcc' // Define the color of WorkDay slots
+              : props.isWorkHour
+              ? '#ccff99' // Define the color of WorkHours slots
+              : !props.isWorkDay
+              ? '#ffcccb ' // Define the color of Non-WorkDay slots
+              : undefined,
+          }"
+          @showmoreitems="props.onShowmoreitems"
+        >
+        </SchedulerSlot>
+      </template>
+    </Scheduler>
+  </div>
+</template>
+<script>
+import '@progress/kendo-date-math/tz/Etc/UTC';
+import '@progress/kendo-date-math/tz/Europe/Sofia';
+import { Scheduler, SchedulerSlot } from '@progress/kendo-vue-scheduler';
+import { sampleData, displayDate } from './events-utc';
+
+export default {
+  components: {
+    Scheduler,
+    SchedulerSlot,
+  },
+  data() {
+    return {
+      views: [
+        { name: 'week', showWorkHours: false },
+        { name: 'day' },
+        { name: 'workWeek' },
+        { name: 'month' },
+      ],
+      sampleData,
+      displayDate,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/custom-templates/slots/month/events-utc.js b/vue-options-api-demos/scheduler/custom-templates/slots/month/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/custom-templates/slots/month/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/custom-templates/slots/month/main.js b/vue-options-api-demos/scheduler/custom-templates/slots/month/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/custom-templates/slots/month/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/custom-templates/slots/month/main.vue b/vue-options-api-demos/scheduler/custom-templates/slots/month/main.vue
new file mode 100644
index 00000000..46c2c7e5
--- /dev/null
+++ b/vue-options-api-demos/scheduler/custom-templates/slots/month/main.vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <Scheduler
+      :style="{ height: '700px' }"
+      :data-items="sampleData"
+      :default-date="displayDate"
+      :views="views"
+      :slot-render="'slotRender'"
+    >
+      <template v-slot:slotRender="{ props }">
+        <SchedulerSlot
+          v-bind="props"
+          :nav-day="false"
+          @showmoreitems="props.onShowmoreitems"
+        >
+          <span
+            :style="{
+              'font-weight': 'bold',
+            }"
+            >{{ formattedDate(props.start) }}</span
+          >
+        </SchedulerSlot>
+      </template>
+    </Scheduler>
+  </div>
+</template>
+<script>
+import '@progress/kendo-date-math/tz/Etc/UTC';
+import '@progress/kendo-date-math/tz/Europe/Sofia';
+import { Scheduler, SchedulerSlot } from '@progress/kendo-vue-scheduler';
+import { sampleData, displayDate } from './events-utc';
+import { provideIntlService } from '@progress/kendo-vue-intl';
+
+export default {
+  components: {
+    Scheduler,
+    SchedulerSlot,
+  },
+  data() {
+    return {
+      views: [{ name: 'month' }],
+      sampleData,
+      displayDate,
+    };
+  },
+  methods: {
+    formattedDate: function (date) {
+      return provideIntlService(this).formatDate(date, 'd.MM.y');
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/custom-templates/slots/time/events-utc.js b/vue-options-api-demos/scheduler/custom-templates/slots/time/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/custom-templates/slots/time/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/custom-templates/slots/time/main.js b/vue-options-api-demos/scheduler/custom-templates/slots/time/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/custom-templates/slots/time/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/custom-templates/slots/time/main.vue b/vue-options-api-demos/scheduler/custom-templates/slots/time/main.vue
new file mode 100644
index 00000000..057824ab
--- /dev/null
+++ b/vue-options-api-demos/scheduler/custom-templates/slots/time/main.vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <Scheduler
+      :style="{ height: '700px' }"
+      :data-items="sampleData"
+      :default-date="displayDate"
+      :views="views"
+      :slot-render="'slotRender'"
+    >
+      <template v-slot:slotRender="{ props }">
+        <SchedulerSlot
+          v-bind="props"
+          :nav-day="false"
+          @showmoreitems="props.onShowmoreitems"
+        >
+          <span
+            :style="{
+              'font-weight': 'bold',
+            }"
+            >{{ formattedDate(props.start) }}</span
+          >
+        </SchedulerSlot>
+      </template>
+    </Scheduler>
+  </div>
+</template>
+<script>
+import '@progress/kendo-date-math/tz/Etc/UTC';
+import '@progress/kendo-date-math/tz/Europe/Sofia';
+import { Scheduler, SchedulerSlot } from '@progress/kendo-vue-scheduler';
+import { sampleData, displayDate } from './events-utc';
+import { provideIntlService } from '@progress/kendo-vue-intl';
+
+export default {
+  components: {
+    Scheduler,
+    SchedulerSlot,
+  },
+  data() {
+    return {
+      views: [{ name: 'week' }, { name: 'day' }, { name: 'timeline' }],
+      sampleData,
+      displayDate,
+    };
+  },
+  methods: {
+    formattedDate: function (date) {
+      return provideIntlService(this).formatDate(date, 'HH:mm');
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/customization/.DS_Store b/vue-options-api-demos/scheduler/customization/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..f9485af88a1e7a5f87225326bfe713effb697d28
GIT binary patch
literal 6148
zcmeH~F$w}f3`G;&La^D=avBfd4F=H@>;)`D8(l%rdXDZ-CJ2t!BJu;tpJXO1`-+{7
zi0JyZUy1Z0GJ~7S(n4d3ypw}m<SOU;a2-#V@rat$Cvn!+@Lrnz*rt#G36KB@kN^q%
z5COZlVY7KvMiL+a5_l4@??Zx{=Fn2rKOG1@0zf;I-LUpq0-CG<&7q|#Dlm=dL8DcD
z46(YmLsOi~p`~hV7meXV<H>4M3`}dgXhH(h?7~0-B+w9;*1Wg-e+&OK|2Hj6Nq_|Y
zjDU8VVY9|d#ohY$dRE^>)z$?L_2URHKLJSWDqg_du%B!J&7q|#Dlq;CI0gn1_$q-1
D^rsTX

literal 0
HcmV?d00001

diff --git a/vue-options-api-demos/scheduler/customization/editor/custom-editor/main.js b/vue-options-api-demos/scheduler/customization/editor/custom-editor/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/customization/editor/custom-editor/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/customization/editor/custom-editor/main.vue b/vue-options-api-demos/scheduler/customization/editor/custom-editor/main.vue
new file mode 100644
index 00000000..3fbcbc92
--- /dev/null
+++ b/vue-options-api-demos/scheduler/customization/editor/custom-editor/main.vue
@@ -0,0 +1,9 @@
+<template>
+            <div>Scheudler demo</div>
+</template>
+<script>
+export default {
+
+
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/customization/editor/default-editor/extending-root/main.js b/vue-options-api-demos/scheduler/customization/editor/default-editor/extending-root/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/customization/editor/default-editor/extending-root/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/customization/editor/default-editor/extending-root/main.vue b/vue-options-api-demos/scheduler/customization/editor/default-editor/extending-root/main.vue
new file mode 100644
index 00000000..3fbcbc92
--- /dev/null
+++ b/vue-options-api-demos/scheduler/customization/editor/default-editor/extending-root/main.vue
@@ -0,0 +1,9 @@
+<template>
+            <div>Scheudler demo</div>
+</template>
+<script>
+export default {
+
+
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/customization/editor/default-editor/replacing-editors/main.js b/vue-options-api-demos/scheduler/customization/editor/default-editor/replacing-editors/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/customization/editor/default-editor/replacing-editors/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/customization/editor/default-editor/replacing-editors/main.vue b/vue-options-api-demos/scheduler/customization/editor/default-editor/replacing-editors/main.vue
new file mode 100644
index 00000000..3fbcbc92
--- /dev/null
+++ b/vue-options-api-demos/scheduler/customization/editor/default-editor/replacing-editors/main.vue
@@ -0,0 +1,9 @@
+<template>
+            <div>Scheudler demo</div>
+</template>
+<script>
+export default {
+
+
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/customization/form/custom-components/main.js b/vue-options-api-demos/scheduler/customization/form/custom-components/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/customization/form/custom-components/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/customization/form/custom-components/main.vue b/vue-options-api-demos/scheduler/customization/form/custom-components/main.vue
new file mode 100644
index 00000000..3fbcbc92
--- /dev/null
+++ b/vue-options-api-demos/scheduler/customization/form/custom-components/main.vue
@@ -0,0 +1,9 @@
+<template>
+            <div>Scheudler demo</div>
+</template>
+<script>
+export default {
+
+
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/customization/form/default-rendering/main.js b/vue-options-api-demos/scheduler/customization/form/default-rendering/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/customization/form/default-rendering/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/customization/form/default-rendering/main.vue b/vue-options-api-demos/scheduler/customization/form/default-rendering/main.vue
new file mode 100644
index 00000000..3fbcbc92
--- /dev/null
+++ b/vue-options-api-demos/scheduler/customization/form/default-rendering/main.vue
@@ -0,0 +1,9 @@
+<template>
+            <div>Scheudler demo</div>
+</template>
+<script>
+export default {
+
+
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/data-binding/data-change/main.js b/vue-options-api-demos/scheduler/data-binding/data-change/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-binding/data-change/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/data-binding/data-change/main.vue b/vue-options-api-demos/scheduler/data-binding/data-change/main.vue
new file mode 100644
index 00000000..3fbcbc92
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-binding/data-change/main.vue
@@ -0,0 +1,9 @@
+<template>
+            <div>Scheudler demo</div>
+</template>
+<script>
+export default {
+
+
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/data-binding/data/main.js b/vue-options-api-demos/scheduler/data-binding/data/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-binding/data/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/data-binding/data/main.vue b/vue-options-api-demos/scheduler/data-binding/data/main.vue
new file mode 100644
index 00000000..84bbaf14
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-binding/data/main.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <Scheduler
+      :data-items="data"
+      :default-date="displayDate"
+      :view="view"
+      :views="views"
+      :timezone="'Etc/UTC'"
+    ></Scheduler>
+  </div>
+</template>
+<script>
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+
+export default {
+  components: {
+    Scheduler,
+  },
+  data() {
+    return {
+      displayDate: new Date('2019-08-27T08:00:00.000Z'),
+      data: [
+        {
+          id: 0,
+          title: 'Breakfast with Tom',
+          start: new Date('2019-08-27T08:30:00.000Z'),
+          end: new Date('2019-08-27T09:00:00.000Z'),
+        },
+      ],
+      view: 'day',
+      views: [
+        {
+          name: 'day',
+          title: 'Day',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/data-binding/model-fields/main.js b/vue-options-api-demos/scheduler/data-binding/model-fields/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-binding/model-fields/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/data-binding/model-fields/main.vue b/vue-options-api-demos/scheduler/data-binding/model-fields/main.vue
new file mode 100644
index 00000000..0dce60a6
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-binding/model-fields/main.vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <Scheduler
+      :data-items="data"
+      :default-date="displayDate"
+      :view="view"
+      :views="views"
+      :modelFields="modelFields"
+    ></Scheduler>
+  </div>
+</template>
+<script>
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+
+export default {
+  components: {
+    Scheduler,
+  },
+  data() {
+    return {
+      displayDate: new Date('2019-08-26T21:00:00.000Z'),
+      data: [
+        {
+          TaskID: 0,
+          Subject: 'Breakfast with Tom',
+          Start: new Date('2019-08-27T05:30:00.000Z'),
+          End: new Date('2019-08-27T06:00:00.000Z'),
+        },
+        {
+          TaskID: 1,
+          Subject: 'Lunch with Loren',
+          Start: new Date('2019-08-27T09:00:00.000Z'),
+          End: new Date('2019-08-27T10:00:00.000Z'),
+        },
+      ],
+      modelFields: {
+        id: 'TaskID',
+        title: 'Subject',
+        start: 'Start',
+        end: 'End',
+      },
+      view: 'day',
+      views: [
+        {
+          name: 'day',
+          title: 'Day',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/basic/events-utc.js b/vue-options-api-demos/scheduler/data-operations/editing/basic/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/basic/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/basic/main.js b/vue-options-api-demos/scheduler/data-operations/editing/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/basic/main.vue b/vue-options-api-demos/scheduler/data-operations/editing/basic/main.vue
new file mode 100644
index 00000000..4db6cf21
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/basic/main.vue
@@ -0,0 +1,62 @@
+<template>
+  <Scheduler
+    :data-items="sampleData"
+    :default-date="displayDate"
+    :views="views"
+    :view="view"
+    :editable="editable"
+    @datachange="handleDataChange"
+  ></Scheduler>
+</template>
+<script>
+import { displayDate, sampleData } from './events-utc';
+import { guid } from '@progress/kendo-vue-common';
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+
+export default {
+  components: {
+    Scheduler,
+  },
+  data() {
+    return {
+      view: 'day',
+      editable: {
+        add: true,
+        remove: true,
+        drag: true,
+        resize: true,
+        edit: true,
+      },
+      views: [
+        { name: 'day' },
+        { name: 'timeline' },
+        { name: 'week' },
+        { name: 'agenda' },
+      ],
+      sampleData,
+      displayDate,
+    };
+  },
+  methods: {
+    handleDataChange({ created, updated, deleted }) {
+      const newData = [...this.sampleData] // Filter the deleted items
+        .filter(
+          (item) =>
+            deleted.find((current) => current.id === item.id) === undefined
+        ) // Find and replace the updated items
+        .map(
+          (item) => updated.find((current) => current.id === item.id) || item
+        ) // Add the newly created items and assign an `id`.
+        .concat(
+          created.map((item) =>
+            Object.assign({}, item, {
+              id: guid(),
+            })
+          )
+        );
+
+      this.sampleData = newData;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/custom-form/CustomEditForm.vue b/vue-options-api-demos/scheduler/data-operations/editing/custom-form/CustomEditForm.vue
new file mode 100644
index 00000000..f90dbdf4
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/custom-form/CustomEditForm.vue
@@ -0,0 +1,116 @@
+<template>
+  <FormElement class="k-scheduler-edit-form">
+    <div class="k-form-field">
+      <kfield :name="'title'" :component="'myTemplate'" :label="'Event Title'">
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          />
+        </template>
+      </kfield>
+
+      <kfield
+        :name="'start'"
+        :component="'myTemplate'"
+        :label="'Event description:'"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <formdatetimepicker
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          />
+        </template>
+      </kfield>
+      <kfield
+        :name="'end'"
+        :component="'myTemplate'"
+        :label="'Event description:'"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <formdatetimepicker
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          />
+        </template>
+      </kfield>
+      <kfield
+        :name="'isAllDay'"
+        :component="'myTemplate'"
+        :label="'All Day Event'"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <formswitch
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          />
+        </template>
+      </kfield>
+      <kfield
+        :name="'description'"
+        :component="'myTemplate'"
+        :label="'Event description:'"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <formtextarea
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          />
+        </template>
+      </kfield>
+    </div>
+    <SchedulerActionButtons
+      :editSaveMessage="'Save'"
+      :editCancelMessage="'Cancel'"
+      @cancel="handleCancel"
+    />
+  </FormElement>
+</template>
+<script>
+import {
+  SchedulerActionButtons,
+  SchedulerFormEditor,
+} from '@progress/kendo-vue-scheduler';
+import { FormElement, Field } from '@progress/kendo-vue-form';
+import FormInput from './FormInput.vue';
+import FormSwitch from './FormSwitch.vue';
+import FormTextArea from './FormTextArea.vue';
+import FormDateTimePicker from './FormDateTimePicker.vue';
+
+export default {
+  emits: {
+    cancel: null,
+  },
+  inject: {
+    ks: {
+      default: null,
+    },
+    kendoForm: { default: {} },
+  },
+  components: {
+    SchedulerFormEditor,
+    SchedulerActionButtons,
+    kfield: Field,
+    FormElement,
+    forminput: FormInput,
+    formswitch: FormSwitch,
+    formtextarea: FormTextArea,
+    formdatetimepicker: FormDateTimePicker,
+  },
+  methods: {
+    handleCancel(e) {
+      this.$emit('cancel', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/custom-form/FormDateTimePicker.vue b/vue-options-api-demos/scheduler/data-operations/editing/custom-form/FormDateTimePicker.vue
new file mode 100644
index 00000000..be5eacb0
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/custom-form/FormDateTimePicker.vue
@@ -0,0 +1,78 @@
+<template>
+  <fieldwrapper>
+    <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <datetimepicker
+        :style="{ width: '230px' }"
+        :valid="valid"
+        :value="value"
+        :id="id"
+        @change="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { DateTimePicker } from '@progress/kendo-vue-dateinputs';
+export default {
+  props: {
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: Date,
+      default: null,
+    },
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    datetimepicker: DateTimePicker,
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/custom-form/FormInput.vue b/vue-options-api-demos/scheduler/data-operations/editing/custom-form/FormInput.vue
new file mode 100644
index 00000000..70d42e2e
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/custom-form/FormInput.vue
@@ -0,0 +1,89 @@
+<template>
+  <fieldwrapper>
+    <klabel
+      :class="'k-form-label'"
+      :editor-id="id"
+      :editor-valid="valid"
+      :disabled="disabled"
+      :optional="optional"
+    >
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <kinput
+        :style="{ width: '230px' }"
+        :valid="valid"
+        :id="id"
+        :value="value"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        @input="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { Input } from '@progress/kendo-vue-inputs';
+export default {
+  props: {
+    optional: Boolean,
+    disabled: Boolean,
+    placeholder: String,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    kinput: Input,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/custom-form/FormSwitch.vue b/vue-options-api-demos/scheduler/data-operations/editing/custom-form/FormSwitch.vue
new file mode 100644
index 00000000..35203db3
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/custom-form/FormSwitch.vue
@@ -0,0 +1,102 @@
+<template>
+  <fieldwrapper>
+    <klabel
+      :class="'k-form-label'"
+      :editor-id="id"
+      :editor-valid="valid"
+      :disabled="disabled"
+      :optional="optional"
+    >
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <kswitch
+        :valid="valid"
+        :id="id"
+        :checked="value"
+        :disabled="disabled"
+        :required="required"
+        :placeholder="placeholder"
+        :on-label="'Yes'"
+        :off-label="'No'"
+        @change="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+
+      <span v-if="showValidationMessage && showHint">
+        <error>
+          {{ validationMessage }}
+        </error>
+        <hint>{{ hint }}</hint>
+      </span>
+      <error v-else-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else-if="showHint">{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { Switch } from '@progress/kendo-vue-inputs';
+export default {
+  props: {
+    optional: Boolean,
+    disabled: Boolean,
+    placeholder: String,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    kswitch: Switch,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/custom-form/FormTextArea.vue b/vue-options-api-demos/scheduler/data-operations/editing/custom-form/FormTextArea.vue
new file mode 100644
index 00000000..014b7e68
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/custom-form/FormTextArea.vue
@@ -0,0 +1,84 @@
+<template>
+  <fieldwrapper>
+    <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <span class="k-textarea">
+        <ktextarea
+          :valid="valid"
+          :value="value"
+          :id="id"
+          :maxlength="max"
+          @input="handleChange"
+          @blur="handleBlur"
+          @focus="handleFocus"
+        ></ktextarea>
+      </span>
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <div v-else style="display: flex; justify-content: space-between">
+        <hint>{{ hint }}</hint>
+      </div>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { TextArea } from '@progress/kendo-vue-inputs';
+
+export default {
+  props: {
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    max: Number,
+    valid: Boolean,
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  components: {
+    ktextarea: TextArea,
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/custom-form/events-utc.js b/vue-options-api-demos/scheduler/data-operations/editing/custom-form/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/custom-form/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/custom-form/main.js b/vue-options-api-demos/scheduler/data-operations/editing/custom-form/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/custom-form/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/custom-form/main.vue b/vue-options-api-demos/scheduler/data-operations/editing/custom-form/main.vue
new file mode 100644
index 00000000..6f8a1d28
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/custom-form/main.vue
@@ -0,0 +1,67 @@
+<template>
+  <Scheduler
+    :data-items="sampleData"
+    :default-date="displayDate"
+    :views="views"
+    :view="view"
+    :editable="editable"
+    @datachange="handleDataChange"
+    :form="'formRender'"
+  >
+    <template v-slot:formRender="{ props }">
+      <customEditForm @cancel="props.onCancel" />
+    </template>
+  </Scheduler>
+</template>
+<script>
+import { displayDate, sampleData } from './events-utc';
+import { guid } from '@progress/kendo-vue-common';
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+import CustomEditForm from './CustomEditForm.vue';
+
+export default {
+  components: {
+    Scheduler,
+    customEditForm: CustomEditForm,
+  },
+  data() {
+    return {
+      view: 'day',
+      editable: {
+        add: true,
+        remove: true,
+        edit: true,
+      },
+      views: [
+        { name: 'day' },
+        { name: 'timeline' },
+        { name: 'week' },
+        { name: 'agenda' },
+      ],
+      sampleData,
+      displayDate,
+    };
+  },
+  methods: {
+    handleDataChange({ created, updated, deleted }) {
+      const newData = [...this.sampleData] // Filter the deleted items
+        .filter(
+          (item) =>
+            deleted.find((current) => current.id === item.id) === undefined
+        ) // Find and replace the updated items
+        .map(
+          (item) => updated.find((current) => current.id === item.id) || item
+        ) // Add the newly created items and assign an `id`.
+        .concat(
+          created.map((item) =>
+            Object.assign({}, item, {
+              id: guid(),
+            })
+          )
+        );
+
+      this.sampleData = newData;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/customize-default/CustomEditForm.vue b/vue-options-api-demos/scheduler/data-operations/editing/customize-default/CustomEditForm.vue
new file mode 100644
index 00000000..52e99f73
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/customize-default/CustomEditForm.vue
@@ -0,0 +1,63 @@
+<template>
+  <SchedulerFormEditor
+    :titleEditor="'customTitleEditor'"
+    :allDayEditor="'customAllDayEditor'"
+  >
+    <template v-slot:customTitleEditor="{ props }">
+      <forminput
+        v-bind="props"
+        :placeholder="'Custom title input'"
+        @change="props.onChange"
+        @blur="props.onBlur"
+        @focus="props.onFocus"
+      />
+    </template>
+    <template v-slot:customAllDayEditor="{ props }">
+      <formswitch
+        v-bind="props"
+        @change="props.onChange"
+        @blur="props.onBlur"
+        @focus="props.onFocus"
+      />
+    </template>
+    <SchedulerActionButtons
+      :editSaveMessage="'Save'"
+      :editCancelMessage="'Cancel'"
+      @cancel="handleCancel"
+    />
+  </SchedulerFormEditor>
+</template>
+<script>
+import {
+  SchedulerActionButtons,
+  SchedulerFormEditor,
+} from '@progress/kendo-vue-scheduler';
+import { FormElement, Field } from '@progress/kendo-vue-form';
+import FormInput from './FormInput.vue';
+import FormSwitch from './FormSwitch.vue';
+
+export default {
+  emits: {
+    cancel: null,
+  },
+  inject: {
+    ks: {
+      default: null,
+    },
+    kendoForm: { default: {} },
+  },
+  components: {
+    SchedulerFormEditor,
+    SchedulerActionButtons,
+    kfield: Field,
+    FormElement,
+    forminput: FormInput,
+    formswitch: FormSwitch,
+  },
+  methods: {
+    handleCancel(e) {
+      this.$emit('cancel', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/customize-default/FormInput.vue b/vue-options-api-demos/scheduler/data-operations/editing/customize-default/FormInput.vue
new file mode 100644
index 00000000..70d42e2e
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/customize-default/FormInput.vue
@@ -0,0 +1,89 @@
+<template>
+  <fieldwrapper>
+    <klabel
+      :class="'k-form-label'"
+      :editor-id="id"
+      :editor-valid="valid"
+      :disabled="disabled"
+      :optional="optional"
+    >
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <kinput
+        :style="{ width: '230px' }"
+        :valid="valid"
+        :id="id"
+        :value="value"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        @input="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { Input } from '@progress/kendo-vue-inputs';
+export default {
+  props: {
+    optional: Boolean,
+    disabled: Boolean,
+    placeholder: String,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    kinput: Input,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/customize-default/FormSwitch.vue b/vue-options-api-demos/scheduler/data-operations/editing/customize-default/FormSwitch.vue
new file mode 100644
index 00000000..35203db3
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/customize-default/FormSwitch.vue
@@ -0,0 +1,102 @@
+<template>
+  <fieldwrapper>
+    <klabel
+      :class="'k-form-label'"
+      :editor-id="id"
+      :editor-valid="valid"
+      :disabled="disabled"
+      :optional="optional"
+    >
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <kswitch
+        :valid="valid"
+        :id="id"
+        :checked="value"
+        :disabled="disabled"
+        :required="required"
+        :placeholder="placeholder"
+        :on-label="'Yes'"
+        :off-label="'No'"
+        @change="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+
+      <span v-if="showValidationMessage && showHint">
+        <error>
+          {{ validationMessage }}
+        </error>
+        <hint>{{ hint }}</hint>
+      </span>
+      <error v-else-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else-if="showHint">{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { Switch } from '@progress/kendo-vue-inputs';
+export default {
+  props: {
+    optional: Boolean,
+    disabled: Boolean,
+    placeholder: String,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    kswitch: Switch,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/customize-default/events-utc.js b/vue-options-api-demos/scheduler/data-operations/editing/customize-default/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/customize-default/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/customize-default/main.js b/vue-options-api-demos/scheduler/data-operations/editing/customize-default/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/customize-default/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/customize-default/main.vue b/vue-options-api-demos/scheduler/data-operations/editing/customize-default/main.vue
new file mode 100644
index 00000000..6f8a1d28
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/customize-default/main.vue
@@ -0,0 +1,67 @@
+<template>
+  <Scheduler
+    :data-items="sampleData"
+    :default-date="displayDate"
+    :views="views"
+    :view="view"
+    :editable="editable"
+    @datachange="handleDataChange"
+    :form="'formRender'"
+  >
+    <template v-slot:formRender="{ props }">
+      <customEditForm @cancel="props.onCancel" />
+    </template>
+  </Scheduler>
+</template>
+<script>
+import { displayDate, sampleData } from './events-utc';
+import { guid } from '@progress/kendo-vue-common';
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+import CustomEditForm from './CustomEditForm.vue';
+
+export default {
+  components: {
+    Scheduler,
+    customEditForm: CustomEditForm,
+  },
+  data() {
+    return {
+      view: 'day',
+      editable: {
+        add: true,
+        remove: true,
+        edit: true,
+      },
+      views: [
+        { name: 'day' },
+        { name: 'timeline' },
+        { name: 'week' },
+        { name: 'agenda' },
+      ],
+      sampleData,
+      displayDate,
+    };
+  },
+  methods: {
+    handleDataChange({ created, updated, deleted }) {
+      const newData = [...this.sampleData] // Filter the deleted items
+        .filter(
+          (item) =>
+            deleted.find((current) => current.id === item.id) === undefined
+        ) // Find and replace the updated items
+        .map(
+          (item) => updated.find((current) => current.id === item.id) || item
+        ) // Add the newly created items and assign an `id`.
+        .concat(
+          created.map((item) =>
+            Object.assign({}, item, {
+              id: guid(),
+            })
+          )
+        );
+
+      this.sampleData = newData;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/default-values/events-utc.js b/vue-options-api-demos/scheduler/data-operations/editing/default-values/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/default-values/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/default-values/main.js b/vue-options-api-demos/scheduler/data-operations/editing/default-values/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/default-values/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/default-values/main.vue b/vue-options-api-demos/scheduler/data-operations/editing/default-values/main.vue
new file mode 100644
index 00000000..812cf366
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/default-values/main.vue
@@ -0,0 +1,117 @@
+<template>
+  <Scheduler
+    :data-items="sampleData"
+    :default-date="displayDate"
+    :views="views"
+    :view="defaultView"
+    :resources="resources"
+    :modifyInitialFormValues="modifyInitialFormValues"
+    :editable="editable"
+    @datachange="handleDataChange"
+  >
+  </Scheduler>
+</template>
+<script>
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+import { guid } from '@progress/kendo-vue-common';
+import { sampleData, displayDate } from './events-utc';
+
+export default {
+  components: {
+    Scheduler,
+  },
+  methods: {
+    modifyInitialFormValues(dataItem) {
+      return dataItem.roomId === undefined
+        ? {
+            ...dataItem,
+            roomId: 1,
+            isAllDay: true,
+          }
+        : dataItem;
+    },
+    handleDataChange({ created, updated, deleted }) {
+      const newData = [...this.sampleData] // Filter the deleted items
+        .filter(
+          (item) =>
+            deleted.find((current) => current.id === item.id) === undefined
+        ) // Find and replace the updated items
+        .map(
+          (item) => updated.find((current) => current.id === item.id) || item
+        ) // Add the newly created items and assign an `id`.
+        .concat(
+          created.map((item) =>
+            Object.assign({}, item, {
+              id: guid(),
+            })
+          )
+        );
+
+      this.sampleData = newData;
+    },
+  },
+  data() {
+    return {
+      defaultView: 'day',
+      editable: {
+        add: true,
+        remove: true,
+        drag: false,
+        resize: false,
+        select: false,
+        edit: true,
+      },
+      views: [
+        { name: 'timeline' },
+        { name: 'month' },
+        { name: 'day' },
+        { name: 'week' },
+        { name: 'workweek' },
+        { name: 'agenda' },
+      ],
+      resources: [
+        {
+          name: 'Rooms',
+          data: [
+            {
+              text: 'Meeting Room 101',
+              value: 1,
+              color: 'orange',
+            },
+            {
+              text: 'Meeting Room 201',
+              value: 2,
+              color: 'green',
+            },
+          ],
+          field: 'roomId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+        {
+          name: 'Persons',
+          data: [
+            {
+              text: 'Peter',
+              value: 1,
+              color: 'red',
+            },
+            {
+              text: 'Alex',
+              value: 2,
+              color: 'blue',
+            },
+          ],
+          field: 'personId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+      ],
+      sampleData,
+      displayDate,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/CustomEditForm.vue b/vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/CustomEditForm.vue
new file mode 100644
index 00000000..f90dbdf4
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/CustomEditForm.vue
@@ -0,0 +1,116 @@
+<template>
+  <FormElement class="k-scheduler-edit-form">
+    <div class="k-form-field">
+      <kfield :name="'title'" :component="'myTemplate'" :label="'Event Title'">
+        <template v-slot:myTemplate="{ props }">
+          <forminput
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          />
+        </template>
+      </kfield>
+
+      <kfield
+        :name="'start'"
+        :component="'myTemplate'"
+        :label="'Event description:'"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <formdatetimepicker
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          />
+        </template>
+      </kfield>
+      <kfield
+        :name="'end'"
+        :component="'myTemplate'"
+        :label="'Event description:'"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <formdatetimepicker
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          />
+        </template>
+      </kfield>
+      <kfield
+        :name="'isAllDay'"
+        :component="'myTemplate'"
+        :label="'All Day Event'"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <formswitch
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          />
+        </template>
+      </kfield>
+      <kfield
+        :name="'description'"
+        :component="'myTemplate'"
+        :label="'Event description:'"
+      >
+        <template v-slot:myTemplate="{ props }">
+          <formtextarea
+            v-bind="props"
+            @change="props.onChange"
+            @blur="props.onBlur"
+            @focus="props.onFocus"
+          />
+        </template>
+      </kfield>
+    </div>
+    <SchedulerActionButtons
+      :editSaveMessage="'Save'"
+      :editCancelMessage="'Cancel'"
+      @cancel="handleCancel"
+    />
+  </FormElement>
+</template>
+<script>
+import {
+  SchedulerActionButtons,
+  SchedulerFormEditor,
+} from '@progress/kendo-vue-scheduler';
+import { FormElement, Field } from '@progress/kendo-vue-form';
+import FormInput from './FormInput.vue';
+import FormSwitch from './FormSwitch.vue';
+import FormTextArea from './FormTextArea.vue';
+import FormDateTimePicker from './FormDateTimePicker.vue';
+
+export default {
+  emits: {
+    cancel: null,
+  },
+  inject: {
+    ks: {
+      default: null,
+    },
+    kendoForm: { default: {} },
+  },
+  components: {
+    SchedulerFormEditor,
+    SchedulerActionButtons,
+    kfield: Field,
+    FormElement,
+    forminput: FormInput,
+    formswitch: FormSwitch,
+    formtextarea: FormTextArea,
+    formdatetimepicker: FormDateTimePicker,
+  },
+  methods: {
+    handleCancel(e) {
+      this.$emit('cancel', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/FormDateTimePicker.vue b/vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/FormDateTimePicker.vue
new file mode 100644
index 00000000..be5eacb0
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/FormDateTimePicker.vue
@@ -0,0 +1,78 @@
+<template>
+  <fieldwrapper>
+    <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <datetimepicker
+        :style="{ width: '230px' }"
+        :valid="valid"
+        :value="value"
+        :id="id"
+        @change="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { DateTimePicker } from '@progress/kendo-vue-dateinputs';
+export default {
+  props: {
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: Date,
+      default: null,
+    },
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    datetimepicker: DateTimePicker,
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/FormInput.vue b/vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/FormInput.vue
new file mode 100644
index 00000000..70d42e2e
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/FormInput.vue
@@ -0,0 +1,89 @@
+<template>
+  <fieldwrapper>
+    <klabel
+      :class="'k-form-label'"
+      :editor-id="id"
+      :editor-valid="valid"
+      :disabled="disabled"
+      :optional="optional"
+    >
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <kinput
+        :style="{ width: '230px' }"
+        :valid="valid"
+        :id="id"
+        :value="value"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        @input="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else>{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { Input } from '@progress/kendo-vue-inputs';
+export default {
+  props: {
+    optional: Boolean,
+    disabled: Boolean,
+    placeholder: String,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    kinput: Input,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/FormSwitch.vue b/vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/FormSwitch.vue
new file mode 100644
index 00000000..35203db3
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/FormSwitch.vue
@@ -0,0 +1,102 @@
+<template>
+  <fieldwrapper>
+    <klabel
+      :class="'k-form-label'"
+      :editor-id="id"
+      :editor-valid="valid"
+      :disabled="disabled"
+      :optional="optional"
+    >
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <kswitch
+        :valid="valid"
+        :id="id"
+        :checked="value"
+        :disabled="disabled"
+        :required="required"
+        :placeholder="placeholder"
+        :on-label="'Yes'"
+        :off-label="'No'"
+        @change="handleChange"
+        @blur="handleBlur"
+        @focus="handleFocus"
+      />
+
+      <span v-if="showValidationMessage && showHint">
+        <error>
+          {{ validationMessage }}
+        </error>
+        <hint>{{ hint }}</hint>
+      </span>
+      <error v-else-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <hint v-else-if="showHint">{{ hint }}</hint>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { Switch } from '@progress/kendo-vue-inputs';
+export default {
+  props: {
+    optional: Boolean,
+    disabled: Boolean,
+    placeholder: String,
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    valid: Boolean,
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+    kswitch: Switch,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/FormTextArea.vue b/vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/FormTextArea.vue
new file mode 100644
index 00000000..014b7e68
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/FormTextArea.vue
@@ -0,0 +1,84 @@
+<template>
+  <fieldwrapper>
+    <klabel :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
+      {{ label }}
+    </klabel>
+    <div class="k-form-field-wrap">
+      <span class="k-textarea">
+        <ktextarea
+          :valid="valid"
+          :value="value"
+          :id="id"
+          :maxlength="max"
+          @input="handleChange"
+          @blur="handleBlur"
+          @focus="handleFocus"
+        ></ktextarea>
+      </span>
+      <error v-if="showValidationMessage">
+        {{ validationMessage }}
+      </error>
+      <div v-else style="display: flex; justify-content: space-between">
+        <hint>{{ hint }}</hint>
+      </div>
+    </div>
+  </fieldwrapper>
+</template>
+<script>
+import { FieldWrapper } from '@progress/kendo-vue-form';
+import { Error, Hint, Label } from '@progress/kendo-vue-labels';
+import { TextArea } from '@progress/kendo-vue-inputs';
+
+export default {
+  props: {
+    touched: Boolean,
+    label: String,
+    validationMessage: String,
+    hint: String,
+    id: String,
+    max: Number,
+    valid: Boolean,
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  components: {
+    ktextarea: TextArea,
+    fieldwrapper: FieldWrapper,
+    error: Error,
+    hint: Hint,
+    klabel: Label,
+  },
+  emits: {
+    change: null,
+    blur: null,
+    focus: null,
+  },
+  computed: {
+    showValidationMessage() {
+      return this.$props.touched && this.$props.validationMessage;
+    },
+    showHint() {
+      return !this.showValidationMessage && this.$props.hint;
+    },
+    hintId() {
+      return this.showHint ? `${this.$props.id}_hint` : '';
+    },
+    errorId() {
+      return this.showValidationMessage ? `${this.$props.id}_error` : '';
+    },
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('change', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/events-utc.js b/vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/main.js b/vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/main.vue b/vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/main.vue
new file mode 100644
index 00000000..71070346
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/validation/using-custom-form/main.vue
@@ -0,0 +1,76 @@
+<template>
+  <Scheduler
+    :data-items="sampleData"
+    :default-date="displayDate"
+    :views="views"
+    :view="view"
+    :editable="editable"
+    @datachange="handleDataChange"
+    :validator="validator"
+    :form="'formRender'"
+  >
+    <template v-slot:formRender="{ props }">
+      <customEditForm @cancel="props.onCancel" />
+    </template>
+  </Scheduler>
+</template>
+<script>
+import { displayDate, sampleData } from './events-utc';
+import { guid } from '@progress/kendo-vue-common';
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+import CustomEditForm from './CustomEditForm.vue';
+
+export default {
+  components: {
+    Scheduler,
+    customEditForm: CustomEditForm,
+  },
+  data() {
+    return {
+      view: 'day',
+      editable: {
+        add: true,
+        remove: true,
+        edit: true,
+      },
+      views: [
+        { name: 'day' },
+        { name: 'timeline' },
+        { name: 'week' },
+        { name: 'agenda' },
+      ],
+      sampleData,
+      displayDate,
+    };
+  },
+  methods: {
+    validator(formValueGetter) {
+      const desc = formValueGetter('description');
+      const title = formValueGetter('title');
+      return {
+        title: title ? undefined : 'The event should have a title',
+        description: desc ? undefined : 'Please add event description',
+      };
+    },
+    handleDataChange({ created, updated, deleted }) {
+      const newData = [...this.sampleData] // Filter the deleted items
+        .filter(
+          (item) =>
+            deleted.find((current) => current.id === item.id) === undefined
+        ) // Find and replace the updated items
+        .map(
+          (item) => updated.find((current) => current.id === item.id) || item
+        ) // Add the newly created items and assign an `id`.
+        .concat(
+          created.map((item) =>
+            Object.assign({}, item, {
+              id: guid(),
+            })
+          )
+        );
+
+      this.sampleData = newData;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/validation/using-default-form/events-utc.js b/vue-options-api-demos/scheduler/data-operations/editing/validation/using-default-form/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/validation/using-default-form/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/validation/using-default-form/main.js b/vue-options-api-demos/scheduler/data-operations/editing/validation/using-default-form/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/validation/using-default-form/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/data-operations/editing/validation/using-default-form/main.vue b/vue-options-api-demos/scheduler/data-operations/editing/validation/using-default-form/main.vue
new file mode 100644
index 00000000..6ed6e9f9
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/editing/validation/using-default-form/main.vue
@@ -0,0 +1,116 @@
+<template>
+  <Scheduler
+    :data-items="sampleData"
+    :default-date="displayDate"
+    :views="views"
+    :view="defaultView"
+    :resources="resources"
+    :validator="validator"
+    :editable="editable"
+    @datachange="handleDataChange"
+  >
+  </Scheduler>
+</template>
+<script>
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+import { guid } from '@progress/kendo-vue-common';
+import { sampleData, displayDate } from './events-utc';
+
+export default {
+  components: {
+    Scheduler,
+  },
+  methods: {
+    validator(formValueGetter) {
+      const desc = formValueGetter('description');
+      const roomId = formValueGetter('roomId');
+      return {
+        description: desc ? undefined : 'Please add event description',
+        roomId: roomId ? undefined : 'Please select a room for the event',
+      };
+    },
+    handleDataChange({ created, updated, deleted }) {
+      const newData = [...this.sampleData] // Filter the deleted items
+        .filter(
+          (item) =>
+            deleted.find((current) => current.id === item.id) === undefined
+        ) // Find and replace the updated items
+        .map(
+          (item) => updated.find((current) => current.id === item.id) || item
+        ) // Add the newly created items and assign an `id`.
+        .concat(
+          created.map((item) =>
+            Object.assign({}, item, {
+              id: guid(),
+            })
+          )
+        );
+
+      this.sampleData = newData;
+    },
+  },
+  data() {
+    return {
+      defaultView: 'day',
+      editable: {
+        add: true,
+        remove: true,
+        drag: false,
+        resize: false,
+        select: false,
+        edit: true,
+      },
+      views: [
+        { name: 'timeline' },
+        { name: 'month' },
+        { name: 'day' },
+        { name: 'week' },
+        { name: 'workweek' },
+        { name: 'agenda' },
+      ],
+      resources: [
+        {
+          name: 'Rooms',
+          data: [
+            {
+              text: 'Meeting Room 101',
+              value: 1,
+              color: 'orange',
+            },
+            {
+              text: 'Meeting Room 201',
+              value: 2,
+              color: 'green',
+            },
+          ],
+          field: 'roomId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+        {
+          name: 'Persons',
+          data: [
+            {
+              text: 'Peter',
+              value: 1,
+              color: 'red',
+            },
+            {
+              text: 'Alex',
+              value: 2,
+              color: 'blue',
+            },
+          ],
+          field: 'personId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+      ],
+      sampleData,
+      displayDate,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/data-operations/grouping/configuration/data.js b/vue-options-api-demos/scheduler/data-operations/grouping/configuration/data.js
new file mode 100644
index 00000000..22792d6b
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/grouping/configuration/data.js
@@ -0,0 +1,32 @@
+export const defaultDate = new Date("2011-06-09T00:00:00.000Z");
+export const data = [
+    {
+        id: 0,
+        title: 'Room 1, Person 1',
+        start: new Date("2011-06-09T09:00:00.000Z"),
+        end: new Date("2011-06-09T11:00:00.000Z"),
+        roomId: 1,
+        personId: 1
+    }, {
+        id: 1,
+        title: 'Room 1, Person 2',
+        start: new Date("2011-06-09T09:00:00.000Z"),
+        end: new Date("2011-06-09T11:00:00.000Z"),
+        roomId: 1,
+        personId: 2
+    }, {
+        id: 2,
+        title: 'Room 2, Person 1',
+        start: new Date("2011-06-09T09:00:00.000Z"),
+        end: new Date("2011-06-09T11:00:00.000Z"),
+        roomId: 2,
+        personId: 1
+    }, {
+        id: 3,
+        title: 'Room 2, Person 2',
+        start: new Date("2011-06-09T09:00:00.000Z"),
+        end: new Date("2011-06-09T11:00:00.000Z"),
+        roomId: 2,
+        personId: 2
+    }
+];
diff --git a/vue-options-api-demos/scheduler/data-operations/grouping/configuration/main.js b/vue-options-api-demos/scheduler/data-operations/grouping/configuration/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/grouping/configuration/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/data-operations/grouping/configuration/main.vue b/vue-options-api-demos/scheduler/data-operations/grouping/configuration/main.vue
new file mode 100644
index 00000000..77f0041a
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/grouping/configuration/main.vue
@@ -0,0 +1,56 @@
+<template>
+    <Scheduler
+        :style="{height: '700px'}"
+        :data-items="data"
+        :default-date="defaultDate"
+        :views="views"
+        :group="group"
+        :resources="resources"
+        :timezone="'Etc/UTC'"
+    ></Scheduler>
+</template>
+<script>
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+import { data, defaultDate } from './data';
+
+export default {
+    components: {
+        Scheduler,
+    },
+    data() {
+        return {
+            views: [{ name: 'day', title: 'Day' }],
+            data,
+            defaultDate,
+            group: {
+                resources: ['Rooms', 'Person'],
+                orientation: 'horizontal',
+            },
+            resources: [
+                {
+                    name: 'Rooms',
+                    data: [
+                        { text: 'Meeting Room 101', value: 1, color: '#5392E4' },
+                        { text: 'Meeting Room 201', value: 2, color: '#FF7272' },
+                    ],
+                    field: 'roomId',
+                    valueField: 'value',
+                    textField: 'text',
+                    colorField: 'color',
+                },
+                {
+                    name: 'Person',
+                    data: [
+                        { text: 'Peter', value: 1 },
+                        { text: 'Alex', value: 2 },
+                    ],
+                    field: 'personId',
+                    valueField: 'value',
+                    textField: 'text',
+                    colorField: 'color',
+                },
+            ],
+        };
+    },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/data-operations/grouping/multiple/data.js b/vue-options-api-demos/scheduler/data-operations/grouping/multiple/data.js
new file mode 100644
index 00000000..5d0f8184
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/grouping/multiple/data.js
@@ -0,0 +1,18 @@
+export const defaultDate = new Date("2011-06-09T00:00:00.000Z");
+export const data = [
+    {
+        id: 0,
+        title: 'Team meeting',
+        start: new Date("2011-06-09T09:00:00.000Z"),
+        end: new Date("2011-06-09T11:00:00.000Z"),
+        roomId: 1,
+        personIds: [ 1, 2 ]
+    }, {
+        id: 1,
+        title: 'Peter Acceleration Program',
+        start: new Date("2011-06-09T11:30:00.000Z"),
+        end: new Date("2011-06-09T13:00:00.000Z"),
+        roomId: 2,
+        personIds: [ 1 ]
+    }
+];
diff --git a/vue-options-api-demos/scheduler/data-operations/grouping/multiple/main.js b/vue-options-api-demos/scheduler/data-operations/grouping/multiple/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/grouping/multiple/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/data-operations/grouping/multiple/main.vue b/vue-options-api-demos/scheduler/data-operations/grouping/multiple/main.vue
new file mode 100644
index 00000000..54417b9b
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/grouping/multiple/main.vue
@@ -0,0 +1,59 @@
+<template>
+    <Scheduler
+        :style="{ height: '700px' }"
+        :data-items="data"
+        :default-date="defaultDate"
+        :views="views"
+        :group="group"
+        :resources="resources"
+        :timezone="'Etc/UTC'"
+    ></Scheduler>
+</template>
+<script>
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+import { data, defaultDate } from './data';
+
+export default {
+    components: {
+        Scheduler,
+    },
+    data() {
+        return {
+            views: [{ name: 'day', title: 'Day' }],
+            data,
+            defaultDate,
+            group: {
+                resources: ['Rooms', 'Persons'],
+                orientation: 'horizontal',
+            },
+            resources: [
+                {
+                    name: 'Rooms',
+                    data: [
+                        { text: 'Meeting Room 101', value: 1 },
+                        { text: 'Meeting Room 201', value: 2 },
+                    ],
+                    field: 'roomId',
+                    valueField: 'value',
+                    textField: 'text',
+                    colorField: 'color',
+                },
+                {
+                    // We're changing the name from `Person` to `Persons`.
+                    name: 'Persons',
+                    data: [
+                        { text: 'Peter', value: 1, color: '#5392E4' },
+                        { text: 'Alex', value: 2, color: '#FF7272' },
+                    ],
+                    multiple: true,
+                    // We're changing the field from `personId` to `PersonIds`.
+                    field: 'personIds',
+                    valueField: 'value',
+                    textField: 'text',
+                    colorField: 'color',
+                },
+            ],
+        };
+    },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/data-operations/resources/multiple/events-utc.js b/vue-options-api-demos/scheduler/data-operations/resources/multiple/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/resources/multiple/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/data-operations/resources/multiple/main.js b/vue-options-api-demos/scheduler/data-operations/resources/multiple/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/resources/multiple/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/data-operations/resources/multiple/main.vue b/vue-options-api-demos/scheduler/data-operations/resources/multiple/main.vue
new file mode 100644
index 00000000..da03ca8b
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/resources/multiple/main.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <Scheduler
+      :data-items="sampleDataWithResources"
+      :default-date="displayDate"
+      :view="view"
+      :views="views"
+      :resources="resources"
+    ></Scheduler>
+  </div>
+</template>
+<script>
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+import { sampleDataWithResources, displayDate } from './events-utc';
+
+export default {
+  components: {
+    Scheduler,
+  },
+  data() {
+    return {
+      sampleDataWithResources,
+      displayDate,
+      view: 'month',
+      views: [
+        {
+          name: 'month',
+          title: 'Month',
+        },
+      ],
+      resources: [
+        {
+          name: 'Rooms',
+          data: [
+            { text: 'Meeting Room 101', value: 1 },
+            { text: 'Meeting Room 201', value: 2, color: '#FF7272' },
+          ],
+          field: 'roomId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+        {
+          name: 'Persons',
+          data: [
+            { text: 'Peter', value: 1, color: '#5392E4' },
+            { text: 'Alex', value: 2, color: '#54677B' },
+          ],
+          field: 'personId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/data-operations/resources/visual/events-utc.js b/vue-options-api-demos/scheduler/data-operations/resources/visual/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/resources/visual/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/data-operations/resources/visual/main.js b/vue-options-api-demos/scheduler/data-operations/resources/visual/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/resources/visual/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/data-operations/resources/visual/main.vue b/vue-options-api-demos/scheduler/data-operations/resources/visual/main.vue
new file mode 100644
index 00000000..07194cbd
--- /dev/null
+++ b/vue-options-api-demos/scheduler/data-operations/resources/visual/main.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <Scheduler
+      :data-items="sampleDataWithResources"
+      :default-date="displayDate"
+      :view="view"
+      :views="views"
+      :resources="resources"
+    ></Scheduler>
+  </div>
+</template>
+<script>
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+import { sampleDataWithResources, displayDate } from './events-utc';
+
+export default {
+  components: {
+    Scheduler,
+  },
+  data() {
+    return {
+      sampleDataWithResources,
+      displayDate,
+      view: 'month',
+      views: [
+        {
+          name: 'month',
+          title: 'Month',
+        },
+      ],
+      resources: [
+        {
+          name: 'Rooms',
+          data: [
+            { text: 'Meeting Room 101', value: 1, color: '#5392E4' },
+            { text: 'Meeting Room 201', value: 2, color: '#FF7272' },
+          ],
+          field: 'roomId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/date-selection/controlled/main.js b/vue-options-api-demos/scheduler/date-selection/controlled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/date-selection/controlled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/date-selection/controlled/main.vue b/vue-options-api-demos/scheduler/date-selection/controlled/main.vue
new file mode 100644
index 00000000..3fbcbc92
--- /dev/null
+++ b/vue-options-api-demos/scheduler/date-selection/controlled/main.vue
@@ -0,0 +1,9 @@
+<template>
+            <div>Scheudler demo</div>
+</template>
+<script>
+export default {
+
+
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/date-selection/uncontrolled/main.js b/vue-options-api-demos/scheduler/date-selection/uncontrolled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/date-selection/uncontrolled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/date-selection/uncontrolled/main.vue b/vue-options-api-demos/scheduler/date-selection/uncontrolled/main.vue
new file mode 100644
index 00000000..3fbcbc92
--- /dev/null
+++ b/vue-options-api-demos/scheduler/date-selection/uncontrolled/main.vue
@@ -0,0 +1,9 @@
+<template>
+            <div>Scheudler demo</div>
+</template>
+<script>
+export default {
+
+
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/globalization/overview/es.json b/vue-options-api-demos/scheduler/globalization/overview/es.json
new file mode 100644
index 00000000..83769a7d
--- /dev/null
+++ b/vue-options-api-demos/scheduler/globalization/overview/es.json
@@ -0,0 +1,19 @@
+{
+    "scheduler": {
+      "today": "Hoy",
+      "allDay": "todo el dia",
+      "showWorkDay": "Mostrar horas laborables",
+      "showFullDay": "Mostrar día completo",
+      "dayViewTitle": "Día",
+      "weekViewTitle": "Semana",
+      "monthViewTitle": "Mes",
+      "editorValidationRequired": "Field is required.",
+      "editorValidationStart": "Start time must be be before End time.",
+      "editorValidationEnd": "End time must be after Start time.",
+      "workWeekViewTitle": "Semana laboral",
+      "agendaViewTitle": "Agenda",
+      "previousTitle": "Previous",
+      "nextTitle": "Next"
+    }
+  }
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/globalization/overview/events-utc.js b/vue-options-api-demos/scheduler/globalization/overview/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/globalization/overview/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/globalization/overview/main.js b/vue-options-api-demos/scheduler/globalization/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/globalization/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/globalization/overview/main.vue b/vue-options-api-demos/scheduler/globalization/overview/main.vue
new file mode 100644
index 00000000..bd747f54
--- /dev/null
+++ b/vue-options-api-demos/scheduler/globalization/overview/main.vue
@@ -0,0 +1,92 @@
+<template>
+  <LocalizationProvider :language="'es-ES'">
+    <IntlProvider :locale="'es'">
+      <Scheduler
+        :view="view"
+        :data-items="sampleData"
+        :default-date="displayDate"
+        :views="views"
+      >
+      </Scheduler>
+    </IntlProvider>
+  </LocalizationProvider>
+</template>
+<script>
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+import { sampleData, displayDate } from './events-utc';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import {
+  IntlProvider,
+  load,
+  LocalizationProvider,
+  loadMessages,
+} from '@progress/kendo-vue-intl';
+import likelySubtags from 'cldr-core/supplemental/likelySubtags.json';
+import currencyData from 'cldr-core/supplemental/currencyData.json';
+import weekData from 'cldr-core/supplemental/weekData.json';
+import numbers from 'cldr-numbers-full/main/es/numbers.json';
+import currencies from 'cldr-numbers-full/main/es/currencies.json';
+import caGregorian from 'cldr-dates-full/main/es/ca-gregorian.json';
+import dateFields from 'cldr-dates-full/main/es/dateFields.json';
+import timeZoneNames from 'cldr-dates-full/main/es/timeZoneNames.json';
+load(
+  likelySubtags,
+  currencyData,
+  weekData,
+  numbers,
+  currencies,
+  caGregorian,
+  dateFields,
+  timeZoneNames
+);
+import esMessages from './es.json';
+loadMessages(esMessages, 'es-ES');
+
+export default {
+  components: {
+    IntlProvider,
+    LocalizationProvider,
+    Scheduler,
+    dropdownlist: DropDownList,
+  },
+  data() {
+    return {
+      ddlValue: { name: 'day', title: 'Day' },
+      view: 'day',
+      views: [
+        {
+          name: 'day',
+          class: 'aaa',
+          showWorkHours: false,
+          startTime: '09:00',
+          endTime: '11:00',
+          workDayStart: '10:00',
+          workDayEnd: '10:30',
+        },
+        {
+          name: 'week',
+          class: 'bbb',
+          showWorkHours: true,
+          startTime: '12:00',
+          endTime: '19:00',
+          workDayStart: '13:00',
+          workDayEnd: '14:30',
+        },
+        {
+          name: 'workWeek',
+          class: 'ccc',
+          showWorkHours: true,
+          startTime: '12:00',
+          endTime: '19:00',
+          workDayStart: '13:00',
+          workDayEnd: '14:30',
+        },
+        { name: 'agenda', class: 'eeee', numberOfDays: 3, step: 4 },
+        { name: 'month', class: 'ddd', itemsPerSlot: 3 },
+      ],
+      sampleData,
+      displayDate,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/globalization/rtl/events-utc.js b/vue-options-api-demos/scheduler/globalization/rtl/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/globalization/rtl/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/globalization/rtl/main.js b/vue-options-api-demos/scheduler/globalization/rtl/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/globalization/rtl/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/globalization/rtl/main.vue b/vue-options-api-demos/scheduler/globalization/rtl/main.vue
new file mode 100644
index 00000000..47dd3f35
--- /dev/null
+++ b/vue-options-api-demos/scheduler/globalization/rtl/main.vue
@@ -0,0 +1,32 @@
+<template>
+  <Scheduler
+    :rtl="true"
+    :style="{ height: '700px' }"
+    :data-items="sampleData"
+    :default-date="displayDate"
+    :views="views"
+  ></Scheduler>
+</template>
+<script>
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+import { sampleData, displayDate } from './events-utc';
+
+export default {
+  components: {
+    Scheduler,
+  },
+  data() {
+    return {
+      views: [
+        { name: 'day', title: 'Day' },
+        { name: 'week', title: 'Week' },
+        { name: 'workweek', title: 'Work week' },
+        { name: 'month', title: 'Month' },
+        { name: 'agenda', title: 'Agenda' },
+      ],
+      sampleData,
+      displayDate,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/header-footer/customization/main.js b/vue-options-api-demos/scheduler/header-footer/customization/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/header-footer/customization/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/header-footer/customization/main.vue b/vue-options-api-demos/scheduler/header-footer/customization/main.vue
new file mode 100644
index 00000000..3fbcbc92
--- /dev/null
+++ b/vue-options-api-demos/scheduler/header-footer/customization/main.vue
@@ -0,0 +1,9 @@
+<template>
+            <div>Scheudler demo</div>
+</template>
+<script>
+export default {
+
+
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/items/context/action-binding/main.js b/vue-options-api-demos/scheduler/items/context/action-binding/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/items/context/action-binding/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/items/context/action-binding/main.vue b/vue-options-api-demos/scheduler/items/context/action-binding/main.vue
new file mode 100644
index 00000000..3fbcbc92
--- /dev/null
+++ b/vue-options-api-demos/scheduler/items/context/action-binding/main.vue
@@ -0,0 +1,9 @@
+<template>
+            <div>Scheudler demo</div>
+</template>
+<script>
+export default {
+
+
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/items/edit-item/controlled-state/main.js b/vue-options-api-demos/scheduler/items/edit-item/controlled-state/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/items/edit-item/controlled-state/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/items/edit-item/controlled-state/main.vue b/vue-options-api-demos/scheduler/items/edit-item/controlled-state/main.vue
new file mode 100644
index 00000000..3fbcbc92
--- /dev/null
+++ b/vue-options-api-demos/scheduler/items/edit-item/controlled-state/main.vue
@@ -0,0 +1,9 @@
+<template>
+            <div>Scheudler demo</div>
+</template>
+<script>
+export default {
+
+
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/items/edit-item/extending/main.js b/vue-options-api-demos/scheduler/items/edit-item/extending/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/items/edit-item/extending/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/items/edit-item/extending/main.vue b/vue-options-api-demos/scheduler/items/edit-item/extending/main.vue
new file mode 100644
index 00000000..3fbcbc92
--- /dev/null
+++ b/vue-options-api-demos/scheduler/items/edit-item/extending/main.vue
@@ -0,0 +1,9 @@
+<template>
+            <div>Scheudler demo</div>
+</template>
+<script>
+export default {
+
+
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/items/item/callbacks/main.js b/vue-options-api-demos/scheduler/items/item/callbacks/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/items/item/callbacks/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/items/item/callbacks/main.vue b/vue-options-api-demos/scheduler/items/item/callbacks/main.vue
new file mode 100644
index 00000000..3fbcbc92
--- /dev/null
+++ b/vue-options-api-demos/scheduler/items/item/callbacks/main.vue
@@ -0,0 +1,9 @@
+<template>
+            <div>Scheudler demo</div>
+</template>
+<script>
+export default {
+
+
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/items/item/children/main.js b/vue-options-api-demos/scheduler/items/item/children/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/items/item/children/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/items/item/children/main.vue b/vue-options-api-demos/scheduler/items/item/children/main.vue
new file mode 100644
index 00000000..3fbcbc92
--- /dev/null
+++ b/vue-options-api-demos/scheduler/items/item/children/main.vue
@@ -0,0 +1,9 @@
+<template>
+            <div>Scheudler demo</div>
+</template>
+<script>
+export default {
+
+
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/items/item/style/main.js b/vue-options-api-demos/scheduler/items/item/style/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/items/item/style/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/items/item/style/main.vue b/vue-options-api-demos/scheduler/items/item/style/main.vue
new file mode 100644
index 00000000..3fbcbc92
--- /dev/null
+++ b/vue-options-api-demos/scheduler/items/item/style/main.vue
@@ -0,0 +1,9 @@
+<template>
+            <div>Scheudler demo</div>
+</template>
+<script>
+export default {
+
+
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/items/multiple-selection/custom-behavior/main.js b/vue-options-api-demos/scheduler/items/multiple-selection/custom-behavior/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/items/multiple-selection/custom-behavior/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/items/multiple-selection/custom-behavior/main.vue b/vue-options-api-demos/scheduler/items/multiple-selection/custom-behavior/main.vue
new file mode 100644
index 00000000..3fbcbc92
--- /dev/null
+++ b/vue-options-api-demos/scheduler/items/multiple-selection/custom-behavior/main.vue
@@ -0,0 +1,9 @@
+<template>
+            <div>Scheudler demo</div>
+</template>
+<script>
+export default {
+
+
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/items/multiple-selection/custom-trigger/main.js b/vue-options-api-demos/scheduler/items/multiple-selection/custom-trigger/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/items/multiple-selection/custom-trigger/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/items/multiple-selection/custom-trigger/main.vue b/vue-options-api-demos/scheduler/items/multiple-selection/custom-trigger/main.vue
new file mode 100644
index 00000000..3fbcbc92
--- /dev/null
+++ b/vue-options-api-demos/scheduler/items/multiple-selection/custom-trigger/main.vue
@@ -0,0 +1,9 @@
+<template>
+            <div>Scheudler demo</div>
+</template>
+<script>
+export default {
+
+
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/items/multiple-selection/default-behavior/main.js b/vue-options-api-demos/scheduler/items/multiple-selection/default-behavior/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/items/multiple-selection/default-behavior/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/items/multiple-selection/default-behavior/main.vue b/vue-options-api-demos/scheduler/items/multiple-selection/default-behavior/main.vue
new file mode 100644
index 00000000..3fbcbc92
--- /dev/null
+++ b/vue-options-api-demos/scheduler/items/multiple-selection/default-behavior/main.vue
@@ -0,0 +1,9 @@
+<template>
+            <div>Scheudler demo</div>
+</template>
+<script>
+export default {
+
+
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/items/overview/events-utc.js b/vue-options-api-demos/scheduler/items/overview/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/items/overview/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/items/overview/main.js b/vue-options-api-demos/scheduler/items/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/items/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/items/overview/main.vue b/vue-options-api-demos/scheduler/items/overview/main.vue
new file mode 100644
index 00000000..d74b554a
--- /dev/null
+++ b/vue-options-api-demos/scheduler/items/overview/main.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <Scheduler
+      :style="{ height: '700px' }"
+      :data-items="sampleData"
+      :default-date="displayDate"
+      :views="views"
+      :item="'itemRender'"
+    >
+      <template v-slot:itemRender="{ props }">
+        <SchedulerItem
+          v-bind="props"
+          :style="{
+            backgroundColor: props.isAllDay ? 'green' : 'blue',
+          }"
+        >
+          <div class="k-event-template">
+            {{ props.title }}
+          </div>
+        </SchedulerItem>
+      </template>
+    </Scheduler>
+  </div>
+</template>
+<script>
+import { Scheduler, SchedulerItem } from '@progress/kendo-vue-scheduler';
+import { sampleData, displayDate } from './events-utc';
+
+export default {
+  components: {
+    Scheduler,
+    SchedulerItem,
+  },
+  data() {
+    return {
+      views: [
+        { name: 'day' },
+        { name: 'workweek', title: 'Work week' },
+        { name: 'week' },
+        { name: 'month' },
+      ],
+      sampleData,
+      displayDate,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/items/view-item/extending/main.js b/vue-options-api-demos/scheduler/items/view-item/extending/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/items/view-item/extending/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/items/view-item/extending/main.vue b/vue-options-api-demos/scheduler/items/view-item/extending/main.vue
new file mode 100644
index 00000000..3fbcbc92
--- /dev/null
+++ b/vue-options-api-demos/scheduler/items/view-item/extending/main.vue
@@ -0,0 +1,9 @@
+<template>
+            <div>Scheudler demo</div>
+</template>
+<script>
+export default {
+
+
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/keyboard-navigation/basic/events-utc.js b/vue-options-api-demos/scheduler/keyboard-navigation/basic/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/keyboard-navigation/basic/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/keyboard-navigation/basic/main.js b/vue-options-api-demos/scheduler/keyboard-navigation/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/keyboard-navigation/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/keyboard-navigation/basic/main.vue b/vue-options-api-demos/scheduler/keyboard-navigation/basic/main.vue
new file mode 100644
index 00000000..0cde56e0
--- /dev/null
+++ b/vue-options-api-demos/scheduler/keyboard-navigation/basic/main.vue
@@ -0,0 +1,107 @@
+<template>
+   <Scheduler 
+        :data-items="sampleData" 
+        :default-date="displayDate" 
+        :views="views"
+        :editable="editable"   
+        @datachange="handleDataChange"
+    >
+    </Scheduler>
+</template>
+<script>
+import { displayDate, sampleData } from "./events-utc";
+import { guid } from "@progress/kendo-vue-common";
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+
+export default {
+    components: {
+        Scheduler
+    },
+    data () {
+        return {
+            editable: {
+                add: true,
+                remove: true,
+                drag: true,
+                resize: true,
+                select: true,
+                edit: true,
+            },
+             group: {
+                resources: ["Rooms", "Persons"],
+                orientation: "vertical",
+            },
+             resources: [
+          {
+            name: "Rooms",
+            data: [
+              {
+                text: "Meeting Room 101",
+                value: 1,
+              },
+              {
+                text: "Meeting Room 201",
+                value: 2,
+                color: "green",
+              },
+            ],
+            field: "roomId",
+            valueField: "value",
+            textField: "text",
+            colorField: "color",
+          },
+          {
+            name: "Persons",
+            data: [
+              {
+                text: "Peter",
+                value: 1,
+                color: "red",
+              },
+              {
+                text: "Alex",
+                value: 2,
+              },
+            ],
+            field: "personId",
+            valueField: "value",
+            textField: "text",
+            colorField: "color",
+          },
+        ],
+            views: [
+            { name: 'month' },
+            { name: 'day' },
+            { name: 'timeline', title: 'custom TimeLine', columnWidth: 50, workDayStart: '12:00' },
+            { name: 'Week', title: 'Custom Week' },
+            { name: 'workWeek' },
+            { name: 'agenda' },
+        ],
+            sampleData,
+            displayDate
+        };
+    },
+    methods: {
+        handleDataChange ({ created, updated, deleted }){
+            console.log('handleDataChange', created, updated, deleted);
+            const newData = [...this.sampleData] // Filter the deleted items
+                .filter(
+                (item) =>
+                    deleted.find((current) => current.id === item.id) === undefined
+                ) // Find and replace the updated items
+                .map(
+                (item) => updated.find((current) => current.id === item.id) || item
+                ) // Add the newly created items and assign an `id`.
+                .concat(
+                    created.map((item) =>
+                        Object.assign({}, item, {
+                        id: guid(),
+                        })
+                    )
+                );
+            
+            this.sampleData = newData;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/overview/basic/events-utc.js b/vue-options-api-demos/scheduler/overview/basic/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/overview/basic/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/overview/basic/main.js b/vue-options-api-demos/scheduler/overview/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/overview/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/overview/basic/main.vue b/vue-options-api-demos/scheduler/overview/basic/main.vue
new file mode 100644
index 00000000..ee8ce98c
--- /dev/null
+++ b/vue-options-api-demos/scheduler/overview/basic/main.vue
@@ -0,0 +1,31 @@
+<template>
+    <Scheduler
+        :style="{height: '700px'}"
+        :data-items="sampleData"
+        :default-date="displayDate"
+        :views="views"
+    ></Scheduler>
+</template>
+<script>
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+import { sampleData, displayDate } from './events-utc';
+
+export default {
+    components: {
+        Scheduler,
+    },
+    data() {
+        return {
+            views: [
+                { name: 'day', title: "Day" },
+                { name: 'week', title: "Week" },
+                { name: 'workweek', title: "Work week" },
+                { name: 'month', title: "Month" },
+                { name: 'agenda', title: "Agenda" },
+            ],
+            sampleData,
+            displayDate,
+        };
+    },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/overview/demo/es.json b/vue-options-api-demos/scheduler/overview/demo/es.json
new file mode 100644
index 00000000..c4c120d6
--- /dev/null
+++ b/vue-options-api-demos/scheduler/overview/demo/es.json
@@ -0,0 +1,13 @@
+{
+    "scheduler": {
+        "today": "Hoy",
+        "allDay": "todo el dia",
+        "showWorkDay": "Mostrar horas laborables",
+        "showFullDay": "Mostrar día completo",
+        "agendaViewTitle": "Agenda",
+        "dayViewTitle": "Día",
+        "weekViewTitle": "Semana",
+        "workWeekViewTitle": "Semana laboral",
+        "monthViewTitle": "Mes"
+    }
+}
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/overview/demo/events-utc.js b/vue-options-api-demos/scheduler/overview/demo/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/overview/demo/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/overview/demo/main.js b/vue-options-api-demos/scheduler/overview/demo/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/overview/demo/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/overview/demo/main.vue b/vue-options-api-demos/scheduler/overview/demo/main.vue
new file mode 100644
index 00000000..291a8727
--- /dev/null
+++ b/vue-options-api-demos/scheduler/overview/demo/main.vue
@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <div class="example-config">
+      <div class="row">
+        <div class="col">
+          <h5>Timezone:</h5>
+          <DropDownList
+            :style="{ width: '200px' }"
+            :value="timezone"
+            :data-items="timezones"
+            @change="handleTimezoneChange"
+          />
+        </div>
+      </div>
+    </div>
+    <Scheduler
+      :data-items="dataItems"
+      :model-fields="customModelFields"
+      :default-date="displayDate"
+      :view="view"
+      :views="views"
+      :group="group"
+      :editable="true"
+      :resources="resources"
+      :timezone="timezone"
+      @datachange="handleDataChange"
+    ></Scheduler>
+  </div>
+</template>
+<script>
+import { guid } from '@progress/kendo-vue-common';
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import '@progress/kendo-date-math/tz/Etc/UTC';
+import '@progress/kendo-date-math/tz/Europe/Sofia';
+import '@progress/kendo-date-math/tz/Europe/Madrid';
+import '@progress/kendo-date-math/tz/Asia/Dubai';
+import '@progress/kendo-date-math/tz/Asia/Tokyo';
+import '@progress/kendo-date-math/tz/America/New_York';
+import '@progress/kendo-date-math/tz/America/Los_Angeles';
+import { timezoneNames } from '@progress/kendo-date-math';
+import {
+  sampleDataWithCustomSchema,
+  displayDate,
+  customModelFields,
+} from './events-utc';
+
+export default {
+  components: {
+    Scheduler,
+    DropDownList,
+  },
+
+  data() {
+    return {
+      timezone: 'Etc/UTC',
+      timezones: timezoneNames(),
+      dataItems: sampleDataWithCustomSchema,
+      customModelFields: customModelFields,
+      view: 'day',
+      views: [
+        { name: 'timeline', title: 'Timeline' },
+        { name: 'day', title: 'Day View' },
+        { name: 'workweek', title: 'Work Week View' },
+        { name: 'month', title: 'Month View' },
+        { name: 'agenda', title: 'Agenda View' },
+      ],
+      displayDate,
+      resources: [
+        {
+          name: 'Rooms',
+          data: [
+            { text: 'Meeting Room 101', value: 1 },
+            { text: 'Meeting Room 201', value: 2, color: '#5392E4' },
+          ],
+          field: 'RoomID',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+        {
+          name: 'Persons',
+          data: [
+            { text: 'Peter', value: 1, color: '#5392E4' },
+            { text: 'Alex', value: 2, color: '#54677B' },
+          ],
+          field: 'PersonIDs',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+      ],
+      group: {
+        resources: ['Rooms'],
+        orientation: 'horizontal',
+      },
+    };
+  },
+  methods: {
+    handleDataChange({ created, updated, deleted }) {
+      const newData = [...this.dataItems] // Filter the deleted items
+        .filter(
+          (item) =>
+            deleted.find((current) => current.TaskID === item.TaskID) ===
+            undefined
+        ) // Find and replace the updated items
+        .map(
+          (item) =>
+            updated.find((current) => current.TaskID === item.TaskID) || item
+        ) // Add the newly created items and assign an `id`.
+        .concat(
+          created.map((item) =>
+            Object.assign({}, item, {
+              TaskID: guid(),
+            })
+          )
+        );
+
+      this.dataItems = newData;
+    },
+    handleTimezoneChange(event) {
+      this.timezone = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/recurring/overview/id/main.js b/vue-options-api-demos/scheduler/recurring/overview/id/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/recurring/overview/id/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/recurring/overview/id/main.vue b/vue-options-api-demos/scheduler/recurring/overview/id/main.vue
new file mode 100644
index 00000000..3fbcbc92
--- /dev/null
+++ b/vue-options-api-demos/scheduler/recurring/overview/id/main.vue
@@ -0,0 +1,9 @@
+<template>
+            <div>Scheudler demo</div>
+</template>
+<script>
+export default {
+
+
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/recurring/overview/id/server-data.js b/vue-options-api-demos/scheduler/recurring/overview/id/server-data.js
new file mode 100644
index 00000000..0379f9c0
--- /dev/null
+++ b/vue-options-api-demos/scheduler/recurring/overview/id/server-data.js
@@ -0,0 +1,51 @@
+export const serverData = [
+    // The original event, which will be used for editing
+    {
+        id: 24,
+        title: 'Breakfast with Tom',
+        start: new Date("2019-09-02T08:30:00.000Z"),
+        end: new Date("2019-09-02T09:00:00.000Z"),
+        recurrenceRule: "FREQ=DAILY"
+    },
+    // The multiple occurrences, relating to the original event trough the `recurrenceId` field.
+    {
+        id: 1,
+        title: 'Breakfast with Tom',
+        start: new Date("2019-09-02T08:30:00.000Z"),
+        end: new Date("2019-09-02T09:00:00.000Z"),
+        recurrenceId: 24,
+        recurrenceRule: "FREQ=DAILY"
+    },
+    {
+        id: 2,
+        title: 'Breakfast with Tom',
+        start: new Date("2019-09-03T08:30:00.000Z"),
+        end: new Date("2019-09-03T09:00:00.000Z"),
+        recurrenceId: 24,
+        recurrenceRule: "FREQ=DAILY"
+    },
+    {
+        id: 3,
+        title: 'Breakfast with Tom',
+        start: new Date("2019-09-04T08:30:00.000Z"),
+        end: new Date("2019-09-04T09:00:00.000Z"),
+        recurrenceId: 24,
+        recurrenceRule: "FREQ=DAILY"
+    },
+    {
+        id: 4,
+        title: 'Breakfast with Tom',
+        start: new Date("2019-09-05T08:30:00.000Z"),
+        end: new Date("2019-09-05T09:00:00.000Z"),
+        recurrenceId: 24,
+        recurrenceRule: "FREQ=DAILY"
+    },
+    {
+        id: 5,
+        title: 'Breakfast with Tom',
+        start: new Date("2019-09-06T08:30:00.000Z"),
+        end: new Date("2019-09-06T09:00:00.000Z"),
+        recurrenceId: 24,
+        recurrenceRule: "FREQ=DAILY"
+    }
+];
diff --git a/vue-options-api-demos/scheduler/recurring/overview/overview/data.js b/vue-options-api-demos/scheduler/recurring/overview/overview/data.js
new file mode 100644
index 00000000..e9907db3
--- /dev/null
+++ b/vue-options-api-demos/scheduler/recurring/overview/overview/data.js
@@ -0,0 +1,35 @@
+export const displayDate = new Date('2019-09-04T08:00:00.000Z')
+
+export const data = [
+    {
+        id: 0,
+        title: 'Breakfast at home',
+        start: new Date("2019-09-02T07:30:00.000Z"),
+        end: new Date("2019-09-02T08:30:00.000Z"),
+        recurrenceRule: "FREQ=DAILY;BYDAY=TU,TH",
+        recurrenceExceptions: [new Date("2019-09-25T07:30:00.000Z"),new Date("2019-09-26T07:30:00.000Z")]
+    },
+    {
+        id: 1,
+        title: 'Breakfast at the office',
+        start: new Date("2019-09-02T08:30:00.000Z"),
+        end: new Date("2019-09-02T09:00:00.000Z"),
+        recurrenceRule: "FREQ=DAILY;BYDAY=MO,WE,FR",
+        recurrenceExceptions: [new Date("2019-09-25T08:30:00.000Z"),new Date("2019-09-26T08:30:00.000Z")]
+    },
+    {
+        id: 2,
+        title: 'Team Lunch',
+        start: new Date("2019-09-02T12:00:00.000Z"),
+        end: new Date("2019-09-02T13:00:00.000Z"),
+        recurrenceRule: "FREQ=WEEKLY;BYDAY=WE",
+        recurrenceExceptions: [new Date("2019-09-25T12:00:00.000Z"),new Date("2019-09-26T12:00:00.000Z")]
+    },
+    {
+        id: 3,
+        title: 'Vacation',
+        start: new Date("2019-09-25T12:00:00.000Z"),
+        end: new Date("2019-09-26T12:00:00.000Z"),
+        isAllDay: true
+    }
+]
diff --git a/vue-options-api-demos/scheduler/recurring/overview/overview/main.js b/vue-options-api-demos/scheduler/recurring/overview/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/recurring/overview/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/recurring/overview/overview/main.vue b/vue-options-api-demos/scheduler/recurring/overview/overview/main.vue
new file mode 100644
index 00000000..3fbcbc92
--- /dev/null
+++ b/vue-options-api-demos/scheduler/recurring/overview/overview/main.vue
@@ -0,0 +1,9 @@
+<template>
+            <div>Scheudler demo</div>
+</template>
+<script>
+export default {
+
+
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/shared/events-utc.js b/vue-options-api-demos/scheduler/shared/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/shared/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/slots/context/action-binding/main.js b/vue-options-api-demos/scheduler/slots/context/action-binding/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/slots/context/action-binding/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/slots/context/action-binding/main.vue b/vue-options-api-demos/scheduler/slots/context/action-binding/main.vue
new file mode 100644
index 00000000..3fbcbc92
--- /dev/null
+++ b/vue-options-api-demos/scheduler/slots/context/action-binding/main.vue
@@ -0,0 +1,9 @@
+<template>
+            <div>Scheudler demo</div>
+</template>
+<script>
+export default {
+
+
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/slots/edit-slot/controlled-state/main.js b/vue-options-api-demos/scheduler/slots/edit-slot/controlled-state/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/slots/edit-slot/controlled-state/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/slots/edit-slot/controlled-state/main.vue b/vue-options-api-demos/scheduler/slots/edit-slot/controlled-state/main.vue
new file mode 100644
index 00000000..3fbcbc92
--- /dev/null
+++ b/vue-options-api-demos/scheduler/slots/edit-slot/controlled-state/main.vue
@@ -0,0 +1,9 @@
+<template>
+            <div>Scheudler demo</div>
+</template>
+<script>
+export default {
+
+
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/slots/overview/main.js b/vue-options-api-demos/scheduler/slots/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/slots/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/slots/overview/main.vue b/vue-options-api-demos/scheduler/slots/overview/main.vue
new file mode 100644
index 00000000..3fbcbc92
--- /dev/null
+++ b/vue-options-api-demos/scheduler/slots/overview/main.vue
@@ -0,0 +1,9 @@
+<template>
+            <div>Scheudler demo</div>
+</template>
+<script>
+export default {
+
+
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/slots/slot/style/main.js b/vue-options-api-demos/scheduler/slots/slot/style/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/slots/slot/style/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/slots/slot/style/main.vue b/vue-options-api-demos/scheduler/slots/slot/style/main.vue
new file mode 100644
index 00000000..3fbcbc92
--- /dev/null
+++ b/vue-options-api-demos/scheduler/slots/slot/style/main.vue
@@ -0,0 +1,9 @@
+<template>
+            <div>Scheudler demo</div>
+</template>
+<script>
+export default {
+
+
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/slots/view-slot/extending/main.js b/vue-options-api-demos/scheduler/slots/view-slot/extending/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/slots/view-slot/extending/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/slots/view-slot/extending/main.vue b/vue-options-api-demos/scheduler/slots/view-slot/extending/main.vue
new file mode 100644
index 00000000..3fbcbc92
--- /dev/null
+++ b/vue-options-api-demos/scheduler/slots/view-slot/extending/main.vue
@@ -0,0 +1,9 @@
+<template>
+            <div>Scheudler demo</div>
+</template>
+<script>
+export default {
+
+
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/tasks/overview/main.js b/vue-options-api-demos/scheduler/tasks/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/tasks/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/tasks/overview/main.vue b/vue-options-api-demos/scheduler/tasks/overview/main.vue
new file mode 100644
index 00000000..3fbcbc92
--- /dev/null
+++ b/vue-options-api-demos/scheduler/tasks/overview/main.vue
@@ -0,0 +1,9 @@
+<template>
+            <div>Scheudler demo</div>
+</template>
+<script>
+export default {
+
+
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/timezones/default/main.js b/vue-options-api-demos/scheduler/timezones/default/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/timezones/default/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/timezones/default/main.vue b/vue-options-api-demos/scheduler/timezones/default/main.vue
new file mode 100644
index 00000000..6776c910
--- /dev/null
+++ b/vue-options-api-demos/scheduler/timezones/default/main.vue
@@ -0,0 +1,34 @@
+<template>
+  <Scheduler
+    :style="{ height: '700px' }"
+    :data-items="data"
+    :default-date="defaultDate"
+    :views="views"
+    :show-work-hours="false"
+  ></Scheduler>
+</template>
+<script>
+import '@progress/kendo-date-math/tz/America/New_York';
+
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+
+export default {
+  components: {
+    Scheduler,
+  },
+  data() {
+    return {
+      views: [{ name: 'day', title: 'Day' }],
+      defaultDate: new Date('2019-08-27T08:00:00.000Z'),
+      data: [
+        {
+          id: 0,
+          title: 'Breakfast with Tom',
+          start: new Date('2019-08-27T08:30:00.000Z'),
+          end: new Date('2019-08-27T09:00:00.000Z'),
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/timezones/fixed/main.js b/vue-options-api-demos/scheduler/timezones/fixed/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/timezones/fixed/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/timezones/fixed/main.vue b/vue-options-api-demos/scheduler/timezones/fixed/main.vue
new file mode 100644
index 00000000..696f1608
--- /dev/null
+++ b/vue-options-api-demos/scheduler/timezones/fixed/main.vue
@@ -0,0 +1,34 @@
+<template>
+    <Scheduler
+        :style="{ height: '700px' }"
+        :data-items="data"
+        :default-date="defaultDate"
+        :views="views"
+        :timezone="'America/New_York'"
+    ></Scheduler>
+</template>
+<script>
+import '@progress/kendo-date-math/tz/America/New_York';
+
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+
+export default {
+    components: {
+        Scheduler,
+    },
+    data() {
+        return {
+            views: [{ name: 'day', title: 'Day' }],
+            defaultDate: new Date('2019-08-27T08:00:00.000Z'),
+            data: [
+                {
+                    id: 0,
+                    title: 'Breakfast with Tom',
+                    start: new Date('2019-08-27T12:30:00.000Z'),
+                    end: new Date('2019-08-27T14:00:00.000Z'),
+                },
+            ],
+        };
+    },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/views/agenda/configuration/events-utc.js b/vue-options-api-demos/scheduler/views/agenda/configuration/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/agenda/configuration/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/views/agenda/configuration/main.js b/vue-options-api-demos/scheduler/views/agenda/configuration/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/agenda/configuration/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/views/agenda/configuration/main.vue b/vue-options-api-demos/scheduler/views/agenda/configuration/main.vue
new file mode 100644
index 00000000..37a794d8
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/agenda/configuration/main.vue
@@ -0,0 +1,33 @@
+<template>
+    <div>
+        <Scheduler :data-items="sampleData" :default-date="displayDate" :view="view" :views="views"></Scheduler>
+    </div>
+</template>
+<script>
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+import { sampleData, displayDate } from './events-utc';
+
+export default {
+    components: {
+        Scheduler,
+    },
+
+    data() {
+        return {
+            sampleData,
+            displayDate,
+            view: 'agenda',
+            views: [
+                {
+                    name: 'agenda',
+                    title: 'Agenda View',
+                    step: 2,
+                    numberOfDays: 2,
+                    selectedDateFormat: 'From: {0:D} To: {1:D}',
+                    selectedShortDateFormat: 'From: {0:d} To: {1:d}',
+                },
+            ],
+        };
+    },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/views/agenda/grouping/events-utc.js b/vue-options-api-demos/scheduler/views/agenda/grouping/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/agenda/grouping/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/views/agenda/grouping/main.js b/vue-options-api-demos/scheduler/views/agenda/grouping/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/agenda/grouping/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/views/agenda/grouping/main.vue b/vue-options-api-demos/scheduler/views/agenda/grouping/main.vue
new file mode 100644
index 00000000..677f332e
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/agenda/grouping/main.vue
@@ -0,0 +1,64 @@
+<template>
+    <div>
+        <Scheduler
+            :data-items="sampleDataWithResources"
+            :default-date="displayDate"
+            :view="view"
+            :views="views"
+            :group="group"
+            :resources="resources"
+        ></Scheduler>
+    </div>
+</template>
+<script>
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+import { sampleDataWithResources, displayDate } from './events-utc';
+
+export default {
+    components: {
+        Scheduler,
+    },
+
+    data() {
+        return {
+            group: {
+                resources: ['Rooms', 'Persons'],
+                orientation: 'horizontal',
+            },
+            resources: [
+                {
+                    name: 'Rooms',
+                    data: [
+                        { text: 'Meeting Room 101', value: 1, color: 'red' },
+                        { text: 'Meeting Room 201', value: 2, color: 'green' },
+                    ],
+                    field: 'roomId',
+                    valueField: 'value',
+                    textField: 'text',
+                    colorField: 'color',
+                },
+                {
+                    name: 'Persons',
+                    data: [
+                        { text: 'Peter', value: 1 },
+                        { text: 'Alex', value: 2 },
+                    ],
+                    field: 'personId',
+                    valueField: 'value',
+                    textField: 'text',
+                    colorField: 'color',
+                },
+            ],
+            sampleDataWithResources,
+            displayDate,
+            view: 'agenda',
+            views: [
+                {
+                    name: 'agenda',
+                    title: 'Compact View',
+                },
+            ],
+        };
+    },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/views/controlled-state/events-utc.js b/vue-options-api-demos/scheduler/views/controlled-state/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/controlled-state/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/views/controlled-state/main.js b/vue-options-api-demos/scheduler/views/controlled-state/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/controlled-state/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/views/controlled-state/main.vue b/vue-options-api-demos/scheduler/views/controlled-state/main.vue
new file mode 100644
index 00000000..30025fc4
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/controlled-state/main.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="example-config">
+    Select Scheduler view:
+    <dropdownlist
+      :data-items="views"
+      :text-field="'title'"
+      :data-item-key="'name'"
+      :value="ddlValue"
+      @change="handleDropDownListChange"
+    >
+    </dropdownlist>
+  </div>
+  <Scheduler
+    :view="view"
+    :data-items="sampleData"
+    :default-date="displayDate"
+    :views="views"
+    @viewchange="handleViewChange"
+  >
+  </Scheduler>
+</template>
+<script>
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+import { sampleData, displayDate } from './events-utc';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  components: {
+    Scheduler,
+    dropdownlist: DropDownList,
+  },
+  data() {
+    return {
+      ddlValue: { name: 'day', title: 'Day' },
+      view: 'day',
+      views: [
+        { name: 'day', title: 'Day' },
+        { name: 'week', title: 'Week' },
+        { name: 'month', title: 'Month' },
+      ],
+      sampleData,
+      displayDate,
+    };
+  },
+  methods: {
+    handleViewChange(e) {
+      this.view = e.viewName;
+      this.ddlValue = this.views.find((el) => el.name === e.viewName);
+    },
+    handleDropDownListChange(event) {
+      this.view = event.value.name;
+      this.ddlValue = event.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/views/day/configuration/events-utc.js b/vue-options-api-demos/scheduler/views/day/configuration/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/day/configuration/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/views/day/configuration/main.js b/vue-options-api-demos/scheduler/views/day/configuration/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/day/configuration/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/views/day/configuration/main.vue b/vue-options-api-demos/scheduler/views/day/configuration/main.vue
new file mode 100644
index 00000000..2ecad635
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/day/configuration/main.vue
@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <Scheduler
+      :data-items="sampleData"
+      :default-date="displayDate"
+      :view="view"
+      :views="views"
+    ></Scheduler>
+  </div>
+</template>
+<script>
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+import { sampleData, displayDate } from './events-utc';
+
+export default {
+  components: {
+    Scheduler,
+  },
+
+  data() {
+    return {
+      sampleData,
+      displayDate,
+      view: 'day',
+      views: [
+        {
+          name: 'day',
+          title: 'Two-Day-View',
+          numberOfDays: 2,
+          slotDuration: 60,
+          slotDivisions: 2,
+          startTime: '07:00',
+          endTime: '19:00',
+          workDayStart: '08:00',
+          workDayEnd: '18:00',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/views/day/current-time/main.js b/vue-options-api-demos/scheduler/views/day/current-time/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/day/current-time/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/views/day/current-time/main.vue b/vue-options-api-demos/scheduler/views/day/current-time/main.vue
new file mode 100644
index 00000000..fd50dd1b
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/day/current-time/main.vue
@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <Scheduler
+      :data-items="[]"
+      :default-date="new Date()"
+      :view="view"
+      :views="views"
+      :group="group"
+      :resources="resources"
+    ></Scheduler>
+  </div>
+</template>
+<script>
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+
+export default {
+  components: {
+    Scheduler,
+  },
+
+  data() {
+    return {
+      view: 'day',
+      views: [
+        {
+          name: 'day',
+          title: 'Day',
+          showWorkHours: false,
+        },
+        {
+          name: 'workweek',
+          title: 'Workweek',
+          showWorkHours: false,
+          currentTimeMarker: false,
+        },
+      ],
+      group: {
+        resources: ['Rooms', 'Persons'],
+        orientation: 'horizontal',
+      },
+      resources: [
+        {
+          name: 'Rooms',
+          data: [
+            { text: 'Meeting Room 101', value: 1 },
+            { text: 'Meeting Room 201', value: 2, color: 'green' },
+          ],
+          field: 'roomId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+        {
+          name: 'Persons',
+          data: [
+            { text: 'Peter', value: 1, color: 'red' },
+            { text: 'Alex', value: 2 },
+          ],
+          field: 'personId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/views/day/grouping-vertical/events-utc.js b/vue-options-api-demos/scheduler/views/day/grouping-vertical/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/day/grouping-vertical/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/views/day/grouping-vertical/main.js b/vue-options-api-demos/scheduler/views/day/grouping-vertical/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/day/grouping-vertical/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/views/day/grouping-vertical/main.vue b/vue-options-api-demos/scheduler/views/day/grouping-vertical/main.vue
new file mode 100644
index 00000000..d6094c35
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/day/grouping-vertical/main.vue
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <Scheduler
+      :data-items="sampleDataWithResources"
+      :default-date="displayDate"
+      :view="view"
+      :views="views"
+      :group="group"
+      :resources="resources"
+    ></Scheduler>
+  </div>
+</template>
+<script>
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+import { sampleDataWithResources, displayDate } from './events-utc';
+
+export default {
+  components: {
+    Scheduler,
+  },
+
+  data() {
+    return {
+      sampleDataWithResources,
+      displayDate,
+      view: 'day',
+      views: [
+        {
+          name: 'day',
+          title: 'Two-Day-View',
+          numberOfDays: 2,
+          slotDuration: 60,
+          slotDivisions: 2,
+          startTime: '07:00',
+          endTime: '19:00',
+          workDayStart: '08:00',
+          workDayEnd: '18:00',
+        },
+      ],
+      group: {
+        resources: ['Rooms', 'Persons'],
+        orientation: 'vertical',
+      },
+      resources: [
+        {
+          name: 'Rooms',
+          data: [
+            { text: 'Meeting Room 101', value: 1 },
+            { text: 'Meeting Room 201', value: 2, color: 'green' },
+          ],
+          field: 'roomId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+        {
+          name: 'Persons',
+          data: [
+            { text: 'Peter', value: 1, color: 'red' },
+            { text: 'Alex', value: 2 },
+          ],
+          field: 'personId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/views/day/grouping/events-utc.js b/vue-options-api-demos/scheduler/views/day/grouping/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/day/grouping/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/views/day/grouping/main.js b/vue-options-api-demos/scheduler/views/day/grouping/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/day/grouping/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/views/day/grouping/main.vue b/vue-options-api-demos/scheduler/views/day/grouping/main.vue
new file mode 100644
index 00000000..678b94ef
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/day/grouping/main.vue
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <Scheduler
+      :data-items="sampleDataWithResources"
+      :default-date="displayDate"
+      :view="view"
+      :views="views"
+      :group="group"
+      :resources="resources"
+    ></Scheduler>
+  </div>
+</template>
+<script>
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+import { sampleDataWithResources, displayDate } from './events-utc';
+
+export default {
+  components: {
+    Scheduler,
+  },
+
+  data() {
+    return {
+      sampleDataWithResources,
+      displayDate,
+      view: 'day',
+      views: [
+        {
+          name: 'day',
+          title: 'Two-Day-View',
+          numberOfDays: 2,
+          slotDuration: 60,
+          slotDivisions: 2,
+          startTime: '07:00',
+          endTime: '19:00',
+          workDayStart: '08:00',
+          workDayEnd: '18:00',
+        },
+      ],
+      group: {
+        resources: ['Rooms', 'Persons'],
+        orientation: 'horizontal',
+      },
+      resources: [
+        {
+          name: 'Rooms',
+          data: [
+            { text: 'Meeting Room 101', value: 1 },
+            { text: 'Meeting Room 201', value: 2, color: 'green' },
+          ],
+          field: 'roomId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+        {
+          name: 'Persons',
+          data: [
+            { text: 'Peter', value: 1, color: 'red' },
+            { text: 'Alex', value: 2 },
+          ],
+          field: 'personId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/views/default-view/events-utc.js b/vue-options-api-demos/scheduler/views/default-view/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/default-view/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/views/default-view/main.js b/vue-options-api-demos/scheduler/views/default-view/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/default-view/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/views/default-view/main.vue b/vue-options-api-demos/scheduler/views/default-view/main.vue
new file mode 100644
index 00000000..71462177
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/default-view/main.vue
@@ -0,0 +1,30 @@
+<template>
+  <Scheduler
+    :default-view="'month'"
+    :data-items="sampleData"
+    :default-date="displayDate"
+    :views="views"
+  >
+  </Scheduler>
+</template>
+<script>
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+import { sampleData, displayDate } from './events-utc';
+
+export default {
+  components: {
+    Scheduler,
+  },
+  data() {
+    return {
+      views: [
+        { name: 'day', title: 'Day' },
+        { name: 'week', title: 'Week' },
+        { name: 'month', title: 'Month' },
+      ],
+      sampleData,
+      displayDate,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/views/getting-started/events-utc.js b/vue-options-api-demos/scheduler/views/getting-started/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/getting-started/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/views/getting-started/main.js b/vue-options-api-demos/scheduler/views/getting-started/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/getting-started/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/views/getting-started/main.vue b/vue-options-api-demos/scheduler/views/getting-started/main.vue
new file mode 100644
index 00000000..4c86320b
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/getting-started/main.vue
@@ -0,0 +1,30 @@
+<template>
+  <Scheduler
+    :data-items="sampleData"
+    :default-date="displayDate"
+    :views="views"
+  >
+  </Scheduler>
+</template>
+<script>
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+import { sampleData, displayDate } from './events-utc';
+import { Day } from '@progress/kendo-date-math';
+
+export default {
+  components: {
+    Scheduler,
+  },
+  data() {
+    return {
+      views: [
+        { name: 'day', title: 'Day', startTime: '07:00' },
+        { name: 'week', title: 'Week', workWeekStart: Day.Monday },
+        { name: 'month', title: 'Month' },
+      ],
+      sampleData,
+      displayDate,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/views/month/configuration/events-utc.js b/vue-options-api-demos/scheduler/views/month/configuration/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/month/configuration/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/views/month/configuration/main.js b/vue-options-api-demos/scheduler/views/month/configuration/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/month/configuration/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/views/month/configuration/main.vue b/vue-options-api-demos/scheduler/views/month/configuration/main.vue
new file mode 100644
index 00000000..c57b53a1
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/month/configuration/main.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <Scheduler
+      :data-items="sampleData"
+      :default-date="displayDate"
+      :view="view"
+      :views="views"
+    ></Scheduler>
+  </div>
+</template>
+<script>
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+import { sampleData, displayDate } from './events-utc';
+
+export default {
+  components: {
+    Scheduler,
+  },
+
+  data() {
+    return {
+      sampleData,
+      displayDate,
+      view: 'month',
+      views: [
+        {
+          name: 'month',
+          title: 'Month',
+          selectedDateFormat: '{0:M}',
+          selectedShortDateFormat: '{0:M}',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/views/month/grouping-vertical/events-utc.js b/vue-options-api-demos/scheduler/views/month/grouping-vertical/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/month/grouping-vertical/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/views/month/grouping-vertical/main.js b/vue-options-api-demos/scheduler/views/month/grouping-vertical/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/month/grouping-vertical/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/views/month/grouping-vertical/main.vue b/vue-options-api-demos/scheduler/views/month/grouping-vertical/main.vue
new file mode 100644
index 00000000..c79c3781
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/month/grouping-vertical/main.vue
@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <Scheduler
+      :data-items="sampleDataWithResources"
+      :default-date="displayDate"
+      :view="view"
+      :views="views"
+      :group="group"
+      :resources="resources"
+    ></Scheduler>
+  </div>
+</template>
+<script>
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+import { sampleDataWithResources, displayDate } from './events-utc';
+
+export default {
+  components: {
+    Scheduler,
+  },
+
+  data() {
+    return {
+      sampleDataWithResources,
+      displayDate,
+      view: 'month',
+      views: [
+        {
+          name: 'month',
+          title: 'Month',
+          selectedDateFormat: '{0:M}',
+          selectedShortDateFormat: '{0:M}',
+        },
+      ],
+      group: {
+        resources: ['Rooms', 'Persons'],
+        orientation: 'vertical',
+      },
+      resources: [
+        {
+          name: 'Rooms',
+          data: [
+            { text: 'Meeting Room 101', value: 1 },
+            { text: 'Meeting Room 201', value: 2, color: 'green' },
+          ],
+          field: 'roomId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+        {
+          name: 'Persons',
+          data: [
+            { text: 'Peter', value: 1, color: 'red' },
+            { text: 'Alex', value: 2 },
+          ],
+          field: 'personId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/views/month/grouping/events-utc.js b/vue-options-api-demos/scheduler/views/month/grouping/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/month/grouping/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/views/month/grouping/main.js b/vue-options-api-demos/scheduler/views/month/grouping/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/month/grouping/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/views/month/grouping/main.vue b/vue-options-api-demos/scheduler/views/month/grouping/main.vue
new file mode 100644
index 00000000..4a933c5f
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/month/grouping/main.vue
@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <Scheduler
+      :data-items="sampleDataWithResources"
+      :default-date="displayDate"
+      :view="view"
+      :views="views"
+      :group="group"
+      :resources="resources"
+    ></Scheduler>
+  </div>
+</template>
+<script>
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+import { sampleDataWithResources, displayDate } from './events-utc';
+
+export default {
+  components: {
+    Scheduler,
+  },
+
+  data() {
+    return {
+      sampleDataWithResources,
+      displayDate,
+      view: 'month',
+      views: [
+        {
+          name: 'month',
+          title: 'Month',
+          selectedDateFormat: '{0:M}',
+          selectedShortDateFormat: '{0:M}',
+        },
+      ],
+      group: {
+        resources: ['Rooms', 'Persons'],
+        orientation: 'horizontal',
+      },
+      resources: [
+        {
+          name: 'Rooms',
+          data: [
+            { text: 'Meeting Room 101', value: 1 },
+            { text: 'Meeting Room 201', value: 2, color: 'green' },
+          ],
+          field: 'roomId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+        {
+          name: 'Persons',
+          data: [
+            { text: 'Peter', value: 1, color: 'red' },
+            { text: 'Alex', value: 2 },
+          ],
+          field: 'personId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/views/timeline/configuration/events-utc.js b/vue-options-api-demos/scheduler/views/timeline/configuration/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/timeline/configuration/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/views/timeline/configuration/main.js b/vue-options-api-demos/scheduler/views/timeline/configuration/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/timeline/configuration/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/views/timeline/configuration/main.vue b/vue-options-api-demos/scheduler/views/timeline/configuration/main.vue
new file mode 100644
index 00000000..3615debb
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/timeline/configuration/main.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <Scheduler
+      :data-items="sampleData"
+      :default-date="displayDate"
+      :view="view"
+      :views="views"
+    ></Scheduler>
+  </div>
+</template>
+<script>
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+import { sampleData, displayDate } from './events-utc';
+import { Day } from '@progress/kendo-date-math';
+
+export default {
+  components: {
+    Scheduler,
+  },
+
+  data() {
+    return {
+      sampleData,
+      displayDate,
+      view: 'timeline',
+      views: [
+        {
+          name: 'timeline',
+          title: 'Hour-By-Hour',
+          numberOfDays: 2,
+          columnWidth: 100,
+          slotDuration: 60,
+          slotDivisions: 1,
+          startTime: '08:00',
+          endTime: '18:00',
+          workDayStart: '09:00',
+          workDayEnd: '17:00',
+          workWeekStart: Day.Sunday,
+          workWeekEnd: Day.Monday,
+          showWorkHours: false,
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/views/timeline/current-time/main.js b/vue-options-api-demos/scheduler/views/timeline/current-time/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/timeline/current-time/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/views/timeline/current-time/main.vue b/vue-options-api-demos/scheduler/views/timeline/current-time/main.vue
new file mode 100644
index 00000000..3fbcbc92
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/timeline/current-time/main.vue
@@ -0,0 +1,9 @@
+<template>
+            <div>Scheudler demo</div>
+</template>
+<script>
+export default {
+
+
+}
+</script>
diff --git a/vue-options-api-demos/scheduler/views/timeline/grouping-vertical/events-utc.js b/vue-options-api-demos/scheduler/views/timeline/grouping-vertical/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/timeline/grouping-vertical/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/views/timeline/grouping-vertical/main.js b/vue-options-api-demos/scheduler/views/timeline/grouping-vertical/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/timeline/grouping-vertical/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/views/timeline/grouping-vertical/main.vue b/vue-options-api-demos/scheduler/views/timeline/grouping-vertical/main.vue
new file mode 100644
index 00000000..8d86a55d
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/timeline/grouping-vertical/main.vue
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <Scheduler
+      :data-items="sampleDataWithResources"
+      :default-date="displayDate"
+      :view="view"
+      :views="views"
+      :group="group"
+      :resources="resources"
+    ></Scheduler>
+  </div>
+</template>
+<script>
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+import { sampleDataWithResources, displayDate } from './events-utc';
+import { Day } from '@progress/kendo-date-math';
+
+export default {
+  components: {
+    Scheduler,
+  },
+
+  data() {
+    return {
+      sampleDataWithResources,
+      displayDate,
+      view: 'timeline',
+      views: [
+        {
+          name: 'timeline',
+          title: 'Hour-By-Hour',
+          columnWidth: 100,
+          slotDuration: 120,
+          slotDivisions: 1,
+          numberOfDays: 2,
+          workDayStart: '08:00',
+          workDayEnd: '18:00',
+        },
+      ],
+      group: {
+        resources: ['Rooms', 'Persons'],
+        orientation: 'vertical',
+      },
+      resources: [
+        {
+          name: 'Rooms',
+          data: [
+            { text: 'Meeting Room 101', value: 1 },
+            { text: 'Meeting Room 201', value: 2, color: 'green' },
+          ],
+          field: 'roomId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+        {
+          name: 'Persons',
+          data: [
+            { text: 'Peter', value: 1, color: 'red' },
+            { text: 'Alex', value: 2 },
+          ],
+          field: 'personId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/views/timeline/grouping/events-utc.js b/vue-options-api-demos/scheduler/views/timeline/grouping/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/timeline/grouping/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/views/timeline/grouping/main.js b/vue-options-api-demos/scheduler/views/timeline/grouping/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/timeline/grouping/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/views/timeline/grouping/main.vue b/vue-options-api-demos/scheduler/views/timeline/grouping/main.vue
new file mode 100644
index 00000000..dcb3756a
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/timeline/grouping/main.vue
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <Scheduler
+      :data-items="sampleDataWithResources"
+      :default-date="displayDate"
+      :view="view"
+      :views="views"
+      :group="group"
+      :resources="resources"
+    ></Scheduler>
+  </div>
+</template>
+<script>
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+import { sampleDataWithResources, displayDate } from './events-utc';
+import { Day } from '@progress/kendo-date-math';
+
+export default {
+  components: {
+    Scheduler,
+  },
+
+  data() {
+    return {
+      sampleDataWithResources,
+      displayDate,
+      view: 'timeline',
+      views: [
+        {
+          name: 'timeline',
+          title: 'Hour-By-Hour',
+          columnWidth: 100,
+          slotDuration: 120,
+          slotDivisions: 1,
+          numberOfDays: 2,
+          workDayStart: '08:00',
+          workDayEnd: '18:00',
+        },
+      ],
+      group: {
+        resources: ['Rooms', 'Persons'],
+        orientation: 'horizontal',
+      },
+      resources: [
+        {
+          name: 'Rooms',
+          data: [
+            { text: 'Meeting Room 101', value: 1 },
+            { text: 'Meeting Room 201', value: 2, color: 'green' },
+          ],
+          field: 'roomId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+        {
+          name: 'Persons',
+          data: [
+            { text: 'Peter', value: 1, color: 'red' },
+            { text: 'Alex', value: 2 },
+          ],
+          field: 'personId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/views/week/configuration/events-utc.js b/vue-options-api-demos/scheduler/views/week/configuration/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/week/configuration/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/views/week/configuration/main.js b/vue-options-api-demos/scheduler/views/week/configuration/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/week/configuration/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/views/week/configuration/main.vue b/vue-options-api-demos/scheduler/views/week/configuration/main.vue
new file mode 100644
index 00000000..7eaadff3
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/week/configuration/main.vue
@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <Scheduler
+      :data-items="sampleData"
+      :default-date="displayDate"
+      :view="view"
+      :views="views"
+    ></Scheduler>
+  </div>
+</template>
+<script>
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+import { sampleData, displayDate } from './events-utc';
+import { Day } from '@progress/kendo-date-math';
+
+export default {
+  components: {
+    Scheduler,
+  },
+
+  data() {
+    return {
+      sampleData,
+      displayDate,
+      view: 'workweek',
+      views: [
+        {
+          name: 'workweek',
+          title: 'Work Week',
+          workWeekStart: Day.Monday,
+          workWeekEnd: Day.Thursday,
+        },
+        {
+          name: 'week',
+          title: 'Full Week',
+          workWeekStart: Day.Monday,
+          workWeekEnd: Day.Thursday,
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/views/week/grouping-vertical/events-utc.js b/vue-options-api-demos/scheduler/views/week/grouping-vertical/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/week/grouping-vertical/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/views/week/grouping-vertical/main.js b/vue-options-api-demos/scheduler/views/week/grouping-vertical/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/week/grouping-vertical/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/views/week/grouping-vertical/main.vue b/vue-options-api-demos/scheduler/views/week/grouping-vertical/main.vue
new file mode 100644
index 00000000..93bf2ca1
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/week/grouping-vertical/main.vue
@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <Scheduler
+      :data-items="sampleDataWithResources"
+      :default-date="displayDate"
+      :view="view"
+      :views="views"
+      :group="group"
+      :resources="resources"
+    ></Scheduler>
+  </div>
+</template>
+<script>
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+import { sampleDataWithResources, displayDate } from './events-utc';
+import { Day } from '@progress/kendo-date-math';
+
+export default {
+  components: {
+    Scheduler,
+  },
+  data() {
+    return {
+      sampleDataWithResources,
+      displayDate,
+      view: 'workweek',
+      views: [
+        {
+          name: 'workweek',
+          title: 'Work Week',
+          workWeekStart: Day.Monday,
+          workWeekEnd: Day.Thursday,
+        },
+        {
+          name: 'week',
+          title: 'Full Week',
+          workWeekStart: Day.Monday,
+          workWeekEnd: Day.Thursday,
+        },
+      ],
+      group: {
+        resources: ['Rooms', 'Persons'],
+        orientation: 'vertical',
+      },
+      resources: [
+        {
+          name: 'Rooms',
+          data: [
+            { text: 'Meeting Room 101', value: 1 },
+            { text: 'Meeting Room 201', value: 2, color: 'green' },
+          ],
+          field: 'roomId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+        {
+          name: 'Persons',
+          data: [
+            { text: 'Peter', value: 1, color: 'red' },
+            { text: 'Alex', value: 2 },
+          ],
+          field: 'personId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scheduler/views/week/grouping/events-utc.js b/vue-options-api-demos/scheduler/views/week/grouping/events-utc.js
new file mode 100644
index 00000000..f2cdf116
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/week/grouping/events-utc.js
@@ -0,0 +1,847 @@
+const baseData = [
+    {
+        "TaskID": 4,
+        "OwnerID": 2,
+        "Title": "Bowling tournament",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-09T21:00:00.000Z",
+        "End": "2013-06-10T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 5,
+        "OwnerID": 2,
+        "Title": "Take the dog to the vet",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-10T07:00:00.000Z",
+        "End": "2013-06-10T08:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 6,
+        "OwnerID": 2,
+        "Title": "Call Charlie about the project",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-11T11:30:00.000Z",
+        "End": "2013-06-11T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 7,
+        "OwnerID": 3,
+        "Title": "Meeting with Alex",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-12T11:00:00.000Z",
+        "End": "2013-06-12T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 9,
+        "OwnerID": 2,
+        "Title": "Alex's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-14T02:00:00.000Z",
+        "End": "2013-06-14T02:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 12,
+        "OwnerID": 2,
+        "Title": "Car Service",
+        "RoomID": 1,
+        "Description": "Might come to work later!",
+        "StartTimezone": null,
+        "Start": "2013-06-24T08:30:00.000Z",
+        "End": "2013-06-24T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 14,
+        "OwnerID": 3,
+        "RoomID": 2,
+        "PersonID": 3,
+        "Title": "Replace the printer on the 1st floor",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 15,
+        "OwnerID": 1,
+        "Title": "Attending HR Conference",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T00:00:00.000Z",
+        "End": "2013-06-26T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 16,
+        "OwnerID": 1,
+        "Title": "Business Lunch with Gregory Watkins",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T12:00:00.000Z",
+        "End": "2013-06-25T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 17,
+        "OwnerID": 1,
+        "Title": "Breakfast with CFO and COO",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T08:30:00.000Z",
+        "End": "2013-06-27T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 18,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mathew Stevens",
+        "Description": "Junior Researcher",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:00:00.000Z",
+        "End": "2013-06-27T11:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 19,
+        "OwnerID": 1,
+        "Title": "Review CVs with Tim",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T11:00:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 20,
+        "OwnerID": 1,
+        "Title": "Lunch with Monica",
+        "Description": "Discuss the Employee handbook",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 21,
+        "OwnerID": 1,
+        "Title": "Job Interview - John Stewart",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 22,
+        "OwnerID": 1,
+        "Title": "Job Interview - Mary Smith",
+        "Description": "Accountant",
+        "StartTimezone": null,
+        "Start": "2013-06-27T15:30:00.000Z",
+        "End": "2013-06-27T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 24,
+        "OwnerID": 3,
+        "Title": "Register new Access Cards",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T12:00:00.000Z",
+        "End": "2013-06-24T12:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 25,
+        "OwnerID": 1,
+        "Title": "HR Lecture",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T19:00:00.000Z",
+        "End": "2013-06-04T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 26,
+        "OwnerID": 1,
+        "Title": "Dentist",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T08:00:00.000Z",
+        "End": "2013-06-28T09:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 27,
+        "OwnerID": 1,
+        "Title": "Job Interview - Laura Bailey",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T09:30:00.000Z",
+        "End": "2013-06-28T10:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 28,
+        "OwnerID": 1,
+        "Title": "Job Interview - Jenny Baxter",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-28T11:00:00.000Z",
+        "End": "2013-06-28T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 31,
+        "OwnerID": 1,
+        "Title": "Team building prep tasks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T14:00:00.000Z",
+        "End": "2013-06-28T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 32,
+        "OwnerID": 2,
+        "RoomID": 2,
+        "Title": "Job Interview - Bernard Atkins",
+        "Description": "Helpdesk",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 34,
+        "OwnerID": 1,
+        "Title": "Review Job Applications",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T15:00:00.000Z",
+        "End": "2013-06-24T17:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 35,
+        "OwnerID": 1,
+        "Title": "Grand Canyon tour",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-23T00:00:00.000Z",
+        "End": "2013-06-23T00:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 40,
+        "OwnerID": 3,
+        "Title": "Install new laptops in conference rooms",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T13:30:00.000Z",
+        "End": "2013-06-24T15:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 66,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T08:00:00.000Z",
+        "End": "2013-06-29T06:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 68,
+        "OwnerID": 1,
+        "RoomID": 2,
+        "Title": "Breakfast with Tom",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T09:45:00.000Z",
+        "End": "2013-06-24T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 69,
+        "OwnerID": 2,
+        "Title": "Team planning meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T10:00:00.000Z",
+        "End": "2013-06-24T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 70,
+        "OwnerID": 2,
+        "Title": "Support Phone Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-24T16:00:00.000Z",
+        "End": "2013-06-24T16:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 71,
+        "OwnerID": 2,
+        "Title": "Business breakfast with Caroline",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T09:00:00.000Z",
+        "End": "2013-06-25T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 72,
+        "OwnerID": 2,
+        "Title": "Discuss preojects' deadlines",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T11:00:00.000Z",
+        "End": "2013-06-25T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 73,
+        "OwnerID": 2,
+        "Title": "Support Meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T15:00:00.000Z",
+        "End": "2013-06-25T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 74,
+        "OwnerID": 2,
+        "Title": "Dine with Mathew",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T18:30:00.000Z",
+        "End": "2013-06-25T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 79,
+        "OwnerID": 2,
+        "Title": "Banking",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T09:00:00.000Z",
+        "End": "2013-06-26T10:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 80,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T10:00:00.000Z",
+        "End": "2013-06-25T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 81,
+        "OwnerID": 3,
+        "Title": "UPS maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-25T16:30:00.000Z",
+        "End": "2013-06-25T18:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 82,
+        "OwnerID": 2,
+        "Title": "Support Call",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T11:30:00.000Z",
+        "End": "2013-06-26T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 83,
+        "OwnerID": 3,
+        "Title": "Phone Sync with NY office ",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T13:30:00.000Z",
+        "End": "2013-06-26T14:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 84,
+        "OwnerID": 3,
+        "Title": "Phone Sync with Boston Office",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T15:00:00.000Z",
+        "End": "2013-06-26T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 85,
+        "OwnerID": 3,
+        "Title": "Server maintenance",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-26T18:30:00.000Z",
+        "End": "2013-06-26T21:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": true
+    },
+    {
+        "TaskID": 86,
+        "OwnerID": 2,
+        "Title": "Status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T13:30:00.000Z",
+        "End": "2013-06-28T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 87,
+        "OwnerID": 3,
+        "Title": "Helpdesk status meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T10:30:00.000Z",
+        "End": "2013-06-27T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 88,
+        "OwnerID": 2,
+        "Title": "Business Lunch",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T12:00:00.000Z",
+        "End": "2013-06-27T13:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 89,
+        "OwnerID": 3,
+        "Title": "Employee database update",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T14:00:00.000Z",
+        "End": "2013-06-27T15:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 90,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T07:30:00.000Z",
+        "End": "2013-06-27T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 91,
+        "OwnerID": 2,
+        "Title": "Meeting with marketing guys",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-27T17:00:00.000Z",
+        "End": "2013-06-27T18:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 92,
+        "OwnerID": 3,
+        "Title": "Meeting with Internet provider",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-28T10:30:00.000Z",
+        "End": "2013-06-28T11:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 93,
+        "OwnerID": 3,
+        "Title": "Bob's Birthday Party",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-29T20:00:00.000Z",
+        "End": "2013-06-29T23:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": null,
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 95,
+        "OwnerID": 2,
+        "Title": "Dance Practice",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-03T18:30:00.000Z",
+        "End": "2013-06-03T20:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 114,
+        "OwnerID": 3,
+        "Title": "Software updates",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T09:00:00.000Z",
+        "End": "2013-06-04T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 115,
+        "OwnerID": 1,
+        "Title": "Breakfast at Starbucks",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T08:00:00.000Z",
+        "End": "2013-06-04T09:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 116,
+        "OwnerID": 2,
+        "Title": "Performance review",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-04T14:00:00.000Z",
+        "End": "2013-06-04T17:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 118,
+        "OwnerID": 1,
+        "Title": "HR seminar preparation",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T10:00:00.000Z",
+        "End": "2013-06-05T12:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 119,
+        "OwnerID": 3,
+        "Title": "Helpdesk weekly meeting",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-05T15:00:00.000Z",
+        "End": "2013-06-05T16:00:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    },
+    {
+        "TaskID": 120,
+        "OwnerID": 3,
+        "Title": "Website upload",
+        "Description": "",
+        "StartTimezone": null,
+        "Start": "2013-06-07T07:00:00.000Z",
+        "End": "2013-06-07T08:30:00.000Z",
+        "EndTimezone": null,
+        "RecurrenceRule": "",
+        "RecurrenceID": null,
+        "RecurrenceException": null,
+        "isAllDay": false
+    }
+];
+
+export const customModelFields = {
+    id: 'TaskID',
+    title: 'Title',
+    description: 'Description',
+    start: 'Start',
+    end: 'End',
+    recurrenceRule: 'RecurrenceRule',
+    recurrenceId: 'RecurrenceID',
+    recurrenceExceptions: 'RecurrenceException'
+};
+
+const currentYear = new Date().getFullYear();
+const parseAdjust = (eventDate) => {
+    const date = new Date(eventDate);
+    date.setFullYear(currentYear);
+    return date;
+};
+
+const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
+
+export const sampleData = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+
+        roomId: dataItem.RoomID,
+        ownerID: dataItem.OwnerID,
+        personId: dataItem.OwnerID
+    }
+));
+
+export const sampleDataWithResources = baseData.map(dataItem => (
+    {
+        id: dataItem.TaskID,
+        start: parseAdjust(dataItem.Start),
+        startTimezone: dataItem.startTimezone,
+        end: parseAdjust(dataItem.End),
+        endTimezone: dataItem.endTimezone,
+        isAllDay: dataItem.isAllDay,
+        title: dataItem.Title,
+        description: dataItem.Description,
+        recurrenceRule: dataItem.RecurrenceRule,
+        recurrenceId: dataItem.RecurrenceID,
+        recurrenceExceptions: dataItem.RecurrenceException,
+        roomId: randomInt(1, 2),
+        personId: randomInt(1, 2)
+    }
+));
+
+export const sampleDataWithCustomSchema = baseData.map(dataItem => (
+    {
+        ...dataItem,
+        Start: parseAdjust(dataItem.Start),
+        End: parseAdjust(dataItem.End),
+        PersonIDs: randomInt(1, 2),
+        RoomID: randomInt(1, 2)
+    }
+));
\ No newline at end of file
diff --git a/vue-options-api-demos/scheduler/views/week/grouping/main.js b/vue-options-api-demos/scheduler/views/week/grouping/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/week/grouping/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scheduler/views/week/grouping/main.vue b/vue-options-api-demos/scheduler/views/week/grouping/main.vue
new file mode 100644
index 00000000..76a05dd9
--- /dev/null
+++ b/vue-options-api-demos/scheduler/views/week/grouping/main.vue
@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <Scheduler
+      :data-items="sampleDataWithResources"
+      :default-date="displayDate"
+      :view="view"
+      :views="views"
+      :group="group"
+      :resources="resources"
+    ></Scheduler>
+  </div>
+</template>
+<script>
+import { Scheduler } from '@progress/kendo-vue-scheduler';
+import { sampleDataWithResources, displayDate } from './events-utc';
+import { Day } from '@progress/kendo-date-math';
+
+export default {
+  components: {
+    Scheduler,
+  },
+  data() {
+    return {
+      sampleDataWithResources,
+      displayDate,
+      view: 'workweek',
+      views: [
+        {
+          name: 'workweek',
+          title: 'Work Week',
+          workWeekStart: Day.Monday,
+          workWeekEnd: Day.Thursday,
+        },
+        {
+          name: 'week',
+          title: 'Full Week',
+          workWeekStart: Day.Monday,
+          workWeekEnd: Day.Thursday,
+        },
+      ],
+      group: {
+        resources: ['Rooms', 'Persons'],
+        orientation: 'horizontal',
+      },
+      resources: [
+        {
+          name: 'Rooms',
+          data: [
+            { text: 'Meeting Room 101', value: 1 },
+            { text: 'Meeting Room 201', value: 2, color: 'green' },
+          ],
+          field: 'roomId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+        {
+          name: 'Persons',
+          data: [
+            { text: 'Peter', value: 1, color: 'red' },
+            { text: 'Alex', value: 2 },
+          ],
+          field: 'personId',
+          valueField: 'value',
+          textField: 'text',
+          colorField: 'color',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scrollview/active-view/main.js b/vue-options-api-demos/scrollview/active-view/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scrollview/active-view/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scrollview/active-view/main.vue b/vue-options-api-demos/scrollview/active-view/main.vue
new file mode 100644
index 00000000..5e880f32
--- /dev/null
+++ b/vue-options-api-demos/scrollview/active-view/main.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <ScrollView
+      :style="{
+        width: '512px',
+        height: '384px',
+      }"
+      :data-items="items"
+      :content="'content'"
+      :active-view="3"
+    >
+      <template v-slot:content="{ props }">
+        <div class="image-with-text">
+          <h2 class="demo-title">{{ props.item.title }}</h2>
+          <img
+            :src="props.item.url"
+            :alt="`Photo ${props.item.position}`"
+            :style="{
+              width: '512px',
+              height: '384px',
+            }"
+            :draggable="false"
+          />
+        </div>
+      </template>
+    </ScrollView>
+  </div>
+</template>
+
+<script>
+import { ScrollView } from '@progress/kendo-vue-scrollview';
+import './styles.css';
+
+const balloonsImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/1.jpg';
+const bambooImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/2.jpg';
+const dandelionImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/3.jpg';
+const waveImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/4.jpg';
+const grassImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/5.jpg';
+
+export default {
+  components: {
+    ScrollView,
+  },
+  data() {
+    return {
+      items: [
+        {
+          title: 'Balloons',
+          position: 1,
+          url: balloonsImage,
+        },
+        {
+          title: 'Forest',
+          position: 2,
+          url: bambooImage,
+        },
+        {
+          title: 'Flower',
+          position: 3,
+          url: dandelionImage,
+        },
+        {
+          title: 'Painting',
+          position: 4,
+          url: waveImage,
+        },
+        {
+          title: 'Grass',
+          position: 5,
+          url: grassImage,
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scrollview/active-view/styles.css b/vue-options-api-demos/scrollview/active-view/styles.css
new file mode 100644
index 00000000..9eec10fa
--- /dev/null
+++ b/vue-options-api-demos/scrollview/active-view/styles.css
@@ -0,0 +1,18 @@
+.k-scrollview {
+    margin: 0 auto;
+}
+.image-with-text {
+    position: relative;
+}
+.demo-title {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    margin: 0;
+    padding: 15px;
+    color: #fff;
+    background-color: rgba(0, 0, 0, 0.4);
+    text-align: center;
+    font-size: 24px;
+}
diff --git a/vue-options-api-demos/scrollview/arrows/main.js b/vue-options-api-demos/scrollview/arrows/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scrollview/arrows/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scrollview/arrows/main.vue b/vue-options-api-demos/scrollview/arrows/main.vue
new file mode 100644
index 00000000..9e44cd9d
--- /dev/null
+++ b/vue-options-api-demos/scrollview/arrows/main.vue
@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <div class="example-config">
+      <radiogroup :data-items="dataItems" :value="enabled" @change="onChange" />
+    </div>
+    <ScrollView :style="{
+      width: '512px',
+      height: '384px',
+    }" :data-items="items" :content="'content'" :arrows="enabled">
+      <template v-slot:content="{ props }">
+        <div class="image-with-text">
+          <h2 class="demo-title">{{ props.item.title }}</h2>
+          <img :src="props.item.url" :alt="`Photo ${props.item.position}`" :style="{
+            width: '512px',
+            height: '384px',
+          }" :draggable="false" />
+        </div>
+      </template>
+    </ScrollView>
+  </div>
+</template>
+
+<script>
+import { ScrollView } from '@progress/kendo-vue-scrollview';
+import { RadioGroup } from '@progress/kendo-vue-inputs';
+import './styles.css';
+
+export default {
+  components: {
+    ScrollView,
+    radiogroup: RadioGroup,
+  },
+  data() {
+    return {
+      balloonsImage: (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/1.jpg',
+      bambooImage: (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/2.jpg',
+      dandelionImage: (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/3.jpg',
+      waveImage: (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/4.jpg',
+      grassImage: (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/5.jpg',
+      enabled: true,
+      dataItems: [
+        {
+          label: 'Enable arrows',
+          value: true,
+        },
+        {
+          label: 'Disable arrows',
+          value: false,
+        },
+      ],
+    };
+  },
+  computed: {
+    items() {
+      return [
+        {
+          title: 'Balloons',
+          position: 1,
+          url: this.balloonsImage,
+        },
+        {
+          title: 'Forest',
+          position: 2,
+          url: this.bambooImage,
+        },
+        {
+          title: 'Flower',
+          position: 3,
+          url: this.dandelionImage,
+        },
+        {
+          title: 'Painting',
+          position: 4,
+          url: this.waveImage,
+        },
+        {
+          title: 'Grass',
+          position: 5,
+          url: this.grassImage,
+        },
+      ];
+    }
+  },
+  methods: {
+    onChange(e) {
+      this.enabled = e.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scrollview/arrows/styles.css b/vue-options-api-demos/scrollview/arrows/styles.css
new file mode 100644
index 00000000..9eec10fa
--- /dev/null
+++ b/vue-options-api-demos/scrollview/arrows/styles.css
@@ -0,0 +1,18 @@
+.k-scrollview {
+    margin: 0 auto;
+}
+.image-with-text {
+    position: relative;
+}
+.demo-title {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    margin: 0;
+    padding: 15px;
+    color: #fff;
+    background-color: rgba(0, 0, 0, 0.4);
+    text-align: center;
+    font-size: 24px;
+}
diff --git a/vue-options-api-demos/scrollview/automatic-interval/main.js b/vue-options-api-demos/scrollview/automatic-interval/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scrollview/automatic-interval/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scrollview/automatic-interval/main.vue b/vue-options-api-demos/scrollview/automatic-interval/main.vue
new file mode 100644
index 00000000..ef9d82cc
--- /dev/null
+++ b/vue-options-api-demos/scrollview/automatic-interval/main.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <ScrollView
+      :style="{
+        width: '512px',
+        height: '384px',
+      }"
+      :data-items="items"
+      :content="'content'"
+      :automatic-view-change-interval="1000"
+    >
+      <template v-slot:content="{ props }">
+        <div class="image-with-text">
+          <h2 class="demo-title">{{ props.item.title }}</h2>
+          <img
+            :src="props.item.url"
+            :alt="`Photo ${props.item.position}`"
+            :style="{
+              width: '512px',
+              height: '384px',
+            }"
+            :draggable="false"
+          />
+        </div>
+      </template>
+    </ScrollView>
+  </div>
+</template>
+
+<script>
+import { ScrollView } from '@progress/kendo-vue-scrollview';
+import './styles.css';
+
+const balloonsImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/1.jpg';
+const bambooImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/2.jpg';
+const dandelionImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/3.jpg';
+const waveImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/4.jpg';
+const grassImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/5.jpg';
+
+export default {
+  components: {
+    ScrollView,
+  },
+  data() {
+    return {
+      items: [
+        {
+          title: 'Balloons',
+          position: 1,
+          url: balloonsImage,
+        },
+        {
+          title: 'Forest',
+          position: 2,
+          url: bambooImage,
+        },
+        {
+          title: 'Flower',
+          position: 3,
+          url: dandelionImage,
+        },
+        {
+          title: 'Painting',
+          position: 4,
+          url: waveImage,
+        },
+        {
+          title: 'Grass',
+          position: 5,
+          url: grassImage,
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scrollview/automatic-interval/styles.css b/vue-options-api-demos/scrollview/automatic-interval/styles.css
new file mode 100644
index 00000000..9eec10fa
--- /dev/null
+++ b/vue-options-api-demos/scrollview/automatic-interval/styles.css
@@ -0,0 +1,18 @@
+.k-scrollview {
+    margin: 0 auto;
+}
+.image-with-text {
+    position: relative;
+}
+.demo-title {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    margin: 0;
+    padding: 15px;
+    color: #fff;
+    background-color: rgba(0, 0, 0, 0.4);
+    text-align: center;
+    font-size: 24px;
+}
diff --git a/vue-options-api-demos/scrollview/automatic-scrolling/main.js b/vue-options-api-demos/scrollview/automatic-scrolling/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scrollview/automatic-scrolling/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scrollview/automatic-scrolling/main.vue b/vue-options-api-demos/scrollview/automatic-scrolling/main.vue
new file mode 100644
index 00000000..8cacf45e
--- /dev/null
+++ b/vue-options-api-demos/scrollview/automatic-scrolling/main.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <ScrollView
+      :style="{
+        width: '512px',
+        height: '384px',
+      }"
+      :data-items="items"
+      :content="'content'"
+      :automatic-view-change="true"
+    >
+      <template v-slot:content="{ props }">
+        <div class="image-with-text">
+          <h2 class="demo-title">{{ props.item.title }}</h2>
+          <img
+            :src="props.item.url"
+            :alt="`Photo ${props.item.position}`"
+            :style="{
+              width: '512px',
+              height: '384px',
+            }"
+            :draggable="false"
+          />
+        </div>
+      </template>
+    </ScrollView>
+  </div>
+</template>
+
+<script>
+import { ScrollView } from '@progress/kendo-vue-scrollview';
+import './styles.css';
+
+const balloonsImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/1.jpg';
+const bambooImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/2.jpg';
+const dandelionImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/3.jpg';
+const waveImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/4.jpg';
+const grassImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/5.jpg';
+
+export default {
+  components: {
+    ScrollView,
+  },
+  data() {
+    return {
+      items: [
+        {
+          title: 'Balloons',
+          position: 1,
+          url: balloonsImage,
+        },
+        {
+          title: 'Forest',
+          position: 2,
+          url: bambooImage,
+        },
+        {
+          title: 'Flower',
+          position: 3,
+          url: dandelionImage,
+        },
+        {
+          title: 'Painting',
+          position: 4,
+          url: waveImage,
+        },
+        {
+          title: 'Grass',
+          position: 5,
+          url: grassImage,
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scrollview/automatic-scrolling/styles.css b/vue-options-api-demos/scrollview/automatic-scrolling/styles.css
new file mode 100644
index 00000000..9eec10fa
--- /dev/null
+++ b/vue-options-api-demos/scrollview/automatic-scrolling/styles.css
@@ -0,0 +1,18 @@
+.k-scrollview {
+    margin: 0 auto;
+}
+.image-with-text {
+    position: relative;
+}
+.demo-title {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    margin: 0;
+    padding: 15px;
+    color: #fff;
+    background-color: rgba(0, 0, 0, 0.4);
+    text-align: center;
+    font-size: 24px;
+}
diff --git a/vue-options-api-demos/scrollview/endless/main.js b/vue-options-api-demos/scrollview/endless/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scrollview/endless/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scrollview/endless/main.vue b/vue-options-api-demos/scrollview/endless/main.vue
new file mode 100644
index 00000000..846da96e
--- /dev/null
+++ b/vue-options-api-demos/scrollview/endless/main.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <ScrollView
+      :style="{
+        width: '512px',
+        height: '384px',
+      }"
+      :data-items="items"
+      :content="'content'"
+      :endless="true"
+    >
+      <template v-slot:content="{ props }">
+        <div class="image-with-text">
+          <h2 class="demo-title">{{ props.item.title }}</h2>
+          <img
+            :src="props.item.url"
+            :alt="`Photo ${props.item.position}`"
+            :style="{
+              width: '512px',
+              height: '384px',
+            }"
+            :draggable="false"
+          />
+        </div>
+      </template>
+    </ScrollView>
+  </div>
+</template>
+
+<script>
+import { ScrollView } from '@progress/kendo-vue-scrollview';
+import './styles.css';
+
+const balloonsImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/1.jpg';
+const bambooImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/2.jpg';
+const dandelionImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/3.jpg';
+const waveImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/4.jpg';
+const grassImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/5.jpg';
+
+export default {
+  components: {
+    ScrollView,
+  },
+  data() {
+    return {
+      items: [
+        {
+          title: 'Balloons',
+          position: 1,
+          url: balloonsImage,
+        },
+        {
+          title: 'Forest',
+          position: 2,
+          url: bambooImage,
+        },
+        {
+          title: 'Flower',
+          position: 3,
+          url: dandelionImage,
+        },
+        {
+          title: 'Painting',
+          position: 4,
+          url: waveImage,
+        },
+        {
+          title: 'Grass',
+          position: 5,
+          url: grassImage,
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scrollview/endless/styles.css b/vue-options-api-demos/scrollview/endless/styles.css
new file mode 100644
index 00000000..9eec10fa
--- /dev/null
+++ b/vue-options-api-demos/scrollview/endless/styles.css
@@ -0,0 +1,18 @@
+.k-scrollview {
+    margin: 0 auto;
+}
+.image-with-text {
+    position: relative;
+}
+.demo-title {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    margin: 0;
+    padding: 15px;
+    color: #fff;
+    background-color: rgba(0, 0, 0, 0.4);
+    text-align: center;
+    font-size: 24px;
+}
diff --git a/vue-options-api-demos/scrollview/get-started/main.js b/vue-options-api-demos/scrollview/get-started/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scrollview/get-started/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scrollview/get-started/main.vue b/vue-options-api-demos/scrollview/get-started/main.vue
new file mode 100644
index 00000000..f4f3e53a
--- /dev/null
+++ b/vue-options-api-demos/scrollview/get-started/main.vue
@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <ScrollView
+      :style="{
+        width: '512px',
+        height: '384px',
+      }"
+      :data-items="items"
+      :content="'content'"
+    >
+      <template v-slot:content="{ props }">
+        <div class="image-with-text">
+          <img
+            :src="props.item.url"
+            :alt="`Photo ${props.item.position}`"
+            :style="{
+              width: '512px',
+              height: '384px',
+            }"
+            :draggable="false"
+          />
+        </div>
+      </template>
+    </ScrollView>
+  </div>
+</template>
+
+<script>
+import { ScrollView } from '@progress/kendo-vue-scrollview';
+import './styles.css';
+
+const kukeriImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/card/kukeri.jpg';
+const martenitsaImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/card/martenitsa.jpg';
+const roseFestivalImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/card/rose_festival.jpg';
+
+export default {
+    components: {
+        ScrollView,
+    },
+    data() {
+        return {
+            items: [
+                {
+                    url: kukeriImage,
+                },
+                {
+                    url: martenitsaImage,
+                },
+                {
+                    url: roseFestivalImage,
+                },
+            ],
+        };
+    },
+};
+</script>
diff --git a/vue-options-api-demos/scrollview/get-started/styles.css b/vue-options-api-demos/scrollview/get-started/styles.css
new file mode 100644
index 00000000..66c8dcd0
--- /dev/null
+++ b/vue-options-api-demos/scrollview/get-started/styles.css
@@ -0,0 +1,5 @@
+/* center the Carousel horizontally */
+/* k-scrollview is the default component class */
+.k-scrollview {
+    margin: 0 auto;
+}
diff --git a/vue-options-api-demos/scrollview/keyboard-navigation/main.js b/vue-options-api-demos/scrollview/keyboard-navigation/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scrollview/keyboard-navigation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scrollview/keyboard-navigation/main.vue b/vue-options-api-demos/scrollview/keyboard-navigation/main.vue
new file mode 100644
index 00000000..665b45e1
--- /dev/null
+++ b/vue-options-api-demos/scrollview/keyboard-navigation/main.vue
@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <ScrollView
+      :style="{
+        width: '512px',
+        height: '384px',
+      }"
+      :data-items="items"
+      :content="'content'"
+    >
+      <template v-slot:content="{ props }">
+        <div class="image-with-text">
+          <p>
+            Showing image {{ props.item.position }} of {{ props.items.length }}.
+          </p>
+          <img
+            :src="props.item.url"
+            :alt="`Photo ${props.item.position}`"
+            :style="{
+              width: '512px',
+              height: '384px',
+            }"
+            :draggable="false"
+          />
+        </div>
+      </template>
+    </ScrollView>
+  </div>
+</template>
+
+<script>
+import { ScrollView } from '@progress/kendo-vue-scrollview';
+import './styles.css';
+
+const balloonsImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/1.jpg';
+const bambooImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/2.jpg';
+const dandelionImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/3.jpg';
+const waveImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/4.jpg';
+const grassImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/5.jpg';
+
+export default {
+  components: {
+    ScrollView,
+  },
+  data() {
+    return {
+      items: [
+        {
+          position: 1,
+          url: balloonsImage,
+        },
+        {
+          position: 2,
+          url: bambooImage,
+        },
+        {
+          position: 3,
+          url: dandelionImage,
+        },
+        {
+          position: 4,
+          url: waveImage,
+        },
+        {
+          position: 5,
+          url: grassImage,
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scrollview/keyboard-navigation/styles.css b/vue-options-api-demos/scrollview/keyboard-navigation/styles.css
new file mode 100644
index 00000000..2f7a7b12
--- /dev/null
+++ b/vue-options-api-demos/scrollview/keyboard-navigation/styles.css
@@ -0,0 +1,20 @@
+/* center the Carousel horizontally */
+/* k-scrollview is the default component class */
+.k-scrollview {
+    margin: 0 auto;
+}
+/* enable absolute positioning inside the Carousel template */
+.image-with-text {
+    position: relative;
+}
+
+/* style the overlay text inside the Carousel */
+.image-with-text > p {
+    position: absolute;
+    top: 1rem;
+    left: 1.6rem;
+    color: rgba(255, 255, 255, .8);
+    margin: 0;
+    font-style: italic;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
+}
diff --git a/vue-options-api-demos/scrollview/overview/main.js b/vue-options-api-demos/scrollview/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scrollview/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scrollview/overview/main.vue b/vue-options-api-demos/scrollview/overview/main.vue
new file mode 100644
index 00000000..9d5dd49b
--- /dev/null
+++ b/vue-options-api-demos/scrollview/overview/main.vue
@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <ScrollView
+      :style="{
+        width: '512px',
+        height: '384px',
+      }"
+      :data-items="items"
+      :content="'content'"
+    >
+      <template v-slot:content="{ props }">
+        <div class="image-with-text">
+          <p>
+            Showing image {{ props.item.position }} of {{ props.items.length }}.
+          </p>
+          <img
+            :src="props.item.url"
+            :alt="`Photo ${props.item.position}`"
+            :style="{
+              width: '512px',
+              height: '384px',
+            }"
+            :draggable="false"
+          />
+        </div>
+      </template>
+    </ScrollView>
+  </div>
+</template>
+
+<script>
+import { ScrollView } from '@progress/kendo-vue-scrollview';
+import './styles.css';
+
+const balloonsImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/1.jpg';
+const bambooImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/2.jpg';
+const dandelionImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/3.jpg';
+const waveImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/4.jpg';
+const grassImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/5.jpg';
+
+
+export default {
+  components: {
+    ScrollView,
+  },
+  data() {
+    return {
+      items: [
+        {
+          position: 1,
+          url: balloonsImage,
+        },
+        {
+          position: 2,
+          url: bambooImage,
+        },
+        {
+          position: 3,
+          url: dandelionImage,
+        },
+        {
+          position: 4,
+          url: waveImage,
+        },
+        {
+          position: 5,
+          url: grassImage,
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scrollview/overview/styles.css b/vue-options-api-demos/scrollview/overview/styles.css
new file mode 100644
index 00000000..2f7a7b12
--- /dev/null
+++ b/vue-options-api-demos/scrollview/overview/styles.css
@@ -0,0 +1,20 @@
+/* center the Carousel horizontally */
+/* k-scrollview is the default component class */
+.k-scrollview {
+    margin: 0 auto;
+}
+/* enable absolute positioning inside the Carousel template */
+.image-with-text {
+    position: relative;
+}
+
+/* style the overlay text inside the Carousel */
+.image-with-text > p {
+    position: absolute;
+    top: 1rem;
+    left: 1.6rem;
+    color: rgba(255, 255, 255, .8);
+    margin: 0;
+    font-style: italic;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
+}
diff --git a/vue-options-api-demos/scrollview/pager-overlay/main.js b/vue-options-api-demos/scrollview/pager-overlay/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scrollview/pager-overlay/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scrollview/pager-overlay/main.vue b/vue-options-api-demos/scrollview/pager-overlay/main.vue
new file mode 100644
index 00000000..34e79a05
--- /dev/null
+++ b/vue-options-api-demos/scrollview/pager-overlay/main.vue
@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <div class="example-config">
+      <radiogroup
+        :data-items="dataItems"
+        :value="overlayValue"
+        @change="onChange"
+      />
+    </div>
+    <ScrollView
+      :style="{
+        width: '512px',
+        height: '384px',
+      }"
+      :data-items="items"
+      :content="'content'"
+      :pagerOverlay="overlayValue"
+    >
+      <template v-slot:content="{ props }">
+        <div class="image-with-text">
+          <h2 class="demo-title">{{ props.item.title }}</h2>
+          <img
+            :src="props.item.url"
+            :alt="`Photo ${props.item.position}`"
+            :style="{
+              width: '512px',
+              height: '384px',
+            }"
+            :draggable="false"
+          />
+        </div>
+      </template>
+    </ScrollView>
+  </div>
+</template>
+
+<script>
+import { ScrollView } from '@progress/kendo-vue-scrollview';
+import { RadioGroup } from '@progress/kendo-vue-inputs';
+import './styles.css';
+
+const balloonsImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/1.jpg';
+const bambooImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/2.jpg';
+const dandelionImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/3.jpg';
+const waveImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/4.jpg';
+const grassImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/5.jpg';
+
+export default {
+  components: {
+    ScrollView,
+    radiogroup: RadioGroup,
+  },
+  data() {
+    return {
+      overlayValue: 'none',
+      dataItems: [
+        {
+          label: 'None',
+          value: 'none',
+        },
+        {
+          label: 'Light',
+          value: 'light',
+        },
+        {
+          label: 'Dark',
+          value: 'dark',
+        },
+      ],
+      items: [
+        {
+          title: 'Balloons',
+          position: 1,
+          url: balloonsImage,
+        },
+        {
+          title: 'Forest',
+          position: 2,
+          url: bambooImage,
+        },
+        {
+          title: 'Flower',
+          position: 3,
+          url: dandelionImage,
+        },
+        {
+          title: 'Painting',
+          position: 4,
+          url: waveImage,
+        },
+        {
+          title: 'Grass',
+          position: 5,
+          url: grassImage,
+        },
+      ],
+    };
+  },
+  methods: {
+    onChange(e) {
+      this.overlayValue = e.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scrollview/pager-overlay/styles.css b/vue-options-api-demos/scrollview/pager-overlay/styles.css
new file mode 100644
index 00000000..9eec10fa
--- /dev/null
+++ b/vue-options-api-demos/scrollview/pager-overlay/styles.css
@@ -0,0 +1,18 @@
+.k-scrollview {
+    margin: 0 auto;
+}
+.image-with-text {
+    position: relative;
+}
+.demo-title {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    margin: 0;
+    padding: 15px;
+    color: #fff;
+    background-color: rgba(0, 0, 0, 0.4);
+    text-align: center;
+    font-size: 24px;
+}
diff --git a/vue-options-api-demos/scrollview/paging/main.js b/vue-options-api-demos/scrollview/paging/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scrollview/paging/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scrollview/paging/main.vue b/vue-options-api-demos/scrollview/paging/main.vue
new file mode 100644
index 00000000..f1cada74
--- /dev/null
+++ b/vue-options-api-demos/scrollview/paging/main.vue
@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <div class="example-config">
+      <radiogroup :data-items="dataItems" :value="enabled" @change="onChange" />
+    </div>
+    <ScrollView
+      :style="{
+        width: '512px',
+        height: '384px',
+      }"
+      :data-items="items"
+      :content="'content'"
+      :pageable="enabled"
+    >
+      <template v-slot:content="{ props }">
+        <div class="image-with-text">
+          <h2 class="demo-title">{{ props.item.title }}</h2>
+          <img
+            :src="props.item.url"
+            :alt="`Photo ${props.item.position}`"
+            :style="{
+              width: '512px',
+              height: '384px',
+            }"
+            :draggable="false"
+          />
+        </div>
+      </template>
+    </ScrollView>
+  </div>
+</template>
+
+<script>
+import { ScrollView } from '@progress/kendo-vue-scrollview';
+import { RadioGroup } from '@progress/kendo-vue-inputs';
+import './styles.css';
+
+const balloonsImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/1.jpg';
+const bambooImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/2.jpg';
+const dandelionImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/3.jpg';
+const waveImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/4.jpg';
+const grassImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/scrollview/5.jpg';
+
+export default {
+  components: {
+    ScrollView,
+    radiogroup: RadioGroup,
+  },
+  data() {
+    return {
+      enabled: true,
+      dataItems: [
+        {
+          label: 'Enable pager',
+          value: true,
+        },
+        {
+          label: 'Disable pager',
+          value: false,
+        },
+      ],
+      items: [
+        {
+          title: 'Balloons',
+          position: 1,
+          url: balloonsImage,
+        },
+        {
+          title: 'Forest',
+          position: 2,
+          url: bambooImage,
+        },
+        {
+          title: 'Flower',
+          position: 3,
+          url: dandelionImage,
+        },
+        {
+          title: 'Painting',
+          position: 4,
+          url: waveImage,
+        },
+        {
+          title: 'Grass',
+          position: 5,
+          url: grassImage,
+        },
+      ],
+    };
+  },
+  methods: {
+    onChange(e) {
+      this.enabled = e.value;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/scrollview/paging/styles.css b/vue-options-api-demos/scrollview/paging/styles.css
new file mode 100644
index 00000000..9eec10fa
--- /dev/null
+++ b/vue-options-api-demos/scrollview/paging/styles.css
@@ -0,0 +1,18 @@
+.k-scrollview {
+    margin: 0 auto;
+}
+.image-with-text {
+    position: relative;
+}
+.demo-title {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    margin: 0;
+    padding: 15px;
+    color: #fff;
+    background-color: rgba(0, 0, 0, 0.4);
+    text-align: center;
+    font-size: 24px;
+}
diff --git a/vue-options-api-demos/scrollview/rtl/main.js b/vue-options-api-demos/scrollview/rtl/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/scrollview/rtl/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/scrollview/rtl/main.vue b/vue-options-api-demos/scrollview/rtl/main.vue
new file mode 100644
index 00000000..8fccd2c4
--- /dev/null
+++ b/vue-options-api-demos/scrollview/rtl/main.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <ScrollView
+      :style="{
+        width: '512px',
+        height: '384px',
+      }"
+      :data-items="items"
+      :content="'content'"
+      :dir="'rtl'"
+    >
+      <template v-slot:content="{ props }">
+        <div class="image-with-text">
+          <img
+            :src="props.item.url"
+            :alt="`Photo ${props.item.position}`"
+            :style="{
+              width: '512px',
+              height: '384px',
+            }"
+            :draggable="false"
+          />
+        </div>
+      </template>
+    </ScrollView>
+  </div>
+</template>
+
+<script>
+import { ScrollView } from '@progress/kendo-vue-scrollview';
+import './styles.css';
+
+const kukeriImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/card/kukeri.jpg';
+const martenitsaImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/card/martenitsa.jpg';
+const roseFestivalImage = (import.meta.env.VITE_VUE_DEMOS_BASE_URL || '/') + 'assets/layout/card/rose_festival.jpg';
+
+export default {
+    components: {
+        ScrollView,
+    },
+    data() {
+        return {
+            items: [
+                { url: kukeriImage },
+                { url: martenitsaImage },
+                { url: roseFestivalImage }
+            ],
+        };
+    },
+};
+</script>
diff --git a/vue-options-api-demos/scrollview/rtl/styles.css b/vue-options-api-demos/scrollview/rtl/styles.css
new file mode 100644
index 00000000..66c8dcd0
--- /dev/null
+++ b/vue-options-api-demos/scrollview/rtl/styles.css
@@ -0,0 +1,5 @@
+/* center the Carousel horizontally */
+/* k-scrollview is the default component class */
+.k-scrollview {
+    margin: 0 auto;
+}
diff --git a/vue-options-api-demos/tooltip/controlled-mode/main.js b/vue-options-api-demos/tooltip/controlled-mode/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/tooltip/controlled-mode/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/tooltip/controlled-mode/main.vue b/vue-options-api-demos/tooltip/controlled-mode/main.vue
new file mode 100644
index 00000000..44816450
--- /dev/null
+++ b/vue-options-api-demos/tooltip/controlled-mode/main.vue
@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <Tooltip
+      :anchor-element="'target'"
+      :open="open"
+      :target-element="targetElement"
+      :open-delay="1"
+      :append-to="wrapper"
+    >
+      <div ref="wrapper">
+        <p>
+          Click the button to show the tooltip with&nbsp;
+          <a
+            ref="firstElement"
+            href="http://example.com/first"
+            title="http://example.com/first"
+          >
+            first link
+          </a>
+          &nbsp; as an anchor.
+          <kbutton @click="showTooltip($refs.firstElement)">
+            Show Tooltip
+          </kbutton>
+        </p>
+        <p>
+          Click the button to show the tooltip with&nbsp;
+          <a
+            ref="secondElement"
+            href="http://example.com/second"
+            title="http://example.com/second"
+          >
+            second link
+          </a>
+          &nbsp; as an anchor.
+          <kbutton @click="showTooltip($refs.secondElement)">
+            Show Tooltip
+          </kbutton>
+        </p>
+        <hr />
+        <kbutton @click="hideTooltip">Hide Tooltip</kbutton>
+      </div>
+    </Tooltip>
+  </div>
+</template>
+
+<script>
+import { Tooltip } from '@progress/kendo-vue-tooltip';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    Tooltip,
+      'kbutton': Button
+  },
+  data() {
+    return {
+      wrapper: this.$refs.wrapper,
+      open: false,
+      targetElement: null,
+    };
+  },
+  methods: {
+    showTooltip(element) {
+      this.open = true;
+      this.targetElement = element;
+    },
+    hideTooltip(element) {
+      this.open = false;
+      this.targetElement = null;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/tooltip/customization/main.js b/vue-options-api-demos/tooltip/customization/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/tooltip/customization/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/tooltip/customization/main.vue b/vue-options-api-demos/tooltip/customization/main.vue
new file mode 100644
index 00000000..e1c85908
--- /dev/null
+++ b/vue-options-api-demos/tooltip/customization/main.vue
@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <div>
+      <kbutton title="Tooltip message">
+        I have the browser tooltip
+      </kbutton>
+    </div>
+    <hr class="k-hr" />
+    <div>
+      <kbutton>I do not have a tooltip</kbutton>
+    </div>
+    <hr class="k-hr" />
+    <div
+      @mouseover="
+        (event) => $refs.tooltip && $refs.tooltip.handleMouseOver(event)
+      "
+      @mouseout="
+        (event) => $refs.tooltip && $refs.tooltip.handleMouseOut(event)
+      "
+    >
+      <kbutton title="Tooltip message">
+        I have a Kendo UI for Vue Native Tooltip
+      </kbutton>
+    </div>
+    <hr class="k-hr" />
+    <div
+      @mouseover="
+        (event) => $refs.tooltip && $refs.tooltip.handleMouseOver(event)
+      "
+      @mouseout="
+        (event) => $refs.tooltip && $refs.tooltip.handleMouseOut(event)
+      "
+    >
+      <kbutton title="Tooltip message">
+        I also the same Kendo UI for Vue Native Tooltip
+      </kbutton>
+      <Tooltip
+        ref="tooltip"
+        :anchor-element="'target'"
+        :position="'right'"
+        :open-delay="300"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Tooltip } from '@progress/kendo-vue-tooltip';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    Tooltip,
+      'kbutton': Button
+  },
+};
+</script>
+<style>
+.k-button-text {
+  pointer-events: none;
+}
+</style>
\ No newline at end of file
diff --git a/vue-options-api-demos/tooltip/events/Logger.vue b/vue-options-api-demos/tooltip/events/Logger.vue
new file mode 100644
index 00000000..f2917aa1
--- /dev/null
+++ b/vue-options-api-demos/tooltip/events/Logger.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="example-config">
+    <h5>{{ title }}</h5>
+    <ul class="event-log">
+      <li v-for="(event, idx) in events" :key="idx + idx">{{ event }}</li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    events: Array,
+    title: String,
+  },
+};
+</script>
+
+<style scoped>
+.example-config {
+  margin: 0 0 20px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+  margin: 0;
+  padding: 0;
+  max-height: 100px;
+  overflow-y: auto;
+  list-style-type: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: white;
+}
+.event-log li {
+  margin: 0;
+  padding: 0.3em;
+  line-height: 1.2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+  margin-bottom: -1px;
+}
+</style>
diff --git a/vue-options-api-demos/tooltip/events/main.js b/vue-options-api-demos/tooltip/events/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/tooltip/events/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/tooltip/events/main.vue b/vue-options-api-demos/tooltip/events/main.vue
new file mode 100644
index 00000000..02975945
--- /dev/null
+++ b/vue-options-api-demos/tooltip/events/main.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <Tooltip
+      :anchor-element="'target'"
+      :position="'top'"
+      @open="onOpen"
+      @close="onClose"
+    >
+      <div id="agglomerations">
+        <a href="#" title="Canton - 26,300,000" id="canton" />
+        <a title="Jakarta - 25,800,000" id="jakarta" />
+        <a title="Mexico City - 23,500,000" id="mexico" />
+        <a title="Delhi - 23,500,000" id="delhi" />
+        <a title="Karachi - 22,100,000" id="karachi" />
+        <a title="New York - 21,500,000" id="newyork" />
+        <a title="Sao Paulo - 21,300,000" id="saopaolo" />
+        <a title="Mumbay/Bombay - 21,100,000" id="bombay" />
+        <a title="Los Angeles - 17,100,000" id="losangeles" />
+        <a title="Osaka - 16,800,000" id="osaka" />
+        <a title="Moscow - 16,200,000" id="moscow" />
+      </div>
+    </Tooltip>
+    <br />
+    <br />
+    <Logger :title="'Events list'" :events="eventsList" />
+  </div>
+</template>
+<script>
+import "./styles.css";
+import { Tooltip } from "@progress/kendo-vue-tooltip";
+import Logger from "./Logger.vue";
+
+export default {
+  components: {
+    Logger,
+    Tooltip,
+  },
+  computed: {
+    eventsList() {
+      return this.events;
+    },
+  },
+  data: function () {
+    return {
+      events: [],
+    };
+  },
+  methods: {
+    onOpen(e) {
+      this.events.unshift("Open event triggered for: " + e.event.target.id);
+    },
+    onClose(e) {
+      this.events.unshift("Close event triggered for: " + e.event.target.id);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/tooltip/events/styles.css b/vue-options-api-demos/tooltip/events/styles.css
new file mode 100644
index 00000000..6a995f79
--- /dev/null
+++ b/vue-options-api-demos/tooltip/events/styles.css
@@ -0,0 +1,72 @@
+#agglomerations {
+    position: relative;
+    width: 692px;
+    height: 480px;
+    margin: 0 auto;
+    background: url('https://www.telerik.com/kendo-vue-ui/components/tooltip/assets/world-map.jpg')
+      no-repeat 0 0;
+  }
+  
+  #agglomerations > a {
+    cursor: pointer;
+    position: absolute;
+    display: block;
+    width: 12px;
+    height: 12px;
+    background-color: #fff600;
+    border-radius: 30px;
+    border: 0;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
+    transition: box-shadow 0.3s;
+    z-index: 10;
+  }
+  
+  #agglomerations > a:hover {
+    box-shadow: 0 0 0 15px rgba(0, 0, 0, 0.5);
+  }
+  
+  #canton {
+    top: 226px;
+    left: 501px;
+  }
+  #jakarta {
+    top: 266px;
+    left: 494px;
+  }
+  #mexico {
+    top: 227px;
+    left: 182px;
+  }
+  #delhi {
+    top: 214px;
+    left: 448px;
+  }
+  #karachi {
+    top: 222px;
+    left: 431px;
+  }
+  #newyork {
+    top: 188px;
+    left: 214px;
+  }
+  #saopaolo {
+    top: 304px;
+    left: 248px;
+  }
+  #bombay {
+    top: 233px;
+    left: 438px;
+  }
+  #losangeles {
+    top: 202px;
+    left: 148px;
+  }
+  #osaka {
+    top: 201px;
+    left: 535px;
+  }
+  #moscow {
+    top: 153px;
+    left: 402px;
+  }
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/tooltip/filters/main.js b/vue-options-api-demos/tooltip/filters/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/tooltip/filters/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/tooltip/filters/main.vue b/vue-options-api-demos/tooltip/filters/main.vue
new file mode 100644
index 00000000..dc3d00ef
--- /dev/null
+++ b/vue-options-api-demos/tooltip/filters/main.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <Tooltip
+      :filter="filterElements"
+      :anchor-еlement="'target'"
+      :paren-title="true"
+    >
+      <div>
+        <p title="test">
+          <span>In this demo, the</span>
+          <strong title="this is the tooltip">
+            &nbsp;Kendo UI for Vue Native Tooltip&nbsp;
+          </strong>
+          will show only when you hover &nbsp;<code>&lt;strong&gt;</code>&nbsp;
+          <strong title="because the 'filter' property is set">elements</strong>
+          .
+        </p>
+        <p>
+          Other elements, like
+          <a href="#" title="Default browser tooltip"> &nbsp;this link </a>
+          , will only show the default browser tooltip, even though they have a
+          specified
+          <code>&nbsp;title&nbsp;</code>
+          attribute.
+        </p>
+      </div>
+    </Tooltip>
+  </div>
+</template>
+
+<script>
+import { Tooltip } from '@progress/kendo-vue-tooltip';
+
+export default {
+  components: {
+    Tooltip,
+  },
+  methods: {
+    filterElements(element) {
+      if (element.tagName === 'STRONG') {
+        return true;
+      }
+      return false;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/tooltip/grid-integration/main.js b/vue-options-api-demos/tooltip/grid-integration/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/tooltip/grid-integration/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/tooltip/grid-integration/main.vue b/vue-options-api-demos/tooltip/grid-integration/main.vue
new file mode 100644
index 00000000..370ab687
--- /dev/null
+++ b/vue-options-api-demos/tooltip/grid-integration/main.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="container">
+    <div class="row">
+      <div class="col-sm mb-2">ProgressBar</div>
+    </div>
+    <div class="row">
+      <div class="col-sm">
+        <ProgressBar :value="value" :dir="'rtl'" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ProgressBar } from "@progress/kendo-vue-progressbars";
+
+export default {
+  components: {
+    ProgressBar,
+  },
+  data() {
+    return {
+      value: 55,
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/tooltip/multiple/main.js b/vue-options-api-demos/tooltip/multiple/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/tooltip/multiple/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/tooltip/multiple/main.vue b/vue-options-api-demos/tooltip/multiple/main.vue
new file mode 100644
index 00000000..c746aa29
--- /dev/null
+++ b/vue-options-api-demos/tooltip/multiple/main.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <Tooltip :open-delay="100" :position="'right'" :anchor-element="'target'">
+      <div
+        :style="{
+          'text-align': 'center',
+        }"
+      >
+        <span title="This is with position right">
+          This is the first Tooltip with position right.
+        </span>
+      </div>
+    </Tooltip>
+    <br />
+    <Tooltip :open-delay="100" :position="'left'" :anchor-element="'target'">
+      <div
+        :style="{
+          'text-align': 'center',
+        }"
+      >
+        <span title="This is with position left">
+          This is the second Tooltip with position left.
+        </span>
+      </div>
+    </Tooltip>
+  </div>
+</template>
+
+<script>
+import { Tooltip } from '@progress/kendo-vue-tooltip';
+
+export default {
+  components: {
+    Tooltip,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/tooltip/overview/main.js b/vue-options-api-demos/tooltip/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/tooltip/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/tooltip/overview/main.vue b/vue-options-api-demos/tooltip/overview/main.vue
new file mode 100644
index 00000000..1939dcd9
--- /dev/null
+++ b/vue-options-api-demos/tooltip/overview/main.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <Tooltip :anchor-element="'target'" :position="'top'">
+      <div id="agglomerations">
+        <a href="#" title="Canton - 26,300,000" id="canton" />
+        <a title="Jakarta - 25,800,000" id="jakarta" />
+        <a title="Mexico City - 23,500,000" id="mexico" />
+        <a title="Delhi - 23,500,000" id="delhi" />
+        <a title="Karachi - 22,100,000" id="karachi" />
+        <a title="New York - 21,500,000" id="newyork" />
+        <a title="Sao Paulo - 21,300,000" id="saopaolo" />
+        <a title="Mumbay/Bombay - 21,100,000" id="bombay" />
+        <a title="Los Angeles - 17,100,000" id="losangeles" />
+        <a title="Osaka - 16,800,000" id="osaka" />
+        <a title="Moscow - 16,200,000" id="moscow" />
+      </div>
+    </Tooltip>
+  </div>
+</template>
+
+<script>
+import { Tooltip } from '@progress/kendo-vue-tooltip';
+import './styles.css';
+
+export default {
+  components: {
+    Tooltip,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/tooltip/overview/styles.css b/vue-options-api-demos/tooltip/overview/styles.css
new file mode 100644
index 00000000..fef10b43
--- /dev/null
+++ b/vue-options-api-demos/tooltip/overview/styles.css
@@ -0,0 +1,71 @@
+#agglomerations {
+    position: relative;
+    width: 692px;
+    height: 480px;
+    margin: 0 auto;
+    background: url('https://demos.telerik.com/kendo-vue-ui/assets/tooltips/world-map.jpg')
+      no-repeat 0 0;
+  }
+
+  #agglomerations > a {
+    cursor: pointer;
+    position: absolute;
+    display: block;
+    width: 12px;
+    height: 12px;
+    background-color: #fff600;
+    border-radius: 30px;
+    border: 0;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
+    transition: box-shadow 0.3s;
+    z-index: 10;
+  }
+
+  #agglomerations > a:hover {
+    box-shadow: 0 0 0 15px rgba(0, 0, 0, 0.5);
+  }
+
+  #canton {
+    top: 226px;
+    left: 501px;
+  }
+  #jakarta {
+    top: 266px;
+    left: 494px;
+  }
+  #mexico {
+    top: 227px;
+    left: 182px;
+  }
+  #delhi {
+    top: 214px;
+    left: 448px;
+  }
+  #karachi {
+    top: 222px;
+    left: 431px;
+  }
+  #newyork {
+    top: 188px;
+    left: 214px;
+  }
+  #saopaolo {
+    top: 304px;
+    left: 248px;
+  }
+  #bombay {
+    top: 233px;
+    left: 438px;
+  }
+  #losangeles {
+    top: 202px;
+    left: 148px;
+  }
+  #osaka {
+    top: 201px;
+    left: 535px;
+  }
+  #moscow {
+    top: 153px;
+    left: 402px;
+  }
diff --git a/vue-options-api-demos/tooltip/positioning/main.js b/vue-options-api-demos/tooltip/positioning/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/tooltip/positioning/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/tooltip/positioning/main.vue b/vue-options-api-demos/tooltip/positioning/main.vue
new file mode 100644
index 00000000..b5a23d32
--- /dev/null
+++ b/vue-options-api-demos/tooltip/positioning/main.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <Tooltip :position="position" :anchor-element="anchor">
+      <div class="k-form">
+        <legend>Change position</legend>
+        <radiogroup
+          :data-items="positions"
+          :layout="'horizontal'"
+          @change="onPositionChange"
+          :value="'auto'"
+        />
+      </div>
+      <div class="k-form">
+        <legend>Change anchor</legend>
+        <radiogroup
+          :data-items="anchors"
+          :layout="'horizontal'"
+          @change="onAnchorChange"
+          :value="'target'"
+        />
+      </div>
+      <div
+        :style="{
+          'text-align': 'center',
+          'padding-top': '100px',
+        }"
+      >
+        <kbutton title="some title">Hover me</kbutton>
+      </div>
+    </Tooltip>
+  </div>
+</template>
+
+<script>
+import { Tooltip } from '@progress/kendo-vue-tooltip';
+import { RadioGroup } from '@progress/kendo-vue-inputs';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+  components: {
+    Tooltip,
+    radiogroup: RadioGroup,
+      'kbutton': Button
+  },
+  data() {
+    return {
+      anchor: 'target',
+      position: undefined,
+      positions: [
+        { label: 'Default', value: 'auto' },
+        { label: 'Top', value: 'top' },
+        { label: 'Bottom', value: 'bottom' },
+        { label: 'Left', value: 'left' },
+        { label: 'Right', value: 'right' },
+      ],
+      anchors: [
+        { label: 'Target', value: 'target' },
+        { label: 'Pointer', value: 'pointer' },
+      ],
+    };
+  },
+  methods: {
+    onPositionChange(e) {
+      this.position = e.value;
+    },
+    onAnchorChange(e) {
+      this.anchor = e.value;
+    },
+  },
+};
+</script>
+<style>
+.k-button-text {
+  pointer-events: none;
+}
+</style>
\ No newline at end of file
diff --git a/vue-options-api-demos/tooltip/shared/products.json b/vue-options-api-demos/tooltip/shared/products.json
new file mode 100644
index 00000000..4df1c408
--- /dev/null
+++ b/vue-options-api-demos/tooltip/shared/products.json
@@ -0,0 +1,1233 @@
+[{
+    "ProductID" : 1,
+    "ProductName" : "Chai",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "10 boxes x 20 bags",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 2,
+    "ProductName" : "Chang",
+    "SupplierID" : 1,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 3,
+    "ProductName" : "Aniseed Syrup",
+    "SupplierID" : 1,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 550 ml bottles",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 13,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 4,
+    "ProductName" : "Chef Anton's Cajun Seasoning",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "48 - 6 oz jars",
+    "UnitPrice" : 22.0000,
+    "UnitsInStock" : 53,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 5,
+    "ProductName" : "Chef Anton's Gumbo Mix",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "36 boxes",
+    "UnitPrice" : 21.3500,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 6,
+    "ProductName" : "Grandma's Boysenberry Spread",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 8 oz jars",
+    "UnitPrice" : 25.0000,
+    "UnitsInStock" : 120,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 7,
+    "ProductName" : "Uncle Bob's Organic Dried Pears",
+    "SupplierID" : 3,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "12 - 1 lb pkgs.",
+    "UnitPrice" : 30.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 8,
+    "ProductName" : "Northwoods Cranberry Sauce",
+    "SupplierID" : 3,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 - 12 oz jars",
+    "UnitPrice" : 40.0000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 9,
+    "ProductName" : "Mishi Kobe Niku",
+    "SupplierID" : 4,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "18 - 500 g pkgs.",
+    "UnitPrice" : 97.0000,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 10,
+    "ProductName" : "Ikura",
+    "SupplierID" : 4,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 200 ml jars",
+    "UnitPrice" : 31.0000,
+    "UnitsInStock" : 31,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 11,
+    "ProductName" : "Queso Cabrales",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "1 kg pkg.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 30,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 12,
+    "ProductName" : "Queso Manchego La Pastora",
+    "SupplierID" : 5,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 86,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 13,
+    "ProductName" : "Konbu",
+    "SupplierID" : 6,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "2 kg box",
+    "UnitPrice" : 6.0000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 14,
+    "ProductName" : "Tofu",
+    "SupplierID" : 6,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "40 - 100 g pkgs.",
+    "UnitPrice" : 23.2500,
+    "UnitsInStock" : 35,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 15,
+    "ProductName" : "Genen Shouyu",
+    "SupplierID" : 6,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 250 ml bottles",
+    "UnitPrice" : 15.5000,
+    "UnitsInStock" : 39,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 16,
+    "ProductName" : "Pavlova",
+    "SupplierID" : 7,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "32 - 500 g boxes",
+    "UnitPrice" : 17.4500,
+    "UnitsInStock" : 29,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 17,
+    "ProductName" : "Alice Mutton",
+    "SupplierID" : 7,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "20 - 1 kg tins",
+    "UnitPrice" : 39.0000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 18,
+    "ProductName" : "Carnarvon Tigers",
+    "SupplierID" : 7,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "16 kg pkg.",
+    "UnitPrice" : 62.5000,
+    "UnitsInStock" : 42,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 19,
+    "ProductName" : "Teatime Chocolate Biscuits",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 12 pieces",
+    "UnitPrice" : 9.2000,
+    "UnitsInStock" : 25,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 20,
+    "ProductName" : "Sir Rodney's Marmalade",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "30 gift boxes",
+    "UnitPrice" : 81.0000,
+    "UnitsInStock" : 40,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 21,
+    "ProductName" : "Sir Rodney's Scones",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 pkgs. x 4 pieces",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 3,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 22,
+    "ProductName" : "Gustaf's Knäckebröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 500 g pkgs.",
+    "UnitPrice" : 21.0000,
+    "UnitsInStock" : 104,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 23,
+    "ProductName" : "Tunnbröd",
+    "SupplierID" : 9,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "12 - 250 g pkgs.",
+    "UnitPrice" : 9.0000,
+    "UnitsInStock" : 61,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 24,
+    "ProductName" : "Guaraná Fantástica",
+    "SupplierID" : 10,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 355 ml cans",
+    "UnitPrice" : 4.5000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 25,
+    "ProductName" : "NuNuCa Nuß-Nougat-Creme",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "20 - 450 g glasses",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 26,
+    "ProductName" : "Gumbär Gummibärchen",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 250 g bags",
+    "UnitPrice" : 31.2300,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 27,
+    "ProductName" : "Schoggi Schokolade",
+    "SupplierID" : 11,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "100 - 100 g pieces",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 49,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 28,
+    "ProductName" : "Rössle Sauerkraut",
+    "SupplierID" : 12,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "25 - 825 g cans",
+    "UnitPrice" : 45.6000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 29,
+    "ProductName" : "Thüringer Rostbratwurst",
+    "SupplierID" : 12,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "50 bags x 30 sausgs.",
+    "UnitPrice" : 123.7900,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 30,
+    "ProductName" : "Nord-Ost Matjeshering",
+    "SupplierID" : 13,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "10 - 200 g glasses",
+    "UnitPrice" : 25.8900,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 31,
+    "ProductName" : "Gorgonzola Telino",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "12 - 100 g pkgs",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 32,
+    "ProductName" : "Mascarpone Fabioli",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 32.0000,
+    "UnitsInStock" : 9,
+    "UnitsOnOrder" : 40,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 33,
+    "ProductName" : "Geitost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "500 g",
+    "UnitPrice" : 2.5000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 34,
+    "ProductName" : "Sasquatch Ale",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 111,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 35,
+    "ProductName" : "Steeleye Stout",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 36,
+    "ProductName" : "Inlagd Sill",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 250 g  jars",
+    "UnitPrice" : 19.0000,
+    "UnitsInStock" : 112,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 37,
+    "ProductName" : "Gravad lax",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 500 g pkgs.",
+    "UnitPrice" : 26.0000,
+    "UnitsInStock" : 11,
+    "UnitsOnOrder" : 50,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 38,
+    "ProductName" : "Côte de Blaye",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "12 - 75 cl bottles",
+    "UnitPrice" : 263.5000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 39,
+    "ProductName" : "Chartreuse verte",
+    "SupplierID" : 18,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "750 cc per bottle",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 69,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 40,
+    "ProductName" : "Boston Crab Meat",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 4 oz tins",
+    "UnitPrice" : 18.4000,
+    "UnitsInStock" : 123,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 41,
+    "ProductName" : "Jack's New England Clam Chowder",
+    "SupplierID" : 19,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "12 - 12 oz cans",
+    "UnitPrice" : 9.6500,
+    "UnitsInStock" : 85,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 42,
+    "ProductName" : "Singaporean Hokkien Fried Mee",
+    "SupplierID" : 20,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "32 - 1 kg pkgs.",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 43,
+    "ProductName" : "Ipoh Coffee",
+    "SupplierID" : 20,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "16 - 500 g tins",
+    "UnitPrice" : 46.0000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 44,
+    "ProductName" : "Gula Malacca",
+    "SupplierID" : 20,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "20 - 2 kg bags",
+    "UnitPrice" : 19.4500,
+    "UnitsInStock" : 27,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 45,
+    "ProductName" : "Rogede sild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "1k pkg.",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 5,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 46,
+    "ProductName" : "Spegesild",
+    "SupplierID" : 21,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "4 - 450 g glasses",
+    "UnitPrice" : 12.0000,
+    "UnitsInStock" : 95,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 47,
+    "ProductName" : "Zaanse koeken",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 - 4 oz boxes",
+    "UnitPrice" : 9.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 48,
+    "ProductName" : "Chocolade",
+    "SupplierID" : 22,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 pkgs.",
+    "UnitPrice" : 12.7500,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 70,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 49,
+    "ProductName" : "Maxilaku",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "24 - 50 g pkgs.",
+    "UnitPrice" : 20.0000,
+    "UnitsInStock" : 10,
+    "UnitsOnOrder" : 60,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 50,
+    "ProductName" : "Valkoinen suklaa",
+    "SupplierID" : 23,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "12 - 100 g bars",
+    "UnitPrice" : 16.2500,
+    "UnitsInStock" : 65,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 51,
+    "ProductName" : "Manjimup Dried Apples",
+    "SupplierID" : 24,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "50 - 300 g pkgs.",
+    "UnitPrice" : 53.0000,
+    "UnitsInStock" : 20,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 52,
+    "ProductName" : "Filo Mix",
+    "SupplierID" : 24,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "16 - 2 kg boxes",
+    "UnitPrice" : 7.0000,
+    "UnitsInStock" : 38,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 53,
+    "ProductName" : "Perth Pasties",
+    "SupplierID" : 24,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "48 pieces",
+    "UnitPrice" : 32.8000,
+    "UnitsInStock" : 0,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : true,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 54,
+    "ProductName" : "Tourtière",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "16 pies",
+    "UnitPrice" : 7.4500,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 55,
+    "ProductName" : "Pâté chinois",
+    "SupplierID" : 25,
+    "CategoryID" : 6,
+    "QuantityPerUnit" : "24 boxes x 2 pies",
+    "UnitPrice" : 24.0000,
+    "UnitsInStock" : 115,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 6,
+        "CategoryName" : "Meat/Poultry",
+        "Description" : "Prepared meats"
+    }
+}, {
+    "ProductID" : 56,
+    "ProductName" : "Gnocchi di nonna Alice",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 38.0000,
+    "UnitsInStock" : 21,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 57,
+    "ProductName" : "Ravioli Angelo",
+    "SupplierID" : 26,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "24 - 250 g pkgs.",
+    "UnitPrice" : 19.5000,
+    "UnitsInStock" : 36,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 58,
+    "ProductName" : "Escargots de Bourgogne",
+    "SupplierID" : 27,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 pieces",
+    "UnitPrice" : 13.2500,
+    "UnitsInStock" : 62,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 59,
+    "ProductName" : "Raclette Courdavault",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 55.0000,
+    "UnitsInStock" : 79,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 60,
+    "ProductName" : "Camembert Pierrot",
+    "SupplierID" : 28,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "15 - 300 g rounds",
+    "UnitPrice" : 34.0000,
+    "UnitsInStock" : 19,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 61,
+    "ProductName" : "Sirop d'érable",
+    "SupplierID" : 29,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 500 ml bottles",
+    "UnitPrice" : 28.5000,
+    "UnitsInStock" : 113,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 62,
+    "ProductName" : "Tarte au sucre",
+    "SupplierID" : 29,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "48 pies",
+    "UnitPrice" : 49.3000,
+    "UnitsInStock" : 17,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 63,
+    "ProductName" : "Vegie-spread",
+    "SupplierID" : 7,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "15 - 625 g jars",
+    "UnitPrice" : 43.9000,
+    "UnitsInStock" : 24,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 64,
+    "ProductName" : "Wimmers gute Semmelknödel",
+    "SupplierID" : 12,
+    "CategoryID" : 5,
+    "QuantityPerUnit" : "20 bags x 4 pieces",
+    "UnitPrice" : 33.2500,
+    "UnitsInStock" : 22,
+    "UnitsOnOrder" : 80,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 5,
+        "CategoryName" : "Grains/Cereals",
+        "Description" : "Breads, crackers, pasta, and cereal"
+    }
+}, {
+    "ProductID" : 65,
+    "ProductName" : "Louisiana Fiery Hot Pepper Sauce",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "32 - 8 oz bottles",
+    "UnitPrice" : 21.0500,
+    "UnitsInStock" : 76,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 66,
+    "ProductName" : "Louisiana Hot Spiced Okra",
+    "SupplierID" : 2,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "24 - 8 oz jars",
+    "UnitPrice" : 17.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 100,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}, {
+    "ProductID" : 67,
+    "ProductName" : "Laughing Lumberjack Lager",
+    "SupplierID" : 16,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 12 oz bottles",
+    "UnitPrice" : 14.0000,
+    "UnitsInStock" : 52,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 10,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 68,
+    "ProductName" : "Scottish Longbreads",
+    "SupplierID" : 8,
+    "CategoryID" : 3,
+    "QuantityPerUnit" : "10 boxes x 8 pieces",
+    "UnitPrice" : 12.5000,
+    "UnitsInStock" : 6,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 3,
+        "CategoryName" : "Confections",
+        "Description" : "Desserts, candies, and sweet breads"
+    }
+}, {
+    "ProductID" : 69,
+    "ProductName" : "Gudbrandsdalsost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 kg pkg.",
+    "UnitPrice" : 36.0000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 70,
+    "ProductName" : "Outback Lager",
+    "SupplierID" : 7,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 355 ml bottles",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 15,
+    "UnitsOnOrder" : 10,
+    "ReorderLevel" : 30,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 71,
+    "ProductName" : "Flotemysost",
+    "SupplierID" : 15,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "10 - 500 g pkgs.",
+    "UnitPrice" : 21.5000,
+    "UnitsInStock" : 26,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 72,
+    "ProductName" : "Mozzarella di Giovanni",
+    "SupplierID" : 14,
+    "CategoryID" : 4,
+    "QuantityPerUnit" : "24 - 200 g pkgs.",
+    "UnitPrice" : 34.8000,
+    "UnitsInStock" : 14,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 0,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 4,
+        "CategoryName" : "Dairy Products",
+        "Description" : "Cheeses"
+    }
+}, {
+    "ProductID" : 73,
+    "ProductName" : "Röd Kaviar",
+    "SupplierID" : 17,
+    "CategoryID" : 8,
+    "QuantityPerUnit" : "24 - 150 g jars",
+    "UnitPrice" : 15.0000,
+    "UnitsInStock" : 101,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 8,
+        "CategoryName" : "Seafood",
+        "Description" : "Seaweed and fish"
+    }
+}, {
+    "ProductID" : 74,
+    "ProductName" : "Longlife Tofu",
+    "SupplierID" : 4,
+    "CategoryID" : 7,
+    "QuantityPerUnit" : "5 kg pkg.",
+    "UnitPrice" : 10.0000,
+    "UnitsInStock" : 4,
+    "UnitsOnOrder" : 20,
+    "ReorderLevel" : 5,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 7,
+        "CategoryName" : "Produce",
+        "Description" : "Dried fruit and bean curd"
+    }
+}, {
+    "ProductID" : 75,
+    "ProductName" : "Rhönbräu Klosterbier",
+    "SupplierID" : 12,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "24 - 0.5 l bottles",
+    "UnitPrice" : 7.7500,
+    "UnitsInStock" : 125,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 25,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 76,
+    "ProductName" : "Lakkalikööri",
+    "SupplierID" : 23,
+    "CategoryID" : 1,
+    "QuantityPerUnit" : "500 ml",
+    "UnitPrice" : 18.0000,
+    "UnitsInStock" : 57,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 20,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 1,
+        "CategoryName" : "Beverages",
+        "Description" : "Soft drinks, coffees, teas, beers, and ales"
+    }
+}, {
+    "ProductID" : 77,
+    "ProductName" : "Original Frankfurter grüne Soße",
+    "SupplierID" : 12,
+    "CategoryID" : 2,
+    "QuantityPerUnit" : "12 boxes",
+    "UnitPrice" : 13.0000,
+    "UnitsInStock" : 32,
+    "UnitsOnOrder" : 0,
+    "ReorderLevel" : 15,
+    "Discontinued" : false,
+    "Category" : {
+        "CategoryID" : 2,
+        "CategoryName" : "Condiments",
+        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
+    }
+}]
diff --git a/vue-options-api-demos/tooltip/svg/main.js b/vue-options-api-demos/tooltip/svg/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/tooltip/svg/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/tooltip/svg/main.vue b/vue-options-api-demos/tooltip/svg/main.vue
new file mode 100644
index 00000000..f2aa8650
--- /dev/null
+++ b/vue-options-api-demos/tooltip/svg/main.vue
@@ -0,0 +1,303 @@
+<template>
+  <div>
+    <Tooltip
+      :anchor-element="'pointer'"
+      :position="'bottom'"
+      :parent-title="true"
+    >
+      <div className="d-flex justify-content-center">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="323.875"
+          height="376.779"
+          viewBox="0 0 323.875 376.779"
+        >
+          <title>Kendo Vue Kendoka</title>
+          <g transform="translate(-141.247 -82.08)">
+            <g transform="translate(319.08 190.342)">
+              <path
+                d="M597.492,435.4l-51.33,6.138-10.133-77.794a35.964,35.964,0,0,1,35.519-41.6h0a35.964,35.964,0,0,1,35.519,41.6Z"
+                transform="translate(-535.575 -322.14)"
+                fill="#67c08b"
+              />
+            </g>
+            <g transform="translate(362.576 155.231)">
+              <path
+                d="M677.155,322.79a53.859,53.859,0,0,1-12.4-1.479,65.193,65.193,0,0,1-28.325-15.171A13.293,13.293,0,1,1,654.2,286.367c9.89,8.89,22.1,12.119,31.1,8.228,4.243-1.834,7.948-5.353,11.015-10.46,5.7-9.5,4.2-19.621,3.286-23.532a13.294,13.294,0,0,1,25.892-6.04c1.648,7.066,4.326,25.427-6.384,43.26-5.985,9.969-13.811,17.1-23.26,21.179A46.934,46.934,0,0,1,677.155,322.79Z"
+                transform="translate(-632.022 -244.286)"
+                fill="#0c2749"
+              />
+            </g>
+            <g transform="translate(425.599 126.921)">
+              <path
+                d="M776.018,184.509,771.77,238.22l36.471-2.489L793.76,181.51Z"
+                transform="translate(-771.77 -181.51)"
+                fill="#67c08b"
+              />
+            </g>
+            <g transform="translate(397.945 113.21)">
+              <path
+                d="M721.769,178.735l-7.621-5.709a9.239,9.239,0,0,1-3.545-9.069l2.084-11.243a1.963,1.963,0,0,1,3.17-1.164l1.046.852a1.962,1.962,0,0,1,.694,1.2Z"
+                transform="translate(-710.45 -151.107)"
+                fill="#67c08b"
+              />
+            </g>
+            <g transform="translate(380.163 376.465)">
+              <path
+                d="M678.991,817.1a7.98,7.98,0,0,1-7.1-11.59l33.674-66.294a7.976,7.976,0,1,1,14.223,7.224l-33.674,66.294A7.977,7.977,0,0,1,678.991,817.1Z"
+                transform="translate(-671.02 -734.851)"
+                fill="#fab16a"
+              />
+            </g>
+            <g transform="translate(380.5 442.619)">
+              <path
+                d="M671.783,889.186a8.121,8.121,0,0,0,8.208,8.6l3.085-.041,27.78-.347a5.013,5.013,0,0,0,.708-9.967l-14.779-2.58-15.256-3.134a8.116,8.116,0,0,0-9.746,7.473Z"
+                transform="translate(-671.769 -881.543)"
+                fill="#fab16a"
+              />
+            </g>
+            <g transform="translate(169.274 371.031)">
+              <path
+                d="M211.367,810.483a7.976,7.976,0,0,1-5.98-13.251L268.623,725.5a7.976,7.976,0,1,1,11.966,10.549l-63.236,71.728A7.956,7.956,0,0,1,211.367,810.483Z"
+                transform="translate(-203.394 -722.802)"
+                fill="#fab16a"
+              />
+            </g>
+            <g transform="translate(141.247 442.619)">
+              <path
+                d="M185.273,889.186a8.121,8.121,0,0,1-8.208,8.6l-3.085-.041-27.78-.347a5.013,5.013,0,0,1-.708-9.967l14.779-2.58,15.257-3.134a8.116,8.116,0,0,1,9.746,7.473Z"
+                transform="translate(-141.247 -881.543)"
+                fill="#fab16a"
+              />
+            </g>
+            <g transform="translate(142.352 303.513)">
+              <path
+                d="M370.152,590.478l-45.513,51.858a2.278,2.278,0,0,0-.248.343l-36.1,60.7a2.3,2.3,0,0,1-1.962,1.127l-140.308,1.069a2.3,2.3,0,0,1-1.642-3.932L218.75,627.5a2.286,2.286,0,0,1,.64-.451l113.231-53.738a2.3,2.3,0,0,1,1.826-.063l34.815,13.574A2.3,2.3,0,0,1,370.152,590.478Z"
+                transform="translate(-143.697 -573.087)"
+                fill="#0b0204"
+              />
+            </g>
+            <g transform="translate(332.389 292.394)">
+              <path
+                d="M606.939,549l74.88,65.626a2.3,2.3,0,0,1,.667,2.458L658.035,691a2.3,2.3,0,0,1-2.2,1.578l-88.455-.478a2.3,2.3,0,0,1-2.133-3.139L589.824,625.7a2.286,2.286,0,0,0,.135-1.155l-9.425-67.331a2.305,2.305,0,0,1,1.678-2.543l22.608-6.156A2.3,2.3,0,0,1,606.939,549Z"
+                transform="translate(-565.087 -548.431)"
+                fill="#0b0204"
+              />
+            </g>
+            <g transform="translate(306.261 168.834)">
+              <path
+                d="M526.677,296.205,507.15,315.732l16.74,6.7,20.641-21.2V274.45H526.677Z"
+                transform="translate(-507.15 -274.45)"
+                fill="#0b0204"
+              />
+            </g>
+            <g transform="translate(324.652 279.256)">
+              <path
+                d="M547.93,525.221l60.251-5.921-2.634,21.3a27.863,27.863,0,0,1-26.878,24.434h0a27.857,27.857,0,0,1-28.326-23.717Z"
+                transform="translate(-547.93 -519.3)"
+                fill="#0c2749"
+              />
+            </g>
+            <g transform="translate(280.722 288.616)">
+              <g transform="translate(81.439)">
+                <path
+                  d="M694.856,572.089l-31.1,26.833a1.92,1.92,0,0,1-2.859-.4l-29.48-44.9a1.924,1.924,0,0,1,.586-2.683l16.961-10.589a1.921,1.921,0,0,1,2.07.023l43.619,28.66A1.923,1.923,0,0,1,694.856,572.089Z"
+                  transform="translate(-631.102 -540.054)"
+                  fill="#0c2749"
+                />
+              </g>
+              <g transform="translate(0 5.503)">
+                <path
+                  d="M463.832,590.568l-12.686-11.55a1.921,1.921,0,0,1,.465-3.152l48.913-23.424a1.926,1.926,0,0,1,2.178.365l12.83,12.636a1.922,1.922,0,0,1-.55,3.116L465.93,590.9A1.934,1.934,0,0,1,463.832,590.568Z"
+                  transform="translate(-450.519 -552.255)"
+                  fill="#0c2749"
+                />
+              </g>
+              <g transform="translate(25.152 6.229)">
+                <path
+                  d="M507.021,590.208,540.989,563.4a1.879,1.879,0,0,1,.631-.329l30.134-9.119a1.917,1.917,0,0,1,2.462,1.637l5.592,52.864a1.918,1.918,0,0,1-2.363,2.065l-69.694-16.934A1.923,1.923,0,0,1,507.021,590.208Z"
+                  transform="translate(-506.291 -553.867)"
+                  fill="#0c2749"
+                />
+              </g>
+            </g>
+            <g transform="translate(325.509 82.08)">
+              <g transform="translate(39.176)">
+                <path
+                  d="M636.7,134.948l7.2-21.485a11.852,11.852,0,0,1,10.9-8.086h0a11.857,11.857,0,0,0,11.5-11.09l.789-12.208,6.638,1.8L671.818,99.9a11.861,11.861,0,0,1-11.973,10.454l-2.214-.036a11.856,11.856,0,0,0-10.544,6.066Z"
+                  transform="translate(-636.7 -82.08)"
+                  fill="#67c08b"
+                />
+              </g>
+              <g transform="translate(39.289 13.254)">
+                <path
+                  d="M636.95,150.755l12.65-14.463a11.874,11.874,0,0,1,9.651-4.032l5.29.325a11.855,11.855,0,0,0,11.838-7.712l4.974-13.4,7.144,2.471-7.689,17.782A11.86,11.86,0,0,1,668,138.718l-7.256-1.191a11.86,11.86,0,0,0-9.015,2.2Z"
+                  transform="translate(-636.95 -111.47)"
+                  fill="#67c08b"
+                />
+              </g>
+              <g transform="translate(11.996 79.498)">
+                <path
+                  d="M576.43,287.367,603.209,310.8l32.358-12.83-18.179-14.544a11.018,11.018,0,0,1-4.135-8.6V258.36H576.43Z"
+                  transform="translate(-576.43 -258.36)"
+                  fill="#0b0204"
+                />
+              </g>
+              <g transform="translate(0.004 41.003)">
+                <path
+                  d="M549.84,200.888v28.452A11.159,11.159,0,0,0,560.993,240.5h10.043a27.9,27.9,0,0,0,27.9-27.9V184.153A11.156,11.156,0,0,0,587.772,173H577.729A27.882,27.882,0,0,0,549.84,200.888Z"
+                  transform="translate(-549.84 -173)"
+                  fill="#0c2749"
+                />
+              </g>
+              <g transform="translate(1.592 56.616)">
+                <path
+                  d="M588.117,230.277v-1.79A20.866,20.866,0,0,0,567.25,207.62h0a20.756,20.756,0,0,0-12.74,4.347,27.875,27.875,0,0,0-1.15,7.928V245.84a20.773,20.773,0,0,0,13.89,5.3h0A20.862,20.862,0,0,0,588.117,230.277Z"
+                  transform="translate(-553.36 -207.62)"
+                  fill="#fab16a"
+                />
+              </g>
+              <g transform="translate(0.004 44.868)">
+                <path
+                  d="M587.776,209.219a27.9,27.9,0,0,0-24.222-27.649,27.88,27.88,0,0,0-13.714,24.019v28.452a11.057,11.057,0,0,0,.072,1.227,27.89,27.89,0,0,0,37.864-26.048Z"
+                  transform="translate(-549.84 -181.57)"
+                  fill="none"
+                />
+              </g>
+              <g transform="translate(3.797 66.659)">
+                <path
+                  d="M558.25,247.185h10.043v-17.3Z"
+                  transform="translate(-558.25 -229.89)"
+                  fill="#e07e27"
+                />
+              </g>
+              <g transform="translate(1.339 62.756)">
+                <rect width="46.924" height="2.232" fill="#0c2749" />
+              </g>
+              <g transform="translate(0 72.799)">
+                <rect width="48.263" height="2.232" fill="#0c2749" />
+              </g>
+              <g transform="translate(0 92.881)">
+                <rect width="38.775" height="2.232" fill="#0c2749" />
+              </g>
+              <g transform="translate(0 82.838)">
+                <rect width="48.263" height="2.232" fill="#0c2749" />
+              </g>
+              <g transform="translate(24.353 67.457)">
+                <path
+                  d="M607.74,235.015h-2.286a1.622,1.622,0,0,1-1.623-1.624v-.108a1.622,1.622,0,0,1,1.623-1.624h2.286a1.623,1.623,0,0,1,1.624,1.624v.108A1.628,1.628,0,0,1,607.74,235.015Z"
+                  transform="translate(-603.83 -231.66)"
+                  fill="#fff"
+                />
+              </g>
+              <g transform="translate(1.592 67.457)">
+                <path
+                  d="M557.27,235.015h-2.286a1.623,1.623,0,0,1-1.624-1.624v-.108a1.623,1.623,0,0,1,1.624-1.624h2.286a1.622,1.622,0,0,1,1.623,1.624v.108A1.628,1.628,0,0,1,557.27,235.015Z"
+                  transform="translate(-553.36 -231.66)"
+                  fill="#fff"
+                />
+              </g>
+              <g transform="translate(23.433 67.394)">
+                <circle cx="1.7" cy="1.7" r="1.7" fill="#0b0204" />
+              </g>
+              <g transform="translate(1.024 67.394)">
+                <circle cx="1.7" cy="1.7" r="1.7" fill="#0b0204" />
+              </g>
+            </g>
+            <g transform="translate(182.684 109.066)">
+              <g transform="translate(0.185 11.599)">
+                <path
+                  d="M445.54,169.733l-37.548-2.093L308.172,169.8l-72.215,1.741a2.477,2.477,0,0,0-2.417,2.476h0a2.481,2.481,0,0,0,2.408,2.476l72.229,2.007L408,180.565l37.544-2.133Z"
+                  transform="translate(-233.54 -167.64)"
+                  fill="#fab16a"
+                />
+              </g>
+              <g transform="translate(68.954 13.209)">
+                <path
+                  d="M386.035,179.251l0-6.269a1.772,1.772,0,0,1,1.768-1.772h4.113a1.772,1.772,0,0,1,1.772,1.768l0,6.269a1.772,1.772,0,0,1-1.768,1.772h-4.113A1.766,1.766,0,0,1,386.035,179.251Z"
+                  transform="translate(-386.03 -171.21)"
+                  fill="#0b0204"
+                />
+              </g>
+              <g transform="translate(0 14.675)">
+                <path
+                  d="M233.13,179.475v-3.5a1.51,1.51,0,0,1,1.506-1.511h4.158a1.51,1.51,0,0,1,1.511,1.506v3.5a1.51,1.51,0,0,1-1.506,1.511h-4.158A1.5,1.5,0,0,1,233.13,179.475Z"
+                  transform="translate(-233.13 -174.46)"
+                  fill="#0b0204"
+                />
+              </g>
+              <g transform="translate(211.964 10.814)">
+                <path
+                  d="M773.614,180.273l-.009-14.373-70.465,2.855,0,8.74Z"
+                  transform="translate(-703.14 -165.9)"
+                  fill="#0b0204"
+                />
+              </g>
+              <g transform="translate(207.17 0)">
+                <path
+                  d="M692.528,177.128l-.018-33.774a1.432,1.432,0,0,1,1.434-1.434h3.333a1.432,1.432,0,0,1,1.434,1.434l.018,33.774a1.432,1.432,0,0,1-1.434,1.434h-3.333A1.432,1.432,0,0,1,692.528,177.128Z"
+                  transform="translate(-692.51 -141.92)"
+                  fill="#0b0204"
+                />
+              </g>
+            </g>
+            <g transform="translate(427.181 110.248)">
+              <path
+                d="M792.638,144.553l-12.086.834a5.659,5.659,0,0,0-4.889,7.685l1.493,3.869A6.5,6.5,0,0,0,784,161.054l8.9-1.073a6.5,6.5,0,0,0,5.723-6.327l.063-3.342A5.658,5.658,0,0,0,792.638,144.553Z"
+                transform="translate(-775.279 -144.539)"
+                fill="#67c08b"
+              />
+            </g>
+            <g transform="translate(423.489 115.83)">
+              <path
+                d="M782.826,181.686l-8.875-3.454a9.227,9.227,0,0,1-5.845-7.788L767.1,159.056a1.961,1.961,0,0,1,2.742-1.971l1.236.541a1.978,1.978,0,0,1,.992.97Z"
+                transform="translate(-767.092 -156.916)"
+                fill="#67c08b"
+              />
+            </g>
+            <g transform="translate(315.888 164.902)">
+              <path
+                d="M569.59,347.564a42.836,42.836,0,0,1-20.3-4.949,45.247,45.247,0,0,1-19.566-21.043,13.294,13.294,0,0,1,24.144-11.134,18.782,18.782,0,0,0,7.893,8.7c5.906,3.135,12.226,1.552,16,.607a32.436,32.436,0,0,0,14.089-7.944c11.883-10.762,13.819-26.909,14.1-33.351a13.294,13.294,0,1,1,26.562,1.158,84.847,84.847,0,0,1-3.716,21.332A67.791,67.791,0,0,1,609.7,331.5a59.127,59.127,0,0,1-25.454,14.025A58.522,58.522,0,0,1,569.59,347.564Z"
+                transform="translate(-528.496 -265.731)"
+                fill="#0a183d"
+              />
+            </g>
+            <g transform="translate(387.275 110.382)">
+              <g transform="translate(16.118 0)">
+                <path
+                  d="M741.508,147.459l-12.181-2.5a5.655,5.655,0,0,0-6.792,5.75l.762,20.835,16.565,1.3,5.89-18.093A5.656,5.656,0,0,0,741.508,147.459Z"
+                  transform="translate(-722.531 -144.837)"
+                  fill="#67c08b"
+                />
+              </g>
+              <g transform="translate(0 22.32)">
+                <path
+                  d="M703.4,194.33,686.79,245.579l36.051,6.057-1.484-56.1Z"
+                  transform="translate(-686.79 -194.33)"
+                  fill="#67c08b"
+                />
+              </g>
+            </g>
+            <g transform="translate(306.261 190.59)">
+              <path
+                d="M526.677,322.69,507.15,342.217l16.74,6.7,20.641-21.2Z"
+                transform="translate(-507.15 -322.69)"
+                fill="#0b0204"
+              />
+            </g>
+          </g>
+        </svg>
+      </div>
+    </Tooltip>
+  </div>
+</template>
+
+<script>
+import { Tooltip } from '@progress/kendo-vue-tooltip';
+
+export default {
+  components: {
+    Tooltip,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/tooltip/templates/main.js b/vue-options-api-demos/tooltip/templates/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/tooltip/templates/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/tooltip/templates/main.vue b/vue-options-api-demos/tooltip/templates/main.vue
new file mode 100644
index 00000000..e4af282d
--- /dev/null
+++ b/vue-options-api-demos/tooltip/templates/main.vue
@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <Tooltip
+      :content="'myTooltipTemplate'"
+      :anchor-element="'target'"
+      :position="'bottom'"
+    >
+      <p>
+        <strong>Wikipedia</strong> is a multilingual,
+        <a
+          title="https://en.wikipedia.org/wiki/Web_application"
+          href="https://en.wikipedia.org/wiki/Web_application"
+        >
+          web-based
+        </a>
+        ,
+        <a
+          title="https://en.wikipedia.org/wiki/Free_content"
+          href="https://en.wikipedia.org/wiki/Free_content"
+        >
+          free-content
+        </a>
+        <a
+          title="https://en.wikipedia.org/wiki/Encyclopedia"
+          href="https://en.wikipedia.org/wiki/Encyclopedia"
+        >
+          encyclopedia
+        </a>
+        &nbsp;project supported by the
+        <a
+          title="https://en.wikipedia.org/wiki/Wikimedia_Foundation"
+          href="https://en.wikipedia.org/wiki/Wikimedia_Foundation"
+        >
+          Wikimedia Foundation&nbsp;
+        </a>
+        and based on a model of openly editable content. Wikipedia is the
+        largest and most popular general &nbsp;
+        <a
+          title="https://en.wikipedia.org/wiki/Reference_work"
+          href="https://en.wikipedia.org/wiki/Reference_work"
+        >
+          reference work
+        </a>
+        &nbsp;on the Internet, and is named as one of the most popular websites.
+      </p>
+
+      <p>
+        - From the Wikipedia article &nbsp;on{{ ' ' }}
+        <a title="https://en.wikipedia.org/" href="https://en.wikipedia.org/">
+          Wikipedia
+        </a>
+      </p>
+      <template v-slot:myTooltipTemplate="{ props }">
+        <a>
+          A template for: <strong>{{ props.title }}</strong>
+        </a>
+      </template>
+    </Tooltip>
+  </div>
+</template>
+
+<script>
+import { Tooltip } from '@progress/kendo-vue-tooltip';
+
+export default {
+  components: {
+    Tooltip,
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treelist/aggregates/data.js b/vue-options-api-demos/treelist/aggregates/data.js
new file mode 100644
index 00000000..f66aec4d
--- /dev/null
+++ b/vue-options-api-demos/treelist/aggregates/data.js
@@ -0,0 +1,1150 @@
+
+const employees = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2,
+        "employees": [
+            {
+                "id": 2,
+                "name": "Guy Wooten",
+                "reportsTo": 1,
+                "phone": "(438) 738-4935",
+                "extension": 1155,
+                "hireDate": new Date(2010, 3, 3),
+                "fullTime": true,
+                "position": "Chief Technical Officer",
+                "timeInPosition": 1,
+                "employees": [
+                    {
+                        "id": 32,
+                        "name": "Buffy Weber",
+                        "reportsTo": 2,
+                        "phone": "(699) 838-6121",
+                        "extension": 8933,
+                        "hireDate": new Date(2011, 7, 11),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 11,
+                                "name": "Hyacinth Hood",
+                                "reportsTo": 32,
+                                "phone": "(889) 345-2438",
+                                "extension": 8564,
+                                "hireDate": new Date(2014, 2, 3),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 60,
+                                        "name": "Akeem Carr",
+                                        "reportsTo": 11,
+                                        "phone": "(738) 136-2814",
+                                        "extension": 9353,
+                                        "hireDate": new Date(2011, 4, 21),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 78,
+                                        "name": "Rinah Simon",
+                                        "reportsTo": 11,
+                                        "phone": "(285) 912-5271",
+                                        "extension": 7795,
+                                        "hireDate": new Date(2012, 10, 11),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 42,
+                                "name": "Gage Daniels",
+                                "reportsTo": 32,
+                                "phone": "(107) 290-6260",
+                                "extension": 896,
+                                "hireDate": new Date(2013, 5, 16),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 5
+                            },
+                            {
+                                "id": 43,
+                                "name": "Constance Vazquez",
+                                "reportsTo": 32,
+                                "phone": "(800) 301-1978",
+                                "extension": 5141,
+                                "hireDate": new Date(2011, 6, 7),
+                                "fullTime": true,
+                                "position": "Director, Engineering",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 46,
+                                        "name": "Darrel Solis",
+                                        "reportsTo": 43,
+                                        "phone": "(327) 977-0216",
+                                        "extension": 7779,
+                                        "hireDate": new Date(2015, 4, 25),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 47,
+                                                "name": "Brian Yang",
+                                                "reportsTo": 46,
+                                                "phone": "(565) 146-5435",
+                                                "extension": 3885,
+                                                "hireDate": new Date(2012, 9, 27),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 50,
+                                                "name": "Lillian Bradshaw",
+                                                "reportsTo": 46,
+                                                "phone": "(323) 509-3479",
+                                                "extension": 5426,
+                                                "hireDate": new Date(2014, 5, 10),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 51,
+                                                "name": "Christian Palmer",
+                                                "reportsTo": 46,
+                                                "phone": "(490) 421-8718",
+                                                "extension": 3706,
+                                                "hireDate": new Date(2012, 12, 27),
+                                                "fullTime": false,
+                                                "position": "Technical Lead",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 55,
+                                                "name": "Summer Mosley",
+                                                "reportsTo": 46,
+                                                "phone": "(784) 962-2301",
+                                                "extension": 5492,
+                                                "hireDate": new Date(2010, 3, 2),
+                                                "fullTime": true,
+                                                "position": "QA Engineer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 56,
+                                                "name": "Barry Ayers",
+                                                "reportsTo": 46,
+                                                "phone": "(452) 373-9227",
+                                                "extension": 1308,
+                                                "hireDate": new Date(2011, 10, 11),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 59,
+                                                "name": "Keiko Espinoza",
+                                                "reportsTo": 46,
+                                                "phone": "(226) 600-5305",
+                                                "extension": 9363,
+                                                "hireDate": new Date(2011, 9, 18),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 61,
+                                                "name": "Candace Pickett",
+                                                "reportsTo": 46,
+                                                "phone": "(120) 117-7475",
+                                                "extension": 5178,
+                                                "hireDate": new Date(2010, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 63,
+                                        "name": "Mia Caldwell",
+                                        "reportsTo": 43,
+                                        "phone": "(848) 636-6470",
+                                        "extension": 6368,
+                                        "hireDate": new Date(2012, 10, 7),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 65,
+                                                "name": "Thomas Terry",
+                                                "reportsTo": 63,
+                                                "phone": "(764) 831-4248",
+                                                "extension": 3574,
+                                                "hireDate": new Date(2015, 6, 15),
+                                                "fullTime": false,
+                                                "position": "Senior Enterprise Support Officer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 67,
+                                                "name": "Ruth Downs",
+                                                "reportsTo": 63,
+                                                "phone": "(138) 991-1440",
+                                                "extension": 8067,
+                                                "hireDate": new Date(2013, 7, 13),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 70,
+                                                "name": "Yasir Wilder",
+                                                "reportsTo": 63,
+                                                "phone": "(759) 701-8665",
+                                                "extension": 8350,
+                                                "hireDate": new Date(2010, 11, 8),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 71,
+                                                "name": "Flavia Short",
+                                                "reportsTo": 63,
+                                                "phone": "(370) 133-9238",
+                                                "extension": 6390,
+                                                "hireDate": new Date(2013, 2, 21),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 74,
+                                                "name": "Aaron Roach",
+                                                "reportsTo": 63,
+                                                "phone": "(958) 717-9230",
+                                                "extension": 4899,
+                                                "hireDate": new Date(2011, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 75,
+                                                "name": "Eric Russell",
+                                                "reportsTo": 63,
+                                                "phone": "(516) 575-8505",
+                                                "extension": 2224,
+                                                "hireDate": new Date(2012, 10, 28),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 76,
+                                                "name": "Cheyenne Olson",
+                                                "reportsTo": 63,
+                                                "phone": "(241) 645-0257",
+                                                "extension": 9181,
+                                                "hireDate": new Date(2015, 5, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 77,
+                                                "name": "Shaine Avila",
+                                                "reportsTo": 63,
+                                                "phone": "(844) 435-1360",
+                                                "extension": 3374,
+                                                "hireDate": new Date(2010, 1, 31),
+                                                "fullTime": true,
+                                                "position": "UI Designer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 81,
+                                                "name": "Chantale Long",
+                                                "reportsTo": 63,
+                                                "phone": "(252) 419-6891",
+                                                "extension": 7868,
+                                                "hireDate": new Date(2010, 6, 17),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 83,
+                                                "name": "Dane Cruz",
+                                                "reportsTo": 63,
+                                                "phone": "(946) 701-6165",
+                                                "extension": 3828,
+                                                "hireDate": new Date(2014, 10, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 84,
+                                                "name": "Regan Patterson",
+                                                "reportsTo": 63,
+                                                "phone": "(265) 946-1765",
+                                                "extension": 6955,
+                                                "hireDate": new Date(2012, 3, 1),
+                                                "fullTime": true,
+                                                "position": "Technical Writer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 85,
+                                                "name": "Drew Mckay",
+                                                "reportsTo": 63,
+                                                "phone": "(327) 293-0162",
+                                                "extension": 6904,
+                                                "hireDate": new Date(2011, 3, 25),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 88,
+                                                "name": "Bevis Miller",
+                                                "reportsTo": 63,
+                                                "phone": "(525) 557-0169",
+                                                "extension": 6978,
+                                                "hireDate": new Date(2011, 4, 19),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 89,
+                                                "name": "Bruce Mccarty",
+                                                "reportsTo": 63,
+                                                "phone": "(936) 777-8730",
+                                                "extension": 6552,
+                                                "hireDate": new Date(2014, 3, 28),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 5
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 90,
+                                        "name": "Ocean Blair",
+                                        "reportsTo": 43,
+                                        "phone": "(343) 586-6614",
+                                        "extension": 1424,
+                                        "hireDate": new Date(2011, 4, 27),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 91,
+                                                "name": "Guinevere Osborn",
+                                                "reportsTo": 90,
+                                                "phone": "(424) 741-0006",
+                                                "extension": 3166,
+                                                "hireDate": new Date(2014, 11, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 92,
+                                                "name": "Olga Strong",
+                                                "reportsTo": 90,
+                                                "phone": "(949) 417-1168",
+                                                "extension": 4568,
+                                                "hireDate": new Date(2015, 5, 28),
+                                                "fullTime": true,
+                                                "position": "Graphic Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 93,
+                                                "name": "Robert Orr",
+                                                "reportsTo": 90,
+                                                "phone": "(977) 341-3721",
+                                                "extension": 9241,
+                                                "hireDate": new Date(2012, 8, 20),
+                                                "fullTime": false,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 95,
+                                                "name": "Odette Sears",
+                                                "reportsTo": 90,
+                                                "phone": "(264) 818-6576",
+                                                "extension": 1914,
+                                                "hireDate": new Date(2013, 7, 5),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 45,
+                                "name": "Zelda Medina",
+                                "reportsTo": 32,
+                                "phone": "(563) 359-6023",
+                                "extension": 2600,
+                                "hireDate": new Date(2012, 11, 6),
+                                "fullTime": true,
+                                "position": "QA Architect",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    },
+                    {
+                        "id": 52,
+                        "name": "Skyler Cleveland",
+                        "reportsTo": 2,
+                        "phone": "(217) 280-5300",
+                        "extension": 9655,
+                        "hireDate": new Date(2014, 11, 10),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 40,
+                                "name": "Karleigh Garza",
+                                "reportsTo": 52,
+                                "phone": "(370) 983-8796",
+                                "extension": 4044,
+                                "hireDate": new Date(2014, 3, 10),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 49,
+                                        "name": "Elmo Tyson",
+                                        "reportsTo": 40,
+                                        "phone": "(344) 496-9555",
+                                        "extension": 6950,
+                                        "hireDate": new Date(2014, 9, 18),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 72,
+                                        "name": "Stacey Lynn",
+                                        "reportsTo": 40,
+                                        "phone": "(140) 772-7509",
+                                        "extension": 8396,
+                                        "hireDate": new Date(2014, 7, 31),
+                                        "fullTime": false,
+                                        "position": "QA Engineer",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 80,
+                                                "name": "Meredith Parrish",
+                                                "reportsTo": 72,
+                                                "phone": "(714) 284-2408",
+                                                "extension": 7675,
+                                                "hireDate": new Date(2012, 11, 13),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 96,
+                                        "name": "Cassady Whitley",
+                                        "reportsTo": 40,
+                                        "phone": "(996) 587-8405",
+                                        "extension": 780,
+                                        "hireDate": new Date(2013, 5, 7),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 5
+                                    },
+                                    {
+                                        "id": 97,
+                                        "name": "Haviva Campbell",
+                                        "reportsTo": 40,
+                                        "phone": "(263) 887-4689",
+                                        "extension": 2808,
+                                        "hireDate": new Date(2013, 3, 5),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 98,
+                                        "name": "Cameron Ayers",
+                                        "reportsTo": 40,
+                                        "phone": "(470) 709-8030",
+                                        "extension": 2893,
+                                        "hireDate": new Date(2013, 8, 28),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 99,
+                                        "name": "Martha Sargent",
+                                        "reportsTo": 40,
+                                        "phone": "(587) 812-4418",
+                                        "extension": 5099,
+                                        "hireDate": new Date(2014, 2, 27),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 100,
+                                        "name": "Darrel Kinney",
+                                        "reportsTo": 40,
+                                        "phone": "(888) 483-9606",
+                                        "extension": 4779,
+                                        "hireDate": new Date(2014, 3, 24),
+                                        "fullTime": false,
+                                        "position": "Graphic Designer",
+                                        "timeInPosition": 1
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 54,
+                                "name": "Kuame Frye",
+                                "reportsTo": 52,
+                                "phone": "(360) 721-5886",
+                                "extension": 2730,
+                                "hireDate": new Date(2010, 11, 17),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 64,
+                                        "name": "Ori Wynn",
+                                        "reportsTo": 54,
+                                        "phone": "(366) 342-0166",
+                                        "extension": 7252,
+                                        "hireDate": new Date(2015, 6, 21),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 0,
+                                        "employees": [
+                                            {
+                                                "id": 6,
+                                                "name": "Moses Duncan",
+                                                "reportsTo": 64,
+                                                "phone": "(421) 611-4814",
+                                                "extension": 669,
+                                                "hireDate": new Date(2010, 5, 24),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 12,
+                                                "name": "Jamalia Wallace",
+                                                "reportsTo": 64,
+                                                "phone": "(611) 391-8016",
+                                                "extension": 1952,
+                                                "hireDate": new Date(2011, 9, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Designer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 62,
+                                                "name": "Palmer Gregory",
+                                                "reportsTo": 64,
+                                                "phone": "(360) 430-2505",
+                                                "extension": 4337,
+                                                "hireDate": new Date(2014, 8, 30),
+                                                "fullTime": true,
+                                                "position": "Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 68,
+                                                "name": "Mallory Gilliam",
+                                                "reportsTo": 64,
+                                                "phone": "(878) 423-2971",
+                                                "extension": 1341,
+                                                "hireDate": new Date(2014, 7, 24),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 73,
+                                                "name": "Ima Hughes",
+                                                "reportsTo": 64,
+                                                "phone": "(905) 485-8001",
+                                                "extension": 1273,
+                                                "hireDate": new Date(2013, 6, 3),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 79,
+                                                "name": "Duncan Mathews",
+                                                "reportsTo": 64,
+                                                "phone": "(790) 971-9709",
+                                                "extension": 4573,
+                                                "hireDate": new Date(2011, 8, 21),
+                                                "fullTime": false,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 69,
+                                "name": "Sierra Beasley",
+                                "reportsTo": 52,
+                                "phone": "(271) 953-1968",
+                                "extension": 3324,
+                                "hireDate": new Date(2011, 4, 2),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 3,
+                                "employees": [
+                                    {
+                                        "id": 38,
+                                        "name": "Elton Tucker",
+                                        "reportsTo": 69,
+                                        "phone": "(988) 930-9331",
+                                        "extension": 9216,
+                                        "hireDate": new Date(2015, 6, 4),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 1
+                                    },
+                                    {
+                                        "id": 39,
+                                        "name": "Iona Brennan",
+                                        "reportsTo": 69,
+                                        "phone": "(356) 563-0600",
+                                        "extension": 5634,
+                                        "hireDate": new Date(2010, 9, 23),
+                                        "fullTime": true,
+                                        "position": "Junior Support Officer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 53,
+                                        "name": "Paul Campos",
+                                        "reportsTo": 69,
+                                        "phone": "(899) 205-1689",
+                                        "extension": 8586,
+                                        "hireDate": new Date(2011, 3, 17),
+                                        "fullTime": true,
+                                        "position": "Interaction Designer",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 66,
+                                                "name": "Gloria Freeman",
+                                                "reportsTo": 53,
+                                                "phone": "(344) 950-9168",
+                                                "extension": 4738,
+                                                "hireDate": new Date(2013, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Junior Interaction Designer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 57,
+                                        "name": "Alyssa Hansen",
+                                        "reportsTo": 69,
+                                        "phone": "(548) 925-4799",
+                                        "extension": 4716,
+                                        "hireDate": new Date(2011, 1, 19),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 82,
+                                        "name": "Yael Walters",
+                                        "reportsTo": 69,
+                                        "phone": "(311) 489-8191",
+                                        "extension": 6520,
+                                        "hireDate": new Date(2013, 7, 4),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 87,
+                                        "name": "Dahlia Hunt",
+                                        "reportsTo": 69,
+                                        "phone": "(720) 339-5202",
+                                        "extension": 3690,
+                                        "hireDate": new Date(2011, 3, 26),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 94,
+                                        "name": "Adria Stanley",
+                                        "reportsTo": 69,
+                                        "phone": "(536) 357-6391",
+                                        "extension": 3374,
+                                        "hireDate": new Date(2014, 7, 26),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "Priscilla Frank",
+                "reportsTo": 1,
+                "phone": "(278) 927-2684",
+                "extension": 4183,
+                "hireDate": new Date(2014, 11, 30),
+                "fullTime": true,
+                "position": "Chief Product Officer",
+                "timeInPosition": 2,
+                "employees": [
+                    {
+                        "id": 4,
+                        "name": "Ursula Holmes",
+                        "reportsTo": 3,
+                        "phone": "(302) 760-2034",
+                        "extension": 2226,
+                        "hireDate": new Date(2011, 6, 6),
+                        "fullTime": true,
+                        "position": "EVP, Product Strategy",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 24,
+                        "name": "Melvin Carrillo",
+                        "reportsTo": 3,
+                        "phone": "(348) 933-5167",
+                        "extension": 2482,
+                        "hireDate": new Date(2014, 7, 21),
+                        "fullTime": true,
+                        "position": "Director, Developer Relations",
+                        "timeInPosition": 6,
+                        "employees": [
+                            {
+                                "id": 29,
+                                "name": "Martha Chavez",
+                                "reportsTo": 24,
+                                "phone": "(860) 754-3464",
+                                "extension": 4531,
+                                "hireDate": new Date(2013, 3, 12),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 30,
+                                "name": "Oren Fox",
+                                "reportsTo": 24,
+                                "phone": "(572) 414-3299",
+                                "extension": 4849,
+                                "hireDate": new Date(2013, 5, 14),
+                                "fullTime": false,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 41,
+                                "name": "Amos Barr",
+                                "reportsTo": 24,
+                                "phone": "(470) 381-3718",
+                                "extension": 7643,
+                                "hireDate": new Date(2010, 3, 9),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "Anika Vega",
+                "reportsTo": 1,
+                "phone": "(910) 714-1802",
+                "extension": 6353,
+                "hireDate": new Date(2010, 2, 25),
+                "fullTime": true,
+                "position": "Chief Process Officer",
+                "timeInPosition": 5,
+                "employees": [
+                    {
+                        "id": 10,
+                        "name": "Vernon Ballard",
+                        "reportsTo": 5,
+                        "phone": "(702) 185-8890",
+                        "extension": 9242,
+                        "hireDate": new Date(2015, 6, 26),
+                        "fullTime": true,
+                        "position": "Director Facilities",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 16,
+                                "name": "Ali Guy",
+                                "reportsTo": 10,
+                                "phone": "(429) 912-6578",
+                                "extension": 2225,
+                                "hireDate": new Date(2014, 6, 29),
+                                "fullTime": true,
+                                "position": "Operations Manager",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 23,
+                                        "name": "Bruce Reilly",
+                                        "reportsTo": 16,
+                                        "phone": "(995) 243-7302",
+                                        "extension": 4815,
+                                        "hireDate": new Date(2015, 4, 1),
+                                        "fullTime": true,
+                                        "position": "Head of Security",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 26,
+                                                "name": "Rowan Morin",
+                                                "reportsTo": 23,
+                                                "phone": "(792) 141-4374",
+                                                "extension": 1844,
+                                                "hireDate": new Date(2015, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Building Security",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 44,
+                                                "name": "Benedict Soto",
+                                                "reportsTo": 23,
+                                                "phone": "(822) 282-5991",
+                                                "extension": 6422,
+                                                "hireDate": new Date(2012, 6, 1),
+                                                "fullTime": false,
+                                                "position": "Building Security",
+                                                "timeInPosition": 4
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 48,
+                                        "name": "Maryam Rios",
+                                        "reportsTo": 16,
+                                        "phone": "(673) 764-6720",
+                                        "extension": 531,
+                                        "hireDate": new Date(2014, 3, 3),
+                                        "fullTime": true,
+                                        "position": "Team Lead, Personal Assistants",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 58,
+                                                "name": "Rose Mcintyre",
+                                                "reportsTo": 48,
+                                                "phone": "(771) 615-4590",
+                                                "extension": 7094,
+                                                "hireDate": new Date(2015, 6, 30),
+                                                "fullTime": false,
+                                                "position": "Personal Assistant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "Nevada Hart",
+                "reportsTo": 1,
+                "phone": "(254) 220-1576",
+                "extension": 6649,
+                "hireDate": new Date(2015, 8, 17),
+                "fullTime": true,
+                "position": "Chief Financial Officer",
+                "timeInPosition": 6,
+                "employees": [
+                    {
+                        "id": 14,
+                        "name": "Zena Sanford",
+                        "reportsTo": 7,
+                        "phone": "(437) 568-8160",
+                        "extension": 4452,
+                        "hireDate": new Date(2010, 11, 30),
+                        "fullTime": true,
+                        "position": "VP, Finance",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 15,
+                        "name": "Quinlan Howe",
+                        "reportsTo": 7,
+                        "phone": "(464) 334-9748",
+                        "extension": 8722,
+                        "hireDate": new Date(2011, 6, 9),
+                        "fullTime": false,
+                        "position": "Senior Director, Finance",
+                        "timeInPosition": 0,
+                        "employees": [
+                            {
+                                "id": 17,
+                                "name": "Indira Lopez",
+                                "reportsTo": 15,
+                                "phone": "(301) 368-0938",
+                                "extension": 8027,
+                                "hireDate": new Date(2013, 8, 18),
+                                "fullTime": true,
+                                "position": "ERP Team Lead",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 18,
+                                        "name": "Lareina Lara",
+                                        "reportsTo": 17,
+                                        "phone": "(233) 457-7482",
+                                        "extension": 1996,
+                                        "hireDate": new Date(2010, 4, 30),
+                                        "fullTime": true,
+                                        "position": "ERP Solutions Consultant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 19,
+                                        "name": "Maxwell Wise",
+                                        "reportsTo": 17,
+                                        "phone": "(570) 494-2531",
+                                        "extension": 9865,
+                                        "hireDate": new Date(2012, 5, 19),
+                                        "fullTime": true,
+                                        "position": "Systems Engineer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 20,
+                                "name": "Hunter Mcbride",
+                                "reportsTo": 15,
+                                "phone": "(409) 442-7016",
+                                "extension": 4284,
+                                "hireDate": new Date(2012, 10, 20),
+                                "fullTime": true,
+                                "position": "Senior Director, Tax",
+                                "timeInPosition": 3
+                            },
+                            {
+                                "id": 21,
+                                "name": "Jana Serrano",
+                                "reportsTo": 15,
+                                "phone": "(910) 718-4620",
+                                "extension": 6970,
+                                "hireDate": new Date(2010, 4, 2),
+                                "fullTime": true,
+                                "position": "Financial Planning & Analysis Manager",
+                                "timeInPosition": 2
+                            },
+                            {
+                                "id": 22,
+                                "name": "Zachery Shelton",
+                                "reportsTo": 15,
+                                "phone": "(310) 240-8675",
+                                "extension": 4527,
+                                "hireDate": new Date(2011, 11, 23),
+                                "fullTime": false,
+                                "position": "Corporate Finance Controller",
+                                "timeInPosition": 6,
+                                "employees": [
+                                    {
+                                        "id": 28,
+                                        "name": "Cullen Freeman",
+                                        "reportsTo": 22,
+                                        "phone": "(136) 554-8814",
+                                        "extension": 9861,
+                                        "hireDate": new Date(2014, 3, 15),
+                                        "fullTime": true,
+                                        "position": "Treasurer Accountant",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 31,
+                                        "name": "Quinn Dean",
+                                        "reportsTo": 22,
+                                        "phone": "(152) 613-3507",
+                                        "extension": 6621,
+                                        "hireDate": new Date(2015, 1, 29),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 34,
+                                        "name": "Samantha Brady",
+                                        "reportsTo": 22,
+                                        "phone": "(206) 398-4328",
+                                        "extension": 1157,
+                                        "hireDate": new Date(2011, 2, 13),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 35,
+                                                "name": "Tamara Green",
+                                                "reportsTo": 34,
+                                                "phone": "(219) 248-2789",
+                                                "extension": 4880,
+                                                "hireDate": new Date(2014, 2, 4),
+                                                "fullTime": true,
+                                                "position": "Junior Accountant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 36,
+                                        "name": "Olympia Coleman",
+                                        "reportsTo": 22,
+                                        "phone": "(944) 853-6383",
+                                        "extension": 2136,
+                                        "hireDate": new Date(2013, 7, 31),
+                                        "fullTime": true,
+                                        "position": "Collections Manager",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 37,
+                                        "name": "Breanna Goodwin",
+                                        "reportsTo": 22,
+                                        "phone": "(379) 988-9630",
+                                        "extension": 5898,
+                                        "hireDate": new Date(2010, 5, 23),
+                                        "fullTime": false,
+                                        "position": "Payroll Specialist",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 27,
+                                "name": "Curran Travis",
+                                "reportsTo": 15,
+                                "phone": "(438) 135-8033",
+                                "extension": 3841,
+                                "hireDate": new Date(2011, 6, 13),
+                                "fullTime": true,
+                                "position": "Finance Controller",
+                                "timeInPosition": 5
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "Hunter Fry",
+                "reportsTo": 1,
+                "phone": "(766) 358-9858",
+                "extension": 3741,
+                "hireDate": new Date(2011, 2, 12),
+                "fullTime": false,
+                "position": "General Counsel",
+                "timeInPosition": 3,
+                "employees": [
+                    {
+                        "id": 9,
+                        "name": "Kuame Carrillo",
+                        "reportsTo": 8,
+                        "phone": "(192) 383-1305",
+                        "extension": 9228,
+                        "hireDate": new Date(2011, 2, 22),
+                        "fullTime": true,
+                        "position": "Associate General Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 13,
+                        "name": "Stacy Todd",
+                        "reportsTo": 8,
+                        "phone": "(925) 286-3327",
+                        "extension": 8565,
+                        "hireDate": new Date(2014, 7, 5),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 33,
+                        "name": "Valentine Wyatt",
+                        "reportsTo": 8,
+                        "phone": "(165) 166-6205",
+                        "extension": 3588,
+                        "hireDate": new Date(2015, 5, 21),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 5
+                    },
+                    {
+                        "id": 86,
+                        "name": "Daniel Mccarthy",
+                        "reportsTo": 8,
+                        "phone": "(624) 483-6206",
+                        "extension": 9112,
+                        "hireDate": new Date(2013, 12, 3),
+                        "fullTime": false,
+                        "position": "Staff Attorney",
+                        "timeInPosition": 0
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default employees;
diff --git a/vue-options-api-demos/treelist/aggregates/main.js b/vue-options-api-demos/treelist/aggregates/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/aggregates/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/aggregates/main.vue b/vue-options-api-demos/treelist/aggregates/main.vue
new file mode 100644
index 00000000..1124c541
--- /dev/null
+++ b/vue-options-api-demos/treelist/aggregates/main.vue
@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <TreeList
+      :style="{
+        maxHeight: '430px',
+        overflow: 'auto',
+        width: '100%',
+      }"
+      :expand-field="expandField"
+      :sub-items-field="subItemsField"
+      @expandchange="onExpandChange"
+      :data-items="processData"
+      :columns="columns"
+    />
+  </div>
+</template>
+
+<script>
+const dateFormat = '{0:MMMM d, yyyy}';
+const subItemsField = 'employees';
+const expandField = 'expanded';
+import employees from './data';
+import {
+  TreeList,
+  mapTree,
+  extendDataItem,
+} from '@progress/kendo-vue-treelist';
+
+export default {
+  components: {
+    TreeList,
+  },
+  data() {
+    return {
+      dataItems: [...employees],
+      expanded: [],
+      dateFormat,
+      subItemsField,
+      expandField,
+      columns: [
+        {
+          field: 'name',
+          title: 'Name',
+          width: '34%',
+          expandable: true,
+        },
+        {
+          field: 'position',
+          title: 'Position',
+          width: '33%',
+        },
+        {
+          field: 'hireDate',
+          title: 'Hire Date',
+          width: '33%',
+          format: dateFormat,
+        },
+      ],
+    };
+  },
+  computed: {
+    processData() {
+      const data = this.addExpandField(this.dataItems);
+      const result = mapTree(data, this.subItemsField, this.aggregateSubItems);
+
+      return this.aggregateSubItems({
+        [subItemsField]: result,
+      })[subItemsField];
+    },
+  },
+  methods: {
+    aggregateSubItems(item) {
+      const subItems = item[subItemsField];
+
+      if (subItems && subItems.length) {
+        const lastHireDate = subItems.reduce(
+          (acc, curr) => Math.max(acc, curr.hireDate, curr.lastHireDate || acc),
+          new Date(0)
+        );
+        const date = new Date(lastHireDate);
+        const year = new Intl.DateTimeFormat('en', {
+          year: 'numeric',
+        }).format(date);
+        const month = new Intl.DateTimeFormat('en', {
+          month: 'long',
+        }).format(date);
+        const day = new Intl.DateTimeFormat('en', {
+          day: '2-digit',
+        }).format(date);
+        const hireDateString = `Last employee hired on ${month} ${day}, ${year}`;
+        const employeesCount = subItems.reduce(
+          (acc, curr) => acc + (curr.employeesCount || 0) + 1,
+          0
+        );
+        const aggregateItem = {
+          footer: true,
+          name: `${employeesCount} employee(s)`,
+          hireDate: hireDateString,
+        };
+        return extendDataItem(item, subItemsField, {
+          employeesCount,
+          lastHireDate,
+          [subItemsField]: [...subItems, aggregateItem],
+        });
+      }
+
+      return item;
+    },
+    onExpandChange(event) {
+      this.expanded = event.value
+        ? this.expanded.filter((id) => id !== event.dataItem.id)
+        : [...this.expanded, event.dataItem.id];
+    },
+    addExpandField(dataArr) {
+      const expanded = this.expanded;
+
+      return mapTree(dataArr, subItemsField, (item) =>
+        extendDataItem(item, subItemsField, {
+          expanded: expanded.includes(item.id),
+        })
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treelist/cells-custom/data.js b/vue-options-api-demos/treelist/cells-custom/data.js
new file mode 100644
index 00000000..f66aec4d
--- /dev/null
+++ b/vue-options-api-demos/treelist/cells-custom/data.js
@@ -0,0 +1,1150 @@
+
+const employees = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2,
+        "employees": [
+            {
+                "id": 2,
+                "name": "Guy Wooten",
+                "reportsTo": 1,
+                "phone": "(438) 738-4935",
+                "extension": 1155,
+                "hireDate": new Date(2010, 3, 3),
+                "fullTime": true,
+                "position": "Chief Technical Officer",
+                "timeInPosition": 1,
+                "employees": [
+                    {
+                        "id": 32,
+                        "name": "Buffy Weber",
+                        "reportsTo": 2,
+                        "phone": "(699) 838-6121",
+                        "extension": 8933,
+                        "hireDate": new Date(2011, 7, 11),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 11,
+                                "name": "Hyacinth Hood",
+                                "reportsTo": 32,
+                                "phone": "(889) 345-2438",
+                                "extension": 8564,
+                                "hireDate": new Date(2014, 2, 3),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 60,
+                                        "name": "Akeem Carr",
+                                        "reportsTo": 11,
+                                        "phone": "(738) 136-2814",
+                                        "extension": 9353,
+                                        "hireDate": new Date(2011, 4, 21),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 78,
+                                        "name": "Rinah Simon",
+                                        "reportsTo": 11,
+                                        "phone": "(285) 912-5271",
+                                        "extension": 7795,
+                                        "hireDate": new Date(2012, 10, 11),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 42,
+                                "name": "Gage Daniels",
+                                "reportsTo": 32,
+                                "phone": "(107) 290-6260",
+                                "extension": 896,
+                                "hireDate": new Date(2013, 5, 16),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 5
+                            },
+                            {
+                                "id": 43,
+                                "name": "Constance Vazquez",
+                                "reportsTo": 32,
+                                "phone": "(800) 301-1978",
+                                "extension": 5141,
+                                "hireDate": new Date(2011, 6, 7),
+                                "fullTime": true,
+                                "position": "Director, Engineering",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 46,
+                                        "name": "Darrel Solis",
+                                        "reportsTo": 43,
+                                        "phone": "(327) 977-0216",
+                                        "extension": 7779,
+                                        "hireDate": new Date(2015, 4, 25),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 47,
+                                                "name": "Brian Yang",
+                                                "reportsTo": 46,
+                                                "phone": "(565) 146-5435",
+                                                "extension": 3885,
+                                                "hireDate": new Date(2012, 9, 27),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 50,
+                                                "name": "Lillian Bradshaw",
+                                                "reportsTo": 46,
+                                                "phone": "(323) 509-3479",
+                                                "extension": 5426,
+                                                "hireDate": new Date(2014, 5, 10),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 51,
+                                                "name": "Christian Palmer",
+                                                "reportsTo": 46,
+                                                "phone": "(490) 421-8718",
+                                                "extension": 3706,
+                                                "hireDate": new Date(2012, 12, 27),
+                                                "fullTime": false,
+                                                "position": "Technical Lead",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 55,
+                                                "name": "Summer Mosley",
+                                                "reportsTo": 46,
+                                                "phone": "(784) 962-2301",
+                                                "extension": 5492,
+                                                "hireDate": new Date(2010, 3, 2),
+                                                "fullTime": true,
+                                                "position": "QA Engineer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 56,
+                                                "name": "Barry Ayers",
+                                                "reportsTo": 46,
+                                                "phone": "(452) 373-9227",
+                                                "extension": 1308,
+                                                "hireDate": new Date(2011, 10, 11),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 59,
+                                                "name": "Keiko Espinoza",
+                                                "reportsTo": 46,
+                                                "phone": "(226) 600-5305",
+                                                "extension": 9363,
+                                                "hireDate": new Date(2011, 9, 18),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 61,
+                                                "name": "Candace Pickett",
+                                                "reportsTo": 46,
+                                                "phone": "(120) 117-7475",
+                                                "extension": 5178,
+                                                "hireDate": new Date(2010, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 63,
+                                        "name": "Mia Caldwell",
+                                        "reportsTo": 43,
+                                        "phone": "(848) 636-6470",
+                                        "extension": 6368,
+                                        "hireDate": new Date(2012, 10, 7),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 65,
+                                                "name": "Thomas Terry",
+                                                "reportsTo": 63,
+                                                "phone": "(764) 831-4248",
+                                                "extension": 3574,
+                                                "hireDate": new Date(2015, 6, 15),
+                                                "fullTime": false,
+                                                "position": "Senior Enterprise Support Officer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 67,
+                                                "name": "Ruth Downs",
+                                                "reportsTo": 63,
+                                                "phone": "(138) 991-1440",
+                                                "extension": 8067,
+                                                "hireDate": new Date(2013, 7, 13),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 70,
+                                                "name": "Yasir Wilder",
+                                                "reportsTo": 63,
+                                                "phone": "(759) 701-8665",
+                                                "extension": 8350,
+                                                "hireDate": new Date(2010, 11, 8),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 71,
+                                                "name": "Flavia Short",
+                                                "reportsTo": 63,
+                                                "phone": "(370) 133-9238",
+                                                "extension": 6390,
+                                                "hireDate": new Date(2013, 2, 21),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 74,
+                                                "name": "Aaron Roach",
+                                                "reportsTo": 63,
+                                                "phone": "(958) 717-9230",
+                                                "extension": 4899,
+                                                "hireDate": new Date(2011, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 75,
+                                                "name": "Eric Russell",
+                                                "reportsTo": 63,
+                                                "phone": "(516) 575-8505",
+                                                "extension": 2224,
+                                                "hireDate": new Date(2012, 10, 28),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 76,
+                                                "name": "Cheyenne Olson",
+                                                "reportsTo": 63,
+                                                "phone": "(241) 645-0257",
+                                                "extension": 9181,
+                                                "hireDate": new Date(2015, 5, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 77,
+                                                "name": "Shaine Avila",
+                                                "reportsTo": 63,
+                                                "phone": "(844) 435-1360",
+                                                "extension": 3374,
+                                                "hireDate": new Date(2010, 1, 31),
+                                                "fullTime": true,
+                                                "position": "UI Designer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 81,
+                                                "name": "Chantale Long",
+                                                "reportsTo": 63,
+                                                "phone": "(252) 419-6891",
+                                                "extension": 7868,
+                                                "hireDate": new Date(2010, 6, 17),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 83,
+                                                "name": "Dane Cruz",
+                                                "reportsTo": 63,
+                                                "phone": "(946) 701-6165",
+                                                "extension": 3828,
+                                                "hireDate": new Date(2014, 10, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 84,
+                                                "name": "Regan Patterson",
+                                                "reportsTo": 63,
+                                                "phone": "(265) 946-1765",
+                                                "extension": 6955,
+                                                "hireDate": new Date(2012, 3, 1),
+                                                "fullTime": true,
+                                                "position": "Technical Writer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 85,
+                                                "name": "Drew Mckay",
+                                                "reportsTo": 63,
+                                                "phone": "(327) 293-0162",
+                                                "extension": 6904,
+                                                "hireDate": new Date(2011, 3, 25),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 88,
+                                                "name": "Bevis Miller",
+                                                "reportsTo": 63,
+                                                "phone": "(525) 557-0169",
+                                                "extension": 6978,
+                                                "hireDate": new Date(2011, 4, 19),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 89,
+                                                "name": "Bruce Mccarty",
+                                                "reportsTo": 63,
+                                                "phone": "(936) 777-8730",
+                                                "extension": 6552,
+                                                "hireDate": new Date(2014, 3, 28),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 5
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 90,
+                                        "name": "Ocean Blair",
+                                        "reportsTo": 43,
+                                        "phone": "(343) 586-6614",
+                                        "extension": 1424,
+                                        "hireDate": new Date(2011, 4, 27),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 91,
+                                                "name": "Guinevere Osborn",
+                                                "reportsTo": 90,
+                                                "phone": "(424) 741-0006",
+                                                "extension": 3166,
+                                                "hireDate": new Date(2014, 11, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 92,
+                                                "name": "Olga Strong",
+                                                "reportsTo": 90,
+                                                "phone": "(949) 417-1168",
+                                                "extension": 4568,
+                                                "hireDate": new Date(2015, 5, 28),
+                                                "fullTime": true,
+                                                "position": "Graphic Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 93,
+                                                "name": "Robert Orr",
+                                                "reportsTo": 90,
+                                                "phone": "(977) 341-3721",
+                                                "extension": 9241,
+                                                "hireDate": new Date(2012, 8, 20),
+                                                "fullTime": false,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 95,
+                                                "name": "Odette Sears",
+                                                "reportsTo": 90,
+                                                "phone": "(264) 818-6576",
+                                                "extension": 1914,
+                                                "hireDate": new Date(2013, 7, 5),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 45,
+                                "name": "Zelda Medina",
+                                "reportsTo": 32,
+                                "phone": "(563) 359-6023",
+                                "extension": 2600,
+                                "hireDate": new Date(2012, 11, 6),
+                                "fullTime": true,
+                                "position": "QA Architect",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    },
+                    {
+                        "id": 52,
+                        "name": "Skyler Cleveland",
+                        "reportsTo": 2,
+                        "phone": "(217) 280-5300",
+                        "extension": 9655,
+                        "hireDate": new Date(2014, 11, 10),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 40,
+                                "name": "Karleigh Garza",
+                                "reportsTo": 52,
+                                "phone": "(370) 983-8796",
+                                "extension": 4044,
+                                "hireDate": new Date(2014, 3, 10),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 49,
+                                        "name": "Elmo Tyson",
+                                        "reportsTo": 40,
+                                        "phone": "(344) 496-9555",
+                                        "extension": 6950,
+                                        "hireDate": new Date(2014, 9, 18),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 72,
+                                        "name": "Stacey Lynn",
+                                        "reportsTo": 40,
+                                        "phone": "(140) 772-7509",
+                                        "extension": 8396,
+                                        "hireDate": new Date(2014, 7, 31),
+                                        "fullTime": false,
+                                        "position": "QA Engineer",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 80,
+                                                "name": "Meredith Parrish",
+                                                "reportsTo": 72,
+                                                "phone": "(714) 284-2408",
+                                                "extension": 7675,
+                                                "hireDate": new Date(2012, 11, 13),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 96,
+                                        "name": "Cassady Whitley",
+                                        "reportsTo": 40,
+                                        "phone": "(996) 587-8405",
+                                        "extension": 780,
+                                        "hireDate": new Date(2013, 5, 7),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 5
+                                    },
+                                    {
+                                        "id": 97,
+                                        "name": "Haviva Campbell",
+                                        "reportsTo": 40,
+                                        "phone": "(263) 887-4689",
+                                        "extension": 2808,
+                                        "hireDate": new Date(2013, 3, 5),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 98,
+                                        "name": "Cameron Ayers",
+                                        "reportsTo": 40,
+                                        "phone": "(470) 709-8030",
+                                        "extension": 2893,
+                                        "hireDate": new Date(2013, 8, 28),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 99,
+                                        "name": "Martha Sargent",
+                                        "reportsTo": 40,
+                                        "phone": "(587) 812-4418",
+                                        "extension": 5099,
+                                        "hireDate": new Date(2014, 2, 27),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 100,
+                                        "name": "Darrel Kinney",
+                                        "reportsTo": 40,
+                                        "phone": "(888) 483-9606",
+                                        "extension": 4779,
+                                        "hireDate": new Date(2014, 3, 24),
+                                        "fullTime": false,
+                                        "position": "Graphic Designer",
+                                        "timeInPosition": 1
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 54,
+                                "name": "Kuame Frye",
+                                "reportsTo": 52,
+                                "phone": "(360) 721-5886",
+                                "extension": 2730,
+                                "hireDate": new Date(2010, 11, 17),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 64,
+                                        "name": "Ori Wynn",
+                                        "reportsTo": 54,
+                                        "phone": "(366) 342-0166",
+                                        "extension": 7252,
+                                        "hireDate": new Date(2015, 6, 21),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 0,
+                                        "employees": [
+                                            {
+                                                "id": 6,
+                                                "name": "Moses Duncan",
+                                                "reportsTo": 64,
+                                                "phone": "(421) 611-4814",
+                                                "extension": 669,
+                                                "hireDate": new Date(2010, 5, 24),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 12,
+                                                "name": "Jamalia Wallace",
+                                                "reportsTo": 64,
+                                                "phone": "(611) 391-8016",
+                                                "extension": 1952,
+                                                "hireDate": new Date(2011, 9, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Designer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 62,
+                                                "name": "Palmer Gregory",
+                                                "reportsTo": 64,
+                                                "phone": "(360) 430-2505",
+                                                "extension": 4337,
+                                                "hireDate": new Date(2014, 8, 30),
+                                                "fullTime": true,
+                                                "position": "Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 68,
+                                                "name": "Mallory Gilliam",
+                                                "reportsTo": 64,
+                                                "phone": "(878) 423-2971",
+                                                "extension": 1341,
+                                                "hireDate": new Date(2014, 7, 24),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 73,
+                                                "name": "Ima Hughes",
+                                                "reportsTo": 64,
+                                                "phone": "(905) 485-8001",
+                                                "extension": 1273,
+                                                "hireDate": new Date(2013, 6, 3),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 79,
+                                                "name": "Duncan Mathews",
+                                                "reportsTo": 64,
+                                                "phone": "(790) 971-9709",
+                                                "extension": 4573,
+                                                "hireDate": new Date(2011, 8, 21),
+                                                "fullTime": false,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 69,
+                                "name": "Sierra Beasley",
+                                "reportsTo": 52,
+                                "phone": "(271) 953-1968",
+                                "extension": 3324,
+                                "hireDate": new Date(2011, 4, 2),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 3,
+                                "employees": [
+                                    {
+                                        "id": 38,
+                                        "name": "Elton Tucker",
+                                        "reportsTo": 69,
+                                        "phone": "(988) 930-9331",
+                                        "extension": 9216,
+                                        "hireDate": new Date(2015, 6, 4),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 1
+                                    },
+                                    {
+                                        "id": 39,
+                                        "name": "Iona Brennan",
+                                        "reportsTo": 69,
+                                        "phone": "(356) 563-0600",
+                                        "extension": 5634,
+                                        "hireDate": new Date(2010, 9, 23),
+                                        "fullTime": true,
+                                        "position": "Junior Support Officer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 53,
+                                        "name": "Paul Campos",
+                                        "reportsTo": 69,
+                                        "phone": "(899) 205-1689",
+                                        "extension": 8586,
+                                        "hireDate": new Date(2011, 3, 17),
+                                        "fullTime": true,
+                                        "position": "Interaction Designer",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 66,
+                                                "name": "Gloria Freeman",
+                                                "reportsTo": 53,
+                                                "phone": "(344) 950-9168",
+                                                "extension": 4738,
+                                                "hireDate": new Date(2013, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Junior Interaction Designer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 57,
+                                        "name": "Alyssa Hansen",
+                                        "reportsTo": 69,
+                                        "phone": "(548) 925-4799",
+                                        "extension": 4716,
+                                        "hireDate": new Date(2011, 1, 19),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 82,
+                                        "name": "Yael Walters",
+                                        "reportsTo": 69,
+                                        "phone": "(311) 489-8191",
+                                        "extension": 6520,
+                                        "hireDate": new Date(2013, 7, 4),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 87,
+                                        "name": "Dahlia Hunt",
+                                        "reportsTo": 69,
+                                        "phone": "(720) 339-5202",
+                                        "extension": 3690,
+                                        "hireDate": new Date(2011, 3, 26),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 94,
+                                        "name": "Adria Stanley",
+                                        "reportsTo": 69,
+                                        "phone": "(536) 357-6391",
+                                        "extension": 3374,
+                                        "hireDate": new Date(2014, 7, 26),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "Priscilla Frank",
+                "reportsTo": 1,
+                "phone": "(278) 927-2684",
+                "extension": 4183,
+                "hireDate": new Date(2014, 11, 30),
+                "fullTime": true,
+                "position": "Chief Product Officer",
+                "timeInPosition": 2,
+                "employees": [
+                    {
+                        "id": 4,
+                        "name": "Ursula Holmes",
+                        "reportsTo": 3,
+                        "phone": "(302) 760-2034",
+                        "extension": 2226,
+                        "hireDate": new Date(2011, 6, 6),
+                        "fullTime": true,
+                        "position": "EVP, Product Strategy",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 24,
+                        "name": "Melvin Carrillo",
+                        "reportsTo": 3,
+                        "phone": "(348) 933-5167",
+                        "extension": 2482,
+                        "hireDate": new Date(2014, 7, 21),
+                        "fullTime": true,
+                        "position": "Director, Developer Relations",
+                        "timeInPosition": 6,
+                        "employees": [
+                            {
+                                "id": 29,
+                                "name": "Martha Chavez",
+                                "reportsTo": 24,
+                                "phone": "(860) 754-3464",
+                                "extension": 4531,
+                                "hireDate": new Date(2013, 3, 12),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 30,
+                                "name": "Oren Fox",
+                                "reportsTo": 24,
+                                "phone": "(572) 414-3299",
+                                "extension": 4849,
+                                "hireDate": new Date(2013, 5, 14),
+                                "fullTime": false,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 41,
+                                "name": "Amos Barr",
+                                "reportsTo": 24,
+                                "phone": "(470) 381-3718",
+                                "extension": 7643,
+                                "hireDate": new Date(2010, 3, 9),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "Anika Vega",
+                "reportsTo": 1,
+                "phone": "(910) 714-1802",
+                "extension": 6353,
+                "hireDate": new Date(2010, 2, 25),
+                "fullTime": true,
+                "position": "Chief Process Officer",
+                "timeInPosition": 5,
+                "employees": [
+                    {
+                        "id": 10,
+                        "name": "Vernon Ballard",
+                        "reportsTo": 5,
+                        "phone": "(702) 185-8890",
+                        "extension": 9242,
+                        "hireDate": new Date(2015, 6, 26),
+                        "fullTime": true,
+                        "position": "Director Facilities",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 16,
+                                "name": "Ali Guy",
+                                "reportsTo": 10,
+                                "phone": "(429) 912-6578",
+                                "extension": 2225,
+                                "hireDate": new Date(2014, 6, 29),
+                                "fullTime": true,
+                                "position": "Operations Manager",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 23,
+                                        "name": "Bruce Reilly",
+                                        "reportsTo": 16,
+                                        "phone": "(995) 243-7302",
+                                        "extension": 4815,
+                                        "hireDate": new Date(2015, 4, 1),
+                                        "fullTime": true,
+                                        "position": "Head of Security",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 26,
+                                                "name": "Rowan Morin",
+                                                "reportsTo": 23,
+                                                "phone": "(792) 141-4374",
+                                                "extension": 1844,
+                                                "hireDate": new Date(2015, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Building Security",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 44,
+                                                "name": "Benedict Soto",
+                                                "reportsTo": 23,
+                                                "phone": "(822) 282-5991",
+                                                "extension": 6422,
+                                                "hireDate": new Date(2012, 6, 1),
+                                                "fullTime": false,
+                                                "position": "Building Security",
+                                                "timeInPosition": 4
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 48,
+                                        "name": "Maryam Rios",
+                                        "reportsTo": 16,
+                                        "phone": "(673) 764-6720",
+                                        "extension": 531,
+                                        "hireDate": new Date(2014, 3, 3),
+                                        "fullTime": true,
+                                        "position": "Team Lead, Personal Assistants",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 58,
+                                                "name": "Rose Mcintyre",
+                                                "reportsTo": 48,
+                                                "phone": "(771) 615-4590",
+                                                "extension": 7094,
+                                                "hireDate": new Date(2015, 6, 30),
+                                                "fullTime": false,
+                                                "position": "Personal Assistant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "Nevada Hart",
+                "reportsTo": 1,
+                "phone": "(254) 220-1576",
+                "extension": 6649,
+                "hireDate": new Date(2015, 8, 17),
+                "fullTime": true,
+                "position": "Chief Financial Officer",
+                "timeInPosition": 6,
+                "employees": [
+                    {
+                        "id": 14,
+                        "name": "Zena Sanford",
+                        "reportsTo": 7,
+                        "phone": "(437) 568-8160",
+                        "extension": 4452,
+                        "hireDate": new Date(2010, 11, 30),
+                        "fullTime": true,
+                        "position": "VP, Finance",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 15,
+                        "name": "Quinlan Howe",
+                        "reportsTo": 7,
+                        "phone": "(464) 334-9748",
+                        "extension": 8722,
+                        "hireDate": new Date(2011, 6, 9),
+                        "fullTime": false,
+                        "position": "Senior Director, Finance",
+                        "timeInPosition": 0,
+                        "employees": [
+                            {
+                                "id": 17,
+                                "name": "Indira Lopez",
+                                "reportsTo": 15,
+                                "phone": "(301) 368-0938",
+                                "extension": 8027,
+                                "hireDate": new Date(2013, 8, 18),
+                                "fullTime": true,
+                                "position": "ERP Team Lead",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 18,
+                                        "name": "Lareina Lara",
+                                        "reportsTo": 17,
+                                        "phone": "(233) 457-7482",
+                                        "extension": 1996,
+                                        "hireDate": new Date(2010, 4, 30),
+                                        "fullTime": true,
+                                        "position": "ERP Solutions Consultant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 19,
+                                        "name": "Maxwell Wise",
+                                        "reportsTo": 17,
+                                        "phone": "(570) 494-2531",
+                                        "extension": 9865,
+                                        "hireDate": new Date(2012, 5, 19),
+                                        "fullTime": true,
+                                        "position": "Systems Engineer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 20,
+                                "name": "Hunter Mcbride",
+                                "reportsTo": 15,
+                                "phone": "(409) 442-7016",
+                                "extension": 4284,
+                                "hireDate": new Date(2012, 10, 20),
+                                "fullTime": true,
+                                "position": "Senior Director, Tax",
+                                "timeInPosition": 3
+                            },
+                            {
+                                "id": 21,
+                                "name": "Jana Serrano",
+                                "reportsTo": 15,
+                                "phone": "(910) 718-4620",
+                                "extension": 6970,
+                                "hireDate": new Date(2010, 4, 2),
+                                "fullTime": true,
+                                "position": "Financial Planning & Analysis Manager",
+                                "timeInPosition": 2
+                            },
+                            {
+                                "id": 22,
+                                "name": "Zachery Shelton",
+                                "reportsTo": 15,
+                                "phone": "(310) 240-8675",
+                                "extension": 4527,
+                                "hireDate": new Date(2011, 11, 23),
+                                "fullTime": false,
+                                "position": "Corporate Finance Controller",
+                                "timeInPosition": 6,
+                                "employees": [
+                                    {
+                                        "id": 28,
+                                        "name": "Cullen Freeman",
+                                        "reportsTo": 22,
+                                        "phone": "(136) 554-8814",
+                                        "extension": 9861,
+                                        "hireDate": new Date(2014, 3, 15),
+                                        "fullTime": true,
+                                        "position": "Treasurer Accountant",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 31,
+                                        "name": "Quinn Dean",
+                                        "reportsTo": 22,
+                                        "phone": "(152) 613-3507",
+                                        "extension": 6621,
+                                        "hireDate": new Date(2015, 1, 29),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 34,
+                                        "name": "Samantha Brady",
+                                        "reportsTo": 22,
+                                        "phone": "(206) 398-4328",
+                                        "extension": 1157,
+                                        "hireDate": new Date(2011, 2, 13),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 35,
+                                                "name": "Tamara Green",
+                                                "reportsTo": 34,
+                                                "phone": "(219) 248-2789",
+                                                "extension": 4880,
+                                                "hireDate": new Date(2014, 2, 4),
+                                                "fullTime": true,
+                                                "position": "Junior Accountant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 36,
+                                        "name": "Olympia Coleman",
+                                        "reportsTo": 22,
+                                        "phone": "(944) 853-6383",
+                                        "extension": 2136,
+                                        "hireDate": new Date(2013, 7, 31),
+                                        "fullTime": true,
+                                        "position": "Collections Manager",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 37,
+                                        "name": "Breanna Goodwin",
+                                        "reportsTo": 22,
+                                        "phone": "(379) 988-9630",
+                                        "extension": 5898,
+                                        "hireDate": new Date(2010, 5, 23),
+                                        "fullTime": false,
+                                        "position": "Payroll Specialist",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 27,
+                                "name": "Curran Travis",
+                                "reportsTo": 15,
+                                "phone": "(438) 135-8033",
+                                "extension": 3841,
+                                "hireDate": new Date(2011, 6, 13),
+                                "fullTime": true,
+                                "position": "Finance Controller",
+                                "timeInPosition": 5
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "Hunter Fry",
+                "reportsTo": 1,
+                "phone": "(766) 358-9858",
+                "extension": 3741,
+                "hireDate": new Date(2011, 2, 12),
+                "fullTime": false,
+                "position": "General Counsel",
+                "timeInPosition": 3,
+                "employees": [
+                    {
+                        "id": 9,
+                        "name": "Kuame Carrillo",
+                        "reportsTo": 8,
+                        "phone": "(192) 383-1305",
+                        "extension": 9228,
+                        "hireDate": new Date(2011, 2, 22),
+                        "fullTime": true,
+                        "position": "Associate General Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 13,
+                        "name": "Stacy Todd",
+                        "reportsTo": 8,
+                        "phone": "(925) 286-3327",
+                        "extension": 8565,
+                        "hireDate": new Date(2014, 7, 5),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 33,
+                        "name": "Valentine Wyatt",
+                        "reportsTo": 8,
+                        "phone": "(165) 166-6205",
+                        "extension": 3588,
+                        "hireDate": new Date(2015, 5, 21),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 5
+                    },
+                    {
+                        "id": 86,
+                        "name": "Daniel Mccarthy",
+                        "reportsTo": 8,
+                        "phone": "(624) 483-6206",
+                        "extension": 9112,
+                        "hireDate": new Date(2013, 12, 3),
+                        "fullTime": false,
+                        "position": "Staff Attorney",
+                        "timeInPosition": 0
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default employees;
diff --git a/vue-options-api-demos/treelist/cells-custom/main.js b/vue-options-api-demos/treelist/cells-custom/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/cells-custom/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/cells-custom/main.vue b/vue-options-api-demos/treelist/cells-custom/main.vue
new file mode 100644
index 00000000..88a843b2
--- /dev/null
+++ b/vue-options-api-demos/treelist/cells-custom/main.vue
@@ -0,0 +1,155 @@
+<template>
+  <TreeList
+    :style="{
+      maxHeight: '510px',
+      overflow: 'auto',
+    }"
+    :expand-field="expandField"
+    :sub-items-field="subItemsField"
+    :data-items="processedData"
+    :columns="columns"
+    :filter="filter"
+    :filterable="true"
+    :sort="sort"
+    :sortable="true"
+    @datastatechange="handleDataStateChange"
+    @expandchange="onExpandChange"
+  >
+    <template v-slot:myCellTemplate="{ props }">
+      <td>
+        <span
+          :style="{
+            color: props.value ? 'green' : 'red',
+          }"
+        >
+          {{ props.value }}
+        </span>
+      </td>
+    </template>
+    <template v-slot:zeroColumnCellTemplate="{ props }">
+      <td
+        :class="props.class"
+        :colspan="props.colSpan"
+        :aria-colindex="props['aria-colindex']"
+        :aria-expanded="props['aria-expanded']"
+        :aria-selected="props['aria-selected']"
+        :role="props.role"
+        :data-grid-col-index="props['data-grid-col-index']"
+      >
+        <span
+        class="k-treelist-toggle k-icon k-svg-icon"
+          v-for="(iteration, index) in props.level.slice(1)"
+          :key="index"
+        ></span>
+
+        <span
+          @click="
+            onExpandChange({
+              dataItem: props.dataItem,
+              value: props['aria-expanded'],
+            })
+          "
+          :data-prevent-selection="true"
+        >
+        <SvgIcon :icon="props['aria-expanded']
+              ? caretAltDownIcon
+              : props.dataItem['employees']
+              ? caretAltRightIcon
+              : ''" />
+      </span>
+        <b style="color: brown">{{ props.value }}</b>
+      </td>
+    </template>
+  </TreeList>
+</template>
+
+<script>
+import employees from './data';
+import {
+    TreeList,
+    filterBy,
+    orderBy,
+    mapTree,
+    extendDataItem,
+} from '@progress/kendo-vue-treelist';
+import { caretAltDownIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
+import {SvgIcon} from '@progress/kendo-vue-common'
+
+export default {
+    components: {
+        TreeList,
+        SvgIcon
+    },
+    data() {
+        return {
+            employees,
+            caretAltRightIcon,
+            caretAltDownIcon,
+            subItemsField: 'employees',
+            expandField: 'expanded',
+            expanded: [1, 2, 32],
+            filter: [],
+            sort: [
+                {
+                    field: 'name',
+                    dir: 'asc',
+                },
+            ],
+            columns: [
+                {
+                    field: 'name',
+                    title: 'Name',
+                    expandable: true,
+                    width: '40%',
+                    cell: 'zeroColumnCellTemplate',
+                },
+                {
+                    field: 'position',
+                    title: 'Position',
+                    width: '40%',
+                },
+                {
+                    field: 'fullTime',
+                    title: 'Full Time',
+                    width: '20%',
+                    cell: 'myCellTemplate',
+                },
+            ],
+        };
+    },
+    computed: {
+        processedData() {
+            let data = this.employees;
+            let filteredData = filterBy(data, this.filter, this.subItemsField);
+            let sortedData = orderBy(filteredData, this.sort, this.subItemsField);
+            return this.addExpandField(sortedData);
+        },
+    },
+    methods: {
+        getIndent(id) {
+            const level = id.filter((el) => el === '.').length;
+            return level;
+        },
+        onExpandChange(e) {
+            this.expanded = e.value
+                ? this.expanded.filter((id) => id !== e.dataItem.id)
+                : [...this.expanded, e.dataItem.id];
+        },
+        createAppState: function (dataState) {
+            this.sort = dataState.sort;
+            this.filter = dataState.filter;
+        },
+        handleDataStateChange: function (event) {
+            this.createAppState(event.data);
+        },
+        addExpandField(dataTree) {
+            const expanded = this.expanded;
+            return mapTree(dataTree, this.subItemsField, (item) =>
+                extendDataItem(item, this.subItemsField, {
+                    [this.expandField]: expanded.includes(item.id),
+                })
+            );
+        },
+    },
+};
+</script>
diff --git a/vue-options-api-demos/treelist/column-menu/data.js b/vue-options-api-demos/treelist/column-menu/data.js
new file mode 100644
index 00000000..f66aec4d
--- /dev/null
+++ b/vue-options-api-demos/treelist/column-menu/data.js
@@ -0,0 +1,1150 @@
+
+const employees = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2,
+        "employees": [
+            {
+                "id": 2,
+                "name": "Guy Wooten",
+                "reportsTo": 1,
+                "phone": "(438) 738-4935",
+                "extension": 1155,
+                "hireDate": new Date(2010, 3, 3),
+                "fullTime": true,
+                "position": "Chief Technical Officer",
+                "timeInPosition": 1,
+                "employees": [
+                    {
+                        "id": 32,
+                        "name": "Buffy Weber",
+                        "reportsTo": 2,
+                        "phone": "(699) 838-6121",
+                        "extension": 8933,
+                        "hireDate": new Date(2011, 7, 11),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 11,
+                                "name": "Hyacinth Hood",
+                                "reportsTo": 32,
+                                "phone": "(889) 345-2438",
+                                "extension": 8564,
+                                "hireDate": new Date(2014, 2, 3),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 60,
+                                        "name": "Akeem Carr",
+                                        "reportsTo": 11,
+                                        "phone": "(738) 136-2814",
+                                        "extension": 9353,
+                                        "hireDate": new Date(2011, 4, 21),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 78,
+                                        "name": "Rinah Simon",
+                                        "reportsTo": 11,
+                                        "phone": "(285) 912-5271",
+                                        "extension": 7795,
+                                        "hireDate": new Date(2012, 10, 11),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 42,
+                                "name": "Gage Daniels",
+                                "reportsTo": 32,
+                                "phone": "(107) 290-6260",
+                                "extension": 896,
+                                "hireDate": new Date(2013, 5, 16),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 5
+                            },
+                            {
+                                "id": 43,
+                                "name": "Constance Vazquez",
+                                "reportsTo": 32,
+                                "phone": "(800) 301-1978",
+                                "extension": 5141,
+                                "hireDate": new Date(2011, 6, 7),
+                                "fullTime": true,
+                                "position": "Director, Engineering",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 46,
+                                        "name": "Darrel Solis",
+                                        "reportsTo": 43,
+                                        "phone": "(327) 977-0216",
+                                        "extension": 7779,
+                                        "hireDate": new Date(2015, 4, 25),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 47,
+                                                "name": "Brian Yang",
+                                                "reportsTo": 46,
+                                                "phone": "(565) 146-5435",
+                                                "extension": 3885,
+                                                "hireDate": new Date(2012, 9, 27),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 50,
+                                                "name": "Lillian Bradshaw",
+                                                "reportsTo": 46,
+                                                "phone": "(323) 509-3479",
+                                                "extension": 5426,
+                                                "hireDate": new Date(2014, 5, 10),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 51,
+                                                "name": "Christian Palmer",
+                                                "reportsTo": 46,
+                                                "phone": "(490) 421-8718",
+                                                "extension": 3706,
+                                                "hireDate": new Date(2012, 12, 27),
+                                                "fullTime": false,
+                                                "position": "Technical Lead",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 55,
+                                                "name": "Summer Mosley",
+                                                "reportsTo": 46,
+                                                "phone": "(784) 962-2301",
+                                                "extension": 5492,
+                                                "hireDate": new Date(2010, 3, 2),
+                                                "fullTime": true,
+                                                "position": "QA Engineer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 56,
+                                                "name": "Barry Ayers",
+                                                "reportsTo": 46,
+                                                "phone": "(452) 373-9227",
+                                                "extension": 1308,
+                                                "hireDate": new Date(2011, 10, 11),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 59,
+                                                "name": "Keiko Espinoza",
+                                                "reportsTo": 46,
+                                                "phone": "(226) 600-5305",
+                                                "extension": 9363,
+                                                "hireDate": new Date(2011, 9, 18),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 61,
+                                                "name": "Candace Pickett",
+                                                "reportsTo": 46,
+                                                "phone": "(120) 117-7475",
+                                                "extension": 5178,
+                                                "hireDate": new Date(2010, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 63,
+                                        "name": "Mia Caldwell",
+                                        "reportsTo": 43,
+                                        "phone": "(848) 636-6470",
+                                        "extension": 6368,
+                                        "hireDate": new Date(2012, 10, 7),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 65,
+                                                "name": "Thomas Terry",
+                                                "reportsTo": 63,
+                                                "phone": "(764) 831-4248",
+                                                "extension": 3574,
+                                                "hireDate": new Date(2015, 6, 15),
+                                                "fullTime": false,
+                                                "position": "Senior Enterprise Support Officer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 67,
+                                                "name": "Ruth Downs",
+                                                "reportsTo": 63,
+                                                "phone": "(138) 991-1440",
+                                                "extension": 8067,
+                                                "hireDate": new Date(2013, 7, 13),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 70,
+                                                "name": "Yasir Wilder",
+                                                "reportsTo": 63,
+                                                "phone": "(759) 701-8665",
+                                                "extension": 8350,
+                                                "hireDate": new Date(2010, 11, 8),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 71,
+                                                "name": "Flavia Short",
+                                                "reportsTo": 63,
+                                                "phone": "(370) 133-9238",
+                                                "extension": 6390,
+                                                "hireDate": new Date(2013, 2, 21),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 74,
+                                                "name": "Aaron Roach",
+                                                "reportsTo": 63,
+                                                "phone": "(958) 717-9230",
+                                                "extension": 4899,
+                                                "hireDate": new Date(2011, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 75,
+                                                "name": "Eric Russell",
+                                                "reportsTo": 63,
+                                                "phone": "(516) 575-8505",
+                                                "extension": 2224,
+                                                "hireDate": new Date(2012, 10, 28),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 76,
+                                                "name": "Cheyenne Olson",
+                                                "reportsTo": 63,
+                                                "phone": "(241) 645-0257",
+                                                "extension": 9181,
+                                                "hireDate": new Date(2015, 5, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 77,
+                                                "name": "Shaine Avila",
+                                                "reportsTo": 63,
+                                                "phone": "(844) 435-1360",
+                                                "extension": 3374,
+                                                "hireDate": new Date(2010, 1, 31),
+                                                "fullTime": true,
+                                                "position": "UI Designer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 81,
+                                                "name": "Chantale Long",
+                                                "reportsTo": 63,
+                                                "phone": "(252) 419-6891",
+                                                "extension": 7868,
+                                                "hireDate": new Date(2010, 6, 17),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 83,
+                                                "name": "Dane Cruz",
+                                                "reportsTo": 63,
+                                                "phone": "(946) 701-6165",
+                                                "extension": 3828,
+                                                "hireDate": new Date(2014, 10, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 84,
+                                                "name": "Regan Patterson",
+                                                "reportsTo": 63,
+                                                "phone": "(265) 946-1765",
+                                                "extension": 6955,
+                                                "hireDate": new Date(2012, 3, 1),
+                                                "fullTime": true,
+                                                "position": "Technical Writer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 85,
+                                                "name": "Drew Mckay",
+                                                "reportsTo": 63,
+                                                "phone": "(327) 293-0162",
+                                                "extension": 6904,
+                                                "hireDate": new Date(2011, 3, 25),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 88,
+                                                "name": "Bevis Miller",
+                                                "reportsTo": 63,
+                                                "phone": "(525) 557-0169",
+                                                "extension": 6978,
+                                                "hireDate": new Date(2011, 4, 19),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 89,
+                                                "name": "Bruce Mccarty",
+                                                "reportsTo": 63,
+                                                "phone": "(936) 777-8730",
+                                                "extension": 6552,
+                                                "hireDate": new Date(2014, 3, 28),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 5
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 90,
+                                        "name": "Ocean Blair",
+                                        "reportsTo": 43,
+                                        "phone": "(343) 586-6614",
+                                        "extension": 1424,
+                                        "hireDate": new Date(2011, 4, 27),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 91,
+                                                "name": "Guinevere Osborn",
+                                                "reportsTo": 90,
+                                                "phone": "(424) 741-0006",
+                                                "extension": 3166,
+                                                "hireDate": new Date(2014, 11, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 92,
+                                                "name": "Olga Strong",
+                                                "reportsTo": 90,
+                                                "phone": "(949) 417-1168",
+                                                "extension": 4568,
+                                                "hireDate": new Date(2015, 5, 28),
+                                                "fullTime": true,
+                                                "position": "Graphic Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 93,
+                                                "name": "Robert Orr",
+                                                "reportsTo": 90,
+                                                "phone": "(977) 341-3721",
+                                                "extension": 9241,
+                                                "hireDate": new Date(2012, 8, 20),
+                                                "fullTime": false,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 95,
+                                                "name": "Odette Sears",
+                                                "reportsTo": 90,
+                                                "phone": "(264) 818-6576",
+                                                "extension": 1914,
+                                                "hireDate": new Date(2013, 7, 5),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 45,
+                                "name": "Zelda Medina",
+                                "reportsTo": 32,
+                                "phone": "(563) 359-6023",
+                                "extension": 2600,
+                                "hireDate": new Date(2012, 11, 6),
+                                "fullTime": true,
+                                "position": "QA Architect",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    },
+                    {
+                        "id": 52,
+                        "name": "Skyler Cleveland",
+                        "reportsTo": 2,
+                        "phone": "(217) 280-5300",
+                        "extension": 9655,
+                        "hireDate": new Date(2014, 11, 10),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 40,
+                                "name": "Karleigh Garza",
+                                "reportsTo": 52,
+                                "phone": "(370) 983-8796",
+                                "extension": 4044,
+                                "hireDate": new Date(2014, 3, 10),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 49,
+                                        "name": "Elmo Tyson",
+                                        "reportsTo": 40,
+                                        "phone": "(344) 496-9555",
+                                        "extension": 6950,
+                                        "hireDate": new Date(2014, 9, 18),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 72,
+                                        "name": "Stacey Lynn",
+                                        "reportsTo": 40,
+                                        "phone": "(140) 772-7509",
+                                        "extension": 8396,
+                                        "hireDate": new Date(2014, 7, 31),
+                                        "fullTime": false,
+                                        "position": "QA Engineer",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 80,
+                                                "name": "Meredith Parrish",
+                                                "reportsTo": 72,
+                                                "phone": "(714) 284-2408",
+                                                "extension": 7675,
+                                                "hireDate": new Date(2012, 11, 13),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 96,
+                                        "name": "Cassady Whitley",
+                                        "reportsTo": 40,
+                                        "phone": "(996) 587-8405",
+                                        "extension": 780,
+                                        "hireDate": new Date(2013, 5, 7),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 5
+                                    },
+                                    {
+                                        "id": 97,
+                                        "name": "Haviva Campbell",
+                                        "reportsTo": 40,
+                                        "phone": "(263) 887-4689",
+                                        "extension": 2808,
+                                        "hireDate": new Date(2013, 3, 5),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 98,
+                                        "name": "Cameron Ayers",
+                                        "reportsTo": 40,
+                                        "phone": "(470) 709-8030",
+                                        "extension": 2893,
+                                        "hireDate": new Date(2013, 8, 28),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 99,
+                                        "name": "Martha Sargent",
+                                        "reportsTo": 40,
+                                        "phone": "(587) 812-4418",
+                                        "extension": 5099,
+                                        "hireDate": new Date(2014, 2, 27),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 100,
+                                        "name": "Darrel Kinney",
+                                        "reportsTo": 40,
+                                        "phone": "(888) 483-9606",
+                                        "extension": 4779,
+                                        "hireDate": new Date(2014, 3, 24),
+                                        "fullTime": false,
+                                        "position": "Graphic Designer",
+                                        "timeInPosition": 1
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 54,
+                                "name": "Kuame Frye",
+                                "reportsTo": 52,
+                                "phone": "(360) 721-5886",
+                                "extension": 2730,
+                                "hireDate": new Date(2010, 11, 17),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 64,
+                                        "name": "Ori Wynn",
+                                        "reportsTo": 54,
+                                        "phone": "(366) 342-0166",
+                                        "extension": 7252,
+                                        "hireDate": new Date(2015, 6, 21),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 0,
+                                        "employees": [
+                                            {
+                                                "id": 6,
+                                                "name": "Moses Duncan",
+                                                "reportsTo": 64,
+                                                "phone": "(421) 611-4814",
+                                                "extension": 669,
+                                                "hireDate": new Date(2010, 5, 24),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 12,
+                                                "name": "Jamalia Wallace",
+                                                "reportsTo": 64,
+                                                "phone": "(611) 391-8016",
+                                                "extension": 1952,
+                                                "hireDate": new Date(2011, 9, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Designer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 62,
+                                                "name": "Palmer Gregory",
+                                                "reportsTo": 64,
+                                                "phone": "(360) 430-2505",
+                                                "extension": 4337,
+                                                "hireDate": new Date(2014, 8, 30),
+                                                "fullTime": true,
+                                                "position": "Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 68,
+                                                "name": "Mallory Gilliam",
+                                                "reportsTo": 64,
+                                                "phone": "(878) 423-2971",
+                                                "extension": 1341,
+                                                "hireDate": new Date(2014, 7, 24),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 73,
+                                                "name": "Ima Hughes",
+                                                "reportsTo": 64,
+                                                "phone": "(905) 485-8001",
+                                                "extension": 1273,
+                                                "hireDate": new Date(2013, 6, 3),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 79,
+                                                "name": "Duncan Mathews",
+                                                "reportsTo": 64,
+                                                "phone": "(790) 971-9709",
+                                                "extension": 4573,
+                                                "hireDate": new Date(2011, 8, 21),
+                                                "fullTime": false,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 69,
+                                "name": "Sierra Beasley",
+                                "reportsTo": 52,
+                                "phone": "(271) 953-1968",
+                                "extension": 3324,
+                                "hireDate": new Date(2011, 4, 2),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 3,
+                                "employees": [
+                                    {
+                                        "id": 38,
+                                        "name": "Elton Tucker",
+                                        "reportsTo": 69,
+                                        "phone": "(988) 930-9331",
+                                        "extension": 9216,
+                                        "hireDate": new Date(2015, 6, 4),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 1
+                                    },
+                                    {
+                                        "id": 39,
+                                        "name": "Iona Brennan",
+                                        "reportsTo": 69,
+                                        "phone": "(356) 563-0600",
+                                        "extension": 5634,
+                                        "hireDate": new Date(2010, 9, 23),
+                                        "fullTime": true,
+                                        "position": "Junior Support Officer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 53,
+                                        "name": "Paul Campos",
+                                        "reportsTo": 69,
+                                        "phone": "(899) 205-1689",
+                                        "extension": 8586,
+                                        "hireDate": new Date(2011, 3, 17),
+                                        "fullTime": true,
+                                        "position": "Interaction Designer",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 66,
+                                                "name": "Gloria Freeman",
+                                                "reportsTo": 53,
+                                                "phone": "(344) 950-9168",
+                                                "extension": 4738,
+                                                "hireDate": new Date(2013, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Junior Interaction Designer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 57,
+                                        "name": "Alyssa Hansen",
+                                        "reportsTo": 69,
+                                        "phone": "(548) 925-4799",
+                                        "extension": 4716,
+                                        "hireDate": new Date(2011, 1, 19),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 82,
+                                        "name": "Yael Walters",
+                                        "reportsTo": 69,
+                                        "phone": "(311) 489-8191",
+                                        "extension": 6520,
+                                        "hireDate": new Date(2013, 7, 4),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 87,
+                                        "name": "Dahlia Hunt",
+                                        "reportsTo": 69,
+                                        "phone": "(720) 339-5202",
+                                        "extension": 3690,
+                                        "hireDate": new Date(2011, 3, 26),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 94,
+                                        "name": "Adria Stanley",
+                                        "reportsTo": 69,
+                                        "phone": "(536) 357-6391",
+                                        "extension": 3374,
+                                        "hireDate": new Date(2014, 7, 26),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "Priscilla Frank",
+                "reportsTo": 1,
+                "phone": "(278) 927-2684",
+                "extension": 4183,
+                "hireDate": new Date(2014, 11, 30),
+                "fullTime": true,
+                "position": "Chief Product Officer",
+                "timeInPosition": 2,
+                "employees": [
+                    {
+                        "id": 4,
+                        "name": "Ursula Holmes",
+                        "reportsTo": 3,
+                        "phone": "(302) 760-2034",
+                        "extension": 2226,
+                        "hireDate": new Date(2011, 6, 6),
+                        "fullTime": true,
+                        "position": "EVP, Product Strategy",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 24,
+                        "name": "Melvin Carrillo",
+                        "reportsTo": 3,
+                        "phone": "(348) 933-5167",
+                        "extension": 2482,
+                        "hireDate": new Date(2014, 7, 21),
+                        "fullTime": true,
+                        "position": "Director, Developer Relations",
+                        "timeInPosition": 6,
+                        "employees": [
+                            {
+                                "id": 29,
+                                "name": "Martha Chavez",
+                                "reportsTo": 24,
+                                "phone": "(860) 754-3464",
+                                "extension": 4531,
+                                "hireDate": new Date(2013, 3, 12),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 30,
+                                "name": "Oren Fox",
+                                "reportsTo": 24,
+                                "phone": "(572) 414-3299",
+                                "extension": 4849,
+                                "hireDate": new Date(2013, 5, 14),
+                                "fullTime": false,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 41,
+                                "name": "Amos Barr",
+                                "reportsTo": 24,
+                                "phone": "(470) 381-3718",
+                                "extension": 7643,
+                                "hireDate": new Date(2010, 3, 9),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "Anika Vega",
+                "reportsTo": 1,
+                "phone": "(910) 714-1802",
+                "extension": 6353,
+                "hireDate": new Date(2010, 2, 25),
+                "fullTime": true,
+                "position": "Chief Process Officer",
+                "timeInPosition": 5,
+                "employees": [
+                    {
+                        "id": 10,
+                        "name": "Vernon Ballard",
+                        "reportsTo": 5,
+                        "phone": "(702) 185-8890",
+                        "extension": 9242,
+                        "hireDate": new Date(2015, 6, 26),
+                        "fullTime": true,
+                        "position": "Director Facilities",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 16,
+                                "name": "Ali Guy",
+                                "reportsTo": 10,
+                                "phone": "(429) 912-6578",
+                                "extension": 2225,
+                                "hireDate": new Date(2014, 6, 29),
+                                "fullTime": true,
+                                "position": "Operations Manager",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 23,
+                                        "name": "Bruce Reilly",
+                                        "reportsTo": 16,
+                                        "phone": "(995) 243-7302",
+                                        "extension": 4815,
+                                        "hireDate": new Date(2015, 4, 1),
+                                        "fullTime": true,
+                                        "position": "Head of Security",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 26,
+                                                "name": "Rowan Morin",
+                                                "reportsTo": 23,
+                                                "phone": "(792) 141-4374",
+                                                "extension": 1844,
+                                                "hireDate": new Date(2015, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Building Security",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 44,
+                                                "name": "Benedict Soto",
+                                                "reportsTo": 23,
+                                                "phone": "(822) 282-5991",
+                                                "extension": 6422,
+                                                "hireDate": new Date(2012, 6, 1),
+                                                "fullTime": false,
+                                                "position": "Building Security",
+                                                "timeInPosition": 4
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 48,
+                                        "name": "Maryam Rios",
+                                        "reportsTo": 16,
+                                        "phone": "(673) 764-6720",
+                                        "extension": 531,
+                                        "hireDate": new Date(2014, 3, 3),
+                                        "fullTime": true,
+                                        "position": "Team Lead, Personal Assistants",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 58,
+                                                "name": "Rose Mcintyre",
+                                                "reportsTo": 48,
+                                                "phone": "(771) 615-4590",
+                                                "extension": 7094,
+                                                "hireDate": new Date(2015, 6, 30),
+                                                "fullTime": false,
+                                                "position": "Personal Assistant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "Nevada Hart",
+                "reportsTo": 1,
+                "phone": "(254) 220-1576",
+                "extension": 6649,
+                "hireDate": new Date(2015, 8, 17),
+                "fullTime": true,
+                "position": "Chief Financial Officer",
+                "timeInPosition": 6,
+                "employees": [
+                    {
+                        "id": 14,
+                        "name": "Zena Sanford",
+                        "reportsTo": 7,
+                        "phone": "(437) 568-8160",
+                        "extension": 4452,
+                        "hireDate": new Date(2010, 11, 30),
+                        "fullTime": true,
+                        "position": "VP, Finance",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 15,
+                        "name": "Quinlan Howe",
+                        "reportsTo": 7,
+                        "phone": "(464) 334-9748",
+                        "extension": 8722,
+                        "hireDate": new Date(2011, 6, 9),
+                        "fullTime": false,
+                        "position": "Senior Director, Finance",
+                        "timeInPosition": 0,
+                        "employees": [
+                            {
+                                "id": 17,
+                                "name": "Indira Lopez",
+                                "reportsTo": 15,
+                                "phone": "(301) 368-0938",
+                                "extension": 8027,
+                                "hireDate": new Date(2013, 8, 18),
+                                "fullTime": true,
+                                "position": "ERP Team Lead",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 18,
+                                        "name": "Lareina Lara",
+                                        "reportsTo": 17,
+                                        "phone": "(233) 457-7482",
+                                        "extension": 1996,
+                                        "hireDate": new Date(2010, 4, 30),
+                                        "fullTime": true,
+                                        "position": "ERP Solutions Consultant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 19,
+                                        "name": "Maxwell Wise",
+                                        "reportsTo": 17,
+                                        "phone": "(570) 494-2531",
+                                        "extension": 9865,
+                                        "hireDate": new Date(2012, 5, 19),
+                                        "fullTime": true,
+                                        "position": "Systems Engineer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 20,
+                                "name": "Hunter Mcbride",
+                                "reportsTo": 15,
+                                "phone": "(409) 442-7016",
+                                "extension": 4284,
+                                "hireDate": new Date(2012, 10, 20),
+                                "fullTime": true,
+                                "position": "Senior Director, Tax",
+                                "timeInPosition": 3
+                            },
+                            {
+                                "id": 21,
+                                "name": "Jana Serrano",
+                                "reportsTo": 15,
+                                "phone": "(910) 718-4620",
+                                "extension": 6970,
+                                "hireDate": new Date(2010, 4, 2),
+                                "fullTime": true,
+                                "position": "Financial Planning & Analysis Manager",
+                                "timeInPosition": 2
+                            },
+                            {
+                                "id": 22,
+                                "name": "Zachery Shelton",
+                                "reportsTo": 15,
+                                "phone": "(310) 240-8675",
+                                "extension": 4527,
+                                "hireDate": new Date(2011, 11, 23),
+                                "fullTime": false,
+                                "position": "Corporate Finance Controller",
+                                "timeInPosition": 6,
+                                "employees": [
+                                    {
+                                        "id": 28,
+                                        "name": "Cullen Freeman",
+                                        "reportsTo": 22,
+                                        "phone": "(136) 554-8814",
+                                        "extension": 9861,
+                                        "hireDate": new Date(2014, 3, 15),
+                                        "fullTime": true,
+                                        "position": "Treasurer Accountant",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 31,
+                                        "name": "Quinn Dean",
+                                        "reportsTo": 22,
+                                        "phone": "(152) 613-3507",
+                                        "extension": 6621,
+                                        "hireDate": new Date(2015, 1, 29),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 34,
+                                        "name": "Samantha Brady",
+                                        "reportsTo": 22,
+                                        "phone": "(206) 398-4328",
+                                        "extension": 1157,
+                                        "hireDate": new Date(2011, 2, 13),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 35,
+                                                "name": "Tamara Green",
+                                                "reportsTo": 34,
+                                                "phone": "(219) 248-2789",
+                                                "extension": 4880,
+                                                "hireDate": new Date(2014, 2, 4),
+                                                "fullTime": true,
+                                                "position": "Junior Accountant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 36,
+                                        "name": "Olympia Coleman",
+                                        "reportsTo": 22,
+                                        "phone": "(944) 853-6383",
+                                        "extension": 2136,
+                                        "hireDate": new Date(2013, 7, 31),
+                                        "fullTime": true,
+                                        "position": "Collections Manager",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 37,
+                                        "name": "Breanna Goodwin",
+                                        "reportsTo": 22,
+                                        "phone": "(379) 988-9630",
+                                        "extension": 5898,
+                                        "hireDate": new Date(2010, 5, 23),
+                                        "fullTime": false,
+                                        "position": "Payroll Specialist",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 27,
+                                "name": "Curran Travis",
+                                "reportsTo": 15,
+                                "phone": "(438) 135-8033",
+                                "extension": 3841,
+                                "hireDate": new Date(2011, 6, 13),
+                                "fullTime": true,
+                                "position": "Finance Controller",
+                                "timeInPosition": 5
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "Hunter Fry",
+                "reportsTo": 1,
+                "phone": "(766) 358-9858",
+                "extension": 3741,
+                "hireDate": new Date(2011, 2, 12),
+                "fullTime": false,
+                "position": "General Counsel",
+                "timeInPosition": 3,
+                "employees": [
+                    {
+                        "id": 9,
+                        "name": "Kuame Carrillo",
+                        "reportsTo": 8,
+                        "phone": "(192) 383-1305",
+                        "extension": 9228,
+                        "hireDate": new Date(2011, 2, 22),
+                        "fullTime": true,
+                        "position": "Associate General Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 13,
+                        "name": "Stacy Todd",
+                        "reportsTo": 8,
+                        "phone": "(925) 286-3327",
+                        "extension": 8565,
+                        "hireDate": new Date(2014, 7, 5),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 33,
+                        "name": "Valentine Wyatt",
+                        "reportsTo": 8,
+                        "phone": "(165) 166-6205",
+                        "extension": 3588,
+                        "hireDate": new Date(2015, 5, 21),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 5
+                    },
+                    {
+                        "id": 86,
+                        "name": "Daniel Mccarthy",
+                        "reportsTo": 8,
+                        "phone": "(624) 483-6206",
+                        "extension": 9112,
+                        "hireDate": new Date(2013, 12, 3),
+                        "fullTime": false,
+                        "position": "Staff Attorney",
+                        "timeInPosition": 0
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default employees;
diff --git a/vue-options-api-demos/treelist/column-menu/main.js b/vue-options-api-demos/treelist/column-menu/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/column-menu/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/column-menu/main.vue b/vue-options-api-demos/treelist/column-menu/main.vue
new file mode 100644
index 00000000..1e2829b9
--- /dev/null
+++ b/vue-options-api-demos/treelist/column-menu/main.vue
@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <TreeList
+      :style="treeListStyles"
+      :data-items="tree"
+      :expand-field="expandField"
+      :columnMenuFilter="filter"
+      @columnmenufilterchange="handleFilterChange"
+      @sortchange="onSortChange"
+      :sort="sort"
+      :filter="filter"
+      :sub-items-field="subItemsField"
+      @expandchange="onExpandChange"
+      :columns="columns"
+      :column-menu="true"
+    />
+  </div>
+</template>
+
+<script>
+import employees from './data';
+import {
+  TreeList,
+  filterBy,
+  orderBy,
+  extendDataItem,
+  mapTree,
+} from '@progress/kendo-vue-treelist';
+
+export default {
+  components: {
+    TreeList,
+  },
+  data() {
+    return {
+      dataItems: [...employees],
+      subItemsField: 'employees',
+      expandField: 'expanded',
+      filter: [],
+      sort: [],
+      expanded: [1, 2, 32],
+      columns: [
+        {
+          field: 'name',
+          title: 'Name',
+          width: '320px',
+          expandable: true,
+        },
+        {
+          field: 'hireDate',
+          title: 'Hire Date',
+          width: '280px',
+          format: '{0:d}',
+          filter: 'date',
+          columnMenu: true,
+        },
+        {
+          field: 'timeInPosition',
+          title: 'Year(s) in Position',
+          width: '280px',
+          filter: 'numeric',
+          columnMenu: true,
+        },
+        {
+          field: 'fullTime',
+          title: 'Full Time',
+          width: '190px',
+          filter: 'boolean',
+          columnMenu: true,
+        },
+      ],
+    };
+  },
+  computed: {
+    tree() {
+      return mapTree(this.processedData, this.subItemsField, (item) =>
+        extendDataItem(item, this.subItemsField, {
+          [this.expandField]: this.expanded.includes(item.id),
+        })
+      );
+    },
+    processedData() {
+      const dataTree = orderBy(
+        filterBy(this.dataItems, this.filter, this.subItemsField),
+        this.sort,
+        this.subItemsField
+      );
+      return dataTree;
+    },
+    treeListStyles() {
+      return {
+        maxHeight: '510px',
+        overflow: 'auto',
+      };
+    },
+  },
+  methods: {
+    onExpandChange(event) {
+      this.expanded = event.value
+        ? this.expanded.filter((id) => id !== event.dataItem.id)
+        : [...this.expanded, event.dataItem.id];
+    },
+    onSortChange(event) {
+      this.sort = event.sort;
+    },
+    handleFilterChange(event) {
+      this.filter = event.filter;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treelist/column-virtualization/main.js b/vue-options-api-demos/treelist/column-virtualization/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/column-virtualization/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/column-virtualization/main.vue b/vue-options-api-demos/treelist/column-virtualization/main.vue
new file mode 100644
index 00000000..49485595
--- /dev/null
+++ b/vue-options-api-demos/treelist/column-virtualization/main.vue
@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <TreeList
+      :style="treeListStyles"
+      :tableProps="{
+        style: {
+          tableLayout: 'fixed',
+        },
+      }"
+      :columns="columns"
+      :expandField="expandField"
+      :subItemsField="subItemsField"
+      @expandchange="onExpandChange"
+      :data-items="tree"
+      :columnVirtualization="true"
+    />
+  </div>
+</template>
+
+<script>
+import { generateData } from './treelist-data';
+const numberOfColumns = 100;
+const columnWidth = 150;
+const numberOfRows = 7;
+const subItemsField = 'subItems';
+const expandField = 'expanded';
+const { columns, data } = generateData(
+  numberOfColumns,
+  columnWidth,
+  numberOfRows,
+  subItemsField
+);
+
+import {
+  TreeList,
+  mapTree,
+  extendDataItem,
+} from '@progress/kendo-vue-treelist';
+export default {
+  components: {
+    TreeList,
+  },
+  data() {
+    return {
+      dataItems: [...data],
+      subItemsField,
+      expandField,
+      expanded: [],
+      columns,
+    };
+  },
+  computed: {
+    tree() {
+      return mapTree(this.dataItems, this.subItemsField, (item) =>
+        extendDataItem(item, this.subItemsField, {
+          [this.expandField]: this.expanded.includes(item.id),
+        })
+      );
+    },
+    treeListStyles() {
+      return {
+        overflow: 'auto',
+        width: '720px',
+      };
+    },
+  },
+  methods: {
+    onExpandChange(event) {
+      this.expanded = event.value
+        ? this.expanded.filter((id) => id !== event.dataItem.id)
+        : [...this.expanded, event.dataItem.id];
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treelist/column-virtualization/treelist-data.js b/vue-options-api-demos/treelist/column-virtualization/treelist-data.js
new file mode 100644
index 00000000..c5ec456c
--- /dev/null
+++ b/vue-options-api-demos/treelist/column-virtualization/treelist-data.js
@@ -0,0 +1,26 @@
+export function generateData(numberOfColumns, columnWidth, numberOfRows, subItemsField) {
+    const columns = [];
+    for (let c = 1; c <= numberOfColumns; c++) {
+        columns.push({ field: 'Field-' + c.toString(), width: columnWidth });
+    }
+    columns[0].expandable = true;
+
+    const data = [];
+    const reducer = (acc, cur) => {
+        acc[cur[0]] = cur[0] !== 'id' ? 'Sub ' + cur[1] : cur[0];
+        return acc;
+    };
+
+    for (let r = 1; r <= numberOfRows; r++) {
+        const row = { id: r };
+        for (let c = 1; c <= numberOfColumns; c++) {
+            row['Field-' + c] = 'R' + r + ':C' + c;
+        }
+
+        const subItem = Object.entries(row).reduce(reducer, {});
+        row[subItemsField] = [subItem, { ...subItem }, { ...subItem }];
+        data.push(row);
+    }
+
+    return { columns, data };
+}
diff --git a/vue-options-api-demos/treelist/column-width-fixed/data.js b/vue-options-api-demos/treelist/column-width-fixed/data.js
new file mode 100644
index 00000000..f66aec4d
--- /dev/null
+++ b/vue-options-api-demos/treelist/column-width-fixed/data.js
@@ -0,0 +1,1150 @@
+
+const employees = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2,
+        "employees": [
+            {
+                "id": 2,
+                "name": "Guy Wooten",
+                "reportsTo": 1,
+                "phone": "(438) 738-4935",
+                "extension": 1155,
+                "hireDate": new Date(2010, 3, 3),
+                "fullTime": true,
+                "position": "Chief Technical Officer",
+                "timeInPosition": 1,
+                "employees": [
+                    {
+                        "id": 32,
+                        "name": "Buffy Weber",
+                        "reportsTo": 2,
+                        "phone": "(699) 838-6121",
+                        "extension": 8933,
+                        "hireDate": new Date(2011, 7, 11),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 11,
+                                "name": "Hyacinth Hood",
+                                "reportsTo": 32,
+                                "phone": "(889) 345-2438",
+                                "extension": 8564,
+                                "hireDate": new Date(2014, 2, 3),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 60,
+                                        "name": "Akeem Carr",
+                                        "reportsTo": 11,
+                                        "phone": "(738) 136-2814",
+                                        "extension": 9353,
+                                        "hireDate": new Date(2011, 4, 21),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 78,
+                                        "name": "Rinah Simon",
+                                        "reportsTo": 11,
+                                        "phone": "(285) 912-5271",
+                                        "extension": 7795,
+                                        "hireDate": new Date(2012, 10, 11),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 42,
+                                "name": "Gage Daniels",
+                                "reportsTo": 32,
+                                "phone": "(107) 290-6260",
+                                "extension": 896,
+                                "hireDate": new Date(2013, 5, 16),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 5
+                            },
+                            {
+                                "id": 43,
+                                "name": "Constance Vazquez",
+                                "reportsTo": 32,
+                                "phone": "(800) 301-1978",
+                                "extension": 5141,
+                                "hireDate": new Date(2011, 6, 7),
+                                "fullTime": true,
+                                "position": "Director, Engineering",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 46,
+                                        "name": "Darrel Solis",
+                                        "reportsTo": 43,
+                                        "phone": "(327) 977-0216",
+                                        "extension": 7779,
+                                        "hireDate": new Date(2015, 4, 25),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 47,
+                                                "name": "Brian Yang",
+                                                "reportsTo": 46,
+                                                "phone": "(565) 146-5435",
+                                                "extension": 3885,
+                                                "hireDate": new Date(2012, 9, 27),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 50,
+                                                "name": "Lillian Bradshaw",
+                                                "reportsTo": 46,
+                                                "phone": "(323) 509-3479",
+                                                "extension": 5426,
+                                                "hireDate": new Date(2014, 5, 10),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 51,
+                                                "name": "Christian Palmer",
+                                                "reportsTo": 46,
+                                                "phone": "(490) 421-8718",
+                                                "extension": 3706,
+                                                "hireDate": new Date(2012, 12, 27),
+                                                "fullTime": false,
+                                                "position": "Technical Lead",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 55,
+                                                "name": "Summer Mosley",
+                                                "reportsTo": 46,
+                                                "phone": "(784) 962-2301",
+                                                "extension": 5492,
+                                                "hireDate": new Date(2010, 3, 2),
+                                                "fullTime": true,
+                                                "position": "QA Engineer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 56,
+                                                "name": "Barry Ayers",
+                                                "reportsTo": 46,
+                                                "phone": "(452) 373-9227",
+                                                "extension": 1308,
+                                                "hireDate": new Date(2011, 10, 11),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 59,
+                                                "name": "Keiko Espinoza",
+                                                "reportsTo": 46,
+                                                "phone": "(226) 600-5305",
+                                                "extension": 9363,
+                                                "hireDate": new Date(2011, 9, 18),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 61,
+                                                "name": "Candace Pickett",
+                                                "reportsTo": 46,
+                                                "phone": "(120) 117-7475",
+                                                "extension": 5178,
+                                                "hireDate": new Date(2010, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 63,
+                                        "name": "Mia Caldwell",
+                                        "reportsTo": 43,
+                                        "phone": "(848) 636-6470",
+                                        "extension": 6368,
+                                        "hireDate": new Date(2012, 10, 7),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 65,
+                                                "name": "Thomas Terry",
+                                                "reportsTo": 63,
+                                                "phone": "(764) 831-4248",
+                                                "extension": 3574,
+                                                "hireDate": new Date(2015, 6, 15),
+                                                "fullTime": false,
+                                                "position": "Senior Enterprise Support Officer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 67,
+                                                "name": "Ruth Downs",
+                                                "reportsTo": 63,
+                                                "phone": "(138) 991-1440",
+                                                "extension": 8067,
+                                                "hireDate": new Date(2013, 7, 13),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 70,
+                                                "name": "Yasir Wilder",
+                                                "reportsTo": 63,
+                                                "phone": "(759) 701-8665",
+                                                "extension": 8350,
+                                                "hireDate": new Date(2010, 11, 8),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 71,
+                                                "name": "Flavia Short",
+                                                "reportsTo": 63,
+                                                "phone": "(370) 133-9238",
+                                                "extension": 6390,
+                                                "hireDate": new Date(2013, 2, 21),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 74,
+                                                "name": "Aaron Roach",
+                                                "reportsTo": 63,
+                                                "phone": "(958) 717-9230",
+                                                "extension": 4899,
+                                                "hireDate": new Date(2011, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 75,
+                                                "name": "Eric Russell",
+                                                "reportsTo": 63,
+                                                "phone": "(516) 575-8505",
+                                                "extension": 2224,
+                                                "hireDate": new Date(2012, 10, 28),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 76,
+                                                "name": "Cheyenne Olson",
+                                                "reportsTo": 63,
+                                                "phone": "(241) 645-0257",
+                                                "extension": 9181,
+                                                "hireDate": new Date(2015, 5, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 77,
+                                                "name": "Shaine Avila",
+                                                "reportsTo": 63,
+                                                "phone": "(844) 435-1360",
+                                                "extension": 3374,
+                                                "hireDate": new Date(2010, 1, 31),
+                                                "fullTime": true,
+                                                "position": "UI Designer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 81,
+                                                "name": "Chantale Long",
+                                                "reportsTo": 63,
+                                                "phone": "(252) 419-6891",
+                                                "extension": 7868,
+                                                "hireDate": new Date(2010, 6, 17),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 83,
+                                                "name": "Dane Cruz",
+                                                "reportsTo": 63,
+                                                "phone": "(946) 701-6165",
+                                                "extension": 3828,
+                                                "hireDate": new Date(2014, 10, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 84,
+                                                "name": "Regan Patterson",
+                                                "reportsTo": 63,
+                                                "phone": "(265) 946-1765",
+                                                "extension": 6955,
+                                                "hireDate": new Date(2012, 3, 1),
+                                                "fullTime": true,
+                                                "position": "Technical Writer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 85,
+                                                "name": "Drew Mckay",
+                                                "reportsTo": 63,
+                                                "phone": "(327) 293-0162",
+                                                "extension": 6904,
+                                                "hireDate": new Date(2011, 3, 25),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 88,
+                                                "name": "Bevis Miller",
+                                                "reportsTo": 63,
+                                                "phone": "(525) 557-0169",
+                                                "extension": 6978,
+                                                "hireDate": new Date(2011, 4, 19),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 89,
+                                                "name": "Bruce Mccarty",
+                                                "reportsTo": 63,
+                                                "phone": "(936) 777-8730",
+                                                "extension": 6552,
+                                                "hireDate": new Date(2014, 3, 28),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 5
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 90,
+                                        "name": "Ocean Blair",
+                                        "reportsTo": 43,
+                                        "phone": "(343) 586-6614",
+                                        "extension": 1424,
+                                        "hireDate": new Date(2011, 4, 27),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 91,
+                                                "name": "Guinevere Osborn",
+                                                "reportsTo": 90,
+                                                "phone": "(424) 741-0006",
+                                                "extension": 3166,
+                                                "hireDate": new Date(2014, 11, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 92,
+                                                "name": "Olga Strong",
+                                                "reportsTo": 90,
+                                                "phone": "(949) 417-1168",
+                                                "extension": 4568,
+                                                "hireDate": new Date(2015, 5, 28),
+                                                "fullTime": true,
+                                                "position": "Graphic Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 93,
+                                                "name": "Robert Orr",
+                                                "reportsTo": 90,
+                                                "phone": "(977) 341-3721",
+                                                "extension": 9241,
+                                                "hireDate": new Date(2012, 8, 20),
+                                                "fullTime": false,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 95,
+                                                "name": "Odette Sears",
+                                                "reportsTo": 90,
+                                                "phone": "(264) 818-6576",
+                                                "extension": 1914,
+                                                "hireDate": new Date(2013, 7, 5),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 45,
+                                "name": "Zelda Medina",
+                                "reportsTo": 32,
+                                "phone": "(563) 359-6023",
+                                "extension": 2600,
+                                "hireDate": new Date(2012, 11, 6),
+                                "fullTime": true,
+                                "position": "QA Architect",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    },
+                    {
+                        "id": 52,
+                        "name": "Skyler Cleveland",
+                        "reportsTo": 2,
+                        "phone": "(217) 280-5300",
+                        "extension": 9655,
+                        "hireDate": new Date(2014, 11, 10),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 40,
+                                "name": "Karleigh Garza",
+                                "reportsTo": 52,
+                                "phone": "(370) 983-8796",
+                                "extension": 4044,
+                                "hireDate": new Date(2014, 3, 10),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 49,
+                                        "name": "Elmo Tyson",
+                                        "reportsTo": 40,
+                                        "phone": "(344) 496-9555",
+                                        "extension": 6950,
+                                        "hireDate": new Date(2014, 9, 18),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 72,
+                                        "name": "Stacey Lynn",
+                                        "reportsTo": 40,
+                                        "phone": "(140) 772-7509",
+                                        "extension": 8396,
+                                        "hireDate": new Date(2014, 7, 31),
+                                        "fullTime": false,
+                                        "position": "QA Engineer",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 80,
+                                                "name": "Meredith Parrish",
+                                                "reportsTo": 72,
+                                                "phone": "(714) 284-2408",
+                                                "extension": 7675,
+                                                "hireDate": new Date(2012, 11, 13),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 96,
+                                        "name": "Cassady Whitley",
+                                        "reportsTo": 40,
+                                        "phone": "(996) 587-8405",
+                                        "extension": 780,
+                                        "hireDate": new Date(2013, 5, 7),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 5
+                                    },
+                                    {
+                                        "id": 97,
+                                        "name": "Haviva Campbell",
+                                        "reportsTo": 40,
+                                        "phone": "(263) 887-4689",
+                                        "extension": 2808,
+                                        "hireDate": new Date(2013, 3, 5),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 98,
+                                        "name": "Cameron Ayers",
+                                        "reportsTo": 40,
+                                        "phone": "(470) 709-8030",
+                                        "extension": 2893,
+                                        "hireDate": new Date(2013, 8, 28),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 99,
+                                        "name": "Martha Sargent",
+                                        "reportsTo": 40,
+                                        "phone": "(587) 812-4418",
+                                        "extension": 5099,
+                                        "hireDate": new Date(2014, 2, 27),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 100,
+                                        "name": "Darrel Kinney",
+                                        "reportsTo": 40,
+                                        "phone": "(888) 483-9606",
+                                        "extension": 4779,
+                                        "hireDate": new Date(2014, 3, 24),
+                                        "fullTime": false,
+                                        "position": "Graphic Designer",
+                                        "timeInPosition": 1
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 54,
+                                "name": "Kuame Frye",
+                                "reportsTo": 52,
+                                "phone": "(360) 721-5886",
+                                "extension": 2730,
+                                "hireDate": new Date(2010, 11, 17),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 64,
+                                        "name": "Ori Wynn",
+                                        "reportsTo": 54,
+                                        "phone": "(366) 342-0166",
+                                        "extension": 7252,
+                                        "hireDate": new Date(2015, 6, 21),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 0,
+                                        "employees": [
+                                            {
+                                                "id": 6,
+                                                "name": "Moses Duncan",
+                                                "reportsTo": 64,
+                                                "phone": "(421) 611-4814",
+                                                "extension": 669,
+                                                "hireDate": new Date(2010, 5, 24),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 12,
+                                                "name": "Jamalia Wallace",
+                                                "reportsTo": 64,
+                                                "phone": "(611) 391-8016",
+                                                "extension": 1952,
+                                                "hireDate": new Date(2011, 9, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Designer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 62,
+                                                "name": "Palmer Gregory",
+                                                "reportsTo": 64,
+                                                "phone": "(360) 430-2505",
+                                                "extension": 4337,
+                                                "hireDate": new Date(2014, 8, 30),
+                                                "fullTime": true,
+                                                "position": "Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 68,
+                                                "name": "Mallory Gilliam",
+                                                "reportsTo": 64,
+                                                "phone": "(878) 423-2971",
+                                                "extension": 1341,
+                                                "hireDate": new Date(2014, 7, 24),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 73,
+                                                "name": "Ima Hughes",
+                                                "reportsTo": 64,
+                                                "phone": "(905) 485-8001",
+                                                "extension": 1273,
+                                                "hireDate": new Date(2013, 6, 3),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 79,
+                                                "name": "Duncan Mathews",
+                                                "reportsTo": 64,
+                                                "phone": "(790) 971-9709",
+                                                "extension": 4573,
+                                                "hireDate": new Date(2011, 8, 21),
+                                                "fullTime": false,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 69,
+                                "name": "Sierra Beasley",
+                                "reportsTo": 52,
+                                "phone": "(271) 953-1968",
+                                "extension": 3324,
+                                "hireDate": new Date(2011, 4, 2),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 3,
+                                "employees": [
+                                    {
+                                        "id": 38,
+                                        "name": "Elton Tucker",
+                                        "reportsTo": 69,
+                                        "phone": "(988) 930-9331",
+                                        "extension": 9216,
+                                        "hireDate": new Date(2015, 6, 4),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 1
+                                    },
+                                    {
+                                        "id": 39,
+                                        "name": "Iona Brennan",
+                                        "reportsTo": 69,
+                                        "phone": "(356) 563-0600",
+                                        "extension": 5634,
+                                        "hireDate": new Date(2010, 9, 23),
+                                        "fullTime": true,
+                                        "position": "Junior Support Officer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 53,
+                                        "name": "Paul Campos",
+                                        "reportsTo": 69,
+                                        "phone": "(899) 205-1689",
+                                        "extension": 8586,
+                                        "hireDate": new Date(2011, 3, 17),
+                                        "fullTime": true,
+                                        "position": "Interaction Designer",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 66,
+                                                "name": "Gloria Freeman",
+                                                "reportsTo": 53,
+                                                "phone": "(344) 950-9168",
+                                                "extension": 4738,
+                                                "hireDate": new Date(2013, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Junior Interaction Designer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 57,
+                                        "name": "Alyssa Hansen",
+                                        "reportsTo": 69,
+                                        "phone": "(548) 925-4799",
+                                        "extension": 4716,
+                                        "hireDate": new Date(2011, 1, 19),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 82,
+                                        "name": "Yael Walters",
+                                        "reportsTo": 69,
+                                        "phone": "(311) 489-8191",
+                                        "extension": 6520,
+                                        "hireDate": new Date(2013, 7, 4),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 87,
+                                        "name": "Dahlia Hunt",
+                                        "reportsTo": 69,
+                                        "phone": "(720) 339-5202",
+                                        "extension": 3690,
+                                        "hireDate": new Date(2011, 3, 26),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 94,
+                                        "name": "Adria Stanley",
+                                        "reportsTo": 69,
+                                        "phone": "(536) 357-6391",
+                                        "extension": 3374,
+                                        "hireDate": new Date(2014, 7, 26),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "Priscilla Frank",
+                "reportsTo": 1,
+                "phone": "(278) 927-2684",
+                "extension": 4183,
+                "hireDate": new Date(2014, 11, 30),
+                "fullTime": true,
+                "position": "Chief Product Officer",
+                "timeInPosition": 2,
+                "employees": [
+                    {
+                        "id": 4,
+                        "name": "Ursula Holmes",
+                        "reportsTo": 3,
+                        "phone": "(302) 760-2034",
+                        "extension": 2226,
+                        "hireDate": new Date(2011, 6, 6),
+                        "fullTime": true,
+                        "position": "EVP, Product Strategy",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 24,
+                        "name": "Melvin Carrillo",
+                        "reportsTo": 3,
+                        "phone": "(348) 933-5167",
+                        "extension": 2482,
+                        "hireDate": new Date(2014, 7, 21),
+                        "fullTime": true,
+                        "position": "Director, Developer Relations",
+                        "timeInPosition": 6,
+                        "employees": [
+                            {
+                                "id": 29,
+                                "name": "Martha Chavez",
+                                "reportsTo": 24,
+                                "phone": "(860) 754-3464",
+                                "extension": 4531,
+                                "hireDate": new Date(2013, 3, 12),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 30,
+                                "name": "Oren Fox",
+                                "reportsTo": 24,
+                                "phone": "(572) 414-3299",
+                                "extension": 4849,
+                                "hireDate": new Date(2013, 5, 14),
+                                "fullTime": false,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 41,
+                                "name": "Amos Barr",
+                                "reportsTo": 24,
+                                "phone": "(470) 381-3718",
+                                "extension": 7643,
+                                "hireDate": new Date(2010, 3, 9),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "Anika Vega",
+                "reportsTo": 1,
+                "phone": "(910) 714-1802",
+                "extension": 6353,
+                "hireDate": new Date(2010, 2, 25),
+                "fullTime": true,
+                "position": "Chief Process Officer",
+                "timeInPosition": 5,
+                "employees": [
+                    {
+                        "id": 10,
+                        "name": "Vernon Ballard",
+                        "reportsTo": 5,
+                        "phone": "(702) 185-8890",
+                        "extension": 9242,
+                        "hireDate": new Date(2015, 6, 26),
+                        "fullTime": true,
+                        "position": "Director Facilities",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 16,
+                                "name": "Ali Guy",
+                                "reportsTo": 10,
+                                "phone": "(429) 912-6578",
+                                "extension": 2225,
+                                "hireDate": new Date(2014, 6, 29),
+                                "fullTime": true,
+                                "position": "Operations Manager",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 23,
+                                        "name": "Bruce Reilly",
+                                        "reportsTo": 16,
+                                        "phone": "(995) 243-7302",
+                                        "extension": 4815,
+                                        "hireDate": new Date(2015, 4, 1),
+                                        "fullTime": true,
+                                        "position": "Head of Security",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 26,
+                                                "name": "Rowan Morin",
+                                                "reportsTo": 23,
+                                                "phone": "(792) 141-4374",
+                                                "extension": 1844,
+                                                "hireDate": new Date(2015, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Building Security",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 44,
+                                                "name": "Benedict Soto",
+                                                "reportsTo": 23,
+                                                "phone": "(822) 282-5991",
+                                                "extension": 6422,
+                                                "hireDate": new Date(2012, 6, 1),
+                                                "fullTime": false,
+                                                "position": "Building Security",
+                                                "timeInPosition": 4
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 48,
+                                        "name": "Maryam Rios",
+                                        "reportsTo": 16,
+                                        "phone": "(673) 764-6720",
+                                        "extension": 531,
+                                        "hireDate": new Date(2014, 3, 3),
+                                        "fullTime": true,
+                                        "position": "Team Lead, Personal Assistants",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 58,
+                                                "name": "Rose Mcintyre",
+                                                "reportsTo": 48,
+                                                "phone": "(771) 615-4590",
+                                                "extension": 7094,
+                                                "hireDate": new Date(2015, 6, 30),
+                                                "fullTime": false,
+                                                "position": "Personal Assistant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "Nevada Hart",
+                "reportsTo": 1,
+                "phone": "(254) 220-1576",
+                "extension": 6649,
+                "hireDate": new Date(2015, 8, 17),
+                "fullTime": true,
+                "position": "Chief Financial Officer",
+                "timeInPosition": 6,
+                "employees": [
+                    {
+                        "id": 14,
+                        "name": "Zena Sanford",
+                        "reportsTo": 7,
+                        "phone": "(437) 568-8160",
+                        "extension": 4452,
+                        "hireDate": new Date(2010, 11, 30),
+                        "fullTime": true,
+                        "position": "VP, Finance",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 15,
+                        "name": "Quinlan Howe",
+                        "reportsTo": 7,
+                        "phone": "(464) 334-9748",
+                        "extension": 8722,
+                        "hireDate": new Date(2011, 6, 9),
+                        "fullTime": false,
+                        "position": "Senior Director, Finance",
+                        "timeInPosition": 0,
+                        "employees": [
+                            {
+                                "id": 17,
+                                "name": "Indira Lopez",
+                                "reportsTo": 15,
+                                "phone": "(301) 368-0938",
+                                "extension": 8027,
+                                "hireDate": new Date(2013, 8, 18),
+                                "fullTime": true,
+                                "position": "ERP Team Lead",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 18,
+                                        "name": "Lareina Lara",
+                                        "reportsTo": 17,
+                                        "phone": "(233) 457-7482",
+                                        "extension": 1996,
+                                        "hireDate": new Date(2010, 4, 30),
+                                        "fullTime": true,
+                                        "position": "ERP Solutions Consultant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 19,
+                                        "name": "Maxwell Wise",
+                                        "reportsTo": 17,
+                                        "phone": "(570) 494-2531",
+                                        "extension": 9865,
+                                        "hireDate": new Date(2012, 5, 19),
+                                        "fullTime": true,
+                                        "position": "Systems Engineer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 20,
+                                "name": "Hunter Mcbride",
+                                "reportsTo": 15,
+                                "phone": "(409) 442-7016",
+                                "extension": 4284,
+                                "hireDate": new Date(2012, 10, 20),
+                                "fullTime": true,
+                                "position": "Senior Director, Tax",
+                                "timeInPosition": 3
+                            },
+                            {
+                                "id": 21,
+                                "name": "Jana Serrano",
+                                "reportsTo": 15,
+                                "phone": "(910) 718-4620",
+                                "extension": 6970,
+                                "hireDate": new Date(2010, 4, 2),
+                                "fullTime": true,
+                                "position": "Financial Planning & Analysis Manager",
+                                "timeInPosition": 2
+                            },
+                            {
+                                "id": 22,
+                                "name": "Zachery Shelton",
+                                "reportsTo": 15,
+                                "phone": "(310) 240-8675",
+                                "extension": 4527,
+                                "hireDate": new Date(2011, 11, 23),
+                                "fullTime": false,
+                                "position": "Corporate Finance Controller",
+                                "timeInPosition": 6,
+                                "employees": [
+                                    {
+                                        "id": 28,
+                                        "name": "Cullen Freeman",
+                                        "reportsTo": 22,
+                                        "phone": "(136) 554-8814",
+                                        "extension": 9861,
+                                        "hireDate": new Date(2014, 3, 15),
+                                        "fullTime": true,
+                                        "position": "Treasurer Accountant",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 31,
+                                        "name": "Quinn Dean",
+                                        "reportsTo": 22,
+                                        "phone": "(152) 613-3507",
+                                        "extension": 6621,
+                                        "hireDate": new Date(2015, 1, 29),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 34,
+                                        "name": "Samantha Brady",
+                                        "reportsTo": 22,
+                                        "phone": "(206) 398-4328",
+                                        "extension": 1157,
+                                        "hireDate": new Date(2011, 2, 13),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 35,
+                                                "name": "Tamara Green",
+                                                "reportsTo": 34,
+                                                "phone": "(219) 248-2789",
+                                                "extension": 4880,
+                                                "hireDate": new Date(2014, 2, 4),
+                                                "fullTime": true,
+                                                "position": "Junior Accountant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 36,
+                                        "name": "Olympia Coleman",
+                                        "reportsTo": 22,
+                                        "phone": "(944) 853-6383",
+                                        "extension": 2136,
+                                        "hireDate": new Date(2013, 7, 31),
+                                        "fullTime": true,
+                                        "position": "Collections Manager",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 37,
+                                        "name": "Breanna Goodwin",
+                                        "reportsTo": 22,
+                                        "phone": "(379) 988-9630",
+                                        "extension": 5898,
+                                        "hireDate": new Date(2010, 5, 23),
+                                        "fullTime": false,
+                                        "position": "Payroll Specialist",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 27,
+                                "name": "Curran Travis",
+                                "reportsTo": 15,
+                                "phone": "(438) 135-8033",
+                                "extension": 3841,
+                                "hireDate": new Date(2011, 6, 13),
+                                "fullTime": true,
+                                "position": "Finance Controller",
+                                "timeInPosition": 5
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "Hunter Fry",
+                "reportsTo": 1,
+                "phone": "(766) 358-9858",
+                "extension": 3741,
+                "hireDate": new Date(2011, 2, 12),
+                "fullTime": false,
+                "position": "General Counsel",
+                "timeInPosition": 3,
+                "employees": [
+                    {
+                        "id": 9,
+                        "name": "Kuame Carrillo",
+                        "reportsTo": 8,
+                        "phone": "(192) 383-1305",
+                        "extension": 9228,
+                        "hireDate": new Date(2011, 2, 22),
+                        "fullTime": true,
+                        "position": "Associate General Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 13,
+                        "name": "Stacy Todd",
+                        "reportsTo": 8,
+                        "phone": "(925) 286-3327",
+                        "extension": 8565,
+                        "hireDate": new Date(2014, 7, 5),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 33,
+                        "name": "Valentine Wyatt",
+                        "reportsTo": 8,
+                        "phone": "(165) 166-6205",
+                        "extension": 3588,
+                        "hireDate": new Date(2015, 5, 21),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 5
+                    },
+                    {
+                        "id": 86,
+                        "name": "Daniel Mccarthy",
+                        "reportsTo": 8,
+                        "phone": "(624) 483-6206",
+                        "extension": 9112,
+                        "hireDate": new Date(2013, 12, 3),
+                        "fullTime": false,
+                        "position": "Staff Attorney",
+                        "timeInPosition": 0
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default employees;
diff --git a/vue-options-api-demos/treelist/column-width-fixed/main.js b/vue-options-api-demos/treelist/column-width-fixed/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/column-width-fixed/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/column-width-fixed/main.vue b/vue-options-api-demos/treelist/column-width-fixed/main.vue
new file mode 100644
index 00000000..879c995b
--- /dev/null
+++ b/vue-options-api-demos/treelist/column-width-fixed/main.vue
@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <TreeList
+      :style="{ maxHeight: '510px', overflow: 'auto', width: '820px' }"
+      :table-props="{ style: { width: '800px' } }"
+      :navigatable="true"
+      :dataItems="processedData"
+      :expandField="expandField"
+      :subItemsField="subItemsField"
+      @rowclick="rowClick"
+      @itemchange="onItemChange"
+      @expandchange="onExpandChange"
+      :columns="columns"
+      :toolbar="'toolbar'"
+    >
+    </TreeList>
+  </div>
+</template>
+
+<script>
+import employees from './data';
+import { Button } from '@progress/kendo-vue-buttons';
+import {
+  TreeList,
+  mapTree,
+  extendDataItem,
+} from '@progress/kendo-vue-treelist';
+
+export default {
+  components: {
+    TreeList,
+  },
+  data() {
+    return {
+      dataItems: employees.slice(),
+      expanded: [1, 2, 32],
+      subItemsField: 'employees',
+      expandField: 'expanded',
+      columns: [
+        {
+          field: 'name',
+          title: 'Name',
+          width: '300px',
+          expandable: true,
+        },
+        {
+          field: 'position',
+          title: 'Position',
+          width: '300px',
+        },
+        {
+          field: 'hireDate',
+          title: 'Hire Date',
+          format: '{0:d}',
+          width: '200px',
+        },
+      ],
+    };
+  },
+  computed: {
+    processedData() {
+      return mapTree(this.dataItems, this.subItemsField, (item) =>
+        extendDataItem(item, this.subItemsField, {
+          [this.expandField]: this.expanded.includes(item.id),
+          [this.editField]: item.id === this.editId,
+        })
+      );
+    },
+  },
+  methods: {
+    onExpandChange(event) {
+      this.expanded = event.value
+        ? this.expanded.filter((id) => id !== event.dataItem.id)
+        : [...this.expanded, event.dataItem.id];
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treelist/column-width-percentage/data.js b/vue-options-api-demos/treelist/column-width-percentage/data.js
new file mode 100644
index 00000000..f66aec4d
--- /dev/null
+++ b/vue-options-api-demos/treelist/column-width-percentage/data.js
@@ -0,0 +1,1150 @@
+
+const employees = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2,
+        "employees": [
+            {
+                "id": 2,
+                "name": "Guy Wooten",
+                "reportsTo": 1,
+                "phone": "(438) 738-4935",
+                "extension": 1155,
+                "hireDate": new Date(2010, 3, 3),
+                "fullTime": true,
+                "position": "Chief Technical Officer",
+                "timeInPosition": 1,
+                "employees": [
+                    {
+                        "id": 32,
+                        "name": "Buffy Weber",
+                        "reportsTo": 2,
+                        "phone": "(699) 838-6121",
+                        "extension": 8933,
+                        "hireDate": new Date(2011, 7, 11),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 11,
+                                "name": "Hyacinth Hood",
+                                "reportsTo": 32,
+                                "phone": "(889) 345-2438",
+                                "extension": 8564,
+                                "hireDate": new Date(2014, 2, 3),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 60,
+                                        "name": "Akeem Carr",
+                                        "reportsTo": 11,
+                                        "phone": "(738) 136-2814",
+                                        "extension": 9353,
+                                        "hireDate": new Date(2011, 4, 21),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 78,
+                                        "name": "Rinah Simon",
+                                        "reportsTo": 11,
+                                        "phone": "(285) 912-5271",
+                                        "extension": 7795,
+                                        "hireDate": new Date(2012, 10, 11),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 42,
+                                "name": "Gage Daniels",
+                                "reportsTo": 32,
+                                "phone": "(107) 290-6260",
+                                "extension": 896,
+                                "hireDate": new Date(2013, 5, 16),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 5
+                            },
+                            {
+                                "id": 43,
+                                "name": "Constance Vazquez",
+                                "reportsTo": 32,
+                                "phone": "(800) 301-1978",
+                                "extension": 5141,
+                                "hireDate": new Date(2011, 6, 7),
+                                "fullTime": true,
+                                "position": "Director, Engineering",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 46,
+                                        "name": "Darrel Solis",
+                                        "reportsTo": 43,
+                                        "phone": "(327) 977-0216",
+                                        "extension": 7779,
+                                        "hireDate": new Date(2015, 4, 25),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 47,
+                                                "name": "Brian Yang",
+                                                "reportsTo": 46,
+                                                "phone": "(565) 146-5435",
+                                                "extension": 3885,
+                                                "hireDate": new Date(2012, 9, 27),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 50,
+                                                "name": "Lillian Bradshaw",
+                                                "reportsTo": 46,
+                                                "phone": "(323) 509-3479",
+                                                "extension": 5426,
+                                                "hireDate": new Date(2014, 5, 10),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 51,
+                                                "name": "Christian Palmer",
+                                                "reportsTo": 46,
+                                                "phone": "(490) 421-8718",
+                                                "extension": 3706,
+                                                "hireDate": new Date(2012, 12, 27),
+                                                "fullTime": false,
+                                                "position": "Technical Lead",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 55,
+                                                "name": "Summer Mosley",
+                                                "reportsTo": 46,
+                                                "phone": "(784) 962-2301",
+                                                "extension": 5492,
+                                                "hireDate": new Date(2010, 3, 2),
+                                                "fullTime": true,
+                                                "position": "QA Engineer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 56,
+                                                "name": "Barry Ayers",
+                                                "reportsTo": 46,
+                                                "phone": "(452) 373-9227",
+                                                "extension": 1308,
+                                                "hireDate": new Date(2011, 10, 11),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 59,
+                                                "name": "Keiko Espinoza",
+                                                "reportsTo": 46,
+                                                "phone": "(226) 600-5305",
+                                                "extension": 9363,
+                                                "hireDate": new Date(2011, 9, 18),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 61,
+                                                "name": "Candace Pickett",
+                                                "reportsTo": 46,
+                                                "phone": "(120) 117-7475",
+                                                "extension": 5178,
+                                                "hireDate": new Date(2010, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 63,
+                                        "name": "Mia Caldwell",
+                                        "reportsTo": 43,
+                                        "phone": "(848) 636-6470",
+                                        "extension": 6368,
+                                        "hireDate": new Date(2012, 10, 7),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 65,
+                                                "name": "Thomas Terry",
+                                                "reportsTo": 63,
+                                                "phone": "(764) 831-4248",
+                                                "extension": 3574,
+                                                "hireDate": new Date(2015, 6, 15),
+                                                "fullTime": false,
+                                                "position": "Senior Enterprise Support Officer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 67,
+                                                "name": "Ruth Downs",
+                                                "reportsTo": 63,
+                                                "phone": "(138) 991-1440",
+                                                "extension": 8067,
+                                                "hireDate": new Date(2013, 7, 13),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 70,
+                                                "name": "Yasir Wilder",
+                                                "reportsTo": 63,
+                                                "phone": "(759) 701-8665",
+                                                "extension": 8350,
+                                                "hireDate": new Date(2010, 11, 8),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 71,
+                                                "name": "Flavia Short",
+                                                "reportsTo": 63,
+                                                "phone": "(370) 133-9238",
+                                                "extension": 6390,
+                                                "hireDate": new Date(2013, 2, 21),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 74,
+                                                "name": "Aaron Roach",
+                                                "reportsTo": 63,
+                                                "phone": "(958) 717-9230",
+                                                "extension": 4899,
+                                                "hireDate": new Date(2011, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 75,
+                                                "name": "Eric Russell",
+                                                "reportsTo": 63,
+                                                "phone": "(516) 575-8505",
+                                                "extension": 2224,
+                                                "hireDate": new Date(2012, 10, 28),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 76,
+                                                "name": "Cheyenne Olson",
+                                                "reportsTo": 63,
+                                                "phone": "(241) 645-0257",
+                                                "extension": 9181,
+                                                "hireDate": new Date(2015, 5, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 77,
+                                                "name": "Shaine Avila",
+                                                "reportsTo": 63,
+                                                "phone": "(844) 435-1360",
+                                                "extension": 3374,
+                                                "hireDate": new Date(2010, 1, 31),
+                                                "fullTime": true,
+                                                "position": "UI Designer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 81,
+                                                "name": "Chantale Long",
+                                                "reportsTo": 63,
+                                                "phone": "(252) 419-6891",
+                                                "extension": 7868,
+                                                "hireDate": new Date(2010, 6, 17),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 83,
+                                                "name": "Dane Cruz",
+                                                "reportsTo": 63,
+                                                "phone": "(946) 701-6165",
+                                                "extension": 3828,
+                                                "hireDate": new Date(2014, 10, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 84,
+                                                "name": "Regan Patterson",
+                                                "reportsTo": 63,
+                                                "phone": "(265) 946-1765",
+                                                "extension": 6955,
+                                                "hireDate": new Date(2012, 3, 1),
+                                                "fullTime": true,
+                                                "position": "Technical Writer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 85,
+                                                "name": "Drew Mckay",
+                                                "reportsTo": 63,
+                                                "phone": "(327) 293-0162",
+                                                "extension": 6904,
+                                                "hireDate": new Date(2011, 3, 25),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 88,
+                                                "name": "Bevis Miller",
+                                                "reportsTo": 63,
+                                                "phone": "(525) 557-0169",
+                                                "extension": 6978,
+                                                "hireDate": new Date(2011, 4, 19),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 89,
+                                                "name": "Bruce Mccarty",
+                                                "reportsTo": 63,
+                                                "phone": "(936) 777-8730",
+                                                "extension": 6552,
+                                                "hireDate": new Date(2014, 3, 28),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 5
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 90,
+                                        "name": "Ocean Blair",
+                                        "reportsTo": 43,
+                                        "phone": "(343) 586-6614",
+                                        "extension": 1424,
+                                        "hireDate": new Date(2011, 4, 27),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 91,
+                                                "name": "Guinevere Osborn",
+                                                "reportsTo": 90,
+                                                "phone": "(424) 741-0006",
+                                                "extension": 3166,
+                                                "hireDate": new Date(2014, 11, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 92,
+                                                "name": "Olga Strong",
+                                                "reportsTo": 90,
+                                                "phone": "(949) 417-1168",
+                                                "extension": 4568,
+                                                "hireDate": new Date(2015, 5, 28),
+                                                "fullTime": true,
+                                                "position": "Graphic Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 93,
+                                                "name": "Robert Orr",
+                                                "reportsTo": 90,
+                                                "phone": "(977) 341-3721",
+                                                "extension": 9241,
+                                                "hireDate": new Date(2012, 8, 20),
+                                                "fullTime": false,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 95,
+                                                "name": "Odette Sears",
+                                                "reportsTo": 90,
+                                                "phone": "(264) 818-6576",
+                                                "extension": 1914,
+                                                "hireDate": new Date(2013, 7, 5),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 45,
+                                "name": "Zelda Medina",
+                                "reportsTo": 32,
+                                "phone": "(563) 359-6023",
+                                "extension": 2600,
+                                "hireDate": new Date(2012, 11, 6),
+                                "fullTime": true,
+                                "position": "QA Architect",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    },
+                    {
+                        "id": 52,
+                        "name": "Skyler Cleveland",
+                        "reportsTo": 2,
+                        "phone": "(217) 280-5300",
+                        "extension": 9655,
+                        "hireDate": new Date(2014, 11, 10),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 40,
+                                "name": "Karleigh Garza",
+                                "reportsTo": 52,
+                                "phone": "(370) 983-8796",
+                                "extension": 4044,
+                                "hireDate": new Date(2014, 3, 10),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 49,
+                                        "name": "Elmo Tyson",
+                                        "reportsTo": 40,
+                                        "phone": "(344) 496-9555",
+                                        "extension": 6950,
+                                        "hireDate": new Date(2014, 9, 18),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 72,
+                                        "name": "Stacey Lynn",
+                                        "reportsTo": 40,
+                                        "phone": "(140) 772-7509",
+                                        "extension": 8396,
+                                        "hireDate": new Date(2014, 7, 31),
+                                        "fullTime": false,
+                                        "position": "QA Engineer",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 80,
+                                                "name": "Meredith Parrish",
+                                                "reportsTo": 72,
+                                                "phone": "(714) 284-2408",
+                                                "extension": 7675,
+                                                "hireDate": new Date(2012, 11, 13),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 96,
+                                        "name": "Cassady Whitley",
+                                        "reportsTo": 40,
+                                        "phone": "(996) 587-8405",
+                                        "extension": 780,
+                                        "hireDate": new Date(2013, 5, 7),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 5
+                                    },
+                                    {
+                                        "id": 97,
+                                        "name": "Haviva Campbell",
+                                        "reportsTo": 40,
+                                        "phone": "(263) 887-4689",
+                                        "extension": 2808,
+                                        "hireDate": new Date(2013, 3, 5),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 98,
+                                        "name": "Cameron Ayers",
+                                        "reportsTo": 40,
+                                        "phone": "(470) 709-8030",
+                                        "extension": 2893,
+                                        "hireDate": new Date(2013, 8, 28),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 99,
+                                        "name": "Martha Sargent",
+                                        "reportsTo": 40,
+                                        "phone": "(587) 812-4418",
+                                        "extension": 5099,
+                                        "hireDate": new Date(2014, 2, 27),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 100,
+                                        "name": "Darrel Kinney",
+                                        "reportsTo": 40,
+                                        "phone": "(888) 483-9606",
+                                        "extension": 4779,
+                                        "hireDate": new Date(2014, 3, 24),
+                                        "fullTime": false,
+                                        "position": "Graphic Designer",
+                                        "timeInPosition": 1
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 54,
+                                "name": "Kuame Frye",
+                                "reportsTo": 52,
+                                "phone": "(360) 721-5886",
+                                "extension": 2730,
+                                "hireDate": new Date(2010, 11, 17),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 64,
+                                        "name": "Ori Wynn",
+                                        "reportsTo": 54,
+                                        "phone": "(366) 342-0166",
+                                        "extension": 7252,
+                                        "hireDate": new Date(2015, 6, 21),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 0,
+                                        "employees": [
+                                            {
+                                                "id": 6,
+                                                "name": "Moses Duncan",
+                                                "reportsTo": 64,
+                                                "phone": "(421) 611-4814",
+                                                "extension": 669,
+                                                "hireDate": new Date(2010, 5, 24),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 12,
+                                                "name": "Jamalia Wallace",
+                                                "reportsTo": 64,
+                                                "phone": "(611) 391-8016",
+                                                "extension": 1952,
+                                                "hireDate": new Date(2011, 9, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Designer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 62,
+                                                "name": "Palmer Gregory",
+                                                "reportsTo": 64,
+                                                "phone": "(360) 430-2505",
+                                                "extension": 4337,
+                                                "hireDate": new Date(2014, 8, 30),
+                                                "fullTime": true,
+                                                "position": "Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 68,
+                                                "name": "Mallory Gilliam",
+                                                "reportsTo": 64,
+                                                "phone": "(878) 423-2971",
+                                                "extension": 1341,
+                                                "hireDate": new Date(2014, 7, 24),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 73,
+                                                "name": "Ima Hughes",
+                                                "reportsTo": 64,
+                                                "phone": "(905) 485-8001",
+                                                "extension": 1273,
+                                                "hireDate": new Date(2013, 6, 3),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 79,
+                                                "name": "Duncan Mathews",
+                                                "reportsTo": 64,
+                                                "phone": "(790) 971-9709",
+                                                "extension": 4573,
+                                                "hireDate": new Date(2011, 8, 21),
+                                                "fullTime": false,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 69,
+                                "name": "Sierra Beasley",
+                                "reportsTo": 52,
+                                "phone": "(271) 953-1968",
+                                "extension": 3324,
+                                "hireDate": new Date(2011, 4, 2),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 3,
+                                "employees": [
+                                    {
+                                        "id": 38,
+                                        "name": "Elton Tucker",
+                                        "reportsTo": 69,
+                                        "phone": "(988) 930-9331",
+                                        "extension": 9216,
+                                        "hireDate": new Date(2015, 6, 4),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 1
+                                    },
+                                    {
+                                        "id": 39,
+                                        "name": "Iona Brennan",
+                                        "reportsTo": 69,
+                                        "phone": "(356) 563-0600",
+                                        "extension": 5634,
+                                        "hireDate": new Date(2010, 9, 23),
+                                        "fullTime": true,
+                                        "position": "Junior Support Officer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 53,
+                                        "name": "Paul Campos",
+                                        "reportsTo": 69,
+                                        "phone": "(899) 205-1689",
+                                        "extension": 8586,
+                                        "hireDate": new Date(2011, 3, 17),
+                                        "fullTime": true,
+                                        "position": "Interaction Designer",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 66,
+                                                "name": "Gloria Freeman",
+                                                "reportsTo": 53,
+                                                "phone": "(344) 950-9168",
+                                                "extension": 4738,
+                                                "hireDate": new Date(2013, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Junior Interaction Designer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 57,
+                                        "name": "Alyssa Hansen",
+                                        "reportsTo": 69,
+                                        "phone": "(548) 925-4799",
+                                        "extension": 4716,
+                                        "hireDate": new Date(2011, 1, 19),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 82,
+                                        "name": "Yael Walters",
+                                        "reportsTo": 69,
+                                        "phone": "(311) 489-8191",
+                                        "extension": 6520,
+                                        "hireDate": new Date(2013, 7, 4),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 87,
+                                        "name": "Dahlia Hunt",
+                                        "reportsTo": 69,
+                                        "phone": "(720) 339-5202",
+                                        "extension": 3690,
+                                        "hireDate": new Date(2011, 3, 26),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 94,
+                                        "name": "Adria Stanley",
+                                        "reportsTo": 69,
+                                        "phone": "(536) 357-6391",
+                                        "extension": 3374,
+                                        "hireDate": new Date(2014, 7, 26),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "Priscilla Frank",
+                "reportsTo": 1,
+                "phone": "(278) 927-2684",
+                "extension": 4183,
+                "hireDate": new Date(2014, 11, 30),
+                "fullTime": true,
+                "position": "Chief Product Officer",
+                "timeInPosition": 2,
+                "employees": [
+                    {
+                        "id": 4,
+                        "name": "Ursula Holmes",
+                        "reportsTo": 3,
+                        "phone": "(302) 760-2034",
+                        "extension": 2226,
+                        "hireDate": new Date(2011, 6, 6),
+                        "fullTime": true,
+                        "position": "EVP, Product Strategy",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 24,
+                        "name": "Melvin Carrillo",
+                        "reportsTo": 3,
+                        "phone": "(348) 933-5167",
+                        "extension": 2482,
+                        "hireDate": new Date(2014, 7, 21),
+                        "fullTime": true,
+                        "position": "Director, Developer Relations",
+                        "timeInPosition": 6,
+                        "employees": [
+                            {
+                                "id": 29,
+                                "name": "Martha Chavez",
+                                "reportsTo": 24,
+                                "phone": "(860) 754-3464",
+                                "extension": 4531,
+                                "hireDate": new Date(2013, 3, 12),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 30,
+                                "name": "Oren Fox",
+                                "reportsTo": 24,
+                                "phone": "(572) 414-3299",
+                                "extension": 4849,
+                                "hireDate": new Date(2013, 5, 14),
+                                "fullTime": false,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 41,
+                                "name": "Amos Barr",
+                                "reportsTo": 24,
+                                "phone": "(470) 381-3718",
+                                "extension": 7643,
+                                "hireDate": new Date(2010, 3, 9),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "Anika Vega",
+                "reportsTo": 1,
+                "phone": "(910) 714-1802",
+                "extension": 6353,
+                "hireDate": new Date(2010, 2, 25),
+                "fullTime": true,
+                "position": "Chief Process Officer",
+                "timeInPosition": 5,
+                "employees": [
+                    {
+                        "id": 10,
+                        "name": "Vernon Ballard",
+                        "reportsTo": 5,
+                        "phone": "(702) 185-8890",
+                        "extension": 9242,
+                        "hireDate": new Date(2015, 6, 26),
+                        "fullTime": true,
+                        "position": "Director Facilities",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 16,
+                                "name": "Ali Guy",
+                                "reportsTo": 10,
+                                "phone": "(429) 912-6578",
+                                "extension": 2225,
+                                "hireDate": new Date(2014, 6, 29),
+                                "fullTime": true,
+                                "position": "Operations Manager",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 23,
+                                        "name": "Bruce Reilly",
+                                        "reportsTo": 16,
+                                        "phone": "(995) 243-7302",
+                                        "extension": 4815,
+                                        "hireDate": new Date(2015, 4, 1),
+                                        "fullTime": true,
+                                        "position": "Head of Security",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 26,
+                                                "name": "Rowan Morin",
+                                                "reportsTo": 23,
+                                                "phone": "(792) 141-4374",
+                                                "extension": 1844,
+                                                "hireDate": new Date(2015, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Building Security",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 44,
+                                                "name": "Benedict Soto",
+                                                "reportsTo": 23,
+                                                "phone": "(822) 282-5991",
+                                                "extension": 6422,
+                                                "hireDate": new Date(2012, 6, 1),
+                                                "fullTime": false,
+                                                "position": "Building Security",
+                                                "timeInPosition": 4
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 48,
+                                        "name": "Maryam Rios",
+                                        "reportsTo": 16,
+                                        "phone": "(673) 764-6720",
+                                        "extension": 531,
+                                        "hireDate": new Date(2014, 3, 3),
+                                        "fullTime": true,
+                                        "position": "Team Lead, Personal Assistants",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 58,
+                                                "name": "Rose Mcintyre",
+                                                "reportsTo": 48,
+                                                "phone": "(771) 615-4590",
+                                                "extension": 7094,
+                                                "hireDate": new Date(2015, 6, 30),
+                                                "fullTime": false,
+                                                "position": "Personal Assistant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "Nevada Hart",
+                "reportsTo": 1,
+                "phone": "(254) 220-1576",
+                "extension": 6649,
+                "hireDate": new Date(2015, 8, 17),
+                "fullTime": true,
+                "position": "Chief Financial Officer",
+                "timeInPosition": 6,
+                "employees": [
+                    {
+                        "id": 14,
+                        "name": "Zena Sanford",
+                        "reportsTo": 7,
+                        "phone": "(437) 568-8160",
+                        "extension": 4452,
+                        "hireDate": new Date(2010, 11, 30),
+                        "fullTime": true,
+                        "position": "VP, Finance",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 15,
+                        "name": "Quinlan Howe",
+                        "reportsTo": 7,
+                        "phone": "(464) 334-9748",
+                        "extension": 8722,
+                        "hireDate": new Date(2011, 6, 9),
+                        "fullTime": false,
+                        "position": "Senior Director, Finance",
+                        "timeInPosition": 0,
+                        "employees": [
+                            {
+                                "id": 17,
+                                "name": "Indira Lopez",
+                                "reportsTo": 15,
+                                "phone": "(301) 368-0938",
+                                "extension": 8027,
+                                "hireDate": new Date(2013, 8, 18),
+                                "fullTime": true,
+                                "position": "ERP Team Lead",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 18,
+                                        "name": "Lareina Lara",
+                                        "reportsTo": 17,
+                                        "phone": "(233) 457-7482",
+                                        "extension": 1996,
+                                        "hireDate": new Date(2010, 4, 30),
+                                        "fullTime": true,
+                                        "position": "ERP Solutions Consultant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 19,
+                                        "name": "Maxwell Wise",
+                                        "reportsTo": 17,
+                                        "phone": "(570) 494-2531",
+                                        "extension": 9865,
+                                        "hireDate": new Date(2012, 5, 19),
+                                        "fullTime": true,
+                                        "position": "Systems Engineer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 20,
+                                "name": "Hunter Mcbride",
+                                "reportsTo": 15,
+                                "phone": "(409) 442-7016",
+                                "extension": 4284,
+                                "hireDate": new Date(2012, 10, 20),
+                                "fullTime": true,
+                                "position": "Senior Director, Tax",
+                                "timeInPosition": 3
+                            },
+                            {
+                                "id": 21,
+                                "name": "Jana Serrano",
+                                "reportsTo": 15,
+                                "phone": "(910) 718-4620",
+                                "extension": 6970,
+                                "hireDate": new Date(2010, 4, 2),
+                                "fullTime": true,
+                                "position": "Financial Planning & Analysis Manager",
+                                "timeInPosition": 2
+                            },
+                            {
+                                "id": 22,
+                                "name": "Zachery Shelton",
+                                "reportsTo": 15,
+                                "phone": "(310) 240-8675",
+                                "extension": 4527,
+                                "hireDate": new Date(2011, 11, 23),
+                                "fullTime": false,
+                                "position": "Corporate Finance Controller",
+                                "timeInPosition": 6,
+                                "employees": [
+                                    {
+                                        "id": 28,
+                                        "name": "Cullen Freeman",
+                                        "reportsTo": 22,
+                                        "phone": "(136) 554-8814",
+                                        "extension": 9861,
+                                        "hireDate": new Date(2014, 3, 15),
+                                        "fullTime": true,
+                                        "position": "Treasurer Accountant",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 31,
+                                        "name": "Quinn Dean",
+                                        "reportsTo": 22,
+                                        "phone": "(152) 613-3507",
+                                        "extension": 6621,
+                                        "hireDate": new Date(2015, 1, 29),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 34,
+                                        "name": "Samantha Brady",
+                                        "reportsTo": 22,
+                                        "phone": "(206) 398-4328",
+                                        "extension": 1157,
+                                        "hireDate": new Date(2011, 2, 13),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 35,
+                                                "name": "Tamara Green",
+                                                "reportsTo": 34,
+                                                "phone": "(219) 248-2789",
+                                                "extension": 4880,
+                                                "hireDate": new Date(2014, 2, 4),
+                                                "fullTime": true,
+                                                "position": "Junior Accountant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 36,
+                                        "name": "Olympia Coleman",
+                                        "reportsTo": 22,
+                                        "phone": "(944) 853-6383",
+                                        "extension": 2136,
+                                        "hireDate": new Date(2013, 7, 31),
+                                        "fullTime": true,
+                                        "position": "Collections Manager",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 37,
+                                        "name": "Breanna Goodwin",
+                                        "reportsTo": 22,
+                                        "phone": "(379) 988-9630",
+                                        "extension": 5898,
+                                        "hireDate": new Date(2010, 5, 23),
+                                        "fullTime": false,
+                                        "position": "Payroll Specialist",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 27,
+                                "name": "Curran Travis",
+                                "reportsTo": 15,
+                                "phone": "(438) 135-8033",
+                                "extension": 3841,
+                                "hireDate": new Date(2011, 6, 13),
+                                "fullTime": true,
+                                "position": "Finance Controller",
+                                "timeInPosition": 5
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "Hunter Fry",
+                "reportsTo": 1,
+                "phone": "(766) 358-9858",
+                "extension": 3741,
+                "hireDate": new Date(2011, 2, 12),
+                "fullTime": false,
+                "position": "General Counsel",
+                "timeInPosition": 3,
+                "employees": [
+                    {
+                        "id": 9,
+                        "name": "Kuame Carrillo",
+                        "reportsTo": 8,
+                        "phone": "(192) 383-1305",
+                        "extension": 9228,
+                        "hireDate": new Date(2011, 2, 22),
+                        "fullTime": true,
+                        "position": "Associate General Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 13,
+                        "name": "Stacy Todd",
+                        "reportsTo": 8,
+                        "phone": "(925) 286-3327",
+                        "extension": 8565,
+                        "hireDate": new Date(2014, 7, 5),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 33,
+                        "name": "Valentine Wyatt",
+                        "reportsTo": 8,
+                        "phone": "(165) 166-6205",
+                        "extension": 3588,
+                        "hireDate": new Date(2015, 5, 21),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 5
+                    },
+                    {
+                        "id": 86,
+                        "name": "Daniel Mccarthy",
+                        "reportsTo": 8,
+                        "phone": "(624) 483-6206",
+                        "extension": 9112,
+                        "hireDate": new Date(2013, 12, 3),
+                        "fullTime": false,
+                        "position": "Staff Attorney",
+                        "timeInPosition": 0
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default employees;
diff --git a/vue-options-api-demos/treelist/column-width-percentage/main.js b/vue-options-api-demos/treelist/column-width-percentage/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/column-width-percentage/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/column-width-percentage/main.vue b/vue-options-api-demos/treelist/column-width-percentage/main.vue
new file mode 100644
index 00000000..740c2df8
--- /dev/null
+++ b/vue-options-api-demos/treelist/column-width-percentage/main.vue
@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <TreeList
+      :style="{ maxHeight: '510px', overflow: 'auto', width: '70%' }"
+      :table-props="{ style: { width: '900px' } }"
+      :navigatable="true"
+      :dataItems="processedData"
+      :expandField="expandField"
+      :subItemsField="subItemsField"
+      @expandchange="onExpandChange"
+      :columns="columns"
+      :toolbar="'toolbar'"
+    >
+    </TreeList>
+  </div>
+</template>
+
+<script>
+import employees from './data';
+import {
+  TreeList,
+  mapTree,
+  extendDataItem,
+} from '@progress/kendo-vue-treelist';
+
+export default {
+  components: {
+    TreeList,
+  },
+  data() {
+    return {
+      dataItems: employees.slice(),
+      expanded: [1, 2, 32],
+      subItemsField: 'employees',
+      expandField: 'expanded',
+      columns: [
+        {
+          field: 'name',
+          title: 'Name',
+          width: '40%',
+          expandable: true,
+        },
+        {
+          field: 'position',
+          title: 'Position',
+          width: '40%',
+        },
+        {
+          field: 'hireDate',
+          title: 'Hire Date',
+          format: '{0:d}',
+          width: '20%',
+        },
+      ],
+    };
+  },
+  computed: {
+    processedData() {
+      return mapTree(this.dataItems, this.subItemsField, (item) =>
+        extendDataItem(item, this.subItemsField, {
+          [this.expandField]: this.expanded.includes(item.id),
+        })
+      );
+    },
+  },
+  methods: {
+    onExpandChange(event) {
+      this.expanded = event.value
+        ? this.expanded.filter((id) => id !== event.dataItem.id)
+        : [...this.expanded, event.dataItem.id];
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treelist/dragdrop/data.js b/vue-options-api-demos/treelist/dragdrop/data.js
new file mode 100644
index 00000000..f66aec4d
--- /dev/null
+++ b/vue-options-api-demos/treelist/dragdrop/data.js
@@ -0,0 +1,1150 @@
+
+const employees = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2,
+        "employees": [
+            {
+                "id": 2,
+                "name": "Guy Wooten",
+                "reportsTo": 1,
+                "phone": "(438) 738-4935",
+                "extension": 1155,
+                "hireDate": new Date(2010, 3, 3),
+                "fullTime": true,
+                "position": "Chief Technical Officer",
+                "timeInPosition": 1,
+                "employees": [
+                    {
+                        "id": 32,
+                        "name": "Buffy Weber",
+                        "reportsTo": 2,
+                        "phone": "(699) 838-6121",
+                        "extension": 8933,
+                        "hireDate": new Date(2011, 7, 11),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 11,
+                                "name": "Hyacinth Hood",
+                                "reportsTo": 32,
+                                "phone": "(889) 345-2438",
+                                "extension": 8564,
+                                "hireDate": new Date(2014, 2, 3),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 60,
+                                        "name": "Akeem Carr",
+                                        "reportsTo": 11,
+                                        "phone": "(738) 136-2814",
+                                        "extension": 9353,
+                                        "hireDate": new Date(2011, 4, 21),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 78,
+                                        "name": "Rinah Simon",
+                                        "reportsTo": 11,
+                                        "phone": "(285) 912-5271",
+                                        "extension": 7795,
+                                        "hireDate": new Date(2012, 10, 11),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 42,
+                                "name": "Gage Daniels",
+                                "reportsTo": 32,
+                                "phone": "(107) 290-6260",
+                                "extension": 896,
+                                "hireDate": new Date(2013, 5, 16),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 5
+                            },
+                            {
+                                "id": 43,
+                                "name": "Constance Vazquez",
+                                "reportsTo": 32,
+                                "phone": "(800) 301-1978",
+                                "extension": 5141,
+                                "hireDate": new Date(2011, 6, 7),
+                                "fullTime": true,
+                                "position": "Director, Engineering",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 46,
+                                        "name": "Darrel Solis",
+                                        "reportsTo": 43,
+                                        "phone": "(327) 977-0216",
+                                        "extension": 7779,
+                                        "hireDate": new Date(2015, 4, 25),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 47,
+                                                "name": "Brian Yang",
+                                                "reportsTo": 46,
+                                                "phone": "(565) 146-5435",
+                                                "extension": 3885,
+                                                "hireDate": new Date(2012, 9, 27),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 50,
+                                                "name": "Lillian Bradshaw",
+                                                "reportsTo": 46,
+                                                "phone": "(323) 509-3479",
+                                                "extension": 5426,
+                                                "hireDate": new Date(2014, 5, 10),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 51,
+                                                "name": "Christian Palmer",
+                                                "reportsTo": 46,
+                                                "phone": "(490) 421-8718",
+                                                "extension": 3706,
+                                                "hireDate": new Date(2012, 12, 27),
+                                                "fullTime": false,
+                                                "position": "Technical Lead",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 55,
+                                                "name": "Summer Mosley",
+                                                "reportsTo": 46,
+                                                "phone": "(784) 962-2301",
+                                                "extension": 5492,
+                                                "hireDate": new Date(2010, 3, 2),
+                                                "fullTime": true,
+                                                "position": "QA Engineer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 56,
+                                                "name": "Barry Ayers",
+                                                "reportsTo": 46,
+                                                "phone": "(452) 373-9227",
+                                                "extension": 1308,
+                                                "hireDate": new Date(2011, 10, 11),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 59,
+                                                "name": "Keiko Espinoza",
+                                                "reportsTo": 46,
+                                                "phone": "(226) 600-5305",
+                                                "extension": 9363,
+                                                "hireDate": new Date(2011, 9, 18),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 61,
+                                                "name": "Candace Pickett",
+                                                "reportsTo": 46,
+                                                "phone": "(120) 117-7475",
+                                                "extension": 5178,
+                                                "hireDate": new Date(2010, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 63,
+                                        "name": "Mia Caldwell",
+                                        "reportsTo": 43,
+                                        "phone": "(848) 636-6470",
+                                        "extension": 6368,
+                                        "hireDate": new Date(2012, 10, 7),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 65,
+                                                "name": "Thomas Terry",
+                                                "reportsTo": 63,
+                                                "phone": "(764) 831-4248",
+                                                "extension": 3574,
+                                                "hireDate": new Date(2015, 6, 15),
+                                                "fullTime": false,
+                                                "position": "Senior Enterprise Support Officer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 67,
+                                                "name": "Ruth Downs",
+                                                "reportsTo": 63,
+                                                "phone": "(138) 991-1440",
+                                                "extension": 8067,
+                                                "hireDate": new Date(2013, 7, 13),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 70,
+                                                "name": "Yasir Wilder",
+                                                "reportsTo": 63,
+                                                "phone": "(759) 701-8665",
+                                                "extension": 8350,
+                                                "hireDate": new Date(2010, 11, 8),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 71,
+                                                "name": "Flavia Short",
+                                                "reportsTo": 63,
+                                                "phone": "(370) 133-9238",
+                                                "extension": 6390,
+                                                "hireDate": new Date(2013, 2, 21),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 74,
+                                                "name": "Aaron Roach",
+                                                "reportsTo": 63,
+                                                "phone": "(958) 717-9230",
+                                                "extension": 4899,
+                                                "hireDate": new Date(2011, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 75,
+                                                "name": "Eric Russell",
+                                                "reportsTo": 63,
+                                                "phone": "(516) 575-8505",
+                                                "extension": 2224,
+                                                "hireDate": new Date(2012, 10, 28),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 76,
+                                                "name": "Cheyenne Olson",
+                                                "reportsTo": 63,
+                                                "phone": "(241) 645-0257",
+                                                "extension": 9181,
+                                                "hireDate": new Date(2015, 5, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 77,
+                                                "name": "Shaine Avila",
+                                                "reportsTo": 63,
+                                                "phone": "(844) 435-1360",
+                                                "extension": 3374,
+                                                "hireDate": new Date(2010, 1, 31),
+                                                "fullTime": true,
+                                                "position": "UI Designer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 81,
+                                                "name": "Chantale Long",
+                                                "reportsTo": 63,
+                                                "phone": "(252) 419-6891",
+                                                "extension": 7868,
+                                                "hireDate": new Date(2010, 6, 17),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 83,
+                                                "name": "Dane Cruz",
+                                                "reportsTo": 63,
+                                                "phone": "(946) 701-6165",
+                                                "extension": 3828,
+                                                "hireDate": new Date(2014, 10, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 84,
+                                                "name": "Regan Patterson",
+                                                "reportsTo": 63,
+                                                "phone": "(265) 946-1765",
+                                                "extension": 6955,
+                                                "hireDate": new Date(2012, 3, 1),
+                                                "fullTime": true,
+                                                "position": "Technical Writer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 85,
+                                                "name": "Drew Mckay",
+                                                "reportsTo": 63,
+                                                "phone": "(327) 293-0162",
+                                                "extension": 6904,
+                                                "hireDate": new Date(2011, 3, 25),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 88,
+                                                "name": "Bevis Miller",
+                                                "reportsTo": 63,
+                                                "phone": "(525) 557-0169",
+                                                "extension": 6978,
+                                                "hireDate": new Date(2011, 4, 19),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 89,
+                                                "name": "Bruce Mccarty",
+                                                "reportsTo": 63,
+                                                "phone": "(936) 777-8730",
+                                                "extension": 6552,
+                                                "hireDate": new Date(2014, 3, 28),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 5
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 90,
+                                        "name": "Ocean Blair",
+                                        "reportsTo": 43,
+                                        "phone": "(343) 586-6614",
+                                        "extension": 1424,
+                                        "hireDate": new Date(2011, 4, 27),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 91,
+                                                "name": "Guinevere Osborn",
+                                                "reportsTo": 90,
+                                                "phone": "(424) 741-0006",
+                                                "extension": 3166,
+                                                "hireDate": new Date(2014, 11, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 92,
+                                                "name": "Olga Strong",
+                                                "reportsTo": 90,
+                                                "phone": "(949) 417-1168",
+                                                "extension": 4568,
+                                                "hireDate": new Date(2015, 5, 28),
+                                                "fullTime": true,
+                                                "position": "Graphic Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 93,
+                                                "name": "Robert Orr",
+                                                "reportsTo": 90,
+                                                "phone": "(977) 341-3721",
+                                                "extension": 9241,
+                                                "hireDate": new Date(2012, 8, 20),
+                                                "fullTime": false,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 95,
+                                                "name": "Odette Sears",
+                                                "reportsTo": 90,
+                                                "phone": "(264) 818-6576",
+                                                "extension": 1914,
+                                                "hireDate": new Date(2013, 7, 5),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 45,
+                                "name": "Zelda Medina",
+                                "reportsTo": 32,
+                                "phone": "(563) 359-6023",
+                                "extension": 2600,
+                                "hireDate": new Date(2012, 11, 6),
+                                "fullTime": true,
+                                "position": "QA Architect",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    },
+                    {
+                        "id": 52,
+                        "name": "Skyler Cleveland",
+                        "reportsTo": 2,
+                        "phone": "(217) 280-5300",
+                        "extension": 9655,
+                        "hireDate": new Date(2014, 11, 10),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 40,
+                                "name": "Karleigh Garza",
+                                "reportsTo": 52,
+                                "phone": "(370) 983-8796",
+                                "extension": 4044,
+                                "hireDate": new Date(2014, 3, 10),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 49,
+                                        "name": "Elmo Tyson",
+                                        "reportsTo": 40,
+                                        "phone": "(344) 496-9555",
+                                        "extension": 6950,
+                                        "hireDate": new Date(2014, 9, 18),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 72,
+                                        "name": "Stacey Lynn",
+                                        "reportsTo": 40,
+                                        "phone": "(140) 772-7509",
+                                        "extension": 8396,
+                                        "hireDate": new Date(2014, 7, 31),
+                                        "fullTime": false,
+                                        "position": "QA Engineer",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 80,
+                                                "name": "Meredith Parrish",
+                                                "reportsTo": 72,
+                                                "phone": "(714) 284-2408",
+                                                "extension": 7675,
+                                                "hireDate": new Date(2012, 11, 13),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 96,
+                                        "name": "Cassady Whitley",
+                                        "reportsTo": 40,
+                                        "phone": "(996) 587-8405",
+                                        "extension": 780,
+                                        "hireDate": new Date(2013, 5, 7),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 5
+                                    },
+                                    {
+                                        "id": 97,
+                                        "name": "Haviva Campbell",
+                                        "reportsTo": 40,
+                                        "phone": "(263) 887-4689",
+                                        "extension": 2808,
+                                        "hireDate": new Date(2013, 3, 5),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 98,
+                                        "name": "Cameron Ayers",
+                                        "reportsTo": 40,
+                                        "phone": "(470) 709-8030",
+                                        "extension": 2893,
+                                        "hireDate": new Date(2013, 8, 28),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 99,
+                                        "name": "Martha Sargent",
+                                        "reportsTo": 40,
+                                        "phone": "(587) 812-4418",
+                                        "extension": 5099,
+                                        "hireDate": new Date(2014, 2, 27),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 100,
+                                        "name": "Darrel Kinney",
+                                        "reportsTo": 40,
+                                        "phone": "(888) 483-9606",
+                                        "extension": 4779,
+                                        "hireDate": new Date(2014, 3, 24),
+                                        "fullTime": false,
+                                        "position": "Graphic Designer",
+                                        "timeInPosition": 1
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 54,
+                                "name": "Kuame Frye",
+                                "reportsTo": 52,
+                                "phone": "(360) 721-5886",
+                                "extension": 2730,
+                                "hireDate": new Date(2010, 11, 17),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 64,
+                                        "name": "Ori Wynn",
+                                        "reportsTo": 54,
+                                        "phone": "(366) 342-0166",
+                                        "extension": 7252,
+                                        "hireDate": new Date(2015, 6, 21),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 0,
+                                        "employees": [
+                                            {
+                                                "id": 6,
+                                                "name": "Moses Duncan",
+                                                "reportsTo": 64,
+                                                "phone": "(421) 611-4814",
+                                                "extension": 669,
+                                                "hireDate": new Date(2010, 5, 24),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 12,
+                                                "name": "Jamalia Wallace",
+                                                "reportsTo": 64,
+                                                "phone": "(611) 391-8016",
+                                                "extension": 1952,
+                                                "hireDate": new Date(2011, 9, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Designer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 62,
+                                                "name": "Palmer Gregory",
+                                                "reportsTo": 64,
+                                                "phone": "(360) 430-2505",
+                                                "extension": 4337,
+                                                "hireDate": new Date(2014, 8, 30),
+                                                "fullTime": true,
+                                                "position": "Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 68,
+                                                "name": "Mallory Gilliam",
+                                                "reportsTo": 64,
+                                                "phone": "(878) 423-2971",
+                                                "extension": 1341,
+                                                "hireDate": new Date(2014, 7, 24),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 73,
+                                                "name": "Ima Hughes",
+                                                "reportsTo": 64,
+                                                "phone": "(905) 485-8001",
+                                                "extension": 1273,
+                                                "hireDate": new Date(2013, 6, 3),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 79,
+                                                "name": "Duncan Mathews",
+                                                "reportsTo": 64,
+                                                "phone": "(790) 971-9709",
+                                                "extension": 4573,
+                                                "hireDate": new Date(2011, 8, 21),
+                                                "fullTime": false,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 69,
+                                "name": "Sierra Beasley",
+                                "reportsTo": 52,
+                                "phone": "(271) 953-1968",
+                                "extension": 3324,
+                                "hireDate": new Date(2011, 4, 2),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 3,
+                                "employees": [
+                                    {
+                                        "id": 38,
+                                        "name": "Elton Tucker",
+                                        "reportsTo": 69,
+                                        "phone": "(988) 930-9331",
+                                        "extension": 9216,
+                                        "hireDate": new Date(2015, 6, 4),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 1
+                                    },
+                                    {
+                                        "id": 39,
+                                        "name": "Iona Brennan",
+                                        "reportsTo": 69,
+                                        "phone": "(356) 563-0600",
+                                        "extension": 5634,
+                                        "hireDate": new Date(2010, 9, 23),
+                                        "fullTime": true,
+                                        "position": "Junior Support Officer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 53,
+                                        "name": "Paul Campos",
+                                        "reportsTo": 69,
+                                        "phone": "(899) 205-1689",
+                                        "extension": 8586,
+                                        "hireDate": new Date(2011, 3, 17),
+                                        "fullTime": true,
+                                        "position": "Interaction Designer",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 66,
+                                                "name": "Gloria Freeman",
+                                                "reportsTo": 53,
+                                                "phone": "(344) 950-9168",
+                                                "extension": 4738,
+                                                "hireDate": new Date(2013, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Junior Interaction Designer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 57,
+                                        "name": "Alyssa Hansen",
+                                        "reportsTo": 69,
+                                        "phone": "(548) 925-4799",
+                                        "extension": 4716,
+                                        "hireDate": new Date(2011, 1, 19),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 82,
+                                        "name": "Yael Walters",
+                                        "reportsTo": 69,
+                                        "phone": "(311) 489-8191",
+                                        "extension": 6520,
+                                        "hireDate": new Date(2013, 7, 4),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 87,
+                                        "name": "Dahlia Hunt",
+                                        "reportsTo": 69,
+                                        "phone": "(720) 339-5202",
+                                        "extension": 3690,
+                                        "hireDate": new Date(2011, 3, 26),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 94,
+                                        "name": "Adria Stanley",
+                                        "reportsTo": 69,
+                                        "phone": "(536) 357-6391",
+                                        "extension": 3374,
+                                        "hireDate": new Date(2014, 7, 26),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "Priscilla Frank",
+                "reportsTo": 1,
+                "phone": "(278) 927-2684",
+                "extension": 4183,
+                "hireDate": new Date(2014, 11, 30),
+                "fullTime": true,
+                "position": "Chief Product Officer",
+                "timeInPosition": 2,
+                "employees": [
+                    {
+                        "id": 4,
+                        "name": "Ursula Holmes",
+                        "reportsTo": 3,
+                        "phone": "(302) 760-2034",
+                        "extension": 2226,
+                        "hireDate": new Date(2011, 6, 6),
+                        "fullTime": true,
+                        "position": "EVP, Product Strategy",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 24,
+                        "name": "Melvin Carrillo",
+                        "reportsTo": 3,
+                        "phone": "(348) 933-5167",
+                        "extension": 2482,
+                        "hireDate": new Date(2014, 7, 21),
+                        "fullTime": true,
+                        "position": "Director, Developer Relations",
+                        "timeInPosition": 6,
+                        "employees": [
+                            {
+                                "id": 29,
+                                "name": "Martha Chavez",
+                                "reportsTo": 24,
+                                "phone": "(860) 754-3464",
+                                "extension": 4531,
+                                "hireDate": new Date(2013, 3, 12),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 30,
+                                "name": "Oren Fox",
+                                "reportsTo": 24,
+                                "phone": "(572) 414-3299",
+                                "extension": 4849,
+                                "hireDate": new Date(2013, 5, 14),
+                                "fullTime": false,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 41,
+                                "name": "Amos Barr",
+                                "reportsTo": 24,
+                                "phone": "(470) 381-3718",
+                                "extension": 7643,
+                                "hireDate": new Date(2010, 3, 9),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "Anika Vega",
+                "reportsTo": 1,
+                "phone": "(910) 714-1802",
+                "extension": 6353,
+                "hireDate": new Date(2010, 2, 25),
+                "fullTime": true,
+                "position": "Chief Process Officer",
+                "timeInPosition": 5,
+                "employees": [
+                    {
+                        "id": 10,
+                        "name": "Vernon Ballard",
+                        "reportsTo": 5,
+                        "phone": "(702) 185-8890",
+                        "extension": 9242,
+                        "hireDate": new Date(2015, 6, 26),
+                        "fullTime": true,
+                        "position": "Director Facilities",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 16,
+                                "name": "Ali Guy",
+                                "reportsTo": 10,
+                                "phone": "(429) 912-6578",
+                                "extension": 2225,
+                                "hireDate": new Date(2014, 6, 29),
+                                "fullTime": true,
+                                "position": "Operations Manager",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 23,
+                                        "name": "Bruce Reilly",
+                                        "reportsTo": 16,
+                                        "phone": "(995) 243-7302",
+                                        "extension": 4815,
+                                        "hireDate": new Date(2015, 4, 1),
+                                        "fullTime": true,
+                                        "position": "Head of Security",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 26,
+                                                "name": "Rowan Morin",
+                                                "reportsTo": 23,
+                                                "phone": "(792) 141-4374",
+                                                "extension": 1844,
+                                                "hireDate": new Date(2015, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Building Security",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 44,
+                                                "name": "Benedict Soto",
+                                                "reportsTo": 23,
+                                                "phone": "(822) 282-5991",
+                                                "extension": 6422,
+                                                "hireDate": new Date(2012, 6, 1),
+                                                "fullTime": false,
+                                                "position": "Building Security",
+                                                "timeInPosition": 4
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 48,
+                                        "name": "Maryam Rios",
+                                        "reportsTo": 16,
+                                        "phone": "(673) 764-6720",
+                                        "extension": 531,
+                                        "hireDate": new Date(2014, 3, 3),
+                                        "fullTime": true,
+                                        "position": "Team Lead, Personal Assistants",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 58,
+                                                "name": "Rose Mcintyre",
+                                                "reportsTo": 48,
+                                                "phone": "(771) 615-4590",
+                                                "extension": 7094,
+                                                "hireDate": new Date(2015, 6, 30),
+                                                "fullTime": false,
+                                                "position": "Personal Assistant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "Nevada Hart",
+                "reportsTo": 1,
+                "phone": "(254) 220-1576",
+                "extension": 6649,
+                "hireDate": new Date(2015, 8, 17),
+                "fullTime": true,
+                "position": "Chief Financial Officer",
+                "timeInPosition": 6,
+                "employees": [
+                    {
+                        "id": 14,
+                        "name": "Zena Sanford",
+                        "reportsTo": 7,
+                        "phone": "(437) 568-8160",
+                        "extension": 4452,
+                        "hireDate": new Date(2010, 11, 30),
+                        "fullTime": true,
+                        "position": "VP, Finance",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 15,
+                        "name": "Quinlan Howe",
+                        "reportsTo": 7,
+                        "phone": "(464) 334-9748",
+                        "extension": 8722,
+                        "hireDate": new Date(2011, 6, 9),
+                        "fullTime": false,
+                        "position": "Senior Director, Finance",
+                        "timeInPosition": 0,
+                        "employees": [
+                            {
+                                "id": 17,
+                                "name": "Indira Lopez",
+                                "reportsTo": 15,
+                                "phone": "(301) 368-0938",
+                                "extension": 8027,
+                                "hireDate": new Date(2013, 8, 18),
+                                "fullTime": true,
+                                "position": "ERP Team Lead",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 18,
+                                        "name": "Lareina Lara",
+                                        "reportsTo": 17,
+                                        "phone": "(233) 457-7482",
+                                        "extension": 1996,
+                                        "hireDate": new Date(2010, 4, 30),
+                                        "fullTime": true,
+                                        "position": "ERP Solutions Consultant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 19,
+                                        "name": "Maxwell Wise",
+                                        "reportsTo": 17,
+                                        "phone": "(570) 494-2531",
+                                        "extension": 9865,
+                                        "hireDate": new Date(2012, 5, 19),
+                                        "fullTime": true,
+                                        "position": "Systems Engineer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 20,
+                                "name": "Hunter Mcbride",
+                                "reportsTo": 15,
+                                "phone": "(409) 442-7016",
+                                "extension": 4284,
+                                "hireDate": new Date(2012, 10, 20),
+                                "fullTime": true,
+                                "position": "Senior Director, Tax",
+                                "timeInPosition": 3
+                            },
+                            {
+                                "id": 21,
+                                "name": "Jana Serrano",
+                                "reportsTo": 15,
+                                "phone": "(910) 718-4620",
+                                "extension": 6970,
+                                "hireDate": new Date(2010, 4, 2),
+                                "fullTime": true,
+                                "position": "Financial Planning & Analysis Manager",
+                                "timeInPosition": 2
+                            },
+                            {
+                                "id": 22,
+                                "name": "Zachery Shelton",
+                                "reportsTo": 15,
+                                "phone": "(310) 240-8675",
+                                "extension": 4527,
+                                "hireDate": new Date(2011, 11, 23),
+                                "fullTime": false,
+                                "position": "Corporate Finance Controller",
+                                "timeInPosition": 6,
+                                "employees": [
+                                    {
+                                        "id": 28,
+                                        "name": "Cullen Freeman",
+                                        "reportsTo": 22,
+                                        "phone": "(136) 554-8814",
+                                        "extension": 9861,
+                                        "hireDate": new Date(2014, 3, 15),
+                                        "fullTime": true,
+                                        "position": "Treasurer Accountant",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 31,
+                                        "name": "Quinn Dean",
+                                        "reportsTo": 22,
+                                        "phone": "(152) 613-3507",
+                                        "extension": 6621,
+                                        "hireDate": new Date(2015, 1, 29),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 34,
+                                        "name": "Samantha Brady",
+                                        "reportsTo": 22,
+                                        "phone": "(206) 398-4328",
+                                        "extension": 1157,
+                                        "hireDate": new Date(2011, 2, 13),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 35,
+                                                "name": "Tamara Green",
+                                                "reportsTo": 34,
+                                                "phone": "(219) 248-2789",
+                                                "extension": 4880,
+                                                "hireDate": new Date(2014, 2, 4),
+                                                "fullTime": true,
+                                                "position": "Junior Accountant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 36,
+                                        "name": "Olympia Coleman",
+                                        "reportsTo": 22,
+                                        "phone": "(944) 853-6383",
+                                        "extension": 2136,
+                                        "hireDate": new Date(2013, 7, 31),
+                                        "fullTime": true,
+                                        "position": "Collections Manager",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 37,
+                                        "name": "Breanna Goodwin",
+                                        "reportsTo": 22,
+                                        "phone": "(379) 988-9630",
+                                        "extension": 5898,
+                                        "hireDate": new Date(2010, 5, 23),
+                                        "fullTime": false,
+                                        "position": "Payroll Specialist",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 27,
+                                "name": "Curran Travis",
+                                "reportsTo": 15,
+                                "phone": "(438) 135-8033",
+                                "extension": 3841,
+                                "hireDate": new Date(2011, 6, 13),
+                                "fullTime": true,
+                                "position": "Finance Controller",
+                                "timeInPosition": 5
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "Hunter Fry",
+                "reportsTo": 1,
+                "phone": "(766) 358-9858",
+                "extension": 3741,
+                "hireDate": new Date(2011, 2, 12),
+                "fullTime": false,
+                "position": "General Counsel",
+                "timeInPosition": 3,
+                "employees": [
+                    {
+                        "id": 9,
+                        "name": "Kuame Carrillo",
+                        "reportsTo": 8,
+                        "phone": "(192) 383-1305",
+                        "extension": 9228,
+                        "hireDate": new Date(2011, 2, 22),
+                        "fullTime": true,
+                        "position": "Associate General Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 13,
+                        "name": "Stacy Todd",
+                        "reportsTo": 8,
+                        "phone": "(925) 286-3327",
+                        "extension": 8565,
+                        "hireDate": new Date(2014, 7, 5),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 33,
+                        "name": "Valentine Wyatt",
+                        "reportsTo": 8,
+                        "phone": "(165) 166-6205",
+                        "extension": 3588,
+                        "hireDate": new Date(2015, 5, 21),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 5
+                    },
+                    {
+                        "id": 86,
+                        "name": "Daniel Mccarthy",
+                        "reportsTo": 8,
+                        "phone": "(624) 483-6206",
+                        "extension": 9112,
+                        "hireDate": new Date(2013, 12, 3),
+                        "fullTime": false,
+                        "position": "Staff Attorney",
+                        "timeInPosition": 0
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default employees;
diff --git a/vue-options-api-demos/treelist/dragdrop/main.js b/vue-options-api-demos/treelist/dragdrop/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/dragdrop/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/dragdrop/main.vue b/vue-options-api-demos/treelist/dragdrop/main.vue
new file mode 100644
index 00000000..d5a0b210
--- /dev/null
+++ b/vue-options-api-demos/treelist/dragdrop/main.vue
@@ -0,0 +1,85 @@
+<template>
+  <div>
+      <TreeList
+        :style="treeListStyles"
+        :data-items="tree"
+        :expand-field="expandField"
+        :sub-items-field="subItemsField"  
+        @rowdrop="onRowDrop"
+        :reordableRows="true"
+        @expandchange="onExpandChange"
+        :columns="columns"
+      />
+      </div>
+  </template>
+  
+  <script>
+  import employees from "./data";
+  import {
+    TreeList,
+    mapTree,
+    moveTreeItem,
+    extendDataItem,
+      } from '@progress/kendo-vue-treelist';
+  
+  export default {
+      components: {
+        TreeList
+      },
+      data() {
+        return {
+          dataItems: [...employees],
+          subItemsField: 'employees',
+          expandField: 'expanded',
+          expanded: [1, 3],
+          columns: [
+            {
+              field: "name",
+              title: "Name",
+              width: "34%",
+              expandable: true,
+            },
+            {
+              field: "position",
+              title: "Position",
+              width: "33%",
+            },
+          ]
+        };
+      },
+      computed: {
+        tree() {
+          return mapTree(this.dataItems, this.subItemsField, (item) =>
+              extendDataItem(item, this.subItemsField, {
+                [this.expandField]: this.expanded.includes(item.id),
+              })
+            );
+        },
+        treeListStyles() {
+          return {
+            maxHeight: "540px",
+            overflow: "auto",
+            width: "100%"
+          };
+        }
+      },
+      methods: {
+          onExpandChange (event) {
+            this.expanded = event.value
+                ? this.expanded.filter((id) => id !== event.dataItem.id)
+                : [...this.expanded, event.dataItem.id];
+          },
+          onRowDrop(event) {
+              this.dataItems = moveTreeItem(
+                  this.dataItems,
+                  event.dragged,
+                  event.draggedOver,
+                  this.subItemsField
+                );
+          }
+      }
+  };
+  
+  </script>
+  
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/treelist/editing-external-form/CommandCell.vue b/vue-options-api-demos/treelist/editing-external-form/CommandCell.vue
new file mode 100644
index 00000000..da5d81f7
--- /dev/null
+++ b/vue-options-api-demos/treelist/editing-external-form/CommandCell.vue
@@ -0,0 +1,49 @@
+<template>
+    <td class="k-command-cell">
+        <kbutton
+            :theme-color="'primary'"
+            class="k-grid-edit-command"
+            @click="editHandler"
+        >
+            Edit
+        </kbutton>
+    
+        <kbutton
+            class="k-grid-remove-command"
+            @click="removeHandler"
+        >
+            Remove
+        </kbutton>
+    </td>
+    </template>
+    <script>
+    import { Button } from '@progress/kendo-vue-buttons';
+    
+    export default {
+        components: {
+          'kbutton': Button
+        },
+       props: {
+            field: String,
+            dataItem: Object,
+            format: String,
+            className: String,
+            columnIndex: Number,
+            columnsCount: Number,
+            rowType: String,
+            level: Number,
+            expanded: Boolean,
+            editor: String
+        },
+        methods: {
+            editHandler: function() {
+                this.$emit('edit', this.dataItem);
+            },
+            removeHandler: function() {
+                if(confirm('Confirm deleting: ' + this.dataItem.ProductName)){
+                   this.$emit('remove', this.dataItem);
+                }
+            }
+        }
+    }
+    </script>
\ No newline at end of file
diff --git a/vue-options-api-demos/treelist/editing-external-form/DialogContainer.vue b/vue-options-api-demos/treelist/editing-external-form/DialogContainer.vue
new file mode 100644
index 00000000..50401abb
--- /dev/null
+++ b/vue-options-api-demos/treelist/editing-external-form/DialogContainer.vue
@@ -0,0 +1,86 @@
+<template>
+  <KDialog @close="cancel">
+    <div class="k-form k-form-horizontal">
+      <div class="k-form-field">
+        <label for="Employee" class="k-form-label">Employee Name</label>
+        <div class="k-form-field-wrap">
+          <KInput
+            :style="{ width: '230px' }"
+            :name="'Employee'"
+            v-model="employeeInEdit.name"
+          ></KInput>
+        </div>
+      </div>
+      <div class="k-form-field">
+        <label for="Position" class="k-form-label">Position</label>
+        <div class="k-form-field-wrap">
+          <KInput
+            :style="{ width: '230px' }"
+            :name="'Position'"
+            v-model="employeeInEdit.position"
+          ></KInput>
+        </div>
+      </div>
+      <div class="k-form-field">
+        <KLabel :editor-id="'FullTime'" class="'k-checkbox-label'"> FullTime </KLabel>
+        <div class="k-form-field-wrap">
+          <span>
+            <checkbox
+              :name="'FullTime'"
+              :id="'fullTime'"
+              v-model="employeeInEdit.fullTime"
+            />
+          </span>
+        </div>
+      </div>
+    </div>
+    <DialogActionsBar :layout="'start'">
+      <KButton :theme-color="'primary'" @click="save" :svg-icon="saveIcon"> Save </KButton>
+      <KButton @click="cancel" :svg-icon="cancelIcon"> Cancel </KButton>
+    </DialogActionsBar>
+  </KDialog>
+</template>
+<script>
+import { Dialog as KDialog, DialogActionsBar } from '@progress/kendo-vue-dialogs';
+import { Input as KInput, Checkbox } from '@progress/kendo-vue-inputs';
+import { Label } from '@progress/kendo-vue-labels';
+import { Button } from '@progress/kendo-vue-buttons';
+import { cancelIcon, saveIcon } from '@progress/kendo-svg-icons';
+
+export default {
+  components: {
+    KInput,
+    KDialog,
+    DialogActionsBar,
+    KButton: Button,
+    checkbox: Checkbox,
+    KLabel: Label,
+  },
+  props: {
+    dataItem: Object,
+  },
+  data: function () {
+    return {
+      cancelIcon, saveIcon,
+      employeeInEdit: {
+        name: '',
+        position: 0,
+        fullTime: false,
+      },
+    };
+  },
+  created: function () {
+    if (this.$props.dataItem) {
+      this.employeeInEdit = this.$props.dataItem;
+    }
+  },
+  methods: {
+    cancel() {
+      this.$emit('cancel');
+    },
+    save() {
+      this.$emit('save');
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue-options-api-demos/treelist/editing-external-form/data.js b/vue-options-api-demos/treelist/editing-external-form/data.js
new file mode 100644
index 00000000..f66aec4d
--- /dev/null
+++ b/vue-options-api-demos/treelist/editing-external-form/data.js
@@ -0,0 +1,1150 @@
+
+const employees = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2,
+        "employees": [
+            {
+                "id": 2,
+                "name": "Guy Wooten",
+                "reportsTo": 1,
+                "phone": "(438) 738-4935",
+                "extension": 1155,
+                "hireDate": new Date(2010, 3, 3),
+                "fullTime": true,
+                "position": "Chief Technical Officer",
+                "timeInPosition": 1,
+                "employees": [
+                    {
+                        "id": 32,
+                        "name": "Buffy Weber",
+                        "reportsTo": 2,
+                        "phone": "(699) 838-6121",
+                        "extension": 8933,
+                        "hireDate": new Date(2011, 7, 11),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 11,
+                                "name": "Hyacinth Hood",
+                                "reportsTo": 32,
+                                "phone": "(889) 345-2438",
+                                "extension": 8564,
+                                "hireDate": new Date(2014, 2, 3),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 60,
+                                        "name": "Akeem Carr",
+                                        "reportsTo": 11,
+                                        "phone": "(738) 136-2814",
+                                        "extension": 9353,
+                                        "hireDate": new Date(2011, 4, 21),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 78,
+                                        "name": "Rinah Simon",
+                                        "reportsTo": 11,
+                                        "phone": "(285) 912-5271",
+                                        "extension": 7795,
+                                        "hireDate": new Date(2012, 10, 11),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 42,
+                                "name": "Gage Daniels",
+                                "reportsTo": 32,
+                                "phone": "(107) 290-6260",
+                                "extension": 896,
+                                "hireDate": new Date(2013, 5, 16),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 5
+                            },
+                            {
+                                "id": 43,
+                                "name": "Constance Vazquez",
+                                "reportsTo": 32,
+                                "phone": "(800) 301-1978",
+                                "extension": 5141,
+                                "hireDate": new Date(2011, 6, 7),
+                                "fullTime": true,
+                                "position": "Director, Engineering",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 46,
+                                        "name": "Darrel Solis",
+                                        "reportsTo": 43,
+                                        "phone": "(327) 977-0216",
+                                        "extension": 7779,
+                                        "hireDate": new Date(2015, 4, 25),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 47,
+                                                "name": "Brian Yang",
+                                                "reportsTo": 46,
+                                                "phone": "(565) 146-5435",
+                                                "extension": 3885,
+                                                "hireDate": new Date(2012, 9, 27),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 50,
+                                                "name": "Lillian Bradshaw",
+                                                "reportsTo": 46,
+                                                "phone": "(323) 509-3479",
+                                                "extension": 5426,
+                                                "hireDate": new Date(2014, 5, 10),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 51,
+                                                "name": "Christian Palmer",
+                                                "reportsTo": 46,
+                                                "phone": "(490) 421-8718",
+                                                "extension": 3706,
+                                                "hireDate": new Date(2012, 12, 27),
+                                                "fullTime": false,
+                                                "position": "Technical Lead",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 55,
+                                                "name": "Summer Mosley",
+                                                "reportsTo": 46,
+                                                "phone": "(784) 962-2301",
+                                                "extension": 5492,
+                                                "hireDate": new Date(2010, 3, 2),
+                                                "fullTime": true,
+                                                "position": "QA Engineer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 56,
+                                                "name": "Barry Ayers",
+                                                "reportsTo": 46,
+                                                "phone": "(452) 373-9227",
+                                                "extension": 1308,
+                                                "hireDate": new Date(2011, 10, 11),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 59,
+                                                "name": "Keiko Espinoza",
+                                                "reportsTo": 46,
+                                                "phone": "(226) 600-5305",
+                                                "extension": 9363,
+                                                "hireDate": new Date(2011, 9, 18),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 61,
+                                                "name": "Candace Pickett",
+                                                "reportsTo": 46,
+                                                "phone": "(120) 117-7475",
+                                                "extension": 5178,
+                                                "hireDate": new Date(2010, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 63,
+                                        "name": "Mia Caldwell",
+                                        "reportsTo": 43,
+                                        "phone": "(848) 636-6470",
+                                        "extension": 6368,
+                                        "hireDate": new Date(2012, 10, 7),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 65,
+                                                "name": "Thomas Terry",
+                                                "reportsTo": 63,
+                                                "phone": "(764) 831-4248",
+                                                "extension": 3574,
+                                                "hireDate": new Date(2015, 6, 15),
+                                                "fullTime": false,
+                                                "position": "Senior Enterprise Support Officer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 67,
+                                                "name": "Ruth Downs",
+                                                "reportsTo": 63,
+                                                "phone": "(138) 991-1440",
+                                                "extension": 8067,
+                                                "hireDate": new Date(2013, 7, 13),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 70,
+                                                "name": "Yasir Wilder",
+                                                "reportsTo": 63,
+                                                "phone": "(759) 701-8665",
+                                                "extension": 8350,
+                                                "hireDate": new Date(2010, 11, 8),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 71,
+                                                "name": "Flavia Short",
+                                                "reportsTo": 63,
+                                                "phone": "(370) 133-9238",
+                                                "extension": 6390,
+                                                "hireDate": new Date(2013, 2, 21),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 74,
+                                                "name": "Aaron Roach",
+                                                "reportsTo": 63,
+                                                "phone": "(958) 717-9230",
+                                                "extension": 4899,
+                                                "hireDate": new Date(2011, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 75,
+                                                "name": "Eric Russell",
+                                                "reportsTo": 63,
+                                                "phone": "(516) 575-8505",
+                                                "extension": 2224,
+                                                "hireDate": new Date(2012, 10, 28),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 76,
+                                                "name": "Cheyenne Olson",
+                                                "reportsTo": 63,
+                                                "phone": "(241) 645-0257",
+                                                "extension": 9181,
+                                                "hireDate": new Date(2015, 5, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 77,
+                                                "name": "Shaine Avila",
+                                                "reportsTo": 63,
+                                                "phone": "(844) 435-1360",
+                                                "extension": 3374,
+                                                "hireDate": new Date(2010, 1, 31),
+                                                "fullTime": true,
+                                                "position": "UI Designer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 81,
+                                                "name": "Chantale Long",
+                                                "reportsTo": 63,
+                                                "phone": "(252) 419-6891",
+                                                "extension": 7868,
+                                                "hireDate": new Date(2010, 6, 17),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 83,
+                                                "name": "Dane Cruz",
+                                                "reportsTo": 63,
+                                                "phone": "(946) 701-6165",
+                                                "extension": 3828,
+                                                "hireDate": new Date(2014, 10, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 84,
+                                                "name": "Regan Patterson",
+                                                "reportsTo": 63,
+                                                "phone": "(265) 946-1765",
+                                                "extension": 6955,
+                                                "hireDate": new Date(2012, 3, 1),
+                                                "fullTime": true,
+                                                "position": "Technical Writer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 85,
+                                                "name": "Drew Mckay",
+                                                "reportsTo": 63,
+                                                "phone": "(327) 293-0162",
+                                                "extension": 6904,
+                                                "hireDate": new Date(2011, 3, 25),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 88,
+                                                "name": "Bevis Miller",
+                                                "reportsTo": 63,
+                                                "phone": "(525) 557-0169",
+                                                "extension": 6978,
+                                                "hireDate": new Date(2011, 4, 19),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 89,
+                                                "name": "Bruce Mccarty",
+                                                "reportsTo": 63,
+                                                "phone": "(936) 777-8730",
+                                                "extension": 6552,
+                                                "hireDate": new Date(2014, 3, 28),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 5
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 90,
+                                        "name": "Ocean Blair",
+                                        "reportsTo": 43,
+                                        "phone": "(343) 586-6614",
+                                        "extension": 1424,
+                                        "hireDate": new Date(2011, 4, 27),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 91,
+                                                "name": "Guinevere Osborn",
+                                                "reportsTo": 90,
+                                                "phone": "(424) 741-0006",
+                                                "extension": 3166,
+                                                "hireDate": new Date(2014, 11, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 92,
+                                                "name": "Olga Strong",
+                                                "reportsTo": 90,
+                                                "phone": "(949) 417-1168",
+                                                "extension": 4568,
+                                                "hireDate": new Date(2015, 5, 28),
+                                                "fullTime": true,
+                                                "position": "Graphic Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 93,
+                                                "name": "Robert Orr",
+                                                "reportsTo": 90,
+                                                "phone": "(977) 341-3721",
+                                                "extension": 9241,
+                                                "hireDate": new Date(2012, 8, 20),
+                                                "fullTime": false,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 95,
+                                                "name": "Odette Sears",
+                                                "reportsTo": 90,
+                                                "phone": "(264) 818-6576",
+                                                "extension": 1914,
+                                                "hireDate": new Date(2013, 7, 5),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 45,
+                                "name": "Zelda Medina",
+                                "reportsTo": 32,
+                                "phone": "(563) 359-6023",
+                                "extension": 2600,
+                                "hireDate": new Date(2012, 11, 6),
+                                "fullTime": true,
+                                "position": "QA Architect",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    },
+                    {
+                        "id": 52,
+                        "name": "Skyler Cleveland",
+                        "reportsTo": 2,
+                        "phone": "(217) 280-5300",
+                        "extension": 9655,
+                        "hireDate": new Date(2014, 11, 10),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 40,
+                                "name": "Karleigh Garza",
+                                "reportsTo": 52,
+                                "phone": "(370) 983-8796",
+                                "extension": 4044,
+                                "hireDate": new Date(2014, 3, 10),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 49,
+                                        "name": "Elmo Tyson",
+                                        "reportsTo": 40,
+                                        "phone": "(344) 496-9555",
+                                        "extension": 6950,
+                                        "hireDate": new Date(2014, 9, 18),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 72,
+                                        "name": "Stacey Lynn",
+                                        "reportsTo": 40,
+                                        "phone": "(140) 772-7509",
+                                        "extension": 8396,
+                                        "hireDate": new Date(2014, 7, 31),
+                                        "fullTime": false,
+                                        "position": "QA Engineer",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 80,
+                                                "name": "Meredith Parrish",
+                                                "reportsTo": 72,
+                                                "phone": "(714) 284-2408",
+                                                "extension": 7675,
+                                                "hireDate": new Date(2012, 11, 13),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 96,
+                                        "name": "Cassady Whitley",
+                                        "reportsTo": 40,
+                                        "phone": "(996) 587-8405",
+                                        "extension": 780,
+                                        "hireDate": new Date(2013, 5, 7),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 5
+                                    },
+                                    {
+                                        "id": 97,
+                                        "name": "Haviva Campbell",
+                                        "reportsTo": 40,
+                                        "phone": "(263) 887-4689",
+                                        "extension": 2808,
+                                        "hireDate": new Date(2013, 3, 5),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 98,
+                                        "name": "Cameron Ayers",
+                                        "reportsTo": 40,
+                                        "phone": "(470) 709-8030",
+                                        "extension": 2893,
+                                        "hireDate": new Date(2013, 8, 28),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 99,
+                                        "name": "Martha Sargent",
+                                        "reportsTo": 40,
+                                        "phone": "(587) 812-4418",
+                                        "extension": 5099,
+                                        "hireDate": new Date(2014, 2, 27),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 100,
+                                        "name": "Darrel Kinney",
+                                        "reportsTo": 40,
+                                        "phone": "(888) 483-9606",
+                                        "extension": 4779,
+                                        "hireDate": new Date(2014, 3, 24),
+                                        "fullTime": false,
+                                        "position": "Graphic Designer",
+                                        "timeInPosition": 1
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 54,
+                                "name": "Kuame Frye",
+                                "reportsTo": 52,
+                                "phone": "(360) 721-5886",
+                                "extension": 2730,
+                                "hireDate": new Date(2010, 11, 17),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 64,
+                                        "name": "Ori Wynn",
+                                        "reportsTo": 54,
+                                        "phone": "(366) 342-0166",
+                                        "extension": 7252,
+                                        "hireDate": new Date(2015, 6, 21),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 0,
+                                        "employees": [
+                                            {
+                                                "id": 6,
+                                                "name": "Moses Duncan",
+                                                "reportsTo": 64,
+                                                "phone": "(421) 611-4814",
+                                                "extension": 669,
+                                                "hireDate": new Date(2010, 5, 24),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 12,
+                                                "name": "Jamalia Wallace",
+                                                "reportsTo": 64,
+                                                "phone": "(611) 391-8016",
+                                                "extension": 1952,
+                                                "hireDate": new Date(2011, 9, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Designer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 62,
+                                                "name": "Palmer Gregory",
+                                                "reportsTo": 64,
+                                                "phone": "(360) 430-2505",
+                                                "extension": 4337,
+                                                "hireDate": new Date(2014, 8, 30),
+                                                "fullTime": true,
+                                                "position": "Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 68,
+                                                "name": "Mallory Gilliam",
+                                                "reportsTo": 64,
+                                                "phone": "(878) 423-2971",
+                                                "extension": 1341,
+                                                "hireDate": new Date(2014, 7, 24),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 73,
+                                                "name": "Ima Hughes",
+                                                "reportsTo": 64,
+                                                "phone": "(905) 485-8001",
+                                                "extension": 1273,
+                                                "hireDate": new Date(2013, 6, 3),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 79,
+                                                "name": "Duncan Mathews",
+                                                "reportsTo": 64,
+                                                "phone": "(790) 971-9709",
+                                                "extension": 4573,
+                                                "hireDate": new Date(2011, 8, 21),
+                                                "fullTime": false,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 69,
+                                "name": "Sierra Beasley",
+                                "reportsTo": 52,
+                                "phone": "(271) 953-1968",
+                                "extension": 3324,
+                                "hireDate": new Date(2011, 4, 2),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 3,
+                                "employees": [
+                                    {
+                                        "id": 38,
+                                        "name": "Elton Tucker",
+                                        "reportsTo": 69,
+                                        "phone": "(988) 930-9331",
+                                        "extension": 9216,
+                                        "hireDate": new Date(2015, 6, 4),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 1
+                                    },
+                                    {
+                                        "id": 39,
+                                        "name": "Iona Brennan",
+                                        "reportsTo": 69,
+                                        "phone": "(356) 563-0600",
+                                        "extension": 5634,
+                                        "hireDate": new Date(2010, 9, 23),
+                                        "fullTime": true,
+                                        "position": "Junior Support Officer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 53,
+                                        "name": "Paul Campos",
+                                        "reportsTo": 69,
+                                        "phone": "(899) 205-1689",
+                                        "extension": 8586,
+                                        "hireDate": new Date(2011, 3, 17),
+                                        "fullTime": true,
+                                        "position": "Interaction Designer",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 66,
+                                                "name": "Gloria Freeman",
+                                                "reportsTo": 53,
+                                                "phone": "(344) 950-9168",
+                                                "extension": 4738,
+                                                "hireDate": new Date(2013, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Junior Interaction Designer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 57,
+                                        "name": "Alyssa Hansen",
+                                        "reportsTo": 69,
+                                        "phone": "(548) 925-4799",
+                                        "extension": 4716,
+                                        "hireDate": new Date(2011, 1, 19),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 82,
+                                        "name": "Yael Walters",
+                                        "reportsTo": 69,
+                                        "phone": "(311) 489-8191",
+                                        "extension": 6520,
+                                        "hireDate": new Date(2013, 7, 4),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 87,
+                                        "name": "Dahlia Hunt",
+                                        "reportsTo": 69,
+                                        "phone": "(720) 339-5202",
+                                        "extension": 3690,
+                                        "hireDate": new Date(2011, 3, 26),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 94,
+                                        "name": "Adria Stanley",
+                                        "reportsTo": 69,
+                                        "phone": "(536) 357-6391",
+                                        "extension": 3374,
+                                        "hireDate": new Date(2014, 7, 26),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "Priscilla Frank",
+                "reportsTo": 1,
+                "phone": "(278) 927-2684",
+                "extension": 4183,
+                "hireDate": new Date(2014, 11, 30),
+                "fullTime": true,
+                "position": "Chief Product Officer",
+                "timeInPosition": 2,
+                "employees": [
+                    {
+                        "id": 4,
+                        "name": "Ursula Holmes",
+                        "reportsTo": 3,
+                        "phone": "(302) 760-2034",
+                        "extension": 2226,
+                        "hireDate": new Date(2011, 6, 6),
+                        "fullTime": true,
+                        "position": "EVP, Product Strategy",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 24,
+                        "name": "Melvin Carrillo",
+                        "reportsTo": 3,
+                        "phone": "(348) 933-5167",
+                        "extension": 2482,
+                        "hireDate": new Date(2014, 7, 21),
+                        "fullTime": true,
+                        "position": "Director, Developer Relations",
+                        "timeInPosition": 6,
+                        "employees": [
+                            {
+                                "id": 29,
+                                "name": "Martha Chavez",
+                                "reportsTo": 24,
+                                "phone": "(860) 754-3464",
+                                "extension": 4531,
+                                "hireDate": new Date(2013, 3, 12),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 30,
+                                "name": "Oren Fox",
+                                "reportsTo": 24,
+                                "phone": "(572) 414-3299",
+                                "extension": 4849,
+                                "hireDate": new Date(2013, 5, 14),
+                                "fullTime": false,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 41,
+                                "name": "Amos Barr",
+                                "reportsTo": 24,
+                                "phone": "(470) 381-3718",
+                                "extension": 7643,
+                                "hireDate": new Date(2010, 3, 9),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "Anika Vega",
+                "reportsTo": 1,
+                "phone": "(910) 714-1802",
+                "extension": 6353,
+                "hireDate": new Date(2010, 2, 25),
+                "fullTime": true,
+                "position": "Chief Process Officer",
+                "timeInPosition": 5,
+                "employees": [
+                    {
+                        "id": 10,
+                        "name": "Vernon Ballard",
+                        "reportsTo": 5,
+                        "phone": "(702) 185-8890",
+                        "extension": 9242,
+                        "hireDate": new Date(2015, 6, 26),
+                        "fullTime": true,
+                        "position": "Director Facilities",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 16,
+                                "name": "Ali Guy",
+                                "reportsTo": 10,
+                                "phone": "(429) 912-6578",
+                                "extension": 2225,
+                                "hireDate": new Date(2014, 6, 29),
+                                "fullTime": true,
+                                "position": "Operations Manager",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 23,
+                                        "name": "Bruce Reilly",
+                                        "reportsTo": 16,
+                                        "phone": "(995) 243-7302",
+                                        "extension": 4815,
+                                        "hireDate": new Date(2015, 4, 1),
+                                        "fullTime": true,
+                                        "position": "Head of Security",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 26,
+                                                "name": "Rowan Morin",
+                                                "reportsTo": 23,
+                                                "phone": "(792) 141-4374",
+                                                "extension": 1844,
+                                                "hireDate": new Date(2015, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Building Security",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 44,
+                                                "name": "Benedict Soto",
+                                                "reportsTo": 23,
+                                                "phone": "(822) 282-5991",
+                                                "extension": 6422,
+                                                "hireDate": new Date(2012, 6, 1),
+                                                "fullTime": false,
+                                                "position": "Building Security",
+                                                "timeInPosition": 4
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 48,
+                                        "name": "Maryam Rios",
+                                        "reportsTo": 16,
+                                        "phone": "(673) 764-6720",
+                                        "extension": 531,
+                                        "hireDate": new Date(2014, 3, 3),
+                                        "fullTime": true,
+                                        "position": "Team Lead, Personal Assistants",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 58,
+                                                "name": "Rose Mcintyre",
+                                                "reportsTo": 48,
+                                                "phone": "(771) 615-4590",
+                                                "extension": 7094,
+                                                "hireDate": new Date(2015, 6, 30),
+                                                "fullTime": false,
+                                                "position": "Personal Assistant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "Nevada Hart",
+                "reportsTo": 1,
+                "phone": "(254) 220-1576",
+                "extension": 6649,
+                "hireDate": new Date(2015, 8, 17),
+                "fullTime": true,
+                "position": "Chief Financial Officer",
+                "timeInPosition": 6,
+                "employees": [
+                    {
+                        "id": 14,
+                        "name": "Zena Sanford",
+                        "reportsTo": 7,
+                        "phone": "(437) 568-8160",
+                        "extension": 4452,
+                        "hireDate": new Date(2010, 11, 30),
+                        "fullTime": true,
+                        "position": "VP, Finance",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 15,
+                        "name": "Quinlan Howe",
+                        "reportsTo": 7,
+                        "phone": "(464) 334-9748",
+                        "extension": 8722,
+                        "hireDate": new Date(2011, 6, 9),
+                        "fullTime": false,
+                        "position": "Senior Director, Finance",
+                        "timeInPosition": 0,
+                        "employees": [
+                            {
+                                "id": 17,
+                                "name": "Indira Lopez",
+                                "reportsTo": 15,
+                                "phone": "(301) 368-0938",
+                                "extension": 8027,
+                                "hireDate": new Date(2013, 8, 18),
+                                "fullTime": true,
+                                "position": "ERP Team Lead",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 18,
+                                        "name": "Lareina Lara",
+                                        "reportsTo": 17,
+                                        "phone": "(233) 457-7482",
+                                        "extension": 1996,
+                                        "hireDate": new Date(2010, 4, 30),
+                                        "fullTime": true,
+                                        "position": "ERP Solutions Consultant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 19,
+                                        "name": "Maxwell Wise",
+                                        "reportsTo": 17,
+                                        "phone": "(570) 494-2531",
+                                        "extension": 9865,
+                                        "hireDate": new Date(2012, 5, 19),
+                                        "fullTime": true,
+                                        "position": "Systems Engineer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 20,
+                                "name": "Hunter Mcbride",
+                                "reportsTo": 15,
+                                "phone": "(409) 442-7016",
+                                "extension": 4284,
+                                "hireDate": new Date(2012, 10, 20),
+                                "fullTime": true,
+                                "position": "Senior Director, Tax",
+                                "timeInPosition": 3
+                            },
+                            {
+                                "id": 21,
+                                "name": "Jana Serrano",
+                                "reportsTo": 15,
+                                "phone": "(910) 718-4620",
+                                "extension": 6970,
+                                "hireDate": new Date(2010, 4, 2),
+                                "fullTime": true,
+                                "position": "Financial Planning & Analysis Manager",
+                                "timeInPosition": 2
+                            },
+                            {
+                                "id": 22,
+                                "name": "Zachery Shelton",
+                                "reportsTo": 15,
+                                "phone": "(310) 240-8675",
+                                "extension": 4527,
+                                "hireDate": new Date(2011, 11, 23),
+                                "fullTime": false,
+                                "position": "Corporate Finance Controller",
+                                "timeInPosition": 6,
+                                "employees": [
+                                    {
+                                        "id": 28,
+                                        "name": "Cullen Freeman",
+                                        "reportsTo": 22,
+                                        "phone": "(136) 554-8814",
+                                        "extension": 9861,
+                                        "hireDate": new Date(2014, 3, 15),
+                                        "fullTime": true,
+                                        "position": "Treasurer Accountant",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 31,
+                                        "name": "Quinn Dean",
+                                        "reportsTo": 22,
+                                        "phone": "(152) 613-3507",
+                                        "extension": 6621,
+                                        "hireDate": new Date(2015, 1, 29),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 34,
+                                        "name": "Samantha Brady",
+                                        "reportsTo": 22,
+                                        "phone": "(206) 398-4328",
+                                        "extension": 1157,
+                                        "hireDate": new Date(2011, 2, 13),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 35,
+                                                "name": "Tamara Green",
+                                                "reportsTo": 34,
+                                                "phone": "(219) 248-2789",
+                                                "extension": 4880,
+                                                "hireDate": new Date(2014, 2, 4),
+                                                "fullTime": true,
+                                                "position": "Junior Accountant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 36,
+                                        "name": "Olympia Coleman",
+                                        "reportsTo": 22,
+                                        "phone": "(944) 853-6383",
+                                        "extension": 2136,
+                                        "hireDate": new Date(2013, 7, 31),
+                                        "fullTime": true,
+                                        "position": "Collections Manager",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 37,
+                                        "name": "Breanna Goodwin",
+                                        "reportsTo": 22,
+                                        "phone": "(379) 988-9630",
+                                        "extension": 5898,
+                                        "hireDate": new Date(2010, 5, 23),
+                                        "fullTime": false,
+                                        "position": "Payroll Specialist",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 27,
+                                "name": "Curran Travis",
+                                "reportsTo": 15,
+                                "phone": "(438) 135-8033",
+                                "extension": 3841,
+                                "hireDate": new Date(2011, 6, 13),
+                                "fullTime": true,
+                                "position": "Finance Controller",
+                                "timeInPosition": 5
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "Hunter Fry",
+                "reportsTo": 1,
+                "phone": "(766) 358-9858",
+                "extension": 3741,
+                "hireDate": new Date(2011, 2, 12),
+                "fullTime": false,
+                "position": "General Counsel",
+                "timeInPosition": 3,
+                "employees": [
+                    {
+                        "id": 9,
+                        "name": "Kuame Carrillo",
+                        "reportsTo": 8,
+                        "phone": "(192) 383-1305",
+                        "extension": 9228,
+                        "hireDate": new Date(2011, 2, 22),
+                        "fullTime": true,
+                        "position": "Associate General Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 13,
+                        "name": "Stacy Todd",
+                        "reportsTo": 8,
+                        "phone": "(925) 286-3327",
+                        "extension": 8565,
+                        "hireDate": new Date(2014, 7, 5),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 33,
+                        "name": "Valentine Wyatt",
+                        "reportsTo": 8,
+                        "phone": "(165) 166-6205",
+                        "extension": 3588,
+                        "hireDate": new Date(2015, 5, 21),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 5
+                    },
+                    {
+                        "id": 86,
+                        "name": "Daniel Mccarthy",
+                        "reportsTo": 8,
+                        "phone": "(624) 483-6206",
+                        "extension": 9112,
+                        "hireDate": new Date(2013, 12, 3),
+                        "fullTime": false,
+                        "position": "Staff Attorney",
+                        "timeInPosition": 0
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default employees;
diff --git a/vue-options-api-demos/treelist/editing-external-form/main.js b/vue-options-api-demos/treelist/editing-external-form/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/editing-external-form/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/editing-external-form/main.vue b/vue-options-api-demos/treelist/editing-external-form/main.vue
new file mode 100644
index 00000000..b11f9055
--- /dev/null
+++ b/vue-options-api-demos/treelist/editing-external-form/main.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="example-wrapper">
+    <TreeList
+        :dataItems="employees"
+        :style="{
+          maxHeight: '510px',
+          overflow: 'auto',
+        }"
+        :editField="editField"
+        :expandField="expandField"
+        :subItemsField="subItemsField"
+        @expandchange="onExpandChange"
+        :columns="columns"
+    >
+         <template v-slot:myTemplate="{props}">
+             <CommandCell :data-item="props.dataItem" 
+                     @edit="edit"
+                     @remove="remove"/>
+         </template>
+    </TreeList>
+    <DialogContainer v-if="itemInEdit" 
+        :data-item="itemInEdit"
+        @change="onItemChange"
+        @save="save" @cancel="cancel">
+    </DialogContainer>
+     </div>
+ </template>
+ <script>
+ import { 
+  TreeList,
+  mapTree,
+  extendDataItem,
+  removeItems
+ } from '@progress/kendo-vue-treelist';
+ import sampleEmployees from './data';
+ import DialogContainer from './DialogContainer.vue';
+ import CommandCell from './CommandCell.vue';
+ import { Button } from '@progress/kendo-vue-buttons';
+ 
+ export default {
+     components: {
+          TreeList,
+          DialogContainer,
+          CommandCell,
+         'KButton': Button
+     },
+     computed: {
+      employees() {
+          return mapTree(this.dataItems, this.subItemsField, (item) =>
+            extendDataItem(item, this.subItemsField, {
+              [this.expandField]: this.expanded.includes(item.id),
+            })
+          )
+        }
+     },
+     data: function () {
+         return {
+          subItemsField: 'employees',
+          expandField: 'expanded',
+          editField: 'inEdit',
+          dataItems: [...sampleEmployees],
+          itemInEdit: undefined,
+          expanded: [1, 2, 32],
+          columns: [
+             {
+                field: "name",
+                title: "Employee",
+                expandable: true,
+              },
+              {
+                field: "position",
+                title: "Position",
+              },
+              {
+                field: "fullTime",
+                title: "Full Time",
+              },
+              {
+                title: "Edit",
+                cell: 'myTemplate', 
+                width: '210px' 
+              }
+            ]
+         };
+     },
+     methods: {
+        edit(dataItem) {
+          this.itemInEdit = extendDataItem(dataItem, this.subItemsField);
+        },
+        remove(dataItem) {
+          this.dataItems = removeItems(this.dataItems, this.subItemsField, (i) => i.id === dataItem.id);
+        },
+        save (dataitem) {
+          this.dataItems = mapTree(this.dataItems, this.subItemsField, (item) =>
+              dataitem.id === item.id ? dataitem : item
+          );
+
+          this.itemInEdit = undefined;
+        },
+        cancel () {
+          this.itemInEdit = undefined;
+        },
+        onItemChange (itemInEdit) {
+          this.itemInEdit = itemInEdit;
+        },
+        onExpandChange (e) {
+          this.expanded = e.value
+              ? this.expanded.filter((id) => id !== e.dataItem.id)
+              : [...this.expanded, e.dataItem.id];
+        }
+      }
+ };
+ 
+ </script>
\ No newline at end of file
diff --git a/vue-options-api-demos/treelist/editing-in-cell/data.js b/vue-options-api-demos/treelist/editing-in-cell/data.js
new file mode 100644
index 00000000..f66aec4d
--- /dev/null
+++ b/vue-options-api-demos/treelist/editing-in-cell/data.js
@@ -0,0 +1,1150 @@
+
+const employees = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2,
+        "employees": [
+            {
+                "id": 2,
+                "name": "Guy Wooten",
+                "reportsTo": 1,
+                "phone": "(438) 738-4935",
+                "extension": 1155,
+                "hireDate": new Date(2010, 3, 3),
+                "fullTime": true,
+                "position": "Chief Technical Officer",
+                "timeInPosition": 1,
+                "employees": [
+                    {
+                        "id": 32,
+                        "name": "Buffy Weber",
+                        "reportsTo": 2,
+                        "phone": "(699) 838-6121",
+                        "extension": 8933,
+                        "hireDate": new Date(2011, 7, 11),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 11,
+                                "name": "Hyacinth Hood",
+                                "reportsTo": 32,
+                                "phone": "(889) 345-2438",
+                                "extension": 8564,
+                                "hireDate": new Date(2014, 2, 3),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 60,
+                                        "name": "Akeem Carr",
+                                        "reportsTo": 11,
+                                        "phone": "(738) 136-2814",
+                                        "extension": 9353,
+                                        "hireDate": new Date(2011, 4, 21),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 78,
+                                        "name": "Rinah Simon",
+                                        "reportsTo": 11,
+                                        "phone": "(285) 912-5271",
+                                        "extension": 7795,
+                                        "hireDate": new Date(2012, 10, 11),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 42,
+                                "name": "Gage Daniels",
+                                "reportsTo": 32,
+                                "phone": "(107) 290-6260",
+                                "extension": 896,
+                                "hireDate": new Date(2013, 5, 16),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 5
+                            },
+                            {
+                                "id": 43,
+                                "name": "Constance Vazquez",
+                                "reportsTo": 32,
+                                "phone": "(800) 301-1978",
+                                "extension": 5141,
+                                "hireDate": new Date(2011, 6, 7),
+                                "fullTime": true,
+                                "position": "Director, Engineering",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 46,
+                                        "name": "Darrel Solis",
+                                        "reportsTo": 43,
+                                        "phone": "(327) 977-0216",
+                                        "extension": 7779,
+                                        "hireDate": new Date(2015, 4, 25),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 47,
+                                                "name": "Brian Yang",
+                                                "reportsTo": 46,
+                                                "phone": "(565) 146-5435",
+                                                "extension": 3885,
+                                                "hireDate": new Date(2012, 9, 27),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 50,
+                                                "name": "Lillian Bradshaw",
+                                                "reportsTo": 46,
+                                                "phone": "(323) 509-3479",
+                                                "extension": 5426,
+                                                "hireDate": new Date(2014, 5, 10),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 51,
+                                                "name": "Christian Palmer",
+                                                "reportsTo": 46,
+                                                "phone": "(490) 421-8718",
+                                                "extension": 3706,
+                                                "hireDate": new Date(2012, 12, 27),
+                                                "fullTime": false,
+                                                "position": "Technical Lead",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 55,
+                                                "name": "Summer Mosley",
+                                                "reportsTo": 46,
+                                                "phone": "(784) 962-2301",
+                                                "extension": 5492,
+                                                "hireDate": new Date(2010, 3, 2),
+                                                "fullTime": true,
+                                                "position": "QA Engineer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 56,
+                                                "name": "Barry Ayers",
+                                                "reportsTo": 46,
+                                                "phone": "(452) 373-9227",
+                                                "extension": 1308,
+                                                "hireDate": new Date(2011, 10, 11),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 59,
+                                                "name": "Keiko Espinoza",
+                                                "reportsTo": 46,
+                                                "phone": "(226) 600-5305",
+                                                "extension": 9363,
+                                                "hireDate": new Date(2011, 9, 18),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 61,
+                                                "name": "Candace Pickett",
+                                                "reportsTo": 46,
+                                                "phone": "(120) 117-7475",
+                                                "extension": 5178,
+                                                "hireDate": new Date(2010, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 63,
+                                        "name": "Mia Caldwell",
+                                        "reportsTo": 43,
+                                        "phone": "(848) 636-6470",
+                                        "extension": 6368,
+                                        "hireDate": new Date(2012, 10, 7),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 65,
+                                                "name": "Thomas Terry",
+                                                "reportsTo": 63,
+                                                "phone": "(764) 831-4248",
+                                                "extension": 3574,
+                                                "hireDate": new Date(2015, 6, 15),
+                                                "fullTime": false,
+                                                "position": "Senior Enterprise Support Officer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 67,
+                                                "name": "Ruth Downs",
+                                                "reportsTo": 63,
+                                                "phone": "(138) 991-1440",
+                                                "extension": 8067,
+                                                "hireDate": new Date(2013, 7, 13),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 70,
+                                                "name": "Yasir Wilder",
+                                                "reportsTo": 63,
+                                                "phone": "(759) 701-8665",
+                                                "extension": 8350,
+                                                "hireDate": new Date(2010, 11, 8),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 71,
+                                                "name": "Flavia Short",
+                                                "reportsTo": 63,
+                                                "phone": "(370) 133-9238",
+                                                "extension": 6390,
+                                                "hireDate": new Date(2013, 2, 21),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 74,
+                                                "name": "Aaron Roach",
+                                                "reportsTo": 63,
+                                                "phone": "(958) 717-9230",
+                                                "extension": 4899,
+                                                "hireDate": new Date(2011, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 75,
+                                                "name": "Eric Russell",
+                                                "reportsTo": 63,
+                                                "phone": "(516) 575-8505",
+                                                "extension": 2224,
+                                                "hireDate": new Date(2012, 10, 28),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 76,
+                                                "name": "Cheyenne Olson",
+                                                "reportsTo": 63,
+                                                "phone": "(241) 645-0257",
+                                                "extension": 9181,
+                                                "hireDate": new Date(2015, 5, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 77,
+                                                "name": "Shaine Avila",
+                                                "reportsTo": 63,
+                                                "phone": "(844) 435-1360",
+                                                "extension": 3374,
+                                                "hireDate": new Date(2010, 1, 31),
+                                                "fullTime": true,
+                                                "position": "UI Designer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 81,
+                                                "name": "Chantale Long",
+                                                "reportsTo": 63,
+                                                "phone": "(252) 419-6891",
+                                                "extension": 7868,
+                                                "hireDate": new Date(2010, 6, 17),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 83,
+                                                "name": "Dane Cruz",
+                                                "reportsTo": 63,
+                                                "phone": "(946) 701-6165",
+                                                "extension": 3828,
+                                                "hireDate": new Date(2014, 10, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 84,
+                                                "name": "Regan Patterson",
+                                                "reportsTo": 63,
+                                                "phone": "(265) 946-1765",
+                                                "extension": 6955,
+                                                "hireDate": new Date(2012, 3, 1),
+                                                "fullTime": true,
+                                                "position": "Technical Writer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 85,
+                                                "name": "Drew Mckay",
+                                                "reportsTo": 63,
+                                                "phone": "(327) 293-0162",
+                                                "extension": 6904,
+                                                "hireDate": new Date(2011, 3, 25),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 88,
+                                                "name": "Bevis Miller",
+                                                "reportsTo": 63,
+                                                "phone": "(525) 557-0169",
+                                                "extension": 6978,
+                                                "hireDate": new Date(2011, 4, 19),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 89,
+                                                "name": "Bruce Mccarty",
+                                                "reportsTo": 63,
+                                                "phone": "(936) 777-8730",
+                                                "extension": 6552,
+                                                "hireDate": new Date(2014, 3, 28),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 5
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 90,
+                                        "name": "Ocean Blair",
+                                        "reportsTo": 43,
+                                        "phone": "(343) 586-6614",
+                                        "extension": 1424,
+                                        "hireDate": new Date(2011, 4, 27),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 91,
+                                                "name": "Guinevere Osborn",
+                                                "reportsTo": 90,
+                                                "phone": "(424) 741-0006",
+                                                "extension": 3166,
+                                                "hireDate": new Date(2014, 11, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 92,
+                                                "name": "Olga Strong",
+                                                "reportsTo": 90,
+                                                "phone": "(949) 417-1168",
+                                                "extension": 4568,
+                                                "hireDate": new Date(2015, 5, 28),
+                                                "fullTime": true,
+                                                "position": "Graphic Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 93,
+                                                "name": "Robert Orr",
+                                                "reportsTo": 90,
+                                                "phone": "(977) 341-3721",
+                                                "extension": 9241,
+                                                "hireDate": new Date(2012, 8, 20),
+                                                "fullTime": false,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 95,
+                                                "name": "Odette Sears",
+                                                "reportsTo": 90,
+                                                "phone": "(264) 818-6576",
+                                                "extension": 1914,
+                                                "hireDate": new Date(2013, 7, 5),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 45,
+                                "name": "Zelda Medina",
+                                "reportsTo": 32,
+                                "phone": "(563) 359-6023",
+                                "extension": 2600,
+                                "hireDate": new Date(2012, 11, 6),
+                                "fullTime": true,
+                                "position": "QA Architect",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    },
+                    {
+                        "id": 52,
+                        "name": "Skyler Cleveland",
+                        "reportsTo": 2,
+                        "phone": "(217) 280-5300",
+                        "extension": 9655,
+                        "hireDate": new Date(2014, 11, 10),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 40,
+                                "name": "Karleigh Garza",
+                                "reportsTo": 52,
+                                "phone": "(370) 983-8796",
+                                "extension": 4044,
+                                "hireDate": new Date(2014, 3, 10),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 49,
+                                        "name": "Elmo Tyson",
+                                        "reportsTo": 40,
+                                        "phone": "(344) 496-9555",
+                                        "extension": 6950,
+                                        "hireDate": new Date(2014, 9, 18),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 72,
+                                        "name": "Stacey Lynn",
+                                        "reportsTo": 40,
+                                        "phone": "(140) 772-7509",
+                                        "extension": 8396,
+                                        "hireDate": new Date(2014, 7, 31),
+                                        "fullTime": false,
+                                        "position": "QA Engineer",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 80,
+                                                "name": "Meredith Parrish",
+                                                "reportsTo": 72,
+                                                "phone": "(714) 284-2408",
+                                                "extension": 7675,
+                                                "hireDate": new Date(2012, 11, 13),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 96,
+                                        "name": "Cassady Whitley",
+                                        "reportsTo": 40,
+                                        "phone": "(996) 587-8405",
+                                        "extension": 780,
+                                        "hireDate": new Date(2013, 5, 7),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 5
+                                    },
+                                    {
+                                        "id": 97,
+                                        "name": "Haviva Campbell",
+                                        "reportsTo": 40,
+                                        "phone": "(263) 887-4689",
+                                        "extension": 2808,
+                                        "hireDate": new Date(2013, 3, 5),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 98,
+                                        "name": "Cameron Ayers",
+                                        "reportsTo": 40,
+                                        "phone": "(470) 709-8030",
+                                        "extension": 2893,
+                                        "hireDate": new Date(2013, 8, 28),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 99,
+                                        "name": "Martha Sargent",
+                                        "reportsTo": 40,
+                                        "phone": "(587) 812-4418",
+                                        "extension": 5099,
+                                        "hireDate": new Date(2014, 2, 27),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 100,
+                                        "name": "Darrel Kinney",
+                                        "reportsTo": 40,
+                                        "phone": "(888) 483-9606",
+                                        "extension": 4779,
+                                        "hireDate": new Date(2014, 3, 24),
+                                        "fullTime": false,
+                                        "position": "Graphic Designer",
+                                        "timeInPosition": 1
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 54,
+                                "name": "Kuame Frye",
+                                "reportsTo": 52,
+                                "phone": "(360) 721-5886",
+                                "extension": 2730,
+                                "hireDate": new Date(2010, 11, 17),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 64,
+                                        "name": "Ori Wynn",
+                                        "reportsTo": 54,
+                                        "phone": "(366) 342-0166",
+                                        "extension": 7252,
+                                        "hireDate": new Date(2015, 6, 21),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 0,
+                                        "employees": [
+                                            {
+                                                "id": 6,
+                                                "name": "Moses Duncan",
+                                                "reportsTo": 64,
+                                                "phone": "(421) 611-4814",
+                                                "extension": 669,
+                                                "hireDate": new Date(2010, 5, 24),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 12,
+                                                "name": "Jamalia Wallace",
+                                                "reportsTo": 64,
+                                                "phone": "(611) 391-8016",
+                                                "extension": 1952,
+                                                "hireDate": new Date(2011, 9, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Designer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 62,
+                                                "name": "Palmer Gregory",
+                                                "reportsTo": 64,
+                                                "phone": "(360) 430-2505",
+                                                "extension": 4337,
+                                                "hireDate": new Date(2014, 8, 30),
+                                                "fullTime": true,
+                                                "position": "Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 68,
+                                                "name": "Mallory Gilliam",
+                                                "reportsTo": 64,
+                                                "phone": "(878) 423-2971",
+                                                "extension": 1341,
+                                                "hireDate": new Date(2014, 7, 24),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 73,
+                                                "name": "Ima Hughes",
+                                                "reportsTo": 64,
+                                                "phone": "(905) 485-8001",
+                                                "extension": 1273,
+                                                "hireDate": new Date(2013, 6, 3),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 79,
+                                                "name": "Duncan Mathews",
+                                                "reportsTo": 64,
+                                                "phone": "(790) 971-9709",
+                                                "extension": 4573,
+                                                "hireDate": new Date(2011, 8, 21),
+                                                "fullTime": false,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 69,
+                                "name": "Sierra Beasley",
+                                "reportsTo": 52,
+                                "phone": "(271) 953-1968",
+                                "extension": 3324,
+                                "hireDate": new Date(2011, 4, 2),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 3,
+                                "employees": [
+                                    {
+                                        "id": 38,
+                                        "name": "Elton Tucker",
+                                        "reportsTo": 69,
+                                        "phone": "(988) 930-9331",
+                                        "extension": 9216,
+                                        "hireDate": new Date(2015, 6, 4),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 1
+                                    },
+                                    {
+                                        "id": 39,
+                                        "name": "Iona Brennan",
+                                        "reportsTo": 69,
+                                        "phone": "(356) 563-0600",
+                                        "extension": 5634,
+                                        "hireDate": new Date(2010, 9, 23),
+                                        "fullTime": true,
+                                        "position": "Junior Support Officer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 53,
+                                        "name": "Paul Campos",
+                                        "reportsTo": 69,
+                                        "phone": "(899) 205-1689",
+                                        "extension": 8586,
+                                        "hireDate": new Date(2011, 3, 17),
+                                        "fullTime": true,
+                                        "position": "Interaction Designer",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 66,
+                                                "name": "Gloria Freeman",
+                                                "reportsTo": 53,
+                                                "phone": "(344) 950-9168",
+                                                "extension": 4738,
+                                                "hireDate": new Date(2013, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Junior Interaction Designer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 57,
+                                        "name": "Alyssa Hansen",
+                                        "reportsTo": 69,
+                                        "phone": "(548) 925-4799",
+                                        "extension": 4716,
+                                        "hireDate": new Date(2011, 1, 19),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 82,
+                                        "name": "Yael Walters",
+                                        "reportsTo": 69,
+                                        "phone": "(311) 489-8191",
+                                        "extension": 6520,
+                                        "hireDate": new Date(2013, 7, 4),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 87,
+                                        "name": "Dahlia Hunt",
+                                        "reportsTo": 69,
+                                        "phone": "(720) 339-5202",
+                                        "extension": 3690,
+                                        "hireDate": new Date(2011, 3, 26),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 94,
+                                        "name": "Adria Stanley",
+                                        "reportsTo": 69,
+                                        "phone": "(536) 357-6391",
+                                        "extension": 3374,
+                                        "hireDate": new Date(2014, 7, 26),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "Priscilla Frank",
+                "reportsTo": 1,
+                "phone": "(278) 927-2684",
+                "extension": 4183,
+                "hireDate": new Date(2014, 11, 30),
+                "fullTime": true,
+                "position": "Chief Product Officer",
+                "timeInPosition": 2,
+                "employees": [
+                    {
+                        "id": 4,
+                        "name": "Ursula Holmes",
+                        "reportsTo": 3,
+                        "phone": "(302) 760-2034",
+                        "extension": 2226,
+                        "hireDate": new Date(2011, 6, 6),
+                        "fullTime": true,
+                        "position": "EVP, Product Strategy",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 24,
+                        "name": "Melvin Carrillo",
+                        "reportsTo": 3,
+                        "phone": "(348) 933-5167",
+                        "extension": 2482,
+                        "hireDate": new Date(2014, 7, 21),
+                        "fullTime": true,
+                        "position": "Director, Developer Relations",
+                        "timeInPosition": 6,
+                        "employees": [
+                            {
+                                "id": 29,
+                                "name": "Martha Chavez",
+                                "reportsTo": 24,
+                                "phone": "(860) 754-3464",
+                                "extension": 4531,
+                                "hireDate": new Date(2013, 3, 12),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 30,
+                                "name": "Oren Fox",
+                                "reportsTo": 24,
+                                "phone": "(572) 414-3299",
+                                "extension": 4849,
+                                "hireDate": new Date(2013, 5, 14),
+                                "fullTime": false,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 41,
+                                "name": "Amos Barr",
+                                "reportsTo": 24,
+                                "phone": "(470) 381-3718",
+                                "extension": 7643,
+                                "hireDate": new Date(2010, 3, 9),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "Anika Vega",
+                "reportsTo": 1,
+                "phone": "(910) 714-1802",
+                "extension": 6353,
+                "hireDate": new Date(2010, 2, 25),
+                "fullTime": true,
+                "position": "Chief Process Officer",
+                "timeInPosition": 5,
+                "employees": [
+                    {
+                        "id": 10,
+                        "name": "Vernon Ballard",
+                        "reportsTo": 5,
+                        "phone": "(702) 185-8890",
+                        "extension": 9242,
+                        "hireDate": new Date(2015, 6, 26),
+                        "fullTime": true,
+                        "position": "Director Facilities",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 16,
+                                "name": "Ali Guy",
+                                "reportsTo": 10,
+                                "phone": "(429) 912-6578",
+                                "extension": 2225,
+                                "hireDate": new Date(2014, 6, 29),
+                                "fullTime": true,
+                                "position": "Operations Manager",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 23,
+                                        "name": "Bruce Reilly",
+                                        "reportsTo": 16,
+                                        "phone": "(995) 243-7302",
+                                        "extension": 4815,
+                                        "hireDate": new Date(2015, 4, 1),
+                                        "fullTime": true,
+                                        "position": "Head of Security",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 26,
+                                                "name": "Rowan Morin",
+                                                "reportsTo": 23,
+                                                "phone": "(792) 141-4374",
+                                                "extension": 1844,
+                                                "hireDate": new Date(2015, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Building Security",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 44,
+                                                "name": "Benedict Soto",
+                                                "reportsTo": 23,
+                                                "phone": "(822) 282-5991",
+                                                "extension": 6422,
+                                                "hireDate": new Date(2012, 6, 1),
+                                                "fullTime": false,
+                                                "position": "Building Security",
+                                                "timeInPosition": 4
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 48,
+                                        "name": "Maryam Rios",
+                                        "reportsTo": 16,
+                                        "phone": "(673) 764-6720",
+                                        "extension": 531,
+                                        "hireDate": new Date(2014, 3, 3),
+                                        "fullTime": true,
+                                        "position": "Team Lead, Personal Assistants",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 58,
+                                                "name": "Rose Mcintyre",
+                                                "reportsTo": 48,
+                                                "phone": "(771) 615-4590",
+                                                "extension": 7094,
+                                                "hireDate": new Date(2015, 6, 30),
+                                                "fullTime": false,
+                                                "position": "Personal Assistant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "Nevada Hart",
+                "reportsTo": 1,
+                "phone": "(254) 220-1576",
+                "extension": 6649,
+                "hireDate": new Date(2015, 8, 17),
+                "fullTime": true,
+                "position": "Chief Financial Officer",
+                "timeInPosition": 6,
+                "employees": [
+                    {
+                        "id": 14,
+                        "name": "Zena Sanford",
+                        "reportsTo": 7,
+                        "phone": "(437) 568-8160",
+                        "extension": 4452,
+                        "hireDate": new Date(2010, 11, 30),
+                        "fullTime": true,
+                        "position": "VP, Finance",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 15,
+                        "name": "Quinlan Howe",
+                        "reportsTo": 7,
+                        "phone": "(464) 334-9748",
+                        "extension": 8722,
+                        "hireDate": new Date(2011, 6, 9),
+                        "fullTime": false,
+                        "position": "Senior Director, Finance",
+                        "timeInPosition": 0,
+                        "employees": [
+                            {
+                                "id": 17,
+                                "name": "Indira Lopez",
+                                "reportsTo": 15,
+                                "phone": "(301) 368-0938",
+                                "extension": 8027,
+                                "hireDate": new Date(2013, 8, 18),
+                                "fullTime": true,
+                                "position": "ERP Team Lead",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 18,
+                                        "name": "Lareina Lara",
+                                        "reportsTo": 17,
+                                        "phone": "(233) 457-7482",
+                                        "extension": 1996,
+                                        "hireDate": new Date(2010, 4, 30),
+                                        "fullTime": true,
+                                        "position": "ERP Solutions Consultant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 19,
+                                        "name": "Maxwell Wise",
+                                        "reportsTo": 17,
+                                        "phone": "(570) 494-2531",
+                                        "extension": 9865,
+                                        "hireDate": new Date(2012, 5, 19),
+                                        "fullTime": true,
+                                        "position": "Systems Engineer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 20,
+                                "name": "Hunter Mcbride",
+                                "reportsTo": 15,
+                                "phone": "(409) 442-7016",
+                                "extension": 4284,
+                                "hireDate": new Date(2012, 10, 20),
+                                "fullTime": true,
+                                "position": "Senior Director, Tax",
+                                "timeInPosition": 3
+                            },
+                            {
+                                "id": 21,
+                                "name": "Jana Serrano",
+                                "reportsTo": 15,
+                                "phone": "(910) 718-4620",
+                                "extension": 6970,
+                                "hireDate": new Date(2010, 4, 2),
+                                "fullTime": true,
+                                "position": "Financial Planning & Analysis Manager",
+                                "timeInPosition": 2
+                            },
+                            {
+                                "id": 22,
+                                "name": "Zachery Shelton",
+                                "reportsTo": 15,
+                                "phone": "(310) 240-8675",
+                                "extension": 4527,
+                                "hireDate": new Date(2011, 11, 23),
+                                "fullTime": false,
+                                "position": "Corporate Finance Controller",
+                                "timeInPosition": 6,
+                                "employees": [
+                                    {
+                                        "id": 28,
+                                        "name": "Cullen Freeman",
+                                        "reportsTo": 22,
+                                        "phone": "(136) 554-8814",
+                                        "extension": 9861,
+                                        "hireDate": new Date(2014, 3, 15),
+                                        "fullTime": true,
+                                        "position": "Treasurer Accountant",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 31,
+                                        "name": "Quinn Dean",
+                                        "reportsTo": 22,
+                                        "phone": "(152) 613-3507",
+                                        "extension": 6621,
+                                        "hireDate": new Date(2015, 1, 29),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 34,
+                                        "name": "Samantha Brady",
+                                        "reportsTo": 22,
+                                        "phone": "(206) 398-4328",
+                                        "extension": 1157,
+                                        "hireDate": new Date(2011, 2, 13),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 35,
+                                                "name": "Tamara Green",
+                                                "reportsTo": 34,
+                                                "phone": "(219) 248-2789",
+                                                "extension": 4880,
+                                                "hireDate": new Date(2014, 2, 4),
+                                                "fullTime": true,
+                                                "position": "Junior Accountant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 36,
+                                        "name": "Olympia Coleman",
+                                        "reportsTo": 22,
+                                        "phone": "(944) 853-6383",
+                                        "extension": 2136,
+                                        "hireDate": new Date(2013, 7, 31),
+                                        "fullTime": true,
+                                        "position": "Collections Manager",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 37,
+                                        "name": "Breanna Goodwin",
+                                        "reportsTo": 22,
+                                        "phone": "(379) 988-9630",
+                                        "extension": 5898,
+                                        "hireDate": new Date(2010, 5, 23),
+                                        "fullTime": false,
+                                        "position": "Payroll Specialist",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 27,
+                                "name": "Curran Travis",
+                                "reportsTo": 15,
+                                "phone": "(438) 135-8033",
+                                "extension": 3841,
+                                "hireDate": new Date(2011, 6, 13),
+                                "fullTime": true,
+                                "position": "Finance Controller",
+                                "timeInPosition": 5
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "Hunter Fry",
+                "reportsTo": 1,
+                "phone": "(766) 358-9858",
+                "extension": 3741,
+                "hireDate": new Date(2011, 2, 12),
+                "fullTime": false,
+                "position": "General Counsel",
+                "timeInPosition": 3,
+                "employees": [
+                    {
+                        "id": 9,
+                        "name": "Kuame Carrillo",
+                        "reportsTo": 8,
+                        "phone": "(192) 383-1305",
+                        "extension": 9228,
+                        "hireDate": new Date(2011, 2, 22),
+                        "fullTime": true,
+                        "position": "Associate General Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 13,
+                        "name": "Stacy Todd",
+                        "reportsTo": 8,
+                        "phone": "(925) 286-3327",
+                        "extension": 8565,
+                        "hireDate": new Date(2014, 7, 5),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 33,
+                        "name": "Valentine Wyatt",
+                        "reportsTo": 8,
+                        "phone": "(165) 166-6205",
+                        "extension": 3588,
+                        "hireDate": new Date(2015, 5, 21),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 5
+                    },
+                    {
+                        "id": 86,
+                        "name": "Daniel Mccarthy",
+                        "reportsTo": 8,
+                        "phone": "(624) 483-6206",
+                        "extension": 9112,
+                        "hireDate": new Date(2013, 12, 3),
+                        "fullTime": false,
+                        "position": "Staff Attorney",
+                        "timeInPosition": 0
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default employees;
diff --git a/vue-options-api-demos/treelist/editing-in-cell/main.js b/vue-options-api-demos/treelist/editing-in-cell/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/editing-in-cell/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/editing-in-cell/main.vue b/vue-options-api-demos/treelist/editing-in-cell/main.vue
new file mode 100644
index 00000000..6c14f986
--- /dev/null
+++ b/vue-options-api-demos/treelist/editing-in-cell/main.vue
@@ -0,0 +1,216 @@
+<template>
+  <div>
+  <TreeList
+      :style="{
+        maxHeight: '510px',
+        overflow: 'auto',
+      }"
+      :navigatable="true"
+      :dataItems="processedData"
+      :editField="editField"
+      :expandField="expandField"
+      :subItemsField="subItemsField"
+      @rowmousedown="handleRowMousedown"
+      @rowfocus="handleRowFocus"
+      @rowblur="handleRowBlur"
+      @cellclick="handleCellClick"
+      @itemchange="itemChange"
+      @expandchange="onExpandChange"
+      :columns="columns"
+      :toolbar="'toolbar'"
+      >
+      <template v-slot:toolbar>
+        <div>
+          <KButton
+            :title="'Save Changes'"
+            @click="saveChanges"
+            :disabled="!changes"
+          >
+            Save Changes
+          </KButton>
+          <KButton
+            :title="'Cancel Changes'"
+            @click="cancelChanges"
+            :disabled="!changes"
+          >
+            Cancel Changes
+          </KButton>
+        </div>
+    </template>
+    <template v-slot:textEditor={props}>
+          <TreeListTextEditor v-bind="props" :focusInputOnMount="true" @change="props.onChange" />
+    </template>
+    <template v-slot:numericEditor={props}>
+          <TreeListNumericEditor v-bind="props" :focusInputOnMount="true" @change="props.onChange" />
+    </template>
+    <template v-slot:dateEditor={props}>
+          <TreeListDateEditor v-bind="props" :focusInputOnMount="true" @change="props.onChange" />
+    </template>
+    <template v-slot:booleanEditor={props}>
+          <TreeListBooleanEditor v-bind="props" :focusInputOnMount="true" @change="props.onChange" />
+    </template>
+  </TreeList>
+</div>
+</template>
+
+<script>
+import employees from './data';
+import { Button } from '@progress/kendo-vue-buttons';
+import {
+  TreeList,
+  mapTree,
+  extendDataItem,
+  TreeListTextEditor,
+  TreeListNumericEditor,
+  TreeListDateEditor,
+  TreeListBooleanEditor,
+} from '@progress/kendo-vue-treelist';
+
+export default {
+  components: {
+    TreeList,
+    KButton: Button,
+    TreeListTextEditor,
+    TreeListNumericEditor,
+    TreeListDateEditor,
+    TreeListBooleanEditor,
+  },
+  data() {
+    return {
+        dataItems: employees.slice(),
+        expanded: [1, 2, 32],
+        editItem: undefined,
+        editItemField: undefined,
+        changes: false,
+        subItemsField: "employees",
+        expandField: "expanded",
+        editField: "inEdit",
+        initColumns: [
+          {
+            field: "name",
+            title: "Name",
+            width: "280px",
+            editor: 'text',
+            editCell: 'textEditor',
+            expandable: true,
+          },
+          {
+            field: "position",
+            title: "Position",
+            width: "260px",
+            editCell: 'textEditor',
+          },
+          {
+            field: "hireDate",
+            title: "Hire Date",
+            format: "{0:d}",
+            width: "170px",
+            editCell: 'dateEditor',
+          },
+          {
+            field: "timeInPosition",
+            title: "Year(s) in Position",
+            width: "170px",
+            editCell: 'numericEditor',
+          },
+          {
+            field: "fullTime",
+            title: "Full Time",
+            width: "160px",
+            editCell: 'booleanEditor',
+          },
+        ]
+    };
+  },
+  computed: {
+    editItemId() {
+      return this.editItem ? this.editItem.id : null;
+    },
+    columns() {
+      return this.initColumns.map((column) => ({
+        ...column,
+        editCell: this.editItemField === column.field ? column.editCell : undefined,
+      }))
+    },
+    processedData() {
+      return mapTree(this.dataItems, this.subItemsField, (item) =>
+        extendDataItem(item, this.subItemsField, {
+          [this.expandField]: this.expanded.includes(item.id),
+          [this.editField]: item.id === this.editItemId ? this.editItemField : undefined,
+        })
+      )
+    }
+  },
+  methods: {
+    handleRowMousedown() {
+      this.preventExit = true;
+        clearTimeout(this.preventExitTimeout);
+        this.preventExitTimeout = setTimeout(() => {
+          this.preventExit = undefined;
+        });
+    },
+    handleRowBlur() {
+        clearTimeout(this.blurTimeout);
+
+        if (!this.preventExit) {
+          this.blurTimeout = setTimeout(() => {
+            this.exitEdit();
+          });
+        }
+      },
+    handleRowFocus() {
+      clearTimeout(this.blurTimeout);
+    },
+    handleCellClick(event) {
+      const targetClasses = event.event.target.classList;
+
+      if (
+        targetClasses &&
+        (targetClasses.contains("k-i-caret-alt-right") ||
+          targetClasses.contains("k-i-caret-alt-down"))
+      ) {
+        return;
+      }
+
+      this.enterEdit(event.dataItem, event.field);
+    },
+    enterEdit (dataItem, field) {
+      this.editItem = { ...dataItem };
+      this.editItemField = field;
+    },
+    exitEdit () {
+      this.editItem = undefined;
+      this.editItemField = undefined;
+    },
+    onExpandChange (event) {
+      this.expanded = event.value
+        ? this.expanded.filter((id) => id !== event.dataItem.id)
+        : [...this.expanded, event.dataItem.id];
+    },
+    saveChanges () {
+      employees.splice(0, employees.length, ...this.dataItems);
+      this.editItem = undefined;
+      this.editItemField = undefined;
+      this.changes = false;
+    },
+    cancelChanges () {
+      this.dataItems = [...employees];
+      this.editItem = undefined;
+      this.editItemField = undefined;
+      this.changes = false;
+    },
+    itemChange (event) {
+      const field = event.field;
+      
+      this.changes = true;
+      this.dataItems = mapTree(this.dataItems, this.subItemsField, (item) =>
+          event.dataItem.id === item.id
+            ? extendDataItem(item, this.subItemsField, {
+                [field]: event.value,
+              })
+            : item
+        );
+    }
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treelist/editing-inline/CommandCell.vue b/vue-options-api-demos/treelist/editing-inline/CommandCell.vue
new file mode 100644
index 00000000..4b7da8ba
--- /dev/null
+++ b/vue-options-api-demos/treelist/editing-inline/CommandCell.vue
@@ -0,0 +1,90 @@
+<template>
+    <td class="k-command-cell">
+        <kbutton v-if="!isInEdit"
+            @click="addChildHandler"
+            :type="'button'"
+          >
+            Add Employee
+          </kbutton>
+        <kbutton
+            :class="editButtonClass"
+            :type="'button'"
+            :theme-color="'primary'"
+            @click="editHandler">
+            {{editText}}
+        </kbutton>
+        <kbutton
+            :type="'button'"
+            :class="removeButtonClass"
+            @click="removeHandler">
+            {{removeText}}
+        </kbutton>
+    </td>
+    </template>
+    <script>
+    import { Button } from '@progress/kendo-vue-buttons';
+    export default {
+        components: {
+            kbutton: Button
+        },
+        props: {
+            id: String,
+            field: String,
+            dataItem: Object,
+            format: String,
+            className: String,
+            columnIndex: Number,
+            columnsCount: Number,
+            rowType: String,
+            level: Number,
+            expanded: Boolean,
+            editField: String
+        },
+        data(){
+            return {
+                navAttrs: {}
+            };
+        },
+        computed: {
+            isInEdit() {
+                return this.$props.dataItem['inEdit'];
+            },
+            isNew() {
+                return this.$props.dataItem.isNew;
+            },
+            editText(){
+                if (this.isInEdit){
+                    return this.isNew ? 'Add' : 'Update';
+                } else {
+                    return 'Edit';
+                }
+            },
+            removeText(){
+                if (this.isInEdit){
+                    return this.isNew ? 'Discard' : 'Cancel';
+                } else {
+                    return 'Remove';
+                }
+            },
+            editButtonClass(){
+                return this.isInEdit ? 'k-grid-save-command' : 'k-grid-edit-command';
+            },
+            removeButtonClass(){
+                return this.isInEdit ? 'k-grid-cancel-command' : 'k-grid-remove-command';
+            }
+        },
+        methods: {
+            addChildHandler() {
+                this.$emit('addchild', this.dataItem);
+            },
+            editHandler: function() {
+                const command = this.isInEdit ? 'save' : 'edit';
+                this.$emit(command, this.dataItem);
+            },
+            removeHandler: function() {
+                const command = this.isInEdit ? 'cancel' : 'remove';
+                this.$emit(command, this.dataItem);
+            }
+        }
+    }
+    </script>
\ No newline at end of file
diff --git a/vue-options-api-demos/treelist/editing-inline/data.js b/vue-options-api-demos/treelist/editing-inline/data.js
new file mode 100644
index 00000000..f66aec4d
--- /dev/null
+++ b/vue-options-api-demos/treelist/editing-inline/data.js
@@ -0,0 +1,1150 @@
+
+const employees = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2,
+        "employees": [
+            {
+                "id": 2,
+                "name": "Guy Wooten",
+                "reportsTo": 1,
+                "phone": "(438) 738-4935",
+                "extension": 1155,
+                "hireDate": new Date(2010, 3, 3),
+                "fullTime": true,
+                "position": "Chief Technical Officer",
+                "timeInPosition": 1,
+                "employees": [
+                    {
+                        "id": 32,
+                        "name": "Buffy Weber",
+                        "reportsTo": 2,
+                        "phone": "(699) 838-6121",
+                        "extension": 8933,
+                        "hireDate": new Date(2011, 7, 11),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 11,
+                                "name": "Hyacinth Hood",
+                                "reportsTo": 32,
+                                "phone": "(889) 345-2438",
+                                "extension": 8564,
+                                "hireDate": new Date(2014, 2, 3),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 60,
+                                        "name": "Akeem Carr",
+                                        "reportsTo": 11,
+                                        "phone": "(738) 136-2814",
+                                        "extension": 9353,
+                                        "hireDate": new Date(2011, 4, 21),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 78,
+                                        "name": "Rinah Simon",
+                                        "reportsTo": 11,
+                                        "phone": "(285) 912-5271",
+                                        "extension": 7795,
+                                        "hireDate": new Date(2012, 10, 11),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 42,
+                                "name": "Gage Daniels",
+                                "reportsTo": 32,
+                                "phone": "(107) 290-6260",
+                                "extension": 896,
+                                "hireDate": new Date(2013, 5, 16),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 5
+                            },
+                            {
+                                "id": 43,
+                                "name": "Constance Vazquez",
+                                "reportsTo": 32,
+                                "phone": "(800) 301-1978",
+                                "extension": 5141,
+                                "hireDate": new Date(2011, 6, 7),
+                                "fullTime": true,
+                                "position": "Director, Engineering",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 46,
+                                        "name": "Darrel Solis",
+                                        "reportsTo": 43,
+                                        "phone": "(327) 977-0216",
+                                        "extension": 7779,
+                                        "hireDate": new Date(2015, 4, 25),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 47,
+                                                "name": "Brian Yang",
+                                                "reportsTo": 46,
+                                                "phone": "(565) 146-5435",
+                                                "extension": 3885,
+                                                "hireDate": new Date(2012, 9, 27),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 50,
+                                                "name": "Lillian Bradshaw",
+                                                "reportsTo": 46,
+                                                "phone": "(323) 509-3479",
+                                                "extension": 5426,
+                                                "hireDate": new Date(2014, 5, 10),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 51,
+                                                "name": "Christian Palmer",
+                                                "reportsTo": 46,
+                                                "phone": "(490) 421-8718",
+                                                "extension": 3706,
+                                                "hireDate": new Date(2012, 12, 27),
+                                                "fullTime": false,
+                                                "position": "Technical Lead",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 55,
+                                                "name": "Summer Mosley",
+                                                "reportsTo": 46,
+                                                "phone": "(784) 962-2301",
+                                                "extension": 5492,
+                                                "hireDate": new Date(2010, 3, 2),
+                                                "fullTime": true,
+                                                "position": "QA Engineer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 56,
+                                                "name": "Barry Ayers",
+                                                "reportsTo": 46,
+                                                "phone": "(452) 373-9227",
+                                                "extension": 1308,
+                                                "hireDate": new Date(2011, 10, 11),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 59,
+                                                "name": "Keiko Espinoza",
+                                                "reportsTo": 46,
+                                                "phone": "(226) 600-5305",
+                                                "extension": 9363,
+                                                "hireDate": new Date(2011, 9, 18),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 61,
+                                                "name": "Candace Pickett",
+                                                "reportsTo": 46,
+                                                "phone": "(120) 117-7475",
+                                                "extension": 5178,
+                                                "hireDate": new Date(2010, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 63,
+                                        "name": "Mia Caldwell",
+                                        "reportsTo": 43,
+                                        "phone": "(848) 636-6470",
+                                        "extension": 6368,
+                                        "hireDate": new Date(2012, 10, 7),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 65,
+                                                "name": "Thomas Terry",
+                                                "reportsTo": 63,
+                                                "phone": "(764) 831-4248",
+                                                "extension": 3574,
+                                                "hireDate": new Date(2015, 6, 15),
+                                                "fullTime": false,
+                                                "position": "Senior Enterprise Support Officer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 67,
+                                                "name": "Ruth Downs",
+                                                "reportsTo": 63,
+                                                "phone": "(138) 991-1440",
+                                                "extension": 8067,
+                                                "hireDate": new Date(2013, 7, 13),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 70,
+                                                "name": "Yasir Wilder",
+                                                "reportsTo": 63,
+                                                "phone": "(759) 701-8665",
+                                                "extension": 8350,
+                                                "hireDate": new Date(2010, 11, 8),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 71,
+                                                "name": "Flavia Short",
+                                                "reportsTo": 63,
+                                                "phone": "(370) 133-9238",
+                                                "extension": 6390,
+                                                "hireDate": new Date(2013, 2, 21),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 74,
+                                                "name": "Aaron Roach",
+                                                "reportsTo": 63,
+                                                "phone": "(958) 717-9230",
+                                                "extension": 4899,
+                                                "hireDate": new Date(2011, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 75,
+                                                "name": "Eric Russell",
+                                                "reportsTo": 63,
+                                                "phone": "(516) 575-8505",
+                                                "extension": 2224,
+                                                "hireDate": new Date(2012, 10, 28),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 76,
+                                                "name": "Cheyenne Olson",
+                                                "reportsTo": 63,
+                                                "phone": "(241) 645-0257",
+                                                "extension": 9181,
+                                                "hireDate": new Date(2015, 5, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 77,
+                                                "name": "Shaine Avila",
+                                                "reportsTo": 63,
+                                                "phone": "(844) 435-1360",
+                                                "extension": 3374,
+                                                "hireDate": new Date(2010, 1, 31),
+                                                "fullTime": true,
+                                                "position": "UI Designer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 81,
+                                                "name": "Chantale Long",
+                                                "reportsTo": 63,
+                                                "phone": "(252) 419-6891",
+                                                "extension": 7868,
+                                                "hireDate": new Date(2010, 6, 17),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 83,
+                                                "name": "Dane Cruz",
+                                                "reportsTo": 63,
+                                                "phone": "(946) 701-6165",
+                                                "extension": 3828,
+                                                "hireDate": new Date(2014, 10, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 84,
+                                                "name": "Regan Patterson",
+                                                "reportsTo": 63,
+                                                "phone": "(265) 946-1765",
+                                                "extension": 6955,
+                                                "hireDate": new Date(2012, 3, 1),
+                                                "fullTime": true,
+                                                "position": "Technical Writer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 85,
+                                                "name": "Drew Mckay",
+                                                "reportsTo": 63,
+                                                "phone": "(327) 293-0162",
+                                                "extension": 6904,
+                                                "hireDate": new Date(2011, 3, 25),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 88,
+                                                "name": "Bevis Miller",
+                                                "reportsTo": 63,
+                                                "phone": "(525) 557-0169",
+                                                "extension": 6978,
+                                                "hireDate": new Date(2011, 4, 19),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 89,
+                                                "name": "Bruce Mccarty",
+                                                "reportsTo": 63,
+                                                "phone": "(936) 777-8730",
+                                                "extension": 6552,
+                                                "hireDate": new Date(2014, 3, 28),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 5
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 90,
+                                        "name": "Ocean Blair",
+                                        "reportsTo": 43,
+                                        "phone": "(343) 586-6614",
+                                        "extension": 1424,
+                                        "hireDate": new Date(2011, 4, 27),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 91,
+                                                "name": "Guinevere Osborn",
+                                                "reportsTo": 90,
+                                                "phone": "(424) 741-0006",
+                                                "extension": 3166,
+                                                "hireDate": new Date(2014, 11, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 92,
+                                                "name": "Olga Strong",
+                                                "reportsTo": 90,
+                                                "phone": "(949) 417-1168",
+                                                "extension": 4568,
+                                                "hireDate": new Date(2015, 5, 28),
+                                                "fullTime": true,
+                                                "position": "Graphic Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 93,
+                                                "name": "Robert Orr",
+                                                "reportsTo": 90,
+                                                "phone": "(977) 341-3721",
+                                                "extension": 9241,
+                                                "hireDate": new Date(2012, 8, 20),
+                                                "fullTime": false,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 95,
+                                                "name": "Odette Sears",
+                                                "reportsTo": 90,
+                                                "phone": "(264) 818-6576",
+                                                "extension": 1914,
+                                                "hireDate": new Date(2013, 7, 5),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 45,
+                                "name": "Zelda Medina",
+                                "reportsTo": 32,
+                                "phone": "(563) 359-6023",
+                                "extension": 2600,
+                                "hireDate": new Date(2012, 11, 6),
+                                "fullTime": true,
+                                "position": "QA Architect",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    },
+                    {
+                        "id": 52,
+                        "name": "Skyler Cleveland",
+                        "reportsTo": 2,
+                        "phone": "(217) 280-5300",
+                        "extension": 9655,
+                        "hireDate": new Date(2014, 11, 10),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 40,
+                                "name": "Karleigh Garza",
+                                "reportsTo": 52,
+                                "phone": "(370) 983-8796",
+                                "extension": 4044,
+                                "hireDate": new Date(2014, 3, 10),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 49,
+                                        "name": "Elmo Tyson",
+                                        "reportsTo": 40,
+                                        "phone": "(344) 496-9555",
+                                        "extension": 6950,
+                                        "hireDate": new Date(2014, 9, 18),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 72,
+                                        "name": "Stacey Lynn",
+                                        "reportsTo": 40,
+                                        "phone": "(140) 772-7509",
+                                        "extension": 8396,
+                                        "hireDate": new Date(2014, 7, 31),
+                                        "fullTime": false,
+                                        "position": "QA Engineer",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 80,
+                                                "name": "Meredith Parrish",
+                                                "reportsTo": 72,
+                                                "phone": "(714) 284-2408",
+                                                "extension": 7675,
+                                                "hireDate": new Date(2012, 11, 13),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 96,
+                                        "name": "Cassady Whitley",
+                                        "reportsTo": 40,
+                                        "phone": "(996) 587-8405",
+                                        "extension": 780,
+                                        "hireDate": new Date(2013, 5, 7),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 5
+                                    },
+                                    {
+                                        "id": 97,
+                                        "name": "Haviva Campbell",
+                                        "reportsTo": 40,
+                                        "phone": "(263) 887-4689",
+                                        "extension": 2808,
+                                        "hireDate": new Date(2013, 3, 5),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 98,
+                                        "name": "Cameron Ayers",
+                                        "reportsTo": 40,
+                                        "phone": "(470) 709-8030",
+                                        "extension": 2893,
+                                        "hireDate": new Date(2013, 8, 28),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 99,
+                                        "name": "Martha Sargent",
+                                        "reportsTo": 40,
+                                        "phone": "(587) 812-4418",
+                                        "extension": 5099,
+                                        "hireDate": new Date(2014, 2, 27),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 100,
+                                        "name": "Darrel Kinney",
+                                        "reportsTo": 40,
+                                        "phone": "(888) 483-9606",
+                                        "extension": 4779,
+                                        "hireDate": new Date(2014, 3, 24),
+                                        "fullTime": false,
+                                        "position": "Graphic Designer",
+                                        "timeInPosition": 1
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 54,
+                                "name": "Kuame Frye",
+                                "reportsTo": 52,
+                                "phone": "(360) 721-5886",
+                                "extension": 2730,
+                                "hireDate": new Date(2010, 11, 17),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 64,
+                                        "name": "Ori Wynn",
+                                        "reportsTo": 54,
+                                        "phone": "(366) 342-0166",
+                                        "extension": 7252,
+                                        "hireDate": new Date(2015, 6, 21),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 0,
+                                        "employees": [
+                                            {
+                                                "id": 6,
+                                                "name": "Moses Duncan",
+                                                "reportsTo": 64,
+                                                "phone": "(421) 611-4814",
+                                                "extension": 669,
+                                                "hireDate": new Date(2010, 5, 24),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 12,
+                                                "name": "Jamalia Wallace",
+                                                "reportsTo": 64,
+                                                "phone": "(611) 391-8016",
+                                                "extension": 1952,
+                                                "hireDate": new Date(2011, 9, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Designer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 62,
+                                                "name": "Palmer Gregory",
+                                                "reportsTo": 64,
+                                                "phone": "(360) 430-2505",
+                                                "extension": 4337,
+                                                "hireDate": new Date(2014, 8, 30),
+                                                "fullTime": true,
+                                                "position": "Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 68,
+                                                "name": "Mallory Gilliam",
+                                                "reportsTo": 64,
+                                                "phone": "(878) 423-2971",
+                                                "extension": 1341,
+                                                "hireDate": new Date(2014, 7, 24),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 73,
+                                                "name": "Ima Hughes",
+                                                "reportsTo": 64,
+                                                "phone": "(905) 485-8001",
+                                                "extension": 1273,
+                                                "hireDate": new Date(2013, 6, 3),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 79,
+                                                "name": "Duncan Mathews",
+                                                "reportsTo": 64,
+                                                "phone": "(790) 971-9709",
+                                                "extension": 4573,
+                                                "hireDate": new Date(2011, 8, 21),
+                                                "fullTime": false,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 69,
+                                "name": "Sierra Beasley",
+                                "reportsTo": 52,
+                                "phone": "(271) 953-1968",
+                                "extension": 3324,
+                                "hireDate": new Date(2011, 4, 2),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 3,
+                                "employees": [
+                                    {
+                                        "id": 38,
+                                        "name": "Elton Tucker",
+                                        "reportsTo": 69,
+                                        "phone": "(988) 930-9331",
+                                        "extension": 9216,
+                                        "hireDate": new Date(2015, 6, 4),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 1
+                                    },
+                                    {
+                                        "id": 39,
+                                        "name": "Iona Brennan",
+                                        "reportsTo": 69,
+                                        "phone": "(356) 563-0600",
+                                        "extension": 5634,
+                                        "hireDate": new Date(2010, 9, 23),
+                                        "fullTime": true,
+                                        "position": "Junior Support Officer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 53,
+                                        "name": "Paul Campos",
+                                        "reportsTo": 69,
+                                        "phone": "(899) 205-1689",
+                                        "extension": 8586,
+                                        "hireDate": new Date(2011, 3, 17),
+                                        "fullTime": true,
+                                        "position": "Interaction Designer",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 66,
+                                                "name": "Gloria Freeman",
+                                                "reportsTo": 53,
+                                                "phone": "(344) 950-9168",
+                                                "extension": 4738,
+                                                "hireDate": new Date(2013, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Junior Interaction Designer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 57,
+                                        "name": "Alyssa Hansen",
+                                        "reportsTo": 69,
+                                        "phone": "(548) 925-4799",
+                                        "extension": 4716,
+                                        "hireDate": new Date(2011, 1, 19),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 82,
+                                        "name": "Yael Walters",
+                                        "reportsTo": 69,
+                                        "phone": "(311) 489-8191",
+                                        "extension": 6520,
+                                        "hireDate": new Date(2013, 7, 4),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 87,
+                                        "name": "Dahlia Hunt",
+                                        "reportsTo": 69,
+                                        "phone": "(720) 339-5202",
+                                        "extension": 3690,
+                                        "hireDate": new Date(2011, 3, 26),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 94,
+                                        "name": "Adria Stanley",
+                                        "reportsTo": 69,
+                                        "phone": "(536) 357-6391",
+                                        "extension": 3374,
+                                        "hireDate": new Date(2014, 7, 26),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "Priscilla Frank",
+                "reportsTo": 1,
+                "phone": "(278) 927-2684",
+                "extension": 4183,
+                "hireDate": new Date(2014, 11, 30),
+                "fullTime": true,
+                "position": "Chief Product Officer",
+                "timeInPosition": 2,
+                "employees": [
+                    {
+                        "id": 4,
+                        "name": "Ursula Holmes",
+                        "reportsTo": 3,
+                        "phone": "(302) 760-2034",
+                        "extension": 2226,
+                        "hireDate": new Date(2011, 6, 6),
+                        "fullTime": true,
+                        "position": "EVP, Product Strategy",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 24,
+                        "name": "Melvin Carrillo",
+                        "reportsTo": 3,
+                        "phone": "(348) 933-5167",
+                        "extension": 2482,
+                        "hireDate": new Date(2014, 7, 21),
+                        "fullTime": true,
+                        "position": "Director, Developer Relations",
+                        "timeInPosition": 6,
+                        "employees": [
+                            {
+                                "id": 29,
+                                "name": "Martha Chavez",
+                                "reportsTo": 24,
+                                "phone": "(860) 754-3464",
+                                "extension": 4531,
+                                "hireDate": new Date(2013, 3, 12),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 30,
+                                "name": "Oren Fox",
+                                "reportsTo": 24,
+                                "phone": "(572) 414-3299",
+                                "extension": 4849,
+                                "hireDate": new Date(2013, 5, 14),
+                                "fullTime": false,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 41,
+                                "name": "Amos Barr",
+                                "reportsTo": 24,
+                                "phone": "(470) 381-3718",
+                                "extension": 7643,
+                                "hireDate": new Date(2010, 3, 9),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "Anika Vega",
+                "reportsTo": 1,
+                "phone": "(910) 714-1802",
+                "extension": 6353,
+                "hireDate": new Date(2010, 2, 25),
+                "fullTime": true,
+                "position": "Chief Process Officer",
+                "timeInPosition": 5,
+                "employees": [
+                    {
+                        "id": 10,
+                        "name": "Vernon Ballard",
+                        "reportsTo": 5,
+                        "phone": "(702) 185-8890",
+                        "extension": 9242,
+                        "hireDate": new Date(2015, 6, 26),
+                        "fullTime": true,
+                        "position": "Director Facilities",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 16,
+                                "name": "Ali Guy",
+                                "reportsTo": 10,
+                                "phone": "(429) 912-6578",
+                                "extension": 2225,
+                                "hireDate": new Date(2014, 6, 29),
+                                "fullTime": true,
+                                "position": "Operations Manager",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 23,
+                                        "name": "Bruce Reilly",
+                                        "reportsTo": 16,
+                                        "phone": "(995) 243-7302",
+                                        "extension": 4815,
+                                        "hireDate": new Date(2015, 4, 1),
+                                        "fullTime": true,
+                                        "position": "Head of Security",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 26,
+                                                "name": "Rowan Morin",
+                                                "reportsTo": 23,
+                                                "phone": "(792) 141-4374",
+                                                "extension": 1844,
+                                                "hireDate": new Date(2015, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Building Security",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 44,
+                                                "name": "Benedict Soto",
+                                                "reportsTo": 23,
+                                                "phone": "(822) 282-5991",
+                                                "extension": 6422,
+                                                "hireDate": new Date(2012, 6, 1),
+                                                "fullTime": false,
+                                                "position": "Building Security",
+                                                "timeInPosition": 4
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 48,
+                                        "name": "Maryam Rios",
+                                        "reportsTo": 16,
+                                        "phone": "(673) 764-6720",
+                                        "extension": 531,
+                                        "hireDate": new Date(2014, 3, 3),
+                                        "fullTime": true,
+                                        "position": "Team Lead, Personal Assistants",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 58,
+                                                "name": "Rose Mcintyre",
+                                                "reportsTo": 48,
+                                                "phone": "(771) 615-4590",
+                                                "extension": 7094,
+                                                "hireDate": new Date(2015, 6, 30),
+                                                "fullTime": false,
+                                                "position": "Personal Assistant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "Nevada Hart",
+                "reportsTo": 1,
+                "phone": "(254) 220-1576",
+                "extension": 6649,
+                "hireDate": new Date(2015, 8, 17),
+                "fullTime": true,
+                "position": "Chief Financial Officer",
+                "timeInPosition": 6,
+                "employees": [
+                    {
+                        "id": 14,
+                        "name": "Zena Sanford",
+                        "reportsTo": 7,
+                        "phone": "(437) 568-8160",
+                        "extension": 4452,
+                        "hireDate": new Date(2010, 11, 30),
+                        "fullTime": true,
+                        "position": "VP, Finance",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 15,
+                        "name": "Quinlan Howe",
+                        "reportsTo": 7,
+                        "phone": "(464) 334-9748",
+                        "extension": 8722,
+                        "hireDate": new Date(2011, 6, 9),
+                        "fullTime": false,
+                        "position": "Senior Director, Finance",
+                        "timeInPosition": 0,
+                        "employees": [
+                            {
+                                "id": 17,
+                                "name": "Indira Lopez",
+                                "reportsTo": 15,
+                                "phone": "(301) 368-0938",
+                                "extension": 8027,
+                                "hireDate": new Date(2013, 8, 18),
+                                "fullTime": true,
+                                "position": "ERP Team Lead",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 18,
+                                        "name": "Lareina Lara",
+                                        "reportsTo": 17,
+                                        "phone": "(233) 457-7482",
+                                        "extension": 1996,
+                                        "hireDate": new Date(2010, 4, 30),
+                                        "fullTime": true,
+                                        "position": "ERP Solutions Consultant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 19,
+                                        "name": "Maxwell Wise",
+                                        "reportsTo": 17,
+                                        "phone": "(570) 494-2531",
+                                        "extension": 9865,
+                                        "hireDate": new Date(2012, 5, 19),
+                                        "fullTime": true,
+                                        "position": "Systems Engineer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 20,
+                                "name": "Hunter Mcbride",
+                                "reportsTo": 15,
+                                "phone": "(409) 442-7016",
+                                "extension": 4284,
+                                "hireDate": new Date(2012, 10, 20),
+                                "fullTime": true,
+                                "position": "Senior Director, Tax",
+                                "timeInPosition": 3
+                            },
+                            {
+                                "id": 21,
+                                "name": "Jana Serrano",
+                                "reportsTo": 15,
+                                "phone": "(910) 718-4620",
+                                "extension": 6970,
+                                "hireDate": new Date(2010, 4, 2),
+                                "fullTime": true,
+                                "position": "Financial Planning & Analysis Manager",
+                                "timeInPosition": 2
+                            },
+                            {
+                                "id": 22,
+                                "name": "Zachery Shelton",
+                                "reportsTo": 15,
+                                "phone": "(310) 240-8675",
+                                "extension": 4527,
+                                "hireDate": new Date(2011, 11, 23),
+                                "fullTime": false,
+                                "position": "Corporate Finance Controller",
+                                "timeInPosition": 6,
+                                "employees": [
+                                    {
+                                        "id": 28,
+                                        "name": "Cullen Freeman",
+                                        "reportsTo": 22,
+                                        "phone": "(136) 554-8814",
+                                        "extension": 9861,
+                                        "hireDate": new Date(2014, 3, 15),
+                                        "fullTime": true,
+                                        "position": "Treasurer Accountant",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 31,
+                                        "name": "Quinn Dean",
+                                        "reportsTo": 22,
+                                        "phone": "(152) 613-3507",
+                                        "extension": 6621,
+                                        "hireDate": new Date(2015, 1, 29),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 34,
+                                        "name": "Samantha Brady",
+                                        "reportsTo": 22,
+                                        "phone": "(206) 398-4328",
+                                        "extension": 1157,
+                                        "hireDate": new Date(2011, 2, 13),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 35,
+                                                "name": "Tamara Green",
+                                                "reportsTo": 34,
+                                                "phone": "(219) 248-2789",
+                                                "extension": 4880,
+                                                "hireDate": new Date(2014, 2, 4),
+                                                "fullTime": true,
+                                                "position": "Junior Accountant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 36,
+                                        "name": "Olympia Coleman",
+                                        "reportsTo": 22,
+                                        "phone": "(944) 853-6383",
+                                        "extension": 2136,
+                                        "hireDate": new Date(2013, 7, 31),
+                                        "fullTime": true,
+                                        "position": "Collections Manager",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 37,
+                                        "name": "Breanna Goodwin",
+                                        "reportsTo": 22,
+                                        "phone": "(379) 988-9630",
+                                        "extension": 5898,
+                                        "hireDate": new Date(2010, 5, 23),
+                                        "fullTime": false,
+                                        "position": "Payroll Specialist",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 27,
+                                "name": "Curran Travis",
+                                "reportsTo": 15,
+                                "phone": "(438) 135-8033",
+                                "extension": 3841,
+                                "hireDate": new Date(2011, 6, 13),
+                                "fullTime": true,
+                                "position": "Finance Controller",
+                                "timeInPosition": 5
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "Hunter Fry",
+                "reportsTo": 1,
+                "phone": "(766) 358-9858",
+                "extension": 3741,
+                "hireDate": new Date(2011, 2, 12),
+                "fullTime": false,
+                "position": "General Counsel",
+                "timeInPosition": 3,
+                "employees": [
+                    {
+                        "id": 9,
+                        "name": "Kuame Carrillo",
+                        "reportsTo": 8,
+                        "phone": "(192) 383-1305",
+                        "extension": 9228,
+                        "hireDate": new Date(2011, 2, 22),
+                        "fullTime": true,
+                        "position": "Associate General Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 13,
+                        "name": "Stacy Todd",
+                        "reportsTo": 8,
+                        "phone": "(925) 286-3327",
+                        "extension": 8565,
+                        "hireDate": new Date(2014, 7, 5),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 33,
+                        "name": "Valentine Wyatt",
+                        "reportsTo": 8,
+                        "phone": "(165) 166-6205",
+                        "extension": 3588,
+                        "hireDate": new Date(2015, 5, 21),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 5
+                    },
+                    {
+                        "id": 86,
+                        "name": "Daniel Mccarthy",
+                        "reportsTo": 8,
+                        "phone": "(624) 483-6206",
+                        "extension": 9112,
+                        "hireDate": new Date(2013, 12, 3),
+                        "fullTime": false,
+                        "position": "Staff Attorney",
+                        "timeInPosition": 0
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default employees;
diff --git a/vue-options-api-demos/treelist/editing-inline/main.js b/vue-options-api-demos/treelist/editing-inline/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/editing-inline/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/editing-inline/main.vue b/vue-options-api-demos/treelist/editing-inline/main.vue
new file mode 100644
index 00000000..a2b3620e
--- /dev/null
+++ b/vue-options-api-demos/treelist/editing-inline/main.vue
@@ -0,0 +1,191 @@
+<template>
+  <div>
+  <TreeList
+      :style="{
+        maxHeight: '510px',
+        overflow: 'auto',
+      }"
+      :navigatable="true"
+      :dataItems="processedData"
+      :editField="editField"
+      :expandField="expandField"
+      :subItemsField="subItemsField"
+      @itemchange="onItemChange"
+      @expandchange="onExpandChange"
+      :columns="columns"
+      :toolbar="'toolbar'"
+      >
+      <template v-slot:toolbar>
+            <KButton
+              :title="'Add new'"
+              :theme-color="'primary'"
+              @click="addRecord"
+            >
+              Add new
+            </KButton>
+    </template>
+    <template v-slot:commandCell="{props}">
+          <CommandCell :data-item="props.dataItem" 
+                  :editField="editField"
+                  @edit="enterEdit"
+                  @save="save" 
+                  @remove="remove"
+                  @cancel="cancel"
+                  @addchild="addChild"/>
+      </template>
+    <template v-slot:textEditor={props}>
+          <TreeListTextEditor v-bind="props" @change="props.onChange" />
+    </template>
+    <template v-slot:numericEditor={props}>
+          <TreeListNumericEditor v-bind="props" @change="props.onChange" />
+    </template>
+    <template v-slot:dateEditor={props}>
+          <TreeListDateEditor v-bind="props" @change="props.onChange" />
+    </template>
+    <template v-slot:booleanEditor={props}>
+          <TreeListBooleanEditor v-bind="props" @change="props.onChange" />
+    </template>
+  </TreeList>
+</div>
+</template>
+
+<script>
+import employees from './data';
+import { Button } from '@progress/kendo-vue-buttons';
+import CommandCell from './CommandCell.vue';
+import {
+  TreeList,
+  mapTree,
+  extendDataItem,
+  modifySubItems,
+  removeItems,
+  TreeListTextEditor,
+  TreeListNumericEditor,
+  TreeListDateEditor,
+  TreeListBooleanEditor,
+} from '@progress/kendo-vue-treelist';
+
+export default {
+  components: {
+    TreeList,
+    KButton: Button,
+    TreeListTextEditor,
+    TreeListNumericEditor,
+    TreeListDateEditor,
+    TreeListBooleanEditor,
+    CommandCell
+  },
+  data() {
+    return {
+      dataItems: employees.slice(),
+      expanded: [1, 2, 32],
+      inEdit: [],
+      subItemsField: 'employees',
+      expandField: 'expanded',
+      editField: 'inEdit',
+      columns: [
+        {
+          field: "name",
+          title: "Name",
+          width: "280px",
+          editCell: 'textEditor',
+          expandable: true,
+        },
+        {
+          field: "position",
+          title: "Position",
+          width: "260px",
+          editCell: 'textEditor',
+        },
+        {
+          field: "fullTime",
+          title: "Full Time",
+          width: "160px",
+          editCell: 'booleanEditor',
+        },
+        {
+          cell: 'commandCell',
+          width: "360px",
+        },
+      ]
+    };
+  },
+  computed: {
+    processedData() {
+      return mapTree(this.dataItems, this.subItemsField, (item) =>
+        extendDataItem(item, this.subItemsField, {
+          [this.expandField]: this.expanded.includes(item.id),
+          [this.editField]: Boolean(this.inEdit.find((i) => i.id === item.id)),
+        })
+      )
+    }
+  },
+  methods: {
+    addChild (dataItem) {
+      const newRecord = this.createNewItem();
+      this.inEdit = [...this.inEdit, newRecord];
+      this.expanded = [...this.expanded, dataItem.id];
+      this.dataItems = modifySubItems(
+          this.dataItems,
+          this.subItemsField,
+          (item) => item.id === dataItem.id,
+          (subItems) => [newRecord, ...subItems]
+        );
+    },
+    enterEdit (dataItem) {
+      this.inEdit = [...this.inEdit, extendDataItem(dataItem, this.subItemsField)];
+    },
+    save (dataItem) {
+      const { isNew, inEdit, ...itemToSave } = dataItem;
+      
+      this.dataItems = mapTree(this.dataItems, this.subItemsField, (item) =>
+          item.id === itemToSave.id ? itemToSave : item
+        );
+      this.inEdit = this.inEdit.filter((i) => i.id !== itemToSave.id);
+    },
+    cancel (editedItem) {
+      if (editedItem.isNew) {
+        return this.remove(editedItem);
+      }
+
+      this.dataItems = mapTree(this.dataItems, this.subItemsField, (item) =>
+          item.id === editedItem.id ? this.inEdit.find((i) => i.id === item.id) : item
+        );
+      this.inEdit = this.inEdit.filter((i) => i.id !== editedItem.id);
+    },
+    remove (dataItem) {
+        this.dataItems = removeItems(this.dataItems, this.subItemsField, (i) => i.id === dataItem.id);
+        this.inEdit = this.inEdit.filter((i) => i.id !== dataItem.id);
+    },
+    onExpandChange (e) {
+      this.expanded = e.value
+          ? this.expanded.filter((id) => id !== e.dataItem.id)
+          : [...this.expanded, e.dataItem.id];
+    },
+    onItemChange (event) {
+      const field = event.field;
+      
+      this.dataItems = mapTree(this.dataItems, this.subItemsField, (item) =>
+          item.id === event.dataItem.id
+            ? extendDataItem(item, this.subItemsField, {
+                [field]: event.value,
+              })
+            : item
+        );
+    },
+    addRecord () {
+      const newRecord = this.createNewItem();
+      
+      this.dataItems = [newRecord, ...this.dataItems];
+      this.inEdit = [...this.inEdit, { ...newRecord }];
+    },
+    createNewItem ()  {
+      const timestamp = new Date().getTime();
+      return {
+        id: timestamp,
+        isNew: true,
+      };
+    }
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treelist/editing-row-click/data.js b/vue-options-api-demos/treelist/editing-row-click/data.js
new file mode 100644
index 00000000..f66aec4d
--- /dev/null
+++ b/vue-options-api-demos/treelist/editing-row-click/data.js
@@ -0,0 +1,1150 @@
+
+const employees = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2,
+        "employees": [
+            {
+                "id": 2,
+                "name": "Guy Wooten",
+                "reportsTo": 1,
+                "phone": "(438) 738-4935",
+                "extension": 1155,
+                "hireDate": new Date(2010, 3, 3),
+                "fullTime": true,
+                "position": "Chief Technical Officer",
+                "timeInPosition": 1,
+                "employees": [
+                    {
+                        "id": 32,
+                        "name": "Buffy Weber",
+                        "reportsTo": 2,
+                        "phone": "(699) 838-6121",
+                        "extension": 8933,
+                        "hireDate": new Date(2011, 7, 11),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 11,
+                                "name": "Hyacinth Hood",
+                                "reportsTo": 32,
+                                "phone": "(889) 345-2438",
+                                "extension": 8564,
+                                "hireDate": new Date(2014, 2, 3),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 60,
+                                        "name": "Akeem Carr",
+                                        "reportsTo": 11,
+                                        "phone": "(738) 136-2814",
+                                        "extension": 9353,
+                                        "hireDate": new Date(2011, 4, 21),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 78,
+                                        "name": "Rinah Simon",
+                                        "reportsTo": 11,
+                                        "phone": "(285) 912-5271",
+                                        "extension": 7795,
+                                        "hireDate": new Date(2012, 10, 11),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 42,
+                                "name": "Gage Daniels",
+                                "reportsTo": 32,
+                                "phone": "(107) 290-6260",
+                                "extension": 896,
+                                "hireDate": new Date(2013, 5, 16),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 5
+                            },
+                            {
+                                "id": 43,
+                                "name": "Constance Vazquez",
+                                "reportsTo": 32,
+                                "phone": "(800) 301-1978",
+                                "extension": 5141,
+                                "hireDate": new Date(2011, 6, 7),
+                                "fullTime": true,
+                                "position": "Director, Engineering",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 46,
+                                        "name": "Darrel Solis",
+                                        "reportsTo": 43,
+                                        "phone": "(327) 977-0216",
+                                        "extension": 7779,
+                                        "hireDate": new Date(2015, 4, 25),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 47,
+                                                "name": "Brian Yang",
+                                                "reportsTo": 46,
+                                                "phone": "(565) 146-5435",
+                                                "extension": 3885,
+                                                "hireDate": new Date(2012, 9, 27),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 50,
+                                                "name": "Lillian Bradshaw",
+                                                "reportsTo": 46,
+                                                "phone": "(323) 509-3479",
+                                                "extension": 5426,
+                                                "hireDate": new Date(2014, 5, 10),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 51,
+                                                "name": "Christian Palmer",
+                                                "reportsTo": 46,
+                                                "phone": "(490) 421-8718",
+                                                "extension": 3706,
+                                                "hireDate": new Date(2012, 12, 27),
+                                                "fullTime": false,
+                                                "position": "Technical Lead",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 55,
+                                                "name": "Summer Mosley",
+                                                "reportsTo": 46,
+                                                "phone": "(784) 962-2301",
+                                                "extension": 5492,
+                                                "hireDate": new Date(2010, 3, 2),
+                                                "fullTime": true,
+                                                "position": "QA Engineer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 56,
+                                                "name": "Barry Ayers",
+                                                "reportsTo": 46,
+                                                "phone": "(452) 373-9227",
+                                                "extension": 1308,
+                                                "hireDate": new Date(2011, 10, 11),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 59,
+                                                "name": "Keiko Espinoza",
+                                                "reportsTo": 46,
+                                                "phone": "(226) 600-5305",
+                                                "extension": 9363,
+                                                "hireDate": new Date(2011, 9, 18),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 61,
+                                                "name": "Candace Pickett",
+                                                "reportsTo": 46,
+                                                "phone": "(120) 117-7475",
+                                                "extension": 5178,
+                                                "hireDate": new Date(2010, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 63,
+                                        "name": "Mia Caldwell",
+                                        "reportsTo": 43,
+                                        "phone": "(848) 636-6470",
+                                        "extension": 6368,
+                                        "hireDate": new Date(2012, 10, 7),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 65,
+                                                "name": "Thomas Terry",
+                                                "reportsTo": 63,
+                                                "phone": "(764) 831-4248",
+                                                "extension": 3574,
+                                                "hireDate": new Date(2015, 6, 15),
+                                                "fullTime": false,
+                                                "position": "Senior Enterprise Support Officer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 67,
+                                                "name": "Ruth Downs",
+                                                "reportsTo": 63,
+                                                "phone": "(138) 991-1440",
+                                                "extension": 8067,
+                                                "hireDate": new Date(2013, 7, 13),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 70,
+                                                "name": "Yasir Wilder",
+                                                "reportsTo": 63,
+                                                "phone": "(759) 701-8665",
+                                                "extension": 8350,
+                                                "hireDate": new Date(2010, 11, 8),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 71,
+                                                "name": "Flavia Short",
+                                                "reportsTo": 63,
+                                                "phone": "(370) 133-9238",
+                                                "extension": 6390,
+                                                "hireDate": new Date(2013, 2, 21),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 74,
+                                                "name": "Aaron Roach",
+                                                "reportsTo": 63,
+                                                "phone": "(958) 717-9230",
+                                                "extension": 4899,
+                                                "hireDate": new Date(2011, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 75,
+                                                "name": "Eric Russell",
+                                                "reportsTo": 63,
+                                                "phone": "(516) 575-8505",
+                                                "extension": 2224,
+                                                "hireDate": new Date(2012, 10, 28),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 76,
+                                                "name": "Cheyenne Olson",
+                                                "reportsTo": 63,
+                                                "phone": "(241) 645-0257",
+                                                "extension": 9181,
+                                                "hireDate": new Date(2015, 5, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 77,
+                                                "name": "Shaine Avila",
+                                                "reportsTo": 63,
+                                                "phone": "(844) 435-1360",
+                                                "extension": 3374,
+                                                "hireDate": new Date(2010, 1, 31),
+                                                "fullTime": true,
+                                                "position": "UI Designer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 81,
+                                                "name": "Chantale Long",
+                                                "reportsTo": 63,
+                                                "phone": "(252) 419-6891",
+                                                "extension": 7868,
+                                                "hireDate": new Date(2010, 6, 17),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 83,
+                                                "name": "Dane Cruz",
+                                                "reportsTo": 63,
+                                                "phone": "(946) 701-6165",
+                                                "extension": 3828,
+                                                "hireDate": new Date(2014, 10, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 84,
+                                                "name": "Regan Patterson",
+                                                "reportsTo": 63,
+                                                "phone": "(265) 946-1765",
+                                                "extension": 6955,
+                                                "hireDate": new Date(2012, 3, 1),
+                                                "fullTime": true,
+                                                "position": "Technical Writer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 85,
+                                                "name": "Drew Mckay",
+                                                "reportsTo": 63,
+                                                "phone": "(327) 293-0162",
+                                                "extension": 6904,
+                                                "hireDate": new Date(2011, 3, 25),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 88,
+                                                "name": "Bevis Miller",
+                                                "reportsTo": 63,
+                                                "phone": "(525) 557-0169",
+                                                "extension": 6978,
+                                                "hireDate": new Date(2011, 4, 19),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 89,
+                                                "name": "Bruce Mccarty",
+                                                "reportsTo": 63,
+                                                "phone": "(936) 777-8730",
+                                                "extension": 6552,
+                                                "hireDate": new Date(2014, 3, 28),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 5
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 90,
+                                        "name": "Ocean Blair",
+                                        "reportsTo": 43,
+                                        "phone": "(343) 586-6614",
+                                        "extension": 1424,
+                                        "hireDate": new Date(2011, 4, 27),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 91,
+                                                "name": "Guinevere Osborn",
+                                                "reportsTo": 90,
+                                                "phone": "(424) 741-0006",
+                                                "extension": 3166,
+                                                "hireDate": new Date(2014, 11, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 92,
+                                                "name": "Olga Strong",
+                                                "reportsTo": 90,
+                                                "phone": "(949) 417-1168",
+                                                "extension": 4568,
+                                                "hireDate": new Date(2015, 5, 28),
+                                                "fullTime": true,
+                                                "position": "Graphic Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 93,
+                                                "name": "Robert Orr",
+                                                "reportsTo": 90,
+                                                "phone": "(977) 341-3721",
+                                                "extension": 9241,
+                                                "hireDate": new Date(2012, 8, 20),
+                                                "fullTime": false,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 95,
+                                                "name": "Odette Sears",
+                                                "reportsTo": 90,
+                                                "phone": "(264) 818-6576",
+                                                "extension": 1914,
+                                                "hireDate": new Date(2013, 7, 5),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 45,
+                                "name": "Zelda Medina",
+                                "reportsTo": 32,
+                                "phone": "(563) 359-6023",
+                                "extension": 2600,
+                                "hireDate": new Date(2012, 11, 6),
+                                "fullTime": true,
+                                "position": "QA Architect",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    },
+                    {
+                        "id": 52,
+                        "name": "Skyler Cleveland",
+                        "reportsTo": 2,
+                        "phone": "(217) 280-5300",
+                        "extension": 9655,
+                        "hireDate": new Date(2014, 11, 10),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 40,
+                                "name": "Karleigh Garza",
+                                "reportsTo": 52,
+                                "phone": "(370) 983-8796",
+                                "extension": 4044,
+                                "hireDate": new Date(2014, 3, 10),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 49,
+                                        "name": "Elmo Tyson",
+                                        "reportsTo": 40,
+                                        "phone": "(344) 496-9555",
+                                        "extension": 6950,
+                                        "hireDate": new Date(2014, 9, 18),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 72,
+                                        "name": "Stacey Lynn",
+                                        "reportsTo": 40,
+                                        "phone": "(140) 772-7509",
+                                        "extension": 8396,
+                                        "hireDate": new Date(2014, 7, 31),
+                                        "fullTime": false,
+                                        "position": "QA Engineer",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 80,
+                                                "name": "Meredith Parrish",
+                                                "reportsTo": 72,
+                                                "phone": "(714) 284-2408",
+                                                "extension": 7675,
+                                                "hireDate": new Date(2012, 11, 13),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 96,
+                                        "name": "Cassady Whitley",
+                                        "reportsTo": 40,
+                                        "phone": "(996) 587-8405",
+                                        "extension": 780,
+                                        "hireDate": new Date(2013, 5, 7),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 5
+                                    },
+                                    {
+                                        "id": 97,
+                                        "name": "Haviva Campbell",
+                                        "reportsTo": 40,
+                                        "phone": "(263) 887-4689",
+                                        "extension": 2808,
+                                        "hireDate": new Date(2013, 3, 5),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 98,
+                                        "name": "Cameron Ayers",
+                                        "reportsTo": 40,
+                                        "phone": "(470) 709-8030",
+                                        "extension": 2893,
+                                        "hireDate": new Date(2013, 8, 28),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 99,
+                                        "name": "Martha Sargent",
+                                        "reportsTo": 40,
+                                        "phone": "(587) 812-4418",
+                                        "extension": 5099,
+                                        "hireDate": new Date(2014, 2, 27),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 100,
+                                        "name": "Darrel Kinney",
+                                        "reportsTo": 40,
+                                        "phone": "(888) 483-9606",
+                                        "extension": 4779,
+                                        "hireDate": new Date(2014, 3, 24),
+                                        "fullTime": false,
+                                        "position": "Graphic Designer",
+                                        "timeInPosition": 1
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 54,
+                                "name": "Kuame Frye",
+                                "reportsTo": 52,
+                                "phone": "(360) 721-5886",
+                                "extension": 2730,
+                                "hireDate": new Date(2010, 11, 17),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 64,
+                                        "name": "Ori Wynn",
+                                        "reportsTo": 54,
+                                        "phone": "(366) 342-0166",
+                                        "extension": 7252,
+                                        "hireDate": new Date(2015, 6, 21),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 0,
+                                        "employees": [
+                                            {
+                                                "id": 6,
+                                                "name": "Moses Duncan",
+                                                "reportsTo": 64,
+                                                "phone": "(421) 611-4814",
+                                                "extension": 669,
+                                                "hireDate": new Date(2010, 5, 24),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 12,
+                                                "name": "Jamalia Wallace",
+                                                "reportsTo": 64,
+                                                "phone": "(611) 391-8016",
+                                                "extension": 1952,
+                                                "hireDate": new Date(2011, 9, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Designer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 62,
+                                                "name": "Palmer Gregory",
+                                                "reportsTo": 64,
+                                                "phone": "(360) 430-2505",
+                                                "extension": 4337,
+                                                "hireDate": new Date(2014, 8, 30),
+                                                "fullTime": true,
+                                                "position": "Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 68,
+                                                "name": "Mallory Gilliam",
+                                                "reportsTo": 64,
+                                                "phone": "(878) 423-2971",
+                                                "extension": 1341,
+                                                "hireDate": new Date(2014, 7, 24),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 73,
+                                                "name": "Ima Hughes",
+                                                "reportsTo": 64,
+                                                "phone": "(905) 485-8001",
+                                                "extension": 1273,
+                                                "hireDate": new Date(2013, 6, 3),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 79,
+                                                "name": "Duncan Mathews",
+                                                "reportsTo": 64,
+                                                "phone": "(790) 971-9709",
+                                                "extension": 4573,
+                                                "hireDate": new Date(2011, 8, 21),
+                                                "fullTime": false,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 69,
+                                "name": "Sierra Beasley",
+                                "reportsTo": 52,
+                                "phone": "(271) 953-1968",
+                                "extension": 3324,
+                                "hireDate": new Date(2011, 4, 2),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 3,
+                                "employees": [
+                                    {
+                                        "id": 38,
+                                        "name": "Elton Tucker",
+                                        "reportsTo": 69,
+                                        "phone": "(988) 930-9331",
+                                        "extension": 9216,
+                                        "hireDate": new Date(2015, 6, 4),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 1
+                                    },
+                                    {
+                                        "id": 39,
+                                        "name": "Iona Brennan",
+                                        "reportsTo": 69,
+                                        "phone": "(356) 563-0600",
+                                        "extension": 5634,
+                                        "hireDate": new Date(2010, 9, 23),
+                                        "fullTime": true,
+                                        "position": "Junior Support Officer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 53,
+                                        "name": "Paul Campos",
+                                        "reportsTo": 69,
+                                        "phone": "(899) 205-1689",
+                                        "extension": 8586,
+                                        "hireDate": new Date(2011, 3, 17),
+                                        "fullTime": true,
+                                        "position": "Interaction Designer",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 66,
+                                                "name": "Gloria Freeman",
+                                                "reportsTo": 53,
+                                                "phone": "(344) 950-9168",
+                                                "extension": 4738,
+                                                "hireDate": new Date(2013, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Junior Interaction Designer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 57,
+                                        "name": "Alyssa Hansen",
+                                        "reportsTo": 69,
+                                        "phone": "(548) 925-4799",
+                                        "extension": 4716,
+                                        "hireDate": new Date(2011, 1, 19),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 82,
+                                        "name": "Yael Walters",
+                                        "reportsTo": 69,
+                                        "phone": "(311) 489-8191",
+                                        "extension": 6520,
+                                        "hireDate": new Date(2013, 7, 4),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 87,
+                                        "name": "Dahlia Hunt",
+                                        "reportsTo": 69,
+                                        "phone": "(720) 339-5202",
+                                        "extension": 3690,
+                                        "hireDate": new Date(2011, 3, 26),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 94,
+                                        "name": "Adria Stanley",
+                                        "reportsTo": 69,
+                                        "phone": "(536) 357-6391",
+                                        "extension": 3374,
+                                        "hireDate": new Date(2014, 7, 26),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "Priscilla Frank",
+                "reportsTo": 1,
+                "phone": "(278) 927-2684",
+                "extension": 4183,
+                "hireDate": new Date(2014, 11, 30),
+                "fullTime": true,
+                "position": "Chief Product Officer",
+                "timeInPosition": 2,
+                "employees": [
+                    {
+                        "id": 4,
+                        "name": "Ursula Holmes",
+                        "reportsTo": 3,
+                        "phone": "(302) 760-2034",
+                        "extension": 2226,
+                        "hireDate": new Date(2011, 6, 6),
+                        "fullTime": true,
+                        "position": "EVP, Product Strategy",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 24,
+                        "name": "Melvin Carrillo",
+                        "reportsTo": 3,
+                        "phone": "(348) 933-5167",
+                        "extension": 2482,
+                        "hireDate": new Date(2014, 7, 21),
+                        "fullTime": true,
+                        "position": "Director, Developer Relations",
+                        "timeInPosition": 6,
+                        "employees": [
+                            {
+                                "id": 29,
+                                "name": "Martha Chavez",
+                                "reportsTo": 24,
+                                "phone": "(860) 754-3464",
+                                "extension": 4531,
+                                "hireDate": new Date(2013, 3, 12),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 30,
+                                "name": "Oren Fox",
+                                "reportsTo": 24,
+                                "phone": "(572) 414-3299",
+                                "extension": 4849,
+                                "hireDate": new Date(2013, 5, 14),
+                                "fullTime": false,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 41,
+                                "name": "Amos Barr",
+                                "reportsTo": 24,
+                                "phone": "(470) 381-3718",
+                                "extension": 7643,
+                                "hireDate": new Date(2010, 3, 9),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "Anika Vega",
+                "reportsTo": 1,
+                "phone": "(910) 714-1802",
+                "extension": 6353,
+                "hireDate": new Date(2010, 2, 25),
+                "fullTime": true,
+                "position": "Chief Process Officer",
+                "timeInPosition": 5,
+                "employees": [
+                    {
+                        "id": 10,
+                        "name": "Vernon Ballard",
+                        "reportsTo": 5,
+                        "phone": "(702) 185-8890",
+                        "extension": 9242,
+                        "hireDate": new Date(2015, 6, 26),
+                        "fullTime": true,
+                        "position": "Director Facilities",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 16,
+                                "name": "Ali Guy",
+                                "reportsTo": 10,
+                                "phone": "(429) 912-6578",
+                                "extension": 2225,
+                                "hireDate": new Date(2014, 6, 29),
+                                "fullTime": true,
+                                "position": "Operations Manager",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 23,
+                                        "name": "Bruce Reilly",
+                                        "reportsTo": 16,
+                                        "phone": "(995) 243-7302",
+                                        "extension": 4815,
+                                        "hireDate": new Date(2015, 4, 1),
+                                        "fullTime": true,
+                                        "position": "Head of Security",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 26,
+                                                "name": "Rowan Morin",
+                                                "reportsTo": 23,
+                                                "phone": "(792) 141-4374",
+                                                "extension": 1844,
+                                                "hireDate": new Date(2015, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Building Security",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 44,
+                                                "name": "Benedict Soto",
+                                                "reportsTo": 23,
+                                                "phone": "(822) 282-5991",
+                                                "extension": 6422,
+                                                "hireDate": new Date(2012, 6, 1),
+                                                "fullTime": false,
+                                                "position": "Building Security",
+                                                "timeInPosition": 4
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 48,
+                                        "name": "Maryam Rios",
+                                        "reportsTo": 16,
+                                        "phone": "(673) 764-6720",
+                                        "extension": 531,
+                                        "hireDate": new Date(2014, 3, 3),
+                                        "fullTime": true,
+                                        "position": "Team Lead, Personal Assistants",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 58,
+                                                "name": "Rose Mcintyre",
+                                                "reportsTo": 48,
+                                                "phone": "(771) 615-4590",
+                                                "extension": 7094,
+                                                "hireDate": new Date(2015, 6, 30),
+                                                "fullTime": false,
+                                                "position": "Personal Assistant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "Nevada Hart",
+                "reportsTo": 1,
+                "phone": "(254) 220-1576",
+                "extension": 6649,
+                "hireDate": new Date(2015, 8, 17),
+                "fullTime": true,
+                "position": "Chief Financial Officer",
+                "timeInPosition": 6,
+                "employees": [
+                    {
+                        "id": 14,
+                        "name": "Zena Sanford",
+                        "reportsTo": 7,
+                        "phone": "(437) 568-8160",
+                        "extension": 4452,
+                        "hireDate": new Date(2010, 11, 30),
+                        "fullTime": true,
+                        "position": "VP, Finance",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 15,
+                        "name": "Quinlan Howe",
+                        "reportsTo": 7,
+                        "phone": "(464) 334-9748",
+                        "extension": 8722,
+                        "hireDate": new Date(2011, 6, 9),
+                        "fullTime": false,
+                        "position": "Senior Director, Finance",
+                        "timeInPosition": 0,
+                        "employees": [
+                            {
+                                "id": 17,
+                                "name": "Indira Lopez",
+                                "reportsTo": 15,
+                                "phone": "(301) 368-0938",
+                                "extension": 8027,
+                                "hireDate": new Date(2013, 8, 18),
+                                "fullTime": true,
+                                "position": "ERP Team Lead",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 18,
+                                        "name": "Lareina Lara",
+                                        "reportsTo": 17,
+                                        "phone": "(233) 457-7482",
+                                        "extension": 1996,
+                                        "hireDate": new Date(2010, 4, 30),
+                                        "fullTime": true,
+                                        "position": "ERP Solutions Consultant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 19,
+                                        "name": "Maxwell Wise",
+                                        "reportsTo": 17,
+                                        "phone": "(570) 494-2531",
+                                        "extension": 9865,
+                                        "hireDate": new Date(2012, 5, 19),
+                                        "fullTime": true,
+                                        "position": "Systems Engineer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 20,
+                                "name": "Hunter Mcbride",
+                                "reportsTo": 15,
+                                "phone": "(409) 442-7016",
+                                "extension": 4284,
+                                "hireDate": new Date(2012, 10, 20),
+                                "fullTime": true,
+                                "position": "Senior Director, Tax",
+                                "timeInPosition": 3
+                            },
+                            {
+                                "id": 21,
+                                "name": "Jana Serrano",
+                                "reportsTo": 15,
+                                "phone": "(910) 718-4620",
+                                "extension": 6970,
+                                "hireDate": new Date(2010, 4, 2),
+                                "fullTime": true,
+                                "position": "Financial Planning & Analysis Manager",
+                                "timeInPosition": 2
+                            },
+                            {
+                                "id": 22,
+                                "name": "Zachery Shelton",
+                                "reportsTo": 15,
+                                "phone": "(310) 240-8675",
+                                "extension": 4527,
+                                "hireDate": new Date(2011, 11, 23),
+                                "fullTime": false,
+                                "position": "Corporate Finance Controller",
+                                "timeInPosition": 6,
+                                "employees": [
+                                    {
+                                        "id": 28,
+                                        "name": "Cullen Freeman",
+                                        "reportsTo": 22,
+                                        "phone": "(136) 554-8814",
+                                        "extension": 9861,
+                                        "hireDate": new Date(2014, 3, 15),
+                                        "fullTime": true,
+                                        "position": "Treasurer Accountant",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 31,
+                                        "name": "Quinn Dean",
+                                        "reportsTo": 22,
+                                        "phone": "(152) 613-3507",
+                                        "extension": 6621,
+                                        "hireDate": new Date(2015, 1, 29),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 34,
+                                        "name": "Samantha Brady",
+                                        "reportsTo": 22,
+                                        "phone": "(206) 398-4328",
+                                        "extension": 1157,
+                                        "hireDate": new Date(2011, 2, 13),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 35,
+                                                "name": "Tamara Green",
+                                                "reportsTo": 34,
+                                                "phone": "(219) 248-2789",
+                                                "extension": 4880,
+                                                "hireDate": new Date(2014, 2, 4),
+                                                "fullTime": true,
+                                                "position": "Junior Accountant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 36,
+                                        "name": "Olympia Coleman",
+                                        "reportsTo": 22,
+                                        "phone": "(944) 853-6383",
+                                        "extension": 2136,
+                                        "hireDate": new Date(2013, 7, 31),
+                                        "fullTime": true,
+                                        "position": "Collections Manager",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 37,
+                                        "name": "Breanna Goodwin",
+                                        "reportsTo": 22,
+                                        "phone": "(379) 988-9630",
+                                        "extension": 5898,
+                                        "hireDate": new Date(2010, 5, 23),
+                                        "fullTime": false,
+                                        "position": "Payroll Specialist",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 27,
+                                "name": "Curran Travis",
+                                "reportsTo": 15,
+                                "phone": "(438) 135-8033",
+                                "extension": 3841,
+                                "hireDate": new Date(2011, 6, 13),
+                                "fullTime": true,
+                                "position": "Finance Controller",
+                                "timeInPosition": 5
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "Hunter Fry",
+                "reportsTo": 1,
+                "phone": "(766) 358-9858",
+                "extension": 3741,
+                "hireDate": new Date(2011, 2, 12),
+                "fullTime": false,
+                "position": "General Counsel",
+                "timeInPosition": 3,
+                "employees": [
+                    {
+                        "id": 9,
+                        "name": "Kuame Carrillo",
+                        "reportsTo": 8,
+                        "phone": "(192) 383-1305",
+                        "extension": 9228,
+                        "hireDate": new Date(2011, 2, 22),
+                        "fullTime": true,
+                        "position": "Associate General Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 13,
+                        "name": "Stacy Todd",
+                        "reportsTo": 8,
+                        "phone": "(925) 286-3327",
+                        "extension": 8565,
+                        "hireDate": new Date(2014, 7, 5),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 33,
+                        "name": "Valentine Wyatt",
+                        "reportsTo": 8,
+                        "phone": "(165) 166-6205",
+                        "extension": 3588,
+                        "hireDate": new Date(2015, 5, 21),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 5
+                    },
+                    {
+                        "id": 86,
+                        "name": "Daniel Mccarthy",
+                        "reportsTo": 8,
+                        "phone": "(624) 483-6206",
+                        "extension": 9112,
+                        "hireDate": new Date(2013, 12, 3),
+                        "fullTime": false,
+                        "position": "Staff Attorney",
+                        "timeInPosition": 0
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default employees;
diff --git a/vue-options-api-demos/treelist/editing-row-click/main.js b/vue-options-api-demos/treelist/editing-row-click/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/editing-row-click/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/editing-row-click/main.vue b/vue-options-api-demos/treelist/editing-row-click/main.vue
new file mode 100644
index 00000000..8407db5f
--- /dev/null
+++ b/vue-options-api-demos/treelist/editing-row-click/main.vue
@@ -0,0 +1,156 @@
+<template>
+  <div>
+  <TreeList
+      :style="{
+        maxHeight: '510px',
+        overflow: 'auto',
+      }"
+      :navigatable="true"
+      :dataItems="processedData"
+      :editField="editField"
+      :expandField="expandField"
+      :subItemsField="subItemsField"
+      @rowclick="rowClick"
+      @itemchange="onItemChange"
+      @expandchange="onExpandChange"
+      :columns="columns"
+      :toolbar="'toolbar'"
+      >
+      <template v-slot:toolbar>
+          <div @click="closeEdit">
+            <KButton
+              :title="'Add new'"
+              :theme-color="'primary'"
+              @click="addRecord"
+            >
+              Add new
+            </KButton>
+          </div>
+    </template>
+    <template v-slot:textEditor={props}>
+          <TreeListTextEditor v-bind="props" @change="props.onChange" />
+    </template>
+    <template v-slot:numericEditor={props}>
+          <TreeListNumericEditor v-bind="props" @change="props.onChange" />
+    </template>
+    <template v-slot:dateEditor={props}>
+          <TreeListDateEditor v-bind="props" @change="props.onChange" />
+    </template>
+    <template v-slot:booleanEditor={props}>
+          <TreeListBooleanEditor v-bind="props" @change="props.onChange" />
+    </template>
+  </TreeList>
+</div>
+</template>
+
+<script>
+import employees from './data';
+import { Button } from '@progress/kendo-vue-buttons';
+import {
+  TreeList,
+  mapTree,
+  extendDataItem,
+  TreeListTextEditor,
+  TreeListNumericEditor,
+  TreeListDateEditor,
+  TreeListBooleanEditor,
+} from '@progress/kendo-vue-treelist';
+
+export default {
+  components: {
+    TreeList,
+    KButton: Button,
+    TreeListTextEditor,
+    TreeListNumericEditor,
+    TreeListDateEditor,
+    TreeListBooleanEditor,
+  },
+  data() {
+    return {
+        dataItems: employees.slice(),
+        expanded: [1, 2, 32],
+        editId: null,
+        subItemsField: "employees",
+        expandField: "expanded",
+        editField: "inEdit",
+        columns: [
+          {
+            field: "name",
+            title: "Name",
+            width: "280px",
+            editor: 'text',
+            editCell: 'textEditor',
+            expandable: true,
+          },
+          {
+            field: "position",
+            title: "Position",
+            width: "260px",
+            editCell: 'textEditor',
+          },
+          {
+            field: "hireDate",
+            title: "Hire Date",
+            format: "{0:d}",
+            width: "170px",
+            editCell: 'dateEditor',
+          },
+          {
+            field: "timeInPosition",
+            title: "Year(s) in Position",
+            width: "170px",
+            editCell: 'numericEditor',
+          },
+          {
+            field: "fullTime",
+            title: "Full Time",
+            width: "160px",
+            editCell: 'booleanEditor',
+          },
+        ]
+    };
+  },
+  computed: {
+    processedData() {
+      return mapTree(this.dataItems, this.subItemsField, (item) =>
+        extendDataItem(item, this.subItemsField, {
+          [this.expandField]: this.expanded.includes(item.id),
+          [this.editField]: item.id === this.editId,
+        })
+      );
+    }
+  },
+  methods: {
+    rowClick (event) {
+      this.editId = this.editId === event.dataItem.id ? null : event.dataItem.id;
+    },
+    onExpandChange (event) {
+      this.expanded = event.value
+        ? this.expanded.filter((id) => id !== event.dataItem.id)
+        : [...this.expanded, event.dataItem.id];
+    },
+    onItemChange (event) {
+      const field = event.field;
+      this.dataItems = mapTree(this.dataItems, this.subItemsField, (item) =>
+          item.id === event.dataItem.id
+            ? extendDataItem(item, this.subItemsField, {
+                [field]: event.value,
+              })
+            : item
+        );
+    },
+    closeEdit (event) {
+        if (event.target === event.currentTarget) {
+          this.editId = null;
+        }
+    },
+    addRecord () {
+      const newRecord = {
+        id: new Date().getTime(),
+      };
+      this.dataItems = [newRecord, ...this.dataItems];
+      this.editId =  newRecord.id;
+    }
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treelist/excel/basic/data.js b/vue-options-api-demos/treelist/excel/basic/data.js
new file mode 100644
index 00000000..f66aec4d
--- /dev/null
+++ b/vue-options-api-demos/treelist/excel/basic/data.js
@@ -0,0 +1,1150 @@
+
+const employees = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2,
+        "employees": [
+            {
+                "id": 2,
+                "name": "Guy Wooten",
+                "reportsTo": 1,
+                "phone": "(438) 738-4935",
+                "extension": 1155,
+                "hireDate": new Date(2010, 3, 3),
+                "fullTime": true,
+                "position": "Chief Technical Officer",
+                "timeInPosition": 1,
+                "employees": [
+                    {
+                        "id": 32,
+                        "name": "Buffy Weber",
+                        "reportsTo": 2,
+                        "phone": "(699) 838-6121",
+                        "extension": 8933,
+                        "hireDate": new Date(2011, 7, 11),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 11,
+                                "name": "Hyacinth Hood",
+                                "reportsTo": 32,
+                                "phone": "(889) 345-2438",
+                                "extension": 8564,
+                                "hireDate": new Date(2014, 2, 3),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 60,
+                                        "name": "Akeem Carr",
+                                        "reportsTo": 11,
+                                        "phone": "(738) 136-2814",
+                                        "extension": 9353,
+                                        "hireDate": new Date(2011, 4, 21),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 78,
+                                        "name": "Rinah Simon",
+                                        "reportsTo": 11,
+                                        "phone": "(285) 912-5271",
+                                        "extension": 7795,
+                                        "hireDate": new Date(2012, 10, 11),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 42,
+                                "name": "Gage Daniels",
+                                "reportsTo": 32,
+                                "phone": "(107) 290-6260",
+                                "extension": 896,
+                                "hireDate": new Date(2013, 5, 16),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 5
+                            },
+                            {
+                                "id": 43,
+                                "name": "Constance Vazquez",
+                                "reportsTo": 32,
+                                "phone": "(800) 301-1978",
+                                "extension": 5141,
+                                "hireDate": new Date(2011, 6, 7),
+                                "fullTime": true,
+                                "position": "Director, Engineering",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 46,
+                                        "name": "Darrel Solis",
+                                        "reportsTo": 43,
+                                        "phone": "(327) 977-0216",
+                                        "extension": 7779,
+                                        "hireDate": new Date(2015, 4, 25),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 47,
+                                                "name": "Brian Yang",
+                                                "reportsTo": 46,
+                                                "phone": "(565) 146-5435",
+                                                "extension": 3885,
+                                                "hireDate": new Date(2012, 9, 27),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 50,
+                                                "name": "Lillian Bradshaw",
+                                                "reportsTo": 46,
+                                                "phone": "(323) 509-3479",
+                                                "extension": 5426,
+                                                "hireDate": new Date(2014, 5, 10),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 51,
+                                                "name": "Christian Palmer",
+                                                "reportsTo": 46,
+                                                "phone": "(490) 421-8718",
+                                                "extension": 3706,
+                                                "hireDate": new Date(2012, 12, 27),
+                                                "fullTime": false,
+                                                "position": "Technical Lead",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 55,
+                                                "name": "Summer Mosley",
+                                                "reportsTo": 46,
+                                                "phone": "(784) 962-2301",
+                                                "extension": 5492,
+                                                "hireDate": new Date(2010, 3, 2),
+                                                "fullTime": true,
+                                                "position": "QA Engineer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 56,
+                                                "name": "Barry Ayers",
+                                                "reportsTo": 46,
+                                                "phone": "(452) 373-9227",
+                                                "extension": 1308,
+                                                "hireDate": new Date(2011, 10, 11),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 59,
+                                                "name": "Keiko Espinoza",
+                                                "reportsTo": 46,
+                                                "phone": "(226) 600-5305",
+                                                "extension": 9363,
+                                                "hireDate": new Date(2011, 9, 18),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 61,
+                                                "name": "Candace Pickett",
+                                                "reportsTo": 46,
+                                                "phone": "(120) 117-7475",
+                                                "extension": 5178,
+                                                "hireDate": new Date(2010, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 63,
+                                        "name": "Mia Caldwell",
+                                        "reportsTo": 43,
+                                        "phone": "(848) 636-6470",
+                                        "extension": 6368,
+                                        "hireDate": new Date(2012, 10, 7),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 65,
+                                                "name": "Thomas Terry",
+                                                "reportsTo": 63,
+                                                "phone": "(764) 831-4248",
+                                                "extension": 3574,
+                                                "hireDate": new Date(2015, 6, 15),
+                                                "fullTime": false,
+                                                "position": "Senior Enterprise Support Officer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 67,
+                                                "name": "Ruth Downs",
+                                                "reportsTo": 63,
+                                                "phone": "(138) 991-1440",
+                                                "extension": 8067,
+                                                "hireDate": new Date(2013, 7, 13),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 70,
+                                                "name": "Yasir Wilder",
+                                                "reportsTo": 63,
+                                                "phone": "(759) 701-8665",
+                                                "extension": 8350,
+                                                "hireDate": new Date(2010, 11, 8),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 71,
+                                                "name": "Flavia Short",
+                                                "reportsTo": 63,
+                                                "phone": "(370) 133-9238",
+                                                "extension": 6390,
+                                                "hireDate": new Date(2013, 2, 21),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 74,
+                                                "name": "Aaron Roach",
+                                                "reportsTo": 63,
+                                                "phone": "(958) 717-9230",
+                                                "extension": 4899,
+                                                "hireDate": new Date(2011, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 75,
+                                                "name": "Eric Russell",
+                                                "reportsTo": 63,
+                                                "phone": "(516) 575-8505",
+                                                "extension": 2224,
+                                                "hireDate": new Date(2012, 10, 28),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 76,
+                                                "name": "Cheyenne Olson",
+                                                "reportsTo": 63,
+                                                "phone": "(241) 645-0257",
+                                                "extension": 9181,
+                                                "hireDate": new Date(2015, 5, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 77,
+                                                "name": "Shaine Avila",
+                                                "reportsTo": 63,
+                                                "phone": "(844) 435-1360",
+                                                "extension": 3374,
+                                                "hireDate": new Date(2010, 1, 31),
+                                                "fullTime": true,
+                                                "position": "UI Designer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 81,
+                                                "name": "Chantale Long",
+                                                "reportsTo": 63,
+                                                "phone": "(252) 419-6891",
+                                                "extension": 7868,
+                                                "hireDate": new Date(2010, 6, 17),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 83,
+                                                "name": "Dane Cruz",
+                                                "reportsTo": 63,
+                                                "phone": "(946) 701-6165",
+                                                "extension": 3828,
+                                                "hireDate": new Date(2014, 10, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 84,
+                                                "name": "Regan Patterson",
+                                                "reportsTo": 63,
+                                                "phone": "(265) 946-1765",
+                                                "extension": 6955,
+                                                "hireDate": new Date(2012, 3, 1),
+                                                "fullTime": true,
+                                                "position": "Technical Writer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 85,
+                                                "name": "Drew Mckay",
+                                                "reportsTo": 63,
+                                                "phone": "(327) 293-0162",
+                                                "extension": 6904,
+                                                "hireDate": new Date(2011, 3, 25),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 88,
+                                                "name": "Bevis Miller",
+                                                "reportsTo": 63,
+                                                "phone": "(525) 557-0169",
+                                                "extension": 6978,
+                                                "hireDate": new Date(2011, 4, 19),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 89,
+                                                "name": "Bruce Mccarty",
+                                                "reportsTo": 63,
+                                                "phone": "(936) 777-8730",
+                                                "extension": 6552,
+                                                "hireDate": new Date(2014, 3, 28),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 5
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 90,
+                                        "name": "Ocean Blair",
+                                        "reportsTo": 43,
+                                        "phone": "(343) 586-6614",
+                                        "extension": 1424,
+                                        "hireDate": new Date(2011, 4, 27),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 91,
+                                                "name": "Guinevere Osborn",
+                                                "reportsTo": 90,
+                                                "phone": "(424) 741-0006",
+                                                "extension": 3166,
+                                                "hireDate": new Date(2014, 11, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 92,
+                                                "name": "Olga Strong",
+                                                "reportsTo": 90,
+                                                "phone": "(949) 417-1168",
+                                                "extension": 4568,
+                                                "hireDate": new Date(2015, 5, 28),
+                                                "fullTime": true,
+                                                "position": "Graphic Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 93,
+                                                "name": "Robert Orr",
+                                                "reportsTo": 90,
+                                                "phone": "(977) 341-3721",
+                                                "extension": 9241,
+                                                "hireDate": new Date(2012, 8, 20),
+                                                "fullTime": false,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 95,
+                                                "name": "Odette Sears",
+                                                "reportsTo": 90,
+                                                "phone": "(264) 818-6576",
+                                                "extension": 1914,
+                                                "hireDate": new Date(2013, 7, 5),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 45,
+                                "name": "Zelda Medina",
+                                "reportsTo": 32,
+                                "phone": "(563) 359-6023",
+                                "extension": 2600,
+                                "hireDate": new Date(2012, 11, 6),
+                                "fullTime": true,
+                                "position": "QA Architect",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    },
+                    {
+                        "id": 52,
+                        "name": "Skyler Cleveland",
+                        "reportsTo": 2,
+                        "phone": "(217) 280-5300",
+                        "extension": 9655,
+                        "hireDate": new Date(2014, 11, 10),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 40,
+                                "name": "Karleigh Garza",
+                                "reportsTo": 52,
+                                "phone": "(370) 983-8796",
+                                "extension": 4044,
+                                "hireDate": new Date(2014, 3, 10),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 49,
+                                        "name": "Elmo Tyson",
+                                        "reportsTo": 40,
+                                        "phone": "(344) 496-9555",
+                                        "extension": 6950,
+                                        "hireDate": new Date(2014, 9, 18),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 72,
+                                        "name": "Stacey Lynn",
+                                        "reportsTo": 40,
+                                        "phone": "(140) 772-7509",
+                                        "extension": 8396,
+                                        "hireDate": new Date(2014, 7, 31),
+                                        "fullTime": false,
+                                        "position": "QA Engineer",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 80,
+                                                "name": "Meredith Parrish",
+                                                "reportsTo": 72,
+                                                "phone": "(714) 284-2408",
+                                                "extension": 7675,
+                                                "hireDate": new Date(2012, 11, 13),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 96,
+                                        "name": "Cassady Whitley",
+                                        "reportsTo": 40,
+                                        "phone": "(996) 587-8405",
+                                        "extension": 780,
+                                        "hireDate": new Date(2013, 5, 7),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 5
+                                    },
+                                    {
+                                        "id": 97,
+                                        "name": "Haviva Campbell",
+                                        "reportsTo": 40,
+                                        "phone": "(263) 887-4689",
+                                        "extension": 2808,
+                                        "hireDate": new Date(2013, 3, 5),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 98,
+                                        "name": "Cameron Ayers",
+                                        "reportsTo": 40,
+                                        "phone": "(470) 709-8030",
+                                        "extension": 2893,
+                                        "hireDate": new Date(2013, 8, 28),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 99,
+                                        "name": "Martha Sargent",
+                                        "reportsTo": 40,
+                                        "phone": "(587) 812-4418",
+                                        "extension": 5099,
+                                        "hireDate": new Date(2014, 2, 27),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 100,
+                                        "name": "Darrel Kinney",
+                                        "reportsTo": 40,
+                                        "phone": "(888) 483-9606",
+                                        "extension": 4779,
+                                        "hireDate": new Date(2014, 3, 24),
+                                        "fullTime": false,
+                                        "position": "Graphic Designer",
+                                        "timeInPosition": 1
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 54,
+                                "name": "Kuame Frye",
+                                "reportsTo": 52,
+                                "phone": "(360) 721-5886",
+                                "extension": 2730,
+                                "hireDate": new Date(2010, 11, 17),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 64,
+                                        "name": "Ori Wynn",
+                                        "reportsTo": 54,
+                                        "phone": "(366) 342-0166",
+                                        "extension": 7252,
+                                        "hireDate": new Date(2015, 6, 21),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 0,
+                                        "employees": [
+                                            {
+                                                "id": 6,
+                                                "name": "Moses Duncan",
+                                                "reportsTo": 64,
+                                                "phone": "(421) 611-4814",
+                                                "extension": 669,
+                                                "hireDate": new Date(2010, 5, 24),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 12,
+                                                "name": "Jamalia Wallace",
+                                                "reportsTo": 64,
+                                                "phone": "(611) 391-8016",
+                                                "extension": 1952,
+                                                "hireDate": new Date(2011, 9, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Designer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 62,
+                                                "name": "Palmer Gregory",
+                                                "reportsTo": 64,
+                                                "phone": "(360) 430-2505",
+                                                "extension": 4337,
+                                                "hireDate": new Date(2014, 8, 30),
+                                                "fullTime": true,
+                                                "position": "Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 68,
+                                                "name": "Mallory Gilliam",
+                                                "reportsTo": 64,
+                                                "phone": "(878) 423-2971",
+                                                "extension": 1341,
+                                                "hireDate": new Date(2014, 7, 24),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 73,
+                                                "name": "Ima Hughes",
+                                                "reportsTo": 64,
+                                                "phone": "(905) 485-8001",
+                                                "extension": 1273,
+                                                "hireDate": new Date(2013, 6, 3),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 79,
+                                                "name": "Duncan Mathews",
+                                                "reportsTo": 64,
+                                                "phone": "(790) 971-9709",
+                                                "extension": 4573,
+                                                "hireDate": new Date(2011, 8, 21),
+                                                "fullTime": false,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 69,
+                                "name": "Sierra Beasley",
+                                "reportsTo": 52,
+                                "phone": "(271) 953-1968",
+                                "extension": 3324,
+                                "hireDate": new Date(2011, 4, 2),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 3,
+                                "employees": [
+                                    {
+                                        "id": 38,
+                                        "name": "Elton Tucker",
+                                        "reportsTo": 69,
+                                        "phone": "(988) 930-9331",
+                                        "extension": 9216,
+                                        "hireDate": new Date(2015, 6, 4),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 1
+                                    },
+                                    {
+                                        "id": 39,
+                                        "name": "Iona Brennan",
+                                        "reportsTo": 69,
+                                        "phone": "(356) 563-0600",
+                                        "extension": 5634,
+                                        "hireDate": new Date(2010, 9, 23),
+                                        "fullTime": true,
+                                        "position": "Junior Support Officer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 53,
+                                        "name": "Paul Campos",
+                                        "reportsTo": 69,
+                                        "phone": "(899) 205-1689",
+                                        "extension": 8586,
+                                        "hireDate": new Date(2011, 3, 17),
+                                        "fullTime": true,
+                                        "position": "Interaction Designer",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 66,
+                                                "name": "Gloria Freeman",
+                                                "reportsTo": 53,
+                                                "phone": "(344) 950-9168",
+                                                "extension": 4738,
+                                                "hireDate": new Date(2013, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Junior Interaction Designer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 57,
+                                        "name": "Alyssa Hansen",
+                                        "reportsTo": 69,
+                                        "phone": "(548) 925-4799",
+                                        "extension": 4716,
+                                        "hireDate": new Date(2011, 1, 19),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 82,
+                                        "name": "Yael Walters",
+                                        "reportsTo": 69,
+                                        "phone": "(311) 489-8191",
+                                        "extension": 6520,
+                                        "hireDate": new Date(2013, 7, 4),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 87,
+                                        "name": "Dahlia Hunt",
+                                        "reportsTo": 69,
+                                        "phone": "(720) 339-5202",
+                                        "extension": 3690,
+                                        "hireDate": new Date(2011, 3, 26),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 94,
+                                        "name": "Adria Stanley",
+                                        "reportsTo": 69,
+                                        "phone": "(536) 357-6391",
+                                        "extension": 3374,
+                                        "hireDate": new Date(2014, 7, 26),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "Priscilla Frank",
+                "reportsTo": 1,
+                "phone": "(278) 927-2684",
+                "extension": 4183,
+                "hireDate": new Date(2014, 11, 30),
+                "fullTime": true,
+                "position": "Chief Product Officer",
+                "timeInPosition": 2,
+                "employees": [
+                    {
+                        "id": 4,
+                        "name": "Ursula Holmes",
+                        "reportsTo": 3,
+                        "phone": "(302) 760-2034",
+                        "extension": 2226,
+                        "hireDate": new Date(2011, 6, 6),
+                        "fullTime": true,
+                        "position": "EVP, Product Strategy",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 24,
+                        "name": "Melvin Carrillo",
+                        "reportsTo": 3,
+                        "phone": "(348) 933-5167",
+                        "extension": 2482,
+                        "hireDate": new Date(2014, 7, 21),
+                        "fullTime": true,
+                        "position": "Director, Developer Relations",
+                        "timeInPosition": 6,
+                        "employees": [
+                            {
+                                "id": 29,
+                                "name": "Martha Chavez",
+                                "reportsTo": 24,
+                                "phone": "(860) 754-3464",
+                                "extension": 4531,
+                                "hireDate": new Date(2013, 3, 12),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 30,
+                                "name": "Oren Fox",
+                                "reportsTo": 24,
+                                "phone": "(572) 414-3299",
+                                "extension": 4849,
+                                "hireDate": new Date(2013, 5, 14),
+                                "fullTime": false,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 41,
+                                "name": "Amos Barr",
+                                "reportsTo": 24,
+                                "phone": "(470) 381-3718",
+                                "extension": 7643,
+                                "hireDate": new Date(2010, 3, 9),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "Anika Vega",
+                "reportsTo": 1,
+                "phone": "(910) 714-1802",
+                "extension": 6353,
+                "hireDate": new Date(2010, 2, 25),
+                "fullTime": true,
+                "position": "Chief Process Officer",
+                "timeInPosition": 5,
+                "employees": [
+                    {
+                        "id": 10,
+                        "name": "Vernon Ballard",
+                        "reportsTo": 5,
+                        "phone": "(702) 185-8890",
+                        "extension": 9242,
+                        "hireDate": new Date(2015, 6, 26),
+                        "fullTime": true,
+                        "position": "Director Facilities",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 16,
+                                "name": "Ali Guy",
+                                "reportsTo": 10,
+                                "phone": "(429) 912-6578",
+                                "extension": 2225,
+                                "hireDate": new Date(2014, 6, 29),
+                                "fullTime": true,
+                                "position": "Operations Manager",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 23,
+                                        "name": "Bruce Reilly",
+                                        "reportsTo": 16,
+                                        "phone": "(995) 243-7302",
+                                        "extension": 4815,
+                                        "hireDate": new Date(2015, 4, 1),
+                                        "fullTime": true,
+                                        "position": "Head of Security",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 26,
+                                                "name": "Rowan Morin",
+                                                "reportsTo": 23,
+                                                "phone": "(792) 141-4374",
+                                                "extension": 1844,
+                                                "hireDate": new Date(2015, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Building Security",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 44,
+                                                "name": "Benedict Soto",
+                                                "reportsTo": 23,
+                                                "phone": "(822) 282-5991",
+                                                "extension": 6422,
+                                                "hireDate": new Date(2012, 6, 1),
+                                                "fullTime": false,
+                                                "position": "Building Security",
+                                                "timeInPosition": 4
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 48,
+                                        "name": "Maryam Rios",
+                                        "reportsTo": 16,
+                                        "phone": "(673) 764-6720",
+                                        "extension": 531,
+                                        "hireDate": new Date(2014, 3, 3),
+                                        "fullTime": true,
+                                        "position": "Team Lead, Personal Assistants",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 58,
+                                                "name": "Rose Mcintyre",
+                                                "reportsTo": 48,
+                                                "phone": "(771) 615-4590",
+                                                "extension": 7094,
+                                                "hireDate": new Date(2015, 6, 30),
+                                                "fullTime": false,
+                                                "position": "Personal Assistant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "Nevada Hart",
+                "reportsTo": 1,
+                "phone": "(254) 220-1576",
+                "extension": 6649,
+                "hireDate": new Date(2015, 8, 17),
+                "fullTime": true,
+                "position": "Chief Financial Officer",
+                "timeInPosition": 6,
+                "employees": [
+                    {
+                        "id": 14,
+                        "name": "Zena Sanford",
+                        "reportsTo": 7,
+                        "phone": "(437) 568-8160",
+                        "extension": 4452,
+                        "hireDate": new Date(2010, 11, 30),
+                        "fullTime": true,
+                        "position": "VP, Finance",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 15,
+                        "name": "Quinlan Howe",
+                        "reportsTo": 7,
+                        "phone": "(464) 334-9748",
+                        "extension": 8722,
+                        "hireDate": new Date(2011, 6, 9),
+                        "fullTime": false,
+                        "position": "Senior Director, Finance",
+                        "timeInPosition": 0,
+                        "employees": [
+                            {
+                                "id": 17,
+                                "name": "Indira Lopez",
+                                "reportsTo": 15,
+                                "phone": "(301) 368-0938",
+                                "extension": 8027,
+                                "hireDate": new Date(2013, 8, 18),
+                                "fullTime": true,
+                                "position": "ERP Team Lead",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 18,
+                                        "name": "Lareina Lara",
+                                        "reportsTo": 17,
+                                        "phone": "(233) 457-7482",
+                                        "extension": 1996,
+                                        "hireDate": new Date(2010, 4, 30),
+                                        "fullTime": true,
+                                        "position": "ERP Solutions Consultant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 19,
+                                        "name": "Maxwell Wise",
+                                        "reportsTo": 17,
+                                        "phone": "(570) 494-2531",
+                                        "extension": 9865,
+                                        "hireDate": new Date(2012, 5, 19),
+                                        "fullTime": true,
+                                        "position": "Systems Engineer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 20,
+                                "name": "Hunter Mcbride",
+                                "reportsTo": 15,
+                                "phone": "(409) 442-7016",
+                                "extension": 4284,
+                                "hireDate": new Date(2012, 10, 20),
+                                "fullTime": true,
+                                "position": "Senior Director, Tax",
+                                "timeInPosition": 3
+                            },
+                            {
+                                "id": 21,
+                                "name": "Jana Serrano",
+                                "reportsTo": 15,
+                                "phone": "(910) 718-4620",
+                                "extension": 6970,
+                                "hireDate": new Date(2010, 4, 2),
+                                "fullTime": true,
+                                "position": "Financial Planning & Analysis Manager",
+                                "timeInPosition": 2
+                            },
+                            {
+                                "id": 22,
+                                "name": "Zachery Shelton",
+                                "reportsTo": 15,
+                                "phone": "(310) 240-8675",
+                                "extension": 4527,
+                                "hireDate": new Date(2011, 11, 23),
+                                "fullTime": false,
+                                "position": "Corporate Finance Controller",
+                                "timeInPosition": 6,
+                                "employees": [
+                                    {
+                                        "id": 28,
+                                        "name": "Cullen Freeman",
+                                        "reportsTo": 22,
+                                        "phone": "(136) 554-8814",
+                                        "extension": 9861,
+                                        "hireDate": new Date(2014, 3, 15),
+                                        "fullTime": true,
+                                        "position": "Treasurer Accountant",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 31,
+                                        "name": "Quinn Dean",
+                                        "reportsTo": 22,
+                                        "phone": "(152) 613-3507",
+                                        "extension": 6621,
+                                        "hireDate": new Date(2015, 1, 29),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 34,
+                                        "name": "Samantha Brady",
+                                        "reportsTo": 22,
+                                        "phone": "(206) 398-4328",
+                                        "extension": 1157,
+                                        "hireDate": new Date(2011, 2, 13),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 35,
+                                                "name": "Tamara Green",
+                                                "reportsTo": 34,
+                                                "phone": "(219) 248-2789",
+                                                "extension": 4880,
+                                                "hireDate": new Date(2014, 2, 4),
+                                                "fullTime": true,
+                                                "position": "Junior Accountant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 36,
+                                        "name": "Olympia Coleman",
+                                        "reportsTo": 22,
+                                        "phone": "(944) 853-6383",
+                                        "extension": 2136,
+                                        "hireDate": new Date(2013, 7, 31),
+                                        "fullTime": true,
+                                        "position": "Collections Manager",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 37,
+                                        "name": "Breanna Goodwin",
+                                        "reportsTo": 22,
+                                        "phone": "(379) 988-9630",
+                                        "extension": 5898,
+                                        "hireDate": new Date(2010, 5, 23),
+                                        "fullTime": false,
+                                        "position": "Payroll Specialist",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 27,
+                                "name": "Curran Travis",
+                                "reportsTo": 15,
+                                "phone": "(438) 135-8033",
+                                "extension": 3841,
+                                "hireDate": new Date(2011, 6, 13),
+                                "fullTime": true,
+                                "position": "Finance Controller",
+                                "timeInPosition": 5
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "Hunter Fry",
+                "reportsTo": 1,
+                "phone": "(766) 358-9858",
+                "extension": 3741,
+                "hireDate": new Date(2011, 2, 12),
+                "fullTime": false,
+                "position": "General Counsel",
+                "timeInPosition": 3,
+                "employees": [
+                    {
+                        "id": 9,
+                        "name": "Kuame Carrillo",
+                        "reportsTo": 8,
+                        "phone": "(192) 383-1305",
+                        "extension": 9228,
+                        "hireDate": new Date(2011, 2, 22),
+                        "fullTime": true,
+                        "position": "Associate General Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 13,
+                        "name": "Stacy Todd",
+                        "reportsTo": 8,
+                        "phone": "(925) 286-3327",
+                        "extension": 8565,
+                        "hireDate": new Date(2014, 7, 5),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 33,
+                        "name": "Valentine Wyatt",
+                        "reportsTo": 8,
+                        "phone": "(165) 166-6205",
+                        "extension": 3588,
+                        "hireDate": new Date(2015, 5, 21),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 5
+                    },
+                    {
+                        "id": 86,
+                        "name": "Daniel Mccarthy",
+                        "reportsTo": 8,
+                        "phone": "(624) 483-6206",
+                        "extension": 9112,
+                        "hireDate": new Date(2013, 12, 3),
+                        "fullTime": false,
+                        "position": "Staff Attorney",
+                        "timeInPosition": 0
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default employees;
diff --git a/vue-options-api-demos/treelist/excel/basic/main.js b/vue-options-api-demos/treelist/excel/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/excel/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/excel/basic/main.vue b/vue-options-api-demos/treelist/excel/basic/main.vue
new file mode 100644
index 00000000..2851efe7
--- /dev/null
+++ b/vue-options-api-demos/treelist/excel/basic/main.vue
@@ -0,0 +1,104 @@
+<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() {
+      saveExcel({
+        fileName: 'myFile',
+        data: treeToFlat(
+          this.processedData,
+          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>
\ No newline at end of file
diff --git a/vue-options-api-demos/treelist/excel/customization/data.js b/vue-options-api-demos/treelist/excel/customization/data.js
new file mode 100644
index 00000000..f66aec4d
--- /dev/null
+++ b/vue-options-api-demos/treelist/excel/customization/data.js
@@ -0,0 +1,1150 @@
+
+const employees = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2,
+        "employees": [
+            {
+                "id": 2,
+                "name": "Guy Wooten",
+                "reportsTo": 1,
+                "phone": "(438) 738-4935",
+                "extension": 1155,
+                "hireDate": new Date(2010, 3, 3),
+                "fullTime": true,
+                "position": "Chief Technical Officer",
+                "timeInPosition": 1,
+                "employees": [
+                    {
+                        "id": 32,
+                        "name": "Buffy Weber",
+                        "reportsTo": 2,
+                        "phone": "(699) 838-6121",
+                        "extension": 8933,
+                        "hireDate": new Date(2011, 7, 11),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 11,
+                                "name": "Hyacinth Hood",
+                                "reportsTo": 32,
+                                "phone": "(889) 345-2438",
+                                "extension": 8564,
+                                "hireDate": new Date(2014, 2, 3),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 60,
+                                        "name": "Akeem Carr",
+                                        "reportsTo": 11,
+                                        "phone": "(738) 136-2814",
+                                        "extension": 9353,
+                                        "hireDate": new Date(2011, 4, 21),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 78,
+                                        "name": "Rinah Simon",
+                                        "reportsTo": 11,
+                                        "phone": "(285) 912-5271",
+                                        "extension": 7795,
+                                        "hireDate": new Date(2012, 10, 11),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 42,
+                                "name": "Gage Daniels",
+                                "reportsTo": 32,
+                                "phone": "(107) 290-6260",
+                                "extension": 896,
+                                "hireDate": new Date(2013, 5, 16),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 5
+                            },
+                            {
+                                "id": 43,
+                                "name": "Constance Vazquez",
+                                "reportsTo": 32,
+                                "phone": "(800) 301-1978",
+                                "extension": 5141,
+                                "hireDate": new Date(2011, 6, 7),
+                                "fullTime": true,
+                                "position": "Director, Engineering",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 46,
+                                        "name": "Darrel Solis",
+                                        "reportsTo": 43,
+                                        "phone": "(327) 977-0216",
+                                        "extension": 7779,
+                                        "hireDate": new Date(2015, 4, 25),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 47,
+                                                "name": "Brian Yang",
+                                                "reportsTo": 46,
+                                                "phone": "(565) 146-5435",
+                                                "extension": 3885,
+                                                "hireDate": new Date(2012, 9, 27),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 50,
+                                                "name": "Lillian Bradshaw",
+                                                "reportsTo": 46,
+                                                "phone": "(323) 509-3479",
+                                                "extension": 5426,
+                                                "hireDate": new Date(2014, 5, 10),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 51,
+                                                "name": "Christian Palmer",
+                                                "reportsTo": 46,
+                                                "phone": "(490) 421-8718",
+                                                "extension": 3706,
+                                                "hireDate": new Date(2012, 12, 27),
+                                                "fullTime": false,
+                                                "position": "Technical Lead",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 55,
+                                                "name": "Summer Mosley",
+                                                "reportsTo": 46,
+                                                "phone": "(784) 962-2301",
+                                                "extension": 5492,
+                                                "hireDate": new Date(2010, 3, 2),
+                                                "fullTime": true,
+                                                "position": "QA Engineer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 56,
+                                                "name": "Barry Ayers",
+                                                "reportsTo": 46,
+                                                "phone": "(452) 373-9227",
+                                                "extension": 1308,
+                                                "hireDate": new Date(2011, 10, 11),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 59,
+                                                "name": "Keiko Espinoza",
+                                                "reportsTo": 46,
+                                                "phone": "(226) 600-5305",
+                                                "extension": 9363,
+                                                "hireDate": new Date(2011, 9, 18),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 61,
+                                                "name": "Candace Pickett",
+                                                "reportsTo": 46,
+                                                "phone": "(120) 117-7475",
+                                                "extension": 5178,
+                                                "hireDate": new Date(2010, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 63,
+                                        "name": "Mia Caldwell",
+                                        "reportsTo": 43,
+                                        "phone": "(848) 636-6470",
+                                        "extension": 6368,
+                                        "hireDate": new Date(2012, 10, 7),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 65,
+                                                "name": "Thomas Terry",
+                                                "reportsTo": 63,
+                                                "phone": "(764) 831-4248",
+                                                "extension": 3574,
+                                                "hireDate": new Date(2015, 6, 15),
+                                                "fullTime": false,
+                                                "position": "Senior Enterprise Support Officer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 67,
+                                                "name": "Ruth Downs",
+                                                "reportsTo": 63,
+                                                "phone": "(138) 991-1440",
+                                                "extension": 8067,
+                                                "hireDate": new Date(2013, 7, 13),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 70,
+                                                "name": "Yasir Wilder",
+                                                "reportsTo": 63,
+                                                "phone": "(759) 701-8665",
+                                                "extension": 8350,
+                                                "hireDate": new Date(2010, 11, 8),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 71,
+                                                "name": "Flavia Short",
+                                                "reportsTo": 63,
+                                                "phone": "(370) 133-9238",
+                                                "extension": 6390,
+                                                "hireDate": new Date(2013, 2, 21),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 74,
+                                                "name": "Aaron Roach",
+                                                "reportsTo": 63,
+                                                "phone": "(958) 717-9230",
+                                                "extension": 4899,
+                                                "hireDate": new Date(2011, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 75,
+                                                "name": "Eric Russell",
+                                                "reportsTo": 63,
+                                                "phone": "(516) 575-8505",
+                                                "extension": 2224,
+                                                "hireDate": new Date(2012, 10, 28),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 76,
+                                                "name": "Cheyenne Olson",
+                                                "reportsTo": 63,
+                                                "phone": "(241) 645-0257",
+                                                "extension": 9181,
+                                                "hireDate": new Date(2015, 5, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 77,
+                                                "name": "Shaine Avila",
+                                                "reportsTo": 63,
+                                                "phone": "(844) 435-1360",
+                                                "extension": 3374,
+                                                "hireDate": new Date(2010, 1, 31),
+                                                "fullTime": true,
+                                                "position": "UI Designer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 81,
+                                                "name": "Chantale Long",
+                                                "reportsTo": 63,
+                                                "phone": "(252) 419-6891",
+                                                "extension": 7868,
+                                                "hireDate": new Date(2010, 6, 17),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 83,
+                                                "name": "Dane Cruz",
+                                                "reportsTo": 63,
+                                                "phone": "(946) 701-6165",
+                                                "extension": 3828,
+                                                "hireDate": new Date(2014, 10, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 84,
+                                                "name": "Regan Patterson",
+                                                "reportsTo": 63,
+                                                "phone": "(265) 946-1765",
+                                                "extension": 6955,
+                                                "hireDate": new Date(2012, 3, 1),
+                                                "fullTime": true,
+                                                "position": "Technical Writer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 85,
+                                                "name": "Drew Mckay",
+                                                "reportsTo": 63,
+                                                "phone": "(327) 293-0162",
+                                                "extension": 6904,
+                                                "hireDate": new Date(2011, 3, 25),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 88,
+                                                "name": "Bevis Miller",
+                                                "reportsTo": 63,
+                                                "phone": "(525) 557-0169",
+                                                "extension": 6978,
+                                                "hireDate": new Date(2011, 4, 19),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 89,
+                                                "name": "Bruce Mccarty",
+                                                "reportsTo": 63,
+                                                "phone": "(936) 777-8730",
+                                                "extension": 6552,
+                                                "hireDate": new Date(2014, 3, 28),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 5
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 90,
+                                        "name": "Ocean Blair",
+                                        "reportsTo": 43,
+                                        "phone": "(343) 586-6614",
+                                        "extension": 1424,
+                                        "hireDate": new Date(2011, 4, 27),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 91,
+                                                "name": "Guinevere Osborn",
+                                                "reportsTo": 90,
+                                                "phone": "(424) 741-0006",
+                                                "extension": 3166,
+                                                "hireDate": new Date(2014, 11, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 92,
+                                                "name": "Olga Strong",
+                                                "reportsTo": 90,
+                                                "phone": "(949) 417-1168",
+                                                "extension": 4568,
+                                                "hireDate": new Date(2015, 5, 28),
+                                                "fullTime": true,
+                                                "position": "Graphic Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 93,
+                                                "name": "Robert Orr",
+                                                "reportsTo": 90,
+                                                "phone": "(977) 341-3721",
+                                                "extension": 9241,
+                                                "hireDate": new Date(2012, 8, 20),
+                                                "fullTime": false,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 95,
+                                                "name": "Odette Sears",
+                                                "reportsTo": 90,
+                                                "phone": "(264) 818-6576",
+                                                "extension": 1914,
+                                                "hireDate": new Date(2013, 7, 5),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 45,
+                                "name": "Zelda Medina",
+                                "reportsTo": 32,
+                                "phone": "(563) 359-6023",
+                                "extension": 2600,
+                                "hireDate": new Date(2012, 11, 6),
+                                "fullTime": true,
+                                "position": "QA Architect",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    },
+                    {
+                        "id": 52,
+                        "name": "Skyler Cleveland",
+                        "reportsTo": 2,
+                        "phone": "(217) 280-5300",
+                        "extension": 9655,
+                        "hireDate": new Date(2014, 11, 10),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 40,
+                                "name": "Karleigh Garza",
+                                "reportsTo": 52,
+                                "phone": "(370) 983-8796",
+                                "extension": 4044,
+                                "hireDate": new Date(2014, 3, 10),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 49,
+                                        "name": "Elmo Tyson",
+                                        "reportsTo": 40,
+                                        "phone": "(344) 496-9555",
+                                        "extension": 6950,
+                                        "hireDate": new Date(2014, 9, 18),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 72,
+                                        "name": "Stacey Lynn",
+                                        "reportsTo": 40,
+                                        "phone": "(140) 772-7509",
+                                        "extension": 8396,
+                                        "hireDate": new Date(2014, 7, 31),
+                                        "fullTime": false,
+                                        "position": "QA Engineer",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 80,
+                                                "name": "Meredith Parrish",
+                                                "reportsTo": 72,
+                                                "phone": "(714) 284-2408",
+                                                "extension": 7675,
+                                                "hireDate": new Date(2012, 11, 13),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 96,
+                                        "name": "Cassady Whitley",
+                                        "reportsTo": 40,
+                                        "phone": "(996) 587-8405",
+                                        "extension": 780,
+                                        "hireDate": new Date(2013, 5, 7),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 5
+                                    },
+                                    {
+                                        "id": 97,
+                                        "name": "Haviva Campbell",
+                                        "reportsTo": 40,
+                                        "phone": "(263) 887-4689",
+                                        "extension": 2808,
+                                        "hireDate": new Date(2013, 3, 5),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 98,
+                                        "name": "Cameron Ayers",
+                                        "reportsTo": 40,
+                                        "phone": "(470) 709-8030",
+                                        "extension": 2893,
+                                        "hireDate": new Date(2013, 8, 28),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 99,
+                                        "name": "Martha Sargent",
+                                        "reportsTo": 40,
+                                        "phone": "(587) 812-4418",
+                                        "extension": 5099,
+                                        "hireDate": new Date(2014, 2, 27),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 100,
+                                        "name": "Darrel Kinney",
+                                        "reportsTo": 40,
+                                        "phone": "(888) 483-9606",
+                                        "extension": 4779,
+                                        "hireDate": new Date(2014, 3, 24),
+                                        "fullTime": false,
+                                        "position": "Graphic Designer",
+                                        "timeInPosition": 1
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 54,
+                                "name": "Kuame Frye",
+                                "reportsTo": 52,
+                                "phone": "(360) 721-5886",
+                                "extension": 2730,
+                                "hireDate": new Date(2010, 11, 17),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 64,
+                                        "name": "Ori Wynn",
+                                        "reportsTo": 54,
+                                        "phone": "(366) 342-0166",
+                                        "extension": 7252,
+                                        "hireDate": new Date(2015, 6, 21),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 0,
+                                        "employees": [
+                                            {
+                                                "id": 6,
+                                                "name": "Moses Duncan",
+                                                "reportsTo": 64,
+                                                "phone": "(421) 611-4814",
+                                                "extension": 669,
+                                                "hireDate": new Date(2010, 5, 24),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 12,
+                                                "name": "Jamalia Wallace",
+                                                "reportsTo": 64,
+                                                "phone": "(611) 391-8016",
+                                                "extension": 1952,
+                                                "hireDate": new Date(2011, 9, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Designer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 62,
+                                                "name": "Palmer Gregory",
+                                                "reportsTo": 64,
+                                                "phone": "(360) 430-2505",
+                                                "extension": 4337,
+                                                "hireDate": new Date(2014, 8, 30),
+                                                "fullTime": true,
+                                                "position": "Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 68,
+                                                "name": "Mallory Gilliam",
+                                                "reportsTo": 64,
+                                                "phone": "(878) 423-2971",
+                                                "extension": 1341,
+                                                "hireDate": new Date(2014, 7, 24),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 73,
+                                                "name": "Ima Hughes",
+                                                "reportsTo": 64,
+                                                "phone": "(905) 485-8001",
+                                                "extension": 1273,
+                                                "hireDate": new Date(2013, 6, 3),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 79,
+                                                "name": "Duncan Mathews",
+                                                "reportsTo": 64,
+                                                "phone": "(790) 971-9709",
+                                                "extension": 4573,
+                                                "hireDate": new Date(2011, 8, 21),
+                                                "fullTime": false,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 69,
+                                "name": "Sierra Beasley",
+                                "reportsTo": 52,
+                                "phone": "(271) 953-1968",
+                                "extension": 3324,
+                                "hireDate": new Date(2011, 4, 2),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 3,
+                                "employees": [
+                                    {
+                                        "id": 38,
+                                        "name": "Elton Tucker",
+                                        "reportsTo": 69,
+                                        "phone": "(988) 930-9331",
+                                        "extension": 9216,
+                                        "hireDate": new Date(2015, 6, 4),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 1
+                                    },
+                                    {
+                                        "id": 39,
+                                        "name": "Iona Brennan",
+                                        "reportsTo": 69,
+                                        "phone": "(356) 563-0600",
+                                        "extension": 5634,
+                                        "hireDate": new Date(2010, 9, 23),
+                                        "fullTime": true,
+                                        "position": "Junior Support Officer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 53,
+                                        "name": "Paul Campos",
+                                        "reportsTo": 69,
+                                        "phone": "(899) 205-1689",
+                                        "extension": 8586,
+                                        "hireDate": new Date(2011, 3, 17),
+                                        "fullTime": true,
+                                        "position": "Interaction Designer",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 66,
+                                                "name": "Gloria Freeman",
+                                                "reportsTo": 53,
+                                                "phone": "(344) 950-9168",
+                                                "extension": 4738,
+                                                "hireDate": new Date(2013, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Junior Interaction Designer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 57,
+                                        "name": "Alyssa Hansen",
+                                        "reportsTo": 69,
+                                        "phone": "(548) 925-4799",
+                                        "extension": 4716,
+                                        "hireDate": new Date(2011, 1, 19),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 82,
+                                        "name": "Yael Walters",
+                                        "reportsTo": 69,
+                                        "phone": "(311) 489-8191",
+                                        "extension": 6520,
+                                        "hireDate": new Date(2013, 7, 4),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 87,
+                                        "name": "Dahlia Hunt",
+                                        "reportsTo": 69,
+                                        "phone": "(720) 339-5202",
+                                        "extension": 3690,
+                                        "hireDate": new Date(2011, 3, 26),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 94,
+                                        "name": "Adria Stanley",
+                                        "reportsTo": 69,
+                                        "phone": "(536) 357-6391",
+                                        "extension": 3374,
+                                        "hireDate": new Date(2014, 7, 26),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "Priscilla Frank",
+                "reportsTo": 1,
+                "phone": "(278) 927-2684",
+                "extension": 4183,
+                "hireDate": new Date(2014, 11, 30),
+                "fullTime": true,
+                "position": "Chief Product Officer",
+                "timeInPosition": 2,
+                "employees": [
+                    {
+                        "id": 4,
+                        "name": "Ursula Holmes",
+                        "reportsTo": 3,
+                        "phone": "(302) 760-2034",
+                        "extension": 2226,
+                        "hireDate": new Date(2011, 6, 6),
+                        "fullTime": true,
+                        "position": "EVP, Product Strategy",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 24,
+                        "name": "Melvin Carrillo",
+                        "reportsTo": 3,
+                        "phone": "(348) 933-5167",
+                        "extension": 2482,
+                        "hireDate": new Date(2014, 7, 21),
+                        "fullTime": true,
+                        "position": "Director, Developer Relations",
+                        "timeInPosition": 6,
+                        "employees": [
+                            {
+                                "id": 29,
+                                "name": "Martha Chavez",
+                                "reportsTo": 24,
+                                "phone": "(860) 754-3464",
+                                "extension": 4531,
+                                "hireDate": new Date(2013, 3, 12),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 30,
+                                "name": "Oren Fox",
+                                "reportsTo": 24,
+                                "phone": "(572) 414-3299",
+                                "extension": 4849,
+                                "hireDate": new Date(2013, 5, 14),
+                                "fullTime": false,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 41,
+                                "name": "Amos Barr",
+                                "reportsTo": 24,
+                                "phone": "(470) 381-3718",
+                                "extension": 7643,
+                                "hireDate": new Date(2010, 3, 9),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "Anika Vega",
+                "reportsTo": 1,
+                "phone": "(910) 714-1802",
+                "extension": 6353,
+                "hireDate": new Date(2010, 2, 25),
+                "fullTime": true,
+                "position": "Chief Process Officer",
+                "timeInPosition": 5,
+                "employees": [
+                    {
+                        "id": 10,
+                        "name": "Vernon Ballard",
+                        "reportsTo": 5,
+                        "phone": "(702) 185-8890",
+                        "extension": 9242,
+                        "hireDate": new Date(2015, 6, 26),
+                        "fullTime": true,
+                        "position": "Director Facilities",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 16,
+                                "name": "Ali Guy",
+                                "reportsTo": 10,
+                                "phone": "(429) 912-6578",
+                                "extension": 2225,
+                                "hireDate": new Date(2014, 6, 29),
+                                "fullTime": true,
+                                "position": "Operations Manager",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 23,
+                                        "name": "Bruce Reilly",
+                                        "reportsTo": 16,
+                                        "phone": "(995) 243-7302",
+                                        "extension": 4815,
+                                        "hireDate": new Date(2015, 4, 1),
+                                        "fullTime": true,
+                                        "position": "Head of Security",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 26,
+                                                "name": "Rowan Morin",
+                                                "reportsTo": 23,
+                                                "phone": "(792) 141-4374",
+                                                "extension": 1844,
+                                                "hireDate": new Date(2015, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Building Security",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 44,
+                                                "name": "Benedict Soto",
+                                                "reportsTo": 23,
+                                                "phone": "(822) 282-5991",
+                                                "extension": 6422,
+                                                "hireDate": new Date(2012, 6, 1),
+                                                "fullTime": false,
+                                                "position": "Building Security",
+                                                "timeInPosition": 4
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 48,
+                                        "name": "Maryam Rios",
+                                        "reportsTo": 16,
+                                        "phone": "(673) 764-6720",
+                                        "extension": 531,
+                                        "hireDate": new Date(2014, 3, 3),
+                                        "fullTime": true,
+                                        "position": "Team Lead, Personal Assistants",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 58,
+                                                "name": "Rose Mcintyre",
+                                                "reportsTo": 48,
+                                                "phone": "(771) 615-4590",
+                                                "extension": 7094,
+                                                "hireDate": new Date(2015, 6, 30),
+                                                "fullTime": false,
+                                                "position": "Personal Assistant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "Nevada Hart",
+                "reportsTo": 1,
+                "phone": "(254) 220-1576",
+                "extension": 6649,
+                "hireDate": new Date(2015, 8, 17),
+                "fullTime": true,
+                "position": "Chief Financial Officer",
+                "timeInPosition": 6,
+                "employees": [
+                    {
+                        "id": 14,
+                        "name": "Zena Sanford",
+                        "reportsTo": 7,
+                        "phone": "(437) 568-8160",
+                        "extension": 4452,
+                        "hireDate": new Date(2010, 11, 30),
+                        "fullTime": true,
+                        "position": "VP, Finance",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 15,
+                        "name": "Quinlan Howe",
+                        "reportsTo": 7,
+                        "phone": "(464) 334-9748",
+                        "extension": 8722,
+                        "hireDate": new Date(2011, 6, 9),
+                        "fullTime": false,
+                        "position": "Senior Director, Finance",
+                        "timeInPosition": 0,
+                        "employees": [
+                            {
+                                "id": 17,
+                                "name": "Indira Lopez",
+                                "reportsTo": 15,
+                                "phone": "(301) 368-0938",
+                                "extension": 8027,
+                                "hireDate": new Date(2013, 8, 18),
+                                "fullTime": true,
+                                "position": "ERP Team Lead",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 18,
+                                        "name": "Lareina Lara",
+                                        "reportsTo": 17,
+                                        "phone": "(233) 457-7482",
+                                        "extension": 1996,
+                                        "hireDate": new Date(2010, 4, 30),
+                                        "fullTime": true,
+                                        "position": "ERP Solutions Consultant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 19,
+                                        "name": "Maxwell Wise",
+                                        "reportsTo": 17,
+                                        "phone": "(570) 494-2531",
+                                        "extension": 9865,
+                                        "hireDate": new Date(2012, 5, 19),
+                                        "fullTime": true,
+                                        "position": "Systems Engineer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 20,
+                                "name": "Hunter Mcbride",
+                                "reportsTo": 15,
+                                "phone": "(409) 442-7016",
+                                "extension": 4284,
+                                "hireDate": new Date(2012, 10, 20),
+                                "fullTime": true,
+                                "position": "Senior Director, Tax",
+                                "timeInPosition": 3
+                            },
+                            {
+                                "id": 21,
+                                "name": "Jana Serrano",
+                                "reportsTo": 15,
+                                "phone": "(910) 718-4620",
+                                "extension": 6970,
+                                "hireDate": new Date(2010, 4, 2),
+                                "fullTime": true,
+                                "position": "Financial Planning & Analysis Manager",
+                                "timeInPosition": 2
+                            },
+                            {
+                                "id": 22,
+                                "name": "Zachery Shelton",
+                                "reportsTo": 15,
+                                "phone": "(310) 240-8675",
+                                "extension": 4527,
+                                "hireDate": new Date(2011, 11, 23),
+                                "fullTime": false,
+                                "position": "Corporate Finance Controller",
+                                "timeInPosition": 6,
+                                "employees": [
+                                    {
+                                        "id": 28,
+                                        "name": "Cullen Freeman",
+                                        "reportsTo": 22,
+                                        "phone": "(136) 554-8814",
+                                        "extension": 9861,
+                                        "hireDate": new Date(2014, 3, 15),
+                                        "fullTime": true,
+                                        "position": "Treasurer Accountant",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 31,
+                                        "name": "Quinn Dean",
+                                        "reportsTo": 22,
+                                        "phone": "(152) 613-3507",
+                                        "extension": 6621,
+                                        "hireDate": new Date(2015, 1, 29),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 34,
+                                        "name": "Samantha Brady",
+                                        "reportsTo": 22,
+                                        "phone": "(206) 398-4328",
+                                        "extension": 1157,
+                                        "hireDate": new Date(2011, 2, 13),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 35,
+                                                "name": "Tamara Green",
+                                                "reportsTo": 34,
+                                                "phone": "(219) 248-2789",
+                                                "extension": 4880,
+                                                "hireDate": new Date(2014, 2, 4),
+                                                "fullTime": true,
+                                                "position": "Junior Accountant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 36,
+                                        "name": "Olympia Coleman",
+                                        "reportsTo": 22,
+                                        "phone": "(944) 853-6383",
+                                        "extension": 2136,
+                                        "hireDate": new Date(2013, 7, 31),
+                                        "fullTime": true,
+                                        "position": "Collections Manager",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 37,
+                                        "name": "Breanna Goodwin",
+                                        "reportsTo": 22,
+                                        "phone": "(379) 988-9630",
+                                        "extension": 5898,
+                                        "hireDate": new Date(2010, 5, 23),
+                                        "fullTime": false,
+                                        "position": "Payroll Specialist",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 27,
+                                "name": "Curran Travis",
+                                "reportsTo": 15,
+                                "phone": "(438) 135-8033",
+                                "extension": 3841,
+                                "hireDate": new Date(2011, 6, 13),
+                                "fullTime": true,
+                                "position": "Finance Controller",
+                                "timeInPosition": 5
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "Hunter Fry",
+                "reportsTo": 1,
+                "phone": "(766) 358-9858",
+                "extension": 3741,
+                "hireDate": new Date(2011, 2, 12),
+                "fullTime": false,
+                "position": "General Counsel",
+                "timeInPosition": 3,
+                "employees": [
+                    {
+                        "id": 9,
+                        "name": "Kuame Carrillo",
+                        "reportsTo": 8,
+                        "phone": "(192) 383-1305",
+                        "extension": 9228,
+                        "hireDate": new Date(2011, 2, 22),
+                        "fullTime": true,
+                        "position": "Associate General Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 13,
+                        "name": "Stacy Todd",
+                        "reportsTo": 8,
+                        "phone": "(925) 286-3327",
+                        "extension": 8565,
+                        "hireDate": new Date(2014, 7, 5),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 33,
+                        "name": "Valentine Wyatt",
+                        "reportsTo": 8,
+                        "phone": "(165) 166-6205",
+                        "extension": 3588,
+                        "hireDate": new Date(2015, 5, 21),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 5
+                    },
+                    {
+                        "id": 86,
+                        "name": "Daniel Mccarthy",
+                        "reportsTo": 8,
+                        "phone": "(624) 483-6206",
+                        "extension": 9112,
+                        "hireDate": new Date(2013, 12, 3),
+                        "fullTime": false,
+                        "position": "Staff Attorney",
+                        "timeInPosition": 0
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default employees;
diff --git a/vue-options-api-demos/treelist/excel/customization/main.js b/vue-options-api-demos/treelist/excel/customization/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/excel/customization/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/excel/customization/main.vue b/vue-options-api-demos/treelist/excel/customization/main.vue
new file mode 100644
index 00000000..1571df77
--- /dev/null
+++ b/vue-options-api-demos/treelist/excel/customization/main.vue
@@ -0,0 +1,126 @@
+<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 { workbookOptions, toDataURL } from '@progress/kendo-vue-excel-export';
+import { saveAs } from '@progress/kendo-file-saver';
+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() {
+      this.customSaveExcel({
+        data: treeToFlat(
+          this.processedData,
+          this.expandField,
+          this.subItemsField
+        ),
+        fileName: 'myFile',
+        columns: this.columns,
+        hierarchy: true,
+      });
+    },
+    customSaveExcel(exportOptions) {
+      const saveFn = (dataURL) => {
+        saveAs(dataURL, exportOptions.fileName);
+      };
+
+      const options = workbookOptions(exportOptions);
+      const rows = options.sheets[0].rows;
+
+      let altIdx = 0;
+      rows.forEach((row) => {
+        if (row.type === 'data') {
+          if (altIdx % 2 !== 0) {
+            row.cells.forEach((cell) => {
+              cell.background = '#aabbcc';
+            });
+          }
+          altIdx++;
+        }
+      });
+      toDataURL(options).then(saveFn);
+    },
+    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>
diff --git a/vue-options-api-demos/treelist/excel/single-page/data.js b/vue-options-api-demos/treelist/excel/single-page/data.js
new file mode 100644
index 00000000..f66aec4d
--- /dev/null
+++ b/vue-options-api-demos/treelist/excel/single-page/data.js
@@ -0,0 +1,1150 @@
+
+const employees = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2,
+        "employees": [
+            {
+                "id": 2,
+                "name": "Guy Wooten",
+                "reportsTo": 1,
+                "phone": "(438) 738-4935",
+                "extension": 1155,
+                "hireDate": new Date(2010, 3, 3),
+                "fullTime": true,
+                "position": "Chief Technical Officer",
+                "timeInPosition": 1,
+                "employees": [
+                    {
+                        "id": 32,
+                        "name": "Buffy Weber",
+                        "reportsTo": 2,
+                        "phone": "(699) 838-6121",
+                        "extension": 8933,
+                        "hireDate": new Date(2011, 7, 11),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 11,
+                                "name": "Hyacinth Hood",
+                                "reportsTo": 32,
+                                "phone": "(889) 345-2438",
+                                "extension": 8564,
+                                "hireDate": new Date(2014, 2, 3),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 60,
+                                        "name": "Akeem Carr",
+                                        "reportsTo": 11,
+                                        "phone": "(738) 136-2814",
+                                        "extension": 9353,
+                                        "hireDate": new Date(2011, 4, 21),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 78,
+                                        "name": "Rinah Simon",
+                                        "reportsTo": 11,
+                                        "phone": "(285) 912-5271",
+                                        "extension": 7795,
+                                        "hireDate": new Date(2012, 10, 11),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 42,
+                                "name": "Gage Daniels",
+                                "reportsTo": 32,
+                                "phone": "(107) 290-6260",
+                                "extension": 896,
+                                "hireDate": new Date(2013, 5, 16),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 5
+                            },
+                            {
+                                "id": 43,
+                                "name": "Constance Vazquez",
+                                "reportsTo": 32,
+                                "phone": "(800) 301-1978",
+                                "extension": 5141,
+                                "hireDate": new Date(2011, 6, 7),
+                                "fullTime": true,
+                                "position": "Director, Engineering",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 46,
+                                        "name": "Darrel Solis",
+                                        "reportsTo": 43,
+                                        "phone": "(327) 977-0216",
+                                        "extension": 7779,
+                                        "hireDate": new Date(2015, 4, 25),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 47,
+                                                "name": "Brian Yang",
+                                                "reportsTo": 46,
+                                                "phone": "(565) 146-5435",
+                                                "extension": 3885,
+                                                "hireDate": new Date(2012, 9, 27),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 50,
+                                                "name": "Lillian Bradshaw",
+                                                "reportsTo": 46,
+                                                "phone": "(323) 509-3479",
+                                                "extension": 5426,
+                                                "hireDate": new Date(2014, 5, 10),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 51,
+                                                "name": "Christian Palmer",
+                                                "reportsTo": 46,
+                                                "phone": "(490) 421-8718",
+                                                "extension": 3706,
+                                                "hireDate": new Date(2012, 12, 27),
+                                                "fullTime": false,
+                                                "position": "Technical Lead",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 55,
+                                                "name": "Summer Mosley",
+                                                "reportsTo": 46,
+                                                "phone": "(784) 962-2301",
+                                                "extension": 5492,
+                                                "hireDate": new Date(2010, 3, 2),
+                                                "fullTime": true,
+                                                "position": "QA Engineer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 56,
+                                                "name": "Barry Ayers",
+                                                "reportsTo": 46,
+                                                "phone": "(452) 373-9227",
+                                                "extension": 1308,
+                                                "hireDate": new Date(2011, 10, 11),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 59,
+                                                "name": "Keiko Espinoza",
+                                                "reportsTo": 46,
+                                                "phone": "(226) 600-5305",
+                                                "extension": 9363,
+                                                "hireDate": new Date(2011, 9, 18),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 61,
+                                                "name": "Candace Pickett",
+                                                "reportsTo": 46,
+                                                "phone": "(120) 117-7475",
+                                                "extension": 5178,
+                                                "hireDate": new Date(2010, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 63,
+                                        "name": "Mia Caldwell",
+                                        "reportsTo": 43,
+                                        "phone": "(848) 636-6470",
+                                        "extension": 6368,
+                                        "hireDate": new Date(2012, 10, 7),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 65,
+                                                "name": "Thomas Terry",
+                                                "reportsTo": 63,
+                                                "phone": "(764) 831-4248",
+                                                "extension": 3574,
+                                                "hireDate": new Date(2015, 6, 15),
+                                                "fullTime": false,
+                                                "position": "Senior Enterprise Support Officer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 67,
+                                                "name": "Ruth Downs",
+                                                "reportsTo": 63,
+                                                "phone": "(138) 991-1440",
+                                                "extension": 8067,
+                                                "hireDate": new Date(2013, 7, 13),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 70,
+                                                "name": "Yasir Wilder",
+                                                "reportsTo": 63,
+                                                "phone": "(759) 701-8665",
+                                                "extension": 8350,
+                                                "hireDate": new Date(2010, 11, 8),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 71,
+                                                "name": "Flavia Short",
+                                                "reportsTo": 63,
+                                                "phone": "(370) 133-9238",
+                                                "extension": 6390,
+                                                "hireDate": new Date(2013, 2, 21),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 74,
+                                                "name": "Aaron Roach",
+                                                "reportsTo": 63,
+                                                "phone": "(958) 717-9230",
+                                                "extension": 4899,
+                                                "hireDate": new Date(2011, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 75,
+                                                "name": "Eric Russell",
+                                                "reportsTo": 63,
+                                                "phone": "(516) 575-8505",
+                                                "extension": 2224,
+                                                "hireDate": new Date(2012, 10, 28),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 76,
+                                                "name": "Cheyenne Olson",
+                                                "reportsTo": 63,
+                                                "phone": "(241) 645-0257",
+                                                "extension": 9181,
+                                                "hireDate": new Date(2015, 5, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 77,
+                                                "name": "Shaine Avila",
+                                                "reportsTo": 63,
+                                                "phone": "(844) 435-1360",
+                                                "extension": 3374,
+                                                "hireDate": new Date(2010, 1, 31),
+                                                "fullTime": true,
+                                                "position": "UI Designer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 81,
+                                                "name": "Chantale Long",
+                                                "reportsTo": 63,
+                                                "phone": "(252) 419-6891",
+                                                "extension": 7868,
+                                                "hireDate": new Date(2010, 6, 17),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 83,
+                                                "name": "Dane Cruz",
+                                                "reportsTo": 63,
+                                                "phone": "(946) 701-6165",
+                                                "extension": 3828,
+                                                "hireDate": new Date(2014, 10, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 84,
+                                                "name": "Regan Patterson",
+                                                "reportsTo": 63,
+                                                "phone": "(265) 946-1765",
+                                                "extension": 6955,
+                                                "hireDate": new Date(2012, 3, 1),
+                                                "fullTime": true,
+                                                "position": "Technical Writer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 85,
+                                                "name": "Drew Mckay",
+                                                "reportsTo": 63,
+                                                "phone": "(327) 293-0162",
+                                                "extension": 6904,
+                                                "hireDate": new Date(2011, 3, 25),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 88,
+                                                "name": "Bevis Miller",
+                                                "reportsTo": 63,
+                                                "phone": "(525) 557-0169",
+                                                "extension": 6978,
+                                                "hireDate": new Date(2011, 4, 19),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 89,
+                                                "name": "Bruce Mccarty",
+                                                "reportsTo": 63,
+                                                "phone": "(936) 777-8730",
+                                                "extension": 6552,
+                                                "hireDate": new Date(2014, 3, 28),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 5
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 90,
+                                        "name": "Ocean Blair",
+                                        "reportsTo": 43,
+                                        "phone": "(343) 586-6614",
+                                        "extension": 1424,
+                                        "hireDate": new Date(2011, 4, 27),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 91,
+                                                "name": "Guinevere Osborn",
+                                                "reportsTo": 90,
+                                                "phone": "(424) 741-0006",
+                                                "extension": 3166,
+                                                "hireDate": new Date(2014, 11, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 92,
+                                                "name": "Olga Strong",
+                                                "reportsTo": 90,
+                                                "phone": "(949) 417-1168",
+                                                "extension": 4568,
+                                                "hireDate": new Date(2015, 5, 28),
+                                                "fullTime": true,
+                                                "position": "Graphic Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 93,
+                                                "name": "Robert Orr",
+                                                "reportsTo": 90,
+                                                "phone": "(977) 341-3721",
+                                                "extension": 9241,
+                                                "hireDate": new Date(2012, 8, 20),
+                                                "fullTime": false,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 95,
+                                                "name": "Odette Sears",
+                                                "reportsTo": 90,
+                                                "phone": "(264) 818-6576",
+                                                "extension": 1914,
+                                                "hireDate": new Date(2013, 7, 5),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 45,
+                                "name": "Zelda Medina",
+                                "reportsTo": 32,
+                                "phone": "(563) 359-6023",
+                                "extension": 2600,
+                                "hireDate": new Date(2012, 11, 6),
+                                "fullTime": true,
+                                "position": "QA Architect",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    },
+                    {
+                        "id": 52,
+                        "name": "Skyler Cleveland",
+                        "reportsTo": 2,
+                        "phone": "(217) 280-5300",
+                        "extension": 9655,
+                        "hireDate": new Date(2014, 11, 10),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 40,
+                                "name": "Karleigh Garza",
+                                "reportsTo": 52,
+                                "phone": "(370) 983-8796",
+                                "extension": 4044,
+                                "hireDate": new Date(2014, 3, 10),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 49,
+                                        "name": "Elmo Tyson",
+                                        "reportsTo": 40,
+                                        "phone": "(344) 496-9555",
+                                        "extension": 6950,
+                                        "hireDate": new Date(2014, 9, 18),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 72,
+                                        "name": "Stacey Lynn",
+                                        "reportsTo": 40,
+                                        "phone": "(140) 772-7509",
+                                        "extension": 8396,
+                                        "hireDate": new Date(2014, 7, 31),
+                                        "fullTime": false,
+                                        "position": "QA Engineer",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 80,
+                                                "name": "Meredith Parrish",
+                                                "reportsTo": 72,
+                                                "phone": "(714) 284-2408",
+                                                "extension": 7675,
+                                                "hireDate": new Date(2012, 11, 13),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 96,
+                                        "name": "Cassady Whitley",
+                                        "reportsTo": 40,
+                                        "phone": "(996) 587-8405",
+                                        "extension": 780,
+                                        "hireDate": new Date(2013, 5, 7),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 5
+                                    },
+                                    {
+                                        "id": 97,
+                                        "name": "Haviva Campbell",
+                                        "reportsTo": 40,
+                                        "phone": "(263) 887-4689",
+                                        "extension": 2808,
+                                        "hireDate": new Date(2013, 3, 5),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 98,
+                                        "name": "Cameron Ayers",
+                                        "reportsTo": 40,
+                                        "phone": "(470) 709-8030",
+                                        "extension": 2893,
+                                        "hireDate": new Date(2013, 8, 28),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 99,
+                                        "name": "Martha Sargent",
+                                        "reportsTo": 40,
+                                        "phone": "(587) 812-4418",
+                                        "extension": 5099,
+                                        "hireDate": new Date(2014, 2, 27),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 100,
+                                        "name": "Darrel Kinney",
+                                        "reportsTo": 40,
+                                        "phone": "(888) 483-9606",
+                                        "extension": 4779,
+                                        "hireDate": new Date(2014, 3, 24),
+                                        "fullTime": false,
+                                        "position": "Graphic Designer",
+                                        "timeInPosition": 1
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 54,
+                                "name": "Kuame Frye",
+                                "reportsTo": 52,
+                                "phone": "(360) 721-5886",
+                                "extension": 2730,
+                                "hireDate": new Date(2010, 11, 17),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 64,
+                                        "name": "Ori Wynn",
+                                        "reportsTo": 54,
+                                        "phone": "(366) 342-0166",
+                                        "extension": 7252,
+                                        "hireDate": new Date(2015, 6, 21),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 0,
+                                        "employees": [
+                                            {
+                                                "id": 6,
+                                                "name": "Moses Duncan",
+                                                "reportsTo": 64,
+                                                "phone": "(421) 611-4814",
+                                                "extension": 669,
+                                                "hireDate": new Date(2010, 5, 24),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 12,
+                                                "name": "Jamalia Wallace",
+                                                "reportsTo": 64,
+                                                "phone": "(611) 391-8016",
+                                                "extension": 1952,
+                                                "hireDate": new Date(2011, 9, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Designer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 62,
+                                                "name": "Palmer Gregory",
+                                                "reportsTo": 64,
+                                                "phone": "(360) 430-2505",
+                                                "extension": 4337,
+                                                "hireDate": new Date(2014, 8, 30),
+                                                "fullTime": true,
+                                                "position": "Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 68,
+                                                "name": "Mallory Gilliam",
+                                                "reportsTo": 64,
+                                                "phone": "(878) 423-2971",
+                                                "extension": 1341,
+                                                "hireDate": new Date(2014, 7, 24),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 73,
+                                                "name": "Ima Hughes",
+                                                "reportsTo": 64,
+                                                "phone": "(905) 485-8001",
+                                                "extension": 1273,
+                                                "hireDate": new Date(2013, 6, 3),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 79,
+                                                "name": "Duncan Mathews",
+                                                "reportsTo": 64,
+                                                "phone": "(790) 971-9709",
+                                                "extension": 4573,
+                                                "hireDate": new Date(2011, 8, 21),
+                                                "fullTime": false,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 69,
+                                "name": "Sierra Beasley",
+                                "reportsTo": 52,
+                                "phone": "(271) 953-1968",
+                                "extension": 3324,
+                                "hireDate": new Date(2011, 4, 2),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 3,
+                                "employees": [
+                                    {
+                                        "id": 38,
+                                        "name": "Elton Tucker",
+                                        "reportsTo": 69,
+                                        "phone": "(988) 930-9331",
+                                        "extension": 9216,
+                                        "hireDate": new Date(2015, 6, 4),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 1
+                                    },
+                                    {
+                                        "id": 39,
+                                        "name": "Iona Brennan",
+                                        "reportsTo": 69,
+                                        "phone": "(356) 563-0600",
+                                        "extension": 5634,
+                                        "hireDate": new Date(2010, 9, 23),
+                                        "fullTime": true,
+                                        "position": "Junior Support Officer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 53,
+                                        "name": "Paul Campos",
+                                        "reportsTo": 69,
+                                        "phone": "(899) 205-1689",
+                                        "extension": 8586,
+                                        "hireDate": new Date(2011, 3, 17),
+                                        "fullTime": true,
+                                        "position": "Interaction Designer",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 66,
+                                                "name": "Gloria Freeman",
+                                                "reportsTo": 53,
+                                                "phone": "(344) 950-9168",
+                                                "extension": 4738,
+                                                "hireDate": new Date(2013, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Junior Interaction Designer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 57,
+                                        "name": "Alyssa Hansen",
+                                        "reportsTo": 69,
+                                        "phone": "(548) 925-4799",
+                                        "extension": 4716,
+                                        "hireDate": new Date(2011, 1, 19),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 82,
+                                        "name": "Yael Walters",
+                                        "reportsTo": 69,
+                                        "phone": "(311) 489-8191",
+                                        "extension": 6520,
+                                        "hireDate": new Date(2013, 7, 4),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 87,
+                                        "name": "Dahlia Hunt",
+                                        "reportsTo": 69,
+                                        "phone": "(720) 339-5202",
+                                        "extension": 3690,
+                                        "hireDate": new Date(2011, 3, 26),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 94,
+                                        "name": "Adria Stanley",
+                                        "reportsTo": 69,
+                                        "phone": "(536) 357-6391",
+                                        "extension": 3374,
+                                        "hireDate": new Date(2014, 7, 26),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "Priscilla Frank",
+                "reportsTo": 1,
+                "phone": "(278) 927-2684",
+                "extension": 4183,
+                "hireDate": new Date(2014, 11, 30),
+                "fullTime": true,
+                "position": "Chief Product Officer",
+                "timeInPosition": 2,
+                "employees": [
+                    {
+                        "id": 4,
+                        "name": "Ursula Holmes",
+                        "reportsTo": 3,
+                        "phone": "(302) 760-2034",
+                        "extension": 2226,
+                        "hireDate": new Date(2011, 6, 6),
+                        "fullTime": true,
+                        "position": "EVP, Product Strategy",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 24,
+                        "name": "Melvin Carrillo",
+                        "reportsTo": 3,
+                        "phone": "(348) 933-5167",
+                        "extension": 2482,
+                        "hireDate": new Date(2014, 7, 21),
+                        "fullTime": true,
+                        "position": "Director, Developer Relations",
+                        "timeInPosition": 6,
+                        "employees": [
+                            {
+                                "id": 29,
+                                "name": "Martha Chavez",
+                                "reportsTo": 24,
+                                "phone": "(860) 754-3464",
+                                "extension": 4531,
+                                "hireDate": new Date(2013, 3, 12),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 30,
+                                "name": "Oren Fox",
+                                "reportsTo": 24,
+                                "phone": "(572) 414-3299",
+                                "extension": 4849,
+                                "hireDate": new Date(2013, 5, 14),
+                                "fullTime": false,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 41,
+                                "name": "Amos Barr",
+                                "reportsTo": 24,
+                                "phone": "(470) 381-3718",
+                                "extension": 7643,
+                                "hireDate": new Date(2010, 3, 9),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "Anika Vega",
+                "reportsTo": 1,
+                "phone": "(910) 714-1802",
+                "extension": 6353,
+                "hireDate": new Date(2010, 2, 25),
+                "fullTime": true,
+                "position": "Chief Process Officer",
+                "timeInPosition": 5,
+                "employees": [
+                    {
+                        "id": 10,
+                        "name": "Vernon Ballard",
+                        "reportsTo": 5,
+                        "phone": "(702) 185-8890",
+                        "extension": 9242,
+                        "hireDate": new Date(2015, 6, 26),
+                        "fullTime": true,
+                        "position": "Director Facilities",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 16,
+                                "name": "Ali Guy",
+                                "reportsTo": 10,
+                                "phone": "(429) 912-6578",
+                                "extension": 2225,
+                                "hireDate": new Date(2014, 6, 29),
+                                "fullTime": true,
+                                "position": "Operations Manager",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 23,
+                                        "name": "Bruce Reilly",
+                                        "reportsTo": 16,
+                                        "phone": "(995) 243-7302",
+                                        "extension": 4815,
+                                        "hireDate": new Date(2015, 4, 1),
+                                        "fullTime": true,
+                                        "position": "Head of Security",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 26,
+                                                "name": "Rowan Morin",
+                                                "reportsTo": 23,
+                                                "phone": "(792) 141-4374",
+                                                "extension": 1844,
+                                                "hireDate": new Date(2015, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Building Security",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 44,
+                                                "name": "Benedict Soto",
+                                                "reportsTo": 23,
+                                                "phone": "(822) 282-5991",
+                                                "extension": 6422,
+                                                "hireDate": new Date(2012, 6, 1),
+                                                "fullTime": false,
+                                                "position": "Building Security",
+                                                "timeInPosition": 4
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 48,
+                                        "name": "Maryam Rios",
+                                        "reportsTo": 16,
+                                        "phone": "(673) 764-6720",
+                                        "extension": 531,
+                                        "hireDate": new Date(2014, 3, 3),
+                                        "fullTime": true,
+                                        "position": "Team Lead, Personal Assistants",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 58,
+                                                "name": "Rose Mcintyre",
+                                                "reportsTo": 48,
+                                                "phone": "(771) 615-4590",
+                                                "extension": 7094,
+                                                "hireDate": new Date(2015, 6, 30),
+                                                "fullTime": false,
+                                                "position": "Personal Assistant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "Nevada Hart",
+                "reportsTo": 1,
+                "phone": "(254) 220-1576",
+                "extension": 6649,
+                "hireDate": new Date(2015, 8, 17),
+                "fullTime": true,
+                "position": "Chief Financial Officer",
+                "timeInPosition": 6,
+                "employees": [
+                    {
+                        "id": 14,
+                        "name": "Zena Sanford",
+                        "reportsTo": 7,
+                        "phone": "(437) 568-8160",
+                        "extension": 4452,
+                        "hireDate": new Date(2010, 11, 30),
+                        "fullTime": true,
+                        "position": "VP, Finance",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 15,
+                        "name": "Quinlan Howe",
+                        "reportsTo": 7,
+                        "phone": "(464) 334-9748",
+                        "extension": 8722,
+                        "hireDate": new Date(2011, 6, 9),
+                        "fullTime": false,
+                        "position": "Senior Director, Finance",
+                        "timeInPosition": 0,
+                        "employees": [
+                            {
+                                "id": 17,
+                                "name": "Indira Lopez",
+                                "reportsTo": 15,
+                                "phone": "(301) 368-0938",
+                                "extension": 8027,
+                                "hireDate": new Date(2013, 8, 18),
+                                "fullTime": true,
+                                "position": "ERP Team Lead",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 18,
+                                        "name": "Lareina Lara",
+                                        "reportsTo": 17,
+                                        "phone": "(233) 457-7482",
+                                        "extension": 1996,
+                                        "hireDate": new Date(2010, 4, 30),
+                                        "fullTime": true,
+                                        "position": "ERP Solutions Consultant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 19,
+                                        "name": "Maxwell Wise",
+                                        "reportsTo": 17,
+                                        "phone": "(570) 494-2531",
+                                        "extension": 9865,
+                                        "hireDate": new Date(2012, 5, 19),
+                                        "fullTime": true,
+                                        "position": "Systems Engineer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 20,
+                                "name": "Hunter Mcbride",
+                                "reportsTo": 15,
+                                "phone": "(409) 442-7016",
+                                "extension": 4284,
+                                "hireDate": new Date(2012, 10, 20),
+                                "fullTime": true,
+                                "position": "Senior Director, Tax",
+                                "timeInPosition": 3
+                            },
+                            {
+                                "id": 21,
+                                "name": "Jana Serrano",
+                                "reportsTo": 15,
+                                "phone": "(910) 718-4620",
+                                "extension": 6970,
+                                "hireDate": new Date(2010, 4, 2),
+                                "fullTime": true,
+                                "position": "Financial Planning & Analysis Manager",
+                                "timeInPosition": 2
+                            },
+                            {
+                                "id": 22,
+                                "name": "Zachery Shelton",
+                                "reportsTo": 15,
+                                "phone": "(310) 240-8675",
+                                "extension": 4527,
+                                "hireDate": new Date(2011, 11, 23),
+                                "fullTime": false,
+                                "position": "Corporate Finance Controller",
+                                "timeInPosition": 6,
+                                "employees": [
+                                    {
+                                        "id": 28,
+                                        "name": "Cullen Freeman",
+                                        "reportsTo": 22,
+                                        "phone": "(136) 554-8814",
+                                        "extension": 9861,
+                                        "hireDate": new Date(2014, 3, 15),
+                                        "fullTime": true,
+                                        "position": "Treasurer Accountant",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 31,
+                                        "name": "Quinn Dean",
+                                        "reportsTo": 22,
+                                        "phone": "(152) 613-3507",
+                                        "extension": 6621,
+                                        "hireDate": new Date(2015, 1, 29),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 34,
+                                        "name": "Samantha Brady",
+                                        "reportsTo": 22,
+                                        "phone": "(206) 398-4328",
+                                        "extension": 1157,
+                                        "hireDate": new Date(2011, 2, 13),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 35,
+                                                "name": "Tamara Green",
+                                                "reportsTo": 34,
+                                                "phone": "(219) 248-2789",
+                                                "extension": 4880,
+                                                "hireDate": new Date(2014, 2, 4),
+                                                "fullTime": true,
+                                                "position": "Junior Accountant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 36,
+                                        "name": "Olympia Coleman",
+                                        "reportsTo": 22,
+                                        "phone": "(944) 853-6383",
+                                        "extension": 2136,
+                                        "hireDate": new Date(2013, 7, 31),
+                                        "fullTime": true,
+                                        "position": "Collections Manager",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 37,
+                                        "name": "Breanna Goodwin",
+                                        "reportsTo": 22,
+                                        "phone": "(379) 988-9630",
+                                        "extension": 5898,
+                                        "hireDate": new Date(2010, 5, 23),
+                                        "fullTime": false,
+                                        "position": "Payroll Specialist",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 27,
+                                "name": "Curran Travis",
+                                "reportsTo": 15,
+                                "phone": "(438) 135-8033",
+                                "extension": 3841,
+                                "hireDate": new Date(2011, 6, 13),
+                                "fullTime": true,
+                                "position": "Finance Controller",
+                                "timeInPosition": 5
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "Hunter Fry",
+                "reportsTo": 1,
+                "phone": "(766) 358-9858",
+                "extension": 3741,
+                "hireDate": new Date(2011, 2, 12),
+                "fullTime": false,
+                "position": "General Counsel",
+                "timeInPosition": 3,
+                "employees": [
+                    {
+                        "id": 9,
+                        "name": "Kuame Carrillo",
+                        "reportsTo": 8,
+                        "phone": "(192) 383-1305",
+                        "extension": 9228,
+                        "hireDate": new Date(2011, 2, 22),
+                        "fullTime": true,
+                        "position": "Associate General Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 13,
+                        "name": "Stacy Todd",
+                        "reportsTo": 8,
+                        "phone": "(925) 286-3327",
+                        "extension": 8565,
+                        "hireDate": new Date(2014, 7, 5),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 33,
+                        "name": "Valentine Wyatt",
+                        "reportsTo": 8,
+                        "phone": "(165) 166-6205",
+                        "extension": 3588,
+                        "hireDate": new Date(2015, 5, 21),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 5
+                    },
+                    {
+                        "id": 86,
+                        "name": "Daniel Mccarthy",
+                        "reportsTo": 8,
+                        "phone": "(624) 483-6206",
+                        "extension": 9112,
+                        "hireDate": new Date(2013, 12, 3),
+                        "fullTime": false,
+                        "position": "Staff Attorney",
+                        "timeInPosition": 0
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default employees;
diff --git a/vue-options-api-demos/treelist/excel/single-page/main.js b/vue-options-api-demos/treelist/excel/single-page/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/excel/single-page/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/excel/single-page/main.vue b/vue-options-api-demos/treelist/excel/single-page/main.vue
new file mode 100644
index 00000000..7b7dea10
--- /dev/null
+++ b/vue-options-api-demos/treelist/excel/single-page/main.vue
@@ -0,0 +1,115 @@
+<template>
+  <TreeList
+    :style="{
+      maxHeight: '510px',
+      overflow: 'auto',
+    }"
+    :expand-field="expandField"
+    :sub-items-field="subItemsField"
+    :data-items="processedData"
+    :columns="columns"
+    @expandchange="onExpandChange"
+    @pagechange="onPageChange"
+    :skip="skip"
+    :take="take"
+    :pageable="true"
+    :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],
+      skip: 0,
+      take: 8,
+      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: {
+    onPageChange(event) {
+      const { skip, take } = event;
+      this.skip = skip;
+      this.take = take;
+    },
+    exportExcel() {
+      saveExcel({
+        fileName: 'myFile',
+        data: treeToFlat(
+          this.processedData,
+          this.expandField,
+          this.subItemsField
+        ).slice(this.skip, this.skip + this.take),
+        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>
diff --git a/vue-options-api-demos/treelist/filtering-basic/data.js b/vue-options-api-demos/treelist/filtering-basic/data.js
new file mode 100644
index 00000000..f66aec4d
--- /dev/null
+++ b/vue-options-api-demos/treelist/filtering-basic/data.js
@@ -0,0 +1,1150 @@
+
+const employees = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2,
+        "employees": [
+            {
+                "id": 2,
+                "name": "Guy Wooten",
+                "reportsTo": 1,
+                "phone": "(438) 738-4935",
+                "extension": 1155,
+                "hireDate": new Date(2010, 3, 3),
+                "fullTime": true,
+                "position": "Chief Technical Officer",
+                "timeInPosition": 1,
+                "employees": [
+                    {
+                        "id": 32,
+                        "name": "Buffy Weber",
+                        "reportsTo": 2,
+                        "phone": "(699) 838-6121",
+                        "extension": 8933,
+                        "hireDate": new Date(2011, 7, 11),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 11,
+                                "name": "Hyacinth Hood",
+                                "reportsTo": 32,
+                                "phone": "(889) 345-2438",
+                                "extension": 8564,
+                                "hireDate": new Date(2014, 2, 3),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 60,
+                                        "name": "Akeem Carr",
+                                        "reportsTo": 11,
+                                        "phone": "(738) 136-2814",
+                                        "extension": 9353,
+                                        "hireDate": new Date(2011, 4, 21),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 78,
+                                        "name": "Rinah Simon",
+                                        "reportsTo": 11,
+                                        "phone": "(285) 912-5271",
+                                        "extension": 7795,
+                                        "hireDate": new Date(2012, 10, 11),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 42,
+                                "name": "Gage Daniels",
+                                "reportsTo": 32,
+                                "phone": "(107) 290-6260",
+                                "extension": 896,
+                                "hireDate": new Date(2013, 5, 16),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 5
+                            },
+                            {
+                                "id": 43,
+                                "name": "Constance Vazquez",
+                                "reportsTo": 32,
+                                "phone": "(800) 301-1978",
+                                "extension": 5141,
+                                "hireDate": new Date(2011, 6, 7),
+                                "fullTime": true,
+                                "position": "Director, Engineering",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 46,
+                                        "name": "Darrel Solis",
+                                        "reportsTo": 43,
+                                        "phone": "(327) 977-0216",
+                                        "extension": 7779,
+                                        "hireDate": new Date(2015, 4, 25),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 47,
+                                                "name": "Brian Yang",
+                                                "reportsTo": 46,
+                                                "phone": "(565) 146-5435",
+                                                "extension": 3885,
+                                                "hireDate": new Date(2012, 9, 27),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 50,
+                                                "name": "Lillian Bradshaw",
+                                                "reportsTo": 46,
+                                                "phone": "(323) 509-3479",
+                                                "extension": 5426,
+                                                "hireDate": new Date(2014, 5, 10),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 51,
+                                                "name": "Christian Palmer",
+                                                "reportsTo": 46,
+                                                "phone": "(490) 421-8718",
+                                                "extension": 3706,
+                                                "hireDate": new Date(2012, 12, 27),
+                                                "fullTime": false,
+                                                "position": "Technical Lead",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 55,
+                                                "name": "Summer Mosley",
+                                                "reportsTo": 46,
+                                                "phone": "(784) 962-2301",
+                                                "extension": 5492,
+                                                "hireDate": new Date(2010, 3, 2),
+                                                "fullTime": true,
+                                                "position": "QA Engineer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 56,
+                                                "name": "Barry Ayers",
+                                                "reportsTo": 46,
+                                                "phone": "(452) 373-9227",
+                                                "extension": 1308,
+                                                "hireDate": new Date(2011, 10, 11),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 59,
+                                                "name": "Keiko Espinoza",
+                                                "reportsTo": 46,
+                                                "phone": "(226) 600-5305",
+                                                "extension": 9363,
+                                                "hireDate": new Date(2011, 9, 18),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 61,
+                                                "name": "Candace Pickett",
+                                                "reportsTo": 46,
+                                                "phone": "(120) 117-7475",
+                                                "extension": 5178,
+                                                "hireDate": new Date(2010, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 63,
+                                        "name": "Mia Caldwell",
+                                        "reportsTo": 43,
+                                        "phone": "(848) 636-6470",
+                                        "extension": 6368,
+                                        "hireDate": new Date(2012, 10, 7),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 65,
+                                                "name": "Thomas Terry",
+                                                "reportsTo": 63,
+                                                "phone": "(764) 831-4248",
+                                                "extension": 3574,
+                                                "hireDate": new Date(2015, 6, 15),
+                                                "fullTime": false,
+                                                "position": "Senior Enterprise Support Officer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 67,
+                                                "name": "Ruth Downs",
+                                                "reportsTo": 63,
+                                                "phone": "(138) 991-1440",
+                                                "extension": 8067,
+                                                "hireDate": new Date(2013, 7, 13),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 70,
+                                                "name": "Yasir Wilder",
+                                                "reportsTo": 63,
+                                                "phone": "(759) 701-8665",
+                                                "extension": 8350,
+                                                "hireDate": new Date(2010, 11, 8),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 71,
+                                                "name": "Flavia Short",
+                                                "reportsTo": 63,
+                                                "phone": "(370) 133-9238",
+                                                "extension": 6390,
+                                                "hireDate": new Date(2013, 2, 21),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 74,
+                                                "name": "Aaron Roach",
+                                                "reportsTo": 63,
+                                                "phone": "(958) 717-9230",
+                                                "extension": 4899,
+                                                "hireDate": new Date(2011, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 75,
+                                                "name": "Eric Russell",
+                                                "reportsTo": 63,
+                                                "phone": "(516) 575-8505",
+                                                "extension": 2224,
+                                                "hireDate": new Date(2012, 10, 28),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 76,
+                                                "name": "Cheyenne Olson",
+                                                "reportsTo": 63,
+                                                "phone": "(241) 645-0257",
+                                                "extension": 9181,
+                                                "hireDate": new Date(2015, 5, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 77,
+                                                "name": "Shaine Avila",
+                                                "reportsTo": 63,
+                                                "phone": "(844) 435-1360",
+                                                "extension": 3374,
+                                                "hireDate": new Date(2010, 1, 31),
+                                                "fullTime": true,
+                                                "position": "UI Designer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 81,
+                                                "name": "Chantale Long",
+                                                "reportsTo": 63,
+                                                "phone": "(252) 419-6891",
+                                                "extension": 7868,
+                                                "hireDate": new Date(2010, 6, 17),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 83,
+                                                "name": "Dane Cruz",
+                                                "reportsTo": 63,
+                                                "phone": "(946) 701-6165",
+                                                "extension": 3828,
+                                                "hireDate": new Date(2014, 10, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 84,
+                                                "name": "Regan Patterson",
+                                                "reportsTo": 63,
+                                                "phone": "(265) 946-1765",
+                                                "extension": 6955,
+                                                "hireDate": new Date(2012, 3, 1),
+                                                "fullTime": true,
+                                                "position": "Technical Writer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 85,
+                                                "name": "Drew Mckay",
+                                                "reportsTo": 63,
+                                                "phone": "(327) 293-0162",
+                                                "extension": 6904,
+                                                "hireDate": new Date(2011, 3, 25),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 88,
+                                                "name": "Bevis Miller",
+                                                "reportsTo": 63,
+                                                "phone": "(525) 557-0169",
+                                                "extension": 6978,
+                                                "hireDate": new Date(2011, 4, 19),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 89,
+                                                "name": "Bruce Mccarty",
+                                                "reportsTo": 63,
+                                                "phone": "(936) 777-8730",
+                                                "extension": 6552,
+                                                "hireDate": new Date(2014, 3, 28),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 5
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 90,
+                                        "name": "Ocean Blair",
+                                        "reportsTo": 43,
+                                        "phone": "(343) 586-6614",
+                                        "extension": 1424,
+                                        "hireDate": new Date(2011, 4, 27),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 91,
+                                                "name": "Guinevere Osborn",
+                                                "reportsTo": 90,
+                                                "phone": "(424) 741-0006",
+                                                "extension": 3166,
+                                                "hireDate": new Date(2014, 11, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 92,
+                                                "name": "Olga Strong",
+                                                "reportsTo": 90,
+                                                "phone": "(949) 417-1168",
+                                                "extension": 4568,
+                                                "hireDate": new Date(2015, 5, 28),
+                                                "fullTime": true,
+                                                "position": "Graphic Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 93,
+                                                "name": "Robert Orr",
+                                                "reportsTo": 90,
+                                                "phone": "(977) 341-3721",
+                                                "extension": 9241,
+                                                "hireDate": new Date(2012, 8, 20),
+                                                "fullTime": false,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 95,
+                                                "name": "Odette Sears",
+                                                "reportsTo": 90,
+                                                "phone": "(264) 818-6576",
+                                                "extension": 1914,
+                                                "hireDate": new Date(2013, 7, 5),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 45,
+                                "name": "Zelda Medina",
+                                "reportsTo": 32,
+                                "phone": "(563) 359-6023",
+                                "extension": 2600,
+                                "hireDate": new Date(2012, 11, 6),
+                                "fullTime": true,
+                                "position": "QA Architect",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    },
+                    {
+                        "id": 52,
+                        "name": "Skyler Cleveland",
+                        "reportsTo": 2,
+                        "phone": "(217) 280-5300",
+                        "extension": 9655,
+                        "hireDate": new Date(2014, 11, 10),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 40,
+                                "name": "Karleigh Garza",
+                                "reportsTo": 52,
+                                "phone": "(370) 983-8796",
+                                "extension": 4044,
+                                "hireDate": new Date(2014, 3, 10),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 49,
+                                        "name": "Elmo Tyson",
+                                        "reportsTo": 40,
+                                        "phone": "(344) 496-9555",
+                                        "extension": 6950,
+                                        "hireDate": new Date(2014, 9, 18),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 72,
+                                        "name": "Stacey Lynn",
+                                        "reportsTo": 40,
+                                        "phone": "(140) 772-7509",
+                                        "extension": 8396,
+                                        "hireDate": new Date(2014, 7, 31),
+                                        "fullTime": false,
+                                        "position": "QA Engineer",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 80,
+                                                "name": "Meredith Parrish",
+                                                "reportsTo": 72,
+                                                "phone": "(714) 284-2408",
+                                                "extension": 7675,
+                                                "hireDate": new Date(2012, 11, 13),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 96,
+                                        "name": "Cassady Whitley",
+                                        "reportsTo": 40,
+                                        "phone": "(996) 587-8405",
+                                        "extension": 780,
+                                        "hireDate": new Date(2013, 5, 7),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 5
+                                    },
+                                    {
+                                        "id": 97,
+                                        "name": "Haviva Campbell",
+                                        "reportsTo": 40,
+                                        "phone": "(263) 887-4689",
+                                        "extension": 2808,
+                                        "hireDate": new Date(2013, 3, 5),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 98,
+                                        "name": "Cameron Ayers",
+                                        "reportsTo": 40,
+                                        "phone": "(470) 709-8030",
+                                        "extension": 2893,
+                                        "hireDate": new Date(2013, 8, 28),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 99,
+                                        "name": "Martha Sargent",
+                                        "reportsTo": 40,
+                                        "phone": "(587) 812-4418",
+                                        "extension": 5099,
+                                        "hireDate": new Date(2014, 2, 27),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 100,
+                                        "name": "Darrel Kinney",
+                                        "reportsTo": 40,
+                                        "phone": "(888) 483-9606",
+                                        "extension": 4779,
+                                        "hireDate": new Date(2014, 3, 24),
+                                        "fullTime": false,
+                                        "position": "Graphic Designer",
+                                        "timeInPosition": 1
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 54,
+                                "name": "Kuame Frye",
+                                "reportsTo": 52,
+                                "phone": "(360) 721-5886",
+                                "extension": 2730,
+                                "hireDate": new Date(2010, 11, 17),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 64,
+                                        "name": "Ori Wynn",
+                                        "reportsTo": 54,
+                                        "phone": "(366) 342-0166",
+                                        "extension": 7252,
+                                        "hireDate": new Date(2015, 6, 21),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 0,
+                                        "employees": [
+                                            {
+                                                "id": 6,
+                                                "name": "Moses Duncan",
+                                                "reportsTo": 64,
+                                                "phone": "(421) 611-4814",
+                                                "extension": 669,
+                                                "hireDate": new Date(2010, 5, 24),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 12,
+                                                "name": "Jamalia Wallace",
+                                                "reportsTo": 64,
+                                                "phone": "(611) 391-8016",
+                                                "extension": 1952,
+                                                "hireDate": new Date(2011, 9, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Designer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 62,
+                                                "name": "Palmer Gregory",
+                                                "reportsTo": 64,
+                                                "phone": "(360) 430-2505",
+                                                "extension": 4337,
+                                                "hireDate": new Date(2014, 8, 30),
+                                                "fullTime": true,
+                                                "position": "Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 68,
+                                                "name": "Mallory Gilliam",
+                                                "reportsTo": 64,
+                                                "phone": "(878) 423-2971",
+                                                "extension": 1341,
+                                                "hireDate": new Date(2014, 7, 24),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 73,
+                                                "name": "Ima Hughes",
+                                                "reportsTo": 64,
+                                                "phone": "(905) 485-8001",
+                                                "extension": 1273,
+                                                "hireDate": new Date(2013, 6, 3),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 79,
+                                                "name": "Duncan Mathews",
+                                                "reportsTo": 64,
+                                                "phone": "(790) 971-9709",
+                                                "extension": 4573,
+                                                "hireDate": new Date(2011, 8, 21),
+                                                "fullTime": false,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 69,
+                                "name": "Sierra Beasley",
+                                "reportsTo": 52,
+                                "phone": "(271) 953-1968",
+                                "extension": 3324,
+                                "hireDate": new Date(2011, 4, 2),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 3,
+                                "employees": [
+                                    {
+                                        "id": 38,
+                                        "name": "Elton Tucker",
+                                        "reportsTo": 69,
+                                        "phone": "(988) 930-9331",
+                                        "extension": 9216,
+                                        "hireDate": new Date(2015, 6, 4),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 1
+                                    },
+                                    {
+                                        "id": 39,
+                                        "name": "Iona Brennan",
+                                        "reportsTo": 69,
+                                        "phone": "(356) 563-0600",
+                                        "extension": 5634,
+                                        "hireDate": new Date(2010, 9, 23),
+                                        "fullTime": true,
+                                        "position": "Junior Support Officer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 53,
+                                        "name": "Paul Campos",
+                                        "reportsTo": 69,
+                                        "phone": "(899) 205-1689",
+                                        "extension": 8586,
+                                        "hireDate": new Date(2011, 3, 17),
+                                        "fullTime": true,
+                                        "position": "Interaction Designer",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 66,
+                                                "name": "Gloria Freeman",
+                                                "reportsTo": 53,
+                                                "phone": "(344) 950-9168",
+                                                "extension": 4738,
+                                                "hireDate": new Date(2013, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Junior Interaction Designer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 57,
+                                        "name": "Alyssa Hansen",
+                                        "reportsTo": 69,
+                                        "phone": "(548) 925-4799",
+                                        "extension": 4716,
+                                        "hireDate": new Date(2011, 1, 19),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 82,
+                                        "name": "Yael Walters",
+                                        "reportsTo": 69,
+                                        "phone": "(311) 489-8191",
+                                        "extension": 6520,
+                                        "hireDate": new Date(2013, 7, 4),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 87,
+                                        "name": "Dahlia Hunt",
+                                        "reportsTo": 69,
+                                        "phone": "(720) 339-5202",
+                                        "extension": 3690,
+                                        "hireDate": new Date(2011, 3, 26),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 94,
+                                        "name": "Adria Stanley",
+                                        "reportsTo": 69,
+                                        "phone": "(536) 357-6391",
+                                        "extension": 3374,
+                                        "hireDate": new Date(2014, 7, 26),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "Priscilla Frank",
+                "reportsTo": 1,
+                "phone": "(278) 927-2684",
+                "extension": 4183,
+                "hireDate": new Date(2014, 11, 30),
+                "fullTime": true,
+                "position": "Chief Product Officer",
+                "timeInPosition": 2,
+                "employees": [
+                    {
+                        "id": 4,
+                        "name": "Ursula Holmes",
+                        "reportsTo": 3,
+                        "phone": "(302) 760-2034",
+                        "extension": 2226,
+                        "hireDate": new Date(2011, 6, 6),
+                        "fullTime": true,
+                        "position": "EVP, Product Strategy",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 24,
+                        "name": "Melvin Carrillo",
+                        "reportsTo": 3,
+                        "phone": "(348) 933-5167",
+                        "extension": 2482,
+                        "hireDate": new Date(2014, 7, 21),
+                        "fullTime": true,
+                        "position": "Director, Developer Relations",
+                        "timeInPosition": 6,
+                        "employees": [
+                            {
+                                "id": 29,
+                                "name": "Martha Chavez",
+                                "reportsTo": 24,
+                                "phone": "(860) 754-3464",
+                                "extension": 4531,
+                                "hireDate": new Date(2013, 3, 12),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 30,
+                                "name": "Oren Fox",
+                                "reportsTo": 24,
+                                "phone": "(572) 414-3299",
+                                "extension": 4849,
+                                "hireDate": new Date(2013, 5, 14),
+                                "fullTime": false,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 41,
+                                "name": "Amos Barr",
+                                "reportsTo": 24,
+                                "phone": "(470) 381-3718",
+                                "extension": 7643,
+                                "hireDate": new Date(2010, 3, 9),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "Anika Vega",
+                "reportsTo": 1,
+                "phone": "(910) 714-1802",
+                "extension": 6353,
+                "hireDate": new Date(2010, 2, 25),
+                "fullTime": true,
+                "position": "Chief Process Officer",
+                "timeInPosition": 5,
+                "employees": [
+                    {
+                        "id": 10,
+                        "name": "Vernon Ballard",
+                        "reportsTo": 5,
+                        "phone": "(702) 185-8890",
+                        "extension": 9242,
+                        "hireDate": new Date(2015, 6, 26),
+                        "fullTime": true,
+                        "position": "Director Facilities",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 16,
+                                "name": "Ali Guy",
+                                "reportsTo": 10,
+                                "phone": "(429) 912-6578",
+                                "extension": 2225,
+                                "hireDate": new Date(2014, 6, 29),
+                                "fullTime": true,
+                                "position": "Operations Manager",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 23,
+                                        "name": "Bruce Reilly",
+                                        "reportsTo": 16,
+                                        "phone": "(995) 243-7302",
+                                        "extension": 4815,
+                                        "hireDate": new Date(2015, 4, 1),
+                                        "fullTime": true,
+                                        "position": "Head of Security",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 26,
+                                                "name": "Rowan Morin",
+                                                "reportsTo": 23,
+                                                "phone": "(792) 141-4374",
+                                                "extension": 1844,
+                                                "hireDate": new Date(2015, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Building Security",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 44,
+                                                "name": "Benedict Soto",
+                                                "reportsTo": 23,
+                                                "phone": "(822) 282-5991",
+                                                "extension": 6422,
+                                                "hireDate": new Date(2012, 6, 1),
+                                                "fullTime": false,
+                                                "position": "Building Security",
+                                                "timeInPosition": 4
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 48,
+                                        "name": "Maryam Rios",
+                                        "reportsTo": 16,
+                                        "phone": "(673) 764-6720",
+                                        "extension": 531,
+                                        "hireDate": new Date(2014, 3, 3),
+                                        "fullTime": true,
+                                        "position": "Team Lead, Personal Assistants",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 58,
+                                                "name": "Rose Mcintyre",
+                                                "reportsTo": 48,
+                                                "phone": "(771) 615-4590",
+                                                "extension": 7094,
+                                                "hireDate": new Date(2015, 6, 30),
+                                                "fullTime": false,
+                                                "position": "Personal Assistant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "Nevada Hart",
+                "reportsTo": 1,
+                "phone": "(254) 220-1576",
+                "extension": 6649,
+                "hireDate": new Date(2015, 8, 17),
+                "fullTime": true,
+                "position": "Chief Financial Officer",
+                "timeInPosition": 6,
+                "employees": [
+                    {
+                        "id": 14,
+                        "name": "Zena Sanford",
+                        "reportsTo": 7,
+                        "phone": "(437) 568-8160",
+                        "extension": 4452,
+                        "hireDate": new Date(2010, 11, 30),
+                        "fullTime": true,
+                        "position": "VP, Finance",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 15,
+                        "name": "Quinlan Howe",
+                        "reportsTo": 7,
+                        "phone": "(464) 334-9748",
+                        "extension": 8722,
+                        "hireDate": new Date(2011, 6, 9),
+                        "fullTime": false,
+                        "position": "Senior Director, Finance",
+                        "timeInPosition": 0,
+                        "employees": [
+                            {
+                                "id": 17,
+                                "name": "Indira Lopez",
+                                "reportsTo": 15,
+                                "phone": "(301) 368-0938",
+                                "extension": 8027,
+                                "hireDate": new Date(2013, 8, 18),
+                                "fullTime": true,
+                                "position": "ERP Team Lead",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 18,
+                                        "name": "Lareina Lara",
+                                        "reportsTo": 17,
+                                        "phone": "(233) 457-7482",
+                                        "extension": 1996,
+                                        "hireDate": new Date(2010, 4, 30),
+                                        "fullTime": true,
+                                        "position": "ERP Solutions Consultant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 19,
+                                        "name": "Maxwell Wise",
+                                        "reportsTo": 17,
+                                        "phone": "(570) 494-2531",
+                                        "extension": 9865,
+                                        "hireDate": new Date(2012, 5, 19),
+                                        "fullTime": true,
+                                        "position": "Systems Engineer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 20,
+                                "name": "Hunter Mcbride",
+                                "reportsTo": 15,
+                                "phone": "(409) 442-7016",
+                                "extension": 4284,
+                                "hireDate": new Date(2012, 10, 20),
+                                "fullTime": true,
+                                "position": "Senior Director, Tax",
+                                "timeInPosition": 3
+                            },
+                            {
+                                "id": 21,
+                                "name": "Jana Serrano",
+                                "reportsTo": 15,
+                                "phone": "(910) 718-4620",
+                                "extension": 6970,
+                                "hireDate": new Date(2010, 4, 2),
+                                "fullTime": true,
+                                "position": "Financial Planning & Analysis Manager",
+                                "timeInPosition": 2
+                            },
+                            {
+                                "id": 22,
+                                "name": "Zachery Shelton",
+                                "reportsTo": 15,
+                                "phone": "(310) 240-8675",
+                                "extension": 4527,
+                                "hireDate": new Date(2011, 11, 23),
+                                "fullTime": false,
+                                "position": "Corporate Finance Controller",
+                                "timeInPosition": 6,
+                                "employees": [
+                                    {
+                                        "id": 28,
+                                        "name": "Cullen Freeman",
+                                        "reportsTo": 22,
+                                        "phone": "(136) 554-8814",
+                                        "extension": 9861,
+                                        "hireDate": new Date(2014, 3, 15),
+                                        "fullTime": true,
+                                        "position": "Treasurer Accountant",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 31,
+                                        "name": "Quinn Dean",
+                                        "reportsTo": 22,
+                                        "phone": "(152) 613-3507",
+                                        "extension": 6621,
+                                        "hireDate": new Date(2015, 1, 29),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 34,
+                                        "name": "Samantha Brady",
+                                        "reportsTo": 22,
+                                        "phone": "(206) 398-4328",
+                                        "extension": 1157,
+                                        "hireDate": new Date(2011, 2, 13),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 35,
+                                                "name": "Tamara Green",
+                                                "reportsTo": 34,
+                                                "phone": "(219) 248-2789",
+                                                "extension": 4880,
+                                                "hireDate": new Date(2014, 2, 4),
+                                                "fullTime": true,
+                                                "position": "Junior Accountant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 36,
+                                        "name": "Olympia Coleman",
+                                        "reportsTo": 22,
+                                        "phone": "(944) 853-6383",
+                                        "extension": 2136,
+                                        "hireDate": new Date(2013, 7, 31),
+                                        "fullTime": true,
+                                        "position": "Collections Manager",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 37,
+                                        "name": "Breanna Goodwin",
+                                        "reportsTo": 22,
+                                        "phone": "(379) 988-9630",
+                                        "extension": 5898,
+                                        "hireDate": new Date(2010, 5, 23),
+                                        "fullTime": false,
+                                        "position": "Payroll Specialist",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 27,
+                                "name": "Curran Travis",
+                                "reportsTo": 15,
+                                "phone": "(438) 135-8033",
+                                "extension": 3841,
+                                "hireDate": new Date(2011, 6, 13),
+                                "fullTime": true,
+                                "position": "Finance Controller",
+                                "timeInPosition": 5
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "Hunter Fry",
+                "reportsTo": 1,
+                "phone": "(766) 358-9858",
+                "extension": 3741,
+                "hireDate": new Date(2011, 2, 12),
+                "fullTime": false,
+                "position": "General Counsel",
+                "timeInPosition": 3,
+                "employees": [
+                    {
+                        "id": 9,
+                        "name": "Kuame Carrillo",
+                        "reportsTo": 8,
+                        "phone": "(192) 383-1305",
+                        "extension": 9228,
+                        "hireDate": new Date(2011, 2, 22),
+                        "fullTime": true,
+                        "position": "Associate General Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 13,
+                        "name": "Stacy Todd",
+                        "reportsTo": 8,
+                        "phone": "(925) 286-3327",
+                        "extension": 8565,
+                        "hireDate": new Date(2014, 7, 5),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 33,
+                        "name": "Valentine Wyatt",
+                        "reportsTo": 8,
+                        "phone": "(165) 166-6205",
+                        "extension": 3588,
+                        "hireDate": new Date(2015, 5, 21),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 5
+                    },
+                    {
+                        "id": 86,
+                        "name": "Daniel Mccarthy",
+                        "reportsTo": 8,
+                        "phone": "(624) 483-6206",
+                        "extension": 9112,
+                        "hireDate": new Date(2013, 12, 3),
+                        "fullTime": false,
+                        "position": "Staff Attorney",
+                        "timeInPosition": 0
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default employees;
diff --git a/vue-options-api-demos/treelist/filtering-basic/main.js b/vue-options-api-demos/treelist/filtering-basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/filtering-basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/filtering-basic/main.vue b/vue-options-api-demos/treelist/filtering-basic/main.vue
new file mode 100644
index 00000000..26633445
--- /dev/null
+++ b/vue-options-api-demos/treelist/filtering-basic/main.vue
@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <TreeList
+      :style="{
+        maxHeight: '510px',
+        overflow: 'auto',
+      }"
+      :expand-field="expandField"
+      :sub-items-field="subItemsField"
+      @expandchange="onExpandChange"
+      :filter="filter"
+      :filterable="true"
+      :data-items="processedData"
+      @filterchange="handleFilterChange"
+      :columns="columns"
+    />
+  </div>
+</template>
+
+<script>
+import employees from './data';
+import {
+  TreeList,
+  filterBy,
+  extendDataItem,
+  mapTree,
+} from '@progress/kendo-vue-treelist';
+
+export default {
+  components: {
+    TreeList,
+  },
+  data() {
+    return {
+      dataItems: [...employees],
+      filter: [],
+      expanded: [1, 2, 32],
+      subItemsField: 'employees',
+      expandField: 'expanded',
+      columns: [
+        {
+          field: 'name',
+          title: 'Name',
+          width: '320px',
+          expandable: true,
+        },
+        {
+          field: 'hireDate',
+          title: 'Hire Date',
+          width: '280px',
+          format: '{0:d}',
+          filter: 'date',
+        },
+        {
+          field: 'timeInPosition',
+          title: 'Year(s) in Position',
+          width: '280px',
+          filter: 'numeric',
+        },
+        {
+          field: 'fullTime',
+          title: 'Full Time',
+          width: '190px',
+          filter: 'boolean',
+        },
+      ],
+    };
+  },
+  computed: {
+    processedData() {
+      let data = this.dataItems;
+
+      let filteredData = filterBy(data, this.filter, this.subItemsField);
+      return this.addExpandField(filteredData);
+    },
+  },
+  methods: {
+    onExpandChange(e) {
+      this.expanded = e.value
+        ? this.expanded.filter((id) => id !== e.dataItem.id)
+        : [...this.expanded, e.dataItem.id];
+    },
+    handleFilterChange(event) {
+      this.filter = event.filter;
+    },
+    addExpandField(dataTree) {
+      const expanded = this.expanded;
+      return mapTree(dataTree, this.subItemsField, (item) =>
+        extendDataItem(item, this.subItemsField, {
+          [this.expandField]: expanded.includes(item.id),
+        })
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treelist/filtering-custom/DropDownListFilter.vue b/vue-options-api-demos/treelist/filtering-custom/DropDownListFilter.vue
new file mode 100644
index 00000000..0318afcf
--- /dev/null
+++ b/vue-options-api-demos/treelist/filtering-custom/DropDownListFilter.vue
@@ -0,0 +1,25 @@
+<template>
+    <DropDownList
+      :data-items="data"
+      :default-item="defaultItem"
+      @change="onChange"
+    />
+  </template>
+  <script>
+  import { DropDownList } from '@progress/kendo-vue-dropdowns';
+  export default {
+    components: { DropDownList },
+    props: {
+      dataItem: Object,
+      data: Array,
+      defaultItem: String,
+    },
+    emits: ['change'],
+    methods: {
+      onChange(e) {
+        this.$emit('change', { value: e.value, syntheticEvent: e.event });
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/treelist/filtering-custom/data.js b/vue-options-api-demos/treelist/filtering-custom/data.js
new file mode 100644
index 00000000..f66aec4d
--- /dev/null
+++ b/vue-options-api-demos/treelist/filtering-custom/data.js
@@ -0,0 +1,1150 @@
+
+const employees = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2,
+        "employees": [
+            {
+                "id": 2,
+                "name": "Guy Wooten",
+                "reportsTo": 1,
+                "phone": "(438) 738-4935",
+                "extension": 1155,
+                "hireDate": new Date(2010, 3, 3),
+                "fullTime": true,
+                "position": "Chief Technical Officer",
+                "timeInPosition": 1,
+                "employees": [
+                    {
+                        "id": 32,
+                        "name": "Buffy Weber",
+                        "reportsTo": 2,
+                        "phone": "(699) 838-6121",
+                        "extension": 8933,
+                        "hireDate": new Date(2011, 7, 11),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 11,
+                                "name": "Hyacinth Hood",
+                                "reportsTo": 32,
+                                "phone": "(889) 345-2438",
+                                "extension": 8564,
+                                "hireDate": new Date(2014, 2, 3),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 60,
+                                        "name": "Akeem Carr",
+                                        "reportsTo": 11,
+                                        "phone": "(738) 136-2814",
+                                        "extension": 9353,
+                                        "hireDate": new Date(2011, 4, 21),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 78,
+                                        "name": "Rinah Simon",
+                                        "reportsTo": 11,
+                                        "phone": "(285) 912-5271",
+                                        "extension": 7795,
+                                        "hireDate": new Date(2012, 10, 11),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 42,
+                                "name": "Gage Daniels",
+                                "reportsTo": 32,
+                                "phone": "(107) 290-6260",
+                                "extension": 896,
+                                "hireDate": new Date(2013, 5, 16),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 5
+                            },
+                            {
+                                "id": 43,
+                                "name": "Constance Vazquez",
+                                "reportsTo": 32,
+                                "phone": "(800) 301-1978",
+                                "extension": 5141,
+                                "hireDate": new Date(2011, 6, 7),
+                                "fullTime": true,
+                                "position": "Director, Engineering",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 46,
+                                        "name": "Darrel Solis",
+                                        "reportsTo": 43,
+                                        "phone": "(327) 977-0216",
+                                        "extension": 7779,
+                                        "hireDate": new Date(2015, 4, 25),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 47,
+                                                "name": "Brian Yang",
+                                                "reportsTo": 46,
+                                                "phone": "(565) 146-5435",
+                                                "extension": 3885,
+                                                "hireDate": new Date(2012, 9, 27),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 50,
+                                                "name": "Lillian Bradshaw",
+                                                "reportsTo": 46,
+                                                "phone": "(323) 509-3479",
+                                                "extension": 5426,
+                                                "hireDate": new Date(2014, 5, 10),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 51,
+                                                "name": "Christian Palmer",
+                                                "reportsTo": 46,
+                                                "phone": "(490) 421-8718",
+                                                "extension": 3706,
+                                                "hireDate": new Date(2012, 12, 27),
+                                                "fullTime": false,
+                                                "position": "Technical Lead",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 55,
+                                                "name": "Summer Mosley",
+                                                "reportsTo": 46,
+                                                "phone": "(784) 962-2301",
+                                                "extension": 5492,
+                                                "hireDate": new Date(2010, 3, 2),
+                                                "fullTime": true,
+                                                "position": "QA Engineer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 56,
+                                                "name": "Barry Ayers",
+                                                "reportsTo": 46,
+                                                "phone": "(452) 373-9227",
+                                                "extension": 1308,
+                                                "hireDate": new Date(2011, 10, 11),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 59,
+                                                "name": "Keiko Espinoza",
+                                                "reportsTo": 46,
+                                                "phone": "(226) 600-5305",
+                                                "extension": 9363,
+                                                "hireDate": new Date(2011, 9, 18),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 61,
+                                                "name": "Candace Pickett",
+                                                "reportsTo": 46,
+                                                "phone": "(120) 117-7475",
+                                                "extension": 5178,
+                                                "hireDate": new Date(2010, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 63,
+                                        "name": "Mia Caldwell",
+                                        "reportsTo": 43,
+                                        "phone": "(848) 636-6470",
+                                        "extension": 6368,
+                                        "hireDate": new Date(2012, 10, 7),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 65,
+                                                "name": "Thomas Terry",
+                                                "reportsTo": 63,
+                                                "phone": "(764) 831-4248",
+                                                "extension": 3574,
+                                                "hireDate": new Date(2015, 6, 15),
+                                                "fullTime": false,
+                                                "position": "Senior Enterprise Support Officer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 67,
+                                                "name": "Ruth Downs",
+                                                "reportsTo": 63,
+                                                "phone": "(138) 991-1440",
+                                                "extension": 8067,
+                                                "hireDate": new Date(2013, 7, 13),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 70,
+                                                "name": "Yasir Wilder",
+                                                "reportsTo": 63,
+                                                "phone": "(759) 701-8665",
+                                                "extension": 8350,
+                                                "hireDate": new Date(2010, 11, 8),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 71,
+                                                "name": "Flavia Short",
+                                                "reportsTo": 63,
+                                                "phone": "(370) 133-9238",
+                                                "extension": 6390,
+                                                "hireDate": new Date(2013, 2, 21),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 74,
+                                                "name": "Aaron Roach",
+                                                "reportsTo": 63,
+                                                "phone": "(958) 717-9230",
+                                                "extension": 4899,
+                                                "hireDate": new Date(2011, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 75,
+                                                "name": "Eric Russell",
+                                                "reportsTo": 63,
+                                                "phone": "(516) 575-8505",
+                                                "extension": 2224,
+                                                "hireDate": new Date(2012, 10, 28),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 76,
+                                                "name": "Cheyenne Olson",
+                                                "reportsTo": 63,
+                                                "phone": "(241) 645-0257",
+                                                "extension": 9181,
+                                                "hireDate": new Date(2015, 5, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 77,
+                                                "name": "Shaine Avila",
+                                                "reportsTo": 63,
+                                                "phone": "(844) 435-1360",
+                                                "extension": 3374,
+                                                "hireDate": new Date(2010, 1, 31),
+                                                "fullTime": true,
+                                                "position": "UI Designer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 81,
+                                                "name": "Chantale Long",
+                                                "reportsTo": 63,
+                                                "phone": "(252) 419-6891",
+                                                "extension": 7868,
+                                                "hireDate": new Date(2010, 6, 17),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 83,
+                                                "name": "Dane Cruz",
+                                                "reportsTo": 63,
+                                                "phone": "(946) 701-6165",
+                                                "extension": 3828,
+                                                "hireDate": new Date(2014, 10, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 84,
+                                                "name": "Regan Patterson",
+                                                "reportsTo": 63,
+                                                "phone": "(265) 946-1765",
+                                                "extension": 6955,
+                                                "hireDate": new Date(2012, 3, 1),
+                                                "fullTime": true,
+                                                "position": "Technical Writer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 85,
+                                                "name": "Drew Mckay",
+                                                "reportsTo": 63,
+                                                "phone": "(327) 293-0162",
+                                                "extension": 6904,
+                                                "hireDate": new Date(2011, 3, 25),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 88,
+                                                "name": "Bevis Miller",
+                                                "reportsTo": 63,
+                                                "phone": "(525) 557-0169",
+                                                "extension": 6978,
+                                                "hireDate": new Date(2011, 4, 19),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 89,
+                                                "name": "Bruce Mccarty",
+                                                "reportsTo": 63,
+                                                "phone": "(936) 777-8730",
+                                                "extension": 6552,
+                                                "hireDate": new Date(2014, 3, 28),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 5
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 90,
+                                        "name": "Ocean Blair",
+                                        "reportsTo": 43,
+                                        "phone": "(343) 586-6614",
+                                        "extension": 1424,
+                                        "hireDate": new Date(2011, 4, 27),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 91,
+                                                "name": "Guinevere Osborn",
+                                                "reportsTo": 90,
+                                                "phone": "(424) 741-0006",
+                                                "extension": 3166,
+                                                "hireDate": new Date(2014, 11, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 92,
+                                                "name": "Olga Strong",
+                                                "reportsTo": 90,
+                                                "phone": "(949) 417-1168",
+                                                "extension": 4568,
+                                                "hireDate": new Date(2015, 5, 28),
+                                                "fullTime": true,
+                                                "position": "Graphic Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 93,
+                                                "name": "Robert Orr",
+                                                "reportsTo": 90,
+                                                "phone": "(977) 341-3721",
+                                                "extension": 9241,
+                                                "hireDate": new Date(2012, 8, 20),
+                                                "fullTime": false,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 95,
+                                                "name": "Odette Sears",
+                                                "reportsTo": 90,
+                                                "phone": "(264) 818-6576",
+                                                "extension": 1914,
+                                                "hireDate": new Date(2013, 7, 5),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 45,
+                                "name": "Zelda Medina",
+                                "reportsTo": 32,
+                                "phone": "(563) 359-6023",
+                                "extension": 2600,
+                                "hireDate": new Date(2012, 11, 6),
+                                "fullTime": true,
+                                "position": "QA Architect",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    },
+                    {
+                        "id": 52,
+                        "name": "Skyler Cleveland",
+                        "reportsTo": 2,
+                        "phone": "(217) 280-5300",
+                        "extension": 9655,
+                        "hireDate": new Date(2014, 11, 10),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 40,
+                                "name": "Karleigh Garza",
+                                "reportsTo": 52,
+                                "phone": "(370) 983-8796",
+                                "extension": 4044,
+                                "hireDate": new Date(2014, 3, 10),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 49,
+                                        "name": "Elmo Tyson",
+                                        "reportsTo": 40,
+                                        "phone": "(344) 496-9555",
+                                        "extension": 6950,
+                                        "hireDate": new Date(2014, 9, 18),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 72,
+                                        "name": "Stacey Lynn",
+                                        "reportsTo": 40,
+                                        "phone": "(140) 772-7509",
+                                        "extension": 8396,
+                                        "hireDate": new Date(2014, 7, 31),
+                                        "fullTime": false,
+                                        "position": "QA Engineer",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 80,
+                                                "name": "Meredith Parrish",
+                                                "reportsTo": 72,
+                                                "phone": "(714) 284-2408",
+                                                "extension": 7675,
+                                                "hireDate": new Date(2012, 11, 13),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 96,
+                                        "name": "Cassady Whitley",
+                                        "reportsTo": 40,
+                                        "phone": "(996) 587-8405",
+                                        "extension": 780,
+                                        "hireDate": new Date(2013, 5, 7),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 5
+                                    },
+                                    {
+                                        "id": 97,
+                                        "name": "Haviva Campbell",
+                                        "reportsTo": 40,
+                                        "phone": "(263) 887-4689",
+                                        "extension": 2808,
+                                        "hireDate": new Date(2013, 3, 5),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 98,
+                                        "name": "Cameron Ayers",
+                                        "reportsTo": 40,
+                                        "phone": "(470) 709-8030",
+                                        "extension": 2893,
+                                        "hireDate": new Date(2013, 8, 28),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 99,
+                                        "name": "Martha Sargent",
+                                        "reportsTo": 40,
+                                        "phone": "(587) 812-4418",
+                                        "extension": 5099,
+                                        "hireDate": new Date(2014, 2, 27),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 100,
+                                        "name": "Darrel Kinney",
+                                        "reportsTo": 40,
+                                        "phone": "(888) 483-9606",
+                                        "extension": 4779,
+                                        "hireDate": new Date(2014, 3, 24),
+                                        "fullTime": false,
+                                        "position": "Graphic Designer",
+                                        "timeInPosition": 1
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 54,
+                                "name": "Kuame Frye",
+                                "reportsTo": 52,
+                                "phone": "(360) 721-5886",
+                                "extension": 2730,
+                                "hireDate": new Date(2010, 11, 17),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 64,
+                                        "name": "Ori Wynn",
+                                        "reportsTo": 54,
+                                        "phone": "(366) 342-0166",
+                                        "extension": 7252,
+                                        "hireDate": new Date(2015, 6, 21),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 0,
+                                        "employees": [
+                                            {
+                                                "id": 6,
+                                                "name": "Moses Duncan",
+                                                "reportsTo": 64,
+                                                "phone": "(421) 611-4814",
+                                                "extension": 669,
+                                                "hireDate": new Date(2010, 5, 24),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 12,
+                                                "name": "Jamalia Wallace",
+                                                "reportsTo": 64,
+                                                "phone": "(611) 391-8016",
+                                                "extension": 1952,
+                                                "hireDate": new Date(2011, 9, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Designer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 62,
+                                                "name": "Palmer Gregory",
+                                                "reportsTo": 64,
+                                                "phone": "(360) 430-2505",
+                                                "extension": 4337,
+                                                "hireDate": new Date(2014, 8, 30),
+                                                "fullTime": true,
+                                                "position": "Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 68,
+                                                "name": "Mallory Gilliam",
+                                                "reportsTo": 64,
+                                                "phone": "(878) 423-2971",
+                                                "extension": 1341,
+                                                "hireDate": new Date(2014, 7, 24),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 73,
+                                                "name": "Ima Hughes",
+                                                "reportsTo": 64,
+                                                "phone": "(905) 485-8001",
+                                                "extension": 1273,
+                                                "hireDate": new Date(2013, 6, 3),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 79,
+                                                "name": "Duncan Mathews",
+                                                "reportsTo": 64,
+                                                "phone": "(790) 971-9709",
+                                                "extension": 4573,
+                                                "hireDate": new Date(2011, 8, 21),
+                                                "fullTime": false,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 69,
+                                "name": "Sierra Beasley",
+                                "reportsTo": 52,
+                                "phone": "(271) 953-1968",
+                                "extension": 3324,
+                                "hireDate": new Date(2011, 4, 2),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 3,
+                                "employees": [
+                                    {
+                                        "id": 38,
+                                        "name": "Elton Tucker",
+                                        "reportsTo": 69,
+                                        "phone": "(988) 930-9331",
+                                        "extension": 9216,
+                                        "hireDate": new Date(2015, 6, 4),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 1
+                                    },
+                                    {
+                                        "id": 39,
+                                        "name": "Iona Brennan",
+                                        "reportsTo": 69,
+                                        "phone": "(356) 563-0600",
+                                        "extension": 5634,
+                                        "hireDate": new Date(2010, 9, 23),
+                                        "fullTime": true,
+                                        "position": "Junior Support Officer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 53,
+                                        "name": "Paul Campos",
+                                        "reportsTo": 69,
+                                        "phone": "(899) 205-1689",
+                                        "extension": 8586,
+                                        "hireDate": new Date(2011, 3, 17),
+                                        "fullTime": true,
+                                        "position": "Interaction Designer",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 66,
+                                                "name": "Gloria Freeman",
+                                                "reportsTo": 53,
+                                                "phone": "(344) 950-9168",
+                                                "extension": 4738,
+                                                "hireDate": new Date(2013, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Junior Interaction Designer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 57,
+                                        "name": "Alyssa Hansen",
+                                        "reportsTo": 69,
+                                        "phone": "(548) 925-4799",
+                                        "extension": 4716,
+                                        "hireDate": new Date(2011, 1, 19),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 82,
+                                        "name": "Yael Walters",
+                                        "reportsTo": 69,
+                                        "phone": "(311) 489-8191",
+                                        "extension": 6520,
+                                        "hireDate": new Date(2013, 7, 4),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 87,
+                                        "name": "Dahlia Hunt",
+                                        "reportsTo": 69,
+                                        "phone": "(720) 339-5202",
+                                        "extension": 3690,
+                                        "hireDate": new Date(2011, 3, 26),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 94,
+                                        "name": "Adria Stanley",
+                                        "reportsTo": 69,
+                                        "phone": "(536) 357-6391",
+                                        "extension": 3374,
+                                        "hireDate": new Date(2014, 7, 26),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "Priscilla Frank",
+                "reportsTo": 1,
+                "phone": "(278) 927-2684",
+                "extension": 4183,
+                "hireDate": new Date(2014, 11, 30),
+                "fullTime": true,
+                "position": "Chief Product Officer",
+                "timeInPosition": 2,
+                "employees": [
+                    {
+                        "id": 4,
+                        "name": "Ursula Holmes",
+                        "reportsTo": 3,
+                        "phone": "(302) 760-2034",
+                        "extension": 2226,
+                        "hireDate": new Date(2011, 6, 6),
+                        "fullTime": true,
+                        "position": "EVP, Product Strategy",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 24,
+                        "name": "Melvin Carrillo",
+                        "reportsTo": 3,
+                        "phone": "(348) 933-5167",
+                        "extension": 2482,
+                        "hireDate": new Date(2014, 7, 21),
+                        "fullTime": true,
+                        "position": "Director, Developer Relations",
+                        "timeInPosition": 6,
+                        "employees": [
+                            {
+                                "id": 29,
+                                "name": "Martha Chavez",
+                                "reportsTo": 24,
+                                "phone": "(860) 754-3464",
+                                "extension": 4531,
+                                "hireDate": new Date(2013, 3, 12),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 30,
+                                "name": "Oren Fox",
+                                "reportsTo": 24,
+                                "phone": "(572) 414-3299",
+                                "extension": 4849,
+                                "hireDate": new Date(2013, 5, 14),
+                                "fullTime": false,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 41,
+                                "name": "Amos Barr",
+                                "reportsTo": 24,
+                                "phone": "(470) 381-3718",
+                                "extension": 7643,
+                                "hireDate": new Date(2010, 3, 9),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "Anika Vega",
+                "reportsTo": 1,
+                "phone": "(910) 714-1802",
+                "extension": 6353,
+                "hireDate": new Date(2010, 2, 25),
+                "fullTime": true,
+                "position": "Chief Process Officer",
+                "timeInPosition": 5,
+                "employees": [
+                    {
+                        "id": 10,
+                        "name": "Vernon Ballard",
+                        "reportsTo": 5,
+                        "phone": "(702) 185-8890",
+                        "extension": 9242,
+                        "hireDate": new Date(2015, 6, 26),
+                        "fullTime": true,
+                        "position": "Director Facilities",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 16,
+                                "name": "Ali Guy",
+                                "reportsTo": 10,
+                                "phone": "(429) 912-6578",
+                                "extension": 2225,
+                                "hireDate": new Date(2014, 6, 29),
+                                "fullTime": true,
+                                "position": "Operations Manager",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 23,
+                                        "name": "Bruce Reilly",
+                                        "reportsTo": 16,
+                                        "phone": "(995) 243-7302",
+                                        "extension": 4815,
+                                        "hireDate": new Date(2015, 4, 1),
+                                        "fullTime": true,
+                                        "position": "Head of Security",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 26,
+                                                "name": "Rowan Morin",
+                                                "reportsTo": 23,
+                                                "phone": "(792) 141-4374",
+                                                "extension": 1844,
+                                                "hireDate": new Date(2015, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Building Security",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 44,
+                                                "name": "Benedict Soto",
+                                                "reportsTo": 23,
+                                                "phone": "(822) 282-5991",
+                                                "extension": 6422,
+                                                "hireDate": new Date(2012, 6, 1),
+                                                "fullTime": false,
+                                                "position": "Building Security",
+                                                "timeInPosition": 4
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 48,
+                                        "name": "Maryam Rios",
+                                        "reportsTo": 16,
+                                        "phone": "(673) 764-6720",
+                                        "extension": 531,
+                                        "hireDate": new Date(2014, 3, 3),
+                                        "fullTime": true,
+                                        "position": "Team Lead, Personal Assistants",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 58,
+                                                "name": "Rose Mcintyre",
+                                                "reportsTo": 48,
+                                                "phone": "(771) 615-4590",
+                                                "extension": 7094,
+                                                "hireDate": new Date(2015, 6, 30),
+                                                "fullTime": false,
+                                                "position": "Personal Assistant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "Nevada Hart",
+                "reportsTo": 1,
+                "phone": "(254) 220-1576",
+                "extension": 6649,
+                "hireDate": new Date(2015, 8, 17),
+                "fullTime": true,
+                "position": "Chief Financial Officer",
+                "timeInPosition": 6,
+                "employees": [
+                    {
+                        "id": 14,
+                        "name": "Zena Sanford",
+                        "reportsTo": 7,
+                        "phone": "(437) 568-8160",
+                        "extension": 4452,
+                        "hireDate": new Date(2010, 11, 30),
+                        "fullTime": true,
+                        "position": "VP, Finance",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 15,
+                        "name": "Quinlan Howe",
+                        "reportsTo": 7,
+                        "phone": "(464) 334-9748",
+                        "extension": 8722,
+                        "hireDate": new Date(2011, 6, 9),
+                        "fullTime": false,
+                        "position": "Senior Director, Finance",
+                        "timeInPosition": 0,
+                        "employees": [
+                            {
+                                "id": 17,
+                                "name": "Indira Lopez",
+                                "reportsTo": 15,
+                                "phone": "(301) 368-0938",
+                                "extension": 8027,
+                                "hireDate": new Date(2013, 8, 18),
+                                "fullTime": true,
+                                "position": "ERP Team Lead",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 18,
+                                        "name": "Lareina Lara",
+                                        "reportsTo": 17,
+                                        "phone": "(233) 457-7482",
+                                        "extension": 1996,
+                                        "hireDate": new Date(2010, 4, 30),
+                                        "fullTime": true,
+                                        "position": "ERP Solutions Consultant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 19,
+                                        "name": "Maxwell Wise",
+                                        "reportsTo": 17,
+                                        "phone": "(570) 494-2531",
+                                        "extension": 9865,
+                                        "hireDate": new Date(2012, 5, 19),
+                                        "fullTime": true,
+                                        "position": "Systems Engineer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 20,
+                                "name": "Hunter Mcbride",
+                                "reportsTo": 15,
+                                "phone": "(409) 442-7016",
+                                "extension": 4284,
+                                "hireDate": new Date(2012, 10, 20),
+                                "fullTime": true,
+                                "position": "Senior Director, Tax",
+                                "timeInPosition": 3
+                            },
+                            {
+                                "id": 21,
+                                "name": "Jana Serrano",
+                                "reportsTo": 15,
+                                "phone": "(910) 718-4620",
+                                "extension": 6970,
+                                "hireDate": new Date(2010, 4, 2),
+                                "fullTime": true,
+                                "position": "Financial Planning & Analysis Manager",
+                                "timeInPosition": 2
+                            },
+                            {
+                                "id": 22,
+                                "name": "Zachery Shelton",
+                                "reportsTo": 15,
+                                "phone": "(310) 240-8675",
+                                "extension": 4527,
+                                "hireDate": new Date(2011, 11, 23),
+                                "fullTime": false,
+                                "position": "Corporate Finance Controller",
+                                "timeInPosition": 6,
+                                "employees": [
+                                    {
+                                        "id": 28,
+                                        "name": "Cullen Freeman",
+                                        "reportsTo": 22,
+                                        "phone": "(136) 554-8814",
+                                        "extension": 9861,
+                                        "hireDate": new Date(2014, 3, 15),
+                                        "fullTime": true,
+                                        "position": "Treasurer Accountant",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 31,
+                                        "name": "Quinn Dean",
+                                        "reportsTo": 22,
+                                        "phone": "(152) 613-3507",
+                                        "extension": 6621,
+                                        "hireDate": new Date(2015, 1, 29),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 34,
+                                        "name": "Samantha Brady",
+                                        "reportsTo": 22,
+                                        "phone": "(206) 398-4328",
+                                        "extension": 1157,
+                                        "hireDate": new Date(2011, 2, 13),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 35,
+                                                "name": "Tamara Green",
+                                                "reportsTo": 34,
+                                                "phone": "(219) 248-2789",
+                                                "extension": 4880,
+                                                "hireDate": new Date(2014, 2, 4),
+                                                "fullTime": true,
+                                                "position": "Junior Accountant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 36,
+                                        "name": "Olympia Coleman",
+                                        "reportsTo": 22,
+                                        "phone": "(944) 853-6383",
+                                        "extension": 2136,
+                                        "hireDate": new Date(2013, 7, 31),
+                                        "fullTime": true,
+                                        "position": "Collections Manager",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 37,
+                                        "name": "Breanna Goodwin",
+                                        "reportsTo": 22,
+                                        "phone": "(379) 988-9630",
+                                        "extension": 5898,
+                                        "hireDate": new Date(2010, 5, 23),
+                                        "fullTime": false,
+                                        "position": "Payroll Specialist",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 27,
+                                "name": "Curran Travis",
+                                "reportsTo": 15,
+                                "phone": "(438) 135-8033",
+                                "extension": 3841,
+                                "hireDate": new Date(2011, 6, 13),
+                                "fullTime": true,
+                                "position": "Finance Controller",
+                                "timeInPosition": 5
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "Hunter Fry",
+                "reportsTo": 1,
+                "phone": "(766) 358-9858",
+                "extension": 3741,
+                "hireDate": new Date(2011, 2, 12),
+                "fullTime": false,
+                "position": "General Counsel",
+                "timeInPosition": 3,
+                "employees": [
+                    {
+                        "id": 9,
+                        "name": "Kuame Carrillo",
+                        "reportsTo": 8,
+                        "phone": "(192) 383-1305",
+                        "extension": 9228,
+                        "hireDate": new Date(2011, 2, 22),
+                        "fullTime": true,
+                        "position": "Associate General Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 13,
+                        "name": "Stacy Todd",
+                        "reportsTo": 8,
+                        "phone": "(925) 286-3327",
+                        "extension": 8565,
+                        "hireDate": new Date(2014, 7, 5),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 33,
+                        "name": "Valentine Wyatt",
+                        "reportsTo": 8,
+                        "phone": "(165) 166-6205",
+                        "extension": 3588,
+                        "hireDate": new Date(2015, 5, 21),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 5
+                    },
+                    {
+                        "id": 86,
+                        "name": "Daniel Mccarthy",
+                        "reportsTo": 8,
+                        "phone": "(624) 483-6206",
+                        "extension": 9112,
+                        "hireDate": new Date(2013, 12, 3),
+                        "fullTime": false,
+                        "position": "Staff Attorney",
+                        "timeInPosition": 0
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default employees;
diff --git a/vue-options-api-demos/treelist/filtering-custom/main.js b/vue-options-api-demos/treelist/filtering-custom/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/filtering-custom/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/filtering-custom/main.vue b/vue-options-api-demos/treelist/filtering-custom/main.vue
new file mode 100644
index 00000000..43fae07b
--- /dev/null
+++ b/vue-options-api-demos/treelist/filtering-custom/main.vue
@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <TreeList
+      :style="{
+        maxHeight: '510px',
+        overflow: 'auto',
+      }"
+      :expand-field="expandField"
+      :sub-items-field="subItemsField"
+      @expandchange="onExpandChange"
+      :filter="filter"
+      :filterable="true"
+      :data-items="processedData"
+      @filterchange="handleFilterChange"
+      :columns="columns"
+    >
+      <template v-slot:MyDropDownFilter="{ props }">
+        <DropDownFilter
+          :data-item="props.dataItem"
+          :data="dropDownData"
+          :default-item="'Select Position'"
+          @change="
+            (ev) => {
+              props.onChange({
+                operator: 'eq',
+                field: props.field,
+                value: ev.value,
+                syntheticEvent: ev.syntheticEvent,
+              });
+            }
+          "
+        />
+      </template>
+    </TreeList>
+  </div>
+</template>
+
+<script>
+import employees from './data';
+import DropDownFilter from './DropDownListFilter.vue';
+import {
+  TreeList,
+  filterBy,
+  extendDataItem,
+  mapTree,
+} from '@progress/kendo-vue-treelist';
+
+export default {
+  components: {
+    TreeList,
+    DropDownFilter,
+  },
+  data() {
+    return {
+      dropDownData: [],
+      dataItems: [...employees],
+      filter: [],
+      expanded: [1, 2, 32],
+      subItemsField: 'employees',
+      expandField: 'expanded',
+      columns: [
+        {
+          field: 'name',
+          title: 'Name',
+          width: '400px',
+          expandable: true,
+        },
+        {
+          field: 'position',
+          title: 'Position',
+          width: '300px',
+          filterCell: 'MyDropDownFilter',
+        },
+        {
+          field: 'hireDate',
+          title: 'Hire Date',
+          width: '300px',
+          format: '{0:d}',
+        },
+        {
+          field: 'fullTime',
+          title: 'Full Time',
+          width: '300px',
+        },
+      ],
+    };
+  },
+  mounted() {
+    const positions = new Set();
+    const resultTree = mapTree(this.dataItems, this.subItemsField, (item) => {
+      positions.add(item.position);
+    });
+    this.dropDownData = Array.from(positions);
+  },
+  computed: {
+    processedData() {
+      let data = this.dataItems;
+      const filteredData = filterBy(data, this.filter, this.subItemsField);
+      const resultTree = mapTree(filteredData, this.subItemsField, (item) => {
+        return extendDataItem(item, this.subItemsField, {
+          [this.expandField]: this.expanded.includes(item.id),
+        });
+      });
+      return resultTree;
+    },
+  },
+  methods: {
+    onExpandChange(e) {
+      this.expanded = e.value
+        ? this.expanded.filter((id) => id !== e.dataItem.id)
+        : [...this.expanded, e.dataItem.id];
+    },
+    handleFilterChange(event) {
+      this.filter = event.filter;
+    },
+    addExpandField(dataTree) {
+      const expanded = this.expanded;
+      return mapTree(dataTree, this.subItemsField, (item) =>
+        extendDataItem(item, this.subItemsField, {
+          [this.expandField]: expanded.includes(item.id),
+        })
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treelist/flat-data/flat-data.js b/vue-options-api-demos/treelist/flat-data/flat-data.js
new file mode 100644
index 00000000..6ca1dc52
--- /dev/null
+++ b/vue-options-api-demos/treelist/flat-data/flat-data.js
@@ -0,0 +1,1093 @@
+const employeesFlat = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2
+    },
+    {
+        "id": 2,
+        "name": "Guy Wooten",
+        "reportsTo": 1,
+        "phone": "(438) 738-4935",
+        "extension": 1155,
+        "hireDate": new Date(2010, 3, 3),
+        "fullTime": true,
+        "position": "Chief Technical Officer",
+        "timeInPosition": 1
+    },
+    {
+        "id": 3,
+        "name": "Priscilla Frank",
+        "reportsTo": 1,
+        "phone": "(278) 927-2684",
+        "extension": 4183,
+        "hireDate": new Date(2014, 11, 30),
+        "fullTime": true,
+        "position": "Chief Product Officer",
+        "timeInPosition": 2
+    },
+    {
+        "id": 4,
+        "name": "Ursula Holmes",
+        "reportsTo": 3,
+        "phone": "(302) 760-2034",
+        "extension": 2226,
+        "hireDate": new Date(2011, 6, 6),
+        "fullTime": true,
+        "position": "EVP, Product Strategy",
+        "timeInPosition": 4
+    },
+    {
+        "id": 5,
+        "name": "Anika Vega",
+        "reportsTo": 1,
+        "phone": "(910) 714-1802",
+        "extension": 6353,
+        "hireDate": new Date(2010, 2, 25),
+        "fullTime": true,
+        "position": "Chief Process Officer",
+        "timeInPosition": 5
+    },
+    {
+        "id": 6,
+        "name": "Moses Duncan",
+        "reportsTo": 64,
+        "phone": "(421) 611-4814",
+        "extension": 669,
+        "hireDate": new Date(2010, 5, 24),
+        "fullTime": true,
+        "position": "Software Developer",
+        "timeInPosition": 6
+    },
+    {
+        "id": 7,
+        "name": "Nevada Hart",
+        "reportsTo": 1,
+        "phone": "(254) 220-1576",
+        "extension": 6649,
+        "hireDate": new Date(2015, 8, 17),
+        "fullTime": true,
+        "position": "Chief Financial Officer",
+        "timeInPosition": 6
+    },
+    {
+        "id": 8,
+        "name": "Hunter Fry",
+        "reportsTo": 1,
+        "phone": "(766) 358-9858",
+        "extension": 3741,
+        "hireDate": new Date(2011, 2, 12),
+        "fullTime": false,
+        "position": "General Counsel",
+        "timeInPosition": 3
+    },
+    {
+        "id": 9,
+        "name": "Kuame Carrillo",
+        "reportsTo": 8,
+        "phone": "(192) 383-1305",
+        "extension": 9228,
+        "hireDate": new Date(2011, 2, 22),
+        "fullTime": true,
+        "position": "Associate General Councel",
+        "timeInPosition": 0
+    },
+    {
+        "id": 10,
+        "name": "Vernon Ballard",
+        "reportsTo": 5,
+        "phone": "(702) 185-8890",
+        "extension": 9242,
+        "hireDate": new Date(2015, 6, 26),
+        "fullTime": true,
+        "position": "Director Facilities",
+        "timeInPosition": 2
+    },
+    {
+        "id": 11,
+        "name": "Hyacinth Hood",
+        "reportsTo": 32,
+        "phone": "(889) 345-2438",
+        "extension": 8564,
+        "hireDate": new Date(2014, 2, 3),
+        "fullTime": true,
+        "position": "Team Lead",
+        "timeInPosition": 1
+    },
+    {
+        "id": 12,
+        "name": "Jamalia Wallace",
+        "reportsTo": 64,
+        "phone": "(611) 391-8016",
+        "extension": 1952,
+        "hireDate": new Date(2011, 9, 8),
+        "fullTime": true,
+        "position": "Junior Designer",
+        "timeInPosition": 3
+    },
+    {
+        "id": 13,
+        "name": "Stacy Todd",
+        "reportsTo": 8,
+        "phone": "(925) 286-3327",
+        "extension": 8565,
+        "hireDate": new Date(2014, 7, 5),
+        "fullTime": true,
+        "position": "Councel",
+        "timeInPosition": 0
+    },
+    {
+        "id": 14,
+        "name": "Zena Sanford",
+        "reportsTo": 7,
+        "phone": "(437) 568-8160",
+        "extension": 4452,
+        "hireDate": new Date(2010, 11, 30),
+        "fullTime": true,
+        "position": "VP, Finance",
+        "timeInPosition": 4
+    },
+    {
+        "id": 15,
+        "name": "Quinlan Howe",
+        "reportsTo": 7,
+        "phone": "(464) 334-9748",
+        "extension": 8722,
+        "hireDate": new Date(2011, 6, 9),
+        "fullTime": false,
+        "position": "Senior Director, Finance",
+        "timeInPosition": 0
+    },
+    {
+        "id": 16,
+        "name": "Ali Guy",
+        "reportsTo": 10,
+        "phone": "(429) 912-6578",
+        "extension": 2225,
+        "hireDate": new Date(2014, 6, 29),
+        "fullTime": true,
+        "position": "Operations Manager",
+        "timeInPosition": 4
+    },
+    {
+        "id": 17,
+        "name": "Indira Lopez",
+        "reportsTo": 15,
+        "phone": "(301) 368-0938",
+        "extension": 8027,
+        "hireDate": new Date(2013, 8, 18),
+        "fullTime": true,
+        "position": "ERP Team Lead",
+        "timeInPosition": 4
+    },
+    {
+        "id": 18,
+        "name": "Lareina Lara",
+        "reportsTo": 17,
+        "phone": "(233) 457-7482",
+        "extension": 1996,
+        "hireDate": new Date(2010, 4, 30),
+        "fullTime": true,
+        "position": "ERP Solutions Consultant",
+        "timeInPosition": 6
+    },
+    {
+        "id": 19,
+        "name": "Maxwell Wise",
+        "reportsTo": 17,
+        "phone": "(570) 494-2531",
+        "extension": 9865,
+        "hireDate": new Date(2012, 5, 19),
+        "fullTime": true,
+        "position": "Systems Engineer",
+        "timeInPosition": 0
+    },
+    {
+        "id": 20,
+        "name": "Hunter Mcbride",
+        "reportsTo": 15,
+        "phone": "(409) 442-7016",
+        "extension": 4284,
+        "hireDate": new Date(2012, 10, 20),
+        "fullTime": true,
+        "position": "Senior Director, Tax",
+        "timeInPosition": 3
+    },
+    {
+        "id": 21,
+        "name": "Jana Serrano",
+        "reportsTo": 15,
+        "phone": "(910) 718-4620",
+        "extension": 6970,
+        "hireDate": new Date(2010, 4, 2),
+        "fullTime": true,
+        "position": "Financial Planning & Analysis Manager",
+        "timeInPosition": 2
+    },
+    {
+        "id": 22,
+        "name": "Zachery Shelton",
+        "reportsTo": 15,
+        "phone": "(310) 240-8675",
+        "extension": 4527,
+        "hireDate": new Date(2011, 11, 23),
+        "fullTime": false,
+        "position": "Corporate Finance Controller",
+        "timeInPosition": 6
+    },
+    {
+        "id": 23,
+        "name": "Bruce Reilly",
+        "reportsTo": 16,
+        "phone": "(995) 243-7302",
+        "extension": 4815,
+        "hireDate": new Date(2015, 4, 1),
+        "fullTime": true,
+        "position": "Head of Security",
+        "timeInPosition": 1
+    },
+    {
+        "id": 24,
+        "name": "Melvin Carrillo",
+        "reportsTo": 3,
+        "phone": "(348) 933-5167",
+        "extension": 2482,
+        "hireDate": new Date(2014, 7, 21),
+        "fullTime": true,
+        "position": "Director, Developer Relations",
+        "timeInPosition": 6
+    },
+    {
+        "id": 26,
+        "name": "Rowan Morin",
+        "reportsTo": 23,
+        "phone": "(792) 141-4374",
+        "extension": 1844,
+        "hireDate": new Date(2015, 7, 30),
+        "fullTime": true,
+        "position": "Building Security",
+        "timeInPosition": 5
+    },
+    {
+        "id": 27,
+        "name": "Curran Travis",
+        "reportsTo": 15,
+        "phone": "(438) 135-8033",
+        "extension": 3841,
+        "hireDate": new Date(2011, 6, 13),
+        "fullTime": true,
+        "position": "Finance Controller",
+        "timeInPosition": 5
+    },
+    {
+        "id": 28,
+        "name": "Cullen Freeman",
+        "reportsTo": 22,
+        "phone": "(136) 554-8814",
+        "extension": 9861,
+        "hireDate": new Date(2014, 3, 15),
+        "fullTime": true,
+        "position": "Treasurer Accountant",
+        "timeInPosition": 2
+    },
+    {
+        "id": 29,
+        "name": "Martha Chavez",
+        "reportsTo": 24,
+        "phone": "(860) 754-3464",
+        "extension": 4531,
+        "hireDate": new Date(2013, 3, 12),
+        "fullTime": true,
+        "position": "Developer Advocate",
+        "timeInPosition": 0
+    },
+    {
+        "id": 30,
+        "name": "Oren Fox",
+        "reportsTo": 24,
+        "phone": "(572) 414-3299",
+        "extension": 4849,
+        "hireDate": new Date(2013, 5, 14),
+        "fullTime": false,
+        "position": "Developer Advocate",
+        "timeInPosition": 0
+    },
+    {
+        "id": 31,
+        "name": "Quinn Dean",
+        "reportsTo": 22,
+        "phone": "(152) 613-3507",
+        "extension": 6621,
+        "hireDate": new Date(2015, 1, 29),
+        "fullTime": true,
+        "position": "Accountant",
+        "timeInPosition": 6
+    },
+    {
+        "id": 32,
+        "name": "Buffy Weber",
+        "reportsTo": 2,
+        "phone": "(699) 838-6121",
+        "extension": 8933,
+        "hireDate": new Date(2011, 7, 11),
+        "fullTime": true,
+        "position": "VP, Engineering",
+        "timeInPosition": 2
+    },
+    {
+        "id": 33,
+        "name": "Valentine Wyatt",
+        "reportsTo": 8,
+        "phone": "(165) 166-6205",
+        "extension": 3588,
+        "hireDate": new Date(2015, 5, 21),
+        "fullTime": true,
+        "position": "Councel",
+        "timeInPosition": 5
+    },
+    {
+        "id": 34,
+        "name": "Samantha Brady",
+        "reportsTo": 22,
+        "phone": "(206) 398-4328",
+        "extension": 1157,
+        "hireDate": new Date(2011, 2, 13),
+        "fullTime": true,
+        "position": "Accountant",
+        "timeInPosition": 2
+    },
+    {
+        "id": 35,
+        "name": "Tamara Green",
+        "reportsTo": 34,
+        "phone": "(219) 248-2789",
+        "extension": 4880,
+        "hireDate": new Date(2014, 2, 4),
+        "fullTime": true,
+        "position": "Junior Accountant",
+        "timeInPosition": 6
+    },
+    {
+        "id": 36,
+        "name": "Olympia Coleman",
+        "reportsTo": 22,
+        "phone": "(944) 853-6383",
+        "extension": 2136,
+        "hireDate": new Date(2013, 7, 31),
+        "fullTime": true,
+        "position": "Collections Manager",
+        "timeInPosition": 3
+    },
+    {
+        "id": 37,
+        "name": "Breanna Goodwin",
+        "reportsTo": 22,
+        "phone": "(379) 988-9630",
+        "extension": 5898,
+        "hireDate": new Date(2010, 5, 23),
+        "fullTime": false,
+        "position": "Payroll Specialist",
+        "timeInPosition": 4
+    },
+    {
+        "id": 38,
+        "name": "Elton Tucker",
+        "reportsTo": 69,
+        "phone": "(988) 930-9331",
+        "extension": 9216,
+        "hireDate": new Date(2015, 6, 4),
+        "fullTime": true,
+        "position": "Support Officer",
+        "timeInPosition": 1
+    },
+    {
+        "id": 39,
+        "name": "Iona Brennan",
+        "reportsTo": 69,
+        "phone": "(356) 563-0600",
+        "extension": 5634,
+        "hireDate": new Date(2010, 9, 23),
+        "fullTime": true,
+        "position": "Junior Support Officer",
+        "timeInPosition": 4
+    },
+    {
+        "id": 40,
+        "name": "Karleigh Garza",
+        "reportsTo": 52,
+        "phone": "(370) 983-8796",
+        "extension": 4044,
+        "hireDate": new Date(2014, 3, 10),
+        "fullTime": true,
+        "position": "Team Lead",
+        "timeInPosition": 1
+    },
+    {
+        "id": 41,
+        "name": "Amos Barr",
+        "reportsTo": 24,
+        "phone": "(470) 381-3718",
+        "extension": 7643,
+        "hireDate": new Date(2010, 3, 9),
+        "fullTime": true,
+        "position": "Developer Advocate",
+        "timeInPosition": 2
+    },
+    {
+        "id": 42,
+        "name": "Gage Daniels",
+        "reportsTo": 32,
+        "phone": "(107) 290-6260",
+        "extension": 896,
+        "hireDate": new Date(2013, 5, 16),
+        "fullTime": true,
+        "position": "Software Architect",
+        "timeInPosition": 5
+    },
+    {
+        "id": 43,
+        "name": "Constance Vazquez",
+        "reportsTo": 32,
+        "phone": "(800) 301-1978",
+        "extension": 5141,
+        "hireDate": new Date(2011, 6, 7),
+        "fullTime": true,
+        "position": "Director, Engineering",
+        "timeInPosition": 1
+    },
+    {
+        "id": 44,
+        "name": "Benedict Soto",
+        "reportsTo": 23,
+        "phone": "(822) 282-5991",
+        "extension": 6422,
+        "hireDate": new Date(2012, 6, 1),
+        "fullTime": false,
+        "position": "Building Security",
+        "timeInPosition": 4
+    },
+    {
+        "id": 45,
+        "name": "Zelda Medina",
+        "reportsTo": 32,
+        "phone": "(563) 359-6023",
+        "extension": 2600,
+        "hireDate": new Date(2012, 11, 6),
+        "fullTime": true,
+        "position": "QA Architect",
+        "timeInPosition": 2
+    },
+    {
+        "id": 46,
+        "name": "Darrel Solis",
+        "reportsTo": 43,
+        "phone": "(327) 977-0216",
+        "extension": 7779,
+        "hireDate": new Date(2015, 4, 25),
+        "fullTime": true,
+        "position": "Team Lead",
+        "timeInPosition": 4
+    },
+    {
+        "id": 47,
+        "name": "Brian Yang",
+        "reportsTo": 46,
+        "phone": "(565) 146-5435",
+        "extension": 3885,
+        "hireDate": new Date(2012, 9, 27),
+        "fullTime": true,
+        "position": "Senior Software Developer",
+        "timeInPosition": 3
+    },
+    {
+        "id": 48,
+        "name": "Maryam Rios",
+        "reportsTo": 16,
+        "phone": "(673) 764-6720",
+        "extension": 531,
+        "hireDate": new Date(2014, 3, 3),
+        "fullTime": true,
+        "position": "Team Lead, Personal Assistants",
+        "timeInPosition": 1
+    },
+    {
+        "id": 49,
+        "name": "Elmo Tyson",
+        "reportsTo": 40,
+        "phone": "(344) 496-9555",
+        "extension": 6950,
+        "hireDate": new Date(2014, 9, 18),
+        "fullTime": true,
+        "position": "Software Developer",
+        "timeInPosition": 4
+    },
+    {
+        "id": 50,
+        "name": "Lillian Bradshaw",
+        "reportsTo": 46,
+        "phone": "(323) 509-3479",
+        "extension": 5426,
+        "hireDate": new Date(2014, 5, 10),
+        "fullTime": true,
+        "position": "Software Developer",
+        "timeInPosition": 2
+    },
+    {
+        "id": 51,
+        "name": "Christian Palmer",
+        "reportsTo": 46,
+        "phone": "(490) 421-8718",
+        "extension": 3706,
+        "hireDate": new Date(2012, 12, 27),
+        "fullTime": false,
+        "position": "Technical Lead",
+        "timeInPosition": 1
+    },
+    {
+        "id": 52,
+        "name": "Skyler Cleveland",
+        "reportsTo": 2,
+        "phone": "(217) 280-5300",
+        "extension": 9655,
+        "hireDate": new Date(2014, 11, 10),
+        "fullTime": true,
+        "position": "VP, Engineering",
+        "timeInPosition": 2
+    },
+    {
+        "id": 53,
+        "name": "Paul Campos",
+        "reportsTo": 69,
+        "phone": "(899) 205-1689",
+        "extension": 8586,
+        "hireDate": new Date(2011, 3, 17),
+        "fullTime": true,
+        "position": "Interaction Designer",
+        "timeInPosition": 4
+    },
+    {
+        "id": 54,
+        "name": "Kuame Frye",
+        "reportsTo": 52,
+        "phone": "(360) 721-5886",
+        "extension": 2730,
+        "hireDate": new Date(2010, 11, 17),
+        "fullTime": true,
+        "position": "Software Architect",
+        "timeInPosition": 1
+    },
+    {
+        "id": 55,
+        "name": "Summer Mosley",
+        "reportsTo": 46,
+        "phone": "(784) 962-2301",
+        "extension": 5492,
+        "hireDate": new Date(2010, 3, 2),
+        "fullTime": true,
+        "position": "QA Engineer",
+        "timeInPosition": 5
+    },
+    {
+        "id": 56,
+        "name": "Barry Ayers",
+        "reportsTo": 46,
+        "phone": "(452) 373-9227",
+        "extension": 1308,
+        "hireDate": new Date(2011, 10, 11),
+        "fullTime": true,
+        "position": "Software Developer",
+        "timeInPosition": 4
+    },
+    {
+        "id": 57,
+        "name": "Alyssa Hansen",
+        "reportsTo": 69,
+        "phone": "(548) 925-4799",
+        "extension": 4716,
+        "hireDate": new Date(2011, 1, 19),
+        "fullTime": true,
+        "position": "Junior Software Developer",
+        "timeInPosition": 6
+    },
+    {
+        "id": 58,
+        "name": "Rose Mcintyre",
+        "reportsTo": 48,
+        "phone": "(771) 615-4590",
+        "extension": 7094,
+        "hireDate": new Date(2015, 6, 30),
+        "fullTime": false,
+        "position": "Personal Assistant",
+        "timeInPosition": 6
+    },
+    {
+        "id": 59,
+        "name": "Keiko Espinoza",
+        "reportsTo": 46,
+        "phone": "(226) 600-5305",
+        "extension": 9363,
+        "hireDate": new Date(2011, 9, 18),
+        "fullTime": true,
+        "position": "Junior QA Engineer",
+        "timeInPosition": 4
+    },
+    {
+        "id": 60,
+        "name": "Akeem Carr",
+        "reportsTo": 11,
+        "phone": "(738) 136-2814",
+        "extension": 9353,
+        "hireDate": new Date(2011, 4, 21),
+        "fullTime": true,
+        "position": "Junior Software Developer",
+        "timeInPosition": 2
+    },
+    {
+        "id": 61,
+        "name": "Candace Pickett",
+        "reportsTo": 46,
+        "phone": "(120) 117-7475",
+        "extension": 5178,
+        "hireDate": new Date(2010, 5, 6),
+        "fullTime": true,
+        "position": "Support Officer",
+        "timeInPosition": 0
+    },
+    {
+        "id": 62,
+        "name": "Palmer Gregory",
+        "reportsTo": 64,
+        "phone": "(360) 430-2505",
+        "extension": 4337,
+        "hireDate": new Date(2014, 8, 30),
+        "fullTime": true,
+        "position": "Designer",
+        "timeInPosition": 4
+    },
+    {
+        "id": 63,
+        "name": "Mia Caldwell",
+        "reportsTo": 43,
+        "phone": "(848) 636-6470",
+        "extension": 6368,
+        "hireDate": new Date(2012, 10, 7),
+        "fullTime": true,
+        "position": "Team Lead",
+        "timeInPosition": 4
+    },
+    {
+        "id": 64,
+        "name": "Ori Wynn",
+        "reportsTo": 54,
+        "phone": "(366) 342-0166",
+        "extension": 7252,
+        "hireDate": new Date(2015, 6, 21),
+        "fullTime": true,
+        "position": "Team Lead",
+        "timeInPosition": 0
+    },
+    {
+        "id": 65,
+        "name": "Thomas Terry",
+        "reportsTo": 63,
+        "phone": "(764) 831-4248",
+        "extension": 3574,
+        "hireDate": new Date(2015, 6, 15),
+        "fullTime": false,
+        "position": "Senior Enterprise Support Officer",
+        "timeInPosition": 2
+    },
+    {
+        "id": 66,
+        "name": "Gloria Freeman",
+        "reportsTo": 53,
+        "phone": "(344) 950-9168",
+        "extension": 4738,
+        "hireDate": new Date(2013, 5, 6),
+        "fullTime": true,
+        "position": "Junior Interaction Designer",
+        "timeInPosition": 0
+    },
+    {
+        "id": 67,
+        "name": "Ruth Downs",
+        "reportsTo": 63,
+        "phone": "(138) 991-1440",
+        "extension": 8067,
+        "hireDate": new Date(2013, 7, 13),
+        "fullTime": true,
+        "position": "Senior Software Developer",
+        "timeInPosition": 5
+    },
+    {
+        "id": 68,
+        "name": "Mallory Gilliam",
+        "reportsTo": 64,
+        "phone": "(878) 423-2971",
+        "extension": 1341,
+        "hireDate": new Date(2014, 7, 24),
+        "fullTime": true,
+        "position": "Senior Software Developer",
+        "timeInPosition": 1
+    },
+    {
+        "id": 69,
+        "name": "Sierra Beasley",
+        "reportsTo": 52,
+        "phone": "(271) 953-1968",
+        "extension": 3324,
+        "hireDate": new Date(2011, 4, 2),
+        "fullTime": true,
+        "position": "Team Lead",
+        "timeInPosition": 3
+    },
+    {
+        "id": 70,
+        "name": "Yasir Wilder",
+        "reportsTo": 63,
+        "phone": "(759) 701-8665",
+        "extension": 8350,
+        "hireDate": new Date(2010, 11, 8),
+        "fullTime": true,
+        "position": "Senior QA Enginner",
+        "timeInPosition": 3
+    },
+    {
+        "id": 71,
+        "name": "Flavia Short",
+        "reportsTo": 63,
+        "phone": "(370) 133-9238",
+        "extension": 6390,
+        "hireDate": new Date(2013, 2, 21),
+        "fullTime": true,
+        "position": "Support Officer",
+        "timeInPosition": 0
+    },
+    {
+        "id": 72,
+        "name": "Stacey Lynn",
+        "reportsTo": 40,
+        "phone": "(140) 772-7509",
+        "extension": 8396,
+        "hireDate": new Date(2014, 7, 31),
+        "fullTime": false,
+        "position": "QA Engineer",
+        "timeInPosition": 1
+    },
+    {
+        "id": 73,
+        "name": "Ima Hughes",
+        "reportsTo": 64,
+        "phone": "(905) 485-8001",
+        "extension": 1273,
+        "hireDate": new Date(2013, 6, 3),
+        "fullTime": true,
+        "position": "Software Developer",
+        "timeInPosition": 0
+    },
+    {
+        "id": 74,
+        "name": "Aaron Roach",
+        "reportsTo": 63,
+        "phone": "(958) 717-9230",
+        "extension": 4899,
+        "hireDate": new Date(2011, 7, 30),
+        "fullTime": true,
+        "position": "Junior Software Developer",
+        "timeInPosition": 6
+    },
+    {
+        "id": 75,
+        "name": "Eric Russell",
+        "reportsTo": 63,
+        "phone": "(516) 575-8505",
+        "extension": 2224,
+        "hireDate": new Date(2012, 10, 28),
+        "fullTime": true,
+        "position": "Software Developer",
+        "timeInPosition": 3
+    },
+    {
+        "id": 76,
+        "name": "Cheyenne Olson",
+        "reportsTo": 63,
+        "phone": "(241) 645-0257",
+        "extension": 9181,
+        "hireDate": new Date(2015, 5, 19),
+        "fullTime": true,
+        "position": "Software Developer",
+        "timeInPosition": 5
+    },
+    {
+        "id": 77,
+        "name": "Shaine Avila",
+        "reportsTo": 63,
+        "phone": "(844) 435-1360",
+        "extension": 3374,
+        "hireDate": new Date(2010, 1, 31),
+        "fullTime": true,
+        "position": "UI Designer",
+        "timeInPosition": 5
+    },
+    {
+        "id": 78,
+        "name": "Rinah Simon",
+        "reportsTo": 11,
+        "phone": "(285) 912-5271",
+        "extension": 7795,
+        "hireDate": new Date(2012, 10, 11),
+        "fullTime": true,
+        "position": "Software Developer",
+        "timeInPosition": 4
+    },
+    {
+        "id": 79,
+        "name": "Duncan Mathews",
+        "reportsTo": 64,
+        "phone": "(790) 971-9709",
+        "extension": 4573,
+        "hireDate": new Date(2011, 8, 21),
+        "fullTime": false,
+        "position": "Software Developer",
+        "timeInPosition": 3
+    },
+    {
+        "id": 80,
+        "name": "Meredith Parrish",
+        "reportsTo": 72,
+        "phone": "(714) 284-2408",
+        "extension": 7675,
+        "hireDate": new Date(2012, 11, 13),
+        "fullTime": true,
+        "position": "Junior QA Engineer",
+        "timeInPosition": 6
+    },
+    {
+        "id": 81,
+        "name": "Chantale Long",
+        "reportsTo": 63,
+        "phone": "(252) 419-6891",
+        "extension": 7868,
+        "hireDate": new Date(2010, 6, 17),
+        "fullTime": true,
+        "position": "Senior QA Enginner",
+        "timeInPosition": 1
+    },
+    {
+        "id": 82,
+        "name": "Yael Walters",
+        "reportsTo": 69,
+        "phone": "(311) 489-8191",
+        "extension": 6520,
+        "hireDate": new Date(2013, 7, 4),
+        "fullTime": true,
+        "position": "Software Developer",
+        "timeInPosition": 6
+    },
+    {
+        "id": 83,
+        "name": "Dane Cruz",
+        "reportsTo": 63,
+        "phone": "(946) 701-6165",
+        "extension": 3828,
+        "hireDate": new Date(2014, 10, 8),
+        "fullTime": true,
+        "position": "Junior Software Developer",
+        "timeInPosition": 2
+    },
+    {
+        "id": 84,
+        "name": "Regan Patterson",
+        "reportsTo": 63,
+        "phone": "(265) 946-1765",
+        "extension": 6955,
+        "hireDate": new Date(2012, 3, 1),
+        "fullTime": true,
+        "position": "Technical Writer",
+        "timeInPosition": 6
+    },
+    {
+        "id": 85,
+        "name": "Drew Mckay",
+        "reportsTo": 63,
+        "phone": "(327) 293-0162",
+        "extension": 6904,
+        "hireDate": new Date(2011, 3, 25),
+        "fullTime": true,
+        "position": "Senior Software Developer",
+        "timeInPosition": 3
+    },
+    {
+        "id": 86,
+        "name": "Daniel Mccarthy",
+        "reportsTo": 8,
+        "phone": "(624) 483-6206",
+        "extension": 9112,
+        "hireDate": new Date(2013, 12, 3),
+        "fullTime": false,
+        "position": "Staff Attorney",
+        "timeInPosition": 0
+    },
+    {
+        "id": 87,
+        "name": "Dahlia Hunt",
+        "reportsTo": 69,
+        "phone": "(720) 339-5202",
+        "extension": 3690,
+        "hireDate": new Date(2011, 3, 26),
+        "fullTime": true,
+        "position": "Senior Software Developer",
+        "timeInPosition": 4
+    },
+    {
+        "id": 88,
+        "name": "Bevis Miller",
+        "reportsTo": 63,
+        "phone": "(525) 557-0169",
+        "extension": 6978,
+        "hireDate": new Date(2011, 4, 19),
+        "fullTime": true,
+        "position": "Senior Software Developer",
+        "timeInPosition": 5
+    },
+    {
+        "id": 89,
+        "name": "Bruce Mccarty",
+        "reportsTo": 63,
+        "phone": "(936) 777-8730",
+        "extension": 6552,
+        "hireDate": new Date(2014, 3, 28),
+        "fullTime": true,
+        "position": "Support Officer",
+        "timeInPosition": 5
+    },
+    {
+        "id": 90,
+        "name": "Ocean Blair",
+        "reportsTo": 43,
+        "phone": "(343) 586-6614",
+        "extension": 1424,
+        "hireDate": new Date(2011, 4, 27),
+        "fullTime": true,
+        "position": "Team Lead",
+        "timeInPosition": 2
+    },
+    {
+        "id": 91,
+        "name": "Guinevere Osborn",
+        "reportsTo": 90,
+        "phone": "(424) 741-0006",
+        "extension": 3166,
+        "hireDate": new Date(2014, 11, 19),
+        "fullTime": true,
+        "position": "Software Developer",
+        "timeInPosition": 3
+    },
+    {
+        "id": 92,
+        "name": "Olga Strong",
+        "reportsTo": 90,
+        "phone": "(949) 417-1168",
+        "extension": 4568,
+        "hireDate": new Date(2015, 5, 28),
+        "fullTime": true,
+        "position": "Graphic Designer",
+        "timeInPosition": 4
+    },
+    {
+        "id": 93,
+        "name": "Robert Orr",
+        "reportsTo": 90,
+        "phone": "(977) 341-3721",
+        "extension": 9241,
+        "hireDate": new Date(2012, 8, 20),
+        "fullTime": false,
+        "position": "Support Officer",
+        "timeInPosition": 6
+    },
+    {
+        "id": 94,
+        "name": "Adria Stanley",
+        "reportsTo": 69,
+        "phone": "(536) 357-6391",
+        "extension": 3374,
+        "hireDate": new Date(2014, 7, 26),
+        "fullTime": true,
+        "position": "Software Developer",
+        "timeInPosition": 0
+    },
+    {
+        "id": 95,
+        "name": "Odette Sears",
+        "reportsTo": 90,
+        "phone": "(264) 818-6576",
+        "extension": 1914,
+        "hireDate": new Date(2013, 7, 5),
+        "fullTime": true,
+        "position": "Senior Software Developer",
+        "timeInPosition": 3
+    },
+    {
+        "id": 96,
+        "name": "Cassady Whitley",
+        "reportsTo": 40,
+        "phone": "(996) 587-8405",
+        "extension": 780,
+        "hireDate": new Date(2013, 5, 7),
+        "fullTime": true,
+        "position": "Software Developer",
+        "timeInPosition": 5
+    },
+    {
+        "id": 97,
+        "name": "Haviva Campbell",
+        "reportsTo": 40,
+        "phone": "(263) 887-4689",
+        "extension": 2808,
+        "hireDate": new Date(2013, 3, 5),
+        "fullTime": true,
+        "position": "Support Officer",
+        "timeInPosition": 2
+    },
+    {
+        "id": 98,
+        "name": "Cameron Ayers",
+        "reportsTo": 40,
+        "phone": "(470) 709-8030",
+        "extension": 2893,
+        "hireDate": new Date(2013, 8, 28),
+        "fullTime": true,
+        "position": "Support Officer",
+        "timeInPosition": 3
+    },
+    {
+        "id": 99,
+        "name": "Martha Sargent",
+        "reportsTo": 40,
+        "phone": "(587) 812-4418",
+        "extension": 5099,
+        "hireDate": new Date(2014, 2, 27),
+        "fullTime": true,
+        "position": "Senior Software Developer",
+        "timeInPosition": 3
+    },
+    {
+        "id": 100,
+        "name": "Darrel Kinney",
+        "reportsTo": 40,
+        "phone": "(888) 483-9606",
+        "extension": 4779,
+        "hireDate": new Date(2014, 3, 24),
+        "fullTime": false,
+        "position": "Graphic Designer",
+        "timeInPosition": 1
+    }
+];
+
+export default employeesFlat;
diff --git a/vue-options-api-demos/treelist/flat-data/main.js b/vue-options-api-demos/treelist/flat-data/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/flat-data/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/flat-data/main.vue b/vue-options-api-demos/treelist/flat-data/main.vue
new file mode 100644
index 00000000..467d9b9f
--- /dev/null
+++ b/vue-options-api-demos/treelist/flat-data/main.vue
@@ -0,0 +1,117 @@
+<template>
+  <TreeList
+    :style="{
+      maxHeight: '510px',
+      overflow: 'auto',
+    }"
+    :expand-field="expandField"
+    :sub-items-field="subItemsField"
+    :data-items="processedData"
+    :columns="columns"
+    :filter="filter"
+    :filterable="true"
+    :sort="sort"
+    :sortable="true"
+    @datastatechange="handleDataStateChange"
+    @expandchange="onExpandChange"
+  />
+</template>
+
+<script>
+import employeesFlat from './flat-data';
+import {
+  TreeList,
+  filterBy,
+  orderBy,
+  mapTree,
+  createDataTree,
+  extendDataItem,
+} from '@progress/kendo-vue-treelist';
+
+export default {
+  components: {
+    TreeList,
+  },
+  mounted() {
+    this.dataTree = createDataTree(
+      employeesFlat,
+      (i) => i.id,
+      (i) => i.reportsTo,
+      this.subItemsField
+    );
+  },
+  data() {
+    return {
+      dataTree: [],
+      subItemsField: 'employees',
+      expandField: 'expanded',
+      expanded: [1, 2, 32],
+      filter: [],
+      sort: [
+        {
+          field: 'name',
+          dir: 'asc',
+        },
+      ],
+      columns: [
+        {
+          field: 'name',
+          title: 'Name',
+          width: '250px',
+          filter: 'text',
+          expandable: true,
+        },
+        {
+          field: 'hireDate',
+          title: 'Hire Date',
+          width: '200px',
+          format: '{0:d}',
+          filter: 'date',
+        },
+        {
+          field: 'timeInPosition',
+          title: 'Year(s) in Position',
+          width: '200px',
+          filter: 'numeric',
+        },
+        {
+          field: 'fullTime',
+          title: 'Full Time',
+          width: '100px',
+          filter: 'boolean',
+        },
+      ],
+    };
+  },
+  computed: {
+    processedData() {
+      let data = this.dataTree;
+      let filteredData = filterBy(data, this.filter, this.subItemsField);
+      let sortedData = orderBy(filteredData, this.sort, this.subItemsField);
+      return this.addExpandField(sortedData);
+    },
+  },
+  methods: {
+    onExpandChange(e) {
+      this.expanded = e.value
+        ? this.expanded.filter((id) => id !== e.dataItem.id)
+        : [...this.expanded, e.dataItem.id];
+    },
+    createAppState: function (dataState) {
+      this.sort = dataState.sort;
+      this.filter = dataState.filter;
+    },
+    handleDataStateChange: function (event) {
+      this.createAppState(event.data);
+    },
+    addExpandField(dataTree) {
+      const expanded = this.expanded;
+      return mapTree(dataTree, this.subItemsField, (item) =>
+        extendDataItem(item, this.subItemsField, {
+          [this.expandField]: expanded.includes(item.id),
+        })
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treelist/get-started/main.js b/vue-options-api-demos/treelist/get-started/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/get-started/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/get-started/main.vue b/vue-options-api-demos/treelist/get-started/main.vue
new file mode 100644
index 00000000..c1eeaeb6
--- /dev/null
+++ b/vue-options-api-demos/treelist/get-started/main.vue
@@ -0,0 +1,42 @@
+<template>
+  <TreeList
+    :style="{
+      'max-height': '510px',
+      overflow: 'auto',
+    }"
+    :expand-field="expandField"
+    :sub-items-field="subItemsField"
+    :data-items="dataItems"
+    :columns="columns"
+  />
+</template>
+
+<script>
+import dataItems from './simple-data';
+import { TreeList } from '@progress/kendo-vue-treelist';
+
+export default {
+  components: {
+    TreeList,
+  },
+  data() {
+    return {
+      dataItems,
+      subItemsField: 'employees',
+      expandField: 'expanded',
+      columns: [
+        {
+          field: 'name',
+          title: 'Name',
+          width: '250px',
+          expandable: true,
+        },
+        {
+          field: 'title',
+          title: 'Title',
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treelist/get-started/simple-data.js b/vue-options-api-demos/treelist/get-started/simple-data.js
new file mode 100644
index 00000000..b35aca00
--- /dev/null
+++ b/vue-options-api-demos/treelist/get-started/simple-data.js
@@ -0,0 +1,28 @@
+const data = [
+  {
+    id: 1,
+    name: "Daryl Sweeney",
+    title: "Chief Executive Officer",
+    phone: "(555) 924-9726",
+    managerId: null,
+    expanded: true,
+    employees: [
+      {
+        id: 2,
+        name: "Guy Wooten",
+        title: "Chief Technical Officer",
+        phone: "(438) 738-4935",
+        managerId: 1
+      }
+    ]
+  },
+  {
+    id: 32,
+    name: "Buffy Weber",
+    title: "VP, Engineering",
+    phone: "(699) 838-6121",
+    managerId: null
+  }
+];
+
+export default data;
diff --git a/vue-options-api-demos/treelist/globalization/data.js b/vue-options-api-demos/treelist/globalization/data.js
new file mode 100644
index 00000000..f66aec4d
--- /dev/null
+++ b/vue-options-api-demos/treelist/globalization/data.js
@@ -0,0 +1,1150 @@
+
+const employees = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2,
+        "employees": [
+            {
+                "id": 2,
+                "name": "Guy Wooten",
+                "reportsTo": 1,
+                "phone": "(438) 738-4935",
+                "extension": 1155,
+                "hireDate": new Date(2010, 3, 3),
+                "fullTime": true,
+                "position": "Chief Technical Officer",
+                "timeInPosition": 1,
+                "employees": [
+                    {
+                        "id": 32,
+                        "name": "Buffy Weber",
+                        "reportsTo": 2,
+                        "phone": "(699) 838-6121",
+                        "extension": 8933,
+                        "hireDate": new Date(2011, 7, 11),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 11,
+                                "name": "Hyacinth Hood",
+                                "reportsTo": 32,
+                                "phone": "(889) 345-2438",
+                                "extension": 8564,
+                                "hireDate": new Date(2014, 2, 3),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 60,
+                                        "name": "Akeem Carr",
+                                        "reportsTo": 11,
+                                        "phone": "(738) 136-2814",
+                                        "extension": 9353,
+                                        "hireDate": new Date(2011, 4, 21),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 78,
+                                        "name": "Rinah Simon",
+                                        "reportsTo": 11,
+                                        "phone": "(285) 912-5271",
+                                        "extension": 7795,
+                                        "hireDate": new Date(2012, 10, 11),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 42,
+                                "name": "Gage Daniels",
+                                "reportsTo": 32,
+                                "phone": "(107) 290-6260",
+                                "extension": 896,
+                                "hireDate": new Date(2013, 5, 16),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 5
+                            },
+                            {
+                                "id": 43,
+                                "name": "Constance Vazquez",
+                                "reportsTo": 32,
+                                "phone": "(800) 301-1978",
+                                "extension": 5141,
+                                "hireDate": new Date(2011, 6, 7),
+                                "fullTime": true,
+                                "position": "Director, Engineering",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 46,
+                                        "name": "Darrel Solis",
+                                        "reportsTo": 43,
+                                        "phone": "(327) 977-0216",
+                                        "extension": 7779,
+                                        "hireDate": new Date(2015, 4, 25),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 47,
+                                                "name": "Brian Yang",
+                                                "reportsTo": 46,
+                                                "phone": "(565) 146-5435",
+                                                "extension": 3885,
+                                                "hireDate": new Date(2012, 9, 27),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 50,
+                                                "name": "Lillian Bradshaw",
+                                                "reportsTo": 46,
+                                                "phone": "(323) 509-3479",
+                                                "extension": 5426,
+                                                "hireDate": new Date(2014, 5, 10),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 51,
+                                                "name": "Christian Palmer",
+                                                "reportsTo": 46,
+                                                "phone": "(490) 421-8718",
+                                                "extension": 3706,
+                                                "hireDate": new Date(2012, 12, 27),
+                                                "fullTime": false,
+                                                "position": "Technical Lead",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 55,
+                                                "name": "Summer Mosley",
+                                                "reportsTo": 46,
+                                                "phone": "(784) 962-2301",
+                                                "extension": 5492,
+                                                "hireDate": new Date(2010, 3, 2),
+                                                "fullTime": true,
+                                                "position": "QA Engineer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 56,
+                                                "name": "Barry Ayers",
+                                                "reportsTo": 46,
+                                                "phone": "(452) 373-9227",
+                                                "extension": 1308,
+                                                "hireDate": new Date(2011, 10, 11),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 59,
+                                                "name": "Keiko Espinoza",
+                                                "reportsTo": 46,
+                                                "phone": "(226) 600-5305",
+                                                "extension": 9363,
+                                                "hireDate": new Date(2011, 9, 18),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 61,
+                                                "name": "Candace Pickett",
+                                                "reportsTo": 46,
+                                                "phone": "(120) 117-7475",
+                                                "extension": 5178,
+                                                "hireDate": new Date(2010, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 63,
+                                        "name": "Mia Caldwell",
+                                        "reportsTo": 43,
+                                        "phone": "(848) 636-6470",
+                                        "extension": 6368,
+                                        "hireDate": new Date(2012, 10, 7),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 65,
+                                                "name": "Thomas Terry",
+                                                "reportsTo": 63,
+                                                "phone": "(764) 831-4248",
+                                                "extension": 3574,
+                                                "hireDate": new Date(2015, 6, 15),
+                                                "fullTime": false,
+                                                "position": "Senior Enterprise Support Officer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 67,
+                                                "name": "Ruth Downs",
+                                                "reportsTo": 63,
+                                                "phone": "(138) 991-1440",
+                                                "extension": 8067,
+                                                "hireDate": new Date(2013, 7, 13),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 70,
+                                                "name": "Yasir Wilder",
+                                                "reportsTo": 63,
+                                                "phone": "(759) 701-8665",
+                                                "extension": 8350,
+                                                "hireDate": new Date(2010, 11, 8),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 71,
+                                                "name": "Flavia Short",
+                                                "reportsTo": 63,
+                                                "phone": "(370) 133-9238",
+                                                "extension": 6390,
+                                                "hireDate": new Date(2013, 2, 21),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 74,
+                                                "name": "Aaron Roach",
+                                                "reportsTo": 63,
+                                                "phone": "(958) 717-9230",
+                                                "extension": 4899,
+                                                "hireDate": new Date(2011, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 75,
+                                                "name": "Eric Russell",
+                                                "reportsTo": 63,
+                                                "phone": "(516) 575-8505",
+                                                "extension": 2224,
+                                                "hireDate": new Date(2012, 10, 28),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 76,
+                                                "name": "Cheyenne Olson",
+                                                "reportsTo": 63,
+                                                "phone": "(241) 645-0257",
+                                                "extension": 9181,
+                                                "hireDate": new Date(2015, 5, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 77,
+                                                "name": "Shaine Avila",
+                                                "reportsTo": 63,
+                                                "phone": "(844) 435-1360",
+                                                "extension": 3374,
+                                                "hireDate": new Date(2010, 1, 31),
+                                                "fullTime": true,
+                                                "position": "UI Designer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 81,
+                                                "name": "Chantale Long",
+                                                "reportsTo": 63,
+                                                "phone": "(252) 419-6891",
+                                                "extension": 7868,
+                                                "hireDate": new Date(2010, 6, 17),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 83,
+                                                "name": "Dane Cruz",
+                                                "reportsTo": 63,
+                                                "phone": "(946) 701-6165",
+                                                "extension": 3828,
+                                                "hireDate": new Date(2014, 10, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 84,
+                                                "name": "Regan Patterson",
+                                                "reportsTo": 63,
+                                                "phone": "(265) 946-1765",
+                                                "extension": 6955,
+                                                "hireDate": new Date(2012, 3, 1),
+                                                "fullTime": true,
+                                                "position": "Technical Writer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 85,
+                                                "name": "Drew Mckay",
+                                                "reportsTo": 63,
+                                                "phone": "(327) 293-0162",
+                                                "extension": 6904,
+                                                "hireDate": new Date(2011, 3, 25),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 88,
+                                                "name": "Bevis Miller",
+                                                "reportsTo": 63,
+                                                "phone": "(525) 557-0169",
+                                                "extension": 6978,
+                                                "hireDate": new Date(2011, 4, 19),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 89,
+                                                "name": "Bruce Mccarty",
+                                                "reportsTo": 63,
+                                                "phone": "(936) 777-8730",
+                                                "extension": 6552,
+                                                "hireDate": new Date(2014, 3, 28),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 5
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 90,
+                                        "name": "Ocean Blair",
+                                        "reportsTo": 43,
+                                        "phone": "(343) 586-6614",
+                                        "extension": 1424,
+                                        "hireDate": new Date(2011, 4, 27),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 91,
+                                                "name": "Guinevere Osborn",
+                                                "reportsTo": 90,
+                                                "phone": "(424) 741-0006",
+                                                "extension": 3166,
+                                                "hireDate": new Date(2014, 11, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 92,
+                                                "name": "Olga Strong",
+                                                "reportsTo": 90,
+                                                "phone": "(949) 417-1168",
+                                                "extension": 4568,
+                                                "hireDate": new Date(2015, 5, 28),
+                                                "fullTime": true,
+                                                "position": "Graphic Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 93,
+                                                "name": "Robert Orr",
+                                                "reportsTo": 90,
+                                                "phone": "(977) 341-3721",
+                                                "extension": 9241,
+                                                "hireDate": new Date(2012, 8, 20),
+                                                "fullTime": false,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 95,
+                                                "name": "Odette Sears",
+                                                "reportsTo": 90,
+                                                "phone": "(264) 818-6576",
+                                                "extension": 1914,
+                                                "hireDate": new Date(2013, 7, 5),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 45,
+                                "name": "Zelda Medina",
+                                "reportsTo": 32,
+                                "phone": "(563) 359-6023",
+                                "extension": 2600,
+                                "hireDate": new Date(2012, 11, 6),
+                                "fullTime": true,
+                                "position": "QA Architect",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    },
+                    {
+                        "id": 52,
+                        "name": "Skyler Cleveland",
+                        "reportsTo": 2,
+                        "phone": "(217) 280-5300",
+                        "extension": 9655,
+                        "hireDate": new Date(2014, 11, 10),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 40,
+                                "name": "Karleigh Garza",
+                                "reportsTo": 52,
+                                "phone": "(370) 983-8796",
+                                "extension": 4044,
+                                "hireDate": new Date(2014, 3, 10),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 49,
+                                        "name": "Elmo Tyson",
+                                        "reportsTo": 40,
+                                        "phone": "(344) 496-9555",
+                                        "extension": 6950,
+                                        "hireDate": new Date(2014, 9, 18),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 72,
+                                        "name": "Stacey Lynn",
+                                        "reportsTo": 40,
+                                        "phone": "(140) 772-7509",
+                                        "extension": 8396,
+                                        "hireDate": new Date(2014, 7, 31),
+                                        "fullTime": false,
+                                        "position": "QA Engineer",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 80,
+                                                "name": "Meredith Parrish",
+                                                "reportsTo": 72,
+                                                "phone": "(714) 284-2408",
+                                                "extension": 7675,
+                                                "hireDate": new Date(2012, 11, 13),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 96,
+                                        "name": "Cassady Whitley",
+                                        "reportsTo": 40,
+                                        "phone": "(996) 587-8405",
+                                        "extension": 780,
+                                        "hireDate": new Date(2013, 5, 7),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 5
+                                    },
+                                    {
+                                        "id": 97,
+                                        "name": "Haviva Campbell",
+                                        "reportsTo": 40,
+                                        "phone": "(263) 887-4689",
+                                        "extension": 2808,
+                                        "hireDate": new Date(2013, 3, 5),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 98,
+                                        "name": "Cameron Ayers",
+                                        "reportsTo": 40,
+                                        "phone": "(470) 709-8030",
+                                        "extension": 2893,
+                                        "hireDate": new Date(2013, 8, 28),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 99,
+                                        "name": "Martha Sargent",
+                                        "reportsTo": 40,
+                                        "phone": "(587) 812-4418",
+                                        "extension": 5099,
+                                        "hireDate": new Date(2014, 2, 27),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 100,
+                                        "name": "Darrel Kinney",
+                                        "reportsTo": 40,
+                                        "phone": "(888) 483-9606",
+                                        "extension": 4779,
+                                        "hireDate": new Date(2014, 3, 24),
+                                        "fullTime": false,
+                                        "position": "Graphic Designer",
+                                        "timeInPosition": 1
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 54,
+                                "name": "Kuame Frye",
+                                "reportsTo": 52,
+                                "phone": "(360) 721-5886",
+                                "extension": 2730,
+                                "hireDate": new Date(2010, 11, 17),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 64,
+                                        "name": "Ori Wynn",
+                                        "reportsTo": 54,
+                                        "phone": "(366) 342-0166",
+                                        "extension": 7252,
+                                        "hireDate": new Date(2015, 6, 21),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 0,
+                                        "employees": [
+                                            {
+                                                "id": 6,
+                                                "name": "Moses Duncan",
+                                                "reportsTo": 64,
+                                                "phone": "(421) 611-4814",
+                                                "extension": 669,
+                                                "hireDate": new Date(2010, 5, 24),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 12,
+                                                "name": "Jamalia Wallace",
+                                                "reportsTo": 64,
+                                                "phone": "(611) 391-8016",
+                                                "extension": 1952,
+                                                "hireDate": new Date(2011, 9, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Designer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 62,
+                                                "name": "Palmer Gregory",
+                                                "reportsTo": 64,
+                                                "phone": "(360) 430-2505",
+                                                "extension": 4337,
+                                                "hireDate": new Date(2014, 8, 30),
+                                                "fullTime": true,
+                                                "position": "Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 68,
+                                                "name": "Mallory Gilliam",
+                                                "reportsTo": 64,
+                                                "phone": "(878) 423-2971",
+                                                "extension": 1341,
+                                                "hireDate": new Date(2014, 7, 24),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 73,
+                                                "name": "Ima Hughes",
+                                                "reportsTo": 64,
+                                                "phone": "(905) 485-8001",
+                                                "extension": 1273,
+                                                "hireDate": new Date(2013, 6, 3),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 79,
+                                                "name": "Duncan Mathews",
+                                                "reportsTo": 64,
+                                                "phone": "(790) 971-9709",
+                                                "extension": 4573,
+                                                "hireDate": new Date(2011, 8, 21),
+                                                "fullTime": false,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 69,
+                                "name": "Sierra Beasley",
+                                "reportsTo": 52,
+                                "phone": "(271) 953-1968",
+                                "extension": 3324,
+                                "hireDate": new Date(2011, 4, 2),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 3,
+                                "employees": [
+                                    {
+                                        "id": 38,
+                                        "name": "Elton Tucker",
+                                        "reportsTo": 69,
+                                        "phone": "(988) 930-9331",
+                                        "extension": 9216,
+                                        "hireDate": new Date(2015, 6, 4),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 1
+                                    },
+                                    {
+                                        "id": 39,
+                                        "name": "Iona Brennan",
+                                        "reportsTo": 69,
+                                        "phone": "(356) 563-0600",
+                                        "extension": 5634,
+                                        "hireDate": new Date(2010, 9, 23),
+                                        "fullTime": true,
+                                        "position": "Junior Support Officer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 53,
+                                        "name": "Paul Campos",
+                                        "reportsTo": 69,
+                                        "phone": "(899) 205-1689",
+                                        "extension": 8586,
+                                        "hireDate": new Date(2011, 3, 17),
+                                        "fullTime": true,
+                                        "position": "Interaction Designer",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 66,
+                                                "name": "Gloria Freeman",
+                                                "reportsTo": 53,
+                                                "phone": "(344) 950-9168",
+                                                "extension": 4738,
+                                                "hireDate": new Date(2013, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Junior Interaction Designer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 57,
+                                        "name": "Alyssa Hansen",
+                                        "reportsTo": 69,
+                                        "phone": "(548) 925-4799",
+                                        "extension": 4716,
+                                        "hireDate": new Date(2011, 1, 19),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 82,
+                                        "name": "Yael Walters",
+                                        "reportsTo": 69,
+                                        "phone": "(311) 489-8191",
+                                        "extension": 6520,
+                                        "hireDate": new Date(2013, 7, 4),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 87,
+                                        "name": "Dahlia Hunt",
+                                        "reportsTo": 69,
+                                        "phone": "(720) 339-5202",
+                                        "extension": 3690,
+                                        "hireDate": new Date(2011, 3, 26),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 94,
+                                        "name": "Adria Stanley",
+                                        "reportsTo": 69,
+                                        "phone": "(536) 357-6391",
+                                        "extension": 3374,
+                                        "hireDate": new Date(2014, 7, 26),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "Priscilla Frank",
+                "reportsTo": 1,
+                "phone": "(278) 927-2684",
+                "extension": 4183,
+                "hireDate": new Date(2014, 11, 30),
+                "fullTime": true,
+                "position": "Chief Product Officer",
+                "timeInPosition": 2,
+                "employees": [
+                    {
+                        "id": 4,
+                        "name": "Ursula Holmes",
+                        "reportsTo": 3,
+                        "phone": "(302) 760-2034",
+                        "extension": 2226,
+                        "hireDate": new Date(2011, 6, 6),
+                        "fullTime": true,
+                        "position": "EVP, Product Strategy",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 24,
+                        "name": "Melvin Carrillo",
+                        "reportsTo": 3,
+                        "phone": "(348) 933-5167",
+                        "extension": 2482,
+                        "hireDate": new Date(2014, 7, 21),
+                        "fullTime": true,
+                        "position": "Director, Developer Relations",
+                        "timeInPosition": 6,
+                        "employees": [
+                            {
+                                "id": 29,
+                                "name": "Martha Chavez",
+                                "reportsTo": 24,
+                                "phone": "(860) 754-3464",
+                                "extension": 4531,
+                                "hireDate": new Date(2013, 3, 12),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 30,
+                                "name": "Oren Fox",
+                                "reportsTo": 24,
+                                "phone": "(572) 414-3299",
+                                "extension": 4849,
+                                "hireDate": new Date(2013, 5, 14),
+                                "fullTime": false,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 41,
+                                "name": "Amos Barr",
+                                "reportsTo": 24,
+                                "phone": "(470) 381-3718",
+                                "extension": 7643,
+                                "hireDate": new Date(2010, 3, 9),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "Anika Vega",
+                "reportsTo": 1,
+                "phone": "(910) 714-1802",
+                "extension": 6353,
+                "hireDate": new Date(2010, 2, 25),
+                "fullTime": true,
+                "position": "Chief Process Officer",
+                "timeInPosition": 5,
+                "employees": [
+                    {
+                        "id": 10,
+                        "name": "Vernon Ballard",
+                        "reportsTo": 5,
+                        "phone": "(702) 185-8890",
+                        "extension": 9242,
+                        "hireDate": new Date(2015, 6, 26),
+                        "fullTime": true,
+                        "position": "Director Facilities",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 16,
+                                "name": "Ali Guy",
+                                "reportsTo": 10,
+                                "phone": "(429) 912-6578",
+                                "extension": 2225,
+                                "hireDate": new Date(2014, 6, 29),
+                                "fullTime": true,
+                                "position": "Operations Manager",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 23,
+                                        "name": "Bruce Reilly",
+                                        "reportsTo": 16,
+                                        "phone": "(995) 243-7302",
+                                        "extension": 4815,
+                                        "hireDate": new Date(2015, 4, 1),
+                                        "fullTime": true,
+                                        "position": "Head of Security",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 26,
+                                                "name": "Rowan Morin",
+                                                "reportsTo": 23,
+                                                "phone": "(792) 141-4374",
+                                                "extension": 1844,
+                                                "hireDate": new Date(2015, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Building Security",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 44,
+                                                "name": "Benedict Soto",
+                                                "reportsTo": 23,
+                                                "phone": "(822) 282-5991",
+                                                "extension": 6422,
+                                                "hireDate": new Date(2012, 6, 1),
+                                                "fullTime": false,
+                                                "position": "Building Security",
+                                                "timeInPosition": 4
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 48,
+                                        "name": "Maryam Rios",
+                                        "reportsTo": 16,
+                                        "phone": "(673) 764-6720",
+                                        "extension": 531,
+                                        "hireDate": new Date(2014, 3, 3),
+                                        "fullTime": true,
+                                        "position": "Team Lead, Personal Assistants",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 58,
+                                                "name": "Rose Mcintyre",
+                                                "reportsTo": 48,
+                                                "phone": "(771) 615-4590",
+                                                "extension": 7094,
+                                                "hireDate": new Date(2015, 6, 30),
+                                                "fullTime": false,
+                                                "position": "Personal Assistant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "Nevada Hart",
+                "reportsTo": 1,
+                "phone": "(254) 220-1576",
+                "extension": 6649,
+                "hireDate": new Date(2015, 8, 17),
+                "fullTime": true,
+                "position": "Chief Financial Officer",
+                "timeInPosition": 6,
+                "employees": [
+                    {
+                        "id": 14,
+                        "name": "Zena Sanford",
+                        "reportsTo": 7,
+                        "phone": "(437) 568-8160",
+                        "extension": 4452,
+                        "hireDate": new Date(2010, 11, 30),
+                        "fullTime": true,
+                        "position": "VP, Finance",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 15,
+                        "name": "Quinlan Howe",
+                        "reportsTo": 7,
+                        "phone": "(464) 334-9748",
+                        "extension": 8722,
+                        "hireDate": new Date(2011, 6, 9),
+                        "fullTime": false,
+                        "position": "Senior Director, Finance",
+                        "timeInPosition": 0,
+                        "employees": [
+                            {
+                                "id": 17,
+                                "name": "Indira Lopez",
+                                "reportsTo": 15,
+                                "phone": "(301) 368-0938",
+                                "extension": 8027,
+                                "hireDate": new Date(2013, 8, 18),
+                                "fullTime": true,
+                                "position": "ERP Team Lead",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 18,
+                                        "name": "Lareina Lara",
+                                        "reportsTo": 17,
+                                        "phone": "(233) 457-7482",
+                                        "extension": 1996,
+                                        "hireDate": new Date(2010, 4, 30),
+                                        "fullTime": true,
+                                        "position": "ERP Solutions Consultant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 19,
+                                        "name": "Maxwell Wise",
+                                        "reportsTo": 17,
+                                        "phone": "(570) 494-2531",
+                                        "extension": 9865,
+                                        "hireDate": new Date(2012, 5, 19),
+                                        "fullTime": true,
+                                        "position": "Systems Engineer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 20,
+                                "name": "Hunter Mcbride",
+                                "reportsTo": 15,
+                                "phone": "(409) 442-7016",
+                                "extension": 4284,
+                                "hireDate": new Date(2012, 10, 20),
+                                "fullTime": true,
+                                "position": "Senior Director, Tax",
+                                "timeInPosition": 3
+                            },
+                            {
+                                "id": 21,
+                                "name": "Jana Serrano",
+                                "reportsTo": 15,
+                                "phone": "(910) 718-4620",
+                                "extension": 6970,
+                                "hireDate": new Date(2010, 4, 2),
+                                "fullTime": true,
+                                "position": "Financial Planning & Analysis Manager",
+                                "timeInPosition": 2
+                            },
+                            {
+                                "id": 22,
+                                "name": "Zachery Shelton",
+                                "reportsTo": 15,
+                                "phone": "(310) 240-8675",
+                                "extension": 4527,
+                                "hireDate": new Date(2011, 11, 23),
+                                "fullTime": false,
+                                "position": "Corporate Finance Controller",
+                                "timeInPosition": 6,
+                                "employees": [
+                                    {
+                                        "id": 28,
+                                        "name": "Cullen Freeman",
+                                        "reportsTo": 22,
+                                        "phone": "(136) 554-8814",
+                                        "extension": 9861,
+                                        "hireDate": new Date(2014, 3, 15),
+                                        "fullTime": true,
+                                        "position": "Treasurer Accountant",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 31,
+                                        "name": "Quinn Dean",
+                                        "reportsTo": 22,
+                                        "phone": "(152) 613-3507",
+                                        "extension": 6621,
+                                        "hireDate": new Date(2015, 1, 29),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 34,
+                                        "name": "Samantha Brady",
+                                        "reportsTo": 22,
+                                        "phone": "(206) 398-4328",
+                                        "extension": 1157,
+                                        "hireDate": new Date(2011, 2, 13),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 35,
+                                                "name": "Tamara Green",
+                                                "reportsTo": 34,
+                                                "phone": "(219) 248-2789",
+                                                "extension": 4880,
+                                                "hireDate": new Date(2014, 2, 4),
+                                                "fullTime": true,
+                                                "position": "Junior Accountant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 36,
+                                        "name": "Olympia Coleman",
+                                        "reportsTo": 22,
+                                        "phone": "(944) 853-6383",
+                                        "extension": 2136,
+                                        "hireDate": new Date(2013, 7, 31),
+                                        "fullTime": true,
+                                        "position": "Collections Manager",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 37,
+                                        "name": "Breanna Goodwin",
+                                        "reportsTo": 22,
+                                        "phone": "(379) 988-9630",
+                                        "extension": 5898,
+                                        "hireDate": new Date(2010, 5, 23),
+                                        "fullTime": false,
+                                        "position": "Payroll Specialist",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 27,
+                                "name": "Curran Travis",
+                                "reportsTo": 15,
+                                "phone": "(438) 135-8033",
+                                "extension": 3841,
+                                "hireDate": new Date(2011, 6, 13),
+                                "fullTime": true,
+                                "position": "Finance Controller",
+                                "timeInPosition": 5
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "Hunter Fry",
+                "reportsTo": 1,
+                "phone": "(766) 358-9858",
+                "extension": 3741,
+                "hireDate": new Date(2011, 2, 12),
+                "fullTime": false,
+                "position": "General Counsel",
+                "timeInPosition": 3,
+                "employees": [
+                    {
+                        "id": 9,
+                        "name": "Kuame Carrillo",
+                        "reportsTo": 8,
+                        "phone": "(192) 383-1305",
+                        "extension": 9228,
+                        "hireDate": new Date(2011, 2, 22),
+                        "fullTime": true,
+                        "position": "Associate General Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 13,
+                        "name": "Stacy Todd",
+                        "reportsTo": 8,
+                        "phone": "(925) 286-3327",
+                        "extension": 8565,
+                        "hireDate": new Date(2014, 7, 5),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 33,
+                        "name": "Valentine Wyatt",
+                        "reportsTo": 8,
+                        "phone": "(165) 166-6205",
+                        "extension": 3588,
+                        "hireDate": new Date(2015, 5, 21),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 5
+                    },
+                    {
+                        "id": 86,
+                        "name": "Daniel Mccarthy",
+                        "reportsTo": 8,
+                        "phone": "(624) 483-6206",
+                        "extension": 9112,
+                        "hireDate": new Date(2013, 12, 3),
+                        "fullTime": false,
+                        "position": "Staff Attorney",
+                        "timeInPosition": 0
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default employees;
diff --git a/vue-options-api-demos/treelist/globalization/es.json b/vue-options-api-demos/treelist/globalization/es.json
new file mode 100644
index 00000000..77768d47
--- /dev/null
+++ b/vue-options-api-demos/treelist/globalization/es.json
@@ -0,0 +1,44 @@
+{
+    "datepicker": {
+        "toggleCalendar": "Alternar calendario"
+    },
+    "calendar": {
+        "today": "Hoy"
+    },
+    "dateinput": {
+        "increment": "Incrementar valor",
+        "decrement": "Disminuir valor"
+    },
+    "numerictextbox": {
+        "increment": "Incrementar valor",
+        "decrement": "Disminuir valor"
+    },
+    "treelist": {
+        "noRecords": "No hay datos disponibles.",
+        "filterEqOperator": "Es igual a",
+        "filterNotEqOperator": "No es igual a",
+        "filterIsNullOperator": "Es nulo",
+        "filterIsNotNullOperator": "No es nulo",
+        "filterIsEmptyOperator": "Está vacío",
+        "filterIsNotEmptyOperator": "No está vacío",
+        "filterStartsWithOperator": "Comienza con",
+        "filterContainsOperator": "Contiene",
+        "filterNotContainsOperator": "No contiene",
+        "filterEndsWithOperator": "Termina en",
+        "filterGteOperator": "Es mayor o igual que",
+        "filterGtOperator": "Es mayor que",
+        "filterLteOperator": "Es menor o igual que",
+        "filterLtOperator": "Es menor o igual que",
+        "filterIsTrue": "Sí",
+        "filterIsFalse": "No",
+        "filterBooleanAll": "(Todas)",
+        "filterAfterOrEqualOperator": "Es posterior o igual a",
+        "filterAfterOperator": "Es posterior",
+        "filterBeforeOperator": "Es anterior",
+        "filterBeforeOrEqualOperator": "Es anterior o igual a",
+        "filterFilterButton": "Filtrar",
+        "filterClearButton": "Limpiar filtros",
+        "filterAndLogic": "Y",
+        "filterOrLogic": "O"
+    }
+}
diff --git a/vue-options-api-demos/treelist/globalization/main.js b/vue-options-api-demos/treelist/globalization/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/globalization/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/globalization/main.vue b/vue-options-api-demos/treelist/globalization/main.vue
new file mode 100644
index 00000000..844af672
--- /dev/null
+++ b/vue-options-api-demos/treelist/globalization/main.vue
@@ -0,0 +1,99 @@
+<template>
+  <localization :language="'es-ES'">
+    <TreeList
+      :style="{
+        maxHeight: '510px',
+        overflow: 'auto',
+      }"
+      :expandField="expandField"
+      :subItemsField="subItemsField"
+      @expandchange="onExpandChange"
+      :filter="filter"
+      :data-items="processData"
+      @filterchange="handleFilterChange"
+      :columns="columns"
+    />
+  </localization>
+</template>
+
+<script>
+import {
+  TreeList,
+  filterBy,
+  extendDataItem,
+  mapTree,
+} from '@progress/kendo-vue-treelist';
+
+import { LocalizationProvider, loadMessages } from '@progress/kendo-vue-intl';
+import esMessages from './es.json';
+import employees from './data';
+loadMessages(esMessages, 'es-ES');
+const subItemsField = 'employees';
+const expandField = 'expanded';
+const columns = [
+  {
+    field: 'name',
+    title: 'Nombre',
+    width: '320px',
+    expandable: true,
+  },
+  {
+    field: 'hireDate',
+    title: 'Fecha de contratación',
+    width: '280px',
+    format: '{0:d}',
+  },
+  {
+    field: 'timeInPosition',
+    title: 'Año(s) en posición',
+    width: '280px',
+  },
+  {
+    field: 'fullTime',
+    title: 'Tiempo completo',
+    width: '190px',
+  },
+];
+
+export default {
+  components: {
+    TreeList,
+    localization: LocalizationProvider,
+  },
+  data() {
+    return {
+      dataItems: [...employees],
+      filter: [],
+      expanded: [1, 2, 32],
+      columns,
+      subItemsField,
+      expandField,
+    };
+  },
+  computed: {
+    processData() {
+      let data = this.dataItems;
+      let filteredData = filterBy(data, this.filter, subItemsField);
+      return this.addExpandField(filteredData);
+    },
+  },
+  methods: {
+    onExpandChange(e) {
+      this.expanded = e.value
+        ? this.expanded.filter((id) => id !== e.dataItem.id)
+        : [...this.expanded, e.dataItem.id];
+    },
+    handleFilterChange(event) {
+      this.filter = event.filter;
+    },
+    addExpandField(dataTree) {
+      const expanded = this.expanded;
+      return mapTree(dataTree, subItemsField, (item) =>
+        extendDataItem(item, subItemsField, {
+          [expandField]: expanded.includes(item.id),
+        })
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treelist/keyboard-navigation/data.js b/vue-options-api-demos/treelist/keyboard-navigation/data.js
new file mode 100644
index 00000000..f66aec4d
--- /dev/null
+++ b/vue-options-api-demos/treelist/keyboard-navigation/data.js
@@ -0,0 +1,1150 @@
+
+const employees = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2,
+        "employees": [
+            {
+                "id": 2,
+                "name": "Guy Wooten",
+                "reportsTo": 1,
+                "phone": "(438) 738-4935",
+                "extension": 1155,
+                "hireDate": new Date(2010, 3, 3),
+                "fullTime": true,
+                "position": "Chief Technical Officer",
+                "timeInPosition": 1,
+                "employees": [
+                    {
+                        "id": 32,
+                        "name": "Buffy Weber",
+                        "reportsTo": 2,
+                        "phone": "(699) 838-6121",
+                        "extension": 8933,
+                        "hireDate": new Date(2011, 7, 11),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 11,
+                                "name": "Hyacinth Hood",
+                                "reportsTo": 32,
+                                "phone": "(889) 345-2438",
+                                "extension": 8564,
+                                "hireDate": new Date(2014, 2, 3),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 60,
+                                        "name": "Akeem Carr",
+                                        "reportsTo": 11,
+                                        "phone": "(738) 136-2814",
+                                        "extension": 9353,
+                                        "hireDate": new Date(2011, 4, 21),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 78,
+                                        "name": "Rinah Simon",
+                                        "reportsTo": 11,
+                                        "phone": "(285) 912-5271",
+                                        "extension": 7795,
+                                        "hireDate": new Date(2012, 10, 11),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 42,
+                                "name": "Gage Daniels",
+                                "reportsTo": 32,
+                                "phone": "(107) 290-6260",
+                                "extension": 896,
+                                "hireDate": new Date(2013, 5, 16),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 5
+                            },
+                            {
+                                "id": 43,
+                                "name": "Constance Vazquez",
+                                "reportsTo": 32,
+                                "phone": "(800) 301-1978",
+                                "extension": 5141,
+                                "hireDate": new Date(2011, 6, 7),
+                                "fullTime": true,
+                                "position": "Director, Engineering",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 46,
+                                        "name": "Darrel Solis",
+                                        "reportsTo": 43,
+                                        "phone": "(327) 977-0216",
+                                        "extension": 7779,
+                                        "hireDate": new Date(2015, 4, 25),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 47,
+                                                "name": "Brian Yang",
+                                                "reportsTo": 46,
+                                                "phone": "(565) 146-5435",
+                                                "extension": 3885,
+                                                "hireDate": new Date(2012, 9, 27),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 50,
+                                                "name": "Lillian Bradshaw",
+                                                "reportsTo": 46,
+                                                "phone": "(323) 509-3479",
+                                                "extension": 5426,
+                                                "hireDate": new Date(2014, 5, 10),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 51,
+                                                "name": "Christian Palmer",
+                                                "reportsTo": 46,
+                                                "phone": "(490) 421-8718",
+                                                "extension": 3706,
+                                                "hireDate": new Date(2012, 12, 27),
+                                                "fullTime": false,
+                                                "position": "Technical Lead",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 55,
+                                                "name": "Summer Mosley",
+                                                "reportsTo": 46,
+                                                "phone": "(784) 962-2301",
+                                                "extension": 5492,
+                                                "hireDate": new Date(2010, 3, 2),
+                                                "fullTime": true,
+                                                "position": "QA Engineer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 56,
+                                                "name": "Barry Ayers",
+                                                "reportsTo": 46,
+                                                "phone": "(452) 373-9227",
+                                                "extension": 1308,
+                                                "hireDate": new Date(2011, 10, 11),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 59,
+                                                "name": "Keiko Espinoza",
+                                                "reportsTo": 46,
+                                                "phone": "(226) 600-5305",
+                                                "extension": 9363,
+                                                "hireDate": new Date(2011, 9, 18),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 61,
+                                                "name": "Candace Pickett",
+                                                "reportsTo": 46,
+                                                "phone": "(120) 117-7475",
+                                                "extension": 5178,
+                                                "hireDate": new Date(2010, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 63,
+                                        "name": "Mia Caldwell",
+                                        "reportsTo": 43,
+                                        "phone": "(848) 636-6470",
+                                        "extension": 6368,
+                                        "hireDate": new Date(2012, 10, 7),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 65,
+                                                "name": "Thomas Terry",
+                                                "reportsTo": 63,
+                                                "phone": "(764) 831-4248",
+                                                "extension": 3574,
+                                                "hireDate": new Date(2015, 6, 15),
+                                                "fullTime": false,
+                                                "position": "Senior Enterprise Support Officer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 67,
+                                                "name": "Ruth Downs",
+                                                "reportsTo": 63,
+                                                "phone": "(138) 991-1440",
+                                                "extension": 8067,
+                                                "hireDate": new Date(2013, 7, 13),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 70,
+                                                "name": "Yasir Wilder",
+                                                "reportsTo": 63,
+                                                "phone": "(759) 701-8665",
+                                                "extension": 8350,
+                                                "hireDate": new Date(2010, 11, 8),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 71,
+                                                "name": "Flavia Short",
+                                                "reportsTo": 63,
+                                                "phone": "(370) 133-9238",
+                                                "extension": 6390,
+                                                "hireDate": new Date(2013, 2, 21),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 74,
+                                                "name": "Aaron Roach",
+                                                "reportsTo": 63,
+                                                "phone": "(958) 717-9230",
+                                                "extension": 4899,
+                                                "hireDate": new Date(2011, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 75,
+                                                "name": "Eric Russell",
+                                                "reportsTo": 63,
+                                                "phone": "(516) 575-8505",
+                                                "extension": 2224,
+                                                "hireDate": new Date(2012, 10, 28),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 76,
+                                                "name": "Cheyenne Olson",
+                                                "reportsTo": 63,
+                                                "phone": "(241) 645-0257",
+                                                "extension": 9181,
+                                                "hireDate": new Date(2015, 5, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 77,
+                                                "name": "Shaine Avila",
+                                                "reportsTo": 63,
+                                                "phone": "(844) 435-1360",
+                                                "extension": 3374,
+                                                "hireDate": new Date(2010, 1, 31),
+                                                "fullTime": true,
+                                                "position": "UI Designer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 81,
+                                                "name": "Chantale Long",
+                                                "reportsTo": 63,
+                                                "phone": "(252) 419-6891",
+                                                "extension": 7868,
+                                                "hireDate": new Date(2010, 6, 17),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 83,
+                                                "name": "Dane Cruz",
+                                                "reportsTo": 63,
+                                                "phone": "(946) 701-6165",
+                                                "extension": 3828,
+                                                "hireDate": new Date(2014, 10, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 84,
+                                                "name": "Regan Patterson",
+                                                "reportsTo": 63,
+                                                "phone": "(265) 946-1765",
+                                                "extension": 6955,
+                                                "hireDate": new Date(2012, 3, 1),
+                                                "fullTime": true,
+                                                "position": "Technical Writer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 85,
+                                                "name": "Drew Mckay",
+                                                "reportsTo": 63,
+                                                "phone": "(327) 293-0162",
+                                                "extension": 6904,
+                                                "hireDate": new Date(2011, 3, 25),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 88,
+                                                "name": "Bevis Miller",
+                                                "reportsTo": 63,
+                                                "phone": "(525) 557-0169",
+                                                "extension": 6978,
+                                                "hireDate": new Date(2011, 4, 19),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 89,
+                                                "name": "Bruce Mccarty",
+                                                "reportsTo": 63,
+                                                "phone": "(936) 777-8730",
+                                                "extension": 6552,
+                                                "hireDate": new Date(2014, 3, 28),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 5
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 90,
+                                        "name": "Ocean Blair",
+                                        "reportsTo": 43,
+                                        "phone": "(343) 586-6614",
+                                        "extension": 1424,
+                                        "hireDate": new Date(2011, 4, 27),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 91,
+                                                "name": "Guinevere Osborn",
+                                                "reportsTo": 90,
+                                                "phone": "(424) 741-0006",
+                                                "extension": 3166,
+                                                "hireDate": new Date(2014, 11, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 92,
+                                                "name": "Olga Strong",
+                                                "reportsTo": 90,
+                                                "phone": "(949) 417-1168",
+                                                "extension": 4568,
+                                                "hireDate": new Date(2015, 5, 28),
+                                                "fullTime": true,
+                                                "position": "Graphic Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 93,
+                                                "name": "Robert Orr",
+                                                "reportsTo": 90,
+                                                "phone": "(977) 341-3721",
+                                                "extension": 9241,
+                                                "hireDate": new Date(2012, 8, 20),
+                                                "fullTime": false,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 95,
+                                                "name": "Odette Sears",
+                                                "reportsTo": 90,
+                                                "phone": "(264) 818-6576",
+                                                "extension": 1914,
+                                                "hireDate": new Date(2013, 7, 5),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 45,
+                                "name": "Zelda Medina",
+                                "reportsTo": 32,
+                                "phone": "(563) 359-6023",
+                                "extension": 2600,
+                                "hireDate": new Date(2012, 11, 6),
+                                "fullTime": true,
+                                "position": "QA Architect",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    },
+                    {
+                        "id": 52,
+                        "name": "Skyler Cleveland",
+                        "reportsTo": 2,
+                        "phone": "(217) 280-5300",
+                        "extension": 9655,
+                        "hireDate": new Date(2014, 11, 10),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 40,
+                                "name": "Karleigh Garza",
+                                "reportsTo": 52,
+                                "phone": "(370) 983-8796",
+                                "extension": 4044,
+                                "hireDate": new Date(2014, 3, 10),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 49,
+                                        "name": "Elmo Tyson",
+                                        "reportsTo": 40,
+                                        "phone": "(344) 496-9555",
+                                        "extension": 6950,
+                                        "hireDate": new Date(2014, 9, 18),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 72,
+                                        "name": "Stacey Lynn",
+                                        "reportsTo": 40,
+                                        "phone": "(140) 772-7509",
+                                        "extension": 8396,
+                                        "hireDate": new Date(2014, 7, 31),
+                                        "fullTime": false,
+                                        "position": "QA Engineer",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 80,
+                                                "name": "Meredith Parrish",
+                                                "reportsTo": 72,
+                                                "phone": "(714) 284-2408",
+                                                "extension": 7675,
+                                                "hireDate": new Date(2012, 11, 13),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 96,
+                                        "name": "Cassady Whitley",
+                                        "reportsTo": 40,
+                                        "phone": "(996) 587-8405",
+                                        "extension": 780,
+                                        "hireDate": new Date(2013, 5, 7),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 5
+                                    },
+                                    {
+                                        "id": 97,
+                                        "name": "Haviva Campbell",
+                                        "reportsTo": 40,
+                                        "phone": "(263) 887-4689",
+                                        "extension": 2808,
+                                        "hireDate": new Date(2013, 3, 5),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 98,
+                                        "name": "Cameron Ayers",
+                                        "reportsTo": 40,
+                                        "phone": "(470) 709-8030",
+                                        "extension": 2893,
+                                        "hireDate": new Date(2013, 8, 28),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 99,
+                                        "name": "Martha Sargent",
+                                        "reportsTo": 40,
+                                        "phone": "(587) 812-4418",
+                                        "extension": 5099,
+                                        "hireDate": new Date(2014, 2, 27),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 100,
+                                        "name": "Darrel Kinney",
+                                        "reportsTo": 40,
+                                        "phone": "(888) 483-9606",
+                                        "extension": 4779,
+                                        "hireDate": new Date(2014, 3, 24),
+                                        "fullTime": false,
+                                        "position": "Graphic Designer",
+                                        "timeInPosition": 1
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 54,
+                                "name": "Kuame Frye",
+                                "reportsTo": 52,
+                                "phone": "(360) 721-5886",
+                                "extension": 2730,
+                                "hireDate": new Date(2010, 11, 17),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 64,
+                                        "name": "Ori Wynn",
+                                        "reportsTo": 54,
+                                        "phone": "(366) 342-0166",
+                                        "extension": 7252,
+                                        "hireDate": new Date(2015, 6, 21),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 0,
+                                        "employees": [
+                                            {
+                                                "id": 6,
+                                                "name": "Moses Duncan",
+                                                "reportsTo": 64,
+                                                "phone": "(421) 611-4814",
+                                                "extension": 669,
+                                                "hireDate": new Date(2010, 5, 24),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 12,
+                                                "name": "Jamalia Wallace",
+                                                "reportsTo": 64,
+                                                "phone": "(611) 391-8016",
+                                                "extension": 1952,
+                                                "hireDate": new Date(2011, 9, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Designer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 62,
+                                                "name": "Palmer Gregory",
+                                                "reportsTo": 64,
+                                                "phone": "(360) 430-2505",
+                                                "extension": 4337,
+                                                "hireDate": new Date(2014, 8, 30),
+                                                "fullTime": true,
+                                                "position": "Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 68,
+                                                "name": "Mallory Gilliam",
+                                                "reportsTo": 64,
+                                                "phone": "(878) 423-2971",
+                                                "extension": 1341,
+                                                "hireDate": new Date(2014, 7, 24),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 73,
+                                                "name": "Ima Hughes",
+                                                "reportsTo": 64,
+                                                "phone": "(905) 485-8001",
+                                                "extension": 1273,
+                                                "hireDate": new Date(2013, 6, 3),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 79,
+                                                "name": "Duncan Mathews",
+                                                "reportsTo": 64,
+                                                "phone": "(790) 971-9709",
+                                                "extension": 4573,
+                                                "hireDate": new Date(2011, 8, 21),
+                                                "fullTime": false,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 69,
+                                "name": "Sierra Beasley",
+                                "reportsTo": 52,
+                                "phone": "(271) 953-1968",
+                                "extension": 3324,
+                                "hireDate": new Date(2011, 4, 2),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 3,
+                                "employees": [
+                                    {
+                                        "id": 38,
+                                        "name": "Elton Tucker",
+                                        "reportsTo": 69,
+                                        "phone": "(988) 930-9331",
+                                        "extension": 9216,
+                                        "hireDate": new Date(2015, 6, 4),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 1
+                                    },
+                                    {
+                                        "id": 39,
+                                        "name": "Iona Brennan",
+                                        "reportsTo": 69,
+                                        "phone": "(356) 563-0600",
+                                        "extension": 5634,
+                                        "hireDate": new Date(2010, 9, 23),
+                                        "fullTime": true,
+                                        "position": "Junior Support Officer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 53,
+                                        "name": "Paul Campos",
+                                        "reportsTo": 69,
+                                        "phone": "(899) 205-1689",
+                                        "extension": 8586,
+                                        "hireDate": new Date(2011, 3, 17),
+                                        "fullTime": true,
+                                        "position": "Interaction Designer",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 66,
+                                                "name": "Gloria Freeman",
+                                                "reportsTo": 53,
+                                                "phone": "(344) 950-9168",
+                                                "extension": 4738,
+                                                "hireDate": new Date(2013, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Junior Interaction Designer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 57,
+                                        "name": "Alyssa Hansen",
+                                        "reportsTo": 69,
+                                        "phone": "(548) 925-4799",
+                                        "extension": 4716,
+                                        "hireDate": new Date(2011, 1, 19),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 82,
+                                        "name": "Yael Walters",
+                                        "reportsTo": 69,
+                                        "phone": "(311) 489-8191",
+                                        "extension": 6520,
+                                        "hireDate": new Date(2013, 7, 4),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 87,
+                                        "name": "Dahlia Hunt",
+                                        "reportsTo": 69,
+                                        "phone": "(720) 339-5202",
+                                        "extension": 3690,
+                                        "hireDate": new Date(2011, 3, 26),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 94,
+                                        "name": "Adria Stanley",
+                                        "reportsTo": 69,
+                                        "phone": "(536) 357-6391",
+                                        "extension": 3374,
+                                        "hireDate": new Date(2014, 7, 26),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "Priscilla Frank",
+                "reportsTo": 1,
+                "phone": "(278) 927-2684",
+                "extension": 4183,
+                "hireDate": new Date(2014, 11, 30),
+                "fullTime": true,
+                "position": "Chief Product Officer",
+                "timeInPosition": 2,
+                "employees": [
+                    {
+                        "id": 4,
+                        "name": "Ursula Holmes",
+                        "reportsTo": 3,
+                        "phone": "(302) 760-2034",
+                        "extension": 2226,
+                        "hireDate": new Date(2011, 6, 6),
+                        "fullTime": true,
+                        "position": "EVP, Product Strategy",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 24,
+                        "name": "Melvin Carrillo",
+                        "reportsTo": 3,
+                        "phone": "(348) 933-5167",
+                        "extension": 2482,
+                        "hireDate": new Date(2014, 7, 21),
+                        "fullTime": true,
+                        "position": "Director, Developer Relations",
+                        "timeInPosition": 6,
+                        "employees": [
+                            {
+                                "id": 29,
+                                "name": "Martha Chavez",
+                                "reportsTo": 24,
+                                "phone": "(860) 754-3464",
+                                "extension": 4531,
+                                "hireDate": new Date(2013, 3, 12),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 30,
+                                "name": "Oren Fox",
+                                "reportsTo": 24,
+                                "phone": "(572) 414-3299",
+                                "extension": 4849,
+                                "hireDate": new Date(2013, 5, 14),
+                                "fullTime": false,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 41,
+                                "name": "Amos Barr",
+                                "reportsTo": 24,
+                                "phone": "(470) 381-3718",
+                                "extension": 7643,
+                                "hireDate": new Date(2010, 3, 9),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "Anika Vega",
+                "reportsTo": 1,
+                "phone": "(910) 714-1802",
+                "extension": 6353,
+                "hireDate": new Date(2010, 2, 25),
+                "fullTime": true,
+                "position": "Chief Process Officer",
+                "timeInPosition": 5,
+                "employees": [
+                    {
+                        "id": 10,
+                        "name": "Vernon Ballard",
+                        "reportsTo": 5,
+                        "phone": "(702) 185-8890",
+                        "extension": 9242,
+                        "hireDate": new Date(2015, 6, 26),
+                        "fullTime": true,
+                        "position": "Director Facilities",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 16,
+                                "name": "Ali Guy",
+                                "reportsTo": 10,
+                                "phone": "(429) 912-6578",
+                                "extension": 2225,
+                                "hireDate": new Date(2014, 6, 29),
+                                "fullTime": true,
+                                "position": "Operations Manager",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 23,
+                                        "name": "Bruce Reilly",
+                                        "reportsTo": 16,
+                                        "phone": "(995) 243-7302",
+                                        "extension": 4815,
+                                        "hireDate": new Date(2015, 4, 1),
+                                        "fullTime": true,
+                                        "position": "Head of Security",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 26,
+                                                "name": "Rowan Morin",
+                                                "reportsTo": 23,
+                                                "phone": "(792) 141-4374",
+                                                "extension": 1844,
+                                                "hireDate": new Date(2015, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Building Security",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 44,
+                                                "name": "Benedict Soto",
+                                                "reportsTo": 23,
+                                                "phone": "(822) 282-5991",
+                                                "extension": 6422,
+                                                "hireDate": new Date(2012, 6, 1),
+                                                "fullTime": false,
+                                                "position": "Building Security",
+                                                "timeInPosition": 4
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 48,
+                                        "name": "Maryam Rios",
+                                        "reportsTo": 16,
+                                        "phone": "(673) 764-6720",
+                                        "extension": 531,
+                                        "hireDate": new Date(2014, 3, 3),
+                                        "fullTime": true,
+                                        "position": "Team Lead, Personal Assistants",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 58,
+                                                "name": "Rose Mcintyre",
+                                                "reportsTo": 48,
+                                                "phone": "(771) 615-4590",
+                                                "extension": 7094,
+                                                "hireDate": new Date(2015, 6, 30),
+                                                "fullTime": false,
+                                                "position": "Personal Assistant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "Nevada Hart",
+                "reportsTo": 1,
+                "phone": "(254) 220-1576",
+                "extension": 6649,
+                "hireDate": new Date(2015, 8, 17),
+                "fullTime": true,
+                "position": "Chief Financial Officer",
+                "timeInPosition": 6,
+                "employees": [
+                    {
+                        "id": 14,
+                        "name": "Zena Sanford",
+                        "reportsTo": 7,
+                        "phone": "(437) 568-8160",
+                        "extension": 4452,
+                        "hireDate": new Date(2010, 11, 30),
+                        "fullTime": true,
+                        "position": "VP, Finance",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 15,
+                        "name": "Quinlan Howe",
+                        "reportsTo": 7,
+                        "phone": "(464) 334-9748",
+                        "extension": 8722,
+                        "hireDate": new Date(2011, 6, 9),
+                        "fullTime": false,
+                        "position": "Senior Director, Finance",
+                        "timeInPosition": 0,
+                        "employees": [
+                            {
+                                "id": 17,
+                                "name": "Indira Lopez",
+                                "reportsTo": 15,
+                                "phone": "(301) 368-0938",
+                                "extension": 8027,
+                                "hireDate": new Date(2013, 8, 18),
+                                "fullTime": true,
+                                "position": "ERP Team Lead",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 18,
+                                        "name": "Lareina Lara",
+                                        "reportsTo": 17,
+                                        "phone": "(233) 457-7482",
+                                        "extension": 1996,
+                                        "hireDate": new Date(2010, 4, 30),
+                                        "fullTime": true,
+                                        "position": "ERP Solutions Consultant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 19,
+                                        "name": "Maxwell Wise",
+                                        "reportsTo": 17,
+                                        "phone": "(570) 494-2531",
+                                        "extension": 9865,
+                                        "hireDate": new Date(2012, 5, 19),
+                                        "fullTime": true,
+                                        "position": "Systems Engineer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 20,
+                                "name": "Hunter Mcbride",
+                                "reportsTo": 15,
+                                "phone": "(409) 442-7016",
+                                "extension": 4284,
+                                "hireDate": new Date(2012, 10, 20),
+                                "fullTime": true,
+                                "position": "Senior Director, Tax",
+                                "timeInPosition": 3
+                            },
+                            {
+                                "id": 21,
+                                "name": "Jana Serrano",
+                                "reportsTo": 15,
+                                "phone": "(910) 718-4620",
+                                "extension": 6970,
+                                "hireDate": new Date(2010, 4, 2),
+                                "fullTime": true,
+                                "position": "Financial Planning & Analysis Manager",
+                                "timeInPosition": 2
+                            },
+                            {
+                                "id": 22,
+                                "name": "Zachery Shelton",
+                                "reportsTo": 15,
+                                "phone": "(310) 240-8675",
+                                "extension": 4527,
+                                "hireDate": new Date(2011, 11, 23),
+                                "fullTime": false,
+                                "position": "Corporate Finance Controller",
+                                "timeInPosition": 6,
+                                "employees": [
+                                    {
+                                        "id": 28,
+                                        "name": "Cullen Freeman",
+                                        "reportsTo": 22,
+                                        "phone": "(136) 554-8814",
+                                        "extension": 9861,
+                                        "hireDate": new Date(2014, 3, 15),
+                                        "fullTime": true,
+                                        "position": "Treasurer Accountant",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 31,
+                                        "name": "Quinn Dean",
+                                        "reportsTo": 22,
+                                        "phone": "(152) 613-3507",
+                                        "extension": 6621,
+                                        "hireDate": new Date(2015, 1, 29),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 34,
+                                        "name": "Samantha Brady",
+                                        "reportsTo": 22,
+                                        "phone": "(206) 398-4328",
+                                        "extension": 1157,
+                                        "hireDate": new Date(2011, 2, 13),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 35,
+                                                "name": "Tamara Green",
+                                                "reportsTo": 34,
+                                                "phone": "(219) 248-2789",
+                                                "extension": 4880,
+                                                "hireDate": new Date(2014, 2, 4),
+                                                "fullTime": true,
+                                                "position": "Junior Accountant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 36,
+                                        "name": "Olympia Coleman",
+                                        "reportsTo": 22,
+                                        "phone": "(944) 853-6383",
+                                        "extension": 2136,
+                                        "hireDate": new Date(2013, 7, 31),
+                                        "fullTime": true,
+                                        "position": "Collections Manager",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 37,
+                                        "name": "Breanna Goodwin",
+                                        "reportsTo": 22,
+                                        "phone": "(379) 988-9630",
+                                        "extension": 5898,
+                                        "hireDate": new Date(2010, 5, 23),
+                                        "fullTime": false,
+                                        "position": "Payroll Specialist",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 27,
+                                "name": "Curran Travis",
+                                "reportsTo": 15,
+                                "phone": "(438) 135-8033",
+                                "extension": 3841,
+                                "hireDate": new Date(2011, 6, 13),
+                                "fullTime": true,
+                                "position": "Finance Controller",
+                                "timeInPosition": 5
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "Hunter Fry",
+                "reportsTo": 1,
+                "phone": "(766) 358-9858",
+                "extension": 3741,
+                "hireDate": new Date(2011, 2, 12),
+                "fullTime": false,
+                "position": "General Counsel",
+                "timeInPosition": 3,
+                "employees": [
+                    {
+                        "id": 9,
+                        "name": "Kuame Carrillo",
+                        "reportsTo": 8,
+                        "phone": "(192) 383-1305",
+                        "extension": 9228,
+                        "hireDate": new Date(2011, 2, 22),
+                        "fullTime": true,
+                        "position": "Associate General Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 13,
+                        "name": "Stacy Todd",
+                        "reportsTo": 8,
+                        "phone": "(925) 286-3327",
+                        "extension": 8565,
+                        "hireDate": new Date(2014, 7, 5),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 33,
+                        "name": "Valentine Wyatt",
+                        "reportsTo": 8,
+                        "phone": "(165) 166-6205",
+                        "extension": 3588,
+                        "hireDate": new Date(2015, 5, 21),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 5
+                    },
+                    {
+                        "id": 86,
+                        "name": "Daniel Mccarthy",
+                        "reportsTo": 8,
+                        "phone": "(624) 483-6206",
+                        "extension": 9112,
+                        "hireDate": new Date(2013, 12, 3),
+                        "fullTime": false,
+                        "position": "Staff Attorney",
+                        "timeInPosition": 0
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default employees;
diff --git a/vue-options-api-demos/treelist/keyboard-navigation/main.js b/vue-options-api-demos/treelist/keyboard-navigation/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/keyboard-navigation/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/keyboard-navigation/main.vue b/vue-options-api-demos/treelist/keyboard-navigation/main.vue
new file mode 100644
index 00000000..6d92b799
--- /dev/null
+++ b/vue-options-api-demos/treelist/keyboard-navigation/main.vue
@@ -0,0 +1,109 @@
+<template>
+  <TreeList
+    :style="{
+      maxHeight: '510px',
+      overflow: 'auto',
+    }"
+    :navigatable="true"
+    :expand-field="expandField"
+    :sub-items-field="subItemsField"
+    :data-items="processedData"
+    :columns="columns"
+    :filter="filter"
+    :filterable="true"
+    :sort="sort"
+    :sortable="true"
+    @datastatechange="handleDataStateChange"
+    @expandchange="onExpandChange"
+  />
+</template>
+
+<script>
+import employees from './data';
+import {
+  TreeList,
+  filterBy,
+  orderBy,
+  mapTree,
+  extendDataItem,
+} from '@progress/kendo-vue-treelist';
+
+export default {
+  components: {
+    TreeList,
+  },
+  data() {
+    return {
+      employees,
+      subItemsField: 'employees',
+      expandField: 'expanded',
+      expanded: [1, 2, 32],
+      filter: [],
+      sort: [
+        {
+          field: 'name',
+          dir: 'asc',
+        },
+      ],
+      columns: [
+        {
+          field: 'name',
+          title: 'Name',
+          width: '250px',
+          filter: 'text',
+          expandable: true,
+        },
+        {
+          field: 'hireDate',
+          title: 'Hire Date',
+          width: '200px',
+          format: '{0:d}',
+          filter: 'date',
+        },
+        {
+          field: 'timeInPosition',
+          title: 'Year(s) in Position',
+          width: '200px',
+          filter: 'numeric',
+        },
+        {
+          field: 'fullTime',
+          title: 'Full Time',
+          width: '100px',
+          filter: 'boolean',
+        },
+      ],
+    };
+  },
+  computed: {
+    processedData() {
+      let data = this.employees;
+      let filteredData = filterBy(data, this.filter, this.subItemsField);
+      let sortedData = orderBy(filteredData, this.sort, this.subItemsField);
+      return this.addExpandField(sortedData);
+    },
+  },
+  methods: {
+    onExpandChange(e) {
+      this.expanded = e.value
+        ? this.expanded.filter((id) => id !== e.dataItem.id)
+        : [...this.expanded, e.dataItem.id];
+    },
+    createAppState: function (dataState) {
+      this.sort = dataState.sort;
+      this.filter = dataState.filter;
+    },
+    handleDataStateChange: function (event) {
+      this.createAppState(event.data);
+    },
+    addExpandField(dataTree) {
+      const expanded = this.expanded;
+      return mapTree(dataTree, this.subItemsField, (item) =>
+        extendDataItem(item, this.subItemsField, {
+          [this.expandField]: expanded.includes(item.id),
+        })
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treelist/locked/data.js b/vue-options-api-demos/treelist/locked/data.js
new file mode 100644
index 00000000..f66aec4d
--- /dev/null
+++ b/vue-options-api-demos/treelist/locked/data.js
@@ -0,0 +1,1150 @@
+
+const employees = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2,
+        "employees": [
+            {
+                "id": 2,
+                "name": "Guy Wooten",
+                "reportsTo": 1,
+                "phone": "(438) 738-4935",
+                "extension": 1155,
+                "hireDate": new Date(2010, 3, 3),
+                "fullTime": true,
+                "position": "Chief Technical Officer",
+                "timeInPosition": 1,
+                "employees": [
+                    {
+                        "id": 32,
+                        "name": "Buffy Weber",
+                        "reportsTo": 2,
+                        "phone": "(699) 838-6121",
+                        "extension": 8933,
+                        "hireDate": new Date(2011, 7, 11),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 11,
+                                "name": "Hyacinth Hood",
+                                "reportsTo": 32,
+                                "phone": "(889) 345-2438",
+                                "extension": 8564,
+                                "hireDate": new Date(2014, 2, 3),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 60,
+                                        "name": "Akeem Carr",
+                                        "reportsTo": 11,
+                                        "phone": "(738) 136-2814",
+                                        "extension": 9353,
+                                        "hireDate": new Date(2011, 4, 21),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 78,
+                                        "name": "Rinah Simon",
+                                        "reportsTo": 11,
+                                        "phone": "(285) 912-5271",
+                                        "extension": 7795,
+                                        "hireDate": new Date(2012, 10, 11),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 42,
+                                "name": "Gage Daniels",
+                                "reportsTo": 32,
+                                "phone": "(107) 290-6260",
+                                "extension": 896,
+                                "hireDate": new Date(2013, 5, 16),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 5
+                            },
+                            {
+                                "id": 43,
+                                "name": "Constance Vazquez",
+                                "reportsTo": 32,
+                                "phone": "(800) 301-1978",
+                                "extension": 5141,
+                                "hireDate": new Date(2011, 6, 7),
+                                "fullTime": true,
+                                "position": "Director, Engineering",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 46,
+                                        "name": "Darrel Solis",
+                                        "reportsTo": 43,
+                                        "phone": "(327) 977-0216",
+                                        "extension": 7779,
+                                        "hireDate": new Date(2015, 4, 25),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 47,
+                                                "name": "Brian Yang",
+                                                "reportsTo": 46,
+                                                "phone": "(565) 146-5435",
+                                                "extension": 3885,
+                                                "hireDate": new Date(2012, 9, 27),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 50,
+                                                "name": "Lillian Bradshaw",
+                                                "reportsTo": 46,
+                                                "phone": "(323) 509-3479",
+                                                "extension": 5426,
+                                                "hireDate": new Date(2014, 5, 10),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 51,
+                                                "name": "Christian Palmer",
+                                                "reportsTo": 46,
+                                                "phone": "(490) 421-8718",
+                                                "extension": 3706,
+                                                "hireDate": new Date(2012, 12, 27),
+                                                "fullTime": false,
+                                                "position": "Technical Lead",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 55,
+                                                "name": "Summer Mosley",
+                                                "reportsTo": 46,
+                                                "phone": "(784) 962-2301",
+                                                "extension": 5492,
+                                                "hireDate": new Date(2010, 3, 2),
+                                                "fullTime": true,
+                                                "position": "QA Engineer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 56,
+                                                "name": "Barry Ayers",
+                                                "reportsTo": 46,
+                                                "phone": "(452) 373-9227",
+                                                "extension": 1308,
+                                                "hireDate": new Date(2011, 10, 11),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 59,
+                                                "name": "Keiko Espinoza",
+                                                "reportsTo": 46,
+                                                "phone": "(226) 600-5305",
+                                                "extension": 9363,
+                                                "hireDate": new Date(2011, 9, 18),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 61,
+                                                "name": "Candace Pickett",
+                                                "reportsTo": 46,
+                                                "phone": "(120) 117-7475",
+                                                "extension": 5178,
+                                                "hireDate": new Date(2010, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 63,
+                                        "name": "Mia Caldwell",
+                                        "reportsTo": 43,
+                                        "phone": "(848) 636-6470",
+                                        "extension": 6368,
+                                        "hireDate": new Date(2012, 10, 7),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 65,
+                                                "name": "Thomas Terry",
+                                                "reportsTo": 63,
+                                                "phone": "(764) 831-4248",
+                                                "extension": 3574,
+                                                "hireDate": new Date(2015, 6, 15),
+                                                "fullTime": false,
+                                                "position": "Senior Enterprise Support Officer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 67,
+                                                "name": "Ruth Downs",
+                                                "reportsTo": 63,
+                                                "phone": "(138) 991-1440",
+                                                "extension": 8067,
+                                                "hireDate": new Date(2013, 7, 13),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 70,
+                                                "name": "Yasir Wilder",
+                                                "reportsTo": 63,
+                                                "phone": "(759) 701-8665",
+                                                "extension": 8350,
+                                                "hireDate": new Date(2010, 11, 8),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 71,
+                                                "name": "Flavia Short",
+                                                "reportsTo": 63,
+                                                "phone": "(370) 133-9238",
+                                                "extension": 6390,
+                                                "hireDate": new Date(2013, 2, 21),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 74,
+                                                "name": "Aaron Roach",
+                                                "reportsTo": 63,
+                                                "phone": "(958) 717-9230",
+                                                "extension": 4899,
+                                                "hireDate": new Date(2011, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 75,
+                                                "name": "Eric Russell",
+                                                "reportsTo": 63,
+                                                "phone": "(516) 575-8505",
+                                                "extension": 2224,
+                                                "hireDate": new Date(2012, 10, 28),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 76,
+                                                "name": "Cheyenne Olson",
+                                                "reportsTo": 63,
+                                                "phone": "(241) 645-0257",
+                                                "extension": 9181,
+                                                "hireDate": new Date(2015, 5, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 77,
+                                                "name": "Shaine Avila",
+                                                "reportsTo": 63,
+                                                "phone": "(844) 435-1360",
+                                                "extension": 3374,
+                                                "hireDate": new Date(2010, 1, 31),
+                                                "fullTime": true,
+                                                "position": "UI Designer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 81,
+                                                "name": "Chantale Long",
+                                                "reportsTo": 63,
+                                                "phone": "(252) 419-6891",
+                                                "extension": 7868,
+                                                "hireDate": new Date(2010, 6, 17),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 83,
+                                                "name": "Dane Cruz",
+                                                "reportsTo": 63,
+                                                "phone": "(946) 701-6165",
+                                                "extension": 3828,
+                                                "hireDate": new Date(2014, 10, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 84,
+                                                "name": "Regan Patterson",
+                                                "reportsTo": 63,
+                                                "phone": "(265) 946-1765",
+                                                "extension": 6955,
+                                                "hireDate": new Date(2012, 3, 1),
+                                                "fullTime": true,
+                                                "position": "Technical Writer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 85,
+                                                "name": "Drew Mckay",
+                                                "reportsTo": 63,
+                                                "phone": "(327) 293-0162",
+                                                "extension": 6904,
+                                                "hireDate": new Date(2011, 3, 25),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 88,
+                                                "name": "Bevis Miller",
+                                                "reportsTo": 63,
+                                                "phone": "(525) 557-0169",
+                                                "extension": 6978,
+                                                "hireDate": new Date(2011, 4, 19),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 89,
+                                                "name": "Bruce Mccarty",
+                                                "reportsTo": 63,
+                                                "phone": "(936) 777-8730",
+                                                "extension": 6552,
+                                                "hireDate": new Date(2014, 3, 28),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 5
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 90,
+                                        "name": "Ocean Blair",
+                                        "reportsTo": 43,
+                                        "phone": "(343) 586-6614",
+                                        "extension": 1424,
+                                        "hireDate": new Date(2011, 4, 27),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 91,
+                                                "name": "Guinevere Osborn",
+                                                "reportsTo": 90,
+                                                "phone": "(424) 741-0006",
+                                                "extension": 3166,
+                                                "hireDate": new Date(2014, 11, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 92,
+                                                "name": "Olga Strong",
+                                                "reportsTo": 90,
+                                                "phone": "(949) 417-1168",
+                                                "extension": 4568,
+                                                "hireDate": new Date(2015, 5, 28),
+                                                "fullTime": true,
+                                                "position": "Graphic Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 93,
+                                                "name": "Robert Orr",
+                                                "reportsTo": 90,
+                                                "phone": "(977) 341-3721",
+                                                "extension": 9241,
+                                                "hireDate": new Date(2012, 8, 20),
+                                                "fullTime": false,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 95,
+                                                "name": "Odette Sears",
+                                                "reportsTo": 90,
+                                                "phone": "(264) 818-6576",
+                                                "extension": 1914,
+                                                "hireDate": new Date(2013, 7, 5),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 45,
+                                "name": "Zelda Medina",
+                                "reportsTo": 32,
+                                "phone": "(563) 359-6023",
+                                "extension": 2600,
+                                "hireDate": new Date(2012, 11, 6),
+                                "fullTime": true,
+                                "position": "QA Architect",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    },
+                    {
+                        "id": 52,
+                        "name": "Skyler Cleveland",
+                        "reportsTo": 2,
+                        "phone": "(217) 280-5300",
+                        "extension": 9655,
+                        "hireDate": new Date(2014, 11, 10),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 40,
+                                "name": "Karleigh Garza",
+                                "reportsTo": 52,
+                                "phone": "(370) 983-8796",
+                                "extension": 4044,
+                                "hireDate": new Date(2014, 3, 10),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 49,
+                                        "name": "Elmo Tyson",
+                                        "reportsTo": 40,
+                                        "phone": "(344) 496-9555",
+                                        "extension": 6950,
+                                        "hireDate": new Date(2014, 9, 18),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 72,
+                                        "name": "Stacey Lynn",
+                                        "reportsTo": 40,
+                                        "phone": "(140) 772-7509",
+                                        "extension": 8396,
+                                        "hireDate": new Date(2014, 7, 31),
+                                        "fullTime": false,
+                                        "position": "QA Engineer",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 80,
+                                                "name": "Meredith Parrish",
+                                                "reportsTo": 72,
+                                                "phone": "(714) 284-2408",
+                                                "extension": 7675,
+                                                "hireDate": new Date(2012, 11, 13),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 96,
+                                        "name": "Cassady Whitley",
+                                        "reportsTo": 40,
+                                        "phone": "(996) 587-8405",
+                                        "extension": 780,
+                                        "hireDate": new Date(2013, 5, 7),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 5
+                                    },
+                                    {
+                                        "id": 97,
+                                        "name": "Haviva Campbell",
+                                        "reportsTo": 40,
+                                        "phone": "(263) 887-4689",
+                                        "extension": 2808,
+                                        "hireDate": new Date(2013, 3, 5),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 98,
+                                        "name": "Cameron Ayers",
+                                        "reportsTo": 40,
+                                        "phone": "(470) 709-8030",
+                                        "extension": 2893,
+                                        "hireDate": new Date(2013, 8, 28),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 99,
+                                        "name": "Martha Sargent",
+                                        "reportsTo": 40,
+                                        "phone": "(587) 812-4418",
+                                        "extension": 5099,
+                                        "hireDate": new Date(2014, 2, 27),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 100,
+                                        "name": "Darrel Kinney",
+                                        "reportsTo": 40,
+                                        "phone": "(888) 483-9606",
+                                        "extension": 4779,
+                                        "hireDate": new Date(2014, 3, 24),
+                                        "fullTime": false,
+                                        "position": "Graphic Designer",
+                                        "timeInPosition": 1
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 54,
+                                "name": "Kuame Frye",
+                                "reportsTo": 52,
+                                "phone": "(360) 721-5886",
+                                "extension": 2730,
+                                "hireDate": new Date(2010, 11, 17),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 64,
+                                        "name": "Ori Wynn",
+                                        "reportsTo": 54,
+                                        "phone": "(366) 342-0166",
+                                        "extension": 7252,
+                                        "hireDate": new Date(2015, 6, 21),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 0,
+                                        "employees": [
+                                            {
+                                                "id": 6,
+                                                "name": "Moses Duncan",
+                                                "reportsTo": 64,
+                                                "phone": "(421) 611-4814",
+                                                "extension": 669,
+                                                "hireDate": new Date(2010, 5, 24),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 12,
+                                                "name": "Jamalia Wallace",
+                                                "reportsTo": 64,
+                                                "phone": "(611) 391-8016",
+                                                "extension": 1952,
+                                                "hireDate": new Date(2011, 9, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Designer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 62,
+                                                "name": "Palmer Gregory",
+                                                "reportsTo": 64,
+                                                "phone": "(360) 430-2505",
+                                                "extension": 4337,
+                                                "hireDate": new Date(2014, 8, 30),
+                                                "fullTime": true,
+                                                "position": "Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 68,
+                                                "name": "Mallory Gilliam",
+                                                "reportsTo": 64,
+                                                "phone": "(878) 423-2971",
+                                                "extension": 1341,
+                                                "hireDate": new Date(2014, 7, 24),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 73,
+                                                "name": "Ima Hughes",
+                                                "reportsTo": 64,
+                                                "phone": "(905) 485-8001",
+                                                "extension": 1273,
+                                                "hireDate": new Date(2013, 6, 3),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 79,
+                                                "name": "Duncan Mathews",
+                                                "reportsTo": 64,
+                                                "phone": "(790) 971-9709",
+                                                "extension": 4573,
+                                                "hireDate": new Date(2011, 8, 21),
+                                                "fullTime": false,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 69,
+                                "name": "Sierra Beasley",
+                                "reportsTo": 52,
+                                "phone": "(271) 953-1968",
+                                "extension": 3324,
+                                "hireDate": new Date(2011, 4, 2),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 3,
+                                "employees": [
+                                    {
+                                        "id": 38,
+                                        "name": "Elton Tucker",
+                                        "reportsTo": 69,
+                                        "phone": "(988) 930-9331",
+                                        "extension": 9216,
+                                        "hireDate": new Date(2015, 6, 4),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 1
+                                    },
+                                    {
+                                        "id": 39,
+                                        "name": "Iona Brennan",
+                                        "reportsTo": 69,
+                                        "phone": "(356) 563-0600",
+                                        "extension": 5634,
+                                        "hireDate": new Date(2010, 9, 23),
+                                        "fullTime": true,
+                                        "position": "Junior Support Officer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 53,
+                                        "name": "Paul Campos",
+                                        "reportsTo": 69,
+                                        "phone": "(899) 205-1689",
+                                        "extension": 8586,
+                                        "hireDate": new Date(2011, 3, 17),
+                                        "fullTime": true,
+                                        "position": "Interaction Designer",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 66,
+                                                "name": "Gloria Freeman",
+                                                "reportsTo": 53,
+                                                "phone": "(344) 950-9168",
+                                                "extension": 4738,
+                                                "hireDate": new Date(2013, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Junior Interaction Designer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 57,
+                                        "name": "Alyssa Hansen",
+                                        "reportsTo": 69,
+                                        "phone": "(548) 925-4799",
+                                        "extension": 4716,
+                                        "hireDate": new Date(2011, 1, 19),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 82,
+                                        "name": "Yael Walters",
+                                        "reportsTo": 69,
+                                        "phone": "(311) 489-8191",
+                                        "extension": 6520,
+                                        "hireDate": new Date(2013, 7, 4),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 87,
+                                        "name": "Dahlia Hunt",
+                                        "reportsTo": 69,
+                                        "phone": "(720) 339-5202",
+                                        "extension": 3690,
+                                        "hireDate": new Date(2011, 3, 26),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 94,
+                                        "name": "Adria Stanley",
+                                        "reportsTo": 69,
+                                        "phone": "(536) 357-6391",
+                                        "extension": 3374,
+                                        "hireDate": new Date(2014, 7, 26),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "Priscilla Frank",
+                "reportsTo": 1,
+                "phone": "(278) 927-2684",
+                "extension": 4183,
+                "hireDate": new Date(2014, 11, 30),
+                "fullTime": true,
+                "position": "Chief Product Officer",
+                "timeInPosition": 2,
+                "employees": [
+                    {
+                        "id": 4,
+                        "name": "Ursula Holmes",
+                        "reportsTo": 3,
+                        "phone": "(302) 760-2034",
+                        "extension": 2226,
+                        "hireDate": new Date(2011, 6, 6),
+                        "fullTime": true,
+                        "position": "EVP, Product Strategy",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 24,
+                        "name": "Melvin Carrillo",
+                        "reportsTo": 3,
+                        "phone": "(348) 933-5167",
+                        "extension": 2482,
+                        "hireDate": new Date(2014, 7, 21),
+                        "fullTime": true,
+                        "position": "Director, Developer Relations",
+                        "timeInPosition": 6,
+                        "employees": [
+                            {
+                                "id": 29,
+                                "name": "Martha Chavez",
+                                "reportsTo": 24,
+                                "phone": "(860) 754-3464",
+                                "extension": 4531,
+                                "hireDate": new Date(2013, 3, 12),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 30,
+                                "name": "Oren Fox",
+                                "reportsTo": 24,
+                                "phone": "(572) 414-3299",
+                                "extension": 4849,
+                                "hireDate": new Date(2013, 5, 14),
+                                "fullTime": false,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 41,
+                                "name": "Amos Barr",
+                                "reportsTo": 24,
+                                "phone": "(470) 381-3718",
+                                "extension": 7643,
+                                "hireDate": new Date(2010, 3, 9),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "Anika Vega",
+                "reportsTo": 1,
+                "phone": "(910) 714-1802",
+                "extension": 6353,
+                "hireDate": new Date(2010, 2, 25),
+                "fullTime": true,
+                "position": "Chief Process Officer",
+                "timeInPosition": 5,
+                "employees": [
+                    {
+                        "id": 10,
+                        "name": "Vernon Ballard",
+                        "reportsTo": 5,
+                        "phone": "(702) 185-8890",
+                        "extension": 9242,
+                        "hireDate": new Date(2015, 6, 26),
+                        "fullTime": true,
+                        "position": "Director Facilities",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 16,
+                                "name": "Ali Guy",
+                                "reportsTo": 10,
+                                "phone": "(429) 912-6578",
+                                "extension": 2225,
+                                "hireDate": new Date(2014, 6, 29),
+                                "fullTime": true,
+                                "position": "Operations Manager",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 23,
+                                        "name": "Bruce Reilly",
+                                        "reportsTo": 16,
+                                        "phone": "(995) 243-7302",
+                                        "extension": 4815,
+                                        "hireDate": new Date(2015, 4, 1),
+                                        "fullTime": true,
+                                        "position": "Head of Security",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 26,
+                                                "name": "Rowan Morin",
+                                                "reportsTo": 23,
+                                                "phone": "(792) 141-4374",
+                                                "extension": 1844,
+                                                "hireDate": new Date(2015, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Building Security",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 44,
+                                                "name": "Benedict Soto",
+                                                "reportsTo": 23,
+                                                "phone": "(822) 282-5991",
+                                                "extension": 6422,
+                                                "hireDate": new Date(2012, 6, 1),
+                                                "fullTime": false,
+                                                "position": "Building Security",
+                                                "timeInPosition": 4
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 48,
+                                        "name": "Maryam Rios",
+                                        "reportsTo": 16,
+                                        "phone": "(673) 764-6720",
+                                        "extension": 531,
+                                        "hireDate": new Date(2014, 3, 3),
+                                        "fullTime": true,
+                                        "position": "Team Lead, Personal Assistants",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 58,
+                                                "name": "Rose Mcintyre",
+                                                "reportsTo": 48,
+                                                "phone": "(771) 615-4590",
+                                                "extension": 7094,
+                                                "hireDate": new Date(2015, 6, 30),
+                                                "fullTime": false,
+                                                "position": "Personal Assistant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "Nevada Hart",
+                "reportsTo": 1,
+                "phone": "(254) 220-1576",
+                "extension": 6649,
+                "hireDate": new Date(2015, 8, 17),
+                "fullTime": true,
+                "position": "Chief Financial Officer",
+                "timeInPosition": 6,
+                "employees": [
+                    {
+                        "id": 14,
+                        "name": "Zena Sanford",
+                        "reportsTo": 7,
+                        "phone": "(437) 568-8160",
+                        "extension": 4452,
+                        "hireDate": new Date(2010, 11, 30),
+                        "fullTime": true,
+                        "position": "VP, Finance",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 15,
+                        "name": "Quinlan Howe",
+                        "reportsTo": 7,
+                        "phone": "(464) 334-9748",
+                        "extension": 8722,
+                        "hireDate": new Date(2011, 6, 9),
+                        "fullTime": false,
+                        "position": "Senior Director, Finance",
+                        "timeInPosition": 0,
+                        "employees": [
+                            {
+                                "id": 17,
+                                "name": "Indira Lopez",
+                                "reportsTo": 15,
+                                "phone": "(301) 368-0938",
+                                "extension": 8027,
+                                "hireDate": new Date(2013, 8, 18),
+                                "fullTime": true,
+                                "position": "ERP Team Lead",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 18,
+                                        "name": "Lareina Lara",
+                                        "reportsTo": 17,
+                                        "phone": "(233) 457-7482",
+                                        "extension": 1996,
+                                        "hireDate": new Date(2010, 4, 30),
+                                        "fullTime": true,
+                                        "position": "ERP Solutions Consultant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 19,
+                                        "name": "Maxwell Wise",
+                                        "reportsTo": 17,
+                                        "phone": "(570) 494-2531",
+                                        "extension": 9865,
+                                        "hireDate": new Date(2012, 5, 19),
+                                        "fullTime": true,
+                                        "position": "Systems Engineer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 20,
+                                "name": "Hunter Mcbride",
+                                "reportsTo": 15,
+                                "phone": "(409) 442-7016",
+                                "extension": 4284,
+                                "hireDate": new Date(2012, 10, 20),
+                                "fullTime": true,
+                                "position": "Senior Director, Tax",
+                                "timeInPosition": 3
+                            },
+                            {
+                                "id": 21,
+                                "name": "Jana Serrano",
+                                "reportsTo": 15,
+                                "phone": "(910) 718-4620",
+                                "extension": 6970,
+                                "hireDate": new Date(2010, 4, 2),
+                                "fullTime": true,
+                                "position": "Financial Planning & Analysis Manager",
+                                "timeInPosition": 2
+                            },
+                            {
+                                "id": 22,
+                                "name": "Zachery Shelton",
+                                "reportsTo": 15,
+                                "phone": "(310) 240-8675",
+                                "extension": 4527,
+                                "hireDate": new Date(2011, 11, 23),
+                                "fullTime": false,
+                                "position": "Corporate Finance Controller",
+                                "timeInPosition": 6,
+                                "employees": [
+                                    {
+                                        "id": 28,
+                                        "name": "Cullen Freeman",
+                                        "reportsTo": 22,
+                                        "phone": "(136) 554-8814",
+                                        "extension": 9861,
+                                        "hireDate": new Date(2014, 3, 15),
+                                        "fullTime": true,
+                                        "position": "Treasurer Accountant",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 31,
+                                        "name": "Quinn Dean",
+                                        "reportsTo": 22,
+                                        "phone": "(152) 613-3507",
+                                        "extension": 6621,
+                                        "hireDate": new Date(2015, 1, 29),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 34,
+                                        "name": "Samantha Brady",
+                                        "reportsTo": 22,
+                                        "phone": "(206) 398-4328",
+                                        "extension": 1157,
+                                        "hireDate": new Date(2011, 2, 13),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 35,
+                                                "name": "Tamara Green",
+                                                "reportsTo": 34,
+                                                "phone": "(219) 248-2789",
+                                                "extension": 4880,
+                                                "hireDate": new Date(2014, 2, 4),
+                                                "fullTime": true,
+                                                "position": "Junior Accountant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 36,
+                                        "name": "Olympia Coleman",
+                                        "reportsTo": 22,
+                                        "phone": "(944) 853-6383",
+                                        "extension": 2136,
+                                        "hireDate": new Date(2013, 7, 31),
+                                        "fullTime": true,
+                                        "position": "Collections Manager",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 37,
+                                        "name": "Breanna Goodwin",
+                                        "reportsTo": 22,
+                                        "phone": "(379) 988-9630",
+                                        "extension": 5898,
+                                        "hireDate": new Date(2010, 5, 23),
+                                        "fullTime": false,
+                                        "position": "Payroll Specialist",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 27,
+                                "name": "Curran Travis",
+                                "reportsTo": 15,
+                                "phone": "(438) 135-8033",
+                                "extension": 3841,
+                                "hireDate": new Date(2011, 6, 13),
+                                "fullTime": true,
+                                "position": "Finance Controller",
+                                "timeInPosition": 5
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "Hunter Fry",
+                "reportsTo": 1,
+                "phone": "(766) 358-9858",
+                "extension": 3741,
+                "hireDate": new Date(2011, 2, 12),
+                "fullTime": false,
+                "position": "General Counsel",
+                "timeInPosition": 3,
+                "employees": [
+                    {
+                        "id": 9,
+                        "name": "Kuame Carrillo",
+                        "reportsTo": 8,
+                        "phone": "(192) 383-1305",
+                        "extension": 9228,
+                        "hireDate": new Date(2011, 2, 22),
+                        "fullTime": true,
+                        "position": "Associate General Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 13,
+                        "name": "Stacy Todd",
+                        "reportsTo": 8,
+                        "phone": "(925) 286-3327",
+                        "extension": 8565,
+                        "hireDate": new Date(2014, 7, 5),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 33,
+                        "name": "Valentine Wyatt",
+                        "reportsTo": 8,
+                        "phone": "(165) 166-6205",
+                        "extension": 3588,
+                        "hireDate": new Date(2015, 5, 21),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 5
+                    },
+                    {
+                        "id": 86,
+                        "name": "Daniel Mccarthy",
+                        "reportsTo": 8,
+                        "phone": "(624) 483-6206",
+                        "extension": 9112,
+                        "hireDate": new Date(2013, 12, 3),
+                        "fullTime": false,
+                        "position": "Staff Attorney",
+                        "timeInPosition": 0
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default employees;
diff --git a/vue-options-api-demos/treelist/locked/main.js b/vue-options-api-demos/treelist/locked/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/locked/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/locked/main.vue b/vue-options-api-demos/treelist/locked/main.vue
new file mode 100644
index 00000000..98818979
--- /dev/null
+++ b/vue-options-api-demos/treelist/locked/main.vue
@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <TreeList
+      :style="treeListStyles"
+      :tableProps="{
+        style: {
+          width: '1500px',
+        },
+      }"
+      :expandField="expandField"
+      :subItemsField="subItemsField"
+      @expandchange="onExpandChange"
+      :data-items="tree"
+      :columns="columns"
+    />
+  </div>
+</template>
+
+<script>
+import employees from './data';
+import {
+  TreeList,
+  mapTree,
+  extendDataItem,
+} from '@progress/kendo-vue-treelist';
+export default {
+  components: {
+    TreeList,
+  },
+  data() {
+    return {
+      dataItems: [...employees],
+      subItemsField: 'employees',
+      expandField: 'expanded',
+      expanded: [1, 2, 32],
+      columns: [
+        {
+          field: 'name',
+          title: 'Name',
+          width: '300px',
+          expandable: true,
+          locked: true,
+        },
+        {
+          field: 'position',
+          title: 'Position',
+          width: '300px',
+        },
+        {
+          field: 'hireDate',
+          title: 'Hire Date',
+          width: '200px',
+          format: '{0:d}',
+        },
+        {
+          field: 'phone',
+          title: 'Phone',
+          width: '200px',
+        },
+        {
+          field: 'extension',
+          title: 'Extension',
+          width: '200px',
+        },
+        {
+          field: 'fullTime',
+          title: 'Full Time',
+          width: '100px',
+          locked: true,
+        },
+        {
+          field: 'timeInPosition',
+          title: 'Year(s) in Position',
+          width: '200px',
+        },
+      ],
+    };
+  },
+  computed: {
+    tree() {
+      return mapTree(this.dataItems, this.subItemsField, (item) =>
+        extendDataItem(item, this.subItemsField, {
+          [this.expandField]: this.expanded.includes(item.id),
+        })
+      );
+    },
+    treeListStyles() {
+      return {
+        maxHeight: '510px',
+        width: '720px',
+        overflow: 'auto',
+      };
+    },
+  },
+  methods: {
+    onExpandChange(event) {
+      this.expanded = event.value
+        ? this.expanded.filter((id) => id !== event.dataItem.id)
+        : [...this.expanded, event.dataItem.id];
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treelist/multi-column-headers/data.js b/vue-options-api-demos/treelist/multi-column-headers/data.js
new file mode 100644
index 00000000..f66aec4d
--- /dev/null
+++ b/vue-options-api-demos/treelist/multi-column-headers/data.js
@@ -0,0 +1,1150 @@
+
+const employees = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2,
+        "employees": [
+            {
+                "id": 2,
+                "name": "Guy Wooten",
+                "reportsTo": 1,
+                "phone": "(438) 738-4935",
+                "extension": 1155,
+                "hireDate": new Date(2010, 3, 3),
+                "fullTime": true,
+                "position": "Chief Technical Officer",
+                "timeInPosition": 1,
+                "employees": [
+                    {
+                        "id": 32,
+                        "name": "Buffy Weber",
+                        "reportsTo": 2,
+                        "phone": "(699) 838-6121",
+                        "extension": 8933,
+                        "hireDate": new Date(2011, 7, 11),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 11,
+                                "name": "Hyacinth Hood",
+                                "reportsTo": 32,
+                                "phone": "(889) 345-2438",
+                                "extension": 8564,
+                                "hireDate": new Date(2014, 2, 3),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 60,
+                                        "name": "Akeem Carr",
+                                        "reportsTo": 11,
+                                        "phone": "(738) 136-2814",
+                                        "extension": 9353,
+                                        "hireDate": new Date(2011, 4, 21),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 78,
+                                        "name": "Rinah Simon",
+                                        "reportsTo": 11,
+                                        "phone": "(285) 912-5271",
+                                        "extension": 7795,
+                                        "hireDate": new Date(2012, 10, 11),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 42,
+                                "name": "Gage Daniels",
+                                "reportsTo": 32,
+                                "phone": "(107) 290-6260",
+                                "extension": 896,
+                                "hireDate": new Date(2013, 5, 16),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 5
+                            },
+                            {
+                                "id": 43,
+                                "name": "Constance Vazquez",
+                                "reportsTo": 32,
+                                "phone": "(800) 301-1978",
+                                "extension": 5141,
+                                "hireDate": new Date(2011, 6, 7),
+                                "fullTime": true,
+                                "position": "Director, Engineering",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 46,
+                                        "name": "Darrel Solis",
+                                        "reportsTo": 43,
+                                        "phone": "(327) 977-0216",
+                                        "extension": 7779,
+                                        "hireDate": new Date(2015, 4, 25),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 47,
+                                                "name": "Brian Yang",
+                                                "reportsTo": 46,
+                                                "phone": "(565) 146-5435",
+                                                "extension": 3885,
+                                                "hireDate": new Date(2012, 9, 27),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 50,
+                                                "name": "Lillian Bradshaw",
+                                                "reportsTo": 46,
+                                                "phone": "(323) 509-3479",
+                                                "extension": 5426,
+                                                "hireDate": new Date(2014, 5, 10),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 51,
+                                                "name": "Christian Palmer",
+                                                "reportsTo": 46,
+                                                "phone": "(490) 421-8718",
+                                                "extension": 3706,
+                                                "hireDate": new Date(2012, 12, 27),
+                                                "fullTime": false,
+                                                "position": "Technical Lead",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 55,
+                                                "name": "Summer Mosley",
+                                                "reportsTo": 46,
+                                                "phone": "(784) 962-2301",
+                                                "extension": 5492,
+                                                "hireDate": new Date(2010, 3, 2),
+                                                "fullTime": true,
+                                                "position": "QA Engineer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 56,
+                                                "name": "Barry Ayers",
+                                                "reportsTo": 46,
+                                                "phone": "(452) 373-9227",
+                                                "extension": 1308,
+                                                "hireDate": new Date(2011, 10, 11),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 59,
+                                                "name": "Keiko Espinoza",
+                                                "reportsTo": 46,
+                                                "phone": "(226) 600-5305",
+                                                "extension": 9363,
+                                                "hireDate": new Date(2011, 9, 18),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 61,
+                                                "name": "Candace Pickett",
+                                                "reportsTo": 46,
+                                                "phone": "(120) 117-7475",
+                                                "extension": 5178,
+                                                "hireDate": new Date(2010, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 63,
+                                        "name": "Mia Caldwell",
+                                        "reportsTo": 43,
+                                        "phone": "(848) 636-6470",
+                                        "extension": 6368,
+                                        "hireDate": new Date(2012, 10, 7),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 65,
+                                                "name": "Thomas Terry",
+                                                "reportsTo": 63,
+                                                "phone": "(764) 831-4248",
+                                                "extension": 3574,
+                                                "hireDate": new Date(2015, 6, 15),
+                                                "fullTime": false,
+                                                "position": "Senior Enterprise Support Officer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 67,
+                                                "name": "Ruth Downs",
+                                                "reportsTo": 63,
+                                                "phone": "(138) 991-1440",
+                                                "extension": 8067,
+                                                "hireDate": new Date(2013, 7, 13),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 70,
+                                                "name": "Yasir Wilder",
+                                                "reportsTo": 63,
+                                                "phone": "(759) 701-8665",
+                                                "extension": 8350,
+                                                "hireDate": new Date(2010, 11, 8),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 71,
+                                                "name": "Flavia Short",
+                                                "reportsTo": 63,
+                                                "phone": "(370) 133-9238",
+                                                "extension": 6390,
+                                                "hireDate": new Date(2013, 2, 21),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 74,
+                                                "name": "Aaron Roach",
+                                                "reportsTo": 63,
+                                                "phone": "(958) 717-9230",
+                                                "extension": 4899,
+                                                "hireDate": new Date(2011, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 75,
+                                                "name": "Eric Russell",
+                                                "reportsTo": 63,
+                                                "phone": "(516) 575-8505",
+                                                "extension": 2224,
+                                                "hireDate": new Date(2012, 10, 28),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 76,
+                                                "name": "Cheyenne Olson",
+                                                "reportsTo": 63,
+                                                "phone": "(241) 645-0257",
+                                                "extension": 9181,
+                                                "hireDate": new Date(2015, 5, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 77,
+                                                "name": "Shaine Avila",
+                                                "reportsTo": 63,
+                                                "phone": "(844) 435-1360",
+                                                "extension": 3374,
+                                                "hireDate": new Date(2010, 1, 31),
+                                                "fullTime": true,
+                                                "position": "UI Designer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 81,
+                                                "name": "Chantale Long",
+                                                "reportsTo": 63,
+                                                "phone": "(252) 419-6891",
+                                                "extension": 7868,
+                                                "hireDate": new Date(2010, 6, 17),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 83,
+                                                "name": "Dane Cruz",
+                                                "reportsTo": 63,
+                                                "phone": "(946) 701-6165",
+                                                "extension": 3828,
+                                                "hireDate": new Date(2014, 10, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 84,
+                                                "name": "Regan Patterson",
+                                                "reportsTo": 63,
+                                                "phone": "(265) 946-1765",
+                                                "extension": 6955,
+                                                "hireDate": new Date(2012, 3, 1),
+                                                "fullTime": true,
+                                                "position": "Technical Writer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 85,
+                                                "name": "Drew Mckay",
+                                                "reportsTo": 63,
+                                                "phone": "(327) 293-0162",
+                                                "extension": 6904,
+                                                "hireDate": new Date(2011, 3, 25),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 88,
+                                                "name": "Bevis Miller",
+                                                "reportsTo": 63,
+                                                "phone": "(525) 557-0169",
+                                                "extension": 6978,
+                                                "hireDate": new Date(2011, 4, 19),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 89,
+                                                "name": "Bruce Mccarty",
+                                                "reportsTo": 63,
+                                                "phone": "(936) 777-8730",
+                                                "extension": 6552,
+                                                "hireDate": new Date(2014, 3, 28),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 5
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 90,
+                                        "name": "Ocean Blair",
+                                        "reportsTo": 43,
+                                        "phone": "(343) 586-6614",
+                                        "extension": 1424,
+                                        "hireDate": new Date(2011, 4, 27),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 91,
+                                                "name": "Guinevere Osborn",
+                                                "reportsTo": 90,
+                                                "phone": "(424) 741-0006",
+                                                "extension": 3166,
+                                                "hireDate": new Date(2014, 11, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 92,
+                                                "name": "Olga Strong",
+                                                "reportsTo": 90,
+                                                "phone": "(949) 417-1168",
+                                                "extension": 4568,
+                                                "hireDate": new Date(2015, 5, 28),
+                                                "fullTime": true,
+                                                "position": "Graphic Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 93,
+                                                "name": "Robert Orr",
+                                                "reportsTo": 90,
+                                                "phone": "(977) 341-3721",
+                                                "extension": 9241,
+                                                "hireDate": new Date(2012, 8, 20),
+                                                "fullTime": false,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 95,
+                                                "name": "Odette Sears",
+                                                "reportsTo": 90,
+                                                "phone": "(264) 818-6576",
+                                                "extension": 1914,
+                                                "hireDate": new Date(2013, 7, 5),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 45,
+                                "name": "Zelda Medina",
+                                "reportsTo": 32,
+                                "phone": "(563) 359-6023",
+                                "extension": 2600,
+                                "hireDate": new Date(2012, 11, 6),
+                                "fullTime": true,
+                                "position": "QA Architect",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    },
+                    {
+                        "id": 52,
+                        "name": "Skyler Cleveland",
+                        "reportsTo": 2,
+                        "phone": "(217) 280-5300",
+                        "extension": 9655,
+                        "hireDate": new Date(2014, 11, 10),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 40,
+                                "name": "Karleigh Garza",
+                                "reportsTo": 52,
+                                "phone": "(370) 983-8796",
+                                "extension": 4044,
+                                "hireDate": new Date(2014, 3, 10),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 49,
+                                        "name": "Elmo Tyson",
+                                        "reportsTo": 40,
+                                        "phone": "(344) 496-9555",
+                                        "extension": 6950,
+                                        "hireDate": new Date(2014, 9, 18),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 72,
+                                        "name": "Stacey Lynn",
+                                        "reportsTo": 40,
+                                        "phone": "(140) 772-7509",
+                                        "extension": 8396,
+                                        "hireDate": new Date(2014, 7, 31),
+                                        "fullTime": false,
+                                        "position": "QA Engineer",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 80,
+                                                "name": "Meredith Parrish",
+                                                "reportsTo": 72,
+                                                "phone": "(714) 284-2408",
+                                                "extension": 7675,
+                                                "hireDate": new Date(2012, 11, 13),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 96,
+                                        "name": "Cassady Whitley",
+                                        "reportsTo": 40,
+                                        "phone": "(996) 587-8405",
+                                        "extension": 780,
+                                        "hireDate": new Date(2013, 5, 7),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 5
+                                    },
+                                    {
+                                        "id": 97,
+                                        "name": "Haviva Campbell",
+                                        "reportsTo": 40,
+                                        "phone": "(263) 887-4689",
+                                        "extension": 2808,
+                                        "hireDate": new Date(2013, 3, 5),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 98,
+                                        "name": "Cameron Ayers",
+                                        "reportsTo": 40,
+                                        "phone": "(470) 709-8030",
+                                        "extension": 2893,
+                                        "hireDate": new Date(2013, 8, 28),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 99,
+                                        "name": "Martha Sargent",
+                                        "reportsTo": 40,
+                                        "phone": "(587) 812-4418",
+                                        "extension": 5099,
+                                        "hireDate": new Date(2014, 2, 27),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 100,
+                                        "name": "Darrel Kinney",
+                                        "reportsTo": 40,
+                                        "phone": "(888) 483-9606",
+                                        "extension": 4779,
+                                        "hireDate": new Date(2014, 3, 24),
+                                        "fullTime": false,
+                                        "position": "Graphic Designer",
+                                        "timeInPosition": 1
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 54,
+                                "name": "Kuame Frye",
+                                "reportsTo": 52,
+                                "phone": "(360) 721-5886",
+                                "extension": 2730,
+                                "hireDate": new Date(2010, 11, 17),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 64,
+                                        "name": "Ori Wynn",
+                                        "reportsTo": 54,
+                                        "phone": "(366) 342-0166",
+                                        "extension": 7252,
+                                        "hireDate": new Date(2015, 6, 21),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 0,
+                                        "employees": [
+                                            {
+                                                "id": 6,
+                                                "name": "Moses Duncan",
+                                                "reportsTo": 64,
+                                                "phone": "(421) 611-4814",
+                                                "extension": 669,
+                                                "hireDate": new Date(2010, 5, 24),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 12,
+                                                "name": "Jamalia Wallace",
+                                                "reportsTo": 64,
+                                                "phone": "(611) 391-8016",
+                                                "extension": 1952,
+                                                "hireDate": new Date(2011, 9, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Designer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 62,
+                                                "name": "Palmer Gregory",
+                                                "reportsTo": 64,
+                                                "phone": "(360) 430-2505",
+                                                "extension": 4337,
+                                                "hireDate": new Date(2014, 8, 30),
+                                                "fullTime": true,
+                                                "position": "Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 68,
+                                                "name": "Mallory Gilliam",
+                                                "reportsTo": 64,
+                                                "phone": "(878) 423-2971",
+                                                "extension": 1341,
+                                                "hireDate": new Date(2014, 7, 24),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 73,
+                                                "name": "Ima Hughes",
+                                                "reportsTo": 64,
+                                                "phone": "(905) 485-8001",
+                                                "extension": 1273,
+                                                "hireDate": new Date(2013, 6, 3),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 79,
+                                                "name": "Duncan Mathews",
+                                                "reportsTo": 64,
+                                                "phone": "(790) 971-9709",
+                                                "extension": 4573,
+                                                "hireDate": new Date(2011, 8, 21),
+                                                "fullTime": false,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 69,
+                                "name": "Sierra Beasley",
+                                "reportsTo": 52,
+                                "phone": "(271) 953-1968",
+                                "extension": 3324,
+                                "hireDate": new Date(2011, 4, 2),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 3,
+                                "employees": [
+                                    {
+                                        "id": 38,
+                                        "name": "Elton Tucker",
+                                        "reportsTo": 69,
+                                        "phone": "(988) 930-9331",
+                                        "extension": 9216,
+                                        "hireDate": new Date(2015, 6, 4),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 1
+                                    },
+                                    {
+                                        "id": 39,
+                                        "name": "Iona Brennan",
+                                        "reportsTo": 69,
+                                        "phone": "(356) 563-0600",
+                                        "extension": 5634,
+                                        "hireDate": new Date(2010, 9, 23),
+                                        "fullTime": true,
+                                        "position": "Junior Support Officer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 53,
+                                        "name": "Paul Campos",
+                                        "reportsTo": 69,
+                                        "phone": "(899) 205-1689",
+                                        "extension": 8586,
+                                        "hireDate": new Date(2011, 3, 17),
+                                        "fullTime": true,
+                                        "position": "Interaction Designer",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 66,
+                                                "name": "Gloria Freeman",
+                                                "reportsTo": 53,
+                                                "phone": "(344) 950-9168",
+                                                "extension": 4738,
+                                                "hireDate": new Date(2013, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Junior Interaction Designer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 57,
+                                        "name": "Alyssa Hansen",
+                                        "reportsTo": 69,
+                                        "phone": "(548) 925-4799",
+                                        "extension": 4716,
+                                        "hireDate": new Date(2011, 1, 19),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 82,
+                                        "name": "Yael Walters",
+                                        "reportsTo": 69,
+                                        "phone": "(311) 489-8191",
+                                        "extension": 6520,
+                                        "hireDate": new Date(2013, 7, 4),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 87,
+                                        "name": "Dahlia Hunt",
+                                        "reportsTo": 69,
+                                        "phone": "(720) 339-5202",
+                                        "extension": 3690,
+                                        "hireDate": new Date(2011, 3, 26),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 94,
+                                        "name": "Adria Stanley",
+                                        "reportsTo": 69,
+                                        "phone": "(536) 357-6391",
+                                        "extension": 3374,
+                                        "hireDate": new Date(2014, 7, 26),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "Priscilla Frank",
+                "reportsTo": 1,
+                "phone": "(278) 927-2684",
+                "extension": 4183,
+                "hireDate": new Date(2014, 11, 30),
+                "fullTime": true,
+                "position": "Chief Product Officer",
+                "timeInPosition": 2,
+                "employees": [
+                    {
+                        "id": 4,
+                        "name": "Ursula Holmes",
+                        "reportsTo": 3,
+                        "phone": "(302) 760-2034",
+                        "extension": 2226,
+                        "hireDate": new Date(2011, 6, 6),
+                        "fullTime": true,
+                        "position": "EVP, Product Strategy",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 24,
+                        "name": "Melvin Carrillo",
+                        "reportsTo": 3,
+                        "phone": "(348) 933-5167",
+                        "extension": 2482,
+                        "hireDate": new Date(2014, 7, 21),
+                        "fullTime": true,
+                        "position": "Director, Developer Relations",
+                        "timeInPosition": 6,
+                        "employees": [
+                            {
+                                "id": 29,
+                                "name": "Martha Chavez",
+                                "reportsTo": 24,
+                                "phone": "(860) 754-3464",
+                                "extension": 4531,
+                                "hireDate": new Date(2013, 3, 12),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 30,
+                                "name": "Oren Fox",
+                                "reportsTo": 24,
+                                "phone": "(572) 414-3299",
+                                "extension": 4849,
+                                "hireDate": new Date(2013, 5, 14),
+                                "fullTime": false,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 41,
+                                "name": "Amos Barr",
+                                "reportsTo": 24,
+                                "phone": "(470) 381-3718",
+                                "extension": 7643,
+                                "hireDate": new Date(2010, 3, 9),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "Anika Vega",
+                "reportsTo": 1,
+                "phone": "(910) 714-1802",
+                "extension": 6353,
+                "hireDate": new Date(2010, 2, 25),
+                "fullTime": true,
+                "position": "Chief Process Officer",
+                "timeInPosition": 5,
+                "employees": [
+                    {
+                        "id": 10,
+                        "name": "Vernon Ballard",
+                        "reportsTo": 5,
+                        "phone": "(702) 185-8890",
+                        "extension": 9242,
+                        "hireDate": new Date(2015, 6, 26),
+                        "fullTime": true,
+                        "position": "Director Facilities",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 16,
+                                "name": "Ali Guy",
+                                "reportsTo": 10,
+                                "phone": "(429) 912-6578",
+                                "extension": 2225,
+                                "hireDate": new Date(2014, 6, 29),
+                                "fullTime": true,
+                                "position": "Operations Manager",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 23,
+                                        "name": "Bruce Reilly",
+                                        "reportsTo": 16,
+                                        "phone": "(995) 243-7302",
+                                        "extension": 4815,
+                                        "hireDate": new Date(2015, 4, 1),
+                                        "fullTime": true,
+                                        "position": "Head of Security",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 26,
+                                                "name": "Rowan Morin",
+                                                "reportsTo": 23,
+                                                "phone": "(792) 141-4374",
+                                                "extension": 1844,
+                                                "hireDate": new Date(2015, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Building Security",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 44,
+                                                "name": "Benedict Soto",
+                                                "reportsTo": 23,
+                                                "phone": "(822) 282-5991",
+                                                "extension": 6422,
+                                                "hireDate": new Date(2012, 6, 1),
+                                                "fullTime": false,
+                                                "position": "Building Security",
+                                                "timeInPosition": 4
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 48,
+                                        "name": "Maryam Rios",
+                                        "reportsTo": 16,
+                                        "phone": "(673) 764-6720",
+                                        "extension": 531,
+                                        "hireDate": new Date(2014, 3, 3),
+                                        "fullTime": true,
+                                        "position": "Team Lead, Personal Assistants",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 58,
+                                                "name": "Rose Mcintyre",
+                                                "reportsTo": 48,
+                                                "phone": "(771) 615-4590",
+                                                "extension": 7094,
+                                                "hireDate": new Date(2015, 6, 30),
+                                                "fullTime": false,
+                                                "position": "Personal Assistant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "Nevada Hart",
+                "reportsTo": 1,
+                "phone": "(254) 220-1576",
+                "extension": 6649,
+                "hireDate": new Date(2015, 8, 17),
+                "fullTime": true,
+                "position": "Chief Financial Officer",
+                "timeInPosition": 6,
+                "employees": [
+                    {
+                        "id": 14,
+                        "name": "Zena Sanford",
+                        "reportsTo": 7,
+                        "phone": "(437) 568-8160",
+                        "extension": 4452,
+                        "hireDate": new Date(2010, 11, 30),
+                        "fullTime": true,
+                        "position": "VP, Finance",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 15,
+                        "name": "Quinlan Howe",
+                        "reportsTo": 7,
+                        "phone": "(464) 334-9748",
+                        "extension": 8722,
+                        "hireDate": new Date(2011, 6, 9),
+                        "fullTime": false,
+                        "position": "Senior Director, Finance",
+                        "timeInPosition": 0,
+                        "employees": [
+                            {
+                                "id": 17,
+                                "name": "Indira Lopez",
+                                "reportsTo": 15,
+                                "phone": "(301) 368-0938",
+                                "extension": 8027,
+                                "hireDate": new Date(2013, 8, 18),
+                                "fullTime": true,
+                                "position": "ERP Team Lead",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 18,
+                                        "name": "Lareina Lara",
+                                        "reportsTo": 17,
+                                        "phone": "(233) 457-7482",
+                                        "extension": 1996,
+                                        "hireDate": new Date(2010, 4, 30),
+                                        "fullTime": true,
+                                        "position": "ERP Solutions Consultant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 19,
+                                        "name": "Maxwell Wise",
+                                        "reportsTo": 17,
+                                        "phone": "(570) 494-2531",
+                                        "extension": 9865,
+                                        "hireDate": new Date(2012, 5, 19),
+                                        "fullTime": true,
+                                        "position": "Systems Engineer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 20,
+                                "name": "Hunter Mcbride",
+                                "reportsTo": 15,
+                                "phone": "(409) 442-7016",
+                                "extension": 4284,
+                                "hireDate": new Date(2012, 10, 20),
+                                "fullTime": true,
+                                "position": "Senior Director, Tax",
+                                "timeInPosition": 3
+                            },
+                            {
+                                "id": 21,
+                                "name": "Jana Serrano",
+                                "reportsTo": 15,
+                                "phone": "(910) 718-4620",
+                                "extension": 6970,
+                                "hireDate": new Date(2010, 4, 2),
+                                "fullTime": true,
+                                "position": "Financial Planning & Analysis Manager",
+                                "timeInPosition": 2
+                            },
+                            {
+                                "id": 22,
+                                "name": "Zachery Shelton",
+                                "reportsTo": 15,
+                                "phone": "(310) 240-8675",
+                                "extension": 4527,
+                                "hireDate": new Date(2011, 11, 23),
+                                "fullTime": false,
+                                "position": "Corporate Finance Controller",
+                                "timeInPosition": 6,
+                                "employees": [
+                                    {
+                                        "id": 28,
+                                        "name": "Cullen Freeman",
+                                        "reportsTo": 22,
+                                        "phone": "(136) 554-8814",
+                                        "extension": 9861,
+                                        "hireDate": new Date(2014, 3, 15),
+                                        "fullTime": true,
+                                        "position": "Treasurer Accountant",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 31,
+                                        "name": "Quinn Dean",
+                                        "reportsTo": 22,
+                                        "phone": "(152) 613-3507",
+                                        "extension": 6621,
+                                        "hireDate": new Date(2015, 1, 29),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 34,
+                                        "name": "Samantha Brady",
+                                        "reportsTo": 22,
+                                        "phone": "(206) 398-4328",
+                                        "extension": 1157,
+                                        "hireDate": new Date(2011, 2, 13),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 35,
+                                                "name": "Tamara Green",
+                                                "reportsTo": 34,
+                                                "phone": "(219) 248-2789",
+                                                "extension": 4880,
+                                                "hireDate": new Date(2014, 2, 4),
+                                                "fullTime": true,
+                                                "position": "Junior Accountant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 36,
+                                        "name": "Olympia Coleman",
+                                        "reportsTo": 22,
+                                        "phone": "(944) 853-6383",
+                                        "extension": 2136,
+                                        "hireDate": new Date(2013, 7, 31),
+                                        "fullTime": true,
+                                        "position": "Collections Manager",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 37,
+                                        "name": "Breanna Goodwin",
+                                        "reportsTo": 22,
+                                        "phone": "(379) 988-9630",
+                                        "extension": 5898,
+                                        "hireDate": new Date(2010, 5, 23),
+                                        "fullTime": false,
+                                        "position": "Payroll Specialist",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 27,
+                                "name": "Curran Travis",
+                                "reportsTo": 15,
+                                "phone": "(438) 135-8033",
+                                "extension": 3841,
+                                "hireDate": new Date(2011, 6, 13),
+                                "fullTime": true,
+                                "position": "Finance Controller",
+                                "timeInPosition": 5
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "Hunter Fry",
+                "reportsTo": 1,
+                "phone": "(766) 358-9858",
+                "extension": 3741,
+                "hireDate": new Date(2011, 2, 12),
+                "fullTime": false,
+                "position": "General Counsel",
+                "timeInPosition": 3,
+                "employees": [
+                    {
+                        "id": 9,
+                        "name": "Kuame Carrillo",
+                        "reportsTo": 8,
+                        "phone": "(192) 383-1305",
+                        "extension": 9228,
+                        "hireDate": new Date(2011, 2, 22),
+                        "fullTime": true,
+                        "position": "Associate General Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 13,
+                        "name": "Stacy Todd",
+                        "reportsTo": 8,
+                        "phone": "(925) 286-3327",
+                        "extension": 8565,
+                        "hireDate": new Date(2014, 7, 5),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 33,
+                        "name": "Valentine Wyatt",
+                        "reportsTo": 8,
+                        "phone": "(165) 166-6205",
+                        "extension": 3588,
+                        "hireDate": new Date(2015, 5, 21),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 5
+                    },
+                    {
+                        "id": 86,
+                        "name": "Daniel Mccarthy",
+                        "reportsTo": 8,
+                        "phone": "(624) 483-6206",
+                        "extension": 9112,
+                        "hireDate": new Date(2013, 12, 3),
+                        "fullTime": false,
+                        "position": "Staff Attorney",
+                        "timeInPosition": 0
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default employees;
diff --git a/vue-options-api-demos/treelist/multi-column-headers/main.js b/vue-options-api-demos/treelist/multi-column-headers/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/multi-column-headers/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/multi-column-headers/main.vue b/vue-options-api-demos/treelist/multi-column-headers/main.vue
new file mode 100644
index 00000000..de5c3f75
--- /dev/null
+++ b/vue-options-api-demos/treelist/multi-column-headers/main.vue
@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <TreeList
+      :style="treeListStyles"
+      :tableProps="{
+        style: {
+          tableLayout: 'fixed',
+        },
+      }"
+      :expandField="expandField"
+      :subItemsField="subItemsField"
+      @expandchange="onExpandChange"
+      :data-items="tree"
+      :columns="columns"
+    />
+  </div>
+</template>
+
+<script>
+import employees from './data';
+import {
+  TreeList,
+  mapTree,
+  extendDataItem,
+} from '@progress/kendo-vue-treelist';
+export default {
+  components: {
+    TreeList,
+  },
+  data() {
+    return {
+      dataItems: [...employees],
+      subItemsField: 'employees',
+      expandField: 'expanded',
+      expanded: [1, 2, 32],
+      columns: [
+        {
+          field: 'Personal Information',
+          children: [
+            {
+              field: 'name',
+              title: 'Name',
+              width: '300px',
+              expandable: true,
+            },
+            {
+              title: 'Contact Information',
+              children: [
+                {
+                  field: 'phone',
+                  title: 'Phone',
+                  width: '200px',
+                },
+                {
+                  field: 'extension',
+                  title: 'Extension',
+                  width: '200px',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          title: 'Employee Details',
+          children: [
+            {
+              field: 'position',
+              title: 'Position',
+              width: '300px',
+            },
+            {
+              field: 'fullTime',
+              title: 'Full Time',
+              width: '100px',
+            },
+          ],
+        },
+      ],
+    };
+  },
+  computed: {
+    tree() {
+      return mapTree(this.dataItems, this.subItemsField, (item) =>
+        extendDataItem(item, this.subItemsField, {
+          [this.expandField]: this.expanded.includes(item.id),
+        })
+      );
+    },
+    treeListStyles() {
+      return {
+        maxHeight: '510px',
+        overflow: 'auto',
+      };
+    },
+  },
+  methods: {
+    onExpandChange(event) {
+      this.expanded = event.value
+        ? this.expanded.filter((id) => id !== event.dataItem.id)
+        : [...this.expanded, event.dataItem.id];
+    },
+    onColumnReorder(event) {
+      this.columns = event.columns;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treelist/overview/data.js b/vue-options-api-demos/treelist/overview/data.js
new file mode 100644
index 00000000..f66aec4d
--- /dev/null
+++ b/vue-options-api-demos/treelist/overview/data.js
@@ -0,0 +1,1150 @@
+
+const employees = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2,
+        "employees": [
+            {
+                "id": 2,
+                "name": "Guy Wooten",
+                "reportsTo": 1,
+                "phone": "(438) 738-4935",
+                "extension": 1155,
+                "hireDate": new Date(2010, 3, 3),
+                "fullTime": true,
+                "position": "Chief Technical Officer",
+                "timeInPosition": 1,
+                "employees": [
+                    {
+                        "id": 32,
+                        "name": "Buffy Weber",
+                        "reportsTo": 2,
+                        "phone": "(699) 838-6121",
+                        "extension": 8933,
+                        "hireDate": new Date(2011, 7, 11),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 11,
+                                "name": "Hyacinth Hood",
+                                "reportsTo": 32,
+                                "phone": "(889) 345-2438",
+                                "extension": 8564,
+                                "hireDate": new Date(2014, 2, 3),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 60,
+                                        "name": "Akeem Carr",
+                                        "reportsTo": 11,
+                                        "phone": "(738) 136-2814",
+                                        "extension": 9353,
+                                        "hireDate": new Date(2011, 4, 21),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 78,
+                                        "name": "Rinah Simon",
+                                        "reportsTo": 11,
+                                        "phone": "(285) 912-5271",
+                                        "extension": 7795,
+                                        "hireDate": new Date(2012, 10, 11),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 42,
+                                "name": "Gage Daniels",
+                                "reportsTo": 32,
+                                "phone": "(107) 290-6260",
+                                "extension": 896,
+                                "hireDate": new Date(2013, 5, 16),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 5
+                            },
+                            {
+                                "id": 43,
+                                "name": "Constance Vazquez",
+                                "reportsTo": 32,
+                                "phone": "(800) 301-1978",
+                                "extension": 5141,
+                                "hireDate": new Date(2011, 6, 7),
+                                "fullTime": true,
+                                "position": "Director, Engineering",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 46,
+                                        "name": "Darrel Solis",
+                                        "reportsTo": 43,
+                                        "phone": "(327) 977-0216",
+                                        "extension": 7779,
+                                        "hireDate": new Date(2015, 4, 25),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 47,
+                                                "name": "Brian Yang",
+                                                "reportsTo": 46,
+                                                "phone": "(565) 146-5435",
+                                                "extension": 3885,
+                                                "hireDate": new Date(2012, 9, 27),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 50,
+                                                "name": "Lillian Bradshaw",
+                                                "reportsTo": 46,
+                                                "phone": "(323) 509-3479",
+                                                "extension": 5426,
+                                                "hireDate": new Date(2014, 5, 10),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 51,
+                                                "name": "Christian Palmer",
+                                                "reportsTo": 46,
+                                                "phone": "(490) 421-8718",
+                                                "extension": 3706,
+                                                "hireDate": new Date(2012, 12, 27),
+                                                "fullTime": false,
+                                                "position": "Technical Lead",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 55,
+                                                "name": "Summer Mosley",
+                                                "reportsTo": 46,
+                                                "phone": "(784) 962-2301",
+                                                "extension": 5492,
+                                                "hireDate": new Date(2010, 3, 2),
+                                                "fullTime": true,
+                                                "position": "QA Engineer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 56,
+                                                "name": "Barry Ayers",
+                                                "reportsTo": 46,
+                                                "phone": "(452) 373-9227",
+                                                "extension": 1308,
+                                                "hireDate": new Date(2011, 10, 11),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 59,
+                                                "name": "Keiko Espinoza",
+                                                "reportsTo": 46,
+                                                "phone": "(226) 600-5305",
+                                                "extension": 9363,
+                                                "hireDate": new Date(2011, 9, 18),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 61,
+                                                "name": "Candace Pickett",
+                                                "reportsTo": 46,
+                                                "phone": "(120) 117-7475",
+                                                "extension": 5178,
+                                                "hireDate": new Date(2010, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 63,
+                                        "name": "Mia Caldwell",
+                                        "reportsTo": 43,
+                                        "phone": "(848) 636-6470",
+                                        "extension": 6368,
+                                        "hireDate": new Date(2012, 10, 7),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 65,
+                                                "name": "Thomas Terry",
+                                                "reportsTo": 63,
+                                                "phone": "(764) 831-4248",
+                                                "extension": 3574,
+                                                "hireDate": new Date(2015, 6, 15),
+                                                "fullTime": false,
+                                                "position": "Senior Enterprise Support Officer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 67,
+                                                "name": "Ruth Downs",
+                                                "reportsTo": 63,
+                                                "phone": "(138) 991-1440",
+                                                "extension": 8067,
+                                                "hireDate": new Date(2013, 7, 13),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 70,
+                                                "name": "Yasir Wilder",
+                                                "reportsTo": 63,
+                                                "phone": "(759) 701-8665",
+                                                "extension": 8350,
+                                                "hireDate": new Date(2010, 11, 8),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 71,
+                                                "name": "Flavia Short",
+                                                "reportsTo": 63,
+                                                "phone": "(370) 133-9238",
+                                                "extension": 6390,
+                                                "hireDate": new Date(2013, 2, 21),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 74,
+                                                "name": "Aaron Roach",
+                                                "reportsTo": 63,
+                                                "phone": "(958) 717-9230",
+                                                "extension": 4899,
+                                                "hireDate": new Date(2011, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 75,
+                                                "name": "Eric Russell",
+                                                "reportsTo": 63,
+                                                "phone": "(516) 575-8505",
+                                                "extension": 2224,
+                                                "hireDate": new Date(2012, 10, 28),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 76,
+                                                "name": "Cheyenne Olson",
+                                                "reportsTo": 63,
+                                                "phone": "(241) 645-0257",
+                                                "extension": 9181,
+                                                "hireDate": new Date(2015, 5, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 77,
+                                                "name": "Shaine Avila",
+                                                "reportsTo": 63,
+                                                "phone": "(844) 435-1360",
+                                                "extension": 3374,
+                                                "hireDate": new Date(2010, 1, 31),
+                                                "fullTime": true,
+                                                "position": "UI Designer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 81,
+                                                "name": "Chantale Long",
+                                                "reportsTo": 63,
+                                                "phone": "(252) 419-6891",
+                                                "extension": 7868,
+                                                "hireDate": new Date(2010, 6, 17),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 83,
+                                                "name": "Dane Cruz",
+                                                "reportsTo": 63,
+                                                "phone": "(946) 701-6165",
+                                                "extension": 3828,
+                                                "hireDate": new Date(2014, 10, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 84,
+                                                "name": "Regan Patterson",
+                                                "reportsTo": 63,
+                                                "phone": "(265) 946-1765",
+                                                "extension": 6955,
+                                                "hireDate": new Date(2012, 3, 1),
+                                                "fullTime": true,
+                                                "position": "Technical Writer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 85,
+                                                "name": "Drew Mckay",
+                                                "reportsTo": 63,
+                                                "phone": "(327) 293-0162",
+                                                "extension": 6904,
+                                                "hireDate": new Date(2011, 3, 25),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 88,
+                                                "name": "Bevis Miller",
+                                                "reportsTo": 63,
+                                                "phone": "(525) 557-0169",
+                                                "extension": 6978,
+                                                "hireDate": new Date(2011, 4, 19),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 89,
+                                                "name": "Bruce Mccarty",
+                                                "reportsTo": 63,
+                                                "phone": "(936) 777-8730",
+                                                "extension": 6552,
+                                                "hireDate": new Date(2014, 3, 28),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 5
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 90,
+                                        "name": "Ocean Blair",
+                                        "reportsTo": 43,
+                                        "phone": "(343) 586-6614",
+                                        "extension": 1424,
+                                        "hireDate": new Date(2011, 4, 27),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 91,
+                                                "name": "Guinevere Osborn",
+                                                "reportsTo": 90,
+                                                "phone": "(424) 741-0006",
+                                                "extension": 3166,
+                                                "hireDate": new Date(2014, 11, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 92,
+                                                "name": "Olga Strong",
+                                                "reportsTo": 90,
+                                                "phone": "(949) 417-1168",
+                                                "extension": 4568,
+                                                "hireDate": new Date(2015, 5, 28),
+                                                "fullTime": true,
+                                                "position": "Graphic Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 93,
+                                                "name": "Robert Orr",
+                                                "reportsTo": 90,
+                                                "phone": "(977) 341-3721",
+                                                "extension": 9241,
+                                                "hireDate": new Date(2012, 8, 20),
+                                                "fullTime": false,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 95,
+                                                "name": "Odette Sears",
+                                                "reportsTo": 90,
+                                                "phone": "(264) 818-6576",
+                                                "extension": 1914,
+                                                "hireDate": new Date(2013, 7, 5),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 45,
+                                "name": "Zelda Medina",
+                                "reportsTo": 32,
+                                "phone": "(563) 359-6023",
+                                "extension": 2600,
+                                "hireDate": new Date(2012, 11, 6),
+                                "fullTime": true,
+                                "position": "QA Architect",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    },
+                    {
+                        "id": 52,
+                        "name": "Skyler Cleveland",
+                        "reportsTo": 2,
+                        "phone": "(217) 280-5300",
+                        "extension": 9655,
+                        "hireDate": new Date(2014, 11, 10),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 40,
+                                "name": "Karleigh Garza",
+                                "reportsTo": 52,
+                                "phone": "(370) 983-8796",
+                                "extension": 4044,
+                                "hireDate": new Date(2014, 3, 10),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 49,
+                                        "name": "Elmo Tyson",
+                                        "reportsTo": 40,
+                                        "phone": "(344) 496-9555",
+                                        "extension": 6950,
+                                        "hireDate": new Date(2014, 9, 18),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 72,
+                                        "name": "Stacey Lynn",
+                                        "reportsTo": 40,
+                                        "phone": "(140) 772-7509",
+                                        "extension": 8396,
+                                        "hireDate": new Date(2014, 7, 31),
+                                        "fullTime": false,
+                                        "position": "QA Engineer",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 80,
+                                                "name": "Meredith Parrish",
+                                                "reportsTo": 72,
+                                                "phone": "(714) 284-2408",
+                                                "extension": 7675,
+                                                "hireDate": new Date(2012, 11, 13),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 96,
+                                        "name": "Cassady Whitley",
+                                        "reportsTo": 40,
+                                        "phone": "(996) 587-8405",
+                                        "extension": 780,
+                                        "hireDate": new Date(2013, 5, 7),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 5
+                                    },
+                                    {
+                                        "id": 97,
+                                        "name": "Haviva Campbell",
+                                        "reportsTo": 40,
+                                        "phone": "(263) 887-4689",
+                                        "extension": 2808,
+                                        "hireDate": new Date(2013, 3, 5),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 98,
+                                        "name": "Cameron Ayers",
+                                        "reportsTo": 40,
+                                        "phone": "(470) 709-8030",
+                                        "extension": 2893,
+                                        "hireDate": new Date(2013, 8, 28),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 99,
+                                        "name": "Martha Sargent",
+                                        "reportsTo": 40,
+                                        "phone": "(587) 812-4418",
+                                        "extension": 5099,
+                                        "hireDate": new Date(2014, 2, 27),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 100,
+                                        "name": "Darrel Kinney",
+                                        "reportsTo": 40,
+                                        "phone": "(888) 483-9606",
+                                        "extension": 4779,
+                                        "hireDate": new Date(2014, 3, 24),
+                                        "fullTime": false,
+                                        "position": "Graphic Designer",
+                                        "timeInPosition": 1
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 54,
+                                "name": "Kuame Frye",
+                                "reportsTo": 52,
+                                "phone": "(360) 721-5886",
+                                "extension": 2730,
+                                "hireDate": new Date(2010, 11, 17),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 64,
+                                        "name": "Ori Wynn",
+                                        "reportsTo": 54,
+                                        "phone": "(366) 342-0166",
+                                        "extension": 7252,
+                                        "hireDate": new Date(2015, 6, 21),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 0,
+                                        "employees": [
+                                            {
+                                                "id": 6,
+                                                "name": "Moses Duncan",
+                                                "reportsTo": 64,
+                                                "phone": "(421) 611-4814",
+                                                "extension": 669,
+                                                "hireDate": new Date(2010, 5, 24),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 12,
+                                                "name": "Jamalia Wallace",
+                                                "reportsTo": 64,
+                                                "phone": "(611) 391-8016",
+                                                "extension": 1952,
+                                                "hireDate": new Date(2011, 9, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Designer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 62,
+                                                "name": "Palmer Gregory",
+                                                "reportsTo": 64,
+                                                "phone": "(360) 430-2505",
+                                                "extension": 4337,
+                                                "hireDate": new Date(2014, 8, 30),
+                                                "fullTime": true,
+                                                "position": "Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 68,
+                                                "name": "Mallory Gilliam",
+                                                "reportsTo": 64,
+                                                "phone": "(878) 423-2971",
+                                                "extension": 1341,
+                                                "hireDate": new Date(2014, 7, 24),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 73,
+                                                "name": "Ima Hughes",
+                                                "reportsTo": 64,
+                                                "phone": "(905) 485-8001",
+                                                "extension": 1273,
+                                                "hireDate": new Date(2013, 6, 3),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 79,
+                                                "name": "Duncan Mathews",
+                                                "reportsTo": 64,
+                                                "phone": "(790) 971-9709",
+                                                "extension": 4573,
+                                                "hireDate": new Date(2011, 8, 21),
+                                                "fullTime": false,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 69,
+                                "name": "Sierra Beasley",
+                                "reportsTo": 52,
+                                "phone": "(271) 953-1968",
+                                "extension": 3324,
+                                "hireDate": new Date(2011, 4, 2),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 3,
+                                "employees": [
+                                    {
+                                        "id": 38,
+                                        "name": "Elton Tucker",
+                                        "reportsTo": 69,
+                                        "phone": "(988) 930-9331",
+                                        "extension": 9216,
+                                        "hireDate": new Date(2015, 6, 4),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 1
+                                    },
+                                    {
+                                        "id": 39,
+                                        "name": "Iona Brennan",
+                                        "reportsTo": 69,
+                                        "phone": "(356) 563-0600",
+                                        "extension": 5634,
+                                        "hireDate": new Date(2010, 9, 23),
+                                        "fullTime": true,
+                                        "position": "Junior Support Officer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 53,
+                                        "name": "Paul Campos",
+                                        "reportsTo": 69,
+                                        "phone": "(899) 205-1689",
+                                        "extension": 8586,
+                                        "hireDate": new Date(2011, 3, 17),
+                                        "fullTime": true,
+                                        "position": "Interaction Designer",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 66,
+                                                "name": "Gloria Freeman",
+                                                "reportsTo": 53,
+                                                "phone": "(344) 950-9168",
+                                                "extension": 4738,
+                                                "hireDate": new Date(2013, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Junior Interaction Designer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 57,
+                                        "name": "Alyssa Hansen",
+                                        "reportsTo": 69,
+                                        "phone": "(548) 925-4799",
+                                        "extension": 4716,
+                                        "hireDate": new Date(2011, 1, 19),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 82,
+                                        "name": "Yael Walters",
+                                        "reportsTo": 69,
+                                        "phone": "(311) 489-8191",
+                                        "extension": 6520,
+                                        "hireDate": new Date(2013, 7, 4),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 87,
+                                        "name": "Dahlia Hunt",
+                                        "reportsTo": 69,
+                                        "phone": "(720) 339-5202",
+                                        "extension": 3690,
+                                        "hireDate": new Date(2011, 3, 26),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 94,
+                                        "name": "Adria Stanley",
+                                        "reportsTo": 69,
+                                        "phone": "(536) 357-6391",
+                                        "extension": 3374,
+                                        "hireDate": new Date(2014, 7, 26),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "Priscilla Frank",
+                "reportsTo": 1,
+                "phone": "(278) 927-2684",
+                "extension": 4183,
+                "hireDate": new Date(2014, 11, 30),
+                "fullTime": true,
+                "position": "Chief Product Officer",
+                "timeInPosition": 2,
+                "employees": [
+                    {
+                        "id": 4,
+                        "name": "Ursula Holmes",
+                        "reportsTo": 3,
+                        "phone": "(302) 760-2034",
+                        "extension": 2226,
+                        "hireDate": new Date(2011, 6, 6),
+                        "fullTime": true,
+                        "position": "EVP, Product Strategy",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 24,
+                        "name": "Melvin Carrillo",
+                        "reportsTo": 3,
+                        "phone": "(348) 933-5167",
+                        "extension": 2482,
+                        "hireDate": new Date(2014, 7, 21),
+                        "fullTime": true,
+                        "position": "Director, Developer Relations",
+                        "timeInPosition": 6,
+                        "employees": [
+                            {
+                                "id": 29,
+                                "name": "Martha Chavez",
+                                "reportsTo": 24,
+                                "phone": "(860) 754-3464",
+                                "extension": 4531,
+                                "hireDate": new Date(2013, 3, 12),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 30,
+                                "name": "Oren Fox",
+                                "reportsTo": 24,
+                                "phone": "(572) 414-3299",
+                                "extension": 4849,
+                                "hireDate": new Date(2013, 5, 14),
+                                "fullTime": false,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 41,
+                                "name": "Amos Barr",
+                                "reportsTo": 24,
+                                "phone": "(470) 381-3718",
+                                "extension": 7643,
+                                "hireDate": new Date(2010, 3, 9),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "Anika Vega",
+                "reportsTo": 1,
+                "phone": "(910) 714-1802",
+                "extension": 6353,
+                "hireDate": new Date(2010, 2, 25),
+                "fullTime": true,
+                "position": "Chief Process Officer",
+                "timeInPosition": 5,
+                "employees": [
+                    {
+                        "id": 10,
+                        "name": "Vernon Ballard",
+                        "reportsTo": 5,
+                        "phone": "(702) 185-8890",
+                        "extension": 9242,
+                        "hireDate": new Date(2015, 6, 26),
+                        "fullTime": true,
+                        "position": "Director Facilities",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 16,
+                                "name": "Ali Guy",
+                                "reportsTo": 10,
+                                "phone": "(429) 912-6578",
+                                "extension": 2225,
+                                "hireDate": new Date(2014, 6, 29),
+                                "fullTime": true,
+                                "position": "Operations Manager",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 23,
+                                        "name": "Bruce Reilly",
+                                        "reportsTo": 16,
+                                        "phone": "(995) 243-7302",
+                                        "extension": 4815,
+                                        "hireDate": new Date(2015, 4, 1),
+                                        "fullTime": true,
+                                        "position": "Head of Security",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 26,
+                                                "name": "Rowan Morin",
+                                                "reportsTo": 23,
+                                                "phone": "(792) 141-4374",
+                                                "extension": 1844,
+                                                "hireDate": new Date(2015, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Building Security",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 44,
+                                                "name": "Benedict Soto",
+                                                "reportsTo": 23,
+                                                "phone": "(822) 282-5991",
+                                                "extension": 6422,
+                                                "hireDate": new Date(2012, 6, 1),
+                                                "fullTime": false,
+                                                "position": "Building Security",
+                                                "timeInPosition": 4
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 48,
+                                        "name": "Maryam Rios",
+                                        "reportsTo": 16,
+                                        "phone": "(673) 764-6720",
+                                        "extension": 531,
+                                        "hireDate": new Date(2014, 3, 3),
+                                        "fullTime": true,
+                                        "position": "Team Lead, Personal Assistants",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 58,
+                                                "name": "Rose Mcintyre",
+                                                "reportsTo": 48,
+                                                "phone": "(771) 615-4590",
+                                                "extension": 7094,
+                                                "hireDate": new Date(2015, 6, 30),
+                                                "fullTime": false,
+                                                "position": "Personal Assistant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "Nevada Hart",
+                "reportsTo": 1,
+                "phone": "(254) 220-1576",
+                "extension": 6649,
+                "hireDate": new Date(2015, 8, 17),
+                "fullTime": true,
+                "position": "Chief Financial Officer",
+                "timeInPosition": 6,
+                "employees": [
+                    {
+                        "id": 14,
+                        "name": "Zena Sanford",
+                        "reportsTo": 7,
+                        "phone": "(437) 568-8160",
+                        "extension": 4452,
+                        "hireDate": new Date(2010, 11, 30),
+                        "fullTime": true,
+                        "position": "VP, Finance",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 15,
+                        "name": "Quinlan Howe",
+                        "reportsTo": 7,
+                        "phone": "(464) 334-9748",
+                        "extension": 8722,
+                        "hireDate": new Date(2011, 6, 9),
+                        "fullTime": false,
+                        "position": "Senior Director, Finance",
+                        "timeInPosition": 0,
+                        "employees": [
+                            {
+                                "id": 17,
+                                "name": "Indira Lopez",
+                                "reportsTo": 15,
+                                "phone": "(301) 368-0938",
+                                "extension": 8027,
+                                "hireDate": new Date(2013, 8, 18),
+                                "fullTime": true,
+                                "position": "ERP Team Lead",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 18,
+                                        "name": "Lareina Lara",
+                                        "reportsTo": 17,
+                                        "phone": "(233) 457-7482",
+                                        "extension": 1996,
+                                        "hireDate": new Date(2010, 4, 30),
+                                        "fullTime": true,
+                                        "position": "ERP Solutions Consultant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 19,
+                                        "name": "Maxwell Wise",
+                                        "reportsTo": 17,
+                                        "phone": "(570) 494-2531",
+                                        "extension": 9865,
+                                        "hireDate": new Date(2012, 5, 19),
+                                        "fullTime": true,
+                                        "position": "Systems Engineer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 20,
+                                "name": "Hunter Mcbride",
+                                "reportsTo": 15,
+                                "phone": "(409) 442-7016",
+                                "extension": 4284,
+                                "hireDate": new Date(2012, 10, 20),
+                                "fullTime": true,
+                                "position": "Senior Director, Tax",
+                                "timeInPosition": 3
+                            },
+                            {
+                                "id": 21,
+                                "name": "Jana Serrano",
+                                "reportsTo": 15,
+                                "phone": "(910) 718-4620",
+                                "extension": 6970,
+                                "hireDate": new Date(2010, 4, 2),
+                                "fullTime": true,
+                                "position": "Financial Planning & Analysis Manager",
+                                "timeInPosition": 2
+                            },
+                            {
+                                "id": 22,
+                                "name": "Zachery Shelton",
+                                "reportsTo": 15,
+                                "phone": "(310) 240-8675",
+                                "extension": 4527,
+                                "hireDate": new Date(2011, 11, 23),
+                                "fullTime": false,
+                                "position": "Corporate Finance Controller",
+                                "timeInPosition": 6,
+                                "employees": [
+                                    {
+                                        "id": 28,
+                                        "name": "Cullen Freeman",
+                                        "reportsTo": 22,
+                                        "phone": "(136) 554-8814",
+                                        "extension": 9861,
+                                        "hireDate": new Date(2014, 3, 15),
+                                        "fullTime": true,
+                                        "position": "Treasurer Accountant",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 31,
+                                        "name": "Quinn Dean",
+                                        "reportsTo": 22,
+                                        "phone": "(152) 613-3507",
+                                        "extension": 6621,
+                                        "hireDate": new Date(2015, 1, 29),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 34,
+                                        "name": "Samantha Brady",
+                                        "reportsTo": 22,
+                                        "phone": "(206) 398-4328",
+                                        "extension": 1157,
+                                        "hireDate": new Date(2011, 2, 13),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 35,
+                                                "name": "Tamara Green",
+                                                "reportsTo": 34,
+                                                "phone": "(219) 248-2789",
+                                                "extension": 4880,
+                                                "hireDate": new Date(2014, 2, 4),
+                                                "fullTime": true,
+                                                "position": "Junior Accountant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 36,
+                                        "name": "Olympia Coleman",
+                                        "reportsTo": 22,
+                                        "phone": "(944) 853-6383",
+                                        "extension": 2136,
+                                        "hireDate": new Date(2013, 7, 31),
+                                        "fullTime": true,
+                                        "position": "Collections Manager",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 37,
+                                        "name": "Breanna Goodwin",
+                                        "reportsTo": 22,
+                                        "phone": "(379) 988-9630",
+                                        "extension": 5898,
+                                        "hireDate": new Date(2010, 5, 23),
+                                        "fullTime": false,
+                                        "position": "Payroll Specialist",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 27,
+                                "name": "Curran Travis",
+                                "reportsTo": 15,
+                                "phone": "(438) 135-8033",
+                                "extension": 3841,
+                                "hireDate": new Date(2011, 6, 13),
+                                "fullTime": true,
+                                "position": "Finance Controller",
+                                "timeInPosition": 5
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "Hunter Fry",
+                "reportsTo": 1,
+                "phone": "(766) 358-9858",
+                "extension": 3741,
+                "hireDate": new Date(2011, 2, 12),
+                "fullTime": false,
+                "position": "General Counsel",
+                "timeInPosition": 3,
+                "employees": [
+                    {
+                        "id": 9,
+                        "name": "Kuame Carrillo",
+                        "reportsTo": 8,
+                        "phone": "(192) 383-1305",
+                        "extension": 9228,
+                        "hireDate": new Date(2011, 2, 22),
+                        "fullTime": true,
+                        "position": "Associate General Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 13,
+                        "name": "Stacy Todd",
+                        "reportsTo": 8,
+                        "phone": "(925) 286-3327",
+                        "extension": 8565,
+                        "hireDate": new Date(2014, 7, 5),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 33,
+                        "name": "Valentine Wyatt",
+                        "reportsTo": 8,
+                        "phone": "(165) 166-6205",
+                        "extension": 3588,
+                        "hireDate": new Date(2015, 5, 21),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 5
+                    },
+                    {
+                        "id": 86,
+                        "name": "Daniel Mccarthy",
+                        "reportsTo": 8,
+                        "phone": "(624) 483-6206",
+                        "extension": 9112,
+                        "hireDate": new Date(2013, 12, 3),
+                        "fullTime": false,
+                        "position": "Staff Attorney",
+                        "timeInPosition": 0
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default employees;
diff --git a/vue-options-api-demos/treelist/overview/main.js b/vue-options-api-demos/treelist/overview/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/overview/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/overview/main.vue b/vue-options-api-demos/treelist/overview/main.vue
new file mode 100644
index 00000000..01b096e9
--- /dev/null
+++ b/vue-options-api-demos/treelist/overview/main.vue
@@ -0,0 +1,108 @@
+<template>
+  <TreeList
+    :style="{
+      maxHeight: '510px',
+      overflow: 'auto',
+    }"
+    :expand-field="expandField"
+    :sub-items-field="subItemsField"
+    :data-items="processedData"
+    :columns="columns"
+    :filter="filter"
+    :filterable="true"
+    :sort="sort"
+    :sortable="true"
+    @datastatechange="handleDataStateChange"
+    @expandchange="onExpandChange"
+  />
+</template>
+
+<script>
+import employees from './data';
+import {
+  TreeList,
+  filterBy,
+  orderBy,
+  mapTree,
+  extendDataItem,
+} from '@progress/kendo-vue-treelist';
+
+export default {
+  components: {
+    TreeList,
+  },
+  data() {
+    return {
+      employees,
+      subItemsField: 'employees',
+      expandField: 'expanded',
+      expanded: [1, 2, 32],
+      filter: [],
+      sort: [
+        {
+          field: 'name',
+          dir: 'asc',
+        },
+      ],
+      columns: [
+        {
+          field: 'name',
+          title: 'Name',
+          width: '250px',
+          filter: 'text',
+          expandable: true,
+        },
+        {
+          field: 'hireDate',
+          title: 'Hire Date',
+          width: '200px',
+          format: '{0:d}',
+          filter: 'date',
+        },
+        {
+          field: 'timeInPosition',
+          title: 'Year(s) in Position',
+          width: '200px',
+          filter: 'numeric',
+        },
+        {
+          field: 'fullTime',
+          title: 'Full Time',
+          width: '100px',
+          filter: 'boolean',
+        },
+      ],
+    };
+  },
+  computed: {
+    processedData() {
+      let data = this.employees;
+      let filteredData = filterBy(data, this.filter, this.subItemsField);
+      let sortedData = orderBy(filteredData, this.sort, this.subItemsField);
+      return this.addExpandField(sortedData);
+    },
+  },
+  methods: {
+    onExpandChange(e) {
+      this.expanded = e.value
+        ? this.expanded.filter((id) => id !== e.dataItem.id)
+        : [...this.expanded, e.dataItem.id];
+    },
+    createAppState: function (dataState) {
+      this.sort = dataState.sort;
+      this.filter = dataState.filter;
+    },
+    handleDataStateChange: function (event) {
+      this.createAppState(event.data);
+    },
+    addExpandField(dataTree) {
+      const expanded = this.expanded;
+      return mapTree(dataTree, this.subItemsField, (item) =>
+        extendDataItem(item, this.subItemsField, {
+          [this.expandField]: expanded.includes(item.id),
+        })
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treelist/paging/main.js b/vue-options-api-demos/treelist/paging/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/paging/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/paging/main.vue b/vue-options-api-demos/treelist/paging/main.vue
new file mode 100644
index 00000000..bb948861
--- /dev/null
+++ b/vue-options-api-demos/treelist/paging/main.vue
@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <TreeList
+      @pagechange="onPageChange"
+      :skip="skip"
+      :take="take"
+      :pageable="true"
+      :data-items="dataItems"
+      :expand-field="expandField"
+      :sub-items-field="subItemsField"
+      @expandchange="onExpandChange"
+      :columns="columns"
+    />
+  </div>
+</template>
+
+<script>
+import { generateData } from './treelist-data';
+import {
+  TreeList,
+  mapTreeItem,
+  extendDataItem,
+} from '@progress/kendo-vue-treelist';
+
+const numberOfColumns = 4;
+const columnWidth = 200;
+const numberOfRows = 5000;
+const subItemsField = 'subItems';
+const expandField = 'expanded';
+const { columns, data } = generateData(
+  numberOfColumns,
+  columnWidth,
+  numberOfRows,
+  subItemsField
+);
+
+export default {
+  components: {
+    TreeList,
+  },
+  data() {
+    return {
+      dataItems: [...data],
+      expanded: [],
+      skip: 0,
+      take: 8,
+      columns,
+      expandField,
+      subItemsField,
+    };
+  },
+  methods: {
+    onExpandChange(event) {
+      const expanded = !event.value;
+      const tree = [...this.dataItems];
+      mapTreeItem(tree, event.level, subItemsField, (item) =>
+        extendDataItem(item, subItemsField, {
+          [expandField]: expanded,
+        })
+      );
+      (this.dataItems = tree),
+        (this.expanded = event.value
+          ? this.expanded.filter((id) => id !== event.dataItem.id)
+          : [...this.expanded, event.dataItem.id]);
+    },
+    onPageChange(event) {
+      const { skip, take } = event;
+      this.skip = skip;
+      this.take = take;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treelist/paging/treelist-data.js b/vue-options-api-demos/treelist/paging/treelist-data.js
new file mode 100644
index 00000000..c5ec456c
--- /dev/null
+++ b/vue-options-api-demos/treelist/paging/treelist-data.js
@@ -0,0 +1,26 @@
+export function generateData(numberOfColumns, columnWidth, numberOfRows, subItemsField) {
+    const columns = [];
+    for (let c = 1; c <= numberOfColumns; c++) {
+        columns.push({ field: 'Field-' + c.toString(), width: columnWidth });
+    }
+    columns[0].expandable = true;
+
+    const data = [];
+    const reducer = (acc, cur) => {
+        acc[cur[0]] = cur[0] !== 'id' ? 'Sub ' + cur[1] : cur[0];
+        return acc;
+    };
+
+    for (let r = 1; r <= numberOfRows; r++) {
+        const row = { id: r };
+        for (let c = 1; c <= numberOfColumns; c++) {
+            row['Field-' + c] = 'R' + r + ':C' + c;
+        }
+
+        const subItem = Object.entries(row).reduce(reducer, {});
+        row[subItemsField] = [subItem, { ...subItem }, { ...subItem }];
+        data.push(row);
+    }
+
+    return { columns, data };
+}
diff --git a/vue-options-api-demos/treelist/pdf/all-data-expanded/data.js b/vue-options-api-demos/treelist/pdf/all-data-expanded/data.js
new file mode 100644
index 00000000..f66aec4d
--- /dev/null
+++ b/vue-options-api-demos/treelist/pdf/all-data-expanded/data.js
@@ -0,0 +1,1150 @@
+
+const employees = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2,
+        "employees": [
+            {
+                "id": 2,
+                "name": "Guy Wooten",
+                "reportsTo": 1,
+                "phone": "(438) 738-4935",
+                "extension": 1155,
+                "hireDate": new Date(2010, 3, 3),
+                "fullTime": true,
+                "position": "Chief Technical Officer",
+                "timeInPosition": 1,
+                "employees": [
+                    {
+                        "id": 32,
+                        "name": "Buffy Weber",
+                        "reportsTo": 2,
+                        "phone": "(699) 838-6121",
+                        "extension": 8933,
+                        "hireDate": new Date(2011, 7, 11),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 11,
+                                "name": "Hyacinth Hood",
+                                "reportsTo": 32,
+                                "phone": "(889) 345-2438",
+                                "extension": 8564,
+                                "hireDate": new Date(2014, 2, 3),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 60,
+                                        "name": "Akeem Carr",
+                                        "reportsTo": 11,
+                                        "phone": "(738) 136-2814",
+                                        "extension": 9353,
+                                        "hireDate": new Date(2011, 4, 21),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 78,
+                                        "name": "Rinah Simon",
+                                        "reportsTo": 11,
+                                        "phone": "(285) 912-5271",
+                                        "extension": 7795,
+                                        "hireDate": new Date(2012, 10, 11),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 42,
+                                "name": "Gage Daniels",
+                                "reportsTo": 32,
+                                "phone": "(107) 290-6260",
+                                "extension": 896,
+                                "hireDate": new Date(2013, 5, 16),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 5
+                            },
+                            {
+                                "id": 43,
+                                "name": "Constance Vazquez",
+                                "reportsTo": 32,
+                                "phone": "(800) 301-1978",
+                                "extension": 5141,
+                                "hireDate": new Date(2011, 6, 7),
+                                "fullTime": true,
+                                "position": "Director, Engineering",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 46,
+                                        "name": "Darrel Solis",
+                                        "reportsTo": 43,
+                                        "phone": "(327) 977-0216",
+                                        "extension": 7779,
+                                        "hireDate": new Date(2015, 4, 25),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 47,
+                                                "name": "Brian Yang",
+                                                "reportsTo": 46,
+                                                "phone": "(565) 146-5435",
+                                                "extension": 3885,
+                                                "hireDate": new Date(2012, 9, 27),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 50,
+                                                "name": "Lillian Bradshaw",
+                                                "reportsTo": 46,
+                                                "phone": "(323) 509-3479",
+                                                "extension": 5426,
+                                                "hireDate": new Date(2014, 5, 10),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 51,
+                                                "name": "Christian Palmer",
+                                                "reportsTo": 46,
+                                                "phone": "(490) 421-8718",
+                                                "extension": 3706,
+                                                "hireDate": new Date(2012, 12, 27),
+                                                "fullTime": false,
+                                                "position": "Technical Lead",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 55,
+                                                "name": "Summer Mosley",
+                                                "reportsTo": 46,
+                                                "phone": "(784) 962-2301",
+                                                "extension": 5492,
+                                                "hireDate": new Date(2010, 3, 2),
+                                                "fullTime": true,
+                                                "position": "QA Engineer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 56,
+                                                "name": "Barry Ayers",
+                                                "reportsTo": 46,
+                                                "phone": "(452) 373-9227",
+                                                "extension": 1308,
+                                                "hireDate": new Date(2011, 10, 11),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 59,
+                                                "name": "Keiko Espinoza",
+                                                "reportsTo": 46,
+                                                "phone": "(226) 600-5305",
+                                                "extension": 9363,
+                                                "hireDate": new Date(2011, 9, 18),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 61,
+                                                "name": "Candace Pickett",
+                                                "reportsTo": 46,
+                                                "phone": "(120) 117-7475",
+                                                "extension": 5178,
+                                                "hireDate": new Date(2010, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 63,
+                                        "name": "Mia Caldwell",
+                                        "reportsTo": 43,
+                                        "phone": "(848) 636-6470",
+                                        "extension": 6368,
+                                        "hireDate": new Date(2012, 10, 7),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 65,
+                                                "name": "Thomas Terry",
+                                                "reportsTo": 63,
+                                                "phone": "(764) 831-4248",
+                                                "extension": 3574,
+                                                "hireDate": new Date(2015, 6, 15),
+                                                "fullTime": false,
+                                                "position": "Senior Enterprise Support Officer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 67,
+                                                "name": "Ruth Downs",
+                                                "reportsTo": 63,
+                                                "phone": "(138) 991-1440",
+                                                "extension": 8067,
+                                                "hireDate": new Date(2013, 7, 13),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 70,
+                                                "name": "Yasir Wilder",
+                                                "reportsTo": 63,
+                                                "phone": "(759) 701-8665",
+                                                "extension": 8350,
+                                                "hireDate": new Date(2010, 11, 8),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 71,
+                                                "name": "Flavia Short",
+                                                "reportsTo": 63,
+                                                "phone": "(370) 133-9238",
+                                                "extension": 6390,
+                                                "hireDate": new Date(2013, 2, 21),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 74,
+                                                "name": "Aaron Roach",
+                                                "reportsTo": 63,
+                                                "phone": "(958) 717-9230",
+                                                "extension": 4899,
+                                                "hireDate": new Date(2011, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 75,
+                                                "name": "Eric Russell",
+                                                "reportsTo": 63,
+                                                "phone": "(516) 575-8505",
+                                                "extension": 2224,
+                                                "hireDate": new Date(2012, 10, 28),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 76,
+                                                "name": "Cheyenne Olson",
+                                                "reportsTo": 63,
+                                                "phone": "(241) 645-0257",
+                                                "extension": 9181,
+                                                "hireDate": new Date(2015, 5, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 77,
+                                                "name": "Shaine Avila",
+                                                "reportsTo": 63,
+                                                "phone": "(844) 435-1360",
+                                                "extension": 3374,
+                                                "hireDate": new Date(2010, 1, 31),
+                                                "fullTime": true,
+                                                "position": "UI Designer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 81,
+                                                "name": "Chantale Long",
+                                                "reportsTo": 63,
+                                                "phone": "(252) 419-6891",
+                                                "extension": 7868,
+                                                "hireDate": new Date(2010, 6, 17),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 83,
+                                                "name": "Dane Cruz",
+                                                "reportsTo": 63,
+                                                "phone": "(946) 701-6165",
+                                                "extension": 3828,
+                                                "hireDate": new Date(2014, 10, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 84,
+                                                "name": "Regan Patterson",
+                                                "reportsTo": 63,
+                                                "phone": "(265) 946-1765",
+                                                "extension": 6955,
+                                                "hireDate": new Date(2012, 3, 1),
+                                                "fullTime": true,
+                                                "position": "Technical Writer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 85,
+                                                "name": "Drew Mckay",
+                                                "reportsTo": 63,
+                                                "phone": "(327) 293-0162",
+                                                "extension": 6904,
+                                                "hireDate": new Date(2011, 3, 25),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 88,
+                                                "name": "Bevis Miller",
+                                                "reportsTo": 63,
+                                                "phone": "(525) 557-0169",
+                                                "extension": 6978,
+                                                "hireDate": new Date(2011, 4, 19),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 89,
+                                                "name": "Bruce Mccarty",
+                                                "reportsTo": 63,
+                                                "phone": "(936) 777-8730",
+                                                "extension": 6552,
+                                                "hireDate": new Date(2014, 3, 28),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 5
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 90,
+                                        "name": "Ocean Blair",
+                                        "reportsTo": 43,
+                                        "phone": "(343) 586-6614",
+                                        "extension": 1424,
+                                        "hireDate": new Date(2011, 4, 27),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 91,
+                                                "name": "Guinevere Osborn",
+                                                "reportsTo": 90,
+                                                "phone": "(424) 741-0006",
+                                                "extension": 3166,
+                                                "hireDate": new Date(2014, 11, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 92,
+                                                "name": "Olga Strong",
+                                                "reportsTo": 90,
+                                                "phone": "(949) 417-1168",
+                                                "extension": 4568,
+                                                "hireDate": new Date(2015, 5, 28),
+                                                "fullTime": true,
+                                                "position": "Graphic Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 93,
+                                                "name": "Robert Orr",
+                                                "reportsTo": 90,
+                                                "phone": "(977) 341-3721",
+                                                "extension": 9241,
+                                                "hireDate": new Date(2012, 8, 20),
+                                                "fullTime": false,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 95,
+                                                "name": "Odette Sears",
+                                                "reportsTo": 90,
+                                                "phone": "(264) 818-6576",
+                                                "extension": 1914,
+                                                "hireDate": new Date(2013, 7, 5),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 45,
+                                "name": "Zelda Medina",
+                                "reportsTo": 32,
+                                "phone": "(563) 359-6023",
+                                "extension": 2600,
+                                "hireDate": new Date(2012, 11, 6),
+                                "fullTime": true,
+                                "position": "QA Architect",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    },
+                    {
+                        "id": 52,
+                        "name": "Skyler Cleveland",
+                        "reportsTo": 2,
+                        "phone": "(217) 280-5300",
+                        "extension": 9655,
+                        "hireDate": new Date(2014, 11, 10),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 40,
+                                "name": "Karleigh Garza",
+                                "reportsTo": 52,
+                                "phone": "(370) 983-8796",
+                                "extension": 4044,
+                                "hireDate": new Date(2014, 3, 10),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 49,
+                                        "name": "Elmo Tyson",
+                                        "reportsTo": 40,
+                                        "phone": "(344) 496-9555",
+                                        "extension": 6950,
+                                        "hireDate": new Date(2014, 9, 18),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 72,
+                                        "name": "Stacey Lynn",
+                                        "reportsTo": 40,
+                                        "phone": "(140) 772-7509",
+                                        "extension": 8396,
+                                        "hireDate": new Date(2014, 7, 31),
+                                        "fullTime": false,
+                                        "position": "QA Engineer",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 80,
+                                                "name": "Meredith Parrish",
+                                                "reportsTo": 72,
+                                                "phone": "(714) 284-2408",
+                                                "extension": 7675,
+                                                "hireDate": new Date(2012, 11, 13),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 96,
+                                        "name": "Cassady Whitley",
+                                        "reportsTo": 40,
+                                        "phone": "(996) 587-8405",
+                                        "extension": 780,
+                                        "hireDate": new Date(2013, 5, 7),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 5
+                                    },
+                                    {
+                                        "id": 97,
+                                        "name": "Haviva Campbell",
+                                        "reportsTo": 40,
+                                        "phone": "(263) 887-4689",
+                                        "extension": 2808,
+                                        "hireDate": new Date(2013, 3, 5),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 98,
+                                        "name": "Cameron Ayers",
+                                        "reportsTo": 40,
+                                        "phone": "(470) 709-8030",
+                                        "extension": 2893,
+                                        "hireDate": new Date(2013, 8, 28),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 99,
+                                        "name": "Martha Sargent",
+                                        "reportsTo": 40,
+                                        "phone": "(587) 812-4418",
+                                        "extension": 5099,
+                                        "hireDate": new Date(2014, 2, 27),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 100,
+                                        "name": "Darrel Kinney",
+                                        "reportsTo": 40,
+                                        "phone": "(888) 483-9606",
+                                        "extension": 4779,
+                                        "hireDate": new Date(2014, 3, 24),
+                                        "fullTime": false,
+                                        "position": "Graphic Designer",
+                                        "timeInPosition": 1
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 54,
+                                "name": "Kuame Frye",
+                                "reportsTo": 52,
+                                "phone": "(360) 721-5886",
+                                "extension": 2730,
+                                "hireDate": new Date(2010, 11, 17),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 64,
+                                        "name": "Ori Wynn",
+                                        "reportsTo": 54,
+                                        "phone": "(366) 342-0166",
+                                        "extension": 7252,
+                                        "hireDate": new Date(2015, 6, 21),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 0,
+                                        "employees": [
+                                            {
+                                                "id": 6,
+                                                "name": "Moses Duncan",
+                                                "reportsTo": 64,
+                                                "phone": "(421) 611-4814",
+                                                "extension": 669,
+                                                "hireDate": new Date(2010, 5, 24),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 12,
+                                                "name": "Jamalia Wallace",
+                                                "reportsTo": 64,
+                                                "phone": "(611) 391-8016",
+                                                "extension": 1952,
+                                                "hireDate": new Date(2011, 9, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Designer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 62,
+                                                "name": "Palmer Gregory",
+                                                "reportsTo": 64,
+                                                "phone": "(360) 430-2505",
+                                                "extension": 4337,
+                                                "hireDate": new Date(2014, 8, 30),
+                                                "fullTime": true,
+                                                "position": "Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 68,
+                                                "name": "Mallory Gilliam",
+                                                "reportsTo": 64,
+                                                "phone": "(878) 423-2971",
+                                                "extension": 1341,
+                                                "hireDate": new Date(2014, 7, 24),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 73,
+                                                "name": "Ima Hughes",
+                                                "reportsTo": 64,
+                                                "phone": "(905) 485-8001",
+                                                "extension": 1273,
+                                                "hireDate": new Date(2013, 6, 3),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 79,
+                                                "name": "Duncan Mathews",
+                                                "reportsTo": 64,
+                                                "phone": "(790) 971-9709",
+                                                "extension": 4573,
+                                                "hireDate": new Date(2011, 8, 21),
+                                                "fullTime": false,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 69,
+                                "name": "Sierra Beasley",
+                                "reportsTo": 52,
+                                "phone": "(271) 953-1968",
+                                "extension": 3324,
+                                "hireDate": new Date(2011, 4, 2),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 3,
+                                "employees": [
+                                    {
+                                        "id": 38,
+                                        "name": "Elton Tucker",
+                                        "reportsTo": 69,
+                                        "phone": "(988) 930-9331",
+                                        "extension": 9216,
+                                        "hireDate": new Date(2015, 6, 4),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 1
+                                    },
+                                    {
+                                        "id": 39,
+                                        "name": "Iona Brennan",
+                                        "reportsTo": 69,
+                                        "phone": "(356) 563-0600",
+                                        "extension": 5634,
+                                        "hireDate": new Date(2010, 9, 23),
+                                        "fullTime": true,
+                                        "position": "Junior Support Officer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 53,
+                                        "name": "Paul Campos",
+                                        "reportsTo": 69,
+                                        "phone": "(899) 205-1689",
+                                        "extension": 8586,
+                                        "hireDate": new Date(2011, 3, 17),
+                                        "fullTime": true,
+                                        "position": "Interaction Designer",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 66,
+                                                "name": "Gloria Freeman",
+                                                "reportsTo": 53,
+                                                "phone": "(344) 950-9168",
+                                                "extension": 4738,
+                                                "hireDate": new Date(2013, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Junior Interaction Designer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 57,
+                                        "name": "Alyssa Hansen",
+                                        "reportsTo": 69,
+                                        "phone": "(548) 925-4799",
+                                        "extension": 4716,
+                                        "hireDate": new Date(2011, 1, 19),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 82,
+                                        "name": "Yael Walters",
+                                        "reportsTo": 69,
+                                        "phone": "(311) 489-8191",
+                                        "extension": 6520,
+                                        "hireDate": new Date(2013, 7, 4),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 87,
+                                        "name": "Dahlia Hunt",
+                                        "reportsTo": 69,
+                                        "phone": "(720) 339-5202",
+                                        "extension": 3690,
+                                        "hireDate": new Date(2011, 3, 26),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 94,
+                                        "name": "Adria Stanley",
+                                        "reportsTo": 69,
+                                        "phone": "(536) 357-6391",
+                                        "extension": 3374,
+                                        "hireDate": new Date(2014, 7, 26),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "Priscilla Frank",
+                "reportsTo": 1,
+                "phone": "(278) 927-2684",
+                "extension": 4183,
+                "hireDate": new Date(2014, 11, 30),
+                "fullTime": true,
+                "position": "Chief Product Officer",
+                "timeInPosition": 2,
+                "employees": [
+                    {
+                        "id": 4,
+                        "name": "Ursula Holmes",
+                        "reportsTo": 3,
+                        "phone": "(302) 760-2034",
+                        "extension": 2226,
+                        "hireDate": new Date(2011, 6, 6),
+                        "fullTime": true,
+                        "position": "EVP, Product Strategy",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 24,
+                        "name": "Melvin Carrillo",
+                        "reportsTo": 3,
+                        "phone": "(348) 933-5167",
+                        "extension": 2482,
+                        "hireDate": new Date(2014, 7, 21),
+                        "fullTime": true,
+                        "position": "Director, Developer Relations",
+                        "timeInPosition": 6,
+                        "employees": [
+                            {
+                                "id": 29,
+                                "name": "Martha Chavez",
+                                "reportsTo": 24,
+                                "phone": "(860) 754-3464",
+                                "extension": 4531,
+                                "hireDate": new Date(2013, 3, 12),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 30,
+                                "name": "Oren Fox",
+                                "reportsTo": 24,
+                                "phone": "(572) 414-3299",
+                                "extension": 4849,
+                                "hireDate": new Date(2013, 5, 14),
+                                "fullTime": false,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 41,
+                                "name": "Amos Barr",
+                                "reportsTo": 24,
+                                "phone": "(470) 381-3718",
+                                "extension": 7643,
+                                "hireDate": new Date(2010, 3, 9),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "Anika Vega",
+                "reportsTo": 1,
+                "phone": "(910) 714-1802",
+                "extension": 6353,
+                "hireDate": new Date(2010, 2, 25),
+                "fullTime": true,
+                "position": "Chief Process Officer",
+                "timeInPosition": 5,
+                "employees": [
+                    {
+                        "id": 10,
+                        "name": "Vernon Ballard",
+                        "reportsTo": 5,
+                        "phone": "(702) 185-8890",
+                        "extension": 9242,
+                        "hireDate": new Date(2015, 6, 26),
+                        "fullTime": true,
+                        "position": "Director Facilities",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 16,
+                                "name": "Ali Guy",
+                                "reportsTo": 10,
+                                "phone": "(429) 912-6578",
+                                "extension": 2225,
+                                "hireDate": new Date(2014, 6, 29),
+                                "fullTime": true,
+                                "position": "Operations Manager",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 23,
+                                        "name": "Bruce Reilly",
+                                        "reportsTo": 16,
+                                        "phone": "(995) 243-7302",
+                                        "extension": 4815,
+                                        "hireDate": new Date(2015, 4, 1),
+                                        "fullTime": true,
+                                        "position": "Head of Security",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 26,
+                                                "name": "Rowan Morin",
+                                                "reportsTo": 23,
+                                                "phone": "(792) 141-4374",
+                                                "extension": 1844,
+                                                "hireDate": new Date(2015, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Building Security",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 44,
+                                                "name": "Benedict Soto",
+                                                "reportsTo": 23,
+                                                "phone": "(822) 282-5991",
+                                                "extension": 6422,
+                                                "hireDate": new Date(2012, 6, 1),
+                                                "fullTime": false,
+                                                "position": "Building Security",
+                                                "timeInPosition": 4
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 48,
+                                        "name": "Maryam Rios",
+                                        "reportsTo": 16,
+                                        "phone": "(673) 764-6720",
+                                        "extension": 531,
+                                        "hireDate": new Date(2014, 3, 3),
+                                        "fullTime": true,
+                                        "position": "Team Lead, Personal Assistants",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 58,
+                                                "name": "Rose Mcintyre",
+                                                "reportsTo": 48,
+                                                "phone": "(771) 615-4590",
+                                                "extension": 7094,
+                                                "hireDate": new Date(2015, 6, 30),
+                                                "fullTime": false,
+                                                "position": "Personal Assistant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "Nevada Hart",
+                "reportsTo": 1,
+                "phone": "(254) 220-1576",
+                "extension": 6649,
+                "hireDate": new Date(2015, 8, 17),
+                "fullTime": true,
+                "position": "Chief Financial Officer",
+                "timeInPosition": 6,
+                "employees": [
+                    {
+                        "id": 14,
+                        "name": "Zena Sanford",
+                        "reportsTo": 7,
+                        "phone": "(437) 568-8160",
+                        "extension": 4452,
+                        "hireDate": new Date(2010, 11, 30),
+                        "fullTime": true,
+                        "position": "VP, Finance",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 15,
+                        "name": "Quinlan Howe",
+                        "reportsTo": 7,
+                        "phone": "(464) 334-9748",
+                        "extension": 8722,
+                        "hireDate": new Date(2011, 6, 9),
+                        "fullTime": false,
+                        "position": "Senior Director, Finance",
+                        "timeInPosition": 0,
+                        "employees": [
+                            {
+                                "id": 17,
+                                "name": "Indira Lopez",
+                                "reportsTo": 15,
+                                "phone": "(301) 368-0938",
+                                "extension": 8027,
+                                "hireDate": new Date(2013, 8, 18),
+                                "fullTime": true,
+                                "position": "ERP Team Lead",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 18,
+                                        "name": "Lareina Lara",
+                                        "reportsTo": 17,
+                                        "phone": "(233) 457-7482",
+                                        "extension": 1996,
+                                        "hireDate": new Date(2010, 4, 30),
+                                        "fullTime": true,
+                                        "position": "ERP Solutions Consultant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 19,
+                                        "name": "Maxwell Wise",
+                                        "reportsTo": 17,
+                                        "phone": "(570) 494-2531",
+                                        "extension": 9865,
+                                        "hireDate": new Date(2012, 5, 19),
+                                        "fullTime": true,
+                                        "position": "Systems Engineer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 20,
+                                "name": "Hunter Mcbride",
+                                "reportsTo": 15,
+                                "phone": "(409) 442-7016",
+                                "extension": 4284,
+                                "hireDate": new Date(2012, 10, 20),
+                                "fullTime": true,
+                                "position": "Senior Director, Tax",
+                                "timeInPosition": 3
+                            },
+                            {
+                                "id": 21,
+                                "name": "Jana Serrano",
+                                "reportsTo": 15,
+                                "phone": "(910) 718-4620",
+                                "extension": 6970,
+                                "hireDate": new Date(2010, 4, 2),
+                                "fullTime": true,
+                                "position": "Financial Planning & Analysis Manager",
+                                "timeInPosition": 2
+                            },
+                            {
+                                "id": 22,
+                                "name": "Zachery Shelton",
+                                "reportsTo": 15,
+                                "phone": "(310) 240-8675",
+                                "extension": 4527,
+                                "hireDate": new Date(2011, 11, 23),
+                                "fullTime": false,
+                                "position": "Corporate Finance Controller",
+                                "timeInPosition": 6,
+                                "employees": [
+                                    {
+                                        "id": 28,
+                                        "name": "Cullen Freeman",
+                                        "reportsTo": 22,
+                                        "phone": "(136) 554-8814",
+                                        "extension": 9861,
+                                        "hireDate": new Date(2014, 3, 15),
+                                        "fullTime": true,
+                                        "position": "Treasurer Accountant",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 31,
+                                        "name": "Quinn Dean",
+                                        "reportsTo": 22,
+                                        "phone": "(152) 613-3507",
+                                        "extension": 6621,
+                                        "hireDate": new Date(2015, 1, 29),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 34,
+                                        "name": "Samantha Brady",
+                                        "reportsTo": 22,
+                                        "phone": "(206) 398-4328",
+                                        "extension": 1157,
+                                        "hireDate": new Date(2011, 2, 13),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 35,
+                                                "name": "Tamara Green",
+                                                "reportsTo": 34,
+                                                "phone": "(219) 248-2789",
+                                                "extension": 4880,
+                                                "hireDate": new Date(2014, 2, 4),
+                                                "fullTime": true,
+                                                "position": "Junior Accountant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 36,
+                                        "name": "Olympia Coleman",
+                                        "reportsTo": 22,
+                                        "phone": "(944) 853-6383",
+                                        "extension": 2136,
+                                        "hireDate": new Date(2013, 7, 31),
+                                        "fullTime": true,
+                                        "position": "Collections Manager",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 37,
+                                        "name": "Breanna Goodwin",
+                                        "reportsTo": 22,
+                                        "phone": "(379) 988-9630",
+                                        "extension": 5898,
+                                        "hireDate": new Date(2010, 5, 23),
+                                        "fullTime": false,
+                                        "position": "Payroll Specialist",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 27,
+                                "name": "Curran Travis",
+                                "reportsTo": 15,
+                                "phone": "(438) 135-8033",
+                                "extension": 3841,
+                                "hireDate": new Date(2011, 6, 13),
+                                "fullTime": true,
+                                "position": "Finance Controller",
+                                "timeInPosition": 5
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "Hunter Fry",
+                "reportsTo": 1,
+                "phone": "(766) 358-9858",
+                "extension": 3741,
+                "hireDate": new Date(2011, 2, 12),
+                "fullTime": false,
+                "position": "General Counsel",
+                "timeInPosition": 3,
+                "employees": [
+                    {
+                        "id": 9,
+                        "name": "Kuame Carrillo",
+                        "reportsTo": 8,
+                        "phone": "(192) 383-1305",
+                        "extension": 9228,
+                        "hireDate": new Date(2011, 2, 22),
+                        "fullTime": true,
+                        "position": "Associate General Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 13,
+                        "name": "Stacy Todd",
+                        "reportsTo": 8,
+                        "phone": "(925) 286-3327",
+                        "extension": 8565,
+                        "hireDate": new Date(2014, 7, 5),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 33,
+                        "name": "Valentine Wyatt",
+                        "reportsTo": 8,
+                        "phone": "(165) 166-6205",
+                        "extension": 3588,
+                        "hireDate": new Date(2015, 5, 21),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 5
+                    },
+                    {
+                        "id": 86,
+                        "name": "Daniel Mccarthy",
+                        "reportsTo": 8,
+                        "phone": "(624) 483-6206",
+                        "extension": 9112,
+                        "hireDate": new Date(2013, 12, 3),
+                        "fullTime": false,
+                        "position": "Staff Attorney",
+                        "timeInPosition": 0
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default employees;
diff --git a/vue-options-api-demos/treelist/pdf/all-data-expanded/main.js b/vue-options-api-demos/treelist/pdf/all-data-expanded/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/pdf/all-data-expanded/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/pdf/all-data-expanded/main.vue b/vue-options-api-demos/treelist/pdf/all-data-expanded/main.vue
new file mode 100644
index 00000000..62196fd1
--- /dev/null
+++ b/vue-options-api-demos/treelist/pdf/all-data-expanded/main.vue
@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <pdfexport ref="treeListPdfExport">
+      <TreeList
+        :style="{
+          maxHeight: '510px',
+          overflow: 'auto',
+        }"
+        :expand-field="expandField"
+        :sub-items-field="subItemsField"
+        @expandchange="onExpandChange"
+        :filter="filter"
+        :filterable="filterable"
+        :data-items="processedData"
+        @filterchange="handleFilterChange"
+        :columns="columns"
+        :toolbar="'toolbar'"
+      >
+        <template v-slot:toolbar>
+          <div>
+            <KButton @click="exportPDFWithComp"
+              >Export All TreeList Data To PDF</KButton
+            >
+          </div>
+        </template>
+      </TreeList>
+    </pdfexport>
+  </div>
+</template>
+
+<script>
+import { TreeListPDFExport } from '@progress/kendo-vue-pdf';
+import { Button } from '@progress/kendo-vue-buttons';
+import employees from './data';
+import {
+  TreeList,
+  filterBy,
+  extendDataItem,
+  mapTree,
+} from '@progress/kendo-vue-treelist';
+
+export default {
+  components: {
+    TreeList,
+    pdfexport: TreeListPDFExport,
+    KButton: Button,
+  },
+  data() {
+    return {
+      dataItems: [...employees],
+      filter: [],
+      filterable: true,
+      expanded: [1, 2, 32],
+      subItemsField: 'employees',
+      expandField: 'expanded',
+      columns: [
+        {
+          field: 'name',
+          title: 'Name',
+          width: '320px',
+          expandable: true,
+        },
+        {
+          field: 'hireDate',
+          title: 'Hire Date',
+          width: '280px',
+          format: '{0:d}',
+          filter: 'date',
+        },
+        {
+          field: 'timeInPosition',
+          title: 'Year(s) in Position',
+          width: '280px',
+          filter: 'numeric',
+        },
+        {
+          field: 'fullTime',
+          title: 'Full Time',
+          width: '190px',
+          filter: 'boolean',
+        },
+      ],
+    };
+  },
+  computed: {
+    processedData() {
+      let data = this.dataItems;
+
+      let filteredData = filterBy(data, this.filter, this.subItemsField);
+      return this.addExpandField(filteredData);
+    },
+  },
+  methods: {
+    exportPDFWithComp: function () {
+      this.filterable = false;
+
+      let allDataExpanded = mapTree(
+        this.dataItems,
+        this.subItemsField,
+        (item) =>
+          extendDataItem(item, this.subItemsField, {
+            [this.expandField]: true,
+          })
+      );
+      this.$refs.treeListPdfExport.save(allDataExpanded);
+    },
+    exportFinished() {
+      this.filterable = true;
+    },
+    onExpandChange(e) {
+      this.expanded = e.value
+        ? this.expanded.filter((id) => id !== e.dataItem.id)
+        : [...this.expanded, e.dataItem.id];
+    },
+    handleFilterChange(event) {
+      this.filter = event.filter;
+    },
+    addExpandField(dataTree) {
+      const expanded = this.expanded;
+      return mapTree(dataTree, this.subItemsField, (item) =>
+        extendDataItem(item, this.subItemsField, {
+          [this.expandField]: expanded.includes(item.id),
+        })
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treelist/pdf/basic/data.js b/vue-options-api-demos/treelist/pdf/basic/data.js
new file mode 100644
index 00000000..f66aec4d
--- /dev/null
+++ b/vue-options-api-demos/treelist/pdf/basic/data.js
@@ -0,0 +1,1150 @@
+
+const employees = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2,
+        "employees": [
+            {
+                "id": 2,
+                "name": "Guy Wooten",
+                "reportsTo": 1,
+                "phone": "(438) 738-4935",
+                "extension": 1155,
+                "hireDate": new Date(2010, 3, 3),
+                "fullTime": true,
+                "position": "Chief Technical Officer",
+                "timeInPosition": 1,
+                "employees": [
+                    {
+                        "id": 32,
+                        "name": "Buffy Weber",
+                        "reportsTo": 2,
+                        "phone": "(699) 838-6121",
+                        "extension": 8933,
+                        "hireDate": new Date(2011, 7, 11),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 11,
+                                "name": "Hyacinth Hood",
+                                "reportsTo": 32,
+                                "phone": "(889) 345-2438",
+                                "extension": 8564,
+                                "hireDate": new Date(2014, 2, 3),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 60,
+                                        "name": "Akeem Carr",
+                                        "reportsTo": 11,
+                                        "phone": "(738) 136-2814",
+                                        "extension": 9353,
+                                        "hireDate": new Date(2011, 4, 21),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 78,
+                                        "name": "Rinah Simon",
+                                        "reportsTo": 11,
+                                        "phone": "(285) 912-5271",
+                                        "extension": 7795,
+                                        "hireDate": new Date(2012, 10, 11),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 42,
+                                "name": "Gage Daniels",
+                                "reportsTo": 32,
+                                "phone": "(107) 290-6260",
+                                "extension": 896,
+                                "hireDate": new Date(2013, 5, 16),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 5
+                            },
+                            {
+                                "id": 43,
+                                "name": "Constance Vazquez",
+                                "reportsTo": 32,
+                                "phone": "(800) 301-1978",
+                                "extension": 5141,
+                                "hireDate": new Date(2011, 6, 7),
+                                "fullTime": true,
+                                "position": "Director, Engineering",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 46,
+                                        "name": "Darrel Solis",
+                                        "reportsTo": 43,
+                                        "phone": "(327) 977-0216",
+                                        "extension": 7779,
+                                        "hireDate": new Date(2015, 4, 25),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 47,
+                                                "name": "Brian Yang",
+                                                "reportsTo": 46,
+                                                "phone": "(565) 146-5435",
+                                                "extension": 3885,
+                                                "hireDate": new Date(2012, 9, 27),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 50,
+                                                "name": "Lillian Bradshaw",
+                                                "reportsTo": 46,
+                                                "phone": "(323) 509-3479",
+                                                "extension": 5426,
+                                                "hireDate": new Date(2014, 5, 10),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 51,
+                                                "name": "Christian Palmer",
+                                                "reportsTo": 46,
+                                                "phone": "(490) 421-8718",
+                                                "extension": 3706,
+                                                "hireDate": new Date(2012, 12, 27),
+                                                "fullTime": false,
+                                                "position": "Technical Lead",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 55,
+                                                "name": "Summer Mosley",
+                                                "reportsTo": 46,
+                                                "phone": "(784) 962-2301",
+                                                "extension": 5492,
+                                                "hireDate": new Date(2010, 3, 2),
+                                                "fullTime": true,
+                                                "position": "QA Engineer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 56,
+                                                "name": "Barry Ayers",
+                                                "reportsTo": 46,
+                                                "phone": "(452) 373-9227",
+                                                "extension": 1308,
+                                                "hireDate": new Date(2011, 10, 11),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 59,
+                                                "name": "Keiko Espinoza",
+                                                "reportsTo": 46,
+                                                "phone": "(226) 600-5305",
+                                                "extension": 9363,
+                                                "hireDate": new Date(2011, 9, 18),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 61,
+                                                "name": "Candace Pickett",
+                                                "reportsTo": 46,
+                                                "phone": "(120) 117-7475",
+                                                "extension": 5178,
+                                                "hireDate": new Date(2010, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 63,
+                                        "name": "Mia Caldwell",
+                                        "reportsTo": 43,
+                                        "phone": "(848) 636-6470",
+                                        "extension": 6368,
+                                        "hireDate": new Date(2012, 10, 7),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 65,
+                                                "name": "Thomas Terry",
+                                                "reportsTo": 63,
+                                                "phone": "(764) 831-4248",
+                                                "extension": 3574,
+                                                "hireDate": new Date(2015, 6, 15),
+                                                "fullTime": false,
+                                                "position": "Senior Enterprise Support Officer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 67,
+                                                "name": "Ruth Downs",
+                                                "reportsTo": 63,
+                                                "phone": "(138) 991-1440",
+                                                "extension": 8067,
+                                                "hireDate": new Date(2013, 7, 13),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 70,
+                                                "name": "Yasir Wilder",
+                                                "reportsTo": 63,
+                                                "phone": "(759) 701-8665",
+                                                "extension": 8350,
+                                                "hireDate": new Date(2010, 11, 8),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 71,
+                                                "name": "Flavia Short",
+                                                "reportsTo": 63,
+                                                "phone": "(370) 133-9238",
+                                                "extension": 6390,
+                                                "hireDate": new Date(2013, 2, 21),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 74,
+                                                "name": "Aaron Roach",
+                                                "reportsTo": 63,
+                                                "phone": "(958) 717-9230",
+                                                "extension": 4899,
+                                                "hireDate": new Date(2011, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 75,
+                                                "name": "Eric Russell",
+                                                "reportsTo": 63,
+                                                "phone": "(516) 575-8505",
+                                                "extension": 2224,
+                                                "hireDate": new Date(2012, 10, 28),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 76,
+                                                "name": "Cheyenne Olson",
+                                                "reportsTo": 63,
+                                                "phone": "(241) 645-0257",
+                                                "extension": 9181,
+                                                "hireDate": new Date(2015, 5, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 77,
+                                                "name": "Shaine Avila",
+                                                "reportsTo": 63,
+                                                "phone": "(844) 435-1360",
+                                                "extension": 3374,
+                                                "hireDate": new Date(2010, 1, 31),
+                                                "fullTime": true,
+                                                "position": "UI Designer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 81,
+                                                "name": "Chantale Long",
+                                                "reportsTo": 63,
+                                                "phone": "(252) 419-6891",
+                                                "extension": 7868,
+                                                "hireDate": new Date(2010, 6, 17),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 83,
+                                                "name": "Dane Cruz",
+                                                "reportsTo": 63,
+                                                "phone": "(946) 701-6165",
+                                                "extension": 3828,
+                                                "hireDate": new Date(2014, 10, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 84,
+                                                "name": "Regan Patterson",
+                                                "reportsTo": 63,
+                                                "phone": "(265) 946-1765",
+                                                "extension": 6955,
+                                                "hireDate": new Date(2012, 3, 1),
+                                                "fullTime": true,
+                                                "position": "Technical Writer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 85,
+                                                "name": "Drew Mckay",
+                                                "reportsTo": 63,
+                                                "phone": "(327) 293-0162",
+                                                "extension": 6904,
+                                                "hireDate": new Date(2011, 3, 25),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 88,
+                                                "name": "Bevis Miller",
+                                                "reportsTo": 63,
+                                                "phone": "(525) 557-0169",
+                                                "extension": 6978,
+                                                "hireDate": new Date(2011, 4, 19),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 89,
+                                                "name": "Bruce Mccarty",
+                                                "reportsTo": 63,
+                                                "phone": "(936) 777-8730",
+                                                "extension": 6552,
+                                                "hireDate": new Date(2014, 3, 28),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 5
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 90,
+                                        "name": "Ocean Blair",
+                                        "reportsTo": 43,
+                                        "phone": "(343) 586-6614",
+                                        "extension": 1424,
+                                        "hireDate": new Date(2011, 4, 27),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 91,
+                                                "name": "Guinevere Osborn",
+                                                "reportsTo": 90,
+                                                "phone": "(424) 741-0006",
+                                                "extension": 3166,
+                                                "hireDate": new Date(2014, 11, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 92,
+                                                "name": "Olga Strong",
+                                                "reportsTo": 90,
+                                                "phone": "(949) 417-1168",
+                                                "extension": 4568,
+                                                "hireDate": new Date(2015, 5, 28),
+                                                "fullTime": true,
+                                                "position": "Graphic Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 93,
+                                                "name": "Robert Orr",
+                                                "reportsTo": 90,
+                                                "phone": "(977) 341-3721",
+                                                "extension": 9241,
+                                                "hireDate": new Date(2012, 8, 20),
+                                                "fullTime": false,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 95,
+                                                "name": "Odette Sears",
+                                                "reportsTo": 90,
+                                                "phone": "(264) 818-6576",
+                                                "extension": 1914,
+                                                "hireDate": new Date(2013, 7, 5),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 45,
+                                "name": "Zelda Medina",
+                                "reportsTo": 32,
+                                "phone": "(563) 359-6023",
+                                "extension": 2600,
+                                "hireDate": new Date(2012, 11, 6),
+                                "fullTime": true,
+                                "position": "QA Architect",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    },
+                    {
+                        "id": 52,
+                        "name": "Skyler Cleveland",
+                        "reportsTo": 2,
+                        "phone": "(217) 280-5300",
+                        "extension": 9655,
+                        "hireDate": new Date(2014, 11, 10),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 40,
+                                "name": "Karleigh Garza",
+                                "reportsTo": 52,
+                                "phone": "(370) 983-8796",
+                                "extension": 4044,
+                                "hireDate": new Date(2014, 3, 10),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 49,
+                                        "name": "Elmo Tyson",
+                                        "reportsTo": 40,
+                                        "phone": "(344) 496-9555",
+                                        "extension": 6950,
+                                        "hireDate": new Date(2014, 9, 18),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 72,
+                                        "name": "Stacey Lynn",
+                                        "reportsTo": 40,
+                                        "phone": "(140) 772-7509",
+                                        "extension": 8396,
+                                        "hireDate": new Date(2014, 7, 31),
+                                        "fullTime": false,
+                                        "position": "QA Engineer",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 80,
+                                                "name": "Meredith Parrish",
+                                                "reportsTo": 72,
+                                                "phone": "(714) 284-2408",
+                                                "extension": 7675,
+                                                "hireDate": new Date(2012, 11, 13),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 96,
+                                        "name": "Cassady Whitley",
+                                        "reportsTo": 40,
+                                        "phone": "(996) 587-8405",
+                                        "extension": 780,
+                                        "hireDate": new Date(2013, 5, 7),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 5
+                                    },
+                                    {
+                                        "id": 97,
+                                        "name": "Haviva Campbell",
+                                        "reportsTo": 40,
+                                        "phone": "(263) 887-4689",
+                                        "extension": 2808,
+                                        "hireDate": new Date(2013, 3, 5),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 98,
+                                        "name": "Cameron Ayers",
+                                        "reportsTo": 40,
+                                        "phone": "(470) 709-8030",
+                                        "extension": 2893,
+                                        "hireDate": new Date(2013, 8, 28),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 99,
+                                        "name": "Martha Sargent",
+                                        "reportsTo": 40,
+                                        "phone": "(587) 812-4418",
+                                        "extension": 5099,
+                                        "hireDate": new Date(2014, 2, 27),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 100,
+                                        "name": "Darrel Kinney",
+                                        "reportsTo": 40,
+                                        "phone": "(888) 483-9606",
+                                        "extension": 4779,
+                                        "hireDate": new Date(2014, 3, 24),
+                                        "fullTime": false,
+                                        "position": "Graphic Designer",
+                                        "timeInPosition": 1
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 54,
+                                "name": "Kuame Frye",
+                                "reportsTo": 52,
+                                "phone": "(360) 721-5886",
+                                "extension": 2730,
+                                "hireDate": new Date(2010, 11, 17),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 64,
+                                        "name": "Ori Wynn",
+                                        "reportsTo": 54,
+                                        "phone": "(366) 342-0166",
+                                        "extension": 7252,
+                                        "hireDate": new Date(2015, 6, 21),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 0,
+                                        "employees": [
+                                            {
+                                                "id": 6,
+                                                "name": "Moses Duncan",
+                                                "reportsTo": 64,
+                                                "phone": "(421) 611-4814",
+                                                "extension": 669,
+                                                "hireDate": new Date(2010, 5, 24),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 12,
+                                                "name": "Jamalia Wallace",
+                                                "reportsTo": 64,
+                                                "phone": "(611) 391-8016",
+                                                "extension": 1952,
+                                                "hireDate": new Date(2011, 9, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Designer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 62,
+                                                "name": "Palmer Gregory",
+                                                "reportsTo": 64,
+                                                "phone": "(360) 430-2505",
+                                                "extension": 4337,
+                                                "hireDate": new Date(2014, 8, 30),
+                                                "fullTime": true,
+                                                "position": "Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 68,
+                                                "name": "Mallory Gilliam",
+                                                "reportsTo": 64,
+                                                "phone": "(878) 423-2971",
+                                                "extension": 1341,
+                                                "hireDate": new Date(2014, 7, 24),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 73,
+                                                "name": "Ima Hughes",
+                                                "reportsTo": 64,
+                                                "phone": "(905) 485-8001",
+                                                "extension": 1273,
+                                                "hireDate": new Date(2013, 6, 3),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 79,
+                                                "name": "Duncan Mathews",
+                                                "reportsTo": 64,
+                                                "phone": "(790) 971-9709",
+                                                "extension": 4573,
+                                                "hireDate": new Date(2011, 8, 21),
+                                                "fullTime": false,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 69,
+                                "name": "Sierra Beasley",
+                                "reportsTo": 52,
+                                "phone": "(271) 953-1968",
+                                "extension": 3324,
+                                "hireDate": new Date(2011, 4, 2),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 3,
+                                "employees": [
+                                    {
+                                        "id": 38,
+                                        "name": "Elton Tucker",
+                                        "reportsTo": 69,
+                                        "phone": "(988) 930-9331",
+                                        "extension": 9216,
+                                        "hireDate": new Date(2015, 6, 4),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 1
+                                    },
+                                    {
+                                        "id": 39,
+                                        "name": "Iona Brennan",
+                                        "reportsTo": 69,
+                                        "phone": "(356) 563-0600",
+                                        "extension": 5634,
+                                        "hireDate": new Date(2010, 9, 23),
+                                        "fullTime": true,
+                                        "position": "Junior Support Officer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 53,
+                                        "name": "Paul Campos",
+                                        "reportsTo": 69,
+                                        "phone": "(899) 205-1689",
+                                        "extension": 8586,
+                                        "hireDate": new Date(2011, 3, 17),
+                                        "fullTime": true,
+                                        "position": "Interaction Designer",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 66,
+                                                "name": "Gloria Freeman",
+                                                "reportsTo": 53,
+                                                "phone": "(344) 950-9168",
+                                                "extension": 4738,
+                                                "hireDate": new Date(2013, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Junior Interaction Designer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 57,
+                                        "name": "Alyssa Hansen",
+                                        "reportsTo": 69,
+                                        "phone": "(548) 925-4799",
+                                        "extension": 4716,
+                                        "hireDate": new Date(2011, 1, 19),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 82,
+                                        "name": "Yael Walters",
+                                        "reportsTo": 69,
+                                        "phone": "(311) 489-8191",
+                                        "extension": 6520,
+                                        "hireDate": new Date(2013, 7, 4),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 87,
+                                        "name": "Dahlia Hunt",
+                                        "reportsTo": 69,
+                                        "phone": "(720) 339-5202",
+                                        "extension": 3690,
+                                        "hireDate": new Date(2011, 3, 26),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 94,
+                                        "name": "Adria Stanley",
+                                        "reportsTo": 69,
+                                        "phone": "(536) 357-6391",
+                                        "extension": 3374,
+                                        "hireDate": new Date(2014, 7, 26),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "Priscilla Frank",
+                "reportsTo": 1,
+                "phone": "(278) 927-2684",
+                "extension": 4183,
+                "hireDate": new Date(2014, 11, 30),
+                "fullTime": true,
+                "position": "Chief Product Officer",
+                "timeInPosition": 2,
+                "employees": [
+                    {
+                        "id": 4,
+                        "name": "Ursula Holmes",
+                        "reportsTo": 3,
+                        "phone": "(302) 760-2034",
+                        "extension": 2226,
+                        "hireDate": new Date(2011, 6, 6),
+                        "fullTime": true,
+                        "position": "EVP, Product Strategy",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 24,
+                        "name": "Melvin Carrillo",
+                        "reportsTo": 3,
+                        "phone": "(348) 933-5167",
+                        "extension": 2482,
+                        "hireDate": new Date(2014, 7, 21),
+                        "fullTime": true,
+                        "position": "Director, Developer Relations",
+                        "timeInPosition": 6,
+                        "employees": [
+                            {
+                                "id": 29,
+                                "name": "Martha Chavez",
+                                "reportsTo": 24,
+                                "phone": "(860) 754-3464",
+                                "extension": 4531,
+                                "hireDate": new Date(2013, 3, 12),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 30,
+                                "name": "Oren Fox",
+                                "reportsTo": 24,
+                                "phone": "(572) 414-3299",
+                                "extension": 4849,
+                                "hireDate": new Date(2013, 5, 14),
+                                "fullTime": false,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 41,
+                                "name": "Amos Barr",
+                                "reportsTo": 24,
+                                "phone": "(470) 381-3718",
+                                "extension": 7643,
+                                "hireDate": new Date(2010, 3, 9),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "Anika Vega",
+                "reportsTo": 1,
+                "phone": "(910) 714-1802",
+                "extension": 6353,
+                "hireDate": new Date(2010, 2, 25),
+                "fullTime": true,
+                "position": "Chief Process Officer",
+                "timeInPosition": 5,
+                "employees": [
+                    {
+                        "id": 10,
+                        "name": "Vernon Ballard",
+                        "reportsTo": 5,
+                        "phone": "(702) 185-8890",
+                        "extension": 9242,
+                        "hireDate": new Date(2015, 6, 26),
+                        "fullTime": true,
+                        "position": "Director Facilities",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 16,
+                                "name": "Ali Guy",
+                                "reportsTo": 10,
+                                "phone": "(429) 912-6578",
+                                "extension": 2225,
+                                "hireDate": new Date(2014, 6, 29),
+                                "fullTime": true,
+                                "position": "Operations Manager",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 23,
+                                        "name": "Bruce Reilly",
+                                        "reportsTo": 16,
+                                        "phone": "(995) 243-7302",
+                                        "extension": 4815,
+                                        "hireDate": new Date(2015, 4, 1),
+                                        "fullTime": true,
+                                        "position": "Head of Security",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 26,
+                                                "name": "Rowan Morin",
+                                                "reportsTo": 23,
+                                                "phone": "(792) 141-4374",
+                                                "extension": 1844,
+                                                "hireDate": new Date(2015, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Building Security",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 44,
+                                                "name": "Benedict Soto",
+                                                "reportsTo": 23,
+                                                "phone": "(822) 282-5991",
+                                                "extension": 6422,
+                                                "hireDate": new Date(2012, 6, 1),
+                                                "fullTime": false,
+                                                "position": "Building Security",
+                                                "timeInPosition": 4
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 48,
+                                        "name": "Maryam Rios",
+                                        "reportsTo": 16,
+                                        "phone": "(673) 764-6720",
+                                        "extension": 531,
+                                        "hireDate": new Date(2014, 3, 3),
+                                        "fullTime": true,
+                                        "position": "Team Lead, Personal Assistants",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 58,
+                                                "name": "Rose Mcintyre",
+                                                "reportsTo": 48,
+                                                "phone": "(771) 615-4590",
+                                                "extension": 7094,
+                                                "hireDate": new Date(2015, 6, 30),
+                                                "fullTime": false,
+                                                "position": "Personal Assistant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "Nevada Hart",
+                "reportsTo": 1,
+                "phone": "(254) 220-1576",
+                "extension": 6649,
+                "hireDate": new Date(2015, 8, 17),
+                "fullTime": true,
+                "position": "Chief Financial Officer",
+                "timeInPosition": 6,
+                "employees": [
+                    {
+                        "id": 14,
+                        "name": "Zena Sanford",
+                        "reportsTo": 7,
+                        "phone": "(437) 568-8160",
+                        "extension": 4452,
+                        "hireDate": new Date(2010, 11, 30),
+                        "fullTime": true,
+                        "position": "VP, Finance",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 15,
+                        "name": "Quinlan Howe",
+                        "reportsTo": 7,
+                        "phone": "(464) 334-9748",
+                        "extension": 8722,
+                        "hireDate": new Date(2011, 6, 9),
+                        "fullTime": false,
+                        "position": "Senior Director, Finance",
+                        "timeInPosition": 0,
+                        "employees": [
+                            {
+                                "id": 17,
+                                "name": "Indira Lopez",
+                                "reportsTo": 15,
+                                "phone": "(301) 368-0938",
+                                "extension": 8027,
+                                "hireDate": new Date(2013, 8, 18),
+                                "fullTime": true,
+                                "position": "ERP Team Lead",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 18,
+                                        "name": "Lareina Lara",
+                                        "reportsTo": 17,
+                                        "phone": "(233) 457-7482",
+                                        "extension": 1996,
+                                        "hireDate": new Date(2010, 4, 30),
+                                        "fullTime": true,
+                                        "position": "ERP Solutions Consultant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 19,
+                                        "name": "Maxwell Wise",
+                                        "reportsTo": 17,
+                                        "phone": "(570) 494-2531",
+                                        "extension": 9865,
+                                        "hireDate": new Date(2012, 5, 19),
+                                        "fullTime": true,
+                                        "position": "Systems Engineer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 20,
+                                "name": "Hunter Mcbride",
+                                "reportsTo": 15,
+                                "phone": "(409) 442-7016",
+                                "extension": 4284,
+                                "hireDate": new Date(2012, 10, 20),
+                                "fullTime": true,
+                                "position": "Senior Director, Tax",
+                                "timeInPosition": 3
+                            },
+                            {
+                                "id": 21,
+                                "name": "Jana Serrano",
+                                "reportsTo": 15,
+                                "phone": "(910) 718-4620",
+                                "extension": 6970,
+                                "hireDate": new Date(2010, 4, 2),
+                                "fullTime": true,
+                                "position": "Financial Planning & Analysis Manager",
+                                "timeInPosition": 2
+                            },
+                            {
+                                "id": 22,
+                                "name": "Zachery Shelton",
+                                "reportsTo": 15,
+                                "phone": "(310) 240-8675",
+                                "extension": 4527,
+                                "hireDate": new Date(2011, 11, 23),
+                                "fullTime": false,
+                                "position": "Corporate Finance Controller",
+                                "timeInPosition": 6,
+                                "employees": [
+                                    {
+                                        "id": 28,
+                                        "name": "Cullen Freeman",
+                                        "reportsTo": 22,
+                                        "phone": "(136) 554-8814",
+                                        "extension": 9861,
+                                        "hireDate": new Date(2014, 3, 15),
+                                        "fullTime": true,
+                                        "position": "Treasurer Accountant",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 31,
+                                        "name": "Quinn Dean",
+                                        "reportsTo": 22,
+                                        "phone": "(152) 613-3507",
+                                        "extension": 6621,
+                                        "hireDate": new Date(2015, 1, 29),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 34,
+                                        "name": "Samantha Brady",
+                                        "reportsTo": 22,
+                                        "phone": "(206) 398-4328",
+                                        "extension": 1157,
+                                        "hireDate": new Date(2011, 2, 13),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 35,
+                                                "name": "Tamara Green",
+                                                "reportsTo": 34,
+                                                "phone": "(219) 248-2789",
+                                                "extension": 4880,
+                                                "hireDate": new Date(2014, 2, 4),
+                                                "fullTime": true,
+                                                "position": "Junior Accountant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 36,
+                                        "name": "Olympia Coleman",
+                                        "reportsTo": 22,
+                                        "phone": "(944) 853-6383",
+                                        "extension": 2136,
+                                        "hireDate": new Date(2013, 7, 31),
+                                        "fullTime": true,
+                                        "position": "Collections Manager",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 37,
+                                        "name": "Breanna Goodwin",
+                                        "reportsTo": 22,
+                                        "phone": "(379) 988-9630",
+                                        "extension": 5898,
+                                        "hireDate": new Date(2010, 5, 23),
+                                        "fullTime": false,
+                                        "position": "Payroll Specialist",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 27,
+                                "name": "Curran Travis",
+                                "reportsTo": 15,
+                                "phone": "(438) 135-8033",
+                                "extension": 3841,
+                                "hireDate": new Date(2011, 6, 13),
+                                "fullTime": true,
+                                "position": "Finance Controller",
+                                "timeInPosition": 5
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "Hunter Fry",
+                "reportsTo": 1,
+                "phone": "(766) 358-9858",
+                "extension": 3741,
+                "hireDate": new Date(2011, 2, 12),
+                "fullTime": false,
+                "position": "General Counsel",
+                "timeInPosition": 3,
+                "employees": [
+                    {
+                        "id": 9,
+                        "name": "Kuame Carrillo",
+                        "reportsTo": 8,
+                        "phone": "(192) 383-1305",
+                        "extension": 9228,
+                        "hireDate": new Date(2011, 2, 22),
+                        "fullTime": true,
+                        "position": "Associate General Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 13,
+                        "name": "Stacy Todd",
+                        "reportsTo": 8,
+                        "phone": "(925) 286-3327",
+                        "extension": 8565,
+                        "hireDate": new Date(2014, 7, 5),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 33,
+                        "name": "Valentine Wyatt",
+                        "reportsTo": 8,
+                        "phone": "(165) 166-6205",
+                        "extension": 3588,
+                        "hireDate": new Date(2015, 5, 21),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 5
+                    },
+                    {
+                        "id": 86,
+                        "name": "Daniel Mccarthy",
+                        "reportsTo": 8,
+                        "phone": "(624) 483-6206",
+                        "extension": 9112,
+                        "hireDate": new Date(2013, 12, 3),
+                        "fullTime": false,
+                        "position": "Staff Attorney",
+                        "timeInPosition": 0
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default employees;
diff --git a/vue-options-api-demos/treelist/pdf/basic/main.js b/vue-options-api-demos/treelist/pdf/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/pdf/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/pdf/basic/main.vue b/vue-options-api-demos/treelist/pdf/basic/main.vue
new file mode 100644
index 00000000..bf299a58
--- /dev/null
+++ b/vue-options-api-demos/treelist/pdf/basic/main.vue
@@ -0,0 +1,114 @@
+<template>
+  <div>
+      <pdfexport ref="treeListPdfExport">
+        <TreeList
+          :style="{
+            maxHeight: '510px',
+            overflow: 'auto',
+          }"
+          :expand-field="expandField"
+          :sub-items-field="subItemsField"
+          @expandchange="onExpandChange"
+          :filter="filter"
+          :filterable="filterable"
+          :data-items="processedData"
+          @filterchange="handleFilterChange"
+          :columns="columns" 
+          :toolbar="'toolbar'"
+      >
+        <template v-slot:toolbar>
+          <div>
+            <KButton @click="exportPDFWithComp">Export Data To PDF</KButton>
+          </div>
+        </template>
+      </TreeList>
+      </pdfexport>
+      </div>
+  </template>
+  
+  <script>
+  import { TreeListPDFExport } from '@progress/kendo-vue-pdf';
+  import { Button } from '@progress/kendo-vue-buttons';
+  import employees from './data';
+import {
+  TreeList,
+  filterBy,
+  extendDataItem,
+  mapTree,
+} from '@progress/kendo-vue-treelist';
+  
+  export default {
+      components: {
+        TreeList,
+        pdfexport: TreeListPDFExport,
+        KButton: Button,
+      },
+      data() {
+        return {
+          dataItems: [...employees],
+          filter: [],
+          filterable: true,
+          expanded: [1, 2, 32],
+          subItemsField: 'employees',
+          expandField: 'expanded',
+          columns: [
+            {
+              field: 'name',
+              title: 'Name',
+              width: '320px',
+              expandable: true,
+            },
+            {
+              field: 'hireDate',
+              title: 'Hire Date',
+              width: '280px',
+              format: '{0:d}',
+              filter: 'date',
+            },
+            {
+              field: 'timeInPosition',
+              title: 'Year(s) in Position',
+              width: '280px',
+              filter: 'numeric',
+            },
+            {
+              field: 'fullTime',
+              title: 'Full Time',
+              width: '190px',
+              filter: 'boolean',
+            },
+          ],
+        };
+      },
+      computed: {
+        processedData() {
+          let data = this.dataItems;
+          
+          let filteredData = filterBy(data, this.filter, this.subItemsField);
+          return this.addExpandField(filteredData);
+        },
+      },
+      methods: {
+        exportPDFWithComp: function () {
+          this.$refs.treeListPdfExport.save(this.processedData);
+        },
+        onExpandChange(e) {
+          this.expanded = e.value
+            ? this.expanded.filter((id) => id !== e.dataItem.id)
+            : [...this.expanded, e.dataItem.id];
+        },
+        handleFilterChange(event) {
+         this.filter = event.filter;
+        },
+        addExpandField(dataTree) {
+          const expanded = this.expanded;
+          return mapTree(dataTree, this.subItemsField, (item) =>
+            extendDataItem(item, this.subItemsField, {
+              [this.expandField]: expanded.includes(item.id),
+            })
+          );
+        },
+      },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/treelist/pdf/columns-modification/data.js b/vue-options-api-demos/treelist/pdf/columns-modification/data.js
new file mode 100644
index 00000000..f66aec4d
--- /dev/null
+++ b/vue-options-api-demos/treelist/pdf/columns-modification/data.js
@@ -0,0 +1,1150 @@
+
+const employees = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2,
+        "employees": [
+            {
+                "id": 2,
+                "name": "Guy Wooten",
+                "reportsTo": 1,
+                "phone": "(438) 738-4935",
+                "extension": 1155,
+                "hireDate": new Date(2010, 3, 3),
+                "fullTime": true,
+                "position": "Chief Technical Officer",
+                "timeInPosition": 1,
+                "employees": [
+                    {
+                        "id": 32,
+                        "name": "Buffy Weber",
+                        "reportsTo": 2,
+                        "phone": "(699) 838-6121",
+                        "extension": 8933,
+                        "hireDate": new Date(2011, 7, 11),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 11,
+                                "name": "Hyacinth Hood",
+                                "reportsTo": 32,
+                                "phone": "(889) 345-2438",
+                                "extension": 8564,
+                                "hireDate": new Date(2014, 2, 3),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 60,
+                                        "name": "Akeem Carr",
+                                        "reportsTo": 11,
+                                        "phone": "(738) 136-2814",
+                                        "extension": 9353,
+                                        "hireDate": new Date(2011, 4, 21),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 78,
+                                        "name": "Rinah Simon",
+                                        "reportsTo": 11,
+                                        "phone": "(285) 912-5271",
+                                        "extension": 7795,
+                                        "hireDate": new Date(2012, 10, 11),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 42,
+                                "name": "Gage Daniels",
+                                "reportsTo": 32,
+                                "phone": "(107) 290-6260",
+                                "extension": 896,
+                                "hireDate": new Date(2013, 5, 16),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 5
+                            },
+                            {
+                                "id": 43,
+                                "name": "Constance Vazquez",
+                                "reportsTo": 32,
+                                "phone": "(800) 301-1978",
+                                "extension": 5141,
+                                "hireDate": new Date(2011, 6, 7),
+                                "fullTime": true,
+                                "position": "Director, Engineering",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 46,
+                                        "name": "Darrel Solis",
+                                        "reportsTo": 43,
+                                        "phone": "(327) 977-0216",
+                                        "extension": 7779,
+                                        "hireDate": new Date(2015, 4, 25),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 47,
+                                                "name": "Brian Yang",
+                                                "reportsTo": 46,
+                                                "phone": "(565) 146-5435",
+                                                "extension": 3885,
+                                                "hireDate": new Date(2012, 9, 27),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 50,
+                                                "name": "Lillian Bradshaw",
+                                                "reportsTo": 46,
+                                                "phone": "(323) 509-3479",
+                                                "extension": 5426,
+                                                "hireDate": new Date(2014, 5, 10),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 51,
+                                                "name": "Christian Palmer",
+                                                "reportsTo": 46,
+                                                "phone": "(490) 421-8718",
+                                                "extension": 3706,
+                                                "hireDate": new Date(2012, 12, 27),
+                                                "fullTime": false,
+                                                "position": "Technical Lead",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 55,
+                                                "name": "Summer Mosley",
+                                                "reportsTo": 46,
+                                                "phone": "(784) 962-2301",
+                                                "extension": 5492,
+                                                "hireDate": new Date(2010, 3, 2),
+                                                "fullTime": true,
+                                                "position": "QA Engineer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 56,
+                                                "name": "Barry Ayers",
+                                                "reportsTo": 46,
+                                                "phone": "(452) 373-9227",
+                                                "extension": 1308,
+                                                "hireDate": new Date(2011, 10, 11),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 59,
+                                                "name": "Keiko Espinoza",
+                                                "reportsTo": 46,
+                                                "phone": "(226) 600-5305",
+                                                "extension": 9363,
+                                                "hireDate": new Date(2011, 9, 18),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 61,
+                                                "name": "Candace Pickett",
+                                                "reportsTo": 46,
+                                                "phone": "(120) 117-7475",
+                                                "extension": 5178,
+                                                "hireDate": new Date(2010, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 63,
+                                        "name": "Mia Caldwell",
+                                        "reportsTo": 43,
+                                        "phone": "(848) 636-6470",
+                                        "extension": 6368,
+                                        "hireDate": new Date(2012, 10, 7),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 65,
+                                                "name": "Thomas Terry",
+                                                "reportsTo": 63,
+                                                "phone": "(764) 831-4248",
+                                                "extension": 3574,
+                                                "hireDate": new Date(2015, 6, 15),
+                                                "fullTime": false,
+                                                "position": "Senior Enterprise Support Officer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 67,
+                                                "name": "Ruth Downs",
+                                                "reportsTo": 63,
+                                                "phone": "(138) 991-1440",
+                                                "extension": 8067,
+                                                "hireDate": new Date(2013, 7, 13),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 70,
+                                                "name": "Yasir Wilder",
+                                                "reportsTo": 63,
+                                                "phone": "(759) 701-8665",
+                                                "extension": 8350,
+                                                "hireDate": new Date(2010, 11, 8),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 71,
+                                                "name": "Flavia Short",
+                                                "reportsTo": 63,
+                                                "phone": "(370) 133-9238",
+                                                "extension": 6390,
+                                                "hireDate": new Date(2013, 2, 21),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 74,
+                                                "name": "Aaron Roach",
+                                                "reportsTo": 63,
+                                                "phone": "(958) 717-9230",
+                                                "extension": 4899,
+                                                "hireDate": new Date(2011, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 75,
+                                                "name": "Eric Russell",
+                                                "reportsTo": 63,
+                                                "phone": "(516) 575-8505",
+                                                "extension": 2224,
+                                                "hireDate": new Date(2012, 10, 28),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 76,
+                                                "name": "Cheyenne Olson",
+                                                "reportsTo": 63,
+                                                "phone": "(241) 645-0257",
+                                                "extension": 9181,
+                                                "hireDate": new Date(2015, 5, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 77,
+                                                "name": "Shaine Avila",
+                                                "reportsTo": 63,
+                                                "phone": "(844) 435-1360",
+                                                "extension": 3374,
+                                                "hireDate": new Date(2010, 1, 31),
+                                                "fullTime": true,
+                                                "position": "UI Designer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 81,
+                                                "name": "Chantale Long",
+                                                "reportsTo": 63,
+                                                "phone": "(252) 419-6891",
+                                                "extension": 7868,
+                                                "hireDate": new Date(2010, 6, 17),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 83,
+                                                "name": "Dane Cruz",
+                                                "reportsTo": 63,
+                                                "phone": "(946) 701-6165",
+                                                "extension": 3828,
+                                                "hireDate": new Date(2014, 10, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 84,
+                                                "name": "Regan Patterson",
+                                                "reportsTo": 63,
+                                                "phone": "(265) 946-1765",
+                                                "extension": 6955,
+                                                "hireDate": new Date(2012, 3, 1),
+                                                "fullTime": true,
+                                                "position": "Technical Writer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 85,
+                                                "name": "Drew Mckay",
+                                                "reportsTo": 63,
+                                                "phone": "(327) 293-0162",
+                                                "extension": 6904,
+                                                "hireDate": new Date(2011, 3, 25),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 88,
+                                                "name": "Bevis Miller",
+                                                "reportsTo": 63,
+                                                "phone": "(525) 557-0169",
+                                                "extension": 6978,
+                                                "hireDate": new Date(2011, 4, 19),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 89,
+                                                "name": "Bruce Mccarty",
+                                                "reportsTo": 63,
+                                                "phone": "(936) 777-8730",
+                                                "extension": 6552,
+                                                "hireDate": new Date(2014, 3, 28),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 5
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 90,
+                                        "name": "Ocean Blair",
+                                        "reportsTo": 43,
+                                        "phone": "(343) 586-6614",
+                                        "extension": 1424,
+                                        "hireDate": new Date(2011, 4, 27),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 91,
+                                                "name": "Guinevere Osborn",
+                                                "reportsTo": 90,
+                                                "phone": "(424) 741-0006",
+                                                "extension": 3166,
+                                                "hireDate": new Date(2014, 11, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 92,
+                                                "name": "Olga Strong",
+                                                "reportsTo": 90,
+                                                "phone": "(949) 417-1168",
+                                                "extension": 4568,
+                                                "hireDate": new Date(2015, 5, 28),
+                                                "fullTime": true,
+                                                "position": "Graphic Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 93,
+                                                "name": "Robert Orr",
+                                                "reportsTo": 90,
+                                                "phone": "(977) 341-3721",
+                                                "extension": 9241,
+                                                "hireDate": new Date(2012, 8, 20),
+                                                "fullTime": false,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 95,
+                                                "name": "Odette Sears",
+                                                "reportsTo": 90,
+                                                "phone": "(264) 818-6576",
+                                                "extension": 1914,
+                                                "hireDate": new Date(2013, 7, 5),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 45,
+                                "name": "Zelda Medina",
+                                "reportsTo": 32,
+                                "phone": "(563) 359-6023",
+                                "extension": 2600,
+                                "hireDate": new Date(2012, 11, 6),
+                                "fullTime": true,
+                                "position": "QA Architect",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    },
+                    {
+                        "id": 52,
+                        "name": "Skyler Cleveland",
+                        "reportsTo": 2,
+                        "phone": "(217) 280-5300",
+                        "extension": 9655,
+                        "hireDate": new Date(2014, 11, 10),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 40,
+                                "name": "Karleigh Garza",
+                                "reportsTo": 52,
+                                "phone": "(370) 983-8796",
+                                "extension": 4044,
+                                "hireDate": new Date(2014, 3, 10),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 49,
+                                        "name": "Elmo Tyson",
+                                        "reportsTo": 40,
+                                        "phone": "(344) 496-9555",
+                                        "extension": 6950,
+                                        "hireDate": new Date(2014, 9, 18),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 72,
+                                        "name": "Stacey Lynn",
+                                        "reportsTo": 40,
+                                        "phone": "(140) 772-7509",
+                                        "extension": 8396,
+                                        "hireDate": new Date(2014, 7, 31),
+                                        "fullTime": false,
+                                        "position": "QA Engineer",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 80,
+                                                "name": "Meredith Parrish",
+                                                "reportsTo": 72,
+                                                "phone": "(714) 284-2408",
+                                                "extension": 7675,
+                                                "hireDate": new Date(2012, 11, 13),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 96,
+                                        "name": "Cassady Whitley",
+                                        "reportsTo": 40,
+                                        "phone": "(996) 587-8405",
+                                        "extension": 780,
+                                        "hireDate": new Date(2013, 5, 7),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 5
+                                    },
+                                    {
+                                        "id": 97,
+                                        "name": "Haviva Campbell",
+                                        "reportsTo": 40,
+                                        "phone": "(263) 887-4689",
+                                        "extension": 2808,
+                                        "hireDate": new Date(2013, 3, 5),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 98,
+                                        "name": "Cameron Ayers",
+                                        "reportsTo": 40,
+                                        "phone": "(470) 709-8030",
+                                        "extension": 2893,
+                                        "hireDate": new Date(2013, 8, 28),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 99,
+                                        "name": "Martha Sargent",
+                                        "reportsTo": 40,
+                                        "phone": "(587) 812-4418",
+                                        "extension": 5099,
+                                        "hireDate": new Date(2014, 2, 27),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 100,
+                                        "name": "Darrel Kinney",
+                                        "reportsTo": 40,
+                                        "phone": "(888) 483-9606",
+                                        "extension": 4779,
+                                        "hireDate": new Date(2014, 3, 24),
+                                        "fullTime": false,
+                                        "position": "Graphic Designer",
+                                        "timeInPosition": 1
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 54,
+                                "name": "Kuame Frye",
+                                "reportsTo": 52,
+                                "phone": "(360) 721-5886",
+                                "extension": 2730,
+                                "hireDate": new Date(2010, 11, 17),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 64,
+                                        "name": "Ori Wynn",
+                                        "reportsTo": 54,
+                                        "phone": "(366) 342-0166",
+                                        "extension": 7252,
+                                        "hireDate": new Date(2015, 6, 21),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 0,
+                                        "employees": [
+                                            {
+                                                "id": 6,
+                                                "name": "Moses Duncan",
+                                                "reportsTo": 64,
+                                                "phone": "(421) 611-4814",
+                                                "extension": 669,
+                                                "hireDate": new Date(2010, 5, 24),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 12,
+                                                "name": "Jamalia Wallace",
+                                                "reportsTo": 64,
+                                                "phone": "(611) 391-8016",
+                                                "extension": 1952,
+                                                "hireDate": new Date(2011, 9, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Designer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 62,
+                                                "name": "Palmer Gregory",
+                                                "reportsTo": 64,
+                                                "phone": "(360) 430-2505",
+                                                "extension": 4337,
+                                                "hireDate": new Date(2014, 8, 30),
+                                                "fullTime": true,
+                                                "position": "Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 68,
+                                                "name": "Mallory Gilliam",
+                                                "reportsTo": 64,
+                                                "phone": "(878) 423-2971",
+                                                "extension": 1341,
+                                                "hireDate": new Date(2014, 7, 24),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 73,
+                                                "name": "Ima Hughes",
+                                                "reportsTo": 64,
+                                                "phone": "(905) 485-8001",
+                                                "extension": 1273,
+                                                "hireDate": new Date(2013, 6, 3),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 79,
+                                                "name": "Duncan Mathews",
+                                                "reportsTo": 64,
+                                                "phone": "(790) 971-9709",
+                                                "extension": 4573,
+                                                "hireDate": new Date(2011, 8, 21),
+                                                "fullTime": false,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 69,
+                                "name": "Sierra Beasley",
+                                "reportsTo": 52,
+                                "phone": "(271) 953-1968",
+                                "extension": 3324,
+                                "hireDate": new Date(2011, 4, 2),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 3,
+                                "employees": [
+                                    {
+                                        "id": 38,
+                                        "name": "Elton Tucker",
+                                        "reportsTo": 69,
+                                        "phone": "(988) 930-9331",
+                                        "extension": 9216,
+                                        "hireDate": new Date(2015, 6, 4),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 1
+                                    },
+                                    {
+                                        "id": 39,
+                                        "name": "Iona Brennan",
+                                        "reportsTo": 69,
+                                        "phone": "(356) 563-0600",
+                                        "extension": 5634,
+                                        "hireDate": new Date(2010, 9, 23),
+                                        "fullTime": true,
+                                        "position": "Junior Support Officer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 53,
+                                        "name": "Paul Campos",
+                                        "reportsTo": 69,
+                                        "phone": "(899) 205-1689",
+                                        "extension": 8586,
+                                        "hireDate": new Date(2011, 3, 17),
+                                        "fullTime": true,
+                                        "position": "Interaction Designer",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 66,
+                                                "name": "Gloria Freeman",
+                                                "reportsTo": 53,
+                                                "phone": "(344) 950-9168",
+                                                "extension": 4738,
+                                                "hireDate": new Date(2013, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Junior Interaction Designer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 57,
+                                        "name": "Alyssa Hansen",
+                                        "reportsTo": 69,
+                                        "phone": "(548) 925-4799",
+                                        "extension": 4716,
+                                        "hireDate": new Date(2011, 1, 19),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 82,
+                                        "name": "Yael Walters",
+                                        "reportsTo": 69,
+                                        "phone": "(311) 489-8191",
+                                        "extension": 6520,
+                                        "hireDate": new Date(2013, 7, 4),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 87,
+                                        "name": "Dahlia Hunt",
+                                        "reportsTo": 69,
+                                        "phone": "(720) 339-5202",
+                                        "extension": 3690,
+                                        "hireDate": new Date(2011, 3, 26),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 94,
+                                        "name": "Adria Stanley",
+                                        "reportsTo": 69,
+                                        "phone": "(536) 357-6391",
+                                        "extension": 3374,
+                                        "hireDate": new Date(2014, 7, 26),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "Priscilla Frank",
+                "reportsTo": 1,
+                "phone": "(278) 927-2684",
+                "extension": 4183,
+                "hireDate": new Date(2014, 11, 30),
+                "fullTime": true,
+                "position": "Chief Product Officer",
+                "timeInPosition": 2,
+                "employees": [
+                    {
+                        "id": 4,
+                        "name": "Ursula Holmes",
+                        "reportsTo": 3,
+                        "phone": "(302) 760-2034",
+                        "extension": 2226,
+                        "hireDate": new Date(2011, 6, 6),
+                        "fullTime": true,
+                        "position": "EVP, Product Strategy",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 24,
+                        "name": "Melvin Carrillo",
+                        "reportsTo": 3,
+                        "phone": "(348) 933-5167",
+                        "extension": 2482,
+                        "hireDate": new Date(2014, 7, 21),
+                        "fullTime": true,
+                        "position": "Director, Developer Relations",
+                        "timeInPosition": 6,
+                        "employees": [
+                            {
+                                "id": 29,
+                                "name": "Martha Chavez",
+                                "reportsTo": 24,
+                                "phone": "(860) 754-3464",
+                                "extension": 4531,
+                                "hireDate": new Date(2013, 3, 12),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 30,
+                                "name": "Oren Fox",
+                                "reportsTo": 24,
+                                "phone": "(572) 414-3299",
+                                "extension": 4849,
+                                "hireDate": new Date(2013, 5, 14),
+                                "fullTime": false,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 41,
+                                "name": "Amos Barr",
+                                "reportsTo": 24,
+                                "phone": "(470) 381-3718",
+                                "extension": 7643,
+                                "hireDate": new Date(2010, 3, 9),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "Anika Vega",
+                "reportsTo": 1,
+                "phone": "(910) 714-1802",
+                "extension": 6353,
+                "hireDate": new Date(2010, 2, 25),
+                "fullTime": true,
+                "position": "Chief Process Officer",
+                "timeInPosition": 5,
+                "employees": [
+                    {
+                        "id": 10,
+                        "name": "Vernon Ballard",
+                        "reportsTo": 5,
+                        "phone": "(702) 185-8890",
+                        "extension": 9242,
+                        "hireDate": new Date(2015, 6, 26),
+                        "fullTime": true,
+                        "position": "Director Facilities",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 16,
+                                "name": "Ali Guy",
+                                "reportsTo": 10,
+                                "phone": "(429) 912-6578",
+                                "extension": 2225,
+                                "hireDate": new Date(2014, 6, 29),
+                                "fullTime": true,
+                                "position": "Operations Manager",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 23,
+                                        "name": "Bruce Reilly",
+                                        "reportsTo": 16,
+                                        "phone": "(995) 243-7302",
+                                        "extension": 4815,
+                                        "hireDate": new Date(2015, 4, 1),
+                                        "fullTime": true,
+                                        "position": "Head of Security",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 26,
+                                                "name": "Rowan Morin",
+                                                "reportsTo": 23,
+                                                "phone": "(792) 141-4374",
+                                                "extension": 1844,
+                                                "hireDate": new Date(2015, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Building Security",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 44,
+                                                "name": "Benedict Soto",
+                                                "reportsTo": 23,
+                                                "phone": "(822) 282-5991",
+                                                "extension": 6422,
+                                                "hireDate": new Date(2012, 6, 1),
+                                                "fullTime": false,
+                                                "position": "Building Security",
+                                                "timeInPosition": 4
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 48,
+                                        "name": "Maryam Rios",
+                                        "reportsTo": 16,
+                                        "phone": "(673) 764-6720",
+                                        "extension": 531,
+                                        "hireDate": new Date(2014, 3, 3),
+                                        "fullTime": true,
+                                        "position": "Team Lead, Personal Assistants",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 58,
+                                                "name": "Rose Mcintyre",
+                                                "reportsTo": 48,
+                                                "phone": "(771) 615-4590",
+                                                "extension": 7094,
+                                                "hireDate": new Date(2015, 6, 30),
+                                                "fullTime": false,
+                                                "position": "Personal Assistant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "Nevada Hart",
+                "reportsTo": 1,
+                "phone": "(254) 220-1576",
+                "extension": 6649,
+                "hireDate": new Date(2015, 8, 17),
+                "fullTime": true,
+                "position": "Chief Financial Officer",
+                "timeInPosition": 6,
+                "employees": [
+                    {
+                        "id": 14,
+                        "name": "Zena Sanford",
+                        "reportsTo": 7,
+                        "phone": "(437) 568-8160",
+                        "extension": 4452,
+                        "hireDate": new Date(2010, 11, 30),
+                        "fullTime": true,
+                        "position": "VP, Finance",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 15,
+                        "name": "Quinlan Howe",
+                        "reportsTo": 7,
+                        "phone": "(464) 334-9748",
+                        "extension": 8722,
+                        "hireDate": new Date(2011, 6, 9),
+                        "fullTime": false,
+                        "position": "Senior Director, Finance",
+                        "timeInPosition": 0,
+                        "employees": [
+                            {
+                                "id": 17,
+                                "name": "Indira Lopez",
+                                "reportsTo": 15,
+                                "phone": "(301) 368-0938",
+                                "extension": 8027,
+                                "hireDate": new Date(2013, 8, 18),
+                                "fullTime": true,
+                                "position": "ERP Team Lead",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 18,
+                                        "name": "Lareina Lara",
+                                        "reportsTo": 17,
+                                        "phone": "(233) 457-7482",
+                                        "extension": 1996,
+                                        "hireDate": new Date(2010, 4, 30),
+                                        "fullTime": true,
+                                        "position": "ERP Solutions Consultant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 19,
+                                        "name": "Maxwell Wise",
+                                        "reportsTo": 17,
+                                        "phone": "(570) 494-2531",
+                                        "extension": 9865,
+                                        "hireDate": new Date(2012, 5, 19),
+                                        "fullTime": true,
+                                        "position": "Systems Engineer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 20,
+                                "name": "Hunter Mcbride",
+                                "reportsTo": 15,
+                                "phone": "(409) 442-7016",
+                                "extension": 4284,
+                                "hireDate": new Date(2012, 10, 20),
+                                "fullTime": true,
+                                "position": "Senior Director, Tax",
+                                "timeInPosition": 3
+                            },
+                            {
+                                "id": 21,
+                                "name": "Jana Serrano",
+                                "reportsTo": 15,
+                                "phone": "(910) 718-4620",
+                                "extension": 6970,
+                                "hireDate": new Date(2010, 4, 2),
+                                "fullTime": true,
+                                "position": "Financial Planning & Analysis Manager",
+                                "timeInPosition": 2
+                            },
+                            {
+                                "id": 22,
+                                "name": "Zachery Shelton",
+                                "reportsTo": 15,
+                                "phone": "(310) 240-8675",
+                                "extension": 4527,
+                                "hireDate": new Date(2011, 11, 23),
+                                "fullTime": false,
+                                "position": "Corporate Finance Controller",
+                                "timeInPosition": 6,
+                                "employees": [
+                                    {
+                                        "id": 28,
+                                        "name": "Cullen Freeman",
+                                        "reportsTo": 22,
+                                        "phone": "(136) 554-8814",
+                                        "extension": 9861,
+                                        "hireDate": new Date(2014, 3, 15),
+                                        "fullTime": true,
+                                        "position": "Treasurer Accountant",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 31,
+                                        "name": "Quinn Dean",
+                                        "reportsTo": 22,
+                                        "phone": "(152) 613-3507",
+                                        "extension": 6621,
+                                        "hireDate": new Date(2015, 1, 29),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 34,
+                                        "name": "Samantha Brady",
+                                        "reportsTo": 22,
+                                        "phone": "(206) 398-4328",
+                                        "extension": 1157,
+                                        "hireDate": new Date(2011, 2, 13),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 35,
+                                                "name": "Tamara Green",
+                                                "reportsTo": 34,
+                                                "phone": "(219) 248-2789",
+                                                "extension": 4880,
+                                                "hireDate": new Date(2014, 2, 4),
+                                                "fullTime": true,
+                                                "position": "Junior Accountant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 36,
+                                        "name": "Olympia Coleman",
+                                        "reportsTo": 22,
+                                        "phone": "(944) 853-6383",
+                                        "extension": 2136,
+                                        "hireDate": new Date(2013, 7, 31),
+                                        "fullTime": true,
+                                        "position": "Collections Manager",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 37,
+                                        "name": "Breanna Goodwin",
+                                        "reportsTo": 22,
+                                        "phone": "(379) 988-9630",
+                                        "extension": 5898,
+                                        "hireDate": new Date(2010, 5, 23),
+                                        "fullTime": false,
+                                        "position": "Payroll Specialist",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 27,
+                                "name": "Curran Travis",
+                                "reportsTo": 15,
+                                "phone": "(438) 135-8033",
+                                "extension": 3841,
+                                "hireDate": new Date(2011, 6, 13),
+                                "fullTime": true,
+                                "position": "Finance Controller",
+                                "timeInPosition": 5
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "Hunter Fry",
+                "reportsTo": 1,
+                "phone": "(766) 358-9858",
+                "extension": 3741,
+                "hireDate": new Date(2011, 2, 12),
+                "fullTime": false,
+                "position": "General Counsel",
+                "timeInPosition": 3,
+                "employees": [
+                    {
+                        "id": 9,
+                        "name": "Kuame Carrillo",
+                        "reportsTo": 8,
+                        "phone": "(192) 383-1305",
+                        "extension": 9228,
+                        "hireDate": new Date(2011, 2, 22),
+                        "fullTime": true,
+                        "position": "Associate General Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 13,
+                        "name": "Stacy Todd",
+                        "reportsTo": 8,
+                        "phone": "(925) 286-3327",
+                        "extension": 8565,
+                        "hireDate": new Date(2014, 7, 5),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 33,
+                        "name": "Valentine Wyatt",
+                        "reportsTo": 8,
+                        "phone": "(165) 166-6205",
+                        "extension": 3588,
+                        "hireDate": new Date(2015, 5, 21),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 5
+                    },
+                    {
+                        "id": 86,
+                        "name": "Daniel Mccarthy",
+                        "reportsTo": 8,
+                        "phone": "(624) 483-6206",
+                        "extension": 9112,
+                        "hireDate": new Date(2013, 12, 3),
+                        "fullTime": false,
+                        "position": "Staff Attorney",
+                        "timeInPosition": 0
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default employees;
diff --git a/vue-options-api-demos/treelist/pdf/columns-modification/main.js b/vue-options-api-demos/treelist/pdf/columns-modification/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/pdf/columns-modification/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/pdf/columns-modification/main.vue b/vue-options-api-demos/treelist/pdf/columns-modification/main.vue
new file mode 100644
index 00000000..19a68f0a
--- /dev/null
+++ b/vue-options-api-demos/treelist/pdf/columns-modification/main.vue
@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <pdfexport ref="treeListPdfExport">
+      <TreeList
+        :style="{
+          maxHeight: '510px',
+          overflow: 'auto',
+        }"
+        :expand-field="expandField"
+        :sub-items-field="subItemsField"
+        @expandchange="onExpandChange"
+        :filter="filter"
+        :filterable="filterable"
+        :data-items="processedData"
+        @filterchange="handleFilterChange"
+        :columns="columns"
+        :toolbar="'toolbar'"
+      >
+        <template v-slot:toolbar>
+          <div>
+            <KButton @click="exportPDFWithComp"
+              >Export the Data from Specific Columns To PDF</KButton
+            >
+          </div>
+        </template>
+      </TreeList>
+    </pdfexport>
+  </div>
+</template>
+
+<script>
+import { TreeListPDFExport } from '@progress/kendo-vue-pdf';
+import { Button } from '@progress/kendo-vue-buttons';
+import employees from './data';
+import {
+  TreeList,
+  filterBy,
+  extendDataItem,
+  mapTree,
+} from '@progress/kendo-vue-treelist';
+
+export default {
+  components: {
+    TreeList,
+    pdfexport: TreeListPDFExport,
+    KButton: Button,
+  },
+  data() {
+    return {
+      dataItems: [...employees],
+      filter: [],
+      filterable: true,
+      expanded: [1, 2, 32],
+      subItemsField: 'employees',
+      expandField: 'expanded',
+      columns: [
+        {
+          field: 'name',
+          title: 'Name',
+          width: '320px',
+          expandable: true,
+        },
+        {
+          field: 'hireDate',
+          title: 'Hire Date',
+          width: '280px',
+          format: '{0:d}',
+          filter: 'date',
+        },
+        {
+          field: 'timeInPosition',
+          title: 'Year(s) in Position',
+          width: '280px',
+          filter: 'numeric',
+        },
+        {
+          field: 'fullTime',
+          title: 'Full Time',
+          width: '190px',
+          filter: 'boolean',
+        },
+      ],
+      columnsToExport: [
+        { field: 'name' },
+        { field: 'hireDate', title: 'Hire Date' },
+      ],
+    };
+  },
+  computed: {
+    processedData() {
+      let data = this.dataItems;
+
+      let filteredData = filterBy(data, this.filter, this.subItemsField);
+      return this.addExpandField(filteredData);
+    },
+  },
+  methods: {
+    exportPDFWithComp: function () {
+      this.filterable = false;
+      const defaultColumns = this.columns;
+
+      this.columns = this.columnsToExport;
+      this.$refs.treeListPdfExport.save(
+        this.processedData,
+        this.exportFinished
+      );
+
+      this.columns = defaultColumns;
+    },
+    exportFinished() {
+      this.filterable = true;
+    },
+    onExpandChange(e) {
+      this.expanded = e.value
+        ? this.expanded.filter((id) => id !== e.dataItem.id)
+        : [...this.expanded, e.dataItem.id];
+    },
+    handleFilterChange(event) {
+      this.filter = event.filter;
+    },
+    addExpandField(dataTree) {
+      const expanded = this.expanded;
+      return mapTree(dataTree, this.subItemsField, (item) =>
+        extendDataItem(item, this.subItemsField, {
+          [this.expandField]: expanded.includes(item.id),
+        })
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treelist/reordering/data.js b/vue-options-api-demos/treelist/reordering/data.js
new file mode 100644
index 00000000..f66aec4d
--- /dev/null
+++ b/vue-options-api-demos/treelist/reordering/data.js
@@ -0,0 +1,1150 @@
+
+const employees = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2,
+        "employees": [
+            {
+                "id": 2,
+                "name": "Guy Wooten",
+                "reportsTo": 1,
+                "phone": "(438) 738-4935",
+                "extension": 1155,
+                "hireDate": new Date(2010, 3, 3),
+                "fullTime": true,
+                "position": "Chief Technical Officer",
+                "timeInPosition": 1,
+                "employees": [
+                    {
+                        "id": 32,
+                        "name": "Buffy Weber",
+                        "reportsTo": 2,
+                        "phone": "(699) 838-6121",
+                        "extension": 8933,
+                        "hireDate": new Date(2011, 7, 11),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 11,
+                                "name": "Hyacinth Hood",
+                                "reportsTo": 32,
+                                "phone": "(889) 345-2438",
+                                "extension": 8564,
+                                "hireDate": new Date(2014, 2, 3),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 60,
+                                        "name": "Akeem Carr",
+                                        "reportsTo": 11,
+                                        "phone": "(738) 136-2814",
+                                        "extension": 9353,
+                                        "hireDate": new Date(2011, 4, 21),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 78,
+                                        "name": "Rinah Simon",
+                                        "reportsTo": 11,
+                                        "phone": "(285) 912-5271",
+                                        "extension": 7795,
+                                        "hireDate": new Date(2012, 10, 11),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 42,
+                                "name": "Gage Daniels",
+                                "reportsTo": 32,
+                                "phone": "(107) 290-6260",
+                                "extension": 896,
+                                "hireDate": new Date(2013, 5, 16),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 5
+                            },
+                            {
+                                "id": 43,
+                                "name": "Constance Vazquez",
+                                "reportsTo": 32,
+                                "phone": "(800) 301-1978",
+                                "extension": 5141,
+                                "hireDate": new Date(2011, 6, 7),
+                                "fullTime": true,
+                                "position": "Director, Engineering",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 46,
+                                        "name": "Darrel Solis",
+                                        "reportsTo": 43,
+                                        "phone": "(327) 977-0216",
+                                        "extension": 7779,
+                                        "hireDate": new Date(2015, 4, 25),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 47,
+                                                "name": "Brian Yang",
+                                                "reportsTo": 46,
+                                                "phone": "(565) 146-5435",
+                                                "extension": 3885,
+                                                "hireDate": new Date(2012, 9, 27),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 50,
+                                                "name": "Lillian Bradshaw",
+                                                "reportsTo": 46,
+                                                "phone": "(323) 509-3479",
+                                                "extension": 5426,
+                                                "hireDate": new Date(2014, 5, 10),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 51,
+                                                "name": "Christian Palmer",
+                                                "reportsTo": 46,
+                                                "phone": "(490) 421-8718",
+                                                "extension": 3706,
+                                                "hireDate": new Date(2012, 12, 27),
+                                                "fullTime": false,
+                                                "position": "Technical Lead",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 55,
+                                                "name": "Summer Mosley",
+                                                "reportsTo": 46,
+                                                "phone": "(784) 962-2301",
+                                                "extension": 5492,
+                                                "hireDate": new Date(2010, 3, 2),
+                                                "fullTime": true,
+                                                "position": "QA Engineer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 56,
+                                                "name": "Barry Ayers",
+                                                "reportsTo": 46,
+                                                "phone": "(452) 373-9227",
+                                                "extension": 1308,
+                                                "hireDate": new Date(2011, 10, 11),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 59,
+                                                "name": "Keiko Espinoza",
+                                                "reportsTo": 46,
+                                                "phone": "(226) 600-5305",
+                                                "extension": 9363,
+                                                "hireDate": new Date(2011, 9, 18),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 61,
+                                                "name": "Candace Pickett",
+                                                "reportsTo": 46,
+                                                "phone": "(120) 117-7475",
+                                                "extension": 5178,
+                                                "hireDate": new Date(2010, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 63,
+                                        "name": "Mia Caldwell",
+                                        "reportsTo": 43,
+                                        "phone": "(848) 636-6470",
+                                        "extension": 6368,
+                                        "hireDate": new Date(2012, 10, 7),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 65,
+                                                "name": "Thomas Terry",
+                                                "reportsTo": 63,
+                                                "phone": "(764) 831-4248",
+                                                "extension": 3574,
+                                                "hireDate": new Date(2015, 6, 15),
+                                                "fullTime": false,
+                                                "position": "Senior Enterprise Support Officer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 67,
+                                                "name": "Ruth Downs",
+                                                "reportsTo": 63,
+                                                "phone": "(138) 991-1440",
+                                                "extension": 8067,
+                                                "hireDate": new Date(2013, 7, 13),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 70,
+                                                "name": "Yasir Wilder",
+                                                "reportsTo": 63,
+                                                "phone": "(759) 701-8665",
+                                                "extension": 8350,
+                                                "hireDate": new Date(2010, 11, 8),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 71,
+                                                "name": "Flavia Short",
+                                                "reportsTo": 63,
+                                                "phone": "(370) 133-9238",
+                                                "extension": 6390,
+                                                "hireDate": new Date(2013, 2, 21),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 74,
+                                                "name": "Aaron Roach",
+                                                "reportsTo": 63,
+                                                "phone": "(958) 717-9230",
+                                                "extension": 4899,
+                                                "hireDate": new Date(2011, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 75,
+                                                "name": "Eric Russell",
+                                                "reportsTo": 63,
+                                                "phone": "(516) 575-8505",
+                                                "extension": 2224,
+                                                "hireDate": new Date(2012, 10, 28),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 76,
+                                                "name": "Cheyenne Olson",
+                                                "reportsTo": 63,
+                                                "phone": "(241) 645-0257",
+                                                "extension": 9181,
+                                                "hireDate": new Date(2015, 5, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 77,
+                                                "name": "Shaine Avila",
+                                                "reportsTo": 63,
+                                                "phone": "(844) 435-1360",
+                                                "extension": 3374,
+                                                "hireDate": new Date(2010, 1, 31),
+                                                "fullTime": true,
+                                                "position": "UI Designer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 81,
+                                                "name": "Chantale Long",
+                                                "reportsTo": 63,
+                                                "phone": "(252) 419-6891",
+                                                "extension": 7868,
+                                                "hireDate": new Date(2010, 6, 17),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 83,
+                                                "name": "Dane Cruz",
+                                                "reportsTo": 63,
+                                                "phone": "(946) 701-6165",
+                                                "extension": 3828,
+                                                "hireDate": new Date(2014, 10, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 84,
+                                                "name": "Regan Patterson",
+                                                "reportsTo": 63,
+                                                "phone": "(265) 946-1765",
+                                                "extension": 6955,
+                                                "hireDate": new Date(2012, 3, 1),
+                                                "fullTime": true,
+                                                "position": "Technical Writer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 85,
+                                                "name": "Drew Mckay",
+                                                "reportsTo": 63,
+                                                "phone": "(327) 293-0162",
+                                                "extension": 6904,
+                                                "hireDate": new Date(2011, 3, 25),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 88,
+                                                "name": "Bevis Miller",
+                                                "reportsTo": 63,
+                                                "phone": "(525) 557-0169",
+                                                "extension": 6978,
+                                                "hireDate": new Date(2011, 4, 19),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 89,
+                                                "name": "Bruce Mccarty",
+                                                "reportsTo": 63,
+                                                "phone": "(936) 777-8730",
+                                                "extension": 6552,
+                                                "hireDate": new Date(2014, 3, 28),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 5
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 90,
+                                        "name": "Ocean Blair",
+                                        "reportsTo": 43,
+                                        "phone": "(343) 586-6614",
+                                        "extension": 1424,
+                                        "hireDate": new Date(2011, 4, 27),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 91,
+                                                "name": "Guinevere Osborn",
+                                                "reportsTo": 90,
+                                                "phone": "(424) 741-0006",
+                                                "extension": 3166,
+                                                "hireDate": new Date(2014, 11, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 92,
+                                                "name": "Olga Strong",
+                                                "reportsTo": 90,
+                                                "phone": "(949) 417-1168",
+                                                "extension": 4568,
+                                                "hireDate": new Date(2015, 5, 28),
+                                                "fullTime": true,
+                                                "position": "Graphic Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 93,
+                                                "name": "Robert Orr",
+                                                "reportsTo": 90,
+                                                "phone": "(977) 341-3721",
+                                                "extension": 9241,
+                                                "hireDate": new Date(2012, 8, 20),
+                                                "fullTime": false,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 95,
+                                                "name": "Odette Sears",
+                                                "reportsTo": 90,
+                                                "phone": "(264) 818-6576",
+                                                "extension": 1914,
+                                                "hireDate": new Date(2013, 7, 5),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 45,
+                                "name": "Zelda Medina",
+                                "reportsTo": 32,
+                                "phone": "(563) 359-6023",
+                                "extension": 2600,
+                                "hireDate": new Date(2012, 11, 6),
+                                "fullTime": true,
+                                "position": "QA Architect",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    },
+                    {
+                        "id": 52,
+                        "name": "Skyler Cleveland",
+                        "reportsTo": 2,
+                        "phone": "(217) 280-5300",
+                        "extension": 9655,
+                        "hireDate": new Date(2014, 11, 10),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 40,
+                                "name": "Karleigh Garza",
+                                "reportsTo": 52,
+                                "phone": "(370) 983-8796",
+                                "extension": 4044,
+                                "hireDate": new Date(2014, 3, 10),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 49,
+                                        "name": "Elmo Tyson",
+                                        "reportsTo": 40,
+                                        "phone": "(344) 496-9555",
+                                        "extension": 6950,
+                                        "hireDate": new Date(2014, 9, 18),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 72,
+                                        "name": "Stacey Lynn",
+                                        "reportsTo": 40,
+                                        "phone": "(140) 772-7509",
+                                        "extension": 8396,
+                                        "hireDate": new Date(2014, 7, 31),
+                                        "fullTime": false,
+                                        "position": "QA Engineer",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 80,
+                                                "name": "Meredith Parrish",
+                                                "reportsTo": 72,
+                                                "phone": "(714) 284-2408",
+                                                "extension": 7675,
+                                                "hireDate": new Date(2012, 11, 13),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 96,
+                                        "name": "Cassady Whitley",
+                                        "reportsTo": 40,
+                                        "phone": "(996) 587-8405",
+                                        "extension": 780,
+                                        "hireDate": new Date(2013, 5, 7),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 5
+                                    },
+                                    {
+                                        "id": 97,
+                                        "name": "Haviva Campbell",
+                                        "reportsTo": 40,
+                                        "phone": "(263) 887-4689",
+                                        "extension": 2808,
+                                        "hireDate": new Date(2013, 3, 5),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 98,
+                                        "name": "Cameron Ayers",
+                                        "reportsTo": 40,
+                                        "phone": "(470) 709-8030",
+                                        "extension": 2893,
+                                        "hireDate": new Date(2013, 8, 28),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 99,
+                                        "name": "Martha Sargent",
+                                        "reportsTo": 40,
+                                        "phone": "(587) 812-4418",
+                                        "extension": 5099,
+                                        "hireDate": new Date(2014, 2, 27),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 100,
+                                        "name": "Darrel Kinney",
+                                        "reportsTo": 40,
+                                        "phone": "(888) 483-9606",
+                                        "extension": 4779,
+                                        "hireDate": new Date(2014, 3, 24),
+                                        "fullTime": false,
+                                        "position": "Graphic Designer",
+                                        "timeInPosition": 1
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 54,
+                                "name": "Kuame Frye",
+                                "reportsTo": 52,
+                                "phone": "(360) 721-5886",
+                                "extension": 2730,
+                                "hireDate": new Date(2010, 11, 17),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 64,
+                                        "name": "Ori Wynn",
+                                        "reportsTo": 54,
+                                        "phone": "(366) 342-0166",
+                                        "extension": 7252,
+                                        "hireDate": new Date(2015, 6, 21),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 0,
+                                        "employees": [
+                                            {
+                                                "id": 6,
+                                                "name": "Moses Duncan",
+                                                "reportsTo": 64,
+                                                "phone": "(421) 611-4814",
+                                                "extension": 669,
+                                                "hireDate": new Date(2010, 5, 24),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 12,
+                                                "name": "Jamalia Wallace",
+                                                "reportsTo": 64,
+                                                "phone": "(611) 391-8016",
+                                                "extension": 1952,
+                                                "hireDate": new Date(2011, 9, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Designer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 62,
+                                                "name": "Palmer Gregory",
+                                                "reportsTo": 64,
+                                                "phone": "(360) 430-2505",
+                                                "extension": 4337,
+                                                "hireDate": new Date(2014, 8, 30),
+                                                "fullTime": true,
+                                                "position": "Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 68,
+                                                "name": "Mallory Gilliam",
+                                                "reportsTo": 64,
+                                                "phone": "(878) 423-2971",
+                                                "extension": 1341,
+                                                "hireDate": new Date(2014, 7, 24),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 73,
+                                                "name": "Ima Hughes",
+                                                "reportsTo": 64,
+                                                "phone": "(905) 485-8001",
+                                                "extension": 1273,
+                                                "hireDate": new Date(2013, 6, 3),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 79,
+                                                "name": "Duncan Mathews",
+                                                "reportsTo": 64,
+                                                "phone": "(790) 971-9709",
+                                                "extension": 4573,
+                                                "hireDate": new Date(2011, 8, 21),
+                                                "fullTime": false,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 69,
+                                "name": "Sierra Beasley",
+                                "reportsTo": 52,
+                                "phone": "(271) 953-1968",
+                                "extension": 3324,
+                                "hireDate": new Date(2011, 4, 2),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 3,
+                                "employees": [
+                                    {
+                                        "id": 38,
+                                        "name": "Elton Tucker",
+                                        "reportsTo": 69,
+                                        "phone": "(988) 930-9331",
+                                        "extension": 9216,
+                                        "hireDate": new Date(2015, 6, 4),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 1
+                                    },
+                                    {
+                                        "id": 39,
+                                        "name": "Iona Brennan",
+                                        "reportsTo": 69,
+                                        "phone": "(356) 563-0600",
+                                        "extension": 5634,
+                                        "hireDate": new Date(2010, 9, 23),
+                                        "fullTime": true,
+                                        "position": "Junior Support Officer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 53,
+                                        "name": "Paul Campos",
+                                        "reportsTo": 69,
+                                        "phone": "(899) 205-1689",
+                                        "extension": 8586,
+                                        "hireDate": new Date(2011, 3, 17),
+                                        "fullTime": true,
+                                        "position": "Interaction Designer",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 66,
+                                                "name": "Gloria Freeman",
+                                                "reportsTo": 53,
+                                                "phone": "(344) 950-9168",
+                                                "extension": 4738,
+                                                "hireDate": new Date(2013, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Junior Interaction Designer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 57,
+                                        "name": "Alyssa Hansen",
+                                        "reportsTo": 69,
+                                        "phone": "(548) 925-4799",
+                                        "extension": 4716,
+                                        "hireDate": new Date(2011, 1, 19),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 82,
+                                        "name": "Yael Walters",
+                                        "reportsTo": 69,
+                                        "phone": "(311) 489-8191",
+                                        "extension": 6520,
+                                        "hireDate": new Date(2013, 7, 4),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 87,
+                                        "name": "Dahlia Hunt",
+                                        "reportsTo": 69,
+                                        "phone": "(720) 339-5202",
+                                        "extension": 3690,
+                                        "hireDate": new Date(2011, 3, 26),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 94,
+                                        "name": "Adria Stanley",
+                                        "reportsTo": 69,
+                                        "phone": "(536) 357-6391",
+                                        "extension": 3374,
+                                        "hireDate": new Date(2014, 7, 26),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "Priscilla Frank",
+                "reportsTo": 1,
+                "phone": "(278) 927-2684",
+                "extension": 4183,
+                "hireDate": new Date(2014, 11, 30),
+                "fullTime": true,
+                "position": "Chief Product Officer",
+                "timeInPosition": 2,
+                "employees": [
+                    {
+                        "id": 4,
+                        "name": "Ursula Holmes",
+                        "reportsTo": 3,
+                        "phone": "(302) 760-2034",
+                        "extension": 2226,
+                        "hireDate": new Date(2011, 6, 6),
+                        "fullTime": true,
+                        "position": "EVP, Product Strategy",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 24,
+                        "name": "Melvin Carrillo",
+                        "reportsTo": 3,
+                        "phone": "(348) 933-5167",
+                        "extension": 2482,
+                        "hireDate": new Date(2014, 7, 21),
+                        "fullTime": true,
+                        "position": "Director, Developer Relations",
+                        "timeInPosition": 6,
+                        "employees": [
+                            {
+                                "id": 29,
+                                "name": "Martha Chavez",
+                                "reportsTo": 24,
+                                "phone": "(860) 754-3464",
+                                "extension": 4531,
+                                "hireDate": new Date(2013, 3, 12),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 30,
+                                "name": "Oren Fox",
+                                "reportsTo": 24,
+                                "phone": "(572) 414-3299",
+                                "extension": 4849,
+                                "hireDate": new Date(2013, 5, 14),
+                                "fullTime": false,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 41,
+                                "name": "Amos Barr",
+                                "reportsTo": 24,
+                                "phone": "(470) 381-3718",
+                                "extension": 7643,
+                                "hireDate": new Date(2010, 3, 9),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "Anika Vega",
+                "reportsTo": 1,
+                "phone": "(910) 714-1802",
+                "extension": 6353,
+                "hireDate": new Date(2010, 2, 25),
+                "fullTime": true,
+                "position": "Chief Process Officer",
+                "timeInPosition": 5,
+                "employees": [
+                    {
+                        "id": 10,
+                        "name": "Vernon Ballard",
+                        "reportsTo": 5,
+                        "phone": "(702) 185-8890",
+                        "extension": 9242,
+                        "hireDate": new Date(2015, 6, 26),
+                        "fullTime": true,
+                        "position": "Director Facilities",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 16,
+                                "name": "Ali Guy",
+                                "reportsTo": 10,
+                                "phone": "(429) 912-6578",
+                                "extension": 2225,
+                                "hireDate": new Date(2014, 6, 29),
+                                "fullTime": true,
+                                "position": "Operations Manager",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 23,
+                                        "name": "Bruce Reilly",
+                                        "reportsTo": 16,
+                                        "phone": "(995) 243-7302",
+                                        "extension": 4815,
+                                        "hireDate": new Date(2015, 4, 1),
+                                        "fullTime": true,
+                                        "position": "Head of Security",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 26,
+                                                "name": "Rowan Morin",
+                                                "reportsTo": 23,
+                                                "phone": "(792) 141-4374",
+                                                "extension": 1844,
+                                                "hireDate": new Date(2015, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Building Security",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 44,
+                                                "name": "Benedict Soto",
+                                                "reportsTo": 23,
+                                                "phone": "(822) 282-5991",
+                                                "extension": 6422,
+                                                "hireDate": new Date(2012, 6, 1),
+                                                "fullTime": false,
+                                                "position": "Building Security",
+                                                "timeInPosition": 4
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 48,
+                                        "name": "Maryam Rios",
+                                        "reportsTo": 16,
+                                        "phone": "(673) 764-6720",
+                                        "extension": 531,
+                                        "hireDate": new Date(2014, 3, 3),
+                                        "fullTime": true,
+                                        "position": "Team Lead, Personal Assistants",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 58,
+                                                "name": "Rose Mcintyre",
+                                                "reportsTo": 48,
+                                                "phone": "(771) 615-4590",
+                                                "extension": 7094,
+                                                "hireDate": new Date(2015, 6, 30),
+                                                "fullTime": false,
+                                                "position": "Personal Assistant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "Nevada Hart",
+                "reportsTo": 1,
+                "phone": "(254) 220-1576",
+                "extension": 6649,
+                "hireDate": new Date(2015, 8, 17),
+                "fullTime": true,
+                "position": "Chief Financial Officer",
+                "timeInPosition": 6,
+                "employees": [
+                    {
+                        "id": 14,
+                        "name": "Zena Sanford",
+                        "reportsTo": 7,
+                        "phone": "(437) 568-8160",
+                        "extension": 4452,
+                        "hireDate": new Date(2010, 11, 30),
+                        "fullTime": true,
+                        "position": "VP, Finance",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 15,
+                        "name": "Quinlan Howe",
+                        "reportsTo": 7,
+                        "phone": "(464) 334-9748",
+                        "extension": 8722,
+                        "hireDate": new Date(2011, 6, 9),
+                        "fullTime": false,
+                        "position": "Senior Director, Finance",
+                        "timeInPosition": 0,
+                        "employees": [
+                            {
+                                "id": 17,
+                                "name": "Indira Lopez",
+                                "reportsTo": 15,
+                                "phone": "(301) 368-0938",
+                                "extension": 8027,
+                                "hireDate": new Date(2013, 8, 18),
+                                "fullTime": true,
+                                "position": "ERP Team Lead",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 18,
+                                        "name": "Lareina Lara",
+                                        "reportsTo": 17,
+                                        "phone": "(233) 457-7482",
+                                        "extension": 1996,
+                                        "hireDate": new Date(2010, 4, 30),
+                                        "fullTime": true,
+                                        "position": "ERP Solutions Consultant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 19,
+                                        "name": "Maxwell Wise",
+                                        "reportsTo": 17,
+                                        "phone": "(570) 494-2531",
+                                        "extension": 9865,
+                                        "hireDate": new Date(2012, 5, 19),
+                                        "fullTime": true,
+                                        "position": "Systems Engineer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 20,
+                                "name": "Hunter Mcbride",
+                                "reportsTo": 15,
+                                "phone": "(409) 442-7016",
+                                "extension": 4284,
+                                "hireDate": new Date(2012, 10, 20),
+                                "fullTime": true,
+                                "position": "Senior Director, Tax",
+                                "timeInPosition": 3
+                            },
+                            {
+                                "id": 21,
+                                "name": "Jana Serrano",
+                                "reportsTo": 15,
+                                "phone": "(910) 718-4620",
+                                "extension": 6970,
+                                "hireDate": new Date(2010, 4, 2),
+                                "fullTime": true,
+                                "position": "Financial Planning & Analysis Manager",
+                                "timeInPosition": 2
+                            },
+                            {
+                                "id": 22,
+                                "name": "Zachery Shelton",
+                                "reportsTo": 15,
+                                "phone": "(310) 240-8675",
+                                "extension": 4527,
+                                "hireDate": new Date(2011, 11, 23),
+                                "fullTime": false,
+                                "position": "Corporate Finance Controller",
+                                "timeInPosition": 6,
+                                "employees": [
+                                    {
+                                        "id": 28,
+                                        "name": "Cullen Freeman",
+                                        "reportsTo": 22,
+                                        "phone": "(136) 554-8814",
+                                        "extension": 9861,
+                                        "hireDate": new Date(2014, 3, 15),
+                                        "fullTime": true,
+                                        "position": "Treasurer Accountant",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 31,
+                                        "name": "Quinn Dean",
+                                        "reportsTo": 22,
+                                        "phone": "(152) 613-3507",
+                                        "extension": 6621,
+                                        "hireDate": new Date(2015, 1, 29),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 34,
+                                        "name": "Samantha Brady",
+                                        "reportsTo": 22,
+                                        "phone": "(206) 398-4328",
+                                        "extension": 1157,
+                                        "hireDate": new Date(2011, 2, 13),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 35,
+                                                "name": "Tamara Green",
+                                                "reportsTo": 34,
+                                                "phone": "(219) 248-2789",
+                                                "extension": 4880,
+                                                "hireDate": new Date(2014, 2, 4),
+                                                "fullTime": true,
+                                                "position": "Junior Accountant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 36,
+                                        "name": "Olympia Coleman",
+                                        "reportsTo": 22,
+                                        "phone": "(944) 853-6383",
+                                        "extension": 2136,
+                                        "hireDate": new Date(2013, 7, 31),
+                                        "fullTime": true,
+                                        "position": "Collections Manager",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 37,
+                                        "name": "Breanna Goodwin",
+                                        "reportsTo": 22,
+                                        "phone": "(379) 988-9630",
+                                        "extension": 5898,
+                                        "hireDate": new Date(2010, 5, 23),
+                                        "fullTime": false,
+                                        "position": "Payroll Specialist",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 27,
+                                "name": "Curran Travis",
+                                "reportsTo": 15,
+                                "phone": "(438) 135-8033",
+                                "extension": 3841,
+                                "hireDate": new Date(2011, 6, 13),
+                                "fullTime": true,
+                                "position": "Finance Controller",
+                                "timeInPosition": 5
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "Hunter Fry",
+                "reportsTo": 1,
+                "phone": "(766) 358-9858",
+                "extension": 3741,
+                "hireDate": new Date(2011, 2, 12),
+                "fullTime": false,
+                "position": "General Counsel",
+                "timeInPosition": 3,
+                "employees": [
+                    {
+                        "id": 9,
+                        "name": "Kuame Carrillo",
+                        "reportsTo": 8,
+                        "phone": "(192) 383-1305",
+                        "extension": 9228,
+                        "hireDate": new Date(2011, 2, 22),
+                        "fullTime": true,
+                        "position": "Associate General Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 13,
+                        "name": "Stacy Todd",
+                        "reportsTo": 8,
+                        "phone": "(925) 286-3327",
+                        "extension": 8565,
+                        "hireDate": new Date(2014, 7, 5),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 33,
+                        "name": "Valentine Wyatt",
+                        "reportsTo": 8,
+                        "phone": "(165) 166-6205",
+                        "extension": 3588,
+                        "hireDate": new Date(2015, 5, 21),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 5
+                    },
+                    {
+                        "id": 86,
+                        "name": "Daniel Mccarthy",
+                        "reportsTo": 8,
+                        "phone": "(624) 483-6206",
+                        "extension": 9112,
+                        "hireDate": new Date(2013, 12, 3),
+                        "fullTime": false,
+                        "position": "Staff Attorney",
+                        "timeInPosition": 0
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default employees;
diff --git a/vue-options-api-demos/treelist/reordering/main.js b/vue-options-api-demos/treelist/reordering/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/reordering/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/reordering/main.vue b/vue-options-api-demos/treelist/reordering/main.vue
new file mode 100644
index 00000000..359914d3
--- /dev/null
+++ b/vue-options-api-demos/treelist/reordering/main.vue
@@ -0,0 +1,94 @@
+<template>
+  <div>
+      <TreeList
+        :style="treeListStyles"
+        :reorderable="true"
+        :data-items="tree"
+        :expand-field="expandField"
+        :sub-items-field="subItemsField"
+        @columnreorder="onColumnReorder"
+        @expandchange="onExpandChange"
+        :columns="columns"
+      />
+      </div>
+  </template>
+  
+  <script>
+  import employees from "./data";
+  import {
+    TreeList,
+    mapTree,
+    extendDataItem
+      } from '@progress/kendo-vue-treelist';
+  
+  export default {
+      components: {
+        TreeList
+      },
+      data() {
+        return {
+          dataItems: [...employees],
+          subItemsField: 'employees',
+          expandField: 'expanded',
+          expanded: [1, 2, 32],
+          columns: [
+            {
+              field: "name",
+              title: "Name",
+              width: "310px",
+              expandable: true,
+            },
+            {
+              field: "position",
+              title: "Position",
+              width: "260px",
+            },
+            {
+              field: "hireDate",
+              title: "Hire Date",
+              width: "160px",
+              format: "{0:d}",
+            },
+            {
+              field: "timeInPosition",
+              title: "Year(s) in Position",
+              width: "160px",
+            },
+            {
+              field: "fullTime",
+              title: "Full Time",
+              width: "150px",
+            },
+          ]
+        };
+      },
+      computed: {
+        tree() {
+          return mapTree(this.dataItems, this.subItemsField, (item) =>
+              extendDataItem(item, this.subItemsField, {
+                [this.expandField]: this.expanded.includes(item.id),
+              })
+            );
+        },
+        treeListStyles() {
+          return {
+            maxHeight: "510px",
+            overflow: "auto",
+          };
+        }
+      },
+      methods: {
+          onExpandChange (event) {
+            this.expanded = event.value
+                ? this.expanded.filter((id) => id !== event.dataItem.id)
+                : [...this.expanded, event.dataItem.id];
+          },
+          onColumnReorder (event) {
+           this.columns = event.columns;
+          }
+      }
+  };
+  
+  </script>
+  
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/treelist/resizing/data.js b/vue-options-api-demos/treelist/resizing/data.js
new file mode 100644
index 00000000..f66aec4d
--- /dev/null
+++ b/vue-options-api-demos/treelist/resizing/data.js
@@ -0,0 +1,1150 @@
+
+const employees = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2,
+        "employees": [
+            {
+                "id": 2,
+                "name": "Guy Wooten",
+                "reportsTo": 1,
+                "phone": "(438) 738-4935",
+                "extension": 1155,
+                "hireDate": new Date(2010, 3, 3),
+                "fullTime": true,
+                "position": "Chief Technical Officer",
+                "timeInPosition": 1,
+                "employees": [
+                    {
+                        "id": 32,
+                        "name": "Buffy Weber",
+                        "reportsTo": 2,
+                        "phone": "(699) 838-6121",
+                        "extension": 8933,
+                        "hireDate": new Date(2011, 7, 11),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 11,
+                                "name": "Hyacinth Hood",
+                                "reportsTo": 32,
+                                "phone": "(889) 345-2438",
+                                "extension": 8564,
+                                "hireDate": new Date(2014, 2, 3),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 60,
+                                        "name": "Akeem Carr",
+                                        "reportsTo": 11,
+                                        "phone": "(738) 136-2814",
+                                        "extension": 9353,
+                                        "hireDate": new Date(2011, 4, 21),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 78,
+                                        "name": "Rinah Simon",
+                                        "reportsTo": 11,
+                                        "phone": "(285) 912-5271",
+                                        "extension": 7795,
+                                        "hireDate": new Date(2012, 10, 11),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 42,
+                                "name": "Gage Daniels",
+                                "reportsTo": 32,
+                                "phone": "(107) 290-6260",
+                                "extension": 896,
+                                "hireDate": new Date(2013, 5, 16),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 5
+                            },
+                            {
+                                "id": 43,
+                                "name": "Constance Vazquez",
+                                "reportsTo": 32,
+                                "phone": "(800) 301-1978",
+                                "extension": 5141,
+                                "hireDate": new Date(2011, 6, 7),
+                                "fullTime": true,
+                                "position": "Director, Engineering",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 46,
+                                        "name": "Darrel Solis",
+                                        "reportsTo": 43,
+                                        "phone": "(327) 977-0216",
+                                        "extension": 7779,
+                                        "hireDate": new Date(2015, 4, 25),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 47,
+                                                "name": "Brian Yang",
+                                                "reportsTo": 46,
+                                                "phone": "(565) 146-5435",
+                                                "extension": 3885,
+                                                "hireDate": new Date(2012, 9, 27),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 50,
+                                                "name": "Lillian Bradshaw",
+                                                "reportsTo": 46,
+                                                "phone": "(323) 509-3479",
+                                                "extension": 5426,
+                                                "hireDate": new Date(2014, 5, 10),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 51,
+                                                "name": "Christian Palmer",
+                                                "reportsTo": 46,
+                                                "phone": "(490) 421-8718",
+                                                "extension": 3706,
+                                                "hireDate": new Date(2012, 12, 27),
+                                                "fullTime": false,
+                                                "position": "Technical Lead",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 55,
+                                                "name": "Summer Mosley",
+                                                "reportsTo": 46,
+                                                "phone": "(784) 962-2301",
+                                                "extension": 5492,
+                                                "hireDate": new Date(2010, 3, 2),
+                                                "fullTime": true,
+                                                "position": "QA Engineer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 56,
+                                                "name": "Barry Ayers",
+                                                "reportsTo": 46,
+                                                "phone": "(452) 373-9227",
+                                                "extension": 1308,
+                                                "hireDate": new Date(2011, 10, 11),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 59,
+                                                "name": "Keiko Espinoza",
+                                                "reportsTo": 46,
+                                                "phone": "(226) 600-5305",
+                                                "extension": 9363,
+                                                "hireDate": new Date(2011, 9, 18),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 61,
+                                                "name": "Candace Pickett",
+                                                "reportsTo": 46,
+                                                "phone": "(120) 117-7475",
+                                                "extension": 5178,
+                                                "hireDate": new Date(2010, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 63,
+                                        "name": "Mia Caldwell",
+                                        "reportsTo": 43,
+                                        "phone": "(848) 636-6470",
+                                        "extension": 6368,
+                                        "hireDate": new Date(2012, 10, 7),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 65,
+                                                "name": "Thomas Terry",
+                                                "reportsTo": 63,
+                                                "phone": "(764) 831-4248",
+                                                "extension": 3574,
+                                                "hireDate": new Date(2015, 6, 15),
+                                                "fullTime": false,
+                                                "position": "Senior Enterprise Support Officer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 67,
+                                                "name": "Ruth Downs",
+                                                "reportsTo": 63,
+                                                "phone": "(138) 991-1440",
+                                                "extension": 8067,
+                                                "hireDate": new Date(2013, 7, 13),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 70,
+                                                "name": "Yasir Wilder",
+                                                "reportsTo": 63,
+                                                "phone": "(759) 701-8665",
+                                                "extension": 8350,
+                                                "hireDate": new Date(2010, 11, 8),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 71,
+                                                "name": "Flavia Short",
+                                                "reportsTo": 63,
+                                                "phone": "(370) 133-9238",
+                                                "extension": 6390,
+                                                "hireDate": new Date(2013, 2, 21),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 74,
+                                                "name": "Aaron Roach",
+                                                "reportsTo": 63,
+                                                "phone": "(958) 717-9230",
+                                                "extension": 4899,
+                                                "hireDate": new Date(2011, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 75,
+                                                "name": "Eric Russell",
+                                                "reportsTo": 63,
+                                                "phone": "(516) 575-8505",
+                                                "extension": 2224,
+                                                "hireDate": new Date(2012, 10, 28),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 76,
+                                                "name": "Cheyenne Olson",
+                                                "reportsTo": 63,
+                                                "phone": "(241) 645-0257",
+                                                "extension": 9181,
+                                                "hireDate": new Date(2015, 5, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 77,
+                                                "name": "Shaine Avila",
+                                                "reportsTo": 63,
+                                                "phone": "(844) 435-1360",
+                                                "extension": 3374,
+                                                "hireDate": new Date(2010, 1, 31),
+                                                "fullTime": true,
+                                                "position": "UI Designer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 81,
+                                                "name": "Chantale Long",
+                                                "reportsTo": 63,
+                                                "phone": "(252) 419-6891",
+                                                "extension": 7868,
+                                                "hireDate": new Date(2010, 6, 17),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 83,
+                                                "name": "Dane Cruz",
+                                                "reportsTo": 63,
+                                                "phone": "(946) 701-6165",
+                                                "extension": 3828,
+                                                "hireDate": new Date(2014, 10, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 84,
+                                                "name": "Regan Patterson",
+                                                "reportsTo": 63,
+                                                "phone": "(265) 946-1765",
+                                                "extension": 6955,
+                                                "hireDate": new Date(2012, 3, 1),
+                                                "fullTime": true,
+                                                "position": "Technical Writer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 85,
+                                                "name": "Drew Mckay",
+                                                "reportsTo": 63,
+                                                "phone": "(327) 293-0162",
+                                                "extension": 6904,
+                                                "hireDate": new Date(2011, 3, 25),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 88,
+                                                "name": "Bevis Miller",
+                                                "reportsTo": 63,
+                                                "phone": "(525) 557-0169",
+                                                "extension": 6978,
+                                                "hireDate": new Date(2011, 4, 19),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 89,
+                                                "name": "Bruce Mccarty",
+                                                "reportsTo": 63,
+                                                "phone": "(936) 777-8730",
+                                                "extension": 6552,
+                                                "hireDate": new Date(2014, 3, 28),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 5
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 90,
+                                        "name": "Ocean Blair",
+                                        "reportsTo": 43,
+                                        "phone": "(343) 586-6614",
+                                        "extension": 1424,
+                                        "hireDate": new Date(2011, 4, 27),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 91,
+                                                "name": "Guinevere Osborn",
+                                                "reportsTo": 90,
+                                                "phone": "(424) 741-0006",
+                                                "extension": 3166,
+                                                "hireDate": new Date(2014, 11, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 92,
+                                                "name": "Olga Strong",
+                                                "reportsTo": 90,
+                                                "phone": "(949) 417-1168",
+                                                "extension": 4568,
+                                                "hireDate": new Date(2015, 5, 28),
+                                                "fullTime": true,
+                                                "position": "Graphic Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 93,
+                                                "name": "Robert Orr",
+                                                "reportsTo": 90,
+                                                "phone": "(977) 341-3721",
+                                                "extension": 9241,
+                                                "hireDate": new Date(2012, 8, 20),
+                                                "fullTime": false,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 95,
+                                                "name": "Odette Sears",
+                                                "reportsTo": 90,
+                                                "phone": "(264) 818-6576",
+                                                "extension": 1914,
+                                                "hireDate": new Date(2013, 7, 5),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 45,
+                                "name": "Zelda Medina",
+                                "reportsTo": 32,
+                                "phone": "(563) 359-6023",
+                                "extension": 2600,
+                                "hireDate": new Date(2012, 11, 6),
+                                "fullTime": true,
+                                "position": "QA Architect",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    },
+                    {
+                        "id": 52,
+                        "name": "Skyler Cleveland",
+                        "reportsTo": 2,
+                        "phone": "(217) 280-5300",
+                        "extension": 9655,
+                        "hireDate": new Date(2014, 11, 10),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 40,
+                                "name": "Karleigh Garza",
+                                "reportsTo": 52,
+                                "phone": "(370) 983-8796",
+                                "extension": 4044,
+                                "hireDate": new Date(2014, 3, 10),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 49,
+                                        "name": "Elmo Tyson",
+                                        "reportsTo": 40,
+                                        "phone": "(344) 496-9555",
+                                        "extension": 6950,
+                                        "hireDate": new Date(2014, 9, 18),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 72,
+                                        "name": "Stacey Lynn",
+                                        "reportsTo": 40,
+                                        "phone": "(140) 772-7509",
+                                        "extension": 8396,
+                                        "hireDate": new Date(2014, 7, 31),
+                                        "fullTime": false,
+                                        "position": "QA Engineer",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 80,
+                                                "name": "Meredith Parrish",
+                                                "reportsTo": 72,
+                                                "phone": "(714) 284-2408",
+                                                "extension": 7675,
+                                                "hireDate": new Date(2012, 11, 13),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 96,
+                                        "name": "Cassady Whitley",
+                                        "reportsTo": 40,
+                                        "phone": "(996) 587-8405",
+                                        "extension": 780,
+                                        "hireDate": new Date(2013, 5, 7),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 5
+                                    },
+                                    {
+                                        "id": 97,
+                                        "name": "Haviva Campbell",
+                                        "reportsTo": 40,
+                                        "phone": "(263) 887-4689",
+                                        "extension": 2808,
+                                        "hireDate": new Date(2013, 3, 5),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 98,
+                                        "name": "Cameron Ayers",
+                                        "reportsTo": 40,
+                                        "phone": "(470) 709-8030",
+                                        "extension": 2893,
+                                        "hireDate": new Date(2013, 8, 28),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 99,
+                                        "name": "Martha Sargent",
+                                        "reportsTo": 40,
+                                        "phone": "(587) 812-4418",
+                                        "extension": 5099,
+                                        "hireDate": new Date(2014, 2, 27),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 100,
+                                        "name": "Darrel Kinney",
+                                        "reportsTo": 40,
+                                        "phone": "(888) 483-9606",
+                                        "extension": 4779,
+                                        "hireDate": new Date(2014, 3, 24),
+                                        "fullTime": false,
+                                        "position": "Graphic Designer",
+                                        "timeInPosition": 1
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 54,
+                                "name": "Kuame Frye",
+                                "reportsTo": 52,
+                                "phone": "(360) 721-5886",
+                                "extension": 2730,
+                                "hireDate": new Date(2010, 11, 17),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 64,
+                                        "name": "Ori Wynn",
+                                        "reportsTo": 54,
+                                        "phone": "(366) 342-0166",
+                                        "extension": 7252,
+                                        "hireDate": new Date(2015, 6, 21),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 0,
+                                        "employees": [
+                                            {
+                                                "id": 6,
+                                                "name": "Moses Duncan",
+                                                "reportsTo": 64,
+                                                "phone": "(421) 611-4814",
+                                                "extension": 669,
+                                                "hireDate": new Date(2010, 5, 24),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 12,
+                                                "name": "Jamalia Wallace",
+                                                "reportsTo": 64,
+                                                "phone": "(611) 391-8016",
+                                                "extension": 1952,
+                                                "hireDate": new Date(2011, 9, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Designer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 62,
+                                                "name": "Palmer Gregory",
+                                                "reportsTo": 64,
+                                                "phone": "(360) 430-2505",
+                                                "extension": 4337,
+                                                "hireDate": new Date(2014, 8, 30),
+                                                "fullTime": true,
+                                                "position": "Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 68,
+                                                "name": "Mallory Gilliam",
+                                                "reportsTo": 64,
+                                                "phone": "(878) 423-2971",
+                                                "extension": 1341,
+                                                "hireDate": new Date(2014, 7, 24),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 73,
+                                                "name": "Ima Hughes",
+                                                "reportsTo": 64,
+                                                "phone": "(905) 485-8001",
+                                                "extension": 1273,
+                                                "hireDate": new Date(2013, 6, 3),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 79,
+                                                "name": "Duncan Mathews",
+                                                "reportsTo": 64,
+                                                "phone": "(790) 971-9709",
+                                                "extension": 4573,
+                                                "hireDate": new Date(2011, 8, 21),
+                                                "fullTime": false,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 69,
+                                "name": "Sierra Beasley",
+                                "reportsTo": 52,
+                                "phone": "(271) 953-1968",
+                                "extension": 3324,
+                                "hireDate": new Date(2011, 4, 2),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 3,
+                                "employees": [
+                                    {
+                                        "id": 38,
+                                        "name": "Elton Tucker",
+                                        "reportsTo": 69,
+                                        "phone": "(988) 930-9331",
+                                        "extension": 9216,
+                                        "hireDate": new Date(2015, 6, 4),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 1
+                                    },
+                                    {
+                                        "id": 39,
+                                        "name": "Iona Brennan",
+                                        "reportsTo": 69,
+                                        "phone": "(356) 563-0600",
+                                        "extension": 5634,
+                                        "hireDate": new Date(2010, 9, 23),
+                                        "fullTime": true,
+                                        "position": "Junior Support Officer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 53,
+                                        "name": "Paul Campos",
+                                        "reportsTo": 69,
+                                        "phone": "(899) 205-1689",
+                                        "extension": 8586,
+                                        "hireDate": new Date(2011, 3, 17),
+                                        "fullTime": true,
+                                        "position": "Interaction Designer",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 66,
+                                                "name": "Gloria Freeman",
+                                                "reportsTo": 53,
+                                                "phone": "(344) 950-9168",
+                                                "extension": 4738,
+                                                "hireDate": new Date(2013, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Junior Interaction Designer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 57,
+                                        "name": "Alyssa Hansen",
+                                        "reportsTo": 69,
+                                        "phone": "(548) 925-4799",
+                                        "extension": 4716,
+                                        "hireDate": new Date(2011, 1, 19),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 82,
+                                        "name": "Yael Walters",
+                                        "reportsTo": 69,
+                                        "phone": "(311) 489-8191",
+                                        "extension": 6520,
+                                        "hireDate": new Date(2013, 7, 4),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 87,
+                                        "name": "Dahlia Hunt",
+                                        "reportsTo": 69,
+                                        "phone": "(720) 339-5202",
+                                        "extension": 3690,
+                                        "hireDate": new Date(2011, 3, 26),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 94,
+                                        "name": "Adria Stanley",
+                                        "reportsTo": 69,
+                                        "phone": "(536) 357-6391",
+                                        "extension": 3374,
+                                        "hireDate": new Date(2014, 7, 26),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "Priscilla Frank",
+                "reportsTo": 1,
+                "phone": "(278) 927-2684",
+                "extension": 4183,
+                "hireDate": new Date(2014, 11, 30),
+                "fullTime": true,
+                "position": "Chief Product Officer",
+                "timeInPosition": 2,
+                "employees": [
+                    {
+                        "id": 4,
+                        "name": "Ursula Holmes",
+                        "reportsTo": 3,
+                        "phone": "(302) 760-2034",
+                        "extension": 2226,
+                        "hireDate": new Date(2011, 6, 6),
+                        "fullTime": true,
+                        "position": "EVP, Product Strategy",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 24,
+                        "name": "Melvin Carrillo",
+                        "reportsTo": 3,
+                        "phone": "(348) 933-5167",
+                        "extension": 2482,
+                        "hireDate": new Date(2014, 7, 21),
+                        "fullTime": true,
+                        "position": "Director, Developer Relations",
+                        "timeInPosition": 6,
+                        "employees": [
+                            {
+                                "id": 29,
+                                "name": "Martha Chavez",
+                                "reportsTo": 24,
+                                "phone": "(860) 754-3464",
+                                "extension": 4531,
+                                "hireDate": new Date(2013, 3, 12),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 30,
+                                "name": "Oren Fox",
+                                "reportsTo": 24,
+                                "phone": "(572) 414-3299",
+                                "extension": 4849,
+                                "hireDate": new Date(2013, 5, 14),
+                                "fullTime": false,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 41,
+                                "name": "Amos Barr",
+                                "reportsTo": 24,
+                                "phone": "(470) 381-3718",
+                                "extension": 7643,
+                                "hireDate": new Date(2010, 3, 9),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "Anika Vega",
+                "reportsTo": 1,
+                "phone": "(910) 714-1802",
+                "extension": 6353,
+                "hireDate": new Date(2010, 2, 25),
+                "fullTime": true,
+                "position": "Chief Process Officer",
+                "timeInPosition": 5,
+                "employees": [
+                    {
+                        "id": 10,
+                        "name": "Vernon Ballard",
+                        "reportsTo": 5,
+                        "phone": "(702) 185-8890",
+                        "extension": 9242,
+                        "hireDate": new Date(2015, 6, 26),
+                        "fullTime": true,
+                        "position": "Director Facilities",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 16,
+                                "name": "Ali Guy",
+                                "reportsTo": 10,
+                                "phone": "(429) 912-6578",
+                                "extension": 2225,
+                                "hireDate": new Date(2014, 6, 29),
+                                "fullTime": true,
+                                "position": "Operations Manager",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 23,
+                                        "name": "Bruce Reilly",
+                                        "reportsTo": 16,
+                                        "phone": "(995) 243-7302",
+                                        "extension": 4815,
+                                        "hireDate": new Date(2015, 4, 1),
+                                        "fullTime": true,
+                                        "position": "Head of Security",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 26,
+                                                "name": "Rowan Morin",
+                                                "reportsTo": 23,
+                                                "phone": "(792) 141-4374",
+                                                "extension": 1844,
+                                                "hireDate": new Date(2015, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Building Security",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 44,
+                                                "name": "Benedict Soto",
+                                                "reportsTo": 23,
+                                                "phone": "(822) 282-5991",
+                                                "extension": 6422,
+                                                "hireDate": new Date(2012, 6, 1),
+                                                "fullTime": false,
+                                                "position": "Building Security",
+                                                "timeInPosition": 4
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 48,
+                                        "name": "Maryam Rios",
+                                        "reportsTo": 16,
+                                        "phone": "(673) 764-6720",
+                                        "extension": 531,
+                                        "hireDate": new Date(2014, 3, 3),
+                                        "fullTime": true,
+                                        "position": "Team Lead, Personal Assistants",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 58,
+                                                "name": "Rose Mcintyre",
+                                                "reportsTo": 48,
+                                                "phone": "(771) 615-4590",
+                                                "extension": 7094,
+                                                "hireDate": new Date(2015, 6, 30),
+                                                "fullTime": false,
+                                                "position": "Personal Assistant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "Nevada Hart",
+                "reportsTo": 1,
+                "phone": "(254) 220-1576",
+                "extension": 6649,
+                "hireDate": new Date(2015, 8, 17),
+                "fullTime": true,
+                "position": "Chief Financial Officer",
+                "timeInPosition": 6,
+                "employees": [
+                    {
+                        "id": 14,
+                        "name": "Zena Sanford",
+                        "reportsTo": 7,
+                        "phone": "(437) 568-8160",
+                        "extension": 4452,
+                        "hireDate": new Date(2010, 11, 30),
+                        "fullTime": true,
+                        "position": "VP, Finance",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 15,
+                        "name": "Quinlan Howe",
+                        "reportsTo": 7,
+                        "phone": "(464) 334-9748",
+                        "extension": 8722,
+                        "hireDate": new Date(2011, 6, 9),
+                        "fullTime": false,
+                        "position": "Senior Director, Finance",
+                        "timeInPosition": 0,
+                        "employees": [
+                            {
+                                "id": 17,
+                                "name": "Indira Lopez",
+                                "reportsTo": 15,
+                                "phone": "(301) 368-0938",
+                                "extension": 8027,
+                                "hireDate": new Date(2013, 8, 18),
+                                "fullTime": true,
+                                "position": "ERP Team Lead",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 18,
+                                        "name": "Lareina Lara",
+                                        "reportsTo": 17,
+                                        "phone": "(233) 457-7482",
+                                        "extension": 1996,
+                                        "hireDate": new Date(2010, 4, 30),
+                                        "fullTime": true,
+                                        "position": "ERP Solutions Consultant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 19,
+                                        "name": "Maxwell Wise",
+                                        "reportsTo": 17,
+                                        "phone": "(570) 494-2531",
+                                        "extension": 9865,
+                                        "hireDate": new Date(2012, 5, 19),
+                                        "fullTime": true,
+                                        "position": "Systems Engineer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 20,
+                                "name": "Hunter Mcbride",
+                                "reportsTo": 15,
+                                "phone": "(409) 442-7016",
+                                "extension": 4284,
+                                "hireDate": new Date(2012, 10, 20),
+                                "fullTime": true,
+                                "position": "Senior Director, Tax",
+                                "timeInPosition": 3
+                            },
+                            {
+                                "id": 21,
+                                "name": "Jana Serrano",
+                                "reportsTo": 15,
+                                "phone": "(910) 718-4620",
+                                "extension": 6970,
+                                "hireDate": new Date(2010, 4, 2),
+                                "fullTime": true,
+                                "position": "Financial Planning & Analysis Manager",
+                                "timeInPosition": 2
+                            },
+                            {
+                                "id": 22,
+                                "name": "Zachery Shelton",
+                                "reportsTo": 15,
+                                "phone": "(310) 240-8675",
+                                "extension": 4527,
+                                "hireDate": new Date(2011, 11, 23),
+                                "fullTime": false,
+                                "position": "Corporate Finance Controller",
+                                "timeInPosition": 6,
+                                "employees": [
+                                    {
+                                        "id": 28,
+                                        "name": "Cullen Freeman",
+                                        "reportsTo": 22,
+                                        "phone": "(136) 554-8814",
+                                        "extension": 9861,
+                                        "hireDate": new Date(2014, 3, 15),
+                                        "fullTime": true,
+                                        "position": "Treasurer Accountant",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 31,
+                                        "name": "Quinn Dean",
+                                        "reportsTo": 22,
+                                        "phone": "(152) 613-3507",
+                                        "extension": 6621,
+                                        "hireDate": new Date(2015, 1, 29),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 34,
+                                        "name": "Samantha Brady",
+                                        "reportsTo": 22,
+                                        "phone": "(206) 398-4328",
+                                        "extension": 1157,
+                                        "hireDate": new Date(2011, 2, 13),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 35,
+                                                "name": "Tamara Green",
+                                                "reportsTo": 34,
+                                                "phone": "(219) 248-2789",
+                                                "extension": 4880,
+                                                "hireDate": new Date(2014, 2, 4),
+                                                "fullTime": true,
+                                                "position": "Junior Accountant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 36,
+                                        "name": "Olympia Coleman",
+                                        "reportsTo": 22,
+                                        "phone": "(944) 853-6383",
+                                        "extension": 2136,
+                                        "hireDate": new Date(2013, 7, 31),
+                                        "fullTime": true,
+                                        "position": "Collections Manager",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 37,
+                                        "name": "Breanna Goodwin",
+                                        "reportsTo": 22,
+                                        "phone": "(379) 988-9630",
+                                        "extension": 5898,
+                                        "hireDate": new Date(2010, 5, 23),
+                                        "fullTime": false,
+                                        "position": "Payroll Specialist",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 27,
+                                "name": "Curran Travis",
+                                "reportsTo": 15,
+                                "phone": "(438) 135-8033",
+                                "extension": 3841,
+                                "hireDate": new Date(2011, 6, 13),
+                                "fullTime": true,
+                                "position": "Finance Controller",
+                                "timeInPosition": 5
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "Hunter Fry",
+                "reportsTo": 1,
+                "phone": "(766) 358-9858",
+                "extension": 3741,
+                "hireDate": new Date(2011, 2, 12),
+                "fullTime": false,
+                "position": "General Counsel",
+                "timeInPosition": 3,
+                "employees": [
+                    {
+                        "id": 9,
+                        "name": "Kuame Carrillo",
+                        "reportsTo": 8,
+                        "phone": "(192) 383-1305",
+                        "extension": 9228,
+                        "hireDate": new Date(2011, 2, 22),
+                        "fullTime": true,
+                        "position": "Associate General Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 13,
+                        "name": "Stacy Todd",
+                        "reportsTo": 8,
+                        "phone": "(925) 286-3327",
+                        "extension": 8565,
+                        "hireDate": new Date(2014, 7, 5),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 33,
+                        "name": "Valentine Wyatt",
+                        "reportsTo": 8,
+                        "phone": "(165) 166-6205",
+                        "extension": 3588,
+                        "hireDate": new Date(2015, 5, 21),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 5
+                    },
+                    {
+                        "id": 86,
+                        "name": "Daniel Mccarthy",
+                        "reportsTo": 8,
+                        "phone": "(624) 483-6206",
+                        "extension": 9112,
+                        "hireDate": new Date(2013, 12, 3),
+                        "fullTime": false,
+                        "position": "Staff Attorney",
+                        "timeInPosition": 0
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default employees;
diff --git a/vue-options-api-demos/treelist/resizing/main.js b/vue-options-api-demos/treelist/resizing/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/resizing/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/resizing/main.vue b/vue-options-api-demos/treelist/resizing/main.vue
new file mode 100644
index 00000000..e4c8d3a3
--- /dev/null
+++ b/vue-options-api-demos/treelist/resizing/main.vue
@@ -0,0 +1,100 @@
+<template>
+  <div>
+      <TreeList
+        :style="treeListStyles"
+        :resizable="true"
+        :data-items="tree"
+        :expand-field="expandField"
+        :sub-items-field="subItemsField"
+        @columnresize="onColumnResize"
+        @expandchange="onExpandChange"
+        :columns="columns"
+      />
+      </div>
+  </template>
+  
+  <script>
+  import employees from "./data";
+  import {
+    TreeList,
+    mapTree,
+    extendDataItem
+      } from '@progress/kendo-vue-treelist';
+  
+  export default {
+      components: {
+        TreeList
+      },
+      data() {
+        return {
+          treeListWidth: null,
+          dataItems: [...employees],
+          subItemsField: 'employees',
+          expandField: 'expanded',
+          expanded: [1, 2, 32],
+          columns: [
+            {
+              field: "name",
+              title: "Name",
+              width: "310px",
+              expandable: true,
+            },
+            {
+              field: "position",
+              title: "Position",
+              width: "260px",
+            },
+            {
+              field: "hireDate",
+              title: "Hire Date",
+              width: "160px",
+              format: "{0:d}",
+            },
+            {
+              field: "timeInPosition",
+              title: "Year(s) in Position",
+              width: "160px",
+            },
+            {
+              field: "fullTime",
+              title: "Full Time",
+              width: "150px",
+            },
+          ]
+        };
+      },
+      computed: {
+        tree() {
+          return mapTree(this.dataItems, this.subItemsField, (item) =>
+              extendDataItem(item, this.subItemsField, {
+                [this.expandField]: this.expanded.includes(item.id),
+              })
+            );
+        },
+        treeListStyles() {
+          return {
+            maxHeight: "510px",
+            overflow: "auto",
+            display: "inline-block",
+            width: this.treeListWidth ? this.treeListWidth + 'px' : this.treeListWidth
+          };
+        }
+      },
+      methods: {
+          onExpandChange (event) {
+            this.expanded = event.value
+                ? this.expanded.filter((id) => id !== event.dataItem.id)
+                : [...this.expanded, event.dataItem.id];
+          },
+          onColumnResize (event) {
+            this.treeListWidth = event.totalWidth
+            if (event.end) {
+              this.columns = event.columns;
+            }
+          }
+      }
+  };
+  
+  </script>
+  
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/treelist/selection-basic/data.js b/vue-options-api-demos/treelist/selection-basic/data.js
new file mode 100644
index 00000000..f66aec4d
--- /dev/null
+++ b/vue-options-api-demos/treelist/selection-basic/data.js
@@ -0,0 +1,1150 @@
+
+const employees = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2,
+        "employees": [
+            {
+                "id": 2,
+                "name": "Guy Wooten",
+                "reportsTo": 1,
+                "phone": "(438) 738-4935",
+                "extension": 1155,
+                "hireDate": new Date(2010, 3, 3),
+                "fullTime": true,
+                "position": "Chief Technical Officer",
+                "timeInPosition": 1,
+                "employees": [
+                    {
+                        "id": 32,
+                        "name": "Buffy Weber",
+                        "reportsTo": 2,
+                        "phone": "(699) 838-6121",
+                        "extension": 8933,
+                        "hireDate": new Date(2011, 7, 11),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 11,
+                                "name": "Hyacinth Hood",
+                                "reportsTo": 32,
+                                "phone": "(889) 345-2438",
+                                "extension": 8564,
+                                "hireDate": new Date(2014, 2, 3),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 60,
+                                        "name": "Akeem Carr",
+                                        "reportsTo": 11,
+                                        "phone": "(738) 136-2814",
+                                        "extension": 9353,
+                                        "hireDate": new Date(2011, 4, 21),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 78,
+                                        "name": "Rinah Simon",
+                                        "reportsTo": 11,
+                                        "phone": "(285) 912-5271",
+                                        "extension": 7795,
+                                        "hireDate": new Date(2012, 10, 11),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 42,
+                                "name": "Gage Daniels",
+                                "reportsTo": 32,
+                                "phone": "(107) 290-6260",
+                                "extension": 896,
+                                "hireDate": new Date(2013, 5, 16),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 5
+                            },
+                            {
+                                "id": 43,
+                                "name": "Constance Vazquez",
+                                "reportsTo": 32,
+                                "phone": "(800) 301-1978",
+                                "extension": 5141,
+                                "hireDate": new Date(2011, 6, 7),
+                                "fullTime": true,
+                                "position": "Director, Engineering",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 46,
+                                        "name": "Darrel Solis",
+                                        "reportsTo": 43,
+                                        "phone": "(327) 977-0216",
+                                        "extension": 7779,
+                                        "hireDate": new Date(2015, 4, 25),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 47,
+                                                "name": "Brian Yang",
+                                                "reportsTo": 46,
+                                                "phone": "(565) 146-5435",
+                                                "extension": 3885,
+                                                "hireDate": new Date(2012, 9, 27),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 50,
+                                                "name": "Lillian Bradshaw",
+                                                "reportsTo": 46,
+                                                "phone": "(323) 509-3479",
+                                                "extension": 5426,
+                                                "hireDate": new Date(2014, 5, 10),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 51,
+                                                "name": "Christian Palmer",
+                                                "reportsTo": 46,
+                                                "phone": "(490) 421-8718",
+                                                "extension": 3706,
+                                                "hireDate": new Date(2012, 12, 27),
+                                                "fullTime": false,
+                                                "position": "Technical Lead",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 55,
+                                                "name": "Summer Mosley",
+                                                "reportsTo": 46,
+                                                "phone": "(784) 962-2301",
+                                                "extension": 5492,
+                                                "hireDate": new Date(2010, 3, 2),
+                                                "fullTime": true,
+                                                "position": "QA Engineer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 56,
+                                                "name": "Barry Ayers",
+                                                "reportsTo": 46,
+                                                "phone": "(452) 373-9227",
+                                                "extension": 1308,
+                                                "hireDate": new Date(2011, 10, 11),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 59,
+                                                "name": "Keiko Espinoza",
+                                                "reportsTo": 46,
+                                                "phone": "(226) 600-5305",
+                                                "extension": 9363,
+                                                "hireDate": new Date(2011, 9, 18),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 61,
+                                                "name": "Candace Pickett",
+                                                "reportsTo": 46,
+                                                "phone": "(120) 117-7475",
+                                                "extension": 5178,
+                                                "hireDate": new Date(2010, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 63,
+                                        "name": "Mia Caldwell",
+                                        "reportsTo": 43,
+                                        "phone": "(848) 636-6470",
+                                        "extension": 6368,
+                                        "hireDate": new Date(2012, 10, 7),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 65,
+                                                "name": "Thomas Terry",
+                                                "reportsTo": 63,
+                                                "phone": "(764) 831-4248",
+                                                "extension": 3574,
+                                                "hireDate": new Date(2015, 6, 15),
+                                                "fullTime": false,
+                                                "position": "Senior Enterprise Support Officer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 67,
+                                                "name": "Ruth Downs",
+                                                "reportsTo": 63,
+                                                "phone": "(138) 991-1440",
+                                                "extension": 8067,
+                                                "hireDate": new Date(2013, 7, 13),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 70,
+                                                "name": "Yasir Wilder",
+                                                "reportsTo": 63,
+                                                "phone": "(759) 701-8665",
+                                                "extension": 8350,
+                                                "hireDate": new Date(2010, 11, 8),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 71,
+                                                "name": "Flavia Short",
+                                                "reportsTo": 63,
+                                                "phone": "(370) 133-9238",
+                                                "extension": 6390,
+                                                "hireDate": new Date(2013, 2, 21),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 74,
+                                                "name": "Aaron Roach",
+                                                "reportsTo": 63,
+                                                "phone": "(958) 717-9230",
+                                                "extension": 4899,
+                                                "hireDate": new Date(2011, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 75,
+                                                "name": "Eric Russell",
+                                                "reportsTo": 63,
+                                                "phone": "(516) 575-8505",
+                                                "extension": 2224,
+                                                "hireDate": new Date(2012, 10, 28),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 76,
+                                                "name": "Cheyenne Olson",
+                                                "reportsTo": 63,
+                                                "phone": "(241) 645-0257",
+                                                "extension": 9181,
+                                                "hireDate": new Date(2015, 5, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 77,
+                                                "name": "Shaine Avila",
+                                                "reportsTo": 63,
+                                                "phone": "(844) 435-1360",
+                                                "extension": 3374,
+                                                "hireDate": new Date(2010, 1, 31),
+                                                "fullTime": true,
+                                                "position": "UI Designer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 81,
+                                                "name": "Chantale Long",
+                                                "reportsTo": 63,
+                                                "phone": "(252) 419-6891",
+                                                "extension": 7868,
+                                                "hireDate": new Date(2010, 6, 17),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 83,
+                                                "name": "Dane Cruz",
+                                                "reportsTo": 63,
+                                                "phone": "(946) 701-6165",
+                                                "extension": 3828,
+                                                "hireDate": new Date(2014, 10, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 84,
+                                                "name": "Regan Patterson",
+                                                "reportsTo": 63,
+                                                "phone": "(265) 946-1765",
+                                                "extension": 6955,
+                                                "hireDate": new Date(2012, 3, 1),
+                                                "fullTime": true,
+                                                "position": "Technical Writer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 85,
+                                                "name": "Drew Mckay",
+                                                "reportsTo": 63,
+                                                "phone": "(327) 293-0162",
+                                                "extension": 6904,
+                                                "hireDate": new Date(2011, 3, 25),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 88,
+                                                "name": "Bevis Miller",
+                                                "reportsTo": 63,
+                                                "phone": "(525) 557-0169",
+                                                "extension": 6978,
+                                                "hireDate": new Date(2011, 4, 19),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 89,
+                                                "name": "Bruce Mccarty",
+                                                "reportsTo": 63,
+                                                "phone": "(936) 777-8730",
+                                                "extension": 6552,
+                                                "hireDate": new Date(2014, 3, 28),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 5
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 90,
+                                        "name": "Ocean Blair",
+                                        "reportsTo": 43,
+                                        "phone": "(343) 586-6614",
+                                        "extension": 1424,
+                                        "hireDate": new Date(2011, 4, 27),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 91,
+                                                "name": "Guinevere Osborn",
+                                                "reportsTo": 90,
+                                                "phone": "(424) 741-0006",
+                                                "extension": 3166,
+                                                "hireDate": new Date(2014, 11, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 92,
+                                                "name": "Olga Strong",
+                                                "reportsTo": 90,
+                                                "phone": "(949) 417-1168",
+                                                "extension": 4568,
+                                                "hireDate": new Date(2015, 5, 28),
+                                                "fullTime": true,
+                                                "position": "Graphic Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 93,
+                                                "name": "Robert Orr",
+                                                "reportsTo": 90,
+                                                "phone": "(977) 341-3721",
+                                                "extension": 9241,
+                                                "hireDate": new Date(2012, 8, 20),
+                                                "fullTime": false,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 95,
+                                                "name": "Odette Sears",
+                                                "reportsTo": 90,
+                                                "phone": "(264) 818-6576",
+                                                "extension": 1914,
+                                                "hireDate": new Date(2013, 7, 5),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 45,
+                                "name": "Zelda Medina",
+                                "reportsTo": 32,
+                                "phone": "(563) 359-6023",
+                                "extension": 2600,
+                                "hireDate": new Date(2012, 11, 6),
+                                "fullTime": true,
+                                "position": "QA Architect",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    },
+                    {
+                        "id": 52,
+                        "name": "Skyler Cleveland",
+                        "reportsTo": 2,
+                        "phone": "(217) 280-5300",
+                        "extension": 9655,
+                        "hireDate": new Date(2014, 11, 10),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 40,
+                                "name": "Karleigh Garza",
+                                "reportsTo": 52,
+                                "phone": "(370) 983-8796",
+                                "extension": 4044,
+                                "hireDate": new Date(2014, 3, 10),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 49,
+                                        "name": "Elmo Tyson",
+                                        "reportsTo": 40,
+                                        "phone": "(344) 496-9555",
+                                        "extension": 6950,
+                                        "hireDate": new Date(2014, 9, 18),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 72,
+                                        "name": "Stacey Lynn",
+                                        "reportsTo": 40,
+                                        "phone": "(140) 772-7509",
+                                        "extension": 8396,
+                                        "hireDate": new Date(2014, 7, 31),
+                                        "fullTime": false,
+                                        "position": "QA Engineer",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 80,
+                                                "name": "Meredith Parrish",
+                                                "reportsTo": 72,
+                                                "phone": "(714) 284-2408",
+                                                "extension": 7675,
+                                                "hireDate": new Date(2012, 11, 13),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 96,
+                                        "name": "Cassady Whitley",
+                                        "reportsTo": 40,
+                                        "phone": "(996) 587-8405",
+                                        "extension": 780,
+                                        "hireDate": new Date(2013, 5, 7),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 5
+                                    },
+                                    {
+                                        "id": 97,
+                                        "name": "Haviva Campbell",
+                                        "reportsTo": 40,
+                                        "phone": "(263) 887-4689",
+                                        "extension": 2808,
+                                        "hireDate": new Date(2013, 3, 5),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 98,
+                                        "name": "Cameron Ayers",
+                                        "reportsTo": 40,
+                                        "phone": "(470) 709-8030",
+                                        "extension": 2893,
+                                        "hireDate": new Date(2013, 8, 28),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 99,
+                                        "name": "Martha Sargent",
+                                        "reportsTo": 40,
+                                        "phone": "(587) 812-4418",
+                                        "extension": 5099,
+                                        "hireDate": new Date(2014, 2, 27),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 100,
+                                        "name": "Darrel Kinney",
+                                        "reportsTo": 40,
+                                        "phone": "(888) 483-9606",
+                                        "extension": 4779,
+                                        "hireDate": new Date(2014, 3, 24),
+                                        "fullTime": false,
+                                        "position": "Graphic Designer",
+                                        "timeInPosition": 1
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 54,
+                                "name": "Kuame Frye",
+                                "reportsTo": 52,
+                                "phone": "(360) 721-5886",
+                                "extension": 2730,
+                                "hireDate": new Date(2010, 11, 17),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 64,
+                                        "name": "Ori Wynn",
+                                        "reportsTo": 54,
+                                        "phone": "(366) 342-0166",
+                                        "extension": 7252,
+                                        "hireDate": new Date(2015, 6, 21),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 0,
+                                        "employees": [
+                                            {
+                                                "id": 6,
+                                                "name": "Moses Duncan",
+                                                "reportsTo": 64,
+                                                "phone": "(421) 611-4814",
+                                                "extension": 669,
+                                                "hireDate": new Date(2010, 5, 24),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 12,
+                                                "name": "Jamalia Wallace",
+                                                "reportsTo": 64,
+                                                "phone": "(611) 391-8016",
+                                                "extension": 1952,
+                                                "hireDate": new Date(2011, 9, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Designer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 62,
+                                                "name": "Palmer Gregory",
+                                                "reportsTo": 64,
+                                                "phone": "(360) 430-2505",
+                                                "extension": 4337,
+                                                "hireDate": new Date(2014, 8, 30),
+                                                "fullTime": true,
+                                                "position": "Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 68,
+                                                "name": "Mallory Gilliam",
+                                                "reportsTo": 64,
+                                                "phone": "(878) 423-2971",
+                                                "extension": 1341,
+                                                "hireDate": new Date(2014, 7, 24),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 73,
+                                                "name": "Ima Hughes",
+                                                "reportsTo": 64,
+                                                "phone": "(905) 485-8001",
+                                                "extension": 1273,
+                                                "hireDate": new Date(2013, 6, 3),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 79,
+                                                "name": "Duncan Mathews",
+                                                "reportsTo": 64,
+                                                "phone": "(790) 971-9709",
+                                                "extension": 4573,
+                                                "hireDate": new Date(2011, 8, 21),
+                                                "fullTime": false,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 69,
+                                "name": "Sierra Beasley",
+                                "reportsTo": 52,
+                                "phone": "(271) 953-1968",
+                                "extension": 3324,
+                                "hireDate": new Date(2011, 4, 2),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 3,
+                                "employees": [
+                                    {
+                                        "id": 38,
+                                        "name": "Elton Tucker",
+                                        "reportsTo": 69,
+                                        "phone": "(988) 930-9331",
+                                        "extension": 9216,
+                                        "hireDate": new Date(2015, 6, 4),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 1
+                                    },
+                                    {
+                                        "id": 39,
+                                        "name": "Iona Brennan",
+                                        "reportsTo": 69,
+                                        "phone": "(356) 563-0600",
+                                        "extension": 5634,
+                                        "hireDate": new Date(2010, 9, 23),
+                                        "fullTime": true,
+                                        "position": "Junior Support Officer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 53,
+                                        "name": "Paul Campos",
+                                        "reportsTo": 69,
+                                        "phone": "(899) 205-1689",
+                                        "extension": 8586,
+                                        "hireDate": new Date(2011, 3, 17),
+                                        "fullTime": true,
+                                        "position": "Interaction Designer",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 66,
+                                                "name": "Gloria Freeman",
+                                                "reportsTo": 53,
+                                                "phone": "(344) 950-9168",
+                                                "extension": 4738,
+                                                "hireDate": new Date(2013, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Junior Interaction Designer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 57,
+                                        "name": "Alyssa Hansen",
+                                        "reportsTo": 69,
+                                        "phone": "(548) 925-4799",
+                                        "extension": 4716,
+                                        "hireDate": new Date(2011, 1, 19),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 82,
+                                        "name": "Yael Walters",
+                                        "reportsTo": 69,
+                                        "phone": "(311) 489-8191",
+                                        "extension": 6520,
+                                        "hireDate": new Date(2013, 7, 4),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 87,
+                                        "name": "Dahlia Hunt",
+                                        "reportsTo": 69,
+                                        "phone": "(720) 339-5202",
+                                        "extension": 3690,
+                                        "hireDate": new Date(2011, 3, 26),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 94,
+                                        "name": "Adria Stanley",
+                                        "reportsTo": 69,
+                                        "phone": "(536) 357-6391",
+                                        "extension": 3374,
+                                        "hireDate": new Date(2014, 7, 26),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "Priscilla Frank",
+                "reportsTo": 1,
+                "phone": "(278) 927-2684",
+                "extension": 4183,
+                "hireDate": new Date(2014, 11, 30),
+                "fullTime": true,
+                "position": "Chief Product Officer",
+                "timeInPosition": 2,
+                "employees": [
+                    {
+                        "id": 4,
+                        "name": "Ursula Holmes",
+                        "reportsTo": 3,
+                        "phone": "(302) 760-2034",
+                        "extension": 2226,
+                        "hireDate": new Date(2011, 6, 6),
+                        "fullTime": true,
+                        "position": "EVP, Product Strategy",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 24,
+                        "name": "Melvin Carrillo",
+                        "reportsTo": 3,
+                        "phone": "(348) 933-5167",
+                        "extension": 2482,
+                        "hireDate": new Date(2014, 7, 21),
+                        "fullTime": true,
+                        "position": "Director, Developer Relations",
+                        "timeInPosition": 6,
+                        "employees": [
+                            {
+                                "id": 29,
+                                "name": "Martha Chavez",
+                                "reportsTo": 24,
+                                "phone": "(860) 754-3464",
+                                "extension": 4531,
+                                "hireDate": new Date(2013, 3, 12),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 30,
+                                "name": "Oren Fox",
+                                "reportsTo": 24,
+                                "phone": "(572) 414-3299",
+                                "extension": 4849,
+                                "hireDate": new Date(2013, 5, 14),
+                                "fullTime": false,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 41,
+                                "name": "Amos Barr",
+                                "reportsTo": 24,
+                                "phone": "(470) 381-3718",
+                                "extension": 7643,
+                                "hireDate": new Date(2010, 3, 9),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "Anika Vega",
+                "reportsTo": 1,
+                "phone": "(910) 714-1802",
+                "extension": 6353,
+                "hireDate": new Date(2010, 2, 25),
+                "fullTime": true,
+                "position": "Chief Process Officer",
+                "timeInPosition": 5,
+                "employees": [
+                    {
+                        "id": 10,
+                        "name": "Vernon Ballard",
+                        "reportsTo": 5,
+                        "phone": "(702) 185-8890",
+                        "extension": 9242,
+                        "hireDate": new Date(2015, 6, 26),
+                        "fullTime": true,
+                        "position": "Director Facilities",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 16,
+                                "name": "Ali Guy",
+                                "reportsTo": 10,
+                                "phone": "(429) 912-6578",
+                                "extension": 2225,
+                                "hireDate": new Date(2014, 6, 29),
+                                "fullTime": true,
+                                "position": "Operations Manager",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 23,
+                                        "name": "Bruce Reilly",
+                                        "reportsTo": 16,
+                                        "phone": "(995) 243-7302",
+                                        "extension": 4815,
+                                        "hireDate": new Date(2015, 4, 1),
+                                        "fullTime": true,
+                                        "position": "Head of Security",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 26,
+                                                "name": "Rowan Morin",
+                                                "reportsTo": 23,
+                                                "phone": "(792) 141-4374",
+                                                "extension": 1844,
+                                                "hireDate": new Date(2015, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Building Security",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 44,
+                                                "name": "Benedict Soto",
+                                                "reportsTo": 23,
+                                                "phone": "(822) 282-5991",
+                                                "extension": 6422,
+                                                "hireDate": new Date(2012, 6, 1),
+                                                "fullTime": false,
+                                                "position": "Building Security",
+                                                "timeInPosition": 4
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 48,
+                                        "name": "Maryam Rios",
+                                        "reportsTo": 16,
+                                        "phone": "(673) 764-6720",
+                                        "extension": 531,
+                                        "hireDate": new Date(2014, 3, 3),
+                                        "fullTime": true,
+                                        "position": "Team Lead, Personal Assistants",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 58,
+                                                "name": "Rose Mcintyre",
+                                                "reportsTo": 48,
+                                                "phone": "(771) 615-4590",
+                                                "extension": 7094,
+                                                "hireDate": new Date(2015, 6, 30),
+                                                "fullTime": false,
+                                                "position": "Personal Assistant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "Nevada Hart",
+                "reportsTo": 1,
+                "phone": "(254) 220-1576",
+                "extension": 6649,
+                "hireDate": new Date(2015, 8, 17),
+                "fullTime": true,
+                "position": "Chief Financial Officer",
+                "timeInPosition": 6,
+                "employees": [
+                    {
+                        "id": 14,
+                        "name": "Zena Sanford",
+                        "reportsTo": 7,
+                        "phone": "(437) 568-8160",
+                        "extension": 4452,
+                        "hireDate": new Date(2010, 11, 30),
+                        "fullTime": true,
+                        "position": "VP, Finance",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 15,
+                        "name": "Quinlan Howe",
+                        "reportsTo": 7,
+                        "phone": "(464) 334-9748",
+                        "extension": 8722,
+                        "hireDate": new Date(2011, 6, 9),
+                        "fullTime": false,
+                        "position": "Senior Director, Finance",
+                        "timeInPosition": 0,
+                        "employees": [
+                            {
+                                "id": 17,
+                                "name": "Indira Lopez",
+                                "reportsTo": 15,
+                                "phone": "(301) 368-0938",
+                                "extension": 8027,
+                                "hireDate": new Date(2013, 8, 18),
+                                "fullTime": true,
+                                "position": "ERP Team Lead",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 18,
+                                        "name": "Lareina Lara",
+                                        "reportsTo": 17,
+                                        "phone": "(233) 457-7482",
+                                        "extension": 1996,
+                                        "hireDate": new Date(2010, 4, 30),
+                                        "fullTime": true,
+                                        "position": "ERP Solutions Consultant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 19,
+                                        "name": "Maxwell Wise",
+                                        "reportsTo": 17,
+                                        "phone": "(570) 494-2531",
+                                        "extension": 9865,
+                                        "hireDate": new Date(2012, 5, 19),
+                                        "fullTime": true,
+                                        "position": "Systems Engineer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 20,
+                                "name": "Hunter Mcbride",
+                                "reportsTo": 15,
+                                "phone": "(409) 442-7016",
+                                "extension": 4284,
+                                "hireDate": new Date(2012, 10, 20),
+                                "fullTime": true,
+                                "position": "Senior Director, Tax",
+                                "timeInPosition": 3
+                            },
+                            {
+                                "id": 21,
+                                "name": "Jana Serrano",
+                                "reportsTo": 15,
+                                "phone": "(910) 718-4620",
+                                "extension": 6970,
+                                "hireDate": new Date(2010, 4, 2),
+                                "fullTime": true,
+                                "position": "Financial Planning & Analysis Manager",
+                                "timeInPosition": 2
+                            },
+                            {
+                                "id": 22,
+                                "name": "Zachery Shelton",
+                                "reportsTo": 15,
+                                "phone": "(310) 240-8675",
+                                "extension": 4527,
+                                "hireDate": new Date(2011, 11, 23),
+                                "fullTime": false,
+                                "position": "Corporate Finance Controller",
+                                "timeInPosition": 6,
+                                "employees": [
+                                    {
+                                        "id": 28,
+                                        "name": "Cullen Freeman",
+                                        "reportsTo": 22,
+                                        "phone": "(136) 554-8814",
+                                        "extension": 9861,
+                                        "hireDate": new Date(2014, 3, 15),
+                                        "fullTime": true,
+                                        "position": "Treasurer Accountant",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 31,
+                                        "name": "Quinn Dean",
+                                        "reportsTo": 22,
+                                        "phone": "(152) 613-3507",
+                                        "extension": 6621,
+                                        "hireDate": new Date(2015, 1, 29),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 34,
+                                        "name": "Samantha Brady",
+                                        "reportsTo": 22,
+                                        "phone": "(206) 398-4328",
+                                        "extension": 1157,
+                                        "hireDate": new Date(2011, 2, 13),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 35,
+                                                "name": "Tamara Green",
+                                                "reportsTo": 34,
+                                                "phone": "(219) 248-2789",
+                                                "extension": 4880,
+                                                "hireDate": new Date(2014, 2, 4),
+                                                "fullTime": true,
+                                                "position": "Junior Accountant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 36,
+                                        "name": "Olympia Coleman",
+                                        "reportsTo": 22,
+                                        "phone": "(944) 853-6383",
+                                        "extension": 2136,
+                                        "hireDate": new Date(2013, 7, 31),
+                                        "fullTime": true,
+                                        "position": "Collections Manager",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 37,
+                                        "name": "Breanna Goodwin",
+                                        "reportsTo": 22,
+                                        "phone": "(379) 988-9630",
+                                        "extension": 5898,
+                                        "hireDate": new Date(2010, 5, 23),
+                                        "fullTime": false,
+                                        "position": "Payroll Specialist",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 27,
+                                "name": "Curran Travis",
+                                "reportsTo": 15,
+                                "phone": "(438) 135-8033",
+                                "extension": 3841,
+                                "hireDate": new Date(2011, 6, 13),
+                                "fullTime": true,
+                                "position": "Finance Controller",
+                                "timeInPosition": 5
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "Hunter Fry",
+                "reportsTo": 1,
+                "phone": "(766) 358-9858",
+                "extension": 3741,
+                "hireDate": new Date(2011, 2, 12),
+                "fullTime": false,
+                "position": "General Counsel",
+                "timeInPosition": 3,
+                "employees": [
+                    {
+                        "id": 9,
+                        "name": "Kuame Carrillo",
+                        "reportsTo": 8,
+                        "phone": "(192) 383-1305",
+                        "extension": 9228,
+                        "hireDate": new Date(2011, 2, 22),
+                        "fullTime": true,
+                        "position": "Associate General Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 13,
+                        "name": "Stacy Todd",
+                        "reportsTo": 8,
+                        "phone": "(925) 286-3327",
+                        "extension": 8565,
+                        "hireDate": new Date(2014, 7, 5),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 33,
+                        "name": "Valentine Wyatt",
+                        "reportsTo": 8,
+                        "phone": "(165) 166-6205",
+                        "extension": 3588,
+                        "hireDate": new Date(2015, 5, 21),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 5
+                    },
+                    {
+                        "id": 86,
+                        "name": "Daniel Mccarthy",
+                        "reportsTo": 8,
+                        "phone": "(624) 483-6206",
+                        "extension": 9112,
+                        "hireDate": new Date(2013, 12, 3),
+                        "fullTime": false,
+                        "position": "Staff Attorney",
+                        "timeInPosition": 0
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default employees;
diff --git a/vue-options-api-demos/treelist/selection-basic/main.js b/vue-options-api-demos/treelist/selection-basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/selection-basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/selection-basic/main.vue b/vue-options-api-demos/treelist/selection-basic/main.vue
new file mode 100644
index 00000000..6c683fd6
--- /dev/null
+++ b/vue-options-api-demos/treelist/selection-basic/main.vue
@@ -0,0 +1,130 @@
+<template>
+  <div>
+<TreeList
+      :style="{
+        maxHeight: '510px',
+        overflow: 'auto',
+      }"
+      :data-items="processedData"
+      :selected-field="selectedField"
+      :expand-field="expandField"
+      :sub-items-field="subItemsField"
+      :data-item-key="dataItemKey"
+      @selectionchange="onSelectionChange"
+      @headerselectionchange="onHeaderSelectionChange"
+      @expandchange="onExpandChange"
+      :columns="columns"
+    />
+  </div>
+</template>
+
+<script>
+import dataItems from "./data";
+import {
+ TreeList,
+ mapTree,
+  extendDataItem,
+    } from '@progress/kendo-vue-treelist';
+
+const DATA_ITEM_KEY = "id";
+const SUB_ITEMS_FIELD = "employees";
+const EXPAND_FIELD = "expanded";
+const SELECTED_FIELD = "selected";
+
+export default {
+    components: {
+      TreeList
+    },
+    data() {
+      return {
+        expanded: {
+          1: true,
+          2: true,
+          32: true,
+        },
+        selected:{},
+        dataItems,
+        dataItemKey: DATA_ITEM_KEY,
+        subItemsField: SUB_ITEMS_FIELD,
+        expandField: EXPAND_FIELD,
+        selectedField: SELECTED_FIELD
+      };
+    },
+    computed: {
+      columns() {
+        return [
+          {
+            field: "selected",
+            width: "7%",
+            headerSelectionValue: this.headerSelectionValue,
+          },
+          {
+            field: "name",
+            title: "Name",
+            expandable: true,
+            width: "31%",
+          },
+          {
+            field: "position",
+            title: "Position",
+            width: "31%",
+          },
+          {
+            field: "hireDate",
+            title: "Hire Date",
+            format: "{0:d}",
+            width: "31%",
+          },
+        ];
+      },
+      headerSelectionValue () {
+        let allSelected = true;
+
+        mapTree(this.dataItems, SUB_ITEMS_FIELD, (item) => {
+          allSelected = allSelected && this.selected[item[DATA_ITEM_KEY]];
+          return item;
+        });
+        return allSelected;
+      },
+      processedData () {
+        return this.addExpandField(this.dataItems);
+      }
+    },
+    methods: {
+      onExpandChange (e){
+        this.expanded = {
+          ...this.expanded,
+          [e.dataItem.id]: !e.value,
+        };
+      },
+      onSelectionChange (e) {
+          this.selected = {
+            ...this.selected,
+            [e.dataItem.id]: e.event.target.checked ? true : undefined,
+          };
+      },
+      onHeaderSelectionChange(event) {
+        const checkboxElement = event.event.target;
+        const checked = checkboxElement.checked;
+        const newSelectedState = {};
+        mapTree(this.dataItems, SUB_ITEMS_FIELD, (item) => {
+          newSelectedState[item.id] = checked ? true : undefined;
+          return item;
+        });
+        this.selected = newSelectedState;
+      },
+      addExpandField (dataTree) {
+        const expanded = this.expanded;
+        const selected = this.selected;
+        return mapTree(dataTree, this.subItemsField, (item) =>
+          extendDataItem(item, this.subItemsField, {
+            [this.expandField]: expanded[item.id],
+            [this.selectedField]: selected[item.id],
+          })
+        );
+      }
+    }
+};
+
+</script>
+
diff --git a/vue-options-api-demos/treelist/shared/data.js b/vue-options-api-demos/treelist/shared/data.js
new file mode 100644
index 00000000..f66aec4d
--- /dev/null
+++ b/vue-options-api-demos/treelist/shared/data.js
@@ -0,0 +1,1150 @@
+
+const employees = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2,
+        "employees": [
+            {
+                "id": 2,
+                "name": "Guy Wooten",
+                "reportsTo": 1,
+                "phone": "(438) 738-4935",
+                "extension": 1155,
+                "hireDate": new Date(2010, 3, 3),
+                "fullTime": true,
+                "position": "Chief Technical Officer",
+                "timeInPosition": 1,
+                "employees": [
+                    {
+                        "id": 32,
+                        "name": "Buffy Weber",
+                        "reportsTo": 2,
+                        "phone": "(699) 838-6121",
+                        "extension": 8933,
+                        "hireDate": new Date(2011, 7, 11),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 11,
+                                "name": "Hyacinth Hood",
+                                "reportsTo": 32,
+                                "phone": "(889) 345-2438",
+                                "extension": 8564,
+                                "hireDate": new Date(2014, 2, 3),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 60,
+                                        "name": "Akeem Carr",
+                                        "reportsTo": 11,
+                                        "phone": "(738) 136-2814",
+                                        "extension": 9353,
+                                        "hireDate": new Date(2011, 4, 21),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 78,
+                                        "name": "Rinah Simon",
+                                        "reportsTo": 11,
+                                        "phone": "(285) 912-5271",
+                                        "extension": 7795,
+                                        "hireDate": new Date(2012, 10, 11),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 42,
+                                "name": "Gage Daniels",
+                                "reportsTo": 32,
+                                "phone": "(107) 290-6260",
+                                "extension": 896,
+                                "hireDate": new Date(2013, 5, 16),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 5
+                            },
+                            {
+                                "id": 43,
+                                "name": "Constance Vazquez",
+                                "reportsTo": 32,
+                                "phone": "(800) 301-1978",
+                                "extension": 5141,
+                                "hireDate": new Date(2011, 6, 7),
+                                "fullTime": true,
+                                "position": "Director, Engineering",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 46,
+                                        "name": "Darrel Solis",
+                                        "reportsTo": 43,
+                                        "phone": "(327) 977-0216",
+                                        "extension": 7779,
+                                        "hireDate": new Date(2015, 4, 25),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 47,
+                                                "name": "Brian Yang",
+                                                "reportsTo": 46,
+                                                "phone": "(565) 146-5435",
+                                                "extension": 3885,
+                                                "hireDate": new Date(2012, 9, 27),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 50,
+                                                "name": "Lillian Bradshaw",
+                                                "reportsTo": 46,
+                                                "phone": "(323) 509-3479",
+                                                "extension": 5426,
+                                                "hireDate": new Date(2014, 5, 10),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 51,
+                                                "name": "Christian Palmer",
+                                                "reportsTo": 46,
+                                                "phone": "(490) 421-8718",
+                                                "extension": 3706,
+                                                "hireDate": new Date(2012, 12, 27),
+                                                "fullTime": false,
+                                                "position": "Technical Lead",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 55,
+                                                "name": "Summer Mosley",
+                                                "reportsTo": 46,
+                                                "phone": "(784) 962-2301",
+                                                "extension": 5492,
+                                                "hireDate": new Date(2010, 3, 2),
+                                                "fullTime": true,
+                                                "position": "QA Engineer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 56,
+                                                "name": "Barry Ayers",
+                                                "reportsTo": 46,
+                                                "phone": "(452) 373-9227",
+                                                "extension": 1308,
+                                                "hireDate": new Date(2011, 10, 11),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 59,
+                                                "name": "Keiko Espinoza",
+                                                "reportsTo": 46,
+                                                "phone": "(226) 600-5305",
+                                                "extension": 9363,
+                                                "hireDate": new Date(2011, 9, 18),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 61,
+                                                "name": "Candace Pickett",
+                                                "reportsTo": 46,
+                                                "phone": "(120) 117-7475",
+                                                "extension": 5178,
+                                                "hireDate": new Date(2010, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 63,
+                                        "name": "Mia Caldwell",
+                                        "reportsTo": 43,
+                                        "phone": "(848) 636-6470",
+                                        "extension": 6368,
+                                        "hireDate": new Date(2012, 10, 7),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 65,
+                                                "name": "Thomas Terry",
+                                                "reportsTo": 63,
+                                                "phone": "(764) 831-4248",
+                                                "extension": 3574,
+                                                "hireDate": new Date(2015, 6, 15),
+                                                "fullTime": false,
+                                                "position": "Senior Enterprise Support Officer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 67,
+                                                "name": "Ruth Downs",
+                                                "reportsTo": 63,
+                                                "phone": "(138) 991-1440",
+                                                "extension": 8067,
+                                                "hireDate": new Date(2013, 7, 13),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 70,
+                                                "name": "Yasir Wilder",
+                                                "reportsTo": 63,
+                                                "phone": "(759) 701-8665",
+                                                "extension": 8350,
+                                                "hireDate": new Date(2010, 11, 8),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 71,
+                                                "name": "Flavia Short",
+                                                "reportsTo": 63,
+                                                "phone": "(370) 133-9238",
+                                                "extension": 6390,
+                                                "hireDate": new Date(2013, 2, 21),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 74,
+                                                "name": "Aaron Roach",
+                                                "reportsTo": 63,
+                                                "phone": "(958) 717-9230",
+                                                "extension": 4899,
+                                                "hireDate": new Date(2011, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 75,
+                                                "name": "Eric Russell",
+                                                "reportsTo": 63,
+                                                "phone": "(516) 575-8505",
+                                                "extension": 2224,
+                                                "hireDate": new Date(2012, 10, 28),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 76,
+                                                "name": "Cheyenne Olson",
+                                                "reportsTo": 63,
+                                                "phone": "(241) 645-0257",
+                                                "extension": 9181,
+                                                "hireDate": new Date(2015, 5, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 77,
+                                                "name": "Shaine Avila",
+                                                "reportsTo": 63,
+                                                "phone": "(844) 435-1360",
+                                                "extension": 3374,
+                                                "hireDate": new Date(2010, 1, 31),
+                                                "fullTime": true,
+                                                "position": "UI Designer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 81,
+                                                "name": "Chantale Long",
+                                                "reportsTo": 63,
+                                                "phone": "(252) 419-6891",
+                                                "extension": 7868,
+                                                "hireDate": new Date(2010, 6, 17),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 83,
+                                                "name": "Dane Cruz",
+                                                "reportsTo": 63,
+                                                "phone": "(946) 701-6165",
+                                                "extension": 3828,
+                                                "hireDate": new Date(2014, 10, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 84,
+                                                "name": "Regan Patterson",
+                                                "reportsTo": 63,
+                                                "phone": "(265) 946-1765",
+                                                "extension": 6955,
+                                                "hireDate": new Date(2012, 3, 1),
+                                                "fullTime": true,
+                                                "position": "Technical Writer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 85,
+                                                "name": "Drew Mckay",
+                                                "reportsTo": 63,
+                                                "phone": "(327) 293-0162",
+                                                "extension": 6904,
+                                                "hireDate": new Date(2011, 3, 25),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 88,
+                                                "name": "Bevis Miller",
+                                                "reportsTo": 63,
+                                                "phone": "(525) 557-0169",
+                                                "extension": 6978,
+                                                "hireDate": new Date(2011, 4, 19),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 89,
+                                                "name": "Bruce Mccarty",
+                                                "reportsTo": 63,
+                                                "phone": "(936) 777-8730",
+                                                "extension": 6552,
+                                                "hireDate": new Date(2014, 3, 28),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 5
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 90,
+                                        "name": "Ocean Blair",
+                                        "reportsTo": 43,
+                                        "phone": "(343) 586-6614",
+                                        "extension": 1424,
+                                        "hireDate": new Date(2011, 4, 27),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 91,
+                                                "name": "Guinevere Osborn",
+                                                "reportsTo": 90,
+                                                "phone": "(424) 741-0006",
+                                                "extension": 3166,
+                                                "hireDate": new Date(2014, 11, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 92,
+                                                "name": "Olga Strong",
+                                                "reportsTo": 90,
+                                                "phone": "(949) 417-1168",
+                                                "extension": 4568,
+                                                "hireDate": new Date(2015, 5, 28),
+                                                "fullTime": true,
+                                                "position": "Graphic Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 93,
+                                                "name": "Robert Orr",
+                                                "reportsTo": 90,
+                                                "phone": "(977) 341-3721",
+                                                "extension": 9241,
+                                                "hireDate": new Date(2012, 8, 20),
+                                                "fullTime": false,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 95,
+                                                "name": "Odette Sears",
+                                                "reportsTo": 90,
+                                                "phone": "(264) 818-6576",
+                                                "extension": 1914,
+                                                "hireDate": new Date(2013, 7, 5),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 45,
+                                "name": "Zelda Medina",
+                                "reportsTo": 32,
+                                "phone": "(563) 359-6023",
+                                "extension": 2600,
+                                "hireDate": new Date(2012, 11, 6),
+                                "fullTime": true,
+                                "position": "QA Architect",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    },
+                    {
+                        "id": 52,
+                        "name": "Skyler Cleveland",
+                        "reportsTo": 2,
+                        "phone": "(217) 280-5300",
+                        "extension": 9655,
+                        "hireDate": new Date(2014, 11, 10),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 40,
+                                "name": "Karleigh Garza",
+                                "reportsTo": 52,
+                                "phone": "(370) 983-8796",
+                                "extension": 4044,
+                                "hireDate": new Date(2014, 3, 10),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 49,
+                                        "name": "Elmo Tyson",
+                                        "reportsTo": 40,
+                                        "phone": "(344) 496-9555",
+                                        "extension": 6950,
+                                        "hireDate": new Date(2014, 9, 18),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 72,
+                                        "name": "Stacey Lynn",
+                                        "reportsTo": 40,
+                                        "phone": "(140) 772-7509",
+                                        "extension": 8396,
+                                        "hireDate": new Date(2014, 7, 31),
+                                        "fullTime": false,
+                                        "position": "QA Engineer",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 80,
+                                                "name": "Meredith Parrish",
+                                                "reportsTo": 72,
+                                                "phone": "(714) 284-2408",
+                                                "extension": 7675,
+                                                "hireDate": new Date(2012, 11, 13),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 96,
+                                        "name": "Cassady Whitley",
+                                        "reportsTo": 40,
+                                        "phone": "(996) 587-8405",
+                                        "extension": 780,
+                                        "hireDate": new Date(2013, 5, 7),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 5
+                                    },
+                                    {
+                                        "id": 97,
+                                        "name": "Haviva Campbell",
+                                        "reportsTo": 40,
+                                        "phone": "(263) 887-4689",
+                                        "extension": 2808,
+                                        "hireDate": new Date(2013, 3, 5),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 98,
+                                        "name": "Cameron Ayers",
+                                        "reportsTo": 40,
+                                        "phone": "(470) 709-8030",
+                                        "extension": 2893,
+                                        "hireDate": new Date(2013, 8, 28),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 99,
+                                        "name": "Martha Sargent",
+                                        "reportsTo": 40,
+                                        "phone": "(587) 812-4418",
+                                        "extension": 5099,
+                                        "hireDate": new Date(2014, 2, 27),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 100,
+                                        "name": "Darrel Kinney",
+                                        "reportsTo": 40,
+                                        "phone": "(888) 483-9606",
+                                        "extension": 4779,
+                                        "hireDate": new Date(2014, 3, 24),
+                                        "fullTime": false,
+                                        "position": "Graphic Designer",
+                                        "timeInPosition": 1
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 54,
+                                "name": "Kuame Frye",
+                                "reportsTo": 52,
+                                "phone": "(360) 721-5886",
+                                "extension": 2730,
+                                "hireDate": new Date(2010, 11, 17),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 64,
+                                        "name": "Ori Wynn",
+                                        "reportsTo": 54,
+                                        "phone": "(366) 342-0166",
+                                        "extension": 7252,
+                                        "hireDate": new Date(2015, 6, 21),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 0,
+                                        "employees": [
+                                            {
+                                                "id": 6,
+                                                "name": "Moses Duncan",
+                                                "reportsTo": 64,
+                                                "phone": "(421) 611-4814",
+                                                "extension": 669,
+                                                "hireDate": new Date(2010, 5, 24),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 12,
+                                                "name": "Jamalia Wallace",
+                                                "reportsTo": 64,
+                                                "phone": "(611) 391-8016",
+                                                "extension": 1952,
+                                                "hireDate": new Date(2011, 9, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Designer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 62,
+                                                "name": "Palmer Gregory",
+                                                "reportsTo": 64,
+                                                "phone": "(360) 430-2505",
+                                                "extension": 4337,
+                                                "hireDate": new Date(2014, 8, 30),
+                                                "fullTime": true,
+                                                "position": "Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 68,
+                                                "name": "Mallory Gilliam",
+                                                "reportsTo": 64,
+                                                "phone": "(878) 423-2971",
+                                                "extension": 1341,
+                                                "hireDate": new Date(2014, 7, 24),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 73,
+                                                "name": "Ima Hughes",
+                                                "reportsTo": 64,
+                                                "phone": "(905) 485-8001",
+                                                "extension": 1273,
+                                                "hireDate": new Date(2013, 6, 3),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 79,
+                                                "name": "Duncan Mathews",
+                                                "reportsTo": 64,
+                                                "phone": "(790) 971-9709",
+                                                "extension": 4573,
+                                                "hireDate": new Date(2011, 8, 21),
+                                                "fullTime": false,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 69,
+                                "name": "Sierra Beasley",
+                                "reportsTo": 52,
+                                "phone": "(271) 953-1968",
+                                "extension": 3324,
+                                "hireDate": new Date(2011, 4, 2),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 3,
+                                "employees": [
+                                    {
+                                        "id": 38,
+                                        "name": "Elton Tucker",
+                                        "reportsTo": 69,
+                                        "phone": "(988) 930-9331",
+                                        "extension": 9216,
+                                        "hireDate": new Date(2015, 6, 4),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 1
+                                    },
+                                    {
+                                        "id": 39,
+                                        "name": "Iona Brennan",
+                                        "reportsTo": 69,
+                                        "phone": "(356) 563-0600",
+                                        "extension": 5634,
+                                        "hireDate": new Date(2010, 9, 23),
+                                        "fullTime": true,
+                                        "position": "Junior Support Officer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 53,
+                                        "name": "Paul Campos",
+                                        "reportsTo": 69,
+                                        "phone": "(899) 205-1689",
+                                        "extension": 8586,
+                                        "hireDate": new Date(2011, 3, 17),
+                                        "fullTime": true,
+                                        "position": "Interaction Designer",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 66,
+                                                "name": "Gloria Freeman",
+                                                "reportsTo": 53,
+                                                "phone": "(344) 950-9168",
+                                                "extension": 4738,
+                                                "hireDate": new Date(2013, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Junior Interaction Designer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 57,
+                                        "name": "Alyssa Hansen",
+                                        "reportsTo": 69,
+                                        "phone": "(548) 925-4799",
+                                        "extension": 4716,
+                                        "hireDate": new Date(2011, 1, 19),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 82,
+                                        "name": "Yael Walters",
+                                        "reportsTo": 69,
+                                        "phone": "(311) 489-8191",
+                                        "extension": 6520,
+                                        "hireDate": new Date(2013, 7, 4),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 87,
+                                        "name": "Dahlia Hunt",
+                                        "reportsTo": 69,
+                                        "phone": "(720) 339-5202",
+                                        "extension": 3690,
+                                        "hireDate": new Date(2011, 3, 26),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 94,
+                                        "name": "Adria Stanley",
+                                        "reportsTo": 69,
+                                        "phone": "(536) 357-6391",
+                                        "extension": 3374,
+                                        "hireDate": new Date(2014, 7, 26),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "Priscilla Frank",
+                "reportsTo": 1,
+                "phone": "(278) 927-2684",
+                "extension": 4183,
+                "hireDate": new Date(2014, 11, 30),
+                "fullTime": true,
+                "position": "Chief Product Officer",
+                "timeInPosition": 2,
+                "employees": [
+                    {
+                        "id": 4,
+                        "name": "Ursula Holmes",
+                        "reportsTo": 3,
+                        "phone": "(302) 760-2034",
+                        "extension": 2226,
+                        "hireDate": new Date(2011, 6, 6),
+                        "fullTime": true,
+                        "position": "EVP, Product Strategy",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 24,
+                        "name": "Melvin Carrillo",
+                        "reportsTo": 3,
+                        "phone": "(348) 933-5167",
+                        "extension": 2482,
+                        "hireDate": new Date(2014, 7, 21),
+                        "fullTime": true,
+                        "position": "Director, Developer Relations",
+                        "timeInPosition": 6,
+                        "employees": [
+                            {
+                                "id": 29,
+                                "name": "Martha Chavez",
+                                "reportsTo": 24,
+                                "phone": "(860) 754-3464",
+                                "extension": 4531,
+                                "hireDate": new Date(2013, 3, 12),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 30,
+                                "name": "Oren Fox",
+                                "reportsTo": 24,
+                                "phone": "(572) 414-3299",
+                                "extension": 4849,
+                                "hireDate": new Date(2013, 5, 14),
+                                "fullTime": false,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 41,
+                                "name": "Amos Barr",
+                                "reportsTo": 24,
+                                "phone": "(470) 381-3718",
+                                "extension": 7643,
+                                "hireDate": new Date(2010, 3, 9),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "Anika Vega",
+                "reportsTo": 1,
+                "phone": "(910) 714-1802",
+                "extension": 6353,
+                "hireDate": new Date(2010, 2, 25),
+                "fullTime": true,
+                "position": "Chief Process Officer",
+                "timeInPosition": 5,
+                "employees": [
+                    {
+                        "id": 10,
+                        "name": "Vernon Ballard",
+                        "reportsTo": 5,
+                        "phone": "(702) 185-8890",
+                        "extension": 9242,
+                        "hireDate": new Date(2015, 6, 26),
+                        "fullTime": true,
+                        "position": "Director Facilities",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 16,
+                                "name": "Ali Guy",
+                                "reportsTo": 10,
+                                "phone": "(429) 912-6578",
+                                "extension": 2225,
+                                "hireDate": new Date(2014, 6, 29),
+                                "fullTime": true,
+                                "position": "Operations Manager",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 23,
+                                        "name": "Bruce Reilly",
+                                        "reportsTo": 16,
+                                        "phone": "(995) 243-7302",
+                                        "extension": 4815,
+                                        "hireDate": new Date(2015, 4, 1),
+                                        "fullTime": true,
+                                        "position": "Head of Security",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 26,
+                                                "name": "Rowan Morin",
+                                                "reportsTo": 23,
+                                                "phone": "(792) 141-4374",
+                                                "extension": 1844,
+                                                "hireDate": new Date(2015, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Building Security",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 44,
+                                                "name": "Benedict Soto",
+                                                "reportsTo": 23,
+                                                "phone": "(822) 282-5991",
+                                                "extension": 6422,
+                                                "hireDate": new Date(2012, 6, 1),
+                                                "fullTime": false,
+                                                "position": "Building Security",
+                                                "timeInPosition": 4
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 48,
+                                        "name": "Maryam Rios",
+                                        "reportsTo": 16,
+                                        "phone": "(673) 764-6720",
+                                        "extension": 531,
+                                        "hireDate": new Date(2014, 3, 3),
+                                        "fullTime": true,
+                                        "position": "Team Lead, Personal Assistants",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 58,
+                                                "name": "Rose Mcintyre",
+                                                "reportsTo": 48,
+                                                "phone": "(771) 615-4590",
+                                                "extension": 7094,
+                                                "hireDate": new Date(2015, 6, 30),
+                                                "fullTime": false,
+                                                "position": "Personal Assistant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "Nevada Hart",
+                "reportsTo": 1,
+                "phone": "(254) 220-1576",
+                "extension": 6649,
+                "hireDate": new Date(2015, 8, 17),
+                "fullTime": true,
+                "position": "Chief Financial Officer",
+                "timeInPosition": 6,
+                "employees": [
+                    {
+                        "id": 14,
+                        "name": "Zena Sanford",
+                        "reportsTo": 7,
+                        "phone": "(437) 568-8160",
+                        "extension": 4452,
+                        "hireDate": new Date(2010, 11, 30),
+                        "fullTime": true,
+                        "position": "VP, Finance",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 15,
+                        "name": "Quinlan Howe",
+                        "reportsTo": 7,
+                        "phone": "(464) 334-9748",
+                        "extension": 8722,
+                        "hireDate": new Date(2011, 6, 9),
+                        "fullTime": false,
+                        "position": "Senior Director, Finance",
+                        "timeInPosition": 0,
+                        "employees": [
+                            {
+                                "id": 17,
+                                "name": "Indira Lopez",
+                                "reportsTo": 15,
+                                "phone": "(301) 368-0938",
+                                "extension": 8027,
+                                "hireDate": new Date(2013, 8, 18),
+                                "fullTime": true,
+                                "position": "ERP Team Lead",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 18,
+                                        "name": "Lareina Lara",
+                                        "reportsTo": 17,
+                                        "phone": "(233) 457-7482",
+                                        "extension": 1996,
+                                        "hireDate": new Date(2010, 4, 30),
+                                        "fullTime": true,
+                                        "position": "ERP Solutions Consultant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 19,
+                                        "name": "Maxwell Wise",
+                                        "reportsTo": 17,
+                                        "phone": "(570) 494-2531",
+                                        "extension": 9865,
+                                        "hireDate": new Date(2012, 5, 19),
+                                        "fullTime": true,
+                                        "position": "Systems Engineer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 20,
+                                "name": "Hunter Mcbride",
+                                "reportsTo": 15,
+                                "phone": "(409) 442-7016",
+                                "extension": 4284,
+                                "hireDate": new Date(2012, 10, 20),
+                                "fullTime": true,
+                                "position": "Senior Director, Tax",
+                                "timeInPosition": 3
+                            },
+                            {
+                                "id": 21,
+                                "name": "Jana Serrano",
+                                "reportsTo": 15,
+                                "phone": "(910) 718-4620",
+                                "extension": 6970,
+                                "hireDate": new Date(2010, 4, 2),
+                                "fullTime": true,
+                                "position": "Financial Planning & Analysis Manager",
+                                "timeInPosition": 2
+                            },
+                            {
+                                "id": 22,
+                                "name": "Zachery Shelton",
+                                "reportsTo": 15,
+                                "phone": "(310) 240-8675",
+                                "extension": 4527,
+                                "hireDate": new Date(2011, 11, 23),
+                                "fullTime": false,
+                                "position": "Corporate Finance Controller",
+                                "timeInPosition": 6,
+                                "employees": [
+                                    {
+                                        "id": 28,
+                                        "name": "Cullen Freeman",
+                                        "reportsTo": 22,
+                                        "phone": "(136) 554-8814",
+                                        "extension": 9861,
+                                        "hireDate": new Date(2014, 3, 15),
+                                        "fullTime": true,
+                                        "position": "Treasurer Accountant",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 31,
+                                        "name": "Quinn Dean",
+                                        "reportsTo": 22,
+                                        "phone": "(152) 613-3507",
+                                        "extension": 6621,
+                                        "hireDate": new Date(2015, 1, 29),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 34,
+                                        "name": "Samantha Brady",
+                                        "reportsTo": 22,
+                                        "phone": "(206) 398-4328",
+                                        "extension": 1157,
+                                        "hireDate": new Date(2011, 2, 13),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 35,
+                                                "name": "Tamara Green",
+                                                "reportsTo": 34,
+                                                "phone": "(219) 248-2789",
+                                                "extension": 4880,
+                                                "hireDate": new Date(2014, 2, 4),
+                                                "fullTime": true,
+                                                "position": "Junior Accountant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 36,
+                                        "name": "Olympia Coleman",
+                                        "reportsTo": 22,
+                                        "phone": "(944) 853-6383",
+                                        "extension": 2136,
+                                        "hireDate": new Date(2013, 7, 31),
+                                        "fullTime": true,
+                                        "position": "Collections Manager",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 37,
+                                        "name": "Breanna Goodwin",
+                                        "reportsTo": 22,
+                                        "phone": "(379) 988-9630",
+                                        "extension": 5898,
+                                        "hireDate": new Date(2010, 5, 23),
+                                        "fullTime": false,
+                                        "position": "Payroll Specialist",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 27,
+                                "name": "Curran Travis",
+                                "reportsTo": 15,
+                                "phone": "(438) 135-8033",
+                                "extension": 3841,
+                                "hireDate": new Date(2011, 6, 13),
+                                "fullTime": true,
+                                "position": "Finance Controller",
+                                "timeInPosition": 5
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "Hunter Fry",
+                "reportsTo": 1,
+                "phone": "(766) 358-9858",
+                "extension": 3741,
+                "hireDate": new Date(2011, 2, 12),
+                "fullTime": false,
+                "position": "General Counsel",
+                "timeInPosition": 3,
+                "employees": [
+                    {
+                        "id": 9,
+                        "name": "Kuame Carrillo",
+                        "reportsTo": 8,
+                        "phone": "(192) 383-1305",
+                        "extension": 9228,
+                        "hireDate": new Date(2011, 2, 22),
+                        "fullTime": true,
+                        "position": "Associate General Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 13,
+                        "name": "Stacy Todd",
+                        "reportsTo": 8,
+                        "phone": "(925) 286-3327",
+                        "extension": 8565,
+                        "hireDate": new Date(2014, 7, 5),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 33,
+                        "name": "Valentine Wyatt",
+                        "reportsTo": 8,
+                        "phone": "(165) 166-6205",
+                        "extension": 3588,
+                        "hireDate": new Date(2015, 5, 21),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 5
+                    },
+                    {
+                        "id": 86,
+                        "name": "Daniel Mccarthy",
+                        "reportsTo": 8,
+                        "phone": "(624) 483-6206",
+                        "extension": 9112,
+                        "hireDate": new Date(2013, 12, 3),
+                        "fullTime": false,
+                        "position": "Staff Attorney",
+                        "timeInPosition": 0
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default employees;
diff --git a/vue-options-api-demos/treelist/shared/flat-data.js b/vue-options-api-demos/treelist/shared/flat-data.js
new file mode 100644
index 00000000..6ca1dc52
--- /dev/null
+++ b/vue-options-api-demos/treelist/shared/flat-data.js
@@ -0,0 +1,1093 @@
+const employeesFlat = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2
+    },
+    {
+        "id": 2,
+        "name": "Guy Wooten",
+        "reportsTo": 1,
+        "phone": "(438) 738-4935",
+        "extension": 1155,
+        "hireDate": new Date(2010, 3, 3),
+        "fullTime": true,
+        "position": "Chief Technical Officer",
+        "timeInPosition": 1
+    },
+    {
+        "id": 3,
+        "name": "Priscilla Frank",
+        "reportsTo": 1,
+        "phone": "(278) 927-2684",
+        "extension": 4183,
+        "hireDate": new Date(2014, 11, 30),
+        "fullTime": true,
+        "position": "Chief Product Officer",
+        "timeInPosition": 2
+    },
+    {
+        "id": 4,
+        "name": "Ursula Holmes",
+        "reportsTo": 3,
+        "phone": "(302) 760-2034",
+        "extension": 2226,
+        "hireDate": new Date(2011, 6, 6),
+        "fullTime": true,
+        "position": "EVP, Product Strategy",
+        "timeInPosition": 4
+    },
+    {
+        "id": 5,
+        "name": "Anika Vega",
+        "reportsTo": 1,
+        "phone": "(910) 714-1802",
+        "extension": 6353,
+        "hireDate": new Date(2010, 2, 25),
+        "fullTime": true,
+        "position": "Chief Process Officer",
+        "timeInPosition": 5
+    },
+    {
+        "id": 6,
+        "name": "Moses Duncan",
+        "reportsTo": 64,
+        "phone": "(421) 611-4814",
+        "extension": 669,
+        "hireDate": new Date(2010, 5, 24),
+        "fullTime": true,
+        "position": "Software Developer",
+        "timeInPosition": 6
+    },
+    {
+        "id": 7,
+        "name": "Nevada Hart",
+        "reportsTo": 1,
+        "phone": "(254) 220-1576",
+        "extension": 6649,
+        "hireDate": new Date(2015, 8, 17),
+        "fullTime": true,
+        "position": "Chief Financial Officer",
+        "timeInPosition": 6
+    },
+    {
+        "id": 8,
+        "name": "Hunter Fry",
+        "reportsTo": 1,
+        "phone": "(766) 358-9858",
+        "extension": 3741,
+        "hireDate": new Date(2011, 2, 12),
+        "fullTime": false,
+        "position": "General Counsel",
+        "timeInPosition": 3
+    },
+    {
+        "id": 9,
+        "name": "Kuame Carrillo",
+        "reportsTo": 8,
+        "phone": "(192) 383-1305",
+        "extension": 9228,
+        "hireDate": new Date(2011, 2, 22),
+        "fullTime": true,
+        "position": "Associate General Councel",
+        "timeInPosition": 0
+    },
+    {
+        "id": 10,
+        "name": "Vernon Ballard",
+        "reportsTo": 5,
+        "phone": "(702) 185-8890",
+        "extension": 9242,
+        "hireDate": new Date(2015, 6, 26),
+        "fullTime": true,
+        "position": "Director Facilities",
+        "timeInPosition": 2
+    },
+    {
+        "id": 11,
+        "name": "Hyacinth Hood",
+        "reportsTo": 32,
+        "phone": "(889) 345-2438",
+        "extension": 8564,
+        "hireDate": new Date(2014, 2, 3),
+        "fullTime": true,
+        "position": "Team Lead",
+        "timeInPosition": 1
+    },
+    {
+        "id": 12,
+        "name": "Jamalia Wallace",
+        "reportsTo": 64,
+        "phone": "(611) 391-8016",
+        "extension": 1952,
+        "hireDate": new Date(2011, 9, 8),
+        "fullTime": true,
+        "position": "Junior Designer",
+        "timeInPosition": 3
+    },
+    {
+        "id": 13,
+        "name": "Stacy Todd",
+        "reportsTo": 8,
+        "phone": "(925) 286-3327",
+        "extension": 8565,
+        "hireDate": new Date(2014, 7, 5),
+        "fullTime": true,
+        "position": "Councel",
+        "timeInPosition": 0
+    },
+    {
+        "id": 14,
+        "name": "Zena Sanford",
+        "reportsTo": 7,
+        "phone": "(437) 568-8160",
+        "extension": 4452,
+        "hireDate": new Date(2010, 11, 30),
+        "fullTime": true,
+        "position": "VP, Finance",
+        "timeInPosition": 4
+    },
+    {
+        "id": 15,
+        "name": "Quinlan Howe",
+        "reportsTo": 7,
+        "phone": "(464) 334-9748",
+        "extension": 8722,
+        "hireDate": new Date(2011, 6, 9),
+        "fullTime": false,
+        "position": "Senior Director, Finance",
+        "timeInPosition": 0
+    },
+    {
+        "id": 16,
+        "name": "Ali Guy",
+        "reportsTo": 10,
+        "phone": "(429) 912-6578",
+        "extension": 2225,
+        "hireDate": new Date(2014, 6, 29),
+        "fullTime": true,
+        "position": "Operations Manager",
+        "timeInPosition": 4
+    },
+    {
+        "id": 17,
+        "name": "Indira Lopez",
+        "reportsTo": 15,
+        "phone": "(301) 368-0938",
+        "extension": 8027,
+        "hireDate": new Date(2013, 8, 18),
+        "fullTime": true,
+        "position": "ERP Team Lead",
+        "timeInPosition": 4
+    },
+    {
+        "id": 18,
+        "name": "Lareina Lara",
+        "reportsTo": 17,
+        "phone": "(233) 457-7482",
+        "extension": 1996,
+        "hireDate": new Date(2010, 4, 30),
+        "fullTime": true,
+        "position": "ERP Solutions Consultant",
+        "timeInPosition": 6
+    },
+    {
+        "id": 19,
+        "name": "Maxwell Wise",
+        "reportsTo": 17,
+        "phone": "(570) 494-2531",
+        "extension": 9865,
+        "hireDate": new Date(2012, 5, 19),
+        "fullTime": true,
+        "position": "Systems Engineer",
+        "timeInPosition": 0
+    },
+    {
+        "id": 20,
+        "name": "Hunter Mcbride",
+        "reportsTo": 15,
+        "phone": "(409) 442-7016",
+        "extension": 4284,
+        "hireDate": new Date(2012, 10, 20),
+        "fullTime": true,
+        "position": "Senior Director, Tax",
+        "timeInPosition": 3
+    },
+    {
+        "id": 21,
+        "name": "Jana Serrano",
+        "reportsTo": 15,
+        "phone": "(910) 718-4620",
+        "extension": 6970,
+        "hireDate": new Date(2010, 4, 2),
+        "fullTime": true,
+        "position": "Financial Planning & Analysis Manager",
+        "timeInPosition": 2
+    },
+    {
+        "id": 22,
+        "name": "Zachery Shelton",
+        "reportsTo": 15,
+        "phone": "(310) 240-8675",
+        "extension": 4527,
+        "hireDate": new Date(2011, 11, 23),
+        "fullTime": false,
+        "position": "Corporate Finance Controller",
+        "timeInPosition": 6
+    },
+    {
+        "id": 23,
+        "name": "Bruce Reilly",
+        "reportsTo": 16,
+        "phone": "(995) 243-7302",
+        "extension": 4815,
+        "hireDate": new Date(2015, 4, 1),
+        "fullTime": true,
+        "position": "Head of Security",
+        "timeInPosition": 1
+    },
+    {
+        "id": 24,
+        "name": "Melvin Carrillo",
+        "reportsTo": 3,
+        "phone": "(348) 933-5167",
+        "extension": 2482,
+        "hireDate": new Date(2014, 7, 21),
+        "fullTime": true,
+        "position": "Director, Developer Relations",
+        "timeInPosition": 6
+    },
+    {
+        "id": 26,
+        "name": "Rowan Morin",
+        "reportsTo": 23,
+        "phone": "(792) 141-4374",
+        "extension": 1844,
+        "hireDate": new Date(2015, 7, 30),
+        "fullTime": true,
+        "position": "Building Security",
+        "timeInPosition": 5
+    },
+    {
+        "id": 27,
+        "name": "Curran Travis",
+        "reportsTo": 15,
+        "phone": "(438) 135-8033",
+        "extension": 3841,
+        "hireDate": new Date(2011, 6, 13),
+        "fullTime": true,
+        "position": "Finance Controller",
+        "timeInPosition": 5
+    },
+    {
+        "id": 28,
+        "name": "Cullen Freeman",
+        "reportsTo": 22,
+        "phone": "(136) 554-8814",
+        "extension": 9861,
+        "hireDate": new Date(2014, 3, 15),
+        "fullTime": true,
+        "position": "Treasurer Accountant",
+        "timeInPosition": 2
+    },
+    {
+        "id": 29,
+        "name": "Martha Chavez",
+        "reportsTo": 24,
+        "phone": "(860) 754-3464",
+        "extension": 4531,
+        "hireDate": new Date(2013, 3, 12),
+        "fullTime": true,
+        "position": "Developer Advocate",
+        "timeInPosition": 0
+    },
+    {
+        "id": 30,
+        "name": "Oren Fox",
+        "reportsTo": 24,
+        "phone": "(572) 414-3299",
+        "extension": 4849,
+        "hireDate": new Date(2013, 5, 14),
+        "fullTime": false,
+        "position": "Developer Advocate",
+        "timeInPosition": 0
+    },
+    {
+        "id": 31,
+        "name": "Quinn Dean",
+        "reportsTo": 22,
+        "phone": "(152) 613-3507",
+        "extension": 6621,
+        "hireDate": new Date(2015, 1, 29),
+        "fullTime": true,
+        "position": "Accountant",
+        "timeInPosition": 6
+    },
+    {
+        "id": 32,
+        "name": "Buffy Weber",
+        "reportsTo": 2,
+        "phone": "(699) 838-6121",
+        "extension": 8933,
+        "hireDate": new Date(2011, 7, 11),
+        "fullTime": true,
+        "position": "VP, Engineering",
+        "timeInPosition": 2
+    },
+    {
+        "id": 33,
+        "name": "Valentine Wyatt",
+        "reportsTo": 8,
+        "phone": "(165) 166-6205",
+        "extension": 3588,
+        "hireDate": new Date(2015, 5, 21),
+        "fullTime": true,
+        "position": "Councel",
+        "timeInPosition": 5
+    },
+    {
+        "id": 34,
+        "name": "Samantha Brady",
+        "reportsTo": 22,
+        "phone": "(206) 398-4328",
+        "extension": 1157,
+        "hireDate": new Date(2011, 2, 13),
+        "fullTime": true,
+        "position": "Accountant",
+        "timeInPosition": 2
+    },
+    {
+        "id": 35,
+        "name": "Tamara Green",
+        "reportsTo": 34,
+        "phone": "(219) 248-2789",
+        "extension": 4880,
+        "hireDate": new Date(2014, 2, 4),
+        "fullTime": true,
+        "position": "Junior Accountant",
+        "timeInPosition": 6
+    },
+    {
+        "id": 36,
+        "name": "Olympia Coleman",
+        "reportsTo": 22,
+        "phone": "(944) 853-6383",
+        "extension": 2136,
+        "hireDate": new Date(2013, 7, 31),
+        "fullTime": true,
+        "position": "Collections Manager",
+        "timeInPosition": 3
+    },
+    {
+        "id": 37,
+        "name": "Breanna Goodwin",
+        "reportsTo": 22,
+        "phone": "(379) 988-9630",
+        "extension": 5898,
+        "hireDate": new Date(2010, 5, 23),
+        "fullTime": false,
+        "position": "Payroll Specialist",
+        "timeInPosition": 4
+    },
+    {
+        "id": 38,
+        "name": "Elton Tucker",
+        "reportsTo": 69,
+        "phone": "(988) 930-9331",
+        "extension": 9216,
+        "hireDate": new Date(2015, 6, 4),
+        "fullTime": true,
+        "position": "Support Officer",
+        "timeInPosition": 1
+    },
+    {
+        "id": 39,
+        "name": "Iona Brennan",
+        "reportsTo": 69,
+        "phone": "(356) 563-0600",
+        "extension": 5634,
+        "hireDate": new Date(2010, 9, 23),
+        "fullTime": true,
+        "position": "Junior Support Officer",
+        "timeInPosition": 4
+    },
+    {
+        "id": 40,
+        "name": "Karleigh Garza",
+        "reportsTo": 52,
+        "phone": "(370) 983-8796",
+        "extension": 4044,
+        "hireDate": new Date(2014, 3, 10),
+        "fullTime": true,
+        "position": "Team Lead",
+        "timeInPosition": 1
+    },
+    {
+        "id": 41,
+        "name": "Amos Barr",
+        "reportsTo": 24,
+        "phone": "(470) 381-3718",
+        "extension": 7643,
+        "hireDate": new Date(2010, 3, 9),
+        "fullTime": true,
+        "position": "Developer Advocate",
+        "timeInPosition": 2
+    },
+    {
+        "id": 42,
+        "name": "Gage Daniels",
+        "reportsTo": 32,
+        "phone": "(107) 290-6260",
+        "extension": 896,
+        "hireDate": new Date(2013, 5, 16),
+        "fullTime": true,
+        "position": "Software Architect",
+        "timeInPosition": 5
+    },
+    {
+        "id": 43,
+        "name": "Constance Vazquez",
+        "reportsTo": 32,
+        "phone": "(800) 301-1978",
+        "extension": 5141,
+        "hireDate": new Date(2011, 6, 7),
+        "fullTime": true,
+        "position": "Director, Engineering",
+        "timeInPosition": 1
+    },
+    {
+        "id": 44,
+        "name": "Benedict Soto",
+        "reportsTo": 23,
+        "phone": "(822) 282-5991",
+        "extension": 6422,
+        "hireDate": new Date(2012, 6, 1),
+        "fullTime": false,
+        "position": "Building Security",
+        "timeInPosition": 4
+    },
+    {
+        "id": 45,
+        "name": "Zelda Medina",
+        "reportsTo": 32,
+        "phone": "(563) 359-6023",
+        "extension": 2600,
+        "hireDate": new Date(2012, 11, 6),
+        "fullTime": true,
+        "position": "QA Architect",
+        "timeInPosition": 2
+    },
+    {
+        "id": 46,
+        "name": "Darrel Solis",
+        "reportsTo": 43,
+        "phone": "(327) 977-0216",
+        "extension": 7779,
+        "hireDate": new Date(2015, 4, 25),
+        "fullTime": true,
+        "position": "Team Lead",
+        "timeInPosition": 4
+    },
+    {
+        "id": 47,
+        "name": "Brian Yang",
+        "reportsTo": 46,
+        "phone": "(565) 146-5435",
+        "extension": 3885,
+        "hireDate": new Date(2012, 9, 27),
+        "fullTime": true,
+        "position": "Senior Software Developer",
+        "timeInPosition": 3
+    },
+    {
+        "id": 48,
+        "name": "Maryam Rios",
+        "reportsTo": 16,
+        "phone": "(673) 764-6720",
+        "extension": 531,
+        "hireDate": new Date(2014, 3, 3),
+        "fullTime": true,
+        "position": "Team Lead, Personal Assistants",
+        "timeInPosition": 1
+    },
+    {
+        "id": 49,
+        "name": "Elmo Tyson",
+        "reportsTo": 40,
+        "phone": "(344) 496-9555",
+        "extension": 6950,
+        "hireDate": new Date(2014, 9, 18),
+        "fullTime": true,
+        "position": "Software Developer",
+        "timeInPosition": 4
+    },
+    {
+        "id": 50,
+        "name": "Lillian Bradshaw",
+        "reportsTo": 46,
+        "phone": "(323) 509-3479",
+        "extension": 5426,
+        "hireDate": new Date(2014, 5, 10),
+        "fullTime": true,
+        "position": "Software Developer",
+        "timeInPosition": 2
+    },
+    {
+        "id": 51,
+        "name": "Christian Palmer",
+        "reportsTo": 46,
+        "phone": "(490) 421-8718",
+        "extension": 3706,
+        "hireDate": new Date(2012, 12, 27),
+        "fullTime": false,
+        "position": "Technical Lead",
+        "timeInPosition": 1
+    },
+    {
+        "id": 52,
+        "name": "Skyler Cleveland",
+        "reportsTo": 2,
+        "phone": "(217) 280-5300",
+        "extension": 9655,
+        "hireDate": new Date(2014, 11, 10),
+        "fullTime": true,
+        "position": "VP, Engineering",
+        "timeInPosition": 2
+    },
+    {
+        "id": 53,
+        "name": "Paul Campos",
+        "reportsTo": 69,
+        "phone": "(899) 205-1689",
+        "extension": 8586,
+        "hireDate": new Date(2011, 3, 17),
+        "fullTime": true,
+        "position": "Interaction Designer",
+        "timeInPosition": 4
+    },
+    {
+        "id": 54,
+        "name": "Kuame Frye",
+        "reportsTo": 52,
+        "phone": "(360) 721-5886",
+        "extension": 2730,
+        "hireDate": new Date(2010, 11, 17),
+        "fullTime": true,
+        "position": "Software Architect",
+        "timeInPosition": 1
+    },
+    {
+        "id": 55,
+        "name": "Summer Mosley",
+        "reportsTo": 46,
+        "phone": "(784) 962-2301",
+        "extension": 5492,
+        "hireDate": new Date(2010, 3, 2),
+        "fullTime": true,
+        "position": "QA Engineer",
+        "timeInPosition": 5
+    },
+    {
+        "id": 56,
+        "name": "Barry Ayers",
+        "reportsTo": 46,
+        "phone": "(452) 373-9227",
+        "extension": 1308,
+        "hireDate": new Date(2011, 10, 11),
+        "fullTime": true,
+        "position": "Software Developer",
+        "timeInPosition": 4
+    },
+    {
+        "id": 57,
+        "name": "Alyssa Hansen",
+        "reportsTo": 69,
+        "phone": "(548) 925-4799",
+        "extension": 4716,
+        "hireDate": new Date(2011, 1, 19),
+        "fullTime": true,
+        "position": "Junior Software Developer",
+        "timeInPosition": 6
+    },
+    {
+        "id": 58,
+        "name": "Rose Mcintyre",
+        "reportsTo": 48,
+        "phone": "(771) 615-4590",
+        "extension": 7094,
+        "hireDate": new Date(2015, 6, 30),
+        "fullTime": false,
+        "position": "Personal Assistant",
+        "timeInPosition": 6
+    },
+    {
+        "id": 59,
+        "name": "Keiko Espinoza",
+        "reportsTo": 46,
+        "phone": "(226) 600-5305",
+        "extension": 9363,
+        "hireDate": new Date(2011, 9, 18),
+        "fullTime": true,
+        "position": "Junior QA Engineer",
+        "timeInPosition": 4
+    },
+    {
+        "id": 60,
+        "name": "Akeem Carr",
+        "reportsTo": 11,
+        "phone": "(738) 136-2814",
+        "extension": 9353,
+        "hireDate": new Date(2011, 4, 21),
+        "fullTime": true,
+        "position": "Junior Software Developer",
+        "timeInPosition": 2
+    },
+    {
+        "id": 61,
+        "name": "Candace Pickett",
+        "reportsTo": 46,
+        "phone": "(120) 117-7475",
+        "extension": 5178,
+        "hireDate": new Date(2010, 5, 6),
+        "fullTime": true,
+        "position": "Support Officer",
+        "timeInPosition": 0
+    },
+    {
+        "id": 62,
+        "name": "Palmer Gregory",
+        "reportsTo": 64,
+        "phone": "(360) 430-2505",
+        "extension": 4337,
+        "hireDate": new Date(2014, 8, 30),
+        "fullTime": true,
+        "position": "Designer",
+        "timeInPosition": 4
+    },
+    {
+        "id": 63,
+        "name": "Mia Caldwell",
+        "reportsTo": 43,
+        "phone": "(848) 636-6470",
+        "extension": 6368,
+        "hireDate": new Date(2012, 10, 7),
+        "fullTime": true,
+        "position": "Team Lead",
+        "timeInPosition": 4
+    },
+    {
+        "id": 64,
+        "name": "Ori Wynn",
+        "reportsTo": 54,
+        "phone": "(366) 342-0166",
+        "extension": 7252,
+        "hireDate": new Date(2015, 6, 21),
+        "fullTime": true,
+        "position": "Team Lead",
+        "timeInPosition": 0
+    },
+    {
+        "id": 65,
+        "name": "Thomas Terry",
+        "reportsTo": 63,
+        "phone": "(764) 831-4248",
+        "extension": 3574,
+        "hireDate": new Date(2015, 6, 15),
+        "fullTime": false,
+        "position": "Senior Enterprise Support Officer",
+        "timeInPosition": 2
+    },
+    {
+        "id": 66,
+        "name": "Gloria Freeman",
+        "reportsTo": 53,
+        "phone": "(344) 950-9168",
+        "extension": 4738,
+        "hireDate": new Date(2013, 5, 6),
+        "fullTime": true,
+        "position": "Junior Interaction Designer",
+        "timeInPosition": 0
+    },
+    {
+        "id": 67,
+        "name": "Ruth Downs",
+        "reportsTo": 63,
+        "phone": "(138) 991-1440",
+        "extension": 8067,
+        "hireDate": new Date(2013, 7, 13),
+        "fullTime": true,
+        "position": "Senior Software Developer",
+        "timeInPosition": 5
+    },
+    {
+        "id": 68,
+        "name": "Mallory Gilliam",
+        "reportsTo": 64,
+        "phone": "(878) 423-2971",
+        "extension": 1341,
+        "hireDate": new Date(2014, 7, 24),
+        "fullTime": true,
+        "position": "Senior Software Developer",
+        "timeInPosition": 1
+    },
+    {
+        "id": 69,
+        "name": "Sierra Beasley",
+        "reportsTo": 52,
+        "phone": "(271) 953-1968",
+        "extension": 3324,
+        "hireDate": new Date(2011, 4, 2),
+        "fullTime": true,
+        "position": "Team Lead",
+        "timeInPosition": 3
+    },
+    {
+        "id": 70,
+        "name": "Yasir Wilder",
+        "reportsTo": 63,
+        "phone": "(759) 701-8665",
+        "extension": 8350,
+        "hireDate": new Date(2010, 11, 8),
+        "fullTime": true,
+        "position": "Senior QA Enginner",
+        "timeInPosition": 3
+    },
+    {
+        "id": 71,
+        "name": "Flavia Short",
+        "reportsTo": 63,
+        "phone": "(370) 133-9238",
+        "extension": 6390,
+        "hireDate": new Date(2013, 2, 21),
+        "fullTime": true,
+        "position": "Support Officer",
+        "timeInPosition": 0
+    },
+    {
+        "id": 72,
+        "name": "Stacey Lynn",
+        "reportsTo": 40,
+        "phone": "(140) 772-7509",
+        "extension": 8396,
+        "hireDate": new Date(2014, 7, 31),
+        "fullTime": false,
+        "position": "QA Engineer",
+        "timeInPosition": 1
+    },
+    {
+        "id": 73,
+        "name": "Ima Hughes",
+        "reportsTo": 64,
+        "phone": "(905) 485-8001",
+        "extension": 1273,
+        "hireDate": new Date(2013, 6, 3),
+        "fullTime": true,
+        "position": "Software Developer",
+        "timeInPosition": 0
+    },
+    {
+        "id": 74,
+        "name": "Aaron Roach",
+        "reportsTo": 63,
+        "phone": "(958) 717-9230",
+        "extension": 4899,
+        "hireDate": new Date(2011, 7, 30),
+        "fullTime": true,
+        "position": "Junior Software Developer",
+        "timeInPosition": 6
+    },
+    {
+        "id": 75,
+        "name": "Eric Russell",
+        "reportsTo": 63,
+        "phone": "(516) 575-8505",
+        "extension": 2224,
+        "hireDate": new Date(2012, 10, 28),
+        "fullTime": true,
+        "position": "Software Developer",
+        "timeInPosition": 3
+    },
+    {
+        "id": 76,
+        "name": "Cheyenne Olson",
+        "reportsTo": 63,
+        "phone": "(241) 645-0257",
+        "extension": 9181,
+        "hireDate": new Date(2015, 5, 19),
+        "fullTime": true,
+        "position": "Software Developer",
+        "timeInPosition": 5
+    },
+    {
+        "id": 77,
+        "name": "Shaine Avila",
+        "reportsTo": 63,
+        "phone": "(844) 435-1360",
+        "extension": 3374,
+        "hireDate": new Date(2010, 1, 31),
+        "fullTime": true,
+        "position": "UI Designer",
+        "timeInPosition": 5
+    },
+    {
+        "id": 78,
+        "name": "Rinah Simon",
+        "reportsTo": 11,
+        "phone": "(285) 912-5271",
+        "extension": 7795,
+        "hireDate": new Date(2012, 10, 11),
+        "fullTime": true,
+        "position": "Software Developer",
+        "timeInPosition": 4
+    },
+    {
+        "id": 79,
+        "name": "Duncan Mathews",
+        "reportsTo": 64,
+        "phone": "(790) 971-9709",
+        "extension": 4573,
+        "hireDate": new Date(2011, 8, 21),
+        "fullTime": false,
+        "position": "Software Developer",
+        "timeInPosition": 3
+    },
+    {
+        "id": 80,
+        "name": "Meredith Parrish",
+        "reportsTo": 72,
+        "phone": "(714) 284-2408",
+        "extension": 7675,
+        "hireDate": new Date(2012, 11, 13),
+        "fullTime": true,
+        "position": "Junior QA Engineer",
+        "timeInPosition": 6
+    },
+    {
+        "id": 81,
+        "name": "Chantale Long",
+        "reportsTo": 63,
+        "phone": "(252) 419-6891",
+        "extension": 7868,
+        "hireDate": new Date(2010, 6, 17),
+        "fullTime": true,
+        "position": "Senior QA Enginner",
+        "timeInPosition": 1
+    },
+    {
+        "id": 82,
+        "name": "Yael Walters",
+        "reportsTo": 69,
+        "phone": "(311) 489-8191",
+        "extension": 6520,
+        "hireDate": new Date(2013, 7, 4),
+        "fullTime": true,
+        "position": "Software Developer",
+        "timeInPosition": 6
+    },
+    {
+        "id": 83,
+        "name": "Dane Cruz",
+        "reportsTo": 63,
+        "phone": "(946) 701-6165",
+        "extension": 3828,
+        "hireDate": new Date(2014, 10, 8),
+        "fullTime": true,
+        "position": "Junior Software Developer",
+        "timeInPosition": 2
+    },
+    {
+        "id": 84,
+        "name": "Regan Patterson",
+        "reportsTo": 63,
+        "phone": "(265) 946-1765",
+        "extension": 6955,
+        "hireDate": new Date(2012, 3, 1),
+        "fullTime": true,
+        "position": "Technical Writer",
+        "timeInPosition": 6
+    },
+    {
+        "id": 85,
+        "name": "Drew Mckay",
+        "reportsTo": 63,
+        "phone": "(327) 293-0162",
+        "extension": 6904,
+        "hireDate": new Date(2011, 3, 25),
+        "fullTime": true,
+        "position": "Senior Software Developer",
+        "timeInPosition": 3
+    },
+    {
+        "id": 86,
+        "name": "Daniel Mccarthy",
+        "reportsTo": 8,
+        "phone": "(624) 483-6206",
+        "extension": 9112,
+        "hireDate": new Date(2013, 12, 3),
+        "fullTime": false,
+        "position": "Staff Attorney",
+        "timeInPosition": 0
+    },
+    {
+        "id": 87,
+        "name": "Dahlia Hunt",
+        "reportsTo": 69,
+        "phone": "(720) 339-5202",
+        "extension": 3690,
+        "hireDate": new Date(2011, 3, 26),
+        "fullTime": true,
+        "position": "Senior Software Developer",
+        "timeInPosition": 4
+    },
+    {
+        "id": 88,
+        "name": "Bevis Miller",
+        "reportsTo": 63,
+        "phone": "(525) 557-0169",
+        "extension": 6978,
+        "hireDate": new Date(2011, 4, 19),
+        "fullTime": true,
+        "position": "Senior Software Developer",
+        "timeInPosition": 5
+    },
+    {
+        "id": 89,
+        "name": "Bruce Mccarty",
+        "reportsTo": 63,
+        "phone": "(936) 777-8730",
+        "extension": 6552,
+        "hireDate": new Date(2014, 3, 28),
+        "fullTime": true,
+        "position": "Support Officer",
+        "timeInPosition": 5
+    },
+    {
+        "id": 90,
+        "name": "Ocean Blair",
+        "reportsTo": 43,
+        "phone": "(343) 586-6614",
+        "extension": 1424,
+        "hireDate": new Date(2011, 4, 27),
+        "fullTime": true,
+        "position": "Team Lead",
+        "timeInPosition": 2
+    },
+    {
+        "id": 91,
+        "name": "Guinevere Osborn",
+        "reportsTo": 90,
+        "phone": "(424) 741-0006",
+        "extension": 3166,
+        "hireDate": new Date(2014, 11, 19),
+        "fullTime": true,
+        "position": "Software Developer",
+        "timeInPosition": 3
+    },
+    {
+        "id": 92,
+        "name": "Olga Strong",
+        "reportsTo": 90,
+        "phone": "(949) 417-1168",
+        "extension": 4568,
+        "hireDate": new Date(2015, 5, 28),
+        "fullTime": true,
+        "position": "Graphic Designer",
+        "timeInPosition": 4
+    },
+    {
+        "id": 93,
+        "name": "Robert Orr",
+        "reportsTo": 90,
+        "phone": "(977) 341-3721",
+        "extension": 9241,
+        "hireDate": new Date(2012, 8, 20),
+        "fullTime": false,
+        "position": "Support Officer",
+        "timeInPosition": 6
+    },
+    {
+        "id": 94,
+        "name": "Adria Stanley",
+        "reportsTo": 69,
+        "phone": "(536) 357-6391",
+        "extension": 3374,
+        "hireDate": new Date(2014, 7, 26),
+        "fullTime": true,
+        "position": "Software Developer",
+        "timeInPosition": 0
+    },
+    {
+        "id": 95,
+        "name": "Odette Sears",
+        "reportsTo": 90,
+        "phone": "(264) 818-6576",
+        "extension": 1914,
+        "hireDate": new Date(2013, 7, 5),
+        "fullTime": true,
+        "position": "Senior Software Developer",
+        "timeInPosition": 3
+    },
+    {
+        "id": 96,
+        "name": "Cassady Whitley",
+        "reportsTo": 40,
+        "phone": "(996) 587-8405",
+        "extension": 780,
+        "hireDate": new Date(2013, 5, 7),
+        "fullTime": true,
+        "position": "Software Developer",
+        "timeInPosition": 5
+    },
+    {
+        "id": 97,
+        "name": "Haviva Campbell",
+        "reportsTo": 40,
+        "phone": "(263) 887-4689",
+        "extension": 2808,
+        "hireDate": new Date(2013, 3, 5),
+        "fullTime": true,
+        "position": "Support Officer",
+        "timeInPosition": 2
+    },
+    {
+        "id": 98,
+        "name": "Cameron Ayers",
+        "reportsTo": 40,
+        "phone": "(470) 709-8030",
+        "extension": 2893,
+        "hireDate": new Date(2013, 8, 28),
+        "fullTime": true,
+        "position": "Support Officer",
+        "timeInPosition": 3
+    },
+    {
+        "id": 99,
+        "name": "Martha Sargent",
+        "reportsTo": 40,
+        "phone": "(587) 812-4418",
+        "extension": 5099,
+        "hireDate": new Date(2014, 2, 27),
+        "fullTime": true,
+        "position": "Senior Software Developer",
+        "timeInPosition": 3
+    },
+    {
+        "id": 100,
+        "name": "Darrel Kinney",
+        "reportsTo": 40,
+        "phone": "(888) 483-9606",
+        "extension": 4779,
+        "hireDate": new Date(2014, 3, 24),
+        "fullTime": false,
+        "position": "Graphic Designer",
+        "timeInPosition": 1
+    }
+];
+
+export default employeesFlat;
diff --git a/vue-options-api-demos/treelist/shared/pager.tsx b/vue-options-api-demos/treelist/shared/pager.tsx
new file mode 100644
index 00000000..c6673be3
--- /dev/null
+++ b/vue-options-api-demos/treelist/shared/pager.tsx
@@ -0,0 +1,14 @@
+
+import { Pager, PagerProps } from '@progress/kendo-vue-data-tools';
+
+export const TreeListPager = (props: PagerProps) => {
+    return (
+      <Pager
+        {...props}
+        previousNext={true}
+        buttonCount={8}
+            // Configure the Pager props here.
+            // See example: https://www.telerik.com/kendo-vue-ui/components/datatools/pager/
+        />
+    );
+}
diff --git a/vue-options-api-demos/treelist/shared/simple-data.js b/vue-options-api-demos/treelist/shared/simple-data.js
new file mode 100644
index 00000000..b35aca00
--- /dev/null
+++ b/vue-options-api-demos/treelist/shared/simple-data.js
@@ -0,0 +1,28 @@
+const data = [
+  {
+    id: 1,
+    name: "Daryl Sweeney",
+    title: "Chief Executive Officer",
+    phone: "(555) 924-9726",
+    managerId: null,
+    expanded: true,
+    employees: [
+      {
+        id: 2,
+        name: "Guy Wooten",
+        title: "Chief Technical Officer",
+        phone: "(438) 738-4935",
+        managerId: 1
+      }
+    ]
+  },
+  {
+    id: 32,
+    name: "Buffy Weber",
+    title: "VP, Engineering",
+    phone: "(699) 838-6121",
+    managerId: null
+  }
+];
+
+export default data;
diff --git a/vue-options-api-demos/treelist/shared/treelist-data.js b/vue-options-api-demos/treelist/shared/treelist-data.js
new file mode 100644
index 00000000..c5ec456c
--- /dev/null
+++ b/vue-options-api-demos/treelist/shared/treelist-data.js
@@ -0,0 +1,26 @@
+export function generateData(numberOfColumns, columnWidth, numberOfRows, subItemsField) {
+    const columns = [];
+    for (let c = 1; c <= numberOfColumns; c++) {
+        columns.push({ field: 'Field-' + c.toString(), width: columnWidth });
+    }
+    columns[0].expandable = true;
+
+    const data = [];
+    const reducer = (acc, cur) => {
+        acc[cur[0]] = cur[0] !== 'id' ? 'Sub ' + cur[1] : cur[0];
+        return acc;
+    };
+
+    for (let r = 1; r <= numberOfRows; r++) {
+        const row = { id: r };
+        for (let c = 1; c <= numberOfColumns; c++) {
+            row['Field-' + c] = 'R' + r + ':C' + c;
+        }
+
+        const subItem = Object.entries(row).reduce(reducer, {});
+        row[subItemsField] = [subItem, { ...subItem }, { ...subItem }];
+        data.push(row);
+    }
+
+    return { columns, data };
+}
diff --git a/vue-options-api-demos/treelist/sorting-basic/data.js b/vue-options-api-demos/treelist/sorting-basic/data.js
new file mode 100644
index 00000000..f66aec4d
--- /dev/null
+++ b/vue-options-api-demos/treelist/sorting-basic/data.js
@@ -0,0 +1,1150 @@
+
+const employees = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2,
+        "employees": [
+            {
+                "id": 2,
+                "name": "Guy Wooten",
+                "reportsTo": 1,
+                "phone": "(438) 738-4935",
+                "extension": 1155,
+                "hireDate": new Date(2010, 3, 3),
+                "fullTime": true,
+                "position": "Chief Technical Officer",
+                "timeInPosition": 1,
+                "employees": [
+                    {
+                        "id": 32,
+                        "name": "Buffy Weber",
+                        "reportsTo": 2,
+                        "phone": "(699) 838-6121",
+                        "extension": 8933,
+                        "hireDate": new Date(2011, 7, 11),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 11,
+                                "name": "Hyacinth Hood",
+                                "reportsTo": 32,
+                                "phone": "(889) 345-2438",
+                                "extension": 8564,
+                                "hireDate": new Date(2014, 2, 3),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 60,
+                                        "name": "Akeem Carr",
+                                        "reportsTo": 11,
+                                        "phone": "(738) 136-2814",
+                                        "extension": 9353,
+                                        "hireDate": new Date(2011, 4, 21),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 78,
+                                        "name": "Rinah Simon",
+                                        "reportsTo": 11,
+                                        "phone": "(285) 912-5271",
+                                        "extension": 7795,
+                                        "hireDate": new Date(2012, 10, 11),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 42,
+                                "name": "Gage Daniels",
+                                "reportsTo": 32,
+                                "phone": "(107) 290-6260",
+                                "extension": 896,
+                                "hireDate": new Date(2013, 5, 16),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 5
+                            },
+                            {
+                                "id": 43,
+                                "name": "Constance Vazquez",
+                                "reportsTo": 32,
+                                "phone": "(800) 301-1978",
+                                "extension": 5141,
+                                "hireDate": new Date(2011, 6, 7),
+                                "fullTime": true,
+                                "position": "Director, Engineering",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 46,
+                                        "name": "Darrel Solis",
+                                        "reportsTo": 43,
+                                        "phone": "(327) 977-0216",
+                                        "extension": 7779,
+                                        "hireDate": new Date(2015, 4, 25),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 47,
+                                                "name": "Brian Yang",
+                                                "reportsTo": 46,
+                                                "phone": "(565) 146-5435",
+                                                "extension": 3885,
+                                                "hireDate": new Date(2012, 9, 27),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 50,
+                                                "name": "Lillian Bradshaw",
+                                                "reportsTo": 46,
+                                                "phone": "(323) 509-3479",
+                                                "extension": 5426,
+                                                "hireDate": new Date(2014, 5, 10),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 51,
+                                                "name": "Christian Palmer",
+                                                "reportsTo": 46,
+                                                "phone": "(490) 421-8718",
+                                                "extension": 3706,
+                                                "hireDate": new Date(2012, 12, 27),
+                                                "fullTime": false,
+                                                "position": "Technical Lead",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 55,
+                                                "name": "Summer Mosley",
+                                                "reportsTo": 46,
+                                                "phone": "(784) 962-2301",
+                                                "extension": 5492,
+                                                "hireDate": new Date(2010, 3, 2),
+                                                "fullTime": true,
+                                                "position": "QA Engineer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 56,
+                                                "name": "Barry Ayers",
+                                                "reportsTo": 46,
+                                                "phone": "(452) 373-9227",
+                                                "extension": 1308,
+                                                "hireDate": new Date(2011, 10, 11),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 59,
+                                                "name": "Keiko Espinoza",
+                                                "reportsTo": 46,
+                                                "phone": "(226) 600-5305",
+                                                "extension": 9363,
+                                                "hireDate": new Date(2011, 9, 18),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 61,
+                                                "name": "Candace Pickett",
+                                                "reportsTo": 46,
+                                                "phone": "(120) 117-7475",
+                                                "extension": 5178,
+                                                "hireDate": new Date(2010, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 63,
+                                        "name": "Mia Caldwell",
+                                        "reportsTo": 43,
+                                        "phone": "(848) 636-6470",
+                                        "extension": 6368,
+                                        "hireDate": new Date(2012, 10, 7),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 65,
+                                                "name": "Thomas Terry",
+                                                "reportsTo": 63,
+                                                "phone": "(764) 831-4248",
+                                                "extension": 3574,
+                                                "hireDate": new Date(2015, 6, 15),
+                                                "fullTime": false,
+                                                "position": "Senior Enterprise Support Officer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 67,
+                                                "name": "Ruth Downs",
+                                                "reportsTo": 63,
+                                                "phone": "(138) 991-1440",
+                                                "extension": 8067,
+                                                "hireDate": new Date(2013, 7, 13),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 70,
+                                                "name": "Yasir Wilder",
+                                                "reportsTo": 63,
+                                                "phone": "(759) 701-8665",
+                                                "extension": 8350,
+                                                "hireDate": new Date(2010, 11, 8),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 71,
+                                                "name": "Flavia Short",
+                                                "reportsTo": 63,
+                                                "phone": "(370) 133-9238",
+                                                "extension": 6390,
+                                                "hireDate": new Date(2013, 2, 21),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 74,
+                                                "name": "Aaron Roach",
+                                                "reportsTo": 63,
+                                                "phone": "(958) 717-9230",
+                                                "extension": 4899,
+                                                "hireDate": new Date(2011, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 75,
+                                                "name": "Eric Russell",
+                                                "reportsTo": 63,
+                                                "phone": "(516) 575-8505",
+                                                "extension": 2224,
+                                                "hireDate": new Date(2012, 10, 28),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 76,
+                                                "name": "Cheyenne Olson",
+                                                "reportsTo": 63,
+                                                "phone": "(241) 645-0257",
+                                                "extension": 9181,
+                                                "hireDate": new Date(2015, 5, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 77,
+                                                "name": "Shaine Avila",
+                                                "reportsTo": 63,
+                                                "phone": "(844) 435-1360",
+                                                "extension": 3374,
+                                                "hireDate": new Date(2010, 1, 31),
+                                                "fullTime": true,
+                                                "position": "UI Designer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 81,
+                                                "name": "Chantale Long",
+                                                "reportsTo": 63,
+                                                "phone": "(252) 419-6891",
+                                                "extension": 7868,
+                                                "hireDate": new Date(2010, 6, 17),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 83,
+                                                "name": "Dane Cruz",
+                                                "reportsTo": 63,
+                                                "phone": "(946) 701-6165",
+                                                "extension": 3828,
+                                                "hireDate": new Date(2014, 10, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 84,
+                                                "name": "Regan Patterson",
+                                                "reportsTo": 63,
+                                                "phone": "(265) 946-1765",
+                                                "extension": 6955,
+                                                "hireDate": new Date(2012, 3, 1),
+                                                "fullTime": true,
+                                                "position": "Technical Writer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 85,
+                                                "name": "Drew Mckay",
+                                                "reportsTo": 63,
+                                                "phone": "(327) 293-0162",
+                                                "extension": 6904,
+                                                "hireDate": new Date(2011, 3, 25),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 88,
+                                                "name": "Bevis Miller",
+                                                "reportsTo": 63,
+                                                "phone": "(525) 557-0169",
+                                                "extension": 6978,
+                                                "hireDate": new Date(2011, 4, 19),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 89,
+                                                "name": "Bruce Mccarty",
+                                                "reportsTo": 63,
+                                                "phone": "(936) 777-8730",
+                                                "extension": 6552,
+                                                "hireDate": new Date(2014, 3, 28),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 5
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 90,
+                                        "name": "Ocean Blair",
+                                        "reportsTo": 43,
+                                        "phone": "(343) 586-6614",
+                                        "extension": 1424,
+                                        "hireDate": new Date(2011, 4, 27),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 91,
+                                                "name": "Guinevere Osborn",
+                                                "reportsTo": 90,
+                                                "phone": "(424) 741-0006",
+                                                "extension": 3166,
+                                                "hireDate": new Date(2014, 11, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 92,
+                                                "name": "Olga Strong",
+                                                "reportsTo": 90,
+                                                "phone": "(949) 417-1168",
+                                                "extension": 4568,
+                                                "hireDate": new Date(2015, 5, 28),
+                                                "fullTime": true,
+                                                "position": "Graphic Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 93,
+                                                "name": "Robert Orr",
+                                                "reportsTo": 90,
+                                                "phone": "(977) 341-3721",
+                                                "extension": 9241,
+                                                "hireDate": new Date(2012, 8, 20),
+                                                "fullTime": false,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 95,
+                                                "name": "Odette Sears",
+                                                "reportsTo": 90,
+                                                "phone": "(264) 818-6576",
+                                                "extension": 1914,
+                                                "hireDate": new Date(2013, 7, 5),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 45,
+                                "name": "Zelda Medina",
+                                "reportsTo": 32,
+                                "phone": "(563) 359-6023",
+                                "extension": 2600,
+                                "hireDate": new Date(2012, 11, 6),
+                                "fullTime": true,
+                                "position": "QA Architect",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    },
+                    {
+                        "id": 52,
+                        "name": "Skyler Cleveland",
+                        "reportsTo": 2,
+                        "phone": "(217) 280-5300",
+                        "extension": 9655,
+                        "hireDate": new Date(2014, 11, 10),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 40,
+                                "name": "Karleigh Garza",
+                                "reportsTo": 52,
+                                "phone": "(370) 983-8796",
+                                "extension": 4044,
+                                "hireDate": new Date(2014, 3, 10),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 49,
+                                        "name": "Elmo Tyson",
+                                        "reportsTo": 40,
+                                        "phone": "(344) 496-9555",
+                                        "extension": 6950,
+                                        "hireDate": new Date(2014, 9, 18),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 72,
+                                        "name": "Stacey Lynn",
+                                        "reportsTo": 40,
+                                        "phone": "(140) 772-7509",
+                                        "extension": 8396,
+                                        "hireDate": new Date(2014, 7, 31),
+                                        "fullTime": false,
+                                        "position": "QA Engineer",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 80,
+                                                "name": "Meredith Parrish",
+                                                "reportsTo": 72,
+                                                "phone": "(714) 284-2408",
+                                                "extension": 7675,
+                                                "hireDate": new Date(2012, 11, 13),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 96,
+                                        "name": "Cassady Whitley",
+                                        "reportsTo": 40,
+                                        "phone": "(996) 587-8405",
+                                        "extension": 780,
+                                        "hireDate": new Date(2013, 5, 7),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 5
+                                    },
+                                    {
+                                        "id": 97,
+                                        "name": "Haviva Campbell",
+                                        "reportsTo": 40,
+                                        "phone": "(263) 887-4689",
+                                        "extension": 2808,
+                                        "hireDate": new Date(2013, 3, 5),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 98,
+                                        "name": "Cameron Ayers",
+                                        "reportsTo": 40,
+                                        "phone": "(470) 709-8030",
+                                        "extension": 2893,
+                                        "hireDate": new Date(2013, 8, 28),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 99,
+                                        "name": "Martha Sargent",
+                                        "reportsTo": 40,
+                                        "phone": "(587) 812-4418",
+                                        "extension": 5099,
+                                        "hireDate": new Date(2014, 2, 27),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 100,
+                                        "name": "Darrel Kinney",
+                                        "reportsTo": 40,
+                                        "phone": "(888) 483-9606",
+                                        "extension": 4779,
+                                        "hireDate": new Date(2014, 3, 24),
+                                        "fullTime": false,
+                                        "position": "Graphic Designer",
+                                        "timeInPosition": 1
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 54,
+                                "name": "Kuame Frye",
+                                "reportsTo": 52,
+                                "phone": "(360) 721-5886",
+                                "extension": 2730,
+                                "hireDate": new Date(2010, 11, 17),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 64,
+                                        "name": "Ori Wynn",
+                                        "reportsTo": 54,
+                                        "phone": "(366) 342-0166",
+                                        "extension": 7252,
+                                        "hireDate": new Date(2015, 6, 21),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 0,
+                                        "employees": [
+                                            {
+                                                "id": 6,
+                                                "name": "Moses Duncan",
+                                                "reportsTo": 64,
+                                                "phone": "(421) 611-4814",
+                                                "extension": 669,
+                                                "hireDate": new Date(2010, 5, 24),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 12,
+                                                "name": "Jamalia Wallace",
+                                                "reportsTo": 64,
+                                                "phone": "(611) 391-8016",
+                                                "extension": 1952,
+                                                "hireDate": new Date(2011, 9, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Designer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 62,
+                                                "name": "Palmer Gregory",
+                                                "reportsTo": 64,
+                                                "phone": "(360) 430-2505",
+                                                "extension": 4337,
+                                                "hireDate": new Date(2014, 8, 30),
+                                                "fullTime": true,
+                                                "position": "Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 68,
+                                                "name": "Mallory Gilliam",
+                                                "reportsTo": 64,
+                                                "phone": "(878) 423-2971",
+                                                "extension": 1341,
+                                                "hireDate": new Date(2014, 7, 24),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 73,
+                                                "name": "Ima Hughes",
+                                                "reportsTo": 64,
+                                                "phone": "(905) 485-8001",
+                                                "extension": 1273,
+                                                "hireDate": new Date(2013, 6, 3),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 79,
+                                                "name": "Duncan Mathews",
+                                                "reportsTo": 64,
+                                                "phone": "(790) 971-9709",
+                                                "extension": 4573,
+                                                "hireDate": new Date(2011, 8, 21),
+                                                "fullTime": false,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 69,
+                                "name": "Sierra Beasley",
+                                "reportsTo": 52,
+                                "phone": "(271) 953-1968",
+                                "extension": 3324,
+                                "hireDate": new Date(2011, 4, 2),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 3,
+                                "employees": [
+                                    {
+                                        "id": 38,
+                                        "name": "Elton Tucker",
+                                        "reportsTo": 69,
+                                        "phone": "(988) 930-9331",
+                                        "extension": 9216,
+                                        "hireDate": new Date(2015, 6, 4),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 1
+                                    },
+                                    {
+                                        "id": 39,
+                                        "name": "Iona Brennan",
+                                        "reportsTo": 69,
+                                        "phone": "(356) 563-0600",
+                                        "extension": 5634,
+                                        "hireDate": new Date(2010, 9, 23),
+                                        "fullTime": true,
+                                        "position": "Junior Support Officer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 53,
+                                        "name": "Paul Campos",
+                                        "reportsTo": 69,
+                                        "phone": "(899) 205-1689",
+                                        "extension": 8586,
+                                        "hireDate": new Date(2011, 3, 17),
+                                        "fullTime": true,
+                                        "position": "Interaction Designer",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 66,
+                                                "name": "Gloria Freeman",
+                                                "reportsTo": 53,
+                                                "phone": "(344) 950-9168",
+                                                "extension": 4738,
+                                                "hireDate": new Date(2013, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Junior Interaction Designer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 57,
+                                        "name": "Alyssa Hansen",
+                                        "reportsTo": 69,
+                                        "phone": "(548) 925-4799",
+                                        "extension": 4716,
+                                        "hireDate": new Date(2011, 1, 19),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 82,
+                                        "name": "Yael Walters",
+                                        "reportsTo": 69,
+                                        "phone": "(311) 489-8191",
+                                        "extension": 6520,
+                                        "hireDate": new Date(2013, 7, 4),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 87,
+                                        "name": "Dahlia Hunt",
+                                        "reportsTo": 69,
+                                        "phone": "(720) 339-5202",
+                                        "extension": 3690,
+                                        "hireDate": new Date(2011, 3, 26),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 94,
+                                        "name": "Adria Stanley",
+                                        "reportsTo": 69,
+                                        "phone": "(536) 357-6391",
+                                        "extension": 3374,
+                                        "hireDate": new Date(2014, 7, 26),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "Priscilla Frank",
+                "reportsTo": 1,
+                "phone": "(278) 927-2684",
+                "extension": 4183,
+                "hireDate": new Date(2014, 11, 30),
+                "fullTime": true,
+                "position": "Chief Product Officer",
+                "timeInPosition": 2,
+                "employees": [
+                    {
+                        "id": 4,
+                        "name": "Ursula Holmes",
+                        "reportsTo": 3,
+                        "phone": "(302) 760-2034",
+                        "extension": 2226,
+                        "hireDate": new Date(2011, 6, 6),
+                        "fullTime": true,
+                        "position": "EVP, Product Strategy",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 24,
+                        "name": "Melvin Carrillo",
+                        "reportsTo": 3,
+                        "phone": "(348) 933-5167",
+                        "extension": 2482,
+                        "hireDate": new Date(2014, 7, 21),
+                        "fullTime": true,
+                        "position": "Director, Developer Relations",
+                        "timeInPosition": 6,
+                        "employees": [
+                            {
+                                "id": 29,
+                                "name": "Martha Chavez",
+                                "reportsTo": 24,
+                                "phone": "(860) 754-3464",
+                                "extension": 4531,
+                                "hireDate": new Date(2013, 3, 12),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 30,
+                                "name": "Oren Fox",
+                                "reportsTo": 24,
+                                "phone": "(572) 414-3299",
+                                "extension": 4849,
+                                "hireDate": new Date(2013, 5, 14),
+                                "fullTime": false,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 41,
+                                "name": "Amos Barr",
+                                "reportsTo": 24,
+                                "phone": "(470) 381-3718",
+                                "extension": 7643,
+                                "hireDate": new Date(2010, 3, 9),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "Anika Vega",
+                "reportsTo": 1,
+                "phone": "(910) 714-1802",
+                "extension": 6353,
+                "hireDate": new Date(2010, 2, 25),
+                "fullTime": true,
+                "position": "Chief Process Officer",
+                "timeInPosition": 5,
+                "employees": [
+                    {
+                        "id": 10,
+                        "name": "Vernon Ballard",
+                        "reportsTo": 5,
+                        "phone": "(702) 185-8890",
+                        "extension": 9242,
+                        "hireDate": new Date(2015, 6, 26),
+                        "fullTime": true,
+                        "position": "Director Facilities",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 16,
+                                "name": "Ali Guy",
+                                "reportsTo": 10,
+                                "phone": "(429) 912-6578",
+                                "extension": 2225,
+                                "hireDate": new Date(2014, 6, 29),
+                                "fullTime": true,
+                                "position": "Operations Manager",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 23,
+                                        "name": "Bruce Reilly",
+                                        "reportsTo": 16,
+                                        "phone": "(995) 243-7302",
+                                        "extension": 4815,
+                                        "hireDate": new Date(2015, 4, 1),
+                                        "fullTime": true,
+                                        "position": "Head of Security",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 26,
+                                                "name": "Rowan Morin",
+                                                "reportsTo": 23,
+                                                "phone": "(792) 141-4374",
+                                                "extension": 1844,
+                                                "hireDate": new Date(2015, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Building Security",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 44,
+                                                "name": "Benedict Soto",
+                                                "reportsTo": 23,
+                                                "phone": "(822) 282-5991",
+                                                "extension": 6422,
+                                                "hireDate": new Date(2012, 6, 1),
+                                                "fullTime": false,
+                                                "position": "Building Security",
+                                                "timeInPosition": 4
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 48,
+                                        "name": "Maryam Rios",
+                                        "reportsTo": 16,
+                                        "phone": "(673) 764-6720",
+                                        "extension": 531,
+                                        "hireDate": new Date(2014, 3, 3),
+                                        "fullTime": true,
+                                        "position": "Team Lead, Personal Assistants",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 58,
+                                                "name": "Rose Mcintyre",
+                                                "reportsTo": 48,
+                                                "phone": "(771) 615-4590",
+                                                "extension": 7094,
+                                                "hireDate": new Date(2015, 6, 30),
+                                                "fullTime": false,
+                                                "position": "Personal Assistant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "Nevada Hart",
+                "reportsTo": 1,
+                "phone": "(254) 220-1576",
+                "extension": 6649,
+                "hireDate": new Date(2015, 8, 17),
+                "fullTime": true,
+                "position": "Chief Financial Officer",
+                "timeInPosition": 6,
+                "employees": [
+                    {
+                        "id": 14,
+                        "name": "Zena Sanford",
+                        "reportsTo": 7,
+                        "phone": "(437) 568-8160",
+                        "extension": 4452,
+                        "hireDate": new Date(2010, 11, 30),
+                        "fullTime": true,
+                        "position": "VP, Finance",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 15,
+                        "name": "Quinlan Howe",
+                        "reportsTo": 7,
+                        "phone": "(464) 334-9748",
+                        "extension": 8722,
+                        "hireDate": new Date(2011, 6, 9),
+                        "fullTime": false,
+                        "position": "Senior Director, Finance",
+                        "timeInPosition": 0,
+                        "employees": [
+                            {
+                                "id": 17,
+                                "name": "Indira Lopez",
+                                "reportsTo": 15,
+                                "phone": "(301) 368-0938",
+                                "extension": 8027,
+                                "hireDate": new Date(2013, 8, 18),
+                                "fullTime": true,
+                                "position": "ERP Team Lead",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 18,
+                                        "name": "Lareina Lara",
+                                        "reportsTo": 17,
+                                        "phone": "(233) 457-7482",
+                                        "extension": 1996,
+                                        "hireDate": new Date(2010, 4, 30),
+                                        "fullTime": true,
+                                        "position": "ERP Solutions Consultant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 19,
+                                        "name": "Maxwell Wise",
+                                        "reportsTo": 17,
+                                        "phone": "(570) 494-2531",
+                                        "extension": 9865,
+                                        "hireDate": new Date(2012, 5, 19),
+                                        "fullTime": true,
+                                        "position": "Systems Engineer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 20,
+                                "name": "Hunter Mcbride",
+                                "reportsTo": 15,
+                                "phone": "(409) 442-7016",
+                                "extension": 4284,
+                                "hireDate": new Date(2012, 10, 20),
+                                "fullTime": true,
+                                "position": "Senior Director, Tax",
+                                "timeInPosition": 3
+                            },
+                            {
+                                "id": 21,
+                                "name": "Jana Serrano",
+                                "reportsTo": 15,
+                                "phone": "(910) 718-4620",
+                                "extension": 6970,
+                                "hireDate": new Date(2010, 4, 2),
+                                "fullTime": true,
+                                "position": "Financial Planning & Analysis Manager",
+                                "timeInPosition": 2
+                            },
+                            {
+                                "id": 22,
+                                "name": "Zachery Shelton",
+                                "reportsTo": 15,
+                                "phone": "(310) 240-8675",
+                                "extension": 4527,
+                                "hireDate": new Date(2011, 11, 23),
+                                "fullTime": false,
+                                "position": "Corporate Finance Controller",
+                                "timeInPosition": 6,
+                                "employees": [
+                                    {
+                                        "id": 28,
+                                        "name": "Cullen Freeman",
+                                        "reportsTo": 22,
+                                        "phone": "(136) 554-8814",
+                                        "extension": 9861,
+                                        "hireDate": new Date(2014, 3, 15),
+                                        "fullTime": true,
+                                        "position": "Treasurer Accountant",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 31,
+                                        "name": "Quinn Dean",
+                                        "reportsTo": 22,
+                                        "phone": "(152) 613-3507",
+                                        "extension": 6621,
+                                        "hireDate": new Date(2015, 1, 29),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 34,
+                                        "name": "Samantha Brady",
+                                        "reportsTo": 22,
+                                        "phone": "(206) 398-4328",
+                                        "extension": 1157,
+                                        "hireDate": new Date(2011, 2, 13),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 35,
+                                                "name": "Tamara Green",
+                                                "reportsTo": 34,
+                                                "phone": "(219) 248-2789",
+                                                "extension": 4880,
+                                                "hireDate": new Date(2014, 2, 4),
+                                                "fullTime": true,
+                                                "position": "Junior Accountant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 36,
+                                        "name": "Olympia Coleman",
+                                        "reportsTo": 22,
+                                        "phone": "(944) 853-6383",
+                                        "extension": 2136,
+                                        "hireDate": new Date(2013, 7, 31),
+                                        "fullTime": true,
+                                        "position": "Collections Manager",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 37,
+                                        "name": "Breanna Goodwin",
+                                        "reportsTo": 22,
+                                        "phone": "(379) 988-9630",
+                                        "extension": 5898,
+                                        "hireDate": new Date(2010, 5, 23),
+                                        "fullTime": false,
+                                        "position": "Payroll Specialist",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 27,
+                                "name": "Curran Travis",
+                                "reportsTo": 15,
+                                "phone": "(438) 135-8033",
+                                "extension": 3841,
+                                "hireDate": new Date(2011, 6, 13),
+                                "fullTime": true,
+                                "position": "Finance Controller",
+                                "timeInPosition": 5
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "Hunter Fry",
+                "reportsTo": 1,
+                "phone": "(766) 358-9858",
+                "extension": 3741,
+                "hireDate": new Date(2011, 2, 12),
+                "fullTime": false,
+                "position": "General Counsel",
+                "timeInPosition": 3,
+                "employees": [
+                    {
+                        "id": 9,
+                        "name": "Kuame Carrillo",
+                        "reportsTo": 8,
+                        "phone": "(192) 383-1305",
+                        "extension": 9228,
+                        "hireDate": new Date(2011, 2, 22),
+                        "fullTime": true,
+                        "position": "Associate General Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 13,
+                        "name": "Stacy Todd",
+                        "reportsTo": 8,
+                        "phone": "(925) 286-3327",
+                        "extension": 8565,
+                        "hireDate": new Date(2014, 7, 5),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 33,
+                        "name": "Valentine Wyatt",
+                        "reportsTo": 8,
+                        "phone": "(165) 166-6205",
+                        "extension": 3588,
+                        "hireDate": new Date(2015, 5, 21),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 5
+                    },
+                    {
+                        "id": 86,
+                        "name": "Daniel Mccarthy",
+                        "reportsTo": 8,
+                        "phone": "(624) 483-6206",
+                        "extension": 9112,
+                        "hireDate": new Date(2013, 12, 3),
+                        "fullTime": false,
+                        "position": "Staff Attorney",
+                        "timeInPosition": 0
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default employees;
diff --git a/vue-options-api-demos/treelist/sorting-basic/main.js b/vue-options-api-demos/treelist/sorting-basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/sorting-basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/sorting-basic/main.vue b/vue-options-api-demos/treelist/sorting-basic/main.vue
new file mode 100644
index 00000000..d8693252
--- /dev/null
+++ b/vue-options-api-demos/treelist/sorting-basic/main.vue
@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <TreeList
+      :style="{
+        maxHeight: '510px',
+        overflow: 'auto',
+      }"
+      :expand-field="expandField"
+      :sub-items-field="subItemsField"
+      @expandchange="onExpandChange"
+      :sort="sort"
+      :sortable="true"
+      :data-items="processedData"
+      @sortchange="handleSortChange"
+      :columns="columns"
+    />
+  </div>
+</template>
+
+<script>
+import employees from './data';
+import {
+  TreeList,
+  orderBy,
+  extendDataItem,
+  mapTree,
+} from '@progress/kendo-vue-treelist';
+
+export default {
+  components: {
+    TreeList,
+  },
+  data() {
+    return {
+      dataItems: [...employees],
+      expanded: [1, 2, 32],
+      subItemsField: 'employees',
+      expandField: 'expanded',
+      sort: [
+        {
+          field: 'name',
+          dir: 'asc',
+        },
+      ],
+      columns: [
+        {
+          field: 'name',
+          title: 'Name',
+          width: '310px',
+          expandable: true,
+        },
+        {
+          field: 'position',
+          title: 'Position',
+          width: '260px',
+        },
+        {
+          field: 'hireDate',
+          title: 'Hire Date',
+          width: '160px',
+          format: '{0:d}',
+        },
+        {
+          field: 'timeInPosition',
+          title: 'Year(s) in Position',
+          width: '160px',
+        },
+        {
+          field: 'fullTime',
+          title: 'Full Time',
+          width: '150px',
+        },
+      ],
+    };
+  },
+  computed: {
+    processedData() {
+      let data = this.dataItems;
+      return this.addExpandField(orderBy(data, this.sort, this.subItemsField));
+    },
+  },
+  methods: {
+    handleSortChange(event) {
+      this.sort = event.sort;
+    },
+    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>
diff --git a/vue-options-api-demos/treelist/sorting-customization/data.js b/vue-options-api-demos/treelist/sorting-customization/data.js
new file mode 100644
index 00000000..f66aec4d
--- /dev/null
+++ b/vue-options-api-demos/treelist/sorting-customization/data.js
@@ -0,0 +1,1150 @@
+
+const employees = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2,
+        "employees": [
+            {
+                "id": 2,
+                "name": "Guy Wooten",
+                "reportsTo": 1,
+                "phone": "(438) 738-4935",
+                "extension": 1155,
+                "hireDate": new Date(2010, 3, 3),
+                "fullTime": true,
+                "position": "Chief Technical Officer",
+                "timeInPosition": 1,
+                "employees": [
+                    {
+                        "id": 32,
+                        "name": "Buffy Weber",
+                        "reportsTo": 2,
+                        "phone": "(699) 838-6121",
+                        "extension": 8933,
+                        "hireDate": new Date(2011, 7, 11),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 11,
+                                "name": "Hyacinth Hood",
+                                "reportsTo": 32,
+                                "phone": "(889) 345-2438",
+                                "extension": 8564,
+                                "hireDate": new Date(2014, 2, 3),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 60,
+                                        "name": "Akeem Carr",
+                                        "reportsTo": 11,
+                                        "phone": "(738) 136-2814",
+                                        "extension": 9353,
+                                        "hireDate": new Date(2011, 4, 21),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 78,
+                                        "name": "Rinah Simon",
+                                        "reportsTo": 11,
+                                        "phone": "(285) 912-5271",
+                                        "extension": 7795,
+                                        "hireDate": new Date(2012, 10, 11),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 42,
+                                "name": "Gage Daniels",
+                                "reportsTo": 32,
+                                "phone": "(107) 290-6260",
+                                "extension": 896,
+                                "hireDate": new Date(2013, 5, 16),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 5
+                            },
+                            {
+                                "id": 43,
+                                "name": "Constance Vazquez",
+                                "reportsTo": 32,
+                                "phone": "(800) 301-1978",
+                                "extension": 5141,
+                                "hireDate": new Date(2011, 6, 7),
+                                "fullTime": true,
+                                "position": "Director, Engineering",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 46,
+                                        "name": "Darrel Solis",
+                                        "reportsTo": 43,
+                                        "phone": "(327) 977-0216",
+                                        "extension": 7779,
+                                        "hireDate": new Date(2015, 4, 25),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 47,
+                                                "name": "Brian Yang",
+                                                "reportsTo": 46,
+                                                "phone": "(565) 146-5435",
+                                                "extension": 3885,
+                                                "hireDate": new Date(2012, 9, 27),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 50,
+                                                "name": "Lillian Bradshaw",
+                                                "reportsTo": 46,
+                                                "phone": "(323) 509-3479",
+                                                "extension": 5426,
+                                                "hireDate": new Date(2014, 5, 10),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 51,
+                                                "name": "Christian Palmer",
+                                                "reportsTo": 46,
+                                                "phone": "(490) 421-8718",
+                                                "extension": 3706,
+                                                "hireDate": new Date(2012, 12, 27),
+                                                "fullTime": false,
+                                                "position": "Technical Lead",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 55,
+                                                "name": "Summer Mosley",
+                                                "reportsTo": 46,
+                                                "phone": "(784) 962-2301",
+                                                "extension": 5492,
+                                                "hireDate": new Date(2010, 3, 2),
+                                                "fullTime": true,
+                                                "position": "QA Engineer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 56,
+                                                "name": "Barry Ayers",
+                                                "reportsTo": 46,
+                                                "phone": "(452) 373-9227",
+                                                "extension": 1308,
+                                                "hireDate": new Date(2011, 10, 11),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 59,
+                                                "name": "Keiko Espinoza",
+                                                "reportsTo": 46,
+                                                "phone": "(226) 600-5305",
+                                                "extension": 9363,
+                                                "hireDate": new Date(2011, 9, 18),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 61,
+                                                "name": "Candace Pickett",
+                                                "reportsTo": 46,
+                                                "phone": "(120) 117-7475",
+                                                "extension": 5178,
+                                                "hireDate": new Date(2010, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 63,
+                                        "name": "Mia Caldwell",
+                                        "reportsTo": 43,
+                                        "phone": "(848) 636-6470",
+                                        "extension": 6368,
+                                        "hireDate": new Date(2012, 10, 7),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 65,
+                                                "name": "Thomas Terry",
+                                                "reportsTo": 63,
+                                                "phone": "(764) 831-4248",
+                                                "extension": 3574,
+                                                "hireDate": new Date(2015, 6, 15),
+                                                "fullTime": false,
+                                                "position": "Senior Enterprise Support Officer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 67,
+                                                "name": "Ruth Downs",
+                                                "reportsTo": 63,
+                                                "phone": "(138) 991-1440",
+                                                "extension": 8067,
+                                                "hireDate": new Date(2013, 7, 13),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 70,
+                                                "name": "Yasir Wilder",
+                                                "reportsTo": 63,
+                                                "phone": "(759) 701-8665",
+                                                "extension": 8350,
+                                                "hireDate": new Date(2010, 11, 8),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 71,
+                                                "name": "Flavia Short",
+                                                "reportsTo": 63,
+                                                "phone": "(370) 133-9238",
+                                                "extension": 6390,
+                                                "hireDate": new Date(2013, 2, 21),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 74,
+                                                "name": "Aaron Roach",
+                                                "reportsTo": 63,
+                                                "phone": "(958) 717-9230",
+                                                "extension": 4899,
+                                                "hireDate": new Date(2011, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 75,
+                                                "name": "Eric Russell",
+                                                "reportsTo": 63,
+                                                "phone": "(516) 575-8505",
+                                                "extension": 2224,
+                                                "hireDate": new Date(2012, 10, 28),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 76,
+                                                "name": "Cheyenne Olson",
+                                                "reportsTo": 63,
+                                                "phone": "(241) 645-0257",
+                                                "extension": 9181,
+                                                "hireDate": new Date(2015, 5, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 77,
+                                                "name": "Shaine Avila",
+                                                "reportsTo": 63,
+                                                "phone": "(844) 435-1360",
+                                                "extension": 3374,
+                                                "hireDate": new Date(2010, 1, 31),
+                                                "fullTime": true,
+                                                "position": "UI Designer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 81,
+                                                "name": "Chantale Long",
+                                                "reportsTo": 63,
+                                                "phone": "(252) 419-6891",
+                                                "extension": 7868,
+                                                "hireDate": new Date(2010, 6, 17),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 83,
+                                                "name": "Dane Cruz",
+                                                "reportsTo": 63,
+                                                "phone": "(946) 701-6165",
+                                                "extension": 3828,
+                                                "hireDate": new Date(2014, 10, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 84,
+                                                "name": "Regan Patterson",
+                                                "reportsTo": 63,
+                                                "phone": "(265) 946-1765",
+                                                "extension": 6955,
+                                                "hireDate": new Date(2012, 3, 1),
+                                                "fullTime": true,
+                                                "position": "Technical Writer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 85,
+                                                "name": "Drew Mckay",
+                                                "reportsTo": 63,
+                                                "phone": "(327) 293-0162",
+                                                "extension": 6904,
+                                                "hireDate": new Date(2011, 3, 25),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 88,
+                                                "name": "Bevis Miller",
+                                                "reportsTo": 63,
+                                                "phone": "(525) 557-0169",
+                                                "extension": 6978,
+                                                "hireDate": new Date(2011, 4, 19),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 89,
+                                                "name": "Bruce Mccarty",
+                                                "reportsTo": 63,
+                                                "phone": "(936) 777-8730",
+                                                "extension": 6552,
+                                                "hireDate": new Date(2014, 3, 28),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 5
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 90,
+                                        "name": "Ocean Blair",
+                                        "reportsTo": 43,
+                                        "phone": "(343) 586-6614",
+                                        "extension": 1424,
+                                        "hireDate": new Date(2011, 4, 27),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 91,
+                                                "name": "Guinevere Osborn",
+                                                "reportsTo": 90,
+                                                "phone": "(424) 741-0006",
+                                                "extension": 3166,
+                                                "hireDate": new Date(2014, 11, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 92,
+                                                "name": "Olga Strong",
+                                                "reportsTo": 90,
+                                                "phone": "(949) 417-1168",
+                                                "extension": 4568,
+                                                "hireDate": new Date(2015, 5, 28),
+                                                "fullTime": true,
+                                                "position": "Graphic Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 93,
+                                                "name": "Robert Orr",
+                                                "reportsTo": 90,
+                                                "phone": "(977) 341-3721",
+                                                "extension": 9241,
+                                                "hireDate": new Date(2012, 8, 20),
+                                                "fullTime": false,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 95,
+                                                "name": "Odette Sears",
+                                                "reportsTo": 90,
+                                                "phone": "(264) 818-6576",
+                                                "extension": 1914,
+                                                "hireDate": new Date(2013, 7, 5),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 45,
+                                "name": "Zelda Medina",
+                                "reportsTo": 32,
+                                "phone": "(563) 359-6023",
+                                "extension": 2600,
+                                "hireDate": new Date(2012, 11, 6),
+                                "fullTime": true,
+                                "position": "QA Architect",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    },
+                    {
+                        "id": 52,
+                        "name": "Skyler Cleveland",
+                        "reportsTo": 2,
+                        "phone": "(217) 280-5300",
+                        "extension": 9655,
+                        "hireDate": new Date(2014, 11, 10),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 40,
+                                "name": "Karleigh Garza",
+                                "reportsTo": 52,
+                                "phone": "(370) 983-8796",
+                                "extension": 4044,
+                                "hireDate": new Date(2014, 3, 10),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 49,
+                                        "name": "Elmo Tyson",
+                                        "reportsTo": 40,
+                                        "phone": "(344) 496-9555",
+                                        "extension": 6950,
+                                        "hireDate": new Date(2014, 9, 18),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 72,
+                                        "name": "Stacey Lynn",
+                                        "reportsTo": 40,
+                                        "phone": "(140) 772-7509",
+                                        "extension": 8396,
+                                        "hireDate": new Date(2014, 7, 31),
+                                        "fullTime": false,
+                                        "position": "QA Engineer",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 80,
+                                                "name": "Meredith Parrish",
+                                                "reportsTo": 72,
+                                                "phone": "(714) 284-2408",
+                                                "extension": 7675,
+                                                "hireDate": new Date(2012, 11, 13),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 96,
+                                        "name": "Cassady Whitley",
+                                        "reportsTo": 40,
+                                        "phone": "(996) 587-8405",
+                                        "extension": 780,
+                                        "hireDate": new Date(2013, 5, 7),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 5
+                                    },
+                                    {
+                                        "id": 97,
+                                        "name": "Haviva Campbell",
+                                        "reportsTo": 40,
+                                        "phone": "(263) 887-4689",
+                                        "extension": 2808,
+                                        "hireDate": new Date(2013, 3, 5),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 98,
+                                        "name": "Cameron Ayers",
+                                        "reportsTo": 40,
+                                        "phone": "(470) 709-8030",
+                                        "extension": 2893,
+                                        "hireDate": new Date(2013, 8, 28),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 99,
+                                        "name": "Martha Sargent",
+                                        "reportsTo": 40,
+                                        "phone": "(587) 812-4418",
+                                        "extension": 5099,
+                                        "hireDate": new Date(2014, 2, 27),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 100,
+                                        "name": "Darrel Kinney",
+                                        "reportsTo": 40,
+                                        "phone": "(888) 483-9606",
+                                        "extension": 4779,
+                                        "hireDate": new Date(2014, 3, 24),
+                                        "fullTime": false,
+                                        "position": "Graphic Designer",
+                                        "timeInPosition": 1
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 54,
+                                "name": "Kuame Frye",
+                                "reportsTo": 52,
+                                "phone": "(360) 721-5886",
+                                "extension": 2730,
+                                "hireDate": new Date(2010, 11, 17),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 64,
+                                        "name": "Ori Wynn",
+                                        "reportsTo": 54,
+                                        "phone": "(366) 342-0166",
+                                        "extension": 7252,
+                                        "hireDate": new Date(2015, 6, 21),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 0,
+                                        "employees": [
+                                            {
+                                                "id": 6,
+                                                "name": "Moses Duncan",
+                                                "reportsTo": 64,
+                                                "phone": "(421) 611-4814",
+                                                "extension": 669,
+                                                "hireDate": new Date(2010, 5, 24),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 12,
+                                                "name": "Jamalia Wallace",
+                                                "reportsTo": 64,
+                                                "phone": "(611) 391-8016",
+                                                "extension": 1952,
+                                                "hireDate": new Date(2011, 9, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Designer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 62,
+                                                "name": "Palmer Gregory",
+                                                "reportsTo": 64,
+                                                "phone": "(360) 430-2505",
+                                                "extension": 4337,
+                                                "hireDate": new Date(2014, 8, 30),
+                                                "fullTime": true,
+                                                "position": "Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 68,
+                                                "name": "Mallory Gilliam",
+                                                "reportsTo": 64,
+                                                "phone": "(878) 423-2971",
+                                                "extension": 1341,
+                                                "hireDate": new Date(2014, 7, 24),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 73,
+                                                "name": "Ima Hughes",
+                                                "reportsTo": 64,
+                                                "phone": "(905) 485-8001",
+                                                "extension": 1273,
+                                                "hireDate": new Date(2013, 6, 3),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 79,
+                                                "name": "Duncan Mathews",
+                                                "reportsTo": 64,
+                                                "phone": "(790) 971-9709",
+                                                "extension": 4573,
+                                                "hireDate": new Date(2011, 8, 21),
+                                                "fullTime": false,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 69,
+                                "name": "Sierra Beasley",
+                                "reportsTo": 52,
+                                "phone": "(271) 953-1968",
+                                "extension": 3324,
+                                "hireDate": new Date(2011, 4, 2),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 3,
+                                "employees": [
+                                    {
+                                        "id": 38,
+                                        "name": "Elton Tucker",
+                                        "reportsTo": 69,
+                                        "phone": "(988) 930-9331",
+                                        "extension": 9216,
+                                        "hireDate": new Date(2015, 6, 4),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 1
+                                    },
+                                    {
+                                        "id": 39,
+                                        "name": "Iona Brennan",
+                                        "reportsTo": 69,
+                                        "phone": "(356) 563-0600",
+                                        "extension": 5634,
+                                        "hireDate": new Date(2010, 9, 23),
+                                        "fullTime": true,
+                                        "position": "Junior Support Officer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 53,
+                                        "name": "Paul Campos",
+                                        "reportsTo": 69,
+                                        "phone": "(899) 205-1689",
+                                        "extension": 8586,
+                                        "hireDate": new Date(2011, 3, 17),
+                                        "fullTime": true,
+                                        "position": "Interaction Designer",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 66,
+                                                "name": "Gloria Freeman",
+                                                "reportsTo": 53,
+                                                "phone": "(344) 950-9168",
+                                                "extension": 4738,
+                                                "hireDate": new Date(2013, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Junior Interaction Designer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 57,
+                                        "name": "Alyssa Hansen",
+                                        "reportsTo": 69,
+                                        "phone": "(548) 925-4799",
+                                        "extension": 4716,
+                                        "hireDate": new Date(2011, 1, 19),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 82,
+                                        "name": "Yael Walters",
+                                        "reportsTo": 69,
+                                        "phone": "(311) 489-8191",
+                                        "extension": 6520,
+                                        "hireDate": new Date(2013, 7, 4),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 87,
+                                        "name": "Dahlia Hunt",
+                                        "reportsTo": 69,
+                                        "phone": "(720) 339-5202",
+                                        "extension": 3690,
+                                        "hireDate": new Date(2011, 3, 26),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 94,
+                                        "name": "Adria Stanley",
+                                        "reportsTo": 69,
+                                        "phone": "(536) 357-6391",
+                                        "extension": 3374,
+                                        "hireDate": new Date(2014, 7, 26),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "Priscilla Frank",
+                "reportsTo": 1,
+                "phone": "(278) 927-2684",
+                "extension": 4183,
+                "hireDate": new Date(2014, 11, 30),
+                "fullTime": true,
+                "position": "Chief Product Officer",
+                "timeInPosition": 2,
+                "employees": [
+                    {
+                        "id": 4,
+                        "name": "Ursula Holmes",
+                        "reportsTo": 3,
+                        "phone": "(302) 760-2034",
+                        "extension": 2226,
+                        "hireDate": new Date(2011, 6, 6),
+                        "fullTime": true,
+                        "position": "EVP, Product Strategy",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 24,
+                        "name": "Melvin Carrillo",
+                        "reportsTo": 3,
+                        "phone": "(348) 933-5167",
+                        "extension": 2482,
+                        "hireDate": new Date(2014, 7, 21),
+                        "fullTime": true,
+                        "position": "Director, Developer Relations",
+                        "timeInPosition": 6,
+                        "employees": [
+                            {
+                                "id": 29,
+                                "name": "Martha Chavez",
+                                "reportsTo": 24,
+                                "phone": "(860) 754-3464",
+                                "extension": 4531,
+                                "hireDate": new Date(2013, 3, 12),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 30,
+                                "name": "Oren Fox",
+                                "reportsTo": 24,
+                                "phone": "(572) 414-3299",
+                                "extension": 4849,
+                                "hireDate": new Date(2013, 5, 14),
+                                "fullTime": false,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 41,
+                                "name": "Amos Barr",
+                                "reportsTo": 24,
+                                "phone": "(470) 381-3718",
+                                "extension": 7643,
+                                "hireDate": new Date(2010, 3, 9),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "Anika Vega",
+                "reportsTo": 1,
+                "phone": "(910) 714-1802",
+                "extension": 6353,
+                "hireDate": new Date(2010, 2, 25),
+                "fullTime": true,
+                "position": "Chief Process Officer",
+                "timeInPosition": 5,
+                "employees": [
+                    {
+                        "id": 10,
+                        "name": "Vernon Ballard",
+                        "reportsTo": 5,
+                        "phone": "(702) 185-8890",
+                        "extension": 9242,
+                        "hireDate": new Date(2015, 6, 26),
+                        "fullTime": true,
+                        "position": "Director Facilities",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 16,
+                                "name": "Ali Guy",
+                                "reportsTo": 10,
+                                "phone": "(429) 912-6578",
+                                "extension": 2225,
+                                "hireDate": new Date(2014, 6, 29),
+                                "fullTime": true,
+                                "position": "Operations Manager",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 23,
+                                        "name": "Bruce Reilly",
+                                        "reportsTo": 16,
+                                        "phone": "(995) 243-7302",
+                                        "extension": 4815,
+                                        "hireDate": new Date(2015, 4, 1),
+                                        "fullTime": true,
+                                        "position": "Head of Security",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 26,
+                                                "name": "Rowan Morin",
+                                                "reportsTo": 23,
+                                                "phone": "(792) 141-4374",
+                                                "extension": 1844,
+                                                "hireDate": new Date(2015, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Building Security",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 44,
+                                                "name": "Benedict Soto",
+                                                "reportsTo": 23,
+                                                "phone": "(822) 282-5991",
+                                                "extension": 6422,
+                                                "hireDate": new Date(2012, 6, 1),
+                                                "fullTime": false,
+                                                "position": "Building Security",
+                                                "timeInPosition": 4
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 48,
+                                        "name": "Maryam Rios",
+                                        "reportsTo": 16,
+                                        "phone": "(673) 764-6720",
+                                        "extension": 531,
+                                        "hireDate": new Date(2014, 3, 3),
+                                        "fullTime": true,
+                                        "position": "Team Lead, Personal Assistants",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 58,
+                                                "name": "Rose Mcintyre",
+                                                "reportsTo": 48,
+                                                "phone": "(771) 615-4590",
+                                                "extension": 7094,
+                                                "hireDate": new Date(2015, 6, 30),
+                                                "fullTime": false,
+                                                "position": "Personal Assistant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "Nevada Hart",
+                "reportsTo": 1,
+                "phone": "(254) 220-1576",
+                "extension": 6649,
+                "hireDate": new Date(2015, 8, 17),
+                "fullTime": true,
+                "position": "Chief Financial Officer",
+                "timeInPosition": 6,
+                "employees": [
+                    {
+                        "id": 14,
+                        "name": "Zena Sanford",
+                        "reportsTo": 7,
+                        "phone": "(437) 568-8160",
+                        "extension": 4452,
+                        "hireDate": new Date(2010, 11, 30),
+                        "fullTime": true,
+                        "position": "VP, Finance",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 15,
+                        "name": "Quinlan Howe",
+                        "reportsTo": 7,
+                        "phone": "(464) 334-9748",
+                        "extension": 8722,
+                        "hireDate": new Date(2011, 6, 9),
+                        "fullTime": false,
+                        "position": "Senior Director, Finance",
+                        "timeInPosition": 0,
+                        "employees": [
+                            {
+                                "id": 17,
+                                "name": "Indira Lopez",
+                                "reportsTo": 15,
+                                "phone": "(301) 368-0938",
+                                "extension": 8027,
+                                "hireDate": new Date(2013, 8, 18),
+                                "fullTime": true,
+                                "position": "ERP Team Lead",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 18,
+                                        "name": "Lareina Lara",
+                                        "reportsTo": 17,
+                                        "phone": "(233) 457-7482",
+                                        "extension": 1996,
+                                        "hireDate": new Date(2010, 4, 30),
+                                        "fullTime": true,
+                                        "position": "ERP Solutions Consultant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 19,
+                                        "name": "Maxwell Wise",
+                                        "reportsTo": 17,
+                                        "phone": "(570) 494-2531",
+                                        "extension": 9865,
+                                        "hireDate": new Date(2012, 5, 19),
+                                        "fullTime": true,
+                                        "position": "Systems Engineer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 20,
+                                "name": "Hunter Mcbride",
+                                "reportsTo": 15,
+                                "phone": "(409) 442-7016",
+                                "extension": 4284,
+                                "hireDate": new Date(2012, 10, 20),
+                                "fullTime": true,
+                                "position": "Senior Director, Tax",
+                                "timeInPosition": 3
+                            },
+                            {
+                                "id": 21,
+                                "name": "Jana Serrano",
+                                "reportsTo": 15,
+                                "phone": "(910) 718-4620",
+                                "extension": 6970,
+                                "hireDate": new Date(2010, 4, 2),
+                                "fullTime": true,
+                                "position": "Financial Planning & Analysis Manager",
+                                "timeInPosition": 2
+                            },
+                            {
+                                "id": 22,
+                                "name": "Zachery Shelton",
+                                "reportsTo": 15,
+                                "phone": "(310) 240-8675",
+                                "extension": 4527,
+                                "hireDate": new Date(2011, 11, 23),
+                                "fullTime": false,
+                                "position": "Corporate Finance Controller",
+                                "timeInPosition": 6,
+                                "employees": [
+                                    {
+                                        "id": 28,
+                                        "name": "Cullen Freeman",
+                                        "reportsTo": 22,
+                                        "phone": "(136) 554-8814",
+                                        "extension": 9861,
+                                        "hireDate": new Date(2014, 3, 15),
+                                        "fullTime": true,
+                                        "position": "Treasurer Accountant",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 31,
+                                        "name": "Quinn Dean",
+                                        "reportsTo": 22,
+                                        "phone": "(152) 613-3507",
+                                        "extension": 6621,
+                                        "hireDate": new Date(2015, 1, 29),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 34,
+                                        "name": "Samantha Brady",
+                                        "reportsTo": 22,
+                                        "phone": "(206) 398-4328",
+                                        "extension": 1157,
+                                        "hireDate": new Date(2011, 2, 13),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 35,
+                                                "name": "Tamara Green",
+                                                "reportsTo": 34,
+                                                "phone": "(219) 248-2789",
+                                                "extension": 4880,
+                                                "hireDate": new Date(2014, 2, 4),
+                                                "fullTime": true,
+                                                "position": "Junior Accountant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 36,
+                                        "name": "Olympia Coleman",
+                                        "reportsTo": 22,
+                                        "phone": "(944) 853-6383",
+                                        "extension": 2136,
+                                        "hireDate": new Date(2013, 7, 31),
+                                        "fullTime": true,
+                                        "position": "Collections Manager",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 37,
+                                        "name": "Breanna Goodwin",
+                                        "reportsTo": 22,
+                                        "phone": "(379) 988-9630",
+                                        "extension": 5898,
+                                        "hireDate": new Date(2010, 5, 23),
+                                        "fullTime": false,
+                                        "position": "Payroll Specialist",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 27,
+                                "name": "Curran Travis",
+                                "reportsTo": 15,
+                                "phone": "(438) 135-8033",
+                                "extension": 3841,
+                                "hireDate": new Date(2011, 6, 13),
+                                "fullTime": true,
+                                "position": "Finance Controller",
+                                "timeInPosition": 5
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "Hunter Fry",
+                "reportsTo": 1,
+                "phone": "(766) 358-9858",
+                "extension": 3741,
+                "hireDate": new Date(2011, 2, 12),
+                "fullTime": false,
+                "position": "General Counsel",
+                "timeInPosition": 3,
+                "employees": [
+                    {
+                        "id": 9,
+                        "name": "Kuame Carrillo",
+                        "reportsTo": 8,
+                        "phone": "(192) 383-1305",
+                        "extension": 9228,
+                        "hireDate": new Date(2011, 2, 22),
+                        "fullTime": true,
+                        "position": "Associate General Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 13,
+                        "name": "Stacy Todd",
+                        "reportsTo": 8,
+                        "phone": "(925) 286-3327",
+                        "extension": 8565,
+                        "hireDate": new Date(2014, 7, 5),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 33,
+                        "name": "Valentine Wyatt",
+                        "reportsTo": 8,
+                        "phone": "(165) 166-6205",
+                        "extension": 3588,
+                        "hireDate": new Date(2015, 5, 21),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 5
+                    },
+                    {
+                        "id": 86,
+                        "name": "Daniel Mccarthy",
+                        "reportsTo": 8,
+                        "phone": "(624) 483-6206",
+                        "extension": 9112,
+                        "hireDate": new Date(2013, 12, 3),
+                        "fullTime": false,
+                        "position": "Staff Attorney",
+                        "timeInPosition": 0
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default employees;
diff --git a/vue-options-api-demos/treelist/sorting-customization/main.js b/vue-options-api-demos/treelist/sorting-customization/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/sorting-customization/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/sorting-customization/main.vue b/vue-options-api-demos/treelist/sorting-customization/main.vue
new file mode 100644
index 00000000..faa8bb9b
--- /dev/null
+++ b/vue-options-api-demos/treelist/sorting-customization/main.vue
@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <div className="example-config">
+      <KCheckbox
+        id="unsort"
+        :checked="allowUnsort"
+        :label="'Enable unsorting'"
+        @change="allowUnsortChange"
+      />
+      <br />
+      <KCheckbox
+        id="multiSort"
+        :checked="multiple"
+        :label="'Enable multiple columns sorting'"
+        @change="multiSortChange"
+      />
+    </div>
+    <TreeList
+      :style="{ maxHeight: '510px', overflow: 'auto' }"
+      :expand-field="expandField"
+      :sub-items-field="subItemsField"
+      @expandchange="onExpandChange"
+      :sort="sort"
+      :sortable="sortableConfig"
+      :data-items="processedData"
+      @sortchange="handleSortChange"
+      :columns="columns"
+    />
+  </div>
+</template>
+
+<script>
+import { Checkbox } from '@progress/kendo-vue-inputs';
+import employees from './data';
+import {
+  TreeList,
+  orderBy,
+  extendDataItem,
+  mapTree,
+} from '@progress/kendo-vue-treelist';
+
+export default {
+  components: {
+    TreeList,
+    KCheckbox: Checkbox,
+  },
+  data() {
+    return {
+      allowUnsort: true,
+      multiple: true,
+      dataItems: [...employees],
+      expanded: [1, 2, 32],
+      subItemsField: 'employees',
+      expandField: 'expanded',
+      sort: [
+        {
+          field: 'name',
+          dir: 'asc',
+        },
+      ],
+      columns: [
+        {
+          field: 'name',
+          title: 'Name',
+          width: '310px',
+          expandable: true,
+        },
+        {
+          field: 'position',
+          title: 'Position',
+          width: '260px',
+        },
+        {
+          field: 'hireDate',
+          title: 'Hire Date',
+          width: '160px',
+          format: '{0:d}',
+        },
+        {
+          field: 'timeInPosition',
+          title: 'Year(s) in Position',
+          width: '160px',
+        },
+        {
+          field: 'fullTime',
+          title: 'Full Time',
+          width: '150px',
+        },
+      ],
+    };
+  },
+  computed: {
+    processedData() {
+      let data = this.dataItems;
+      return this.addExpandField(orderBy(data, this.sort, this.subItemsField));
+    },
+    sortableConfig() {
+      return {
+        allowUnsort: this.allowUnsort,
+        mode: this.multiple ? 'multiple' : 'single',
+      };
+    },
+  },
+  methods: {
+    allowUnsortChange(e) {
+      this.allowUnsort = e.value;
+    },
+    multiSortChange(e) {
+      this.multiple = e.value;
+    },
+    handleSortChange(event) {
+      this.sort = event.sort;
+    },
+    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>
diff --git a/vue-options-api-demos/treelist/toolbar/data.js b/vue-options-api-demos/treelist/toolbar/data.js
new file mode 100644
index 00000000..f66aec4d
--- /dev/null
+++ b/vue-options-api-demos/treelist/toolbar/data.js
@@ -0,0 +1,1150 @@
+
+const employees = [
+    {
+        "id": 1,
+        "name": "Daryl Sweeney",
+        "reportsTo": null,
+        "phone": "(555) 924-9726",
+        "extension": 8253,
+        "hireDate": new Date(2012, 2, 7),
+        "fullTime": true,
+        "position": "CEO",
+        "timeInPosition": 2,
+        "employees": [
+            {
+                "id": 2,
+                "name": "Guy Wooten",
+                "reportsTo": 1,
+                "phone": "(438) 738-4935",
+                "extension": 1155,
+                "hireDate": new Date(2010, 3, 3),
+                "fullTime": true,
+                "position": "Chief Technical Officer",
+                "timeInPosition": 1,
+                "employees": [
+                    {
+                        "id": 32,
+                        "name": "Buffy Weber",
+                        "reportsTo": 2,
+                        "phone": "(699) 838-6121",
+                        "extension": 8933,
+                        "hireDate": new Date(2011, 7, 11),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 11,
+                                "name": "Hyacinth Hood",
+                                "reportsTo": 32,
+                                "phone": "(889) 345-2438",
+                                "extension": 8564,
+                                "hireDate": new Date(2014, 2, 3),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 60,
+                                        "name": "Akeem Carr",
+                                        "reportsTo": 11,
+                                        "phone": "(738) 136-2814",
+                                        "extension": 9353,
+                                        "hireDate": new Date(2011, 4, 21),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 78,
+                                        "name": "Rinah Simon",
+                                        "reportsTo": 11,
+                                        "phone": "(285) 912-5271",
+                                        "extension": 7795,
+                                        "hireDate": new Date(2012, 10, 11),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 42,
+                                "name": "Gage Daniels",
+                                "reportsTo": 32,
+                                "phone": "(107) 290-6260",
+                                "extension": 896,
+                                "hireDate": new Date(2013, 5, 16),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 5
+                            },
+                            {
+                                "id": 43,
+                                "name": "Constance Vazquez",
+                                "reportsTo": 32,
+                                "phone": "(800) 301-1978",
+                                "extension": 5141,
+                                "hireDate": new Date(2011, 6, 7),
+                                "fullTime": true,
+                                "position": "Director, Engineering",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 46,
+                                        "name": "Darrel Solis",
+                                        "reportsTo": 43,
+                                        "phone": "(327) 977-0216",
+                                        "extension": 7779,
+                                        "hireDate": new Date(2015, 4, 25),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 47,
+                                                "name": "Brian Yang",
+                                                "reportsTo": 46,
+                                                "phone": "(565) 146-5435",
+                                                "extension": 3885,
+                                                "hireDate": new Date(2012, 9, 27),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 50,
+                                                "name": "Lillian Bradshaw",
+                                                "reportsTo": 46,
+                                                "phone": "(323) 509-3479",
+                                                "extension": 5426,
+                                                "hireDate": new Date(2014, 5, 10),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 51,
+                                                "name": "Christian Palmer",
+                                                "reportsTo": 46,
+                                                "phone": "(490) 421-8718",
+                                                "extension": 3706,
+                                                "hireDate": new Date(2012, 12, 27),
+                                                "fullTime": false,
+                                                "position": "Technical Lead",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 55,
+                                                "name": "Summer Mosley",
+                                                "reportsTo": 46,
+                                                "phone": "(784) 962-2301",
+                                                "extension": 5492,
+                                                "hireDate": new Date(2010, 3, 2),
+                                                "fullTime": true,
+                                                "position": "QA Engineer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 56,
+                                                "name": "Barry Ayers",
+                                                "reportsTo": 46,
+                                                "phone": "(452) 373-9227",
+                                                "extension": 1308,
+                                                "hireDate": new Date(2011, 10, 11),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 59,
+                                                "name": "Keiko Espinoza",
+                                                "reportsTo": 46,
+                                                "phone": "(226) 600-5305",
+                                                "extension": 9363,
+                                                "hireDate": new Date(2011, 9, 18),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 61,
+                                                "name": "Candace Pickett",
+                                                "reportsTo": 46,
+                                                "phone": "(120) 117-7475",
+                                                "extension": 5178,
+                                                "hireDate": new Date(2010, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 63,
+                                        "name": "Mia Caldwell",
+                                        "reportsTo": 43,
+                                        "phone": "(848) 636-6470",
+                                        "extension": 6368,
+                                        "hireDate": new Date(2012, 10, 7),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 65,
+                                                "name": "Thomas Terry",
+                                                "reportsTo": 63,
+                                                "phone": "(764) 831-4248",
+                                                "extension": 3574,
+                                                "hireDate": new Date(2015, 6, 15),
+                                                "fullTime": false,
+                                                "position": "Senior Enterprise Support Officer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 67,
+                                                "name": "Ruth Downs",
+                                                "reportsTo": 63,
+                                                "phone": "(138) 991-1440",
+                                                "extension": 8067,
+                                                "hireDate": new Date(2013, 7, 13),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 70,
+                                                "name": "Yasir Wilder",
+                                                "reportsTo": 63,
+                                                "phone": "(759) 701-8665",
+                                                "extension": 8350,
+                                                "hireDate": new Date(2010, 11, 8),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 71,
+                                                "name": "Flavia Short",
+                                                "reportsTo": 63,
+                                                "phone": "(370) 133-9238",
+                                                "extension": 6390,
+                                                "hireDate": new Date(2013, 2, 21),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 74,
+                                                "name": "Aaron Roach",
+                                                "reportsTo": 63,
+                                                "phone": "(958) 717-9230",
+                                                "extension": 4899,
+                                                "hireDate": new Date(2011, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 75,
+                                                "name": "Eric Russell",
+                                                "reportsTo": 63,
+                                                "phone": "(516) 575-8505",
+                                                "extension": 2224,
+                                                "hireDate": new Date(2012, 10, 28),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 76,
+                                                "name": "Cheyenne Olson",
+                                                "reportsTo": 63,
+                                                "phone": "(241) 645-0257",
+                                                "extension": 9181,
+                                                "hireDate": new Date(2015, 5, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 77,
+                                                "name": "Shaine Avila",
+                                                "reportsTo": 63,
+                                                "phone": "(844) 435-1360",
+                                                "extension": 3374,
+                                                "hireDate": new Date(2010, 1, 31),
+                                                "fullTime": true,
+                                                "position": "UI Designer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 81,
+                                                "name": "Chantale Long",
+                                                "reportsTo": 63,
+                                                "phone": "(252) 419-6891",
+                                                "extension": 7868,
+                                                "hireDate": new Date(2010, 6, 17),
+                                                "fullTime": true,
+                                                "position": "Senior QA Enginner",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 83,
+                                                "name": "Dane Cruz",
+                                                "reportsTo": 63,
+                                                "phone": "(946) 701-6165",
+                                                "extension": 3828,
+                                                "hireDate": new Date(2014, 10, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Software Developer",
+                                                "timeInPosition": 2
+                                            },
+                                            {
+                                                "id": 84,
+                                                "name": "Regan Patterson",
+                                                "reportsTo": 63,
+                                                "phone": "(265) 946-1765",
+                                                "extension": 6955,
+                                                "hireDate": new Date(2012, 3, 1),
+                                                "fullTime": true,
+                                                "position": "Technical Writer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 85,
+                                                "name": "Drew Mckay",
+                                                "reportsTo": 63,
+                                                "phone": "(327) 293-0162",
+                                                "extension": 6904,
+                                                "hireDate": new Date(2011, 3, 25),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 88,
+                                                "name": "Bevis Miller",
+                                                "reportsTo": 63,
+                                                "phone": "(525) 557-0169",
+                                                "extension": 6978,
+                                                "hireDate": new Date(2011, 4, 19),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 89,
+                                                "name": "Bruce Mccarty",
+                                                "reportsTo": 63,
+                                                "phone": "(936) 777-8730",
+                                                "extension": 6552,
+                                                "hireDate": new Date(2014, 3, 28),
+                                                "fullTime": true,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 5
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 90,
+                                        "name": "Ocean Blair",
+                                        "reportsTo": 43,
+                                        "phone": "(343) 586-6614",
+                                        "extension": 1424,
+                                        "hireDate": new Date(2011, 4, 27),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 91,
+                                                "name": "Guinevere Osborn",
+                                                "reportsTo": 90,
+                                                "phone": "(424) 741-0006",
+                                                "extension": 3166,
+                                                "hireDate": new Date(2014, 11, 19),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 92,
+                                                "name": "Olga Strong",
+                                                "reportsTo": 90,
+                                                "phone": "(949) 417-1168",
+                                                "extension": 4568,
+                                                "hireDate": new Date(2015, 5, 28),
+                                                "fullTime": true,
+                                                "position": "Graphic Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 93,
+                                                "name": "Robert Orr",
+                                                "reportsTo": 90,
+                                                "phone": "(977) 341-3721",
+                                                "extension": 9241,
+                                                "hireDate": new Date(2012, 8, 20),
+                                                "fullTime": false,
+                                                "position": "Support Officer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 95,
+                                                "name": "Odette Sears",
+                                                "reportsTo": 90,
+                                                "phone": "(264) 818-6576",
+                                                "extension": 1914,
+                                                "hireDate": new Date(2013, 7, 5),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 45,
+                                "name": "Zelda Medina",
+                                "reportsTo": 32,
+                                "phone": "(563) 359-6023",
+                                "extension": 2600,
+                                "hireDate": new Date(2012, 11, 6),
+                                "fullTime": true,
+                                "position": "QA Architect",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    },
+                    {
+                        "id": 52,
+                        "name": "Skyler Cleveland",
+                        "reportsTo": 2,
+                        "phone": "(217) 280-5300",
+                        "extension": 9655,
+                        "hireDate": new Date(2014, 11, 10),
+                        "fullTime": true,
+                        "position": "VP, Engineering",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 40,
+                                "name": "Karleigh Garza",
+                                "reportsTo": 52,
+                                "phone": "(370) 983-8796",
+                                "extension": 4044,
+                                "hireDate": new Date(2014, 3, 10),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 49,
+                                        "name": "Elmo Tyson",
+                                        "reportsTo": 40,
+                                        "phone": "(344) 496-9555",
+                                        "extension": 6950,
+                                        "hireDate": new Date(2014, 9, 18),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 72,
+                                        "name": "Stacey Lynn",
+                                        "reportsTo": 40,
+                                        "phone": "(140) 772-7509",
+                                        "extension": 8396,
+                                        "hireDate": new Date(2014, 7, 31),
+                                        "fullTime": false,
+                                        "position": "QA Engineer",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 80,
+                                                "name": "Meredith Parrish",
+                                                "reportsTo": 72,
+                                                "phone": "(714) 284-2408",
+                                                "extension": 7675,
+                                                "hireDate": new Date(2012, 11, 13),
+                                                "fullTime": true,
+                                                "position": "Junior QA Engineer",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 96,
+                                        "name": "Cassady Whitley",
+                                        "reportsTo": 40,
+                                        "phone": "(996) 587-8405",
+                                        "extension": 780,
+                                        "hireDate": new Date(2013, 5, 7),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 5
+                                    },
+                                    {
+                                        "id": 97,
+                                        "name": "Haviva Campbell",
+                                        "reportsTo": 40,
+                                        "phone": "(263) 887-4689",
+                                        "extension": 2808,
+                                        "hireDate": new Date(2013, 3, 5),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 98,
+                                        "name": "Cameron Ayers",
+                                        "reportsTo": 40,
+                                        "phone": "(470) 709-8030",
+                                        "extension": 2893,
+                                        "hireDate": new Date(2013, 8, 28),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 99,
+                                        "name": "Martha Sargent",
+                                        "reportsTo": 40,
+                                        "phone": "(587) 812-4418",
+                                        "extension": 5099,
+                                        "hireDate": new Date(2014, 2, 27),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 100,
+                                        "name": "Darrel Kinney",
+                                        "reportsTo": 40,
+                                        "phone": "(888) 483-9606",
+                                        "extension": 4779,
+                                        "hireDate": new Date(2014, 3, 24),
+                                        "fullTime": false,
+                                        "position": "Graphic Designer",
+                                        "timeInPosition": 1
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 54,
+                                "name": "Kuame Frye",
+                                "reportsTo": 52,
+                                "phone": "(360) 721-5886",
+                                "extension": 2730,
+                                "hireDate": new Date(2010, 11, 17),
+                                "fullTime": true,
+                                "position": "Software Architect",
+                                "timeInPosition": 1,
+                                "employees": [
+                                    {
+                                        "id": 64,
+                                        "name": "Ori Wynn",
+                                        "reportsTo": 54,
+                                        "phone": "(366) 342-0166",
+                                        "extension": 7252,
+                                        "hireDate": new Date(2015, 6, 21),
+                                        "fullTime": true,
+                                        "position": "Team Lead",
+                                        "timeInPosition": 0,
+                                        "employees": [
+                                            {
+                                                "id": 6,
+                                                "name": "Moses Duncan",
+                                                "reportsTo": 64,
+                                                "phone": "(421) 611-4814",
+                                                "extension": 669,
+                                                "hireDate": new Date(2010, 5, 24),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 6
+                                            },
+                                            {
+                                                "id": 12,
+                                                "name": "Jamalia Wallace",
+                                                "reportsTo": 64,
+                                                "phone": "(611) 391-8016",
+                                                "extension": 1952,
+                                                "hireDate": new Date(2011, 9, 8),
+                                                "fullTime": true,
+                                                "position": "Junior Designer",
+                                                "timeInPosition": 3
+                                            },
+                                            {
+                                                "id": 62,
+                                                "name": "Palmer Gregory",
+                                                "reportsTo": 64,
+                                                "phone": "(360) 430-2505",
+                                                "extension": 4337,
+                                                "hireDate": new Date(2014, 8, 30),
+                                                "fullTime": true,
+                                                "position": "Designer",
+                                                "timeInPosition": 4
+                                            },
+                                            {
+                                                "id": 68,
+                                                "name": "Mallory Gilliam",
+                                                "reportsTo": 64,
+                                                "phone": "(878) 423-2971",
+                                                "extension": 1341,
+                                                "hireDate": new Date(2014, 7, 24),
+                                                "fullTime": true,
+                                                "position": "Senior Software Developer",
+                                                "timeInPosition": 1
+                                            },
+                                            {
+                                                "id": 73,
+                                                "name": "Ima Hughes",
+                                                "reportsTo": 64,
+                                                "phone": "(905) 485-8001",
+                                                "extension": 1273,
+                                                "hireDate": new Date(2013, 6, 3),
+                                                "fullTime": true,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 0
+                                            },
+                                            {
+                                                "id": 79,
+                                                "name": "Duncan Mathews",
+                                                "reportsTo": 64,
+                                                "phone": "(790) 971-9709",
+                                                "extension": 4573,
+                                                "hireDate": new Date(2011, 8, 21),
+                                                "fullTime": false,
+                                                "position": "Software Developer",
+                                                "timeInPosition": 3
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 69,
+                                "name": "Sierra Beasley",
+                                "reportsTo": 52,
+                                "phone": "(271) 953-1968",
+                                "extension": 3324,
+                                "hireDate": new Date(2011, 4, 2),
+                                "fullTime": true,
+                                "position": "Team Lead",
+                                "timeInPosition": 3,
+                                "employees": [
+                                    {
+                                        "id": 38,
+                                        "name": "Elton Tucker",
+                                        "reportsTo": 69,
+                                        "phone": "(988) 930-9331",
+                                        "extension": 9216,
+                                        "hireDate": new Date(2015, 6, 4),
+                                        "fullTime": true,
+                                        "position": "Support Officer",
+                                        "timeInPosition": 1
+                                    },
+                                    {
+                                        "id": 39,
+                                        "name": "Iona Brennan",
+                                        "reportsTo": 69,
+                                        "phone": "(356) 563-0600",
+                                        "extension": 5634,
+                                        "hireDate": new Date(2010, 9, 23),
+                                        "fullTime": true,
+                                        "position": "Junior Support Officer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 53,
+                                        "name": "Paul Campos",
+                                        "reportsTo": 69,
+                                        "phone": "(899) 205-1689",
+                                        "extension": 8586,
+                                        "hireDate": new Date(2011, 3, 17),
+                                        "fullTime": true,
+                                        "position": "Interaction Designer",
+                                        "timeInPosition": 4,
+                                        "employees": [
+                                            {
+                                                "id": 66,
+                                                "name": "Gloria Freeman",
+                                                "reportsTo": 53,
+                                                "phone": "(344) 950-9168",
+                                                "extension": 4738,
+                                                "hireDate": new Date(2013, 5, 6),
+                                                "fullTime": true,
+                                                "position": "Junior Interaction Designer",
+                                                "timeInPosition": 0
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 57,
+                                        "name": "Alyssa Hansen",
+                                        "reportsTo": 69,
+                                        "phone": "(548) 925-4799",
+                                        "extension": 4716,
+                                        "hireDate": new Date(2011, 1, 19),
+                                        "fullTime": true,
+                                        "position": "Junior Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 82,
+                                        "name": "Yael Walters",
+                                        "reportsTo": 69,
+                                        "phone": "(311) 489-8191",
+                                        "extension": 6520,
+                                        "hireDate": new Date(2013, 7, 4),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 87,
+                                        "name": "Dahlia Hunt",
+                                        "reportsTo": 69,
+                                        "phone": "(720) 339-5202",
+                                        "extension": 3690,
+                                        "hireDate": new Date(2011, 3, 26),
+                                        "fullTime": true,
+                                        "position": "Senior Software Developer",
+                                        "timeInPosition": 4
+                                    },
+                                    {
+                                        "id": 94,
+                                        "name": "Adria Stanley",
+                                        "reportsTo": 69,
+                                        "phone": "(536) 357-6391",
+                                        "extension": 3374,
+                                        "hireDate": new Date(2014, 7, 26),
+                                        "fullTime": true,
+                                        "position": "Software Developer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 3,
+                "name": "Priscilla Frank",
+                "reportsTo": 1,
+                "phone": "(278) 927-2684",
+                "extension": 4183,
+                "hireDate": new Date(2014, 11, 30),
+                "fullTime": true,
+                "position": "Chief Product Officer",
+                "timeInPosition": 2,
+                "employees": [
+                    {
+                        "id": 4,
+                        "name": "Ursula Holmes",
+                        "reportsTo": 3,
+                        "phone": "(302) 760-2034",
+                        "extension": 2226,
+                        "hireDate": new Date(2011, 6, 6),
+                        "fullTime": true,
+                        "position": "EVP, Product Strategy",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 24,
+                        "name": "Melvin Carrillo",
+                        "reportsTo": 3,
+                        "phone": "(348) 933-5167",
+                        "extension": 2482,
+                        "hireDate": new Date(2014, 7, 21),
+                        "fullTime": true,
+                        "position": "Director, Developer Relations",
+                        "timeInPosition": 6,
+                        "employees": [
+                            {
+                                "id": 29,
+                                "name": "Martha Chavez",
+                                "reportsTo": 24,
+                                "phone": "(860) 754-3464",
+                                "extension": 4531,
+                                "hireDate": new Date(2013, 3, 12),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 30,
+                                "name": "Oren Fox",
+                                "reportsTo": 24,
+                                "phone": "(572) 414-3299",
+                                "extension": 4849,
+                                "hireDate": new Date(2013, 5, 14),
+                                "fullTime": false,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 0
+                            },
+                            {
+                                "id": 41,
+                                "name": "Amos Barr",
+                                "reportsTo": 24,
+                                "phone": "(470) 381-3718",
+                                "extension": 7643,
+                                "hireDate": new Date(2010, 3, 9),
+                                "fullTime": true,
+                                "position": "Developer Advocate",
+                                "timeInPosition": 2
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 5,
+                "name": "Anika Vega",
+                "reportsTo": 1,
+                "phone": "(910) 714-1802",
+                "extension": 6353,
+                "hireDate": new Date(2010, 2, 25),
+                "fullTime": true,
+                "position": "Chief Process Officer",
+                "timeInPosition": 5,
+                "employees": [
+                    {
+                        "id": 10,
+                        "name": "Vernon Ballard",
+                        "reportsTo": 5,
+                        "phone": "(702) 185-8890",
+                        "extension": 9242,
+                        "hireDate": new Date(2015, 6, 26),
+                        "fullTime": true,
+                        "position": "Director Facilities",
+                        "timeInPosition": 2,
+                        "employees": [
+                            {
+                                "id": 16,
+                                "name": "Ali Guy",
+                                "reportsTo": 10,
+                                "phone": "(429) 912-6578",
+                                "extension": 2225,
+                                "hireDate": new Date(2014, 6, 29),
+                                "fullTime": true,
+                                "position": "Operations Manager",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 23,
+                                        "name": "Bruce Reilly",
+                                        "reportsTo": 16,
+                                        "phone": "(995) 243-7302",
+                                        "extension": 4815,
+                                        "hireDate": new Date(2015, 4, 1),
+                                        "fullTime": true,
+                                        "position": "Head of Security",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 26,
+                                                "name": "Rowan Morin",
+                                                "reportsTo": 23,
+                                                "phone": "(792) 141-4374",
+                                                "extension": 1844,
+                                                "hireDate": new Date(2015, 7, 30),
+                                                "fullTime": true,
+                                                "position": "Building Security",
+                                                "timeInPosition": 5
+                                            },
+                                            {
+                                                "id": 44,
+                                                "name": "Benedict Soto",
+                                                "reportsTo": 23,
+                                                "phone": "(822) 282-5991",
+                                                "extension": 6422,
+                                                "hireDate": new Date(2012, 6, 1),
+                                                "fullTime": false,
+                                                "position": "Building Security",
+                                                "timeInPosition": 4
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 48,
+                                        "name": "Maryam Rios",
+                                        "reportsTo": 16,
+                                        "phone": "(673) 764-6720",
+                                        "extension": 531,
+                                        "hireDate": new Date(2014, 3, 3),
+                                        "fullTime": true,
+                                        "position": "Team Lead, Personal Assistants",
+                                        "timeInPosition": 1,
+                                        "employees": [
+                                            {
+                                                "id": 58,
+                                                "name": "Rose Mcintyre",
+                                                "reportsTo": 48,
+                                                "phone": "(771) 615-4590",
+                                                "extension": 7094,
+                                                "hireDate": new Date(2015, 6, 30),
+                                                "fullTime": false,
+                                                "position": "Personal Assistant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 7,
+                "name": "Nevada Hart",
+                "reportsTo": 1,
+                "phone": "(254) 220-1576",
+                "extension": 6649,
+                "hireDate": new Date(2015, 8, 17),
+                "fullTime": true,
+                "position": "Chief Financial Officer",
+                "timeInPosition": 6,
+                "employees": [
+                    {
+                        "id": 14,
+                        "name": "Zena Sanford",
+                        "reportsTo": 7,
+                        "phone": "(437) 568-8160",
+                        "extension": 4452,
+                        "hireDate": new Date(2010, 11, 30),
+                        "fullTime": true,
+                        "position": "VP, Finance",
+                        "timeInPosition": 4
+                    },
+                    {
+                        "id": 15,
+                        "name": "Quinlan Howe",
+                        "reportsTo": 7,
+                        "phone": "(464) 334-9748",
+                        "extension": 8722,
+                        "hireDate": new Date(2011, 6, 9),
+                        "fullTime": false,
+                        "position": "Senior Director, Finance",
+                        "timeInPosition": 0,
+                        "employees": [
+                            {
+                                "id": 17,
+                                "name": "Indira Lopez",
+                                "reportsTo": 15,
+                                "phone": "(301) 368-0938",
+                                "extension": 8027,
+                                "hireDate": new Date(2013, 8, 18),
+                                "fullTime": true,
+                                "position": "ERP Team Lead",
+                                "timeInPosition": 4,
+                                "employees": [
+                                    {
+                                        "id": 18,
+                                        "name": "Lareina Lara",
+                                        "reportsTo": 17,
+                                        "phone": "(233) 457-7482",
+                                        "extension": 1996,
+                                        "hireDate": new Date(2010, 4, 30),
+                                        "fullTime": true,
+                                        "position": "ERP Solutions Consultant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 19,
+                                        "name": "Maxwell Wise",
+                                        "reportsTo": 17,
+                                        "phone": "(570) 494-2531",
+                                        "extension": 9865,
+                                        "hireDate": new Date(2012, 5, 19),
+                                        "fullTime": true,
+                                        "position": "Systems Engineer",
+                                        "timeInPosition": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 20,
+                                "name": "Hunter Mcbride",
+                                "reportsTo": 15,
+                                "phone": "(409) 442-7016",
+                                "extension": 4284,
+                                "hireDate": new Date(2012, 10, 20),
+                                "fullTime": true,
+                                "position": "Senior Director, Tax",
+                                "timeInPosition": 3
+                            },
+                            {
+                                "id": 21,
+                                "name": "Jana Serrano",
+                                "reportsTo": 15,
+                                "phone": "(910) 718-4620",
+                                "extension": 6970,
+                                "hireDate": new Date(2010, 4, 2),
+                                "fullTime": true,
+                                "position": "Financial Planning & Analysis Manager",
+                                "timeInPosition": 2
+                            },
+                            {
+                                "id": 22,
+                                "name": "Zachery Shelton",
+                                "reportsTo": 15,
+                                "phone": "(310) 240-8675",
+                                "extension": 4527,
+                                "hireDate": new Date(2011, 11, 23),
+                                "fullTime": false,
+                                "position": "Corporate Finance Controller",
+                                "timeInPosition": 6,
+                                "employees": [
+                                    {
+                                        "id": 28,
+                                        "name": "Cullen Freeman",
+                                        "reportsTo": 22,
+                                        "phone": "(136) 554-8814",
+                                        "extension": 9861,
+                                        "hireDate": new Date(2014, 3, 15),
+                                        "fullTime": true,
+                                        "position": "Treasurer Accountant",
+                                        "timeInPosition": 2
+                                    },
+                                    {
+                                        "id": 31,
+                                        "name": "Quinn Dean",
+                                        "reportsTo": 22,
+                                        "phone": "(152) 613-3507",
+                                        "extension": 6621,
+                                        "hireDate": new Date(2015, 1, 29),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 6
+                                    },
+                                    {
+                                        "id": 34,
+                                        "name": "Samantha Brady",
+                                        "reportsTo": 22,
+                                        "phone": "(206) 398-4328",
+                                        "extension": 1157,
+                                        "hireDate": new Date(2011, 2, 13),
+                                        "fullTime": true,
+                                        "position": "Accountant",
+                                        "timeInPosition": 2,
+                                        "employees": [
+                                            {
+                                                "id": 35,
+                                                "name": "Tamara Green",
+                                                "reportsTo": 34,
+                                                "phone": "(219) 248-2789",
+                                                "extension": 4880,
+                                                "hireDate": new Date(2014, 2, 4),
+                                                "fullTime": true,
+                                                "position": "Junior Accountant",
+                                                "timeInPosition": 6
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "id": 36,
+                                        "name": "Olympia Coleman",
+                                        "reportsTo": 22,
+                                        "phone": "(944) 853-6383",
+                                        "extension": 2136,
+                                        "hireDate": new Date(2013, 7, 31),
+                                        "fullTime": true,
+                                        "position": "Collections Manager",
+                                        "timeInPosition": 3
+                                    },
+                                    {
+                                        "id": 37,
+                                        "name": "Breanna Goodwin",
+                                        "reportsTo": 22,
+                                        "phone": "(379) 988-9630",
+                                        "extension": 5898,
+                                        "hireDate": new Date(2010, 5, 23),
+                                        "fullTime": false,
+                                        "position": "Payroll Specialist",
+                                        "timeInPosition": 4
+                                    }
+                                ]
+                            },
+                            {
+                                "id": 27,
+                                "name": "Curran Travis",
+                                "reportsTo": 15,
+                                "phone": "(438) 135-8033",
+                                "extension": 3841,
+                                "hireDate": new Date(2011, 6, 13),
+                                "fullTime": true,
+                                "position": "Finance Controller",
+                                "timeInPosition": 5
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": 8,
+                "name": "Hunter Fry",
+                "reportsTo": 1,
+                "phone": "(766) 358-9858",
+                "extension": 3741,
+                "hireDate": new Date(2011, 2, 12),
+                "fullTime": false,
+                "position": "General Counsel",
+                "timeInPosition": 3,
+                "employees": [
+                    {
+                        "id": 9,
+                        "name": "Kuame Carrillo",
+                        "reportsTo": 8,
+                        "phone": "(192) 383-1305",
+                        "extension": 9228,
+                        "hireDate": new Date(2011, 2, 22),
+                        "fullTime": true,
+                        "position": "Associate General Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 13,
+                        "name": "Stacy Todd",
+                        "reportsTo": 8,
+                        "phone": "(925) 286-3327",
+                        "extension": 8565,
+                        "hireDate": new Date(2014, 7, 5),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 0
+                    },
+                    {
+                        "id": 33,
+                        "name": "Valentine Wyatt",
+                        "reportsTo": 8,
+                        "phone": "(165) 166-6205",
+                        "extension": 3588,
+                        "hireDate": new Date(2015, 5, 21),
+                        "fullTime": true,
+                        "position": "Councel",
+                        "timeInPosition": 5
+                    },
+                    {
+                        "id": 86,
+                        "name": "Daniel Mccarthy",
+                        "reportsTo": 8,
+                        "phone": "(624) 483-6206",
+                        "extension": 9112,
+                        "hireDate": new Date(2013, 12, 3),
+                        "fullTime": false,
+                        "position": "Staff Attorney",
+                        "timeInPosition": 0
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default employees;
diff --git a/vue-options-api-demos/treelist/toolbar/main.js b/vue-options-api-demos/treelist/toolbar/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/toolbar/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/toolbar/main.vue b/vue-options-api-demos/treelist/toolbar/main.vue
new file mode 100644
index 00000000..7245f4b7
--- /dev/null
+++ b/vue-options-api-demos/treelist/toolbar/main.vue
@@ -0,0 +1,126 @@
+<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>
+      <div>
+        <span
+          >Choose a file name:
+          <DropDownList
+            :data-items="fileNames"
+            :value="fileName"
+            :style="{
+              'margin-right': '20px',
+            }"
+            @change="onFileNameChange"
+          >
+          </DropDownList>
+
+          <KButton :theme-color="'primary'" @click="exportExcel"
+            >Export Excel</KButton
+          >
+        </span>
+      </div>
+    </template>
+  </TreeList>
+</template>
+
+<script>
+import employees from './data';
+import { saveExcel } from '@progress/kendo-vue-excel-export';
+import { Button } from '@progress/kendo-vue-buttons';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import {
+  TreeList,
+  treeToFlat,
+  mapTree,
+  extendDataItem,
+} from '@progress/kendo-vue-treelist';
+
+export default {
+  components: {
+    TreeList,
+    KButton: Button,
+    DropDownList,
+  },
+  data() {
+    return {
+      fileName: 'MyFile',
+      fileNames: ['MyFile', 'EmployeeData', 'TestData'],
+      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: {
+    onFileNameChange(e) {
+      this.fileName = e.value;
+    },
+    exportExcel() {
+      saveExcel({
+        fileName: this.fileName,
+        data: treeToFlat(
+          this.processedData,
+          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>
diff --git a/vue-options-api-demos/treelist/virtual-scroll/main.js b/vue-options-api-demos/treelist/virtual-scroll/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treelist/virtual-scroll/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treelist/virtual-scroll/main.vue b/vue-options-api-demos/treelist/virtual-scroll/main.vue
new file mode 100644
index 00000000..eea94b04
--- /dev/null
+++ b/vue-options-api-demos/treelist/virtual-scroll/main.vue
@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <TreeList
+      :wrapperStyle="{
+        height: '430px',
+        overflow: 'auto',
+        width: '720px',
+      }"
+      :tableProps="{
+        style: {
+          tableLayout: 'fixed',
+          width: numberOfColumns * columnWidth + 'px',
+        },
+      }"
+      :row-height="40"
+      :scrollable="'virtual'"
+      :column-virtualization="numberOfColumns > 15"
+      :data-items="dataItems"
+      :expand-field="expandField"
+      :sub-items-field="subItemsField"
+      @expandchange="onExpandChange"
+      :columns="columns"
+    />
+  </div>
+</template>
+
+<script>
+import {
+  TreeList,
+  mapTreeItem,
+  extendDataItem,
+} from '@progress/kendo-vue-treelist';
+import { generateData } from './treelist-data';
+const numberOfColumns = 100;
+const columnWidth = 200;
+const numberOfRows = 25000;
+const subItemsField = 'subItems';
+const expandField = 'expanded';
+const { columns, data } = generateData(
+  numberOfColumns,
+  columnWidth,
+  numberOfRows,
+  subItemsField
+);
+
+export default {
+  components: {
+    TreeList,
+  },
+  data() {
+    return {
+      dataItems: [...data],
+      expanded: [],
+      subItemsField,
+      expandField,
+      columns,
+      numberOfColumns,
+      columnWidth,
+    };
+  },
+  methods: {
+    onExpandChange(event) {
+      const expanded = !event.value;
+      const tree = [...this.dataItems];
+      mapTreeItem(tree, event.level, subItemsField, (item) =>
+        extendDataItem(item, subItemsField, {
+          [expandField]: expanded,
+        })
+      );
+      this.dataItems = tree;
+      this.expanded = event.value
+        ? this.expanded.filter((id) => id !== event.dataItem.id)
+        : [...this.expanded, event.dataItem.id];
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treelist/virtual-scroll/treelist-data.js b/vue-options-api-demos/treelist/virtual-scroll/treelist-data.js
new file mode 100644
index 00000000..c5ec456c
--- /dev/null
+++ b/vue-options-api-demos/treelist/virtual-scroll/treelist-data.js
@@ -0,0 +1,26 @@
+export function generateData(numberOfColumns, columnWidth, numberOfRows, subItemsField) {
+    const columns = [];
+    for (let c = 1; c <= numberOfColumns; c++) {
+        columns.push({ field: 'Field-' + c.toString(), width: columnWidth });
+    }
+    columns[0].expandable = true;
+
+    const data = [];
+    const reducer = (acc, cur) => {
+        acc[cur[0]] = cur[0] !== 'id' ? 'Sub ' + cur[1] : cur[0];
+        return acc;
+    };
+
+    for (let r = 1; r <= numberOfRows; r++) {
+        const row = { id: r };
+        for (let c = 1; c <= numberOfColumns; c++) {
+            row['Field-' + c] = 'R' + r + ':C' + c;
+        }
+
+        const subItem = Object.entries(row).reduce(reducer, {});
+        row[subItemsField] = [subItem, { ...subItem }, { ...subItem }];
+        data.push(row);
+    }
+
+    return { columns, data };
+}
diff --git a/vue-options-api-demos/treeview/appearance/StyleConfigurator.vue b/vue-options-api-demos/treeview/appearance/StyleConfigurator.vue
new file mode 100644
index 00000000..aa2b048c
--- /dev/null
+++ b/vue-options-api-demos/treeview/appearance/StyleConfigurator.vue
@@ -0,0 +1,61 @@
+<template>
+  <div :style="{ margin: '-30px -30px 30px -30px' }">
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <span
+        class="k-color-primary"
+        :style="{ textTransform: 'uppercase', padding: '4px 0' }"
+        >Configurator</span
+      >
+    </div>
+    <div
+      class="example-config"
+      :style="{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+      }"
+    >
+      <span class="k-form-field">
+        <k-label>
+          Size
+          <div class="k-form-field-wrap">
+            <dropdownlist
+              :data-items="sizes"
+              :value="size"
+              :style="{
+                'min-width': '120px',
+              }"
+              @change="handleSizeChange"
+            />
+          </div>
+        </k-label>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Label } from '@progress/kendo-vue-labels';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+
+export default {
+  components: {
+    'k-label': Label,
+    dropdownlist: DropDownList,
+  },
+  props: {
+    size: String,
+  },
+  emits: ['sizechange', 'fillmodechange', 'roundedchange'],
+  data() {
+    return {
+      sizes: ['small', 'medium', 'large'],
+    };
+  },
+  methods: {
+    handleSizeChange(event) {
+      this.$emit('sizechange', event);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treeview/appearance/main.js b/vue-options-api-demos/treeview/appearance/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treeview/appearance/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treeview/appearance/main.vue b/vue-options-api-demos/treeview/appearance/main.vue
new file mode 100644
index 00000000..4f818459
--- /dev/null
+++ b/vue-options-api-demos/treeview/appearance/main.vue
@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <StyleConfigurator :size="size" @sizechange="setSize" />
+
+    <TreeView
+      :size="size"
+      :dataItems="treeDataItems"
+      :expandIcons="true"
+      @expandchange="onExpandChange"
+      :ariaMultiselectable="true"
+      @itemclick="onItemClick"
+      :checkboxes="true"
+      @checkchange="onCheckChange"
+    />
+  </div>
+</template>
+
+<script>
+import {
+  TreeView,
+  processTreeViewItems,
+  handleTreeViewCheckChange,
+} from '@progress/kendo-vue-treeview';
+import StyleConfigurator from './StyleConfigurator.vue';
+
+export default {
+  components: {
+    TreeView,
+    StyleConfigurator,
+  },
+  data() {
+    return {
+      size: 'medium',
+      tree: [
+        {
+          text: 'Furniture',
+          items: [
+            {
+              text: 'Tables & Chairs',
+            },
+            {
+              text: 'Sofas',
+            },
+            {
+              text: 'Occasional Furniture',
+            },
+          ],
+        },
+        {
+          text: 'Decor',
+          items: [
+            {
+              text: 'Bed Linen',
+            },
+            {
+              text: 'Curtains & Blinds',
+            },
+            {
+              text: 'Carpets',
+            },
+          ],
+        },
+      ],
+      check: [],
+      expand: {
+        ids: ['Item2'],
+        idField: 'text',
+      },
+      select: [''],
+    };
+  },
+  computed: {
+    treeDataItems() {
+      return processTreeViewItems(this.tree, {
+        select: this.select,
+        check: this.check,
+        expand: this.expand,
+      });
+    },
+  },
+  methods: {
+    setSize(event) {
+      this.size = event.value;
+    },
+    onItemClick(event) {
+      this.select = [event.itemHierarchicalIndex];
+    },
+    onExpandChange(event) {
+      let ids = this.expand.ids.slice();
+      const index = ids.indexOf(event.item.text);
+      index === -1 ? ids.push(event.item.text) : ids.splice(index, 1);
+      this.expand = {
+        ids,
+        idField: 'text',
+      };
+    },
+    onCheckChange(event) {
+      const settings = {
+        singleMode: false,
+        checkChildren: false,
+        checkParents: false,
+      };
+      this.check = handleTreeViewCheckChange(
+        event,
+        this.check,
+        this.tree,
+        settings
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treeview/checkbox/checkbox-all-helper/main.js b/vue-options-api-demos/treeview/checkbox/checkbox-all-helper/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treeview/checkbox/checkbox-all-helper/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treeview/checkbox/checkbox-all-helper/main.vue b/vue-options-api-demos/treeview/checkbox/checkbox-all-helper/main.vue
new file mode 100644
index 00000000..6b07ac25
--- /dev/null
+++ b/vue-options-api-demos/treeview/checkbox/checkbox-all-helper/main.vue
@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <div class="example-config">
+      <button
+        @click="checkAll"
+        class="
+          k-button k-button-md k-rounded-md k-button-solid k-button-solid-base
+        "
+      >
+        Check all
+      </button>
+      <button
+        @click="uncheckAll"
+        class="
+          k-button k-button-md k-rounded-md k-button-solid k-button-solid-base
+        "
+      >
+        Uncheck all
+      </button>
+    </div>
+    <TreeView
+      :dataItems="treeDataItems"
+      :checkboxes="true"
+      @checkchange="onCheckChange"
+    />
+  </div>
+</template>
+
+<script>
+import {
+  TreeView,
+  processTreeViewItems,
+  handleTreeViewCheckChange,
+} from '@progress/kendo-vue-treeview';
+
+export default {
+  components: {
+    TreeView,
+  },
+  data() {
+    return {
+      tree: [
+        {
+          text: 'Furniture',
+          expanded: true,
+          items: [
+            {
+              text: 'Tables & Chairs',
+            },
+            {
+              text: 'Sofas',
+            },
+            {
+              text: 'Occasional Furniture',
+            },
+          ],
+        },
+        {
+          text: 'Decor',
+          expanded: true,
+          items: [
+            {
+              text: 'Bed Linen',
+            },
+            {
+              text: 'Curtains & Blinds',
+            },
+            {
+              text: 'Carpets',
+            },
+          ],
+        },
+      ],
+      check: [],
+      expand: {
+        ids: ['Item2'],
+        idField: 'text',
+      },
+      select: [''],
+    };
+  },
+  computed: {
+    treeDataItems() {
+      return processTreeViewItems(this.tree, {
+        select: this.select,
+        check: this.check,
+        expand: this.expand,
+      });
+    },
+  },
+  methods: {
+    checkAll() {
+      this.check = ['0', '0_0', '0_1', '0_2', '1', '1_0', '1_1', '1_2'];
+    },
+    uncheckAll() {
+      this.check = [];
+    },
+    onCheckChange(event) {
+      const settings = {
+        singleMode: false,
+        checkChildren: false,
+        checkParents: false,
+      };
+      this.check = handleTreeViewCheckChange(
+        event,
+        this.check,
+        this.tree,
+        settings
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treeview/checkbox/checkbox-all/main.js b/vue-options-api-demos/treeview/checkbox/checkbox-all/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treeview/checkbox/checkbox-all/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treeview/checkbox/checkbox-all/main.vue b/vue-options-api-demos/treeview/checkbox/checkbox-all/main.vue
new file mode 100644
index 00000000..ddfe1e65
--- /dev/null
+++ b/vue-options-api-demos/treeview/checkbox/checkbox-all/main.vue
@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <div class="example-config">
+      <button
+        @click="checkAll"
+        class="
+          k-button k-button-md k-rounded-md k-button-solid k-button-solid-base
+        "
+      >
+        Check all
+      </button>
+      <button
+        @click="uncheckAll"
+        class="
+          k-button k-button-md k-rounded-md k-button-solid k-button-solid-base
+        "
+      >
+        Uncheck all
+      </button>
+    </div>
+    <TreeView
+      :dataItems="tree"
+      :checkboxes="true"
+      @checkchange="onCheckChange"
+    />
+  </div>
+</template>
+
+<script>
+import { TreeView } from '@progress/kendo-vue-treeview';
+
+export default {
+  components: {
+    TreeView,
+  },
+  data() {
+    return {
+      tree: [
+        {
+          text: 'Furniture',
+          expanded: true,
+          items: [
+            {
+              text: 'Tables & Chairs',
+            },
+            {
+              text: 'Sofas',
+            },
+            {
+              text: 'Occasional Furniture',
+            },
+          ],
+        },
+        {
+          text: 'Decor',
+          expanded: true,
+          items: [
+            {
+              text: 'Bed Linen',
+            },
+            {
+              text: 'Curtains & Blinds',
+            },
+            {
+              text: 'Carpets',
+            },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    checkAll() {
+      let newData = this.tree.map((item) => {
+        item.checked = true;
+        item.items = item.items.map((child) => {
+          child.checked = true;
+          return child;
+        });
+        return item;
+      });
+      this.tree = newData;
+    },
+
+    uncheckAll() {
+      let newData = this.tree.map((item) => {
+        item.checked = false;
+        item.items = item.items.map((child) => {
+          child.checked = false;
+          return child;
+        });
+        return item;
+      });
+      this.tree = newData;
+    },
+    onCheckChange(event) {
+      event.item.checked = !event.item.checked;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treeview/checkbox/checkbox-helper-multiple/main.js b/vue-options-api-demos/treeview/checkbox/checkbox-helper-multiple/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treeview/checkbox/checkbox-helper-multiple/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treeview/checkbox/checkbox-helper-multiple/main.vue b/vue-options-api-demos/treeview/checkbox/checkbox-helper-multiple/main.vue
new file mode 100644
index 00000000..336120e4
--- /dev/null
+++ b/vue-options-api-demos/treeview/checkbox/checkbox-helper-multiple/main.vue
@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <TreeView
+      :checkField="checkField"
+      :checkboxes="true"
+      @checkchange="onCheckChange"
+      :dataItems="dataItems"
+    />
+    <div :style="{ marginTop: '5px' }">
+      <i>Press SPACE to check/uncheck the active item</i>
+      <div class="example-config">Checked IDs: {{ check.ids.join(',') }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  TreeView,
+  processTreeViewItems,
+  handleTreeViewCheckChange,
+} from '@progress/kendo-vue-treeview';
+const checkField = 'marked';
+export default {
+  components: {
+    TreeView,
+  },
+  data() {
+    return {
+      checkField,
+      check: { idField: 'text', operationField: checkField, ids: [] },
+      tree: [
+        {
+          text: 'Furniture',
+          expanded: true,
+          items: [
+            { text: 'Tables & Chairs' },
+            { text: 'Sofas' },
+            { text: 'Occasional Furniture' },
+          ],
+        },
+        {
+          text: 'Decor',
+          expanded: true,
+          items: [
+            { text: 'Bed Linen' },
+            { text: 'Curtains & Blinds' },
+            { text: 'Carpets' },
+          ],
+        },
+      ],
+    };
+  },
+  computed: {
+    dataItems() {
+      return processTreeViewItems(this.tree, { check: this.check });
+    },
+  },
+  methods: {
+    onCheckChange(event) {
+      const settings = { checkChildren: true, checkParents: true };
+      this.check = handleTreeViewCheckChange(
+        event,
+        this.check,
+        this.tree,
+        settings
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treeview/checkbox/checkbox-helper-single/main.js b/vue-options-api-demos/treeview/checkbox/checkbox-helper-single/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treeview/checkbox/checkbox-helper-single/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treeview/checkbox/checkbox-helper-single/main.vue b/vue-options-api-demos/treeview/checkbox/checkbox-helper-single/main.vue
new file mode 100644
index 00000000..33679c39
--- /dev/null
+++ b/vue-options-api-demos/treeview/checkbox/checkbox-helper-single/main.vue
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <TreeView
+      :checkIndeterminateField="checkIndeterminateField"
+      :checkboxes="true"
+      @checkchange="onCheckChange"
+      :dataItems="dataItems"
+    />
+    <div :style="{ marginTop: '5px' }">
+      <i>Press SPACE to check/uncheck the active item</i>
+      <div class="example-config">Checked IDs: {{ check.ids.join(',') }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  TreeView,
+  processTreeViewItems,
+  handleTreeViewCheckChange,
+} from '@progress/kendo-vue-treeview';
+
+export default {
+  components: {
+    TreeView,
+  },
+  data() {
+    return {
+      checkIndeterminateField: 'checkUnknown',
+      check: {
+        idField: 'text',
+        applyCheckIndeterminate: true,
+        checkIndeterminateField: 'checkUnknown',
+        ids: [],
+      },
+      tree: [
+        {
+          text: 'Furniture',
+          expanded: true,
+          items: [
+            { text: 'Tables & Chairs' },
+            { text: 'Sofas' },
+            { text: 'Occasional Furniture' },
+          ],
+        },
+        {
+          text: 'Decor',
+          expanded: true,
+          items: [
+            { text: 'Bed Linen' },
+            { text: 'Curtains & Blinds' },
+            { text: 'Carpets' },
+          ],
+        },
+      ],
+    };
+  },
+  computed: {
+    dataItems() {
+      return processTreeViewItems(this.tree, { check: this.check });
+    },
+  },
+  methods: {
+    onCheckChange(event) {
+      this.check = handleTreeViewCheckChange(event, this.check, this.tree, {
+        singleMode: true,
+      });
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treeview/checkbox/checkbox-helper/main.js b/vue-options-api-demos/treeview/checkbox/checkbox-helper/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treeview/checkbox/checkbox-helper/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treeview/checkbox/checkbox-helper/main.vue b/vue-options-api-demos/treeview/checkbox/checkbox-helper/main.vue
new file mode 100644
index 00000000..a68b1d55
--- /dev/null
+++ b/vue-options-api-demos/treeview/checkbox/checkbox-helper/main.vue
@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <div className="example-config">
+      <h5>Check Settings</h5>
+      <kcheckbox
+        :value="singleMode"
+        :label="'Single Mode'"
+        @change="onSingleModeChange"
+      />
+      &nbsp
+      <kcheckbox
+        :value="checkChildren"
+        :label="'Check All Children'"
+        @change="onCheckAllChildrenChange"
+      />
+      &nbsp
+      <kcheckbox
+        :value="checkAllParents"
+        :label="'Check all parents when children are checked'"
+        @change="onCheckAllParentsChange"
+      />
+    </div>
+    <TreeView
+      :animate="false"
+      :checkIndeterminateField="checkIndeterminateField"
+      :checkboxes="true"
+      @checkchange="onCheckChange"
+      :dataItems="dataItems"
+    />
+    <div :style="{ marginTop: '5px' }">
+      <i>Press SPACE to check/uncheck the active item</i>
+      <div class="example-config">Checked IDs: {{ check.ids.join(',') }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  TreeView,
+  processTreeViewItems,
+  handleTreeViewCheckChange,
+} from '@progress/kendo-vue-treeview';
+
+import { Checkbox } from '@progress/kendo-vue-inputs';
+
+export default {
+  components: {
+    TreeView,
+    kcheckbox: Checkbox,
+  },
+  data() {
+    return {
+      singleMode: false,
+      checkChildren: false,
+      checkAllParents: false,
+      checkIndeterminateField: 'checkUnknown',
+      check: {
+        idField: 'text',
+        applyCheckIndeterminate: true,
+        checkIndeterminateField: 'checkUnknown',
+        ids: [],
+      },
+      tree: [
+        {
+          text: 'Furniture',
+          expanded: true,
+          items: [
+            { text: 'Tables & Chairs' },
+            { text: 'Sofas' },
+            { text: 'Occasional Furniture' },
+          ],
+        },
+        {
+          text: 'Decor',
+          expanded: true,
+          items: [
+            { text: 'Bed Linen' },
+            { text: 'Curtains & Blinds' },
+            {
+              text: 'Carpets',
+              expanded: true,
+              items: [{ text: 'Yellow' }, { text: 'Blue' }, { text: 'Red' }],
+            },
+          ],
+        },
+      ],
+    };
+  },
+  computed: {
+    dataItems() {
+      return processTreeViewItems(this.tree, { check: this.check });
+    },
+  },
+  methods: {
+    onCheckChange(event) {
+      this.check = handleTreeViewCheckChange(event, this.check, this.tree, {
+        singleMode: this.singleMode,
+        checkChildren: this.checkChildren,
+        checkParents: this.checkAllParents,
+      });
+    },
+    onSingleModeChange() {
+      this.singleMode = !this.singleMode;
+    },
+    onCheckAllChildrenChange() {
+      this.checkChildren = !this.checkChildren;
+    },
+    onCheckAllParentsChange() {
+      this.checkAllParents = !this.checkAllParents;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treeview/custom/main.js b/vue-options-api-demos/treeview/custom/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treeview/custom/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treeview/custom/main.vue b/vue-options-api-demos/treeview/custom/main.vue
new file mode 100644
index 00000000..6fee39f4
--- /dev/null
+++ b/vue-options-api-demos/treeview/custom/main.vue
@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <TreeView
+      :animate="false"
+      :dataItems="tree"
+      :expandIcons="true"
+      :item="'item'"
+    >
+      <template v-slot:item="{ props }">
+        <span>
+          <SvgIcon :icon="svgIconName(props.item)" :key="props.item.text" />
+          {{ props.item.text }}
+        </span>
+      </template>
+    </TreeView>
+  </div>
+</template>
+
+<script>
+import { TreeView } from "@progress/kendo-vue-treeview";
+import {
+  folderIcon,
+  filePdfIcon,
+  html5Icon,
+  imageIcon,
+} from "@progress/kendo-svg-icons";
+import { SvgIcon } from "@progress/kendo-vue-common";
+
+const is = (fileName, ext) => new RegExp(`.${ext}\$`).test(fileName);
+export default {
+  components: {
+    TreeView,
+    SvgIcon,
+  },
+  data() {
+    return {
+      tree: [
+        {
+          text: "My Documents",
+          expanded: true,
+          items: [
+            {
+              text: "Kendo UI for Vue Project",
+              expanded: true,
+              items: [
+                {
+                  text: "about.html",
+                },
+                {
+                  text: "index.html",
+                },
+                {
+                  text: "logo.png",
+                },
+              ],
+            },
+            {
+              text: "New Web Site",
+              expanded: true,
+              items: [
+                {
+                  text: "mockup.jpg",
+                },
+                {
+                  text: "Research.pdf",
+                },
+              ],
+            },
+            {
+              text: "Reports",
+              expanded: true,
+              items: [
+                {
+                  text: "February.pdf",
+                },
+                {
+                  text: "March.pdf",
+                },
+                {
+                  text: "April.pdf",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    svgIconName({ text, items }) {
+      console.log(text, items);
+      if (items !== undefined) {
+        return folderIcon;
+      } else if (is(text, "pdf")) {
+        return filePdfIcon;
+      } else if (is(text, "html")) {
+        return html5Icon;
+      } else if (is(text, "jpg|png")) {
+        return imageIcon;
+      } else {
+        return "";
+      }
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treeview/data-binding/basic/main.js b/vue-options-api-demos/treeview/data-binding/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treeview/data-binding/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treeview/data-binding/basic/main.vue b/vue-options-api-demos/treeview/data-binding/basic/main.vue
new file mode 100644
index 00000000..c0203515
--- /dev/null
+++ b/vue-options-api-demos/treeview/data-binding/basic/main.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <TreeView :dataItems="treeData" />
+  </div>
+</template>
+
+<script>
+import { TreeView } from '@progress/kendo-vue-treeview';
+
+export default {
+  components: {
+    TreeView,
+  },
+  data() {
+    return {
+      treeData: [
+        {
+          text: 'Furniture',
+          expanded: true,
+          items: [
+            {
+              text: 'Tables & Chairs',
+            },
+            {
+              text: 'Sofas',
+            },
+            {
+              text: 'Occasional Furniture',
+            },
+          ],
+        },
+        {
+          text: 'Decor',
+          expanded: true,
+          items: [
+            {
+              text: 'Bed Linen',
+            },
+            {
+              text: 'Curtains & Blinds',
+            },
+            {
+              text: 'Carpets',
+            },
+          ],
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treeview/data-binding/item-fields/main.js b/vue-options-api-demos/treeview/data-binding/item-fields/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treeview/data-binding/item-fields/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treeview/data-binding/item-fields/main.vue b/vue-options-api-demos/treeview/data-binding/item-fields/main.vue
new file mode 100644
index 00000000..bacf50da
--- /dev/null
+++ b/vue-options-api-demos/treeview/data-binding/item-fields/main.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <TreeView
+      :dataItems="treeData"
+      :text-field="'data.text'"
+      :expand-icons="true"
+      :expand-field="'opened'"
+      @expandchange="onExpandChange"
+    />
+  </div>
+</template>
+
+<script>
+import { TreeView } from '@progress/kendo-vue-treeview';
+
+export default {
+  components: {
+    TreeView,
+  },
+  data() {
+    return {
+      treeData: [
+        {
+          data: { text: 'Furniture' },
+          opened: true,
+          items: [
+            { data: { text: 'Tables & Chairs' } },
+            { data: { text: 'Sofas' } },
+            { data: { text: 'Occasional Furniture' } },
+          ],
+        },
+        {
+          data: { text: 'Decor' },
+          opened: true,
+          items: [
+            { data: { text: 'Bed Linen' } },
+            { data: { text: 'Curtains & Blinds' } },
+            { data: { text: 'Carpets' } },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    onExpandChange(event) {
+      event.item.opened = !event.item.opened;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treeview/data-binding/remote-data/main.js b/vue-options-api-demos/treeview/data-binding/remote-data/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treeview/data-binding/remote-data/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treeview/data-binding/remote-data/main.vue b/vue-options-api-demos/treeview/data-binding/remote-data/main.vue
new file mode 100644
index 00000000..3c7589f6
--- /dev/null
+++ b/vue-options-api-demos/treeview/data-binding/remote-data/main.vue
@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <TreeView
+      :dataItems="tree"
+      :expandIcons="true"
+      @expandchange="onExpandChange"
+    />
+  </div>
+</template>
+
+<script>
+import { TreeView } from '@progress/kendo-vue-treeview';
+
+const baseUrl =
+  'https://odatasampleservices.azurewebsites.net/V4/Northwind/Northwind.svc/Categories';
+const requestInit = { method: 'GET', accept: 'application/json', headers: [] };
+
+export default {
+  components: {
+    TreeView,
+  },
+  data() {
+    return {
+      tree: [],
+    };
+  },
+  mounted() {
+    fetch(baseUrl, requestInit)
+      .then((response) => response.json())
+      .then((json) => {
+        const data = json.value.map(({ CategoryID, CategoryName }) => {
+          return { text: CategoryName, id: CategoryID, hasChildren: true };
+        });
+
+        this.tree = data;
+      });
+  },
+  methods: {
+    onExpandChange(event) {
+      const categoryIndex = Number(event.itemHierarchicalIndex);
+      const { data, category } = this.copyDataAndCategory(categoryIndex);
+      category.expanded = !category.expanded;
+
+      this.tree = data;
+
+      !category.items && this.loadProducts(categoryIndex, category.id);
+    },
+    loadProducts(categoryIndex, categoryId) {
+      fetch(`${baseUrl}(${categoryId})/Products`, requestInit)
+        .then((response) => response.json())
+        .then((json) => {
+          const { data, category } = this.copyDataAndCategory(categoryIndex);
+          category.items = json.value.map(({ ProductName }) => {
+            return { text: ProductName };
+          });
+
+          this.tree = data;
+        });
+    },
+    copyDataAndCategory(categoryIndex) {
+      const data = this.tree.slice();
+      const category = (data[categoryIndex] = { ...data[categoryIndex] });
+
+      return { data, category };
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treeview/data-reload/main.js b/vue-options-api-demos/treeview/data-reload/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treeview/data-reload/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treeview/data-reload/main.vue b/vue-options-api-demos/treeview/data-reload/main.vue
new file mode 100644
index 00000000..95853129
--- /dev/null
+++ b/vue-options-api-demos/treeview/data-reload/main.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>
+Vue Component
+  </div>
+</template>
+
+<script>
+
+export default {
+
+};
+</script>
diff --git a/vue-options-api-demos/treeview/drag/multiple/main.js b/vue-options-api-demos/treeview/drag/multiple/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treeview/drag/multiple/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treeview/drag/multiple/main.vue b/vue-options-api-demos/treeview/drag/multiple/main.vue
new file mode 100644
index 00000000..eef742b2
--- /dev/null
+++ b/vue-options-api-demos/treeview/drag/multiple/main.vue
@@ -0,0 +1,191 @@
+<template>
+  <div>
+    <TreeView
+      :dataItems="tree1"
+      :draggable="true"
+      @itemdragover="onItemDragOver"
+      @itemdragend="onItemDragEnd"
+      :expandIcons="true"
+      @expandchange="onExpandChange"
+      @itemclick="onItemClick"
+      :id="'firstTree'"
+    />
+    <hr />
+    <TreeView
+      :dataItems="tree2"
+      :draggable="true"
+      @itemdragover="onItemDragOver"
+      @itemdragend="onItemDragEnd"
+      :expandIcons="true"
+      @expandchange="onExpandChange"
+      @itemclick="onItemClick"
+      :id="'secondTree'"
+    />
+    <TreeViewDragClue ref="dragClue" />
+  </div>
+</template>
+
+<script>
+import {
+  TreeView,
+  TreeViewDragClue,
+  processTreeViewItems,
+  moveTreeViewItem,
+  TreeViewDragAnalyzer,
+} from "@progress/kendo-vue-treeview";
+import {
+  plusIcon,
+  insertTopIcon,
+  insertMiddleIcon,
+  insertBottomIcon,
+  cancelIcon,
+} from "@progress/kendo-svg-icons";
+
+function getSiblings(itemIndex, data) {
+  let result = data;
+  const indices = itemIndex.split(SEPARATOR).map((index) => Number(index));
+  for (let i = 0; i < indices.length - 1; i++) {
+    result = result[indices[i]].items;
+  }
+  return result;
+}
+const SEPARATOR = "_";
+export default {
+  components: {
+    TreeView,
+    TreeViewDragClue,
+  },
+  created() {
+    this.dragOverCnt = 0;
+    this.isDragDrop = false;
+  },
+  data() {
+    return {
+      expand: {
+        ids: [],
+        idField: "text",
+      },
+      selected: {
+        ids: [],
+        idField: "text",
+      },
+      tree1: [
+        {
+          text: "Furniture",
+          expanded: true,
+          items: [
+            { text: "Tables & Chairs" },
+            { text: "Sofas" },
+            { text: "Occasional Furniture" },
+          ],
+        },
+        {
+          text: "Decor",
+          expanded: true,
+          items: [
+            { text: "Bed Linen" },
+            { text: "Curtains & Blinds" },
+            { text: "Carpets" },
+          ],
+        },
+      ],
+      tree2: [
+        {
+          text: "Storage",
+          expanded: true,
+          items: [
+            { text: "Wall Shelving" },
+            { text: "Floor Shelving" },
+            { text: "Kids Storage" },
+          ],
+        },
+        {
+          text: "Lights",
+          expanded: true,
+          items: [{ text: "Ceiling" }, { text: "Table" }, { text: "Floor" }],
+        },
+      ],
+    };
+  },
+  computed: {
+    dataItems() {
+      return processTreeViewItems(this.tree, {
+        expand: this.expand,
+        select: this.selected,
+      });
+    },
+  },
+  methods: {
+    onItemDragOver(event) {
+      this.dragOverCnt++;
+      this.$refs.dragClue.show(
+        event.pageY + 10,
+        event.pageX,
+        event.item.text,
+        this.getClueIcon(event)
+      );
+    },
+    onItemDragEnd(event) {
+      this.isDragDrop = this.dragOverCnt > 0;
+      this.dragOverCnt = 0;
+      this.$refs.dragClue.hide();
+      const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
+      if (eventAnalyzer.isDropAllowed) {
+        const { sourceData, targetData } = moveTreeViewItem(
+          event.itemHierarchicalIndex,
+          this.resolveData(event.target.guid()),
+          eventAnalyzer.getDropOperation(),
+          eventAnalyzer.destinationMeta.itemHierarchicalIndex,
+          this.resolveData(eventAnalyzer.destinationMeta.treeViewGuid)
+        );
+
+        (this[this.resolveDataKey(event.target.guid())] = sourceData),
+          (this[
+            this.resolveDataKey(eventAnalyzer.destinationMeta.treeViewGuid)
+          ] = targetData);
+      }
+    },
+    onItemClick(event) {
+      if (!this.isDragDrop) {
+        event.item.selected = !event.item.selected;
+      }
+    },
+    onExpandChange(event) {
+      event.item.expanded = !event.item.expanded;
+    },
+    getClueIcon(event) {
+      const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
+      const { itemHierarchicalIndex: itemIndex, treeViewGuid } =
+        eventAnalyzer.destinationMeta;
+      if (eventAnalyzer.isDropAllowed) {
+        switch (eventAnalyzer.getDropOperation()) {
+          case "child":
+            return plusIcon;
+          case "before":
+            return itemIndex === "0" || itemIndex.endsWith(`${SEPARATOR}0`)
+              ? insertTopIcon
+              : insertMiddleIcon;
+          case "after":
+            const siblings = getSiblings(
+              itemIndex,
+              this.resolveData(treeViewGuid)
+            );
+            const lastIndex = Number(itemIndex.split(SEPARATOR).pop());
+            return lastIndex < siblings.length - 1
+              ? insertMiddleIcon
+              : insertBottomIcon;
+          default:
+            break;
+        }
+      }
+      return cancelIcon;
+    },
+    resolveData(treeViewGuid) {
+      return treeViewGuid === "firstTree" ? this.tree1 : this.tree2;
+    },
+    resolveDataKey(treeViewGuid) {
+      return treeViewGuid === "firstTree" ? "tree1" : "tree2";
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treeview/drag/single/main.js b/vue-options-api-demos/treeview/drag/single/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treeview/drag/single/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treeview/drag/single/main.vue b/vue-options-api-demos/treeview/drag/single/main.vue
new file mode 100644
index 00000000..4ed58adf
--- /dev/null
+++ b/vue-options-api-demos/treeview/drag/single/main.vue
@@ -0,0 +1,167 @@
+<template>
+  <div>
+    <TreeView
+      :draggable="true"
+      @itemdragover="onItemDragOver"
+      @itemdragend="onItemDragEnd"
+      :dataItems="dataItems"
+      :expandIcons="true"
+      @expandchange="onExpandChange"
+      @itemclick="onItemClick"
+    />
+    <TreeViewDragClue ref="dragClue" />
+  </div>
+</template>
+
+<script>
+import {
+  TreeView,
+  TreeViewDragClue,
+  processTreeViewItems,
+  moveTreeViewItem,
+  TreeViewDragAnalyzer,
+} from "@progress/kendo-vue-treeview";
+import {
+  plusIcon,
+  insertTopIcon,
+  insertMiddleIcon,
+  insertBottomIcon,
+  cancelIcon,
+} from "@progress/kendo-svg-icons";
+
+function getSiblings(itemIndex, data) {
+  let result = data;
+  const indices = itemIndex.split(SEPARATOR).map((index) => Number(index));
+  for (let i = 0; i < indices.length - 1; i++) {
+    result = result[indices[i]].items || [];
+  }
+  return result;
+}
+const SEPARATOR = "_";
+export default {
+  components: {
+    TreeView,
+    TreeViewDragClue,
+  },
+  created() {
+    this.dragOverCnt = 0;
+    this.isDragDrop = false;
+  },
+  data() {
+    return {
+      expand: {
+        ids: [],
+        idField: "text",
+      },
+      selected: {
+        ids: [],
+        idField: "text",
+      },
+      tree: [
+        {
+          text: "Furniture",
+          expanded: true,
+          items: [
+            {
+              text: "Tables & Chairs",
+            },
+            {
+              text: "Sofas",
+            },
+            {
+              text: "Occasional Furniture",
+            },
+          ],
+        },
+        {
+          text: "Decor",
+          expanded: true,
+          items: [
+            {
+              text: "Bed Linen",
+            },
+            {
+              text: "Curtains & Blinds",
+            },
+            {
+              text: "Carpets",
+            },
+          ],
+        },
+      ],
+    };
+  },
+  computed: {
+    dataItems() {
+      return processTreeViewItems(this.tree, {
+        expand: this.expand,
+        select: this.selected,
+      });
+    },
+  },
+  methods: {
+    getClueIcon(event) {
+      const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
+      const { itemHierarchicalIndex: itemIndex } =
+        eventAnalyzer.destinationMeta;
+      if (eventAnalyzer.isDropAllowed) {
+        switch (eventAnalyzer.getDropOperation()) {
+          case "child":
+            return plusIcon;
+          case "before":
+            return itemIndex === "0" || itemIndex.endsWith(`${SEPARATOR}0`)
+              ? insertTopIcon
+              : insertMiddleIcon;
+          case "after":
+            const siblings = getSiblings(itemIndex, this.tree);
+            const lastIndex = Number(itemIndex.split(SEPARATOR).pop());
+            return lastIndex < siblings.length - 1
+              ? insertMiddleIcon
+              : insertBottomIcon;
+          default:
+            break;
+        }
+      }
+      return cancelIcon;
+    },
+    onItemDragOver(event) {
+      this.dragOverCnt++;
+      this.$refs.dragClue.show(
+        event.pageY + 10,
+        event.pageX,
+        event.item.text,
+        this.getClueIcon(event)
+      );
+    },
+    onItemDragEnd(event) {
+      this.isDragDrop = this.dragOverCnt > 0;
+      this.dragOverCnt = 0;
+      this.$refs.dragClue.hide();
+      const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
+      if (eventAnalyzer.isDropAllowed) {
+        const updatedTree = moveTreeViewItem(
+          event.itemHierarchicalIndex,
+          this.tree,
+          eventAnalyzer.getDropOperation() || "child",
+          eventAnalyzer.destinationMeta.itemHierarchicalIndex
+        );
+        this.tree = updatedTree;
+      }
+    },
+    onItemClick(event) {
+      if (!this.isDragDrop) {
+        let ids = this.selected.ids.slice();
+        const index = ids.indexOf(event.item.text);
+        index === -1 ? ids.push(event.item.text) : ids.splice(index, 1);
+        this.selected = {
+          ids,
+          idField: "text",
+        };
+      }
+    },
+    onExpandChange(event) {
+      event.item.expanded = !event.item.expanded;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treeview/events/drag/Logger.vue b/vue-options-api-demos/treeview/events/drag/Logger.vue
new file mode 100644
index 00000000..7d9e1695
--- /dev/null
+++ b/vue-options-api-demos/treeview/events/drag/Logger.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="example-config">
+    <h5>{{ title }}</h5>
+    <ul class="event-log">
+      <li v-for="(event, idx) in events" :key="idx">
+        {{ events.length - idx }}. {{ event }}
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    events: Array,
+    title: String,
+  },
+};
+</script>
+
+<style scoped>
+.example-config {
+  margin: 0 0 20px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+  margin: 0;
+  padding: 0;
+  max-height: 100px;
+  overflow-y: auto;
+  list-style-type: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: white;
+}
+.event-log li {
+  margin: 0;
+  padding: 0.3em;
+  line-height: 1.2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+  margin-bottom: -1px;
+}
+</style>
diff --git a/vue-options-api-demos/treeview/events/drag/main.js b/vue-options-api-demos/treeview/events/drag/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treeview/events/drag/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treeview/events/drag/main.vue b/vue-options-api-demos/treeview/events/drag/main.vue
new file mode 100644
index 00000000..a4ff0afa
--- /dev/null
+++ b/vue-options-api-demos/treeview/events/drag/main.vue
@@ -0,0 +1,190 @@
+<template>
+  <div>
+    <div>
+      <TreeView
+        :draggable="true"
+        @itemdragover="onItemDragOver"
+        @itemdragend="onItemDragEnd"
+        @itemdragstart="onItemDragStart"
+        :dataItems="dataItems"
+        :expandIcons="true"
+        @expandchange="onExpandChange"
+        @itemclick="onItemClick"
+      />
+      <TreeViewDragClue ref="dragClue" />
+    </div>
+    <br />
+    <br />
+    <Logger :title="'Events list'" :events="eventsList" />
+  </div>
+</template>
+
+<script>
+import {
+  TreeView,
+  TreeViewDragClue,
+  processTreeViewItems,
+  moveTreeViewItem,
+  TreeViewDragAnalyzer,
+} from '@progress/kendo-vue-treeview';
+import {
+  plusIcon,
+  insertTopIcon,
+  insertMiddleIcon,
+  insertBottomIcon,
+  cancelIcon,
+} from '@progress/kendo-svg-icons';
+import Logger from './Logger.vue';
+
+function getSiblings(itemIndex, data) {
+  let result = data;
+  const indices = itemIndex.split(SEPARATOR).map((index) => Number(index));
+  for (let i = 0; i < indices.length - 1; i++) {
+    result = result[indices[i]].items || [];
+  }
+  return result;
+}
+
+const SEPARATOR = '_';
+
+export default {
+  components: {
+    TreeView,
+    TreeViewDragClue,
+    Logger,
+  },
+  created() {
+    this.dragOverCnt = 0;
+    this.isDragDrop = false;
+  },
+  computed: {
+    eventsList() {
+      return this.events;
+    },
+    dataItems() {
+      return processTreeViewItems(this.tree, {
+        expand: this.expand,
+        select: this.selected,
+      });
+    },
+  },
+  data() {
+    return {
+      events: [],
+      expand: {
+        ids: [],
+        idField: 'text',
+      },
+      selected: {
+        ids: [],
+        idField: 'text',
+      },
+      tree: [
+        {
+          text: 'Furniture',
+          expanded: true,
+          items: [
+            {
+              text: 'Tables & Chairs',
+            },
+            {
+              text: 'Sofas',
+            },
+            {
+              text: 'Occasional Furniture',
+            },
+          ],
+        },
+        {
+          text: 'Decor',
+          expanded: true,
+          items: [
+            {
+              text: 'Bed Linen',
+            },
+            {
+              text: 'Curtains & Blinds',
+            },
+            {
+              text: 'Carpets',
+            },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    getClueIcon(event) {
+      const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
+      const { itemHierarchicalIndex: itemIndex } =
+        eventAnalyzer.destinationMeta;
+      if (eventAnalyzer.isDropAllowed) {
+        switch (eventAnalyzer.getDropOperation()) {
+          case 'child':
+            return plusIcon;
+          case 'before':
+            return itemIndex === '0' || itemIndex.endsWith(`${SEPARATOR}0`)
+              ? insertTopIcon
+              : insertMiddleIcon;
+          case 'after':
+            const siblings = getSiblings(itemIndex, this.tree);
+            const lastIndex = Number(itemIndex.split(SEPARATOR).pop());
+            return lastIndex < siblings.length - 1
+              ? insertMiddleIcon
+              : insertBottomIcon;
+          default:
+            break;
+        }
+      }
+      return cancelIcon;
+    },
+    onItemDragOver(event) {
+      this.events.unshift(
+        'The dragOver event of Node ' + event.item.text + ' was triggered'
+      );
+      this.dragOverCnt++;
+      this.$refs.dragClue.show(
+        event.pageY + 10,
+        event.pageX,
+        event.item.text,
+        this.getClueIcon(event)
+      );
+    },
+    onItemDragStart(event) {
+      this.events.unshift(
+        'The drag of Node ' + event.item.text + ' has started'
+      );
+    },
+    onItemDragEnd(event) {
+      this.isDragDrop = this.dragOverCnt > 0;
+      this.dragOverCnt = 0;
+      this.$refs.dragClue.hide();
+      const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
+      if (eventAnalyzer.isDropAllowed) {
+        const updatedTree = moveTreeViewItem(
+          event.itemHierarchicalIndex,
+          this.tree,
+          eventAnalyzer.getDropOperation() || 'child',
+          eventAnalyzer.destinationMeta.itemHierarchicalIndex
+        );
+        this.tree = updatedTree;
+      }
+      this.events.unshift('The drag of Node ' + event.item.text + ' has ended');
+    },
+    onItemClick(event) {
+      if (!this.isDragDrop) {
+        let ids = this.selected.ids.slice();
+        const index = ids.indexOf(event.item.text);
+        index === -1 ? ids.push(event.item.text) : ids.splice(index, 1);
+        this.selected = {
+          ids,
+          idField: 'text',
+        };
+      }
+    },
+    onExpandChange(event) {
+      event.item.expanded = !event.item.expanded;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treeview/events/select-check/Logger.vue b/vue-options-api-demos/treeview/events/select-check/Logger.vue
new file mode 100644
index 00000000..7d9e1695
--- /dev/null
+++ b/vue-options-api-demos/treeview/events/select-check/Logger.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="example-config">
+    <h5>{{ title }}</h5>
+    <ul class="event-log">
+      <li v-for="(event, idx) in events" :key="idx">
+        {{ events.length - idx }}. {{ event }}
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    events: Array,
+    title: String,
+  },
+};
+</script>
+
+<style scoped>
+.example-config {
+  margin: 0 0 20px;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log {
+  margin: 0;
+  padding: 0;
+  max-height: 100px;
+  overflow-y: auto;
+  list-style-type: none;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: white;
+}
+.event-log li {
+  margin: 0;
+  padding: 0.3em;
+  line-height: 1.2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.event-log li:last-child {
+  margin-bottom: -1px;
+}
+</style>
diff --git a/vue-options-api-demos/treeview/events/select-check/main.js b/vue-options-api-demos/treeview/events/select-check/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treeview/events/select-check/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treeview/events/select-check/main.vue b/vue-options-api-demos/treeview/events/select-check/main.vue
new file mode 100644
index 00000000..e0449fe0
--- /dev/null
+++ b/vue-options-api-demos/treeview/events/select-check/main.vue
@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <div>
+      <TreeView
+        :dataItems="treeDataItems"
+        :expandIcons="true"
+        @expandchange="onExpandChange"
+        :ariaMultiselectable="true"
+        @itemclick="onItemClick"
+        :checkboxes="true"
+        @checkchange="onCheckChange"
+      />
+    </div>
+    <br />
+    <br />
+    <Logger :title="'Events list'" :events="eventsList" />
+  </div>
+</template>
+
+<script>
+import {
+  TreeView,
+  processTreeViewItems,
+  handleTreeViewCheckChange,
+} from '@progress/kendo-vue-treeview';
+import Logger from './Logger.vue';
+
+export default {
+  components: {
+    TreeView,
+    Logger,
+  },
+  computed: {
+    eventsList() {
+      return this.events;
+    },
+    treeDataItems() {
+      return processTreeViewItems(this.tree, {
+        select: this.select,
+        check: this.check,
+        expand: this.expand,
+      });
+    },
+  },
+  data() {
+    return {
+      events: [],
+      tree: [
+        {
+          text: 'Furniture',
+          items: [
+            {
+              text: 'Tables & Chairs',
+            },
+            {
+              text: 'Sofas',
+            },
+            {
+              text: 'Occasional Furniture',
+            },
+          ],
+        },
+        {
+          text: 'Decor',
+          items: [
+            {
+              text: 'Bed Linen',
+            },
+            {
+              text: 'Curtains & Blinds',
+            },
+            {
+              text: 'Carpets',
+            },
+          ],
+        },
+      ],
+      check: [],
+      expand: {
+        ids: ['Item2'],
+        idField: 'text',
+      },
+      select: [''],
+    };
+  },
+  methods: {
+    onItemClick(event) {
+      this.events.unshift('Node ' + event.item.text + ' was selected');
+      this.select = [event.itemHierarchicalIndex];
+    },
+    onExpandChange(event) {
+      event.item.expanded !== true
+        ? this.events.unshift('Node ' + event.item.text + ' was expanded')
+        : this.events.unshift('Node ' + event.item.text + ' was collapsed');
+      let ids = this.expand.ids.slice();
+      const index = ids.indexOf(event.item.text);
+      index === -1 ? ids.push(event.item.text) : ids.splice(index, 1);
+      this.expand = {
+        ids,
+        idField: 'text',
+      };
+    },
+    onCheckChange(event) {
+      event.item.checked !== true
+        ? this.events.unshift('Node ' + event.item.text + ' was checked')
+        : this.events.unshift('Node ' + event.item.text + ' was unchecked');
+      const settings = {
+        singleMode: false,
+        checkChildren: false,
+        checkParents: false,
+      };
+      this.check = handleTreeViewCheckChange(
+        event,
+        this.check,
+        this.tree,
+        settings
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treeview/expand/custom-items-expanded-helper-function/main.js b/vue-options-api-demos/treeview/expand/custom-items-expanded-helper-function/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treeview/expand/custom-items-expanded-helper-function/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treeview/expand/custom-items-expanded-helper-function/main.vue b/vue-options-api-demos/treeview/expand/custom-items-expanded-helper-function/main.vue
new file mode 100644
index 00000000..835b8e34
--- /dev/null
+++ b/vue-options-api-demos/treeview/expand/custom-items-expanded-helper-function/main.vue
@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <TreeView
+      :animate="false"
+      :dataItems="treeDataItems"
+      :expandIcons="true"
+      :children-field="'subCategories'"
+      :text-field="'title'"
+      @expandchange="onExpandChange"
+    />
+  </div>
+</template>
+
+<script>
+import { TreeView, processTreeViewItems } from '@progress/kendo-vue-treeview';
+
+export default {
+  components: {
+    TreeView,
+  },
+  data() {
+    return {
+      tree: [
+        {
+          id: 1,
+          title: 'TreeView Item 1',
+          subCategories: [
+            {
+              id: 2,
+              title: 'TreeView Item 2',
+              subCategories: [
+                {
+                  id: 4,
+                  title: 'TreeView Item 2.1',
+                },
+                {
+                  id: 5,
+                  title: 'TreeView Item 2.2',
+                },
+                {
+                  id: 6,
+                  title: 'TreeView Item 2.3',
+                },
+                {
+                  id: 7,
+                  title: 'TreeView Item 2.4',
+                },
+                {
+                  id: 8,
+                  title: 'TreeView Item 2.5',
+                },
+              ],
+            },
+            {
+              id: 3,
+              title: 'TreeView Item 3',
+              subCategories: [
+                {
+                  id: 9,
+                  title: 'TreeView Item 3.1',
+                },
+                {
+                  id: 10,
+                  title: 'TreeView Item 3.2',
+                },
+                {
+                  id: 11,
+                  title: 'TreeView Item 3.3',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      expand: {
+        ids: ['TreeView Item 2'],
+        idField: 'title',
+      },
+    };
+  },
+  computed: {
+    treeDataItems() {
+      return processTreeViewItems(this.tree, {
+        expand: this.expand,
+        childrenField: 'subCategories',
+      });
+    },
+  },
+  methods: {
+    onExpandChange(event) {
+      let ids = this.expand.ids.slice();
+      const index = ids.indexOf(event.item.title);
+      index === -1 ? ids.push(event.item.title) : ids.splice(index, 1);
+      this.expand = {
+        ids,
+        idField: 'title',
+      };
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treeview/expand/items-expanded-all/main.js b/vue-options-api-demos/treeview/expand/items-expanded-all/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treeview/expand/items-expanded-all/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treeview/expand/items-expanded-all/main.vue b/vue-options-api-demos/treeview/expand/items-expanded-all/main.vue
new file mode 100644
index 00000000..cd8f941d
--- /dev/null
+++ b/vue-options-api-demos/treeview/expand/items-expanded-all/main.vue
@@ -0,0 +1,132 @@
+<template>
+  <div>
+    <div class="example-config">
+      <button
+        @click="expandAll"
+        class="
+          k-button k-button-md k-rounded-md k-button-solid k-button-solid-base
+        "
+      >
+        Expand all
+      </button>
+      <button
+        @click="collapseAll"
+        class="
+          k-button k-button-md k-rounded-md k-button-solid k-button-solid-base
+        "
+      >
+        Collapse all
+      </button>
+    </div>
+    <TreeView
+      :dataItems="tree"
+      :expandIcons="true"
+      @expandchange="onExpandChange"
+    />
+  </div>
+</template>
+
+<script>
+import { TreeView } from '@progress/kendo-vue-treeview';
+
+export default {
+  components: {
+    TreeView,
+  },
+  data() {
+    return {
+      tree: [
+        {
+          text: 'Item1',
+          items: [
+            {
+              text: 'Item1.1',
+            },
+            {
+              text: 'Item1.2',
+            },
+          ],
+        },
+        {
+          text: 'Item2',
+          items: [
+            {
+              text: 'Item2.1',
+            },
+            {
+              text: 'Item2.2',
+            },
+          ],
+        },
+        {
+          text: 'Item3',
+          items: [
+            {
+              text: 'Item3.1',
+            },
+            {
+              text: 'Item3.2',
+            },
+          ],
+        },
+        {
+          text: 'Item4',
+          items: [
+            {
+              text: 'Item4.1',
+            },
+            {
+              text: 'Item4.2',
+            },
+          ],
+        },
+        {
+          text: 'Item5',
+          items: [
+            {
+              text: 'Item5.1',
+            },
+            {
+              text: 'Item5.2',
+            },
+          ],
+        },
+        {
+          text: 'Item6',
+          items: [
+            {
+              text: 'Item6.1',
+            },
+            {
+              text: 'Item6.2',
+            },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    expandAll() {
+      this.tree = this.tree.map((item) =>
+        Object.assign({}, item, {
+          expanded: true,
+        })
+      );
+    },
+    collapseAll() {
+      this.tree = this.tree.map((item) =>
+        Object.assign({}, item, {
+          expanded: false,
+        })
+      );
+    },
+    onExpandChange(event) {
+      const updatedData = this.tree.slice();
+      const itemIndex = updatedData.indexOf(event.item);
+      updatedData[itemIndex] = { ...event.item };
+      updatedData[itemIndex].expanded = !updatedData[itemIndex].expanded;
+      this.tree = updatedData;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treeview/expand/items-expanded-directly/main.js b/vue-options-api-demos/treeview/expand/items-expanded-directly/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treeview/expand/items-expanded-directly/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treeview/expand/items-expanded-directly/main.vue b/vue-options-api-demos/treeview/expand/items-expanded-directly/main.vue
new file mode 100644
index 00000000..68e84347
--- /dev/null
+++ b/vue-options-api-demos/treeview/expand/items-expanded-directly/main.vue
@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <TreeView
+      :dataItems="treeData"
+      :expand-icons="true"
+      @expandchange="onExpandChange"
+    />
+  </div>
+</template>
+
+<script>
+import { TreeView } from '@progress/kendo-vue-treeview';
+
+export default {
+  components: {
+    TreeView,
+  },
+  data() {
+    return {
+      treeData: [
+        {
+          text: 'Furniture',
+          expanded: true,
+          items: [
+            {
+              text: 'Tables & Chairs',
+            },
+            {
+              text: 'Sofas',
+            },
+            {
+              text: 'Occasional Furniture',
+            },
+          ],
+        },
+        {
+          text: 'Decor',
+          items: [
+            {
+              text: 'Bed Linen',
+            },
+            {
+              text: 'Curtains & Blinds',
+            },
+            {
+              text: 'Carpets',
+            },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    onExpandChange(event) {
+      event.item.expanded = !event.item.expanded;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treeview/expand/items-expanded-helper-function/main.js b/vue-options-api-demos/treeview/expand/items-expanded-helper-function/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treeview/expand/items-expanded-helper-function/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treeview/expand/items-expanded-helper-function/main.vue b/vue-options-api-demos/treeview/expand/items-expanded-helper-function/main.vue
new file mode 100644
index 00000000..27c3ce05
--- /dev/null
+++ b/vue-options-api-demos/treeview/expand/items-expanded-helper-function/main.vue
@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <TreeView
+      :dataItems="treeDataItems"
+      :expandIcons="true"
+      @expandchange="onExpandChange"
+    />
+  </div>
+</template>
+
+<script>
+import { TreeView, processTreeViewItems } from '@progress/kendo-vue-treeview';
+
+export default {
+  components: {
+    TreeView,
+  },
+  data() {
+    return {
+      tree: [
+        {
+          text: 'Item1',
+          items: [
+            { text: 'Item1.1' },
+            { text: 'Item1.2', items: [{ text: 'Item1.2.1' }] },
+          ],
+        },
+        {
+          text: 'Item2',
+          disabled: true,
+          items: [
+            { text: 'Item2.1' },
+            { text: 'Item2.2' },
+            { text: 'Item2.3' },
+          ],
+        },
+        {
+          text: 'Item3',
+        },
+      ],
+      expand: {
+        ids: ['Item2'],
+        idField: 'text',
+      },
+    };
+  },
+  computed: {
+    treeDataItems() {
+      return processTreeViewItems(this.tree, {
+        expand: this.expand,
+      });
+    },
+  },
+  methods: {
+    onExpandChange(event) {
+      let ids = this.expand.ids.slice();
+      const index = ids.indexOf(event.item.text);
+      index === -1 ? ids.push(event.item.text) : ids.splice(index, 1);
+      this.expand = {
+        ids,
+        idField: 'text',
+      };
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treeview/get-started/main.js b/vue-options-api-demos/treeview/get-started/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treeview/get-started/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treeview/get-started/main.vue b/vue-options-api-demos/treeview/get-started/main.vue
new file mode 100644
index 00000000..42c6a121
--- /dev/null
+++ b/vue-options-api-demos/treeview/get-started/main.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <TreeView :dataItems="tree" />
+  </div>
+</template>
+
+<script>
+import { TreeView } from '@progress/kendo-vue-treeview';
+
+export default {
+  components: {
+    TreeView,
+  },
+  data() {
+    return {
+      tree: [
+        {
+          text: 'Furniture',
+          expanded: true,
+          items: [
+            {
+              text: 'Tables & Chairs',
+            },
+            {
+              text: 'Sofas',
+            },
+            {
+              text: 'Occasional Furniture',
+            },
+          ],
+        },
+        {
+          text: 'Decor',
+          expanded: true,
+          items: [
+            {
+              text: 'Bed Linen',
+            },
+            {
+              text: 'Curtains & Blinds',
+            },
+            {
+              text: 'Carpets',
+            },
+          ],
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treeview/keyboard/main.js b/vue-options-api-demos/treeview/keyboard/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treeview/keyboard/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treeview/keyboard/main.vue b/vue-options-api-demos/treeview/keyboard/main.vue
new file mode 100644
index 00000000..cfa9b304
--- /dev/null
+++ b/vue-options-api-demos/treeview/keyboard/main.vue
@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <TreeView
+      :dataItems="treeDataItems"
+      :expandIcons="true"
+      @expandchange="onExpandChange"
+      :ariaMultiselectable="true"
+      @itemclick="onItemClick"
+      :checkboxes="true"
+      @checkchange="onCheckChange"
+    />
+  </div>
+</template>
+
+<script>
+import {
+  TreeView,
+  processTreeViewItems,
+  handleTreeViewCheckChange,
+} from '@progress/kendo-vue-treeview';
+
+export default {
+  components: {
+    TreeView,
+  },
+  data() {
+    return {
+      tree: [
+        {
+          text: 'Furniture',
+          items: [
+            {
+              text: 'Tables & Chairs',
+            },
+            {
+              text: 'Sofas',
+            },
+            {
+              text: 'Occasional Furniture',
+            },
+          ],
+        },
+        {
+          text: 'Decor',
+          items: [
+            {
+              text: 'Bed Linen',
+            },
+            {
+              text: 'Curtains & Blinds',
+            },
+            {
+              text: 'Carpets',
+            },
+          ],
+        },
+      ],
+      check: [],
+      expand: {
+        ids: ['Item2'],
+        idField: 'text',
+      },
+      select: [''],
+    };
+  },
+  computed: {
+    treeDataItems() {
+      return processTreeViewItems(this.tree, {
+        select: this.select,
+        check: this.check,
+        expand: this.expand,
+      });
+    },
+  },
+  methods: {
+    onItemClick(event) {
+      this.select = [event.itemHierarchicalIndex];
+    },
+    onExpandChange(event) {
+      let ids = this.expand.ids.slice();
+      const index = ids.indexOf(event.item.text);
+      index === -1 ? ids.push(event.item.text) : ids.splice(index, 1);
+      this.expand = {
+        ids,
+        idField: 'text',
+      };
+    },
+    onCheckChange(event) {
+      const settings = {
+        singleMode: false,
+        checkChildren: false,
+        checkParents: false,
+      };
+      this.check = handleTreeViewCheckChange(
+        event,
+        this.check,
+        this.tree,
+        settings
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treeview/overview/basic/main.js b/vue-options-api-demos/treeview/overview/basic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treeview/overview/basic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treeview/overview/basic/main.vue b/vue-options-api-demos/treeview/overview/basic/main.vue
new file mode 100644
index 00000000..cfa9b304
--- /dev/null
+++ b/vue-options-api-demos/treeview/overview/basic/main.vue
@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <TreeView
+      :dataItems="treeDataItems"
+      :expandIcons="true"
+      @expandchange="onExpandChange"
+      :ariaMultiselectable="true"
+      @itemclick="onItemClick"
+      :checkboxes="true"
+      @checkchange="onCheckChange"
+    />
+  </div>
+</template>
+
+<script>
+import {
+  TreeView,
+  processTreeViewItems,
+  handleTreeViewCheckChange,
+} from '@progress/kendo-vue-treeview';
+
+export default {
+  components: {
+    TreeView,
+  },
+  data() {
+    return {
+      tree: [
+        {
+          text: 'Furniture',
+          items: [
+            {
+              text: 'Tables & Chairs',
+            },
+            {
+              text: 'Sofas',
+            },
+            {
+              text: 'Occasional Furniture',
+            },
+          ],
+        },
+        {
+          text: 'Decor',
+          items: [
+            {
+              text: 'Bed Linen',
+            },
+            {
+              text: 'Curtains & Blinds',
+            },
+            {
+              text: 'Carpets',
+            },
+          ],
+        },
+      ],
+      check: [],
+      expand: {
+        ids: ['Item2'],
+        idField: 'text',
+      },
+      select: [''],
+    };
+  },
+  computed: {
+    treeDataItems() {
+      return processTreeViewItems(this.tree, {
+        select: this.select,
+        check: this.check,
+        expand: this.expand,
+      });
+    },
+  },
+  methods: {
+    onItemClick(event) {
+      this.select = [event.itemHierarchicalIndex];
+    },
+    onExpandChange(event) {
+      let ids = this.expand.ids.slice();
+      const index = ids.indexOf(event.item.text);
+      index === -1 ? ids.push(event.item.text) : ids.splice(index, 1);
+      this.expand = {
+        ids,
+        idField: 'text',
+      };
+    },
+    onCheckChange(event) {
+      const settings = {
+        singleMode: false,
+        checkChildren: false,
+        checkParents: false,
+      };
+      this.check = handleTreeViewCheckChange(
+        event,
+        this.check,
+        this.tree,
+        settings
+      );
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treeview/select/selection-all/main.js b/vue-options-api-demos/treeview/select/selection-all/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treeview/select/selection-all/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treeview/select/selection-all/main.vue b/vue-options-api-demos/treeview/select/selection-all/main.vue
new file mode 100644
index 00000000..2e3256f1
--- /dev/null
+++ b/vue-options-api-demos/treeview/select/selection-all/main.vue
@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <div class="example-config">
+      <button @click="selectAll" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base">
+        Select all
+      </button>
+      <button @click="unselectAll" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base">
+        Deselect all
+      </button>
+    </div>
+    <TreeView :dataItems="dataItems" @itemclick="onItemClick" />
+  </div>
+</template>
+
+<script>
+import { TreeView, processTreeViewItems } from '@progress/kendo-vue-treeview';
+
+export default {
+  components: {
+    TreeView
+  },
+  data() {
+    return {
+      select: [],
+      tree: [
+        {
+          text: "Item1",
+          expanded: true,
+          items: [
+            {
+              text: "Item1.1",
+            },
+            {
+              text: "Item1.2",
+            },
+          ],
+        },
+        {
+          text: "Item2",
+          expanded: true,
+          items: [
+            {
+              text: "Item2.1",
+            },
+            {
+              text: "Item2.2",
+            },
+          ],
+        },
+        {
+          text: "Item3",
+          expanded: true,
+          items: [
+            {
+              text: "Item3.1",
+            },
+            {
+              text: "Item3.2",
+            },
+          ],
+        },
+      ]
+    };
+  },
+  computed: {
+    dataItems() {
+      return processTreeViewItems(this.tree, {
+        select: this.select,
+      })
+    }
+  },
+  methods: {
+    selectAll() {
+      this.select = ["0", "0_0", "0_1", "1", "1_0", "1_1", "2", "2_0", "2_1"];
+    },
+    unselectAll() {
+      this.select = [];
+    },
+    onItemClick(event) {
+      let select = this.select.slice();
+      const index = select.indexOf(event.itemHierarchicalIndex);
+      index === -1
+        ? select.push(event.itemHierarchicalIndex)
+        : select.splice(index, 1);
+      this.select = select;
+    }
+  }
+};
+
+</script>
+
diff --git a/vue-options-api-demos/treeview/select/selection-update-helper-function/main.js b/vue-options-api-demos/treeview/select/selection-update-helper-function/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treeview/select/selection-update-helper-function/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treeview/select/selection-update-helper-function/main.vue b/vue-options-api-demos/treeview/select/selection-update-helper-function/main.vue
new file mode 100644
index 00000000..df58f5a9
--- /dev/null
+++ b/vue-options-api-demos/treeview/select/selection-update-helper-function/main.vue
@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <TreeView
+      :dataItems="treeDataItems"
+      :expandIcons="true"
+      @expandchange="onExpandChange"
+      @itemclick="onItemClick"
+    />
+  </div>
+</template>
+
+<script>
+import { TreeView, processTreeViewItems } from '@progress/kendo-vue-treeview';
+
+export default {
+  components: {
+    TreeView,
+  },
+  data() {
+    return {
+      tree: [
+        {
+          text: 'Item1',
+          items: [
+            { text: 'Item1.1' },
+            { text: 'Item1.2', items: [{ text: 'Item1.2.1' }] },
+          ],
+        },
+        {
+          text: 'Item2',
+          disabled: true,
+          items: [
+            { text: 'Item2.1' },
+            { text: 'Item2.2' },
+            { text: 'Item2.3' },
+          ],
+        },
+        {
+          text: 'Item3',
+        },
+      ],
+      select: [],
+      expand: {
+        ids: ['Item2'],
+        idField: 'text',
+      },
+    };
+  },
+  computed: {
+    treeDataItems() {
+      return processTreeViewItems(this.tree, {
+        expand: this.expand,
+        select: this.select,
+      });
+    },
+  },
+  methods: {
+    onExpandChange(event) {
+      let ids = this.expand.ids.slice();
+      const index = ids.indexOf(event.item.text);
+      index === -1 ? ids.push(event.item.text) : ids.splice(index, 1);
+      this.expand = {
+        ids,
+        idField: 'text',
+      };
+    },
+    onItemClick(event) {
+      this.select = [event.itemHierarchicalIndex];
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/treeview/select/selection-update/main.js b/vue-options-api-demos/treeview/select/selection-update/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/treeview/select/selection-update/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/treeview/select/selection-update/main.vue b/vue-options-api-demos/treeview/select/selection-update/main.vue
new file mode 100644
index 00000000..89f492ae
--- /dev/null
+++ b/vue-options-api-demos/treeview/select/selection-update/main.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <TreeView :dataItems="treeData" @itemclick="onItemChange" />
+  </div>
+</template>
+
+<script>
+import { TreeView } from '@progress/kendo-vue-treeview';
+
+export default {
+  components: {
+    TreeView,
+  },
+  data() {
+    return {
+      selectedItem: undefined,
+      treeData: [
+        {
+          text: 'Furniture',
+          expanded: true,
+          items: [
+            {
+              text: 'Tables & Chairs',
+            },
+            {
+              text: 'Sofas',
+            },
+            {
+              text: 'Occasional Furniture',
+            },
+          ],
+        },
+        {
+          text: 'Decor',
+          items: [
+            {
+              text: 'Bed Linen',
+            },
+            {
+              text: 'Curtains & Blinds',
+            },
+            {
+              text: 'Carpets',
+            },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    onItemChange(event) {
+      if (this.selectedItem) {
+        this.selectedItem.selected = false;
+      }
+
+      event.item.selected = true;
+      this.selectedItem = event.item;
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/upload/action-buttons/main.js b/vue-options-api-demos/upload/action-buttons/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/upload/action-buttons/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/upload/action-buttons/main.vue b/vue-options-api-demos/upload/action-buttons/main.vue
new file mode 100644
index 00000000..f8535656
--- /dev/null
+++ b/vue-options-api-demos/upload/action-buttons/main.vue
@@ -0,0 +1,58 @@
+<template>
+ <div>
+    <div class="example">
+        <div class="upload">
+            <upload
+                :auto-upload="false"
+                :actions-layout="actionsLayout"
+                :default-files="[]"
+                :with-credentials="false"
+                :save-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/save'"
+                :remove-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'"       
+            ></upload>
+        </div>
+        <div class="example-config">
+            <h5>Actions Layout</h5>
+            <input id="start" class="k-radio k-radio-md" type="radio" name="layout" value="start" :checked="actionsLayout === 'start'" @click="handleChange" />
+            <label for="start" class="k-radio-label">Start</label>
+            <br />
+            <input id="center" class="k-radio k-radio-md" type="radio" name="layout" value="center" :checked="actionsLayout === 'center'" @click="handleChange" />
+            <label for="center" class="k-radio-label">Center</label>
+            <br />
+            <input id="end" class="k-radio k-radio-md" type="radio" name="layout" value="end" :checked="actionsLayout === 'end'" @click="handleChange" />
+            <label for="end" class="k-radio-label">End</label>
+            <br />
+            <input id="stretched" class="k-radio k-radio-md" type="radio" name="layout" value="stretched" :checked="actionsLayout === 'stretched'" @click="handleChange" />
+            <label for="stretched" class="k-radio-label">Stretched</label>
+            <span class="k-form-hint">*Please, select files to view the action buttons.</span>
+        </div>
+        </div>
+    </div>
+</template>
+<script>
+import { Upload } from '@progress/kendo-vue-upload';
+
+export default {
+    components: {
+        upload: Upload
+    },
+    data () {
+        return {
+            actionsLayout: 'end'
+        };
+    },
+    methods: {
+        handleChange (e) {
+            this. actionsLayout = e.target.value;
+        }
+    }
+}
+</script>
+ <style>
+    .example {
+        display: flex;
+        gap: 20px;
+    }
+    .upload { flex: 1 0 60%; }
+    .example-config { flex: 1 0 30%; }
+</style>
diff --git a/vue-options-api-demos/upload/additional-data/main.js b/vue-options-api-demos/upload/additional-data/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/upload/additional-data/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/upload/additional-data/main.vue b/vue-options-api-demos/upload/additional-data/main.vue
new file mode 100644
index 00000000..0fb497b5
--- /dev/null
+++ b/vue-options-api-demos/upload/additional-data/main.vue
@@ -0,0 +1,31 @@
+<template>
+   <div>
+        <upload
+            :default-files="[]"
+            :batch="false"
+            :multiple="true"
+            :with-credentials="false"
+            @beforeupload="onBeforeUpload"
+            @beforeremove="onBeforeRemove"
+            :save-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/save'"
+            :remove-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'"       
+            />
+    </div>
+</template>
+<script>
+import { Upload } from '@progress/kendo-vue-upload';
+
+export default {
+    components: {
+        upload: Upload
+    },
+    methods: {
+        onBeforeUpload(event) {
+            event.additionalData.description = 'File upload';
+        },
+        onBeforeRemove (event) {
+            event.additionalData.description = 'File remove';
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/upload/credentials/main.js b/vue-options-api-demos/upload/credentials/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/upload/credentials/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/upload/credentials/main.vue b/vue-options-api-demos/upload/credentials/main.vue
new file mode 100644
index 00000000..742bd021
--- /dev/null
+++ b/vue-options-api-demos/upload/credentials/main.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <upload
+        :default-files="[]"
+        :batch="false"
+        :multiple="true"
+        :with-credentials="false"
+        :save-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/save'"
+        :remove-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'"       
+        />
+    </div>
+</template>
+<script>
+import { Upload } from '@progress/kendo-vue-upload';
+
+export default {
+    components: {
+        upload: Upload
+    }
+}
+</script>
diff --git a/vue-options-api-demos/upload/custom-complex/CustomList.vue b/vue-options-api-demos/upload/custom-complex/CustomList.vue
new file mode 100644
index 00000000..ac7ca35f
--- /dev/null
+++ b/vue-options-api-demos/upload/custom-complex/CustomList.vue
@@ -0,0 +1,41 @@
+<template>
+  Custom HTML 1
+  <single
+    :files="files"
+    :async="async"
+    :disabled="disabled"
+    @cancel="onCancel"
+    @remove="onRemove"
+    @retry="onRetry"
+  />
+  Custom HTML 2
+</template>
+<script>
+import {
+  UploadListSingleItem,
+  // UploadListMultiItem
+} from '@progress/kendo-vue-upload';
+
+export default {
+  components: {
+    single: UploadListSingleItem,
+    // multi: UploadListMultiItem
+  },
+  props: {
+    files: Array,
+    disabled: Boolean,
+    async: Object,
+  },
+  methods: {
+    onRetry(uid) {
+      this.$emit('retry', uid);
+    },
+    onRemove(uid) {
+      this.$emit('remove', uid);
+    },
+    onCancel(uid) {
+      this.$emit('cancel', uid);
+    },
+  },
+};
+</script>
diff --git a/vue-options-api-demos/upload/custom-complex/main.js b/vue-options-api-demos/upload/custom-complex/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/upload/custom-complex/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/upload/custom-complex/main.vue b/vue-options-api-demos/upload/custom-complex/main.vue
new file mode 100644
index 00000000..9b2c2b5e
--- /dev/null
+++ b/vue-options-api-demos/upload/custom-complex/main.vue
@@ -0,0 +1,38 @@
+<template>
+    <div>
+        <upload
+            :list="customListItemUI"
+            :default-files="[]"
+            :batch="false"
+            :multiple="true"
+            :with-credentials="false"
+            :save-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/save'"
+            :remove-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'"
+        >
+         <template v-slot:myTemplate="{props}">
+            <custom
+                :files="props.files"
+                :async="props.async"
+                @cancel="props.onCancel"
+                @remove="props.onRemove"
+                @retry="props.onRetry"/>
+        </template>
+        </upload>
+        </div>
+</template>
+<script>
+import { Upload } from '@progress/kendo-vue-upload';
+import CustomList from './CustomList.vue';
+
+export default {
+    components: {
+        upload: Upload,
+        'custom': CustomList
+    },
+    data () {
+        return {
+            customListItemUI: 'myTemplate'
+        };
+    }
+}
+</script>
diff --git a/vue-options-api-demos/upload/custom-external-drop-zone/CustomHint.vue b/vue-options-api-demos/upload/custom-external-drop-zone/CustomHint.vue
new file mode 100644
index 00000000..018fab04
--- /dev/null
+++ b/vue-options-api-demos/upload/custom-external-drop-zone/CustomHint.vue
@@ -0,0 +1,3 @@
+<template>
+  <span>My custom hint</span>
+</template>
diff --git a/vue-options-api-demos/upload/custom-external-drop-zone/CustomNote.vue b/vue-options-api-demos/upload/custom-external-drop-zone/CustomNote.vue
new file mode 100644
index 00000000..45bfc42a
--- /dev/null
+++ b/vue-options-api-demos/upload/custom-external-drop-zone/CustomNote.vue
@@ -0,0 +1,3 @@
+<template>
+ <span>My custom note</span>
+</template>
diff --git a/vue-options-api-demos/upload/custom-external-drop-zone/main.js b/vue-options-api-demos/upload/custom-external-drop-zone/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/upload/custom-external-drop-zone/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/upload/custom-external-drop-zone/main.vue b/vue-options-api-demos/upload/custom-external-drop-zone/main.vue
new file mode 100644
index 00000000..4c5dca59
--- /dev/null
+++ b/vue-options-api-demos/upload/custom-external-drop-zone/main.vue
@@ -0,0 +1,47 @@
+<template>
+     <div>
+        <external
+            :upload-ref="'upload'"
+            :custom-hint="hint"
+            :custom-note="note"
+            :inner-style="{backgroundColor: 'antiquewhite'}"
+        >
+         <template v-slot:myHintTemplate>
+            <customhint />
+         </template>
+         <template v-slot:myNoteTemplate>
+            <customnote />
+         </template>
+        </external>
+        <div :style="{height: '50px'}" ></div>
+        <upload
+            ref="upload"
+            :default-files="[]"
+            :batch="false"
+            :multiple="true"
+            :with-credentials="false"
+            :save-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/save'"
+            :remove-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'"
+        ></upload>
+    </div>
+</template>
+<script>
+import { Upload, ExternalDropZone } from '@progress/kendo-vue-upload';
+import CustomHint from './CustomHint.vue';
+import CustomNote from './CustomNote.vue';
+
+export default {
+    components: {
+        upload: Upload,
+        external: ExternalDropZone,
+        'customhint': CustomHint,
+        'customnote': CustomNote,
+    },
+    data () {
+        return {
+            hint: 'myHintTemplate',
+            note: 'myNoteTemplate'
+        };
+    }
+}
+</script>
diff --git a/vue-options-api-demos/upload/custom/CustomList.vue b/vue-options-api-demos/upload/custom/CustomList.vue
new file mode 100644
index 00000000..9f80635e
--- /dev/null
+++ b/vue-options-api-demos/upload/custom/CustomList.vue
@@ -0,0 +1,15 @@
+<template>
+  <ul>
+      <li v-for="file in files" :key="file.name">{{file.name}}</li>
+  </ul>
+</template>
+<script>
+export default {
+    props: {
+        files: Array,
+        disabled: Boolean,
+        async: Object
+    },
+}
+</script>
+
diff --git a/vue-options-api-demos/upload/custom/main.js b/vue-options-api-demos/upload/custom/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/upload/custom/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/upload/custom/main.vue b/vue-options-api-demos/upload/custom/main.vue
new file mode 100644
index 00000000..2347a311
--- /dev/null
+++ b/vue-options-api-demos/upload/custom/main.vue
@@ -0,0 +1,34 @@
+<template>
+    <div>
+        <upload
+            :list="customListItemUI"
+            :default-files="[]"
+            :batch="false"
+            :multiple="true"
+            :with-credentials="false"
+            :save-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/save'"
+            :remove-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'"
+        >
+         <template v-slot:myTemplate="{props}">
+            <custom
+                :files="props.files" />
+        </template>
+        </upload>
+        </div>
+</template>
+<script>
+import { Upload } from '@progress/kendo-vue-upload';
+import CustomList from './CustomList.vue';
+
+export default {
+    components: {
+        upload: Upload,
+        'custom': CustomList
+    },
+    data () {
+        return {
+            customListItemUI: 'myTemplate'
+        };
+    }
+}
+</script>
diff --git a/vue-options-api-demos/upload/disabled/main.js b/vue-options-api-demos/upload/disabled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/upload/disabled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/upload/disabled/main.vue b/vue-options-api-demos/upload/disabled/main.vue
new file mode 100644
index 00000000..0c618759
--- /dev/null
+++ b/vue-options-api-demos/upload/disabled/main.vue
@@ -0,0 +1,37 @@
+<template>
+    <div>
+        <kbutton :style="{ marginBottom: '10px' }" @click="onClick">
+       {{isDisabled ? 'Enable': 'Disable'}}
+            </kbutton>
+        <upload
+            :disabled="isDisabled"
+            :default-files="[]"
+            :batch="false"
+            :multiple="true"
+            :with-credentials="false"
+            :save-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/save'"
+            :remove-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'"       
+        />
+    </div>
+</template>
+<script>
+import { Upload } from '@progress/kendo-vue-upload';
+import { Button } from '@progress/kendo-vue-buttons';
+
+export default {
+    components: {
+        upload: Upload,
+      'kbutton': Button
+    },
+    data: function () {
+        return {
+            isDisabled: true
+        };
+    },
+    methods: {
+        onClick () {
+            this.isDisabled = !this.isDisabled;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/upload/drag-drop/main.js b/vue-options-api-demos/upload/drag-drop/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/upload/drag-drop/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/upload/drag-drop/main.vue b/vue-options-api-demos/upload/drag-drop/main.vue
new file mode 100644
index 00000000..75e6cd6b
--- /dev/null
+++ b/vue-options-api-demos/upload/drag-drop/main.vue
@@ -0,0 +1,21 @@
+<template>
+    <div>
+        <upload
+            :default-files="[]"
+            :batch="false"
+            :multiple="true"
+            :with-credentials="false"
+            :save-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/save'"
+            :remove-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'"       
+            />
+        </div>
+</template>
+<script>
+import { Upload } from '@progress/kendo-vue-upload';
+
+export default {
+    components: {
+        upload: Upload
+    }
+}
+</script>
diff --git a/vue-options-api-demos/upload/events/main.js b/vue-options-api-demos/upload/events/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/upload/events/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/upload/events/main.vue b/vue-options-api-demos/upload/events/main.vue
new file mode 100644
index 00000000..a5a99f37
--- /dev/null
+++ b/vue-options-api-demos/upload/events/main.vue
@@ -0,0 +1,102 @@
+<template>
+    <div>
+        <upload
+            :batch="false"
+            :multiple="true"
+            :files="files"
+            @add="onAdd"
+            @remove="onRemove"
+            @progress="onProgress"
+            @statuschange="onStatusChange"
+            :with-credentials="false"
+            :save-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/save'"
+            :remove-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'"
+        ></upload>
+        <div class='example-config' :style="{ marginTop: '20px' }">
+            <ul class='event-log'>
+                    <li v-for="event in events" :key="event">
+                        {{event}}
+                </li>
+            </ul>
+        </div>
+        <div v-if="files.length" class='img-preview example-config'>
+            <h3>Preview selected images</h3>
+            <img v-for="fileKey in Object.keys(filePreviews)"
+            :src="filePreviews[fileKey]"
+            :key="fileKey"
+            alt='image preview'
+            :style="{ width: 200, margin: 10 }"
+            />
+        </div>
+    </div>
+</template>
+<script>
+import { Upload } from '@progress/kendo-vue-upload';
+
+const fileStatuses = [
+    'UploadFailed',
+    'Initial',
+    'Selected',
+    'Uploading',
+    'Uploaded',
+    'RemoveFailed',
+    'Removing'
+];
+
+export default {
+    components: {
+        upload: Upload
+    },
+    data: function () {
+        return {
+            files: [],
+            events: [],
+            filePreviews: {}
+        };
+    },
+    methods: {
+        onAdd(event) {
+            const afterStateChange = () => {
+                event.affectedFiles
+                    .filter(file => !file.validationErrors)
+                    .forEach(file => {
+                        const reader = new FileReader();
+    
+                        reader.onloadend = (ev) => {
+                            this.filePreviews[file.uid] = ev.target.result;
+                        };
+    
+                        reader.readAsDataURL(file.getRawFile());
+                    });
+            };
+    
+            this.files = event.newState;
+            this.events.push(`File selected: ${event.affectedFiles[0].name}`);
+                afterStateChange();
+        },
+        onRemove(event) {
+            const filePreviews = {
+                ...this.filePreviews
+            };
+    
+            event.affectedFiles.forEach(file => {
+                delete filePreviews[file.uid];
+            });
+    
+            this.files = event.newState;
+            this.events.push(`File removed: ${event.affectedFiles[0].name}`);
+            this.filePreviews = filePreviews;
+        },
+        onProgress (event) {
+            this.files = event.newState;
+            this.events.push( `On Progress: ${event.affectedFiles[0].progress} %`);
+        },
+        onStatusChange (event) {
+            const file = event.affectedFiles[0];
+    
+            this.files = event.newState;
+            this.events.push(`File '${file.name}' status changed to: ${fileStatuses[file.status]}`);
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/upload/external-drop-zone/main.js b/vue-options-api-demos/upload/external-drop-zone/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/upload/external-drop-zone/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/upload/external-drop-zone/main.vue b/vue-options-api-demos/upload/external-drop-zone/main.vue
new file mode 100644
index 00000000..6ec9bdc3
--- /dev/null
+++ b/vue-options-api-demos/upload/external-drop-zone/main.vue
@@ -0,0 +1,28 @@
+<template>
+     <div>
+        <external
+            :upload-ref="'upload'"
+        >
+        </external>
+        <div :style="{height: '50px'}" ></div>
+        <upload
+            ref="upload"
+            :default-files="[]"
+            :batch="false"
+            :multiple="true"
+            :with-credentials="false"
+            :save-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/save'"
+            :remove-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'"       
+        ></upload>
+    </div>
+</template>
+<script>
+import { Upload, ExternalDropZone } from '@progress/kendo-vue-upload';
+
+export default {
+    components: {
+        upload: Upload,
+        external: ExternalDropZone,
+    }
+}
+</script>
diff --git a/vue-options-api-demos/upload/file-processing/automatic/main.js b/vue-options-api-demos/upload/file-processing/automatic/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/upload/file-processing/automatic/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/upload/file-processing/automatic/main.vue b/vue-options-api-demos/upload/file-processing/automatic/main.vue
new file mode 100644
index 00000000..954b031e
--- /dev/null
+++ b/vue-options-api-demos/upload/file-processing/automatic/main.vue
@@ -0,0 +1,21 @@
+<template>
+   <div>
+        <upload
+            :auto-upload="false"
+            :default-files="[]"
+            :multiple="true"
+            :with-credentials="false"
+            :save-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/save'"
+            :remove-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'"       
+            />
+    </div>
+</template>
+<script>
+import { Upload } from '@progress/kendo-vue-upload';
+
+export default {
+    components: {
+        upload: Upload
+    }
+}
+</script>
diff --git a/vue-options-api-demos/upload/file-processing/batch/main.js b/vue-options-api-demos/upload/file-processing/batch/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/upload/file-processing/batch/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/upload/file-processing/batch/main.vue b/vue-options-api-demos/upload/file-processing/batch/main.vue
new file mode 100644
index 00000000..327d52e7
--- /dev/null
+++ b/vue-options-api-demos/upload/file-processing/batch/main.vue
@@ -0,0 +1,20 @@
+<template>
+    <div>
+        <upload
+            :batch="true"
+            :default-files="[]"
+            :with-credentials="false"
+            :save-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/save'"
+            :remove-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'"       
+            />
+    </div>
+</template>
+<script>
+import { Upload } from '@progress/kendo-vue-upload';
+
+export default {
+    components: {
+        upload: Upload
+    }
+}
+</script>
diff --git a/vue-options-api-demos/upload/file-processing/single/main.js b/vue-options-api-demos/upload/file-processing/single/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/upload/file-processing/single/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/upload/file-processing/single/main.vue b/vue-options-api-demos/upload/file-processing/single/main.vue
new file mode 100644
index 00000000..2e0b326e
--- /dev/null
+++ b/vue-options-api-demos/upload/file-processing/single/main.vue
@@ -0,0 +1,21 @@
+<template>
+   <div>
+        <upload
+            :default-files="[]"
+            :batch="false"
+            :multiple="false"
+            :with-credentials="false"
+            :save-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/save'"
+            :remove-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'"       
+            />
+    </div>
+</template>
+<script>
+import { Upload } from '@progress/kendo-vue-upload';
+
+export default {
+    components: {
+        upload: Upload
+    }
+}
+</script>
diff --git a/vue-options-api-demos/upload/getting-started/main.js b/vue-options-api-demos/upload/getting-started/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/upload/getting-started/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/upload/getting-started/main.vue b/vue-options-api-demos/upload/getting-started/main.vue
new file mode 100644
index 00000000..a0b7f370
--- /dev/null
+++ b/vue-options-api-demos/upload/getting-started/main.vue
@@ -0,0 +1,122 @@
+<template>
+    <div>
+      <div class="col-sm-6 offset-sm-3">
+        <div class="card">
+          <div class="card-block">
+            <form class="k-form k-form-horizontal" @submit="handleSubmit">
+              <fieldset>
+                <div class="k-form-field mb-3">
+                  <label class="k-label k-form-label">Name:</label>
+                  <k-input
+                    :name="'username'"
+                    :pattern="'[A-Za-z]+'"
+                    :min-length="2"
+                    :required="true"
+                  >
+                  </k-input>
+                </div>
+                <div class="k-form-field mb-3">
+                  <label class="k-label k-form-label">Email:</label>
+                  <k-input :name="'email'" :type="'email'" :required="true" />
+                </div>
+                <div class="k-form-field mb-3">
+                  <label class="k-label k-form-label">CV:</label>
+                  <div :style="{ width: '100%' }">
+                    <upload
+                      :files="files"
+                      :batch="false"
+                      :multiple="true"
+                      :restrictions="{
+                        allowedExtensions: ['.pdf', '.docx'],
+                      }"
+                      @add="onAdd"
+                      @remove="onRemove"
+                      @progress="onProgress"
+                      @statuschange="onStatusChange"
+                      :with-credentials="false"
+                      :save-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/save'"
+                      :remove-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'"
+                    />
+                    <div class="k-form-hint">
+                      Accepted files: <strong> PDF and DOCX</strong>
+                    </div>
+                  </div>
+                </div>
+              </fieldset>
+              <div class="text-right">
+                <kbutton :theme-color="'primary'" type="submit"
+                  >Submit Application</kbutton
+                >
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+      <div
+        v-if="success"
+        class="alert alert-success"
+        :style="{ position: 'absolute' }"
+      >
+        Form submitted!
+      </div>
+      <div
+        v-if="addOneValidFile"
+        class="alert alert-warning"
+        :style="{ position: 'absolute' }"
+      >
+        Upload at least one valid file.
+      </div>
+    </div>
+  </template>
+  <script>
+  import { Upload } from '@progress/kendo-vue-upload';
+  import { Input } from '@progress/kendo-vue-inputs';
+  import { Button } from '@progress/kendo-vue-buttons';
+  
+  export default {
+    components: {
+      kbutton: Button,
+      'k-input': Input,
+      upload: Upload,
+    },
+    data() {
+      return {
+        addOneValidFile: false,
+        success: false,
+        files: [],
+      };
+    },
+    methods: {
+      hasOneValidFile() {
+        return this.files.some((f) => f.status === 4);
+      },
+      onAdd(event) {
+        this.files = event.newState;
+      },
+      onRemove(event) {
+        this.files = event.newState;
+      },
+      onProgress(event) {
+        this.files = event.newState;
+      },
+      onStatusChange(event) {
+        this.files = event.newState;
+      },
+      handleSubmit(event) {
+        event.preventDefault();
+        this.addOneValidFile = !this.hasOneValidFile();
+        setTimeout(() => {
+          this.addOneValidFile = false;
+        }, 3000);
+  
+        if (!this.addOneValidFile) {
+          this.success = this.hasOneValidFile();
+          setTimeout(() => {
+            this.success = false;
+          }, 3000);
+        }
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/upload/globalization/main.js b/vue-options-api-demos/upload/globalization/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/upload/globalization/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/upload/globalization/main.vue b/vue-options-api-demos/upload/globalization/main.vue
new file mode 100644
index 00000000..4bc14a0f
--- /dev/null
+++ b/vue-options-api-demos/upload/globalization/main.vue
@@ -0,0 +1,50 @@
+<template>
+   <div>
+        <localization :language="'bg-BG'">
+            <intl :locale="'bg'" >
+                <upload
+                    :default-files="[]"
+                    :batch="false"
+                    :multiple="true"
+                    :with-credentials="false"
+                    :save-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/save'"
+                    :remove-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'"       
+                ></upload>
+            </intl>
+        </localization>
+    </div>
+</template>
+<script>
+import { Upload } from '@progress/kendo-vue-upload';
+import { IntlProvider, LocalizationProvider, loadMessages } from '@progress/kendo-vue-intl';
+const bgMessages = {
+    "upload": {
+        "cancel": "Отмени",
+        "clearSelectedFiles": "Изчисти",
+        "dropFilesHere": "Пусни фаиловете тук за качване",
+        "headerStatusUploaded": "Готово",
+        "headerStatusUploading": "Качване...",
+        "invalidFileExtension": "Този тип фаил не е позволен.",
+        "invalidFiles": "Невалидни файлове. Моля проверете изискванията за качване.",
+        "invalidMaxFileSize": "Файлът е прекалено голям.",
+        "invalidMinFileSize": "Файлът е прекалено малък.",
+        "remove": "Премахни",
+        "retry": "Опитай отново",
+        "select": "Избери файлове...",
+        "statusUploaded": "Файловете са успешно качени.",
+        "statusUploadFailed": "Файловете не успяха да се качат.",
+        "uploadSelectedFiles": "Качи",
+        "total": "Общо",
+        "files": "файлове"
+    }
+};
+loadMessages(bgMessages, 'bg-BG');
+
+export default {
+    components: {
+        upload: Upload,
+        intl: IntlProvider,
+        localization: LocalizationProvider
+    }
+}
+</script>
diff --git a/vue-options-api-demos/upload/keyboard/main.js b/vue-options-api-demos/upload/keyboard/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/upload/keyboard/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/upload/keyboard/main.vue b/vue-options-api-demos/upload/keyboard/main.vue
new file mode 100644
index 00000000..954b031e
--- /dev/null
+++ b/vue-options-api-demos/upload/keyboard/main.vue
@@ -0,0 +1,21 @@
+<template>
+   <div>
+        <upload
+            :auto-upload="false"
+            :default-files="[]"
+            :multiple="true"
+            :with-credentials="false"
+            :save-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/save'"
+            :remove-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'"       
+            />
+    </div>
+</template>
+<script>
+import { Upload } from '@progress/kendo-vue-upload';
+
+export default {
+    components: {
+        upload: Upload
+    }
+}
+</script>
diff --git a/vue-options-api-demos/upload/modes/controlled/main.js b/vue-options-api-demos/upload/modes/controlled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/upload/modes/controlled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/upload/modes/controlled/main.vue b/vue-options-api-demos/upload/modes/controlled/main.vue
new file mode 100644
index 00000000..fb5534cc
--- /dev/null
+++ b/vue-options-api-demos/upload/modes/controlled/main.vue
@@ -0,0 +1,46 @@
+<template>
+    <upload
+        :batch="false"
+        :multiple="true"
+        :files="files"
+        @add="onAdd"
+        @remove="onRemove"
+        @progress="onProgress"
+        @statuschange="onStatusChange"
+        :with-credentials="false"
+        :save-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/save'"
+        :remove-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'"
+        />
+</template>
+<script>
+import { Upload } from '@progress/kendo-vue-upload';
+
+export default {
+    components: {
+        upload: Upload
+    },
+    data: function () {
+        return {
+            files: []
+        };
+    },
+    methods: {
+        onAdd (event) {
+            console.log('onAdd: ', event.affectedFiles);
+            this.files= event.newState;
+        },
+        onRemove(event) {
+            console.log('onRemove: ', event.affectedFiles);
+            this.files= event.newState;
+        },
+        onProgress(event) {
+            console.log('onProgress: ', event.affectedFiles, event.serverResponse);
+            this.files= event.newState;
+        },
+        onStatusChange(event) {
+            console.log('onStatusChange: ', event.affectedFiles, event.serverResponse);
+            this.files= event.newState;
+        }
+    }
+}
+</script>
diff --git a/vue-options-api-demos/upload/modes/uncontrolled/main.js b/vue-options-api-demos/upload/modes/uncontrolled/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/upload/modes/uncontrolled/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/upload/modes/uncontrolled/main.vue b/vue-options-api-demos/upload/modes/uncontrolled/main.vue
new file mode 100644
index 00000000..e1d75197
--- /dev/null
+++ b/vue-options-api-demos/upload/modes/uncontrolled/main.vue
@@ -0,0 +1,36 @@
+<template>
+    <div>
+      <upload
+        :default-files="[
+          {
+            name: 'Picture1',
+            extention: '.jpg',
+            size: 4000,
+            progress: 0,
+            status: initial,
+            uid: 'uidPicture1',
+          },
+        ]"
+        :batch="false"
+        :multiple="true"
+        :with-credentials="false"
+        :save-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/save'"
+        :remove-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'"
+      />
+    </div>
+  </template>
+  <script>
+  import { Upload, UploadFileStatus } from '@progress/kendo-vue-upload';
+  
+  export default {
+    components: {
+      upload: Upload,
+    },
+    data() {
+      return {
+        initial: UploadFileStatus.Initial,
+      };
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/upload/restrictions/custom/main.js b/vue-options-api-demos/upload/restrictions/custom/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/upload/restrictions/custom/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/upload/restrictions/custom/main.vue b/vue-options-api-demos/upload/restrictions/custom/main.vue
new file mode 100644
index 00000000..ce2d1018
--- /dev/null
+++ b/vue-options-api-demos/upload/restrictions/custom/main.vue
@@ -0,0 +1,75 @@
+<template>
+    <localization :language="'en-US'">
+      <upload
+        :validate-file="validateFile"
+        :batch="false"
+        :multiple="true"
+        :files="files"
+        @add="onAdd"
+        @remove="onRemove"
+        @progress="onProgress"
+        @statuschange="onStatusChange"
+        :with-credentials="false"
+        :save-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/save'"
+        :remove-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'"
+      />
+    </localization>
+  </template>
+  <script>
+  import { Upload, messages } from '@progress/kendo-vue-upload';
+  import {
+    IntlProvider,
+    LocalizationProvider,
+    loadMessages,
+  } from '@progress/kendo-vue-intl';
+  
+  const enMessages = {
+    upload: {
+      ...messages,
+      customerror: 'Custom Error',
+    },
+  };
+  loadMessages(enMessages, 'en-US');
+  
+  export default {
+    components: {
+      upload: Upload,
+      localization: LocalizationProvider,
+    },
+    data: function () {
+      return {
+        files: [],
+      };
+    },
+    methods: {
+      validateFile(file) {
+        file.validationErrors = file.validationErrors || [];
+        if (file.name.indexOf('a') !== -1) {
+          if (file.validationErrors.indexOf('customerror') < 0) {
+            file.validationErrors.push('customerror');
+          }
+        }
+      },
+      onAdd(event) {
+        this.files = event.newState;
+      },
+      onRemove(event) {
+        console.log('onRemove: ', event.affectedFiles);
+        this.files = event.newState;
+      },
+      onProgress(event) {
+        console.log('onProgress: ', event.affectedFiles, event.serverResponse);
+        this.files = event.newState;
+      },
+      onStatusChange(event) {
+        console.log(
+          'onStatusChange: ',
+          event.affectedFiles,
+          event.serverResponse
+        );
+        this.files = event.newState;
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/vue-options-api-demos/upload/restrictions/extension/main.js b/vue-options-api-demos/upload/restrictions/extension/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/upload/restrictions/extension/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/upload/restrictions/extension/main.vue b/vue-options-api-demos/upload/restrictions/extension/main.vue
new file mode 100644
index 00000000..c4ac2689
--- /dev/null
+++ b/vue-options-api-demos/upload/restrictions/extension/main.vue
@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <upload
+            :restrictions="{
+                allowedExtensions: [ '.jpg', '.png' ]
+            }"
+            :default-files="[]"
+            :with-credentials="false"
+            :save-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/save'"
+            :remove-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'"       
+            />
+    </div>
+</template>
+<script>
+import { Upload } from '@progress/kendo-vue-upload';
+
+export default {
+    components: {
+        upload: Upload
+    }
+}
+</script>
diff --git a/vue-options-api-demos/upload/restrictions/max-file-size/main.js b/vue-options-api-demos/upload/restrictions/max-file-size/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/upload/restrictions/max-file-size/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/upload/restrictions/max-file-size/main.vue b/vue-options-api-demos/upload/restrictions/max-file-size/main.vue
new file mode 100644
index 00000000..83ca0b52
--- /dev/null
+++ b/vue-options-api-demos/upload/restrictions/max-file-size/main.vue
@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <upload
+        :restrictions="{
+            maxFileSize: 4000000
+        }"
+        :default-files="[]"
+        :with-credentials="false"
+        :save-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/save'"
+        :remove-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'"       
+        />
+    </div>
+</template>
+<script>
+import { Upload } from '@progress/kendo-vue-upload';
+
+export default {
+    components: {
+        upload: Upload
+    }
+}
+</script>
diff --git a/vue-options-api-demos/upload/restrictions/min-file-size/main.js b/vue-options-api-demos/upload/restrictions/min-file-size/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/upload/restrictions/min-file-size/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/upload/restrictions/min-file-size/main.vue b/vue-options-api-demos/upload/restrictions/min-file-size/main.vue
new file mode 100644
index 00000000..5963f9f6
--- /dev/null
+++ b/vue-options-api-demos/upload/restrictions/min-file-size/main.vue
@@ -0,0 +1,22 @@
+<template>
+   <div>
+        <upload
+            :restrictions="{
+                minFileSize: 500000
+            }"
+            :default-files="[]"
+            :with-credentials="false"
+            :save-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/save'"
+            :remove-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'"       
+            />
+    </div>
+</template>
+<script>
+import { Upload } from '@progress/kendo-vue-upload';
+
+export default {
+    components: {
+        upload: Upload
+    }
+}
+</script>
diff --git a/vue-options-api-demos/upload/rtl/main.js b/vue-options-api-demos/upload/rtl/main.js
new file mode 100644
index 00000000..be9e20ae
--- /dev/null
+++ b/vue-options-api-demos/upload/rtl/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/vue-options-api-demos/upload/rtl/main.vue b/vue-options-api-demos/upload/rtl/main.vue
new file mode 100644
index 00000000..25dd0778
--- /dev/null
+++ b/vue-options-api-demos/upload/rtl/main.vue
@@ -0,0 +1,21 @@
+<template>
+    <div class="k-rtl" dir="rtl">
+        <upload
+            :default-files="[]"
+            :batch="false"
+            :multiple="true"
+            :with-credentials="false"
+            :save-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/save'"
+            :remove-url="'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'"       
+        ></upload>
+    </div>
+</template>
+<script>
+import { Upload } from '@progress/kendo-vue-upload';
+
+export default {
+    components: {
+        upload: Upload
+    }
+}
+</script>